@charset 'utf-8';



/*ストーリー*/
.contents.story .title_copy { font-size:24px; line-height:2em; margin-bottom:40px; }
.contents.story .photo_box { margin-bottom:80px; }
.contents.story .photo_box li {width:228px;position:relative;/* margin:0 auto;*/ }
.contents.story .photo_box { display:block; }
.contents.story .photo_box li {margin-bottom:20px;}
.contents.story .photo_box li:nth-child(1) .staff1_kazari {width:12%;height:auto;position:absolute;top:15%;right:15%;z-index:2;border:none;}
.contents.story .photo_box li:nth-child(2) .staff2_kazari {width:80%;height:auto;position:absolute;z-index:1;top:10%;left:10%;border:none;}
.contents.story .photo_box li .arch {width:228px;height:auto;overflow:hidden;border-radius:228px 228px 0 0;margin-bottom:10px;border:1px solid #434343;position:relative;}
.contents.story .photo_box li .arch img {width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s ease;}
.contents.story .photo_box li a:hover img {transform:scale(1.1);}
.contents.story .photo_box li strong.staff_title {font-size:18px;line-height:1.5em;position:absolute;z-index:10;}
.contents.story .photo_box li:nth-child(1) strong.staff_title {top:initial;left:-10px; bottom:80px; }
.contents.story .photo_box li:nth-child(2) strong.staff_title {top:initial;left:-10px; bottom:80px; }
.contents.story .photo_box li:nth-child(3) strong.staff_title {top:initial;left:-10px; bottom:80px; }
.contents.story .photo_box li:nth-child(4) strong.staff_title {top:initial;left:-10px; bottom:80px; }
.contents.story .photo_box li:nth-child(5) strong.staff_title {top:initial;left:-10px; bottom:80px; }
.contents.story .photo_box li:nth-child(6) strong.staff_title {top:initial;left:-10px; bottom:80px; }
.contents.story .photo_box li:nth-child(1) strong.staff_title span {display:inline-block;padding:0.1em 0.3em;line-height:1.2em;color:#fff;background:#FC9237;}
.contents.story .photo_box li:nth-child(2) strong.staff_title span {display:inline-block;padding:0.1em 0.3em;line-height:1.2em;color:#fff;background:#406CE6;}
.contents.story .photo_box li:nth-child(3) strong.staff_title span {display:inline-block;padding:0.1em 0.3em;line-height:1.2em;color:#fff;background:#FF614D;}
.contents.story .photo_box li:nth-child(4) strong.staff_title span {display:inline-block;padding:0.1em 0.3em;line-height:1.2em;color:#fff;background:#0ACB90;}
.contents.story .photo_box li:nth-child(5) strong.staff_title span {display:inline-block;padding:0.1em 0.3em;line-height:1.2em;color:#fff;background:#57C1F2;}
.contents.story .photo_box li:nth-child(6) strong.staff_title span {display:inline-block;padding:0.1em 0.3em;line-height:1.2em;color:#fff;background:#D8CA25;}

.contents.story .photo_box li:nth-child(2) strong.staff_title.pink span {background:#FF614D;}

@media screen and (max-width:768px){
  .contents.story .photo_box li { margin:0 auto 30px auto; }
}


@media screen and (min-width:768px){
  .contents.story .title_copy { font-size:32px; margin-bottom:initial; }
  .contents.story .contents_inner {width:82%;margin-left:7%; padding-top:130px; margin-top:initial; }
  .contents.story .photo_box { width:80%; display:flex; justify-content:end; flex-wrap:wrap; margin:0 auto 2rem 15%; }
  .contents.story .photo_box li {width:50%;}
  .contents.story .photo_box li strong.staff_title { font-size:26px; }

  .contents.story .photo_box li:nth-child(1) .arch { position:relative;}
  .contents.story .photo_box li:nth-child(1) .arch::after{content: "";position: absolute;width:53px;height:68px; background-image: url("/staff_test/img/1/kazari.png");background-size: contain;background-repeat: no-repeat;
  top:45%;right:10px;}
  .contents.story .photo_box li:nth-child(2) .arch {margin-top:-35px; position:relative;}
  .contents.story .photo_box li:nth-child(2) .arch::after{content: "";position: absolute;width:53px;height:68px; background-image: url("/staff_test/img/2/kazari.png");background-size: contain;background-repeat: no-repeat;
  top:15%;right:20px;}
  .contents.story .photo_box li:nth-child(3) .arch {position:relative;}
  .contents.story .photo_box li:nth-child(3) .arch::after{content: "";position: absolute;width:296px;height:225px; background-image: url("/staff_test/img/3/kazari.png");background-size: contain;background-repeat: no-repeat;
  top:15%;left:0;}
  .contents.story .photo_box li:nth-child(4) .arch {margin-top:-35px; margin-right:0;position:relative;}
  .contents.story .photo_box li:nth-child(4) .arch::after{content: "";position: absolute;width:305px;height:254px; background-image: url("/staff_test/img/4/kazari.png");background-size: contain;background-repeat: no-repeat;
  bottom:40px;left:20px;}
  .contents.story .photo_box li:nth-child(5) .arch{position:relative;}
  .contents.story .photo_box li:nth-child(5) .arch::after{content: "";position: absolute;width:287px;height:280px; background-image: url("/staff_test/img/5/kazari.png");background-size: contain;background-repeat: no-repeat;
  bottom:40px;left:20px;}
  .contents.story .photo_box li:nth-child(6) .arch {margin-top:-35px; position:relative;}
  .contents.story .photo_box li:nth-child(6) .arch::after{content: "";position: absolute;width:62px;height:69px; background-image: url("/staff_test/img/6/kazari.png");background-size: contain;background-repeat: no-repeat;
  top:45%;right:20px;}

  .contents.story .photo_box li:nth-child(1) strong.staff_title {bottom:80px;left:-25px;top:auto;}
  .contents.story .photo_box li:nth-child(2) strong.staff_title {bottom:115px;left:-25px;top:auto;}
  .contents.story .photo_box li:nth-child(3) strong.staff_title {bottom:80px;left:-25px;top:auto;}
  .contents.story .photo_box li:nth-child(4) strong.staff_title {bottom:150px;left:-25px;top:auto;}
  .contents.story .photo_box li:nth-child(5) strong.staff_title {bottom:80px;left:-25px;top:auto;}
  .contents.story .photo_box li:nth-child(6) strong.staff_title {bottom:150px;left:-25px;top:auto;}

  .contents.story .photo_box li .arch {width:clamp(180px,28vw,350px);aspect-ratio:350/444;border-radius:9999px 9999px 0 0;overflow:hidden;margin-bottom:16px;}
  .contents.story .photo_box li .arch:hover img {transform:scale(1.1);}
  .contents.story .photo_box li .arch img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;will-change:transform;}
  .contents.story .contents_text {margin-left:5%;}
  .contents.story .photo_box li:nth-child(1) strong.staff_title {left:-25px;}
  .contents.story .photo_box li:nth-child(2) strong.staff_title {left:-25px;}
}
@media screen and (min-width:1280px){
  .contents.story .photo_box { width:90%; max-width:1200px;  margin:200px auto; justify-content: space-between;}
  .contents.story .photo_box li { width:28%; }
  .contents.story .photo_box li strong.staff_title { font-size:28px; }

  .contents.story .photo_box li:nth-child(1) {margin-right:0; margin-bottom:100px; }
  .contents.story .photo_box li:nth-child(2) {margin-left:72px;margin-top:-35px; margin-bottom:100px; margin-right:0; }
  .contents.story .photo_box li:nth-child(3) {margin-left:72px;margin-top:-105px; margin-bottom:100px; }
  .contents.story .photo_box li:nth-child(4) {margin-right:0;}
  .contents.story .photo_box li:nth-child(5) {margin-left:72px;margin-top:-70px;}
  .contents.story .photo_box li:nth-child(6) {margin-left:72px;margin-top:-105px;}

  .contents.story .photo_box li:nth-child(1) strong.staff_title {bottom:70px;left:-25px;top:auto;}
  .contents.story .photo_box li:nth-child(2) strong.staff_title {bottom:140px;left:-25px;top:auto;}
  .contents.story .photo_box li:nth-child(3) strong.staff_title {bottom:170px;left:-25px;top:auto;}

  .contents.story .photo_box li:nth-child(4) strong.staff_title {bottom:70px;left:-25px;top:auto;}
  .contents.story .photo_box li:nth-child(5) strong.staff_title {bottom:100px;left:-25px;top:auto;}
  .contents.story .photo_box li:nth-child(6) strong.staff_title {bottom:170px;left:-25px;top:auto;}

}



.contents.story .bird { width:20px; position:absolute; z-index:2; will-change:transform,opacity; animation:flyPath 6s linear infinite; }
.contents.story .bird1 { left:50%; top:35vh; transform:rotate(20deg); animation-delay:0s; }
.contents.story .bird2 { left:55%; top:40vh; transform:rotate(-20deg); animation-delay:0.7s; }
.contents.story .bird3 { left:60%; top:30vh; transform:rotate(10deg); animation-delay:1.4s; }



/* 1行目と2行目の間に隙間を入れる */
.staff_title span + br + span {margin-top: 0.3em;display: inline-block;}
.staff_title { display: inline-block;}
.staff_info { width:clamp(180px,28vw,350px);display:flex; justify-content:space-between; align-items:center;}
.staff_info strong { display:inline-block; }
.staff_info .arrow_dot { width:43px; border:0; }
@media screen and (min-width:768px) {
    .staff_info .arrow_dot { width:67px; }
    .contents.story .photo_box li .staff_info li { margin-left:0; margin:0;}
}