/* テーマの素の要素規則を .ckweb の中だけ打ち消す（revert＝UA既定へ） */
.ckweb h1,.ckweb h2,.ckweb h3,.ckweb h4,.ckweb h5,.ckweb h6,.ckweb p,.ckweb ul,.ckweb ol,.ckweb li,.ckweb ul li,.ckweb dl,.ckweb dt,.ckweb dd,.ckweb a,.ckweb em,.ckweb b,.ckweb strong,.ckweb small,.ckweb span,.ckweb img,.ckweb svg,.ckweb figure,.ckweb figcaption,.ckweb table,.ckweb thead,.ckweb tbody,.ckweb tr,.ckweb th,.ckweb td,.ckweb button,.ckweb input,.ckweb select,.ckweb textarea{margin:revert;padding:revert;border:revert;border-collapse:revert;border-spacing:revert;display:revert;width:revert;height:revert;max-width:revert;min-width:revert;vertical-align:revert;text-align:revert;text-decoration:revert;list-style:revert;font-size:revert;font-weight:revert;font-style:revert;line-height:revert;letter-spacing:revert;color:revert;background:revert;border-radius:revert;box-shadow:revert;transition:revert;float:revert;position:revert;justify-content:revert;align-items:revert;align-content:revert;flex-wrap:revert;flex-direction:revert;flex:revert;gap:revert;order:revert;grid-template-columns:revert;grid-template-rows:revert;white-space:revert;text-transform:revert;overflow:revert;opacity:revert;top:revert;right:revert;bottom:revert;left:revert}

/* ============================================================
   cantik /web/ 再設計デモ v5
   社長指示 2026-09-15（3回目）
     「参考サイトの要素はある？ アニメーション・フォント・図・グラフのクオリティを全部デザイン性あるように。
       見た人が問い合わせをしたくなる構成に。CTAも中間に入れて。マーケティングの要素も入れて。」
   v4は coomil の"数値"は採ったが"作法"（動き・書体・図の密度）が抜けていた。そこを入れ直した版。
   v3/v4 は _versions/ に凍結済み。いつでも戻せる。
   ============================================================ */
.ckweb{
  --c-cobalt:#0f4aa2; --c-ink:#1a2b4a; --c-navy:#0a2e5c; --c-slate:#39465c;
  --c-muted:#5b6b85; --c-red:#e0394f; --c-yellow:#ffd633; --c-yellow-d:#e8bd00;
  --c-surface:#ffffff; --c-ground:#ffffff; --c-cool:#eef4fc; --c-blue:#e8f0fc; --c-pale:#f7fafe;
  --c-border:#e3eaf5; --c-border-cool:#d9e0ec; --c-sky:#cfe0f7; --c-mid:#2f7fd1;
  --sec-pad:112px; --content-w:1120px;
  --fs-h1:4.8rem; --fs-h2:4.0rem; --fs-h3:2.0rem; --fs-body:1.4rem; --ls:.7px;
  --sh:0 1px 2px rgba(0,0,0,.05);
  --sh-img:0 1px 3px rgba(0,0,0,.08);
  --ease:cubic-bezier(.4,0,.2,1);
  --poster:url("https://cantik.co.jp/wp-content/themes/cantik/img/top/main-poster.webp");
}
.ckweb *{box-sizing:border-box}

.ckweb{margin:0;font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  font-size:var(--fs-body);font-weight:400;line-height:2;letter-spacing:var(--ls);
  color:var(--c-ink);background:var(--c-ground);-webkit-font-smoothing:antialiased;overflow-x:clip}
.ckweb img{max-width:100%;height:auto;display:block}
.ckweb a{color:inherit}
.ckweb a:focus-visible,.ckweb summary:focus-visible{outline:2px solid var(--c-cobalt);outline-offset:3px}
.ckweb .ckinr{width:var(--content-w);max-width:90%;margin:0 auto}
/* 数字だけ欧文のコンデンス体にする（coomilの作法）。和文はZen Kaku Gothic New。 */
.ckweb .num{font-family:"Oswald","Zen Kaku Gothic New",sans-serif;font-weight:600;
  letter-spacing:.01em;font-feature-settings:"tnum"}

.ckweb .demobar{position:sticky;top:0;z-index:60;background:var(--c-navy);color:#fff;
  font-size:1.4rem;font-weight:700;padding:9px 20px;text-align:center}

/* ---------- スクロール演出（IntersectionObserverで1回だけ） ---------- */
.ckweb .rv{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.ckweb .rv.on{opacity:1;transform:none}
.ckweb .rv-d1{transition-delay:.10s}.ckweb .rv-d2{transition-delay:.20s}.ckweb .rv-d3{transition-delay:.30s}
.ckweb .rv-d4{transition-delay:.40s}.ckweb .rv-d5{transition-delay:.50s}
.ckweb .rv-d6{transition-delay:.60s}.ckweb .rv-d7{transition-delay:.70s}
/* カード列は1枚ずつ遅らせる（まとめて出すと動きが安く見える） */
.ckweb .works .w:nth-child(2),.ckweb .clients .cg:nth-child(2),.ckweb .voice .v:nth-child(2){transition-delay:.10s}
.ckweb .works .w:nth-child(3),.ckweb .clients .cg:nth-child(3),.ckweb .voice .v:nth-child(3){transition-delay:.20s}
.ckweb .works .w:nth-child(4),.ckweb .clients .cg:nth-child(4){transition-delay:.30s}
.ckweb .works .w:nth-child(5),.ckweb .clients .cg:nth-child(5){transition-delay:.40s}
.ckweb .works .w:nth-child(6){transition-delay:.50s}
@media (prefers-reduced-motion:reduce){
  .ckweb .rv{opacity:1;transform:none;transition:none}
  .ckweb *{animation:none !important}

}



/* ---------- 下地（粒子＋面） ----------
   参考サイトの作法。ノイズは最背面に固定で敷く。地は純白にしない。 */
.ckweb::before{content:"";position:fixed;inset:0;z-index:-10;pointer-events:none;
  background:url("../assets/tex/grain.png") repeat;background-size:180px 180px;opacity:.5}
/* セクションの面：片側だけ丸めた半透明の白。左右交互に置く。 */
.ckweb .sec::before{content:"";position:absolute;top:0;bottom:0;width:calc(100% - 80px);
  background:rgba(255,255,255,.70);z-index:0;pointer-events:none}
.ckweb .sec:nth-of-type(odd)::before{right:0;border-radius:40px 0 0 40px}
.ckweb .sec:nth-of-type(even)::before{left:0;border-radius:0 40px 40px 0}
/* 地色を持つ帯は面を敷かない（二重になる） */
.ckweb .sec--cool::before,.ckweb .sec--pale::before{content:none}


/* ---------- 背景（白をベースに、セクションごとに色を分ける） ----------
   ①地は白 ②1つおきに薄い青を敷いて境目を作る ③濃い帯は波で入る
   ④粒子は白の上でも効く程度にごく薄く
   片側だけ丸めた半透明の面はやめた。「セクションごとに色を分ける」と両立しないため。 */
.ckweb .sec{background:var(--c-surface)}
.ckweb .sec--cool{background:var(--c-pale)}
.ckweb .sec--pale{background:var(--c-pale)}
.ckweb .sec::before{content:none}

/* 白と白が続く所は薄い罫で切る（色が同じでも面の変わり目が分かるように） */
.ckweb .sec + .sec:not(.sec--cool):not(.sec--pale){border-top:1px solid var(--c-border)}
.ckweb .sec--cool + .sec--cool{border-top:1px solid #dfe9f7}

/* 全セクションの地に、ロゴと同じ弧をゆっくり動かして差し込む
   （4つに1つだけだと図形が無い面ができる。社長指摘 2026-09-16） */
.ckweb .sec::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(42vw,580px);aspect-ratio:1/1;opacity:.10;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20600%20600%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%231c56a8%27/%3E%3Cstop%20offset%3D%27.45%27%20stop-color%3D%27%232f7fd1%27/%3E%3Cstop%20offset%3D%27.78%27%20stop-color%3D%27%239fcdf5%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ffd633%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%27300%27%20cy%3D%27300%27%20r%3D%27226%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%27108%27%20stroke-linecap%3D%27round%27%20stroke-dasharray%3D%271065%20355%27/%3E%3C/svg%3E");
  animation:secArc 26s var(--ease) infinite;will-change:transform}
.ckweb .sec--pale::after{opacity:.13}
.ckweb .sec:nth-of-type(4n+1)::after{left:-17%;bottom:-22%;animation-delay:-2s}
.ckweb .sec:nth-of-type(4n+2)::after{right:-15%;bottom:-20%;animation-delay:-8s}
.ckweb .sec:nth-of-type(4n+3)::after{right:-19%;top:-21%;width:min(34vw,470px);animation-delay:-14s}
.ckweb .sec:nth-of-type(4n)::after{left:-16%;top:-16%;animation-delay:-20s}
@keyframes secArc{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(26px,-22px,0) rotate(9deg)}}
.ckweb .sec:nth-of-type(even)::after{animation-name:secArcB}
@keyframes secArcB{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-24px,20px,0) rotate(-8deg)}}
.ckweb .sec>.ckinr{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.ckweb .sec::after{animation:none}}

/* 濃い帯の上端は素直に切る（波は「変な青」に見えるので使わない・社長指摘 2026-09-15） */
.ckweb .result,.ckweb .ckfc{padding-top:96px}
.ckweb .result::before,.ckweb .ckfc::before{content:none}



/* ---------- セクション共通 ---------- */
.ckweb .sec{padding:var(--sec-pad) 20px;position:relative;overflow:hidden}
.ckweb .sec--cool{background:var(--c-pale)}
.ckweb .sec--pale{background:var(--c-pale)}
.ckweb .sec--tight{--sec-pad:96px}
.ckweb .sec--wide{--sec-pad:128px}
/* セクションの隅に置く幾何形（coomilの作法・cantik色に置換） */
.ckweb .sec .gm{position:absolute;pointer-events:none;z-index:0}
.ckweb .sec > .ckinr{position:relative;z-index:1}
.ckweb .shead{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin:0 0 42px}
.ckweb .shead h2{font-size:var(--fs-h2);font-weight:700;line-height:1.5;margin:0;letter-spacing:.1em}
.ckweb .shead h2 .mk{background:linear-gradient(transparent 64%,var(--c-yellow) 64%);padding:0 .06em}
.ckweb .shead .lead{font-size:var(--fs-body);line-height:2.05;color:var(--c-slate);margin:0;padding-top:12px}
.ckweb .shead .no{font-size:1.4rem;margin:0 0 6px;display:flex;align-items:center;gap:10px;
  color:var(--c-cobalt);font-weight:700}
.ckweb .shead .no b{font-family:"Oswald",sans-serif;font-size:1.8rem;font-weight:600;line-height:1}
.ckweb .shead .no i{display:block;width:32px;height:3px;background:var(--c-yellow);border-radius:2px}
/* 巨大英字の見出し（参考2社に共通の型）。ラベルではなく見出しなので大きく置く。 */
.ckweb .shead .en{font-family:"Oswald",sans-serif;font-size:4.0rem;font-weight:700;line-height:1.25;color:var(--c-cobalt);
  color:var(--c-navy);margin:0 0 14px;letter-spacing:.01em}
.ckweb .sec--center .shead .no{justify-content:center}
.ckweb .sec--center .shead{grid-template-columns:1fr;text-align:center;gap:18px;justify-items:center}
.ckweb .sec--center .shead .lead{max-width:720px}

/* ---------- ボタン（共通） ---------- */
.ckweb .ckbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:62px;
  font-size:1.6rem;font-weight:700;letter-spacing:.1em;
  padding:0 22px;border-radius:999px;font-size:1.6rem;font-weight:700;text-decoration:none;
  line-height:1.35;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s}
.ckweb .ckbtn small{display:block;font-size:1.3rem;font-weight:500;opacity:.85;margin-top:2px}
.ckweb .ckbtn .arw{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.22);transition:transform .35s var(--ease)}
.ckweb .ckbtn:hover{transform:translateY(-3px)}
.ckweb .ckbtn:hover .arw{transform:translateX(3px)}
.ckweb .ckbtn--main{background:linear-gradient(180deg,#1257bb,#0f4aa2);color:#fff;
  box-shadow:0 10px 26px rgba(15,74,162,.32),inset 0 1px 0 rgba(255,255,255,.18)}
.ckweb .ckbtn--main:hover{box-shadow:0 16px 34px rgba(15,74,162,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.ckweb .ckbtn--sub{background:#fff;color:#c8324a;border:2px solid var(--c-red);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ckweb .ckbtn--sub .arw{background:rgba(224,57,79,.12)}
.ckweb .ckbtn--sub:hover{background:#fff5f6}
.ckweb .ckbtn--white{background:#fff;color:var(--c-cobalt);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ckweb .ckbtn--white .arw{background:rgba(15,74,162,.14)}
.ckweb .ckbtn--red{background:linear-gradient(180deg,#d92f45,#c01c35);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ckweb .ckbtn--yellow{background:var(--c-yellow);color:#1a2b4a;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ckweb .ckbtn--yellow .arw{background:rgba(26,43,74,.14)}
.ckweb .cta-lbl{font-size:1.4rem;font-weight:700;color:var(--c-muted);margin:0 0 8px}

/* ---------- 1｜ヒーロー ---------- */
.ckweb .hero .hmark{position:absolute;top:46%;left:50%;translate:-50% -50%;
  width:min(118vw,1560px);aspect-ratio:1200/780;z-index:0;pointer-events:none;opacity:.55}
.ckweb .hero .hmark svg{width:100%;height:100%;display:block;overflow:visible}
/* 止まって見えないこと。ゆっくりでも1周するものを入れる。 */
.ckweb .hero .hmark g{transform-box:fill-box;transform-origin:50% 50%}
.ckweb .ck-rot{animation:ckSpin 26s linear infinite}
.ckweb .ck-rot-r{animation:ckSpinR 18s linear infinite}
.ckweb .ck-arc{animation:ckArc 22s ease-in-out infinite}
.ckweb .ck-d1{animation:ckD1 9s ease-in-out infinite}
.ckweb .ck-d2{animation:ckD2 12s ease-in-out infinite}
.ckweb .ck-acc{transform-box:fill-box;transform-origin:100% 50%;animation:ckAcc 8s ease-in-out infinite}
@keyframes ckSpin {from{transform:rotate(0)}   to{transform:rotate(360deg)}}
@keyframes ckSpinR{from{transform:rotate(0)}   to{transform:rotate(-360deg)}}
@keyframes ckArc  {0%,100%{transform:rotate(148deg)}50%{transform:rotate(196deg)}}
@keyframes ckD1   {0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(58px,-46px) scale(1.22)}}
@keyframes ckD2   {0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-44px,52px) scale(.84)}}
@keyframes ckAcc  {0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(-48px) scale(1.1)}}
@media (prefers-reduced-motion:reduce){
  .ckweb .hero .hmark g,.ckweb .ck-acc{animation:none}
}

.ckweb .hero{padding:104px 20px 0;position:relative;overflow:hidden;background:var(--c-surface)}
.ckweb .hero .in{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center;
  width:var(--content-w);max-width:90%;margin:0 auto;position:relative;z-index:1}
/* 文字の列には白い面を敷く。背後のマークを濃くしても読めるようにする。 */
.ckweb .hero .hcol{position:relative}
.ckweb .hero .hcol::before{content:"";position:absolute;inset:-40px -56px -40px -56px;z-index:-1;
  background:rgba(255,255,255,.90);border-radius:8px}
/* ラベルは色つきの文字ではなく、短い罫で始める（文字を飾らない） */
.ckweb .hero .kicker{display:flex;align-items:center;gap:14px;font-size:1.4rem;font-weight:700;
  color:var(--c-muted);margin:0 0 26px;letter-spacing:.06em}
.ckweb .hero .kicker i{width:38px;height:2px;background:var(--c-cobalt);flex:0 0 auto}
.ckweb .hero h1{font-size:var(--fs-h1);font-weight:700;line-height:1.5;margin:0 0 30px;letter-spacing:.08em}
.ckweb .hero h1 em{font-style:normal;color:var(--c-cobalt);position:relative;display:inline-block}
/* 下線は黄の帯ではなく、文字と同じ幅の太い罫。塗りを被せない。 */
.ckweb .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.12em;
  background:var(--c-yellow);z-index:-1}
.ckweb .hero p.l{font-size:1.6rem;line-height:2.0;color:var(--c-slate);margin:0 0 30px;max-width:36em}
/* 条件は「／」で並べず、項目と値に分ける（読む順が決まる） */
.ckweb .hero .spec{display:flex;gap:0;margin:0 0 34px;border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border)}
.ckweb .hero .spec > div{padding:16px 26px 16px 0;margin-right:26px;border-right:1px solid var(--c-border)}
.ckweb .hero .spec > div:last-child{border-right:0;margin-right:0;padding-right:0}
.ckweb .hero .spec dt{font-size:1.25rem;font-weight:700;color:var(--c-slate);letter-spacing:.06em;margin:0 0 4px}
.ckweb .hero .spec dd{margin:0;font-size:1.4rem;font-weight:700;color:var(--c-ink);line-height:1}
.ckweb .hero .spec dd b{font-family:"Oswald",sans-serif;font-size:2.6rem;font-weight:600;
  color:var(--c-cobalt);letter-spacing:.01em;margin-right:.08em}
.ckweb .hero .cta{display:flex;gap:16px;flex-wrap:wrap}
.ckweb .hero .cta .ckbtn{white-space:nowrap;padding-left:30px;padding-right:26px}
.ckweb .hero .shots{position:relative}
.ckweb .hero .strip{width:var(--content-w);max-width:90%;margin:64px auto 0;padding:22px 0 0;
  border-top:1px solid var(--c-border);font-size:1.4rem;color:var(--c-muted);position:relative;z-index:1}

/* ---------- 2｜ロゴ帯（白いタイルを2段・逆方向に流す） ---------- */
.ckweb .logos{background:var(--c-surface);padding:34px 0 58px;overflow:hidden;position:relative;z-index:1}
.ckweb .logos{position:relative;overflow:hidden}
.ckweb .logos::after{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(30vw,420px);aspect-ratio:1/1;opacity:.09;right:-11%;top:-42%;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20600%20600%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%231c56a8%27/%3E%3Cstop%20offset%3D%27.45%27%20stop-color%3D%27%232f7fd1%27/%3E%3Cstop%20offset%3D%27.78%27%20stop-color%3D%27%239fcdf5%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ffd633%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%27300%27%20cy%3D%27300%27%20r%3D%27226%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%27108%27%20stroke-linecap%3D%27round%27%20stroke-dasharray%3D%271065%20355%27/%3E%3C/svg%3E");
  animation:secArcB 30s var(--ease) infinite}
.ckweb .logos .ckinr{position:relative;z-index:1}

.ckweb .logos p{text-align:center;font-size:1.3rem;color:var(--c-muted);margin:0 0 22px;letter-spacing:.04em}
.ckweb .lrow{overflow:hidden;padding:5px 0}
.ckweb .ltrack{display:flex;width:max-content;gap:14px;padding-left:14px}
.ckweb .lrow--ltr .ltrack{animation:lg-ltr 46s linear infinite}
.ckweb .lrow--rtl .ltrack{animation:lg-rtl 46s linear infinite}
.ckweb .lt{flex:0 0 auto;display:grid;place-items:center;width:168px;height:74px;background:#fff;
  border:1px solid var(--c-border);border-radius:6px}
.ckweb .lt img{height:36px;width:auto;opacity:1;filter:none}
@keyframes lg-ltr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lg-rtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.ckweb .lrow--ltr .ltrack,.ckweb .lrow--rtl .ltrack{animation:none}}



/* ---------- 数字4つの帯（FV直下） ----------
   参考サイトの実測: 項目ごとに淡い面（#f1f8fd）／角丸16px／gap32px／影と罫は無し。 */
.ckweb .achv{position:relative;z-index:1;padding:72px 20px 76px;background:var(--c-surface)}
.ckweb .achv__list{list-style:none;margin:0 auto;padding:0;width:var(--content-w);max-width:90%;
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.ckweb .achv__list li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(160deg,#e6f1fe 0%,#f4f9ff 100%);border-radius:16px;padding:26px 16px 30px;
  border:1px solid #d9e8fb}
.ckweb .achv__k{font-size:1.35rem;font-weight:700;color:var(--c-slate);letter-spacing:.04em;text-align:center}
.ckweb .achv__n{display:flex;align-items:baseline;color:var(--c-navy);line-height:1}
.ckweb .achv__n b{font-family:"Oswald",sans-serif;font-size:5.4rem;font-weight:600;letter-spacing:.005em;
  font-feature-settings:"tnum"}
.ckweb .achv__n small{font-size:1.7rem;font-weight:700;color:var(--c-ink);margin-left:.14em}
.ckweb .achv__src{width:var(--content-w);max-width:90%;margin:18px auto 0;
  font-size:1.2rem;color:var(--c-slate);text-align:right}

/* ---------- お知らせ ---------- */
.ckweb .news{--sec-pad:56px}
.ckweb .nw{display:grid;grid-template-columns:200px 1fr;gap:0 48px;align-items:start}
.ckweb .nw__h .en{font-family:"Oswald",sans-serif;font-size:1.6rem;font-weight:600;letter-spacing:.14em;
  color:var(--c-cobalt);margin:0 0 6px}
.ckweb .nw__h h2{font-size:1.8rem;font-weight:800;margin:0 0 16px}
.ckweb .nw__more{font-size:1.3rem;font-weight:700;color:var(--c-cobalt);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px}
.ckweb .nw__more::after{content:"";width:7px;height:7px;border-top:1.8px solid currentColor;
  border-right:1.8px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
.ckweb .nw__more:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.ckweb .nw__more:hover{text-decoration:underline}
.ckweb .nw__list{list-style:none;margin:0;padding:0}
.ckweb .nw__list li{border-top:1px solid var(--c-border)}
.ckweb .nw__list li:last-child{border-bottom:1px solid var(--c-border)}
.ckweb .nw__list a{display:grid;grid-template-columns:96px 1fr 18px;gap:18px;align-items:baseline;
  padding:16px 2px;text-decoration:none}
.ckweb .nw__list time{font-family:"Oswald",sans-serif;font-size:1.4rem;font-weight:500;color:var(--c-muted)}
.ckweb .nw__t{font-size:1.4rem;line-height:1.9}
.ckweb .nw__list a:hover .nw__t{color:var(--c-cobalt)}
.ckweb .nw__arw{width:8px;height:8px;border-top:1.6px solid var(--c-sky);border-right:1.6px solid var(--c-sky);
  transform:rotate(45deg);align-self:center;transition:transform .25s var(--ease)}
.ckweb .nw__list a:hover .nw__arw{transform:rotate(45deg) translate(2px,-2px)}

/* ---------- コラム ---------- */
.ckweb .column .cl__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 28px}
.ckweb .column .cl{background:#fff;border:1px solid var(--c-border);border-radius:6px}
.ckweb .column .cl a{display:block;padding:26px 26px 30px;text-decoration:none;height:100%}
.ckweb .column .cl__meta{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.ckweb .column .cl__cat{font-family:"Oswald",sans-serif;font-size:1.2rem;font-weight:600;letter-spacing:.1em;
  color:#fff;background:var(--c-cobalt);padding:3px 10px}
.ckweb .column .cl__meta time{font-family:"Oswald",sans-serif;font-size:1.3rem;color:var(--c-muted)}
.ckweb .column .cl h3{font-size:1.6rem;font-weight:700;line-height:1.75;margin:0}
.ckweb .column .cl a:hover h3{color:var(--c-cobalt)}


/* ---------- 悩み → cantikならこうする ---------- */
.ckweb .pain{background:var(--c-pale)}
.ckweb .pain .pains{display:grid;gap:18px}
.ckweb .pain .pr{display:grid;grid-template-columns:1.05fr 56px 1.2fr;align-items:center;gap:0;
  background:#fff;border-radius:6px;overflow:hidden;border:1px solid var(--c-border);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ckweb .pain .pr-l{padding:26px 30px 28px;position:relative;display:flex;flex-direction:column}
.ckweb .pain .pr .q{font-family:"Oswald",sans-serif;font-size:3.4rem;font-weight:600;color:#5a90d4;
  line-height:.8;display:block;margin:0}
/* 以前のHPのイラスト（title_*.svg）と同じ作法：線#333 2px ＋ 水色ベタ#00a0df */
.ckweb .pain .ill{width:100%;max-width:400px;height:auto;display:block;margin:10px auto 24px}
.ckweb .pain .pr h3{font-size:2.0rem;font-weight:800;line-height:1.45;margin:0 0 12px}
.ckweb .pain .pr .why{font-size:1.4rem;color:var(--c-slate);line-height:1.95;margin:auto 0 0}
.ckweb .pain .pr .why b{display:block;font-size:1.3rem;color:var(--c-muted);font-weight:700;margin:0 0 4px}
.ckweb .pain .pr-arw{display:grid;place-items:center;align-self:stretch;background:#fff}
.ckweb .pain .pr-r{padding:28px 32px;background:#fff;align-self:stretch;border-left:1px solid var(--c-border);
  display:flex;flex-direction:column;justify-content:center}
.ckweb .pain .pr-r .do{margin:0 0 14px}
.ckweb .pain .pr-r .do b{font-size:1.4rem;font-weight:800;color:var(--c-cobalt);
  padding-bottom:6px;border-bottom:3px solid var(--c-yellow)}
.ckweb .pain .pr-r ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.ckweb .pain .pr-r li{font-size:1.5rem;line-height:1.85;color:var(--c-ink);padding-left:26px;position:relative}
.ckweb .pain .pr-r li::before{content:"";position:absolute;left:2px;top:.5em;width:13px;height:8px;
  border-left:2.6px solid var(--c-cobalt);border-bottom:2.6px solid var(--c-cobalt);transform:rotate(-45deg)}
.ckweb .pain .pr-r li b{font-weight:800;color:var(--c-cobalt)}
.ckweb .pain .pr-r .kpi{margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--c-border-cool);
  font-size:1.4rem;color:var(--c-slate)}
.ckweb .pain .pr-r .kpi span{display:inline-block;font-size:1.3rem;font-weight:700;color:var(--c-muted);margin-right:10px}
.ckweb .pain .pain-close{display:flex;align-items:center;justify-content:center;gap:24px;margin:44px 0 0}
.ckweb .pain .pain-close img{width:150px;height:auto}
.ckweb .pain .pain-close p{font-size:3.0rem;font-weight:700;color:var(--c-cobalt);margin:0;line-height:1.6}
.ckweb .pain .pain-close small{display:block;font-size:1.6rem;font-weight:500;color:var(--c-slate);margin-top:6px}
.ckweb .pain .pain-close .mk{background:linear-gradient(transparent 66%,var(--c-yellow) 66%);padding:0 .1em}


/* ---------- 選ばれる理由 ---------- */
/* ---------- REASON（左が貼り付いて、右が流れる） ---------- */
.ckweb .reason .rsplit{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:60px;
  align-items:start}
.ckweb .reason .rsticky{position:sticky;top:96px}
.ckweb .reason .rsticky h2{font-size:3.2rem;font-weight:700;line-height:1.55;margin:0 0 26px;
  letter-spacing:.08em}
.ckweb .reason .rsticky h2 .mk{background:linear-gradient(transparent 64%,var(--c-yellow) 64%);padding:0 .06em}
.ckweb .reason .rlead{font-size:1.4rem;line-height:2;color:var(--c-slate);margin:0 0 30px}
.ckweb .reason .rcount{margin:0;font-size:1.4rem;font-weight:700;color:var(--c-muted);
  display:flex;align-items:baseline;gap:8px}
.ckweb .reason .rcount b{font-family:"Oswald",sans-serif;font-size:3.4rem;font-weight:600;color:var(--c-cobalt)}
.ckweb .reason .rflow{display:grid;gap:22px}
.ckweb .reason .ritem{background:#fff;border:1px solid var(--c-border);border-radius:6px;
  padding:34px 36px;position:relative;
  display:grid;grid-template-columns:104px 1fr;gap:6px 28px;align-items:start}
.ckweb .reason .ritem__no{grid-column:1 / -1;font-family:"Oswald",sans-serif;font-size:1.3rem;font-weight:600;
  color:var(--c-sky);letter-spacing:.14em;margin:0 0 6px}
.ckweb .reason .ritem__fig{grid-column:1;grid-row:2 / span 3}
.ckweb .reason .ritem__fig svg{width:104px;height:auto;display:block}
.ckweb .reason .ritem__k{grid-column:2;font-size:1.3rem;font-weight:800;color:var(--c-cobalt);
  margin:0 0 6px;letter-spacing:.04em}
.ckweb .reason .ritem h3{grid-column:2;font-size:2.0rem;font-weight:800;line-height:1.5;margin:0 0 10px}
.ckweb .reason .ritem__t{grid-column:2;font-size:1.4rem;color:var(--c-slate);line-height:1.95;margin:0}



/* ---------- 実数バンド ---------- */
.ckweb .result{background-color:var(--c-navy);
  background-image:linear-gradient(135deg,rgba(10,46,92,.93) 0%,rgba(15,74,162,.86) 55%,rgba(10,46,92,.93) 100%),var(--poster);
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
  color:#fff;padding:96px 20px;position:relative;overflow:hidden}
.ckweb .result h2{text-align:center;font-size:3.2rem;font-weight:700;margin:0 0 56px;line-height:1.5}
.ckweb .result h2{display:flex;align-items:center;justify-content:center;gap:.34em;flex-wrap:wrap}
.ckweb .result h2 .h2logo{width:auto;height:.8em;flex:0 0 auto}
.ckweb .result .nums{display:grid;grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto;
  align-items:stretch}
.ckweb .result .n{padding:0 30px;position:relative;text-align:center;
  display:grid;grid-template-rows:auto 1fr auto;gap:18px;align-content:start}
.ckweb .result .n + .n::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.2)}
.ckweb .result .k{font-size:1.4rem;font-weight:700;color:#cfe0f7;letter-spacing:.04em}
.ckweb .result .fig{color:var(--c-yellow);align-self:center}
.ckweb .result .fig .pre{color:#dbe6f7}
.ckweb .result .fig .u{color:#fff}
.ckweb .result .lbl{font-size:1.4rem;font-weight:500;color:#eaf1fb;line-height:1.85}
.ckweb .result .note{font-size:1.4rem;color:#c9dcf5;line-height:1.8;margin:52px auto 0;max-width:880px;text-align:center}

/* ---------- 経路図 ---------- */
.ckweb .routes .figbox{max-width:980px;margin:0 auto}
.ckweb .routes .fig-sp{display:none}
.ckweb .routes svg{width:100%;height:auto;display:block}
.ckweb .routes .ckcap{font-size:1.6rem;color:var(--c-slate);line-height:2.05;margin:38px auto 0;max-width:780px;text-align:center}
/* 経路の線を描く演出 */
.ckweb .routes .flow-line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.1s var(--ease)}
.ckweb .routes .on .flow-line{stroke-dashoffset:0}

/* ---------- やり方 ---------- */
.ckweb .way .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.ckweb .way .c{position:relative;padding-top:30px}
.ckweb .way .c::before{content:"";position:absolute;left:0;top:0;width:56px;height:4px;background:var(--c-cobalt);border-radius:2px}
.ckweb .way .c:nth-child(2)::before{background:var(--c-mid)}
.ckweb .way .c:nth-child(3)::before{background:var(--c-yellow)}
.ckweb .way .c h3{font-size:2.3rem;font-weight:700;line-height:1.5;margin:0 0 14px}
.ckweb .way .c p{font-size:1.4rem;line-height:2;color:var(--c-slate);margin:0}

/* ---------- 中間CTA（帯） ---------- */
.ckweb .faq-more[hidden]{display:none}
.ckweb .faq-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:360px;
  margin:26px auto 0;min-height:56px;padding:0 24px;border:1px solid var(--c-border-cool);
  background:var(--c-surface);color:var(--c-cobalt);font-size:1.5rem;font-weight:700;letter-spacing:.06em;
  cursor:pointer;border-radius:999px;transition:background-color .2s var(--ease)}
.ckweb .faq-btn:hover{background:var(--c-pale)}
.ckweb .faq-btn::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
.ckweb .faq-btn[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
.ckweb .midcta .ckbtn{min-height:70px;padding-top:12px;padding-bottom:12px;line-height:1.3}
.ckweb .midcta .ckbtn>span{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.ckweb .midcta .ckbtn small{font-size:1.15rem;font-weight:500;letter-spacing:.02em;opacity:.85;margin-top:3px}
.ckweb .midcta{background:var(--c-cobalt);color:#fff;padding:62px 20px;text-align:center;position:relative;overflow:hidden}
/* 濃紺の面は「数字で見るcantik」と同じ作り（FV映像のポスターを濃紺グラデ越しに敷く） */
.ckweb .midcta.alt{background-color:var(--c-navy);
  background-image:linear-gradient(135deg,rgba(10,46,92,.93) 0%,rgba(15,74,162,.86) 55%,rgba(10,46,92,.93) 100%),var(--poster);
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat}
.ckweb .midcta.alt::before{content:none}
.ckweb .midcta.alt{padding-top:72px}
.ckweb .midcta .gm{position:absolute;pointer-events:none}
.ckweb .midcta .in{position:relative;z-index:1;max-width:1080px;margin:0 auto}
/* 濃紺の面のCTAは白ボタンにする。青地に青いボタンは沈んで押しにくい。 */
.ckweb .midcta.alt .ckbtn--main,.ckweb .midcta.alt .ckbtn--main:hover{
  background:#fff;background-image:none;color:var(--c-cobalt);
  box-shadow:0 10px 26px rgba(0,0,0,.26)}
.ckweb .midcta.alt .ckbtn--main .arw{background:rgba(15,74,162,.12)}
.ckweb .midcta.alt .ckbtn--main small{color:var(--c-slate);opacity:1}
.ckweb .midcta.alt .ckbtn--sub{background:#fff;color:#c8324a;border-color:#fff}
.ckweb .midcta.alt .ckbtn--sub small{color:#c8324a;opacity:.85}
.ckweb .midcta h2{font-size:var(--fs-h2);font-weight:700;margin:0 0 20px;line-height:1.5;letter-spacing:.1em}
.ckweb .midcta h2 .mk{color:var(--c-yellow);letter-spacing:.1em;
  background:linear-gradient(transparent 92%,rgba(255,214,51,.5) 92%);padding:0 .04em}
.ckweb .midcta p{font-size:1.6rem;color:#dbe6f7;margin:0 0 30px;line-height:2}
.ckweb .midcta--light{background:var(--c-surface);color:var(--c-ink)}
.ckweb .midcta--light h2{color:var(--c-ink)}
.ckweb .midcta--light h2 .mk{color:var(--c-ink);letter-spacing:.1em;
  background:linear-gradient(transparent 64%,var(--c-yellow) 64%);padding:0 .06em}
.ckweb .midcta--light p{color:var(--c-slate)}
.ckweb .midcta .btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ---------- グラフ ---------- */
.ckweb .chart{display:grid;grid-template-columns:1.18fr .82fr;gap:56px;align-items:start}
.ckweb .chart h3{font-size:1.9rem;font-weight:700;margin:0 0 26px;padding-bottom:12px;
  border-bottom:2px solid var(--c-border-cool);display:flex;align-items:baseline;gap:12px}
.ckweb .chart h3 small{font-size:1.3rem;font-weight:700;color:var(--c-muted)}
.ckweb .bars{display:grid;gap:14px;position:relative}
/* 目盛線（0/3/6/9/12） */
.ckweb .bars::before{content:"";position:absolute;left:170px;right:46px;top:-6px;bottom:-6px;
  background-image:linear-gradient(90deg,var(--c-border) 0 1px,transparent 1px);
  background-size:25% 100%;background-repeat:repeat-x;
  box-shadow:inset -1px 0 0 var(--c-border)}
.ckweb .bar{display:grid;grid-template-columns:158px 1fr 34px;align-items:center;gap:12px;
  font-size:1.4rem;position:relative;z-index:1}
.ckweb .bar .t{font-weight:700;line-height:1.45;white-space:nowrap}
.ckweb .bar .g{height:14px;position:relative}
.ckweb .bar .g i{display:block;height:100%;width:0;background:var(--c-cobalt);border-radius:1px;
  transition:width 1.1s var(--ease)}
.ckweb .bar .g i.y{background:var(--c-yellow-d)}
.ckweb .on .bar .g i{width:var(--w)}
.ckweb .bar .v{font-size:1.8rem;color:var(--c-cobalt);text-align:right;line-height:1}
.ckweb .axis{display:grid;grid-template-columns:158px 1fr 34px;gap:12px;margin-top:14px;
  font-size:1.2rem;color:var(--c-muted)}
.ckweb .axis .ax{grid-column:2;display:flex;justify-content:space-between;
  font-family:"Oswald",sans-serif;letter-spacing:.02em}
.ckweb .axis .ax span{transform:translateX(-50%)}
.ckweb .axis .ax span:first-child{transform:none}
.ckweb .axis .ax span:last-child{transform:translateX(50%)}
.ckweb .donut{display:grid;gap:22px;justify-items:center}
.ckweb .donut svg{width:100%;max-width:200px;height:auto}
.ckweb .donut circle.seg{stroke-dasharray:0 100;transition:stroke-dasharray 1.2s var(--ease)}
.ckweb .on .donut circle.seg{stroke-dasharray:var(--d)}
.ckweb .donut .lg{list-style:none;margin:0;padding:0;width:100%;max-width:320px;display:grid;gap:0}
.ckweb .donut .lg li{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;
  font-size:1.4rem;padding:9px 2px;border-bottom:1px solid var(--c-border)}
.ckweb .donut .lg li:last-child{border-bottom:0}
.ckweb .donut .lg i{width:12px;height:12px;border-radius:2px;display:block}
.ckweb .donut .lg b{font-size:1.7rem;color:var(--c-cobalt)}
.ckweb .ch-more{font-size:1.4rem;color:var(--c-slate);line-height:1.95;margin:26px 0 0;
  padding-top:18px;border-top:1px solid var(--c-border)}
.ckweb .ch-more b{color:var(--c-cobalt);font-weight:700}
.ckweb .src{font-size:1.4rem;color:var(--c-muted);margin:42px 0 0;line-height:1.95;padding-top:20px;border-top:1px solid var(--c-border)}

/* ---------- お客様の声 ---------- */
.ckweb .voice .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ckweb .voice .v{background:#fff;padding:36px 30px;border-radius:6px;border:1px solid var(--c-border);box-shadow:0 1px 2px rgba(0,0,0,.05);
  display:flex;flex-direction:column}
.ckweb .voice .v .q{font-family:"Oswald",sans-serif;font-size:4.6rem;color:#5a90d4;line-height:.7;
  margin:0 0 14px;flex:0 0 auto}
.ckweb .voice .v p{font-size:1.4rem;line-height:2;color:var(--c-ink);margin:0 0 22px;flex:1}
.ckweb .voice .v .who{font-size:1.4rem;color:var(--c-muted);line-height:1.7;padding-top:16px;border-top:1px solid var(--c-border)}
.ckweb .voice .v .hl{font-size:1.6rem;font-weight:800;line-height:1.7;color:var(--c-cobalt);
  margin:0 0 16px;flex:0 0 auto}
.ckweb .voice .vnote{font-size:1.4rem;color:var(--c-muted);line-height:2;margin:30px 0 0;text-align:center}
.ckweb .voice .v .who b{display:block;color:var(--c-ink);font-size:1.5rem;font-weight:700}

/* ---------- 比較 ---------- */
/* 「目的 → 作る型 → 見る数字」の3列を、役割ごとに読み分けられるようにする */
.ckweb .tt{width:100%;border-collapse:separate;border-spacing:0}
.ckweb .tt thead th{font-size:1.3rem;font-weight:700;letter-spacing:.1em;color:var(--c-muted);
  padding:0 16px 12px;text-align:left;border-bottom:2px solid var(--c-border-cool)}
.ckweb .tt thead th.c1{width:38%}
.ckweb .tt thead th.c2{color:var(--c-cobalt);width:26%}
.ckweb .tt thead th.c3{width:36%}
.ckweb .tt td{padding:18px 16px;border-bottom:1px solid var(--c-border);vertical-align:middle;line-height:1.8}
.ckweb .tt td.g{font-size:1.5rem;color:var(--c-ink);width:38%}
.ckweb .tt td.t{font-size:1.6rem;font-weight:700;color:var(--c-cobalt);width:26%;background:#f7fafe}
.ckweb .tt td.k{font-size:1.35rem;color:var(--c-slate);width:36%}
.ckweb .tt tbody tr:hover td{background:#f2f7fe}
.ckweb .tt tbody tr:hover td.t{background:#e8f0fc}
.ckweb .cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:1.6rem}
.ckweb .cmp th,.ckweb .cmp td{padding:22px 18px;border-bottom:1px solid var(--c-border);text-align:left;line-height:1.75;vertical-align:top}
.ckweb .cmp thead th{font-size:1.4rem;font-weight:700;color:var(--c-muted);border-bottom:2px solid var(--c-border-cool)}
.ckweb .cmp thead th.me{color:#fff;background:linear-gradient(180deg,#1257bb,#0f4aa2);border-radius:8px 8px 0 0;
  font-size:2.0rem;font-weight:700;text-align:center;letter-spacing:.06em;padding-top:18px;padding-bottom:18px;
  box-shadow:0 -6px 18px rgba(15,74,162,.22)}
.ckweb .cmp tbody th{font-weight:700;width:24%;font-size:1.5rem}
.ckweb .cmp td.me{background:#f2f7fe;font-weight:700;color:var(--c-cobalt);width:28%;font-size:1.65rem;
  box-shadow:1px 0 0 var(--c-cobalt),-1px 0 0 var(--c-cobalt)}
.ckweb .cmp tbody tr:last-child td.me{border-radius:0 0 8px 8px;box-shadow:1px 0 0 var(--c-cobalt),-1px 0 0 var(--c-cobalt),0 1px 0 var(--c-cobalt)}
.ckweb .cmp .n{color:var(--c-slate);font-weight:500}
.ckweb .cmp-note{font-size:1.4rem;color:var(--c-muted);line-height:1.95;margin:28px 0 0}

/* ---------- 含まれるもの ---------- */
.ckweb .scope{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px}
.ckweb .scope section{border-top:3px solid var(--c-cobalt);padding:24px 0 30px}
.ckweb .scope section:nth-child(2){border-color:var(--c-mid)}
.ckweb .scope section:nth-child(3){border-color:var(--c-sky)}
.ckweb .scope section:nth-child(4){border-color:var(--c-yellow)}
.ckweb .scope h3{font-size:2.0rem;font-weight:700;margin:0 0 16px}
.ckweb .scope ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.ckweb .scope li{font-size:1.4rem;color:var(--c-slate);line-height:1.85;padding-left:24px;position:relative}
.ckweb .scope li::before{content:"";position:absolute;left:2px;top:.62em;width:11px;height:2px;background:var(--c-cobalt)}
.ckweb .scope li b{color:var(--c-ink);font-weight:700}

/* ---------- 型／料金／実績／流れ ---------- */
.ckweb .types table{width:100%;border-collapse:collapse;font-size:1.6rem}
.ckweb .types thead th{font-size:1.4rem;font-weight:700;color:var(--c-cobalt);text-align:left;
  padding:0 16px 14px;border-bottom:2px solid var(--c-border-cool);white-space:nowrap}
.ckweb .types td{padding:22px 16px;border-bottom:1px solid var(--c-border);vertical-align:top;line-height:1.75}
.ckweb .types td.g{width:36%;font-weight:700}
.ckweb .types td.t{width:26%;font-weight:700;color:var(--c-cobalt);white-space:nowrap}
.ckweb .types td.k{color:var(--c-slate)}
.ckweb .types tbody tr:last-child td{border-bottom:0}
.ckweb .price .row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:4px;align-items:stretch}
.ckweb .price .item{padding:0 30px;position:relative;display:flex;flex-direction:column;justify-content:flex-start}
.ckweb .price .item + .item::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--c-border-cool)}
.ckweb .price .item:first-child{padding-left:2px}
.ckweb .price .k{font-size:1.4rem;font-weight:700;color:var(--c-muted);margin:0;min-height:2.2em}
.ckweb .price .v{font-size:7.0rem;color:var(--c-cobalt);margin:auto 0 0;height:72px;
  display:flex;align-items:flex-end}
.ckweb .price .v.jp{font-family:"Zen Kaku Gothic New",sans-serif;font-size:2.2rem;font-weight:700;
  color:var(--c-ink);align-items:baseline;gap:.2em;line-height:1;padding-bottom:9px}
.ckweb .price .v.jp b{font-size:3.2rem;font-weight:700;color:var(--c-cobalt)}
.ckweb .price .note{font-size:1.4rem;color:var(--c-muted);margin:46px 0 0;line-height:2}
.ckweb .price .plans{width:100%;border-collapse:collapse;font-size:1.6rem;margin:46px 0 0}
.ckweb .price .plans th,.ckweb .price .plans td{padding:18px 16px;border-bottom:1px solid var(--c-border);text-align:left}
.ckweb .price .plans thead th{font-size:1.4rem;color:var(--c-muted);font-weight:700;border-bottom:2px solid var(--c-border-cool)}
.ckweb .price .plans td.p{font-weight:700;color:var(--c-cobalt);white-space:nowrap}
.ckweb .works .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.ckweb .works figure{margin:0}
.ckweb .works img{border-radius:6px;box-shadow:var(--sh-img);width:100%}
.ckweb .works figcaption{font-size:1.5rem;font-weight:700;margin-top:18px;line-height:1.7}
.ckweb .works figcaption span{display:block;font-size:1.4rem;font-weight:500;color:var(--c-muted);margin-top:4px}
.ckweb .cycle{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ckweb .cycle svg{width:100%;height:auto}
/* 矢印は見えたときに引く。線の長さで段階を感じさせる（点滅や拡大に頼らない）。 */
/* 節は見えたときに1つずつ立ち上がる */
.ckweb .cycle .cy-n{opacity:0;transform:scale(.88);transform-box:fill-box;transform-origin:50% 50%;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ckweb .cycle.on .cy-n{opacity:1;transform:none}
.ckweb .cycle.on .cy-n:nth-of-type(2){transition-delay:.14s}
.ckweb .cycle.on .cy-n:nth-of-type(3){transition-delay:.28s}
.ckweb .cycle.on .cy-n:nth-of-type(4){transition-delay:.42s}
.ckweb .cycle.on .cy-n:nth-of-type(5){transition-delay:.56s}
@media (prefers-reduced-motion:reduce){.ckweb .cycle .cy-n{opacity:1;transform:none;transition:none}}
.ckweb .cycle .list{display:grid;gap:24px}
.ckweb .cycle .list div{border-top:1px solid var(--c-border-cool);padding-top:18px}
.ckweb .cycle .list h3{font-size:2.0rem;font-weight:800;margin:0 0 8px}
.ckweb .cycle .list p{font-size:1.4rem;color:var(--c-slate);line-height:1.95;margin:0}
.ckweb .more details{border-top:1px solid var(--c-border)}
.ckweb .more details:last-of-type{border-bottom:1px solid var(--c-border)}
.ckweb .more summary{cursor:pointer;list-style:none;padding:28px 44px 28px 0;position:relative;font-size:1.9rem;font-weight:700}
.ckweb .more summary::-webkit-details-marker{display:none}
.ckweb .more summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--c-cobalt);border-bottom:2px solid var(--c-cobalt);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
.ckweb .more details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.ckweb .more .body{padding:0 0 30px;font-size:1.4rem;line-height:2;color:var(--c-slate)}
.ckweb .more .body p{margin:0 0 18px}
.ckweb .more .body p:last-child{margin:0}

/* ---------- 最終CTA ---------- */
.ckweb .ckfc{background-color:var(--c-navy);
  background-image:linear-gradient(135deg,rgba(10,46,92,.88) 0%,rgba(15,74,162,.76) 55%,rgba(10,46,92,.88) 100%),var(--poster);
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
  color:#fff;padding:100px 20px;text-align:center}
.ckweb .ckfc h2{font-size:var(--fs-h2);font-weight:700;margin:0 0 20px;line-height:1.5;letter-spacing:.08em}
.ckweb .ckfc h2 .mk{color:var(--c-yellow);font-size:1.16em;letter-spacing:.005em;
  background:linear-gradient(transparent 93%,rgba(255,214,51,.55) 93%);padding:0 .04em}
.ckweb .ckfc p.l{font-size:1.6rem;color:#dbe6f7;line-height:2.05;margin:0 0 20px}
.ckweb .ckfc .risk{font-size:1.4rem;color:#c9dcf5;margin:0 0 42px}
.ckweb .ckfc .risk span + span::before{content:"／";margin:0 .6em;color:rgba(255,255,255,.4)}
.ckweb .ckfc .btns{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.ckweb .ckfc .b{display:flex;flex-direction:column;align-items:stretch;flex:0 1 330px}
.ckweb .ckfc .b span.lb{font-size:1.4rem;font-weight:700;color:#c9dcf5;margin:0 0 10px}
/* 濃紺の面では配色を反転する（青地に青ボタンは沈む） */
.ckweb .ckfc .ckbtn--main{background:#fff;background-image:none;color:var(--c-cobalt);
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.ckweb .ckfc .ckbtn--main .arw{background:rgba(15,74,162,.14);color:var(--c-cobalt)}
.ckweb .ckfc .ckbtn--main:hover{background:#f4f8ff}
.ckweb .ckfc .ckbtn--main small{color:#3a63a6;opacity:1}
.ckweb .ckfc .tel{font-size:1.4rem;color:#c9dcf5;margin:46px 0 0;line-height:2.2}
.ckweb .ckfc .tel a{display:inline-block;color:#fff;font-family:"Oswald",sans-serif;font-size:3.0rem;
  font-weight:600;text-decoration:none;margin:8px 22px 0 0;border-bottom:2px solid rgba(255,255,255,.45);padding-bottom:3px}
.ckweb .ckfc .tel a.mail{font-family:"Zen Kaku Gothic New",sans-serif;font-size:1.6rem;font-weight:700;vertical-align:middle}




/* ---------- マスコット（2026-08確定 v15・既存資産） ---------- */
.ckweb .result{position:relative}
.ckweb .mascot-cheer{position:absolute;right:-2%;bottom:-6px;width:112px;height:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.28));animation:float 4.2s ease-in-out infinite}
.ckweb .mascot-mid{display:block;margin:0 auto 14px;width:118px;height:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.24));animation:float 4.6s ease-in-out infinite}
.ckweb .ckfc{position:relative}
.ckweb .mascot-fcta{position:absolute;right:6%;bottom:40px;width:150px;height:auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.3));animation:float 5s ease-in-out infinite}
.ckweb .mascot-faq{display:block;width:104px;height:auto;margin:18px 0 0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.ckweb .mascot-cheer,.ckweb .mascot-mid,.ckweb .mascot-fcta{animation:none}}


/* ---------- 業種から探す ---------- */
.ckweb .types .sub{font-size:2.0rem;font-weight:700;margin:56px 0 18px;padding-bottom:12px;
  border-bottom:2px solid var(--c-border-cool)}
.ckweb .inds .indlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
/* 1024〜1200では2段だと1行が入りきらず、li>a の nowrap で最大98px はみ出す（実測）。
   文字を折ると左右の項目で行数がずれて読みにくいので、入る幅になるまで1段にする。 */
@media screen and (max-width:1200px){.inds .indlist{grid-template-columns:1fr;gap:0}}
/* 390pxでは長い項目名が1行に入りきらないので折り返して受ける（/web/と同じ作法）。 */
@media screen and (max-width:560px){
  .inds .indlist li>a{white-space:normal}
  .inds .indlist a{flex-wrap:wrap;gap:6px 10px}
  .inds .indlist a>b{margin-left:0;padding-left:0;flex-basis:100%}
}
.ckweb .inds .indlist a>b{white-space:nowrap}
.ckweb .inds .indlist li>a{white-space:nowrap}
.ckweb .inds .indlist li{border-bottom:1px solid var(--c-border-cool)}
.ckweb .inds .indlist .ind__ic{flex:0 0 auto;width:26px;height:26px;margin-right:12px}
.ckweb .inds .indlist .ind__ic svg{width:26px;height:26px;display:block}
.ckweb .inds .indlist a>b{margin-left:auto;padding-left:10px}
.ckweb .inds .indlist a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 2px;font-size:1.5rem;color:var(--c-ink);text-decoration:none;transition:color .25s,padding .25s}
.ckweb .inds .indlist a b{font-weight:700}
.ckweb .inds .indlist a::after{content:"";width:9px;height:9px;flex:0 0 auto;
  border-right:2.4px solid var(--c-cobalt);border-top:2.4px solid var(--c-cobalt);transform:rotate(45deg)}
.ckweb .inds .indlist a:hover{color:var(--c-cobalt);padding-left:10px}

/* ---------- 12ヶ月の費用 ---------- */
.ckweb .cost .costbox{background:#fff;border-radius:6px;padding:44px 40px;border:1px solid var(--c-border);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ckweb .cost svg{width:100%;height:auto;display:block}
.ckweb .cost .costline{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s var(--ease)}
.ckweb .cost .on .costline,.ckweb .on .cost .costline{stroke-dashoffset:0}
.ckweb .cost .incl{list-style:none;margin:36px 0 0;padding:26px 0 0;border-top:1px solid var(--c-border);
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 44px}
.ckweb .cost .incl li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:1.5rem;padding-bottom:12px;border-bottom:1px dashed var(--c-border)}
.ckweb .cost .incl b{font-weight:700}
.ckweb .cost .incl span{font-size:1.4rem;font-weight:700;color:var(--c-cobalt);white-space:nowrap}
.ckweb .cost .incl span.x{color:var(--c-muted)}



/* ============================================================
   数字の組版ルール（全ページ共通）
   ・前置き（約）: 数字の 0.28倍 / ベースライン揃え / 右に .10em
   ・数字        : Oswald 600 / tabular-nums / letter-spacing .01em
   ・単位        : 数字の 0.34倍 / ベースライン揃え / 左に .08em
   ・数字ブロックは常に baseline で揃える（中央揃えにしない）
   ============================================================ */
.ckweb .fig{display:flex;align-items:baseline;line-height:1;font-variant-numeric:tabular-nums}
.ckweb .fig--c{justify-content:center}
.ckweb .fig .pre{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
  font-size:.28em;margin-right:.10em;letter-spacing:.02em}
.ckweb .fig .v{font-family:"Oswald",sans-serif;font-weight:600;letter-spacing:.01em;
  font-feature-settings:"tnum";padding:0;margin:0}
.ckweb .fig .u{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
  font-size:.34em;margin-left:.08em;letter-spacing:.02em;white-space:nowrap}

/* ---------- ヒーローのPC／スマホ モック ---------- */
.ckweb .hero .mock{position:relative;padding:0 0 18px}
/* ノートPC。筐体は線と面だけで作る（写真の枠を主役にしない）。 */
.ckweb .dev-pc{position:relative;width:100%}
.ckweb .dev-pc__bezel{background:#dfe5ee;border:1px solid #cbd4e2;border-radius:12px;padding:10px 10px 10px;
  box-shadow:0 2px 6px rgba(10,46,92,.10)}
.ckweb .dev-pc__screen{border-radius:5px;overflow:hidden;background:#fff;border:1px solid #c3cddd;
  aspect-ratio:1440/880}
.ckweb .dev-pc__screen img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
.ckweb .dev-pc__base{position:relative;width:118%;height:13px;margin:0 auto;left:-9%;
  background:linear-gradient(180deg,#d6dde8,#bcc7d8);border-radius:0 0 9px 9px}
.ckweb .dev-pc__base span{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:76px;height:5px;border-radius:0 0 5px 5px;background:#a9b6cb}
/* スマホ。実機幅で撮ったものを等倍で入れる。 */
.ckweb .dev-sp{position:absolute;right:-7%;bottom:-6%;width:23%;
  background:#1b2330;border-radius:26px;padding:6px;
  box-shadow:0 6px 18px rgba(10,46,92,.22)}
.ckweb .dev-sp__screen{border-radius:20px;overflow:hidden;background:#fff;aspect-ratio:780/1688}
.ckweb .dev-sp__screen img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
.ckweb .dev-sp__island{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:30%;height:9px;border-radius:5px;background:#1b2330}

/* 実績は作品の下に置き、数字そのものを大きく見せる（参考サイトの作法） */
.ckweb .hero .shots-cap{font-size:1.25rem;color:var(--c-slate);margin:52px 0 0;text-align:right;line-height:1.9}
.ckweb .hero .stat{display:grid;grid-template-columns:auto auto;align-items:end;gap:0 20px;
  margin:20px 0 0;padding-top:20px;border-top:1px solid var(--c-border)}
.ckweb .hero .stat__k{grid-column:1;font-size:1.3rem;font-weight:700;color:var(--c-muted);
  letter-spacing:.04em;align-self:center}
.ckweb .hero .stat__v{grid-column:2;grid-row:1 / span 2;color:var(--c-cobalt);font-size:6.4rem;line-height:.86}
.ckweb .hero .stat__v .u{color:var(--c-ink);font-size:.30em}
.ckweb .hero .stat__n{grid-column:1;font-size:1.2rem;color:var(--c-muted);white-space:nowrap;padding-top:4px}

/* ---------- 幾何の地紋（社長支給の参考どおり・cantik色／ごく薄く） ---------- */
.ckweb .poly{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ckweb .poly svg{position:absolute;display:block}
.ckweb .sec > .ckinr,.ckweb .result .ckinr,.ckweb .ckfc .ckinr,.ckweb .midcta .in{position:relative;z-index:1}

/* ---------- 実績（coomil型・画像は制作したサイトのトップFV） ---------- */
.ckweb .works .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 30px}
.ckweb .works .w{display:flex;flex-direction:column}
.ckweb .works .ph{display:block;margin:0 0 20px;position:relative;overflow:hidden;border-radius:6px;
  background:#eef2f8;border:1px solid var(--c-border);box-shadow:0 1px 2px rgba(0,0,0,.05);text-decoration:none}
.ckweb .works .ph img{width:100%;display:block;aspect-ratio:1200/650;object-fit:cover;object-position:top;
  transition:transform .7s var(--ease)}
.ckweb .works .ph:hover img{transform:scale(1.045)}
.ckweb .works .cat{position:absolute;left:0;bottom:0;background:var(--c-cobalt);color:#fff;
  font-size:1.2rem;font-weight:700;padding:6px 14px;letter-spacing:.02em}
.ckweb .works .body{display:flex;flex-direction:column;flex:1}
.ckweb .works .k{font-size:1.3rem;font-weight:700;color:var(--c-cobalt);margin:0 0 8px}
.ckweb .works h3{font-size:1.7rem;font-weight:700;line-height:1.65;margin:0 0 12px}
.ckweb .works h3 a{text-decoration:none}
.ckweb .works h3 a:hover{color:var(--c-cobalt)}
.ckweb .works .body p{font-size:1.4rem;color:var(--c-slate);line-height:1.9;margin:0 0 16px}
.ckweb .works .w .wmore{margin:10px 0 0}
.ckweb .works .w .wmore a{font-size:1.3rem;font-weight:700;color:var(--c-cobalt);
  display:inline-flex;align-items:center;gap:7px}
.ckweb .works .w .wmore a::after{content:"";width:6px;height:6px;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.ckweb .works .w .wmore a:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.ckweb .works .res{margin:auto 0 0 !important;padding-top:14px;border-top:1px solid var(--c-border);
  font-size:1.3rem;color:var(--c-slate)}
.ckweb .works .res span{font-weight:700;color:var(--c-muted);margin-right:10px}
.ckweb .works .more-link{display:flex;justify-content:center;margin:56px 0 0}

/* ---------- オンライン対応＋商圏 ---------- */
.ckweb .online .onl-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ckweb .online h3{font-size:1.9rem;font-weight:700;margin:0 0 20px;padding-bottom:12px;
  border-bottom:2px solid var(--c-border-cool)}
.ckweb .online svg{width:100%;height:auto;display:block}
.ckweb .online .onl-flow{display:grid;grid-template-columns:1fr 268px;gap:30px;align-items:center}
.ckweb .online .onl-flow h3{grid-column:1/-1;margin-bottom:12px}
.ckweb .online .onl-ch{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.ckweb .online .onl-ch li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;
  column-gap:14px;align-items:center}
.ckweb .online .onl-ch .ic{grid-row:1/3;width:44px;height:44px}
.ckweb .online .onl-ch .ic svg{width:44px;height:44px}
.ckweb .online .onl-ch b{font-size:1.6rem;font-weight:700;color:var(--c-ink);line-height:1.5;align-self:end}
.ckweb .online .onl-ch .t{font-size:1.4rem;color:var(--c-slate);line-height:1.6;align-self:start}
.ckweb .online .onl-cap{grid-column:1/-1;margin:18px 0 0;text-align:center}
.ckweb .online .onl-cap b{display:block;font-size:1.6rem;font-weight:700;color:var(--c-ink);line-height:1.7}
.ckweb .online .onl-cap span{display:block;font-size:1.4rem;color:var(--c-slate);line-height:1.9;margin-top:4px}
.ckweb .online .onl-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:42px 0 0}
.ckweb .online .onl-photos figure{margin:0}
.ckweb .online .onl-photos img{width:100%;border-radius:6px;aspect-ratio:16/9;object-fit:cover;
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ckweb .online .onl-photos figcaption{font-size:1.4rem;color:var(--c-slate);margin-top:12px;font-weight:700}

/* ---------- 追従CTA（SP） ---------- */
.ckweb .stick{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;padding:10px 12px;
  background:rgba(255,255,255,.96);box-shadow:0 -4px 18px rgba(10,46,92,.14)}
.ckweb .stick a{flex:1;min-height:52px;font-size:1.4rem;padding:0 12px}


/* ---------- SPの設計（縦に伸ばさない・落とさない） ----------
   実測で52,000pxあった。長いページは読み切られず、CTAへ到達する前に離脱する。
   ①余白を詰める ②長い一覧は折りたたむ ③追従CTAを常に出す ④2列にできるものは2列にする */

@media screen and (min-width:1024px){ .spfold__btn{display:none} }

/* ---------- SP ---------- */


/* ===== 復旧して末尾に置き直したブロック（範囲差し替えの巻き添え防止） ===== */
/* ---------- 代表メッセージ ---------- */
.ckweb .greet .gbox{display:block;max-width:44em}
.ckweb .greet .gtxt p{font-size:1.6rem;line-height:2.15;margin:0 0 26px}
.ckweb .greet .gtxt .sign{font-size:1.8rem;font-weight:900;margin:34px 0 0}
.ckweb .greet .gmeta{margin:56px 0 0;font-size:1.4rem;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 46px;border-top:1px solid var(--c-border);padding-top:8px}
.ckweb .greet .gmeta > div{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--c-border);align-items:start}
.ckweb .greet .gmeta dt{color:var(--c-muted);font-weight:700;margin:0}
.ckweb .greet .gmeta dd{margin:0;line-height:1.8}


/* ---------- フッター ---------- */
.ckweb .sitefoot{background:var(--c-navy);color:#dbe6f7;padding:72px 20px 34px;position:relative;
  font-size:1.4rem;line-height:1.95}
.ckweb .sitefoot a:not(.ckbtn){color:#dbe6f7;text-decoration:none}
.ckweb .sitefoot a:not(.ckbtn):hover{color:#fff;text-decoration:underline}
/* ボタンはフッターのリンク色に巻き込ませない（白地に淡い青＝読めない） */
.ckweb .sitefoot .ckbtn--main{color:#fff}
.ckweb .sitefoot .ckbtn--sub{color:#c8324a}
.ckweb .sitefoot .ftop{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.ckweb .sitefoot .fcopy{font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 18px}
.ckweb .sitefoot .fname{font-size:2.2rem;font-weight:900;color:#fff;margin:0 0 14px;letter-spacing:.02em}
.ckweb .sitefoot address{font-style:normal;margin:0 0 18px}
.ckweb .sitefoot .ftel,.ckweb .sitefoot .fmail{margin:0 0 8px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ckweb .sitefoot .ftel span,.ckweb .sitefoot .fmail span{font-size:1.2rem;font-weight:700;color:#8fb3e6;letter-spacing:.12em}
.ckweb .sitefoot .ftel a{font-family:"Oswald",sans-serif;font-size:2.4rem;font-weight:600;color:#fff;letter-spacing:.02em}
.ckweb .sitefoot .ftel small{font-size:1.3rem;color:#9db6dc}
.ckweb .sitefoot .fmail a{font-size:1.6rem;font-weight:700;color:#fff}
.ckweb .sitefoot .fnote{margin:18px 0 0;color:#9db6dc}
.ckweb .sitefoot .fnav{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.ckweb .sitefoot .fh{font-size:1.2rem;font-weight:700;color:#8fb3e6;letter-spacing:.1em;margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.16)}
.ckweb .sitefoot .fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ckweb .sitefoot .ckfc-mini{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
  margin:56px 0 0;padding:44px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.ckweb .sitefoot .fbot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin:40px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.ckweb .sitefoot .flinks{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap}
.ckweb .sitefoot .fcr{margin:0;color:#9db6dc;font-size:1.3rem}


/* ---------- ご依頼いただいた企業・団体 ---------- */
.ckweb .clients .cgrid{column-count:3;column-gap:44px}
.ckweb .clients .cg{break-inside:avoid;margin:0 0 42px;display:inline-block;width:100%}
.ckweb .clients .cgh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 16px;
  padding-bottom:12px;border-bottom:1px solid var(--c-border-cool);
  font-size:1.5rem;font-weight:800;color:var(--c-ink)}
.ckweb .clients .cgh b{font-family:"Oswald",sans-serif;font-size:2.0rem;font-weight:600;color:var(--c-cobalt)}
.ckweb .clients .cg ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ckweb .clients .cg li{font-size:1.4rem;line-height:1.7;color:var(--c-slate);padding-left:16px;position:relative}
.ckweb .clients .cg li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--c-sky)}
.ckweb .clients .cnote{margin:44px 0 0;padding-top:20px;border-top:1px solid var(--c-border);
  font-size:1.4rem;color:var(--c-muted)}


/* ---------- 動き（すべて prefers-reduced-motion で無効化） ---------- */
/* 見出しは下から現れるだけでなく、左から現れる（読む向きに合わせる） */
/* 見出しの動きは「子要素」に掛ける。観測対象そのものを隠すと引き金を失う。
   黄のマーカーが左から伸びる＝読む向きと同じで、文字は最初から読める。 */
.ckweb .mk{background-repeat:no-repeat;background-size:0 100%;
  transition:background-size .85s var(--ease) .3s}
.ckweb .rv.on .mk,.ckweb h2.rv.on .mk,.ckweb .shead .on .mk{background-size:100% 100%}
/* セクション番号の罫は横に伸びる */
.ckweb .no i{display:inline-block;width:0;height:2px;background:var(--c-yellow-d);
  vertical-align:middle;margin-left:10px;transition:width .9s var(--ease) .15s}
.ckweb .no.on i,.ckweb .on .no i{width:34px}
/* 作品カードは持ち上げる（影ではなく位置で反応させる） */
.ckweb .works .w{transition:transform .5s var(--ease)}
.ckweb .works .w:hover{transform:translateY(-6px)}
/* 顧客名は1行ずつ下から */
.ckweb .clients .cg li{opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ckweb .clients .cg.on li{opacity:1;transform:none}
.ckweb .clients .cg.on li:nth-child(2){transition-delay:.04s}
.ckweb .clients .cg.on li:nth-child(3){transition-delay:.08s}
.ckweb .clients .cg.on li:nth-child(4){transition-delay:.12s}
.ckweb .clients .cg.on li:nth-child(5){transition-delay:.16s}
.ckweb .clients .cg.on li:nth-child(n+6){transition-delay:.20s}
/* ISSUEのイラストは線を引いてから塗る */
.ckweb .pain .ill{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ckweb .pain .pr.on .ill{opacity:1;transform:none}
.ckweb .pain .ill [data-len]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.3s var(--ease)}
.ckweb .pain .pr.on .ill [data-len]{stroke-dashoffset:0}


/* CTAボタンは光らせない。押せることは影と位置だけで示す。 */
.ckweb .ckbtn{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .ckweb .mk{background-size:100% 100% !important;transition:none}
  .ckweb .no i{width:34px;transition:none}
  .ckweb .clients .cg li{opacity:1;transform:none;transition:none}
  .ckweb .pain .ill [data-len]{stroke-dashoffset:0;transition:none}
  .ckweb .pain .ill{opacity:1;transform:none;transition:none}
}

/* ---------- 導入（数字の直後） ---------- */
.ckweb .intro{--sec-pad:96px;text-align:center}
.ckweb .intro__copy{font-size:3.4rem;font-weight:900;line-height:1.55;margin:0 0 28px;letter-spacing:.005em}
.ckweb .intro__lead{font-size:1.6rem;line-height:2.15;color:var(--c-slate);margin:0 auto;max-width:56em}



/* ---------- SPの視認性 ----------
   PCは参考サイトに合わせて本文14pxにしたが、SPで14pxは小さい。
   本文だけ15pxへ戻し、行送りは2.0のまま保つ。面と波もSPで効かせる。 */


/* ---------- FVの文章と配置（参考サイトの型） ----------
   肩コピー → 大見出し → リード。最初の画面で「誰に何をする会社か」を文章で伝える。 */
.ckweb .hero .hshoulder{font-size:1.6rem;font-weight:700;letter-spacing:.2em;color:var(--c-cobalt);
  margin:0 0 22px;line-height:1.5}
.ckweb .hero h1{font-size:var(--fs-h1);font-weight:700;line-height:1.5;margin:0 0 26px;letter-spacing:.08em}
.ckweb .hero h1 em{font-style:normal;color:var(--c-cobalt);position:relative;display:inline-block}
.ckweb .hero p.l{font-size:1.5rem;line-height:2.05;color:var(--c-ink);margin:0 0 18px;max-width:40em;font-weight:500}
.ckweb .hero p.l2{font-size:1.4rem;line-height:2.1;color:var(--c-slate);margin:0 0 30px;max-width:42em}
.ckweb .hero p.l2 b{font-weight:700;color:var(--c-ink)}
/* 白い面は左右どちらの列も囲む */
.ckweb .hero .hcol::before{content:none}
.ckweb .hero .in{position:relative}
.ckweb .hero .in::before{content:"";position:absolute;inset:-60px -10% -50px -12%;z-index:-1;
  background:linear-gradient(100deg,#fff 0%,#fff 46%,rgba(255,255,255,.72) 62%,rgba(255,255,255,0) 78%)}
/* 端末は列の中で釣り合う位置に置く（スマホが右にはみ出すぶんを空けておく） */
.ckweb .hero .mock{padding:0 7% 34px 0}
.ckweb .hero .shots-cap,.ckweb .hero .stat{padding-right:7%}


/* ---------- 実績・顧客のスライド（参考サイトの作法） ----------
   参考サイトは横に自動で流す。止めたい人のために hover と focus で停止する。
   DOMには全件残すので検索エンジンからは普通に読める。 */
.ckweb .wslide{overflow:hidden;margin:0 -4vw;padding:6px 0 10px;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ckweb .wslide__track{display:flex;width:max-content;gap:30px;padding-left:30px;animation:wslide 78s linear infinite}
.ckweb .wslide:hover .wslide__track,.ckweb .wslide:focus-within .wslide__track{animation-play-state:paused}
.ckweb .wslide .w{flex:0 0 340px;display:flex;flex-direction:column}
@keyframes wslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ckweb .wslide__note{font-size:1.2rem;color:var(--c-muted);margin:0 0 14px;text-align:right}

.ckweb .cslide{display:grid;gap:12px;margin:0 -4vw;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ckweb .crow{overflow:hidden}
.ckweb .crow__track{display:flex;width:max-content;gap:12px;padding-left:12px}
.ckweb .crow--ltr  .crow__track{animation:cslideL 64s linear infinite}
.ckweb .crow--rtl  .crow__track{animation:cslideR 72s linear infinite}
.ckweb .crow--ltr2 .crow__track{animation:cslideL 58s linear infinite}
.ckweb .cslide:hover .crow__track{animation-play-state:paused}
@keyframes cslideL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cslideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ckweb .ctile{flex:0 0 auto;display:inline-flex;align-items:center;height:52px;padding:0 22px;
  background:#fff;border:1px solid var(--c-border);border-radius:6px;
  font-size:1.4rem;font-weight:500;color:var(--c-ink);white-space:nowrap}
.ckweb .cgroups{margin:26px 0 0;font-size:1.3rem;color:var(--c-slate);line-height:2.1}
.ckweb .cgroups b{font-family:"Oswald",sans-serif;font-size:1.7rem;font-weight:600;color:var(--c-cobalt);margin-left:.3em}
@media (prefers-reduced-motion:reduce){
  .ckweb .wslide__track,.ckweb .crow__track{animation:none}
}


/* ---------- 実績スライド（参考サイトの型） ----------
   見出し行の右に 前へ／次へ・現在番号・進捗バー・総数。カードは左右が見切れる。
   自動で送り、hover と focus で止める。分類はピル型にしない（絶対遵守§1-19）。 */
.ckweb .wsl{position:relative;margin:0 0 8px}
.ckweb .wsl__bar{display:flex;align-items:center;gap:14px;justify-content:flex-end;margin:-86px 0 30px}
.ckweb .wsl__nav{width:48px;height:48px;border:1px solid var(--c-border-cool);background:#fff;border-radius:4px;
  display:grid;place-items:center;color:var(--c-ink);cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.ckweb .wsl__nav:hover{background:var(--c-cobalt);border-color:var(--c-cobalt);color:#fff}
.ckweb .wsl__i,.ckweb .wsl__n{font-family:"Oswald",sans-serif;font-size:1.8rem;font-weight:600;letter-spacing:.04em;
  white-space:nowrap;flex:0 0 auto}
.ckweb .wsl__i{color:var(--c-ink);margin-left:10px}
.ckweb .wsl__n{color:var(--c-border-cool)}
.ckweb .wsl__prog{position:relative;width:min(34vw,340px);height:3px;background:var(--c-border);overflow:hidden}
.ckweb .wsl__prog i{position:absolute;inset:0 auto 0 0;width:0;background:var(--c-yellow-d);display:block}
.ckweb .wsl__view{overflow:hidden;margin:0 -4vw;padding:8px 0 16px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ckweb .wsl__track{display:flex;gap:30px;padding-left:4vw;will-change:transform;
  transition:transform .8s cubic-bezier(.4,0,.2,1)}
.ckweb .wsl .w{flex:0 0 392px;background:#fff;border:1px solid var(--c-border);border-radius:8px;
  box-shadow:0 1px 3px rgba(10,46,92,.07);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.ckweb .wsl .w:hover{box-shadow:0 6px 18px rgba(10,46,92,.14);transform:translateY(-4px)}
.ckweb .wsl .w .ph{margin:0;border:0;border-radius:0;box-shadow:none}
.ckweb .wsl .w .body{padding:24px 26px 26px}
.ckweb .wsl .w h3{font-size:1.6rem;line-height:1.7}
.ckweb .wsl .w .body p{font-size:1.35rem;line-height:1.9}


/* ---------- お客様の声（掲載前の文例であることを面で示す） ---------- */
.ckweb .voice .v .draft{margin:14px 0 0 !important;font-size:1.2rem;font-weight:700;color:#c8324a;
  padding-top:10px;border-top:1px dashed #f0c3cb}
.ckweb .voice .lead b{font-weight:700;color:#c8324a}

/* ---------- 買い切りプランと、月額への送り ---------- */
/* ---------- 月額プランへの送り（kurukuru） ----------
   2カラムだと右が狭くなり、ロゴも金額も文字が折れた（社長指摘・3回目）。
   ロゴと金額は上に1本の帯で置き、本文は下に全幅で流す。折り返す箱を作らない。 */
.ckweb .price .subsc{margin:56px 0 0;padding:0;background:#fff;border:1px solid var(--c-border);
  border-radius:8px;overflow:hidden}
.ckweb .price .subsc__top{display:flex;align-items:center;justify-content:flex-start;gap:44px;
  padding:26px 44px;background:var(--c-pale);border-bottom:1px solid var(--c-border)}
.ckweb .price .subsc__logo{width:auto;height:64px;flex:0 0 auto;display:block}
.ckweb .price .subsc__p{display:flex;gap:0;margin:0;flex:0 0 auto}
.ckweb .price .subsc__p>div{padding:0 26px;text-align:center;white-space:nowrap}
.ckweb .price .subsc__p>div+div{border-left:1px solid var(--c-border-cool)}
.ckweb .price .subsc__p dt{font-size:1.2rem;font-weight:700;color:var(--c-muted);letter-spacing:.08em;margin:0 0 2px}
.ckweb .price .subsc__p dd{margin:0;display:flex;align-items:baseline;justify-content:center;gap:2px;color:var(--c-cobalt)}
.ckweb .price .subsc__p dd b{font-size:3.4rem;font-weight:700;line-height:1}
.ckweb .price .subsc__p dd span{font-size:1.4rem;font-weight:700}
.ckweb .price .subsc__l{padding:32px 44px 36px;display:grid;gap:14px;justify-items:start;min-width:0}
.ckweb .price .subsc__l>*{max-width:100%}
.ckweb .price .subsc__k{font-size:1.3rem;font-weight:700;letter-spacing:.14em;color:var(--c-cobalt);margin:0}
.ckweb .price .subsc__t{font-size:2.2rem;font-weight:700;margin:0;line-height:1.6;letter-spacing:.04em}
.ckweb .price .subsc__t em{font-style:normal;background:linear-gradient(transparent 62%,var(--c-yellow) 62%);padding:0 .06em}
.ckweb .price .subsc__d{font-size:1.4rem;color:var(--c-slate);margin:0;line-height:2}
.ckweb .price .subsc__u{list-style:none;margin:2px 0 6px;padding:0;
  display:grid;grid-template-columns:repeat(3,auto);gap:9px 34px;justify-items:start}
.ckweb .price .subsc__u li{font-size:1.35rem;color:var(--c-slate);line-height:1.8;
  display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.ckweb .price .subsc__u li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.55em;
  background:var(--c-cobalt);border-radius:50%}
.ckweb .price .subsc__u li b{font-weight:700;color:var(--c-ink);flex:0 0 auto}
.ckweb .price .subsc__cap{font-size:1.25rem;color:var(--c-muted);margin:2px 0 0;letter-spacing:.04em}

/* ---------- 公開後の運用（4つ） ---------- */
.ckweb .addon__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ckweb .addon .ad{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--c-border);
  border-radius:8px;padding:32px 34px 28px;text-decoration:none;position:relative;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.ckweb .addon .ad:hover{box-shadow:0 8px 22px rgba(10,46,92,.12);transform:translateY(-4px);border-color:var(--c-sky)}
.ckweb .addon .ad__en{font-family:"Oswald",sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:.16em;
  color:var(--c-sky);margin:0}
.ckweb .addon .ad h3{font-size:2.2rem;font-weight:700;margin:0 0 6px;letter-spacing:.04em}
.ckweb .addon .ad__t{font-size:1.4rem;line-height:1.95;color:var(--c-slate);margin:0 0 14px}
.ckweb .addon .ad__k{font-size:1.3rem;color:var(--c-muted);margin:auto 0 16px;padding-top:14px;
  border-top:1px solid var(--c-border)}
.ckweb .addon .ad__go{font-size:1.4rem;font-weight:700;color:var(--c-cobalt);display:inline-flex;align-items:center;gap:8px}
.ckweb .addon .ad__go::after{content:"";width:8px;height:8px;border-top:1.8px solid currentColor;
  border-right:1.8px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
.ckweb .addon .ad:hover .ad__go::after{transform:rotate(45deg) translate(2px,-2px)}
.ckweb .addon__note{margin:30px 0 0;font-size:1.3rem;color:var(--c-muted);line-height:1.95}


/* ---------- 選ばれる理由の各項目に導線を付ける ---------- */
.ckweb .reason .ritem{position:relative;padding-bottom:64px}
.ckweb .reason .ritem__go{grid-column:2;position:absolute;left:36px;bottom:28px;
  font-size:1.35rem;font-weight:700;color:var(--c-cobalt);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px}
.ckweb .reason .ritem__go::after{content:"";width:7px;height:7px;border-top:1.8px solid currentColor;
  border-right:1.8px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
.ckweb .reason .ritem:hover .ritem__go::after{transform:rotate(45deg) translate(2px,-2px)}
.ckweb .reason .ritem{transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.ckweb .reason .ritem:hover{box-shadow:0 8px 22px rgba(10,46,92,.10);transform:translateY(-3px);border-color:var(--c-sky)}
/* 図は現れたあと少し浮く（読み進める合図） */
.ckweb .reason .ritem__fig svg{transition:transform .5s var(--ease)}
.ckweb .reason .ritem:hover .ritem__fig svg{transform:translateY(-4px)}


/* ---------- 運用4サービスのカード ---------- */
/* ロゴは縦横比がまちまち（UNYOだけ縦組み）なので、高さの枠を決めて中で収める。
   幅で揃えると縦組みのものだけ大きく見え、高さで揃えると横組みのものが読めなくなる。 */
.ckweb .addon .ad__logo{display:block;width:auto;max-width:238px;max-height:58px;
  height:auto;object-fit:contain;object-position:left center;margin:0}

.ckweb .addon .ad{padding-top:28px}
.ckweb .addon .ad__logohold{height:62px;display:flex;align-items:center;margin:0 0 18px}
.ckweb .addon .ad__p{margin:0 0 16px;display:flex;align-items:baseline;gap:4px;color:var(--c-cobalt)}
.ckweb .addon .ad__p b{font-family:"Oswald",sans-serif;font-size:3.2rem;font-weight:600;letter-spacing:.01em}
.ckweb .addon .ad__p small{font-size:1.25rem;font-weight:700;color:var(--c-muted);margin-left:6px}
.ckweb .addon .ad__k{margin:auto 0 14px}


/* ---------- 買い切り3プラン ---------- */
.ckweb .plan3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.ckweb .price .pl{background:#fff;border:1px solid var(--c-border);border-radius:8px;padding:34px 30px 30px;
  display:flex;flex-direction:column;position:relative}
.ckweb .price .pl--main{border:2px solid var(--c-cobalt);box-shadow:0 8px 24px rgba(15,74,162,.12);
  animation:plPulse 3.6s var(--ease) infinite;transform-origin:50% 50%;will-change:transform}
.ckweb .price .pl--main:hover{animation-play-state:paused}
@keyframes plPulse{
  0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(15,74,162,.12)}
  50%{transform:scale(1.035);box-shadow:0 16px 36px rgba(15,74,162,.22)}}
@media (prefers-reduced-motion:reduce){.ckweb .price .pl--main{animation:none}}
.ckweb .price .pl__badge{position:absolute;top:-13px;left:30px;background:var(--c-cobalt);color:#fff;
  font-size:1.2rem;font-weight:700;padding:5px 14px;letter-spacing:.04em;margin:0}
.ckweb .price .pl__k{font-size:1.7rem;font-weight:700;margin:0 0 14px;letter-spacing:.04em}
.ckweb .price .pl__v{display:flex;align-items:baseline;color:var(--c-cobalt);margin:0 0 4px;line-height:1}
.ckweb .price .pl__v b{font-family:"Oswald",sans-serif;font-size:5.6rem;font-weight:600;letter-spacing:.01em}
.ckweb .price .pl__v small{font-size:1.8rem;font-weight:700;color:var(--c-ink);margin-left:.1em}
.ckweb .price .pl__n{font-size:1.25rem;color:var(--c-muted);margin:0 0 20px;padding-bottom:18px;
  border-bottom:1px solid var(--c-border)}
.ckweb .price .pl__l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ckweb .price .pl__l li{font-size:1.35rem;line-height:1.85;color:var(--c-slate);padding-left:22px;position:relative}
.ckweb .price .pl__l li::before{content:"";position:absolute;left:2px;top:.55em;width:11px;height:7px;
  border-left:2.4px solid var(--c-cobalt);border-bottom:2.4px solid var(--c-cobalt);transform:rotate(-45deg)}

/* 含まれるもの／オプション */
.ckweb .incl,.ckweb .opt{margin:44px 0 0;background:#fff;border:1px solid var(--c-border);border-radius:8px;padding:32px 34px}
.ckweb .incl__t,.ckweb .opt__t{font-size:1.6rem;font-weight:700;margin:0 0 20px;padding-bottom:14px;
  border-bottom:1px solid var(--c-border)}
.ckweb .incl__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 30px}
.ckweb .incl__l li{font-size:1.35rem;line-height:1.8;color:var(--c-slate)}
.ckweb .incl__l li b{display:block;font-size:1.4rem;font-weight:700;color:var(--c-ink);margin:0 0 2px}
.ckweb .opt__l{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ckweb .opt__l li{display:grid;grid-template-columns:200px 120px 1fr;gap:18px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--c-border);font-size:1.35rem}
.ckweb .opt__l li:last-child{border-bottom:0}
.ckweb .opt__l li span{font-weight:700;color:var(--c-ink)}
.ckweb .opt__l li b{font-family:"Oswald",sans-serif;font-size:1.9rem;font-weight:600;color:var(--c-cobalt)}
.ckweb .opt__l li i{font-style:normal;color:var(--c-muted);font-size:1.3rem}


/* 凡例の（暫定）は小さく添える */
.ckweb .donut .lg li span small{font-size:1.1rem;color:#c8324a;font-weight:700;margin-left:4px}

/* ---------- 含まれるもの（線画つき） ----------
   線の作法はISSUEのイラストと同じ（#333 2px＋差し色#00a0df）。ページの中で絵柄を揃える。 */
.ckweb .incl__l{grid-template-columns:repeat(3,1fr);gap:28px 30px}
.ckweb .incl__l li{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;align-items:start}
.ckweb .incl__l li svg{grid-row:1 / span 2;width:56px;height:56px;display:block}
.ckweb .incl__l li b{grid-column:2;display:block;font-size:1.4rem;font-weight:700;color:var(--c-ink);margin:2px 0 4px}


/* ---------- オプション（線画つき） ---------- */
.ckweb .opt__l li{grid-template-columns:52px 190px 120px 1fr;gap:0 18px;align-items:center;padding:16px 0}
.ckweb .opt__l li svg{width:52px;height:52px;display:block}


/* ---------- 背後を流れる英字（参考サイトの大きな英字の作法） ----------
   面の中で1本だけ流す。読ませる文字ではないので aria-hidden。
   動きが苦手な人には止める。 */
.ckweb .engband{position:absolute;left:0;right:0;top:22px;z-index:0;pointer-events:none;
  display:flex;width:max-content;white-space:nowrap;
  font-family:"Oswald",sans-serif;font-size:9.5rem;font-weight:700;letter-spacing:.06em;
  color:#0f4aa2;opacity:.05;line-height:1;animation:engflow 46s linear infinite}
.ckweb .engband span{padding-right:.4em}
@keyframes engflow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ckweb .sec--pale .engband{opacity:.07}
@media (prefers-reduced-motion:reduce){.ckweb .engband{animation:none}}


/* ---------- お客様の声（参考サイトの型：左に見出しとCTA、右にカード） ---------- */
.ckweb .voice .vsplit{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:start}
.ckweb .voice .vlead{position:sticky;top:96px}
.ckweb .voice .vlead .en{font-family:"Oswald",sans-serif;font-size:4.0rem;font-weight:700;color:var(--c-cobalt);
  line-height:1.1;margin:0 0 6px;letter-spacing:.04em}
.ckweb .voice .vlead__ja{font-size:1.5rem;font-weight:700;margin:0 0 22px}
.ckweb .voice .vstat{display:flex;align-items:baseline;gap:12px;margin:0 0 26px;padding:14px 0;
  border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
  font-size:1.3rem;color:var(--c-slate)}
.ckweb .voice .vstat b{font-family:"Oswald",sans-serif;font-size:2.8rem;font-weight:600;color:var(--c-cobalt);line-height:1}
.ckweb .voice .vstat i{font-style:normal;font-weight:700;color:var(--c-ink);font-size:1.4rem}
.ckweb .voice .vlead h2{font-size:2.6rem;font-weight:700;line-height:1.6;margin:0 0 20px;letter-spacing:.06em}
.ckweb .voice .vlead__t{font-size:1.4rem;line-height:2;color:var(--c-slate);margin:0 0 14px}
.ckweb .voice .vlead__note{font-size:1.3rem;line-height:1.9;color:var(--c-muted);margin:0 0 28px}
.ckweb .voice .vlead__note b{color:#c8324a;font-weight:700}
.ckweb .voice .vcards{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ckweb .voice .vc{background:#fff;border:1px solid var(--c-border);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.ckweb .voice .vc:hover{box-shadow:0 8px 22px rgba(10,46,92,.12);transform:translateY(-4px)}
.ckweb .voice .vc__ph a{display:block}
.ckweb .voice .vc__ph img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top}
.ckweb .voice .vc__b{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.ckweb .voice .vc h3{font-size:1.6rem;font-weight:700;line-height:1.7;margin:0 0 12px}
.ckweb .voice .vc p{font-size:1.3rem;line-height:1.95;color:var(--c-slate);margin:0 0 16px}
.ckweb .voice .vc__who{margin:auto 0 0 !important;padding-top:14px;border-top:1px solid var(--c-border);
  font-size:1.25rem;font-weight:700;color:var(--c-ink);display:flex;align-items:center;justify-content:space-between;gap:10px}
.ckweb .voice .vc__draft{font-size:1.1rem;font-weight:700;color:#c8324a;white-space:nowrap}


/* 中心は実物のcantikマーク。ロゴは回さない（傾いたロゴは出さない）。
   静止して見えないよう、ゆっくり呼吸させるだけにする。 */
.ckweb .cycle .cy-mark{transform-box:fill-box;transform-origin:50% 50%;animation:cymark 5.2s var(--ease) infinite}
@keyframes cymark{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion:reduce){.ckweb .cycle .cy-mark{animation:none}}

/* 参考サイトと同じ動き：輪が一周描かれ、節が1つずつ出て、点が回り続ける */
.ckweb .cycle .cy-ring{stroke-dashoffset:1118;transition:stroke-dashoffset 1.8s var(--ease) .1s}
.ckweb .cycle.on .cy-ring{stroke-dashoffset:0}
.ckweb .cycle .cy-run{transform-box:view-box;transform-origin:310px 280px;
  opacity:0;animation:cyrun 14s linear infinite;animation-play-state:paused}
.ckweb .cycle.on .cy-run{opacity:1;animation-play-state:running;transition:opacity .4s var(--ease) 1.6s}
@keyframes cyrun{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ckweb .cycle .cy-ring{stroke-dashoffset:0;transition:none}
  .ckweb .cycle .cy-run{opacity:1;animation:none}
}

/* ---------- FVの条件（SP） ----------
   3列のままだと「買い切／り」「お見積／り」で割れる。2列＋1列にして折らない。 */

/* ===== SPの上書きはここに集約する =====
   罠＝後から追記したPC用の規則が、前にあるSPのメディアクエリに勝ってしまう
   （同じ詳細度なら後ろが勝つ）。SPは必ず末尾に置く。 ===== */
@media screen and (max-width:1023px){
  .sec::before{width:calc(100% - 20px)}
  .sec:nth-of-type(odd)::before{border-radius:22px 0 0 22px}
  .sec:nth-of-type(even)::before{border-radius:0 22px 22px 0}
}
@media screen and (max-width:1023px){
  .ckweb .sec:nth-of-type(4n+2)::after,.ckweb .sec:nth-of-type(4n)::after{width:82vw;right:-34vw;left:auto;opacity:.08}
  .ckweb .result,.ckweb .ckfc{padding-top:64px}
}
@media screen and (max-width:1023px){
  .ckweb .hero .hmark{width:190vw;opacity:.40}
}
@media screen and (max-width:1023px){.ckweb .lt{width:132px;height:62px}.ckweb .lt img{height:26px}}
@media screen and (max-width:1023px){
  .ckweb .nw{grid-template-columns:1fr;gap:18px}
  .ckweb .nw__list a{grid-template-columns:1fr;gap:4px}
  .ckweb .column .cl__grid{grid-template-columns:1fr}
}
@media screen and (max-width:1023px){
  .ckweb .reason .rsplit{grid-template-columns:1fr;gap:34px}
  .ckweb .reason .rsticky{position:static}
  .ckweb .reason .ritem{grid-template-columns:1fr;padding:26px 22px;gap:4px}
  .ckweb .reason .ritem__fig{grid-column:1;grid-row:auto;margin:0 0 12px}
  .ckweb .reason .ritem__k,.ckweb .reason .ritem h3,.ckweb .reason .ritem__t{grid-column:1}
}
@media screen and (max-width:1023px){
  .ckweb .mascot-cheer,.ckweb .mascot-fcta{position:static;margin:22px auto 0;width:108px;display:block}
  .ckweb .mascot-faq{width:84px}
}
@media screen and (max-width:1023px){
  .ckweb .dev-sp{right:-4%;bottom:-9%;width:25%;border-radius:20px;padding:5px}
  .ckweb .dev-sp__screen{border-radius:16px}
}
@media screen and (max-width:1023px){
  .ckweb{--sec-pad:62px}
  .ckweb .sec--wide{--sec-pad:60px}
  .ckweb .intro{--sec-pad:56px}
  .ckweb .news{--sec-pad:40px}
  .ckweb .achv{padding:44px 16px 48px}
  .ckweb .achv__list{grid-template-columns:1fr 1fr;gap:12px}
  .ckweb .achv__list li{padding:18px 10px 20px;border-radius:14px;gap:8px}
  .ckweb .achv__k{font-size:1.2rem}
  .ckweb .achv__n b{font-size:3.6rem}
  .ckweb .achv__n small{font-size:1.4rem}
  .ckweb .achv__src{text-align:left;margin-top:12px}
  .ckweb .intro__lead{font-size:1.5rem;line-height:2.0}
  .ckweb .shead{margin-bottom:28px}
  .ckweb .works .grid{gap:26px}
  .ckweb .column .cl__grid{gap:14px}
  .ckweb .column .cl a{padding:18px 18px 20px}
  .ckweb .clients .cgrid{column-count:1}
  .ckweb .clients .cg{margin-bottom:26px}
  .ckweb .greet .gtxt p{font-size:1.5rem;line-height:2.0;margin-bottom:20px}
  .ckweb .online .onl-photos{grid-template-columns:1fr 1fr;gap:10px}
  .ckweb .online .onl-photos figure:nth-child(3){display:none}

  /* 折りたたみ：続きは押したときだけ出す */
  .ckweb .spfold{position:relative}
  .ckweb .spfold:not(.is-open) > .spfold__in{max-height:var(--fold,460px);overflow:hidden}
  /* 折り目が中途半端な位置に来ると、切れたカードがボタンの脇に残って壊れて見える。
     ぼかしをボタンの下まで伸ばし、切り口を完全に隠す。 */
  .ckweb .spfold:not(.is-open)::before{content:"";position:absolute;left:0;right:0;bottom:0;height:230px;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--foldbg,#fff) 58%,var(--foldbg,#fff) 100%);
    pointer-events:none;z-index:1}
  .ckweb .spfold__btn{position:relative;z-index:2;
    display:block;width:100%;margin:10px 0 0;padding:15px 0;
    background:#fff;border:1px solid var(--c-cobalt);border-radius:999px;
    font-family:inherit;font-size:1.45rem;font-weight:700;color:var(--c-cobalt);cursor:pointer}
  .ckweb .spfold.is-open .spfold__btn{color:var(--c-muted);border-color:var(--c-border-cool)}

  /* 追従CTA：FVを過ぎたら常に出す */
  .ckweb .stick{display:flex}
  .ckweb{padding-bottom:74px}
}
@media screen and (max-width:1023px){
  .ckweb{--sec-pad:50px;--fs-h1:3.2rem;--fs-h2:2.6rem;--fs-h3:1.8rem}
  .ckweb .sec--wide{--sec-pad:66px}
  .ckweb .hero{padding:26px 16px 0}
  .ckweb .hero .in{grid-template-columns:1fr;gap:20px}
  .ckweb .hero .cta{grid-template-columns:1fr}
  .ckweb .hero .cta a{width:100%}
  .ckweb .hero .deco{opacity:.5}
  .ckweb .hero .shots .badge{width:104px;height:104px;right:-6px;bottom:-16px}
  .ckweb .hero .shots .badge b{font-size:2.6rem}
  .ckweb .shead{grid-template-columns:1fr;gap:16px;margin-bottom:38px}
  .ckweb .voice .grid,.ckweb .way .cols,.ckweb .works .grid{grid-template-columns:1fr;gap:20px}
  .ckweb .reason .rlist{grid-template-columns:1fr;gap:26px}
  .ckweb .pain .pr{grid-template-columns:1fr}
  .ckweb .pain .pr-l,.ckweb .pain .pr-r{padding:24px 20px}
  .ckweb .pain .pr-arw{width:40px;height:40px;margin:6px auto 2px;background:transparent;transform:none}
  .ckweb .pain .pr-arw svg{transform:rotate(90deg)}
  .ckweb .pain .pain-close{flex-direction:column;gap:10px;text-align:center}
  .ckweb .pain .pain-close img{width:110px}
  .ckweb .pain .pain-close p{font-size:2.2rem}

  .ckweb .result{padding:60px 16px}
  .ckweb .result h2{font-size:2.2rem;margin-bottom:34px}
  .ckweb .result .nums{grid-template-columns:1fr;max-width:340px}
  .ckweb .result .n{padding:28px 0}
  .ckweb .result .n + .n::before{left:10%;top:0;width:80%;height:1px}
  .ckweb .result .big{font-size:7.6rem}
  .ckweb .routes .fig-pc{display:none}
  .ckweb .routes .fig-sp{display:block}
  .ckweb .chart{grid-template-columns:1fr;gap:48px}
  .ckweb .bar{grid-template-columns:118px 1fr 30px;gap:10px;font-size:1.3rem}
  .ckweb .bars::before{left:130px;right:42px}
  .ckweb .axis{display:none}
  .ckweb .cycle{grid-template-columns:1fr;gap:40px}
  .ckweb .scope{grid-template-columns:1fr;gap:0}
  .ckweb .types thead{display:none}
  .ckweb .types td{display:block;border:0;padding:4px 0}
  .ckweb .types tbody tr{display:block;padding:20px 0;border-bottom:1px solid var(--c-border)}
  .ckweb .types td.g,.ckweb .types td.t{width:auto}
  .ckweb .types td.t::before{content:"作る型：";font-weight:700;color:var(--c-muted)}
  .ckweb .types td.k::before{content:"見る数字：";font-weight:700;color:var(--c-muted)}
  .ckweb .cmp,.ckweb .cmp tbody,.ckweb .cmp tr,.ckweb .cmp th,.ckweb .cmp td{display:block;width:auto}
  .ckweb .cmp thead{display:none}
  .ckweb .cmp tbody tr{border-bottom:1px solid var(--c-border-cool);padding:18px 0}
  .ckweb .cmp tbody th{padding:0 0 10px;border:0;font-size:1.7rem}
  .ckweb .cmp td{border:0;padding:6px 0 6px 14px}
  .ckweb .cmp td::before{content:attr(data-l);display:block;font-size:1.4rem;color:var(--c-muted);font-weight:700}
  .ckweb .cmp td.me{background:var(--c-pale);border-radius:6px;padding:14px;width:auto;box-shadow:none;border:2px solid var(--c-cobalt)}
  .ckweb .price .row{grid-template-columns:1fr}
  .ckweb .price .item{padding:22px 0}
  .ckweb .price .item + .item::before{left:0;right:0;top:0;bottom:auto;width:100%;height:1px}
  .ckweb .price .v{font-size:5.2rem}
  .ckweb .price .v.jp{font-size:4.0rem}
  .ckweb .price .plans thead{display:none}
  .ckweb .price .plans td{display:block;border:0;padding:4px 0}
  .ckweb .price .plans tbody tr{display:block;padding:16px 0;border-bottom:1px solid var(--c-border)}
  .ckweb .midcta h2{font-size:2.2rem}
  .ckweb .midcta .btns{flex-direction:column;align-items:stretch}
  .ckweb .ckfc{padding:64px 16px 120px}
  .ckweb .ckfc .btns{flex-direction:column;align-items:center;gap:16px}
  /* 縦並びに変えたら flex-basis は「高さ」になる。PC用の330pxを残すと1本あたり330pxの空白になる（実測236px）。 */
  .ckweb .ckfc .b{width:100%;max-width:340px;flex:0 0 auto}
  .ckweb .inds .indlist{grid-template-columns:1fr;gap:0}
  .ckweb .online .onl-grid{grid-template-columns:1fr;gap:38px}
  .ckweb .online .onl-flow{grid-template-columns:1fr;gap:22px}
  .ckweb .online .onl-ch{gap:16px}
  .ckweb .works .grid{grid-template-columns:1fr;gap:34px}
  .ckweb .hero .stat{gap:12px;margin-top:18px}
  .ckweb .hero .stat__v{font-size:3.0rem !important}
  .ckweb .hero .stat__n{display:none}
  .ckweb .mock-sp{width:30%;right:-6px}
  .ckweb .online .onl-photos{grid-template-columns:1fr;gap:18px}
  .ckweb .cost .costbox{padding:24px 18px}
  .ckweb .cost .incl{grid-template-columns:1fr;gap:10px}

  .ckweb .logos .track img{height:30px}
  .ckweb .stick{display:flex}
}
@media screen and (max-width:1023px){

    .ckweb .greet .gmeta{grid-template-columns:1fr;gap:0;margin-top:34px}
}
@media screen and (max-width:1023px){
  .ckweb .sitefoot{padding:56px 20px 110px}
  .ckweb .sitefoot .ftop{grid-template-columns:1fr;gap:38px}
  .ckweb .sitefoot .fnav{grid-template-columns:1fr 1fr;gap:26px 20px}
  .ckweb .sitefoot .ckfc-mini{flex-direction:column;margin-top:40px}
  .ckweb .sitefoot .fbot{flex-direction:column;align-items:flex-start}
}
@media screen and (max-width:1023px){
  .ckweb .clients .cgrid{column-count:1}
}
@media screen and (max-width:1023px){
  .ckweb .intro{text-align:left}
  .ckweb .intro__copy{font-size:2.2rem;line-height:1.6}
}
@media screen and (max-width:1023px){
  .ckweb{font-size:1.5rem}
  .ckweb .intro__lead,.ckweb .shead .lead,.ckweb .pain .pr-r li,.ckweb .reason .ritem__t,.ckweb .works .body p,.ckweb .greet .gtxt p,.ckweb .cycle .list p,.ckweb .voice .v p{font-size:1.5rem;line-height:1.95}
  .ckweb .shead .en{font-size:2.8rem}
  .ckweb .shead h2{letter-spacing:.06em}
  .ckweb .hero h1{letter-spacing:.05em;line-height:1.45}
  .ckweb .hero .hcol::before{inset:-22px -20px -22px -20px;background:rgba(255,255,255,.93)}
  .ckweb .achv__list li{border-radius:12px}
  .ckweb .nw__list a{padding:14px 2px}
  .ckweb .ckbtn{min-height:56px;font-size:1.5rem;letter-spacing:.06em}
  .ckweb .stick a{font-size:1.45rem}
  .ckweb .spfold__btn{font-size:1.5rem}
}
@media screen and (max-width:1023px){
  .ckweb .hero .hshoulder{font-size:1.3rem;letter-spacing:.14em;margin-bottom:12px}
  .ckweb .hero h1{margin-bottom:16px}
  .ckweb .hero p.l{margin-bottom:12px}
  .ckweb .hero p.l2{margin-bottom:16px}
  .ckweb .hero .spec{margin-top:4px}
  .ckweb .hero .cta{gap:12px;margin-top:16px}
  /* 背景の図形をFV全面に見せる（文字の白面は少し薄くして図が透ける） */
  .ckweb .hero .hmark{width:215vw;opacity:.5;top:44%}
  .ckweb .hero .hcol::before{background:rgba(255,255,255,.88)}
  .ckweb .hero p.l{font-size:1.5rem}
  .ckweb .hero p.l2{font-size:1.4rem}

  .ckweb .hero .mock{padding:0 6% 14px 0}
  .ckweb .hero .shots-cap,.ckweb .hero .stat{padding-right:0}
}
@media screen and (max-width:1023px){
  .ckweb .wslide{margin:0 -5vw}
  .ckweb .wslide .w{flex:0 0 252px}
  .ckweb .wslide__track{gap:16px;padding-left:16px;animation-duration:62s}
  .ckweb .cslide{margin:0 -5vw;gap:10px}
  .ckweb .ctile{height:44px;padding:0 16px;font-size:1.3rem}
}
@media screen and (max-width:1023px){
  .ckweb .wsl__bar{margin:0 0 20px;justify-content:flex-start;gap:10px}
  .ckweb .wsl__prog{flex:1 1 auto;width:auto;min-width:60px}
  .ckweb .wsl__nav{width:44px;height:44px}
  .ckweb .wsl__i,.ckweb .wsl__n{font-size:1.6rem}
  .ckweb .wsl__i{margin-left:4px}
  .ckweb .wsl__view{margin:0 -5vw}
  .ckweb .wsl__track{gap:16px;padding-left:5vw}
  .ckweb .wsl .w{flex:0 0 78vw}
  .ckweb .wsl .w .body{padding:20px 20px 22px}
}
@media screen and (max-width:1023px){
  .ckweb .addon__grid{grid-template-columns:1fr;gap:16px}
  .ckweb .addon .ad{padding:24px 22px 22px}
  .ckweb .price .subsc__top{flex-direction:column;gap:16px;padding:20px 18px;align-items:center}
  .ckweb .price .subsc__logo{height:48px}
  .ckweb .price .subsc__p>div{padding:0 18px}
  .ckweb .price .subsc__p dd b{font-size:2.8rem}
  .ckweb .price .subsc__l{padding:20px 18px 24px;gap:10px}
  .ckweb .price .subsc__t{font-size:1.8rem}
  .ckweb .price .subsc__u{grid-template-columns:1fr;gap:10px}
  /* grid にすると、説明文（liの直接の子のテキスト）が3列目に落ちて1文字ずつ折れる。
     ふつうのブロックにして、点は絶対配置で左に置く。 */
  .ckweb .price .subsc__u li{white-space:normal;display:block;position:relative;padding-left:16px}
  .ckweb .price .subsc__u li::before{position:absolute;left:0;top:.62em;margin:0}
  .ckweb .price .subsc__u li b{display:block;margin:0 0 1px}
  .ckweb .price .subsc__l .ckbtn{width:100%}
}
@media screen and (max-width:1023px){
  .ckweb .reason .ritem{padding-bottom:56px}
  .ckweb .reason .ritem__go{grid-column:1/-1;left:22px;bottom:22px}
}
@media screen and (max-width:1023px){
  .ckweb .addon .ad__logo{max-width:190px}
  .ckweb .addon .ad__p b{font-size:2.6rem}
}
@media screen and (max-width:1023px){
  .ckweb .plan3{grid-template-columns:1fr;gap:34px}
  .ckweb .price .pl__v b{font-size:4.4rem}
  .ckweb .incl,.ckweb .opt{padding:24px 22px;margin-top:30px}
  .ckweb .incl__l{grid-template-columns:1fr;gap:14px}
  .ckweb .opt__l li{grid-template-columns:1fr;gap:2px;padding:14px 0}
}
@media screen and (max-width:1023px){
  .ckweb .incl__l{grid-template-columns:1fr;gap:18px}
  .ckweb .incl__l li{grid-template-columns:46px 1fr;gap:2px 12px}
  .ckweb .incl__l li svg{width:46px;height:46px}
}
@media screen and (max-width:1023px){
  .ckweb .opt__l li{grid-template-columns:44px 1fr;gap:2px 14px;padding:16px 0}
  .ckweb .opt__l li svg{grid-row:1 / span 3;width:44px;height:44px;align-self:start}
  .ckweb .opt__l li span,.ckweb .opt__l li b,.ckweb .opt__l li i{grid-column:2}
}
@media screen and (max-width:1023px){
  .ckweb .engband{font-size:5.4rem;top:14px;opacity:.06}
}
@media screen and (max-width:1023px){
  .ckweb .voice .vsplit{grid-template-columns:1fr;gap:30px}
  .ckweb .voice .vlead{position:static}
  .ckweb .voice .vlead h2{font-size:2.0rem}
  .ckweb .voice .vcards{grid-template-columns:1fr;gap:16px}
}
@media screen and (max-width:1023px){
  /* カードの中の本文は箱が262pxしかない。字間と級数を詰めて1行に入る文字数を増やす */
  .ckweb .works .w .body p,.ckweb .voice .vc p,.ckweb .works .w .res,.ckweb .voice .vc__who{
    font-size:1.3rem;letter-spacing:.2px;line-height:1.85}
  .ckweb .works .w .res span,.ckweb .voice .vc__who span{display:block;margin:0 0 3px}
  .ckweb .hero .hshoulder{letter-spacing:.08em}
  .ckweb .intro__copy{font-size:2.4rem;letter-spacing:0}
  /* セクションのリードは箱315px。級数と字間を詰めて1行あたりを22字まで伸ばす */
  .ckweb .shead .lead,.ckweb .intro__lead,.ckweb .reason .rlead{font-size:1.4rem;letter-spacing:.1px;line-height:1.95}
  .ckweb .hero .hshoulder{font-size:1.25rem}
  .ckweb .achv__src{font-size:1.15rem;letter-spacing:0}
  /* 「公開後に見る数字」はラベル。値と同じ行に混ぜず、上に出す */
  .ckweb .pain .pr-r .kpi span{display:block;margin:0 0 2px}
  /* 〈項目名／説明〉は途中で折らず、名前を上、説明を下にする */
  .ckweb .incl__l li b,.ckweb .opt__l li b,.ckweb .scope li b{display:block;margin:0 0 2px}
  .ckweb .incl__l li,.ckweb .opt__l li{line-height:1.8;font-size:1.25rem;letter-spacing:.1px}
  /* 中間CTAの見出しはSPでは箱350px。2行で収まる級数にする */
  .ckweb .midcta h2{font-size:1.9rem;letter-spacing:.03em;line-height:1.6}
  .ckweb .hero .spec{display:grid;grid-template-columns:repeat(3,1fr);gap:0;flex-wrap:nowrap}
  .ckweb .hero .spec>div{padding:10px 8px}
  .ckweb .hero .spec dt{font-size:1.1rem}
  .ckweb .hero .spec dd b{font-size:1.9rem}
  .ckweb .hero .spec > div{flex:0 0 50%;padding:12px 14px 12px 0;margin-right:0;
    border-right:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
  .ckweb .hero .spec > div:nth-child(2n){border-right:0;padding-left:14px}
  .ckweb .hero .spec > div:last-child{flex:0 0 100%;border-bottom:0;border-right:0;padding-left:0}
  .ckweb .hero .spec dt{font-size:1.15rem;margin-bottom:2px}
  .ckweb .hero .spec dd{font-size:1.3rem;white-space:nowrap}
  .ckweb .hero .spec dd b{font-size:2.2rem}
}

/* ---------- 制作の流れ（番号・線画・説明の3列） ---------- */
.ckweb .flowlist{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:fl}
.ckweb .flowlist .fl{display:grid;grid-template-columns:86px 92px 1fr;gap:0 26px;align-items:start;
  padding:30px 0;border-top:1px solid var(--c-border);position:relative}
.ckweb .flowlist .fl:last-child{border-bottom:1px solid var(--c-border)}
.ckweb .flowlist .fl__no{display:flex;align-items:baseline;gap:5px;margin:0}
.ckweb .flowlist .fl__no b{font-family:"Oswald",sans-serif;font-size:3.4rem;font-weight:600;color:var(--c-cobalt);line-height:1}
.ckweb .flowlist .fl__no span{font-size:1.2rem;font-weight:700;color:var(--c-sky);letter-spacing:.08em}
.ckweb .flowlist .fl__ic svg{width:72px;height:72px;display:block}
.ckweb .flowlist .fl h3{font-size:2.0rem;font-weight:700;margin:2px 0 10px;letter-spacing:.04em}
.ckweb .flowlist .fl p{font-size:1.4rem;line-height:1.95;color:var(--c-slate);margin:0}
/* 次の段へつながる縦線 */
.ckweb .flowlist .fl:not(:last-child)::after{content:"";position:absolute;left:122px;bottom:-14px;
  width:1px;height:28px;background:var(--c-border-cool)}

@media screen and (max-width:1023px){
  .ckweb .flowlist .fl{grid-template-columns:62px 1fr;gap:4px 14px;padding:22px 0}
  .ckweb .flowlist .fl__no{grid-column:1;grid-row:1}
  .ckweb .flowlist .fl__no b{font-size:2.6rem}
  .ckweb .flowlist .fl__ic{grid-column:1;grid-row:2}
  .ckweb .flowlist .fl__ic svg{width:56px;height:56px}
  .ckweb .flowlist .fl__b{grid-column:2;grid-row:1 / span 2}
  .ckweb .flowlist .fl h3{font-size:1.7rem}
  .ckweb .flowlist .fl p{font-size:1.4rem}
  .ckweb .flowlist .fl:not(:last-child)::after{left:28px;bottom:-11px;height:22px}
}


/* ---------- 作れるサイトの種類：常に流す ---------- */
.ckweb .svmq{overflow:hidden;margin:0 -20px;padding:4px 0 18px;--svmq-dur:72s}
.ckweb .svmq__t{display:flex;gap:20px;width:max-content;padding:0 20px;
  animation:svmq var(--svmq-dur) linear infinite}
.ckweb .svmq:hover .svmq__t,.ckweb .svmq:focus-within .svmq__t{animation-play-state:paused}
.ckweb .svmq .sv{width:360px;flex:0 0 auto}
@keyframes svmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ckweb .svmq__t{animation:none}.ckweb .svmq{overflow-x:auto}}
.ckweb .service .sv__ic{display:block;width:40px;height:40px;margin:0 0 12px}
.ckweb .service .sv__ic svg{width:40px;height:40px;display:block}
.ckweb .service .sv--soon{cursor:default;background:var(--c-pale)}
.ckweb .service .sv--soon:hover{transform:none;box-shadow:none;border-color:var(--c-border)}
.ckweb .service .sv--soon h3,.ckweb .service .sv--soon .sv__t{opacity:.72}
.ckweb .service .sv__soon{font-family:"Oswald",sans-serif;font-size:1.3rem;font-weight:600;
  letter-spacing:.12em;color:var(--c-muted)}
/* ---------- 作れるサイトの種類 ---------- */
.ckweb .svgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ckweb .service .sv{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--c-border);
  border-radius:8px;padding:28px 30px 26px;text-decoration:none;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.ckweb .service .sv:hover{box-shadow:0 8px 22px rgba(10,46,92,.12);transform:translateY(-4px);border-color:var(--c-sky)}
.ckweb .service .sv__no{font-family:"Oswald",sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:.14em;
  color:var(--c-sky);margin:0}
.ckweb .service .sv h3{font-size:1.9rem;font-weight:700;line-height:1.55;margin:0 0 8px;letter-spacing:.03em}
.ckweb .service .sv h3 span{display:block;font-size:1.3rem;font-weight:700;color:var(--c-muted);
  letter-spacing:.04em;margin-top:4px}
.ckweb .service .sv__t{font-size:1.35rem;line-height:1.95;color:var(--c-slate);margin:0 0 16px;flex:1}
.ckweb .service .sv__go{font-size:1.35rem;font-weight:700;color:var(--c-cobalt);display:inline-flex;align-items:center;gap:8px}
.ckweb .service .sv__go::after{content:"";width:7px;height:7px;border-top:1.8px solid currentColor;
  border-right:1.8px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
.ckweb .service .sv:hover .sv__go::after{transform:rotate(45deg) translate(2px,-2px)}

@media screen and (max-width:1023px){
  .ckweb .svgrid{grid-template-columns:1fr;gap:14px}
  .ckweb .service .sv{padding:22px 20px 20px}
  .ckweb .service .sv h3{font-size:1.7rem}
}


@media screen and (max-width:1023px){
  .ckweb .rcards{grid-template-columns:1fr;gap:16px}
  .ckweb .result3 .rc{padding:22px 20px 20px}
  .ckweb .rtbl{font-size:1.25rem}
  .ckweb .rtbl th,.ckweb .rtbl td{padding:9px 5px}
  .ckweb .rtbl tbody th{width:34%}
  .ckweb .rtbl td.src{display:none}
  .ckweb .rtbl thead th:last-child{display:none}
}

/* ---------- 横スライド（縦に長くなる並びを横に寝かせる） ----------
   SPは縦に伸びるほど離脱する。カードが3つ以上並ぶ所は横スクロール＋スナップにする。
   指でも払えるし、端が見切れるので「続きがある」ことが分かる。 */
.ckweb .hsnap{display:flex;overflow-x:auto;overflow-y:hidden;gap:14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:4px 5vw 14px;margin:0 -5vw;scrollbar-width:none}
.ckweb .hsnap::-webkit-scrollbar{display:none}
.ckweb .hsnap > *{flex:0 0 82%;scroll-snap-align:center;min-width:0}
.ckweb .hsnap--wide > *{flex:0 0 88%}
/* 「横に流れる／動かせる」ことがひと目で分かるようにする（社長指摘）
   ①指示は小さな文字でなく枠つきのラベルにする ②山記号を2つ動かす
   ③並びの右端に地色のぼかしを重ねて「まだ続きがある」ことを見せる */
.ckweb .hint{display:none;align-items:center;justify-content:center;gap:10px;margin:0 auto 16px;
  padding:0 0 8px;width:max-content;border-bottom:2px solid var(--c-sky);
  font-size:1.35rem;font-weight:700;color:var(--c-cobalt);letter-spacing:.06em}
.ckweb .hint::before,.ckweb .hint::after{content:"";width:9px;height:9px;flex:0 0 auto;
  border-top:2px solid currentColor;border-right:2px solid currentColor}
.ckweb .hint::before{transform:rotate(-135deg);animation:hintL 1.5s ease-in-out infinite}
.ckweb .hint::after{transform:rotate(45deg);animation:hintR 1.5s ease-in-out infinite}
@keyframes hintR{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,-3px)}}
@keyframes hintL{0%,100%{transform:rotate(-135deg) translate(0,0)}50%{transform:rotate(-135deg) translate(3px,-3px)}}
@media (prefers-reduced-motion:reduce){.ckweb .hint::before,.ckweb .hint::after{animation:none}}
/* スクロールの進み具合（何枚中いま何枚目か）を棒で出す */
.ckweb .slprog{display:none;position:relative;height:3px;border-radius:2px;background:var(--c-border-cool);
  margin:14px auto 0;width:min(240px,62%)}
.ckweb .slprog i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--c-cobalt);
  width:30%;transition:left .12s linear,width .12s linear}
.ckweb .slcount{display:none;text-align:center;font-size:1.2rem;font-weight:700;color:var(--c-muted);
  letter-spacing:.06em;margin:8px 0 0}
.ckweb .slcount b{color:var(--c-cobalt);font-family:"Oswald",sans-serif;font-size:1.5rem;font-weight:600}
/* 濃紺の面では棒も文字も明るくする（地に沈んで読めなくなるため） */
.ckweb .result .slprog,.ckweb .midcta.alt .slprog,.ckweb .ckfc .slprog{background:rgba(255,255,255,.28)}
.ckweb .result .slprog i,.ckweb .midcta.alt .slprog i,.ckweb .ckfc .slprog i{background:var(--c-yellow)}
.ckweb .result .slcount,.ckweb .midcta.alt .slcount,.ckweb .ckfc .slcount{color:#cfe0f7}
.ckweb .result .slcount b,.ckweb .midcta.alt .slcount b,.ckweb .ckfc .slcount b{color:var(--c-yellow)}
/* 右端のぼかし＝続きがある合図 */
.ckweb .svmq,.ckweb .wsl__view{position:relative}
.ckweb .svmq::after,.ckweb .wsl__view::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--c-surface));pointer-events:none;z-index:2}
.ckweb .sec--pale .svmq::after,.ckweb .sec--pale .wsl__view::after{
  background:linear-gradient(90deg,rgba(247,250,254,0),var(--c-pale))}

@media screen and (max-width:1023px){
  /* 縦に長い並びを横スライドにする */
  .ckweb .plan3,.ckweb .addon__grid,.ckweb .svgrid,.ckweb .rcards,.ckweb .voice .vcards,.ckweb .column .cl__grid,.ckweb .incl__l,.ckweb .opt__l,.ckweb .flowlist,.ckweb .online .onl-photos,.ckweb .result .nums,.ckweb .chart{
    display:flex;overflow-x:auto;overflow-y:hidden;gap:14px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:4px 5vw 14px;margin:0 -5vw;scrollbar-width:none}
  .ckweb .plan3::-webkit-scrollbar,.ckweb .addon__grid::-webkit-scrollbar,.ckweb .svgrid::-webkit-scrollbar,.ckweb .rcards::-webkit-scrollbar,.ckweb .voice .vcards::-webkit-scrollbar,.ckweb .column .cl__grid::-webkit-scrollbar,.ckweb .incl__l::-webkit-scrollbar,.ckweb .opt__l::-webkit-scrollbar,.ckweb .flowlist::-webkit-scrollbar,.ckweb .online .onl-photos::-webkit-scrollbar,.ckweb .result .nums::-webkit-scrollbar,.ckweb .chart::-webkit-scrollbar{display:none}
  .ckweb .plan3 > *,.ckweb .addon__grid > *,.ckweb .svgrid > *,.ckweb .rcards > *,.ckweb .voice .vcards > *,.ckweb .column .cl__grid > *,.ckweb .incl__l > *,.ckweb .opt__l > *,.ckweb .flowlist > *,.ckweb .online .onl-photos > *,.ckweb .result .nums > *,.ckweb .chart > *{
    flex:0 0 82%;scroll-snap-align:center;min-width:0}
  .ckweb .chart > *{flex:0 0 90%}
  /* 数字は1枚ずつ大きく見せる（横に流して読ませる） */
  .ckweb .result .nums > *{flex:0 0 74%;border-left:0}
  /* 1枚ずつ見せるより2枚見えたほうが読み進めやすいもの */
  .ckweb .incl__l > *{flex:0 0 66%}
  .ckweb .opt__l > *{flex:0 0 78%}
  .ckweb .flowlist > *{flex:0 0 78%}
  .ckweb .online .onl-photos > *{flex:0 0 68%}
  /* 横に寝かせたので縦の区切り線と番号の縦線は消す */
  .ckweb .flowlist .fl:not(:last-child)::after{content:none}
  .ckweb .incl__l li,.ckweb .opt__l li{border-bottom:0}
  .ckweb .plan3 > *{flex:0 0 78%}
  .ckweb .rcards > *{flex:0 0 88%}
  .ckweb .hint{display:flex}
  .ckweb .slprog,.ckweb .slcount{display:block}
  /* 次の1枚をしっかり見せて「まだある」と分からせる */
  .ckweb .plan3 > *,.ckweb .addon__grid > *,.ckweb .rcards > *,.ckweb .voice .vcards > *,.ckweb .column .cl__grid > *,.ckweb .flowlist > *,.ckweb .online .onl-photos > *{flex-basis:78%}
  .ckweb .result .nums > *{flex-basis:70%}
  .ckweb .incl__l > *{flex-basis:62%}
  /* 端をぼかして「切れている＝続く」を出す */
  .ckweb .plan3,.ckweb .addon__grid,.ckweb .rcards,.ckweb .voice .vcards,.ckweb .column .cl__grid,.ckweb .incl__l,.ckweb .opt__l,.ckweb .flowlist,.ckweb .online .onl-photos,.ckweb .result .nums,.ckweb .chart{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 42px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 42px),transparent 100%)}
  .ckweb .plan3.is-end,.ckweb .addon__grid.is-end,.ckweb .rcards.is-end,.ckweb .voice .vcards.is-end,.ckweb .column .cl__grid.is-end,.ckweb .incl__l.is-end,.ckweb .opt__l.is-end,.ckweb .flowlist.is-end,.ckweb .online .onl-photos.is-end,.ckweb .result .nums.is-end,.ckweb .chart.is-end{-webkit-mask-image:none;mask-image:none}
  /* 押す所は指で押せる大きさ（44px）を確保する */
  .ckweb .nw__more,.ckweb .works .w .wmore a,.ckweb .reason .ritem__go,.ckweb .service .sv__go,.ckweb .inds .indlist a{
    min-height:44px}
  .ckweb .nw__more,.ckweb .works .w .wmore a,.ckweb .reason .ritem__go{padding:9px 0}
  .ckweb .reason .ritem__go{bottom:14px}
  .ckweb .reason .ritem{padding-bottom:62px}
  /* 運用サイクルの図：SPでは幅315pxまで縮み、図の中の文字が実寸7〜10pxになる。
     同じ内容がすぐ下のHTMLの見出しにあるので、図の中の説明文字は隠す（中央の1本だけ残す）。 */
  .ckweb .cycle svg text{display:none}
  .ckweb .cycle svg text.cy-center{display:block;font-size:30px}
  .ckweb .plan3,.ckweb .addon__grid,.ckweb .rcards,.ckweb .voice .vcards,.ckweb .column .cl__grid,.ckweb .incl__l,.ckweb .opt__l,.ckweb .flowlist,.ckweb .online .onl-photos,.ckweb .result .nums{position:relative}
  /* 端を少し見せて「まだ続く」ことを示す */
  .ckweb .plan3 > :last-child,.ckweb .addon__grid > :last-child,.ckweb .rcards > :last-child,.ckweb .voice .vcards > :last-child,.ckweb .column .cl__grid > :last-child,.ckweb .incl__l > :last-child,.ckweb .opt__l > :last-child,.ckweb .flowlist > :last-child,.ckweb .online .onl-photos > :last-child,.ckweb .result .nums > :last-child{margin-right:5vw}
  /* 横に寝かせたので折りたたみは外す */
  .ckweb .price .pl{height:auto}
}
@media screen and (min-width:1024px){
  /* PCでも縦に伸びる並びは横スライドにする（サービス10種） */
  .ckweb .svgrid{display:flex;overflow-x:auto;gap:20px;scroll-snap-type:x mandatory;
    padding:6px 0 18px;scrollbar-width:none}
  .ckweb .svgrid::-webkit-scrollbar{display:none}
  .ckweb .svgrid > *{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start}
  .ckweb .service .hint{display:flex}
}

/* ---------- 自社の成果（圏外→現在） ---------- */
.ckweb .r3big{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 44px}
.ckweb .r3big__i{background:#fff;border:1px solid var(--c-border);border-radius:8px;padding:26px 28px 24px}
.ckweb .r3big__k{margin:0 0 14px;font-family:"Oswald",sans-serif;font-size:2.0rem;font-weight:700;
  letter-spacing:.1em;color:var(--c-cobalt);display:flex;align-items:baseline;gap:10px}
.ckweb .r3big__k span{font-family:"Zen Kaku Gothic New",sans-serif;font-size:1.25rem;font-weight:700;color:var(--c-muted);letter-spacing:.04em}
.ckweb .r3big__v{margin:0 0 8px;display:flex;align-items:baseline;gap:6px;
  font-size:1.6rem;font-weight:700;color:var(--c-muted);line-height:1}
.ckweb .r3big__v i{display:inline-block;width:22px;height:10px;margin:0 4px;
  border-top:2px solid var(--c-sky);border-right:2px solid var(--c-sky);transform:rotate(45deg) scale(.8)}
.ckweb .r3big__v b{font-family:"Oswald",sans-serif;font-size:5.4rem;font-weight:600;color:var(--c-cobalt);letter-spacing:.01em}
.ckweb .r3big__v small{font-size:1.8rem;font-weight:700;color:var(--c-ink)}
.ckweb .meo-rate{display:flex;align-items:baseline;gap:6px;margin:4px 0 6px}
.ckweb .meo-rate b{font-size:5.0rem;font-weight:600;color:var(--c-cobalt);line-height:1}
.ckweb .meo-rate small{font-size:1.8rem;font-weight:700;color:var(--c-cobalt)}
.ckweb .meo-rate span{font-size:1.3rem;font-weight:700;color:var(--c-muted);margin-left:4px}
.ckweb .meo-sum{font-size:1.3rem;line-height:1.9;color:var(--c-slate);margin:0 0 16px}
.ckweb .meo-sum b{font-weight:700;color:var(--c-ink)}
.ckweb .r3big__n{margin:0;font-size:1.25rem;color:var(--c-muted)}

.ckweb .r3grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.ckweb .result3 .r3{background:#fff;border:1px solid var(--c-border);border-radius:8px;padding:30px 30px 26px}
.ckweb .result3 .r3 h3{font-family:"Oswald",sans-serif;font-size:2.4rem;font-weight:700;letter-spacing:.1em;
  color:var(--c-cobalt);margin:0 0 12px;display:flex;align-items:baseline;gap:12px}
.ckweb .result3 .r3 h3 span{font-family:"Zen Kaku Gothic New",sans-serif;font-size:1.3rem;font-weight:700;
  color:var(--c-muted);letter-spacing:.04em}
.ckweb .result3 .r3__t{font-size:1.3rem;line-height:1.95;color:var(--c-slate);margin:0 0 20px}
.ckweb .rbars{display:grid;gap:14px;margin:0 0 18px}
.ckweb .rb{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.ckweb .rb__k{grid-column:1 / -1;font-size:1.3rem;font-weight:700;color:var(--c-ink)}
.ckweb .rb__before{font-size:1.15rem;font-weight:700;color:var(--c-muted);grid-column:1;grid-row:2;
  justify-self:start;padding-right:8px}
.ckweb .rb__g{grid-column:1;grid-row:2;height:12px;background:var(--c-blue);border-radius:2px;overflow:hidden;
  margin-left:34px}
.ckweb .rb__g i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,#2f7fd1,#0f4aa2);transition:width 1.2s var(--ease)}
.ckweb .on .rb__g i,.ckweb .rb.on .rb__g i{width:var(--w)}
.ckweb .rb__v{grid-column:2;grid-row:2;font-size:1.2rem;font-weight:700;color:var(--c-ink);white-space:nowrap}
.ckweb .rb__v b{font-family:"Oswald",sans-serif;font-size:2.0rem;font-weight:600;color:var(--c-cobalt);margin-right:2px}
.ckweb .result3 .r3__l{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.ckweb .result3 .r3__l li{font-size:1.3rem;line-height:1.85;color:var(--c-slate);padding-left:18px;position:relative}
.ckweb .result3 .r3__l li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:6px;
  border-left:2.2px solid var(--c-cobalt);border-bottom:2.2px solid var(--c-cobalt);transform:rotate(-45deg)}
.ckweb .result3 .r3__l li b{color:var(--c-ink);font-weight:700}
.ckweb .result3 .r3__s{margin:auto 0 0;font-size:1.2rem;line-height:1.9;color:var(--c-muted);
  padding-top:14px;border-top:1px solid var(--c-border)}
.ckweb .result3 .r3__s b{color:var(--c-ink)}
.ckweb .result3 .src{margin:30px 0 0;font-size:1.25rem;color:var(--c-muted);line-height:1.95}

@media screen and (max-width:1023px){
  .ckweb .r3big{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;
    padding:4px 5vw 12px;margin:0 -5vw 26px;scrollbar-width:none}
  .ckweb .r3big::-webkit-scrollbar{display:none}
  .ckweb .r3big__i{flex:0 0 74%;scroll-snap-align:center;padding:20px 20px 18px}
  .ckweb .r3big__v b{font-size:4.2rem}
  .ckweb .r3grid{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;
    padding:4px 5vw 14px;margin:0 -5vw;scrollbar-width:none}
  .ckweb .r3grid::-webkit-scrollbar{display:none}
  .ckweb .r3grid > *{flex:0 0 86%;scroll-snap-align:center;min-width:0}
  .ckweb .result3 .r3{padding:22px 20px 20px}
}

/* ---------- 行末の1文字落ち（孤立文字）を出さない ----------
   「出発で／す。」のように最終行が1〜2文字だけになるのを防ぐ。
   ・balance = 見出しの行数を保ったまま各行の長さを揃える
   ・pretty  = 本文の最終行が極端に短くならないよう折り返しを調整
   ・line-break:strict = 和文の禁則を厳格に（既定のautoは行頭「ー」等を許す）
   対応していないブラウザでは従来どおり折り返すだけで、崩れない。 */
.ckweb h1,.ckweb h2,.ckweb h3,.ckweb h4,.ckweb .intro__copy,.ckweb .r3big__k,.ckweb .hero .hshoulder,.ckweb .rc h3,.ckweb .pl__k,.ckweb .sv h3,.ckweb .ad h3{
  /* balance は各行の長さを揃えるだけなので、2行見出しでは2行目が2〜3文字になることがある。
     pretty は「最終行が極端に短くならない」ことを目的にした指定なのでこちらを使う。
     あわせて body の overflow-wrap:anywhere を見出しだけ解く（語の途中で割らせない）。 */
  text-wrap:pretty;
  overflow-wrap:normal;word-break:normal}
.ckweb p,.ckweb li,.ckweb dd,.ckweb dt,.ckweb figcaption,.ckweb .lead,.ckweb .shots-cap,.ckweb .r3__t,.ckweb .r3__s,.ckweb .ad__t,.ckweb .sv__t,.ckweb .fl p,.ckweb .incl__l li,.ckweb .opt__l li i{
  /* pretty は overflow-wrap:anywhere が効いている要素では無視される（body で anywhere を
     指定しているため、本文にも normal を戻さないと pretty が一切働かない）。
     日本語本文は文字単位で折り返せるので normal でも溢れない（横スクロールは実測で確認）。 */
  text-wrap:pretty;
  overflow-wrap:normal;word-break:normal}
.ckweb{line-break:strict;overflow-wrap:anywhere;word-break:normal}
/* 単位や短い語が行頭に落ちないようにする */
.ckweb span.nb,.ckweb span.wf{white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
.ckweb br.brsp{display:none}
.ckweb .fig .u,.ckweb .fig .pre,.ckweb .achv__n small,.ckweb .r3big__v small,.ckweb .rb__v,.ckweb .pl__v small{white-space:nowrap}

/* ---------- 関連記事（2段を逆方向に流す） ----------
   参考サイトの column-loop と同じ作法。hover と focus で止める。
   DOMには全件あるので検索エンジンからは普通に読める。 */
.ckweb .clflow{display:grid;gap:16px;margin:0 0 42px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ckweb .clrow{overflow:hidden}
.ckweb .clrow__t{display:flex;width:max-content;gap:16px;padding-left:16px}
.ckweb .clrow--ltr .clrow__t{animation:clflowL 72s linear infinite}
.ckweb .clrow--rtl .clrow__t{animation:clflowR 84s linear infinite}
.ckweb .clflow:hover .clrow__t,.ckweb .clflow:focus-within .clrow__t{animation-play-state:paused}
@keyframes clflowL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes clflowR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ckweb .column .cl{flex:0 0 360px;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--c-border);border-radius:8px;padding:22px 24px 20px;text-decoration:none;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.ckweb .column .cl:hover{box-shadow:0 8px 20px rgba(10,46,92,.12);transform:translateY(-3px);border-color:var(--c-sky)}
.ckweb .column .cl__meta{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.ckweb .column .cl__cat{font-family:"Oswald",sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:.1em;
  color:#fff;background:var(--c-cobalt);padding:3px 10px}
.ckweb .column .cl__meta time{font-family:"Oswald",sans-serif;font-size:1.25rem;color:var(--c-muted)}
.ckweb .column .cl h3{font-size:1.5rem;font-weight:700;line-height:1.75;margin:0 0 14px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ckweb .column .cl__go{font-size:1.3rem;font-weight:700;color:var(--c-cobalt);display:inline-flex;align-items:center;gap:7px}
.ckweb .column .cl__go::after{content:"";width:7px;height:7px;border-top:1.8px solid currentColor;
  border-right:1.8px solid currentColor;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.ckweb .clrow__t{animation:none}}

@media screen and (max-width:1023px){
  .ckweb .clflow{gap:12px;margin-bottom:30px}
  .ckweb .clrow__t{gap:12px;padding-left:12px}
  .ckweb .column .cl{flex:0 0 268px;padding:18px 18px 16px}
  .ckweb .column .cl h3{font-size:1.4rem;-webkit-line-clamp:3}
  .ckweb br.brsp{display:inline}
}


/* ---------- サービスページ固有（/web/ には無い箱） ----------
   /web/ のFV右側は端末モック（.shots）だが、サービスページは線画1枚なので専用の箱を持つ。 */
.ckweb .hero .hfig{position:relative}
.ckweb .hero .hfig svg{width:100%;height:auto;display:block;overflow:visible}
.ckweb .works .wmore-c{text-align:center;margin-top:34px}
@media (max-width:1023px){
  .ckweb .hero .hfig{margin:22px auto 0;max-width:520px}
  .ckweb .works .wmore-c{margin-top:24px}
}


/* ---------- FVのサービスロゴ（ラクラクMEO/SEO/AIO/UNYO・KURUKURU） ----------
   ロゴは白地に描かれた画像なので、地の白ごと置いて余白で見せる。
   枠も影も付けない（付けるとバナーに見える）。 */
.ckweb .hero .hbrand{margin:0 0 14px}
.ckweb .hero .hbrand img{display:block;width:auto;height:72px;max-width:100%}
@media (max-width:1023px){
  .ckweb .hero .hbrand{margin:0 0 10px}
  .ckweb .hero .hbrand img{height:54px}
}
@media (max-width:480px){
  .ckweb .hero .hbrand img{height:46px}
}


/* 端末モックの中身は画像だけでなくSVGでも置ける（地図のようにスクショを使えない場合） */
.ckweb .dev-pc__screen svg.devscreen,.ckweb .dev-sp__screen svg.devscreen{width:100%;height:100%;display:block}

/* FVの絵（線画1枚ではなく作り込んだ図）は枠いっぱいに置く */
.ckweb .hero .hfig--art svg{width:100%;height:auto;display:block;border-radius:10px;overflow:hidden}
@media (max-width:1023px){ .ckweb .hero .hfig--art{max-width:560px;margin:20px auto 0} }

/* 比較表のセクション（他の選択肢と並べる） */
.ckweb .cmpsec{position:relative}
.ckweb .cmpsec .cmp{margin-top:8px}


/* ============================================================
   サービスページの崩れ直し（2026-09-17・実測で出たものだけ）
   ============================================================ */

/* ① 関連サービスの行：SPで文字が折り返せず、行ごと枠からはみ出していた。
      nowrap はサービス名（b）だけに残し、行は2段に組み替える。 */
@media (max-width:1023px){
  .inds .indlist li>a{white-space:normal;flex-wrap:wrap;row-gap:2px;
    padding-top:16px;padding-bottom:16px}
  .inds .indlist a>b{margin-left:0;padding-left:0;flex:1 1 100%;
    order:3;font-size:1.6rem;white-space:normal}
  .inds .indlist a::after{order:4;margin-left:auto}
  .inds .indlist .ind__ic{order:1}
}

/* ② FVの左段：中の spec（3項目の横並び）が縮まず、SPで段そのものがはみ出していた。
      grid の子は既定 min-width:auto なので 0 を明示し、spec は折り返す。 */
.ckweb .hero .hcol{min-width:0}
.ckweb .hero .hfig,.ckweb .hero .shots{min-width:0}
@media (max-width:1023px){
  /* SPでは3列のグリッド。既定の 1fr は「中身より小さくならない」ので、
     文言の長いページ（人材紹介など）で段ごとはみ出していた。minmax(0,1fr) で縮ませる。 */
  .ckweb .hero .spec{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ckweb .hero .spec > div{min-width:0;padding-right:14px;margin-right:0}
  .ckweb .hero .spec dd{font-size:1.3rem;line-height:1.45;overflow-wrap:anywhere}
  .ckweb .hero .spec dd b{font-size:2rem;overflow-wrap:anywhere;word-break:normal;line-height:1.2}
}
@media (max-width:480px){
  .ckweb .hero .spec dd{font-size:1.2rem}
  .ckweb .hero .spec dd b{font-size:1.8rem}
}

/* ③ 悩みカードの右段：左段のほうが背が高いと、右段の下に100px以上の空きが出ていた。
      「公開後に見る数字」を下端に寄せて、面を埋める。 */
.ckweb .pain .pr-r{display:flex;flex-direction:column}
.ckweb .pain .pr-r ul{margin-bottom:0}
.ckweb .pain .pr-r .kpi{margin-top:auto}

/* 料金カードは高さが揃う。中身の少ないカードで下に空きが出るので、
   余りは箇条書きが持つ（カードの外に空白帯ができないようにする）。 */
.ckweb .plan3 .pl{display:flex;flex-direction:column}
.ckweb .plan3 .pl__l{flex:1 1 auto}

/* SPの最終CTA見出しは「まずは、」で改行させる（放っておくと「から。」だけ落ちる） */
@media (max-width:767px){ br.brsp{display:inline} }

/* FVの数値セルは3列で幅が狭い。単位が行末に落ちないよう1行に収める。 */
@media (max-width:480px){
  .hero .spec dd{white-space:nowrap;font-size:1.15rem}
  .hero .spec dd b{font-size:1.6rem}
}


/* ============================================================
   記事ページ（コラム）
   /web/ と同じ書体・色・余白で、本文が読める幅に置く。
   ============================================================ */
.ckweb .art{padding:0 0 10px}
.ckweb .art .crumb{font-size:1.25rem;color:var(--c-muted);padding:22px 0 0;letter-spacing:.02em}
.ckweb .art .crumb a{color:var(--c-muted);text-decoration:none}
.ckweb .art .crumb a:hover{color:var(--c-cobalt);text-decoration:underline}
.ckweb .art .crumb span{margin:0 8px;color:var(--c-border-cool)}

.ckweb .art__head{max-width:860px;margin:0 auto;padding:26px 0 0}
.ckweb .art__meta{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.ckweb .art__cat{font-family:"Oswald",sans-serif;font-size:1.2rem;font-weight:600;letter-spacing:.1em;
  color:#fff;background:var(--c-cobalt);padding:5px 12px;border-radius:3px}
.ckweb .art__meta time{font-family:"Oswald",sans-serif;font-size:1.3rem;color:var(--c-muted);letter-spacing:.04em}
.ckweb .art h1{font-size:3.4rem;font-weight:800;line-height:1.5;letter-spacing:.01em;margin:0 0 22px}
.ckweb .art__lead{font-size:1.6rem;line-height:2.05;color:var(--c-slate);margin:0 0 30px}
.ckweb .art__eye{position:relative;border-radius:10px;overflow:hidden;background:var(--c-pale);
  aspect-ratio:1200/630;margin:0 0 6px}
.ckweb .art__eye svg{width:100%;height:100%;display:block}

/* 本文 */
.ckweb .art__body{max-width:860px;margin:0 auto}
.ckweb .art__body > h2{font-size:2.6rem;font-weight:800;line-height:1.55;margin:64px 0 22px;
  padding:0 0 16px;border-bottom:2px solid var(--c-cobalt);letter-spacing:.01em}
.ckweb .art__body > h3{font-size:2rem;font-weight:700;line-height:1.6;margin:40px 0 14px}
.ckweb .art__body p{font-size:1.6rem;line-height:2.15;color:var(--c-ink);margin:0 0 22px}
.ckweb .art__body p b{font-weight:700}
.ckweb .art__body a{color:var(--c-cobalt);font-weight:700}
.ckweb .art__body ul,.ckweb .art__body ol{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:12px}
.ckweb .art__body ul li{font-size:1.55rem;line-height:1.95;padding-left:28px;position:relative;color:var(--c-ink)}
.ckweb .art__body ul li::before{content:"";position:absolute;left:2px;top:.62em;width:14px;height:9px;
  border-left:3px solid var(--c-cobalt);border-bottom:3px solid var(--c-cobalt);transform:rotate(-45deg)}
.ckweb .art__body ol{counter-reset:ao}
.ckweb .art__body ol li{counter-increment:ao;font-size:1.55rem;line-height:1.95;padding-left:40px;position:relative}
.ckweb .art__body ol li::before{content:counter(ao);position:absolute;left:0;top:.15em;width:26px;height:26px;
  border-radius:50%;background:var(--c-cobalt);color:#fff;font-family:"Oswald",sans-serif;
  font-size:1.4rem;font-weight:600;display:grid;place-items:center}
.ckweb .art__body table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:1.45rem}
.ckweb .art__body th,.ckweb .art__body td{border:1px solid var(--c-border);padding:14px 16px;text-align:left;line-height:1.8}
.ckweb .art__body th{background:var(--c-pale);font-weight:700;width:30%}
.ckweb .art__body blockquote{margin:0 0 26px;padding:22px 26px;background:var(--c-pale);border-radius:8px;
  font-size:1.5rem;line-height:2;color:var(--c-slate)}
.ckweb .art__note{margin:0 0 28px;padding:22px 26px;background:#fff;border:1px solid var(--c-border);
  border-radius:8px}
.ckweb .art__note b{display:block;font-size:1.4rem;font-weight:700;color:var(--c-cobalt);margin:0 0 8px}
.ckweb .art__note p{font-size:1.45rem;line-height:1.95;margin:0}

/* 目次 */
.ckweb .toc{max-width:860px;margin:36px auto 0;background:#fff;border:1px solid var(--c-border);
  border-radius:8px;padding:28px 30px}
.ckweb .toc__t{font-size:1.6rem;font-weight:700;margin:0 0 16px;padding:0 0 12px;
  border-bottom:1px solid var(--c-border)}
.ckweb .toc ol{list-style:none;margin:0;padding:0;counter-reset:tc;display:grid;gap:10px}
.ckweb .toc li{counter-increment:tc;position:relative;padding-left:34px}
.ckweb .toc li::before{content:counter(tc,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:"Oswald",sans-serif;font-size:1.3rem;font-weight:600;color:var(--c-sky)}
.ckweb .toc a{font-size:1.5rem;line-height:1.8;color:var(--c-ink);text-decoration:none}
.ckweb .toc a:hover{color:var(--c-cobalt);text-decoration:underline}

/* 記事の中のCTA */
.ckweb .art .incta{max-width:860px;margin:44px auto;background:linear-gradient(180deg,#1257bb,#0f4aa2);
  border-radius:10px;padding:34px 36px;color:#fff;position:relative;overflow:hidden}
.ckweb .art .incta p.k{font-size:1.3rem;font-weight:700;letter-spacing:.14em;color:#bcd6f5;margin:0 0 10px}
.ckweb .art .incta h3{font-size:2.2rem;font-weight:800;line-height:1.55;margin:0 0 12px;color:#fff}
.ckweb .art .incta p{font-size:1.45rem;line-height:1.95;color:#dbe8fa;margin:0 0 20px}
.ckweb .art .incta .ckbtn,.ckweb .art .incta .ckbtn{background:#fff;color:var(--c-cobalt);border-color:#fff}
.ckweb .art .incta .ckbtn--sub{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}

/* 監修・関連 */
.ckweb .art__author{max-width:860px;margin:56px auto 0;display:flex;gap:20px;align-items:flex-start;
  background:#fff;border:1px solid var(--c-border);border-radius:8px;padding:26px 28px}
.ckweb .art__author img{width:64px;height:64px;flex:0 0 auto;border-radius:6px;object-fit:contain;background:var(--c-pale)}
.ckweb .art__author b{display:block;font-size:1.5rem;font-weight:700;margin:0 0 6px}
.ckweb .art__author p{font-size:1.4rem;line-height:1.9;color:var(--c-slate);margin:0}

@media (max-width:1023px){
  .ckweb .art h1{font-size:2.5rem;line-height:1.55}
  .ckweb .art__lead{font-size:1.5rem;line-height:1.95}
  .ckweb .art__body > h2{font-size:2.1rem;margin:46px 0 18px}
  .ckweb .art__body > h3{font-size:1.8rem;margin:30px 0 12px}
  .ckweb .art__body p,.ckweb .art__body ul li,.ckweb .art__body ol li{font-size:1.5rem;line-height:2}
  .ckweb .toc,.ckweb .art__note,.ckweb .art .incta,.ckweb .art__author{padding:22px 20px}
  .ckweb .art .incta h3{font-size:1.9rem}
  .ckweb .art__author{flex-direction:column;gap:14px}
  .ckweb .art__body table{font-size:1.35rem}
  .ckweb .art__body th,.ckweb .art__body td{padding:10px 12px}
  .ckweb .art__body th{width:38%}
}

/* 関連記事のサムネイル（実物は画像。デザイン案では小さな図で代用） */
.ckweb .column .cl a{display:flex;flex-direction:column;padding:0;height:100%}
.ckweb .column .cl__ph{display:grid;place-items:center;aspect-ratio:16/9;background:var(--c-pale);
  border-radius:5px 5px 0 0;margin:0 0 20px}
.ckweb .column .cl__ph svg{width:58px;height:58px;display:block}
.ckweb .column .cl__meta{padding:0 24px;margin:0 0 12px}
.ckweb .column .cl h3{padding:0 24px 26px}

/* プランが2つのページ（ラクラクSEO・AIO・UNYO）は2列で中央に置く */
.ckweb .plan3--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:840px;margin-left:auto;margin-right:auto}
@media (max-width:1023px){ .ckweb .plan3--2{max-width:none} }

.ckweb /* 行末の孤立文字を直すJSが入れる塊は、必ずインラインで扱う。
   セクション側に `.x span{display:block}.ckweb ` があると塊が独立した行になり、
   直したはずの文字がそのまま行末に残る（.onl-cap で実際に起きた）。 */
/* 塊の中に入った要素も必ずインラインにする。
   `.onl-cap span{display:block}.ckweb ` のような規則があると、切り出した側がブロックになって
   独立した行になり、直したはずの文字がそのまま行末に残る（実際に残った）。 */
span.wf,.ckweb span.nb,.ckweb span.wf *,.ckweb span.nb *{display:inline !important}

/* 丸の中の矢印（シェブロン）は、線の太さぶん右に寄って見えるので1px戻す */
.ckweb .ckbtn .arw svg{transform:translateX(-0.5px)}


/* ---------- 対応エリアの一覧（市区町村を並べる） ---------- */
.ckweb .arealist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px}
.ckweb .arealist li{border-bottom:1px solid var(--c-border-cool)}
.ckweb .arealist a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 2px;font-size:1.5rem;font-weight:700;color:var(--c-ink);text-decoration:none;
  transition:color .25s var(--ease),padding .25s var(--ease)}
.ckweb .arealist a small{font-size:1.25rem;font-weight:500;color:var(--c-muted);margin-left:auto;padding-left:8px}
.ckweb .arealist a::after{content:"";width:8px;height:8px;flex:0 0 auto;
  border-top:2px solid var(--c-sky);border-right:2px solid var(--c-sky);transform:rotate(45deg)}
.ckweb .arealist a:hover{color:var(--c-cobalt);padding-left:8px}
.ckweb .areagrp{margin:0 0 46px}
.ckweb .areagrp__t{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;
  padding:0 0 12px;border-bottom:2px solid var(--c-cobalt)}
.ckweb .areagrp__t b{font-size:2rem;font-weight:800;letter-spacing:.04em}
.ckweb .areagrp__t span{font-size:1.35rem;color:var(--c-muted);font-weight:700}
.ckweb .areagrp__n{margin-left:auto;font-family:"Oswald",sans-serif;font-size:1.6rem;font-weight:600;color:var(--c-sky)}
.ckweb .prefnote{font-size:1.4rem;line-height:2;color:var(--c-slate);margin:0 0 22px}
@media (max-width:1023px){
  .ckweb .arealist{grid-template-columns:repeat(2,1fr);gap:0 18px}
  .ckweb .arealist a{font-size:1.4rem;padding:14px 2px}
  .ckweb .areagrp__t b{font-size:1.7rem}
  .ckweb .areagrp{margin:0 0 34px}
}
@media (max-width:480px){
  .ckweb .arealist{grid-template-columns:1fr}
}

/* ---------- SPの読みやすさ・押しやすさ（2026-09-18 実測で出たもの） ---------- */
@media (max-width:1023px){
  /* 大きな数字に添える単位が9pxまで落ちていた */
  .result .fig .u,.fig .u{font-size:max(1.2rem,.34em)}
  /* メールのリンクは指で押せる高さにする */
  .ckfc .tel a.mail{display:inline-block;padding:10px 4px;min-height:40px;line-height:20px}
  .ckfc .tel a[href^="tel:"]{display:inline-block;padding:6px 2px}
}

@media (max-width:1023px){
  /* 大きな数字に添える単位が9pxまで落ちていた（親30px×.30em） */
  .ckweb .hero .stat__v .u,.ckweb .result .fig .u,.ckweb .fig .u{font-size:max(1.2rem,.30em)}
  /* 指で押せる高さにする */
  .ckweb .ckfc .tel a{display:inline-block;min-height:40px;padding:9px 4px;line-height:22px}
  .ckweb .logos a,.ckweb .clients a,.ckweb .cslide a{min-height:40px;display:inline-flex;align-items:center}
}

@media (max-width:1023px){
  /* お知らせの行とフッターのメールが、指で押すには低かった（28px／31px） */
  .ckweb .nw__list a{min-height:44px}
  .ckweb .fmail a,.ckweb .ftop .fbrand a{display:inline-block;min-height:40px;padding:9px 2px;line-height:22px}
}

/* 記事の本文に入れる図。文章だけで読ませず、要点は絵でも1度出す */
.ckweb .art__fig{margin:30px 0 34px;padding:0}
.ckweb .art__fig svg{width:100%;height:auto;display:block;border-radius:10px}
.ckweb .art__fig figcaption{margin:12px 2px 0;font-size:1.3rem;line-height:1.8;color:var(--c-slate)}
@media (max-width:1023px){
  /* 図は縮めると文字が読めなくなる。横にスライドして原寸に近い大きさで見せる */
  .ckweb .art__fig{margin:24px 0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ckweb .art__fig svg{min-width:560px}
  .ckweb .art__fig figcaption{font-size:1.25rem}
}

/* パンくず。いま自分がどこにいるかを出し、上の階層へ戻れるようにする */
.ckweb .crumb{background:var(--c-pale);border-bottom:1px solid var(--c-border)}
.ckweb .crumb .ckinr{padding-top:12px;padding-bottom:12px}
.ckweb .crumb ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:0 6px;font-size:1.25rem;line-height:1.7;color:var(--c-slate)}
.ckweb .crumb li{display:flex;align-items:center;gap:0 6px}
.ckweb .crumb li + li::before{content:"";width:6px;height:6px;flex:none;
  border-top:1.6px solid var(--c-border-cool);border-right:1.6px solid var(--c-border-cool);
  transform:rotate(45deg)}
.ckweb .crumb a{color:var(--c-cobalt);text-decoration:none}
.ckweb .crumb a:hover{text-decoration:underline}
.ckweb .crumb span[aria-current]{color:var(--c-ink)}
@media (max-width:1023px){
  .ckweb .crumb ol{font-size:1.2rem}
  .ckweb .crumb .ckinr{padding-top:10px;padding-bottom:10px}
}

@media (max-width:1023px){
  /* スマホでは指で押せる高さ（40px）を確保する。帯が高くならないよう上下の余白は詰める */
  .ckweb .crumb .ckinr{padding-top:2px;padding-bottom:2px}
  .ckweb .crumb ol{gap:0 4px}
  .ckweb .crumb a,.ckweb .crumb span{display:inline-flex;align-items:center;min-height:40px}
}

/* 導入の進め方と、導入したら変わること */
.ckweb .adopt .adwrap{display:grid;grid-template-columns:1.05fr 1fr;gap:0 56px;margin:40px 0 0;align-items:start}
.ckweb .adopt .adcol__t{font-size:1.7rem;font-weight:700;color:var(--c-ink);margin:0 0 22px;
  padding-bottom:14px;border-bottom:1px solid var(--c-border)}
.ckweb .adopt .ad3l{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ckweb .adopt .ad3{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 20px;
  padding:0 0 26px;position:relative}
.ckweb .adopt .ad3:last-child{padding-bottom:0}
.ckweb .adopt .ad3::before{content:"";position:absolute;left:25px;top:58px;bottom:6px;width:2px;
  background:var(--c-border)}
.ckweb .adopt .ad3:last-child::before{display:none}
.ckweb .adopt .ad3__no{margin:0;display:grid;place-items:center;gap:1px;width:52px;height:52px;
  border-radius:50%;background:var(--c-cobalt);color:#fff;line-height:1}
.ckweb .adopt .ad3__no b{font-family:var(--f-en);font-size:1.7rem;font-weight:600}
.ckweb .adopt .ad3__no span{font-size:1.2rem;letter-spacing:.04em;opacity:.85;line-height:1}
.ckweb .adopt .ad3__b h3{font-size:1.75rem;font-weight:700;margin:6px 0 8px;line-height:1.6}
.ckweb .adopt .ad3__b p{font-size:1.4rem;line-height:1.95;color:var(--c-slate);margin:0}
.ckweb .adopt .ad3__d{margin:8px 0 0 !important;font-size:1.3rem !important;font-weight:700;
  color:var(--c-cobalt) !important}
.ckweb .adopt .ad3__note{margin:22px 0 0;font-size:1.3rem;line-height:1.9;color:var(--c-muted)}
.ckweb .adopt .adml{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ckweb .adopt .adml li{background:#fff;border:1px solid var(--c-border);border-radius:8px;
  padding:20px 24px 22px;position:relative;padding-left:58px}
.ckweb .adopt .adml li::before{content:"";position:absolute;left:24px;top:27px;width:14px;height:9px;
  border-left:2.6px solid var(--c-cobalt);border-bottom:2.6px solid var(--c-cobalt);
  transform:rotate(-45deg)}
.ckweb .adopt .adm__t{font-size:1.6rem;font-weight:700;color:var(--c-ink);margin:0 0 6px;line-height:1.6}
.ckweb .adopt .adm__d{font-size:1.35rem;line-height:1.9;color:var(--c-slate);margin:0}
@media (max-width:1023px){
  .ckweb .adopt .adwrap{grid-template-columns:1fr;gap:40px}
  .ckweb .adopt .ad3{grid-template-columns:60px minmax(0,1fr);gap:0 14px}
  .ckweb .adopt .ad3::before{left:22px;top:52px}
  .ckweb .adopt .ad3__no{width:46px;height:46px}
  .ckweb .adopt .ad3__no b{font-size:1.5rem}
  .ckweb .adopt .ad3__b h3{font-size:1.6rem}
  .ckweb .adopt .adml li{padding:18px 20px 20px 50px}
  .ckweb .adopt .adml li::before{left:20px;top:25px}
}

/* FVの図の点線が、向きに沿って流れる。読む邪魔にならない速さにする */
@keyframes ck-dash{to{stroke-dashoffset:-44}}
.ckweb .hero .hfig svg [stroke-dasharray]{animation:ck-dash 2.4s linear infinite}
.ckweb .hero .shots svg [stroke-dasharray]{animation:ck-dash 2.4s linear infinite}
/* 図の中のチェックや印は、現れたときに一度だけ跳ねる */
@keyframes ck-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.ckweb .hero .hfig--art svg > g[transform] > circle:first-child{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .ckweb .hero .hfig svg [stroke-dasharray],.ckweb .hero .shots svg [stroke-dasharray]{animation:none}
}

/* 日本地図（都道府県タイルマップ） */
.ckweb .jpwrap{margin:36px 0 0;padding:0}
/* 角丸はSVGの中の面で持たせる（入れ子の角丸カードは §1-19 で禁止） */
.ckweb .jpwrap svg{width:100%;height:auto;display:block}
.ckweb svg.jpmap{background:transparent}
.ckweb .jpsec .ckinr,.ckweb .gyosec .ckinr{position:relative}
.ckweb .jpnote{margin:20px 0 0;font-size:1.35rem;line-height:1.95;color:var(--c-slate)}
@media (max-width:1023px){
  /* 縮めると県名が読めなくなる。横にスライドして原寸に近い大きさで見せる */
  .ckweb .jpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ckweb .jpwrap svg{min-width:700px}
}

/* 対応業種 */
.ckweb .gyolist{list-style:none;margin:36px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ckweb .gyolist .gyo{background:#fff;border:1px solid var(--c-border);border-radius:10px;
  padding:24px 26px 26px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px}
.ckweb .gyolist .gyo__ic{grid-row:1 / span 2;width:48px;height:48px;display:grid;place-items:center;
  background:var(--c-pale);border-radius:10px}
.ckweb .gyolist .gyo__ic svg{width:28px;height:28px;display:block}
.ckweb .gyolist .gyo__t{margin:0;font-size:1.6rem;font-weight:700;color:var(--c-ink);line-height:1.55}
.ckweb .gyolist .gyo__d{margin:4px 0 0;font-size:1.32rem;line-height:1.9;color:var(--c-slate)}
@media (max-width:1023px){
  .ckweb .gyolist{grid-template-columns:1fr;gap:12px}
  .ckweb .gyolist .gyo{padding:20px 20px 22px}
}

/* 台帳の実数 */
.ckweb .cntsec .cnt__t{margin:36px 0 16px;font-size:1.7rem;font-weight:700;color:var(--c-ink);
  padding-bottom:12px;border-bottom:1px solid var(--c-border)}
.ckweb .cntlist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ckweb .cntlist li{background:#fff;border:1px solid var(--c-border);border-radius:8px;
  padding:18px 10px 16px;text-align:center}
.ckweb .cntlist li b{display:block;font-family:var(--f-en);font-size:3.2rem;font-weight:600;
  color:var(--c-cobalt);line-height:1.1}
/* 長い名前は2行で受ける。詰めて1行に収めると11pxまで落ちて読めなくなり、
   ellipsis だと「ランディングページ」が切れる（実測）。
   2行ぶんの高さを常に確保して、1行の枠と2行の枠で数字の位置を揃える。 */
.ckweb .cntlist li span{display:block;margin:6px 0 0;font-size:1.3rem;font-weight:700;
  color:var(--c-slate);line-height:1.35;letter-spacing:-.02em;
  min-height:3.6rem;text-align:center}
.ckweb .cntlist li span[data-long]{font-size:1.2rem;letter-spacing:-.04em}
.ckweb .cntlist--g li b{font-size:2.6rem}
@media (max-width:1023px){
  .ckweb .cntlist{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .ckweb .cntlist li{padding:14px 6px 12px}
  .ckweb .cntlist li b{font-size:2.4rem}
  .ckweb .cntlist li span{font-size:1.2rem;min-height:3.4rem}
}
/* 390pxでは3段だと「ランディングページ」の「ページ」だけが行末に落ちる（実測）。
   2段にして1行で収める。 */
@media screen and (max-width:560px){
  .cntlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}