旅心 SOUL STIRRING TRAVEL — JAPAN航空券宿グランピング街案内神社・周辺マイナースポット地図で探す 日本を、深く旅する

静けさの奥に、
本当の日本がある。

電車だけで巡る旅も、車で辿り着くローカルな一日も。航空券・宿・体験を、あなたの旅のスタイルに合わせて。電車で巡るプランを見るレンタカーで巡るプランを見る

京都・五重塔(写真挿入予定) 電車で巡る公共交通機関だけで完結レンタカーで巡るローカル・秘境スポットへ

01

航空券

主要都市への直行便・乗継便を比較。

Direct flightTokyo (NRT/HND)

東京直行便

成田・羽田

情報準備中です。就航都市・料金目安を追って掲載します。

電車・車 共通

Direct flightOsaka (KIX)

大阪直行便

関西国際空港

情報準備中です。就航都市・料金目安を追って掲載します。

電車・車 共通

Regional airportLocal access

地方空港アクセス

新千歳・函館 ほか

レンタカー派向けに地方空港からのアクセス情報を掲載予定。

主に車向け

02

宿

高級旅館から街なかホテルまで。

RyokanOnsenLuxury

京都の高級旅館

京都府

情報準備中です。客室・温泉の写真と紹介文を追って掲載します。

電車向け

City hotelStation-close

駅近シティホテル

東京・大阪

徒歩移動だけで観光が完結するエリアを厳選予定。

電車向け

Countryside innOnsen

秘湯の一軒宿

山形・静岡 ほか

車でしか辿り着けない、地方の一軒宿を紹介予定。

車向け

03

グランピング

自然の中で快適に過ごす、非日常の一夜。

GlampingMountain view

高原グランピング

長野県

情報準備中です。施設写真・アクティビティを追って掲載します。

車向け

GlampingLakeside

湖畔グランピング

山梨・岐阜 ほか

情報準備中です。

車向け

GlampingFamily

三重の海辺グランピング

三重県

情報準備中です。

車向け

04

街案内

歩いて楽しむ街、車で辿る町並み。

WalkableOld town

京都・祇園エリア

京都府

情報準備中です。

電車向け

Modern cityShopping

大阪・道頓堀エリア

大阪府

情報準備中です。

電車向け

Historic townscapeDrive

飛騨高山の古い町並み

岐阜県

情報準備中です。

車向け

05

神社・周辺案内

祈りの場と、その周辺の過ごし方。

ShrineIconic

伏見稲荷大社

京都府

情報準備中です。

電車向け

ShrineNature

出羽三山

山形県

情報準備中です。

車向け

ShrineIsland

厳島神社

広島県

情報準備中です。

電車向け

06

マイナースポット

パワースポットと、まだ知られていない景色。

Power spotHot spring town

銀山温泉

山形県

情報準備中です。

車向け

Hidden valleyNature

秘境の渓谷

三重県

情報準備中です。

車向け

Onsen townLocal

登別温泉

北海道

情報準備中です。

車向け

MAP

地図で探す

都道府県をタップすると紹介文が開きます。

↓ リストは下にスクロールできます

Googleマップ埋め込み予定(実際の地図はここに後で追加)

旅心 SOUL STIRRING TRAVEL

電車派・レンタカー派、それぞれの日本を。準備中のページです。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#F6F1E6;
  --bg-alt:#EDE4D2;
  --panel:#FFFDF8;
  --ink:#211D18;
  --ink-soft:#5B5245;
  --indigo:#1F3A5C;
  --indigo-deep:#132538;
  --vermillion:#BD4322;
  --gold:#B08A2E;
  --line:rgba(33,29,24,0.14);
  --line-strong:rgba(33,29,24,0.28);
  --font-mincho:'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-gothic:'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
}
:root:not([data-theme="light"]){ }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181B;
    --bg-alt:#1B2024;
    --panel:#1E2429;
    --ink:#EDE7D9;
    --ink-soft:#B9B0A0;
    --indigo:#7FA3C9;
    --indigo-deep:#0C1620;
    --vermillion:#E1774E;
    --gold:#D7B65E;
    --line:rgba(237,231,217,0.16);
    --line-strong:rgba(237,231,217,0.30);
  }
}
:root[data-theme="dark"]{
  --bg:#14181B;
  --bg-alt:#1B2024;
  --panel:#1E2429;
  --ink:#EDE7D9;
  --ink-soft:#B9B0A0;
  --indigo:#7FA3C9;
  --indigo-deep:#0C1620;
  --vermillion:#E1774E;
  --gold:#D7B65E;
  --line:rgba(237,231,217,0.16);
  --line-strong:rgba(237,231,217,0.30);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-gothic);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
@media (max-width:640px){.wrap{padding:0 18px;}}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.logo{font-family:var(--font-mincho);font-weight:700;font-size:19px;letter-spacing:.04em;}
.logo small{display:block;font-family:var(--font-gothic);font-weight:400;font-size:10.5px;letter-spacing:.22em;color:var(--ink-soft);margin-top:2px;}
nav.site-nav{display:flex;gap:26px;font-size:14px;}
@media (max-width:760px){nav.site-nav{display:none;}}
nav.site-nav a{padding:6px 0;border-bottom:1px solid transparent;}
nav.site-nav a:hover{border-color:var(--vermillion);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:96px 0 84px;
  background:
    radial-gradient(ellipse 900px 480px at 82% -10%, color-mix(in srgb, var(--vermillion) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  overflow:hidden;
}
.hero-wave{position:absolute;inset:auto 0 -2px 0;height:120px;opacity:.5;}
.eyebrow-jp{
  writing-mode:vertical-rl;
  font-family:var(--font-mincho);
  font-size:14px;letter-spacing:.5em;
  color:var(--vermillion);
  position:absolute;right:28px;top:96px;
}
@media (max-width:760px){.eyebrow-jp{display:none;}}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
h1.hero-title{
  font-family:var(--font-mincho);
  font-weight:700;
  font-size:clamp(34px,5.2vw,58px);
  line-height:1.35;
  margin:0 0 22px;
}
.hero-title em{font-style:normal;color:var(--vermillion);}
.hero-sub{font-size:15.5px;color:var(--ink-soft);max-width:46ch;margin:0 0 34px;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:2px;
  font-size:14px;letter-spacing:.03em;
  border:1px solid var(--line-strong);
  cursor:pointer;background:none;color:var(--ink);
  font-family:var(--font-gothic);
}
.btn-primary{background:var(--indigo);border-color:var(--indigo);color:#F6F1E6;}
.btn-primary:hover{background:var(--indigo-deep);}
.btn:hover{border-color:var(--vermillion);color:var(--vermillion);}
.hero-photo-slot{
  aspect-ratio:4/5;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--indigo) 18%, transparent) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  border:1px solid var(--line-strong);
  display:flex;align-items:flex-end;padding:18px;
  color:#F6F1E6;font-size:12px;letter-spacing:.06em;
}

/* ---------- Persona toggle ---------- */
.persona-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);}
.persona-inner{display:flex;align-items:center;justify-content:center;gap:0;padding:0;}
.persona-btn{
  flex:1;max-width:340px;text-align:center;padding:20px 12px;
  font-family:var(--font-gothic);font-size:14.5px;font-weight:500;
  color:var(--ink-soft);cursor:pointer;border:none;background:none;
  border-bottom:3px solid transparent;
}
.persona-btn.active{color:var(--ink);border-bottom-color:var(--vermillion);}
.persona-btn .kana{display:block;font-size:11px;letter-spacing:.14em;color:var(--ink-soft);margin-top:3px;}

/* ---------- Sections ---------- */
section.cat{padding:78px 0;border-bottom:1px solid var(--line);}
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;flex-wrap:wrap;}
.cat-num{font-family:var(--font-mincho);font-size:13px;color:var(--gold);letter-spacing:.18em;margin:0 0 8px;}
h2.cat-title{font-family:var(--font-mincho);font-weight:700;font-size:clamp(24px,3.4vw,32px);margin:0;}
.cat-title .en{display:block;font-family:var(--font-gothic);font-size:12px;letter-spacing:.2em;color:var(--ink-soft);margin-top:6px;font-weight:400;}
.cat-desc{max-width:38ch;font-size:14px;color:var(--ink-soft);margin:0;}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.card-grid{grid-template-columns:1fr;}}
.card{
  background:var(--panel);border:1px solid var(--line);
  display:none;flex-direction:column;
}
.card.show{display:flex;}
.card-photo{
  aspect-ratio:4/3;
  background:linear-gradient(150deg, color-mix(in srgb, var(--indigo) 30%, var(--bg-alt)) 0%, var(--bg-alt) 100%);
  position:relative;
}
.card-photo::after{
  content:attr(data-caption);
  position:absolute;left:12px;bottom:10px;
  font-size:10.5px;color:#F6F1E6;letter-spacing:.05em;
  background:color-mix(in srgb, var(--indigo-deep) 55%, transparent);
  padding:3px 8px;
}
.card-body{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column;}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.tag{
  font-size:10.5px;letter-spacing:.03em;
  padding:3px 9px;border:1px solid var(--line-strong);
  color:var(--ink-soft);
}
.card-title{font-family:var(--font-mincho);font-size:17px;font-weight:700;margin:0 0 6px;}
.card-place{font-size:11px;color:var(--gold);letter-spacing:.08em;margin:0 0 10px;}
.card-text{font-size:13px;color:var(--ink-soft);margin:0;flex:1;}
.card-mode{font-size:10px;letter-spacing:.1em;color:var(--ink-soft);margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}

/* ---------- Map section ---------- */
section.map-section{padding:88px 0 96px;background:var(--bg-alt);width:100%;max-width:100%;overflow:hidden;}
.gmap-placeholder{
  width:100%;max-width:100%;aspect-ratio:4/3;
  background:var(--line);border:1px dashed var(--line-strong);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
  color:var(--ink-soft);font-size:13px;text-align:center;padding:16px;
}
.gmap-placeholder .en{font-size:11px;letter-spacing:.1em;}
.map-layout2{display:flex;flex-direction:row;align-items:flex-start;gap:14px;}
.pref-list-col{flex:0 0 33%;max-width:33%;max-height:70vh;overflow-y:auto;padding-right:8px;}
.gmap-col{flex:1;position:sticky;top:14px;}
.gmap-col .gmap-placeholder{aspect-ratio:auto;height:70vh;padding:10px;font-size:11.5px;}
.pref-accordion{width:100%;max-width:100%;border-top:1px solid var(--line);}
.pref-list-col .pref-btn{font-size:13px;padding:12px 2px;}
.pref-list-col .pref-btn .kana{display:block;font-size:10px;margin-top:2px;}
.pref-list-col .pref-region-name{font-size:12.5px;padding:14px 0 6px;}
.list-scroll-hint{font-size:11px;color:var(--gold);margin:0 2px 10px;letter-spacing:.03em;}
.pref-region-name{
  font-family:var(--font-mincho);font-size:14px;color:var(--gold);
  padding:18px 0 8px;letter-spacing:.06em;
}
.pref-item{border-bottom:1px solid var(--line);}
.pref-btn{
  width:100%;max-width:100%;text-align:left;background:none;border:none;
  padding:14px 4px;font-family:var(--font-gothic);font-size:14.5px;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
}
.pref-btn .kana{font-size:11px;color:var(--ink-soft);letter-spacing:.08em;}
.pref-btn .arrow{transition:transform .15s;color:var(--ink-soft);}
.pref-item.open .pref-btn .arrow{transform:rotate(180deg);}
.pref-answer{
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.pref-item.open .pref-answer{max-height:320px;}
.pref-answer p{font-size:13px;color:var(--ink-soft);margin:0 4px 14px;max-width:60ch;}
.pref-cta{display:flex;flex-direction:column;gap:8px;margin:0 4px 16px;}
.pref-cta-btn{
  width:100%;max-width:100%;box-sizing:border-box;
  padding:10px 14px;font-size:12.5px;font-family:var(--font-gothic);
  border:1px solid var(--line-strong);background:none;color:var(--ink);cursor:pointer;
  text-align:left;
}
.pref-cta-btn:hover{border-color:var(--vermillion);color:var(--vermillion);}

/* ---------- Footer ---------- */
footer{padding:50px 0 40px;background:var(--indigo-deep);color:#EDE7D9;}
footer .foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:12.5px;color:#B9B0A0;}
footer .logo{color:#F6F1E6;}
</style>

<header class="site">
  <div class="wrap header-inner">
    <div class="logo">旅心 <small>SOUL STIRRING TRAVEL — JAPAN</small></div>
    <nav class="site-nav">
      <a href="#flights">航空券</a>
      <a href="#stay">宿</a>
      <a href="#glamping">グランピング</a>
      <a href="#towns">街案内</a>
      <a href="#shrines">神社・周辺</a>
      <a href="#hidden">マイナースポット</a>
      <a href="#map">地図で探す</a>
    </nav>
  </div>
</header>

<section class="hero">
  <span class="eyebrow-jp">日本を、深く旅する</span>
  <div class="wrap hero-grid">
    <div>
      <h1 class="hero-title">静けさの奥に、<br><em>本当の日本</em>がある。</h1>
      <p class="hero-sub">電車だけで巡る旅も、車で辿り着くローカルな一日も。航空券・宿・体験を、あなたの旅のスタイルに合わせて。</p>
      <div class="cta-row">
        <button class="btn btn-primary">電車で巡るプランを見る</button>
        <button class="btn">レンタカーで巡るプランを見る</button>
      </div>
    </div>
    <div class="hero-photo-slot" data-caption="photo">京都・五重塔(写真挿入予定)</div>
  </div>
</section>

<div class="persona-band">
  <div class="wrap persona-inner">
    <button class="persona-btn active" data-mode="train">電車で巡る<span class="kana">公共交通機関だけで完結</span></button>
    <button class="persona-btn" data-mode="car">レンタカーで巡る<span class="kana">ローカル・秘境スポットへ</span></button>
  </div>
</div>

<section class="cat" id="flights">
  <div class="wrap">
    <div class="cat-head">
      <div>
        <p class="cat-num">01</p>
        <h2 class="cat-title">航空券</h2>
      </div>
      <p class="cat-desc">主要都市への直行便・乗継便を比較。</p>
    </div>
    <div class="card-grid" data-cat="flights">
      <div class="card show" data-mode="both">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Direct flight</span><span class="tag">Tokyo (NRT/HND)</span></div>
          <h3 class="card-title">東京直行便</h3>
          <p class="card-place">成田・羽田</p>
          <p class="card-text">情報準備中です。就航都市・料金目安を追って掲載します。</p>
          <div class="card-mode">電車・車 共通</div>
        </div>
      </div>
      <div class="card show" data-mode="both">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Direct flight</span><span class="tag">Osaka (KIX)</span></div>
          <h3 class="card-title">大阪直行便</h3>
          <p class="card-place">関西国際空港</p>
          <p class="card-text">情報準備中です。就航都市・料金目安を追って掲載します。</p>
          <div class="card-mode">電車・車 共通</div>
        </div>
      </div>
      <div class="card show" data-mode="both">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Regional airport</span><span class="tag">Local access</span></div>
          <h3 class="card-title">地方空港アクセス</h3>
          <p class="card-place">新千歳・函館 ほか</p>
          <p class="card-text">レンタカー派向けに地方空港からのアクセス情報を掲載予定。</p>
          <div class="card-mode">主に車向け</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="cat" id="stay">
  <div class="wrap">
    <div class="cat-head">
      <div>
        <p class="cat-num">02</p>
        <h2 class="cat-title">宿</h2>
      </div>
      <p class="cat-desc">高級旅館から街なかホテルまで。</p>
    </div>
    <div class="card-grid" data-cat="stay">
      <div class="card show" data-mode="both">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Ryokan</span><span class="tag">Onsen</span><span class="tag">Luxury</span></div>
          <h3 class="card-title">京都の高級旅館</h3>
          <p class="card-place">京都府</p>
          <p class="card-text">情報準備中です。客室・温泉の写真と紹介文を追って掲載します。</p>
          <div class="card-mode">電車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="both">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">City hotel</span><span class="tag">Station-close</span></div>
          <h3 class="card-title">駅近シティホテル</h3>
          <p class="card-place">東京・大阪</p>
          <p class="card-text">徒歩移動だけで観光が完結するエリアを厳選予定。</p>
          <div class="card-mode">電車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="both">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Countryside inn</span><span class="tag">Onsen</span></div>
          <h3 class="card-title">秘湯の一軒宿</h3>
          <p class="card-place">山形・静岡 ほか</p>
          <p class="card-text">車でしか辿り着けない、地方の一軒宿を紹介予定。</p>
          <div class="card-mode">車向け</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="cat" id="glamping">
  <div class="wrap">
    <div class="cat-head">
      <div>
        <p class="cat-num">03</p>
        <h2 class="cat-title">グランピング</h2>
      </div>
      <p class="cat-desc">自然の中で快適に過ごす、非日常の一夜。</p>
    </div>
    <div class="card-grid" data-cat="glamping">
      <div class="card show" data-mode="car">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Glamping</span><span class="tag">Mountain view</span></div>
          <h3 class="card-title">高原グランピング</h3>
          <p class="card-place">長野県</p>
          <p class="card-text">情報準備中です。施設写真・アクティビティを追って掲載します。</p>
          <div class="card-mode">車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="car">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Glamping</span><span class="tag">Lakeside</span></div>
          <h3 class="card-title">湖畔グランピング</h3>
          <p class="card-place">山梨・岐阜 ほか</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="car">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Glamping</span><span class="tag">Family</span></div>
          <h3 class="card-title">三重の海辺グランピング</h3>
          <p class="card-place">三重県</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">車向け</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="cat" id="towns">
  <div class="wrap">
    <div class="cat-head">
      <div>
        <p class="cat-num">04</p>
        <h2 class="cat-title">街案内</h2>
      </div>
      <p class="cat-desc">歩いて楽しむ街、車で辿る町並み。</p>
    </div>
    <div class="card-grid" data-cat="towns">
      <div class="card show" data-mode="train">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Walkable</span><span class="tag">Old town</span></div>
          <h3 class="card-title">京都・祇園エリア</h3>
          <p class="card-place">京都府</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">電車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="train">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Modern city</span><span class="tag">Shopping</span></div>
          <h3 class="card-title">大阪・道頓堀エリア</h3>
          <p class="card-place">大阪府</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">電車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="car">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Historic townscape</span><span class="tag">Drive</span></div>
          <h3 class="card-title">飛騨高山の古い町並み</h3>
          <p class="card-place">岐阜県</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">車向け</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="cat" id="shrines">
  <div class="wrap">
    <div class="cat-head">
      <div>
        <p class="cat-num">05</p>
        <h2 class="cat-title">神社・周辺案内</h2>
      </div>
      <p class="cat-desc">祈りの場と、その周辺の過ごし方。</p>
    </div>
    <div class="card-grid" data-cat="shrines">
      <div class="card show" data-mode="both">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Shrine</span><span class="tag">Iconic</span></div>
          <h3 class="card-title">伏見稲荷大社</h3>
          <p class="card-place">京都府</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">電車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="both">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Shrine</span><span class="tag">Nature</span></div>
          <h3 class="card-title">出羽三山</h3>
          <p class="card-place">山形県</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="both">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Shrine</span><span class="tag">Island</span></div>
          <h3 class="card-title">厳島神社</h3>
          <p class="card-place">広島県</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">電車向け</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="cat" id="hidden" style="border-bottom:none;">
  <div class="wrap">
    <div class="cat-head">
      <div>
        <p class="cat-num">06</p>
        <h2 class="cat-title">マイナースポット</h2>
      </div>
      <p class="cat-desc">パワースポットと、まだ知られていない景色。</p>
    </div>
    <div class="card-grid" data-cat="hidden">
      <div class="card show" data-mode="car">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Power spot</span><span class="tag">Hot spring town</span></div>
          <h3 class="card-title">銀山温泉</h3>
          <p class="card-place">山形県</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="car">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Hidden valley</span><span class="tag">Nature</span></div>
          <h3 class="card-title">秘境の渓谷</h3>
          <p class="card-place">三重県</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">車向け</div>
        </div>
      </div>
      <div class="card show" data-mode="car">
        <div class="card-photo" data-caption="photo"></div>
        <div class="card-body">
          <div class="card-tags"><span class="tag">Onsen town</span><span class="tag">Local</span></div>
          <h3 class="card-title">登別温泉</h3>
          <p class="card-place">北海道</p>
          <p class="card-text">情報準備中です。</p>
          <div class="card-mode">車向け</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="map-section" id="map">
  <div class="wrap">
    <div class="cat-head">
      <div>
        <p class="cat-num">MAP</p>
        <h2 class="cat-title">地図で探す</h2>
      </div>
      <p class="cat-desc">都道府県をタップすると紹介文が開きます。</p>
    </div>
    <div class="map-layout2">
      <div class="pref-list-col">
        <p class="list-scroll-hint">↓ リストは下にスクロールできます</p>
        <div class="pref-accordion" id="pref-accordion"></div>
      </div>
      <div class="gmap-col">
        <div class="gmap-placeholder">
          <span>Googleマップ埋め込み予定(実際の地図はここに後で追加)</span>
        </div>
      </div>
    </div>
  </div>
</section>

<footer>
  <div class="wrap foot-inner">
    <div class="logo">旅心 SOUL STIRRING TRAVEL</div>
    <div>電車派・レンタカー派、それぞれの日本を。準備中のページです。</div>
  </div>
</footer>

<script>
const personaBtns=document.querySelectorAll('.persona-btn');
personaBtns.forEach(btn=>{
  btn.addEventListener('click',()=>{
    personaBtns.forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    const mode=btn.dataset.mode;
    document.querySelectorAll('.card').forEach(card=>{
      const cm=card.dataset.mode;
      card.classList.toggle('show', cm==='both'||cm===mode);
    });
  });
});

const PREFS=[
  {n:"北海道",k:"ホッカイドウ",r:"hokkaido",x:8,y:1,desc:"新鮮な海鮮が自慢の土地です。カニ・ウニ・イクラなど、市場や食堂で味わえる海の幸は格別。函館山からの夜景や富良野・美瑛の花畑、登別温泉など、定番の観光地も充実しています。"},
  {n:"青森県",k:"アオモリ",r:"tohoku",x:8,y:2},{n:"岩手県",k:"イワテ",r:"tohoku",x:9,y:3},{n:"宮城県",k:"ミヤギ",r:"tohoku",x:9,y:4},
  {n:"秋田県",k:"アキタ",r:"tohoku",x:7,y:3},{n:"山形県",k:"ヤマガタ",r:"tohoku",x:7,y:4},{n:"福島県",k:"フクシマ",r:"tohoku",x:8,y:5},
  {n:"茨城県",k:"イバラキ",r:"kanto",x:9,y:6},{n:"栃木県",k:"トチギ",r:"kanto",x:8,y:6},{n:"群馬県",k:"グンマ",r:"kanto",x:6,y:6},
  {n:"埼玉県",k:"サイタマ",r:"kanto",x:7,y:7},{n:"千葉県",k:"チバ",r:"kanto",x:9,y:7},{n:"東京都",k:"トウキョウ",r:"kanto",x:8,y:8},{n:"神奈川県",k:"カナガワ",r:"kanto",x:8,y:9},
  {n:"新潟県",k:"ニイガタ",r:"chubu",x:6,y:5},{n:"富山県",k:"トヤマ",r:"chubu",x:5,y:6},{n:"石川県",k:"イシカワ",r:"chubu",x:4,y:6},
  {n:"福井県",k:"フクイ",r:"chubu",x:4,y:7},{n:"山梨県",k:"ヤマナシ",r:"chubu",x:7,y:8},{n:"長野県",k:"ナガノ",r:"chubu",x:6,y:7},
  {n:"岐阜県",k:"ギフ",r:"chubu",x:5,y:7},{n:"静岡県",k:"シズオカ",r:"chubu",x:7,y:9},{n:"愛知県",k:"アイチ",r:"chubu",x:6,y:8},
  {n:"三重県",k:"ミエ",r:"kansai",x:6,y:9},{n:"滋賀県",k:"シガ",r:"kansai",x:5,y:8},{n:"京都府",k:"キョウト",r:"kansai",x:4,y:8},
  {n:"大阪府",k:"オオサカ",r:"kansai",x:4,y:9},{n:"兵庫県",k:"ヒョウゴ",r:"kansai",x:3,y:8},{n:"奈良県",k:"ナラ",r:"kansai",x:5,y:9},{n:"和歌山県",k:"ワカヤマ",r:"kansai",x:4,y:10},
  {n:"鳥取県",k:"トットリ",r:"chugoku",x:3,y:9},{n:"島根県",k:"シマネ",r:"chugoku",x:2,y:9},{n:"岡山県",k:"オカヤマ",r:"chugoku",x:3,y:10},
  {n:"広島県",k:"ヒロシマ",r:"chugoku",x:2,y:10},{n:"山口県",k:"ヤマグチ",r:"chugoku",x:1,y:10},
  {n:"徳島県",k:"トクシマ",r:"shikoku",x:5,y:11},{n:"香川県",k:"カガワ",r:"shikoku",x:4,y:11},{n:"愛媛県",k:"エヒメ",r:"shikoku",x:3,y:12},{n:"高知県",k:"コウチ",r:"shikoku",x:4,y:12},
  {n:"福岡県",k:"フクオカ",r:"kyushu",x:2,y:11},{n:"佐賀県",k:"サガ",r:"kyushu",x:1,y:11},{n:"長崎県",k:"ナガサキ",r:"kyushu",x:1,y:12},
  {n:"熊本県",k:"クマモト",r:"kyushu",x:2,y:12},{n:"大分県",k:"オオイタ",r:"kyushu",x:3,y:11},{n:"宮崎県",k:"ミヤザキ",r:"kyushu",x:3,y:13},{n:"鹿児島県",k:"カゴシマ",r:"kyushu",x:2,y:13},
  {n:"沖縄県",k:"オキナワ",r:"okinawa",x:2,y:16}
];
const REGION_NAMES={hokkaido:"北海道",tohoku:"東北",kanto:"関東",
  chubu:"中部",kansai:"近畿",chugoku:"中国",
  shikoku:"四国",kyushu:"九州",okinawa:"沖縄"};

PREFS.forEach((p,i)=>{p.id='pref-'+i;});

const accordion=document.getElementById('pref-accordion');
let html='';
Object.keys(REGION_NAMES).forEach(region=>{
  html+=`<p class="pref-region-name">${REGION_NAMES[region]}</p>`;
  PREFS.filter(p=>p.r===region).forEach(p=>{
    const desc=p.desc || "見どころ・宿・アクセス情報は準備中です。写真とあわせて追って掲載します。";
    html+=`
      <div class="pref-item" id="${p.id}">
        <button class="pref-btn" data-name="${p.n}" data-kana="${p.k}">
          <span>${p.n}<span class="kana"> ${p.k}</span></span>
          <span class="arrow">▾</span>
        </button>
        <div class="pref-answer">
          <p>${desc}</p>
          <div class="pref-cta">
            <button class="pref-cta-btn">Booking.comで空室検索</button>
            <button class="pref-cta-btn">レンタカーを格安で予約</button>
          </div>
        </div>
      </div>`;
  });
});
accordion.innerHTML=html;

accordion.querySelectorAll('.pref-btn').forEach(btn=>{
  btn.addEventListener('click',()=>{
    const item=btn.parentElement;
    const wasOpen=item.classList.contains('open');
    accordion.querySelectorAll('.pref-item.open').forEach(it=>it.classList.remove('open'));
    if(!wasOpen) item.classList.add('open');
  });
});
</script>