/*
* {
  outline: 1px solid red;
}
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

.section-wrapper {
  position: relative;
}

p{margin-top: 0.2em;}
ul { list-style: none; }

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

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

/** 固定背景画像の設定 **/
.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;
}

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

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

#section1 {
  .bg-image-fixed {
    background-blend-mode: hard-light;
    background-image: linear-gradient(#17166b, #a0a6f8),url(/html/user_data/assets/img/bonus/aicomi_nt/chara/acnt_bg01.webp);
  }
}
#section2 {
  .bg-image-fixed {
    background-blend-mode: hard-light;
    background-image: linear-gradient(#149684, #79fc6d),url(/html/user_data/assets/img/bonus/aicomi_nt/chara/acnt_bg01.webp);
  }
}


/* ページトップアニメーション */
.Top_back_wrap {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.Top_back_img {
  width: 100%;
  height: auto;
  display: block;
}

.Top_img01,.Top_img02,.Top_img03 {
  position: absolute;
  height: auto;
}

.Top_img01 {
  width: 80vw;
  top: -7%;
  left: 0;
}
.Top_img02 {
  width: 25vw;
  top: 0;
  right: 0;
  margin-top: 1em;
  margin-left: 1em;
}
.Top_img03 {
  width: 50vw;
  top: 30%;
  right: 0;
  margin-left: 1em;
}

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

.Top_img01 { animation-delay:0.3s; }
.Top_img02 { animation-delay:1.0s; }
.Top_img03 { animation-delay:1.7s; }

@keyframes top_show {
	0% { opacity: 0; }
	100% { opacity: 1; }
}



/* セクション 1 予約特典パーツ */
.one-container {
    display: grid;
    grid-template-columns: 550px repeat(4, 200px);
    grid-template-rows: repeat(3, 200px) 150px;
    grid-template-areas:
    "chara item01 item02 item03 item04"
    "chara item05 item06 item07 item08"
    "chara item09 item10 item11 ."
    "chara message message message message";
    row-gap: 0.5em;
    justify-content: center;
    align-content: center;
}
.one_item:nth-child(1) { grid-area: item01; }
.one_item:nth-child(2) { grid-area: item02; }
.one_item:nth-child(3) { grid-area: item03; }
.one_item:nth-child(4) { grid-area: item04; }

.one_item:nth-child(5) { grid-area: item05; }
.one_item:nth-child(6) { grid-area: item06; }
.one_item:nth-child(7) { grid-area: item07; }
.one_item:nth-child(8) { grid-area: item08; }

.one_item:nth-child(9) { grid-area: item09; }
.one_item:nth-child(10) { grid-area: item10; }
.one_item:nth-child(11) { grid-area: item11; }
.one_item:nth-child(12) { grid-area: chara; text-align: center;}
.one_item:nth-child(13) {
  grid-area: message; text-align: left; margin: 1em; font-size: 1.3em; color: #fff;
  text-shadow: 2px  2px 5px #000,
    -2px  2px 5px #000,
    2px -2px 5px #000,
    -2px -2px 5px #000;
}

.one_item img { width: auto; height: 100%; object-fit: contain; object-position: center;}

/* セクション 1 アニメーション */
@keyframes section1_right {
  0% {
    transform: translate(-5rem,0);
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    transform: translate(0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes section1_up {
  0% {
    transform: translate(0,5rem);
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    transform: translate(0);
    filter: blur(0);
    opacity: 1;
  }
}
.js-scroll-anime.is-animated .one_item:nth-child(1) { animation:section1_right ease 1.5s 1 both; animation-delay:0.5s; }
.js-scroll-anime.is-animated .one_item:nth-child(2) { animation:section1_right ease 1.5s 1 both; animation-delay:0.7s; }
.js-scroll-anime.is-animated .one_item:nth-child(3) { animation:section1_right ease 1.5s 1 both; animation-delay:1.0s; }
.js-scroll-anime.is-animated .one_item:nth-child(4) { animation:section1_right ease 1.5s 1 both; animation-delay:1.4s; }

.js-scroll-anime.is-animated .one_item:nth-child(5) { animation:section1_right ease 1.5s 1 both; animation-delay:1.3s; }
.js-scroll-anime.is-animated .one_item:nth-child(6) { animation:section1_right ease 1.5s 1 both; animation-delay:1.5s; }
.js-scroll-anime.is-animated .one_item:nth-child(7) { animation:section1_right ease 1.5s 1 both; animation-delay:1.8s; }
.js-scroll-anime.is-animated .one_item:nth-child(8) { animation:section1_right ease 1.5s 1 both; animation-delay:2.2s; }

.js-scroll-anime.is-animated .one_item:nth-child(9) { animation:section1_right ease 1.5s 1 both; animation-delay:2.1s; }
.js-scroll-anime.is-animated .one_item:nth-child(10) { animation:section1_right ease 1.5s 1 both; animation-delay:2.3s; }
.js-scroll-anime.is-animated .one_item:nth-child(11) { animation:section1_right ease 1.5s 1 both; animation-delay:2.6s; }

.js-scroll-anime.is-animated .one_item:nth-child(12) { animation:section1_up ease 1.5s 1 both; animation-delay:0.3s; }
.js-scroll-anime.is-animated .one_item:nth-child(13) { animation:section1_up ease 1.5s 1 both; animation-delay:3.1s;}

/*** セクション  1    ***/
/*** レスポンシブ対応 ***/
@media (max-width: 1399px) {
  .one-container {
    grid-template-columns: 400px repeat(4, 150px);
    grid-template-rows: repeat(4, 150px);
  }
}
@media (max-width: 1079px) {
  .one-container {
    grid-template-columns: repeat(4, 180px);
    grid-template-rows:  600px repeat(3, 180px) 150px;
    grid-template-areas:
    "chara chara chara chara"
    "item01 item02 item03 item04"
    "item05 item06 item07 item08"
    "item09 item10 item11 ."
    "message message message message";
  }
}
@media (max-width: 719px) {
  .brsp { display: none;}
  .one-container {
    grid-template-columns: repeat(3, 150px);
    grid-template-rows:  600px repeat(4, 150px) ;
  }
}
@media (max-width: 599px) {
  .one-container {
    grid-template-columns: repeat(3, 120px);
    grid-template-rows:  600px repeat(5, 120px);
    grid-template-areas:
    "chara chara chara "
    "item01 item02 item03"
    "item04 item05 item06"
    "item07 item08 item09"
    "item10 item11 ."
    "message message message";
  }
  .one_item:nth-child(13) { font-size: 1em;}
}


/* セクション 2 */
/* デモムービー */
.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;
}

.movie_flex {
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-around;
  margin: 5px;
}
.movie_flex img {
  width: 400px;
  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%);
}
@media screen and (max-width:1199px) {
  .movie_flex {
    max-width: 90%;
    margin: 0 auto;
    display: block;
  }
  .movie_flex img {
    width: 100%;
  }
}
/* セクション 2 */
/* ヘッダー */
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;
}
/* セクション 2 */
/* アニメーション */
.js-scroll-anime.is-animated .js-video-button-a {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:0.5s;
}
.js-scroll-anime.is-animated .js-video-button-b {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:1.0s;
}
.js-scroll-anime.is-animated .js-video-button-c {
  animation:section1_show1 ease 1.5s 1 both;
  animation-delay:1.5s;
}