/*
Theme Name: 三島さんぽ (Mishima Sanpo)
Theme URI: https://mishimasanpo.site/
Description: Cocoon子テーマ。水の都・三島を紹介する「三島さんぽ」専用デザイン（案A 水の街）。あたたかい緑と湧水のトーン、やさしい丸ゴシック、大きめで読みやすい本文。
Author: 三島さんぽ（父と娘）
Template: cocoon-master
Version: 1.1.0
*/

/* ============================================================
   1. デザイントークン（色・フォント）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root{
  --m-bg:#f7f8f1;
  --m-bg-alt:#eef3e8;
  --m-deep:#2b4c3b;
  --m-paper:#ffffff;
  --m-ink:#28402f;
  --m-ink-soft:#4f6a5c;
  --m-ink-faint:#6f8678;
  --m-green:#3d7d5b;
  --m-green-deep:#2e6147;
  --m-water:#4f9e96;
  --m-water-soft:#d6ece6;
  --m-amber:#d8a346;
  --m-amber-soft:#f3e6c8;
  --m-line:#d8e2d8;
  --m-line-soft:#e7eee3;
  --m-shadow:0 1px 2px rgba(40,80,60,.06), 0 8px 24px rgba(40,80,60,.08);
  --m-shadow-lg:0 2px 6px rgba(40,80,60,.08), 0 18px 50px rgba(35,70,55,.13);
  --m-radius:18px;
  --m-radius-sm:12px;
  --m-head:"Zen Maru Gothic", sans-serif;
  --m-body:"Zen Kaku Gothic New", sans-serif;
}

/* ============================================================
   2. サイト全体の地ならし（読みやすさ重視）
   ============================================================ */
body{
  font-family:var(--m-body);
  color:var(--m-ink);
  background:var(--m-bg);
  font-size:17px;
  line-height:1.95;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){ body{ font-size:18px; } }

h1,h2,h3,h4,h5,
.entry-title,.article-title,.widget-title,.entry-card-title,.a-wrap .entry-card-title{
  font-family:var(--m-head);
  color:var(--m-green-deep);
  line-height:1.5;
  letter-spacing:.01em;
}
a{ color:var(--m-green-deep); text-underline-offset:3px; }
a:hover{ color:var(--m-green); }
::selection{ background:var(--m-water-soft); }

/* Cocoonの見出し・ナビ・ボタンを緑トーンへ */
.entry-content h2{ border:none; background:var(--m-bg-alt); border-left:6px solid var(--m-green); border-radius:8px; padding:.6em .9em; }
.entry-content h3{ border:none; border-bottom:2px solid var(--m-water); padding-bottom:.3em; }
.header-container,#navi,.navi-in{ background:var(--m-bg); }
.site-name-text,.logo-text{ font-family:var(--m-head); color:var(--m-green-deep); }
#navi a{ color:var(--m-ink); }
#navi .current-menu-item > a, #navi li > a:hover{ color:#fff; background:var(--m-green); }
.wp-block-button__link, input[type="submit"], .more-button{
  background:var(--m-green) !important; color:#fff !important; border:none !important; border-radius:999px !important;
}
.entry-card{ border-radius:14px; box-shadow:var(--m-shadow); }
blockquote{ border-left:4px solid var(--m-water); background:var(--m-bg-alt); border-radius:0 10px 10px 0; }
.footer{ background:var(--m-deep); color:#e8efe7; }
.footer a{ color:#cfe6df; }

/* ============================================================
   3. トップページ専用レイアウト（.mishima-home 配下）
   ============================================================ */
.mishima-home{ overflow-x:hidden; }
.mishima-home img{ max-width:100%; display:block; }
.mh-wrap{ width:100%; max-width:1080px; margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); }
.mh-section{ padding-block:clamp(3.5rem,8vw,6rem); }
.mh-alt{ background:var(--m-bg-alt); }
.mh-narrow{ max-width:720px; }
.mh-center{ text-align:center; }
.mh-mt3{ margin-top:3rem; }

.mh-eyebrow{ font-family:var(--m-head); font-weight:500; font-size:.92rem; letter-spacing:.22em; color:var(--m-water); margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem; }
.mh-eyebrow::before{ content:""; width:1.6rem; height:2px; border-radius:2px; background:var(--m-water); }
.mh-eyebrow.is-center{ justify-content:center; }
.mh-title{ font-size:clamp(1.7rem,4vw,2.5rem); margin:0 0 1rem; }
.mh-lede{ font-size:clamp(1.1rem,2vw,1.28rem); color:var(--m-ink-soft); line-height:1.95; }

/* --- ヒーロー --- */
.mh-hero{ position:relative; min-height:clamp(440px,78vh,680px); display:grid; align-items:end; overflow:hidden; }
.mh-hero__img{ position:absolute; inset:0; background-size:cover; background-position:center;
  background-color:#d6ece6;
  background-image:repeating-linear-gradient(135deg,#cfe7e0 0 14px,#dcefe8 14px 28px); }
.mh-hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(43,76,59,.10) 0%, rgba(40,64,52,.62) 72%, rgba(33,56,46,.82) 100%); }
.mh-hero__inner{ position:relative; padding-block:clamp(2.5rem,6vw,4.5rem); }
.mh-hero h1{ color:#fff; font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.25; text-shadow:0 2px 18px rgba(30,55,45,.4); }
.mh-hero p.sub{ color:#f1f7f3; font-size:clamp(1.1rem,2.4vw,1.5rem); max-width:30ch; margin:1.2rem 0 2rem; text-shadow:0 1px 12px rgba(30,55,45,.5); }
.mh-hero .mh-eyebrow{ color:#cfeae3; }
.mh-hero .mh-eyebrow::before{ background:#cfeae3; }

/* --- ボタン --- */
.mh-btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--m-head); font-weight:500; font-size:1.05rem; min-height:52px; padding:.8rem 1.6rem; border-radius:999px; text-decoration:none; cursor:pointer; border:2px solid transparent; transition:transform .15s, box-shadow .2s, background .2s; }
.mh-btn--primary{ background:var(--m-green); color:#fff; box-shadow:var(--m-shadow); }
.mh-btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--m-shadow-lg); color:#fff; }
.mh-btn--ghost{ background:var(--m-paper); color:var(--m-green-deep); border-color:var(--m-line); }
.mh-btn--ghost:hover{ border-color:var(--m-green); background:var(--m-bg-alt); }
.mh-cta{ display:flex; gap:.9rem; flex-wrap:wrap; }

/* --- 数字 --- */
.mh-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.mh-nums .n{ font-family:var(--m-head); font-weight:700; font-size:clamp(2rem,4vw,2.8rem); color:var(--m-water); line-height:1; }
.mh-nums .l{ color:var(--m-ink-soft); font-size:.95rem; margin-top:.4rem; }
@media (max-width:620px){ .mh-nums{ grid-template-columns:1fr; gap:1.2rem; } }

/* --- 交互の特集 --- */
.mh-feat{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.mh-feat + .mh-feat{ margin-top:2.5rem; }
.mh-feat:nth-child(even){ direction:rtl; } .mh-feat:nth-child(even) > *{ direction:ltr; }
@media (max-width:760px){ .mh-feat{ grid-template-columns:1fr; } .mh-feat:nth-child(even){ direction:ltr; } }

/* --- 画像枠（プレースホルダ） --- */
.mh-ph{ position:relative; margin:0; border-radius:var(--m-radius); overflow:hidden; background-color:#d6ece6; background-image:repeating-linear-gradient(135deg,#cfe7e0 0 14px,#dcefe8 14px 28px); display:grid; place-items:center; min-height:220px; border:1px solid var(--m-line-soft); }
.mh-ph.wide{ aspect-ratio:16/9; } .mh-ph.tall{ aspect-ratio:3/4; } .mh-ph.sq{ aspect-ratio:1/1; }
.mh-ph__l{ font-family:ui-monospace,monospace; font-size:.82rem; color:var(--m-green-deep); background:rgba(255,255,255,.82); padding:.45rem .9rem; border-radius:999px; border:1px solid var(--m-line); text-align:center; max-width:80%; }
.mh-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* --- 自己紹介 --- */
.mh-intro{ display:grid; grid-template-columns:280px 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.mh-intro .mh-ph{ aspect-ratio:1; border-radius:50%; }
.mh-stack > * + *{ margin-top:1.2rem; }
.mh-pill{ display:inline-flex; align-items:center; gap:.5rem; background:var(--m-amber-soft); color:#7a5a1e; font-family:var(--m-head); font-weight:500; font-size:.9rem; padding:.4rem 1rem; border-radius:999px; }
@media (max-width:720px){ .mh-intro{ grid-template-columns:1fr; text-align:center; } .mh-intro .mh-ph{ max-width:220px; margin-inline:auto; } }

/* --- 周辺マップ（地形デフォルメ版） --- */
.mh-geomap{
  position:relative; aspect-ratio:16/11; margin-top:3rem;
  border-radius:var(--m-radius); border:1px solid var(--m-line); overflow:hidden;
  background:
    radial-gradient(58% 48% at 13% 80%, rgba(120,190,182,.40), transparent 72%),
    radial-gradient(46% 40% at 38% 4%, rgba(180,200,225,.30), transparent 72%),
    radial-gradient(60% 55% at 78% 92%, rgba(150,200,160,.26), transparent 75%),
    linear-gradient(165deg, #eef4ee, #e6f0e7);
}
.mh-geomap::before{
  content:""; position:absolute; top:4%; left:50%; transform:translateX(-50%);
  width:30%; aspect-ratio:2/1;
  background:linear-gradient(180deg, rgba(150,175,210,.55), rgba(190,205,230,.12));
  clip-path:polygon(50% 0, 64% 58%, 100% 100%, 0 100%, 36% 58%); pointer-events:none;
}
.mh-geo-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.mh-geo-lines line{ stroke:var(--m-green); stroke-width:0.5; stroke-dasharray:1.4 1.8; opacity:.4; vector-effect:non-scaling-stroke; }

.mh-geo-orient{ position:absolute; font-family:var(--m-head); font-weight:700; letter-spacing:.18em; color:var(--m-ink-faint); opacity:.7; font-size:clamp(.7rem,1.4vw,.9rem); pointer-events:none; white-space:nowrap; }
.mh-geo-orient.is-fuji{ top:3%; left:50%; transform:translateX(-50%); color:#5a6f93; }
.mh-geo-orient.is-bay{ left:4%; top:60%; color:#3f8a87; writing-mode:vertical-rl; letter-spacing:.3em; }
.mh-geo-orient.is-izu{ left:70%; bottom:4%; color:#3f7a55; }
.mh-geo-compass{ position:absolute; top:5%; right:5%; width:2.6rem; height:2.6rem; border-radius:50%; border:1.5px solid var(--m-line); background:rgba(255,255,255,.72); display:grid; place-items:center; font-family:var(--m-head); font-weight:700; color:var(--m-green-deep); font-size:.95rem; line-height:1; }
.mh-geo-compass span{ position:absolute; bottom:-1.4rem; font-size:.62rem; font-weight:500; color:var(--m-ink-faint); letter-spacing:.1em; }

.mh-geo-town{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; flex-direction:column; gap:.05rem; align-items:flex-start;
  background:var(--m-paper); border:1px solid var(--m-line); border-radius:12px;
  padding:.5rem .8rem; text-decoration:none; color:var(--m-ink);
  box-shadow:var(--m-shadow); transition:transform .15s, border-color .2s, box-shadow .2s; max-width:44%; z-index:2;
}
.mh-geo-town::after{ content:""; position:absolute; left:-5px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:var(--m-water); border:2px solid var(--m-paper); }
.mh-geo-town:hover{ transform:translate(-50%,-50%) scale(1.05); border-color:var(--m-green); box-shadow:var(--m-shadow-lg); z-index:5; }
.mh-geo-town .nm{ font-family:var(--m-head); font-weight:700; font-size:1.02rem; color:var(--m-green-deep); line-height:1.3; }
.mh-geo-town .me{ font-size:.74rem; color:var(--m-ink-faint); line-height:1.3; }
.mh-geo-town .ct{ font-size:.72rem; color:var(--m-water); font-family:var(--m-head); font-weight:500; }
.mh-geo-town.is-center{ background:var(--m-green); border-color:var(--m-green-deep); align-items:center; text-align:center; padding:.7rem 1.1rem; z-index:4; box-shadow:0 6px 22px rgba(40,90,65,.35); }
.mh-geo-town.is-center::after{ background:#f1faf4; left:50%; top:-6px; transform:translateX(-50%); }
.mh-geo-town.is-center .nm{ color:#fff; font-size:1.3rem; }
.mh-geo-town.is-center .me{ color:#cfeae3; }
.mh-geo-town.is-center:hover{ transform:translate(-50%,-50%) scale(1.05); }

@media (max-width:680px){
  .mh-geomap{ aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; padding:1rem; background:var(--m-bg-alt); }
  .mh-geomap::before, .mh-geo-lines, .mh-geo-orient, .mh-geo-compass{ display:none; }
  .mh-geo-town{ position:static; transform:none; max-width:none; }
  .mh-geo-town::after{ display:none; }
  .mh-geo-town:hover{ transform:translateY(-2px); }
  .mh-geo-town.is-center{ grid-column:1 / -1; }
  .mh-geo-town.is-center:hover{ transform:translateY(-2px); }
}

/* --- 記事一覧 --- */
.mh-arts{ margin-top:2rem; }
.mh-art{ display:grid; grid-template-columns:200px 1fr; gap:1.5rem; align-items:center; padding:1.5rem 0; border-bottom:1px solid var(--m-line-soft); text-decoration:none; color:inherit; }
.mh-art:hover .mh-art__t{ color:var(--m-green); }
.mh-art .mh-ph{ min-height:0; aspect-ratio:4/3; }
.mh-art__d{ font-family:ui-monospace,monospace; font-size:.85rem; color:var(--m-ink-faint); }
.mh-art__t{ font-family:var(--m-head); font-weight:700; font-size:1.25rem; color:var(--m-green-deep); margin:.3rem 0; transition:color .2s; }
.mh-art__x{ color:var(--m-ink-soft); margin:0; }
@media (max-width:620px){ .mh-art{ grid-template-columns:1fr; gap:.8rem; } .mh-art .mh-ph{ aspect-ratio:16/9; } }

.mh-hr{ display:flex; align-items:center; gap:1rem; color:var(--m-green); margin:2.5rem 0; }
.mh-hr::before, .mh-hr::after{ content:""; height:1px; background:var(--m-line); flex:1; }

/* --- 登場アニメーション --- */
@media (prefers-reduced-motion: no-preference){
  .mishima-home.js .mh-reveal{ opacity:0; transform:translateY(18px); }
  .mishima-home.js .mh-reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
}