@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;
}
/*==========================*/

/* コンテンツ */

/*==========================*/
/* ----------------
overflow */
#layout {
	overflow-x: hidden;
}
/* ----------------
コンテナマージン */
.content__container {
	margin-top: var(--section-gutter);
}
.inner__container {
	margin-top: var(--section-inner-gutter);
}
/* ----------------
パディング */
.bg-color__container {
	padding-block: var(--section-inner-gutter);
}
.bg-color--main {
	background-color: var(--color-main);
}
.bg-color--main-soft {
	background-color: var(--color-main-soft);
}
.bg-color--main-pale {
	background-color: var(--color-main-pale);
}
.bg-color--main-thin {
	background-color: var(--color-main-thin);
}
.bg-color--accent {
	background-color: var(--color-accent);
}
.bg-color--accent-pale {
	background-color: var(--color-accent-pale);
}
.bg-color--accent-thin {
	background-color: var(--color-accent-thin);
}
/* ----------------
幅 */
.max-width {
	width: var(--flexible-width);
	margin-inline: auto;
}
.max-width--md {
	width: var(--flexible-width--md);
	margin-inline: auto;
}
.max-width--sm {
	width: var(--flexible-width--sm);
	margin-inline: auto;
}
.max-width--xs {
	width: var(--flexible-width--xs);
	margin-inline: auto;
}
.max-width--xxs {
	width: var(--flexible-width--xxs);
	margin-inline: auto;
}