/* ============================================================
   ページ固有スタイル：TOP（index.html専用。共通部分は common.css を参照）
   ============================================================ */

/* ---------- Camp Field：3枚使いの大胆コラージュ ---------- */
.camp{position:relative;overflow:hidden}
.camp-showcase{position:relative;z-index:1;aspect-ratio:1/1}
.camp-showcase__a{position:absolute;top:0;left:0;width:66%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);
  box-shadow:0 34px 64px oklch(0.3 0.03 265/.25);z-index:2}
.camp-showcase__b{position:absolute;right:0;bottom:12%;width:48%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
  border:8px solid var(--washi);box-shadow:0 26px 48px oklch(0.3 0.03 265/.28);z-index:3}
.camp-showcase__c{position:absolute;right:6%;top:0;width:34%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);
  border:8px solid var(--washi);box-shadow:0 20px 38px oklch(0.3 0.03 265/.3);rotate:-4deg;z-index:4}
@media(max-width:800px){
  .camp-showcase{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .camp-showcase__a,.camp-showcase__b,.camp-showcase__c{position:static;width:100%;aspect-ratio:4/3;border:0;box-shadow:none;rotate:0;border-radius:var(--radius)}
  /* __cは下段でグリッドをまたぎ、水平位置を中央に */
  .camp-showcase__c{grid-column:1/-1;justify-self:center;width:min(72%,420px)}
}
.camp__more{margin-top:1.1em}

/* ---------- Activity〜DogRun：写真主体・交差ギャラリー(セクション自体を写真背景／昼のアクティビティなのでライトテーマ・横長写真をそのまま活かす比率) ---------- */
.experience{position:relative;isolation:isolate;overflow:hidden;background:var(--washi)}
.experience__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 30%;
  filter:blur(2px) saturate(1.05) brightness(1.06)}
.experience__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(175deg,oklch(0.97 0.01 85/.88) 0%,oklch(0.965 0.01 85/.94) 55%,oklch(0.965 0.01 85/.97) 100%)}
.experience .wrap{position:relative;z-index:1}
.experience .eyebrow{color:var(--gold-deep)}
.experience .s-title{color:var(--ink)}
.experience .s-lead{color:var(--ink-dim)}
.xgallery{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(16px,3vw,32px);margin-top:clamp(40px,5.5vw,64px)}
.xgallery__col{display:flex;flex-direction:column}
.xgallery__col--right{margin-top:28%}
.xcard{position:relative;aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;isolation:isolate;
  box-shadow:0 24px 48px oklch(0.3 0.03 265/.22);scroll-margin-top:110px}
.xgallery__col>.xcard{margin-bottom:13%}
.xgallery__col>.xcard:last-child{margin-bottom:0}
.xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.xcard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 42%,oklch(0.1 0.02 265/.86) 100%)}
.xcard:hover img{transform:scale(1.07)}
.xcard__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.6vw,26px);color:#fff}
.xcard__tag{display:inline-flex;font-family:var(--font-num);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.5em}
.xcard__cap h3{font-family:var(--font-jp);font-weight:700;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.4;margin-bottom:.4em}
.xcard__cap p{font-weight:500;font-size:.84rem;line-height:1.7;color:oklch(0.95 0.01 85/.88);max-width:30em}
@media(prefers-reduced-motion:reduce){.xcard img{transition:none}}
@media(max-width:800px){
  .xgallery{grid-template-columns:1fr;gap:clamp(22px,5vw,30px);margin-top:clamp(32px,6vw,44px)}
  .xgallery__col--right{margin-top:0}
  .xgallery__col>.xcard{margin-bottom:0}
  .xcard{aspect-ratio:4/3}
}

/* ============================================================
   Header 追加：TOPページでは中央navが#アンカー、詳細ページへの導線は各セクション側で用意
   ============================================================ */

/* ============================================================
   Hero（夜→朝の多枚クロスフェード＋常時ゆっくりズームアウト）
   ============================================================ */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:#0c0f16}
.hero__stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  transition:opacity 3.2s ease;animation:heroZoomOut 24s ease-in-out infinite alternate}
.hero__slide.is-active{opacity:1}
/* 明るい昼の写真（朝・眺望・川遊び・MTB）は少しだけ明るく鮮やかに見せる */
.hero__slide--bright{filter:brightness(1.06) saturate(1.05)}
@keyframes heroZoomOut{from{scale:1.12}to{scale:1}}
@media(prefers-reduced-motion:reduce){.hero__slide{animation:none}}
/* 最上部にヘッダー用の薄い暗部を重ね（ライト文字の可読性確保）、中央は明るいまま、最下部を沈める */
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,oklch(0.12 0.02 265/.5) 0,oklch(0.12 0.02 265/.12) 96px,transparent 156px),
  linear-gradient(180deg,oklch(0.16 0.02 265/.4) 0%,oklch(0.16 0.02 265/.13) 40%,oklch(0.12 0.02 265/.82) 100%)}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;width:100%;
  padding:clamp(96px,18vw,130px) var(--pad) clamp(64px,10vw,112px);color:var(--paper)}
.hero__eyebrow{color:var(--gold)}
.hero__h1{font-family:var(--font-serif);font-weight:700;font-size:clamp(2rem,7.4vw,5.2rem);line-height:1.32;letter-spacing:.03em;margin-top:.55em;
  text-shadow:0 2px 40px oklch(0.16 0.02 265/.55)}
.hero__h1 .glow{color:var(--gold)}
.hero__lead{margin-top:1.3em;max-width:31em;font-size:clamp(1.02rem,2.4vw,1.18rem);font-weight:500;line-height:2;opacity:.94;text-wrap:pretty}
.hero__cta{margin-top:2.3em;display:flex;gap:1.1em;flex-wrap:wrap}
.hero__cta .btn{font-size:1.1rem;padding:1.15em 2.3em}
.hero__scroll{position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:2;font-family:var(--font-num);font-weight:600;font-size:.78rem;letter-spacing:.3em;color:inherit;opacity:.8}

/* ============================================================
   Warabi Field（背景写真＋山菜図鑑グリッド／昼のわらび狩りなのでライトテーマ）
   ============================================================ */
.warabi{position:relative;color:var(--ink);
  background:linear-gradient(180deg,oklch(0.97 0.01 85/.74) 0%,oklch(0.965 0.01 85/.92) 100%),url(../img/warabi.webp) center/cover no-repeat}
.warabi .eyebrow{color:var(--gold-deep)}
.warabi .s-title{color:var(--ink)}
.warabi .s-lead{color:var(--ink-dim)}
.warabi__more{margin-top:clamp(28px,4vw,40px);text-align:center}

/* ============================================================
   Onsen（暁の湯のみ／セクション自体を写真背景に）
   ============================================================ */
.onsen{position:relative;color:var(--paper);
  background:linear-gradient(180deg,oklch(0.16 0.02 265/.6) 0%,oklch(0.12 0.02 265/.88) 100%),url(../img/onsen-akatsuki.webp) center/cover no-repeat}
.onsen .s-title{color:var(--paper)}
.onsen .eyebrow{color:var(--gold)}
.onsen .s-lead{color:oklch(0.9 0.012 85)}
.onsen .chip{background:oklch(1 0 0/.14);color:var(--gold)}
.onsen__more{margin-top:1.8em;text-align:center}

/* ============================================================
   News（WordPress連動の一覧：日付＋タイトル＋矢印）
   ── TOP・アーカイブ(archive.php)で共用のため wp.css へ移動した ──
   ============================================================ */

/* ============================================================
   News（旧・静的アコーディオン。現在は未使用だが将来の告知詳細用に温存）
   ============================================================ */
.news__list{max-width:840px;margin:0 auto;border-top:1px solid var(--line)}
.news__item{border-bottom:1px solid var(--line)}
/* 概要ラベル行（クリックで開閉するsummary） */
/* 日付・タグ列はauto幅だと文言（数字の字形やタグ文言）ごとの字幅差で本文開始位置が数px単位でズレるため、
   固定幅にして.news__row間で縦軸を揃える */
.news__row{list-style:none;display:grid;grid-template-columns:5.8em 6.4em 1fr auto;column-gap:1.3em;align-items:center;padding:1.2em 0;cursor:pointer}
.news__row::-webkit-details-marker{display:none}
.news__row:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px}
.news__date{font-family:var(--font-num);font-weight:700;color:var(--ink-dim);font-size:.94rem}
.news__tag{font-family:var(--font-jp);font-weight:700;font-size:.76rem;padding:.32em .95em;border-radius:999px;color:#fff;white-space:nowrap;justify-self:start;background:var(--tag,var(--gold-deep))}
.news__txt{font-weight:500;color:var(--ink)}
.news__row:hover .news__txt,.news__item[open] .news__txt{color:var(--gold-deep)}
.news__chev{width:1.15em;height:1.15em;color:var(--ink-dim);justify-self:end;transition:transform .25s ease}
.news__item[open] .news__chev{transform:rotate(180deg)}
/* スライドダウンする本文パネル（grid-template-rows 0fr→1fr） */
.news__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.news__item[open] .news__panel{grid-template-rows:1fr}
.news__panel>div{overflow:hidden;min-height:0}
.news__panel-content{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,32px);align-items:flex-start;padding:.1em 0 1.9em}
.news__body{flex:1 1 300px;min-width:0}
.news__body p{color:var(--ink-dim);font-weight:500;line-height:2;font-size:.98rem;text-wrap:pretty}
.news__body p+p{margin-top:.85em}
.news__meta{margin-top:1.15em;display:grid;gap:.55em}
.news__meta>div{display:flex;gap:.9em;font-size:.92rem;line-height:1.7}
.news__meta dt{flex:0 0 6.5em;font-family:var(--font-jp);font-weight:700;color:var(--ink)}
.news__meta dd{color:var(--ink-dim);font-weight:500}
.news__tel{color:var(--gold-deep)}
.news__figure{flex:0 1 230px;max-width:240px;margin:0}
.news__img{width:100%;height:auto;border-radius:var(--radius);display:block;box-shadow:0 12px 28px oklch(0.3 0.03 265/.16)}
@media(max-width:620px){
  .news__row{grid-template-columns:auto 1fr auto;row-gap:.5em}
  .news__date{grid-area:1/1}
  .news__tag{grid-area:1/2}
  .news__chev{grid-area:1/3}
  .news__txt{grid-area:2/1/3/4}
  .news__meta dt{flex-basis:5.6em}
  .news__figure{flex-basis:100%;max-width:300px;margin-inline:auto;order:-1}
}
@media(prefers-reduced-motion:reduce){.news__panel,.news__chev{transition:none}}

/* ============================================================
   Movie
   ============================================================ */
.movie__frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 50px oklch(0.3 0.03 265/.18);max-width:920px;margin-inline:auto}
.movie__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   Access（住所＋地図を最優先で並べ、交通手段の大きな図版とタクシー案内を続ける構成）
   ============================================================ */
/* 住所+電話（access__panel-top）と地図（access__map）を1枚のカードに連結し、
   別々のブロックに見えないようにしている（ボーダー・角丸はaccess__panelだけが持つ） */
.access__panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin-bottom:clamp(28px,4vw,44px)}
.access__panel-top{position:relative;padding:clamp(26px,4vw,38px) clamp(24px,5vw,44px);
  display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,36px);align-items:center;justify-content:space-between}
.access__hero-addr{display:flex;gap:1em;align-items:center;font-family:var(--font-jp);font-weight:700;font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.9;color:var(--ink)}
.access__hero-addr .ic{flex-shrink:0;width:2.5em;height:2.5em;border-radius:50%;background:oklch(0.74 0.1 82/.14);color:var(--gold-deep);display:grid;place-items:center}
.access__hero-addr .ic svg{width:1.3em;height:1.3em}
.access__hero-tel{text-align:right}
.access__hero-tel .lbl{display:block;font-family:var(--font-num);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.35em}
.access__hero-tel a{font-family:var(--font-num);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.75rem);color:var(--gold-deep)}
.access__map{position:relative;min-height:340px;border-top:1px solid var(--line)}
.access__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.access__map-link{padding:1em clamp(24px,5vw,44px);display:flex;justify-content:center;align-items:center;gap:.5em;
  font-family:var(--font-jp);font-weight:700;font-size:.92rem;color:var(--ink);background:#fff;
  border-top:1px solid var(--line);transition:.25s}
.access__map-link:hover{color:var(--gold-deep)}
.route-diagrams{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,24px);margin-bottom:clamp(20px,3vw,28px)}
.route-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.8vw,28px)}
.route-card h4{font-family:var(--font-jp);font-weight:700;font-size:1.05rem;margin-bottom:1em;display:flex;align-items:center;gap:.6em}
.route-card h4 .ic{color:var(--gold-deep);font-family:var(--font-num)}
.route-card img{width:100%;border-radius:calc(var(--radius) - 6px)}
.route-card__note{margin-top:1em;color:var(--ink-dim);font-weight:500;font-size:.92rem;line-height:1.8}
.route-card__note .num{color:var(--ink);font-family:var(--font-num);font-weight:700;font-size:1.15rem}
.access__taxi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px);text-align:center}
.access__taxi-note{font-weight:700;color:var(--ink);font-size:.98rem;line-height:1.9;margin:0 auto 1.6em;max-width:32em;word-break:keep-all}
.access__taxi-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,22px);max-width:34em;margin-inline:auto}
@media(min-width:640px){.access__taxi-grid{grid-template-columns:1fr 1fr}}
.access__taxi-co h4{font-family:var(--font-jp);font-weight:700;font-size:.98rem;margin-bottom:.7em;color:var(--ink)}
.access__taxi-co p{color:var(--ink-dim);font-weight:500;font-size:.92rem;line-height:1.85}
.access__taxi-co a{color:var(--ink);font-family:var(--font-num);font-weight:700}
.access__taxi-co .hours{margin-top:.2em;font-size:.82rem;color:var(--ink-dim);opacity:.85}
@media(max-width:760px){.access__panel-top{flex-direction:column;align-items:flex-start}.access__hero-tel{text-align:left}}

/* ============================================================
   Contact（お問い合わせフォーム）
   ============================================================ */
.contact-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3vw,32px);max-width:560px;margin-inline:auto}

/* お問い合わせの左カラム用：電話の代替導線 */
.contact-tel{margin-top:1.5em;font-family:var(--font-jp);font-weight:700;color:var(--ink-dim);font-size:.92rem;line-height:1.7}
.contact-tel a{display:block;margin-top:.15em;font-family:var(--font-num);font-weight:700;font-size:1.65rem;color:var(--gold-deep)}
.contact-tel a:hover{color:var(--gold)}

/* 広い画面では見出し＋連絡先を左、フォームを右に置く2カラム（1280×720で1画面に収める） */
@media(min-width:920px){
  #contact{padding-block:clamp(30px,4vw,46px)}
  .contact-grid{display:grid;grid-template-columns:minmax(240px,.76fr) minmax(0,1fr);gap:clamp(30px,3.6vw,56px);align-items:start}
  #contact .s-head.contact-intro{text-align:left;margin:0;max-width:none}
  #contact .contact-intro .eyebrow{justify-content:flex-start}
  #contact .contact-intro .s-lead{margin-inline:0;max-width:26em}
  .contact-formcol{min-width:0}
  #contact .contact-form,#contact .cf__done{margin:0;max-width:none}
  /* フォーム内も2カラム化して縦を圧縮（メール＋確認用を横並び。フォーカス順＝視覚順） */
  #contact .contact-form{display:grid;grid-template-columns:1fr 1fr;column-gap:1em;row-gap:.5em;align-items:start;padding:clamp(20px,2.4vw,26px)}
  #contact .cf__row{margin-bottom:0;gap:.35em}
  #contact .cf__row:nth-child(1),#contact .cf__row:nth-child(4),#contact .cf__row:nth-child(5){grid-column:1/-1}
  #contact .cf__input,#contact .cf__textarea{padding:.48em .8em}
  #contact .cf__textarea{min-height:2.8em}
  #contact .cf__consent{grid-column:1/-1;margin-top:.2em}
  #contact .cf__consent-err{grid-column:1/-1}
  #contact .cf__submit{grid-column:1/-1;margin-top:.4em;text-align:left}
}
.cf__row{display:grid;gap:.5em;margin-bottom:1.2em}
.cf__row:last-of-type{margin-bottom:0}
.cf__label{font-family:var(--font-jp);font-weight:700;font-size:.9rem;color:var(--ink);display:flex;align-items:center;gap:.5em}
.cf__req{font-family:var(--font-num);font-weight:700;font-size:.64rem;letter-spacing:.05em;color:#fff;background:var(--gold-deep);
  padding:.2em .65em;border-radius:999px}
.cf__opt{font-family:var(--font-num);font-weight:700;font-size:.64rem;letter-spacing:.05em;color:var(--ink-dim);background:var(--washi-2);
  padding:.2em .65em;border-radius:999px}
.cf__input,.cf__textarea{width:100%;font:inherit;font-size:.92rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:calc(var(--radius) - 2px);padding:.55em .8em;transition:border-color .25s,box-shadow .25s}
.cf__input:focus,.cf__textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px oklch(0.74 0.1 82/.22)}
.cf__textarea{min-height:5em;resize:vertical;line-height:1.6}
.cf__err{font-family:var(--font-jp);font-weight:700;font-size:.78rem;color:oklch(0.55 0.18 25);display:none}
.cf__row.is-invalid .cf__input,.cf__row.is-invalid .cf__textarea{border-color:oklch(0.55 0.18 25)}
.cf__row.is-invalid .cf__err{display:block}
.cf__consent{display:flex;align-items:flex-start;gap:.6em;font-size:.86rem;color:var(--ink-dim);line-height:1.6;margin-top:1.4em}
.cf__consent input{margin-top:.3em;width:1.1em;height:1.1em;accent-color:var(--gold-deep);flex-shrink:0}
.cf__consent a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.cf__consent.is-invalid{color:oklch(0.55 0.18 25)}
.cf__consent-err{display:none;font-family:var(--font-jp);font-weight:700;font-size:.78rem;color:oklch(0.55 0.18 25);margin-top:.5em}
.cf__consent-err.is-shown{display:block}
.cf__submit{margin-top:1.4em;text-align:center}
.cf__done{display:none;text-align:center;padding:clamp(22px,3vw,32px);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);max-width:560px;margin-inline:auto}
.cf__done.is-shown{display:block}
.cf__done h3{font-family:var(--font-jp);font-weight:700;font-size:1.3rem;color:var(--ink);margin-bottom:.6em}
.cf__done p{color:var(--ink-dim);line-height:1.9}
.contact-form.is-hidden{display:none}

/* ============================================================
   Contact Form 7（旧contactと同じ id=5）を新デザインに馴染ませる
   ── 旧サイトの実マークアップ（CF7 6.1.1）に合わせている ──
   .wpcf7 > form.wpcf7-form
     > ul > li >  <p class="title">ラベル（必須）</p>
                  <p><span.wpcf7-form-control-wrap><input/textarea…></span></p>
     > p.submit > <input type="submit" value="送信">   ← クラス無し
     > div.wpcf7-response-output
   ※ ラベルは <label> ではなく p.title、送信は input[type=submit]（wpcf7-submit等は付かない）。
   ============================================================ */
.contact-formcol--cf7 .wpcf7{max-width:560px;margin-inline:auto}
.contact-formcol--cf7 .wpcf7-form{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(22px,3vw,32px)}
/* スクリーンリーダー用領域は視覚的に隠す（プラグインCSS未読込でも崩れないよう明示） */
.contact-formcol--cf7 .screen-reader-response{position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 隠しフィールドを包む fieldset のデフォルト枠線・余白を消す（上部に細線が出るのを防ぐ） */
.contact-formcol--cf7 .wpcf7-form fieldset{border:0;margin:0;padding:0;min-inline-size:0}
.contact-formcol--cf7 .hidden-fields-container{display:none}
/* フィールドは ul>li。リストの装飾を消す */
.contact-formcol--cf7 .wpcf7-form ul{list-style:none;margin:0;padding:0}
.contact-formcol--cf7 .wpcf7-form li{list-style:none;margin:0 0 1.1em}
.contact-formcol--cf7 .wpcf7-form li:last-child{margin-bottom:0}
.contact-formcol--cf7 .wpcf7-form li > p{margin:0}
/* ラベル（p.title） */
.contact-formcol--cf7 .wpcf7-form p.title{font-family:var(--font-jp);font-weight:700;
  font-size:.9rem;color:var(--ink);line-height:1.6;margin:0 0 .45em}
.contact-formcol--cf7 .wpcf7-form-control-wrap{display:block}
/* 入力欄（type と wpcf7クラスの両方で確実に当てる） */
.contact-formcol--cf7 input[type=text],
.contact-formcol--cf7 input[type=email],
.contact-formcol--cf7 input[type=tel],
.contact-formcol--cf7 input[type=url],
.contact-formcol--cf7 input[type=number],
.contact-formcol--cf7 input[type=date],
.contact-formcol--cf7 select,
.contact-formcol--cf7 textarea,
.contact-formcol--cf7 .wpcf7-form-control.wpcf7-text,
.contact-formcol--cf7 .wpcf7-form-control.wpcf7-textarea{width:100%;font:inherit;
  font-size:.92rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:calc(var(--radius) - 2px);padding:.55em .8em;
  transition:border-color .25s,box-shadow .25s}
/* textarea は rows="10" の intrinsic 高さが min-height より大きく効かないため、
   height を明示して初期高さを制御する（縦リサイズは許可） */
.contact-formcol--cf7 textarea{height:8.5em;min-height:8.5em;resize:vertical;line-height:1.6}
.contact-formcol--cf7 input:focus,
.contact-formcol--cf7 select:focus,
.contact-formcol--cf7 textarea:focus{outline:none;border-color:var(--gold-deep);
  box-shadow:0 0 0 3px oklch(0.74 0.1 82/.22)}
.contact-formcol--cf7 ::placeholder{color:var(--ink-dim);opacity:.72}
/* チェックボックス/ラジオ（同意欄等を後から足した場合に備える） */
.contact-formcol--cf7 input[type=checkbox],
.contact-formcol--cf7 input[type=radio]{width:auto;accent-color:var(--gold-deep);margin-right:.4em}
.contact-formcol--cf7 .wpcf7-list-item{display:inline-block;margin:0 1.2em 0 0}
/* 送信ボタン（クラス無しの input[type=submit] を p.submit 内で捕捉） */
/* 送信完了メッセージカード（送信成功時にJSがフォームを隠して表示） */
.cf-thanks[hidden]{display:none}
.cf-thanks{max-width:560px;margin-inline:auto;text-align:center;
  padding:clamp(28px,4vw,44px) clamp(22px,3vw,34px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.cf-thanks__ic{width:clamp(46px,7vw,58px);height:clamp(46px,7vw,58px);color:var(--forest);
  margin:0 auto .6em;display:block}
.cf-thanks h3{font-family:var(--font-jp);font-weight:700;font-size:clamp(1.2rem,2.6vw,1.45rem);
  color:var(--ink);margin-bottom:.6em}
.cf-thanks p{color:var(--ink-dim);line-height:1.95;font-weight:500}
.cf-thanks a{color:var(--gold-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}

.contact-formcol--cf7 p.submit{margin:1.4em 0 0;text-align:center}
.contact-formcol--cf7 p.submit br{display:none}
/* 送信ボタンを既存の .btn--gold に極力合わせる：同じゴールド配色・同じクリップパス形状・
   同じ余白/フォント・ホバーの持ち上げ。CF7の送信は <input type="submit">（置換要素）で
   ::before 疑似要素が使えないため、.btn の“スライドして色が満ちる”演出だけは再現不可。
   その代わりホバーで background を gold→gold-deep、文字を ink→白へ直接トランジションさせる。 */
.contact-formcol--cf7 input[type=submit],
.contact-formcol--cf7 button[type=submit]{display:inline-block;font-family:var(--font-jp);
  font-weight:700;font-size:1.05rem;cursor:pointer;color:var(--ink);background:var(--gold);
  border:none;padding:1.05em 2.3em;white-space:nowrap;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  transition:background .3s ease,color .3s ease,translate .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.contact-formcol--cf7 input[type=submit]:hover,
.contact-formcol--cf7 button[type=submit]:hover{background:var(--gold-deep);color:#fff;
  translate:0 -3px;box-shadow:0 14px 28px oklch(0.3 0.05 82/.2)}
.contact-formcol--cf7 input[type=submit]:active,
.contact-formcol--cf7 button[type=submit]:active{translate:0 0}
.contact-formcol--cf7 .wpcf7-spinner{margin:.6em 0 0 .6em}
/* バリデーション文言・応答メッセージ */
.contact-formcol--cf7 .wpcf7-not-valid-tip{font-family:var(--font-jp);font-weight:700;
  font-size:.78rem;color:oklch(0.55 0.18 25);margin-top:.35em}
.contact-formcol--cf7 .wpcf7-form-control.wpcf7-not-valid{border-color:oklch(0.55 0.18 25)}
/* 空（init）の応答枠は隠し、メッセージ表示時（aria-hidden=false）だけ出す */
.contact-formcol--cf7 .wpcf7-response-output[aria-hidden=true]{display:none}
.contact-formcol--cf7 .wpcf7-response-output{margin:1.2em 0 0;padding:.8em 1em;
  border:1px solid var(--line);border-radius:var(--radius);font-weight:700;
  font-size:.88rem;line-height:1.6}
.contact-formcol--cf7 form.sent .wpcf7-response-output{border-color:var(--forest);
  color:var(--forest-deep);background:color-mix(in oklch,var(--forest) 8%,var(--paper))}
.contact-formcol--cf7 form.invalid .wpcf7-response-output,
.contact-formcol--cf7 form.failed .wpcf7-response-output,
.contact-formcol--cf7 form.spam .wpcf7-response-output{border-color:oklch(0.55 0.18 25);
  color:oklch(0.5 0.18 25);background:oklch(0.97 0.02 25)}

/* ============================================================
   Related banners
   ============================================================ */
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,24px);max-width:640px;margin-inline:auto}
.rel-bnr{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:.25s}
.rel-bnr:hover{translate:0 -4px;box-shadow:0 16px 34px oklch(0.3 0.03 265/.14)}
.rel-bnr img{width:100%;display:block}
.rel-bnr--wide{grid-column:1/-1}
@media(max-width:560px){.rel-grid{grid-template-columns:1fr;max-width:300px}.rel-bnr--wide{grid-column:auto}}