/*
 * WING SHOES の手直し
 *
 * assets/styles.css は納品物そのままにしておきたいので、あとから足した
 * 調整はこのファイルに分ける（テーマの extras.css と同じ考え方）。
 * styles.css のあとに読み込むので、同じ詳細度なら上書きできる。
 *
 *   01. ヘッダーを大きくする（PC）
 *   02. メニューの開閉をなめらかに（スマホ）
 *   03. 予約フォームのテーブルレイアウト
 *   04. プライバシーポリシーのポップアップ
 *   05. 「こんな悩みはありませんか？」の背景のなじませ
 *   06. よくある質問の ＋ − の切り替え
 */


/* ==========================================================================
   01. ヘッダーを大きくする（PC）
   ========================================================================== */

/* 900px より広いときだけ。狭い幅は元の寸法のままにしておく。 */
@media (min-width: 901px) {
	.header {
		height: 74px;
	}

	.brand {
		font-size: 17px;
		gap: 11px;
		letter-spacing: 0.06em;
	}

	.brand-wing {
		width: 44px;
		height: 26px;
	}

	.header nav {
		gap: 26px;
	}

	.header nav > a:not(.button) {
		font-size: 14.5px;
		letter-spacing: 0.02em;
	}

	.header .button.small {
		min-height: 44px;
		padding: 8px 22px;
		font-size: 13.5px;
		gap: 12px;
	}

	/* ヘッダーが背が高くなったぶん、ページ内リンクの止まる位置をずらす */
	html {
		scroll-padding-top: 86px;
	}
}


/* ==========================================================================
   02. メニューの開閉をなめらかに（スマホ）
   ========================================================================== */

@media (max-width: 900px) {
	/* 元は is-open の付け外しで一瞬で出ていた。高さではなく
	   透明度と位置で動かすので、中身の高さを測らずに済む。 */
	.header nav {
		display: block;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px) scaleY(0.97);
		transform-origin: top center;
		transition:
			opacity 0.26s ease,
			transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0.26s;
	}

	.header nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* ハンバーガーの3本線も、開くときに×へ寄せる */
	.menu-toggle span {
		transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.header nav,
	.menu-toggle span {
		transition: none;
	}
}


/* ==========================================================================
   03. 予約フォームのテーブルレイアウト
   ========================================================================== */

.ftable {
	border-top: 1px solid #d3e1ed;
}

.frow {
	display: grid;
	/* 「ご希望の靴のサイズ（cm）」＋必須が1行に収まる幅 */
	grid-template-columns: 250px 1fr;
	gap: 0 24px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid #d3e1ed;
}

.fth {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 11px;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
}

.fth label,
.fth-label {
	font-weight: 700;
	cursor: default;
}

.req {
	padding: 2px 7px;
	border-radius: 3px;
	background: #c9972e;
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.ftd {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* 姓・名 / セイ・メイ は横に並べる */
.ftd--split {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 16px;
}

.ftd--split .fsub {
	flex: 1 1 200px;
}

.fsub {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.fsub > label {
	flex: 0 0 auto;
	width: 6.5em;
	font-size: 12.5px;
	font-weight: 500;
	color: #4b6480;
}

.ftd--split .fsub > label {
	width: 2.2em;
}

.fsub--postal input {
	max-width: 11em;
}

.ftd input,
.ftd select,
.ftd textarea {
	width: 100%;
	min-width: 0;
	padding: 11px 13px;
	border: 1px solid #c9deee;
	border-radius: 3px;
	background: #ffffff;
	color: var(--navy);
	font: inherit;
	font-size: 15px;
}

.ftd select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #4b6480 50%), linear-gradient(135deg, #4b6480 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
	max-width: 16em;
}

.ftd textarea {
	resize: vertical;
}

.ftd input:focus-visible,
.ftd select:focus-visible,
.ftd textarea:focus-visible {
	outline: 2px solid #c9972e;
	outline-offset: -2px;
	border-color: #c9972e;
}

.fnote {
	flex: 1 0 100%;
	font-size: 11.5px;
	line-height: 1.7;
	color: #6a8099;
}

/* 郵便番号から住所を取りにいっている間と、取れなかったとき */
.fnote[data-state="loading"] {
	opacity: 0.7;
}

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

/* ---- 同意のチェック ---- */

.frow--consent .fth {
	padding-top: 2px;
}

/* チェックボックスと文字の中心をそろえる。
   styles.css の input,textarea{min-height:47px} をそのまま受けると、
   チェックボックスが縦47pxに伸びて文字と大きくずれるので打ち消す。 */
.fconsent {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 11px;
	font-size: 14px;
	line-height: 1.8;
	cursor: pointer;
}

.fconsent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	/* 1行の高さ（14px × 1.8 ≒ 25px）の中心に合わせる */
	margin: 3.5px 0 0;
	padding: 0;
	accent-color: #c9972e;
	cursor: pointer;
}

/* ポップアップを開くボタン。見た目はテキストリンク。 */
.flink {
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--navy);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.flink:hover {
	color: #c9972e;
}

.flink:focus-visible {
	outline: 2px solid #c9972e;
	outline-offset: 2px;
}

/* ---- 狭い幅では縦に積む ---- */

@media (max-width: 760px) {
	.frow {
		grid-template-columns: 1fr;
		gap: 9px;
		padding: 16px 0;
	}

	.fth {
		padding-top: 0;
		font-size: 13.5px;
	}

	/* 項目名はどれも入力欄の上に置く。郵便番号だけ幅が狭くて横に
	   並んでしまい、他とそろわなかったため。 */
	.fsub {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.fsub > label,
	.ftd--split .fsub > label {
		width: auto;
	}

	.fsub--postal input {
		max-width: 13em;
	}

	.ftd--split .fsub {
		flex: 1 1 100%;
	}

	.ftd select {
		max-width: none;
	}
}


/* ==========================================================================
   04. プライバシーポリシーのポップアップ
   ========================================================================== */

.pmodal {
	position: fixed;
	z-index: 2147481000;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(12, 46, 93, 0.6);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pmodal[hidden] {
	display: none;
}

.pmodal__panel {
	max-width: 36rem;
	margin: auto;
	padding: clamp(24px, 4vw, 38px);
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.pmodal__title {
	margin: 0 0 14px;
	font-family: var(--serif);
	font-size: 21px;
	color: var(--navy);
}

.pmodal__lead {
	margin: 0 0 20px;
	padding: 11px 14px;
	background: #fdf6e6;
	border-left: 3px solid #c9972e;
	font-size: 13px;
	line-height: 1.9;
}

.pmodal__panel h3 {
	margin: 18px 0 5px;
	font-size: 14px;
	color: var(--navy);
}

.pmodal__panel p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.95;
	color: #3d566f;
}

.pmodal__note {
	margin-top: 22px !important;
	padding-top: 16px;
	border-top: 1px solid #dde8f2;
	font-size: 12.5px !important;
}

.pmodal__close {
	appearance: none;
	width: 100%;
	margin-top: 26px;
	padding: 13px 20px;
	border: 1px solid var(--navy);
	border-radius: 3px;
	background: var(--navy);
	color: #ffffff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
}

.pmodal__close:hover {
	background: #163f78;
}

.pmodal__close:focus-visible {
	outline: 3px solid #c9972e;
	outline-offset: 2px;
}


/* ==========================================================================
   05. 「こんな悩みはありませんか？」の背景のなじませ
   ========================================================================== */

/* 元の指定は透明から紺までを19%の幅で変えていて、色の変わり目が
   帯のように見えていた。

     .concerns:after{background:linear-gradient(90deg,transparent 38%,#102a46 57%)}

   ・変わりはじめを写真側へ大きく前倒しして、ならす幅を広くとる
   ・途中に段を細かく置き、真ん中がいちばん速く変わる曲線にする。
     等間隔（直線）のままだと、変わりはじめと終わりが目につく
   ・`transparent` ではなく同じ紺の透明（#102a4600）から始める。
     `transparent` は「透明な黒」なので、混ざる途中でくすむ

   文字が乗るのは左から51%より右。そこまでにほぼ不透明になるよう、
   後半はしっかり詰めている。 */
.concerns::after {
	background: linear-gradient(
		90deg,
		#102a4600 8%,
		#102a460a 20%,
		#102a461f 30%,
		#102a4642 38%,
		#102a4673 45%,
		#102a46a8 50%,
		#102a46d9 54%,
		#102a46f5 58%,
		#102a46 63%
	);
}

/* かぶせる色をなだらかにしても、**写真そのものの右端が切り落とし**なので
   そこに縦の線が残る。写真側も端に向かって消えるようにして、線を無くす。
   （％は写真の箱に対する割合。写真の箱はセクションの左から56%まで）

   スマホでは写真が横いっぱい・文字が下に回るので、この指定をかけると
   右側だけが薄くなっておかしくなる。横並びのときだけに効かせる。 */
@media (min-width: 701px) {
	.panel-concerns {
		-webkit-mask-image: linear-gradient(90deg, #000 62%, #0000 100%);
		mask-image: linear-gradient(90deg, #000 62%, #0000 100%);
	}
}

/* スマホは写真が上・文字が下。こちらも同じ考え方でならす。
   写真の高さは300px、文字が始まるのは290px。 */
@media (max-width: 700px) {
	.concerns::after {
		background: linear-gradient(
			180deg,
			#102a4600 100px,
			#102a460a 150px,
			#102a461f 185px,
			#102a4642 212px,
			#102a4673 234px,
			#102a46a8 252px,
			#102a46d9 268px,
			#102a46f5 284px,
			#102a46 300px
		);
	}
}


/* ==========================================================================
   06. よくある質問の ＋ − を、回して切り替える
   ========================================================================== */

/* 元は content の文字を '+' と '−' で差し替えていて、一瞬で切り替わる。
   文字ではなく2本の棒で描き、縦棒を倒して − にする。

     .faq summary:after{content:'+';…}
     .faq details[open] summary:after{content:'−'}

   content は details[open] 側の指定（詳細度が高い）も空にしておかないと、
   文字が残って棒と重なる。 */

.faq summary::before,
.faq summary::after,
.faq details[open] summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 13px;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.34s cubic-bezier(0.34, 1.3, 0.5, 1);
}

/* 縦棒。開いたら倒して横棒と重ね、− に見せる */
.faq summary::before {
	transform: rotate(90deg);
}

.faq details[open] summary::before {
	transform: rotate(0deg);
}

/* 横棒も半回転させて、全体がくるりと回るようにする */
.faq details[open] summary::after {
	transform: rotate(180deg);
}

/* 開閉の動きのあいだは、まだ details[open] が切り替わっていない
   （閉じる動きは open のまま高さを縮めている）。[open] だけを見て
   描くと、棒の回転だけが 0.4秒遅れて始まる。動きのクラスを先に見る。

   `.faq details[open] summary::after` より強くする必要があるので、
   `.faq` を頭に付けて詳細度を上げている。 */
.faq [data-kj-details].is-opening summary::before {
	transform: rotate(0deg);
}

.faq [data-kj-details].is-opening summary::after {
	transform: rotate(180deg);
}

.faq [data-kj-details].is-closing summary::before {
	transform: rotate(90deg);
}

.faq [data-kj-details].is-closing summary::after {
	transform: rotate(0deg);
}

@media (max-width: 700px) {
	.faq summary::before,
	.faq summary::after,
	.faq details[open] summary::after {
		right: 14px;
		width: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq summary::before,
	.faq summary::after {
		transition: none;
	}
}


/* ==========================================================================
   04b. プライバシーポリシーのポップアップをなめらかに開閉する
   ==========================================================================

   hidden の付け外しでパッと出てパッと消えていた。暗幕は濃さだけ、
   中の白い面は少し下から浮き上がる。閉じたあとも動き終わるまで
   表示を残すため、display を allow-discrete で遅らせる
   （開閉の JavaScript は納品物のまま）。
   他のLPの <dialog> と同じ動き（_shared/motion.css）にそろえてある。 */

.pmodal {
	opacity: 1;
	transition:
		opacity 0.28s ease,
		display 0.36s allow-discrete;
}

.pmodal[hidden] {
	opacity: 0;
}

.pmodal__panel {
	transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.pmodal[hidden] .pmodal__panel {
	transform: translateY(14px) scale(0.98);
}

@starting-style {
	.pmodal:not([hidden]) {
		opacity: 0;
	}

	.pmodal:not([hidden]) .pmodal__panel {
		transform: translateY(14px) scale(0.98);
	}
}

/* 「動きを減らす」設定でも止めきらず、濃さだけを短く。
   納品CSSの `*{transition:none!important}` を上書きする */
@media (prefers-reduced-motion: reduce) {
	.pmodal {
		transition:
			opacity 0.15s linear,
			display 0.15s allow-discrete !important;
	}

	.pmodal[hidden] .pmodal__panel {
		transform: none;
	}

	@starting-style {
		.pmodal:not([hidden]) .pmodal__panel {
			transform: none;
		}
	}
}