@charset "utf-8";



/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=M+PLUS+U:wght@400;500;600;700;900&display=swap');


/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--bg-color: #efefed;			/*主にテンプレートの背景色（添付画像に合わせた色）*/
	--bg-inverse-color: #333;	/*上のbg-colorの「対」として使う色*/
	
	--primary-color: #00a0f9;	/*メインまたはアクセントカラー*/
	--primary-inverse-color: #fff;	/*上のprimary-colorの「対」として使う色*/
	
	--heading-accent-color: #0a6e2f;		/*見出し・中見出し用のグリーン（参考画像から採色）*/
	--heading-underline-color: #cfe6a0;	/*中見出しの下線（マーカー風の薄いグリーン）*/
	
	--content-space: 8.33vw;  /*余白の一括管理用。画面幅100% = 100vwです。（grid-boxと幅を合わせる為に100÷12=8.33にしました）*/

	--headerH: 70px;  /*headerの高さ他、関連パーツ用*/
	--headerM: 3rem;  /*headerのマージン他、関連パーツ用*/

	/*以下は、「施設のご案内」のマスク用*/
	--mask1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
	
	--mask2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
	
	--mask3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
	
	--mask4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
	
	--mask5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
	
	--mask6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
}


	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	:root {
		--content-space: 10px;	/*余白の一括管理用。小さな端末で余白を狭くする。*/
	}

	}/*追加指定ここまで*/


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	font-size: 16px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 16px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "BIZ UDPGothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-weight: 400;	/*本文はMedium(500)*/
	-webkit-text-size-adjust: none;
	background: var(--bg-color);	/*背景色*/
	color: var(--bg-inverse-color);		/*文字色*/
	line-height: 1.75;		/*行間*/
	overflow-x: hidden;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section > ol,section > ul {margin-left: 2rem;}


/*sectionの設定
---------------------------------------------------------------------------*/
section {
	padding: 0 var(--content-space);
	margin: 5vw 0;	/*5vwを変更する際は、他にも影響するので注意*/
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;
}


/*conatiner（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.4s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
	display: grid;
	grid-template-rows: auto 1fr;	/*mainの内容が少ない場合にfooterが浮かないように。*/
	grid-template-columns: minmax(0, 1fr);	/*横スクロールしない要素（絞り込みチップ等のnowrap行）が中にあると、
		明示的な列幅指定がない場合にグリッドの列自体が画面幅より広がってしまい、
		overflow-x:hiddenで右側が切れて見えるバグが起きるための対策。*/
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
}

/*トップ以外のcontainer*/
body:not(.home) #container {
	grid-template-rows: 1fr;	/*mainの内容が少ない場合にfooterが浮かないように。*/
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
	position: fixed;	/*画面の一定箇所で固定表示*/
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;	/*一体型のバーにするため、画面幅いっぱいに*/
	margin: 0;	/*フローティング表示をやめ、画面上端にぴったり付ける*/
	overflow: hidden;
	background: #fff;	/*背景色*/
	border-radius: 0;	/*角丸をやめて、メニューバーと一体化させる*/
	display: flex;
	align-items: center;
	gap: 1rem;	/*headerの直接の子要素同士に空けるスペース。間隔を詰めるため縮小。*/
	line-height: 1.5;	/*行間を少し狭く*/
	height: var(--headerH);	/*ヘッダーの高さ。css冒頭のheaderHを読み込みます。*/
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);	/*下方向のみの控えめな影*/
	transition: background 0.5s ease, box-shadow 0.5s ease;	/*中身(#header-bar)がフェードするのに合わせて、外側の白帯も一緒に透明にする*/
	padding: 0 calc(var(--headerH) + 2rem) 0 2rem;	/*header内の余白*/
}

/* 隠す際のスタイル
   ※ #header自体ではなく内側の#header-bar(.site-header-bar)にtransformをかけている。
     #headerにtransformをかけると、内側の<nav>(position:fixed)がCSS仕様により
     #headerを基準に配置されてしまい、下スクロール→上スクロールで戻した際に
     ナビゲーションバーの位置が崩れる不具合が起きるため。 */
.site-header-bar.is-hide {
	opacity: 0;
	transform: translateY(-100%); /*真上に隠す*/
	pointer-events: none; /*消えている間はクリックを無効化*/
}

/* 中身が隠れている間は、外側の白い帯・影も一緒に消して元の見た目を再現 */
header:has(.site-header-bar.is-hide) {
	background: transparent;
	box-shadow: none;
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	header {
		position: fixed;	/*常に画面上部に固定表示（オーバーレイではなく実体のあるバーにする）*/
		background: #fff;	/*透過をやめ、不透明な白バーに（下の写真とは重ねずに区切る）*/
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		margin: 0;
		height: auto;	/*ロゴ行＋ユーティリティバー行の2段分、高さを可変に*/
		overflow: visible;	/*2段目（.mobile-header-utility）が隠れないように*/
		flex-wrap: wrap;
		gap: 0.4rem;
		padding: 0.6rem 1rem 0;	/*旧・浮遊ハンバーガー用の右余白は不要になったため縮小*/
		z-index: 110;	/*#menubar（開閉メニュー。z-index:100）より前面に。メニュー表示中も「メニュー」ボタンが隠れず、再タップで閉じられるように*/
	}

	}/*追加指定ここまで*/

	/*画面幅801px以上の追加指定：ロゴ横のユーティリティ帯を含められるよう高さを可変に*/
	@media screen and (min-width:801px) {

	header {
		height: auto;
		flex-wrap: wrap;
		padding-top: 0.4rem;
		padding-bottom: 0;
		/*右側パディング(calc(headerH + 2rem))は元のまま維持。
		  幅を詰めるのではなく、下の.header-utilityの中央寄せで
		  余白バランスを取る。*/
	}

	}/*追加指定ここまで*/


/*ロゴ画像*/
#logo {margin: 0;flex-shrink: 0;}
#logo img {
	display: block;
	height: 40px;	/*ロゴの高さ。headerの高さを固定しているので、ロゴも高さで指定して下さい。*/
}

	/*画面幅800px以下の追加指定：ヘッダー自体が不透明になったため、ロゴ専用の白背景は不要*/
	@media screen and (max-width:800px) {

	#logo img {
		height: 34px;	/*2段バーに収まるよう少しコンパクトに*/
	}

	}/*追加指定ここまで*/


/*ヘッダー内・ロゴ横のユーティリティ帯（緊急情報／多言語／検索／新着情報）
---------------------------------------------------------------------------*/
.header-utility {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.85rem;
}

	/*画面幅801px以上の追加指定：ロゴを左端に残したまま、
	  ユーティリティ帯(.header-utility)だけを残り幅の中央に配置する。
	  flexアイテムに margin:auto を使うと、コンテナ内の余った余白を
	  左右均等に振り分けてくれるため、幅はそのままに中央寄せできる。*/
	@media screen and (min-width:801px) {

	.header-utility {
		margin: 0 auto;
	}

	}/*追加指定ここまで*/

	/*画面幅800px以下の追加指定：スマホでは非表示（ロゴとハンバーガーのみ表示）*/
	@media screen and (max-width:800px) {

	.header-utility {
		display: none;
	}

	}/*追加指定ここまで*/

/*緊急情報ボタン*/
.hu-emergency {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.4em 0.8em;
	background: none;
	border: 1.5px solid #e60012;
	border-radius: 999px;
	color: #e60012;
	text-decoration: none;
	font-weight: 500;
	font-size: 1em;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
}
.hu-emergency:hover {background: #fdecec;}
.hu-emergency i {font-size: 0.95em;}

/*Foreign Languageボタン*/
.hu-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.5em 0.2em;
	background: none;
	border: none;
	color: var(--bg-inverse-color);
	font-size: 1em;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
}
.hu-lang:hover {color: var(--primary-color);}

/*検索フォーム*/
.hu-search {
	display: flex;
	align-items: center;
	gap: 0.4em;
	flex-wrap: wrap;
}
.hu-search-radios {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	font-size: 0.85em;
	white-space: nowrap;
}
.hu-search-radios label {
	display: flex;
	align-items: center;
	gap: 0.3em;
	cursor: pointer;
}
.hu-search-box {
	display: flex;
	align-items: center;
	gap: 0.35em;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 0.25em 0.5em;
	background: #fff;
}
.hu-search-box i {color: #888;}
.hu-search-box input[type="text"] {
	border: none;
	outline: none;
	font-size: 0.9em;
	width: 9em;
	background: none;
	color: #333;
}
.hu-search-box button[type="submit"] {
	background: var(--nav-bg, #1a3d7c);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0.35em 0.7em;
	font-size: 0.85em;
	cursor: pointer;
	white-space: nowrap;
}
.hu-search-box button[type="submit"]:hover {background: var(--nav-bg-hover, #142f61);}

	/*画面幅1150px以下の追加指定：検索ボックスをやや縮小*/
	@media screen and (max-width:1150px) {

	.hu-search-box input[type="text"] {width: 6em;}

	}/*追加指定ここまで*/

/*新着情報ボタン*/
.hu-news {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.4em 0.7em;
	background: #8bc34a;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9em;
	white-space: nowrap;
}
.hu-news:hover {background: #7cb342;}

/*区切り線（検索ボックスとアクセシビリティ・ツールバーの間）*/
.hu-divider {
	width: 1px;
	align-self: stretch;
	min-height: 1.6em;
	background: #ccc;
}

	/*画面幅800px以下の追加指定：スマホでは非表示（.header-utility自体が非表示のため道連れで良いが念のため）*/
	@media screen and (max-width:800px) {

	.hu-divider {display: none;}

	}/*追加指定ここまで*/

/*インライン・アクセシビリティ・ツールバー（Foreign language／文字サイズ／背景色。常時表示）
---------------------------------------------------------------------------*/
.hu-a11y-inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6em;
	font-size: 0.85rem;
}

/*Foreign language（globeアイコン＋underline付きの<select>）*/
.hu-lang#hu-lang-inline {
	padding: 0;
}
.hu-translate-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	background: none;
	color: inherit;
	font-size: 1em;
	font-family: inherit;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	max-width: 9.5em;
}
.hu-translate-select:hover {color: var(--primary-color);}

/*文字サイズ*/
.hu-fontsize {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var(--bg-inverse-color);
	white-space: nowrap;
}
.hu-fontsize-label {white-space: nowrap;}

.hu-a11y-btn {
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.3em 0.55em;
	font-size: 0.95em;
	font-family: inherit;
	color: #333;
	cursor: pointer;
	white-space: nowrap;
}
.hu-a11y-btn:hover {background: #e9e9e9;}
.hu-a11y-btn.is-active {
	background: var(--nav-bg, #1a3d7c);
	color: #fff;
	border-color: var(--nav-bg, #1a3d7c);
}

/*背景色スウォッチ（白／黒／青）*/
.hu-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.hu-bgcolor {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}
.hu-color-btn {
	min-width: 2.1em;
	border-radius: 4px;
	padding: 0.3em 0.5em;
	font-size: 0.95em;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
}
.hu-color-btn--white {
	background: #fff;
	border: 1px solid #999;
	color: #333;
}
.hu-color-btn--white:hover, .hu-color-btn--white.is-active {border-color: #333;}
.hu-color-btn--black {
	background: #000;
	border: 1px solid #000;
	color: #fff;
}
.hu-color-btn--black:hover, .hu-color-btn--black.is-active {background: #333;}
.hu-color-btn--blue {
	background: #1a3d7c;
	border: 1px solid #1a3d7c;
	color: #fff;
}
.hu-color-btn--blue:hover, .hu-color-btn--blue.is-active {background: #142f61;}


/*header内のメニュー（※開閉メニューとはブロックが異なります）
---------------------------------------------------------------------------*/
/*メニューバー用の変数*/
:root {
	--navH: 54px;			/*メニューバー（ネイビーの帯）の高さ*/
	--navGap: 0px;		/*headerとメニューバーの間隔（一体型にするため0）*/
	--nav-bg: #1a3d7c;		/*メニューバーの背景色*/
	--nav-bg-hover: #142f61;	/*メニューのマウスオン時/現在地の背景色*/
}

/*メニューブロック全体（PC：headerから独立させ、画面幅いっぱいの帯として固定表示）*/
header nav {
	position: fixed;
	left: 0;
	width: 100%;
	top: calc(var(--header-bottom, calc(var(--headerM) + var(--headerH))) + var(--navGap));
	height: var(--navH);
	background: var(--nav-bg);
	box-shadow: 0 3px 10px rgba(0,0,0,0.12);
	z-index: 1;
}

header nav ul {
	display: flex;
	align-items: stretch;
	height: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--content-space);
	font-size: 1rem;	/*文字サイズ*/
	gap: 0;
}

	/*画面幅1300px以下の追加指定：均等割りをやめて左詰め＋横スクロール可に*/
	@media screen and (min-width:1301px) {

	header nav ul {
		justify-content: space-between;	/*項目を均等配置*/
	}

	}/*追加指定ここまで*/

	/*画面幅1300px以下の追加指定*/
	@media screen and (max-width:1300px) and (min-width:801px) {

	header nav ul {
		justify-content: flex-start;
		gap: 0.2rem;	/*メニュー同士の間に空けるスペースを狭く*/
		overflow-x: auto;	/*入りきらない場合は横スクロール*/
	}

	}/*追加指定ここまで*/

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	header nav {
		display: none;	/*非表示に（スマホは#menubarのハンバーガーメニューを使用）*/
	}

	}/*追加指定ここまで*/

/*トップレベルの項目（liそのものをflexにして高さいっぱいのクリック領域にする）*/
header nav > ul > li {
	position: relative;
	display: flex;
	height: 100%;
}

/*メニュー１個あたりの設定*/
header nav ul a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 1.3rem;
	text-decoration: none;
	text-align: center;
	color: #fff;	/*文字色（ネイビー地に白文字）*/
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: background 0.2s, border-color 0.2s;
}

/*マウスオン時／現在地のページ*/
header nav ul a:hover,
header nav > ul > li.current > a,
header nav > ul > li:focus-within > a {
	background: var(--nav-bg-hover);	/*マウスオン時の背景色*/
	border-bottom-color: #fff;
	color: #fff;
}

/*現在地/ホバー中のタブから、下のドロップダウンパネルへ向かう三角のポインター
  （子メニューを持つタブにのみ表示。headerの overflow:hidden で切れないよう、
  タブの下端(bottom:0)を基準に、三角の実体はその上側に描画されるようにしている）*/
header nav > ul > li:has(> ul):hover > a::after,
header nav > ul > li:has(> ul):focus-within > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 9px solid #eaf3fb;	/*下のパネルの背景色と合わせる*/
	z-index: 3;
}

/*英語の装飾文字*/
header nav ul span {
	display: block;
	font-size: 0.65rem;	/*文字サイズ65%*/
	opacity: 0.75;	/*色を75%だけ出す*/
	margin-left: 0.4em;
}

/*ドロップダウン（子メニューがある項目のみ表示されるパネル）
---------------------------------------------------------------------------*/
header nav > ul > li > ul {
	display: none;
	position: fixed;
	left: 0;
	width: 100%;
	top: calc(var(--header-bottom, calc(var(--headerM) + var(--headerH))) + var(--navGap) + var(--navH));
	background: #eaf3fb;	/*パネル全体は薄い水色の帯に*/
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	padding: 1.5rem var(--content-space);
	z-index: 2;
}

/*ホバー、またはキーボード操作でのフォーカス時にドロップダウンを表示*/
header nav > ul > li:hover > ul,
header nav > ul > li:focus-within > ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
	max-width: 1400px;
	margin: 0 auto;
}

/*ドロップダウン内の項目（白いカード＋左に色帯のアクセント）*/
header nav > ul > li > ul li a {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 3.4em;
	padding: 0.8em 1.2em;
	background: #fff;
	border-left: 4px solid var(--primary-color);
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	color: var(--bg-inverse-color);
	border-bottom: none;
	white-space: normal;
	text-align: left;
	font-size: 0.95rem;
	text-decoration: underline;
}

/*ドロップダウン内、マウスオン時*/
header nav > ul > li > ul li a:hover {
	color: var(--primary-color);
	background: #fff;
	box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}


/*言語切り替えブロック
---------------------------------------------------------------------------*/
#lang {
	margin: 0;padding: 0;list-style: none;
	position: absolute;
	right: var(--headerM);
	top: 0px;
	line-height: var(--headerM);
	z-index: 1;
	display: flex;
	gap: 1rem;	/*テキスト同士の間に空けるスペース。１文字分。*/
	font-size: 0.9rem;	/*文字サイズ85%*/
	color: #fff;	/*文字色*/
}


/*開閉メニュー（スマホ用フルスクリーン・ナビゲーションパネル）
---------------------------------------------------------------------------*/
:root {
	--menubar-bg: #eaf2fb;		/*パネル全体の淡い水色背景*/
	--menubar-line: #bcd6ee;	/*区切り線の色*/
}

/*パネル本体：ヘッダーの下からフルスクリーンで表示。淡い水色地にフラットなリストを並べるスタイル*/
.small-screen #menubar {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--menubar-bg);
	padding-top: var(--header-bottom, calc(var(--headerM) + var(--headerH)));	/*ヘッダーの実測高さぶんだけ空ける*/
	animation: menuPanelIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;	/*下から上へスッと現れる*/
}

/*表示アニメーション（パネル全体が下から上へスライドイン）*/
@keyframes menuPanelIn {
	0% {opacity: 0; transform: translateY(28px);}
	100% {opacity: 1; transform: translateY(0);}
}

/*ロゴ横のユーティリティ帯（閲覧支援／サイトマップ）：白い角丸ボタンを2つ並べる*/
.menubar-quicklinks {
	display: flex;
	gap: 0.7em;
	padding: 1rem var(--content-space) 0.8rem;
}
.menubar-quick-btn {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.6em;
	background: #fff;
	border: 1px solid var(--primary-color);
	border-radius: 10px;
	padding: 0.85em 1em;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--bg-inverse-color);
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s;
}
.menubar-quick-btn:active { background: #f2f7fd; }
.menubar-quick-btn i {
	color: var(--primary-color);
	font-size: 1.05rem;
	flex-shrink: 0;
}

/*メニュー本体の横幅を読みやすい幅に制限し、中央寄せ*/
.small-screen #menubar > nav {
	max-width: 640px;
	margin: 0 auto;
	padding: 0.2rem 0 3rem;
}

/*トップレベルの項目＝フラットな行（カード化せず、線区切りのシンプルなリスト）*/
.small-screen #menubar > nav > ul > li {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--menubar-line);
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	overflow: visible;
	opacity: 0;
	transform: translateY(6px);
	animation: menuItemIn 0.35s ease both;
}
/*上から順に少しずつ遅れて表示（段階的に浮かび上がる演出）*/
.small-screen #menubar > nav > ul > li:nth-child(1) {animation-delay: .03s;}
.small-screen #menubar > nav > ul > li:nth-child(2) {animation-delay: .06s;}
.small-screen #menubar > nav > ul > li:nth-child(3) {animation-delay: .09s;}
.small-screen #menubar > nav > ul > li:nth-child(4) {animation-delay: .12s;}
.small-screen #menubar > nav > ul > li:nth-child(5) {animation-delay: .15s;}
.small-screen #menubar > nav > ul > li:nth-child(6) {animation-delay: .18s;}
.small-screen #menubar > nav > ul > li:nth-child(7) {animation-delay: .21s;}
.small-screen #menubar > nav > ul > li:nth-child(8) {animation-delay: .24s;}
.small-screen #menubar > nav > ul > li:nth-child(n+9) {animation-delay: .26s;}

@keyframes menuItemIn {
	0% {opacity: 0; transform: translateY(6px);}
	100% {opacity: 1; transform: translateY(0);}
}

/*見出し項目（管理画面で見出し行として登録した場合の区切りラベル）*/
.small-screen #menubar > nav > ul > li.nav-heading {
	background: none;
	border: none;
	border-bottom: none;
	box-shadow: none;
	margin: 1.6rem 0 0.5rem;
	padding: 0 var(--content-space);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #6b8bab;
}
.small-screen #menubar > nav > ul > li.nav-heading:first-child {margin-top: 0;}

/*トップレベルのリンク（左：ラベル＋英語サブラベルのみのシンプルな行）*/
.small-screen #menubar > nav > ul > li > a {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 1.05em var(--content-space);
	text-decoration: none;
	color: var(--bg-inverse-color);
	font-size: 1.05rem;
	font-weight: 600;
	transition: background 0.15s;
}

/*タップした瞬間の反応*/
.small-screen #menubar > nav > ul > li > a:active {
	background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

/*子メニューを持つ項目のみ、右端に開閉の矢印を表示（それ以外の項目には矢印を出さない）*/
.small-screen #menubar > nav > ul > li.ddmenu_parent > a.ddmenu::after {
	content: "\f107";	/*Font Awesome: chevron-down*/
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.85rem;
	color: var(--primary-color);
	flex-shrink: 0;
	margin-left: auto;
	padding-left: 0.8em;
	align-self: center;
	transition: transform 0.25s;
}
/*開いている間は矢印を反転*/
.small-screen #menubar > nav > ul > li.ddmenu_parent:has(> ul[style*="block"]) > a.ddmenu::after {
	transform: rotate(180deg);
}
.small-screen #menubar > nav > ul > li.ddmenu_parent:has(> ul[style*="block"]) > a.ddmenu {
	color: var(--primary-color);
}

/*現在地のページ：左端に太いアクセントバーで強調*/
.small-screen #menubar > nav > ul > li.current > a {
	background: color-mix(in srgb, var(--primary-color) 10%, transparent);
	border-left: 4px solid var(--primary-color);
	padding-left: calc(var(--content-space) - 4px);
	color: var(--primary-color);
	font-weight: 700;
}

/*子メニュー本体：親の行の下に続く、一段濃いめの水色グループとして表示（初期状態は非表示。JS側でopen/closeをトグル）*/
.small-screen #menubar > nav > ul > li.ddmenu_parent > ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0.2em 0 0.6em;
	background: color-mix(in srgb, var(--primary-color) 5%, var(--menubar-bg));
}
.small-screen #menubar > nav > ul > li.ddmenu_parent > ul > li > a {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 0.7em var(--content-space) 0.7em calc(var(--content-space) + 1rem);
	text-decoration: none;
	font-size: 0.94rem;
	color: #4a5c70;
}
.small-screen #menubar > nav > ul > li.ddmenu_parent > ul > li > a::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--primary-color);
	margin-right: 0.7em;
	flex-shrink: 0;
	align-self: center;
}
.small-screen #menubar > nav > ul > li.ddmenu_parent > ul > li.current > a {
	color: var(--primary-color);
	font-weight: 700;
}

/*英語の装飾文字（使用する場合）：和文ラベルのすぐ右に小さく添える*/
.small-screen #menubar span {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 400;
	color: #9aa0a6;
	margin-left: 0.6em;
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
	display: none; /* デフォルトは非表示 */
	animation: opa1 0s 0.2s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: var(--headerM);	/*右からの配置場所。css冒頭のheaderMを読み込みます。*/
	top: var(--headerM);	/*上からの配置場所。css冒頭のheaderMを読み込みます。*/
	width: var(--headerH);	/*幅。css冒頭のheaderHを読み込みます。*/
	height: var(--headerH);	/*高さ。css冒頭のheaderHを読み込みます。*/
	background: var(--primary-color);	/*ボタン色。css冒頭のprimary-colorを読み込みます。*/
	transform-origin: right top;
	transform: scale(1);	/*大きさを調整したい場合はここの「1」を変更します。1.2や0.7など。*/
	border-radius: 10px;	/*角を丸くする指定。headerのborder-radiusと揃えます。*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	#menubar_hdr {
		right: 2rem;	/*右からの配置場所の上書き*/
	}

	}/*追加指定ここまで*/


/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
	background: #ff0000;
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
	display: block;
	position: absolute;
	left: 18px;
	width: 35px;
	height: 2px;		/*線の高さ*/
	background: #fff;	/*線の色*/
	transition: 0.3s;
}

#menubar_hdr span:nth-of-type(1) {
	top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
	top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
	top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
	opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
	transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
	display: flex;
}


/*見出し
---------------------------------------------------------------------------*/
/*本文以外のタイトル（見出し）は基本的にMedium(500)に統一*/
h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}

/*h2と、grid-box内のh4*/
#container h2, .grid-box h4 {
	display: flex;
	flex-direction: column-reverse;	/*spanと表示順を入れ替える*/
	font-size: 1.8rem;	/*文字サイズ1.8倍*/
	font-weight: 500;	/*タイトルはMedium(500)*/
}
#container h2 .small, #container h4 span {
	font-size: 0.8rem;	/*文字サイズ0.8倍*/
	opacity: 0.5;		/*透明度50%*/
	letter-spacing: 0.2em;	/*文字間隔を少しだけ広く*/
}


/*大見出し（heading-box-l）／中見出し（heading-box-m）
  「01_★大見出しセット」「02_★中見出しセット」「00_★大見出し＋掲載日・ID」用
---------------------------------------------------------------------------*/
/*大見出し：文字色＋下線のみのシンプルな見出し（添付画像デザインに合わせて変更）*/
#container h2.heading-box-l {
	display: block;
	flex-direction: initial;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 2px solid var(--heading-accent-color);
	border-radius: 0;
	padding: 0 0 0.8em;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.35;	/*行間を詰める（2行になった時に間延びしないように）*/
	margin: 0 0 1.2em;
	color: var(--heading-accent-color);
}
#container h2.heading-box-l .small {
	display: block;
	font-size: 0.7rem;
	opacity: 0.6;
	letter-spacing: 0.1em;
	line-height: 1.6;
	margin-top: 0.4em;
}

/*固定ページ先頭の「大見出し＋掲載日・ID」ブロック：上下の余白をなくす*/
#container section.page-heading-block {
	margin-top: 0;
	margin-bottom: 0;
}

/*お知らせ詳細ページ（oshirase_cms_item）先頭の見出しブロック：
  section全般に付く上の余白（margin: 5vw 0;）を打ち消し、
  固定ページ（page-heading-block）と見出し上のスペースを揃える*/
#container section.oshirase-cms-item {
	margin-top: 0;
}

/*サイトマップページ（/sitemap）：menu.jsonから自動生成される全ページ一覧
---------------------------------------------------------------------------*/
.tpcms-sitemap {
	padding: 0.5em var(--content-space) 4rem;
}
.tpcms-sitemap-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.4em 2.5em;
}
	/*画面幅640px以下の追加指定：1カラムに*/
	@media screen and (max-width:640px) {
	.tpcms-sitemap-list {
		grid-template-columns: 1fr;
	}
	}/*追加指定ここまで*/

.tpcms-sitemap-heading {
	grid-column: 1 / -1;
	margin: 1.4em 0 0.2em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid var(--primary-color);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--primary-color);
}
.tpcms-sitemap-heading:first-child { margin-top: 0; }

.tpcms-sitemap-item {
	border-bottom: 1px solid #e5e7eb;
}
.tpcms-sitemap-item > a {
	display: block;
	padding: 0.7em 0.2em;
	color: var(--bg-inverse-color);
	text-decoration: none;
	font-weight: 600;
}
.tpcms-sitemap-item > a:hover {
	color: var(--primary-color);
	text-decoration: underline;
}
.tpcms-sitemap-sublist {
	list-style: none;
	margin: 0 0 0.6em;
	padding: 0 0 0 1.1em;
}
.tpcms-sitemap-sublist li {
	border-top: 1px dashed #e5e7eb;
}
.tpcms-sitemap-sublist a {
	display: block;
	padding: 0.5em 0.2em;
	color: #555;
	text-decoration: none;
	font-size: 0.92rem;
}
.tpcms-sitemap-sublist a:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

/*掲載日・ID（page-meta-row）：大見出しの下に添える小さなメタ情報*/
#container p.page-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5em;
	font-size: 0.8rem;
	opacity: 0.65;
	margin: -0.6em 0 1.6em;
}

/*中見出し：三角アイコン＋マーカー風の下線を付けたシンプルな見出し（添付画像デザインに合わせて変更）*/
#container h3.heading-box-m {
	display: flex;
	align-items: center;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 5px solid var(--heading-underline-color);
	border-radius: 0;
	padding: 0 0 0.5em;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;	/*行間を詰める（2行になった時に間延びしないように）*/
	margin: 1.6em 0 1em;
	color: var(--bg-inverse-color);
}
/*見出し文字の頭に付ける三角アイコン*/
#container h3.heading-box-m::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-top: 0.5em solid transparent;
	border-bottom: 0.5em solid transparent;
	border-left: 0.8em solid var(--heading-accent-color);
	margin-right: 0.6em;
}

	/*画面幅800px以下の追加指定：スマホでは大見出し・中見出しの行間をさらに詰める*/
	@media screen and (max-width:800px) {

	#container h2.heading-box-l {
		line-height: 1.15;
	}

	#container h3.heading-box-m {
		line-height: 1.15;
	}

	}/*追加指定ここまで*/


/*固定ページ専用・大見出し（heading-box-fixed）
  「00_★大見出し＋掲載日・ID（デザインB／固定ページ用）」用
  ※お知らせ等で使う色帯ボックス型（heading-box-l）とはあえて見た目を変え、
    　用途の違う固定ページと視覚的に区別できるようにしたデザインです。
---------------------------------------------------------------------------*/
#container h2.heading-box-fixed {
	display: block;
	flex-direction: initial;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 3px solid var(--primary-color);
	border-radius: 0;
	padding: 0 0 0.6em;
	font-size: 1.7rem;
	line-height: 1.25;	/*行間を詰める（2行になった時に間延びしないように）*/
	margin: 0 0 1.2em;
	position: relative;
}
/*見出し文字の頭に付ける丸アクセント*/
#container h2.heading-box-fixed span:first-child::before {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: var(--primary-color);
	vertical-align: middle;
}
#container h2.heading-box-fixed .small {
	display: block;
	font-size: 0.7rem;
	opacity: 0.6;
	letter-spacing: 0.1em;
	line-height: 1.6;
	margin-top: 0.5em;
	padding-left: 1.1em;	/*丸アクセントの分だけ字下げして揃える*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	#container h2.heading-box-fixed {
		line-height: 1.15;
	}

	}/*追加指定ここまで*/


/*このページに関するお問い合わせ（contact-info-box）
  固定ページ末尾の「90_★このページに関するお問い合わせ」ブロック、
  および お知らせ詳細ページ（oshirase_cms_item）の末尾で共通使用
---------------------------------------------------------------------------*/
#container .contact-info-box {
	background: color-mix(in srgb, var(--primary-color) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--primary-color) 25%, #fff);
	border-top: 4px solid var(--primary-color);
	border-radius: 8px;
	padding: 1.4em 1.6em;
	margin: 2.5em 0 0;
}
#container .contact-info-label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--primary-color);
	margin: 0 0 0.7em;
}
#container .contact-info-label::before {
	content: "\f0e5";	/*Font Awesome：吹き出しアイコン*/
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}
#container .contact-info-bumon {
	font-size: 1.05rem;
	font-weight: 500;
	margin: 0 0 0.4em;
}
#container .contact-info-line {
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0 0 0.3em;
	opacity: 0.85;
}
#container .contact-info-btn {
	margin: 1em 0 0;
}
#container .contact-info-btn a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: #fff;
	color: var(--bg-inverse-color);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.6em 1.4em;
	border-radius: 100px;
	border: 1px solid color-mix(in srgb, var(--primary-color) 35%, #fff);
	transition: background 0.2s, color 0.2s;
}
#container .contact-info-btn a::before {
	content: "\f105";	/*Font Awesome：右向き矢印（＞）*/
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--primary-color);
}
#container .contact-info-btn a:hover {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}
#container .contact-info-btn a:hover::before {
	color: var(--primary-inverse-color);
}

	/*固定ページ末尾に置いた時、直前のブロックとの間隔をやや広めに保つ*/
	@media screen and (max-width:800px) {

	#container .contact-info-box {
		padding: 1.2em 1.2em;
	}

	}/*追加指定ここまで*/


/*リンク一覧（link-list）：カテゴリー統合ページなどで使う、シンプルなテキストリンクの一覧
  「05_★リンク一覧（テキストリンク／カテゴリー統合ページ向け）」用
---------------------------------------------------------------------------*/
#container ul.link-list {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	border-top: 1px solid #e3e3e3;
}
#container ul.link-list li {
	border-bottom: 1px solid #e3e3e3;
}
#container ul.link-list a {
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding: 1em 0.3em;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	color: var(--bg-inverse-color);
	font-weight: 500;
	transition: color 0.2s;
}
#container ul.link-list a::before {
	content: "\f15c";	/*Font Awesome：書類アイコン*/
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.95em;
	color: var(--primary-color);
	flex: none;
}
#container ul.link-list a:hover {
	color: var(--primary-color);
}


/*見出しのテキストのフェードイン設定
---------------------------------------------------------------------------*/
/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}


/*main
---------------------------------------------------------------------------*/
/*トップ以外ののmain*/
body:not(.home) main {
	margin-top: calc(var(--header-bottom, calc(var(--headerM) + var(--headerH) + 32px)) + var(--navGap) + var(--navH) + 1.5rem);	/*上にマージン（header実測高さ＋メニューバー分を確保）。*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	body:not(.home) main {
		margin-top: calc(var(--header-bottom, 130px) + 1rem);	/*header実測高さ（ロゴ行＋ユーティリティバー行）＋余白*/
	}

	}/*追加指定ここまで*/


/*「施設のご案内」
---------------------------------------------------------------------------*/
/*gridボックス全体を囲むブロック*/
.grid-mask {
	display:grid;
	grid-template-columns: repeat(4, 1fr);	/*4列にする指定*/
	gap: 5rem;	/*ボックスの間に空けるスペース。５文字分。*/
	line-height: 1.5;	/*行間を少し狭く*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	.grid-mask {
		grid-template-columns: repeat(2, 1fr);	/*2列にする*/
		gap: 3rem;	/*ボックスの間に空けるスペース*/
	}

	}/*追加指定ここまで*/


/*h4見出し*/
.grid-mask h4 {
	margin-bottom: 0;
	text-align: center;
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}

/*p（段落）*/
.grid-mask p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
}

/*画像*/
.grid-mask figure {
	aspect-ratio: 1 / 1;   /* アスペクト比1:1の正方形 */
}
.grid-mask figure img {
	transition: 0.3s;
	width:100%;
	height:100%;
	object-fit: cover;
	display:block;
}

/*画像にリンクがある場合のみ少しだけ拡大*/
.grid-mask figure a img:hover {
	transform: scale(1.1);
}

.grid-mask .list {
	position: relative;
}
.grid-mask .kazari {
	display: block;
	width: clamp(80px, 8vw, 250px);
	position: absolute;
	pointer-events: none;
}
.grid-mask .kazari.left-top {
	left: -5vw;
	top: -6vw;
}
.grid-mask .kazari.right-top {
	right: -5vw;
	top: -6vw;
}

	/* マスク対応ブラウザだけ「切り抜き」に切り替え */
	@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

	.grid-mask figure {
		border-radius: 0;
		overflow: visible;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 100% 100%;
		/* 明示的に透過（アルファ）でマスクする指定を追加 */
		-webkit-mask-source-type: alpha;
		mask-mode: alpha;
	}

	.grid-mask .list.mask1 figure {
		-webkit-mask-image: var(--mask1);
		mask-image: var(--mask1);
	}

	.grid-mask .list.mask2 figure {
		-webkit-mask-image: var(--mask2);
		mask-image: var(--mask2);
	}

	.grid-mask .list.mask3 figure {
		-webkit-mask-image: var(--mask3);
		mask-image: var(--mask3);
	}

	.grid-mask .list.mask4 figure {
		-webkit-mask-image: var(--mask4);
		mask-image: var(--mask4);
	}

	.grid-mask .list.mask5 figure {
		-webkit-mask-image: var(--mask5);
		mask-image: var(--mask5);
	}

	.grid-mask .list.mask6 figure {
		-webkit-mask-image: var(--mask6);
		mask-image: var(--mask6);
	}

	}/*追加指定ここまで*/


/*「グルメランキング（３列ブロック）」
---------------------------------------------------------------------------*/
.list-grid .list * {margin: 0;padding: 0;}

/*ブロック全体を囲むブロック*/
.list-grid {
	display: grid;
    grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	gap: 6vw;	/*ブロックの間に空けるスペース*/
	align-items: start;
}

/*ボックス１個あたり*/
.list-grid .list {
	display: grid;
	text-align: center;		/*テキストをセンタリング*/
	position: relative;
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid.square .list figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid.square .list figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*ボックス内のh4（見出し）*/
.list-grid h4 {
	font-weight: 500;	/*タイトルはMedium(500)*/
}

/*ボックス内のp（文章）*/
.list-grid p {
	font-weight: normal;
	font-size: 0.85rem;	/*文字サイズ85%*/
	opacity: 0.7;		/*色を70%だけ出す*/
}

/* ランキングの旗 */
.rank-flag {
	position: absolute;
	left: -5px;	/*左からの配置場所*/
	top: -5px;	/*上からの配置場所*/
	width: 3rem;	/*幅*/
	height: 3rem;	/*高さ*/
	font-weight: bold;	/*太字に*/
	background: #fff; /*背景色*/
	color: #333;	/*文字色*/
  
  /* マスクの設定 */
  --mask-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,100 L50,70 L0,100 Z' fill='%23000000'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 色のバリエーション */
.rank1 {
  background: #fddc00; /*背景色（金）*/
  color: #111;	/*文字色*/
}
.rank2 {
  background: #c0c0c0; /*背景色（銀）*/
  color: #fff;	/*文字色*/
}
.rank3 {
  background: #cd7f32; /*背景色（銅）*/
  color: #fff;	/*文字色*/
}


/*grid-box（色々なレイアウト用）
---------------------------------------------------------------------------*/
/*ボックス全体*/
.grid-box {
	margin-bottom: 5vw;	/*下に空けるスペース。100vw = 画面幅100%なので、この場合は5%。*/
}

/*ボックス内のh2*/
.grid-box h2 {
	grid-column: 2 / 12;
}

/*ボックス内のh4*/
.grid-box h4{
	margin: 0;
}

/*画像と文字を囲むブロック*/
.grid-box section {
	display: grid;
	grid-template-columns: repeat(12, 1fr); /* 12等分 */
	gap: 5vw; /* 要素間の隙間 */
	margin-left: calc(-1 * var(--content-space));
	margin-right: calc(-1 * var(--content-space));
	margin-bottom: 5vw;	/*下に空けるスペース*/
	grid-auto-flow: dense;
}
.grid-box section:last-child {
  margin-bottom: 0;	/*最後のブロックの下マージンをなくす*/
}

/*imageとtextの設定*/
.grid-box .image,
.grid-box .text {
	align-self: center;
	position: relative;
}

/*imageのみの設定*/
.grid-box .image {
	grid-column: 1 / -1;
}

/*textのみの設定*/
.grid-box .text {
	grid-column: 2 / 12;
}

/*装飾イラスト用*/
.grid-box .kazari {
	display: block;
	position: absolute;
	z-index: 99;
	transform: translate(-50%, -50%);
	width: 150px;	/*幅*/
}

/*image-wide（横長で使う場合）*/
.grid-box .image-wide {
	grid-column: 2 / 12;
}

/*image-01*/
.grid-box .image-01 {
	grid-column: 8 / 12;
}
/*.text-01*/
.grid-box .text-01 {
	grid-column: 2 / 8;
}
/*image-01（左右入れ替え用）*/
.grid-box section.reverse .image-01 {
	grid-column: 2 / 6;
}
/*text-01（左右入れ替え用）*/
.grid-box section.reverse .text-01 {
	grid-column: 6 / 12;
}

/*image-02*/
.grid-box .image-02 {
	grid-column: 1 / 10;
}
/*text-02*/
.grid-box .text-02 {
	grid-column: 2 / 10;
}
/*image-02（左右入れ替え用）*/
.grid-box section.reverse .image-02 {
	grid-column: 4 / -1;
}
/*text-02（左右入れ替え用）*/
.grid-box section.reverse .text-02 {
	grid-column: 4 / 12;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	/*画像と文字を囲むブロック*/
	.grid-box section {
		margin-left: var(--content-space);
		margin-right: var(--content-space);
		display: block;
		margin-bottom: 60px;
	}
	
	}/*追加指定ここまで*/


/*お知らせ
---------------------------------------------------------------------------*/
	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;
		gap: 1rem;  /*日付や文章の間にとるスペース。１文字分。*/
		grid-template-columns: auto 1fr;	/* 日付の幅は自動で、内容が入るブロックは残り幅一杯とる。 */
	}

	}/*追加指定ここまで*/


/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*画像ボックス*/
.bg-slideup {
    background-image: url("../images/bg-slideup.jpg");	/*背景画像の読み込み*/
    background-repeat: no-repeat;
    background-size: cover;
	width: 100%;
	height: 50vh;	/*高さ。画面の高さの50%になる設定ですがお好みで。*/
	display: flex;
	justify-content: center;
	align-items: center;
}


/*「ご挨拶」の背景画像
---------------------------------------------------------------------------*/
.bg-greeting {
	padding-bottom: 5vw;	/*下に余白。*/
	background: url('../images/bg-greeting.webp') no-repeat center bottom / 100%;	/*画像の読み込み。*/
}


/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	display: block;text-decoration: none;
	width: fit-content;
	margin: 0 auto;
	background: var(--bg-color);	/*背景色*/
	color: var(--bg-inverse-color);	/*文字色*/
	padding: 0.5rem 3rem;	/*ボタン内の余白。上下に0.5文字分、左右に3文字分。*/
	border-radius: 100px;	/*角を丸くする指定。大きければ適当でOK。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボタンの影。右に、下に、ぼかす量、0,0,0は黒のことで0.1は色が10%出た状態。*/
}

/*マウスオン時*/
.btn1 a:hover {
	background: #000;	/*背景色*/
	color: #fff;		/*文字色*/
	box-shadow: none;	/*ボタンの影を消す*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;		/*ボックス内の余白*/
	background: rgba(0,0,0,0.1);	/*背景色*/
	color: var(--bg-inverse-color);			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid rgba(0,0,0,0.3);	/*テーブルの上の線。幅、線種、0,0,0は黒のことで0.3は色が30%出た状態。*/
	width: 100%;				/*幅*/
	margin-bottom: 2rem;		/*テーブルの下に空けるスペース。２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid rgba(0,0,0,0.3);	/*テーブルの下の線。幅、線種、0,0,0は黒のことで0.3は色が30%出た状態。*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}

	}/*追加指定ここまで*/


/*フッター上部のイラスト画像
---------------------------------------------------------------------------*/
.footer-illust {
	line-height: 0;	/*画像の下にできる余白を消す*/
}
.footer-illust img {
	display: block;
	width: 100%;
	height: auto;
}


/*フッター
---------------------------------------------------------------------------*/
footer * {margin: 0;padding: 0;}
footer ul {list-style: none;}

/*ブロック全体*/
footer {
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	padding: calc(var(--content-space) * 0.35);	/*フッター内の余白。上にイラストが入る分、控えめに。*/
	position: relative;
}

/*ロゴが入ったブロック（大きな画面だと左側）*/
footer .footer1 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;	/*このブロック内のボックス同士の間に空ける余白。*/
	margin-bottom: 12px;
}

/*フッター内のロゴ*/
footer .logo {
	font-size: 1.1rem;
}

/*地図が入ったブロック（大きな画面だと右側）*/
footer .footer2 {
    flex: 1;
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	footer {
		display: flex;
		gap: 1.5rem;		/*ロゴのブロックとメニューのブロックとの間の余白。*/
	}

	/*ロゴが入ったブロック*/
	footer .footer1 {
		margin-bottom: 0;
		text-align: left;
	}

	}/*追加指定ここまで*/


/*Copyright部分*/
footer small {
	display: block;
	text-align: right;
	margin-top: 1rem;
}


/*Google Map用
---------------------------------------------------------------------------*/
.iframe-box1 {
	width: 100%;
	aspect-ratio: 16 / 9;	/*マップのアスペクト比。お好みで。*/
	position: relative;
	overflow: hidden;
}
.iframe-box1 iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*SNSアイコン
---------------------------------------------------------------------------*/
.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	gap: 10px;
}
.icons i {
	font-size: 40px;	/*アイコンサイズ*/
}


/*bg1背景
---------------------------------------------------------------------------*/
.bg1 {
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	padding-top: 3vw;		/*ボックス内の上に空ける余白。画面幅100%=100vw*/
	padding-bottom: 3vw;	/*ボックス内の下に空ける余白。画面幅100%=100vw*/
}

/*上部分のみ角丸にしたい場合*/
.bg1.kado-maru {
	border-radius: 20vw 20vw 0 0;	/*左上、右上、右下、左下の順*/
}


/*bg2背景
---------------------------------------------------------------------------*/
.bg2 {
	background: #f9f7f2;	/*背景色*/
	padding-top: 3vw;		/*ボックス内の上に空ける余白。画面幅100%=100vw*/
	padding-bottom: 3vw;	/*ボックス内の下に空ける余白。画面幅100%=100vw*/
}


/*bg1,bg2共通設定。微妙な余白をなくす。
---------------------------------------------------------------------------*/
.bg1 + .bg1,
.bg2 + .bg2,
.bg1 + .bg2,
.bg2 + .bg1 {
	margin-top: 0;
}


/*kazari2背景
---------------------------------------------------------------------------*/
.kazari2 {
	background-image: url('../images/kazari2.png');	/*装飾画像*/
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
}
.kazari3 {
	background-image: url('../images/kazari3.png');	/*装飾画像*/
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
}



/*近くの観光地（イメージマップ風）
---------------------------------------------------------------------------*/
/*マップ全体を囲むブロック*/
.image-map-container {
    position: relative;
    width: 100%;
	line-height: 1.2;
}

/*地図イラスト*/
.base-image {
    width: 100%;
    height: auto;
    display: block;
}

/*ピン（アイコンマーク）の配置の基準設定と、ピンデザイン*/
.pin-item {
    position: absolute; /* 基準に対して絶対配置 */
    transform: translate(-50%, -50%);
    
    /* 以下、ピンのデザイン */
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/*ピン（アイコンマーク）*/
.pin-marker {
	font-size: clamp(10px, 4vw, 30px);	/*文字サイズ。最小10px、最大30px、それ以外は4vw。*/
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    text-shadow: 
        2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, /* 白いフチ */
        3px 3px 5px rgba(0,0,0,0.5); /* 影 */
    transition: transform 0.2s;
}

/*ラベル（テキスト）*/
.pin-label {
    background: #fff;	/*背景色*/
    color: #333;		/*文字色*/
	border: 2px solid #333;	/*枠線の幅、線種、色*/
    padding: 4px 8px;	/*ラベル内の余白。上下、左右に。*/
    border-radius: 4px;	/*角を少しだけ丸くする*/
    /*font-size: 0.8rem;	文字サイズ*/
	/*font-size: 1.2vw;*/
	font-size: clamp(10px, 1.2vw, 20px);	/*文字サイズ。最小10px、最大20px、それ以外は1.2vw。*/
    font-weight: bold;	/*太字に*/
    white-space: nowrap; /* 文字を折り返さない */
}

/* ホバー時の動き（PC用） */
.pin-item:hover .pin-marker {
    transform: scale(1.2) translateY(-5px); /* ちょっと大きくなって浮く */
}


/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.slide-thumbnail1 {
	overflow-x: hidden;
	margin-bottom: 2rem;
}

/*画像たちを囲むブロック*/
.slide-thumbnail1 .img {
	display: flex;
	overflow: hidden;
}

/*画像*/
.slide-thumbnail1 .img img {
	padding: 0 1vw;	/*上下の余白はなし、左右への余白は画面の1%*/
}


/*段違いに見せる為、偶数番目の画像に上に余白を作る。*/
.slide-thumbnail1 .img div:nth-of-type(even) {
	margin-top: 30px;
}

/*右から左へ、左から右へ、のアニメーション*/
.slide-thumbnail1 .rtl, .slide-thumbnail1 .ltr {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.slide-thumbnail1 .rtl {animation-name: slide-rtl;}
.slide-thumbnail1 .ltr {animation-name: slide-ltr;}

@keyframes slide-rtl {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;display: block;
	background: #555;
	color: #ccc;
	text-align: right;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*YouTubeをiframeで読み込む（アスペクト比16:9）
---------------------------------------------------------------------------*/
.youtube {
	max-width: 700px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;	/*アスペクト比を調整するところです*/
	position: relative;
}
.youtube iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*ページ下部のアンケート（外部ツールの埋め込み）
---------------------------------------------------------------------------*/
.enquete-box {
	max-width: 700px;		/*ボックスの最大幅*/
	margin: 4rem auto 0;	/*上に余白、左右は中央寄せ*/
	padding: 2rem 1.5rem;	/*ボックス内の余白*/
	text-align: center;
	border-top: 1px solid #ddd;	/*本文との区切り線*/
}
.enquete-box .enquete-question {
	font-size: 1.1rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
}
.enquete-box .enquete-embed {
	width: 100%;
}
.enquete-box .enquete-embed iframe {
	width: 100%;
	max-width: 100%;
	border: none;
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #c02340 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.padding0 {padding: 0 !important;}
.mb0 {margin-bottom: 0px !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: rgba(0,0,0,0.7); color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: yellow !important;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.block {display: block !important;}


/* 文字色・ハイライト（投稿・ページ編集時のカスタム書式用）※追加分
---------------------------------------------------------------------------*/
.tp-color-red    {color: #d0332c !important;}
.tp-color-blue   {color: #1565c0 !important;}
.tp-color-green  {color: #2e7d32 !important;}
.tp-color-orange {color: #e07a1a !important;}
.tp-color-purple {color: #7b1fa2 !important;}
.tp-color-gray   {color: #757575 !important;}

.tp-highlight-yellow {background: #fff59d; padding: 0 .2em;}
.tp-highlight-pink   {background: #f8bbd0; padding: 0 .2em;}
.tp-highlight-green  {background: #c8e6c9; padding: 0 .2em;}
.tp-highlight-blue   {background: #b3e5fc; padding: 0 .2em;}
.tp-highlight-orange {background: #ffe0b2; padding: 0 .2em;}

/* 添付ファイルダウンロードリンク（資料・ファイル添付ブロック用）
   ※ボックス／ボタン調ではなく、シンプルな「アイコン＋下線リンク」の
   　テキストリンク形式（リンク一覧 ul.link-list と揃えた見た目）
---------------------------------------------------------------------------*/
.tp-file-download-wrap {text-align: left !important; margin: 0; padding: .5em 0; border-bottom: 1px solid #e3e3e3;}
.tp-file-download {
	display: inline-flex; align-items: center; gap: .6em;
	text-decoration: underline; text-underline-offset: .2em;
	color: var(--bg-inverse-color); font-weight: 500;
	transition: color 0.2s;
}
.tp-file-download:hover {color: var(--primary-color);}
.tp-file-download:before {
	content: "FILE";
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.4em; height: 1.5em; padding: 0 .3em;
	background: #888; color: #fff; font-size: .65em; font-weight: bold;
	border-radius: 3px; letter-spacing: .02em; flex: none;
	text-decoration: none;
}
.tp-file-download[href$=".pdf" i]:before {content: "PDF"; background: #d93025;}
.tp-file-download[href$=".doc" i]:before,
.tp-file-download[href$=".docx" i]:before {content: "DOC"; background: #2b579a;}
.tp-file-download[href$=".xls" i]:before,
.tp-file-download[href$=".xlsx" i]:before {content: "XLS"; background: #217346;}
.tp-file-download[href$=".ppt" i]:before,
.tp-file-download[href$=".pptx" i]:before {content: "PPT"; background: #d24726;}
.tp-file-download .tp-file-name {font-weight: 500;}
.tp-file-download .tp-file-desc {display: block; font-size: .85em; color: #666; margin-top: .2em; text-decoration: none;}

/*資料ダウンロードのsection（.tp-file-section）は、他のsectionのような
  大きな上下マージン(5vw)を持たせず、リンクを詰めて並べる
  （区切りは.tp-file-download-wrapのborder-bottomで表現）。*/
section.tp-file-section {margin-top: 0; margin-bottom: 0;}