/* ══════════════════════════════════════
   CSS VARIABLES — 海×ライフスタイル
══════════════════════════════════════ */
:root {
  --bg:       #ececea;
  --bg2:      #e3e3df;
  --surface:  #ffffff;
  --ink:      #1a1a18;
  --ink2:     #4d4d48;
  --muted:    rgba(30,30,26,0.45);
  --accent:   #0095b8;
  --teal:     #0095b8;
  --sand:     #e8dcc8;
  --coral:    #e05a3a;
  --border:   rgba(0,150,184,0.14);
  --orbit-dur:180s;
  --r:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
}

/* ══════════════════════════════════════
   GRAIN OVERLAY
══════════════════════════════════════ */
body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:200;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 36px;
  background:rgba(236,236,234,0.88);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,150,184,0.10);
}
.logo{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(13px,2vw,16px);letter-spacing:.18em;
  color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:10px;
  text-transform:uppercase;
}
.logo-mark{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--accent));
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-mark svg{width:14px;height:14px;fill:white;}
nav{display:flex;gap:4px;}
nav a{
  color:var(--ink2);text-decoration:none;
  font-size:11px;letter-spacing:.14em;padding:7px 14px;
  border-radius:100px;transition:all .22s;
  font-family:'Barlow Condensed',sans-serif;font-weight:400;
  text-transform:uppercase;
}
nav a:hover{color:var(--surface);background:var(--ink);}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  padding:100px 24px 80px;
  background:#fff;
}

/* 水面の光のゆらめき（現在は非表示。復活させたい場合は下記を .water-shimmer に戻してください）
.water-shimmer{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent 0px,transparent 40px,
      rgba(0,180,200,.018) 40px,rgba(0,180,200,.018) 42px
    );
  animation:shimmer-drift 18s ease-in-out infinite alternate;
}
@keyframes shimmer-drift{
  0%{transform:translateX(-30px) skewX(-1deg);}
  100%{transform:translateX(30px) skewX(1deg);}
} */
.water-shimmer{ display:none; }

/* ══════════════════════════════════════
   ORBIT SYSTEM
══════════════════════════════════════ */
.orbit-system{
  position:relative;
  width:min(520px,88vw);
  height:min(520px,88vw);
  margin:0 auto 52px;
  flex-shrink:0;
}
@media(min-width:900px){
  .orbit-system{width:min(660px,56vw);height:min(660px,56vw);}
}

/* 装飾リング — 薄く、上品に */
.orbit-ring-main{
  position:absolute;top:50%;left:50%;
  width:82%;height:82%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(0,150,184,.12);
  pointer-events:none;
}
.orbit-ring-main.dash{
  width:62%;height:62%;
  border-style:dashed;
  border-color:rgba(0,150,184,.07);
}

/* TG 中央 — カード風、クリーン */
.planet-tg{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:30%;height:30%;
  border-radius:50%;
  background:var(--surface);
  border:2px solid rgba(0,150,184,.20);
  box-shadow:
    0 0 0 8px rgba(0,149,184,.06),
    0 8px 40px rgba(0,100,140,.12),
    0 2px 8px rgba(0,0,0,.06);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:2px;z-index:10;overflow:hidden;
  cursor:pointer;text-decoration:none;color:inherit;
  transition:transform .3s,box-shadow .3s;
}
.planet-tg:hover{
  transform:translate(-50%,-50%) scale(1.045);
  box-shadow:
    0 0 0 8px rgba(0,149,184,.10),
    0 10px 48px rgba(0,100,140,.18),
    0 2px 8px rgba(0,0,0,.08);
}
.planet-tg img{
  width:86%;height:86%;object-fit:contain;
}
.planet-tg .planet-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,5vw,36px);font-weight:700;
  letter-spacing:.06em;color:var(--ink);
  line-height:1;
}
.planet-tg .planet-sub{
  font-size:clamp(6px,1.1vw,10px);letter-spacing:.2em;
  color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;font-weight:300;
}

/* ══════════════════════════════════════
   SATELLITE — ライト版
══════════════════════════════════════ */
.satellite{
  position:absolute;
  width:clamp(76px,20vw,158px);
  height:clamp(76px,20vw,158px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--surface);
  border:1.5px solid rgba(0,150,184,.18);
  box-shadow:0 4px 20px rgba(0,80,120,.07);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;color:var(--ink);
  transition:border-color .3s,box-shadow .3s,transform .25s;
  overflow:visible;
  padding:6px 4px 4px;
  z-index:5;
}
.satellite:hover{
  border-color:var(--teal);
  box-shadow:0 8px 32px rgba(0,149,184,.20),0 2px 8px rgba(0,0,0,.06);
  transform:translate(-50%,-50%) scale(1.06);
}
.sat-img-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:0;
}
.sat-img{
  width:68%;height:68%;object-fit:contain;
  display:block;
}
.sat-icon-fallback{font-size:clamp(16px,4vw,26px);line-height:1;}
.sat-label{
  font-size:clamp(7px,1.3vw,10px);
  letter-spacing:.10em;
  color:var(--ink2);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
  padding-bottom:3px;
  flex-shrink:0;
}

/* ══════════════════════════════════════
   HERO TEXT — 詩的、大きく
══════════════════════════════════════ */
.hero-text{position:relative;z-index:5;}
.hero-eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(10px,2vw,12px);letter-spacing:.30em;
  color:var(--accent);margin-bottom:14px;
  opacity:0;animation:fade-up .8s ease forwards .3s;
  text-transform:uppercase;
}
/*
.hero-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(36px,7.5vw,78px);
  font-weight:400;
  font-style:italic;
  line-height:1.05;letter-spacing:-.01em;margin-bottom:8px;
  color:var(--ink);
  opacity:0;animation:fade-up .8s ease forwards .5s;
}
.hero-title em{
  font-style:normal;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.04em;
} */

.hero-title{
  font-family:'Roboto',sans-serif;
  font-weight:700;
  font-stretch:112.5%;
  font-size:clamp(36px,7.5vw,78px);
  font-style:italic;
  line-height:1.05;letter-spacing:-.01em;margin-bottom:8px;
  color:var(--ink);
  opacity:0;animation:fade-up .8s ease forwards .5s;
}

.hero-title .tough-text{
  display:inline-block;
  transform:scaleX(1.3);
  transform-origin:left;
}

.hero-title em{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-style:normal;
  font-stretch:112.5%;
  color:var(--accent);
  letter-spacing:.04em;
} 

.hero-subtitle{
  font-size:clamp(11px,1.8vw,14px);
  color:var(--muted);
  letter-spacing:.06em;
  margin-bottom:20px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:300;
  opacity:0;animation:fade-up .8s ease forwards .65s;
}
.hero-desc{
  font-size:clamp(12px,2vw,14px);color:var(--ink2);
  max-width:420px;margin:0 auto 32px;
  opacity:0;animation:fade-up .8s ease forwards .8s;
  font-weight:300;line-height:1.85;
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
.hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;
  padding:14px 32px;border-radius:100px;
  text-decoration:none;font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.18em;font-weight:600;
  text-transform:uppercase;
  opacity:0;animation:fade-up .8s ease forwards 1s;
  transition:background .22s,transform .22s;
}
.hero-cta:hover{background:var(--accent);transform:translateY(-2px);}
.scroll-cue{
  position:absolute;bottom:28px;left:50%;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;animation:fade-up-centered .8s ease both 1.4s;
}
/* .scroll-cue専用: 水平中央用のtranslateX(-50%)を、fade-upの
   translateYで上書きしないよう1つのtransformにまとめたバージョン。
   汎用の fade-up はhero-eyebrow等でも使われているため変更しない。 */
@keyframes fade-up-centered{
  from{opacity:0;transform:translate(-50%,18px);}
  to{opacity:1;transform:translate(-50%,0);}
}
.scroll-cue span{
  font-size:9px;letter-spacing:.28em;color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  /* letter-spacing adds trailing space after the last character, which
     widens the box beyond the visible glyphs and throws off centering
     against the arrow below — this pulls that trailing space back in. */
  margin-right:-.28em;
}
.scroll-arrow{
  width:1px;height:36px;
  background:linear-gradient(to bottom,var(--accent),transparent);
  animation:sarrow 1.6s ease-in-out infinite;
}
@keyframes sarrow{0%,100%{opacity:1;transform:scaleY(1);}50%{opacity:.3;transform:scaleY(.6);}}

/* ══════════════════════════════════════
   LEAD COPY — Botanist × CrazyPizza風
══════════════════════════════════════ */
.lead-copy{
  background:#000;
  color:#fff;
  text-align:center;
  padding:80px 24px;
  position:relative;overflow:hidden;z-index:1;
}
@media(min-width:769px){
  .lead-copy{
    min-height:100svh;
    padding:40px 24px;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
  }
}
.lead-copy::before{
  content:'';position:absolute;
  top:-60px;left:50%;transform:translateX(-50%);
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,149,184,.12) 0%,transparent 65%);
  pointer-events:none;
}
.lead-copy-inner{max-width:760px;margin:0 auto;}
.lead-copy-jp{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(16px,3.2vw,24px);
  font-weight:400;
  line-height:2.15;
  color:rgba(255,255,255,.75);
  margin-bottom:32px;
  letter-spacing:.08em;
}
.lead-copy-jp strong{
  color:#fff;font-weight:700;
}
.lead-copy-en{
  font-family:'DM Serif Display',serif;
  font-style:italic;
  font-size:clamp(38px,8vw,80px);
  color:rgba(255,255,255,.08);
  line-height:1;
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:20px;
  white-space:nowrap;
  pointer-events:none;
  letter-spacing:-.02em;
}

/* Bubbles rising through the lead-copy section */
.lead-bubbles{
  position:absolute;inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.lead-bubble{
  position:absolute;
  bottom:-40px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.55),rgba(0,149,184,.10) 55%,rgba(255,255,255,0) 76%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 6px rgba(255,255,255,.18);
  animation:bubble-rise linear infinite;
  opacity:0;
}
@keyframes bubble-rise{
  0%{
    transform:translateY(0) translateX(0) scale(.8);
    opacity:0;
  }
  8%{ opacity:.8; }
  85%{ opacity:.55; }
  100%{
    transform:translateY(-560px) translateX(var(--bx,18px)) scale(1.05);
    opacity:0;
  }
}
.lead-copy-inner,.lead-copy-en{position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){
  .lead-bubble{animation:none;display:none;}
}

/* Text rises up from below once the fully-black section comes into view (desktop) */
.lead-copy-inner.reveal{
  transform:translateY(56px);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.lead-copy-inner.reveal.visible{ transform:translateY(0); }
.lead-copy-en.reveal{
  transform:translateY(36px);
  transition:opacity 1.3s ease .2s, transform 1.3s cubic-bezier(.22,.61,.36,1) .2s;
}
.lead-copy-en.reveal.visible{ transform:translateY(0); }
@media(min-width:769px){
  .lead-copy-inner.reveal{ transform:translateY(90px); }
  .lead-copy-en.reveal{ transform:translateY(50px); }
}



/* ══════════════════════════════════════
   NEWS INLINE — tablet/mobile only
══════════════════════════════════════ */
.news-inline{
  display:none;
  background:var(--surface);
  border-bottom:1px solid rgba(0,150,184,.10);
}
.news-inline .section-inner{
  max-width:960px;
  padding-top:52px;
  padding-bottom:58px;
}
.news-inline-list{display:grid;gap:0;}
.news-inline-item{
  padding:16px 0 18px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.news-inline-item:first-child{padding-top:0;}
.news-inline-item:last-child{border-bottom:none;padding-bottom:0;}
.news-inline-meta{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
}
.news-inline-cat{
  display:inline-block;
  margin-left:8px;
  padding:1px 8px;
  border-radius:999px;
  background:rgba(0,150,184,.10);
  color:var(--accent);
  font-size:10px;
  letter-spacing:.04em;
}
.news-inline-title{
  margin-top:8px;
  color:var(--ink);
  font-family:'Shippori Mincho',serif;
  font-size:17px;
  line-height:1.85;
  letter-spacing:.02em;
}
#newsInlineTitle{ font-family:'Shippori Mincho',serif; font-weight:500; }
#newsInlineTitle span{ font-style:normal; }
@media(max-width:1179px){
  .news-inline{display:block;}
  .news-handle{display:none !important;}
  /* news-drawer / news-drawer-backdrop は非表示にしない —
     ハンバーガーメニューの NEWS からタブレット/スマホでも同じ
     ドロワーを開けるようにするため（.open クラスで表示制御） */
}

/* ══════════════════════════════════════
   WHAT IS UNDERWATER PHOTOGRAPHY — yokanka inspired
   scroll-pinned text slides ⇄ photo crossfade (PC)
   stacked copy → photo per slide (mobile/tablet)
══════════════════════════════════════ */
.about-underwater{background:var(--surface);}

/* ---- shared / mobile-first base ---- */
.uw-track{position:relative;}
.uw-pin{position:relative;}
.uw-media{display:none;} /* PC-only crossfade stack, hidden by default */
.uw-copy{position:relative;}
.uw-slide{padding:56px 24px;}
.uw-slide + .uw-slide{border-top:1px solid rgba(0,0,0,.06);}
.uw-eyebrow{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:12px;letter-spacing:.18em;color:var(--ink);margin-bottom:18px;
}
.uw-title{
  font-family:'DM Serif Display',serif;font-weight:400;color:var(--ink);
  font-size:clamp(30px,10vw,46px);line-height:1.08;letter-spacing:.02em;
  margin-bottom:24px;
}
.uw-title .line{display:block;}
.uw-lead{font-family:'Shippori Mincho',serif;font-size:18px;line-height:1.9;letter-spacing:.03em;color:var(--ink2);}
.uw-lead strong{color:var(--ink);font-weight:600;}
.uw-body{font-family:'Shippori Mincho',serif;font-size:15px;line-height:2.05;letter-spacing:.02em;color:rgba(24,22,20,.82);max-width:36em;}
.uw-body + .uw-body{margin-top:14px;}
.uw-foot{color:var(--ink2);}
.uw-slide-media{
  margin:26px -24px 0;aspect-ratio:4/5;overflow:hidden;border-radius:0;
  background:#e2ddcf;
}
.uw-slide-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03);}

/* ---- PC: pin the viewport, slide text vertically, crossfade photo ---- */
@media(min-width:961px){
  .uw-track{height:calc(var(--uw-slides,3) * 100vh);}
  .uw-pin{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:grid;grid-template-columns:1.02fr .98fr;
  }
  .uw-media{
    display:block;position:relative;height:100%;background:#0a4859;
  }
  .uw-media-item{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;}
  .uw-media-item.is-active{opacity:1;}
  .uw-media-item img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03);}
  .uw-copy{height:100%;padding:0 clamp(28px,5vw,74px);}
  .uw-slide{
    position:absolute;top:50%;left:clamp(28px,5vw,74px);right:clamp(28px,5vw,74px);
    padding:0;border-top:none;
    opacity:0;transform:translateY(calc(-50% + 46px));
    transition:opacity .6s ease,transform .6s ease;
  }
  .uw-slide.is-active{opacity:1;transform:translateY(-50%);}
  .uw-slide.is-prev{opacity:0;transform:translateY(calc(-50% - 46px));}
  .uw-title{font-size:clamp(34px,4.4vw,58px);margin-bottom:26px;}
  .uw-lead{font-size:clamp(19px,2vw,23px);}
  .uw-slide-media{display:none;}
}

/* ══════════════════════════════════════
   SECTIONS
══════════════════════════════════════ */
section{position:relative;z-index:1;}
.section-inner{max-width:1120px;margin:0 auto;padding:88px 24px;}
.section-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;letter-spacing:.36em;color:var(--accent);
  margin-bottom:10px;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
}
.section-label::before{
  content:'';width:24px;height:1px;background:var(--accent);flex-shrink:0;
}
.section-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(28px,5vw,50px);
  font-weight:400;
  line-height:1.1;margin-bottom:48px;
  color:var(--ink);
}
.section-title span{
  font-style:italic;color:var(--accent);
}

/* ══════════════════════════════════════
   ACCESSORIES — カード、明るく
══════════════════════════════════════ */
.accessories{background:var(--bg2);}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
}
.cat-card{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:32px 16px 22px;
  background:var(--surface);text-decoration:none;color:var(--ink);
  position:relative;overflow:hidden;
  border-radius:var(--r);
  border:1px solid rgba(0,0,0,.05);
  transition:all .28s ease;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.cat-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--teal));
  transform:scaleX(0);transition:transform .32s ease;
  border-radius:0 0 var(--r) var(--r);
}
.cat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 36px rgba(0,80,120,.11);
  border-color:rgba(0,150,184,.2);
}
.cat-card:hover::after{transform:scaleX(1);}
.cat-card:hover .cat-icon{transform:scale(1.10) translateY(-4px);}
.cat-card:hover .cat-arrow{opacity:1;transform:translateX(0);}
.cat-img-wrap{width:84px;height:84px;display:flex;align-items:center;justify-content:center;}
.cat-icon{
  width:72px;height:72px;object-fit:contain;
  transition:transform .32s ease;
}
.cat-card > div:not(.cat-img-wrap){width:100%;text-align:center;}
.cat-name{
  font-size:15px;letter-spacing:.09em;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  color:var(--ink);text-transform:uppercase;
  text-align:center;
}
.cat-name-jp{font-size:13px;color:var(--muted);margin-top:1px;text-align:center;}
.cat-arrow{
  font-size:10px;color:var(--accent);letter-spacing:.1em;
  opacity:0;transform:translateX(-6px);
  transition:opacity .25s,transform .25s;
  font-family:'Barlow Condensed',sans-serif;
}
@media(hover:none){
  /* タッチ端末はマウスオーバーが無いため、Exploreの矢印はカードから省いてすっきりさせる */
  .cat-arrow{display:none;}
}

/* ══════════════════════════════════════
   SYSTEM — Green Spoon風リスト
══════════════════════════════════════ */
.components{background:var(--surface);}
.comp-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;}
.comp-item{
  background:var(--bg);
  padding:36px 32px;
  display:flex;gap:22px;align-items:flex-start;
  text-decoration:none;color:var(--ink);
  transition:background .25s;
  position:relative;overflow:hidden;
}
.comp-item:first-child{border-radius:var(--r) 0 0 var(--r);}
.comp-item:last-child{border-radius:0 var(--r) var(--r) 0;}
@media(max-width:768px){
  .comp-item:first-child{border-radius:var(--r) var(--r) 0 0;}
  .comp-item:last-child{border-radius:0 0 var(--r) var(--r);}
}
.comp-item:hover{background:rgba(0,150,184,.06);}
.comp-num{
  font-family:'DM Serif Display',serif;
  font-size:48px;font-weight:400;font-style:italic;
  color:rgba(0,150,184,.18);
  line-height:1;min-width:52px;
}
.comp-body{flex:1;}
.comp-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:700;letter-spacing:.06em;
  margin-bottom:2px;text-transform:uppercase;
}
.comp-title-jp{font-size:11px;color:var(--muted);margin-bottom:10px;letter-spacing:.06em;}
.comp-desc{font-size:13px;color:var(--ink2);line-height:1.72;}
.comp-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;font-family:'Barlow Condensed',sans-serif;
  font-size:11px;letter-spacing:.14em;color:var(--accent);
  text-transform:uppercase;
  border-bottom:1px solid rgba(0,150,184,.25);
  padding-bottom:1px;
  transition:border-color .2s;
}
.comp-link:hover{border-color:var(--accent);}

/* ══════════════════════════════════════
   INFINITE MARQUEE — shared utility
   (auto-plays continuously, independent of scroll direction)
══════════════════════════════════════ */
@keyframes marquee-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes marquee-right{ from{transform:translateX(-50%);} to{transform:translateX(0);} }
.marquee{overflow:hidden;}
.marquee-track{display:flex;width:max-content;will-change:transform;}
.marquee.dir-left .marquee-track{animation:marquee-left linear infinite;}
.marquee.dir-right .marquee-track{animation:marquee-right linear infinite;}

/* ══════════════════════════════════════
   WIDE PHOTO — full-bleed scene photo
══════════════════════════════════════ */
.wide-photo{width:100%;line-height:0;}
.wide-photo img{
  width:100%;height:clamp(220px,40vw,520px);
  object-fit:cover;display:block;
}

/* ══════════════════════════════════════
   PHOTO BELT — 3-row conveyor gallery
══════════════════════════════════════ */
.photobelt{
  background:var(--bg2);padding:64px 0;
  --pb-w:clamp(140px,20vw,220px);
  --pb-h:clamp(96px,14vw,150px);
  --pb-gap:16px;
}
.photobelt-row{margin-bottom:16px;}
.photobelt-row:last-child{margin-bottom:0;}
.photobelt-row .marquee-track{gap:0;animation-duration:38s;}
.photobelt-row.dir-left .marquee-track{animation-duration:34s;}
.photobelt-row.dir-right .marquee-track{animation-duration:42s;}
.photobelt-item{
  flex:0 0 auto;width:var(--pb-w);height:var(--pb-h);
  margin-right:var(--pb-gap);
  border-radius:var(--r);overflow:hidden;background:#dcd6c6;
}
.photobelt-item img{width:100%;height:100%;object-fit:cover;display:block;}
.photobelt-spacer{flex:0 0 auto;width:calc(var(--pb-w)/2);margin-right:var(--pb-gap);}
.photobelt-spacer.is-offset{width:var(--pb-w);}
@media(max-width:640px){
  .photobelt{padding:44px 0;--pb-w:clamp(110px,34vw,150px);--pb-h:clamp(78px,24vw,104px);}
}

/* ══════════════════════════════════════
   BRAND BELT — 取り扱いブランド・ロゴコンベア（1段・低め）
══════════════════════════════════════ */
.brandbelt{
  background:var(--surface);
  padding:26px 0;
  --bb-h:40px;
  --bb-gap:56px;
}
#brands.marquee.dir-left .marquee-track{
  align-items:center;
  gap:0;
  animation:marquee-left linear infinite 32s;
}
.brandbelt-item{
  flex:0 0 auto;
  height:var(--bb-h);
  margin-right:var(--bb-gap);
  display:flex;align-items:center;justify-content:center;
}
.brandbelt-item img{
  height:100%;width:auto;max-width:140px;
  object-fit:contain;display:block;
  transition:filter .25s ease,opacity .25s ease;
}
.brandbelt-item:hover img{filter:grayscale(0%);opacity:1;}
@media(max-width:640px){
  .brandbelt{padding:20px 0;--bb-h:28px;--bb-gap:36px;}
}

/* ══════════════════════════════════════
   TG FEATURES — 3つの特徴 (yokanka風)
══════════════════════════════════════ */
.tg-features{background:var(--surface);}
.tgf-divider{height:1px;background:rgba(0,0,0,.10);margin-bottom:8px;}
.tgf-item{
  display:grid;grid-template-columns:230px 1fr;gap:36px;
  padding:44px 0;border-top:1px solid rgba(0,0,0,.10);
}
.tgf-num{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.08em;
  color:var(--muted);
}
.tgf-title{
  font-family:'DM Serif Display',serif;font-weight:400;
  font-size:clamp(20px,2.3vw,26px);line-height:1.4;color:var(--ink);
  margin-top:10px;word-break:keep-all;
}

.tgf-desc{font-size:13px;line-height:1.95;color:var(--ink2);max-width:44em;}
.tgf-media{
  grid-column:1 / -1;margin-top:24px;aspect-ratio:16/7;
  overflow:hidden;border-radius:var(--r);background:#dcd6c6;
}
.tgf-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03);}
@media(max-width:768px){
  .tgf-item{grid-template-columns:1fr;gap:14px;padding:34px 0;}
  .tgf-media{aspect-ratio:4/3;}
}

/* ══════════════════════════════════════
   SHOPS — 販売場所 (marquee text bands + shop list)
══════════════════════════════════════ */
.shops{background:var(--bg);}
.shops-marquee{padding:26px 0;}
.shops-marquee .marquee-track{gap:44px;animation-duration:26s;}
.shops-marquee-text{
  font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;
  font-size:clamp(34px,7vw,88px);letter-spacing:-.01em;
  color:rgba(0,0,0,.08);white-space:nowrap;
}
.shops-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:2px;background:rgba(0,0,0,.06);
}
.shop-card{
  background:var(--surface);padding:28px 24px;
}
.shop-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.04em;color:var(--ink);margin-bottom:6px;
}
.shop-addr{font-size:12px;color:var(--ink2);line-height:1.8;}
.shop-link{
  display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.1em;
  color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,150,184,.3);
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
}
.shop-link:hover{border-color:var(--accent);}

/* ══════════════════════════════════════
   CONCEPT — era.estate風、上質な余白
══════════════════════════════════════ */
.concept{background:var(--bg);}
.concept-inner{
  max-width:1120px;margin:0 auto;padding:88px 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.concept-visual{position:relative;height:320px;overflow:visible;}
#galaxyCanvas{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:320px;height:320px;
}

.concept-text h2{
  font-family:'DM Serif Display',serif;
  font-size:clamp(24px,4vw,42px);
  font-weight:400;
  margin-bottom:20px;
  line-height:1.2;
  color:var(--ink);
}
.concept-text h2 em{
  font-style:normal;color:var(--ink);
}
.concept-text h2 .tg-red{
  font-style:normal;color:#d92626;
}
.concept-text p{
  font-size:13px;color:var(--ink2);
  line-height:1.9;margin-bottom:14px;
  font-weight:300;
}
.concept-link{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(0,150,184,.3);
  transition:border-color .2s,color .2s;
}
.concept-link:hover{color:var(--ink);border-color:var(--ink);}

.uw-inline-link{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(0,150,184,.3);
  transition:border-color .2s,color .2s;
}
.uw-inline-link:hover{color:var(--ink);border-color:var(--ink);}
.uw-inline-link strong{color:inherit;}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer{
  background:var(--ink);
  color:rgba(255,255,255,.4);
  padding:48px 24px;text-align:center;
  border-top:none;
}
.footer-logo{
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;font-weight:700;letter-spacing:.20em;
  color:rgba(255,255,255,.7);margin-bottom:10px;
  text-transform:uppercase;
}
.footer-links{
  position:relative;z-index:1;
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;
  margin-bottom:16px;
}
.footer-links a{
  color:rgba(255,255,255,.55);text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.footer-links a:hover{color:#fff;border-color:#fff;}
.footer-copy{font-size:11px;letter-spacing:.06em;}

/* ══════════════════════════════════════
   HAMBURGER MENU — fixed top-right, mirrors .brand-mark;
   opens a slide-in drawer with site nav + external HP links.
══════════════════════════════════════ */
.menu-toggle{
  position:fixed;top:20px;right:20px;z-index:420;
  width:42px;height:42px;border-radius:50%;
  background:var(--surface);border:1px solid rgba(0,150,184,.18);
  box-shadow:0 4px 16px rgba(0,80,120,.10);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;padding:0;
}
.menu-toggle span{
  width:17px;height:1.5px;background:var(--ink);
  transition:transform .25s ease,opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

.site-menu-backdrop{
  position:fixed;inset:0;background:rgba(10,20,16,.35);
  z-index:409;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.site-menu-backdrop.open{opacity:1;pointer-events:auto;}
.site-menu{
  position:fixed;top:0;right:0;bottom:0;
  width:min(320px,84vw);
  background:#ffffff;color:var(--ink);
  z-index:410;padding:88px 30px 32px;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s ease;
  box-shadow:-10px 0 44px rgba(0,0,0,.20);
}
.site-menu.open{transform:translateX(0);}
.site-menu-close{
  position:absolute;top:22px;right:22px;
  width:34px;height:34px;border-radius:50%;
  background:var(--bg2);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:16px;line-height:1;
}
.site-menu-nav{display:flex;flex-direction:column;gap:0;margin-bottom:30px;}

/* Home / News —— nav直下のシンプルな項目（ボタンとリンクを共通スタイル化） */
.site-menu-nav > .site-menu-main{
  display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  padding:15px 2px;border-bottom:1px solid rgba(0,0,0,.07);
  text-decoration:none;color:var(--ink);background:none;border-left:none;border-right:none;border-top:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;cursor:pointer;
  font-size:16px;letter-spacing:.05em;text-transform:uppercase;
  transition:color .2s;
}
.site-menu-nav > .site-menu-main:hover{color:var(--accent);}
.site-menu-main span{
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:300;
  font-size:12px;letter-spacing:.02em;color:var(--muted);text-transform:none;
}

/* Accessories / Extension System —— 展開ボタン付きのグループ */
.site-menu-group{border-bottom:1px solid rgba(0,0,0,.07);}
.site-menu-row{display:flex;align-items:center;gap:6px;}
.site-menu-row .site-menu-main{
  flex:1;display:flex;align-items:baseline;gap:9px;
  padding:15px 2px;text-decoration:none;color:var(--ink);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.05em;text-transform:uppercase;
  transition:color .2s;
}
.site-menu-row .site-menu-main:hover{color:var(--accent);}
.site-menu-expand{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  border:none;background:var(--bg2);color:var(--ink2);cursor:pointer;
  font-size:11px;display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background .2s,color .2s;
}
.site-menu-expand:hover{background:rgba(0,150,184,.14);color:var(--accent);}
.site-menu-expand[aria-expanded="true"]{transform:rotate(180deg);background:rgba(0,150,184,.14);color:var(--accent);}
.site-submenu{
  overflow:hidden;max-height:0;
  transition:max-height .32s ease;
  display:flex;flex-direction:column;
}
.site-submenu a{
  padding:11px 2px 11px 16px;
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:400;
  font-size:13px;letter-spacing:.02em;color:var(--ink2);
  text-decoration:none;display:flex;align-items:baseline;gap:8px;
  border-top:1px solid rgba(0,0,0,.05);
  transition:color .2s;
}
.site-submenu a:first-child{border-top:none;}
.site-submenu a:hover{color:var(--accent);}
.site-submenu a span{font-size:11px;color:var(--muted);}

/* 企業リンク + SNS */
.site-menu-links{
  margin-top:auto;padding-top:22px;border-top:1px solid rgba(0,0,0,.07);
  display:flex;flex-direction:column;gap:16px;
}
.site-menu-brand{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.site-menu-brand > a{
  display:flex;align-items:baseline;gap:6px;
  font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.08em;
  color:var(--ink2);text-decoration:none;text-transform:uppercase;
  transition:color .2s;
}
.site-menu-brand > a:hover{color:var(--accent);}
.site-menu-brand > a span{font-size:10px;color:var(--muted);}
.site-menu-sns{display:flex;gap:8px;flex-shrink:0;}
.site-menu-sns a{
  width:26px;height:26px;border-radius:50%;
  background:var(--bg2);color:var(--ink2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;transition:background .2s,color .2s;
}
.site-menu-sns a:hover{background:var(--accent);color:#fff;}

/* ══════════════════════════════════════
   REVEALS
══════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:768px){
  header{padding:14px 18px;}
  nav a{padding:5px 10px;font-size:10px;}
  .concept-inner{grid-template-columns:1fr;gap:40px;}
  .concept-visual{height:220px;}
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
  .lead-copy-en{display:none;}
}
@media(max-width:480px){
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  .cat-card{padding:20px 8px 14px;}
  .cat-img-wrap{width:52px;height:52px;}
  .cat-icon{width:46px;height:46px;}
  .comp-item:first-child,.comp-item:last-child{border-radius:0;}
}

/* ══════════════════════════════════════
   REDESIGN — no header; a brand mark top-left; on PC the
   hero copy sits on the left with the orbit system on the
   right; a News wheel decorates the hero, and the NEWS edge
   tab is fixed to the viewport so it stays on screen and
   follows the user as the page scrolls, at every breakpoint.
══════════════════════════════════════ */

/* the header is gone — this is the site's only fixed chrome */
.brand-mark{
  position:fixed;top:20px;left:20px;z-index:120;
  display:flex;align-items:center;gap:9px;
  text-decoration:none;color:var(--ink);
}
.brand-mark .logo-mark{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--accent));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,120,150,.28);
}
.brand-mark .logo-mark svg{width:15px;height:15px;fill:#fff;}
.brand-mark span{
  display:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);
}
@media(min-width:640px){ .brand-mark span{display:inline;} }

/* orbit-system is always the visual center of the hero — hero-text is
   pulled out of flow and anchored to the bottom-left corner instead,
   so nothing ever competes with the orbit for the center. */
.hero-text{
  position:absolute;
  left:clamp(20px,4vw,64px);
  bottom:clamp(64px,11vh,110px);
  z-index:6;
  text-align:left;
  max-width:min(360px,78vw);
}
@media(min-width:768px){
  .hero-text{
    max-width:640px;
  }
}
.hero-desc{ margin-left:0; margin-right:0; }
@media(max-width:767px){
  .hero{
    justify-content:flex-start;
    padding:92px 24px 76px;
  }
  .hero-text{
    position:static;
    left:auto; bottom:auto;
    margin:24px auto 0;
    text-align:center;
    max-width:560px;
  }
  .hero-desc{ margin:0 auto 24px; }
  .hero-title{ font-size:clamp(28px,9vw,40px); }
   .hero-title .tough-text{ transform-origin:center; }  /* ← この1行を追加 */
  .scroll-cue{
    position:static;
    left:auto; bottom:auto; transform:none;
    margin:28px auto 0;
    animation:fade-up .8s ease forwards 1.4s;
  }
}

/* ---------- News wheel: real desktop only, scoped to the hero ----------
   Raised well past the old 900px break — the wheel used to start
   overlapping the orbit system as soon as the viewport got even a
   little narrower. Below this width only the edge tab (.news-handle)
   shows, which opens the opaque drawer instead. */
.wall{ display:none; }
@media(min-width:1180px){
  .wall{
    display:block;
    position:absolute; top:50%; right:-830px; transform:translateY(-50%);
    width:1080px; height:1080px; border-radius:50%; z-index:1;
    background:radial-gradient(circle at 32% 42%, rgba(0,149,184,.14), rgba(0,149,184,.05) 55%, transparent 74%);
    border:1px solid rgba(0,150,184,.15);
    pointer-events:none;
  }
}

/* .wheel-outer = the functional, legible track: dots + article text ride this
   smaller circle, kept mostly on-screen so News stays readable. */
.wheel-outer{ display:none; }
@media(min-width:1180px){
  .wheel-outer{
    display:block;
    position:absolute; top:50%; right:-70px; transform:translateY(-50%);
    width:460px; height:560px; z-index:2;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .news-item{
    position:absolute; top:0; left:0; width:280px;
    display:flex; flex-direction:column; gap:3px;
  }
  .news-item .nd{
    font-family:'Barlow Condensed',sans-serif; font-weight:400;
    font-size:10px; letter-spacing:.08em; color:var(--muted);
  }
  .news-item .ncat{
    display:inline-block; margin-left:7px;
    font-family:'Barlow Condensed',sans-serif; font-size:9px; letter-spacing:.04em;
    padding:1px 8px; border-radius:100px; text-transform:uppercase;
    background:rgba(0,150,184,.10); color:var(--accent);
  }
  .news-item .ntitle{ font-family:'Shippori Mincho',serif; font-size:13.5px; line-height:1.65; color:var(--ink2); }
  .news-item.is-active .ntitle{
    font-family:'Shippori Mincho',serif; font-weight:500;
    font-size:20px; line-height:1.5; color:var(--ink); letter-spacing:.02em;
  }
  .news-item.is-active .nd{ font-size:11px; }
}

/* vertical edge tab, flush to the hero's right edge — visible at every
   width. On real desktop (>=1180px) it advances the wheel; below that
   it opens the opaque news drawer instead. */
.news-handle{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  position:fixed; top:50%; right:0; transform:translateY(-50%);
  background:var(--ink); color:#fff;
  padding:12px 5px; border-radius:8px 0 0 8px; z-index:90;
  font-family:'Barlow Condensed',sans-serif;
  cursor:pointer; border:none;
  box-shadow:-2px 2px 12px rgba(0,0,0,.14);
}
.news-handle .htext{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:10px; font-weight:700; letter-spacing:.2em;
}
@media(min-width:1180px){
  .news-handle{ padding:14px 6px; }
  .news-handle .htext{ font-size:11px; }
}

/* ---------- News drawer: tablet/mobile only, opaque overlay panel ---------- */
.news-drawer-backdrop{
  position:fixed; inset:0; background:rgba(10,20,16,.35);
  z-index:399; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.news-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(360px,86vw);
  background:#ffffff; color:#151f1a;
  z-index:400; padding:78px 26px 32px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .38s ease;
  box-shadow:-10px 0 44px rgba(0,0,0,.20);
}
.news-drawer-backdrop.open{ opacity:1; pointer-events:auto; }
.news-drawer.open{ transform:translateX(0); }
.news-drawer-close{
  position:absolute; top:22px; right:22px;
  width:34px;height:34px;border-radius:50%;
  background:var(--bg2); border:none; cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#151f1a; font-size:16px;line-height:1;
}
.news-drawer-heading{
  display:flex; align-items:center; gap:7px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#151f1a;
  margin-bottom:18px;
}
.news-drawer-heading .dot{ width:6px;height:6px;border-radius:50%;background:var(--accent); }
.news-drawer .row{ padding:14px 0; border-bottom:1px solid rgba(0,0,0,.08); }
.news-drawer .row .nd{ font-size:11px; color:#6b7a71; font-family:'Barlow Condensed',sans-serif; }
.news-drawer .row .ncat{
  font-size:10px; margin-left:7px; padding:1px 7px; border-radius:100px;
  background:rgba(0,150,184,.10); color:var(--accent);
}
.news-drawer .row .ntitle{ font-family:'Shippori Mincho',serif; font-size:15px; margin-top:6px; color:#151f1a; line-height:1.75; }

/* ---------- News: クリックで詳細ポップアップが開く項目の見た目 ---------- */
.news-item.is-clickable,
.news-drawer .row.is-clickable,
.news-inline-item.is-clickable{ cursor:pointer; transition:opacity .2s; }
.news-drawer .row.is-clickable:hover,
.news-inline-item.is-clickable:hover{ opacity:.7; }
.news-item.is-clickable:hover .ntitle{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- News detail popup ---------- */
.news-modal-backdrop{
  position:fixed; inset:0; background:rgba(10,20,16,.45);
  z-index:410; opacity:0; pointer-events:none; transition:opacity .28s ease;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.news-modal-backdrop.open{ opacity:1; pointer-events:auto; }
.news-modal{
  background:#fff; border-radius:20px; max-width:420px; width:100%;
  max-height:86vh; overflow-y:auto; padding:32px 26px 28px; position:relative;
  transform:translateY(16px); opacity:0; transition:transform .28s ease,opacity .28s ease;
}
.news-modal-backdrop.open .news-modal{ transform:translateY(0); opacity:1; }
.news-modal-close{
  position:absolute; top:16px; right:16px;
  width:32px;height:32px;border-radius:50%;
  background:var(--bg2); border:none; cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink); font-size:15px;line-height:1;
}
.news-modal-meta{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.1em;
  color:#6b7a71; margin-bottom:10px;
}
.news-modal-meta .ncat{
  font-size:10px; margin-left:7px; padding:1px 7px; border-radius:100px;
  background:rgba(0,150,184,.10); color:var(--accent);
}
.news-modal-title{
  font-family:'Shippori Mincho',serif; font-size:18px; line-height:1.7;
  color:var(--ink); margin-bottom:18px;
}
.news-modal-facts{ margin-bottom:22px; }
.news-modal-fact{
  display:flex; gap:14px; padding:10px 0; border-top:1px solid rgba(0,0,0,.08);
}
.news-modal-fact:first-child{ border-top:none; }
.news-modal-fact dt{
  flex:none; width:76px; font-family:'Barlow Condensed',sans-serif; font-size:11px;
  letter-spacing:.08em; color:var(--muted); text-transform:uppercase; padding-top:1px;
}
.news-modal-fact dd{ font-size:13px; line-height:1.8; color:var(--ink2); }
.news-modal-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--accent); padding:11px 22px; border-radius:100px;
  text-decoration:none; transition:background .2s,transform .2s;
}
.news-modal-link:hover{ background:var(--ink); transform:translateY(-2px); }

/* ---------- News list: 5件を超えた分は「もっと見る」で開閉 ---------- */
.is-more-hidden{ display:none; }
#newsDrawerList.is-expanded .is-more-hidden,
#newsInlineList.is-expanded .is-more-hidden{ display:block; }
.news-more-btn{
  display:block; width:100%; margin-top:14px;
  padding:11px 0; background:none; cursor:pointer;
  border:1px solid rgba(0,150,184,.28); border-radius:999px;
  font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.1em;
  color:var(--accent); text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s;
}
.news-more-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- Best practice sets (below System components) ----------
   Desktop: 3 cards side by side. Mobile: a center-snap carousel — the
   active card sits in the middle with the previous/next cards peeking
   in on either edge, hinting that it's swipeable. The rounding lives
   on the card itself (top-right / bottom-left only), not the photo. */
.configs{ background:var(--bg2); }
.config-scroll{
  display:flex; gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 8% 10px;
  scroll-padding-inline:8%;
  scrollbar-width:none;
}
.config-scroll::-webkit-scrollbar{ display:none; }
.config-card{
  flex:0 0 84%; scroll-snap-align:center;
  background:var(--surface);
  border-radius:0 30px 0 30px;
  overflow:hidden; border:1px solid rgba(0,0,0,.05);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.config-photo{
  width:100%; aspect-ratio:4/3; object-fit:contain;
  padding:30px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(0,149,184,.14) 0%, transparent 62%),
    linear-gradient(160deg,#eef3f2 0%,#dfe6e4 100%);
  display:block;
}
.config-body{ padding:18px; }
.config-detail-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  font-size:12px; letter-spacing:.1em; color:var(--accent);
  text-transform:uppercase;
}
.config-detail-btn:hover{ color:var(--ink); }
.config-name{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
}
.config-name span{
  display:block; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:300;
  font-size:12px; color:var(--muted); letter-spacing:.02em; text-transform:none; margin-top:2px;
}
.config-desc{ font-size:12px; color:var(--ink2); margin-top:10px; line-height:1.75; }
.config-dots{ display:flex; justify-content:center; gap:7px; margin-top:6px; }
.config-dots span{ width:6px;height:6px;border-radius:50%; background:rgba(0,150,184,.22); }
.config-dots span.is-active{ background:var(--accent); }
@media(min-width:900px){
  .config-scroll{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    overflow-x:visible; scroll-snap-type:none; padding:4px 0 10px;
  }
  .config-card{ flex:none; border-radius:0 32px 0 32px; }
  .config-photo{ aspect-ratio:1/1; }
  .config-dots{ display:none; }
}

/* ---------- Best practice: product detail modal ---------- */
.config-modal-backdrop{
  position:fixed; inset:0; background:rgba(10,20,16,.45);
  z-index:398; opacity:0; pointer-events:none; transition:opacity .28s ease;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.config-modal-backdrop.open{ opacity:1; pointer-events:auto; }
.config-modal{
  background:#fff; border-radius:20px; max-width:420px; width:100%;
  max-height:86vh; overflow-y:auto; padding:32px 26px 28px; position:relative;
  transform:translateY(16px); opacity:0; transition:transform .28s ease,opacity .28s ease;
}
.config-modal-backdrop.open .config-modal{ transform:translateY(0); opacity:1; }
.config-modal-close{
  position:absolute; top:16px; right:16px;
  width:32px;height:32px;border-radius:50%;
  background:var(--bg2); border:none; cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink); font-size:15px;line-height:1;
}
.config-modal-eyebrow{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.16em;
  color:var(--accent); text-transform:uppercase; margin-bottom:6px;
}
.config-modal-title{
  font-family:'DM Serif Display',serif; font-size:24px; color:var(--ink); margin-bottom:6px;
}
.config-modal-title span{
  display:block; font-family:'Zen Kaku Gothic New',sans-serif; font-size:13px;
  font-weight:300; color:var(--muted); margin-top:2px;
}
.config-modal-desc{ font-size:13px; color:var(--ink2); line-height:1.85; margin:14px 0 22px; }
.config-modal-label{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; margin-bottom:10px;
}
.config-modal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.config-modal-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 10px; border-radius:14px; background:var(--bg2);
  text-decoration:none; color:var(--ink); border:1px solid rgba(0,0,0,.05);
  transition:border-color .2s,transform .2s;
}
.config-modal-item:hover{ border-color:var(--teal); transform:translateY(-2px); }
.config-modal-item img{ width:56px;height:56px;object-fit:contain; }
.config-modal-item span{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.06em; text-align:center;
}

/* ---------- Footer: new layout — brand links / SNS / share buttons ---------- */
.footer-inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }
.footer-top{
  display:flex; align-items:center; justify-content:center; gap:24px;
  margin-bottom:32px; padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-align:center;
}
.footer-brands{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; flex-shrink:0;
}
.footer-brand-item{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}
.footer-brand-name{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:2px; transition:color .2s,border-color .2s;
}
.footer-brand-name:hover{ color:#fff; border-color:#fff; }
.footer-brand-sns{ display:flex; gap:10px; }
.footer-brand-sns a{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  font-size:12px; transition:background .2s,color .2s;
}
.footer-brand-sns a:hover{ background:var(--accent); color:#fff; }
.footer-share{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin-bottom:28px;
}
.footer-share-label{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
}
.footer-share-btns{ display:flex; gap:12px; }
.footer-share-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72); cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
}
.footer-share-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px); }

/* ---------- Footer: a few restrained bubbles rising ---------- */
footer{ position:relative; overflow:hidden; }
.footer-bubbles{ position:absolute; inset:0; pointer-events:none; }
.footer-bubbles span{
  position:absolute; bottom:-24px; border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  animation:footerBubbleRise linear infinite;
}
.footer-bubbles span:nth-child(1){ left:6%;  width:7px;  height:7px;  animation-duration:13s; animation-delay:0s;  }
.footer-bubbles span:nth-child(2){ left:16%; width:4px;  height:4px;  animation-duration:9s;  animation-delay:2.4s;}
.footer-bubbles span:nth-child(3){ left:29%; width:9px;  height:9px;  animation-duration:15s; animation-delay:1.1s;}
.footer-bubbles span:nth-child(4){ left:41%; width:5px;  height:5px;  animation-duration:10s; animation-delay:4s;  }
.footer-bubbles span:nth-child(5){ left:55%; width:6px;  height:6px;  animation-duration:12s; animation-delay:0.6s;}
.footer-bubbles span:nth-child(6){ left:68%; width:8px;  height:8px;  animation-duration:14s; animation-delay:3.2s;}
.footer-bubbles span:nth-child(7){ left:80%; width:4px;  height:4px;  animation-duration:9.5s; animation-delay:2s;  }
.footer-bubbles span:nth-child(8){ left:91%; width:6px;  height:6px;  animation-duration:11s; animation-delay:5s;  }
@keyframes footerBubbleRise{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  12%{ opacity:.5; }
  85%{ opacity:.2; }
  100%{ transform:translateY(-130px) scale(1.1); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .footer-bubbles span{ animation:none; display:none; }
}

/* ══════════════════════════════════════
   DIVER TYPE DIAGNOSIS
══════════════════════════════════════ */
.diver-type{ background:var(--surface); }
.dt-intro{
  font-size:13px; color:var(--ink2); max-width:560px;
  margin:-8px 0 36px; line-height:1.85; font-weight:300;
}
.dt-quiz{
  max-width:640px; margin:0 auto;
  background:var(--bg2); border-radius:24px;
  padding:36px 28px 32px;
  border:1px solid rgba(0,150,184,.12);
}
.dt-progress{
  display:flex; justify-content:center; gap:8px; margin-bottom:28px;
}
.dt-progress span{
  width:8px; height:8px; border-radius:50%;
  background:rgba(0,150,184,.18); transition:background .25s,transform .25s;
  display:inline-block;
}
.dt-progress span.is-done{ background:var(--teal); }
.dt-progress span.is-active{ background:var(--accent); transform:scale(1.3); }

.dt-q-count{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.18em;
  color:var(--accent); text-transform:uppercase; margin-bottom:10px; text-align:center;
}
.dt-q-text{
  font-family:'DM Serif Display',serif; font-style:italic;
  font-size:clamp(18px,3vw,24px); text-align:center; color:var(--ink);
  margin-bottom:26px; line-height:1.5;
}
.dt-options{ display:grid; gap:10px; }
.dt-option{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1.5px solid rgba(0,150,184,.14);
  border-radius:14px; padding:15px 18px;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:13.5px; color:var(--ink);
  transition:border-color .2s,background .2s,transform .2s;
}
.dt-option:hover{
  border-color:var(--teal); background:rgba(0,149,184,.06);
  transform:translateX(3px);
}
.dt-option .dt-opt-letter{
  flex-shrink:0; width:26px;height:26px;border-radius:50%;
  background:var(--bg2); color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:12px;
}

.dt-result{ text-align:center; }
.dt-result-badge{
  width:78px;height:78px;border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(135deg,var(--teal),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:36px; box-shadow:0 8px 28px rgba(0,150,184,.25);
}
.dt-result-eyebrow{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.2em;
  color:var(--accent); text-transform:uppercase; margin-bottom:8px;
}
.dt-result-name{
  font-family:'DM Serif Display',serif; font-style:italic;
  font-size:clamp(24px,4vw,32px); color:var(--ink); margin-bottom:6px;
}
.dt-result-tagline{ font-size:13px; color:var(--muted); margin-bottom:18px; letter-spacing:.03em; }
.dt-result-desc{ font-size:13.5px; color:var(--ink2); line-height:1.85; max-width:480px; margin:0 auto 28px; }

.dt-rec-label{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.16em;
  color:var(--ink2); text-transform:uppercase; margin-bottom:14px;
}
.dt-rec-grid{
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:22px;
}
.dt-rec-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:92px; padding:14px 8px; background:var(--surface);
  border-radius:14px; border:1px solid rgba(0,0,0,.05);
  text-decoration:none; color:var(--ink);
  transition:transform .22s, box-shadow .22s;
}
.dt-rec-item:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,80,120,.12); }
.dt-rec-item img{ width:40px;height:40px;object-fit:contain; }
.dt-rec-item span{
  font-family:'Barlow Condensed',sans-serif; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600;
}
.dt-upgrade-note{
  background:rgba(224,90,58,.08); border:1px solid rgba(224,90,58,.22);
  border-radius:14px; padding:16px 20px; font-size:12.5px; color:var(--ink2);
  line-height:1.8; max-width:480px; margin:0 auto 26px; text-align:left;
}
.dt-upgrade-note strong{ color:var(--coral); }
.dt-restart{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--accent); cursor:pointer;
  border:1.5px solid rgba(0,150,184,.3); border-radius:100px;
  padding:11px 26px; font-family:'Barlow Condensed',sans-serif;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:background .2s,color .2s;
}
.dt-restart:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

@media(max-width:480px){
  .dt-quiz{ padding:28px 18px 26px; border-radius:18px; }
  .dt-rec-item{ width:78px; padding:12px 6px; }
}

/* ══════════════════════════════════════
   CATEGORY PAGE — hero / breadcrumb
══════════════════════════════════════ */
.cat-hero{
  padding:150px 24px 60px;
  background:
    radial-gradient(ellipse at 15% 20%,rgba(0,149,184,.08) 0%,transparent 55%),
    var(--bg);
}
.cat-hero-inner{max-width:1120px;margin:0 auto;}
.cat-hero-inner{display:grid;grid-template-columns:1fr;gap:28px;}
.cat-hero-photo{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  box-shadow:0 20px 50px rgba(0,40,60,.14);
}
.cat-hero-links{margin-top:22px;display:flex;flex-direction:column;gap:8px;}
.cat-hero-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;background:var(--surface);border:1px solid rgba(0,0,0,.06);
  border-radius:10px;text-decoration:none;color:var(--ink);
  font-size:12.5px;line-height:1.5;transition:border-color .2s,transform .2s;
}
.cat-hero-link:hover{border-color:var(--accent);transform:translateX(2px);}
.cat-hero-link .chl-tag{
  font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:.1em;
  color:var(--accent);text-transform:uppercase;display:block;margin-bottom:2px;
}
.cat-hero-link .chl-arrow{color:var(--accent);flex-shrink:0;}
@media(min-width:860px){
  /* Photo takes the larger share and a taller fixed-ish height so it reads
     as a real hero image rather than a thumbnail. */
  .cat-hero-inner{grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;}
  .cat-hero-photo{aspect-ratio:auto;height:clamp(360px,34vw,480px);width:100%;}
}
@media(max-width:859px){
  /* The 150px top padding was sized for the desktop two-column layout;
     on a single-column mobile view it just leaves dead space above the
     photo. Trim it down to roughly clear the fixed brand-mark/menu-toggle. */
  .cat-hero{padding:96px 24px 48px;}
}
.cat-breadcrumb{
  display:flex;align-items:center;gap:8px;margin-bottom:22px;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;
}
.cat-breadcrumb a{color:var(--ink2);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.12);}
.cat-breadcrumb a:hover{color:var(--accent);border-color:var(--accent);}
.cat-breadcrumb span[aria-current]{color:var(--ink);}
.cat-hero-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(34px,6vw,58px);font-weight:400;line-height:1.2;
  color:var(--ink);margin-bottom:14px;
}
.cat-hero-title span{font-style:italic;color:var(--accent);font-size:.72em;}
.cat-hero-lead{font-size:14px;color:var(--ink2);max-width:520px;line-height:1.85;}

/* ══════════════════════════════════════
   LIGHT GUIDE — ノウハウ導入
══════════════════════════════════════ */
.light-guide{background:var(--surface);}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:rgba(0,0,0,.05);}
.guide-card{background:var(--bg);padding:32px 28px;display:block;text-decoration:none;color:inherit;transition:background .2s;}
.guide-card:hover{background:rgba(0,150,184,.06);}
.guide-card:first-child{border-radius:var(--r) 0 0 var(--r);}
.guide-card:last-child{border-radius:0 var(--r) var(--r) 0;}
@media(max-width:768px){
  .guide-card:first-child{border-radius:var(--r) var(--r) 0 0;}
  .guide-card:last-child{border-radius:0 0 var(--r) var(--r);}
}
.guide-num{
  font-family:'DM Serif Display',serif;font-style:italic;font-size:34px;
  color:rgba(0,150,184,.22);line-height:1;margin-bottom:12px;
}
.guide-title{
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;
  letter-spacing:.04em;color:var(--ink);margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.guide-arrow{color:var(--accent);font-size:14px;transition:transform .2s;flex-shrink:0;}
.guide-card:hover .guide-arrow{transform:translateY(3px);}
.guide-desc{font-size:13px;color:var(--ink2);line-height:1.85;}

/* 4\u30ab\u30e9\u30e0\u5c0e\u5165\uff0801\uff5e04\uff09\u3078\u306e\u62e1\u5f35 */
@media(min-width:900px){
  .guide-grid-4{ grid-template-columns:repeat(4,1fr); }
}
.guide-grid-4 .guide-card{ text-align:left; }

/* \u30e9\u30a4\u30c8\u306e4\u3064\u306e\u7279\u5fb4 \u2014\u2014 guide-num\u306e\u30ca\u30f3\u30d0\u30ea\u30f3\u30b0\u8868\u73fe\u306b\u5408\u308f\u305b\u305f\u30ab\u30fc\u30c9 */
.light-feature-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2px; background:rgba(0,0,0,.05);
  margin:36px 0 44px; border-radius:var(--r); overflow:hidden;
}
.light-feature-card{ background:var(--bg); padding:30px 26px; }
.light-feature-num{
  font-family:'DM Serif Display',serif; font-style:italic; font-size:30px;
  color:rgba(0,150,184,.22); line-height:1; margin-bottom:12px;
}
.light-feature-title{
  font-family:'Barlow Condensed',sans-serif; font-size:15.5px; font-weight:700;
  letter-spacing:.02em; color:var(--ink); margin-bottom:10px; line-height:1.4;
}
.light-feature-desc{ font-size:12.5px; color:var(--ink2); line-height:1.8; }

/* ══════════════════════════════════════
   GUIDE DETAIL — 01〜03 の個別セクション
══════════════════════════════════════ */
.guide-detail{background:var(--surface);}
.guide-detail.alt-bg{background:var(--bg2);}
.guide-detail-desc{font-size:14px;color:var(--ink2);line-height:1.85;max-width:640px;margin:-6px 0 34px;}

/* コンポーネントへの導線（section 03の下）— ライトの取り付けに使うパーツへの導線。
   config-scroll と同じ「スマホは横スワイプのピーク・カルーセル／PCは3カラム」構造。 */
/* ---------- RIG SYSTEM banner (rig.html only) ---------- */
.rig-banner{
  display:block; margin-top:40px;
  border-radius:10px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,20,30,.16);
  transition:transform .25s ease,box-shadow .25s ease;
}
.rig-banner:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(0,20,30,.22); }
.rig-banner img{ width:100%; height:auto; display:block; }

.component-links{margin-top:48px;padding-top:36px;border-top:1px solid rgba(0,0,0,.08);}
.component-links-label{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.component-links-lead{font-size:13px;color:var(--ink2);margin-bottom:18px;}
.component-links-grid{
  display:flex;gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 10% 10px;
  scroll-padding-inline:10%;
  scrollbar-width:none;
}
.component-links-grid::-webkit-scrollbar{display:none;}
.component-link-card{
  flex:0 0 68%;scroll-snap-align:center;
  display:flex;flex-direction:column;
  background:var(--bg);border:1px solid rgba(0,0,0,.05);
  border-radius:0 24px 0 24px;overflow:hidden;
  text-decoration:none;color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.component-link-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,80,120,.10);border-color:rgba(0,150,184,.25);}
.component-link-body{padding:22px 18px 22px;}
.component-link-num{
  font-family:'DM Serif Display',serif;font-style:italic;font-size:22px;
  color:rgba(0,150,184,.28);line-height:1;margin-bottom:8px;
}
.component-link-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
}
.component-link-name span{
  display:block;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:300;
  font-size:12px;color:var(--muted);letter-spacing:.02em;text-transform:none;margin-top:2px;
}
.component-link-desc{font-size:12px;color:var(--ink2);margin-top:8px;line-height:1.7;}
.component-link-arrow{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.1em;color:var(--accent);text-transform:uppercase;
}
.component-links-dots{display:flex;justify-content:center;gap:7px;margin-top:2px;}
.component-links-dots span{width:6px;height:6px;border-radius:50%;background:rgba(0,150,184,.22);}
.component-links-dots span.is-active{background:var(--accent);}
@media(min-width:900px){
  .component-links-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
    overflow-x:visible;scroll-snap-type:none;padding:4px 0 6px;
  }
  .component-link-card{flex:none;border-radius:0 26px 0 26px;}
  .component-links-dots{display:none;}
}

/* ══════════════════════════════════════
   LIGHT SHOWCASE — ライトを使った作例
══════════════════════════════════════ */
.light-showcase{background:var(--bg2);}
.showcase-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;
}
.showcase-item{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 10px 30px rgba(0,40,60,.10);
  background:var(--bg2);
}
.showcase-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.showcase-item:hover img{transform:scale(1.05);}
.showcase-item-img-tappable{cursor:zoom-in;}
.showcase-cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 16px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
  color:#fff;font-size:12px;line-height:1.6;
}
.showcase-cap b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.05em;margin-bottom:2px;}

/* ══════════════════════════════════════
   SHOWCASE LIGHTBOX — 作例タップで元写真を拡大表示
══════════════════════════════════════ */
.showcase-lightbox{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,10,16,.88);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
  cursor:zoom-out;
}
.showcase-lightbox.open{opacity:1;visibility:visible;}
.showcase-lightbox-img{
  max-width:100%;max-height:60vh;object-fit:contain;display:block;
  border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  cursor:default;
}
.showcase-lightbox-close{
  position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s;
}
.showcase-lightbox-close:hover{background:rgba(255,255,255,.24);}
body.showcase-lightbox-lock{overflow:hidden;}
@media(max-width:640px){
  .showcase-lightbox{padding:16px;}
  .showcase-lightbox-close{
    top:12px;right:12px;width:48px;height:48px;font-size:18px;
    background:rgba(255,255,255,.16);
  }
}

/* ══════════════════════════════════════
   CONNECTION FLOW — 接続の仕組み図解
   （マウントシステム／シューベース／アームシステム 共通。
    guide-01 と guide-02 の間に置く、土台＋パーツ＝接続 を示す1枚図。
    画像は現状ダミー（picsum.photos）。PC/スマホでpicture要素の出し分け。）
══════════════════════════════════════ */
.conn-flow{background:var(--bg2);}
.conn-flow-media{
  display:block;margin:8px 0 0;border-radius:var(--r);overflow:hidden;
  box-shadow:0 10px 30px rgba(0,40,60,.10);
}
.conn-flow-media img{width:100%;height:auto;display:block;}

/* ══════════════════════════════════════
   RECOMMENDED PICK — 最初の一台
══════════════════════════════════════ */
.recommended-pick{background:var(--surface);}
.rec-pick-card{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
  background:var(--bg);border-radius:var(--r);padding:32px;
  border:1px solid rgba(0,0,0,.05);max-width:900px;margin:0 auto;
}
.rec-pick-photo{
  height:180px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,149,184,.12) 0%,transparent 65%);
  border-radius:12px;
}
.rec-pick-photo img{max-width:70%;max-height:75%;object-fit:contain;}
.rec-pick-badge{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--accent);
  padding:5px 12px;border-radius:100px;margin-bottom:12px;
}
.rec-pick-name{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.rec-pick-desc{font-size:13px;color:var(--ink2);line-height:1.85;margin-bottom:16px;}
@media(min-width:760px){
  .rec-pick-card{grid-template-columns:280px 1fr;}
}

/* ══════════════════════════════════════
   COMPARE SLIDER — あり/無し比較
══════════════════════════════════════ */
.light-compare{background:var(--bg2);}
.compare-note{font-size:12px;color:var(--muted);margin:-30px 0 26px;}
.compare-slider{max-width:760px;margin:0 auto;}
.cmp-frame{
  position:relative;width:100%;border-radius:var(--r);
  overflow:hidden;user-select:none;box-shadow:0 12px 40px rgba(0,40,60,.14);
  cursor:ew-resize;
  height:min(46vh, 380px);
}
.cmp-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;pointer-events:none;
}
.cmp-before-wrap{
  position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 50% 0 0);
}
/*.cmp-before-wrap .cmp-img{
  filter:grayscale(.5) brightness(.52) saturate(.6) contrast(1.05);
}*/
.cmp-tag{
  position:absolute;top:14px;z-index:3;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.12em;
  padding:6px 14px;border-radius:100px;color:#fff;text-transform:uppercase;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);pointer-events:none;
}
.cmp-tag-before{left:14px;}
.cmp-tag-after{right:14px;}
.cmp-handle{
  position:absolute;top:0;left:50%;height:100%;width:2px;
  background:#fff;transform:translateX(-1px);z-index:4;
  cursor:ew-resize;pointer-events:none;
}
.cmp-handle-arrows{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.06em;color:var(--ink);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.cmp-range{
  position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
}

/* ══════════════════════════════════════
   FINDER FOCUS — スクロール連動の視度調整（ピント合わせ）体験
   UMG-01 マグニファイヤーの覗き穴（透過PNG）の下に写真を円形で配置し、
   スクロール量に応じて写真のぼかしを解いていく。写真は覗き穴サイズより
   ひとまわり大きめに敷いてあり、はみ出した部分は上に重なる筐体画像（不透明）
   に隠れるため、筐体からのはみ出しは発生しません。
   .finder-focus-track の高さ分だけスクロールする間、
   .finder-focus-sticky が画面に留まり続け（position:sticky）、
   その進捗（0〜1）に応じて写真のぼかし量とダイヤルの回転角を
   script.js 側で制御します。
══════════════════════════════════════ */
.finder-focus{max-width:640px;margin:0 auto;}
.finder-focus-track{position:relative;height:230vh;}
.finder-focus-sticky{
  position:sticky;top:96px;
}
.finder-focus-eyebrow{
  text-align:center;font-family:'Zen Kaku Gothic New',sans-serif;font-size:12px;
  letter-spacing:.1em;color:var(--muted);margin:0 0 2px;
}
.finder-focus-heading{
  text-align:center;font-family:'Zen Kaku Gothic New',sans-serif;font-size:21px;
  font-weight:700;letter-spacing:.02em;color:var(--ink);margin:0 0 20px;
}
.finder-focus-frame{
  position:relative;width:100%;aspect-ratio:800/914;border-radius:var(--r);
  overflow:hidden;
}
.finder-focus-lens{
  position:absolute;left:20.6%;top:24.6%;width:59%;aspect-ratio:1;
  border-radius:50%;overflow:hidden;
}
.finder-focus-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(14px) saturate(.8) brightness(.82);
  transform:scale(1.12);
  will-change:filter,transform;
}
.finder-focus-lens-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
}
.finder-focus-scope{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;z-index:2;
}
.finder-focus-tag{
  position:absolute;top:14px;left:14px;z-index:3;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.12em;
  padding:6px 14px;border-radius:100px;color:#fff;text-transform:uppercase;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
}
.finder-focus-caption{
  margin-top:14px;text-align:center;font-size:12px;letter-spacing:.06em;color:var(--muted);
  transition:opacity .5s ease;
}
.finder-focus-caption.is-focused{opacity:0;}
.ff-arrow{display:inline-block;margin-left:6px;animation:ffArrowBounce 1.6s ease-in-out infinite;}
@keyframes ffArrowBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
@media(max-width:640px){
  .finder-focus-track{height:200vh;}
  .finder-focus-sticky{top:76px;}
}
@media(prefers-reduced-motion:reduce){
  .finder-focus-photo{filter:none !important;transform:none !important;}
  .ff-arrow{animation:none;}
}

/* ══════════════════════════════════════
   TRIPLE COMPARE — 3枚並び比較（ストロボページ）
══════════════════════════════════════ */
.triple-compare{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.triple-compare-item{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:#dcd6c6;box-shadow:0 10px 30px rgba(0,40,60,.12);
}
.triple-compare-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.triple-compare-item figcaption{
  position:static;
	left:0;
	right:0;
	bottom:0;
	padding:12px 14px;
  background:linear-gradient(to top,rgba(0,20,25,.62),transparent);
  color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
}

/* スマホ表示（768px以下）：縦並びにする設定 */
@media(max-width:768px){
  .triple-compare{
    grid-template-columns: 1fr; /* 1列に指定 */
    gap: 16px;                   /* アイテム同士の間隔（お好みで調整） */
  }
  .triple-compare-item{
    width: 100%;                 /* 幅をいっぱいに広げる */
  }
}

/*
@media(max-width:768px){
  .triple-compare{
    display:flex;overflow-x:auto;gap:12px;
    scroll-snap-type:x mandatory;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .triple-compare::-webkit-scrollbar{display:none;}
  .triple-compare-item{flex:0 0 74%;scroll-snap-align:center;}
}
*/




/* ══════════════════════════════════════
   DUAL COMPARE — 縦写真向け 2枚横並び比較（レンズページ）
   compare-slider（左右分割スライダー）は横長写真向けのため、
   縦写真同士の比較には triple-compare と同じ視覚言語で
   2カラム版を用意しています。
══════════════════════════════════════ */
.dual-compare{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  max-width:560px;margin:0 auto;
}
.dual-compare-item{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:#dcd6c6;box-shadow:0 10px 30px rgba(0,40,60,.12);
}
.dual-compare-item img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;}
.dual-compare-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  background:linear-gradient(to top,rgba(0,20,25,.62),transparent);
  color:#fff;font-family:'Barlow Condensed',sans-serif;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
}
@media(max-width:480px){
  .dual-compare{gap:10px;}
}

/* ══════════════════════════════════════
   PRODUCT LINEUP — スペックカード
══════════════════════════════════════ */
.product-lineup{background:var(--surface);}
.product-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
/* Collapsed by default: only the first 3 cards show, the rest are hidden
   until "VIEW ALL" is clicked — all remaining cards then appear at once. */
.product-grid.is-collapsed .product-card:nth-child(n+4){display:none;}
@media(max-width:768px){
  /* 3列に押し込むと文字が折り返して縦長になるため、セットアップ例（config-scroll）と
     同じ「1枚メインで次の1枚が少し見える」横スワイプのピーク・カルーセルに変更 */
  .product-grid{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 10% 10px;scroll-padding-inline:10%;
    scrollbar-width:none;
  }
  .product-grid .product-card{
    flex:0 0 78%;scroll-snap-align:center;
    padding:24px 22px;
  }
  .product-grid::-webkit-scrollbar{display:none;}
}

.product-view-all{
  display:flex;justify-content:center;margin-top:32px;
}
.product-view-all-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:4px;background:none;
  border-top:none;border-left:none;border-right:none;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.product-view-all-link:hover{color:var(--accent);border-color:var(--accent);}
.product-view-all-link .pva-arrow{transition:transform .25s;}
.product-view-all-link.is-open .pva-arrow{transform:rotate(180deg);}
.product-card{
  background:var(--bg);border-radius:0 var(--r) 0 var(--r);
  border:1px solid rgba(0,0,0,.05);padding:24px 22px;
  display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,80,120,.10);}
.product-brand img{height:14px;opacity:.55;margin-bottom:14px;}
/* SEA&SEA's source logo file is yellow; force it to black to match brand guidance */
.product-brand img.brand-ss{filter:brightness(0);opacity:.72;}
.product-photo-wrap{
  position:relative;
  height:120px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,149,184,.10) 0%,transparent 65%);
  border-radius:12px;margin-bottom:16px;
}
.product-photo{max-width:78%;max-height:82%;object-fit:contain;}
.product-name{
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;
  letter-spacing:.03em;color:var(--ink);margin-bottom:4px;
}
.product-copy{font-size:12px;color:var(--ink2);margin-bottom:12px;line-height:1.6;}
.product-price{font-size:12px;color:var(--ink2);margin-bottom:14px;}
.product-price span{font-family:'DM Serif Display',serif;font-size:17px;color:var(--ink);margin-right:6px;}
.product-spec{list-style:none;margin-bottom:16px;flex:1;}
.product-spec li{
  display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);
  padding:6px 0;border-top:1px solid rgba(0,0,0,.05);
}
.product-spec li span{color:var(--muted);}
.product-link{
  align-self:flex-start;font-family:'Barlow Condensed',sans-serif;font-size:11px;
  letter-spacing:.1em;color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(0,150,184,.25);padding-bottom:1px;
  text-transform:uppercase;transition:border-color .2s;
}
.product-link:hover{border-color:var(--accent);}

/* ══════════════════════════════════════
   RELATED ACCESSORIES
══════════════════════════════════════ */
.related-acc{background:var(--bg2);}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;}
.related-card{
  background:var(--surface);border-radius:var(--r);padding:22px 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  text-decoration:none;color:var(--ink);border:1px solid rgba(0,0,0,.05);
  transition:transform .22s,box-shadow .22s;
}
.related-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,80,120,.10);}
.related-card img{width:64px;height:64px;object-fit:contain;}
.related-name{font-size:13px;font-weight:400;line-height:1.5;}
.related-name span{display:block;font-size:11px;color:var(--muted);}
.related-price{font-size:12px;color:var(--accent);}

/* ══════════════════════════════════════
   CATEGORY ORBIT NAV — 左半分だけ見えるオービット
══════════════════════════════════════ */
.cat-orbit-nav{
  background:var(--bg);
  display:flex;flex-wrap:wrap;align-items:center;
  padding:60px 24px;gap:24px;overflow:hidden;
}
.cat-orbit-clip{
  position:relative;flex-shrink:0;
  /* width = radius of the ring so the window's right edge sits at the ring's
     center; height matches the ring's full diameter so nothing is cropped
     vertically. This reveals exactly HALF the ring (height used to be halved
     too, which cropped it down to a quarter). */
  width:min(220px,42vw);height:min(440px,84vw);
  overflow:hidden;
}
.cat-orbit-clip .orbit-system{
  position:absolute;top:0;right:0;margin:0;
  width:min(440px,84vw);height:min(440px,84vw);
}
.cat-orbit-text{flex:1;min-width:240px;max-width:520px;}
.cat-orbit-lead{font-size:13px;color:var(--ink2);line-height:1.85;margin-bottom:24px;}
@media(min-width:900px){
  .cat-orbit-nav{padding:100px 8%;gap:60px;}
  .cat-orbit-clip{width:min(360px,32vw);height:min(720px,64vw);}
  .cat-orbit-clip .orbit-system{width:min(720px,64vw);height:min(720px,64vw);}
}