/* 合同会社DRAI 個人店向けHP制作 営業LP
   設計: 大誠ポートフォリオ踏襲 + やわらかアクセント
   Color: 白 + ダークチャコール + コーラル + 苔色
   Fonts: Manrope (en) + Noto Sans JP + Noto Serif JP
*/

:root {
  /* Color tokens */
  --c-white: #FFFFFF;
  --c-paper: #FAFAF7;
  --c-cream: #F5F0E6;
  --c-ink: #1C2733;
  --c-ink-soft: #4A5560;
  --c-mute: #8B95A0;
  --c-line: rgba(28, 39, 51, 0.10);
  --c-line-strong: rgba(28, 39, 51, 0.20);

  /* Accent palette */
  --c-coral: #F4A537;
  --c-coral-soft: #F8C66F;
  --c-moss: #5C7C68;
  --c-moss-soft: #8AB196;

  /* Typography */
  --font-en: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-serif: 'Noto Serif JP', 'Yu Mincho', serif;

  /* Spacing */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 4rem;
  --gap-xl: 6.5rem;

  /* Layout */
  --maxw: 1280px;
  --header-h: 76px;
  --radius: 12px;
  --radius-lg: 22px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(28, 39, 51, 0.06);
  --shadow-md: 0 12px 28px rgba(28, 39, 51, 0.10);
  --shadow-lg: 0 24px 50px rgba(28, 39, 51, 0.14);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-jp);
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
em { font-style: normal; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap-md); }

/* ===========================
   Scroll progress
   =========================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(28, 39, 51, 0.06);
  z-index: 200;
}
.scroll-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-coral) 0%, var(--c-moss) 100%);
  transition: width 0.1s linear;
}

/* ===========================
   Header
   =========================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  z-index: 100;
  transition: height 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.scrolled {
  box-shadow: 0 4px 14px rgba(28, 39, 51, 0.06);
}
.header-inner {
  max-width: 1480px; margin: 0 auto; padding: 0 var(--gap-md);
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-mark {
  width: 40px; height: 40px;
  background: var(--c-ink); color: var(--c-paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-en); font-weight: 800; font-size: 1.1rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-jp); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.brand-tag {
  font-family: var(--font-en); font-size: 0.68rem;
  font-weight: 500; letter-spacing: 0.16em;
  color: var(--c-mute); margin-top: 2px;
}
.nav-list {
  display: flex; gap: 1.8rem;
  font-family: var(--font-en); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.nav-list a {
  position: relative; padding: 0.4rem 0;
  transition: color 0.3s var(--ease);
}
.nav-list a::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--c-coral);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav-list a:hover { color: var(--c-coral); }
.nav-list a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; }
.nav-toggle span { width: 22px; height: 2px; background: var(--c-ink); transition: 0.3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cta-pill {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  background: var(--c-ink); color: var(--c-paper);
  border-radius: 999px;
  font-family: var(--font-en); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.06em;
  transition: all 0.3s var(--ease);
}
.cta-pill:hover { background: var(--c-coral); color: var(--c-ink); transform: translateY(-1px); }

/* ===========================
   Hero
   =========================== */
.hero {
  padding-top: calc(var(--header-h) + var(--gap-lg));
  padding-bottom: var(--gap-xl);
}
.hero-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap-md);
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--gap-lg);
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--font-en); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-coral); margin-bottom: 1.4rem;
}
.hero-title {
  font-family: var(--font-jp); font-weight: 900;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.18;
  letter-spacing: 0.01em; margin-bottom: 1.8rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: anywhere;
}
.hero-title > span { display: inline-block; }
.hero-line-2 em {
  font-family: var(--font-serif); font-weight: 700; font-style: italic;
  color: var(--c-coral);
  position: relative;
  display: inline-block;
}
.hero-line-2 em::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.05em; height: 0.18em;
  background: var(--c-coral); opacity: 0.22;
  z-index: -1;
}
.hero-lead {
  font-size: 1.05rem; line-height: 2;
  max-width: 32rem; margin-bottom: 2rem;
  color: var(--c-ink-soft);
}
.hero-lead b { color: var(--c-ink); font-weight: 700; }
.hero-stats {
  display: flex; gap: 2rem; margin-bottom: 2rem;
  padding: 1.4rem 1.6rem;
  background: var(--c-cream);
  border-radius: var(--radius-lg);
  width: fit-content;
}
.stat { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.stat-num {
  font-family: var(--font-en); font-weight: 800; font-size: 2.4rem;
  line-height: 1; color: var(--c-ink); letter-spacing: -0.02em;
  display: inline;
}
.stat-line { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.stat-week {
  font-family: var(--font-jp); font-weight: 700; font-size: 1.1rem;
  color: var(--c-ink);
}
.stat-plus {
  font-family: var(--font-en); font-weight: 800; font-size: 1.6rem;
  color: var(--c-coral); line-height: 1;
}
.stat-label {
  font-size: 0.78rem; color: var(--c-ink-soft); line-height: 1.5;
}
.stat-label small {
  display: block; font-size: 0.7rem; color: var(--c-mute); margin-top: 2px;
}
.hero-cta { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }

.hero-bento {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  aspect-ratio: 4 / 3;
}
.bento-tile {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--c-cream);
  transition: transform 0.5s var(--ease);
  animation: bento-rise 0.8s var(--ease) backwards;
  animation-delay: calc(var(--ord) * 0.08s);
}
.bento-tile:hover { transform: translateY(-4px); }
.bento-tile img { width: 100%; height: 100%; object-fit: cover; }
@keyframes bento-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-tile { animation: none; }
}

/* ===========================
   Hero bento — CSS-generated previews (no PNG)
   =========================== */
.bento-css {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.1rem;
  isolation: isolate;
}
.bento-css::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.18));
  pointer-events: none;
  z-index: 1;
}
.bento-css .bt-cat {
  font-family: 'Manrope', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  font-weight: 700;
  position: relative; z-index: 2;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: #1a1a1a;
}
.bento-css .bt-name {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.7vw, 1.3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  position: relative; z-index: 2;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.bento-cafe-cali {
  background: linear-gradient(135deg, #F4D687 0%, #E8B65C 50%, #C68B3C 100%);
}
.bento-cafe-cali .bt-name { color: #2A1A0A; text-shadow: none; }
.bento-bakery-min {
  background: linear-gradient(135deg, #F8F6F1 0%, #E8E2D0 100%);
}
.bento-bakery-min .bt-cat { background: #1a1a1a; color: #fff; }
.bento-bakery-min .bt-name { color: #1a1a1a; text-shadow: none; }
.bento-izakaya {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,90,160,0.45) 0%, transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(255,200,80,0.45) 0%, transparent 45%),
    linear-gradient(135deg, #0A0E1A 0%, #1A0A1F 100%);
}
.bento-izakaya .bt-name {
  color: #FFCB66;
  font-family: 'Noto Serif JP', serif;
  text-shadow: 0 0 24px rgba(255,90,160,.5);
}
.bento-salon-bloom {
  background: linear-gradient(135deg, #FAF1EB 0%, #F2D5D5 50%, #E8C4B0 100%);
}
.bento-salon-bloom .bt-cat { background: #4A2A2A; color: #FAF1EB; }
.bento-salon-bloom .bt-name {
  color: #4A2A2A; text-shadow: none;
  font-family: 'Noto Serif JP', serif;
  font-style: italic;
}
.bento-salon-mono {
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 24px, rgba(255,255,255,.04) 24px, rgba(255,255,255,.04) 25px),
    linear-gradient(135deg, #050505 0%, #1a1a1a 100%);
}
.bento-salon-mono .bt-cat {
  background: #C8FF1A; color: #050505;
  border-radius: 0;
  font-family: 'Manrope', sans-serif;
}
.bento-salon-mono .bt-name {
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.bento-seitai {
  background: linear-gradient(135deg, #1B2C4A 0%, #2A4060 50%, #C8E6E0 130%);
}
.bento-seitai .bt-cat { background: #C8E6E0; color: #1B2C4A; }
.bento-seitai .bt-name {
  color: #FAFCFB; text-shadow: 0 2px 14px rgba(27,44,74,.5);
}

.bento-ramen {
  background:
    radial-gradient(circle at 30% 30%, rgba(198,141,47,0.35) 0%, transparent 50%),
    linear-gradient(135deg, #1A1410 0%, #A8281C 80%);
}
.bento-ramen .bt-cat { background: #C68D2F; color: #1A1410; }
.bento-ramen .bt-name { color: #C68D2F; text-shadow: 0 2px 14px rgba(168,40,28,0.5); }

.bento-fitness {
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 28px, rgba(200,255,26,0.04) 28px, rgba(200,255,26,0.04) 29px),
    linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%);
}
.bento-fitness .bt-cat { background: #C8FF1A; color: #0A0A0A; border-radius: 0; font-family: 'Manrope', sans-serif; }
.bento-fitness .bt-name { color: #C8FF1A; font-family: 'Manrope', sans-serif; font-weight: 800; text-shadow: none; }

.hero-bento-note {
  margin-top: 1rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--c-mute, #607080);
  text-align: center;
  font-family: var(--font-jp, "Noto Sans JP", sans-serif);
}

/* ===========================
   Showcase v2 — 15 cards with CSS preview
   =========================== */
.showcase-grid.v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}
@media (max-width: 720px) {
  .showcase-grid.v2 { grid-template-columns: 1fr; gap: 2rem; }
}

.show-card.v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-cream, #FFFCF7);
  border: 1px solid rgba(28,39,51,0.08);
  border-radius: var(--radius, 18px);
  overflow: hidden;
  transition: transform 0.45s var(--ease, cubic-bezier(.2,.8,.2,1)), box-shadow 0.45s var(--ease, cubic-bezier(.2,.8,.2,1));
  isolation: isolate;
}
.show-card.v2:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px -20px rgba(28,39,51,0.25);
}

.show-link-overlay {
  position: absolute; inset: 0;
  z-index: 5;
  text-decoration: none;
  outline-offset: 4px;
}
.show-link-overlay:focus-visible {
  outline: 2px solid var(--c-accent-coral, #F4A537);
}

.sc-num {
  position: absolute;
  top: 14px; right: 18px;
  z-index: 3;
  font-family: 'Manrope', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  mix-blend-mode: difference;
  pointer-events: none;
}

.sc-preview {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.6rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.sc-preview .sc-eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  font-weight: 700;
  text-transform: uppercase;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #1c2733;
  position: relative; z-index: 2;
}
.sc-preview .sc-display {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  position: relative; z-index: 2;
  color: #fff;
}
.sc-preview .sc-display em {
  font-style: italic;
  font-family: 'Noto Serif JP', serif;
}
.sc-preview .sc-display.jp {
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.02em;
}
.sc-preview .sc-display.mono {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.sc-preview .sc-rule {
  width: 32px; height: 1px;
  background: rgba(255,255,255,.6);
  margin: 0.6rem 0;
  position: relative; z-index: 2;
}
.sc-preview .sc-meta {
  font-family: 'Manrope', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  position: relative; z-index: 2;
}

/* === each preview's signature aesthetic === */
.prev-cafe-cali {
  background:
    radial-gradient(ellipse at top right, rgba(255,255,255,.4) 0%, transparent 50%),
    linear-gradient(135deg, #F4D687 0%, #E8B65C 60%, #C68B3C 100%);
}
.prev-cafe-cali .sc-display, .prev-cafe-cali .sc-meta { color: #2A1A0A; }
.prev-cafe-cali .sc-display em { color: #8B3A1A; }
.prev-cafe-cali .sc-rule { background: rgba(42,26,10,.4); }

.prev-cafe-edit {
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(0,0,0,.04) 28px, rgba(0,0,0,.04) 29px),
    linear-gradient(135deg, #F8F4EA 0%, #ECE3D2 100%);
  border-bottom: 1px solid rgba(28,39,51,0.08);
}
.prev-cafe-edit .sc-eyebrow { background: #1c2733; color: #F8F4EA; }
.prev-cafe-edit .sc-display { color: #1c2733; font-family: 'Noto Serif JP', serif; }
.prev-cafe-edit .sc-display em { color: #8B3A1A; }
.prev-cafe-edit .sc-meta { color: rgba(28,39,51,.65); }
.prev-cafe-edit .sc-rule { background: rgba(28,39,51,.3); }

.prev-cafe-forest {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.18) 0%, transparent 40%),
    linear-gradient(135deg, #2C4030 0%, #5C7C68 80%, #8FA890 100%);
}
.prev-cafe-forest .sc-eyebrow { background: rgba(255,255,255,.92); color: #2C4030; }

.prev-bakery-rustic {
  background:
    radial-gradient(circle at 30% 70%, rgba(255,200,150,.28) 0%, transparent 50%),
    linear-gradient(135deg, #6B4A2E 0%, #8C6240 60%, #B8915C 100%);
}
.prev-bakery-rustic .sc-eyebrow { background: rgba(248,238,222,.94); color: #4A2E1E; }

.prev-bakery-min {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0EDE6 100%);
  border-bottom: 1px solid rgba(28,39,51,0.08);
}
.prev-bakery-min .sc-eyebrow { background: #1c2733; color: #fff; }
.prev-bakery-min .sc-display { color: #1c2733; font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.prev-bakery-min .sc-display em { color: #1c2733; font-style: normal; font-weight: 300; }
.prev-bakery-min .sc-meta { color: rgba(28,39,51,.55); }
.prev-bakery-min .sc-rule { background: #1c2733; width: 24px; }

.prev-bakery-heri {
  background:
    radial-gradient(circle at 80% 30%, rgba(212,175,109,.22) 0%, transparent 50%),
    linear-gradient(135deg, #4A1F26 0%, #6B2C36 70%, #8C3A48 100%);
}
.prev-bakery-heri .sc-eyebrow { background: #D4AF6D; color: #2A0A0E; }
.prev-bakery-heri .sc-display em { color: #D4AF6D; }

.prev-izakaya {
  background:
    radial-gradient(circle at 25% 80%, rgba(255,90,160,0.35) 0%, transparent 45%),
    radial-gradient(circle at 75% 25%, rgba(255,200,80,0.4) 0%, transparent 45%),
    linear-gradient(135deg, #0A0E1A 0%, #1A0A1F 100%);
  position: relative;
}
.prev-izakaya::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,.012) 3px, rgba(255,255,255,.012) 4px);
  pointer-events: none;
}
.prev-izakaya .sc-eyebrow { background: rgba(255,200,80,.95); color: #1A0A1F; font-family: 'Noto Serif JP', serif; }
.prev-izakaya .sc-display { color: #FFCB66; text-shadow: 0 0 28px rgba(255,90,160,.55); }
.prev-izakaya .sc-display em { color: #FF5AA0; text-shadow: 0 0 18px rgba(255,90,160,.65); }
.prev-izakaya .sc-meta { color: rgba(255,255,255,.7); }

.prev-salon-bloom {
  background:
    radial-gradient(circle at 70% 30%, rgba(232,196,176,0.5) 0%, transparent 50%),
    linear-gradient(135deg, #FAF1EB 0%, #F2D5D5 60%, #E8C4B0 100%);
}
.prev-salon-bloom .sc-eyebrow { background: #4A2A2A; color: #FAF1EB; }
.prev-salon-bloom .sc-display { color: #4A2A2A; font-style: italic; font-family: 'Noto Serif JP', serif; }
.prev-salon-bloom .sc-display em { color: #B79A5F; font-style: italic; }
.prev-salon-bloom .sc-meta { color: rgba(74,42,42,.7); }
.prev-salon-bloom .sc-rule { background: rgba(74,42,42,.35); }

.prev-salon-mono {
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 24px, rgba(255,255,255,.05) 24px, rgba(255,255,255,.05) 25px),
    linear-gradient(135deg, #050505 0%, #1a1a1a 100%);
}
.prev-salon-mono .sc-eyebrow {
  background: #C8FF1A; color: #050505;
  border-radius: 0;
  font-family: 'Manrope', sans-serif;
}
.prev-salon-mono .sc-display { color: #fff; }
.prev-salon-mono .sc-display em { color: #C8FF1A; font-style: normal; }
.prev-salon-mono .sc-rule { background: #C8FF1A; }

.prev-seitai {
  background:
    radial-gradient(circle at 80% 80%, rgba(200,230,224,.5) 0%, transparent 50%),
    linear-gradient(135deg, #1B2C4A 0%, #2A4060 70%, #1B2C4A 100%);
}
.prev-seitai .sc-eyebrow { background: #C8E6E0; color: #1B2C4A; }
.prev-seitai .sc-display { color: #FAFCFB; font-family: 'Noto Serif JP', serif; }
.prev-seitai .sc-display em { color: #C8E6E0; font-style: italic; }
.prev-seitai .sc-rule { background: rgba(200,230,224,.5); }

/* === Ramen === */
.prev-ramen {
  background:
    radial-gradient(circle at 30% 20%, rgba(198,141,47,0.32) 0%, transparent 50%),
    linear-gradient(135deg, #1A1410 0%, #A8281C 75%, #1A1410 100%);
}
.prev-ramen .sc-eyebrow { background: #C68D2F; color: #1A1410; font-family: 'Noto Serif JP', serif; }
.prev-ramen .sc-display { color: #F8F1E3; font-family: 'Noto Serif JP', serif; font-weight: 800; }
.prev-ramen .sc-display em { color: #C68D2F; font-style: normal; }
.prev-ramen .sc-rule { background: #C68D2F; }
.prev-ramen .sc-meta { color: rgba(248,241,227,.7); }

/* === Sushi === */
.prev-sushi {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 36px, rgba(168,138,75,0.06) 36px, rgba(168,138,75,0.06) 37px),
    linear-gradient(135deg, #0F0E0C 0%, #1E3654 100%);
}
.prev-sushi .sc-eyebrow { background: #A88A4B; color: #0F0E0C; }
.prev-sushi .sc-display { color: #F4EFE3; font-family: 'Noto Serif JP', serif; }
.prev-sushi .sc-display em { color: #A88A4B; font-style: italic; font-family: 'Cormorant Garamond', serif; }
.prev-sushi .sc-rule { background: #A88A4B; }
.prev-sushi .sc-meta { color: rgba(244,239,227,.65); }

/* === Bistro === */
.prev-bistro {
  background:
    radial-gradient(circle at 70% 30%, rgba(184,148,100,0.3) 0%, transparent 50%),
    linear-gradient(135deg, #5C1F22 0%, #2A1810 100%);
}
.prev-bistro .sc-eyebrow { background: #B89464; color: #2A1810; font-family: 'Lora', serif; font-style: italic; letter-spacing: .18em; }
.prev-bistro .sc-display { color: #F4EAD8; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; }
.prev-bistro .sc-display em { color: #B89464; }
.prev-bistro .sc-rule { background: #B89464; }
.prev-bistro .sc-meta { color: rgba(244,234,216,.7); font-family: 'Lora', serif; font-style: italic; }

/* === Fitness === */
.prev-fitness {
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 24px, rgba(200,255,26,0.05) 24px, rgba(200,255,26,0.05) 25px),
    linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%);
}
.prev-fitness .sc-eyebrow { background: #C8FF1A; color: #0A0A0A; border-radius: 0; font-family: 'Manrope', sans-serif; }
.prev-fitness .sc-display { color: #fff; }
.prev-fitness .sc-display em { color: #C8FF1A; font-style: normal; }
.prev-fitness .sc-rule { background: #C8FF1A; }

/* === Dental === */
.prev-dental {
  background:
    radial-gradient(circle at 80% 80%, rgba(125,196,160,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #F1F6FB 0%, #FBFCFE 70%, #E7F0F6 100%);
  border: 1.5px solid rgba(31,42,61,0.08);
}
.prev-dental .sc-eyebrow { background: #3DA9D8; color: #fff; }
.prev-dental .sc-display { color: #1F2A3D; font-family: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif; font-weight: 700; }
.prev-dental .sc-display em { color: #3DA9D8; font-style: normal; font-weight: 700; }
.prev-dental .sc-rule { background: #3DA9D8; }
.prev-dental .sc-meta { color: rgba(31,42,61,.6); }

/* === 新規15テンプレ（16-30）プレビュー CSS === */

/* №16 Yoga */
.prev-yoga {
  background:
    radial-gradient(circle at 80% 30%, rgba(232,196,176,0.4) 0%, transparent 50%),
    linear-gradient(135deg, #2F3E2A 0%, #4F5E3B 60%, #BFAA6B 130%);
}
.prev-yoga .sc-eyebrow { background: rgba(255,255,255,0.92); color: #2F3E2A; }
.prev-yoga .sc-display em { color: #D4B574; font-style: italic; }
.prev-yoga .sc-rule { background: rgba(255,255,255,0.5); }

/* №17 Wine */
.prev-wine {
  background:
    radial-gradient(circle at 30% 30%, rgba(212,175,109,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #1A0D14 0%, #4A1F2A 100%);
}
.prev-wine .sc-eyebrow { background: #B4915A; color: #1A0D14; font-family: 'Noto Serif JP', serif; font-style: italic; }
.prev-wine .sc-display em { color: #C49568; font-style: italic; }
.prev-wine .sc-rule { background: #B4915A; }
.prev-wine .sc-meta { color: rgba(244,234,216,0.75); }

/* №18 Tea */
.prev-tea {
  background:
    radial-gradient(circle at 70% 20%, rgba(245,240,225,0.4) 0%, transparent 50%),
    linear-gradient(135deg, #F5F0E1 0%, #E0D8C0 100%);
  border-bottom: 1px solid rgba(28,39,51,0.08);
}
.prev-tea .sc-eyebrow { background: #2A4A2A; color: #F5F0E1; }
.prev-tea .sc-display { color: #1A2818; font-family: 'Noto Serif JP', serif; }
.prev-tea .sc-display em { color: #2A4A2A; font-style: normal; }
.prev-tea .sc-rule { background: rgba(42,74,42,0.5); }
.prev-tea .sc-meta { color: rgba(26,40,24,0.65); }

/* №19 Craft Beer */
.prev-beer {
  background:
    radial-gradient(circle at 30% 80%, rgba(255,180,80,0.4) 0%, transparent 50%),
    linear-gradient(135deg, #2A1810 0%, #6B3F1F 60%, #C68B3C 130%);
}
.prev-beer .sc-eyebrow { background: #FFB84A; color: #2A1810; font-family: 'Manrope', sans-serif; }
.prev-beer .sc-display em { color: #FFB84A; font-style: normal; font-weight: 800; }
.prev-beer .sc-rule { background: #FFB84A; }

/* №20 Korean BBQ */
.prev-korean {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,200,80,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #1F0A0A 0%, #C8281C 100%);
}
.prev-korean .sc-eyebrow { background: #FFC850; color: #1F0A0A; }
.prev-korean .sc-display em { color: #FFC850; font-style: normal; }
.prev-korean .sc-rule { background: #FFC850; }

/* №21 Soba */
.prev-soba {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(28,39,51,0.04) 40px, rgba(28,39,51,0.04) 41px),
    linear-gradient(135deg, #F0EAD8 0%, #D8CCB0 100%);
}
.prev-soba .sc-eyebrow { background: #2D4A6A; color: #F0EAD8; }
.prev-soba .sc-display { color: #1A2838; font-family: 'Noto Serif JP', serif; }
.prev-soba .sc-display em { color: #2D4A6A; font-style: italic; }
.prev-soba .sc-rule { background: rgba(45,74,106,0.5); }
.prev-soba .sc-meta { color: rgba(26,40,56,0.65); }

/* №22 Gelato */
.prev-gelato {
  background:
    radial-gradient(circle at 70% 30%, rgba(255,200,210,0.5) 0%, transparent 50%),
    linear-gradient(135deg, #FFEEEC 0%, #FFD6E0 50%, #C8E8F0 130%);
}
.prev-gelato .sc-eyebrow { background: #E85A8C; color: #fff; }
.prev-gelato .sc-display { color: #4A1F2A; }
.prev-gelato .sc-display em { color: #E85A8C; font-style: italic; }
.prev-gelato .sc-rule { background: #E85A8C; }
.prev-gelato .sc-meta { color: rgba(74,31,42,0.65); }

/* №23 Crêpe */
.prev-crepe {
  background:
    radial-gradient(circle at 30% 70%, rgba(255,180,200,0.45) 0%, transparent 50%),
    linear-gradient(135deg, #FFE1E8 0%, #FFB8C8 100%);
}
.prev-crepe .sc-eyebrow { background: #B83E58; color: #fff; }
.prev-crepe .sc-display { color: #4A1A2A; font-family: 'Noto Serif JP', serif; }
.prev-crepe .sc-display em { color: #B83E58; font-style: italic; }
.prev-crepe .sc-rule { background: rgba(184,62,88,0.5); }
.prev-crepe .sc-meta { color: rgba(74,26,42,0.65); }

/* №24 Nail */
.prev-nail {
  background:
    radial-gradient(circle at 70% 30%, rgba(212,175,109,0.4) 0%, transparent 50%),
    linear-gradient(135deg, #2A1820 0%, #4A2840 100%);
}
.prev-nail .sc-eyebrow { background: #D4AF6D; color: #2A1820; font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: 0.18em; }
.prev-nail .sc-display em { color: #D4AF6D; font-style: italic; }
.prev-nail .sc-rule { background: #D4AF6D; }

/* №25 Acupuncture */
.prev-acupuncture {
  background:
    radial-gradient(circle at 80% 20%, rgba(212,175,109,0.2) 0%, transparent 50%),
    linear-gradient(135deg, #1F2C42 0%, #3A4E68 100%);
}
.prev-acupuncture .sc-eyebrow { background: #B83A3A; color: #F8F1E3; font-family: 'Noto Serif JP', serif; }
.prev-acupuncture .sc-display { color: #F8F1E3; font-family: 'Noto Serif JP', serif; }
.prev-acupuncture .sc-display em { color: #D4AF6D; font-style: italic; }
.prev-acupuncture .sc-rule { background: #D4AF6D; }
.prev-acupuncture .sc-meta { color: rgba(248,241,227,0.7); }

/* №26 Florist */
.prev-florist {
  background:
    radial-gradient(circle at 30% 70%, rgba(184,156,108,0.3) 0%, transparent 50%),
    linear-gradient(135deg, #F4ECD8 0%, #E0CDA8 50%, #B8916C 130%);
}
.prev-florist .sc-eyebrow { background: #5C4A2A; color: #F4ECD8; font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: 0.2em; }
.prev-florist .sc-display { color: #3A2E18; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; }
.prev-florist .sc-display em { color: #8B6840; font-style: italic; }
.prev-florist .sc-rule { background: rgba(58,46,24,0.4); }
.prev-florist .sc-meta { color: rgba(58,46,24,0.65); }

/* №27 Dance */
.prev-dance {
  background:
    radial-gradient(circle at 30% 30%, rgba(232,90,200,0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(80,180,255,0.4) 0%, transparent 50%),
    linear-gradient(135deg, #1A0828 0%, #2A0A4A 100%);
}
.prev-dance .sc-eyebrow { background: #C8FF1A; color: #1A0828; border-radius: 0; font-family: 'Manrope', sans-serif; }
.prev-dance .sc-display em { color: #FF5AA0; font-style: normal; }
.prev-dance .sc-rule { background: #C8FF1A; }

/* №28 Boxing */
.prev-boxing {
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 24px, rgba(255,255,255,0.04) 24px, rgba(255,255,255,0.04) 25px),
    linear-gradient(135deg, #050505 0%, #1A0A0A 100%);
}
.prev-boxing .sc-eyebrow { background: #C8281C; color: #fff; border-radius: 0; font-family: 'Manrope', sans-serif; font-weight: 800; }
.prev-boxing .sc-display em { color: #C8281C; font-style: normal; font-weight: 800; }
.prev-boxing .sc-rule { background: #C8281C; }

/* №29 Piano */
.prev-piano {
  background:
    radial-gradient(circle at 70% 30%, rgba(212,175,109,0.2) 0%, transparent 50%),
    linear-gradient(135deg, #0F1428 0%, #1F2C4A 80%, #5C5A8A 130%);
}
.prev-piano .sc-eyebrow { background: #D4AF6D; color: #0F1428; font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: 0.22em; }
.prev-piano .sc-display { color: #F4ECD8; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; }
.prev-piano .sc-display em { color: #D4AF6D; font-style: italic; }
.prev-piano .sc-rule { background: #D4AF6D; }
.prev-piano .sc-meta { color: rgba(244,236,216,0.7); }

/* №30 Pediatric */
.prev-pediatric {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,232,140,0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(140,210,240,0.4) 0%, transparent 50%),
    linear-gradient(135deg, #FFF8E0 0%, #E0F0FC 100%);
  border-bottom: 1px solid rgba(28,39,51,0.08);
}
.prev-pediatric .sc-eyebrow { background: #5BA0D8; color: #fff; }
.prev-pediatric .sc-display { color: #1F3A5C; }
.prev-pediatric .sc-display em { color: #5BA0D8; font-style: normal; font-weight: 800; }
.prev-pediatric .sc-rule { background: #5BA0D8; }
.prev-pediatric .sc-meta { color: rgba(31,58,92,0.6); }

/* === info area === */
.show-card.v2 .sc-info {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.show-card.v2 .sc-info h3 {
  font-family: var(--f-display, 'Noto Serif JP', serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink, #1c2733);
  display: flex; flex-direction: column; gap: 4px;
  margin: 0;
}
.show-card.v2 .sc-info h3 .sc-ja {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--c-mute, #607080);
  letter-spacing: 0;
  font-family: var(--f-body, 'Noto Sans JP', sans-serif);
}
.show-card.v2 .sc-info p {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--c-ink-soft, #3a4654);
  margin: 0;
}
.show-card.v2 .sc-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.show-card.v2 .sc-tags span {
  font-family: 'Manrope', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft, #3a4654);
  padding: 4px 9px;
  border: 1px solid rgba(28,39,51,0.18);
  border-radius: 999px;
}
.show-card.v2 .sc-cta {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-accent-coral, #C8442B);
  margin-top: 0.4rem;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.25s var(--ease, ease);
}
.show-card.v2:hover .sc-cta { gap: 14px; }

/* === filter-btn count badge === */
.filter-btn span {
  display: inline-block;
  margin-left: 6px;
  font-family: 'Manrope', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.55;
}

/* === iframe プレビュー (2026-05-12 大規模改修：実HPプレビュー化) === */
.sc-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-cream, #FFFCF7);
  border-bottom: 1px solid rgba(28,39,51,0.06);
  isolation: isolate;
}
.sc-iframe-wrap iframe {
  /* 1200×750 相当の実サイトを 0.5 倍縮小して表示。pointer-events: none でクリック貫通 */
  position: absolute;
  top: 0; left: 0;
  width: 200%;  /* 縮小して2倍幅を確保 → カード幅 = 元サイト幅 */
  height: 200%;
  border: 0;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;  /* show-link-overlay にクリックを通す */
  background: var(--c-cream, #FFFCF7);
}
/* iframe 読み込み中のフォールバック背景（loading="lazy" 時） */
.sc-iframe-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(28,39,51,0.04) 0%, rgba(28,39,51,0.08) 100%);
  z-index: 0;
}
.sc-iframe-wrap iframe { z-index: 1; }

/* ホバーで微かな浮き */
.show-card.v2:hover .sc-iframe-wrap iframe {
  transition: transform 0.5s var(--ease, cubic-bezier(.2,.8,.2,1));
}

/* === 親子フィルタ UI（2026-05-12 大規模改修） === */
.showcase-filter-wrap {
  margin-bottom: 2.5rem;
}
.parent-filter {
  margin-bottom: 12px;
}
.parent-filter .filter-btn {
  font-size: 0.86rem;
  padding: 0.6rem 1.2rem;
  font-weight: 700;
}
.parent-filter .filter-btn span.count {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(28,39,51,0.08);
  color: var(--c-ink-soft, #3a4654);
  font-family: 'Manrope', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 1;
}
.parent-filter .filter-btn.active span.count {
  background: rgba(255,255,255,0.18);
  color: var(--c-paper, #fff);
}

/* 子チップエリア：min-height で常に高さを予約してレイアウトガタつき防止（psychologist 指摘） */
.child-filter {
  min-height: 56px;
  padding: 10px 14px;
  background: rgba(28,39,51,0.03);
  border-radius: 16px;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.22s ease, background 0.3s ease;
  pointer-events: none;
}
.child-filter[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  background: rgba(244,165,55,0.06);
}
.child-filter .filter-btn {
  font-size: 0.74rem;
  padding: 0.38rem 0.85rem;
  background: var(--c-paper, #fff);
  border: 1px solid rgba(28,39,51,0.1);
  color: var(--c-ink-soft, #3a4654);
}
.child-filter .filter-btn.active {
  background: var(--c-coral, #C8442B);
  color: #fff;
  border-color: var(--c-coral, #C8442B);
}
.child-filter .filter-btn span.count {
  margin-left: 6px;
  font-family: 'Manrope', monospace;
  font-size: 0.62rem;
  opacity: 0.6;
}
.child-filter .filter-btn.active span.count {
  opacity: 0.9;
}
.child-filter[data-open="false"] {
  /* 閉じている時も min-height は維持し、フェードアウト */
}
/* チップが多い時のモバイル横スクロール対応 */
@media (max-width: 720px) {
  .child-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .parent-filter .filter-btn { font-size: 0.74rem; padding: 0.45rem 0.85rem; }
  .parent-filter .filter-btn span.count { font-size: 0.62rem; padding: 1px 5px; }
  .child-filter .filter-btn { font-size: 0.68rem; padding: 0.32rem 0.7rem; flex-shrink: 0; }
}

/* ===========================
   Buttons
   =========================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  font-family: var(--font-en); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.04em;
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.btn-primary {
  background: var(--c-ink); color: var(--c-paper);
}
.btn-primary:hover { background: var(--c-coral); color: var(--c-ink); transform: translateY(-2px); }
.btn-text {
  color: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-line-strong); border-radius: 0;
  padding: 0.5rem 0;
}
.btn-text:hover { color: var(--c-coral); border-color: var(--c-coral); }
.btn-large { padding: 1.15rem 2.4rem; font-size: 1rem; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.6s ease;
}
.btn:hover::after { left: 100%; }

/* ===========================
   Section common
   =========================== */
section { padding: var(--gap-xl) 0; }
.section-eyebrow {
  font-family: var(--font-en); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-coral); display: block; margin-bottom: 1rem;
}
.section-title {
  font-family: var(--font-jp); font-weight: 900;
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.32;
  letter-spacing: 0.02em; margin-bottom: 2.5rem;
}
.section-title em {
  font-family: var(--font-serif); font-weight: 700; font-style: italic;
  color: var(--c-coral);
}
.section-lead {
  font-size: 1.05rem; line-height: 2;
  color: var(--c-ink-soft); max-width: 38rem; margin-bottom: 2.5rem;
}

/* ===========================
   About
   =========================== */
.about { background: var(--c-paper); }
.about-lead {
  font-size: 1.1rem; line-height: 2.1;
  max-width: 50rem; margin-bottom: 3rem;
  color: var(--c-ink-soft);
}
.about-lead b { color: var(--c-ink); font-weight: 700; }
.about-pillars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
}
@media (max-width: 1024px) {
  .about-pillars { grid-template-columns: repeat(2, 1fr); }
}
.pillar {
  padding: 2rem 1.8rem;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--c-coral);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pillar:nth-child(2) { border-top-color: var(--c-moss); }
.pillar:nth-child(3) { border-top-color: var(--c-ink); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar-icon {
  width: 56px; height: 56px; margin-bottom: 1.2rem;
  background: var(--c-cream); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-ink);
}
.pillar-icon svg { width: 26px; height: 26px; }
.pillar h3 {
  font-family: var(--font-jp); font-weight: 700; font-size: 1.25rem;
  margin-bottom: 0.6rem;
}
.pillar p { color: var(--c-ink-soft); font-size: 0.95rem; }

/* ===========================
   Showcase
   =========================== */
.showcase { background: var(--c-cream); }
.showcase-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  margin-bottom: 2.5rem;
  background: var(--c-white);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: var(--font-en); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.06em; color: var(--c-ink-soft);
  transition: all 0.3s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.filter-btn.active {
  background: var(--c-ink); color: var(--c-paper);
}
.filter-btn:hover:not(.active) {
  color: var(--c-coral);
  border-color: rgba(244,165,55,0.4);
}
@media (max-width: 720px) {
  .showcase-filter { gap: 4px; padding: 10px 12px; }
  .filter-btn { padding: 0.4rem 0.8rem; font-size: 0.72rem; }
  .filter-btn span { font-size: 0.6rem; }
}

.showcase-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}
.show-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.show-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
/* 2026-05-12 mobile filter bug fix:
   モバイル CSS (line ~1922) で `.show-card.v2 { display: flex !important }` を
   後段で指定しているため、!important なしの display:none が上書きされて
   モバイルでフィルタが効かなかった（CEO 報告）。
   「隠す」側に !important を付けて、!important 同士で詳細度比較され
   data-hidden 付きセレクタが勝つように修正。
*/
.show-card[data-hidden="true"],
.show-card.v2[data-hidden="true"],
.show-card[data-position="hidden"],
.show-card.v2[data-position="hidden"] {
  display: none !important;
}
.show-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-cream);
}
.show-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform 0.6s var(--ease);
}
.show-card:hover .show-img img { transform: scale(1.04); }
.show-body { padding: 1.4rem 1.6rem; }
.show-tag {
  display: inline-block;
  font-family: var(--font-en); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px;
  background: var(--c-cream); color: var(--c-ink-soft);
  border-radius: 999px; margin-bottom: 0.8rem;
}
.show-body h3 {
  font-family: var(--font-en); font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.01em; margin-bottom: 0.5rem;
}
.show-body p {
  font-size: 0.9rem; color: var(--c-ink-soft); margin-bottom: 1rem;
}
.show-link {
  font-family: var(--font-en); font-weight: 700; font-size: 0.85rem;
  color: var(--c-coral); letter-spacing: 0.04em;
}
.showcase-note {
  margin-top: 2.5rem;
  font-size: 0.85rem; color: var(--c-mute); text-align: center;
}

/* ===========================
   Cases — 10 sample stores
   =========================== */
.cases { background: var(--c-paper); }
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin: 2.4rem 0 2rem;
}
@media (min-width: 1100px) {
  .cases-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cases-grid { grid-template-columns: 1fr; gap: 1.2rem; }
}
.case-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease, cubic-bezier(.2,.8,.2,1)), box-shadow 0.4s var(--ease, cubic-bezier(.2,.8,.2,1));
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px -16px rgba(28,39,51,0.25);
}
.case-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 1rem;
}
.case-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.case-no {
  position: relative; z-index: 2;
  font-family: var(--font-en, 'Manrope', sans-serif);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em;
  color: #fff;
  background: rgba(0,0,0,0.35);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.case-body {
  padding: 1.2rem 1.4rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.case-tag {
  font-family: var(--font-en, 'Manrope', sans-serif);
  font-size: 0.66rem; letter-spacing: 0.22em; font-weight: 700;
  text-transform: uppercase;
  color: var(--c-coral, #C8442B);
  align-self: flex-start;
}
.case-body h3 {
  font-family: var(--font-jp); font-weight: 700; font-size: 1.15rem;
  color: var(--c-ink);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
}
.case-body h3 span {
  font-size: 0.75rem; font-weight: 400; color: var(--c-mute);
}
.case-tpl {
  font-family: var(--font-en, 'Manrope', sans-serif);
  font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  padding: 4px 0; border-bottom: 1px solid var(--c-line);
}
.case-desc {
  font-size: 0.85rem; line-height: 1.7;
  color: var(--c-ink-soft);
}
.case-meta {
  display: flex; gap: 0.8rem; flex-wrap: wrap;
  margin-top: auto; padding-top: 0.4rem;
}
.case-meta span {
  font-family: var(--font-en, 'Manrope', sans-serif);
  font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--c-mute);
  padding: 3px 8px;
  background: var(--c-cream);
  border-radius: 999px;
}
.cases-note {
  font-size: 0.78rem; color: var(--c-mute);
  text-align: center; margin-top: 1.6rem;
  line-height: 1.7;
}

/* === Case thumbnails (Unsplash) === */
.cs-th-cafe-cali {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%), url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1200&q=80&auto=format&fit=crop');
}
.cs-th-bakery-min {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%), url('https://images.unsplash.com/photo-1509440159596-0249088772ff?w=1200&q=80&auto=format&fit=crop');
}
.cs-th-izakaya {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1200&q=80&auto=format&fit=crop');
}
.cs-th-salon-bloom {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%), url('https://images.unsplash.com/photo-1562322140-8baeececf3df?w=1200&q=80&auto=format&fit=crop');
}
.cs-th-seitai {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1200&q=80&auto=format&fit=crop');
}
.cs-th-ramen {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%), url('https://images.unsplash.com/photo-1557872943-16a5ac26437e?w=1200&q=80&auto=format&fit=crop');
}
.cs-th-sushi {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%), url('https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=1200&q=80&auto=format&fit=crop');
}
.cs-th-bistro {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%), url('https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=1200&q=80&auto=format&fit=crop');
}
.cs-th-fitness {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.3) 100%), url('https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=1200&q=80&auto=format&fit=crop');
}
.cs-th-dental {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%), url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=1200&q=80&auto=format&fit=crop');
}

/* ===========================
   Flow timeline
   =========================== */
.flow { background: var(--c-cream); }
.flow-steps {
  position: relative; padding-left: 60px;
  max-width: 56rem;
}
.flow-steps::before {
  content: "";
  position: absolute; left: 22px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(to bottom, var(--c-coral) 0%, var(--c-moss) 100%);
}
.flow-step {
  position: relative; padding-bottom: 2.5rem;
}
.flow-step::before {
  content: "";
  position: absolute; left: -52px; top: 8px;
  width: 16px; height: 16px;
  background: var(--c-paper);
  border: 3px solid var(--c-coral);
  border-radius: 50%;
}
.flow-step:nth-child(2)::before { border-color: var(--c-coral); }
.flow-step:nth-child(3)::before { border-color: var(--c-moss); }
.flow-step:nth-child(4)::before { border-color: var(--c-moss); }
.flow-step:nth-child(5)::before { border-color: var(--c-ink); background: var(--c-ink); }
.flow-num {
  font-family: var(--font-en); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.22em; color: var(--c-mute);
  display: block; margin-bottom: 0.4rem;
}
.flow-icon { margin-bottom: 0.7rem; color: var(--c-ink); }
.flow-icon svg { width: 36px; height: 36px; }
.flow-step h3 {
  font-family: var(--font-jp); font-weight: 700; font-size: 1.4rem;
  margin-bottom: 0.4rem;
}
.flow-time {
  font-family: var(--font-en); font-weight: 600; font-size: 0.85rem;
  color: var(--c-coral); letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.flow-step p:last-child { color: var(--c-ink-soft); max-width: 38rem; }

/* ===========================
   Price
   =========================== */
.price { background: var(--c-paper); }
.price-main {
  background: var(--c-ink); color: var(--c-paper);
  border-radius: var(--radius-lg);
  padding: 3rem 2.4rem;
  text-align: center;
  margin-bottom: 3rem;
  box-shadow: var(--shadow-lg);
}
.price-label {
  font-family: var(--font-en); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-coral-soft); margin-bottom: 0.8rem;
}
.price-amount {
  font-family: var(--font-en); font-weight: 800;
  font-size: clamp(4rem, 9vw, 7rem); line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-paper); margin-bottom: 0.8rem;
}
.price-tagline {
  font-size: 1rem; color: rgba(250, 250, 247, 0.85);
  margin-bottom: 2rem;
}
.price-includes {
  text-align: left; max-width: 40rem; margin: 0 auto;
  display: grid; gap: 0.5rem;
}
.price-includes li {
  padding-left: 1.6rem; position: relative;
  font-size: 0.95rem; color: var(--c-paper);
}
.price-includes li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--c-coral-soft); font-weight: 800;
}

.price-options-title {
  font-family: var(--font-jp); font-weight: 700; font-size: 1.5rem;
  margin-bottom: 0.6rem; text-align: center;
}
.price-options-lead {
  font-size: 0.95rem; color: var(--c-ink-soft);
  text-align: center; margin-bottom: 2rem;
}
.price-options-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}
.price-option-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-sm);
}
.price-option-card h4 {
  font-family: var(--font-jp); font-weight: 700; font-size: 1.2rem;
  margin-bottom: 1rem; color: var(--c-coral);
  padding-bottom: 0.6rem; border-bottom: 2px solid var(--c-coral);
}
.price-option-card ul { display: grid; gap: 0.7rem; }
.price-option-card li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px solid var(--c-line);
  font-size: 0.95rem;
}
.price-option-card li:last-child { border-bottom: 0; }
.price-option-card li span:last-child {
  font-family: var(--font-en); font-weight: 700;
  color: var(--c-ink);
}
.month-amount {
  font-family: var(--font-en); font-weight: 800; font-size: 2.4rem;
  color: var(--c-ink); margin-bottom: 1rem;
}
.month-amount small { font-size: 1rem; color: var(--c-mute); margin-left: 0.3rem; }

/* === Price options v2: 都度 + 3段月額 === */
.price-options-grid.v2 {
  display: grid;
  grid-template-columns: 0.8fr 1.6fr;
  gap: var(--gap-md);
  align-items: stretch;
}
@media (max-width: 1024px) {
  .price-options-grid.v2 { grid-template-columns: 1fr; }
}
.price-option-card.pay-once .opt-desc {
  font-size: 0.85rem; color: var(--c-mute); margin-bottom: 1rem;
}

/* 月額3段プラン */
.price-tiers {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.price-tier-h {
  font-family: var(--font-jp); font-weight: 700; font-size: 1.2rem;
  margin-bottom: 1.4rem; color: var(--c-coral);
  padding-bottom: 0.6rem; border-bottom: 2px solid var(--c-coral);
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.price-tier-h small {
  font-family: var(--font-jp); font-weight: 400; font-size: 0.78rem;
  color: var(--c-mute);
}
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  flex: 1;
}
.tier-grid.tier-grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}
@media (max-width: 1100px) {
  .tier-grid.tier-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .tier-grid, .tier-grid.tier-grid-4 { grid-template-columns: 1fr; }
}
.tier-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.4rem 1.2rem;
  border-radius: var(--radius);
  background: var(--c-cream, #FFFCF7);
  border: 1.5px solid rgba(28,39,51,0.08);
  transition: transform 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}
.tier-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244,165,55,0.4);
}
.tier-card .tier-name {
  font-family: var(--font-en); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: 0.4rem;
}
.tier-card .tier-amount {
  font-family: var(--font-en); font-weight: 800;
  font-size: 1.7rem; color: var(--c-ink);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.tier-card .tier-amount small {
  font-size: 0.78rem; font-weight: 500;
  color: var(--c-mute); margin-left: 0.2rem;
}
.tier-card ul {
  display: flex; flex-direction: column; gap: 0.5rem;
  list-style: none; padding: 0; margin: 0;
}
.tier-card li {
  font-size: 0.82rem; line-height: 1.55;
  color: var(--c-ink-soft);
  padding-left: 1rem; position: relative;
}
.tier-card li::before {
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--c-coral, #F4A537);
}
.tier-card li b { color: var(--c-ink); font-weight: 700; }

/* スタンダードを際立たせる */
.tier-card.tier-standard {
  background: linear-gradient(180deg, #FFFAF1 0%, #FFFCF7 100%);
  border-color: var(--c-coral, #F4A537);
  box-shadow: 0 8px 28px -10px rgba(244,165,55,0.35);
  transform: scale(1.02);
}
.tier-card.tier-standard:hover { transform: scale(1.02) translateY(-3px); }
.tier-card.tier-standard .tier-name { color: var(--c-coral); }
.tier-card.tier-standard .tier-amount { color: var(--c-coral); }
.tier-badge {
  position: absolute; top: -10px; right: 14px;
  background: var(--c-coral, #F4A537);
  color: #fff;
  font-family: var(--font-jp); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(244,165,55,0.5);
}

.tier-card.tier-pro .tier-amount { color: #5C7C68; }

/* 無制限プラン (VIP) */
.tier-card.tier-unlimited {
  background: linear-gradient(180deg, #1B2C4A 0%, #2A4060 100%);
  color: #F4F2EC;
  border-color: #B79A5F;
  box-shadow: 0 12px 32px -12px rgba(27,44,74,0.5);
}
.tier-card.tier-unlimited:hover {
  border-color: #D4B574;
  transform: translateY(-3px);
}
.tier-card.tier-unlimited .tier-name { color: #B79A5F; letter-spacing: 0.22em; }
.tier-card.tier-unlimited .tier-amount { color: #F4F2EC; }
.tier-card.tier-unlimited .tier-amount small { color: rgba(244,242,236,0.65); }
.tier-card.tier-unlimited li { color: rgba(244,242,236,0.85); }
.tier-card.tier-unlimited li::before { color: #B79A5F; }
.tier-card.tier-unlimited li b { color: #fff; }
.tier-badge.tier-badge-vip {
  background: linear-gradient(135deg, #D4B574 0%, #B79A5F 100%);
  color: #1B2C4A;
  box-shadow: 0 4px 12px -4px rgba(183,154,95,0.6);
}

/* ===========================
   Compare table (大手 vs DRAI)
   =========================== */
.compare { background: var(--c-paper); }
.compare-table {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--c-line);
  margin-top: 2rem;
}
.compare-head, .compare-row {
  display: grid; grid-template-columns: 0.8fr 1fr 1fr;
  border-bottom: 1px solid var(--c-line);
}
.compare-row:last-child { border-bottom: 0; }
.compare-head {
  background: var(--c-cream);
  font-family: var(--font-en); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.compare-cell {
  padding: 1.4rem 1.6rem;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--c-line);
}
.compare-cell:last-child { border-right: 0; }
.compare-cell.compare-label, .compare-cell.compare-label-h {
  font-family: var(--font-jp); font-weight: 700; font-size: 0.9rem;
  background: var(--c-cream); color: var(--c-ink-soft);
  letter-spacing: 0.04em;
}
.compare-cell.compare-other {
  color: var(--c-ink-soft);
  border-left: 4px solid transparent;
}
.compare-cell.compare-self {
  background: linear-gradient(135deg, rgba(244, 165, 55, 0.06) 0%, rgba(92, 124, 104, 0.04) 100%);
  border-left: 4px solid var(--c-coral);
  color: var(--c-ink);
}
.compare-cell.compare-self.compare-label-h,
.compare-head .compare-cell.compare-self {
  background: var(--c-ink); color: var(--c-paper);
  font-weight: 800; letter-spacing: 0.06em;
  border-left: 0;
}
.compare-head .compare-cell.compare-other {
  background: var(--c-cream); color: var(--c-ink-soft);
}
.compare-cell .big {
  font-family: var(--font-en); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -0.01em; color: var(--c-ink);
}
.compare-cell .big small {
  font-family: var(--font-jp); font-weight: 500; font-size: 0.85rem;
  color: var(--c-mute); margin-left: 0.2rem;
}
.compare-cell.compare-other .big { color: var(--c-ink-soft); }
.compare-cell .big-warn { color: var(--c-mute) !important; }
.compare-cell .big-good { color: var(--c-coral); }
.compare-cell small {
  display: inline-block; margin-top: 0.3rem;
  font-size: 0.78rem; color: var(--c-mute);
}
.compare-row-final {
  background: rgba(28, 39, 51, 0.03);
}
.compare-row-final .compare-cell .big {
  font-size: 1.85rem;
}
.compare-note {
  margin-top: 1.6rem;
  font-size: 0.82rem; color: var(--c-mute); line-height: 1.9;
  text-align: center;
}

/* ===========================
   FAQ
   =========================== */
.faq { background: var(--c-cream); }
.faq-list { max-width: 50rem; margin: 0 auto; }
.faq-item {
  background: var(--c-white);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  padding: 1.2rem 1.6rem;
  font-family: var(--font-jp); font-weight: 700; font-size: 1rem;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  transition: color 0.3s var(--ease);
}
.faq-item summary::after {
  content: "+";
  font-family: var(--font-en); font-weight: 400; font-size: 1.4rem;
  color: var(--c-coral);
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--c-coral); }
.faq-item p {
  padding: 0 1.6rem 1.4rem;
  color: var(--c-ink-soft); font-size: 0.95rem; line-height: 2;
}

/* ===========================
   Contact form
   =========================== */
.contact { background: var(--c-paper); }
.contact-lead {
  font-size: 1.05rem; color: var(--c-ink-soft);
  max-width: 40rem; margin-bottom: 2.5rem;
}
.contact-lead b { color: var(--c-ink); font-weight: 700; }
.contact-form {
  max-width: 38rem;
  display: grid; gap: 1.4rem;
}
.form-row {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.form-label {
  font-family: var(--font-jp); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.form-label em {
  display: inline-block; margin-left: 0.4rem;
  font-family: var(--font-en); font-weight: 700; font-size: 0.65rem;
  letter-spacing: 0.1em;
  background: var(--c-coral); color: var(--c-ink);
  padding: 2px 8px; border-radius: 999px;
}
.form-label small {
  font-family: var(--font-jp); font-weight: 400; font-size: 0.8rem;
  color: var(--c-mute); margin-left: 0.4rem;
}
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: var(--font-jp); font-size: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink);
  transition: border-color 0.3s var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 0;
  border-color: var(--c-coral);
}
.contact-form textarea { resize: vertical; min-height: 96px; }
.contact-form .btn { justify-self: start; }
.form-note {
  font-size: 0.85rem; color: var(--c-mute);
  margin-top: 0.5rem;
}
.form-note b { color: var(--c-ink); }

/* ===========================
   Footer
   =========================== */
.site-footer {
  background: var(--c-ink); color: var(--c-paper);
  padding: var(--gap-lg) 0 var(--gap-md);
}
.footer-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid rgba(250, 250, 247, 0.1);
}
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-brand .brand-mark { background: var(--c-coral); color: var(--c-ink); }
.footer-brand .brand-name { color: var(--c-paper); font-size: 1.15rem; }
.footer-tagline {
  font-family: var(--font-en); font-style: italic;
  font-size: 0.85rem; color: var(--c-coral-soft);
  margin-top: 4px;
}
.footer-info { font-size: 0.92rem; color: rgba(250, 250, 247, 0.85); }
.footer-info p { margin-bottom: 0.5rem; }
.footer-info b { color: var(--c-paper); margin-right: 0.4rem; }
.footer-info a { color: var(--c-coral-soft); border-bottom: 1px dotted; }
.footer-portfolio-link {
  margin-top: 1rem;
}
.footer-portfolio-link a { color: var(--c-paper); font-weight: 700; }
.footer-portfolio-link a:hover { color: var(--c-coral); }
.footer-bottom {
  padding-top: var(--gap-md);
  text-align: center;
  font-size: 0.78rem; color: rgba(250, 250, 247, 0.5);
}

/* ===========================
   Modal
   =========================== */
.modal {
  position: fixed; inset: 0;
  background: rgba(28, 39, 51, 0.85);
  z-index: 300;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
  display: flex; align-items: center; justify-content: center;
  padding: var(--gap-md);
}
.modal[aria-hidden="false"] {
  opacity: 1; visibility: visible;
}
.modal-close {
  position: absolute; top: 1.4rem; right: 1.4rem;
  width: 44px; height: 44px;
  background: var(--c-paper); color: var(--c-ink);
  border-radius: 50%;
  font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center;
  transition: transform 0.3s var(--ease);
}
.modal-close:hover { transform: rotate(90deg); }
.modal-inner {
  background: var(--c-white);
  max-width: 900px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.modal-img {
  width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: top center;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.modal-title {
  font-family: var(--font-en); font-weight: 800; font-size: 2rem;
  margin-bottom: 0.6rem;
}
.modal-desc {
  font-size: 1rem; color: var(--c-ink-soft); line-height: 2;
  margin-bottom: 1.6rem;
}

/* ===========================
   Responsive: Tablet (≤1024)
   =========================== */
@media (max-width: 1024px) {
  :root { --gap-xl: 4.5rem; --gap-lg: 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-bento { aspect-ratio: 16 / 10; }
  .about-pillars { grid-template-columns: 1fr; gap: 1.4rem; }
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .price-options-grid { grid-template-columns: 1fr; }
  .compare-cell .big { font-size: 1.2rem; }
  .compare-row-final .compare-cell .big { font-size: 1.4rem; }
  .compare-cell { padding: 1.1rem 1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ===========================
   Responsive: Mobile (≤640)
   =========================== */
@media (max-width: 640px) {
  :root { --header-h: 64px; --gap-xl: 3.5rem; --gap-lg: 2rem; }
  .header-inner { padding: 0 1rem; gap: 0.6rem; }
  .brand-name { font-size: 0.92rem; }
  .brand-tag { display: none; }
  .nav-toggle { display: flex; order: 3; }
  .nav-list {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--c-white); padding: 1.5rem var(--gap-md);
    flex-direction: column; gap: 1rem;
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--c-line);
  }
  .nav-list.is-open { display: flex; }
  .cta-pill { padding: 0.5rem 0.9rem; font-size: 0.78rem; }
  .hero-stats { flex-direction: column; gap: 1rem; padding: 1.2rem 1.4rem; width: 100%; }
  .hero-bento { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); aspect-ratio: 4 / 3; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .showcase-grid { grid-template-columns: 1fr; }
  .price-main { padding: 2.4rem 1.6rem; }
  .price-amount { font-size: 4rem; }
  .compare-head, .compare-row {
    grid-template-columns: 1fr 1fr;
    position: relative;
  }
  .compare-cell.compare-label, .compare-cell.compare-label-h {
    grid-column: 1 / -1;
    background: var(--c-ink); color: var(--c-paper);
    font-size: 0.78rem; letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.7rem 1rem;
    border-right: 0;
  }
  .compare-cell { padding: 0.9rem 0.9rem; font-size: 0.92rem; }
  .compare-cell .big { font-size: 1.05rem; }
  .compare-row-final .compare-cell .big { font-size: 1.2rem; }
  .compare-head .compare-cell.compare-self,
  .compare-head .compare-cell.compare-other {
    font-size: 0.7rem; padding: 0.6rem 0.9rem;
  }
  .flow-steps { padding-left: 50px; }
  .flow-step::before { left: -42px; }
  .modal-inner { padding: 1.4rem; max-height: 92vh; }
  .modal-title { font-size: 1.4rem; }
}

/* ===========================
   Responsive: Wide (≥1441)
   =========================== */
@media (min-width: 1441px) {
  :root { --maxw: 1360px; }
}

/* ===========================================================================
   2026-05-12 大規模改修: モバイル安全網 + アニメーション強化 + 3フォーム対応
   =========================================================================== */

/* === モバイル安全網：showcase が消える問題への保険 === */
@media (max-width: 720px) {
  .showcase, .cases, .compare, .price, .flow, .faq, .contact { display: block !important; }
  .showcase-grid.v2 { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .show-card.v2 { display: flex !important; min-height: 280px; }
  .show-card.v2 .sc-preview { aspect-ratio: 16 / 10; min-height: 200px; }
  .show-card.v2 .sc-info { display: flex !important; padding: 1.2rem; }
  .show-link-overlay { z-index: 2; }
  .sc-preview { overflow: hidden; isolation: isolate; }
  .container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
}
@media (max-width: 480px) {
  .showcase-grid.v2 { gap: 1.2rem !important; }
  .show-card.v2 .sc-info h3 { font-size: 1.05rem; flex-direction: column; gap: 2px; }
  .show-card.v2 .sc-info p { font-size: 0.82rem; }
  .case-card { margin-bottom: 0; }
  .section-title { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; }
  .section-lead, .about-lead { font-size: 0.95rem; line-height: 1.85; }
}

/* === スクロール駆動アニメーション === */
.fade-in { opacity: 0; transform: translateY(36px); transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1); }
.fade-in.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* === パララックス：Hero Bento の浮遊感 === */
.hero-bento .bento-tile { will-change: transform; }
.hero-bento .bento-tile:hover {
  transform: translateY(-8px) scale(1.03) rotate(-1deg);
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
  z-index: 10;
  box-shadow: 0 24px 48px -16px rgba(28,39,51,0.25);
}

/* === マグネティック CTA ボタン === */
.btn-magnet { will-change: transform; transition: transform 0.3s cubic-bezier(.2,.8,.2,1); }

/* === マーキー（流れる文字） === */
.marquee {
  overflow: hidden;
  background: var(--c-ink, #1c2733);
  color: var(--c-coral, #F4A537);
  padding: 14px 0;
  white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  animation: marquee-slide 32s linear infinite;
  font-family: var(--font-en, "Manrope", sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  font-weight: 600;
  text-transform: uppercase;
  padding-left: 100%;
}
@keyframes marquee-slide { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; padding-left: 1rem; } }

/* === セクションタイトルの装飾 === */
.section-eyebrow { position: relative; padding-left: 38px; }
.section-eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 28px; height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: rule-extend 1.2s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes rule-extend { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* === Hero タイトル下線アニメ === */
.hero-title em { position: relative; display: inline-block; }
.hero-title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.18em;
  background: var(--c-coral, #F4A537);
  opacity: 0.3;
  transform-origin: left;
  animation: underline-swipe 1.4s cubic-bezier(.2,.8,.2,1) 0.6s backwards;
}
@keyframes underline-swipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* === 統計数字 === */
.stat-num { transition: color 0.3s; }
.stat-num.counted { color: var(--c-coral, #F4A537); }

/* === カード持ち上げ === */
.pillar, .case-card, .tier-card {
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s cubic-bezier(.2,.8,.2,1);
}
.pillar:hover, .case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -16px rgba(28,39,51,0.22);
}

/* === ミニ CTA フォーム === */
.mini-cta {
  background: var(--c-ink, #1c2733);
  color: var(--c-paper, #FFFDF8);
  padding: 2.4rem var(--gap-md, 1.6rem);
  text-align: center;
}
.mini-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.mini-cta h3 {
  font-family: var(--font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.mini-cta h3 em { font-style: normal; color: var(--c-coral, #F4A537); }
.mini-cta p { font-size: 0.88rem; color: rgba(255,253,248,0.75); line-height: 1.85; max-width: 50ch; }
.mini-cta-form { display: flex; gap: 0.6rem; width: 100%; max-width: 520px; margin-top: 0.4rem; }
.mini-cta-form input[type="email"], .mini-cta-form input[type="text"] {
  flex: 1;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,253,248,0.2);
  background: rgba(255,253,248,0.06);
  color: #fff;
  font-family: var(--font-jp, "Noto Sans JP", sans-serif);
  font-size: 15px;
  outline: none;
  transition: border-color 0.25s;
}
.mini-cta-form input::placeholder { color: rgba(255,253,248,0.45); }
.mini-cta-form input:focus { border-color: var(--c-coral, #F4A537); background: rgba(255,253,248,0.10); }
.mini-cta-form button {
  padding: 14px 24px;
  border-radius: 999px;
  border: none;
  background: var(--c-coral, #F4A537);
  color: var(--c-ink, #1c2733);
  font-family: var(--font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s, background 0.25s;
}
.mini-cta-form button:hover { transform: translateY(-2px); background: #FFBC5A; }
.mini-cta .friction { font-size: 0.76rem; color: rgba(255,253,248,0.55); margin-top: 0.2rem; }
@media (max-width: 640px) {
  .mini-cta { padding: 2rem 1.2rem; }
  .mini-cta-form { flex-direction: column; }
  .mini-cta-form button { width: 100%; }
}

/* === ミッドCTA バナー === */
.mid-cta {
  background: linear-gradient(135deg, var(--c-coral, #F4A537) 0%, #E89535 100%);
  color: var(--c-ink, #1c2733);
  padding: 2.4rem var(--gap-md);
  border-radius: var(--radius-lg, 24px);
  text-align: center;
  margin: 3rem auto;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}
.mid-cta::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  pointer-events: none;
}
.mid-cta h3 {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  letter-spacing: -0.01em;
  position: relative;
}
.mid-cta p { font-size: 0.95rem; line-height: 1.85; max-width: 50ch; position: relative; }
.mid-cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 0.6rem;
  width: 100%;
  max-width: 760px;
  margin-top: 0.4rem;
  position: relative;
  align-items: center;
}
.mid-cta-form input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 999px;
  border: 2px solid var(--c-ink);
  background: rgba(255,255,255,0.92);
  font-size: 14px;
  outline: none;
}
.mid-cta-form button {
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  background: var(--c-ink);
  color: var(--c-coral);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s;
}
.mid-cta-form button:hover { transform: translateY(-2px); }
.mid-cta .friction { font-size: 0.78rem; opacity: 0.75; }
@media (max-width: 900px) {
  .mid-cta-form { grid-template-columns: 1fr 1fr; }
  .mid-cta-form input[type="email"] { grid-column: 1 / -1; }
  .mid-cta-form button { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .mid-cta { padding: 1.8rem 1.2rem; margin: 2rem 1rem; }
  .mid-cta-form { grid-template-columns: 1fr; }
  .mid-cta-form input[type="email"] { grid-column: auto; }
  .mid-cta-form button { width: 100%; grid-column: auto; }
}

/* === Floating CTA === */
.fab-contact {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 100;
  background: var(--c-coral, #F4A537);
  color: var(--c-ink, #1c2733);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 12px 28px -8px rgba(244,165,55,0.5);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.4s, transform 0.4s, box-shadow 0.25s;
}
.fab-contact.shown { opacity: 1; transform: translateY(0); }
.fab-contact:hover { box-shadow: 0 18px 36px -8px rgba(244,165,55,0.65); transform: translateY(-2px); }
@media (max-width: 640px) { .fab-contact { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 13px; } }

/* === スクロール進捗バー === */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: rgba(28,39,51,0.05); }
.scroll-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--c-coral, #F4A537), #E89535); transition: width 0.1s linear; }

/* === Mini/Mid CTA リンクボタン（フォーム廃止後） === */
.mini-cta-link, .mid-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 999px;
  font-family: var(--font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, background 0.25s;
  will-change: transform;
}
.mini-cta-link {
  background: var(--c-coral, #F4A537);
  color: var(--c-ink, #1c2733);
  box-shadow: 0 12px 28px -8px rgba(244,165,55,0.5);
}
.mini-cta-link:hover {
  background: #FFBC5A;
  box-shadow: 0 18px 36px -8px rgba(244,165,55,0.7);
}
.mid-cta-link {
  background: var(--c-ink, #1c2733);
  color: var(--c-coral, #F4A537);
  box-shadow: 0 14px 32px -8px rgba(28,39,51,0.45);
}
.mid-cta-link:hover {
  background: #2a3848;
  box-shadow: 0 20px 40px -8px rgba(28,39,51,0.6);
}

/* === 追加7テンプレ（№31-37）プレビュー CSS（iframe 読込前のフォールバック背景） === */

/* №31 Esthetic - Atelier Soir */
.prev-esthe {
  background:
    radial-gradient(circle at 75% 25%, rgba(200,168,98,0.30) 0%, transparent 55%),
    linear-gradient(135deg, #FAF5EE 0%, #EEE7DC 60%, #E8D5C4 100%);
}
.prev-esthe .sc-eyebrow { background: #1F1612; color: #FAF5EE; font-family: 'Italiana', serif; letter-spacing: .26em; }
.prev-esthe .sc-display { color: #1F1612; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; }
.prev-esthe .sc-display em { color: #8E7440; font-style: italic; }
.prev-esthe .sc-rule { background: #C8A862; }
.prev-esthe .sc-meta { color: rgba(31,22,18,.7); font-family: 'Italiana', serif; letter-spacing: .18em; }

/* №32 Barber - BARBER GENT */
.prev-barber {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(184,146,74,0.10) 18px, rgba(184,146,74,0.10) 36px),
    linear-gradient(135deg, #0F0E0C 0%, #1A1916 100%);
}
.prev-barber .sc-eyebrow { background: #B8924A; color: #0F0E0C; font-family: 'Bebas Neue', sans-serif; letter-spacing: .22em; }
.prev-barber .sc-display { color: #F4EFE3; font-family: 'Bebas Neue', sans-serif; letter-spacing: .02em; }
.prev-barber .sc-display em { color: #B8924A; font-style: normal; }
.prev-barber .sc-rule { background: #B8924A; }
.prev-barber .sc-meta { color: rgba(244,239,227,.65); font-family: 'Special Elite', monospace; letter-spacing: .14em; }

/* ===========================================================
   Mako Design Portfolio Sections (2026-05-15 統合追加)
   Logo / LP Portfolio + Price 3-Services Grid
   =========================================================== */

/* ---------- Logo Portfolio ---------- */
.logo-portfolio {
  padding: var(--gap-xl) 0;
  background: var(--c-paper);
}
.logo-portfolio .section-title { margin-bottom: var(--gap-sm); }
.logo-portfolio .section-lead {
  text-align: center;
  color: var(--c-ink-soft);
  margin-bottom: var(--gap-lg);
}
.logo-portfolio .section-lead small {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--c-mute);
}

.logo-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}

.logo-pack-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}
.logo-pack-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.logo-pack-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
}
.logo-pack-card figcaption {
  padding: 1.4rem 1.5rem 1.8rem;
}
.logo-pack-card figcaption h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.logo-pack-card figcaption p {
  font-size: 0.88rem;
  color: var(--c-ink-soft);
  line-height: 1.7;
}

.logo-cta-row {
  display: flex;
  gap: var(--gap-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--gap-md);
}

/* ---------- LP Portfolio ---------- */
.lp-portfolio {
  padding: var(--gap-xl) 0;
  background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-cream) 100%);
}
.lp-portfolio .section-title { margin-bottom: var(--gap-sm); }
.lp-portfolio .section-lead {
  text-align: center;
  color: var(--c-ink-soft);
  margin-bottom: var(--gap-lg);
}
.lp-portfolio .section-lead small {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--c-mute);
}

.lp-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-sm);
  margin-bottom: var(--gap-lg);
}

.lp-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}
.lp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.lp-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lp-card-tag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  z-index: 2;
}

/* このページ自身カード（強調） */
.lp-card-self {
  border: 2px solid var(--c-coral);
  position: relative;
}
.lp-card-meta-bg {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(244,165,55,0.22) 0%, transparent 60%),
    linear-gradient(135deg, var(--c-paper) 0%, var(--c-cream) 100%);
}
.lp-card-emoji-replace {
  font-size: 2.8rem;
  font-family: var(--font-serif);
  color: var(--c-coral);
  font-weight: 700;
  line-height: 1;
}
.lp-card-self-label {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  background: var(--c-coral);
  color: var(--c-white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

/* LP方向性パターン（CSS gradient で代替） */
.lp-pattern-launch {
  background:
    radial-gradient(circle at 70% 30%, rgba(244,165,55,0.35) 0%, transparent 55%),
    linear-gradient(135deg, #FFF4E6 0%, #FFE7C2 100%);
}
.lp-pattern-launch::before {
  content: '';
  position: absolute;
  width: 60%;
  height: 4px;
  background: var(--c-coral);
  bottom: 28%;
  left: 20%;
  border-radius: 2px;
  opacity: 0.5;
}
.lp-pattern-launch::after {
  content: '';
  position: absolute;
  width: 35%;
  height: 4px;
  background: var(--c-ink);
  bottom: 38%;
  left: 20%;
  border-radius: 2px;
  opacity: 0.6;
}

.lp-pattern-product {
  background:
    radial-gradient(circle at 30% 70%, rgba(92,124,104,0.30) 0%, transparent 55%),
    linear-gradient(135deg, #F2F6F1 0%, #DCE7DC 100%);
}
.lp-pattern-product::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  border: 3px solid var(--c-moss);
  border-radius: 8px;
  opacity: 0.4;
}
.lp-pattern-product::after {
  content: '';
  position: absolute;
  width: 38%;
  height: 4px;
  background: var(--c-moss);
  bottom: 22%;
  border-radius: 2px;
  opacity: 0.6;
}

.lp-pattern-event {
  background:
    radial-gradient(circle at 50% 30%, rgba(28,39,51,0.18) 0%, transparent 55%),
    linear-gradient(135deg, #F0F0F4 0%, #D7D9E3 100%);
}
.lp-pattern-event::before {
  content: '';
  position: absolute;
  width: 45%;
  height: 45%;
  border-radius: 50%;
  border: 3px dashed var(--c-ink-soft);
  opacity: 0.45;
}
.lp-pattern-event::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 4px;
  background: var(--c-ink);
  bottom: 22%;
  left: 20%;
  border-radius: 2px;
  opacity: 0.5;
}

.lp-card-info {
  padding: 1.2rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.lp-card-info h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-ink);
}
.lp-card-info p {
  font-size: 0.86rem;
  color: var(--c-ink-soft);
  line-height: 1.7;
  flex: 1;
}
.lp-card-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-coral);
  border-bottom: 1px solid var(--c-coral);
  padding-bottom: 0.2rem;
  align-self: flex-start;
  transition: color 0.2s var(--ease);
}
.lp-card-link:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.lp-card-soon {
  font-size: 0.78rem;
  color: var(--c-mute);
  font-style: italic;
  align-self: flex-start;
}

.lp-cta-row {
  display: flex;
  gap: var(--gap-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--gap-md);
}

/* ---------- Price Services Grid (3-Service) ---------- */
.price .section-lead {
  text-align: center;
  color: var(--c-ink-soft);
  margin-bottom: var(--gap-lg);
}

.price-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
  align-items: stretch;
}

.price-service-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem 2.2rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}
.price-service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.price-service-card h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}
.price-service-card .ps-amount {
  font-family: var(--font-en);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
  line-height: 1.1;
}
.price-service-card .ps-amount small {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  margin-left: 0.2rem;
}
.price-service-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.price-service-card li {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.6;
}
.price-service-card li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-coral);
  font-size: 0.7rem;
  line-height: 1.7;
}

.price-service-card-featured {
  background: linear-gradient(180deg, var(--c-white) 0%, #FFF9F0 100%);
  border: 2px solid var(--c-coral);
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}
.price-service-card-featured:hover {
  transform: translateY(-10px);
}
.price-service-card-featured .ps-amount {
  color: var(--c-coral);
}
.price-service-card-featured li::before {
  color: var(--c-moss);
}
.price-service-card-featured .ps-badge {
  position: absolute;
  top: -12px;
  right: 1.5rem;
  background: var(--c-coral);
  color: var(--c-white);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* HP詳細ブロックの上余白調整 */
.price-main-hp-detail {
  margin-top: var(--gap-lg);
  border-top: 1px solid var(--c-line);
  padding-top: var(--gap-lg);
}

/* ---------- Responsive: Tablet 768px以下 ---------- */
@media (max-width: 1024px) {
  .logo-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .price-services-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .price-service-card-featured { transform: translateY(0); }
  .price-service-card-featured:hover { transform: translateY(-4px); }
}

@media (max-width: 768px) {
  .logo-portfolio-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .lp-portfolio-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .logo-pack-card figcaption { padding: 1.2rem 1.2rem 1.4rem; }
  .price-service-card { padding: 1.6rem 1.4rem 1.8rem; }
  .price-service-card .ps-amount { font-size: 1.9rem; }
  .logo-cta-row, .lp-cta-row { flex-direction: column; align-items: stretch; }
}

/* №33 Eye Clinic - 山辺眼科 */
.prev-eye {
  background:
    radial-gradient(circle at 75% 75%, rgba(143,191,160,0.20) 0%, transparent 50%),
    radial-gradient(circle at 25% 25%, rgba(91,155,213,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #FAFCFE 0%, #EAF2FA 100%);
  border: 1px solid rgba(27,40,64,0.08);
}
.prev-eye .sc-eyebrow { background: #2C6AA0; color: #fff; font-family: 'Manrope', sans-serif; font-weight: 700; }
.prev-eye .sc-display { color: #1B2840; font-family: 'Manrope', 'Noto Sans JP', sans-serif; font-weight: 700; }
.prev-eye .sc-display em { color: #5B9BD5; font-style: normal; }
.prev-eye .sc-rule { background: #5B9BD5; }
.prev-eye .sc-meta { color: rgba(27,40,64,.62); }

/* №34 Internal Medicine - みなと内科 */
.prev-internal {
  background:
    linear-gradient(180deg, #F2F6FB 0%, #FFFFFF 100%);
  border: 1px solid rgba(26,44,66,0.08);
}
.prev-internal .sc-eyebrow { background: #1E5288; color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; }
.prev-internal .sc-display { color: #1A2C42; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-weight: 700; }
.prev-internal .sc-display em { color: #3B7AB8; font-style: normal; }
.prev-internal .sc-rule { background: #5BA67B; }
.prev-internal .sc-meta { color: rgba(26,44,66,.6); font-family: 'Inter', sans-serif; }

/* №35 Chiropractic - 背骨カイロ ストレート */
.prev-chiro {
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(60,84,104,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #F4F1EB 0%, #E6E2D8 100%);
}
.prev-chiro .sc-eyebrow { background: #1E3245; color: #F4F1EB; font-family: 'Outfit', sans-serif; font-weight: 600; letter-spacing: .22em; }
.prev-chiro .sc-display { color: #1E2A38; font-family: 'Outfit', 'Noto Sans JP', sans-serif; font-weight: 800; }
.prev-chiro .sc-display em { color: #7A5A2E; font-style: normal; }
.prev-chiro .sc-rule { background: #A6804C; }
.prev-chiro .sc-meta { color: rgba(30,42,56,.68); font-family: 'Outfit', sans-serif; }

/* №36 Music School - Studio Crescendo */
.prev-music {
  background:
    radial-gradient(circle at 30% 30%, rgba(184,150,86,0.20) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0, transparent 24px, rgba(184,150,86,0.06) 24px, rgba(184,150,86,0.06) 25px),
    linear-gradient(135deg, #1F2649 0%, #0E1228 100%);
}
.prev-music .sc-eyebrow { background: #B89656; color: #15182A; font-family: 'Lora', serif; font-style: italic; letter-spacing: .14em; }
.prev-music .sc-display { color: #F8F4EA; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; }
.prev-music .sc-display em { color: #B89656; font-style: italic; }
.prev-music .sc-rule { background: #B89656; }
.prev-music .sc-meta { color: rgba(248,244,234,.7); font-family: 'Lora', serif; font-style: italic; }

/* №37 Art Class - アトリエ あお葉 */
.prev-art {
  background:
    radial-gradient(circle at 75% 20%, rgba(126,175,180,0.32) 0%, transparent 55%),
    radial-gradient(circle at 15% 75%, rgba(196,106,78,0.28) 0%, transparent 55%),
    radial-gradient(circle at 60% 80%, rgba(138,166,108,0.22) 0%, transparent 55%),
    linear-gradient(135deg, #F6F1E8 0%, #E8DDC7 100%);
}
.prev-art .sc-eyebrow { background: #C46A4E; color: #F6F1E8; font-family: 'Quicksand', sans-serif; font-weight: 700; }
.prev-art .sc-display { color: #1F2A28; font-family: 'DM Serif Display', serif; }
.prev-art .sc-display em { color: #C46A4E; font-style: italic; }
.prev-art .sc-rule { background: #C46A4E; }
.prev-art .sc-meta { color: rgba(31,42,40,.72); font-family: 'Caveat', cursive; font-size: 0.95rem; letter-spacing: .02em; }

/* ===========================================================================
   2026-05-12 Showcase 表示制限: デフォルト3件 + 「すべて見る」展開
   =========================================================================== */

/* デフォルトで data-position 3以降のカードを隠す
   2026-05-12: !important 必須（モバイル `.show-card.v2 {display:flex!important}` 対策） */
.showcase-grid.v2 .show-card.v2[data-position="hidden"] {
  display: none !important;
}

/* もっと見るボタンエリア */
.showcase-more {
  display: flex;
  justify-content: center;
  margin: 2rem 0 0;
}
.showcase-more[data-state="expanded"] .btn-show-all .label-collapsed { display: none; }
.showcase-more[data-state="collapsed"] .btn-show-all .label-expanded { display: none; }

.btn-show-all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  border-radius: 999px;
  background: var(--c-ink, #1c2733);
  color: var(--c-paper, #FFFDF8);
  font-family: var(--font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 32px -8px rgba(28,39,51,0.4);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, background 0.25s;
}
.btn-show-all:hover {
  background: var(--c-coral, #F4A537);
  color: var(--c-ink, #1c2733);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -8px rgba(244,165,55,0.5);
}
.btn-show-all .hidden-count {
  font-family: var(--font-en, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}