@charset "UTF-8";
/* ==========================================================================
   資料制作×プロ仕上げ LP
   Figma: ai-slide-service-lp_pc_design_v4（1920px）/ sp_design_v4（390px）
   PC は 1200px のコンテナ、SP は 767px 以下
   ========================================================================== */

:root {
  --blue: #1F7BDB;
  --navy: #0F3D86;
  --light: #EAF4FD;
  --orange: #DC4F06;
  --orange-dark: #B94004;
  --text: #1C2B45;
  --gray: #4B5A72;
  --gray-2: #5F6E86;
  --gray-3: #7C8AA0;
  --line: #D5E0EC;
  --panel: #6E8FBF;
  --tag: #D6E8FA;
  --footer-text: #DCE9F8;
  --shadow-card: 0 6px 16px rgba(15, 61, 134, .08);
  --header-h: 88px;
  --font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Jost", var(--font-ja);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; } /* ページ内リンクのスクロールは main.js で動かす */
body { margin: 0; font-family: var(--font-ja); font-size: 16px; line-height: 1.7; color: var(--text); background: #fff; overflow-wrap: anywhere; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(31, 123, 219, .5); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- utility ---------- */
.u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.u-blue { color: var(--blue); }
.u-sp { display: none; }
.num { font-family: var(--font-en); font-weight: 600; line-height: 1.1; }
section[id], [id="download"] { scroll-margin-top: var(--header-h); }

.container { width: min(1200px, 100% - 80px); margin-inline: auto; }
.container--narrow { width: min(1000px, 100% - 80px); }

/* ---------- button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: 6px; font-weight: 700; line-height: 1.5; text-decoration: none;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.btn__icon { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.btn:hover .btn__icon { transform: translateX(4px); }
.btn--orange { background: var(--orange); color: #fff; }
.btn--orange:hover { background: var(--orange-dark); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: #1868BD; }
.btn--outline { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.btn--outline:hover { background: var(--light); }
.btn--l { height: 72px; padding: 0 36px; font-size: 19px; }
.btn--m { height: 72px; padding: 0 40px; font-size: 17px; }
.btn--s { height: 48px; padding: 0 34px; font-size: 15px; }

/* ---------- section heading ---------- */
.sec-head { text-align: center; margin-bottom: 36px; }
.sec-head__title { font-size: 44px; font-weight: 900; line-height: 1.5; color: var(--text); }
.sec-head::after, .dots {
  content: ""; display: block; width: 37px; height: 7px; margin: 12px auto 0;
  background: radial-gradient(circle at 3.5px 3.5px, var(--blue) 3.5px, transparent 3.6px) 0 0 / 15px 7px repeat-x;
}
.dots--white { background-image: radial-gradient(circle at 3.5px 3.5px, #fff 3.5px, transparent 3.6px); }
.dots--sp { display: none; }
.sec-head--white .sec-head__title { color: #fff; }
.sec-head--white::after { background-image: radial-gradient(circle at 3.5px 3.5px, #fff 3.5px, transparent 3.6px); }
.cta-label { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--blue); text-align: center; }

/* ==========================================================================
   header
   ========================================================================== */
.header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: #fff; transition: box-shadow .2s; }
.header.is-scrolled { box-shadow: 0 2px 12px rgba(15, 61, 134, .08); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 clamp(24px, 6.25vw, 120px); }
.header__logo img { width: 170px; }
.header__nav { display: flex; align-items: center; gap: 40px; }
.header__list { display: flex; gap: 36px; }
.header__list a { font-size: 15px; font-weight: 500; line-height: 1.5; text-decoration: none; transition: color .2s; }
.header__list a:hover { color: var(--blue); }
.header__cta { width: 188px; padding: 0; }
.header__menu { display: none; }

@media (max-width: 1279px) {
  .header__nav { gap: 24px; }
  .header__list { gap: 22px; }
  .header__list a { font-size: 14px; }
}

/* 1199px 以下はメニューをハンバーガーにする（SP と同じ） */
@media (max-width: 1199px) {
  .header__menu { position: relative; display: block; width: 40px; height: 40px; margin-right: -8px; border: 0; background: none; }
  .header__menu span { position: absolute; left: 9px; width: 22px; height: 2px; border-radius: 1px; background: var(--text); transition: transform .25s, opacity .2s; }
  .header__menu span:nth-child(1) { top: 13px; }
  .header__menu span:nth-child(2) { top: 19px; }
  .header__menu span:nth-child(3) { top: 25px; }
  .header.is-open .header__menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header.is-open .header__menu span:nth-child(2) { opacity: 0; }
  .header.is-open .header__menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .header__nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 24px; padding: 8px 20px 32px; overflow-y: auto;
    background: #fff; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .header.is-open .header__nav { visibility: visible; opacity: 1; transform: none; }
  .header__list { display: flex !important; flex-direction: column; gap: 0; }
  .header__list a { display: block; padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 700; }
  .header__cta { width: 100%; height: 56px; font-size: 16px; }
  body.is-menu-open { overflow: hidden; }
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; min-height: 800px;
  background: url("../img/pattern-hero.png") center top / 1920px auto no-repeat, linear-gradient(180deg, var(--light), #fff);
}
.hero__inner { position: relative; z-index: 1; width: min(1440px, 100% - 80px); margin-inline: auto; padding: 157px 0 100px; }
.hero__text, .hero__ctas { max-width: 640px; }
.hero__eyebrow { display: inline-block; padding: 6px 16px; border-radius: 4px; background: var(--navy); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.5; }
.hero__title { margin-top: 24px; font-size: clamp(44px, 3.23vw, 62px); font-weight: 900; line-height: 1.45; }
.hero__lead { margin-top: 20px; font-size: clamp(17px, 1vw, 19px); font-weight: 700; line-height: 1.8; color: var(--gray); }
.hero__ctas { display: flex; gap: 16px; margin-top: 36px; }
.hero__cta { display: flex; flex-direction: column; gap: 6px; }
.hero__cta .btn--orange { width: 350px; box-shadow: 0 6px 14px rgba(15, 61, 134, .18); }
.hero__cta--sub .btn { width: 230px; }

.hero__samples {
  --w: clamp(320px, 22.92vw, 440px);
  position: absolute; top: 72px; left: calc(50% - 16px);
  transform: rotate(-8deg); transform-origin: top left;
  pointer-events: none;
}
.hero__grid { display: flex; align-items: flex-start; gap: calc(var(--w) * .05); }
.hero__col { flex: none; display: flex; flex-direction: column; gap: calc(var(--w) * .0477); }
.hero__col img { width: var(--w); max-width: none; box-shadow: 0 18px 40px rgba(15, 61, 134, .18); }
.hero__col--offset { margin-top: calc(var(--w) * -.3045); }

@media (max-width: 1279px) {
  .hero__samples { left: calc(50% + 40px); --w: 300px; }
  .hero__lead br.u-pc { display: none; }
  .hero__text, .hero__ctas { max-width: 470px; }
  .hero__ctas { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   facts
   ========================================================================== */
.facts { padding: 36px 0; background: #fff; }
.facts__list { display: flex; justify-content: center; width: min(1200px, 100% - 80px); margin-inline: auto; }
.facts__item { flex: 1; text-align: center; }
.facts__item + .facts__item { border-left: 1px solid var(--line); }
.facts__label { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.facts__num { display: flex; align-items: baseline; justify-content: center; gap: 2px; color: var(--orange); font-size: 22px; font-weight: 700; line-height: 1.4; }
.facts__num .num { font-size: 54px; }
.facts__num small { font-size: 18px; font-weight: 700; }
.facts__note { font-size: 13px; line-height: 1.5; color: var(--gray); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { padding: 36px 20px 40px; background: var(--navy); text-align: center; }
.cta-band__text { font-size: 24px; font-weight: 900; line-height: 1.5; color: #fff; }
.cta-band__btns { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
.cta-band__btns .btn--orange { width: 380px; }
.cta-band__btns .btn--blue { width: 280px; }

/* ==========================================================================
   problem
   ========================================================================== */
.problem { padding: 100px 0 90px; background: linear-gradient(180deg, #fff, var(--light)); text-align: center; }
.problem__panel { max-width: 1000px; margin-inline: auto; padding: 48px 60px 52px; border-radius: 12px; background: var(--panel); color: #fff; }
.problem__sub { font-size: 22px; font-weight: 700; line-height: 1.5; }
.problem__title { font-size: 44px; font-weight: 900; line-height: 1.5; }
.problem__list { display: flex; justify-content: center; gap: 16px; margin-top: 36px; }
.problem__item {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: 280px; height: 280px; padding: 41px 0 20px; border-radius: 50%; background: #fff;
}
.problem__item p { order: -1; font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--navy); }
.problem__img img { width: 155px; }
.problem__arrow { width: 96px; height: 40px; margin: 0 auto; background: var(--panel); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.problem__lead { margin-top: 24px; font-size: 26px; font-weight: 700; line-height: 1.5; }
.problem__conclusion { margin-top: 6px; font-size: 50px; font-weight: 900; line-height: 1.4; color: var(--navy); }
.problem__conclusion span { padding-bottom: 6px; background: linear-gradient(var(--orange), var(--orange)) left bottom / 100% 6px no-repeat; }

/* ==========================================================================
   before / after
   ========================================================================== */
.ba { padding: 100px 0; background: #fff; }
.ba__body { display: flex; gap: 48px; align-items: flex-start; }
.ba__visual { flex: 0 1 760px; min-width: 0; }
.ba__notes { flex: 0 0 392px; display: flex; flex-direction: column; gap: 14px; }

.ba-slider {
  --pos: 29%;
  position: relative; aspect-ratio: 760 / 428; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(15, 61, 134, .10);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ba-slider img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-slider__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-slider__badge {
  position: absolute; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.ba-slider__badge b { font-family: var(--font-en); font-weight: 600; letter-spacing: .08em; }
.ba-slider__badge--before { left: 0; background: var(--text); }
.ba-slider__badge--after { left: min(calc(var(--pos) + 1px), calc(100% - 199px)); background: var(--blue); }
.ba-slider__line { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 2px; margin-left: -1px; background: var(--blue); }
.ba-slider__handle { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; color: var(--blue); transform: translate(-50%, -50%); filter: drop-shadow(0 2px 6px rgba(15, 61, 134, .25)); }
.ba-slider:has(.ba-slider__range:focus-visible) .ba-slider__handle { outline: 3px solid rgba(31, 123, 219, .5); outline-offset: 3px; border-radius: 50%; }
.ba-slider__range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 番号の印（①〜③）。右のブロックにマウスを乗せたときだけ出す */
.ba-slider__pin {
  position: absolute; z-index: 4; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: #fff;
  font-family: var(--font-en); font-size: 15px; font-weight: 600; line-height: 1;
  transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .6, 1);
  pointer-events: none;
}
.ba-slider__pin::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: rgba(220, 79, 6, .22); }
.ba-slider[data-active="1"] [data-pin="1"],
.ba-slider[data-active="2"] [data-pin="2"],
.ba-slider[data-active="3"] [data-pin="3"] { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.ba__caption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--gray); }
.ba-stack { display: none; }

.ba-note {
  position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 18px 64px 18px 22px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; text-align: left;
  box-shadow: 0 4px 12px rgba(15, 61, 135, .08); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.ba-note__head { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.ba-note__num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--font-en); font-size: 14px; font-weight: 600; line-height: 1; }
.ba-note__body { font-size: 16px; line-height: 1.75; color: var(--gray); }
.ba-note__chev { position: absolute; top: 50%; right: 22px; width: 26px; height: 26px; margin-top: -13px; color: var(--blue); --chev-bg: #fff; --chev-fg: var(--blue); transition: transform .2s; }
.ba-note:hover, .ba-note:focus-visible, .ba-note.is-active { border-color: var(--blue); background: #F7FBFF; box-shadow: 0 6px 18px rgba(31, 123, 219, .18); }
.ba-note:hover .ba-note__chev, .ba-note:focus-visible .ba-note__chev, .ba-note.is-active .ba-note__chev { --chev-bg: var(--blue); --chev-fg: #fff; transform: translateX(3px); }

@media (max-width: 1199px) {
  .ba__body { gap: 32px; }
  .ba__notes { flex-basis: 340px; }
  .ba-note__body br { display: none; }
}

/* ==========================================================================
   plan intro（ブラッシュアップ / テンプレート）
   ========================================================================== */
.intro { padding: 100px 0; }
.intro__head { text-align: center; }
.intro__who { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.intro__plan {
  display: inline-block; margin-top: 10px; padding: 12px 40px; border-radius: 6px;
  background: var(--navy); color: #fff; font-size: 38px; font-weight: 900; line-height: 1.4;
  box-shadow: 0 6px 16px rgba(15, 61, 135, .20);
}
.intro__head .sec-head__title { margin-top: 12px; }
.intro__head .dots { margin-top: 12px; }
.intro__lead { margin-top: 12px; font-size: 18px; font-weight: 700; line-height: 1.7; color: var(--gray); }

.intro--brushup { background: var(--light); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.steps__item { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px 24px; border-radius: 8px; background: #fff; box-shadow: var(--shadow-card); text-align: center; }
.steps__img { display: grid; place-items: center; width: 160px; height: 160px; border-radius: 50%; background: var(--light); }
.steps__img img { width: 142px; }
.steps__item h3 { margin-top: 20px; font-size: 26px; font-weight: 900; line-height: 1.4; color: var(--navy); }
.steps__item p { margin-top: 8px; font-size: 15px; line-height: 1.75; }

.intro--template {
  position: relative; color: #fff;
  background: url("../img/pattern-template.png") center top / 1920px auto no-repeat, linear-gradient(180deg, var(--navy), var(--blue));
}
.intro__top { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.intro__head--left { flex: 0 1 670px; text-align: left; }
.intro--template .intro__who { color: #fff; }
.intro--template .intro__plan { background: #fff; color: var(--blue); }
.intro--template .sec-head__title { margin-top: 18px; font-size: 42px; line-height: 1.48; color: #fff; }
.intro--template .intro__lead { margin-top: 18px; font-size: 17px; font-weight: 500; line-height: 1.85; color: #fff; }
.intro__img { flex: 0 1 520px; padding: 8px 12px; }
.tflow { display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr; margin-top: 44px; }
.tflow li { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 150px; padding: 0 28px; border-radius: 8px; background: #fff; text-align: center; }
.tflow li:nth-child(2) { grid-column: 3; }
.tflow li:nth-child(3) { grid-column: 5; }
.tflow li + li::before { content: ""; position: absolute; top: 50%; left: -44px; width: 28px; height: 36px; margin-top: -18px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tflow h3 { font-size: 23px; font-weight: 900; line-height: 1.5; color: var(--navy); }
.tflow p { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--gray); }

/* ==========================================================================
   plan
   ========================================================================== */
.plan { padding: 100px 0; background: var(--light); }
.plan .sec-head { margin-bottom: 56px; }
.plan__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.plan-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: var(--shadow-card); }
.plan-card__head { padding: 32px 40px 28px; background: var(--navy); color: #fff; }
.plan-card--template .plan-card__head { background: var(--blue); }
.plan-card__who { font-size: 15px; font-weight: 500; line-height: 1.6; }
.plan-card__name { font-size: 30px; font-weight: 700; line-height: 1.5; }
.plan-card__price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.4; }
.plan-card__price .num { font-size: 60px; }
.plan-card__price small { font-size: 14px; font-weight: 400; }
.plan-card__list { display: flex; flex-direction: column; gap: 10px; padding: 28px 40px 0; }
.plan-card__list li {
  padding-left: 28px; font-size: 16px; line-height: 1.6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%231F7BDB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 4px / 18px 18px no-repeat;
}
.plan-card__foot { margin: auto 40px 32px; margin-top: auto; padding: 16px 20px; border-radius: 4px; background: var(--light); font-size: 15px; font-weight: 700; line-height: 1.6; }
.plan-card__list { margin-bottom: 40px; }
.plan__express { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 24px; padding: 24px 44px; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgba(15, 61, 134, .06); }
.plan__express-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; font-size: 20px; font-weight: 700; line-height: 1.5; }
.plan__express-price { display: inline-flex; align-items: baseline; gap: 2px; font-size: 15px; }
.plan__express-price .num { font-size: 32px; line-height: 1.2; color: var(--orange); }
.plan__express-text { font-size: 15px; line-height: 1.6; color: var(--gray); }
.plan__notes { margin-top: 20px; font-size: 14px; line-height: 1.8; color: var(--gray); }
.plan__cta { margin-top: 48px; text-align: center; }
.plan__cta .btn { width: 400px; }

/* ==========================================================================
   price
   ========================================================================== */
.price { padding: 100px 0; background: #fff; }
.price .sec-head { margin-bottom: 32px; }
.price__table { width: 100%; border-collapse: collapse; }
.price__table thead th { padding: 12px 16px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: left; }
.price__table thead th:first-child { width: 440px; }
.price__table thead th:last-child { width: 276px; text-align: right; }
.price__table tbody tr { border-bottom: 1px solid var(--line); }
.price__table tbody th, .price__table td { padding: 22px 16px; text-align: left; vertical-align: middle; }
.price__table tbody th { font-size: 18px; font-weight: 700; line-height: 1.5; }
.price__calc { font-size: 15px; line-height: 1.5; color: var(--gray); }
.price__total { color: var(--orange); font-size: 15px; font-weight: 700; text-align: right !important; white-space: nowrap; }
.price__total .num { font-size: 38px; line-height: 1.2; margin-right: 2px; }
.price__note { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--gray); }

.option { margin-top: 40px; padding: 28px 32px; border-radius: 8px; background: var(--light); }
.option__head { display: flex; align-items: baseline; gap: 16px; }
.option__title { font-size: 24px; font-weight: 900; line-height: 1.5; }
.option__note { font-size: 14px; font-weight: 700; color: var(--gray); }
.option__list { display: grid; grid-template-columns: 1fr 1fr 1.28fr 1fr 1fr; gap: 12px; margin-top: 18px; }
.option__list li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 8px; background: #fff; }
.option__name { font-size: 15px; font-weight: 700; line-height: 1.6; }
.option__price { color: var(--orange); font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.option__price .num { font-size: 30px; line-height: 1.2; margin-right: 1px; }
/* テンプレートプランだけのオプション。ご利用の流れの「着手金50%」と同じ見た目にして、テンプレートの印と分かるように */
.option__cond { align-self: flex-start; margin-top: 2px; padding: 2px 8px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; }

/* ==========================================================================
   flow
   ========================================================================== */
.flow { padding: 100px 0; background: var(--light); }
.flow .sec-head { margin-bottom: 32px; }
.flow .sec-head__title { font-size: 40px; }
.flow-card { --main: var(--navy); --cols: repeat(4, 103fr) repeat(5, 144fr); display: flex; flex-direction: column; gap: 24px; padding: 32px 36px 36px; border-radius: 8px; background: #fff; box-shadow: var(--shadow-card); }
.flow-card + .flow-card { margin-top: 24px; }
.flow-card--template { --main: var(--blue); --cols: repeat(11, 1fr); }
.flow-card__head { display: flex; align-items: center; gap: 16px; }
.flow-card__name { padding: 6px 16px; border-radius: 4px; background: var(--main); color: #fff; font-size: 19px; font-weight: 700; line-height: 1.5; }
.flow-card__days { display: flex; align-items: baseline; gap: 2px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.flow-card__days .num { font-size: 38px; }
.flow-card--template .flow-card__days { color: var(--blue); }
.flow-card__pay { margin-left: auto; font-size: 15px; font-weight: 700; line-height: 1.5; }

.flow-card__phases { display: grid; grid-template-columns: var(--cols); }
.ph {
  grid-column: span var(--span); display: grid; place-items: center; height: 36px; margin-right: -8px; padding: 0 16px;
  font-size: 14px; font-weight: 700; line-height: 1.5;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.ph:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.ph:last-child { margin-right: 0; }
.ph--contract { background: #D9E2EC; color: var(--text); }
.ph--work { background: var(--main); color: #fff; }
.ph--after { background: #FFE3D3; color: var(--text); }

.flow-steps { display: grid; grid-template-columns: var(--cols); }
.flow-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.flow-steps li::before { content: ""; position: absolute; top: 42px; left: 0; right: 0; height: 2px; background: #B7C4D1; }
.flow-steps li:first-child::before { left: 50%; }
.flow-steps li:last-child::before { right: 50%; }
.flow-steps__meta { min-height: 19.5px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--gray-2); }
.is-start .flow-steps__meta { font-family: var(--font-en); font-weight: 600; color: var(--orange); }
.flow-steps__num { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--main); color: #fff; font-family: var(--font-en); font-size: 14px; font-weight: 600; line-height: 1; }
.flow-card--brushup .flow-steps__num { background: var(--text); }
.is-pre .flow-steps__num { background: var(--gray-3) !important; }
.is-start .flow-steps__num { background: var(--orange) !important; }
.flow-steps__name { font-size: 14px; font-weight: 700; line-height: 1.5; }
.flow-card--brushup li:nth-child(n+5) .flow-steps__name { font-size: 15px; }
.flow-steps__tag { padding: 2px 8px; background: var(--light); font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.flow-steps__tag--strong { background: var(--main); color: #fff; }
.flow-card--brushup .flow-steps__tag--strong { background: var(--text); }

/* ==========================================================================
   works
   ========================================================================== */
.works { padding: 100px 0; background: #fff; }
.works .sec-head { margin-bottom: 48px; }
.works__filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.works__filter button { padding: 8px 18px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; transition: background-color .2s, border-color .2s, color .2s; }
.works__filter button:hover { border-color: var(--blue); color: var(--blue); }
.works__filter button.is-active { border-color: var(--blue); background: var(--blue); color: #fff; }
.works__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 24px; margin-top: 32px; }
.work { padding: 14px 14px 20px; border-radius: 6px; background: #fff; box-shadow: var(--shadow-card); }
.work img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; outline: 1px solid var(--line); outline-offset: -1px; }
.work__tag { display: inline-block; margin-top: 16px; padding: 2px 10px; border-radius: 3px; background: var(--tag); font-size: 13px; font-weight: 700; line-height: 1.6; }
.work__title { margin-top: 8px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.work__plan { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--gray); }
.work__plan::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.works__empty { margin-top: 32px; padding: 40px; border-radius: 8px; background: var(--light); text-align: center; color: var(--gray); }

/* カード全体を押せるようにし、画像の右下に虫めがねを出す */
.work { cursor: zoom-in; transition: box-shadow .2s, transform .2s; }
.work:hover { box-shadow: 0 12px 28px rgba(15, 61, 134, .16); transform: translateY(-3px); }
.work__zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.work__zoom:focus-visible { outline-offset: 3px; }
.work__zoom-icon {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: var(--blue); box-shadow: 0 2px 8px rgba(15, 61, 134, .22); transition: background-color .2s, color .2s, transform .2s;
}
.work__zoom-icon svg { width: 18px; height: 18px; }
.work:hover .work__zoom-icon, .work__zoom:focus-visible .work__zoom-icon { background: var(--blue); color: #fff; transform: scale(1.08); }

/* ==========================================================================
   仕上がり例のポップアップ
   ========================================================================== */
.lightbox {
  --lb-w: min(1400px, 100%, calc((100vh - 200px) * 16 / 9));
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: #fff; overflow: hidden;
}
@supports (height: 100dvh) { .lightbox { --lb-w: min(1400px, 100%, calc((100dvh - 200px) * 16 / 9)); } }
.lightbox::backdrop { background: rgba(9, 24, 54, .94); }
.lightbox[open] { animation: lb-in .2s ease-out; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 72px 128px 40px; }
.lightbox__figure { width: var(--lb-w); flex: none; }
.lightbox__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.lightbox__img.is-loading { opacity: .4; }
.lightbox__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.lightbox__tag { padding: 2px 10px; border-radius: 3px; background: var(--tag); color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.6; }
.lightbox__title { font-size: 18px; font-weight: 700; line-height: 1.5; }
.lightbox__plan { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--footer-text); }
.lightbox__plan::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.lightbox__count { margin-left: auto; font-size: 15px; font-weight: 500; letter-spacing: .08em; color: var(--footer-text); }
.lightbox__hint { display: none; }
.lightbox__close, .lightbox__nav {
  position: fixed; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .2s, border-color .2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }
.lightbox__close { top: 20px; right: 20px; width: 48px; height: 48px; }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__nav { top: 50%; width: 56px; height: 56px; margin-top: -28px; }
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__nav--prev { left: 36px; }
.lightbox__nav--next { right: 36px; }
html.is-lightbox-open { overflow: hidden; }

@media (max-width: 1023px) {
  .lightbox__stage { padding: 72px 88px 40px; }
  .lightbox__nav { width: 48px; height: 48px; margin-top: -24px; }
  .lightbox__nav--prev { left: 20px; }
  .lightbox__nav--next { right: 20px; }
}

/* ==========================================================================
   company
   ========================================================================== */
.company { padding: 100px 0; background: var(--light); }
.company .sec-head { margin-bottom: 32px; }
.company__body { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.company__text { flex: 0 1 540px; font-size: 17px; line-height: 1.9; }
.company__works { flex: 0 1 588px; }
.company__works-title { font-size: 16px; font-weight: 700; line-height: 1.5; }
/* 制作したサイトの MV。スライドと同じく角丸なし、細い線と薄い影 */
.company__sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.company__sites img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #fff; outline: 1px solid var(--line); outline-offset: -1px; box-shadow: 0 4px 12px rgba(15, 61, 134, .08); }

/* ==========================================================================
   faq
   ========================================================================== */
.faq { padding: 100px 0; background: #fff; }
.faq__list { display: flex; flex-direction: column; gap: 14px; }
.faq__item { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.faq__item dt, .faq__item dd { position: relative; display: flex; align-items: center; gap: 14px; }
.faq__item dt { padding: 14px 24px 14px 20px; background: var(--light); font-size: 19px; font-weight: 700; line-height: 1.5; }
.faq__item dd { padding: 14px 24px 16px 20px; background: #fff; font-size: 16px; line-height: 1.75; }
.faq__item dt::before, .faq__item dd::before {
  content: "Q"; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); color: #fff; font-family: var(--font-en); font-size: 18px; font-weight: 600; line-height: 1;
}
.faq__item dd::before { content: "A"; background: var(--orange); }

/* ==========================================================================
   download
   ========================================================================== */
.download {
  padding: 100px 0; color: #fff;
  background: url("../img/pattern-download.png") center top / 1920px auto no-repeat, linear-gradient(180deg, var(--blue), var(--navy));
}
.download__body { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.download__visual { flex: 0 1 600px; }
.cover {
  display: flex; flex-direction: column; aspect-ratio: 600 / 337; padding: 6% 7% 4.3%;
  background: #fff; color: var(--text); box-shadow: 0 12px 30px rgba(8, 36, 84, .25);
}
.cover__label { font-family: var(--font-en); font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: .12em; color: var(--gray-2); }
.cover__title { margin-top: 10px; font-size: clamp(26px, 1.95vw, 37px); font-weight: 700; line-height: 1.5; }
.cover__sub { font-size: 21px; font-weight: 500; line-height: 1.7; color: var(--gray); }
.cover__brand { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--text); font-family: var(--font-en); font-size: 26px; font-weight: 600; line-height: 1.3; }
.download__note { margin-top: 20px; font-size: 18px; font-weight: 700; line-height: 1.7; }

.download__form-col { flex: 0 0 520px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* 相談の入り口は青いボタン。資料ダウンロード（オレンジ 72px）より一回り小さくして、主役を保つ */
.download__contact { width: 280px; height: 56px; padding: 0 20px; gap: 10px; font-size: 15px; }
.form { align-self: stretch; display: flex; flex-direction: column; gap: 18px; padding: 40px 44px 36px; border-radius: 8px; background: #fff; color: var(--text); box-shadow: 0 8px 24px rgba(8, 36, 84, .2); }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field label { font-size: 14px; font-weight: 700; line-height: 1.5; }
.form__field input, .form__select select {
  width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--gray-3); border-radius: 4px; background: #fff; font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.form__field input:focus, .form__select select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 123, 219, .2); }
.form__select { position: relative; }
.form__select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.form__select select:invalid { color: var(--gray-2); }
.form__select svg { position: absolute; top: 50%; right: 14px; width: 16px; height: 16px; margin-top: -8px; color: var(--text); pointer-events: none; }
.form__agree { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; line-height: 1.5; cursor: pointer; }
.form__agree input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.form__agree a { color: var(--blue); }
.form__submit-wrap { display: flex; flex-direction: column; gap: 10px; }
.form__submit { width: 100%; }
.form__note { font-size: 13px; line-height: 1.6; color: var(--gray); text-align: center; }
.form__message { padding: 12px 14px; border-radius: 4px; background: var(--light); font-size: 14px; line-height: 1.6; }

/* ==========================================================================
   footer
   ========================================================================== */
.footer { padding: 64px 0 32px; background: var(--navy); color: #fff; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; }
.footer__company { flex: 0 1 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.footer__logo { width: 188px; }
.footer__table { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.7; }
.footer__table div { display: flex; }
.footer__table dt { flex: none; width: 104px; font-weight: 700; color: var(--footer-text); }
.footer__site { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 290px; height: 52px; border-radius: 6px; background: #fff; color: var(--navy); font-size: 16px; font-weight: 700; text-decoration: none; transition: background-color .2s; }
.footer__site:hover { background: var(--light); }
.footer__site svg { width: 16px; height: 16px; }
.footer__links { display: flex; gap: 64px; }
.footer__links-title { font-size: 15px; font-weight: 900; line-height: 1.7; }
.footer__links ul { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.footer__links a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.7; color: var(--footer-text); text-decoration: none; }
.footer__links a:hover { color: #fff; text-decoration: underline; }
.footer__links svg { width: 12px; height: 12px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 20px; border-top: 1px solid #3A63A3; font-size: 13px; line-height: 1.7; color: var(--footer-text); }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { text-decoration: underline; }
.footer__bottom p { font-family: var(--font-en); }

.fixed-cta { display: none; }

/* ==========================================================================
   サンクスページ（thanks.html）
   ========================================================================== */
.thanks {
  padding: 100px 0 120px;
  background: url("../img/pattern-hero.png") center top / 1920px auto no-repeat, linear-gradient(180deg, var(--light), #fff);
}
.thanks__card {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  width: min(800px, 100% - 80px); margin-inline: auto; padding: 64px 72px; border-radius: 8px;
  background: #fff; box-shadow: 0 8px 24px rgba(15, 61, 134, .10); text-align: center;
}
.thanks__icon { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--light); }
.thanks__icon svg { width: 48px; height: 48px; }
.thanks__head .dots { margin-top: 12px; }
.thanks__title { font-size: 40px; font-weight: 900; line-height: 1.5; }
.thanks__lead { font-size: 17px; line-height: 1.9; }
.thanks__notice { align-self: stretch; padding: 24px 28px; border-radius: 8px; background: var(--light); text-align: left; }
.thanks__notice-title { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.thanks__notice-list { margin-top: 8px; font-size: 14px; line-height: 1.8; }
.thanks__notice-list li { position: relative; padding-left: 1em; }
.thanks__notice-list li::before { content: "・"; position: absolute; left: 0; }
.thanks__next { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.thanks__next-text { font-size: 15px; font-weight: 700; line-height: 1.5; }
.thanks__btns { display: flex; justify-content: center; gap: 16px; }
.thanks__btns .btn { width: 300px; height: 64px; font-size: 17px; }

/* ==========================================================================
   tablet（768〜1023px）
   ========================================================================== */
@media (max-width: 1023px) {
  .hero { min-height: 0; }
  .hero__inner { padding: 64px 0 56px; }
  .hero__text, .hero__ctas { max-width: none; }
  .hero__ctas { flex-direction: row; }
  .hero__samples { position: relative; top: auto; left: auto; height: 330px; margin: 28px -40px 0; overflow: hidden; transform: none; }
  .hero__grid { --w: 270px; position: absolute; top: 40px; left: 60px; transform: rotate(-8deg); transform-origin: top left; }
  .ba__body { flex-direction: column; }
  .ba__visual, .ba__notes { flex: none; width: 100%; }
  .ba__notes { flex-direction: row; }
  .ba__notes li { flex: 1; }
  .ba-note { padding-right: 22px; }
  .ba-note__chev { display: none; }
  .intro__top { flex-direction: column; align-items: stretch; }
  .intro__head--left, .intro__img, .company__text, .company__works, .download__visual, .download__form-col, .footer__company { flex: none; }
  .intro__img { max-width: 520px; margin-inline: auto; }
  .flow-card { overflow-x: auto; }
  .flow-card__phases, .flow-steps { min-width: 900px; }
  .works__list { grid-template-columns: repeat(2, 1fr); }
  .company__body, .download__body, .footer__top { flex-direction: column; align-items: stretch; }
  .form { flex: none; }
  .download__visual { max-width: 600px; }
  .option__list { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   SP（〜767px）Figma: sp_design_v4（390px）
   ========================================================================== */
@media (max-width: 767px) {
  :root { --header-h: 56px; }
  body { font-size: 15px; }
  .u-pc { display: none; }
  .u-sp { display: inline; }
  br.u-sp { display: inline; }
  .container, .container--narrow, .facts__list { width: calc(100% - 40px); }
  /* 文字は 390px で 16px、320px で 14px。狭い機種でも「サービス資料をダウンロード」が1行に収まる */
  .btn--l, .btn--m { height: 56px; padding: 0 20px; gap: 10px; font-size: clamp(14px, 4.1vw, 16px); letter-spacing: .06em; }
  .sec-head { margin-bottom: 28px; }
  .sec-head__title { font-size: 25px; }
  .sec-head::after, .dots { margin-top: 10px; }

  /* header */
  .header__inner { padding: 0 16px; }
  .header__logo img { width: 120px; }

  /* hero */
  .hero { background-size: 900px auto, auto; }
  .hero__inner { width: 100%; padding: 28px 0 36px; }
  .hero__text, .hero__ctas { max-width: none; padding: 0 20px; }
  .hero__eyebrow { padding: 4px 12px; font-size: 13px; }
  .hero__title { margin-top: 14px; font-size: 31px; }
  .hero__lead { margin-top: 12px; font-size: 14px; }
  .hero__samples { height: 206px; margin: 20px 0 0; }
  .hero__grid { --w: 170px; position: absolute; top: 20px; left: 36px; transform: rotate(-8deg); transform-origin: top left; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 28px; }
  .hero__cta .btn--orange, .hero__cta--sub .btn { width: 100%; }
  .cta-label { font-size: 12px; }

  /* facts */
  .facts { padding: 22px 0; }
  .facts__list { width: calc(100% - 16px); }
  .facts__label { font-size: 12px; }
  .facts__num { font-size: 13px; }
  .facts__num .num { font-size: 32px; }
  .facts__num small { font-size: 11px; }
  .facts__note { font-size: 10px; }

  /* cta band */
  .cta-band { padding: 32px 20px; }
  .cta-band__text { font-size: 17px; }
  .cta-band__btns { flex-direction: column; gap: 10px; }
  .cta-band__btns .btn--orange, .cta-band__btns .btn--blue { width: 100%; }

  /* problem */
  .problem { padding: 48px 0; }
  .problem__panel { padding: 32px 20px 28px; }
  .problem__sub { font-size: 15px; }
  .problem__title { font-size: 25px; }
  .problem__list { flex-direction: column; gap: 14px; margin-top: 24px; }
  .problem__item { flex-direction: row; justify-content: flex-start; gap: 16px; width: auto; height: auto; padding: 0; border-radius: 0; background: none; text-align: left; }
  .problem__item p { order: 0; font-size: 15px; color: #fff; }
  .problem__img { display: grid; place-items: center; flex: none; width: 88px; height: 88px; border-radius: 50%; background: #fff; }
  .problem__img img { width: 76px; }
  .problem__arrow { width: 56px; height: 24px; }
  .problem__lead { margin-top: 20px; font-size: 17px; }
  .problem__conclusion { font-size: 28px; }
  .problem__conclusion span { background-size: 100% 4px; padding-bottom: 4px; }

  /* before / after */
  .ba { padding: 48px 0; }
  .ba-slider, .ba__caption { display: none; }
  .ba-stack { display: block; }
  .ba-stack figure img { border: 1px solid var(--line); }
  .ba-stack__badge { display: inline-flex; gap: 8px; padding: 4px 12px; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.5; }
  .ba-stack__badge b { font-family: var(--font-en); font-weight: 600; letter-spacing: .08em; }
  .ba-stack__badge--before { background: var(--text); }
  .ba-stack__badge--after { background: var(--blue); }
  .ba-stack__arrow { display: block; width: 32px; height: 20px; margin: 12px auto; background: var(--blue); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .ba__body { gap: 20px; }
  .ba__notes { flex-direction: column; gap: 12px; }
  .ba-note { gap: 6px; padding: 16px 18px; border: 0; border-radius: 12px; background: var(--light); box-shadow: none; pointer-events: none; }
  .ba-note__head { font-size: 18px; gap: 10px; }
  .ba-note__num { width: 24px; height: 24px; font-size: 13px; }
  .ba-note__body { font-size: 14px; }

  /* intro */
  .intro { padding: 48px 0; }
  .intro__who { font-size: 15px; }
  .intro__plan { padding: 8px 24px; font-size: 24px; }
  .intro__lead { font-size: 14px; }
  .steps { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .steps__item { flex-direction: row; gap: 16px; padding: 18px 16px; text-align: left; }
  .steps__img { flex: none; width: 84px; height: 84px; }
  .steps__img img { width: 76px; }
  .steps__item h3 { margin-top: 0; font-size: 18px; }
  .steps__item p { margin-top: 4px; font-size: 13px; }
  .steps__item p br:not(.u-sp) { display: none; }
  .intro__head--left { text-align: center; }
  .intro--template { background-size: 900px auto, auto; }
  .intro--template .sec-head__title { font-size: 24px; }
  .dots--sp { display: block; }
  .intro--template .intro__lead { font-size: 14px; }
  .intro__img { padding: 0; margin-top: 8px; }
  .tflow { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .tflow li { min-height: 0; padding: 16px; }
  .tflow li:nth-child(n) { grid-column: auto; }
  .tflow li + li::before { top: -22px; left: 50%; width: 28px; height: 16px; margin: 0 0 0 -14px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .tflow h3 { font-size: 18px; }
  .tflow p { margin-top: 2px; font-size: 13px; }
  .tflow p br { display: none; }

  /* plan */
  .plan { padding: 48px 0; }
  .plan .sec-head { margin-bottom: 28px; }
  .plan__cards { grid-template-columns: 1fr; gap: 16px; }
  .plan-card__head { padding: 22px 20px 18px; }
  .plan-card__who { font-size: 13px; }
  .plan-card__name { font-size: 22px; }
  .plan-card__price { font-size: 16px; }
  .plan-card__price .num { font-size: 42px; }
  .plan-card__price small { font-size: 12px; }
  .plan-card__list { padding: 20px 20px 0; margin-bottom: 20px; }
  .plan-card__list li { font-size: 15px; }
  .plan-card__foot { margin: 0 20px 20px; padding: 12px 14px; font-size: 13px; }
  .plan__express { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 20px; }
  .plan__express-title { font-size: 16px; gap: 10px; }
  .plan__express-price .num { font-size: 28px; }
  .plan__express-text { font-size: 13px; }
  .plan__notes { margin-top: 14px; font-size: 12px; }
  .plan__cta { margin-top: 24px; }
  .plan__cta .btn { width: 100%; }

  /* price */
  .price { padding: 48px 0; }
  .price__table, .price__table tbody, .price__table tr, .price__table th, .price__table td { display: block; }
  .price__table thead { display: none; }
  .price__table tbody { display: flex; flex-direction: column; gap: 12px; }
  .price__table tbody tr { padding: 16px 16px 12px; border: 1px solid var(--line); border-radius: 8px; }
  .price__table tbody th, .price__table td { padding: 0; }
  .price__table tbody th { font-size: 16px; }
  .price__calc { margin-top: 4px; font-size: 12px; }
  .price__total .num { font-size: 30px; }
  .option { margin-top: 24px; padding: 20px 16px; }
  .option__head { flex-direction: column; gap: 2px; }
  .option__title { font-size: 22px; }
  .option__note { font-size: 12px; }
  /* minmax(0, 1fr): 中身が長くても列が画面からはみ出さないように */
  .option__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
  .option__list li { padding: 14px clamp(10px, 3.6vw, 14px); gap: 4px; }
  /* 5枚目（レイアウト追加）は1列ぶち抜き。2・2・1 の並びで右下が空かず、タグも1行に収まる */
  .option__list li:last-child { grid-column: 1 / -1; }
  .option__name { font-size: 14px; }
  .option__price { font-size: 13px; white-space: normal; }
  .option__price .num { font-size: clamp(19px, 6.1vw, 24px); }
  .option__cond { padding: 2px 6px; font-size: 10px; }

  /* flow（縦のタイムライン） */
  .flow { padding: 48px 0; }
  .flow .sec-head__title { font-size: 25px; }
  .flow-card { gap: 16px; padding: 20px 18px 24px; overflow: visible; }
  .flow-card + .flow-card { margin-top: 16px; }
  .flow-card__head { flex-wrap: wrap; gap: 4px 12px; }
  .flow-card__name { padding: 4px 12px; font-size: 15px; }
  .flow-card__days .num { font-size: 28px; }
  .flow-card__days { font-size: 13px; }
  .flow-card__pay { flex-basis: 100%; margin-left: 0; font-size: 13px; }
  .flow-card__phases { display: none; }
  .flow-steps { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .flow-steps li { display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; text-align: left; }
  .flow-steps li::before { display: none; }
  .flow-steps li::after { content: ""; position: absolute; left: 13px; top: 0; bottom: -10px; width: 2px; background: #B7C4D1; z-index: 0; }
  .flow-steps li:last-child::after { bottom: 50%; }
  .flow-steps li:first-child::after { top: 50%; }
  .flow-steps li[data-phase] { padding-top: 0; }
  .flow-steps li[data-phase]::before {
    content: attr(data-phase); display: block; position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 1; justify-self: start;
    margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; background: #D9E2EC; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--text);
    height: auto; left: auto; right: auto; top: auto;
  }
  .flow-steps li:nth-child(5)[data-phase]::before { background: var(--main); color: #fff; }
  .flow-steps li:nth-child(11)[data-phase]::before { background: #FFE3D3; color: var(--text); }
  .flow-steps li:first-child[data-phase]::after { top: 40px; }
  .flow-steps__meta { grid-column: 2; grid-row: 2; min-height: 0; font-size: 11px; }
  .flow-steps__meta:empty { display: none; }
  .flow-steps__num { grid-column: 1; grid-row: 2 / 4; z-index: 1; width: 28px; height: 28px; font-size: 13px; }
  .flow-steps__name { grid-column: 2; grid-row: 3; font-size: 15px !important; }
  .flow-steps__name br { display: none; }
  .flow-steps__tag { grid-column: 3; grid-row: 2 / 4; font-size: 11px; }

  /* works */
  .works { padding: 48px 0; }
  .works .sec-head { margin-bottom: 24px; }
  .works__filter { flex-wrap: nowrap; justify-content: flex-start; margin-right: -20px; padding-right: 20px; overflow-x: auto; scrollbar-width: none; }
  .works__filter::-webkit-scrollbar { display: none; }
  .works__filter button { flex: none; font-size: 13px; padding: 6px 14px; }
  .works__list { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
  .work { padding: 0; border-radius: 0; box-shadow: none; }
  .work__tag { margin-top: 12px; font-size: 12px; }
  .work__title { margin-top: 6px; font-size: 17px; }
  .work__plan { margin-top: 6px; font-size: 12px; }
  .work:hover { box-shadow: none; transform: none; }
  .work__zoom img { outline: 1px solid var(--line); }
  .work__zoom-icon { right: 8px; bottom: 8px; width: 32px; height: 32px; }
  .work__zoom-icon svg { width: 16px; height: 16px; }

  /* ポップアップ（SP）: 画像は画面幅いっぱい。タップで約2倍にして、指で動かして見る */
  .lightbox { --lb-w: 100%; }
  .lightbox__stage { padding: 64px 12px 100px; overflow: hidden; }
  .lightbox__img { cursor: zoom-in; }
  .lightbox__caption { gap: 6px 10px; margin-top: 14px; }
  .lightbox__tag { font-size: 12px; }
  .lightbox__title { flex-basis: 100%; order: -1; font-size: 16px; }
  .lightbox__plan { font-size: 12px; }
  .lightbox__count { font-size: 13px; }
  .lightbox__hint { display: block; flex-basis: 100%; margin-top: 4px; font-size: 12px; color: var(--footer-text); }
  .lightbox.is-zoomed .lightbox__stage { justify-content: flex-start; overflow: auto; -webkit-overflow-scrolling: touch; }
  .lightbox.is-zoomed .lightbox__figure { width: 220%; }
  .lightbox.is-zoomed .lightbox__img { cursor: zoom-out; }
  .lightbox.is-zoomed .lightbox__caption { display: none; }
  .lightbox__close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .lightbox__nav { top: auto; bottom: 28px; width: 48px; height: 48px; margin-top: 0; }
  .lightbox__nav--prev { left: calc(50% - 64px); }
  .lightbox__nav--next { right: calc(50% - 64px); }

  /* company */
  .company { padding: 48px 0; }
  .company__body { gap: 24px; }
  .company__text { font-size: 14px; }
  .company__text br { display: none; }
  .company__works-title { font-size: 15px; }
  .company__sites { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }

  /* faq */
  .faq { padding: 48px 0; }
  .faq__item dt { align-items: flex-start; gap: 10px; padding: 12px 14px; font-size: 15px; }
  .faq__item dd { align-items: flex-start; gap: 10px; padding: 12px 14px 14px; font-size: 14px; }
  .faq__item dt::before, .faq__item dd::before { width: 26px; height: 26px; font-size: 15px; }

  /* download */
  .download { padding: 48px 0; background-size: 900px auto, auto; }
  .download .sec-head__title { font-size: 23px; }
  .download__body { gap: 20px; }
  .cover__label { font-size: 9.5px; }
  .cover__title { margin-top: 4px; font-size: 22px; }
  .cover__sub { font-size: 12px; }
  .cover__brand { padding-top: 12px; font-size: 15px; }
  .download__note { margin-top: 14px; font-size: 14px; text-align: center; }
  .form { gap: 16px; padding: 24px 20px; }
  .form__field label { font-size: 13px; }
  .form__field input, .form__select select { height: 48px; }
  .form__submit { height: 56px; }
  .form__submit-wrap { gap: 8px; }
  .form__note { font-size: 12px; }
  .download__form-col { gap: 20px; }
  .download__contact { align-self: stretch; width: auto; height: 52px; font-size: 14px; }

  /* footer */
  .footer { padding: 40px 0 100px; }
  .footer__top { gap: 28px; }
  .footer__logo { width: 150px; }
  .footer__table { font-size: 12px; }
  .footer__table dt { width: 84px; }
  .footer__site { width: 100%; height: 48px; font-size: 15px; }
  .footer__links { gap: 20px; }
  .footer__links > div { flex: 1; }
  .footer__links-title { font-size: 14px; }
  .footer__links a { font-size: 13px; }
  .footer__bottom { flex-direction: column; gap: 4px; margin-top: 28px; font-size: 11px; }

  /* 画面の下に固定するボタン */
  .fixed-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: block; padding: 10px 16px;
    background: rgba(255, 255, 255, .96); box-shadow: 0 -4px 16px rgba(15, 61, 134, .12);
    transition: transform .25s, opacity .25s;
  }
  .fixed-cta .btn { width: 100%; height: 52px; }
  .fixed-cta.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }

  /* サンクスページ（SP） */
  .thanks { padding: 40px 0 56px; background-size: 900px auto, auto; }
  .thanks__card { gap: 22px; width: calc(100% - 40px); padding: 32px 20px; }
  .thanks__icon { width: 72px; height: 72px; }
  .thanks__icon svg { width: 40px; height: 40px; }
  .thanks__title { font-size: 24px; }
  .thanks__lead { font-size: 14px; line-height: 1.8; }
  .thanks__notice { padding: 18px 16px; }
  .thanks__notice-title { font-size: 15px; }
  .thanks__notice-list { font-size: 13px; }
  .thanks__next-text { font-size: 14px; }
  .thanks__next { align-self: stretch; }
  .thanks__btns { flex-direction: column; align-self: stretch; gap: 10px; }
  .thanks__btns .btn { width: 100%; height: 52px; font-size: clamp(14px, 4.1vw, 16px); }
  .page-thanks .footer { padding-bottom: 40px; }
  body.is-menu-open .fixed-cta { display: none; }
}