/* サイト共通の部品（トップ・実績・Dev Log）：青い切り紙の海の7色・平らな面・手切りの縁。仕様は generation/redesign-spec.md §2・§5。トップだけの部品は style.css */
:root{
  color-scheme:dark;
  --ink:#061226;--ultra:#0F2C74;--cobalt:#2A5CF0;--sky:#7C9CF8;--ivory:#F3EBD6;--salmon:#F1907E;--red:#E23B4E;
  --head:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --latin:"Helvetica Neue",Arial,sans-serif;
  --gutter:max(16px,5vw);
}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:auto;scroll-padding-top:84px}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--body);font-size:16px;line-height:1.95;letter-spacing:.03em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--salmon);outline-offset:4px}
.sec-cobalt :focus-visible{outline-color:var(--ivory)}html:not(.past) header.site :focus-visible{outline-color:var(--ivory);outline-offset:0;box-shadow:0 0 0 6px var(--ink)} /* 舞台の上：墨紺の縁の上に生成りの枠（どの海の色の上でも見える） */
[class*="cut-"]:not(.btn){clip-path:var(--cut)}
.eyebrow{font-family:var(--latin);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:14px}
.sec-cobalt .eyebrow{color:var(--ivory)}

/* ボタン：面と硬い影を疑似要素で手切りにする（clip-path は影を切ってしまうため） */
.btn{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 26px;font-weight:700;font-size:15px;color:var(--ink);transition:transform .16s}
.btn::before,.btn::after{content:"";position:absolute;inset:0;clip-path:var(--cut,none);z-index:-1;background:var(--salmon)}
.btn::after{z-index:-2;background:var(--ink);transform:translate(4px,5px);transition:transform .16s}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{transform:translate(2px,3px)}
.btn.ghost{color:var(--ivory)}.btn.ghost::before{background:transparent;box-shadow:inset 0 0 0 2px var(--ivory)}.btn.ghost::after{display:none}
.text-link{font-weight:700;border-bottom:2px solid currentColor;padding-bottom:2px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;margin-top:26px}

/* ヘッダー */
header.site{position:fixed;inset:0 0 auto;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gutter);pointer-events:none;transition:background .3s,padding .3s}
header.site>*{pointer-events:auto}
.logo{font-family:var(--latin);font-weight:800;font-size:18px;letter-spacing:.12em;white-space:nowrap}
.logo i{display:inline-block;width:8px;height:8px;margin-left:4px;background:var(--red);border-radius:50%;vertical-align:.1em}
header nav{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:700}
header nav .nav-link:hover,header nav a:not(.cta):hover{color:var(--sky)}
header .cta{position:relative;z-index:0;padding:9px 20px;color:var(--ink);white-space:nowrap}
header .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--salmon);clip-path:polygon(1% 4%,26% 0,52% 5%,78% 1%,99% 6%,100% 52%,98% 96%,70% 100%,44% 95%,18% 100%,0 94%,2% 50%);transition:background .4s}
/* 舞台の上では地がないので、ロゴとナビの文字を墨紺の札に載せる（明るいコバルトの海面の上でも読めるように） */
html:not(.past) header.site .logo,html:not(.past) header nav a:not(.cta){background:var(--ink);padding:3px 9px}
html.past header.site{background:rgba(6,18,38,.94);padding-top:12px;padding-bottom:12px}
html.past header.site::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:rgba(6,18,38,.94);clip-path:polygon(0 0,100% 0,100% 30%,96% 70%,90% 35%,84% 80%,77% 40%,70% 75%,62% 30%,55% 70%,47% 35%,40% 80%,33% 40%,26% 70%,18% 30%,11% 75%,5% 40%,0 70%)}

/* 下部セクション共通 */
.sec{position:relative;padding:120px 0}
.sec-ink{background:var(--ink)}.sec-cobalt{background:var(--cobalt)}
.wave{position:absolute;left:0;right:0;top:-46px;height:48px;background:inherit;clip-path:var(--cut)}
.wrap{width:min(1120px,calc(100% - var(--gutter) * 2));margin:0 auto}
.sec h2{font-size:clamp(30px,4.2vw,60px)}
.lead{font-size:17px}
.nw{display:inline-block;white-space:nowrap}

/* キャラクター（紙の輪の中で、本来の色） */
.buddy{position:relative;flex:none;display:inline-block;width:72px;height:72px;animation:float 4s ease-in-out infinite;pointer-events:none}
html.paused .buddy{animation-play-state:paused}
.buddy .ring{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.buddy img{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain}
.buddy.chibi{width:88px;height:88px}
@keyframes float{50%{transform:translateY(-4px) rotate(2deg)}}

/* フッター */
footer{position:relative;background:var(--ink);padding:56px 0 40px;font-size:14px}
.foot{display:grid;gap:10px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}.foot-links a{border-bottom:1px solid currentColor}
.copy{font-size:12px;color:var(--sky)}

/* モバイル */
@media (max-width:749px){
  header.site{padding:14px 16px;gap:8px}header.site nav{gap:8px;font-size:13px;white-space:nowrap}.nav-link{display:none}
  .logo{font-size:14px;letter-spacing:.04em}header .cta{padding:8px 12px}
  html:not(.past) header.site .logo,html:not(.past) header nav a:not(.cta){padding:3px 5px}
  .sec{padding:72px 0}
}
/* 幅374以下：ロゴと余白を詰めて「無料相談」を画面内に収める */
@media (max-width:374px){
  .logo{font-size:12px;letter-spacing:0}
  header.site{gap:6px}header.site nav{gap:6px;font-size:12px}header .cta{padding:7px 8px}
  html:not(.past) header.site .logo,html:not(.past) header nav a:not(.cta){padding:3px 4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* 生成：手切りの輪郭（tools で固定値として書き出し） */
.cut-a{--cut:polygon(-0.22% 0.94%,14.45% 1.35%,28.63% 0.18%,42.85% 0.39%,57.01% 1.10%,71.38% 0.08%,85.62% 0.87%,99.75% 0.04%,99.63% 14.38%,98.71% 28.71%,99.24% 42.78%,98.78% 56.91%,99.90% 71.36%,99.91% 85.74%,100.20% 98.44%,85.52% 99.29%,71.51% 99.59%,57.29% 99.06%,42.67% 98.64%,28.41% 98.68%,14.44% 98.71%,1.40% 100.12%,0.90% 85.91%,0.10% 71.58%,0.37% 57.35%,0.48% 42.93%,1.34% 28.66%,0.20% 14.21%)}
.cut-b{--cut:polygon(-0.18% 0.93%,14.33% 0.35%,28.81% 1.03%,42.84% 0.63%,57.27% 0.22%,71.20% 0.24%,85.78% 0.66%,99.97% 0.13%,98.90% 14.51%,99.22% 28.76%,99.86% 42.82%,98.89% 57.35%,98.67% 71.38%,99.32% 85.87%,100.24% 98.88%,85.71% 98.70%,71.42% 99.37%,56.91% 99.14%,42.74% 99.26%,28.57% 99.20%,14.50% 99.02%,0.50% 100.04%,0.16% 85.85%,0.90% 71.50%,0.53% 56.91%,0.40% 42.79%,1.27% 28.62%,0.88% 14.28%)}
.cut-c{--cut:polygon(-0.04% 1.45%,11.04% 0.83%,22.44% 1.42%,33.28% 0.58%,44.48% 1.18%,55.73% 0.72%,66.48% 1.27%,77.54% 1.33%,89.08% 0.98%,98.64% 0.16%,99.05% 11.24%,99.64% 21.98%,98.48% 33.16%,98.51% 44.38%,98.85% 55.38%,98.68% 66.77%,99.37% 77.59%,98.51% 88.91%,100.24% 99.57%,88.83% 99.31%,77.79% 98.59%,66.61% 99.64%,55.59% 99.91%,44.64% 99.03%,33.51% 99.44%,22.31% 99.97%,10.92% 99.35%,0.04% 100.19%,0.96% 88.66%,1.14% 77.79%,1.25% 66.79%,0.80% 55.61%,0.74% 44.59%,0.30% 33.10%,0.05% 22.12%,1.21% 10.97%)}
.cut-d{--cut:polygon(-0.09% 0.66%,12.66% 1.55%,24.97% 1.00%,37.36% 1.02%,50.10% 0.34%,62.34% 0.57%,74.77% 0.07%,87.30% 1.49%,99.17% -0.19%,99.08% 12.61%,99.82% 24.79%,99.92% 37.63%,99.35% 49.77%,99.95% 62.48%,99.75% 74.93%,99.89% 87.45%,100.20% 99.96%,87.60% 99.96%,74.85% 99.10%,62.41% 98.94%,50.03% 98.55%,37.60% 99.79%,24.86% 99.54%,12.49% 99.97%,0.24% 100.23%,0.83% 87.72%,0.57% 75.20%,0.11% 62.36%,0.11% 49.78%,1.19% 37.48%,0.37% 24.85%,0.50% 12.28%)}
.cut-e{--cut:polygon(-0.14% 0.08%,11.10% 1.35%,22.20% 0.90%,33.55% 1.15%,44.32% 1.03%,55.64% 0.18%,66.83% 1.46%,77.55% 1.27%,88.85% 1.45%,99.74% -0.17%,99.77% 11.33%,99.38% 22.22%,98.85% 33.31%,98.93% 44.34%,99.93% 55.75%,99.23% 66.85%,99.25% 77.82%,98.64% 88.81%,100.21% 99.22%,88.79% 99.66%,77.72% 99.62%,66.62% 99.97%,55.75% 99.03%,44.32% 98.98%,33.53% 99.32%,22.46% 99.74%,11.02% 98.84%,1.47% 99.88%,0.02% 88.72%,0.82% 77.64%,0.22% 66.87%,0.31% 55.66%,0.49% 44.52%,1.05% 33.10%,0.27% 22.02%,1.12% 11.24%)}
.cut-f{--cut:polygon(-0.06% 0.09%,14.16% 1.03%,28.63% 0.34%,42.67% 0.61%,57.20% 1.16%,71.25% 0.02%,85.91% 1.22%,98.65% -0.08%,98.55% 14.22%,98.81% 28.64%,99.05% 42.99%,99.93% 56.95%,99.47% 71.59%,99.04% 85.52%,100.01% 99.36%,85.77% 99.07%,71.61% 99.55%,57.15% 99.06%,42.82% 99.98%,28.79% 99.42%,14.18% 98.55%,0.38% 100.02%,1.10% 85.71%,0.37% 71.27%,0.35% 57.13%,1.00% 42.84%,1.49% 28.44%,0.85% 14.24%)}
.wave-0{--cut:polygon(0.00% 55.0%,0.00% 47.5%,1.98% 67.2%,4.69% 70.5%,7.45% 67.2%,9.95% 68.9%,12.30% 53.2%,15.10% 53.9%,16.66% 73.7%,18.21% 53.2%,20.96% 59.6%,22.40% 58.3%,23.97% 52.8%,26.30% 52.8%,27.76% 50.6%,29.98% 50.9%,31.42% 67.0%,33.70% 74.4%,35.49% 51.6%,37.71% 44.6%,39.42% 71.7%,40.99% 51.7%,43.48% 55.9%,45.48% 23.3%,47.90% 35.7%,50.53% 41.8%,52.95% 58.3%,55.63% 61.5%,57.44% 32.6%,59.89% 31.2%,62.19% 49.8%,64.40% 48.4%,65.94% 38.5%,68.29% 44.9%,70.22% 61.2%,71.85% 50.8%,74.38% 66.9%,75.95% 50.8%,77.87% 70.6%,79.75% 37.8%,81.99% 60.8%,84.68% 33.1%,87.39% 79.1%,88.83% 54.1%,90.64% 74.6%,92.12% 69.2%,94.89% 43.8%,96.72% 43.8%,98.72% 67.1%,100.00% 55.0%,100.00% 100.0%,0.00% 100.0%)}
.wave-1{--cut:polygon(0.00% 55.0%,0.00% 58.9%,1.64% 64.4%,3.95% 67.1%,6.28% 72.2%,7.68% 59.1%,8.99% 55.1%,11.76% 46.5%,14.30% 56.0%,15.61% 44.1%,18.37% 72.0%,19.84% 45.4%,22.47% 67.5%,23.84% 55.5%,25.32% 56.5%,26.84% 74.7%,28.99% 56.6%,31.77% 58.8%,33.95% 64.3%,36.29% 37.0%,38.79% 45.0%,40.13% 52.2%,42.72% 24.0%,44.83% 39.2%,47.34% 37.4%,49.81% 48.7%,51.24% 30.0%,53.22% 51.9%,55.91% 28.3%,58.03% 46.4%,60.80% 53.6%,62.55% 35.1%,63.95% 24.1%,65.37% 64.6%,67.87% 63.8%,69.92% 67.6%,71.43% 54.1%,73.13% 54.1%,75.18% 43.3%,77.01% 24.2%,79.77% 80.3%,81.28% 77.9%,83.15% 20.0%,84.92% 53.1%,87.29% 54.3%,89.28% 26.8%,91.90% 65.4%,94.12% 52.1%,96.88% 30.1%,98.57% 58.9%,99.98% 42.3%,100.00% 55.0%,100.00% 100.0%,0.00% 100.0%)}
.wave-2{--cut:polygon(0.00% 55.0%,0.00% 41.4%,2.58% 48.5%,4.53% 60.4%,5.83% 63.1%,7.51% 54.7%,8.82% 70.6%,10.52% 70.7%,12.71% 74.0%,14.83% 45.5%,17.21% 64.2%,18.77% 71.7%,20.10% 56.0%,21.69% 54.8%,23.72% 72.4%,25.71% 47.8%,28.37% 40.3%,29.80% 55.2%,31.66% 44.5%,33.72% 31.7%,35.35% 37.8%,37.99% 44.0%,40.34% 59.2%,42.84% 54.8%,44.99% 36.4%,47.50% 40.4%,49.61% 46.0%,51.59% 62.8%,53.43% 36.8%,54.95% 43.5%,56.58% 29.7%,58.72% 32.9%,60.77% 33.9%,63.37% 39.5%,64.82% 46.3%,67.05% 33.5%,69.06% 58.2%,70.99% 69.0%,73.19% 56.6%,74.84% 75.2%,77.12% 27.7%,79.29% 32.9%,81.38% 70.0%,83.56% 49.1%,85.93% 77.9%,88.45% 52.4%,90.48% 43.9%,91.93% 69.4%,94.36% 61.5%,97.14% 45.7%,99.93% 38.7%,100.00% 55.0%,100.00% 100.0%,0.00% 100.0%)}

/* ── サブページ（実績・Dev Log）用の共通部品 ── ここから下は新しい class だけ（トップには効かない）。<html lang="ja" class="sub"> で使う */
/* ヘッダー：最初から舞台を過ぎたあと（html.past）と同じ墨紺の帯。本文は帯の下から（帯の手切りの縁は冒頭の地に重なる） */
html.sub header.site{background:rgba(6,18,38,.94);padding-top:12px;padding-bottom:12px}
html.sub header.site::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:rgba(6,18,38,.94);clip-path:polygon(0 0,100% 0,100% 30%,96% 70%,90% 35%,84% 80%,77% 40%,70% 75%,62% 30%,55% 70%,47% 35%,40% 80%,33% 40%,26% 70%,18% 30%,11% 75%,5% 40%,0 70%)}
html.sub header.site .logo,html.sub header nav a:not(.cta){background:none;padding:0}
html.sub header.site :focus-visible{outline-color:var(--salmon);outline-offset:4px;box-shadow:none}
html.sub main{padding-top:70px} /* 帯の高さ（69.3px）ぶん。帯の下の手切りの縁が冒頭の地の上端を隠す */
header nav a[aria-current="page"]{color:var(--sky);border-bottom:2px solid currentColor;margin-bottom:-2px} /* 今いるページは色だけでなく下線でも示す（hover は色だけ）。下線の2pxは負の余白で打ち消し、ほかの項目と文字の高さをそろえる */

/* 地：群青と、明るい紙（生成り。文字は墨紺、補助の文字とリンクは群青か墨紺。明るいコバルトは生成りの上では読めないので使わない） */
.sec-ultra{background:var(--ultra)}
.sec-ivory{background:var(--ivory);color:var(--ink);color-scheme:light}
.sec-ivory .eyebrow{color:var(--ultra)}
.sec-ivory :focus-visible{outline-color:var(--ink)}
.sec-ivory .btn.ghost{color:var(--ink)}.sec-ivory .btn.ghost::before{box-shadow:inset 0 0 0 2px var(--ink)}

/* 冒頭：コバルトの地に eyebrow・h1（トップの節の h2 と同じ大きさ）・lead。右に泡の飾り（.deco） */
.page-hero{--bub:clamp(180px,22vw,300px);position:relative;isolation:isolate;overflow:hidden;padding:72px 0 88px;background:var(--cobalt);font-weight:500}
.page-hero:has(.deco){min-height:calc(var(--bub) + 120px)}
.page-hero .wrap>*{max-width:min(640px,58%)}
.page-hero .eyebrow{color:var(--ivory)}
.page-hero h1{font-size:clamp(30px,4.2vw,60px);margin-bottom:18px}
.page-hero :focus-visible{outline-color:var(--ivory)}
/* 飾り：<div class="deco" aria-hidden="true"> に泡の絵（img.bubble、1〜2枚。2枚目は小さく左下）と生成りの小さな泡（span.dots に i を5つ）。文字には重ねない */
.deco{position:absolute;z-index:-1;top:0;bottom:0;right:max(var(--gutter),calc(50% - 560px));width:calc(var(--bub) * 1.5);pointer-events:none}
.deco .bubble{position:absolute;right:0;top:calc(50% - var(--bub) / 2);width:var(--bub);height:auto}
.deco .bubble+.bubble{right:calc(var(--bub) * .8);top:calc(50% + var(--bub) * .04);width:calc(var(--bub) * .5)}
html.sub .buddy{animation:none} /* サブページの飾り（泡・紙の輪の2人）は動かさない（止める操作がない。依頼の「飾りは静的に」） */
.dots i{position:absolute;width:var(--d);height:var(--d);border:2px solid var(--ivory);border-radius:50%}
.dots i:nth-child(1){--d:14px;left:8%;top:22%}
.dots i:nth-child(2){--d:22px;left:22%;top:34%}
.dots i:nth-child(3){--d:10px;left:30%;top:16%}
.dots i:nth-child(4){--d:16px;left:4%;top:62%}
.dots i:nth-child(5){--d:8px;left:16%;top:78%}

/* 札（タグ・カテゴリ）：トップの資格の札と同じ手切り。面は疑似要素に描く（リンクにしてもフォーカスの枠が切れない） */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips>*{position:relative;z-index:0;padding:4px 12px;font-size:13px;color:var(--ivory)}
.chips>*::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--chip,var(--ultra));clip-path:polygon(0 6%,50% 0,100% 8%,98% 100%,46% 94%,2% 100%)}

/* 紙の面（一覧のカードなど）：既定は群青、.paper-ink は墨紺、.paper-ivory は生成り。縁はトップの札の手切り（cut-a〜f を足すとその縁）。面は疑似要素に描く */
.paper{--paper:var(--ultra);position:relative;z-index:0;display:block;padding:28px 30px 30px;color:var(--ivory)}
.paper::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);clip-path:var(--cut,polygon(0 1%,18% 0,40% 1.2%,63% .2%,86% 1%,100% 0,99.4% 30%,100% 62%,99.2% 100%,72% 99%,48% 100%,24% 99.2%,0 100%,.7% 66%,0 34%))}
.paper[class*="cut-"]{clip-path:none}
.paper-ink{--paper:var(--ink)}
.paper-ivory{--paper:var(--ivory);color:var(--ink)}
.paper .eyebrow{color:var(--sky)}.paper :focus-visible{outline-color:var(--salmon)}
.paper .chips,.sec-ultra .chips{--chip:var(--ink)}.paper-ink .chips,.paper-ivory .chips{--chip:var(--ultra)}
.paper-ivory .eyebrow{color:var(--ultra)}.paper-ivory :focus-visible{outline-color:var(--ink)}
a.paper{transition:transform .16s}a.paper:hover{transform:translateY(-2px)}

@media (max-width:749px){
  html.sub main{padding-top:66px}
  .page-hero{--bub:72px;padding:34px 0 56px}.page-hero:has(.deco){min-height:0}
  .page-hero .wrap>*{max-width:none}
  .deco{position:relative;top:auto;bottom:auto;right:auto;width:auto;height:84px;margin:0 var(--gutter) 10px}
}
@media (max-width:374px){
  html.sub main{padding-top:62px}
}