/* 現行デザインとの差分調整はここに書く（自動生成ファイルは上書きされる） */

/* ──────────────────────────────────────────────────────────────
   パンくず（components/Breadcrumb.astro）

   現行はパンくずの内側が `l-container`（最大 1200px）なのに、本文は
   `.l-article`（`--article_size: 900px`・中央寄せ）なので、広い画面では
   パンくずだけが本文より外側に飛び出して見える。
   本文と同じ幅に合わせて中央に揃える（現行より整った状態にする）。

   `l-container` は左右に `--swl-pad_container` の余白を持つので、
   **本文の幅にその余白 2 つ分を足した値**を max-width にしないと、
   文字の開始位置が余白のぶんずれる。
   ────────────────────────────────────────────────────────────── */

.p-breadcrumb__list.l-container {
	max-width: calc(var(--article_size, 900px) + var(--swl-pad_container, 0px) * 2);
}

/* ──────────────────────────────────────────────────────────────
   問い合わせフォーム（src/components/form/AppForm.astro）

   移行元は MW WP Form。プラグインの CSS は持ってこないので、現行の見た目
   （`mw-wp-form/css/style.css` が当てていたもの）を自前で当てる。
   ★選択肢は **横並び**。現行は `.horizontal-item` を inline-block にしている。
     縦積みにすると学年やコース選択の見え方が大きく変わる（実際に指摘を受けた）。
   ★必須／任意のバッジは出さない。現行はラベル文字列に「（必須）」が入っている。
   ────────────────────────────────────────────────────────────── */

.app-form-wrap {
	margin: 1.5em 0;
}

.app-form-notice {
	padding: 1em 1.2em;
	margin-bottom: 1.5em;
	background: #f7f7f7;
	border-left: 4px solid var(--color_main, #05465f);
	font-size: 0.9em;
	line-height: 1.7;
}

/* フォーム内の地の文（見出し的な段落・注意書き）。本文と同じ見え方にする */
.app-form-lead {
	margin: 1.2em 0 0.6em;
}

/* 1 項目 = 1 段落。ラベル → <br> → 入力欄、の現行と同じ構造 */
.app-form-field {
	margin: 0 0 1.2em;
}

/* 選択肢の横並び（現行の .horizontal-item） */
.app-form-choice {
	display: inline-block;
	margin: 0 1.2em 0.2em 0;
	vertical-align: top;
}

.app-form-choice label {
	cursor: pointer;
}

.app-form-choice input {
	margin-right: 0.35em;
}

/* 入力欄は size / cols で幅を決める（現行と同じ）。width:100% にはしない */
.app-form-field input[type="text"],
.app-form-field input[type="email"],
.app-form-field input[type="tel"],
.app-form-field textarea {
	max-width: 100%;
	padding: 0.4em 0.6em;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	font-size: 1em;
	line-height: 1.6;
}

.app-form-field input:focus,
.app-form-field textarea:focus {
	border-color: var(--color_main, #05465f);
	outline: 2px solid rgba(5, 70, 95, 0.15);
	outline-offset: 1px;
}

.app-form-error {
	display: block;
	margin-top: 0.3em;
	font-size: 0.85em;
	color: #d94a4a;
}

.app-form-status {
	margin: 1em 0 0;
	font-weight: 700;
}

/* 送信ボタンはブラウザ既定の見た目（現行が <input type="submit"> のまま） */
.app-form-actions {
	margin: 1.5em 0 0;
}

.app-form-actions button + button {
	margin-left: 0.8em;
}

.app-form-confirm-list {
	margin: 0.8em 0 0;
}

.app-form-confirm-list dt {
	margin-top: 0.9em;
	font-weight: 700;
	font-size: 0.9em;
	color: #555;
}

.app-form-confirm-list dd {
	margin: 0.2em 0 0;
	padding-bottom: 0.5em;
	border-bottom: 1px dotted #ddd;
}

/* ──────────────────────────────────────────────────────────────
   Instagram セクション（src/components/InstagramFeed.astro）

   現行は Smash Balloon が 4 列のサムネイル格子を出していたが、
   Instagram 公式の埋め込みは 1 枚あたり最小幅 326px なので 4 列にできない。
   PC 2 列 / スマホ 1 列にしている。
   ────────────────────────────────────────────────────────────── */

.app-instagram__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0 0 1.5em;
}

@media (min-width: 700px) {
	.app-instagram__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 公式スクリプトが差し込む iframe が親を突き抜けないようにする */
.app-instagram__grid > blockquote.instagram-media {
	margin: 0 !important;
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

.app-instagram__follow {
	margin: 0;
	text-align: center;
}

/* 現行（Smash Balloon）のフォローボタンと同じ見た目 */
.app-instagram__follow a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.7em 1.4em;
	border-radius: 4px;
	color: #fff;
	font-size: 0.9em;
	line-height: 1.2;
	text-decoration: none;
}

.app-instagram__follow a:hover {
	opacity: 0.85;
}