@charset "utf-8";
/* ═══════════════════════════════════════════════════
   wo:nnect ポータルサイト スタイルシート
   index.html に直書きされていた <style> を記述順のまま外部化したもの。
   後方の指定ほど優先されるため、ブロックの順序は変更しないこと。
   ═══════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────
   [01/29] (id なし)
   ─────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════
   wo:nnect Product Site — Stylesheet
   Clean rebuild for maintainability
   ───────────────────────────────────────────────────
   ARCHITECTURE (cascade order):
   1. Reset
   2. Design Tokens (CSS variables)
   3. Base Elements (typography, links, etc.)
   4. Layout Primitives (.container, .section, .grid)
   5. Components (.btn, .card, .badge, etc.)
   6. Sections (#hero, #features, #pricing, etc.)
   7. Utilities (.text-center, .hide-mobile, etc.)
   8. Responsive (@media queries — mobile-first)
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   1. RESET
   ═══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
  background:#fefdfb;
  color:#2d3a35;
}
body{
  font-family:var(--font-base);
  font-size:16px;
  line-height:1.7;
  color:#2d3a35;
  background:#fefdfb;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  /* Force light theme — prevent iOS/Android auto-darkening */
  forced-color-adjust:none;
  -webkit-forced-color-adjust:none;
}

/* Cancel any system-level dark mode override */
@media (prefers-color-scheme: dark){
  html, body{
    background:#fefdfb !important;
    color:#2d3a35 !important;
  }
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
ul,ol{list-style:none}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════
   2. DESIGN TOKENS
   ═══════════════════════════════════════════════════ */
:root{
  color-scheme: light only;
  -webkit-color-scheme: light only;
  /* Brand Colors */
  --pink:        #f0a8b8;
  --pink-d:      #e09aaa;
  --pink-text:   #e56f91;
  --peach:       #f5c8a8;
  --peach-d:     #e2b497;
  --peach-text:  #d49462;
  --yellow:      #f9dc8c;
  --yellow-d:    #f5cc6a;
  --gold:        #d4a544;
  --mint:        #a8d8c0;
  --mint-d:      #98ccb0;
  --green:       #4aaa68;
  --teal:        #8cc4b8;
  --teal-d:      #5ea89c;
  --blue:        #7eb8d4;
  --blue-d:      #5a9dc8;
  --purple:      #705fc1;
  --orange:      #f0a040;

  /* Neutrals */
  --ink:         #2d3a35;
  --text:        #4a5853;
  --muted:       #8a9591;
  --soft:        #b8c2bd;
  --line:        #e7eae8;
  --line-soft:   #f0f2f1;
  --bg:          #fefdfb;
  --bg2:         #faf9f6;
  --white:       #ffffff;

  /* Gradients */
  --grad: linear-gradient(135deg,#f0a8b8 0%,#f5c8a8 25%,#a8d8c0 60%,#8cc4b8 80%,#7eb8d4 100%);
  --grad-soft: linear-gradient(135deg,rgba(240,168,184,.15) 0%,rgba(168,216,192,.15) 60%,rgba(126,184,212,.15) 100%);

  /* Typography */
  --font-base: 'Nunito','Zen Maru Gothic',-apple-system,BlinkMacSystemFont,'Hiragino Sans','ヒラギノ角ゴ ProN',sans-serif;
  --font-jp:   'Zen Maru Gothic','Nunito',-apple-system,sans-serif;

  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  80px;
  --sp-10: 120px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Shadows */
  --sh-sm: 0 2px 8px rgba(0,0,0,.04);
  --sh-md: 0 6px 20px rgba(0,0,0,.06);
  --sh-lg: 0 12px 32px rgba(0,0,0,.08);
  --sh-xl: 0 20px 48px rgba(0,0,0,.10);

  /* Layout */
  --container-max: 1280px;
  --container-pad: 32px;
  --header-h: 64px;

  /* Animation */
  --ease: cubic-bezier(.22,.9,.36,1);
  --t-fast: .15s;
  --t-base: .3s;
  --t-slow: .6s;
}

/* ═══════════════════════════════════════════════════
   3. BASE ELEMENTS — Typography
   ═══════════════════════════════════════════════════ */
h1,h2,h3,h4{
  font-family:var(--font-jp);
  font-weight:800;
  line-height:1.3;
  color:var(--ink);
  margin:0;
}
h1{font-size:clamp(36px,5vw,56px);line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.8vw,44px);line-height:1.25;letter-spacing:-.01em}
h3{font-size:clamp(18px,2.2vw,24px)}
h4{font-size:clamp(14px,1.4vw,16px);text-transform:uppercase;letter-spacing:.1em}

p{margin:0}
strong,b{font-weight:700;color:var(--ink)}

.gradient-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

::selection{background:rgba(140,196,184,.25);color:var(--ink)}

/* ═══════════════════════════════════════════════════
   4. LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════ */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad);
}

section{
  padding:var(--sp-9) 0;
  position:relative;
}

.section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto var(--sp-7);
}
.section-head h2{margin-bottom:var(--sp-3)}
.section-head p{
  font-size:15px;
  color:var(--text);
  line-height:1.8;
}

.section-pill{
  display:inline-block;
  font-family:var(--font-base);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--teal-d);
  text-transform:uppercase;
  background:rgba(168,216,192,.12);
  padding:6px 16px;
  border-radius:var(--r-full);
  margin-bottom:var(--sp-4);
}

/* ═══════════════════════════════════════════════════
   5. COMPONENTS
   ═══════════════════════════════════════════════════ */

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  font-family:var(--font-base);
  font-size:14px;
  font-weight:700;
  padding:12px 24px;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:all var(--t-base) var(--ease);
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
  border:1.5px solid transparent;
  line-height:1;
}
.btn-primary{
  background:var(--grad);
  color:#fff;
  box-shadow:0 4px 14px rgba(140,196,184,.32);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(140,196,184,.42);
}
.btn-primary:active{transform:translateY(0)}

.btn-outline{
  background:var(--white);
  color:var(--ink);
  border-color:var(--line);
}
.btn-outline:hover{
  border-color:var(--teal-d);
  color:var(--teal-d);
}

.btn-lg{padding:14px 28px;font-size:15px}

/* ---- Cards (base) ---- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}

/* ---- Grid ---- */
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ═══════════════════════════════════════════════════
   6. SECTIONS
   ═══════════════════════════════════════════════════ */

/* ─────────── Site Header ─────────── */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(168,216,192,.10);
  transition:box-shadow var(--t-base) var(--ease);
}
.site-header.scrolled{box-shadow:var(--sh-sm)}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  gap:var(--sp-5);
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex:0 0 auto;
  font-family:var(--font-base);
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}
.brand .mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 40px;
}
.brand .mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.brand > span:last-child{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand small{
  font-size:9px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.14em;
  margin-top:3px;
}

.nav{
  display:flex;
  gap:var(--sp-5);
  flex:1;
  justify-content:center;
}
.nav a{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  transition:color var(--t-fast);
  white-space:nowrap;
}
.nav a:hover{color:var(--teal-d)}
.nav .nav-company{font-size:11px;opacity:.6}
.nav .nav-company:hover{opacity:1}

.header-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex:0 0 auto;
}

.hb-btn{
  display:none;
  width:40px;
  height:40px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:var(--r-sm);
  -webkit-tap-highlight-color:transparent;
}
.hb-btn span{
  display:block;
  width:20px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform var(--t-base) var(--ease), opacity var(--t-fast);
}
body.nav-open .hb-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .hb-btn span:nth-child(2){opacity:0}
body.nav-open .hb-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─────────── Mobile Nav ─────────── */
.mob-nav-overlay{
  position:fixed;
  inset:0;
  z-index:99;
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t-base), visibility var(--t-base);
}
body.nav-open .mob-nav-overlay{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}

.mob-nav{
  position:absolute;
  top:0;
  right:0;
  width:min(320px,85vw);
  height:100%;
  background:#fff;
  transform:translateX(100%);
  transition:transform var(--t-slow) var(--ease);
  display:flex;
  flex-direction:column;
  box-shadow:-8px 0 32px rgba(0,0,0,.08);
}
body.nav-open .mob-nav{transform:translateX(0)}

.mob-nav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
}
.mob-nav-title{font-weight:700}
.mob-nav-close{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  background:var(--line-soft);
}

.mob-nav-links{
  flex:1;
  overflow-y:auto;
  padding:var(--sp-3) 0;
}
.mob-nav-links a{
  display:flex;
  align-items:center;
  padding:var(--sp-4) var(--sp-5);
  font-size:15px;
  font-weight:600;
  border-bottom:1px solid var(--line-soft);
  min-height:52px;
}
.mob-nav-links a:hover{background:rgba(140,196,184,.06);color:var(--teal-d)}

.mob-nav-actions{
  padding:var(--sp-4) var(--sp-5);
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  border-top:1px solid var(--line);
}
.mob-nav-actions .btn{width:100%;padding:14px}

/* ─────────── Hero ─────────── */
.hero{
  position:relative;
  padding:var(--sp-8) 0 var(--sp-9);
  overflow:hidden;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-7);
  align-items:center;
}

.hero-copy{text-align:center}

.hero-platform-label{
  display:inline-block;
  font-family:var(--font-base);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--teal-d);
  background:rgba(168,216,192,.12);
  padding:6px 14px;
  border-radius:var(--r-full);
  text-transform:uppercase;
  margin-bottom:var(--sp-4);
}

.hero-brand{
  margin-bottom:var(--sp-3);
}
.hero-logo-img{
  display:inline-block;
  max-width:340px;
  width:100%;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.04));
}

.hero-h1-img-wrap{
  margin-bottom:var(--sp-5);
  line-height:0;
}
.hero-h1-img{
  display:inline-block;
  max-width:300px;
  width:100%;
}

.hero-lead{
  font-size:clamp(14px,1.4vw,18px);
  line-height:1.8;
  color:var(--ink);
  font-weight:600;
  margin:0 auto var(--sp-1);
  max-width:600px;
}
.hero-lead strong{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:900;
}

.hero-lead-detail{
  font-size:13px;
  color:var(--muted);
  margin:0 auto var(--sp-4);
  max-width:600px;
}

.hero-main-sub{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.04em;
  margin:0 auto var(--sp-5);
  max-width:600px;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-5);
  flex-wrap:wrap;
}

.hero-badges{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--sp-3);
}
.badge-item{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:6px 12px;
  font-size:11px;
  font-weight:600;
  color:var(--text);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  border-radius:var(--r-full);
}
.badge-num{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  background:var(--grad);
  color:#fff;
  border-radius:var(--r-sm);
  font-size:9px;
  font-weight:800;
}

/* ─────────── Hero Showcase (PC only) ─────────── */
.hero-showcase{display:none}

/* ─────────── Value Strip ─────────── */
.value-strip{
  padding:var(--sp-7) 0;
  background:var(--bg2);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.value-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.value-card{
  text-align:center;
  padding:var(--sp-4);
  border-right:1px solid var(--line-soft);
}
.value-card:last-child{border-right:0}
.value-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto var(--sp-3);
  background:var(--teal-bg, rgba(140,196,184,.1));
  color:var(--teal-d);
  border-radius:var(--r-md);
  font-size:20px;
}
.value-card h3{
  font-size:14px;
  font-weight:800;
  margin-bottom:var(--sp-2);
}
.value-card p{
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
}

/* ─────────── Issues Section ─────────── */
.issue-card-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);
}
.issue-v-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5);
  position:relative;
  border-top:4px solid var(--issue-color,var(--pink));
  transition:all var(--t-base) var(--ease);
}
.issue-v-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-md);
}
.issue-v-card:nth-child(1){--issue-color:var(--pink);--issue-tint:rgba(240,168,184,.08)}
.issue-v-card:nth-child(2){--issue-color:var(--peach);--issue-tint:rgba(245,200,168,.10)}
.issue-v-card:nth-child(3){--issue-color:var(--mint);--issue-tint:rgba(168,216,192,.10)}
.issue-v-card:nth-child(4){--issue-color:var(--teal);--issue-tint:rgba(140,196,184,.10)}

.issue-v-card .issue-num{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  background:var(--issue-color);
  color:#fff;
  border-radius:var(--r-md);
  font-family:var(--font-base);
  font-size:18px;
  font-weight:900;
  margin-bottom:var(--sp-4);
}
.issue-v-card .issue-illust{
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--sp-4);
}
.issue-v-card .issue-illust svg{max-height:120px;width:auto}
.issue-v-card h3{
  font-size:20px;
  margin-bottom:var(--sp-3);
}
.issue-v-card .issue-v-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin-bottom:var(--sp-4);
}
.issue-v-card .issue-v-list li{
  font-size:13px;
  color:var(--text);
  padding-left:var(--sp-4);
  position:relative;
  line-height:1.6;
}
.issue-v-card .issue-v-list li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--issue-color);
  font-size:18px;
  line-height:1;
}
.issue-v-card .issue-stop{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--issue-tint);
  border-left:3px solid var(--issue-color);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  line-height:1.5;
  margin-bottom:var(--sp-3);
}
.issue-v-card .stop-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:var(--issue-color);
  color:#fff;
  border-radius:var(--r-sm);
  font-size:12px;
  flex:0 0 28px;
}
.issue-v-card .industry-detail-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:12px;
  font-weight:700;
  color:var(--teal-d);
}
.issues-bottom{
  text-align:center;
  margin-top:var(--sp-6);
  font-size:15px;
  color:var(--text);
  line-height:1.8;
}

/* ─────────── Solution Section ─────────── */
.solution-flow-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
  margin-bottom:var(--sp-7);
}
.solution-flow-title{
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.1em;
  margin-bottom:var(--sp-5);
}
.solution-flow{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--sp-3);
}
.solution-step{
  position:relative;
  text-align:center;
  padding:var(--sp-4) var(--sp-3);
  background:var(--bg2);
  border-radius:var(--r-md);
}
.solution-step-num{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  background:var(--grad);
  color:#fff;
  border-radius:var(--r-sm);
  font-family:var(--font-base);
  font-size:11px;
  font-weight:800;
}
.solution-step-icon{
  height:48px;
  margin:var(--sp-3) auto var(--sp-3);
  display:flex;
  align-items:center;
  justify-content:center;
}
.solution-step-icon svg{width:48px;height:48px}
.solution-step h3{font-size:13px;margin-bottom:var(--sp-1)}
.solution-step p{font-size:11px;color:var(--muted);line-height:1.5}

.benefit-title{text-align:center;margin-bottom:var(--sp-6)}
.benefit-title h3{font-size:clamp(20px,2.4vw,28px);margin-bottom:var(--sp-3)}
.benefit-title p{font-size:14px;color:var(--text)}

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--white);
}
.benefit-card{
  padding:var(--sp-6) var(--sp-4);
  text-align:center;
  border-right:1px solid var(--line);
}
.benefit-card:last-child{border-right:0}
.benefit-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  margin:0 auto var(--sp-3);
  background:rgba(140,196,184,.1);
  color:var(--teal-d);
  border-radius:var(--r-md);
  font-size:28px;
}
.benefit-icon svg{width:36px;height:36px}
.benefit-card h3{font-size:17px;margin-bottom:var(--sp-2)}
.benefit-card p{font-size:12px;color:var(--text);line-height:1.6;margin-bottom:var(--sp-3)}
.benefit-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  text-align:left;
}
.benefit-list li{
  font-size:11px;
  color:var(--muted);
  padding-left:var(--sp-3);
  position:relative;
  line-height:1.5;
}
.benefit-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--teal-d);
  font-weight:900;
}
.solution-bottom{
  text-align:center;
  margin-top:var(--sp-7);
  font-size:clamp(18px,2.4vw,24px);
  font-weight:800;
  color:var(--ink);
}
.solution-bottom .accent{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.solution-bottom p{
  font-size:13px;
  color:var(--text);
  font-weight:500;
  margin-top:var(--sp-2);
}

/* ─────────── Features Section ─────────── */
.feature-connection{
  display:flex;
  justify-content:center;
  margin-bottom:0;
  gap:4px;
}
.feature-connection span{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:12px 24px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  background:var(--white);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:var(--r-md) var(--r-md) 0 0;
  cursor:pointer;
  transition:all var(--t-base) var(--ease);
}
.feature-connection span.feat-tab-active{
  color:var(--ink);
  font-weight:800;
  position:relative;
  z-index:2;
}
.feature-connection b{display:none}

.feature-grid-visual{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:0 var(--r-xl) var(--r-xl) var(--r-xl);
  padding:0;
  min-height:400px;
}
.feature-v-card{display:none;padding:var(--sp-7) var(--sp-6)}
.feature-v-card.feat-active{display:block}
.feature-portal{--feat-color:var(--green)}
.feature-chat{--feat-color:var(--blue)}
.feature-task{--feat-color:var(--purple)}
.feature-ai-bot,.feature-ai{--feat-color:var(--orange)}

.feature-title{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-2);
}
.feature-main-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:var(--feat-color);
  color:#fff;
  border-radius:var(--r-md);
  font-size:24px;
}
.feature-title h3{
  font-size:clamp(28px,3vw,38px);
  color:var(--feat-color);
  margin:0;
}
.feature-role{
  font-size:16px;
  font-weight:700;
  color:var(--feat-color);
  margin-bottom:var(--sp-4);
}
.feature-v-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin-bottom:var(--sp-4);
}
.feature-v-list li{
  font-size:14px;
  color:var(--text);
  line-height:1.7;
  padding-left:var(--sp-4);
  position:relative;
}
.feature-v-list li::before{
  content:"→";
  position:absolute;
  left:0;
  color:var(--feat-color);
  font-weight:900;
}
.feature-tagline{
  font-size:14px;
  font-weight:600;
  color:var(--feat-color);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
}
.feature-tagline strong{color:var(--feat-color)}
.mini-ui{display:none}

.features-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-4);
  padding:var(--sp-5);
  margin-top:var(--sp-6);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}
.features-bottom .check{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:var(--grad);
  color:#fff;
  border-radius:50%;
  font-size:16px;
  flex:0 0 36px;
}
.features-bottom-copy{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  line-height:1.6;
}

/* ─────────── Concept Section ─────────── */
.concept-visual{position:relative}
.concept-header{text-align:center;margin-bottom:var(--sp-7)}

.concept-main-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-5);
  margin-bottom:var(--sp-6);
}
.concept-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
}
.concept-panel h3{
  font-size:20px;
  margin-bottom:var(--sp-4);
}

/* Name breakdown */
.name-origin-sub{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.05em;
  margin-bottom:var(--sp-5);
}
.name-breakdown{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.nb-callout{
  display:flex;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg2);
  border-radius:var(--r-md);
  font-size:12px;
  line-height:1.5;
}
.nb-num{
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  color:#fff;
  border-radius:50%;
  font-weight:800;
  font-size:11px;
}
.nb-text{font-weight:500}
.nb-text b{color:var(--ink);font-weight:800}
.nb-logo{
  grid-column:1/-1;
  text-align:center;
  padding:var(--sp-5) 0;
}
.nb-logo-img{
  display:inline-block;
  max-width:220px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.04));
}
.nb-conclusion{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  background:rgba(168,216,192,.08);
  border:1px solid rgba(168,216,192,.18);
  border-radius:var(--r-md);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  text-align:center;
}
.nb-conclusion strong{color:var(--teal-d)}

/* Wa grid */
.wa-grid-v2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-3);
}
.wa-v2{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:var(--sp-4);
  padding:var(--sp-4);
  background:var(--white);
  border:1.5px solid var(--wa-border);
  border-radius:var(--r-md);
  align-items:center;
}
.wa-v2-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:var(--wa-bg);
  color:#fff;
  border-radius:50%;
  font-size:22px;
  box-shadow:0 4px 14px var(--wa-shadow);
}
.wa-v2-pink{--wa-bg:var(--pink-text);--wa-border:rgba(229,111,145,.18);--wa-shadow:rgba(229,111,145,.30)}
.wa-v2-orange{--wa-bg:var(--orange);--wa-border:rgba(240,160,64,.18);--wa-shadow:rgba(240,160,64,.30)}
.wa-v2-green{--wa-bg:var(--green);--wa-border:rgba(74,170,104,.18);--wa-shadow:rgba(74,170,104,.30)}
.wa-v2-teal{--wa-bg:var(--teal-d);--wa-border:rgba(94,168,156,.18);--wa-shadow:rgba(94,168,156,.30)}
.wa-v2-label{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:4px;
}
.wa-v2-kanji{
  font-family:var(--font-jp);
  font-size:24px;
  font-weight:900;
  color:var(--wa-bg);
  line-height:1;
}
.wa-v2-sep{color:var(--soft);font-size:16px}
.wa-v2-meaning{
  font-family:var(--font-jp);
  font-size:16px;
  font-weight:800;
  color:var(--wa-bg);
}
.wa-v2-en{
  font-size:9px;
  font-weight:700;
  color:var(--wa-bg);
  opacity:.5;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.wa-v2 p{
  font-size:12px;
  color:var(--text);
  line-height:1.6;
  margin:0;
}

/* Infinity */
.infinity-mark-box{
  display:flex;
  justify-content:center;
  padding:var(--sp-4) 0;
  margin-bottom:var(--sp-4);
}
.infinity-mark{width:160px;height:auto}
.infinity-list,.design-list,.infinity-features{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.infinity-list li,.design-list li,.infinity-features li{
  font-size:12px;
  color:var(--text);
  padding:var(--sp-2) var(--sp-3);
  background:var(--bg2);
  border-radius:var(--r-sm);
  line-height:1.5;
}

.concept-palette{
  height:36px;
  background:var(--grad);
  border-radius:var(--r-sm);
  margin:var(--sp-3) 0 var(--sp-4);
  opacity:.7;
}

.concept-bottom{
  text-align:center;
  padding:var(--sp-6) 0;
}
.concept-bottom h3{
  font-size:clamp(20px,2.4vw,26px);
  margin-bottom:var(--sp-2);
}
.concept-bottom span{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.concept-bottom p{
  font-size:13px;
  color:var(--muted);
}

/* ─────────── Scenes Section ─────────── */
.scene-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-bottom:var(--sp-6);
}
.scene-tab{
  padding:8px 16px;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  cursor:pointer;
  transition:all var(--t-base);
  display:inline-flex;
  align-items:center;
  gap:6px;
  -webkit-tap-highlight-color:transparent;
}
.scene-tab.active,.scene-tab[aria-selected="true"]{
  background:var(--grad);
  color:#fff;
  border-color:transparent;
}

.industry-scene-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
}
.scene-card-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--sp-4);
  margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--line);
}
.scene-industry-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:var(--grad);
  color:#fff;
  border-radius:var(--r-md);
  font-size:24px;
}
.scene-card-title h3{font-size:22px;margin-bottom:4px}
.scene-card-title p{font-size:13px;color:var(--muted)}
.scene-detail-link{
  font-size:12px;
  font-weight:700;
  color:var(--teal-d);
}

.scene-block-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-3);
}
.scene-block{
  padding:var(--sp-4);
  background:var(--bg2);
  border-radius:var(--r-md);
}
.scene-block-top{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.scene-block-top h4{
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  text-transform:none;
  letter-spacing:0;
}
.scene-mini-visual{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin-bottom:var(--sp-2);
  color:var(--teal-d);
}
.scene-block p{
  font-size:12px;
  color:var(--text);
  line-height:1.6;
  margin-bottom:var(--sp-3);
}
.scene-solution{
  padding:var(--sp-2) var(--sp-3);
  background:var(--white);
  border-radius:var(--r-sm);
  border-left:3px solid var(--teal);
}
.scene-solution strong{display:block;font-size:11px;color:var(--teal-d);margin-bottom:2px}
.scene-solution span{font-size:11px;color:var(--text)}

.scene-effect-bar{
  display:grid;
  grid-template-columns:auto repeat(3,1fr);
  margin-top:var(--sp-4);
  background:var(--bg2);
  border-radius:var(--r-md);
  overflow:hidden;
}
.scene-effect-heading{
  padding:var(--sp-3) var(--sp-4);
  font-size:11px;
  font-weight:800;
  color:var(--teal-d);
  letter-spacing:.05em;
  background:rgba(140,196,184,.1);
  border-right:1px solid var(--line);
  display:flex;
  align-items:center;
}
.scene-effect{
  padding:var(--sp-3) var(--sp-4);
  font-size:12px;
  color:var(--text);
  border-right:1px solid var(--line);
}
.scene-effect:last-child{border-right:0}
.scene-effect b{
  display:block;
  font-size:18px;
  color:var(--teal-d);
  margin-bottom:2px;
}
.scene-note{
  text-align:center;
  margin-top:var(--sp-3);
  font-size:11px;
  color:var(--muted);
}

.industry-bottom{
  text-align:center;
  margin-top:var(--sp-6);
}
.industry-bottom h3{font-size:clamp(18px,2vw,22px);margin-bottom:var(--sp-2)}
.industry-bottom p{font-size:13px;color:var(--text)}

/* ─────────── Demo Section ─────────── */
.demo-embed-frame{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--sp-3);
  max-width:1000px;
  margin:0 auto;
}
.demo-embed-toolbar{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
}
.demo-embed-dots{display:flex;gap:6px}
.demo-embed-dots i{
  width:10px;
  height:10px;
  background:var(--line);
  border-radius:50%;
}
.demo-embed-url{
  flex:1;
  padding:6px 12px;
  background:var(--bg2);
  border-radius:var(--r-sm);
  font-size:11px;
  color:var(--muted);
}
.demo-embed-action{
  padding:6px 12px;
  font-size:11px;
  font-weight:700;
  color:var(--teal-d);
}
.demo-embed-wrap{
  aspect-ratio:16/10;
  background:var(--bg2);
  border-radius:var(--r-md);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.demo-embed-tabs{
  display:flex;
  justify-content:center;
  gap:var(--sp-2);
  margin-top:var(--sp-3);
}
.demo-embed-tab{
  padding:6px 14px;
  font-size:11px;
  font-weight:700;
  color:var(--text);
  background:var(--bg2);
  border-radius:var(--r-full);
  cursor:pointer;
}
.demo-embed-tab.active{background:var(--grad);color:#fff}
.demo-embed-note{
  text-align:center;
  margin-top:var(--sp-3);
  font-size:11px;
  color:var(--muted);
  padding:var(--sp-2) var(--sp-3);
  background:var(--bg2);
  border-radius:var(--r-sm);
}

/* ─────────── Pricing Section ─────────── */
.pricing-hero-card{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:var(--sp-9) var(--sp-7);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  text-align:center;
}
.pricing-hero-card::after{
  content:"何人でも、何拠点でも、月額定額。";
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  padding:7px 24px;
  background:var(--ink);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  border-radius:var(--r-full);
  white-space:nowrap;
}
.pricing-badge{
  display:inline-block;
  background:var(--teal);
  color:#fff;
  padding:6px 18px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  border-radius:var(--r-full);
  margin-bottom:var(--sp-5);
}
.pricing-amount{
  position:relative;
  padding-bottom:var(--sp-5);
  margin-bottom:var(--sp-5);
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.pricing-amount::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:3px;
  background:var(--grad);
  border-radius:2px;
}
.pricing-yen{
  font-size:32px;
  font-weight:800;
  color:var(--teal-d);
}
.pricing-num{
  font-family:var(--font-base);
  font-size:clamp(60px,9vw,88px);
  font-weight:900;
  color:var(--ink);
  letter-spacing:-.04em;
  line-height:1;
}
.pricing-unit{
  font-size:14px;
  font-weight:700;
  color:var(--muted);
}
.pricing-lead{
  max-width:500px;
  margin:0 auto var(--sp-6);
  font-size:14px;
  color:var(--text);
  font-weight:600;
  line-height:1.8;
}
.pricing-merit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-3);
  margin-bottom:var(--sp-6);
}
.pricing-merit{
  position:relative;
  background:var(--white);
  border:1.5px solid rgba(140,196,184,.18);
  border-radius:var(--r-md);
  padding:var(--sp-5) var(--sp-4);
  text-align:center;
  transition:all var(--t-base) var(--ease);
}
.pricing-merit::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--sp-4);
  right:var(--sp-4);
  height:3px;
  background:var(--grad);
  border-radius:0 0 2px 2px;
}
.pricing-merit:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(94,168,156,.10);
}
.pricing-merit-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto var(--sp-2);
  background:rgba(140,196,184,.08);
  color:var(--teal-d);
  border-radius:var(--r-md);
  font-size:20px;
}
.pricing-merit h3{font-size:14px;margin-bottom:var(--sp-1)}
.pricing-merit p{font-size:12px;color:var(--text);line-height:1.6}

.pricing-compare{margin-bottom:var(--sp-5);text-align:left}
.pricing-compare h4{
  text-align:center;
  font-size:15px;
  margin-bottom:var(--sp-3);
  text-transform:none;
  letter-spacing:0;
}
.pricing-compare-table{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.pricing-compare-row{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr .8fr;
  align-items:center;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:600;
}
.pricing-compare-row:last-child{border-bottom:0}
.pricing-compare-row.header{
  background:rgba(140,196,184,.06);
  font-weight:700;
  font-size:11px;
  color:var(--text);
}
.pricing-compare-row .accent{
  color:var(--teal-d);
  font-weight:800;
  background:rgba(140,196,184,.08);
  padding:2px 8px;
  border-radius:var(--r-sm);
  display:inline-block;
}
.pricing-compare-row .save{
  color:var(--pink-text);
  font-weight:800;
  font-size:13px;
}
.pricing-compare-row:last-child{background:rgba(229,111,145,.04)}
.pricing-compare-row:last-child .save{font-size:16px}
.pricing-compare-note{
  margin-top:var(--sp-2);
  text-align:right;
  font-size:10px;
  color:var(--muted);
}
.pricing-cta-row{
  display:flex;
  justify-content:center;
  gap:var(--sp-3);
  flex-wrap:wrap;
}
.pricing-cta-row .btn{min-width:200px}

/* ─────────── FAQ Section ─────────── */
.faq-list2{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  max-width:800px;
  margin:0 auto;
}
details.faq2{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  transition:all var(--t-base);
}
details.faq2[open]{box-shadow:var(--sh-sm)}
details.faq2 summary{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:var(--sp-5);
}
details.faq2 summary::-webkit-details-marker{display:none}
details.faq2 summary::after{
  content:"+";
  position:absolute;
  right:0;
  font-size:20px;
  font-weight:300;
  color:var(--teal-d);
  transition:transform var(--t-base);
}
details.faq2[open] summary::after{transform:rotate(45deg)}
.qmark2{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  background:var(--teal);
  color:#fff;
  border-radius:var(--r-sm);
  font-size:12px;
  font-weight:900;
  flex:0 0 24px;
}
.faq-answer2{
  padding:var(--sp-3) 0 0 36px;
  font-size:13px;
  color:var(--text);
  line-height:1.8;
}

/* ─────────── Saleskit Section ─────────── */
.saleskit-panel-v2{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
}
.sales-tabs-v2{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-bottom:var(--sp-5);
}
.sales-tab-v2{
  padding:8px 16px;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  background:var(--bg2);
  border-radius:var(--r-full);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.sales-tab-v2.active{background:var(--grad);color:#fff}

.talk-timeline{
  background:var(--bg2);
  border-radius:var(--r-md);
  padding:var(--sp-5);
}
.talk-step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4);
  padding-bottom:var(--sp-5);
  position:relative;
}
.talk-step:last-child{padding-bottom:0}
.talk-step-num{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:var(--grad);
  color:#fff;
  border-radius:50%;
  font-size:13px;
  font-weight:800;
  flex:0 0 32px;
}
.talk-step-body h3{font-size:15px;margin-bottom:var(--sp-2)}
.talk-quote{
  padding:var(--sp-3) var(--sp-4);
  background:var(--white);
  border-left:3px solid var(--teal);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:13px;
  color:var(--text);
  font-style:italic;
  margin-bottom:var(--sp-2);
}
.talk-note{
  font-size:11px;
  color:var(--muted);
  padding-left:var(--sp-3);
}

.sales-objection-list-v2,
.sales-qa-list-v2{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.sales-objection-card-v2,
.sales-qa-card-v2{
  background:var(--bg2);
  border-radius:var(--r-md);
  padding:var(--sp-4);
}
.sales-objection-badge-v2{
  display:inline-block;
  padding:3px 10px;
  background:var(--pink-text);
  color:#fff;
  font-size:10px;
  font-weight:800;
  border-radius:var(--r-full);
  margin-bottom:var(--sp-2);
}
.sales-objection-title-v2,
.sales-qa-question-v2{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:var(--sp-2);
}
.sales-objection-answer-v2,
.sales-qa-answer-v2{
  font-size:12px;
  color:var(--text);
  line-height:1.7;
}

.sales-hearing-grid-v2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);
}
.sales-hearing-card-v2{
  background:var(--bg2);
  border-radius:var(--r-md);
  padding:var(--sp-5);
}
.sales-hearing-card-v2 h3{font-size:16px;margin-bottom:var(--sp-3)}
.sales-hearing-group-v2{margin-bottom:var(--sp-4)}
.sales-hearing-group-v2:last-child{margin-bottom:0}
.sales-hearing-group-v2 h4{
  font-size:12px;
  font-weight:800;
  color:var(--teal-d);
  text-transform:none;
  letter-spacing:0;
  margin-bottom:var(--sp-2);
}
.sales-hearing-list-v2{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sales-hearing-list-v2 li{
  font-size:12px;
  color:var(--text);
  padding-left:var(--sp-3);
  position:relative;
  line-height:1.6;
}
.sales-hearing-list-v2 li::before{
  content:"·";
  position:absolute;
  left:0;
  color:var(--teal-d);
  font-weight:900;
}

/* ─────────── Contact / CTA Section ─────────── */
.contact-final-wrap{padding:var(--sp-9) 0}
.contact-final{
  max-width:920px;
  margin:0 auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--sp-9) var(--sp-7);
  text-align:center;
}
.contact-final-kicker{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--teal-d);
  background:rgba(168,216,192,.12);
  padding:6px 14px;
  border-radius:var(--r-full);
  text-transform:uppercase;
  margin-bottom:var(--sp-4);
}
.contact-final h2{margin-bottom:var(--sp-3)}
.contact-final-lead{
  font-size:14px;
  color:var(--text);
  line-height:1.8;
  margin:0 auto var(--sp-6);
  max-width:600px;
}
.contact-info-cards{
  display:flex;
  justify-content:center;
  gap:var(--sp-3);
  flex-wrap:wrap;
  margin-bottom:var(--sp-5);
}
.contact-info-card{
  padding:var(--sp-3) var(--sp-5);
  background:var(--bg2);
  border-radius:var(--r-md);
  text-align:center;
}
.contact-info-card span{
  display:block;
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.contact-info-card strong{
  display:block;
  font-size:18px;
  color:var(--ink);
  font-weight:800;
}
.contact-info-card small{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:2px;
}
.contact-final-form{
  max-width:600px;
  margin:0 auto;
  padding:var(--sp-5);
  background:var(--bg2);
  border-radius:var(--r-md);
  text-align:left;
}
.contact-final-form label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  margin-bottom:var(--sp-2);
}
.contact-final-form input,
.contact-final-form select,
.contact-final-form textarea{
  width:100%;
  padding:12px 14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:14px;
  margin-bottom:var(--sp-3);
  transition:border-color var(--t-fast);
}
.contact-final-form input:focus,
.contact-final-form select:focus,
.contact-final-form textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(140,196,184,.15);
}
.contact-final-form button{
  width:100%;
  padding:14px;
  background:var(--grad);
  color:#fff;
  font-size:15px;
  font-weight:800;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:all var(--t-base);
}
.contact-final-form button:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(140,196,184,.32)}
.contact-final-form input::placeholder,
.contact-final-form textarea::placeholder{
  color:rgba(122,111,106,.55) !important;
  opacity:1;
}


/* ─────────── Footer ─────────── */
.footer{
  padding:var(--sp-8) 0 var(--sp-5);
  background:var(--bg2);
  border-top:1px solid var(--line);
}
.footer-inner-v2{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
}
.footer-cols{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--sp-7);
  padding-bottom:var(--sp-6);
  border-bottom:1px solid var(--line);
}
.footer-col h4{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--ink);
  text-transform:uppercase;
  margin-bottom:var(--sp-3);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-2)}
.footer-col a{
  font-size:13px;
  color:var(--muted);
  transition:color var(--t-fast);
}
.footer-col a:hover{color:var(--teal-d)}

.footer-brand{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.footer-mark{width:32px;height:32px;display:grid;place-items:center}
.footer-mark img{width:100%;height:100%;object-fit:contain}
.footer-name{font-family:var(--font-base);font-size:18px;font-weight:800}
.footer-tagline{
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
}
.footer-tagline strong{color:var(--ink)}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--sp-2);
  font-size:11px;
  color:var(--muted);
}
.footer-statement{
  font-family:var(--font-base);
  font-style:italic;
  color:var(--teal-d);
  opacity:.7;
}
.footer-powered a{
  color:var(--text);
  font-weight:700;
  transition:color var(--t-fast);
}
.footer-powered a:hover{color:var(--teal-d)}

/* ─────────── Mobile Fixed CTA Bar ─────────── */
.mob-cta-bar{display:none}

/* ─────────── Misc utility ─────────── */
.reveal{opacity:1;transform:none;transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-visible,.reveal.visible{opacity:1;transform:translateY(0)}
/* JS-enabled state: only hide when JS marks ready */
html.js-ready .reveal:not(.is-visible):not(.visible){opacity:0;transform:translateY(20px)}

.grad-line{
  height:2px;
  background:var(--grad);
  opacity:.4;
  margin:0;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  border:0;
}

.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}

/* ═══════════════════════════════════════════════════
   8. RESPONSIVE — Tablet & Mobile
   ═══════════════════════════════════════════════════ */

/* ─────────── Large Tablet (≤1100px) ─────────── */
@media(max-width:1100px){
  .nav{gap:var(--sp-4);font-size:12px}
  .nav a{font-size:12px}
  .value-grid{grid-template-columns:repeat(5,1fr)}
}

/* ─────────── Tablet (≤960px) ─────────── */
@media(max-width:960px){
  :root{--container-pad:24px}

  .nav{display:none}
  .hb-btn{display:flex}
  .header-actions{display:none}

  .hero-grid{grid-template-columns:1fr}
  .hero-showcase{display:none}

  .value-grid{grid-template-columns:repeat(3,1fr)}
  .value-card:nth-child(n+4){border-top:1px solid var(--line-soft)}
  .value-card:nth-child(3){border-right:0}

  .issue-card-grid{grid-template-columns:repeat(2,1fr)}
  .solution-flow{grid-template-columns:repeat(3,1fr)}
  .solution-step:nth-child(3)::after{display:none}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-card:nth-child(2){border-right:0}
  .benefit-card:nth-child(n+3){border-top:1px solid var(--line)}

  .concept-main-grid{grid-template-columns:1fr}
  .scene-block-grid{grid-template-columns:repeat(2,1fr)}
  .scene-effect-bar{grid-template-columns:1fr}
  .scene-effect-heading,.scene-effect{border-right:0;border-bottom:1px solid var(--line)}
  .scene-effect:last-child{border-bottom:0}

  .pricing-merit-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-hero-card{padding:var(--sp-7) var(--sp-5)}

  .sales-hearing-grid-v2{grid-template-columns:1fr}

  .footer-cols{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
}

/* ─────────── Mobile (≤640px) ─────────── */
@media(max-width:640px){
  :root{
    --container-pad:16px;
    --sp-9:48px;
    --sp-8:40px;
    --sp-7:32px;
  }

  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0))}

  /* Header */
  .site-header{position:sticky;top:0}
  .header-inner{height:56px;gap:var(--sp-3)}
  .brand{font-size:17px;gap:6px}
  .brand .mark{width:36px;height:36px;flex:0 0 36px}
  .brand small{display:none}
  .hb-btn{width:40px;height:40px}

  /* Hero */
  .hero{padding:var(--sp-5) 0 var(--sp-7)}
  .hero-platform-label{font-size:10px;padding:5px 12px}
  .hero-logo-img{max-width:260px}
  .hero-h1-img{max-width:220px}
  .hero-lead{font-size:14px;line-height:1.7}
  .hero-lead-detail{font-size:12px}
  .hero-main-sub{font-size:11px}
  .hero-actions{gap:var(--sp-2);width:100%}
  .hero-actions .btn{flex:1 1 0;font-size:12px;padding:11px 14px}
  .hero-badges{gap:6px}
  .badge-item{font-size:10px;padding:5px 10px}
  .badge-num{width:16px;height:16px;font-size:8px}

  /* Sections */
  section{padding:var(--sp-7) 0}
  .section-head{margin-bottom:var(--sp-5)}
  .section-pill{font-size:10px;padding:5px 12px}
  h1{font-size:clamp(28px,7vw,36px)}
  h2{font-size:clamp(22px,5.5vw,28px)}

  /* Value strip */
  .value-strip{padding:var(--sp-5) 0}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .value-card{border-right:1px solid var(--line-soft);padding:var(--sp-3)}
  .value-card:nth-child(2n){border-right:0}
  .value-card:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .value-icon{width:36px;height:36px;font-size:15px}
  .value-card h3{font-size:12px}
  .value-card p{font-size:10px;line-height:1.5}

  /* Issues */
  .issue-card-grid{grid-template-columns:1fr}
  .issue-v-card{padding:var(--sp-5) var(--sp-4)}
  .issue-v-card .issue-num{width:40px;height:40px;font-size:15px;margin-bottom:var(--sp-3)}
  .issue-v-card .issue-illust{height:90px;margin-bottom:var(--sp-3)}
  .issue-v-card .issue-illust svg{max-height:90px}
  .issue-v-card h3{font-size:17px}
  .issue-v-card .issue-v-list li{font-size:12px}
  .issue-v-card .issue-stop{padding:var(--sp-3);font-size:12px}
  .issue-v-card .stop-icon{width:24px;height:24px;font-size:11px;flex:0 0 24px}
  .issues-bottom{margin-top:var(--sp-5);font-size:13px}

  /* Solution */
  .solution-flow-panel{padding:var(--sp-4)}
  .solution-flow{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
  .solution-step{padding:var(--sp-3)}
  .solution-step-num{width:20px;height:20px;font-size:10px;top:-8px}
  .solution-step-icon{height:36px;margin:var(--sp-2) auto}
  .solution-step-icon svg{width:36px;height:36px}
  .solution-step h3{font-size:11.5px}
  .solution-step p{font-size:9.5px;line-height:1.45}

  .benefit-title{margin-bottom:var(--sp-4)}
  .benefit-title h3{font-size:20px}
  .benefit-grid{grid-template-columns:1fr}
  .benefit-card{padding:var(--sp-4);border-right:0;border-bottom:1px solid var(--line)}
  .benefit-card:last-child{border-bottom:0}
  .benefit-icon{width:48px;height:48px;font-size:22px}
  .benefit-card h3{font-size:15px}
  .benefit-card p{font-size:12px}

  /* Features */
  .feature-connection{flex-wrap:wrap;gap:3px}
  .feature-connection span{
    flex:1 1 calc(50% - 3px);
    padding:10px 8px;
    font-size:12px;
    justify-content:center;
    border-radius:var(--r-md) var(--r-md) 0 0;
  }
  .feature-grid-visual{border-radius:0 0 var(--r-md) var(--r-md);min-height:auto}
  .feature-v-card{padding:var(--sp-5) var(--sp-4)}
  .feature-title{gap:var(--sp-3)}
  .feature-main-icon{width:40px;height:40px;font-size:18px}
  .feature-title h3{font-size:24px}
  .feature-role{font-size:13px;margin-bottom:var(--sp-3)}
  .feature-v-list li{font-size:13px}
  .feature-tagline{font-size:12px;padding-top:var(--sp-3)}
  .features-bottom{flex-direction:column;text-align:center;padding:var(--sp-4);gap:var(--sp-3)}
  .features-bottom .check{margin:0 auto}

  /* Concept */
  .concept-panel{padding:var(--sp-4)}
  .concept-panel h3{font-size:17px;margin-bottom:var(--sp-3)}
  .name-breakdown{grid-template-columns:1fr;gap:var(--sp-2)}
  .nb-callout{padding:var(--sp-3);font-size:11.5px}
  .nb-logo-img{max-width:160px}
  .nb-conclusion{font-size:12px;padding:var(--sp-3)}
  .wa-grid-v2{grid-template-columns:1fr;gap:var(--sp-2)}
  .wa-v2{grid-template-columns:52px 1fr;gap:var(--sp-3);padding:var(--sp-3)}
  .wa-v2-icon{width:48px;height:48px;font-size:18px}
  .wa-v2-kanji{font-size:20px}
  .wa-v2-meaning{font-size:14px}
  .wa-v2 p{font-size:11.5px}
  .infinity-mark{width:120px}
  .concept-bottom{padding:var(--sp-4) 0}

  /* Scenes */
  .scene-tabs{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    margin:0 -16px var(--sp-4);
    padding:0 16px var(--sp-2);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .scene-tabs::-webkit-scrollbar{display:none}
  .scene-tab{flex:0 0 auto;padding:7px 13px;font-size:11px}

  .industry-scene-card{padding:var(--sp-4)}
  .scene-card-head{grid-template-columns:auto 1fr;gap:var(--sp-3);padding-bottom:var(--sp-3);margin-bottom:var(--sp-4)}
  .scene-industry-icon{width:44px;height:44px;font-size:20px}
  .scene-card-title h3{font-size:18px}
  .scene-card-title p{font-size:11px}
  .scene-detail-link{grid-column:1/-1;text-align:right}
  .scene-block-grid{grid-template-columns:1fr;gap:var(--sp-3)}
  .scene-block{padding:var(--sp-3)}
  .scene-effect-heading,.scene-effect{padding:var(--sp-3)}

  /* Demo */
  .demo-embed-frame{padding:var(--sp-2)}
  .demo-embed-toolbar{padding:var(--sp-1) var(--sp-2)}
  .demo-embed-url{font-size:10px}

  /* Pricing */
  .pricing-hero-card{padding:var(--sp-7) var(--sp-4)}
  .pricing-hero-card::after{font-size:10px;padding:6px 14px}
  .pricing-yen{font-size:24px}
  .pricing-num{font-size:60px}
  .pricing-unit{font-size:12px;width:100%}
  .pricing-lead{font-size:13px}
  .pricing-merit-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
  .pricing-merit{padding:var(--sp-3)}
  .pricing-merit-icon{width:38px;height:38px;font-size:16px}
  .pricing-merit h3{font-size:12px}
  .pricing-merit p{font-size:10.5px;line-height:1.5}
  .pricing-compare-row{grid-template-columns:.7fr 1.1fr 1fr .9fr;padding:8px 10px;font-size:11px}
  .pricing-compare-row.header{font-size:9.5px}
  .pricing-compare-row .accent{font-size:11px;padding:1px 6px}
  .pricing-cta-row{flex-direction:column;width:100%}
  .pricing-cta-row .btn{width:100%;min-width:0}

  /* FAQ */
  details.faq2{padding:var(--sp-3) var(--sp-4)}
  details.faq2 summary{font-size:13px;min-height:44px}
  .faq-answer2{font-size:12px;padding-left:32px}

  /* Saleskit */
  .saleskit-panel-v2{padding:var(--sp-4)}
  .sales-tabs-v2{gap:6px}
  .sales-tab-v2{padding:7px 12px;font-size:11px}
  .talk-timeline{padding:var(--sp-3)}
  .talk-step{gap:var(--sp-3)}
  .talk-step-num{width:28px;height:28px;font-size:12px;flex:0 0 28px}
  .talk-step-body h3{font-size:14px}
  .talk-quote{padding:var(--sp-3);font-size:12px}
  .sales-objection-card-v2,.sales-qa-card-v2,.sales-hearing-card-v2{padding:var(--sp-3)}

  /* Contact */
  .contact-final{padding:var(--sp-7) var(--sp-4)}
  .contact-final-lead{font-size:13px}
  .contact-info-cards{gap:var(--sp-2);flex-direction:column}
  .contact-info-card{width:100%}
  .contact-final-form{padding:var(--sp-4)}
  .contact-final-form input,.contact-final-form select,.contact-final-form textarea{
    font-size:16px;
    padding:13px 14px;
  }

  /* Footer */
  .footer{padding:var(--sp-6) 0 var(--sp-4)}
  .footer-cols{grid-template-columns:1fr;gap:var(--sp-5);text-align:center}
  .footer-brand-col{text-align:center}
  .footer-brand{justify-content:center}
  .footer-col ul{align-items:center}
  .footer-bottom{flex-direction:column;text-align:center;gap:var(--sp-1);font-size:10.5px}

  /* Bottom CTA Bar — mobile only */
  .mob-cta-bar{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:90;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 20px rgba(0,0,0,.06);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom,0));
    gap:6px;
  }
  .mob-cta-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:8px 4px;
    border-radius:var(--r-md);
    font-size:10px;
    font-weight:700;
    color:var(--text);
    -webkit-tap-highlight-color:transparent;
  }
  .mob-cta-item i{font-size:16px;color:var(--teal-d)}
  .mob-cta-item.mob-cta-primary{
    background:var(--grad);
    color:#fff;
  }
  .mob-cta-item.mob-cta-primary i{color:#fff}
  .mob-cta-item:active{transform:scale(.96)}
}

/* ─────────── Small mobile (≤380px) ─────────── */
@media(max-width:380px){
  :root{--container-pad:12px}
  .hero-logo-img{max-width:220px}
  .hero-h1-img{max-width:190px}
  .pricing-num{font-size:48px}
  .pricing-yen{font-size:20px}
  .pricing-compare-row{grid-template-columns:1fr;gap:4px;text-align:center;padding:var(--sp-2)}
  .pricing-compare-row.header{display:none}
}

/* ═══════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════ */
@media print{
  .site-header,.mob-cta-bar,.mob-nav-overlay,.hb-btn,.hero-actions,.btn,.scene-tabs{display:none}
  section{padding:32px 0;page-break-inside:avoid}
  body{background:#fff;color:#000}
}


/* ═══ Force light theme — comprehensive override ═══ */
:root{color-scheme:only light}
html{background-color:#fefdfb !important}
body{background-color:#fefdfb !important;color:#2d3a35 !important}

/* All sections must have explicit backgrounds to prevent OS overrides */
section, header, footer{background-color:transparent}
.site-header{background:rgba(255,255,255,.92) !important;color:#2d3a35}
.hero{background:#fefdfb}
.value-strip{background:#faf9f6}
.footer{background:#faf9f6}

/* Cards explicit white */
.card,.issue-v-card,.industry-scene-card,.pricing-hero-card,
.saleskit-panel-v2,.concept-panel,.demo-embed-frame,
.value-card,.feature-grid-visual,.feature-v-card,
.benefit-grid,.benefit-card{
  background:#ffffff !important;
  color:#2d3a35;
}

/* Text colors */
h1,h2,h3,h4,h5,h6{color:#2d3a35 !important}
p,li,span,a,td,th{color:inherit}

/* Inputs */
input,select,textarea{
  background:#ffffff !important;
  color:#2d3a35 !important;
  -webkit-text-fill-color:#2d3a35;
}

/* Mobile-specific reinforcement */
@media(max-width:640px){
  html,body{
    background-color:#fefdfb !important;
    color:#2d3a35 !important;
  }
}


/* ═══ v91: Mobile Layout Fixes ═══ */

@media(max-width:640px){

  /* ── Issue 1 (Image 5): issue-v-card — 巨大な空白除去 ── */
  .issue-v-card{
    padding:20px 18px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .issue-v-card .issue-num{
    width:40px;
    height:40px;
    font-size:14px;
    border-radius:10px;
    margin:0;
  }
  /* CRITICAL: hide illustration on mobile (was causing huge empty space) */
  .issue-v-card .issue-illust{
    display:none;
  }
  .issue-v-card h3{
    font-size:17px;
    margin:0;
    line-height:1.45;
  }
  .issue-v-card .issue-v-list{
    margin:0;
    gap:6px;
  }
  .issue-v-card .issue-v-list li{
    font-size:13px;
    line-height:1.55;
  }
  .issue-v-card .issue-stop{
    margin:4px 0 0;
    padding:12px 14px;
    font-size:12.5px;
    gap:10px;
    line-height:1.5;
  }
  .issue-v-card .issue-stop .stop-icon{
    width:26px;
    height:26px;
    font-size:11px;
    flex:0 0 26px;
  }
  .issue-v-card .industry-detail-btn{
    margin:0;
    font-size:12px;
  }

  /* ── Issue 2 (Image 2): wa-v2 card — アイコン縦中央寄せ、左右バランス改善 ── */
  .wa-v2{
    grid-template-columns:64px 1fr;
    gap:14px;
    padding:16px;
    align-items:center;
  }
  .wa-v2-icon{
    width:60px;
    height:60px;
    font-size:24px;
    align-self:center;
  }
  .wa-v2-body{display:flex;flex-direction:column;gap:2px}
  .wa-v2-label{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin:0;
    line-height:1;
  }
  .wa-v2-kanji{font-size:22px;line-height:1}
  .wa-v2-sep{font-size:14px;color:var(--soft);opacity:.5}
  .wa-v2-meaning{font-size:14px;line-height:1}
  .wa-v2-en{
    font-size:9px;
    letter-spacing:.1em;
    margin:2px 0 4px;
    opacity:.55;
  }
  .wa-v2 p{
    font-size:12px;
    line-height:1.6;
    margin:0;
  }

  /* ── Issue 3 (Image 3): feature-connection tabs — 4個1行で表示 ── */
  .feature-connection{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
    margin-bottom:0;
    padding:0;
  }
  .feature-connection b{display:none}
  .feature-connection span{
    padding:10px 4px;
    font-size:11px;
    border-radius:8px 8px 0 0;
    text-align:center;
    justify-content:center;
    white-space:nowrap;
    overflow:hidden;
    flex:none;
    gap:4px;
  }
  .feature-connection span i{font-size:11px}

  /* ── Issue 4 (Image 1): talk-step (saleskit) — STEPラベルを上に整理 ── */
  .talk-step{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-bottom:24px;
    align-items:stretch;
  }
  .talk-step-num{
    width:auto;
    height:auto;
    background:transparent;
    color:var(--teal-d);
    border-radius:0;
    font-size:11px;
    font-weight:800;
    letter-spacing:.1em;
    line-height:1;
    flex:none;
    padding:0;
    display:inline-block;
    align-self:flex-start;
  }
  .talk-step-num::before{
    content:"STEP ";
    opacity:.7;
  }
  /* If a label element exists separately */
  .talk-step-label{
    display:inline-block;
    font-size:10px;
    font-weight:800;
    color:var(--teal-d);
    letter-spacing:.12em;
    background:rgba(140,196,184,.1);
    padding:4px 10px;
    border-radius:var(--r-full);
    align-self:flex-start;
    margin-bottom:4px;
  }
  .talk-step-label span{
    opacity:.7;
    margin-left:4px;
  }
  .talk-step-body{margin:0}
  .talk-step-body h3{
    font-size:15px;
    margin-bottom:8px;
    line-height:1.4;
  }
  .talk-quote{
    padding:14px 16px;
    font-size:12.5px;
    line-height:1.7;
    margin-bottom:8px;
    font-style:normal;
    border-left-width:3px;
  }
  .talk-note{
    font-size:11px;
    padding-left:0;
    line-height:1.5;
    color:var(--muted);
  }

  /* ── Issue 5 (Image 4): benefit-card — 中央寄せ整理 ── */
  .benefit-card{
    padding:24px 20px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .benefit-icon{
    width:56px;
    height:56px;
    font-size:24px;
    margin:0 auto;
  }
  .benefit-icon svg{width:32px;height:32px}
  .benefit-card h3{
    font-size:16px;
    margin:0;
    line-height:1.4;
  }
  .benefit-card p{
    font-size:12.5px;
    line-height:1.7;
    margin:0;
    color:var(--text);
  }
  .benefit-list{
    width:100%;
    max-width:none;
    text-align:left;
    gap:6px;
    margin:0;
    padding:0;
  }
  .benefit-list li{
    font-size:12px;
    padding-left:18px;
    line-height:1.5;
    color:var(--text);
  }
  .benefit-list li::before{
    content:"✓";
    color:var(--teal-d);
    font-weight:900;
    left:0;
  }
}


/* ═══ v92: Mobile Typography & Alignment Polish ═══ */

/* ── d-br: PC用の意図的改行をスマホでは無効化 ── */
@media(max-width:768px){
  br.d-br{display:none}
}

/* ── テキスト要素の word-break / line-break 共通設定 ── */
@media(max-width:640px){
  body{
    word-break:auto-phrase;
    overflow-wrap:break-word;
    line-break:strict;
  }

  /* ── Hero: 全要素を確実に中央寄せ ── */
  .hero-copy{
    text-align:center !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
  }
  .hero-platform-label{
    text-align:center;
    margin:0 auto 14px;
    display:inline-block;
  }
  .hero-brand{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0 auto 10px;
  }
  .hero-logo-img{
    margin:0 auto;
    display:inline-block;
  }
  .hero-h1-img-wrap{
    text-align:center;
    margin:0 auto 14px;
    width:100%;
    line-height:0;
  }
  .hero-h1-img{
    margin:0 auto;
    display:inline-block;
  }
  .hero-lead,.hero-lead-detail,.hero-main-sub{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    max-width:90%;
    width:100%;
  }
  .hero-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0 auto 16px;
    gap:8px;
  }
  .hero-actions .btn{
    flex:1 1 0;
    max-width:160px;
  }
  .hero-badges{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    flex-wrap:wrap;
    gap:6px;
  }

  /* ── Section heads: 確実に中央寄せ ── */
  .section-head{
    text-align:center !important;
    margin-left:auto;
    margin-right:auto;
  }
  .section-pill{
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
  }

  /* ── Issues / Solution / Industry の bottom テキスト ── */
  .issues-bottom,
  .solution-bottom,
  .industry-bottom,
  .concept-bottom,
  .features-bottom-copy,
  .scene-note,
  .pricing-compare-note{
    text-align:center !important;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
  }

  /* ── Value cards (バリューカード5枚): 中央寄せ + 改行除去 ── */
  .value-card{
    text-align:center;
  }
  .value-card h3{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .value-card p{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }

  /* ── Solution step: 中央寄せ ── */
  .solution-step{
    text-align:center;
  }
  .solution-step h3,
  .solution-step p{
    text-align:center;
  }

  /* ── Issue card: タイトルは左寄せ（スキャン読み）、stop は中央 ── */
  .issue-v-card{
    text-align:left;
  }
  .issue-v-card h3,
  .issue-v-card .issue-v-list,
  .issue-v-card .issue-v-list li{
    text-align:left;
  }
  .issue-v-card .issue-stop{
    text-align:left;
    line-height:1.55;
  }

  /* ── Feature card: 中央寄せ ── */
  .feature-v-card{
    text-align:left;
  }
  .feature-title{
    justify-content:flex-start;
  }
  .feature-tagline{
    text-align:center;
    padding-top:14px;
    margin-top:14px;
  }

  /* ── Wa card: 左寄せ（既にOK、念のため固定） ── */
  .wa-v2-body{text-align:left}
  .wa-v2-body p{text-align:left}

  /* ── Name breakdown nb-conclusion: 確実に中央 ── */
  .nb-conclusion{
    text-align:center;
    line-height:1.6;
  }

  /* ── Pricing: 確実に中央 ── */
  .pricing-hero-card{
    text-align:center;
  }
  .pricing-lead{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .pricing-amount{
    justify-content:center;
    align-items:baseline;
  }
  .pricing-merit{
    text-align:center;
  }
  .pricing-merit h3,
  .pricing-merit p{
    text-align:center;
  }

  /* ── Scene card: 左寄せ統一 ── */
  .scene-card-title h3,
  .scene-card-title p{
    text-align:left;
  }
  .scene-block{
    text-align:left;
  }

  /* ── Contact: 確実に中央 ── */
  .contact-final{
    text-align:center;
  }
  .contact-final h2,
  .contact-final-lead{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .contact-final-form{
    text-align:left;
    margin-left:auto;
    margin-right:auto;
  }

  /* ── FAQ: 質問は左寄せ、答えも左寄せ ── */
  details.faq2 summary,
  .faq-answer2{
    text-align:left;
  }

  /* ── Saleskit: タイムラインは左寄せ ── */
  .talk-step-body h3,
  .talk-quote,
  .talk-note{
    text-align:left;
  }

  /* ── Solution bottom: 改行解消 ── */
  .solution-bottom{
    line-height:1.6;
  }
  .solution-bottom .accent{
    display:inline;
    white-space:nowrap;
  }

  /* ── Benefit list の改行整理 ── */
  .benefit-list li{
    text-align:left;
    line-height:1.55;
  }

  /* ── パンくず的な区切り文字の前後余白 ── */
  .hero-main-sub{
    line-height:1.7;
    letter-spacing:0;
  }

  /* ── 過度な改行を防ぐ ── */
  .pricing-amount{
    flex-wrap:nowrap;
    justify-content:center;
  }
  .pricing-yen,.pricing-num,.pricing-unit{
    white-space:nowrap;
  }
  .pricing-unit{
    flex-basis:100%;
    text-align:center;
    margin-top:4px;
  }
}

/* ── 380px以下: さらに調整 ── */
@media(max-width:380px){
  .hero-actions{flex-direction:column;width:90%;max-width:280px}
  .hero-actions .btn{width:100%;max-width:none;flex:none}
  .hero-lead{font-size:13px}
  .hero-lead-detail{font-size:11px}
}

/* ═══ PC側の念のため修正 ═══ */
@media(min-width:769px){
  /* Hero copy をデスクトップでも確実に中央寄せ */
  .hero-copy{
    text-align:center;
  }
  .hero-actions,
  .hero-badges{
    justify-content:center;
  }
  .hero-brand{
    justify-content:center;
  }

  /* Section heads 中央 */
  .section-head{text-align:center}

  /* d-br: PC では表示（PC専用改行） */
  br.d-br{display:inline}
}


/* ═══ v93: Brand Color Refinement (A案) ═══ */

:root{
  /* メインCTAグラデーション: ティール濃淡 + 透明感 */
  --grad-cta: linear-gradient(135deg,
    rgba(168,216,192,.92) 0%,
    rgba(140,196,184,.96) 50%,
    rgba(94,168,156,1) 100%);
  --grad-cta-hover: linear-gradient(135deg,
    rgba(168,216,192,1) 0%,
    rgba(120,180,170,1) 50%,
    rgba(80,155,144,1) 100%);
  --grad-cta-shadow: rgba(94,168,156,.32);

  /* セクションアクセント: ティール濃淡 (より淡い) */
  --grad-accent: linear-gradient(135deg,
    rgba(168,216,192,.7) 0%,
    rgba(140,196,184,.9) 100%);

  /* 5色フルグラデは「意味のある場所」専用に温存 */
  --grad-brand-full: linear-gradient(135deg,#f0a8b8 0%,#f5c8a8 25%,#a8d8c0 60%,#8cc4b8 80%,#7eb8d4 100%);
}

/* ───── プライマリボタン: ガラス質感のティール濃淡 ───── */
.btn-primary{
  background:var(--grad-cta);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 20px var(--grad-cta-shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:relative;
  overflow:hidden;
}
.btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,0) 50%);
  pointer-events:none;
}
.btn-primary:hover{
  background:var(--grad-cta-hover);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 28px rgba(94,168,156,.42);
}
.btn-primary:active{transform:translateY(0)}

/* ───── セカンダリボタン: ティールアウトライン + ホバーで塗り潰し ───── */
.btn-outline{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--teal-d);
  border:1.5px solid rgba(140,196,184,.4);
}
.btn-outline:hover{
  background:rgba(168,216,192,.12);
  border-color:var(--teal-d);
  color:var(--teal-d);
  transform:translateY(-1px);
}

/* ───── お問い合わせフォーム送信ボタン ───── */
.contact-final-form button{
  background:var(--grad-cta);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 20px var(--grad-cta-shadow);
}
.contact-final-form button:hover{
  background:var(--grad-cta-hover);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 28px rgba(94,168,156,.42);
}

/* ───── アクセントライン (料金カードの下線、メリットカード上線) ───── */
.pricing-amount::after,
.pricing-merit::before{
  background:var(--grad-accent);
}

/* ───── セクションピル: ティール基調へ ───── */
.section-pill,
.hero-platform-label,
.contact-final-kicker{
  background:linear-gradient(135deg,
    rgba(168,216,192,.18) 0%,
    rgba(140,196,184,.14) 100%);
  border:1px solid rgba(140,196,184,.18);
  color:var(--teal-d);
}

/* ───── ステップ番号: ティール濃淡 ───── */
.solution-step-num,
.talk-step-num{
  background:var(--grad-accent);
  box-shadow:0 2px 8px rgba(140,196,184,.3);
}

/* ───── grad-line: メイン部分はティール濃淡、両端のみブランド5色アクセント ───── */
.grad-line{
  background:linear-gradient(90deg,
    rgba(240,168,184,.5) 0%,
    rgba(168,216,192,.7) 25%,
    rgba(140,196,184,.85) 50%,
    rgba(168,216,192,.7) 75%,
    rgba(126,184,212,.5) 100%);
  opacity:.5;
}

/* ───── モバイル下部CTAバー: プライマリだけグラデ、他は控えめに ───── */
.mob-cta-item.mob-cta-primary{
  background:var(--grad-cta);
  box-shadow:0 4px 14px var(--grad-cta-shadow);
}

/* ───── デモタブ・シーンタブのアクティブ: ティール濃淡 ───── */
.demo-embed-tab.active,
.scene-tab.active,
.scene-tab[aria-selected="true"],
.sales-tab-v2.active{
  background:var(--grad-cta);
  color:#fff;
}

/* ───── Gradient text (グラデーションテキスト): ティール濃淡に統一 ───── */
/* ※ ロゴ画像のグラデは画像なので影響なし。テキストのみ調整 */
.hero-lead strong,
.gradient-text:not(.brand-full),
.solution-bottom .accent,
.concept-bottom span,
.nb-colon{
  background:linear-gradient(135deg,
    var(--teal) 0%,
    var(--teal-d) 60%,
    #4a9384 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* ───── 5色フルパレット温存箇所: 意味のあるカラフルさを残す ───── */
/* ワの4つの意味カード (.wa-v2-pink / orange / green / teal) はそのまま */
/* 業界シーンタブ・機能タブ・課題カード4色帯はそのまま */

/* ───── 価格セクション差額: アクセント色 (ピンク) を維持 ───── */
.pricing-compare-row .save,
.pricing-compare-row:last-child .save{
  color:var(--pink-text);
}

/* ───── 料金バッジ: ティール濃淡へ ───── */
.pricing-badge{
  background:var(--grad-accent);
  color:#fff;
}

/* ───── feature-main-icon の影もテーマ色化 ───── */
.feature-main-icon{
  box-shadow:0 4px 14px var(--grad-cta-shadow);
}


/* ═══ v94: Color Dots Design System ═══ */

/* ───── ベース: カラードットコンポーネント ───── */
.cdots{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
.cdots .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.cdots .dot.pink{background:#f0a8b8}
.cdots .dot.peach{background:#f5c8a8}
.cdots .dot.mint{background:#a8d8c0}
.cdots .dot.teal{background:#8cc4b8}
.cdots .dot.blue{background:#7eb8d4}

/* サイズバリエーション */
.cdots-sm .dot{width:6px;height:6px}
.cdots-lg .dot{width:10px;height:10px}

/* 配置バリエーション */
.cdots-stack{flex-direction:column;gap:3px}

/* ───── セクションピル: ドット先頭付き ───── */
.section-pill::before,
.hero-platform-label::before,
.contact-final-kicker::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--teal);
  margin-right:8px;
  vertical-align:middle;
  box-shadow:
    0 0 0 3px rgba(140,196,184,.15),
    0 0 0 6px rgba(140,196,184,.08);
  animation:dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(140,196,184,.15),0 0 0 6px rgba(140,196,184,.08)}
  50%{box-shadow:0 0 0 4px rgba(140,196,184,.22),0 0 0 8px rgba(140,196,184,.05)}
}

/* ───── ヘッダー: ブランドドット (装飾) ───── */
.header-inner::before{
  content:none;
}

/* ───── セクション見出し下の5色ドット装飾 ───── */
.section-head::after{
  content:"";
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  margin-top:16px;
  background-image:
    radial-gradient(circle at 0% 50%, #f0a8b8 0, #f0a8b8 4px, transparent 4px),
    radial-gradient(circle at 25% 50%, #f5c8a8 0, #f5c8a8 4px, transparent 4px),
    radial-gradient(circle at 50% 50%, #a8d8c0 0, #a8d8c0 4px, transparent 4px),
    radial-gradient(circle at 75% 50%, #8cc4b8 0, #8cc4b8 4px, transparent 4px),
    radial-gradient(circle at 100% 50%, #7eb8d4 0, #7eb8d4 4px, transparent 4px);
  background-size:48px 8px;
  background-position:center;
  background-repeat:no-repeat;
  height:8px;
}

/* ───── ヒーロー: 装飾的なカラードット背景 ───── */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    /* 左上の散らばったドット */
    radial-gradient(circle at 8% 12%, rgba(240,168,184,.35) 0, rgba(240,168,184,.35) 4px, transparent 4.5px),
    radial-gradient(circle at 14% 22%, rgba(245,200,168,.3) 0, rgba(245,200,168,.3) 3px, transparent 3.5px),
    radial-gradient(circle at 6% 32%, rgba(168,216,192,.32) 0, rgba(168,216,192,.32) 5px, transparent 5.5px),
    /* 右上のドット */
    radial-gradient(circle at 92% 18%, rgba(126,184,212,.28) 0, rgba(126,184,212,.28) 4px, transparent 4.5px),
    radial-gradient(circle at 96% 8%, rgba(140,196,184,.3) 0, rgba(140,196,184,.3) 3px, transparent 3.5px),
    radial-gradient(circle at 85% 28%, rgba(245,200,168,.25) 0, rgba(245,200,168,.25) 5px, transparent 5.5px),
    /* 下部のドット */
    radial-gradient(circle at 12% 88%, rgba(168,216,192,.3) 0, rgba(168,216,192,.3) 4px, transparent 4.5px),
    radial-gradient(circle at 88% 82%, rgba(240,168,184,.28) 0, rgba(240,168,184,.28) 5px, transparent 5.5px),
    radial-gradient(circle at 90% 92%, rgba(126,184,212,.25) 0, rgba(126,184,212,.25) 3px, transparent 3.5px);
}
.hero > *{position:relative;z-index:1}

/* ───── 各セクション: 角に控えめなドット装飾 ───── */
#issues,#features,#scenes,#pricing{
  position:relative;
}
#issues::after,
#features::after,
#scenes::after,
#pricing::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    radial-gradient(circle at 4% 8%, rgba(168,216,192,.18) 0, rgba(168,216,192,.18) 4px, transparent 4.5px),
    radial-gradient(circle at 96% 12%, rgba(245,200,168,.18) 0, rgba(245,200,168,.18) 3px, transparent 3.5px),
    radial-gradient(circle at 92% 88%, rgba(126,184,212,.16) 0, rgba(126,184,212,.16) 5px, transparent 5.5px),
    radial-gradient(circle at 8% 92%, rgba(240,168,184,.16) 0, rgba(240,168,184,.16) 4px, transparent 4.5px);
}
#issues > *,#features > *,#scenes > *,#pricing > *{position:relative;z-index:1}

/* ───── カードヘッダー: 5色ドット ───── */
.issue-v-card .issue-num{
  position:relative;
}
.issue-v-card .issue-num::after{
  content:"";
  position:absolute;
  bottom:-12px;
  left:50%;
  transform:translateX(-50%);
  width:24px;
  height:4px;
  background-image:
    radial-gradient(circle at 0% 50%, currentColor 0, currentColor 2px, transparent 2px),
    radial-gradient(circle at 50% 50%, currentColor 0, currentColor 2px, transparent 2px),
    radial-gradient(circle at 100% 50%, currentColor 0, currentColor 2px, transparent 2px);
  background-size:24px 4px;
  color:var(--issue-color);
  opacity:.4;
}

/* ───── 名前由来パネル: ドット装飾 ───── */
.nb-callout{
  position:relative;
}
.nb-num{
  position:relative;
}

/* ───── 価格カード: 上部に5色ドット帯 ───── */
.pricing-hero-card::before{
  content:"";
  position:absolute;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:8px;
  background-image:
    radial-gradient(circle at 0% 50%, #f0a8b8 0, #f0a8b8 3px, transparent 3px),
    radial-gradient(circle at 25% 50%, #f5c8a8 0, #f5c8a8 3px, transparent 3px),
    radial-gradient(circle at 50% 50%, #a8d8c0 0, #a8d8c0 3px, transparent 3px),
    radial-gradient(circle at 75% 50%, #8cc4b8 0, #8cc4b8 3px, transparent 3px),
    radial-gradient(circle at 100% 50%, #7eb8d4 0, #7eb8d4 3px, transparent 3px);
  background-size:60px 6px;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.6;
}

/* ───── デモ画面ツールバー: 既にdotsがあるので強調 ───── */
.demo-embed-dots i{
  background:var(--line);
  position:relative;
}
.demo-embed-dots i:nth-child(1){background:#f0a8b8}
.demo-embed-dots i:nth-child(2){background:#f5c8a8}
.demo-embed-dots i:nth-child(3){background:#a8d8c0}

/* ───── フッター: 5色ドット帯 ───── */
.footer::before{
  content:"";
  display:block;
  width:80px;
  height:8px;
  margin:0 auto 32px;
  background-image:
    radial-gradient(circle at 0% 50%, #f0a8b8 0, #f0a8b8 4px, transparent 4px),
    radial-gradient(circle at 25% 50%, #f5c8a8 0, #f5c8a8 4px, transparent 4px),
    radial-gradient(circle at 50% 50%, #a8d8c0 0, #a8d8c0 4px, transparent 4px),
    radial-gradient(circle at 75% 50%, #8cc4b8 0, #8cc4b8 4px, transparent 4px),
    radial-gradient(circle at 100% 50%, #7eb8d4 0, #7eb8d4 4px, transparent 4px);
  background-size:80px 8px;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.7;
}

/* ───── お問い合わせCTAセクション: 装飾ドット ───── */
.contact-final{
  position:relative;
  overflow:hidden;
}
.contact-final::before{
  content:"";
  position:absolute;
  top:-20px;
  right:-20px;
  width:120px;
  height:120px;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(240,168,184,.3) 0, rgba(240,168,184,.3) 5px, transparent 5px),
    radial-gradient(circle at 70% 50%, rgba(245,200,168,.25) 0, rgba(245,200,168,.25) 4px, transparent 4px),
    radial-gradient(circle at 50% 80%, rgba(168,216,192,.3) 0, rgba(168,216,192,.3) 6px, transparent 6px);
  pointer-events:none;
}
.contact-final::after{
  content:"";
  position:absolute;
  bottom:-30px;
  left:-30px;
  width:140px;
  height:140px;
  background-image:
    radial-gradient(circle at 30% 50%, rgba(126,184,212,.25) 0, rgba(126,184,212,.25) 5px, transparent 5px),
    radial-gradient(circle at 70% 30%, rgba(140,196,184,.3) 0, rgba(140,196,184,.3) 4px, transparent 4px),
    radial-gradient(circle at 60% 80%, rgba(168,216,192,.25) 0, rgba(168,216,192,.25) 6px, transparent 6px);
  pointer-events:none;
}
.contact-final > *{position:relative;z-index:1}

/* ───── スマホ: ドット装飾を控えめに ───── */
@media(max-width:640px){
  .hero::before{
    background-size:cover;
    opacity:.6;
  }
  #issues::after,#features::after,#scenes::after,#pricing::after{
    opacity:.5;
  }
  .contact-final::before,.contact-final::after{
    width:80px;
    height:80px;
  }
  .section-head::after{
    background-size:36px 6px;
    height:6px;
    margin-top:12px;
  }
  .footer::before{
    width:60px;
    height:6px;
    background-size:60px 6px;
    margin-bottom:24px;
  }
  .pricing-hero-card::before{
    width:48px;
    height:6px;
    background-size:48px 5px;
  }
}


/* ═══════════════════════════════════════════════════
   v95: System Mock Design Token Sync
   システムモックのトークン体系を反映
   ─ システム⇔サイトの世界観完全統一
   ═══════════════════════════════════════════════════ */

:root{
  /* ── システムのフルパレット (tw-color-*) ── */
  --tw-color-pink: #f0a8b8;
  --tw-color-pink-tint: #fde8ed;
  --tw-color-pink-deep: #d48a9a;
  --tw-color-pink-light: #fad2de;
  --tw-color-peach: #f5c8a8;
  --tw-color-peach-tint: #fdeedd;
  --tw-color-peach-deep: #e3a988;
  --tw-color-yellow: #f9dc8c;
  --tw-color-yellow-deep: #f5cc6a;
  --tw-color-yellow-tint: #fef5d8;
  --tw-color-amber: #ecb94a;
  --tw-color-mint: #a8d8c0;
  --tw-color-mint-light: #c6e8d8;
  --tw-color-mint-tint: #e0f0e6;
  --tw-color-mint-deep: #8cc4a8;
  --tw-color-teal: #8cc4b8;
  --tw-color-teal-tint: #d8eae5;
  --tw-color-teal-deep: #6ea69a;
  --tw-color-blue: #7eb8d4;
  --tw-color-blue-light: #c8def0;
  --tw-color-blue-deep: #5a9dc8;
  --tw-color-bg-subtle: #fafbfc;
  --tw-color-bg-soft: #f8f8f8;
  --tw-color-white: #ffffff;
  --tw-text-dark: #3d3330;
  --tw-text-mid: #7a6f6a;
  --tw-text-soft: #aba29d;
  --tw-text-faint: #d4ccc6;
  --tw-line-soft: #eef0f2;

  /* ── 主要ブランドグラデーション (システム互換) ── */
  --tw-gradient-mint-teal: linear-gradient(110deg,
    var(--tw-color-mint) 0%,
    #b8e2ce 50%,
    var(--tw-color-teal) 100%);
  --tw-gradient-mint-teal-hover: linear-gradient(110deg,
    var(--tw-color-teal) 0%,
    var(--tw-color-mint) 50%,
    var(--tw-color-teal-deep) 100%);
  --tw-gradient-brand-h: linear-gradient(90deg,
    var(--tw-color-pink) 0%, var(--tw-color-peach) 28%,
    var(--tw-color-yellow) 52%, var(--tw-color-mint) 78%,
    var(--tw-color-teal) 100%);

  /* ── システム互換のシャドウパターン ── */
  --tw-shadow-card:
    0 1px 2px rgba(50, 40, 35, 0.04),
    0 6px 14px -2px rgba(50, 40, 35, 0.06),
    0 20px 40px -8px rgba(60, 50, 45, 0.10);
  --tw-shadow-card-hover:
    0 1px 2px rgba(50, 40, 35, 0.04),
    0 6px 14px -2px rgba(50, 40, 35, 0.06),
    0 24px 48px -8px rgba(60, 50, 45, 0.16),
    0 48px 96px -24px rgba(50, 40, 35, 0.12);
  --tw-shadow-btn:
    0 4px 14px rgba(140, 196, 184, 0.28),
    0 1px 3px rgba(80, 140, 130, 0.10),
    inset 0 1px 1px rgba(255, 255, 255, 0.55);
  --tw-shadow-btn-hover:
    0 8px 24px rgba(140, 196, 184, 0.38),
    0 2px 4px rgba(80, 140, 130, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.75);

  /* ── テキストカラー上書き (システムと一致) ── */
  --ink: var(--tw-text-dark);
  --text: var(--tw-text-mid);
  --muted: var(--tw-text-soft);
  --line: var(--tw-line-soft);
}

/* ═══════════════════════════════════════════════════
   ボタン: システム互換 (110deg mint→teal)
   ═══════════════════════════════════════════════════ */
.btn-primary,
.contact-final-form button,
.mob-cta-item.mob-cta-primary{
  background: var(--tw-gradient-mint-teal) !important;
  color: #fff !important;
  border: none;
  box-shadow: var(--tw-shadow-btn) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  overflow: hidden;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary::before,
.contact-final-form button::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,0) 50%);
  pointer-events: none;
  border-radius: inherit;
}
.btn-primary:hover,
.contact-final-form button:hover{
  background: var(--tw-gradient-mint-teal-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--tw-shadow-btn-hover) !important;
}
.btn-primary:active{
  transform: translateY(0) scale(.985);
}

.btn-outline{
  background: var(--tw-color-white);
  border: 1.5px solid var(--tw-color-teal-tint);
  color: var(--tw-color-teal-deep);
  box-shadow: 0 1px 3px rgba(80, 140, 130, 0.06);
}
.btn-outline:hover{
  background: var(--tw-color-teal-tint);
  border-color: var(--tw-color-teal);
  color: var(--tw-color-teal-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(140, 196, 184, 0.18);
}

/* ═══════════════════════════════════════════════════
   カードシャドウ: システム3層シャドウに統一
   ═══════════════════════════════════════════════════ */
.card,
.issue-v-card,
.industry-scene-card,
.pricing-hero-card,
.saleskit-panel-v2,
.demo-embed-frame,
.solution-flow-panel,
.benefit-grid,
.concept-panel,
.contact-final{
  box-shadow: var(--tw-shadow-card);
  transition: box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1),
              transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover,
.issue-v-card:hover,
.industry-scene-card:hover,
.pricing-merit:hover{
  box-shadow: var(--tw-shadow-card-hover);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   セクションピル: システムのドットインジケーター強化
   ═══════════════════════════════════════════════════ */
.section-pill,
.hero-platform-label,
.contact-final-kicker{
  background: linear-gradient(135deg,
    rgba(168,216,192,.16),
    rgba(140,196,184,.10));
  border: 1px solid var(--tw-color-teal-tint);
  color: var(--tw-color-teal-deep);
  font-weight: 700;
  letter-spacing: .14em;
  padding: 7px 18px 7px 14px;
}
.section-pill::before,
.hero-platform-label::before,
.contact-final-kicker::before{
  background: var(--tw-color-teal);
  box-shadow:
    0 0 0 3px rgba(140,196,184,.20),
    0 0 0 6px rgba(140,196,184,.08);
}

/* ═══════════════════════════════════════════════════
   ヘッダー: システム調へ
   ═══════════════════════════════════════════════════ */
.site-header{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tw-line-soft);
}
.site-header.scrolled{
  box-shadow: 0 1px 2px rgba(50,40,35,.04), 0 4px 12px rgba(50,40,35,.04);
}

/* ═══════════════════════════════════════════════════
   テキストカラー全体反映
   ═══════════════════════════════════════════════════ */
body, p, li{ color: var(--tw-text-mid); }
h1,h2,h3,h4,h5,h6{ color: var(--tw-text-dark); }
.muted,.text-muted{ color: var(--tw-text-soft); }

/* ═══════════════════════════════════════════════════
   グラデーションテキスト: mint→teal で統一
   ═══════════════════════════════════════════════════ */
.gradient-text:not(.brand-full),
.hero-lead strong,
.solution-bottom .accent,
.concept-bottom span,
.nb-colon{
  background: linear-gradient(135deg,
    var(--tw-color-mint) 0%,
    var(--tw-color-teal) 60%,
    var(--tw-color-teal-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════════════════
   カラードット: システムの diagDotPulse 適用
   ═══════════════════════════════════════════════════ */
@keyframes diagDotPulse{
  0%, 100%{ opacity: 0.6; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.15); }
}

.cdots .dot,
.demo-embed-dots i{
  animation: diagDotPulse 2.4s ease-in-out infinite;
  box-shadow: 0 1px 3px rgba(50,40,35,.08);
}
.cdots .dot:nth-child(2){ animation-delay: .3s; }
.cdots .dot:nth-child(3){ animation-delay: .6s; }
.cdots .dot:nth-child(4){ animation-delay: .9s; }
.cdots .dot:nth-child(5){ animation-delay: 1.2s; }

/* ═══════════════════════════════════════════════════
   システム互換: 5色帯 (gradient-brand-h)
   ═══════════════════════════════════════════════════ */
.section-head::after{
  background:
    radial-gradient(circle at 0% 50%, #f0a8b8 0, #f0a8b8 4px, transparent 4.5px),
    radial-gradient(circle at 25% 50%, #f5c8a8 0, #f5c8a8 4px, transparent 4.5px),
    radial-gradient(circle at 50% 50%, #f9dc8c 0, #f9dc8c 4px, transparent 4.5px),
    radial-gradient(circle at 75% 50%, #a8d8c0 0, #a8d8c0 4px, transparent 4.5px),
    radial-gradient(circle at 100% 50%, #8cc4b8 0, #8cc4b8 4px, transparent 4.5px);
  background-size: 48px 8px;
}
.footer::before{
  background:
    radial-gradient(circle at 0% 50%, #f0a8b8 0, #f0a8b8 4px, transparent 4.5px),
    radial-gradient(circle at 25% 50%, #f5c8a8 0, #f5c8a8 4px, transparent 4.5px),
    radial-gradient(circle at 50% 50%, #f9dc8c 0, #f9dc8c 4px, transparent 4.5px),
    radial-gradient(circle at 75% 50%, #a8d8c0 0, #a8d8c0 4px, transparent 4.5px),
    radial-gradient(circle at 100% 50%, #8cc4b8 0, #8cc4b8 4px, transparent 4.5px);
  background-size: 80px 8px;
}
.pricing-hero-card::before{
  background:
    radial-gradient(circle at 0% 50%, #f0a8b8 0, #f0a8b8 3px, transparent 3.5px),
    radial-gradient(circle at 25% 50%, #f5c8a8 0, #f5c8a8 3px, transparent 3.5px),
    radial-gradient(circle at 50% 50%, #f9dc8c 0, #f9dc8c 3px, transparent 3.5px),
    radial-gradient(circle at 75% 50%, #a8d8c0 0, #a8d8c0 3px, transparent 3.5px),
    radial-gradient(circle at 100% 50%, #8cc4b8 0, #8cc4b8 3px, transparent 3.5px);
  background-size: 60px 6px;
}

/* ═══════════════════════════════════════════════════
   ヒーロー: システムのログイン画面風グラデ装飾
   ═══════════════════════════════════════════════════ */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(240,168,184,.10) 0%, rgba(240,168,184,0) 60%),
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(126,184,212,.08) 0%, rgba(126,184,212,0) 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(168,216,192,.08) 0%, rgba(168,216,192,0) 60%);
}
.hero > *{ position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════
   ステップ番号バッジ・アイコン背景: mint-teal 統一
   ═══════════════════════════════════════════════════ */
.solution-step-num,
.talk-step-num,
.feature-main-icon{
  background: var(--tw-gradient-mint-teal);
  box-shadow: 0 4px 12px rgba(140,196,184,.32),
              inset 0 1px 1px rgba(255,255,255,.5);
}

/* タブ active: mint-teal 統一 */
.demo-embed-tab.active,
.scene-tab.active,
.scene-tab[aria-selected="true"],
.sales-tab-v2.active{
  background: var(--tw-gradient-mint-teal);
  color: #fff;
  box-shadow: 0 3px 10px rgba(140,196,184,.32);
}

/* 価格バッジ: mint-teal */
.pricing-badge{
  background: var(--tw-gradient-mint-teal);
  color: #fff;
  box-shadow: 0 3px 10px rgba(140,196,184,.32);
}

/* ═══════════════════════════════════════════════════
   border-radius: システム互換 (8/14/16 多用)
   ═══════════════════════════════════════════════════ */
.btn,
.btn-primary,
.btn-outline,
.contact-final-form button,
.mob-cta-item{
  border-radius: 14px;
}
.contact-final-form input,
.contact-final-form select,
.contact-final-form textarea{
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════
   システム調アニメーション
   ═══════════════════════════════════════════════════ */
*{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   モバイル調整
   ═══════════════════════════════════════════════════ */
@media(max-width: 640px){
  .section-head::after{
    background-size: 36px 6px;
  }
  .pricing-hero-card::before{
    background-size: 48px 5px;
  }
  .footer::before{
    background-size: 60px 6px;
  }
}


/* ═══════════════════════════════════════════════════
   v96: Dot Cleanup & Effect Refinement
   システム互換: 単独ドット + 1.6sパルスのみ
   ═══════════════════════════════════════════════════ */

/* ───── 5色連続ドット帯を全て削除 ───── */
.section-head::after{ display: none !important; }
.footer::before{ display: none !important; }
.pricing-hero-card::before{ display: none !important; }
.hero::before{ display: none !important; }

/* セクション四隅のドット装飾も削除 */
#issues::after,
#features::after,
#scenes::after,
#pricing::after{
  display: none !important;
}

/* 課題カード番号バッジの下線ドット削除 */
.issue-v-card .issue-num::after{ display: none !important; }

/* CTAコーナーのドット群削除 */
.contact-final::before,
.contact-final::after{ display: none !important; }

/* デモ画面のドットを5色から元の単色に */
.demo-embed-dots i:nth-child(1),
.demo-embed-dots i:nth-child(2),
.demo-embed-dots i:nth-child(3){
  background: var(--tw-line-soft, #eef0f2) !important;
  animation: none !important;
}

/* ───── システム互換: 単独ドット (diagDotPulse 1.6s) ───── */
@keyframes diagDotPulse{
  0%, 100%{ opacity: 0.6; }
  50%{ opacity: 1; }
}

/* セクションピルのドット: システム互換 */
.section-pill,
.hero-platform-label,
.contact-final-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
}
.section-pill::before,
.hero-platform-label::before,
.contact-final-kicker::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8cc4b8;
  margin-right: 0;
  vertical-align: middle;
  box-shadow: none;
  animation: diagDotPulse 1.6s ease-in-out infinite;
}

/* ───── エフェクト整理: シンプルで上品に ───── */

/* ヒーロー: 装飾レイヤーをシンプルに */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(168,216,192,.08) 0%, rgba(168,216,192,0) 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(126,184,212,.06) 0%, rgba(126,184,212,0) 60%);
}

/* セクションの控えめなアクセント (角ドットでなく薄いグラデで) */
section{
  position: relative;
}

/* ───── ホバーエフェクトを軽量化 ───── */
.btn,
.btn-primary,
.btn-outline{
  transition: background .25s cubic-bezier(0.4,0,0.2,1),
              transform .25s cubic-bezier(0.4,0,0.2,1),
              box-shadow .25s cubic-bezier(0.4,0,0.2,1);
}

/* カード: 過剰なshadowを抑制してスッキリ */
.issue-v-card,
.industry-scene-card,
.pricing-hero-card,
.saleskit-panel-v2,
.demo-embed-frame,
.solution-flow-panel,
.benefit-grid,
.concept-panel{
  box-shadow: 0 1px 2px rgba(50,40,35,.03),
              0 4px 12px -2px rgba(50,40,35,.04);
  transition: box-shadow .3s cubic-bezier(0.4,0,0.2,1),
              transform .3s cubic-bezier(0.4,0,0.2,1);
}
.issue-v-card:hover,
.industry-scene-card:hover,
.pricing-merit:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(50,40,35,.04),
              0 8px 24px -4px rgba(50,40,35,.10);
}

/* ───── モバイル: ドット位置を確実に表示 ───── */
@media(max-width: 640px){
  .section-pill,
  .hero-platform-label,
  .contact-final-kicker{
    padding: 6px 14px;
    gap: 6px;
  }
  .section-pill::before,
  .hero-platform-label::before,
  .contact-final-kicker::before{
    width: 7px;
    height: 7px;
  }
}

/* ───── システム互換: アクティブインジケーター ───── */
/* システムでは active 状態に単独ドットを使う */
.scene-tab.active::before,
.scene-tab[aria-selected="true"]::before,
.demo-embed-tab.active::before,
.sales-tab-v2.active::before{
  display: none; /* システムにはないので非表示 */
}

/* ───── 微細な動きを追加: 控えめなフェードアップ ───── */
.reveal{
  transition: opacity .6s cubic-bezier(0.4,0,0.2,1),
              transform .6s cubic-bezier(0.4,0,0.2,1);
}
.reveal:not(.is-visible):not(.visible){
  opacity: 0;
  transform: translateY(16px);
}
.reveal.is-visible,
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}

/* ───── ボタンのリップル・シャイン効果を維持 ───── */
.btn-primary::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,0) 50%);
  pointer-events: none;
  border-radius: inherit;
}


/* ═══════════════════════════════════════════════════
   v97: Pill Dots — All classes covered + section colors
   ═══════════════════════════════════════════════════ */

/* セクションラベル系すべてにドット適用 */
.section-pill,
.section-kicker,
.concept-pill,
.hero-platform-label,
.contact-final-kicker{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 14px;
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--tw-line-soft);
  border-radius: 999px;
  color: var(--tw-color-teal-deep);
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.section-pill::before,
.section-kicker::before,
.concept-pill::before,
.hero-platform-label::before,
.contact-final-kicker::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pill-dot, #8cc4b8);
  vertical-align: middle;
  flex: 0 0 8px;
  animation: diagDotPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 3px var(--pill-dot-halo, rgba(140,196,184,.15));
}

/* セクションごとに色を変える: ブランド5色を意味的に配置 */
#issues .section-pill,
#issues .section-kicker{
  --pill-dot: #e56f91;
  --pill-dot-halo: rgba(229,111,145,.16);
  color: #c5557a;
}
#connect .section-pill,
#connect .section-kicker{
  --pill-dot: #a8d8c0;
  --pill-dot-halo: rgba(168,216,192,.20);
  color: var(--tw-color-teal-deep);
}
#features .section-pill,
#features .section-kicker{
  --pill-dot: #8cc4b8;
  --pill-dot-halo: rgba(140,196,184,.20);
  color: var(--tw-color-teal-deep);
}
#concept .concept-pill,
#concept .section-pill{
  --pill-dot: #f5c8a8;
  --pill-dot-halo: rgba(245,200,168,.22);
  color: #c4895a;
}
#scenes .section-pill,
#scenes .section-kicker{
  --pill-dot: #7eb8d4;
  --pill-dot-halo: rgba(126,184,212,.20);
  color: #4a8db0;
}
#demo .section-pill,
#demo .section-kicker{
  --pill-dot: #8cc4b8;
  --pill-dot-halo: rgba(140,196,184,.20);
}
#pricing .section-pill,
#pricing .section-kicker{
  --pill-dot: #f5cc6a;
  --pill-dot-halo: rgba(245,204,106,.22);
  color: #b88820;
}
#faq .section-pill,
#faq .section-kicker{
  --pill-dot: #a8d8c0;
  --pill-dot-halo: rgba(168,216,192,.20);
  color: var(--tw-color-teal-deep);
}
#saleskit .section-pill,
#saleskit .section-kicker{
  --pill-dot: #7eb8d4;
  --pill-dot-halo: rgba(126,184,212,.20);
  color: #4a8db0;
}
.hero-platform-label{
  --pill-dot: #8cc4b8;
  --pill-dot-halo: rgba(140,196,184,.20);
}
.contact-final-kicker{
  --pill-dot: #e56f91;
  --pill-dot-halo: rgba(229,111,145,.18);
  color: #c5557a;
}

/* ───── スマホでも確実に表示 ───── */
@media(max-width: 640px){
  .section-pill,
  .section-kicker,
  .concept-pill,
  .hero-platform-label,
  .contact-final-kicker{
    padding: 6px 14px 6px 12px;
    gap: 7px;
    font-size: 10px;
    letter-spacing: .14em;
  }
  .section-pill::before,
  .section-kicker::before,
  .concept-pill::before,
  .hero-platform-label::before,
  .contact-final-kicker::before{
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    box-shadow: 0 0 0 2.5px var(--pill-dot-halo, rgba(140,196,184,.15));
  }
}

/* ───── パルスアニメーション (システム互換) ───── */
@keyframes diagDotPulse{
  0%, 100%{ opacity: 0.6; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.1); }
}


/* ═══════════════════════════════════════════════════
   v98: System-matched 6-color brand dots
   ─ モックアップ画面で使われる6色横並びドット
   ─ ロゴ周辺・見出し下の区切りインジケーター
   ═══════════════════════════════════════════════════ */

.brand-dots{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px auto 16px;
  padding: 0;
  width: fit-content;
}
.brand-dots span{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bd-color);
  box-shadow: 0 1px 3px rgba(50, 40, 35, 0.08);
  opacity: 0.85;
}
.brand-dots span:nth-child(1){ --bd-color: #f0a8b8; } /* pink */
.brand-dots span:nth-child(2){ --bd-color: #f5c8a8; } /* peach */
.brand-dots span:nth-child(3){ --bd-color: #f9dc8c; } /* yellow */
.brand-dots span:nth-child(4){ --bd-color: #a8d8c0; } /* mint */
.brand-dots span:nth-child(5){ --bd-color: #8cc4b8; } /* teal */
.brand-dots span:nth-child(6){ --bd-color: #7eb8d4; } /* blue */

/* ───── ヒーロー: ロゴとタグラインの間 ───── */
.hero-copy .brand-dots{
  margin: 14px auto 16px;
}

/* ───── section-head: ピル下、h2上 ───── */
.section-head .brand-dots{
  margin: 12px auto 18px;
}

/* ───── 微細な順番アニメーション (システム互換: 控えめ) ───── */
@keyframes brandDotFade{
  0%, 100%{ opacity: 0.6; }
  50%{ opacity: 1; }
}
.brand-dots span{
  animation: brandDotFade 2.4s ease-in-out infinite;
}
.brand-dots span:nth-child(1){ animation-delay: 0s; }
.brand-dots span:nth-child(2){ animation-delay: .15s; }
.brand-dots span:nth-child(3){ animation-delay: .30s; }
.brand-dots span:nth-child(4){ animation-delay: .45s; }
.brand-dots span:nth-child(5){ animation-delay: .60s; }
.brand-dots span:nth-child(6){ animation-delay: .75s; }

/* ───── モバイル: 少し小さく ───── */
@media(max-width: 640px){
  .brand-dots{
    gap: 5px;
    margin: 10px auto 14px;
  }
  .brand-dots span{
    width: 7px;
    height: 7px;
  }
}

/* ───── 一部位置で非表示にしたい場合のための予約クラス ───── */
.brand-dots.hidden{ display: none; }


/* ═══════════════════════════════════════════════════
   v99: 6-Color Visual Language Throughout
   ─ システム互換の6色をサイト全体のリスト・要素に展開
   ─ ピンク→ピーチ→イエロー→ミント→ティール→ブルー
   ═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   A. ベネフィットリスト: チェックマーク6色化
   ───────────────────────────────────── */
.benefit-list{
  counter-reset: benefit-item;
}
.benefit-list li{
  counter-increment: benefit-item;
  position: relative;
  padding-left: 22px;
}
.benefit-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  background: var(--bli-color, #8cc4b8);
  box-shadow: 0 1px 3px var(--bli-shadow, rgba(140,196,184,.32));
  margin-top: 2px;
}
.benefit-list li:nth-child(6n+1)::before{ --bli-color:#e56f91; --bli-shadow:rgba(229,111,145,.32); }
.benefit-list li:nth-child(6n+2)::before{ --bli-color:#e2a988; --bli-shadow:rgba(226,169,136,.32); }
.benefit-list li:nth-child(6n+3)::before{ --bli-color:#d89a2a; --bli-shadow:rgba(216,154,42,.32); }
.benefit-list li:nth-child(6n+4)::before{ --bli-color:#4aaa68; --bli-shadow:rgba(74,170,104,.32); }
.benefit-list li:nth-child(6n+5)::before{ --bli-color:#5ea89c; --bli-shadow:rgba(94,168,156,.32); }
.benefit-list li:nth-child(6n)::before{ --bli-color:#5a9dc8; --bli-shadow:rgba(90,157,200,.32); }

/* ─────────────────────────────────────
   B. 機能リスト: 矢印を6色化 (Feature機能の中で)
   ───────────────────────────────────── */
.feature-v-list li{
  position: relative;
  padding-left: 24px;
}
.feature-v-list li::before{
  content: "→";
  position: absolute;
  left: 0;
  font-weight: 900;
  font-size: 14px;
  color: var(--fli-color, var(--feat-color));
}
.feature-v-list li:nth-child(6n+1)::before{ color: #e56f91; }
.feature-v-list li:nth-child(6n+2)::before{ color: #e2a988; }
.feature-v-list li:nth-child(6n+3)::before{ color: #d89a2a; }
.feature-v-list li:nth-child(6n+4)::before{ color: #4aaa68; }
.feature-v-list li:nth-child(6n+5)::before{ color: #5ea89c; }
.feature-v-list li:nth-child(6n)::before{ color: #5a9dc8; }

/* ─────────────────────────────────────
   C. 課題リスト: バレット6色 (各カード内)
   ───────────────────────────────────── */
.issue-v-card .issue-v-list li::before{
  background: transparent;
  font-size: 24px;
  line-height: 1;
  top: -2px;
}
/* 各カードのリスト項目を順に6色 (issue色も尊重しつつ) */
.issue-v-card:nth-child(1) .issue-v-list li:nth-child(1)::before{ color: #e56f91; }
.issue-v-card:nth-child(1) .issue-v-list li:nth-child(2)::before{ color: #e2a988; }
.issue-v-card:nth-child(1) .issue-v-list li:nth-child(3)::before{ color: #d89a2a; }
.issue-v-card:nth-child(2) .issue-v-list li:nth-child(1)::before{ color: #e2a988; }
.issue-v-card:nth-child(2) .issue-v-list li:nth-child(2)::before{ color: #d89a2a; }
.issue-v-card:nth-child(2) .issue-v-list li:nth-child(3)::before{ color: #4aaa68; }
.issue-v-card:nth-child(3) .issue-v-list li:nth-child(1)::before{ color: #4aaa68; }
.issue-v-card:nth-child(3) .issue-v-list li:nth-child(2)::before{ color: #5ea89c; }
.issue-v-card:nth-child(3) .issue-v-list li:nth-child(3)::before{ color: #5a9dc8; }
.issue-v-card:nth-child(4) .issue-v-list li:nth-child(1)::before{ color: #5ea89c; }
.issue-v-card:nth-child(4) .issue-v-list li:nth-child(2)::before{ color: #5a9dc8; }
.issue-v-card:nth-child(4) .issue-v-list li:nth-child(3)::before{ color: #705fc1; }

/* ─────────────────────────────────────
   D. シーンブロック: 4要素を6色から選択
   ───────────────────────────────────── */
.scene-block:nth-child(4n+1){
  border-left: 3px solid #e56f91;
}
.scene-block:nth-child(4n+2){
  border-left: 3px solid #e2a988;
}
.scene-block:nth-child(4n+3){
  border-left: 3px solid #4aaa68;
}
.scene-block:nth-child(4n){
  border-left: 3px solid #5a9dc8;
}
.scene-block-top h4{
  position: relative;
  padding-left: 14px;
}
.scene-block-top h4::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

/* ─────────────────────────────────────
   E. FAQ 番号バッジ: 順に6色化
   ───────────────────────────────────── */
.faq-list2{
  counter-reset: faq-item;
}
details.faq2{
  counter-increment: faq-item;
}
details.faq2 .qmark2{
  background: var(--faq-color, #8cc4b8);
  box-shadow: 0 2px 6px var(--faq-shadow, rgba(140,196,184,.28));
}
details.faq2:nth-child(6n+1) .qmark2{ --faq-color:#e56f91; --faq-shadow:rgba(229,111,145,.28); }
details.faq2:nth-child(6n+2) .qmark2{ --faq-color:#e2a988; --faq-shadow:rgba(226,169,136,.28); }
details.faq2:nth-child(6n+3) .qmark2{ --faq-color:#d89a2a; --faq-shadow:rgba(216,154,42,.28); }
details.faq2:nth-child(6n+4) .qmark2{ --faq-color:#4aaa68; --faq-shadow:rgba(74,170,104,.28); }
details.faq2:nth-child(6n+5) .qmark2{ --faq-color:#5ea89c; --faq-shadow:rgba(94,168,156,.28); }
details.faq2:nth-child(6n) .qmark2{ --faq-color:#5a9dc8; --faq-shadow:rgba(90,157,200,.28); }

/* ─────────────────────────────────────
   F. 営業キット ステップ番号: 6色順
   ───────────────────────────────────── */
.talk-step:nth-child(6n+1) .talk-step-num{
  background: linear-gradient(135deg, #e56f91, #d48a9a);
  box-shadow: 0 4px 12px rgba(229,111,145,.28);
}
.talk-step:nth-child(6n+2) .talk-step-num{
  background: linear-gradient(135deg, #e2a988, #d6906a);
  box-shadow: 0 4px 12px rgba(226,169,136,.28);
}
.talk-step:nth-child(6n+3) .talk-step-num{
  background: linear-gradient(135deg, #f5cc6a, #d89a2a);
  box-shadow: 0 4px 12px rgba(245,204,106,.28);
}
.talk-step:nth-child(6n+4) .talk-step-num{
  background: linear-gradient(135deg, #a8d8c0, #4aaa68);
  box-shadow: 0 4px 12px rgba(74,170,104,.28);
}
.talk-step:nth-child(6n+5) .talk-step-num{
  background: linear-gradient(135deg, #8cc4b8, #5ea89c);
  box-shadow: 0 4px 12px rgba(140,196,184,.28);
}
.talk-step:nth-child(6n) .talk-step-num{
  background: linear-gradient(135deg, #7eb8d4, #5a9dc8);
  box-shadow: 0 4px 12px rgba(126,184,212,.28);
}
/* talk-quote 左ボーダーも対応 */
.talk-step:nth-child(6n+1) .talk-quote{ border-left-color: #e56f91; }
.talk-step:nth-child(6n+2) .talk-quote{ border-left-color: #e2a988; }
.talk-step:nth-child(6n+3) .talk-quote{ border-left-color: #d89a2a; }
.talk-step:nth-child(6n+4) .talk-quote{ border-left-color: #4aaa68; }
.talk-step:nth-child(6n+5) .talk-quote{ border-left-color: #5ea89c; }
.talk-step:nth-child(6n) .talk-quote{ border-left-color: #5a9dc8; }

/* ─────────────────────────────────────
   G. ベネフィット4カード: アイコン背景を順番に色変更
   ───────────────────────────────────── */
.benefit-card:nth-child(4n+1) .benefit-icon{
  background: linear-gradient(135deg, rgba(240,168,184,.15), rgba(240,168,184,.08));
  color: #d4647a;
}
.benefit-card:nth-child(4n+2) .benefit-icon{
  background: linear-gradient(135deg, rgba(245,200,168,.18), rgba(245,200,168,.08));
  color: #c4895a;
}
.benefit-card:nth-child(4n+3) .benefit-icon{
  background: linear-gradient(135deg, rgba(168,216,192,.18), rgba(140,196,184,.08));
  color: #5ea89c;
}
.benefit-card:nth-child(4n) .benefit-icon{
  background: linear-gradient(135deg, rgba(126,184,212,.18), rgba(126,184,212,.08));
  color: #4a8db0;
}

/* ─────────────────────────────────────
   H. Footer 上端のブランドドット (HTML追加なし、CSS のみ)
   ───────────────────────────────────── */
.footer::before{
  display: flex !important;
  content: "";
  width: 84px;
  height: 8px;
  margin: 0 auto 24px;
  background:
    radial-gradient(circle 4px at 6px 50%, #f0a8b8 100%, transparent 100%),
    radial-gradient(circle 4px at 22px 50%, #f5c8a8 100%, transparent 100%),
    radial-gradient(circle 4px at 38px 50%, #f9dc8c 100%, transparent 100%),
    radial-gradient(circle 4px at 54px 50%, #a8d8c0 100%, transparent 100%),
    radial-gradient(circle 4px at 70px 50%, #8cc4b8 100%, transparent 100%),
    radial-gradient(circle 4px at 84px 50%, #7eb8d4 100%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
  background-position: 0 0, 16px 0, 32px 0, 48px 0, 64px 0, 80px 0;
  opacity: .8;
}

/* ─────────────────────────────────────
   I. 統一ホバー: カードを6色テーマで微細に
   ───────────────────────────────────── */
.value-card{
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(0.4,0,0.2,1);
}
.value-card::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vc-color);
  opacity: 0;
  transition: opacity .25s ease;
}
.value-card:hover::after{ opacity: .8; }
.value-card:nth-child(5n+1){ --vc-color: #e56f91; }
.value-card:nth-child(5n+2){ --vc-color: #e2a988; }
.value-card:nth-child(5n+3){ --vc-color: #d89a2a; }
.value-card:nth-child(5n+4){ --vc-color: #5ea89c; }
.value-card:nth-child(5n){ --vc-color: #5a9dc8; }

/* ─────────────────────────────────────
   J. ページ上端: 6色グラデーションプログレスバー
   ───────────────────────────────────── */
body::before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #f0a8b8 0%,
    #f5c8a8 20%,
    #f9dc8c 40%,
    #a8d8c0 60%,
    #8cc4b8 80%,
    #7eb8d4 100%);
  z-index: 200;
  opacity: .6;
}

/* ─────────────────────────────────────
   K. nb-callout (名前由来の数字バッジ): すでに4色だが微調整
   ───────────────────────────────────── */
.nb-callout:nth-child(4n+1) .nb-num{
  background: linear-gradient(135deg, #e56f91, #d48a9a) !important;
  box-shadow: 0 2px 6px rgba(229,111,145,.32);
}
.nb-callout:nth-child(4n+2) .nb-num{
  background: linear-gradient(135deg, #f0a040, #d89a2a) !important;
  box-shadow: 0 2px 6px rgba(240,160,64,.32);
}
.nb-callout:nth-child(4n+3) .nb-num{
  background: linear-gradient(135deg, #4aaa68, #3a9050) !important;
  box-shadow: 0 2px 6px rgba(74,170,104,.32);
}
.nb-callout:nth-child(4n) .nb-num{
  background: linear-gradient(135deg, #5ea89c, #4a8d82) !important;
  box-shadow: 0 2px 6px rgba(94,168,156,.32);
}

/* ─────────────────────────────────────
   L. モバイル微調整
   ───────────────────────────────────── */
@media(max-width: 640px){
  body::before{
    height: 2.5px;
  }
  .benefit-list li::before{
    width: 14px;
    height: 14px;
    font-size: 8px;
  }
  .scene-block-top h4{
    padding-left: 12px;
  }
  .scene-block-top h4::before{
    width: 5px;
    height: 5px;
  }
}


/* ═══════════════════════════════════════════════════
   v100: Single Header Logo + Scenes Card Fix
   ═══════════════════════════════════════════════════ */

/* ───── Header logo: single image ───── */
.brand{
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
  min-width: 0;
}
.header-logo{
  height: 36px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(50,40,35,.06));
}
/* Hide old mark/text approach if any survives */
.brand .mark,
.brand > span:not(.header-logo){
  display: none !important;
}

@media(max-width: 960px){
  .header-logo{ height: 32px; }
}
@media(max-width: 640px){
  .header-logo{ height: 30px; }
}
@media(max-width: 380px){
  .header-logo{ height: 26px; }
}

/* ───── Scenes card: 飲食業ズレ修正 ───── */
/* tab列とカードがwidth不一致になる問題を解消 */
#scenes .container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.scene-tabs{
  width: 100%;
  box-sizing: border-box;
}

.industry-scene-card{
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* タブとカードを同じwrapperにする横ずれ対策 */
.scenes-wrap,
.industry-scenes-wrap,
.scene-content{
  width: 100%;
  display: block;
}

/* タブのactiveインジケーター不揃い修正 */
.scene-tab,
.scene-tab.active{
  vertical-align: middle;
  line-height: 1;
}

@media(max-width: 640px){
  /* scene-tabs は横スクロール、card は通常表示で両方を画面幅にフィット */
  .scene-tabs{
    margin: 0 -16px 16px;
    padding: 0 16px 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .scene-tabs::-webkit-scrollbar{ display: none; }

  /* カード自体は画面幅から左右margin引いた幅 */
  .industry-scene-card{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 18px 16px;
    border-radius: 14px;
  }
}


/* ═══════════════════════════════════════════════════
   v101: Header Fixed + sr-only fix + Footer Compact
   ═══════════════════════════════════════════════════ */

/* ───── 1. ヘッダー: position: fixed で確実に固定 ───── */
.site-header{
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(168,216,192,.18);
  box-shadow: 0 1px 2px rgba(50,40,35,.04);
}
.site-header.scrolled{
  box-shadow: 0 2px 12px rgba(50,40,35,.06);
}

/* body にヘッダー分のpadding-top */
body{
  padding-top: var(--header-h, 64px);
}
@media(max-width: 640px){
  body{
    padding-top: 56px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important;
  }
  .site-header{
    height: 56px;
  }
  .header-inner{
    height: 56px !important;
  }
}

/* hero の padding 調整（bodyの padding-top を考慮） */
.hero{
  padding-top: 24px;
}
@media(max-width: 640px){
  .hero{
    padding-top: 16px;
  }
}

/* ───── 2. sr-only: 確実に画面外へ ───── */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* h1 inside hero: only the image should be visible */
.hero-h1-img-wrap{
  display: block;
  line-height: 0;
  font-size: 0;
  color: transparent;
}
.hero-h1-img-wrap > img{
  font-size: initial;
  color: initial;
}

/* ───── 3. フッター: スマホで2列横並び + コンパクト化 ───── */
@media(max-width: 640px){
  .footer{
    padding: 32px 0 24px !important;
  }
  .footer-inner-v2{
    gap: 20px;
  }

  /* ブランド + コラム を縦配置から再構成 */
  .footer-cols{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    text-align: left !important;
    padding-bottom: 20px;
  }

  /* ブランドコラムは全幅、中央寄せ */
  .footer-brand-col{
    grid-column: 1 / -1 !important;
    text-align: center;
  }
  .footer-brand{
    justify-content: center !important;
  }
  .footer-tagline{
    text-align: center;
    margin-bottom: 0;
  }

  /* 他の3コラム: 2列に再配置 */
  .footer-col:not(.footer-brand-col){
    text-align: left !important;
  }
  .footer-col:not(.footer-brand-col) ul{
    align-items: flex-start !important;
  }
  .footer-col h4{
    font-size: 11px !important;
    margin-bottom: 10px !important;
  }
  .footer-col ul{
    gap: 6px;
  }
  .footer-col a{
    font-size: 12px;
  }

  /* footer-bottom: コンパクト */
  .footer-bottom{
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    padding-top: 16px;
    border-top: 1px solid var(--tw-line-soft);
  }

  /* footer::before の6色ドット帯を縮小 */
  .footer::before{
    width: 60px !important;
    height: 6px !important;
    margin: 0 auto 16px !important;
    background:
      radial-gradient(circle 3px at 4px 50%, #f0a8b8 100%, transparent 100%),
      radial-gradient(circle 3px at 16px 50%, #f5c8a8 100%, transparent 100%),
      radial-gradient(circle 3px at 28px 50%, #f9dc8c 100%, transparent 100%),
      radial-gradient(circle 3px at 40px 50%, #a8d8c0 100%, transparent 100%),
      radial-gradient(circle 3px at 52px 50%, #8cc4b8 100%, transparent 100%),
      radial-gradient(circle 3px at 60px 50%, #7eb8d4 100%, transparent 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 6px 6px !important;
    background-position: 0 0, 12px 0, 24px 0, 36px 0, 48px 0, 60px 0 !important;
  }
}

/* ───── 4. モバイルナビ overlay 修正 ───── */
.mob-nav-overlay{
  top: 0 !important;
}

/* ───── 5. html overflow を維持しつつ sticky 動作改善 ───── */
html{
  overflow-x: clip !important; /* hiddenよりも sticky に優しい */
}
@supports not (overflow-x: clip){
  html{
    overflow-x: hidden;
  }
}


/* ═══════════════════════════════════════════════════
   v102: Hero H1 as HTML Text (SEO-friendly)
   ═══════════════════════════════════════════════════ */

.hero-h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto 18px;
  text-align: center;
  font-family: var(--font-jp);
  line-height: 1.2;
}

.hero-h1-main{
  display: inline-block;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  color: var(--tw-text-dark);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.hero-h1-accent{
  background: linear-gradient(110deg,
    #f0a8b8 0%,
    #f5c8a8 20%,
    #f9dc8c 40%,
    #a8d8c0 60%,
    #8cc4b8 80%,
    #7eb8d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  display: inline-block;
}

.hero-h1-en{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 600;
  color: var(--tw-text-soft);
  letter-spacing: .14em;
  text-transform: lowercase;
}

.hero-h1-x{
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
}
.hero-h1-x::before,
.hero-h1-x::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f0a8b8, #8cc4b8);
}
.hero-h1-x::before{ transform: translateY(-50%) rotate(45deg); }
.hero-h1-x::after{ transform: translateY(-50%) rotate(-45deg); }

@media(max-width: 640px){
  .hero-h1{
    gap: 6px;
    margin-bottom: 14px;
  }
  .hero-h1-main{
    font-size: clamp(28px, 8vw, 36px);
  }
  .hero-h1-en{
    font-size: 11px;
    letter-spacing: .1em;
  }
  .hero-h1-x{ width: 14px; height: 14px; }
  .hero-h1-x::before,
  .hero-h1-x::after{ width: 14px; }
}


/* ═══════════════════════════════════════════════════
   v103: DEFINITIVE Hero Fix (Final Override)
   全競合ルールを上書きする最終ブロック
   ═══════════════════════════════════════════════════ */

/* ───── 1. Hero copy reset ───── */
.hero-copy{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0 !important;
}
.hero-copy > *{ margin-left: auto; margin-right: auto; }

/* ───── 2. Hero Brand (wo:nnect logo) — clean isolation ───── */
.hero-brand{
  margin: 0 auto 6px !important;
  padding: 0;
  line-height: 0;
  width: auto;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.hero-logo-img{
  display: block !important;
  margin: 0 auto !important;
  max-width: 340px !important;
  width: 100%;
  height: auto !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.04));
}

/* ───── 3. ワネクト sub-label (SEO) ───── */
.hero-service-name{
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tw-text-soft) !important;
  letter-spacing: .3em !important;
  text-indent: .3em;
  margin: 4px auto 14px !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* ───── 4. Brand Dots — DIRECT color (no CSS var) ───── */
.brand-dots{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  width: auto !important;
  list-style: none;
}
.brand-dots > span{
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 9px !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0.9 !important;
  box-shadow: 0 1px 3px rgba(50,40,35,.10) !important;
}
.brand-dots > span:nth-child(1){ background: #f0a8b8 !important; }
.brand-dots > span:nth-child(2){ background: #f5c8a8 !important; }
.brand-dots > span:nth-child(3){ background: #f9dc8c !important; }
.brand-dots > span:nth-child(4){ background: #a8d8c0 !important; }
.brand-dots > span:nth-child(5){ background: #8cc4b8 !important; }
.brand-dots > span:nth-child(6){ background: #7eb8d4 !important; }

/* Subtle wave animation (not flashy) */
@keyframes bdotWave{
  0%, 100%{ transform: translateY(0); opacity: .9; }
  50%{ transform: translateY(-2px); opacity: 1; }
}
.brand-dots > span{
  animation: bdotWave 2s ease-in-out infinite;
}
.brand-dots > span:nth-child(1){ animation-delay: 0s; }
.brand-dots > span:nth-child(2){ animation-delay: .12s; }
.brand-dots > span:nth-child(3){ animation-delay: .24s; }
.brand-dots > span:nth-child(4){ animation-delay: .36s; }
.brand-dots > span:nth-child(5){ animation-delay: .48s; }
.brand-dots > span:nth-child(6){ animation-delay: .60s; }

/* ───── 5. Hero H1 (HTML text) ───── */
.hero-h1{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  text-align: center !important;
  font-family: var(--font-jp) !important;
  line-height: 1.2 !important;
  font-size: initial !important;
  color: var(--tw-text-dark) !important;
}
.hero-h1-main{
  display: inline-block !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 900 !important;
  color: var(--tw-text-dark) !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}
.hero-h1-accent{
  background: linear-gradient(110deg,
    #f0a8b8 0%, #f5c8a8 20%, #f9dc8c 40%,
    #a8d8c0 60%, #8cc4b8 80%, #7eb8d4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
}
.hero-h1-en{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-base) !important;
  font-size: clamp(11px, 1.1vw, 14px) !important;
  font-weight: 600 !important;
  color: var(--tw-text-soft) !important;
  letter-spacing: .12em !important;
}
.hero-h1-x{
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  position: relative !important;
  font-size: 0 !important;
  flex: 0 0 12px !important;
}
.hero-h1-x::before,
.hero-h1-x::after{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 12px !important;
  height: 1.5px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #f0a8b8, #8cc4b8) !important;
}
.hero-h1-x::before{ transform: translateY(-50%) rotate(45deg) !important; }
.hero-h1-x::after{ transform: translateY(-50%) rotate(-45deg) !important; }

/* ───── 6. Kill old hero-h1-img-wrap rules definitively ───── */
.hero-h1-img-wrap,
.hero-h1-img{
  display: none !important;
}

/* ───── 7. Mobile sizing ───── */
@media(max-width: 640px){
  .hero-logo-img{ max-width: 240px !important; }
  .hero-service-name{ font-size: 11px !important; margin: 3px auto 12px !important; }
  .brand-dots{ gap: 6px !important; margin-bottom: 14px !important; }
  .brand-dots > span{ width: 8px !important; height: 8px !important; flex: 0 0 8px !important; }
  .hero-h1{ gap: 6px !important; margin-bottom: 14px !important; }
  .hero-h1-main{ font-size: clamp(28px, 8.5vw, 36px) !important; }
  .hero-h1-en{ font-size: 10px !important; letter-spacing: .1em !important; }
  .hero-h1-x{ width: 10px !important; height: 10px !important; flex: 0 0 10px !important; }
  .hero-h1-x::before, .hero-h1-x::after{ width: 10px !important; }
}
@media(max-width: 380px){
  .hero-logo-img{ max-width: 200px !important; }
}


/* ═══════════════════════════════════════════════════
   v105: Footer Logo — Same as Header
   ═══════════════════════════════════════════════════ */
.footer-brand{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
  margin-bottom: 12px !important;
  gap: 0 !important;
}
.footer-logo{
  height: 32px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(50,40,35,.06));
}
/* Hide old footer-mark/footer-name approach if any survives */
.footer-brand .footer-mark,
.footer-brand .footer-name{
  display: none !important;
}

@media(max-width: 640px){
  .footer-brand{
    justify-content: center !important;
    margin-bottom: 10px !important;
  }
  .footer-logo{
    height: 30px;
  }
  /* footer-tagline below the logo, also centered */
  .footer-tagline{
    text-align: center;
    margin: 8px auto 0;
  }
}


/* ═══ v107: Footer Pseudo-Element Chaos Reset ═══ */
.footer::before{
  display: none !important;
  content: none !important;
  background: none !important;
}


/* ═══ Footer Brand Dots HTML element ═══ */
.footer-brand-dots{
  margin: 0 auto 24px !important;
  display: flex !important;
  justify-content: center !important;
  width: auto !important;
}
@media(max-width: 640px){
  .footer-brand-dots{
    margin: 0 auto 18px !important;
  }
}


/* ═══════════════════════════════════════════════════
   v108: Hello ワネクト Self-Introduction Section
   ═══════════════════════════════════════════════════ */

.hello-section{
  padding: var(--sp-9) 0 var(--sp-9);
  background: linear-gradient(180deg,
    var(--tw-color-bg-subtle, #fafbfc) 0%,
    var(--white, #fff) 100%);
  position: relative;
  overflow: hidden;
}
.hello-section::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 0% 0%, rgba(240,168,184,.08) 0%, rgba(240,168,184,0) 60%),
    radial-gradient(ellipse 40% 40% at 100% 100%, rgba(126,184,212,.08) 0%, rgba(126,184,212,0) 60%);
  z-index: 0;
}
.hello-section > *{ position: relative; z-index: 1; }

.hello-card{
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 48px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--tw-line-soft, #eef0f2);
  border-radius: 24px;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(50,40,35,.04),
    0 12px 32px -8px rgba(50,40,35,.08);
}

.hello-greeting{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.hello-wave{
  font-size: 22px;
  animation: helloWave 2.5s ease-in-out infinite;
  display: inline-block;
  transform-origin: 70% 70%;
}
@keyframes helloWave{
  0%, 60%, 100%{ transform: rotate(0deg); }
  10%, 30%{ transform: rotate(-15deg); }
  20%, 40%{ transform: rotate(12deg); }
}
.hello-kicker{
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--tw-text-soft, #aba29d);
  text-transform: uppercase;
}

.hello-name{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 0 18px;
  font-family: var(--font-jp, 'Zen Maru Gothic', sans-serif);
  line-height: 1;
}
.hello-name-jp{
  display: inline-block;
  font-size: clamp(48px, 8vw, 88px);
  font-weight: 900;
  letter-spacing: .04em;
  background: linear-gradient(110deg,
    #f0a8b8 0%,
    #f5c8a8 22%,
    #f9dc8c 42%,
    #a8d8c0 62%,
    #8cc4b8 82%,
    #7eb8d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.hello-name-en{
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  color: var(--tw-text-soft, #aba29d);
  letter-spacing: .08em;
  margin-top: 6px;
}

.hello-dots{
  margin: 0 auto 24px !important;
}

.hello-tagline{
  font-family: var(--font-jp, 'Zen Maru Gothic', sans-serif);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  color: var(--tw-text-dark, #3d3330);
  margin: 0 auto 32px;
  line-height: 1.6;
}
.hello-tagline strong{
  background: linear-gradient(110deg, #a8d8c0 0%, #8cc4b8 60%, #6ea69a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.hello-desc{
  max-width: 540px;
  margin: 0 auto 32px;
  font-size: 14px;
  line-height: 2;
  color: var(--tw-text-mid, #7a6f6a);
}
.hello-desc p{
  margin: 0 0 14px;
}
.hello-desc p:last-child{ margin-bottom: 0; }
.hello-desc em{
  font-style: italic;
  color: var(--tw-text-dark, #3d3330);
  font-weight: 600;
}
.hello-en-strong{
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 800;
  color: var(--tw-color-teal-deep, #5ea89c);
}
.hello-jp-strong{
  font-family: var(--font-jp, 'Zen Maru Gothic', sans-serif);
  font-weight: 800;
  color: var(--tw-color-teal-deep, #5ea89c);
}

.hello-formula{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(168,216,192,.10);
  border: 1px dashed rgba(140,196,184,.32);
  border-radius: 999px;
  margin: 0 auto;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 13px;
  font-weight: 700;
}
.hf-part{
  color: var(--tw-text-mid, #7a6f6a);
}
.hf-op,
.hf-eq{
  color: var(--tw-color-teal, #8cc4b8);
  font-weight: 900;
  font-size: 14px;
}
.hf-result{
  background: linear-gradient(110deg, #a8d8c0, #8cc4b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  font-family: var(--font-base, 'Nunito', sans-serif);
}

@media(max-width: 640px){
  .hello-section{
    padding: 48px 0 40px;
  }
  .hello-card{
    padding: 36px 24px;
    border-radius: 18px;
    margin: 0 16px;
    max-width: calc(100% - 32px);
  }
  .hello-name-jp{
    font-size: clamp(40px, 12vw, 56px);
  }
  .hello-tagline{
    font-size: 17px;
    margin-bottom: 24px;
  }
  .hello-desc{
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 24px;
  }
  .hello-formula{
    padding: 10px 18px;
    font-size: 11px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ═══════════════════════════════════════════════════
   v110: Marketing Enhancement Sections
   ═══════════════════════════════════════════════════ */

/* ───── A. Social Proof ───── */
.social-proof{
  padding: 32px 0;
  background: linear-gradient(180deg,
    rgba(168,216,192,.04) 0%,
    rgba(255,255,255,1) 100%);
  border-bottom: 1px solid var(--tw-line-soft, #eef0f2);
}
.sp-inner{ text-align: center; }
.sp-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.sp-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-right: 1px solid var(--tw-line-soft, #eef0f2);
}
.sp-stat:last-child{ border-right: 0; }
.sp-num{
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-base, 'Nunito', sans-serif);
}
.sp-num-val{
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(110deg, #a8d8c0, #8cc4b8 60%, #6ea69a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sp-num-suffix{
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  color: var(--tw-color-teal-deep, #5ea89c);
  margin-left: 2px;
}
.sp-label{
  font-size: 11px;
  font-weight: 700;
  color: var(--tw-text-mid, #7a6f6a);
  letter-spacing: .08em;
}
.sp-note{
  font-size: 12px;
  color: var(--tw-text-soft, #aba29d);
  margin: 8px 0 0;
}

@media(max-width: 640px){
  .social-proof{ padding: 24px 0; }
  .sp-stats{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sp-stat{ border-right: 0; padding: 10px 4px; }
  .sp-stat:nth-child(odd){ border-right: 1px solid var(--tw-line-soft, #eef0f2); }
  .sp-stat:nth-child(-n+2){ border-bottom: 1px solid var(--tw-line-soft, #eef0f2); }
  .sp-num-val{ font-size: 28px; }
  .sp-num-suffix{ font-size: 15px; }
  .sp-note{ font-size: 10.5px; padding: 0 8px; }
}

/* ───── B. Why wo:nnect (Comparison) ───── */
.why-section{
  padding: var(--sp-9, 80px) 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,1) 0%,
    var(--tw-color-bg-subtle, #fafbfc) 100%);
}
.why-compare-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.why-col{
  background: #fff;
  border: 1px solid var(--tw-line-soft, #eef0f2);
  border-radius: 20px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
}
.why-col-old{
  border-color: #f0d3d8;
  background: linear-gradient(180deg, #fff 0%, #fef7f8 100%);
}
.why-col-new{
  border: 2px solid var(--tw-color-teal, #8cc4b8);
  box-shadow: 0 12px 32px -8px rgba(140, 196, 184, .25);
  background: linear-gradient(180deg, #fff 0%, #f3faf6 100%);
}
.why-col-head{
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--tw-line-soft, #eef0f2);
}
.why-col-tag{
  display: inline-block;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #d48a9a;
  background: rgba(240, 168, 184, .12);
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.why-col-tag-new{
  color: var(--tw-color-teal-deep, #5ea89c);
  background: rgba(140, 196, 184, .12);
}
.why-col-head h3{
  font-size: 19px;
  margin: 0 0 6px;
  color: var(--tw-text-dark, #3d3330);
}
.why-col-head p{
  font-size: 12px;
  color: var(--tw-text-soft, #aba29d);
  margin: 0;
}
.why-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.why-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
}
.why-list li i{
  flex: 0 0 18px;
  margin-top: 3px;
  color: #d48a9a;
  font-size: 17px;
}
.why-list-new li i{
  color: var(--tw-color-teal-deep, #5ea89c);
}
.why-list li div{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.why-list li strong{
  font-size: 13px;
  color: var(--tw-text-dark, #3d3330);
  font-weight: 800;
  line-height: 1.5;
}
.why-list li span{
  font-size: 11.5px;
  color: var(--tw-text-mid, #7a6f6a);
  line-height: 1.5;
}
.why-vs{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
}
.why-vs-text{
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #f0a8b8 0%, #8cc4b8 100%);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .08em;
  box-shadow: 0 6px 16px rgba(140, 196, 184, .32);
}

@media(max-width: 768px){
  .why-compare-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .why-col{ padding: 24px 18px; }
  .why-vs{
    flex: 0 0 auto;
    padding: 4px 0;
  }
  .why-vs-text{ width: 44px; height: 44px; font-size: 13px; }
}
@media(max-width: 640px){
  .why-col-head h3{ font-size: 17px; }
  .why-list li strong{ font-size: 12.5px; }
  .why-list li span{ font-size: 11px; }
}

/* ───── C. Onboarding Timeline ───── */
.onboarding-section{
  padding: var(--sp-9, 80px) 0;
  background: linear-gradient(180deg,
    var(--tw-color-bg-subtle, #fafbfc) 0%,
    #fff 100%);
}
.ob-em{
  background: linear-gradient(110deg, #a8d8c0, #8cc4b8 60%, #6ea69a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  padding: 0 4px;
}
.ob-timeline{
  max-width: 900px;
  margin: 0 auto 40px;
  position: relative;
  padding-left: 32px;
}
.ob-timeline::before{
  content: "";
  position: absolute;
  left: 22px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg,
    #f0a8b8 0%, #f5c8a8 20%, #f9dc8c 40%,
    #a8d8c0 60%, #8cc4b8 80%, #7eb8d4 100%);
  border-radius: 2px;
  opacity: .35;
}
.ob-step{
  position: relative;
  padding: 14px 0 14px 32px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.ob-step-num{
  position: absolute;
  left: -32px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tw-color-teal, #8cc4b8);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 11px;
  font-weight: 800;
  color: var(--tw-color-teal-deep, #5ea89c);
  box-shadow: 0 4px 12px rgba(140, 196, 184, .18);
  z-index: 1;
}
.ob-step:nth-child(1) .ob-step-num{ border-color: #f0a8b8; color: #d4647a; }
.ob-step:nth-child(2) .ob-step-num{ border-color: #f5c8a8; color: #c4895a; }
.ob-step:nth-child(3) .ob-step-num{ border-color: #f9dc8c; color: #b88820; }
.ob-step:nth-child(4) .ob-step-num{ border-color: #a8d8c0; color: #5ea89c; }
.ob-step-after .ob-step-num{
  background: var(--tw-color-teal, #8cc4b8);
  color: #fff;
  border-color: var(--tw-color-teal-deep, #5ea89c);
}
.ob-step-body{
  flex: 1;
  background: #fff;
  border: 1px solid var(--tw-line-soft, #eef0f2);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ob-step-day{
  display: inline-block;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--tw-color-teal-deep, #5ea89c);
  background: rgba(140, 196, 184, .10);
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
}
.ob-step-body h3{
  font-size: 16px;
  margin: 4px 0 2px;
  color: var(--tw-text-dark, #3d3330);
}
.ob-step-body p{
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0;
}

.ob-guarantee{
  max-width: 720px;
  margin: 32px auto 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 28px;
  background: linear-gradient(110deg, rgba(168,216,192,.08), rgba(126,184,212,.06));
  border: 1px solid rgba(140, 196, 184, .22);
  border-radius: 16px;
}
.ob-guarantee > i{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--tw-color-teal-deep, #5ea89c);
  background: rgba(140, 196, 184, .14);
  border-radius: 50%;
}
.ob-guarantee div{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ob-guarantee strong{
  font-size: 14px;
  color: var(--tw-text-dark, #3d3330);
  font-weight: 800;
}
.ob-guarantee span{
  font-size: 12px;
  color: var(--tw-text-mid, #7a6f6a);
  line-height: 1.6;
}

@media(max-width: 640px){
  .ob-timeline{ padding-left: 24px; }
  .ob-timeline::before{ left: 16px; }
  .ob-step-num{
    left: -24px;
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
  .ob-step-body{ padding: 14px 16px; }
  .ob-step-body h3{ font-size: 15px; }
  .ob-step-body p{ font-size: 12px; }
  .ob-guarantee{ flex-direction: column; text-align: center; padding: 18px 16px; }
}


/* ═══════════════════════════════════════════════════
   v111: Origin Story + SIer Support Sections
   ═══════════════════════════════════════════════════ */

/* ───── Origin Section (Born from Real Project) ───── */
.origin-section{
  padding: 56px 0 64px;
  background: linear-gradient(180deg,
    rgba(168,216,192,.05) 0%,
    rgba(255,255,255,1) 100%);
  border-bottom: 1px solid var(--tw-line-soft, #eef0f2);
}
.origin-inner{
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
}
.origin-story{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.origin-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--tw-color-teal-deep, #5ea89c);
  background: rgba(140, 196, 184, .10);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.origin-kicker-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tw-color-teal, #8cc4b8);
  animation: diagDotPulse 1.6s ease-in-out infinite;
}
.origin-h2{
  font-family: var(--font-jp, 'Zen Maru Gothic', sans-serif);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 900;
  line-height: 1.45;
  color: var(--tw-text-dark, #3d3330);
  margin: 0 0 18px;
}
.origin-h2 strong{
  background: linear-gradient(110deg, #a8d8c0, #8cc4b8 60%, #6ea69a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}
.origin-lead{
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.9;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0 auto 14px;
  max-width: 680px;
}
.origin-lead strong{
  color: var(--tw-text-dark, #3d3330);
  font-weight: 800;
}
.origin-note{
  display: inline-block;
  font-size: 12px;
  line-height: 1.8;
  color: var(--tw-text-soft, #aba29d);
  padding: 12px 24px;
  background: rgba(168,216,192,.06);
  border: 1px dashed rgba(140, 196, 184, .28);
  border-radius: 12px;
  margin: 0 auto;
}

/* 3 Edges */
.origin-edges{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.edge-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--tw-line-soft, #eef0f2);
  border-radius: 18px;
  padding: 28px 24px 24px;
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.edge-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(50,40,35,.10);
}
.edge-num{
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--tw-color-teal, #8cc4b8);
  opacity: .5;
}
.edge-icon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  font-size: 22px;
  color: #fff;
}
.edge-icon-1{ background: linear-gradient(135deg, #f0a8b8, #d48a9a); box-shadow: 0 6px 16px rgba(240,168,184,.32); }
.edge-icon-2{ background: linear-gradient(135deg, #f9dc8c, #f5cc6a); box-shadow: 0 6px 16px rgba(245,204,106,.32); }
.edge-icon-3{ background: linear-gradient(135deg, #a8d8c0, #8cc4b8); box-shadow: 0 6px 16px rgba(140,196,184,.32); }
.edge-card h3{
  font-size: 17px;
  font-weight: 900;
  color: var(--tw-text-dark, #3d3330);
  margin: 0 0 10px;
  line-height: 1.5;
}
.edge-card p{
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0 0 14px;
}
.edge-keyword{
  display: inline-block;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--tw-color-teal-deep, #5ea89c);
  background: rgba(140, 196, 184, .10);
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

@media(max-width: 960px){
  .origin-edges{ grid-template-columns: 1fr; gap: 14px; }
  .edge-card{ padding: 22px 20px; }
}
@media(max-width: 640px){
  .origin-section{ padding: 40px 0 48px; }
  .origin-h2{ font-size: 22px; }
  .origin-lead{ font-size: 13px; line-height: 1.85; }
  .origin-note{ font-size: 11.5px; padding: 12px 18px; }
}

/* ───── SIer Support Section ───── */
.sier-section{
  padding: var(--sp-9, 80px) 0;
  background: linear-gradient(180deg,
    var(--tw-color-bg-subtle, #fafbfc) 0%,
    #fff 100%);
}
.sier-section .section-head h2 strong{
  background: linear-gradient(110deg, #a8d8c0, #8cc4b8 60%, #6ea69a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.sier-cols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto 36px;
}
.sier-col{
  background: #fff;
  border: 1px solid var(--tw-line-soft, #eef0f2);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sier-col:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(50,40,35,.08);
}
.sier-col-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, #a8d8c0, #8cc4b8);
  box-shadow: 0 4px 12px rgba(140,196,184,.28);
}
.sier-col:nth-child(1) .sier-col-icon{ background: linear-gradient(135deg, #f0a8b8, #d48a9a); box-shadow: 0 4px 12px rgba(240,168,184,.28); }
.sier-col:nth-child(2) .sier-col-icon{ background: linear-gradient(135deg, #f5c8a8, #e3a988); box-shadow: 0 4px 12px rgba(245,200,168,.28); }
.sier-col:nth-child(3) .sier-col-icon{ background: linear-gradient(135deg, #a8d8c0, #8cc4b8); box-shadow: 0 4px 12px rgba(140,196,184,.28); }
.sier-col:nth-child(4) .sier-col-icon{ background: linear-gradient(135deg, #7eb8d4, #5a9dc8); box-shadow: 0 4px 12px rgba(126,184,212,.28); }
.sier-col h3{
  font-size: 16px;
  font-weight: 900;
  color: var(--tw-text-dark, #3d3330);
  margin: 0 0 10px;
}
.sier-col p{
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0 0 14px;
  flex: 1;
}
.sier-col-list{
  list-style: none;
  padding: 12px 14px;
  margin: 0;
  background: var(--tw-color-bg-subtle, #fafbfc);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sier-col-list li{
  font-size: 11.5px;
  color: var(--tw-text-mid, #7a6f6a);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.sier-col-list li::before{
  content: "→";
  position: absolute;
  left: 0;
  color: var(--tw-color-teal-deep, #5ea89c);
  font-weight: 900;
}

.sier-footer-note{
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 22px;
  background: rgba(245,204,106,.08);
  border: 1px solid rgba(245,204,106,.22);
  border-radius: 12px;
}
.sier-footer-note > i{
  color: #d89a2a;
  font-size: 16px;
  flex: 0 0 16px;
  margin-top: 2px;
}
.sier-footer-note p{
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--tw-text-mid, #7a6f6a);
}
.sier-footer-note strong{
  color: var(--tw-text-dark, #3d3330);
  font-weight: 800;
}

@media(max-width: 960px){
  .sier-cols{ grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 640px){
  .sier-cols{ grid-template-columns: 1fr; gap: 12px; }
  .sier-col{ padding: 22px 18px; }
  .sier-footer-note{ flex-direction: column; padding: 14px 16px; }
}

/* ───── Why disclaimer (small honest note) ───── */
.why-disclaimer{
  max-width: 720px;
  margin: 32px auto 0;
  padding: 12px 18px;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--tw-text-soft, #aba29d);
  text-align: center;
  background: rgba(168,216,192,.04);
  border-radius: 10px;
}


/* ═══════════════════════════════════════════════════
   v112: 共創ストーリー + 2ヶ月無償 戦略CSS
   ═══════════════════════════════════════════════════ */

/* ───── Launch tag (2026年7月) ───── */
.origin-launch-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--tw-text-dark, #3d3330);
  background: linear-gradient(110deg,
    rgba(249, 220, 140, .2) 0%,
    rgba(168, 216, 192, .18) 60%,
    rgba(126, 184, 212, .15) 100%);
  border: 1px solid rgba(245, 204, 106, .35);
  border-radius: 999px;
  margin: 0 auto 16px;
  position: relative;
  overflow: hidden;
}
.origin-launch-tag i{
  color: #d89a2a;
  font-size: 11px;
}
.origin-launch-tag::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: launchShine 4s ease-in-out infinite;
}
@keyframes launchShine{
  0%, 70%, 100%{ transform: translateX(-100%); }
  85%{ transform: translateX(100%); }
}

/* ───── Trial card (2ヶ月無償) ───── */
.trial-card{
  max-width: 800px;
  margin: 0 auto 48px;
  padding: 36px 40px;
  background: linear-gradient(135deg,
    rgba(249, 220, 140, .08) 0%,
    rgba(168, 216, 192, .10) 50%,
    rgba(126, 184, 212, .08) 100%);
  border: 2px solid rgba(140, 196, 184, .28);
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(50,40,35,.04),
    0 12px 32px -8px rgba(140, 196, 184, .15);
  position: relative;
  overflow: hidden;
}
.trial-card::before{
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(249, 220, 140, .25) 0%, transparent 70%);
  pointer-events: none;
}
.trial-card > *{ position: relative; z-index: 1; }

.trial-headline{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(140, 196, 184, .32);
}
.trial-badge{
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #a8d8c0, #8cc4b8 60%, #6ea69a);
  border-radius: 50%;
  color: #fff;
  position: relative;
  box-shadow:
    0 8px 24px rgba(140, 196, 184, .32),
    inset 0 2px 0 rgba(255,255,255,.3);
  text-align: center;
  line-height: 1;
}
.trial-badge-num{
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}
.trial-badge-unit{
  display: block;
  font-family: var(--font-jp, 'Zen Maru Gothic', sans-serif);
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
.trial-badge-free{
  position: absolute;
  bottom: -10px;
  right: -8px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff;
  background: linear-gradient(135deg, #d4647a, #e56f91);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(229, 111, 145, .32);
}
.trial-headline-text{ flex: 1; }
.trial-headline-text h3{
  font-size: clamp(18px, 2.4vw, 24px);
  margin: 0 0 6px;
  color: var(--tw-text-dark, #3d3330);
}
.trial-headline-text p{
  font-size: 13px;
  line-height: 1.7;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0;
}

.trial-benefits{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trial-benefits li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tw-text-dark, #3d3330);
}
.trial-benefits li i{
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: var(--tw-color-teal, #8cc4b8);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  margin-top: 2px;
  font-weight: 900;
}

@media(max-width: 640px){
  .trial-card{ padding: 24px 18px; border-radius: 16px; margin: 0 16px 32px; max-width: calc(100% - 32px); }
  .trial-headline{ flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-bottom: 18px; }
  .trial-badge{ width: 96px; height: 96px; }
  .trial-badge-num{ font-size: 44px; }
  .trial-badge-unit{ font-size: 11px; }
  .trial-badge-free{ font-size: 9px; padding: 3px 8px; }
  .trial-benefits li{ font-size: 12.5px; }
  .trial-benefits li i{ flex: 0 0 18px; width: 18px; height: 18px; font-size: 9px; }
}

/* ───── Evolution note (年々進化するSaaS) ───── */
.ob-evolve-note{
  max-width: 720px;
  margin: 36px auto 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 28px;
  background: linear-gradient(110deg, rgba(168,216,192,.08), rgba(126,184,212,.06));
  border: 1px solid rgba(140, 196, 184, .22);
  border-radius: 16px;
}
.ob-evolve-note > i{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--tw-color-teal-deep, #5ea89c);
  background: rgba(140, 196, 184, .14);
  border-radius: 50%;
}
.ob-evolve-note div{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ob-evolve-note strong{
  font-size: 14px;
  color: var(--tw-text-dark, #3d3330);
  font-weight: 800;
}
.ob-evolve-note span{
  font-size: 12px;
  color: var(--tw-text-mid, #7a6f6a);
  line-height: 1.65;
}

@media(max-width: 640px){
  .ob-evolve-note{ flex-direction: column; text-align: center; padding: 18px 16px; }
}


/* ───── Origin future note (将来のC案移行用) ───── */
.origin-future-note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 32px auto 0;
  padding: 10px 20px;
  width: fit-content;
  background: rgba(168, 216, 192, .06);
  border: 1px dashed rgba(140, 196, 184, .24);
  border-radius: 999px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--tw-text-soft, #aba29d);
  letter-spacing: .04em;
}
.origin-future-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tw-color-teal, #8cc4b8);
  animation: diagDotPulse 1.6s ease-in-out infinite;
  flex: 0 0 6px;
}
@media(max-width: 640px){
  .origin-future-note{
    font-size: 10.5px;
    padding: 8px 16px;
    margin-top: 24px;
  }
}


/* ═══════════════════════════════════════════════════
   v114: Mobile Line-Break Optimization
   ─ 自然な文節改行 (word-break: auto-phrase)
   ─ 不自然な単語途中改行を防止
   ═══════════════════════════════════════════════════ */

/* ベース: モバイルで自然な文節区切りに */
@media(max-width: 768px){
  body, p, li, h1, h2, h3, h4, h5, h6, span:not(.no-wrap):not(.hero-h1-x):not(.dot){
    word-break: auto-phrase;
    overflow-wrap: anywhere;
    line-break: strict;
    hanging-punctuation: allow-end;
  }

  /* Safari fallback (auto-phrase未対応の場合) */
  @supports not (word-break: auto-phrase){
    body, p, li, h1, h2, h3, h4, h5, h6{
      word-break: normal;
      overflow-wrap: break-word;
      line-break: strict;
    }
  }
}

/* PC用改行 (d-br) をモバイルで非表示 ─ 念のため再確認 */
@media(max-width: 768px){
  br.d-br{ display: none !important; }
}

/* 新セクションの読みやすさ最適化 */
@media(max-width: 640px){
  /* Origin section */
  .origin-h2{
    font-size: clamp(20px, 6.5vw, 28px) !important;
    line-height: 1.5 !important;
    padding: 0 8px;
  }
  .origin-lead{
    font-size: 13px !important;
    line-height: 1.85 !important;
    padding: 0 8px;
  }
  .origin-note{
    font-size: 11.5px !important;
    line-height: 1.75 !important;
    padding: 12px 16px !important;
    margin: 0 8px !important;
  }

  /* Why section */
  .why-section .section-head h2{
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.5;
    padding: 0 8px;
  }
  .why-section .section-head p{
    font-size: 12.5px;
    line-height: 1.75;
    padding: 0 8px;
  }

  /* Onboarding section */
  .onboarding-section .section-head h2{
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.5;
    padding: 0 8px;
  }
  .onboarding-section .section-head p{
    font-size: 12.5px;
    line-height: 1.75;
    padding: 0 8px;
  }

  /* Hero h1 readability */
  .hero-h1-main{
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  /* Common body text in cards */
  .edge-card p,
  .ob-step-body p,
  .trial-benefits li,
  .sier-col p{
    line-height: 1.75 !important;
  }

  /* Section heads everywhere */
  .section-head h2{
    line-height: 1.5 !important;
    padding: 0 4px;
  }
  .section-head p{
    line-height: 1.8 !important;
    padding: 0 4px;
  }

  /* Issue/feature cards */
  .issue-v-card h3,
  .feature-title h3{
    line-height: 1.5 !important;
  }
}

/* PC側の見やすさ補強 */
@media(min-width: 769px){
  .origin-lead,
  .origin-note,
  .section-head p{
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}


/* ═══════════════════════════════════════════════════
   v115: Navigation Updates
   ═══════════════════════════════════════════════════ */

.nav-link-trial{
  position: relative;
  padding: 5px 12px !important;
  background: linear-gradient(110deg,
    rgba(249, 220, 140, .18) 0%,
    rgba(168, 216, 192, .18) 100%) !important;
  border: 1px solid rgba(245, 204, 106, .35);
  border-radius: 999px;
  color: var(--tw-text-dark, #3d3330) !important;
  font-weight: 800 !important;
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav-link-trial::before{
  content: "🎁 ";
  font-size: 10px;
}
.nav-link-trial:hover{
  background: linear-gradient(110deg,
    rgba(249, 220, 140, .32) 0%,
    rgba(168, 216, 192, .32) 100%) !important;
  color: var(--tw-color-teal-deep, #5ea89c) !important;
}

/* Mobile nav の 2ヶ月無償 emphasis */
.mob-nav-links a[href="#onboarding"]{
  background: linear-gradient(110deg,
    rgba(249, 220, 140, .08) 0%,
    rgba(168, 216, 192, .08) 100%) !important;
  color: var(--tw-color-teal-deep, #5ea89c) !important;
  font-weight: 800;
}
.mob-nav-links a[href="#onboarding"]::before{
  content: "🎁 ";
  margin-right: 6px;
}

@media(max-width: 1100px){
  .nav-link-trial{
    padding: 4px 10px !important;
    font-size: 11px;
  }
  .nav-link-trial::before{ display: none; }
}


/* ═══════════════════════════════════════════════════
   v116: Mobile Nav Scroll Fix + Touch Smoothness
   ═══════════════════════════════════════════════════ */

/* モバイルナビ全体のflexレイアウト最適化 */
.mob-nav{
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100vh;
  height: 100dvh;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* 親はhidden */
}

/* スクロールできるようにflex計算を厳格化 */
.mob-nav-head{
  flex: 0 0 auto;  /* ヘッダーは固定高 */
}
.mob-nav-links{
  flex: 1 1 auto !important;  /* リンク領域が伸縮 */
  min-height: 0 !important;   /* ← これがスクロール成立の鍵 */
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 8px 0 16px;
}
.mob-nav-actions{
  flex: 0 0 auto;  /* フッターアクションは固定高 */
  border-top: 1px solid var(--tw-line-soft, #eef0f2);
}

/* スクロールバー装飾 (システム互換) */
.mob-nav-links{
  scrollbar-width: thin;
  scrollbar-color: var(--tw-color-teal-tint, #d8eae5) transparent;
}
.mob-nav-links::-webkit-scrollbar{
  width: 6px;
  background: transparent;
}
.mob-nav-links::-webkit-scrollbar-thumb{
  background: var(--tw-color-teal-tint, #d8eae5);
  border-radius: 4px;
}

/* スクロール終端のグラデフェード (上下) */
.mob-nav-links{
  background:
    linear-gradient(to bottom, #fff 0%, #fff 8%, transparent 8%, transparent 92%, #fff 92%, #fff 100%) local,
    #fff;
}

/* リンクをコンパクトに（11項目を見やすく） */
.mob-nav-links a{
  display: flex;
  align-items: center;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--tw-line-soft, #f0f2f1);
  min-height: 48px;
  color: var(--tw-text-dark, #3d3330);
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav-links a:active{
  background: rgba(140, 196, 184, .12);
}
.mob-nav-links a:last-child{
  border-bottom: 0;
}


/* ═══════════════════════════════════════════════════
   v117: Mobile Nav Final Fix
   ═══════════════════════════════════════════════════ */

/* リンクをコンパクトに（11項目すべて見せる） */
.mob-nav-links{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 0 8px !important;
}
.mob-nav-links a{
  display: flex !important;
  align-items: center !important;
  padding: 11px 22px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #f0f2f1 !important;
  min-height: 44px !important;
  color: #3d3330 !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto !important;
}
.mob-nav-links a:active{
  background: rgba(140, 196, 184, .12) !important;
}
.mob-nav-links a:last-child{
  border-bottom: 0 !important;
}

/* スクロール可能であることを示すフェード */
.mob-nav-links{
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #fff calc(100% - 24px),
    rgba(255,255,255,.6) 100%
  );
}

/* Scrollbar (Webkit) */
.mob-nav-links::-webkit-scrollbar{
  width: 4px;
}
.mob-nav-links::-webkit-scrollbar-track{
  background: transparent;
}
.mob-nav-links::-webkit-scrollbar-thumb{
  background: rgba(140, 196, 184, .25);
  border-radius: 4px;
}
.mob-nav-links{
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 196, 184, .25) transparent;
}

/* mob-nav 全体の高さ制限を厳格化 */
.mob-nav{
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
.mob-nav-head{
  flex: 0 0 auto !important;
}


/* ═══ v118: Touch event isolation when nav open ═══ */
.mob-nav-overlay{
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: contain;
  touch-action: none;
}
.mob-nav{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mob-nav-links{
  overscroll-behavior: contain !important;
}
/* body.nav-open は JSで position:fixed されるが、念のためのfallback */
body.nav-open{
  overflow: hidden !important;
  touch-action: none;
}
body.nav-open .mob-nav,
body.nav-open .mob-nav-overlay,
body.nav-open .mob-nav-links,
body.nav-open .mob-nav-links a{
  touch-action: auto;
}
body.nav-open .mob-nav-links{
  touch-action: pan-y;
}


/* ═══════════════════════════════════════════════════
   v119: Mobile Nav Header + Home Item
   ═══════════════════════════════════════════════════ */

/* ナビヘッダー部分のロゴをクリック可能に */
.mob-nav-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--tw-line-soft, #eef0f2) !important;
  flex: 0 0 auto !important;
  min-height: 56px;
}
.mob-nav-logo-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  padding: 4px 0;
}
.mob-nav-logo-link:active{
  opacity: 0.6;
}
.mob-nav-logo{
  height: 28px;
  width: auto;
  display: block;
}
.mob-nav-close{
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--tw-text-mid, #7a6f6a);
  font-size: 18px;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav-close:active{
  color: var(--tw-text-dark, #3d3330);
}

/* mob-nav-links 上部余白削減 */
.mob-nav-links{
  padding-top: 0 !important;
}

/* 「ホーム」項目だけ特別なスタイル */
.mob-nav-home{
  background: linear-gradient(110deg,
    rgba(168, 216, 192, .08) 0%,
    rgba(168, 216, 192, .04) 100%);
  font-weight: 700 !important;
  color: var(--tw-color-teal-deep, #5ea89c) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}
.mob-nav-home i{
  font-size: 15px;
  color: var(--tw-color-teal-deep, #5ea89c);
  width: 18px;
  text-align: center;
}
.mob-nav-home:active{
  background: linear-gradient(110deg,
    rgba(168, 216, 192, .18) 0%,
    rgba(168, 216, 192, .12) 100%) !important;
}


/* ═══════════════════════════════════════════════════
   v120: Anti-flash for menu close
   ═══════════════════════════════════════════════════ */

/* Smooth menu close transition */
.mob-nav-overlay{
  transition: opacity .25s ease, visibility .25s ease !important;
}
.mob-nav{
  transition: transform .28s cubic-bezier(.32, .72, 0, 1) !important;
  will-change: transform;
}

/* When closing, the body returns to original/destination position instantly */
/* Make sure the scroll happens before menu fade-out completes */
body{
  background-color: #fefdfb !important;
}

/* Prevent any backdrop-filter flash */
@supports (backdrop-filter: blur(0)) {
  .mob-nav-overlay{
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Anti-flash during position:fixed transition */
html{
  background-color: #fefdfb;
}


/* ═══════════════════════════════════════════════════
   v123: Roadmap Section
   ═══════════════════════════════════════════════════ */

.roadmap-section{
  padding: var(--sp-9, 80px) 0;
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(168,216,192,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(126,184,212,.06) 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  position: relative;
}

.roadmap-section .section-head h2 strong{
  color: var(--tw-color-teal-deep, #5ea89c);
}

/* ───── Timeline container ───── */
.rm-timeline{
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  padding-left: 32px;
}
.rm-timeline::before{
  content: "";
  position: absolute;
  left: 11px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(180deg,
    #8cc4b8 0%,
    #8cc4b8 28%,
    #f5cc6a 36%,
    #f5cc6a 56%,
    #7eb8d4 64%,
    #7eb8d4 100%);
  border-radius: 2px;
  opacity: .35;
}

/* ───── Phase ───── */
.rm-phase{
  position: relative;
  padding: 4px 0 56px;
}
.rm-phase:last-child{
  padding-bottom: 8px;
}

.rm-phase-marker{
  position: absolute;
  left: -32px;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0;
}
.rm-phase-dot{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #8cc4b8;
  position: relative;
  z-index: 2;
  flex: 0 0 22px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.9);
}
.rm-phase-current .rm-phase-dot{
  border-color: #5ea89c;
  background: #8cc4b8;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.9),
    0 0 16px rgba(140,196,184,.5);
  animation: rmPhasePulse 2.4s ease-in-out infinite;
}
.rm-phase-soon .rm-phase-dot{
  border-color: #d4a936;
}
.rm-phase-future .rm-phase-dot{
  border-color: #5a9dc8;
}
@keyframes rmPhasePulse{
  0%, 100%{ box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 16px rgba(140,196,184,.5); }
  50%{ box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 24px rgba(140,196,184,.8); }
}

/* Phase label (NOW / SOON / FUTURE + period) */
.rm-phase-label{
  position: absolute;
  left: 32px;
  top: -3px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.rm-phase-tag{
  display: inline-block;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.rm-tag-now{
  background: linear-gradient(110deg, #a8d8c0, #8cc4b8);
  color: #fff;
  box-shadow: 0 2px 8px rgba(140,196,184,.32);
}
.rm-tag-soon{
  background: rgba(245,204,106,.18);
  color: #b8881e;
  border: 1px solid rgba(245,204,106,.4);
}
.rm-tag-future{
  background: rgba(126,184,212,.14);
  color: #4a8eb8;
  border: 1px solid rgba(126,184,212,.32);
}
.rm-phase-period{
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--tw-text-soft, #aba29d);
  letter-spacing: .04em;
}

/* ───── Phase body ───── */
.rm-phase-body{
  margin-top: 36px;
  padding-left: 0;
}
.rm-phase-title{
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 900;
  letter-spacing: .04em;
  margin: 0 0 8px;
  color: var(--tw-text-dark, #3d3330);
}
.rm-phase-current .rm-phase-title{
  background: linear-gradient(110deg, #5ea89c, #8cc4b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.rm-phase-soon .rm-phase-title{
  color: #b8881e;
}
.rm-phase-future .rm-phase-title{
  color: #4a8eb8;
}
.rm-phase-lead{
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0 0 24px;
  max-width: 620px;
}
.rm-phase-lead strong{
  color: var(--tw-text-dark, #3d3330);
  font-weight: 800;
}

/* ───── Feature grid ───── */
.rm-features{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.rm-feature{
  background: #fff;
  border: 1px solid var(--tw-line-soft, #eef0f2);
  border-radius: 12px;
  padding: 16px 18px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.rm-feature:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(50,40,35,.08);
  border-color: rgba(140,196,184,.3);
}
.rm-phase-current .rm-feature{
  border-color: rgba(140,196,184,.22);
  background: linear-gradient(180deg, #fff 0%, rgba(168,216,192,.04) 100%);
}
.rm-phase-current .rm-feature:hover{
  border-color: rgba(140,196,184,.5);
}
.rm-phase-soon .rm-feature{
  background: linear-gradient(180deg, #fff 0%, rgba(245,204,106,.03) 100%);
}
.rm-phase-future .rm-feature{
  background: linear-gradient(180deg, #fff 0%, rgba(126,184,212,.03) 100%);
}

.rm-feature-head{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rm-feature-name{
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 15px;
  font-weight: 900;
  color: var(--tw-text-dark, #3d3330);
  letter-spacing: .01em;
}
.rm-feature-role{
  font-size: 11px;
  font-weight: 700;
  color: var(--tw-text-soft, #aba29d);
}
.rm-feature p{
  font-size: 12px;
  line-height: 1.65;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0;
}
.rm-ai-spark{
  display: inline-block;
  font-size: 11px;
  margin-left: 2px;
  animation: rmSparkle 2.4s ease-in-out infinite;
}
@keyframes rmSparkle{
  0%, 100%{ opacity: .4; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.15); }
}

/* ───── Voice CTA card ───── */
.rm-voice{
  max-width: 920px;
  margin: 48px auto 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 28px;
  background: linear-gradient(110deg, rgba(168,216,192,.10), rgba(126,184,212,.08));
  border: 1px solid rgba(140,196,184,.24);
  border-radius: 18px;
  box-shadow: 0 4px 16px -4px rgba(140,196,184,.12);
}
.rm-voice-icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  color: var(--tw-color-teal-deep, #5ea89c);
  box-shadow: 0 4px 12px rgba(140,196,184,.18);
  flex: 0 0 44px;
}
.rm-voice-body h4{
  font-size: 15px;
  font-weight: 800;
  color: var(--tw-text-dark, #3d3330);
  margin: 0 0 4px;
  line-height: 1.5;
}
.rm-voice-body p{
  font-size: 12px;
  line-height: 1.7;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0;
}
.rm-voice-btn{
  display: inline-block;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(110deg, #a8d8c0 0%, #8cc4b8 100%);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(140,196,184,.32);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.rm-voice-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(140,196,184,.42);
}

/* ───── Disclaimer ───── */
.rm-disclaimer{
  text-align: center;
  font-size: 10.5px;
  color: var(--tw-text-soft, #aba29d);
  margin: 24px auto 0;
  max-width: 720px;
  line-height: 1.7;
}

/* ───── Responsive ───── */
@media(max-width: 768px){
  .rm-features{ grid-template-columns: 1fr; }
  .rm-phase-period{ font-size: 10px; }
}
@media(max-width: 640px){
  .roadmap-section{ padding: 56px 0 64px; }

  .rm-timeline{ padding-left: 24px; }
  .rm-timeline::before{ left: 7px; }

  .rm-phase{ padding-bottom: 44px; }
  .rm-phase-marker{ left: -24px; }
  .rm-phase-dot{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-width: 3px;
  }
  .rm-phase-label{
    left: 28px;
    top: -2px;
    gap: 6px;
  }
  .rm-phase-tag{
    font-size: 9px;
    padding: 3px 8px;
  }
  .rm-phase-period{ font-size: 10px; }

  .rm-phase-body{ margin-top: 32px; }
  .rm-phase-title{ font-size: 18px; }
  .rm-phase-lead{ font-size: 12.5px; margin-bottom: 18px; }

  .rm-feature{ padding: 14px 16px; }
  .rm-feature-name{ font-size: 14px; }
  .rm-feature-role{ font-size: 10.5px; }
  .rm-feature p{ font-size: 11.5px; }

  /* Voice CTA mobile stack */
  .rm-voice{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px 20px;
    gap: 14px;
    margin: 36px 8px 12px;
  }
  .rm-voice-icon{ margin: 0 auto; }
  .rm-voice-btn{ width: 100%; padding: 13px 22px; font-size: 14px; }
}


/* ═══════════════════════════════════════════════════
   v124: CSS-only scroll lock (no position:fixed flicker)
   ═══════════════════════════════════════════════════ */

/* メニュー開時の body 制御 (position:fixed は使わない) */
body.nav-open{
  overflow: hidden !important;
  /* position:fixed は使わない = ちらつき原因除去 */
}

/* HTML側でも overflow抑止 (iOS Safari保険) */
html.nav-open-html{
  overflow: hidden;
}

/* タッチ制御 */
body.nav-open{
  touch-action: none;
}
body.nav-open .mob-nav,
body.nav-open .mob-nav-overlay{
  touch-action: auto;
}
body.nav-open .mob-nav-links{
  touch-action: pan-y;  /* 縦スクロールのみ許可 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Hide fade-mask if exists (清掃) */
#tw-fade-mask{
  display: none !important;
}


/* ═══════════════════════════════════════════════════
   v125: Hero PC版1カラム + Multi-Device セクション
   ═══════════════════════════════════════════════════ */

/* ───── Hero v2: 1-column, generous spacing ───── */
.hero{
  padding: calc(var(--tw-header-h, 64px) + 60px) 0 40px;
  min-height: auto;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(168,216,192,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(245,200,168,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(126,184,212,.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero > *{ position: relative; z-index: 1; }

.hero-container-v2{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero-copy{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* Platform label with breathing dot */
.hero-platform-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(168,216,192,.10);
  border: 1px solid rgba(140,196,184,.22);
  border-radius: 999px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #5ea89c;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.hpl-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8cc4b8;
  flex: 0 0 8px;
  animation: hplPulse 2s ease-in-out infinite;
}
@keyframes hplPulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .5; transform: scale(.85); }
}

/* Logo: large and proud */
.hero-brand{
  margin: 0 auto 12px !important;
  line-height: 0;
}
.hero-logo-img{
  display: block;
  margin: 0 auto;
  max-width: 480px !important;  /* PC: larger */
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(50,40,35,.06));
}

/* Brand dots */
.hero-copy .brand-dots{
  margin: 8px auto 24px !important;
}

/* H1: bigger, with more breathing room */
.hero-h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 auto 28px !important;
}
.hero-h1-main{
  font-size: clamp(40px, 6.5vw, 68px) !important;
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.hero-h1-en{
  font-size: clamp(13px, 1.3vw, 16px) !important;
  letter-spacing: .14em;
}

/* Leads with more breathing room */
.hero-lead{
  font-size: clamp(16px, 1.7vw, 20px) !important;
  margin: 0 auto 10px !important;
  line-height: 1.8;
}
.hero-lead-detail{
  font-size: clamp(13px, 1.3vw, 15px) !important;
  margin: 0 auto 8px !important;
  line-height: 1.75;
}
.hero-main-sub{
  font-size: 12px !important;
  margin: 0 auto 32px !important;
  letter-spacing: .04em;
}

/* Actions */
.hero-actions{
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 32px;
  flex-wrap: wrap;
}
.hero-actions .btn{
  padding: 14px 30px !important;
  font-size: 14px !important;
}

/* Badges */
.hero-badges{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto;
}

/* Hide old devices completely */
.hero .devices{ display: none !important; }

/* Mobile hero adjustments */
@media(max-width: 768px){
  .hero{ padding: calc(var(--tw-header-h, 56px) + 36px) 0 56px; }
  .hero-logo-img{ max-width: 320px !important; }
  .hero-platform-label{
    font-size: 10.5px;
    padding: 6px 14px;
    letter-spacing: .14em;
    margin-bottom: 24px;
  }
  .hero-h1-main{ font-size: clamp(32px, 9vw, 44px) !important; }
  .hero-h1-en{ font-size: 11px !important; letter-spacing: .12em; }
  .hero-lead{ font-size: 15px !important; }
  .hero-lead-detail{ font-size: 12.5px !important; }
  .hero-main-sub{ font-size: 10.5px !important; margin-bottom: 24px !important; }
  .hero-actions{ flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto 24px; }
  .hero-actions .btn{ width: 100%; }
  .hero-badges{ margin-bottom: 32px; }
}
@media(max-width: 480px){
  .hero-logo-img{ max-width: 240px !important; }
}

/* ═══════════════════════════════════════════════════
   Multi-Device Section
   ═══════════════════════════════════════════════════ */

.multidevice-section{
  padding: 88px 0 96px;
  background: linear-gradient(180deg,
    #fff 0%,
    rgba(168,216,192,.04) 50%,
    #fff 100%);
  position: relative;
  overflow: hidden;
}
.multidevice-section::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 20% 50%, rgba(140,196,184,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 50%, rgba(126,184,212,.05) 0%, transparent 60%);
}
.multidevice-section > *{ position: relative; }

/* Section head */
.md-head{
  text-align: center;
  margin-bottom: 56px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.md-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(140, 196, 184, .10);
  border: 1px solid rgba(140, 196, 184, .22);
  border-radius: 999px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #5ea89c;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.md-pill-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8cc4b8;
  flex: 0 0 6px;
}
.md-title{
  font-family: var(--font-jp, 'Zen Maru Gothic', sans-serif);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  line-height: 1.4;
  color: var(--tw-text-dark, #3d3330);
  margin: 0 0 18px;
}
.md-lead{
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.85;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0;
}
.md-lead strong{
  background: linear-gradient(110deg, #a8d8c0, #8cc4b8 60%, #6ea69a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* Showcase: 3 devices in artistic layout */
.md-showcase{
  position: relative;
  max-width: 1100px;
  margin: 0 auto 64px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PC frame (center, largest) */
.md-device-pc{
  position: relative;
  z-index: 2;
  width: clamp(420px, 50%, 640px);
  margin: 0;
}
.md-pc-frame{
  background: #2a2825;
  border-radius: 12px 12px 4px 4px;
  padding: 12px 12px 0;
  box-shadow:
    0 20px 60px -10px rgba(50,40,35,.35),
    0 8px 24px -4px rgba(140,196,184,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}
.md-pc-frame::after{
  content: "";
  position: absolute;
  left: -32px;
  right: -32px;
  bottom: -10px;
  height: 18px;
  background: linear-gradient(180deg, #1f1d1b 0%, #0d0c0b 100%);
  border-radius: 4px 4px 14px 14px;
  z-index: -1;
}
.md-pc-bar{
  display: flex;
  gap: 6px;
  padding: 4px 6px 8px;
}
.md-pc-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.md-pc-dot:nth-child(1){ background: #ff5f57; }
.md-pc-dot:nth-child(2){ background: #febc2e; }
.md-pc-dot:nth-child(3){ background: #28c840; }
.md-pc-screen{
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-pc-screen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet (right) */
.md-device-tablet{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(20%) rotate(6deg);
  z-index: 1;
  width: clamp(180px, 22%, 240px);
}
.md-tablet-frame{
  background: #1f1d1b;
  border-radius: 14px;
  padding: 18px 8px;
  position: relative;
  box-shadow:
    0 16px 40px -8px rgba(50,40,35,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.md-tablet-screen{
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.md-tablet-screen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.md-tablet-camera{
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #444;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}

/* Phone (left) */
.md-device-phone{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-15%) rotate(-8deg);
  z-index: 1;
  width: clamp(120px, 14%, 160px);
}
.md-phone-frame{
  background: #1a1816;
  border-radius: 22px;
  padding: 16px 6px;
  position: relative;
  box-shadow:
    0 14px 32px -6px rgba(50,40,35,.32),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.md-phone-notch{
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 12px;
  background: #1a1816;
  border-radius: 0 0 8px 8px;
  z-index: 2;
}
.md-phone-screen{
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
}
.md-phone-screen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Device label */
.md-device-label{
  display: block;
  text-align: center;
  margin-top: 14px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--tw-text-soft, #aba29d);
  text-transform: uppercase;
}
.md-device-tablet .md-device-label,
.md-device-phone .md-device-label{
  transform-origin: center;
}

/* Features grid below */
.md-features{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}
.md-feature{
  text-align: center;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--tw-line-soft, #eef0f2);
  border-radius: 16px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.md-feature:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(50,40,35,.08);
}
.md-feature-icon{
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(168,216,192,.18), rgba(140,196,184,.12));
  border-radius: 14px;
  color: var(--tw-color-teal-deep, #5ea89c);
}
.md-feature h3{
  font-size: 15px;
  font-weight: 900;
  color: var(--tw-text-dark, #3d3330);
  margin: 0 0 8px;
}
.md-feature p{
  font-size: 12px;
  line-height: 1.7;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0;
}

/* Mobile multidevice */
@media(max-width: 768px){
  .multidevice-section{ padding: 64px 0 72px; }
  .md-head{ margin-bottom: 40px; padding: 0 16px; }
  .md-title{ font-size: clamp(22px, 7vw, 30px); }
  .md-lead{ font-size: 13px; }

  .md-showcase{
    height: 360px;
    margin-bottom: 48px;
  }
  .md-device-pc{
    width: 70%;
  }
  .md-device-tablet{
    width: 30%;
    transform: translateY(-50%) translateX(25%) rotate(8deg);
  }
  .md-device-phone{
    width: 20%;
    transform: translateY(-50%) translateX(-20%) rotate(-10deg);
  }

  .md-features{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 16px;
  }
  .md-feature{ padding: 22px 20px; }
}
@media(max-width: 480px){
  .md-showcase{ height: 280px; }
  .md-device-pc{ width: 75%; }
  .md-device-tablet{ width: 32%; transform: translateY(-50%) translateX(30%) rotate(8deg); }
  .md-device-phone{ width: 22%; transform: translateY(-50%) translateX(-25%) rotate(-10deg); }
}


/* ═══════════════════════════════════════════════════
   v128: 二重スクロールバー完全消去 (final clean)
   ═══════════════════════════════════════════════════ */

/* PC (960px以上): mob-nav 関連と hb-btn を完全除去 */
@media (min-width: 960px) {
  .mob-nav-overlay,
  .mob-nav,
  .mob-nav-links,
  .mob-nav-head,
  .hb-btn {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -99999px !important;
  }
}

/* スマホ (959px以下) */
@media (max-width: 959px) {
  .nav {
    display: none !important;
  }
  .hb-btn {
    display: flex !important;
  }
}

/* mob-nav-overlay は body.nav-open の時だけ実体化 */
.mob-nav-overlay {
  display: none;
}
@media (max-width: 959px) {
  body.nav-open .mob-nav-overlay {
    display: block !important;
  }
}

/* html/bodyのデフォルトスクロール挙動を明示的に保証 */
/* overflow-y を auto に上書きしない = ブラウザデフォルトに任せる */
html {
  overflow-x: hidden;
  /* overflow-y は明示しない (デフォルト = visible だが、body の高さ分でスクロール発生) */
}
body {
  overflow-x: hidden;
  /* overflow-y は明示しない */
  position: static; /* relative にしない */
}

/* ═══════════════════════════════════════════════════
   v134: 見切れ修正 + ホバー統一
   ─ pricing-hero-card は overflow:visible に戻す (バッジ復活)
   ─ section overflow-x:clip は維持 (二重スクロール対策)
   ─ 全カードのホバーを統一
   ═══════════════════════════════════════════════════ */

/* 1) section に overflow-x:clip (二重スクロール根絶) */
section {
  overflow-x: clip;
}

/* 2) html / body の overflow-x を clip で保証 */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* 3) シャインアニメ要素の親4つ → pricing-hero-card は除外、
   ::after が上に飛び出すバッジを使っているので overflow:visible */
.pricing-amount,
.issue-num,
.origin-launch-tag {
  overflow: hidden;
  position: relative;
}

/* pricing-hero-card は ::after が "何人でも..." バッジを上端からはみ出させているため
   overflow:visible に保つ。translateXシャインは別の手段で対応 */
.pricing-hero-card {
  overflow: visible !important;
}

/* ═══ ホバー統一: 全カード共通の浮き上がり ═══ */
/* これにより、サイト全体で同じホバー体験を提供 */
.card,
.issue-v-card,
.feature-v-card,
.industry-scene-card,
.pricing-merit,
.edge-card,
.rm-feature,
.md-feature,
.sier-col,
.scene-card,
.benefit-card,
.contact-info-card,
.wa-v2,
.concept-panel,
.saleskit-panel-v2 {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover,
.issue-v-card:hover,
.feature-v-card:hover,
.industry-scene-card:hover,
.pricing-merit:hover,
.edge-card:hover,
.rm-feature:hover,
.md-feature:hover,
.sier-col:hover,
.scene-card:hover,
.benefit-card:hover,
.contact-info-card:hover,
.wa-v2:hover,
.concept-panel:hover,
.saleskit-panel-v2:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 2px rgba(50, 40, 35, 0.04),
    0 12px 28px -6px rgba(50, 40, 35, 0.10) !important;
}

/* pricing-hero-card の特別ホバー: 大型カードなのでより大きく */
.pricing-hero-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-hero-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(50, 40, 35, 0.04),
    0 16px 40px -8px rgba(50, 40, 35, 0.12);
}

/* ═══════════════════════════════════════════════════
   v135: ロードマップ各機能アイコン化 + ラインナップ感UP
   ═══════════════════════════════════════════════════ */

.rm-feature {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
}

.rm-feature-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168,216,192,.15), rgba(140,196,184,.08));
  color: var(--tw-color-teal-deep, #5ea89c);
  flex-shrink: 0;
}

/* Phase-specific icon colors */
.rm-feature-now .rm-feature-icon {
  background: linear-gradient(135deg, rgba(168,216,192,.18), rgba(140,196,184,.12));
  color: #5ea89c;
}
.rm-feature-soon .rm-feature-icon {
  background: linear-gradient(135deg, rgba(249,220,140,.18), rgba(245,204,106,.12));
  color: #b8881e;
}
.rm-feature-future .rm-feature-icon {
  background: linear-gradient(135deg, rgba(126,184,212,.18), rgba(90,157,200,.12));
  color: #4a8eb8;
}

.rm-feature-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rm-feature-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px !important;
}

.rm-feature-name {
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--tw-text-dark, #3d3330);
  letter-spacing: .01em;
}

/* Role badge: ラインナップ感UP */
.rm-feature-role {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  border-radius: 999px;
  background: rgba(168, 216, 192, .12);
  color: var(--tw-color-teal-deep, #5ea89c) !important;
  white-space: nowrap;
}

.rm-feature-now .rm-feature-role {
  background: rgba(168, 216, 192, .14);
  color: #5ea89c !important;
  border: 1px solid rgba(140, 196, 184, .22);
}
.rm-feature-soon .rm-feature-role {
  background: rgba(249, 220, 140, .14);
  color: #b8881e !important;
  border: 1px solid rgba(245, 204, 106, .28);
}
.rm-feature-future .rm-feature-role {
  background: rgba(126, 184, 212, .14);
  color: #4a8eb8 !important;
  border: 1px solid rgba(126, 184, 212, .25);
}

.rm-feature p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--tw-text-mid, #7a6f6a);
  margin: 0;
}

/* Mobile: icon stays on the left but smaller */
@media (max-width: 640px) {
  .rm-feature {
    grid-template-columns: 36px 1fr !important;
    gap: 12px;
    padding: 14px 14px;
  }
  .rm-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .rm-feature-icon svg {
    width: 16px;
    height: 16px;
  }
  .rm-feature-name {
    font-size: 15px !important;
  }
  .rm-feature-role {
    font-size: 9.5px !important;
    padding: 2px 7px;
  }
}


/* ═══════════════════════════════════════════════════
   v138: FEATURES 2-column layout + hotspots (fixed)
   画像位置ずれを修正: grid-template-areas を使用
   ═══════════════════════════════════════════════════ */

/* feature-v-card を2カラム grid に */
.feature-v-card.feat-active {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.2fr);
  grid-template-areas:
    "title  mock"
    "role   mock"
    "list   mock"
    "tag    mock"
    "btn    mock";
  gap: 32px;
  align-items: start;
  padding: 36px 36px !important;
}

/* Assign each left-side element to grid area */
.feature-v-card.feat-active .feature-title {
  grid-area: title;
  margin: 0 0 12px;
}
.feature-v-card.feat-active .feature-role {
  grid-area: role;
  margin: 0 0 14px;
}
.feature-v-card.feat-active .feature-v-list {
  grid-area: list;
  margin: 0 0 14px;
}
.feature-v-card.feat-active .feature-tagline {
  grid-area: tag;
  margin: 0 0 14px;
}
.feature-v-card.feat-active .industry-detail-btn {
  grid-area: btn;
  margin: 0;
  align-self: start;
}

/* Mock area (右側) */
.feat-mock-wrap {
  grid-area: mock;
  position: relative;
  background: linear-gradient(135deg, #f5fbf8, #fafdfc);
  border: 1px solid rgba(140, 196, 184, .15);
  border-radius: 18px;
  padding: 20px;
  align-self: center;
  justify-self: stretch;
  width: 100%;
}

/* Mini-UI image (the SVG mockup) */
.feature-v-card.feat-active .mini-ui {
  display: block !important;
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px -6px rgba(50, 40, 35, .12);
  margin: 0;
}
.feature-v-card.feat-active .mini-ui svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Hotspot layer */
.feat-hotspot-layer {
  position: absolute;
  inset: 20px;
  pointer-events: none;
  z-index: 2;
}

.feat-hotspot {
  position: absolute;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

/* Hotspot marker (number bubble) */
.feat-hotspot-marker {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #8cc4b8, #5ea89c);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(94, 168, 156, .4);
  cursor: pointer;
  transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.feat-hotspot-marker:hover {
  transform: scale(1.15);
}

/* Pulse ring animation */
.feat-hs-pulse {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #8cc4b8;
  opacity: 0.5;
  animation: hsPulse 2s ease-out infinite;
}
@keyframes hsPulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

.feat-hs-num {
  position: relative;
  z-index: 2;
}

/* Tooltip on hover */
.feat-hotspot-tooltip {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid rgba(140, 196, 184, .25);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 170px;
  max-width: 220px;
  box-shadow: 0 8px 24px -4px rgba(50, 40, 35, .15);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
  z-index: 10;
  pointer-events: none;
}
.feat-hotspot:hover .feat-hotspot-tooltip {
  opacity: 1;
  visibility: visible;
}
.feat-hotspot-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #fff;
}
.feat-hs-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--tw-text-dark, #3d3330);
  margin-bottom: 2px;
}
.feat-hs-desc {
  display: block;
  font-size: 11px;
  color: var(--tw-text-mid, #7a6f6a);
  line-height: 1.5;
}

/* Hotspots near right edge: flip tooltip left */
.feat-hotspot[style*="left:65%"] .feat-hotspot-tooltip,
.feat-hotspot[style*="left:70%"] .feat-hotspot-tooltip,
.feat-hotspot[style*="left:75%"] .feat-hotspot-tooltip,
.feat-hotspot[style*="left:80%"] .feat-hotspot-tooltip {
  left: auto;
  right: calc(100% + 12px);
}
.feat-hotspot[style*="left:65%"] .feat-hotspot-tooltip::before,
.feat-hotspot[style*="left:70%"] .feat-hotspot-tooltip::before,
.feat-hotspot[style*="left:75%"] .feat-hotspot-tooltip::before,
.feat-hotspot[style*="left:80%"] .feat-hotspot-tooltip::before {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #fff;
}

/* Mobile: stack vertically */
@media (max-width: 880px) {
  .feature-v-card.feat-active {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "role"
      "mock"
      "list"
      "tag"
      "btn" !important;
    gap: 18px;
    padding: 24px 20px !important;
  }
  .feat-mock-wrap {
    padding: 14px;
    margin-top: 4px;
  }
  .feat-hotspot-marker {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }
  .feat-hotspot-tooltip {
    min-width: 130px;
    max-width: 180px;
    padding: 8px 12px;
  }
  .feat-hs-title { font-size: 12px; }
  .feat-hs-desc { font-size: 10px; }
}
@media (max-width: 480px) {
  .feature-v-card.feat-active {
    padding: 18px 14px !important;
  }
  .feat-mock-wrap {
    padding: 10px;
  }
}

/* Demo section: embedded demo fills the frame */
#demo .demo-frame,
#demo .demo-device,
#demo .demo-screen,
#demo .demo-embed,
#demo .demo-iframe-wrap {
  width: 100% !important;
  max-width: none !important;
}

#demo .demo-screen {
  padding: 0 !important;
  overflow: hidden;
}

#demo iframe,
#demo object,
#demo embed {
  width: 100% !important;
  height: 100% !important;
  min-height: 640px;
  display: block;
  border: 0;
}

@media (max-width: 768px) {
  #demo iframe,
  #demo object,
  #demo embed {
    min-height: 520px;
  }
}

/* ═══════════════════════════
   CUSTOM OVERRIDES v2
   ═══════════════════════════ */

/* --- ① セクション見出し・本文を中央揃え（issues / connect / features / scenes） --- */
.issues-header,
.solution-header,
.features-header,
.industry-scene-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--sp-7);
}
.issues-header .section-pill,
.solution-header .section-pill,
.features-header .section-pill,
.industry-scene-header .section-pill {
  margin: 0 auto var(--sp-3);
}
.issues-header .brand-dots,
.solution-header .brand-dots,
.features-header .brand-dots,
.industry-scene-header .brand-dots {
  justify-content: center;
}
.issues-header h2,
.solution-header h2,
.features-header h2,
.industry-scene-header h2 {
  text-align: center;
}
.issues-header p,
.solution-header p,
.features-header p,
.industry-scene-header p {
  text-align: center;
  font-size: 15px;
  color: var(--text);
  line-height: 1.8;
}

/* --- ② 統一まとめブロック (.section-summary-block) --- */
.section-summary-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  text-align: center;
  position: relative;
}
.section-summary-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sp-7);
  right: var(--sp-7);
  height: 3px;
  background: var(--grad);
  border-radius: 0 0 3px 3px;
}
.section-summary-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}
.section-summary-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
}
.section-summary-copy {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
  text-align: left;
}
.section-summary-copy span {
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
}
.section-summary-copy small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-top: 2px;
}
.section-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1.5px solid var(--teal-d);
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-d);
  text-decoration: none;
  transition: all var(--t-base) var(--ease);
  background: transparent;
}
.section-summary-btn:hover {
  background: var(--teal-d);
  color: #fff;
}
.section-summary-btn i { font-size: 12px; }

/* --- ③ 料金カード改善 (.pricing-hero-card) --- */
.pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  max-width: 1080px;
  margin: 0 auto var(--sp-6);
}
.pricing-plan-card {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.pricing-plan-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sp-5);
  right: var(--sp-5);
  height: 4px;
  background: var(--grad);
  border-radius: 0 0 4px 4px;
}
.pricing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(94,168,156,.12);
}
.pricing-plan-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  background: rgba(140,196,184,.10);
  color: var(--teal-d);
  border-radius: var(--r-md);
  font-size: 24px;
}
.pricing-plan-label {
  display: inline-block;
  background: var(--teal-d);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 14px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
}
.pricing-plan-amount {
  margin-bottom: var(--sp-3);
}
.pricing-plan-yen {
  font-size: 22px;
  font-weight: 800;
  color: var(--teal-d);
  vertical-align: top;
  line-height: 1.4;
}
.pricing-plan-num {
  font-family: var(--font-base);
  font-size: clamp(44px, 7vw, 64px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.04em;
  line-height: 1;
}
.pricing-plan-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.pricing-plan-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
  min-height: 56px;
}
.pricing-plan-list {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pricing-plan-list li {
  font-size: 13px;
  color: var(--ink);
  padding-left: var(--sp-4);
  position: relative;
  line-height: 1.5;
}
.pricing-plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal-d);
  font-weight: 900;
}
.pricing-plan-note {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}

/* responsive */
@media(max-width:680px){
  .pricing-plan-grid { grid-template-columns: 1fr; }
  .section-summary-block { padding: var(--sp-5) var(--sp-4); }
  .section-summary-copy { text-align: center; }
  .section-summary-btn { width: 100%; justify-content: center; }
}


/* Pricing section refinement */
.pricing-summary-block{
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
}
@media(min-width:681px){
  .pricing-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:960px) and (min-width:681px){
  .pricing-plan-card{padding:var(--sp-5) var(--sp-4);}
  .pricing-plan-desc{min-height:72px;}
  .pricing-plan-list li{font-size:12px;}
}

/* Hero logo natural blend adjustment */
.hero-logo-img{
  filter:none !important;
  background:transparent !important;
  box-shadow:none !important;
}



/* ═══════════════════════════════════════════════════
   v136: Hero 左右分割 + デバイスモック追加
   - 既存テキストは変更せず、右側にPC/Tablet/Phoneを追加
   ═══════════════════════════════════════════════════ */
@media (min-width: 961px){
  .hero{
    padding: calc(var(--tw-header-h, 64px) + 46px) 0 56px !important;
  }
  .hero-container-v2{
    max-width: 1240px !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr) !important;
    align-items: center !important;
    gap: clamp(36px, 5vw, 72px) !important;
    padding: 0 32px !important;
  }
  .hero-copy{
    align-items: flex-start !important;
    text-align: left !important;
  }
  .hero-copy > *{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-brand{
    margin-left: 0 !important;
  }
  .hero-logo-img{
    margin-left: 0 !important;
    max-width: 420px !important;
  }
  .hero-copy .brand-dots{
    margin-left: 0 !important;
  }
  .hero-h1{
    align-items: flex-start !important;
  }
  .hero-actions,
  .hero-badges{
    justify-content: flex-start !important;
  }
}

.hero-device-stage{
  position: relative;
  min-height: 520px;
  display: none;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
@media (min-width: 961px){
  .hero-device-stage{ display: flex; }
}
.hero-device-stage::before{
  content: "";
  position: absolute;
  width: min(520px, 88%);
  aspect-ratio: 1;
  border-radius: 42% 58% 60% 40% / 42% 42% 58% 58%;
  background:
    radial-gradient(circle at 26% 20%, rgba(240,168,184,.18), transparent 36%),
    radial-gradient(circle at 78% 26%, rgba(126,184,212,.18), transparent 38%),
    linear-gradient(135deg, rgba(168,216,192,.16), rgba(140,196,184,.08));
  filter: blur(.2px);
  z-index: -2;
}
.hero-device-stage::after{
  content: "";
  position: absolute;
  left: 8%;
  right: 5%;
  bottom: 40px;
  height: 42px;
  background: radial-gradient(ellipse, rgba(50,40,35,.18), transparent 70%);
  z-index: -1;
}
.hero-device-pc{
  width: min(560px, 92%);
  transform: translateX(8px);
  position: relative;
  z-index: 2;
}
.hero-device-pc-frame{
  background: #2a2825;
  border-radius: 16px 16px 8px 8px;
  padding: 12px 12px 0;
  box-shadow:
    0 26px 70px -22px rgba(50,40,35,.50),
    0 12px 28px -14px rgba(94,168,156,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-device-topbar{
  display: flex;
  gap: 6px;
  padding: 2px 4px 10px;
}
.hero-device-topbar span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.hero-device-topbar span:nth-child(1){ background:#f0a8b8; }
.hero-device-topbar span:nth-child(2){ background:#f5c8a8; }
.hero-device-topbar span:nth-child(3){ background:#a8d8c0; }
.hero-device-screen{
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
}
.hero-device-pc-base{
  width: 74%;
  height: 18px;
  margin: 0 auto;
  background: linear-gradient(180deg, #292622, #11100f);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 14px 24px -18px rgba(50,40,35,.6);
}
.hero-device-tablet{
  position: absolute;
  right: 5%;
  bottom: 78px;
  width: 190px;
  transform: rotate(6deg);
  z-index: 4;
}
.hero-device-tablet-frame{
  background: #22201e;
  border-radius: 18px;
  padding: 12px 8px;
  box-shadow: 0 22px 42px -24px rgba(50,40,35,.55);
}
.hero-device-tablet .hero-device-screen{
  aspect-ratio: 4 / 5.2;
  border-radius: 12px;
}
.hero-device-phone{
  position: absolute;
  left: 7%;
  bottom: 50px;
  width: 118px;
  transform: rotate(-8deg);
  z-index: 5;
}
.hero-device-phone-frame{
  background: #1f1d1b;
  border-radius: 24px;
  padding: 10px 6px;
  box-shadow: 0 22px 42px -24px rgba(50,40,35,.60);
}
.hero-device-phone .hero-device-screen{
  aspect-ratio: 9 / 18;
  border-radius: 18px;
}
.hero-device-notch{
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(31,29,27,.25);
  z-index: 2;
}
.hero-ui{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  background: linear-gradient(180deg,#ffffff 0%,#fbfcfb 100%);
  color: #3d3330;
  font-family: var(--font-base, 'Nunito', sans-serif);
}
.hero-ui-header{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f2;
}
.hero-ui-logo{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: linear-gradient(135deg,#a8d8c0,#8cc4b8);
}
.hero-ui-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}
.hero-ui-pill{
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(168,216,192,.15);
  color: #6ea69a;
  font-size: 9px;
  font-weight: 800;
}
.hero-ui-body{
  display: grid;
  grid-template-columns: 30% 1fr;
  min-height: 0;
}
.hero-ui-sidebar{
  padding: 14px 12px;
  background: #fafbfc;
  border-right: 1px solid #eef0f2;
}
.hero-ui-menu{
  height: 10px;
  border-radius: 999px;
  background: #e8efec;
  margin-bottom: 10px;
}
.hero-ui-menu:nth-child(1){ width: 78%; background: #cfe8dc; }
.hero-ui-menu:nth-child(2){ width: 62%; }
.hero-ui-menu:nth-child(3){ width: 86%; }
.hero-ui-menu:nth-child(4){ width: 55%; }
.hero-ui-main{
  padding: 16px;
  display: grid;
  gap: 12px;
}
.hero-ui-card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hero-ui-card{
  min-height: 54px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eef0f2;
  box-shadow: 0 4px 10px -8px rgba(50,40,35,.20);
  position: relative;
  overflow: hidden;
}
.hero-ui-card::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 30px;
  height: 8px;
  border-radius: 999px;
  background: #cfe8dc;
}
.hero-ui-card::after{
  content: "";
  position: absolute;
  left: 12px;
  top: 28px;
  width: 55%;
  height: 6px;
  border-radius: 999px;
  background: #eef0f2;
}
.hero-ui-panel{
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(168,216,192,.12), rgba(126,184,212,.08));
  border: 1px solid #eef0f2;
  min-height: 96px;
  padding: 16px;
  display: grid;
  gap: 9px;
}
.hero-ui-line{
  height: 9px;
  border-radius: 999px;
  background: rgba(122,111,106,.12);
}
.hero-ui-line:nth-child(1){ width: 48%; background: rgba(94,168,156,.28); }
.hero-ui-line:nth-child(2){ width: 82%; }
.hero-ui-line:nth-child(3){ width: 68%; }
.hero-ui-line:nth-child(4){ width: 74%; }
.hero-device-tablet .hero-ui-header{
  padding: 10px;
}
.hero-device-tablet .hero-ui-body{
  grid-template-columns: 1fr;
}
.hero-device-tablet .hero-ui-sidebar{
  display: none;
}
.hero-device-tablet .hero-ui-main{
  padding: 12px;
}
.hero-device-tablet .hero-ui-card-grid{
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hero-device-tablet .hero-ui-card{
  min-height: 44px;
}
.hero-device-phone .hero-ui-header{
  padding: 18px 8px 8px;
  justify-content: center;
}
.hero-device-phone .hero-ui-logo{
  width: 18px;
  height: 18px;
}
.hero-device-phone .hero-ui-title,
.hero-device-phone .hero-ui-pill,
.hero-device-phone .hero-ui-sidebar{
  display: none;
}
.hero-device-phone .hero-ui-body{
  display: block;
}
.hero-device-phone .hero-ui-main{
  padding: 10px 8px;
  gap: 8px;
}
.hero-device-phone .hero-ui-card-grid{
  grid-template-columns: 1fr;
  gap: 8px;
}
.hero-device-phone .hero-ui-card{
  min-height: 38px;
  border-radius: 10px;
}
.hero-device-phone .hero-ui-panel{
  min-height: 104px;
  border-radius: 12px;
  padding: 10px;
}
@media (max-width: 960px){
  .hero-device-stage{ display: none !important; }
}



/* ═══════════════════════════════════════════════════
   v137: Hero display alignment tweaks
   - Connected Work Platform centered
   - Brand dots centered relative to wo:nnect logo
   - Hero title and badges kept on one line
   ═══════════════════════════════════════════════════ */
.hero-h1-main{
  white-space: nowrap !important;
}
.hero-badges{
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.hero-badges .badge-item{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
}
.hero-badges .badge-num{
  flex: 0 0 auto !important;
}
.hero-copy .brand-dots{
  width: min(420px, 100%) !important;
  justify-content: center !important;
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (min-width: 961px){
  .hero{
    position: relative !important;
    padding-top: calc(var(--tw-header-h, 64px) + 76px) !important;
  }
  .hero-platform-label{
    position: absolute !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .hero-brand{
    width: min(420px, 100%) !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-logo-img{
    max-width: 420px !important;
  }
  .hero-h1-main{
    font-size: clamp(34px, 4.4vw, 54px) !important;
  }
  .hero-badges{
    gap: 8px !important;
  }
  .hero-badges .badge-item{
    font-size: 10.5px !important;
    padding: 7px 10px !important;
  }
}
@media (max-width: 960px){
  .hero-platform-label{
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
  }
  .hero-copy .brand-dots{
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-badges{
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}
@media (max-width: 640px){
  .hero-h1-main{
    font-size: clamp(30px, 8.8vw, 40px) !important;
  }
  .hero-badges .badge-item{
    white-space: nowrap !important;
  }
}
@media (max-width: 380px){
  .hero-h1-main{
    font-size: clamp(26px, 8vw, 32px) !important;
  }
}



/* ═══════════════════════════════════════════════════
   v138: Hero label and work-connect alignment
   - Connected Work Platform placed like section pill above headline
   - work × connect centered against wo:nnect logo block
   ═══════════════════════════════════════════════════ */
.hero-copy{
  align-items: flex-start !important;
}
.hero-brand,
.hero-copy .brand-dots,
.hero-platform-label,
.hero-h1{
  width: min(420px, 100%) !important;
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.hero-brand{
  display: flex !important;
  justify-content: center !important;
}
.hero-copy .brand-dots{
  display: flex !important;
  justify-content: center !important;
  margin-top: 8px !important;
  margin-bottom: 18px !important;
}
.hero-platform-label{
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  align-self: center !important;
  margin: 0 auto 22px auto !important;
  white-space: nowrap !important;
}
.hero-h1{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 26px !important;
}
.hero-h1-en{
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}
@media (min-width: 961px){
  .hero{
    padding-top: calc(var(--tw-header-h, 64px) + 48px) !important;
  }
  .hero-platform-label{
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
}
@media (max-width: 960px){
  .hero-copy{
    align-items: center !important;
  }
  .hero-brand,
  .hero-copy .brand-dots,
  .hero-h1{
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-platform-label{
    align-self: center !important;
  }
}



/* ═══════════════════════════════════════════════════
   v109: Compact Concept Section
   ═══════════════════════════════════════════════════ */
.hello-section{
  padding: 56px 0 64px;
}
.concept-compact{
  display: grid;
  gap: 18px;
}
.concept-hero-card{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--tw-line-soft, #eef0f2);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(50,40,35,.03), 0 10px 28px -12px rgba(50,40,35,.10);
}
.concept-mini-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(140,196,184,.24);
  border-radius: 999px;
  color: var(--tw-color-teal-deep, #6ea69a);
  background: rgba(168,216,192,.12);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}
.concept-mini-label::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tw-color-teal, #8cc4b8);
}
.concept-hero-card h2{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: .02em;
}
.concept-lead{
  margin: 0;
  color: var(--tw-text-mid, #7a6f6a);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 600;
}
.concept-lead strong{
  font-family: var(--font-base, 'Nunito', sans-serif);
  color: var(--tw-color-teal-deep, #6ea69a);
  font-weight: 900;
}
.concept-lead em{
  font-style: normal;
  color: var(--tw-text-dark, #3d3330);
  font-weight: 800;
}
.name-meaning-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.name-meaning-item{
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--concept-tint);
  border: 1px solid var(--concept-border);
}
.name-meaning-item span{
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0 8px;
  border-radius: 12px;
  background: #fff;
  color: var(--concept-color);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(50,40,35,.04);
}
.name-meaning-item p{
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tw-text-mid, #7a6f6a);
  font-weight: 700;
}
.name-meaning-item.pink{--concept-color:#e56f91;--concept-tint:rgba(240,168,184,.10);--concept-border:rgba(229,111,145,.18)}
.name-meaning-item.orange{--concept-color:#d49462;--concept-tint:rgba(245,200,168,.12);--concept-border:rgba(212,148,98,.20)}
.name-meaning-item.green{--concept-color:#4aaa68;--concept-tint:rgba(168,216,192,.12);--concept-border:rgba(74,170,104,.18)}
.name-meaning-item.teal{--concept-color:#5ea89c;--concept-tint:rgba(140,196,184,.12);--concept-border:rgba(94,168,156,.20)}

.concept-card-row{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.concept-mini-card{
  min-height: 168px;
  padding: 18px 14px 16px;
  background: rgba(255,255,255,.94);
  border: 1.5px solid var(--wa-border);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(50,40,35,.03), 0 8px 22px -12px rgba(50,40,35,.10);
}
.concept-card-icon{
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--wa-color);
  color: #fff;
  font-size: 21px;
  box-shadow: 0 6px 16px var(--wa-shadow);
}
.concept-card-icon.infinity-symbol{
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}
.concept-mini-card h3{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--wa-color) !important;
  line-height: 1;
}
.concept-mini-card h3 span{
  font-size: 24px;
  font-weight: 900;
}
.concept-mini-card h3 small{
  font-size: 13px;
  font-weight: 800;
}
.concept-mini-card p{
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--tw-text-mid, #7a6f6a);
  font-weight: 600;
}
.concept-mini-card.wa-pink{--wa-color:#e56f91;--wa-border:rgba(229,111,145,.20);--wa-shadow:rgba(229,111,145,.22)}
.concept-mini-card.wa-orange{--wa-color:#f0a040;--wa-border:rgba(240,160,64,.22);--wa-shadow:rgba(240,160,64,.22)}
.concept-mini-card.wa-green{--wa-color:#4aaa68;--wa-border:rgba(74,170,104,.22);--wa-shadow:rgba(74,170,104,.20)}
.concept-mini-card.wa-teal{--wa-color:#5ea89c;--wa-border:rgba(94,168,156,.24);--wa-shadow:rgba(94,168,156,.22)}
.concept-mini-card.wa-blue{--wa-color:#5a9dc8;--wa-border:rgba(90,157,200,.22);--wa-shadow:rgba(90,157,200,.20)}

@media(max-width: 960px){
  .concept-hero-card{
    grid-template-columns: 1fr;
  }
  .concept-card-row{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media(max-width: 640px){
  .hello-section{padding: 42px 0 48px;}
  .concept-compact{gap: 12px;}
  .concept-hero-card{
    padding: 22px 18px;
    border-radius: 20px;
    gap: 18px;
  }
  .concept-hero-card h2{
    font-size: 24px;
    text-align: center;
  }
  .concept-hero-copy{text-align:center;}
  .concept-lead{
    font-size: 13px;
    line-height: 1.75;
  }
  .name-meaning-grid{
    grid-template-columns: 1fr;
  }
  .name-meaning-item{
    grid-template-columns: 58px 1fr;
    padding: 11px 12px;
  }
  .concept-card-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .concept-mini-card{
    min-height: 150px;
    padding: 15px 12px;
    border-radius: 16px;
  }
  .concept-mini-card:last-child{
    grid-column: 1 / -1;
    min-height: 130px;
  }
  .concept-card-icon{
    width: 46px;
    height: 46px;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .concept-card-icon.infinity-symbol{font-size:30px;}
  .concept-mini-card h3 span{font-size:21px;}
  .concept-mini-card h3 small{font-size:12px;}
  .concept-mini-card p{font-size:11.5px;line-height:1.55;}
}


/* ═══ v110: Concept alignment & pastel refinement ═══ */
.concept-section-head{
  text-align:center;
  margin:0 auto 28px;
}
.concept-section-head .concept-mini-label{
  margin:0 auto;
}
.concept-hero-copy .concept-mini-label{
  display:none !important;
}
.concept-title-gradient{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:.02em;
}
.concept-title-gradient .c-pink{color:#f4b0a7}
.concept-title-gradient .c-peach{color:#f4cf84}
.concept-title-gradient .c-mint{color:#abd9b8}
.concept-title-gradient .c-teal{color:#86c5bb}
.concept-hero-card h2{
  text-align:center;
}
.concept-lead{
  text-align:center;
}
.concept-mini-card h3{
  color:var(--wa-text) !important;
}
.concept-card-icon{
  background:var(--wa-icon);
  box-shadow:0 6px 16px var(--wa-shadow);
}
.concept-mini-card.wa-pink{--wa-color:#f4a8bd;--wa-text:#e99ab1;--wa-icon:#f4a8bd;--wa-border:rgba(244,168,189,.18);--wa-shadow:rgba(244,168,189,.16)}
.concept-mini-card.wa-orange{--wa-color:#f6c886;--wa-text:#eebc70;--wa-icon:#f6c886;--wa-border:rgba(246,200,134,.20);--wa-shadow:rgba(246,200,134,.16)}
.concept-mini-card.wa-green{--wa-color:#98d4a8;--wa-text:#78c891;--wa-icon:#98d4a8;--wa-border:rgba(152,212,168,.20);--wa-shadow:rgba(152,212,168,.15)}
.concept-mini-card.wa-teal{--wa-color:#84c8bf;--wa-text:#72bdb4;--wa-icon:#84c8bf;--wa-border:rgba(132,200,191,.20);--wa-shadow:rgba(132,200,191,.15)}
.concept-mini-card.wa-blue{--wa-color:#9acddd;--wa-text:#83c0d2;--wa-icon:#9acddd;--wa-border:rgba(154,205,221,.20);--wa-shadow:rgba(154,205,221,.15)}
@media(max-width:640px){
  .concept-section-head{margin-bottom:18px;}
  .concept-title-gradient{display:inline-flex;}
}



/* ═══ v111: Concept heading layout & name meaning one-line row ═══ */
#concept .concept-section-head{
  text-align:center !important;
  max-width:780px;
  margin:0 auto 30px !important;
}
#concept .concept-section-head .section-pill{
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:14px !important;
}
#concept .concept-section-head .brand-dots{
  justify-content:center !important;
  margin:0 auto 18px !important;
}
#concept .concept-section-head h2{
  margin:0 0 14px !important;
  font-size:clamp(28px,3.8vw,44px) !important;
  line-height:1.25 !important;
  text-align:center !important;
}
#concept .concept-section-head p{
  margin:0 auto !important;
  max-width:720px;
  color:var(--tw-text-mid, #7a6f6a) !important;
  font-size:15px !important;
  line-height:1.8 !important;
  font-weight:600;
  text-align:center !important;
}
#concept .concept-section-head p strong{
  font-family:var(--font-base, 'Nunito', sans-serif);
  color:var(--tw-color-teal-deep, #6ea69a) !important;
  font-weight:900;
}
#concept .concept-section-head p em{
  font-style:normal;
  color:var(--tw-text-dark, #3d3330) !important;
  font-weight:800;
}
#concept .concept-name-row-card{
  display:block !important;
  padding:20px 22px !important;
}
#concept .concept-name-row-card .name-meaning-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:10px !important;
  margin:0 !important;
}
#concept .concept-name-row-card .name-meaning-item{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  gap:10px !important;
  align-items:center !important;
  min-height:64px;
  padding:12px 14px !important;
}
#concept .concept-name-row-card .name-meaning-item span{
  min-width:48px;
  min-height:38px;
  padding:0 10px;
  white-space:nowrap;
}
#concept .concept-name-row-card .name-meaning-item p{
  font-size:11.5px !important;
  line-height:1.45 !important;
  text-align:left !important;
}
#concept .concept-hero-copy{
  display:none !important;
}
@media(max-width:960px){
  #concept .concept-name-row-card .name-meaning-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media(max-width:640px){
  #concept .concept-section-head{
    margin-bottom:20px !important;
  }
  #concept .concept-section-head h2{
    font-size:24px !important;
  }
  #concept .concept-section-head p{
    font-size:13px !important;
    line-height:1.75 !important;
  }
  #concept .concept-name-row-card{
    padding:16px !important;
  }
  #concept .concept-name-row-card .name-meaning-grid{
    grid-template-columns:1fr !important;
  }
  #concept .concept-name-row-card .name-meaning-item{
    min-height:0;
  }
}


/* v106: Feature roadmap summary uses common section summary UI */
.roadmap-summary{max-width:760px;margin:var(--sp-6) auto 0;}
.roadmap-summary .check{background:var(--tw-gradient-mint-teal, var(--grad));}
@media(max-width:640px){.roadmap-summary{text-align:center;align-items:center;}}



/* ═══════════════════════════════════════════════════
   TOP修正: ラベル中央寄せ・CTA配置
   ═══════════════════════════════════════════════════ */
.hero > .hero-platform-label{
  display:inline-flex !important;
  width:fit-content;
  max-width:calc(100% - 32px);
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center;
}
.hero-contact-action{
  display:flex;
  justify-content:center;
  margin:28px auto 0;
}
.hero-contact-action .btn{
  min-width:200px;
}
@media(max-width:768px){
  .hero{ text-align:center; }
  .hero > .hero-platform-label{
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .hero-contact-action{
    width:100%;
    max-width:320px;
    margin-top:24px;
  }
  .hero-contact-action .btn{
    width:100%;
  }
}


/* ChatGPT adjustment: center hero title/subtitle/contact button under logo */
.hero-copy,
.hero-copy-inner{
  align-items:center !important;
  text-align:center !important;
}
.hero-h1,
.hero-h1-main,
.hero-lead,
.hero-contact-action{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
.hero-contact-action{
  display:flex !important;
  justify-content:center !important;
}


/* ChatGPT adjustment: concept name diagram */
.concept-name-diagram-card{
  padding:clamp(28px,4vw,48px) clamp(24px,5vw,56px);
  overflow:hidden;
}
.name-diagram{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "wo nnect"
    "logo logo"
    "colon nn";
  gap:clamp(18px,2.6vw,34px) clamp(28px,5vw,88px);
  align-items:center;
  max-width:1040px;
  margin:0 auto;
}
.name-diagram-logo-wrap{
  grid-area:logo;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  padding:clamp(10px,2vw,24px) 0;
}
.name-diagram-logo{
  width:min(620px,82vw);
  max-width:100%;
  height:auto;
  filter:drop-shadow(0 8px 20px rgba(50,40,35,.06));
}
.name-diagram-callout{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  min-height:92px;
  padding:18px 24px;
  background:rgba(255,255,255,.82);
  border:2px solid var(--callout-color);
  border-radius:18px;
  box-shadow:0 4px 18px rgba(50,40,35,.05);
  z-index:2;
}
.name-diagram-callout::after{
  content:"";
  position:absolute;
  width:2px;
  height:44px;
  background:var(--callout-color);
  opacity:.75;
  transform-origin:center;
}
.name-diagram-callout::before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--callout-color);
  box-shadow:0 0 0 4px rgba(255,255,255,.95);
  z-index:3;
}
.name-diagram-callout p{
  margin:0;
  color:var(--ink);
  font-size:clamp(14px,1.6vw,18px);
  font-weight:600;
  line-height:1.65;
}
.name-diagram-callout b{
  font-family:var(--font-base);
  font-size:1.1em;
  font-weight:900;
}
.callout-num{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--callout-color);
  font-family:var(--font-base);
  font-size:22px;
  font-weight:900;
  box-shadow:0 4px 12px color-mix(in srgb, var(--callout-color) 36%, transparent);
}
.callout-wo{
  grid-area:wo;
  --callout-color:var(--pink-text);
  justify-self:start;
}
.callout-wo::after{
  left:42%;
  bottom:-45px;
  transform:rotate(38deg);
}
.callout-wo::before{
  left:47%;
  bottom:-55px;
}
.callout-nnect{
  grid-area:nnect;
  --callout-color:var(--orange);
  justify-self:end;
}
.callout-nnect::after{
  left:50%;
  bottom:-45px;
  transform:rotate(18deg);
}
.callout-nnect::before{
  left:46%;
  bottom:-56px;
}
.callout-colon{
  grid-area:colon;
  --callout-color:var(--green);
  justify-self:center;
}
.callout-colon::after{
  left:54%;
  top:-45px;
  transform:rotate(32deg);
}
.callout-colon::before{
  left:50%;
  top:-56px;
}
.callout-nn{
  grid-area:nn;
  --callout-color:var(--teal-d);
  justify-self:center;
}
.callout-nn::after{
  left:36%;
  top:-45px;
  transform:rotate(-22deg);
}
.callout-nn::before{
  left:32%;
  top:-56px;
}
@media(max-width:768px){
  .concept-name-diagram-card{
    padding:24px 16px;
  }
  .name-diagram{
    grid-template-columns:1fr;
    grid-template-areas:
      "logo"
      "wo"
      "nnect"
      "colon"
      "nn";
    gap:12px;
  }
  .name-diagram-logo-wrap{
    padding:4px 0 12px;
  }
  .name-diagram-logo{
    width:min(340px,88vw);
  }
  .name-diagram-callout{
    width:100%;
    min-height:auto;
    padding:14px 16px;
    border-radius:16px;
    gap:12px;
  }
  .name-diagram-callout::before,
  .name-diagram-callout::after{
    display:none;
  }
  .callout-num{
    flex-basis:34px;
    width:34px;
    height:34px;
    font-size:18px;
  }
  .name-diagram-callout p{
    font-size:13px;
    line-height:1.55;
    text-align:left;
  }
}


/* ChatGPT adjustment v2: make concept name diagram compact and horizontal */
.concept-name-diagram-card-compact{
  padding:24px 44px !important;
  min-height:auto !important;
}
.name-diagram-compact{
  display:grid !important;
  grid-template-columns:1fr minmax(420px, 620px) 1fr !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:
    "wo logo nnect"
    "colon logo nn" !important;
  gap:18px 24px !important;
  align-items:center !important;
  max-width:1080px !important;
  min-height:250px !important;
}
.name-diagram-compact .name-diagram-logo-wrap{
  grid-area:logo !important;
  padding:0 !important;
  align-self:center !important;
}
.name-diagram-compact .name-diagram-logo{
  width:min(620px,46vw) !important;
  max-width:100% !important;
}
.name-diagram-compact .name-diagram-callout{
  min-height:72px !important;
  width:100% !important;
  padding:14px 18px !important;
  border-radius:16px !important;
  gap:12px !important;
}
.name-diagram-compact .name-diagram-callout p{
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  font-size:14px !important;
  line-height:1.45 !important;
}
.name-diagram-compact .name-diagram-callout p b{
  font-size:16px !important;
  line-height:1.1 !important;
}
.name-diagram-compact .name-diagram-callout p span{
  display:block !important;
}
.name-diagram-compact .callout-num{
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
  font-size:18px !important;
}
.name-diagram-compact .name-diagram-callout::after{
  height:22px !important;
}
.name-diagram-compact .callout-wo{
  justify-self:end !important;
}
.name-diagram-compact .callout-wo::after{
  right:-18px !important;
  left:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:rotate(62deg) !important;
}
.name-diagram-compact .callout-wo::before{
  right:-26px !important;
  left:auto !important;
  top:63% !important;
  bottom:auto !important;
}
.name-diagram-compact .callout-nnect{
  justify-self:start !important;
}
.name-diagram-compact .callout-nnect::after{
  left:-18px !important;
  top:50% !important;
  bottom:auto !important;
  transform:rotate(-62deg) !important;
}
.name-diagram-compact .callout-nnect::before{
  left:-26px !important;
  top:63% !important;
  bottom:auto !important;
}
.name-diagram-compact .callout-colon{
  justify-self:end !important;
}
.name-diagram-compact .callout-colon::after{
  right:-18px !important;
  left:auto !important;
  top:20% !important;
  bottom:auto !important;
  transform:rotate(-62deg) !important;
}
.name-diagram-compact .callout-colon::before{
  right:-26px !important;
  left:auto !important;
  top:8% !important;
  bottom:auto !important;
}
.name-diagram-compact .callout-nn{
  justify-self:start !important;
}
.name-diagram-compact .callout-nn::after{
  left:-18px !important;
  top:20% !important;
  bottom:auto !important;
  transform:rotate(62deg) !important;
}
.name-diagram-compact .callout-nn::before{
  left:-26px !important;
  top:8% !important;
  bottom:auto !important;
}

@media(max-width:960px){
  .concept-name-diagram-card-compact{
    padding:22px 18px !important;
  }
  .name-diagram-compact{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto auto !important;
    grid-template-areas:
      "logo logo"
      "wo nnect"
      "colon nn" !important;
    gap:12px !important;
    min-height:auto !important;
  }
  .name-diagram-compact .name-diagram-logo{
    width:min(460px,82vw) !important;
  }
  .name-diagram-compact .name-diagram-callout::before,
  .name-diagram-compact .name-diagram-callout::after{
    display:none !important;
  }
}
@media(max-width:640px){
  .name-diagram-compact{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "logo"
      "wo"
      "nnect"
      "colon"
      "nn" !important;
  }
}


/* ChatGPT v3: center diagram and make cards horizontal */
.concept-name-diagram-card-compact{
  padding:24px 24px !important;
}
.name-diagram-compact{
  display:grid !important;
  grid-template-columns:280px 520px 280px !important;
  grid-template-areas:
    "wo logo nnect"
    "colon logo nn" !important;
  justify-content:center !important;
  align-items:center !important;
  gap:18px 24px !important;
  max-width:1200px !important;
  margin:0 auto !important;
}
.name-diagram-compact .name-diagram-logo{
  width:520px !important;
}

.name-diagram-compact .name-diagram-callout{
  min-height:88px !important;
  width:280px !important;
  padding:14px 18px !important;
}

.name-diagram-compact .name-diagram-callout p{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  word-break:keep-all !important;
  white-space:normal !important;
}

.name-diagram-compact .name-diagram-callout p span{
  line-height:1.5 !important;
}

@media (max-width:960px){
  .name-diagram-compact{
    grid-template-columns:1fr 1fr !important;
  }
  .name-diagram-compact .name-diagram-callout{
    width:100% !important;
  }
}


/* ChatGPT adjustment: move only concept diagram connector dots and lines */
.name-diagram-compact .name-diagram-callout::after{
  position:absolute !important;
  width:2px !important;
  height:48px !important;
  background:var(--callout-color) !important;
  opacity:.8 !important;
  transform-origin:center !important;
}
.name-diagram-compact .name-diagram-callout::before{
  position:absolute !important;
  width:9px !important;
  height:9px !important;
  border-radius:50% !important;
  background:var(--callout-color) !important;
  box-shadow:0 0 0 4px rgba(255,255,255,.95) !important;
  z-index:4 !important;
}

/* ①: dot to the top of "wo", line connected to box */
.name-diagram-compact .callout-wo::after{
  left:100% !important;
  right:auto !important;
  top:62% !important;
  bottom:auto !important;
  transform:translateX(18px) rotate(58deg) !important;
}
.name-diagram-compact .callout-wo::before{
  left:100% !important;
  right:auto !important;
  top:91% !important;
  bottom:auto !important;
  transform:translateX(46px) !important;
}

/* ②: dot to the top of "nnect", line connected to box */
.name-diagram-compact .callout-nnect::after{
  left:auto !important;
  right:100% !important;
  top:62% !important;
  bottom:auto !important;
  transform:translateX(-18px) rotate(-58deg) !important;
}
.name-diagram-compact .callout-nnect::before{
  left:auto !important;
  right:100% !important;
  top:91% !important;
  bottom:auto !important;
  transform:translateX(-46px) !important;
}

/* ③: dot to the bottom of ":", line connected to box */
.name-diagram-compact .callout-colon::after{
  left:100% !important;
  right:auto !important;
  top:4% !important;
  bottom:auto !important;
  transform:translateX(18px) rotate(-58deg) !important;
}
.name-diagram-compact .callout-colon::before{
  left:100% !important;
  right:auto !important;
  top:-27% !important;
  bottom:auto !important;
  transform:translateX(46px) !important;
}

/* ④: dot to the bottom of "nn", line connected to box */
.name-diagram-compact .callout-nn::after{
  left:auto !important;
  right:100% !important;
  top:4% !important;
  bottom:auto !important;
  transform:translateX(-18px) rotate(58deg) !important;
}
.name-diagram-compact .callout-nn::before{
  left:auto !important;
  right:100% !important;
  top:-27% !important;
  bottom:auto !important;
  transform:translateX(-46px) !important;
}

@media(max-width:960px){
  .name-diagram-compact .name-diagram-callout::before,
  .name-diagram-compact .name-diagram-callout::after{
    display:none !important;
  }
}


/* v4 connector positions to match requested mockup */
.name-diagram-compact .callout-wo::before{
  left:100% !important;
  top:96px !important;
  transform:translateX(610px) !important; /* dot above wo */
}
.name-diagram-compact .callout-wo::after{
  left:100% !important;
  top:78px !important;
  width:430px !important;
  height:2px !important;
  transform:translateX(180px) rotate(6deg) !important;
}

.name-diagram-compact .callout-nnect::before{
  right:100% !important;
  top:96px !important;
  transform:translateX(-610px) !important; /* dot above nnect */
}
.name-diagram-compact .callout-nnect::after{
  right:100% !important;
  top:78px !important;
  width:430px !important;
  height:2px !important;
  transform:translateX(-180px) rotate(-6deg) !important;
}

.name-diagram-compact .callout-colon::before{
  left:100% !important;
  top:34px !important;
  transform:translateX(700px) !important; /* dot below : */
}
.name-diagram-compact .callout-colon::after{
  left:100% !important;
  top:42px !important;
  width:520px !important;
  height:2px !important;
  transform:translateX(180px) rotate(-4deg) !important;
}

.name-diagram-compact .callout-nn::before{
  right:100% !important;
  top:34px !important;
  transform:translateX(-700px) !important; /* dot below nn */
}
.name-diagram-compact .callout-nn::after{
  right:100% !important;
  top:42px !important;
  width:520px !important;
  height:2px !important;
  transform:translateX(-180px) rotate(4deg) !important;
}


/* ChatGPT adjustment: Issues section 1 row x 4 columns on desktop */
@media(min-width:961px){
  #issues .issue-card-grid{
    grid-template-columns:repeat(4,1fr) !important;
    gap:var(--sp-3) !important;
  }
  #issues .issue-v-card{
    padding:var(--sp-5) var(--sp-4) !important;
  }
  #issues .issue-v-card .issue-illust{
    height:78px !important;
    margin-bottom:var(--sp-3) !important;
  }
  #issues .issue-v-card .issue-illust svg{
    max-height:78px !important;
  }
  #issues .issue-v-card h3{
    font-size:16px !important;
    line-height:1.45 !important;
  }
  #issues .issue-v-card .issue-v-list li{
    font-size:11.5px !important;
    line-height:1.55 !important;
  }
  #issues .issue-v-card .issue-stop{
    font-size:12px !important;
    line-height:1.5 !important;
    padding:10px 12px !important;
  }
}


/* ChatGPT adjustment: features roadmap 2-column cards and summary UI */
@media(min-width:961px){
  #features .roadmap-feature-list{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  #features .roadmap-feature-card{
    min-height:68px !important;
    padding:14px 16px !important;
  }
  #features .rf-icon{
    flex:0 0 42px !important;
  }
  #features .roadmap-feature-card b{
    font-size:14px !important;
    line-height:1.25 !important;
  }
  #features .roadmap-feature-card small{
    font-size:11px !important;
    line-height:1.35 !important;
  }
}
#features .features-roadmap-summary{
  margin-top:var(--sp-6);
}
#features .features-bottom.roadmap-summary{
  display:none !important;
}
@media(max-width:640px){
  #features .roadmap-feature-list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}


/* ChatGPT adjustment: make features section fit in one desktop viewport */
@media(min-width:961px){
  #features{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }
  #features .features-roadmap-head{
    margin-bottom:22px !important;
  }
  #features .features-roadmap-head .section-pill{
    margin-bottom:10px !important;
  }
  #features .features-roadmap-head .brand-dots{
    margin-bottom:8px !important;
  }
  #features .features-roadmap-head h2{
    font-size:clamp(30px,3vw,40px) !important;
    margin-bottom:10px !important;
  }
  #features .features-roadmap-head p{
    font-size:13px !important;
    line-height:1.65 !important;
  }

  #features .roadmap-stage{
    margin-top:0 !important;
  }
  #features .roadmap-line{
    margin-bottom:12px !important;
  }
  #features .feature-roadmap{
    gap:16px !important;
    align-items:stretch !important;
  }
  #features .roadmap-phase{
    padding:20px 18px !important;
    border-radius:20px !important;
  }
  #features .phase-head{
    margin-bottom:14px !important;
  }
  #features .phase-head .phase-badge{
    font-size:10px !important;
    padding:4px 12px !important;
    margin-bottom:8px !important;
  }
  #features .phase-head strong{
    font-size:17px !important;
    line-height:1.25 !important;
  }
  #features .phase-head small{
    font-size:11px !important;
  }
  #features .roadmap-feature-list{
    gap:8px !important;
  }
  #features .roadmap-feature-card{
    min-height:50px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
    gap:8px !important;
  }
  #features .rf-icon{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    border-radius:10px !important;
    font-size:14px !important;
  }
  #features .roadmap-feature-card b{
    font-size:12.5px !important;
    line-height:1.15 !important;
  }
  #features .roadmap-feature-card small{
    font-size:9.8px !important;
    line-height:1.2 !important;
    margin-top:2px !important;
  }
  #features .section-summary-block.features-roadmap-summary{
    margin-top:18px !important;
    padding:16px 24px !important;
    border-radius:18px !important;
  }
  #features .section-summary-inner{
    gap:14px !important;
  }
  #features .section-summary-icon{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
    font-size:14px !important;
  }
  #features .section-summary-copy{
    font-size:13px !important;
    line-height:1.55 !important;
  }
}

/* Slightly denser tablet layout */
@media(min-width:641px) and (max-width:960px){
  #features .roadmap-feature-list{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  #features .roadmap-feature-card{
    min-height:56px !important;
    padding:10px 12px !important;
  }
}


/* ChatGPT adjustment: industry section compact */
@media(min-width:961px){
  #industry,
  #industries{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }

  #industry .industry-header,
  #industries .industry-header{
    margin-bottom:18px !important;
  }

  #industry h2,
  #industries h2{
    font-size:clamp(28px,3vw,38px) !important;
    margin-bottom:8px !important;
  }

  #industry .industry-tabs,
  #industries .industry-tabs{
    margin-bottom:16px !important;
    gap:8px !important;
  }

  #industry .industry-tab,
  #industries .industry-tab{
    padding:8px 14px !important;
    font-size:13px !important;
  }

  #industry .industry-content,
  #industries .industry-content{
    gap:14px !important;
  }

  #industry .problem-card,
  #industry .solution-card,
  #industry .effect-card,
  #industries .problem-card,
  #industries .solution-card,
  #industries .effect-card{
    padding:16px !important;
  }

  #industry .problem-card p,
  #industry .solution-card p,
  #industry .effect-card p,
  #industries .problem-card p,
  #industries .solution-card p,
  #industries .effect-card p{
    font-size:13px !important;
    line-height:1.55 !important;
  }

  #industry .industry-footer,
  #industries .industry-footer{
    margin-top:16px !important;
    padding:16px 20px !important;
  }
}


/* ChatGPT adjustment: remove detail links and keep industry tabs in one row */
.scene-detail-link{
  display:none !important;
}
@media(min-width:961px){
  #scenes .scene-tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    gap:8px !important;
    overflow:visible !important;
  }
  #scenes .scene-tab{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    padding:8px 14px !important;
    font-size:12px !important;
  }
}


/* Contact section header outside card */
.contact-section .section-pill,
.contact-section .brand-dots,
#get-in-touch .section-pill,
#get-in-touch .brand-dots{
  position:absolute !important;
  top:-56px !important;
  left:0 !important;
  z-index:5 !important;
}
.contact-section .brand-dots,
#get-in-touch .brand-dots{
  top:-24px !important;
}
.contact-card,
.contact-wrap,
.contact-panel{
  position:relative !important;
  overflow:visible !important;
}


/* ChatGPT contact final correction: header outside card */
#cta .container{
  position:relative;
}
#cta .contact-section-head{
  max-width:920px;
  margin:0 auto 16px;
  text-align:left;
  display:block;
}
#cta .contact-section-head .contact-final-kicker{
  position:static !important;
  display:inline-flex !important;
  margin:0 0 10px 0 !important;
}
#cta .contact-section-head .brand-dots{
  position:static !important;
  display:flex !important;
  justify-content:center !important;
  margin:0 auto !important;
}
#cta .contact-final .contact-final-kicker,
#cta .contact-final > .brand-dots,
#cta .contact-final-left > .brand-dots{
  display:none !important;
}
#cta .contact-final{
  overflow:hidden !important;
}
@media(max-width:640px){
  #cta .contact-section-head{
    text-align:center;
    margin-bottom:12px;
  }
}


/* ChatGPT contact final adjustment v3 */
#cta .contact-section-head{
  text-align:center !important;
}
#cta .contact-section-head .contact-final-kicker{
  margin-left:auto !important;
  margin-right:auto !important;
}
#cta .contact-section-head .brand-dots{
  justify-content:center !important;
}
#cta .contact-final h2{
  line-height:1.38 !important;
}
#cta .contact-title-main,
#cta .contact-title-sub{
  display:block;
}
#cta .contact-title-sub{
  white-space:nowrap;
}
#cta .contact-title-break{
  display:block !important;
}
#cta .contact-final-form input::placeholder{
  color:rgba(122,111,106,.55) !important;
  opacity:1 !important;
}
#cta .contact-final-form input::-webkit-input-placeholder{
  color:rgba(122,111,106,.55) !important;
}
#cta .contact-final-form input::-moz-placeholder{
  color:rgba(122,111,106,.55) !important;
  opacity:1 !important;
}
@media(max-width:900px){
  #cta .contact-title-break{
    display:block;
  }
}
@media(max-width:640px){
  #cta .contact-title-sub{
    white-space:normal;
  }
}


/* ═══ v98: Contact requested fixes — enforce line break and very light placeholders ═══ */
#cta .contact-title-break{
  display:block !important;
}
#cta .contact-final-form input::placeholder,
#cta .contact-final-form textarea::placeholder{
  color:rgba(122,111,106,.55) !important;
  opacity:1 !important;
}
#cta .contact-final-form input::-webkit-input-placeholder,
#cta .contact-final-form textarea::-webkit-input-placeholder{
  color:rgba(122,111,106,.55) !important;
}
#cta .contact-final-form input::-moz-placeholder,
#cta .contact-final-form textarea::-moz-placeholder{
  color:rgba(122,111,106,.55) !important;
  opacity:1 !important;
}



/* ═══ ChatGPT rebuild: Concept diagram responsive recreation ═══ */
#concept .concept-diagram-card{
  display:block !important;
  padding:clamp(22px,3.2vw,44px) !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--tw-line-soft,#eef0f2) !important;
  border-radius:28px !important;
  overflow:hidden !important;
}
#concept .concept-diagram{
  --concept-card-w: minmax(230px, 310px);
  position:relative !important;
  display:grid !important;
  grid-template-columns:var(--concept-card-w) minmax(360px, 560px) var(--concept-card-w) !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:
    "c1 logo c2"
    "c3 logo c4" !important;
  gap:clamp(18px,2.4vw,30px) clamp(24px,3.2vw,48px) !important;
  align-items:center !important;
  justify-content:center !important;
  max-width:1180px !important;
  min-height:270px !important;
  margin:0 auto !important;
}
#concept .concept-center{
  grid-area:logo !important;
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 0 !important;
}
#concept .concept-diagram-logo{
  width:min(560px,42vw) !important;
  max-width:100% !important;
  height:auto !important;
  filter:drop-shadow(0 8px 20px rgba(50,40,35,.06)) !important;
}
#concept .concept-box{
  --box-color:#8cc4b8;
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-height:92px !important;
  padding:18px 20px !important;
  background:#fff !important;
  border:2px solid var(--box-color) !important;
  border-radius:20px !important;
  box-shadow:0 4px 18px rgba(50,40,35,.06) !important;
}
#concept .concept-box::before,
#concept .concept-box::after{
  content:"";
  position:absolute;
  pointer-events:none;
  background:var(--box-color);
  z-index:-1;
}
#concept .concept-box::before{
  width:clamp(70px,9vw,150px);
  height:2px;
  opacity:.70;
  top:50%;
}
#concept .concept-box::after{
  width:10px;
  height:10px;
  border-radius:50%;
  opacity:.95;
  box-shadow:0 0 0 4px rgba(255,255,255,.96);
  top:50%;
  transform:translateY(-50%);
}
#concept .concept-box-1{grid-area:c1 !important; --box-color:#e56f91; justify-self:end !important;}
#concept .concept-box-2{grid-area:c2 !important; --box-color:#f0a040; justify-self:start !important;}
#concept .concept-box-3{grid-area:c3 !important; --box-color:#4aaa68; justify-self:end !important;}
#concept .concept-box-4{grid-area:c4 !important; --box-color:#5ea89c; justify-self:start !important;}
#concept .concept-box-1::before,
#concept .concept-box-3::before{left:calc(100% + 10px); transform-origin:left center;}
#concept .concept-box-2::before,
#concept .concept-box-4::before{right:calc(100% + 10px); transform-origin:right center;}
#concept .concept-box-1::before{transform:rotate(8deg);}
#concept .concept-box-2::before{transform:rotate(-8deg);}
#concept .concept-box-3::before{transform:rotate(-5deg);}
#concept .concept-box-4::before{transform:rotate(5deg);}
#concept .concept-box-1::after,
#concept .concept-box-3::after{left:calc(100% + clamp(78px,9vw,158px));}
#concept .concept-box-2::after,
#concept .concept-box-4::after{right:calc(100% + clamp(78px,9vw,158px));}
#concept .concept-num{
  flex:0 0 46px !important;
  width:46px !important;
  height:46px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:var(--box-color) !important;
  color:#fff !important;
  font-family:var(--font-base,'Nunito',sans-serif) !important;
  font-size:22px !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-shadow:0 6px 16px color-mix(in srgb, var(--box-color) 24%, transparent) !important;
}
#concept .concept-box p{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  margin:0 !important;
  text-align:left !important;
  color:var(--tw-text-dark,#3d3330) !important;
  line-height:1.45 !important;
}
#concept .concept-box b{
  font-family:var(--font-base,'Nunito',sans-serif) !important;
  font-size:18px !important;
  font-weight:900 !important;
  color:var(--tw-text-dark,#3d3330) !important;
}
#concept .concept-box span:not(.concept-num){
  display:block !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--tw-text-dark,#3d3330) !important;
  line-height:1.55 !important;
}
@media(max-width:1100px){
  #concept .concept-diagram{
    grid-template-columns:minmax(210px,1fr) minmax(320px,430px) minmax(210px,1fr) !important;
    gap:16px 24px !important;
  }
  #concept .concept-diagram-logo{width:min(430px,40vw) !important;}
  #concept .concept-box{padding:16px 18px !important;}
  #concept .concept-box::before{width:70px !important;}
  #concept .concept-box-1::after,
  #concept .concept-box-3::after{left:calc(100% + 78px) !important;}
  #concept .concept-box-2::after,
  #concept .concept-box-4::after{right:calc(100% + 78px) !important;}
}
@media(max-width:960px){
  #concept .concept-diagram-card{padding:22px 18px !important;}
  #concept .concept-diagram{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "logo logo"
      "c1 c2"
      "c3 c4" !important;
    gap:14px !important;
    min-height:0 !important;
  }
  #concept .concept-center{padding:4px 0 10px !important;}
  #concept .concept-diagram-logo{width:min(440px,78vw) !important;}
  #concept .concept-box{width:100% !important; justify-self:stretch !important; min-height:86px !important;}
  #concept .concept-box::before,
  #concept .concept-box::after{display:none !important;}
}
@media(max-width:640px){
  #concept .concept-diagram-card{padding:18px 14px !important; border-radius:22px !important;}
  #concept .concept-diagram{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "logo"
      "c1"
      "c2"
      "c3"
      "c4" !important;
    gap:10px !important;
  }
  #concept .concept-diagram-logo{width:min(320px,88vw) !important;}
  #concept .concept-box{
    min-height:auto !important;
    padding:14px 16px !important;
    border-radius:18px !important;
    gap:12px !important;
  }
  #concept .concept-num{
    flex-basis:38px !important;
    width:38px !important;
    height:38px !important;
    font-size:18px !important;
  }
  #concept .concept-box b{font-size:17px !important;}
  #concept .concept-box span:not(.concept-num){font-size:13px !important; line-height:1.55 !important;}
}


/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}



/* top hero image replacement */
.hero-device-stage-image{
  display:flex !important;
  justify-content:center;
  align-items:center;
  width:min(920px,100%);
  margin:32px auto 0;
  position:relative;
  z-index:1;
}
.hero-device-stage-image::before,
.hero-device-stage-image::after{display:none !important;}
.hero-device-stage-image .hero-top-replaced-image{
  width:100%;
  max-width:920px;
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(50,40,35,.12));
}
@media(max-width:640px){
  .hero-device-stage-image{
    display:flex !important;
    margin:22px auto 0;
    width:100%;
  }
  .hero-device-stage-image .hero-top-replaced-image{
    max-width:100%;
    filter:drop-shadow(0 14px 22px rgba(50,40,35,.10));
  }
}

/* ═══════════════════════════════════════════════════
   ChatGPT fix: roadmap card text overflow only
   文字が図形からはみ出ないよう、機能カード内の文字幅・折り返しを調整
   ═══════════════════════════════════════════════════ */
#features .roadmap-feature-card{
  overflow:hidden !important;
  min-width:0 !important;
}
#features .roadmap-feature-card > span:not(.rf-icon){
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}
#features .roadmap-feature-card b,
#features .roadmap-feature-card small{
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  hyphens:auto !important;
}
#features .roadmap-feature-card small{
  letter-spacing:-0.02em !important;
}

@media(min-width:961px){
  #features .roadmap-feature-card{
    padding:8px 8px !important;
    gap:6px !important;
  }
  #features .rf-icon{
    width:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
    font-size:13px !important;
  }
  #features .roadmap-feature-card b{
    font-size:12px !important;
    line-height:1.12 !important;
  }
  #features .roadmap-feature-card small{
    font-size:8.8px !important;
    line-height:1.12 !important;
    margin-top:2px !important;
  }
}

@media(min-width:641px) and (max-width:960px){
  #features .roadmap-feature-card{
    padding:10px 10px !important;
    gap:8px !important;
  }
  #features .rf-icon{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
  }
  #features .roadmap-feature-card b{
    font-size:12px !important;
    line-height:1.15 !important;
  }
  #features .roadmap-feature-card small{
    font-size:9px !important;
    line-height:1.15 !important;
  }
}

@media(max-width:640px){
  #features .roadmap-feature-card b{
    font-size:13px !important;
    line-height:1.2 !important;
  }
  #features .roadmap-feature-card small{
    font-size:10px !important;
    line-height:1.25 !important;
  }
}


/* ═══ Scroll-spy: nav active state (v76 JS復活に伴い視覚化) ═══ */
.nav a{position:relative}
.nav a.active{
  color:var(--tw-color-teal-deep, #5ea89c);
  font-weight:800;
}
.nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, #a8d8c0, #8cc4b8);
  animation:navActiveIn .25s cubic-bezier(0.4,0,0.2,1);
}
@keyframes navActiveIn{
  from{opacity:0;transform:scaleX(.4)}
  to{opacity:1;transform:scaleX(1)}
}

/* ═══ 商標登録出願中の表記（フッター） ═══ */
.footer-trademark{
  flex-basis:100%;
  width:100%;
  text-align:center;
  font-size:10px;
  line-height:1.5;
  color:var(--muted, #9ca3af);
  opacity:.9;
  margin-top:4px;
}

/* ═══ ヒーローロゴの™（商標出願中） ═══ */
.hero-logo-wrap{
  position:relative;
  display:inline-block;
  line-height:0;
}
.hero-tm{
  position:absolute;
  top:22%;
  right:-0.35em;
  font-size:15px;
  line-height:1;
  font-weight:600;
  color:var(--muted, #9ca3af);
  opacity:.75;
  pointer-events:none;
  user-select:none;
}
@media (max-width:540px){
  .hero-tm{ font-size:11px; right:-0.3em; top:22%; }
}

/* ═══ スキップリンク（キーボード操作用・A11y） ═══ */
.skip-link{
  position:absolute;
  top:-60px;
  left:12px;
  z-index:9999;
  padding:10px 18px;
  background:var(--teal, #8cc4b8);
  color:#fff;
  font-size:14px;
  font-weight:700;
  border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{
  top:12px;
  outline:2px solid #fff;
  outline-offset:2px;
}

/* ═══ FAQカテゴリ見出し ═══ */
.faq-category{
  font-size:14px;
  font-weight:800;
  color:var(--teal-d, #6ea69a);
  margin:28px 0 12px;
  padding-left:12px;
  border-left:3px solid var(--teal, #8cc4b8);
  letter-spacing:.02em;
}
.faq-list2 > .faq-category:first-child{
  margin-top:0;
}
@media (max-width:540px){
  .faq-category{ font-size:13px; margin:22px 0 10px; }
}

/* ═══════════════════════════════════════════════════
   プラットフォーム基盤 帯（Master/Notification + 提供形態）
   ═══════════════════════════════════════════════════ */
.platform-band{
  max-width:1100px;
  margin:8px auto 0;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.pb-group{
  background:var(--white, #fff);
  border:1px solid var(--line, #e5e7eb);
  border-radius:16px;
  padding:22px 24px;
}
.pb-group-base{
  background:linear-gradient(180deg, rgba(140,196,184,.06), rgba(255,255,255,1));
}
.pb-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.pb-head-icon{
  width:40px; height:40px;
  flex:0 0 40px;
  display:grid; place-items:center;
  border-radius:11px;
  background:linear-gradient(135deg, var(--teal, #8cc4b8), var(--blue, #7eb8d4));
  color:#fff;
  font-size:17px;
}
.pb-group-form .pb-head-icon{
  background:linear-gradient(135deg, var(--peach, #f5c8a8), var(--yellow, #f9dc8c));
}
.pb-head-text h3{
  font-size:16px; font-weight:800; color:var(--ink, #3a3a3a);
  margin:0; line-height:1.3;
}
.pb-head-text p{
  font-size:12px; color:var(--muted, #9ca3af); margin:2px 0 0;
}
/* 基盤カード（機能） */
.pb-cards{ display:flex; flex-direction:column; gap:12px; }
.pb-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px; border-radius:12px;
  background:var(--white, #fff);
  border:1px solid var(--line, #e5e7eb);
}
.pb-card-icon{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(140,196,184,.18), rgba(126,184,212,.12));
  color:var(--teal-d, #6ea69a);
  font-size:15px;
}
.pb-card-body b{ font-size:14px; color:var(--ink, #3a3a3a); }
.pb-card-sub{
  display:inline-block; margin-left:8px;
  font-size:11px; color:var(--teal-d, #6ea69a); font-weight:700;
}
.pb-card-body p{
  font-size:12px; color:var(--muted-2, #6b7280); line-height:1.6; margin:5px 0 0;
}
/* 提供形態チップ */
.pb-chips{ display:flex; flex-direction:column; gap:10px; }
.pb-chip{
  display:flex; gap:12px; align-items:center;
  padding:12px 14px; border-radius:12px;
  background:rgba(245,200,168,.06);
  border:1px solid rgba(245,200,168,.28);
}
.pb-chip-icon{
  width:36px; height:36px; flex:0 0 36px;
  display:grid; place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(245,200,168,.22), rgba(249,220,140,.16));
  color:#d99a54;
  font-size:15px;
}
.pb-chip-body b{ font-size:13px; color:var(--ink, #3a3a3a); display:block; }
.pb-chip-body span{ font-size:11.5px; color:var(--muted, #9ca3af); }
/* レスポンシブ */
@media (max-width:860px){
  .platform-band{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:540px){
  .pb-group{ padding:18px; }
  .pb-head-text h3{ font-size:15px; }
}

/* ═══ 競合比較ブロック（会話 vs 仕事の流れ）═══ */
.vs-block{
  max-width:900px;
  margin:0 auto 28px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:stretch;
}
.vs-col{
  padding:20px 22px;
  border-radius:16px;
  border:1px solid var(--line, #e5e7eb);
  background:var(--white, #fff);
}
.vs-other{
  background:rgba(176,180,184,.06);
  border-color:rgba(176,180,184,.25);
}
.vs-wo{
  background:linear-gradient(160deg, rgba(140,196,184,.10), rgba(126,184,212,.06));
  border-color:rgba(140,196,184,.35);
}
.vs-tag{
  display:inline-block;
  font-size:11px; font-weight:800;
  padding:3px 10px; border-radius:20px;
  margin-bottom:10px;
}
.vs-other .vs-tag{ background:rgba(120,120,130,.12); color:#6b7280; }
.vs-wo .vs-tag{ background:linear-gradient(135deg,var(--teal,#8cc4b8),var(--blue,#7eb8d4)); color:#fff; }
.vs-head{
  font-size:17px; font-weight:800; margin:0 0 8px;
  color:var(--ink, #3a3a3a);
}
.vs-other .vs-head{ color:#9ca3af; }
.vs-desc{
  font-size:12.5px; line-height:1.7; margin:0;
  color:var(--muted-2, #6b7280);
}
.vs-mid{
  display:flex; align-items:center; justify-content:center;
  color:var(--teal, #8cc4b8);
}
.vs-mid-icon{ font-size:22px; }
@media (max-width:640px){
  .vs-block{ grid-template-columns:1fr; gap:10px; }
  .vs-mid{ transform:rotate(90deg); margin:2px 0; }
}

/* ═══ ヒーロー 2CTA（お問い合わせ＋資料DL）レイアウト ═══ */
.hero-contact-action{
  gap:12px;
  flex-wrap:wrap;
}
.hero-contact-action .btn i{ margin-right:6px; }
@media (max-width:540px){
  .hero-contact-action{
    flex-direction:column;
    gap:10px;
  }
}

/* ═══ 開発背景: 運営会社(エフコム)信頼バー ═══ */
.origin-trust{
  max-width:840px;
  margin:32px auto 0;
  padding:22px 26px;
  background:linear-gradient(160deg, rgba(140,196,184,.08), rgba(126,184,212,.05));
  border:1px solid rgba(140,196,184,.3);
  border-radius:16px;
}
.origin-trust-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px dashed rgba(140,196,184,.35);
}
.origin-trust-icon{
  width:34px; height:34px; flex:0 0 34px;
  display:grid; place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg, var(--teal,#8cc4b8), var(--blue,#7eb8d4));
  color:#fff; font-size:15px;
}
.origin-trust-title{
  font-size:15px; color:var(--ink,#3a3a3a); font-weight:600;
}
.origin-trust-title strong{ font-weight:800; }
.origin-trust-list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 20px;
}
.origin-trust-list li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; line-height:1.6; color:var(--muted-2,#6b7280);
}
.origin-trust-list li i{
  color:var(--teal-d,#6ea69a); font-size:13px; margin-top:2px; flex:0 0 auto;
}
.origin-trust-list b{ color:var(--ink,#3a3a3a); font-weight:700; }
@media (max-width:640px){
  .origin-trust-list{ grid-template-columns:1fr; }
  .origin-trust{ padding:18px 20px; }
}

/* ───────────────────────────────────────────────────
   [02/29] (id なし)
   ─────────────────────────────────────────────────── */
/* v140: Force hero platform label to top center of the whole hero area */
.hero{ position: relative !important; }
@media (min-width: 961px){
  .hero{
    padding-top: calc(var(--tw-header-h, 64px) + 96px) !important;
  }
  .hero > .hero-platform-label{
    position: absolute !important;
    top: 34px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
@media (max-width: 960px){
  .hero > .hero-platform-label{
    position: static !important;
    transform: none !important;
    margin: 0 auto var(--sp-4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: calc(100% - 32px) !important;
  }
}

/* ═══ v110: Concept alignment & pastel refinement ═══ */
.concept-section-head{
  text-align:center;
  margin:0 auto 28px;
}
.concept-section-head .concept-mini-label{
  margin:0 auto;
}
.concept-hero-copy .concept-mini-label{
  display:none !important;
}
.concept-title-gradient{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:.02em;
}
.concept-title-gradient .c-pink{color:#f4b0a7}
.concept-title-gradient .c-peach{color:#f4cf84}
.concept-title-gradient .c-mint{color:#abd9b8}
.concept-title-gradient .c-teal{color:#86c5bb}
.concept-hero-card h2{
  text-align:center;
}
.concept-lead{
  text-align:center;
}
.concept-mini-card h3{
  color:var(--wa-text) !important;
}
.concept-card-icon{
  background:var(--wa-icon);
  box-shadow:0 6px 16px var(--wa-shadow);
}
.concept-mini-card.wa-pink{--wa-color:#f4a8bd;--wa-text:#e99ab1;--wa-icon:#f4a8bd;--wa-border:rgba(244,168,189,.18);--wa-shadow:rgba(244,168,189,.16)}
.concept-mini-card.wa-orange{--wa-color:#f6c886;--wa-text:#eebc70;--wa-icon:#f6c886;--wa-border:rgba(246,200,134,.20);--wa-shadow:rgba(246,200,134,.16)}
.concept-mini-card.wa-green{--wa-color:#98d4a8;--wa-text:#78c891;--wa-icon:#98d4a8;--wa-border:rgba(152,212,168,.20);--wa-shadow:rgba(152,212,168,.15)}
.concept-mini-card.wa-teal{--wa-color:#84c8bf;--wa-text:#72bdb4;--wa-icon:#84c8bf;--wa-border:rgba(132,200,191,.20);--wa-shadow:rgba(132,200,191,.15)}
.concept-mini-card.wa-blue{--wa-color:#9acddd;--wa-text:#83c0d2;--wa-icon:#9acddd;--wa-border:rgba(154,205,221,.20);--wa-shadow:rgba(154,205,221,.15)}
@media(max-width:640px){
  .concept-section-head{margin-bottom:18px;}
  .concept-title-gradient{display:inline-flex;}
}


/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [03/29] (id なし)
   ─────────────────────────────────────────────────── */
/* ═══ v141: User requested concept corrections - verified ═══ */
#concept .concept-section-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:760px !important;
  margin:0 auto 28px !important;
  text-align:center !important;
}
#concept .concept-section-head .section-pill,
#concept .concept-section-head .concept-pill{
  margin-left:auto !important;
  margin-right:auto !important;
  align-self:center !important;
}
#concept .concept-section-head .brand-dots{
  display:flex !important;
  justify-content:center !important;
  margin:14px auto 0 !important;
}
#concept .concept-title-gradient{
  display:inline-flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:.05em !important;
  font-family:var(--font-jp, 'Zen Maru Gothic', sans-serif) !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
}
#concept .concept-title-gradient .c-pink{color:#f2aaa0 !important;}
#concept .concept-title-gradient .c-peach{color:#f5d287 !important;}
#concept .concept-title-gradient .c-mint{color:#b6d9ae !important;}
#concept .concept-title-gradient .c-teal{color:#8ac8bf !important;}
#concept .concept-lead{
  text-align:center !important;
}
#concept .concept-mini-card h3{
  color:var(--wa-text-soft) !important;
}
#concept .concept-card-icon{
  background:var(--wa-icon-soft) !important;
  color:rgba(255,255,255,.96) !important;
  box-shadow:0 5px 14px var(--wa-shadow-soft) !important;
}
#concept .concept-mini-card.wa-pink{--wa-text-soft:#e9a8bb;--wa-icon-soft:#f5bbc9;--wa-border:rgba(245,187,201,.22);--wa-shadow-soft:rgba(245,187,201,.14);}
#concept .concept-mini-card.wa-orange{--wa-text-soft:#e9bd75;--wa-icon-soft:#f6d08e;--wa-border:rgba(246,208,142,.24);--wa-shadow-soft:rgba(246,208,142,.14);}
#concept .concept-mini-card.wa-green{--wa-text-soft:#8bcfa0;--wa-icon-soft:#acdcb7;--wa-border:rgba(172,220,183,.24);--wa-shadow-soft:rgba(172,220,183,.13);}
#concept .concept-mini-card.wa-teal{--wa-text-soft:#7bc2ba;--wa-icon-soft:#9bd4ce;--wa-border:rgba(155,212,206,.24);--wa-shadow-soft:rgba(155,212,206,.13);}
#concept .concept-mini-card.wa-blue{--wa-text-soft:#8cc6d7;--wa-icon-soft:#a9d8e5;--wa-border:rgba(169,216,229,.24);--wa-shadow-soft:rgba(169,216,229,.13);}
@media(max-width:640px){
  #concept .concept-section-head{margin-bottom:18px !important;}
  #concept .concept-section-head .brand-dots{margin-top:10px !important;}
}

/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [04/29] (id なし)
   ─────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════
   PATCH vFIX: レイアウト統一 + スクロールなし調整
              + モバイル・タブレット 整備
   ═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   A. contact-final: 2カラム定義（未定義で崩れていた）
   ─────────────────────────────────────────*/
.contact-final {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
  text-align: left !important;
}
.contact-final-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-final-left h2 {
  text-align: left !important;
  margin-bottom: var(--sp-3);
}
.contact-final-left .contact-final-lead {
  text-align: left !important;
  margin-bottom: var(--sp-4);
}
.contact-final-left .contact-final-kicker {
  margin-bottom: var(--sp-3);
}
.contact-final-left .brand-dots {
  margin-bottom: var(--sp-3);
}
.contact-final-left .contact-info-cards {
  justify-content: flex-start;
}

/* ─────────────────────────────────────────
   B. タブレット (≤960px) 整備
   ─────────────────────────────────────────*/
@media (max-width: 960px) {

  /* --- ヘッダーロゴをやや小さく --- */
  .hero-logo-img {
    max-width: 340px !important;
  }

  /* --- issues: 2列維持、カード内は少しタイト --- */
  .issue-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-3) !important;
  }
  .issue-v-card {
    padding: var(--sp-4) !important;
  }
  .issue-v-card .issue-illust {
    height: 90px !important;
  }
  .issue-v-card h3 {
    font-size: 17px !important;
  }

  /* --- connect(solution): フロー3列、benefit 2列 --- */
  .solution-flow {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .benefit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .benefit-card:nth-child(2) { border-right: 0; }
  .benefit-card:nth-child(n+3) { border-top: 1px solid var(--line); }

  /* --- concept: hero card 縦積み、mini-card 3列 --- */
  .concept-hero-card {
    grid-template-columns: 1fr !important;
  }
  .concept-card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* 5枚目のカードは全幅ではなく3列目に収める */
  .concept-mini-card:last-child {
    grid-column: auto !important;
  }

  /* --- scenes: タブのフォント統一、カード2列 --- */
  .scene-tabs {
    gap: var(--sp-2) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .scene-tab {
    padding: 7px 14px !important;
    font-size: 12px !important;
  }
  .scene-block-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .scene-block {
    padding: var(--sp-3) !important;
  }
  .scene-effect-bar {
    grid-template-columns: 1fr !important;
  }
  .scene-effect-heading,
  .scene-effect {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }
  .scene-effect:last-child { border-bottom: 0 !important; }

  /* --- pricing: 2列 --- */
  .pricing-merit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- contact: 縦積みに変更 --- */
  .contact-final {
    grid-template-columns: 1fr !important;
    gap: var(--sp-5) !important;
  }
  .contact-final-left {
    align-items: center !important;
    text-align: center !important;
  }
  .contact-final-left h2,
  .contact-final-left .contact-final-lead {
    text-align: center !important;
  }
  .contact-final-left .contact-info-cards {
    justify-content: center !important;
  }
  .contact-final-form {
    max-width: 100% !important;
  }

  /* --- footer: 2列 --- */
  .footer-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-5) !important;
  }

  /* --- section summary block --- */
  .section-summary-block {
    padding: var(--sp-5) var(--sp-5) !important;
  }
}

/* ─────────────────────────────────────────
   C. モバイル (≤640px) 整備
   ─────────────────────────────────────────*/
@media (max-width: 640px) {

  /* --- 全 section のベース padding --- */
  section {
    padding: var(--sp-6) 0 !important;
  }

  /* --- section-head 余白 --- */
  .section-head,
  .issues-header,
  .solution-header,
  .features-header {
    margin-bottom: var(--sp-4) !important;
  }
  .section-head h2,
  .issues-header h2,
  .solution-header h2 {
    font-size: clamp(20px, 6vw, 26px) !important;
    margin-bottom: var(--sp-2) !important;
  }
  .section-head p,
  .issues-header p,
  .solution-header p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  /* --- section-pill / section-kicker: サイズ・gap 統一 --- */
  .section-pill,
  .section-kicker {
    font-size: 10px !important;
    padding: 5px 12px 5px 10px !important;
    gap: 6px !important;
    letter-spacing: .14em !important;
    margin-bottom: var(--sp-2) !important;
  }

  /* --- brand-dots: 全セクション統一 --- */
  .section-head .brand-dots,
  .issues-header .brand-dots,
  .solution-header .brand-dots,
  .features-header .brand-dots {
    justify-content: center !important;
    margin-bottom: var(--sp-2) !important;
  }

  /* --- issues: 1列 --- */
  .issue-card-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3) !important;
  }
  .issue-v-card {
    padding: var(--sp-4) !important;
  }
  .issue-v-card .issue-illust {
    height: 80px !important;
  }
  .issue-v-card .issue-illust svg { max-height: 80px !important; }
  .issue-v-card .issue-num {
    width: 36px !important; height: 36px !important;
    font-size: 14px !important;
    margin-bottom: var(--sp-2) !important;
  }
  .issue-v-card h3 {
    font-size: 16px !important;
    margin-bottom: var(--sp-2) !important;
  }
  .issue-v-card .issue-v-list li { font-size: 12px !important; }
  .issue-v-card .issue-stop {
    padding: var(--sp-2) var(--sp-3) !important;
    font-size: 12px !important;
  }

  /* --- connect(solution): 2列フロー --- */
  .solution-flow-panel {
    padding: var(--sp-3) !important;
    margin-bottom: var(--sp-3) !important;
  }
  .solution-flow {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-2) !important;
  }
  .solution-step { padding: var(--sp-2) var(--sp-2) !important; }
  .solution-step-icon {
    height: 36px !important;
    margin: var(--sp-2) auto var(--sp-1) !important;
  }
  .solution-step-icon svg { width: 36px !important; height: 36px !important; }
  .solution-step h3 { font-size: 11px !important; }
  .solution-step p { font-size: 10px !important; line-height: 1.4 !important; }

  /* benefit: 1列 */
  .benefit-grid { grid-template-columns: 1fr !important; }
  .benefit-card {
    padding: var(--sp-3) var(--sp-4) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }
  .benefit-card:last-child { border-bottom: 0 !important; }
  .benefit-icon { width: 44px !important; height: 44px !important; font-size: 20px !important; }
  .benefit-card h3 { font-size: 15px !important; }
  .benefit-card p { font-size: 12px !important; }
  .benefit-title { margin-bottom: var(--sp-3) !important; }
  .benefit-title h3 { font-size: 18px !important; margin-bottom: var(--sp-2) !important; }

  /* --- concept: 2列カード、最後は全幅 --- */
  .concept-hero-card {
    padding: 20px 16px !important;
    gap: 16px !important;
  }
  .concept-hero-card h2 { font-size: 22px !important; }
  .concept-lead { font-size: 13px !important; }
  .name-meaning-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .concept-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .concept-mini-card:last-child {
    grid-column: 1 / -1 !important;
    min-height: 110px !important;
  }
  .concept-mini-card {
    min-height: 140px !important;
    padding: 14px 12px !important;
  }

  /* --- features: タブ2列 --- */
  .feature-connection {
    flex-wrap: wrap !important;
    gap: 3px !important;
  }
  .feature-connection span {
    flex: 1 1 calc(50% - 3px) !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }
  .feature-v-card { padding: var(--sp-4) !important; }
  .feature-title h3 { font-size: 22px !important; }
  .feature-v-list li { font-size: 12px !important; }

  /* --- scenes: タブ横スクロール --- */
  .scene-tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    margin: 0 -16px var(--sp-3) !important;
    padding: 0 16px var(--sp-2) !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .scene-tabs::-webkit-scrollbar { display: none; }
  .scene-tab { flex: 0 0 auto !important; padding: 6px 12px !important; font-size: 11px !important; }
  .industry-scene-card { padding: var(--sp-3) !important; }
  .scene-card-head {
    grid-template-columns: auto 1fr !important;
    gap: var(--sp-2) !important;
    padding-bottom: var(--sp-2) !important;
    margin-bottom: var(--sp-3) !important;
  }
  .scene-industry-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }
  .scene-card-title h3 { font-size: 16px !important; }
  .scene-card-title p { font-size: 11px !important; }
  .scene-detail-link { grid-column: 1 / -1 !important; text-align: right; }
  .scene-block-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-2) !important;
  }
  .scene-block { padding: var(--sp-2) var(--sp-3) !important; }
  .scene-block-top { margin-bottom: var(--sp-1) !important; }
  .scene-block-top h4 { font-size: 11px !important; }
  .scene-mini-visual { height: 32px !important; font-size: 20px !important; margin-bottom: 4px !important; }
  .scene-block p { font-size: 11px !important; margin-bottom: var(--sp-1) !important; }
  .scene-solution { padding: 6px 8px !important; }
  .scene-solution strong { font-size: 10px !important; }
  .scene-solution span { font-size: 10px !important; }
  .scene-effect-bar { grid-template-columns: 1fr !important; margin-top: var(--sp-2) !important; }
  .scene-effect-heading,
  .scene-effect { padding: var(--sp-2) var(--sp-3) !important; font-size: 11px !important; }
  .scene-effect b { font-size: 14px !important; }
  .scene-note { font-size: 10px !important; margin-top: var(--sp-1) !important; }

  /* --- pricing: 1列 --- */
  .pricing-plan-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3) !important;
  }
  .pricing-plan-card { padding: var(--sp-4) !important; }
  .pricing-plan-icon { width: 44px !important; height: 44px !important; font-size: 20px !important; }
  .pricing-plan-list li { font-size: 12px !important; }

  /* --- FAQ --- */
  details.faq2 { padding: var(--sp-3) var(--sp-3) !important; }
  details.faq2 summary { font-size: 13px !important; }
  .faq-answer2 { font-size: 12px !important; padding-left: 30px !important; }

  /* --- section-summary-block --- */
  .section-summary-block {
    margin-top: var(--sp-4) !important;
    padding: var(--sp-4) var(--sp-4) !important;
  }
  .section-summary-copy { font-size: 13px !important; text-align: center !important; }
  .section-summary-copy span { font-size: 14px !important; }
  .section-summary-inner { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .section-summary-btn { width: 100% !important; justify-content: center !important; font-size: 13px !important; }

  /* --- contact: 縦積み --- */
  .contact-final {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
    padding: var(--sp-4) var(--sp-4) !important;
  }
  .contact-final-left {
    align-items: center !important;
    text-align: center !important;
  }
  .contact-final-left h2,
  .contact-final-left .contact-final-lead {
    text-align: center !important;
  }
  .contact-final h2 { font-size: 20px !important; }
  .contact-final-lead { font-size: 12.5px !important; line-height: 1.7 !important; }
  .contact-info-cards {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--sp-2) !important;
  }
  .contact-info-card {
    flex: 1 1 130px !important;
    min-width: 110px !important;
    padding: var(--sp-2) var(--sp-3) !important;
  }
  .contact-info-card strong { font-size: 13px !important; }
  .contact-info-card small { font-size: 9px !important; }
  .contact-final-form {
    padding: var(--sp-3) !important;
    max-width: 100% !important;
  }
  /* iOS ズーム防止: font-size を 16px に統一 */
  .contact-final-form input,
  .contact-final-form select,
  .contact-final-form textarea {
    font-size: 16px !important;
    padding: 10px 12px !important;
    margin-bottom: var(--sp-2) !important;
  }
  .contact-final-form textarea {
    height: 80px !important;
    min-height: 80px !important;
  }
  .contact-final-form button {
    padding: 13px !important;
    font-size: 14px !important;
  }
  .contact-final-form label { font-size: 12px !important; margin-bottom: 4px !important; }

  /* --- footer: 2列 → 1列 --- */
  .footer-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    text-align: left !important;
  }
  .footer-brand-col {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
  .footer-brand { justify-content: center !important; }
  .footer-tagline { text-align: center !important; }
  .footer-col:not(.footer-brand-col) ul { align-items: flex-start !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
  }

  /* --- value strip --- */
  .value-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .value-card {
    padding: var(--sp-3) var(--sp-2) !important;
    border-right: 1px solid var(--line-soft);
  }
  .value-card:nth-child(2n) { border-right: 0 !important; }
  .value-card:nth-child(n+3) { border-top: 1px solid var(--line-soft) !important; }
  .value-icon { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  .value-card h3 { font-size: 11px !important; }
  .value-card p { font-size: 10px !important; line-height: 1.5 !important; }
}

/* ─────────────────────────────────────────
   D. 極小スマホ (≤380px)
   ─────────────────────────────────────────*/
@media (max-width: 380px) {
  :root { --container-pad: 12px !important; }

  .scene-block-grid {
    grid-template-columns: 1fr !important;
  }
  .name-meaning-grid {
    grid-template-columns: 1fr !important;
  }
  .concept-card-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-logo-img { max-width: 220px !important; }
  .hero-h1-main { font-size: clamp(24px, 8vw, 30px) !important; }
}


/* ─────────────────────────────────────────
   E. レイアウト統一 (全セクション)
   ─────────────────────────────────────────*/
/* 見出しブロック margin-bottom 統一 */
.section-head,
.issues-header,
.solution-header,
.features-header,
.industry-scene-header {
  margin-bottom: var(--sp-6) !important;
}
#concept .concept-section-head {
  margin-bottom: var(--sp-6) !important;
}

/* section-pill / concept-pill / section-kicker の下余白統一 */
.section-head .section-pill,
.section-head .section-kicker,
.issues-header .section-pill,
.solution-header .section-pill,
.features-header .section-pill,
.industry-scene-header .section-pill,
#concept .concept-section-head .section-pill,
#concept .concept-section-head .concept-pill {
  margin-bottom: var(--sp-3) !important;
}

/* brand-dots 整列・下余白統一 */
.section-head .brand-dots,
.issues-header .brand-dots,
.solution-header .brand-dots,
.features-header .brand-dots,
.industry-scene-header .brand-dots {
  justify-content: center !important;
  margin-bottom: var(--sp-3) !important;
}
.contact-final-left .contact-final-kicker,
.contact-final-left .brand-dots {
  margin-bottom: var(--sp-3) !important;
}

/* ─────────────────────────────────────────
   F. スクロールなし: PC向けセクション圧縮
   ─────────────────────────────────────────*/
#issues, #connect, #scenes, #cta {
  padding: var(--sp-6) 0 !important;
}
.contact-final-wrap { padding: var(--sp-5) 0 !important; }
.contact-final {
  padding: var(--sp-5) var(--sp-6) !important;
}

/* issues */
#issues .issues-header { margin-bottom: var(--sp-5) !important; }
#issues .issues-header h2 { font-size: clamp(20px, 2.8vw, 32px) !important; margin-bottom: var(--sp-2) !important; }
#issues .issues-header p { font-size: 13px !important; line-height: 1.6 !important; }
#issues .issue-card-grid { gap: var(--sp-3) !important; }
#issues .issue-v-card { padding: var(--sp-4) !important; }
#issues .issue-v-card .issue-illust { height: 80px !important; margin-bottom: var(--sp-3) !important; }
#issues .issue-v-card .issue-illust svg { max-height: 80px !important; }
#issues .issue-v-card h3 { font-size: 16px !important; margin-bottom: var(--sp-2) !important; }
#issues .issue-v-card .issue-v-list { gap: var(--sp-1) !important; margin-bottom: var(--sp-3) !important; }
#issues .issue-v-card .issue-v-list li { font-size: 12px !important; }
#issues .issue-v-card .issue-stop { padding: var(--sp-2) var(--sp-3) !important; font-size: 12px !important; }
#issues .issue-v-card .issue-num { width: 40px !important; height: 40px !important; font-size: 15px !important; margin-bottom: var(--sp-3) !important; }
#issues .section-summary-block { margin-top: var(--sp-4) !important; padding: var(--sp-4) var(--sp-5) !important; }

/* connect */
#connect .solution-header { margin-bottom: var(--sp-5) !important; }
#connect .solution-header h2 { font-size: clamp(18px, 2.6vw, 30px) !important; margin-bottom: var(--sp-2) !important; }
#connect .solution-header p { font-size: 13px !important; line-height: 1.6 !important; }
#connect .solution-flow-panel { padding: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }
#connect .solution-flow-title { margin-bottom: var(--sp-3) !important; font-size: 12px !important; }
#connect .solution-flow { gap: var(--sp-2) !important; }
#connect .solution-step { padding: var(--sp-3) var(--sp-2) !important; }
#connect .solution-step-icon { height: 40px !important; margin: var(--sp-2) auto !important; }
#connect .solution-step-icon svg { width: 40px !important; height: 40px !important; }
#connect .solution-step h3 { font-size: 12px !important; }
#connect .solution-step p { font-size: 10px !important; }
#connect .benefit-title { margin-bottom: var(--sp-4) !important; }
#connect .benefit-title h3 { font-size: clamp(16px, 2vw, 22px) !important; margin-bottom: var(--sp-2) !important; }
#connect .benefit-card { padding: var(--sp-4) var(--sp-3) !important; }
#connect .benefit-icon { width: 48px !important; height: 48px !important; font-size: 22px !important; margin-bottom: var(--sp-2) !important; }
#connect .benefit-card h3 { font-size: 15px !important; margin-bottom: var(--sp-1) !important; }
#connect .section-summary-block { margin-top: var(--sp-4) !important; padding: var(--sp-4) var(--sp-5) !important; }

/* scenes */
#scenes .section-head { margin-bottom: var(--sp-4) !important; }
#scenes .section-head h2 { font-size: clamp(18px, 2.6vw, 30px) !important; margin-bottom: var(--sp-2) !important; }
#scenes .section-head p { font-size: 13px !important; line-height: 1.6 !important; }
#scenes .scene-tabs { margin-bottom: var(--sp-4) !important; }
#scenes .scene-tab { padding: 6px 14px !important; font-size: 11px !important; }
#scenes .industry-scene-card { padding: var(--sp-4) !important; }
#scenes .scene-card-head { margin-bottom: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
#scenes .scene-industry-icon { width: 44px !important; height: 44px !important; font-size: 20px !important; }
#scenes .scene-card-title h3 { font-size: 17px !important; }
#scenes .scene-block-grid { gap: var(--sp-2) !important; }
#scenes .scene-block { padding: var(--sp-3) !important; }
#scenes .scene-mini-visual { height: 36px !important; font-size: 22px !important; margin-bottom: var(--sp-1) !important; }
#scenes .scene-block p { font-size: 11px !important; margin-bottom: var(--sp-2) !important; }
#scenes .scene-effect-bar { margin-top: var(--sp-3) !important; }
#scenes .scene-effect, #scenes .scene-effect-heading { padding: var(--sp-2) var(--sp-3) !important; font-size: 11px !important; }
#scenes .scene-effect b { font-size: 15px !important; }
#scenes .scene-note { margin-top: var(--sp-2) !important; }
#scenes .section-summary-block { margin-top: var(--sp-4) !important; padding: var(--sp-4) var(--sp-5) !important; }

/* cta */
.contact-final h2 { font-size: clamp(18px, 2.6vw, 30px) !important; margin-bottom: var(--sp-2) !important; }
.contact-final-lead { font-size: 13px !important; line-height: 1.7 !important; margin-bottom: var(--sp-4) !important; }
.contact-info-cards { margin-bottom: var(--sp-3) !important; gap: var(--sp-2) !important; }
.contact-info-card { padding: var(--sp-2) var(--sp-4) !important; }
.contact-info-card strong { font-size: 15px !important; }
.contact-final-form { padding: var(--sp-4) !important; }
.contact-final-form input,
.contact-final-form select,
.contact-final-form textarea { padding: 9px 12px !important; font-size: 13px !important; margin-bottom: var(--sp-2) !important; }
.contact-final-form label { margin-bottom: 4px !important; font-size: 11px !important; }
.contact-final-form button { padding: 11px !important; font-size: 13px !important; }
.contact-final-form textarea { height: 72px !important; min-height: 72px !important; }

/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [05/29] industry-scene-mobile-1col-v20
   ─────────────────────────────────────────────────── */
@media (max-width:640px){
  /* 業界別セクションの課題カードを、モバイルでは2列から1列4行へ変更 */
  #scenes .scene-block-grid,
  #scenes .industry-scene-card .scene-block-grid,
  .industry-scene-card .scene-block-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  #scenes .scene-block,
  .industry-scene-card .scene-block{
    width:100% !important;
    min-width:0 !important;
    padding:14px 16px !important;
  }

  #scenes .scene-block-top,
  .industry-scene-card .scene-block-top{
    align-items:flex-start !important;
    gap:10px !important;
    margin-bottom:8px !important;
  }

  #scenes .scene-block-top h4,
  .industry-scene-card .scene-block-top h4{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  #scenes .scene-mini-visual,
  .industry-scene-card .scene-mini-visual{
    height:38px !important;
    font-size:22px !important;
    margin-bottom:8px !important;
  }

  #scenes .scene-block p,
  .industry-scene-card .scene-block p{
    font-size:12px !important;
    line-height:1.65 !important;
    margin-bottom:10px !important;
  }

  #scenes .scene-solution,
  .industry-scene-card .scene-solution{
    padding:10px 12px !important;
  }

  #scenes .scene-solution strong,
  .industry-scene-card .scene-solution strong{
    font-size:11px !important;
  }

  #scenes .scene-solution span,
  .industry-scene-card .scene-solution span{
    font-size:11px !important;
    line-height:1.6 !important;
  }
}

/* ───────────────────────────────────────────────────
   [06/29] (id なし)
   ─────────────────────────────────────────────────── */
/* ═══ v151: Features roadmap + inline detail panel ═══ */
#features .features-roadmap-wrap{position:relative;}
.features-roadmap-head{max-width:760px;margin:0 auto 34px;text-align:center;}
.features-roadmap-head h2{margin-bottom:12px;}
.features-roadmap-head p{font-size:15px;line-height:1.8;color:var(--text);}
.roadmap-stage{position:relative;max-width:1180px;margin:0 auto;min-height:430px;}
.roadmap-view{animation:roadmapFadeIn .22s ease-out;}
.roadmap-view.is-hidden{display:none;}
.roadmap-line{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:18px;max-width:980px;margin:0 auto 16px;position:relative;}
.roadmap-line::before{content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;background:linear-gradient(90deg,rgba(240,168,184,.45),rgba(168,216,192,.75),rgba(126,184,212,.45));transform:translateY(-50%);}
.roadmap-line span{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:#fff;border:5px solid var(--road-dot,#8cc4b8);margin:0 auto;box-shadow:0 0 0 6px rgba(140,196,184,.12);}
.roadmap-line span:nth-child(1){--road-dot:#f0a8b8}.roadmap-line span:nth-child(2){--road-dot:#a8d8c0}.roadmap-line span:nth-child(3){--road-dot:#7eb8d4}
.feature-roadmap{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px;align-items:stretch;}
.roadmap-phase{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 1px 2px rgba(50,40,35,.03),0 8px 24px -12px rgba(50,40,35,.12);position:relative;overflow:hidden;}
.roadmap-phase::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--phase-grad);}
.roadmap-now{--phase-grad:linear-gradient(90deg,#f0a8b8,#f5c8a8);--phase-color:#e99ab1;}
.roadmap-next{--phase-grad:linear-gradient(90deg,#a8d8c0,#8cc4b8);--phase-color:#75baae;}
.roadmap-future{--phase-grad:linear-gradient(90deg,#8cc4b8,#7eb8d4);--phase-color:#78b9ce;}
.phase-head{text-align:center;margin-bottom:16px;}
.phase-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid color-mix(in srgb,var(--phase-color) 26%,white);color:var(--phase-color);font-size:10px;font-weight:900;letter-spacing:.14em;margin-bottom:8px;}
.phase-head strong{display:block;font-size:18px;color:var(--ink);line-height:1.2;}
.phase-head small{display:block;margin-top:4px;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.05em;}
.roadmap-feature-list{display:grid;grid-template-columns:1fr;gap:10px;}
.roadmap-feature-card{width:100%;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:12px;padding:12px;background:var(--bg2);border:1px solid rgba(231,234,232,.8);border-radius:16px;text-align:left;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;}
.roadmap-feature-card:hover{transform:translateY(-2px);background:#fff;border-color:color-mix(in srgb,var(--phase-color) 26%,white);box-shadow:0 8px 22px rgba(50,40,35,.08);}
.roadmap-feature-card:focus-visible{outline:3px solid rgba(140,196,184,.35);outline-offset:3px;}
.rf-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--phase-color) 15%,white);color:var(--phase-color);font-size:17px;}
.roadmap-feature-card b{display:block;font-size:15.5px;color:var(--ink);line-height:1.25;}
.roadmap-feature-card small{display:block;margin-top:3px;font-size:12px;color:var(--muted);font-weight:700;line-height:1.35;}
.feature-detail-panel{position:absolute;inset:34px 0 0;display:flex;flex-direction:column;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:28px;padding:30px;box-shadow:0 1px 2px rgba(50,40,35,.04),0 18px 48px -24px rgba(50,40,35,.24);animation:roadmapFadeIn .22s ease-out;overflow:hidden;}
.feature-detail-panel[hidden]{display:none;}
.feature-detail-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#f0a8b8,#f5c8a8,#a8d8c0,#8cc4b8,#7eb8d4);opacity:.8;}
.feature-detail-back{position:absolute;top:20px;left:22px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:800;}
.feature-detail-back:hover{background:#fff;color:var(--teal-d);box-shadow:0 6px 18px rgba(50,40,35,.06);}
.feature-detail-content{display:grid;grid-template-columns:120px minmax(0,1fr);gap:28px;align-items:center;max-width:760px;margin:20px auto 0;width:100%;}
.feature-detail-icon{width:112px;height:112px;border-radius:32px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(168,216,192,.16),rgba(126,184,212,.12));color:var(--teal-d);font-size:42px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px rgba(140,196,184,.16);}
.feature-detail-kicker{display:inline-flex;margin-bottom:10px;padding:5px 12px;border-radius:999px;background:rgba(168,216,192,.12);color:var(--teal-d);font-size:11px;font-weight:800;}
.feature-detail-body h3{font-size:clamp(28px,3vw,40px);margin:0 0 10px;color:var(--ink);}
.feature-detail-body p{font-size:14px;line-height:1.85;color:var(--text);margin-bottom:18px;}
.feature-detail-body ul{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.feature-detail-body li{position:relative;padding:9px 10px 9px 28px;background:var(--bg2);border-radius:12px;font-size:12px;color:var(--text);line-height:1.5;}
.feature-detail-body li::before{content:"✓";position:absolute;left:11px;top:9px;color:var(--teal-d);font-weight:900;}
.roadmap-note{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px auto 0;padding:14px 18px;max-width:720px;border-radius:999px;background:rgba(168,216,192,.10);border:1px solid rgba(140,196,184,.18);font-size:13px;font-weight:700;color:var(--ink);text-align:center;}
.roadmap-note i{color:var(--teal-d);}
@keyframes roadmapFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:960px){.roadmap-stage{min-height:720px}.feature-roadmap{grid-template-columns:1fr;}.roadmap-line{display:none}.roadmap-phase{padding:20px}.roadmap-feature-list{grid-template-columns:repeat(2,1fr)}.feature-detail-panel{inset:0}.feature-detail-content{grid-template-columns:1fr;text-align:center}.feature-detail-icon{margin:0 auto}.feature-detail-body ul{text-align:left}}
@media(max-width:640px){.features-roadmap-head{margin-bottom:24px}.features-roadmap-head p{font-size:13px}.roadmap-stage{min-height:880px}.roadmap-feature-list{grid-template-columns:1fr}.roadmap-note{border-radius:18px;align-items:flex-start;text-align:left}.feature-detail-panel{padding:74px 18px 22px;justify-content:flex-start}.feature-detail-back{top:18px;left:18px}.feature-detail-icon{width:82px;height:82px;border-radius:24px;font-size:32px}.feature-detail-body h3{font-size:26px}.feature-detail-body ul{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [07/29] feature-card-overlay-v7
   ─────────────────────────────────────────────────── */
/* Keep the roadmap visible and show the feature detail as a modal overlay */
.roadmap-view.is-hidden{
  display:block !important;
}
.feature-detail-panel{
  position:fixed !important;
  inset:0 !important;
  z-index:1200 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(18px,4vw,48px) !important;
  background:rgba(45,58,53,.28) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:auto !important;
  animation:featureOverlayFadeIn .18s ease-out !important;
}
.feature-detail-panel[hidden]{
  display:none !important;
}
.feature-detail-panel::before{
  display:none !important;
}
.feature-detail-content{
  position:relative !important;
  z-index:1 !important;
  width:min(860px,100%) !important;
  max-height:min(78vh,720px) !important;
  overflow:auto !important;
  display:grid !important;
  grid-template-columns:120px minmax(0,1fr) !important;
  gap:28px !important;
  align-items:center !important;
  margin:0 !important;
  padding:64px 40px 40px !important;
  background:#fff !important;
  border:1px solid rgba(231,234,232,.95) !important;
  border-radius:28px !important;
  box-shadow:0 1px 2px rgba(50,40,35,.06),0 24px 64px -24px rgba(50,40,35,.34) !important;
  animation:featureDialogPopIn .22s cubic-bezier(.22,.9,.36,1) !important;
}
.feature-detail-content::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,#f0a8b8,#f5c8a8,#a8d8c0,#8cc4b8,#7eb8d4);
  opacity:.85;
}
.feature-detail-back{
  position:fixed !important;
  z-index:2 !important;
  top:calc(50vh - min(39vh,360px) + 22px) !important;
  left:50% !important;
  transform:translateX(calc(-50% - 320px)) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  background:var(--bg2) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  font-size:12px !important;
  font-weight:800 !important;
  box-shadow:0 6px 18px rgba(50,40,35,.06) !important;
}
.feature-detail-back:hover{
  background:#fff !important;
  color:var(--teal-d) !important;
}
body.feature-detail-modal-open{
  overflow:hidden !important;
}
@keyframes featureOverlayFadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes featureDialogPopIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:960px){
  .feature-detail-panel{
    align-items:flex-end !important;
    padding:14px !important;
  }
  .feature-detail-content{
    width:100% !important;
    max-height:86vh !important;
    grid-template-columns:1fr !important;
    text-align:center !important;
    padding:72px 22px 26px !important;
    border-radius:24px 24px 0 0 !important;
  }
  .feature-detail-icon{
    margin:0 auto !important;
  }
  .feature-detail-body ul{
    grid-template-columns:1fr !important;
    text-align:left !important;
  }
  .feature-detail-back{
    top:auto !important;
    bottom:calc(min(86vh,720px) - 54px) !important;
    left:32px !important;
    transform:none !important;
  }
}

/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [08/29] feature-card-overlay-v9
   ─────────────────────────────────────────────────── */
body.feature-detail-modal-open::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1190;
  background:rgba(45,58,53,.30);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  pointer-events:none;
}
.feature-detail-panel{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:1200 !important;
}
.feature-detail-back{
  display:none !important;
}
.feature-detail-content{
  width:min(1120px,96vw) !important;
  max-height:min(84vh,780px) !important;
  grid-template-columns:128px minmax(0,1fr) minmax(360px,.95fr) !important;
  gap:32px !important;
  padding:62px 48px 48px !important;
  align-items:center !important;
}
.feature-detail-screenshot{
  grid-column:3;
  grid-row:1 / span 2;
  min-height:360px;
  align-self:stretch;
  border:1px solid rgba(216,234,229,.95);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,251,252,.98)),
    radial-gradient(circle at 20% 20%, rgba(168,216,192,.22), transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(126,184,212,.16), transparent 38%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 14px 34px -28px rgba(50,40,35,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.feature-shot-toolbar{
  height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 16px;
  border-bottom:1px solid rgba(238,240,242,.95);
  background:rgba(255,255,255,.72);
}
.feature-shot-toolbar span{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--tw-line-soft,#eef0f2);
}
.feature-shot-toolbar span:nth-child(1){background:#f0a8b8}
.feature-shot-toolbar span:nth-child(2){background:#f5c8a8}
.feature-shot-toolbar span:nth-child(3){background:#a8d8c0}
.feature-shot-placeholder{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  color:var(--tw-text-soft,#aba29d);
  padding:28px;
}
.feature-shot-placeholder i{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(168,216,192,.14);
  color:var(--tw-color-teal-deep,#6ea69a);
  font-size:22px;
}
.feature-shot-placeholder span{
  font-size:15px;
  font-weight:900;
  color:var(--tw-text-mid,#7a6f6a);
}
.feature-shot-placeholder small{
  font-size:11px;
  color:var(--tw-text-soft,#aba29d);
}
@media(max-width:960px){
  body.feature-detail-modal-open::before{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .feature-detail-content{
    width:100% !important;
    max-height:88vh !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:42px 22px 26px !important;
  }
  .feature-detail-screenshot{
    grid-column:1 !important;
    grid-row:auto !important;
    min-height:220px !important;
    width:100% !important;
  }
}

/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [09/29] feature-card-overlay-v10
   ─────────────────────────────────────────────────── */
body.feature-detail-modal-open::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1190;
  background:rgba(45,58,53,.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none;
}
.feature-detail-panel{
  position:fixed !important;
  inset:0 !important;
  z-index:1200 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:44px 36px !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.feature-detail-panel[hidden]{display:none !important;}
.feature-detail-back{display:none !important;}
.feature-detail-content{
  width:min(1500px,calc(100vw - 72px)) !important;
  height:min(850px,calc(100vh - 88px)) !important;
  max-height:none !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:110px minmax(310px,.34fr) minmax(760px,.66fr) !important;
  grid-template-rows:1fr !important;
  gap:34px !important;
  align-items:center !important;
  margin:0 !important;
  padding:58px 54px 54px !important;
  background:#fff !important;
  border:1px solid rgba(231,234,232,.95) !important;
  border-radius:32px !important;
  box-shadow:0 1px 2px rgba(50,40,35,.06),0 32px 88px -26px rgba(50,40,35,.38) !important;
}
.feature-detail-content::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,#f0a8b8,#f5c8a8,#a8d8c0,#8cc4b8,#7eb8d4);
  opacity:.85;
}
.feature-detail-icon{
  width:110px !important;
  height:110px !important;
  border-radius:32px !important;
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
}
.feature-detail-body{
  align-self:center !important;
  min-width:0 !important;
}
.feature-detail-body h3{
  font-size:clamp(36px,3.2vw,52px) !important;
  margin-bottom:14px !important;
}
.feature-detail-body p{
  font-size:15px !important;
  line-height:1.85 !important;
  margin-bottom:24px !important;
}
.feature-detail-body ul{
  grid-template-columns:1fr !important;
  gap:10px !important;
}
.feature-detail-body li{
  font-size:13px !important;
  padding:11px 12px 11px 30px !important;
}
.feature-detail-screenshot{
  grid-column:3 !important;
  grid-row:1 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  border-radius:28px !important;
}
.feature-shot-toolbar{height:42px !important;}
.feature-shot-placeholder{padding:36px !important;}
.feature-shot-placeholder i{
  width:72px !important;
  height:72px !important;
  border-radius:22px !important;
  font-size:28px !important;
}
.feature-shot-placeholder span{font-size:17px !important;}
.feature-shot-placeholder small{font-size:12px !important;}
@media(max-width:1200px){
  .feature-detail-content{
    width:calc(100vw - 40px) !important;
    height:calc(100vh - 72px) !important;
    grid-template-columns:90px minmax(250px,.38fr) minmax(420px,.62fr) !important;
    gap:24px !important;
    padding:44px 34px 34px !important;
  }
  .feature-detail-icon{width:90px !important;height:90px !important;font-size:34px !important;}
}
@media(max-width:960px){
  .feature-detail-panel{
    align-items:center !important;
    padding:18px !important;
  }
  .feature-detail-content{
    width:calc(100vw - 36px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:18px !important;
    padding:36px 22px 22px !important;
    border-radius:26px !important;
    overflow:hidden !important;
    text-align:center !important;
  }
  .feature-detail-icon{margin:0 auto !important;width:82px !important;height:82px !important;}
  .feature-detail-body ul{text-align:left !important;}
  .feature-detail-screenshot{
    grid-column:1 !important;
    grid-row:auto !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    min-height:0 !important;
  }
}

/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [10/29] feature-card-overlay-v11
   ─────────────────────────────────────────────────── */
body.feature-detail-modal-open::before{
  background:rgba(45,58,53,.32) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.feature-detail-panel{
  padding:28px 12px !important;
  overflow:hidden !important;
}
.feature-detail-content{
  width:min(1800px,calc(100vw - 24px)) !important;
  height:min(900px,calc(100vh - 56px)) !important;
  max-width:none !important;
  max-height:none !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:96px 340px minmax(0,1fr) !important;
  gap:28px !important;
  padding:48px 44px 44px !important;
  box-sizing:border-box !important;
}
.feature-detail-icon,
.feature-detail-body,
.feature-detail-screenshot{
  min-width:0 !important;
  max-width:100% !important;
}
.feature-detail-body{
  width:100% !important;
}
.feature-detail-screenshot{
  grid-column:3 !important;
  grid-row:1 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.feature-detail-screenshot img,
.feature-detail-screenshot video,
.feature-detail-screenshot picture,
.feature-shot-placeholder{
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box !important;
}
@media(min-width:1600px){
  .feature-detail-content{
    grid-template-columns:110px 410px minmax(0,1fr) !important;
    gap:34px !important;
    padding:58px 54px 54px !important;
  }
}
@media(max-width:1300px){
  .feature-detail-content{
    width:calc(100vw - 20px) !important;
    height:calc(100vh - 48px) !important;
    grid-template-columns:82px 300px minmax(0,1fr) !important;
    gap:20px !important;
    padding:40px 30px 30px !important;
  }
  .feature-detail-icon{
    width:82px !important;
    height:82px !important;
    font-size:32px !important;
  }
  .feature-detail-body h3{
    font-size:clamp(30px,3vw,42px) !important;
  }
  .feature-detail-body p{
    font-size:14px !important;
    line-height:1.75 !important;
  }
  .feature-detail-body li{
    font-size:12px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
  }
}
@media(max-width:960px){
  .feature-detail-panel{padding:18px !important;}
  .feature-detail-content{
    width:calc(100vw - 36px) !important;
    height:auto !important;
    max-height:none !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:18px !important;
    padding:36px 22px 22px !important;
  }
  .feature-detail-screenshot{
    grid-column:1 !important;
    grid-row:auto !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
  }
}

/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [11/29] feature-card-overlay-v13-nav-and-meta
   ─────────────────────────────────────────────────── */
@media (min-width: 961px){
  .feature-detail-content{
    grid-template-rows:auto auto minmax(0, 1fr) auto !important;
    row-gap:18px !important;
  }
  .feature-detail-meta{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:start !important;
    justify-self:start !important;
    display:inline-flex !important;
    align-items:center !important;
    max-width:100% !important;
    padding:7px 14px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(140,196,184,.22) !important;
    color:var(--tw-color-teal-deep, #6ea69a) !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    line-height:1.25 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  .feature-detail-meta::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--tw-color-teal, #8cc4b8);
    margin-right:8px;
    flex:0 0 7px;
  }
  .feature-detail-icon{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:start !important;
    justify-self:start !important;
  }
  .feature-detail-body{
    grid-column:1 !important;
    grid-row:3 !important;
    align-self:start !important;
    overflow:hidden !important;
  }
  .feature-detail-nav{
    grid-column:1 !important;
    grid-row:4 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    align-self:end !important;
    min-width:0 !important;
  }
  .feature-detail-nav-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:92px !important;
    padding:10px 16px !important;
    border-radius:999px !important;
    border:1px solid rgba(140,196,184,.28) !important;
    background:#fff !important;
    color:var(--tw-color-teal-deep, #6ea69a) !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1 !important;
    box-shadow:0 4px 12px rgba(50,40,35,.06) !important;
    cursor:pointer !important;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease !important;
  }
  .feature-detail-nav-btn:hover{
    transform:translateY(-1px) !important;
    background:rgba(168,216,192,.10) !important;
    box-shadow:0 8px 18px rgba(50,40,35,.09) !important;
  }
  .feature-detail-screenshot{
    grid-column:2 !important;
    grid-row:1 / span 4 !important;
  }
}
@media (min-width: 961px) and (max-width: 1180px){
  .feature-detail-content{row-gap:14px !important;}
  .feature-detail-meta{font-size:10px !important;padding:6px 12px !important;}
  .feature-detail-nav-btn{min-width:82px !important;padding:9px 13px !important;font-size:11px !important;}
}
@media (max-width: 960px){
  .feature-detail-meta{
    display:inline-flex;
    align-items:center;
    gap:7px;
    justify-content:center;
    width:max-content;
    max-width:100%;
    margin:0 auto 12px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(168,216,192,.12);
    color:var(--tw-color-teal-deep, #6ea69a);
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
  }
  .feature-detail-meta::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--tw-color-teal, #8cc4b8);
  }
  .feature-detail-nav{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:16px;
  }
  .feature-detail-nav-btn{
    min-width:88px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(140,196,184,.28);
    background:#fff;
    color:var(--tw-color-teal-deep, #6ea69a);
    font-size:12px;
    font-weight:800;
    box-shadow:0 4px 12px rgba(50,40,35,.06);
  }
}

/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [12/29] v102-logo-number-fix
   ─────────────────────────────────────────────────── */
/* モバイル縦：もっとロゴへ近づける */
@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{padding:8px 0 10px !important;}
  #concept .logo-num-1{left:49% !important; top:34px !important;}
  #concept .logo-num-2{left:82% !important; top:34px !important;}
  #concept .logo-num-3{left:60% !important; bottom:34px !important;}
  #concept .logo-num-4{left:70% !important; bottom:34px !important;}
}

/* タブレット縦：少し離す */
@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{padding:70px 0 74px !important;}
  #concept .logo-num-1{left:48% !important; top:6px !important;}
  #concept .logo-num-2{left:83% !important; top:6px !important;}
  #concept .logo-num-3{left:60% !important; bottom:6px !important;}
  #concept .logo-num-4{left:70% !important; bottom:6px !important;}
}

/* ───────────────────────────────────────────────────
   [13/29] v103-logo-number-portrait-final-fix
   ─────────────────────────────────────────────────── */
/* v103: スクリーンショット確認後の縦画面専用調整
   - モバイル縦：丸数字をロゴへ近づける
   - タブレット縦：丸数字をロゴから離す
   - PC / 横画面：既存位置を維持
*/

/* モバイル縦 */
@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:4px 0 6px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:50px !important;
  }
  #concept .logo-num-2{
    left:82.5% !important;
    top:50px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:50px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:50px !important;
  }
}

/* タブレット縦 */
@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:82px 0 86px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:-6px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:-6px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:-6px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:-6px !important;
  }
}

/* ───────────────────────────────────────────────────
   [14/29] v108-ipadpro-fix
   ─────────────────────────────────────────────────── */
/* iPad Pro 縦向き専用 */
@media only screen
and (min-width: 1024px)
and (max-width: 1366px)
and (orientation: portrait){

  #concept .concept-logo-stage{
    padding:110px 0 114px !important;
  }

  #concept .logo-num-1{
    top:-18px !important;
  }

  #concept .logo-num-2{
    top:-18px !important;
  }

  #concept .logo-num-3{
    bottom:-18px !important;
  }

  #concept .logo-num-4{
    bottom:-18px !important;
  }
}

/* ───────────────────────────────────────────────────
   [15/29] v109-ipadpro-refine
   ─────────────────────────────────────────────────── */
/* iPad Pro縦向き：少し近づける */
@media only screen
and (min-width:1024px)
and (max-width:1366px)
and (orientation:portrait){

  #concept .concept-logo-stage{
    padding:95px 0 100px !important;
  }

  #concept .logo-num-1{
    top:-2px !important;
  }

  #concept .logo-num-2{
    top:-2px !important;
  }

  #concept .logo-num-3{
    bottom:-2px !important;
  }

  #concept .logo-num-4{
    bottom:-2px !important;
  }
}

/* ───────────────────────────────────────────────────
   [16/29] v110-ipadpro-close
   ─────────────────────────────────────────────────── */
/* iPad Pro縦向き：ロゴへ近づける */
@media only screen
and (min-width:1024px)
and (max-width:1366px)
and (orientation:portrait){

  #concept .concept-logo-stage{
    padding:55px 0 60px !important;
  }

  #concept .logo-num-1{
    top:28px !important;
    left:48.5% !important;
  }

  #concept .logo-num-2{
    top:28px !important;
    left:82.5% !important;
  }

  #concept .logo-num-3{
    bottom:28px !important;
    left:59.5% !important;
  }

  #concept .logo-num-4{
    bottom:28px !important;
    left:70.5% !important;
  }
}

/* ───────────────────────────────────────────────────
   [17/29] v111-tablet-close-final
   ─────────────────────────────────────────────────── */
/* iPad Pro / タブレット縦向き共通：さらにロゴへ近づける */
@media (orientation:portrait) and (min-width:768px){

  #concept .concept-logo-stage{
    padding:35px 0 40px !important;
  }

  #concept .logo-num-1{
    top:42px !important;
    left:48.5% !important;
  }

  #concept .logo-num-2{
    top:42px !important;
    left:82.5% !important;
  }

  #concept .logo-num-3{
    bottom:42px !important;
    left:59.5% !important;
  }

  #concept .logo-num-4{
    bottom:42px !important;
    left:70.5% !important;
  }
}

/* ───────────────────────────────────────────────────
   [18/29] v112-target-tablet-layout-fix
   ─────────────────────────────────────────────────── */
/* v112: iPad Air / Surface Pro / ASUS Zenbook Fold layout alignment
   対象端末の縦幅・横幅で、既存のPC/スマホ基準から外れていた余白とロゴ番号位置を最終上書き。
   末尾配置により、v101〜v111 の重複指定より優先されます。 */

/* 共通: タブレット幅ではカード内部の横余白を一定にし、中央基準を固定 */
@media (min-width: 768px) and (max-width: 1180px){
  :root{ --container-pad: 24px; }

  .container{
    max-width: 1040px;
  }

  #concept .concept-diagram-card,
  #pricing .pricing-hero-card,
  #cta .contact-final{
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }

  #concept .concept-diagram-card{
    padding: 30px 28px !important;
  }

  #concept .concept-center{
    padding: 18px 0 !important;
  }

  #concept .concept-logo-stage{
    width: min(76vw, 500px) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* iPad Air / Surface Pro / Zenbook Fold の縦画面相当: ロゴ番号を中央基準で再配置 */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 960px){
  #concept .concept-diagram{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "wo nnect"
      "logo logo"
      "colon nn" !important;
    gap: 24px 28px !important;
  }

  #concept .concept-logo-stage{
    width: min(72vw, 480px) !important;
    padding: 58px 0 62px !important;
  }

  #concept .concept-logo-num{
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
  }

  #concept .logo-num-1{
    left: 48.4% !important;
    top: 36px !important;
  }

  #concept .logo-num-2{
    left: 82.4% !important;
    top: 36px !important;
  }

  #concept .logo-num-3{
    left: 59.6% !important;
    bottom: 36px !important;
  }

  #concept .logo-num-4{
    left: 70.6% !important;
    bottom: 36px !important;
  }
}

/* 820px前後の iPad Air 対策: わずかに内側へ寄せてロゴとのズレを防止 */
@media (orientation: portrait) and (min-width: 800px) and (max-width: 835px){
  #concept .concept-logo-stage{
    width: min(70vw, 468px) !important;
    padding: 56px 0 60px !important;
  }
  #concept .logo-num-1{ left: 48.2% !important; top: 35px !important; }
  #concept .logo-num-2{ left: 82.2% !important; top: 35px !important; }
  #concept .logo-num-3{ left: 59.5% !important; bottom: 35px !important; }
  #concept .logo-num-4{ left: 70.5% !important; bottom: 35px !important; }
}

/* 850px前後の ASUS Zenbook Fold 対策 */
@media (orientation: portrait) and (min-width: 840px) and (max-width: 875px){
  #concept .concept-logo-stage{
    width: min(70vw, 476px) !important;
    padding: 56px 0 60px !important;
  }
  #concept .logo-num-1{ left: 48.3% !important; top: 35px !important; }
  #concept .logo-num-2{ left: 82.3% !important; top: 35px !important; }
  #concept .logo-num-3{ left: 59.6% !important; bottom: 35px !important; }
  #concept .logo-num-4{ left: 70.6% !important; bottom: 35px !important; }
}

/* 900px前後の Surface Pro 対策 */
@media (orientation: portrait) and (min-width: 890px) and (max-width: 930px){
  #concept .concept-logo-stage{
    width: min(68vw, 490px) !important;
    padding: 58px 0 62px !important;
  }
  #concept .logo-num-1{ left: 48.3% !important; top: 36px !important; }
  #concept .logo-num-2{ left: 82.4% !important; top: 36px !important; }
  #concept .logo-num-3{ left: 59.6% !important; bottom: 36px !important; }
  #concept .logo-num-4{ left: 70.6% !important; bottom: 36px !important; }
}

/* タブレット横画面: PC表示になっても横ズレしないよう中央・幅を安定化 */
@media (orientation: landscape) and (min-width: 961px) and (max-width: 1368px){
  .container{
    max-width: 1120px;
  }

  #concept .concept-diagram{
    grid-template-columns: minmax(210px, 1fr) minmax(360px, 500px) minmax(210px, 1fr) !important;
    gap: 18px 28px !important;
  }

  #concept .concept-logo-stage{
    width: min(38vw, 500px) !important;
    max-width: 500px !important;
    padding: 42px 0 46px !important;
  }

  #concept .logo-num-1{ left: 48.6% !important; top: 66px !important; }
  #concept .logo-num-2{ left: 82.2% !important; top: 66px !important; }
  #concept .logo-num-3{ left: 59.6% !important; bottom: 52px !important; }
  #concept .logo-num-4{ left: 70.5% !important; bottom: 52px !important; }
}

/* 横スクロール発生防止の保険 */
@media (min-width: 768px) and (max-width: 1368px){
  html,
  body{
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  svg,
  .concept-diagram,
  .feature-roadmap,
  .scene-block-grid,
  .pricing-compare-table{
    max-width: 100%;
  }
}

/* ───────────────────────────────────────────────────
   [19/29] v113-concept-section-viewport-fit
   ─────────────────────────────────────────────────── */
/* v113: Concept section viewport fit
   1セクション内で見切れにくいよう、見出し・図解・下段カードの縦幅を圧縮 */
#concept.hello-section{
  padding:clamp(28px,3.8vw,44px) 0 clamp(32px,4vw,48px) !important;
}
#concept .concept-section-head{
  margin-bottom:clamp(16px,2vw,24px) !important;
}
#concept .concept-section-head .brand-dots{
  display:none !important;
}
#concept .concept-section-head h2{
  margin-bottom:8px !important;
  font-size:clamp(24px,2.8vw,34px) !important;
  line-height:1.22 !important;
}
#concept .concept-section-head p{
  max-width:860px !important;
  font-size:clamp(12px,1.1vw,14px) !important;
  line-height:1.55 !important;
}
#concept .concept-compact{
  gap:clamp(12px,1.6vw,18px) !important;
}
#concept .concept-diagram-card{
  padding:clamp(16px,2.4vw,28px) !important;
  border-radius:22px !important;
}
#concept .concept-diagram{
  grid-template-columns:minmax(190px,1fr) minmax(280px,440px) minmax(190px,1fr) !important;
  gap:clamp(14px,2vw,24px) clamp(16px,2.4vw,32px) !important;
  max-width:1080px !important;
}
#concept .concept-center{
  padding:12px 0 !important;
}
#concept .concept-logo-stage{
  width:min(100%,430px) !important;
  max-width:430px !important;
  padding:20px 0 22px !important;
}
#concept .concept-logo-num{
  width:30px !important;
  height:30px !important;
  font-size:14px !important;
  box-shadow:0 5px 12px rgba(50,40,35,.12) !important;
}
#concept .logo-num-1{top:46px !important;left:48.7% !important;}
#concept .logo-num-2{top:46px !important;left:82.2% !important;}
#concept .logo-num-3{bottom:36px !important;left:59.6% !important;}
#concept .logo-num-4{bottom:36px !important;left:70.4% !important;}
#concept .concept-box{
  min-height:70px !important;
  padding:12px 16px !important;
  gap:12px !important;
  border-radius:16px !important;
  box-shadow:0 4px 14px rgba(50,40,35,.05) !important;
}
#concept .concept-box .concept-num{
  flex-basis:38px !important;
  width:38px !important;
  height:38px !important;
  font-size:17px !important;
}
#concept .concept-box p{
  gap:2px !important;
  line-height:1.35 !important;
}
#concept .concept-box p b{
  font-size:clamp(16px,1.15vw,18px) !important;
  line-height:1.05 !important;
}
#concept .concept-box p span{
  font-size:clamp(11px,.95vw,13px) !important;
  line-height:1.42 !important;
}
#concept .concept-card-row{
  gap:10px !important;
}
#concept .concept-mini-card{
  min-height:128px !important;
  padding:12px 10px 11px !important;
  border-radius:16px !important;
}
#concept .concept-card-icon{
  width:40px !important;
  height:40px !important;
  margin-bottom:8px !important;
  font-size:17px !important;
}
#concept .concept-card-icon.infinity-symbol{
  font-size:27px !important;
}
#concept .concept-mini-card h3{
  margin-bottom:5px !important;
  gap:4px !important;
}
#concept .concept-mini-card h3 span{
  font-size:21px !important;
}
#concept .concept-mini-card h3 small{
  font-size:11px !important;
}
#concept .concept-mini-card p{
  font-size:10.5px !important;
  line-height:1.38 !important;
}

/* タブレット縦: 図解を2段化しつつ、ロゴ余白とカード高を抑える */
@media (orientation:portrait) and (min-width:768px) and (max-width:1180px){
  #concept.hello-section{
    padding:28px 0 34px !important;
  }
  #concept .concept-section-head{
    margin-bottom:14px !important;
  }
  #concept .concept-section-head h2{
    font-size:28px !important;
  }
  #concept .concept-section-head p{
    font-size:12.5px !important;
    line-height:1.48 !important;
  }
  #concept .concept-diagram-card{
    padding:18px 18px !important;
  }
  #concept .concept-diagram{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "wo nnect"
      "logo logo"
      "colon nn" !important;
    gap:12px 16px !important;
  }
  #concept .concept-center{
    padding:0 !important;
  }
  #concept .concept-logo-stage{
    width:min(58vw,390px) !important;
    max-width:390px !important;
    padding:16px 0 18px !important;
  }
  #concept .logo-num-1{top:38px !important;left:48.5% !important;}
  #concept .logo-num-2{top:38px !important;left:82.4% !important;}
  #concept .logo-num-3{bottom:30px !important;left:59.6% !important;}
  #concept .logo-num-4{bottom:30px !important;left:70.6% !important;}
  #concept .concept-box{
    min-height:64px !important;
    padding:10px 14px !important;
  }
  #concept .concept-box .concept-num{
    flex-basis:34px !important;
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .concept-card-row{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  #concept .concept-mini-card{
    min-height:112px !important;
    padding:10px 8px !important;
  }
  #concept .concept-card-icon{
    width:34px !important;
    height:34px !important;
    margin-bottom:6px !important;
    font-size:15px !important;
  }
  #concept .concept-mini-card h3 span{font-size:18px !important;}
  #concept .concept-mini-card h3 small{font-size:10px !important;}
  #concept .concept-mini-card p{font-size:9.5px !important;line-height:1.32 !important;}
}

/* ノートPCなど高さが浅い画面: さらにコンパクト */
@media (min-width:961px) and (max-height:820px){
  #concept.hello-section{padding:26px 0 32px !important;}
  #concept .concept-section-head{margin-bottom:12px !important;}
  #concept .concept-section-head p{line-height:1.42 !important;}
  #concept .concept-diagram-card{padding:16px 22px !important;}
  #concept .concept-diagram{gap:12px 24px !important;}
  #concept .concept-logo-stage{max-width:390px !important;padding:14px 0 16px !important;}
  #concept .logo-num-1{top:36px !important;}
  #concept .logo-num-2{top:36px !important;}
  #concept .logo-num-3{bottom:28px !important;}
  #concept .logo-num-4{bottom:28px !important;}
  #concept .concept-box{min-height:62px !important;padding:10px 14px !important;}
  #concept .concept-mini-card{min-height:108px !important;padding:9px 8px !important;}
  #concept .concept-card-icon{width:32px !important;height:32px !important;margin-bottom:5px !important;font-size:14px !important;}
  #concept .concept-mini-card p{font-size:9.5px !important;line-height:1.30 !important;}
}

/* モバイル: 1列積み上げをやめ、図解カードを2列化して縦幅を削減 */
@media (max-width:640px){
  #concept.hello-section{
    padding:28px 0 34px !important;
  }
  #concept .concept-section-head{
    margin-bottom:14px !important;
  }
  #concept .concept-section-head h2{
    font-size:23px !important;
  }
  #concept .concept-section-head p{
    font-size:12px !important;
    line-height:1.48 !important;
  }
  #concept .concept-diagram-card{
    padding:14px 12px !important;
  }
  #concept .concept-diagram{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "logo logo"
      "wo nnect"
      "colon nn" !important;
    gap:8px !important;
  }
  #concept .concept-center{padding:0 0 4px !important;}
  #concept .concept-logo-stage{
    width:min(78vw,280px) !important;
    padding:10px 0 12px !important;
  }
  #concept .concept-logo-num{
    width:24px !important;
    height:24px !important;
    font-size:11px !important;
  }
  #concept .logo-num-1{left:48.5% !important;top:28px !important;}
  #concept .logo-num-2{left:82.5% !important;top:28px !important;}
  #concept .logo-num-3{left:59.5% !important;bottom:22px !important;}
  #concept .logo-num-4{left:70.5% !important;bottom:22px !important;}
  #concept .concept-box{
    min-height:58px !important;
    padding:9px 10px !important;
    gap:8px !important;
    border-radius:14px !important;
  }
  #concept .concept-box .concept-num{
    flex-basis:28px !important;
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .concept-box p b{font-size:14px !important;}
  #concept .concept-box p span{font-size:10px !important;line-height:1.32 !important;}
  #concept .concept-card-row{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:5px !important;
  }
  #concept .concept-mini-card{
    min-height:82px !important;
    padding:8px 4px !important;
    border-radius:12px !important;
  }
  #concept .concept-card-icon{
    width:28px !important;
    height:28px !important;
    margin-bottom:4px !important;
    font-size:12px !important;
  }
  #concept .concept-card-icon.infinity-symbol{font-size:20px !important;}
  #concept .concept-mini-card h3{gap:2px !important;margin-bottom:3px !important;}
  #concept .concept-mini-card h3 span{font-size:15px !important;}
  #concept .concept-mini-card h3 small{font-size:8.5px !important;}
  #concept .concept-mini-card p{font-size:8px !important;line-height:1.25 !important;}
}

/* ───────────────────────────────────────────────────
   [20/29] v115-concept-tablet-mobile-same-refit
   ─────────────────────────────────────────────────── */
/* v115: Tablet concept refit
   タブレット幅でもスマホ版と同じ2列図解レイアウトに統一し、
   1セクション内で見切れにくい高さへ圧縮する。 */
@media (min-width:641px) and (max-width:960px){
  #concept.hello-section{
    padding:26px 0 22px !important;
    min-height:auto !important;
  }

  #concept .container{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  #concept .concept-section-head{
    margin-bottom:12px !important;
  }
  #concept .concept-section-head h2{
    font-size:26px !important;
    line-height:1.22 !important;
    margin-bottom:8px !important;
  }
  #concept .concept-section-head p{
    font-size:12.5px !important;
    line-height:1.45 !important;
  }

  #concept .concept-compact{
    gap:10px !important;
  }

  #concept .concept-diagram-card{
    padding:14px 14px !important;
    border-radius:22px !important;
    margin-bottom:12px !important;
  }

  #concept .concept-diagram{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "logo logo"
      "wo nnect"
      "colon nn" !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  #concept .concept-center{
    padding:0 0 4px !important;
  }
  #concept .concept-logo-stage{
    width:min(58vw,360px) !important;
    padding:12px 0 14px !important;
  }
  #concept .concept-logo-num{
    width:24px !important;
    height:24px !important;
    font-size:11px !important;
  }
  #concept .logo-num-1{left:48.5% !important;top:20px !important;}
  #concept .logo-num-2{left:84% !important;top:20px !important;}
  #concept .logo-num-3{left:59.5% !important;bottom:20px !important;}
  #concept .logo-num-4{left:70.5% !important;bottom:20px !important;}

  #concept .concept-box{
    min-height:62px !important;
    padding:10px 10px !important;
    gap:8px !important;
    border-radius:15px !important;
    border-width:1.5px !important;
  }
  #concept .concept-box .concept-num{
    flex:0 0 30px !important;
    width:30px !important;
    height:30px !important;
    font-size:14px !important;
  }
  #concept .concept-box p{
    gap:2px !important;
    line-height:1.25 !important;
  }
  #concept .concept-box p b{
    font-size:15px !important;
    line-height:1.05 !important;
  }
  #concept .concept-box p span{
    font-size:10.5px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
  }

  #concept .concept-card-row{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-top:0 !important;
  }
  #concept .concept-mini-card{
    min-height:82px !important;
    padding:8px 5px !important;
    border-radius:12px !important;
  }
  #concept .concept-mini-card.wa-blue{
    grid-column:1 / -1 !important;
    min-height:66px !important;
    padding:9px 12px !important;
  }
  #concept .concept-card-icon{
    width:28px !important;
    height:28px !important;
    margin-bottom:3px !important;
    font-size:12px !important;
  }
  #concept .concept-card-icon.infinity-symbol{
    font-size:20px !important;
  }
  #concept .concept-mini-card h3{
    margin-bottom:2px !important;
    gap:2px !important;
  }
  #concept .concept-mini-card h3 span{
    font-size:15px !important;
  }
  #concept .concept-mini-card h3 small{
    font-size:8.5px !important;
  }
  #concept .concept-mini-card p{
    font-size:8px !important;
    line-height:1.24 !important;
  }

  #concept + .grad-line,
  #concept + .grad-line + section,
  #issues{
    margin-top:0 !important;
  }
  #issues{
    padding-top:28px !important;
  }
}

/* ───────────────────────────────────────────────────
   [21/29] wonnect-restored-v53
   ─────────────────────────────────────────────────── */
/* v53: CSSリファクタ時に巻き込み削除していた既存スタイルの復元
   （強み／導入の流れ／料金／お問い合わせ／コンセプト等）
   ※独自スタイル(wonnect-custom)より前に置き、後段の指定が優先されるようにする */

@media (max-width:640px){
  /* Move the return button into its own top-right space and start the release badge below it. */
  #featureDetailPanel .feature-detail-back,
  #featureDetailPanel .feature-detail-close{
    top:12px !important;
    right:16px !important;
    height:30px !important;
    min-width:82px !important;
    padding:0 12px !important;
    font-size:11px !important;
    line-height:30px !important;
    z-index:80 !important;
  }

  #featureDetailPanel .feature-detail-content,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
    padding-top:58px !important;
  }

  #featureDetailPanel .feature-detail-meta{
    width:100% !important;
    max-width:100% !important;
    margin-top:0 !important;
    box-sizing:border-box !important;
    position:relative !important;
    z-index:1 !important;
  }

  #featuresRoadmapStage.is-feature-surface-open,
  #features .roadmap-stage.is-feature-surface-open{
    min-height:835px !important;
  }
}

@media (max-width:380px){
  #featureDetailPanel .feature-detail-back,
  #featureDetailPanel .feature-detail-close{
    top:10px !important;
    right:12px !important;
    height:28px !important;
    min-width:78px !important;
    padding:0 10px !important;
    font-size:10.5px !important;
    line-height:28px !important;
  }

  #featureDetailPanel .feature-detail-content,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
    padding-top:54px !important;
  }

  #featuresRoadmapStage.is-feature-surface-open,
  #features .roadmap-stage.is-feature-surface-open{
    min-height:802px !important;
  }
}

/* ═══════════════════════════════════════════════════
   Phase1: Features Roadmap 視認性向上（v4・#features高特異性）
   ═══════════════════════════════════════════════════ */
#features .features-roadmap-wrap .phase-head{
  padding-bottom:16px !important;
  margin-bottom:16px !important;
}
#features .features-roadmap-wrap .phase-badge{
  font-size:11px !important;
  padding:5px 14px !important;
  letter-spacing:.08em !important;
}
#features .features-roadmap-wrap .phase-head strong{
  font-size:19px !important;
  display:block !important;
  margin-top:10px !important;
}
#features .features-roadmap-wrap .phase-head small{
  font-size:12.5px !important;
  display:block !important;
  margin-top:4px !important;
  opacity:.85 !important;
}
#features .roadmap-feature-list .roadmap-feature-card{
  padding:14px 14px !important;
  min-height:60px !important;
  gap:11px !important;
  align-items:center !important;
}
#features .roadmap-feature-list .roadmap-feature-card b{
  font-size:14.5px !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
}
#features .roadmap-feature-list .roadmap-feature-card small{
  font-size:11.5px !important;
  line-height:1.35 !important;
  display:block !important;
  margin-top:3px !important;
  opacity:.72 !important;
}
#features .roadmap-feature-list .rf-icon{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;
  border-radius:12px !important;
  font-size:17px !important;
}
#features .features-roadmap-wrap .roadmap-feature-list{
  grid-template-columns:1fr !important;
  gap:10px !important;
}
/* 1列化に伴いカードを横長・コンパクトに */
#features .roadmap-feature-list .roadmap-feature-card{
  min-height:56px !important;
}
#features .features-roadmap-wrap .roadmap-phase{
  padding:24px 22px !important;
}
/* 列は自然な高さ（上揃え）。1列カードで横幅を活かし読みやすく */
#features .feature-roadmap{
  align-items:start !important;
}
#features .roadmap-phase .roadmap-feature-list{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
}

/* ═══════════════════════════════════════════════════
   Phase2-A: タイポグラフィ統一（H2）＋ 横幅統一
   ═══════════════════════════════════════════════════ */
/* --- セクションH2を統一（28-38px / weight800 / lh1.3） --- */
#issues .issues-header h2,
#concept .section-head h2,
#connect .solution-header h2,
#features .features-header h2,
#scenes .industry-scene-header h2,
#pricing .section-head h2,
#faq .section-head h2,
#cta .contact-final-left h2{
  font-size:clamp(28px, 3vw, 38px) !important;
  font-weight:800 !important;
  line-height:1.32 !important;
  letter-spacing:.01em !important;
}
#origin .origin-story .origin-h2{
  font-size:clamp(28px, 3vw, 38px) !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}
/* --- 横幅統一: scenesを他セクションと同じ1120pxに --- */
#scenes .container{
  max-width:1120px !important;
}

/* ═══ Phase2-B: サブコピー統一（15px / lh1.7） ═══ */
#issues .issues-header > p,
#concept .concept-section-head > p,
#connect .solution-header > p,
#features .features-header > p,
#scenes .industry-scene-header > p,
#pricing .section-head .section-text,
#faq .section-head .section-text,
#origin .origin-story .origin-lead,
#cta .contact-final-left .contact-final-lead{
  font-size:15px !important;
  line-height:1.7 !important;
}

/* ═══ Phase2-C: セクション縦余白リズム統一（clamp 36-56px） ═══ */
#issues, #concept, #origin, #connect, #features,
#scenes, #pricing, #faq, #cta{
  padding-top:clamp(36px, 4.4vw, 56px) !important;
  padding-bottom:clamp(36px, 4.4vw, 56px) !important;
}
/* concept高特異性上書き */
section#concept.hello-section{
  padding-top:clamp(36px, 4.4vw, 56px) !important;
  padding-bottom:clamp(36px, 4.4vw, 56px) !important;
}

/* ═══════════════════════════════════════════════════
   Phase3: 見せ場のメリハリ（3ティア強調システム）
   ═══════════════════════════════════════════════════ */

/* --- Tier3: concept 抑制（背景を白系に。カラフル"ワネクト"は維持） --- */
section#concept.hello-section{
  background:#ffffff !important;
}
section#concept.hello-section::before{
  opacity:.35 !important;
}

/* --- Tier1: 料金 格上げ（背景tint＋H2グラデ＋無制限強調） --- */
#pricing{
  background:linear-gradient(180deg, rgba(140,196,184,.10) 0%, rgba(245,200,168,.06) 100%) !important;
}
#pricing .section-head h2{
  background:linear-gradient(100deg, #5ea89c 0%, #7eb8d4 50%, #e2896f 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
/* 料金H2下に強調下線 */
#pricing .section-head h2::after{
  content:"" !important;
  display:block !important;
  width:56px !important;
  height:4px !important;
  margin:14px auto 0 !important;
  border-radius:4px !important;
  background:linear-gradient(90deg, #8cc4b8, #7eb8d4) !important;
}

/* --- Tier2: 課題 小アクセント（ピルを強調） --- */
#issues .section-pill{
  background:linear-gradient(135deg, rgba(233,111,145,.14), rgba(245,200,168,.14)) !important;
  font-weight:800 !important;
}

/* --- Tier1: CTA 格上げ（濃teal背景・最終CVを強く促す） --- */
#cta.contact-final-wrap{
  background:linear-gradient(155deg, #3f7a6f 0%, #35656b 55%, #37607a 100%) !important;
}
/* 左カラム見出し・リードを白に */
#cta .contact-final-left h2,
#cta .contact-final-left h2 .contact-title-main,
#cta .contact-final-left h2 span{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:none !important;
}
#cta .contact-final-left .contact-final-lead{
  color:rgba(255,255,255,.88) !important;
}
/* kicker(GET IN TOUCH)をガラス調に */
#cta .contact-final-kicker{
  background:rgba(255,255,255,.16) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.28) !important;
}
#cta .contact-final-kicker *{ color:#ffffff !important; }
/* 連絡先カード(CALL/EMAIL)をガラス調に */
#cta .contact-info-card{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
#cta .contact-info-card,
#cta .contact-info-card *{
  color:rgba(255,255,255,.92) !important;
}
#cta .contact-info-card small,
#cta .contact-info-card .contact-info-sub{
  color:rgba(255,255,255,.65) !important;
}
/* フォームは白カードで可読性確保 */
#cta .contact-final-form{
  background:#ffffff !important;
  box-shadow:0 20px 50px rgba(0,0,0,.18) !important;
}

/* ═══════════════════════════════════════════════════
   導入の流れ（Onboarding）セクション
   ═══════════════════════════════════════════════════ */
#onboarding{
  padding-top:clamp(36px, 4.4vw, 56px);
  padding-bottom:clamp(36px, 4.4vw, 56px);
}
#onboarding .container{ max-width:1120px; }
.onboarding-header{ text-align:center; margin-bottom:36px; }
.onboarding-header h2{
  font-size:clamp(28px, 3vw, 38px);
  font-weight:800;
  line-height:1.32;
  margin:14px 0 0;
}
.onboarding-header .section-text{
  font-size:15px; line-height:1.7; color:var(--muted, #9ca3af); margin:10px 0 0;
}
/* ステップ横並び */
.onboarding-steps{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  align-items:stretch;
}
.flw-step{
  position:relative;
  background:var(--white, #fff);
  border:1px solid var(--line, #e5e7eb);
  border-radius:16px;
  padding:24px 16px 20px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.flw-step:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(140,196,184,.16);
}
/* ステップ間の接続線（PC） */
.flw-step-connector{
  position:absolute;
  top:52px;
  right:-8px;
  width:16px;
  height:2px;
  background:linear-gradient(90deg, rgba(140,196,184,.5), rgba(126,184,212,.5));
  z-index:1;
}
.flw-step-num{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--teal-d, #6ea69a);
  margin-bottom:12px;
}
.flw-step-icon{
  width:56px; height:56px;
  margin:0 auto 14px;
  display:grid; place-items:center;
  border-radius:16px;
  font-size:22px;
  color:#fff;
}
.flw-icon-1{ background:linear-gradient(135deg, #e99ab1, #f0b3a0); }
.flw-icon-2{ background:linear-gradient(135deg, #f5c88a, #f0d878); }
.flw-icon-3{ background:linear-gradient(135deg, #8cc4b8, #98d4a8); }
.flw-icon-4{ background:linear-gradient(135deg, #7eb8d4, #8cc4b8); }
.flw-icon-5{ background:linear-gradient(135deg, #6ea69a, #7eb8d4); }
.flw-step h3{
  font-size:15px;
  font-weight:800;
  color:var(--ink, #3a3a3a);
  margin:0 0 8px;
  line-height:1.4;
}
.flw-step p{
  font-size:12.5px;
  line-height:1.65;
  color:var(--muted-2, #6b7280);
  margin:0;
}
/* トライアルの2ヶ月無料バッジ */
.flw-badge{
  display:inline-block;
  margin-left:5px;
  padding:2px 8px;
  font-size:10px;
  font-weight:800;
  color:#fff;
  border-radius:20px;
  background:linear-gradient(135deg, #e56f91, #f0a040);
  vertical-align:middle;
  white-space:nowrap;
}
/* レスポンシブ: タブレット2段・スマホ縦積み */
@media (max-width:900px){
  .onboarding-steps{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .flw-step-connector{ display:none; }
}
@media (max-width:520px){
  .onboarding-steps{ grid-template-columns:1fr; }
  .flw-step{ padding:20px 18px; }
}

/* ═══════════════════════════════════════════════════
   v10: FUTUREフェーズのカードを2カラム化（列間の下端バランス）
   - FUTUREは9機能。NOW/NEXT(各4機能)と下端を揃えるため2列へ。
   - 既存Phase1ブロック(1列flex強制 !important, 特異性1,2,0)を上書き。
     → #features .roadmap-phase.roadmap-future .… (特異性1,3,0)＋!important。
   - 半幅に収めるためFUTUREカードのみコンパクト化。
   - PC(≥961px)のみ2列。タブレット/スマホは既存挙動を維持。
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  #features .roadmap-phase.roadmap-future .roadmap-feature-list{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    align-content:start !important;
  }
  #features .roadmap-phase.roadmap-future .roadmap-feature-card{
    grid-template-columns:34px 1fr !important;
    gap:8px !important;
    padding:10px 11px !important;
    min-height:0 !important;
  }
  #features .roadmap-phase.roadmap-future .rf-icon{
    width:34px !important;height:34px !important;flex:0 0 34px !important;
    border-radius:11px !important;font-size:14px !important;
  }
  #features .roadmap-phase.roadmap-future .roadmap-feature-card b{
    font-size:14.5px !important;line-height:1.2 !important;
  }
  #features .roadmap-phase.roadmap-future .roadmap-feature-card small{
    font-size:11px !important;line-height:1.3 !important;margin-top:2px !important;
  }
}

/* ═══════════════════════════════════════════════════
   v11: 機能名に日本語名(カタカナ)を併記 + 日本語サブ表記の補足
   - <b>内に .rf-jp を追加し「英名 ／ カタカナ」をインライン表示。
   - カタカナは1単位で折り返し（英名の次行へ）。長名はFUTUREで2行化する。
   ═══════════════════════════════════════════════════ */
#features .roadmap-feature-card .rf-jp{
  font-weight:600;
  font-size:.74em;
  color:var(--muted);
  margin-left:.34em;
  white-space:normal;
}
#features .roadmap-feature-card .rf-jp::before{
  content:"／";
  margin-right:.22em;
  opacity:.55;
}

/* ═══════════════════════════════════════════════════
   v13: CTA(#cta)レイアウト崩れ修正（最小差分）
   - 原因：base .contact-final{background:var(--white)} の白カード残骸が
     濃teal背景を覆い、左カラムの白見出し・リードが白地に乗って不可視化。
   - 対応：白背景と影のみ除去し teal を透過表示。列レイアウト(余白/配置)は
     元のまま維持し、可視性だけを回復する。
   ═══════════════════════════════════════════════════ */
#cta .contact-final{
  background:transparent !important;
  box-shadow:none !important;
}

/* ═══════════════════════════════════════════════════
   v15: FUTUREカードのレイアウト崩れ修正
   - NEXT(Enhancement)カードは高さ70px/行間10px。FUTUREは72-76px/8pxで不揃い＋
     長カタカナがnowrapで狭幅カードから溢れて見切れていた。
   - 対応：長カタカナを短縮（別途）＋行間10px＋min-height70pxで全カード均一化し
     NEXT列と下端・カード高を一致させる。
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  #features .roadmap-phase.roadmap-future .roadmap-feature-list{
    gap:10px !important;
  }
  #features .roadmap-phase.roadmap-future .roadmap-feature-card{
    box-sizing:border-box !important;
    min-height:94px !important;
  }
  /* 狭幅カードでカタカナ(nowrap)が溢れないよう微縮小（高さは不変） */
  #features .roadmap-phase.roadmap-future .rf-jp{
    font-size:.74em !important;
  }
  /* NOW/NEXTカードも同一高さに揃え、全列のカード高を均一化 */
  #features .roadmap-now .roadmap-feature-card,
  #features .roadmap-next .roadmap-feature-card{
    box-sizing:border-box !important;
    min-height:94px !important;
  }
}

/* ═══════════════════════════════════════════════════
   v17: 強み/なぜwo:nnect セクション（差別化軸4本柱）
   ═══════════════════════════════════════════════════ */
.why-section{ background:linear-gradient(180deg,#f7fbf9 0%,#f1f7f4 100%); padding:var(--sp-9) 0; }
.why-head{ text-align:center; max-width:820px; margin:0 auto var(--sp-7); }
.why-head p{ color:var(--text,#4a5853); }
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:920px; margin:0 auto; }
.why-card{ position:relative; background:#fff; border:1px solid var(--tw-line-soft,#eef0f2); border-radius:18px; padding:30px 28px 26px; transition:transform .25s var(--ease,cubic-bezier(.22,.9,.32,1.12)), box-shadow .25s var(--ease,cubic-bezier(.22,.9,.32,1.12)); }
.why-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px -8px rgba(50,40,35,.10); }
.why-num{ position:absolute; top:18px; right:20px; font-family:var(--font-base,'Nunito',sans-serif); font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--teal,#8cc4b8); opacity:.5; }
.why-icon{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin:0 0 16px; font-size:22px; color:#fff; }
.why-icon-1{ background:linear-gradient(135deg,#8cc4b8,#5ea89c); box-shadow:0 6px 16px rgba(140,196,184,.32); }
.why-icon-2{ background:linear-gradient(135deg,#7eb8d4,#5a9dc8); box-shadow:0 6px 16px rgba(126,184,212,.32); }
.why-icon-3{ background:linear-gradient(135deg,#f0a8b8,#d48a9a); box-shadow:0 6px 16px rgba(240,168,184,.32); }
.why-icon-4{ background:linear-gradient(135deg,#f9dc8c,#f0b84a); box-shadow:0 6px 16px rgba(245,204,106,.34); }
.why-card h3{ font-size:18px; font-weight:900; color:var(--ink,#2d3a35); margin:0 0 10px; line-height:1.5; }
.why-card p{ font-size:13px; line-height:1.85; color:var(--text,#4a5853); margin:0 0 16px; }
.why-tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--teal-d,#5ea89c); background:rgba(140,196,184,.12); padding:5px 13px; border-radius:999px; }
@media(max-width:768px){
  .why-grid{ grid-template-columns:1fr; gap:14px; max-width:520px; }
  .why-card{ padding:24px 22px; }
  .why-head{ margin-bottom:var(--sp-6); }
}

/* ───────────────────────────────────────────────────
   [22/29] wonnect-custom-v42
   ─────────────────────────────────────────────────── */
/* wo:nnect 独自スタイル（v18〜v41の改修をここに集約）*/
/* ═══════════════════════════════════════════════════
   v18: 機能一覧(ロードマップ)の文字を拡大（実効ルールを最終上書き）
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  #features .roadmap-feature-list .roadmap-feature-card b{ font-size:16px !important; line-height:1.25 !important; }
  #features .roadmap-phase.roadmap-future .roadmap-feature-card b{ font-size:14px !important; line-height:1.18 !important; }
  #features .roadmap-feature-list .roadmap-feature-card small{ font-size:12.5px !important; line-height:1.35 !important; }
  #features .roadmap-phase.roadmap-future .roadmap-feature-card small{ font-size:11px !important; line-height:1.25 !important; }
  #features .roadmap-phase.roadmap-future .rf-jp{ font-size:.7em !important; }
  #features .roadmap-feature-card .rf-jp{ font-size:.74em !important; white-space:normal !important; }
  #features .roadmap-feature-list .roadmap-feature-card{ min-height:102px !important; }
}

/* ═══════════════════════════════════════════════════
   v20: 機能詳細パネル 段階開示（代表画面ラベル＋デモ導線）
   ═══════════════════════════════════════════════════ */
#featureDetailPanel .feature-detail-more{
  margin:26px auto 0; max-width:720px;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:18px 22px; border-radius:16px; text-align:center;
  background:rgba(140,196,184,.09); border:1px solid rgba(140,196,184,.30);
}
#featureDetailPanel .fd-more-label{
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:11.5px; font-weight:800; letter-spacing:.08em;
  color:#4a8f83; background:#fff; border:1px solid rgba(140,196,184,.45);
  padding:5px 14px; border-radius:999px;
}
#featureDetailPanel .fd-more-text{
  font-size:13.5px; line-height:1.75; color:var(--text,#4a5853); margin:0;
}
#featureDetailPanel .fd-more-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(120deg,#5ea89c,#4a8f83); color:#fff;
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-weight:800; font-size:14px; text-decoration:none;
  padding:12px 26px; border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(74,143,131,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
#featureDetailPanel .fd-more-btn:hover{
  transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(74,143,131,.6);
}
#featureDetailPanel .fd-more-btn:active{ transform:translateY(0); }
@media(max-width:640px){
  #featureDetailPanel .feature-detail-more{ padding:16px 16px; gap:10px; }
  #featureDetailPanel .fd-more-text{ font-size:12.5px; }
  #featureDetailPanel .fd-more-btn{ width:100%; justify-content:center; font-size:13.5px; padding:12px 18px; }
}

/* ═══════════════════════════════════════════════════
   v21: お問い合わせフォーム（必須表示・同意・送信状態）
   ═══════════════════════════════════════════════════ */
#cfForm .cf-badge{
  display:inline-block; margin-left:6px; vertical-align:1px;
  font-size:10px; font-weight:800; letter-spacing:.04em;
  padding:2px 7px; border-radius:999px;
}
#cfForm .cf-req{ background:#fdeef0; color:#c25b6e; }
#cfForm .cf-any{ background:#eef1f0; color:#8a9591; }

#cfForm .cf-consent{ margin:4px 0 14px; }
#cfForm .cf-consent > label{
  display:flex; align-items:flex-start; gap:9px; margin:0 0 6px;
  font-size:13px; font-weight:600; color:var(--ink,#2d3a35); cursor:pointer;
}
#cfForm .cf-consent input[type="checkbox"]{
  width:18px !important; min-width:18px; height:18px;
  margin:2px 0 0 !important; padding:0 !important;
  accent-color:#5ea89c; cursor:pointer; flex:none;
}
#cfForm .cf-consent-note{
  margin:0; font-size:11.5px; line-height:1.7; color:var(--muted,#8a9591);
}

/* 迷惑投稿対策用の隠し項目（人には見せない） */
#cfForm .cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

#cfForm button:disabled{ opacity:.6; cursor:not-allowed; transform:none !important; }
#cfForm .cf-status{
  margin:12px 0 0; font-size:13px; font-weight:700; line-height:1.7; text-align:center;
}
#cfForm .cf-status.is-ok{ color:#3f7a6f; }
#cfForm .cf-status.is-ng{ color:#c25b6e; }

/* v22: 同意文内リンク */
#cfForm .cf-consent-note a{ color:#5ea89c; font-weight:700; text-decoration:underline; }
#cfForm .cf-consent-note a:hover{ color:#3f7a6f; }
#cfForm .cf-consent > label > span > .cf-badge{ margin-left:4px; }

/* ═══════════════════════════════════════════════════
   v23: 実績セクション（先行導入のお客様＋つくっている会社）
   ═══════════════════════════════════════════════════ */
.trust-section{ background:#fff; padding:var(--sp-9) 0; }
.trust-head{ text-align:center; max-width:820px; margin:0 auto var(--sp-7); }
.trust-head p{ color:var(--text,#4a5853); }

.trust-block{ margin-top:var(--sp-7); }
.trust-sub{
  text-align:center; font-size:16px; font-weight:900; color:var(--ink,#2d3a35);
  margin:0 0 6px; letter-spacing:.02em;
}
.trust-sub::before{
  content:""; display:block; width:34px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--teal,#8cc4b8),var(--mint,#a8d8c0));
  margin:0 auto 12px;
}
.trust-note{ text-align:center; font-size:12.5px; color:var(--muted,#8a9591); margin:0 0 24px; }

/* 導入事例カード（1〜3枚で中央整列） */
.case-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.case-card{
  flex:1 1 300px; max-width:360px;
  background:#fff; border:1px solid var(--line-soft,#f0f2f1); border-radius:18px;
  padding:26px 26px 22px; text-align:center;
  box-shadow:0 2px 10px -6px rgba(50,40,35,.10);
  transition:transform .25s var(--ease,cubic-bezier(.22,.9,.32,1.12)), box-shadow .25s ease;
}
.case-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(50,40,35,.14); }
.case-logo{
  height:64px; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; border:1px dashed #d6e2dd; border-radius:12px;
  background:#fafcfb;
}
.case-logo span{ font-size:11px; font-weight:700; color:#b8c6c1; letter-spacing:.1em; }
.case-logo img{ max-height:44px; max-width:80%; width:auto; object-fit:contain; }
.case-meta{ display:flex; flex-direction:column; align-items:center; gap:5px; margin-bottom:13px; }
.case-industry{
  font-size:11.5px; font-weight:800; letter-spacing:.05em; color:#4a8f83;
  background:rgba(140,196,184,.14); padding:4px 13px; border-radius:999px;
}
.case-scale{ font-size:12.5px; font-weight:700; color:var(--ink,#2d3a35); }
.case-comment{
  font-size:13px; line-height:1.85; color:var(--text,#4a5853); margin:0 0 14px;
  position:relative; padding:0 4px;
}
.case-comment::before{ content:"\201C"; color:var(--teal,#8cc4b8); font-size:22px; line-height:0; vertical-align:-4px; margin-right:2px; }
.case-comment::after{ content:"\201D"; color:var(--teal,#8cc4b8); font-size:22px; line-height:0; vertical-align:-4px; margin-left:2px; }
.case-name{ display:block; font-size:11.5px; color:var(--muted,#8a9591); font-weight:700; }

/* つくっている会社 */
.prov-card{
  max-width:880px; margin:0 auto;
  background:linear-gradient(135deg,#f7fbf9,#eff6f3);
  border:1px solid #dcebe5; border-radius:20px;
  padding:32px 34px;
  display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:center;
}
.prov-name{
  display:block; font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:19px; font-weight:900; color:var(--ink,#2d3a35); margin-bottom:10px;
}
.prov-lead p{ font-size:13px; line-height:1.9; color:var(--text,#4a5853); margin:0; }
.prov-facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.prov-facts li{
  background:#fff; border:1px solid #e3efea; border-radius:14px;
  padding:14px 10px; text-align:center;
}
.pf-num{
  display:block; font-family:var(--font-en,'Inter',sans-serif);
  font-size:23px; font-weight:800; color:#4a8f83; line-height:1.15;
}
.pf-num small{ font-size:11px; font-weight:700; margin-left:2px; }
.pf-label{ display:block; font-size:11px; font-weight:700; color:var(--muted,#8a9591); margin-top:3px; }

@media(max-width:860px){
  .prov-card{ grid-template-columns:1fr; gap:22px; padding:26px 22px; }
}
@media(max-width:768px){
  .case-card{ flex:1 1 100%; max-width:420px; padding:22px 20px 18px; }
  .trust-head{ margin-bottom:var(--sp-6); }
  .prov-facts{ gap:10px; }
  .pf-num{ font-size:20px; }
}

/* ═══════════════════════════════════════════════════
   v26: 機能詳細パネル 画面イメージ廃止に伴うレイアウト整理
   ・スクリーンショット用に確保していた行を解除
   ・スマホ／タブレットでは裏に残るロードマップ列を畳み、余白を解消
   ・表示順を「見出し→アイコン→本文→デモ導線→前後ナビ」に固定
   ═══════════════════════════════════════════════════ */
@media (max-width:960px){
  /* 詳細を開いている間はロードマップ列を畳む（縦積みで巨大な余白になるため） */
  #featuresRoadmapStage.is-feature-surface-open > .roadmap-view,
  #features .roadmap-stage.is-feature-surface-open > .roadmap-view{
    display:none !important;
  }
  /* パネルを通常フローに戻し、高さを内容に合わせる */
  #featureDetailPanel.feature-detail-panel,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    position:relative !important;
    inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
  }
  #featuresRoadmapStage.is-feature-surface-open,
  #features .roadmap-stage.is-feature-surface-open{
    min-height:0 !important; height:auto !important;
  }
  /* スクリーンショット用の固定行を解除し、内容の高さで積む */
  #featureDetailPanel .feature-detail-content,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    grid-template-rows:none !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
    row-gap:0 !important; gap:10px !important;
  }
  #featureDetailPanel .feature-detail-body,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-body{
    height:auto !important; min-height:0 !important; max-height:none !important;
  }
  /* 表示順を固定する（既存の order 指定を上書き） */
  #featureDetailPanel .feature-detail-meta{ order:1 !important; }
  #featureDetailPanel .feature-detail-icon{ order:2 !important; }
  #featureDetailPanel .feature-detail-body{ order:3 !important; }
  #featureDetailPanel .feature-detail-more{ order:4 !important; margin-top:6px !important; }
  #featureDetailPanel .feature-detail-nav{ order:5 !important; margin:6px 0 2px !important; }
}

/* ═══════════════════════════════════════════════════
   v27: PC の機能詳細パネルも1カラムに統一
   （画面イメージ廃止で右カラムが空になったため。表示順も固定）
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  #featureDetailPanel .feature-detail-content,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    grid-template-columns:none !important; grid-template-rows:none !important;
  }
  #featureDetailPanel .feature-detail-meta{ order:1 !important; }
  #featureDetailPanel .feature-detail-icon{ order:2 !important; }
  #featureDetailPanel .feature-detail-body{ order:3 !important; }
  #featureDetailPanel .feature-detail-more{ order:4 !important; }
  #featureDetailPanel .feature-detail-nav{ order:5 !important; }
  /* 1カラム化で行長が伸びすぎないよう上限を設ける */
  #featureDetailPanel .feature-detail-body{
    max-width:860px !important; margin-left:auto !important; margin-right:auto !important; width:100% !important;
  }
}

/* ═══════════════════════════════════════════════════
   v28: お問い合わせフォームの横幅修正
   左見出しの最小幅（585px）に押されて、フォーム列が
   入力欄の既定幅（約221px）まで潰れていた問題への対応。
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  #cta .contact-final{
    max-width:1120px !important;
    gap:40px !important;
  }
  #cta .contact-final-form{ width:100% !important; }
}
/* 1カラム表示時は広がりすぎないよう上限を設けて中央に置く */
@media (max-width:960px){
  #cta .contact-final-form{
    max-width:620px !important; margin-left:auto !important; margin-right:auto !important;
  }
}

/* v28: 大画面（1369px〜）では画面イメージが無くなった分、内容を上下中央に配置 */
@media (min-width:1369px){
  #featureDetailPanel.feature-detail-panel,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    justify-content:center !important; align-items:center !important;
  }
  #featureDetailPanel .feature-detail-content,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
    height:auto !important; min-height:0 !important;
  }
}

/* ═══════════════════════════════════════════════════
   v30-A: スマホ ボトムナビの見直し
   ・文字 10px → 12px（判読性）
   ・タップ領域 36px → 46px（指で押せる最小寸法を確保）
   ・ホームバー（セーフエリア）を考慮した余白
   ═══════════════════════════════════════════════════ */
@media (max-width:640px){
  .mob-cta-bar{
    padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap:8px !important;
  }
  .mob-cta-item{
    font-size:12px !important; font-weight:700 !important;
    min-height:46px !important; padding:7px 6px !important; gap:3px !important;
    letter-spacing:.01em !important;
  }
  .mob-cta-item i{ font-size:17px !important; }
  /* バーに隠れないよう、ページ末尾の余白を確保 */
  body{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ═══════════════════════════════════════════════════
   v30-B: PC表示の文字サイズ下限を引き上げ
   9〜11px の細かい文字が読みにくいため、
   ・読ませる文章 → 12.5px 以上
   ・ラベル/バッジ類 → 11.5px 以上
   を下限とする。特に機能一覧（ロードマップ）を優先的に拡大。
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  /* ── 機能一覧（ロードマップ）── */
  #features .roadmap-feature-list .roadmap-feature-card b{ font-size:16px !important; }
  #features .roadmap-phase.roadmap-future .roadmap-feature-card b{ font-size:15px !important; }
  #features .roadmap-feature-list .roadmap-feature-card small{ font-size:13px !important; line-height:1.45 !important; }
  #features .roadmap-phase.roadmap-future .roadmap-feature-card small{ font-size:12.5px !important; line-height:1.4 !important; }
  #features .roadmap-feature-card .rf-jp{ font-size:12.5px !important; }
  #features .roadmap-phase.roadmap-future .rf-jp{ font-size:12px !important; }
  #features .phase-badge{ font-size:12px !important; }
  #features .pb-card-sub{ font-size:12px !important; }

  /* ── 英字ラベル・セクションピル ── */
  .section-pill, .section-kicker, .contact-final-kicker,
  #origin .origin-kicker span{ font-size:12px !important; }

  /* ── ヒーロー ── */
  .hero-badges .badge-item{ font-size:12px !important; }
  .hero-badges .badge-num{ font-size:11.5px !important; }

  /* ── コンセプト ── */
  #concept .concept-mini-card p{ font-size:12.5px !important; }
  #concept h3 small{ font-size:12px !important; }

  /* ── 解決（SOLUTION）── */
  #connect .solution-step p{ font-size:12.5px !important; }
  #connect .benefit-list li{ font-size:12.5px !important; }
  #connect .solution-step-num{ font-size:12px !important; }
  #connect .vs-tag{ font-size:12px !important; }

  /* ── 開発背景 ── */
  #origin .edge-keyword{ font-size:11.5px !important; }
  #origin .edge-num{ font-size:12px !important; }

  /* ── 業界別 ── */
  #scenes .scene-block p{ font-size:12.5px !important; }
  #scenes .scene-solution span{ font-size:12.5px !important; }
  #scenes .scene-solution strong{ font-size:12.5px !important; }
  #scenes .scene-label{ font-size:12px !important; }
  #scenes .scene-note{ font-size:12px !important; }
  #scenes .scene-effect, #scenes .scene-effect-heading{ font-size:12px !important; }
  #scenes .scene-tab{ font-size:12.5px !important; }

  /* ── 強み ── */
  #strength .why-tag{ font-size:12px !important; }

  /* ── 実績 ── */
  #trust .case-industry, #trust .case-name, #trust .pf-label,
  #trust .pf-num small, #trust .case-logo span{ font-size:12px !important; }

  /* ── 料金・導入の流れ ── */
  #pricing .pricing-plan-label{ font-size:12px !important; }
  #onboarding .flw-badge{ font-size:11.5px !important; }
  #onboarding .flw-step-num{ font-size:12px !important; }

  /* ── お問い合わせフォーム ── */
  #cta .contact-final-form label{ font-size:12px !important; }
  #cta .cf-consent-note{ font-size:12px !important; }
  #cta .cf-badge{ font-size:11px !important; }
  #cta .cf-consent > label > span{ font-size:13px !important; }

  /* ── フッター ── */
  footer .footer-col h4{ font-size:12px !important; }
  footer .footer-trademark,
  footer .footer-copy, footer .footer-statement,
  footer .footer-powered, footer .footer-powered a{ font-size:11.5px !important; }
}

/* ═══════════════════════════════════════════════════
   v31: 機能一覧（ロードマップ）の高さ揃え
   文字を大きくした結果、FUTURE列（2カラム・幅が狭い）の
   カード高さが不揃いになり、列の下端もずれたため、
   3列を等高にし、カードを均等配分する。
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  #features .feature-roadmap{ align-items:stretch !important; }
  #features .roadmap-phase{ display:flex !important; flex-direction:column !important; }
  #features .roadmap-phase .roadmap-feature-list{ flex:1 1 auto !important; }
  #features .roadmap-now .roadmap-feature-card,
  #features .roadmap-next .roadmap-feature-card{ flex:1 1 auto !important; }
  #features .roadmap-phase.roadmap-future .roadmap-feature-list{ grid-auto-rows:1fr !important; }
}

/* ═══════════════════════════════════════════════════
   v32: 既存の高特異性ルールに負けていた小文字の引き上げ
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  html body #features .features-roadmap-wrap .phase-badge,
  html body #features .phase-badge{ font-size:12px !important; }

  html body #concept h3 small{ font-size:12.5px !important; }

  html body #features .pb-chip-body span{ font-size:12.5px !important; }
}

/* v33: コンセプトカードの小見出し（既存 !important に競り勝つ特異性で指定） */
@media (min-width:961px){
  html body #concept .concept-mini-card h3 small{ font-size:12.5px !important; }
}

/* ═══════════════════════════════════════════════════
   v34-A: 機能詳細を「モーダル」化
   ・パネルへのプログラム的フォーカスで出ていた青枠を除去
   ・画面中央に浮かぶダイアログとし、背面は暗転
   ═══════════════════════════════════════════════════ */
/* 青枠（ブラウザ標準のフォーカスリング）を消す */
#featureDetailPanel.feature-detail-panel:focus,
#featureDetailPanel.feature-detail-panel:focus-visible{ outline:none !important; box-shadow:0 30px 80px rgba(20,30,28,.34) !important; }

/* 背面の暗転 */
body.feature-detail-modal-open::before{
  content:"" !important; position:fixed !important; inset:0 !important;
  display:block !important; opacity:1 !important; visibility:visible !important;
  background:rgba(18,28,26,.55) !important;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  z-index:1000 !important; animation:fdModalFade .22s ease both;
}
@keyframes fdModalFade{ from{opacity:0} to{opacity:1} }
@keyframes fdModalIn{ from{opacity:0; transform:translate(-50%,-46%) scale(.97)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }

/* パネル本体をモーダルに */
body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel,
body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
  position:fixed !important;
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:min(660px, calc(100vw - 28px)) !important;
  max-width:none !important; min-width:0 !important;
  height:auto !important; max-height:min(86vh, 880px) !important; min-height:0 !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  z-index:1001 !important;
  background:#fff !important;
  border-radius:22px !important;
  box-shadow:0 30px 80px rgba(20,30,28,.34) !important;
  padding:0 !important;
  animation:fdModalIn .24s cubic-bezier(.22,.9,.32,1.12) both;
  display:block !important;
}
body.feature-detail-modal-open #featureDetailPanel .feature-detail-content,
body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important;
  grid-template-columns:none !important; grid-template-rows:none !important;
  padding:56px 26px 26px !important; gap:12px !important;
}
/* モーダル化に伴い、背面のロードマップは畳まず表示したままにする */
body.feature-detail-modal-open #featuresRoadmapStage.is-feature-surface-open > .roadmap-view,
body.feature-detail-modal-open #features .roadmap-stage.is-feature-surface-open > .roadmap-view{
  display:block !important; opacity:1 !important;
}
body.feature-detail-modal-open #featuresRoadmapStage.is-feature-surface-open,
body.feature-detail-modal-open #features .roadmap-stage.is-feature-surface-open{
  min-height:0 !important; height:auto !important; overflow:visible !important;
}
/* 「一覧へ戻る」を閉じるボタンとして右上に固定 */
body.feature-detail-modal-open #featureDetailPanel .feature-detail-close{
  position:absolute !important; top:14px !important; right:16px !important; z-index:5 !important;
}
@media (max-width:640px){
  body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel,
  body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    width:calc(100vw - 24px) !important; max-height:84vh !important; border-radius:20px !important;
  }
  body.feature-detail-modal-open #featureDetailPanel .feature-detail-content{
    padding:54px 18px 20px !important; gap:10px !important;
  }
}

/* ═══════════════════════════════════════════════════
   v34-B: スマホの文字サイズ引き上げ
   7.5〜11px が多数あり判読しづらいため、
   本文13px / 補足12px / 微小ラベル11.5px を下限とする。
   （v38: タブレット幅 641〜960px も同じ下限を適用）
   ═══════════════════════════════════════════════════ */
@media (max-width:960px){
  /* 本文・説明（読ませる文章） */
  html body #concept .concept-mini-card p{ font-size:13px !important; line-height:1.7 !important; }
  html body #concept .concept-mini-card h3 small{ font-size:12px !important; }
  html body #concept .concept-logo-num{ font-size:12px !important; }
  html body #connect .solution-step p{ font-size:13px !important; line-height:1.7 !important; }
  html body #connect .solution-step-num{ font-size:12px !important; }
  html body #connect .vs-tag{ font-size:12px !important; }
  html body #scenes .scene-block p{ font-size:13px !important; line-height:1.75 !important; }
  html body #scenes .scene-solution span{ font-size:13px !important; }
  html body #scenes .scene-solution strong{ font-size:12.5px !important; }
  html body #scenes .scene-label{ font-size:12px !important; }
  html body #scenes .scene-note{ font-size:12px !important; line-height:1.7 !important; }
  html body #scenes .scene-effect,
  html body #scenes .scene-effect-heading{ font-size:12px !important; }
  html body #scenes .scene-tab{ font-size:13px !important; padding:9px 14px !important; }

  /* ヒーロー */
  html body .hero-badges .badge-item{ font-size:12.5px !important; }
  html body .hero-badges .badge-num{ font-size:11.5px !important; }

  /* セクションラベル */
  html body .section-pill,
  html body .section-kicker,
  html body .contact-final-kicker,
  html body #origin .origin-kicker span{ font-size:11.5px !important; }

  /* 機能一覧（ロードマップ） */
  html body #features .roadmap-feature-card b{ font-size:15px !important; }
  html body #features .roadmap-feature-card small{ font-size:12.5px !important; line-height:1.5 !important; }
  html body #features .roadmap-feature-card .rf-jp{ font-size:12px !important; }
  html body #features .phase-badge{ font-size:12px !important; }
  html body #features .pb-card-sub{ font-size:12px !important; }
  html body #features .pb-chip-body span{ font-size:12.5px !important; }
  /* 幅が狭く2列では読みにくいため、スマホでは1列に構成変更 */
  html body #features .roadmap-phase.roadmap-future .roadmap-feature-list{
    display:flex !important; flex-direction:column !important; gap:10px !important;
  }

  /* 開発背景・強み・実績 */
  html body #origin .edge-keyword{ font-size:11.5px !important; }
  html body #origin .edge-num{ font-size:12px !important; }
  html body #strength .why-tag{ font-size:12px !important; }
  html body #trust .case-industry,
  html body #trust .case-name,
  html body #trust .pf-label,
  html body #trust .pf-num small,
  html body #trust .case-logo span{ font-size:12px !important; }

  /* 料金・導入の流れ */
  html body #pricing .pricing-plan-label{ font-size:12px !important; }
  html body #onboarding .flw-badge{ font-size:11.5px !important; }
  html body #onboarding .flw-step-num{ font-size:12px !important; }

  /* 課題 */
  html body #issues .stop-icon{ font-size:13px !important; }

  /* お問い合わせ */
  html body #cta .contact-final-form label{ font-size:13px !important; }
  html body #cta .cf-consent > label > span{ font-size:13px !important; }
  html body #cta .cf-consent-note{ font-size:12.5px !important; line-height:1.7 !important; }
  html body #cta .cf-consent-note a{ font-size:12.5px !important; }
  html body #cta .cf-badge{ font-size:11.5px !important; }

  /* フッター */
  html body footer .footer-col h4{ font-size:12.5px !important; }
  html body footer .footer-statement,
  html body footer .footer-copy,
  html body footer .footer-powered,
  html body footer .footer-powered a,
  html body footer .footer-trademark{ font-size:11.5px !important; }
}

/* v37: 残っていた小文字（既存の高特異性ルールに競り勝つ指定）※v38でタブレットにも適用 */
@media (max-width:960px){
  html body #features .features-roadmap-wrap .phase-badge,
  html body #features .roadmap-phase .phase-badge,
  html body #features .phase-badge{ font-size:12px !important; }

  html body #scenes .scene-card-title p{ font-size:12.5px !important; line-height:1.7 !important; }

  html body .hero-platform-label span{ font-size:12px !important; }
  html body .hero-h1 .hero-h1-en{ font-size:12px !important; }
}

/* v39: 効果リスト（解決セクション）の文字も下限に合わせる */
@media (max-width:960px){
  html body #connect .benefit-list li{ font-size:12.5px !important; line-height:1.7 !important; }
}

/* ═══════════════════════════════════════════════════
   v40: モーダルを画面中央に固定するための修正
   祖先 .features-roadmap-wrap.reveal に transform が残っており、
   position:fixed の基準がその要素になっていたため解除する。
   （表示位置は translateY(0) 相当のため、見た目は変わらない）
   ═══════════════════════════════════════════════════ */
body.feature-detail-modal-open #features .features-roadmap-wrap,
body.feature-detail-modal-open #features .features-roadmap-wrap.reveal,
body.feature-detail-modal-open #features .roadmap-stage{
  transform:none !important;
  filter:none !important;
  perspective:none !important;
  will-change:auto !important;
}
/* モーダル内の本文はスマホでも読みやすい大きさに */
@media (max-width:960px){
  html body #featureDetailPanel #featureDetailDesc{ font-size:13.5px !important; line-height:1.8 !important; }
  html body #featureDetailPanel #featureDetailPoints li{ font-size:13px !important; }
  html body #featureDetailPanel .feature-detail-kicker{ font-size:12px !important; }
}

/* v41: モーダル本文のサイズを画面幅によらず読みやすい大きさに統一 */
@media (min-width:961px){
  html body #featureDetailPanel #featureDetailDesc{ font-size:15px !important; line-height:1.85 !important; }
  html body #featureDetailPanel #featureDetailPoints li{ font-size:13.5px !important; }
}

/* ───────────────────────────────────────────────────
   [23/29] (id なし)
   ─────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════
   v139: Hero platform label top-center placement
   - Connected Work Platform を添付イメージのようにTOP上部中央へ配置
   ═══════════════════════════════════════════════════ */
@media (min-width: 961px){
  .hero{
    position: relative !important;
    padding-top: calc(var(--tw-header-h, 64px) + 88px) !important;
  }
  .hero-platform-label{
    position: absolute !important;
    top: 28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    width: auto !important;
    max-width: max-content !important;
    align-self: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 960px){
  .hero-platform-label{
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ═══ v110: Concept alignment & pastel refinement ═══ */
.concept-section-head{
  text-align:center;
  margin:0 auto 28px;
}
.concept-section-head .concept-mini-label{
  margin:0 auto;
}
.concept-hero-copy .concept-mini-label{
  display:none !important;
}
.concept-title-gradient{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:.02em;
}
.concept-title-gradient .c-pink{color:#f4b0a7}
.concept-title-gradient .c-peach{color:#f4cf84}
.concept-title-gradient .c-mint{color:#abd9b8}
.concept-title-gradient .c-teal{color:#86c5bb}
.concept-hero-card h2{
  text-align:center;
}
.concept-lead{
  text-align:center;
}
.concept-mini-card h3{
  color:var(--wa-text) !important;
}
.concept-card-icon{
  background:var(--wa-icon);
  box-shadow:0 6px 16px var(--wa-shadow);
}
.concept-mini-card.wa-pink{--wa-color:#f4a8bd;--wa-text:#e99ab1;--wa-icon:#f4a8bd;--wa-border:rgba(244,168,189,.18);--wa-shadow:rgba(244,168,189,.16)}
.concept-mini-card.wa-orange{--wa-color:#f6c886;--wa-text:#eebc70;--wa-icon:#f6c886;--wa-border:rgba(246,200,134,.20);--wa-shadow:rgba(246,200,134,.16)}
.concept-mini-card.wa-green{--wa-color:#98d4a8;--wa-text:#78c891;--wa-icon:#98d4a8;--wa-border:rgba(152,212,168,.20);--wa-shadow:rgba(152,212,168,.15)}
.concept-mini-card.wa-teal{--wa-color:#84c8bf;--wa-text:#72bdb4;--wa-icon:#84c8bf;--wa-border:rgba(132,200,191,.20);--wa-shadow:rgba(132,200,191,.15)}
.concept-mini-card.wa-blue{--wa-color:#9acddd;--wa-text:#83c0d2;--wa-icon:#9acddd;--wa-border:rgba(154,205,221,.20);--wa-shadow:rgba(154,205,221,.15)}
@media(max-width:640px){
  .concept-section-head{margin-bottom:18px;}
  .concept-title-gradient{display:inline-flex;}
}


/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [24/29] (id なし)
   ─────────────────────────────────────────────────── */
/* v140: Force hero platform label to top center of the whole hero area */
.hero{ position: relative !important; }
@media (min-width: 961px){
  .hero{
    padding-top: calc(var(--tw-header-h, 64px) + 96px) !important;
  }
  .hero > .hero-platform-label{
    position: absolute !important;
    top: 34px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
@media (max-width: 960px){
  .hero > .hero-platform-label{
    position: static !important;
    transform: none !important;
    margin: 0 auto var(--sp-4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: calc(100% - 32px) !important;
  }
}

/* ═══ v110: Concept alignment & pastel refinement ═══ */
.concept-section-head{
  text-align:center;
  margin:0 auto 28px;
}
.concept-section-head .concept-mini-label{
  margin:0 auto;
}
.concept-hero-copy .concept-mini-label{
  display:none !important;
}
.concept-title-gradient{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:.02em;
}
.concept-title-gradient .c-pink{color:#f4b0a7}
.concept-title-gradient .c-peach{color:#f4cf84}
.concept-title-gradient .c-mint{color:#abd9b8}
.concept-title-gradient .c-teal{color:#86c5bb}
.concept-hero-card h2{
  text-align:center;
}
.concept-lead{
  text-align:center;
}
.concept-mini-card h3{
  color:var(--wa-text) !important;
}
.concept-card-icon{
  background:var(--wa-icon);
  box-shadow:0 6px 16px var(--wa-shadow);
}
.concept-mini-card.wa-pink{--wa-color:#f4a8bd;--wa-text:#e99ab1;--wa-icon:#f4a8bd;--wa-border:rgba(244,168,189,.18);--wa-shadow:rgba(244,168,189,.16)}
.concept-mini-card.wa-orange{--wa-color:#f6c886;--wa-text:#eebc70;--wa-icon:#f6c886;--wa-border:rgba(246,200,134,.20);--wa-shadow:rgba(246,200,134,.16)}
.concept-mini-card.wa-green{--wa-color:#98d4a8;--wa-text:#78c891;--wa-icon:#98d4a8;--wa-border:rgba(152,212,168,.20);--wa-shadow:rgba(152,212,168,.15)}
.concept-mini-card.wa-teal{--wa-color:#84c8bf;--wa-text:#72bdb4;--wa-icon:#84c8bf;--wa-border:rgba(132,200,191,.20);--wa-shadow:rgba(132,200,191,.15)}
.concept-mini-card.wa-blue{--wa-color:#9acddd;--wa-text:#83c0d2;--wa-icon:#9acddd;--wa-border:rgba(154,205,221,.20);--wa-shadow:rgba(154,205,221,.15)}
@media(max-width:640px){
  .concept-section-head{margin-bottom:18px;}
  .concept-title-gradient{display:inline-flex;}
}


/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [25/29] feature-card-overlay-v12-contained-layout
   ─────────────────────────────────────────────────── */
/* v12: Keep the feature popup balanced inside the viewport.
   The icon and copy share the left column; the screenshot uses the right column. */
@media (min-width: 961px){
  .feature-detail-panel{
    padding:48px !important;
    overflow:hidden !important;
  }
  .feature-detail-content{
    width:min(1180px, calc(100vw - 96px)) !important;
    height:min(760px, calc(100vh - 96px)) !important;
    max-width:1180px !important;
    max-height:none !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:minmax(260px, 34%) minmax(0, 66%) !important;
    grid-template-rows:auto 1fr !important;
    column-gap:34px !important;
    row-gap:22px !important;
    align-items:center !important;
    justify-items:stretch !important;
    padding:48px !important;
    box-sizing:border-box !important;
    transform:none !important;
  }
  .feature-detail-icon{
    grid-column:1 !important;
    grid-row:1 !important;
    width:86px !important;
    height:86px !important;
    border-radius:26px !important;
    justify-self:start !important;
    align-self:end !important;
    margin:0 !important;
    font-size:34px !important;
  }
  .feature-detail-body{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    align-self:start !important;
    justify-self:stretch !important;
  }
  .feature-detail-body h3{
    font-size:clamp(34px, 3vw, 46px) !important;
    line-height:1.12 !important;
    margin-bottom:14px !important;
  }
  .feature-detail-body p{
    font-size:14px !important;
    line-height:1.75 !important;
    margin-bottom:20px !important;
  }
  .feature-detail-body ul{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
  }
  .feature-detail-body li{
    font-size:12px !important;
    line-height:1.45 !important;
    padding:10px 12px 10px 30px !important;
    min-width:0 !important;
  }
  .feature-detail-screenshot{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:0 !important;
    align-self:stretch !important;
    justify-self:stretch !important;
    border-radius:26px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .feature-shot-toolbar{
    height:40px !important;
    flex:0 0 40px !important;
  }
  .feature-shot-placeholder{
    width:100% !important;
    height:calc(100% - 40px) !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:28px !important;
    box-sizing:border-box !important;
  }
}
@media (min-width: 961px) and (max-width: 1180px){
  .feature-detail-panel{
    padding:32px !important;
  }
  .feature-detail-content{
    width:calc(100vw - 64px) !important;
    height:min(720px, calc(100vh - 64px)) !important;
    grid-template-columns:minmax(230px, 35%) minmax(0, 65%) !important;
    column-gap:24px !important;
    padding:36px !important;
  }
  .feature-detail-icon{
    width:76px !important;
    height:76px !important;
    font-size:30px !important;
  }
  .feature-detail-body h3{
    font-size:clamp(28px, 3vw, 38px) !important;
  }
  .feature-detail-body p{
    font-size:13px !important;
    line-height:1.65 !important;
  }
  .feature-detail-body li{
    font-size:11.5px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
}

/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}

/* ───────────────────────────────────────────────────
   [26/29] feature-card-overlay-v14-spacing-and-colors
   ─────────────────────────────────────────────────── */
/* v14: Prevent meta label overlap and inherit each roadmap card color in the popup */
@media (min-width: 961px){
  .feature-detail-content{
    grid-template-columns:minmax(260px, 34%) minmax(0, 66%) !important;
    grid-template-rows:auto auto minmax(0,1fr) auto !important;
    row-gap:18px !important;
    align-items:stretch !important;
  }
  .feature-detail-meta{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:start !important;
    justify-self:start !important;
    margin:0 0 2px 0 !important;
    max-width:100% !important;
    color:var(--feature-modal-color, var(--tw-color-teal-deep, #6ea69a)) !important;
    border-color:var(--feature-modal-border, rgba(140,196,184,.22)) !important;
    background:var(--feature-modal-bg, rgba(168,216,192,.12)) !important;
    box-shadow:0 4px 14px var(--feature-modal-shadow, rgba(140,196,184,.10)) !important;
  }
  .feature-detail-meta::before{
    background:var(--feature-modal-color, var(--tw-color-teal, #8cc4b8)) !important;
    box-shadow:0 0 0 3px var(--feature-modal-halo, rgba(140,196,184,.15)) !important;
  }
  .feature-detail-icon{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:start !important;
    justify-self:start !important;
    margin-top:10px !important;
    color:var(--feature-modal-color, var(--tw-color-teal-deep, #6ea69a)) !important;
    background:linear-gradient(135deg, var(--feature-modal-bg, rgba(168,216,192,.14)), rgba(255,255,255,.92)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px var(--feature-modal-shadow, rgba(140,196,184,.16)) !important;
  }
  .feature-detail-body{
    grid-column:1 !important;
    grid-row:3 !important;
    align-self:start !important;
  }
  .feature-detail-kicker{
    color:var(--feature-modal-color, var(--tw-color-teal-deep, #6ea69a)) !important;
    background:var(--feature-modal-bg, rgba(168,216,192,.12)) !important;
  }
  .feature-detail-body li::before{
    color:var(--feature-modal-color, var(--tw-color-teal-deep, #6ea69a)) !important;
  }
  .feature-detail-nav{
    grid-column:1 !important;
    grid-row:4 !important;
    align-self:end !important;
    margin-top:10px !important;
  }
  .feature-detail-nav-btn{
    color:var(--feature-modal-color, var(--tw-color-teal-deep, #6ea69a)) !important;
    border-color:var(--feature-modal-border, rgba(140,196,184,.28)) !important;
  }
  .feature-detail-nav-btn:hover{
    background:var(--feature-modal-bg, rgba(168,216,192,.10)) !important;
  }
  .feature-detail-screenshot{
    grid-column:2 !important;
    grid-row:1 / span 4 !important;
  }
}

@media (min-width: 961px) and (max-width: 1180px){
  .feature-detail-content{
    grid-template-rows:auto auto minmax(0,1fr) auto !important;
    row-gap:14px !important;
  }
  .feature-detail-icon{
    margin-top:8px !important;
  }
}

@media (max-width: 960px){
  .feature-detail-meta{
    color:var(--feature-modal-color, var(--tw-color-teal-deep, #6ea69a)) !important;
    border:1px solid var(--feature-modal-border, rgba(140,196,184,.22)) !important;
    background:var(--feature-modal-bg, rgba(168,216,192,.12)) !important;
  }
  .feature-detail-meta::before{
    background:var(--feature-modal-color, var(--tw-color-teal, #8cc4b8)) !important;
  }
  .feature-detail-icon{
    margin-top:8px !important;
    color:var(--feature-modal-color, var(--tw-color-teal-deep, #6ea69a)) !important;
    background:linear-gradient(135deg, var(--feature-modal-bg, rgba(168,216,192,.14)), rgba(255,255,255,.92)) !important;
  }
  .feature-detail-kicker,
  .feature-detail-body li::before,
  .feature-detail-nav-btn{
    color:var(--feature-modal-color, var(--tw-color-teal-deep, #6ea69a)) !important;
  }
}


/* ═══════════════════════════════════════════════════
   vConcept Final: Logo-number concept diagram rebuild
   - Removed connector dots/lines
   - Added 1/2/3/4 markers around wo:nnect logo
   - Responsive: PC / tablet / mobile
   ═══════════════════════════════════════════════════ */
#concept .concept-diagram-card{
  padding:clamp(24px,4vw,52px) !important;
  border-radius:28px !important;
  overflow:hidden;
}
#concept .concept-diagram{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(220px,1fr) minmax(320px,520px) minmax(220px,1fr) !important;
  grid-template-areas:
    "wo logo nnect"
    "colon logo nn" !important;
  gap:clamp(24px,3.6vw,54px) clamp(24px,3.2vw,48px) !important;
  align-items:center !important;
  max-width:1180px !important;
  margin:0 auto !important;
}
#concept .concept-diagram::before,
#concept .concept-diagram::after,
#concept .concept-center::before,
#concept .concept-center::after,
#concept .concept-box::before,
#concept .concept-box::after{
  display:none !important;
  content:none !important;
}
#concept .concept-box{
  position:relative !important;
  z-index:2;
  min-height:92px;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  padding:18px 22px !important;
  background:#fff !important;
  border-width:2px !important;
  border-style:solid !important;
  border-radius:18px !important;
  box-shadow:0 8px 24px rgba(50,40,35,.06) !important;
  transform:none !important;
}
#concept .concept-box-1{grid-area:wo !important;border-color:#e56f91 !important;}
#concept .concept-box-2{grid-area:nnect !important;border-color:#f0a040 !important;}
#concept .concept-box-3{grid-area:colon !important;border-color:#4aaa68 !important;}
#concept .concept-box-4{grid-area:nn !important;border-color:#5ea89c !important;}
#concept .concept-box .concept-num{
  flex:0 0 48px !important;
  width:48px !important;
  height:48px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  color:#fff !important;
  font-family:var(--font-base) !important;
  font-size:20px !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-shadow:0 8px 18px rgba(50,40,35,.12) !important;
}
#concept .concept-box-1 .concept-num{background:#e56f91 !important;}
#concept .concept-box-2 .concept-num{background:#f0a040 !important;}
#concept .concept-box-3 .concept-num{background:#4aaa68 !important;}
#concept .concept-box-4 .concept-num{background:#5ea89c !important;}
#concept .concept-box p{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  margin:0 !important;
  text-align:left !important;
  line-height:1.45 !important;
}
#concept .concept-box p b{
  display:block !important;
  font-size:clamp(17px,1.4vw,21px) !important;
  font-weight:900 !important;
  color:var(--tw-text-dark,#3d3330) !important;
  line-height:1.1 !important;
}
#concept .concept-box p span{
  display:block !important;
  font-size:clamp(12px,1vw,14px) !important;
  font-weight:800 !important;
  color:var(--tw-text-dark,#3d3330) !important;
  line-height:1.55 !important;
}
#concept .concept-center{
  grid-area:logo !important;
  position:relative !important;
  z-index:1;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:44px 0 !important;
}
#concept .concept-logo-stage{
  position:relative;
  width:min(100%,520px);
  max-width:520px;
  margin:0 auto;
  padding:36px 0 40px;
}
#concept .concept-diagram-logo{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 auto !important;
  filter:drop-shadow(0 6px 20px rgba(50,40,35,.07)) !important;
}
#concept .concept-logo-num{
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  color:#fff;
  font-family:var(--font-base);
  font-size:16px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 18px rgba(50,40,35,.14);
  transform:translate(-50%,-50%);
}
#concept .logo-num-1{background:#e56f91;left:48.7%;top:72px;}
#concept .logo-num-2{background:#f0a040;left:82.2%;top:72px;}
#concept .logo-num-3{background:#4aaa68;left:59.6%;bottom:58px;transform:translate(-50%,50%);}
#concept .logo-num-4{background:#5ea89c;left:70.4%;bottom:58px;transform:translate(-50%,50%);}

@media(max-width:960px) and (min-width:641px){
  #concept .concept-diagram-card{padding:32px 28px !important;}
  #concept .concept-diagram{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "wo nnect"
      "logo logo"
      "colon nn" !important;
    gap:28px 32px !important;
  }
  #concept .concept-center{padding:14px 0 !important;}
  #concept .concept-logo-stage{width:min(68vw,460px);padding:34px 0 38px;}
  #concept .concept-box{min-height:88px;padding:16px 18px !important;}
}

@media(max-width:640px){
  #concept .concept-diagram-card{padding:20px 16px !important;border-radius:22px !important;}
  #concept .concept-diagram{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "logo"
      "wo"
      "nnect"
      "colon"
      "nn" !important;
    gap:12px !important;
  }
  #concept .concept-center{padding:4px 0 12px !important;}
  #concept .concept-logo-stage{width:min(92%,320px);padding:28px 0 32px;}
  #concept .concept-logo-num{width:28px;height:28px;font-size:13px;}
  #concept .logo-num-1{left:45%;top:6px;}
  #concept .logo-num-2{left:88%;top:6px;}
  #concept .logo-num-3{left:57.5%;bottom:0;}
  #concept .logo-num-4{left:72.5%;bottom:0;}
  #concept .concept-box{
    min-height:74px;
    padding:14px 16px !important;
    border-radius:16px !important;
    gap:12px !important;
  }
  #concept .concept-box .concept-num{
    flex-basis:38px !important;
    width:38px !important;
    height:38px !important;
    font-size:16px !important;
  }
  #concept .concept-box p b{font-size:17px !important;}
  #concept .concept-box p span{font-size:12.5px !important;line-height:1.45 !important;}
}

@media(max-width:380px){
  #concept .concept-diagram-card{padding:18px 12px !important;}
  #concept .concept-logo-stage{width:96%;}
  #concept .concept-box{padding:12px 14px !important;}
  #concept .concept-box p span{font-size:12px !important;}
}


/* ═══════════════════════════════════════════════════
   v101: Concept logo number fine tuning by orientation
   - PC / 横画面は既存位置を維持
   - モバイル縦: 丸数字をロゴへ近づける
   - タブレット縦: 丸数字をロゴから少し離す
   ═══════════════════════════════════════════════════ */

@media (max-width:640px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:16px 0 18px !important;
  }
  #concept .concept-logo-num{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .logo-num-1{
    left:48.5% !important;
    top:18px !important;
  }
  #concept .logo-num-2{
    left:84% !important;
    top:18px !important;
  }
  #concept .logo-num-3{
    left:59.5% !important;
    bottom:18px !important;
  }
  #concept .logo-num-4{
    left:70.5% !important;
    bottom:18px !important;
  }
}

@media (min-width:641px) and (max-width:960px) and (orientation:portrait){
  #concept .concept-logo-stage{
    padding:44px 0 48px !important;
    width:min(92%,520px) !important;
  }
  #concept .concept-logo-num{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }
  #concept .logo-num-1{
    left:48.3% !important;
    top:20px !important;
  }
  #concept .logo-num-2{
    left:82.6% !important;
    top:20px !important;
  }
  #concept .logo-num-3{
    left:59.6% !important;
    bottom:20px !important;
  }
  #concept .logo-num-4{
    left:70.6% !important;
    bottom:20px !important;
  }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE FIX PATCH — PC / Tablet / Mobile
   ═══════════════════════════════════════════════════ */

/* ─── 1. value-strip: 5列→タブレットで3列、モバイルで2列 ─── */
@media (max-width: 960px) {
  .value-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .value-card:nth-child(3) { border-right: 0; }
  .value-card:nth-child(n+4) { border-top: 1px solid var(--line-soft); }
}

/* ─── 2. sier-cols: 4列→タブレット2列 ─── */
@media (max-width: 960px) {
  .sier-cols {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .sier-cols {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 3. origin-edges: タブレットで1列→2列に変更 ─── */
@media (max-width: 960px) and (min-width: 641px) {
  .origin-edges {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* ─── 4. sp-stats: 641〜768pxで2列に ─── */
@media (max-width: 768px) and (min-width: 641px) {
  .sp-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .sp-stat { border-right: 0 !important; }
  .sp-stat:nth-child(odd) { border-right: 1px solid var(--tw-line-soft, #eef0f2) !important; }
  .sp-stat:nth-child(-n+2) { border-bottom: 1px solid var(--tw-line-soft, #eef0f2) !important; }
}

/* ─── 5. concept-hero-card: タブレットで右カラムの最小幅緩和 ─── */
@media (max-width: 960px) and (min-width: 641px) {
  .concept-hero-card {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 6. why-compare-grid: 769〜960px でも縦積みに ─── */
@media (max-width: 960px) and (min-width: 769px) {
  .why-compare-grid {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }
  .why-vs { padding: 4px 0 !important; }
}

/* ─── 7. hero-badges: モバイルでのflex-wrap競合解消 ─── */
@media (max-width: 640px) {
  .hero-badges {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .hero-badges .badge-item {
    flex: 0 0 auto !important;
  }
}

/* ─── 8. タブレット全体: container のパディング調整 ─── */
@media (max-width: 960px) and (min-width: 641px) {
  :root { --container-pad: 24px; }
}

/* ─── 9. モバイル: section-summary-block のボタン改行防止 ─── */
@media (max-width: 480px) {
  .section-summary-block {
    text-align: center;
  }
  .section-summary-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .section-summary-btn {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
  }
}

/* ─── 10. モバイル: contact-final textarea の最小高さ確保 ─── */
@media (max-width: 640px) {
  .contact-final-form textarea {
    min-height: 100px !important;
    resize: vertical;
  }
}

/* ─── 11. タブレット: pricing-merit-grid 確実な2列 ─── */
@media (max-width: 960px) and (min-width: 641px) {
  .pricing-merit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── 12. モバイル: nav の見切れ防止 ─── */
@media (max-width: 640px) {
  .mob-nav {
    width: min(320px, 90vw) !important;
  }
}

/* ─── 13. 極小モバイル: sier-footer-note のレイアウト ─── */
@media (max-width: 480px) {
  .sier-footer-note {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }
}

/* ─── 14. タブレット: onboarding-section の幅制限 ─── */
@media (max-width: 960px) and (min-width: 641px) {
  .ob-timeline {
    max-width: 100% !important;
  }
}

/* ─── 15. タブレット: footer-cols 確認 ─── */
@media (max-width: 960px) and (min-width: 641px) {
  .footer-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-5) !important;
  }
}

/* ───────────────────────────────────────────────────
   [27/29] v141-target-tablet-final-alignment
   ─────────────────────────────────────────────────── */
/* v141: iPad Air / Surface Pro / ASUS Zenbook Fold 共通の最終調整
   1) TOP の Connected Work Platform ラベルをヒーロー中央に固定
   2) コンセプトロゴ周辺の丸数字をロゴ側へ近づける
   既存の v101〜v140 より後に置くことで最終上書きします。 */

@media (min-width: 641px) and (max-width: 1180px){
  .hero{
    position: relative !important;
  }

  .hero > .hero-platform-label{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: calc(100% - 48px) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    z-index: 30 !important;
    text-align: center !important;
  }

  .hero-container-v2,
  .hero-copy{
    text-align: center !important;
  }
}

/* 縦向きタブレット共通: ラベルを左寄りに流さず、画面中央へ */
@media (orientation: portrait) and (min-width: 641px) and (max-width: 960px){
  .hero{
    padding-top: calc(var(--header-h, 64px) + 90px) !important;
  }

  .hero > .hero-platform-label{
    top: 82px !important;
  }

  #concept .concept-logo-stage{
    width: min(74vw, 500px) !important;
    max-width: 500px !important;
    padding: 42px 0 46px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #concept .concept-logo-num{
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    z-index: 5 !important;
  }

  #concept .logo-num-1{ left: 48.4% !important; top: 46px !important; }
  #concept .logo-num-2{ left: 82.4% !important; top: 46px !important; }
  #concept .logo-num-3{ left: 59.6% !important; bottom: 46px !important; }
  #concept .logo-num-4{ left: 70.6% !important; bottom: 46px !important; }
}

/* iPad Air 820px前後 */
@media (orientation: portrait) and (min-width: 800px) and (max-width: 835px){
  #concept .concept-logo-stage{
    width: min(72vw, 488px) !important;
    padding: 40px 0 44px !important;
  }
  #concept .logo-num-1{ left: 48.2% !important; top: 44px !important; }
  #concept .logo-num-2{ left: 82.2% !important; top: 44px !important; }
  #concept .logo-num-3{ left: 59.5% !important; bottom: 44px !important; }
  #concept .logo-num-4{ left: 70.5% !important; bottom: 44px !important; }
}

/* ASUS Zenbook Fold 850px前後 */
@media (orientation: portrait) and (min-width: 840px) and (max-width: 875px){
  #concept .concept-logo-stage{
    width: min(72vw, 496px) !important;
    padding: 40px 0 44px !important;
  }
  #concept .logo-num-1{ left: 48.3% !important; top: 44px !important; }
  #concept .logo-num-2{ left: 82.3% !important; top: 44px !important; }
  #concept .logo-num-3{ left: 59.6% !important; bottom: 44px !important; }
  #concept .logo-num-4{ left: 70.6% !important; bottom: 44px !important; }
}

/* Surface Pro 900px前後 */
@media (orientation: portrait) and (min-width: 890px) and (max-width: 930px){
  #concept .concept-logo-stage{
    width: min(70vw, 510px) !important;
    padding: 42px 0 46px !important;
  }
  #concept .logo-num-1{ left: 48.3% !important; top: 46px !important; }
  #concept .logo-num-2{ left: 82.4% !important; top: 46px !important; }
  #concept .logo-num-3{ left: 59.6% !important; bottom: 46px !important; }
  #concept .logo-num-4{ left: 70.6% !important; bottom: 46px !important; }
}

/* 横向き・折りたたみ時も、ラベル中央と数字距離を安定化 */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1368px){
  .hero{
    padding-top: calc(var(--header-h, 64px) + 86px) !important;
  }
  .hero > .hero-platform-label{
    top: 34px !important;
  }

  #concept .concept-logo-stage{
    width: min(40vw, 500px) !important;
    padding: 36px 0 40px !important;
  }
  #concept .logo-num-1{ left: 48.6% !important; top: 52px !important; }
  #concept .logo-num-2{ left: 82.2% !important; top: 52px !important; }
  #concept .logo-num-3{ left: 59.6% !important; bottom: 48px !important; }
  #concept .logo-num-4{ left: 70.5% !important; bottom: 48px !important; }
}

/* ───────────────────────────────────────────────────
   [28/29] feature-detail-tablet-left-shift-no-cutoff-v204
   ─────────────────────────────────────────────────── */
/*
  iPad Air / Surface Pro 7 / ASUS Zenbook Fold 向け最終調整。
  詳細画面を中央基準から少し左へ寄せ、右側に安全余白を多めに確保することで、
  右端の角丸・枠線・スクリーンショットが途切れないようにする。
*/
@media (min-width:768px) and (max-width:1368px){
  #featureDetailPanel.feature-detail-panel,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    padding-left:clamp(10px,1.2vw,18px) !important;
    padding-right:clamp(26px,3vw,44px) !important;
    justify-content:center !important;
  }

  #featureDetailPanel .feature-detail-content,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
    width:calc(100% - 2px) !important;
    max-width:min(1160px,100%) !important;
    margin-left:0 !important;
    margin-right:auto !important;
    transform:translateX(clamp(-18px,-1.4vw,-8px)) !important;
    box-sizing:border-box !important;
  }

  #featureDetailPanel .feature-detail-screenshot,
  #featureDetailPanel .feature-detail-image,
  #featureDetailPanel .feature-detail-screenshot img,
  #featureDetailPanel .feature-detail-screenshot video,
  #featureDetailPanel .feature-detail-screenshot picture{
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
}

/* iPad Air / Zenbook Fold 縦向き: 左寄せ量を控えめにし、右余白を確実に確保 */
@media (min-width:768px) and (max-width:875px) and (orientation:portrait){
  #featureDetailPanel.feature-detail-panel,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    padding-left:10px !important;
    padding-right:30px !important;
  }

  #featureDetailPanel .feature-detail-content,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
    width:100% !important;
    max-width:100% !important;
    transform:translateX(-10px) !important;
  }
}

/* Surface Pro 7 / 横向き: ワイド表示時も右端が切れないよう左へ微調整 */
@media (min-width:961px) and (max-width:1368px) and (orientation:landscape){
  #featureDetailPanel.feature-detail-panel,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    padding-left:12px !important;
    padding-right:42px !important;
  }

  #featureDetailPanel .feature-detail-content,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
    max-width:min(1260px,100%) !important;
    transform:translateX(-16px) !important;
  }
}

/* 876-960px portrait: Surface縦持ち想定 */
@media (min-width:876px) and (max-width:960px) and (orientation:portrait){
  #featureDetailPanel.feature-detail-panel,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    padding-left:12px !important;
    padding-right:36px !important;
  }

  #featureDetailPanel .feature-detail-content,
  #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card .feature-detail-content{
    transform:translateX(-12px) !important;
  }
}


/* ═══════════════════════════════════════════════════
   vSoft2: Concept diagram color matching
   - コンセプト図の丸数字を下段カード（和・輪・環・話・∞）と同じ濃さへ調整
   - wo / nnect / : / nn と説明テキストは元の濃さへ戻す
   ═══════════════════════════════════════════════════ */
#concept .concept-logo-num,
#concept .concept-box .concept-num,
#concept .nb-num{
  color:#fff !important;
  box-shadow:0 4px 14px color-mix(in srgb, var(--concept-num-color, #8cc4b8) 22%, transparent) !important;
}

#concept .logo-num-1,
#concept .concept-box-1 .concept-num,
#concept .nb-1 .nb-num{
  --concept-num-color:#f4a8bd;
  background:#f4a8bd !important;
}

#concept .logo-num-2,
#concept .concept-box-2 .concept-num,
#concept .nb-2 .nb-num{
  --concept-num-color:#f6c886;
  background:#f6c886 !important;
}

#concept .logo-num-3,
#concept .concept-box-3 .concept-num,
#concept .nb-3 .nb-num{
  --concept-num-color:#98d4a8;
  background:#98d4a8 !important;
}

#concept .logo-num-4,
#concept .concept-box-4 .concept-num,
#concept .nb-4 .nb-num{
  --concept-num-color:#84c8bf;
  background:#84c8bf !important;
}

#concept .concept-box p,
#concept .concept-box p b,
#concept .concept-box p span,
#concept .concept-box span:not(.concept-num),
#concept .nb-text,
#concept .nb-text b{
  color:var(--tw-text-dark,#3d3330) !important;
}

/* ───────────────────────────────────────────────────
   [29/29] v114-concept-mobile-viewport-refit
   ─────────────────────────────────────────────────── */
/* v114: Concept mobile viewport refit
   スマホ表示でコンセプト図解が縦に伸びすぎないよう、図解ボックスを2列化し、
   セクション下部の余白を圧縮して次セクションとの間延びを防ぐ。 */
@media (max-width:640px){
  #concept.hello-section{
    padding:20px 0 18px !important;
    min-height:auto !important;
  }

  #concept .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  #concept .concept-section-head{
    margin-bottom:10px !important;
  }
  #concept .concept-section-head h2{
    font-size:21px !important;
    line-height:1.22 !important;
    margin-bottom:6px !important;
  }
  #concept .concept-section-head p{
    font-size:11px !important;
    line-height:1.42 !important;
  }

  #concept .concept-compact{
    gap:8px !important;
  }

  #concept .concept-diagram-card{
    padding:12px 10px !important;
    border-radius:20px !important;
    margin-bottom:10px !important;
  }

  #concept .concept-diagram{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "logo logo"
      "wo nnect"
      "colon nn" !important;
    gap:8px !important;
    align-items:stretch !important;
  }

  #concept .concept-center{
    padding:0 0 2px !important;
  }
  #concept .concept-logo-stage{
    width:min(76vw,270px) !important;
    padding:10px 0 12px !important;
  }
  #concept .concept-logo-num{
    width:22px !important;
    height:22px !important;
    font-size:10px !important;
  }
  #concept .logo-num-1{left:48.5% !important;top:18px !important;}
  #concept .logo-num-2{left:84% !important;top:18px !important;}
  #concept .logo-num-3{left:59.5% !important;bottom:18px !important;}
  #concept .logo-num-4{left:70.5% !important;bottom:18px !important;}

  #concept .concept-box{
    min-height:58px !important;
    padding:9px 8px !important;
    gap:7px !important;
    border-radius:14px !important;
    border-width:1.5px !important;
  }
  #concept .concept-box .concept-num{
    flex:0 0 28px !important;
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  #concept .concept-box p{
    gap:2px !important;
    line-height:1.25 !important;
  }
  #concept .concept-box p b{
    font-size:14px !important;
    line-height:1.05 !important;
  }
  #concept .concept-box p span{
    font-size:9.5px !important;
    line-height:1.28 !important;
    font-weight:700 !important;
  }

  #concept .concept-card-row{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
    margin-top:0 !important;
  }
  #concept .concept-mini-card{
    min-height:76px !important;
    padding:7px 3px !important;
    border-radius:11px !important;
  }
  #concept .concept-mini-card.wa-blue{
    grid-column:1 / -1 !important;
    min-height:62px !important;
    padding:8px 10px !important;
  }
  #concept .concept-card-icon{
    width:26px !important;
    height:26px !important;
    margin-bottom:3px !important;
    font-size:11px !important;
  }
  #concept .concept-card-icon.infinity-symbol{
    font-size:18px !important;
  }
  #concept .concept-mini-card h3{
    margin-bottom:2px !important;
    gap:2px !important;
  }
  #concept .concept-mini-card h3 span{
    font-size:14px !important;
  }
  #concept .concept-mini-card h3 small{
    font-size:8px !important;
  }
  #concept .concept-mini-card p{
    font-size:7.5px !important;
    line-height:1.22 !important;
  }

  #concept + .grad-line,
  #concept + .grad-line + section,
  #issues{
    margin-top:0 !important;
  }

  #issues{
    padding-top:24px !important;
  }
}

@media (max-width:380px){
  #concept .concept-logo-stage{width:min(74vw,250px) !important;}
  #concept .concept-box{min-height:56px !important;padding:8px 7px !important;}
  #concept .concept-box p span{font-size:9px !important;}
  #concept .concept-mini-card p{font-size:7px !important;}
}

/* ═══════════════════════════════════════════════════
   v43: 機能詳細モーダル 内部スタイルの再定義（リファクタリング）
   旧パッチ群（23ブロック・125KB）の削除に伴い、
   モーダルの装飾をこのブロックへ集約する。
   アクセント色は各カードが渡す --feature-modal-* を使用。
   ═══════════════════════════════════════════════════ */
#featureDetailPanel .feature-detail-content{
  text-align:center !important;
  background:#fff !important;
  border-radius:22px !important;
  box-shadow:none !important;
  gap:0 !important;
}
/* NOW / NEXT / FUTURE ラベル */
#featureDetailPanel .feature-detail-meta{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  margin:0 auto 16px !important; padding:6px 16px !important;
  width:max-content !important; max-width:100% !important; height:auto !important;
  border-radius:999px !important;
  background:var(--feature-modal-bg, rgba(140,196,184,.14)) !important;
  border:1px solid var(--feature-modal-border, rgba(140,196,184,.32)) !important;
  color:var(--feature-modal-color, #5ea89c) !important;
  font-size:12px !important; font-weight:800 !important; letter-spacing:.06em !important;
  position:static !important;
}
/* アイコン */
#featureDetailPanel .feature-detail-icon{
  width:68px !important; height:68px !important; min-width:68px !important; min-height:68px !important;
  margin:0 auto 14px !important; border-radius:22px !important;
  display:grid !important; place-items:center !important;
  font-size:26px !important; line-height:1 !important;
  background:var(--feature-modal-bg, rgba(140,196,184,.14)) !important;
  color:var(--feature-modal-color, #5ea89c) !important;
  box-shadow:0 8px 22px -10px var(--feature-modal-shadow, rgba(94,168,156,.5)) !important;
}
/* ひとことキャッチ */
#featureDetailPanel .feature-detail-kicker{
  display:inline-block !important; width:auto !important; height:auto !important;
  margin:0 auto 10px !important; padding:5px 14px !important;
  border-radius:999px !important;
  background:var(--feature-modal-halo, rgba(140,196,184,.16)) !important;
  color:var(--feature-modal-color, #5ea89c) !important;
  font-size:12.5px !important; font-weight:800 !important;
}
#featureDetailPanel #featureDetailTitle{
  margin:0 0 12px !important; letter-spacing:.01em !important;
}
#featureDetailPanel #featureDetailDesc{
  margin:0 auto 20px !important; max-width:520px !important; color:var(--text,#4a5853) !important;
}
/* できること一覧 */
#featureDetailPanel #featureDetailPoints{
  display:grid !important; gap:8px !important; margin:0 auto !important; padding:0 !important;
  max-width:520px !important; list-style:none !important; text-align:left !important;
}
#featureDetailPanel #featureDetailPoints li{
  position:relative !important;
  background:#faf9f6 !important; border:1px solid var(--line-soft,#f0f2f1) !important;
  border-radius:12px !important; padding:11px 14px 11px 34px !important;
  color:var(--ink,#2d3a35) !important; font-weight:600 !important;
}
#featureDetailPanel #featureDetailPoints li::before{
  content:"✓" !important; position:absolute !important; left:14px !important; top:50% !important;
  transform:translateY(-50%) !important;
  color:var(--feature-modal-color, #5ea89c) !important; font-weight:900 !important;
}
/* 前へ・次へ（機能を回遊しやすいよう見やすく） */
#featureDetailPanel .feature-detail-nav{
  display:flex !important; justify-content:center !important; gap:10px !important;
  margin:22px auto 0 !important; padding:0 !important; width:auto !important; height:auto !important;
}
#featureDetailPanel .feature-detail-nav-btn{
  flex:0 1 auto !important; width:auto !important; height:auto !important;
  padding:11px 20px !important; border-radius:999px !important;
  background:#fff !important;
  border:1.5px solid var(--feature-modal-border, rgba(140,196,184,.42)) !important;
  color:var(--feature-modal-color, #5ea89c) !important;
  font-size:13px !important; font-weight:800 !important; line-height:1.4 !important;
  cursor:pointer !important; transition:background .18s ease, transform .18s ease !important;
}
#featureDetailPanel .feature-detail-nav-btn:hover{
  background:var(--feature-modal-bg, rgba(140,196,184,.12)) !important; transform:translateY(-1px) !important;
}
/* 「一覧へ戻る」 */
#featureDetailPanel .feature-detail-close{
  position:absolute !important; top:14px !important; right:58px !important; z-index:6 !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  width:auto !important; height:auto !important;
  padding:7px 14px !important; border-radius:999px !important;
  background:#fff !important; border:1px solid var(--line-mid,#e5e7eb) !important;
  color:var(--muted,#8a9591) !important; font-size:12px !important; font-weight:800 !important;
  line-height:1.4 !important; cursor:pointer !important;
  box-shadow:0 4px 12px -6px rgba(50,40,35,.25) !important;
}
#featureDetailPanel .feature-detail-close:hover{ color:var(--ink,#2d3a35) !important; }
/* 閉じる「×」 */
#featureDetailPanel .fd-x{
  position:absolute !important; top:12px !important; right:14px !important; z-index:7 !important;
  width:34px !important; height:34px !important; padding:0 !important;
  display:grid !important; place-items:center !important;
  border-radius:50% !important; border:1px solid var(--line-mid,#e5e7eb) !important;
  background:#fff !important; color:var(--muted,#8a9591) !important;
  font-size:22px !important; line-height:1 !important; cursor:pointer !important;
  transition:background .18s ease, color .18s ease !important;
}
#featureDetailPanel .fd-x:hover{ background:#f4f6f5 !important; color:var(--ink,#2d3a35) !important; }

@media (max-width:640px){
  #featureDetailPanel .feature-detail-icon{
    width:58px !important; height:58px !important; min-width:58px !important; min-height:58px !important;
    font-size:22px !important; border-radius:18px !important; margin-bottom:12px !important;
  }
  #featureDetailPanel .feature-detail-close{
    top:12px !important; right:52px !important; padding:6px 11px !important; font-size:11.5px !important;
  }
  #featureDetailPanel .fd-x{ width:32px !important; height:32px !important; top:11px !important; right:12px !important; }
  #featureDetailPanel #featureDetailPoints li{ padding:10px 12px 10px 32px !important; }
  #featureDetailPanel .feature-detail-nav-btn{ padding:10px 16px !important; font-size:12.5px !important; }
  #featureDetailPanel .feature-detail-meta{ margin-bottom:12px !important; font-size:11.5px !important; padding:5px 13px !important; }
}

/* ═══════════════════════════════════════════════════
   v44: モーダルの背景暗転と操作ボタンの配置整理
   ═══════════════════════════════════════════════════ */
.fd-backdrop{
  position:fixed !important; inset:0 !important;
  background:rgba(18,28,26,.55) !important;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  z-index:1000 !important;
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.fd-backdrop.is-on{ opacity:1; visibility:visible; }
/* 擬似要素の背景は使わない */
body.feature-detail-modal-open::before{ content:none !important; }

/* 「一覧へ戻る」は左上、「×」は右上に分ける（重なり防止） */
#featureDetailPanel .feature-detail-close{
  left:14px !important; right:auto !important;
}
@media (max-width:640px){
  #featureDetailPanel .feature-detail-close{ left:12px !important; right:auto !important; }
}

/* ═══════════════════════════════════════════════════
   v45: レビュー反映（閉じるボタン幅・補足表示・ボトムナビ3項目）
   ═══════════════════════════════════════════════════ */
/* 「一覧へ戻る」が横に伸びないようにする */
body #featureDetailPanel .feature-detail-content .feature-detail-close{
  right:auto !important; width:max-content !important; max-width:calc(100% - 90px) !important;
}
/* ご相談内容の補足 */
#cfForm .cf-topic-note{
  margin:-4px 0 12px !important; padding:9px 12px !important;
  background:rgba(140,196,184,.10); border-left:3px solid var(--teal,#8cc4b8);
  border-radius:8px; font-size:12.5px; line-height:1.7; color:var(--text,#4a5853);
}
@media (max-width:960px){ #cfForm .cf-topic-note{ font-size:12.5px !important; } }
/* ボトムナビ3項目 */
@media (max-width:640px){
  .mob-cta-bar{ gap:6px !important; }
  .mob-cta-item{ padding:7px 4px !important; }
}

/* v46: リファクタで再発した小文字の是正 */
#features .phase-head small{ font-size:12px !important; }
#concept .concept-section-head p,
#concept .concept-section-head p strong,
#concept .concept-section-head p em{ font-size:12.5px !important; line-height:1.8 !important; }
@media (min-width:961px){
  #features .phase-head small{ font-size:12.5px !important; }
  #concept .concept-section-head p,
  #concept .concept-section-head p strong,
  #concept .concept-section-head p em{ font-size:13px !important; }
}

/* ═══════════════════════════════════════════════════
   v47: モーダルをスクロールなしで収める（小型端末向けの凝縮）
   画面の高さに応じて余白・要素サイズを段階的に詰める。
   ═══════════════════════════════════════════════════ */
/* 画面が低い端末（iPhone SE/8 など） */
@media (max-height:700px){
  body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel,
  body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    max-height:90vh !important;
  }
  body.feature-detail-modal-open #featureDetailPanel .feature-detail-content{
    padding:46px 16px 18px !important; gap:6px !important;
  }
  #featureDetailPanel .feature-detail-meta{
    margin:0 auto 6px !important; padding:4px 12px !important; font-size:11px !important;
  }
  #featureDetailPanel .feature-detail-icon{
    width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important;
    font-size:19px !important; border-radius:14px !important; margin:0 auto 6px !important;
  }
  #featureDetailPanel .feature-detail-kicker{ margin:0 auto 6px !important; padding:4px 12px !important; font-size:12px !important; }
  html body #featureDetailPanel #featureDetailTitle{ margin:0 0 8px !important; font-size:20px !important; }
  html body #featureDetailPanel #featureDetailDesc{ margin:0 auto 10px !important; font-size:12.5px !important; line-height:1.65 !important; }
  #featureDetailPanel #featureDetailPoints{ gap:6px !important; }
  html body #featureDetailPanel #featureDetailPoints li{ padding:7px 12px 7px 30px !important; font-size:12.5px !important; }
  #featureDetailPanel #featureDetailPoints li::before{ left:12px !important; }
  #featureDetailPanel .feature-detail-nav{ margin:10px auto 0 !important; }
  #featureDetailPanel .feature-detail-nav-btn{ padding:8px 14px !important; font-size:12px !important; }
  #featureDetailPanel .feature-detail-close{ top:10px !important; left:10px !important; padding:5px 10px !important; font-size:11px !important; }
  #featureDetailPanel .fd-x{ width:28px !important; height:28px !important; top:9px !important; right:10px !important; font-size:19px !important; }
}
/* さらに低い端末（iPhone SE 第1世代 など）はアイコンを省く */
@media (max-height:600px){
  body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel,
  body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    max-height:94vh !important;
  }
  #featureDetailPanel .feature-detail-icon{ display:none !important; }
  body.feature-detail-modal-open #featureDetailPanel .feature-detail-content{ padding:42px 14px 16px !important; }
}

/* ═══════════════════════════════════════════════════
   v48: スマホ表示のレビュー反映
   ・指で押せる大きさ（44px前後）を確保
   ・業界タブに「横に続く」手がかりを追加
   ・縦の余白をわずかに圧縮
   ═══════════════════════════════════════════════════ */
#scenes .scene-tabs-wrap{ position:relative; }

@media (max-width:640px){
  /* 業界タブ */
  html body #scenes .scene-tabs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    justify-content:flex-start !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-right:30px !important;
  }
  #scenes .scene-tabs::-webkit-scrollbar{ display:none; }
  html body #scenes .scene-tab{
    min-height:44px !important; display:inline-flex !important; align-items:center !important;
    flex:0 0 auto !important; scroll-snap-align:start;
  }
  #scenes .scene-tabs-hint{
    position:absolute; right:0; top:calc(50% - 12px); transform:translateY(-50%);
    width:26px; height:26px; border-radius:50%;
    background:#fff; border:1px solid var(--line,#e7eae8);
    display:grid; place-items:center; font-size:15px; font-weight:800;
    color:var(--teal-d,#5ea89c); pointer-events:none;
    box-shadow:0 2px 8px rgba(50,40,35,.16); z-index:3;
  }

  /* フォーム：指で扱える大きさに */
  html body #cta .contact-final-form input,
  html body #cta .contact-final-form select{ min-height:46px !important; }
  html body #cta .contact-final-form textarea{ min-height:96px !important; }
  html body #cfForm .cf-consent input[type="checkbox"]{
    width:22px !important; min-width:22px !important; height:22px !important;
  }
  html body #cfForm .cf-consent > label{ padding:8px 0 !important; min-height:44px !important; align-items:center !important; }
  html body #cfForm .cf-consent-note a{ display:inline-block !important; padding:5px 2px !important; }

  /* フッターのリンク */
  html body footer .footer-col li a{
    display:inline-flex !important; align-items:center !important; min-height:40px !important;
  }

  /* 縦の余白をわずかに圧縮 */
  html body section#issues, html body section#origin, html body section#connect,
  html body section#features, html body section#scenes, html body section#strength,
  html body section#trust, html body section#pricing, html body section#onboarding,
  html body section#faq{
    padding-top:26px !important; padding-bottom:26px !important;
  }
}

/* ═══════════════════════════════════════════════════
   v49: 「もっと見る」（スマホで長いセクションを短縮）
   ═══════════════════════════════════════════════════ */
.more-hidden{ display:none !important; }
.more-btn{
  display:none;
  width:100%; max-width:420px; margin:14px auto 0;
  align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:12px 18px;
  background:#fff; border:1.5px solid var(--line,#e7eae8); border-radius:999px;
  color:var(--teal-d,#5ea89c); font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:13px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 14px -8px rgba(50,40,35,.25);
  transition:background .18s ease, border-color .18s ease;
}
.more-btn i{ font-size:11px; }
.more-btn:hover{ background:#f7fbf9; border-color:var(--teal,#8cc4b8); }
.more-btn:active{ transform:scale(.99); }
@media (max-width:640px){
  .more-btn{ display:flex; }
}
@media (min-width:641px){
  .more-btn{ display:none !important; }
  .more-hidden{ display:'' ; }
}

/* ═══════════════════════════════════════════════════
   v54: 本文の文字サイズを一般的な水準へ引き上げ
   従来は本文が 12〜13px で、一般的なWebサイト（スマホ16px /
   PC16〜18px）より 3〜4px 小さく、読み疲れる状態だった。
   ・本文（読ませる文章）… スマホ15px  / PC16px
   ・補足・キャプション … スマホ13.5px / PC14px
   ・ラベル/バッジ（極小） … 12〜12.5px（据え置き）
   ═══════════════════════════════════════════════════ */

/* ───────── 共通：本文 ───────── */
html body #issues li,
html body #issues .section-summary-copy,
html body #concept .concept-mini-card p,
html body #concept .concept-section-head p,
html body #concept .concept-section-head p strong,
html body #concept .concept-section-head p em,
html body #origin p,
html body #connect .solution-step p,
html body #connect .benefit-list li,
html body #connect .vs-desc,
html body #connect .section-summary-copy,
html body #connect .solution-flow-title,
html body #features .roadmap-feature-card small,
html body #features .pb-chip-body span,
html body #features .pb-card-body p,
html body #features .section-summary-copy,
html body #scenes .scene-block p,
html body #scenes .scene-solution span,
html body #scenes .scene-note,
html body #scenes .section-summary-copy,
html body #strength .why-card p,
html body #trust .prov-lead p,
html body #trust .case-comment,
html body #pricing .pricing-plan-desc,
html body #pricing .pricing-plan-card li,
html body #pricing .section-summary-copy,
html body #onboarding .flw-step p,
html body #faq summary,
html body #faq .faq-answer2,
html body #cta .contact-final-lead,
html body footer .footer-tagline{
  font-size:15px !important;
  line-height:1.85 !important;
}

/* ───────── 共通：補足・キャプション ───────── */
html body #features .roadmap-feature-card .rf-jp,
html body #scenes .scene-label,
html body #scenes .scene-solution strong,
html body #cta .cf-consent-note,
html body #cta .cf-consent-note a,
html body #cta .cf-topic-note,
html body #trust .case-industry,
html body #trust .case-name{
  font-size:13.5px !important;
}

/* ───────── フォーム ───────── */
html body #cta .contact-final-form label,
html body #cta .cf-consent > label > span,
html body #cta .contact-final-form input,
html body #cta .contact-final-form select,
html body #cta .contact-final-form textarea{
  font-size:15px !important;
}
html body #cta .contact-final-form button{ font-size:16px !important; }

/* ───────── 機能モーダル ───────── */
html body #featureDetailPanel #featureDetailDesc{ font-size:15px !important; line-height:1.85 !important; }
html body #featureDetailPanel #featureDetailPoints li{ font-size:14.5px !important; }
html body #featureDetailPanel .feature-detail-kicker{ font-size:13.5px !important; }

/* ───────── 「もっと見る」ボタン ───────── */
html body .more-btn{ font-size:14.5px !important; }

/* ───────── ヒーロー・タブなど ───────── */
html body .hero-badges .badge-item{ font-size:13.5px !important; }
html body #scenes .scene-tab{ font-size:14px !important; }

/* ═══════════════════════════════════════
   PC（961px以上）はさらに一段大きく
   ═══════════════════════════════════════ */
@media (min-width:961px){
  html body #issues li,
  html body #issues .section-summary-copy,
  html body #concept .concept-mini-card p,
  html body #concept .concept-section-head p,
  html body #concept .concept-section-head p strong,
  html body #concept .concept-section-head p em,
  html body #origin p,
  html body #connect .solution-step p,
  html body #connect .benefit-list li,
  html body #connect .vs-desc,
  html body #connect .section-summary-copy,
  html body #connect .solution-flow-title,
  html body #features .roadmap-feature-card small,
  html body #features .pb-chip-body span,
  html body #features .pb-card-body p,
  html body #features .section-summary-copy,
  html body #scenes .scene-block p,
  html body #scenes .scene-solution span,
  html body #scenes .scene-note,
  html body #scenes .section-summary-copy,
  html body #strength .why-card p,
  html body #trust .prov-lead p,
  html body #trust .case-comment,
  html body #pricing .pricing-plan-desc,
  html body #pricing .pricing-plan-card li,
  html body #pricing .section-summary-copy,
  html body #onboarding .flw-step p,
  html body #faq summary,
  html body #faq .faq-answer2,
  html body #cta .contact-final-lead,
  html body footer .footer-tagline{
    font-size:16px !important;
  }
  html body #features .roadmap-feature-card small{ font-size:14px !important; }
  html body #featureDetailPanel #featureDetailDesc{ font-size:16px !important; }
  html body #featureDetailPanel #featureDetailPoints li{ font-size:15px !important; }
  html body #cta .contact-final-form label,
  html body #cta .cf-consent > label > span{ font-size:15px !important; }
  html body #scenes .scene-tab{ font-size:14.5px !important; }
}

/* ═══════════════════════════════════════════════════
   v55: 文字拡大に伴う調整
   ・PCでは業界タブを折り返し（1行に収まらず溢れていた）
   ・行間を1.85→1.75にし、間延びを抑える
   ═══════════════════════════════════════════════════ */
@media (min-width:641px){
  html body #scenes .scene-tabs{
    flex-wrap:wrap !important;
    overflow-x:visible !important;
    justify-content:center !important;
    padding-right:0 !important;
    -webkit-mask-image:none !important; mask-image:none !important;
  }
  html body #scenes .scene-tabs-hint{ display:none !important; }
}
/* 行間の適正化（読みやすさは保ちつつ、縦の間延びを抑える） */
html body #issues li,
html body #concept .concept-mini-card p,
html body #origin p,
html body #connect .solution-step p,
html body #connect .benefit-list li,
html body #features .roadmap-feature-card small,
html body #scenes .scene-block p,
html body #strength .why-card p,
html body #trust .prov-lead p,
html body #pricing .pricing-plan-desc,
html body #onboarding .flw-step p,
html body #faq .faq-answer2{
  line-height:1.75 !important;
}

/* ═══════════════════════════════════════════════════
   v56: 文字拡大後もモーダルがスクロールなしで収まるよう微調整
   （超過は7〜14px程度のため、余白のみで吸収する）
   ═══════════════════════════════════════════════════ */
body.feature-detail-modal-open #featureDetailPanel .feature-detail-content{
  padding:50px 24px 20px !important;
  gap:8px !important;
}
#featureDetailPanel #featureDetailDesc{ margin-bottom:14px !important; }
#featureDetailPanel .feature-detail-nav{ margin-top:16px !important; }
#featureDetailPanel .feature-detail-meta{ margin-bottom:12px !important; }
#featureDetailPanel .feature-detail-icon{ margin-bottom:10px !important; }

/* 画面が低い端末は既存の凝縮に加えて、もう一段詰める */
@media (max-height:700px){
  body.feature-detail-modal-open #featureDetailPanel .feature-detail-content{
    padding:44px 16px 16px !important; gap:5px !important;
  }
  #featureDetailPanel #featureDetailDesc{ margin-bottom:8px !important; }
  #featureDetailPanel .feature-detail-nav{ margin-top:8px !important; }
  html body #featureDetailPanel #featureDetailPoints li{ padding:6px 12px 6px 30px !important; }
  #featureDetailPanel #featureDetailPoints{ gap:5px !important; }
}

/* v57: 最小端末（高さ600px未満）でモーダルの最大高をわずかに拡張し、残り7pxを吸収 */
@media (max-height:600px){
  body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel,
  body.feature-detail-modal-open #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    max-height:96vh !important;
  }
  body.feature-detail-modal-open #featureDetailPanel .feature-detail-content{
    padding:42px 14px 14px !important;
  }
}

/* ═══════════════════════════════════════════════════
   Phase 1: ファーストビューに価値提案を明示
   検索結果（title/description）では「多店舗・多拠点向け」と
   伝えているのに、画面上に一度も出ていなかったため追加。
   ═══════════════════════════════════════════════════ */
.hero-valueprop{
  font-size:15px; line-height:1.85; color:var(--text,#4a5853);
  margin:10px auto var(--sp-4,16px); max-width:620px; font-weight:500;
}
.hero-valueprop b{
  color:var(--teal-dd,#3f7a6f); font-weight:800;
  background:linear-gradient(transparent 62%, rgba(140,196,184,.30) 62%);
  padding:0 2px;
}
@media (min-width:961px){
  .hero-valueprop{ font-size:16.5px; margin-bottom:var(--sp-5,24px); }
}
@media (max-width:640px){
  .hero-valueprop{ font-size:14px; line-height:1.8; margin:8px auto 14px; }
}

/* ═══════════════════════════════════════════════════
   Phase 2: PC専用レイアウト（1200px以上）
   これまでPC版はスマホ版を横に引き伸ばしただけで、
   ・見出しだけで画面の50〜75%を消費
   ・テキストの53%が中央揃え
   ・縦の余白が過大
   という状態だった。PCの横幅を活かす構成に変更する。
   ═══════════════════════════════════════════════════ */
@media (min-width:1200px){

  /* ───── ① 縦の余白を圧縮 ───── */
  html body section#issues,
  html body section#concept,
  html body section#origin,
  html body section#connect,
  html body section#features,
  html body section#scenes,
  html body section#strength,
  html body section#trust,
  html body section#pricing,
  html body section#onboarding,
  html body section#faq{
    padding-top:52px !important;
    padding-bottom:52px !important;
  }

  /* ───── ② 見出しブロックを左寄せ・2カラム化 ─────
     見出し＋リードを左に置き、本文を右に流す。
     スクロール中も見出しが見えるよう追従させる。 */
  html body #issues .issues-header,
  html body #connect .solution-header,
  html body #scenes .industry-scene-header,
  html body #strength .why-head,
  html body #trust .trust-head,
  html body #onboarding .onboarding-header{
    text-align:left !important;
    max-width:none !important;
    margin:0 0 26px !important;
    padding:0 !important;
  }
  html body #issues .issues-header p,
  html body #connect .solution-header p,
  html body #scenes .industry-scene-header p,
  html body #strength .why-head p,
  html body #trust .trust-head p,
  html body #onboarding .onboarding-header p{
    margin-left:0 !important; margin-right:0 !important;
    max-width:560px !important;
    text-align:left !important;
  }
  html body #issues .issues-header .brand-dots,
  html body #connect .solution-header .brand-dots,
  html body #scenes .industry-scene-header .brand-dots,
  html body #strength .why-head .brand-dots,
  html body #trust .trust-head .brand-dots{
    justify-content:flex-start !important;
    margin-left:0 !important;
  }
  /* 見出し内の改行指定は左寄せでは不要 */
  html body #issues .issues-header .d-br,
  html body #connect .solution-header .d-br,
  html body #strength .why-head .d-br,
  html body #trust .trust-head .d-br{ display:none !important; }

  /* 2カラム化（見出し左／内容右・見出しは追従） */
  html body #strength .container,
  html body #trust .container{
    display:grid !important;
    grid-template-columns:minmax(300px, 360px) minmax(0, 1fr) !important;
    gap:48px !important;
    align-items:start !important;
  }
  html body #strength .why-head,
  html body #trust .trust-head{
    position:sticky !important; top:96px !important;
    margin-bottom:0 !important;
  }
  html body #strength .why-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  html body #trust .trust-block{ margin-top:0 !important; }
  html body #trust .trust-block + .trust-block{ margin-top:28px !important; }

  /* ───── ③ 長文の中央揃えをやめる ───── */
  html body #issues .section-summary-copy,
  html body #connect .section-summary-copy,
  html body #features .section-summary-copy,
  html body #scenes .section-summary-copy,
  html body #pricing .section-summary-copy{
    text-align:left !important;
  }

  /* ───── ④ 見出し直後の余白を詰める ───── */
  html body #features .features-header,
  html body #pricing .section-head,
  html body #faq .section-head{
    margin-bottom:26px !important;
  }
  html body #issues .issues-header h2,
  html body #connect .solution-header h2,
  html body #scenes .industry-scene-header h2,
  html body #strength .why-head h2,
  html body #trust .trust-head h2,
  html body #onboarding .onboarding-header h2{
    margin-bottom:12px !important;
  }

  /* ───── ⑤ 課題・効果は横幅を活かして4列に ───── */
  html body #issues .issue-card-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:18px !important; }
  html body #connect .benefit-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:18px !important; }
}

/* 大画面（1600px以上）は本文幅も広げて余白の無駄を減らす */
@media (min-width:1600px){
  html body .container{ max-width:1400px !important; }
}

/* Phase 2 補正: 2カラム時の見出しが不自然に折れないよう調整 */
@media (min-width:1200px){
  html body #strength .container,
  html body #trust .container{
    grid-template-columns:minmax(340px, 400px) minmax(0, 1fr) !important;
    gap:44px !important;
  }
  html body #strength .why-head h2,
  html body #trust .trust-head h2{
    font-size:30px !important; line-height:1.45 !important;
    word-break:normal !important; overflow-wrap:normal !important;
  }
  html body #strength .why-head p,
  html body #trust .trust-head p{ font-size:14.5px !important; max-width:none !important; }
}
@media (min-width:1600px){
  html body #strength .container,
  html body #trust .container{ grid-template-columns:minmax(380px, 440px) minmax(0, 1fr) !important; }
  html body #strength .why-head h2,
  html body #trust .trust-head h2{ font-size:34px !important; }
}

/* ═══════════════════════════════════════════════════
   Phase 3: 中盤CTA と スクロール進捗バー
   従来は問い合わせ導線が 4% と 76% にしかなく、
   閲覧の大部分に受け皿がなかったため中盤に追加する。
   ═══════════════════════════════════════════════════ */
.mid-cta{
  background:linear-gradient(120deg, #5ea89c 0%, #4a8f83 55%, #47808f 100%);
  color:#fff;
  padding:32px 0;
}
.mid-cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.mid-cta-text{ flex:1 1 380px; }
.mid-cta-title{
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:20px; font-weight:900; color:#fff; margin:0 0 6px; line-height:1.5;
}
.mid-cta-desc{ font-size:14px; color:#dcefe9; margin:0; line-height:1.75; }
.mid-cta-btn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#3f7a6f; text-decoration:none;
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-weight:800; font-size:15px;
  padding:15px 30px; border-radius:999px;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.4);
  transition:transform .18s ease, box-shadow .18s ease;
  min-height:52px;
}
.mid-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(0,0,0,.45); }
@media (max-width:640px){
  .mid-cta{ padding:24px 0; }
  .mid-cta-inner{ flex-direction:column; align-items:stretch; gap:16px; text-align:center; }
  .mid-cta-title{ font-size:17px; }
  .mid-cta-desc{ font-size:13.5px; }
  .mid-cta-btn{ justify-content:center; width:100%; font-size:14.5px; padding:14px 20px; }
}

/* 進捗バー */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  background:transparent; z-index:400; pointer-events:none;
}
.scroll-progress > span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#f0a8b8,#f5c8a8,#f9dc8c,#a8d8c0,#8cc4b8,#7eb8d4);
  transition:width .08s linear;
}
@media (max-width:640px){ .scroll-progress{ height:2.5px; } }

/* ═══════════════════════════════════════════════════
   v63: 中盤CTAのスマホ表示を修正
   縦並びでは flex-basis:380px が「高さ380px」として効き、
   中身73pxに対して約300pxの空白が生まれていた。
   ═══════════════════════════════════════════════════ */
@media (max-width:640px){
  html body .mid-cta-text{ flex:0 0 auto !important; }
  html body .mid-cta-inner{ gap:14px !important; }
  html body .mid-cta{ padding:22px 0 !important; }
}

/* ═══════════════════════════════════════════════════
   Phase 2（続き）: PCの2カラム化を残りのセクションへ展開
   見出し＋リードを左に固定し、本文を右に流す。
   ※ #features は3列ロードマップに横幅が必要なため対象外。
   ═══════════════════════════════════════════════════ */
@media (min-width:1200px){

  /* ── 共通：ラッパーを2カラムグリッドにする ── */
  html body #issues .issues-visual,
  html body #connect .solution-visual,
  html body #scenes .industry-scene-visual,
  html body #onboarding .onboarding-visual,
  html body #pricing .container,
  html body #faq .container{
    display:grid !important;
    grid-template-columns:minmax(320px, 372px) minmax(0, 1fr) !important;
    gap:44px !important;
    align-items:start !important;
  }

  /* 左カラム＝見出し（スクロール追従） */
  html body #issues .issues-header,
  html body #connect .solution-header,
  html body #scenes .industry-scene-header,
  html body #onboarding .onboarding-header,
  html body #pricing .section-head,
  html body #faq .section-head{
    grid-column:1 !important;
    grid-row:1 / -1 !important;
    position:sticky !important;
    top:96px !important;
    text-align:left !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* 右カラム＝本文 */
  html body #issues .issues-visual > *:not(.issues-header),
  html body #connect .solution-visual > *:not(.solution-header),
  html body #scenes .industry-scene-visual > *:not(.industry-scene-header),
  html body #onboarding .onboarding-visual > *:not(.onboarding-header),
  html body #pricing .container > *:not(.section-head),
  html body #faq .container > *:not(.section-head){
    grid-column:2 !important;
  }

  /* 見出し内の体裁（左寄せに合わせる） */
  html body #pricing .section-head,
  html body #faq .section-head{ text-align:left !important; }
  html body #pricing .section-head p,
  html body #faq .section-head p,
  html body #onboarding .onboarding-header p,
  html body #scenes .industry-scene-header p{
    text-align:left !important; margin-left:0 !important; margin-right:0 !important; max-width:none !important;
  }
  html body #pricing .section-head .brand-dots,
  html body #faq .section-head .brand-dots,
  html body #onboarding .onboarding-header .brand-dots{
    justify-content:flex-start !important; margin-left:0 !important;
  }
  html body #issues .issues-header h2,
  html body #connect .solution-header h2,
  html body #scenes .industry-scene-header h2,
  html body #onboarding .onboarding-header h2,
  html body #pricing .section-head h2,
  html body #faq .section-head h2{
    font-size:30px !important; line-height:1.45 !important;
    margin-bottom:12px !important; text-align:left !important;
    word-break:normal !important; overflow-wrap:normal !important;
  }
  html body #issues .issues-header p,
  html body #connect .solution-header p,
  html body #scenes .industry-scene-header p,
  html body #onboarding .onboarding-header p,
  html body #pricing .section-head p,
  html body #faq .section-head p{
    font-size:14.5px !important; line-height:1.85 !important;
  }
  /* 中央揃え前提の強制改行は左寄せでは不要 */
  html body #issues .issues-header .d-br,
  html body #connect .solution-header .d-br,
  html body #scenes .industry-scene-header .d-br,
  html body #onboarding .onboarding-header .d-br,
  html body #pricing .section-head .d-br,
  html body #faq .section-head .d-br{ display:none !important; }

  /* 右カラム内の要素間隔 */
  html body #connect .solution-visual > * + *:not(.solution-header),
  html body #scenes .industry-scene-visual > * + *:not(.industry-scene-header){
    margin-top:20px !important;
  }
  /* まとめ文は左寄せに */
  html body #issues .section-summary-copy,
  html body #connect .section-summary-copy,
  html body #scenes .section-summary-copy,
  html body #pricing .section-summary-copy{ text-align:left !important; }
}

/* 大画面では左カラムをやや広げる */
@media (min-width:1600px){
  html body #issues .issues-visual,
  html body #connect .solution-visual,
  html body #scenes .industry-scene-visual,
  html body #onboarding .onboarding-visual,
  html body #pricing .container,
  html body #faq .container{
    grid-template-columns:minmax(360px, 420px) minmax(0, 1fr) !important;
  }
  html body #issues .issues-header h2,
  html body #connect .solution-header h2,
  html body #scenes .industry-scene-header h2,
  html body #onboarding .onboarding-header h2,
  html body #pricing .section-head h2,
  html body #faq .section-head h2{ font-size:34px !important; }
}

/* ═══════════════════════════════════════════════════
   v65: 2カラム化の対象を見直し
   「解決」「業界別」は内部に横幅を要する要素（4列カード・
   業界タブ・シーン表）があり、右カラムに収めると折り返しが
   増えて逆に縦に伸びたため、全幅表示へ戻す。
   （見出しの左寄せ・余白圧縮は維持）
   ═══════════════════════════════════════════════════ */
@media (min-width:1200px){
  html body #connect .solution-visual,
  html body #scenes .industry-scene-visual{
    display:block !important;
    grid-template-columns:none !important;
    gap:0 !important;
  }
  html body #connect .solution-header,
  html body #scenes .industry-scene-header{
    position:static !important;
    grid-column:auto !important; grid-row:auto !important;
    margin:0 0 22px !important;
    max-width:760px !important;
  }
  html body #connect .solution-visual > *:not(.solution-header),
  html body #scenes .industry-scene-visual > *:not(.industry-scene-header){
    grid-column:auto !important;
  }
  html body #connect .solution-visual > * + *:not(.solution-header),
  html body #scenes .industry-scene-visual > * + *:not(.industry-scene-header){
    margin-top:0 !important;
  }
}

/* ═══════════════════════════════════════════════════
   Phase 4-A: スマホ用ロードマップタブ
   ═══════════════════════════════════════════════════ */
.rm-tabs{ display:none; }
@media (max-width:640px){
  .rm-tabs{
    display:grid !important; grid-template-columns:repeat(3, 1fr);
    gap:8px; margin:0 0 18px;
  }
  .rm-tab{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:62px; padding:9px 4px;
    background:#fff; border:1.5px solid var(--line,#e7eae8); border-radius:14px;
    cursor:pointer; transition:border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .rm-tab-badge{
    font-family:var(--font-base,'Inter',sans-serif);
    font-size:10.5px; font-weight:800; letter-spacing:.08em; color:var(--muted,#8a9591);
  }
  .rm-tab-label{
    font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
    font-size:13px; font-weight:800; color:var(--ink,#2d3a35); line-height:1.3;
  }
  .rm-tab-count{
    font-size:11px; font-weight:700; color:var(--muted,#8a9591);
  }
  .rm-tab-count::after{ content:"件"; }
  .rm-tab.is-active{ transform:translateY(-1px); }
  .rm-tab-now.is-active{ border-color:#f0a8b8; background:rgba(240,168,184,.10); }
  .rm-tab-now.is-active .rm-tab-badge{ color:#d4718a; }
  .rm-tab-next.is-active{ border-color:#8cc4b8; background:rgba(140,196,184,.12); }
  .rm-tab-next.is-active .rm-tab-badge{ color:#4a8f83; }
  .rm-tab-future.is-active{ border-color:#7eb8d4; background:rgba(126,184,212,.12); }
  .rm-tab-future.is-active .rm-tab-badge{ color:#4f88ab; }

  /* 非表示のフェーズ */
  html body #features .roadmap-phase.rm-phase-hidden{ display:none !important; }
  /* タブ表示時は各フェーズの見出しを簡素化 */
  html body #features .roadmap-phase{ margin:0 !important; }
}

/* Phase 4-A 補正: タブ表示時はフェーズ見出しのバッジ重複を解消 */
@media (max-width:640px){
  html body #features .roadmap-phase .phase-badge{ display:none !important; }
  html body #features .roadmap-phase .phase-head{ padding-top:4px !important; }
}

/* v70: ロードマップタブの文字を下限（11.5px以上）に合わせる */
@media (max-width:640px){
  html body .rm-tab-badge{ font-size:11.5px !important; letter-spacing:.06em !important; }
  html body .rm-tab-count{ font-size:11.5px !important; }
  html body .rm-tab{ min-height:66px !important; }
}

/* ═══════════════════════════════════════════════════
   v71: OSの「動きを減らす」設定への対応
   （iPhone: 設定→アクセシビリティ→動作／
     Windows: 設定→アクセシビリティ→視覚効果）
   この設定をONにしている方は、画面が動くとめまいや
   吐き気を起こすことがあるため、演出を停止する。
   表示される内容は変わらない。
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  /* すべてのアニメーション・変化を止める */
  html body *,
  html body *::before,
  html body *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:0.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  html, html body{ scroll-behavior:auto !important; }

  /* スクロールで現れる演出は、最初から表示された状態にする */
  html body .reveal{
    opacity:1 !important;
    transform:none !important;
  }

  /* ホバーで浮き上がる動きを止める */
  html body .why-card:hover,
  html body .case-card:hover,
  html body .edge-card:hover,
  html body .mid-cta-btn:hover,
  html body .more-btn:hover,
  html body #featureDetailPanel .feature-detail-nav-btn:hover,
  html body .rm-tab.is-active{
    transform:none !important;
  }

  /* モーダルの拡大表示・背景のぼかしを止める */
  html body #featureDetailPanel.feature-detail-panel,
  html body #featureDetailPanel.feature-detail-panel.is-anchored-to-feature-card{
    animation:none !important;
  }
  html body .fd-backdrop{
    transition:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }

  /* 進捗バーの追従を即時反映に */
  html body .scroll-progress > span{ transition:none !important; }
}

/* v72: 「動きを減らす」設定で止めきれていなかった演出への追補
   （既存の !important 指定に競り勝つ特異性で上書き） */
@media (prefers-reduced-motion: reduce){
  html body #featureDetailPanel .feature-detail-content,
  html body #featureDetailPanel.feature-detail-panel .feature-detail-content{
    animation:none !important;
  }
  html body #scenes .industry-scene-card,
  html body #issues .issue-v-card,
  html body #connect .benefit-card,
  html body #origin .edge-card,
  html body #featureDetailPanel .feature-detail-nav-btn,
  html body .mob-nav-overlay,
  html body .mob-nav,
  html body .site-header,
  html body .rm-tab,
  html body .more-btn{
    transition:none !important;
  }
}

/* ═══════════════════════════════════════════════════
   v76: PC見出しの改行・レイアウト整理
   2カラム化で見出しを左寄せにした結果、
   ・中央揃え前提の強制改行が不自然な位置で折れる
   ・左カラムが狭く、短い見出しまで2行に割れる
   という崩れが出ていたため調整する。
   ═══════════════════════════════════════════════════ */
@media (min-width:1200px){
  /* 左寄せ見出しでは強制改行を無効化し、自然な折り返しに任せる */
  html body #issues .issues-header h2 .d-br,
  html body #connect .solution-header h2 .d-br,
  html body #scenes .industry-scene-header h2 .d-br,
  html body #strength .why-head h2 .d-br,
  html body #trust .trust-head h2 .d-br,
  html body #pricing .section-head h2 .d-br,
  html body #faq .section-head h2 .d-br,
  html body #onboarding .onboarding-header h2 .d-br{
    display:none !important;
  }

  /* 左カラムの見出しが不自然に割れないよう、文節で折り返す */
  html body #issues .issues-header h2,
  html body #connect .solution-header h2,
  html body #scenes .industry-scene-header h2,
  html body #strength .why-head h2,
  html body #trust .trust-head h2,
  html body #pricing .section-head h2,
  html body #faq .section-head h2,
  html body #onboarding .onboarding-header h2{
    word-break:normal !important;
    overflow-wrap:normal !important;
    line-break:strict !important;
    text-wrap:balance;
  }

  /* 左カラムをやや広げ、2行に割れる見出しを収まりよくする */
  html body #issues .issues-visual,
  html body #onboarding .onboarding-visual,
  html body #pricing .container,
  html body #faq .container{
    grid-template-columns:minmax(340px, 396px) minmax(0, 1fr) !important;
  }

  /* ── お問い合わせ：左の見出しとフォームのバランス調整 ── */
  html body #cta .contact-final{
    grid-template-columns:minmax(0, 1fr) minmax(420px, 480px) !important;
    align-items:start !important;
  }
  html body #cta .contact-final-left h2{
    text-wrap:balance;
    max-width:16em !important;
  }
  html body #cta .contact-final-left p{
    max-width:34em !important;
  }
}
@media (min-width:1600px){
  html body #issues .issues-visual,
  html body #onboarding .onboarding-visual,
  html body #pricing .container,
  html body #faq .container{
    grid-template-columns:minmax(380px, 440px) minmax(0, 1fr) !important;
  }
}

/* v77: お問い合わせ見出しのはみ出し解消
   .contact-title-sub が nowrap 指定で 585px 必要だったが、
   2カラム化で左カラムが 534px になり溢れていた。 */
@media (min-width:1200px){
  html body #cta .contact-final-left .contact-title-sub{
    white-space:normal !important;
  }
  html body #cta .contact-final-left h2{
    max-width:none !important;
  }
}

/* ═══════════════════════════════════════════════════
   v78: 見出しを文節で折り返す（日本語の不自然な分断を防ぐ）
   「お問い合／わせください」のように単語途中で折れていたため、
   折り返し可能な位置を制御する。
   ═══════════════════════════════════════════════════ */
@media (min-width:1200px){
  /* 左カラムを広げ、見出しに余裕を持たせる */
  html body #cta .contact-final{
    grid-template-columns:minmax(0, 1fr) minmax(430px, 470px) !important;
    gap:48px !important;
  }
  /* 各行を意味のまとまりで扱い、途中で割れないようにする */
  html body #cta .contact-final-left .contact-title-main,
  html body #cta .contact-final-left .contact-title-sub{
    display:block !important;
    white-space:normal !important;
    word-break:keep-all !important;      /* 単語途中で折らない */
    overflow-wrap:normal !important;
    text-wrap:balance;
  }
  /* 収まらない場合のみ字間を詰めて1行に保つ */
  html body #cta .contact-final-left .contact-title-sub{
    letter-spacing:-0.01em !important;
  }
  /* 左カラムの説明文も左端を揃える */
  html body #cta .contact-final-left p{
    margin-left:0 !important;
  }

  /* 他セクションの見出しも単語途中で折らない */
  html body #issues .issues-header h2,
  html body #connect .solution-header h2,
  html body #scenes .industry-scene-header h2,
  html body #strength .why-head h2,
  html body #trust .trust-head h2,
  html body #pricing .section-head h2,
  html body #faq .section-head h2,
  html body #onboarding .onboarding-header h2{
    word-break:keep-all !important;
  }
}

/* ═══════════════════════════════════════════════════
   v79: FUTURE列の潰れを解消
   8機能を2列に押し込んでいたためカード幅が137pxしかなく
   （NOW/NEXTは284〜361px）、機能名が3行に割れていた。
   他の列と同じ1列にし、カード幅を揃える。
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  /* FUTUREも1列に（他列とカード幅・行数を揃える） */
  html body #features .roadmap-phase.roadmap-future .roadmap-feature-list{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    grid-auto-rows:auto !important;
    gap:10px !important;
  }
  /* 1列化で余裕ができるため、文字サイズを他列と揃える */
  html body #features .roadmap-phase.roadmap-future .roadmap-feature-card b{
    font-size:16px !important; line-height:1.25 !important;
  }
  html body #features .roadmap-phase.roadmap-future .roadmap-feature-card small{
    font-size:13px !important; line-height:1.45 !important;
  }
  html body #features .roadmap-phase.roadmap-future .rf-jp{ font-size:12.5px !important; }
  /* 8件と4件で高さが揃わないため、カードは内容なりの高さにする */
  html body #features .roadmap-phase.roadmap-future .roadmap-feature-card{
    min-height:0 !important;
    padding:12px 14px !important;
  }
  html body #features .roadmap-now .roadmap-feature-card,
  html body #features .roadmap-next .roadmap-feature-card{
    flex:0 0 auto !important;
  }
  /* 3列の高さは揃えたまま、上詰めで並べる */
  html body #features .feature-roadmap{ align-items:start !important; }
  html body #features .roadmap-phase .roadmap-feature-list{ flex:0 0 auto !important; }
}

/* ═══════════════════════════════════════════════════
   v80: ロードマップ3列の見た目を統一
   FUTUREだけカードが薄く（67px対102px）見え方が異なり、
   列の下端も揃っていなかったため調整する。
   ═══════════════════════════════════════════════════ */
@media (min-width:961px){
  /* 3列を等高にし、下端を揃える */
  html body #features .feature-roadmap{ align-items:stretch !important; }
  html body #features .roadmap-phase{
    display:flex !important; flex-direction:column !important;
  }
  html body #features .roadmap-phase .roadmap-feature-list{ flex:1 1 auto !important; }

  /* NOW / NEXT は4件を均等に配分して余白を埋める */
  html body #features .roadmap-now .roadmap-feature-card,
  html body #features .roadmap-next .roadmap-feature-card{
    flex:1 1 auto !important;
    min-height:96px !important;
  }
  /* FUTURE は8件。カードの厚みを他列に近づける */
  html body #features .roadmap-phase.roadmap-future .roadmap-feature-card{
    min-height:78px !important;
    padding:14px 16px !important;
    flex:1 1 auto !important;
  }
  html body #features .roadmap-phase.roadmap-future .roadmap-feature-list{
    gap:9px !important;
  }
}

/* v81: カードを引き伸ばさず、列の高さだけ揃える
   （NOW/NEXTのカードが164pxまで間延びしていたため） */
@media (min-width:961px){
  html body #features .roadmap-now .roadmap-feature-card,
  html body #features .roadmap-next .roadmap-feature-card{
    flex:0 0 auto !important;
    min-height:88px !important;
  }
  html body #features .roadmap-phase.roadmap-future .roadmap-feature-card{
    flex:0 0 auto !important;
    min-height:80px !important;
  }
  /* 余ったぶんは列の下に余白として残す（カードは伸ばさない） */
  html body #features .roadmap-now .roadmap-feature-list,
  html body #features .roadmap-next .roadmap-feature-list{
    justify-content:flex-start !important;
    gap:12px !important;
  }
  html body #features .roadmap-phase.roadmap-future .roadmap-feature-list{
    justify-content:flex-start !important;
    gap:10px !important;
  }
}

/* v82: 列の高さを内容なりにする
   3列を等高にすると、件数の少ないNOW/NEXT列の下に
   347pxの空白が生じるため、上詰め・内容なりの高さに戻す。
   （FUTUREが8件で長いのは情報量の違いとして自然に見せる） */
@media (min-width:961px){
  html body #features .feature-roadmap{ align-items:start !important; }
  html body #features .roadmap-phase .roadmap-feature-list{ flex:0 0 auto !important; }
}

/* ═══════════════════════════════════════════════════
   v83: お問い合わせセクションの余白解消
   左カラム225px に対しフォーム853px で、左下に628pxの
   空白が空いていた。問い合わせ後の流れと安心材料を置いて
   左右のバランスを取る。
   ═══════════════════════════════════════════════════ */
#cta .contact-flow{
  margin-top:26px;
  padding:20px 22px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
}
#cta .contact-flow-title{
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:13.5px; font-weight:800; color:#fff;
  letter-spacing:.04em; margin-bottom:14px;
}
#cta .contact-flow-list{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
#cta .contact-flow-list li{ display:flex; align-items:flex-start; gap:12px; }
#cta .cfl-num{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#3f7a6f;
  display:grid; place-items:center;
  font-family:var(--font-base,'Inter',sans-serif); font-size:13px; font-weight:800;
}
#cta .contact-flow-list b{
  display:block; font-size:14.5px; font-weight:800; color:#fff; line-height:1.5;
}
#cta .contact-flow-list small{
  display:block; font-size:12.5px; color:#d6ece6; line-height:1.65; margin-top:2px;
}
#cta .contact-assure{
  margin-top:18px; display:grid; gap:9px;
}
#cta .contact-assure-item{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:#dcefe9; line-height:1.6;
}
#cta .contact-assure-item i{ color:#bfe3d9; font-size:13px; width:16px; text-align:center; flex:0 0 auto; }
#cta .contact-assure-item b{ color:#fff; font-weight:800; }

@media (min-width:1200px){
  /* 左右のバランスを取り直す */
  html body #cta .contact-final{
    grid-template-columns:minmax(0, 1fr) minmax(440px, 480px) !important;
    gap:56px !important;
    align-items:start !important;
  }
}
@media (max-width:640px){
  #cta .contact-flow{ margin-top:20px; padding:16px 16px; }
  #cta .contact-flow-list b{ font-size:14px; }
  #cta .contact-assure{ margin-top:14px; }
}

/* v84: お問い合わせ見出しのはみ出し解消（.contact-title-sub の nowrap 解除）
   既存指定が高い特異性で残っていたため、上書きする。 */
html body #cta .contact-final-left h2 .contact-title-sub,
html body #cta .contact-title-sub{
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
@media (min-width:1200px){
  html body #cta .contact-final-left h2{
    font-size:34px !important; line-height:1.45 !important;
  }
}

/* v85: 1280px幅での見出しはみ出し解消（左カラムが454pxと狭いため） */
@media (min-width:1200px) and (max-width:1400px){
  html body #cta .contact-final-left h2{ font-size:30px !important; }
  html body #cta .contact-final{ gap:44px !important; grid-template-columns:minmax(0,1fr) minmax(420px,460px) !important; }
}

/* ═══════════════════════════════════════════════════
   v87: 導入ブランドのラインナップ
   1社が複数ブランドを運営している構成に対応。
   ブランドを並べつつ、運営企業を明記して誤認を防ぐ。
   ═══════════════════════════════════════════════════ */
.brand-group{
  background:#fff;
  border:1px solid var(--line-soft,#f0f2f1);
  border-radius:20px;
  padding:30px 28px 24px;
  box-shadow:0 2px 12px -8px rgba(50,40,35,.12);
  max-width:940px; margin:0 auto;
}
.brand-group + .brand-group{ margin-top:18px; }

.brand-list{
  list-style:none; margin:0 0 20px; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
}
.brand-item{ flex:0 1 auto; }
.brand-logo{
  width:148px; height:74px;
  display:flex; align-items:center; justify-content:center;
  background:#fafcfb;
  border:1px dashed #d6e2dd;
  border-radius:12px;
  padding:8px 12px;
  transition:border-color .2s ease, background .2s ease;
}
.brand-logo span{
  font-size:12px; font-weight:700; color:#b8c6c1; letter-spacing:.06em;
}
/* 画像を入れたら枠線を実線にして自然に見せる */
.brand-logo:has(img){ border-style:solid; border-color:var(--line-soft,#f0f2f1); background:#fff; }
.brand-logo img{
  max-width:100%; max-height:56px; width:auto; height:auto;
  object-fit:contain; display:block;
}

.brand-owner{
  margin:0; padding-top:18px;
  border-top:1px solid var(--line-soft,#f0f2f1);
  display:flex; align-items:baseline; justify-content:center; gap:14px; flex-wrap:wrap;
  text-align:center;
}
.brand-owner-name{
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:16px; font-weight:900; color:var(--ink,#2d3a35);
}
.brand-owner-meta{
  font-size:13px; font-weight:700; color:var(--teal-dd,#3f7a6f);
  background:rgba(140,196,184,.14); padding:5px 14px; border-radius:999px;
}

@media (max-width:640px){
  .brand-group{ padding:22px 16px 18px; border-radius:16px; }
  /* スマホは2列に整列（flexだと幅計算が崩れるためgridにする） */
  .brand-list{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:10px; margin-bottom:16px;
  }
  .brand-item{ width:100%; }
  .brand-logo{ width:100%; height:64px; }
  .brand-owner{ gap:8px; padding-top:14px; }
  .brand-owner-name{ font-size:15px; }
  .brand-owner-meta{ font-size:12.5px; }
}

/* v88: ブランドが5つのとき 4+1 に割れないよう配置を整える
   （3+2 の対称配置にし、中央揃えで収まりよく見せる） */
@media (min-width:641px){
  .brand-list{ max-width:520px; margin-left:auto; margin-right:auto; }
}
@media (min-width:1000px){
  /* 4つ以下は1行、5つ以上は3+2 で対称に */
  .brand-list{ max-width:520px; }
  .brand-group:has(.brand-item:nth-child(6)) .brand-list{ max-width:700px; }
  .brand-group:has(.brand-item:nth-child(7)) .brand-list{ max-width:none; }
}

/* ═══════════════════════════════════════════════════
   v89: スマホでのお問い合わせ見出しの崩れを修正
   v84で追加した word-break:keep-all（単語を分割しない）が
   画面幅を問わず適用されており、スマホでは
   「お気軽にお問い合わせください。」が折り返せず431px必要となり、
   枠（358px）を突き破っていた。
   タブレット以下では通常の折り返しに戻す。
   ═══════════════════════════════════════════════════ */
@media (max-width:1199px){
  html body #cta .contact-final-left h2,
  html body #cta .contact-final-left h2 .contact-title-main,
  html body #cta .contact-final-left h2 .contact-title-sub,
  html body #cta .contact-title-sub{
    word-break:normal !important;
    overflow-wrap:anywhere !important;
    white-space:normal !important;
  }
  /* グリッド内で内容が枠を押し広げないようにする */
  html body #cta .contact-final > *{ min-width:0 !important; }
  html body #cta .contact-final-left,
  html body #cta .contact-final-left > *{ max-width:100% !important; }
}

/* v90: スマホ見出しの文字サイズを調整し、不自然な折り返しを解消
   （「一緒に整理しません／か？」で割れていたため） */
@media (max-width:640px){
  html body #cta .contact-final-left h2{
    font-size:22px !important;
    line-height:1.55 !important;
    letter-spacing:-0.005em !important;
  }
  html body #cta .contact-final-left h2 .contact-title-main,
  html body #cta .contact-final-left h2 .contact-title-sub{
    display:block !important;
    text-wrap:balance;
  }
  html body #cta .contact-final-lead{
    text-wrap:pretty;
  }
}
@media (max-width:360px){
  html body #cta .contact-final-left h2{ font-size:20px !important; }
}

/* v91: スマホ見出しを文節で折り返す
   overflow-wrap:anywhere だと「お問い合／わせ」のように
   単語途中で割れるため、日本語の区切りで折り返す指定にする。
   （はみ出し防止のため min-width:0 は維持） */
@media (max-width:1199px){
  html body #cta .contact-final-left h2,
  html body #cta .contact-final-left h2 .contact-title-main,
  html body #cta .contact-final-left h2 .contact-title-sub,
  html body #cta .contact-title-sub{
    word-break:auto-phrase !important;
    overflow-wrap:break-word !important;
    line-break:strict !important;
  }
}

/* ═══════════════════════════════════════════════════
   v92: スマホのお問い合わせ左カラムを左揃えに
   中央揃えだと行ごとに読み始めの位置が動き、
   4行以上になると読みにくいため。
   ═══════════════════════════════════════════════════ */
@media (max-width:1199px){
  html body #cta .contact-final-left,
  html body #cta .contact-final-left h2,
  html body #cta .contact-final-left .contact-title-main,
  html body #cta .contact-final-left .contact-title-sub,
  html body #cta .contact-final-lead{
    text-align:left !important;
  }
  html body #cta .contact-final-lead{
    margin-left:0 !important; margin-right:0 !important; max-width:none !important;
  }
  /* 「お問い合わせのあとは」も左揃えで統一 */
  html body #cta .contact-flow-title{ text-align:left !important; }
  html body #cta .contact-flow-list b,
  html body #cta .contact-flow-list small{ text-align:left !important; }
  html body #cta .contact-assure-item{ text-align:left !important; }
  /* 中央寄せ用の余白を解除 */
  html body #cta .contact-flow{ text-align:left !important; }
}

/* ═══════════════════════════════════════════════════
   v94: 全体構想マップ（特設サイト向けの簡易版）
   詳細は別資料に譲り、ここでは「土台の上に機能が載る」
   構造と、外部連携の構想だけを短く伝える。
   ═══════════════════════════════════════════════════ */
.vision-section{ background:linear-gradient(180deg,#f8fbfa,#f2f8f6); }
.vision-header{ text-align:center; max-width:820px; margin:0 auto var(--sp-6,28px); }
.vision-map{ max-width:860px; margin:0 auto; }

.vmap-layer{
  background:#fff; border:1px solid var(--line,#e7eae8); border-radius:16px;
  padding:18px 20px;
}
.vmap-ext{ border-style:dashed; border-color:#e6d3a8; background:#fffdf7; }
.vmap-base{ background:linear-gradient(135deg,#f2faf7,#eaf5f1); border-color:#cfe6dd; }
.vmap-user{ background:linear-gradient(135deg,#fdf5f7,#fbeef2); border-color:#f0d9e0; }

.vmap-head{ display:flex; align-items:center; gap:10px; margin-bottom:13px; flex-wrap:wrap; }
.vmap-badge{
  font-size:11.5px; font-weight:800; letter-spacing:.05em;
  padding:4px 12px; border-radius:999px;
}
.vb-ext{ background:rgba(240,184,74,.18); color:#a97615; }
.vb-base{ background:rgba(94,168,156,.16); color:#3f7a6f; }
.vb-func{ background:rgba(126,184,212,.18); color:#4f88ab; }
.vb-user{ background:rgba(240,168,184,.20); color:#c25b78; }
.vmap-title{
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:15px; font-weight:800; color:var(--ink,#2d3a35);
}

.vmap-tiles{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.vmap-tiles li{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--line-soft,#f0f2f1); border-radius:999px;
  padding:8px 15px; font-size:13px; font-weight:700; color:var(--ink,#2d3a35);
}
.vmap-ext .vmap-tiles li{ border-style:dashed; border-color:#e6d3a8; background:#fffefa; }
.vmap-tiles li i{ font-size:13px; color:var(--teal-d,#5ea89c); }
.vmap-ext .vmap-tiles li i{ color:#c9a227; }
.vmap-user .vmap-tiles li i{ color:#d4879f; }

.vmap-tiles-func li{ border-radius:10px; }
.vt-now{ border-color:#f5dbe2 !important; background:rgba(240,168,184,.07) !important; }
.vt-next{ border-color:#cfe6dd !important; background:rgba(140,196,184,.08) !important; }
.vt-future{ border-color:#cfe0ea !important; background:rgba(126,184,212,.07) !important; }

.vmap-legend{ display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.vl{ font-size:11.5px; font-weight:700; color:var(--muted,#8a9591); display:inline-flex; align-items:center; gap:6px; }
.vl::before{ content:""; width:10px; height:10px; border-radius:3px; display:inline-block; }
.vl-now::before{ background:#f0a8b8; }
.vl-next::before{ background:#8cc4b8; }
.vl-future::before{ background:#7eb8d4; }

.vmap-note{
  margin:12px 0 0; font-size:12px; line-height:1.7; color:#a97615;
  background:rgba(240,184,74,.10); border-left:3px solid #f0b84a;
  padding:9px 12px; border-radius:8px;
}

.vmap-arrow{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 0;
}
.vmap-arrow span{
  font-size:12px; font-weight:800; color:var(--teal-dd,#3f7a6f);
  background:#fff; border:1px solid var(--line,#e7eae8);
  padding:5px 15px; border-radius:999px;
}
.vmap-arrow i{ color:var(--teal-d,#5ea89c); font-size:12px; }
.vmap-arrow-two span{ color:#4f88ab; }

@media (min-width:1200px){
  html body #vision .vision-header{ text-align:left !important; max-width:none !important; }
  html body #vision .vision-header p{ text-align:left !important; margin-left:0 !important; max-width:720px !important; }
  html body #vision .vision-header .brand-dots{ justify-content:flex-start !important; }
  html body #vision .vision-header .d-br{ display:none !important; }
  html body #vision .vision-header h2{ text-align:left !important; }
}
@media (max-width:640px){
  .vmap-layer{ padding:15px 14px; border-radius:14px; }
  .vmap-title{ font-size:14px; }
  .vmap-tiles li{ font-size:12.5px; padding:7px 12px; }
  .vmap-arrow span{ font-size:11.5px; }
}

/* ═══════════════════════════════════════════════════
   v96: 右カラムが狭く文字が読みにくい問題の修正
   左の見出しに396〜440px を固定で取られたうえ、
   右のカードを4列に並べていたため、
   ・導入ステップ カード112px（1行5字）
   ・課題カード   カード141px（1行9字）
   と、日本語の可読限界（25〜40字）を大きく下回っていた。
   横並びを解除し、1行あたりの文字数を確保する。
   ═══════════════════════════════════════════════════ */
@media (min-width:1200px){
  /* ── 見出し（左カラム）を細くし、本文側に幅を回す ── */
  html body #issues .issues-visual,
  html body #onboarding .onboarding-visual,
  html body #pricing .container,
  html body #faq .container{
    grid-template-columns:minmax(260px, 300px) minmax(0, 1fr) !important;
    gap:40px !important;
  }
  html body #strength .container,
  html body #trust .container{
    grid-template-columns:minmax(260px, 300px) minmax(0, 1fr) !important;
    gap:40px !important;
  }
  html body #issues .issues-header h2,
  html body #onboarding .onboarding-header h2,
  html body #pricing .section-head h2,
  html body #faq .section-head h2,
  html body #strength .why-head h2,
  html body #trust .trust-head h2{
    font-size:26px !important; line-height:1.5 !important;
  }
  html body #issues .issues-header p,
  html body #onboarding .onboarding-header p,
  html body #pricing .section-head p,
  html body #faq .section-head p,
  html body #strength .why-head p,
  html body #trust .trust-head p{
    font-size:14px !important; line-height:1.85 !important;
  }

  /* ── 課題：4列 → 2列（1行の文字数を確保） ── */
  html body #issues .issue-card-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:16px !important;
  }
  /* ── 効果：4列 → 2列 ── */
  html body #connect .benefit-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:16px !important;
  }
  /* ── 導入の流れ：横並びをやめ、縦に積む ── */
  html body #onboarding .onboarding-steps,
  html body #onboarding .flw-steps{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  html body #onboarding .flw-step{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:start !important;
    gap:16px !important;
    text-align:left !important;
    padding:18px 20px !important;
  }
  html body #onboarding .flw-step > *{ text-align:left !important; }
  html body #onboarding .flw-step p{ margin-left:0 !important; margin-right:0 !important; }
}

/* 大画面ではさらに本文側を広く */
@media (min-width:1600px){
  html body #issues .issues-visual,
  html body #onboarding .onboarding-visual,
  html body #pricing .container,
  html body #faq .container,
  html body #strength .container,
  html body #trust .container{
    grid-template-columns:minmax(280px, 320px) minmax(0, 1fr) !important;
  }
}

/* v97: 1行あたりの文字数を適正範囲（25〜45字）に揃える
   ・料金 3列281px（11字）→ 全幅で3列を確保
   ・効果 2列599px（48字）→ 3列にして詰めすぎを回避
   ・強み 2列428px（23字）→ 見出しを細くして確保 */
@media (min-width:1200px){
  /* 料金は横並びの比較が要るため、見出しを上に置いて全幅を使う */
  html body #pricing .container{
    display:block !important;
    grid-template-columns:none !important;
  }
  html body #pricing .section-head{
    position:static !important;
    grid-column:auto !important; grid-row:auto !important;
    margin:0 0 26px !important; max-width:760px !important;
  }
  html body #pricing .container > *{ grid-column:auto !important; }
  html body #pricing .pricing-plan-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:20px !important;
  }
  /* 効果は3列にして1行の文字数を抑える */
  html body #connect .benefit-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}

/* v98: 残るはみ出しの解消と、文字数の微調整 */
@media (min-width:1200px){
  /* FAQ見出しが左カラム(300px)に収まらず101pxはみ出していた */
  html body #faq .section-head h2{
    font-size:23px !important; word-break:auto-phrase !important;
  }
  /* 導入ステップの微小はみ出し（8px）を解消 */
  html body #onboarding .flw-step{ min-width:0 !important; overflow:hidden !important; }
  html body #onboarding .flw-step > *{ min-width:0 !important; }
  html body #onboarding .onboarding-steps,
  html body #onboarding .flw-steps{ min-width:0 !important; }

  /* 料金：カード内の余白を詰めて本文幅を稼ぐ */
  html body #pricing .pricing-plan-card{ padding-left:20px !important; padding-right:20px !important; }
  /* 強み：見出しをさらに細くして本文側に幅を回す */
  html body #strength .container{
    grid-template-columns:minmax(240px, 272px) minmax(0, 1fr) !important;
  }
}

/* v99: 導入の流れを「アイコン｜本文」の横並びに整える
   縦積みにした際、アイコンが中央に浮いて余白が目立っていたため。 */
@media (min-width:1200px){
  html body #onboarding .flw-step{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:20px !important;
    padding:20px 24px !important;
    text-align:left !important;
    flex-wrap:nowrap !important;
  }
  /* アイコンは左端に固定 */
  html body #onboarding .flw-step .flw-step-icon{
    order:1 !important; flex:0 0 auto !important;
    margin:0 !important;
    width:54px !important; height:54px !important;
    min-width:54px !important; min-height:54px !important;
  }
  /* STEP表示はアイコンの右 */
  html body #onboarding .flw-step .flw-badge,
  html body #onboarding .flw-step .flw-step-num{
    order:2 !important; flex:0 0 auto !important; margin:0 !important;
  }
  /* 見出しと本文は横に流す */
  html body #onboarding .flw-step h3,
  html body #onboarding .flw-step h4,
  html body #onboarding .flw-step .flw-step-title{
    order:3 !important; flex:0 0 auto !important; margin:0 !important; white-space:nowrap !important;
  }
  html body #onboarding .flw-step p{
    order:4 !important; flex:1 1 auto !important; margin:0 !important; min-width:0 !important;
  }
}

/* ═══════════════════════════════════════════════════
   v100: PCの2カラム化を解除し、見出しを上に戻す
   実測の結果、左カラムは見出しだけで大半が空白（FAQで1,274px、
   課題で464px）だった。空白のために本文幅を削って改行を増やす
   状態になっていたため、見出しを上に戻して本文に全幅を使う。
   ═══════════════════════════════════════════════════ */
@media (min-width:1200px){

  /* ── グリッドを解除して縦積みに戻す ── */
  html body #issues .issues-visual,
  html body #connect .solution-visual,
  html body #scenes .industry-scene-visual,
  html body #onboarding .onboarding-visual,
  html body #pricing .container,
  html body #faq .container,
  html body #strength .container,
  html body #trust .container{
    display:block !important;
    grid-template-columns:none !important;
    gap:0 !important;
  }

  /* ── 見出しを中央・上部に戻す ── */
  html body #issues .issues-header,
  html body #connect .solution-header,
  html body #scenes .industry-scene-header,
  html body #onboarding .onboarding-header,
  html body #pricing .section-head,
  html body #faq .section-head,
  html body #strength .why-head,
  html body #trust .trust-head{
    position:static !important;
    top:auto !important;
    grid-column:auto !important;
    grid-row:auto !important;
    text-align:center !important;
    max-width:820px !important;
    margin:0 auto 30px !important;
    padding:0 !important;
  }
  html body #issues .issues-header p,
  html body #connect .solution-header p,
  html body #scenes .industry-scene-header p,
  html body #onboarding .onboarding-header p,
  html body #pricing .section-head p,
  html body #faq .section-head p,
  html body #strength .why-head p,
  html body #trust .trust-head p{
    text-align:center !important;
    margin-left:auto !important; margin-right:auto !important;
    max-width:720px !important;
    font-size:15px !important;
  }
  html body #issues .issues-header h2,
  html body #connect .solution-header h2,
  html body #scenes .industry-scene-header h2,
  html body #onboarding .onboarding-header h2,
  html body #pricing .section-head h2,
  html body #faq .section-head h2,
  html body #strength .why-head h2,
  html body #trust .trust-head h2{
    text-align:center !important;
    font-size:32px !important;
    line-height:1.5 !important;
    margin-bottom:14px !important;
  }
  html body #issues .issues-header .brand-dots,
  html body #connect .solution-header .brand-dots,
  html body #scenes .industry-scene-header .brand-dots,
  html body #onboarding .onboarding-header .brand-dots,
  html body #pricing .section-head .brand-dots,
  html body #faq .section-head .brand-dots,
  html body #strength .why-head .brand-dots,
  html body #trust .trust-head .brand-dots{
    justify-content:center !important;
    margin-left:auto !important; margin-right:auto !important;
  }
  /* 中央揃えに戻すので、強制改行を再び有効にする */
  html body #issues .issues-header h2 .d-br,
  html body #connect .solution-header h2 .d-br,
  html body #strength .why-head h2 .d-br,
  html body #trust .trust-head h2 .d-br{
    display:inline !important;
  }

  /* 右カラム指定を解除 */
  html body #issues .issues-visual > *,
  html body #connect .solution-visual > *,
  html body #scenes .industry-scene-visual > *,
  html body #onboarding .onboarding-visual > *,
  html body #pricing .container > *,
  html body #faq .container > *,
  html body #strength .container > *,
  html body #trust .container > *{
    grid-column:auto !important;
  }

  /* ── 全幅を活かしてカードを横に並べる ── */
  html body #issues .issue-card-grid{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:20px !important;
  }
  html body #connect .benefit-grid{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:20px !important;
  }
  html body #strength .why-grid{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:20px !important;
  }
  html body #pricing .pricing-plan-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:24px !important;
  }
  /* 導入の流れは横1列（アイコン｜STEP｜見出し｜説明）を維持 */
  html body #onboarding .onboarding-steps,
  html body #onboarding .flw-steps{
    grid-template-columns:1fr !important;
    max-width:1000px !important; margin-left:auto !important; margin-right:auto !important;
  }
  /* FAQは読みやすい幅に収める */
  html body #faq .faq-list2{
    max-width:880px !important; margin-left:auto !important; margin-right:auto !important;
  }
  /* 実績も中央に */
  html body #trust .trust-block{ max-width:940px !important; margin-left:auto !important; margin-right:auto !important; }
}

/* v101: 列数を内容量に合わせて最適化
   4列にすると1カード280px前後となり、説明文の多い
   「強み」は10字9行になってしまうため列数を減らす。 */
@media (min-width:1200px){
  /* 強み：説明文が長いので2列（1行25字前後を確保） */
  html body #strength .why-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    max-width:1000px !important; margin-left:auto !important; margin-right:auto !important;
  }
  /* 課題：見出し＋箇条書き中心なので3列 */
  html body #issues .issue-card-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
  /* 効果：短文なので3列 */
  html body #connect .benefit-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}

/* v102: カード枚数に合った列数へ
   課題4枚・効果4枚を3列にすると「3＋1」で余白が目立つため、
   枚数どおりの列数にして1行に収める。 */
@media (min-width:1200px){
  html body #issues .issue-card-grid{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:16px !important;
  }
  html body #connect .benefit-grid{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:16px !important;
  }
  /* 4列でも読めるよう、カード内の余白を詰める */
  html body #issues .issue-v-card{ padding:20px 18px !important; }
  html body #connect .benefit-card{ padding:20px 18px !important; }
}

/* ═══════════════════════════════════════════════════
   v106: お問い合わせを会社サイトのフォームへ誘導
   個人情報の取扱い手続きのため、サイト内フォームは廃止し
   株式会社エフコムの既存フォームへ案内する。
   ═══════════════════════════════════════════════════ */
.contact-link-card{
  background:#fff; border-radius:20px; padding:32px 30px;
  box-shadow:0 12px 34px -18px rgba(20,40,35,.35);
}
.clc-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.clc-head i{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:rgba(94,168,156,.14); color:var(--teal-dd,#3f7a6f); font-size:19px; flex:0 0 auto;
}
.clc-title{
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:19px; font-weight:900; color:var(--ink,#2d3a35); margin:0;
}
.clc-desc{ font-size:14.5px; line-height:1.85; color:var(--text,#4a5853); margin:0 0 22px; }

.clc-btn{
  display:flex; align-items:center; justify-content:center; gap:11px;
  width:100%; min-height:58px; padding:16px 24px;
  background:linear-gradient(120deg,#5ea89c,#4a8f83);
  color:#fff; text-decoration:none; border-radius:999px;
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:16.5px; font-weight:800;
  box-shadow:0 12px 26px -12px rgba(74,143,131,.65);
  transition:transform .18s ease, box-shadow .18s ease;
}
.clc-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(74,143,131,.7); }
.clc-btn i{ font-size:15px; }

.clc-guide{
  margin-top:22px; padding:18px 20px;
  background:#fafcfb; border:1px solid var(--line-soft,#f0f2f1); border-radius:14px;
}
.clc-guide-title{
  font-family:var(--font-jp,'Zen Maru Gothic',sans-serif);
  font-size:13.5px; font-weight:800; color:var(--ink,#2d3a35); margin:0 0 10px;
}
.clc-guide-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.clc-guide-list li{
  position:relative; padding-left:20px;
  font-size:13.5px; line-height:1.8; color:var(--text,#4a5853);
}
.clc-guide-list li::before{
  content:"・"; position:absolute; left:2px; top:0; color:var(--teal-d,#5ea89c); font-weight:900;
}
.clc-guide-list b{ color:var(--teal-dd,#3f7a6f); font-weight:800; }

.clc-note{
  margin:16px 0 0; font-size:12.5px; line-height:1.75; color:var(--muted,#8a9591);
  display:flex; align-items:flex-start; gap:7px;
}
.clc-note i{ margin-top:4px; flex:0 0 auto; }

@media (max-width:640px){
  .contact-link-card{ padding:24px 20px; border-radius:16px; }
  .clc-title{ font-size:17px; }
  .clc-desc{ font-size:13.5px; margin-bottom:18px; }
  .clc-btn{ font-size:15px; min-height:54px; padding:14px 18px; }
  .clc-guide{ padding:16px; }
}