/* maholoba-coconaru ― +α（静寂版への追加分）
   ベースの style.css は変更せず、追加はこのファイルだけ。
   追加の内容：
   1. 背景に写真を敷いたセクション（.bgsec）― 下層ページ見出し .phead と同じ見た目の作り
   2. Instagramの投稿一覧グリッド（.iggrid）― 今のWordPressサイトの表示に合わせる
   3. 予約カレンダー（.calwrap）― 今のサイトのカレンダーをページ内に表示
   4. 差し色テラコッタ（--terra）― 基本の色設定はそのままに、小さな部分だけ */

/* ── 4. 差し色：テラコッタ ── */
:root{--terra:#B2603C}
/* トップの大きな写真の下の、小さな縦線 */
.hero .rule{background:rgba(178,96,60,.9)}
/* 各見出しの日本語の両脇にある細い線 */
.sh .ja::before,.sh .ja::after{background:var(--terra);opacity:.85}
/* サービス紹介の小さな英字ラベル */
.svc .en{color:var(--terra)}
/* 予約カレンダーの○印と日曜 */
.calwrap .calendar-marking{color:var(--terra)}
.calwrap .calendar-mark a{color:var(--terra)}
.calwrap td.sun .day-number{color:var(--terra)}
.calwrap th.sun{color:var(--terra)}
.calwrap .monthly-prev-next a{color:var(--terra)}
.calwrap .calendar-caption{color:var(--terra)}
/* ── 差し色の追加分（2026-11-06 ご希望で範囲を拡大） ── */
/* ヘッダーとフッターの蓮マーク */
.mark svg{color:var(--terra)}
.ft .mk svg{color:var(--terra)}
/* 各見出しの英字 */
.sh .en{color:var(--terra)}
/* ボタンの矢印ライン */
.btn::after{background:var(--terra)}
/* 料金の金額 */
.pr .amt{color:var(--terra)}
/* スケジュール表の曜日・時間ラベル */
.sch th{color:var(--terra)}
/* クラスページのステップ番号 */
.flow .n{color:var(--terra)}
/* 生徒さんの声の引用線 */
.quote{border-left-color:var(--terra)}
/* ブログの日付 */
.post .dt{color:var(--terra)}
/* ── 差し色の追加分（第2弾：塗りのボタンなど、目に入る部分にも） ── */
:root{--terra-l:#CE8B66}
/* 塗りのボタンをテラコッタに（ホバーでは元のこげ茶に戻る） */
.btn.fill{background:var(--terra);border-color:var(--terra)}
.btn.fill:hover{background:var(--ink);border-color:var(--ink)}
/* 枠だけのボタンは、ホバーでテラコッタに満ちる */
.btn:hover{background:var(--terra);border-color:var(--terra);color:#fff}
.btn.light:hover{background:#fff;border-color:#fff;color:var(--ink)}
/* 全画面メニューの現在地とホバー（暗い地なので少し明るいテラコッタ） */
.gnav a:hover{color:var(--terra-l)}
.gnav a[aria-current="page"]{color:var(--terra-l)}
/* 携帯のMENUボタンの線 */
.menu-btn i,.menu-btn i::before,.menu-btn i::after{background:var(--terra)}
/* 本文中のリンク */
.prose a{color:var(--terra)}
/* ブログのタグ */
.tag{color:var(--terra);border-color:rgba(178,96,60,.55)}
/* お問合わせフォーム：入力中の枠とチェック */
.fld input:focus,.fld textarea:focus{border-color:var(--terra)}
.chk input{accent-color:var(--terra)}
/* 文字を選んだときの色 */
::selection{background:rgba(178,96,60,.28)}

/* ── 1. 背景写真のセクション ── */
.bgsec{position:relative;min-height:clamp(430px,74vh,580px);overflow:hidden;background:var(--night2);color:var(--white);display:flex;align-items:center;justify-content:center;text-align:center}
.bgsec>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.62) brightness(.76)}
.bgsec::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,13,.46),rgba(20,16,13,.30) 50%,rgba(20,16,13,.52))}
.bgsec .t{position:relative;z-index:2;padding:96px var(--gut)}
.bgsec .en{display:block;font-family:var(--latin);font-weight:300;font-size:clamp(30px,5vw,52px);letter-spacing:.26em;text-transform:uppercase;line-height:1.2;padding-left:.26em}
.bgsec .ja{display:block;margin-top:16px;font-family:var(--serif);font-size:14.5px;letter-spacing:.3em;opacity:.92}
.bgsec p{margin-top:22px;font-size:14px;line-height:2.1;letter-spacing:.08em;opacity:.94}
.bgsec .btn{margin-top:36px}

/* ── 3. 予約カレンダー（今のサイトのプラグイン表示を、そのままページ内に） ── */
.calwrap{margin-top:56px}
.calwrap .calendar-title{font-family:var(--serif);font-weight:500;font-size:17.5px;letter-spacing:.14em;color:var(--ink);padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.calwrap table{width:100%;border-collapse:collapse;background:var(--white)}
.calwrap .calendar-caption{font-family:var(--serif);font-size:16.5px;letter-spacing:.14em;color:var(--ink);padding:14px 0 12px;caption-side:top}
.calwrap th{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.14em;color:var(--mute);border:1px solid var(--line);padding:8px 0;background:var(--paper)}
.calwrap th.sat{color:var(--ink2)}
.calwrap th.sun{color:var(--accent-d)}
.calwrap td.day-box{border:1px solid var(--line);width:14.28%;height:66px;vertical-align:top;padding:6px 7px;font-size:12px}
.calwrap td.no-day{background:var(--paper)}
.calwrap .day-number{font-family:var(--serif);font-size:14px;color:var(--ink);line-height:1.4}
.calwrap td.sun .day-number{color:var(--accent-d)}
.calwrap .calendar-mark{line-height:1.5}
.calwrap .calendar-mark a{text-decoration:none;color:var(--accent-d)}
.calwrap .calendar-marking{font-size:14px;color:var(--accent-d)}
.calwrap .monthly-prev-next{display:flex;justify-content:space-between;margin-top:14px;font-size:12.5px;letter-spacing:.1em;color:var(--mute)}
.calwrap .monthly-prev-next a{color:var(--accent-d);text-decoration:none}
@media (max-width:640px){.calwrap td.day-box{height:52px;padding:4px 5px}.calwrap .day-number{font-size:12.5px}.calwrap .calendar-marking{font-size:12px}}

/* ── 2. Instagram投稿一覧 ── */
.iggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:900px;margin:40px auto 0}
.iggrid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--night)}
.iggrid img{width:100%;height:100%;object-fit:cover;filter:saturate(.88);transition:transform 1.4s var(--ease)}
.iggrid a:hover img{transform:scale(1.05)}
@media (max-width:640px){.iggrid{gap:3px;margin-top:32px}}