@charset "UTF-8";
/* ---------------------------------------------------------------
	フリーページ名（ID：複数で使用）CSS
	テスト：ID496（media_media-article_test）

	/html/upload/user_data/fp/ec_media/css/ ＝css
	/html/upload/user_data/articles_img/xxxx/img ＝その他

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

	---ブレイクポイント値
	Tab: 1079px（1079-768px）（MALLの商品2カラムブレイクポイント）
--------------------------------------------------------------- */

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

    01.リセット（Mall側）

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

/* 特になし */


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

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

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

.media-article {
	width: 100%;
	max-width: 800px;
	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: 60px;
}

.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）

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

/* フリーページ全体 要素統一
---------------------------------------------------*/
.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≫目次（ページ内リンク）
---------------------------------------------------*/
.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{
	margin-bottom: 20px;
}


.media-article .ma-nav__ul--h2 > li > a{
	display: inline-block;
	margin-bottom: 8px;
	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{
	width: 20px;
	border-radius: 4px;
	background-color: #008803;
}

.media-article .ma-article__sech2__ttl h2{
	padding: 0.6em 0 0.8em;
	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%;
	max-width: 800px;
    height: 4px; /* 下線の太さ */
    background: linear-gradient(to right,var(--_clr-main) 100px, #ddd 100px);
}



/* 詳細-箇条書きリスト
---------------------------------------------------*/
.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: 100%;
}

.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-bottom: 0.3em;
}

.media-article .ma-detail__schedule tr td:first-of-type{
	padding: 0.8em 0.5em 0.8em 0;
	width: 15%;
	text-align: center;

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


/* 詳細-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: 20px;
}

.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-SP）
	---ブレイクポイント値
	Tab: 1079px（1079-768px）（MALLの商品2カラムブレイクポイント）

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

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

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

	/* フリーページ本文全体
	---------------------------------------------------*/
	.media-article{
		padding: 0 20px;
	}

	/* 詳細-施設概要
	---------------------------------------------------*/
	.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%;
	}

}