@charset "UTF-8";
/* CSS Document */
/*=================================================

　円通院

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


/* ==========================================
　　共通
========================================== */
:root {
	/* 見出し用：しっぽり明朝 + フォールバック */
	--font-heading: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;

	/* 本文用：標準ゴシック */
	--font-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

	/* 基本の重なりレイヤー（10刻みで管理。間に差し込みたい要素が増えても対応しやすい） */
	--z-bk:        -100;   /* 背景 */
	--z-bk-deco:   -10;  /* 敷き布団　装飾 */
	--z-base:        1;   /* 通常のフロー内要素 */
	--z-decoration:  10;  /* 装飾・浮き要素 */
	--z-ui:          100; /* UI要素（常時見せたいボタン類） */
	--z-header:      500; /* ヘッダー・SPボトムナビなど、画面上の常設ナビゲーション */
	--z-fixed-btn:   600; /* pagetopボタンなど、画面固定の単体ボタン */
	--z-overlay:     900; /* ドロワーメニュー、トグルで開くサブメニューなど */
	--z-modal:       9999;/* モーダル・ポップアップ（常に最前面） */
}
body{
	margin: 0;
	background-color: #000;
	font-family: "Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	font-size: 14px;
}
body p{
	line-height: 1.7em;
}
img{
	width: 100%;
}
a{
	text-decoration: none;
}
.fb_wrap{
	max-width: 500px;
}
h3{
	margin: 0;
	text-align: center;
	font-family: var(--font-heading);
	color: #fff;
	font-size: 18px;
	letter-spacing: 0.2em;
}
h3 > p{
	margin: 0;
}
h3 .title_en{
	margin: 0 0 1em;
	text-align: center;
	font-family: var(--font-heading);
	color: #fff;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.2em;
}

hr {
  border: none; /* デフォルトの線をリセット */
  border-top: 1px solid #999CB1;
  margin: 30px 0; /* 上下の余白 */
}
/*PC*/
@media screen and (max-width:1039px) {
	body{
		min-width: 0;
		font-size: 15px;
	}
}
/*SP*/
@media screen and (max-width:500px) {
	.header-text h1 {
		margin-top: 0;
		margin-bottom: .5em;
	}
}


/* ==========================================
　　装飾レイヤー（常にはみ出し表示・スクロールと同期）
========================================== */
.deco-layer{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	overflow: visible;      /* はみ出しOK */
	pointer-events: none;   /* 下のコンテンツのクリックを妨げない */
	z-index: var(--z-decoration);
}

/* SNSボタンだけは実際にクリックさせたいので、個別に戻す */
.deco-layer .sns_link_btn{
	pointer-events: auto;
}

.deco-layer .title_deco{
	position: absolute;
}
.deco-layer .title_deco.left{
	top: 1em;
	left: -5em;
}
.deco-layer .title_deco.right{
	bottom: 7em;
	right: -1.5em;
}
.deco-layer .sns_link_btn{
	position: absolute;
	top: 1em;
	right: 1em;
	max-width: 80px;
	max-height: 80px;
}

@media screen and (min-width: 1035px) {
	.floating_area{
		position: absolute;
		top: 0;
		right: 10%;
		width: 500px;
		height: 100vh;
		overflow: visible;
	}

	.floating_area_inner{
		max-height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.deco-layer .title_deco.left{
		top: 15em;
		left: -5em;
	}
	.deco-layer .title_deco.right{
		bottom: 20em;
		right: -1.5em;
	}
	.deco-layer .sns_link_btn{
		top: auto;
		right: auto;
		bottom: 5%;/*12em*/
		left: -6em;
		max-width: 140px;
		max-height: 140px;
		
		z-index: var(--z-fixed-btn);
	}
}

/* ===== 落ち葉を表示するコンテナのスタイル ===== */

 /* タッチやクリックを完全に透過させる */
.leaves-container,
.leaf {
  pointer-events: none;
}
.leaves-container {
  position: relative;
  height: 100vh; /* コンテナの高さ 100vh*/
  width: 100%; /* コンテナの横幅 */
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
}

/* ===== 落ち葉のスタイル ===== */

/* 落ち葉の共通スタイル */
.leaf {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  animation: animate-leaf 20s linear;
}

/* 落ち葉1 */
.leaf-1 {
  background-image: url('images/photocon/leaf-1.svg'); /* 任意のパスを記入 */
}

/* 落ち葉2 */
.leaf-2 {
  background-image: url('images/photocon/leaf-2.svg'); /* 任意のパスを記入 */
}

/* 落ち葉3 */
.leaf-3 {
  background-image: url('images/photocon/leaf-3.svg'); /* 任意のパスを記入 */
}

/* ===== 落ち葉が降るアニメーション ===== */
@keyframes animate-leaf {
  0% {
    opacity: 0;
    top: 0;
    transform: rotate(0);
  }

  10% {
    opacity: .5;
  }

  90% {
    opacity: .5;
  }

  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(1080deg);
  }
}


/* ==========================================
　　コンテンツエリア（スクロール）
========================================== */
.main{
	position: relative;
	min-height: 100vh;
}

.floating_area{
	background-color: rgba(20, 21, 33, 0.3);
	max-width: 500px;/*393*/
	height: 100vh;
	
	position: absolute;
	top: 0;
	right: 0;

	overflow-x: hidden;
}

/*TOP*/
.main .top_area{
	position: relative;
	padding-top: 3em;
}
.main .top_area_inner{	
	position: relative;
	top: 0;
	right: 0;
}
.main .hp_link_btn.sp{
	display: block;
	
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0em;
	
	max-width: 60px;
}
.hp_link_btn.pc{
	display: none;
}

.main .header-text{
	position: relative;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	
	width: 100%;
	height: 100%;
	max-width: 250px;
	max-height: 600px;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	
	z-index: var(--z-ui);
	
}
.main .header-text .image_wrap{
	width: 100%;
	max-width: 200px;
	
	margin: 0 auto;
}
.main .header-text .image_wrap > img{
	width: 100%;
}
.main .header-text > p{
	color: #fff;
	font-family: var(--font-heading);
	text-align: center;
	margin: 0;
}

.main .header-text .logo_image_wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	max-height: 200px;
	
}
.main .header-text .logo_image_wrap > img{
	width: 100%;
	max-width: 70px;
	margin: 0.5em;
	
	position: relative;
	right: 3px;
}
@media screen and (max-width:500px) {
/*TOP*/
.main .top_area{
	position: relative;
	padding-top: 2em;
}
.main .header-text .logo_image_wrap > img{
	max-width: 40px;
	margin: 0.2em;
}
}


.main .header-text .logo_image_wrap > p{
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 200;
	text-align: center;
	
	margin: 0;
}
.main .header-text .logo_image_wrap .logo_text_jp{
	font-size: 20px;
	text-align: center;
	letter-spacing: 0.5em;
	margin-right: -0.5em; /* letter-spacingと同じ値をマイナスで指定 */
	line-height: 1.5em;
}
.main .header-text .logo_image_wrap .logo_text_en{
	font-size: 0.4em;
	letter-spacing: 0.2em;
	margin-right: -0.2em; /* letter-spacingと同じ値をマイナスで指定 */
}
.main .header-text .logo_image_wrap .logo_text_year{
	font-size: 1.5rem;
	letter-spacing: 0.7em;
	margin-right: -0.7em; /* letter-spacingと同じ値をマイナスで指定 */
	margin-top: 10px;
}
@media screen and (max-width:500px) {
.main .header-text .logo_image_wrap .logo_text_year{
	font-size: 1rem;
	line-height: 1em;
}
.main .header-text .logo_image_wrap .logo_text_jp{
	font-size: 18px;
	letter-spacing: 0.3em;
	margin-right: -0.3em; /* letter-spacingと同じ値をマイナスで指定 */
}
}


/*日時情報*/
.main .header-text .date_text{
	color: #fff;
	font-family: var(--font-heading);
	text-align: center;
	
	position: relative;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	
	width: 100%;
}
.main .header-text .date_text p{
	margin: 0.25em 0;
	font-size: 14px;
	letter-spacing: 0.2em;
}


.main .header-text .date_text .event-period{
	font-size: 1.2em;
	letter-spacing: 0.05em;
	margin-top: 1.5em;
}
@media screen and (max-width:500px) {
.main .header-text .date_text .event-period{
	font-size: 1.5em;
	margin-top: 0em;
}
}


.main .header-text .date_text .event-period span{
	font-size: 14px;
}
.main .header-text .date_text .event-time{
	background: #fff;
	color: #000;
	max-width: 180px;
	margin: 0 auto;
}
.main .header-text .date_text .last-entry{
}

/*縦書きテキスト*/
.vertical-text {
	/* 縦書き（右から左へ行が進む） */
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl; /* Safari / iOS用 */

	 /* 英数字の向きを自動調整 */
	text-orientation: mixed;
	margin: 0 auto;
}
.vertical-text > p{
	margin: 0;
	margin-top: 2em;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 14px;
	
	/* 行間や文字間の調整 */
	line-height: 2.7em;
	letter-spacing: 0.3em;
}


/*キャッチコピー画像化*/
.copy_img {
	width:80%;
	max-width: 210px;
	height: auto;
}
.copy_img img {
	display: block;
	width: 100%;
	height: auto; 
}
@media screen and (max-width:500px) {
/*キャッチコピー画像化*/
.copy_img {
	width:60%;
	max-width: 200px;
	height: auto;
}
}


.main .logo img.logo_pc{
	display: block;
	height: 100vh;
	width: auto;
}
.main .logo img.logo_sp{
	display: none;
}
/*IEのみ余白調整*/
@media all and (-ms-high-contrast: none) {
	.main .inner{
		padding-bottom: 200px;
	}
}

/* ========PCスタイル======= */
@media screen and (min-width: 1035px) {
	
	.floating_area{
		position: absolute;
		top: 0;
		right: 10%;
		
		width: 500px;/*393px*/
		max-width: 500px;
		
		height: 100vh;/* 画面の高さいっぱいを判定エリアにする */
		 
		overflow: visible;
	}
	
	.floating_area_inner{
		width: 100%;        /* 親（floating_area）の幅いっぱい */
		height: 100%;       /* 親（floating_area）の高さいっぱい */
		max-height: 100vh;  /* スクロールさせるための高さの上限 */	
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch; /*慣性スクロール（トラックパッド対策） */
	}
	
	.main .top_area{
		position: relative;
		top: auto;
		right: auto;
		
		min-height: 100vh;    /* 縦方向のセンタリングの基準を作る */
		display: flex;
		flex-direction: column;
		justify-content: center; /* header-textを縦中央に */
		
		overflow-x: visible;
	}
	
	/* HPリンクボタン */
	.main .hp_link_btn.sp{
		display: none;
	}
	.hp_link_btn.pc{
		display: block;
		
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		left: 0em;

		max-width: 40px;
		z-index: var(--z-fixed-btn);  /* 固定ボタン */
	}
	

	/* タイトル　*/
	.main .top_area .header-text{
		position: relative;
		top: auto;
		left: 50%;
		transform: translateX(-50%);

		width: 100%;
		height: auto;
		max-width: 300px;
		max-height: 750px;
	}
	.main .top_area  .header-text .image_wrap{
		max-width: 300px;
	}
	.main .top_area  .header-text .logo_image_wrap{
		max-height: 200px;
	}
	.main .top_area  .header-text .logo_image_wrap .logo_text_jp{
		font-size: 24px;
	}
	.main .top_area  .header-text .logo_image_wrap .logo_text_en{
		letter-spacing: 0.35em;
		margin-right: -0.35em; /* letter-spacingと同じ値をマイナスで指定 */
	}

	/*縦書きテキスト*/
	.vertical-text > p{
		font-size: 17px;
	}
	/*日時情報*/
	.main .top_area  .header-text .date_text p{
		font-size: 16px;
		letter-spacing: 0.2em;
	}
	.main .top_area  .header-text .date_text .event-period{
		font-size: 1.8em;
		letter-spacing: 0.05em;
		margin-top: 0em;
	}
	.main .top_area  .header-text .date_text .event-period span{
		font-size: 16px;
	}

}


.heading-37 {
	font-size: 14px;
	width: auto;
	font-weight: normal;
	letter-spacing: .2em;
	display: inline-block;
    position: relative;
    padding: .2em 1em;
	margin: 0;
	margin-top: .5em;
    color: #ffffff;
}

.heading-37::before,
.heading-37::after {
    display: inline-block;
    position: absolute;
    width: 5px;
    height: 100%;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    content: '';
}

.heading-37::before {
    top: 0;
    left: 0;
    border-right: none;
}

.heading-37::after {
    bottom: 0;
    right: 0;
    border-left: none;
}


/* ==========================================
　　各セクション　共通パーツ
========================================== */
section .box_area{}
.section_title{
	width: 90%;
	margin: 0;
	margin-bottom: 1em;
}
.section_title::before{
	display: inline-block;
	content: "";
	width: 20px;
	height: 60px;/*30px*/

	background-image: url("images/menu_line.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.section_title_inner{
	display: inline-block;
	padding-left: .5em;
	
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 200;
	line-height: 0.1em;
	letter-spacing: 0.3em;
}
.section_title_inner span{
	font-size: 0.9rem;
	padding-left: 3.5em;
	letter-spacing: 0.2em;
}
.section_title_inner .section_icon{
	width: 40px;
	height: 40px;
}
   
.sec-ttl {
	font-family: var(--font-heading);
	
	position: relative;
    top: 0;
    width: 80%;
	margin:  0 auto;
    padding: .5em;
	
    text-align: center;
			
    letter-spacing: .3em;
    -moz--writing-mode: initial;
    -ms-writing-mode:initial;
    -webkit-writing-mode: initial;
    -o-writing-mode: initial;
    writing-mode: initial;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;

}
.sec-ttl .ttl-inner {
    padding: 0;
	letter-spacing: 0.02em;
	color: #fff;

}
.sec-ttl .ttl-inner span {
    font-size: 1.8em;
}
/* ==========================================
　　開催概要（about）
========================================== */
.button a {
    display: block;
    padding: 1em;
    border: 1px solid #fff;
    text-decoration: none;
    margin: 1em 0;
    text-align: center;
}
#about{	
    color: #fff;
	margin-top: 6em;
}
#about .inner{
	width: 100%;
	padding: 40px 20px;
	background: none;
	background-color: #131422;
}
#about .section_title{
	margin: 1.2em 0;
}

#about article p {	
    text-align: center;
}

/* --- タブボタンエリア --- */
.tab-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 20px 0 35px;
}
.tab-menu li+li {
  border-left: 1px solid #fff;
}

.tab-item {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-family: var(--font-heading);	

  position: relative;
  padding-left: 1em;
  transition: color 0.3s ease;
}
/* 選択中のタブ（黄色＆太字） */
.tab-item.is-active {
  color: #FFFF8B;
}

/* 選択中のタブの下につく矢印（V） */
.tab-item.is-active::after {
  content: "";
  width: 11px;
  height: 11px;
	
  background-image: url("images/arrow_under.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
	
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

/* --- タブ切り替えの表示制御 --- */
.tab-content {
  display: none; /* 通常は非表示 */
  margin: 3em 0;
}

.tab-content.is-active {
  display: block; /* アクティブなものだけ表示 */
  animation: fadeIn 0.3s ease-in-out;
}

/* タブ内の見出し（必要に応じてデザイン調整） */
.tab-content h3 {
  color: #fff;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}


#tab-price{
	margin-top: 1em;
}

#tab-time{
	margin-bottom: 0;
}

/* ふんわり表示させるアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (max-width:1039px) {
}

/* ーーーーーーーーーーーーーーー
	タブ個別スタイル 
ーーーーーーーーーーーーーーーーー*/
/* 夜間拝観料 */
#about h4 {
	text-align: center;
	font-size: 1rem;
	
    display: table;/*inline-block*/
    position: relative;
    padding: 0 2.5em;
    color: #ffffff;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}
#about h4::before,
#about h4::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 25px;
    height: 1px;
    background-color: #ffffff;
}
#about h4::before {
    left: 0;
}
#about h4::after {
    right: 0;
}

#about article table{
	width: 100%;
}
#about article table .strong{
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.5em;
}
#about article table {
	padding: 1rem 0;
}
#about article table tr{
	margin-bottom: 20px;	
	text-align: left;
	border: 1px solid #999CB1;
}
#about article table th{
	font-weight: bold;
	vertical-align: top;
	white-space: nowrap;
	line-height: 1.8em;
	border-right: 1px solid #999CB1;
	
	padding: 1rem;
}
#about article table td{
	line-height: 1.8em;
	padding: 1rem;
}
#about article p.kome{
	color: #999CB1;
	margin: .5em;
	text-align: left;
	font-size: 14px;
}
#about .inner p.about_attention{
	margin-top: 1em;
	color: #F86060;
}

#about .inner .ticket_map{
	display: block;
}

/* 期間と見ごろ */
#about article .foliage-season p > storong{
	font-size: 15px;
	letter-spacing: 0.1em;
}

/* 所要時間 */


/* ==========================================
　　紅葉状況（condition）
========================================== */
#box2{	
	padding: 2em 1em;
	background-image: url("images/foliage_areas_bk.jpg");
	
	background-size: 130%;
	background-position: center 0px;
	background-repeat: no-repeat;
	
	/* 動きをスムーズにするための設定 */
	position: relative;
	overflow: hidden;
}
#leaf{
	padding: 1.5em 0px;
	
    color: #fff;
	background-color: rgba(20, 21, 33, 0.3);
}

#leaf .section_title_inner{
	padding-left: 0.2em;
}
#leaf .section_title_inner .section_icon{
	width: 47px;/*60px*/
	height: 47px;/*60px*/
}
#leaf .section_title_inner span{
	padding-left: 4em;
	margin-top: -1em;
}

.foliage_areas{
}
.foliage_areas p{
	text-align: center;
	margin-top: 0;
}
.foliage_areas .foliage_image_area{
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 3em;
	
	padding: 1em 2em;
}
.foliage_areas .foliage_image_area > h4{
	font-family: var(--font-heading);
	letter-spacing: 0.25em;
	font-size: 1.3rem;
}
.foliage_areas .foliage_image_area h4 > span{
	font-weight: 200;
	font-size: 0.6em;
	color: rgba(255,255,255,0.7);
	letter-spacing: 0.1em;
}
.foliage_areas .foliage_image_area img{
	width: 134px;
	height: 134px;
}
.foliage_areas .area_detail_btn{
	width: 260px;
	height: 40px;
	margin: 0 auto;
	
	background-color: #000000;
	border-radius: 30px;
	border: 1px solid #fff;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.foliage_areas .area_detail_btn a{
	display: flex;
	flex: 1;
	justify-content: center;
}

.foliage_areas .area_detail_btn a > p{
	font-family: var(--font-heading);
	margin: 0;
	text-align: center;
	line-height: 1em;
	font-size: 14px;
	
	display: inline-block;
}

.foliage_areas .area_detail_btn a p >span{
	font-size: 0.7em;
}


@media screen and (max-width:1039px) {
}

/* ==========================================
　　見どころ（highlight）
========================================== */
#box3{	
	padding: 20px;
	background-image: url("images/highlight_areas_bk.jpg");
	background-size: cover;
}
#highlight{
	padding: 1em 0px;
	color: #fff;
}
#highlight .inner{
	width: 100%;
	box-sizing: border-box;
}

/* ==========================================
　　境内マップ
========================================== */
.highlight-map{
	position: relative;
	max-width: 480px;
	margin: 0 auto 50px;
}

.highlight-map__image-wrap{
	position: relative;
	width: 100%;         /* レスポンシブに伸縮 */
	max-width: 700px;
	
	overflow: hidden;
	border-radius: 4px;
}
.highlight-map__image{
	display: block;
	width: 100%;
	height: auto;
}


/* マップ上のヒントバッジ（スポットをタッチ！） */
.highlight-map__hint{
	position: absolute;
	top: 12px;
	right: 0;
	z-index: var(--z-ui, 2);

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 60px;
}
.highlight-map__hint img{
	width: 50px;
	height: 50px;
	margin-bottom: 4px;
}
.highlight-map__hint p{
	margin: 0;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
/* ==========================================
　　マップのホットスポット（透明なタップ領域）
========================================== */
.map-hotspot{
	position: absolute;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.map-hotspot:active{
	background: rgba(255,255,255,0.08);
}
.map-hotspot.map-hotspot--rect{
	transform: none;
	border-radius: 4px;
}

/* ==========================================
　　スポット解説モーダル（演奏者モーダルと同じ構造）
========================================== */
.spot-modal{
	position: fixed;
	inset: 0;
	z-index: var(--z-modal, 9999);

	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.spot-modal.is-active{
	display: flex;
}
.spot-modal__overlay{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.75);
}
.spot-modal__panel{
	position: relative;
	z-index: 1;

	width: 100%;
/* 	max-width: 340px; */
	max-width: 550px; 
	max-height: 80vh;
	overflow-y: auto;

	background: #231917;
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;

	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.spot-modal.is-active .spot-modal__panel{
	opacity: 1;
	transform: translateY(0) scale(1);
}

.spot-modal__close{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;

	width: 32px;
	height: 32px;
	background: rgba(0,0,0,0.4);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}
.spot-modal__close span{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1px;
	background: #fff;
}
.spot-modal__close span:first-child{ transform: translate(-50%, -50%) rotate(45deg); }
.spot-modal__close span:last-child{ transform: translate(-50%, -50%) rotate(-45deg); }

.spot-modal__content{
	padding: 20px;
}
.spot-modal__content h3{
	margin: 0 0 0.5em;
	font-family: var(--font-heading);
	font-size: 17px;
	letter-spacing: 0.1em;
}
.spot-modal__content h3 span{
	display: block;
	margin-top: 0.2em;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: #cbb896;
}
.spot-modal__content p{
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: #e8e2d8;
}
.spot-modal__image{
	width: 100%;
	display: block;
	margin-bottom: 1.5em;
	border-radius: 2px;
}
@keyframes highlight-hotspot-ripple{
	0%{ transform: scale(1); opacity: 0.8; }
	100%{ transform: scale(1.8); opacity: 0; }
}
.map-hotspot:active .map-hotspot__thumb{
	transform: scale(0.92);
}

/* ==========================================
　　アコーディオンリスト
========================================== */
.highlight-accordion {
	max-width: 480px;
	margin: 0 auto;
}

.highlight-item {
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.35);
	margin-bottom: 12px;
	overflow: hidden;
}

.highlight-item__header {
	scroll-margin-top: 100px; /* 画面上部＋下部固定メニュー分の余白を強制確保 */

	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;

	background: none;
	border: none;
	padding: 16px 20px;
	margin: 0;
	cursor: pointer;
	color: #fff;
	text-align: left;

	-webkit-tap-highlight-color: transparent;
}

.highlight-item__title {
	display: flex;
	flex-direction: column;
	align-items: baseline;
	gap: 3px;
	font-family: var(--font-heading);
}

.highlight-item__title-jp {
	font-size: 1.1rem;
    letter-spacing: 0.15em;
}

.highlight-item__title-en {
	font-size: .9em;
	letter-spacing: 0.1em;
	color: #cbb896;
}

/* 右側アイコン（下向き矢印 ∨） */
.highlight-item__chevron {
	position: relative;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	margin-right: 4px;
}

/* アコーディオンが開いた状態（上向き矢印 ∧） */
.highlight-item.is-open .highlight-item__chevron {
	transform: rotate(-135deg);
}

/* 開閉本体 */
.highlight-item__body {
	height: 0;
	overflow: hidden;
	transition: height 0.5s ease;
}

.highlight-item__body-inner {
	padding: 0 16px 20px;
}

.highlight-item__text {
	margin: 3em 0 1.5em;
	font-size: .95rem;
	line-height: 1.7;
	color: #e8e2d8;
}
.highlight-item__text.no_slide {
	margin: 0 0 1.5em;
}

/* ==========================================
   カルーセル（両端見切れ・ゆっくり自動送り）
========================================== */
/* 全体の外枠（アコーディオンの余白に合わせて調整） */
.highlight-carousel {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	overflow: hidden;
}

.slick-dotted.slick-slider {
    padding: 0 !important;
}
/* 前後の見切れ画像を表示可能にし、paddingを外側に持たせる */
.highlight-carousel .slick-list {
  	overflow: visible;
	margin: 0 auto;
	padding: 0;
}
/* 各スライドの基本スタイル */
.highlight-carousel .slick-slide {
  box-sizing: border-box;
	
  opacity: 0.4; /* 両端の見切れ画像は薄くする */
  transition: opacity 0.3s ease;
}

.highlight-carousel .slick-slide img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(255,255,255,0.2);
  display: block;
}

/* 中央のアクティブなスライド */
.highlight-carousel .slick-slide.slick-center {
  opacity: 1; /* 中央だけくっきり表示 */
}

/* ドットインジケーター */
.highlight-carousel .slick-dots {
  position: absolute;
  bottom: -35px;       /* 位置の上下調整 */
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;          /* ulデフォルトの左余白(padding-left)をリセット */
  list-style: none;
  text-align: center;  /* インライン要素のドットを中央寄せ */
}

.highlight-carousel .slick-dots li {
  display: inline-block; /* ドットを横並びにして中央に揃える */
}

/* ==========================================
   YouTube埋め込み枠
========================================== */
.highlight-item__video {
	margin-bottom: 1.5em;
}

.highlight-item__video-inner {
	display: flex;
	align-items: center;
	justify-content: center;

	aspect-ratio: 16 / 9;
	background: #000;
	border: 1px solid rgba(255, 255, 255, 0.3);

	color: #cbb896;
	font-size: 12px;
}

.highlight-item__video-inner iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* ==========================================
   ボタン
========================================== */
.highlight-item__button a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	max-width: 300px;
	margin: 0 auto;
	padding: 0.5em;
	
	border: 1px solid #fff;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	text-decoration: none;
	font-family: var(--font-heading);
	font-size: 1rem;
	letter-spacing: 0.15em;
	line-height: 1em;

	transition: background 0.25s ease, color 0.25s ease;
}

/* 左側の「>」矢印アイコン */
.highlight-item__button a::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

.highlight-item__button a span {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	color: inherit;
	opacity: 0.75;
}

/* ==========================================
   スポットのポップアップ（モーダル）
========================================== */
.spot-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal, 9999);

	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.spot-modal.is-active {
	display: flex;
}

.spot-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
}

.spot-modal__panel {
	position: relative;
	z-index: 1;

	width: 100%;
/* 	max-width: 340px; */
	max-width: 550px;
	max-height: 80vh;
	overflow-y: auto;

	background: #231917;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;

	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.spot-modal.is-active .spot-modal__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.spot-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;

	width: 32px;
	height: 32px;
	background: rgba(0, 0, 0, 0.4);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.spot-modal__close span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1px;
	background: #fff;
}

.spot-modal__close span:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.spot-modal__close span:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.spot-modal__content {
	padding: 20px;
}

.spot-modal__content .spot-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 1em;
	display: block;
}

.spot-modal__content h3 {
	margin: 0 0 0.3em;
	font-family: var(--font-heading);
	font-size: 17px;
	letter-spacing: 0.1em;
}

.spot-modal__content h3 span {
	display: block;
	margin-top: 0.2em;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: #cbb896;
}

.spot-modal__content p {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: #e8e2d8;
}

/* ==========================================
   PC幅
========================================== */
@media (min-width: 1035px) {
	.highlight-item__header:hover .highlight-item__title-jp {
		opacity: 0.8;
	}

	.highlight-item__button a:hover {
		background: #fff;
		color: #231917;
	}

	.spot-modal__close:hover {
		background: rgba(0, 0, 0, 0.6);
	}
}

/* ==========================================
   アクセシビリティ：モーション低減設定を尊重
========================================== */
@media (prefers-reduced-motion: reduce) {
	.highlight-map__hint img {
		animation: none;
	}

	.highlight-carousel__track,
	.highlight-item__body,
	.spot-modal__panel {
		transition: none;
	}
}

/* ==========================================
　　ご注意（caution）
========================================== */
#caution{
	padding: 3em 0;
	background-color: #14152180;
}
#caution .inner{
	width: 90%;
	margin: 0 auto;
	color: #fff;
}
#caution .title{
	font-weight: normal;
	background: url("common/img/gotyuui-img1.png") center top/76px no-repeat;
	padding-top: 100px;
	margin-bottom: 50px;
	font-family: Georgia,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
#caution p{
	text-align: left;
	line-height: 1.8em;
	margin: 0;
}
#caution ul{
	margin-bottom: 30px;
	padding-left: 0;
}
#caution ul li{
	padding: 0 0 0.5em 0;
}

#caution ul.caution-detail{
	list-style: none;
}
#caution ul.caution-detail li{
	padding: 1em 0;
	border-bottom: 1px solid #999CB1;
}
#caution ul.caution-detail > li:first-child{
	border-top: 1px solid #999CB1;
}
#caution ul.caution-detail li .caution_flex{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
#caution ul.caution-detail li .caution_flex > img{
	width: 30%;
}
#caution ul.caution-detail li .caution_flex > p{
	width: 70%;
}

#caution ul.caution-sub-detail{
	list-style: disc;
	margin: 1em 0;
	padding-left: 1em;
	line-height: 1.8em;
}
#caution ul.caution-sub-detail li{
	color: #fff;
	padding-top: 0.5em;
	border: none;
}

#caution .pet-info .line > span{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 15px;
}
#caution .pet-info > ul{
	border: none;
	border-bottom: 1px solid #999CB1;
	padding-left: 1em;
	padding-bottom: 2em;
}
#caution .pet-info > li{
	color: #fff;
	padding-top: 0.5em;
	
	border: none;
}



/* PC */
@media screen and (min-width:1039px) {
}


/*=====================================
フォトギャラリー
=======================================*/
#box5 {
	padding: 6em 1em;
	background-color: #000;
}
#gallery .inner .section_title {
	margin-bottom: 2.5em;
}
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: auto;
  height: 300px;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}

.slick-prev:before, .slick-next:before {
    font-size: 40px!important;
}
.slick-prev, .slick-next {
    width: 40px!important;
    height: 40px!important;
}
.slick-dots {
    bottom: -30px!important;
}
.slick-dots li {
    width: 10px!important;
    height: 10px!important;
}
.slick-dots li button:before
{
    font-size: 10px!important;
    width: 10px!important;
    height: 10px!important;
    color: #fff!important;
}
.slick-dots li.slick-active button:before
{
    color: #fff!important;
}

p.slide_text {
	text-align: center;
	color: #999CB1;
	font-size: 12px;
}

/* PC */
@media screen and (min-width:1040px){
}


/*=====================================
フォトコンテスト
=======================================*/
#photocontest .title_wrap {
  background: url("images/photocon/midashi_bg_sp01.png"),linear-gradient(48deg, rgba(255, 245, 188, 0.85), rgba(209, 254, 237, 0.85) 70%);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  padding: 20px 30px 50%;/*15vw*/
height: auto; /* コンテナの高さ 100vh*/
}
#photocontest {
	border-bottom: 4px solid #000;
}
#photocontest .content_wrap {
  max-width: 800px;
  margin: auto;
}

#photocontest .content_wrap h2 {
  max-width: 260px;
  width: 90%;
  margin: 0.5em auto 0;
}

/*#photocontest .content_wrap h2::after {
  content: "";
  display: block;
  width: 170px;
  height: 70px;
  margin: 0.5em auto 0;
  background-image: url("images/photocon/midashi_logo.png");
  background-size: contain;
}*/

#photocontest .content_wrap time {
  display: block;
  max-width: 300px;
  margin: auto;
}

#photocontest .content_wrap p {
  text-align: left;
  line-height: 2em;
}

/* SPのみ <br> を非表示 */
#photocontest .content_wrap p br {
  display: none;
}

#photocontest .content_wrap p.reward {
  font-size: 100%;
  font-weight: bold;
  line-height: 1.5;
  margin: 0.5em auto 1.5em;
}

/* reward内の <br> はSPでも表示 */
#photocontest .content_wrap p.reward br {
  display: block;
}

#photocontest .content_wrap h3 {
  text-align: center;
  color: #000;
  background-image: url("images/photocon/midashi_bg_deco.png");
  padding: 0.5em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#photocontest .content_wrap .sns_wrap {
  display: flex;
  justify-content: space-evenly;
  max-width: 380px;/*500*/
  margin: 0 auto 2em;
  align-items: flex-end;
	position: relative;
  z-index: 10;
}

#photocontest .content_wrap .sns_wrap a {
  display: block;
  width: 32%;
	pointer-events: auto;
}

#photocontest .content_wrap .sns_wrap a:nth-child(2) {
    width: 90px;
}

/*sp*/
@media screen and (max-width: 1040px) {
	#photocontest .title_wrap {
}
}
@media screen and (max-width: 500px) {
	#photocontest .title_wrap {
}
}

/*アコーディオン
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿*/

section.photocontest {
    background-color: #C39E99;
    padding-bottom: 100px;
    background-image: url(images/photocon/midashi_bg_pc_bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
}
/*アコーディオンで現れるエリア*/
.box_wrap .box {
	padding: 50px 20px 50px;
    max-width: 800px;
    margin: auto;
}
.box_wrap .box p.caution{
    padding: 30px;
    background-color: #EEE;
 border-radius: 10px;   
}

.oubo_flex {
	width: 90%;
	margin: auto;
    margin-bottom: 2em;
	
	display: flex;
    flex-wrap: wrap;
    max-width: 500px;
}

.oubo_flex div{
	width: 100%;
    margin: 0 auto;
}
.oubo_flex div img {
	display: block;
	width: 60%;
    margin: 0 auto;
}
.oubo_flex div p{
    margin: 0.5em 0;
	margin-top: 2em;
    font-size: 14px;
}


.oubo_flex > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .7em 1em;
    background-color: #e5dcc3;
    color: #000;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
	font-family: var(--font-heading);
}

.oubo_flex > label:hover,
.oubo_flex label:has(:checked) {
    background-color: #ac8315;
    color: #fff;
}

.oubo_flex label:has(:checked)::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #ac8315;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.oubo_flex input {
    display: none;
}

.oubo_flex > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
}

.oubo_flex label:has(:checked) + div {
    display: block;
}



.box_wrap .box h3{
	padding: .5em 0;
	margin: 0;
	font-weight: bold;
	color: #333;
	border: solid 2px #333!important;
	border-right: none!important;
	border-left: none!important;
	margin-top: 60px;
}
.box_wrap .box dl{
display: flex;
align-items: baseline;
    border-bottom: solid 1px#ccc;
    padding: 0em 0 1em;
}
.box_wrap .box dt{
    font-weight: bold;
    margin-right: 1em;
    width: 10em;
}
.box_wrap .box dd{
margin: 0;
width: calc(100%);
}
.box_wrap .box dd p{
margin: 0;
    font-weight: bold;
}
.box_wrap .box .Proh_list{
    font-size: 90%;
    padding: 20px;
    background-color: #EEE;
    border-radius: 10px;
    height: 250px; 
    overflow-y: scroll;}


.box_wrap .box .Proh_list h3{
        margin-top: 0;
    border-top: none;
    border-bottom: solid 1px;
}

	 .Proh_list::-webkit-scrollbar{
   width: 22px;
         border-radius: 10px;
}

.box_wrap .box .Proh_list ul{
padding: 0 1.5em;}

 .Proh_list::-webkit-scrollbar-track{
   background-color: #eee;
    border-radius: 50px;
             margin-top: 4px;
        margin-bottom: 4px;

}
 .Proh_list::-webkit-scrollbar-thumb{
    background-color: #CCC;
    border-radius: 10px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    background-clip: padding-box;
}
.box_wrap .box .Proh_list p > span{
	display: block;
}

/*PC*/
@media screen and (min-width: 1040px) {
}

/*====================================================================
.s_06 .accordion_one
====================================================================*/
.s_06 .accordion_one {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.s_06 .accordion_one .accordion_header {
	cursor: pointer;
    font-size: 18px;
	font-family: var(--font-heading);
	letter-spacing: .15em;
    padding: 15px 15px 20px;
    transition: all .5s ease;
    text-align: center;
    color: #A7760B;
    background-color: #FDFFC7;
    border-top: solid;
    margin: 0;
    position: relative;
}
.s_06 .accordion_one .accordion_header::after {
    content: "";
    display: block;
    width: 13px;
    height: 7px;
    background-image: url("common/img/arrow_r.png");
    background-size: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6px;
}

.s_06 .accordion_one .accordion_header:hover {
  opacity: .8;
}


.s_06 .accordion_one .accordion_inner {
  display: none;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.95);
    background-size: cover;
    background-position: top;
}
.s_06 .accordion_one .accordion_inner dl{
	margin: 0;
	padding: 1em;
}

.s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn {
    display: block;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    line-height: 1.3;
    font-size: 16px;
    font-weight: normal;
    position: relative;
    cursor: pointer;
    border: solid 1px;
    max-width: 400px;
    margin: 30px auto 0;
	border-radius: 50px;
	font-family: var(--font-heading);
}
.s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn::after{
    content: "";
    display: block;
    width: 13px;
    height: 7px;
    background-image: url(common/img/arrow_b.png);
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.s_06 .accordion_one .accordion_inner .closeArea .close_box a.close_btn:hover {opacity: .8;}

.youtube_wrap{
    width: 100%;
    aspect-ratio: 16 / 9;
}
.youtube_wrap iframe{
      width: 100%;
  height: 100%;
}
@media screen and (max-width: 1039px){
    .youtube_wrap{

	}
}


/* ==========================================
　　SNSなど（sns）
========================================== */
#sns{
	background-color: #fff;
	padding: 2em 1.5em;
}
#sns .inner > p{
	text-align: center;
}
#sns .section_title {
	width: 100%;
}
#sns .section_title::before {
	filter: brightness(0);
}
#sns .section_title .section_title_inner{
	color: #141521;
	padding-left: 0;
}
#sns .section_title .section_title_inner img{
	filter: brightness(0);
}
.sns_wrap{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;/*43*/
}
.sns_wrap_inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	
	gap: 1em;
	margin: 1em 0;
}
.sns_wrap_inner a .sns_icon_image{
	width: 58px;
	height: 58px;
}
.sns_wrap_inner a .link_btn{
	width: 130px;
	height: 30px;
}
.link_btn_FB,
.link_btn_IG{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* PC */
@media screen and (min-width:1040px){
}


/* ==========================================
　　演奏スケジュール(performance)
========================================== */
/* アコーディオンリスト */
.highlight-accordion {
	max-width: 480px;
	margin: 0 auto;
}

.highlight-item {
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.35);
	margin-bottom: 12px;
	overflow: hidden;
}

.highlight-item__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;

	background: none;
	border: none;
	padding: 16px 20px;
	margin: 0;
	cursor: pointer;
	color: #fff;
	text-align: left;

	-webkit-tap-highlight-color: transparent;
}

.highlight-item__title {
	display: flex;
	flex-direction: column;
	align-items: baseline;
	gap: 3px;
	font-family: var(--font-heading);
}

.highlight-item__title-jp {
	font-size: 1.1rem;
    letter-spacing: 0.15em;
}

.highlight-item__title-en {
	font-size: .9em;
	letter-spacing: 0.1em;
	color: #cbb896;
}

/* 右側アイコン（下向き矢印 ∨） */
.highlight-item__chevron {
	position: relative;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	margin-right: 4px;
}

/* アコーディオンが開いた状態（上向き矢印 ∧） */
.highlight-item.is-open .highlight-item__chevron {
	transform: rotate(-135deg);
}

/* 開閉本体 */
.highlight-item__body {
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

.highlight-item__body-inner {
	padding: 0 16px 20px;
}

.highlight-item__text {
	margin: 3em 0 1.5em;
	font-size: .95rem;
	line-height: 1.7;
	color: #e8e2d8;
}
.highlight-item__text.no_slide {
	margin: 0 0 1.5em;
}




#performance{
	padding: 3em 1.5em;
	background-color: rgba(15, 15, 15, 0.3);
}
#performance .section_title_inner{
	padding-left: 0;
}
/*カレンダー*/
#performance.calendar table{
   width: 100%;
}
#performance .calendar table th{
  	padding: 0.5em;
    background-color: rgba(0,0,0,0.70);
    width: 10%;
    border: solid 1px rgba(255, 255, 255, 0.4);
    border-top: none;
	color: #fff;
	font-family: var(--font-heading);
	font-size: .8em;
}
#performance .calendar table td{
	background-color: rgba(35,25,23,0.80);
    width: 50%;
    position: relative;
    padding: 0.5em 1em;
    border: solid 1px rgba(255, 255, 255, 0.4);
    border-top: none;
}
#performance .calendar table td span{
    float: right;
    padding: 0.2em 0.3em;
    background-color: #999;
    border-radius: 0 0 0 5px;
    position: absolute;
    top: 0;
    right: 0;
    }
#performance .calendar table td p{
	color: #000;
	padding: 0;
	margin: 0;
}
#performance .calendar table td p a {
	color: #fff;
	padding: 0.5em;
	line-height: 1.3;
	margin: 0;
	font-size: .95em;
}
#performance .calendar table {
	border: solid 1px rgba(255, 255, 255, 0.4);
}
#performance .calendar table th.sat
{background-color: rgba(38,64,89,0.70);}
#performance .calendar table td.sat
{background-color: rgba(65,97,129,0.70);}
#performance .calendar table th.sun
{background-color: rgba(100,26,24,0.80);}
#performance .calendar table td.sun
{background-color: rgba(139,70,67,0.80);}

#performance .calendar table th.month-title{
	background: none;
    color: #fff;
    font-size: 130%;
    padding: 0.5em;
}
#performance .calendar table th.month-title.month11{
	background: url(common/img/artist/title_bg02.png),#8F85AF;
	background-size: cover;
}
#performance .table-note {
	color: #fff;
	font-size: 15px;
}
/*演奏スケジュール日時*/
#performance .calendar .date_text{
	color: #fff;
	font-family: var(--font-heading);
	text-align: center;
	
	position: relative;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	
	width: 100%;
}
#performance .calendar .date_text p{
	margin: 0;
	font-size: 14px;
	letter-spacing: 0.2em;
}
#performance .calendar .date_text .event-period {
	font-size: 1.2em;
	letter-spacing: 0.05em;
}
#performance .calendar .date_text .event-period span {
	font-size: 14px;
}

/* PC */
@media screen and (min-width: 500px){
	.br_PCnone {
		display: none;
	}
}


/*演奏者プロフィール*/
.profile_wrap{
	margin: 2em 0;
	margin-bottom: 5em;
	position: relative;
}

.profile_wrap p.text {
	margin-top: 2em;
	color: #fff;
	font-size: 15px;
}


.artist-carousel{
/* 親要素の左右padding */
	--side-padding: 28px;

	width: auto;
	margin-left: calc(var(--side-padding) * -1);
	margin-right: calc(var(--side-padding) * -1);
}
.artist-carousel__item{
	box-sizing: border-box;
}

.artist-carousel .artist_img{
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 144px;
	height: 200px;
	margin: 0 auto;
	text-decoration: none;
}

.artist-carousel .artist_img img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 50%;

	border: 1px solid rgba(0,0,0,0.15);
}
.artist-carousel .artist_img h4{
	margin: 0;
	color: #fff;
	font-size: 14px;
	font-family: var(--font-heading);
	font-weight: bold;
	letter-spacing: 0.05em;
	text-align: center;
	line-height: 1.5;
}
.artist-carousel .artist_img h4.h4_kotoiro{
	font-size: 12px;
	letter-spacing: 0;
}

.artist-carousel a{
	transition: opacity 0.2s ease;
}
.artist-carousel a:active{
	opacity: 0.7;
}

/* 中央（アクティブ）以外のスライドを控えめに */
.artist-carousel .slick-slide{
	opacity: 0.5;
	transition: opacity 0.3s ease;
}
.artist-carousel .slick-active.slick-current,
.artist-carousel .slick-current{
	opacity: 1;
}

.artist-carousel .slick-dots{
	bottom: -28px !important;
}
.artist-carousel .slick-dots li button:before{
	color: rgba(102, 102, 102, 0.5) !important;
	opacity: 1 !important;
}
.artist-carousel .slick-dots li.slick-active button:before{
	color: #fff !important;
}

@media (min-width: 1035px){
	.artist-carousel a:hover .artist_img img{
		opacity: 0.85;
	}
}

/* ==========================================
　　演奏者モーダル（modaalの代わり・自作）
========================================== */
.artist-modal{
	position: fixed;
	inset: 0;
	z-index: var(--z-modal, 9999);

	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.artist-modal.is-active{
	display: flex;
}
.artist-modal__overlay{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.75);
}
.artist-modal__panel{
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 340px;
	max-height: 82vh;
	overflow-y: auto;

	background: #fff;
	color: #231917;

	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.artist-modal.is-active .artist-modal__panel{
	opacity: 1;
	transform: translateY(0) scale(1);
}

.artist-modal__close{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;

	width: 32px;
	height: 32px;
	background: rgba(0,0,0,0.5);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}
.artist-modal__close span{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1px;
	background: #fff;
}
.artist-modal__close span:first-child{
	transform: translate(-50%, -50%) rotate(45deg);
}
.artist-modal__close span:last-child{
	transform: translate(-50%, -50%) rotate(-45deg);
}

.artist-modal__content{
	padding: 24px 20px;
}
/* 複製元（.modal_content 内の #modalXX）の見た目をここで整える */
.artist-modal__content h4{
	margin: 0 0 0.3em;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 0.05em;
}
.artist-modal__content .instrument{
	margin: 0;
	font-size: 12px;
	color: #7B6439;
	font-weight: bold;
}
.artist-modal__content img{
	width: 100%;
	display: block;
	margin-bottom: 1em;
}
.artist-modal__content p{
	margin: 0 0 1em;
	font-size: 13px;
	line-height: 1.8;
}
.artist-modal__content p:last-child{
	margin-bottom: 0;
}
.artist-modal__content a{
	color: #7B6439;
	text-decoration: underline;
}
.modal_content{
	display: none;
}

/* ==========================================
　　アクセス（access）
========================================== */
#access{
	padding: 3em 1em;
	padding-bottom: 0;
	background-color: #141521;
}
#access h3{
	color: #fff;
	text-align: center;
	font-family: var(--font-heading);
	
	margin-bottom: 2em;
}
#access dl{
	color: #fff;
	line-height: 2em;
}
#access dl dt{
	font-weight: bold;
	padding: 1em;
}
#access dl dd{
	margin: 0;
	padding: 0 1em;
	padding-bottom: 1.5em; /* 線までの下の余白 */
  	margin-bottom: 1.5em;  /* 線から次のdtまでの余白 */
  	border-bottom: 1px solid rgba(255, 255, 255,0.25); 
}
#access .map{
	margin: 1em 0;
}


/* ==========================================
　　おすすめの食事処(restaurant)
========================================== */
#restaurant{
	margin-top: 5em;
	
}
#restaurant .restaurant_wrap{
	
}
#restaurant .inner{	
	padding: 40px 1em;
	position: relative;
	
	z-index: var(--z-base);
}
#restaurant .inner::before{	
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;

	/* 画面の左端から右端まで全開にする */
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);

	/* 背景の設定 */
	background: url("images/osusumesyokuji-bk.png") center/cover;

	/* コンテンツの後ろに回す */
	z-index: var(--z-bk-deco);
}
#restaurant > h3{
	font-family: var(--font-heading);
	color: #fff;
	
	text-align: center;
	font-size: 1.2rem;
	font-weight: 200;
}
#restaurant p{
	color: #fff;
	text-align: center;
}
#restaurant ul.restaurant-list{
	list-style: none;
	padding: 0;
	display: block;
	letter-spacing: -.3em;
	
	color: #fff;
}
#restaurant ul.restaurant-list li{
	letter-spacing: normal;

	margin-bottom: 50px;
	margin-right: 0;
	display: block;
	width: 100%;
}
#restaurant ul.restaurant-list li:last-child{
	margin-right: 0;
}
#restaurant ul.restaurant-list li .look{
	width: 100%;
}
#restaurant ul.restaurant-list li h4{
	font-size: 1.4em;
	line-height: 1.5em;
	text-align: center;
	
	font-family: var(--font-heading);
	letter-spacing: .2em;
	font-weight: normal;
	margin: 1em 0;
}
#restaurant ul.restaurant-list li h4 span{
	display: block;
	font-size: .6em;
}
#restaurant ul.restaurant-list li .button a{
	display: block;
	padding: .5em;
	border: 1px solid #fff;
	text-decoration: none;
}

.restaurant-list_btn {
    width: 280px;
    height: 60px;
    margin: 0 auto;
    background-color: #000000;
    border-radius: 30px;
    border: 1px solid #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	margin-top: 1.5em;
}
.restaurant-list_btn a > p{
	font-family: var(--font-heading);
	margin: 0;
	text-align: center;
	line-height: 1.2em;
	font-size: 18px;
	
	display: inline-block;
}

.restaurant-list_btn a p >span{
	font-size: 0.7em;
	color: rgba(178,178,178,1.00)
}
.restaurant-list_btn a {
    display: flex;
    flex: 1;
    justify-content: center;
	text-decoration: none;
}
/* ==========================================
   PC Style (1039px以上)
   ========================================== */
@media screen and (min-width: 1039px) {

}

/* ==========================================
   画面幅　調整
   ========================================== */

/* 1030px以下　中央寄せ */
@media screen and (max-width: 1030px) {
		
	.floating_area{
		position: absolute;
		top: 0;
		right: 50%;
		transform: translateX(50%);
	}
	
}

/* 500px以下　floating_areaを画面幅に */
@media screen and (max-width: 500px) {
	
	.floating_area{
		max-width: 100%;
	}
	
	#box2{
		background-image: url("images/foliage_areas_bk.jpg");
		background-size: cover;
	}
}

/* ==========================================
  	アニメーション
   ========================================== */
/* ファーストビュー用：ジワッと表示するアニメーション本体（キーフレーム） */
@keyframes fvFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 適用するクラス */
.fv-fade-text {
    opacity: 0; /* 最初は消しておく */
    
    /* アニメーションの指定 */
    animation-name: fvFadeIn;
    animation-duration: 1.5s;      /* 表示までの時間 */
    animation-timing-function: ease; /* 滑らかに開始・終了 */
    animation-delay: 1s;         /* 開始までの待機時間（少しの余韻） */
    animation-fill-mode: forwards; /* アニメーション終了後も100%の状態を維持 */
}
/* フェードインの初期状態（下から少し浮き上がる準備） */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

/* 画面内に入った時の表示状態 */
.fade-in.is-show {
    opacity: 1;
    transform: translateY(0);
}