@charset "UTF-8";



/*======================================================================================================================
========================================================================================================================

【index.css】



[01] リセット
[02] bodyデフォルト指定
[03] リンク色
[04] フォント指定
[05] Flexbox　汎用指定
[06] 左右フロート　汎用指定
[07] カラム　マージン汎用指定
[08] ボックス内　左右寄せ指定
[09] イメージ回り込み指定
[10] イメージ行揃え
[11] PC/スマホ 表示・非表示

[ioniconsシート] 
https://ionicons.com/v2/cheatsheet.html

[ベースカラー／クラス名]
【ベースカラー】
#359b33



/*ローディング
=================================================*/
.img_loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  z-index: 6;
}

.img_loading p{
  position: fixed;
  top: 50%;
  left: 39%;
  width: 23%;
  text-align: center;
  background-color: #7f9c8f;;
  z-index: 7;
  border-radius: 30px;
  padding: 20px;
}
.img_loading img {
  width: 100%;
  height: auto;
}




/*index共通パーツ*/

a.btn_greenline{
    display: block;
    width: fit-content;
    text-decoration: none;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
    padding: 5px 10px;
    border-radius: 100px;
	border: solid 1px var(--color-dark);
    letter-spacing: 0;
    margin: 10px auto;
	color: #333333;
}

.area_box_white{
position: relative;
background-color:#fff;
margin:0 auto;
border-radius: 20px;
max-width: 520px;
}

.ttl_green{
font-size: 2.4rem;
color: var(--color-dark);
margin:0px;
}

.area_box_white .ttl_green{
position: absolute;
top: -20px;
left: 20px;
}

.area_section{
margin:80px 20px;
}

@media (min-width: 992px) {
    a.btn_greenline{
	font-size: 1.6rem;
	}
}

/*==================================================================================================
MV・トップ
==================================================================================================*/


.area_section.top{
margin:80px 40px;
}

.area_top_text{
width: fit-content;
margin: 0 auto;
}

.area_top_img{
margin: 0 auto;
width: 25%;
max-width: 170px;
display: flex;
justify-content: center;
}

.area_top_img img{
height: auto;
width: 100%;
}

.area_top_img_text{
overflow: hidden;
}

/* アニメーションの定義 */
@keyframes slide {
  0% {
    transform: translateX(100%); /* 画面外から始まる */
    opacity: 1; /* 完全に表示 */
  }
  50% {
    transform: translateX(0); /* 中間地点で元の位置 */
    opacity: 1; /* 常に表示 */
  }
  90% {
    transform: translateX(-100%); /* 画面外に移動 */
    opacity: 0; /* 最後まで表示 */
  }
  100% {
    transform: translateX(-100%); /* 画面外で止まる */
    opacity: 0; /* 最後にフェードアウト */
  }
}

/* 画像にアニメーションを適用 */
.image-slider {
  width: 100%; /* 必要に応じて調整 */
  max-width: 800px;
  display: inline-block;
  animation: slide 18s linear infinite; /* アニメーションの実行時間27秒、一定速度で繰り返し */
  will-change: transform, opacity; /* アニメーション対象のプロパティを通知 */
}


/*==================================================================================================
MV
==================================================================================================*/
.area_img_top_sp{
width:100%;
height: 88vh;
overflow: hidden;
display: flex;
justify-content: center;
}

.area_img_top_sp img{
height: 100%;
width: auto;
}

.area_img_top_pc{
display: none;
}

.area_img_top img{
    width: 100%;
	height: 100%;
    object-fit: cover;
}
/*==================================================================================================
スケジュール
==================================================================================================*/
/* 
.area_section.schedule .wrapper{
padding: 40px 0;
}

.ul_schedule{
margin:0 20px 0 10px;
}

.ul_schedule li{
display: flex;
align-items: center;
position: relative;
}

.circle,.circle_end{
padding: 0 10px;
}

.circle p{
  font-size: 16px;
  color: #FFC700;
  }
.circle_end p{
  font-size: 16px;
  color: #F7F3BE;
  }

.ul_schedule li::before{
    background-color: #F7F3BE;
    content: "";
    height: 50%;
	width: 2px;
    position: absolute;
    top: -8px;
	left:18px;
    transform: translate(-50%);
	} */

/* .ul_schedule li::after{
    background-color: #F7F3BE;
    content: "";
    height: 50%;
	width: 2px;
    position: absolute;
    bottom: -8px;
	left:18px;
    transform: translate(-50%);
	}

.ul_schedule li:first-child:before,
.ul_schedule li:last-child:after{
display: none;
	} */
	
/* .ul_schedule .area_icon{
width: 85px;
margin: 5px 10px 5px auto;
}

.area_schedule_text{
display: flex;
flex-direction: column;
font-size: 1.4rem;
margin: 20px 0;
line-height: 1.8rem;
width: 240px;
margin-left: auto;
position: relative;
} */

/*
.schedule_01 .area_schedule_text{
margin: 20px 0 40px auto;
}
*/

/* .schedule_01_point{
position: absolute;
color: var(--color-dark);
bottom: 20px;
right: 0;
}

.ul_schedule .area_schedule_text h3{
margin: 0 auto 8px 0;
font-weight: 600;
}


.area_schedule_text .day{
display: flex;
}

.area_schedule_text .day .op{
position: relative;
margin-right: 15px;
}

.area_schedule_text .day .op::after{
  position: absolute;
  content: "";
  top: 25%;
  width: 8px;
  right: -11px;
  height: 1px;
  background-color:#333333;
}

.area_schedule_text .stext{
font-size: 1.2rem;
}

.schedule_05 .area_schedule_text .stext{
color: var(--color-dark);
}

.accordion_wrapper{
display: flex;
justify-content: center;
}

.caption_acdn{
font-size: 1.2rem;
color: #b8b8b8;
} */

/* .acdn{
margin: 0 0 60px 0;
} */

.accordion {
  background: #eee;
  position: relative;
}

.accordion dt:not(:first-of-type){
  margin-top: 5px;
}
.accordion dd {
  width:100%;
  height: auto;
}


.accordion dt::after{
  content: '＋';      /* 全角のプラス */
  position: absolute; /* 相対位置とする */
  top: 50%;           /* 上から50%の位置に指定 */
  right: 10px;        /* 右から10pxの位置に指定 */
  transform: translateY(-50%); /* 要素の半分だけ高さを上にずらす */
}

.accordion dd.open::after {
  content: '－';      /* 全角のマイナス */
}

.acdn dt {
  position: relative;
  border-radius: 30px;
  margin: 6px auto;
  width: 26px;
  height: 26px;
  border: solid #333333 1px;
}
.acdn dt:not(:first-of-type){
  margin-top: 5px;
}
.acdn dd {
  margin: 0 auto;
  display: none;
  width: 75%;
}

.acdn dt::after {
  content: '＋';      /* 全角のプラス */
  position: absolute; /* 相対位置とする */
  top: 50%;           /* 上から50%の位置に指定 */
  right:4px;        /* 右から4pxの位置に指定 */
  transform: translateY(-50%); /* 要素の半分だけ高さを上にずらす */
}
.acdn dt.open::after {
  content: '－';      /* 全角のマイナス */
}

.area_requirements_text{
 margin: 0 auto 23px;
 width: fit-content;
}


/*==================================================================================================
MVとスケジュールのレスポンシブ対応
==================================================================================================*/

@media (min-width: 768px) {
  #index_main{
  background: var(--color-lite-bg);
  }

	.area_img_top_sp{
	display: none;
	}

	.area_img_top_pc{
	display: block;
	width: 100%;
	height: auto;
	max-width: 1100px;
	margin: 0 auto;
	}}

  @media (min-width: 992px) {

	.ul_schedule{
	margin:0 40px;
	}


	.ul_schedule li {
		justify-content: space-between;}

	.area_schedule_text {
	width: 240px;
	}
	.area_schedule_text h3{
	font-size: 1.6rem;
	}
}

/* -----------------------------
   セクション全体のスタイル
   ----------------------------- */
#download_section {
  padding: 40px;
  background-color: #fff;
}

/* 中央寄せのコンテナ（幅制限 + 中央配置 + Flexbox） */
#download_section .container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

/* -----------------------------
   各ダウンロードアイテムのスタイル
   ----------------------------- */

.download .acdn dt::after{
  top: 50%;          
  right: 16px;      
  transform: translateY(-50%);
}

.download .acdn dt {
  width:fit-content;
  height: auto;
  padding: 5px 44px 5px 30px;
  border: solid 1px var(--color-dark);
  background-color: #fff;
}

.download .acdn dd {
  width: 85%;
  max-width:940px;
}

a.area_download{
  width: calc(50% - 30px);
  overflow: hidden;
  text-decoration: none;
}
   
.download_item {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download_item:hover {
  transform: translateY(-5px);
}

/* サムネイル画像 */
.download_thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

/* キャプション部分 */
.download_caption {
  padding-top:16px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* タイトル */
.download_caption .title {
  color: #333333;
}


.download_icon{
  width: 15px; 
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
}

.download_icon img{
width: 100%;
height: auto;
}

/* レスポンシブ対応：画面幅768px以下で1カラム化 */
@media (max-width: 768px) {
  #download_section .container {
    flex-direction: column;
    align-items: center;
  }
a.area_download{
    width: 100%;
  }
}




/*==================================================================================================
お知らせ
==================================================================================================*/
.area_section.info{
background-color: #fff;
position: relative;
z-index: 4;
}

.area_section.info .ttl_green{
position: absolute;
top:-20px;
left:20px;
}

.area_section.info ul.list_info {
	margin:0 0 20px 0px;
	display: flex;
	justify-content: space-between;
	overflow-y: scroll;
}
.area_section.info ul.list_info li {
	margin-bottom: 15px;
}
.area_section.info ul.list_info li:last-of-type {
	margin-bottom: 0;
}
#index .area_section.info ul.list_info li:nth-child(n + 4) {
	display: none;
}
.area_section.info ul.list_info li , .area_section.info ul li>a {
	display: flex;
	justify-content: space-between;
	color: #100805;
}
.area_section.info ul.list_info li a:hover {
	opacity: .7;
}
.area_section.info ul.list_info li .side_l {
	width: 70px;
}
.area_section.info ul.list_info li .side_l img {
	width: 70px;
	height: auto;
	box-sizing: border-box;
	border: 1px solid #ccc;
}
.area_section.info ul.list_info li .side_r {
	width: 195px;
	margin: 0 25px 0 10px;
}
.area_section.info ul.list_info li .side_r .date {
	font-size: 12px;
	text-decoration: none;
}
.area_section.info ul.list_info li .side_r .lead {
	font-size: 13px;
	margin: 0;
}
.area_section.info ul.list_info li>a .side_r .lead {
	text-decoration: underline;
}
.area_section.info ul.list_info li>a:hover .side_r .lead {
	text-decoration: none;
}

@media (min-width: 992px) {
	.area_section.info{
	padding:40px 0 40px 4%;
	margin:0px 10% 60px;
	}
}

/*ポータルサイトとの差異があるため、表示削除の対応*/
div.modal-content,
div.modal-footer{
display: none;
}

.area_btn_info a.btn_greenline{
    margin: 0 10px 0 auto;
}

/*==================================================================================================
賞金
==================================================================================================*/
/* .wrapper_box_white{
padding:40px 20px;
}

.area_section.award .area_icon{
width: 78px;
height: 63px;
margin: 0 15px 0 0;
}

.area_section.award .area_icon img{
width: 100%;
height: auto;
}

.area_text_award{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
}

.area_section.award .caption{
font-size: 1.2rem;
}

.ul_award li{
display: flex;
justify-content: space-between;
font-size: 1.4rem;
line-height: 1.5rem;
margin-bottom: 30px;
}

.ul_award li .price{
    min-width: 125px;
    text-align: center;
} */




/*==================================================================================================
作品展
==================================================================================================*/
/*背景設定*/
.wrapper_exhibition_entry{
background: #fff;
overflow: hidden;
}

.wrapper_exhibition{
width: 180%;
top: 0;
left: -40%;
background: var(--color-bg);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
padding-bottom: 200px;
overflow: hidden;
position: relative;
z-index: 1;
}

.wrapper_exhibition_arc{
position: relative;
}

.exhibition_arc {
    position: absolute;
	top:0;
    left: 50%;
    width: 100%;
    height: 70vw;
	max-height: 470px;
    background-color: var(--color-bg);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.wrapper_exhibition_content{
width: 55%;
margin: 0 auto;
}

#index .area_section.exhibition{
max-width: 540px;
margin: 0px auto;
}

.area_section.exhibition .ttl_green{
padding: 0 20px;
}

.area_exhibition_text{
padding: 15% 40px 0;
margin: 0 auto
}

.area_exhibition_text p{
margin-bottom: 10px;
}

.area_exhibition_text .bold{
font-weight: 400;
display: block;
margin-bottom: 20px;
}

.area_img_exhibition{
width: 100%;
max-width: 500px;
margin: 0 auto
}

.area_img_exhibition img{
width: 100%;
height: auto;
}

.wrapper_entry{
  background: #fff;
  padding: 50px 0 100px;
  position: relative;
  z-index: 1;
}

.area_section.entry{
padding: 20vw 0 0;
margin: 0;
}

.area_entry_btn{
padding-bottom: 40vw;
}

.area_section.entry p {
  text-align: center;
}

.area_entry_text::before,
.area_entry_text::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 1px;
  background-color: #333333;
  margin: 0 8px;
}

@media (min-width: 992px) {
.area_section.entry{
padding: 200px 0 0;
}

.area_entry_btn{
padding-bottom: 0;
}
.area_section.entry p,.area_section.entry span {
  font-size: 2.4rem;
}
}

/*==================================================================================================
背景イラスト
==================================================================================================*/
/* .area_section.schedule{
position: relative;
}

.illustration {
  display: none;
}


@media screen and (min-width: 1500px) {
  .illustration {
     display: block;
     position: fixed;
     width: 150px;
     height: auto;
     opacity: 0.2;
	 z-index: 3;
  }
  
  .illustration.l1{
  left: 0;
  top:40px
  }
  
  .illustration.l2{
   top: 340px;
   left: 50px;
   width: 180px;
  }
  
  .illustration.l3{
   top: 620px;
   left: 0px;
    width: 174px;
  }
  
    .illustration.l4{
   top: 840px;
   left: 50px;
    width: 150px;
  }
  
  .illustration.r1{
  right: 0;
  top:60px;
  }

  
  .illustration.r2{
    top: 290px;
    right: 70px;
  }
  
    .illustration.r3{
    top: 470px;
    right: -50px;
	width: 280px;
  }

    .illustration.r4{
    top: 810px;
    right: 0px;
	width: 180px;
  }
  
    .illustration.r{
    top: 0px;
    right: 0px;
  }
  
      .illustration.l{
    top: 0px;
    left: 0px;
  }
  
  .illustration {
  animation: floating-y 5.0s ease-in-out infinite alternate-reverse;
}
}

@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }

}

.area_footer{
position: relative;
z-index:4;
} */

/* 2026年用 =====================================*/
body {
    background-color: #FFFFFF;}

/* root */
:root{
  /* Base Colors */
  --color-bg: #FBE0E6;       /* 背景色（メインの淡い色） */
  --color-white: #FFFFFF;    /* 白 */
  --color-dark: #F29FB0;     /* 濃色（文字・強調用） */
  --color-accent: #F7BDC7;   /* 差し色 */
  --color-lite-bg: #F9F1F3;  /* 薄い背景色 */
  --color-font: #764427;     /* カラーテキスト */
  --marker-bg: linear-gradient(transparent 73%, #d8d8d8 0%);
}

/* =========================
   共通
========================= */


#index .bg_white{
  width: 100%;
  margin: 0;
  background: var(--color-white);
}

.bg_white_inner{
  max-width: 970px;
  margin: 0 auto;
}

/* =========================
   共通セクションタイトル
========================= */

.ttl_section {
  margin: 0;
  color: var(--color-dark);
  font-size: clamp(42px, 14vw, 54px);
  font-weight: 400;
  line-height: 1;
}

/* 英語 */
.ttl_section--en {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  letter-spacing: 0.02em;
}

/* 日本語 */
.ttl_section--ja {
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  letter-spacing: 0.04em;
    font-size: clamp(42px, 14vw, 45px);
}

.ttl_section_black{
    color:  #333333;
}

/* =========================
   トップ
========================= */

.jlaAbout {
  background: var(--color-white);
  padding: 40px 16px 48px;
}

.jlaAbout__inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.jlaAbout__logo {
  margin-bottom: 24px;
}

.jlaAbout__logo img {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto;
}

.jlaAbout__title {
  margin: 0 0 24px;
  color: var(--color-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.jlaAbout__text {
  margin: 0;
  color: var(--color-font);
  font-size: 15px;
  line-height: 2;
  /* letter-spacing: 0.08em; */
}

/* =========================
   スケジュール
========================= */



.scheduleArea {
  background: var(--color-white);
  padding: 0px 10px;
}


.scheduleArea .ttl_section {
  max-width: 540px;
  margin: 0 auto;
}

.scheduleList {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.scheduleCard {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 20px;
  background: var(--color-lite-bg);
  border: 2px solid transparent;
  box-sizing: border-box;
  transition:
    opacity 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.scheduleCard__title {
  margin: 0 0 10px;
  color: var(--color-font);
  font-size: 2rem;
  line-height: 1.4;
  text-align: center;
}

.scheduleCard__body {
  display: flex;
  align-items: center;
  gap: 30px;
}

.scheduleCard__icon {
  flex: 0 0 78px;
  width: 78px;
}

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

.scheduleCard__content {
  flex: 1 1 auto;
}

.scheduleCard__lead,
.scheduleCard__date,
.scheduleCard__note {
  margin: 0;
  color: var(--color-font);
  line-height: 1.6;
}

.scheduleCard__lead {
  font-size: 1.4rem;
}

.scheduleCard__date {
  margin-top: 4px;
  font-size: 1.4rem;
}

.scheduleCard__note {
  margin-top: 8px;
  color: var(--color-dark);
  font-size: 1.2rem;
}

/* 状態別 */
.scheduleCard.is-upcoming {
  background: var(--color-lite-bg);
  border-color: transparent;
  opacity: 1;
}

.scheduleCard.is-current {
  background: var(--color-bg);
  border-color: var(--color-dark);
  opacity: 1;
}

.scheduleCard.is-finished {
  opacity: 0.5;
}


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

  .jlaAbout {
    padding: 10px 60px;
  }

  .jlaAbout__logo {
    margin-bottom: 28px;
  }

  .jlaAbout__title {
    margin-bottom: 28px;
    font-size: 28px;
  }

  .jlaAbout__text {
    font-size: 18px;
    line-height: 2.2;
  }

  .scheduleArea {
    padding: 80px 20px;
  }

  .scheduleList {
    margin-top: 32px;
  }

  .scheduleCard {
    padding:10px 60px;
    border-radius: 36px;
  }

  .scheduleCard__title {
    margin-bottom: 0px;
    font-size: 2.4rem;
  }

  .scheduleCard__body {
    align-items: center;
    gap: 24px;
  }

  .scheduleCard__icon {
    flex: 0 0 110px;
    width: 110px;
  }

  /* .scheduleCard__lead {
    font-size: 1rem;
    line-height: 1.7;
  }

  .scheduleCard__date {
    font-size: 1rem;
    line-height: 1.7;
  }

  .scheduleCard__note {
    font-size: 0.95rem;
    line-height: 1.6;
  } */
}

/* =========================
   NEWS
========================= */
.info .ttl_section{
  margin-bottom:40px;
}


/* =========================
   受賞・入賞作品展
========================= */
#index .area_section.area_exhibition{
  margin: 80px 0;
}

.area_exhibition {
  background-color: var(--color-lite-bg);
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

.area_exhibition .ttl_section {
  text-align: center;
}

.exhibitionIntro {
  margin-top: 24px;
  padding: 0 0 32px;
}

/* .exhibitionIntro__circle {
  width: min(72vw, 240px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 24px;
  border: 1px solid var(--color-font);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-white);
} */
.exhibitionIntro__circle {
  width: calc(100vw + 2px);
  margin: 0 auto 24px -11px;
  border: 1px solid var(--color-font);
  overflow: hidden;
  background: var(--color-white);
}

.exhibitionIntro__circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exhibitionIntro__text {
  max-width: 560px;
  margin: 0 auto;
  color:#606060; 
  text-align: center;
}

.exhibitionIntro__text p {
  margin: 0;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.03em;
}

.exhibitionIntro__text span{
  font-weight: 700;
}


.exhibitionIntro__text p + p {
  margin-top: 16px;
}

/* =========================
   写真＋テキストエリア
========================= */

.area_exhibitionPhoto {
  margin-top: 0;
  padding-top: 20px;
}

.exhibitionPhotoLayout {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(340px, 1fr);
  gap: 72px;
  align-items: center;
}

.exhibitionPhotoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 18px;
  align-items: start;
}

/* 左右列を少し縦ずらし */
.exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(2),
.exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(4) {
  margin-top: 28px;
}

.exhibitionLead {
  min-width: 0;
}

.exhibitionLead__title {
  margin: 0;
  color: var(--color-font);
  font-family: 'Klee One', cursive;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.8;
  letter-spacing: 0.08em;
  font-weight: 400;
}

.exhibitionLead__text {
  margin: 28px 0 0;
  padding-top: 24px;
  position: relative;
  color: var(--color-font);
  font-size: 1.4rem;
  line-height: 2.1;
  letter-spacing: 0.08em;
}

.exhibitionLead__text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 1px;
  background: var(--color-dark);
  opacity: 0.4;
}

/* =========================
   写真
========================= */

.exhibitionPhotoItem {
  --reveal-delay: 0s;

  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    transform 2.6s cubic-bezier(.23, 1, .32, 1) var(--reveal-delay),
    opacity 2.2s cubic-bezier(.23, 1, .32, 1) var(--reveal-delay);
  will-change: transform, opacity;
  border-radius: 3px;
}

.exhibitionPhotoItem::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.92) 22%,
      rgba(255, 250, 252, 0.88) 46%,
      rgba(249, 241, 243, 0.72) 72%,
      rgba(249, 241, 243, 0) 100%
    );
  filter: blur(24px);
  transform: translate3d(0, 0, 0);
  transition:
    transform 3.4s cubic-bezier(.23, 1, .32, 1) var(--reveal-delay),
    opacity 2.8s cubic-bezier(.23, 1, .32, 1) var(--reveal-delay);
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}

.exhibitionPhotoItem.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.exhibitionPhotoItem.is-visible::before {
  opacity: 1;
  transform: translate3d(0, -118%, 0);
}

.exhibitionPhotoItem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition:
    transform 2.8s cubic-bezier(.23, 1, .32, 1) var(--reveal-delay);
  opacity: 0.8;
  border-radius: 3px;
}

.exhibitionPhotoItem.is-visible img {
  transform: scale(1);
}

/* タブ */
.exhibitionPhotoTab {
  position: absolute;
  top: 12px;
  display: inline-block;
  padding: 8px 20px;
  background: var(--color-dark);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  border-radius: 0 3px 3px 0;
  z-index: 3;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* 出現順 */
.exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(1) {
  --reveal-delay: 0s;
}

.exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(2) {
  --reveal-delay: 0.2s;
}

.exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(3) {
  --reveal-delay: 0.4s;
}

.exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(4) {
  --reveal-delay: 0.6s;
}

/* =========================
   PC
========================= */

@media screen and (min-width: 769px) {
  .exhibitionIntro {
    margin-top: 32px;
    padding-bottom: 40px;
  }

  .exhibitionIntro__circle {
    width: 420px;
    margin: 0  auto 32px;
    border-radius: 7%;
  }

  /* .exhibitionIntro__text p {
    font-size: 1.125rem;
    line-height: 2.1;
  } */

  .area_exhibitionPhoto {
    padding-top: 24px;
  }
}

/* =========================
   SP
========================= */

@media screen and (max-width: 768px) {
  .area_exhibition {
    padding: 50px 0px;}
 

  .exhibitionIntro {
   padding: 0px 10px 28px 10px;
  }

  .area_exhibitionPhoto {
    padding-top: 12px;
  }

  .exhibitionPhotoLayout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .exhibitionPhotoGrid {
    gap: 14px 14px;
  }

  .exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(2),
  .exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(4) {
    margin-top: 18px;
  }

  .exhibitionLead {
    text-align: center;
  }

  .exhibitionLead__title {
    font-size: 2rem;
    line-height: 1.7;
  }

  .exhibitionLead__text {
    margin-top: 22px;
    padding-top: 20px;
    line-height: 2;
  }

  .exhibitionLead__text::before {
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
  }

  .exhibitionPhotoItem {
    transform: translate3d(0, 72px, 0);
  }

  .exhibitionPhotoItem::before {
    inset: -20% -10%;
    filter: blur(22px);
  }

  /* .exhibitionPhotoTab {
    top: 10px;
    left: 10px;
    padding: 6px 12px;
    font-size: 0.82rem;
  } */

  .exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(1) {
    --reveal-delay: 0s;
  }

  .exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(2) {
    --reveal-delay: 0.18s;
  }

  .exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(3) {
    --reveal-delay: 0.36s;
  }

  .exhibitionPhotoGrid .exhibitionPhotoItem:nth-child(4) {
    --reveal-delay: 0.54s;
  }
}

/* 受領者特典===================== */
#index .area_benefit.area_section {
  margin: 0 auto;
  max-width: 940px;
}

.area_benefit {
  padding-bottom: 90px;
}

.benefit_intro {
  text-align: center;
  margin-bottom: 50px;
}

.benefit_intro .ttl_section--ja {
  color: var(--color-dark);
}

.benefit_intro__lead {
  margin: 0 10px;
  color:#606060;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.65;
  letter-spacing: 0.04em;
}

.benefit_intro__link {
  margin: 24px 0 0;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 500;
}

.benefit_intro__link a {
  color: #606060;
  text-decoration: underline;
}

.benefit_content {
  position: relative;
}

.benefit_content + .benefit_content {
  margin-top: 48px;
}

.benefit_content__head {
  position: relative;
  z-index: 3;
  margin-bottom: -70px;
}

.benefit_content__num {
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-font);
  font-size: clamp(64px, 10vw, 100px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.045em;
}

.benefit_content__ttl {
  margin: 0 0 0 80px;
  color: color-mix(in srgb, var(--color-font) 40%, transparent);
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 700;
  line-height: 1.2;
}

.benefit_content__box {
  position: relative;
  z-index: 1;
  width: calc(100% - 48px);
  margin-left: 48px;
  padding: 86px 24px 80px;
  background: var(--color-lite-bg);
  border-radius: 32px 0 0 32px;
  box-sizing: border-box;
}

.benefit_movie {
  width: min(48vw, 310px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
}

.benefit_movie iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.benefit_book {
  width: min(82%, 620px);
  margin-inline: auto;
}

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

@media screen and (max-width: 768px) {
  .area_benefit {
    padding-bottom: 70px;
  }

  .benefit_intro {
    margin-bottom: 60px;
  }

  .benefit_content + .benefit_content {
    margin-top: 20px;
  }

  .benefit_content__head {
    margin-bottom: -50px;
    margin-left: 10px;
  }

  .benefit_content__num {
    font-size: clamp(54px, 16vw, 76px);
    -webkit-text-stroke-width: 1.2px;
  }

  .benefit_content__ttl {
    margin-left: 58px;
  }

  .benefit_content__box {
    width: calc(100% - 34px);
    margin-left: 34px;
    padding: 74px 18px 33px;
    border-radius: 24px 0 0 24px;
  }

  .benefit_movie {
    width: min(62vw, 240px);
  }

  .benefit_book {
    width: 92%;
  }
}