/*
* {
  outline: 1px solid red;
}
*/

.section-wrapper {
  position: relative;
}

p{margin-top: 0.2em;}

.ec-footerRole {margin-top: 0;}

/** 各セクションの範囲 **/
.section-body .section-body2 {
  position: relative;
  width: 100%;
  height: auto;
  display: grid;
  place-content: center;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.section-body{ text-align: center; padding: 2em 0; }

/** 固定背景画像の設定 **/
.bg-image-clip {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: inset(0); /* 切り抜き */
  z-index: 0;
}

.bg-image-fixed {
  position: fixed; /* 背景を固定 */
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

ul { list-style: none; }

.bg-i {
  margin: 0;
  padding: 0;
  border: none;
  height: 32px !important;
  opacity: 1;
  background: url(/html/user_data/assets/img/bonus/other/hr_01.webp) repeat-x center center/contain;
}

/* 画像切り替え*/
.image-stack {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.fade-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}
.fade-img.show {
  opacity: 1;
  pointer-events: auto;
}
.caption,.caption2 {
  position: absolute;
  left: 30%;
  transform: translateX(-20%);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  pointer-events: none;
}
.caption { bottom: -1rem;}
.caption2 { bottom: 0;}

#section1 {
  .bg-image-fixed {
    background-blend-mode: hard-light;
    background-image: linear-gradient(#2d0de2, #64e2e6), url(/html/user_data/assets/img/bonus/other/bonus_bg_01.webp);
  }
}
#section2 {
  .bg-image-fixed {
    background-blend-mode: hard-light;
    background-image: linear-gradient(#d5d80b, #ee9f28), url(/html/user_data/assets/img/bonus/other/bonus_bg_01.webp);
  }
}
#section3 {
  .bg-image-fixed {
    background-blend-mode: hard-light;
    background-image: linear-gradient(#149684, #79fc6d),url(/html/user_data/assets/img/bonus/other/bonus_bg_01.webp);
  }
}
#section4 {
  .bg-image-fixed {
    background-blend-mode: hard-light;
    background-image: linear-gradient(#17166b, #a0a6f8),url(/html/user_data/assets/img/bonus/other/bonus_bg_01.webp);
  }
}
#section5 {
  .bg-image-fixed {
    background-blend-mode: hard-light;
    background-image: linear-gradient(#da3954, #f7a1b3), url(/html/user_data/assets/img/bonus/other/bonus_bg_01.webp);
  }
}

/* ページトップアニメーション */
.Top_back_img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  line-height:0;
  position: relative;
}

.Top_img00,.Top_img01,.Top_img02,.Top_img03,
.Top_img04,.Top_img05,.Top_img06 {
  top:0;
  left:0;
  margin: 0;
  padding: 0;
  width: 100%;
}

.Top_anime1 {
	transform-origin:center top;
	animation:top_show 1.5s both;
}
.Top_anime2 {
	transform-origin:center top;
	animation:top_show2 1s both;
}

.Top_img01,.Top_img02,.Top_img03,.Top_img04,.Top_img05,.Top_img06  { position: absolute; }
.Top_img03 { animation-delay:0.5s; }
.Top_img02 { animation-delay:1.5s; }
.Top_img01 { animation-delay:2.5s; }
.Top_img04 { animation-delay:3.5s; }
.Top_img05 { animation-delay:4.0s; }
.Top_img06 { animation-delay:5.0s; }

@keyframes top_show {
	0% {
		transform:translate(0,3em);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}
@keyframes top_show2 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* フェードアニメ */
@keyframes section1_show1 {
  0% {
    transform: translate(0,5rem);
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    transform: translate(0);
    filter: blur(0);
    opacity: 1;
  }
}

/* セクション 2 */
/* 早期予約特典紹介 */
#section2 .section-body{
  display: grid;
  place-content: center;
}
.twobox {
  display: grid;
  grid-template-areas:
  " title main parts1"
  " logo main parts1"
  " story main parts2"
  " catch main parts2";
  grid-template-columns: 500px 460px 240px;
  grid-template-rows: 50px 293px 221px 310px;
  justify-content: center;
	align-content: center;
  padding: 1.5em 0;
}
.twobox_item{font-size: 16px;}
.twobox_item:nth-child(1) { grid-area: title; color: #fff; text-align: center; padding: 0 1em; font-size: 1.5em;}
.twobox_item:nth-child(2) { grid-area: logo; text-align: center; object-fit: cover; object-position: center top;}
.twobox_item:nth-child(3) { grid-area: story; color: #fff; text-align: left; padding: 1.5em; font-size: 1.2em;}
.twobox_item:nth-child(4) { grid-area: catch; text-align: center; padding: 0 2em;}
.twobox_item:nth-child(5) { grid-area: main; text-align: center; z-index: 2;}
.twobox_item:nth-child(6) { grid-area: parts1; text-align: center;}
.twobox_item:nth-child(7) { grid-area: parts2; text-align: center;}

.twobox_item img { margin: 0; padding: 0; width: 100%; height: auto;}
.twobox_item:nth-child(4) img,.twobox_item:nth-child(5) img { height: 100%; width: auto;}

.twobox_item p {
    text-shadow: 2px  2px 5px #000,
    -2px  2px 5px #000,
    2px -2px 5px #000,
    -2px -2px 5px #000;
}

/* セクション 2 */
/* アニメーション */
.js-scroll-anime.is-animated .twobox_item:nth-child(5) {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:0.5s;
}
.js-scroll-anime.is-animated .twobox_item:nth-child(6) {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:1.0s;
}
.js-scroll-anime.is-animated .twobox_item:nth-child(7) {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:1.5s;
}
.js-scroll-anime.is-animated .twobox_item:nth-child(1) {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:2.0s;
}
.js-scroll-anime.is-animated .twobox_item:nth-child(2) {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:2.5s;
}
.js-scroll-anime.is-animated .twobox_item:nth-child(3) {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:3.0s;
}
.js-scroll-anime.is-animated .twobox_item:nth-child(4) {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:3.5s;
}

/* セクション 2 */
/* CG レスポンシブ対応 */
@media (max-width: 1199px) {
  .twobox {
    grid-template-areas:
    " title main parts1"
    " logo main parts1"
    " story main parts2"
    " catch main parts2";
    grid-template-columns: 415px 325px 240px;
    grid-template-rows: 50px 243px 170px 175px;
  }
  .twobox_item:nth-child(3) { padding: 1em; font-size: 1em;}
}
@media (max-width: 999px) {
  .twobox {
    grid-template-areas:
    "title title title"
    ". main logo"
    ". main ."
    ". main parts1"
    ". main ."
    ". main parts2"
    "story story story"
    "catch catch catch";
    grid-template-columns:230px 270px 200px;
    grid-template-rows: 50px 117px 10px 150px 10px 150px 150px 200px;
  }

  .twobox_item img { height: 100%; width: auto;}
  .twobox_item:nth-child(1) { font-size: 2em;}
  .caption {
    left: 20%;
    transform: translateX(-20%);
  }
}
@media (max-width: 699px) {
  .twobox {
    grid-template-columns: 15px 200px 135px;
    grid-template-rows: 50px 152px 10px 135px 10px 135px 120px 150px;
  }
  .twobox_item:nth-child(1) { font-size: 1.2em;}
  .twobox_item:nth-child(3) { font-size: 0.8em; padding: 1em;}
  .twobox_item:nth-child(2) img { width: 100%; height: auto;}
  .caption { left: 0; font-size: 8px; transform: translateX(10%);}
}

/* セクション 3 */
/* デモムービー */
.movie_one {
  position: relative;
  text-align: center;
  margin: 5px;
  z-index: 1;
}
.movie_one video {
  position: relative;
  width: 90%; /* 動画をレスポンシブ化 */
  max-width: 960px; /* 動画の最大幅 */
  border-radius: 12px;
  border: 3px solid #fff;
  -webkit-box-shadow: 0 0 7px rgb(0 0 0 / 40%);
  box-shadow: 0 0 7px rgb(0 0 0 / 40%);
  margin-bottom: 3em;
  z-index: 1;
}
/* セクション 3 */
/* ヘッダー */
h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight:bold;
    text-align: center;
    font-family: "Hiragino Kaku Gothic ProN",sans-serif;
    font-size: 38pt;
}
.heading {
	position: relative;
	text-align: center;
  color: #fff;
	font-size: 48px;
}
.heading::before {
	content: attr(data-number);
	position: absolute;
	top: -30px;
  left: 50%;
  transform: translateX(-50%);
	color: #fff;
  opacity: 0.3;
	font-size: 64px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* セクション 4～6 */
/* アニメーション(delayScroll) */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}   
@keyframes fadeUpAnime {
    from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(50%);
    }
    to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
    }
}

/* セクション 4 */
/* オリジナル予約特典パーツ */
.four-container {
    display: grid;
    grid-template-columns: repeat(7, 200px);
    grid-template-rows: 267px 267px 267px 50px 146px ;
    gap:0.5em;
    justify-content: center;
    align-content: center;
}

.four_item:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  text-align: center;
}

.four_item:nth-child(14) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
  text-align: center;
  color: #fff;
  padding: 0 1em;
  font-size: 1.5em;
}
.four_item:nth-child(15) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
  text-align: center;
}
.four_item:nth-child(16) {
  grid-column-start: 4;
  grid-column-end: 8;
  grid-row-start: 5;
  grid-row-end: 6;
  color: #fff;
  text-align: left;
  padding-left: 0.5em;
  font-size: 1.1em;
}

.four_item img{
    width: 200px;
    height: 267px;
}
.four_item:nth-child(1) img { 
  height: 801px;
  width: auto;
  margin: 0 auto;
}
.four_item:nth-child(15) img { 
  width: 600px;
  height: auto;
  margin: 0 auto;
}
.four_item:nth-child(14) p,.four_item:nth-child(16) p {
    text-shadow: 2px  2px 5px #000,
    -2px  2px 5px #000,
    2px -2px 5px #000,
    -2px -2px 5px #000;
}


/* セクション 4 */
/* レスポンシブ対応 */
@media (max-width: 1399px) {
  .four-container {
    grid-template-columns: repeat(7, 130px);
    grid-template-rows: 173px 173px 173px 50px 95px ;
  }
  .four_item:nth-child(16) {
    grid-row-start: 4;
    grid-row-end: 6;
  }
  .four_item img {
    width: 130px;
    height: 173px;
  }
  .four_item:nth-child(1) img { 
    height: 519px;
  }
  .four_item:nth-child(15) img { 
    width: 390px;
  }
}
@media (max-width: 999px) {
  .four-container {
    grid-template-columns: repeat(7, 100px);
    grid-template-rows: 133px 133px 133px 40px 73px ;
    gap: 0.2em;
  }
  .four_item img {
    width: 100px;
    height: 133px;
  }
  .four_item:nth-child(1) img{ 
    height: 399px;
  }
  .four_item:nth-child(14) {
    font-size: 1.1em;
  }
  .four_item:nth-child(15) img { 
    width: 300px;
  }
  .four_item:nth-child(16) { 
    font-size: 0.9em;
  }
  .caption2 { font-size: 9px;}
}
@media (max-width: 767px) {

  .four-container {
    grid-template-columns: repeat(3, 110px);
    grid-template-rows: 50px 80px 147px 147px 147px 147px 147px 147px 147px 80px;
  }
  .four_item:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 6;
  }
  .four_item:nth-child(14) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .four_item:nth-child(15) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .four_item:nth-child(16) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 10;
    grid-row-end: 11;
    font-size: 0.7em;
  }

  .four_item:nth-child(1) img { 
    height: 100%;
    width: auto;
  }
  .caption{bottom: 10px;}
}

/* セクション 5 */
/* 店舗共通予約特典パーツ */
.five-container {
    display: grid;
    grid-template-columns: repeat(7, 200px);
    grid-template-rows: 267px 267px 267px 50px 220px ;
    gap:0.5em;
    justify-content: center;
    align-content: center;
}
.five_item:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  text-align: center;
}
.five_item:nth-child(13) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
  text-align: center;
  color: #fff;
  padding: 0 1em;
  font-size: 1.5em;
}
.five_item:nth-child(14) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
  text-align: center;
}
.five_item:nth-child(15) {
  grid-column-start: 4;
  grid-column-end: 8;
  grid-row-start: 5;
  grid-row-end: 6;
  color: #fff;
  text-align: left;
  padding-left: 0.5em;
  font-size: 1.1em;
}

.five_item img{
    width: 200px;
    height: 267px;
}
.five_item:nth-child(1) img { 
  height: 801px;
  width: auto;
  margin: 0 auto;
}
.five_item:nth-child(14) img { 
  width: 600px;
  height: auto;
  margin: 0 auto;
}
.five_item:nth-child(13) p,.five_item:nth-child(15) p {
    text-shadow: 2px  2px 5px #000,
    -2px  2px 5px #000,
    2px -2px 5px #000,
    -2px -2px 5px #000;
}

/* セクション 5 */
/* レスポンシブ対応 */
@media (max-width: 1399px) {
  .five-container {
    grid-template-columns: repeat(7, 130px);
    grid-template-rows: 173px 173px 173px 50px 143px ;
  }
  .five_item:nth-child(15) {
    grid-row-start: 4;
    grid-row-end: 6;
  }
  .five_item img {
    width: 130px;
    height: 173px;
  }
  .five_item:nth-child(1) img { 
    height: 519px;
  }
  .five_item:nth-child(14) img { 
    width: 390px;
  }
}
@media (max-width: 999px) {
  .five-container {
    grid-template-columns: repeat(7, 100px);
    grid-template-rows: 133px 133px 133px 40px 110px ;
    gap: 0.2em;
  }
  .five_item img {
    width: 100px;
    height: 133px;
  }
  .five_item:nth-child(1) img{ 
    height: 399px;
  }
  .five_item:nth-child(14) img { 
    width: 300px;
  }
  .five_item:nth-child(13) {
    font-size: 1.2em;
  }
  .five_item:nth-child(15) { 
    font-size: 0.9em;
  }
  .caption2 { font-size: 9px;}
}
@media (max-width: 767px) {

  .five-container {
    grid-template-columns: repeat(3, 110px);
    grid-template-rows: 50px 80px 147px 147px 147px 147px 147px 147px 147px 121px;
  }
  .five_item:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 6;
  }
  .five_item:nth-child(13) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .five_item:nth-child(14) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .five_item:nth-child(15) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 10;
    grid-row-end: 11;
    font-size: 0.7em;
  }

  .five_item:nth-child(1) img { 
    height: 100%;
    width: auto;
  }
  .caption{bottom: 10px;}
}