@charset "utf-8";
/* ==========================================================================
   わかやまあそび 共通シェル
   wakayamakanko.jp/ja/spot/detail/940 の実測値から再現（2026-07-31 採取）

     本文フォント   游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", sans-serif
     ページ地色     #f8fafc（slate-50） / 本文エリア #fff
     ヘッダー高さ   60px・白・box-shadow 0 3px 6px rgba(0,0,0,.16)
     ナビ           13.33px / 500 / #000
     primary緑      #00916A（タグpill・ログインボタン）
     ページ見出し   17px / 500
     タブ           16px / 600 / #775267・下線 2px #775267
     タブ行の罫     1px solid rgba(55,65,81,.1)
     本文カラム幅   max-width 1000px 中央
     戻るボタン     #9F9F9F・白・14px・radius 22px・幅 210px
     フッター       白ロゴ帯 ＋ #808080 サブメニュー帯
     固定下部バー   #808080・白16px・高さ55px

   このファイルは4案で共通です。案ごとのデザインは各 index.html 内の <style>。
   ========================================================================== */

:root{
  --wa-primary:#00916A;
  --wa-tab:#775267;
  --wa-gray:#808080;
  --wa-gray-btn:#9F9F9F;
  --wa-page:#f8fafc;
  --wa-line:#e4e4e4;
  --wa-font:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
            "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--wa-font); color:#000; background:var(--wa-page);
      -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- ヘッダー ---------- */
.wa-header{ position:relative; z-index:30; background:#fff;
  box-shadow:0 3px 6px rgba(0,0,0,.16); }
.wa-header-in{ height:60px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; }
/* 現物はロゴ幅171px（縦72px）で、60pxのヘッダーからわずかにはみ出している */
.wa-logo img{ width:171px; height:auto; }
.wa-nav{ display:flex; align-items:center; gap:26px; }
.wa-nav a{ font-size:13.33px; font-weight:500; color:#000; white-space:nowrap; }
.wa-nav a:hover{ color:var(--wa-primary); }
.wa-select{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:170px; height:32px; padding:0 11px; margin-left:6px;
  border:1px solid #dcdfe6; border-radius:4px; font-size:14px; color:#606266; }
.wa-select svg{ width:14px; height:14px; fill:#a8abb2; flex:none; }
.wa-burger{ display:none; border:0; background:none; padding:6px; cursor:pointer; }
.wa-burger span{ display:block; width:22px; height:2px; background:#333; margin:4px 0; }

/* ---------- ページ枠 ---------- */
.wa-page{ background:var(--wa-page); }
.wa-main{ background:#fff; }

/* ---------- 見出し帯 ---------- */
.wa-head{ padding:22px 20px 0; position:relative; }
.wa-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.wa-tags span{ font-size:12px; line-height:12px; color:#fff; padding:5px 12px;
  background:var(--wa-primary); border-radius:26px; display:flex; align-items:center; }
.wa-fav{ position:absolute; right:20px; top:20px; display:flex; align-items:center; gap:8px;
  font-size:16px; color:#666; }
.wa-fav svg{ width:26px; height:26px; fill:none; stroke:#F4A6B4; stroke-width:2; }
.wa-title{ margin:9px 0 0; font-size:17px; font-weight:500; line-height:1.53; }

/* ---------- タブ ---------- */
.wa-tabs{ margin-top:20px; padding:0 20px; border-bottom:1px solid rgba(55,65,81,.1);
  display:flex; gap:8px; }
.wa-tabs span{ display:inline-block; padding:12px; font-size:16px; font-weight:600;
  border-bottom:2px solid transparent; border-radius:8px 8px 0 0; color:#6b7280; }
.wa-tabs span.is-on{ color:var(--wa-tab); border-bottom-color:var(--wa-tab); }

/* ---------- 案ごとの本文が入る場所 ---------- */
.wa-content{ }
.wa-inner{ max-width:1000px; margin:0 auto; padding-left:20px; padding-right:20px; }

/* ---------- スポット情報 ---------- */
.wa-spotinfo{ padding:0 20px; margin-top:44px; }
.wa-spotinfo h2{ font-size:18px; line-height:31px; font-weight:500; text-align:center;
  margin:0 0 24px; }
.wa-table{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:200px 1fr;
  border-left:1px solid var(--wa-line); border-bottom:1px solid var(--wa-line); font-size:14px; }
.wa-table dt{ padding:12px 16px; border-top:1px solid var(--wa-line);
  border-right:1px solid var(--wa-line); background:#fafafa; font-weight:500; line-height:1.6; }
.wa-table dd{ margin:0; padding:12px 16px; border-top:1px solid var(--wa-line);
  border-right:1px solid var(--wa-line); line-height:1.6; word-break:break-all; }
.wa-table dd a{ color:#1c6fd0; text-decoration:underline; text-underline-offset:2px; }

/* ---------- 戻る ---------- */
.wa-back{ display:flex; justify-content:center; padding:30px 0; }
.wa-back button{ font-family:inherit; font-size:14px; line-height:24px; color:#fff;
  background:var(--wa-gray-btn); padding:5px 30px; margin-top:11px; border-radius:22px;
  border:1px solid #fff; width:210px; cursor:pointer; }

/* ---------- フッター ---------- */
.wa-footer{ background:#fff; }
.wa-flogo{ text-align:center; padding-top:34px; }
.wa-flogo img{ width:300px; max-width:80%; height:auto; margin:0 auto 10px; }
.wa-flogo p{ margin:0 0 50px; font-size:13.33px; color:#454545; }
.wa-fsub{ background:var(--wa-gray); color:#fff; }
.wa-fwrap{ display:flex; justify-content:center; flex-wrap:wrap; padding:30px 0; }
.wa-fwrap a{ font-size:13.33px; padding:0 10px; color:#fff; }
.wa-fwrap a:hover{ text-decoration:underline; }
.wa-fsub > p{ margin:0; text-align:center; font-size:10.67px; padding:0 20px 80px; }

/* ---------- 固定下部バー ---------- */
.wa-float{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--wa-gray); height:55px; color:#fff; }
.wa-float ul{ list-style:none; margin:0; padding:0; height:100%;
  display:grid; grid-template-columns:repeat(3,1fr); }
.wa-float li{ display:flex; }
.wa-float li + li{ border-left:1px solid rgba(255,255,255,.35); }
.wa-float a{ flex:1; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#fff; }
.wa-float a:hover{ background:rgba(255,255,255,.08); }

/* ---------- 写真の共通指定 ---------- */
.wa-ph{ position:relative; overflow:hidden; background:#eceae4; }
.wa-ph img{ width:100%; height:100%; object-fit:cover; }

/* ---------- レスポンシブ ---------- */
@media (max-width:1023px){
  .wa-nav{ display:none; }
  .wa-burger{ display:block; }
  .wa-header-in{ height:50px; }
  .wa-logo img{ width:130px; }
  .wa-nav.is-open{ display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:50px; right:0; width:min(280px,86vw); background:#fff;
    border-left:1px solid #efefef; box-shadow:0 6px 18px rgba(0,0,0,.18); padding-bottom:12px; }
  .wa-nav.is-open a{ padding:17px; border-bottom:1px solid #efefef; font-size:15px; font-weight:600; }
  .wa-nav.is-open .wa-select{ width:auto; margin:12px 17px 0; }
  .wa-table{ grid-template-columns:1fr; }
  .wa-table dt{ border-right:1px solid var(--wa-line); }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }