/* 書体（src/fonts.py が自動生成）。使っている文字だけに切り詰めてある */
@font-face{font-family:"Dela Gothic One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dela.woff2) format("woff2")}
@font-face{font-family:"Shippori Mincho B1";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/min500.woff2) format("woff2")}
@font-face{font-family:"Shippori Mincho B1";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/min700.woff2) format("woff2")}
@font-face{font-family:"Shippori Mincho B1";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/min800.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/go400.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/go700.woff2) format("woff2")}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/mono400.woff2) format("woff2")}

/* ============================================================
   柳根歓喜 ポートフォリオ — 案B「白線」
   青ベタ地 ／ 1pxの白い罫線。
   書体: ヒーローだけ Dela Gothic One。それ以外の見出しは明朝。
   ============================================================ */
:root{
  --blue:#1F3FEA; --deep:#0F26B8; --sky:#8FC1FF; --tint:#BDD8FF; --w:#fff;
  --dela:"Dela Gothic One","Hiragino Sans",sans-serif;
  --min:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --anton:"Anton","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --go:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --pad:16px; --col:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--blue);color:var(--w);
  font-family:var(--go);font-size:16px;line-height:2;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:64px;
}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- 面 ---------- */
.p{position:relative;overflow:hidden}
.p-blue{background:var(--blue);color:var(--w);--ln:rgba(255,255,255,.85);--sub:var(--tint);--acc:var(--sky);--ghost:rgba(143,193,255,.5)}
.p-sky {background:var(--sky); color:var(--blue);--ln:rgba(31,63,234,.8);--sub:var(--deep);--acc:var(--deep);--ghost:rgba(31,63,234,.38)}
.p-deep{background:var(--deep);color:var(--w);--ln:rgba(255,255,255,.85);--sub:var(--tint);--acc:var(--sky);--ghost:rgba(143,193,255,.45)}
.wrap{position:relative;z-index:1;max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
/* .wrap と同じ要素につくので左右パディングを打ち消さないこと */
.sec{padding-top:78px;padding-bottom:72px}

/* ---------- 共通 ---------- */
/* 小さい文字は 11px 以上、補足の色は青地で 4.5:1 以上（店主がスマホで読めるように。2026-10-28） */
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;line-height:1;color:var(--sub);margin-bottom:30px}
.num{position:absolute;right:-14px;top:-26px;z-index:0;pointer-events:none;
  font-family:var(--anton);font-size:min(52vw,230px);line-height:.8;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.3px var(--ghost)}
.h{font-family:var(--min);font-weight:800;font-size:clamp(29px,8.2vw,46px);line-height:1.52;letter-spacing:.01em}
.h .s{color:var(--acc)}
.body p+p{margin-top:1.55em}
.body b{font-weight:700}
figure.band{border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);background:var(--deep)}

/* ---------- ヒーロー（ここだけ Dela Gothic One）---------- */
.top{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--ln)}
.top span{font-family:var(--mono);font-size:11px;letter-spacing:.15em;line-height:1;padding:15px var(--pad)}
.top span+span{border-left:1px solid var(--ln)}
.hero{padding-top:32px}
.hl{display:block;font-family:var(--dela);font-weight:400;line-height:.98;letter-spacing:-.025em;padding-left:12px}
.hl > span{display:block;font-size:clamp(52px,14.8vw,94px);white-space:nowrap}
.hl .o{color:transparent;-webkit-text-stroke:1.7px var(--w)}
.hl .s{color:var(--sky);text-align:right;padding-right:10px}
.hl .x{font-size:clamp(108px,32.6vw,190px);margin-top:4px;margin-left:-6px}
.lead{margin:28px var(--pad) 0;font-size:15.5px;line-height:1.95;max-width:30em}
.hero-fig{margin-top:36px;aspect-ratio:4/5;max-height:72vh}

/* マーキー */
.mq{display:none;overflow:hidden;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);white-space:nowrap}
.mq-t{display:flex;width:max-content;animation:mq 34s linear infinite}
.mq span{font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.15em;line-height:1;padding:13px .4em}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 01 どんな人に、どんなことを ---------- */
.spec{margin-top:46px;border-top:1px solid var(--ln)}
.spec div{display:grid;grid-template-columns:62px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--ln)}
.spec dt{font-size:13.5px;font-weight:700;color:var(--sub);line-height:2}
.spec dd{font-size:15px;line-height:1.85}
.spec .yen{display:block;font-family:var(--anton);font-weight:400;font-size:clamp(38px,10.5vw,58px);line-height:1.05;letter-spacing:.01em}
.spec .yen.sm{font-family:var(--min);font-weight:700;font-size:clamp(26px,7vw,36px);letter-spacing:.04em}
.spec .lim{display:block;margin-top:6px;font-size:14px;line-height:1.85;color:var(--sub)}

/* ---------- 02 挨拶 ---------- */
.greet{font-size:15px;line-height:2.35}
.greet .first{display:block;font-family:var(--min);font-weight:700;font-size:clamp(22px,6vw,32px);line-height:1.62;margin-bottom:36px}
.greet p+p{margin-top:1.9em}

/* ---------- 02 自己紹介 ---------- */
.me{margin-bottom:38px;width:66%;margin-left:auto;aspect-ratio:3/4;border:1px solid var(--ln);background:var(--deep)}
.prof{border-top:1px solid var(--ln)}
.prof div{display:grid;grid-template-columns:86px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--ln)}
.prof dt{font-size:13.5px;font-weight:700;color:var(--sub);line-height:2}
.prof dd{font-size:15px;line-height:1.9}
.prof dd b{font-family:var(--min);font-weight:700;font-size:16px}
.joy{margin-top:54px;padding-top:36px;border-top:1px solid var(--ln)}
.joy .t{font-family:var(--min);font-weight:800;font-size:clamp(30px,8.4vw,46px);line-height:1.1;letter-spacing:.03em}
.joy .t em{display:block;font-style:normal;font-size:14px;color:var(--sub);margin-top:12px}
.joy-b{margin-top:24px;display:grid;grid-template-columns:136px 1fr;gap:16px;align-items:start}
.joy-b figure{aspect-ratio:4/5;background:var(--deep);border:1px solid var(--ln)}
.joy-b p{font-size:14.5px;line-height:1.9}
.joy-b p+p{margin-top:1.2em}
.ext{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:11px 16px;border:1px solid var(--ln);
  font-size:14px;font-weight:700;line-height:1.4;transition:background .18s,color .18s}
.ext:hover{background:var(--w);color:var(--blue)}
.p-sky .ext:hover{background:var(--blue);color:var(--sky)}

/* ---------- 歓喜（明朝・重ねない）---------- */
.kanji-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.kanji-big{font-family:var(--min);font-weight:500;font-size:clamp(118px,37vw,196px);line-height:1;letter-spacing:.02em}
.kanji-read{writing-mode:vertical-rl;font-family:var(--min);font-weight:500;
  font-size:clamp(13px,3.6vw,17px);letter-spacing:.42em;line-height:1;margin-top:10px}
.years{margin-top:62px;border-top:1px solid var(--ln)}
.years li{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--ln)}
.years b{font-family:var(--anton);font-weight:400;font-size:26px;line-height:1;letter-spacing:.01em}
.years span{font-size:15px;line-height:1.8}

/* ---------- 03 長文 ---------- */
.pull{font-family:var(--min);font-weight:700;font-size:clamp(20px,5.5vw,30px);line-height:1.75;
  margin:46px 0;padding-left:18px;border-left:2px solid var(--sub)}
.pull .s{color:var(--acc)}
.h+.body{margin-top:34px}
.body+.h,figure+.h{margin-top:78px}
.wide{margin-top:44px;aspect-ratio:1/1}

/* ---------- 04 できること ---------- */
.can{margin-top:4px;border-top:1px solid var(--ln)}
.can li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--ln)}
.can i{font-style:normal;font-family:var(--anton);font-size:24px;line-height:1;color:var(--sub)}
.can b{font-family:var(--min);font-weight:700;font-size:clamp(20px,5.4vw,27px);line-height:1.3}
.claim{margin-top:44px;font-family:var(--min);font-weight:700;font-size:clamp(20px,5.4vw,29px);line-height:1.7}
.price{margin-top:56px;padding-top:38px;border-top:1px solid var(--ln)}
.price .cap{font-size:14px;font-weight:700;line-height:1.5;color:var(--sub)}
.price .amt{display:block;margin:16px 0 4px;font-family:var(--anton);font-weight:400;
  font-size:clamp(54px,15.5vw,88px);line-height:1;letter-spacing:.005em}
.price p{font-size:15px;line-height:1.9}
/* 「もう埋まってるかも」で閉じられないための、いま受けられる表示 */
.price p.slot{display:inline-block;margin-top:14px;padding:7px 14px;border:1px solid var(--ln);
  font-size:13.5px;line-height:1.6}
.free{margin-top:56px;padding-top:38px;border-top:1px solid var(--ln)}
.free .t{font-family:var(--min);font-weight:700;font-size:clamp(22px,5.9vw,31px);line-height:1.55;margin-bottom:26px}
.est{margin-top:32px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px;line-height:1.9}
.est dt{color:var(--sub);font-weight:700}

/* ---------- 05 制作事例 ---------- */
.intro{margin-top:32px}
.works{margin-top:16px}
.work{padding:44px 0 40px;border-bottom:1px solid var(--ln)}
.work figure{aspect-ratio:2/3;border:1px solid var(--ln);background:var(--deep);margin-bottom:22px}
.work .m{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;color:var(--sub);line-height:1.6}
.work h3{margin:12px 0 0;font-family:var(--min);font-weight:800;font-size:clamp(26px,7vw,36px);line-height:1.35}
.work .wd{margin-top:16px;font-size:15px;line-height:1.95}
.work .go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:12px 18px;
  border:1px solid var(--ln);font-size:14px;font-weight:700;transition:background .18s,color .18s}
.work .go:hover{background:var(--w);color:var(--blue)}
.close{margin-top:48px;font-family:var(--min);font-weight:700;font-size:clamp(19px,5.1vw,26px);line-height:1.75}

/* ---------- 06 最後に ---------- */
.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:50px;
  padding:24px var(--pad);background:var(--w);color:var(--blue);
  font-family:var(--min);font-weight:700;font-size:clamp(17px,4.6vw,22px);line-height:1.3;transition:background .18s}
.cta span:last-child{font-family:var(--anton);font-size:30px;line-height:1}
.cta:hover{background:var(--sky)}
.cta-note{margin-top:16px;font-size:14px;line-height:1.9;color:var(--sub)}
.foot{border-top:1px solid var(--ln);margin-top:52px;padding:28px 0 36px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;line-height:2.2;color:var(--sub)}
.foot a:hover{color:var(--w)}

/* 指で押せる大きさ（44px）を確保する。見た目は変えず、判定だけ上下に広げる。
   縦に並ぶ footer のリンクは、広げると隣同士が重なるので padding で伸ばす */
:is(.back,.textlink,.top a,.top button){position:relative}
:is(.back,.textlink,.top a,.top button)::after{content:"";position:absolute;
  left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.ext{padding-top:13px;padding-bottom:13px}
.foot a{display:inline-block;padding-block:7px;margin-block:-3px}

/* ---------- 追従CTA ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:10px;
  height:64px;background:var(--w);color:var(--blue);border-top:1px solid var(--blue);
  font-family:var(--min);font-weight:700;font-size:16px;line-height:1;
  transform:translateY(100%);transition:transform .3s ease}
.bar.on{transform:none}
.bar i{font-style:normal;font-family:var(--anton);font-size:22px}

/* ---------- 動き（JSが動いた時だけ）---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}
@media (min-width:560px){
  :root{--pad:30px}
  .joy-b{grid-template-columns:180px 1fr;gap:24px}
  .me{width:54%}
}

/* ============================================================
   追加分: メニュー／トップの要約ブロック／サービス詳細ページ
   （base.css の後ろに連結して使う）
   ============================================================ */
[hidden]{display:none!important}

/* ---------- 上部バー（MENU）---------- */
.top a,.top .menu-btn{font-family:var(--mono);font-size:11px;letter-spacing:.15em;line-height:1;padding:15px var(--pad);color:inherit}
.menu-btn{-webkit-appearance:none;appearance:none;background:none;border:0;border-left:1px solid var(--ln);border-radius:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;line-height:1;padding:15px var(--pad);color:inherit;cursor:pointer;
  transition:background .18s,color .18s}
.menu-btn:hover{background:var(--w);color:var(--blue)}

/* ---------- メニュー（全画面の青）---------- */
html.menu-open{overflow:hidden}
.menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;overflow-y:auto;
  background:var(--blue);color:var(--w);--ln:rgba(255,255,255,.85);--sub:var(--tint);--acc:var(--sky)}
.menu-head{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--ln)}
.menu-head span{font-family:var(--mono);font-size:11px;letter-spacing:.15em;line-height:1;padding:15px var(--pad);color:var(--sub)}
.menu-list{padding:6px var(--pad) 0}
.menu-list a{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--ln);
  font-family:var(--min);font-weight:700;font-size:clamp(16px,4.4vw,21px);line-height:1.4;transition:color .18s}
.menu-list b{font-family:var(--anton);font-weight:400;font-size:20px;line-height:1;color:var(--sub)}
.menu-list a:hover,.menu-list a[aria-current]{color:var(--sky)}
.menu-list a[aria-current]::after{content:"いまのページ";font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;margin-left:8px;grid-column:1;justify-self:start}
.menu-cta{padding:22px var(--pad) 0}
.menu-foot{margin-top:auto;padding:26px var(--pad) 90px;font-size:13.5px;line-height:2;color:var(--sub)}

/* ---------- チェックつきの箇条 ---------- */
.checks{margin-top:26px;border-top:1px solid var(--ln)}
.checks li{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid var(--ln);font-size:15px;line-height:1.85}
.checks li::before,.items b::before{content:"";position:absolute;width:11px;height:6px;
  border-left:1.6px solid var(--sub);border-bottom:1.6px solid var(--sub);transform:rotate(-45deg)}
.checks li::before{left:3px;top:calc(15px + .7em)}
.h+.checks{margin-top:36px}

/* ---------- トップ: 要約ブロック（05の中）---------- */
.std{margin-top:56px;padding-top:38px;border-top:1px solid var(--ln)}
.std .t{font-family:var(--min);font-weight:700;font-size:clamp(22px,5.9vw,31px);line-height:1.55}
.std-lead{margin-top:18px;font-size:15px;line-height:1.95}
.more{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:30px;padding:20px var(--pad);
  background:var(--blue);color:var(--w);font-family:var(--min);font-weight:700;font-size:clamp(15px,4.2vw,19px);line-height:1.5;
  transition:background .18s,color .18s}
.more span:last-child{font-family:var(--anton);font-weight:400;font-size:26px;line-height:1}
.more:hover{background:var(--deep)}
.p-blue .more,.p-deep .more{background:var(--w);color:var(--blue)}
.p-blue .more:hover,.p-deep .more:hover{background:var(--sky)}

/* ---------- サービス詳細: ヒーロー ---------- */
.sv-hero{padding-top:30px}
.back{display:inline-flex;align-items:center;gap:8px;margin:0 var(--pad);font-size:14px;line-height:1;color:var(--sub)}
.back:hover{color:var(--w)}
.sv-hero .lbl{margin:38px var(--pad) 0}
.sv-h{margin:24px var(--pad) 0;font-family:var(--min);font-weight:800;font-size:clamp(42px,12.4vw,86px);line-height:1.3;letter-spacing:.01em}
.sv-h span{display:block;white-space:nowrap}
.sv-h .s{color:var(--acc)}
.sv-lead{margin:28px var(--pad) 0;font-size:15.5px;line-height:2;max-width:32em}
.sv-fig{width:100%;max-width:var(--col);margin:40px auto 0;aspect-ratio:1/1}

/* ---------- サービス詳細: 項目リスト ---------- */
.items{margin-top:40px;border-top:1px solid var(--ln)}
.items li{padding:20px 0 20px 30px;border-bottom:1px solid var(--ln)}
.items b{position:relative;display:block;font-family:var(--min);font-weight:700;font-size:clamp(17px,4.7vw,22px);line-height:1.55}
.items b::before{left:-27px;top:.55em}
.items span{display:block;margin-top:6px;font-size:15px;line-height:1.9}

/* 正直に書くこと */
.honest{margin-top:46px;padding-top:28px;border-top:1px solid var(--ln)}
.honest .cap{font-size:14px;font-weight:700;line-height:1.5;color:var(--sub)}
.honest .t{margin-top:16px;font-family:var(--min);font-weight:700;font-size:clamp(19px,5.2vw,26px);line-height:1.65}
.honest .body{margin-top:14px}

/* 制作例サムネイル */
.thumbs{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumbs a{display:block;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--ln);background:var(--deep)}
.thumbs img{transition:transform .5s ease}
.thumbs a:hover img{transform:scale(1.04)}
.thumbs-cap{margin-top:12px;font-size:14px;line-height:1.7;color:var(--sub)}
.textlink{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding-bottom:4px;border-bottom:1px solid currentColor;
  font-size:14px;font-weight:700;line-height:1.4;transition:color .18s}
.textlink:hover{color:var(--sub)}

/* 料金 */
.price.sv-price{margin-top:0;padding-top:0;border-top:0}
.sv-note{margin-top:22px;font-size:15px;line-height:1.9}

/* 制作の流れ */
.steps{margin-top:40px;border-top:1px solid var(--ln)}
.steps li{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:22px 0;border-bottom:1px solid var(--ln)}
.steps i{font-style:normal;font-family:var(--anton);font-size:30px;line-height:1.05;color:var(--sub)}
.steps b{display:block;font-family:var(--min);font-weight:700;font-size:clamp(17px,4.7vw,22px);line-height:1.5}
.steps span{display:block;margin-top:6px;font-size:15px;line-height:1.9}
.bring{margin-top:40px}
.bring .cap{font-size:14px;font-weight:700;line-height:1.5;color:var(--sub)}
.bring p:last-child{margin-top:14px;font-size:15px;line-height:1.95}

/* よくある質問 */
.faq{margin-top:40px;border-top:1px solid var(--ln)}
.faq div{padding:22px 0;border-bottom:1px solid var(--ln)}
.faq dt,.faq dd{display:grid;grid-template-columns:26px 1fr;gap:10px}
.faq dt{font-family:var(--min);font-weight:700;font-size:clamp(16px,4.4vw,20px);line-height:1.6}
.faq dd{margin-top:12px;font-size:15px;line-height:1.95}
.faq dt::before,.faq dd::before{font-family:var(--anton);font-weight:400;font-size:20px;line-height:1.3;color:var(--sub)}
.faq dt::before{content:"Q"}
.faq dd::before{content:"A"}

/* 最後 */
.links{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 26px}
.links .textlink{margin-top:0}

@media (min-width:560px){
  .thumbs{gap:12px}
}

/* ============================================================
   2026-10-27 全面改修分 — 全ページ共通の部品と、新しいページ
   （fonts / base / pages の後ろ、motion の前に連結）
   ============================================================ */

/* ---------- ボタン ---------- */
.btn{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px var(--pad);border:1px solid var(--ln);
  font-family:var(--min);font-weight:700;font-size:clamp(15px,4.2vw,18px);line-height:1.4;transition:background .18s,color .18s,border-color .18s}
.btn span:last-child{font-family:var(--anton);font-weight:400;font-size:24px;line-height:1}
.btn.pri{background:var(--w);color:var(--blue);border-color:var(--w)}
.p-sky .btn.pri{background:var(--blue);color:var(--w);border-color:var(--blue)}
.btn:hover{background:var(--w);color:var(--blue)}
.p-sky .btn:hover{background:var(--blue);color:var(--w)}
.btn.pri:hover{background:var(--sky);color:var(--blue);border-color:var(--sky)}
.p-sky .btn.pri:hover{background:var(--deep);color:var(--w);border-color:var(--deep)}
.ways{margin-top:36px;display:grid;gap:8px}
.ways+.cta-note{margin-top:18px}

/* ---------- トップ: h1 の2行目（何屋かを h1 に含める。見た目は帯の1行目のまま） ---------- */
.hl-sub{display:block;margin:30px var(--pad) 0;font-family:var(--min);font-weight:700;font-size:clamp(17px,4.9vw,23px);line-height:1.6;letter-spacing:.01em}

/* ---------- トップ: ヒーローの帯（3秒で分かる） ---------- */
.band-fv{margin:30px var(--pad) 0}
.band-t{font-family:var(--min);font-weight:700;font-size:clamp(17px,4.9vw,23px);line-height:1.6}
.band-f{display:flex;flex-wrap:wrap;margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;line-height:1.9;color:var(--sub)}
.band-f li+li::before{content:"／";margin:0 .6em}
.band-b{margin-top:18px;display:grid;gap:8px}

/* ---------- サブページの見出し ---------- */
.pg-hero{padding-top:28px;padding-bottom:54px}
.crumb{display:flex;flex-wrap:wrap;margin:26px var(--pad) 0;font-size:13px;line-height:1.9;color:var(--sub)}
.crumb li+li::before{content:"›";margin:0 .55em}
.crumb a:hover{color:var(--w)}
.pg-lbl{margin:30px var(--pad) 0}
.pg-h{margin:22px var(--pad) 0;font-family:var(--min);font-weight:800;font-size:clamp(34px,9.8vw,66px);line-height:1.32;letter-spacing:.01em}
.pg-h .s{color:var(--acc)}
.pg-lead{margin:24px var(--pad) 0;font-size:15.5px;line-height:2;max-width:32em}
.pg-hero .btn{margin:28px var(--pad) 0;max-width:440px}
.meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:20px var(--pad) 0;font-size:13.5px;line-height:1.9;color:var(--sub)}

/* ---------- 記事・長文（Markdown から生成した本文） ---------- */
.article{font-size:16px;line-height:2.05}
.article p+p{margin-top:1.5em}
.article > :first-child{margin-top:0}
.a-h2{margin:60px 0 22px;padding-top:26px;border-top:1px solid var(--ln);font-family:var(--min);font-weight:800;font-size:clamp(22px,6.2vw,31px);line-height:1.5}
.a-h3{margin:38px 0 14px;font-family:var(--min);font-weight:700;font-size:clamp(17px,4.8vw,22px);line-height:1.6}
.a-h2+p,.a-h3+p{margin-top:0}
.a-ul,.a-ol{margin:22px 0;border-top:1px solid var(--ln)}
.a-ul li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--ln);font-size:15px;line-height:1.9}
.a-ul li::before{content:"";position:absolute;left:4px;top:1.2em;width:7px;height:7px;border-radius:50%;background:var(--sub)}
.a-ol li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--ln);font-size:15px;line-height:1.9}
.a-ol i{font-style:normal;font-family:var(--anton);font-size:24px;line-height:1.2;color:var(--sub)}
.a-q{margin:38px 0;padding-left:18px;border-left:2px solid var(--sub);font-family:var(--min);font-weight:700;font-size:clamp(17px,4.8vw,23px);line-height:1.8}
.a-hr{border:0;border-top:1px solid var(--ln);margin:44px 0}
.article a{border-bottom:1px solid currentColor;transition:color .18s}
.article a:hover{color:var(--sub)}
.article b{font-weight:700}
.article img{margin:30px 0;border:1px solid var(--ln)}

/* ---------- 記事一覧・最新記事 ---------- */
.posts{margin-top:30px;border-top:1px solid var(--ln)}
.posts li{border-bottom:1px solid var(--ln)}
.posts a{display:block;padding:22px 0}
.posts time{display:block;font-size:13px;color:var(--sub)}
.posts b{display:block;margin-top:8px;font-family:var(--min);font-weight:700;font-size:clamp(17px,4.8vw,22px);line-height:1.55;transition:color .18s}
.posts span{display:block;margin-top:8px;font-size:14.5px;line-height:1.85}
.posts a:hover b{color:var(--sub)}

/* ---------- 地域・業種のリンク ---------- */
.grid-links{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid-links a{display:block;padding:15px 14px;border:1px solid var(--ln);font-family:var(--min);font-weight:700;font-size:clamp(15px,4.2vw,18px);line-height:1.4;transition:background .18s,color .18s}
.grid-links small{display:block;margin-top:3px;font-family:var(--go);font-weight:400;font-size:12.5px;color:var(--sub)}
.grid-links a:hover,.grid-links a[aria-current]{background:var(--w);color:var(--blue)}
.p-sky .grid-links a:hover,.p-sky .grid-links a[aria-current]{background:var(--blue);color:var(--w)}
.grid-links a[aria-current] small{color:inherit;opacity:.8}
.h+.grid-links{margin-top:36px}

/* ---------- 料金ページ: 公開後のプラン ---------- */
.trial{margin-top:40px;padding:22px var(--pad);border:1px solid var(--ln)}
.trial b{display:block;font-family:var(--min);font-weight:700;font-size:clamp(18px,5vw,24px);line-height:1.6}
.trial p{margin-top:10px;font-size:15px;line-height:1.9}
.plans{margin-top:30px;display:grid;gap:14px}
.plan{border:1px solid var(--ln);padding:24px var(--pad) 26px}
.p-sky .plan.pri{background:var(--blue);color:var(--w);--ln:rgba(255,255,255,.85);--sub:var(--tint)}
.p-blue .plan.pri,.p-deep .plan.pri{background:var(--w);color:var(--blue);--ln:rgba(31,63,234,.8);--sub:var(--deep)}
.plan .tag{display:inline-block;margin-bottom:12px;padding:5px 10px;border:1px solid var(--ln);font-size:12.5px;font-weight:700;line-height:1}
.plan h3{font-family:var(--min);font-weight:800;font-size:clamp(22px,6vw,28px);line-height:1.3}
.plan .amt{display:block;margin-top:12px;font-family:var(--anton);font-weight:400;font-size:clamp(40px,11vw,56px);line-height:1;letter-spacing:.005em}
.plan .amt small{font-family:var(--go);font-weight:700;font-size:15px;margin:0 3px}
.plan .for{margin-top:10px;font-size:14px;line-height:1.8;color:var(--sub)}
.plan dl{margin-top:18px;border-top:1px solid var(--ln)}
.plan dl div{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--ln);font-size:14px;line-height:1.7}
.plan dt{color:var(--sub)}
.plan dd b{font-weight:700}
.plan dd small{display:block;font-size:12.5px;line-height:1.6;color:var(--sub)}
.plan .year{margin-top:14px;font-size:13.5px;line-height:1.8;color:var(--sub)}
.fees{margin-top:36px;border-top:1px solid var(--ln)}
.fees li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--ln)}
.fees b{font-family:var(--min);font-weight:700;font-size:16px;line-height:1.5}
.fees small{display:block;margin-top:4px;font-size:13.5px;line-height:1.8;color:var(--sub)}
.fees i{font-style:normal;font-family:var(--anton);font-size:22px;line-height:1;white-space:nowrap}
.fees i em{font-style:normal;font-family:var(--go);font-weight:700;font-size:12px}

/* ---------- お問い合わせフォーム ---------- */
.form{margin-top:30px}
.form label{display:block;margin-top:22px;font-size:14px;font-weight:700;color:var(--sub)}
.form input,.form textarea{display:block;width:100%;margin-top:8px;padding:14px;border:1px solid var(--ln);border-radius:0;
  background:transparent;color:inherit;font:inherit;font-size:16px;line-height:1.6}
.form textarea{min-height:170px;resize:vertical}
.form ::placeholder{color:var(--sub);opacity:.8}
.form button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:28px;padding:20px var(--pad);border:0;border-radius:0;
  background:var(--blue);color:var(--w);font-family:var(--min);font-weight:700;font-size:17px;line-height:1.3;cursor:pointer;transition:background .18s}
.form button span:last-child{font-family:var(--anton);font-weight:400;font-size:24px}
.form button:hover{background:var(--deep)}
.form .ok{margin-top:16px;font-size:14px;line-height:1.9;color:var(--sub)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 事業者情報・表 ---------- */
.biz{margin-top:36px;border-top:1px solid var(--ln)}
.biz div{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--ln);font-size:15px;line-height:1.8}
.biz dt{font-size:13.5px;font-weight:700;color:var(--sub);line-height:2}
.biz a{border-bottom:1px solid currentColor}

/* ---------- フッター（全ページ共通） ---------- */
.site-foot{padding:56px 0 40px}
.sf-name{font-family:var(--min);font-weight:800;font-size:clamp(22px,6vw,30px);line-height:1.3}
.sf-name small{display:block;margin-top:8px;font-family:var(--go);font-weight:400;font-size:13.5px;color:var(--sub)}
.sf-ways{margin-top:22px;display:grid;gap:8px;max-width:440px}
.sf-cols{margin-top:42px;display:grid;gap:30px}
.sf-cap{font-size:13.5px;font-weight:700;color:var(--sub);margin-bottom:10px}
.sf-nav li,.sf-area li{display:inline-block;margin:0 14px 4px 0;font-size:14.5px;line-height:2}
.sf-nav a,.sf-area a{display:inline-block;padding-block:8px;margin-block:-2px;transition:color .18s}
.sf-nav a:hover,.sf-area a:hover{color:var(--sub)}
.sf-note{margin-top:8px;font-size:13.5px;line-height:1.8;color:var(--sub)}
.sf-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--ln);font-size:13.5px;line-height:2.1;color:var(--sub)}
.sf-bottom a{display:inline-block;padding-block:9px;margin-block:-4px;transition:color .18s}
.sf-bottom a:hover{color:var(--w)}
.sf-bottom p+p{margin-top:10px}

/* ---------- 細かい調整 ---------- */
.mt{margin-top:40px}
.h+.body{margin-top:30px}
.sec-s{padding-top:56px;padding-bottom:56px}
.note{margin-top:22px;font-size:14px;line-height:1.9;color:var(--sub)}
.price .amt small{font-family:var(--go);font-weight:700;font-size:14px;letter-spacing:0;margin-left:6px;vertical-align:middle}

@media (min-width:560px){
  .band-b{grid-template-columns:1fr 1fr}
  .grid-links{grid-template-columns:repeat(3,1fr)}
  .sf-cols{grid-template-columns:1fr 1fr}
  .ways{grid-template-columns:1fr 1fr}
  .ways .btn:first-child{grid-column:1/-1}
}
@media (min-width:760px){
  .plans{grid-template-columns:repeat(3,1fr)}
  .plan dl div{grid-template-columns:1fr;gap:2px}
}

/* ---------- お客様の声（実名掲載の許可が出たら使う。いまは非表示） ---------- */
.voice{margin-top:40px;border-top:1px solid var(--ln)}
.voice li{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--ln)}
.voice figure{aspect-ratio:1/1;border:1px solid var(--ln);background:var(--deep)}
.voice b{display:block;font-family:var(--min);font-weight:700;font-size:16px;line-height:1.5}
.voice span{display:block;margin-top:6px;font-size:13.5px;line-height:1.9}
.voice small{display:block;margin-top:8px;font-size:13px;color:var(--sub)}

/* ---------- 紙の面（読む章。青は「舞台」、白は「紙」。2026-10-28 見本） ---------- */
.p-paper{background:#fff;color:#0d1b45;--ln:rgba(13,27,69,.28);--sub:#4b5b8d;--acc:var(--blue);--ghost:rgba(31,63,234,.16)}
.p-paper+.p-paper .wrap{border-top:1px solid var(--ln)}
.p-paper .body,.p-paper .article,.p-paper .greet{line-height:1.9}
.p-paper .btn.pri{background:var(--blue);color:#fff;border-color:var(--blue)}
.p-paper .btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.p-paper .btn.pri:hover{background:var(--deep);border-color:var(--deep)}
.p-paper .ext:hover,.p-paper .work .go:hover,.p-paper .textlink:hover{color:var(--blue)}
.p-paper .ext:hover,.p-paper .work .go:hover{background:var(--blue);color:#fff}
.p-paper .grid-links a:hover,.p-paper .grid-links a[aria-current]{background:var(--blue);color:#fff}
.p-paper .grid-links a[aria-current] small{color:#fff}
.p-paper .more{background:var(--blue);color:#fff}
.p-paper .more:hover{background:var(--deep)}
.p-paper .price .amt,.p-paper .spec .yen,.p-paper .plan .amt,.p-paper .fees i{color:var(--blue)}
.p-paper .plan.pri{background:var(--blue);color:#fff;--ln:rgba(255,255,255,.85);--sub:var(--tint);--acc:var(--sky)}
.p-paper .plan.pri .amt{color:#fff}
.p-paper .h .s,.p-paper .pg-h .s,.p-paper .pull .s{color:var(--blue)}
.p-paper .kanji-big,.p-paper .kanji-read{color:var(--blue)}
.p-paper .years b,.p-paper .steps i,.p-paper .a-ol i{color:var(--blue)}
.p-paper .posts a:hover b{color:var(--blue)}
.p-paper .form input,.p-paper .form textarea{border-color:rgba(13,27,69,.4)}
.p-paper .trial{border-color:var(--blue)}

/* ---------- 対応地域の地図（本物の市境） ---------- */
.amap{margin-top:30px}
.amap svg{display:block;width:100%;height:auto}
.amap .sea{fill:#EEF3FC}
.amap .nb path{fill:#F6F8FD;stroke:#fff;stroke-width:1}
.amap a.c path{stroke:#fff;stroke-width:1.1;transition:fill .18s}
.amap a.c[data-slug="sakai"] path{stroke:#DFE8FF}
.amap a.c.senshu path{fill:#C9DCFF}
.amap a.c.minami path{fill:#DFE8FF}
.amap a.c.base path{fill:var(--blue)}
.amap a.c:hover path,.amap a.c[aria-current] path{fill:var(--deep)}
.amap .ld line{stroke:#0d1b45;stroke-width:.8;opacity:.6}
.amap a.n text{font-family:var(--min);font-weight:700;font-size:13.5px;fill:#0d1b45;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:2.5px;stroke-linejoin:round}
.amap a.n.base text{fill:#fff;stroke:var(--blue)}
.amap a.n:hover text{fill:var(--blue)}
.amap .note{font-family:var(--go);font-size:11px;fill:#5b6a9a}
.p-blue .amap .sea,.p-deep .amap .sea{fill:rgba(255,255,255,.08)}
.atable{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
.atable th{text-align:left;font-weight:700;color:var(--sub);padding:10px 0;border-bottom:1px solid var(--ln);font-size:13.5px}
.atable td{padding:11px 0;border-bottom:1px solid var(--ln)}
.atable td:last-child{color:var(--sub)}
.atable a{font-family:var(--min);font-weight:700;border-bottom:1px solid currentColor}

/* ============================================================
   動き（2026-09-15 追加／2026-09-16 本文の動きを大幅に削減）— base.css・pages.css の後ろに連結
   方針: 演出はヒーローだけ。本文は「すぐ読める」を優先し、文字のかたまりが軽く出るだけ。
   本文の写真は隠さない（読み込めていないように見えるため）。
   ほとんどは html.js がある時だけ効く。.js は common.js が
   「JSが動いていて、動きを減らす設定ではない」時にだけ付ける。
   ============================================================ */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.77,0,.18,1)}

/* ================= ヒーロー（トップ）: 開いた瞬間 ================= */

/* 上部バー: 下の線を左から引く → 文字 → MENUの縦線を上から */
.js #top .top{border-bottom-color:transparent;background:linear-gradient(var(--ln),var(--ln)) 0 100%/0 1px no-repeat}
.js #top .top > *{opacity:0}
.js #top .top .menu-btn{border-left-color:transparent;background:linear-gradient(var(--ln),var(--ln)) 0 0/1px 0 no-repeat}
.js #top.go .top{background-size:100% 1px;transition:background-size 1.3s var(--ease-io)}
.js #top.go .top > *{opacity:1;transition:opacity .9s var(--ease) .45s,color .18s}
.js #top.go .top .menu-btn{background-size:1px 100%;transition:opacity .9s var(--ease) .45s,background-size .9s var(--ease-io) .6s,color .18s}
.js #top.go .top .menu-btn:hover{background:var(--w)}

/* 見出し: 1行ずつ、斜めからせり上がる。「する男」は1文字ずつ */
.js .hl > span{overflow:hidden;padding-top:.1em;padding-bottom:.16em;margin-top:-.1em;margin-bottom:-.16em}
.js .hl > span.x{margin-top:calc(4px - .1em)}
.js .hl-i{display:block;transform:translateY(125%) skewY(7deg);transform-origin:0 0}
.js .hl-c{display:inline-block;transform:translateY(125%) rotate(7deg);transform-origin:0 100%}
.js #top.go .hl-i,.js #top.go .hl-c{transform:none;transition:transform 1.3s var(--ease)}
.js #top.go .hl > span:nth-child(1) .hl-i{transition-delay:.2s}
.js #top.go .hl > span:nth-child(3) .hl-i{transition-delay:.4s}
.js #top.go .hl-c:nth-child(1){transition-delay:.52s}
.js #top.go .hl-c:nth-child(2){transition-delay:.6s}
.js #top.go .hl-c:nth-child(3){transition-delay:.68s}

/* 輪郭線の「向き合って」: せり上がったあと、水色の光が一度だけ文字の中を通る */
.js .hl .o .hl-i{background:linear-gradient(100deg,transparent 40%,rgba(143,193,255,.95) 50%,transparent 60%) 130% 0/260% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text}
.js #top.go .hl .o .hl-i{background-position:-30% 0;transition:transform 1.3s var(--ease) .3s,background-position 1.7s var(--ease-io) 1.25s}

/* リード文・h1の2行目 */
.js #top .hl-sub{opacity:0;transform:translateY(14px)}
.js #top.go .hl-sub{opacity:1;transform:none;transition:opacity .9s var(--ease) .7s,transform 1s var(--ease) .7s}
.js #top .lead{opacity:0;transform:translateY(18px)}
.js #top.go .lead{opacity:1;transform:none;transition:opacity 1.1s var(--ease) .85s,transform 1.2s var(--ease) .85s}

/* 写真: 水色の面が下から上がり、それが抜けると写真が寄った状態から落ち着く（2段のワイプ） */
#top .hero-fig,#top .sv-fig{position:relative}
.js #top :is(.hero-fig,.sv-fig){clip-path:inset(100% 0 0 0)}
.js #top :is(.hero-fig,.sv-fig)::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:var(--sky);transform-origin:50% 0}
.js #top :is(.hero-fig,.sv-fig) img{transform:scale(1.3)}
.js #top.go :is(.hero-fig,.sv-fig){clip-path:inset(0);transition:clip-path 1.1s var(--ease-io) .55s}
.js #top.go :is(.hero-fig,.sv-fig)::before{transform:scaleY(0);transition:transform 1.15s var(--ease-io) 1.15s}
.js #top.go :is(.hero-fig,.sv-fig) img{transform:scale(1.08);transition:transform 2.6s var(--ease) 1.15s}

/* マーキーの帯: 上の線は左から、下の線は右から */
.js #top .mq{border-top-color:transparent;border-bottom-color:transparent;
  background:linear-gradient(var(--ln),var(--ln)) 0 0/0 1px no-repeat,linear-gradient(var(--ln),var(--ln)) 100% 100%/0 1px no-repeat}
.js #top .mq-t{opacity:0}
.js #top.go .mq{background-size:100% 1px,100% 1px;transition:background-size 1.4s var(--ease-io) 1.1s}
.js #top.go .mq-t{opacity:1;transition:opacity 1.2s var(--ease) 1.6s}

/* ================= ヒーロー（サービス詳細） ================= */
.js #top :is(.back,.sv-hero .lbl,.sv-lead){opacity:0;transform:translateY(14px)}
.js #top.go .back{opacity:1;transform:none;transition:opacity .9s var(--ease) .25s,transform 1s var(--ease) .25s,color .18s}
.js #top.go .sv-hero .lbl{opacity:1;transform:none;transition:opacity .9s var(--ease) .35s,transform 1s var(--ease) .35s}
.js #top.go .sv-lead{opacity:1;transform:none;transition:opacity 1.1s var(--ease) .95s,transform 1.2s var(--ease) .95s}
.js .sv-h > span{overflow:hidden;padding-top:.08em;padding-bottom:.14em;margin-top:-.08em;margin-bottom:-.14em}
.js .sv-h .ln-i{display:block;transform:translateY(125%) skewY(6deg);transform-origin:0 0}
.js #top.go .sv-h .ln-i{transform:none;transition:transform 1.3s var(--ease)}
.js #top.go .sv-h > span:nth-child(1) .ln-i{transition-delay:.4s}
.js #top.go .sv-h > span:nth-child(2) .ln-i{transition-delay:.52s}
.js #top.go .sv-h > span:nth-child(3) .ln-i{transition-delay:.64s}

/* ================= 本文: 文字のかたまりが軽く出るだけ ================= */
/* 画面に入る少し手前で始まり、0.5秒ほどで終わる。時間差はつけない */
.js .rv{transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
/* 写真・写真を含むかたまりは動かさない（最初から見える） */
.js :is(figure.rv,.thumbs.rv,.work.rv,.joy.rv){opacity:1;transform:none;transition:none}

/* ================= ボタン・リンクの細部（触れた時だけ） ================= */
.cta span:last-child,.more span:last-child,.go span,.ext span,.textlink span,.bar i,.menu-list b,.back span{display:inline-block;transition:transform .45s var(--ease)}
.cta:hover span:last-child,.more:hover span:last-child,.go:hover span,.ext:hover span,.bar:hover i,.menu-list a:hover b{transform:translateX(6px)}
.textlink:hover span{transform:translateX(4px)}
.back:hover span,.links .textlink:first-child:hover span{transform:translateX(-4px)}
.textlink{border-bottom:0;background:linear-gradient(currentColor,currentColor) 100% 100%/100% 1px no-repeat;transition:color .18s,background-size .5s var(--ease-io)}
.textlink:hover{background-size:0 1px}
.bar{transition:transform .6s var(--ease)}

/* ================= メニューの開閉（短く） ================= */
.menu{clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease-io)}
.menu.open{clip-path:inset(0)}
.menu-head,.menu-foot{opacity:0;transition:opacity .4s var(--ease) .2s}
.menu.open .menu-head,.menu.open .menu-foot{opacity:1}
.menu-list li{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.menu.open .menu-list li{opacity:1;transform:none}