@charset "UTF-8";

/* 背景 */
#story.sub {
	background: url(../img/bg-body-story-01.jpg) center top / 100% auto no-repeat, url(../img/bg-body-02.jpg) center bottom / 100% auto no-repeat, url(../img/bg-body-03.jpg) center center / 100% auto repeat-y; /* max(100%, calc(2000 / 750 * var(--vw-criterion-vlue))) */
}
.story-main-title {
  padding-bottom: calc(24 / 750 * var(--vw-criterion-vlue));
}

.story-main {
  padding: 0 calc(24 / 750 * var(--vw-criterion-vlue)) calc(24 / 750 * var(--vw-criterion-vlue));
}

.story-main-text {
  padding-bottom: calc(80 / 750 * var(--vw-criterion-vlue));
  color: #aa9868;
  text-align: center;
  font-size: calc(30 / 750 * var(--vw-criterion-vlue));
  font-family: "M PLUS 1p", sans-serif;
}

.story-main-img {
  background: url(../story/img/bigo.png) no-repeat center top / contain;
  height: calc(400 / 750 * var(--vw-criterion-vlue));
  text-align: center;
}

.story-main-bigo {
  font-size: calc(55 / 750 * var(--vw-criterion-vlue));
  line-height:  calc(55 / 750 * var(--vw-criterion-vlue));
  font-weight: bold;
  font-family: "M PLUS 1p", sans-serif;
  color: #db0000;
  letter-spacing: calc(-60 * .1 / 750 * var(--vw-criterion-vlue));
  position: relative;
  font-style: italic;
  text-align: center;
}

/* .story-main-img p::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  color: black;
  text-shadow:
        -2px -2px 0 #000, 
         2px -2px 0 #000, 
        -2px  2px 0 #000, 
         2px  2px 0 #000;
} */
.story-link {
  font-size: calc(60 / 750 * var(--vw-criterion-vlue));
  font-family: 'Orbitron', serif;
  font-weight: 700;
  text-align: center;
}
.story-link-list {
  display: flex;
  justify-content: center;
}

.story-link-list li {
  padding: calc(10 / 750 * var(--vw-criterion-vlue)) calc(20 / 750 * var(--vw-criterion-vlue));
  margin: calc(30 / 750 * var(--vw-criterion-vlue)) calc(10 / 750 * var(--vw-criterion-vlue));
  text-align: center;
  font-size: calc(40 / 750 * var(--vw-criterion-vlue));
  font-family: 'Orbitron', serif;
  border: solid 1px #aa9868;
}

.story-main li {
  padding-bottom: calc(24 / 750 * var(--vw-criterion-vlue));
}

.story-box {
  grid-template-columns: 100%;
  position: relative;
  /* margin-bottom: calc(80 / 750 * var(--vw-criterion-vlue)); */
}
.story-box::before {
  content: '';
	position: absolute;
  background: url(../story/img/story_bar.png) no-repeat center top / contain;
  top: -8vw;
	left: 50%;
	transform: translateX(-50%);
	width: calc(700 / 750 * var(--vw-criterion-vlue));
  height: calc(40 / 750 * var(--vw-criterion-vlue));
}

.story {
  padding: calc(40 / 750 * var(--vw-criterion-vlue)) calc(20 / 750 * var(--vw-criterion-vlue)) calc(20 / 750 * var(--vw-criterion-vlue)) calc(20 / 750 * var(--vw-criterion-vlue));
  border-radius: calc(10 / 750 * var(--vw-criterion-vlue));
}
.story-title {
  padding: calc(10 / 750 * var(--vw-criterion-vlue));
  text-align: center;
  margin-bottom: calc(80 / 750 * var(--vw-criterion-vlue));
  font-size: calc(38 / 750 * var(--vw-criterion-vlue));
	line-height: calc(64 / 750 * var(--vw-criterion-vlue));
  position: relative;
  font-family: 'Orbitron', serif;
}

.story-text {
  font-size: calc(28 / 750 * var(--vw-criterion-vlue));
	line-height: calc(48 / 750 * var(--vw-criterion-vlue));
}

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(600 / 750 * var(--vw-criterion-vlue));
  margin: 0 auto;
}

.main-image {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 450;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.thumbnails {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.thumbnails label {
  cursor: pointer;
}
.thumbnail {
  width: 100%;
  height: auto;
}
.thumbnail:hover {
  opacity: 1;
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + img {
  display: block;
}
.main-container img {
  display: none;
}

.gallery #img1-act1:checked ~ .main-container #main1-act1,
.gallery #img2-act1:checked ~ .main-container #main2-act1,
.gallery #img3-act1:checked ~ .main-container #main3-act1,
.gallery #img4-act1:checked ~ .main-container #main4-act1,
.gallery #img5-act1:checked ~ .main-container #main5-act1 {
    display: block;
}

.gallery #img1-act2:checked ~ .main-container #main1-act2,
.gallery #img2-act2:checked ~ .main-container #main2-act2,
.gallery #img3-act2:checked ~ .main-container #main3-act2,
.gallery #img4-act2:checked ~ .main-container #main4-act2,
.gallery #img5-act2:checked ~ .main-container #main5-act2 {
    display: block;
}

.gallery #img1-act3:checked ~ .main-container #main1-act3,
.gallery #img2-act3:checked ~ .main-container #main2-act3,
.gallery #img3-act3:checked ~ .main-container #main3-act3,
.gallery #img4-act3:checked ~ .main-container #main4-act3,
.gallery #img5-act3:checked ~ .main-container #main5-act3 {
    display: block;
}

.gallery #img1-act4:checked ~ .main-container #main1-act4,
.gallery #img2-act4:checked ~ .main-container #main2-act4,
.gallery #img3-act4:checked ~ .main-container #main3-act4,
.gallery #img4-act4:checked ~ .main-container #main4-act4,
.gallery #img5-act4:checked ~ .main-container #main5-act4 {
    display: block;
}

.gallery #img1-act5:checked ~ .main-container #main1-act5,
.gallery #img2-act5:checked ~ .main-container #main2-act5,
.gallery #img3-act5:checked ~ .main-container #main3-act5,
.gallery #img4-act5:checked ~ .main-container #main4-act5,
.gallery #img5-act5:checked ~ .main-container #main5-act5 {
    display: block;
}

.gallery #img1-act6:checked ~ .main-container #main1-act6,
.gallery #img2-act6:checked ~ .main-container #main2-act6,
.gallery #img3-act6:checked ~ .main-container #main3-act6,
.gallery #img4-act6:checked ~ .main-container #main4-act6,
.gallery #img5-act6:checked ~ .main-container #main5-act6 {
    display: block;
}

.gallery #img1-act7:checked ~ .main-container #main1-act7,
.gallery #img2-act7:checked ~ .main-container #main2-act7,
.gallery #img3-act7:checked ~ .main-container #main3-act7,
.gallery #img4-act7:checked ~ .main-container #main4-act7,
.gallery #img5-act7:checked ~ .main-container #main5-act7 {
    display: block;
}

.gallery #img1-act8:checked ~ .main-container #main1-act8,
.gallery #img2-act8:checked ~ .main-container #main2-act8,
.gallery #img3-act8:checked ~ .main-container #main3-act8,
.gallery #img4-act8:checked ~ .main-container #main4-act8,
.gallery #img5-act8:checked ~ .main-container #main5-act8 {
    display: block;
}

.gallery #img1-act9:checked ~ .main-container #main1-act9,
.gallery #img2-act9:checked ~ .main-container #main2-act9,
.gallery #img3-act9:checked ~ .main-container #main3-act9,
.gallery #img4-act9:checked ~ .main-container #main4-act9,
.gallery #img5-act9:checked ~ .main-container #main5-act9 {
    display: block;
}

.gallery #img1-act10:checked ~ .main-container #main1-act10,
.gallery #img2-act10:checked ~ .main-container #main2-act10,
.gallery #img3-act10:checked ~ .main-container #main3-act10,
.gallery #img4-act10:checked ~ .main-container #main4-act10,
.gallery #img5-act10:checked ~ .main-container #main5-act10 {
    display: block;
}
.gallery #img1-act11:checked ~ .main-container #main1-act11,
.gallery #img2-act11:checked ~ .main-container #main2-act11,
.gallery #img3-act11:checked ~ .main-container #main3-act11,
.gallery #img4-act11:checked ~ .main-container #main4-act11,
.gallery #img5-act11:checked ~ .main-container #main5-act11 {
    display: block;
}
.gallery #img1-act12:checked ~ .main-container #main1-act12,
.gallery #img2-act12:checked ~ .main-container #main2-act12,
.gallery #img3-act12:checked ~ .main-container #main3-act12,
.gallery #img4-act12:checked ~ .main-container #main4-act12,
.gallery #img5-act12:checked ~ .main-container #main5-act12 {
    display: block;
}
.gallery #img1-act13:checked ~ .main-container #main1-act13,
.gallery #img2-act13:checked ~ .main-container #main2-act13,
.gallery #img3-act13:checked ~ .main-container #main3-act13,
.gallery #img4-act13:checked ~ .main-container #main4-act13,
.gallery #img5-act13:checked ~ .main-container #main5-act13 {
    display: block;
}
.gallery #img1-act14:checked ~ .main-container #main1-act14,
.gallery #img2-act14:checked ~ .main-container #main2-act14,
.gallery #img3-act14:checked ~ .main-container #main3-act14,
.gallery #img4-act14:checked ~ .main-container #main4-act14,
.gallery #img5-act14:checked ~ .main-container #main5-act14 {
    display: block;
}
.gallery #img1-act15:checked ~ .main-container #main1-act15,
.gallery #img2-act15:checked ~ .main-container #main2-act15,
.gallery #img3-act15:checked ~ .main-container #main3-act15,
.gallery #img4-act15:checked ~ .main-container #main4-act15,
.gallery #img5-act15:checked ~ .main-container #main5-act15 {
    display: block;
}
.gallery #img1-act16:checked ~ .main-container #main1-act16,
.gallery #img2-act16:checked ~ .main-container #main2-act16,
.gallery #img3-act16:checked ~ .main-container #main3-act16,
.gallery #img4-act16:checked ~ .main-container #main4-act16,
.gallery #img5-act16:checked ~ .main-container #main5-act16 {
    display: block;
}
.gallery #img1-act17:checked ~ .main-container #main1-act17,
.gallery #img2-act17:checked ~ .main-container #main2-act17,
.gallery #img3-act17:checked ~ .main-container #main3-act17,
.gallery #img4-act17:checked ~ .main-container #main4-act17,
.gallery #img5-act17:checked ~ .main-container #main5-act17 {
    display: block;
}
.gallery #img1-act18:checked ~ .main-container #main1-act18,
.gallery #img2-act18:checked ~ .main-container #main2-act18,
.gallery #img3-act18:checked ~ .main-container #main3-act18,
.gallery #img4-act18:checked ~ .main-container #main4-act18,
.gallery #img5-act18:checked ~ .main-container #main5-act18 {
    display: block;
}
.gallery #img1-act19:checked ~ .main-container #main1-act19,
.gallery #img2-act19:checked ~ .main-container #main2-act19,
.gallery #img3-act19:checked ~ .main-container #main3-act19,
.gallery #img4-act19:checked ~ .main-container #main4-act19,
.gallery #img5-act19:checked ~ .main-container #main5-act19 {
    display: block;
}
.gallery #img1-act20:checked ~ .main-container #main1-act20,
.gallery #img2-act20:checked ~ .main-container #main2-act20,
.gallery #img3-act20:checked ~ .main-container #main3-act20,
.gallery #img4-act20:checked ~ .main-container #main4-act20,
.gallery #img5-act20:checked ~ .main-container #main5-act20 {
    display: block;
}
.gallery #img1-act21:checked ~ .main-container #main1-act21,
.gallery #img2-act21:checked ~ .main-container #main2-act21,
.gallery #img3-act21:checked ~ .main-container #main3-act21,
.gallery #img4-act21:checked ~ .main-container #main4-act21,
.gallery #img5-act21:checked ~ .main-container #main5-act21 {
    display: block;
}
.gallery #img1-act22:checked ~ .main-container #main1-act22,
.gallery #img2-act22:checked ~ .main-container #main2-act22,
.gallery #img3-act22:checked ~ .main-container #main3-act22,
.gallery #img4-act22:checked ~ .main-container #main4-act22,
.gallery #img5-act22:checked ~ .main-container #main5-act22 {
    display: block;
}
.gallery #img1-act23:checked ~ .main-container #main1-act23,
.gallery #img2-act23:checked ~ .main-container #main2-act23,
.gallery #img3-act23:checked ~ .main-container #main3-act23,
.gallery #img4-act23:checked ~ .main-container #main4-act23,
.gallery #img5-act23:checked ~ .main-container #main5-act23 {
    display: block;
}
.gallery #img1-act24:checked ~ .main-container #main1-act24,
.gallery #img2-act24:checked ~ .main-container #main2-act24,
.gallery #img3-act24:checked ~ .main-container #main3-act24,
.gallery #img4-act24:checked ~ .main-container #main4-act24,
.gallery #img5-act24:checked ~ .main-container #main5-act24 {
    display: block;
}
.gallery #img1-act25:checked ~ .main-container #main1-act25,
.gallery #img2-act25:checked ~ .main-container #main2-act25,
.gallery #img3-act25:checked ~ .main-container #main3-act25,
.gallery #img4-act25:checked ~ .main-container #main4-act25,
.gallery #img5-act25:checked ~ .main-container #main5-act25 {
    display: block;
}
.gallery #img1-act26:checked ~ .main-container #main1-act26,
.gallery #img2-act26:checked ~ .main-container #main2-act26,
.gallery #img3-act26:checked ~ .main-container #main3-act26,
.gallery #img4-act26:checked ~ .main-container #main4-act26,
.gallery #img5-act26:checked ~ .main-container #main5-act26 {
    display: block;
}



.br-pc {
  display: none;
}

.br-sp {
  display: inline-block;
}

.infinite {
	display: flex;
	height: calc(197 / 1250 * 100vw);
	margin: 0vh 0 20vw;
	max-height: 197px;
	overflow: hidden;
	width: 100vw;
  position: relative;
}
.infinite img {
	height: 100%;
	width: auto;
  position: absolute;
}
.infinite img:first-child {
	transform: translateX(0%); /* 初期位置を0%にする */
  animation: infinite1 50s linear infinite;
}
@keyframes infinite1 {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.infinite img:last-child {
  transform: translateX(100%); /* 初期位置を100%にする */
  animation: infinite2 50s linear infinite;
}
@keyframes infinite2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

.inner {
  padding-bottom: calc(80 / 750 * var(--vw-criterion-vlue));
}


@media screen and (min-width: 768px) {

  .story-main {
    display: flex;
    justify-content: center;
    padding-bottom: 0;
  } 
  .story-main li:first-child{
    padding-right: 24px;
  }

  .story-main li {
    padding-bottom: 48px;
  }
  .story-main-text {
    font-size: calc(17 / 750 * var(--vw-criterion-vlue));
    line-height: calc(24 / 750 * var(--vw-criterion-vlue));
    letter-spacing: 0.05em;
    padding-bottom: 40px;
  }

  .story-main-img {
    background: url(../story/img/bigo.png) no-repeat center top / contain;
    height: 465px;
  }
  
  .story-main-bigo {
    font-size: 56px;
    letter-spacing: 0.1em;
  }

  .story-link {
    font-size: 40px;
  }

  .story-link-list li {
    font-size: 40px;
  }

  .story {
    padding: 0 0px 20px 20px;
    border-radius: 10px;
  }
  .story-title {
    padding: 10px;
    margin-bottom: 80px;
    font-size: 32px;
    line-height: 48px;
  }
  .story-box {
    display: grid;
    grid-template-columns: 50% 48%;
    gap: 10px;
    align-items: start;
    padding-top: 10px;
    /* margin-bottom: 80px; */
  }
  .story-box::before {
    content: '';
    position: absolute;
    background: url(../story/img/story_bar.png) no-repeat center top / contain;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1080px;
    height: 61px;
  }

  .story-text {
    font-size: 16px;
    line-height: 30px;
  }

  .gallery {
    width: 100%;
    max-width: 600px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 20px;
  }

  .thumbnail {
    max-width: 112px;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
    opacity: 0.6;
    transition: opacity 0.3s;
  }
  
  .br-sp {
    display: none;
  }

  .inner {
		padding-bottom: 55px;
	}
  .infinite {
    margin-bottom: 80px;
  }

}