@charset 'utf-8';

.contents_inner { width:100%; }
.image_top_wrap { width:95%; display:flex; flex-wrap:wrap; margin-left:5%; }
.image_top { width:90%; height:50vh; overflow:hidden; margin-left:auto; border: solid 1px #434343; }
.image_top img { width:100%; height:100%; object-fit:cover;border:1px solid #434343; object-position: 70% center;}
main.bg_beige { padding-bottom: 0;}
@media screen and (min-width:768px) {
    .contents_inner { width:90%; }
    .image_top_wrap { width:87%; margin-left:initial; }
    .image_top { width:75%; height:555px; overflow:hidden; }
    main.bg_beige { padding-bottom: 200px;}

}

.div_text { position: relative; width:100%; margin:-36vh 0 0 0; z-index: 10;}
.div_text span { font-size:14px; }
.div_text strong { width:100%; font-size:20px; margin-bottom:5px; }
.div_text span.inline_pc { display:none; } 
.div_text strong.inline_pc { display:none; }  
.div_text strong small { font-size:14px; margin-right:10px; }
.div_text .title { position:relative; display: inline-block;} 
.div_text .title::before { content: ""; width:77px; height:44px;position: absolute; top:-50px; left:-50px;  background: url("../img/h1_kazari.png") no-repeat center / contain; z-index: 1;}
.div_text .title span { font-size:24px; position:relative; z-index:1; display:inline-block; margin-bottom:20px; letter-spacing:0.05em; }
.div_text .title span::before { content: "";position: absolute; left:-10px; right:0; top:-0.3em; bottom:-0.3em; background: #fff; z-index: -1; }
/* 白帯アニメーション */
.div_text .title span::before {content: "";position: absolute;left: -10px;top: -0.3em;bottom: -0.3em;width: 0;background: #fff;z-index: -1;
  animation: whiteSlide 1.2s cubic-bezier(.4,0,.2,1) 0.1s forwards;
   /* ↑ 最後の「0.1s」が開始ディレイ（0.1秒後にスタート） */
}
@keyframes whiteSlide {
  0%   { width: 0; }
  100% { width: calc(100% + 10px); }
}
@media screen and (min-width:768px) {
    .div_text .title span::before {animation: whiteSlide 1.2s cubic-bezier(.4,0,.2,1) 0.5s forwards;}
}

.div_text .company { margin: 0 0 5px -10px; padding: 0.1em 0.3em; background-color: #fff; font-size: 14px;}
.div_text .name { margin-left: -10px; padding: 0.1em 0.3em; background-color:  #fff; font-size: 16px; }
.div_text .name small { font-size: 12px;}
.h1_kazari { width:77px; }
.pikapika { width:53px; position:absolute; top: -33vw; left:20%; }
@media screen and (min-width:768px) {
    .div_text { margin-top:-400px; margin-left:5%; }
    .div_text .title span { font-size:43px; margin-bottom:35px; }
    .div_text span.inline_pc { margin-top:15px; display:inline-block; } 
    .div_text strong.inline_pc { margin-top:15px; display:inline-block;  } 
    .pikapika { margin-top:100px; margin-left:10%; top: -16vw; left: 50%;}
    .div_text .company {padding: 0.2em 0.3em;  }
    .div_text .name {padding: 0.2em 0.3em;  }


}
h1 { font-size:18px; color:#B0894B; margin-bottom:30px; position:relative; z-index:2; }
h1:before { content:"◆"; color:#B0894B; margin:0 5px 0 0; font-size:14px; }
@media screen and (min-width:768px) {
    h1 { font-size:20px; color:#B0894B; margin-bottom:60px; background:none; }
    h1:before { font-size:16px; }
}

.div_text .name small.shikaku { font-size:11px; margin-left:0px; }
@media screen and (min-width:768px) {
    .div_text strong small.shikaku { font-size:12px; margin-left:initial; display:inline-block; }

}

.contents.message { display:flex; flex-wrap:wrap; margin-top:40px; }
.contents.message div:nth-child(1) { width:90%; margin:0 auto; display:block;} 
.contents.message p { margin-bottom: 20px;}
.contents.message .photo_wrap { width:100%; overflow:hidden; border: solid 1px #434343;}
.contents.message .photo_wrap img { width:100%; height:auto; object-fit:cover; }
.contents.message .photo_wrap2 img { border-bottom:none; }
.contents.message .photo_wrap_all { width:90%; height:265px; position:relative; margin:0 auto; display:block; }
.contents.message .photo_wrap_all .star { width:41px; position:absolute; bottom:30px; right:30px; z-index:1; }
@media screen and (min-width:768px) {
    .contents.message { width:100%; margin-top:initial; margin-left:0%; justify-content:space-between; align-items: flex-end;}
    .contents.message div:nth-child(1) { width:initial; }
    .contents.message div:nth-child { width:75%; }
    .contents.message .photo_wrap_all { width:50%; height:auto; position:relative; margin:0 0 0 auto; }
    .contents.message .photo_wrap_all .star { width:41px; position:absolute; bottom:30px; right:30px; }
    .contents.message .photo_wrap { width:100%; height:auto; overflow:hidden; margin-left:auto; }
    .contents.message p .inline_pc { display:none; }
}
/* === iPad 横向き（landscape）=== */
@media screen and (min-width: 768px) and (max-width: 1111px) and (orientation: landscape) {
    .contents.message .photo_wrap { width:70%; height:auto; overflow:hidden; margin-left:auto; }
}

@media screen and (min-width:1280px) {
     .contents.message .photo_wrap_all { width:31%; height:265px; position:relative; margin-left:initial; }
     .contents.message { width:95%; margin-left:5%; }
     .contents.message p .inline_pc { display:inline-block; }
}

 .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:40%; top:5vh; transform:rotate(-20deg); animation-delay:0.7s; }
 .photo_wrap_all .bird3 { left:70%; 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; } }
 @media screen and (min-width:768px) {
 .photo_wrap_all .bird1 { left:0%; }
 .photo_wrap_all .bird2 { left:10%; }
 .photo_wrap_all .bird3 { left:20%; }

 }

.future_wrap { width:90%; display:flex; flex-wrap:wrap; margin:0 5% 20px 5%;}
.future_wrap li { width:100%; display:flex; flex-wrap:wrap; }
.future_wrap li div:nth-child(1) { width:100%; height:270px; overflow:hidden; margin-bottom: 40px;}
.future_wrap li div:nth-child(1) img { width:100%; height:100%; object-fit: cover; border:1px solid #434343;}
.future_wrap li div:nth-child(2) { width:70%; height:230px; overflow:hidden; margin-left:auto; margin-bottom:40px; }
.future_wrap li div:nth-child(2) img { width:100%; height:100%; object-fit: cover; border:1px solid #434343;}
@media screen and (min-width:768px) {
    .future_wrap { justify-content:space-between; margin-top:130px; margin-bottom:150px; }
    .future_wrap li { display:block; }
    .future_wrap li:nth-child(1) { width:42%; margin-bottom:30px;  }
    .future_wrap li:nth-child(2) { width:53%; }
    .future_wrap li div:nth-child(1) { height:470px; position:relative; margin-bottom: 30px;}
    .future_wrap li div:nth-child(1)::after { content:""; position:absolute; width:203px; height:128px; left:100px; bottom:20px; background: url("../img/sanpo.png") no-repeat center / contain;z-index: 1}
    .future_wrap li div:nth-child(2) { width:70%; height:230px; margin-bottom:initial; position:relative; overflow:visible; }
    .future_wrap li div:nth-child(2)::after {content: "";position: absolute; left:-120px;top:50px; width:130px; height:152px;background: url("../img/kirapika.png") no-repeat center / contain;z-index: 1;          }
}
@media screen and (min-width:1280px) {
    .future_wrap li { width:100%; display:flex; flex-wrap:wrap; }
 .future_wrap li div:nth-child(1) { margin-bottom:0; }
}

.photo_wrap_bottom { width:100%; height:50vh; overflow:hidden; }
.photo_wrap_bottom img { width:100%; height:100%; object-fit:cover; display:block; border-top:1px solid #434343; object-position: 70% center;}
.photo_wrap_bottom::after {content: "";position: absolute; left:50px;bottom:50px; width:50%; height:auto;background: url("../img/music.png") no-repeat center / contain;z-index: 1;          }

@media screen and (min-width:768px) {
    .photo_wrap_bottom { height:50vw; position:relative; }
    .photo_wrap_bottom img { width:80%; margin:0 auto; object-position:initial; object-position:50% 0; border:1px solid #434343;}
    /*.photo_wrap_bottom::after {content: "";position: absolute; left:50px;bottom:50px; width:410px; height:308px;background: url("../img/music.png") no-repeat center / contain;z-index: 1;          }*/
}

.photo_wrap_bottom_animation { width:100%; position:relative; }
.photo_wrap_bottom_animation #anim { width:70%; height:300px; position:absolute; left:-10%; top:-50px; z-index:1; }
@media screen and (min-width:768px) {
    .photo_wrap_bottom_animation #anim { width:50%; height:700px; left:5%; top:-50%; }
}
@media screen and (min-width:1280px) {
    .photo_wrap_bottom_animation #anim { width:800px; height:800px; top:-10%; }
}

.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; text-align: justify; }
@media screen and (min-width:768px) {
    .contents p { font-size:18px; }
    .future_wrap p { font-size:18px; }
    .future_wrap p .inline_pc { display:none; }
}
@media screen and (min-width:1208px) {
.future_wrap p .inline_pc { display:inline-block; }
}

.bg_text { font-size:70px; line-height:1.17em; color:#fff; margin-left:5%; margin-top:-50px; position:relative; z-index:0; }
@media screen and (min-width:768px) {
    .bg_text { font-size:140px; opacity:0.8; margin:initial; }
    .bg_text.message { width:auto; margin-left:auto; margin-top:-100px; position:relative; z-index:1; }
    .bg_text.funfuture { margin-top:-200px; }
}