/* monocafe — カンプ（1536px 幅）の1画素を1単位（--u）として組む。1440px 幅でカンプと同じ大きさ */
:root {
  --u: calc(min(100vw, 1920px) / 1536);
  --ink: #0B111E;
  --ink-body: #070A16;
  --navy: #0E2C56;
  --navy-hd: #193357;
  --band: #172130;
  --band-2: #1F2B3B;
  --band-3: #26364A;
  --cta: #1D528B;
  --line: #C3D1E5;
  --qa: #E1EBF5;
  --wave: #1556C0;
  --teal-1: #2393B0;
  --teal-2: #38A9A2;
  --violet: #6A63C0;
  --bg: #F3F7FB;
  --font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(80 * var(--u)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-feature-settings: normal; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; font-weight: inherit; }
ul, ol { list-style: none; }
small { font-size: inherit; }
.sr, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; background: #fff; border-radius: 6px; }

/* ---------- 置き方（PC） ---------- */
.stage { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; height: calc(var(--h) * var(--u)); }
.abs { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.abs[style*="--w"] { width: calc(var(--w) * var(--u)); }
.abs[style*="--h"] { height: calc(var(--h) * var(--u)); }
.t { font-size: calc(var(--fs) * var(--u)); letter-spacing: calc(var(--ls) * var(--u)); line-height: 1; white-space: nowrap; }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.ic svg { width: 100%; height: 100%; display: block; }
.sp-visual { display: none; }
.sec { position: relative; }
:focus-visible { outline: 3px solid #4C8DFF; outline-offset: 3px; }

/* ヘッダー */
.hd { position: sticky; top: 0; z-index: 50; background: #FBFBFC; }
.hd .logo { font-weight: 700; color: #070B14; }
.gnav a { color: #0A0C12; transition: color .2s; }
.gnav a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: .3em; }
.gnav .sep span { color: #10131A; }
.btn-hd { background: var(--navy-hd); border-radius: calc(8 * var(--u)); color: #fff; transition: background .2s, transform .2s; }
.btn-hd:hover { background: #24497A; }
.menu-btn { display: none; }
.spnav { display: none; }

/* ヒーロー */
.h1, .h1 .ln, .lead { display: contents; }
.h1 .t, .hero .lead .t { color: var(--ink); }
.hero .lead .t { color: #040615; font-weight: 500; }
.btn-main { background: var(--navy); border-radius: calc(8 * var(--u)); color: #fff; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(14, 44, 86, .18); transition: background .2s, transform .2s, box-shadow .2s; }
.btn-main:hover { background: #17407A; transform: translateY(-2px); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(14, 44, 86, .24); }
.btn-main .chev { color: #fff; }
.badge { background: #FAFBFC; border-radius: calc(8 * var(--u)); box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(30, 50, 80, .10); }

/* サービス */
.svc { display: contents; }
.service h2, .service h3 { color: #02050F; }
.svc-t { display: contents; }
.svc-t .t { color: #02040E; font-weight: 500; }
.ul { background: #131929; }

/* 帯（料金・作例） */
.band { background: var(--band); color: #fff; }
.band .hline { background: rgba(200, 214, 232, .16); }
.band .vline { background: rgba(200, 214, 232, .30); }
.rul svg { width: 100%; height: 100%; display: block; }
.plist, .pitem { display: contents; }
.thumb { overflow: hidden; border-radius: calc(3 * var(--u)); }
.thumb img, .clip img, .wthumb img { width: 100%; height: 100%; object-fit: cover; }
.pl, .pv { display: contents; }

/* 流れのタイムライン */
.flowtop h2 { color: var(--ink); }
.steps { display: flex; color: #01020A; }
.steps li + li::before { content: "　/　"; font-weight: 700; }
.band2 { background: #212D3D; }
.tl { overflow: hidden; }
.tl::before { content: ""; position: absolute; inset: 0 0 auto 0; height: calc(53 * var(--u)); background: #1A2534; }
.tl-side { background: #283A4F; }
.tl-icons { background: #172231; }
.tl-ic { color: #DCE6F5; }
.tl-row { background: rgba(120, 140, 165, .35); }
.tl-ruler-line { background: rgba(130, 150, 175, .45); }
.tl-v { background: rgba(130, 150, 175, .35); }
.tc { font-size: calc(13.2 * var(--u)); line-height: 1; color: #F2F5FA; letter-spacing: .02em; font-feature-settings: "tnum"; }
.clip { overflow: hidden; }
.tl-arrow { color: #C9D6E8; }
.wave-box svg { width: 100%; height: 100%; display: block; }
.bar { border-radius: calc(1 * var(--u)); }
.b1 { background: var(--teal-1); }
.b2 { background: var(--teal-2); }
.b3 { background: var(--violet); }
.tl-grid { background: rgba(140, 160, 185, .22); }
.playhead { background: #fff; box-shadow: 0 0 calc(4 * var(--u)) rgba(255, 255, 255, .6); }
.ph-tri { color: #fff; }

/* 作例 */
.workstop h2 { color: var(--ink); }
.works-band { background: #182331; }
.wl-box { border: 1px solid rgba(200, 214, 232, .28); border-right: 0; }
.wlab, .vlab { display: contents; }
.wrow { display: contents; }
.wthumb { overflow: hidden; border-radius: calc(2 * var(--u)); box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .35); }

/* よくある質問 */
.faq h2 { color: var(--ink); }
.qa, .qa-item, .qa dt, .qa dd { display: contents; }
.card { background: #FDFDFD; border: 1px solid var(--line); border-radius: calc(8 * var(--u)); }
.qa-mark { display: grid; place-items: center; background: var(--qa); border-radius: 50%; font-weight: 700; color: #0C1B3A; font-size: calc(21 * var(--u)); line-height: 1; }
.qa-mark.a { font-size: calc(19 * var(--u)); }
.qa-div { background: #DCE5F1; }
.qa dt .t { color: #01020F; }
.qa dd .t { color: #020205; }

/* 申し込み */
.cta h2 { color: #FDFEFE; }
.btn-cta { background: #FDFDFE; border-radius: calc(10 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(5, 25, 55, .18); transition: transform .2s, box-shadow .2s; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(5, 25, 55, .26); }

/* フッター */
.ft { background: #FEFEFE; }
.ft .flogo { color: #020312; }
.ft .copy { color: #080A18; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- スマホ（767px まで）：並びを縦に組み替える ---------- */
@media (max-width: 1023px) {
  :root { --u: 1px; }
  body { font-size: 15px; }
  .stage { height: auto; padding: 0 20px; }
  .abs, .t { position: static; width: auto !important; height: auto !important; letter-spacing: 0; white-space: normal; }
  .plate { object-fit: cover; }
  .sec { overflow: hidden; }

  .hd .stage { display: flex; align-items: center; justify-content: space-between; height: 60px; }
  .hd .logo { font-size: 26px; }
  .gnav, .btn-hd { display: none; }
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; }
  .menu-btn span:not(.sr) { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .spnav:not([hidden]) { display: flex; flex-direction: column; position: fixed; z-index: 49; top: 60px; left: 0; right: 0; padding: 8px 20px 20px; background: #FBFBFC; box-shadow: 0 10px 20px rgba(10, 20, 40, .12); }
  .spnav a { padding: 14px 4px; border-bottom: 1px solid #E3E9F1; font-weight: 500; }
  .spnav .spnav-cta { margin-top: 14px; border: 0; border-radius: 8px; background: var(--navy-hd); color: #fff; text-align: center; font-weight: 700; }

  .hero .stage { padding-top: 40px; padding-bottom: 0; }
  .hero .plate { height: 100%; object-position: 30% 0; opacity: .9; }
  .h1 { display: block; position: relative; }
  .h1 .ln { display: block; }
  .h1 .t { display: block; font-size: 40px; font-weight: 900; letter-spacing: -.04em; line-height: 1.22; }
  .lead { display: block; position: relative; margin-top: 18px; }
  .lead .t { display: inline; font-size: 15px; line-height: 1.85; }
  .lead br { display: none; }
  .btn-main { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; height: 56px !important; margin-top: 26px; font-size: 17px; }
  .btn-main .t { font-size: 17px; }
  .btn-main .chev { width: 10px !important; height: 17px !important; }
  .badge { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 16px; }
  .badge .ic { width: 22px !important; height: 22px !important; }
  .badge .t { font-size: 14px; }
  .hero .sp-visual { display: block; position: relative; width: calc(100% + 40px); height: auto; margin: 26px -20px 0; }

  .service .stage { padding-top: 56px; padding-bottom: 40px; }
  .service h2.t { position: relative; display: block; font-size: 48px; letter-spacing: -.04em; }
  .service .sp-visual { display: block; position: relative; width: calc(100% + 40px); height: auto; margin: 22px -20px 8px; }
  .svc { display: block; position: relative; margin-top: 26px; }
  .svc h3.t { display: block; font-size: 30px; }
  .svc .ul { display: block; width: 44px !important; height: 2px !important; margin: 14px 0; }
  .svc-t { display: block; }
  .svc-t .t { display: inline; font-size: 15px; line-height: 1.8; }
  .svc-t br { display: none; }
  .service .price-h { position: relative; display: block; margin-top: 64px; font-size: 44px; letter-spacing: -.02em; }
  .service .plate { object-position: 35% 0; }

  .price .stage { padding: 0; }
  .price .rul, .price .hline, .price .vline { display: none; }
  .plist { display: block; padding: 8px 20px; }
  .pitem { display: grid; grid-template-columns: 116px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(200, 214, 232, .2); }
  .pitem:last-child { border-bottom: 0; }
  .pitem .thumb { grid-row: 1 / 3; width: 116px !important; height: 72px !important; }
  .pitem .thumb + .thumb { display: none; }
  .pl, .pv { display: block; }
  .pl .t { font-size: 14px; }
  .pv .t { display: block; margin-top: 4px; font-size: 30px; letter-spacing: -.02em; }

  .flowtop { padding-top: 56px !important; padding-bottom: 26px !important; }
  .flow h2.t { position: relative; display: block; font-size: 44px; }
  .steps { position: relative; flex-wrap: wrap; margin-top: 16px; font-size: 15px; line-height: 1.9; }
  .tl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .tl-wrap .stage, .works-wrap .stage { --u: .62px; width: calc(1536 * var(--u)); max-width: none; height: calc(var(--h) * var(--u)); padding: 0; }
  .tl-wrap .abs, .works-wrap .abs { position: absolute; width: calc(var(--w) * var(--u)) !important; height: calc(var(--h) * var(--u)) !important; }
  .tl-wrap .t, .works-wrap .t { position: absolute; font-size: calc(var(--fs) * var(--u)); letter-spacing: calc(var(--ls) * var(--u)); white-space: nowrap; }
  .tl-wrap .tc { position: absolute; }

  .workstop { padding-top: 48px !important; padding-bottom: 20px !important; }
  .workstop h2.t { position: relative; display: block; font-size: 44px; }
  .works-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #182331; }

  .faq .stage { padding-top: 56px; padding-bottom: 56px; }
  .faq h2.t { position: relative; display: block; font-size: 40px; margin-bottom: 20px; }
  .card, .qa-div { display: none; }
  .qa { display: block; position: relative; }
  .qa-item { display: block; margin-top: 14px; padding: 18px 16px; background: #FDFDFD; border: 1px solid var(--line); border-radius: 8px; }
  .qa dt, .qa dd { display: flex; align-items: flex-start; gap: 12px; }
  .qa dd { margin-top: 14px; padding-top: 14px; border-top: 1px solid #DCE5F1; }
  .qa-mark { flex: none; width: 34px !important; height: 34px !important; font-size: 15px; }
  .qa dt .t { font-size: 17px; line-height: 1.6; padding-top: 4px; }
  .qa dd .t { font-size: 15px; line-height: 1.8; padding-top: 5px; }

  .cta .stage { padding-top: 56px; padding-bottom: 56px; text-align: center; }
  .cta h2.t { position: relative; display: block; font-size: 28px; line-height: 1.5; }
  .btn-cta { position: relative; display: flex; align-items: center; justify-content: center; height: 58px !important; margin-top: 26px; }
  .btn-cta .t { font-size: 16px; }

  .ft .stage { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
  .ft .flogo { font-size: 24px; }
  .ft .copy { font-size: 12px; }
}

/* ロゴ（カンプから起こした SVG）・申し込みの見出し */
.logo img, .flogo img { width: 100%; height: 100%; }
.cta-h { display: contents; }
@media (max-width: 1023px) {
  .hd .logo { width: 150px !important; height: auto !important; }
  .ft .flogo { width: 130px !important; }
  .cta-h { display: block; position: relative; }
  .cta-h .t { display: inline; font-size: 28px; line-height: 1.5; color: #FDFEFE; }
}
@media (max-width: 1023px) {
  .pv { display: flex; align-items: baseline; }
  .pv .t { display: inline; }
  .pv .yen { font-size: 18px; margin-left: 2px; }
}
/* 帯の明るさ・色の帯の濃淡（カンプに合わせる） */
.price.band { background: linear-gradient(90deg, #17202D 0%, #1A2432 45%, #222E3F 100%); }
.b1 { background: linear-gradient(90deg, #2A9DB8, #2391AE); }
.b2 { background: linear-gradient(90deg, #3EB3A9, #36A79F); }
.b3 { background: linear-gradient(90deg, #6F68C6, #6760BE); }
.tl-grid { background: rgba(140, 160, 185, .28); }

/* スマホ：PC の位置指定を外す・背景の絵を文字に重ねない */
@media (max-width: 1023px) {
  .abs { left: auto; top: auto; }
  .tl-wrap .abs, .works-wrap .abs { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
  .hero .plate, .service .plate, .faq .plate { display: none; }
  .hero, .service, .faq { background: #EEF3F9 linear-gradient(115deg, rgba(255,255,255,.75) 0 18%, rgba(255,255,255,0) 18% 30%, rgba(255,255,255,.55) 30% 41%, rgba(255,255,255,0) 41%), linear-gradient(180deg, #E4ECF5 0%, #F2F6FA 55%, #E9F0F7 100%); }
  .cta-h .t { display: block; white-space: nowrap; font-size: 26px; }
  .stage > * { position: relative; z-index: 1; }
  .stage > .plate { position: absolute; z-index: 0; }
  .tl-wrap .stage > *, .works-wrap .stage > * { position: absolute; }
  .hero .stage { padding-bottom: 0; }
  .btn-main .t { position: static; }
  .btn-main .chev { position: static; }
  .badge .ic, .badge .t { position: static; }
  .btn-cta .t { position: static; }
  .qa-mark span { position: static; }
  .flowtop, .workstop { min-height: 0; }
  .flowtop .plate, .workstop .plate { object-position: 0 0; }
}
@media (max-width: 1023px) {
  .steps li + li::before { content: none; }
  .steps li { white-space: nowrap; }
  .steps li:not(:last-child)::after { content: "　/　"; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .stage { padding-left: 48px; padding-right: 48px; }
  .h1 .t { font-size: 60px; }
  .btn-main { max-width: 420px; }
  .hero .sp-visual, .service .sp-visual { width: calc(100% + 96px); margin-left: -48px; margin-right: -48px; }
  .qa-item { max-width: 760px; }
  .btn-cta { max-width: 460px; margin-left: auto; margin-right: auto; }
  .plist { padding: 8px 48px; }
}

/* 照合で出た細かい点（カンプに合わせる）・背景プレートは CSS の背景 */
html { scroll-behavior: auto; }
.plate { background-size: cover; background-position: center top; background-repeat: no-repeat; }
.qa-mark { font-size: calc(23.8 * var(--u)); }
.qa-mark.a { font-size: calc(21.3 * var(--u)); }
.tc { font-size: calc(12 * var(--u)); letter-spacing: .065em; }
.ft .copy { font-size: calc(15.6 * var(--u)); }
.svc-video .svc-t .t { letter-spacing: calc(var(--ls) * var(--u) - .05em); }
@media (max-width: 1023px) {
  .svc-video .svc-t .t { letter-spacing: 0; }
  .qa-mark { font-size: 15px; }
  .ft .copy { font-size: 12px; }
}
.qa-mark.a { font-weight: 500; }

/* 納品前チェックで直した点 */
/* 1. 押せる範囲を広げる（見た目はそのまま） */
.gnav a { padding: calc(12 * var(--u)) calc(6 * var(--u)); margin: calc(-12 * var(--u)) calc(-6 * var(--u)); }
.skip:not(:focus) { width: auto; height: auto; clip: auto; overflow: visible; position: fixed !important; top: 8px; left: 8px; padding: 12px 16px; background: #fff; border-radius: 6px; transform: translateY(-200%); }
/* 2. 文字の下の色を指定（画像が読めないときも白い文字が読める） */
.cta { background-color: #1D528B; }
.hero, .service, .flow, .works, .faq { background-color: #EAF0F7; }
/* 3. 主見出しを箱として置く（中の行の位置は今のまま） */
.h1 { display: block; position: absolute; inset: 0; margin: 0; font-size: inherit; pointer-events: none; }
@media (max-width: 1023px) {
  .h1 { position: relative; inset: auto; pointer-events: auto; }
  .hd .logo { display: flex; align-items: center; min-height: 44px; }
  .service h2.t { font-size: 36px; }
  .service .price-h, .flow h2.t, .workstop h2.t { font-size: 34px; }
  .faq h2.t { font-size: 32px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .service h2.t { font-size: 44px; }
}