@charset "utf-8";
/* MV */
.mv{line-height: 1; width: 100%; position: relative; overflow: hidden; background: rgba(124, 165, 190, 1);}
.mv img{width: 100%;}

.mv-img{width: 100%; opacity: 0; transition: opacity 1s;}
.mv.is-view .mv-img{opacity: 0.1;}

.mv-mask{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/top/mv-img.webp") no-repeat top left/100% 100%;
clip-path: circle(0% at 90% 74%); transition: clip-path 5s 1.2s;}
.mv.is-view .mv-mask{animation: maskPc 5.2s 1.2s forwards;}

@keyframes maskPc {
    0%   { clip-path: circle(0% at 90% 74%); }
    25%  { clip-path: circle(9% at 90% 74%); }    
    44%  { clip-path: circle(9% at 90% 74%); }
    100% { clip-path: circle(150% at 90% 74%); }
}

.mv-cap{position: absolute; width: 4.8611%; bottom: 12.25%; left: 1.389%; z-index: 1;
opacity: 0; transition: opacity 1s 5.5s;}
.mv.is-view .mv-cap{opacity: 1;}

.mv-txt{position: absolute; width: 100%; bottom: 0; left: 0; z-index: 1;
opacity: 0; transform: translateY(30px); transition: opacity 1s 5.5s, transform 1s 5.5s;}
.mv.is-view .mv-txt{opacity: 1; transform: translateY(0);}

.mv-tit{position: absolute; width: 100%; bottom: 30.25%; left: 0; z-index: 1;
opacity: 0; transform: translateY(30px); transition: opacity 1s 7s, transform 1s 7s;}
.mv.is-view .mv-tit{opacity: 1; transform: translateY(0);}

.mv-snow{position: absolute; inset: -10% -5%; pointer-events: none; will-change: transform;
opacity: 0; transition: opacity .5s 9s;}
.mv.is-view .mv-snow{opacity: 1;}

.mv-snow .flake{position: absolute; top: -10px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(220,235,255,0.5) 50%, transparent 100%);
animation: fall linear infinite;}

@keyframes fall {
    0%   { transform: translateY(0) translateX(0); opacity: var(--a); }
    85%  { opacity: var(--a); }
    100% { transform: translateY(110vh) translateX(var(--dx)); opacity: 0; }
}

@media screen and (min-width: 769px) and (max-height: 55.5vw) and (min-height: 42.5vw){
    .mv{height: 100vh;}
    .mv-wrap{position: absolute; bottom: 0; left: 0; width: 100%; height: 55.5556vw;}
}

@media screen and (max-width: 768px){
    .mv-mask{background: url("../img/top/mv-img_sp.webp") no-repeat top left/100% 100%; clip-path: circle(0% at 56% 74%);}    
    .mv.is-view .mv-mask{animation: maskSp 5.2s 1.2s forwards;}

    .mv-tit{bottom: 0;}
    .mv-cap{width: 33.8667%; bottom: 11%; left: 6.5%;}
}

@keyframes maskSp {
    0%   { clip-path: circle(0% at 56% 74%); }
    25%  { clip-path: circle(15% at 56% 74%); }    
    44%  { clip-path: circle(15% at 56% 74%); }
    100% { clip-path: circle(150% at 56% 74%); }
}

/* Message */
.message{text-align: center; font-size: min(4vw,4rem); line-height: 1.75; font-weight: 500; padding: 10rem 0;}
.message p:not(:last-of-type){margin: 0 0 2.7rem;}
.message [data-furigana]:before{font-size: 1.4rem; top: -0.25em;}

@media screen and (max-width: 768px){
    .message{text-align: left; font-size: min(6.9vw,2.6rem); line-height: 1.7; padding: 5rem 2rem;}
    .message p:not(:last-of-type){margin: 0 0 2rem;}
    .message [data-furigana]:before{font-size: 1rem; top: -0.3em;}
}

/* Intro */
.intro{background: rgba(104, 150, 187, 0.20); padding: 9rem 2rem 22.5rem; position: relative; margin: 0 0 10.5rem;}
.intro-wrap{max-width: 973px; margin: 0 auto; width: 100%;}
.intro-txt{font-size: 2.2rem; line-height: 1.91; letter-spacing: 0.05em; font-weight: 600;}
.intro-img{display: flex; justify-content: center; align-items: flex-end; line-height: 1; position: absolute; bottom: -7px; left: 0; width: 100%; padding: 0 2rem;}
.intro-img figure:nth-of-type(2){margin: 0 0 6px min(8vw,8.7rem);}

.intro-img{opacity: 0; transition: opacity 1s;}
.intro-img.is-view{opacity: 1;}

.intro-img figure:nth-of-type(1){transform: translateY(103%); transition: transform 1s;}
.intro-img.is-view  figure:nth-of-type(1){opacity: 1; transform: translateY(0);}

@media screen and (max-width: 768px){
    .intro{padding: 6rem 2rem calc(18vw + 3rem); margin: 0 0 5rem;}
    .intro-txt{font-size: 1.6rem; line-height: 1.875; font-weight: 500;}
    .intro-img{bottom: -1.5vw;}
    .intro-img figure:nth-of-type(2){display: none;}
}

/* Exhibition */
.exhibit{margin: 0 0 8rem;}
.exhibit-tit{font-size: 3.6rem; font-weight: 700; line-height: 1.2; padding: 0 0 3.3rem; border-bottom: 2px solid rgba(104, 150, 187, 0.5);}
.exhibit-item{padding: 3.7rem 0; border-bottom: 2px solid rgba(104, 150, 187, 0.5);}
.exhibit-item .tit{font-size: 2.8rem; line-height: 1.2; font-weight: 700; margin: 0 0 7px;}
.exhibit-item .info{font-size: 2.2rem; line-height: 1.54; font-weight: 700; margin: 0 0 1.1rem;}

@media screen and (max-width: 768px){
    .exhibit{margin: 0 0 6rem;}
    .exhibit-tit{font-size: min(5.8vw,2.3rem); padding: 0 0 2.4rem;}
    .exhibit-item{padding: 2.4rem 0;}
    .exhibit-item .tit{font-size: 2.2rem; margin: 0 0 1rem;}
    .exhibit-item .info{font-size: 1.6rem; margin: 0 0 0.7rem;}
}

/* SNS */
.sns{margin: 0 0 6.7rem;}
.sns-tit{background: rgba(104, 150, 187, 0.15); color: #1CB1D8; font-size: 2.6rem; line-height: 1.34; font-weight: 600; text-align: center; padding: 1.1rem 0; margin: 0 0 3.5rem;}

.sns-list{display: flex; justify-content: center; align-items: center;}
.sns-list li{margin: 0 2rem;}
.sns-list a{background: #6F6F6F; display: block; text-indent: -9999px;}
.sns-list a:hover{background: #1CB1D8;}

.sns-list a.sns-x{width: 36px; height: 38px;
mask: url("../img/common/ic-x.svg") no-repeat top left/100% 100%;
-webkit-mask: url("../img/common/ic-x.svg") no-repeat top left/100% 100%;}

.sns-list a.sns-inst{width: 38px; height: 38px;
mask: url("../img/common/ic-instagram.svg") no-repeat top left/100% 100%;
-webkit-mask: url("../img/common/ic-instagram.svg") no-repeat top left/100% 100%;}

.sns-list a.sns-note{width: 87px; height: 19px;
mask: url("../img/common/ic-note.svg") no-repeat top left/100% 100%;
-webkit-mask: url("../img/common/ic-note.svg") no-repeat top left/100% 100%;}

@media screen and (max-width: 768px){
    .sns{margin: 0 0 6rem;}
    .sns-tit{font-size: 2.8rem; padding: 1rem 0; margin: 0 0 2.8rem; letter-spacing: 0.1em;}
    .sns-list li{margin: 0 1.8rem;}
}

/* Contact */
.contact{border: 1px solid #787878;}
.contact-head{font-size: 1.8rem; line-height: 1; font-weight: 600; padding: 2.5rem min(6vw,6.5rem); position: relative; cursor: pointer; transition: .3s;}
.contact-head i{width: 3rem; height: 3rem; margin-top: -1.5rem; display: block; position: absolute; top: 50%; right: 2.5rem; transition: .3s; border-radius: 25px; background: #1CB1D8;}
.contact-head i:before,
.contact-head i:after{content: ""; background: #fff; display: block; position: absolute;}
.contact-head i:before{top: 7px; left: 14px; width: 2px; height: 16px;}
.contact-head i:after{top: 14px; left: 7px; width: 16px; height: 2px;}

.contact-head:hover{color: #1CB1D8;}
.contact.is-open .contact-head i:before{display: none;}

.contact-wrap{display: grid; grid-template-rows: 0fr; overflow: hidden; transition: 0.3s;}
.contact.is-open .contact-wrap{grid-template-rows: 1fr; padding: 1.5rem 0 4rem;}

.contact-inner{min-height: 0; padding: 0 min(6vw,6.5rem); letter-spacing: 0.05em; font-weight: 500;}
.contact-inner p:not(:last-of-type){margin: 0 0 3rem;}

.contact a:hover{text-decoration: underline; text-underline-offset: 0.25em; color: #1CB1D8;}

@media screen and (max-width: 768px){
    .contact-head{font-size: 1.6rem; line-height: 1.56; letter-spacing: 0.1em; padding: 2rem;}
    .contact-head i{right: 2rem;}
    
    .contact.is-open .contact-wrap{padding: 0 0 2rem;}
    .contact-inner{padding: 0 2rem;}
    .contact-inner p:not(:last-of-type){margin: 0 0 1.5rem;} 
    .contact-inner p:nth-of-type(2){margin-right: -10px;}
}