/* =========================================================
   Page-specific styles (merged from prototype inline <style>)
   ========================================================= */

/* ---------- front page: hero ---------- */
.hero { position: relative; overflow: hidden; min-height: min(88vh, 820px); display:flex; background:#F7F5EF; }
.hero-slider { position:absolute; inset:0; z-index:0; }
.hero-slide {
  position:absolute; inset:0;
  opacity:0; transition: opacity 1.1s ease;
  pointer-events:none;
}
.hero-slide.is-active { opacity:1; }
.hero-slide .ph { position:absolute; inset:0; }
.hero-slide .hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-slide .hero-img-counsel { object-position:center 42%; }
.hero-slide .hero-img-product {
  object-fit:contain; object-position:center 62%; background:#F7F5EF;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 46%, #000 54%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 46%, #000 54%, transparent 100%);
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(105deg, rgba(20,30,24,.74) 0%, rgba(20,30,24,.5) 42%, rgba(20,30,24,.16) 72%, rgba(20,30,24,.05) 100%);
}
.hero-copy {
  position:relative; z-index:2;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px,7vw,96px) clamp(28px,6vw,84px);
  max-width: 700px; color:#F2F4ED;
}
.hero-copy .eyebrow { color: var(--gold-soft); }
.hero-copy .eyebrow::before { background: var(--gold-soft); }
.hero-copy h1 { margin: 26px 0 28px; color:#F4F6EF; text-shadow: 0 2px 24px rgba(15,24,18,.45); }
.hero-copy h1 .accent { color: var(--gold-soft); }
.hero-copy .lead { color: #E2E7DD; }
.hero-actions { display:flex; flex-wrap:wrap; gap: 14px; margin-top: 14px; }
.hero-actions .btn.ghost { color:#F2F4ED; --b:#F2F4ED; }
.hero-actions .btn.ghost:hover { background:#F2F4ED; color:var(--green); }
.hero-dots {
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; gap:11px; z-index:3;
}
.hero-dots button {
  width:9px; height:9px; padding:0; border-radius:100px; cursor:pointer;
  border:1px solid rgba(252,251,246,.85); background:transparent;
  transition: background .3s ease, width .3s ease;
}
.hero-dots button.is-active { background:var(--gold-soft); border-color:var(--gold-soft); width:26px; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition:none; } }

/* front page: renewal note bar */
.renew {
  background: var(--green-deep); color:#D7DED4; text-align:center;
  font-size: 13px; letter-spacing:.08em; padding: 11px 20px;
}
.renew b { color:#fff; font-weight:600; }

/* front page: philosophy split */
.philo { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,90px); align-items:center; }
.philo .ph { aspect-ratio: 4/5; border-radius: var(--radius); }

/* front page: pillars */
.pillar { padding: 8px 4px; }
.pillar .ph { aspect-ratio: 3/2; border-radius: var(--radius); margin-bottom: 22px; }
.pillar .idx { display:block; margin-bottom: 10px; }
.pillar h3 { margin-bottom: 12px; }
.pillar p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.95; margin:0; }

/* front page: menu excerpt */
.menu-row {
  display:grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items:center;
  padding: 26px 4px; border-top:1px solid var(--line);
}
.menu-row:last-child { border-bottom:1px solid var(--line); }
.menu-row .idx { font-size: 16px; }
.menu-row h3 { font-size: 21px; margin-bottom: 4px; }
.menu-row .desc { font-size:13.5px; color: var(--muted); margin:0; }
.menu-row .price { font-family: var(--serif); font-size: 22px; color: var(--green); white-space:nowrap; }
.menu-row .price small { font-family: var(--sans); font-size:12px; color:var(--muted); letter-spacing:.04em; }

/* front page: flow strip */
.flow-strip { counter-reset: step; display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.flow-step { position: relative; padding-top: 30px; }
.flow-step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--latin); font-size: 15px; letter-spacing:.16em; color: var(--gold); font-weight:600;
}
.flow-step h3 { font-size: 18px; margin: 10px 0 8px; }
.flow-step p { font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.85; }
.flow-step .bar { position:absolute; top: 8px; left:0; width: 22px; height:1px; background: var(--gold); }

/* front page: voice */
.voice { display:grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
.voice-card { background: var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); padding: 34px 34px 30px; }
.voice-card blockquote { margin:0 0 18px; font-family:var(--serif); font-size: 18px; line-height:1.8; color:var(--green); }
.voice-card .who { font-size:13px; color:var(--muted); letter-spacing:.04em; }
.stars { color: var(--gold); letter-spacing:.18em; font-size:13px; margin-bottom:12px; }

/* front page: salon access */
.salon { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px,5vw,72px); align-items:center; }
.salon .ph { aspect-ratio: 5/4; border-radius:var(--radius); }
.info-table { width:100%; border-collapse:collapse; margin-top: 8px; }
.info-table th, .info-table td { text-align:left; padding: 15px 0; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top; }
.info-table th { width: 124px; color: var(--muted); font-weight:500; letter-spacing:.08em; }
.info-table td { color: var(--ink); }

/* CTA band (shared) */
.cta-band { text-align:center; }
.cta-band h2 { margin-bottom: 18px; }
.cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top: 30px; }
.cta-actions .tel-block { text-align:center; }
.cta-actions .tel-block .num { font-family:var(--latin); font-size: 30px; font-weight:600; letter-spacing:.05em; color:#EDEFE8; }
.cta-actions .tel-block .hours { font-size:12px; color:#9FAB9C; letter-spacing:.1em; }

@media (max-width: 880px) {
  .hero-slide .hero-img-product {
    object-fit:cover; object-position:center center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 62%, transparent 100%);
  }
  .philo, .salon { grid-template-columns: 1fr; }
  .flow-strip { grid-template-columns: repeat(2,1fr); gap: 30px; }
  .voice { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .menu-row { grid-template-columns: 1fr auto; }
  .menu-row .idx { display:none; }
  .flow-strip { grid-template-columns: 1fr 1fr; }
}

/* ---------- page: シミケアとは ---------- */
.story { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,84px); align-items:center; }
.story .ph { aspect-ratio: 4/5; border-radius: var(--radius); }
.types { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,3vw,32px); }
.type-card { background: var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); padding: 30px 32px; }
.type-card .ph { aspect-ratio: 16/7; border-radius:var(--radius); margin-bottom: 20px; }
.type-card .tag { font-family:var(--latin); font-size:12px; letter-spacing:.16em; color:var(--gold); font-weight:600; }
.type-card h3 { font-size: 21px; margin: 8px 0 10px; }
.type-card p { font-size:14px; color:var(--ink-soft); margin:0; line-height:1.9; }
.approach { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(22px,3vw,40px); counter-reset: ap; }
.approach .step { padding-top: 26px; position:relative; }
.approach .step::before { counter-increment: ap; content: "0" counter(ap); font-family:var(--latin); font-size:34px; color:var(--green-tint); font-weight:600; position:absolute; top:-14px; left:0; }
.approach .step .inner { position:relative; }
.approach h3 { font-size:19px; margin:0 0 10px; }
.approach p { font-size:14px; color:var(--ink-soft); margin:0; line-height:1.9; }
@media (max-width:880px){ .story,.types,.approach{ grid-template-columns:1fr; } }

/* ---------- page: メニュー・料金 ---------- */
.menu-cat { margin-bottom: clamp(48px,6vw,80px); }
.menu-cat:last-child { margin-bottom:0; }
.cat-head { display:flex; align-items:baseline; gap:18px; padding-bottom:18px; border-bottom:2px solid var(--green); margin-bottom: 8px; }
.cat-head .num { font-family:var(--latin); font-size:15px; letter-spacing:.18em; color:var(--gold); font-weight:600; }
.cat-head h2 { font-size: clamp(22px,2.6vw,30px); }
.cat-head .en { font-family:var(--latin); font-size:14px; letter-spacing:.14em; color:var(--muted); margin-left:auto; }
.m-item { display:grid; grid-template-columns: 1fr auto; gap: 20px 28px; align-items:start; padding: 24px 4px; border-bottom:1px solid var(--line); }
.m-item .name { font-family:var(--serif); font-size: 20px; color:var(--ink); }
.m-item .meta { font-size:12.5px; color:var(--muted); letter-spacing:.06em; margin-top:4px; }
.m-item .desc { font-size:13.5px; color:var(--ink-soft); line-height:1.85; margin:8px 0 0; max-width: 560px; }
.m-item .price { font-family:var(--serif); font-size: 23px; color:var(--green); white-space:nowrap; text-align:right; }
.m-item .price small { font-family:var(--sans); font-size:12px; color:var(--muted); letter-spacing:.03em; }
.m-item .price .was { display:block; font-size:13px; color:var(--muted); text-decoration:line-through; font-family:var(--sans); }
.badge { display:inline-block; font-size:11px; letter-spacing:.08em; background:var(--gold); color:#fff; padding:3px 10px; border-radius:100px; margin-left:10px; vertical-align:middle; }
.badge.free { background:var(--green); }
@media (max-width:700px){ .cat-head .en{display:none;} }
@media (max-width:520px){ .m-item{ grid-template-columns:1fr; } .m-item .price{ text-align:left; } }

/* ---------- page: 施術の流れ ---------- */
.timeline { max-width: 880px; margin: 0 auto; }
.tl-step { display:grid; grid-template-columns: 92px 1fr; gap: clamp(20px,3vw,40px); padding-bottom: clamp(36px,5vw,56px); position:relative; }
.tl-num { position:relative; }
.tl-num .n { font-family:var(--latin); font-size: 30px; font-weight:600; color:var(--green); }
.tl-num .line { position:absolute; left: 17px; top: 44px; bottom:-10px; width:1px; background:var(--line); }
.tl-step:last-child .tl-num .line { display:none; }
.tl-num .dot { width:9px; height:9px; border-radius:50%; background:var(--gold); position:absolute; left:13px; top:14px; }
.tl-body { padding-top: 2px; }
.tl-body .step-en { font-family:var(--latin); font-size:12px; letter-spacing:.18em; color:var(--gold); font-weight:600; text-transform:uppercase; }
.tl-body h3 { font-size: clamp(20px,2.4vw,26px); margin: 6px 0 12px; }
.tl-body p { font-size:14.5px; color:var(--ink-soft); line-height:1.95; margin:0; max-width: 620px; }
.tl-body .ph { aspect-ratio: 16/6; border-radius:var(--radius); margin-top:18px; max-width: 620px; }
.tl-body .mini { font-size:12.5px; color:var(--muted); margin-top:10px; }
.faq-wrap { max-width: 820px; margin: 0 auto; }
@media (max-width:560px){ .tl-step{ grid-template-columns:56px 1fr; } .tl-num .n{font-size:22px;} .tl-num .line{left:11px;top:34px;} .tl-num .dot{left:7px;top:10px;} }

/* ---------- page: 店舗・アクセス ---------- */
.salon-top { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px,5vw,68px); align-items:center; }
.salon-top .ph { aspect-ratio: 5/4; border-radius:var(--radius); }
.gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.gallery .ph { aspect-ratio: 1/1; border-radius:var(--radius); }
.gallery .ph.wide { grid-column: span 2; aspect-ratio: 2/1; }
.map .ph { aspect-ratio: 21/8; border-radius:var(--radius); }
.access-list { list-style:none; margin: 18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.access-list li { font-size:14.5px; color:var(--ink-soft); display:flex; gap:12px; }
.access-list li b { color:var(--green); font-weight:600; min-width: 72px; }
@media (max-width:880px){ .salon-top{ grid-template-columns:1fr; } }
@media (max-width:560px){ .gallery{ grid-template-columns:1fr 1fr; } .gallery .ph.wide{ grid-column:span 2; } }

/* ---------- page: 予約・相談 ---------- */
.contact-grid { display:grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px,4vw,56px); align-items:start; }
.qcard { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding: 30px 30px; margin-bottom:16px; }
.qcard .lbl { font-family:var(--latin); font-size:12px; letter-spacing:.16em; color:var(--gold); font-weight:600; }
.qcard h3 { font-size: 20px; margin: 8px 0 8px; }
.qcard p { font-size:13.5px; color:var(--ink-soft); margin:0 0 18px; line-height:1.85; }
.qcard.line-card { background: #06C755; border-color:#06C755; }
.qcard.line-card .lbl { color: rgba(255,255,255,.85); }
.qcard.line-card h3, .qcard.line-card p { color:#fff; }
.qcard.line-card .btn { background:#fff; color:#06C755; border-color:#fff; }
.qcard.line-card .btn:hover { background:transparent; color:#fff; }
.qcard .tel-big { font-family:var(--latin); font-size: 32px; font-weight:600; letter-spacing:.04em; color:var(--green); display:inline-block; }
.qcard .hours { font-size:12.5px; color:var(--muted); letter-spacing:.06em; }
.form-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding: clamp(28px,4vw,44px); }
.form-card h2 { font-size: 24px; margin:0 0 6px; }
.form-card .sub { font-size:13.5px; color:var(--muted); margin:0 0 26px; }
.field { margin-bottom: 20px; }
.field label { display:block; font-size:13px; letter-spacing:.06em; color:var(--ink); margin-bottom:8px; font-weight:500; }
.field label .req { color:var(--gold); font-size:11px; margin-left:8px; letter-spacing:.08em; }
.field input, .field select, .field textarea {
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  padding: 13px 15px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--green-mid); box-shadow:0 0 0 3px var(--green-tint); }
.field textarea { resize:vertical; min-height: 96px; }
.field.err input, .field.err select, .field.err textarea { border-color:#C0563E; box-shadow:0 0 0 3px rgba(192,86,62,.12); }
.field .msg { font-size:12px; color:#C0563E; margin-top:6px; display:none; }
.field.err .msg { display:block; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-soft); line-height:1.7; }
.consent input { width:auto; margin-top:4px; }
.form-success { display:none; text-align:center; padding: 28px 10px; }
.form-success.show { display:block; }
.form-success .ck { width:56px;height:56px;border-radius:50%;background:var(--green-tint);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:26px; }
.form-success h3 { font-size:22px; margin:0 0 10px; }
.form-success p { font-size:14px; color:var(--ink-soft); line-height:1.9; margin:0; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } .row-2{ grid-template-columns:1fr; } }

/* ============================================================
   オンラインショップ（外部EC）導線
   ============================================================ */
/* ヘッダー等の「オンラインショップ」ボタン：外部リンクを示す ↗ 付き */
.btn.shop {
  --b: var(--gold);
  background: transparent; color: var(--gold); border-color: var(--gold);
}
.btn.shop::after { content: "↗"; font-size: .95em; line-height: 1; }
.btn.shop:hover { background: var(--gold); color: #fff; }
/* ラベル：ヘッダーは省スペースの欧文、それ以外は日本語 */
.btn.shop .lbl-short { display: none; }
.site-header .btn.shop .lbl-full { display: none; }
.site-header .btn.shop .lbl-short { display: inline; font-family: var(--latin); font-weight: 600; letter-spacing: .12em; }
.site-header .btn.shop { padding: 12px 17px; font-size: 14px; }
/* ナビ項目が多い（7項目＋電話＋ボタン2つ）ため、ヘッダーだけ横幅と余白を調整。
   ここを詰めないと項目同士が重なって表示される。 */
.site-header .nav { max-width: 1400px; gap: 16px; }
.site-header .nav-links { gap: 17px; flex-wrap: nowrap; }
.site-header .nav-links a { white-space: nowrap; }
/* ロゴはflexで縮ませない（縮むとロゴが潰れて読めなくなる） */
.site-header .brand, .site-header .brand-logo { flex: none; }
/* スマホではヘッダーを「電話＋メニュー」に絞る
   （LINEボタンはハンバーガーメニュー内とCTA帯に用意しているため） */
@media (max-width: 560px) {
  .site-header .nav-cta .btn.line { display: none; }
  .site-header .nav-cta { gap: 14px; }
}
/* 幅が足りない中間サイズではヘッダーのショップボタンを隠す
   （ナビの「商品」・フッター・ハンバーガーメニューから到達できる） */
@media (max-width: 1320px) { .site-header .nav-cta .btn.shop { display: none; } }
.mobile-menu .btn.shop { margin-top: 18px; }
.mobile-menu .btn.shop + .btn.line { margin-top: 10px; }

/* 商品カード */
.product-grid { align-items: stretch; }
.product-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.pd-thumb { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--green-tint); }
.pd-thumb img, .pd-thumb .ph { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb .ph { position: static; }
.pd-thumb img { transition: transform .6s ease; }
.product-card:hover .pd-thumb img { transform: scale(1.04); }
.pd-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pd-step {
  align-self: flex-start; font-size: 11px; letter-spacing: .1em; color: var(--green-mid);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 12px;
}
.pd-name { font-size: 18px; margin: 0; line-height: 1.55; }
.pd-price { font-family: var(--serif); font-size: 19px; color: var(--green); letter-spacing: .03em; }
.pd-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; margin: 0; }
.pd-body .btn { margin-top: auto; }

/* ショップ誘導ブロック */
.shop-cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); align-items: center;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(28px,4vw,52px);
}
.shop-cta .sc-copy h2 { margin: 16px 0 14px; }
.shop-cta .sc-copy p { font-size: 14.5px; color: var(--ink-soft); line-height: 2; margin: 0 0 24px; }
.shop-cta .sc-copy .small { margin: 0; }
.shop-cta .sc-visual img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 820px) {
  .shop-cta { grid-template-columns: 1fr; }
  .shop-cta .sc-visual { order: -1; }
}

/* ============================================================
   MW WP Form — 予約フォーム（テーマの見た目に合わせる）
   ============================================================ */
.form-card .mw_wp_form { font-size: 15px; }
.form-card .mw_wp_form p { margin: 0 0 20px; }
.form-card .mw_wp_form input[type="text"],
.form-card .mw_wp_form input[type="tel"],
.form-card .mw_wp_form input[type="email"],
.form-card .mw_wp_form input[type="date"],
.form-card .mw_wp_form input[type="number"],
.form-card .mw_wp_form select,
.form-card .mw_wp_form textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-card .mw_wp_form input:focus,
.form-card .mw_wp_form select:focus,
.form-card .mw_wp_form textarea:focus {
  outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px var(--green-tint);
}
.form-card .mw_wp_form textarea { resize: vertical; min-height: 96px; }
.form-card .mw_wp_form input[type="checkbox"],
.form-card .mw_wp_form input[type="radio"] { width: auto; margin-right: 7px; }
/* 日付欄はカレンダーアイコンを押しやすく */
.form-card .mw_wp_form input[type="date"] { appearance: none; min-height: 50px; }
.form-card .mw_wp_form input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; padding-left: 6px; }
.form-card .mw_wp_form input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
/* ラベル行（<dt>/<dd> や見出し用spanどちらでも効くように） */
.form-card .mw_wp_form .f-label {
  display: block; font-size: 13px; letter-spacing: .06em; color: var(--ink);
  margin-bottom: 8px; font-weight: 500;
}
.form-card .mw_wp_form .f-req { color: var(--gold); font-size: 11px; margin-left: 8px; letter-spacing: .08em; }
.form-card .mw_wp_form .f-any { color: var(--muted); font-size: 11px; margin-left: 8px; letter-spacing: .08em; }
.form-card .mw_wp_form .f-note { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.7; }
.form-card .mw_wp_form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 送信・確認ボタン */
.form-card .mw_wp_form input[type="submit"],
.form-card .mw_wp_form button[type="submit"] {
  --b: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: .08em;
  padding: 19px 40px; border: 1px solid var(--b); background: var(--b); color: #F6F4EE;
  border-radius: var(--radius); cursor: pointer; margin-top: 8px;
  transition: background .35s ease, color .35s ease;
}
.form-card .mw_wp_form input[type="submit"]:hover,
.form-card .mw_wp_form button[type="submit"]:hover { background: transparent; color: var(--green); }
.form-card .mw_wp_form input[name="submitBack"] { background: transparent; color: var(--green); margin-top: 12px; }
.form-card .mw_wp_form input[name="submitBack"]:hover { background: var(--green); color: #F6F4EE; }
/* エラー表示 */
.form-card .mw_wp_form .error {
  display: block; font-size: 12px; color: #C0563E; margin-top: 6px;
}
.form-card .mw_wp_form_confirm .f-label { color: var(--muted); }
/* 送信完了メッセージ */
.form-card .mw_wp_form_complete { text-align: center; padding: 20px 6px; }
.form-card .mw_wp_form_complete p { font-size: 15px; color: var(--ink-soft); line-height: 1.95; }
@media (max-width: 560px) { .form-card .mw_wp_form .f-row { grid-template-columns: 1fr; } }

/* ============================================================
   Blog — list / single / archive / search
   ============================================================ */
.post-list { display: flex; flex-direction: column; }
.post-card {
  display: grid; grid-template-columns: 1fr 300px; gap: clamp(22px, 3vw, 44px);
  align-items: center; padding: clamp(26px, 3.4vw, 42px) 0;
  border-bottom: 1px solid var(--line);
}
.post-list .post-card:first-child { padding-top: 4px; }
.pc-thumb {
  order: 2; display: block; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--radius); background: var(--green-tint);
}
.pc-thumb img, .pc-thumb .ph { width: 100%; height: 100%; object-fit: cover; }
.pc-thumb .ph { position: static; }
.pc-thumb img { transition: transform .6s ease; }
.post-card:hover .pc-thumb img { transform: scale(1.045); }
.pc-body { order: 1; min-width: 0; }
.pc-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; }
.pc-date {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--green); color: #EDEFE8; padding: 8px 12px; border-radius: var(--radius);
  line-height: 1.15; min-width: 58px;
}
.pc-date .d { font-family: var(--latin); font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.pc-date .y { font-family: var(--latin); font-size: 11px; letter-spacing: .1em; color: var(--gold-soft); }
.pc-cat {
  font-size: 11.5px; letter-spacing: .1em; color: var(--green-mid);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 13px;
}
.pc-title { font-size: clamp(18px, 2vw, 22px); line-height: 1.55; margin: 0 0 10px; }
.pc-title a { transition: color .3s ease; }
.pc-title a:hover { color: var(--green-mid); }
.pc-excerpt { font-size: 14px; color: var(--ink-soft); line-height: 1.9; margin: 0 0 16px; }
.pc-more { font-size: 13px; }

/* pagination */
.purely-pagination { margin-top: clamp(40px, 5vw, 64px); }
.purely-pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.purely-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--latin); font-size: 15px; color: var(--ink-soft);
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.purely-pagination a.page-numbers:hover { border-color: var(--green); color: var(--green); }
.purely-pagination .page-numbers.current { background: var(--green); color: #EDEFE8; border-color: var(--green); }
.purely-pagination .page-numbers.dots { border-color: transparent; }

/* single */
.post-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; letter-spacing: .06em; color: #C6CFC3; margin-bottom: 14px; }
.post-hero-meta time { font-family: var(--latin); font-size: 15px; letter-spacing: .08em; }
.post-hero-meta a { color: var(--gold-soft); }
.post-hero-meta a:hover { color: #fff; }
.post-hero-meta .dot { color: #6E7C6E; }
.post-cover { margin: 0 0 clamp(28px, 4vw, 44px); border-radius: var(--radius); overflow: hidden; }
.post-cover img { width: 100%; height: auto; }

/* prose — rendered post/page content */
.prose { font-size: 15.5px; line-height: 2.05; color: var(--ink-soft); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.6em; }
.prose h2 { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px); color: var(--green); margin: 2em 0 .7em; padding-bottom: .4em; border-bottom: 1px solid var(--line); line-height: 1.5; }
.prose h3 { font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); color: var(--green); margin: 1.8em 0 .6em; line-height: 1.5; }
.prose h4 { font-family: var(--serif); font-size: 17px; color: var(--ink); margin: 1.6em 0 .5em; }
.prose a { color: var(--green); border-bottom: 1px solid var(--gold-soft); transition: opacity .2s ease; }
.prose a:hover { opacity: .65; }
.prose img { border-radius: var(--radius); margin: 1.2em 0; height: auto; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 8px; }
.prose ul, .prose ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.prose li { margin-bottom: .5em; }
.prose blockquote { margin: 1.6em 0; padding: 18px 24px; background: var(--green-tint); border-left: 2px solid var(--gold); border-radius: var(--radius); color: var(--ink-soft); font-size: 14.5px; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: var(--green-tint); font-weight: 600; }
.prose .wp-caption, .prose img.aligncenter, .prose figure.aligncenter { margin-inline: auto; }
.prose .alignright { float: right; margin: .4em 0 1em 1.4em; max-width: 50%; }
.prose .alignleft { float: left; margin: .4em 1.4em 1em 0; max-width: 50%; }

/* single footer: tags + prev/next */
.post-pagelinks { margin: 1.4em 0; font-size: 14px; color: var(--muted); }
.post-tags { margin: clamp(28px,4vw,40px) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags a { font-size: 12.5px; letter-spacing: .06em; color: var(--green-mid); border: 1px solid var(--line); border-radius: 100px; padding: 5px 14px; transition: border-color .3s ease, color .3s ease; }
.post-tags a:hover { border-color: var(--green); color: var(--green); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(36px,5vw,56px); padding-top: 30px; border-top: 1px solid var(--line); }
.post-nav a { display: flex; flex-direction: column; gap: 6px; }
.post-nav .pn-next { text-align: right; }
.post-nav .pn-dir { font-family: var(--latin); font-size: 12px; letter-spacing: .1em; color: var(--gold); }
.post-nav .pn-ttl { font-size: 14px; color: var(--ink-soft); line-height: 1.6; transition: color .3s ease; }
.post-nav a:hover .pn-ttl { color: var(--green); }

@media (max-width: 640px) {
  .post-card { grid-template-columns: 1fr; gap: 16px; }
  .pc-thumb { order: 1; aspect-ratio: 16/9; }
  .pc-body { order: 2; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .pn-next { text-align: left; }
}