@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: #291f1d;
}

#freespace5-edit-wrap {
    max-width: 800px;
    margin: 0 auto;
    background: #291f1d;
    overflow-x:hidden;
}

.none {
    display: none;
}

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

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

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

.seasons {
  font-family: "the-seasons", sans-serif;
  letter-spacing: 1.3px;
    }
    
.bwimg {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: filter 3s ease;
opacity: 0;
}  

[data-aos].aos-animate .bwimg{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
opacity: 1;
} 

.grp1 {
position:relative;
margin:0 auto;
}

.grp1 a{
display:block;
}
.grp1 a img {
display:block;
}
.grp1 a:hover img {
opacity:1;
filter:none;
transition:none;
}

.firstimg {
width:100%;
max-width: 800px;
margin:0 auto;
}

.logo {
position:absolute;
width:30%;
top:80%;
left:50%;
transform:translate(-50%,-10%);
opacity:0;
animation: fadeIn 1.5s ease-out forwards;
}

.toptext {
font-size:18px;
position:absolute;
top:92%;
left:50%;
width:95%;
transform:translate(-50%,-50%);
}

@keyframes fadeIn{
from {
opacity:0;
transform:translate(-50%,20%);
}
to{
opacity:1;
transform:translate(-50%,-10%);
}
}

.grp2, .grp6 {
margin:0 auto;
width:70%;
}

.grp3 {
margin:0 auto;
width:100%;

.pic1 {
width:48%;
}
}



.edit-format a img {
  display:block;
  width: 100%;
  height: auto;  
}




.grp4, .grp7, .grp11, .grp15 {
margin:0 auto;
width:100%;
max-width:800px;
}

.grp5 {
margin:0 auto;
width:100%;
gap:0;

.pic2 {
width:48%;
}
}




.grp8 {
display: flex;
justify-content: flex-end;
}

.grp8 img {
  width: auto;
  object-fit: cover;
  display: block;
  height: 480px;
  margin: 0;
}

.grp9 {
display: flex;
justify-content: flex-start;
width:86%;
}

.grp9 img {
  width: auto;
  object-fit: cover;
  display: block;
  height: 480px;
  margin: 0;
}

.grp10, .grp12 {
margin:0 auto;
width:60%;
}

.grp13 {
width:80%;
}

.grp14 {
display: flex;
justify-content: flex-start;

.item1 {
width:50%;
}

}


.credit {
color:#fff;
text-align:center;
font-size: 17px;
}

.creditsec {
padding-bottom:20px;
}
   

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

  } 






@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) {
.logo {
  top: 78%;
}

.toptext {
  font-size: 10px;
  top: 93%;
  width: 90%;
}

.grp8 img {
  height: 230px;
}

.credit {
  font-size: 11px;
}

}


.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;
}