:root {
  --color-primary-500: rgb(24, 159, 186);
  --color-primary-300: rgb(103, 190, 208);
  --color-secondary-500: rgb(255, 248, 193);
  --color-thirdry-500: rgb(233, 177, 196);
  --color-accent-600: rgb(11, 147, 178);
  --color-grayscale-100: rgb(255, 255, 255);
  --color-grayscale-400: rgb(222, 221, 221);
  --color-grayscale-500: rgb(92, 92, 92);
  --color-grayscale-900: rgb(69, 69, 69);
  --color-surface-400: rgb(244, 207, 220);
  --font_color_base: var(--color-primary-500);
  --font_size_base: max(10px,2.6vw);
  --font_weight_base: 500;
  --font_weight_bold: 700;
  --line-height_base: 1.8;
  --line-height_head: 1.5;
  --letter-spacing_base: 0.03em;
  --mh--duration01: 0.3s;
  --mh--duration02: 0.6s;
  --mh--easing01: ease;
  --mh--easing02: cubic-bezier(0.1, 0.7, 0.4, 1);
  --body_padding_side: 8%;
}

@media (min-width: 768px) {
  :root {
    --font_size_base: 1.33rem;
  }
}

/* リセットCSS */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-family: 'Times New Roman', 'Bodoni MT', 'Bodoni 72', 'Didot', 'Didot LT STD', 'Hoefler Text', 'Garamond', serif;
}

html {
  font-size: 62.5%;
  word-break: break-all;
}

body {
  -webkit-text-size-adjust: 100%;
  min-width: 300px;
  overflow-x: hidden;
  color: var(--font_color_base);
  font-size: var(--font_size_base);
  font-weight: var(--font_weight_base);
  line-height: var(--line-height_base);
  letter-spacing: var(--letter-spacing_base);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-style: normal;
  /*background-image: url(bg2025.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
	background-size:cover;*/
	background-image: none; 
    background-position: initial; 
    background-repeat: initial;
    background-attachment: initial;
    background-size: initial;
	position: relative; /* 擬似要素のための基準点 */
    z-index: 1; /* コンテンツを背景より手前にする */
}
body::before {
    content: ''; /* 擬似要素には content が必須 */
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    /* 背景画像を::before要素に設定 */
    background-image: url(bg2025.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;   
    z-index: -1; /* bodyの内容よりも奥に配置 */
}
@supports (background-image: url('bg2025.avif')) {
body::before {
    background-image: url('bg2025.avif'); 
  }
}


article, aside, details, figcaption, figure,
main, footer, header, menu, nav, section {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  word-break: break-word;
  line-break: strict;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

ol[class], ul[class] {	
  list-style: none;
}

p.campaign_text {
font-size: clamp(15px, 2.5vw, 23px);
width:94%;
  margin:0 auto;
  padding:2%;
}

a {
  color: inherit;
   text-align:center;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.a_img {
	width:94%;
	display: block;
  margin: 0 auto;
}


main {
  width: 100%;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
}

.brsp {
	display:none;
	}


@media (max-width: 700px) {
  
  .brsp {
	display:block;
	}

  
  main {
    min-width: 350px;
    width: 100%;
	position: relative;
	overflow-x: hidden;
	margin:0 auto;
  }
}


/*top動画*/

.topmov {
position:relative;
max-width: 100%;
/*height: 100vh;
background: #000;*/
overflow: hidden;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#video,
source {
    width: 100%;
    display: block;
	object-fit: cover;
    margin: 0;
    padding: 0;
}

/* フローティング画像 */
.floating-img {
  opacity: 0;  /* 最初は非表示 */
  pointer-events: none;
  transform: translate(0, 0);
  z-index:10;
}

#img1 { width:500px; position: absolute; top: 10%; left: 10%; }
#img2 { position: absolute; top: 50%; left: 55%; max-width:300px; width:50%; }
#img3 { position: absolute; top: 80%; left: 80%; }

/* メッセージ */
.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(15px, 3.5vw, 35px);
  color: #000;
  opacity: 0;
  text-align: center;
  letter-spacing: 2px;
  z-index: 10;
}

.message img {
	filter: drop-shadow(0 0 10px rgba(255, 235, 150, 0.6))
        drop-shadow(0 0 20px rgba(255, 215, 100, 0.4));
transition: filter 0.3s ease;
}



@media (max-width: 768px) {
	
.message {
  position: absolute;
  top: 40%;
  left: 50%;
}
	
	.topmov {
position:relative;
height: 100vh;
}

#video,
source {
    width: 100%;
	height: 100vh;
    display: block;
    margin: 0;
    padding: 0;
}

.mov_s {
	 width: 100%;
	 height: 100vh;
}

#img1 { width:250px; position: absolute; top: 10%; left: 5%; }
#img2 { position: absolute; top: 50%; left: 55%; }
#img3 { position: absolute; top: 80%; left: 80%; }
	
  .message {
    font-size: 1.4rem;
    width: 90%;
  }
}


/* ユーティリティクラス */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.u-bold {
  font-weight: var(--font_weight_bold);
}

.u-img-block {
  display: block;
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  text-align:center;
}


/*foot背景img*/
.u-img-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/*.u-inner {
	background-image:url(img/evbg.jpg);
background-position: top center;
background-repeat:no-repeat;
background-attachment: fixed;
  box-sizing: border-box;
  padding-left: var(--body_padding_side);
  padding-right: var(--body_padding_side);
}*/

/* カラークラス */
.c-color-grayscale-900 {
  color: var(--color-grayscale-900);
}

/* アイコン */
.c-ico {
  display: inline-block;
  vertical-align: baseline;
}

/*.c-ico.is-x01::after {
  content: "";
  display: block;
  width: 1.7em;
  height: 1.8em;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 18"><path d="M10.12 7.62 16.45 0h-1.5l-5.5 6.62L5.06 0H0l6.63 10L0 18h1.5l5.8-6.99L11.94 18H17L10.1 7.62ZM8.06 10.1 2.04 1.17h2.3l10.6 15.71h-2.3L8.06 10.1v.01Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 18"><path d="M10.12 7.62 16.45 0h-1.5l-5.5 6.62L5.06 0H0l6.63 10L0 18h1.5l5.8-6.99L11.94 18H17L10.1 7.62ZM8.06 10.1 2.04 1.17h2.3l10.6 15.71h-2.3L8.06 10.1v.01Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}*/

/* ノート */
.c-note01 {
  margin-top: 0.8em;
  font-size: 1.2em;
  font-weight: var(--font_weight_base);
  line-height: var(--line-height_head);
  letter-spacing: 0.01em;
}

.c-note01.has-mark {
  text-indent: -1.25em;
  padding-left: 1.25em;
}


/* ホームコンセプト */
.home-concept {
  position: relative;
  opacity: 0;
}

.home-concept.is-shown {
  transform: translateY(0);
  transition-delay: 0s, 0s;
  display: flow;
  opacity: 1;
  margin: 0 auto;
  padding: 0;
}

.home-concept-first {
  position: relative;
  color: var(--color-grayscale-100);
}

.home-concept-first__bg {
  background-image: url(bg_concept02.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  min-height: 100vh;
}
@supports (background-image: url('bg_concept02.avif')) {
.home-concept-first__bg::before {
    background-image: url('bg_concept02.avif'); 
  }
}


.home-concept-first__content {
  position: relative;
  padding: 5% 1%;
  margin: 0 auto;
  width: 97%;
  max-width: 1000px;
}

.home-concept-first__head-main {
  font-size: 3em;
  font-weight: var(--font_weight_bold);
  line-height: var(--line-height_head);
  color: #fff;
  text-shadow:2px 3px 5px #B09A52;
}

.home-concept-first__block {
  font-size: clamp(15px, 2.7vw, 25px);
  color: #333;
  line-height:180%;
}

.home-concept-first__block-txt {
  margin-bottom: 3%;
    text-shadow:-2px 3px 5px #fff;
}







/* キャスト一覧 */
.home-concept-feature {
  position: relative;
  background-repeat: repeat;
}

.is-sec01 {
background: #004cac;
  background: linear-gradient(108deg, rgb(255, 255, 255) 0%, rgb(229, 205, 160) 45%, rgb(229, 222, 165) 55%, rgb(223, 181, 99) 100%);
}
.is-sec02 {
  background: #0f5dbe;
  background: linear-gradient(108deg, rgb(229, 205, 160) 0%, rgb(255, 178, 178) 50%, rgb(245, 245, 245) 100%);
}

.is-sec03 {
  background: #6289bb;
  background: linear-gradient(108deg, rgb(235, 235, 235) 0%, rgb(171, 231, 249) 50%, rgb(255, 210, 156) 100%);
}

.is-sec04 {
  background: #0b3c79;
  background: linear-gradient(108deg, rgb(11, 60, 121) 0%, rgb(119, 75, 144) 50%, rgb(240, 185, 133) 100%);
}





.home-concept-feature-sec__inner {
  position: relative;
  padding: 0;
  width: 100%;
  margin: 0 auto;
}

.home-concept-feature-sec__head {
  font-size: 2em;
  line-height: var(--line-height_head);
}

.home-concept-feature-sec__head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: normal;
}

.home-concept-feature-sec__head-main-row {
  display: block;
  padding: 0 0.4em 0.05em;
  background-color: var(--color-primary-500);
  color: var(--color-grayscale-100);
}

.home-concept-feature-sec__head-main-row + .home-concept-feature-sec__head-main-row {
  margin-top: 0.25em;
}

.home-pla4th-pr {
  position: relative;
  height: 100vh;
}

.home-pla4th-pr__content {
  position: sticky;
  z-index: 2;
  height: 100vh;
  top: 0;
  left: 0;
  display: grid;
  align-items: center;
  overflow: hidden;
}

@supports not (position: sticky) {
  .home-pla4th-pr__content {
    position: -webkit-sticky;
  }
}

.home-pla4th-pr__deco {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  transition: opacity 0.6s var(--mh--easing01);
  opacity: 0;
}

.home-pla4th-pr__deco.is-deco01 {
  top: 0;
}

.home-pla4th-pr__deco.is-deco02 {
  bottom: 0;
}

.home-pla4th-pr-imgs {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.home-pla4th-pr-imgs__item {
  display: block;
  position: absolute;
}



.pic_pc {
	display:block;	
}
.pic_s {
	display:none;	
}


.home-pla4th-pr-imgs__item.is-item01 {
  top: 0;
  left: 0;
  right: 0;
  /* padding-top: 100%; <-- 削除またはコメントアウト */
   height: auto; /* 高さをコンテンツに合わせる */
  z-index: 1;
  overflow: hidden;
  transition: all 0.6s var(--mh--easing02);
  transform: translateY(-10%) scale(0.4);
  /* 画像が歪まないよう、幅と高さを明示的に設定（例として max-width/max-height を使用）*/
  width: 80%; /* 幅を親要素の80%に設定 */
  max-width: 470px; /* 例として最大幅を設定 */
  margin: 0 auto; /* 中央寄せ */
  position: relative; /* 子要素のabsoluteを調整するためにrelativeを適用 */
}


@media (max-width: 768px) {

.pic_pc {
	display:none;	
}
.pic_s {
	display:block;	
}


.home-pla4th-pr-imgs__item.is-item01 {
  top: -30%;
  left: 0;
  right: 0;
  padding-top: 100%;
  z-index: 1;
  overflow: hidden;
  transition: all 0.6s var(--mh--easing02);
  transform: translateY(-10%) scale(0.4);
}



}



.home-pla4th-pr-imgs__item.is-item01 .home-pla4th-pr-imgs__item-in {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.home-pla4th-pr-imgs__item.is-item01 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 親要素の幅に合わせる */
  height: 100%; /* 親要素の高さに合わせる */
  object-fit: contain; /* ★重要: 画像の縦横比を維持しながらコンテナに収める */
  margin: auto; /* 中央寄せを助ける (absoluteと併用) */
  right: 0;
  bottom: 0;
}

/*footテキスト*/
.home-pla4th-pr-txt {
	font-size: clamp(15px, 2.5vw, 23px);
  position: absolute;
  z-index: 1;
  transition: opacity var(--mh--duration01) var(--mh--easing01);
  opacity: 0;
  display: flex;
  flex-direction: column;
  
      top: 55%;
    /* align-items: center;
	left: 50%; */
    /* right: 50%; */
    width: 100%;
}

.home-pla4th-pr-txt__main-row {
font-size: clamp(20px, 2.5vw, 35px);
  display: block;
  position: absolute;
  opacity: 0.7;
  padding: 0.5% 5%;
  text-shadow: 2px 3px 10px #000;
  background-color: var(--color-primary-500);
  color: var(--color-grayscale-100);
}
.home-pla4th-pr-txt__main-row span {
	opacity: 1;
}


@media (max-width: 768px) {
.home-pla4th-pr-txt {
	font-size: clamp(15px, 2.5vw, 23px);
  position: absolute;
  z-index: 1;
  transition: opacity var(--mh--duration01) var(--mh--easing01);
  opacity: 0;
  display: flex;
  flex-direction: column;
      top: 20%;
    /* align-items: center;
	left: 50%; */
    /* right: 50%; */
    width: 100%;
}

}









.home-pla4th-pr-txt__sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: var(--font_weight_bold);
  line-height: var(--line-height_head);
}

.home-pla4th-pr-txt__sub-row {
  display: block;
  /*padding: 0 0.5em 0.0625em;*/
  color: var(--color-grayscale-100);
}

.home-pla4th-pr-txt__sub-row + .home-pla4th-pr-txt__sub-row {
  margin-top: 0.25em;
}

.home-pla4th-pr-txt__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*font-size: 2.2em;*/
  font-weight: normal;
  line-height: var(--line-height_head);
  margin-top: 0.6818181818em;
}



.home-pla4th-pr-txt__main-row + .home-pla4th-pr-txt__main-row {
  margin-top: 0.2em;
}

.home-pla4th-pr.is-view .home-pla4th-pr__deco {
  transition-delay: 0.5s;
  opacity: 1;
}









/*foot画像*/
.home-pla4th-pr.is-view .home-pla4th-pr-imgs__item.is-item01 {
 transition-duration: 3s;
  padding-top: 100vh; /* <-- height を確保するための設定 */
  transform: translateY(0%) scale(1.2);
}

@media (max-width: 768px) {
.home-pla4th-pr.is-view .home-pla4th-pr-imgs__item.is-item01 {
  transition-duration: 3s;
  padding-top: 100vh;
  /* スマホ版: translateY(35%) scale(1.2) を維持し、画面内の適切な位置に留める */
  transform: translateY(35%) scale(1.2);
}
}



/*
@supports (padding-top: 100lvh) {
  .home-pla4th-pr.is-view .home-pla4th-pr-imgs__item.is-item01 {
    padding-top: 100lvh;
  }
}*/

.home-pla4th-pr.is-view .home-pla4th-pr-txt {
  transition-delay: 0.5s;
  opacity: 1;
}



/* キャンペーン内容
.home-campaign {
  position: relative;
  background-color: #c7eee6;
  background-image: radial-gradient(circle at right bottom, #f8f9c4, rgba(248, 249, 196, 0) 9em), linear-gradient(0deg, #fcfdc3, #c7eee6 18em);
  color: var(--color-accent-600);
  overflow: hidden;
}

.home-campaign::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: 500px auto;
  mix-blend-mode: hard-light;
  pointer-events: none;
  opacity: 0.2;
}*/

.home-campaign-intro {

}


/*イベント内容・背景*/
.home-campaign__inner {
  position: relative;
  padding: 2% 0 30% 0;
/*  background-image:url(img/evbg.jpg);
background-position: top center;
background-repeat:no-repeat;
background-attachment: fixed
z-index:-10;;*/
}




/*イベント内容*/

.js-c-anime-elem.is-animated[data-anime=fadein-right],
.js-c-anime-elem.is-animated [data-anime=fadein-right] {
  opacity: 1;
  transform: translateX(0px);
  width: 100%;
  margin: 0 auto 3% auto;
}

.home-campaign__head {
  display: grid;
  place-items: center;
  margin-bottom: 1em;
}

.home-campaign__head-ja {
  font-size: clamp(20px, 6.5vw, 60px);
  font-weight: 700;
  text-align:center;
  line-height:115%;
  padding:50px 0 20px 0;
  text-shadow: 2px 3px 10px #000;
}

.home-campaign__head-en {
  margin: 1.1em 0 1.6em;
}

.home-campaign__head-sub {
  padding: 0.1em 1em;
  text-align:center;
  font-size: clamp(17px, 3.5vw, 30px);
  color: var(--color-grayscale-100);
  background-color:#1C6B7B;
  font-weight: var(--font_weight_base);
  line-height: var(--line-height_head);
}

.home-campaign-intro__head {
  text-align: center;
  margin-bottom: 1em;
  font-size: 1.3em;
  padding:2% 0;
  font-weight: var(--font_weight_bold);
  line-height: var(--line-height_head);
}

.home-campaign-intro__subhead {
  text-align: center;
  padding: 0.5em 0 0.55em;
  font-size: 1.5em;
  font-weight: var(--font_weight_bold);
  line-height: var(--line-height_head);
  /*border-top: 1px solid;*/
}

.home-campaign-intro__img {
  margin: 2.5em 0 1.5em;
  overflow: hidden;
}

.home-campaign-intro__txt,
.home-campaign-sec__txt {
  font-size: 1.4em;
}

.home-campaign-sec {
  margin-top: 3em;
}

.home-campaign-sec__head {
	width:94%;
  margin:0 auto;
  padding:2% 0;
  background: var(--color-accent-600);
  color: var(--color-grayscale-100);
  text-align: center;
  font-size: 1.5em;
  font-weight: normal;
  line-height: var(--line-height_head);
}

.home-campaign-box {
  position: relative;
  margin-top: 1.5em;
  padding: 2.2em 2em 2.6em;
  /*background: var(--color-grayscale-100);*/
  color: var(--color-primary-500);
}

.home-campaign-box__img {
  margin-bottom: 2em;
}

.home-campaign-ol__item {
  display: grid;
  grid-template-columns: 1.25em auto;
  align-items: start;
  margin-top: 0.7692307692em;
  font-size: 1.3em;
  line-height: var(--line-height_head);
}

.home-campaign-ol__item + .home-campaign-ol__item {
  padding-top: 0.7em;
  border-top: 1px solid;
}





/*twitter*/
.home-campaign-flow {
  margin-top: 2em;
  background: var(--color-grayscale-100);
  width:90%;
  border:2px solid #232120;
  max-width:500px;
  margin:0 auto 5% auto;
  padding: 0.5% 0 ;
}

.pla_x {
	width:90%;
	text-align:center;
	margin:0 auto;
	display: block;
}
.pla_x img {
	width:200px;
}


.home-campaign-flow__head {
  text-align: center;
  line-height: var(--line-height_head);
}

.home-campaign-flow__head-ico {
  display: inline-block;
}

.home-campaign-flow__head-ico.is-x01::after {
  width: 3.1em;
  height: 3.3em;
}



.home-campaign-flow__head-txt {
margin: 3% auto;
  display: block;
  font-size: clamp(15px, 2.3vw, 20px);
  line-height: var(--line-height_head);
  color:#000;
  text-align: center;
}

/*LINE登録*/
a.home-campaign-flow-step__head {
	background-color:#459E48;
  border-radius: 9em;
  width:85%;
  padding: 1% 0;
  display: block;
  margin: 0 auto 40px auto;
  text-align: center;
  font-size: clamp(15px, 2.5vw, 23px);
  color:#fff;
  text-decoration: none;
}
.lineqr {
	display: block;
  margin: 0 auto;
  width:80%;
  max-width:250px;
}


.home-campaign-flow-step__txt {
  font-size: 1.4em;
  word-break: break-word;
}




/* アニメーション 
.js-c-anime-elem[data-anime=fadein-right], 
.js-c-anime-elem [data-anime=fadein-right] {
  transition: opacity 0.6s var(--mh--easing01), transform 0.6s var(--mh--easing01);
  opacity: 0;
  transform: translateX(20px);
}

.js-c-anime-elem:not(.is-animated)[data-anime=fadein-right], 
.js-c-anime-elem:not(.is-animated) [data-anime=fadein-right] {
  transition-duration: 0.3s, 0.3s !important;
  transition-delay: 0s, 0s !important;
}

.js-c-anime-elem[data-anime=mask-zoom], 
.js-c-anime-elem [data-anime=mask-zoom] {
  overflow: hidden;
  transition: transform 0.8s var(--mh--easing02), -webkit-mask 0.8s var(--mh--easing02);
  transition: transform 0.8s var(--mh--easing02), mask 0.8s var(--mh--easing02);
  -webkit-mask-image: linear-gradient(to bottom, #fff, #fff);
  mask-image: linear-gradient(to bottom, #fff, #fff);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
  -webkit-mask-position: center center;
  mask-position: center center;
  transform: scale(0.9);
}



.js-c-anime-elem.is-animated[data-anime=mask-zoom], 
.js-c-anime-elem.is-animated [data-anime=mask-zoom] {
	width:100%;
  -webkit-mask-size: 105% 105%;
  mask-size: 105% 105%;
  transform: scale(1) rotate(0.01deg);  
}

.js-c-anime-elem.is-animated[data-anime-delay="0.1"], 
.js-c-anime-elem.is-animated [data-anime-delay="0.1"] {
  transition-delay: 0.1s !important;
}

.js-c-anime-elem.is-animated[data-anime-delay="0.2"], 
.js-c-anime-elem.is-animated [data-anime-delay="0.2"] {
  transition-delay: 0.2s !important;
  color:#fff;
}

.js-c-anime-elem.is-animated[data-anime-delay="0.3"], 
.js-c-anime-elem.is-animated [data-anime-delay="0.3"] {
  transition-delay: 0.3s !important;
}

.js-c-anime-elem.is-animated[data-anime-delay="0.4"], 
.js-c-anime-elem.is-animated [data-anime-delay="0.4"] {
  transition-delay: 0.4s !important;
}

.js-c-anime-elem.is-animated[data-anime-delay="0.5"], 
.js-c-anime-elem.is-animated [data-anime-delay="0.5"] {
  transition-delay: 0.5s !important;
}

.js-c-anime-elem.is-animated[data-anime-delay="0.6"], 
.js-c-anime-elem.is-animated [data-anime-delay="0.6"] {
  transition-delay: 0.6s !important;
}*/

/* フッター */
.l-footer {
  position: relative;
  overflow: hidden;
}

.l-footer::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: 500px auto;
  mix-blend-mode: overlay;
  pointer-events: none;
}




.particles-container　{
	display: block;
	height: 100vh;
	opacity: 1;
}


/* --- スクロール領域確保のためのダミーセクション --- */
        .dummy-section {
            height: 800vh;
            display: block;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
        }

        /* --- アニメーションのメインコンテナ --- */
        .sequence-container {
            position: relative;
            display: block;
            margin: 0 auto 0 auto;
            height: 800vh;
            display: block;
			
        }

		

        /* --- スクロール中、画面に固定される要素 --- */
        .sticky-content {
            position: sticky;
            top: 0;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            z-index: 1;
        }

        /* --- 背景グラデーション --- */
        .background {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .bg-gold {
			background: #0f5dbe;
			background: linear-gradient(108deg, rgb(255, 255, 255) 0%, rgb(229, 205, 160) 45%, rgb(229, 222, 165) 55%, rgb(223, 181, 99) 100%);
            /*background: linear-gradient(135deg, #fdf4d5 0%, #d5b97d 100%);*/
			opacity: 1;
        }			
        .bg-pink {
			background: linear-gradient(108deg, rgb(229, 205, 160) 0%, rgb(255, 178, 178) 50%, rgb(245, 245, 245) 100%);
            /*background: linear-gradient(135deg, #ffe0e9 0%, #f7b4c7 100%);*/
        }
        .bg-blue {
			background: #6289bb;
  background: linear-gradient(108deg, rgb(235, 235, 235) 0%, rgb(171, 231, 249) 50%, rgb(255, 210, 156) 100%);
            /*background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);*/
        }
        .bg-green {
			background: #e6ffe6;
background: linear-gradient(108deg, #e6ffe6 0%, #cff8cf 50%, #bceccb 100%);
            /*background: linear-gradient(135deg, #e6ffe6 0%, #a8e6a8 100%);*/
        }
		
	.bg-gold:after,
	.bg-pink:after,
	.bg-blue:after,
	.bg-green:after {
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Cormorant Garamond', serif;
    white-space: nowrap;
    font-size: 20vmin;
    letter-spacing: -5px;
    position: absolute;
    bottom: -8%;
    left: 1%;
    z-index: 0;
}

.bg-gold:after {
    content: "PLATINUM";	
}

.bg-pink:after {
    content: "4thAnniversary";
}

.bg-blue:after {
    content: "ThankYouSoMuch";
}
.bg-green:after {
    content: "I'm filled with gratitude.";
}

        /* --- キャスト情報コンテナ --- */
        .cast-container {
            position: absolute;
            width: 97%;
            height: 100%;
			margin:0 auto;
            opacity: 0;
			left: 1.5%;
			right: 0;
        }

        .cast-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /*align-items: center;*/
            width: 100%;
            height: 100vh;
			position:relative;
        }

        /* --- 左側のテキストエリア --- */
        .cast-text {
            /*padding: 3vw 0 0 10vw;*/
            position: relative;
			z-index:10;
			display: block;
        }

        .background-text {
            position: absolute;
            bottom: 0;
            left: -5vw;
            font-size: 15vw;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.2);
            font-family: 'Cormorant Garamond', serif;
            white-space: nowrap;
        }

        .cast-info {
            font-size: 1rem;
            line-height: 2;
            color: #585858;
			margin:2% auto;
            position: relative;
		    text-align: center;
        }

        .cast-info .name {
           font-size: clamp(15px, 3.5vw, 30px);
            font-weight: 400;
            color: #000;
        }
		
		a.proflink {
			font-size: clamp(13px, 2.5vw, 20px);
			z-index:5;
			background-color:#189FBA;
			color:#fff;
			text-decoration:none;
			display:block;
			max-width:430px;
			width:55%;
			border-radius: 20px;
			padding:0.5% 2%;
			margin:2% auto;
		}

        /* --- 右側の画像エリア --- */
        .cast-image {
            display: flex;
            justify-content: center;
            align-items: center;
            padding:0;
            position: relative; /* 画像を重ねるための基準 */
            width: 100%;
            height: 100%;
			z-index:10;
        }
		
	.cast-container.cast-ren {
            opacity: 1;
        }

        .slideshow-image {
            position: absolute;
            width: 58%;
            max-width: 600px;
            height: auto;
            object-fit: contain;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            opacity: 0; /* 初期状態はすべて非表示 */
        }
        
        /* 各スライドショーの最初の画像だけ表示 */
        .cast-ren .slideshow-image:first-child,
        .cast-natsuna .slideshow-image:first-child,
        .cast-ria .slideshow-image:first-child,
        .cast-minagi .slideshow-image:first-child {
            opacity: 1;
        }


        /* --- 背景のパーティクル --- */
        .particle {
            position: absolute;
            border-radius: 50%;
            background: #ccc;
            animation: float 20s infinite linear;
        }

        @keyframes float {
            0% { transform: translateY(0) translateX(0); }
            50% { transform: translateY(-15vh) translateX(5vw); }
            100% { transform: translateY(0) translateX(0); }
        }

/* 前後のコンテンツに追加 */
.content-before,
.content-after {
    position: relative;
    z-index: 10;
}


        /* --- レスポンシブ対応 (スマホ版) --- */
        @media (max-width: 700px) {
            
			/*.pickup-circle {
            position: absolute;
			top: 90%;
            bottom: 10%;
        }*/
			
			.cast-item {
                grid-template-columns: 1fr;
                grid-template-rows: 15vh 85vh;
                align-content: center;
            }
            .cast-text {
                grid-row: 1;
                text-align: center;
				z-index:30;
            }
            .cast-image {
                grid-row: 2;
				justify-content: center;
                align-self: start;
				z-index:0;
            }
			
	
            .slideshow-image {
                width: auto;
                max-height: 90%;
                max-width: 100vw;
            }
            .background-text {
                font-size: 10vw; 
                /*bottom: auto;*/
                top: 0;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                width: 100%;
            }
            .cast-info {
                font-size: 0.8rem;
                /*background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(2px);
                padding: 1em;*/
				margin: 0 auto;
                border-radius: 8px;
            }
			.cast-text {
    padding: 5% 0 0 0;
    position: relative;
    z-index: 10;
}
			
        }





/*背景動画*/
.video-background {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* テキストより後ろに配置 */
}

/* 動画の上に少し暗いオーバーレイをかけて文字を読みやすくする */
.video-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 0.5の部分を0〜1で調整して暗さを変更 */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画面全体に動画を引き伸ばす */
}

/* --- テキストコンテンツ --- */
.content-overlay {
    display: flex; /* Flexboxを使って中央揃え */
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh; /* 画面の高さいっぱいに広げる */
    padding: 20px;
}

.text-block {
    max-width: 800px; /* 横幅が広がりすぎないように最大幅を指定 */
    width: 100%;
    text-align: center; /* テキストを中央揃えに */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 文字に影をつけて読みやすくする */
}

.subtitle {
    font-size: 1rem;
    margin-bottom: 10px;
}

h1 {
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: 0.1em; /* 文字間を少し広げる */
    margin-bottom: 15px;
}

.divider {
    width: 80px;
    height: 2px;
    background-color: #ffffff;
    margin: 0 auto 30px auto; /* 上下30px、左右は自動で中央に */
}

.text-block p {
    font-size: 1rem;
    line-height: 1.9; /* 行間を広げて読みやすく */
    margin-bottom: 20px;
}

.text-block p:last-child {
    margin-bottom: 0; /* 最後の段落下の余白をなくす */
}




.platop a {
    font-size: 0px;
	text-decoration:none;
	text-align:center;
    border: 0;
    padding: 0;
    position: fixed;
    top: 2px;
    left: 2px;
    z-index: 100;
    box-sizing: border-box;
    width: 39px;
    height: 40px;
    cursor: pointer;
	background-image: url(platop.webp);
    background-size: contain;
}

.cast_message_s {
	max-width:800px;
	display:block;
	margin: 10% 0 0 auto;
}

 @media (max-width: 700px) {

.cast_message_s {
        position: absolute;
        top: 370px;
        left: 5%;
        width: 85%;
    }
	
.cast-ren .cast_message_s {
	filter: drop-shadow(0 0 10px rgba(255, 234, 71, 0.7));
}
        .cast-natsuna .cast_message_s {
	filter: drop-shadow(0 0 10px rgba(255, 99, 71, 0.8));
}
        .cast-ria .cast_message_s {
	filter: drop-shadow(0 0 10px rgba(82, 166, 255, 0.7));
}
        .cast-minagi .cast_message_s {
	filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7));
}	
	
}


.footimg .pic_pc {
width:100%;
height:100vh;
display:block;
background-image:url(footbg01.webp);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}

.footimg  .pic_s {
	display:none;
}

@media (max-width: 700px) {
.footimg  .pic_s {
width:100%;
height:100vh;
display:block;
background-image:url(footbg01s.webp);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}

.footimg  .pic_pc {
	display:none;
}

}



/*4名グラビア・スライド*/
.slide {
  margin: 10px 0;
  padding:10% 0;
  display: block;
}

.slide-wrap {
  display: flex;
}

.slide-wrap.bottom {
  justify-content: flex-end;
}

.slide-wrap ul {
  display: flex;
}

.slide-wrap.top ul:first-child {
  animation: slideTop 50s -25s linear infinite;
}

.slide-wrap.top ul:last-child {
  animation: slideTop2 50s linear infinite;
}

.slide-wrap.bottom ul:first-child {
  animation: slideBottom 50s linear infinite;
}

.slide-wrap.bottom ul:last-child {
  animation: slideBottom2 50s -25s linear infinite;
}

.slide-wrap li {
  /*width: 30vw;*/
  align-content: center;
}

.slide-wrap.top li {
   width: 700px;
    margin: 0;
  padding:0;
}
.slide-wrap.bottom li {
width: 500px;
margin: 0;
  padding:0;
}

 @media (max-width: 700px) {
.slide-wrap.top li {
  width: 300px;
  align-content: center;
}
.slide-wrap.bottom li {
  width: 250px;
  align-content: center;
}

}



@keyframes slideTop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slideTop2 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes slideBottom {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(200%);
  }
}

@keyframes slideBottom2 {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
li::marker {
	display:none;
	font-size: 0;
}