@charset "UTF-8";

.pane-contents,
.pane-main {
    max-width: 100vw;
}

.container {
    width: 100vw;
}

.block-category-nav {
    max-width: 1080px;
    margin: 0 auto;
}

.block-category-main {
    max-width: 1080px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {

    .pane-main {
        margin-top: -10px;
    }
}


/* ==================================================
Page Head Custom
================================================== */
#page-head {

}

h2.block-category--hn {
    display: none;
}

@media screen and (max-width: 768px) {

    #page-head {
    }

    h2.block-event-page--header {
        display: none;
    }
    
}

/* ==================================================
LP Contents / Free space 5
================================================== */
.pane-contents.freespace5 {
    background: #fbfbf6;
}

#freespace5-edit-wrap {
    max-width: 900px;
    margin: 0 auto;
    background: #fbfbf6;
}

.none {
    display: none;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.bread {
    max-width: 900px;
    margin: 0 auto 30px;
    padding-top: 15px;
    text-align: left;
}

h2.title-txt {
    border: none;
    width: 35%;
    margin: 0 auto;
}

/* loader */
.loader {
  position: fixed;
  inset: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 2.3s ease;
  transition-delay: 0.6s;
}

.loader .logo {
  width: 180px;
  height: auto;
}

/* invisible */
.loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

.full {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

.img-s {
	margin: 0 auto;
	width: 48%;
}

.img-m {
	margin: 0 auto;
	width: 60%;
}

.img-l {
	margin: 0 auto;
	width: 70%;
}


.fleximg {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 calc(50% - 50vw);
    margin-top: 0px;
  width: 100vw;
}

.fleximg .img1{
width:48%;
height:auto;
display:block;
}
.fleximg .img2{
width:50%;
height:auto;
display:block;
}

.fleximg .img3{
width:42%;
padding-top:40px;
}

.fleximg .img4{
width:42%;
padding-right:20px;
}

.fleximg .img5{
width:42%;
padding: 20px 0px 30px 0px;
margin-left:0;
}

.fleximg .img6{
width:45%;
}

.fleximg a img {
width:100%;
height:auto;
display:block;
}

.fleximg .img1,
.fleximg .img2{
display:block;

}


    
.staffcredit {
position:relative;
}

.stafftext {
position: absolute;
  left: 50%;
  top: 45%;
  font-size: 17px;
  z-index: 6;
  transform: translate(-50%,-50%);
  line-height: 3;
}

    [data-aos].aos-animate img {
      transform: scale(1);
    }

    .plus {
      position: absolute;
      left: 10px;
      bottom: 10px;
      background: none;
      border: none;
      font-size: 30px;
      color: #000;
      cursor: pointer;
      z-index: 2;
    }

    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.85);
      color: #fff;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 20px;
      text-align: center;
      z-index: 10;
    }

    .overlay.active {
      display: flex;
    }

    .overlay .close {
      position: absolute;
      left: 10px;
      bottom: 10px;
      background: none;
      border: none;
      font-size: 30px;
      color: #fff;
      cursor: pointer;
      z-index: 11; /* これも明示的に前面へ */
    }

    .text p {
      margin: 10px 0;
      }

}
   
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  } 






@media screen and (max-width: 768px) {

    h2.title-txt {
        width: 60%;
    }

    .look-image {

        .flex {
            gap: 2px;
    
            .img {
                width: calc(33.3333% - 2px* 2 / 3);
            }
        }
    }

}




/* Fade in */
.imgFade {
    opacity: 0;
}

.imgAnim {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes imgAnim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@media screen and (max-width: 480px) {
.stafftext {
  left: 50%;
  top: 50%;
  font-size: 11px;
  white-space: nowrap;
  text-shadow: 1px 1px 3px white;
}
}


.imgFade.fadeB {
    opacity: 0;
    transform: translateY(-50px);
    z-index: 5;
}

.imgAnim.fadeB {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.imgFade.fadeT {
    opacity: 0;
    transform: translateY(50px);
    position: relative;
    z-index: 5;
}

.imgAnim.fadeT {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.imgFade.fadeR {
    opacity: 0;
    transform: translateX(50px);
    position: relative;
    z-index: 5;
}

.imgFade.fadeL {
    opacity: 0;
    transform: translateX(-50px);
    position: relative;
    z-index: 5;
}

.imgAnim.fadeR {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.imgAnim.fadeL {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}