@charset "utf-8";


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


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


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


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html {
	font-size: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);	/*画面幅375px〜1400pxの間で、16px〜18pxに可変（ブラウザの文字サイズが標準の場合）。下でrem管理しているものも連動します。*/
	overflow-x: visible;
}
body {
	margin: 0;padding:0;
	font-family: var(--base-font);	/*フォント指定。theme.cssのbase-fontを読み込みます。*/
	font-weight: 400;
	-webkit-text-size-adjust: none;
	background: var(--bg-color);	/*背景色。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	line-height: 1.9;		/*行間*/
	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;}


/*文字サイズの設定（文字サイズ変更ボタンの「大」を押した時）
もしデフォルトを「大」にしたい場合は、jsフォルダのmain.jsを開き「文字サイズ変更ボタン」のコメントを読んで下さい。
---------------------------------------------------------------------------*/
html.f-large {
	font-size: clamp(1.1875rem, 0.29vw + 1.12rem, 1.375rem);	/*画面幅375px〜1400pxの間で、19px〜22pxに可変。標準の約1.2倍です。*/
}


/*キーボード操作時のフォーカス枠（Tabキーで移動した時に、今どこにいるかを示す枠）
---------------------------------------------------------------------------*/
:focus-visible {
	outline: 3px solid var(--primary-color);	/*枠の太さ、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
	outline-offset: 3px;	/*要素と枠の間に空ける隙間*/
}

/*「本文へスキップ」で移動した先には枠を出さない*/
main:focus {
	outline: none;
}


/*本文へスキップ（普段は画面の外に隠れていて、Tabキーを押すと表示されます）
---------------------------------------------------------------------------*/
.skip {
	position: absolute;z-index: 1000;
	left: 1rem;
	top: -10rem;	/*画面の外に隠しておく*/
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.8rem 1.5rem;
	font-weight: bold;
	text-decoration: none;
}
.skip:focus {
	top: 1rem;	/*フォーカスされたら画面内に出す*/
}


/*動きを減らす設定（OSで「視差効果を減らす」「アニメーションを減らす」をオンにしている人向け）
アニメーションやフェードをほぼ一瞬で終わらせます。
---------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}


/*section
---------------------------------------------------------------------------*/
section {
	padding: var(--content-space-v, var(--content-space-l)) var(--content-space-l);	/*上下、左右へのsection内の余白。上下はtheme.cssのcontent-space-v（無い場合はcontent-space-l）、左右はcontent-space-lを読み込みます。上下のセクションが隣り合うと、2つ分の余白になります。*/
}

/*section内の最初と最後の要素のマージンはリセット（余白はsectionのpaddingで管理する為）*/
section > :first-child {margin-top: 0;}
section > :last-child {margin-bottom: 0;}


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

/*マウスオン時（下線を太くします。色を薄くする方法は、文字が読みにくくなるので使っていません）*/
a:hover {
	text-decoration-thickness: 2px;
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.2s both;  /*0.2(2つ目の数字)秒待機後、0.2(1つ目の数字)秒かけてフェードイン*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;	/*折り返した時の上下、左右に空けるスペース*/
	padding: 1.5rem var(--content-space-l);	/*上下に1.5文字分、左右はtheme.cssのcontent-space-lを読み込みます。*/
}

/*ロゴ*/
#logo {margin: 0;}
#logo a {display: block;}
#logo img {
	display: block;
	width: 380px;	/*ロゴの幅*/
}

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

	/*ロゴ*/
	#logo img {
		width: 300px;
	}

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

/*ロゴ以外（電話番号・文字サイズ・Web予約）を囲むブロック*/
header .header-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem 1.5rem;	/*上下、左右に空けるスペース*/
	margin-left: auto;	/*ロゴの下に折り返した時も右に寄せる*/
}
header .header-box > * {margin: 0;}

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

	/*２列に並べ、文字サイズのブロックは下の段に横いっぱいで出す*/
	header .header-box {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}
	header #f-size {
		grid-column: 1 / -1;
		order: 1;	/*一番下に表示*/
	}

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

/*電話番号*/
header .tel {
	line-height: 1.4;
}
header .tel a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.6rem;	/*番号の文字サイズ*/
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 0.05em;
	white-space: nowrap;	/*番号の途中で折り返さない*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
header .tel a i {
	font-size: 0.8em;	/*アイコンのサイズ。番号の80%。*/
}

/*受付時間*/
header .tel span {
	display: block;
	font-size: 0.9rem;
}

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

	/*枠で囲んでボタンのように見せます*/
	header .tel {
		border: 2px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
		border-radius: 5px;
		text-align: center;
	}
	header .tel a {
		justify-content: center;
		font-size: min(1.15rem, 4.8vw);	/*文字サイズ「大」でも番号が折り返さないように、画面幅の4.8%を上限に*/
		padding: 0.5rem 0.5rem 0;
	}
	header .tel span {
		font-size: 0.75rem;
		padding: 0 0.3rem 0.5rem;
	}

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

/*Web予約ボタン*/
header .reserve a {
	gap: 0.5rem;
	font-size: 1.1rem;
	padding: 1rem 2rem;
	border-radius: 5px;
}

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

	header .reserve a {
		height: 100%;
		width: 100%;
		justify-content: center;
		padding: 0.5rem;
	}

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


/*文字サイズ変更ボタン
---------------------------------------------------------------------------*/
/*ブロック全体*/
#f-size {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

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

	#f-size {
		justify-content: center;
	}

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

/*「文字サイズ」のテキスト*/
#f-size p {
	margin: 0;
	font-size: 0.9rem;
}

/*「標準」「大」を囲むブロック*/
#f-size .f-size-btns {
	display: flex;
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
	border-radius: 5px;
	overflow: hidden;
}

/*「標準」「大」ボタン*/
#f-size button {
	font-family: inherit;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1;
	min-width: 4rem;	/*ボタンの最小幅*/
	min-height: 2.75rem;	/*ボタンの最小の高さ（指で押しやすい大きさ）*/
	padding: 0 0.8rem;
	border: none;
	background: var(--bg-color);			/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--primary-color);			/*文字色。theme.cssのprimary-colorを読み込みます。*/
	cursor: pointer;
}
#f-size button + button {
	border-left: 2px solid var(--primary-color);	/*ボタン同士の間の線*/
}

/*「大」ボタンの文字は少し大きく*/
#f-size #f-large {
	font-size: 1.3rem;
}

/*選択中のボタン*/
#f-size button[aria-pressed="true"] {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*フォーカス枠をボタンの内側に出す（外側だと枠に隠れるため）*/
#f-size button:focus-visible {
	outline-offset: -6px;
	outline-color: var(--accent-color);
}


/*メニュー
このテンプレートはハンバーガーメニューを使わず、どの画面幅でもメニューを常に表示します。
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#menubar {
	border-top: 1px solid var(--bg-border-color);		/*上の線の幅、線種、var以降は色の指定で、theme.cssのbg-border-colorを読み込みます。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、var以降は色の指定で、theme.cssのbg-border-colorを読み込みます。*/
	padding: 0 var(--content-space-l);	/*左右の余白。theme.cssのcontent-space-lを読み込みます。*/
}
#menubar ul {
	display: flex;
}
#menubar li {
	flex: 1;	/*メニューを均等の幅に*/
}

/*メニュー１個あたり*/
#menubar a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4rem;	/*高さ*/
	padding: 0.5rem;
	text-decoration: none;
	text-align: center;
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1.4;
	border-bottom: 4px solid transparent;	/*現在地の下線用に、透明の線を引いておきます*/
}

/*マウスオン時*/
#menubar a:hover {
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
}

/*現在表示中のページ（liにcurrentを付けます）*/
#menubar li.current a {
	font-weight: bold;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	border-bottom-color: var(--primary-color);	/*下線の色。theme.cssのprimary-colorを読み込みます。*/
}

/*キーボード操作時のフォーカス枠は内側に*/
#menubar a:focus-visible {
	outline-offset: -3px;
}

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

	/*２列に並べます*/
	#menubar {
		border: none;
		padding: 0 var(--content-space-l) 1rem;
	}
	#menubar ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}

	/*メニューの数が奇数の時、最後の１個を横いっぱいに*/
	#menubar li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/*メニュー１個あたり*/
	#menubar a {
		min-height: 3.25rem;
		border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのbg-border-colorを読み込みます。*/
		border-radius: 5px;
	}

	/*現在表示中のページ*/
	#menubar li.current a {
		background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
		color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
		border-color: var(--primary-color);
	}

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


/*メイン画像
このテンプレートでは、写真の上に文字を重ねず、左に文字・右に写真を並べています（写真の上の文字は、写真によって読みにくくなるため）。
---------------------------------------------------------------------------*/
.mainimg * {margin: 0;padding: 0;}

/*メイン画像全体を囲むブロック*/
.mainimg {
	display: grid;
	grid-template-columns: 1fr 1.25fr;	/*左の文字：右の写真＝1：1.25の幅*/
	align-items: center;
	gap: 4vw;	/*文字と写真の間のスペース*/
	padding: 3vw 0 4vw var(--content-space-l);	/*上、右、下、左の余白。右は0にして写真を画面の端まで出します。*/
}

/*テキストブロック*/
.mainimg .text {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;	/*見出し・文章・ボタンの間に空けるスペース*/
}

/*h1（大きな文字）。トップページでは、このキャッチコピーがページの一番大きな見出し（h1）になります。*/
.mainimg .text h1 {
	font-size: max(1.8rem, 2.8vw);	/*文字サイズ。画面幅の2.8%で、最小でも1.8文字分。*/
	font-weight: bold;
	line-height: 1.5;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	word-break: auto-phrase;	/*折り返す時に、言葉の途中で切れにくくします（対応していないブラウザでは通常の折り返しになります）*/
}

/*p（説明テキスト部分）*/
.mainimg .text p {
	font-size: 1.05rem;
	word-break: auto-phrase;	/*折り返す時に、言葉の途中で切れにくくします*/
}

/*画像ブロック*/
.mainimg .image img {
	display: block;
	width: 100%;
	border-radius: 3rem 0 0 3rem;	/*左上と左下だけ角丸に*/
}

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

	/*縦に並べます*/
	.mainimg {
		grid-template-columns: 1fr;
		padding-top: 1rem;
	}
	.mainimg .text {
		padding-right: var(--content-space-l);	/*右の余白。theme.cssのcontent-space-lを読み込みます。*/
	}
	.mainimg .text h1 {
		font-size: 1.6rem;
	}

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

/*ボタンブロック（ボタンが１つの場合も、このブロックで囲みます）*/
.mainimg .btn-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;	/*2個以上ボタンを並べた場合の、間に空けるスペース。*/
}
.mainimg .btn a {
	gap: 0.6rem;	/*アイコンと文字の間のスペース*/
	font-size: 1.1rem;
	padding: 1rem 2rem;
	border-radius: 5px;
}

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

	/*ボタンを横いっぱいに*/
	.mainimg .btn-container .btn {
		width: 100%;
	}
	.mainimg .btn a {
		width: 100%;
		justify-content: center;
	}

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


/*ボタン
---------------------------------------------------------------------------*/
.btn a {
	display: inline-flex;		/*文字とSVG矢印を横並びにする*/
	align-items: center;		/*縦位置を中央に揃える*/
	text-decoration: none;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
	padding: 0.8rem 2rem;	/*上下に0.8文字分、左右に2文字分の余白*/
	font-weight: bold;		/*太字に*/
}

/*ボタンのマウスオン時（文字に下線を出します）*/
.btn a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;	/*下線と文字の間隔*/
}

/*背景が白いタイプのボタン*/
.btn.inverse a {
	background: var(--primary-inverse-color);	/*背景色。theme.cssのprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);				/*文字色。theme.cssのprimary-colorを読み込みます。*/
	border: 2px solid var(--primary-color);		/*枠線。白い背景の上でもボタンだと分かるように。*/
}

/*ボタンを並べるブロック（ボタンが１つの場合も、このブロックで囲みます）*/
.btn-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;	/*ボタン同士の間に空けるスペース*/
}
.btn-container .btn {margin: 0;}

/*アクセントカラーのボタン*/
.btn.accent a {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
	border: 2px solid var(--accent-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのaccent-colorを読み込みます。*/
}


/*contents
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	min-height: 0;
}


/*main
---------------------------------------------------------------------------*/
main {
	container-type: inline-size;
}

/*main内で使用するul,ol要素（リストタグ）*/
main ul,main ol {
	margin-left: 2rem;
	margin-right: 2rem;
}

/*h2*/
main h2 {
	margin: 0 0 2rem;
	font-size: 1.9rem;	/*文字サイズ*/
	font-weight: bold;
	line-height: 1.5;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*h2内のspan（上の英語）*/
main h2 span {
	display: block;
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.15em;
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

/*本文中のリンク（色だけでなく下線でもリンクだと分かるようにします）*/
main p a, main dd a, main li a, main td a {
	text-decoration: underline;
	text-underline-offset: 0.2em;	/*下線と文字の間隔*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}


/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news * {margin: 0;padding: 0;}

/*日付*/
dl.news dt {
	display: flex;
	align-items: center;
	gap: 1rem;	/*日付とアイコンの間のスペース*/
	padding-top: 1.2rem;
}

/*アイコン*/
dl.news dt span {
	display: inline-block;
	line-height: 1;
	min-width: 6rem;	/*最小の幅*/
	padding: 0.4rem 0.6rem;
	font-size: 0.9rem;
	background: var(--primary-light-color);		/*背景色。theme.cssのprimary-light-colorを読み込みます。*/
	color: var(--primary-light-inverse-color);	/*文字色。theme.cssのprimary-light-inverse-colorを読み込みます。*/
	text-align: center;
	border-radius: 3px;		/*角を少し丸く*/
}

/*アイコンを目立たせる場合（accent-color）*/
dl.news dt span.accent-color {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*テキスト*/
dl.news dd {
	padding: 0.3rem 0 1.2rem;
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}

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

	/*日付とテキストを横に並べます*/
	dl.news {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);	/*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
	}
	dl.news dt {
		padding: 1.2rem 2rem 1.2rem 0;
		border-bottom: 1px solid var(--bg-border-color);
	}
	dl.news dd {
		padding: 1.2rem 0;
	}

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


/*week1（「営業日・送迎」で使用。１週間の表）
---------------------------------------------------------------------------*/
/*テーブル全体*/
.week1 {
	table-layout: fixed;
	width: 100%;
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	border: 2px solid var(--primary-color);	/*外枠の線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
}

/*表の説明（読み上げソフト用。画面には表示しません）*/
.week1 caption {
	position: absolute;
	width: 1px;height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*セル共通*/
.week1 th,
.week1 td {
	padding: 1rem 0.2rem;
	text-align: center;
	line-height: 1.4;
	border: 1px solid var(--bg-border-color);	/*線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}

/*１列目（時間）の幅*/
.week1 tr > :first-child {
	width: 25%;
}

/*１行目（曜日）*/
.week1 thead th {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border-color: var(--primary-border-color);
}

/*１列目（時間）*/
.week1 tbody th {
	font-weight: bold;
	background: var(--primary-light-color);	/*背景色。theme.cssのprimary-light-colorを読み込みます。*/
}

/*○のマス*/
.week1 td {
	font-size: 1.3rem;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*お休み（色だけでなく「休」の文字でも伝えます）*/
.week1 td.off {
	font-size: 1rem;
	font-weight: bold;
	background: #f8ebf0;	/*背景色*/
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

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

	.week1 th,
	.week1 td {
		padding: 0.8rem 0;
		font-size: 0.9rem;
	}
	.week1 tr > :first-child {
		width: 30%;
	}
	.week1 td {
		font-size: 1.1rem;
	}

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

/*表の下の注意書き*/
.hours-note {
	margin: 1.5rem 0 0 !important;
	padding-left: 1.5rem;
}


/*下層ページのページタイトル（h1にclass="page-title"を付けて使います）
---------------------------------------------------------------------------*/
h1.page-title {
	margin: 0;
	padding: 3rem var(--content-space-l);	/*上下に3文字分、左右はtheme.cssのcontent-space-lを読み込みます。*/
	font-size: 2rem;
	line-height: 1.5;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
}

/*上の英語*/
h1.page-title span {
	display: block;
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.15em;
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}


/*見出し下の説明文
---------------------------------------------------------------------------*/
main .lead {
	margin: -1rem 0 2rem;
}


/*list1（「サービス内容」「3つのお約束」「施設の設備」で使用。カードを並べるブロック）
---------------------------------------------------------------------------*/
.list1 * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	/*コンテナ幅が600px以下で1カラム*/
	@container (max-width: 600px) {
		.list1 { grid-template-columns: 1fr; }
	}

/*ボックス１個あたり*/
.list1 .list {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	position: relative;
	padding: 2rem;	/*ボックス内の余白*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	border-radius: 10px;	/*角丸のサイズ*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	transition: 0.3s;
}

/*マウスオン時（リンクが入っているボックスだけ。ボックス全体がリンクになっています）*/
.list1 .list:has(a):hover {
	border-color: var(--primary-color);	/*枠線の色。theme.cssのprimary-colorを読み込みます。*/
	box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.08);	/*影。0,0,0は黒の事で0.08は色が8%出た状態。*/
}

/*アイコン*/
.list1 .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;	/*丸の幅*/
	height: 4rem;	/*丸の高さ*/
	border-radius: 50%;
	font-size: 1.6rem;	/*アイコンのサイズ*/
	background: var(--primary-light-color);	/*背景色。theme.cssのprimary-light-colorを読み込みます。*/
	color: var(--primary-color);	/*アイコンの色。theme.cssのprimary-colorを読み込みます。*/
}

/*h3（タイトル）*/
.list1 h3 {
	font-size: 1.25rem;
	line-height: 1.5;
}
.list1 h3 a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*タイトルの右の矢印*/
.list1 h3 a::after {
	content: "\f061";	/*Font Awesomeの矢印アイコン*/
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.8em;
}

/*リンクの範囲をボックス全体に広げます（どこを押してもリンク先へ移動します）*/
.list1 h3 a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
}

/*キーボード操作時は、ボックス全体にフォーカス枠を出します*/
.list1 h3 a:focus-visible {
	outline: none;
}
.list1 .list:has(a:focus-visible) {
	outline: 3px solid var(--primary-color);	/*枠の太さ、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
	outline-offset: 3px;
}

/*説明文*/
.list1 p {
	line-height: 1.8;
}

	/*コンテナ幅が600px以下の追加指定（アイコンを左、文字を右に並べてコンパクトに）*/
	@container (max-width: 600px) {

	.list1 .list {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
		gap: 0.3rem 1rem;
		padding: 1.2rem;
	}
	.list1 .icon {
		grid-row: span 2;	/*タイトルと説明文の2行分の高さを使う*/
		width: 3rem;
		height: 3rem;
		font-size: 1.2rem;
	}

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


/*flex1（「施設長あいさつ」「私たちの想い」で使用。左に写真、右に文章）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.flex1 {
	display: flex;
	align-items: center;
	gap: 5vw;	/*写真と文章の間にあける余白。画面幅の5%。*/
}

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

	.flex1 {
		flex-direction: column;	/*縦積みに*/
		align-items: stretch;
	}

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

/*画像ブロック*/
.flex1 .image {
	width: 35%;	/*幅。お好みで。*/
}
.flex1 .image img {
	display: block;
	width: 100%;
	border-radius: 10px;	/*角丸のサイズ*/
}

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

	.flex1 .image {
		width: 70%;
		margin: 0 auto;
	}

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

/*テキストブロック*/
.flex1 .text {
	flex: 1;
}
.flex1 .text > * {margin: 0 0 1.2rem;}
.flex1 .text > :last-child {margin-bottom: 0;}
.flex1 h2 {
	margin-bottom: 1.5rem !important;
}

/*キャッチコピー*/
.flex1 .catch {
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.6;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	word-break: auto-phrase;	/*折り返す時に、言葉の途中で切れにくくします*/
}

/*名前*/
.flex1 .name {
	text-align: right;
}
.flex1 .name span {
	margin-left: 1rem;
	font-size: 1.4rem;
	font-weight: bold;
}


/*flow1（「ご利用までの流れ」で使用。パーツのui-tools-flow1を元にしています）
---------------------------------------------------------------------------*/
.flow1 * {margin: 0;padding: 0;}

/*ボックス全体*/
.flow1 {
	margin: 0 !important;padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));	/*4列*/
}

/*ボックス１個あたり*/
.flow1 li {
	padding: 0 2rem;	/*左右に2文字分の余白*/
	border-left: 1px solid var(--bg-border-color);	/*左の線。theme.cssのbg-border-colorを読み込みます。*/
}
.flow1 li:first-child {
	padding-left: 0;
	border-left: none;	/*1個目は線なし*/
}

/*bg1-light-parts上の線色*/
.bg1-light-parts .flow1 li {
	border-color: var(--light-border-color);	/*theme.cssのlight-border-colorを読み込みます。*/
}

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

	/*2列に*/
	.flow1 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem 0;	/*上下に3文字分のスペース*/
	}
	.flow1 li:nth-child(odd) {
		padding-left: 0;
		border-left: none;
	}

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

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

	/*縦積みに*/
	.flow1 {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.flow1 li {
		padding: 0;
		border-left: none;
	}

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

/*番号*/
.flow1 .num {
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

/*見出し*/
.flow1 h3 {
	font-size: 1.4rem;	/*文字サイズ140%*/
	line-height: 1.5;
	margin: 0.3rem 0 1rem;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*見出しの下の短い線*/
.flow1 h3::after {
	content: "";
	display: block;
	width: 2rem;		/*線の長さ*/
	height: 3px;		/*線の太さ*/
	margin-top: 1rem;	/*見出しと線の間のスペース*/
	background: currentColor;	/*線の色。文字と同じ色。*/
}

/*説明文*/
.flow1 p:not(.num) {
	line-height: 1.8;	/*行間*/
}


/*faq（「よくある質問」で使用。detailsタグの開閉ブロック）
---------------------------------------------------------------------------*/
/*ボックス全体*/
.faq {
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*質問同士の間に空けるスペース*/
}

/*質問１個あたり*/
.faq details {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	border-radius: 10px;	/*角丸のサイズ*/
}

/*質問（押すと開閉します）*/
.faq summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 1.5rem;
	font-weight: bold;
	line-height: 1.6;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	cursor: pointer;
	list-style: none;	/*標準の三角マークを消す*/
}
.faq summary::-webkit-details-marker {
	display: none;	/*標準の三角マークを消す（Safari用）*/
}

/*フォーカス枠をボックスの内側に*/
.faq summary:focus-visible {
	outline-offset: -3px;
	border-radius: 10px;
}

/*「Q」のマーク*/
.faq summary::before {
	content: "Q";
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*右端の「＋」マーク（開いている時は「−」になります）*/
.faq summary::after {
	content: "＋";
	margin-left: auto;	/*右端に寄せる*/
	flex-shrink: 0;
	font-size: 1.4rem;
	line-height: 1;
}
.faq details[open] summary::after {
	content: "−";
}

/*答え*/
.faq details p {
	margin: 0;
	padding: 0 1.5rem 1.5rem calc(1.5rem + 2.2rem + 1rem);	/*左は「Q」マークの幅に合わせて、質問の文字と揃えます*/
}

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

	.faq summary {
		padding: 1rem;
	}
	.faq details p {
		padding: 0 1rem 1.2rem;
	}

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


/*access1（「アクセス」で使用。パーツのui-tools-access1を元にしています）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.access1 {
	display: flex;	/*横並びに*/
	align-items: center;
	gap: 6vw;	/*文字と地図の間に空けるスペース。画面幅の6%。*/
}

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

	.access1 {
		flex-direction: column;	/*縦積みに*/
		align-items: stretch;
	}

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

/*bleedつき（地図をセクションの右端・上下いっぱいに広げます）*/
.access1.bleed {
	margin: calc(-1 * var(--content-space-v, var(--content-space-l))) calc(-1 * var(--content-space-l));
	margin-left: 0;
}

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

	/*bleedを通常に戻す*/
	.access1.bleed {
		margin: 0;
	}

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

/*テキストブロック*/
.access1 .text {
	flex: 1;
	display: grid;	/*縦積みに*/
	row-gap: 2rem;	/*ブロックの間に空けるスペース。2文字分。*/
	padding: var(--content-space-v, var(--content-space-l)) 0;	/*上下の余白（bleedで外にはみ出した分を戻します）*/
}
.access1 .text h2 {
	margin: 0;
}

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

	.access1 .text {
		padding: 0;
	}

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

/*テキストブロック１つあたり（所在地、電車、お車）*/
.access1 .text > div:not(.btn-container) {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);	/*アイコンサイズ2.5rem分を確保し、残りはスペース一杯使う*/
	align-items: center;
	column-gap: 1rem;	/*アイコンとテキストブロックの間に空けるスペース。1文字分。*/
}

/*アイコンをh3とpの2行ぶんまたがせて左側に配置*/
.access1 .text > div > i {
	grid-row: 1 / 3;
	font-size: 2rem;	/*アイコンサイズ。2文字分。*/
	text-align: center;
	color: var(--primary-color);	/*アイコンの色。theme.cssのprimary-colorを読み込みます。*/
}

/*見出しと段落*/
.access1 .text h3,
.access1 .text p {
	margin: 0;
}
.access1 .text h3 {
	font-size: 1.1rem;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*iframeブロック*/
.access1 .image {
	width: 50%;	/*幅。お好みで。*/
	align-self: stretch;	/*セクションの高さいっぱいに*/
	background: var(--light-color);	/*地図が読み込まれるまでの背景色。theme.cssのlight-colorを読み込みます。*/
}

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

	.access1 .image {
		width: 100%;
	}

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

/*iframe（Google Map）。道や駅を見分けやすいよう、カラーで表示しています。*/
.access1 .image iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 400px;	/*最低の高さ*/
}


/*ta1（「スタッフ紹介」「施設の概要」「アクセス」で使用。パーツのta1を元にした2列の表）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	border-top: 1px solid var(--bg-border-color);	/*テーブルの一番上の線。幅、線種、varは色の設定でtheme.cssのbg-border-colorを読み込みます。*/
	background: var(--bg-color);		/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);		/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid var(--bg-border-color);	/*テーブルの下線。幅、線種、varは色の設定でtheme.cssのbg-border-colorを読み込みます。*/
}

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

/*th（左側）のみの設定*/
.ta1 th {
	width: clamp(8rem, 22vw, 13rem);	/*幅。8文字分〜13文字分の間で、画面幅に応じて自動調整。真ん中の22vwは画面幅の22%。*/
	background: var(--primary-light-color);		/*背景色。theme.cssのprimary-light-colorを読み込みます。*/
	color: var(--primary-light-inverse-color);	/*文字色。theme.cssのprimary-light-inverse-colorを読み込みます。*/
}

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

	/*見出しと内容を縦に並べます*/
	.ta1 th, .ta1 td {
		display: block;
		width: auto;
	}
	.ta1 th {
		padding: 0.6rem 1rem;
	}
	.ta1 td {
		padding: 0.8rem 1rem;
	}

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


/*pagelink（「サービス内容」ページで使用。ページ内の項目へ移動するリンク）
---------------------------------------------------------------------------*/
main .pagelink {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 0.8rem;
}

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

	main .pagelink {
		grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
	}

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

main .pagelink a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 100%;
	min-height: 3.5rem;
	padding: 0.6rem 1rem;
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
	border-radius: 5px;
	font-weight: bold;
	line-height: 1.4;
	word-break: auto-phrase;	/*折り返す時に、言葉の途中で切れにくくします*/
	text-decoration: none;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*右端の下向き矢印*/
main .pagelink a::after {
	content: "\f107";	/*Font Awesomeの下向き矢印*/
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-left: auto;
}

/*マウスオン時*/
main .pagelink a:hover {
	background: var(--primary-light-color);	/*背景色。theme.cssのprimary-light-colorを読み込みます。*/
}


/*下層ページの各項目の見出し（「サービス内容」ページで使用）
---------------------------------------------------------------------------*/
/*見出し（左にアイコン）*/
main .item-title {
	display: flex;
	align-items: center;
	gap: 1rem;
}
main .item-title i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	font-size: 1.4rem;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}


/*box1（枠で囲んだ汎用ボックス。「サービス内容」ページで使用）
---------------------------------------------------------------------------*/
.box1 {
	margin-top: 1.5rem;
	padding: 1.5rem 2rem;
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	border-radius: 10px;
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
}
.box1 > * {margin-top: 0;}
.box1 > :last-child {margin-bottom: 0;}
.box1 h3 {
	font-size: 1.1rem;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*チェックマーク付きのリスト*/
main ul.check {
	list-style: none;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}
main ul.check li {
	position: relative;
	padding-left: 2rem;
}
main ul.check li + li {
	margin-top: 0.4rem;
}
main ul.check li::before {
	content: "\f00c";	/*Font Awesomeのチェックマーク*/
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	color: var(--accent-color);	/*マークの色。theme.cssのaccent-colorを読み込みます。*/
}


/*map（「アクセス」ページの地図）
---------------------------------------------------------------------------*/
.map {
	margin-bottom: 2rem;
	background: var(--light-color);	/*地図が読み込まれるまでの背景色。theme.cssのlight-colorを読み込みます。*/
}
.map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;	/*地図の縦横比*/
}

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

	.map iframe {
		aspect-ratio: 1 / 1;
	}

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


/*狭い幅（フォームなどで使用）
---------------------------------------------------------------------------*/
.narrow {
	max-width: 900px;	/*最大幅。お好みで。*/
	margin-inline: auto;	/*中央に配置*/
}


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

/*フッターボックス全体*/
footer {
	display: flex;	/*横並びにする*/
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem 3rem;	/*上下に2文字分、左右に3文字分のスペース*/
	padding: 4rem var(--content-space-l) 2rem;	/*上は4文字分、左右はtheme.cssのcontent-space-lを読み込み、下は2文字分の余白。*/
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*紺の背景の上では、フォーカス枠を白に*/
footer :focus-visible {
	outline-color: var(--primary-inverse-color);
}

/*連絡先などの情報*/
footer .info {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

/*ロゴ*/
footer .logo img {
	display: block;
	width: 300px;	/*ロゴの幅。お好みで。*/
}

/*電話番号*/
footer .tel a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-decoration: none;
	white-space: nowrap;
}

/*フッターメニュー*/
footer .menu {
	display: grid;
	gap: 0.8rem 3rem;
	grid-template-columns: repeat(2, auto);	/*2列*/
}
footer .menu a {
	display: inline-block;
	padding: 0.3rem 0;
	text-decoration: none;
	text-underline-offset: 0.3em;	/*下線と文字の間隔*/
}
footer .menu a:hover {
	text-decoration: underline;	/*マウスオン時に下線*/
}

/*Copyright部分*/
footer small {
	display: block;
	width: 100%;	/*幅を100%に*/
	padding-top: 2rem;
	border-top: 1px solid var(--primary-border-color);	/*上の線。theme.cssのprimary-border-colorを読み込みます。*/
	text-align: center;
	font-size: 0.85rem;
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;display: block;
	background: #492c19;	/*背景色*/
	color: #dfe5ec;		/*文字色*/
	text-align: right;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: 900;
	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: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*bg1-border-parts
---------------------------------------------------------------------------*/
.bg1-border-parts {
	border-top: 1px solid var(--bg-border-color);		/*上の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
	background-color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);		/*文字色。theme.cssのbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
	background-color: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}


/*bg1-primary-light
---------------------------------------------------------------------------*/
.bg1-primary-light-parts {
	background-color: var(--primary-light-color);		/*背景色。theme.cssのprimary-light-colorを読み込みます。*/
	color: var(--primary-light-inverse-color);	/*文字色。theme.cssのprimary-light-inverse-colorを読み込みます。*/
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
	background-color: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}


/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
	background-color: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}


/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
	padding-top: var(--content-space-v, var(--content-space-l));		/*ボックス内の上に空ける余白。sectionと同じ値。*/
	padding-bottom: var(--content-space-v, var(--content-space-l));	/*ボックス内の下に空ける余白。sectionと同じ値。*/
}


/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x-parts {
	--bleed-x: var(--content-space-l);	/*エイリアスに*/
	width: calc(100% + (var(--bleed-x) * 2));	/*section内容の幅＋両サイドpadding（対象要素の幅）*/
	margin-left: calc(var(--bleed-x) * -1);
	margin-right: calc(var(--bleed-x) * -1);
	max-width: none;
}


/*左右によせる専用
---------------------------------------------------------------------------*/
.bleed-left-parts {
	width: calc(100% + var(--content-space-l));
	margin-left: calc(-1 * var(--content-space-l));
}
.bleed-right-parts {
	width: calc(100% + var(--content-space-l));
	margin-right: calc(-1 * var(--content-space-l));
}


/*その他
---------------------------------------------------------------------------*/
.color-check, .color-check a {color: #d00000 !important;}	/*注意書きの赤。白い背景でも読める濃さにしています。*/
.look .color-check {color: #ffe14d !important;}	/*黒い背景の.lookの中では黄色に*/
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 100%;display: block;}
.wl {width: 100%;display: block;}
.mt0 {margin-top: 0px !important;}
.mb0 {margin-bottom: 0px !important;}
.mb1rem {margin-bottom: 1rem !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;}
.small {font-size: 0.8em;}
.large {font-size: 1.6em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.is-clip {overflow: hidden;}

/*大きな画面の場合*/
.large-screen .ws {width: 50%;}
.large-screen .sh {display: none;}
.large-screen .pc {display: block;}