/* 池田卓 OFFICIAL SITE — 共通デザインシステム（design-proposals/claude-design-seed/top-page-polished.html から抽出） */
  /* ── カラーパレット：ikeda-suguru-colors.md の変数をそのまま使用 ── */
  :root[data-theme="day"] {
    --bg:          #F7F3E8;
    --bg-card:     #FFFFFF;
    --bg-footer:   #EFEADB;
    --primary:     #1C3A57;
    --ink:         #263340;
    /* 可読性チューニング：--sub/--faint は仕様値より一段濃く（依頼による調整） */
    --sub:         #47555F;
    --faint:       #5A6774;
    --accent:      #2FA8B5;
    --accent-soft: #E4F2F3;
    --amber:       #B9873C;
    --green:       #3E6B52;
    --hairline:    #E5DECB;
    /* 派生（マッピング用） */
    --on-accent:   #263340;      /* ターコイズボタン上の文字＝濃色 */
    --mv-base:     #10202e;      /* MVの地：藍を沈めた色 */
    --page-mat:    #d9d3c4;      /* サイト外周のマット */
    --btn-bg:      #2FA8B5;
    --shadow:0 1px 0 #fff8, 0 24px 60px -32px #1c3a5740;
  }
  :root[data-theme="night"] {
    --bg:          #16283A;
    --bg-card:     #1E3448;
    --bg-footer:   #12222F;
    --primary:     #EFE9DA;
    --ink:         #EDF3F0;
    --sub:         #C3D3DC;
    --faint:       #A6BDCA;
    --accent:      #5BC4CE;
    --accent-soft: #1D3C4A;
    --amber:       #C99A52;
    --green:       #7FB79A;
    --hairline:    #2B4459;
    --on-accent:   #0E2230;
    --mv-base:     #0b1723;
    --page-mat:    #0d1a26;
    --btn-bg:      #5BC4CE;
    --shadow:0 24px 60px -32px #000c;
  }

  *{box-sizing:border-box}
  html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;background:var(--bg);overflow-x:hidden;
    font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
    color:var(--ink);font-size:17px;line-height:1.9;
  }
  .mincho{font-family:"Shippori Mincho B1","Zen Kaku Gothic New",serif;}
  img{display:block;max-width:100%}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

  /* ── 署名モチーフ：西表島の生きもの・草木の手描き風ラインアイコン ──
     セクションごとに島のモチーフを一つずつ。飴色の細い線で、小さく控えめに */
  .icn{display:inline-block;width:32px;height:32px;flex:none;color:var(--amber);
    fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

  /* ── 背景の額装：水彩紅型の海 ──
     提供素材（資料/img）の水彩タッチ紅型イラスト。ジンベエザメ・マンタ・
     ウミガメ・サンゴにクマノミ、波、ヤシとハイビスカスを左右余白へ。
     素材自体が淡いパステルなので、線画SVG時代より不透明度は高めに置き、
     紙地に溶けるよう乗算気味の低コントラストで額装する。 */
  .seascape{display:none}
  /* ── スマホ〜タブレット（1280px未満）：左右の画面端から紅型を「ちら見せ」する額装 ──
     PC のような左右余白が無い幅では、本体の約半分を画面外へ逃がし端から覗かせる。
     不透明度は本文可読性を優先して低く、縦は左右交互に散らして1画面1〜2点の密度にする。
     層はコンテンツの背面（z:-1）。基調色セクションはこの幅で背景透過にして下のイラストを
     通し、色付き帯・カード・写真は不透明のまま＝スクロールでイラストが帯の裏に隠れて流れる。 */
  @media (max-width:1279.98px){
    .seascape{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none}
    .seascape .side{position:absolute;top:0;bottom:0;overflow:hidden;
      width:min(32vw, 140px);opacity:.38}
    :root[data-theme="night"] .seascape .side{opacity:.26}
    .seascape .side.l{left:0}
    .seascape .side.r{right:0}
    .seascape img{position:absolute;height:auto;
      width:min(32vw, 140px);mix-blend-mode:multiply}
    /* 左＝上:流水紋(bk_img_2反転)／下:サンゴ(bk_img_4=彩度を抑える)
       テキストと被らないよう約1/3を画面外へ逃がす（2026-07-22指示） */
    .seascape .side.l img{left:0;transform:translateX(-33%)}
    /* 左上の波は絵柄が左端側に密（反転済）のため外へ逃がさず端付けで見せる */
    .seascape .side.l img:nth-child(1){top:4%;width:min(42vw,180px);transform:translateX(0)}
    .seascape .side.l img:nth-child(2){bottom:0;top:auto;
      width:min(40vw,170px);filter:saturate(.72);opacity:.8}
    /* 右＝上:流水紋+小魚(bk_img_3=彩度を抑える)／下:流水紋(bk_img_1)。いずれも右端付け・約1/3画面外へ */
    .seascape .side.r img{right:0;transform:translateX(33%)}
    :root[data-theme="night"] .seascape img{mix-blend-mode:screen;filter:saturate(1.15)}
    /* 右上の魚はさらに右へ＝左1/3（小魚側）だけ覗かせる */
    .seascape .side.r img:nth-child(1){top:12%;width:min(46vw,200px);filter:saturate(.72);opacity:.8;transform:translateX(66%)}
    .seascape .side.r img:nth-child(2){top:62%}
  }
  @media (min-width:1280px){
    .seascape{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none} /* SPと同じくコンテンツ背面 */
    .seascape .side{position:absolute;top:0;bottom:0;overflow:hidden;
      width:calc((100vw - 1140px)/2);opacity:.55}
    :root[data-theme="night"] .seascape .side{opacity:.28}
    .seascape .side.l{left:0}
    .seascape .side.r{right:0}
    .seascape img{position:absolute;left:7%;height:auto;
      width:min(86%, 300px, 24vh); /* 帯幅と画面高さの両方に収め、見切れと縦の重なりを防ぐ */
      mix-blend-mode:multiply}
    :root[data-theme="night"] .seascape img{mix-blend-mode:screen;filter:saturate(1.15)}
    /* 左＝上:流水紋(bk_img_2反転・左端付け)／下:サンゴ(bk_img_4=彩度を抑える) */
    .seascape .side.l img{left:0}
    .seascape .side.l img:nth-child(1){top:5%;width:min(88%,330px)}
    .seascape .side.l img:nth-child(2){bottom:0;top:auto;
      width:min(88%,330px);filter:saturate(.72);opacity:.8}
    /* 右＝上:流水紋+小魚(bk_img_3=彩度を抑える)／下:流水紋(bk_img_1)。右端付け */
    .seascape .side.r img{left:auto;right:0}
    .seascape .side.r img:nth-child(1){top:6%;width:min(100%,380px);filter:saturate(.72);opacity:.8}
    .seascape .side.r img:nth-child(2){top:52%}
  }
  /* ── 固定背景のグラデーション：中央が明るく、四隅へ海色が滲む ──
     viewportに固定（パララックス）＝コンテンツがこの上を流れる。背景透過のセクションで
     中央の明るみが覗き、不透明の帯・カード・写真はそのまま上を覆う。
     層順：body地色 → このグラデ → .seascape（紅型イラスト） → コンテンツ */
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(90% 72% at 50% 40%, #FFFFFFCF, #FFFFFF00 70%),
      radial-gradient(60% 48% at 6% 4%, #2FA8B530, transparent 62%),
      radial-gradient(64% 52% at 97% 94%, #2FA8B528, transparent 64%),
      radial-gradient(48% 40% at 96% 6%, #B9873C1A, transparent 65%),
      radial-gradient(46% 38% at 4% 96%, #B9873C14, transparent 65%)}
  :root[data-theme="night"] body::before{
    background:
      radial-gradient(85% 68% at 50% 40%, #24405C99, #24405C00 70%),
      radial-gradient(60% 48% at 6% 4%, #5BC4CE12, transparent 62%),
      radial-gradient(64% 52% at 97% 94%, #5BC4CE0e, transparent 64%),
      radial-gradient(70% 55% at 50% 108%, #0B1723B3, transparent 72%)}
  body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:240px 240px;opacity:.045;mix-blend-mode:multiply}
  :root[data-theme="night"] body::after{opacity:.05;mix-blend-mode:soft-light}

  /* ── テーマ切替ピル（プレビュー用ツール。デザインの一部ではない） ── */
  .theme-pill{position:fixed;top:14px;right:14px;z-index:99;display:flex;gap:2px;
    background:#0009;border:1px solid #fff5;border-radius:999px;padding:3px;backdrop-filter:blur(6px)}
  .theme-pill button{font-family:inherit;font-size:12px;letter-spacing:.1em;border:none;cursor:pointer;
    border-radius:999px;padding:5px 14px;background:transparent;color:#fffc}
  .theme-pill button.on{background:#fff;color:#222}

  /* ── ブランド下の小英字（トップ.nav2と下層.page-head共通） ── */
  .brand-of{display:block;font-size:9px;letter-spacing:.3em;line-height:1;margin-top:5px;
    font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-weight:500;opacity:.78}

  /* ── ハンバーガーボタン（スマホ幅のみ表示。PCは非表示） ── */
  .nav-toggle{display:none;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;background:transparent;border:0;cursor:pointer;color:#eef2ef}
  .mv .nav2.scrolled .nav-toggle{color:var(--primary)}
  .page-head .nav-toggle{color:#EDE7D8}
  .nav-toggle-bars{position:relative;display:block;width:22px;height:2px;
    background:currentColor;border-radius:2px;transition:background .2s}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;
    width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease}
  .nav-toggle-bars::before{top:-7px}
  .nav-toggle-bars::after{top:7px}
  .nav-open .nav-toggle-bars{background:transparent}
  .nav-open .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
  .nav-open .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}
  @media (prefers-reduced-motion:reduce){
    .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{transition:none}}

  /* ── 写真処理：グレースケール＋藍寄りのトーン（オレンジ/セピア禁止） ── */
  .duo{position:relative;overflow:hidden;background:var(--mv-base)}
  .duo img{width:100%;height:100%;object-fit:cover;
    filter:grayscale(1) contrast(1.06) brightness(1.02);}
  .duo::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,#1c3a5738,#26334028 55%,#10202e55);
    mix-blend-mode:multiply;}
  .duo::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(120% 90% at 50% 20%,#f7f3e810,#10202e50);
    mix-blend-mode:soft-light;}

  /* ---------- サイト本体：各セクションは全幅バンド、中身は1120px ---------- */
  .inner{max-width:1120px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}

  /* MV：全画面写真＋左に特大の名前 */
  .mv{position:relative;z-index:2;height:100svh;min-height:560px;color:#f2ede3;overflow:hidden;background:var(--mv-base)}
  .mv .ph{position:absolute;inset:0}
  .mv .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 20%;
    filter:grayscale(1) contrast(1.05) brightness(.98);
    opacity:0;animation:mvFade 16s infinite, mvZoom 16s infinite}
  .mv .ph img:nth-child(1){animation-delay:0s,0s}
  .mv .ph img:nth-child(2){animation-delay:4s,4s}
  .mv .ph img:nth-child(3){animation-delay:8s,8s}
  .mv .ph img:nth-child(4){animation-delay:12s,12s}
  @keyframes mvFade{0%{opacity:0} 5%{opacity:1} 25%{opacity:1} 33%{opacity:0} 100%{opacity:0}}
  @keyframes mvZoom{0%{transform:scale(1)} 33%{transform:scale(1.06)} 100%{transform:scale(1.06)}}
  @media (prefers-reduced-motion:reduce){
    .mv .ph img{animation:none;opacity:0}
    .mv .ph img:first-child{opacity:1}
  }
  /* 写真の色付け：藍に寄せる（テーマで濃度を変える） */
  .mv .ph::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;
    background:linear-gradient(120deg,#16283a66,#1c3a5740 55%,#0e223066)}
  :root[data-theme="night"] .mv .ph::after{
    background:linear-gradient(120deg,#0e223088,#16283a55 55%,#0b172388)}
  .mv .scrim{position:absolute;inset:0;
    background:linear-gradient(90deg,#0e1b28d9 0%,#0e1b2899 32%,#0e1b2822 60%,#0e1b2800 78%),
               linear-gradient(180deg,#0e1b2866,#0e1b2800 22%,#0e1b2800 70%,#0e1b28cc)}
  :root[data-theme="night"] .mv .scrim{
    background:linear-gradient(90deg,#0b1723e6 0%,#0b1723a6 32%,#0b172333 60%,#0b172300 78%),
               linear-gradient(180deg,#0b172380,#0b172300 22%,#0b172300 70%,#0b1723d9)}
  /* グローバルナビ：固定でスクロール追従。MV上は透過、スクロールすると背景＋濃色文字に切替 */
  .mv .nav2{position:fixed;top:0;left:0;right:0;display:flex;align-items:baseline;justify-content:space-between;
    padding:26px clamp(20px,4vw,44px);padding-right:clamp(120px,12vw,150px);z-index:60;
    transition:background-color .3s,padding .3s,box-shadow .3s}
  /* JS無効時は固定にせず、MVと一緒にスクロールで流す（.scrolled が付かない前提のフォールバック） */
  .no-js .mv .nav2{position:absolute}
  .mv .nav2.scrolled{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);
    padding-top:13px;padding-bottom:13px;box-shadow:0 1px 0 var(--hairline),0 10px 30px -24px #26334066}
  .mv .nav2 .ja{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:18px;letter-spacing:.12em;color:#f6f2e8;transition:color .3s}
  .mv .nav2.scrolled .ja{color:var(--primary)}
  .mv .nav2 nav{display:flex;gap:26px;font-size:16px;letter-spacing:.04em}
  .mv .nav2 nav a{color:#e6e9e4;text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;
    transition:color .25s,border-color .25s}
  .mv .nav2 nav a:hover{color:#fff;border-bottom-color:#f4efe466}
  .mv .nav2 nav a.on{color:#fff;border-bottom:2px solid var(--accent)}
  .mv .nav2.scrolled nav a{color:var(--sub)}
  .mv .nav2.scrolled nav a:hover{color:var(--primary);border-bottom-color:var(--amber)}
  .mv .nav2.scrolled nav a.on{color:var(--primary);border-bottom-color:var(--accent)}
  .mv .bigname{position:absolute;left:clamp(20px,4vw,44px);bottom:118px;z-index:3}
  .mv .bigname .kicker2{font-size:16px;letter-spacing:.3em;color:#8fd2da;font-weight:700;
    display:flex;align-items:center;gap:12px;margin-bottom:22px}
  .mv .bigname .kicker2::before{content:"";width:26px;height:2px;background:var(--accent)}
  .mv .bigname h1{font-family:"Shippori Mincho B1",serif;font-weight:500;margin:0;
    font-size:clamp(64px,9vw,124px);line-height:1.08;letter-spacing:.1em;color:#f6f3ea;
    text-shadow:0 2px 44px #000a}
  .mv .bigname .en{font-size:16px;letter-spacing:.22em;color:#dde3e6;margin-top:22px}
  .mv .bigname .catch-m{display:none}
  /* キャッチコピー：縦書き明朝（仕様書の指定）。MV右側に立てる */
  .mv .catch-v{position:absolute;right:clamp(28px,5vw,64px);top:clamp(90px,14vh,130px);z-index:3;
    writing-mode:vertical-rl;font-family:"Shippori Mincho B1",serif;font-weight:500;
    font-size:clamp(18px,1.8vw,23px);letter-spacing:.4em;line-height:2.2;
    color:#f2efe4;text-shadow:0 1px 28px #000c;font-feature-settings:"vpal"}
  .mv .catch-v::after{content:"";display:block;width:1px;height:72px;margin:22px auto 0;
    background:linear-gradient(180deg,var(--amber),transparent)}
  .mv .live-peek{position:absolute;right:clamp(20px,4vw,44px);bottom:38px;z-index:3;background:var(--bg-card);
    color:var(--ink);border-radius:10px;padding:15px 22px;display:flex;gap:18px;align-items:center;
    border:1px solid var(--hairline);box-shadow:0 18px 50px -20px #000c;text-decoration:none;
    transition:transform .25s,box-shadow .25s}
  .mv .live-peek:hover{transform:translateY(-3px);box-shadow:0 24px 56px -20px #000c}
  @media (prefers-reduced-motion:reduce){.mv .live-peek:hover{transform:none}}
  .mv .live-peek .d{font-family:"Shippori Mincho B1",serif;font-size:25px;font-weight:600;line-height:1;color:var(--primary);font-feature-settings:"tnum"}
  :root[data-theme="night"] .mv .live-peek .d{color:var(--accent)}
  .mv .live-peek .d span{display:block;font-size:9px;letter-spacing:.14em;color:var(--sub);margin-top:3px;
    font-family:"Zen Kaku Gothic New",sans-serif}
  .mv .live-peek .t{font-size:16px;font-weight:700}
  .mv .live-peek .v{font-size:12px;color:var(--sub)}

  /* ボタン・もっと見る：リンクは藍/生成り文字＋ターコイズ下線 */
  .more{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-size:16px;letter-spacing:.12em;
    color:var(--primary);text-decoration:none;border:1px solid color-mix(in srgb,var(--primary) 55%,transparent);
    border-radius:999px;padding:12px 28px;
    transition:border-color .25s,color .25s,background-color .25s}
  .more::after{content:"→";color:var(--accent);transition:transform .25s}
  .more:hover{border-color:var(--amber);color:var(--primary);background:color-mix(in srgb,var(--amber) 8%,transparent)}
  .more:hover::after{transform:translateX(4px)}
  @media (prefers-reduced-motion:reduce){.more:hover::after{transform:none}}
  .more.light{color:#f4efe4;border-color:#f4efe4aa}
  .more.light::after{content:"→";color:#f4efe4}
  .more.light:hover{background:#f4efe41a;border-color:#f4efe4}
  .sec-foot{display:flex;justify-content:flex-end;margin-top:14px}

  /* リンクカード */
  .linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
  /* アイコン左＋右にラベル/タイトルの横並び・縦幅は詰める（2026-07-22ユーザー指示の構図） */
  .linkcard{position:relative;display:flex;align-items:center;gap:14px;
    text-decoration:none;color:var(--ink);background:var(--bg-card);border:1px solid var(--hairline);
    border-radius:10px;padding:14px 18px;transition:border-color .25s,box-shadow .25s,transform .25s}
  .linkcard:hover{border-color:var(--accent);box-shadow:0 14px 32px -22px #26334059;transform:translateY(-3px)}
  :root[data-theme="night"] .linkcard:hover{box-shadow:0 14px 32px -22px #000c}
  @media (prefers-reduced-motion:reduce){.linkcard:hover{transform:none}}
  .linkcard .ico-badge{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);color:var(--accent);transition:background .25s,color .25s}
  .linkcard .ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .linkcard:hover .ico-badge{background:var(--accent);color:var(--bg-card)}
  .linkcard .body{min-width:0}
  .linkcard .k{font-size:10.5px;letter-spacing:.22em;font-weight:700;margin-bottom:3px;color:var(--accent)}
  .linkcard .t{font-family:"Shippori Mincho B1",serif;font-size:17px;font-weight:600;letter-spacing:.04em;color:var(--primary);line-height:1.4}
  .linkcard .d{font-size:14px;color:var(--sub);margin-top:3px;line-height:1.6}
  .linkcard .k.g{color:var(--green)} .linkcard .k.e{color:var(--amber)}
  .linkcard .ext{position:absolute;top:14px;right:14px;width:14px;height:14px;fill:none;stroke:var(--sub);
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:stroke .25s,opacity .25s}
  .linkcard:hover .ext{stroke:var(--accent);opacity:1}

  /* お問い合わせ：テキスト→フォームの縦積み（PCも1カラム・読み幅に絞って中央寄せ）
     地は「について」と同じ紙目テクスチャを敷く */
  .contact{background:url("textures/bg_texture_noise.png") repeat,var(--bg-footer)}
  :root[data-theme="night"] .contact{background:url("textures/bg_texture_noise.png") repeat,var(--bg-footer)}
  .contact .grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,44px);
    max-width:760px;margin:0 auto}
  .contact .note{font-size:16px;color:var(--sub);line-height:2}
  .contact .note .lead{font-family:"Shippori Mincho B1",serif;font-size:clamp(19px,1.7vw,21px);
    color:var(--primary);line-height:2.1;letter-spacing:.04em;margin:0 0 18px}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:16px;font-weight:700;letter-spacing:.08em;margin-bottom:8px;color:var(--ink)}
  .field label small{font-weight:400;color:var(--amber);margin-left:8px;font-size:11px}
  .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);
    background:var(--bg-card);border:1px solid var(--hairline);border-radius:8px;padding:12px 14px;line-height:1.6}
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
  .field textarea{min-height:140px;resize:vertical}
  /* 送信ボタン：ターコイズ＋白文字（2026-07-22ユーザー指示。旧・濃色文字指定を上書き） */
  .submit{font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.1em;color:#fff;
    background:var(--btn-bg);border:none;border-radius:999px;padding:14px 44px;cursor:pointer}
  .submit:hover{filter:brightness(1.06)}
  /* 送信ボタンはフォームの左右中央に（CF7の<p>内inlineのままだと左寄せになる） */
  .submit{display:block;margin-left:auto;margin-right:auto}

  /* 基調色セクションは全幅で背景透過＝背面（z:-1）の紅型額装を通す（基調色はbodyが持つ）。
     クラス付きの色帯（.about/.band-shallow/.contact等）は特異性で不透明のまま残る */
  section{padding:clamp(76px,9vw,120px) 0;background:transparent}
  /* ※SP限定の章立てtint（無印sectionへの半透明帯色）は「横幅で背景色が変わる」との
     ユーザー指摘により撤去（2026-07-16）。背景色は全幅共通＝PC基準に統一 */
  /* バンドのリズム：生成り → カード白（夜は藍明） → 浅瀬 → 生成り → 写真 → カード白 → 生成り濃 */
  .band-card{background:var(--bg-card)}
  .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(40px,5vw,56px)}
  .sec-head .ja{font-family:"Shippori Mincho B1",serif;font-size:clamp(26px,2.3vw,31px);font-weight:600;
    letter-spacing:.14em;line-height:1.4;color:var(--primary)}
  .sec-head .en{font-size:11px;letter-spacing:.38em;color:var(--sub);font-weight:500;
    text-transform:uppercase;transform:translateY(-2px)}
  /* 見出し罫：起点に島のモチーフ（セクションごとに違う生きもの・草木）＝飴色 */
  .fest .kicker .icn{width:27px;height:27px}
  .sec-head .rule{flex:1;min-width:56px;height:9px;position:relative;align-self:center}
  .sec-head .rule::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--hairline)}

  /* ライブ情報：日付先導 */
  .lives{border-top:1px solid var(--hairline)}
  .live{display:grid;grid-template-columns:128px 1fr auto;gap:26px;align-items:center;
    padding:26px 10px;border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit;
    transition:border-color .25s,padding-left .25s,background-color .25s}
  .live:hover{border-bottom-color:var(--amber);padding-left:16px} /* 罫線hoverに飴色 */
  .live .arr{font-family:"Cormorant Garamond","Shippori Mincho B1",serif;font-size:22px;color:var(--accent);
    transition:transform .25s;justify-self:end}
  .live:hover .arr{transform:translateX(5px)}
  .live:hover .body .t{color:var(--primary)}
  .live .date{font-family:"Shippori Mincho B1",serif}
  .live .date .d{font-size:28px;font-weight:600;line-height:1;color:var(--primary);font-feature-settings:"tnum"}
  .live .date .m{font-size:12px;color:var(--faint);letter-spacing:.2em;margin-top:6px}
  .live > *{min-width:0}
  .live .body .t{font-family:"Shippori Mincho B1",serif;font-size:19px;font-weight:500;
    letter-spacing:.03em;line-height:1.6;overflow-wrap:anywhere}
  .live .body .v{font-size:16px;color:var(--sub);margin-top:5px;letter-spacing:.02em;overflow-wrap:anywhere}
  @media (prefers-reduced-motion:reduce){.live:hover{padding-left:10px}}

  /* お知らせ：カテゴリーチップはカテゴリごとに色分け（先頭ドット＋淡い同系地） */
  .news{border-top:1px solid var(--hairline)}
  .news .row{display:flex;gap:22px;padding:19px 10px;border-bottom:1px solid var(--hairline);
    align-items:baseline;transition:border-color .25s,padding-left .25s}
  .news .row:hover{border-bottom-color:var(--amber);padding-left:16px} /* ライブ情報のホバー（右へスライド）に統一 */
  .news .row time{font-size:16px;color:var(--faint);letter-spacing:.12em;flex:none;width:112px;font-feature-settings:"tnum"}
  /* カテゴリチップ：先頭ドットは廃止。本文より一段小さく、淡地＋枠で色分け */
  .news .row .c{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--primary);
    background:color-mix(in srgb,var(--cat,var(--accent)) 13%,var(--bg-card));
    border:1px solid color-mix(in srgb,var(--cat,var(--accent)) 34%,transparent);
    border-radius:5px;padding:3px 10px;flex:none;white-space:nowrap;letter-spacing:.04em}
  :root[data-theme="night"] .news .row .c{color:var(--primary)}
  .c.rel{--cat:var(--accent)}    /* リリース＝ターコイズ */
  .c.media{--cat:var(--amber)}   /* メディア＝飴色 */
  .c.event{--cat:var(--green)}   /* イベント＝深緑 */
  .c.info{--cat:var(--sub)}      /* お知らせ＝藍グレー */
  .news .row a{color:var(--ink);text-decoration:none;transition:color .25s}
  .news .row:hover a{color:var(--primary)}
  @media (prefers-reduced-motion:reduce){.news .row:hover{padding-left:10px}}

  /* About：マングローブの緑をほんの少し混ぜた「島の緑」のwash面（--green由来の派生淡色）
     ＋紙目ノイズテクスチャ（資料/img提供素材）。multiplyで昼夜どちらのwash色も殺さず粒だけ乗せる */
  .about{background:url("textures/bg_texture_noise.png") repeat,color-mix(in srgb,var(--green) 9%,var(--bg));
    background-blend-mode:multiply}
  .about .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
  .about p{margin:0 0 18px;font-size:16px;line-height:2;letter-spacing:.01em}
  .about .lead{font-family:"Shippori Mincho B1",serif;font-size:clamp(20px,1.9vw,23px);
    line-height:2.15;letter-spacing:.05em;margin-bottom:26px;color:var(--primary)}
  .about .fig{aspect-ratio:4/3;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
  .about .fig img{width:100%;height:100%;object-fit:cover;display:block}

  /* ディスコグラフィー：浅瀬/深瀬（--accent-soft）の海の面に浮かべる */
  .band-shallow{background:var(--accent-soft)}
  /* ディスコグラフィー：横自動スクロール（マーキー・全幅） */
  .disco-marquee{overflow:hidden;padding:10px 0 16px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .disco-track{display:flex;gap:clamp(16px,2vw,22px);width:max-content;padding:0 24px;
    animation:discoScroll 70s linear infinite}
  .disco-marquee:hover .disco-track{animation-play-state:paused}
  @keyframes discoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){
    .disco-track{animation:none}
    .disco-marquee{overflow-x:auto}
  }
  .disc{width:196px;flex:none;text-decoration:none;color:var(--ink);background:var(--bg-card);
    border-radius:10px;overflow:hidden;box-shadow:0 6px 20px -12px #26334040;
    transition:transform .3s,box-shadow .3s}
  .disc:hover{transform:translateY(-5px);box-shadow:0 22px 44px -20px #26334066}
  :root[data-theme="night"] .disc{box-shadow:0 6px 20px -12px #00000080}
  :root[data-theme="night"] .disc:hover{box-shadow:0 22px 44px -24px #000c}
  @media (prefers-reduced-motion:reduce){.disc:hover{transform:none}.disc .jk img{transition:none}}
  .disc .jk{aspect-ratio:1/1;overflow:hidden;background:var(--accent-soft)}
  .disc .jk img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .disc:hover .jk img{transform:scale(1.045)}
  .disc .meta{padding:16px 18px 20px}
  .disc .t{font-family:"Shippori Mincho B1",serif;font-size:17px;font-weight:600;letter-spacing:.04em;color:var(--primary);line-height:1.5}
  .disc:hover .t{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
  .disc .y{font-size:16px;color:var(--faint);letter-spacing:.1em;margin-top:5px}
  /* 詳細ページの .dbadge と同じ体裁に統一 */
  .disc .c{display:inline-block;font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--primary);
    background:var(--accent-soft);border-radius:5px;padding:3px 10px;margin-top:9px;white-space:nowrap}
  :root[data-theme="night"] .disc .c{color:var(--accent);border:1px solid #5bc4ce33}
  .disc .c.min{color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--bg-card));
    border:1px solid color-mix(in srgb,var(--green) 34%,transparent)}
  :root[data-theme="night"] .disc .c.min{color:var(--green)}

  /* 音祭り：写真は元の色のまま。マスクは「祭りの夕暮れ」の色付きグラデ
     （下=藍・中=梅紫・上=珊瑚〜金の残照。文字が載る下部は濃いめで可読性担保。黒一色は暗すぎるとのFB） */
  .fest .bg img{filter:none}
  .fest .duo::after{background:
    linear-gradient(0deg,rgba(24,38,72,.90) 0%,rgba(96,44,76,.62) 45%,rgba(195,81,47,.42) 75%,rgba(247,197,72,.26) 100%),
    linear-gradient(90deg,rgba(22,40,58,.72),rgba(0,0,0,0) 60%);mix-blend-mode:normal}
  .fest .duo::before{display:none}
  .fest{position:relative;z-index:1;color:#f4efe4;min-height:480px;display:flex;align-items:flex-end; /* z:2だと.mv(z:2)内のグロナビより前面に出る（DOM後勝ち）ため1に */
    padding:clamp(48px,7vw,88px) 0}
  .fest .bg{position:absolute;inset:0;background:#222}
  .fest .inner{position:relative;z-index:2;width:100%}
  .fest .in{max-width:580px}
  .fest .kicker{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.3em;color:#ffe9bf;font-weight:700}
  .fest h3{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:clamp(30px,3.6vw,44px);
    margin:16px 0 18px;letter-spacing:.1em;line-height:1.4}
  .fest p{margin:0;font-size:16px;color:#f2ecdf;line-height:2;letter-spacing:.01em}

  /* フッター：昼＝琉球藍（--primary）に生成り文字で頁を締める。夜＝MVと同じ藍墨（--mv-base）。
     文字は藍の上で読める生成り系の派生トーン */
  footer{position:relative;z-index:1;padding:56px 0 56px;background:var(--primary);color:#EDE7D8} /* .festと同じ理屈でナビ(z:60 in .mv z:2)より下へ */
  :root[data-theme="night"] footer{background:var(--mv-base)}
  footer .logo{display:flex;align-items:center;gap:14px}
  footer .logo .ja{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:20px;letter-spacing:.14em;color:#F3EEE1}
  /* バナーリンク枠（観光協会・船浮海運など）：藍の上のすりガラス枠 */
  .fbanners{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid #ffffff26}
  .fbanners .lbl{display:block;font-size:11px;letter-spacing:.26em;font-weight:700;color:#CBD6DE;margin-bottom:16px}
  .fbanners .row{display:flex;flex-wrap:wrap;gap:12px}
  .fbanner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 18px;
    background:#ffffff10;border:1px solid #ffffff33;border-radius:8px;text-decoration:none;
    color:#EDF1F4;font-size:16px;letter-spacing:.03em;text-align:center;transition:border-color .2s,color .2s}
  .fbanner:hover{border-color:#C99A52;color:#fff}
  .fbanner small{display:block;font-size:10.5px;letter-spacing:.14em;color:#B9C6D0;margin-top:2px}
  /* 画像バナー：ロゴは明地前提の配色のため白チップに載せる */
  .fbanner-img{background:#fff;padding:10px 16px}
  .fbanner-img:hover{background:#fff}
  /* ロゴの元サイズ差を吸収して見た目を統一（高さ固定＋幅上限のボックスに収める） */
  .fbanner-img img{display:block;height:40px;width:auto;max-width:170px;object-fit:contain}
  .fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:baseline}
  footer .links{display:flex;gap:20px;font-size:16px;flex-wrap:wrap}
  footer .links a{color:#CBD6DE;text-decoration:none;padding-bottom:2px}
  footer .links a:hover{color:#fff;border-bottom:1px solid #C99A52}

  @media(max-width:820px){
    .about .grid{grid-template-columns:1fr}
    .disc{width:158px}
    .sec-head{flex-wrap:wrap;row-gap:6px}
    .live{grid-template-columns:84px 1fr}
    .live .arr{display:none}
    /* 下層ページへ飛ぶ「もっと見る」ボタンはSPで中央寄せ */
    .sec-foot{justify-content:center}
    /* SPは背面イラストがコンテンツ幅まで入り込むため、ライブ一覧と
       「もっと見る」ボタンには地色を敷いて可読性を確保（.lightは暗色帯用のため除外） */
    .lives{background:var(--bg)}
    .sec-foot .more:not(.light){background:var(--bg)}
    /* 音祭りバナーの「特設ページへ」ボタンもSPは中央寄せ */
    .fest .more.light{display:flex;width:max-content;margin-left:auto;margin-right:auto}
    /* フッター関連リンク：SPは縮小して3つ横一列に収める（縦積み回避） */
    .fbanners .row{gap:6px}
    .fbanner{padding:6px 8px;font-size:11.5px}
    .fbanner small{font-size:8.5px;letter-spacing:.08em}
    .fbanner-img{padding:6px 8px}
    .fbanner-img img{height:24px;max-width:88px}

    /* ── スマホ幅のグローバルナビ＝ハンバーガー化 ── */
    .js .nav-toggle{display:inline-flex}
    .mv .nav2{padding:14px 16px;align-items:center}
    /* JS有効時＝バーの下にドロップダウン展開 */
    .js .mv .nav2 nav{position:absolute;top:100%;left:0;right:0;
      flex-direction:column;gap:0;
      background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(10px);
      border-top:1px solid var(--hairline);box-shadow:0 16px 30px -18px #26334088;
      padding:6px 16px 14px;max-height:70vh;overflow-y:auto;display:none}
    body.nav-open .mv .nav2 nav{display:flex}
    .js .mv .nav2 nav a,
    .js .mv .nav2.scrolled nav a{display:flex;align-items:center;min-height:44px;
      color:var(--primary);padding:13px 4px;border-bottom:1px solid var(--hairline)}
    .js .mv .nav2 nav a:last-child{border-bottom:none}
    .js .mv .nav2 nav a.on,
    .js .mv .nav2.scrolled nav a.on{color:var(--primary);border-bottom:1px solid var(--hairline)}
    /* JS無効時のフォールバック＝バー内で横スクロールして全リンクに到達可能 */
    .no-js .mv .nav2{flex-wrap:wrap}
    .no-js .mv .nav2 nav{width:100%;gap:16px;margin-top:8px;padding-bottom:4px;
      overflow-x:auto;-webkit-overflow-scrolling:touch}

    /* テーマ切替ピルはヘッダーバーの下へ（開いたメニューが被るときは隠す） */
    /* SPは昼・夜を縦積み＝丸ボタン2つの縦カプセルに（横長楕円のまま積むと不格好） */
    .theme-pill{top:78px;flex-direction:column;padding:4px;gap:4px}
    .theme-pill button{width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center}
    body.admin-bar .theme-pill{top:124px} /* 78px＋モバイル管理バー46px：オフセット後のバー下端を避ける */
    body.nav-open .theme-pill{opacity:0;visibility:hidden}

    /* モバイルでは縦書きが大名と窮屈に競合するため、横書きで名前の下に置く */
    .mv .catch-v{position:static;writing-mode:horizontal-tb;font-size:16px;letter-spacing:.14em;line-height:1.8}
    .mv .catch-v::after{display:none}
    .mv .bigname .catch-m{display:block;font-family:"Shippori Mincho B1",serif;font-size:16px;
      letter-spacing:.14em;color:#f0ede2;margin-top:18px;text-shadow:0 1px 20px #000b}
    .mv .catch-v{display:none}
    .mv .bigname{bottom:150px;right:16px}
    .mv .live-peek{right:16px;left:16px;bottom:24px;padding:11px 16px;justify-content:flex-start}
    .news .row{flex-wrap:wrap;gap:10px 14px}
    .news .row time{width:auto}
  }

/* WP管理バー表示時にテーマ切替ピルが被らないように（SP幅のtop:110pxを上書きしないようPC幅に限定） */
@media(min-width:821px){
  body.admin-bar .theme-pill{top:46px}
}

/* 管理バー表示時は固定ヘッダーバーを管理バー高（PC=32px／782px以下=46px）ぶん下げる */
body.admin-bar .mv .nav2,
body.admin-bar .page-head .bar{top:32px}
@media(max-width:782px){
  body.admin-bar .mv .nav2,
  body.admin-bar .page-head .bar{top:46px}
}

/* ===== スキップリンク：視覚的に隠し、キーボードフォーカス時のみ表示（固定バーより手前 z:100） ===== */
.skip-link{position:fixed;top:8px;left:8px;z-index:100;
  padding:10px 18px;background:var(--primary);color:var(--bg); /* 夜は--primaryが明色化するため文字は固定色でなく--bg */
  border-radius:6px;font-size:15px;text-decoration:none;
  box-shadow:0 6px 20px -8px #26334088;
  transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:none;outline:2px solid var(--accent);outline-offset:2px}

/* ===== ページトップへ戻る：三線ヤマネコ（右下固定・スクロール追従） ===== */
.totop{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:40;
  border:0;background:transparent;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s,transform .35s,visibility .35s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop img{width:clamp(72px,8.5vw,96px);height:auto;
  filter:drop-shadow(0 6px 14px rgba(28,58,87,.28));transition:transform .25s}
.totop:hover img{transform:translateY(-5px) rotate(-4deg)}
.totop-label{font-size:10px;letter-spacing:.2em;font-weight:700;color:var(--primary);
  background:var(--bg-card);border:1px solid var(--hairline);border-radius:999px;padding:2px 12px;
  box-shadow:0 2px 8px rgba(28,58,87,.12)}
@media (prefers-reduced-motion:reduce){.totop:hover img{transform:none}}