/* うちの子えほん 紹介LP - 2026-05-22 (v2: モック忠実化) */

:root {
  --main: #A8A4D8;
  --main-deep: #8A85C2;
  --main-pale: #E8E4F5;
  --cream: #FAF3E3;
  --cream-deep: #F1E6CC;
  --cream-pale: #FFF9EC;
  --pink: #FFB6C1;
  --pink-deep: #FF9AAA;
  --pink-pale: #FFF5F7;
  --turquoise: #7FD1D1;
  --brown: #8B6F47;
  --brown-deep: #6B4F3A;
  --line-green: #06C755;
  --line-green-deep: #05A648;
  --premium-navy: #1A2B4A;
  --white: #ffffff;
  --shadow-sm: 0 1px 4px rgba(139, 111, 71, 0.08);
  --shadow-md: 0 4px 12px rgba(139, 111, 71, 0.10);
  --shadow-lg: 0 8px 24px rgba(139, 111, 71, 0.14);
  --shadow-soft: 0 6px 20px rgba(168, 164, 216, 0.18);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Hiragino Sans", "Noto Sans JP", -apple-system, sans-serif;
  background: var(--cream);
  color: var(--brown-deep);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* デスクトップでも中央表示 */
body {
  max-width: 480px;
  margin: 0 auto;
  background:
    linear-gradient(180deg,
      var(--main-pale) 0%,
      var(--cream-pale) 18%,
      var(--cream) 50%,
      var(--cream-pale) 100%);
  box-shadow: 0 0 40px rgba(168, 164, 216, 0.15);
  min-height: 100vh;
}

main {
  display: block;
}

h1, h2, h3 {
  font-weight: 700;
  margin: 0;
}

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

/* ─────────── ヘッダー ─────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(168, 164, 216, 0.2);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  min-height: 48px;
  gap: 8px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand__img {
  max-width: 240px;
  height: auto;
  display: block;
}

/* ─────────── LINE ボタン共通 ─────────── */
.line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--line-green);
  color: var(--white);
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.78rem;
  box-shadow: 0 3px 8px rgba(6, 199, 85, 0.32);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.line-btn:active {
  transform: scale(0.97);
}

.line-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--line-green);
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 6px;
  letter-spacing: 0.5px;
  font-family: "Nunito", sans-serif;
}

.line-btn--sm {
  padding: 6px 12px 6px 8px;
  font-size: 0.72rem;
}

.line-btn--lg {
  padding: 18px 36px;
  font-size: 1.15rem;
  box-shadow: 0 8px 22px rgba(6, 199, 85, 0.4);
  border-radius: 999px;
}

.line-btn--lg .line-btn__icon {
  padding: 3px 10px;
  font-size: 0.78rem;
}

/* ─────────── ヒーロー ─────────── */
.hero {
  position: relative;
  padding: 24px 20px 28px;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255, 182, 193, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(127, 209, 209, 0.15) 0%, transparent 55%),
    linear-gradient(180deg,
      #DCD6F0 0%,
      #C9C2E8 35%,
      #B8B1DD 70%,
      #A8A4D8 100%);
  text-align: center;
  overflow: hidden;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  min-height: 360px;
}

.hero__moon {
  position: absolute;
  top: 8px;
  left: 6px;
  width: 110px;
  height: auto;
  opacity: 0.95;
  z-index: 1;
  pointer-events: none;
  /* [2026-05-22 v3] 透過 PNG 化により mix-blend-mode 不要 (背景が透ける) */
  filter: drop-shadow(0 2px 6px rgba(168, 164, 216, 0.25));
}

.hero__title {
  position: relative;
  z-index: 3;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--brown-deep);
  text-shadow:
    0 2px 8px rgba(255, 255, 255, 0.7),
    0 0 2px rgba(255, 255, 255, 0.9);
  margin-bottom: 14px;
  margin-top: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.hero__accent {
  color: var(--pink-deep);
  font-size: 1.95rem;
  font-family: "Nunito", "Hiragino Sans", sans-serif;
  font-weight: 800;
  padding: 0 3px;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.7);
}

.hero__book {
  position: relative;
  z-index: 2;
  max-width: 400px;
  margin: 0 auto;
  filter: drop-shadow(0 10px 22px rgba(80, 60, 130, 0.32));
}

.hero__book img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__kotenchan {
  position: absolute;
  right: -10px;
  bottom: -20px;
  width: 130px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(80, 60, 130, 0.25));
}

/* ─────────── 3ピル ─────────── */
.pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 18px 12px 10px;
}

.pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--white);
  border: 2px solid var(--main);
  color: var(--main-deep);
  padding: 9px 4px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  text-align: center;
  white-space: nowrap;
}

.pill__icon {
  font-size: 0.9rem;
}

.pill--green {
  border-color: var(--line-green);
  color: var(--line-green-deep);
}

.pill--pink {
  border-color: var(--pink-deep);
  color: var(--pink-deep);
  background: var(--pink-pale);
}

/* ─────────── セクション共通 ─────────── */
section {
  padding: 22px 16px;
}

.section-title {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 16px;
  color: var(--brown-deep);
  position: relative;
  padding-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  background: var(--main);
  border-radius: 2px;
}

/* ─────────── サンプル絵本 ─────────── */
.samples {
  background:
    linear-gradient(180deg, #F5F1E2 0%, var(--cream) 100%);
  padding-bottom: 18px;
}

.samples__wrap {
  position: relative;
}

.samples__scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 14px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 80px; /* 右端にこてんちゃん分のスペース */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.samples__scroll::-webkit-scrollbar {
  height: 4px;
}
.samples__scroll::-webkit-scrollbar-thumb {
  background: var(--main);
  border-radius: 2px;
}

.samples__wrap {
  padding-bottom: 60px;
}
.samples__kotenchan {
  position: absolute;
  right: 4px;
  bottom: -14px;
  width: 78px;
  height: auto;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 3px 8px rgba(80, 60, 130, 0.18));
}

.sample-card {
  flex: 0 0 auto;
  width: 108px;
  scroll-snap-align: start;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(168, 164, 216, 0.15);
  /* button 化のためのリセット */
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.sample-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.sample-card:active {
  transform: scale(0.97);
}

.sample-card__img--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
  font-size: 0.8rem;
}

.sample-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--cream-deep);
  display: block;
}

.sample-card__label {
  padding: 6px 4px 8px;
  font-size: 0.7rem;
  text-align: center;
  color: var(--brown-deep);
  font-weight: 700;
  background: var(--white);
}

.samples__loading {
  flex: 1;
  text-align: center;
  padding: 32px 0;
  color: var(--brown);
  font-size: 0.85rem;
}

.samples__hint {
  text-align: center;
  font-size: 0.72rem;
  color: var(--main-deep);
  margin: 6px 0 0;
  font-weight: 500;
}

.samples__note {
  max-width: 640px;
  margin: 14px auto 0;
  padding: 0 18px;
  font-size: 0.72rem;
  line-height: 1.7;
  color: #8a8378;
  text-align: left;
}

/* ─────────── ステップ ─────────── */
.steps {
  background: var(--pink-pale);
}

.steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.step-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 16px 6px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--pink);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-card__num {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  background: var(--pink-deep);
  color: var(--white);
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  box-shadow: 0 2px 6px rgba(255, 154, 170, 0.45);
}

.step-card__icon-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin: 6px auto 8px;
  display: block;
  /* [2026-05-22 v3] 透過 PNG 化により mix-blend-mode 不要 */
}

.step-card__text {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brown-deep);
  line-height: 1.3;
}

.step-card__text small {
  display: block;
  font-size: 0.64rem;
  color: var(--brown);
  font-weight: 500;
  margin-top: 2px;
}

/* ─────────── 料金プラン ─────────── */
.plans {
  padding-top: 26px;
  padding-bottom: 26px;
}

.plans__grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 6px;
  align-items: stretch;
}

.plan-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 16px 8px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--cream-deep);
  display: flex;
  flex-direction: column;
  position: relative;
}

.plan-card__name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brown-deep);
  margin-bottom: 6px;
}

.plan-card__price {
  font-size: 1.05rem;
  font-weight: 800;
  font-family: "Nunito", "Hiragino Sans", sans-serif;
  color: var(--main-deep);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.plan-card__price small {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--brown);
}

.plan-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  flex: 1;
}

.plan-card__list li {
  font-size: 0.68rem;
  padding: 2px 0 2px 12px;
  position: relative;
  color: var(--brown-deep);
  line-height: 1.4;
}

.plan-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--turquoise);
  font-weight: 800;
  font-size: 0.68rem;
}

.plan-card--featured {
  border: 2.5px solid var(--pink-deep);
  background: linear-gradient(180deg, var(--pink-pale) 0%, var(--white) 50%);
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
  z-index: 2;
}

.plan-card--featured .plan-card__price {
  color: var(--pink-deep);
  font-size: 1.18rem;
}

.plan-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pink-deep);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(255, 154, 170, 0.4);
}

.plan-card--premium {
  border-color: var(--premium-navy);
}

.plan-card--premium .plan-card__price {
  color: var(--premium-navy);
}

/* ─────────── 比較表 ─────────── */
.compare {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-pale) 100%);
}

.compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare__table {
  width: 100%;
  min-width: 320px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 0.74rem;
}

.compare__table th,
.compare__table td {
  padding: 10px 4px;
  text-align: center;
  border-bottom: 1px solid var(--cream-deep);
}

.compare__table thead th {
  background: var(--cream-deep);
  color: var(--brown-deep);
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1.25;
  padding: 8px 3px;
}

.compare__table thead th.us {
  background: var(--main);
  color: var(--white);
}

.compare__table tbody th {
  text-align: left;
  padding-left: 10px;
  background: #FBF6E8;
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.3;
}

.compare__table tbody th small {
  font-size: 0.6rem;
  color: var(--brown);
  font-weight: 500;
  display: block;
}

.compare__table td.us {
  background: rgba(168, 164, 216, 0.12);
}

.compare__table .o {
  color: var(--turquoise);
  font-size: 1.2rem;
  font-weight: 800;
}

.compare__table .o sup {
  font-size: 0.55rem;
  color: var(--brown);
  font-weight: 600;
  vertical-align: super;
}

.compare__table .tri {
  color: #E2B85F;
  font-size: 1.1rem;
  font-weight: 800;
}

.compare__table .x {
  color: #C8B5A5;
  font-size: 1.05rem;
  font-weight: 700;
}

.compare__table .x small {
  display: block;
  font-size: 0.55rem;
  color: var(--brown);
  font-weight: 500;
  margin-top: 2px;
}

.compare__table tr:last-child td,
.compare__table tr:last-child th {
  border-bottom: none;
}

.compare__note {
  font-size: 0.66rem;
  color: var(--brown);
  margin: 10px 4px 0;
  line-height: 1.5;
}

/* ─────────── FAQ ─────────── */
.faq {
  background: var(--cream-pale);
}

.faq__item {
  background: var(--white);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq__item summary {
  cursor: pointer;
  padding: 14px 36px 14px 14px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--brown-deep);
  list-style: none;
  position: relative;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--main);
  font-size: 1.3rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
  content: "−";
}

.faq__item p {
  margin: 0;
  padding: 0 14px 14px;
  font-size: 0.8rem;
  color: var(--brown-deep);
  line-height: 1.7;
}

/* ─────────── 最終 CTA ─────────── */
.cta {
  text-align: center;
  background: linear-gradient(180deg, var(--cream-pale) 0%, #F5F1E2 100%);
  padding: 34px 16px 44px;
}

.cta__note {
  font-size: 0.7rem;
  color: var(--brown);
  margin: 14px 0 0;
}

/* ─────────── フッター ─────────── */
.site-footer {
  padding: 22px 16px 26px;
  text-align: center;
  background: var(--main);
  color: var(--white);
}

.site-footer p {
  margin: 4px 0;
  font-size: 0.78rem;
}

.site-footer__small {
  opacity: 0.85;
  font-size: 0.7rem !important;
}

/* ─────────── アクセシビリティ ─────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────── 絵本ビューア (モーダル) ─────────── */
.book-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.book-viewer--open {
  display: flex;
  animation: bookViewerFadeIn 0.18s ease;
}

@keyframes bookViewerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.book-viewer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(40, 30, 70, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.book-viewer__panel {
  position: relative;
  width: min(420px, 94vw);
  max-height: 92vh;
  background: var(--cream-pale);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(40, 30, 70, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--main-pale);
}

.book-viewer__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brown-deep);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-viewer__close:active {
  transform: scale(0.94);
}

.book-viewer__stage {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--main-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.book-viewer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.book-viewer__body {
  padding: 12px 16px 8px;
  flex: 1;
  min-height: 78px;
  overflow-y: auto;
}

.book-viewer__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--main-deep);
  margin: 0 0 6px;
  text-align: center;
}

.book-viewer__text {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--brown-deep);
  margin: 0;
  white-space: pre-wrap;
  text-align: center;
}

.book-viewer__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 14px;
  gap: 8px;
  background: var(--white);
  border-top: 1px solid var(--cream-deep);
}

.book-viewer__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--main);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-viewer__btn:active:not(:disabled) {
  transform: scale(0.94);
}

.book-viewer__btn:disabled {
  background: var(--cream-deep);
  color: var(--brown);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.book-viewer__counter {
  font-size: 0.85rem;
  color: var(--brown-deep);
  font-weight: 700;
  font-family: "Nunito", "Hiragino Sans", sans-serif;
}

/* ─────────── サービス説明 (2026-05-23 新規) ─────────── */
.about {
  background: linear-gradient(180deg, var(--cream-pale) 0%, var(--main-pale) 100%);
  padding: 26px 18px 28px;
}
.about .section-title { line-height: 1.45; margin-bottom: 14px; }
.about__lead {
  text-align: center;
  font-size: 0.86rem;
  color: var(--brown-deep);
  line-height: 1.7;
  margin: 0 0 18px;
  font-weight: 500;
}
.about__points { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.about__point {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--main);
}
.about__point--pink { border-left-color: var(--pink-deep); }
.about__point--turquoise { border-left-color: var(--turquoise); }
.about__point-mark {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  background: var(--main-pale); color: var(--main-deep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem;
  font-family: "Nunito", sans-serif;
}
.about__point--pink .about__point-mark { background: var(--pink-pale); color: var(--pink-deep); }
.about__point--turquoise .about__point-mark { background: rgba(127,209,209,0.18); color: var(--turquoise); }
.about__point-title { margin: 0 0 2px; font-size: 0.86rem; font-weight: 700; color: var(--brown-deep); }
.about__point-desc { margin: 0; font-size: 0.74rem; color: var(--brown); line-height: 1.55; }
.about__close {
  text-align: center;
  font-size: 0.78rem;
  color: var(--main-deep);
  font-weight: 700;
  margin: 0;
  padding-top: 4px;
}

/* ─────────── フッター法務リンク (Phase 1 / 2026-05-23) ─────────── */
.site-footer__links {
  margin-top: 10px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--white);
  line-height: 1.8;
}
.site-footer__links a {
  color: var(--white);
  text-decoration: underline;
  padding: 4px 6px;
  display: inline-block;
  white-space: nowrap;
}
.site-footer__links span { color: var(--white); margin: 0 2px; opacity: 0.7; }

/* ─────────── ヒーローCTA (Phase 2 / 2026-05-23) ─────────── */
.hero__cta {
  position: relative;
  z-index: 4;
  margin-top: 18px;
  padding: 14px 30px;
  font-size: 1.05rem;
  background: var(--line-green);
  color: var(--white);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(6, 199, 85, 0.42);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
}
.hero__cta .line-btn__icon { padding: 2px 8px; font-size: 0.7rem; }
.hero__cta-note {
  position: relative;
  z-index: 4;
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: var(--brown-deep);
  text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}

/* ─────────── 信頼バッジ (Phase 2) ─────────── */
.trust {
  background: linear-gradient(180deg, var(--cream-pale) 0%, var(--main-pale) 100%);
}
.trust__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.trust__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--main);
}
.trust__icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  background: var(--main-pale);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.trust__item b { display: block; font-size: 0.82rem; color: var(--brown-deep); margin-bottom: 2px; }
.trust__item small { font-size: 0.72rem; color: var(--brown); line-height: 1.5; }

/* LP v38: ご契約後サンプル注意書き (2026-05-23) */
.samples__disclaimer {
  text-align: center;
  font-size: 0.72rem;
  color: var(--brown);
  margin: -8px 0 12px;
  line-height: 1.5;
}

/* ====== AI容姿生成セクション (2026-06-11 本番反映 / D1検証済みCSS) ====== */
.aichar{padding:34px 18px;background:linear-gradient(180deg,var(--main-pale) 0%, var(--cream-pale) 100%);}
.aichar__badge{display:inline-block;background:var(--main);color:#fff;font-weight:700;
  font-size:.74rem;padding:5px 16px;border-radius:999px;letter-spacing:.04em;}
.aichar__title{font-size:1.3rem;font-weight:700;color:var(--brown-deep);
  line-height:1.45;margin:12px 0 6px;text-align:center;}
.aichar__title .accent{color:var(--main-deep);}
.aichar__lead{font-size:.9rem;color:#5b5470;margin:0 0 20px;text-align:center;line-height:1.75;}
.aichar__samples{display:flex;gap:10px;justify-content:center;margin:0 0 8px;}
.aichar__samples figure{margin:0;flex:1;max-width:118px;}
.aichar__samples img{width:100%;border-radius:var(--radius-md);background:#fff;
  box-shadow:var(--shadow-soft);display:block;aspect-ratio:1/1;object-fit:cover;}
.aichar__samples figcaption{font-size:.7rem;color:#8a839c;text-align:center;margin-top:6px;}
.aichar__samples-note{font-size:.74rem;color:#8a839c;text-align:center;margin:6px 0 22px;}
/* 7枚グリッド版(PC) */
.aichar__samples--grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;max-width:900px;margin:0 auto 8px;justify-content:center;}
@media(max-width:800px){.aichar__samples--grid7{grid-template-columns:repeat(4,1fr);}}
.aichar__how{background:#fff;border-radius:var(--radius-lg);padding:16px 16px 4px;
  box-shadow:var(--shadow-md);margin:0 0 20px;}
.aichar__how h3{font-size:.96rem;color:var(--brown-deep);margin:0 0 12px;text-align:center;}
.howstep{display:flex;gap:12px;align-items:flex-start;padding:0 0 16px;}
.howstep__n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--main);
  color:#fff;font-family:"Nunito",sans-serif;font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;}
.howstep__t{font-size:.85rem;color:#5b5470;line-height:1.6;}
.howstep__t b{color:var(--brown-deep);}
.aichar__feats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 20px;}
.aichar__feats .chip{background:#fff;border:1px solid var(--cream-deep);border-radius:999px;
  padding:6px 14px;font-size:.8rem;color:#6b6480;box-shadow:var(--shadow-md);}
.aichar__feats .chip b{color:var(--main-deep);}
.aichar__notes{background:var(--cream);border-radius:var(--radius-md);padding:14px 16px;
  margin:0 0 22px;font-size:.8rem;color:#7a7290;line-height:1.8;list-style:none;}
.aichar__notes li{margin:4px 0;padding-left:2px;}
.aichar__notes b{color:var(--brown-deep);}
.aichar__price{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:20px 18px;margin:0 0 14px;}
.aichar__price h3{font-size:1rem;color:var(--brown-deep);margin:0 0 4px;text-align:center;}
.aichar__price .unit{text-align:center;font-size:.88rem;color:#7a7290;margin:0 0 16px;}
.aichar__price .unit b{font-family:"Nunito",sans-serif;font-size:1.1rem;color:var(--orange,#E8803A);}
.packs{display:flex;gap:8px;margin:0 0 16px;}
.pack{flex:1;border:1px solid var(--cream-deep);border-radius:var(--radius-md);
  padding:12px 6px;text-align:center;background:var(--cream-pale);}
.pack__amt{font-family:"Nunito",sans-serif;font-weight:800;font-size:1rem;color:var(--brown-deep);}
.pack__yen{font-family:"Nunito",sans-serif;font-weight:800;font-size:1.3rem;color:var(--orange,#E8803A);line-height:1.2;}
.pack__per{font-size:.68rem;color:#8a839c;margin-top:2px;}
.freebox{background:var(--main-pale);border-radius:var(--radius-md);padding:12px 14px;
  font-size:.84rem;color:#5b5470;}
.freebox b{color:var(--main-deep);}
.freebox table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.82rem;}
.freebox td{padding:3px 0;}
.freebox td:last-child{text-align:right;font-weight:700;color:var(--main-deep);}
.aichar__fine{font-size:.74rem;color:#9a93a8;margin:10px 4px 0;line-height:1.7;}
.aichar__faq{margin:26px 0 0;}
.aichar__faq h3{font-size:1rem;color:var(--brown-deep);text-align:center;margin:0 0 14px;}
.aichar__faq details{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  margin:0 0 8px;overflow:hidden;}
.aichar__faq summary{cursor:pointer;padding:12px 36px 12px 14px;font-weight:700;
  font-size:.86rem;color:var(--main-deep);list-style:none;position:relative;}
.aichar__faq summary::-webkit-details-marker{display:none;}
.aichar__faq summary::after{content:"+";position:absolute;right:14px;top:50%;
  transform:translateY(-50%);color:var(--main);font-size:1.25rem;font-weight:700;}
.aichar__faq details[open] summary::after{content:"\2212";}
.aichar__faq .a{margin:0;padding:0 14px 14px;font-size:.8rem;color:#5b5470;line-height:1.7;}

/* ====== PC版オーバーライド（デスクトップ幅 901px 以上で適用・スマホは上のモバイル基本CSSのまま / D1検証済み 2026-06-11 本番反映） ====== */
@media (min-width:901px){
body{max-width:none;background:linear-gradient(180deg,var(--cream-pale) 0%,var(--cream) 100%);box-shadow:none;padding-bottom:0;}
main{max-width:1120px;margin:0 auto;padding:0 24px 40px;}
section{padding:46px 0;max-width:1120px;margin:0 auto;}
.section-title{font-size:1.7rem;padding-bottom:12px;}
.section-title::after{width:60px;height:4px;}

/* ヘッダーナビ */
.site-header__inner{max-width:1120px;margin:0 auto;padding:10px 24px;}
.brand__img{max-width:200px;}

/* ヒーロー: 2カラム（テキスト左 / 絵本右） */
.hero{min-height:auto;padding:54px 48px;border-radius:0 0 36px 36px;}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;text-align:left;}
.hero__title{font-size:2.6rem;line-height:1.4;grid-column:1;}
.hero__accent{font-size:3.2rem;}
.hero__book{grid-column:2;grid-row:1 / span 4;max-width:420px;}
.hero__cta{margin-top:8px;}
.hero__moon{width:150px;}
.hero__kotenchan{width:170px;right:20px;bottom:0;}

/* 3ピル: 横並び大きめ */
.pills{max-width:760px;margin:0 auto;gap:14px;padding:28px 0 4px;}
.pill{font-size:.95rem;padding:14px 8px;}

/* サービス説明: 横3カラム */
.about__points{flex-direction:row;gap:16px;}
.about__point{flex:1;flex-direction:column;align-items:flex-start;}
.about__lead{font-size:1.05rem;}
.about__point-title{font-size:1rem;}
.about__point-desc{font-size:.88rem;}
.about__close{font-size:1rem;}

/* ステップ: 大きめ3カラム */
.steps__list{max-width:840px;margin:0 auto;gap:18px;}
.step-card{padding:26px 12px 20px;}
.step-card__icon-img{width:72px;height:72px;}
.step-card__text{font-size:1rem;}

/* 料金プラン: 横並び大カード */
.plans__grid{max-width:920px;margin:0 auto;gap:20px;grid-template-columns:1fr 1.12fr 1fr;}
.plan-card{padding:26px 18px 22px;}
.plan-card__name{font-size:1.05rem;}
.plan-card__price{font-size:1.5rem;}
.plan-card--featured .plan-card__price{font-size:1.7rem;}
.plan-card__list li{font-size:.84rem;padding:4px 0 4px 16px;}

/* 単品: 中央寄せのまま広げる */
.single__inner{max-width:680px;}
.single__price{font-size:3rem;}

/* AI容姿: 2カラム（説明左 / 料金右）に再構成 */
.aichar{padding:48px 0;}
.aichar__title{font-size:1.9rem;}
.aichar__lead{font-size:1.02rem;max-width:760px;margin-left:auto;margin-right:auto;}
.aichar__samples{max-width:560px;margin:0 auto 8px;}
.aichar__samples figure{max-width:170px;}
.aichar__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch;max-width:1000px;margin:0 auto;}
.aichar__col-left{display:flex;flex-direction:column;}
.aichar__col-right{display:flex;flex-direction:column;}
.aichar__how{margin:0;}
.aichar__price{margin:0;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding:22px;}
.aichar__price h3{margin:0 0 14px;}
.price-hero{background:#FFF8EF;border:1px solid #F4E3CC;border-radius:14px;text-align:center;padding:7px 12px;display:flex;flex-direction:column;gap:1px;margin:0 0 10px;}
.price-hero .ph-sub{font-size:.85rem;color:#7a7290;}
.price-hero .ph-main{font-family:"Nunito",sans-serif;font-size:1.85rem;font-weight:800;color:var(--orange,#E8803A);line-height:1.15;}
.price-hero .ph-buy{font-size:.9rem;color:var(--brown-deep,#5a4a3a);}
.price-hero .ph-buy b{color:var(--orange,#E8803A);}
.aichar__price .freebox{flex:none;margin:0 0 10px;}
.aichar__price .freebox b{display:block;margin-bottom:8px;}
.aichar__price .freebox table td{padding:6px 0;}
.aichar__price .aichar__fine{margin:0;line-height:1.75;}
.aichar__feats{justify-content:flex-start;}
.aichar__faq{max-width:840px;margin:30px auto 0;}

/* 比較表: 中央・大きめ */
.compare__table{font-size:.92rem;max-width:900px;margin:0 auto;min-width:0;}
.compare__table thead th{font-size:.86rem;}
.compare__table tbody th{font-size:.9rem;}

/* FAQ: 2カラム */
.faq{max-width:1000px;}
.faq > .section-title{grid-column:1 / -1;}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;}
.faq .section-title{grid-column:1 / -1;}
.faq__item summary{font-size:.95rem;}
.faq__item p{font-size:.88rem;}

/* 最終CTA・信頼バッジ */
.trust__list{max-width:760px;margin:0 auto;}
.cta{padding:54px 16px 64px;}

} /* end @media (min-width:901px) PC override */

@media (max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center;}
  .hero__book{grid-column:1;grid-row:auto;margin:0 auto;}
  .about__points{flex-direction:column;}
  .aichar__grid{grid-template-columns:1fr;}
  .faq{grid-template-columns:1fr;}
}