/* =====================================================
   Abad HP – terasu-dental 調（白・グレー・イエロー）
   v17
   ===================================================== */

:root{
  --bg:        #fafafa;
  --bg-soft:   #f4f4f5;
  --bg-white:  #ffffff;
  --text:      #18181b;
  --muted:     #52525b;
  --muted-2:   #71717a;
  --border:    rgba(0,0,0,.06);
  --shadow:    0 4px 24px rgba(0,0,0,.055);
  --shadow-2:  0 20px 50px rgba(24,24,27,.08);
  --radius:    14px;
  --radius-lg: 28px;
  --container: 1120px;
  --pad:       24px;
  --accent:    #b45309;
  --accent-2:  #d97706;
  --accent-3:  #fbbf24;
  --accent-light: #fef3c7;
  --gray-illu: #e4e4e7;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
  --font-ja:   "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --font-en:   "Damion", "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-ja);
  color: var(--text);
  background: var(--bg);
  line-height: 1.85;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* 旧ダーク背景は非表示 */
.fixed-bg,
.fixed-bg-net{ display:none; }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  padding:10px 14px; border-radius:10px; background:#fff;
  box-shadow:var(--shadow); z-index:9999;
}

/* ─────────────────────────────────────
   Campaign Banner
───────────────────────────────────── */
.campaign-banner{
  background: #1a1408;
  color: #fff;
  padding: 13px var(--pad);
  line-height: 1.55;
}
.campaign-banner-inner{
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 12px 20px;
}
.campaign-banner-tag{
  flex-shrink:0; font-size:12px; font-weight:900; letter-spacing:.12em;
  background:#dc2626; color:#fff; padding:6px 14px; border-radius:6px;
}
.campaign-banner-copy{ margin:0; text-align:center; font-size:13px; }
.campaign-banner-head{ display:block; font-size:14px; margin-bottom:3px; }
.campaign-banner-detail{ font-size:13px; opacity:.9; }
.campaign-banner-strong{ color: var(--accent-3); }
.campaign-banner-btn{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; letter-spacing:.04em;
  padding:9px 20px; border-radius:999px;
  background: var(--accent-2); color:#fff;
  transition: transform .2s var(--ease);
}
.campaign-banner-btn:hover{ transform:translateY(-2px); }
@media(max-width:560px){
  .campaign-banner{ padding:10px 14px; }
  .campaign-banner-copy{ font-size:12px; }
}

/* ─────────────────────────────────────
   Header
───────────────────────────────────── */
.site-header{
  position: sticky; top:0; z-index:1000;
  height: 92px; display:flex; align-items:center;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color: var(--border);
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.header-inner{
  display:flex; align-items:center;
  justify-content:space-between; gap:16px; width:100%;
}
.brand{
  display:flex; align-items:center; gap:14px; min-width:280px;
}
.brand-mark{
  width:163px; height:97px;
  align-self:center; border-radius:14px;
  padding:0; font-size:0; color:transparent;
  background-image: url("../img/logo.png");
  background-size:contain; background-origin:content-box;
  background-position:center; background-repeat:no-repeat;
  flex-shrink:0; background-color:transparent; border:none; box-shadow:none;
}
.brand-text{ display:none; }
.brand-text strong{ font-size:16px; letter-spacing:.02em; }
.brand-text span{ font-size:11px; color:var(--muted-2); font-family:var(--font-en); letter-spacing:.12em; text-transform:uppercase; margin-top:4px; }

/* Nav */
.nav{ display:flex; align-items:center; gap:28px; }
.nav-links{
  display:flex; gap:22px; align-items:center;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:14px; font-weight:700; color:var(--text);
  opacity:.85; position:relative; padding:8px 2px;
  transition: opacity .2s;
}
.nav-links a:hover{ opacity:1; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:4px;
  width:100%; height:2px;
  background: var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition: transform .35s var(--ease); border-radius:999px;
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg-white);
  cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{
  display:block; width:20px; height:2px;
  background:var(--text); border-radius:2px;
  position:relative; transition:.3s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; display:block;
  width:20px; height:2px; background:var(--text); border-radius:2px;
  transition:.3s var(--ease);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ bottom:-6px; }

/* ─────────────────────────────────────
   Buttons
───────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; font-size:14px; padding:14px 22px;
  border-radius:12px; border:1.5px solid transparent;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              background .4s var(--ease), color .4s var(--ease);
  min-height:44px; cursor:pointer; white-space:nowrap;
}
.btn-primary{
  background: var(--accent-2); color:#fff;
  box-shadow: 0 6px 24px rgba(217,119,6,.22);
}
.btn-primary:hover{
  background: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(217,119,6,.28);
}
.btn-ghost{
  background: #fff; color: var(--text);
  border:1.5px solid rgba(24,24,27,.18);
}
.btn-ghost:hover{
  background: var(--bg-soft);
  border-color: var(--accent-2);
  color: var(--accent-2);
  transform:translateY(-3px);
}
.arrow{ display:inline-block; transition:transform .3s var(--ease); }
.arrow::after{ content:"→"; }
.btn:hover .arrow{ transform:translateX(4px); }

/* ─────────────────────────────────────
   Mobile Drawer
───────────────────────────────────── */
.mobile-drawer{
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.35); backdrop-filter:blur(4px);
}
.mobile-drawer.is-open{ display:block; }
.drawer-panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(320px, 85vw); background:var(--bg-white);
  padding:28px 24px; overflow-y:auto;
  animation: slideInRight .35s var(--ease) both;
}
@keyframes slideInRight{
  from{ transform:translateX(100%); opacity:0; }
  to{   transform:translateX(0);    opacity:1; }
}
.drawer-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:32px;
}
.drawer-close{
  width:40px; height:40px; border-radius:10px; border:1.5px solid var(--border);
  background:transparent; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text);
}
.drawer-links{
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;
}
.drawer-links a{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-radius:12px;
  border:1px solid var(--border); background:var(--bg);
  font-weight:700; font-size:15px; min-height:44px;
  transition:background .2s, transform .2s;
}
.drawer-links a:hover{ background:var(--bg-soft); transform:translateX(4px); }

/* ─────────────────────────────────────
   HERO — Full-screen illustrated
───────────────────────────────────── */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex; align-items:center;
  overflow:hidden;
  background:#ffffff;
  padding:0;
}

/* ── Canvas: 全画面イラスト背景レイヤー ── */
.hero-canvas{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}

/* ── カラーブロブ ── */
.hblob{
  position:absolute; will-change:transform;
}
.hblob-pink{
  width:560px; height:520px;
  top:-150px; left:-120px;
  background:#e4e4e7;
  border-radius:44% 56% 58% 42% / 46% 44% 56% 54%;
  animation:blobBreath 7.5s ease-in-out infinite;
  opacity:.85;
}
.hblob-teal{
  width:420px; height:420px;
  bottom:-110px; right:-110px;
  background:#f4f4f5;
  border-radius:50%;
  animation:blobBreath 8.5s ease-in-out 2s infinite;
}
.hblob-green{
  width:310px; height:280px;
  bottom:-70px; left:260px;
  background:#fef9c3;
  border-radius:54% 46% 40% 60% / 52% 58% 42% 48%;
  animation:blobBreath 9.5s ease-in-out 4s infinite;
  opacity:.9;
}
.hblob-yellow{
  width:240px; height:220px;
  top:15px; right:520px;
  background:#fde68a;
  border-radius:45% 55% 62% 38% / 50% 46% 54% 50%;
  animation:blobBreath 6.5s ease-in-out 1s infinite;
  opacity:.75;
}
.hero-honeycomb{
  position:absolute;
  z-index:1;
  top:18%;
  right:8%;
  opacity:.9;
  animation:floatDeco 5.5s ease-in-out 1s infinite;
  pointer-events:none;
}
.hero-sphere{
  position:absolute;
  z-index:1;
  width:min(200px, 18vw);
  height:min(200px, 18vw);
  border-radius:50%;
  right:14%;
  top:12%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 50%, #fde68a 0%, #d4d4d8 55%, #a1a1aa 100%);
  box-shadow:
    inset -12px -16px 28px rgba(0,0,0,.07),
    0 24px 48px rgba(24,24,27,.1);
  animation:floatDeco 6s ease-in-out .3s infinite;
  pointer-events:none;
}
@keyframes blobBreath{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%{     transform:scale(1.055) rotate(4deg); }
}

/* ── 装飾要素（彩度を抑え terasu 調に） ── */
.hdeco{ position:absolute; pointer-events:none; z-index:1; opacity:.32; filter:saturate(.55); }
.hdeco-dots-1   { top:22%;    left:20%;   animation:floatDeco 4.2s ease-in-out       infinite; }
.hdeco-hearts   { top:36%;    left:2.5%;  animation:floatDeco 5.2s ease-in-out 2.2s  infinite; }
.hdeco-arrows   { bottom:20%; left:13%;   animation:floatDeco 5s   ease-in-out .8s   infinite; }
.hdeco-circles  { top:10%;    right:22%;  animation:floatDeco 5.5s ease-in-out 1.3s  infinite; }
.hdeco-stars    { top:44%;    right:42%;  animation:floatDeco 3.8s ease-in-out .5s   infinite; }
.hdeco-squiggles{ bottom:10%; right:12%;  animation:floatDeco 4.8s ease-in-out 1.8s  infinite; }
.hdeco-dotgrid  { bottom:28%; right:30%;  animation:floatDeco 4s   ease-in-out 1s    infinite; }
@keyframes floatDeco{
  0%,100%{ transform:translateY(0); }
  50%{     transform:translateY(-12px); }
}

/* ── メインアートワーク ── */
.hero-artwork{
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:500px;
  animation:floatArtwork 6s ease-in-out infinite;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.1));
}
.artwork-pc{ display:block; width:100%; }
.artwork-sp{
  position:absolute;
  bottom:-16px;
  right:-50px;
  width:126px;
  animation:floatSP 4.5s ease-in-out 1.2s infinite;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.13));
}
@keyframes floatArtwork{
  0%,100%{ transform:translateY(-50%) rotate(-1deg); }
  50%{     transform:translateY(calc(-50% - 16px)) rotate(1deg); }
}
@keyframes floatSP{
  0%,100%{ transform:rotate(5deg) translateY(0); }
  50%{     transform:rotate(3deg) translateY(-12px); }
}

/* ── テキスト（コンテンツレイヤー） ── */
.hero .container{
  position:relative; z-index:3;
  padding-top:90px; padding-bottom:70px;
}
.hero-copy{ max-width:530px; }

.hero-script-en{
  font-family:"Pacifico", cursive;
  font-size:clamp(36px, 5.2vw, 72px);
  line-height:1.22; color:#27272a;
  margin:0 0 20px; letter-spacing:-.01em;
}
.hero-ja-main{
  font-family:var(--font-ja);
  font-size:clamp(20px, 2.1vw, 30px);
  font-weight:700; color:var(--text);
  margin:0 0 20px; line-height:1.5;
  letter-spacing:-.02em;
}
.hero-desc{
  font-size:14px; color:var(--muted); line-height:2; margin:0 0 32px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* 旧ヒーロー要素は使わない */
.hero-grid,.hero-card-wrap,.hero-tag-en,
.hero h1,.hero-sub,.hero-area-line,.hero-intro-line,
.hero-text-col,.hero-illus-col{ display:none; }

/* ─────────────────────────────────────
   Section base
───────────────────────────────────── */
.section{
  padding: 100px 0;
  position:relative;
}
.section.soft{ background: var(--bg-soft); }
.plain-section{ background:transparent; }

/* Section title */
.section-title{
  text-align:center; margin-bottom:64px;
}
.section-title .en{
  display:block;
  font-family:var(--font-en); font-size:11px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.section-title h2{
  font-family:var(--font-ja);
  font-size: clamp(24px, 3vw, 38px);
  font-weight:700; color:var(--text);
  margin:0 0 20px; letter-spacing:-.02em; line-height:1.35;
}
.section-title .lead{
  color:var(--muted); font-size:15px; line-height:2;
  max-width:600px; margin:0 auto;
}

/* Grids */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* Cards */
.card{
  background:var(--bg-white);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  border:1px solid var(--border);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-2);
  border-color: rgba(217,119,6,.15);
}
.card h3{
  font-family:var(--font-ja);
  font-size:17px; font-weight:700; margin:0 0 12px; color:var(--text);
}
.card p{ font-size:14px; line-height:1.9; color:var(--muted); margin:0; }

/* tag / pill */
.tag{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:700; letter-spacing:.07em;
  background:var(--accent-2); color:#fff;
  padding:4px 10px; border-radius:6px; text-transform:uppercase;
}
.pill{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:700;
  background:rgba(251,191,36,.12); color:var(--accent);
  padding:4px 10px; border-radius:6px; border:1px solid rgba(217,119,6,.22);
}

/* ─────────────────────────────────────
   Promise (Our Promise) ― blob grid
───────────────────────────────────── */
.promise-blob-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.blob-reveal{ min-width:0; }
.blob-card{
  background:var(--bg-white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden; min-height:260px; position:relative;
}
.blob-card::before{
  content:""; position:absolute;
  top:-40px; right:-40px; width:120px; height:120px;
  background:var(--accent-light); border-radius:50%; opacity:.5;
}
.blob-card-inner{
  padding:36px 28px;
  background-image:var(--blob-bg-image,none);
  background-size:cover; background-position:center;
  background-repeat:no-repeat;
  min-height:260px; position:relative; z-index:1;
}
.blob-card-inner::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(250,249,247,.75);
  border-radius: inherit;
}
.blob-card-inner > *{ position:relative; z-index:1; }
.kicker{
  font-family:var(--font-en); font-size:12px; font-weight:900;
  letter-spacing:.15em; color:var(--accent); margin-bottom:12px; display:block;
}
.blob-card h3{
  font-family:var(--font-serif);
  font-size:19px; font-weight:700; color:var(--text); margin:0 0 12px;
}
.blob-card p{ font-size:14px; line-height:1.9; color:var(--muted); margin:0; }

/* ─────────────────────────────────────
   Pricing
───────────────────────────────────── */
#pricing .section-title{ margin-bottom:48px; }

.pricing-block{
  background:var(--bg-white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px; margin-bottom:24px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pricing-block:hover{
  box-shadow: 0 8px 36px rgba(166,124,58,.09);
}
.pricing-block-label{
  display:flex; align-items:center; gap:16px;
  margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--border);
}
.pricing-block-badge{
  font-size:12px; font-weight:900; letter-spacing:.08em;
  padding:6px 16px; border-radius:999px; flex-shrink:0;
}
.badge-creation{ background:#27272a; color:#fbbf24; }
.badge-monthly{  background:#3f3f46; color:#fde68a; }
.badge-app{      background:#52525b; color:#f4f4f5; }
.pricing-block-sub{ font-size:14px; color:var(--muted); margin:0; }

.option-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.option-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

.option-item{
  padding:24px 20px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--bg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.option-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.option-item h4{ font-size:15px; font-weight:800; margin:0 0 8px; color:var(--text); }
.option-price{
  font-size:26px; font-weight:900; color:var(--accent);
  margin:0 0 8px; letter-spacing:-.02em;
}
.option-price small{ font-size:13px; font-weight:700; color:var(--muted); }
.option-item p{ margin:0; font-size:13px; line-height:1.9; color:var(--muted); }
.option-case{
  display:inline-block; margin-top:10px; padding:6px 10px;
  border-radius:8px; font-size:11px; line-height:1.6;
  color:#5c4a10; font-style:normal; font-weight:700;
  background:#fde68a; border:1px solid rgba(245,158,11,.4);
}

/* おすすめセット */
.pricing-recommend{
  position:relative; margin:0 0 24px; padding:44px;
  border-radius:var(--radius-lg);
  background: linear-gradient(155deg, #27272a 0%, #18181b 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 60px rgba(24,24,27,.18);
}
.pricing-recommend-badge{
  position:absolute; top:-14px; left:40px;
  background:var(--accent-2); color:#fff;
  font-size:11px; font-weight:900; letter-spacing:.07em;
  padding:5px 18px; border-radius:999px;
  box-shadow:0 4px 14px rgba(201,168,76,.4);
}
.pricing-recommend-inner{
  display:flex; align-items:flex-start; gap:48px;
}
.pricing-recommend-left{ flex:1; }
.pricing-recommend-left h3{
  margin:0 0 6px; font-size:22px; font-weight:900; letter-spacing:-.02em;
}
.pricing-recommend-sub{ margin:0 0 16px; font-size:14px; opacity:.88; }
.pricing-check-list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;
}
.pricing-check-list li{
  font-size:14px; padding-left:22px; position:relative; opacity:.95;
}
.pricing-check-list li::before{
  content:"✓"; position:absolute; left:0; font-weight:900; color:#fbbf24;
}
.pricing-recommend-right{
  flex-shrink:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.pricing-recommend-price{
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.price-strike{ font-size:13px; opacity:.65; text-decoration:line-through; }
.pricing-recommend-price strong{
  font-size:38px; font-weight:900; letter-spacing:-.03em; display:block; line-height:1.1;
}
.price-note{ font-size:12px; opacity:.82; }
.pricing-recommend .btn-primary{
  background:var(--accent-3); color:#18181b; font-weight:900;
  box-shadow:0 8px 28px rgba(251,191,36,.35);
}
.pricing-recommend .btn-primary:hover{ background:#fde68a; color:#18181b; }

/* ─────────────────────────────────────
   Works — 無限横スクロール ＋ 詳細グリッド
───────────────────────────────────── */
.section-works{ padding-bottom:88px; }
.works-marquee-outer{
  width:100%;
  margin: 8px 0 56px;
  position:relative;
}
.works-marquee-outer::before,
.works-marquee-outer::after{
  content:"";
  position:absolute; top:0; bottom:0; width:72px; z-index:2; pointer-events:none;
}
.works-marquee-outer::before{
  left:0;
  background:linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.works-marquee-outer::after{
  right:0;
  background:linear-gradient(-90deg, var(--bg) 0%, transparent 100%);
}
.works-marquee-viewport{
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.works-marquee-scroll{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:worksMarquee 55s linear infinite;
}
.works-marquee-outer:hover .works-marquee-scroll{
  animation-play-state:paused;
}
@keyframes worksMarquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.works-marquee-segment{
  display:flex;
  align-items:stretch;
  gap:20px;
  padding-right:20px;
}
.works-marquee-fig{
  margin:0;
  flex:0 0 auto;
  width:clamp(260px, 32vw, 380px);
}
.works-marquee-frame{
  display:block;
  height:100%;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(24,24,27,.08);
  transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.works-marquee-frame:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 20px 50px rgba(24,24,27,.12);
}
.works-marquee-frame .work-thumb{
  height:100%;
  min-height:0;
  aspect-ratio:16/10;
  border:none;
  border-radius:0;
}

/* 業種イメージ（プレースホルダー） */
.work-thumb-mock{
  position:relative;
  aspect-ratio:16/10;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 12px 36px rgba(24,24,27,.07);
  background-size:cover;
}
.work-thumb-mock::before{
  content:"";
  position:absolute; inset:0;
  opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0L52 14v28L28 56 4 42V14z' fill='none' stroke='%23c9a84c' stroke-width='1' opacity='.4'/%3E%3Cpath d='M28 44l24 14v28L28 100 4 86V58z' fill='none' stroke='%23a1a1aa' stroke-width='1' opacity='.35'/%3E%3C/svg%3E");
  background-size:56px 100px;
  pointer-events:none;
}
.work-thumb-mock::after{
  content:"";
  position:absolute;
  left:7%; right:7%; top:16%; bottom:11%;
  background:linear-gradient(180deg, #f4f4f5 0%, #f4f4f5 10%, #fff 10%, #fafafa 100%);
  border-radius:8px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  pointer-events:none;
}
.work-mock-epil{
  background:linear-gradient(145deg, #fce7f3 0%, #faf5ff 40%, #e4e4e7 100%);
}
.work-mock-salon{
  background:linear-gradient(145deg, #fef3c7 0%, #fffbeb 50%, #f4f4f5 100%);
}
.work-mock-bakery{
  background:linear-gradient(145deg, #fed7aa 0%, #fef9c3 45%, #ffedd5 100%);
}
.work-mock-zakka{
  background:linear-gradient(145deg, #e7e5e4 0%, #f5f5f4 55%, #e4e4e7 100%);
}
.work-mock-barber{
  background:linear-gradient(145deg, #3f3f46 0%, #52525b 100%);
}
.work-mock-barber::after{
  background:linear-gradient(180deg, #3f3f46 0%, #3f3f46 10%, #fafafa 10%, #fff 100%);
}
.work-mock-piano{
  background:linear-gradient(145deg, #1c1917 0%, #44403c 100%);
}
.work-mock-piano::after{
  background:linear-gradient(180deg, #292524 0%, #292524 10%, #fafaf9 10%, #fff 100%);
}
.work-mock-studio{
  background:linear-gradient(145deg, #27272a 0%, #52525b 100%);
}
.work-mock-studio::after{
  background:linear-gradient(180deg, #3f3f46 0%, #3f3f46 10%, #f4f4f5 10%, #fafafa 100%);
}

/* 詳細カード（従来の文言ブロック） */
.works-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  max-width:900px;
  margin:0 auto;
}
.works-detail-grid .work-slide{
  flex:unset;
  min-width:0;
  margin:0;
}
@media(max-width:820px){
  .works-detail-grid{ grid-template-columns:1fr; }
  .works-marquee-segment{ gap:14px; padding-right:14px; }
  .works-marquee-fig{ width:min(78vw, 320px); }
}

.work-card{
  display:flex; flex-direction:column; gap:12px; height:100%;
}
a.work-card{ cursor:pointer; }
a.work-card:hover .work-thumb{ transform:scale(1.02); }

.work-thumb{
  border-radius:var(--radius);
  aspect-ratio:16/10;
  background: var(--bg-soft);
  overflow:hidden;
  border:1px solid var(--border);
  background-image: var(--thumb-bg-image, none);
  background-size:cover; background-position:center top;
  transition: transform .5s var(--ease-soft);
}
.work-thumb-empty{
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); font-size:13px; letter-spacing:.1em;
  font-family:var(--font-en); border:2px dashed var(--border);
}
.work-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.work-card h3{ font-size:16px; font-weight:700; margin:0; color:var(--text); }
.work-card p{ font-size:13px; color:var(--muted); margin:0; line-height:1.7; }

/* ─────────────────────────────────────
   Testimonials / Founder
───────────────────────────────────── */
.founder-card h3{
  font-family:var(--font-serif); font-size:20px; font-weight:700; margin:0 0 16px;
}

/* ─────────────────────────────────────
   FAQ
───────────────────────────────────── */
.faq-list{
  max-width:760px; margin:0 auto;
  display:flex; flex-direction:column; gap:8px;
}
.faq-list details{
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--bg-white);
}
.faq-list summary{
  padding:18px 20px; font-weight:700; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  list-style:none; transition:background .2s;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list details[open] summary{ background:rgba(166,124,58,.05); }
.faq-list summary::after{
  content:"+"; flex-shrink:0; width:26px; height:26px;
  border-radius:50%; border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; color:var(--accent);
  transition:transform .3s var(--ease);
}
.faq-list details[open] summary::after{ content:"−"; }
/* FAQ smooth open/close */
.faq-content{
  display:grid; grid-template-rows:0fr;
  transition: grid-template-rows .35s var(--ease);
  overflow:hidden;
}
.faq-list details[open] .faq-content{
  grid-template-rows:1fr;
}
.faq-list details.is-closing .faq-content{
  grid-template-rows:0fr;
}
.faq-content > *{ overflow:hidden; }
.faq-content p{ margin:0; padding:4px 20px 18px; font-size:14px; line-height:1.9; color:var(--muted); }

/* ─────────────────────────────────────
   Blog
───────────────────────────────────── */
.blog-panel{
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:36px;
}
.blog-section-lead{ max-width:560px; margin:0 auto; }
.blog-themes-title{ font-size:15px; font-weight:700; margin:0 0 16px; }
.blog-feed-loading,.blog-feed-empty{ font-size:13px; color:var(--muted); }
.blog-feed-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; }
.blog-feed-list li a{
  display:block; font-size:14px; color:var(--text);
  padding:11px 4px; border-bottom:1px solid var(--border);
  transition:color .2s, padding-left .2s;
}
.blog-feed-list li:last-child a{ border-bottom:none; }
.blog-feed-list li a:hover{ color:var(--accent); padding-left:8px; }

/* ─────────────────────────────────────
   CTA (Get Started) section
───────────────────────────────────── */
.cta-light{
  background: var(--accent);
  color:#fff;
  border-radius:28px;
  margin:0 var(--pad) 60px;
}
.cta-light .section-title .en{ color:rgba(255,255,255,.65); }
.cta-light .section-title h2{ color:#fff; }
.cta-light .lead{ color:rgba(255,255,255,.88); margin-bottom:28px; display:block; }
.cta-light .btn-primary{
  background:#fff; color:var(--accent);
  box-shadow:0 6px 24px rgba(0,0,0,.14);
}
.cta-light .btn-primary:hover{ background:rgba(255,255,255,.9); }

/* ─────────────────────────────────────
   Fixed side tabs (PC: 右縦タブ / SP: 下部バー)
───────────────────────────────────── */
.contact-side-tabs{
  position:fixed; right:0; top:50%;
  transform:translateY(-50%); z-index:1200;
  display:flex; flex-direction:column; gap:3px;
}
.contact-tab{
  writing-mode:vertical-rl; text-orientation:mixed;
  padding:24px 13px; font-size:13px; font-weight:900;
  letter-spacing:.13em; border-radius:10px 0 0 10px;
  color:#fff; white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-tab:hover{ transform:translateX(-4px); }
.contact-tab--line{
  background:#06c755;
  box-shadow:-3px 0 18px rgba(6,199,85,.3);
}
.contact-tab--line:hover{ box-shadow:-5px 0 24px rgba(6,199,85,.44); }
.contact-tab--form{
  background:var(--accent);
  box-shadow:-3px 0 16px rgba(166,124,58,.28);
}
.contact-tab--form:hover{ box-shadow:-5px 0 22px rgba(166,124,58,.42); }

/* ─────────────────────────────────────
   Footer
───────────────────────────────────── */
.site-footer{
  background:#1a1408; color:#fff;
  padding:80px 0 0; position:relative;
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:80px; padding-bottom:60px;
}
.footer-logo-block{ max-width:none; flex:1 1 auto; }
.footer-logo-block .brand{ margin-bottom:20px; }
.footer-msg{
  color:rgba(255,255,255,.55); line-height:1.9; font-size:13px;
  letter-spacing:.03em; white-space:normal;
}
.site-footer .footer-nav{ display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.site-footer .footer-nav a{
  display:block; padding:8px 0;
  color:rgba(255,255,255,.65); font-weight:700; font-size:14px;
  transition:color .25s;
}
.site-footer .footer-nav a:hover{ color:var(--accent-3); }
.footer-bottom{
  margin-top:0; padding:24px 0;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:11px; color:rgba(255,255,255,.35);
  text-align:center; letter-spacing:.1em; font-family:var(--font-en);
}
.footer-legal{
  display:flex; flex-wrap:wrap; gap:8px 18px;
  justify-content:center; align-items:center;
  margin-bottom:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-legal a{
  font-size:11px; font-weight:600; color:rgba(255,255,255,.45);
  letter-spacing:.02em; transition:color .25s;
}
.footer-legal a:hover{ color:var(--accent-3); }
.site-footer .brand-mark{ filter:brightness(1.4) contrast(.9); }
.site-footer .brand-text strong{ color:#fff; font-size:18px; }
.site-footer .brand-text span{   color:rgba(255,255,255,.45); font-size:12px; letter-spacing:.08em; }

/* ─────────────────────────────────────
   Reveal animations
───────────────────────────────────── */
.rv{
  opacity:0; transform:translateY(28px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.rv.in{ opacity:1; transform:translateY(0); }
.rv-image{
  opacity:0; filter:blur(12px);
  transition: opacity 1.1s var(--ease), filter 1.1s var(--ease);
}
.rv-image.in{ opacity:1; filter:blur(0); }

/* ─────────────────────────────────────
   Split text animation (JS-driven)
───────────────────────────────────── */
.split{ display:block; }
.split .char{
  display:inline-block;
  opacity:0;
  transform:translate3d(var(--tx,0px), var(--ty,1.35em), 0) rotate(var(--rot,0deg));
  filter:blur(var(--blur,10px));
  will-change:transform,opacity,filter;
}
.split.split-in .char{
  animation:charIn 1.35s cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--d,0ms);
}
@keyframes charIn{
  0%{
    opacity:0;
    transform:translate3d(var(--tx,0px), var(--ty,1.6em), 0) rotate(var(--rot,0deg));
    filter:blur(var(--blur,14px));
  }
  65%{
    opacity:1;
    transform:translate3d(0, -.10em, 0) rotate(0deg);
    filter:blur(0px);
  }
  100%{
    opacity:1;
    transform:translate3d(0, 0, 0) rotate(0deg);
    filter:blur(0px);
  }
}

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  .btn,.card{ transition:none; }
  .split .char{ opacity:1; transform:none; filter:none; transition:none; }
  .hblob,.hdeco,.hero-artwork,.artwork-sp,.hero-honeycomb,.hero-sphere{ animation:none; }
  .hero-artwork{ transform:translateY(-50%); }
  .works-marquee-scroll{ animation:none !important; }
}

/* ─────────────────────────────────────
   Sub-pages (page-hero, legal, etc.)
───────────────────────────────────── */
.page-hero{ padding:64px 0 28px; }
.breadcrumbs{ color:var(--muted-2); font-size:13px; }
.page-hero h1{
  margin:12px 0 10px;
  font-size:clamp(26px, 3.8vw, 42px);
  font-weight:700; font-family:var(--font-serif);
}
.page-hero p{
  color:var(--muted); font-size:16px;
  margin:0; line-height:1.9;
}
/* Legal doc */
.legal-doc{ max-width:820px; margin:0 auto; text-align:left; }
.legal-doc .legal-meta{ margin:0 0 20px; font-size:13px; color:var(--muted-2); line-height:1.6; }
.legal-doc h2{
  margin:28px 0 10px; font-size:17px; font-weight:800; color:var(--text);
}
.legal-doc h2:first-of-type{ margin-top:0; }
.legal-doc h3{ margin:18px 0 8px; font-size:15px; font-weight:800; }
.legal-doc p,.legal-doc li{ margin:0 0 12px; font-size:14px; line-height:2; color:var(--muted); }
.legal-doc ul{ margin:0 0 16px; padding-left:1.35em; }
.legal-doc .legal-note{
  margin-top:28px; padding:14px 16px; border-radius:14px;
  background:rgba(166,124,58,.06); border:1px solid rgba(166,124,58,.12);
  font-size:13px; line-height:1.85; color:var(--muted);
}
.legal-doc .tokusho-table{
  width:100%; border-collapse:collapse; font-size:14px; line-height:1.75; color:var(--muted); margin:0 0 20px;
}
.legal-doc .tokusho-table th,
.legal-doc .tokusho-table td{ border:1px solid var(--border); padding:12px 14px; vertical-align:top; }
.legal-doc .tokusho-table th{
  width:32%; min-width:120px; background:rgba(166,124,58,.05);
  font-weight:800; color:var(--text); text-align:left;
}
/* Work regi */
.regi-hero-img{
  max-width:640px; margin:32px auto 0;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-2);
}
.regi-section{ padding:80px 0; }
.regi-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.regi-feature-card{
  background:var(--bg-white); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px 20px;
}
.regi-feature-card h3{ font-size:16px; font-weight:800; margin:0 0 8px; }
.regi-feature-card p{ font-size:13px; color:var(--muted); margin:0; line-height:1.9; }

/* ─────────────────────────────────────
   Responsive
───────────────────────────────────── */
@media(max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .promise-blob-grid{ grid-template-columns:repeat(2,1fr); }
  .option-grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:1100px){
  .hero-artwork{ width:420px; right:2%; }
  .hblob-yellow{ right:390px; }
}
@media(max-width:820px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  /* hero */
  .hero{ min-height:auto; }
  .hero .container{ padding-top:100px; padding-bottom:280px; }
  .hero-artwork{
    width:340px;
    right:50%; bottom:16px; top:auto;
    transform:translateX(50%);
    animation:floatArtworkSP 6s ease-in-out infinite;
  }
  @keyframes floatArtworkSP{
    0%,100%{ transform:translateX(50%) translateY(0); }
    50%{     transform:translateX(50%) translateY(-14px); }
  }
  .artwork-sp{ width:90px; }
  .hblob-pink  { width:300px; height:280px; top:-80px; left:-60px; }
  .hblob-teal  { width:230px; height:230px; bottom:-55px; right:-55px; }
  .hblob-green { width:190px; height:170px; left:80px; }
  .hblob-yellow{ width:160px; height:145px; right:100px; top:15px; }
  .hdeco-circles,.hdeco-hearts{ display:none; }
  /* other */
  .footer-inner{ flex-direction:column; gap:40px; }
  .pricing-recommend-inner{ flex-direction:column; gap:24px; }
  .pricing-recommend{ padding:32px 24px; }
  .pricing-recommend-right{ width:100%; }
  .cta-light{ border-radius:24px; margin:0 8px 40px; }
  .section{ padding:70px 0; }
  .hero-sphere{ width:120px; height:120px; right:6%; top:8%; opacity:.85; }
  .hero-honeycomb{ width:140px; height:auto; right:4%; top:22%; opacity:.65; }
}
@media(max-width:560px){
  :root{ --pad:18px; }
  .site-header{ height:80px; }
  .brand{ min-width:auto; }
  .brand-mark{ width:136px; height:70px; border-radius:10px; }
  .hero .container{ padding-top:88px; padding-bottom:230px; }
  .hero-artwork{ width:280px; }
  .artwork-sp{ width:74px; }
  .hblob-pink{ width:220px; height:200px; }
  .hblob-teal{ width:170px; height:170px; }
  .hero-script-en{ font-size:34px; }
  .hero-ja-main{ font-size:16px; }
  .hdeco-dots-1,.hdeco-arrows,.hdeco-squiggles{ display:none; }
  .section{ padding:58px 0; }
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; }
  .option-grid-3,.option-grid-2{ grid-template-columns:1fr; }
  .promise-blob-grid{ grid-template-columns:1fr; }
  .pricing-recommend-price strong{ font-size:32px; }
  .contact-side-tabs{
    top:auto; left:0; right:0; bottom:0;
    transform:none; flex-direction:row; width:100%;
  }
  .contact-tab{
    writing-mode:horizontal-tb; text-orientation:mixed;
    flex:1; padding:14px; min-height:auto;
    border-radius:0; text-align:center; font-size:12px;
  }
  .footer-inner{ flex-direction:column; gap:32px; text-align:center; align-items:center; }
  .footer-logo-block{ text-align:center; }
  .site-footer .footer-nav{ align-items:center; }
}

/* ─────────────────────────────────────
   Hero: SP でイラスト→テキストの順
───────────────────────────────────── */
@media(max-width:820px){
  .hero-grid{ gap:32px; }
}

/* ═══════════════════════════════════════════════════════
   Hero copy — h1 → hero-ja-main
═══════════════════════════════════════════════════════ */
.hero-ja-main{
  font-size: clamp(1.55rem, 3vw + .4rem, 2.8rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 20px;
  letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════════════════
   Card icon — colorful rounded badge
═══════════════════════════════════════════════════════ */
.card-icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.ci-pink   { background: rgba(251,191, 36, .14); }
.ci-teal   { background: rgba(113,113,122, .12); }
.ci-yellow { background: rgba(254,240,138, .35); }
.ci-green  { background: rgba(217,119,  6, .1); }

/* ═══════════════════════════════════════════════════════
   Section — background decoration blobs
═══════════════════════════════════════════════════════ */
.section{ position: relative; overflow: hidden; }
.section-deco{
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.section .container{ position: relative; z-index: 1; }
.section .section-title{ position: relative; z-index: 1; }

.sdeco{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

/* top-right pink */
.sdeco-pink-tr{
  width: 360px; height: 360px;
  top: -120px; right: -120px;
  background: rgba(240, 98,146, .18);
}
/* bottom-left yellow */
.sdeco-yellow-bl{
  width: 280px; height: 280px;
  bottom: -100px; left: -80px;
  background: rgba(254,240,138, .6);
}
/* bottom-left teal */
.sdeco-teal-bl{
  width: 320px; height: 320px;
  bottom: -100px; left: -100px;
  background: rgba( 77,208,200, .2);
}
/* top-right soft gray */
.sdeco-green-tr{
  width: 300px; height: 300px;
  top: -80px; right: -80px;
  background: rgba(228,228,231, .65);
}
/* bottom-left pink */
.sdeco-pink-bl{
  width: 260px; height: 260px;
  bottom: -80px; left: -80px;
  background: rgba(240, 98,146, .14);
}
/* top-right teal */
.sdeco-teal-tr{
  width: 260px; height: 260px;
  top: -60px; right: -60px;
  background: rgba( 77,208,200, .18);
}
/* top-right yellow */
.sdeco-yellow-tr{
  width: 280px; height: 280px;
  top: -80px; right: -80px;
  background: rgba(254,240,138, .55);
}
/* bottom-left zinc */
.sdeco-green-bl{
  width: 240px; height: 240px;
  bottom: -80px; left: -60px;
  background: rgba(212,212,216, .45);
}

/* ═══════════════════════════════════════════════════════
   About section — two-column layout
═══════════════════════════════════════════════════════ */
.about-inner{
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: center;
}
.section-en-label{
  display: inline-block;
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.about-heading{
  font-size: clamp(1.5rem, 2.6vw + .3rem, 2.4rem);
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 20px;
  color: var(--text);
  letter-spacing: -.015em;
}
.about-lead{
  color: var(--muted);
  line-height: 1.85;
  margin: 0 0 28px;
}
.about-visual{
  border-radius: 24px;
  overflow: hidden;
}
.about-visual svg{
  width: 100%; height: auto;
  display: block;
}

@media(max-width:900px){
  .about-inner{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-visual{ order: -1; max-width: 400px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════
   Promise section — numbered card grid
═══════════════════════════════════════════════════════ */
.promise-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.promise-card{
  background: var(--bg-card, #fff);
  border-radius: 20px;
  padding: 36px 28px;
  border: 1.5px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
  transition: transform .25s, box-shadow .25s;
  position: relative;
}
.promise-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.09);
}
.promise-num{
  font-family: var(--font-en);
  font-size: 2.8rem;
  font-weight: 800;
  color: rgba(0,0,0,.06);
  line-height: 1;
  position: absolute;
  top: 20px; right: 24px;
  letter-spacing: -.02em;
}
.promise-icon{
  width: 58px; height: 58px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.promise-card h3{
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
}
.promise-card p{
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}

@media(max-width:820px){
  .promise-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════
   Testimonials — voice card
═══════════════════════════════════════════════════════ */
.section-testimonials{
  background: var(--bg-soft);
}
.voice-card{
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 1.5px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
  transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.voice-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.09);
}
.voice-quote{
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: .8;
  color: var(--accent);
  opacity: .35;
  margin-bottom: 8px;
  user-select: none;
}
.voice-body{
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.85;
  flex: 1;
  margin: 0 0 24px;
}
.voice-footer{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,.07);
}
.voice-avatar{
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.voice-name{
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  margin: 0;
}
.voice-meta{
  font-size: .78rem;
  color: var(--muted-2);
  margin: 2px 0 0;
}

/* ═══════════════════════════════════════════════════════
   Founder / Profile section
═══════════════════════════════════════════════════════ */
.founder-inner{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  align-items: center;
}
.founder-avatar-wrap{ flex-shrink: 0; }
.founder-avatar-blob{
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(201,168,76,.2);
}
.founder-avatar-blob svg{
  width: 100%; height: auto; display: block;
}
.founder-name{
  font-size: clamp(1.4rem, 2vw + .4rem, 2rem);
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text);
}
.founder-name small{
  font-size: .6em;
  font-weight: 400;
  color: var(--muted);
  margin-left: .3em;
}
.founder-text p{
  color: var(--muted);
  line-height: 1.9;
  margin: 0 0 24px;
}
.founder-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media(max-width:820px){
  .founder-inner{
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .founder-tags{ justify-content: center; }
  .founder-avatar-blob{ width: 160px; height: 160px; }
}

/* =====================================================
   v18 — terasu寄せの統一レイアウト調整
   文言は変えず、余白・配置・装飾・情報密度を再設計
   ===================================================== */

:root{
  --bg: #ffffff;
  --bg-soft: #f5f5f5;
  --bg-white: #ffffff;
  --text: #111111;
  --muted: #4b4b4b;
  --muted-2: #777777;
  --border: rgba(17,17,17,.11);
  --shadow: 0 18px 55px rgba(17,17,17,.065);
  --shadow-2: 0 24px 70px rgba(17,17,17,.09);
  --accent: #9d7417;
  --accent-2: #c79a22;
  --accent-3: #e8c96a;
  --accent-light: #fbf1cd;
  --radius: 18px;
  --radius-lg: 34px;
}

body{
  background:
    radial-gradient(circle at 12% 8%, rgba(232,201,106,.18) 0 160px, transparent 360px),
    linear-gradient(180deg, #fff 0%, #fff 46%, #f7f7f7 100%);
}

.container{ max-width: 1080px; }

.campaign-banner{
  background:#111;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.site-header{
  background:rgba(255,255,255,.84);
  box-shadow:none;
}
.site-header.is-scrolled{
  box-shadow:0 18px 36px rgba(17,17,17,.055);
}
.nav-links a{
  font-size:13px;
  letter-spacing:.04em;
}

.btn{
  border-radius:999px;
  padding:14px 30px;
  letter-spacing:.03em;
}
.btn-primary{
  background:#111;
  color:#fff;
  box-shadow:none;
}
.btn-primary:hover{
  background:var(--accent);
  box-shadow:0 18px 36px rgba(157,116,23,.18);
}
.btn-ghost{
  background:#fff;
  border-color:#111;
}

/* Hero: 参考サイトのように中央コピー＋左右に軽い装飾 */
.hero{
  min-height:calc(100svh - 92px);
  background:
    linear-gradient(180deg, #fff 0%, #fff 72%, #f5f5f5 100%);
}
.hero .container{
  padding-top:120px;
  padding-bottom:110px;
}
.hero-copy{
  max-width:720px;
  margin:0 auto;
  text-align:center;
}
.hero-script-en{
  color:#111;
  font-size:clamp(42px, 6.2vw, 86px);
  line-height:1.12;
}
.hero-ja-main{
  display:block;
  font-size:clamp(19px, 2vw, 28px);
  line-height:1.75;
  letter-spacing:.04em;
  margin-bottom:22px;
}
.hero-desc{
  max-width:650px;
  margin-left:auto;
  margin-right:auto;
  font-size:14px;
  line-height:2.25;
  letter-spacing:.05em;
}
.hero-actions{ justify-content:center; }
.hero-artwork{
  width:min(34vw, 430px);
  right:2%;
  top:55%;
  opacity:.74;
  filter:drop-shadow(0 20px 60px rgba(17,17,17,.08)) saturate(.65);
}
.artwork-sp{ opacity:.92; }
.hero-sphere{
  right:7%;
  top:16%;
  opacity:.58;
}
.hero-honeycomb{
  top:18%;
  left:7%;
  right:auto;
  opacity:.6;
}
.hdeco{ opacity:.12; filter:grayscale(1) saturate(.2); }
.hblob-pink{
  width:540px;
  height:540px;
  top:auto;
  bottom:-245px;
  left:-160px;
  background:#f1f1f1;
}
.hblob-teal{
  width:520px;
  height:520px;
  right:-210px;
  bottom:-150px;
  background:#eeeeee;
}
.hblob-green{
  background:#faf0c9;
  opacity:.55;
  left:7%;
  bottom:6%;
}
.hblob-yellow{
  background:#f7dc82;
  opacity:.36;
  right:27%;
  top:11%;
}

/* Section rhythm */
.section{
  padding:132px 0;
}
.section.soft,
.section-testimonials{
  background:#f5f5f5;
}
.section-title{
  margin-bottom:72px;
}
.section-title .en,
.section-en-label{
  color:#111;
  letter-spacing:.22em;
}
.section-title h2,
.about-heading,
.founder-name{
  font-family:var(--font-ja);
  letter-spacing:.02em;
}
.section-title .lead,
.about-lead{
  line-height:2.2;
  letter-spacing:.04em;
}

/* 装飾色は黄・グレーに統一 */
.sdeco{ filter:blur(70px); opacity:.8; }
.sdeco-pink-tr,
.sdeco-teal-bl,
.sdeco-pink-bl,
.sdeco-teal-tr{
  background:rgba(228,228,228,.72);
}
.sdeco-yellow-bl,
.sdeco-yellow-tr{
  background:rgba(232,201,106,.34);
}

/* Problems: カードの情報密度を抑えたメニュー風 */
.section-problems .grid-3{
  max-width:1040px;
  margin:0 auto;
  gap:0;
  border:1px solid var(--border);
  border-radius:34px;
  overflow:hidden;
  background:#fff;
}
.section-problems .card{
  position:relative;
  border:0;
  border-radius:0;
  box-shadow:none;
  min-height:270px;
  padding:34px 30px 36px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section-problems .card:nth-child(3n){ border-right:0; }
.section-problems .card:nth-last-child(-n+3){ border-bottom:0; }
.section-problems .card::before,
.section-benefits .card::before{
  display:block;
  font-family:var(--font-en);
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:22px;
}
.section-problems .card:nth-child(1)::before{ content:"01"; }
.section-problems .card:nth-child(2)::before{ content:"02"; }
.section-problems .card:nth-child(3)::before{ content:"03"; }
.section-problems .card:nth-child(4)::before{ content:"04"; }
.section-problems .card:nth-child(5)::before{ content:"05"; }
.section-problems .card:nth-child(6)::before{ content:"06"; }
.section-problems .card-icon,
.section-benefits .card-icon{
  position:absolute;
  right:24px;
  top:28px;
  width:44px;
  height:44px;
  border-radius:50%;
  opacity:.55;
}
.card-icon svg,
.voice-avatar svg{
  filter:grayscale(1) sepia(.18) saturate(.8);
}
.card{
  box-shadow:none;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 50px rgba(17,17,17,.08);
}

/* About: 中央本文＋薄いイラストで参考サイトの余白感へ */
.section-about{
  min-height:620px;
  display:flex;
  align-items:center;
  background:#fff;
}
.about-inner{
  display:block;
  position:relative;
  min-height:430px;
}
.about-text{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:2;
  padding-top:36px;
}
.about-heading{
  font-size:clamp(28px, 4vw, 46px);
  line-height:1.5;
}
.about-lead{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
.about-visual{
  position:absolute;
  width:min(440px, 42vw);
  right:-80px;
  bottom:-50px;
  opacity:.34;
  filter:grayscale(1) sepia(.1) saturate(.55);
  z-index:1;
}
.about-visual::before{
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,201,106,.28), transparent 64%);
  z-index:-1;
}

/* Benefits / Promise: terasuの「方針カード」風 */
.section-benefits .grid-3,
.promise-grid{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  gap:18px;
}
.section-benefits .card,
.promise-card{
  position:relative;
  border:1px solid var(--border);
  background:#fff;
  border-radius:28px;
  padding:44px 32px;
  min-height:240px;
  box-shadow:none;
}
.section-benefits .card:nth-child(1)::before{ content:"01"; }
.section-benefits .card:nth-child(2)::before{ content:"02"; }
.section-benefits .card:nth-child(3)::before{ content:"03"; }
.promise-card{
  padding-top:76px;
}
.promise-num{
  top:26px;
  right:auto;
  left:32px;
  color:var(--accent);
  font-size:13px;
  letter-spacing:.18em;
  opacity:1;
}
.promise-icon{
  position:absolute;
  right:24px;
  top:22px;
  width:48px;
  height:48px;
  border-radius:50%;
  opacity:.55;
}
.promise-icon svg{
  filter:grayscale(1) sepia(.18) saturate(.85);
}

/* Pricing: Access風に、重すぎる黒面を白基調へ */
#pricing{
  background:#f5f5f5;
}
#pricing .container{
  max-width:1040px;
}
.pricing-block,
.pricing-recommend{
  border-radius:30px;
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}
.pricing-block{
  padding:38px;
}
.pricing-recommend{
  padding:42px 38px;
  background:
    radial-gradient(circle at 92% 18%, rgba(232,201,106,.28), transparent 220px),
    #fff;
}
.pricing-recommend-badge{
  background:#111;
  color:#fff;
  box-shadow:none;
}
.pricing-recommend-sub,
.pricing-check-list li,
.price-note,
.price-strike{
  color:var(--muted);
}
.pricing-recommend-price strong{
  color:var(--accent);
}
.pricing-recommend .btn-primary{
  background:#111;
  color:#fff;
  box-shadow:none;
}
.option-item{
  background:#fff;
  border-radius:22px;
  padding:28px 24px;
}
.option-price{
  color:#111;
}
.option-case{
  background:#fbf1cd;
  border-color:rgba(157,116,23,.2);
}

/* Works: 参考サイトの横流れ感を強める */
.section-works{
  background:#fff;
}
.works-marquee-outer{
  margin-top:-12px;
  margin-bottom:70px;
}
.works-marquee-scroll{
  animation-duration:70s;
}
.works-marquee-fig{
  width:clamp(280px, 30vw, 420px);
}
.works-marquee-frame,
.work-thumb-mock{
  border-radius:22px;
  box-shadow:0 22px 55px rgba(17,17,17,.08);
}
.works-detail-grid{
  max-width:780px;
  gap:18px;
}
.works-detail-grid .work-card{
  border-radius:26px;
}

/* Testimonials / Profile: 白い紙面に薄い罫線 */
.voice-card,
.founder-inner{
  border-radius:30px;
  border:1px solid var(--border);
  box-shadow:none;
}
.voice-card{
  padding:34px 30px;
}
.voice-quote{
  color:var(--accent);
  opacity:.22;
}
.founder-inner{
  background:#fff;
  padding:48px;
}

/* FAQ / Blog / CTAも同じトーンに統一 */
.faq-list details,
.blog-panel{
  border-radius:24px;
  box-shadow:none;
}
.cta-light{
  background:#111;
  border-radius:34px;
}

@media(max-width:900px){
  .hero-copy{ max-width:640px; }
  .hero-artwork{
    width:360px;
    right:50%;
    transform:translateX(50%);
    top:auto;
    bottom:28px;
    opacity:.42;
  }
  .section-problems .grid-3{
    grid-template-columns:1fr 1fr;
  }
  .section-problems .card:nth-child(3n){ border-right:1px solid var(--border); }
  .section-problems .card:nth-child(2n){ border-right:0; }
  .section-problems .card:nth-last-child(-n+3){ border-bottom:1px solid var(--border); }
  .section-problems .card:nth-last-child(-n+2){ border-bottom:0; }
  .about-visual{
    position:relative;
    right:auto;
    bottom:auto;
    margin:34px auto 0;
    width:min(360px, 76vw);
  }
}

@media(max-width:820px){
  .hero{
    min-height:auto;
  }
  .hero .container{
    padding-top:90px;
    padding-bottom:320px;
  }
  .section{
    padding:88px 0;
  }
  .section-title{
    margin-bottom:46px;
  }
  .section-benefits .grid-3,
  .promise-grid,
  .works-detail-grid{
    grid-template-columns:1fr;
  }
  .pricing-block-label,
  .pricing-recommend-inner{
    align-items:flex-start;
  }
}

@media(max-width:560px){
  .hero .container{
    padding-top:76px;
    padding-bottom:250px;
  }
  .hero-script-en{
    font-size:42px;
  }
  .hero-ja-main{
    font-size:18px;
  }
  .hero-desc{
    font-size:13px;
    line-height:2.05;
  }
  .hero-artwork{
    width:280px;
    bottom:12px;
  }
  .section-problems .grid-3{
    grid-template-columns:1fr;
  }
  .section-problems .card,
  .section-problems .card:nth-child(n){
    border-right:0;
    border-bottom:1px solid var(--border);
    min-height:auto;
  }
  .section-problems .card:last-child{
    border-bottom:0;
  }
  .pricing-block,
  .pricing-recommend,
  .founder-inner{
    padding:30px 22px;
  }
}

/* =====================================================
   v19 — terasu風の通し背景・全幅レイアウト・統一トーン
   テキストは変更せず、装飾と配置のみを刷新
   ===================================================== */

:root{
  --bg:           #fdf8e8;
  --bg-soft:      #f8efd2;
  --bg-white:     #ffffff;
  --text:         #2a2418;
  --muted:        #594b2b;
  --muted-2:      #877856;
  --border:       rgba(58,46,16,.18);
  --border-soft:  rgba(58,46,16,.1);
  --accent:       #b08826;
  --accent-2:     #d4a13b;
  --accent-3:     #f4d067;
  --accent-light: #fef3c7;
  --paper:        #fefaee;
  --line:         #3a2e10;
  --shadow:       0 22px 60px rgba(58,46,16,.08);
  --shadow-2:     0 32px 80px rgba(58,46,16,.12);
  --radius:       16px;
  --radius-lg:    28px;
}

html, body{ background: var(--bg) !important; }
body{
  background:
    radial-gradient(circle at 6% 22%, rgba(244,208,103,.18) 0 220px, transparent 360px),
    radial-gradient(circle at 92% 60%, rgba(244,208,103,.14) 0 200px, transparent 320px),
    var(--bg) !important;
  color: var(--text);
  font-family: var(--font-ja);
  letter-spacing:.02em;
}

/* ─────────────────────────────────────
   PAGE-SCENE: 全画面に通しで広がる装飾
───────────────────────────────────── */
.page-scene{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.page-scene .ps{ position:absolute; pointer-events:none; }
.ps-cloud-top{
  top:0; left:0;
  width:100%;
  height:200px;
}
.ps-dotline-mid{
  top:48%;
  left:0;
  width:100%;
  height:30px;
  opacity:.55;
}
.ps-grass-bottom{
  bottom:0; left:0;
  width:100%;
  height:180px;
}
.ps-left-vine{
  top:0;
  left:0;
  width:14vw;
  max-width:220px;
  height:100vh;
}
.ps-right-vine{
  top:0;
  right:0;
  width:14vw;
  max-width:220px;
  height:100vh;
}
@media(max-width:900px){
  .ps-left-vine,.ps-right-vine{ display:none; }
}

/* main / header の z-index を ps の上に */
.site-header{ z-index:1000; background: rgba(253,248,232,.86); }
.site-header.is-scrolled{ box-shadow: 0 14px 36px rgba(58,46,16,.07); }
main{ position:relative; z-index:1; }
.campaign-banner{ background:#2a2418; }
.campaign-banner-strong,
.campaign-banner-tag{ background:#d4a13b; color:#2a2418; }
.campaign-banner-btn{ background:#fefaee; color:#2a2418; }

/* ─────────────────────────────────────
   旧装飾を非表示（HTMLに残っていても出さない）
───────────────────────────────────── */
.hblob,
.hdeco,
.hero-honeycomb,
.hero-sphere,
.hero-artwork{
  display:none !important;
}
.section-deco{ display:none !important; }

/* ─────────────────────────────────────
   セクション背景は全部透明（page-sceneを通す）
───────────────────────────────────── */
.section,
.section.soft,
.section-testimonials,
.section-about,
.section-problems,
.section-benefits,
.section-promise,
.section-works,
.section-founder,
.cta-light,
#pricing,
#faq,
#blog{
  background: transparent !important;
  overflow: visible;
  padding: 110px 0;
}
.section{ position:relative; }
body, .container{ position:relative; }

/* ボタン */
.btn{
  border-radius:999px;
  letter-spacing:.04em;
  font-weight:700;
  padding:14px 30px;
}
.btn-primary{
  background: var(--line);
  color:#fff;
  box-shadow:0 10px 28px rgba(58,46,16,.18);
}
.btn-primary:hover{
  background: var(--accent);
  color:#fff;
  box-shadow:0 14px 32px rgba(58,46,16,.22);
}
.btn-ghost{
  background:#fefaee;
  border:1.5px solid var(--line);
  color:var(--line);
}
.btn-ghost:hover{
  background:var(--accent-3);
  border-color:var(--line);
  color:var(--line);
}

/* タイポ */
.section-title .en,
.section-en-label{
  color: var(--line);
  letter-spacing:.22em;
  font-weight:700;
  font-family: var(--font-en);
}
.section-title h2,
.about-heading,
.founder-name{
  font-family: var(--font-serif);
  font-weight:700;
  color: var(--text);
  letter-spacing:.04em;
}
.section-title .lead,
.about-lead{
  color: var(--muted);
  line-height:2.1;
  letter-spacing:.04em;
}

/* ─────────────────────────────────────
   HERO（全幅・参考サイト風）
───────────────────────────────────── */
.hero{
  min-height: 88svh;
  display:flex; align-items:center;
  padding:60px 0 120px;
  position:relative;
}
.hero .container{
  position:relative;
  z-index:3;
  padding-top:0;
  padding-bottom:0;
}
.hero-canvas{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-canvas .hero-art-left,
.hero-canvas .hero-art-right{
  position:absolute;
  pointer-events:none;
  filter: drop-shadow(0 24px 40px rgba(58,46,16,.08));
}
.hero-art-left{
  left: clamp(-20px, 4vw, 90px);
  top: 54%;
  transform: translateY(-50%) rotate(-3deg);
  width: clamp(300px, 28vw, 420px);
  opacity:.95;
}
.hero-art-right{
  right: clamp(-10px, 5vw, 100px);
  top: 54%;
  transform: translateY(-50%) rotate(4deg);
  width: clamp(120px, 12vw, 170px);
  opacity:.95;
}
.hero-art-left .artwork-pc,
.hero-art-right .artwork-sp{
  display:block;
  width:100%;
}
.hero-plant-bl{
  position:absolute;
  left:6vw;
  bottom:-30px;
  width:clamp(180px, 16vw, 280px);
  height:auto;
  z-index:1;
  pointer-events:none;
}
.hero-plant-tr{
  position:absolute;
  right:5vw;
  top:90px;
  width:clamp(120px, 12vw, 200px);
  height:auto;
  z-index:1;
  pointer-events:none;
}
.hero-dots-tc{
  position:absolute;
  left:50%;
  top:48px;
  transform:translateX(-50%);
  width:clamp(160px, 18vw, 220px);
  height:auto;
  z-index:1;
  pointer-events:none;
}
.hero-copy{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:3;
}
.hero-script-en{
  font-family:"Pacifico", cursive;
  color: var(--line);
  font-size: clamp(40px, 6vw, 78px);
  line-height:1.16;
  margin:0 0 22px;
  letter-spacing:-.005em;
}
.hero-ja-main{
  font-family: var(--font-serif);
  font-weight:700;
  color: var(--text);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height:1.85;
  letter-spacing:.06em;
  margin:0 0 22px;
}
.hero-desc{
  color: var(--muted);
  font-size:14.5px;
  line-height:2.25;
  letter-spacing:.05em;
  margin:0 0 36px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

@media(max-width:1100px){
  .hero-art-left{ width:300px; opacity:.45; }
  .hero-art-right{ width:120px; opacity:.45; }
}
@media(max-width:820px){
  .hero{ min-height:auto; padding:48px 0 90px; }
  .hero-art-left{ left:-40px; top:auto; bottom:-30px; transform:none; width:230px; opacity:.45; }
  .hero-art-right{ right:-20px; top:90px; transform:rotate(6deg); width:90px; opacity:.45; }
  .hero-plant-bl{ left:-30px; width:160px; opacity:.7; }
  .hero-plant-tr{ right:-20px; top:60px; width:120px; opacity:.7; }
  .hero-dots-tc{ display:none; }
  .hero-copy{ padding:60px 0 90px; }
}

/* ─────────────────────────────────────
   SECTION TITLE
───────────────────────────────────── */
.section-title{
  text-align:center;
  margin-bottom:64px;
}
.section-title .en{
  display:block;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.section-title h2{
  font-size: clamp(26px, 3.2vw, 40px);
  margin:0 0 18px;
  line-height:1.5;
}
.section-title .lead{
  max-width:620px;
  margin:0 auto;
  font-size:14.5px;
}

/* container を少しだけ広く（全幅感を出す） */
.container{
  max-width: 1180px;
}

/* ─────────────────────────────────────
   PROBLEMS（6カード・線統一アイコン）
───────────────────────────────────── */
.section-problems .grid-3{
  max-width:1080px;
  margin:0 auto;
  gap:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:30px;
  overflow:hidden;
  box-shadow: 0 30px 70px rgba(58,46,16,.06);
}
.section-problems .card{
  position:relative;
  background:transparent;
  border:0;
  border-radius:0;
  padding: 40px 32px 36px;
  min-height:280px;
  border-right:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  box-shadow:none;
}
.section-problems .card:hover{
  transform:none;
  box-shadow:none;
  background: rgba(244,208,103,.08);
}
.section-problems .card:nth-child(3n){ border-right:0; }
.section-problems .card:nth-last-child(-n+3){ border-bottom:0; }

.section-problems .card::before{
  content:"";
  display:block;
  font-family: var(--font-en);
  font-weight:800;
  font-size:11px;
  letter-spacing:.18em;
  color: var(--accent);
  margin-bottom:18px;
}
.section-problems .card:nth-child(1)::before{ content:"01"; }
.section-problems .card:nth-child(2)::before{ content:"02"; }
.section-problems .card:nth-child(3)::before{ content:"03"; }
.section-problems .card:nth-child(4)::before{ content:"04"; }
.section-problems .card:nth-child(5)::before{ content:"05"; }
.section-problems .card:nth-child(6)::before{ content:"06"; }

/* 統一アイコン（線・単色） */
.section-problems .card-icon,
.section-benefits .card-icon{
  position:absolute;
  top:30px;
  right:32px;
  width:44px;
  height:44px;
  background: transparent !important;
  color: var(--line);
  border-radius:0;
}
.section-problems .card-icon svg,
.section-benefits .card-icon svg{
  width:36px;
  height:36px;
}
.section-problems .card h3,
.section-benefits .card h3{
  font-family: var(--font-serif);
  font-size:17px;
  font-weight:700;
  margin: 0 64px 12px 0;
  color: var(--text);
}
.section-problems .card p{
  font-size:13.5px;
  line-height:2;
  color: var(--muted);
  margin:0;
}

/* ─────────────────────────────────────
   ABOUT（中央コピー＋右下に薄いイラスト）
───────────────────────────────────── */
.section-about{
  padding:140px 0;
}
.about-inner{
  display:block;
  position:relative;
  max-width:1080px;
  margin:0 auto;
  min-height:480px;
}
.about-text{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:2;
}
.about-heading{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height:1.55;
  margin:0 0 24px;
}
.about-lead{
  margin: 0 auto 28px;
  max-width:680px;
}
.about-visual{
  position:absolute;
  width:min(380px, 38vw);
  right:-20px;
  bottom:-100px;
  opacity:.85;
  z-index:1;
  filter: drop-shadow(0 30px 60px rgba(58,46,16,.1));
}
@media(max-width:900px){
  .about-visual{
    position:relative;
    right:auto; bottom:auto;
    margin: 40px auto 0;
    width:min(360px, 78vw);
  }
}

/* ─────────────────────────────────────
   BENEFITS（3カード・線アイコン）
───────────────────────────────────── */
.section-benefits .grid-3,
.promise-grid{
  max-width:1080px;
  margin: 0 auto;
  gap:20px;
}
.section-benefits .card,
.promise-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:24px;
  padding: 44px 32px 36px;
  min-height:240px;
  box-shadow: 0 22px 50px rgba(58,46,16,.06);
}
.section-benefits .card:hover,
.promise-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 60px rgba(58,46,16,.1);
}
.section-benefits .card::before{
  display:block;
  content:"";
  font-family: var(--font-en);
  font-weight:800;
  font-size:11px;
  letter-spacing:.18em;
  color: var(--accent);
  margin-bottom:14px;
}
.section-benefits .card:nth-child(1)::before{ content:"01"; }
.section-benefits .card:nth-child(2)::before{ content:"02"; }
.section-benefits .card:nth-child(3)::before{ content:"03"; }

/* ─────────────────────────────────────
   PROMISE（3カード）
───────────────────────────────────── */
.promise-card{
  padding:64px 32px 36px;
  border:1px solid var(--border-soft);
}
.promise-num{
  position:absolute;
  top:30px;
  left:32px;
  right:auto;
  color: var(--accent);
  font-size:12px;
  letter-spacing:.22em;
  font-family: var(--font-en);
  font-weight:800;
  opacity:1;
}
.promise-icon{
  position:absolute;
  top:24px;
  right:32px;
  width:46px;
  height:46px;
  background: transparent !important;
  border-radius:0;
}
.promise-icon svg{
  width:34px; height:34px;
  color: var(--line);
}
.promise-icon svg [stroke="#b45309"],
.promise-icon svg [stroke="#52525b"],
.promise-icon svg [stroke="#d97706"]{
  stroke: var(--line);
}
.promise-card h3{
  font-family: var(--font-serif);
  font-size:18px;
  font-weight:700;
  margin: 0 56px 14px 0;
  color: var(--text);
}
.promise-card p{
  font-size:14px;
  color: var(--muted);
  line-height:2;
  margin:0;
}

/* ─────────────────────────────────────
   PRICING（白地・表スタイル）
───────────────────────────────────── */
#pricing .container{
  max-width:1080px;
}
.pricing-block{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:28px;
  padding:40px;
  box-shadow:0 22px 60px rgba(58,46,16,.06);
  margin-bottom:24px;
}
.pricing-block-label{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border-soft);
}
.pricing-block-badge{
  background: var(--line) !important;
  color:#fff !important;
  letter-spacing:.1em;
  font-weight:700;
}
.option-item{
  background:#fefaee;
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:26px 22px;
}
.option-item:hover{
  background:#fff;
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(58,46,16,.08);
  transform: translateY(-3px);
}
.option-price{
  color: var(--line);
  font-weight:800;
}
.option-case{
  background:#fef3c7;
  color: var(--accent);
  border:1px solid rgba(176,136,38,.3);
}

/* おすすめ：白地・表 */
.pricing-recommend{
  position:relative;
  background:#fff;
  color: var(--text);
  border:1.5px solid var(--accent);
  border-radius:28px;
  padding: 50px 42px 42px;
  box-shadow: 0 30px 70px rgba(176,136,38,.16);
}
.pricing-recommend-badge{
  position:absolute;
  top:-14px;
  left:38px;
  background: var(--line);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  padding:7px 22px;
  border-radius:999px;
  box-shadow: 0 6px 18px rgba(58,46,16,.18);
}
.pricing-recommend-head{
  margin-bottom:24px;
  text-align:left;
}
.pricing-recommend-head h3{
  font-family: var(--font-serif);
  font-size:24px;
  font-weight:700;
  margin:0 0 8px;
  color: var(--text);
  letter-spacing:.02em;
}
.pricing-recommend-sub{
  margin:0;
  color: var(--muted);
  font-size:14px;
}
.pricing-table{
  width:100%;
  border-collapse:collapse;
  margin: 8px 0 0;
}
.pricing-table tr{
  border-bottom:1px solid var(--border-soft);
}
.pricing-table tr:last-child{
  border-bottom:0;
}
.pricing-table th,
.pricing-table td{
  padding:18px 0;
  vertical-align:middle;
  text-align:left;
  font-weight:500;
}
.pricing-table th{
  width:64%;
  color: var(--text);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.04em;
}
.pricing-table td{
  text-align:right;
  color: var(--muted);
}
.ptbl-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  color: var(--accent);
}
.ptbl-check::before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:50%;
  background: var(--accent-light);
  color: var(--accent);
  font-weight:900;
  font-size:13px;
}
.pricing-table-total{
  border-top:2px solid var(--line) !important;
}
.pricing-table-total th{
  font-size:15px;
  font-family: var(--font-serif);
}
.pricing-table-total td{
  text-align:right;
}
.pricing-table-total .price-strike{
  display:block;
  color: var(--muted-2);
  font-size:13px;
  text-decoration:line-through;
  margin-bottom:4px;
}
.pricing-table-total strong{
  display:block;
  font-size:30px;
  font-weight:800;
  color: var(--line);
  letter-spacing:-.02em;
}
.pricing-table-total .price-note{
  display:block;
  font-size:12px;
  color: var(--muted-2);
  margin-top:4px;
}
.pricing-recommend-cta{
  margin-top:28px;
  text-align:center;
  padding-top:24px;
  border-top:1px solid var(--border-soft);
}
.pricing-recommend-cta .btn-primary{
  background: var(--line);
  color:#fff;
}

/* ─────────────────────────────────────
   WORKS（マーキー＋モノクロ枠統一）
───────────────────────────────────── */
.section-works{ padding-bottom:100px; }
.works-marquee-outer::before,
.works-marquee-outer::after{
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.works-marquee-outer::after{
  background: linear-gradient(-90deg, var(--bg) 0%, transparent 100%);
}
.works-marquee-viewport{
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.works-marquee-fig{
  width: clamp(280px, 26vw, 360px);
}
.works-marquee-frame{
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow: 0 24px 50px rgba(58,46,16,.1);
}
.works-marquee-frame .work-thumb{
  border:none; border-radius:0;
}

/* モノクロ枠（業種ラベル内蔵） */
.work-thumb-mock{
  position:relative;
  background:#fefaee !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:0 24px;
  overflow:hidden;
  box-shadow: 0 16px 40px rgba(58,46,16,.1);
}
.work-thumb-mock::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:30px;
  background:#f8efd2;
  border-bottom:1px solid var(--line);
  background-image: none !important;
}
.work-thumb-mock::after{
  content:"";
  position:absolute;
  top:9px; left:14px;
  width:8px; height:8px;
  border-radius:50%;
  background:#d4a13b;
  border:1px solid #3a2e10;
  box-shadow:
    14px 0 0 -1px #fefaee,
    14px 0 0 0 #3a2e10,
    28px 0 0 -1px #fefaee,
    28px 0 0 0 #3a2e10;
}
.work-thumb-tag{
  display:inline-block;
  font-family: var(--font-en);
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  color: var(--accent);
  margin: 22px 0 12px;
  padding: 4px 12px;
  border:1px solid var(--accent);
  border-radius:999px;
  background:#fff;
  text-transform:uppercase;
}
.work-thumb-label{
  display:block;
  font-family: var(--font-serif);
  font-weight:700;
  color: var(--text);
  font-size:18px;
  letter-spacing:.05em;
}

/* 詳細グリッド */
.works-detail-grid{
  max-width:880px;
  gap:22px;
}
.work-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:22px;
  padding:24px;
  box-shadow: 0 22px 50px rgba(58,46,16,.06);
}
.work-thumb{ border-radius:14px; border:1px solid var(--border-soft); }
.work-thumb-empty{
  border:2px dashed var(--border);
  background:#fefaee;
  color: var(--muted-2);
}
.tag{ background: var(--line); color:#fff; }
.pill{
  background: var(--accent-light);
  color: var(--accent);
  border-color: rgba(176,136,38,.3);
}

/* ─────────────────────────────────────
   TESTIMONIALS / FOUNDER
───────────────────────────────────── */
.voice-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:24px;
  box-shadow: 0 22px 50px rgba(58,46,16,.06);
}
.voice-quote{ color: var(--accent); opacity:.5; }
.voice-avatar{ background: transparent !important; }
.voice-avatar svg{
  color: var(--line);
}
.voice-avatar svg [stroke]{ stroke: var(--line) !important; }
.voice-name{ color: var(--text); }

.section-founder .founder-inner{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:30px;
  box-shadow: 0 26px 60px rgba(58,46,16,.07);
  padding:48px;
}
.founder-avatar-blob{
  background:#fef3c7;
  box-shadow: 0 12px 36px rgba(176,136,38,.18);
}

/* ─────────────────────────────────────
   FAQ / BLOG / CTA
───────────────────────────────────── */
.faq-list details{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:18px;
  box-shadow: 0 14px 36px rgba(58,46,16,.04);
}
.faq-list summary::after{
  border-color: var(--accent);
  color: var(--accent);
}
.faq-list details[open] summary{
  background: rgba(244,208,103,.12);
}

.blog-panel{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:24px;
  box-shadow: 0 22px 50px rgba(58,46,16,.06);
}
.blog-feed-list li a:hover{ color: var(--accent); }

.cta-light{
  background: var(--line) !important;
  border-radius:30px !important;
  margin: 0 var(--pad) 80px !important;
}
.cta-light .section-title h2{ color:#fff; }
.cta-light .lead{ color: rgba(255,255,255,.85); }
.cta-light .btn-primary{
  background: var(--accent-3);
  color: var(--line);
}
.cta-light .btn-primary:hover{ background:#fff; color: var(--line); }

/* ─────────────────────────────────────
   FOOTER
───────────────────────────────────── */
.site-footer{
  background:#2a2418 !important;
  position:relative; z-index:1;
}

/* レスポンシブ */
@media(max-width:900px){
  .section{ padding:80px 0; }
  .section-problems .grid-3{
    grid-template-columns: 1fr 1fr;
  }
  .section-problems .card:nth-child(3n){ border-right:1px solid var(--border-soft); }
  .section-problems .card:nth-child(2n){ border-right:0; }
  .section-problems .card:nth-last-child(-n+3){ border-bottom:1px solid var(--border-soft); }
  .section-problems .card:nth-last-child(-n+2){ border-bottom:0; }
  .section-benefits .grid-3,
  .promise-grid,
  .grid-3{
    grid-template-columns:1fr 1fr;
    gap:18px;
  }
  .pricing-recommend{ padding: 38px 26px 30px; }
}

@media(max-width:600px){
  .section{ padding:64px 0; }
  .section-title{ margin-bottom:42px; }
  .section-problems .grid-3,
  .section-benefits .grid-3,
  .promise-grid,
  .grid-3{
    grid-template-columns:1fr !important;
    gap:14px;
  }
  .section-problems .card{
    border-right:0 !important;
    border-bottom:1px solid var(--border-soft);
    min-height:auto;
    padding:30px 24px;
  }
  .section-problems .card:last-child{ border-bottom:0; }
  .pricing-block,
  .pricing-recommend{
    padding:30px 22px;
  }
  .pricing-table th,
  .pricing-table td{
    padding:14px 0;
    font-size:13px;
  }
  .pricing-table-total strong{ font-size:24px; }
  .work-thumb-label{ font-size:15px; }
  .hero-script-en{ font-size:42px; }
  .hero-ja-main{ font-size:18px; line-height:1.85; }
}

/* ════════════════════════════════════════════════════════════
   v20 — terasu-dental.com に近づける全面リセット
   ・背景はクリーム1色で通す（途切れさせない）
   ・コンテナを広げ画面全体を使い切る
   ・配色は terasu 系（クリーム×ダークブラウン×コーラル×ティール）
   ・各セクションへポップ装飾を散らす（fixed＋ローカル両方）
   ════════════════════════════════════════════════════════════ */

:root{
  /* Background tones */
  --bg:               #f5e8c4;            /* terasu の主背景：温かいクリーム */
  --bg-warm:          #f8eecf;            /* ハイライト寄り */
  --bg-card:          #ffffff;
  --bg-soft:          #fff8e0;

  /* Text & lines */
  --text:             #2a2418;            /* 温かいダークブラウン */
  --muted:            #5b4f33;
  --muted-2:          #8a7a55;
  --line:             #2a2418;
  --border:           rgba(42,36,24,.18);
  --border-soft:      rgba(42,36,24,.10);

  /* Brand & accents（terasu の挿し色） */
  --accent:           #2a2418;            /* ダークブラウンが基調 */
  --accent-2:         #d4a13b;            /* 温かい山吹 */
  --accent-3:         #f4d067;            /* ハイライト黄 */
  --peach:            #ee9075;            /* 参考サイトのコーラル */
  --peach-soft:       #f6c7b6;
  --teal:             #87c4ba;            /* ティール／さわやか緑 */
  --teal-soft:        #cfe7e1;
  --mint:             #b8d4a8;
  --soft-yellow:      #f9e3a4;

  /* Corners */
  --radius:           18px;
  --radius-lg:        28px;
  --radius-xl:        40px;
}

/* ── 全体背景：単色クリーム1枚で通す（写真1〜2の段差を排除） ── */
html{ background: var(--bg) !important; }
body{
  background: var(--bg) !important;
  color: var(--text);
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
}

/* page-scene：ページ全体に固定で広がる縁の植物だけに整理 */
.page-scene{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.page-scene .ps{ position:absolute; opacity:.9; }
.ps-left-vine{
  left:-20px; top:0;
  width: 9vw; min-width:120px; max-width:200px;
  height:100vh;
  animation: floatDeco 9s ease-in-out infinite alternate;
}
.ps-right-vine{
  right:-20px; top:0;
  width: 9vw; min-width:120px; max-width:200px;
  height:100vh;
  animation: floatDeco 11s ease-in-out infinite alternate-reverse;
}
.ps-cloud-top, .ps-grass-bottom, .ps-dotline-mid{ display:none !important; }

/* ── ページ全体にふわふわと舞う「ポップ装飾」を散らす ── */
/* body 直下に入れる固定の color blob（fixed なので常に見える） */
body::before{
  content:"";
  position:fixed;
  top:14vh; left: -3vw;
  width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #f9c9b6 0%, #ee9075 100%);
  opacity:.55;
  filter: blur(.4px);
  z-index:0;
  pointer-events:none;
  animation: floatDeco 11s ease-in-out infinite alternate;
}
body::after{
  content:"";
  position:fixed;
  bottom:18vh; right: -2vw;
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #cfe7e1 0%, #87c4ba 100%);
  opacity:.45;
  filter: blur(.4px);
  z-index:0;
  pointer-events:none;
  animation: floatDeco 13s ease-in-out infinite alternate-reverse;
}

/* ── 上層に内容を出す ── */
.site-header, main, footer, .campaign-banner, .floating-cta{ position:relative; z-index:2; }

/* ── コンテナをぐっと広げる ── */
.container{ max-width: 1280px !important; padding-left:28px; padding-right:28px; }

/* ── 古い装飾はすべて非表示 ── */
.hblob, .hdeco, .hero-honeycomb, .hero-sphere{ display:none !important; }

/* セクションは透明ベース（背景は body の単色 + page-scene のみ） */
.section{ background: transparent !important; }

/* ── タイポ ── */
.hero-script-en{ display:none !important; }

.hero-copy{ text-align:center; max-width: 880px; margin:0 auto; }
.hero-ja-main{
  font-family:"Shippori Mincho","Noto Serif JP",serif;
  color: var(--text);
  font-weight:800;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.32;
  letter-spacing: .03em;
  margin: 18px 0 22px;
  text-align:center;
}
.hero-ja-line{ display:block; }
.hero-desc{
  color: var(--muted);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 2;
  max-width: 680px;
  margin: 0 auto 26px;
}
.hero-actions{ justify-content:center; }

/* セクション見出し */
.section-title .en{
  color: var(--muted-2);
  letter-spacing: .42em;
  font-weight:500;
  font-size:13px;
}
.section-title h2{
  font-family:"Shippori Mincho","Noto Serif JP",serif;
  color: var(--text);
  font-weight:800;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: .04em;
  line-height: 1.42;
}

/* ── ボタン：ダークブラウン pill ── */
.btn{
  border-radius: 999px !important;
  font-weight:600;
  letter-spacing:.04em;
  padding: 14px 28px !important;
}
.btn-primary{
  background: var(--accent) !important;
  color: #fffaee !important;
  border:1px solid var(--accent) !important;
  box-shadow: 0 6px 22px rgba(42,36,24,.18) !important;
}
.btn-primary:hover{
  background:#3a2e18 !important;
  transform: translateY(-2px);
}
.btn-ghost{
  background: #fffaee !important;
  color: var(--accent) !important;
  border:1px solid var(--accent) !important;
}
.btn-ghost:hover{ background:#fff !important; }

/* ── ヘッダー ── */
.site-header{
  background: rgba(245,232,196,.92) !important;
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-links a{ color: var(--text) !important; font-weight:500; }

/* ── キャンペーンバナー ── */
.campaign-banner{
  background: var(--soft-yellow) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border-soft);
}
.campaign-banner-tag{
  background: var(--accent) !important;
  color: #fffaee !important;
}
.campaign-banner-btn{
  background: var(--accent) !important;
  color: #fffaee !important;
  border-radius: 999px !important;
}

/* ════════════════════════════════════════════════════════════
   セクションごとのポップ装飾（共通の .section-deco を活かす）
   ・各セクションに小さな丸／葉／ドットを散らして「真ん中だけ」感を解消
   ════════════════════════════════════════════════════════════ */

/* ベース：装飾は絶対配置・浮遊・透過 */
.section{ position:relative; overflow:hidden; }
.section .section-deco{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
}
.section > .container{ position:relative; z-index:1; }

/* 共通ブロブ */
.sdeco{
  position:absolute;
  border-radius:50%;
  filter: blur(.5px);
  opacity:.55;
  animation: floatDeco 9s ease-in-out infinite alternate;
}
.sdeco-pink-tr{
  width:140px; height:140px;
  top:8%; right:4%;
  background: radial-gradient(circle at 30% 30%, #f9c9b6, #ee9075);
}
.sdeco-yellow-bl{
  width:170px; height:170px;
  bottom:6%; left:4%;
  background: radial-gradient(circle at 30% 30%, #fff2b8, #f4d067);
  opacity:.5;
}

/* セクション別のアクセント色違い */
.section-problems .sdeco-pink-tr{ background: radial-gradient(circle at 30% 30%, #cfe7e1, #87c4ba); }
.section-problems .sdeco-yellow-bl{ background: radial-gradient(circle at 30% 30%, #fff2b8, #f4d067); }

.section-benefits .sdeco-pink-tr{ background: radial-gradient(circle at 30% 30%, #f9c9b6, #ee9075); }
.section-benefits .sdeco-yellow-bl{ background: radial-gradient(circle at 30% 30%, #cfe7e1, #87c4ba); }

#pricing .sdeco-pink-tr,
.section-pricing .sdeco-pink-tr{ background: radial-gradient(circle at 30% 30%, #fff2b8, #f4d067); opacity:.55;}
#pricing .sdeco-yellow-bl,
.section-pricing .sdeco-yellow-bl{ background: radial-gradient(circle at 30% 30%, #f9c9b6, #ee9075); opacity:.5; }

.section-works .sdeco-pink-tr{ background: radial-gradient(circle at 30% 30%, #cfe7e1, #87c4ba); }
.section-works .sdeco-yellow-bl{ background: radial-gradient(circle at 30% 30%, #f9c9b6, #ee9075); }

.section-testimonials .sdeco-pink-tr{ background: radial-gradient(circle at 30% 30%, #fff2b8, #f4d067); }
.section-testimonials .sdeco-yellow-bl{ background: radial-gradient(circle at 30% 30%, #cfe7e1, #87c4ba); }

.section-blog .sdeco-pink-tr{ background: radial-gradient(circle at 30% 30%, #f9c9b6, #ee9075); }
.section-blog .sdeco-yellow-bl{ background: radial-gradient(circle at 30% 30%, #fff2b8, #f4d067); }

@keyframes floatDeco{
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-14px) rotate(8deg); }
}

/* ── HERO 周りの強調 ── */
.hero{
  min-height: 100vh;
  display:flex; align-items:center;
  padding: 96px 0 72px !important;
  background: transparent !important;
}
.hero-canvas{ z-index:0; }
.hero-art-left,
.hero-art-right{ filter: drop-shadow(0 18px 30px rgba(42,36,24,.10)); }

/* HERO 上部の小さなドットライン（参考サイト風） */
.hero-dots-tc{ opacity:.85 !important; }

/* ── PROBLEMS：白パネルを画面いっぱい広げて、左右に装飾 ── */
.section-problems .grid-3{
  max-width: 1240px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(42,36,24,.08);
  overflow:hidden;
}

/* ── BENEFITS／PROMISE カードを白基調に ── */
.section-benefits .card,
.promise-card{
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 12px 36px rgba(42,36,24,.06) !important;
}

/* ── ABOUT セクション ── */
.section-about{ padding: 110px 0 !important; }
.about-inner{ display:block; }
.about-heading{
  font-family:"Shippori Mincho","Noto Serif JP",serif;
  font-weight:800;
  font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing: .04em;
  text-align:center;
}
.about-lead{ text-align:center; max-width:760px; margin:18px auto 0; color: var(--muted); line-height:2; }
.about-visual{
  position:relative;
  margin: 40px auto 0;
  max-width: 900px;
  filter: drop-shadow(0 18px 30px rgba(42,36,24,.10));
}

/* ── WORKS マーキー：枠を柔らかく ── */
.works-marquee-frame{
  border:1px solid var(--border) !important;
  background: var(--bg-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 18px 50px rgba(42,36,24,.08) !important;
  padding: 22px 0 !important;
}
.work-thumb-mock{
  background:#fffaee !important;
  border:1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(42,36,24,.08) !important;
}

/* ── PRICING ── */
#pricing{ padding: 120px 0 !important; }
.pricing-grid{ max-width: 1240px; }
.pricing-block,
.pricing-recommend{
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 14px 40px rgba(42,36,24,.08) !important;
}
.pricing-recommend{ border: 2px solid var(--accent) !important; }
.pricing-recommend-badge{
  background: var(--accent) !important;
  color: #fffaee !important;
  border-radius: 999px !important;
}
.pricing-recommend-cta .btn-primary{ width:auto; }

/* ── TESTIMONIALS／FAQ／BLOG／FOUNDER ── */
.voice-card,
.faq-list .faq,
.blog-card,
.founder-inner{
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 12px 30px rgba(42,36,24,.06) !important;
}
.voice-quote{ color: var(--muted); }

/* ── CTA（最下部の暗い帯）はダークブラウンで terasu の足元と合わせる ── */
.section-cta{
  background: var(--accent) !important;
  color:#fffaee !important;
}
.section-cta .container *{ color:#fffaee !important; }
.section-cta .btn-primary{
  background:#fffaee !important;
  color: var(--accent) !important;
  border:1px solid #fffaee !important;
}
.section-cta .btn-primary:hover{ background:#fff !important; }

/* ── フッター ── */
.site-footer{
  background: var(--bg-warm) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border-soft);
}
.site-footer a{ color: var(--text) !important; }

/* ── 浮遊CTA（LINE／フォーム）も terasu 寄りに ── */
.floating-cta .fcta-line{ background: #06c755 !important; color:#fff !important; }
.floating-cta .fcta-form{ background: var(--accent) !important; color:#fffaee !important; }
.floating-cta a{ border-radius: 14px !important; }

/* ── レスポンシブ ── */
@media (max-width: 1100px){
  body::before{ width:120px; height:120px; }
  body::after{ width:140px; height:140px; }
}
@media (max-width: 900px){
  .ps-left-vine, .ps-right-vine{ display:none !important; }
  body::before{ top:6vh; width:100px; height:100px; }
  body::after{ bottom:8vh; width:120px; height:120px; }
  .hero{ min-height: auto; padding: 80px 0 56px !important; }
  .hero-ja-main{ font-size: clamp(26px, 7.4vw, 40px); }
}

/* ===== website-flow: process readability brush-up ===== */
.timeline{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.step{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
}
.step-num{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}
.step-main{
  display: grid;
  grid-template-columns: clamp(168px, 22vw, 260px) minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
}
.step-heading{
  margin: 0;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.45;
  letter-spacing: .02em;
}
.step-body{
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 2;
}
@media (max-width: 900px){
  .step{
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 18px 16px;
    gap: 12px;
  }
  .step-num{
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .step-main{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .step-heading{
    font-size: clamp(17px, 4.2vw, 21px);
  }
  .step-body{
    font-size: 14.5px;
    line-height: 1.9;
  }
}
@media (max-width: 600px){
  body::before, body::after{ display:none; }
  .hero-ja-main{ font-size: clamp(22px, 7.2vw, 30px); line-height:1.5; }
  .section-title h2{ font-size: clamp(22px, 6.4vw, 30px); }
}

/* ════════════════════════════════════════════════════════════
   v21 — terasu 配色に完全準拠（クリーム×ダークブラウン×山吹のみ）
   ＋ 中段以降に line-art イラストを追加
   ＋ Works の業種モックを SVG トップ画ポートフォリオに
   ════════════════════════════════════════════════════════════ */

/* 1) v20 で入れた "ピーチ" "ティール" 系の装飾を一掃して山吹単色系へ */
body::before{
  background: radial-gradient(circle at 30% 30%, #fff2b8 0%, #f4d067 100%) !important;
  opacity: .55 !important;
}
body::after{
  background: radial-gradient(circle at 30% 30%, #fff8d6 0%, #e6c054 100%) !important;
  opacity: .45 !important;
}

.sdeco-pink-tr,
.section-problems .sdeco-pink-tr,
.section-benefits .sdeco-pink-tr,
.section-works .sdeco-pink-tr,
.section-testimonials .sdeco-pink-tr,
.section-blog .sdeco-pink-tr,
.section-faq .sdeco-pink-tr,
.section-founder .sdeco-pink-tr,
#pricing .sdeco-pink-tr,
.section-pricing .sdeco-pink-tr{
  background: radial-gradient(circle at 30% 30%, #fff2b8, #f4d067) !important;
  opacity:.5 !important;
}
.sdeco-yellow-bl,
.section-problems .sdeco-yellow-bl,
.section-benefits .sdeco-yellow-bl,
.section-works .sdeco-yellow-bl,
.section-testimonials .sdeco-yellow-bl,
.section-blog .sdeco-yellow-bl,
.section-faq .sdeco-yellow-bl,
.section-founder .sdeco-yellow-bl,
#pricing .sdeco-yellow-bl,
.section-pricing .sdeco-yellow-bl{
  background: radial-gradient(circle at 30% 30%, #fff8d6, #e6c054) !important;
  opacity:.4 !important;
}

/* 2) ── 各セクションに「黄＋ダークブラウン」のラインアートを散らす ── */
.sdeco-illust{
  position:absolute;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter: drop-shadow(0 6px 12px rgba(42,36,24,.08));
  animation: floatDeco 9s ease-in-out infinite alternate;
  opacity:.95;
}
/* About — デスクで作業する人 */
.sdeco-illust-desk{
  width: 220px; height: 220px;
  bottom: 4%; right: 2%;
  background-image: url("../img/illust/desk.svg");
}
/* Pricing — ステップアップ */
.sdeco-illust-blocks{
  width: 240px; height: 220px;
  bottom: 4%; left: 2%;
  background-image: url("../img/illust/blocks.svg");
  animation-direction: alternate-reverse;
}
/* Testimonials — メガホンを掲げる人 */
.sdeco-illust-megaphone{
  width: 220px; height: 220px;
  top: 4%; right: 3%;
  background-image: url("../img/illust/megaphone.svg");
}
/* Founder — 4人の打合せ机 */
.sdeco-illust-team{
  width: 240px; height: 220px;
  top: 6%; left: 2%;
  background-image: url("../img/illust/team.svg");
  animation-direction: alternate-reverse;
}

@media (max-width: 900px){
  .sdeco-illust-desk{ width: 150px; height: 150px; bottom: 3%; right: 1%; }
  .sdeco-illust-blocks{ width: 160px; height: 150px; bottom: 3%; left: 1%; }
  .sdeco-illust-megaphone{ width: 150px; height: 150px; top: 3%; right: 1%; }
  .sdeco-illust-team{ width: 160px; height: 150px; top: 3%; left: 1%; }
}
@media (max-width: 600px){
  .sdeco-illust{ display:none; }
}

/* 3) ── Works の業種モック：SVG をフルブリードで表示 ── */
.work-thumb-mock{
  background:#fffaee !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  padding: 0 !important;
  display:block !important;
  overflow:hidden;
}
/* 既存のブラウザクローム擬似要素は SVG 内に組み込んだので非表示 */
.work-mock-datsumou::before, .work-mock-datsumou::after,
.work-mock-biyou::before,    .work-mock-biyou::after,
.work-mock-pan::before,      .work-mock-pan::after,
.work-mock-zakka::before,    .work-mock-zakka::after,
.work-mock-tokoya::before,   .work-mock-tokoya::after,
.work-mock-piano::before,    .work-mock-piano::after,
.work-mock-music::before,    .work-mock-music::after{
  display:none !important;
}
.work-mock-datsumou{ background-image: url("../img/works-mocks/datsumou.svg") !important; }
.work-mock-biyou   { background-image: url("../img/works-mocks/biyou.svg")    !important; }
.work-mock-pan     { background-image: url("../img/works-mocks/pan.svg")      !important; }
.work-mock-zakka   { background-image: url("../img/works-mocks/zakka.svg")    !important; }
.work-mock-tokoya  { background-image: url("../img/works-mocks/tokoya.svg")   !important; }
.work-mock-piano   { background-image: url("../img/works-mocks/piano.svg")    !important; }
.work-mock-music   { background-image: url("../img/works-mocks/music.svg")    !important; }

/* マーキーのキャプション（業種名） */
.works-marquee-cap{
  margin-top: 12px;
  text-align:center;
  font-family: var(--font-serif), "Noto Serif JP", serif;
  font-weight:700;
  font-size: 14px;
  letter-spacing:.06em;
  color: var(--text);
}

/* マーキーフレームのリンク無効化（クリックさせない） */
.works-marquee-frame{
  display:block;
  text-decoration:none;
  pointer-events:none;
}

/* 4) ── ヘッダー / 細部の調整 ── */
.site-header{ background: rgba(245,232,196,.94) !important; }

/* 5) ── 旧ルール `display:none !important` の上書き（v21 装飾を見せる） ── */
.section .section-deco{ display:block !important; }
.section .section-deco .sdeco,
.section .section-deco .sdeco-illust{ display:block !important; }

/* ════════════════════════════════════════════════════════════
   v22 — 白背景・装飾円全廃・Works PC＋SP デュアル・イラスト大型化
   ════════════════════════════════════════════════════════════ */

/* ── 1. 全体: 白背景に統一 ── */
:root{
  --bg:          #ffffff;
  --bg-warm:     #f8f8f5;
  --bg-card:     #ffffff;
  --bg-soft:     #f5f5f2;
  --text:        #1a1a18;
  --muted:       #4a4a40;
  --muted-2:     #888880;
  --accent:      #1a1a18;
  --accent-2:    #c09830;
  --accent-3:    #e8c050;
  --border:      rgba(26,26,24,.14);
  --border-soft: rgba(26,26,24,.07);
}
html{ background:#ffffff !important; }
body{ background:#ffffff !important; }

/* ── 2. body の浮遊円ブロブを完全廃止 ── */
body::before, body::after{ display:none !important; }

/* ── 3. セクション背景は白で通す ── */
.section,
.section.soft,
.section.soft.plain-section{
  background:#ffffff !important;
}

/* セクション間の境界線をごく薄く入れてメリハリをつける */
.section + .section{ border-top: 1px solid var(--border-soft); }

/* ── 4. ヘッダーも白ベース ── */
.site-header{ background:rgba(255,255,255,.95) !important; }

/* ── 5. キャンペーンバナー ── */
.campaign-banner{
  background: #fffbe8 !important;
  border-bottom: 1px solid #e8d87a !important;
  color: var(--text) !important;
}

/* ── 6. page-scene のvine: 白背景に溶け込む薄さ ── */
.ps-left-vine, .ps-right-vine{ opacity:.7; }

/* ── 7. sdeco・旧装飾は完全非表示 ── */
.sdeco, .section-deco, .sdeco-illust{ display:none !important; }
.hblob,.hdeco,.hero-honeycomb,.hero-sphere{ display:none !important; }

/* ── 8. About セクション: 2カラムレイアウト（テキスト左、イラスト右） ── */
.section-about .about-inner{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap: 64px;
  padding: 0;
}
.section-about .about-visual{
  position:relative !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  order: 2;
}
.section-about .about-visual svg{
  width:100%; height:auto;
  filter: drop-shadow(0 20px 40px rgba(26,26,24,.08));
}
.section-about .about-text{ order:1; }
/* about-visual の背景円をグリーン系に */
.section-about .about-visual circle:first-of-type{
  fill: #e8f5e8 !important;
}

/* ── 9. Benefits セクション: 3カラム + 上部に大型グロウスイラスト ── */
.section-benefits .section-title{
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

/* ── 10. Pricing セクション: ステップイラストを右配置 ── */
.section-pricing-inner,
#pricing .container > .section-title ~ div,
#pricing .pricing-grid{
  max-width: 1100px;
}

/* ── 11. Testimonials セクション: 2カラムレイアウト ── */
.section-testimonials .testimonials-layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  align-items: flex-start;
  gap: 64px;
}
.section-testimonials .testimonials-illust img{
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(26,26,24,.08));
  animation: floatDeco 8s ease-in-out infinite alternate;
}
.section-testimonials .testimonials-body .section-title{
  text-align:left;
  margin-bottom: 36px;
}
.section-testimonials .testimonials-body .grid-3{
  grid-template-columns: 1fr !important;
  gap:18px;
}
.section-testimonials .voice-card{
  max-width: 100%;
}

/* ── 12. Works — 新レイアウト（PC＋SP デュアル横スクロール） ── */
.works-scroll-outer{
  overflow-x: auto;
  overflow-y: visible;
  padding: 20px 0 36px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.works-scroll-outer::-webkit-scrollbar{ height:5px; }
.works-scroll-outer::-webkit-scrollbar-track{ background:transparent; }
.works-scroll-outer::-webkit-scrollbar-thumb{ background: var(--border); border-radius:99px; }

.works-scroll-track{
  display:flex;
  gap: 32px;
  padding: 12px 5vw 16px;
  width: max-content;
}

/* 各 work アイテム */
.wk-item{
  margin:0;
  flex:0 0 auto;
  width: clamp(280px, 34vw, 420px);
  cursor: default;
}

/* PC＋SP デュアルフレーム */
.wk-dual{
  position:relative;
  width: 100%;
  height: 220px;
  margin-bottom: 16px;
}
.wk-pc{
  position:absolute;
  right:0; top:12px;
  width: 86%;
  height: 180px;
  border: 1.5px solid #d0d0cc;
  border-radius: 10px;
  overflow:hidden;
  background:#f5f5f2;
  box-shadow: 0 6px 24px rgba(26,26,24,.09), 0 1px 3px rgba(26,26,24,.06);
}
.wk-sp{
  position:absolute;
  left:0; bottom:0;
  width: 22%;
  height: 140px;
  border: 2px solid #c8c8c4;
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 28px rgba(26,26,24,.13);
  z-index:2;
}
/* スクリーン（画像が入る部分） */
.wk-screen{
  width:100%; height:100%;
  background-size:cover;
  background-position:top center;
}
.wk-blank{
  background: linear-gradient(135deg, #eeeeea 0%, #e4e4e0 100%) !important;
}
/* 実際の実績サイトの画像 */
.wk-blessed-pc{ background-image:url("../img/work-blessed.jpg"); }
.wk-blessed-sp{ background-image:url("../img/work-blessed.jpg"); background-position:top left; }
.wk-zion-pc   { background-image:url("../img/work-zion.jpg"); }
.wk-zion-sp   { background-image:url("../img/work-zion.jpg"); background-position:top left; }

/* キャプション */
.wk-cap{
  display:flex; flex-direction:column; gap:3px;
}
.wk-cap strong{
  font-family:"Shippori Mincho","Noto Serif JP",serif;
  font-weight:700;
  font-size:15px;
  color: var(--text);
}
.wk-cap span{
  font-size:12px;
  color: var(--muted-2);
  letter-spacing:.04em;
}

/* ── 13. ヒーロー: テキストを中央・大きく、ヒーロー艶を少しもたせる ── */
.hero{
  background: #fff !important;
  border-bottom: 1px solid var(--border-soft);
}
.hero-ja-main{
  font-size: clamp(36px, 5.6vw, 72px) !important;
  color: var(--text) !important;
}
.hero-desc{ color: var(--muted) !important; }

/* ── 14. コンテナ最大幅をさらに広げる ── */
.container{ max-width: 1300px !important; }

/* ── 15. カード類: 白×薄いボーダー ── */
.card, .voice-card, .faq-list .faq, .blog-card, .founder-inner, .promise-card{
  background:#fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(26,26,24,.05) !important;
}

/* ── 16. ボタン ── */
.btn-primary{
  background: var(--text) !important;
  color: #fff !important;
  border: 1.5px solid var(--text) !important;
}
.btn-primary:hover{ background:#333 !important; }
.btn-ghost{
  background:#fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--text) !important;
}

/* ── 17. CTA セクション ── */
.section-cta{ background: var(--text) !important; }
.section-cta * { color:#fff !important; }
.section-cta .btn-primary{
  background:#fff !important;
  color: var(--text) !important;
}

/* ── 18. フッター ── */
.site-footer{ background:#f5f5f2 !important; border-top:1px solid var(--border-soft); }

/* ── 19. Pricing ── */
.pricing-block, .pricing-recommend{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
}
.pricing-recommend{ border:2px solid var(--text) !important; }
.pricing-recommend-badge{
  background: var(--text) !important;
  color:#fff !important;
}

/* ── 20. レスポンシブ ── */
@media(max-width:960px){
  .section-about .about-inner{
    grid-template-columns: 1fr !important;
    gap:36px;
  }
  .section-about .about-visual{ order:1; max-width:400px; margin:0 auto !important; }
  .section-about .about-text{ order:2; }
  .section-testimonials .testimonials-layout{
    grid-template-columns: 1fr !important;
    gap:36px;
  }
  .section-testimonials .testimonials-illust{
    text-align:center;
  }
  .section-testimonials .testimonials-illust img{
    max-width:260px;
  }
  .section-testimonials .testimonials-body .grid-3{
    grid-template-columns: 1fr !important;
  }
}
@media(max-width:600px){
  .hero-ja-main{ font-size:clamp(24px,7.8vw,36px) !important; line-height:1.45; }
  .wk-item{ width: clamp(240px,82vw,320px); }
  .wk-dual{ height:180px; }
  .wk-pc{ height:148px; }
  .wk-sp{ height:110px; }
}

/* ════════════════════════════════════════════════════════════
   v23 — カラフル大型ブロブ / 繋ぎ目のない1枚構造 / 横幅を使った大きなテキスト
       + Works スマホ枠を実機風（ノッチ・ホームバー・iPhone 比率）
   参考：https://terasu-dental.com/
   ════════════════════════════════════════════════════════════ */

/* 1) セクション境界線とヒーロー下のラインを完全に削除して「1枚の背景」にする */
.section + .section{ border-top: 0 !important; }
.hero,
.hero.section{ border-bottom: 0 !important; }
.campaign-banner{ border-bottom: 0 !important; }
.section-problems,
.section-about,
.section-benefits,
.section-promise,
.section-works,
.section-testimonials,
.section-founder,
.section-faq,
.section-blog,
#pricing,
.cta-light{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* 2) 背景：参考サイトのようにごく淡いグレー寄りホワイトで通す（白→白でつなぐ） */
:root{
  --bg:          #fafafa;
  --bg-warm:     #f5f5f2;
  --bg-soft:     #f4f4f2;
  --yellow-hero: #ffd93d;
  --teal-hero:   #2ed3d1;
  --teal-dark:   #1fb8b6;
  --teal-soft-2: #e6f7f6;
}
html{ background: var(--bg) !important; }
body{ background: var(--bg) !important; }
.section,
.section.soft,
.section.soft.plain-section{
  background: transparent !important;
}

/* 3) ヘッダー・バナーの下線も透明に（繋ぎ目を排除） */
.site-header{
  background: rgba(250,250,250,.92) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}
.site-header.is-scrolled{
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
  box-shadow: 0 2px 18px rgba(0,0,0,.04) !important;
}

/* 4) コンテナを広く使って「真ん中だけに窮屈」感を解消 */
.container{ max-width: 1360px !important; padding-left: 32px; padding-right: 32px; }
@media (max-width: 900px){
  .container{ padding-left: 20px; padding-right: 20px; }
}

/* ── 5) HERO: カラフル大型ブロブ ────────────────────────────── */
.hero{
  position: relative;
  min-height: 92vh;
  padding: 60px 0 180px !important;   /* 下部に空間をとり、ブロブがProblemsまで繋がる */
  overflow: visible !important;        /* 次セクションに被せるために切らない */
  background: transparent !important;
  z-index: 1;
}
.hero-blobs{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;   /* 下に流し込む */
}
.hero-blobs .hb{
  position: absolute;
  display: block;
}
/* 左上の黄色ブロブ：画面の端（左外）から大胆にはみ出す */
.hero-blobs .hb-yellow{
  left: -8vw;
  top:  -4vw;
  width: clamp(360px, 42vw, 640px);
  height: clamp(360px, 42vw, 640px);
  filter: drop-shadow(0 20px 40px rgba(255,217,61,.18));
}
/* 左下のティール大ブロブ：ヒーロー下部から Problems の手前まで流れる */
.hero-blobs .hb-teal{
  left: -10vw;
  bottom: -22vw;
  width: clamp(520px, 62vw, 960px);
  height: clamp(420px, 52vw, 780px);
  filter: drop-shadow(0 30px 60px rgba(46,211,209,.22));
}

/* 左側のPCイラスト・植物はブロブより手前・画面外寄りへ */
.hero-canvas{ z-index: 1; }
.hero-art-left{ opacity: 0; pointer-events: none; }   /* 黄色ブロブと被るので非表示 */
.hero-art-right{ opacity: .85; }

/* ヒーロー見出し（和文＋英文）を大きく・広く */
.hero-copy{
  max-width: 1040px !important;
  margin: 0 auto !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
  padding: 20px 40px 0 !important;
}
.hero-ja-main{
  font-family: "Shippori Mincho","Noto Serif JP",serif !important;
  font-weight: 800 !important;
  font-size: clamp(34px, 5.6vw, 74px) !important;
  line-height: 1.38 !important;
  letter-spacing: .04em !important;
  margin: 20px 0 26px !important;
  color: #1a1a18 !important;
}
.hero-ja-line{ display:block; }
.hero-desc{
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 2.1 !important;
  max-width: 820px !important;
  margin: 0 auto 36px !important;
  color: #4a4a40 !important;
}
.hero-actions{
  justify-content: center !important;
  gap: 16px !important;
}
.hero-actions .btn{ padding: 16px 32px !important; font-size: 15px !important; }

@media (max-width: 900px){
  .hero{ min-height: auto; padding: 60px 0 140px !important; }
  .hero-blobs .hb-yellow{ left: -20vw; top: -10vw; width: 90vw; height: 90vw; opacity: .85; }
  .hero-blobs .hb-teal{ left: -35vw; bottom: -50vw; width: 180vw; height: 180vw; opacity: .9; }
}
@media (max-width: 600px){
  .hero-copy{ padding: 0 20px !important; }
  .hero-actions{ flex-direction: column; width: 100%; }
  .hero-actions .btn{ width: 100%; }
}

/* ── 6) セクション全体：繋ぎ目のない流れ ──────────────────── */
main{ position: relative; z-index: 1; }
.section{ padding: 120px 0 !important; }
.section-problems{ padding-top: 60px !important; position: relative; z-index: 2; }  /* ヒーローブロブの上に被せる */

/* 7) 各セクションで「横幅を使う」：内側コンテンツを広げる */
.section-title{ max-width: 920px; margin-left: auto; margin-right: auto; }
.section-title h2{
  font-size: clamp(28px, 3.8vw, 50px) !important;
  line-height: 1.45 !important;
}
.section-title .lead{
  max-width: 820px !important;
  font-size: clamp(14.5px, 1vw, 16.5px) !important;
  line-height: 2.1 !important;
}

/* Problems: 6カードを広く */
.section-problems .grid-3{
  max-width: 1280px !important;
  border-radius: 32px !important;
}

/* About: 2カラムレイアウトを広く */
.section-about .about-inner{
  max-width: 1240px;
  gap: 80px !important;
  padding: 40px 0 !important;
}
.section-about .about-text{ max-width: 620px; }
.section-about .about-heading{
  font-size: clamp(28px, 3.6vw, 48px) !important;
  line-height: 1.4 !important;
}
.section-about .about-lead{
  font-size: clamp(14.5px, 1.05vw, 17px);
  line-height: 2.1 !important;
}

/* Benefits / Promise の3カードをゆったりと */
.section-benefits .grid-3,
.promise-grid{
  max-width: 1240px !important;
  gap: 28px !important;
}
.section-benefits .card,
.promise-card{
  padding: 48px 34px 40px !important;
  border-radius: 28px !important;
}

/* Pricing も広く */
#pricing .container{ max-width: 1240px !important; }
.pricing-block,
.pricing-recommend{ border-radius: 30px !important; }

/* Testimonials：左イラスト + 右に3件を横幅広く */
.section-testimonials .testimonials-layout{
  grid-template-columns: 340px 1fr !important;
  gap: 72px !important;
  max-width: 1280px;
  margin: 0 auto;
}
.section-testimonials .testimonials-body .grid-3{
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
@media (max-width: 960px){
  .section-testimonials .testimonials-body .grid-3{ grid-template-columns: 1fr !important; }
}

/* FAQ / Blog / Founder も広く */
.founder-inner{ max-width: 1240px; padding: 56px !important; }
.faq-list{ max-width: 1060px; margin: 0 auto; }
.blog-panel{ max-width: 1100px; margin: 0 auto; }

/* 8) CTA は背景ダークのまま・両サイドにマージン詰める */
.cta-light{
  margin: 40px auto 80px !important;
  max-width: 1280px;
  border-radius: 36px !important;
}

/* ── 9) Works：実機風スマホフレーム（ノッチ・ホームバー） ──── */
.works-scroll-outer{ padding: 24px 0 44px !important; }
.works-scroll-track{
  gap: 44px !important;
  padding: 12px 5vw 28px !important;
}
.wk-item{
  width: clamp(320px, 36vw, 460px) !important;
}

/* デュアル枠：余裕を取って実機らしい縦長スマホを配置 */
.wk-dual{
  position: relative;
  width: 100%;
  height: 260px;
  margin-bottom: 18px;
}

/* PC枠：少し右寄せ・上部にアドレスバー（拡張）を出す */
.wk-pc{
  position: absolute;
  right: 0; top: 0;
  width: 78% !important;
  height: 220px !important;
  border: 1.5px solid #d5d5d0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow:
    0 10px 28px rgba(26,26,24,.12),
    0 1px 4px rgba(26,26,24,.06) !important;
}
/* PCブラウザのトップバー（赤・黄・緑の信号風） */
.wk-pc-bar{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background: linear-gradient(180deg,#f5f5f2 0%, #ececea 100%);
  border-bottom: 1px solid #dcdcd8;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
  z-index: 2;
}
.wk-pc-bar span{
  width: 8px; height: 8px; border-radius: 50%;
}
.wk-pc-bar span:nth-child(1){ background:#ff6159; }
.wk-pc-bar span:nth-child(2){ background:#ffbd2e; }
.wk-pc-bar span:nth-child(3){ background:#28c941; }
.wk-pc .wk-screen{
  position: absolute; top: 22px; left: 0; right: 0; bottom: 0;
  width: 100%; height: calc(100% - 22px);
}

/* SP枠：iPhone 風の比率（だいたい 9:19.5）・ノッチ・ホームバー付き */
.wk-sp{
  position: absolute;
  left: 6px; bottom: -12px;     /* 下端から少し飛び出して PC に重なる */
  width: 120px !important;
  height: 250px !important;      /* 120 x 250 ≒ 実機アスペクト */
  border: 2px solid #1a1a18 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #1a1a18 !important;   /* スマホの筐体色 */
  box-shadow:
    0 16px 34px rgba(26,26,24,.26),
    0 2px 6px rgba(26,26,24,.14) !important;
  z-index: 3;
  padding: 6px 5px;
}
.wk-sp .wk-screen{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: top center;
}
/* ノッチ（Dynamic Island 風の黒い横長丸） */
.wk-sp-notch{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 14px;
  background: #0a0a08;
  border-radius: 999px;
  z-index: 4;
}
/* ホームインジケーター（下部の白いバー） */
.wk-sp-home{
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  z-index: 4;
}

/* PC枠のスクリーン（既存の wk-blessed-pc などと組み合わせる） */
.wk-screen{
  background-size: cover !important;
  background-position: top center !important;
}

/* 空のスクリーン：淡いグレーに中央の「準備中」風グラデ */
.wk-blank{
  background:
    linear-gradient(135deg, #f4f4f2 0%, #e8e8e4 100%) !important;
  position: relative;
}
.wk-sp .wk-blank{
  background:
    linear-gradient(160deg, #f4f4f2 0%, #e0e0dc 100%) !important;
}

/* 小画面：スマホ枠も少し小さく、PCは見切れないように */
@media (max-width: 900px){
  .wk-item{ width: clamp(280px, 78vw, 380px) !important; }
  .wk-dual{ height: 220px; }
  .wk-pc{ height: 190px !important; }
  .wk-sp{ width: 102px !important; height: 212px !important; left: 4px; bottom: -8px; }
  .wk-sp-notch{ width: 44px; height: 12px; top: 8px; }
}
@media (max-width: 600px){
  .wk-item{ width: clamp(260px, 84vw, 340px) !important; }
  .wk-dual{ height: 200px; }
  .wk-pc{ height: 168px !important; }
  .wk-sp{ width: 92px !important; height: 188px !important; }
  .wk-sp-notch{ width: 38px; height: 10px; top: 7px; }
  .wk-sp-home{ width: 36px; height: 3px; bottom: 5px; }
}

/* ── 10) ボタン：参考サイトのようにシャープで大きめ ────────── */
.btn{
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}
.btn-primary{
  background: #1a1a18 !important;
  color: #fff !important;
  border: 1.5px solid #1a1a18 !important;
  box-shadow: 0 8px 22px rgba(26,26,24,.16) !important;
}
.btn-primary:hover{
  background: #2a2a28 !important;
  transform: translateY(-2px);
}
.btn-ghost{
  background: #fff !important;
  color: #1a1a18 !important;
  border: 1.5px solid #1a1a18 !important;
}
.btn-ghost:hover{
  background: #f8f8f5 !important;
}

/* ── 11) Campaign banner（上部の黄色バー）：下線を消す ───── */
.campaign-banner{
  background: #fffbe8 !important;
  color: #1a1a18 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ── 12) hero-art-right（SVGのスマホ）も画面端に小さく寄せる ── */
.hero-art-right{
  right: 2vw !important;
  top: 52% !important;
  width: clamp(90px, 10vw, 140px) !important;
  opacity: .5 !important;
}

/* ── 13) アクセシビリティ / reduce motion ───────────────── */
@media (prefers-reduced-motion: reduce){
  .hero-blobs .hb{ animation: none !important; }
}

/* ════════════════════════════════════════════════════════════
   v24 — terasu-dental.com テーマCSSから抽出した色・タイポ・動きに最大限合わせる
   背景 #eae6dc / 主線 #050505 / アクセント #e8005b / 淡色 #fff5d3 #edf6f8
   英字スクリプト: Damion（参考サイトと同系）
   文章・商用写真は使わない（自社文面のみ）
   ════════════════════════════════════════════════════════════ */

:root{
  --terasu-bg:       #eae6dc;
  --terasu-bg-alt:   #f5f5f5;
  --terasu-line:     #050505;
  --terasu-accent:   #e8005b;
  --terasu-accent-2: #de2636;
  --terasu-coral:    #f07776;
  --terasu-wash-y:   #fff5d3;
  --terasu-wash-b:   #edf6f8;
  --terasu-border:   #e3e3e3;
}

html{
  background: var(--terasu-bg) !important;
}
body{
  background: var(--terasu-bg) !important;
  color: #000 !important;
}

/* ヒーロー装飾：スクロールでわずかに沈む（main.js が --hero-parallax-y を設定） */
.hero-blobs{
  transform: translateY(var(--hero-parallax-y, 0));
  will-change: transform;
}

/* ゆらゆら（参考KVのレイヤードSVGに近い「常時動き」） */
@keyframes terasuBlobFloat{
  0%{ transform: translate(0, 0) rotate(0deg) scale(1); }
  100%{ transform: translate(14px, -22px) rotate(2.5deg) scale(1.02); }
}
@keyframes terasuBlobFloat2{
  0%{ transform: translate(0, 0) rotate(0deg); }
  100%{ transform: translate(-18px, 16px) rotate(-2deg); }
}
@keyframes terasuAccentPulse{
  0%, 100%{ transform: scale(1); opacity: .85; }
  50%{ transform: scale(1.06); opacity: 1; }
}
@keyframes terasuPlantSway{
  0%{ transform: rotate(-1deg) translateY(0); }
  100%{ transform: rotate(1.2deg) translateY(-10px); }
}

.hero-blobs .hb-yellow{
  animation: terasuBlobFloat 8s ease-in-out infinite alternate;
  transform-origin: 40% 40%;
}
.hero-blobs .hb-teal{
  animation: terasuBlobFloat2 11s ease-in-out infinite alternate;
  transform-origin: 55% 60%;
}
.hero-blobs .hb-accent{
  position: absolute;
  right: clamp(-20px, -2vw, 40px);
  top: 22%;
  width: clamp(120px, 16vw, 220px);
  height: clamp(120px, 16vw, 220px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, rgba(232,0,91,.45) 0%, rgba(232,0,91,.12) 58%, rgba(232,0,91,.04) 100%);
  filter: blur(.2px);
  animation: terasuAccentPulse 6s ease-in-out infinite;
  pointer-events: none;
}

/* 線画イラスト・ドットも揺れる */
.hero-plant-bl{
  animation: terasuPlantSway 7s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
.hero-plant-tr{
  animation: terasuPlantSway 8.5s ease-in-out infinite alternate-reverse;
  transform-origin: 80% 20%;
}
.hero-art-right{
  animation: terasuBlobFloat 9s ease-in-out infinite alternate !important;
  opacity: .62 !important;
}
.hero-dots-tc{
  animation: terasuAccentPulse 5s ease-in-out infinite !important;
}

/* 英文キャッチ（Damion・参考サイトの KV 英字比率に近づける） */
.hero-en-script{
  font-family: "Damion", cursive;
  font-weight: 400;
  font-size: clamp(3.2rem, 7.4vw, 8.2rem);
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0 0 1.8rem;
  color: var(--terasu-line);
}

/* 見出し英字ラベルも Damion */
.section-title .en,
.section-en-label{
  font-family: "Damion", cursive !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  text-transform: none !important;
  font-size: clamp(1.45rem, 2.5vw, 2rem) !important;
  color: var(--terasu-line) !important;
}

/* ヘッダー：紙色に溶ける */
.site-header{
  background: rgba(234,230,220,.94) !important;
  border-bottom: 1px solid var(--terasu-border) !important;
}

/* キャンペーン帯：淡黄 + アクセントはピンク系（テーマの #e8005b） */
.campaign-banner{
  background: var(--terasu-wash-y) !important;
  color: var(--terasu-line) !important;
  border-bottom: 1px solid var(--terasu-border) !important;
}
.campaign-banner-strong,
.campaign-banner-tag{
  background: var(--terasu-accent) !important;
  color: #fff !important;
}
.campaign-banner-btn{
  background: var(--terasu-line) !important;
  color: #fff !important;
  border: 1px solid var(--terasu-line) !important;
}

/* ボタン：線色 #050505（テーマのボタン仕様に寄せる） */
.btn-primary{
  background: var(--terasu-line) !important;
  color: #fff !important;
  border: 1px solid var(--terasu-line) !important;
  box-shadow: 0 6px 20px rgba(5,5,5,.12) !important;
}
.btn-primary:hover{
  opacity: .88 !important;
  background: var(--terasu-line) !important;
}
.btn-ghost{
  background: #fff !important;
  color: var(--terasu-line) !important;
  border: 1px solid var(--terasu-line) !important;
}
.btn-ghost:hover{
  background: #fff !important;
  opacity: .85 !important;
}

/* カード・パネル：白 + #e3e3e3（テーマの input border に合わせる） */
.card,
.voice-card,
.founder-inner,
.promise-card,
.section-problems .grid-3,
.pricing-block,
.pricing-recommend,
.faq-list details,
.blog-panel{
  border-color: var(--terasu-border) !important;
}
.section-problems .grid-3,
.card{
  background: #fff !important;
}

/* CTA 最終ブロック：ダーク #050505 */
.cta-light{
  background: var(--terasu-line) !important;
  color: #fff !important;
}
.cta-light .section-title h2,
.cta-light .lead{
  color: #fff !important;
}
.cta-light .btn-primary{
  background: #fff !important;
  color: var(--terasu-line) !important;
  border: 1px solid #fff !important;
}

/* フッター：紙色トーン */
.site-footer{
  background: var(--terasu-bg-alt) !important;
  color: var(--terasu-line) !important;
  border-top: 1px solid var(--terasu-border) !important;
}
.site-footer .footer-msg{
  color: #333 !important;
}
.site-footer .brand-text strong{
  color: var(--terasu-line) !important;
}
.site-footer .brand-text span{
  color: #666 !important;
}
.site-footer .footer-nav a,
.site-footer .footer-legal a{
  color: #444 !important;
}
.site-footer .footer-bottom{
  color: #666 !important;
  border-top: 1px solid var(--terasu-border) !important;
}

/* ピル・強調にコーラル／マゼンタを少量 */
.pill,
.option-case{
  border-color: rgba(232,0,91,.22) !important;
}
.pricing-recommend{
  border: 2px solid var(--terasu-accent) !important;
}
.pricing-recommend-badge{
  background: var(--terasu-accent) !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce){
  .hero-blobs .hb-yellow,
  .hero-blobs .hb-teal,
  .hero-blobs .hb-accent,
  .hero-plant-bl,
  .hero-plant-tr,
  .hero-art-right,
  .hero-dots-tc{
    animation: none !important;
  }
}

/* ===== お問い合わせページ：フォームを大きく・読みやすく ===== */
.contact-mail-area{
  max-width: 760px;
  margin: 0 auto;
}
.contact-inquiry-card{
  padding: 40px 36px 44px;
}
.contact-inquiry-heading{
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--text);
}
.contact-inquiry-lead{
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  text-align: center;
}
.contact-inquiry-form .field{
  margin-bottom: 22px;
}
.contact-inquiry-form label{
  display: block;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text);
}
.contact-inquiry-form input[type="text"],
.contact-inquiry-form input[type="email"],
.contact-inquiry-form textarea{
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}
.contact-inquiry-form textarea{
  min-height: 200px;
  resize: vertical;
}
.contact-inquiry-form .field-hint{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted-2);
}
.contact-inquiry-form input[type="file"]{
  width: 100%;
  max-width: 100%;
  padding: 12px 0;
  font-size: 15px;
}
.contact-inquiry-form-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.contact-inquiry-form-actions .btn{
  min-height: 52px;
  padding: 14px 22px;
  font-size: 16px;
}
.contact-inquiry-complete{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.contact-inquiry-complete-inner{
  padding: 48px 32px;
}
.contact-inquiry-complete-msg{
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--accent-2);
}
.contact-inquiry-complete-hint{
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 28px;
  line-height: 1.8;
}
@media (max-width: 560px){
  .contact-inquiry-card{ padding: 28px 20px 32px; }
  .contact-inquiry-heading{ font-size: 19px; }
}

/* ===== 下層ページの装飾ブロブ + ボタン挙動統一 ===== */
.page-hero{
  position: relative;
  overflow: visible;
}
.page-hero .container{
  position: relative;
  z-index: 1;
}
.page-blob{
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.page-blob--pink{
  width: clamp(10rem, 14vw, 20rem);
  height: clamp(9rem, 13vw, 18rem);
  left: clamp(1rem, 3vw, 4rem);
  top: clamp(4.5rem, 7vw, 8rem);
  background: #ff3b8b;
  border-radius: 44% 56% 52% 48% / 45% 42% 58% 55%;
  opacity: .9;
}
.page-blob--yellow{
  width: clamp(9rem, 12vw, 16rem);
  height: clamp(8rem, 11vw, 14rem);
  right: clamp(1rem, 4vw, 5rem);
  top: clamp(6rem, 9vw, 10rem);
  background: #f1c21b;
  border-radius: 52% 48% 38% 62% / 46% 58% 42% 54%;
  opacity: .9;
}
.page-blob--teal{
  width: clamp(9rem, 12vw, 16rem);
  height: clamp(8rem, 11vw, 14rem);
  right: clamp(12rem, 24vw, 28rem);
  top: clamp(9rem, 13vw, 14rem);
  background: #08bdba;
  border-radius: 56% 44% 50% 50% / 44% 58% 42% 56%;
  opacity: .85;
}
.hero-actions .btn.btn-primary,
.cta-light .btn.btn-primary{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-actions .btn.btn-primary::before,
.hero-actions .btn.btn-primary::after,
.cta-light .btn.btn-primary::before,
.cta-light .btn.btn-primary::after{
  content: "";
  position: absolute;
  bottom: -160%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  z-index: -1;
  transition: transform .45s var(--ease);
}
.hero-actions .btn.btn-primary::before,
.cta-light .btn.btn-primary::before{
  left: -8%;
}
.hero-actions .btn.btn-primary::after,
.cta-light .btn.btn-primary::after{
  right: -8%;
  transition-delay: .05s;
}
.hero-actions .btn.btn-primary:hover::before,
.hero-actions .btn.btn-primary:hover::after,
.cta-light .btn.btn-primary:hover::before,
.cta-light .btn.btn-primary:hover::after{
  transform: translateY(-140%);
}

/* ===== CTA readability + home font alignment ===== */
.cta-light{
  background: var(--terasu-bg) !important;
  color: var(--terasu-line) !important;
}
.cta-light .section-title .en{
  font-family: "Damion", cursive !important;
  color: var(--terasu-line) !important;
}
.cta-light .section-title h2{
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif !important;
  color: var(--terasu-line) !important;
}
.cta-light .lead{
  color: #3f3f3f !important;
}
.cta-light .btn-primary{
  background: var(--terasu-line) !important;
  color: #fff !important;
  border-color: var(--terasu-line) !important;
}
@media (max-width: 900px){
  .page-blob--pink{
    left: 1rem;
    top: 7rem;
    width: 10rem;
    height: 9rem;
  }
  .page-blob--yellow{
    right: 1rem;
    top: 7.8rem;
    width: 8.6rem;
    height: 7.8rem;
  }
  .page-blob--teal{
    right: 6rem;
    top: 10rem;
    width: 8.2rem;
    height: 7.4rem;
  }
}

/* ===== sub-pages typography & process: align with home ===== */
body{
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  background: #eae6dc;
}
.page-hero h1,
.section-title h2,
.step-heading{
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif !important;
  font-weight: 700;
  letter-spacing: .1em;
}
.section-title .en{
  font-family: "Damion", cursive !important;
  letter-spacing: .06em !important;
  font-weight: 400 !important;
}
.page-hero p,
.section-title .lead,
.step-body{
  color: #4a4a4a;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .1em;
}
.page-hero h1{
  font-size: clamp(2.8rem, 3.8vw, 4.2rem) !important;
  line-height: 1.55 !important;
}
.section-title h2{
  font-size: clamp(2.2rem, 3vw, 2.8rem) !important;
  line-height: 1.75 !important;
}
.step-heading{
  font-size: clamp(2rem, 2.5vw, 2.6rem) !important;
  line-height: 1.7 !important;
}

.timeline{
  max-width: 1080px;
  margin: 0 auto;
  border-top: 1px solid rgba(5,5,5,.16);
}
.step{
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid rgba(5,5,5,.16);
  background: transparent;
  border-radius: 0;
}
.step-num{
  width: 34px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #111;
  background: transparent;
  border-radius: 0;
  height: auto;
  margin-top: 2px;
}
.step-main{
  display: grid;
  grid-template-columns: clamp(150px, 20vw, 230px) minmax(0, 1fr);
  align-items: start;
  gap: 10px 24px;
}
.step-heading{
  margin: 0;
  font-size: clamp(2rem, 2.5vw, 2.6rem);
  line-height: 1.7;
}
.step-body{
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.2;
}
.page-hero .hero-actions{
  justify-content: flex-start !important;
  gap: 1.6rem !important;
  margin-top: 3.2rem !important;
}
.page-hero .hero-actions .btn{
  min-width: 16rem;
  height: 4.4rem;
  padding: 0 2.2rem !important;
  font-size: 1.4rem !important;
  letter-spacing: .06em;
}

@media (max-width: 900px){
  .step{
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 16px 0;
  }
  .step-num{
    width: 24px;
    font-size: 14px;
  }
  .step-main{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .step-heading{
    font-size: clamp(1.8rem, 5vw, 2.2rem) !important;
    line-height: 1.6 !important;
  }
  .page-hero p,
  .section-title .lead,
  .step-body{
    font-size: 1.5rem;
    line-height: 2.05;
  }
  .page-hero .hero-actions{
    justify-content: flex-start !important;
    margin-top: 2.4rem !important;
  }
}
@media (max-width: 600px){
  .page-hero h1{
    font-size: clamp(2.3rem, 7.2vw, 3rem) !important;
    line-height: 1.5 !important;
  }
  .section-title h2{
    font-size: clamp(2rem, 6vw, 2.6rem) !important;
    line-height: 1.65 !important;
  }
  .page-hero .hero-actions{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .page-hero .hero-actions .btn{
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}