@charset "UTF-8";
/* ---------------------------------------------------------------
	特集管理名（ID：複数で使用）CSS
	テスト：ID418（test_aizu_taiken）

	/html/upload/user_data/feature/ec_media/css/ ＝css
	/html/upload/user_data/feature/xxxx/img ＝関連画像

	01.リセット（Mall側）
	02.リセット（コンテンツ側）
	03.汎用クラス（デフォルト表示・サイズ指定）
	04.汎用クラス（色・フォント指定）
	05.コンテンツ（PC）
	06.コンテンツ（TABLET-SP）

	---ブレイクポイント値
	Tab: 1079px（1079-768px）（MALLの商品2カラムブレイクポイント）
	Sp(Mall): 767px（MALLのSpブレイクポイント）

	---注記
	フリーページ（記事）用（/html/upload/user_data/fp/ec_media/css/style.css）を流用。
	運用を揃えるため、class名は記事側と基本統一。

--------------------------------------------------------------- */

/*******************************************************************

    01.リセット（Mall側）

*******************************************************************/

/*特集商品管理 タイトル非表示*/
.giftItemsHeadImg{
	/* display: none; */
}

/* 特集商品管理 紐付けで自動表示されるアンカーリンクを非表示*/
.ec-featureItems.buttons {
	display: none;
}




/*******************************************************************

    02.リセット（コンテンツ側）

*******************************************************************/
.media-article *{
	word-break: break-all;
}

.media-article {
	width: 100%;
	margin: 0 auto;
}

/* h1～h6 */
.media-article h1,.media-article h2,.media-article h3,.media-article h4,.media-article h5,.media-article h6{
	margin: 0;
	line-height: 1.2;
	font-weight: 500;
	font-size: 100%; /*14px*/
	color: var(--_txt-clr-base);
	text-align: left;
	margin-block: 0;
	margin-inline: 0;
	border: none;
}

/*******************************************************************

    03.汎用クラス（デフォルト表示・サイズ指定）

*******************************************************************/

/* 余白（一部のみ）
---------------------------------------------------*/
.media-article .mb-ttl{
	margin-bottom: 25px;
}

.media-article .mb-sech2{
	margin-bottom: 65px;
}

.media-article .mb-sech3{
	margin-bottom: 50px;
}

.media-article .mb-info{
	margin-bottom: 30px;
}


/*******************************************************************

    04.汎用クラス（色・フォント指定）

*******************************************************************/
:root{
	--_clr-main: #008803;
	--_clr-sub--light:#95C82D;
	--_clr-sub--dark: #33A035;
	--_clr-bg: #eeeeee;
	--_txt-clr-base: #333333;
	--_txt-clr-weak: #aaaaaa;
	--_txt-clr-: #111111;
}

/*******************************************************************

	05.コンテンツ（PC）

*******************************************************************/

/* MALL側-特集商品管理の配置調整
---------------------------------------------------*/
.ec-giftArea{
	margin-top: -50px;
	margin-bottom: 50px;
}


/* 特集ページ全体 要素統一
---------------------------------------------------*/
.media-article{
	/*トンマナ フォント*/
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	color: var(--_txt-clr-base);

	/* 配置 */
	width: 100%;
	text-align: left;
}

.media-article a:hover{
	opacity: 0.9;
}

.media-article img{
	display: block;
	max-width: 100%;
	margin: 0 auto 3px;

	object-fit: contain;
	vertical-align: bottom;
	border: none;
}

.media-article figure{
	width: 100%;
	margin: 0 auto;
}

.media-article figure figcaption{
	line-height: 1.5;
}

.media-article figure figcaption:has(cite){
	font-size: 92.3%; /*13px*/
	color: var(--_txt-clr-weak)
}

.media-article cite a{
	color: var(--_txt-clr-weak);
	font-style: normal;

}

.media-article p{
	line-height: 1.5;
}

.media-article section[id^="h2-"] {
  scroll-margin-top: 140px; /* 固定ヘッダーの高さに合わせてするロール位置を調整 */
}

.media-article section[id^="h2-"] h2,
.media-article section[id*="h3"] h3{
	font-weight: 700;
	font-size: 115.4%; /*16px*/
}



/* ≪h1≫記事タイトル(各記事のタイトルを統合した内容)
---------------------------------------------------*/
.media-article .ma-header{
	margin-bottom: 40px;
}

.media-article .ma-header__update{
	margin-bottom: 10px;
	text-align: right;

	color: var(--_txt-clr-weak);
	font-size: 84.6%; /*12px*/
}

.media-article .ma-header__ttl__h1{
	margin-bottom: 15px;
	line-height: 1.4;

	color: var(--_txt-clr-strong);
	font-size: 146.2%; /*txt20*/
	font-weight: 700;
}



/* ≪h2≫目次（ページ内リンク--開閉部分関連）
---------------------------------------------------*/
.ma-nav__wrapper {
	position: relative;
	margin-bottom: 80px; /*h1の余白40px + labelのbottom45px*/
}
.ma-nav--toggle {
	position: relative;
	z-index: 0;
	max-height: 250px; /* 閉じた状態の高さ */
	overflow: hidden;
	transition: max-height 0.4s ease;
}

/*グラデーション（閉じている時）*/
.ma-nav--toggle::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 45px; /*labelのbottomと統一*/
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
	pointer-events: none;
	transition: opacity 0.4s ease;
}

/*トグルボタン（input + label）*/
.toc-toggle__checkbox {
	display: none;
}

.toc-toggle__label {
	position: absolute;
	z-index: 1;
	display: inline-block;
	width: 100%;
	bottom: -45px; /*グラデーションと統一*/
	padding: 10px 20px;
	text-align: center;
	color: var(--_txt-clr-base);
	border: solid 1px var(--_clr-bg);
	background-color: #fff;
	cursor: pointer;
	user-select: none;
}

.toc-toggle__label::before {
	content: "もっと見る";
	font-size: 100%;
}

.toc-toggle__label::after {
	position: absolute;
	content: "＋";
	font-size: 1.5em;
	right: 20px; /* 右端に寄せる */
	top: 50%;
	transform: translateY(-50%);
}

/*開いた状態*/
.toc-toggle__checkbox:checked ~ .ma-nav--toggle {
	max-height: 2000px; /* 全開にするため大きめの値 */
}

.toc-toggle__checkbox:checked ~ .ma-nav--toggle::after {
	opacity: 0; /* グラデーション */
}

.toc-toggle__checkbox:checked ~ .toc-toggle__label::before {
	content: "閉じる";
}

.toc-toggle__checkbox:checked ~ .toc-toggle__label::after {
	content: "－";
}



/* ≪h2≫目次（ページ内リンク）
---------------------------------------------------*/
.media-article .ma-nav{
	margin-bottom: 40px;
	padding: 10px 10px 5px 20px;

	background-color: var(--_clr-bg);
}

.media-article .ma-nav > h2 {
	margin-bottom: 20px;
}

.media-article .ma-nav__header{
	line-height: 2;

	border-bottom: solid #ccc 1px;
}

.media-article .ma-nav__ul--h2{
	font-size: 92.3%; /*13px*/
	font-weight: 500;
}

.media-article .ma-nav__ul--h2 > li.mb-ttl{
	margin-bottom: 0; /*.mb-ttlが効いてしまうため0で上書き（既存記事のHTMLを修正しないため）*/
}

.media-article .ma-nav__ul--h2 > li > a{
	display: inline-block;
	margin-bottom: 5px;
	line-height: 1.5;
}

.media-article .ma-nav__ul--h3 > li{
	position: relative; /*三角用・丸*/
	margin-bottom: 5px;
	margin-left: 1.5em;
	padding-left: 0.5em;
	line-height: 1.4;

	list-style: none;
}

.media-article .ma-nav__ul--h3 > li::before{
    content: "";
    display: inline-block;

	position: absolute;
	top: 0.25em;

    /* 三角形 */
	width: 0;
    height: 0;
	left: -0.4em;
    border-top: 0.4em solid transparent;
    border-bottom: 0.4em solid transparent;
    border-left: 0.55em solid var(--_txt-clr-base);
}



/* ≪h2≫見出し
---------------------------------------------------*/
.media-article .ma-article__sech2__ttl{
	display: flex;
	justify-content: left;
	align-items: stretch;
	gap: 0.5em;
}

.media-article .ma-article__sech2__ttl span{
	flex-shrink: 0; /* 横方向に縮まない */
	width: 20px;
	border-radius: 4px;
	background-color: #008803;
}

.media-article .ma-article__sech2__ttl h2{
	padding: 0.6em 0 0.8em;
	font-size: 150%;
	line-height: 1.4;

	border-bottom: solid 2px var(--_clr-bg);
	color: var(--_txt-clr-strong);
}



/* ≪h3≫見出し
---------------------------------------------------*/
.media-article .ma-article__sech2__sech3 h3{
    position: relative;
	padding-bottom: 0.8em; /*margin-bottom統一のためborderの位置をこちらで調整*/
	width: 100%;
	color: var(--_txt-clr-strong);
}

.media-article .ma-article__sech2__sech3 h3::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px; /* 下線分 */
    width: 100%;
    height: 4px; /* 下線の太さ */
    background: linear-gradient(to right,var(--_clr-main) 100px, #ddd 100px);
}



/* 詳細-画像
---------------------------------------------------*/
.media-article .ma-detail__img.mb-info{
	margin-bottom: 10px; /*画像の.mb-info上書き*/
}



/* 詳細-箇条書きリスト
---------------------------------------------------*/
.media-article .ma-detail__list__ttl{
	margin-bottom: 10px;
	padding-left: 15px;
	line-height: 2.5;

	font-weight: 700;
	font-size: 115.4%;

	border-bottom: 1px solid var(--_clr-main);
}

.media-article .ma-detail__list li{
	margin-left: 15px;
	list-style: disc;
}



/* 詳細-施設概要（表・テキスト共通）
---------------------------------------------------*/
.media-article .ma-detail__summary{
	padding: 20px 20px 5px;
	border-radius: 3px;

	background-color: var(--_clr-bg);
}

.media-article .ma-detail__summary__ttl{
	margin-bottom: 5px;
	text-align: center;

	font-size: 107.7%; /*15px*/
	font-weight: 700;
}

.media-article .ma-detail__summary__dl{
	display: grid;
	grid-template-columns: 8em auto;
	row-gap: 0;
}

.media-article .ma-detail__summary__dl dt,
.media-article .ma-detail__summary__dl dd{
	display: flex;
	align-items: center;
	padding: 1em 0;
	border-bottom: 1px solid #ccc;
}

.media-article .ma-detail__summary__dl dt:last-of-type,
.media-article .ma-detail__summary__dl dd:last-of-type{
	border-bottom: none;
}

.media-article .ma-detail__summary__dl dt{
	padding-right: 0.5em;
}

.media-article .ma-detail__summary__dl dd address{
	margin-bottom: 0;
}



/* 詳細-施設概要（テキストのみ）
---------------------------------------------------*/
.media-article .ma-detail__summary--txt{
	padding-bottom: 25px;
}

.media-article .ma-detail__summary--txt .ma-detail__summary__ttl{
	margin-bottom: 5px;
}



/* 詳細-タイムスケジュール
---------------------------------------------------*/
.media-article .ma-detail__schedule table{
	width: auto;
}

.media-article .ma-detail__schedule__ttl{
	margin-bottom: 5px;
	color: var(--_txt-clr-base);
	font-weight: 700;
	font-size: 107.7%; /*15px*/
}

.media-article .ma-detail__schedule thead{
	display: none; /* 項目名不要 */
	font-weight: 700;
}

.media-article .ma-detail__schedule tr{
	border-bottom: 1px solid #ccc;
}

.media-article .ma-detail__schedule tr:last-of-type{
	border-bottom: none;
}

.media-article .ma-detail__schedule tr td{
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}

.media-article .ma-detail__schedule tr td:first-of-type{
	padding: 0.8em 0.5em 0.8em 0;
	width: auto;
	max-width: 200px; /*PC*/
	text-align: center;

	color: #008803;
	font-weight: 700;
}

.media-article .ma-detail__schedule tr td:last-of-type{
	width: auto;
	min-width: 500px; /*PC*/
}


/* 詳細-Q＆A
---------------------------------------------------*/
.media-article .ma-detail__qa__span{
	position: relative;
	display: inline-block;
	padding: 0;
	width: 2em;
	height: 2em;
	aspect-ratio: 1 / 1;
	line-height: 1.8;
	text-align: center;
	background-color: #fff;
	color: var(--_clr-main);
	font-weight: 700;
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	margin-top: -0.2em;
}

.media-article .ma-detail__qa details{
	margin-bottom: 25px;
}

.media-article .ma-detail__qa details summary{
	position: relative;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 0.8em 55px 0.7em 0.8em ;

	background-color: var(--_clr-main);
	color: #fff;
	font-weight: 700;
	font-size: 107.7%; /*15px*/

	border-radius: 5px;
	cursor: pointer;
}

.media-article .ma-detail__qa details summary::before{
	content: "＋";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 120%;
	font-weight: 900;
	color: #ddf0b9;
}

/* 開いているときの三角形を変更 */
.media-article .ma-detail__qa details[open] summary::before {
	content: "－";
}

.media-article .ma-detail__qa details[open] summary::after{
	content: "";
	position: absolute;
	bottom: -8px;
	left: 18px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid var(--_clr-main);
}

.media-article .ma-detail__qa details p{
	padding-top: 15px;
	font-size: 92.3%;
}



/* 詳細-ボタンリンク（外部・内部共通）
---------------------------------------------------*/
.media-article .ma-linkbtn a{
	display: block;
	margin: 0 auto;
	padding: 1em 1.5em;

	width: 100%;
	max-width: 500px;

	background-color: var(--_clr-main);
	color: #fff;
	border-radius: 9999px;
	text-align: center;
	text-decoration: none;

	white-space: normal;
	line-height: 1.5;
	transition: background-color 0.2s ease;

	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

.media-article .ma-linkbtn a:hover,
.media-article .ma-linkbtn a:focus {
	background-color: var(--_clr-sub--dark);
	filter: none;
	outline: none;
}



/* 詳細-ボタンリンク（外部のみ）
---------------------------------------------------*/
.media-article .ma-linkbtn--external a{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	text-align: center;
}

.media-article .ma-linkbtn--external .ma-linkbtn--external__txt{
	flex: 1;
}

.media-article .ma-linkbtn--external .material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24;

	width: 2em;
	padding: 0 0.3em 0 0.5em;

	flex-shrink: 0;

	margin-left: auto; /* 右寄せ */
	color: #ddf0b9;
	text-align: center;
}



/* 詳細-関連記事リンク（内部）
---------------------------------------------------*/
.media-article .ma-aside a{
	display: flex;
	margin-bottom: 0.7em;
	line-height: 1.4;
	text-decoration: none;
}

.media-article .ma-aside .material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24;

	font-size: 170%;
}

.media-article .ma-aside__txt{
	padding-left: 0.1em;
	padding-top: 0.1em;
}

.media-article a .ma-aside__txt:hover {
	text-decoration: underline;
}



/*******************************************************************

    06.コンテンツ（PCMin-Tab）
	---ブレイクポイント値
	Tab: 1079px（1079-768px）（MALLの商品2カラムブレイクポイント）

*******************************************************************/

/* --- for PCMin-Tab --- */
@media only screen and (max-width :1079px){

	/* フリーページ本文全体
	---------------------------------------------------*/
	.media-article section[id^="h2-"] {
		scroll-margin-top: 310px; /* 固定ヘッダーの高さに合わせてするロール位置を調整 */
	}

	/* 詳細-施設概要
	---------------------------------------------------*/
	.media-article .ma-detail__summary__dl{
		grid-template-columns: 6em auto;
		font-size: 92.3%; /*13px*/
	}

	/* 詳細-タイムスケジュール
	---------------------------------------------------*/
	.media-article .ma-detail__schedule tr td:first-of-type{
		width: 20%;
		max-width: auto;
	}

	.media-article .ma-detail__schedule tr td:last-of-type{
		min-width: auto;
	}

}


/* --- for Tab-Sp --- */
@media only screen and (max-width :768px){

	/* MALL側-特集商品管理の配置・色調整
	---------------------------------------------------*/
    .ec-featureRole__head{
        margin-bottom: 10px;
    }

	/* MALL側-特集商品管理の配置調整
	---------------------------------------------------*/
	.ec-giftArea{
		margin-top: -15px;
		margin-bottom: 40px;
	}

	/* 余白（一部のみ）
	---------------------------------------------------*/
	.media-article .mb-sech2{
		margin-bottom: 50px;
	}
}