/* =========================================================================
   ワーケーションLP（info.misawa-tokokoto.com/workation）
   - トークン・ヘッダー・フッター・＼／見出し・.reveal は hub.css / tokens.css を再利用する。
     このファイルは **このページにしか出てこない部品** だけを持つ。
   - 世界観の決まりは視察プランナー（misawa-observation の app.css）と同じ:
     白カード + 2px墨枠 + 角丸0 + フラット / 2px点線罫線 / りいクッキー手書き見出し /
     イチョウ色（#c79a3b）アクセント。**新しい色を足さない**。
   ========================================================================= */

/* ＼ ／ 見出しは hub.css 側にモバイル用の縮小が無い。長い見出しが2行に折れると
   ＼ と ／ が別々の行に離れて崩れるので、狭い画面では字を詰めて1行に収める
   （視察プランナー app.css と同じ考え方）。**見出しは全角15字以内に収めること**。 */
@media (max-width: 620px) {
  .h-slash { font-size: 17px; gap: 6px; letter-spacing: .02em; }
  .section__lead { font-size: 11.5px; letter-spacing: .03em; }
}

/* ヘッダーが sticky（103px）なので、ページ内リンクの着地点をその分ずらす。
   入れないと見出しがヘッダーの下に隠れる。 */
[id] { scroll-margin-top: 116px; }
@media (max-width: 760px) { [id] { scroll-margin-top: 84px; } }

/* ====================== ヒーロー ====================== */
.wk-hero { position: relative; border-bottom: var(--border-card); background: var(--color-ink); }
.wk-hero__media { position: relative; height: clamp(340px, 52vw, 520px); overflow: hidden; }
.wk-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* 写真は窓＝明るい面が多いので、下半分はしっかり落とす。
   薄いと金色のキッカー（WORKATION）が飛んで読めなくなる（モバイルで実測）。 */
.wk-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,8,.16) 0%, rgba(20,16,8,.34) 38%, rgba(20,16,8,.70) 66%, rgba(20,16,8,.88) 100%);
}
.wk-hero__in {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--pad-x) clamp(24px, 4vw, 44px);
}
.wk-hero__kicker {
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .18em; color: var(--color-accent);
  margin: 0 0 10px; text-shadow: 0 1px 8px rgba(0,0,0,.85);
}
.wk-hero__title {
  margin: 0; color: #fff; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 5.4vw, 60px); letter-spacing: .06em; line-height: 1.25;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.wk-hero__lead {
  margin: 14px 0 0; color: #f2efe7; font-size: clamp(12.5px, 1.4vw, 14.5px); line-height: 2;
  letter-spacing: .05em; max-width: 42em; text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
/* 狭い画面は写真が縦に切り取られ、文字が窓（いちばん明るい面）に重なる。
   下half を強めに落として、金色のキッカーが飛ばないようにする。 */
@media (max-width: 620px) {
  .wk-hero__media::after {
    background: linear-gradient(180deg, rgba(20,16,8,.20) 0%, rgba(20,16,8,.46) 30%, rgba(20,16,8,.80) 58%, rgba(20,16,8,.92) 100%);
  }
}

/* ヒーロー直下の特典帯（ここが最初の訴求。スクロールしなくても見える位置に置く） */
.wk-band { background: var(--color-accent); border-bottom: var(--border-card); }
.wk-band__in {
  max-width: var(--content-max); margin: 0 auto; padding: 13px var(--pad-x);
  display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap;
  text-align: center;
}
.wk-band__txt { font-family: var(--font-display); font-size: clamp(15px, 2.2vw, 22px); color: #2a2113; letter-spacing: .04em; }
.wk-band__txt b { font-size: 1.35em; }
.wk-band__sub { font-size: 11.5px; font-weight: var(--fw-bold); color: #5b4718; letter-spacing: .04em; }

/* ====================== 大きなCTAボタン ====================== */
.wk-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.wk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 24px; border: var(--border-card); border-radius: var(--radius-button);
  font-family: var(--font-button); font-weight: var(--fw-bold); font-size: 14px; letter-spacing: .05em;
  background: var(--color-white); color: var(--color-ink);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.wk-btn:hover { background: var(--color-accent-soft); transform: translateY(-2px); }
.wk-btn--primary { background: var(--color-ink); color: #fff; }
.wk-btn--primary:hover { background: var(--color-ink); color: #fff; box-shadow: 0 0 0 3px var(--color-accent); }
.wk-btn .ext { font-size: 11px; color: inherit; opacity: .7; }
.wk-btn--primary .ext { opacity: .8; }
@media (max-width: 620px) { .wk-btn { width: 100%; font-size: 13.5px; } }

/* ====================== 特典（20%OFF）====================== */
.wk-offer { background: var(--color-white); border: 3px solid var(--color-accent); padding: clamp(22px, 4vw, 38px) clamp(16px, 4vw, 40px); }
.wk-offer__head { text-align: center; }
.wk-offer__cond { font-family: var(--font-display); font-size: clamp(16px, 2.4vw, 24px); letter-spacing: .05em; line-height: 1.6; }
.wk-offer__pct {
  display: inline-flex; align-items: baseline; gap: 2px; margin: 6px 0 2px;
  font-family: var(--font-display); font-weight: 400; color: var(--color-accent-deep);
  font-size: clamp(56px, 12vw, 108px); line-height: 1; letter-spacing: .02em;
}
.wk-offer__pct span { font-size: .42em; letter-spacing: .04em; }
.wk-offer__note { font-size: 11.5px; color: var(--color-sub); line-height: 1.9; margin: 6px 0 0; }

/* 料金の計算例 */
.wk-calc { margin-top: 22px; border: var(--border-card); background: var(--color-bg); }
.wk-calc__cap {
  font-family: var(--font-display); font-size: 14px; letter-spacing: .04em;
  padding: 8px 14px; border-bottom: var(--border-card); background: var(--color-white);
}
.wk-calc__rows { padding: 6px 14px 12px; }
.wk-calc__row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: var(--rule-dotted); }
.wk-calc__row:last-child { border-bottom: 0; }
.wk-calc__k { font-size: 12.5px; font-weight: var(--fw-bold); flex: 1; min-width: 0; }
.wk-calc__v { font-size: 14px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-calc__row--was .wk-calc__v { color: var(--color-sub); text-decoration: line-through; }
.wk-calc__row--now { border-top: 2px solid var(--color-ink); padding-top: 12px; }
.wk-calc__row--now .wk-calc__k { font-family: var(--font-display); font-size: 15px; font-weight: 400; }
.wk-calc__row--now .wk-calc__v { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 30px); color: var(--color-accent-deep); }
.wk-calc__per { display: block; font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-bold); color: var(--color-sub); text-align: right; }

/* 条件の3つ */
.wk-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
@media (max-width: 700px) { .wk-terms { grid-template-columns: 1fr; } }
.wk-term { border: var(--border-card); background: var(--color-white); padding: 11px 13px; }
.wk-term__k { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .12em; color: var(--color-accent-deep); }
.wk-term__v { font-size: 12.5px; font-weight: var(--fw-bold); line-height: 1.75; margin-top: 3px; }

/* ====================== 汎用カード（3列 / 2列）====================== */
.wk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wk-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .wk-grid3 { grid-template-columns: 1fr 1fr; } }
/* ★スマホでも2列のまま。1列に落とすとページが縦に伸びすぎて、
   ほとんどの人（スマホ流入）が最後まで辿り着けない（2026-08-17 井上さん指摘）。
   そのぶん本文は短くし、細かい条件はタグ（.wk-card__tags）に逃がしてある。 */
@media (max-width: 620px) { .wk-grid3, .wk-grid2 { grid-template-columns: 1fr 1fr; gap: 8px; } }

.wk-card { background: var(--color-white); border: var(--border-card); display: flex; flex-direction: column; overflow: hidden; }
.wk-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: #ddd; border-bottom: var(--border-card); }
.wk-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.wk-card:hover .wk-card__media img { transform: scale(1.04); }
.wk-card__bd { padding: 13px 15px 15px; flex: 1; display: flex; flex-direction: column; }
.wk-card__no { font-family: var(--font-display); font-size: 19px; color: var(--color-accent); line-height: 1; }
.wk-card__t { font-family: var(--font-display); font-size: 16.5px; letter-spacing: .03em; line-height: 1.5; margin-top: 2px; }
.wk-card__d { font-size: 12px; color: var(--color-ink); line-height: 1.95; margin-top: 7px; }
.wk-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.wk-card__tags span {
  display: inline-flex; align-items: center; background: var(--color-accent-soft); color: #5b4718;
  border: 2px solid var(--color-accent); padding: 1px 8px; font-size: 10.5px; font-weight: var(--fw-bold);
}
/* 2列のときの字詰め。**基本の .wk-card__* より後ろに置くこと**（同じ強さなので、
   先に書くと効かない。2026-08-17 に一度それで踏んだ）。 */
@media (max-width: 620px) {
  .wk-card__bd { padding: 9px 10px 12px; }
  .wk-card__no { font-size: 15px; }
  .wk-card__t { font-size: 13.5px; line-height: 1.45; }
  .wk-card__d { font-size: 11px; line-height: 1.85; margin-top: 5px; }
  .wk-card__tags { gap: 4px; margin-top: 8px; }
  .wk-card__tags span { font-size: 9.5px; padding: 1px 6px; border-width: 1px; }
}

/* ====================== 休み時間（息抜きリスト）====================== */
.wk-break {
  background: var(--color-white); border: var(--border-card); padding: 8px 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
}
.wk-break__i {
  display: flex; align-items: baseline; gap: 9px; padding: 10px 2px;
  border-bottom: var(--rule-dotted); font-size: 12.5px; font-weight: var(--fw-bold); line-height: 1.75;
}
.wk-break__i::before { content: "✓"; color: var(--color-accent); font-weight: 700; flex-shrink: 0; }
/* 項目を短くしたので、スマホでも2列のまま出す（1列だと10行ぶん縦に伸びる）。
   ★基本の .wk-break__i より後ろに置くこと（同じ強さなので先に書くと効かない） */
@media (max-width: 640px) {
  .wk-break { padding: 6px 12px; gap: 0 16px; }
  .wk-break__i { font-size: 11px; gap: 6px; padding: 8px 0; line-height: 1.6; }
}

/* 運営からのひとこと（枠つきの吹き出し風） */
.wk-callout {
  margin: 16px 0 0; padding: 12px 16px; border: var(--border-card); border-left: 6px solid var(--color-accent);
  background: var(--color-white); font-size: 12.5px; line-height: 2; color: var(--color-ink);
}
.wk-callout b { font-weight: var(--fw-bold); }

/* ====================== 1日の流れ（タイムライン）====================== */
.wk-tl { background: var(--color-white); border: var(--border-card); padding: 6px 16px; }
.wk-tl__day {
  font-family: var(--font-display); font-size: 13.5px; color: #5b4718; background: var(--color-accent-soft);
  padding: 2px 12px; display: inline-block; margin: 14px 0 2px;
}
.wk-tl__ev { display: flex; gap: 12px; padding: 9px 2px; border-bottom: var(--rule-dotted); align-items: flex-start; }
.wk-tl__ev:last-child { border-bottom: 0; }
.wk-tl__tm { font-weight: var(--fw-bold); color: var(--color-accent-deep); font-size: 12px; min-width: 48px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.wk-tl__ds { font-size: 12.5px; flex: 1; min-width: 0; line-height: 1.9; }
.wk-tl__ds b { font-weight: var(--fw-bold); }
.wk-tl__ds small { display: block; font-size: 11px; color: var(--color-sub); }

/* ====================== ギャラリー ======================
   img に width/height 属性を書いているので、**height:auto を必ず添える**こと。
   属性は presentational hint として height:666px を生むため、これが無いと
   aspect-ratio が効かず、写真が縦に伸びて表示される（2026-08-17 に踏んだ）。 */
.wk-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* ギャラリーもスマホで2列のまま（1列に落とすと写真1枚で1画面ぶん使ってしまう） */
@media (max-width: 860px) { .wk-gal { grid-template-columns: 1fr 1fr; gap: 8px; } }
.wk-gal figure { margin: 0; border: var(--border-card); background: var(--color-white); overflow: hidden; display: flex; flex-direction: column; }
.wk-gal img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.wk-gal figcaption { font-size: 11px; color: var(--color-sub); padding: 7px 10px; border-top: var(--rule-dotted); line-height: 1.7; flex: 1; }
@media (max-width: 620px) { .wk-gal figcaption { font-size: 10px; padding: 6px 8px; line-height: 1.65; } }

/* ====================== 設備の表 ====================== */
.wk-facts { background: var(--color-white); border: var(--border-card); padding: 4px 18px; }
.wk-facts__row { display: flex; align-items: baseline; gap: 14px; padding: 11px 2px; border-bottom: var(--rule-dotted); }
.wk-facts__row:last-child { border-bottom: 0; }
.wk-facts__k { font-family: var(--font-display); font-size: 13.5px; letter-spacing: .04em; min-width: 132px; flex-shrink: 0; }
.wk-facts__v { font-size: 12.5px; line-height: 1.95; flex: 1; min-width: 0; }
.wk-facts__v em { font-style: normal; font-weight: var(--fw-bold); color: var(--color-accent-deep); }
@media (max-width: 620px) {
  .wk-facts__row { flex-direction: column; gap: 3px; }
  .wk-facts__k { min-width: 0; }
}

/* ====================== FAQ ====================== */
.wk-faq { background: var(--color-white); border: var(--border-card); }
.wk-faq details { border-bottom: var(--rule-dotted); }
.wk-faq details:last-child { border-bottom: 0; }
.wk-faq summary {
  list-style: none; cursor: pointer; padding: 13px 18px; display: flex; gap: 10px; align-items: baseline;
  font-size: 13px; font-weight: var(--fw-bold); line-height: 1.7;
}
.wk-faq summary::-webkit-details-marker { display: none; }
.wk-faq summary::before { content: "Q"; font-family: var(--font-display); font-size: 15px; color: var(--color-accent); flex-shrink: 0; }
.wk-faq summary::after { content: "＋"; margin-left: auto; color: var(--color-sub); font-size: 13px; flex-shrink: 0; }
.wk-faq details[open] summary::after { content: "－"; }
.wk-faq summary:hover { background: var(--color-accent-soft); }
.wk-faq__a { padding: 0 18px 15px 40px; font-size: 12.5px; line-height: 2; color: var(--color-ink); }
.wk-faq__a strong { color: var(--color-accent-deep); }

/* ====================== 最後のCTA ====================== */
.wk-close { background: var(--color-white); border: var(--border-card); padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 40px); text-align: center; }
.wk-close__t { font-family: var(--font-display); font-size: clamp(19px, 2.8vw, 27px); letter-spacing: .05em; line-height: 1.6; margin: 0; }
.wk-close__d { font-size: 12.5px; line-height: 2; color: var(--color-ink); margin: 12px 0 0; }

/* ====================== キャラクター ====================== */
.wk-chara { position: absolute; z-index: 3; object-fit: contain; pointer-events: none; }
.wk-chara--peek { width: 62px; height: 96px; right: 6px; top: -40px; }
.wk-chara--offer { width: 84px; height: 118px; right: 10px; top: -66px; }
@media (max-width: 620px) {
  .wk-chara--peek { width: 46px; height: 72px; top: -30px; }
  /* 特典カードの上には見出しのリード文が来る。狭い画面ではキャラが文字に被るので、
     枠の内側（右上）へ入れて、はみ出させない。 */
  .wk-chara--offer { width: 46px; height: 64px; right: 4px; top: 4px; }
}
.wk-hasChara { position: relative; }

/* 「こんな方に」の見出し横に立つキャラ */
.wk-withChara { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.wk-withChara img { width: 66px; height: 92px; object-fit: contain; flex: 0 0 66px; }
@media (max-width: 620px) { .wk-withChara img { width: 48px; height: 68px; flex-basis: 48px; } }

/* ====================== 注記 ====================== */
.wk-disc { font-size: 11px; color: var(--color-sub); line-height: 1.95; margin-top: 14px; }
.wk-disc--center { text-align: center; }

/* ====================== 下部固定バー（モバイルでの取りこぼし防止）====================== */
.wk-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--color-ink); border-top: 3px solid var(--color-accent); display: none; }
.wk-bar__in { max-width: var(--content-max); margin: 0 auto; padding: 9px 14px; display: flex; align-items: center; gap: 12px; }
.wk-bar__txt { color: var(--color-accent); font-family: var(--font-display); font-size: 14px; line-height: 1.3; flex: 1; min-width: 0; }
.wk-bar__txt small { display: block; font-family: var(--font-body); font-size: 10px; color: #b9b9b9; letter-spacing: .02em; }
.wk-bar__btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 8px 16px; border-radius: var(--radius-button);
  background: var(--color-accent); color: #2a2113;
  font-family: var(--font-button); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: .04em;
}
@media (max-width: 760px) {
  .wk-bar { display: block; }
  body { padding-bottom: 64px; }
}