@charset "utf-8";


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


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@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(13px, 0.29vw + 11.9px, 16px);
	overflow-x: visible;
}
body {
	margin: 0;padding:0;
	font-family: var(--base-font);
	-webkit-text-size-adjust: none;
	background: var(--bg-color);
	color: var(--bg-inverse-color);
	line-height: 2;
	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
---------------------------------------------------------------------------*/
section {
	padding: 0 var(--content-space-l);
	margin: var(--content-space-l) 0;
}


/*リンク
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;
}
a:hover {
	filter: brightness(1.1);
	text-decoration: none;
}


/*container
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.2s both;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


/*header
---------------------------------------------------------------------------*/
header {
    display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	height: 80px;
	padding-inline: var(--content-space-s);
	position: relative;
}
.home header {
    position: absolute;
    z-index: 10;	/*メイン画像のテキスト(z-index:2)より前面に。ヘッダーのメニューをクリックできるようにするため*/
    width: 100%;
}

header h1 {
	pointer-events: none;
	font-size: 10px;
	font-weight: normal;
	position: absolute;
	left: calc(var(--content-space-s) + 62px);
	bottom: 10px;
}
header .logo {margin: 0;flex-shrink: 0;display: flex;align-items: center;}
header .logo img {
	display: block;
	width: 200px;
}
header .btn a {
	box-shadow: none;
}
.home header .btn {
	display: none;
}


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


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

/*h2*/
main h2 {
	font-size: 1.8rem;
	line-height: 1.5;
	letter-spacing: 0.04em;
	font-weight: 700;
	margin-top: 0;
	color: var(--primary-color);	/*スレートで引き締め*/
}

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

	main h2 {
		font-size: 1.4rem;
	}

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


main h2.c {
	width: fit-content;
	margin-inline: auto;
}
main h2.large {
	font-size: 1.6rem;
	letter-spacing:normal;
}
main h2 span {
	display: inline-block;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	background: var(--bg-color);
	color: var(--accent-color);
	border: 1px solid var(--accent-color);	/*グリーンの縁取りピル*/
	padding: 0.25rem 1.1rem;
	border-radius: 100px;
	font-weight: 700;
	margin-bottom: 0.7rem;
}
main h2 b {
	color: var(--accent-color);
	font-weight: 700;
}
main p {
}

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

/*point
---------------------------------------------------------------------------*/
.point h4 {padding: 0;margin: 0;}
.point {
	padding: 1rem;
	border: 3px solid #ddd;
	border-radius: 4px;
	margin-inline: 1rem;
}
div.point {margin-inline: 0;}
.point h4 {
	font-size: 1.3rem;
	margin-bottom: 1rem;
}
.point *:last-child {
	margin-bottom: 0;
}

/*point2
---------------------------------------------------------------------------*/
.point2 {
	border: none;
	background: var(--accent-color);
	color: var(--accent-inverse-color);
}
.point2 .color1 {
	color: yellow !important;
}

/*point-light
---------------------------------------------------------------------------*/
.point-accent-light {
	border: none;
	background: var(--accent-light-color);
	color: var(--accent-light-inverse-color);
}

/*list1
---------------------------------------------------------------------------*/
.list1 * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
.list1.c2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {
	
	.list1 {
		grid-template-columns: minmax(0, 1fr);
	}

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


/*ボックス１個あたり*/
.list1 .list {
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*ボックス直下のブロック同士に空けるスペース。1文字分。*/
}
.list1.border .list {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 2rem;
	background: #fff;
}

/*テキストボックス*/
.list1 .list .text {
	flex: 1;
	display: flex;
	flex-direction: column;	/*テキストボックス内を縦積みに*/
	gap: 0.5rem;	/*見出しと説明文の間に空けるスペース。0.5文字分。*/
}

/*h4見出し*/
.list1 .list h4 {
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
}
.list1 .list h4 .siyou {
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	display: inline-block;
	border-radius: 3px;
	padding: 0.2rem 0.5rem;
	font-size: 0.85rem;
	margin-right: 0.5rem;
}

/*説明文*/
.list1 .list p {
	line-height: 1.8;
	font-size: 0.9rem;
	color:#666;
}

/*ボタン*/
.list1 .list .btn a {
	display: block;
	text-align: center;
}

.list1 .list .image {
	box-shadow: 0px 0px 1rem rgba(0,0,0,0.1);
	border-radius: 5px;
	overflow: hidden;
}

/*写真ではなくアイコンで使う場合*/
.list1 .list .image.icon {
	margin: 0 auto;
	text-align: center;
	width: 4rem;
	line-height: 4rem;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	box-shadow: none;
}
/*アクセントカラー版*/
.list1 .list .image.icon.accent {
	background: var(--accent-color);
	color: var(--accent-inverse-color);
}
/*アイコンサイズ。1.5倍。*/
.list1 .list .image.icon i {
	font-size: 1.5rem;
}

/*写真ではなく、番号で使う場合*/
.list1 .list .image.num {
	margin: 0 auto;
	text-align: center;
	background: var(--accent-light-color);
	color: var(--accent-color);
	font-size: 1.4rem;
	box-shadow: none;
	padding: 0.2rem 0.5rem;
	border-radius: 10px;
	font-weight: bold;
}


/*トップページのフレーム一覧*/
.list1.frame {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.list1.frame .list {
	gap: 0.5rem;
}

.list1.frame .list .image {
	box-shadow: none;
	border-radius: 0;
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {
	
	.list1.frame {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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


/*box
---------------------------------------------------------------------------*/
.box1 {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 2rem 2rem;
}
.box1 + .box1 {
	margin-top: 1rem;
}
.box1 *:first-child {
	margin-top: 0;
}

/*note
---------------------------------------------------------------------------*/
.note {
	background: #f5f6f7;
	border-left: 4px solid var(--primary-color);
	border-radius: 8px;
	padding: 14px 18px;
}
.note.small {
	font-size: 0.9em;
}
.note.accent {
	border-color: var(--accent-color);
	background: var(--accent-light-color);
}
.note.note2 {
	background: #fdf7ea;
	border-color: #e0a52d;
}
.note + .note {margin-top: 1.5rem;}
.bg1-primary-light-parts .note,
.bg1-accent-light-parts .note {
	background: #fff;
}


/*section幅狭め
---------------------------------------------------------------------------*/
#kakunin,#kiyaku,#pp,#contact {
	max-width: 1000px;
	margin-inline: auto;
}

/*kiyakuとpp
---------------------------------------------------------------------------*/
#kiyaku h3,#pp h3 {
	background: var(--primary-light-color);
	color: var(--primary-light-inverse-color);
	padding: 0.4rem 1rem;
	border-radius: 10px;
}
#kiyaku p,#pp p {
	padding-inline: 1rem;
}

/*#kakunin（kakunin.html）
---------------------------------------------------------------------------*/
#kakunin .note {
	padding: 2rem;
}
#kakunin .note h3{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:1.15rem;
	font-weight:700;
	margin:0 0 14px;
	line-height:1.4;
}
#kakunin .note h3::before{
	content:"";
	flex:0 0 auto;
	width:30px;
	height:30px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:1rem;
	font-weight:700;
	color:#fff;
	line-height:30px;
}
#kakunin .note.fit h3{ color:#177d5b; }
#kakunin .note.fit h3::before{ content:"\2713"; background:#1d9e75; }
#kakunin .note.wait h3{ color:#a9791a; }
#kakunin .note.wait h3::before{ content:"\21"; background:#e0a52d; }
#kakunin .note.check h3{ color:#3a4453; }
#kakunin .note.check h3::before{ content:"\21"; background:#4a5568; }

#kakunin .check-list{ list-style:none; padding:0; margin:0;}
#kakunin .check-list li{
	position:relative;
	padding: 0.2rem 0 0.2rem 1.2rem;
}
#kakunin .check-list li::before{
	content:"\2713";
	position:absolute;
	left:0; top:0.2rem;
	color:var(--accent-color);
	font-weight:700;
}
#kakunin .note .price-note{
	background:rgba(255,255,255,0.6);
	border-radius:8px;
	padding:12px 14px;
	margin-top:14px;
	font-size:.92rem;
}
#kakunin .note ul.plain{ list-style:none; padding:0; margin:0; }
#kakunin .note ul.plain li{
	position:relative;
	padding:7px 0 7px 22px;
	font-size:.97rem;
}
#kakunin .note ul.plain li::before{
	content:"";
	position:absolute;
	left:2px; top:15px;
	width:8px; height:8px;
	border-radius:50%;
	background:#c98f1e;
}
#kakunin .note.check ul.plain li::before{ background:#8792a3; }


/*#gyosya
---------------------------------------------------------------------------*/
#gyosya {
	background: var(--primary-light-color) url("../images/bg-gyosya.webp") no-repeat right top / 50%;
}
#gyosya .read {
	padding-right: 40%;
}

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

	#gyosya {
		background: var(--primary-light-color);
	}
	#gyosya .read {
		padding-right: 0;
	}

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

/*flex1
---------------------------------------------------------------------------*/
/*ブロック全体*/
.flex1 {
	display: flex;
	align-items: center;
	gap: 2rem;
}

/*逆配置*/
.flex1.reverse {
	flex-direction: row-reverse;
}

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

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

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


/*画像ブロック*/
.flex1 .image {
	width: 30%;	/*幅。お好みで。*/
	position: relative;
}
.flex1 .image.w40 {
	width: 40%;
}

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

	.flex1 .image {
		width: 100%;
	}

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


/*画像*/
.flex1 .image img {
	display: block;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
}

/*画像左下の装飾テキスト*/
.flex1 .image span {
	position: absolute;
	bottom: -0.6em;	/*画像に対しての下からの配置。マイナスがついているので本来と逆の方向に。*/
	left: -0.4em;	/*画像に対しての左からの配置。マイナスがついているので本来と逆の方向に。*/
	font-size: clamp(2rem, 6vw, 5rem);	/* 画面幅で滑らかに伸縮（最小2rem〜最大5rem） */
	line-height: 1;
	opacity: 0.1;	/*色を10%だけ出す。お好みで。*/
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
}

/*テキストブロック*/
.flex1 .text {
	flex: 1;
}
.flex1 .text .types span {
	display: inline-block;
	background: var(--accent-light-color);
	color: var(--accent-color);
	border: 1px solid var(--accent-color);;
	border-radius: 999px;
	margin: 1px 2px;
	padding: 0 0.5rem;
	font-size: 0.7rem;
}


/*FAQ
---------------------------------------------------------------------------*/
.faq h3.faq-toggle{cursor:pointer;position:relative;padding:.7em 2.4em .7em .9em;margin:10px 0 0;background:#f5f6f7;border:1px solid #e6e8eb;border-radius:8px;transition:background .15s}
.faq h3.faq-toggle:hover{background:#eef0f2}
.faq h3.faq-toggle::after{content:"＋";position:absolute;right:1em;top:50%;transform:translateY(-50%);color:#1d9e75;font-weight:bold;font-size:1.1em;line-height:1}
.faq h3.faq-toggle.open{background:#eff8f2;border-color:#bfe5d3}
.faq h3.faq-toggle.open::after{content:"−"}


/*bg-image1（フッターの上のブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.bg-image1 {
	display: flex;
	gap: 1rem;
	margin-inline: calc(-1 * var(--content-space-l));
	background: var(--accent-light-color);
}

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

	.bg-image1 {
		flex-direction: column;	/*縦積みに*/
		padding: var(--content-space-l);
	}

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


/*画像ブロック*/
.bg-image1 .image {
	width: 50%;	/*幅。お好みで。*/
	position: relative;
}

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

	.bg-image1 .image {
		width: 100%;
		position: static;
	}

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


/*画像*/
.bg-image1 .image img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mask-image: linear-gradient(to right, transparent, black 50%);/*グラデーションマスク。くっきり画像を出したいなら、この行と、下の１行をまとめて削除。*/
	-webkit-mask-image: linear-gradient(to right, transparent, black 50%);
}

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

	.bg-image1 .image img {
		display: none;
	}
	
	}/*追加指定ここまで*/


/*テキストブロック*/
.bg-image1 .text {
	flex: 1;
	padding: 5rem 2rem 4rem var(--content-space-l);	/*テキストの余白。上に5文字分、右に2文字分、下に4文字分、左はtheme.cssのcontent-space-lを読み込みます。*/
}

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

	.bg-image1 .text {
		padding: 0;
	}

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


/*ボタンブロック*/
.bg-image1 .btn-container p {margin: 0;padding: 0;}
.bg-image1 .btn-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;		/*2個以上ボタンを並べた場合の、間に空けるスペース。*/
}


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

/*日付*/
dl.news dt {
	display: flex;
}

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

	dl.news {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);	/*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
		gap: 0 2rem;	/*2remが、日付とテキストとの間に空けるスペース。お好みで。*/
		align-items: start;
	}

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


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

/*フッターボックス全体（1カラム）*/
footer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3rem;			/*footer直下のボックスの間に空けるスペース。２文字分。*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	padding: var(--content-space-s);	/*ボックス内の余白。theme.cssのcontent-space-sを読み込みます。*/
	border-top: 1px solid var(--bg-border-color);	/*上の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}

/*ロゴの最大幅*/
footer .logo {
	max-width: 150px;
}

/*footer内アイコンの右マージン（電話アイコン、メールアイコン等）*/
footer i {
	margin-right: 0.5rem;
}

/*footer内の各ブロック共通レイアウト（縦並び）*/
footer > div {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/*フッターメニュー*/
footer .menu {
	flex-direction: row;	/*縦並びから横並びに上書き*/
	gap: 3vw;	/*中身（ulメニュー等）同士の間に空けるスペース。3%。*/
}

/*メニューの見出し*/
footer .title {
	font-weight: bold;
	margin-bottom: 0.5em;
}

/*Copyright部分（常に全カラムまたいで中央配置）*/
footer small {
	width: 100%;
	display: block;
	text-align: center;
	font-size: 0.8rem;
}



/*ボタン
---------------------------------------------------------------------------*/
/*ボタンの色バリエーション（class名を足して使い分け）
  ・.btn         … 緑（メインCTA。一番目立たせたいボタン）
  ・.btn.dark    … 濃紺（別クラスで呼び出し）　例）<p class="btn dark"><a href="#">…</a></p>
  ・.btn.inverse … 白地×濃紺の縁取り（控えめボタン）
  ・.btn.accent  … 緑（デフォルトと同じ。緑だと明示したい時用）
---------------------------------------------------------------------------*/
.btn a {
	display: inline-flex;		/*文字とSVG矢印を横並びにする*/
	align-items: center;		/*縦位置を中央に揃える*/
	text-decoration: none;
	background: var(--accent-color);		/*背景色＝緑。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);		/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
	border: 1px solid var(--accent-color);	/*枠線＝緑*/
	padding: 0.5rem 1.6rem;	/*上下に0.5文字分、左右に1.6文字分の余白*/
	border-radius: 10px;	/*角を丸く（参考ページの雰囲気）*/
	font-weight: bold;		/*太字に*/
	box-shadow: 0 4px 14px rgba(45,55,72,0.18);	/*やわらかい影*/
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
td .btn a {
	display: block;
}

/*デフォルト（緑）のマウスオン：少し濃い緑＋浮き上がり*/
.btn a:hover {
	filter: none;	/*全体のa:hover（明るくする指定）を打ち消し、下の色をそのまま出す*/
	background: var(--accent-hover-color);	/*少し明るい緑。theme.cssのaccent-hover-colorを読み込みます。*/
	border-color: var(--accent-hover-color);
	color: var(--accent-inverse-color);
	transform: translateY(-2px);
	box-shadow: 0 7px 20px rgba(29,158,117,0.3);
}

/*白の控えめボタン（inverse）：白地×濃紺の縁取り*/
.btn.inverse a {
	background: var(--primary-inverse-color);	/*白*/
	color: var(--primary-color);				/*濃紺の文字*/
	border: 1px solid var(--primary-color);		/*濃紺の縁取り*/
}
/*inverseのマウスオン：濃紺で塗りつぶし*/
.btn.inverse a:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--primary-inverse-color);
	box-shadow: 0 7px 20px rgba(45,55,72,0.28);
}

/*濃紺ボタン（dark）：class="btn dark" で呼び出し*/
.btn.dark a {
	background: var(--primary-color);		/*濃紺*/
	color: var(--primary-inverse-color);	/*白の文字*/
	border: 1px solid var(--primary-color);
}
/*darkのマウスオン：少し明るい濃紺＋浮き上がり*/
.btn.dark a:hover {
	background: #3b4a5e;		/*少し明るい濃紺*/
	border-color: #3b4a5e;
	color: var(--primary-inverse-color);
	box-shadow: 0 7px 20px rgba(45,55,72,0.28);
}

/*緑ボタン（accent）：デフォルトと同じ緑。明示したい時用*/
.btn.accent a {
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	border: 1px solid var(--accent-color);
}

/*「→」のみのボタン*/
.btn-arrow a {
	display: block;text-decoration: none;
	padding-right: 0.5rem;
	color: var(--primary-color);	/*矢印の色。theme.cssのprimary-colorを読み込みます。*/
}

/*矢印アイコン（SVG・共通）*/
.arrow {
	display: inline-block;
	width: 2em;					/*矢印ブロック全体の長さ。文字サイズに連動*/
	height: 0.5em;				/*矢印の高さ*/
	vertical-align: middle;
	fill: none;
	stroke: currentColor;		/*親の文字色を継ぐ*/
	stroke-width: 1;			/*線の太さ。明朝・細字に合わせて細め*/
	stroke-linecap: square;
	stroke-linejoin: miter;
	overflow: visible;
	transition: transform 0.35s ease;
}

/*マウスオン時に矢印が右に動く*/
a:hover .arrow {
	transform: translateX(6px);
}


/*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%;	/*円形にする*/
}


/*bg1-border-parts
---------------------------------------------------------------------------*/
.bg1-border-parts {
	border-top: 1px solid var(--bg-border-color);
	border-bottom: 1px solid var(--bg-border-color);
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
	background: var(--bg-inverse-color);
	color: var(--bg-color);
}

/*bg1-primary-light-parts
---------------------------------------------------------------------------*/
.bg1-primary-light-parts {
	background: var(--primary-light-color);
	color: var(--primary-light-inverse-color);
}

/*bg1-accent-light-parts
---------------------------------------------------------------------------*/
.bg1-accent-light-parts {
	background: var(--accent-light-color);
	color: var(--accent-light-inverse-color);
}

/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
	padding-top: var(--content-space-l);
	padding-bottom: var(--content-space-l);
}

/*背景色が続く場合に隙間を空けない*/
.bg-parts + .bg-parts {
	margin-top: calc(-1 * var(--content-space-l)) !important;
}


/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x-parts {
	--bleed-x: var(--content-space-l);
	width: calc(100% + (var(--bleed-x) * 2));
	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));
}


/*flex2（「よくあるご質問」ブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.flex2 {
	display: flex;	/*横並びに*/
	align-items: flex-start;	/*上揃え*/
	justify-content: space-between;
	gap: 4rem;
}

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

	/*ブロック全体を縦積みに*/
	.flex2 {
		flex-direction: column;
		gap: 1rem;
	}

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


/*テキストブロック*/
.flex2 .text {
	flex: 1;
	min-width: 0;
}

/*FAQブロック*/
.flex2 div:last-child {
	width: 70%;	/*幅。お好みで。*/
}

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

	.flex2 div:last-child {
		width: 100%;
	}

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


/*openclose（「よくあるご質問」ブロック）
---------------------------------------------------------------------------*/
/*質問*/
.openclose {
	position: relative;
	padding: 1.2rem 3rem 1.2rem 1.2rem;	/*上下に1.2文字分、右に3文字分（＋アイコン用のスペース）、左に1.2文字分の余白。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下に薄い区切り線。色はtheme.cssのbg-border-colorを読み込みます。*/
	cursor: pointer;	/*マウスカーソルを指マークに*/
	transition: background 0.2s;	/*背景色の変化を0.2秒かけて*/
	user-select: none;	/*テキスト選択を無効にする*/
	font-weight: bold;	/*太字*/
}

/*1つ目の質問の上にも線を入れる（一番上のフチを揃える）*/
.openclose:first-of-type {
	border-top: 1px solid var(--bg-border-color);
}

/*質問のマウスオン時*/
.openclose:hover {
	background: var(--primary-light-color);
}

/*右端の＋アイコン：横線（::before）*/
.openclose::before {
	content: "";
	position: absolute;
	right: 1.2rem;	/*右からの位置。1.2文字分。*/
	top: 50%;
	width: 14px;	/*横線の長さ*/
	height: 2px;	/*横線の太さ*/
	background: var(--primary-color);	/*線の色。theme.cssのprimary-colorを読み込みます。*/
	transform: translateY(-50%);
	transition: transform 0.3s, background 0.3s;	/*回転と色変化を0.3秒かけてなめらかに*/
}

/*右端の＋アイコン：縦線（::after）*/
.openclose::after {
	content: "";
	position: absolute;
	right: calc(1.2rem + 6px);	/*横線の真ん中に縦線が重なる位置（横線14px − 縦線2px の半分=6px）*/
	top: 50%;
	width: 2px;	/*縦線の太さ*/
	height: 14px;	/*縦線の長さ*/
	background: var(--primary-color);	/*線の色*/
	transform: translateY(-50%);
	transition: transform 0.3s, background 0.3s;
}

/*開いている時（両方の線を45度回転して＋を×に変化）*/
.openclose.active::before,
.openclose.active::after {
	transform: translateY(-50%) rotate(45deg);
	background: #ff0000;	/*クリック時の色*/
}

/*回答*/
.openclose + dd {
	padding: 1rem 1.2rem 1.5rem;	/*上に1文字分、左右に1.2文字分、下に1.5文字分の余白。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下に薄い区切り線。*/
	background: #fff;	/*背景を白に*/
	font-size: 0.95rem;	/*文字サイズ95%*/
	line-height: 1.8;	/*行間*/
}

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

	/*質問の余白を狭く*/
	.openclose {
		padding: 1rem 2.5rem 1rem 1rem;	/*上下に1文字分、右に2.5文字分、左に1文字分。*/
	}

	/*＋アイコンを少し小さく*/
	.openclose::before {
		right: 1rem;	/*右からの位置。1文字分。*/
		width: 12px;	/*横線の長さ*/
	}
	.openclose::after {
		right: calc(1rem + 5px);	/*横線の真ん中に合わせる（横線12px − 縦線2px の半分=5px）*/
		height: 12px;	/*縦線の長さ*/
	}

	/*回答の余白を狭く*/
	.openclose + dd {
		padding: 0.8rem 1rem 1.2rem;
	}

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



/*ta1
---------------------------------------------------------------------------*/
.ta1 caption {
	font-weight: bold;
	padding: 0.2rem 1rem;
	margin-bottom: 1rem;
	background: #eee;
	border-radius: 5px;
}
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;
}
.ta1 th, .ta1 td {
	padding: 1rem;
	word-break: break-all;
	border: 1px solid var(--bg-border-color);
}
.ta1 th {
	width: 13rem;
	background: #fafafa;
}


/*テーブル（ta-yoko3-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-yoko3-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: var(--bg-inverse-color);		/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}

/*テーブルブロック設定*/
.ta-yoko3-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th、tdの共通設定*/
.ta-yoko3-parts th, .ta-yoko3-parts td {
	padding: 0.6rem;
	word-break: break-all;
	border: 1px solid var(--bg-border-color);
	text-align: center;
}

/*１列目のth*/
.ta-yoko3-parts th {
	background: var(--primary-light-color);
	text-align: left;
}

/*１行目のth*/
.ta-yoko3-parts tr:first-child th {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	text-align: center;
	line-height: 1.5;
	font-weight: 500;
}
.ta-yoko3-parts tr:first-child th .large {
	color: #ffc149;
	font-family: var(--accent-font), var(--base-font);
}

.ta-yoko3-parts .maru {
	color: #1d9e75;       /* 緑 */
	font-size: 1.2em;     /* ○×より少し大きく */
}
.ta-yoko3-parts .batsu {
	color: #c4c4c4;       /* 薄いグレー */
	font-size: 1.2em;
	opacity: 1;           /* 元の0.4は外す。グレー自体が控えめなので不要 */
}

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

	/*横スクロール*/
	.ta-yoko3-scroll-parts {
		overflow-x: auto;					
		-webkit-overflow-scrolling: touch;	/*iOSでなめらかに動く*/
	}

	.ta-yoko3-parts {
		min-width: 600px;	/*横スクロールバーを出す基準。適当に調整してみて下さい。*/
	}

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


/*marker（マーカー風スタイル）
---------------------------------------------------------------------------*/
.marker {
	background: linear-gradient(transparent 75%, #fff337 75%);
}


/*オープニング動画
---------------------------------------------------------------------------*/
.home .video {
	display: block;		/*ブロック要素にする。※これが無いと中央寄せできません*/
	margin: 0 auto;		/*左右autoで中央寄せ*/
	width: 100%;		/*幅は親要素いっぱいに（下のmax-widthまで大きくなる）*/
	max-width: 700px;	/*最大幅。お好みで*/
	height: auto;		/*動画の縦横比を保つ*/
	/*border: 1px solid #999;*/
	box-shadow: 0px 0px 30px rgba(0,0,0,0.15);
	border-radius: 5px;
	overflow: hidden;
}


/*その他
---------------------------------------------------------------------------*/
.color-check, .color-check a {color: #ff0000 !important;}
.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;}
.mb2rem {margin-bottom: 2rem !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.85em;}
.large {font-size: 1.6em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.is-clip {overflow: hidden;}
.border1 {border: 1px solid #ddd;}
.li-mb2rem li {margin-bottom: 2rem;}
.li-mb1rem li {margin-bottom: 1rem;}
.li-mb0 li {margin-bottom: 0;}

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