@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;600&display=swap');

/*
 * テーマ本体のデザインに後から足した分のスタイル
 *
 * site.css はデザインの出力物なので、更新で上書きされても困らないよう
 * 追加分はこのファイルに分けている。色と書体は site.css の
 * カスタムプロパティをそのまま参照し、デザインから浮かないようにする。
 *
 *   01. イントロローダー
 *   02. お問い合わせフォームの補助表示
 *   03. 差し色（オレンジ）
 *   04. お問い合わせフォームの調整
 *   05. 送信ボタンと送信まわり
 *   06. ベースフォント（丸ゴシック）と見出し（明朝）
 *   07. ヘッダー・フッターのリンクホバーと「相談する」ボタン
 *   08. PRIVACY / TRADELAW ページ（k-* クラスの見た目が未対応だった分）
 */


/* ==========================================================================
   01. イントロローダー
   ========================================================================== */

/* JavaScript が動く環境でのみ出す。
   無効な環境では、閉じる手段が無いまま画面を覆ってしまうため。 */
.kajitan-intro {
	display: none;
}

.kajitan-js .kajitan-intro {
	position: fixed;
	z-index: 100;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--paper, #f5f5f5);
	color: var(--ink, #202020);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.55s;
}

.kajitan-js .kajitan-intro.is-done {
	opacity: 0;
	visibility: hidden;
}

/* カウンターはサイト本文と同じ書体で組む。
   数字の幅が揃わないとカウント中に揺れるため tabular-nums を効かせる。 */
.kajitan-intro__count {
	margin: 0;
	font-family: var(--sans, sans-serif);
	font-size: clamp(48px, 9vw, 120px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.kajitan-intro__word {
	position: absolute;
	left: clamp(20px, 4vw, 60px);
	bottom: 30px;
	margin: 0;
	color: var(--muted, #676767);
	font-family: monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
}

/* 右下の進捗バー。幅は JavaScript が直接書き換える */
.kajitan-intro__line {
	position: absolute;
	right: clamp(20px, 4vw, 60px);
	bottom: 35px;
	width: clamp(120px, 25vw, 340px);
	height: 1px;
	background: var(--line, #d3d3d3);
}

.kajitan-intro__line span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--orange, #4f4f4f);
	transition: width 0.08s linear;
}

/* 動きを減らす設定のときは、フェードだけにして点滅を避ける */
@media (prefers-reduced-motion: reduce) {
	.kajitan-js .kajitan-intro {
		transition: opacity 0.2s linear, visibility 0.2s;
	}

	.kajitan-intro__line span {
		transition: none;
	}
}


/* ==========================================================================
   02. お問い合わせフォームの補助表示
   ========================================================================== */

/* 郵便番号欄の下に出す案内と、取得中・失敗時の状態表示 */
.kajitan-postal-note {
	margin: 6px 0 0;
	color: var(--muted, #676767);
	font-size: 12px;
	line-height: 1.7;
}

.kajitan-postal-note[data-state="loading"] {
	opacity: 0.7;
}

.kajitan-postal-note[data-state="error"] {
	color: #b4342b;
}


/* ==========================================================================
   03. 差し色（オレンジ）
   ========================================================================== */

/* site.css の --orange はグレー（#4f4f4f）で、差し色として機能していない。
   レイアウトには一切触れず、色だけを差し替える。

   明るい面（--paper #f5f5f5）に対して #ef4b2c は 3.2:1 しかなく、
   WCAG AA の 4.5:1 に届かない。装飾や面には鮮やかな方を使い、
   小さな文字には濃い方を当てて読めるようにする。 */
:root {
	--orange: #ef4b2c;
	--orange-text: #c2410c;
}

/* 小さな文字で使われている箇所だけ、濃い方に差し替える。
   暗い面のラベル（.hero .eyebrow / .process .eyebrow / .footer-cta .eyebrow）は
   site.css が個別にグレーを当てているので触らない。 */
.eyebrow,
.required,
.site-nav a[aria-current="page"],
.rail-index a[aria-current="page"],
.text-link:hover,
.price-tabs [aria-selected="true"] {
	color: var(--orange-text);
}

/* 暗いヒーローの上に出る矢印は、濃くすると沈むので鮮やかなまま */
.hero-bottom a::before {
	color: var(--orange);
}


/* ==========================================================================
   04. お問い合わせフォームの調整
   ========================================================================== */

/* 姓・名 / セイ・メイ の横並び。
   site.css には .form-grid しか無く、CF7側のマークアップが使う
   .form-row--split に対応する指定が無かった。 */
.form-row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* 横並びの中では、各項目の下余白を親側の gap に任せる */
.form-row--split .form-field {
	margin-bottom: 0;
}

.form-row--split + .form-row--split,
.form-row--split + .form-field,
.form-row--split + .h-adr {
	margin-top: 21px;
}

/* 項目名と入力欄の間隔を詰める。8px では離れて見えるため */
.form-field label,
.wpcf7 label {
	margin-bottom: 4px;
	line-height: 1.6;
}

/* フォーカスの枠を入力欄の輪郭に合わせる。
   site.css は outline-offset: 5px で、枠から離れた位置に出ていた。
   入力欄は角丸なしなので、輪郭にぴったり重ねる。 */
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: -2px;
	border-color: var(--orange);
}

/* ボタンやリンクは面から少し離したほうが見やすいので、
   入力欄ほど詰めず、色だけ差し色に揃える */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline-color: var(--orange);
	outline-offset: 3px;
}

/* スマホ幅では姓名を縦に積む */
@media (max-width: 600px) {
	.form-row--split {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.form-row--split .form-field {
		margin-bottom: 21px;
	}
}


/* ==========================================================================
   05. 送信ボタンと送信まわり
   ========================================================================== */

/* site.css の .form-submit は、CF7側で class:form-submit を付けた場合だけ効く。
   クラスが無いフォームでもデザインが当たるよう、submit そのものを指定する。
   入力欄の共通指定は :not([type=submit]) で submit を外しているため、
   ここで拾わないとブラウザ既定の見た目になる。 */
.wpcf7 input[type="submit"],
.wpcf7 .form-submit,
.wpcf7 button[type="submit"] {
	width: 100%;
	min-height: 56px;
	padding: 16px 24px;
	border: 1px solid var(--ink, #202020);
	border-radius: 0;
	background: var(--ink, #202020);
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.25s, border-color 0.25s, transform 0.25s;
	-webkit-appearance: none;
	appearance: none;
}

/* ホバーの振る舞いはサイトのボタンと揃える */
.wpcf7 input[type="submit"]:hover,
.wpcf7 .form-submit:hover,
.wpcf7 button[type="submit"]:hover {
	background: var(--orange, #ef4b2c);
	border-color: var(--orange, #ef4b2c);
	transform: translateY(-2px);
}

.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible {
	outline: 2px solid var(--orange, #ef4b2c);
	outline-offset: 3px;
}

/* 送信中は押せないので、その状態を見た目でも伝える */
.wpcf7 input[type="submit"]:disabled,
.wpcf7 button[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* 送信ボタンの直後に出る読み込み中の印。
   既定では左に詰まって見えるので、中央に置いて余白をとる */
.wpcf7 .wpcf7-spinner {
	display: block;
	margin: 14px auto 0;
}

/* 送信ボタンを囲む段落の余白を整える。
   CF7 が自動で <p> を付けた場合にも効くようにしている */
.wpcf7 form p:has(> input[type="submit"]) {
	margin-top: 26px;
	margin-bottom: 0;
}


/* ==========================================================================
   06. ベースフォント（丸ゴシック）と見出し（明朝）
   ========================================================================== */

/* site.css は後半の「Studio 2」レイヤーで --serif を --sans（Manrope /
   Noto Sans JP）に上書きしており、見出し（h1〜h3）は現状ゴシックで
   組まれている。ここで本文用に丸ゴシック（M PLUS Rounded 1c）、
   見出し用に明朝（Noto Serif JP）をWebフォントとして当て直す。
   :root は後に読まれた指定が勝つので、site.css より後に読まれる
   このファイルの指定が最終的に効く。 */
:root {
	--sans: "M PLUS Rounded 1c", "Noto Sans JP", "Yu Gothic", sans-serif;
	--serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* ワードマーク（KAJITAN）・価格の金額などは site.css側でGeorgiaや
   monospaceを直接指定していて --sans / --serif を参照していない。
   ここには触れておらず、見た目は変わらない。 */

/* トップのヒーロー見出し（h1）だけは、site.css の「Studio 2」レイヤーが
   font-family: var(--sans) と個別指定していて --serif を見ない。
   サイズ・太さ・字間・行間はそのままに、書体だけ明朝に戻す。 */
.hero h1 {
	font-family: var(--serif);
}


/* ==========================================================================
   07. ヘッダー・フッターのリンクホバーと「相談する」ボタン
   ========================================================================== */

/* フッターのリンク（SERVICE〜PRIVACY）には、ヘッダーと違って
   ホバー時の色指定が無かった。ヘッダーに合わせてオレンジにする。
   footer-linksは素の<a>で、コアのナビゲーションブロックでは
   ないため、下記のような詳細度の問題は起きない。 */
.footer-links a:hover {
	color: var(--orange);
}

/* ヘッダー脇の縦のサイドナビ（01〜06）も、現在ページの色指定
   （.rail-index a[aria-current=page]）はあるのにホバーの色指定が
   site.css に無かった。ヘッダー本体のナビと同じくオレンジにする。
   こちらも素の<a>なので同様に詳細度の問題は起きない。 */
.rail-index a:hover {
	color: var(--orange);
}

/* ヘッダー本体（コアのナビゲーションブロック）のリンクホバー：
   site.css には .native-nav a:hover{color:var(--orange)} があるが、
   実際にはWordPress core側の
     wp-includes/blocks/navigation/style.min.css の
     .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}
   に負けて効いていなかった。クラスを2回重ねる詳細度稼ぎ
  （(0,3,0)）が、こちらの .native-nav a:hover（(0,2,1)）を
   読み込み順に関係なく上回っていたため。
   同じ詳細度稼ぎで書き直し、(0,4,0) にして確実に上回るようにする。 */
.native-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--orange);
}

/* ヘッダーの「相談する」ボタン：
   nav-contact という追加CSSクラスは、ナビゲーションブロック上では
   <a> ではなく <li class="wp-block-navigation-item nav-contact"> に
   付く。そのため site.css は
     - 背景色・min-width・paddingを li（.site-nav .nav-contact）に
     - ホバー時の背景オレンジを a（.native-nav .nav-contact a）に
   と別々の要素へ指定してしまっている。liの幅（min-width:150px）と
   aの幅（テキストなりの自然な幅）が一致しないため、ホバー時に
   オレンジになる範囲がボタンの見た目より狭く、中途半端に見えていた。

   ボタンの見た目（背景色・幅・余白）をすべてa側に一本化し、
   クリックできる範囲＝見た目の範囲に揃える。li側は透明にして
   二重に背景が乗らないようにする。 */
.native-nav .nav-contact {
	background: transparent;
	min-width: 0;
}

.native-nav .nav-contact a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-width: 150px;
	padding: 17px 25px;
	background: var(--ink);
	color: #ffffff;
}

/* すぐ上の「ヘッダー本体のリンクホバー」を (0,4,0) にしたため、
   「相談する」だけホバーで白のままにするこちらは、それより
   詳細度を上げて (0,5,0) にしておかないと上書きされてしまう。 */
.native-nav .nav-contact .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	background: var(--orange);
	color: #ffffff;
}


/* ==========================================================================
   08. PRIVACY / TRADELAW ページ（k-* クラスの見た目が未対応だった分）
   ========================================================================== */

/* /privacy/ と /tradelaw/ の本文は、site.css が想定している
   .legal-layout 系のクラスではなく、k-legal / k-container / k-trade /
   k-table / k-accordion / k-label / k-note-box という別系統のクラス名で
   組まれている（このリポジトリの content/privacy.html・
   content/tradelaw.html とは別物で、本番のWordPress側で本文が
   直接編集されたものと見られる）。このクラス名に対応するCSSが
   site.css / extras.css のどちらにも存在しなかったため、素の
   ブロック要素のまま無整形で表示され、レイアウトが崩れて見えていた。

   本文の構造・文面には触れず、見た目だけを他ページに揃える。
   js-accordion / js-reveal は開閉・出現アニメーション用のフックと
   見られるが、それを動かすJavaScriptがテーマ側に存在しないため、
   ここでは「常に開いた状態のFAQリスト」として静的に整形している
   （クリックしても開閉はしない）。開閉を実装したい場合は別途JSが要る。 */

.k-container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 64px;
}

.page-section {
	padding-block: 100px;
}

.k-eyebrow {
	font-family: monospace;
	font-size: 12px;
	letter-spacing: 0.09em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--orange-text, var(--orange));
	margin-bottom: 16px;
}

@media (max-width: 1150px) {
	.k-container {
		padding-inline: 40px;
	}
}

@media (max-width: 800px) {
	.k-container {
		padding-inline: 26px;
	}

	.page-section {
		padding-block: 64px;
	}
}

/* ---- PRIVACY ---- */

.k-legal__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	padding-bottom: 40px;
	margin-bottom: 60px;
	border-bottom: 1px solid var(--line);
}

.k-legal__head > div p:last-child {
	font-family: var(--serif);
	font-size: 22px;
}

.k-legal__head > p {
	max-width: 480px;
	font-size: 15px;
	line-height: 2.1;
	color: var(--muted);
}

.k-legal {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 65px;
}

.k-legal__toc {
	align-self: start;
	position: sticky;
	top: 120px;
}

.k-legal__toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-legal__toc li {
	font-size: 13px;
	color: var(--muted);
	padding-block: 6px;
	border-top: 1px solid var(--line);
}

.k-accordion__item {
	padding-block: 26px;
	border-bottom: 1px solid var(--line);
}

.js-accordion-head {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 12px;
}

.js-accordion-body p {
	font-size: 14px;
	line-height: 2.1;
	color: #555555;
}

.k-legal__note {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
}

.k-legal__note a {
	text-decoration: underline;
}

@media (max-width: 1150px) {
	.k-legal {
		grid-template-columns: 190px 1fr;
		gap: 35px;
	}
}

@media (max-width: 800px) {
	.k-legal {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.k-legal__toc {
		position: static;
	}

	.k-legal__toc ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 16px;
	}

	.k-legal__toc li {
		border-top: 0;
		padding-block: 0;
	}
}

/* ---- TRADELAW ---- */

.k-trade > div:first-child {
	margin-bottom: 40px;
}

.k-label p:first-child {
	font-family: monospace;
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--orange-text, var(--orange));
	margin-bottom: 14px;
}

.k-label p:last-child {
	font-family: var(--serif);
	font-size: clamp(26px, 3vw, 38px);
	letter-spacing: 0.03em;
}

.k-trade > div:first-child > p {
	max-width: 480px;
	margin-top: 20px;
	font-size: 15px;
	line-height: 2.1;
	color: var(--muted);
}

.k-table {
	margin-top: 40px;
}

.k-note-box {
	margin-top: 45px;
	padding: 30px 34px;
	background: #e8e8e8;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

.k-note-box .wp-block-buttons {
	margin: 0;
}

@media (max-width: 800px) {
	.k-note-box {
		display: block;
		padding: 25px;
	}

	.k-note-box .wp-block-buttons {
		margin-top: 20px;
	}
}