/* Web工房Pono 公式サイト（v3） */
:root {
  --ink: #0F1B27;
  --ink-2: #2B3845;
  --sub: #5F6B77;
  --mute: #8A95A0;
  --line: #E2E6EA;
  --line-2: #CBD2D9;
  --bg: #FFFFFF;
  --soft: #F4F6F8;
  --blue: #1D5FAD;
  --blue-2: #3C7FD0;
  --sky: #BFD9F2;
  --deep: #0B1E31;
  --pad: clamp(20px, 4.4vw, 64px);
  --max: 1320px;
  --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --en: "Inter", "Noto Sans JP", sans-serif;
  --ease: cubic-bezier(.22, .7, .15, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--jp); font-size: 15px; line-height: 1.95; letter-spacing: .04em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc { display: inline; } .sp { display: none; }
@media (max-width: 767px) { .pc { display: none; } .sp { display: inline; } }

.container { width: 100%; max-width: calc(var(--max) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.en { font-family: var(--en); letter-spacing: 0; }

/* ===== ヘッダー ===== */
.header { position: fixed; inset: 0 0 auto; z-index: 100; transition: background .4s var(--ease), border-color .4s; border-bottom: 1px solid transparent; }
.header.is-scrolled { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 84px; transition: height .4s var(--ease); }
.header.is-scrolled .header__inner { height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { width: 42px; height: 42px; border-radius: 50%; }
.logo__name { font-weight: 700; font-size: 17px; letter-spacing: .06em; line-height: 1.2; }
.logo__en { display: block; font-family: var(--en); font-size: 9.5px; font-weight: 500; letter-spacing: .24em; color: var(--mute); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 500; }
.nav a:not(.nav__cta) { position: relative; padding: 6px 0; }
.nav a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:not(.nav__cta):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 22px; background: var(--ink); color: #fff; font-weight: 500; transition: background .3s; }
.nav__cta:hover { background: var(--blue); }
.nav__cta i { font-style: normal; font-family: var(--en); transition: transform .3s var(--ease); }
.nav__cta:hover i { transform: translateX(3px); }
.menu-btn { display: none; width: 46px; height: 46px; border: 1px solid var(--line-2); background: #fff; position: relative; cursor: pointer; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
.menu-btn span:nth-child(1) { top: 18px; } .menu-btn span:nth-child(2) { top: 26px; }
.is-menu-open .menu-btn span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.is-menu-open .menu-btn span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 960px) {
  .header__inner { height: 68px; }
  .menu-btn { display: block; z-index: 2; }
  .nav { position: fixed; inset: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: 0 var(--pad); font-size: 22px; font-weight: 700; background: #fff; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
  .is-menu-open .nav { opacity: 1; visibility: visible; }
  .nav__cta { margin-top: 14px; height: 56px; font-size: 16px; }
  .logo img { width: 38px; height: 38px; }
  .logo__name { font-size: 15px; }
}

/* ===== 見出しのパーツ ===== */
.label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.label--light { color: var(--sky); }
.sec { padding: clamp(96px, 12vw, 170px) 0; position: relative; }
.sec--soft { background: var(--soft); }
.sec--deep { background: var(--deep); color: #fff; }
.sec-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: clamp(48px, 7vw, 90px); }
.sec-title { margin-top: 20px; font-size: clamp(30px, 4.2vw, 52px); font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
.sec-lead { color: var(--sub); max-width: 480px; justify-self: end; }
.sec--deep .sec-lead { color: rgba(255,255,255,.7); }
@media (max-width: 860px) { .sec-top { grid-template-columns: 1fr; } .sec-lead { justify-self: start; } }

/* 丸い矢印つきリンク */
.more { display: inline-flex; align-items: center; gap: 16px; font-weight: 500; font-size: 14px; }
.more__arrow { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid currentColor; overflow: hidden; display: grid; place-items: center; transition: background .4s var(--ease), border-color .4s; }
.more__arrow svg { width: 15px; height: 15px; transition: transform .5s var(--ease); }
.more:hover .more__arrow { background: var(--ink); border-color: var(--ink); color: #fff; }
.more:hover .more__arrow svg { transform: translateX(3px); }
.sec--deep .more:hover .more__arrow { background: #fff; border-color: #fff; color: var(--deep); }

/* 四角いボタン */
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-width: 260px; height: 64px; padding: 0 26px; background: var(--ink); color: #fff; font-weight: 500; transition: background .35s var(--ease); }
.button:hover { background: var(--blue); }
.button svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.button:hover svg { transform: translateX(4px); }
.button--line { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.button--line:hover { background: var(--ink); color: #fff; }
.button--white { background: #fff; color: var(--ink); }
.button--white:hover { background: var(--sky); color: var(--ink); }
.button--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.button--ghost:hover { background: #fff; color: var(--deep); }

/* ===== ヒーロー ===== */
.hero { position: relative; padding: 170px 0 0; overflow: hidden; }
.hero__canvas { position: absolute; top: 0; right: 0; width: 62%; height: 100%; pointer-events: none; }
.hero__canvas svg { width: 100%; height: 100%; display: block; }
.hero__canvas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 30%), linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 22%); }
.hero__body { position: relative; z-index: 1; }
.hero__title { margin-top: 30px; font-size: clamp(34px, 5.6vw, 76px); font-weight: 700; line-height: 1.38; letter-spacing: .04em; }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: inline-block; transform: translateY(110%); animation: lineUp 1.2s var(--ease) forwards; }
.hero__title .ln:nth-child(2) > span { animation-delay: .12s; }
.hero__title em { font-style: normal; color: var(--blue); }
@keyframes lineUp { to { transform: none; } }
.hero__text { margin-top: 34px; max-width: 600px; color: var(--sub); font-size: clamp(14px, 1.2vw, 16px); opacity: 0; animation: fadeIn 1.2s .5s var(--ease) forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.hero__scroll { position: absolute; right: var(--pad); bottom: 0; writing-mode: vertical-rl; font-family: var(--en); font-size: 11px; letter-spacing: .2em; color: var(--mute); display: flex; align-items: center; gap: 12px; }
.hero__scroll::after { content: ""; width: 1px; height: 70px; background: var(--line-2); }

/* ヒーロー下の3つの入口 */
.entry { margin-top: clamp(70px, 9vw, 120px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); position: relative; z-index: 1; background: rgba(255,255,255,.75); backdrop-filter: blur(6px); }
.entry a { position: relative; align-content: start; padding: 34px 70px 40px 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; border-right: 1px solid var(--line); transition: color .3s; }
.entry a + a { padding-left: 34px; }
.entry a:last-child { border-right: 0; }
.entry__no { grid-row: span 3; font-family: var(--en); font-size: 13px; font-weight: 600; color: var(--blue); padding-top: 4px; }
.entry__en { font-family: var(--en); font-size: 11px; letter-spacing: .16em; color: var(--mute); }
.entry h2 { font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; letter-spacing: .06em; transition: color .3s; }
.entry p { font-size: 13px; color: var(--sub); line-height: 1.8; }
.entry__arrow { position: absolute; right: 24px; top: 34px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: background .4s var(--ease), border-color .4s, color .4s; }
.entry a:last-child { padding-right: 56px; }
.entry a:last-child .entry__arrow { right: 0; }
.entry__arrow svg { width: 13px; height: 13px; }
.entry a:hover .entry__arrow { background: var(--blue); border-color: var(--blue); color: #fff; }
.entry a:hover h2 { color: var(--blue); }
@media (max-width: 900px) {
  .hero { padding-top: 130px; }
  .hero__canvas { width: 100%; height: 70%; opacity: .55; }
  .entry { grid-template-columns: 1fr; }
  .entry a, .entry a + a { padding: 26px 60px 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .entry__arrow, .entry a:last-child .entry__arrow { right: 0; top: 26px; }
  .hero__scroll { display: none; }
}

/* 流れる文字 */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; white-space: nowrap; }
.marquee__track { display: inline-flex; animation: marquee 44s linear infinite; font-family: var(--en); font-size: clamp(34px, 5vw, 64px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.marquee__track span { display: inline-flex; align-items: center; gap: .9em; padding-right: .9em; }
.marquee__track span::after { content: ""; width: .18em; height: .18em; border-radius: 50%; background: var(--blue); }
.marquee__track .o { color: transparent; -webkit-text-stroke: 1px var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ===== About（トップ） ===== */
.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 8vw, 120px); }
.about__big { font-family: var(--en); font-size: clamp(90px, 15vw, 220px); font-weight: 600; line-height: .85; letter-spacing: -.05em; color: var(--ink); }
.about__big small { display: block; font-family: var(--jp); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--sub); margin-top: 26px; line-height: 1.8; }
.about__text h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1.75; letter-spacing: .05em; }
.about__text p { margin-top: 26px; color: var(--sub); }
.about__text .more { margin-top: 40px; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* ===== サービス（大きな行） ===== */
.svc { border-top: 1px solid var(--line); }
.svc__row { display: grid; grid-template-columns: 70px minmax(0, .95fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 70px); padding: clamp(50px, 6vw, 80px) 0; border-bottom: 1px solid var(--line); align-items: center; }
.svc__no { font-family: var(--en); font-size: 14px; font-weight: 600; color: var(--blue); align-self: start; padding-top: 10px; }
.svc__en { font-family: var(--en); font-size: 12px; letter-spacing: .16em; color: var(--mute); }
.svc h3 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; letter-spacing: .06em; margin-top: 8px; line-height: 1.45; }
.svc__desc { margin-top: 20px; color: var(--sub); }
.svc__tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc__tags li { font-size: 12px; border: 1px solid var(--line-2); padding: 3px 12px; color: var(--ink-2); }
.svc .more { margin-top: 32px; }
.svc__visual { position: relative; padding-bottom: 6%; }
@media (max-width: 900px) { .svc__row { grid-template-columns: 1fr; } .svc__no { padding-top: 0; } }

/* 画面の見本（UIモック） */
.frame { position: relative; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(15,27,39,.25); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #FAFBFC; }
.frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.frame__url { margin-left: 10px; font: 500 10.5px var(--en); color: var(--mute); }
.ui { font-size: 11px; line-height: 1.6; letter-spacing: .03em; color: var(--ink); }
.ui-img { background: var(--soft) center / cover no-repeat; }
.ui-web__nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font-size: 10px; color: var(--sub); }
.ui-web__nav b { font-size: 12px; color: var(--ink); letter-spacing: .08em; }
.ui-web__nav span { display: flex; gap: 14px; }
.ui-web__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 18px 22px; align-items: center; }
.ui-web__hero h4 { font-size: 20px; line-height: 1.4; font-weight: 700; letter-spacing: .04em; }
.ui-web__hero p { font-size: 9.5px; color: var(--sub); margin-top: 8px; }
.ui-web__hero .ui-img { aspect-ratio: 4 / 3; }
.ui-web__btn { display: inline-block; margin-top: 12px; background: var(--ink); color: #fff; font-size: 9px; padding: 5px 12px; }
.ui-web__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 18px 18px; }
.ui-web__cols div { border-top: 1px solid var(--line); padding-top: 8px; font-size: 9px; color: var(--sub); }
.ui-web__cols b { display: block; color: var(--ink); font-size: 10px; }
.ui-phone { position: absolute; right: -3%; bottom: 0; width: 28%; border: 6px solid var(--ink); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 24px 40px -20px rgba(15,27,39,.45); }
.ui-phone .ui-img { aspect-ratio: 1; }
.ui-phone__body { padding: 10px; font-size: 9px; }
.ui-phone__body b { display: block; font-size: 11px; line-height: 1.4; }
.ui-shop { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; padding: 22px; }
.ui-shop .ui-img { aspect-ratio: 1; }
.ui-shop__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.ui-shop__thumbs .ui-img { aspect-ratio: 1; opacity: .85; }
.ui-shop__cat { font-size: 9.5px; color: var(--mute); letter-spacing: .1em; }
.ui-shop h4 { font-size: 16px; font-weight: 700; line-height: 1.5; margin-top: 4px; }
.ui-shop__price { font: 600 22px var(--en); margin-top: 10px; }
.ui-shop__price small { font: 400 9px var(--jp); color: var(--sub); margin-left: 4px; }
.ui-shop__opt { margin-top: 12px; display: grid; gap: 6px; }
.ui-shop__opt div { border: 1px solid var(--line); padding: 5px 8px; font-size: 9.5px; display: flex; justify-content: space-between; color: var(--sub); }
.ui-shop__cart { margin-top: 14px; background: var(--blue); color: #fff; text-align: center; padding: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; }
.ui-shop__pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ui-shop__pay span { font-size: 8.5px; border: 1px solid var(--line); padding: 1px 6px; color: var(--sub); }
.ui-auc__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ui-auc__head b { font-size: 13px; letter-spacing: .06em; }
.ui-auc__head span { font: 500 9px var(--en); color: var(--mute); letter-spacing: .14em; }
.ui-auc__event { margin: 14px 18px; background: var(--soft); padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ui-auc__event small { display: block; font: 600 8.5px var(--en); letter-spacing: .2em; color: var(--mute); }
.ui-auc__event b { font-size: 13px; }
.ui-auc__clock { background: #fff; padding: 6px 12px; text-align: right; }
.ui-auc__clock small { font: 400 8.5px var(--jp); letter-spacing: 0; }
.ui-auc__clock b { font: 600 15px var(--en); }
.ui-auc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 18px 18px; }
.ui-auc__item { border: 1px solid var(--line); background: #fff; }
.ui-auc__item .ui-img { aspect-ratio: 1; position: relative; }
.ui-auc__item .ui-img::before { content: attr(data-no); position: absolute; left: 5px; top: 5px; background: #fff; font: 600 8px var(--en); padding: 1px 4px; }
.ui-auc__body { padding: 6px 8px 8px; }
.ui-auc__body small { font-size: 8px; color: var(--mute); display: block; }
.ui-auc__body b { display: block; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-auc__price { font: 600 13px var(--en); margin-top: 2px; }
.ui-auc__time { font: 600 9.5px var(--en); color: var(--ink-2); border-top: 1px solid var(--line); margin-top: 5px; padding-top: 4px; }
.ui-auc__time.is-hurry { color: #C2410C; }
@media (max-width: 600px) { .ui-auc__grid { grid-template-columns: repeat(2, 1fr) !important; } .ui-auc__item:nth-child(n+3) { display: none; } .ui-web__hero h4 { font-size: 15px; } }

/* ===== オークション特集（紺） ===== */
.auc-band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.auc-band h2 { font-size: clamp(26px, 3.1vw, 42px); font-weight: 700; line-height: 1.4; margin-top: 20px; letter-spacing: .04em; }
.auc-band p.lead { margin-top: 24px; color: rgba(255,255,255,.72); }
.facts { margin-top: 44px; border-top: 1px solid rgba(255,255,255,.15); }
.facts li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.facts li span { font-size: 14px; color: rgba(255,255,255,.8); }
.facts li b { font-family: var(--en); font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.01em; }
.facts li b small { font-family: var(--jp); font-size: 14px; font-weight: 500; margin-left: 4px; }
.auc-band__btns { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.sec--deep .frame { border-color: rgba(255,255,255,.1); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
@media (max-width: 900px) { .auc-band { grid-template-columns: 1fr; } }

/* ===== 強み（数字つきの3列） ===== */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.points li { padding: 40px 36px 10px 0; }
.points li + li { padding-left: 36px; border-left: 1px solid var(--line); }
.points__no { font-family: var(--en); font-size: 13px; font-weight: 600; color: var(--blue); }
.points h3 { font-size: clamp(19px, 1.9vw, 24px); font-weight: 700; margin-top: 28px; letter-spacing: .06em; line-height: 1.6; }
.points p { margin-top: 16px; color: var(--sub); font-size: 14px; }
@media (max-width: 860px) { .points { grid-template-columns: 1fr; } .points li, .points li + li { padding: 30px 0; border-left: 0; border-bottom: 1px solid var(--line); } .points h3 { margin-top: 12px; } }

/* ===== 流れ ===== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps li { position: relative; padding: 0 30px 0 0; }
.steps li::before { content: ""; display: block; height: 1px; background: var(--line-2); margin-bottom: 28px; }
.steps li::after { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.steps__no { font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--mute); }
.steps h3 { font-size: 18px; font-weight: 700; margin-top: 8px; letter-spacing: .06em; }
.steps p { font-size: 13.5px; color: var(--sub); margin-top: 10px; line-height: 1.85; }
@media (max-width: 1000px) { .steps, .steps--5 { grid-template-columns: 1fr 1fr; gap: 40px 0; } }
@media (max-width: 520px) { .steps, .steps--5 { grid-template-columns: 1fr; } }

/* ===== お問い合わせ（大きなリンク） ===== */
.contact-big { display: block; padding: clamp(80px, 11vw, 150px) 0; border-top: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--ease); }
.contact-big::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .8s var(--ease); z-index: -1; }
.contact-big:hover { color: #fff; }
.contact-big:hover::before { transform: none; }
.contact-big__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.contact-big__en { font-family: var(--en); font-size: clamp(64px, 12vw, 180px); font-weight: 600; line-height: .9; letter-spacing: -.05em; }
.contact-big__ja { margin-top: 26px; font-size: 15px; }
.contact-big__ja b { font-size: clamp(18px, 2vw, 24px); display: block; margin-bottom: 8px; letter-spacing: .06em; }
.contact-big__arrow { width: clamp(80px, 9vw, 130px); height: clamp(80px, 9vw, 130px); border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: transform .6s var(--ease), background .5s, color .5s; }
.contact-big__arrow svg { width: 30%; height: 30%; }
.contact-big:hover .contact-big__arrow { transform: rotate(-45deg); background: #fff; color: var(--ink); }

/* ===== フッター ===== */
.footer { background: var(--deep); color: rgba(255,255,255,.72); padding: 80px 0 34px; font-size: 13px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 50px; }
.footer .logo { color: #fff; }
.footer .logo__en { color: rgba(255,255,255,.45); }
.footer address { font-style: normal; margin-top: 24px; line-height: 2; }
.footer a:hover { color: #fff; }
.footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 40px; justify-content: end; align-content: start; }
.footer__nav a { display: inline-flex; align-items: center; gap: 10px; }
.footer__nav a::before { content: ""; width: 12px; height: 1px; background: rgba(255,255,255,.35); }
.footer__bottom { margin-top: 70px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 20px; font-family: var(--en); font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.4); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } .footer__nav { justify-content: start; } .footer__bottom { flex-direction: column; } }

/* ===== 下層ページ ===== */
.page-head { padding: 180px 0 clamp(60px, 8vw, 100px); border-bottom: 1px solid var(--line); }
.crumb { font-size: 12px; color: var(--mute); display: flex; gap: 10px; }
.crumb a:hover { color: var(--ink); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-top: 50px; }
.page-head__en { font-family: var(--en); font-size: clamp(56px, 9vw, 130px); font-weight: 600; line-height: .92; letter-spacing: -.045em; }
.page-head h1 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; margin-top: 22px; letter-spacing: .08em; }
.page-head__lead { color: var(--sub); max-width: 500px; justify-self: end; }
.page-head__lead b { display: block; color: var(--ink); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.7; margin-bottom: 16px; letter-spacing: .05em; }
.page-head--deep { background: var(--deep); color: #fff; border-bottom: 0; }
.page-head--deep .crumb, .page-head--deep .page-head__lead { color: rgba(255,255,255,.7); }
.page-head--deep .page-head__lead b { color: #fff; }
@media (max-width: 860px) { .page-head { padding-top: 130px; } .page-head__grid { grid-template-columns: 1fr; } .page-head__lead { justify-self: start; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.h2 { font-size: clamp(24px, 3vw, 38px); font-weight: 700; line-height: 1.55; letter-spacing: .05em; margin-top: 18px; }
.p-sub { color: var(--sub); margin-top: 22px; }
.mt-60 { margin-top: 60px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.grid-4 > div { padding: 32px 28px 36px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.grid-4__no { font-family: var(--en); font-size: 12px; font-weight: 600; color: var(--blue); }
.grid-4 h3 { font-size: 17px; font-weight: 700; margin-top: 16px; letter-spacing: .05em; line-height: 1.6; }
.grid-4 p { font-size: 13.5px; color: var(--sub); margin-top: 10px; line-height: 1.85; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.dl { border-top: 1px solid var(--line); margin: 0; }
.dl > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.dl dt { font-weight: 700; }
.dl dd { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .dl > div { grid-template-columns: 1fr; gap: 6px; } }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 20px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: 12px; font-weight: 500; color: var(--mute); letter-spacing: .1em; border-bottom-color: var(--line-2); }
.table thead th.is-pono { color: var(--blue); }
.table tbody th { font-weight: 700; width: 24%; }
.table td.is-pono { font-weight: 700; color: var(--blue); background: #F5F9FD; }
@media (max-width: 640px) { .table { font-size: 12.5px; } .table th, .table td { padding: 14px 8px; } }

.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.checks li { display: flex; gap: 16px; align-items: flex-start; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.checks li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.checks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--blue); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5FAD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }
@media (max-width: 700px) { .checks { grid-template-columns: 1fr; } .checks li:nth-child(even) { padding-left: 0; border-left: 0; } }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr 30px; align-items: center; padding: 26px 0; font-weight: 700; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--en); font-weight: 600; color: var(--blue); }
.faq summary i { position: relative; width: 14px; height: 14px; justify-self: end; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: var(--ink); transition: transform .4s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: none; }
.faq details p { padding: 0 30px 28px 40px; color: var(--sub); }

.price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.price > div { padding: 34px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.price span { font-size: 13px; color: var(--sub); }
.price b { display: block; font-family: var(--en); font-size: clamp(40px, 5vw, 60px); font-weight: 600; letter-spacing: -.02em; margin-top: 10px; line-height: 1.1; }
.price b small { font: 500 16px var(--jp); margin-left: 4px; }
.price p { font-size: 13px; color: var(--sub); margin-top: 8px; }
.price > div.is-main { background: var(--ink); color: #fff; }
.price > div.is-main span, .price > div.is-main p { color: rgba(255,255,255,.7); }
@media (max-width: 760px) { .price { grid-template-columns: 1fr; } }

.sim { margin-top: 60px; border: 1px solid var(--line); padding: clamp(26px, 4vw, 48px); background: #fff; }
.sim__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.sim__head h3 { font-size: 20px; font-weight: 700; letter-spacing: .05em; }
.sim__mode { display: inline-flex; border: 1px solid var(--line-2); }
.sim__mode button { border: 0; background: #fff; padding: 8px 16px; font-size: 13px; cursor: pointer; }
.sim__mode button.is-active { background: var(--ink); color: #fff; }
.sim__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 34px; }
.sim__amount { font-family: var(--en); font-size: clamp(36px, 5vw, 56px); font-weight: 600; letter-spacing: -.02em; }
.sim__amount small { font: 500 16px var(--jp); margin-left: 4px; }
.sim input[type=range] { width: 100%; margin-top: 14px; accent-color: var(--blue); }
.sim__bar { margin-top: 24px; }
.sim__bar-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--sub); }
.sim__bar-head b { font-family: var(--en); font-size: 17px; color: var(--ink); }
.sim__track { height: 8px; background: var(--soft); margin-top: 8px; }
.sim__fill { height: 100%; transition: width .5s var(--ease); }
.sim__fill--y { background: var(--line-2); }
.sim__fill--p { background: var(--blue); }
.sim label { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--sub); cursor: pointer; }
.sim__result { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; font-weight: 700; }
.sim__result b { font-family: var(--en); font-size: clamp(30px, 4vw, 46px); font-weight: 600; color: var(--blue); letter-spacing: -.02em; }
.sim__note { margin-top: 16px; font-size: 12px; color: var(--mute); line-height: 1.8; }

.form { max-width: 860px; }
.form__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.form__row:first-of-type { border-top: 1px solid var(--line); }
.form__label { font-weight: 700; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.form__req, .form__opt { font-size: 11px; font-weight: 500; padding: 1px 8px; }
.form__req { background: var(--ink); color: #fff; }
.form__opt { border: 1px solid var(--line-2); color: var(--sub); }
.form__err { display: block; width: 100%; font-size: 12.5px; color: #C2410C; font-weight: 700; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { width: 100%; font: 16px var(--jp); padding: 14px 16px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: 0; transition: border-color .2s; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form textarea { min-height: 200px; resize: vertical; }
.form__checks { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 12px; }
.form__checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.form__checks input, .form__agree input { accent-color: var(--ink); width: 16px; height: 16px; }
.form__agree { margin-top: 36px; font-size: 14px; }
.form__agree a { text-decoration: underline; }
.form__submit { margin-top: 30px; }
.form__submit .button { border: 0; cursor: pointer; font-family: var(--jp); font-size: 15px; }
.hp-field { position: absolute; left: -9999px; }
.notice { margin-bottom: 30px; padding: 18px 22px; border-left: 3px solid #C2410C; background: #FDF3EE; font-weight: 700; font-size: 14px; }
@media (max-width: 700px) { .form__row { grid-template-columns: 1fr; gap: 8px; } .form__label { padding-top: 0; } }

.prose { max-width: 820px; }
.prose h2 { font-size: 18px; font-weight: 700; margin: 44px 0 12px; letter-spacing: .05em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { list-style: disc; padding-left: 1.4em; }

.photo { position: relative; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 動き ===== */
.rv { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .1s; } .rv-d2 { transition-delay: .2s; } .rv-d3 { transition-delay: .3s; }
.mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease); }
.mask.is-in { clip-path: inset(0 0 0 0); }
.mask img { transform: scale(1.12); transition: transform 1.8s var(--ease); }
.mask.is-in img { transform: none; }

/* 確認用の静止画モード（?shot） */
.shot *, .shot *::before, .shot *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
.shot .rv, .shot .hero__text { opacity: 1 !important; transform: none !important; }
.shot .mask { clip-path: none !important; }
.shot .mask img { transform: none !important; }
.shot .hero__title .ln > span { transform: none !important; }
.shot .marquee__track { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .mask { clip-path: none; }
  .hero__title .ln > span { transform: none; }
  .hero__text { opacity: 1; }
}

/* 紺の見出しのページ：スクロール前のヘッダーを白に */
.is-dark-top .header:not(.is-scrolled) { color: #fff; }
.is-dark-top .header:not(.is-scrolled) .logo__en { color: rgba(255,255,255,.55); }
.is-dark-top .header:not(.is-scrolled) .nav__cta { background: #fff; color: var(--ink); }
.is-dark-top .header:not(.is-scrolled) .menu-btn { background: transparent; border-color: rgba(255,255,255,.4); }
.is-dark-top .header:not(.is-scrolled) .menu-btn span { background: #fff; }
.is-dark-top.is-menu-open .header { color: var(--ink); }

/* ===== v3.1 親しみやすさ（温かい白・やわらかい角・安心ポイント） ===== */
:root { --bg: #FDFCF9; --soft: #F5F1EA; --sky-soft: #EEF5FC; --radius: 18px; }
body { background: var(--bg); }
.header.is-scrolled { background: rgba(253,252,249,.92); }
.hero__canvas::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(253,252,249,0) 30%), linear-gradient(0deg, var(--bg) 0%, rgba(253,252,249,0) 22%); }
.entry { background: rgba(253,252,249,.8); }
.nav__cta, .button { border-radius: 999px; }
.button { min-width: 240px; height: 60px; padding: 0 12px 0 28px; }
.button svg { width: 40px; height: 40px; padding: 12px; border-radius: 50%; background: rgba(255,255,255,.14); }
.button--line svg, .button--white svg { background: rgba(15,27,39,.06); }
.menu-btn { border-radius: 50%; }
.frame { border-radius: 14px; }
.ui-phone { border-radius: 24px; }
.ui-img { border-radius: 6px; }
.ui-auc__item, .ui-shop__opt div { border-radius: 6px; }
.svc__tags li { border-radius: 999px; padding: 3px 14px; }
.grid-4 { border: 0; gap: 14px; }
.grid-4 > div { border: 0; border-radius: var(--radius); box-shadow: 0 1px 0 rgba(15,27,39,.04); }
.sec--soft .grid-4 > div { background: #fff; }
.price { border: 0; gap: 14px; }
.price > div { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.sim, .notice { border-radius: var(--radius); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { border-radius: 10px; }
.form__req, .form__opt { border-radius: 999px; }
.table { background: #fff; border-radius: var(--radius); overflow: hidden; }
.photo { border-radius: var(--radius); }
.sec--soft { background: var(--soft); }
.sec--sky { background: var(--sky-soft); }

/* 安心ポイント */
.assure { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.assure li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.assure li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sec--deep .assure li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }

/* よくいただくご相談 */
.worries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.worry { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 26px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.worry:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(15,27,39,.3); border-color: transparent; }
.worry__q { position: relative; font-size: 16px; font-weight: 700; line-height: 1.7; padding: 16px 18px; background: var(--sky-soft); border-radius: 14px; }
.worry__q::after { content: ""; position: absolute; left: 26px; bottom: -9px; border: 10px solid transparent; border-bottom: 0; border-top-color: var(--sky-soft); }
.worry__a { margin-top: 8px; font-size: 13.5px; color: var(--sub); line-height: 1.85; }
.worry__to { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--blue); }
.worry__to svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.worry:hover .worry__to svg { transform: translateX(4px); }
@media (max-width: 900px) { .worries { grid-template-columns: 1fr; } }

/* 手描き風の線画 */
.illust { display: block; width: 100%; height: auto; }
.svc__illust { width: min(220px, 60%); margin-bottom: 18px; }
.entry__illust { position: absolute; right: 20px; bottom: 16px; width: 86px; opacity: .95; pointer-events: none; }
.hero__illust { position: absolute; right: var(--pad); top: 150px; width: min(40vw, 520px); z-index: 1; }
@media (max-width: 900px) { .hero__illust { position: static; width: min(80vw, 420px); margin: 30px auto 0; } .entry__illust { width: 64px; } }

/* お問い合わせをやわらかく */
.contact-soft { padding: clamp(80px, 10vw, 130px) 0; }
.contact-soft__box { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding: clamp(36px, 6vw, 80px); border-radius: 28px; background: var(--deep); color: #fff; overflow: hidden; }
.contact-soft__box::before { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(60,127,208,.45), transparent 70%); }
.contact-soft h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.45; letter-spacing: .04em; margin-top: 18px; }
.contact-soft p { margin-top: 18px; color: rgba(255,255,255,.75); }
.contact-soft__btns { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.contact-soft__illust { position: relative; max-width: 360px; justify-self: center; filter: brightness(0) invert(1); opacity: .92; }
@media (max-width: 860px) { .contact-soft__box { grid-template-columns: 1fr; } .contact-soft__illust { max-width: 240px; } }
.contact-soft__illust { filter: none; opacity: 1; background: #fff; border-radius: 50%; padding: 12%; aspect-ratio: 1; object-fit: contain; width: 100%; }
.hero__canvas { opacity: .55; }
.contact-soft .assure li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }

/* ===================================================================
   v5 目を引くファーストビューと、細かい作り込み
   =================================================================== */
:root { --pop: #FFC857; --coral: #F28B6B; }

/* --- 読み込み演出 --- */
.loader { position: fixed; inset: 0; z-index: 999; background: var(--bg); display: grid; place-items: center; transition: opacity .7s var(--ease), visibility .7s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 16px; }
.loader__logo { width: 76px; height: 76px; border-radius: 50%; animation: loaderPop .9s var(--ease) both; }
.loader__wave { width: 150px; height: 20px; }
.loader__wave path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw 1.1s .2s var(--ease) forwards; }
@keyframes loaderPop { from { transform: scale(.6); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.shot .loader { display: none; }

/* --- 読んだところまでの線 --- */
.progress { position: fixed; left: 0; top: 0; z-index: 200; height: 3px; width: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-2)); transform-origin: left; transform: scaleX(0); }

/* --- ヒーロー v5 --- */
.hero5 { position: relative; padding: 140px 0 0; overflow: hidden; background:
  radial-gradient(circle at 1px 1px, rgba(29,95,173,.13) 1px, transparent 0) 0 0 / 26px 26px, var(--bg); }
.hero5::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(0deg, var(--bg), rgba(253,252,249,0)); pointer-events: none; }
.hero5__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 600px; }
.hero5 .hero__title { font-size: clamp(36px, 5vw, 70px); margin-top: 26px; }
.hero5__rotate { margin-top: 26px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rot { position: relative; display: inline-grid; height: 1.9em; overflow: hidden; vertical-align: middle; }
.rot b { grid-area: 1 / 1; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; white-space: nowrap; transform: translateY(110%); transition: transform .7s var(--ease); }
.rot b.is-on { transform: none; }
.rot b.is-out { transform: translateY(-110%); }
.hero5__btns { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero5 .assure { margin-top: 22px; }

/* ステージ */
.stage { position: relative; aspect-ratio: 1 / .92; }
.stage__blob { position: absolute; inset: 6% 4% 4% 6%; background: linear-gradient(145deg, #DCEBFA, #EEF5FC 60%, #FFF4DD); border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; animation: morph 14s ease-in-out infinite alternate; }
@keyframes morph {
  33% { border-radius: 42% 58% 38% 62% / 55% 40% 60% 45%; }
  66% { border-radius: 60% 40% 48% 52% / 40% 60% 42% 58%; }
  100% { border-radius: 48% 52% 62% 38% / 58% 44% 56% 42%; }
}
.stage__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(29,95,173,.28); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage__illust { position: absolute; left: 7%; right: 5%; bottom: 10%; width: 88%; filter: drop-shadow(0 24px 30px rgba(15,27,39,.08)); }
.toast { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(15,27,39,.28), 0 0 0 1px rgba(15,27,39,.04); font-size: 13px; line-height: 1.45; white-space: nowrap; animation: toastIn .9s var(--ease) both, bob 6s ease-in-out infinite; }
.toast i { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--blue); }
.toast i svg { width: 18px; height: 18px; }
.toast small { display: block; color: var(--sub); font-size: 11.5px; }
.toast b { font-family: var(--en); }
.toast--1 { left: -6%; top: 16%; animation-delay: .7s, 0s; }
.toast--2 { right: -4%; top: 4%; animation-delay: 1s, -2s; }
.toast--2 i { background: var(--coral); }
.toast--3 { right: 2%; bottom: 4%; animation-delay: 1.3s, -4s; }
.toast--3 i { background: #2E9E6A; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes bob { 50% { translate: 0 -8px; } }
.doodle { position: absolute; z-index: 1; color: var(--blue); pointer-events: none; }
.doodle svg { width: 100%; height: 100%; display: block; }
.doodle--spark1 { width: 34px; left: 2%; top: 4%; color: var(--pop); animation: twinkle 3s ease-in-out infinite; }
.doodle--spark2 { width: 22px; right: 16%; top: 30%; animation: twinkle 3.6s .8s ease-in-out infinite; }
.doodle--spark3 { width: 18px; left: 18%; bottom: 8%; color: var(--coral); animation: twinkle 2.8s .4s ease-in-out infinite; }
.doodle--heart { width: 26px; right: 30%; top: 12%; color: var(--coral); animation: bob 5s ease-in-out infinite; }
.doodle--squig { width: 90px; left: -2%; bottom: 26%; animation: bob 7s -1s ease-in-out infinite; }
.doodle--dots { width: 70px; right: -2%; bottom: 30%; color: var(--sky); }
@keyframes twinkle { 50% { transform: scale(.6) rotate(20deg); opacity: .6; } }

/* 回る文字のバッジ */
.badge-rot { position: relative; display: inline-grid; place-items: center; width: 112px; height: 112px; flex: none; }
.badge-rot svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.badge-rot text { font: 600 10.5px var(--en); letter-spacing: 2.6px; fill: var(--ink); }
.badge-rot span { width: 52px; height: 52px; border-radius: 50%; background: var(--pop); display: grid; place-items: center; color: var(--ink); transition: transform .5s var(--ease), background .4s; }
.badge-rot span svg { width: 18px; height: 18px; }
.badge-rot:hover span { transform: rotate(-45deg) scale(1.08); background: var(--blue); color: #fff; }
.hero5__badge { position: absolute; left: 44%; bottom: 40px; z-index: 3; }

/* 斜めに流れる帯 */
.band { position: relative; z-index: 2; margin: 30px 0 10px; height: 150px; overflow: hidden; }
.band__row { position: absolute; left: -5%; right: -5%; white-space: nowrap; overflow: hidden; }
.band__row--1 { top: 36px; transform: rotate(-3deg); background: var(--blue); color: #fff; padding: 14px 0; box-shadow: 0 12px 30px -16px rgba(29,95,173,.6); }
.band__row--2 { top: 44px; transform: rotate(2.4deg); background: var(--pop); color: var(--ink); padding: 10px 0; z-index: -1; }
.band__track { display: inline-flex; animation: marquee 30s linear infinite; font: 600 clamp(20px, 2.4vw, 30px) var(--en); letter-spacing: .02em; }
.band__row--2 .band__track { animation-direction: reverse; animation-duration: 38s; font-size: clamp(14px, 1.4vw, 17px); }
.band__track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; }
.band__track span::after { content: "✦"; font-size: .7em; opacity: .85; }
.shot .band__track, .shot .stage__blob, .shot .stage__ring, .shot .badge-rot svg.ring { animation: none !important; }

@media (max-width: 960px) {
  .hero5 { padding-top: 110px; }
  .hero5__grid { grid-template-columns: 1fr; min-height: 0; }
  .stage { max-width: 520px; width: 100%; margin: 20px auto 0; }
  .toast { font-size: 11.5px; padding: 9px 12px 9px 9px; }
  .toast i { width: 30px; height: 30px; }
  .toast--1 { left: 0; } .toast--2 { right: 0; }
  .hero5__badge { display: none; }
  .band { height: 120px; }
}

/* --- セクションの飾り --- */
.wdiv { display: block; width: 100%; height: clamp(30px, 4vw, 60px); margin-bottom: -1px; }
.wdiv--bottom { margin: -1px 0 0; transform: scaleY(-1); }
.sec--sky { background: radial-gradient(circle at 1px 1px, rgba(29,95,173,.12) 1px, transparent 0) 0 0 / 24px 24px, var(--sky-soft); }
.sec-title .mark { background: linear-gradient(transparent 62%, rgba(255,200,87,.55) 62%) no-repeat 0 0 / 0% 100%; transition: background-size 1.2s .3s var(--ease); }
.rv.is-in .sec-title .mark, .rv.is-in .mark { background-size: 100% 100%; }
.shot .mark { background-size: 100% 100% !important; }
.label::after { content: ""; width: 14px; height: 14px; margin-left: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.6 5.6 2.4 8.9 11 11-8.6 2.1-10.4 5.4-11 11-.6-5.6-2.4-8.9-11-11 8.6-2.1 10.4-5.4 11-11z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.6 5.6 2.4 8.9 11 11-8.6 2.1-10.4 5.4-11 11-.6-5.6-2.4-8.9-11-11 8.6-2.1 10.4-5.4 11-11z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .55; }
.svc__row { position: relative; }
.svc__row::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--blue); transition: width 1.2s var(--ease); }
.svc__row:hover::before { width: 100%; }
.svc__no { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; padding-top: 0 !important; background: #fff; }
.points__no, .grid-4__no { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sky-soft); }
.worry__q::before { content: "Q"; position: absolute; left: -10px; top: -12px; width: 30px; height: 30px; border-radius: 50%; background: var(--pop); color: var(--ink); font: 700 13px var(--en); display: grid; place-items: center; }
.worry { overflow: visible; }

/* ボタンの中で色が広がる */
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ""; position: absolute; inset: 0; background: var(--blue); border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); z-index: -1; }
.button:hover::before { transform: scaleX(1); transform-origin: left; }
.button:hover { background: var(--ink); }
.button--line:hover, .button--white:hover { color: #fff; }
.button--white::before { background: var(--blue); }
.button--pop { background: var(--pop); color: var(--ink); }
.button--pop svg { background: rgba(15,27,39,.08); }

/* 上に戻る・スマホの固定ボタン */
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -12px rgba(15,27,39,.3); display: grid; place-items: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s, transform .4s var(--ease); }
.to-top.is-show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.sp-cta { display: none; }
@media (max-width: 760px) {
  .sp-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: 0 16px 30px -12px rgba(15,27,39,.5); transform: translateY(90px); transition: transform .5s var(--ease); }
  .sp-cta.is-show { transform: none; }
  .sp-cta em { font-style: normal; font-size: 11px; background: var(--pop); color: var(--ink); border-radius: 999px; padding: 2px 8px; }
  .to-top { bottom: 80px; right: 14px; width: 46px; height: 46px; }
}

/* 水色・砂色のセクションの上下を波に */
.sec--soft, .sec--sky { position: relative; }
.sec--soft::before, .sec--sky::before, .sec--soft::after, .sec--sky::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(26px, 3.4vw, 50px); background: inherit; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 180 8, 360 8, 540 30 S 900 56, 1080 30 S 1320 6, 1440 22 V60 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 180 8, 360 8, 540 30 S 900 56, 1080 30 S 1320 6, 1440 22 V60 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.sec--soft::before, .sec--sky::before { bottom: calc(100% - 1px); }
.sec--soft::after, .sec--sky::after { top: calc(100% - 1px); transform: scaleY(-1) scaleX(-1); z-index: 1; }
.hero5 .hero__title { font-size: clamp(30px, 4.3vw, 62px); }
.hero5 .hero__title .ln > span { white-space: nowrap; }
@media (min-width: 961px) { .hero5__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
@media (max-width: 420px) { .hero5 .hero__title { font-size: 8.4vw; } }

@media (max-width: 960px) { .hero5 .hero__title { font-size: clamp(28px, 7.4vw, 48px); } .stage { margin-top: 10px; } .toast--3 { right: 0; bottom: 0; } }

/* ===================================================================
   v6 ベネフィットのスライドショー・さらに細かい作り込み
   =================================================================== */
.slider { position: relative; padding: 4% 3% 0 6%; }
.slider__deco { position: absolute; inset: 0 0 12% 18%; border-radius: 34px; background: linear-gradient(145deg, #DCEBFA, #EEF5FC 60%, #FFF4DD); transform: rotate(3deg); }
.slider__frame { position: relative; aspect-ratio: 4 / 3.25; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(15,27,39,.45); background: #E9EEF3; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.slide.is-active { opacity: 1; z-index: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.slide.is-active img { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,30,49,.55) 0%, rgba(11,30,49,0) 45%); }
.slide__cap { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 2; color: #fff; }
.slide__svc { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); padding: 4px 12px; border-radius: 999px; }
.slide__svc b { font-family: var(--en); color: var(--pop); }
.slide__benefit { margin-top: 10px; font-size: clamp(22px, 2.5vw, 34px); font-weight: 700; line-height: 1.4; letter-spacing: .05em; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.slide__benefit > span { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.slide.is-active .slide__benefit > span { opacity: 1; transform: none; transition-delay: .35s; }
.slide.is-active .slide__benefit > span + span { transition-delay: .5s; }
.slider .toast { position: absolute; top: 9%; right: 0; left: auto; bottom: auto; z-index: 3; animation: none; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.slider .toast.is-active { opacity: 1; transform: none; transition-delay: .6s; }
.slider .toast.is-active { animation: bob 6s 1.2s ease-in-out infinite; }
.slider__nav { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.slider__nav button { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--mute); transition: color .3s; }
.slider__nav button span { display: block; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.slider__nav button span i { display: block; height: 100%; width: 0; background: var(--blue); }
.slider__nav button.is-active { color: var(--ink); }
.slider__nav button.is-active span i { animation: fillBar var(--dur, 5.5s) linear forwards; }
.slider__nav button.is-done span i { width: 100%; }
.slider__nav small { display: block; font: 600 10px var(--en); letter-spacing: .14em; color: var(--blue); }
@keyframes fillBar { to { width: 100%; } }
.slider .doodle--spark1 { left: 0; top: 0; }
.slider .doodle--heart { right: 8%; top: auto; bottom: 22%; }
.slider .doodle--squig { left: -4%; bottom: 18%; z-index: 4; }
.slider .doodle--dots { right: -3%; bottom: 40%; }
.slider__badge { position: absolute; left: -4%; top: 40%; z-index: 4; }
.shot .slide img { transform: none !important; }
.shot .slide__benefit > span, .shot .slider .toast.is-active { opacity: 1 !important; transform: none !important; }
@media (max-width: 960px) {
  .slider { padding: 3% 0 0; margin-top: 10px; }
  .slider__deco { inset: 0 -3% 14% 10%; }
  .slider__nav { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .slider__badge { display: none; }
  .slider .toast { right: 8px; top: 12px; }
}

/* ぐっと細かく：カーソルの輪（パソコンのみ） */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid var(--blue); pointer-events: none; opacity: 0; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, opacity .3s; mix-blend-mode: multiply; }
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(29,95,173,.1); border-color: transparent; }
@media (hover: none), (max-width: 960px) { .cursor { display: none; } }

/* 画面見本はマウスで少し傾く */
.tilt { transition: transform .6s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* 下層ページの見出しに線画と飾り */
.page-head { position: relative; overflow: hidden; }
.page-head__illust { position: absolute; right: calc(var(--pad) + 2%); top: 110px; width: min(26vw, 300px); opacity: .95; pointer-events: none; }
.page-head--deep .page-head__illust { filter: brightness(0) invert(1); opacity: .22; }
.page-head .doodle { position: absolute; }
.page-head__grid { position: relative; z-index: 1; }
@media (max-width: 860px) { .page-head__illust { width: 120px; top: 90px; opacity: .5; } }

/* フッターに大きなロゴ文字と波 */
.footer { position: relative; overflow: hidden; }
.footer__big { font-family: var(--en); font-weight: 600; font-size: clamp(80px, 17vw, 260px); line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); margin: 50px 0 -24px; white-space: nowrap; user-select: none; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 40px; background: var(--bg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V22 C 1320 6, 1080 30, 1080 30 S 900 56, 540 30 S 180 8, 0 38 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V22 C 1320 6, 1080 30, 1080 30 S 900 56, 540 30 S 180 8, 0 38 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* 見出しの文字がすっと上がる */
.sec-title { overflow: hidden; }
.rv .sec-title, .rv .h2 { transform: translateY(20px); opacity: 0; transition: transform 1s .1s var(--ease), opacity 1s .1s var(--ease); }
.rv.is-in .sec-title, .rv.is-in .h2 { transform: none; opacity: 1; }
.shot .rv .sec-title, .shot .rv .h2 { transform: none !important; opacity: 1 !important; }

/* リンクの下線がのびる */
.link-line { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .5s var(--ease); }
.link-line:hover { background-size: 100% 1px; }
.page-head__illust { top: 84px; width: min(17vw, 210px); right: calc(var(--pad) + 1%); }
.page-head--deep .page-head__illust { display: none; }
@media (max-width: 860px) { .page-head__illust { width: 96px; top: 76px; opacity: .8; } }

/* ===================================================================
   v7 各項目の作り込み
   =================================================================== */
.ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--sky-soft); color: var(--blue); flex: none; transition: transform .5s var(--ease), background .4s, color .4s; }
.ico svg { width: 26px; height: 26px; }

/* 3つの柱の入口カード */
.pillars2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pcard { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 330px; padding: 30px 30px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); transition: color .5s var(--ease), border-color .5s, transform .5s var(--ease); }
.pcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--deep); clip-path: circle(0% at 100% 0%); transition: clip-path .9s var(--ease); }
.pcard:hover { color: #fff; border-color: var(--deep); transform: translateY(-6px); }
.pcard:hover::before { clip-path: circle(150% at 100% 0%); }
.pcard__num { position: absolute; right: 18px; top: 4px; font: 600 110px/1 var(--en); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--line-2); transition: -webkit-text-stroke-color .5s; }
.pcard:hover .pcard__num { -webkit-text-stroke-color: rgba(255,255,255,.25); }
.pcard__illust { width: 140px; margin: 10px 0 18px; transition: transform .6s var(--ease), filter .5s; }
.pcard:hover .pcard__illust { transform: rotate(-4deg) scale(1.05); filter: brightness(0) invert(1); }
.pcard__en { font: 600 11px var(--en); letter-spacing: .18em; color: var(--blue); transition: color .4s; }
.pcard:hover .pcard__en { color: var(--pop); }
.pcard h3 { font-size: 22px; font-weight: 700; letter-spacing: .05em; margin-top: 6px; }
.pcard p { font-size: 13.5px; color: var(--sub); margin-top: 8px; line-height: 1.85; transition: color .4s; }
.pcard:hover p { color: rgba(255,255,255,.75); }
.pcard__go { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; }
.pcard__go i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink); transition: background .4s, transform .5s var(--ease); }
.pcard__go i svg { width: 14px; height: 14px; }
.pcard:hover .pcard__go i { background: var(--pop); transform: rotate(-45deg); }
.pillars2__more { margin-top: 18px; display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-radius: 18px; border: 1px dashed var(--line-2); font-size: 14px; color: var(--sub); }
.pillars2__more b { color: var(--ink); }
@media (max-width: 900px) { .pillars2 { grid-template-columns: 1fr; } .pcard { min-height: 0; } }

/* Ponoの紹介（写真と言葉） */
.about2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.about2__visual { position: relative; }
.about2__photo { border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 4.4; }
.about2__photo img { width: 100%; height: 100%; object-fit: cover; }
.about2__word { position: absolute; left: -4%; bottom: -6%; font: 600 clamp(80px, 11vw, 150px)/.8 var(--en); letter-spacing: -.05em; color: var(--ink); text-shadow: 0 0 0 transparent; mix-blend-mode: normal; }
.about2__word::after { content: ""; display: block; height: 10px; margin-top: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7c8-8 14 8 22 0s14 8 22 0 14 8 22 0 14 8 22 0 8 4 10 2' fill='none' stroke='%23FFC857' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.about2__badge { position: absolute; right: -4%; top: -5%; }
.about2__badge .badge-rot { width: 128px; height: 128px; }
.about2__badge .badge-rot span { width: 62px; height: 62px; background: #fff; box-shadow: 0 10px 20px -10px rgba(15,27,39,.3); overflow: hidden; }
.about2__badge .badge-rot span img { width: 100%; height: 100%; }
.about2 h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1.75; letter-spacing: .05em; margin-top: 20px; }
.about2 p { margin-top: 22px; color: var(--sub); }
.meaning { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.meaning li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.meaning li b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-soft); color: var(--blue); font: 600 11px var(--en); }
.about2 .more { margin-top: 36px; }
@media (max-width: 860px) { .about2 { grid-template-columns: 1fr; } .about2__visual { margin: 0 4% 40px; } }

/* チャット風のご相談 */
.chat { display: grid; gap: 28px; max-width: 980px; margin: 0 auto; }
.chat__pair { display: grid; gap: 12px; }
.bubble { position: relative; max-width: 78%; padding: 18px 22px; border-radius: 22px; line-height: 1.8; }
.bubble--q { justify-self: start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; font-weight: 700; font-size: clamp(15px, 1.5vw, 17px); padding-left: 64px; }
.bubble--q::before { content: ""; position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B77' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.bubble--q small { display: block; font-size: 11px; font-weight: 500; color: var(--mute); letter-spacing: .1em; }
.bubble--a { justify-self: end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; padding-right: 66px; font-size: 14.5px; }
.bubble--a::after { content: ""; position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; background: #fff url(/assets/img/pono-logo.png) center / cover no-repeat; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.bubble--a a { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; font-size: 13px; color: var(--pop); }
.bubble--a a svg { width: 13px; height: 13px; }
.typing { display: inline-flex; gap: 4px; padding: 14px 18px; border-radius: 18px; background: rgba(29,95,173,.12); justify-self: end; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: .4; } }
.chat .rv .bubble--a { transition: opacity .8s .5s var(--ease), transform .8s .5s var(--ease); }
@media (max-width: 700px) { .bubble { max-width: 92%; } }

/* サービス行の大きな数字 */
.svc__row { overflow: hidden; }
.svc__row::after { content: attr(data-num); position: absolute; right: -1%; bottom: -30px; z-index: -1; font: 600 clamp(140px, 18vw, 260px)/1 var(--en); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(29,95,173,.12); pointer-events: none; }
.svc { position: relative; z-index: 0; }
.gain { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #FFF4DD; font-size: 13px; font-weight: 700; }
.gain i { width: 26px; height: 26px; border-radius: 50%; background: var(--pop); display: grid; place-items: center; }
.gain i svg { width: 14px; height: 14px; }

/* 入札が流れる一覧 */
.ticker { margin-top: 30px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.ticker__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font: 600 11px var(--en); letter-spacing: .16em; color: rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.1); }
.ticker__head b { display: inline-flex; align-items: center; gap: 6px; color: #7BE0A5; }
.ticker__head b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.ticker ul { height: 150px; position: relative; }
.ticker li { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 11px 18px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.06); transition: transform .7s var(--ease), opacity .7s; }
.ticker li b { font-family: var(--en); font-size: 15px; }
.ticker li small { color: rgba(255,255,255,.5); font-size: 11px; }
.ticker li.is-new { animation: tickIn .7s var(--ease); background: rgba(255,200,87,.08); }
@keyframes tickIn { from { opacity: 0; transform: translateY(-100%); } }

/* 選ばれる理由のカード */
.whys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.why { position: relative; padding: 34px 30px; border-radius: 24px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; }
.why:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(15,27,39,.3); }
.why:hover .ico { background: var(--blue); color: #fff; transform: rotate(-8deg); }
.why__no { position: absolute; right: 24px; top: 20px; font: 600 13px var(--en); color: var(--mute); }
.why h3 { font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; margin-top: 24px; line-height: 1.6; letter-spacing: .05em; }
.why p { font-size: 14px; color: var(--sub); margin-top: 12px; }
.why__foot { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--blue); }
@media (max-width: 860px) { .whys { grid-template-columns: 1fr; } }

/* 流れのタイムライン */
.tl { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; }
.tl__line { position: absolute; left: 32px; right: 32px; top: 32px; height: 2px; background: var(--line); }
.tl__line i { display: block; height: 100%; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease); }
.tl.is-in .tl__line i, .shot .tl__line i { transform: none; }
.tl li { position: relative; }
.tl__dot { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue); display: grid; place-items: center; }
.tl__dot svg { width: 26px; height: 26px; }
.tl li:last-child .tl__dot { background: var(--blue); color: #fff; }
.tl__no { display: block; margin-top: 20px; font: 600 12px var(--en); letter-spacing: .16em; color: var(--mute); }
.tl h3 { font-size: 18px; font-weight: 700; margin-top: 4px; letter-spacing: .05em; }
.tl p { font-size: 13.5px; color: var(--sub); margin-top: 8px; line-height: 1.85; }
.tl__tag { display: inline-block; margin-top: 12px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
@media (max-width: 900px) {
  .tl { grid-template-columns: 1fr; gap: 30px; }
  .tl__line { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; }
  .tl__line i { transform: scaleY(0); transform-origin: top; }
  .tl li { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; }
  .tl__dot { grid-row: span 4; }
  .tl__no { margin-top: 0; }
}

/* 下層：アイコンつきの特徴 */
.feats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; }
.feat { padding: 30px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s; }
.feat:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -28px rgba(15,27,39,.35); }
.feat:hover .ico { background: var(--blue); color: #fff; transform: rotate(-8deg); }
.feat h3 { font-size: 17px; font-weight: 700; margin-top: 20px; letter-spacing: .05em; line-height: 1.6; }
.feat p { font-size: 13.5px; color: var(--sub); margin-top: 8px; line-height: 1.85; }
@media (max-width: 1000px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feats { grid-template-columns: 1fr; } }

/* 下層：ベネフィットの帯（写真） */
.gainband { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-radius: 30px; overflow: hidden; background: var(--deep); color: #fff; }
.gainband__photo { position: relative; min-height: 420px; }
.gainband__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gainband__body { padding: clamp(34px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.gainband h2 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; line-height: 1.45; letter-spacing: .04em; margin-top: 16px; }
.gainband ul { margin-top: 28px; display: grid; gap: 12px; }
.gainband li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: rgba(255,255,255,.85); }
.gainband li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--pop) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B27' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 860px) { .gainband { grid-template-columns: 1fr; } .gainband__photo { min-height: 260px; } }

/* 数えるまでの初期表示 */
.shot [data-countup] { }
.footer__big { font-size: clamp(44px, 10vw, 168px); }

/* スマホの細部（10/1） */
.button { white-space: nowrap; }
.gainband__body li, .ui-web__hero h4, .ui-phone__body b { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .page-head .doodle { left: auto !important; right: 28px; top: 96px !important; }
  .page-head .doodle + .doodle { right: 14px; top: 124px !important; }
}
@media (max-width: 600px) {
  .button { min-width: 0; gap: 18px; }
  .ui-web__hero { grid-template-columns: 1.1fr 1fr; }
}

/* ===================================================================
   工房感（10/1）：作業机の写真・マスキングテープ・方眼・紙の質感
   =================================================================== */
:root { --wood: #B07A4A; --tape: rgba(236, 222, 190, .82); }

/* マスキングテープ */
.tape { position: absolute; z-index: 5; width: 108px; height: 30px; background: var(--tape); box-shadow: 0 1px 2px rgba(60,40,10,.12);
  clip-path: polygon(0 0, 3px 12%, 0 25%, 3px 38%, 0 50%, 3px 62%, 0 75%, 3px 88%, 0 100%, 100% 100%, calc(100% - 3px) 88%, 100% 75%, calc(100% - 3px) 62%, 100% 50%, calc(100% - 3px) 38%, 100% 25%, calc(100% - 3px) 12%, 100% 0);
  pointer-events: none; }
.tape::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 7px); }
.tape--about { left: 8%; top: -12px; transform: rotate(-6deg); }
.about2__visual { position: relative; }

/* 工房のコーナー：作業机の写真＋紙のカード */
.kobo { position: relative; margin: 30px 0 clamp(40px, 6vw, 90px); }
.kobo__photo { height: clamp(380px, 46vw, 620px); overflow: hidden; }
.kobo__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.kobo__inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.kobo__card { position: relative; pointer-events: auto; width: min(520px, 46%); background: #FFFDF8; padding: clamp(30px, 3.4vw, 46px); border-radius: 6px; transform: rotate(1.2deg);
  box-shadow: 0 30px 60px -30px rgba(60,40,10,.45), 0 2px 6px rgba(60,40,10,.08);
  background-image: linear-gradient(rgba(29,95,173,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(29,95,173,.06) 1px, transparent 1px); background-size: 22px 22px; }
.kobo__card .tape--l { left: -26px; top: 14px; transform: rotate(-38deg); }
.kobo__card .tape--r { right: -26px; top: 14px; transform: rotate(38deg); }
.kobo__card h2 { font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; line-height: 1.6; letter-spacing: .05em; margin-top: 16px; }
.kobo__card > p:not(.label) { margin-top: 18px; color: var(--sub); font-size: 15px; }
.kobo__steps { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: 24px; counter-reset: k; }
.kobo__steps li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 10px 5px 7px; border: 1px dashed rgba(176,122,74,.55); border-radius: 999px; background: #fff; }
.kobo__steps li + li::before { content: "→"; margin: 0 6px 0 -2px; color: var(--wood); font-weight: 400; order: -1; display: none; }
.kobo__steps b { font: 600 10px var(--en); color: #fff; background: var(--wood); border-radius: 999px; padding: 2px 6px; letter-spacing: .06em; }
@media (max-width: 860px) {
  .kobo { margin-top: 10px; }
  .kobo__photo { height: 300px; }
  .kobo__inner { position: relative; inset: auto; display: block; margin-top: -90px; }
  .kobo__card { width: auto; transform: rotate(.8deg); margin: 0 4px; }
}

/* 紙の質感（やわらかい色の帯に、ほんのり繊維） */
.sec--soft { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 方眼（設計図・カッターマットのような細い線） */
.sec--sky { background: linear-gradient(rgba(29,95,173,.07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(29,95,173,.07) 1px, transparent 1px) 0 0 / 24px 24px, var(--sky-soft); }
@media (min-width: 761px) {
  .hero5 { background: linear-gradient(rgba(29,95,173,.06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(29,95,173,.06) 1px, transparent 1px) 0 0 / 28px 28px, var(--bg); }
}

/* ===================================================================
   ファーストビューをシンプルに（10/6）：白地＋大きな文字＋角丸の写真1枠
   =================================================================== */
.hero5 { background: var(--bg); padding-top: 150px; }
.hero5::after, .hero5__badge, .slider .toast, .slider .doodle, .slider__deco, .slider__badge, .hero5 .assure { display: none !important; }
.hero5__grid { gap: 60px; min-height: 0; padding-bottom: 40px; }
.hero5 .label { letter-spacing: .24em; }
.hero5 .hero__title { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.45; letter-spacing: .03em; }
.hero5 .hero__title em { color: var(--blue); }
.hero5__rotate { font-weight: 500; color: var(--sub); font-size: clamp(14px, 1.2vw, 16px); }
.rot b { background: none; color: var(--ink); padding: 0; border-bottom: 2px solid var(--blue); border-radius: 0; font-weight: 700; }
.hero5__btns { margin-top: 36px; }
.slider { padding: 0; }
.slider__frame { aspect-ratio: 4 / 4.6; border-radius: 22px; box-shadow: none; }
.slide::after { background: linear-gradient(0deg, rgba(11,30,49,.45) 0%, rgba(11,30,49,0) 40%); }
.slide__cap { left: 22px; right: 22px; bottom: 20px; }
.slide__svc { background: rgba(255,255,255,.92); color: var(--ink); border: 0; backdrop-filter: none; }
.slide__svc b { color: var(--blue); }
.slide__benefit { font-size: clamp(20px, 2vw, 28px); }
.slider__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.slider__nav button { font-size: 11.5px; font-weight: 500; }
.slider__nav small { display: none; }
@media (max-width: 960px) {
  .hero5 { padding-top: 104px; }
  .hero5__grid { display: flex; flex-direction: column; gap: 30px; }
  .hero5 .hero__title { font-size: clamp(30px, 8.6vw, 44px); margin-top: 14px; }
  .hero5__rotate { margin-top: 16px; font-size: 14px; }
  .hero5__btns { margin-top: 24px; flex-wrap: nowrap; gap: 10px; }
  .hero5__btns .button { flex: 1 1 0; min-width: 0; height: 54px; padding: 0 8px 0 18px; gap: 6px; font-size: 13.5px; }
  .hero5__btns .button svg { flex: none; width: 34px; height: 34px; padding: 10px; }
  .slider { width: 100%; max-width: 560px; margin: 0; }
  .slider__frame { aspect-ratio: 4 / 3.4; border-radius: 18px; }
  .slider__nav button { white-space: nowrap; font-size: 10.5px; }
  .slide__benefit { font-size: 19px; }
}
@media (max-width: 400px) { .hero5__btns .button--line svg { display: none; } .hero5__btns .button--line { justify-content: center; padding: 0 10px; } }
@media (max-width: 340px) { .hero5__btns .button { justify-content: center; padding: 0 8px; } .hero5__btns .button svg { display: none; } }
.hero5__rotate { display: block; line-height: 1.9; max-width: 520px; }
.hero5__rotate span { display: inline-block; } @media (min-width: 961px) { .hero5__rotate { max-width: 460px; } }

/* ===================================================================
   ヘッダーとファーストビュー（10/6 v2）
   ・ヘッダー：英字なし・社名を大きく・PCは白いカプセル、スマホは丸いMENUボタン
   ・FV：角丸の大きな写真枠＋左下に食い込む白いカード（参考：NIAHO・松栄建設・kunugi）
   =================================================================== */
.logo__name { font-size: 20px; font-weight: 700; letter-spacing: .04em; font-family: var(--en), var(--jp); }
.logo img { width: 44px; height: 44px; box-shadow: 0 0 0 3px #fff, 0 4px 14px -6px rgba(15,27,39,.35); }
.header { padding: 14px 0 0; background: transparent !important; border: 0 !important; backdrop-filter: none !important; }
.header__inner { height: 68px !important; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-radius: 999px; padding: 0 10px 0 14px; box-shadow: 0 10px 30px -18px rgba(15,27,39,.45); max-width: calc(var(--max) + 40px); }
.header.is-scrolled .header__inner { height: 60px !important; }
.nav { gap: 28px; }
.nav a:not(.nav__cta) { font-weight: 600; }
.nav__cta { height: 50px; }
.menu-btn { display: none; }
@media (max-width: 960px) {
  .header { padding: 10px 10px 0; }
  .header__inner { height: 62px !important; padding: 0 6px 0 10px; margin: 0; width: auto; }
  .logo img { width: 40px; height: 40px; }
  .logo__name { font-size: 19px; }
  .menu-btn { display: flex; align-items: center; gap: 8px; width: auto; height: 46px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; flex-direction: row; }
  .menu-btn span { position: static !important; display: block; width: 16px; height: 2px; background: #fff !important; margin: 0 !important; transform: none; }
  .menu-btn span + span { display: none; }
  .menu-btn::before { content: ""; width: 16px; height: 2px; background: #fff; box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff; order: -1; }
  .menu-btn span:first-child { display: none; }
  .menu-btn em { font: 600 12px var(--en); letter-spacing: .14em; font-style: normal; }
  .is-menu-open .menu-btn::before { box-shadow: none; transform: rotate(45deg); }
  .is-menu-open .menu-btn em::after { content: ""; }
}
@media (max-width: 360px) { .logo__name { font-size: 17px; } .menu-btn { padding: 0 12px; } .menu-btn em { font-size: 11px; } }

/* FV */
.fv { position: relative; padding: 96px 16px 0; }
.fv__frame { position: relative; height: min(76vh, 720px); min-height: 520px; border-radius: 32px; overflow: hidden; background: #DCE6F1; }
.fv__frame .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.fv__frame .slide.is-active { opacity: 1; }
.fv__frame .slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.fv__frame .slide.is-active img { transform: scale(1); }
.fv__frame .slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,30,49,.25) 0%, rgba(11,30,49,0) 30%); }
.shot .fv__frame .slide img { transform: none; transition: none; }
.fv__vert { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font: 600 11px var(--en); letter-spacing: .32em; color: #fff; z-index: 2; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.fv__nav { position: absolute; right: 26px; bottom: 26px; z-index: 3; display: flex; gap: 14px; margin: 0; }
.fv__nav button { color: rgba(255,255,255,.75); font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.4); min-width: 74px; }
.fv__nav button.is-active { color: #fff; }
.fv__nav button span { background: rgba(255,255,255,.35); }
.fv__nav button span i { background: #fff; }
.fv__card { position: relative; z-index: 4; width: min(640px, calc(100% - 32px)); margin: -240px 0 0 16px; padding: 46px 52px 48px 40px; background: var(--bg); border-radius: 0 32px 0 0; }
.fv__card::before, .fv__card::after { content: ""; position: absolute; width: 32px; height: 32px; background: radial-gradient(circle at 100% 0, transparent 31px, var(--bg) 32px); }
.fv__card::before { left: 0; top: -32px; transform: scaleY(-1) scaleX(-1); background: radial-gradient(circle at 100% 100%, transparent 31px, var(--bg) 32px); transform: none; left: -16px; display: none; }
.fv__card::after { right: -32px; bottom: 0; background: radial-gradient(circle at 100% 0, transparent 31px, var(--bg) 32px); }
.fv__label { display: inline-flex; align-items: center; gap: 10px; font: 600 12px var(--en); letter-spacing: .24em; text-transform: uppercase; color: var(--blue); }
.fv__label i { width: 26px; height: 2px; background: currentColor; }
.fv__title { margin-top: 18px; font-size: clamp(30px, 4.4vw, 60px); font-weight: 700; line-height: 1.38; letter-spacing: .02em; }
.fv__title em { font-style: normal; color: var(--blue); background: linear-gradient(transparent 70%, rgba(255,200,87,.6) 70%); }
.fv__sub { margin-top: 18px; color: var(--sub); font-size: 15px; line-height: 1.9; }
.fv__sub span { display: inline-block; }
.fv__btns { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.fv__scroll { position: absolute; right: 44px; bottom: -64px; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 10px var(--en); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); writing-mode: vertical-rl; }
.fv__scroll::after { content: ""; width: 1px; height: 54px; background: linear-gradient(var(--ink), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.fv + * { margin-top: 0; }
@media (max-width: 960px) {
  .fv { padding: 82px 10px 0; }
  .fv__frame { height: 58svh; min-height: 380px; max-height: 560px; border-radius: 24px; }
  .fv__vert { right: 14px; font-size: 9.5px; letter-spacing: .26em; }
  .fv__nav { left: 18px; right: 18px; top: 18px; bottom: auto; gap: 8px; }
  .fv__nav button { min-width: 0; flex: 1; font-size: 10px; white-space: nowrap; }
  .fv__card { width: calc(100% - 20px); margin: -86px 0 0 0; padding: 30px 22px 6px 20px; border-radius: 0 24px 0 0; }
  .fv__card::after { right: -24px; width: 24px; height: 24px; background: radial-gradient(circle at 100% 0, transparent 23px, var(--bg) 24px); }
  .fv__title { font-size: clamp(29px, 8.4vw, 40px); margin-top: 12px; }
  .fv__sub { font-size: 14px; margin-top: 12px; }
  .fv__btns { flex-wrap: nowrap; gap: 8px; margin-top: 22px; }
  .fv__btns .button { flex: 1 1 0; min-width: 0; height: 54px; padding: 0 8px 0 16px; gap: 6px; font-size: 13.5px; }
  .fv__btns .button svg { flex: none; width: 34px; height: 34px; padding: 10px; }
  .fv__scroll { display: none; }
}
@media (max-width: 400px) { .fv__btns .button--line svg { display: none; } .fv__btns .button--line { justify-content: center; padding: 0 8px; } }
.fv__title span { display: block; white-space: nowrap; }
.fv__frame { height: min(68vh, 640px); }
.fv__card { width: min(760px, calc(100% - 32px)); margin-top: -250px; padding: 44px 56px 40px 44px; }
.fv__title { font-size: clamp(30px, 4vw, 56px); }
.fv__vert { top: 34px; transform: none; }
@media (max-width: 960px) {
  .fv__card { margin-top: -86px; padding: 28px 20px 6px 18px; }
  .fv__title { font-size: clamp(26px, 7.6vw, 40px); }
  .fv__vert { top: 54px; }
}
@media (max-width: 960px) { .fv__frame { height: 48svh; min-height: 330px; } }
@media (min-width: 961px) { .fv__nav { right: 70px; } }
@media (max-width: 960px) {
  .header__inner { backdrop-filter: none !important; background: #fff; position: relative; }
  .header.is-scrolled .header__inner, .header__inner { -webkit-backdrop-filter: none !important; }
  .logo, .menu-btn { position: relative; z-index: 3; }
  .nav { position: fixed; inset: 0; z-index: 2; padding: 100px 28px 40px; justify-content: flex-start; gap: 0; background: var(--bg); }
  .nav a:not(.nav__cta) { display: block; width: 100%; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 19px; }
  .nav__cta { margin-top: 26px; width: 100%; justify-content: center; }
  .is-menu-open .header__inner { box-shadow: none; }
  .is-menu-open .menu-btn::before { box-shadow: none; transform: rotate(45deg); }
  .is-menu-open .menu-btn::after { content: ""; position: absolute; left: 14px; width: 16px; height: 2px; background: #fff; transform: rotate(-45deg); }
}

/* ===================================================================
   FVの各写真に「できあがる画面」を重ねる（10/6・参考：BASE・Wix・AirREGI）
   =================================================================== */
.fv__frame .slide::after { background: linear-gradient(90deg, rgba(11,30,49,0) 40%, rgba(11,30,49,.35) 100%), linear-gradient(180deg, rgba(11,30,49,.25) 0%, rgba(11,30,49,0) 30%); }
.fv__mock { position: absolute; right: 9%; top: 50%; transform: translateY(-46%); z-index: 2; opacity: 0; transition: opacity .8s .3s var(--ease), transform .9s .3s var(--ease); }
.slide.is-active .fv__mock { opacity: 1; transform: translateY(-50%); }
.shot .fv__mock { opacity: 1; transform: translateY(-50%); }
.fv__phone { position: relative; width: 236px; padding: 26px 12px 14px; border-radius: 34px; background: #fff; border: 7px solid #10202f; box-shadow: 0 40px 70px -30px rgba(0,0,0,.6); font-size: 11px; color: var(--ink); line-height: 1.5; }
.fv__notch { position: absolute; left: 50%; top: 8px; width: 60px; height: 8px; margin-left: -30px; border-radius: 6px; background: #10202f; }
.pm-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 8px; font-size: 12px; }
.pm-bar i { width: 14px; height: 10px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); position: relative; }
.pm-bar i::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--ink); }
.pm-bar i.cart { width: 16px; height: 14px; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 4px 4px; } .pm-bar i.cart::after { display: none; }
.pm-hero { height: 150px; border-radius: 12px; background: center/cover; position: relative; overflow: hidden; }
.pm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 60%); }
.pm-hero p { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff; font-weight: 700; font-size: 14px; line-height: 1.45; }
.pm-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.pm-tabs span { text-align: center; padding: 7px 0; border-radius: 8px; background: var(--sky-soft); font-weight: 700; font-size: 10.5px; }
.pm-btn { text-align: center; padding: 10px 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 12px; }
.pm-btn--red { background: #E5533D; }
.pm-img { height: 150px; border-radius: 12px; background: center/cover; background-size: 260%; }
.pm-cat { margin-top: 10px; font-size: 10px; color: var(--mute); }
.pm-name { font-size: 13.5px; font-weight: 700; margin-top: 2px; }
.pm-price { font: 600 18px var(--en); margin: 4px 0 10px; } .pm-price small { font: 400 10px var(--jp); margin-left: 4px; color: var(--mute); }
.pm-bid { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--sky-soft); }
.pm-bid small { display: block; font-size: 9.5px; color: var(--mute); }
.pm-bid b { font: 700 17px var(--en); } .pm-time { color: #E5533D; }
.pm-list li { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; }
.pm-list li i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #2E9E6A; color: #fff; display: flex; align-items: center; justify-content: center; }
.pm-list li i svg { width: 11px; height: 11px; }
.pm-list em { margin-left: auto; font: 600 11px var(--en); font-style: normal; color: var(--sub); }
.pm-done { margin-top: 12px; text-align: center; padding: 10px 0; border-radius: 10px; background: #E8F6EE; color: #1F7A4D; font-weight: 700; font-size: 12px; }
.fv__chip { position: absolute; left: -150px; top: 22%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -18px rgba(0,0,0,.45); font-size: 13px; font-weight: 700; white-space: nowrap; animation: bob 5s ease-in-out infinite; }
.fv__chip i { width: 36px; height: 36px; border-radius: 11px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.fv__chip i svg { width: 18px; height: 18px; }
.fv__chip small { display: block; font-size: 10.5px; color: var(--mute); font-weight: 500; }
.shot .fv__chip { animation: none; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 960px) {
  .fv__mock { right: 7%; top: 44%; }
  .fv__phone { width: 132px; padding: 16px 7px 8px; border-width: 4px; border-radius: 20px; font-size: 7px; }
  .fv__notch { top: 5px; width: 34px; height: 5px; margin-left: -17px; }
  .pm-bar { font-size: 7.5px; padding-bottom: 5px; } .pm-bar i { transform: scale(.7); }
  .pm-hero, .pm-img { height: 82px; border-radius: 8px; }
  .pm-hero p { font-size: 8.5px; left: 7px; bottom: 6px; }
  .pm-tabs { gap: 3px; margin: 6px 0; } .pm-tabs span { font-size: 6.5px; padding: 4px 0; border-radius: 5px; }
  .pm-btn { font-size: 7.5px; padding: 6px 0; }
  .pm-cat { font-size: 6.5px; margin-top: 5px; } .pm-name { font-size: 8.5px; } .pm-price { font-size: 11px; margin: 2px 0 6px; }
  .pm-bid { padding: 5px 6px; margin: 5px 0 6px; gap: 4px; border-radius: 6px; } .pm-bid small { font-size: 6px; } .pm-bid b { font-size: 10px; }
  .pm-list li { padding: 5px 0; font-size: 7px; gap: 4px; } .pm-list li i { width: 11px; height: 11px; } .pm-list li i svg { width: 7px; height: 7px; } .pm-list em { font-size: 6.5px; }
  .pm-done { font-size: 7.5px; padding: 6px 0; margin-top: 7px; }
  .fv__chip { left: -96px; top: auto; bottom: -6px; padding: 6px 10px 6px 6px; gap: 6px; font-size: 9.5px; border-radius: 11px; }
  .fv__chip i { width: 24px; height: 24px; border-radius: 7px; } .fv__chip i svg { width: 13px; height: 13px; }
  .fv__chip small { font-size: 7.5px; }
}
/* 人物を左に寄せた写真（スマホの画面と重ならないように・10/6） */
.fv__frame .slide img.fv-pos-l { object-position: 38% 45%; }
@media (max-width: 960px) { .fv__frame .slide img.fv-pos-l { object-position: 30% 45%; } }
.fv__frame .slide img.fv-pos-cafe { object-position: 30% 50%; }
@media (max-width: 960px) {
  .fv__frame .slide img.fv-pos-cafe { object-position: 8% 50%; }
  .fv__frame .slide img.fv-pos-l { object-position: 12% 45%; }
  .fv__mock { right: 5%; top: 47%; }
}
@media (max-width: 960px) {
  .fv__frame .slide img.fv-pos-cafe { object-position: 52% 50%; }
  .fv__frame .slide img.fv-pos-l { object-position: 60% 45%; }
}
.fv__frame .slide img.fv-pos-auc { object-position: 30% 40%; }
@media (max-width: 960px) { .fv__frame .slide img.fv-pos-auc { object-position: 14% 40%; } }

/* ===== FVのスマホ画面と通知の位置をそろえる（10/6） =====
   ・画面の高さを固定して、スライドが変わっても位置が動かないように
   ・上からの位置で固定（真ん中合わせをやめる）
   ・スマホ表示では通知を「スマホの画面の上に出るお知らせ」として画面の上部に重ねる */
.fv__mock { top: 64px; transform: translateY(10px); }
.slide.is-active .fv__mock, .shot .fv__mock { transform: none; }
.fv__phone { height: 376px; display: flex; flex-direction: column; }
.fv__phone > .pm-btn, .fv__phone > .pm-done { margin-top: auto; }
.fv__chip { top: 96px; }
@media (min-width: 961px) { .fv__card { width: min(760px, 56%); } }
@media (min-width: 961px) and (max-width: 1240px) { .fv__mock { right: 5%; } }
@media (max-width: 960px) {
  .fv__mock { top: 46px; right: 6%; }
  .fv__phone { height: 214px; }
  .fv__chip { top: 14px; bottom: auto; left: -22px; right: auto; padding: 6px 10px 6px 6px; box-shadow: 0 12px 26px -10px rgba(0,0,0,.5); }
}
/* スマホ：写真を大きく・白いカードの重なりを減らし、1画面に収める（10/6） */
@media (max-width: 960px) {
  .fv__frame { height: calc(100svh - 336px); min-height: 300px; max-height: 620px; }
  .fv__card { margin-top: -40px; padding: 22px 18px 4px 18px; }
  .fv__label { font-size: 11px; }
  .fv__title { margin-top: 10px; }
  .fv__sub { margin-top: 8px; font-size: 13px; line-height: 1.8; }
  .fv__btns { margin-top: 16px; }
  .fv__btns .button { height: 50px; }
  .fv__chip { top: auto; bottom: -6px; left: -96px; right: auto; padding: 6px 10px 6px 6px; }
}
@media (max-width: 960px) {
  .fv__btns .button:first-child { flex: 1.25 1 0; padding: 0 6px 0 16px; }
  .fv__btns .button--line { flex: .9 1 0; }
}
@media (max-width: 380px) { .fv__btns .button { font-size: 13px; } .fv__btns .button:first-child { padding-left: 14px; } }
@media (max-width: 340px) { .fv__btns .button:first-child svg { display: none; } .fv__btns .button:first-child { justify-content: center; padding: 0 8px; } }

/* ===================================================================
   サービス一覧：写真の大きなカード4枚（10/6・参考：GIG・creasta）
   PCは2×2、スマホは横にスワイプ
   =================================================================== */
.pillars2, .pillars2__more { display: none; }
.svc4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 10px; }
.svc4__card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px -30px rgba(15,27,39,.35); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.svc4__card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(15,27,39,.45); }
.svc4__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); }
.svc4__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc4__card:hover .svc4__img img { transform: scale(1.06); }
.svc4__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,30,49,0) 45%, rgba(11,30,49,.55) 100%); }
.svc4__num { position: absolute; left: 22px; top: 18px; z-index: 1; font: 600 13px var(--en); letter-spacing: .14em; color: #fff; background: rgba(11,30,49,.55); backdrop-filter: blur(6px); padding: 5px 12px; border-radius: 999px; }
.svc4__en { position: absolute; left: 22px; bottom: 14px; z-index: 1; font: 700 clamp(28px, 3.2vw, 44px) var(--en); letter-spacing: -.01em; color: #fff; line-height: 1; text-shadow: 0 2px 16px rgba(0,0,0,.25); }
.svc4__body { display: flex; flex-direction: column; flex: 1; padding: 22px 26px 24px; }
.svc4__catch { font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: .04em; }
.svc4__body h3 { margin-top: 4px; font-size: 21px; font-weight: 700; letter-spacing: .04em; }
.svc4__desc { margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--sub); }
.svc4__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.svc4__tags li { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--sky-soft); color: var(--blue); }
.svc4__go { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; }
.svc4__go i { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .4s var(--ease); }
.svc4__go i svg { width: 15px; height: 15px; }
.svc4__card:hover .svc4__go i { transform: translateX(4px); }
@media (max-width: 960px) {
  .svc4 { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 6px calc(var(--pad) * -1) 0; padding: 4px var(--pad) 26px; scrollbar-width: none; }
  .svc4::-webkit-scrollbar { display: none; }
  .svc4__card { flex: 0 0 82%; scroll-snap-align: start; border-radius: 20px; }
  .svc4__card.rv { opacity: 1; transform: none; }
  .svc4__en { font-size: 30px; left: 18px; }
  .svc4__num { left: 18px; top: 14px; font-size: 11.5px; }
  .svc4__body { padding: 18px 18px 20px; }
  .svc4__body h3 { font-size: 18px; }
  .svc4__desc { font-size: 13px; }
}
.svc4__hint { display: none; }
@media (max-width: 960px) { .svc4__hint { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: -10px; font: 600 11px var(--en); letter-spacing: .2em; color: var(--mute); } .svc4__hint::after { content: "→"; font-size: 14px; animation: swipe 1.6s ease-in-out infinite; } }
@keyframes swipe { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* ===================================================================
   Web工房Pono（人柄が伝わるセクション・10/6）
   参考：Sourire web studio（同じ人が最初から最後まで）・popo design（選ばれる理由）
   =================================================================== */
.about2, .kobo { display: none; }
.pa { padding: clamp(70px, 9vw, 120px) 0; background: linear-gradient(180deg, var(--bg) 0%, #F7F2EA 100%); }
.pa__head { text-align: center; }
.pa__head .label { justify-content: center; }
.pa__title { margin-top: 10px; font-size: clamp(34px, 5vw, 64px); font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.pa__title span { color: var(--blue); font-family: var(--en); }
.pa__lead { margin-top: 14px; font-size: clamp(15px, 1.4vw, 17px); color: var(--sub); line-height: 1.9; }
.pa__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 70px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.pa__photo { position: relative; }
.pa__photo img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 24px; transform: rotate(-1.5deg); box-shadow: 0 30px 50px -30px rgba(60,40,10,.45); }
.pa__photo .tape--l { left: 14%; top: -12px; transform: rotate(-8deg); }
.pa__letter { position: relative; padding: clamp(28px, 3.4vw, 44px); background: #FFFDF8; border-radius: 6px; box-shadow: 0 20px 40px -26px rgba(60,40,10,.4);
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(29,95,173,.09) 33px 34px); }
.pa__letter p { font-family: "Klee One", var(--jp); font-size: 16px; line-height: 34px; color: #2B3440; }
.pa__letter p + p { margin-top: 0; }
.pa__hello { font-size: 22px !important; font-weight: 600; color: var(--ink) !important; margin-bottom: 0; }
.pa__sign { text-align: right; font-weight: 600; font-size: 18px !important; color: var(--blue) !important; }
.pa__sign::before { content: "— "; }
.pa__cost { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 60px); align-items: center; margin-top: clamp(50px, 6vw, 80px); padding: clamp(28px, 4vw, 48px); background: #fff; border-radius: 28px; box-shadow: 0 20px 50px -34px rgba(15,27,39,.35); }
.pa__cost-label { font: 600 12px var(--en); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.pa__cost h3 { margin-top: 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.5; }
.pa__cost-text > p:last-child { margin-top: 14px; font-size: 14.5px; color: var(--sub); line-height: 1.9; }
.pa__bar { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; }
.pa__bar + .pa__bar { margin-top: 16px; }
.pa__bar-name { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--sub); }
.pa__bar.is-pono .pa__bar-name { color: var(--blue); }
.pa__bar-track { display: flex; height: 48px; border-radius: 12px; overflow: hidden; background: #F2F4F7; }
.pa__bar-track i { width: 0; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; transition: width 1.4s var(--ease); }
.pa__cost.is-in .pa__bar-track i, .shot .pa__bar-track i { width: var(--w); }
.pa__bar-track .b1 { background: var(--blue); } .pa__bar-track .b2 { background: #8FA6C2; transition-delay: .2s; } .pa__bar-track .b3 { background: #B4C3D6; transition-delay: .35s; } .pa__bar-track .b4 { background: #D4DDE8; color: var(--sub); transition-delay: .5s; }
.pa__bar-track em { flex: 1; display: flex; align-items: center; padding-left: 14px; font-style: normal; font-size: 12px; font-weight: 700; color: #C98A1A; background: repeating-linear-gradient(-45deg, #FFF7E6 0 8px, #fff 8px 16px); }
.pa__note { margin-top: 12px; font-size: 11px; color: var(--mute); }
.pa__promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(30px, 4vw, 44px); }
.pa__promise li { position: relative; padding: 28px 24px 26px; background: #fff; border-radius: 22px; border: 1px solid var(--line); }
.pa__no { font: 600 13px var(--en); color: var(--blue); letter-spacing: .1em; }
.pa__promise h3 { margin-top: 8px; font-size: 19px; font-weight: 700; line-height: 1.55; }
.pa__promise p { margin-top: 10px; font-size: 13.5px; color: var(--sub); line-height: 1.85; }
.pa__more { margin-top: 36px; text-align: center; }
@media (max-width: 960px) {
  .pa__grid, .pa__cost { grid-template-columns: 1fr; }
  .pa__photo img { aspect-ratio: 4 / 3; }
  .pa__letter p { font-size: 15px; line-height: 32px; }
  .pa__letter { background-image: repeating-linear-gradient(transparent 0 31px, rgba(29,95,173,.09) 31px 32px); }
  .pa__hello { font-size: 20px !important; }
  .pa__promise { grid-template-columns: 1fr; gap: 12px; }
  .pa__promise li { padding: 22px 20px; }
  .pa__promise h3 br { display: none; }
  .pa__bar { grid-template-columns: 64px 1fr; gap: 8px; }
  .pa__bar-track { height: 42px; }
  .pa__bar-track i { font-size: 9.5px; }
}
.pa__letter p { letter-spacing: .02em; }
.pa__bar-track .b2 { background: #A9B8CB; color: #fff; }
@media (max-width: 960px) { .pa__bar-track i { font-size: 10.5px; } .pa__bar-track em { font-size: 11px; padding-left: 10px; } }

/* ===== Web工房Pono セクション v2（10/6・参考：Sourire web studio / popo design / 制作会社とフリーランス比較記事） ===== */
.pa__cost, .pa__promise { display: none; }
.pa__flow { margin-top: clamp(50px, 6vw, 80px); padding: clamp(28px, 4vw, 48px); background: #fff; border-radius: 28px; box-shadow: 0 20px 50px -34px rgba(15,27,39,.35); }
.pa__flow-head { text-align: center; }
.pa__flow-label, .pa__route-name { font: 600 12px var(--en); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.pa__route-name { font-family: var(--jp); letter-spacing: .06em; font-size: 13px; color: var(--sub); text-transform: none; }
.pa__flow-head h3 { margin-top: 8px; font-size: clamp(21px, 2.4vw, 28px); font-weight: 700; }
.pa__flow-head p { margin-top: 8px; font-size: 14px; color: var(--sub); }
.pa__flow-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 30px; }
.pa__route { padding: 22px 20px; border-radius: 20px; background: #F4F6F9; }
.pa__route.is-pono { background: linear-gradient(135deg, #EAF3FD, #FFF7E6); }
.pa__route.is-pono .pa__route-name { color: var(--blue); font-weight: 700; }
.pa__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.pa__chain li { position: relative; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--sub); border: 1px solid var(--line); }
.pa__chain li:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.pa__chain li + li::before { content: "→"; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--mute); }
.pa__chain li { margin-left: 4px; }
.pa__chain li:nth-child(n+3) { opacity: .85; } .pa__chain li:nth-child(n+4) { opacity: .7; } .pa__chain li:nth-child(5) { opacity: .55; }
.pa__route-cap { margin-top: 14px; font-size: 12.5px; color: var(--sub); line-height: 1.8; }
.pa__route-cap b { color: var(--blue); }
.pa__direct { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pa__direct span { font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.pa__direct span.is-pono { background: var(--blue); }
.pa__direct span img { width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.pa__direct i { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ink), var(--blue)); position: relative; min-width: 40px; }
.pa__direct i::before, .pa__direct i::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 3px solid; border-right: 3px solid; transform: translateY(-50%) rotate(45deg); }
.pa__direct i::after { right: -1px; color: var(--blue); }
.pa__direct i::before { left: -1px; color: var(--ink); transform: translateY(-50%) rotate(-135deg); }
.pa__reasons-head { margin-top: clamp(50px, 6vw, 80px); text-align: center; }
.pa__reasons-head .label { justify-content: center; }
.pa__reasons-head h3 { margin-top: 10px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1.5; }
.pa__reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.pa__reasons li { position: relative; padding: 28px 28px 26px 92px; background: #fff; border-radius: 22px; border: 1px solid var(--line); }
.pa__reasons .ico { position: absolute; left: 24px; top: 26px; width: 50px; height: 50px; border-radius: 16px; background: var(--sky-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.pa__reasons .ico svg { width: 24px; height: 24px; }
.pa__reasons .pa__no { position: absolute; right: 22px; top: 18px; font: 600 28px var(--en); color: #EEF1F5; }
.pa__reasons h4 { font-size: 18px; font-weight: 700; line-height: 1.5; }
.pa__reasons p { margin-top: 8px; font-size: 13.5px; color: var(--sub); line-height: 1.85; }
.pa__trust { margin-top: 26px; padding: 26px clamp(20px, 3vw, 36px); border-radius: 22px; background: var(--ink); color: #fff; }
.pa__trust-title { font-size: 16px; font-weight: 700; text-align: center; }
.pa__trust ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 18px; }
.pa__trust li { display: flex; gap: 12px; align-items: flex-start; }
.pa__trust .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.1); color: #FFC857; display: flex; align-items: center; justify-content: center; }
.pa__trust .ico svg { width: 20px; height: 20px; }
.pa__trust b { display: block; font-size: 14px; }
.pa__trust span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.75; color: rgba(255,255,255,.75); }
.pa__cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px; text-align: center; }
.pa__cta p { width: 100%; font-size: 16px; font-weight: 700; }
.pa__more { display: none; }
@media (max-width: 960px) {
  .pa__flow-cols, .pa__reasons, .pa__trust ul { grid-template-columns: 1fr; }
  .pa__flow { padding: 26px 18px; }
  .pa__reasons li { padding: 22px 18px 20px 80px; }
  .pa__reasons .ico { left: 18px; top: 22px; width: 46px; height: 46px; }
  .pa__reasons h4 { font-size: 16.5px; }
  .pa__trust { padding: 24px 18px; }
  .pa__trust ul { gap: 16px; }
  .pa__cta .button { width: 100%; justify-content: space-between; }
}
.pa__reasons h4 { padding-right: 36px; }
@media (max-width: 960px) { .pa__reasons .pa__no { font-size: 20px; right: 16px; top: 14px; } .pa__chain li + li::before { display: none; } .pa__chain li { margin-left: 0; } }
.pa__photo img { object-position: 50% 62%; }
/* Web工房Pono：手紙の下はシンプルに3つだけ（10/6） */
.pa__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 60px); }
.pa__points li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 18px; background: #fff; border-radius: 22px; }
.pa__points .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--sky-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.pa__points .ico svg { width: 24px; height: 24px; }
.pa__points b { font-size: 17px; font-weight: 700; }
.pa__points span { font-size: 13px; color: var(--sub); }
.pa__cta { margin-top: 36px; }
.pa__cta p { display: none; }
@media (max-width: 960px) {
  .pa__points { grid-template-columns: 1fr; gap: 10px; }
  .pa__points li { flex-direction: row; text-align: left; align-items: center; gap: 14px; padding: 16px 18px; }
  .pa__points .ico { flex: none; width: 44px; height: 44px; margin: 0; }
  .pa__points li > b, .pa__points li > span { display: block; }
  .pa__points li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; }
  .pa__points .ico { grid-row: 1 / 3; }
  .pa__points b { font-size: 15.5px; }
}
/* お客さんの気持ち → Ponoの答え（10/6） */
.pa__points--need li { display: flex !important; flex-direction: column; align-items: stretch; text-align: left; gap: 14px; padding: 22px 22px 24px; }
.pa__worry { position: relative; align-self: flex-start; font-style: normal; font-size: 13px; font-weight: 700; color: var(--sub); background: #F2F4F7; padding: 9px 14px; border-radius: 14px 14px 14px 4px; }
.pa__ans { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 4px; align-items: center; }
.pa__ans .ico { grid-row: 1; width: 44px; height: 44px; margin: 0 !important; }
.pa__ans b { font-size: 17px; line-height: 1.5; color: var(--ink); }
.pa__ans span { grid-column: 1 / -1; margin-top: 6px; font-size: 13.5px; line-height: 1.85; color: var(--sub); }
@media (max-width: 960px) {
  .pa__points--need li { display: flex !important; padding: 18px 18px 20px; }
  .pa__ans b { font-size: 16px; }
  .pa__ans span { font-size: 13px; }
}
.pa__points--need .pa__ans { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; }
.pa__points--need .pa__ans .ico { grid-column: 1 !important; grid-row: 1 !important; }
.pa__points--need .pa__ans b { grid-column: 2 !important; grid-row: 1 !important; display: block; }
.pa__points--need .pa__ans span { grid-column: 1 / -1 !important; grid-row: 2 !important; display: block; }
.pa__points--need .pa__ans .ico { display: flex !important; align-items: center; justify-content: center; border-radius: 50%; }

/* ===== 2026-10-06 制作実績（Works） ===== */
.works__head { text-align: center; margin-bottom: 36px; }
.works__head .label { justify-content: center; }
.works__lead { margin-top: 10px; color: var(--sub); font-size: 15px; }
.works__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.works__card { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px -28px rgba(15,30,50,.35); display: flex; flex-direction: column; }
.works__img { aspect-ratio: 3 / 2; overflow: hidden; background: #F3EDE4; }
.works__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.works__card:hover .works__img img { transform: scale(1.04); }
.works__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.works__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.works__tags span { font-size: 11.5px; font-weight: 700; color: var(--blue); background: var(--sky-soft); padding: 4px 10px; border-radius: 99px; }
.works__tags span.is-sample { color: #8A6A2E; background: #F6EEDC; }
.works__body h3 { font-size: 19px; line-height: 1.5; margin-top: 4px; }
.works__area { font-size: 12.5px; color: var(--mute); }
.works__text { font-size: 13.5px; line-height: 1.85; color: var(--sub); }
.works__links { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.works__links .more { font-size: 13.5px; }
@media (max-width: 960px) {
  .works__head { margin-bottom: 22px; }
  .works__list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad) 26px; scrollbar-width: none; }
  .works__list::-webkit-scrollbar { display: none; }
  .works__card { flex: 0 0 84%; scroll-snap-align: center; }
  .works__body { padding: 18px 18px 22px; }
  .works__body h3 { font-size: 17px; }
}

/* ===== 2026-10-06 制作実績 v2（参考：WebStudio S.・カトリデザイン＝大きいスクショ1枚＋ラベル＋店名だけ） ===== */
.works__lead, .works__hint { display: none !important; }
.works__list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
.works__item { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.works__img { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #EEE; box-shadow: 0 14px 34px -22px rgba(15,30,50,.45); outline: 1px solid rgba(15,30,50,.06); margin-bottom: 12px; }
.works__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .8s var(--ease); }
a.works__item:hover .works__img img { transform: scale(1.04); }
.works__item h3 { font-size: 18px; line-height: 1.5; }
.works__area { font-size: 13px; color: var(--sub); line-height: 1.7; }
.works__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--blue); }
.works__go svg { width: 14px; height: 14px; }
.works__demo { margin-top: 48px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; text-align: center; }
.works__demo p { font-size: 14px; color: var(--sub); }
@media (max-width: 960px) {
  .works__list { grid-template-columns: 1fr; gap: 34px; }
  .works__item h3 { font-size: 17px; }
  .works__demo { margin-top: 36px; flex-direction: column; gap: 14px; }
}

/* ===== 2026-10-06 PCのトップ：左に文字・右に写真（写真に文字をかぶせない）参考：ウェブ企画パートナーズ・KOSOKU ===== */
@media (min-width: 961px) {
  .fv { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); grid-template-areas: "card frame"; align-items: center; column-gap: clamp(28px, 3vw, 56px); padding: 96px 16px 28px 0; }
  .fv__frame { grid-area: frame; height: calc(100svh - 124px); min-height: 560px; max-height: 820px; }
  .fv__card { grid-area: card; width: auto !important; margin: 0 !important; padding: 0 0 0 clamp(32px, 4.4vw, 80px) !important; background: transparent !important; border-radius: 0 !important; }
  .fv__card::before, .fv__card::after { display: none !important; }
  .fv__title { font-size: clamp(34px, 3.5vw, 56px); margin-top: 22px; }
  .fv__title span { display: block; white-space: nowrap; }
  .fv__sub { margin-top: 22px; }
  .fv__btns { margin-top: 34px; }
  .fv__scroll { right: auto; left: clamp(32px, 4.4vw, 80px); bottom: 34px; flex-direction: row; }
  .fv__scroll::after { width: 54px; height: 1px; background: linear-gradient(90deg, var(--ink), transparent); }
  .fv__mock { right: 7%; }
}
@media (min-width: 961px) {
  .fv__phone { height: 340px !important; }
  .fv__chip { left: -84px !important; top: -30px !important; bottom: auto !important; }
  .fv__mock { right: 6%; top: 47%; }
}
@media (min-width: 961px) { .fv__mock, .slide.is-active .fv__mock, .shot .fv__mock { top: calc(50% - 150px) !important; transform: none !important; } }

/* ===== 2026-10-06 PCトップに遊び（参考：TAM・NIAHO・クロスデザイナー＝手描き・曲線・動き・回るロゴ） ===== */
.fv__deco, .fv__badge, .fv__note { display: none; }
.fv__circle { display: none; }
@media (min-width: 961px) {
  .fv { overflow: hidden; }
  /* 写真の枠：左上だけ大きな曲線 */
  .fv__frame { border-radius: 220px 32px 32px 32px; }
  /* 左側の背景：ドット＋ふわふわ動く丸 */
  .fv::before { content: ""; position: absolute; left: 0; top: 80px; width: 42%; height: calc(100% - 80px); background-image: radial-gradient(rgba(29,95,173,.16) 1.4px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(120deg, #000 10%, transparent 75%); mask-image: linear-gradient(120deg, #000 10%, transparent 75%); pointer-events: none; }
  .fv__deco { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .fv__deco i { position: absolute; border-radius: 50%; filter: blur(2px); animation: fvFloat 9s ease-in-out infinite; }
  .fv__deco .b1 { width: 220px; height: 220px; left: -60px; top: 18%; background: radial-gradient(circle at 35% 35%, rgba(255,200,87,.55), rgba(255,200,87,0) 70%); }
  .fv__deco .b2 { width: 160px; height: 160px; left: 26%; bottom: 8%; background: radial-gradient(circle at 40% 40%, rgba(191,217,242,.9), rgba(191,217,242,0) 70%); animation-delay: -3s; }
  .fv__deco .b3 { width: 14px; height: 14px; left: 31%; top: 22%; background: var(--blue); filter: none; animation-duration: 6s; }
  @keyframes fvFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } }
  .fv__card { position: relative; z-index: 2; }
  /* 「売る」を手描きの丸で囲む */
  .fv__title em { position: relative; background: none; display: inline-block; }
  .fv__circle { display: block; position: absolute; left: -22%; top: -24%; width: 144%; height: 150%; overflow: visible; pointer-events: none; }
  .fv__circle path { fill: none; stroke: #F2B33D; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: fvDraw 1.2s .9s cubic-bezier(.65,0,.35,1) forwards; }
  @keyframes fvDraw { to { stroke-dashoffset: 0; } }
  /* 見出しが下からすっと出る */
  .fv__title > span { display: block; overflow: hidden; }
  .fv__title > span { animation: fvUp .9s cubic-bezier(.2,.7,.2,1) both; }
  .fv__title > span + span { animation-delay: .15s; }
  .fv__sub, .fv__btns { animation: fvUp .9s .35s cubic-bezier(.2,.7,.2,1) both; }
  .fv__btns { animation-delay: .5s; }
  @keyframes fvUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  /* くるくる回る丸いロゴ（写真の左下の角に） */
  .fv__badge { display: block; grid-area: frame; align-self: end; justify-self: start; position: relative; z-index: 5; width: 150px; height: 150px; margin: 0 0 34px -70px; border-radius: 50%; background: var(--bg); box-shadow: 0 18px 40px -20px rgba(15,30,50,.4); }
  .fv__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: fvSpin 22s linear infinite; }
  .fv__badge text { font: 700 13.5px var(--en); letter-spacing: .12em; fill: var(--ink); }
  .fv__badge img { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; transform: translate(-50%,-50%); border-radius: 50%; }
  @keyframes fvSpin { to { transform: rotate(360deg); } }
  /* 手書きのひとこと */
  .fv__note { display: block; grid-area: card; align-self: center; justify-self: start; position: relative; z-index: 3; margin: 300px 0 0 calc(clamp(32px, 4.4vw, 80px) + 250px); font-family: "Klee One", serif; font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--blue); transform: rotate(-6deg); }
  .fv__note svg { position: absolute; left: -78px; top: 22px; width: 72px; height: 46px; overflow: visible; }
  .fv__note path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .shot .fv__title > span, .shot .fv__sub, .shot .fv__btns { animation: none; }
  .shot .fv__circle path { animation: none; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) { .fv__deco i, .fv__badge svg, .fv__title > span, .fv__sub, .fv__btns { animation: none !important; } .fv__circle path { animation: none !important; stroke-dashoffset: 0 !important; } }
@media (min-width: 961px) { .fv__note { margin-top: 196px; } }
@media (min-width: 961px) {
  .fv__btns { flex-direction: column; align-items: flex-start; }
  .fv__btns .button { min-width: 228px; }
  .fv__note { margin-left: calc(clamp(32px, 4.4vw, 80px) + 300px); }
}

/* ===== 2026-10-08 スマホのリボン：黄色（日本語の安心ポイント）が青に隠れていた → 2本を平行にずらして両方読めるように ===== */
@media (max-width: 767px) {
  .band { height: 132px; margin: 22px 0 6px; }
  .band__row--1 { top: 22px; transform: rotate(-4deg); padding: 11px 0; }
  .band__row--2 { top: 72px; transform: rotate(-4deg); padding: 9px 0; z-index: 1; box-shadow: 0 10px 24px -16px rgba(180,130,20,.6); }
  .band__track { font-size: 19px; }
  .band__row--2 .band__track { font-size: 14px; font-weight: 700; font-family: "Noto Sans JP", sans-serif; }
}
@media (max-width: 767px) { .band { height: 156px; margin: 14px 0 0; } .band__row--1 { top: 30px; } .band__row--2 { top: 80px; } }

/* ===== 2026-10-08 サービス一覧（スマホ）：縦スクロールでカードが横に流れる（ピン留め） ===== */
.svc4__progress { display: none; }
@media (max-width: 960px) {
  #service.is-hs { height: calc(100svh + var(--hs-dist, 0px)); padding: 0 !important; }
  #service.is-hs > .container { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; overflow: hidden; }
  #service.is-hs .svc4 { overflow: visible; scroll-snap-type: none; padding-bottom: 18px; will-change: transform; }
  #service.is-hs .svc4__hint { display: none; }
  #service.is-hs .svc4__progress { display: flex; align-items: center; gap: 12px; font: 600 10.5px var(--en); letter-spacing: .2em; color: var(--mute); }
  .svc4__progress b { flex: 1; height: 2px; background: rgba(15,27,39,.1); border-radius: 2px; overflow: hidden; }
  .svc4__progress i { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
  .svc4__progress em { font-style: normal; color: var(--ink); letter-spacing: .1em; }
  #service.is-hs .sec-top { margin-bottom: 14px; }
}
@media (max-width: 960px) and (max-height: 740px) {
  #service.is-hs .svc4__tags { display: none; }
  #service.is-hs .sec-lead { display: none; }
}
@media (max-width: 960px) {
  #service.is-hs > .container { padding-top: 66px; padding-bottom: 86px; }
}
@media (max-width: 960px) and (max-height: 740px) {
  #service.is-hs .sec-top { margin-bottom: 8px; }
  #service.is-hs .sec-title { font-size: 24px; }
  #service.is-hs .svc4__img { aspect-ratio: 16 / 8.6; }
  #service.is-hs .svc4__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #service.is-hs .svc4__body { padding: 14px 16px 16px; }
  #service.is-hs .svc4__go { padding-top: 10px; }
}
@media (max-width: 960px) { #service.is-hs .sec-lead { display: none; } #service.is-hs .sec-top { margin-bottom: 12px; } }
@media (max-width: 960px) { #service.is-hs .svc4__progress { margin-right: 54px; } }

/* ===== 2026-10-08 制作実績：一覧ページ・1件ずつのページ（参考：WebStudio S.・カトリデザイン・ウェブリン） ===== */
.works__demo { display: none !important; }
.works__go { display: none; }
.works__more { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.works__more p { font-size: 13.5px; color: var(--sub); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.works__more .more { font-size: 13.5px; }
.works__item h3 { transition: color .3s; }
a.works__item:hover h3 { color: var(--blue); }
/* 絞り込み */
.wfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.wfilter button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(15,27,39,.14); background: #fff; font: 700 13px var(--jp); color: var(--ink); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.wfilter button small { font: 600 11px var(--en); color: var(--mute); }
.wfilter button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.wfilter button.is-on small { color: rgba(255,255,255,.6); }
.works__list--all .works__item.is-hidden { display: none; }
/* 1件ずつのページ */
.wdetail { padding: 120px 0 80px; }
.wdetail .crumb { margin-bottom: 26px; }
.wdetail__head { max-width: 760px; }
.wdetail__head h1 { margin-top: 12px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.35; }
.wdetail__head h1 small { display: block; margin-top: 4px; font-size: .48em; color: var(--sub); font-weight: 700; letter-spacing: .06em; }
.wdetail__lead { margin-top: 14px; font-size: 16px; font-weight: 700; color: var(--blue); }
.wdetail__mock { margin-top: 34px; border-radius: 26px; overflow: hidden; background: #F3EDE4; }
.wdetail__mock img { width: 100%; height: auto; display: block; }
.wdetail__grid { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: start; }
.wdetail__body p { font-size: 15px; line-height: 2; color: var(--ink); }
.wdetail__body p + p { margin-top: 14px; }
.wdetail__note { margin-top: 18px !important; font-size: 13px !important; color: var(--mute) !important; }
.wdetail__btns { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.wdetail__info { margin: 0; background: #fff; border-radius: 20px; padding: 8px 24px; box-shadow: 0 18px 40px -30px rgba(15,30,50,.35); }
.wdetail__info div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(15,27,39,.08); }
.wdetail__info div:last-child { border-bottom: 0; }
.wdetail__info dt { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.wdetail__info dd { margin: 0; font-size: 14px; line-height: 1.8; word-break: break-all; }
.wdetail__info dd a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.wdetail__shots { margin-top: 60px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.wshot { margin: 0; width: 260px; text-align: center; }
.wshot__phone { border: 8px solid #111; border-radius: 34px; overflow: hidden; height: 520px; background: #fff; box-shadow: 0 24px 50px -30px rgba(15,30,50,.5); }
.wshot__phone img { width: 100%; display: block; }
.wshot figcaption { margin-top: 12px; font-size: 13px; color: var(--sub); }
@media (max-width: 960px) {
  .works__list--all { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 14px !important; }
  .works__list--all .works__item h3 { font-size: 14.5px; }
  .works__list--all .works__area { font-size: 11.5px; }
  .works__list--all .works__tags span { font-size: 10.5px; padding: 3px 8px; }
  .wfilter { gap: 6px; margin-bottom: 24px; }
  .wfilter button { height: 36px; padding: 0 12px; font-size: 12px; }
  .wdetail { padding: 96px 0 60px; }
  .wdetail__mock { margin-top: 24px; border-radius: 18px; }
  .wdetail__grid { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
  .wdetail__info { padding: 4px 18px; }
  .wdetail__shots { margin-top: 40px; gap: 24px; }
  .wshot { width: calc(50% - 12px); max-width: 220px; }
  .wshot__phone { height: 380px; border-width: 6px; border-radius: 26px; }
  .works__more { margin-top: 32px; }
}
.works__more p { display: block; }
.works__demolink { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.works__demolink svg { width: 12px; height: 12px; margin-left: 2px; vertical-align: -1px; }

/* ===== 2026-10-08 お問い合わせ欄：絵をやめて「どんなご相談ですか？」の選択肢に（参考：ウェブリン「お悩みは何ですか？」・カトリデザイン） ===== */
.ctalk { position: relative; z-index: 1; background: #fff; color: var(--ink); border-radius: 22px; padding: 26px 24px 22px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.ctalk__q { margin: 0 0 14px !important; font-size: 18px; font-weight: 700; color: var(--ink) !important; line-height: 1.5; }
.ctalk__q small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--mute); }
.ctalk a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid rgba(15,27,39,.1); border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--ink); transition: border-color .25s, background .25s, transform .25s; }
.ctalk a + a { margin-top: 8px; }
.ctalk a b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sky-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; font: 700 12px var(--en); transition: background .25s, color .25s; }
.ctalk a span { flex: 1; line-height: 1.5; }
.ctalk a i { flex: none; width: 16px; height: 16px; color: var(--mute); transition: transform .25s, color .25s; }
.ctalk a i svg { width: 100%; height: 100%; }
.ctalk a:hover { border-color: var(--blue); background: #F5F9FE; }
.ctalk a:hover b { background: var(--blue); color: #fff; }
.ctalk a:hover i { transform: translateX(4px); color: var(--blue); }
@media (max-width: 860px) { .ctalk { padding: 22px 16px 16px; } .ctalk a { padding: 12px 12px; font-size: 13.5px; } }

/* フッターの大きな文字：リボンと同じように流れる */
.footer__big { overflow: hidden; white-space: nowrap; margin-left: calc(var(--pad, 20px) * -1); margin-right: calc(var(--pad, 20px) * -1); font-family: var(--en), "Noto Sans JP", sans-serif; letter-spacing: -.02em; }
.footer__big-track { display: inline-flex; animation: marquee 40s linear infinite; }
.footer__big-track span { padding-right: .5em; }
.shot .footer__big-track { animation: none; }
@media (prefers-reduced-motion: reduce) { .footer__big-track { animation: none; } }
.footer__big { -webkit-text-stroke: 1px rgba(255,255,255,.22); } @media (max-width: 760px) { .footer__big { font-size: 64px; margin-top: 36px; } }

/* ===== 2026-10-08 フッターの流れる文字：上下が切れていた（行の高さ .8＋はみ出し隠し）→ 行の高さを広げる ===== */
.footer__big { line-height: 1.25 !important; padding: .08em 0 .12em; }
.footer__big-track { align-items: center; }
@media (max-width: 400px) {
  .fv__btns .button { padding: 0 6px 0 13px; gap: 4px; font-size: 13px; letter-spacing: .02em; }
  .fv__btns .button svg { width: 30px; height: 30px; padding: 9px; }
}
@media (min-width: 401px) and (max-width: 960px) { .fv__btns .button { letter-spacing: .02em; } }
@media (min-width: 401px) and (max-width: 960px) { .fv__btns .button { padding: 0 7px 0 15px; gap: 5px; } }
@media (min-width: 401px) and (max-width: 520px) {
  .fv__btns .button { padding: 0 6px 0 14px; gap: 4px; font-size: 13.5px; letter-spacing: .02em; }
  .fv__btns .button svg { width: 32px; height: 32px; padding: 9px; }
}
@media (max-width: 960px) { .fv__btns .button { flex: 1 1 auto; } }
@media (max-width: 960px) { .fv__btns .button { flex: 1 1 0; } .fv__btns .button:first-child { flex-grow: 1.12; } }
@media (max-width: 400px) { .fv__btns .button { justify-content: center; padding: 0 10px; } .fv__btns .button svg { display: none; } }
@media (max-width: 960px) { .svc4, .works__list:not(.works__list--all) { scroll-padding-left: var(--pad); scroll-padding-right: var(--pad); } }

/* ===== 2026-10-08 トップの小さな飾りも「Web工房Pono」に ===== */
.fv__label { text-transform: none; letter-spacing: .14em; font-family: var(--jp); font-weight: 700; }
.fv__vert { font-family: var(--jp); letter-spacing: .3em; font-weight: 700; }
.fv__badge text { font-family: var(--jp); font-size: 12.5px; letter-spacing: .04em; }

/* ===== 2026-10-08 ページが見つからないとき ===== */
.nf { padding: 180px 0 120px; text-align: center; }
.nf__code { font: 700 clamp(80px, 14vw, 160px)/1 var(--en); color: transparent; -webkit-text-stroke: 1.5px var(--blue); letter-spacing: -.02em; }
.nf h1 { margin-top: 18px; font-size: clamp(22px, 2.6vw, 30px); }
.nf p { margin-top: 14px; color: var(--sub); }
.nf__btns { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 760px) { .nf { padding: 130px 0 80px; } }

/* ===== 2026-10-09 スマホ：ヘッダーを上に固定しない（下に相談ボタンがあり、見える範囲を広く）＋サービスのカードで説明を全部見せる ===== */
@media (max-width: 960px) {
  .header { position: absolute !important; }
  #service.is-hs > .container { padding-top: 20px; padding-bottom: 82px; }
  #service.is-hs .svc4__desc { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  #service.is-hs .svc4__card { display: flex; flex-direction: column; }
}
@media (max-width: 960px) and (max-height: 740px) {
  #service.is-hs .svc4__tags { display: flex !important; }
  #service.is-hs .svc4__img { aspect-ratio: 16 / 8; }
}
@media (max-width: 960px) and (max-height: 620px) {
  #service.is-hs .svc4__tags { display: none !important; }
  #service.is-hs .svc4__img { aspect-ratio: 16 / 7; }
  #service.is-hs .sec-top .label { display: none; }
}
@media (max-width: 960px) and (max-height: 700px) { #service.is-hs > .container { padding-bottom: 92px; padding-top: 14px; } }

/* ===== 2026-10-09 文字を大きく（ボス：読みやすく。写真はなるべく低くしない） 説明13→15px・本文15→16px・ボタン13→15px ===== */
body { font-size: 16px; }
.svc4__desc, .pa__ans span, .works__area, .wdetail__info dd, .ctalk a, .fv__sub,
.tl p, .timeline p, .flow p, .steps p, .feat p, .why p, .faq p, .faq dd, .pcard p { font-size: 15px !important; line-height: 1.8 !important; }
.pa__worry { font-size: 14px !important; }
.footer__nav a { font-size: 14px !important; }
.button { font-size: 15px; }
.svc4__body h3 { font-size: 19px; }
@media (max-width: 960px) {
  .button { font-size: 15px !important; }
  .fv__btns .button { font-size: 14.5px !important; }
  .works__list--all .works__item h3 { font-size: 15px; }
  .works__list--all .works__area { font-size: 12.5px !important; }
}
@media (max-width: 400px) { .fv__btns .button { font-size: 14px !important; } }
/* サービスのカード（スマホのピン留め）：写真は低くせず、横幅を広げ余白を詰めて収める */
@media (max-width: 960px) {
  #service.is-hs .svc4__card { flex-basis: 88% !important; }
  #service.is-hs .svc4 { gap: 12px; }
  #service.is-hs .svc4__img { aspect-ratio: 16 / 10 !important; }
  #service.is-hs .svc4__body { padding: 14px 16px 14px !important; }
  #service.is-hs .svc4__body h3 { font-size: 18px; margin-top: 2px; }
  #service.is-hs .svc4__desc { margin-top: 6px; }
  #service.is-hs .svc4__tags { margin-top: 8px; }
  #service.is-hs .svc4__go { padding-top: 8px !important; }
  #service.is-hs .svc4__go i { width: 34px; height: 34px; }
  #service.is-hs .sec-top { margin-bottom: 10px !important; }
}
@media (max-width: 960px) {
  .fv__sub { line-height: 1.6 !important; margin-top: 10px !important; }
  .fv__btns { margin-top: 16px !important; }
}
@media (max-width: 960px) and (max-height: 700px) {
  #service.is-hs .svc4__tags { display: none !important; }
  #service.is-hs .sec-top .label { display: none; }
}
@media (max-width: 960px) and (max-height: 600px) {
  #service.is-hs .svc4__catch { display: none; }
}
@media (min-width: 401px) and (max-width: 960px) { .fv__frame { height: calc(100svh - 346px); } }
/* 言葉の途中で折り返さない（「・」「、」のところで折り返す） */
.ctalk a span, .pa__worry, .pa__ans b, .svc4__catch, .works__item h3 { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 400px) { .pa__worry { font-size: 13.5px !important; } }
.ctalk a span { word-break: normal; overflow-wrap: normal; }
.ctalk .ph { font-style: normal; display: inline-block; }
@media (max-width: 860px) {
  .contact-soft__box { padding: 34px 18px 18px !important; }
  .contact-soft__box > div:first-child { padding: 0 6px; }
  .ctalk { padding: 20px 12px 12px !important; border-radius: 18px; }
  .ctalk__q { padding: 0 4px; }
  .ctalk a { gap: 10px; padding: 12px 10px !important; }
}

/* ===== 2026-10-09 手紙の文字を大きく（ボス）：PC 16→18px・スマホ 15→17px。罫線の間隔も字に合わせる ===== */
.pa__letter { background-image: repeating-linear-gradient(transparent 0 39px, rgba(29,95,173,.10) 39px 40px) !important; background-position: 0 var(--lt, 0px); }
.pa__letter p { font-size: 18px !important; line-height: 40px !important; }
.pa__hello { font-size: 25px !important; line-height: 40px !important; }
.pa__sign { font-size: 19px !important; }
@media (max-width: 960px) {
  .pa__letter { background-image: repeating-linear-gradient(transparent 0 35px, rgba(29,95,173,.10) 35px 36px) !important; padding: 24px 22px 26px !important; }
  .pa__letter p { font-size: 17px !important; line-height: 36px !important; letter-spacing: .01em; }
  .pa__hello { font-size: 22px !important; line-height: 36px !important; }
  .pa__sign { font-size: 18px !important; }
}
.pa__letter p.pa__hello { font-size: 25px !important; line-height: 40px !important; font-weight: 600; color: var(--ink) !important; }
.pa__letter p.pa__sign { font-size: 19px !important; }
@media (max-width: 960px) { .pa__letter p.pa__hello { font-size: 21px !important; line-height: 36px !important; } .pa__letter p.pa__sign { font-size: 18px !important; } }

/* ===== 2026-10-09 ホーム画面に追加して開いたとき（画面が縦に長い）：お知らせが顔にかかる → スマホの絵の真下へ ===== */
@media (max-width: 960px) and (min-height: 720px) {
  .fv__chip { left: auto !important; right: -4px !important; top: calc(100% + 10px) !important; bottom: auto !important; }
}
@media (min-width: 961px) { .works__list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; } .works__list:has(> :only-child), .works__list:has(> :nth-child(2):last-child) { max-width: 980px; margin-left: auto !important; margin-right: auto !important; } }

/* ══ 2026-10-10 iPhone の表示崩れ対策（ボス：横→縦で横スクロール／LINEで開くとトップ写真が大きい・角が四角くなる／サービスの横流れが不安定）══ */
/* 1) 制作実績（スマホ1列）：1fr は中身の幅まで縮まないため、横向き→縦向きで横長のまま残っていた */
@media (max-width: 960px) {
  .works__list { grid-template-columns: minmax(0, 1fr); }
  .works__item, .works__img, .svc4__card { min-width: 0; }
}
/* 2) 画面の高さは「向きが変わったときだけ」測った値（--app-h。main.js）を使う。
      LINE などのアプリ内ブラウザはツールバーの出入りで 100svh が変わり、トップの写真が大きくなっていた */
@media (max-width: 960px) { .fv__frame { height: calc(var(--app-h, 100svh) - 336px); min-height: 300px; max-height: 620px; } }
@media (min-width: 401px) and (max-width: 960px) { .fv__frame { height: calc(var(--app-h, 100svh) - 346px); } }
@media (min-width: 961px) { .fv__frame { height: calc(var(--app-h, 100svh) - 124px); } }
@media (max-width: 960px) {
  #service.is-hs { height: calc(var(--app-h, 100svh) + var(--hs-dist, 0px)); }
  #service.is-hs > .container { height: var(--app-h, 100svh); }
}
/* 3) 角丸の中で写真が動く（スライド・拡大）と、iPhone は角丸の切り抜きを落とすことがある → 角丸で切り抜き直す */
.fv__frame, .slider__frame, .svc4__card, .svc4__img, .works__img, .pm-hero { -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; }
/* 4) ページ全体の横はみ出しの保険（斜めのリボンなど）。横にスクロールできないようにする */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
/* 料金は数字を出さない（2026-10-11） */
.price--text b { font-family: var(--jp); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: .02em; }
/* オークションページ → サボテン屋さん向けサイトへの案内（2026-10-11） */
.sabo-sec { padding-top: clamp(40px, 6vw, 72px); padding-bottom: 0; }
.sabo-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line-2); border-radius: 20px; background: #f4f8f3; color: var(--ink); text-decoration: none; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sabo-link:hover { border-color: #2e5a44; box-shadow: 0 16px 40px rgba(46,90,68,.14); }
.sabo-link__img img { width: 100%; border-radius: 12px; display: block; }
.sabo-link__txt { display: flex; flex-direction: column; gap: 10px; }
.sabo-link .label { color: #2e5a44; }
.sabo-link b { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.5; }
.sabo-link__lead { color: var(--sub); font-size: 15px; }
.sabo-link__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 700; color: #2e5a44; }
.sabo-link__go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.sabo-link:hover .sabo-link__go svg { transform: translateX(4px); }
@media (max-width: 760px) { .sabo-link { grid-template-columns: minmax(0, 1fr); } }


/* ===== 2026-10-15 サービス（横スライドをやめて並べる・スマホは2列） ===== */
.svx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.svx__card { display: block; }
.svx__img { overflow: hidden; border-radius: 14px; background: var(--soft); }
.svx__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.svx__card:hover .svx__img img { transform: scale(1.05); }
.svx__no { margin-top: 18px; font: 600 12px/1 var(--en); letter-spacing: .14em; color: var(--blue); }
.svx__no span { margin-left: 10px; color: var(--mute); font-weight: 500; }
.svx__card h3 { margin-top: 10px; font-size: 18px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.svx__card:hover h3 { color: var(--blue); }
.svx__txt { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--sub); }
@media (max-width: 960px) { .svx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; } }
@media (max-width: 560px) {
  .svx { gap: 26px 12px; }
  .svx__img { border-radius: 10px; }
  .svx__no { margin-top: 12px; font-size: 10.5px; letter-spacing: .1em; }
  .svx__no span { margin-left: 6px; }
  .svx__card h3 { margin-top: 6px; font-size: 15px; letter-spacing: .02em; }
  .svx__txt { font-size: 13px; line-height: 1.7; }
}

/* ===== 2026-10-15 制作実績（お客さまのサイト＋業種別のデザイン・インスタから来た人にも見やすく） ===== */
.wx-sub { margin-top: 10px; color: var(--sub); font-size: 15px; }
.wx-reals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.wx-real { display: flex; flex-direction: column; }
.wx-real__img { display: block; border-radius: 16px; overflow: hidden; background: #EEF2F6; outline: 1px solid rgba(15,30,50,.06); }
.wx-real__img img { width: 100%; aspect-ratio: 1200 / 780; object-fit: cover; transition: transform .8s var(--ease); }
.wx-real:hover .wx-real__img img { transform: scale(1.03); }
.wx-real__body { padding-top: 18px; }
.wx-real__tag { font-size: 13px; color: var(--sub); }
.wx-real__tag span { display: inline-block; margin-right: 10px; padding: 3px 10px; border-radius: 99px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; }
.wx-real h3 { margin-top: 10px; font-size: 21px; line-height: 1.5; }
.wx-real h3 a:hover { color: var(--blue); }
.wx-real__lead { margin-top: 6px; font-size: 15px; color: var(--sub); }
.wx-real__feats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.wx-real__feats li { padding: 4px 11px; border-radius: 99px; background: var(--soft); font-size: 12.5px; color: var(--ink-2); }
.wx-real__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
.wx-real__more { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; }
.wx-real__more i { width: 15px; height: 15px; display: inline-flex; }
.wx-real__more:hover { background: var(--blue); }
.wx-real__site { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--blue); }
.wx-real__site svg { width: 13px; height: 13px; }

.wx-dzs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.wx-dzs--top { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 18px; }
.wx-dz { display: block; text-align: center; }
.wx-dz.is-hidden { display: none; }
.wx-dz__phone { position: relative; padding: 7px; border-radius: 26px; background: #0F1B27; box-shadow: 0 18px 36px -24px rgba(15,30,50,.55); transition: transform .5s var(--ease); }
.wx-dz__phone img { width: 100%; aspect-ratio: 9 / 17; object-fit: cover; object-position: top; border-radius: 20px; background: #fff; }
.wx-dz:hover .wx-dz__phone { transform: translateY(-6px); }
.wx-dz__cat { margin-top: 14px; font-size: 15px; font-weight: 700; }
.wx-dz__name { margin-top: 2px; font-size: 12.5px; color: var(--mute); }
.wx-top__dz { margin-top: 72px; }
.wx-top__dzhead { text-align: center; margin-bottom: 30px; }
.wx-top__dzhead h3 { font-size: 21px; }
.wx-top__dzhead p { margin-top: 6px; font-size: 14.5px; color: var(--sub); }

.wx-head { padding: 140px 0 40px; }
.wx-head .crumb { margin-bottom: 26px; }
.wx-head h1 { margin-top: 10px; font-size: clamp(30px, 4vw, 44px); line-height: 1.4; }
.wx-head__lead { margin-top: 12px; font-size: 16px; color: var(--sub); }
.wx-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 12px; margin-top: 30px; }
.wx-jump a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 15px; font-weight: 700; }
.wx-jump a::after { content: "↓"; color: var(--blue); }
.wx-jump small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--mute); }
.wx-jump a:hover { border-color: var(--blue); color: var(--blue); }
.wx-sec { scroll-margin-top: 80px; }
.wx-sec__head { margin-bottom: 36px; }
.wx-sec__head h2 { margin-top: 8px; font-size: clamp(24px, 3vw, 32px); line-height: 1.5; }
.wx-sec__head p:not(.label) { margin-top: 10px; font-size: 15px; color: var(--sub); }
.wx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.wx-chips button { padding: 9px 18px; border-radius: 99px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.wx-chips button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.wx-note { margin-top: 40px; font-size: 12.5px; color: var(--mute); }

@media (max-width: 960px) {
  .wx-dzs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wx-dzs--top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .wx-reals { grid-template-columns: 1fr; gap: 44px; }
  .wx-real h3 { font-size: 20px; }
  .wx-real__links { gap: 12px 20px; }
  .wx-dzs, .wx-dzs--top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .wx-dz__phone { padding: 6px; border-radius: 22px; }
  .wx-dz__phone img { border-radius: 17px; }
  .wx-dz__cat { margin-top: 10px; font-size: 14.5px; }
  .wx-top__dz { margin-top: 56px; }
  .wx-head { padding: 96px 0 24px; }
  .wx-jump { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wx-jump a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 14px; font-size: 14px; position: relative; }
  .wx-jump a::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
  .wx-jump small { margin-left: 0; }
  .wx-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--pad) * -1) 26px; padding: 2px var(--pad) 6px; scrollbar-width: none; }
  .wx-chips::-webkit-scrollbar { display: none; }
  .wx-chips button { flex: none; padding: 9px 16px; }
}
.wx-head + .wx-sec { padding-top: 48px; }
@media (max-width: 767px) { .wx-head + .wx-sec { padding-top: 36px; } }

/* ===== 2026-10-15 デバイス枠（iMac＋iPhone 風） ===== */
.dv { position: relative; padding: 0 9% 4% 0; }
.dv__mon { position: relative; background: #fff; border-radius: 10px; padding: 2.4% 2.4% 0; box-shadow: 0 26px 50px -28px rgba(10,22,40,.55), 0 0 0 1px rgba(10,22,40,.08); }
.dv__scr { border-radius: 3px; overflow: hidden; background: #0F1B27; outline: 1px solid rgba(10,22,40,.08); }
.dv__scr img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .9s var(--ease); }
.dv__chin { height: 0; padding-bottom: 7%; border-radius: 0 0 10px 10px; background: linear-gradient(#f2f4f7, #e3e7ec); margin: 0 -2.53%; }
.dv__stand { width: 22%; height: 0; padding-bottom: 9%; margin: 0 auto 0 calc(39% - 4.5%); background: linear-gradient(#dfe3e8, #c9cfd6); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.dv__phone { position: absolute; right: 0; bottom: 0; width: 25%; padding: 2.2%; border-radius: 13% / 6.5%; background: #10161d; box-shadow: 0 22px 40px -18px rgba(10,22,40,.6); }
.dv__pscr { border-radius: 10% / 4.8%; overflow: hidden; background: #fff; }
.dv__pscr img { width: 100%; aspect-ratio: 9 / 19; object-fit: cover; object-position: top; }
a:hover .dv__scr img { transform: scale(1.03); }

/* 制作実績ページのお客さまのサイト：デバイス枠・スマホも2列 */
.wx-real__img { border-radius: 0; background: none; outline: 0; overflow: visible; padding: 26px 26px 18px; border-radius: 18px; background: linear-gradient(160deg, #EAF1F9, #F7F4EE); }
.wx-real__tag em { font-style: normal; }
@media (max-width: 767px) {
  .wx-reals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
  .wx-real__img { padding: 14px 12px 10px; border-radius: 12px; }
  .wx-real__body { padding-top: 12px; }
  .wx-real__tag { font-size: 11px; }
  .wx-real__tag span { margin: 0 0 4px; padding: 2px 8px; font-size: 10.5px; }
  .wx-real__tag em { display: block; }
  .wx-real h3 { margin-top: 4px; font-size: 15px; }
  .wx-real__lead { font-size: 12.5px; line-height: 1.7; }
  .wx-real__feats { display: none; }
  .wx-real__links { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }
  .wx-real__more { padding: 8px 14px; font-size: 12.5px; gap: 8px; }
  .wx-real__site { font-size: 12.5px; }
}

/* ===== 2026-10-15 トップの制作実績（濃紺の背景・デバイス枠・ずらして並ぶスマホ） ===== */
.wt { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 150px) 0; background: radial-gradient(1200px 600px at 85% -10%, #1D3E66 0%, rgba(29,62,102,0) 60%), radial-gradient(900px 500px at -10% 110%, #173455 0%, rgba(23,52,85,0) 60%), #0B1A2B; color: #fff; }
.wt__big { position: absolute; top: clamp(30px, 5vw, 60px); left: 50%; transform: translateX(-50%); margin: 0; font: 700 clamp(90px, 17vw, 260px)/1 var(--en); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); white-space: nowrap; pointer-events: none; user-select: none; }
.wt .container { position: relative; }
.wt__head { text-align: center; }
.wt__head .label { justify-content: center; }
.wt__head h2 { margin-top: 12px; font-size: clamp(30px, 4vw, 44px); letter-spacing: .08em; }
.wt__head p:not(.label) { margin-top: 12px; color: rgba(255,255,255,.72); font-size: 15px; }
.wt__reals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: clamp(48px, 6vw, 80px); }
.wt-real { display: block; }
.wt-real .dv__mon { box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.wt-real__tag { margin-top: 22px; display: inline-block; padding: 3px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.3); font-size: 12px; color: rgba(255,255,255,.85); }
.wt-real h3 { margin-top: 10px; font-size: 21px; }
.wt-real__lead { margin-top: 4px; font-size: 14.5px; color: rgba(255,255,255,.7); }
.wt-real:hover h3 { color: var(--sky); }
.wt__dz { margin-top: clamp(80px, 10vw, 120px); }
.wt__dzhead { text-align: center; margin-bottom: 40px; }
.wt__en { font: 600 12px/1 var(--en); letter-spacing: .2em; text-transform: uppercase; color: var(--sky); }
.wt__dzhead h3 { margin-top: 12px; font-size: clamp(22px, 2.6vw, 28px); }
.wt__dzhead p:not(.wt__en) { margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,.72); }
.wt__dzs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 18px; }
.wt__dzs { align-items: start; }
.wt__dzs .wx-dz:nth-child(even) { margin-top: 40px; }
.wt__dzs .wx-dz__phone { background: #000; box-shadow: 0 24px 40px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12); }
.wt__dzs .wx-dz__cat { color: #fff; }
.wt__dzs .wx-dz__name { color: rgba(255,255,255,.55); }
.wt__more { margin-top: 80px; text-align: center; }
.wt__btn { display: inline-flex; align-items: center; gap: 14px; padding: 16px 18px 16px 28px; border-radius: 99px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; transition: background .3s, color .3s; }
.wt__btn i { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wt__btn i svg { width: 14px; height: 14px; }
.wt__btn:hover { background: var(--sky); }
@media (max-width: 960px) {
  .wt__dzs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wt__dzs .wx-dz:nth-child(even) { margin-top: 0; }
  .wt__dzs .wx-dz:nth-child(3n+2) { margin-top: 36px; }
}
@media (max-width: 767px) {
  .wt__reals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .wt-real__tag { margin-top: 14px; padding: 2px 8px; font-size: 10.5px; }
  .wt-real h3 { margin-top: 6px; font-size: 15px; }
  .wt-real__lead { font-size: 12px; line-height: 1.7; }
  .wt__dzs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .wt__dzs .wx-dz:nth-child(3n+2) { margin-top: 0; }
  .wt__dzs .wx-dz:nth-child(even) { margin-top: 34px; }
  .wt__more { margin-top: 64px; }
  .wt__btn { font-size: 14px; padding: 13px 14px 13px 22px; }
}

/* ===== 2026-10-15 制作実績ページをおしゃれに（濃紺の見出し・交互に並ぶお客さまのサイト・濃紺で互い違いのデザイン） ===== */
.wx-head--dark { position: relative; overflow: hidden; padding: 150px 0 80px; color: #fff; background: radial-gradient(1100px 520px at 90% -20%, #1D3E66 0%, rgba(29,62,102,0) 60%), radial-gradient(800px 460px at -10% 120%, #173455 0%, rgba(23,52,85,0) 60%), #0B1A2B; }
.wx-head--dark .wt__big { top: auto; bottom: -0.18em; left: auto; right: -0.04em; transform: none; font-size: clamp(110px, 20vw, 300px); }
.wx-head--dark .container { position: relative; }
.wx-head--dark .crumb, .wx-head--dark .crumb a { color: rgba(255,255,255,.6); }
.wx-head--dark h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: .08em; }
.wx-head--dark .wx-head__lead { color: rgba(255,255,255,.75); }
.wx-head--dark .wx-jump a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(6px); }
.wx-head--dark .wx-jump a::after { color: var(--sky); }
.wx-head--dark .wx-jump small { color: rgba(255,255,255,.55); }
.wx-head--dark .wx-jump a:hover { background: #fff; color: var(--ink); border-color: #fff; }
.wx-head--dark + .wx-sec { padding-top: clamp(72px, 9vw, 120px); }

/* お客さまのサイト：パソコンでは1件ずつ大きく・左右交互 */
@media (min-width: 768px) {
  #real .wx-reals { grid-template-columns: 1fr; gap: clamp(64px, 8vw, 110px); }
  #real .wx-real { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
  #real .wx-real:nth-child(even) .wx-real__img { order: 2; }
  #real .wx-real__img { padding: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) clamp(22px, 3vw, 40px); border-radius: 24px; }
  #real .wx-real__body { padding-top: 0; }
  #real .wx-real h3 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 16px; }
  #real .wx-real__lead { font-size: 16px; margin-top: 10px; }
  #real .wx-real__feats { margin-top: 20px; }
  #real .wx-real__links { margin-top: 26px; }
  #real .wx-real__more { padding: 14px 24px; font-size: 15px; }
}
#real .wx-real:nth-child(even) .wx-real__img { background: linear-gradient(160deg, #F4EFE7, #E9F0F8); }
.wx-real__no { display: block; font: 600 clamp(40px, 5vw, 64px)/1 var(--en); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
@media (max-width: 767px) { .wx-real__no { display: none; } }

/* 業種別のデザイン：濃紺の背景・互い違い */
.wx-sec--dark { position: relative; color: #fff; background: radial-gradient(1000px 520px at 100% 0%, #1D3E66 0%, rgba(29,62,102,0) 60%), #0B1A2B; }
.wx-sec--dark .wx-sec__head p:not(.label) { color: rgba(255,255,255,.72); }
.wx-sec--dark .wx-chips button { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.wx-sec--dark .wx-chips button:hover { border-color: #fff; }
.wx-sec--dark .wx-chips button.is-on { background: #fff; border-color: #fff; color: var(--ink); }
.wx-sec--dark .wx-dzs { align-items: start; }
.wx-sec--dark .wx-dz__phone { background: #000; box-shadow: 0 24px 40px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12); }
.wx-sec--dark .wx-dz__cat { color: #fff; }
.wx-sec--dark .wx-dz__name { color: rgba(255,255,255,.55); }
.wx-sec--dark .wx-note { color: rgba(255,255,255,.5); }
.wx-sec--dark .wx-dzs:not(.is-filtered) .wx-dz:nth-child(even) { margin-top: 48px; }
@media (max-width: 960px) {
  .wx-sec--dark .wx-dzs:not(.is-filtered) .wx-dz:nth-child(even) { margin-top: 0; }
  .wx-sec--dark .wx-dzs:not(.is-filtered) .wx-dz:nth-child(3n+2) { margin-top: 40px; }
}
@media (max-width: 767px) {
  .wx-head--dark { padding: 104px 0 52px; }
  .wx-head--dark .wx-jump a { background: rgba(255,255,255,.08); }
  .wx-sec--dark .wx-dzs:not(.is-filtered) .wx-dz:nth-child(3n+2) { margin-top: 0; }
  .wx-sec--dark .wx-dzs:not(.is-filtered) .wx-dz:nth-child(even) { margin-top: 34px; }
}

/* ===== 2026-10-15 ホームページ制作ページ（3つのプラン・月額に入っているもの・比較表） ===== */
.pls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.pl { position: relative; display: flex; flex-direction: column; padding: 34px 28px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 44px -34px rgba(15,30,50,.4); }
.pl--best { border: 2px solid var(--blue); box-shadow: 0 26px 56px -30px rgba(29,95,173,.45); }
.pl__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 18px; border-radius: 99px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.pl__en { font: 600 12px/1 var(--en); letter-spacing: .2em; color: var(--blue); }
.pl h3 { margin-top: 10px; font-size: 24px; letter-spacing: .04em; }
.pl__catch { margin-top: 6px; font-size: 14.5px; color: var(--sub); }
.pl__prices { margin-top: 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.pl__price { display: flex; align-items: baseline; gap: 8px; }
.pl__price span { width: 3em; font-size: 13px; color: var(--sub); }
.pl__price b { font: 600 34px/1.1 var(--en); letter-spacing: -.01em; color: var(--ink); }
.pl__price em { font-style: normal; font-size: 14px; font-weight: 700; }
.pl__price--m b { font-size: 24px; color: var(--blue); }
.pl__price--ask { font-size: 15px; font-weight: 700; }
.pl__who { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); background: var(--soft); padding: 8px 12px; border-radius: 10px; }
.pl__spec { margin: 14px 0 0; display: grid; gap: 4px; font-size: 13.5px; }
.pl__spec div { display: flex; gap: 10px; } .pl__spec dt { width: 5em; color: var(--sub); } .pl__spec dd { margin: 0; font-weight: 700; }
.pl__items { margin-top: 16px; display: grid; gap: 8px; flex: 1; }
.pl__items li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.7; }
.pl__items li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.pl__items a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.pl__go { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; }
.pl--best .pl__go { background: var(--blue); }
.pl__go i { width: 15px; height: 15px; display: inline-flex; } .pl__go:hover { opacity: .88; }
.pl__note { margin-top: 26px; font-size: 13px; line-height: 1.9; color: var(--sub); text-align: center; }
.mi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mi li { padding: 24px 20px; border-radius: 18px; background: #fff; }
.mi__ic { width: 46px; height: 46px; border-radius: 50%; background: var(--sky-soft, #EAF2FB); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; }
.mi__ic svg { width: 22px; height: 22px; }
.mi b { display: block; margin-top: 14px; font-size: 16px; }
.mi p { margin-top: 6px; font-size: 13.5px; line-height: 1.8; color: var(--sub); }
.own { margin-top: 28px; display: flex; gap: 20px; align-items: flex-start; padding: 28px; border-radius: 20px; background: var(--deep); color: #fff; }
.own__ic { flex: none; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--sky); }
.own h3 { font-size: 19px; } .own p { margin-top: 8px; font-size: 14.5px; line-height: 1.9; color: rgba(255,255,255,.82); } .own b { color: #fff; }
.cmp { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.cmp table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.cmp thead th { background: var(--soft); font-size: 15px; } .cmp tbody th { text-align: left; color: var(--sub); font-weight: 500; white-space: nowrap; }
.cmp .is-best { background: #F2F7FD; font-weight: 700; } .cmp thead .is-best { background: var(--blue); color: #fff; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.wx-jump--2 { grid-template-columns: repeat(2, minmax(0, 260px)); }
@media (max-width: 960px) { .pls { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 30px; } .mi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .pl { padding: 30px 20px 22px; } .pl h3 { font-size: 22px; } .pl__price b { font-size: 30px; }
  .mi { gap: 10px; } .mi li { padding: 18px 14px; } .mi b { font-size: 15px; } .mi p { font-size: 12.5px; }
  .own { flex-direction: column; padding: 22px 20px; } .own h3 { font-size: 17px; }
  .cmp { margin: 0 calc(var(--pad) * -1); border-radius: 0; border-left: 0; border-right: 0; } .cmp th, .cmp td { padding: 12px 10px; font-size: 13px; }
  .wx-jump--2 { grid-template-columns: 1fr 1fr; }
}

/* ===== 2026-10-15 オープン記念価格を大きく ===== */
.ob { position: relative; overflow: hidden; margin: 0 0 40px; padding: 34px 32px; border-radius: 24px; text-align: center; color: #fff; background: linear-gradient(120deg, #1D5FAD 0%, #2C7BD6 55%, #F2A93B 140%); box-shadow: 0 30px 60px -36px rgba(29,95,173,.7); }
.ob::before { content: "OPEN"; position: absolute; right: -10px; bottom: -40px; font: 700 160px/1 var(--en); color: rgba(255,255,255,.08); letter-spacing: -.03em; pointer-events: none; }
.ob__en { font: 600 12px/1 var(--en); letter-spacing: .3em; color: #FFE3A8; }
.ob__ttl { margin-top: 10px; font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; letter-spacing: .08em; }
.ob__txt { margin-top: 10px; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.9); } .ob__txt b { color: #fff; font-size: 17px; }
.ob__left { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 18px; padding: 10px 22px; border-radius: 99px; background: rgba(255,255,255,.16); font-size: 14px; }
.ob__left b { font-size: 15px; } .ob__left span { font: 700 28px/1 var(--en); color: #FFE3A8; margin: 0 2px; }
.pl__open { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 99px; background: #FFF1D6; color: #9A5B00; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.ob-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 20px; border-radius: 99px; background: #F2A93B; color: #1B1206; font-size: 14px; font-weight: 700; }
.ob-pill i { width: 8px; height: 8px; border-radius: 50%; background: #1B1206; animation: obp 1.6s ease-in-out infinite; }
@keyframes obp { 50% { opacity: .25; } }
@media (max-width: 767px) { .ob { padding: 28px 18px; border-radius: 18px; } .ob__txt { font-size: 14px; } .ob::before { font-size: 110px; } .ob-pill { font-size: 13px; padding: 9px 16px; } }
.ob__left { white-space: nowrap; }

/* ===== 2026-10-17 制作実績ページを温かい雰囲気に（参考：TABUN大丈夫・mamamamamamama・ANDMADE） ===== */
:root { --cream: #FBF4EA; --sand: #F3E8D8; --brown: #3A2E27; --brown-2: #6B5A4E; --terra: #D0704A; --sage: #DDE6D3; }
.wk-hero { position: relative; overflow: hidden; padding: 128px 0 72px; background:
  radial-gradient(520px 360px at 88% 18%, rgba(244,196,160,.45) 0%, rgba(244,196,160,0) 70%),
  radial-gradient(460px 340px at 4% 96%, rgba(196,214,180,.55) 0%, rgba(196,214,180,0) 70%),
  var(--cream); color: var(--brown); }
.wk-hero::before { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .28 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wk-hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.wk-hero .crumb, .wk-hero .crumb a { color: var(--brown-2); }
.wk-hero__hand { margin-top: 26px; font-family: "Klee One", var(--jp); font-weight: 600; font-size: clamp(16px, 1.6vw, 19px); color: var(--terra); letter-spacing: .06em; }
.wk-hero h1 { margin-top: 6px; font-size: clamp(36px, 4.6vw, 56px); letter-spacing: .1em; color: var(--brown); line-height: 1.35; }
.wk-hero__lead { margin-top: 16px; font-size: 15.5px; line-height: 2; color: var(--brown-2); }
.wk-jump { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.wk-jump a { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px 13px 22px; border-radius: 99px; background: #fff; border: 1.5px solid #EAD9C4; font-size: 15px; font-weight: 700; color: var(--brown); box-shadow: 0 8px 18px -14px rgba(90,60,30,.45); transition: transform .3s var(--ease), border-color .3s; }
.wk-jump a small { font-size: 12px; font-weight: 600; color: var(--terra); }
.wk-jump a::after { content: "↓"; color: var(--terra); }
.wk-jump a:hover { transform: translateY(-2px); border-color: var(--terra); }
.wk-hero__prints { position: relative; height: 470px; }
.wk-print { position: absolute; margin: 0; padding: 9px 9px 26px; background: #fff; border-radius: 4px; box-shadow: 0 18px 34px -20px rgba(70,45,25,.55), 0 2px 4px rgba(70,45,25,.08); }
.wk-print img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 2px; }
.wk-print::after { content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: rgba(232,214,188,.82); border-radius: 2px; }
.wk-print--0 { width: 62%; height: 54%; left: 16%; top: 2%; transform: rotate(-3deg); z-index: 2; }
.wk-print--0 img { object-position: center; }
.wk-print--1 { width: 25%; height: 52%; left: 0; top: 44%; transform: rotate(-7deg); z-index: 3; }
.wk-print--2 { width: 25%; height: 52%; left: 27%; top: 50%; transform: rotate(4deg); z-index: 4; }
.wk-print--3 { width: 25%; height: 52%; left: 54%; top: 42%; transform: rotate(-2deg); z-index: 3; }
.wk-print--4 { width: 23%; height: 48%; left: 77%; top: 6%; transform: rotate(6deg); z-index: 1; }
.wk-print--1::after, .wk-print--3::after { transform: translateX(-50%) rotate(4deg); }
.wk-hero + .wx-sec { padding-top: clamp(72px, 9vw, 120px); }
@media (prefers-reduced-motion: no-preference) {
  .wk-print { animation: wkFloat 7s ease-in-out infinite alternate; }
  .wk-print--1 { animation-delay: -2s; } .wk-print--2 { animation-delay: -4s; } .wk-print--3 { animation-delay: -1s; } .wk-print--4 { animation-delay: -3s; }
}
@keyframes wkFloat { to { translate: 0 -6px; } }

.wk-hand { font-family: "Klee One", var(--jp); font-weight: 600; font-size: 17px; color: var(--terra); letter-spacing: .08em; }
.wk-sec { background: #FFFCF7; }
.wk-sec .wx-sec__head h2 { color: var(--brown); }
.wk-sec .wx-sec__head p:not(.wk-hand) { color: var(--brown-2); }
#real.wk-sec .wx-real__img { background: linear-gradient(160deg, #F7EDE0, #EEF1E6); }
#real.wk-sec .wx-real:nth-child(even) .wx-real__img { background: linear-gradient(160deg, #EEF1E6, #F8EBDD); }
.wk-sec .wx-real__more { background: var(--brown); }
.wk-sec .wx-real__more:hover { background: var(--terra); }
.wk-sec--sand { position: relative; background: var(--sand); }
.wk-sec--sand::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 48px; background: #FFFCF7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v18c-120 22-260 30-420 18S700 6 540 14 200 44 0 30z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v18c-120 22-260 30-420 18S700 6 540 14 200 44 0 30z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.wk-sec--sand .wx-chips button { background: #FFFCF7; border-color: #E2CFB6; color: var(--brown); }
.wk-sec--sand .wx-chips button:hover { border-color: var(--terra); }
.wk-sec--sand .wx-chips button.is-on { background: var(--terra); border-color: var(--terra); color: #fff; }
.wk-sec--sand .wx-dzs { align-items: start; }
.wk-sec--sand .wx-dz__phone { background: #fff; padding: 7px; border-radius: 22px; box-shadow: 0 22px 36px -24px rgba(80,50,25,.55), 0 0 0 1px rgba(120,90,60,.08); }
.wk-sec--sand .wx-dz__phone img { border-radius: 16px; }
.wk-sec--sand .wx-dz:nth-child(4n+1) .wx-dz__phone { transform: rotate(-1.2deg); }
.wk-sec--sand .wx-dz:nth-child(4n+3) .wx-dz__phone { transform: rotate(1.2deg); }
.wk-sec--sand .wx-dz:hover .wx-dz__phone { transform: rotate(0) translateY(-4px); }
.wk-sec--sand .wx-dz__phone { transition: transform .4s var(--ease); }
.wk-sec--sand .wx-dz__cat { color: var(--brown); }
.wk-sec--sand .wx-dz__name { color: var(--brown-2); }
.wk-sec--sand .wx-note { color: var(--brown-2); }
.wk-sec--sand .wx-dzs:not(.is-filtered) .wx-dz:nth-child(even) { margin-top: 48px; }
@media (max-width: 960px) {
  .wk-hero__in { grid-template-columns: 1fr; gap: 28px; }
  .wk-hero__prints { height: min(78vw, 440px); max-width: 560px; }
  .wk-sec--sand .wx-dzs:not(.is-filtered) .wx-dz:nth-child(even) { margin-top: 0; }
  .wk-sec--sand .wx-dzs:not(.is-filtered) .wx-dz:nth-child(3n+2) { margin-top: 40px; }
}
@media (max-width: 767px) {
  .wk-hero { padding: 100px 0 48px; }
  .wk-hero__hand { margin-top: 18px; }
  .wk-jump { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .wk-jump a { flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 16px; border-radius: 18px; font-size: 14px; position: relative; }
  .wk-jump a::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
  .wk-print { padding: 6px 6px 16px; }
  .wk-print::after { width: 44px; height: 14px; top: -7px; }
  .wk-sec--sand .wx-dzs:not(.is-filtered) .wx-dz:nth-child(3n+2) { margin-top: 0; }
  .wk-sec--sand .wx-dzs:not(.is-filtered) .wx-dz:nth-child(even) { margin-top: 34px; }
  .wk-sec--sand::before { height: 26px; }
}
.wk-sec .wx-sec__head .wk-hand { margin-top: 0; font-size: 17px; color: var(--terra); }
.wk-sec .wx-real__tag span { background: var(--terra); }
.wk-sec .wx-real__site { color: var(--brown-2); }
.wk-sec .wx-real__site:hover { color: var(--terra); }
@media (max-width: 767px) { .wk-hero__hand { font-size: 14.5px; letter-spacing: .02em; } }

/* フッターの「ツール」欄（10/18 ボス：旧サーバーの道具を移した・お客さんが使えるように） */
.footer__nav-label { grid-column: 1 / -1; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.footer__nav-label ~ a { white-space: nowrap; }
@media (max-width: 760px) { .footer__nav-label ~ a { grid-column: 1 / -1; } }

/* ===== 2026-10-18 無料ツール（/tools/）：制作実績と同じ温かい色味。ツールが増えても探しやすいよう検索＋種類で絞り込み ===== */
.tl-hero { padding-bottom: 64px; }
.tl-hero .container { position: relative; }
.tl-assure { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.tl-assure li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: rgba(255,255,255,.75); border: 1px solid #EAD9C4; font-size: 14px; font-weight: 700; color: var(--brown); }
.tl-assure svg { width: 18px; height: 18px; color: var(--terra); flex: none; }
.tl-sec { padding-top: clamp(48px, 6vw, 80px) !important; }
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid #EFE2D1; box-shadow: 0 14px 30px -26px rgba(80,50,25,.5); }
.tl-search { flex: 1 1 300px; display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 50px; border-radius: 14px; background: var(--cream); border: 1.5px solid transparent; transition: border-color .2s; }
.tl-search:focus-within { border-color: var(--terra); }
.tl-search svg { width: 18px; height: 18px; color: var(--brown-2); flex: none; }
.tl-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--brown); outline: none; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 99px; border: 1px solid #E2CFB6; background: #FFFCF7; font-size: 14px; font-weight: 700; color: var(--brown); cursor: pointer; }
.tl-chips button small { font: 600 11.5px/1 var(--en); color: var(--terra); }
.tl-chips button:hover { border-color: var(--terra); }
.tl-chips button.is-on { background: var(--terra); border-color: var(--terra); color: #fff; }
.tl-chips button.is-on small { color: rgba(255,255,255,.85); }
.tl-count { margin: 26px 0 16px; font-size: 14px; color: var(--brown-2); }
.tl-count b { font: 600 20px/1 var(--en); color: var(--brown); margin-right: 2px; }
.tl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tl-card { display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid #EFE2D1; overflow: hidden; box-shadow: 0 18px 36px -30px rgba(80,50,25,.55); transition: transform .35s var(--ease), box-shadow .35s; }
.tl-card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(80,50,25,.6); }
.tl-card[hidden] { display: none; }
.tl-card__img { display: block; margin: 14px 14px 0; border-radius: 12px; overflow: hidden; background: var(--sand); border: 1px solid #EADBC6; }
.tl-card__bar { display: flex; gap: 5px; padding: 8px 10px; background: #F6EDE1; }
.tl-card__bar i { width: 8px; height: 8px; border-radius: 50%; background: #E3CDB2; }
.tl-card__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.tl-card:hover .tl-card__img img { transform: scale(1.03); }
.tl-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 22px; }
.tl-card__tags { display: flex; align-items: center; gap: 8px; }
.tl-card__tags span { padding: 3px 11px; border-radius: 99px; background: var(--sage); color: #3F5233; font-size: 12px; font-weight: 700; }
.tl-card__tags em { font: 700 11px/1 var(--en); letter-spacing: .12em; font-style: normal; color: var(--terra); }
.tl-card h3 { margin-top: 10px; font-size: 19px; line-height: 1.5; color: var(--brown); }
.tl-card__catch { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--terra); line-height: 1.7; }
.tl-card__desc { margin-top: 8px; font-size: 14px; line-height: 1.9; color: var(--brown-2); }
.tl-card__meta { margin: 14px 0 0; display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--cream); font-size: 13px; }
.tl-card__meta div { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; }
.tl-card__meta dt { color: var(--brown-2); }
.tl-card__meta dd { margin: 0; color: var(--brown); font-weight: 500; }
.tl-card__go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 20px; border-radius: 99px; background: var(--brown); color: #fff; font-size: 14.5px; font-weight: 700; transition: background .3s; }
.tl-card__go i { width: 14px; display: inline-flex; }
.tl-card__go:hover { background: var(--terra); }
.tl-empty { margin-top: 10px; padding: 28px; border-radius: 16px; background: #fff; text-align: center; color: var(--brown-2); }
.tl-ask { margin-top: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: 26px; background: var(--sand); }
.tl-ask h2 { margin-top: 4px; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.55; color: var(--brown); }
.tl-ask p:not(.wk-hand) { margin-top: 10px; font-size: 14.5px; color: var(--brown-2); }
.tl-note { margin-top: 24px; font-size: 12.5px; color: var(--brown-2); }
.footer__nav-label { color: inherit; }
@media (max-width: 1000px) { .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .tl-assure li { font-size: 13px; padding: 8px 13px; }
  .tl-bar { padding: 12px; border-radius: 16px; }
  .tl-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
  .tl-chips::-webkit-scrollbar { display: none; }
  .tl-chips button { flex: none; }
  .tl-grid { grid-template-columns: 1fr; gap: 18px; }
  .tl-ask { grid-template-columns: 1fr; }
}

/* 2026-10-18 メニューが6つになったので、961〜1180px もメニューボタン（≡）にする（文字の折り返し防止） */
@media (min-width: 961px) and (max-width: 1180px) {
  .menu-btn { display: flex; align-items: center; gap: 8px; width: auto; height: 46px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; flex-direction: row; position: relative; z-index: 2; cursor: pointer; }
  .menu-btn span { display: none !important; }
  .menu-btn::before { content: ""; width: 16px; height: 2px; background: #fff; box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff; }
  .menu-btn em { font: 600 12px var(--en); letter-spacing: .14em; font-style: normal; }
  .is-menu-open .menu-btn::before { box-shadow: none; transform: rotate(45deg); }
  .nav { position: fixed; inset: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: 0 var(--pad); font-size: 22px; font-weight: 700; background: #fff; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
  .is-menu-open .nav { opacity: 1; visibility: visible; }
  .nav__cta { margin-top: 14px; height: 56px; font-size: 16px; }
}
@media (min-width: 1181px) and (max-width: 1320px) { .nav { gap: 20px; font-size: 13.5px; } .nav a { white-space: nowrap; } }
@media (min-width: 961px) and (max-width: 1180px) {
  .header__inner { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #fff; position: relative; }
  .logo, .menu-btn { position: relative; z-index: 3; }
  .nav { position: fixed; inset: 0; z-index: 2; padding: 120px max(48px, calc((100vw - 760px) / 2)) 40px; justify-content: flex-start; gap: 0; background: var(--bg); }
  .nav a:not(.nav__cta) { display: block; width: 100%; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 20px; }
  .nav__cta { margin-top: 26px; width: 100%; justify-content: center; }
  .is-menu-open .header__inner { box-shadow: none; }
  .is-menu-open .menu-btn::after { content: ""; position: absolute; left: 14px; width: 16px; height: 2px; background: #fff; transform: rotate(-45deg); }
}

/* ===== 2026-10-18 オンラインショップ制作・オークションサイト制作：チラシと同じ雰囲気（オフホワイト×チャコール×テラコッタ） ===== */
:root { --fl-bg: #F7F3EE; --fl-ink: #2B2B2B; --fl-sub: #5F5A55; --fl-terra: #C5582D; --fl-terra-d: #A9471F; --fl-peach: #F6E3D3; --fl-line: #E7DED3; }
.fh { position: relative; overflow: hidden; padding: 128px 0 80px; background: radial-gradient(640px 520px at 92% 30%, rgba(234,205,178,.55) 0%, rgba(234,205,178,0) 70%), var(--fl-bg); color: var(--fl-ink); }
.fh__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.fh .crumb, .fh .crumb a { color: var(--fl-sub); }
.fh__label { margin-top: 28px; display: inline-block; padding-bottom: 10px; border-bottom: 1px solid var(--fl-terra); font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--fl-terra); }
.fh h1 { margin-top: 18px; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.32; letter-spacing: .04em; font-weight: 800; color: var(--fl-ink); }
.fh__lead { margin-top: 18px; font-size: 16px; line-height: 2; color: var(--fl-sub); }
.fh__price { position: relative; margin-top: 34px; padding: 34px 28px 22px; border-radius: 22px; background: var(--fl-peach); }
.fh__dl { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 6px 18px; border-radius: 99px; background: var(--fl-terra); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; }
.fh__nums { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 22px; align-items: end; }
.fh__nums > i { align-self: stretch; background: rgba(197,88,45,.35); }
.fh__nums span { display: block; font-size: 15px; font-weight: 700; color: var(--fl-terra); letter-spacing: .1em; }
.fh__nums b { font: 800 clamp(34px, 3.6vw, 48px)/1.1 var(--en); letter-spacing: -.01em; color: var(--fl-terra); }
.fh__nums em { font-style: normal; font-size: 20px; font-weight: 800; color: var(--fl-terra); margin-left: 2px; }
.fh__note { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--fl-sub); }
.fh__left { margin-top: 4px; text-align: center; font-size: 13px; color: var(--fl-sub); }
.fh__left b { color: var(--fl-terra-d); }
.fh__feats { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.fh__feats li { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: center; }
.fh__ic { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--fl-terra); color: var(--fl-terra); display: grid; place-items: center; }
.fh__ic svg { width: 24px; height: 24px; }
.fh__feats b { font-size: 17px; font-weight: 800; color: var(--fl-ink); }
.fh__feats small { font-size: 12.5px; color: var(--fl-sub); }
.fh__btns { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.fh__btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border-radius: 99px; background: var(--fl-terra); color: #fff; font-size: 15px; font-weight: 700; transition: background .3s, transform .3s var(--ease); }
.fh__btn i { width: 14px; display: inline-flex; }
.fh__btn:hover { background: var(--fl-terra-d); transform: translateY(-2px); }
.fh__btn--ghost { background: transparent; color: var(--fl-ink); border: 1.5px solid var(--fl-ink); }
.fh__btn--ghost:hover { background: var(--fl-ink); color: #fff; }
.fh__img { position: relative; }
.fh__img::before { content: ""; position: absolute; inset: 8% -6% -4% 10%; border-radius: 50%; background: rgba(233,209,186,.6); z-index: 0; }
.fh__img img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px -36px rgba(70,45,25,.5); }
.fa { padding: 0 0 20px; background: var(--fl-bg); }
.fa__box { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 22px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--fl-line); }
.fa__box--plain { background: var(--fl-bg); }
.fa__tag { padding: 7px 18px; border-radius: 99px; background: var(--fl-terra); color: #fff; font-size: 14px; font-weight: 700; }
.fa__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--fl-ink); font-weight: 700; }
.fa__nums span { font-size: 14px; }
.fa__nums b { font: 800 26px/1 var(--en); color: var(--fl-terra); }
.fa__nums em { font-style: normal; font-size: 15px; }
.fa__nums i { font-style: normal; color: var(--fl-sub); margin: 0 6px; }
.fa__link { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--fl-ink); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.fa__link i { width: 13px; display: inline-flex; }
.fa__link:hover { color: var(--fl-terra); }
.fl-sec { background: #fff; }
.fee { max-width: 760px; margin-top: 8px; padding: 28px; border-radius: 22px; background: var(--fl-bg); border: 1px solid var(--fl-line); }
.fee__ttl { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.fee__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--fl-line); }
.fee__row span { font-weight: 700; }
.fee__row b { font: 800 30px/1 var(--en); }
.fee__row b em { font-style: normal; font-size: 15px; margin-left: 2px; }
.fee__row small { grid-column: 1 / -1; font-size: 13px; color: var(--fl-sub); }
.fee__row.is-pono b, .fee__row.is-pono span { color: var(--fl-terra); }
.fee__note { margin-top: 12px; font-size: 12.5px; color: var(--fl-sub); line-height: 1.9; }
@media (max-width: 960px) {
  .fh { padding: 104px 0 56px; }
  .fh__in { grid-template-columns: 1fr; gap: 36px; }
  .fh__img { max-width: 520px; }
}
@media (max-width: 767px) {
  .fh h1 { font-size: clamp(32px, 9vw, 40px); }
  .fh__price { padding: 30px 16px 18px; }
  .fh__dl { font-size: 12px; padding: 5px 14px; }
  .fh__nums { gap: 12px; }
  .fh__nums b { font-size: clamp(26px, 8vw, 34px); }
  .fh__nums em { font-size: 15px; }
  .fh__nums span { font-size: 13px; }
  .fh__feats { flex-direction: column; }
  .fh__btns { flex-direction: column; }
  .fh__btn { justify-content: center; }
  .fa__box { padding: 18px; }
  .fa__link { margin-left: 0; }
  .fee { padding: 20px; }
}
.fh ~ main .label { color: var(--fl-terra); }

/* =====================================================================
   2026-10-18 サイト全体をチラシの雰囲気に（ボス）
   オフホワイト×チャコール×テラコッタ1色。青・濃紺の面はやめて、明るい面（白・ベージュ・淡いピーチ）に。
   色の変数を差し替えて、昔の部品も一度にそろえる（--blue は名前のままテラコッタになる）
   ===================================================================== */
:root {
  --ink: #2B2B2B; --ink-2: #45403B; --sub: #5F5A55; --mute: #8E857C; --line: #E7DED3; --line-2: #D8CABA;
  --bg: #F7F3EE; --soft: #F1E8DD; --blue: #C5582D; --blue-2: #D9774F; --sky: #F6E3D3; --sky-soft: #F6E3D3; --deep: #2B2B2B;
  --pop: #F6E3D3; --coral: #C5582D;
  --cream: #F7F3EE; --sand: #F1E8DD; --brown: #2B2B2B; --brown-2: #5F5A55; --terra: #C5582D; --sage: #F6E3D3;
  --fl-shadow: 0 22px 44px -32px rgba(70,45,25,.45);
}
::selection { background: var(--fl-terra); color: #fff; }

/* --- 見出し：チャコールの太いゴシック --- */
.sec-title, .h2, .wx-sec__head h2, .pa__title, .wt__head h2, .wk-hero h1, .nf h1, .contact-soft h2, .fv__title, .wdetail__head h1, .tl-ask h2, .page-head h1 { font-weight: 800; color: var(--fl-ink); }
.pa__title span { color: var(--fl-terra); }

/* --- ラベル：青い点＋英字 → テラコッタの字＋下に短い線（チラシの左上と同じ） --- */
.label { display: inline-block; padding-bottom: 12px; font: 700 12.5px/1.4 var(--en); letter-spacing: .2em; color: var(--fl-terra); background: linear-gradient(currentColor, currentColor) 0 100% / 30px 1.5px no-repeat; }
.label::before, .label::after { content: none !important; display: none !important; }
.label--light { color: var(--fl-terra); }
.pa__head .label, .wt__head .label, .works__head .label, .pa__reasons-head .label { background-position: 50% 100%; }
.wk-hand, .wk-sec .wx-sec__head .wk-hand { display: inline-block; padding-bottom: 12px; font: 700 12.5px/1.4 var(--en); letter-spacing: .2em; text-transform: uppercase; color: var(--fl-terra); background: linear-gradient(currentColor, currentColor) 0 100% / 30px 1.5px no-repeat; }
.wk-hero__hand { display: inline-block; padding-bottom: 10px; border-bottom: 1px solid var(--fl-terra); font-family: var(--jp); font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--fl-terra); }
.sec-title .mark { background-image: linear-gradient(transparent 64%, #F1CDB4 64%); }

/* --- ヘッダー：白いカプセルはそのまま・相談ボタンをテラコッタに --- */
.header__inner { background: rgba(255,255,255,.95); box-shadow: 0 12px 30px -20px rgba(70,45,25,.45); }
.nav a:not(.nav__cta):hover, .nav a[aria-current="page"] { color: var(--fl-terra); }
.nav__cta { background: var(--fl-terra); color: #fff; }
.nav__cta:hover { background: var(--fl-terra-d); }
.progress { background: var(--fl-terra); }
.cursor.is-link { background: rgba(197,88,45,.1); }

/* --- ボタン：テラコッタの丸いボタン／線のボタンはチャコール --- */
.button { background: var(--fl-terra); color: #fff; }
.button::before { background: var(--fl-terra-d); }
.button:hover { background: var(--fl-terra); }
.button svg { background: rgba(255,255,255,.2); }
.button--line { background: transparent; color: var(--fl-ink); border: 1.5px solid var(--fl-ink); }
.button--line::before { background: var(--fl-ink); }
.button--line:hover { background: transparent; color: #fff; }
.button--line svg, .button--white svg { background: rgba(43,43,43,.07); }
.button--line:hover svg { background: rgba(255,255,255,.18); }
.button--white { background: var(--fl-terra); color: #fff; }
.button--white::before { background: var(--fl-terra-d); }
.button--white svg { background: rgba(255,255,255,.2); }
.button--ghost { background: transparent; color: var(--fl-ink); border: 1.5px solid var(--fl-ink); }
.button--ghost::before { background: var(--fl-ink); }
.button--ghost:hover { background: transparent; color: #fff; }
.button--ghost svg { background: rgba(43,43,43,.07); }
.more:hover .more__arrow { background: var(--fl-terra); border-color: var(--fl-terra); }

/* --- 細い線の丸アイコン（チラシのカード決済・送料の丸） --- */
.ico, .mi__ic { width: 54px; height: 54px; border-radius: 50%; background: transparent; border: 1.5px solid var(--fl-terra); color: var(--fl-terra); }
.ico svg, .mi__ic svg { width: 24px; height: 24px; stroke-width: 1.6; }
.feat:hover .ico, .why:hover .ico { background: var(--fl-terra); color: #fff; }

/* --- カード・表・FAQ --- */
.feat, .why, .pl, .mi li, .wdetail__info, .tl-card, .tl-bar { border-color: var(--fl-line); }
.feat, .why { box-shadow: 0 1px 0 rgba(70,45,25,.03); }
.feat:hover, .why:hover { box-shadow: var(--fl-shadow); }
.sec--soft .feat, .sec--soft .why, .sec--soft .mi li { border: 1px solid var(--fl-line); }
.why__foot { color: var(--fl-terra); }
.table td.is-pono { background: #FBEFE6; color: var(--fl-terra); }
.table thead th.is-pono { color: var(--fl-terra); }
.checks li::before { border-color: var(--fl-terra); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5582D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E"); }
.faq summary::before { color: var(--fl-terra); font-weight: 800; }
.faq details { border-color: var(--fl-line); }
.faq summary i::before, .faq summary i::after { background: var(--fl-terra); height: 1.5px; }
.sim { border-color: var(--fl-line); }
.sim__mode { border-color: var(--line-2); border-radius: 99px; overflow: hidden; }
.sim__mode button.is-active { background: var(--fl-terra); }
.sim__result b, .sim__amount { color: var(--fl-terra); font-weight: 800; }

/* --- 流れ（タイムライン）：線と丸をテラコッタに・札は淡いピーチ --- */
.tl__line { background: var(--fl-line); }
.tl__dot { border-width: 1.5px; }
.tl__tag { background: var(--fl-peach); border: 0; color: var(--fl-terra-d); }
.tl__no { color: var(--fl-terra); }

/* --- 安心ポイントの小さな丸 --- */
.assure li { background: #fff; border-color: var(--fl-line); color: var(--fl-ink); }

/* --- お問い合わせの大きな帯：濃紺 → 淡いピーチの角丸の箱 --- */
.contact-soft__box { background: var(--fl-peach); color: var(--fl-ink); box-shadow: none; }
.contact-soft__box::before { right: -140px; top: -160px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); }
.contact-soft p { color: var(--fl-sub); }
.contact-soft .assure li { background: #fff; border-color: transparent; color: var(--fl-ink); }
.ctalk { box-shadow: 0 26px 50px -34px rgba(120,60,25,.5); }
.ctalk a { border-color: var(--fl-line); }
.ctalk a b { background: var(--fl-peach); color: var(--fl-terra); }
.ctalk a:hover { border-color: var(--fl-terra); background: #FDF6F1; }
.ctalk a:hover b { background: var(--fl-terra); color: #fff; }
.ctalk a:hover i { color: var(--fl-terra); }

/* --- フッター：濃紺 → ベージュの明るい面 --- */
.footer { background: var(--soft); color: var(--fl-sub); }
.footer::before { background: var(--bg); }
.footer .logo { color: var(--fl-ink); }
.footer a:hover { color: var(--fl-terra); }
.footer__nav a::before { background: rgba(197,88,45,.55); }
.footer__nav-label { border-top-color: rgba(43,43,43,.12); color: var(--fl-sub); }
.footer__big { color: #E8D8C6; -webkit-text-stroke: 0; }
.footer__bottom { border-top-color: rgba(43,43,43,.12); color: var(--mute); }

/* --- トップへ戻る・スマホ下の相談ボタン --- */
.to-top { background: #fff; border-color: var(--fl-line); color: var(--fl-terra); box-shadow: 0 12px 26px -14px rgba(70,45,25,.4); }
.to-top:hover { background: var(--fl-terra); color: #fff; border-color: var(--fl-terra); }
@media (max-width: 760px) {
  .sp-cta { background: var(--fl-terra); box-shadow: 0 16px 30px -14px rgba(120,55,20,.55); }
  .sp-cta em { background: #fff; color: var(--fl-terra-d); }
}

/* --- スマホのメニュー --- */
@media (max-width: 1180px) {
  .nav { background: var(--bg); }
  .nav a:not(.nav__cta) { border-bottom-color: var(--fl-line); }
}

/* --- 下層ページの見出し（Ponoについて・お問い合わせ・プライバシー）：大きな英字 → チラシの小さなラベル＋太い見出し --- */
.page-head { border-bottom: 0; background: radial-gradient(560px 460px at 92% 20%, rgba(234,205,178,.5) 0%, rgba(234,205,178,0) 70%), var(--bg); }
.page-head__en { display: inline-block; padding-bottom: 10px; border-bottom: 1px solid var(--fl-terra); font: 700 14px/1.4 var(--en); letter-spacing: .2em; text-transform: uppercase; color: var(--fl-terra); }
.page-head h1 { margin-top: 18px; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.3; letter-spacing: .04em; }
.page-head__lead b { color: var(--fl-ink); font-weight: 800; }
.page-head__grid { align-items: end; }

/* --- トップのファーストビュー --- */
.fv__frame { background: #EFE2D4; }
.fv__frame .slide::after { background: linear-gradient(90deg, rgba(43,33,25,0) 40%, rgba(43,33,25,.28) 100%), linear-gradient(180deg, rgba(43,33,25,.2) 0%, rgba(43,33,25,0) 30%); }
.fv__title em { color: var(--fl-terra); background-image: linear-gradient(transparent 70%, #F1CDB4 70%); }
.fv__phone, .fv__notch { border-color: #2B2B2B; }
.fv__notch { background: #2B2B2B; }
.pm-btn--red { background: var(--fl-terra); }
.pm-time { color: var(--fl-terra); }
.pm-list li i { background: var(--fl-terra); }
.pm-done { background: var(--fl-peach); color: var(--fl-terra-d); }
.fv__chip i { background: var(--fl-terra); }
@media (min-width: 961px) {
  .fv::before { background-image: radial-gradient(rgba(197,88,45,.16) 1.4px, transparent 1.6px) !important; }
  .fv__deco .b1 { background: radial-gradient(circle at 35% 35%, rgba(234,190,155,.55), rgba(234,190,155,0) 70%) !important; }
  .fv__deco .b2 { background: radial-gradient(circle at 40% 40%, rgba(246,227,211,.95), rgba(246,227,211,0) 70%) !important; }
  .fv__circle path { stroke: #E3A07E !important; }
  .fv__title em { background: none; }
}

/* --- 流れる帯：青＋黄 → テラコッタ＋淡いピーチ --- */
.band__row--1 { background: var(--fl-terra); box-shadow: 0 12px 30px -18px rgba(150,65,25,.6); }
.band__row--2 { background: var(--fl-peach); color: var(--fl-ink); box-shadow: none !important; }

/* --- トップの Web工房Pono（手紙） --- */
.pa { background: linear-gradient(180deg, var(--bg) 0%, #F3ECE2 100%); }
.pa__letter { box-shadow: 0 20px 40px -26px rgba(70,45,25,.38); }
.pa__letter, .pa__letter p { color: var(--fl-ink); }
.pa__letter { background-image: repeating-linear-gradient(transparent 0 39px, rgba(197,88,45,.13) 39px 40px) !important; }
@media (max-width: 960px) { .pa__letter { background-image: repeating-linear-gradient(transparent 0 35px, rgba(197,88,45,.13) 35px 36px) !important; } }

/* --- トップの制作実績：濃紺 → 白地に淡いピーチの光 --- */
.wt { background: radial-gradient(760px 520px at 92% 8%, rgba(234,205,178,.45) 0%, rgba(234,205,178,0) 70%), radial-gradient(640px 460px at 0% 100%, rgba(246,227,211,.7) 0%, rgba(246,227,211,0) 70%), #fff; color: var(--fl-ink); }
.wt__big { -webkit-text-stroke: 1px rgba(197,88,45,.13); }
.wt__head p:not(.label), .wt__dzhead p:not(.wt__en), .wt-real__lead { color: var(--fl-sub); }
.wt-real__tag { border-color: rgba(197,88,45,.45); color: var(--fl-terra); background: #fff; }
.wt-real:hover h3 { color: var(--fl-terra); }
.wt-real .dv__mon { box-shadow: 0 26px 50px -30px rgba(70,45,25,.5), 0 0 0 1px rgba(70,45,25,.06); }
.wt__en { color: var(--fl-terra); }
.wt__dzs .wx-dz__cat { color: var(--fl-ink); }
.wt__dzs .wx-dz__name { color: var(--fl-sub); }
.wt__btn { background: var(--fl-terra); color: #fff; }
.wt__btn i { background: #fff; color: var(--fl-terra); }
.wt__btn:hover { background: var(--fl-terra-d); }

/* --- デバイス枠・業種別デザインのスマホ：白い枠に（制作実績ページとそろえる） --- */
.dv__scr { background: #2B2B2B; }
.dv__phone { background: #2B2B2B; }
.wx-dz__phone, .wt__dzs .wx-dz__phone, .wx-sec--dark .wx-dz__phone { background: #fff; padding: 7px; border-radius: 22px; box-shadow: 0 22px 36px -24px rgba(80,50,25,.55), 0 0 0 1px rgba(120,90,60,.08); }
.wx-dz__phone img { border-radius: 16px; }
.wx-dz__cat { color: var(--fl-ink); }
.wx-dz__name { color: var(--fl-sub); }
.wx-dz:hover .wx-dz__cat { color: var(--fl-terra); }

/* --- ホームページ制作：上部（チラシと同じ作り） --- */
.fh--web .fh__img img { aspect-ratio: 1 / 1; object-position: 50% 50%; }
.fh__pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 9px 20px; border-radius: 99px; background: var(--fl-terra); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em; transition: background .3s; }
.fh__pill:hover { background: var(--fl-terra-d); }
.fh__pill i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: obp 1.6s ease-in-out infinite; }
.shot .fh__pill i { animation: none; }
.fh__jump { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); gap: 12px; }
.fh__jump a { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 44px 16px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--fl-line); font-size: 15px; font-weight: 700; color: var(--fl-ink); box-shadow: 0 12px 26px -22px rgba(70,45,25,.45); transition: border-color .3s, transform .3s var(--ease); }
.fh__jump a::after { content: "↓"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--fl-terra); font-weight: 700; }
.fh__jump small { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--fl-terra); }
.fh__jump a:hover { border-color: var(--fl-terra); transform: translateY(-2px); }
@media (max-width: 767px) { .fh__pill { font-size: 13px; padding: 8px 16px; } }
@media (max-width: 1180px) {
  .fh__jump { grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
  .fh__jump a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 34px 13px 14px; font-size: 14px; }
  .fh__jump a::after { right: 14px; }
  .fh__jump small { margin-left: 0; }
}

/* --- ホームページ制作：オープン記念価格・プラン・比較表 --- */
.ob { background: var(--fl-peach); color: var(--fl-ink); box-shadow: none; }
.ob::before { color: rgba(197,88,45,.07); }
.ob__en { color: var(--fl-terra); font-weight: 700; }
.ob__ttl { color: var(--fl-terra); font-weight: 800; }
.ob__txt { color: var(--fl-sub); }
.ob__txt b { color: var(--fl-ink); }
.ob__left { background: #fff; color: var(--fl-sub); }
.ob__left b { color: var(--fl-ink); }
.ob__left span { color: var(--fl-terra); font-weight: 800; }
.pl { box-shadow: var(--fl-shadow); }
.pl--best { border-color: var(--fl-terra); box-shadow: 0 26px 56px -32px rgba(197,88,45,.45); }
.pl__en { font-weight: 700; }
.pl h3 { font-weight: 800; }
.pl__open { background: var(--fl-peach); color: var(--fl-terra-d); }
.pl__price b { font-weight: 800; }
.pl__prices { border-color: var(--fl-line); }
.pl__who { background: var(--bg); }
.pl__go { background: var(--fl-ink); }
.pl--best .pl__go { background: var(--fl-terra); }
.mi li { border: 1px solid var(--fl-line); }
.own { background: #fff; color: var(--fl-ink); border: 1px solid var(--fl-line); }
.own__ic { background: transparent; border: 1.5px solid var(--fl-terra); color: var(--fl-terra); }
.own p { color: var(--fl-sub); }
.own b { color: var(--fl-terra); }
.cmp { border-color: var(--fl-line); }
.cmp .is-best { background: #FBEFE6; }
.cmp thead .is-best { background: var(--fl-terra); }
.cmp thead th { background: var(--soft); }
/* 業種別のデザイン（/web/）：濃紺 → 白 */
.wx-sec--dark { background: #fff; color: var(--fl-ink); }
.wx-sec--dark .wx-sec__head p:not(.label), .wx-sec--dark .wx-note { color: var(--fl-sub); }
.wx-sec--dark .wx-dz__cat { color: var(--fl-ink); }
.wx-sec--dark .wx-dz__name { color: var(--fl-sub); }

/* --- 制作実績・無料ツール：10/17 の温かい色をチラシの色にそろえる（手書き風の字はやめてゴシックに） --- */
.wk-hero { background: radial-gradient(620px 460px at 90% 22%, rgba(234,205,178,.55) 0%, rgba(234,205,178,0) 70%), radial-gradient(460px 340px at 4% 96%, rgba(246,227,211,.8) 0%, rgba(246,227,211,0) 70%), var(--bg); color: var(--fl-ink); }
.wk-hero::before { opacity: .2; }
.wk-hero h1 { letter-spacing: .06em; }
.wk-hero__lead { color: var(--fl-sub); }
.wk-jump a { border-color: var(--fl-line); }
.wk-sec { background: #fff; }
.wk-sec--sand { background: var(--soft); }
.wk-sec--sand::before { background: #fff; }
#real.wk-sec .wx-real__img { background: linear-gradient(160deg, #F6E3D3, #F7F3EE); }
#real.wk-sec .wx-real:nth-child(even) .wx-real__img { background: linear-gradient(160deg, #F7F3EE, #F6E3D3); }
.wk-sec .wx-real__more { background: var(--fl-ink); }
.wk-sec .wx-real__more:hover { background: var(--fl-terra); }
.wk-sec--sand .wx-chips button { background: #fff; border-color: var(--line-2); }
.wx-chips button.is-on { background: var(--fl-terra); border-color: var(--fl-terra); color: #fff; }
.wx-real__img { background: linear-gradient(160deg, #F6E3D3, #F7F3EE); }
.wx-real__no { -webkit-text-stroke: 1px rgba(197,88,45,.4); }
.wx-real__tag span { background: var(--fl-terra); }
.wx-real__feats li { background: var(--bg); border: 1px solid var(--fl-line); }
.tl-card__tags span { background: var(--fl-peach); color: var(--fl-terra-d); }
.tl-card, .tl-bar { box-shadow: var(--fl-shadow); }
.tl-card__img, .tl-card__bar { border-color: var(--fl-line); }
.tl-card__bar { background: var(--soft); }
.tl-card__bar i { background: var(--line-2); }
.tl-assure li { border-color: var(--fl-line); background: #fff; }
.tl-chips button { background: #fff; border-color: var(--line-2); }
.tl-ask { background: var(--fl-peach); }
.tl-ask p:not(.wk-hand) { color: var(--fl-sub); }

/* --- 制作実績の1件ずつのページ --- */
.wdetail { background: radial-gradient(620px 460px at 95% 0%, rgba(234,205,178,.4) 0%, rgba(234,205,178,0) 70%); }
.wdetail__mock { background: var(--soft); }
.wdetail__info { box-shadow: var(--fl-shadow); border: 1px solid var(--fl-line); }
.wdetail__info div { border-bottom-color: var(--fl-line); }
.works__tags span { background: var(--fl-peach); color: var(--fl-terra-d); }
.works__tags span.is-sample { background: #fff; color: var(--fl-sub); border: 1px solid var(--fl-line); }
.works__img { box-shadow: 0 14px 34px -24px rgba(70,45,25,.45); outline-color: rgba(70,45,25,.06); }
.wshot__phone { box-shadow: 0 22px 40px -24px rgba(70,45,25,.5); }

/* --- お問い合わせフォーム --- */
.form__row, .form__row:first-of-type { border-color: var(--fl-line); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { border-color: var(--line-2); }
.form input:focus, .form textarea:focus { border-color: var(--fl-terra); box-shadow: 0 0 0 3px rgba(197,88,45,.12); }
.form__req { background: var(--fl-terra); }
.form__checks input, .form__agree input { accent-color: var(--fl-terra); }
.form__agree a { color: var(--fl-terra); }

/* --- Ponoについて：概要の表 --- */
.dl, .dl > div { border-color: var(--fl-line); }
.dl dd a, .prose a { color: var(--fl-terra); }
/* 光の円が見出しに重ならないように・札は文字の幅だけ */
.contact-soft__box > div { position: relative; z-index: 1; }
.contact-soft .label { color: var(--fl-terra); }
.tl__tag { justify-self: start; }
.mi b { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 767px) { .mi__ic { width: 46px; height: 46px; } .mi__ic svg { width: 21px; height: 21px; } }
/* 線画（青い線のPNG）をテラコッタ色に（測って #C5582D にいちばん近い値） */
.page-head__illust { filter: hue-rotate(160deg) saturate(.55) brightness(1.45); }
/* 数字が太く（Inter 800）なって幅が増えたので、スマホでは「円」が折り返さないように */
@media (max-width: 767px) { .fh__nums > div { white-space: nowrap; } .fh__nums b { font-size: clamp(24px, 7vw, 32px); } }

/* =====================================================================
   2026-10-19 温かみ（ボス「もっと温かみのあるサイトに」）
   色の方向（テラコッタ・ベージュ・ピーチ・チャコール）はそのまま。参考：TABUN大丈夫（散らしたプリント写真）・ほぼ日（手描き・丸い形）・mamamamamamama（紙の質感）・10/17 の制作実績ページ
   書体：丸ゴシック（Zen Maru Gothic）＋手書き風のひと言（Klee One）／地：紙のノイズ＋桃・若草のにじみ／境目：手で引いた波線
   写真：白い縁のプリント＋マスキングテープ／小物：手描きの星・葉っぱ・ぐるぐる・キラッ／形：丸い角・暖色のやわらかい影・押したくなるボタン
   ===================================================================== */
:root {
  --jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --en: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --hand: "Klee One", "Zen Maru Gothic", sans-serif;
  --leaf: #8FA672; --leaf-soft: rgba(205,221,186,.55); --peach-soft: rgba(244,206,182,.5);
  --w-line: #EADCCB; --w-shadow: 0 22px 44px -28px rgba(150,85,40,.42), 0 2px 6px -2px rgba(150,85,40,.08);
  --w-radius: 28px;
}
body { font-weight: 500; }
b, strong { font-weight: 700; }
.band__row--2 .band__track { font-family: var(--jp); }

/* --- 紙の質感：細かいノイズ＋ゆるい繊維を全体にうっすら（写真や文字の読みやすさに影響しない濃さ） --- */
body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .09 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); opacity: .7; }

/* --- 地：オフホワイトに、ところどころ桃色・若草色のにじみ（直線の境目が見えないよう、白い面はやめて同じ紙の色に） --- */
.sec:not(.sec--soft):not(.wk-sec--sand), .pa, .wt, .fa, .wdetail, .nf, .contact-soft, .fl-sec, .wk-sec:not(.wk-sec--sand), .wx-sec--dark {
  background: radial-gradient(520px 380px at 96% 380px, var(--peach-soft) 0%, rgba(244,206,182,0) 70%), radial-gradient(460px 340px at 2% calc(100% - 340px), var(--leaf-soft) 0%, rgba(205,221,186,0) 70%), transparent; }
main > section:nth-of-type(even):not(.sec--soft):not(.wk-sec--sand) {
  background: radial-gradient(500px 360px at 3% 360px, var(--leaf-soft) 0%, rgba(205,221,186,0) 70%), radial-gradient(540px 400px at 97% calc(100% - 400px), var(--peach-soft) 0%, rgba(244,206,182,0) 70%), transparent; }
.fa { background: transparent; }
.wt::before { content: none; }
.fh { background: radial-gradient(640px 520px at 92% 30%, rgba(238,200,170,.5) 0%, rgba(238,200,170,0) 70%), radial-gradient(420px 320px at 0% calc(100% - 320px), var(--leaf-soft) 0%, rgba(205,221,186,0) 70%), var(--bg); }
.wk-hero, .page-head { background: radial-gradient(620px 460px at 90% 22%, rgba(238,200,170,.5) 0%, rgba(238,200,170,0) 70%), radial-gradient(460px 340px at 2% calc(100% - 340px), var(--leaf-soft) 0%, rgba(205,221,186,0) 70%), var(--bg); }
.wk-hero::before { content: none; }
.fv { background: radial-gradient(420px 320px at 0% calc(100% - 320px), var(--leaf-soft) 0%, rgba(205,221,186,0) 70%); }

/* --- ベージュの面：上下を手で引いたような波に。上の縁には少しずれた鉛筆の線 --- */
.sec--soft, .wk-sec--sand { position: relative; background: var(--soft) radial-gradient(520px 360px at 94% 360px, rgba(250,226,206,.75) 0%, rgba(250,226,206,0) 70%); }
.sec--soft::before, .sec--sky::before, .wk-sec--sand::before { content: ""; position: absolute; left: 0; right: 0; top: auto; bottom: calc(100% - 1px); height: clamp(26px, 3.2vw, 46px); -webkit-mask: none; mask: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F1E8DD' d='M0 34 C 70 26, 130 22, 210 27 C 300 33, 360 44, 470 40 C 580 36, 640 20, 760 19 C 880 18, 950 36, 1060 38 C 1160 40, 1230 26, 1320 22 C 1380 19, 1420 24, 1440 27 V60 H0 Z'/%3E%3Cpath fill='none' stroke='%23C5582D' stroke-opacity='.42' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke' d='M-10 30 C 70 21, 140 18, 215 23 C 305 29, 365 41, 472 35 C 585 30, 640 15, 762 14 C 882 13, 952 32, 1062 33 C 1165 35, 1232 21, 1322 17 C 1385 14, 1425 20, 1450 23'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat; pointer-events: none; transform: none; }
.sec--soft::after, .sec--sky::after, .wk-sec--sand::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: clamp(26px, 3.2vw, 46px); -webkit-mask: none; mask: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F1E8DD' d='M0 34 C 70 26, 130 22, 210 27 C 300 33, 360 44, 470 40 C 580 36, 640 20, 760 19 C 880 18, 950 36, 1060 38 C 1160 40, 1230 26, 1320 22 C 1380 19, 1420 24, 1440 27 V60 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; transform: scaleY(-1) scaleX(-1); z-index: 1; pointer-events: none; }
.footer::before { top: -1px; height: clamp(28px, 3.2vw, 44px); -webkit-mask: none; mask: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F7F3EE' d='M0 30 C 90 40, 170 44, 280 38 C 400 31, 470 18, 600 20 C 730 22, 800 40, 930 41 C 1060 42, 1130 26, 1250 22 C 1330 19, 1400 24, 1440 28 V0 H0 Z'/%3E%3Cpath fill='none' stroke='%23C5582D' stroke-opacity='.42' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke' d='M-10 35 C 90 45, 170 49, 280 43 C 400 36, 470 23, 600 25 C 730 27, 800 45, 930 46 C 1060 47, 1130 31, 1250 27 C 1330 24, 1400 29, 1450 33'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* --- 書体：見出しは丸ゴシック --- */
h1, h2, h3, .sec-title, .h2, .wx-sec__head h2, .pa__title, .wt__head h2, .contact-soft h2, .tl-ask h2, .pl h3, .feat h3, .why h3, .mi b, .own h3, .tl h3, .svx__card h3 { font-family: var(--jp); }
.sec-title, .h2, .wx-sec__head h2, .pa__title, .wt__head h2, .contact-soft h2, .tl-ask h2, .page-head__lead b { font-weight: 700; }
.fv__title, .fh h1, .wk-hero h1, .page-head h1, .nf h1, .wdetail__head h1 { font-weight: 900; letter-spacing: .03em; }
.pa__letter p, .pa__hello, .pa__sign { font-family: var(--hand); }

/* --- 共通部品：手書き風のテラコッタのひと言（見出しの上）＋手描きの波の下線＋キラッ --- */
.label, .label--light, .wk-hand, .wk-sec .wx-sec__head .wk-hand { display: inline-block; padding: 0 30px 13px 0; font: 600 clamp(16px, 1.45vw, 18px)/1.5 var(--hand); letter-spacing: .06em; text-transform: none; color: var(--fl-terra);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M3 8.5c9-5 17 4 27-.5s18-5 28-.5 18 4.5 28-.5 18-4.5 31 .5' fill='none' stroke='%23C5582D' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 74px 9px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M5 18c3-1.2 5.5-1.1 8.4.2M9 8.5c2.2 2 4 4.2 5.8 7M18.5 4c.2 3 .1 6.2-.5 9.2' fill='none' stroke='%23C5582D' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") 100% 0 / 22px 22px no-repeat; }
.wt__en { display: inline-block; padding: 0 30px 13px; font: 600 clamp(16px, 1.45vw, 18px)/1.5 var(--hand); letter-spacing: .06em; text-transform: none; color: var(--fl-terra); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M3 8.5c9-5 17 4 27-.5s18-5 28-.5 18 4.5 28-.5 18-4.5 31 .5' fill='none' stroke='%23C5582D' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 50% 100% / 74px 9px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M5 18c3-1.2 5.5-1.1 8.4.2M9 8.5c2.2 2 4 4.2 5.8 7M18.5 4c.2 3 .1 6.2-.5 9.2' fill='none' stroke='%23C5582D' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") 100% 0 / 22px 22px no-repeat; }
.ob__en, .pl__en { font-family: var(--hand); font-weight: 600; letter-spacing: .14em; }
.pa__head .label, .wt__head .label, .works__head .label, .pa__reasons-head .label { padding: 0 30px 13px; background-position: 50% 100%, 100% 0; }
.fh__label, .wk-hero__hand, .page-head__en { display: inline-block; padding: 0 0 13px; border-bottom: 0; font: 600 clamp(17px, 1.6vw, 20px)/1.5 var(--hand); letter-spacing: .06em; text-transform: none; color: var(--fl-terra);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M3 8.5c9-5 17 4 27-.5s18-5 28-.5 18 4.5 28-.5 18-4.5 31 .5' fill='none' stroke='%23C5582D' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 110px 10px no-repeat; }
.wk-hero__hand { margin-top: 26px; }

/* --- 見出しの一部に手描きの下線 --- */
.mark, .sec-title .mark, .rv.is-in .sec-title .mark, .rv.is-in .mark { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 4.2C40 1.6 78 7 118 4.3S178 2.2 197 4' fill='none' stroke='%23E39A72' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M22 10.4C70 8.4 120 9 176 9.8' fill='none' stroke='%23E39A72' stroke-opacity='.7' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% .34em no-repeat !important; padding: 0 .04em .24em; transition: none; }
.sec-title { overflow: visible; }
.fv__title em { background: none; }

/* --- 手描きの小物（星・葉っぱ・ぐるぐる）：置き場所ごとに大きさ・色をかえる --- */
.hd { position: absolute; z-index: 2; display: block; pointer-events: none; color: #E39A72; line-height: 0; }
.hd svg { width: 100%; height: auto; display: block; }
.hd--fv1 { width: 30px; left: clamp(300px, 30vw, 470px); top: 150px; }
.hd--fv2 { width: 54px; left: 2.4%; top: 118px; color: var(--leaf); transform: rotate(-12deg); }
.fh__txt { position: relative; }
.hd--fh1 { width: 30px; right: 8%; top: 40px; }
.hd--fh2 { width: 66px; left: -30px; bottom: 6%; z-index: 3; color: var(--leaf); transform: rotate(-8deg); }
.hd--ph1 { width: 30px; left: 46%; top: 132px; }
.hd--ph2 { width: 48px; left: 52%; top: 160px; color: var(--leaf); }
.hd--wk1 { width: 30px; right: 47%; top: -6px; }
.hd--tl1 { width: 58px; right: 4%; top: 6px; color: var(--leaf); }
.hd--tl2 { width: 28px; right: 12%; top: 60px; }
.contact-soft { overflow-x: clip; }
.contact-soft__box { overflow: visible; }
.contact-soft__box::before { border-radius: 50%; }
.hd--cs1 { width: 32px; left: -12px; top: -14px; transform: rotate(-10deg); }
.hd--cs2 { width: 80px; right: 34px; bottom: -22px; color: var(--leaf); }
.nf .container { position: relative; }
.nf__code { color: var(--fl-peach) !important; -webkit-text-stroke: 2px var(--fl-terra); }
.hd--nf1 { width: 90px; left: calc(50% + 150px); top: 10px; }
.hd--nf2 { width: 56px; left: calc(50% - 220px); top: 50px; color: var(--leaf); }
@media (prefers-reduced-motion: no-preference) {
  .hd--fv1, .hd--fh1, .hd--ph1, .hd--wk1, .hd--tl2, .hd--cs1 { animation: hdTwinkle 3.6s ease-in-out infinite; }
}
@keyframes hdTwinkle { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: .82; rotate: 14deg; } }

/* --- アイコンの丸：手描き風のゆらぎのある線 --- */
.ico, .mi__ic, .fh__ic, .own__ic { border: 0 !important; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23C5582D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition: background-color .3s, transform .4s var(--ease); }
.feat:hover .ico, .why:hover .ico { background: var(--fl-terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; color: #fff; transform: rotate(-8deg); }
.tl__dot { border: 0 !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23C5582D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; box-shadow: 0 10px 20px -14px rgba(150,85,40,.5); }
.tl li:last-child .tl__dot { background: var(--fl-terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; color: #fff; }
.tl__line { background: repeating-linear-gradient(90deg, #E2CDB6 0 9px, transparent 9px 16px); height: 2px; }
.tl__line i { background: repeating-linear-gradient(90deg, var(--fl-terra) 0 9px, transparent 9px 16px); }
@media (max-width: 760px) {
  .tl__line { background: repeating-linear-gradient(180deg, #E2CDB6 0 9px, transparent 9px 16px); width: 2px; height: auto; }
  .tl__line i { background: repeating-linear-gradient(180deg, var(--fl-terra) 0 9px, transparent 9px 16px); }
}
.tl__tag { transform: rotate(-2deg); border-radius: 99px; padding: 3px 12px; }
.tl__no { font-family: var(--hand); font-weight: 600; font-size: 14px; letter-spacing: .1em; }

/* --- 形：カード・箱は丸く、影はやわらかい暖色 --- */
.feat, .why, .mi li, .pl, .tl-card, .own, .sim, .fee, .wdetail__info, .tl-bar, .ctalk, .tl-ask, .tl-empty { border-radius: var(--w-radius); border: 1.5px solid var(--w-line); box-shadow: var(--w-shadow); }
.tl-ask { border: 0; }
.feat, .why, .mi li, .own, .sim, .ctalk, .tl-bar, .tl-card { background: #FFFDF9; }
.feat:hover, .why:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 28px 48px -28px rgba(150,85,40,.5); }
.tl-card:hover { transform: translateY(-4px) rotate(.5deg); }
.mi li { border-radius: 24px; }
.ctalk a { border-radius: 18px; }
.ctalk a b { border-radius: 50%; }
.contact-soft__box { border-radius: 40px; box-shadow: var(--w-shadow); }
.contact-soft__box::after { content: ""; position: absolute; inset: 12px; border: 1.5px dashed rgba(197,88,45,.32); border-radius: 30px; pointer-events: none; }
.tl-card__img, .tl-card__meta { border-radius: 16px; }
.tl-search { border-radius: 99px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { border-radius: 16px; border-width: 1.5px; background: #FFFDF9; }
.form select { border-radius: 16px; }
.wdetail__mock { border-radius: var(--w-radius); box-shadow: var(--w-shadow); border: 10px solid #fff; }
.works__img { border-radius: 18px; }
.wx-real__img { border-radius: var(--w-radius); }

/* --- ボタン：まるくて、押すと沈む --- */
.button, .fh__btn, .pl__go, .wt__btn, .tl-card__go, .nav__cta, .wx-real__more { border-radius: 99px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .3s, color .3s; }
.button, .button--white, .fh__btn:not(.fh__btn--ghost), .pl--best .pl__go, .wt__btn, .nav__cta { box-shadow: 0 5px 0 var(--fl-terra-d), 0 16px 26px -14px rgba(150,70,30,.55); }
.button--line, .button--ghost, .fh__btn--ghost { background: #FFFDF9; box-shadow: 0 5px 0 #E3D2BE, 0 14px 22px -16px rgba(150,85,40,.4); }
.pl__go, .tl-card__go, .wx-real__more { box-shadow: 0 5px 0 #141210, 0 14px 22px -14px rgba(60,40,25,.5); }
.pl--best .pl__go { box-shadow: 0 5px 0 var(--fl-terra-d), 0 16px 26px -14px rgba(150,70,30,.55); }
.button:hover, .fh__btn:hover, .pl__go:hover, .wt__btn:hover, .tl-card__go:hover, .wx-real__more:hover { transform: translateY(3px); }
.button:hover, .button--white:hover, .fh__btn:not(.fh__btn--ghost):hover, .pl--best .pl__go:hover, .wt__btn:hover { box-shadow: 0 2px 0 var(--fl-terra-d), 0 8px 16px -12px rgba(150,70,30,.5); }
.button--line:hover, .button--ghost:hover, .fh__btn--ghost:hover { box-shadow: 0 2px 0 #2B2B2B, 0 8px 16px -12px rgba(150,85,40,.4); }
.pl__go:hover, .tl-card__go:hover, .wx-real__more:hover { box-shadow: 0 2px 0 var(--fl-terra-d); }
.nav__cta:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--fl-terra-d); }
.button:active, .fh__btn:active, .pl__go:active { transform: translateY(5px); box-shadow: none; }
.wk-jump a, .fh__jump a { border-radius: 20px; border-width: 1.5px; background: #FFFDF9; box-shadow: 0 4px 0 #EADCCB, 0 12px 22px -18px rgba(150,85,40,.4); }
.wk-jump a:hover, .fh__jump a:hover { transform: translateY(2px); box-shadow: 0 2px 0 #EADCCB; }
.wx-chips button, .tl-chips button { border-width: 1.5px; }
.wx-chips button.is-on, .tl-chips button.is-on { box-shadow: 0 3px 0 var(--fl-terra-d); }
.fh__pill { box-shadow: 0 4px 0 var(--fl-terra-d); }
@media (max-width: 760px) { .sp-cta { box-shadow: 0 5px 0 var(--fl-terra-d), 0 16px 30px -14px rgba(120,55,20,.55); } }

/* --- 料金の箱・札・カウントダウン --- */
.fh__price { border-radius: 32px; box-shadow: var(--w-shadow); }
.fh__price::after { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(197,88,45,.3); border-radius: 24px; pointer-events: none; }
.fh__dl { transform: translate(-50%, -50%) rotate(-2deg); box-shadow: 0 3px 0 var(--fl-terra-d); z-index: 1; }
.fh__left b, .ob__left { display: inline-block; padding: 2px 12px; border-radius: 99px; background: #FFFDF9; }
.ob__left { padding: 10px 22px; box-shadow: 0 4px 0 #EBCDB6; }
.fa__box { border-radius: var(--w-radius); border: 1.5px dashed #E0C8AF; background: #FFFDF9; box-shadow: var(--w-shadow); }
.fa__box--plain { background: #FFFDF9; }
.fa__tag { transform: rotate(-2deg); box-shadow: 0 3px 0 var(--fl-terra-d); }
.ob { border-radius: 36px; box-shadow: var(--w-shadow); }
.ob::after { content: ""; position: absolute; inset: 12px; border: 1.5px dashed rgba(197,88,45,.3); border-radius: 26px; pointer-events: none; }
.pl { border-radius: 32px; background: #FFFDF9; }
.pl--best { border: 2px solid var(--fl-terra); }
.pl__badge { transform: translateX(-50%) rotate(-3deg); background: var(--fl-terra); box-shadow: 0 3px 0 var(--fl-terra-d); font-family: var(--hand); font-size: 15px; font-weight: 600; letter-spacing: .08em; }
.pl__open { justify-self: start; }
.own__ic svg { width: 26px; height: 26px; }
.pl__who { border-radius: 16px; }
.pl__prices { border-top-style: dashed; border-bottom-style: dashed; border-color: #E2CDB6; }
.cmp { border-radius: var(--w-radius); border: 1.5px solid var(--w-line); box-shadow: var(--w-shadow); background: #FFFDF9; }
.cmp th, .cmp td { border-bottom: 1px dashed #E7D8C6; }
.cmp thead th { background: #F6EDE2; }
.table { border-radius: var(--w-radius); box-shadow: var(--w-shadow); background: #FFFDF9; }
.table th, .table td { border-bottom: 1px dashed #E7D8C6; }
.sim { border-radius: 32px; }
.sim__mode { border-width: 1.5px; }
.sim input[type=range] { accent-color: var(--fl-terra); }
.fee__row { border-top-style: dashed; }

/* --- よくある質問：1問ずつ丸いカードに --- */
.faq { border-top: 0; display: grid; gap: 12px; }
.faq details { border: 1.5px solid var(--w-line) !important; border-radius: 24px; background: #FFFDF9; padding: 0 22px; box-shadow: 0 12px 26px -22px rgba(150,85,40,.45); transition: border-color .3s; }
.faq details[open] { border-color: #E8BFA4 !important; }
.faq summary { padding: 20px 0; grid-template-columns: 38px 1fr 30px; }
.faq summary::before { content: "Q"; font: 600 22px/1 var(--hand); color: var(--fl-terra); }
.faq summary i { width: 30px; height: 30px; border-radius: 50%; background: var(--fl-peach); }
.faq summary i::before, .faq summary i::after { left: 9px; top: 14.25px; width: 12px; height: 1.5px; }
.faq details p { padding: 0 6px 22px 38px; }

/* --- こんなお店に（チェックの一覧）：1つずつ丸い札に --- */
.checks { border-top: 0; gap: 12px; }
.checks li, .checks li:nth-child(even) { padding: 18px 22px; border: 1.5px solid var(--w-line); border-radius: 22px; background: #FFFDF9; box-shadow: 0 12px 26px -22px rgba(150,85,40,.45); }
.checks li::before { width: 24px; height: 24px; margin-top: 2px; border: 0; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.8 3.6L18 7.6' fill='none' stroke='%23C5582D' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23C5582D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* --- 写真：白い縁の「プリント」＋マスキングテープ・少し傾ける --- */
.pr-tape, .fh__img::after { content: ""; position: absolute; z-index: 6; top: -13px; left: 50%; width: 104px; height: 28px; transform: translateX(-50%) rotate(-4deg); pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, transparent 2px 7px), rgba(236,216,188,.86); box-shadow: 0 1px 2px rgba(90,60,30,.12);
  clip-path: polygon(0 0, 3px 12%, 0 25%, 3px 38%, 0 50%, 3px 62%, 0 75%, 3px 88%, 0 100%, 100% 100%, calc(100% - 3px) 88%, 100% 75%, calc(100% - 3px) 62%, 100% 50%, calc(100% - 3px) 38%, 100% 25%, calc(100% - 3px) 12%, 100% 0); }
/* トップのファーストビュー */
.fv__frame { overflow: visible; -webkit-mask-image: none; isolation: auto; box-shadow: 0 0 0 8px #fff, 0 34px 60px -30px rgba(120,70,35,.5); }
.fv__frame .slide { border-radius: inherit; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.fv__frame .pr-tape { left: 22%; top: -16px; z-index: 8; }
@media (min-width: 961px) {
  .fv__frame { border-radius: 30px; box-shadow: 0 0 0 12px #fff, 0 40px 70px -34px rgba(120,70,35,.55); transform: rotate(1deg); margin: 14px 14px 14px 0; }
  .fv__frame .pr-tape { left: 50%; width: 128px; height: 32px; top: -24px; }
}
/* /web/・/shop/・/auction/ の上部の写真 */
.fh__img::before { background: rgba(238,206,180,.55); }
.fh__img img { padding: 11px; background: #fff; border-radius: 26px; transform: rotate(2deg); box-shadow: 0 34px 60px -34px rgba(120,70,35,.55), 0 2px 6px rgba(120,70,35,.08); }
.fh__img::after { top: -6px; transform: translateX(-50%) rotate(-5deg); }
/* Ponoについて・トップの工房の写真 */
.photo.pr { overflow: visible; padding: 10px; background: #fff; border-radius: 26px; transform: rotate(-1.6deg); box-shadow: 0 30px 54px -32px rgba(120,70,35,.55); }
.photo.pr img { border-radius: 18px; }
.pa__photo img { padding: 10px; background: #fff; border-radius: 26px; box-shadow: 0 30px 54px -32px rgba(120,70,35,.55); }
.pa__photo .tape--l { left: 50%; transform: translateX(-50%) rotate(-5deg); }
/* サービスのカードの写真 */
.svx__img { padding: 8px; background: #fff; border-radius: 22px; transform: rotate(-1.4deg); box-shadow: 0 22px 36px -26px rgba(120,70,35,.55); transition: transform .45s var(--ease), box-shadow .45s; }
.svx__card:nth-child(even) .svx__img { transform: rotate(1.4deg); }
.svx__img img { border-radius: 15px; }
.svx__card:hover .svx__img { transform: rotate(0) translateY(-4px); }
.svx__card:hover .svx__img img { transform: none; }
/* 制作実績の散らしたプリント */
.wk-print { border-radius: 12px; }
.wk-print img { border-radius: 8px; }
.wk-print::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, transparent 2px 7px), rgba(236,216,188,.86); }
.wx-dz__phone, .wt__dzs .wx-dz__phone { border-radius: 26px; box-shadow: 0 22px 36px -24px rgba(150,85,40,.5), 0 0 0 1px rgba(150,110,70,.08); }

/* --- 動き：写真がふわっと少し揺れる（動きを減らす設定・スクショ時は止める） --- */
@media (prefers-reduced-motion: no-preference) {
  .fh__img img, .photo.pr, .pa__photo img { animation: prSway 7s ease-in-out infinite alternate; }
  .fv__frame { animation: prSway 9s ease-in-out infinite alternate; }
  .pa__photo img { animation-delay: -3s; }
}
@keyframes prSway { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -6px; rotate: .5deg; } }
.shot .fh__img img, .shot .photo.pr, .shot .pa__photo img, .shot .fv__frame, .shot .hd, .shot .wk-print { animation: none !important; }

/* --- スマホ --- */
@media (max-width: 960px) {
  .hd--fv1, .hd--fv2 { display: none; }
  .hd--fh2 { left: -10px; width: 52px; }
  .hd--ph1 { left: auto; right: 24%; top: 104px; }
  .hd--ph2 { left: auto; right: 8%; top: 120px; width: 40px; }
}
@media (max-width: 767px) {
  .label, .label--light, .wk-hand, .wk-sec .wx-sec__head .wk-hand { font-size: 16px; }
  .fh__label, .wk-hero__hand, .page-head__en { font-size: 17px; }
  .fh h1 { font-size: clamp(26px, 7.9vw, 40px); letter-spacing: 0; }
  .fh__img img { padding: 8px; border-radius: 22px; transform: rotate(1.4deg); }
  .photo.pr, .pa__photo img { padding: 7px; border-radius: 22px; }
  .svx__img { padding: 6px; border-radius: 18px; }
  .svx__img img { border-radius: 13px; }
  .fv__frame { box-shadow: 0 0 0 6px #fff, 0 26px 44px -26px rgba(120,70,35,.5); }
  .fv__frame .pr-tape { width: 84px; height: 24px; top: -12px; left: auto; right: 16%; }
  .fh__price::after, .ob::after { inset: 7px; border-radius: 22px; }
  .contact-soft__box { border-radius: 30px; }
  .contact-soft__box::after { inset: 8px; border-radius: 24px; }
  .hd--cs2 { width: 60px; right: 18px; bottom: -18px; }
  .hd--fh1 { right: 4%; top: 36px; width: 26px; }
  .hd--wk1 { right: 6%; top: auto; bottom: -10px; }
  .hd--tl1 { width: 44px; right: 2%; top: -4px; }
  .hd--tl2 { display: none; }
  .hd--nf1 { left: auto; right: 4%; width: 64px; }
  .hd--nf2 { left: 4%; width: 44px; }
  .faq details { padding: 0 16px; border-radius: 20px; }
  .faq details p { padding-left: 34px; }
  .wdetail__mock { border-width: 6px; }
}

/* =====================================================================
   2026-10-19 男の職人の工房らしく（ボス「俺は男なので、男の人のサイト感を。フォントももっと温かみのあるものに」）
   温かみブロックは残したまま、上から色・書体・形を差し替える。戻すときはこのブロックを消し、build.py のフォントのリンクと hd()/stamp() を戻す
   書体：見出し・本文 Zen Kaku Gothic Antique（角が少し丸い力強いゴシック）／手書き風のひと言 Yusei Magic（マーカーで書いた字）
   色：テラコッタ→さび色 #B5532A・濃い #8F3E1D／チャコール→焦げ茶 #2B2622／桃色のにじみ→からし色・深いオリーブ／淡いピーチの箱→クラフト紙のベージュ
   質感：クラフト紙のざらつき・帆布の織り目（帯）・木目（フッター）　形：角の丸みは控えめ（大きい箱 18〜20px）・線は 2px・小物は強調の線・矢印・ハンコ
   ===================================================================== */
:root {
  --jp: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --en: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", sans-serif;
  --hand: "Yusei Magic", "Zen Kaku Gothic Antique", sans-serif;
  --fl-bg: #F6F0E6; --fl-ink: #2B2622; --fl-sub: #5A4F46; --fl-terra: #B5532A; --fl-terra-d: #8F3E1D; --fl-peach: #EFE3CF; --fl-line: #E2D3BE;
  --ink: #2B2622; --ink-2: #463C34; --sub: #5A4F46; --mute: #8A7E72; --line: #E2D3BE; --line-2: #CDBBA3;
  --bg: #F6F0E6; --soft: #EDE2CF; --blue: #B5532A; --blue-2: #C56A42; --sky: #EFE3CF; --sky-soft: #EFE3CF; --deep: #2B2622;
  --pop: #EFE3CF; --coral: #B5532A; --cream: #F6F0E6; --sand: #EDE2CF; --brown: #2B2622; --brown-2: #5A4F46; --terra: #B5532A; --sage: #EFE3CF;
  --mustard: #D9A441; --olive: #6B7347; --leaf: #6B7347;
  --peach-soft: rgba(217,164,65,.2); --leaf-soft: rgba(107,115,71,.15);
  --kraft: #EADCC3;
  --w-line: #E0CFB7; --w-shadow: 0 18px 36px -26px rgba(70,40,18,.45), 0 2px 4px -2px rgba(70,40,18,.08);
  --w-radius: 18px;
  --fl-shadow: 0 20px 40px -30px rgba(60,35,15,.5);
}
body { font-weight: 500; color: var(--fl-ink); }
b, strong { font-weight: 700; }

/* --- 紙：クラフト紙のざらつきを少し強めに --- */
body::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .14 0 0 0 .24 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01 .16' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .16 0 0 0 .16 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); opacity: .78; }

/* --- にじみ：桃色→からし色・深いオリーブ --- */
.fh { background: radial-gradient(640px 520px at 92% 30%, rgba(217,164,65,.2) 0%, rgba(217,164,65,0) 70%), radial-gradient(420px 320px at 0% calc(100% - 320px), rgba(107,115,71,.15) 0%, rgba(217,164,65,0) 70%), var(--bg); }
.wk-hero, .page-head { background: radial-gradient(620px 460px at 90% 22%, rgba(217,164,65,.2) 0%, rgba(217,164,65,0) 70%), radial-gradient(460px 340px at 2% calc(100% - 340px), rgba(107,115,71,.15) 0%, rgba(217,164,65,0) 70%), var(--bg); }
.fv { background: radial-gradient(420px 320px at 0% calc(100% - 320px), rgba(107,115,71,.15) 0%, rgba(217,164,65,0) 70%); }
.fh__img::before { background: rgba(217,190,140,.42); }
@media (min-width: 961px) {
  .fv__deco .b1 { background: radial-gradient(circle at 35% 35%, rgba(217,164,65,.28), rgba(217,164,65,0) 70%) !important; }
  .fv__deco .b2 { background: radial-gradient(circle at 40% 40%, rgba(107,115,71,.1), rgba(107,115,71,0) 70%) !important; }
  .fv::before { background-image: radial-gradient(rgba(143,62,29,.16) 1.4px, transparent 1.6px) !important; }
}
.fv__circle path { stroke: #B5532A !important; stroke-width: 2.6 !important; }

/* --- ベージュの帯：帆布の織り目＋上下の波（線はさび色・2px） --- */
.sec--soft, .wk-sec--sand { background: radial-gradient(520px 360px at 94% 360px, rgba(217,164,65,.2) 0%, rgba(217,164,65,0) 70%), repeating-linear-gradient(0deg, rgba(70,45,20,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(70,45,20,.04) 0 1px, transparent 1px 4px), var(--soft); }
.sec--soft::before, .sec--sky::before, .wk-sec--sand::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23EDE2CF' d='M0 34 C 70 26, 130 22, 210 27 C 300 33, 360 44, 470 40 C 580 36, 640 20, 760 19 C 880 18, 950 36, 1060 38 C 1160 40, 1230 26, 1320 22 C 1380 19, 1420 24, 1440 27 V60 H0 Z'/%3E%3Cpath fill='none' stroke='%23B5532A' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke' d='M-10 30 C 70 21, 140 18, 215 23 C 305 29, 365 41, 472 35 C 585 30, 640 15, 762 14 C 882 13, 952 32, 1062 33 C 1165 35, 1232 21, 1322 17 C 1385 14, 1425 20, 1450 23'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat; }
.sec--soft::after, .sec--sky::after, .wk-sec--sand::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23EDE2CF' d='M0 34 C 70 26, 130 22, 210 27 C 300 33, 360 44, 470 40 C 580 36, 640 20, 760 19 C 880 18, 950 36, 1060 38 C 1160 40, 1230 26, 1320 22 C 1380 19, 1420 24, 1440 27 V60 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.footer { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120' viewBox='0 0 600 120'%3E%3Cg fill='none' stroke='%237A4E2A' stroke-linecap='round'%3E%3Cpath d='M0 8 C 100 5, 200 11, 300 8 C 400 5, 500 11, 600 8' stroke-width='1.2' stroke-opacity='0.1'/%3E%3Cpath d='M0 19 C 100 14, 200 24, 300 19 C 400 14, 500 24, 600 19' stroke-width='0.8' stroke-opacity='0.07'/%3E%3Cpath d='M0 31 C 100 27, 200 35, 300 31 C 400 27, 500 35, 600 31' stroke-width='1.6' stroke-opacity='0.08'/%3E%3Cpath d='M0 44 C 100 38, 200 50, 300 44 C 400 38, 500 50, 600 44' stroke-width='0.9' stroke-opacity='0.1'/%3E%3Cpath d='M0 52 C 100 50, 200 54, 300 52 C 400 50, 500 54, 600 52' stroke-width='0.7' stroke-opacity='0.06'/%3E%3Cpath d='M0 66 C 100 59, 200 73, 300 66 C 400 59, 500 73, 600 66' stroke-width='1.3' stroke-opacity='0.09'/%3E%3Cpath d='M0 79 C 100 75, 200 83, 300 79 C 400 75, 500 83, 600 79' stroke-width='0.8' stroke-opacity='0.07'/%3E%3Cpath d='M0 91 C 100 86, 200 96, 300 91 C 400 86, 500 96, 600 91' stroke-width='1.8' stroke-opacity='0.07'/%3E%3Cpath d='M0 104 C 100 101, 200 107, 300 104 C 400 101, 500 107, 600 104' stroke-width='0.9' stroke-opacity='0.1'/%3E%3Cpath d='M0 113 C 100 107, 200 119, 300 113 C 400 107, 500 119, 600 113' stroke-width='0.7' stroke-opacity='0.06'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 600px 120px, var(--soft); }
.footer::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F6F0E6' d='M0 30 C 90 40, 170 44, 280 38 C 400 31, 470 18, 600 20 C 730 22, 800 40, 930 41 C 1060 42, 1130 26, 1250 22 C 1330 19, 1400 24, 1440 28 V0 H0 Z'/%3E%3Cpath fill='none' stroke='%23B5532A' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke' d='M-10 35 C 90 45, 170 49, 280 43 C 400 36, 470 23, 600 25 C 730 27, 800 45, 930 46 C 1060 47, 1130 31, 1250 27 C 1330 24, 1400 29, 1450 33'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.footer__big { color: #E0CDAF; }
.band__row--1 { background: repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px), var(--fl-terra); box-shadow: 0 12px 30px -18px rgba(110,45,15,.6); }
.band__row--2 { background: repeating-linear-gradient(0deg, rgba(70,45,20,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(70,45,20,.04) 0 1px, transparent 1px 4px), var(--fl-peach); }

/* --- 書体：見出しは太く（900）、小見出しは 700 --- */
h1, h2, h3, .sec-title, .h2, .wx-sec__head h2, .pa__title, .wt__head h2, .contact-soft h2, .tl-ask h2 { font-family: var(--jp); }
.sec-title, .h2, .wx-sec__head h2, .pa__title, .wt__head h2, .contact-soft h2, .tl-ask h2, .ob__ttl { font-weight: 900; letter-spacing: .04em; }
.fv__title, .fh h1, .wk-hero h1, .page-head h1, .nf h1, .wdetail__head h1 { font-weight: 900; letter-spacing: .02em; }
h3, .pl h3, .feat h3, .why h3, .own h3, .tl h3, .svx__card h3, .page-head__lead b { font-weight: 700; }
.fh__nums b, .pl__price b, .ob__left span, .sim__result b, .sim__amount { font-family: var(--en); font-weight: 900; }

/* --- 手書き風のひと言（Yusei Magic）＋短い太い下線。キラッはやめる --- */
.label, .label--light, .wk-hand, .wk-sec .wx-sec__head .wk-hand { padding: 0 0 13px; font: 400 clamp(17px, 1.5vw, 19px)/1.5 var(--hand); letter-spacing: .04em; color: var(--fl-terra); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 12'%3E%3Cpath d='M3.5 7.4C15 5.2 31 5 46.5 6.2' fill='none' stroke='%23B5532A' stroke-width='4.6' stroke-linecap='round'/%3E%3Cpath d='M8 9.6c11-.9 22-1 34-.6' fill='none' stroke='%23B5532A' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 46px 11px no-repeat; }
.wt__en { padding: 0 0 13px; font: 400 clamp(17px, 1.5vw, 19px)/1.5 var(--hand); letter-spacing: .04em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 12'%3E%3Cpath d='M3.5 7.4C15 5.2 31 5 46.5 6.2' fill='none' stroke='%23B5532A' stroke-width='4.6' stroke-linecap='round'/%3E%3Cpath d='M8 9.6c11-.9 22-1 34-.6' fill='none' stroke='%23B5532A' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 50% 100% / 46px 11px no-repeat; }
.pa__head .label, .wt__head .label, .works__head .label, .pa__reasons-head .label { padding: 0 0 13px; background-position: 50% 100%; }
.fh__label, .wk-hero__hand, .page-head__en, .fv__label { display: inline-block; padding: 4px 34px 14px 0; font: 400 clamp(18px, 1.7vw, 21px)/1.5 var(--hand); letter-spacing: .04em; color: var(--fl-terra); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 12'%3E%3Cpath d='M3.5 7.4C15 5.2 31 5 46.5 6.2' fill='none' stroke='%23B5532A' stroke-width='4.6' stroke-linecap='round'/%3E%3Cpath d='M8 9.6c11-.9 22-1 34-.6' fill='none' stroke='%23B5532A' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 58px 13px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23B5532A' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M34 25.5c-4.2-.6-8-.4-11.6.6M29.5 12.5c-3 2.3-5.4 5-7.4 8.3M17 5.5c-.4 4-.2 8 .6 11.8'/%3E%3C/g%3E%3C/svg%3E") 100% 0 / 26px 26px no-repeat; }
.fv__label i { display: none; }
.hd--fv1, .hd--fh1, .hd--ph1, .hd--wk1, .hd--tl2 { display: none; }
.fv__note { font-family: var(--hand); font-weight: 400; font-size: 16px; color: var(--fl-terra); transform: rotate(-4deg); }
.fv__note path { stroke: var(--fl-ink); stroke-width: 2.4; }
.pa__letter p, .pa__hello, .pa__sign { font-family: var(--hand); font-weight: 400; }
.pl__badge { font-family: var(--hand); font-weight: 400; font-size: 16px; letter-spacing: .06em; transform: translateX(-50%) rotate(-2deg); }
.ob__en, .pl__en { font-family: var(--en); font-weight: 700; letter-spacing: .18em; }
.tl__no { font-family: var(--en); font-weight: 700; font-size: 13px; letter-spacing: .14em; }
.faq summary::before { font: 900 21px/1 var(--en); color: var(--fl-terra); }

/* --- 見出しの一部：からし色のマーカー --- */
.mark, .sec-title .mark, .rv.is-in .sec-title .mark, .rv.is-in .mark { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 6.5C48 3.2 120 4.4 197 4.8L198.5 16.4C130 18.4 62 15.8 2 18.2Z' fill='%23D9A441' fill-opacity='.5'/%3E%3C/svg%3E") 0 92% / 100% .42em no-repeat !important; padding: 0 .06em .1em; }

/* --- 英字の大きな飾り文字はやめる --- */
.wt__big, .ob::before { display: none; }

/* --- 手描きの小物：強調の線（さび色）・矢印（焦げ茶）・ハンコ --- */
.hd { color: var(--fl-terra); }
.hd--fv1, .hd--fh1, .hd--ph1, .hd--wk1, .hd--tl2, .hd--nf1 { transform: scaleX(-1); animation: none; }
.hd--fv1 { width: 36px; }
.hd--fh1 { width: 34px; }
.hd--ph1 { width: 34px; }
.hd--wk1 { width: 36px; }
.hd--tl2 { width: 32px; }
.hd--nf1 { width: 54px; }
.hd--cs2, .hd--nf2 { color: var(--fl-ink); }
.hd--cs2 { width: 70px; right: auto; bottom: auto; left: calc(50% - 10px); top: 74px; transform: rotate(-6deg); }
@media (max-width: 960px) { .hd--cs2 { display: none; } }
.hd--nf2 { width: 70px; top: 70px; left: calc(50% - 230px); }
@media (prefers-reduced-motion: no-preference) {
  .hd--fv1, .hd--fh1, .hd--ph1, .hd--wk1, .hd--tl2, .hd--nf1 { animation: hdNudge 2.8s ease-in-out infinite; }
}
@keyframes hdNudge { 0%, 100% { translate: 0 0; } 50% { translate: 2px 2px; } }
.shot .hd { animation: none !important; }
/* ハンコ：二重の丸＋かすれ。言葉はページにある「相談だけでもOK」「お見積り無料」「無料・登録なし」だけ */
.hd--stamp { width: 96px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--fl-terra); color: var(--fl-terra);
  background: rgba(255,251,243,.86); box-shadow: inset 0 0 0 3px rgba(255,251,243,.86), inset 0 0 0 4.5px var(--fl-terra); line-height: 1.1; text-align: center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 0 0 0 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 120px 120px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 0 0 0 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 120px 120px; animation: none !important; }
.hd--stamp > span { display: grid; gap: 3px; justify-items: center; }
.hd--stamp small { font: 700 11.5px/1.1 var(--jp); letter-spacing: .02em; white-space: nowrap; }
.hd--stamp b { font: 900 25px/1 var(--jp); letter-spacing: .04em; }
.hd--fh2 { width: 100px; left: -30px; bottom: 7%; z-index: 7; transform: rotate(-13deg); }
.hd--cs1 { width: 92px; left: -18px; top: -26px; z-index: 3; transform: rotate(-12deg); }
.hd--tl1 { width: 88px; right: 3%; top: 0; transform: rotate(10deg); }

/* --- 形：角の丸みを控えめに・線は 2px --- */
.feat, .why, .mi li, .pl, .tl-card, .own, .sim, .fee, .wdetail__info, .tl-bar, .ctalk, .tl-empty, .cmp, .table { border-radius: var(--w-radius); border-width: 2px; border-color: var(--w-line); box-shadow: var(--w-shadow); }
.feat, .why, .mi li, .own, .sim, .ctalk, .tl-bar, .tl-card, .pl, .cmp, .table { background: #FFFCF6; }
.tl-ask { border-radius: 20px; background: repeating-linear-gradient(0deg, rgba(70,45,20,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(70,45,20,.04) 0 1px, transparent 1px 4px), var(--kraft); }
.mi li { border-radius: 16px; }
.feat:hover, .why:hover { transform: translateY(-4px); box-shadow: 0 24px 42px -26px rgba(70,40,18,.5); }
.tl-card:hover { transform: translateY(-3px); }
.ctalk a { border-radius: 12px; border-width: 2px; }
.ctalk a b { border-radius: 50%; }
.ctalk a:hover { background: #FBF4E8; }
.contact-soft__box { border-radius: 22px; background: repeating-linear-gradient(0deg, rgba(70,45,20,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(70,45,20,.04) 0 1px, transparent 1px 4px), var(--kraft); }
.contact-soft__box::after { inset: 10px; border: 2px dashed rgba(143,62,29,.32); border-radius: 14px; }
.ob { border-radius: 20px; background: repeating-linear-gradient(0deg, rgba(70,45,20,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(70,45,20,.04) 0 1px, transparent 1px 4px), var(--kraft); }
.ob::after { inset: 10px; border: 2px dashed rgba(143,62,29,.32); border-radius: 12px; }
.ob__left { box-shadow: 0 4px 0 #D6C2A1; }
.fh__price { border-radius: 20px; background: #FFFCF6; border: 2px solid var(--w-line); }
.fh__price::after { inset: 9px; border: 2px dashed rgba(143,62,29,.28); border-radius: 12px; }
.fh__dl { transform: translate(-50%, -50%) rotate(-1.5deg); }
.fa__box { border-radius: var(--w-radius); border: 2px dashed #D6C2A1; }
.fa__tag { transform: rotate(-1.5deg); }
.pl { border-radius: 20px; }
.pl--best { border: 2.5px solid var(--fl-terra); box-shadow: 0 24px 50px -30px rgba(143,62,29,.5); }
.pl__prices { border-color: #DCC9AE; }
.pl__who { border-radius: 10px; }
.cmp thead th { background: #EFE5D3; }
.cmp .is-best, .table td.is-pono { background: #F4E8D6; }
.cmp th, .cmp td, .table th, .table td { border-bottom-color: #E0CFB7; }
.sim { border-radius: 20px; }
.sim__mode { border-width: 2px; }
.tl-card__img, .tl-card__meta { border-radius: 10px; }
.wdetail__mock { border-radius: var(--w-radius); }
.works__img { border-radius: 12px; }
.wx-real__img { border-radius: var(--w-radius); }
#real.wk-sec .wx-real__img, .wx-real__img { background: linear-gradient(160deg, #EFE3CF, #F6F0E6); }
#real.wk-sec .wx-real:nth-child(even) .wx-real__img { background: linear-gradient(160deg, #F6F0E6, #EFE3CF); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea, .form select { border-radius: 10px; border-width: 2px; background: #FFFCF6; }
.form input:focus, .form textarea:focus { box-shadow: 0 0 0 3px rgba(181,83,42,.14); }
.header__inner { background: rgba(255,252,246,.95); box-shadow: 0 12px 30px -20px rgba(60,35,15,.5); }

/* --- よくある質問・チェックの一覧 --- */
.faq details { border-width: 2px !important; border-radius: 14px; background: #FFFCF6; }
.faq details[open] { border-color: rgba(181,83,42,.5) !important; }
.faq summary i::before, .faq summary i::after { height: 2px; }
.checks li, .checks li:nth-child(even) { border-width: 2px; border-radius: 14px; background: #FFFCF6; }
.checks li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.8 3.6L18 7.6' fill='none' stroke='%23B5532A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23B5532A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* --- アイコンの丸：手描きの線を太く --- */
.ico, .mi__ic, .fh__ic, .own__ic { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23B5532A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.feat:hover .ico, .why:hover .ico { background: var(--fl-terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform: rotate(-4deg); }
.tl__dot { background: #FFFCF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23B5532A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.tl li:last-child .tl__dot { background: var(--fl-terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31.5 5.6c13.4.4 23.4 11 23 24.4-.4 13.6-11.2 24.3-24.8 23.9C16 53.5 5.5 42.7 6 29.2 6.5 16.4 16.9 6 29.6 5.8c3-.1 6 .4 8.7 1.5' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.tl__line { background: repeating-linear-gradient(90deg, #D6C2A1 0 10px, transparent 10px 17px); height: 2.5px; }
.tl__line i { background: repeating-linear-gradient(90deg, var(--fl-terra) 0 10px, transparent 10px 17px); }
@media (max-width: 760px) {
  .tl__line { background: repeating-linear-gradient(180deg, #D6C2A1 0 10px, transparent 10px 17px); width: 2.5px; height: auto; }
  .tl__line i { background: repeating-linear-gradient(180deg, var(--fl-terra) 0 10px, transparent 10px 17px); }
}
.tl__tag { transform: rotate(-1.5deg); }

/* --- ボタン：さび色の塗り＋下に濃い厚み／線のボタンは焦げ茶の太線 --- */
.button--line, .button--ghost, .fh__btn--ghost { border: 2px solid var(--fl-ink); background: #FFFCF6; box-shadow: 0 4px 0 var(--fl-ink), 0 14px 22px -16px rgba(60,35,15,.4); }
.button--line:hover, .button--ghost:hover, .fh__btn--ghost:hover { box-shadow: 0 1px 0 var(--fl-ink), 0 8px 16px -12px rgba(60,35,15,.4); }
.button--line svg, .button--ghost svg { background: rgba(43,38,34,.08); }
.wk-jump a, .fh__jump a { border-radius: 14px; border-width: 2px; background: #FFFCF6; box-shadow: 0 4px 0 #D6C2A1, 0 12px 22px -18px rgba(60,35,15,.4); }
.wk-jump a:hover, .fh__jump a:hover { box-shadow: 0 1px 0 #D6C2A1; }
.wx-chips button, .tl-chips button { border-width: 2px; }

/* --- 写真：プリントの縁・テープはそのまま、角と傾きを控えめに --- */
.pr-tape, .fh__img::after, .wk-print::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 7px), rgba(214,186,140,.88); }
.fv__frame .slide { border-radius: inherit; }
@media (min-width: 961px) { .fv__frame { border-radius: 20px; transform: rotate(.6deg); } }
.fh__img img { border-radius: 16px; transform: rotate(1.2deg); }
.photo.pr { border-radius: 16px; transform: rotate(-1deg); }
.photo.pr img { border-radius: 9px; }
.pa__photo img { border-radius: 16px; }
.svx__img { border-radius: 14px; transform: rotate(-.8deg); }
.svx__card:nth-child(even) .svx__img { transform: rotate(.8deg); }
.svx__img img { border-radius: 8px; }
.svx__card:hover .svx__img { transform: rotate(0) translateY(-4px); }
.wx-dz__phone, .wt__dzs .wx-dz__phone { border-radius: 20px; }
.wx-dz__phone img { border-radius: 14px; }
@keyframes prSway { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -3px; rotate: .25deg; } }

/* --- 1100px前後：見出しが1〜2文字だけ次の行に落ちる（「を、」「ー」）のを防ぐ --- */
@media (min-width: 961px) and (max-width: 1180px) { .fh h1, .page-head h1 { font-size: clamp(34px, 4vw, 46px); } }
@media (min-width: 1181px) and (max-width: 1380px) { .page-head h1 { font-size: clamp(40px, 3.6vw, 48px); } }

/* --- スマホ --- */
@media (max-width: 374px) { .wx-sec__head h2 { font-size: 21px; letter-spacing: 0; } .page-head h1 { font-size: 28px; } .nf h1 { font-size: 19px; letter-spacing: 0; } }
@media (max-width: 960px) {
  .hd--fh2 { width: 82px; left: -8px; bottom: 5%; }
  .hd--ph1 { right: 22%; }
}
@media (max-width: 767px) {
  .label, .label--light, .wk-hand, .wk-sec .wx-sec__head .wk-hand, .wt__en { font-size: 17px; }
  .fh__label, .wk-hero__hand, .page-head__en { font-size: 18px; }
  .fh__img img { border-radius: 14px; transform: rotate(1deg); }
  .photo.pr, .pa__photo img { border-radius: 14px; }
  .svx__img { border-radius: 12px; }
  .svx__img img { border-radius: 7px; }
  .contact-soft__box { border-radius: 18px; }
  .contact-soft__box::after, .ob::after, .fh__price::after { inset: 7px; border-radius: 12px; }
  .hd--cs1 { width: 78px; left: -8px; top: -24px; }
  .hd--tl1 { width: 72px; right: 2%; top: -8px; }
  .hd--stamp small { font-size: 9.5px; }
  .hd--fh2 small, .hd--cs1 small { font-size: 9px; }
  .hd--stamp b { font-size: 21px; }
  .hd--nf1 { width: 40px; }
  .hd--nf2 { left: 4%; width: 52px; }
  .faq details { border-radius: 12px; }
}

/* =====================================================================
   2026-10-19 対応エリアのページ（/area/tokoname/・/area/chita/・/area/aichi/）と、各ページからの入口
   見た目は上の「男の職人の工房」の部品（クラフト紙・2px の線・さび色・手書き風のひと言）をそのまま使う。戻すときはこのブロックを消す
   ===================================================================== */
/* 上の写真：横長の写真も正方形に切り抜く（人の顔・器が真ん中に来るように） */
.fh--tokoname .fh__img img { object-position: 50% 58%; }
.fh--chita .fh__img img { object-position: 76% 50%; }
.fh--aichi .fh__img img { object-position: 55% 50%; }
/* 知多半島の市町（見出しの下） */
.ar-towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; max-width: 560px; }
.ar-towns li { padding: 5px 13px; border: 2px solid var(--w-line); border-radius: 99px; background: #FFFCF6; font-size: 13.5px; font-weight: 700; color: var(--fl-ink); }
/* 常滑ページの「Ponoのこと」の小さな安心 */
.ar-assure { margin-top: 24px; }
/* 見本のあとの小見出し */
.ar-sub { margin-top: clamp(56px, 7vw, 84px); }
.ar-sub h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 900; }
.wx-note a { color: var(--fl-terra); text-decoration: underline; text-underline-offset: 3px; margin-left: .5em; }
.wx-dz__area { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--fl-terra); }
.feat p a { display: inline-block; margin-top: 6px; color: var(--fl-terra); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 料金のまとめ */
.ar-open { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 18px; font-family: var(--hand); font-size: clamp(19px, 2vw, 23px); color: var(--fl-terra); }
.ar-open small { font-family: var(--jp); font-size: 13px; font-weight: 700; color: var(--fl-sub); }
.ar-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ar-plan { position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; border: 2px solid var(--w-line); border-radius: var(--w-radius); background: #FFFCF6; box-shadow: var(--w-shadow); color: var(--fl-ink); transition: transform .25s var(--ease), border-color .25s; }
.ar-plan:hover { transform: translateY(-3px); border-color: var(--fl-terra); }
.ar-plan.is-best { border: 2.5px solid var(--fl-terra); }
.ar-plan__name { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 900; }
.ar-plan__name em { padding: 2px 10px; border-radius: 99px; background: var(--fl-terra); color: #fff; font: 400 13px/1.5 var(--hand); font-style: normal; transform: rotate(-2deg); }
.ar-plan__catch { margin-top: 4px; font-size: 14px; color: var(--fl-sub); }
.ar-plan__price { margin-top: 16px; padding-top: 14px; border-top: 2px dashed #DCC9AE; font-size: 13px; font-weight: 700; line-height: 1.6; }
.ar-plan__price span { margin-right: 6px; font-size: 12px; color: var(--fl-sub); }
.ar-plan__price b { font: 900 clamp(22px, 2.2vw, 27px)/1 var(--en); color: var(--fl-terra); margin-right: 2px; }
.ar-plan__price .ar-plan__m { margin-left: 14px; }
.ar-plan__who { margin-top: 12px; font-size: 13.5px; line-height: 1.8; color: var(--fl-sub); flex: 1; }
.ar-plan__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--fl-terra); }
.ar-plan__go i { width: 15px; height: 15px; display: inline-flex; }
.ar-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin-top: 16px; }
.ar-extra { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 16px; padding: 18px 54px 18px 22px; border: 2px dashed #D6C2A1; border-radius: 16px; background: rgba(255,252,246,.7); color: var(--fl-ink); transition: border-color .25s; }
.ar-extra:hover { border-color: var(--fl-terra); }
.ar-extra__name { font-size: 16px; font-weight: 900; }
.ar-extra__val { font-size: 13.5px; font-weight: 700; }
.ar-extra__val b { font: 900 19px/1 var(--en); color: var(--fl-terra); }
.ar-extra small { grid-column: 1 / -1; font-size: 13px; color: var(--fl-sub); }
.ar-extra i { position: absolute; right: 20px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--fl-terra); display: inline-flex; }

/* 地域ページへの入口（帯） */
.ar-strip { padding: clamp(40px, 6vw, 70px) 0 0; }
.sec--soft + .ar-strip { padding-bottom: clamp(10px, 2vw, 20px); }
.ar-strip__box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 40px; padding: clamp(24px, 3.4vw, 36px) clamp(22px, 3.6vw, 44px); border-radius: 20px;
  background: repeating-linear-gradient(0deg, rgba(70,45,20,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(70,45,20,.04) 0 1px, transparent 1px 4px), var(--kraft); }
.ar-strip__box::after { content: ""; position: absolute; inset: 9px; border: 2px dashed rgba(143,62,29,.28); border-radius: 13px; pointer-events: none; }
.ar-strip__hand { font: 400 clamp(19px, 1.9vw, 22px)/1.5 var(--hand); color: var(--fl-terra); }
.ar-strip__txt { margin-top: 6px; font-size: 14.5px; line-height: 1.9; color: var(--fl-sub); }
.ar-strip__links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.ar-strip__links a, .ar-slim a { display: inline-flex; flex-direction: column; justify-content: center; min-width: 120px; padding: 11px 18px; border: 2px solid var(--fl-ink); border-radius: 14px; background: #FFFCF6; box-shadow: 0 4px 0 var(--fl-ink); font-size: 16px; font-weight: 900; color: var(--fl-ink); line-height: 1.35; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ar-strip__links a small, .ar-slim a small { font-size: 11.5px; font-weight: 700; color: var(--fl-terra); }
.ar-strip__links a:hover, .ar-slim a:hover { transform: translateY(3px); box-shadow: 0 1px 0 var(--fl-ink); }
/* トップ：控えめな1行 */
.ar-slim { padding-bottom: clamp(30px, 5vw, 60px); }
.ar-slim p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 14px; color: var(--fl-sub); }
.ar-slim b { margin-right: 4px; font-family: var(--hand); font-weight: 400; font-size: 18px; color: var(--fl-terra); }
.ar-slim a { min-width: 0; padding: 6px 14px; border-radius: 99px; box-shadow: 0 3px 0 var(--fl-ink); font-size: 14px; flex-direction: row; align-items: baseline; gap: 8px; }
.ar-slim span { flex-basis: 100%; font-size: 13.5px; }
@media (min-width: 961px) { .ar-slim span { flex-basis: auto; margin-left: 6px; } }

/* フッターの対応エリア */
.footer__area { margin-top: 10px; font-size: 13px; line-height: 1.9; }
.footer__area a { text-decoration: underline; text-underline-offset: 3px; }
.footer__area a:hover { color: var(--fl-terra); }

@media (max-width: 960px) {
  .ar-plans { grid-template-columns: 1fr; gap: 14px; }
  .ar-strip__box { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ar-towns { gap: 6px; margin-top: 16px; }
  .ar-towns li { padding: 4px 10px; font-size: 12.5px; }
  .ar-plan { padding: 20px 18px 18px; }
  .ar-plan__name { font-size: 18px; }
  .ar-extra { grid-template-columns: 1fr; padding: 16px 46px 16px 18px; }
  .ar-extra i { right: 16px; }
  .ar-strip__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .ar-strip__links a { min-width: 0; padding: 10px 12px; font-size: 15px; }
}
/* 上の帯（sec--soft）の下の波が重ならないように */
.ar-slim { position: relative; z-index: 2; padding-top: clamp(56px, 6vw, 72px); }
@media (max-width: 767px) {
  .ar-strip__links { grid-template-columns: 1fr; }
  .ar-strip__links a { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 16px; }
}

/* 2026-10-23 あいさつの文章：スマホではボス指定の位置で改行（1行に入らない狭い画面は「、」などで折り返す） */
@media (max-width: 767px) {
  .pa__ln { display: block; word-break: keep-all; overflow-wrap: anywhere; }
  /* いちばん長い行（約18字）が1行に入る大きさまで、画面に合わせて少しだけ小さくする */
  .pa__letter p:not(.pa__hello):not(.pa__sign) { font-size: min(17px, calc((100vw - 84px) / 18.4)) !important; }
}

/* 2026-10-23 フッターのロゴの下に代表者名 */
.footer__owner { margin-top: 12px; font-size: 17px; font-weight: 700; letter-spacing: .08em; color: var(--fl-ink, #2B2622); }
.footer__owner span { margin-right: .7em; font-size: 13px; font-weight: 500; letter-spacing: .12em; color: #B5532A; }

/* ===== 2026-10-24 業種を先に選ぶ（業種のタイル・業種ごとのデザイン一覧） ===== */

.dzp-head { padding: 140px 0 30px; }
.dzp-head .crumb { margin-bottom: 24px; flex-wrap: wrap; }
.dzp-head h1 { margin-top: 12px; font-size: clamp(30px, 4vw, 46px); line-height: 1.35; }
.dzp-head h1 small { display: inline-block; margin-left: 14px; padding: 4px 14px; border-radius: 99px; background: var(--fl-terra); color: #fff; font-size: 14px; vertical-align: middle; letter-spacing: .06em; }
.dzp-head__lead { margin-top: 14px; font-size: 15.5px; line-height: 1.9; color: var(--fl-sub); }
.dzp { padding-top: 30px; }
.dzbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.dzb { display: flex; flex-direction: column; }
.dzb__phone { display: block; width: 62%; margin: 0 auto; padding: 7px; border-radius: 28px; background: #2B2622; box-shadow: 0 24px 40px -26px rgba(40,25,10,.6); transition: transform .5s var(--ease); }
.dzb__phone img { display: block; width: 100%; aspect-ratio: 9 / 17; object-fit: cover; object-position: top; border-radius: 22px; background: #fff; }
.dzb:hover .dzb__phone { transform: translateY(-6px); }
.dzb__body { display: flex; flex-direction: column; flex: 1; margin-top: 20px; padding: 20px 22px 22px; border-radius: 18px; background: #FFFDF8; border: 1px solid var(--fl-line); }
.dzb__cat { font-size: 12.5px; font-weight: 700; color: var(--fl-terra); letter-spacing: .06em; }
.dzb h3 { margin-top: 4px; font-size: 20px; line-height: 1.45; }
.dzb__lead { margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--fl-sub); }
.dzb__feats { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; flex: 1; align-content: flex-start; }
.dzb__feats li { padding: 3px 10px; border-radius: 99px; background: var(--fl-peach); font-size: 12px; }
.dzb__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.dzb__demo { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; background: var(--fl-terra); color: #fff; font-size: 14px; font-weight: 700; }
.dzb__demo svg { width: 13px; height: 13px; }
.dzb__demo:hover { background: var(--fl-terra-d); }
.dzb__more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.dzb__more i { display: inline-flex; width: 14px; height: 14px; }
.ind-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ind-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; background: #FFFDF8; border: 1px solid var(--fl-line); font-size: 15px; font-weight: 700; }
.ind-chip small { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--fl-peach); font-size: 12px; text-align: center; }
.ind-chip:hover, .ind-chip.is-on { border-color: var(--fl-terra); color: var(--fl-terra); }
.ind-chip.is-on { background: var(--fl-terra); color: #fff; }
.ind-chip.is-on small { background: rgba(255,255,255,.25); }

@media (max-width: 960px) {
  .dzbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .dzp-head { padding: 110px 0 16px; }
  .dzp-head h1 small { margin-left: 8px; font-size: 12.5px; }
  .dzbs { grid-template-columns: 1fr; gap: 22px; }
  .dzb { flex-direction: row; align-items: flex-start; gap: 14px; }
  .dzb__phone { width: 38%; flex: none; margin: 0; padding: 5px; border-radius: 20px; }
  .dzb__phone img { border-radius: 16px; }
  .dzb__body { margin-top: 0; padding: 14px 14px 16px; }
  .dzb h3 { font-size: 17px; }
  .dzb__lead { font-size: 13px; }
  .dzb__feats { margin: 8px 0 12px; }
  .dzb__feats { display: none; }
  .dzb__lead { margin-bottom: 12px; }
  .dzb__demo { padding: 10px 14px; font-size: 13px; }
  .ind-chip { padding: 9px 14px; font-size: 14px; }
}


/* 2026-10-24 業種のカード（写真を大きく・英字ラベル・番号・スマホ画面がのぞく） */
.inds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ind { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; color: #fff; background: #2B2622; box-shadow: 0 26px 46px -32px rgba(40,22,8,.7); isolation: isolate; }
.ind__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; z-index: -2; }
.ind::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,12,6,.42) 0%, rgba(20,12,6,0) 28%, rgba(20,12,6,0) 38%, rgba(20,12,6,.88) 100%); }
.ind__top { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; align-items: center; gap: 10px; font: 700 11px/1 var(--en); letter-spacing: .2em; }
.ind__no { padding: 6px 8px; border-radius: 99px; background: rgba(255,255,255,.9); color: var(--fl-ink); letter-spacing: .06em; }
.ind__en { text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.ind__peek { position: absolute; right: 16px; top: 22%; width: 26%; padding: 3px; border-radius: 12px; background: #1d1714; box-shadow: 0 14px 24px -10px rgba(0,0,0,.6); transform: translateY(18px) rotate(6deg); opacity: 0; transition: transform .6s var(--ease), opacity .5s; }
.ind__peek img { display: block; width: 100%; aspect-ratio: 9 / 17; object-fit: cover; object-position: top; border-radius: 9px; }
.ind__txt { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; }
.ind__name { font-family: var(--hand, inherit); font-size: clamp(22px, 2vw, 28px); line-height: 1.25; letter-spacing: .04em; text-shadow: 0 2px 14px rgba(0,0,0,.35); word-break: keep-all; overflow-wrap: anywhere; }
.ind__subs { margin-top: 6px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.86); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ind__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.3); }
.ind__n { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.ind__n b { margin-right: 4px; font: 700 22px/1 var(--en); }
.ind__go { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--fl-terra); transition: background .3s, color .3s, transform .4s var(--ease); }
.ind__go svg { width: 15px; height: 15px; }
.ind:hover .ind__bg { transform: scale(1.06); filter: saturate(1.08); }
.ind:hover .ind__peek { opacity: 1; transform: translateY(0) rotate(6deg); }
.ind:hover .ind__go { background: var(--fl-terra); color: #fff; transform: translateX(3px); }
.wt__dz .inds, .wx-sec--dark .inds { margin-top: 6px; }
@media (max-width: 1180px) { .inds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ind { aspect-ratio: 3 / 4; border-radius: 16px; }
  .ind__top { top: 11px; left: 11px; right: 11px; gap: 6px; font-size: 8.5px; letter-spacing: .14em; }
  .ind__no { padding: 4px 6px; }
  .ind__peek { display: none; }
  .ind__txt { left: 12px; right: 12px; bottom: 11px; }
  .ind__name { font-size: 17px; }
  .ind__subs { margin-top: 4px; font-size: 10.5px; }
  .ind__foot { margin-top: 8px; padding-top: 8px; }
  .ind__n { font-size: 10.5px; }
  .ind__n b { font-size: 17px; }
  .ind__go { width: 28px; height: 28px; }
  .ind__go svg { width: 12px; height: 12px; }
}

/* 2026-10-24 ボス：業種名をカードの上下左右の真ん中に大きく */
.ind::after { background: radial-gradient(ellipse 85% 60% at 50% 50%, rgba(20,12,6,.55) 0%, rgba(20,12,6,.3) 60%, rgba(20,12,6,.2) 100%), linear-gradient(180deg, rgba(20,12,6,.35) 0%, rgba(20,12,6,0) 22%, rgba(20,12,6,0) 70%, rgba(20,12,6,.6) 100%); }
.ind__txt { inset: 0; left: 0; right: 0; bottom: 0; align-items: center; justify-content: center; text-align: center; padding: 0 14px; }
.ind__name { font-size: clamp(30px, 3vw, 42px); line-height: 1.2; letter-spacing: .06em; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.ind__subs { margin-top: 10px; max-width: 90%; font-size: 12.5px; }
.ind__foot { position: absolute; left: 18px; right: 18px; bottom: 16px; margin: 0; }
.ind__peek { top: auto; bottom: 64px; }
@media (max-width: 767px) {
  .ind__txt { padding: 0 8px; }
  .ind__name { font-size: 24px; letter-spacing: .04em; }
  .ind__subs { margin-top: 6px; font-size: 10.5px; }
  .ind__foot { left: 11px; right: 11px; bottom: 10px; }
}