@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@400;600;800&family=Zen+Old+Mincho&display=swap');
/* ------------------------------
 * 共通変数
 * ------------------------------ */
:root {
	/* ブランドカラー */
	/* 基準になるブランドカラー */
	--color-brand: #5B5652;
	/* ブランドカラーを黒と混ぜて濃くした色 */
	--color-brand-deep: color-mix(in srgb, var(--color-brand) 45%, var(--color-black));
	/* ブランドカラーを白と大きく混ぜてかなり薄くした色。背景やホバー用 */
	--color-brand-pale: color-mix(in srgb, var(--color-brand) 25%, var(--color-white));
	/* ブランドカラーを白と少し混ぜてやわらげた色。補助見出しや小要素用 */
	--color-brand-soft: color-mix(in srgb, var(--color-brand) 70%, var(--color-white));
	/* 強調用のアクセントカラー */
	--color-accent: #E74C3C;
	/* 薄い背景用カラー */
	--color-bg-highlight: #f3f3f3;

	/* ベースカラー */
	--color-white: #FFFFFF;
	--color-black: #000000;
	--color-text: #1B1B1B;
	--color-text-muted: #444444;
	--color-text-subtle: #333333;
	--color-border: #CCCCCC;
	--color-bg-soft: #F3F3F3;
	--color-bg-softer: #F1F7FA;
	--color-bg-footer: #EEEEEE;
	/* ブランド見出し用に少し濃くした文字色 */
	--color-brand-heading: color-mix(in srgb, var(--color-brand) 60%, var(--color-black));
	/* ブランドカラーをごく薄くした背景色 */
	--color-brand-surface: color-mix(in srgb, var(--color-brand) 8%, var(--color-white));
	/* ブランドカラーを薄くした背景ストライプ色 */
	--color-brand-surface-alt: color-mix(in srgb, var(--color-brand) 12%, var(--color-white));
	/* 背景画像の上に重ねる白パネル */
	--color-surface-overlay: rgba(255, 255, 255, 0.8);
	/* さらに薄い重なり用パネル */
	--color-surface-overlay-soft: rgba(255, 255, 255, 0.5);
	/* 画像やカード上に重ねる暗いマスク色 */
	--color-surface-mask: rgb(0 0 0 / .4);
	/* 動画セクション用の暗い面色 */
	--color-surface-video: #222222;
	/* 補足テキストより強い案内文用の文字色 */
	--color-content-strong: #111111;
	--color-neutral-bg: #F3F4F5;
	/* フロー内の強調文字色 */
	--color-flow-emphasis: #FF9999;
	/* フロー線や接続線の色 */
	--color-flow-connector: #C3C3C3;
	--color-flow-text: #454545;

	/* 個別パーツ用カラー */
	/* フロー番号やステップ見出し用の色 */
	--color-flow-step: #FFF;
	--color-gallery-label: #1F2E61;
	--color-contact-accent: #71CBCE;
	--color-contact-button: #FEC62F;
	--color-contact-button-hover: #F5BD25;
	--color-ranking-edge: #FF7700;
	--color-ranking-main: #FF9900;
	--color-ranking-shadow: #CC3300;

	/* タイポグラフィ */
	--font-family-base: "Open Sans", "Noto Sans JP", sans-serif;
	--font-family-sp: sans-serif;
	--font-family-icon: "Font Awesome 5 Free";
	--font-size-base: 16px;
	--font-size-sp: 14px;

	/* 余白 */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 10px;
	--space-md: 15px;
	--space-lg: 20px;
	--space-xl: 30px;
	--space-2xl: 40px;
	--space-3xl: 60px;
	--space-4xl: 80px;


	/* 角丸・影 */
	--radius-none: 0;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-round: 50%;
	--radius-pill: 100vh;
	--shadow-floating: 8px 8px 10px -10px rgba(0, 0, 0, 0.5);
	--transition-default: all 0.3s ease;
}

/* ------------------------------
 * 余白ユーティリティ
 * ------------------------------ */
/* サイズ: 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl */
/* マージン */
.mt-2xs { margin-top: var(--space-2xs) !important; }
.mt-xs  { margin-top: var(--space-xs)  !important; }
.mt-sm  { margin-top: var(--space-sm)  !important; }
.mt-md  { margin-top: var(--space-md)  !important; }
.mt-lg  { margin-top: var(--space-lg)  !important; }
.mt-xl  { margin-top: var(--space-xl)  !important; }
.mt-2xl { margin-top: var(--space-2xl) !important; }
.mt-3xl { margin-top: var(--space-3xl) !important; }
.mt-4xl { margin-top: var(--space-4xl) !important; }

.mb-2xs { margin-bottom: var(--space-2xs) !important; }
.mb-xs  { margin-bottom: var(--space-xs)  !important; }
.mb-sm  { margin-bottom: var(--space-sm)  !important; }
.mb-md  { margin-bottom: var(--space-md)  !important; }
.mb-lg  { margin-bottom: var(--space-lg)  !important; }
.mb-xl  { margin-bottom: var(--space-xl)  !important; }
.mb-2xl { margin-bottom: var(--space-2xl) !important; }
.mb-3xl { margin-bottom: var(--space-3xl) !important; }
.mb-4xl { margin-bottom: var(--space-4xl) !important; }

.ml-2xs { margin-left: var(--space-2xs) !important; }
.ml-xs  { margin-left: var(--space-xs)  !important; }
.ml-sm  { margin-left: var(--space-sm)  !important; }
.ml-md  { margin-left: var(--space-md)  !important; }
.ml-lg  { margin-left: var(--space-lg)  !important; }
.ml-xl  { margin-left: var(--space-xl)  !important; }
.ml-2xl { margin-left: var(--space-2xl) !important; }
.ml-3xl { margin-left: var(--space-3xl) !important; }
.ml-4xl { margin-left: var(--space-4xl) !important; }

.mr-2xs { margin-right: var(--space-2xs) !important; }
.mr-xs  { margin-right: var(--space-xs)  !important; }
.mr-sm  { margin-right: var(--space-sm)  !important; }
.mr-md  { margin-right: var(--space-md)  !important; }
.mr-lg  { margin-right: var(--space-lg)  !important; }
.mr-xl  { margin-right: var(--space-xl)  !important; }
.mr-2xl { margin-right: var(--space-2xl) !important; }
.mr-3xl { margin-right: var(--space-3xl) !important; }
.mr-4xl { margin-right: var(--space-4xl) !important; }

.mx-2xs { margin-left: var(--space-2xs) !important; margin-right: var(--space-2xs) !important; }
.mx-xs  { margin-left: var(--space-xs)  !important; margin-right: var(--space-xs)  !important; }
.mx-sm  { margin-left: var(--space-sm)  !important; margin-right: var(--space-sm)  !important; }
.mx-md  { margin-left: var(--space-md)  !important; margin-right: var(--space-md)  !important; }
.mx-lg  { margin-left: var(--space-lg)  !important; margin-right: var(--space-lg)  !important; }
.mx-xl  { margin-left: var(--space-xl)  !important; margin-right: var(--space-xl)  !important; }
.mx-2xl { margin-left: var(--space-2xl) !important; margin-right: var(--space-2xl) !important; }
.mx-3xl { margin-left: var(--space-3xl) !important; margin-right: var(--space-3xl) !important; }
.mx-4xl { margin-left: var(--space-4xl) !important; margin-right: var(--space-4xl) !important; }

.my-2xs { margin-top: var(--space-2xs) !important; margin-bottom: var(--space-2xs) !important; }
.my-xs  { margin-top: var(--space-xs)  !important; margin-bottom: var(--space-xs)  !important; }
.my-sm  { margin-top: var(--space-sm)  !important; margin-bottom: var(--space-sm)  !important; }
.my-md  { margin-top: var(--space-md)  !important; margin-bottom: var(--space-md)  !important; }
.my-lg  { margin-top: var(--space-lg)  !important; margin-bottom: var(--space-lg)  !important; }
.my-xl  { margin-top: var(--space-xl)  !important; margin-bottom: var(--space-xl)  !important; }
.my-2xl { margin-top: var(--space-2xl) !important; margin-bottom: var(--space-2xl) !important; }
.my-3xl { margin-top: var(--space-3xl) !important; margin-bottom: var(--space-3xl) !important; }
.my-4xl { margin-top: var(--space-4xl) !important; margin-bottom: var(--space-4xl) !important; }

.m-2xs { margin: var(--space-2xs) !important; }
.m-xs  { margin: var(--space-xs)  !important; }
.m-sm  { margin: var(--space-sm)  !important; }
.m-md  { margin: var(--space-md)  !important; }
.m-lg  { margin: var(--space-lg)  !important; }
.m-xl  { margin: var(--space-xl)  !important; }
.m-2xl { margin: var(--space-2xl) !important; }
.m-3xl { margin: var(--space-3xl) !important; }
.m-4xl { margin: var(--space-4xl) !important; }

/* パディング */
.pt-2xs { padding-top: var(--space-2xs) !important; }
.pt-xs  { padding-top: var(--space-xs)  !important; }
.pt-sm  { padding-top: var(--space-sm)  !important; }
.pt-md  { padding-top: var(--space-md)  !important; }
.pt-lg  { padding-top: var(--space-lg)  !important; }
.pt-xl  { padding-top: var(--space-xl)  !important; }
.pt-2xl { padding-top: var(--space-2xl) !important; }
.pt-3xl { padding-top: var(--space-3xl) !important; }
.pt-4xl { padding-top: var(--space-4xl) !important; }

.pb-2xs { padding-bottom: var(--space-2xs) !important; }
.pb-xs  { padding-bottom: var(--space-xs)  !important; }
.pb-sm  { padding-bottom: var(--space-sm)  !important; }
.pb-md  { padding-bottom: var(--space-md)  !important; }
.pb-lg  { padding-bottom: var(--space-lg)  !important; }
.pb-xl  { padding-bottom: var(--space-xl)  !important; }
.pb-2xl { padding-bottom: var(--space-2xl) !important; }
.pb-3xl { padding-bottom: var(--space-3xl) !important; }
.pb-4xl { padding-bottom: var(--space-4xl) !important; }

.pl-2xs { padding-left: var(--space-2xs) !important; }
.pl-xs  { padding-left: var(--space-xs)  !important; }
.pl-sm  { padding-left: var(--space-sm)  !important; }
.pl-md  { padding-left: var(--space-md)  !important; }
.pl-lg  { padding-left: var(--space-lg)  !important; }
.pl-xl  { padding-left: var(--space-xl)  !important; }
.pl-2xl { padding-left: var(--space-2xl) !important; }
.pl-3xl { padding-left: var(--space-3xl) !important; }
.pl-4xl { padding-left: var(--space-4xl) !important; }

.pr-2xs { padding-right: var(--space-2xs) !important; }
.pr-xs  { padding-right: var(--space-xs)  !important; }
.pr-sm  { padding-right: var(--space-sm)  !important; }
.pr-md  { padding-right: var(--space-md)  !important; }
.pr-lg  { padding-right: var(--space-lg)  !important; }
.pr-xl  { padding-right: var(--space-xl)  !important; }
.pr-2xl { padding-right: var(--space-2xl) !important; }
.pr-3xl { padding-right: var(--space-3xl) !important; }
.pr-4xl { padding-right: var(--space-4xl) !important; }

.px-2xs { padding-left: var(--space-2xs) !important; padding-right: var(--space-2xs) !important; }
.px-xs  { padding-left: var(--space-xs)  !important; padding-right: var(--space-xs)  !important; }
.px-sm  { padding-left: var(--space-sm)  !important; padding-right: var(--space-sm)  !important; }
.px-md  { padding-left: var(--space-md)  !important; padding-right: var(--space-md)  !important; }
.px-lg  { padding-left: var(--space-lg)  !important; padding-right: var(--space-lg)  !important; }
.px-xl  { padding-left: var(--space-xl)  !important; padding-right: var(--space-xl)  !important; }
.px-2xl { padding-left: var(--space-2xl) !important; padding-right: var(--space-2xl) !important; }
.px-3xl { padding-left: var(--space-3xl) !important; padding-right: var(--space-3xl) !important; }
.px-4xl { padding-left: var(--space-4xl) !important; padding-right: var(--space-4xl) !important; }

.py-2xs { padding-top: var(--space-2xs) !important; padding-bottom: var(--space-2xs) !important; }
.py-xs  { padding-top: var(--space-xs)  !important; padding-bottom: var(--space-xs)  !important; }
.py-sm  { padding-top: var(--space-sm)  !important; padding-bottom: var(--space-sm)  !important; }
.py-md  { padding-top: var(--space-md)  !important; padding-bottom: var(--space-md)  !important; }
.py-lg  { padding-top: var(--space-lg)  !important; padding-bottom: var(--space-lg)  !important; }
.py-xl  { padding-top: var(--space-xl)  !important; padding-bottom: var(--space-xl)  !important; }
.py-2xl { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }
.py-3xl { padding-top: var(--space-3xl) !important; padding-bottom: var(--space-3xl) !important; }
.py-4xl { padding-top: var(--space-4xl) !important; padding-bottom: var(--space-4xl) !important; }

.p-2xs { padding: var(--space-2xs) !important; }
.p-xs  { padding: var(--space-xs)  !important; }
.p-sm  { padding: var(--space-sm)  !important; }
.p-md  { padding: var(--space-md)  !important; }
.p-lg  { padding: var(--space-lg)  !important; }
.p-xl  { padding: var(--space-xl)  !important; }
.p-2xl { padding: var(--space-2xl) !important; }
.p-3xl { padding: var(--space-3xl) !important; }
.p-4xl { padding: var(--space-4xl) !important; }

/* ------------------------------
 * 基本設定
 * ------------------------------ */
body {
	color: var(--color-text);
	font-weight: normal;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: 1.5;
}

a.btn {
	padding: var(--space-xs) 2em;
}
#mainTopics {
    background: none;
}
ul.topics li {
	background: var(--color-white);
	border: solid 1px var(--color-border);
	border-radius: var(--radius-none);
}
#listTopics ul.topics li {
    border-bottom-style: solid;
}
#pankuz p {
    margin: 16px 0;
    text-align: left;
    font-size: 0.78em;
    line-height: 1;
}
.article,
.gallery {
	margin: 0 auto var(--space-3xl);

	& h3 a {
		font-weight: bold;
		color: #FFF;
	}

	&.zero_margin {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}

.article table.normalTbl {
	font-size: 1em;
}

.article table.normalTbl th {
	vertical-align: top;
}

.article table.normalTbl th{
	text-align: center;
}
.side table.normalTbl {
	width: 100%;
	margin: 0 auto;

	& th,
	& td {
		border: solid 1px var(--color-border);
		padding: var(--space-2xs) 18px;
	}

	& th {
		font-weight: bold;
		background: var(--color-bg-soft);
		width: 30%;
	}
}

.side_logo {
	text-align: center;
	max-width: 400px;
	margin: 0 auto var(--space-lg) auto;
}

.side_logo img {
	max-width: 100%;
}

div#topMenu {
    /* border-bottom: solid 3px var(--color-brand); */
	border-bottom: none;
}
#topMenu_outer .topMenu li a {
	font-weight: normal;
}

@media only screen and (max-width: 480px) {
	body {
		font-size: var(--font-size-sp);
		font-family: var(--font-family-sp);
	}
}

.article.contact {
	padding: 0 !important;
}

.article.contact .image {
	margin-bottom: 0 !important;
}

.article.mini .image {
	width: 200px;
}

#mainArticles {
	& table.contactTable {
		& tr th {
			font-weight: normal;
		}

		& input.button,
		& input[type="button"] {
			border-radius: var(--radius-sm);
		}
	}
}


#mainArticles .envelope {
	background: var(--color-bg-softer);
}

.article.col2,
.article.col3,
.article.col4,
.article.col5 {
	margin: 0 0 var(--space-2xl);
}


/* ------------------------------
 * こだわりセクション
 * ------------------------------ */
.mainArticles .article.max.comm {
	& .article_right .image,
	& .article_left .image {
		width: 64%;
		max-width: 64%;

		& img {
			width: 100%;
		}
	}
}

.article.max.comm {
	margin-bottom: var(--space-xs);
	/* background: #1b1b1b; */
	padding: 0;

	& .article_left {
		padding-right: var(--space-2xl);
	}

	& .article_right {
		padding-left: var(--space-2xl);
	}
}

@media only screen and (max-width: 600px) {
	.article.max.comm {
		& .article_left,
		& .article_right {
			padding: 0;
		}
	}

	.mainArticles .article.max.comm {
		& .article_right .image,
		& .article_left .image {
			width: 100%;
			max-width: 100%;
		}

		padding-left: 4%;
		padding-right: 4%;
	}
}

/* ------------------------------
 * リスト
 * ------------------------------ */
ul.check {
	& li {
		font-size: 1em;
		font-weight: normal;

		& strong {
			font-size: 120%;
		}
	}
}

ul.checkList {
	overflow: hidden;

	& li {
		padding-left: 37px;
		background: url(/materials/174633109678201.png);
		background-repeat: no-repeat;
		background-size: 24px;
		background-position: left top;
		font-size: 1.2rem;
		margin-bottom: 10px;
		padding-top: 0;
		padding-bottom: 20px;
		font-weight: bold;

		& span.content {
			font-size: 1rem;
			font-weight: normal;
			color: var(--color-text-muted);
		}
	}
}
ul.merit,
ul.subject {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	& li {
		flex-basis: 100%;
		padding: 1em .5em;
		background: var(--color-brand);
		border-radius: 2em;
		margin: .25em 0;
		color: var(--color-white);
		font-weight: bold;
		line-height: 1.25;
		text-align: center;
	}
}

ul.subject li {
	background: var(--color-brand-pale);
}

ul.omoi {
	margin-bottom: 10px;

	& li {
		position: relative;
		padding-left: 30px;
		font-size: 1.2em;
		border-bottom: solid 1px var(--color-accent);
		color: var(--color-accent);
		font-weight: bold;
		padding: 10px 10px 10px 30px;

		&:before {
			content: "";
			position: absolute;
			left: 0;
			top: 15px;
			width: 20px;
			height: 20px;
			border-radius: var(--radius-round);
			background: var(--color-brand);
			background: url(/materials/174938573335301.png) no-repeat center center;
			background-size: contain;
		}
	}
}


ul.faq {
	& li.qus,
	& li.ans {
		padding-left: 38px;

		&:before {
			margin: 0 6px 0 -38px;
		}
	}

	& li.qus::before {
		background-color: var(--color-brand-deep);
	}

	& li.ans::before {
		background-color: var(--color-brand-soft);
	}

	& li.qus::before,
	& li.ans::before {
		border-radius: var(--radius-none);
	}
}

ul.list01 {
	list-style-type: none;
	padding-left: 0;

	& li {
		position: relative;
		padding-left: 30px;
		margin-bottom: var(--space-sm);

		&:before {
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 20px;
			height: 20px;
			border-radius: var(--radius-round);
			background: var(--color-brand);
		}
	}
}

ul.list02 {
	list-style-type: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;

	& li {
		position: relative;
		padding-left: 30px;

		border: solid 2px var(--color-brand);
		border-radius: var(--radius-sm);
		padding: var(--space-sm);
		text-align: center;

		display: inline-block;

		background: var(--color-white);
	}
}
/* ------------------------------
 * フロー
 * ------------------------------ */
.articleFlow {
	border: solid 5px var(--color-brand);
	padding: 1.5em;
	position: relative;
}

.articleFlow:after {
	font-family: var(--font-family-icon);
	content: "\f078";
	font-weight: bold;
	font-size: 1.5em;
	position: absolute;
	bottom: -2em;
	left: calc(50% - .5em);
	color: var(--color-brand);
}

.articleFlow.last:after {
	content: none;
}

@media only screen and (max-width: 1024px) {
	.articleFlow {
		margin: 0 4% 40px;
	}
}

/* 旧フロー表現のメモ */
/* .article table.flowTbl {
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
	width: auto;
	list-style: none;
	border-left: 2px dotted #CCC;
	padding-left: 0;
}

.article table.flowTbl td {
	border: none;
	border-radius: 8px;
	display: block;
	height: auto;
	margin-bottom: 20px;
	padding: 5px;
	padding-left: 26px;
	position: relative;
}

.article table.flowTbl td:before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-brand);
	position: absolute;
	left: -6px;
	top: .75em;
}

.flowTbl td::after {
	content: "";
	width: .8em;
	height: 1px;
	background: var(--color-border);
	position: absolute;
	top: 1em;
	left: 4px;
} */
/* 
.flowTbl tr:last-child td {
	margin-bottom: 0;
}

.flowTbl tr td strong {
	display: inline-block;
	font-size: 1.15em;
	font-weight: bold;
	line-height: 1.25;
	margin-bottom: .5em;
	color: var(--color-flow-text);
} */


/* フロー表組み */
#contents {
	& table.flowTbl {
		border-collapse: collapse;
		border-spacing: 0;
		border: none;
		margin: 10px auto;
		width: 100%;
	}

	& .flowTbl {
        counter-reset: flow-step;
		& td {
            counter-increment: flow-step;
			border: 3px solid var(--color-brand);
			border-radius: unset;
			display: block;
			height: auto;
			margin-bottom: 56px;
			padding: 4%;
			position: relative;

			&::after {
				color: var(--color-brand);
				content: "▼";
				font-family: monospace;
				font-size: 48px;
				left: 0;
				right: 0;
				top: 100%;
				bottom: auto;
				position: absolute;
				text-align: center;
				transform: scaleY(0.5);
			}

			& strong {
				color: var(--color-flow-emphasis);
				display: block;
				font-size: 130%;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 0.1em;
				margin-bottom: 5px;
			}
		}

		& tr:last-child td {
			margin-bottom: 0;
			background: var(--color-white);

			&::after {
				display: none;
			}
		}

		& h4 {
			padding-top: 0;
			padding-left: 0;

			&::before {
				background: none;
				content: "STEP " counter(flow-step);
				display: inline-block;
				margin-right: .5em;
				font-weight: bold;
				color: var(--color-flow-step);
				width: unset;
                height: unset;
                background: var(--color-brand);
                position: unset;
				padding: var(--space-2xs) var(--space-sm);
                border-radius: unset;
			}
		}
	}
}




.flow_design05 {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flow05 {
	padding-left: 0;

	& > li {
		list-style-type: none;
		position: relative;
		padding-left: 70px;

		&:not(:last-child) {
			padding-bottom: 60px;

			&::before {
				content: '';
				background: var(--color-flow-connector);
				width: 4px;
				height: 100%;
				position: absolute;
				top: calc(50% - -30px);
				left: 19px;
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
			}
		}

		& .icon05 {
			width: 2em;
			height: 2em;
			line-height: 2em;
			text-align: center;
			border-radius: var(--radius-pill);
			display: inline-block;
			background: var(--color-flow-step);
			color: var(--color-white);
			position: absolute;
			left: 0;
		}

		& dl {
			& dt {
				font-size: 1.3em;
				font-weight: 600;
				color: var(--color-flow-step);
			}

			& dd {
				margin-left: 0;
			}
		}
	}
}

/* ------------------------------
 * ヘッダー
 * ------------------------------ */
#title h1 {
	background: url(/materials/177527767936401.png) left center no-repeat;
	background-size: contain;
	height: 90px;
    width: 400px;
}

h1 a {
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;
	display: block;
	height: inherit;
}
h1:hover {
    opacity: 0.8;
}
#title #title_outer {
	background: url(/materials/177613205699701.png) right center no-repeat;
	background-size: 350px;
}

@media only screen and (max-width: 800px) {
	#title h1 {
		width: 256px;
	}

	#title #title_outer {
		background-size: 256px;
	}
}

@media only screen and (max-width: 600px) {
	#title h1 {
		background-size: contain;
		padding-left: 0;
		margin-left: 4%;
		width: 220px;
		height: 56px;
	}

	#title #title_outer {
		background: none;
		justify-content: start;
	}

	.article table.normalTbl th/*,
	.article table.normalTbl td*/ {
		text-align: center;
	}

	.article table.normalTbl th {
		font-weight: bold;
	}
}



#slider .slick-slide {
	height: auto !important;
}

/* ------------------------------
 * 見出し
 * ------------------------------ */
#mainArticles h2,
#listTopics h2,
#mainTopics h2,
h2,
.article h3,
.gallery h3,
.freeHtml h3,
.article h4,
.article h5,
.article h6 {
	/* font-family: "Zen Old Mincho", serif;  */
	font-weight: bold;
	color: var(--color-brand-deep);
}
#mainArticles h2,
#listTopics h2,
#mainTopics h2,
h2 {
    font-size: 2em;
    font-weight: bold;
	padding: 4vw var(--space-lg);
    margin-bottom: 1em;
    line-height: 1.5;
	color: var(--color-brand-heading);
    background: none;
	margin-bottom: var(--space-lg);
}
h2,
#mainTopics h2,
#mainArticles .article h2,
.article h3,
.gallery h3,
.freeHtml h3 {
	margin: 0;
	font-weight: bold;
	font-size: 2em;
	line-height: 1.5;
}


#mainTopics h2 strong {
	font-size: 45%;
	font-weight: normal;
	display: inline-block;
	margin-top: 0.5em;
}

.article h3,
.gallery h3, .freeHtml h3,
#mainTopics h2
/* h2  */
{
	text-align: center;
    /* color: #2971a6; */
    font-size: 150%;
    word-break: break-all;
	/* border-top: solid 2px var(--color-brand);
    border-bottom: solid 2px var(--color-brand); */
	padding: 0.5em var(--space-lg);
	margin-bottom: var(--space-2xl);
	background: -webkit-repeating-linear-gradient(-45deg, var(--color-brand-surface), var(--color-brand-surface) 3px, var(--color-brand-surface-alt) 3px, var(--color-brand-surface-alt) 7px);
	background: repeating-linear-gradient(-45deg, var(--color-brand-surface), var(--color-brand-surface) 3px, var(--color-brand-surface-alt) 3px, var(--color-brand-surface-alt) 7px);

	background: var(--color-brand);
	color: var(--color-white);
	/* border-left: solid 10px var(--color-black);
	border-right: solid 10px var(--color-black); */

	position: relative;
}
.freeHtml h3{
	background: none;
}
article h3:before,
.article h3:before,
.gallery h3:before,
#mainTopics h2:before {
	display: none;
    content: "";
    height: 100%;
    width: 1px;
	background: var(--color-white);
    position: absolute;
    left: 8px;
    top: 0;
}
article h3:after,
.article h3:after,
.gallery h3:after,
#mainTopics h2:after {
	display: none;
    content: "";
    position: absolute;
    right: 8px;
	bottom: 2px;
	margin: 0;
	background: none;

	width: 50px;
	height: 50px;
	background-image: url("/materials/177539552435501.png");
	background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.article h4 {
	border: none;
	font-weight: bold;
	font-size: 1.1em;
	
	line-height: 1.25;
	background: none;
    border-bottom: solid 2px var(--color-brand);
    color: var(--color-brand);
	border-radius: var(--radius-none);

	padding-left: var(--space-3xl);
	padding-right: 0;
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
	margin-bottom: var(--space-sm);
}
.article h4::before {
    content: "";
	color: var(--color-accent);
    margin-right: 0.5em;
    vertical-align: middle;
    font-size: 0.9em;
    display: inline-block;

	width: 50px;
	height: 50px;
	background-image: url("/materials/177539522829301.png");
	background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
	background-color: unset;

	/* font-size: 1em;
	width: 16px;
	height: 16px;
	background: var(--color-brand);
	border-radius: var(--radius-round); */
}

.article.reason {
	position: relative;

	& h4 {
		box-sizing: border-box;
		padding: var(--space-sm);
		text-align: center;
		position: absolute;
		bottom: -20px;
		left: 50%;
		transform: translate(-50%, 0);
		width: 86%;
		/* min-height: 4em; */
		background: var(--color-white);
		border-radius: var(--radius-none);
		font-size: 1em;
		border: none;
		box-shadow: var(--shadow-floating);
		line-height: 1.6;
		font-family: var(--font-family-base);
		font-weight: normal;
		color: var(--color-text);
	}
}

.article {
	& h5,
	& h6 {
		font-weight: bold;
	}

	& h5 {
		margin: 1em 0;
		border-left: solid 4px var(--color-brand);

		& span {
			font-size: 0.8em;
		}
	}

	& h6:before {
		color: var(--color-brand);
		background: var(--color-neutral-bg);
	}
}


/* ------------------------------
 * 補助コンテンツ
 * ------------------------------ */
.side_address {
	display: flex;
	gap: var(--space-lg);
	margin-bottom: var(--space-md);
	padding: 0;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;

	& .logo {
		margin: 0 auto 15px;
		text-align: center;
		width: 300px;
	}

	& > div {
		width: 48%;
	}

	& .txtblock {
		width: 48%;
		/* margin: 20px 0; */
	}

	& .sitename {
		font-size: 22px;
		font-weight: bold;
	}

	& .txt {
		font-size: 15px;
		margin: 0 auto var(--space-md);
		color: var(--color-text);
		line-height: 1.8;
		display: block;
		letter-spacing: 0;
		text-align: center;
	}
}
span.tel {
	font-size: 2.5em;
}
@media only screen and (max-width: 600px) {
	.side_address {
		display: flex;
		margin-bottom: var(--space-md);
		padding: 0;
		border-radius: var(--radius-sm);
		box-sizing: border-box;
		justify-content: center;
		flex-direction: column;

		& .logo {
			margin: 0 auto 5%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		& > div {
			width: 100%;
		}

		& .txtblock {
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 100%;
		}

		& .sitename {
			font-size: 18px;
			font-weight: normal;
			line-height: 1.3;
			display: block;
			margin: 0 auto 5px;
		}

		& .txt {
			font-size: 14px;
			margin: 0 auto 5px;
			color: var(--color-text);
			line-height: 1.6;
			display: block;
			text-align: center;
			letter-spacing: 0;
			white-space: wrap;
			text-align: center;
		}
	}
	span.tel {
		font-size: 1.5em;
	}
}

#bottomLink {
	display: none;
}

@media only screen and (max-width: 600px) {
	#bottomLink {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
		z-index: 1000;
		height: 48px;
		overflow: hidden;
		display: block;

		& a {
			display: block;
			color: var(--color-white);
			/* background: #e8383d; */
			background: var(--color-accent);
			text-decoration: none;
			font-size: 100%;
			line-height: 48px;
			height: 100%;

			& span {
				display: block;
			}
		}
	}

	#wrap {
		margin-bottom: 48px;
	}
}

/* ------------------------------
 * お問い合わせ導線
 * ------------------------------ */
div#contact_us {
	width: 100vw;
	margin: 0 calc(512px - 50vw) 16px;
	padding: 3vw 0;
	line-height: 1.5;
	text-align: center;
	background: url(/materials/177301087571001.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}

div#contact_box {
	width: 100%;
	/*max-width: 1024px;*/
	max-width: 824px;
	display: block;
	margin: auto;
	padding: 32px;
	background: var(--color-surface-overlay);
	backdrop-filter: blur(3px);

	& h3 {
		margin: 0 auto;
		padding: 0;
	}
}

ul#contact_btn {
	display: flex;
	justify-content: center;
	flex-direction: row;
	font-size: 1em;

	& a.btn {
		margin: 16px auto;
	}

	& li {
		border: none;

		& a.btn {
			color: var(--color-white);
			margin: 0 .25em;

			&:before {
				content: none;
			}
		}
	}
}

@media only screen and (max-width: 1024px) {
	div#contact_us {
		margin: 0 calc(50% - 50vw) 16px;
		padding: 5vw 0;
	}

	div#contact_box {
		max-width: 90%;
	}
}

@media only screen and (max-width: 600px) {
	ul#contact_btn {
		flex-direction: column;

		& li a.btn {
			margin: .25em auto;
			min-width: 224px;
		}
	}

	ul.topics li h3 a {
		line-height: 1.25;
	}
}


#mainArticles {
	& div[id^="blog"] h2 {
		width: auto;
	}
}

ul.maru.maruFlex {
	display: flex;
	font-size: 1em;

	& li {
		margin-right: 2em;
	}
}

/* ------------------------------
 * リンク・ボタン・配色
 * ------------------------------ */
a {
	color: var(--color-brand);
}

a.btn {
	background: none;
	border: solid 1px var(--color-accent);
	font-weight: normal;
	display: inline-block;
	text-align: center;
	color: var(--color-accent);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	min-width: 264px;
	transition: all 0.3s ease;

	&:hover {
		background: var(--color-accent);
		color: var(--color-white);
	}

	&:after {
		/* font-family: "Font Awesome 5 Free";
		content: "\f105"; */
		font-weight: normal;
		margin-left: 10px;
		content: "→";
	}
}
.sideContents #sideServices h2:before,
.sideContents #sideBlogCategories h2:before,
.sideContents #sideBlogDates h2:before,
.sideContents #sideMobile h2:before {
	background: var(--color-brand);
}

.sideBanner_body {
	text-align: center;
}

.sideContents {
	& ul li,
	& dl dt {
		border: none;
		margin-bottom: 10px;
	}

	& ul li a:hover,
	& dt a:hover {
		background: var(--color-brand);
	}
}

ul.topics li {
	& p.date {
		background: var(--color-brand);
	}

	& p.more a {
		background: var(--color-brand);
		font-weight: normal;

		&:hover {
			background: var(--color-brand-soft);
		}
	}

	& h3 a {
		font-size: 1.1em;
		color: var(--color-brand);
	}
}

#mainTopics {
	& .listview a {
		background: var(--color-brand);
		font-weight: normal;

		&:hover {
			background: var(--color-brand-soft);
		}
	}
}

#topMenu_outer {
	& .topMenu li a:hover {
		background: var(--color-brand);
		color: var(--color-white);
	}
}

/* ------------------------------
 * フッター
 * ------------------------------ */
#footer {
	background: var(--color-bg-footer);
}

#footer_body {
	flex-wrap: wrap;
	padding-top: 0;

	& .topMenu,
	& .services {
		width: 100%;
		justify-content: center;
		flex-direction: row;
		margin: 0;
		flex-wrap: wrap;

		& li {
			margin: 0;

			& a {
				/* background: var(--color-brand); */
				background: none;
				color: var(--color-text-muted);

				&:hover {
					background-color: var(--color-brand-soft);
				}

				&:before {
					display: none;
				}
			}
		}
	}

	& .copyright {
		background: var(--color-brand-soft);
		background: var(--color-white);
		color: var(--color-text-subtle);
	}
}

#footer * {
	color: var(--color-text-subtle);
}

.article.theme,
.gallery.theme {
	background: var(--color-brand);
}

.article.theme2,
.gallery.theme2 {
	background: var(--color-brand-pale);
}




ul.maru02 li:before {
	color: var(--color-brand);
}

#mainArticles {
	& table.contactTable {
		& tr td.th_headline {
			background: var(--color-brand);
		}

		& input.button {
			background: var(--color-brand);
		}
	}
}

@media only screen and (max-width: 600px) {
	#toggle {
		background-color: var(--color-brand);
	}

	.active #toggle {
		background-color: var(--color-brand);
	}

	#topMenu_outer {
		& .topMenu li a:hover {
			background: var(--color-brand);
			color: var(--color-white);
		}
	}

	#mainArticles {
		& table.contactTable tr.must th {
			padding: 1em 56px 1em 1em;
		}
	}
}

/* ------------------------------
 * 動画
 * ------------------------------ */
div.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}

div.youtube iframe {
	width: 100%;
	height: 100%;
}

.article.douga {
	background: var(--color-surface-video);
	padding: 0;
}


/* ------------------------------
 * 案内リンク
 * ------------------------------ */
ul.guide {
	display: flex;
	justify-content: space-between;

	& li {
		flex-basis: 33%;

		& a.btn {
			width: 100%;

			&:hover {
				background: var(--color-brand-soft);
				color: var(--color-white);
			}
		}
	}
}

.article.theme ul.guide li a.btn {
	color: var(--color-black);
	background: var(--color-white);

	&:hover {
		background: var(--color-brand-soft);
		color: var(--color-white);
	}
}

@media only screen and (max-width: 600px) {
	ul.guide {
		flex-wrap: wrap;

		& li {
			flex-basis: 100%;
			margin-bottom: .5em;
		}
	}

	a.btn {
		width: 100%;
	}
}

/* ------------------------------
 * reCAPTCHA バッジ
 * ------------------------------ */
.recaptcha_policy {
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 11px !important;
	color: var(--color-text-muted) !important;
}

.recaptcha_policy a {
	font-size: 11px !important;
	color: var(--color-content-strong) !important;
}

.grecaptcha-badge {
	visibility: hidden;
}




/* ------------------------------
 * 補助装飾・汎用パーツ
 * ------------------------------ */
.ul>* {
	margin-left: 1.2em;
	list-style: disc;
}

.article.col4.contribution {
	margin-right: 13px;
}

.article.col4.contribution:nth-of-type(4n) {
	margin-right: 0px;
}

.badge {
	display: inline-block;
	text-align: center;
	padding: var(--space-2xs) 18px;
	border-radius: 3px;
	background: var(--color-brand-soft);
	color: var(--color-white);
	font-size: 0.9rem;
}

.article.articleFlow {
	& h4 {
		padding: 0;
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		width: auto;
	}
}


/* ------------------------------
 * ギャラリー・カード
 * ------------------------------ */
.gallery.example {
	& .gallery_grid li.galleryGrid {
		& .image {
			margin: 0;
		}

		& .galleryGrid_outer {
			margin: 0;
		}
	}

	& .galleryGrid_body {
		position: relative;
		display: flex;
	}

	& ul.galleryGrids .comment {
		position: absolute;
		pointer-events: none;
		font-size: 1.3em;
		background: var(--color-surface-mask);
		width: 100%;
		height: 100%;
		align-items: center;
		display: grid;
		color: var(--color-white);
	}
}

.gallery_grid li.galleryGrid .image {
	margin-bottom: 5px;
	max-width: 100%;
	text-align: center;
	width: 100%;
}

/* ギャラリーバリエーション 2 */
.gallery.example02 {
	& li.galleryGrid {
		margin-bottom: 10px;
	}

	& .gallery_grid li.galleryGrid {
		& .galleryGrid_outer {
			padding: 0;
		}

		& .image {
			margin-bottom: 0;
		}
	}

	& a {
		height: 100%;
		display: block;
		padding-bottom: 2em;
	}

	& ul.galleryGrids .comment {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
		font-size: 0.9em;
		font-weight: normal;
		background: var(--color-surface-mask);
		background: var(--color-gallery-label);
		padding: var(--space-2xs);
		border-radius: 20px;
		width: 60%;
		align-items: center;
		color: var(--color-white);
		pointer-events: none;
		z-index: 10;

		&:hover {
			opacity: 0.8;
		}
	}
}

.article.full {
	padding: var(--space-xl) 0;

	&.theme {
		padding-top: 0;
		padding-bottom: 0;

		& .image {
			margin-bottom: 0;
		}
	}
}

.article.card {
	padding: var(--space-lg);
	border: solid 2px var(--color-brand);
	box-sizing: border-box;
	border-radius: var(--radius-sm);

	& h3 {
		font-size: 1.8em;

		&:after {
			display: none;
		}
	}

	& h4 {
		font-size: 1.6em;
	}
}
.article.num {
	& h4 {
		position: relative;
		padding-left: var(--space-2xl);

		&:before {
			content: "";
			position: absolute;
			left: 0;
			top: 0.5em;
			width: 30px;
			height: 30px;
			border-radius: var(--radius-round);
			background: var(--color-brand);
			color: var(--color-white);
			font-size: 0.9em;
			line-height: 30px;
			text-align: center;
			font-weight: bold;
		}
	}
}

.article.num1 h4:before {
	content: "1";
}

.article.num2 h4:before {
	content: "2";
}

.article.num3 h4:before {
	content: "3";
}

.article.num4 h4:before {
	content: "4";
}

.article.num5 h4:before {
	content: "5";
}

.article.num6 h4:before {
	content: "6";
}

@media screen and (max-width: 600px) {
	.article.card {
		margin-left: 20px;
    	margin-right: 20px;
	}
}
/* ------------------------------
 * 人気メニュー
 * ------------------------------ */
h4.ranking {
	position: relative;
	margin: var(--space-xl);
	padding: 0;
	border: none;
	text-align: center;

	&:before,
	&:after {
		width: unset;
		height: unset;
		position: absolute;
		z-index: 0;
		top: unset;
		bottom: -10px;
		display: block;
		content: '';
		border: 1em solid var(--color-ranking-edge);
		background: none;
	}

	&:before {
		left: -30px;
		border-left-width: 15px;
		border-left-color: transparent;
	}

	&:after {
		right: -30px;
		border-right-width: 15px;
		border-right-color: transparent;
	}

	& span {
		position: relative;
		z-index: 1;
		display: block;
		padding: 0.5em 1rem;
		color: var(--color-white);
		background: var(--color-ranking-main);

		&:before,
		&:after {
			position: absolute;
			bottom: -10px;
			display: block;
			content: '';
			border-style: solid;
			border-color: var(--color-ranking-shadow) transparent transparent transparent;
		}

		&:before {
			left: 0;
			border-width: 10px 0 0 10px;
		}

		&:after {
			right: 0;
			border-width: 10px 10px 0 0;
		}
	}
}

.strong{
    font-size: 1.6em;
    font-weight: bold;
    color: var(--color-brand);
}

/* テキストマーカー */
span[style*="Lime"] {
	background-color: transparent !important;
	background: linear-gradient(transparent 70%, #DBD0E6 0) repeat scroll 0 0;
}

span[style*="Yellow"] {
	background-color: transparent !important;
	background: linear-gradient(transparent 70%, #FFEEAA 0) repeat scroll 0 0;
}


.box26 {
	position: relative;
	margin: 2em 0;
	padding: var(--space-xl);
	border: solid 3px var(--color-brand);
	border-radius: var(--radius-none);
	display: flow-root;

	& .box-title {
		position: absolute;
		display: inline-block;
		top: -13px;
		left: 10px;
		padding: 0 9px;
		line-height: 1;
		font-size: 19px;
		background: var(--color-white);
		color: var(--color-brand);
		font-weight: bold;
	}

	& p {
		margin: 0;
		padding: 0;
	}
}

/* 背景バリエーション */
.article.bg01, .gallery.bg01 {
    background: var(--color-bg-highlight);
}


ul.btnList {
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0 auto;
	padding: 0;

	& a.btn {
		min-width: 200px;
		font-weight: bold;
	}
}

ul.serviceBtnList {
	& li {
		width: calc(100% / 3 - var(--space-xs));
	}

	& a.btn {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	ul.serviceBtnList {
		& li {
			width: 100%;
		}
	}
}


ol.pp {
    padding-left: 1.25em;
    font-size: 1em;

	& li {
		list-style-type: decimal;
		margin-bottom: var(--space-sm);
	}
}

ul.notes {
	list-style-type: none;
	margin-left: 1em;
	font-size: 1em;
}


.article.contact_block {
	background: var(--color-contact-accent);
	color: var(--color-white);
	text-align: center;
	padding: var(--space-4xl) var(--space-lg);
}

a.contact_btn {
	display: inline-block;
	text-align: center;
	border-radius: 60px;
	border: solid 1px var(--color-white);
	color: var(--color-white);
	padding: var(--space-lg) var(--space-3xl);
	text-decoration: none;
	font-size: 1.4em;
	box-sizing: border-box;

	&:hover {
		background: var(--color-white);
		color: var(--color-contact-accent);
		transition: var(--transition-default);
	}
}

.contact_txt {
	margin-top: var(--space-lg);
}



.article table.gTable {
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
	border-spacing: 0;
	border: none;

	& th,
	& td {
		border: none;
		padding: var(--space-sm);
	}

	& img {
		max-width: 100%;
	}

	& td {
		width: 50%;
		vertical-align: top;
		text-align: center;
	}
}

.cke_editable {
	max-width: 100%;

	& img {
		max-width: 100%;
	}
}


/* ------------------------------
 * 特徴レイアウト
 * ------------------------------ */
.article.features {
	& .article_outer {
		height: 100%;
	}

	& .article_body {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: start;
		gap: var(--space-xs);
		height: 100%;

		& .image {
			order: 1;
			margin-top: auto;
			margin-bottom: 0;
		}
	}
}

@media screen and (max-width: 600px) {
	.article.underImgSp {
		& .article_body {
			display: flex;
			flex-direction: column;
		}

		& .image {
			order: 1;
		}
	}
}



/* ------------------------------
 * お問い合わせエリア
 * ------------------------------ */
.freeHtml h3:before,
.freeHtml h3:after {
	margin: 0;
}
#contactInfo {
	width: 100vw;
	margin: 0 calc(512px - 50vw) var(--space-2xl);
	background: var(--color-white) url(/materials/177546851452801.jpg) no-repeat center center / cover;
	background-attachment: fixed;
	padding: 3vw;
	text-align: center;
	color: var(--color-text-subtle);
	line-height: 1.5;
	position: relative;

	&::after{
		display: none;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--color-surface-mask);
	}

	& .contact_body {
		margin: auto;
		width: 100%;
		max-width: 650px;
		display: block;
		padding: 2vw;
		background: var(--color-surface-overlay-soft);
		backdrop-filter: blur(4px);

		border-radius: 0;
		position: relative;
		z-index: 10;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

		&::before {
			content: "";
			position: absolute;
			inset: 0; /* top, right, bottom, left すべて 0 */
			z-index: -1;

			/* 背景画像の設定 */
			background-image: url(/materials/177548161002001.jpg);
			background-size: 650px;
			background-position: center;
			background-repeat: no-repeat;
			opacity: 0.3;
		}
	}

	& h3 {
		color: var(--color-text-subtle);
		margin: 1em 0 0;
		padding: 0;
		margin: 10px auto;
		display: inline-block;
		width: auto;

		&::after {
			height: 4px;
			margin: 10px auto 10px auto;
		}
	}

	& h4 {
		margin: 1em;
		font-size: 133%;
	}

	& p {
		text-align: center;
		font-size: 110%;
		font-weight: 500;
		margin-bottom: 0.5em;
	}

	& a.btn {
		font-size: 1.1em;
		color: var(--color-white);
		font-weight: bold;
		line-height: 1.25;
		/* background: var(--color-contact-button); */
		background: var(--color-accent);
		text-align: center;
		border-radius: 0;
		padding: 1em var(--space-xl);
		text-decoration: none;
		max-width: 1024px;
		margin: 0 auto;
		text-shadow: none;
		border: none;
		display: inline-block;

		&:hover {
			opacity: 0.8;
			color: var(--color-white);
			top: 2px;
			/* background: var(--color-contact-button-hover); */
		}

		&::after {
			color: var(--color-white);
		}

		&:before {
			font-family: var(--font-family-icon);
			content: "\f0e0";
			font-size: 140%;
			color: inherit;
			font-weight: bold;
			line-height: 1.0;
			margin-right: 10px;
			display: inline-block;
			vertical-align: middle;
			transform: translateY(-2px);
		}

		&:after {
			font-family: var(--font-family-icon);
			content: "\f105";
			color: inherit;
			font-weight: bold;
			margin-left: 10px;
		}
	}

	& .contact_tel {
		font-size: 2em;
		font-weight: bold;
		/* text-shadow:
			2px 0 0 var(--color-white),
			-2px 0 0 var(--color-white),
			0 2px 0 var(--color-white),
			0 -2px 0 var(--color-white),
			1.5px 1.5px 0 var(--color-white),
			-1.5px 1.5px 0 var(--color-white),
			1.5px -1.5px 0 var(--color-white),
			-1.5px -1.5px 0 var(--color-white),
			2px 1px 0 var(--color-white),
			2px -1px 0 var(--color-white),
			-2px 1px 0 var(--color-white),
			-2px -1px 0 var(--color-white),
			1px 2px 0 var(--color-white),
			-1px 2px 0 var(--color-white),
			1px -2px 0 var(--color-white),
			-1px -2px 0 var(--color-white); */
	}

	& .contact_tel_sub {
		font-size: 1.5em;
		font-weight: bold;
		/* text-shadow:
			2px 0 0 var(--color-white),
			-2px 0 0 var(--color-white),
			0 2px 0 var(--color-white),
			0 -2px 0 var(--color-white),
			1.5px 1.5px 0 var(--color-white),
			-1.5px 1.5px 0 var(--color-white),
			1.5px -1.5px 0 var(--color-white),
			-1.5px -1.5px 0 var(--color-white),
			2px 1px 0 var(--color-white),
			2px -1px 0 var(--color-white),
			-2px 1px 0 var(--color-white),
			-2px -1px 0 var(--color-white),
			1px 2px 0 var(--color-white),
			-1px 2px 0 var(--color-white),
			1px -2px 0 var(--color-white),
			-1px -2px 0 var(--color-white); */
	}
}

@media screen and (max-width: 1024px) {
	div#contactInfo {
		margin: 0 calc(100vw - 113%) 40px;
	}
}

@media screen and (max-width: 600px) {
	#contactInfo {
		& h3 {
			margin: 0 auto 30px;
			padding: 20px 20px;
			font-size: 1.4em;
		}

		& a.btn {
			font-size: 1em;
			padding: 10px;
		}

		& .contact_tel {
			display: block;
		}
	}
  
}