@charset "UTF-8";

/* ==========================================================================
   株式会社さらち 全ページ共通CSS

   ヘッダー・フッターは全ページに出るため、TOPページ専用の top.css とは
   別に、こちらへ記述します。CSS変数も top.css から移しています
   （top.css はTOPページでしか読み込まれないため、変数を置いたままだと
   下層ページで参照できなくなるため）。

   読み込み順： child_style → sarachi_common → sarachi_top
   ========================================================================== */


/* --------------------------------------------------------------------------
   CSS変数
   -------------------------------------------------------------------------- */

:root {
	/* 指定ネイビー2色（近似色への変更禁止） */
	--sarachi-navy: #001A3D;
	--sarachi-accent: #211F60;

	/* FVのオーバーレイに使う色（モック実測値） */
	--sarachi-overlay: 9, 32, 51;

	/* 文字色 */
	--sarachi-ink: #25282C;
	--sarachi-text-sub: #555B61;
	--sarachi-muted: #686B70;

	/* 背景色 */
	--sarachi-bg-base: #F8F7F4;
	--sarachi-ivory: #F7F5F1;

	/* 罫線 */
	--sarachi-line: rgba(0, 26, 61, .16);

	/* フォント */
	--sarachi-font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--sarachi-font-display: "Arial Black", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--sarachi-font-num: "Inter", "Helvetica Neue", Arial, sans-serif;


	/* ヘッダーのSNSアイコン */
	--sarachi-icon-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.15'/%3E%3C/svg%3E");
	--sarachi-icon-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%2306C755'/%3E%3Cpath fill='%23fff' d='M16 8.5c-4.7 0-8.5 2.9-8.5 6.5 0 3.2 3 5.9 7.1 6.4.3 0 .5.2.5.5l-.2 1.9c0 .3.3.5.6.3l4.3-2.8c2.4-1.4 4.7-3.3 4.7-6.3 0-3.6-3.8-6.5-8.5-6.5Z'/%3E%3C/svg%3E");
	--sarachi-gradient-instagram: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 52%, #6228D7 100%);

	/* コンテンツ幅 */
	--sarachi-wide: min(1440px, calc(100vw - 72px));
	--sarachi-body: min(1320px, calc(100vw - 72px));
}

@media (max-width: 1180px) {
	:root {
		--sarachi-wide: min(100% - 42px, 1440px);
		--sarachi-body: min(100% - 52px, 1320px);
	}
}

@media (max-width: 680px) {
	:root {
		--sarachi-wide: calc(100% - 28px);
		--sarachi-body: calc(100% - 34px);
	}
}


/* ==========================================================================
   ヘッダー（SWELLのヘッダーへ上書き）

   SWELLは通常ヘッダーと追従ヘッダーで別のマークアップを出力します。
   中身の構造は同じなので、両方へ同じ指定を当てています。

     通常  header#header.l-header
           └ .l-header__inner.l-container
             ├ .l-header__logo
             └ .l-header__gnav > ul.c-gnav > li.menu-item

     追従  div#fix_header.l-fixHeader
           └ .l-fixHeader__inner.l-container
             ├ .l-fixHeader__logo
             └ .l-fixHeader__gnav > ul.c-gnav > li.menu-item

   メニュー項目に付けたCSSクラスは li 側に入ります。
     sarachi-nav-instagram / sarachi-nav-line / sarachi-nav-cta
   ========================================================================== */

.l-header,
.l-fixHeader {
	background: rgba(248, 247, 244, .96);
	border-bottom: 1px solid #D9D8D3;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/**
 * 高さと横幅
 *
 * SWELLは追従時にロゴを小さくしてヘッダーも低くしますが、
 * モックには縮小がなく常に84pxのため固定しています。
 * カスタマイザーの「画像サイズ(PC追従ヘッダー内)」も
 * PC用と同じ 60 に設定してください。
 */
.l-header .l-header__inner,
.l-fixHeader .l-fixHeader__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(1520px, calc(100vw - 48px));
	max-width: none;
	height: 84px;
	padding: 0;
}

/* ロゴは左、ナビは右 */
.l-header .l-header__logo,
.l-fixHeader .l-fixHeader__logo {
	flex: 0 0 auto;
	margin-right: auto;
}

.l-header .l-header__gnav,
.l-fixHeader .l-fixHeader__gnav {
	flex: 0 0 auto;
	margin-left: auto;
}


/* --- ナビ全体 --- */

.l-header .c-gnav,
.l-fixHeader .c-gnav {
	display: flex;
	align-items: center;
	gap: 14px;
	height: auto;
}

/* SWELLは li と a にヘッダーいっぱいの高さを持たせるため解除する */
.l-header .c-gnav > li,
.l-fixHeader .c-gnav > li {
	height: auto;
}

.l-header .c-gnav > li > a,
.l-fixHeader .c-gnav > li > a {
	height: auto;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
}

.l-header .c-gnav > li > a:hover,
.l-fixHeader .c-gnav > li > a:hover {
	color: var(--sarachi-accent);
}


/* --- SNSアイコン（テキストを隠してアイコンに差し替える） --- */

.l-header .c-gnav > li.sarachi-nav-instagram,
.l-header .c-gnav > li.sarachi-nav-line,
.l-fixHeader .c-gnav > li.sarachi-nav-instagram,
.l-fixHeader .c-gnav > li.sarachi-nav-line {
	display: flex;
	align-items: center;
}

/* Instagram の左に区切り線を入れる */
.l-header .c-gnav > li.sarachi-nav-instagram,
.l-fixHeader .c-gnav > li.sarachi-nav-instagram {
	padding-left: 16px;
	border-left: 1px solid var(--sarachi-line);
}

.l-header .c-gnav > li.sarachi-nav-instagram > a,
.l-header .c-gnav > li.sarachi-nav-line > a,
.l-fixHeader .c-gnav > li.sarachi-nav-instagram > a,
.l-fixHeader .c-gnav > li.sarachi-nav-line > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
}

/* 文字は読み上げには残しつつ、画面からは隠す */
.l-header .c-gnav > li.sarachi-nav-instagram .ttl,
.l-header .c-gnav > li.sarachi-nav-line .ttl,
.l-fixHeader .c-gnav > li.sarachi-nav-instagram .ttl,
.l-fixHeader .c-gnav > li.sarachi-nav-line .ttl {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.l-header .c-gnav > li.sarachi-nav-instagram > a::before,
.l-fixHeader .c-gnav > li.sarachi-nav-instagram > a::before {
	content: "";
	width: 26px;
	height: 26px;
	background: var(--sarachi-gradient-instagram);
	-webkit-mask: var(--sarachi-icon-instagram) center / contain no-repeat;
	mask: var(--sarachi-icon-instagram) center / contain no-repeat;
	transition: opacity .2s ease;
}

/* LINE は枠付きの文字チップ */
.l-header .c-gnav > li.sarachi-nav-line > a::before,
.l-fixHeader .c-gnav > li.sarachi-nav-line > a::before {
	content: "";
	width: 26px;
	height: 26px;
	background: var(--sarachi-icon-line) center / contain no-repeat;
	transition: opacity .2s ease;
}

.l-header .c-gnav > li.sarachi-nav-instagram > a:hover::before,
.l-header .c-gnav > li.sarachi-nav-line > a:hover::before,
.l-fixHeader .c-gnav > li.sarachi-nav-instagram > a:hover::before,
.l-fixHeader .c-gnav > li.sarachi-nav-line > a:hover::before {
	opacity: .7;
}


/* --- CTAボタン --- */

.l-header .c-gnav > li.sarachi-nav-cta > a,
.l-fixHeader .c-gnav > li.sarachi-nav-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 44px;
	padding: 0 20px;
	background: var(--sarachi-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.l-header .c-gnav > li.sarachi-nav-cta > a:hover,
.l-fixHeader .c-gnav > li.sarachi-nav-cta > a:hover {
	background: var(--sarachi-navy);
	color: #fff;
}

/* SWELLのホバー時の下線はボタンには出さない */
.l-header .c-gnav > li.sarachi-nav-cta > a::after,
.l-fixHeader .c-gnav > li.sarachi-nav-cta > a::after {
	display: none;
}


/* --- ヘッダー：960px以下 --- */

@media (max-width: 960px) {

	.l-header .l-header__inner,
	.l-fixHeader .l-fixHeader__inner {
		width: calc(100% - 32px);
		height: 76px;
	}
}


/* ==========================================================================
   フッター

   モックのロゴ・会社説明・電話番号は、SWELLの「フッター（PC）1〜3」
   ウィジェットで組んでいます。
   自前のブロックを差し込む方式は、SWELLの「フッター直前」領域が
   空でも余白を持つ影響で隙間が生じるため取りやめました。

   このファイルでは、ウィジェット領域の色と余白だけを整えます。
   中身のレイアウトはウィジェット側で組みます。
   ========================================================================== */

/* 空でも margin-top を持つため解除する */
.w-beforeFooter {
	margin-top: 0;
}


/* --- ウィジェット領域の下地 --- */

/**
 * ウィジェット領域の下地
 *
 * 左端がTOPページの他セクションとわずかにずれていますが、
 * 原因の特定にSWELLのウィジェット構造の調査が必要なため、
 * Stage 13でフッター周辺をまとめて扱う際に対応します。
 */
.l-footer .w-footer {
	padding: 68px 0 40px;
	background: var(--sarachi-navy);
	color: #fff;
}

/* ウィジェットの枠は使わず、中のHTMLで3カラムを組む */
.l-footer .w-footer .widget {
	margin: 0;
	padding: 0;
}

.l-footer .w-footer .widget_custom_html {
	width: 100%;
}


/* --- フッターの中身（カスタムHTMLで組んだ3カラム） --- */

.sarachi-fw {
	display: grid;
	grid-template-columns: 1.2fr .8fr .7fr;
	gap: 70px;
	width: var(--sarachi-wide);
	margin-inline: auto;
	text-align: left;
}

.sarachi-fw__logo {
	display: inline-block;
}

/**
 * ロゴの大きさは height で決まります（横幅は比率にあわせて伸縮）。
 * ヘッダーのロゴ設定（PC）と同じ 60px に揃えています。
 * 変更する場合はこの値だけを書き換えてください。
 */
.sarachi-fw__logo img {
	display: block;
	width: auto;
	height: 60px;
}

.sarachi-fw__copy {
	max-width: 440px;
	margin: 20px 0 0;
	color: #C6CBD0;
	font-size: 14px;
	line-height: 1.8;
}

.sarachi-fw__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 25px;
	align-content: start;
}

.sarachi-fw__nav a {
	color: #E2E5E8;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
}

.sarachi-fw__nav a:hover {
	color: #fff;
}

.sarachi-fw__contact strong {
	display: block;
	color: #fff;
	font-family: var(--sarachi-font-num);
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .012em;
	font-stretch: condensed;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.sarachi-fw__contact span {
	display: block;
	margin-top: 8px;
	color: #BDC3C9;
	font-size: 14px;
	line-height: 1.6;
}


/* --- フッターの中身：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-fw {
		gap: 40px;
	}

	.sarachi-fw__logo img {
		height: 52px;
	}

	.sarachi-fw__nav a,
	.sarachi-fw__contact span {
		font-size: 13px;
	}
}


/* --- フッターの中身：960px以下 --- */

@media (max-width: 960px) {

	.sarachi-fw {
		grid-template-columns: 1fr 1fr;
	}

	.sarachi-fw__about {
		grid-column: 1 / -1;
	}
}


/* --- フッターの中身：680px以下 --- */

@media (max-width: 680px) {

	.l-footer .w-footer {
		padding: 48px 0 32px;
	}

	.sarachi-fw {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.sarachi-fw__about {
		grid-column: auto;
	}

	.sarachi-fw__logo img {
		height: 46px;
	}

	.sarachi-fw__copy {
		font-size: 13.5px;
	}
}

/* --- SWELLのコピーライト行をモックの形へ ---
   SWELLは #footer というIDで背景色を指定しているため、
   こちらもIDを含めて詳細度を合わせています。 */

#footer.l-footer,
#footer .l-footer__inner,
#footer .l-footer__foot {
	background: var(--sarachi-navy);
	color: #9FA7AE;
}

#footer .l-footer__foot {
	padding: 0;
}

#footer .l-footer__foot .l-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: var(--sarachi-wide);
	max-width: none;
	margin-top: 55px;
	padding: 20px 0 24px;
	border-top: 1px solid rgba(255, 255, 255, .15);
}

#footer .copyright {
	margin: 0;
	color: #9FA7AE;
	font-size: 11px;
	line-height: 1.4;
}