@charset "UTF-8";
/* CSS Document */
/*=====================*/

/* 基礎設定  */

/*=====================*/
/*
スムーススクロール
headerが追従する場合はheader分の高さを:targetに指定する
Safariの対応が比較的新しいのでJSで対応するのが望ましい?
将来的には以下の記述だけでOK
*/
html {
	scroll-behavior: smooth;
}
/* -----------------------------------------
▼▼androidでの挙動がおかしかったらONで▼▼ */
html.android{
	scroll-behavior: auto;
}
/* -----------------------------------------
アンカーページ遷移時のヘッダーずれ対策 */
:target {
	scroll-margin-top: calc(var(--header-height) + 24px);
}
/* -----------------------------------------
body */
html, body {
	width: 100%;
	height: auto;
}
body {
	font-family: var(--baseFonts);
	font-size: var(--txt-reg);
	line-height: 1.5;
	color: var(--color-bk);

	height: 100%;
	min-height: 100vh;

	background-color: var(--color-base);
}
/* Sticky Footer */
body > footer {
	position: -webkit-sticky;
	position: sticky;
	top: 100vh;
}
/* -----------------------------------------
基礎設定 */
/* 字詰め設定 */
h1, h2, h3, h4, h5, h6 {
	-webkit-font-feature-settings: "palt";
	        font-feature-settings: "palt";
	letter-spacing: .075em;
}
p {
	-webkit-font-feature-settings: "palt";
	        font-feature-settings: "palt";
	letter-spacing: .05em;
}
/* ------------------
iOSでTEL/FAXなどの数列に下線が表示される対策 */
a[href^="tel"] {
	text-decoration: none !important;
}
/*==========================*/

/* コンテンツ */

/*==========================*/
:root {
	--section-gutter: var(--gutter-5xl);
	--section-inner-gutter: var(--gutter-2xl);
}
/* ----------------
overflow */
#layout {
	overflow-x: hidden;
}
/* ----------------
コンテナマージン */
.content__container {
	margin-top: var(--section-gutter);
}
.inner__container {
	margin-top: var(--section-inner-gutter);
}
/* ----------------
パディング */
.bg-color__container {
	padding-top: var(--section-inner-gutter);
	padding-bottom: var(--section-inner-gutter);
}
.bg-color__container--lg {
	padding-top: var(--section-gutter);
	padding-bottom: var(--section-gutter);
}
.bg-color--main {
	background-color: var(--color-main);
}
.bg-color--sub {
	background-color: var(--color-sub-soft);
}
/* ----------------
After bg */
.content__after-bg {
	padding-top: var(--section-gutter);
	padding-bottom: var(--section-gutter);
	position: relative;
}
.content__after-bg::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background-color: var(--color-sub-soft);
	z-index: -1;
}
.content__after-bg--left::after {
	left: calc(var(--gutter-common) / 1.2);
}
.content__after-bg--right::after {
	right: calc(var(--gutter-common) / 1.2);
}
@media (max-width: 959px) {
	.content__after-bg-inner {
		max-width: 80%;
	}
}
@media (max-width: 559px) {
	.content__after-bg-inner {
		max-width: 70%;
	}
}
/* ----------------
幅 */
.max-width {
	width: var(--flexible-width);
	margin-right: auto;
	margin-left: auto;
}
.max-width--md {
	width: var(--flexible-width--md);
	margin-right: auto;
	margin-left: auto;
}
.max-width--sm {
	width: var(--flexible-width--sm);
	margin-right: auto;
	margin-left: auto;
}
/* ----------------
頭合わせ */
.head-match-space--left {
	margin-left: var(--head-match-space);
}
.head-match-space-md--left {
	margin-left: var(--head-match-space--md);
}
.head-match-space-sm--left {
	margin-left: var(--head-match-space--sm);
}
.head-match-space--right {
	margin-right: var(--head-match-space);
}
.head-match-space-md--right {
	margin-right: var(--head-match-space--md);
}
.head-match-space-sm--right {
	margin-right: var(--head-match-space--sm);
}
/* インナーが必要な場合は以下のクラスを使用 */
.head-match-space__inner,
.head-match-space--md__inner,
.head-match-space--sm__inner {
	max-width: calc(100% - var(--gutter-var-xl));
}
.head-match-space__inner {
	width: var(--max-width);
}
.head-match-space--md__inner {
	width: var(--max-width--md);
}
.head-match-space--sm__inner {
	width: var(--max-width--md);
}