/* 医療機関・クリニック系LP（落ち着いた白基調・明朝見出し） */
:root{
  /* ヒーロー画像（複数レイヤー用に分割） */
  --hero-img-photo: url("../img/hero.jpg");
  --hero-img-fallback: url("../img/photo-treatment.svg");
  /* やさしい医療カラー（清潔感＋親しみ） */
  --bg: #f3f7ff;
  --surface: #ffffff;
  --text: #1f2933;
  --muted: #5c656f;
  --line: #d4dae0;
  --line-light: #e8ecf0;
  --shadow: 0 1px 3px rgba(31, 41, 51, 0.08);

  /* LPのベースはオレンジ（信頼感のある濃いブラウン寄りの文字色に） */
  --primary: #f97316;        /* オレンジ */
  --primary-hover: #ea580c;
  --accent: #2563eb;         /* クリニック感のあるブルー（補助） */
  --accent-soft: #eff6ff;
  --warm: #fb7185;           /* さりげないピンク（限定/注目） */
  --warm-soft: #fff1f2;
  --ink: #2b1d14;            /* 温かい墨色 */
  --bg-warm: #fff7ed;

  --radius: 12px;
  --radius-sm: 10px;
  --container: 1080px;

  --font-sans: "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-serif: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 16% 0%, rgba(249, 115, 22, 0.18), transparent 62%),
    radial-gradient(760px 520px at 92% 6%, rgba(37, 99, 235, 0.12), transparent 58%),
    radial-gradient(760px 520px at 66% -6%, rgba(251, 113, 133, 0.10), transparent 62%),
    var(--bg);
  line-height: 1.85;
  letter-spacing: 0.02em;
}

h1, h2, h3,
.sectionTitle,
.brandName,
.reserveTitle,
.photoCaptionTitle,
.ctaBandTitle,
.infoCalloutTitle,
.offerTitle{
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.04em;
}

a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }
img{ max-width: 100%; height: auto; display: block; }
strong{ font-weight: 700; }

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

/* LPっぽい“強調”の土台 */
.big{
  font-size: 1.05em;
}
.leadStrong{
  color: var(--ink);
  font-weight: 700;
}
.em{
  color: var(--primary-hover);
  font-weight: 700;
}

.skip{
  position: absolute;
  left: -9999px;
  top: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  z-index: 1000;
}
.skip:focus{ left: 12px; }

/* Buttons（角ばり・フラット寄り） */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 11px 18px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover{
  text-decoration: none;
}
.btn:active{ opacity: 0.95; }
.btnPrimary{
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  border-color: rgba(234, 88, 12, 0.55);
  color: #fff;
}
.btnPrimary:hover{
  background: linear-gradient(180deg, var(--primary-hover), #c2410c);
  border-color: rgba(194, 65, 12, 0.65);
  color: #fff;
}
.btnGhost{
  background: var(--surface);
  border-color: var(--line);
  color: var(--primary);
}
.btnGhost:hover{
  background: var(--line-light);
  border-color: var(--line);
  color: var(--primary);
}
.btnFull{ width: 100%; }
.btnSm{ padding: 8px 14px; font-size: 0.85rem; }
.btnLg{ padding: 13px 20px; }
.btnXl{ padding: 15px 22px; font-size: 0.98rem; }

/* Header */
.siteHeader{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.86);
  border-bottom: 1px solid var(--line);
}
.siteHeader.isScrolled{
  box-shadow: var(--shadow);
}
.headerInner{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}

.menuBtn{
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(249,115,22,0.22);
  background: rgba(255,255,255,0.92);
  cursor: pointer;
}
.menuIcon{
  width: 22px;
  height: 2px;
  background: var(--ink);
  position: relative;
  border-radius: 999px;
}
.menuIcon::before,
.menuIcon::after{
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 999px;
}
.menuIcon::before{ top: -7px; }
.menuIcon::after{ top: 7px; }

/* Drawer */
.drawerOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 80;
}
.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(380px, 92vw);
  background: rgba(255,255,255,0.96);
  border-left: 1px solid rgba(249,115,22,0.18);
  box-shadow: -14px 0 40px rgba(43,29,20,0.14);
  transform: translateX(102%);
  transition: transform .18s ease;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 14px;
}
.drawerHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 10px;
  border-bottom: 1px solid rgba(249,115,22,0.14);
}
.drawerTitle{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 900;
  color: var(--ink);
  font-size: 1.15rem;
}
.drawerClose{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(249,115,22,0.18);
  background: rgba(255,255,255,0.92);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
}
.drawerNav{
  padding: 12px 6px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.drawerNav a{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(249,115,22,0.12);
  background: rgba(255,247,237,0.65);
  color: var(--ink);
  font-weight: 800;
}
.drawerNav a:hover{
  background: rgba(249,115,22,0.10);
  text-decoration: none;
}
.drawerCtas{
  display: grid;
  gap: 10px;
  padding: 10px 6px;
  border-top: 1px solid rgba(249,115,22,0.14);
}
.drawerNote{
  margin: 0;
  padding: 8px 6px 2px;
  color: var(--muted);
  font-size: .85rem;
}

body.isDrawerOpen{
  overflow: hidden;
}
body.isDrawerOpen .drawerOverlay{
  opacity: 1;
  pointer-events: auto;
}
body.isDrawerOpen .drawer{
  transform: translateX(0);
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.brand:hover{ text-decoration: none; color: var(--text); }
.brandMark{
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  max-width: none; /* img の max-width:100% が狭いヘッダーグリッドで幅を潰すのを防ぐ */
  border-radius: var(--radius-sm);
  display: block;
  object-fit: contain;
}
.brandText{ display: grid; line-height: 1.2; }
.brandName{ font-size: 1.05rem; font-weight: 600; }
.brandSub{
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.nav{
  display: flex;
  gap: 4px 8px;
  font-weight: 600;
  font-size: 0.88rem;
}
.nav a{
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.nav a:hover{
  background: var(--line-light);
  text-decoration: none;
  color: var(--primary);
}
.headerCtas{ display: flex; gap: 8px; }

/* Hero */
.hero{
  padding: 64px 0 44px;
  position: relative;
  /* ヒーロー画像（背景にドン） */
  /* 実写真を置いたら自動で差し替わる（存在しなければSVGが見える） */
  background:
    var(--hero-img-photo) right center / cover no-repeat,
    var(--hero-img-fallback) right center / cover no-repeat;
  border-bottom: 1px solid var(--line-light);
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 全面同一の薄い白で可読性UP（上下/左右で分離しない） */
  background: rgba(255,255,255,0.18);
}
.heroMobileHead{
  display: none;
}
.heroGrid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}
.heroCard{
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-width: 100%;
  min-width: 0;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(249,115,22,0.18);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 44px rgba(43,29,20,0.12);
}
.heroCopy{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
/* PC: ヒーロー内のオファー／スマホ: 非表示（ヒーロー直下ブロックに複製を表示） */
.offerCard--heroPC{
  margin-top: 6px;
}
.offerCard--heroMobile{
  display: none;
  max-width: min(572px, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
}
/* スマホのみ：オファーカード直上にピル（.pillsAboveOfferMobile） */
.pillsAboveOfferMobile{
  display: none;
}
.heroKicker{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.pill{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(249,115,22,0.10);
  border: 1px solid rgba(249,115,22,0.18);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  color: rgba(43,29,20,0.74);
  letter-spacing: 0.04em;
}
.heroTitle{
  font-size: clamp(1.8rem, 2.0vw + 1.1rem, 2.8rem);
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--ink);
}
.heroLead{
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.85;
}

.heroPhoto{
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(249,115,22,0.18);
  box-shadow: 0 18px 44px rgba(43,29,20,0.14);
  background: #fff;
}
.heroVisual{ display:none; }
.heroPhoto{ display:none; }
.heroPhoto img{
  width: 100%;
  height: min(560px, 56vw);
  object-fit: cover;
  object-position: center;
  display: block;
}

.offerCard{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px;
  box-shadow: 0 10px 30px rgba(43, 29, 20, 0.08);
  border-left: 8px solid var(--primary);
}

/* LP banners / emphasis blocks */
.lpBanner{
  margin-top: 26px;
  background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(255,255,255,.96));
  border: 1px solid rgba(249,115,22,.25);
  border-radius: 20px;
  padding: 26px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.lpBannerTitle{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.lpBannerSub{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
}
.badgeRow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.18);
  color: rgba(37,99,235,0.92);
  font-weight: 700;
  font-size: .9rem;
}
.badgeOrange{
  background: rgba(249,115,22,0.10);
  border-color: rgba(249,115,22,0.22);
  color: rgba(194,65,12,0.95);
}
.lpBannerBtns{
  display: grid;
  gap: 10px;
  min-width: 260px;
}

/* Steps */
.stepGrid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.step{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  box-shadow: var(--shadow);
}
.stepTop{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.num{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  color: #fff;
  font-weight: 800;
}
.step h3{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.35;
}
.step p{
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.8;
}

/* Techniques */
.techGrid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.tech{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.techKicker{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(249,115,22,0.12);
  border: 1px solid rgba(249,115,22,0.25);
  color: rgba(154,52,18,0.98);
  font-weight: 700;
  font-size: .9rem;
}
.tech h3{
  margin: 10px 0 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.35;
}
.tech p{
  margin: 0;
  color: var(--muted);
  font-size: 1.0rem;
  line-height: 1.8;
}

/* Trial reason box */
.reasonBox{
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(255,247,237,0.95), rgba(255,255,255,0.92));
  border: 1px solid rgba(249,115,22,0.20);
  border-radius: 18px;
  padding: 22px;
}
.reasonBox h3{
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 800;
  color: var(--ink);
  font-size: 1.25rem;
}
.reasonBox p{
  margin: 0;
  color: var(--muted);
  font-size: 1.0rem;
  line-height: 1.9;
}

/* 6 points */
.pointGrid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.point{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: var(--shadow);
}
.pointTop{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.point h3{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 800;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.35;
}
.point p{
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.8;
}

/* Icons (safety) */
.iconGrid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.iconItem{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: var(--shadow);
  text-align: center;
}
.iconCircle{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: rgba(249,115,22,.12);
  border: 1px solid rgba(249,115,22,.22);
  font-size: 1.6rem;
}
.iconTitle{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 800;
  color: var(--ink);
  font-size: 1.05rem;
}
.iconText{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
}

/* Director */
.director{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
  background: linear-gradient(135deg, rgba(255,247,237,0.95), rgba(255,255,255,0.92));
  border: 1px solid rgba(249,115,22,0.20);
  border-radius: 20px;
  padding: 22px;
}
.directorPhoto{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(249,115,22,0.18);
  background: #fff;
}
.directorPhoto picture{ display:block; }
.directorPhoto img{
  width: 100%;
  height: auto;
  display: block;
}
.directorName{
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 900;
  color: var(--ink);
  font-size: 1.1rem;
}
.directorText{
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.9;
}
.directorBody .badgeRow{ margin-top: 14px; }

/* Media box */
.mediaBox{
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.mediaGrid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mediaCard{
  background: var(--surface);
  border: 1px solid rgba(249,115,22,0.18);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.mediaMeta{
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(249,115,22,0.10);
  border: 1px solid rgba(249,115,22,0.20);
  color: rgba(154,52,18,0.95);
  font-weight: 800;
  font-size: 0.86rem;
}
.mediaTitle{
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--ink);
}
.mediaText{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1.0rem;
  line-height: 1.9;
}

@media (max-width: 980px){
  .lpBanner{ grid-template-columns: 1fr; }
  .lpBannerBtns{ min-width: 0; }
  .stepGrid{ grid-template-columns: 1fr; }
  .techGrid{ grid-template-columns: 1fr; }
  .pointGrid{ grid-template-columns: 1fr; }
  .iconGrid{ grid-template-columns: 1fr 1fr; }
  .director{ grid-template-columns: 1fr; }
  .mediaGrid{ grid-template-columns: 1fr; }
}
.offerBadge{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.30);
  color: rgba(154, 52, 18, 0.98);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.offerMain{ padding-top: 10px; }
.offerTitle{
  margin: 8px 0 8px;
  font-size: 1.05rem;
  color: var(--text);
}
.offerPrice{
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
}
.offerWas{
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.9rem;
}
.offerNow{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.offerNow .yen{
  font-size: 1.85rem;
  color: var(--primary-hover);
  font-weight: 700;
}
.offerNote{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
}
.offerCtas{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.micro{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.trustRow{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}
.trustRow li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.trustRow li::before{
  content: "";
  flex: 0 0 6px;
  width: 6px; height: 6px;
  margin-top: 0.55em;
  border-radius: 1px;
  background: var(--accent);
}

.heroVisual{
  display: none;
}
.photoCollage{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  align-items: stretch;
}
.photoMain{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--surface);
  position: relative;
}
.photoMain img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photoAside{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.photoSub{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.photoSub img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photo strips / galleries */
.photoStrip{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.photo{
  background: var(--surface);
  border: 1px solid rgba(249,115,22,0.18);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.photo img{
  width: 100%;
  /* 画像が上下で切れないように全体表示 */
  /* 表示領域を少し縦長にして、画像が小さく見えすぎないように */
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: #fff;
  display: block;
}
.photoCap{
  padding: 14px 14px 16px;
}
.photoCapTitle{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 900;
  color: var(--ink);
  font-size: 1.05rem;
}
.photoCapText{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}
.photoCaption{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  padding: 10px 12px;
}
.photoCaptionTitle{
  margin: 0;
  font-size: 0.95rem;
  color: var(--primary);
}
.photoCaptionSub{
  margin: 4px 0 0;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
  font-family: var(--font-sans);
}

/* legacy hero mock */
.photoCard{ display: none; }

.photoBottom{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 0;
}
.chip{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--line-light);
  color: var(--muted);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* Sections */
.section{
  padding: 74px 0;
  /* 透明だとbody背景が透けて「同一セクション内で2色」に見えやすいので固定 */
  background: var(--bg-warm);
  position: relative;
}
/* 交互背景は「同一セクション内で2色」に見えやすいので、明示クラスで制御 */
.section.isAlt{
  background: var(--surface);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.sectionTitle{
  font-size: clamp(1.5rem, 1.25vw + 1.1rem, 2.15rem);
  margin: 0 0 12px;
  color: var(--ink);
  position: relative;
  padding-bottom: 10px;
}
.sectionTitle::after{
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  margin-top: 12px;
}
.hl{
  border-bottom: 3px solid rgba(249, 115, 22, 0.35);
  padding-bottom: 1px;
  background: transparent;
}
.sectionLead{
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.9;
}

.cardsGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  box-shadow: var(--shadow);
}
.card h3{
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
}
.card p{
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.8;
}

.ctaBand{
  margin-top: 22px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(255, 255, 255, 0.92));
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 18px;
  padding: 24px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.ctaBandTitle{
  margin: 0;
  font-size: 1.25rem;
  color: var(--ink);
}
.ctaBandSub{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 1.0rem;
  line-height: 1.75;
  font-family: var(--font-sans);
  font-weight: 400;
}
.ctaBandBtns{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.twoCol{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: start;
}

/* About: title/lead full-width, then two columns aligned */
.aboutGrid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-areas:
    "intro intro"
    "features side";
  gap: 18px 24px;
  align-items: start;
}
.aboutIntro{ grid-area: intro; }
.aboutGrid .featureList{ grid-area: features; margin-top: 0; }
.aboutGrid .sideCard{ grid-area: side; margin-top: 0; }
.featureList{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.feature{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.feature h3{
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--primary);
}
.feature p{
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.8;
}
.sideCard{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.sideTitle{
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary);
}
.checkList{
  margin: 0;
  padding-left: 1.1em;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
  display: grid;
  gap: 8px;
}
.sideDivider{
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}
.sideSmall{
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.75;
}

.quotesGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.quote{
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow);
}
.quote blockquote{
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.85;
  font-weight: 400;
}
.quote figcaption{
  margin-top: 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.voiceGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.voiceCard{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow);
}
.voiceHead{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.voiceMeta{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.avatar{
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line-light);
}
.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tag{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--line-light);
  border: 1px solid var(--line);
  font-weight: 600;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.voiceCard h3{
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--primary);
  line-height: 1.55;
}
.voiceCard p{
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.85;
}
.voiceCard p + p{ margin-top: 10px; }
.voiceLabel{
  display: inline-block;
  margin: 0 0 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(249,115,22,0.10);
  border: 1px solid rgba(249,115,22,0.22);
  color: rgba(154,52,18,0.98);
  font-weight: 800;
  font-size: .88rem;
}

.menuGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.menuCard{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
}
.menuCard h3{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary);
}
.menuPrice{
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}
.menuPrice .price{
  font-size: 1.5rem;
  color: var(--primary);
}
.menuDesc{
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.8;
}
.miniList{
  margin: 0;
  padding-left: 1.1em;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  display: grid;
  gap: 4px;
}
.noteBox{
  margin-top: 20px;
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.noteBox p{
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}
.noteBox p + p{ margin-top: 8px; }
.muted{ color: var(--muted); font-weight: 500; }

.accessGrid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  margin-top: 8px;
  align-items: start;
}
.accessMap{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.accessMap iframe{
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}
.accessInfo{
  display: grid;
  gap: 12px;
}
.dl{
  margin: 0;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.dl > div{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-light);
}
.dl > div:last-child{ border-bottom: none; }
.dl dt{
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--muted);
}
.dl dd{
  margin: 0;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text);
  overflow-wrap: anywhere;
}
.infoCallout{
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(37, 99, 235, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.infoCalloutTitle{
  margin: 0 0 10px;
  font-size: 1rem;
  color: rgba(16, 185, 129, 0.92);
}
.infoCallout ul{
  margin: 0;
  padding-left: 1.1em;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text);
  display: grid;
  gap: 6px;
}

.faqGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.faqItem{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.faqItem summary{
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary);
}
.faqBody{
  padding-top: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.8;
  font-weight: 400;
}
.faqBody p{ margin: 0; }

.reserveBox{
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 20px;
  align-items: start;
  box-shadow: var(--shadow);
}
.reserveTitle{
  margin: 0 0 10px;
  font-size: 1.35rem;
  color: var(--primary);
}
.reserveLead{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.85;
  font-family: var(--font-sans);
  font-weight: 400;
}
.reservePoints{
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--text);
}
.reserveCtas{
  background: var(--line-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 10px;
}

/* Footer */
.footer{
  padding: 40px 0 100px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.footerInner{ display: grid; gap: 8px; }
.footerBrand{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary);
}
.footerMeta{
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 400;
  overflow-wrap: anywhere;
}
.footerSmall{
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.82rem;
}

/* Floating CTA */
.floatingCta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(31, 41, 51, 0.08);
}
.floatingInner{
  padding: 12px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.floatingText{ display: grid; gap: 2px; }
.floatingStrong{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--primary);
  letter-spacing: 0.03em;
}
.floatingSub{
  margin: 0;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.82rem;
}
.floatingBtns{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 980px){
  .headerInner{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand ctas"
      "nav nav";
  }
  .brand{ grid-area: brand; min-width: 0; }
  .brandText{ min-width: 0; }
  .nav{
    grid-area: nav;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .headerCtas{ grid-area: ctas; }
  /* mobile: switch to hamburger (keep header minimal) */
  .nav{ display: none; }
  .headerCtas{ display: none; }
  .brandMark{
    width: 32px;
    height: 32px;
    display: block;
    max-width: none;
  }
  .brandName{ font-size: 1.0rem; line-height: 1.2; }
  .brandSub{ font-size: 0.75rem; }

  .menuBtn{ display: inline-flex; }
  .headerInner{
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand menu";
  }
  .menuBtn{ grid-area: menu; }
  .hero{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 28px;
    background-position: 78% center;
    background-color: var(--bg-warm);
  }
  .hero::before{
    display: block;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.65) min(34vw, 190px),
      rgba(255, 255, 255, 0.22) 50%,
      rgba(255, 255, 255, 0.06) 72%,
      rgba(255, 255, 255, 0.02) 100%
    );
  }
  .heroMobileHead{
    display: block;
    width: 100%;
    min-height: clamp(200px, 44vw, 300px);
    pointer-events: none;
  }
  .heroKicker--inCard{
    display: none;
  }
  .pillsAboveOfferMobile{
    display: block;
    position: relative;
    z-index: 1;
    margin-bottom: 4px;
  }
  .pillsAboveOfferMobile .heroKicker{
    margin: 0 0 12px;
    justify-content: center;
    max-width: min(520px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
  .heroGrid{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 0;
    position: relative;
    z-index: 1;
  }
  .heroCard{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .heroCopy{
    width: min(300px, max(232px, calc(100% - 38vw)));
    max-width: 100%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(249,115,22,0.18);
    border-radius: 18px;
    padding: 16px 14px;
    box-shadow: 0 14px 36px rgba(43, 29, 20, 0.12);
  }
  .heroCopy .trustRow{
    display: none;
  }
  .heroTitle{
    font-size: clamp(1.35rem, 2.5vw + 1rem, 1.85rem);
    margin-bottom: 12px;
  }
  .heroLead{
    font-size: 0.98rem;
    line-height: 1.82;
    margin-bottom: 0;
  }
  .pill{
    font-size: 0.74rem;
    padding: 5px 9px;
  }
  .offerCard--heroPC{
    display: none !important;
  }
  .offerCard--heroMobile{
    display: block;
    max-width: min(520px, 100%);
    margin-bottom: 22px;
  }
  .photoStrip{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .offerCard{ padding: 18px 16px; }
  .offerCtas{ grid-template-columns: 1fr; }
  .cardsGrid{ grid-template-columns: 1fr; }
  .twoCol{ grid-template-columns: 1fr; }
  .aboutGrid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "side"
      "features";
  }
  .quotesGrid{ grid-template-columns: 1fr; }
  .voiceGrid{ grid-template-columns: 1fr; }
  .menuGrid{ grid-template-columns: 1fr; }
  .accessGrid{ grid-template-columns: 1fr; }
  .faqGrid{ grid-template-columns: 1fr; }
  .reserveBox{ grid-template-columns: 1fr; }
  .ctaBand{
    grid-template-columns: 1fr;
    padding: 20px 18px;
  }
  .ctaBandBtns{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    justify-content: flex-start;
  }
  .ctaBandBtns .btn{
    width: 100%;
    white-space: normal;
    text-align: center;
  }
  .lpBannerBtns .btn{
    width: 100%;
    white-space: normal;
    text-align: center;
  }
  .section{ padding: 52px 0; }
  .floatingInner{ grid-template-columns: 1fr; }
  .floatingBtns{ justify-content: stretch; }
  .floatingBtns .btn{
    flex: 1;
    white-space: normal;
    text-align: center;
  }
  .btn{ white-space: normal; }
}

@media (max-width: 520px){
  .container{
    width: min(var(--container), calc(100% - 28px));
  }
  .iconGrid{ grid-template-columns: 1fr; }
  .dl > div{
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
  .dl dt{ padding-bottom: 2px; }
  .accessMap iframe{ height: 240px; }
}

@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}