@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

:root {
	/* Colors (ブランドキーワード: 専門性・親身・安心感・誠実) */
	--brand-color-main: #0068B7; /* ネイビー: 見出し・ブランド要素 */
	--brand-color-accent: #E18036; /* テラコッタ: CTAボタン専用 */
	--brand-color-muted: #8A97A6; /* スレートグレー: 英字ラベル等の控えめな要素 */
	--brand-color-sub: #E8EEF3; /* セクション背景 */
	--brand-color-text: #333333; /* 本文 */
	--brand-color-bg: #FAFAF8; /* ベース背景 */

	/* 区切り線(淡いネイビー) */
	--brand-divider-color: rgba(0, 104, 183, 0.15);

	/* Typography */
	--brand-font-heading: 'Zen Kaku Gothic New', sans-serif;
	--brand-font-body: 'Noto Sans JP', sans-serif;
	--brand-font-size-h1: 32px;
	--brand-font-size-h2: 24px;
	--brand-font-size-body: 16px;
	--brand-line-height-body: 1.8;
	--brand-font-size-button: 16px;

	/* Components(角丸を大きく・影を柔らかくして、専門性を保ちつつ温かみ・親しみやすさを出す) */
	--brand-radius-button: 12px;
	--brand-radius-card: 20px;
	--brand-shadow-card: 0 16px 40px rgba(0, 104, 183, 0.08);
}

/*
    サイト全体の見出しフォント
    SWELLのカスタマイザーには「ベースとなるフォント」(本文用)の設定しかなく、
    見出し専用フォントの選択項目がないため、ここで全ページ共通で指定する。
*/
h1, h2, h3, h4, h5, h6 {
	font-family: var(--brand-font-heading);
}

/*
    ブランドユーティリティクラス
    ブロックエディタの「高度な設定 > 追加CSSクラス」に入力して使用します。
*/

/* 見出し(H1・H2) */
.brand-heading {
	font-family: var(--brand-font-heading);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--brand-color-main);
	overflow-wrap: break-word;
}

/* 本文 */
.brand-body-text {
	font-family: var(--brand-font-body);
	font-size: var(--brand-font-size-body);
	line-height: var(--brand-line-height-body);
	color: var(--brand-color-text);
	overflow-wrap: break-word;
}

/* 見出し等の短いフレーズ(「」で囲んだキーワードや英数字表記)を
   狭い画面でも意図しない位置で改行させないためのユーティリティ。
   <br>と併用し、改行させたい箇所だけを制御する。 */
.u-nowrap {
	white-space: nowrap;
}

/* SPのみ改行(PCでは無視)。例: ひとりで悩まず、<br class="u-brSp">まずは… */
br.u-brSp {
	display: none;
}
@media (max-width: 768px) {
	br.u-brSp {
		display: block;
	}
}

/*
    汎用の「アウトライン→塗りつぶし」ホバーボタン。
    通常時は白背景+色付き枠線+色付き文字、hoverで枠内が左から色で塗りつぶされ、文字が白に反転する。
    使い方: 既存のクラスに u-btnSweep を追加するだけ(色・境界線・ホバー演出はこのクラスが担当)。
    - 無指定: ネイビー
    - .-accent: テラコッタ(アクセント)
    - .-white: 写真・ネイビー背景の上で使う白版
*/
.u-btnSweep {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
	isolation: isolate;
	background: #fff;
	color: var(--brand-color-main);
	border: 2px solid var(--brand-color-main);
	border-radius: var(--brand-radius-button);
	padding: 14px 36px;
	font-family: var(--brand-font-body);
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	transition: color 0.3s ease;
}
.u-btnSweep::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--brand-color-main);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}
.u-btnSweep:hover,
.u-btnSweep:focus-visible {
	color: #fff;
}
.u-btnSweep:hover::before,
.u-btnSweep:focus-visible::before {
	transform: scaleX(1);
}
.u-btnSweep [aria-hidden="true"] {
	display: inline-block;
	transition: transform 0.3s ease;
}
.u-btnSweep:hover [aria-hidden="true"],
.u-btnSweep:focus-visible [aria-hidden="true"] {
	transform: translateX(4px);
}
.u-btnSweep.-accent {
	color: var(--brand-color-accent);
	border-color: var(--brand-color-accent);
}
.u-btnSweep.-accent::before {
	background: var(--brand-color-accent);
}
.u-btnSweep.-accent:hover,
.u-btnSweep.-accent:focus-visible {
	color: #fff;
}
.u-btnSweep.-white {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.8);
}
.u-btnSweep.-white::before {
	background: #fff;
}
.u-btnSweep.-white:hover,
.u-btnSweep.-white:focus-visible {
	color: var(--brand-color-main);
}

/* CTAボタン(相談する、見積り依頼等): 塗り色のまま、hoverで少し浮き上がり+暗いオーバーレイが左から広がる */
.brand-btn-cta {
	position: relative;
	display: inline-block;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--brand-color-accent) !important;
	border-radius: var(--brand-radius-button) !important;
	color: #fff !important;
	font-family: var(--brand-font-body);
	font-size: var(--brand-font-size-button);
	font-weight: bold;
	box-shadow: 0 6px 16px rgba(225, 128, 54, 0.28);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.brand-btn-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.14);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}
.brand-btn-cta:hover,
.brand-btn-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(225, 128, 54, 0.4);
}
.brand-btn-cta:hover::before,
.brand-btn-cta:focus-visible::before {
	transform: scaleX(1);
}

/* 個人/法人/セミナーの3カード等 */
.brand-card {
	background-color: #fff;
	border-radius: var(--brand-radius-card);
	box-shadow: var(--brand-shadow-card);
	padding: 24px;
}

/* セクション背景(ソフトブルーグレー) */
.brand-section-sub {
	background-color: var(--brand-color-sub);
}

/* ヘッダー・フッター・見出し装飾(ネイビー背景) */
.brand-section-main {
	background-color: var(--brand-color-main);
	color: #fff;
}

/* セクション見出し上の英字ラベル(例: SERVICE の下に「取扱いサービス」) */
.brand-eyebrow {
	display: block;
	font-family: var(--brand-font-body);
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.18em;
	color: var(--brand-color-main);
	opacity: 0.85;
	margin: 0 0 10px;
}

/* PC表示時は文字を大きく */
@media (min-width: 1000px) {
	:root {
		--brand-font-size-h1: 42px;
		--brand-font-size-h2: 28px;
		--brand-font-size-body: 18px;
		--brand-font-size-button: 17px;
	}
}

/*
    スマホ(幅480px以下)では見出しをさらに縮小。
    デフォルトのh1:32px/h2:24pxのままだと、「」で囲んだ不可分の短いフレーズ(.u-nowrap)や
    キャッチコピーの1行が実機幅(iPhone等 375〜430px)のコンテナ幅に収まりきらず、
    「た。」のような1〜2文字だけの行になってしまうための調整。
    値は実機幅(iPhone等 375〜394px)で各見出しが意図通りの行数に収まる上限を実測して決定。
    front-page.css/page-company.css/page-personal.cssの各セクション余白から
    SP時のpadding-left/right(l-containerと二重になっていた分)を外した後の数値
    (h1のボトルネックは各ヒーロー(独自paddingを持つフルブリード帯)の14文字行、
    h2のボトルネックはトップページ理念見出しの14文字行)。
    問い合わせタブは同じ@media (max-width:768px)内で下部固定バーに変わるため、以前あった
    タブとの重なりはこの調整と関係なく解消済み。
*/
@media (max-width: 480px) {
	:root {
		--brand-font-size-h1: 23px;
		--brand-font-size-h2: 24px;
	}
}

/* ヘッダーロゴの上下余白を詰める(ロゴを大きくした分ヘッダーが間延びしないように) */
.l-header .l-header__logo {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* 追従ヘッダー(スクロール時に表示される固定ヘッダー)のロゴ上下余白をなくす */
.l-fixHeader__logo {
	padding-top: 0;
	padding-bottom: 0;
}

/* ヘッダーナビの文字サイズをPCで少し大きく(通常ヘッダー・追従ヘッダー共通) */
@media (min-width: 960px) {
	.l-header__gnav .c-gnav > .menu-item > a .ttl,
	.l-fixHeader__gnav .c-gnav > .menu-item > a .ttl {
		font-size: 18px;
	}
}

/* SP: ロゴ左寄せ / ハンバーガー右上 / ヘッダー上下余白なし */
@media not all and (min-width: 960px) {
	.l-header__inner {
		justify-content: flex-end !important;
	}
	.l-header__menuBtn {
		order: unset !important;
	}
	.l-header__customBtn {
		order: unset !important;
	}
	.l-header__logo,
	.l-header .l-header__logo,
	.-series .l-header__logo {
		order: unset !important;
		margin-right: auto !important;
		text-align: left !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* フッターの店舗アクセス情報(全ページ共通)
   トップはCTA直後、その他ページはフッター先頭で出力 */
.p-footerAccess {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--brand-color-sub);
	padding: 64px 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* トップページのみ、CTA直後にアクセス情報を密着させるため.l-contentのmargin-bottom(既定6em)を打ち消す。
   他ページでは既定のmargin-bottomを残し、本文とフッターの間に余白を確保する。 */
.top .l-content {
	margin-bottom: 0;
}

/* CTAとアクセスの間に余白を入れない */
.p-topCta + .p-footerAccess {
	margin-top: 0;
}
.p-footerAccess__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.p-footerAccess__title {
	font-family: var(--brand-font-heading);
	font-weight: 600;
	letter-spacing: 0.04em;
	font-size: 22px;
	color: var(--brand-color-main);
	text-align: center;
	margin: 0 0 8px;
}
.p-footerAccess__lead {
	font-family: var(--brand-font-body);
	font-size: 14px;
	color: var(--brand-color-muted);
	text-align: center;
	margin: 0 0 32px;
}
.p-footerAccess__list {
	display: flex;
	gap: 24px;
}
.p-footerAccess__item {
	flex: 1;
	background: #fff;
	border-radius: var(--brand-radius-card);
	padding: 20px;
	box-shadow: var(--brand-shadow-card);
}
.p-footerAccess__name {
	font-family: var(--brand-font-heading);
	font-weight: 600;
	font-size: 16px;
	color: var(--brand-color-main);
	margin: 0 0 8px;
}
.p-footerAccess__area {
	font-family: var(--brand-font-body);
	font-weight: normal;
	font-size: 13px;
	color: var(--brand-color-muted);
}
.p-footerAccess__addr {
	font-family: var(--brand-font-body);
	font-size: 13px;
	line-height: 1.6;
	color: #555;
	margin: 0 0 16px;
}
.p-footerAccess__map {
	position: relative;
	width: 100%;
	padding-top: 60%;
	border-radius: var(--brand-radius-card);
	overflow: hidden;
}
.p-footerAccess__map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.p-footerAccess__link {
	display: block;
	width: fit-content;
	margin: 32px auto 0;
	color: #fff;
	background: var(--brand-color-main);
	border-radius: var(--brand-radius-button);
	padding: 14px 36px;
	font-weight: bold;
	text-decoration: none;
	font-family: var(--brand-font-body);
	font-size: 16px;
	box-shadow: 0 6px 16px rgba(0, 104, 183, 0.14);
}
.p-footerAccess__link:hover {
	opacity: 0.85;
}

@media (max-width: 768px) {
	.p-footerAccess__list {
		flex-direction: column;
	}
}

/* フッターロゴ */
.p-footerLogo {
	text-align: center;
	margin: 0;
	padding-top: 40px;
	margin-bottom: 24px;
}
.p-footerLogo__img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: 40px;
	object-fit: contain;
}

/* フッター法的表記(募集代理店登録番号・プライバシーポリシー) */
.p-footerLegal {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 12px;
	color: var(--brand-color-muted);
	margin: 0 0 8px;
}
.p-footerLegal__privacy {
	color: var(--brand-color-muted);
	text-decoration: underline;
}
.p-footerLegal__privacy:hover {
	color: var(--brand-color-main);
}


/* ページ内リンクの飛び先(よくある質問の関連リンク等から #access / #stores へ移動)。固定ヘッダーに隠れないよう余白をとる */
#access,
#stores {
	scroll-margin-top: 100px;
}


/*
    トップへ戻るボタン(SWELLの #pagetop)
    - 矢印をアイコンフォント(icomoon)ではなくCSSの線で描く。
      フォントが読み込まれない環境でも、文字化け(□や記号)にならないようにするため。
    - スマホで画面下に固定CTA(.p-fixedContactTab)があるページでは、CTAと重ならないようその上に持ち上げる。
*/
#pagetop .c-fixBtn__icon::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin-top: 5px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(45deg);
}
@media (max-width: 768px) {
	body:has(.p-fixedContactTab) .p-fixBtnWrap {
		bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px));
	}
}