/* =========================================================
   HTML Template Lab - Main Stylesheet
   ---------------------------------------------------------
   ★初心者の方へ
   まずは「初心者向け編集エリア」だけ変更すれば、
   サイト全体の色や横幅を簡単にカスタマイズできます。
   ========================================================= */

/* =========================================================
   ★初心者向け編集エリア
   ========================================================= */
:root {
  /* サイトのメインカラー */
  --main-color: #5b6cff;

  /* メインカラーより少し濃い色 */
  --main-dark: #4353e8;

  /* 見出し・濃い背景に使う色 */
  --dark-color: #161927;

  /* 通常の文字色 */
  --text-color: #333849;

  /* 少し薄い文字色 */
  --muted-color: #70778b;

  /* ページの薄い背景色 */
  --soft-bg: #f6f7fb;

  /* 白色 */
  --white: #ffffff;

  /* 枠線の色 */
  --border-color: #e6e8f0;

  /* サイト全体の最大横幅 */
  --site-width: 1180px;

  /* カードの角丸 */
  --radius: 22px;

  /* 小さめの角丸 */
  --radius-small: 14px;
}

/* =========================================================
   ここから下はレイアウト用CSSです。
   慣れるまでは変更しなくても大丈夫です。
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text-color);
  background: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(calc(100% - 40px), var(--site-width));
  margin-inline: auto;
}

/* ===================== Header ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(230,232,240,.8);
  backdrop-filter: blur(18px);
}

.header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.logo-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--white);
  background: linear-gradient(135deg, var(--main-color), #8a66ff);
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(91,108,255,.24);
}

.logo-text {
  font-size: 17px;
}

.global-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 700;
  color: #545a6c;
}

.global-nav a {
  transition: color .2s ease;
}

.global-nav a:hover {
  color: var(--main-color);
}

/* ===================== Hero ===================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 98px;
  background:
    radial-gradient(circle at 80% 20%, rgba(91,108,255,.16), transparent 26%),
    radial-gradient(circle at 12% 82%, rgba(138,102,255,.10), transparent 30%),
    linear-gradient(180deg, #fbfbfe 0%, #ffffff 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgba(91,108,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,108,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 68px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: var(--main-color);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.hero h1 {
  margin: 0;
  color: #171a27;
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: 1.16;
  letter-spacing: -.05em;
}

.hero h1 span {
  color: var(--main-color);
}

.hero-lead {
  max-width: 670px;
  margin: 28px 0 0;
  font-size: 17px;
  color: #5f6678;
}

.hero-lead strong {
  color: #222635;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  min-height: 52px;
  padding: 0 25px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--main-color), var(--main-dark));
  box-shadow: 0 12px 28px rgba(91,108,255,.24);
}

.button-secondary {
  color: #313647;
  background: var(--white);
  border: 1px solid var(--border-color);
}

.button-outline {
  color: #42485a;
  border: 1px solid var(--border-color);
  background: var(--white);
}

.button-dark {
  color: var(--white);
  background: var(--dark-color);
}

.button-light {
  color: var(--dark-color);
  background: var(--white);
}

.button-small {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 10px;
  font-size: 13px;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  color: #697084;
  font-size: 13px;
  font-weight: 700;
}

.hero-visual {
  position: relative;
  min-height: 500px;
}

.browser-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid #e7e9f1;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 32px 80px rgba(37,43,74,.14);
}

.browser-main {
  inset: 22px 0 auto 30px;
  height: 365px;
  transform: rotate(1.8deg);
}

.browser-bar {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid #eceef5;
  background: #fbfbfd;
}

.browser-bar span,
.code-window-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d7d9e2;
}

.browser-content { padding: 18px; }
.browser-nav { height: 14px; width: 62%; background: #e9ebf2; border-radius: 999px; }
.browser-hero { height: 128px; margin-top: 18px; border-radius: 14px; background: linear-gradient(135deg, #dfe4ff, #edf0ff 48%, #d7ddff); }
.browser-title { width: 46%; height: 15px; margin-top: 18px; border-radius: 999px; background: #363c50; }
.browser-lines { margin-top: 12px; display: grid; gap: 7px; }
.browser-lines i { display: block; height: 7px; border-radius: 999px; background: #e7e9ef; }
.browser-lines i:nth-child(2) { width: 82%; }
.browser-lines i:nth-child(3) { width: 66%; }
.browser-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.browser-cards b { height: 44px; border-radius: 10px; background: #f1f2f7; }

.code-card {
  position: absolute;
  right: -5px;
  bottom: 24px;
  width: 82%;
  padding: 23px;
  border-radius: 18px;
  color: #dce1ff;
  background: #171a28;
  box-shadow: 0 25px 70px rgba(23,26,40,.28);
  transform: rotate(-2deg);
}

.code-label {
  display: inline-block;
  margin-bottom: 13px;
  padding: 5px 9px;
  border-radius: 7px;
  color: #bcc4ff;
  background: rgba(91,108,255,.13);
  font-size: 11px;
  font-weight: 800;
}

.code-card code {
  display: block;
  margin-top: 7px;
  font-family: Consolas, Monaco, monospace;
  font-size: 12px;
  white-space: nowrap;
}

.code-card .code-css { color: #8ee0ba; }

/* ===================== Sections ===================== */
.section { padding: 96px 0; }
.section-soft { background: var(--soft-bg); }
.section-dark { color: var(--white); background: var(--dark-color); }

.section-heading { max-width: 760px; margin-bottom: 42px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin: 0; color: #1d2130; font-size: clamp(30px, 4vw, 46px); line-height: 1.25; letter-spacing: -.035em; }
.section-heading p { margin: 16px 0 0; color: var(--muted-color); }

.split-heading {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr .8fr;
  align-items: end;
  gap: 60px;
}

.split-heading p { margin: 0; }

.feature-grid,
.template-grid,
.level-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

.feature-card,
.level-card {
  padding: 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 14px 34px rgba(37,43,74,.05);
}

.feature-number {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--main-color);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
}

.feature-card h3,
.level-card h3 {
  margin: 0;
  color: #212536;
  font-size: 20px;
}

.feature-card p,
.level-card p {
  margin: 12px 0 0;
  color: var(--muted-color);
  font-size: 14px;
}

/* ===================== Template Cards ===================== */
.template-card {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 16px 46px rgba(37,43,74,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}

.template-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 65px rgba(37,43,74,.12);
}

.template-preview {
  position: relative;
  height: 260px;
  padding: 36px 26px 0;
  overflow: hidden;
}

.preview-business { background: linear-gradient(135deg, #dfe7ff, #f3f5ff); }
.preview-cafe { background: linear-gradient(135deg, #efe4d2, #f8f4ec); }
.preview-japanese { background: linear-gradient(135deg, #dfe7e0, #f3f4ed); }

.template-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  color: #34394b;
  background: rgba(255,255,255,.8);
  font-size: 10px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.mini-browser {
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background: var(--white);
  box-shadow: 0 15px 40px rgba(37,43,74,.17);
}

.mini-top { height: 26px; border-bottom: 1px solid #eee; }
.mini-hero { height: 116px; margin: 11px; border-radius: 9px; }
.mini-business { background: linear-gradient(135deg, #28385d, #7d93c6); }
.mini-cafe { background: linear-gradient(135deg, #906f56, #d2b697); }
.mini-japanese { background: linear-gradient(135deg, #506954, #9eae90); }
.mini-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 11px; }
.mini-columns i { display: block; height: 54px; border-radius: 8px; background: #f0f1f5; }

.template-body { padding: 26px; }
.template-meta { display: flex; justify-content: space-between; gap: 10px; color: #7b8190; font-size: 11px; font-weight: 800; }
.template-body h3 { margin: 8px 0 0; color: #1d2130; font-size: 22px; }
.template-body p { margin: 10px 0 0; color: var(--muted-color); font-size: 14px; }
.template-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.template-tags span { padding: 5px 8px; border-radius: 7px; color: #666d80; background: #f5f6fa; font-size: 10px; font-weight: 800; }
.card-actions { display: flex; gap: 8px; margin-top: 22px; }
.card-actions .button { flex: 1; }
.section-action { margin-top: 40px; text-align: center; }

/* ===================== Guide ===================== */
.guide-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 82px;
  align-items: center;
}

.eyebrow-light { color: #9ca7ff; }
.guide-intro h2 { margin: 0; font-size: clamp(34px,4.2vw,50px); line-height: 1.25; letter-spacing: -.04em; }
.guide-intro p { margin: 20px 0 28px; color: #b7bdce; }
.guide-steps { display: grid; gap: 12px; }
.guide-steps article { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 22px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(255,255,255,.035); }
.guide-steps article > span { color: #99a4ff; font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.guide-steps h3 { margin: 0; font-size: 17px; }
.guide-steps p { margin: 4px 0 0; color: #aeb5c6; font-size: 13px; }

/* ===================== Lessons ===================== */
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}

.lesson-card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--white);
  transition: border-color .2s ease, transform .2s ease;
}

.lesson-card:hover { border-color: #c9ceff; transform: translateY(-2px); }
.lesson-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: var(--main-color); background: #f0f2ff; font-weight: 900; }
.lesson-card h3 { margin: 0; color: #242839; font-size: 16px; }
.lesson-card p { margin: 3px 0 0; color: var(--muted-color); font-size: 12px; }
.lesson-card b { color: #a0a5b4; }

/* ===================== Code Guide ===================== */
.code-guide-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: center;
}

.check-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 16px; padding: 0; margin: 25px 0 0; list-style: none; }
.check-list li { font-size: 13px; font-weight: 700; color: #515769; }
.check-list li::before { content: "✓"; margin-right: 7px; color: var(--main-color); font-weight: 900; }

.code-window { overflow: hidden; border-radius: 20px; background: #171a28; box-shadow: 0 28px 70px rgba(30,34,54,.2); }
.code-window-bar { height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #202435; }
.code-window-bar em { margin-left: 8px; color: #8e96aa; font-style: normal; font-size: 11px; }
.code-window pre { margin: 0; padding: 28px; overflow-x: auto; color: #dce2ff; font-size: 13px; line-height: 1.8; font-family: Consolas, Monaco, monospace; }
.code-window .comment { color: #7d879b; }
.code-window .value { color: #8ee0ba; }


/* ===================== Beginner Guide Pages ===================== */
.guide-hero {
  padding: 62px 0 68px;
  background:
    radial-gradient(circle at 84% 18%, rgba(91,108,255,.15), transparent 24%),
    linear-gradient(180deg, #fafbff 0%, #f4f6ff 100%);
  border-bottom: 1px solid var(--border-color);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
  color: #858c9f;
  font-size: 12px;
  font-weight: 700;
}
.breadcrumb a:hover { color: var(--main-color); }

.guide-hero-grid {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 64px;
  align-items: end;
}
.guide-hero h1 {
  margin: 0;
  color: #171a27;
  font-size: clamp(38px,5vw,62px);
  line-height: 1.18;
  letter-spacing: -.045em;
}
.guide-hero h1 span { color: var(--main-color); }
.guide-hero p { max-width: 760px; margin: 22px 0 0; color: #626a7d; }

.guide-level-card {
  padding: 26px;
  border: 1px solid #dfe3fb;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 20px 50px rgba(37,43,74,.08);
}
.guide-level-card > span { display: block; color: var(--main-color); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.guide-level-card strong { display: block; margin-top: 8px; color: #262a3a; font-size: 20px; }
.guide-level-card p { margin: 8px 0 0; font-size: 13px; }

.guide-index-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.guide-index-card {
  min-height: 250px;
  padding: 28px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 14px 35px rgba(37,43,74,.05);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.guide-index-card:hover { transform: translateY(-4px); border-color: #cbd0ff; box-shadow: 0 20px 50px rgba(91,108,255,.10); }
.guide-no { color: var(--main-color); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.guide-index-card h2 { margin: 18px 0 0; color: #202435; font-size: 21px; }
.guide-index-card p { margin: 10px 0 0; color: var(--muted-color); font-size: 13px; }
.guide-link { display: inline-block; margin-top: 22px; color: var(--main-color); font-size: 12px; font-weight: 900; }

.guide-flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.guide-flow article { padding: 26px; border-radius: 18px; background: var(--white); border: 1px solid var(--border-color); }
.guide-flow article > span { color: var(--main-color); font-size: 11px; font-weight: 900; }
.guide-flow h3 { margin: 10px 0 0; color: #252939; }
.guide-flow p { margin: 8px 0 0; color: var(--muted-color); font-size: 13px; }

.guide-article-layout { display: grid; grid-template-columns: 245px 1fr; gap: 58px; align-items: start; }
.guide-toc {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 5px;
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: #fbfbfd;
}
.guide-toc strong { margin-bottom: 9px; color: #282c3c; font-size: 13px; }
.guide-toc a { padding: 6px 0; color: #747b8d; font-size: 12px; font-weight: 700; }
.guide-toc a:hover { color: var(--main-color); }

.guide-content { min-width: 0; }
.guide-content > section { padding-bottom: 52px; margin-bottom: 52px; border-bottom: 1px solid var(--border-color); }
.guide-content h2 { margin: 0 0 18px; color: #202435; font-size: clamp(26px,3vw,34px); line-height: 1.35; letter-spacing: -.025em; }
.guide-content h3 { margin: 30px 0 8px; color: #303546; font-size: 18px; }
.guide-content p, .guide-content li { color: #5f6679; }
.guide-content code { padding: 2px 5px; border-radius: 5px; color: #3f4c9c; background: #f0f2ff; font-family: Consolas, Monaco, monospace; font-size: .92em; }
.guide-content pre code { padding: 0; color: inherit; background: transparent; }
.guide-content ol, .guide-content ul { padding-left: 22px; }
.guide-content li + li { margin-top: 7px; }

.guide-file-path { display: block; margin: 16px 0; padding: 14px 17px; border-radius: 10px; color: #dce2ff; background: #171a28; font-family: Consolas, Monaco, monospace; font-size: 13px; overflow-x: auto; }
.guide-note, .guide-success, .guide-warning { margin: 22px 0; padding: 18px 20px; border-radius: 13px; font-size: 13px; }
.guide-note { color: #4f5871; background: #f3f5ff; border-left: 4px solid #8895ff; }
.guide-success { color: #365b4d; background: #eff9f4; border-left: 4px solid #6db596; }
.guide-warning { color: #735932; background: #fff8e8; border-left: 4px solid #e4b85e; }

.guide-code { margin: 20px 0; overflow: hidden; border-radius: 15px; background: #171a28; box-shadow: 0 18px 42px rgba(30,34,54,.10); }
.guide-code-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; color: #9da6bc; background: #202435; font-size: 11px; }
.guide-code-head b { color: #dfe4f7; }
.guide-code pre { margin: 0; padding: 22px; overflow-x: auto; color: #dce2ff; font-size: 13px; line-height: 1.8; font-family: Consolas, Monaco, monospace; }
.guide-code .comment { color: #7d879b; }
.guide-code .edit { color: #95e8bf; font-weight: 700; }

.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.before-after article { padding: 22px; border: 1px solid var(--border-color); border-radius: 15px; background: #fafbfe; }
.before-after span { color: var(--main-color); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.before-after strong { display: block; margin-top: 7px; color: #262b3b; }
.before-after p { margin: 6px 0 0; font-size: 12px; }

.guide-checklist { list-style: none; padding: 0 !important; }
.guide-checklist li { position: relative; padding: 11px 12px 11px 38px; border-bottom: 1px solid #eef0f5; }
.guide-checklist li::before { content: "✓"; position: absolute; left: 10px; color: var(--main-color); font-weight: 900; }

.guide-next { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 30px; border-radius: 20px; color: var(--white); background: linear-gradient(135deg, #24283a, #151827); }
.guide-next > div > span { color: #9da8ff; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.guide-next h2 { margin: 8px 0 0; color: var(--white); font-size: 26px; }
.guide-next p { margin: 7px 0 0; color: #aeb5c7; font-size: 13px; }

/* ===================== MACHIKA WEB Link ===================== */
.machika-section { padding-top: 24px; }
.machika-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 44px;
  align-items: center;
  padding: 46px 52px;
  border-radius: 26px;
  color: #f5f7ff;
  background: linear-gradient(135deg, #191d2b 0%, #242a40 58%, #30395e 100%);
  box-shadow: 0 26px 70px rgba(25,29,43,.16);
}
.machika-card::after { content: "M"; position: absolute; right: 4%; top: -48px; color: rgba(255,255,255,.035); font-size: 190px; font-weight: 900; line-height: 1; pointer-events: none; }
.machika-card > div, .machika-card > a { position: relative; z-index: 1; }
.machika-kicker { color: #aab4ff; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.machika-card h2 { margin: 10px 0 0; font-size: clamp(28px,3.7vw,42px); line-height: 1.3; letter-spacing: -.035em; }
.machika-card p { max-width: 730px; margin: 13px 0 0; color: #b9c0d1; font-size: 14px; }
.machika-card p strong { color: #fff; }

.footer-bottom a { color: #c5cbff; font-weight: 800; }
.footer-bottom a:hover { color: #fff; }

/* ===================== Levels ===================== */
.level-card { position: relative; }
.level-badge { display: inline-block; margin-bottom: 16px; padding: 5px 9px; border-radius: 999px; color: var(--main-color); background: #eef0ff; font-size: 10px; font-weight: 900; }
.level-card ul { padding-left: 18px; margin: 20px 0 0; color: #5f6678; font-size: 13px; }
.level-card li + li { margin-top: 6px; }
.featured-level { border-color: #cbd0ff; box-shadow: 0 20px 50px rgba(91,108,255,.12); }

/* ===================== FAQ ===================== */
.faq-wrap { max-width: 900px; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { padding: 0 22px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--white); }
.faq-list summary { padding: 19px 0; cursor: pointer; color: #252939; font-weight: 800; }
.faq-list p { margin: -2px 0 20px; color: var(--muted-color); font-size: 14px; }

/* ===================== CTA ===================== */
.cta-section { padding: 72px 0; color: var(--white); background: linear-gradient(135deg, #4f5fe8, #6f5ce4); }
.cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.cta-inner h2 { margin: 0; font-size: clamp(30px,4vw,44px); line-height: 1.25; letter-spacing: -.035em; }
.cta-inner p { max-width: 720px; margin: 12px 0 0; color: rgba(255,255,255,.8); }

/* ===================== Footer ===================== */
.site-footer { padding: 58px 0 28px; color: #9da4b5; background: #121520; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 50px; }
.footer-logo { color: var(--white); }
.footer-grid p { margin: 12px 0 0; font-size: 12px; }
.footer-nav { display: grid; grid-template-columns: repeat(2,auto); gap: 10px 26px; font-size: 12px; font-weight: 700; }
.footer-nav a:hover { color: var(--white); }
.footer-bottom { margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.footer-bottom small { font-size: 11px; }



/* ===================== Customization Course ===================== */
.section-more { margin-top: 28px; text-align: center; }
.custom-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.custom-preview-card { padding: 30px; border: 1px solid var(--border-color); border-radius: 20px; background: #fff; box-shadow: 0 14px 35px rgba(37,43,74,.05); }
.custom-preview-card > span { color: var(--main-color); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.custom-preview-card h3 { margin: 18px 0 0; color: #252939; }
.custom-preview-card p { margin: 8px 0 0; color: var(--muted-color); font-size: 13px; }
.preview-window { min-height: 150px; margin-top: 18px; padding: 26px 8%; display: grid; gap: 10px; align-content: center; border-radius: 16px; background: #f2f4fa; overflow: hidden; }
.preview-window::before { content: ""; display: block; height: 14px; border-radius: 999px; background: #343a50; }
.preview-window i { display: block; height: 12px; border-radius: 999px; background: #d9ddeb; }
.preview-wide::before, .preview-wide i { width: 100%; }
.preview-compact { padding-inline: 19%; }
.preview-compact::before, .preview-compact i { width: 100%; }
.preview-window i:nth-of-type(2) { width: 82%; }
.preview-window i:nth-of-type(3) { width: 62%; }
.value-table { display: grid; gap: 10px; margin: 22px 0; }
.value-table > div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 15px 18px; border: 1px solid var(--border-color); border-radius: 12px; background: #fafbfe; }
.value-table b { color: #30364a; }
.value-table span { color: var(--muted-color); font-size: 13px; }
.spacing-demo { max-width: 520px; margin: 26px auto; padding: 22px; text-align: center; font-size: 11px; font-weight: 900; color: #80652a; background: #fff3c8; border-radius: 18px; }
.spacing-border { margin-top: 8px; padding: 18px; color: #6b538a; background: #dfd1f0; border-radius: 12px; }
.spacing-padding { margin-top: 8px; padding: 24px; color: #3d6a58; background: #cfecdf; border-radius: 9px; }
.spacing-padding strong { display: block; padding: 22px 10px; color: #334052; background: #fff; border-radius: 7px; }
.button-samples { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.sample-btn { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--main-color); font-size: 13px; font-weight: 800; }
.sample-square { border-radius: 2px; }
.sample-normal { border-radius: 10px; }
.sample-pill { border-radius: 999px; }
.heading-samples { display: grid; gap: 24px; margin: 24px 0; }
.heading-samples h3 { margin: 0; }
.heading-line-demo { padding-left: 16px; border-left: 4px solid var(--main-color); }
.heading-bottom-demo { padding-bottom: 12px; border-bottom: 2px solid var(--main-color); }
.grid-visual { display: grid; gap: 10px; margin: 24px 0; padding: 18px; border-radius: 16px; background: #f5f6fa; }
.grid-visual i { min-height: 82px; border: 1px solid #dfe2eb; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px rgba(37,43,74,.04); }
.grid-visual-2 { grid-template-columns: repeat(2,1fr); }
.grid-visual-3 { grid-template-columns: repeat(3,1fr); }
.grid-visual-4 { grid-template-columns: repeat(4,1fr); }

/* =========================================================
   スマートフォン・タブレット用
   画面が狭い時だけ適用されるCSSです。
   ========================================================= */
@media (max-width: 980px) {
  .guide-hero-grid, .guide-article-layout, .machika-card { grid-template-columns: 1fr; }
  .guide-index-grid { grid-template-columns: 1fr 1fr; }
  .guide-toc { position: static; }
  .machika-card > .button { justify-self: start; }
  .global-nav { display: none; }
  .hero-grid,
  .guide-grid,
  .code-guide-grid,
  .split-heading,
  .cta-inner {
    grid-template-columns: 1fr;
  }
  .hero { padding-top: 64px; }
  .hero-visual { min-height: 440px; max-width: 680px; width: 100%; margin-inline: auto; }
  .feature-grid,
  .template-grid,
  .level-grid { grid-template-columns: 1fr 1fr; }
  .template-grid .template-card:last-child,
  .level-grid .level-card:last-child { grid-column: 1 / -1; }
  .guide-grid { gap: 46px; }
  .code-guide-grid { gap: 40px; }
  .split-heading { gap: 15px; }
  .cta-inner { gap: 24px; }
  .cta-inner .button { justify-self: start; }
}

@media (max-width: 680px) {
  .guide-hero { padding: 42px 0 50px; }
  .guide-hero-grid { gap: 28px; }
  .guide-index-grid, .guide-flow, .before-after { grid-template-columns: 1fr; }
  .guide-index-card { min-height: 0; }
  .guide-content > section { padding-bottom: 38px; margin-bottom: 38px; }
  .guide-code pre { padding: 18px; font-size: 11px; }
  .guide-next { grid-template-columns: 1fr; padding: 24px; }
  .machika-card { padding: 32px 26px; }
  .container { width: min(calc(100% - 28px), var(--site-width)); }
  .header-inner { min-height: 68px; }
  .logo-text { font-size: 15px; }
  .logo-mark { width: 36px; height: 36px; }
  .hero { padding: 52px 0 68px; }
  .hero h1 { font-size: clamp(38px, 12vw, 54px); }
  .hero-lead { font-size: 15px; }
  .hero-actions .button { width: 100%; }
  .hero-visual { min-height: 370px; }
  .browser-main { left: 0; height: 300px; }
  .code-card { width: 94%; bottom: 0; padding: 18px; }
  .code-card code { font-size: 10px; }
  .section { padding: 70px 0; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2 { font-size: 31px; }
  .feature-grid,
  .template-grid,
  .level-grid,
  .lesson-grid { grid-template-columns: 1fr; }
  .template-grid .template-card:last-child,
  .level-grid .level-card:last-child { grid-column: auto; }
  .template-preview { height: 235px; }
  .guide-steps article { grid-template-columns: 1fr; gap: 7px; }
  .lesson-card { grid-template-columns: 46px 1fr auto; }
  .lesson-icon { width: 46px; height: 46px; }
  .check-list { grid-template-columns: 1fr; }
  .code-window pre { padding: 20px; font-size: 11px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .custom-preview-grid { grid-template-columns: 1fr; }
  .value-table > div { grid-template-columns: 1fr; gap: 4px; }
  .grid-visual-3, .grid-visual-4 { grid-template-columns: repeat(2,1fr); }
}


/* =========================================================
   Template 002 - Natural Cafe detail preview
   ========================================================= */
.cafe-detail-hero { background:radial-gradient(circle at 78% 20%,rgba(126,139,102,.16),transparent 30%),linear-gradient(180deg,#fbf9f4,#fff); }
.cafe-detail-hero .detail-copy h1 span { color:#788567; }
.cafe-mock-window { position:absolute; inset:18px 28px 70px 0; overflow:hidden; border-radius:24px; background:#f5eee3; border:1px solid #ded4c6; box-shadow:0 30px 80px rgba(75,62,45,.16); }
.cafe-mock-nav { height:50px; display:flex; align-items:center; gap:13px; padding:0 20px; background:#fffdf8; }
.cafe-mock-nav b { margin-right:auto; color:#394032; font-family:Georgia,serif; letter-spacing:.08em; }
.cafe-mock-nav i { width:42px; height:5px; border-radius:99px; background:#d7cec0; }
.cafe-mock-hero { position:relative; height:265px; padding:46px 42px; color:#fff; background:linear-gradient(120deg,#3f4738,#8a745e); }
.cafe-mock-hero::after { content:""; position:absolute; right:45px; bottom:0; width:180px; height:220px; border-radius:90px 90px 0 0; background:#c6b08e; opacity:.7; }
.cafe-mock-hero span { display:block; font-size:8px; letter-spacing:.18em; }
.cafe-mock-hero strong { display:block; margin-top:18px; font-family:Georgia,serif; font-size:36px; font-weight:400; line-height:1.05; }
.cafe-mock-hero em { display:block; width:70px; height:2px; margin-top:22px; background:#f5eee3; }
.cafe-mock-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; }
.cafe-mock-grid i { height:92px; border-radius:12px; background:linear-gradient(135deg,#d8c8b1,#eef0df); }
.cafe-mock-grid i:last-child { background:linear-gradient(135deg,#bd9e7b,#ece2d3); }
.cafe-mobile { position:absolute; right:-6px; bottom:26px; width:142px; height:280px; padding:16px 12px; border:6px solid #292d27; border-radius:28px; background:#f5eee3; box-shadow:0 24px 50px rgba(50,43,34,.20); }
.cafe-mobile i { display:block; height:112px; border-radius:14px; background:linear-gradient(145deg,#4a5441,#b69a78); }
.cafe-mobile b { display:block; height:8px; margin-top:14px; border-radius:99px; background:#d2c5b4; }
.cafe-mobile b:last-child { width:70%; }
.cafe-preview-board { position:relative; min-height:540px; margin-top:44px; overflow:hidden; border-radius:28px; background:#f2e9dc; box-shadow:0 28px 70px rgba(64,54,40,.10); }
.cp-photo { position:absolute; inset:0 48% 0 0; background:linear-gradient(155deg,#526047,#9b8264); }
.cp-photo::before { content:""; position:absolute; left:17%; bottom:14%; width:58%; height:18%; border-radius:50%; background:#e8dccb; box-shadow:0 -74px 0 -38px #fffaf1,130px -30px 0 -54px #71805f; }
.cp-copy { position:absolute; left:48%; right:0; top:0; bottom:42%; padding:70px 62px; background:#fffdf8; }
.cp-copy small { color:#9a6e4d; font-size:9px; font-weight:900; letter-spacing:.16em; }
.cp-copy h3 { margin:15px 0 0; color:#30372d; font-family:Georgia,serif; font-size:54px; font-weight:400; letter-spacing:-.04em; }
.cp-copy p { margin:10px 0 0; color:#7d776c; }
.cp-copy span { display:block; margin-top:24px; color:#687459; font-size:11px; font-weight:900; }
.cp-cards { position:absolute; left:48%; right:0; bottom:0; height:42%; display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 16px 16px 0; }
.cp-cards i { border-radius:18px; background:linear-gradient(145deg,#dcc9ac,#f1e7d8); }
.cp-cards i:last-child { background:linear-gradient(145deg,#788568,#ccb08e); }
@media (max-width:760px) { .cafe-mock-window{inset:10px 18px 60px 0}.cafe-mobile{width:110px;height:225px}.cafe-mock-hero strong{font-size:28px}.cafe-preview-board{min-height:650px}.cp-photo{inset:0 0 55% 0}.cp-copy{left:0;top:45%;bottom:20%;padding:34px 26px}.cp-copy h3{font-size:42px}.cp-cards{left:0;height:20%;padding:12px} }

/* ===== Template 003 Japanese Heritage detail ===== */
.japanese-detail-hero{background:linear-gradient(135deg,#efe9de,#d9d0c0)}
.japanese-detail-visual{display:grid;place-items:center}.japanese-frame{position:relative;width:min(100%,500px);aspect-ratio:5/4;overflow:hidden;border:10px solid #292a27;background:linear-gradient(#cfc5b6 0 55%,#59604f 55%);box-shadow:0 28px 70px rgba(35,31,27,.18)}.jp-sun{position:absolute;right:14%;top:10%;width:80px;height:80px;border-radius:50%;background:#eee0c3}.jp-roof{position:absolute;left:12%;right:24%;bottom:25%;height:32%;background:#34332f;clip-path:polygon(0 45%,50% 0,100% 45%,91% 52%,50% 18%,9% 52%)}.jp-gate{position:absolute;right:8%;bottom:13%;width:30%;height:45%;border-left:13px solid #8f3931;border-right:13px solid #8f3931}.jp-gate:before{content:"";position:absolute;left:-28%;right:-28%;top:0;height:12px;background:#8f3931}.jp-gate:after{content:"";position:absolute;left:-16%;right:-16%;top:18%;height:9px;background:#8f3931}.jp-copy{position:absolute;left:7%;top:12%;writing-mode:vertical-rl;color:#fff;font-family:"Yu Mincho",serif;font-size:15px;letter-spacing:.16em}.japanese-preview-board{position:relative;min-height:460px;display:grid;grid-template-columns:160px 1fr;overflow:hidden;border:1px solid #d5cabc;background:#f5f0e7}.jpb-vertical{display:grid;place-items:center;padding:34px;writing-mode:vertical-rl;color:#262724;background:#fffdf8;font-family:"Yu Mincho",serif;font-size:25px;line-height:1.7;letter-spacing:.13em}.jpb-visual{position:relative;overflow:hidden;background:linear-gradient(#c9c2b7,#8c897e 56%,#56604f 56%)}.jpb-visual i{position:absolute;left:17%;bottom:16%;width:52%;height:42%;background:#34332f;clip-path:polygon(0 46%,50% 0,100% 46%,91% 55%,50% 20%,9% 55%)}.jpb-visual b{position:absolute;right:14%;top:13%;width:76px;height:76px;border-radius:50%;background:#f0dfbd}.jpb-visual em{position:absolute;right:11%;bottom:12%;width:22%;height:42%;border-left:11px solid #913a32;border-right:11px solid #913a32}.jpb-bottom{position:absolute;left:160px;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);padding:15px 22px;background:rgba(31,33,31,.9);color:#e8dfd2;font-size:9px;font-weight:800;letter-spacing:.16em;text-align:center}
@media(max-width:680px){.japanese-preview-board{grid-template-columns:90px 1fr;min-height:360px}.jpb-vertical{padding:20px;font-size:18px}.jpb-bottom{left:90px}}


/* =========================================================
   Template 004 - Minimal Salon detail preview
   ========================================================= */
.preview-salon { background: linear-gradient(135deg,#e8ded9,#f7f3f0); }
.mini-salon { background: linear-gradient(135deg,#9e8c84,#d7c7bf); }
.salon-detail-hero { background:radial-gradient(circle at 82% 16%,rgba(155,125,115,.15),transparent 27%),linear-gradient(180deg,#f5efeb,#fff); }
.salon-detail-hero .detail-copy h1 span { color:#9b7d73; }
.salon-detail-visual { position:relative; min-height:520px; }
.salon-mock-window { position:absolute; inset:18px 36px 62px 0; overflow:hidden; border-radius:24px; border:1px solid #ded3cd; background:#fffdfb; box-shadow:0 30px 80px rgba(72,58,52,.15); }
.salon-mock-top { height:54px; display:flex; align-items:center; gap:14px; padding:0 22px; }
.salon-mock-top b { margin-right:auto; color:#302a27; font-family:Georgia,serif; font-size:15px; font-weight:400; letter-spacing:.12em; }
.salon-mock-top i { width:38px; height:4px; border-radius:99px; background:#ddd3ce; }
.salon-mock-hero { position:relative; height:275px; padding:48px 44px; overflow:hidden; color:#fff; background:linear-gradient(120deg,#655a56,#b7a49a); }
.salon-mock-hero:after { content:""; position:absolute; right:8%; bottom:-28%; width:250px; height:330px; border-radius:130px 130px 0 0; background:#e8ddd7; opacity:.72; }
.salon-mock-hero strong { position:relative; z-index:1; display:block; font-family:Georgia,serif; font-size:42px; font-weight:400; line-height:.9; letter-spacing:-.05em; }
.salon-mock-hero span { position:relative; z-index:1; display:block; margin-top:18px; font-size:8px; font-weight:800; letter-spacing:.18em; }
.salon-mock-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }
.salon-mock-row i { height:90px; border-radius:14px; background:linear-gradient(145deg,#eadfd9,#c5b5ad); }
.salon-mock-row i:nth-child(2){background:linear-gradient(145deg,#d8c6bd,#f3ece7)}.salon-mock-row i:nth-child(3){background:linear-gradient(145deg,#b8a59b,#e5d8d2)}
.salon-mobile { position:absolute; right:-4px; bottom:24px; width:138px; height:280px; padding:14px 11px; border:6px solid #2c2826; border-radius:28px; background:#f4eeea; box-shadow:0 24px 50px rgba(60,48,43,.20); }
.salon-mobile i { display:block; height:150px; border-radius:15px; background:linear-gradient(145deg,#7b6e69,#d0beb5); }
.salon-mobile b { display:block; height:7px; margin-top:13px; border-radius:99px; background:#c9bbb4; }.salon-mobile b:last-child{width:68%}
.salon-preview-board { position:relative; min-height:540px; margin-top:44px; overflow:hidden; border-radius:28px; background:#f1e9e5; box-shadow:0 28px 70px rgba(72,58,52,.10); }
.spb-copy { position:absolute; left:0; top:0; bottom:0; width:42%; display:grid; align-content:center; padding:58px; background:#fffdfb; }
.spb-copy small { color:#9b7d73; font-size:9px; font-weight:900; letter-spacing:.18em; }
.spb-copy h3 { margin:18px 0 0; color:#2b2725; font-family:Georgia,serif; font-size:56px; font-weight:400; line-height:.9; letter-spacing:-.055em; }
.spb-copy p { margin:20px 0 0; color:#847b76; font-size:12px; }.spb-copy span{margin-top:28px;color:#2b2725;font-size:9px;font-weight:900;letter-spacing:.12em}
.spb-photo { position:absolute; left:42%; right:0; top:0; bottom:32%; overflow:hidden; background:linear-gradient(145deg,#8e7e77,#d6c6be); }
.spb-photo i { position:absolute; right:12%; bottom:-30px; width:250px; height:370px; border-radius:130px 130px 0 0; background:#eee5e0; opacity:.78; }.spb-photo b{position:absolute;right:23%;bottom:86px;width:104px;height:142px;border-radius:52px;background:#655853}
.spb-cards { position:absolute; left:42%; right:0; bottom:0; height:32%; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:14px; }
.spb-cards i { border-radius:18px; background:linear-gradient(145deg,#d7c5bc,#f2e9e4); }.spb-cards i:nth-child(2){background:linear-gradient(145deg,#aa948a,#e4d6cf)}.spb-cards i:nth-child(3){background:linear-gradient(145deg,#eee6e1,#c4b3ab)}
@media(max-width:760px){.salon-detail-visual{min-height:410px}.salon-mock-window{inset:10px 18px 52px 0}.salon-mobile{width:108px;height:220px}.salon-mock-hero strong{font-size:31px}.salon-preview-board{min-height:680px}.spb-copy{width:100%;bottom:54%;padding:38px 28px}.spb-copy h3{font-size:48px}.spb-photo{left:0;top:46%;bottom:20%}.spb-cards{left:0;height:20%;padding:10px}}


/* =========================================================
   Template 005 - Pastel Pop detail preview
   ========================================================= */
.preview-pastel{background:linear-gradient(135deg,#ffe5ef 0%,#edfaff 45%,#f5efff 72%,#fff3c7)}
.mini-pastel{background:linear-gradient(135deg,#f6adc3 0 25%,#b9e7d3 25% 50%,#cbbcf3 50% 75%,#f8dfa0 75%)}
.pastel-detail-hero{position:relative;overflow:hidden;padding:72px 0 82px;background:radial-gradient(circle at 86% 10%,rgba(248,223,160,.55),transparent 20%),radial-gradient(circle at 5% 84%,rgba(185,231,211,.48),transparent 22%),linear-gradient(145deg,#fff6fb,#f3fbff 52%,#f7f2ff)}
.pastel-detail-hero:before{content:"";position:absolute;right:12%;top:8%;width:130px;height:130px;border-radius:50%;background:rgba(247,183,201,.28)}
.pastel-detail-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:62px;align-items:center}.pastel-detail-copy{position:relative;z-index:2}.pastel-detail-copy h1{margin:16px 0 0;color:#40394c;font-size:clamp(58px,8vw,104px);font-weight:900;line-height:.88;letter-spacing:-.065em}.pastel-detail-copy h1 span{color:#9b75bd}.pastel-detail-copy>p{max-width:650px;margin:24px 0 0;color:#766f80}.pastel-detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.pastel-detail-tags span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.8);font-size:10px;font-weight:900;color:#675e73}.pastel-detail-visual{position:relative;min-height:520px}.pastel-window{position:absolute;inset:20px 40px 55px 0;overflow:hidden;border:1px solid #eadfeb;border-radius:28px;background:#fff;box-shadow:0 30px 75px rgba(81,75,94,.15)}.pastel-window-top{height:54px;display:flex;align-items:center;gap:12px;padding:0 22px}.pastel-window-top b{margin-right:auto;color:#564d61;font-size:15px;letter-spacing:.08em}.pastel-window-top i{width:34px;height:5px;border-radius:99px;background:#eadfeb}.pastel-window-hero{position:relative;height:275px;padding:48px 42px;overflow:hidden;background:linear-gradient(135deg,#fff2f7,#eefaff)}.pastel-window-hero:before,.pastel-window-hero:after{content:"";position:absolute;border-radius:50%}.pastel-window-hero:before{width:190px;height:190px;right:24px;top:20px;background:#b9e7d3}.pastel-window-hero:after{width:110px;height:110px;right:130px;bottom:-26px;background:#f8dfa0}.pastel-window-hero span,.pastel-window-hero strong{position:relative;z-index:2}.pastel-window-hero span{display:block;color:#a06a83;font-size:8px;font-weight:900;letter-spacing:.18em}.pastel-window-hero strong{display:block;margin-top:14px;color:#514b5e;font-size:46px;line-height:.9;letter-spacing:-.05em}.pastel-window-hero em{position:absolute;z-index:3;right:58px;top:84px;width:92px;height:92px;display:grid;place-items:center;border-radius:50% 45% 55% 45%;background:#f7b7c9;color:#fff;font-size:34px;font-style:normal;transform:rotate(10deg)}.pastel-window-row{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:14px}.pastel-window-row i{height:90px;border-radius:18px;background:#ffe7ef}.pastel-window-row i:nth-child(2){background:#e7f8f0}.pastel-window-row i:nth-child(3){background:#eee8ff}.pastel-phone{position:absolute;right:-3px;bottom:22px;width:140px;height:282px;padding:14px 11px;border:6px solid #514b5e;border-radius:30px;background:#fffafb;box-shadow:0 24px 50px rgba(81,75,94,.20)}.pastel-phone i{display:block;height:145px;border-radius:18px;background:linear-gradient(145deg,#f7b7c9,#cbbcf3)}.pastel-phone b{display:block;height:7px;margin-top:13px;border-radius:99px;background:#e8deea}.pastel-phone b:nth-of-type(2){width:78%}.pastel-phone b:nth-of-type(3){width:56%}.pastel-dot{position:absolute;border-radius:50%;box-shadow:0 10px 20px rgba(81,75,94,.08)}.pd1{left:-10px;top:3px;width:44px;height:44px;background:#f8dfa0}.pd2{right:18px;top:2px;width:32px;height:32px;background:#b9def5}.pd3{left:15%;bottom:12px;width:27px;height:27px;background:#cbbcf3}
.pastel-stats{border-top:1px solid #eee4ef;border-bottom:1px solid #eee4ef;background:#fff}.pastel-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}.pastel-stats-grid>div{padding:25px 22px;border-right:1px solid #eee4ef}.pastel-stats-grid>div:last-child{border-right:0}.pastel-stats span{display:block;color:#9d91a5;font-size:9px;font-weight:900;letter-spacing:.14em}.pastel-stats strong{display:block;margin-top:5px;color:#514b5e;font-size:22px}.pastel-stats small{display:block;margin-top:2px;color:#918796;font-size:10px}.pastel-about-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:72px;align-items:start}.pastel-about-grid>div:first-child h2{margin:13px 0 0;color:#262a3a;font-size:clamp(34px,4.6vw,50px);line-height:1.3;letter-spacing:-.04em}.pastel-about-grid>div:first-child p{color:#7b8190}.pastel-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pastel-feature-grid article{padding:26px;border:1px solid #eee5ef;border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(81,75,94,.05)}.pastel-feature-grid article:nth-child(1){border-top:6px solid #f7b7c9}.pastel-feature-grid article:nth-child(2){border-top:6px solid #b9e7d3}.pastel-feature-grid article:nth-child(3){border-top:6px solid #cbbcf3}.pastel-feature-grid article:nth-child(4){border-top:6px solid #f8dfa0}.pastel-feature-grid b{color:#a58cab;font-size:10px}.pastel-feature-grid h3{margin:10px 0 0;color:#514b5e}.pastel-feature-grid p{margin:7px 0 0;color:#8b8190;font-size:12px}.pastel-preview-board{position:relative;min-height:560px;margin-top:44px;overflow:hidden;border-radius:34px;background:#fff;box-shadow:0 28px 70px rgba(81,75,94,.11)}.ppb-copy{position:absolute;left:0;top:0;bottom:0;width:43%;display:grid;align-content:center;padding:58px;background:#fff8fc}.ppb-copy small{color:#b76f89;font-size:9px;font-weight:900;letter-spacing:.16em}.ppb-copy h3{margin:16px 0 0;color:#514b5e;font-size:56px;line-height:.94;letter-spacing:-.055em}.ppb-copy h3 span{color:#9a75bd}.ppb-copy p{color:#867b8b;font-size:12px}.ppb-copy b{margin-top:18px;font-size:10px}.ppb-art{position:absolute;left:43%;right:0;top:0;bottom:33%;overflow:hidden;background:linear-gradient(145deg,#f2fbff,#fff2f7)}.ppb-art i{position:absolute;border-radius:50%}.pa-a{width:190px;height:190px;left:12%;top:18%;background:#f7b7c9}.pa-b{width:205px;height:205px;right:9%;bottom:5%;background:#b9e7d3}.pa-c{width:115px;height:115px;right:28%;top:14%;background:#f8dfa0}.pa-face{left:38%;top:31%;width:185px;height:145px;border:8px solid #514b5e;border-radius:54% 46% 50% 50%;background:#fff}.pa-face:before,.pa-face:after{content:"";position:absolute;top:52px;width:11px;height:11px;border-radius:50%;background:#514b5e}.pa-face:before{left:45px}.pa-face:after{right:45px}.ppb-cards{position:absolute;left:43%;right:0;bottom:0;height:33%;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:12px}.ppb-cards i{border-radius:20px;background:#ffe5ef}.ppb-cards i:nth-child(2){background:#e6f8f0}.ppb-cards i:nth-child(3){background:#ede6ff}.ppb-cards i:nth-child(4){background:#fff1c5}.pastel-page-list{border-top:1px solid #eee5ef}.pastel-page-list article{display:grid;grid-template-columns:50px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid #eee5ef}.pastel-page-list>article>span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#f6effa;color:#8f75a5;font-size:10px;font-weight:900}.pastel-page-list h3{margin:0;color:#514b5e;font-size:16px}.pastel-page-list p{margin:3px 0 0;color:#908594;font-size:11px}.pastel-page-list b{font-family:Consolas,monospace;color:#7e7585;font-size:10px}.pastel-edit-section{padding:96px 0;background:linear-gradient(145deg,#514b5e,#665b73);color:#fff}.pastel-edit-section .pastel-about-grid>div:first-child h2{color:#fff}.pastel-edit-section .pastel-about-grid>div:first-child p{color:#cfc6d3}.pastel-code-list{display:grid;gap:10px}.pastel-code-list article{display:grid;grid-template-columns:34px 1fr auto;gap:15px;align-items:center;padding:17px 18px;border:1px solid rgba(255,255,255,.1);border-radius:17px;background:rgba(255,255,255,.05)}.swatch{width:28px;height:28px;border-radius:9px}.swatch.pink{background:#f7b7c9}.swatch.mint{background:#b9e7d3}.swatch.lavender{background:#cbbcf3}.swatch.yellow{background:#f8dfa0}.swatch.sky{background:#b9def5}.pastel-code-list h3{margin:0;font-size:14px}.pastel-code-list p{margin:2px 0 0;color:#c8becd;font-size:10px}.pastel-code-list code{padding:6px 8px;border-radius:8px;background:#312d39;color:#ffe8a9;font-size:10px}.pastel-download{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center;padding:42px;border:1px solid #eee5ef;border-radius:28px;background:linear-gradient(145deg,#fff7fb,#f4fbff)}.pastel-download h2{margin:12px 0 0;font-size:36px}.pastel-download p{max-width:760px;color:#7e7586}.pastel-download-note{display:block;margin-top:10px;text-align:center;color:#958b9b;font-size:10px}
@media(max-width:900px){.pastel-detail-grid,.pastel-about-grid,.pastel-download{grid-template-columns:1fr}.pastel-stats-grid{grid-template-columns:1fr 1fr}.pastel-detail-visual{min-height:440px}.pastel-download>div:last-child{justify-self:start}.pastel-preview-board{min-height:700px}.ppb-copy{width:100%;bottom:58%;padding:36px}.ppb-art{left:0;top:42%;bottom:22%}.ppb-cards{left:0;height:22%}}
@media(max-width:680px){.pastel-detail-hero{padding:48px 0 60px}.pastel-detail-copy h1{font-size:58px}.pastel-detail-visual{min-height:390px}.pastel-window{inset:10px 16px 48px 0}.pastel-window-hero strong{font-size:34px}.pastel-phone{width:105px;height:215px}.pastel-stats-grid{grid-template-columns:1fr 1fr}.pastel-feature-grid{grid-template-columns:1fr}.pastel-page-list article{grid-template-columns:42px 1fr}.pastel-page-list article>b{grid-column:2}.pastel-code-list article{grid-template-columns:30px 1fr}.pastel-code-list code{grid-column:2}.pastel-preview-board{min-height:650px}.ppb-copy h3{font-size:43px}.pastel-download{padding:28px}}
/* =========================================================
   Template 006 - Creative Portfolio detail
   ========================================================= */
.preview-creative{background:linear-gradient(135deg,#111 0 50%,#f3efe7 50%)}.mini-creative{background:linear-gradient(135deg,#111 0 35%,#c7ff3e 35% 63%,#3155ff 63%)}
.preview-green{background:linear-gradient(135deg,#e8f2e5 0%,#f8fbf6 48%,#dfeedd 100%)}
.creative-detail-hero{padding:72px 0 84px;overflow:hidden;background:#f3efe7;border-bottom:1px solid #d4cec3}.creative-detail-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.creative-detail-copy h1{margin:16px 0 0;color:#111;font-size:clamp(56px,8vw,104px);font-weight:950;line-height:.84;letter-spacing:-.07em}.creative-detail-copy h1 span{color:#3155ff}.creative-detail-copy>p{max-width:640px;color:#635e57}.creative-detail-visual{position:relative;min-height:520px}.creative-board{position:absolute;inset:22px 32px 52px 0;border:2px solid #111;background:#f3efe7;box-shadow:16px 16px 0 #111;overflow:hidden}.cb-head{height:54px;display:flex;align-items:center;gap:11px;padding:0 20px;border-bottom:2px solid #111}.cb-head b{margin-right:auto;font-size:12px}.cb-head i{width:28px;height:5px;background:#111}.cb-hero{position:relative;height:300px;padding:38px;overflow:hidden}.cb-hero strong{position:relative;z-index:2;font-size:54px;line-height:.78;letter-spacing:-.07em}.cb-hero em{color:#3155ff;font-style:normal}.cb-hero span{position:absolute;right:35px;top:32px;width:165px;height:165px;border-radius:50%;background:#c7ff3e}.cb-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;height:110px;border-top:2px solid #111}.cb-row i{border-right:2px solid #111;background:#ff5638}.cb-row i:nth-child(2){background:#3155ff}.cb-row i:nth-child(3){border-right:0;background:#c7ff3e}.creative-tag{position:absolute;right:-8px;bottom:10px;width:110px;height:110px;display:grid;place-items:center;border:2px solid #111;border-radius:50%;background:#c7ff3e;font-size:10px;font-weight:950;text-align:center;transform:rotate(9deg)}.creative-stats{background:#111;color:#f3efe7}.creative-stats .pastel-stats-grid>div{border-color:rgba(255,255,255,.18)}.creative-stats span,.creative-stats small{color:#aaa49a}.creative-stats strong{color:#fff}.creative-info-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:start}.creative-info-grid>div:first-child h2{margin:12px 0 0;font-size:clamp(38px,5vw,56px);line-height:1.05;letter-spacing:-.05em}.creative-info-grid>div:first-child p{color:#726c65}.creative-features{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid #111;border-left:2px solid #111}.creative-features article{padding:28px;border-right:2px solid #111;border-bottom:2px solid #111}.creative-features b{font-size:10px;color:#3155ff}.creative-features h3{margin:12px 0 0;font-size:21px}.creative-features p{margin:7px 0 0;color:#777068;font-size:12px}.creative-preview-section{padding:100px 0;background:#111;color:#f3efe7}.creative-preview{position:relative;min-height:570px;margin-top:42px;border:2px solid #f3efe7;overflow:hidden}.cp-title{position:absolute;left:5%;top:10%;z-index:3}.cp-title small{font-size:9px;letter-spacing:.18em}.cp-title strong{display:block;margin-top:20px;font-size:82px;line-height:.78;letter-spacing:-.075em}.cp-title em{color:#c7ff3e;font-style:normal}.cp-shape{position:absolute}.cpa{right:9%;top:11%;width:245px;height:245px;border-radius:50%;background:#c7ff3e}.cpb{right:18%;bottom:15%;width:410px;height:165px;background:#3155ff;transform:rotate(-7deg)}.cpc{left:51%;top:18%;width:95px;height:330px;border:2px solid #f3efe7;transform:rotate(13deg)}.cp-bottom{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid #f3efe7}.cp-bottom span{padding:16px;border-right:2px solid #f3efe7;font-size:10px;font-weight:900}.cp-bottom span:last-child{border-right:0}.creative-edit{padding:96px 0;background:#3155ff;color:#fff}.creative-edit .creative-info-grid>div:first-child h2{color:#fff}.creative-edit .creative-info-grid>div:first-child p{color:#dce2ff}.creative-code{display:grid;gap:9px}.creative-code article{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.35)}.creative-code article>span{width:30px;height:30px;border:1px solid rgba(255,255,255,.5)}.creative-code h3{margin:0}.creative-code p{margin:1px 0 0;font-size:10px;color:#dce2ff}.creative-code code{padding:6px 8px;background:#111;color:#c7ff3e;font-size:10px}.creative-download{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;padding:42px;border:2px solid #111;background:#f3efe7;box-shadow:10px 10px 0 #111}.creative-download h2{margin:12px 0 0;font-size:38px}.creative-download p{max-width:760px;color:#6d675f}
@media(max-width:900px){.creative-detail-grid,.creative-info-grid,.creative-download{grid-template-columns:1fr}.creative-detail-visual{min-height:450px}.creative-preview{min-height:650px}.cp-title strong{font-size:68px}.creative-download>div:last-child{justify-self:start}}
@media(max-width:680px){.creative-detail-hero{padding:48px 0 62px}.creative-detail-copy h1{font-size:55px}.creative-detail-visual{min-height:380px}.creative-board{inset:12px 18px 45px 0}.cb-hero strong{font-size:36px}.cb-hero span{width:115px;height:115px}.creative-features{grid-template-columns:1fr}.creative-code article{grid-template-columns:30px 1fr}.creative-code code{grid-column:2}.creative-preview{min-height:560px}.cp-title strong{font-size:48px}.cpa{width:150px;height:150px}.cpb{width:280px}.creative-download{padding:28px}}


/* =========================================================
   Template 001 - upgraded detail page
   実際のサムネイル画像を使って商品ページらしく見せるスタイル
   ========================================================= */
.sb-detail-hero {
  padding: 68px 0 86px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 14%, rgba(89, 113, 238, 0.14), transparent 24%),
    radial-gradient(circle at 10% 0%, rgba(49, 94, 234, 0.08), transparent 28%),
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border-color);
}

.sb-hero-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 62px;
  align-items: center;
}

.sb-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sb-kicker span,
.sb-chip-row span,
.sb-mini-note strong {
  font-weight: 800;
}

.sb-kicker span {
  padding: 8px 12px;
  border-radius: 999px;
  color: #33436d;
  background: #eef3ff;
  font-size: 11px;
  letter-spacing: .08em;
}

.sb-hero-copy h1 {
  margin: 18px 0 0;
  color: #182034;
  font-size: clamp(58px, 8vw, 104px);
  line-height: .88;
  letter-spacing: -.065em;
}

.sb-hero-copy h1 span {
  color: #315eea;
}

.sb-lead {
  max-width: 660px;
  margin: 24px 0 0;
  color: #677187;
  font-size: 15px;
}

.sb-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.sb-chip-row span {
  padding: 8px 12px;
  border: 1px solid #dfe6fb;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: #52607d;
  font-size: 12px;
}

.sb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.sb-mini-note {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid #e4e8f5;
  border-radius: 16px;
  color: #626b80;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 28px rgba(37,43,74,.04);
  font-size: 13px;
}

.sb-hero-visual {
  position: relative;
  min-height: 560px;
}

.sb-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
}

.sb-orb-a {
  right: 2%;
  top: 0;
  width: 88px;
  height: 88px;
  background: rgba(49, 94, 234, .10);
}

.sb-orb-b {
  left: 0;
  bottom: 34px;
  width: 56px;
  height: 56px;
  background: rgba(117, 141, 232, .14);
}

.sb-browser-card {
  position: absolute;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e8f3;
  box-shadow: 0 34px 85px rgba(37,43,74,.14);
}

.sb-browser-main {
  inset: 16px 10px 64px 0;
  border-radius: 28px;
  transform: rotate(-1.3deg);
}

.sb-browser-top {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-bottom: 1px solid #edf0f6;
  background: #fbfbfe;
}

.sb-browser-top span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d7dbe6;
}

.sb-browser-top em {
  margin-left: 8px;
  color: #7d8495;
  font-style: normal;
  font-size: 11px;
}

.sb-browser-shot,
.sb-preview-shot,
.sb-phone-shot {
  background: #f8faff;
}

.sb-browser-shot img,
.sb-preview-shot img,
.sb-phone-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.sb-browser-shot {
  height: 430px;
}

.sb-phone-card {
  right: 0;
  bottom: 30px;
  width: 170px;
  padding: 10px 10px 14px;
  border-radius: 34px;
  background: #1f2538;
  box-shadow: 0 26px 60px rgba(31,37,56,.22);
}

.sb-phone-notch {
  width: 82px;
  height: 8px;
  margin: 4px auto 10px;
  border-radius: 999px;
  background: #3b4259;
}

.sb-phone-shot {
  height: 292px;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
}

.sb-floating-badge {
  position: absolute;
  left: 16px;
  bottom: 10px;
  z-index: 2;
  padding: 14px 16px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1b2237, #315eea);
  box-shadow: 0 16px 40px rgba(49,94,234,.20);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.sb-floating-badge span {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.82);
  font-size: 10px;
  letter-spacing: .14em;
}

.sb-summary {
  border-top: 1px solid #edf0f6;
  border-bottom: 1px solid #edf0f6;
  background: #fff;
}

.sb-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sb-summary-grid > div {
  padding: 26px 22px;
  border-right: 1px solid #edf0f6;
}

.sb-summary-grid > div:last-child {
  border-right: 0;
}

.sb-summary-grid span {
  display: block;
  color: #8b93a7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.sb-summary-grid strong {
  display: block;
  margin-top: 7px;
  color: #1f2537;
  font-size: 24px;
}

.sb-summary-grid small {
  display: block;
  margin-top: 3px;
  color: #7f8799;
  font-size: 11px;
}

.sb-tight-heading { max-width: 860px; }

.sb-use-grid,
.sb-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.sb-use-grid article,
.sb-feature-grid article {
  padding: 28px;
  border: 1px solid var(--border-color);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(37,43,74,.05);
}

.sb-use-grid b,
.sb-feature-grid span {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  color: #315eea;
  background: #edf2ff;
  font-size: 12px;
  font-weight: 900;
}

.sb-use-grid h3,
.sb-feature-grid h3,
.sb-page-list h3,
.sb-edit-list h3 {
  margin: 14px 0 0;
  color: #1f2537;
  font-size: 20px;
}

.sb-use-grid p,
.sb-feature-grid p,
.sb-side-copy p,
.sb-page-list p,
.sb-preview-copy p {
  margin: 8px 0 0;
  color: #697084;
  font-size: 14px;
}

.sb-about-grid,
.sb-detail-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 68px;
  align-items: start;
}

.sb-side-copy h2,
.sb-side-copy-light h2 {
  margin: 12px 0 0;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.1;
  letter-spacing: -.05em;
}

.sb-side-copy-light h2,
.sb-side-copy-light p {
  color: #fff;
}

.sb-preview-stage {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 28px;
  align-items: center;
  padding: 24px;
  border: 1px solid #e5e8f0;
  border-radius: 34px;
  background: linear-gradient(145deg, #f8faff, #ffffff);
  box-shadow: 0 24px 65px rgba(37,43,74,.08);
}

.sb-preview-copy {
  padding: 18px 12px 18px 8px;
}

.sb-preview-copy small {
  color: #315eea;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.sb-preview-copy h3 {
  margin: 14px 0 0;
  color: #182034;
  font-size: clamp(38px, 5vw, 58px);
  line-height: .95;
  letter-spacing: -.06em;
}

.sb-preview-copy h3 span {
  color: #315eea;
}

.sb-preview-copy ul {
  margin: 18px 0 0;
  padding-left: 18px;
  color: #556074;
}

.sb-preview-copy li + li { margin-top: 8px; }

.sb-preview-browser {
  overflow: hidden;
  border: 1px solid #dfe5f2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(37,43,74,.10);
}

.sb-browser-top-dark {
  background: #f6f8fc;
}

.sb-preview-shot {
  height: 520px;
}

.sb-page-list {
  border-top: 1px solid #e7ebf3;
}

.sb-page-list article {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #e7ebf3;
}

.sb-page-list > article > span,
.sb-edit-num {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #315eea;
  background: #edf2ff;
  font-size: 11px;
  font-weight: 900;
}

.sb-page-list b,
.sb-edit-list code {
  font-family: Consolas, Monaco, monospace;
}

.sb-page-list b {
  color: #71809d;
  font-size: 11px;
}

.sb-edit-section {
  background: linear-gradient(140deg, #182034, #243156);
}

.sb-edit-list {
  display: grid;
  gap: 12px;
}

.sb-edit-list article {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
}

.sb-edit-list h3 { color: #fff; }

.sb-edit-list p {
  margin: 4px 0 0;
  color: #c7d2ea;
  font-size: 12px;
}

.sb-edit-list code {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(9, 14, 28, .45);
  color: #aee3c5;
  font-size: 11px;
}

.sb-difficulty-table {
  border: 1px solid #e3e8f3;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 40px rgba(37,43,74,.05);
}

.sb-difficulty-row {
  display: grid;
  grid-template-columns: 1.3fr .7fr .7fr .7fr;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #edf0f6;
}

.sb-difficulty-row:last-child { border-bottom: 0; }

.sb-difficulty-head {
  color: #657189;
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 800;
}

.sb-difficulty-row strong {
  color: #1f2537;
  font-size: 14px;
}

.sb-difficulty-row span,
.sb-difficulty-row b {
  color: #647189;
  font-size: 13px;
}

.sb-difficulty-row .stars {
  color: #315eea;
  font-weight: 900;
}

.sb-download-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: center;
  padding: 44px;
  border: 1px solid #e4e8f3;
  border-radius: 30px;
  background: linear-gradient(145deg, #ffffff, #f7f9ff);
  box-shadow: 0 24px 65px rgba(37,43,74,.06);
}

.sb-download-box h2 {
  margin: 12px 0 0;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.05em;
}

.sb-download-box p {
  max-width: 760px;
  color: #697084;
}

.sb-download-panel {
  min-width: 280px;
  padding: 28px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #1a2237, #315eea);
  box-shadow: 0 18px 48px rgba(49,94,234,.20);
}

.sb-download-panel > span {
  color: rgba(255,255,255,.74);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.sb-download-panel strong {
  display: block;
  margin-top: 12px;
  font-size: 28px;
}

.sb-download-panel p {
  margin: 10px 0 18px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.sb-download-panel .button {
  width: 100%;
  justify-content: center;
}

.sb-download-panel .download-demo-link {
  display: inline-block;
  margin-top: 14px;
  color: #fff;
}

@media (max-width: 980px) {
  .sb-hero-grid,
  .sb-about-grid,
  .sb-detail-grid,
  .sb-preview-stage,
  .sb-download-box {
    grid-template-columns: 1fr;
  }

  .sb-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sb-use-grid,
  .sb-feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sb-hero-visual {
    min-height: 520px;
  }

  .sb-download-panel {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 680px) {
  .sb-detail-hero {
    padding: 46px 0 62px;
  }

  .sb-hero-copy h1 {
    font-size: 58px;
  }

  .sb-hero-actions .button {
    width: 100%;
  }

  .sb-summary-grid,
  .sb-use-grid,
  .sb-feature-grid {
    grid-template-columns: 1fr;
  }

  .sb-summary-grid > div {
    border-right: 0;
    border-bottom: 1px solid #edf0f6;
  }

  .sb-summary-grid > div:last-child {
    border-bottom: 0;
  }

  .sb-hero-visual {
    min-height: 400px;
  }

  .sb-browser-main {
    inset: 10px 14px 46px 0;
  }

  .sb-browser-shot,
  .sb-preview-shot {
    height: 290px;
  }

  .sb-phone-card {
    width: 120px;
    bottom: 18px;
  }

  .sb-phone-shot {
    height: 190px;
  }

  .sb-floating-badge {
    left: 10px;
    bottom: 0;
    font-size: 18px;
  }

  .sb-preview-stage,
  .sb-download-box {
    padding: 22px;
  }

  .sb-page-list article,
  .sb-edit-list article,
  .sb-difficulty-row {
    grid-template-columns: 1fr;
  }

  .sb-page-list > article > span,
  .sb-edit-num {
    margin-bottom: -4px;
  }

  .sb-page-list b,
  .sb-edit-list code {
    display: inline-block;
    margin-top: 4px;
  }
}


/* =========================================================
   Template detail pages with real desktop and mobile screenshots
   商品ページらしい見せ方の共通スタイル
   ========================================================= */
.tpl-page {
  --tpl-accent: #315eea;
  --tpl-accent-soft: #edf2ff;
  --tpl-ink: #1d2436;
  --tpl-muted: #667186;
  --tpl-soft: #f7f9ff;
  --tpl-dark: #182034;
  --tpl-dark-2: #243156;
  --tpl-pop: #6f87ff;
}

.tpl-business { --tpl-accent:#315eea; --tpl-accent-soft:#edf2ff; --tpl-ink:#182034; --tpl-muted:#677187; --tpl-soft:#f7f9ff; --tpl-dark:#182034; --tpl-dark-2:#243156; --tpl-pop:#7e98ff; }
.tpl-cafe { --tpl-accent:#788567; --tpl-accent-soft:#edf0e6; --tpl-ink:#394032; --tpl-muted:#766f63; --tpl-soft:#fbf9f4; --tpl-dark:#3f4738; --tpl-dark-2:#5f6550; --tpl-pop:#c6b08e; }
.tpl-japanese { --tpl-accent:#8f3931; --tpl-accent-soft:#f3e7e3; --tpl-ink:#2c2a26; --tpl-muted:#6f695f; --tpl-soft:#f5f0e7; --tpl-dark:#2c2a26; --tpl-dark-2:#52483f; --tpl-pop:#b28a55; }
.tpl-salon { --tpl-accent:#9b7d73; --tpl-accent-soft:#f2eae6; --tpl-ink:#302a27; --tpl-muted:#726863; --tpl-soft:#f7f3f0; --tpl-dark:#655a56; --tpl-dark-2:#8b7770; --tpl-pop:#d9c2b5; }
.tpl-pastel { --tpl-accent:#9b75bd; --tpl-accent-soft:#f3ecfb; --tpl-ink:#514b5e; --tpl-muted:#7d7488; --tpl-soft:#fff8fc; --tpl-dark:#514b5e; --tpl-dark-2:#6a5d78; --tpl-pop:#f7b7c9; }
.tpl-creative { --tpl-accent:#3155ff; --tpl-accent-soft:#edf0ff; --tpl-ink:#111111; --tpl-muted:#68625c; --tpl-soft:#f3efe7; --tpl-dark:#111111; --tpl-dark-2:#3155ff; --tpl-pop:#c7ff3e; }
.tpl-green { --tpl-accent:#2f7a4b; --tpl-accent-soft:#e9f4e8; --tpl-ink:#193027; --tpl-muted:#66786e; --tpl-soft:#f4f8f3; --tpl-dark:#153f2a; --tpl-dark-2:#25643f; --tpl-pop:#8fbd61; }

.tpl-page .breadcrumb span,
.tpl-page .breadcrumb a,
.tpl-page .text-link { color: var(--tpl-muted); }

.tpl-page .text-link:hover,
.tpl-page .breadcrumb a:hover { color: var(--tpl-accent); }

.tpl-hero-section {
  padding: 68px 0 86px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--tpl-accent) 16%, transparent), transparent 24%),
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--tpl-pop) 12%, transparent), transparent 28%),
    linear-gradient(180deg, var(--tpl-soft) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border-color);
}

.tpl-hero-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 62px;
  align-items: center;
}

.tpl-kicker,
.tpl-chip-row,
.tpl-hero-actions {
  display: flex;
  flex-wrap: wrap;
}

.tpl-kicker { gap: 10px; }
.tpl-kicker span {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--tpl-ink);
  background: var(--tpl-accent-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.tpl-hero-copy h1 {
  margin: 18px 0 0;
  color: var(--tpl-ink);
  font-size: clamp(58px, 8vw, 104px);
  line-height: .88;
  letter-spacing: -.065em;
}

.tpl-hero-copy h1 span,
.tpl-preview-copy h3 span,
.tpl-side-copy .text-link,
.tpl-page .eyebrow,
.tpl-page .tpl-difficulty-row .stars { color: var(--tpl-accent); }

.tpl-lead {
  max-width: 700px;
  margin: 24px 0 0;
  color: var(--tpl-muted);
  font-size: 15px;
}

.tpl-chip-row { gap: 10px; margin-top: 24px; }
.tpl-chip-row span {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--tpl-muted);
  font-size: 12px;
  font-weight: 800;
}

.tpl-hero-actions { gap: 12px; margin-top: 28px; }

.tpl-mini-note {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  color: var(--tpl-muted);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(37,43,74,.04);
  font-size: 13px;
}

.tpl-mini-note strong { color: var(--tpl-ink); }

.tpl-hero-visual { position: relative; min-height: 560px; }
.tpl-orb { position: absolute; border-radius: 50%; }
.tpl-orb-a { right: 2%; top: 0; width: 88px; height: 88px; background: color-mix(in srgb, var(--tpl-accent) 14%, white); }
.tpl-orb-b { left: 0; bottom: 34px; width: 56px; height: 56px; background: color-mix(in srgb, var(--tpl-pop) 22%, white); }

.tpl-browser-card {
  position: absolute;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e8f3;
  box-shadow: 0 34px 85px rgba(37,43,74,.14);
}

.tpl-browser-main {
  inset: 16px 10px 64px 0;
  border-radius: 28px;
  transform: rotate(-1.3deg);
}

.tpl-browser-top {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-bottom: 1px solid #edf0f6;
  background: #fbfbfe;
}

.tpl-browser-top span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d7dbe6;
}

.tpl-browser-top em {
  margin-left: 8px;
  color: #7d8495;
  font-style: normal;
  font-size: 11px;
}

.tpl-browser-shot,
.tpl-preview-shot,
.tpl-phone-shot { background: #f8faff; }

.tpl-browser-shot img,
.tpl-preview-shot img,
.tpl-phone-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.tpl-browser-shot { height: 430px; }
.tpl-phone-card {
  right: 0;
  bottom: 30px;
  width: 170px;
  padding: 10px 10px 14px;
  border-radius: 34px;
  background: #1f2538;
  box-shadow: 0 26px 60px rgba(31,37,56,.22);
}
.tpl-phone-notch { width: 82px; height: 8px; margin: 4px auto 10px; border-radius: 999px; background: #3b4259; }
.tpl-phone-shot { height: 292px; overflow: hidden; border-radius: 22px; background: #fff; }
.tpl-floating-badge {
  position: absolute;
  left: 16px;
  bottom: 10px;
  z-index: 2;
  padding: 14px 16px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--tpl-dark), var(--tpl-accent));
  box-shadow: 0 16px 40px rgba(37,43,74,.18);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}
.tpl-floating-badge span { display:block; margin-top:7px; color:rgba(255,255,255,.82); font-size:10px; letter-spacing:.14em; }

.tpl-summary { border-top: 1px solid #edf0f6; border-bottom: 1px solid #edf0f6; background: #fff; }
.tpl-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.tpl-summary-grid > div { padding: 26px 22px; border-right: 1px solid #edf0f6; }
.tpl-summary-grid > div:last-child { border-right: 0; }
.tpl-summary-grid span { display:block; color:#8b93a7; font-size:10px; font-weight:900; letter-spacing:.14em; }
.tpl-summary-grid strong { display:block; margin-top:7px; color:var(--tpl-ink); font-size:24px; }
.tpl-summary-grid small { display:block; margin-top:3px; color:#7f8799; font-size:11px; }

.tpl-tight-heading { max-width: 860px; }
.tpl-recommend-grid,
.tpl-feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.tpl-recommend-grid article,
.tpl-feature-grid article {
  padding: 28px;
  border: 1px solid var(--border-color);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(37,43,74,.05);
}
.tpl-recommend-grid b,
.tpl-feature-grid span,
.tpl-page-list > article > span,
.tpl-edit-num {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--tpl-accent);
  background: var(--tpl-accent-soft);
  font-size: 12px;
  font-weight: 900;
}
.tpl-recommend-grid h3,
.tpl-feature-grid h3,
.tpl-page-list h3,
.tpl-edit-list h3 { margin:14px 0 0; color:var(--tpl-ink); font-size:20px; }
.tpl-recommend-grid p,
.tpl-feature-grid p,
.tpl-side-copy p,
.tpl-page-list p,
.tpl-preview-copy p { margin:8px 0 0; color:var(--tpl-muted); font-size:14px; }

.tpl-two-col { display:grid; grid-template-columns:.78fr 1.22fr; gap:68px; align-items:start; }
.tpl-side-copy h2,
.tpl-side-copy-light h2 { margin:12px 0 0; font-size:clamp(34px,5vw,54px); line-height:1.1; letter-spacing:-.05em; color:var(--tpl-ink); }
.tpl-side-copy-light h2,
.tpl-side-copy-light p { color:#fff; }

.tpl-preview-stage {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 28px;
  align-items: center;
  padding: 24px;
  border: 1px solid #e5e8f0;
  border-radius: 34px;
  background: linear-gradient(145deg, var(--tpl-soft), #ffffff);
  box-shadow: 0 24px 65px rgba(37,43,74,.08);
}
.tpl-preview-copy { padding:18px 12px 18px 8px; }
.tpl-preview-copy small { color:var(--tpl-accent); font-size:10px; font-weight:900; letter-spacing:.16em; }
.tpl-preview-copy h3 { margin:14px 0 0; color:var(--tpl-ink); font-size:clamp(38px,5vw,58px); line-height:.95; letter-spacing:-.06em; }
.tpl-preview-copy ul { margin:18px 0 0; padding-left:18px; color:#556074; }
.tpl-preview-copy li + li { margin-top:8px; }

.tpl-preview-browser {
  overflow: hidden;
  border: 1px solid #dfe5f2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(37,43,74,.10);
}
.tpl-browser-top-dark { background:#f6f8fc; }
.tpl-preview-shot { height: 520px; }

.tpl-page-list { border-top:1px solid #e7ebf3; }
.tpl-page-list article {
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:20px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid #e7ebf3;
}
.tpl-page-list b,
.tpl-edit-list code { font-family:Consolas, Monaco, monospace; }
.tpl-page-list b { color:#71809d; font-size:11px; }

.tpl-edit-section { background: linear-gradient(140deg, var(--tpl-dark), var(--tpl-dark-2)); }
.tpl-edit-list { display:grid; gap:12px; }
.tpl-edit-list article {
  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:18px;
  align-items:center;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.05);
}
.tpl-edit-list h3 { color:#fff; }
.tpl-edit-list p { margin:4px 0 0; color:#d7def0; font-size:12px; }
.tpl-edit-list code {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(9, 14, 28, .45);
  color: color-mix(in srgb, var(--tpl-pop) 50%, white);
  font-size: 11px;
}

.tpl-difficulty-table {
  border:1px solid #e3e8f3;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 40px rgba(37,43,74,.05);
}
.tpl-difficulty-row {
  display:grid;
  grid-template-columns:1.3fr .7fr .7fr .7fr;
  gap:18px;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid #edf0f6;
}
.tpl-difficulty-row:last-child { border-bottom:0; }
.tpl-difficulty-head { color:#657189; background:#f7f9fc; font-size:12px; font-weight:800; }
.tpl-difficulty-row strong { color:var(--tpl-ink); font-size:14px; }
.tpl-difficulty-row span,
.tpl-difficulty-row b { color:#647189; font-size:13px; }

.tpl-download-box {
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;
  align-items:center;
  padding:44px;
  border:1px solid #e4e8f3;
  border-radius:30px;
  background: linear-gradient(145deg, #ffffff, var(--tpl-soft));
  box-shadow:0 24px 65px rgba(37,43,74,.06);
}
.tpl-download-box h2 { margin:12px 0 0; font-size:clamp(34px,4vw,46px); line-height:1.05; letter-spacing:-.05em; color:var(--tpl-ink); }
.tpl-download-box p { max-width:760px; color:var(--tpl-muted); }
.tpl-download-panel {
  min-width: 280px;
  padding: 28px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--tpl-dark), var(--tpl-accent));
  box-shadow: 0 18px 48px rgba(37,43,74,.18);
}
.tpl-download-panel > span { color:rgba(255,255,255,.74); font-size:10px; font-weight:900; letter-spacing:.16em; }
.tpl-download-panel strong { display:block; margin-top:12px; font-size:28px; }
.tpl-download-panel p { margin:10px 0 18px; color:rgba(255,255,255,.82); font-size:13px; }
.tpl-download-panel .button { width:100%; justify-content:center; }
.tpl-download-panel .download-demo-link { display:inline-block; margin-top:14px; color:#fff; }
.tpl-cta-section { background: linear-gradient(135deg, var(--tpl-dark-2), var(--tpl-accent)); }

@media (max-width: 980px) {
  .tpl-hero-grid,
  .tpl-two-col,
  .tpl-preview-stage,
  .tpl-download-box { grid-template-columns:1fr; }
  .tpl-summary-grid { grid-template-columns:1fr 1fr; }
  .tpl-recommend-grid,
  .tpl-feature-grid { grid-template-columns:1fr 1fr; }
  .tpl-hero-visual { min-height: 520px; }
  .tpl-download-panel { min-width:0; width:100%; }
}

@media (max-width: 680px) {
  .tpl-hero-section { padding:46px 0 62px; }
  .tpl-hero-copy h1 { font-size:58px; }
  .tpl-hero-actions .button { width:100%; }
  .tpl-summary-grid,
  .tpl-recommend-grid,
  .tpl-feature-grid { grid-template-columns:1fr; }
  .tpl-summary-grid > div { border-right:0; border-bottom:1px solid #edf0f6; }
  .tpl-summary-grid > div:last-child { border-bottom:0; }
  .tpl-hero-visual { min-height:400px; }
  .tpl-browser-main { inset:10px 14px 46px 0; }
  .tpl-browser-shot,
  .tpl-preview-shot { height:290px; }
  .tpl-phone-card { width:120px; bottom:18px; }
  .tpl-phone-shot { height:190px; }
  .tpl-floating-badge { left:10px; bottom:0; font-size:18px; }
  .tpl-preview-stage,
  .tpl-download-box { padding:22px; }
  .tpl-page-list article,
  .tpl-edit-list article,
  .tpl-difficulty-row { grid-template-columns:1fr; }
  .tpl-page-list > article > span,
  .tpl-edit-num { margin-bottom:-4px; }
  .tpl-page-list b,
  .tpl-edit-list code { display:inline-block; margin-top:4px; }
}