@charset 'utf-8';

main { padding-bottom:100px; }

.contents_inner { width:100%; margin-top:40px; display:flex; flex-wrap:wrap; }
.image_top_wrap { width:100%; height:auto; display:flex; flex-wrap:wrap; position:relative; padding-bottom:45px; }
.image_top_wrap .text_tate { width:5%; position:absolute; top:100px; right:5%; display:block; z-index:2; }
.image_top { width:90%; height:50vh; overflow:hidden; margin-left:auto; }
.image_top img { width:100%; height:100%; object-fit:cover;border:1px solid #434343; object-position: 70% center;}
.image_top_wrap .kirakiraright { width:50px; right:17%; position:absolute; top:80px; }
@media screen and (min-width:768px) {
    .contents_inner { width:90%; margin-top:0px; }
    .image_top_wrap { width:90%; margin:100px auto 0 auto; display:block; border-bottom:0; /*border-bottom:1px solid #434343;*/ }
    .image_top_wrap .text_tate  { display:none; }
    .image_top { width:75%; height:555px; overflow:hidden; }
    .width90 { width:initial; margin:initial; }
    .image_top_wrap .kirakiraright { right:25%; }

}
@media screen and (min-width:1280px) {
    .image_top_wrap { max-width:1280px; }
}


.div_text { width:100%; margin:0 0 0 0; border-bottom:1px solid #707070; padding-bottom:40px; }
.div_text span { font-size:14px; display:inline-block; }
.div_text strong { width:100%; font-size:20px; display:inline-block; }
.div_text strong.inline_pc { display:none; }
.div_text strong small { font-size:14px; }
.div_text h1 { position:absolute;  margin-left:5%; top:350px; z-index: 10;}
.div_text h1 span { font-size:24px; position:relative; z-index:1; display:inline-block; margin-bottom:20px; letter-spacing:0.05em; color:#fff; }
.div_text h1 span::before {content: "";position: absolute; left:-10px; right:0; top:-0.3em; bottom:-0.3em; background: #fff; z-index: -1; }
.div_text h1 span.bg_blue::before { background:#406CE6;}
.div_text h1 span.bg_pink::before { background:#FF614D;}
.h1_kazari { width:77px; }
.pikapika {width:53px; }
@media screen and (min-width:768px) {
    .div_text { width:100%; position:absolute; left:5%; top:350px; margin:0; border-bottom:none; }
    .div_text h1 { position:static; margin:0 0 16px 0; top:45vh; }
    .div_text h1 span { font-size:43px; }
    .div_text span { margin-top:15px; }
    .div_text strong { width:100%; display:inline-block; }
    .div_text strong.inline_pc { display:block; }
    .pikapika { margin-top:100px; margin-left:10%; }
    .div_info_pc .title_en { margin-top:0; }
    .div_info_pc .music { width:265px; margin-bottom:50px; }

}





h2 { font-size:24px; display:flex; align-items:center; margin-bottom:30px; }
h2.margintop { margin-top:80px; }
@media screen and (min-width:768px) {
    h2 { font-size:40px; }
}
h2 .square { width:20px; margin-right:10px; }

.contents.message { display:flex; flex-wrap:wrap; }
.contents.message div:nth-child(1) { width:90%; margin:0 auto; display:block;}
.contents.message div:nth-child(2) { width:90%; margin:100px auto 80px auto; display:block;}
.contents.message .photo_wrap { width:100%; overflow:hidden; }
.contents.message .photo_wrap.midium {border:1px solid #434343; }
.contents.message .photo_wrap img { width:100%; height:100%; object-fit:cover;border-bottom:1px solid #434343; }
.contents.message .width90 { width:90%; margin:0 auto; display:block; }
@media screen and (min-width:768px) {
    .contents.message { width:95%; /*margin-left:5%; */justify-content:space-between; align-items: flex-end;}
    .contents.message div:nth-child(1) { width:initial; /*border-bottom:1px solid #434343; */}
    .contents.message div:nth-child { width:75%; }
    .contents.message .photo_wrap_all { width:31%; height:265px; position:relative; }
    .contents.message .photo_wrap_all .star { width:41px; position:absolute; bottom:30px; right:30px; }
    .contents.message .photo_wrap { width:100%; height:100%; overflow:hidden; }
    .photo_wrap.medium.inline_pc { width:62%; height:100%; overflow:hidden;margin-top:50px; margin-left:51%; position:relative; z-index:5; }
    .photo_wrap.medium.inline_pc img {  border:1px solid #434343; }
    .contents.message .width90 { width:100%; margin:initial; display:block; margin-top:50px; }
}
@media screen and (min-width:1280px) {
 .contents.message .width90 { margin-top:initial; }
 .photo_wrap.medium.inline_pc { margin-top:initial; }
}


.contents.message .photo_wrap.medium.parallax__inner.inline_pc { display:none; }
.contents.message .inline_sp { display:block; }
@media screen and (min-width:768px) {
.contents.message .photo_wrap.medium.parallax__inner.inline_pc { display:block; }
.contents.message .inline_sp { display:none; }
}

 .photo_wrap_all .bird { width:28px; position:absolute; z-index:2; will-change:transform,opacity; animation:flyPath 6s linear infinite; }
 .photo_wrap_all .bird1 { left:0%; top:7vh; transform:rotate(20deg); animation-delay:0s; }
 .photo_wrap_all .bird2 { left:10%; top:5vh; transform:rotate(-20deg); animation-delay:0.7s; }
 .photo_wrap_all .bird3 { left:20%; top:2vh; transform:rotate(10deg); animation-delay:1.4s; }

@keyframes flyPath { 0% { transform:translate(0,0) rotate(10deg); opacity:0; } 5% { opacity:1; } 15% { transform:translate(15vw,-6vh) rotate(12deg); } 20% { transform:translate(20vw,-4vh) rotate(8deg); } 30% { transform:translate(30vw,-12vh) rotate(6deg); } 35% { transform:translate(35vw,-9vh) rotate(4deg); } 50% { transform:translate(50vw,-18vh) rotate(0deg); } 55% { transform:translate(55vw,-15vh) rotate(-3deg); } 70% { transform:translate(70vw,-26vh) rotate(-6deg); } 75% { transform:translate(75vw,-22vh) rotate(-8deg); } 100% { transform:translate(102vw,-32vh) rotate(-5deg); opacity:0; } }


.photo_wrap_bottom { width:100%; height:50vh; overflow:hidden; position:relative; }
.photo_wrap_bottom img { width:100%; height:100%; object-fit:cover; display: block; border-top:1px solid #434343; border-bottom:1px solid #434343;}
.photo_wrap_bottom img.staff2_large_kazari { width:45vw; height:auto; position:absolute; top:10vw; left:5%; z-index:2; border:none; }
.photo_wrap_bottom img.staff1_kazari { width:10vw; height:auto; position:absolute; z-index:2; border:none; top:10vw; right:5vw;  }
@media screen and (min-width:768px) {
    .photo_wrap_bottom { height:810px; }
    .photo_wrap_bottom img.staff2_large_kazari { width:30vw; height:auto; position:absolute; top:10vw; left:22vw; z-index:2; border:none; }
    .photo_wrap_bottom img.staff1_kazari { width:4vw; top:10vw; right:27vw;  }

}



.contents p { font-size:16px; line-height:2em; position:relative; z-index:1; text-align: justify;}
.future_wrap p { font-size:16px; line-height:2em; }
@media screen and (min-width:768px) {
    .contents p { font-size:18px; }
    .future_wrap p { font-size:18px; }
}

.bg_text { font-size:70px; line-height:1.17em; color:#fff; margin-left:5%; }
.div_info_sp { width:289px; margin:10px auto 0 auto; display:block;  }
.div_info_sp  span { width:100%; margin:0 10px 0 0; display:inline; font-size:14px; }
.div_info_sp  strong { width:100%; display:inline-block; font-size:18px; margin-bottom:20px; }
.div_info_sp  small { width:100%; display:inline-block; color:#434343; }
.div_info_pc  { display:none; }
@media screen and (min-width:768px) {
    .bg_text { font-size:140px; opacity:0.8; margin:initial; position:relative; }
    .bg_text.message { width:auto; margin-left:auto; margin-top:-100px; position:relative; z-index:1; }
    .bg_text.funfuture { margin-top:-200px; }
    .div_info_sp { display:none; }
    .div_text .div_info_pc { width:380px; position:absolute; right:0; bottom:-150px; display:block; z-index:10; }
    .div_info_pc .title_en { font-size:42px; line-height:1.1em; color:#fff; }
    .div_info_pc .title_en span { font-size:42px; line-height:1.1em; }
    .div_info_pc  span { width:100%; display:inline; font-size:14px; }
    .div_info_pc  strong { width:100%; display:inline-block; font-size:18px; margin-bottom:20px; }
    .div_info_sp  small { color:#fff; }
    .div_info_pc .fukidashi { width:380px; height:270px; background: url("../img/fukidashi1.svg") no-repeat center/contain;z-index: -1; background-size:cover;
    display:flex; align-items: center;}
    .div_info_pc .fukidashi small.gothic { width:auto; display:inline-block; color:#fff;  display: inline-block; margin:50px 0 0 50px; color:#fff; }
    .div_info_pc .fukidashi2 { width:380px; height:270px; background: url("../img/fukidashi2.svg") no-repeat center/contain;z-index: -1; background-size:cover;
    display:flex; align-items: center;}
    .div_info_pc .fukidashi2 small.gothic { width:auto; display:inline-block; color:#fff;  display: inline-block; margin:50px 0 0 50px; color:#fff; }





}



.arch {width:289px;height:auto;overflow:hidden;border-radius:289px 289px 0 0;margin-bottom:10px;border:1px solid #434343;position:relative;margin:100px auto 0 auto; }
.arch img {width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s ease;}
@media screen and (min-width:768px){
.arch { width:min(100%,530px); aspect-ratio:530/750; border-radius:9999px 9999px 0 0; overflow:hidden; margin:0 auto 100px auto; display:block; position:relative; }


}
.kirakiraleft { width:50px; margin-left:5%; position:absolute; top:150px; }
.kirakiraright { width:50px; right:25%; position:absolute; top:50px; }
/*メモ*/
.contents.memo { width:90%; margin:0 auto; display:block; }
.memo_inner { width:90%; margin:40px 5%; display:flex; flex-wrap:wrap; position: relative;}
.memo_inner strong { font-size:24px; line-height:1.5em; margin-bottom:20px; }
.text_wrap { display:flex; flex-wrap:wrap; position: absolute;right: -19px;top: -30px;width: 30vw;}
.text_wrap img{width: 100%;}
.staff_small { width:100%; margin-top:20px; }
.kodawari { width:130px; margin-bottom:20px;  }
@media screen and (min-width:768px){
    .kirakiraleft {margin-left:15%;}
    .contents.memo { width:100%; border:1px solid #000; margin-top:80px; }
    .memo_inner { width:100%; padding:40px 0; margin:0; position:relative; }
    .memo_inner div:nth-child(1) { width:40%; flex-direction: column;}
    .memo_inner div:nth-child(2) { width:55%; position:relative; }
    .memo_inner div:nth-child(2) .illust { display:none; }
    .memo_inner div .staff_small { width:90%; display:block; border:1px solid #000000; margin-bottom:initial; border-left:0; }
    .memo_inner strong { font-size:32px; margin-top:50px; }
    .kodawari { margin-bottom:20px; margin-left:20px; }
    .memo_inner div:nth-child(2) .illust.inlin_pc { display:none; }
    .kodawari { width:260px; }
    .staff_small { width:60%;}
    .text_wrap{position: initial;}
    .memo_inner div .inline_sp{display: none;}
    .text_wrap img{width: 260px;}
}
@media screen and (min-width:1280px){
    .kodawari { margin-bottom:20px; margin-left:40%; }
     .memo_inner div:nth-child(2) { width:50%;}
    .memo_inner div:nth-child(2) .illust { position:absolute; right:40px; bottom:20px; display:block; }
    .memo_inner strong { font-size:40px; margin-top:50px; }
}




/*線を引く*/
 .staff1opacity { display:none; }
@media screen and (min-width:768px){
  .line-animate{ position:absolute; background:#000; transition:transform 1.0s ease-out; will-change:transform; visibility:hidden; }
  .yokolinetop{ left:0; top:48.2vw; width:50%; height:1px; transform:scaleX(0); transform-origin:left center; }
  .yokolinebottom{ left:0; top:91vw; width:80%; height:1px; transform:scaleX(0); transform-origin:left center; }
  .takalineleft{ left:5%; top:48.2vw; width:1px; height:0; transform:scaleY(0); transform-origin:center top; } /* ← 高さはJSで入れる */
  .line-animate.show.yokolinetop,.line-animate.show.yokolinebottom{ transform:scaleX(1); visibility:visible; }
  .line-animate.show.takalineleft{ transform:scaleY(1); visibility:visible; }

  .staff1opacity { position:absolute; left:0; top:141.5vh; display:block; }

}


.page_link { width:150px; margin:40px auto 0 auto; display:flex; align-items:center; position:relative; }
.page_link img { margin-left:10px; }
.page_link_wrap { display:block; text-align:center; margin-top:40px; }
.page_link::before {content: "›"; position: absolute;right:0px;top: 50%;transform: translateY(-50%);font-size:15px;}

.page_link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: currentColor; transition: width 0.3s ease; }
.page_link:hover::after { width: 100%; }

.photo_wrap_bottom.inline_sp { display:block; }
.photo_wrap_bottom.inline_sp .staff_large { width:100%; }
.photo_wrap_bottom.inline_sp.staff1_kazari  { width:10vw; height:auto; position:absolute; z-index:2; border:none; top:10vw; right:5vw;  }
.photo_wrap_bottom.inline_sp.staff2_large_kazari { width:45vw; height:auto; position:absolute; top:10vw; left:5%; z-index:2; border:none; }
@media screen and (min-width:768px){
    .page_link_wrap { margin-top:80px; }
    .page_link { margin-top:100px; }
    .photo_wrap_bottom.inline_sp { display:none; }
}

@media screen and (max-width:768px){
    main { padding-bottom:80px; }

}



/*扉*/
.page_link_wrap .door{width:149px;height:188px;position:relative;display:inline-block;perspective:1000px; overflow:visible; }
.page_link_wrap .door .door_inner{width:149px;height:188px;position:relative;z-index:2;}
.page_link_wrap .door .tobira{width:149px;height:188px;position:absolute;top:0;left:0;z-index:3;transform-origin:left center;transform:rotateY(var(--door-angle,0deg));backface-visibility:hidden;will-change:transform;transition:transform 0.6s cubic-bezier(.25,1,.5,1);animation:doorAuto 6.4s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes doorAuto{0%,90%,100%{--door-angle:0deg;}45%,50%{--door-angle:-20deg;}}
.page_link_wrap .door:hover .tobira{animation:none;transform:rotateY(-35deg);transition:transform 0.55s cubic-bezier(.25,1,.5,1);}

.page_link_wrap .door::after {
  content:"";
  position:absolute;
  top:-30px;
  right:-80px;
  width:90px;
  height:68px;
  background:url("../img/lookother.svg") no-repeat center/contain;
  pointer-events:none;
  transform-origin:center bottom; /* ← 下を軸にゆらゆら */
  animation: fukidashiSwing 3s ease-in-out infinite;
}

/* ==== 左右にゆらゆらするアニメーション ==== */
@keyframes fukidashiSwing {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(3deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}


.page_link_wrap .door::before{content:"";position:absolute;bottom:0;right:-100px;width:100px;height:50px;background:url("../img/bird_animation.png") no-repeat center/contain;pointer-events:none;}
@media screen and (min-width:768px){
.page_link_wrap .door{width:188px;height:251px;}
.page_link_wrap .door .door_inner{width:188px;height:251px;}
.page_link_wrap .door .tobira{width:188px;height:251px}

.page_link_wrap .door::after{content:"";position:absolute;top:-30px;right:-145px;width:145px;height:90px;background:url("../img/lookother.svg") no-repeat center/contain;pointer-events:none;}
.page_link_wrap .door::before{content:"";position:absolute;bottom:0;right:-145px;width:150px;height:50px;background:url("../img/bird_animation.png") no-repeat center/contain;pointer-events:none;}


}