/* cantik コラム記事ページ デザイン（/web/ に合わせる）
   社長指示 2026-09-28「記事ページのデザインや背景に薄い図解」「CTAのデザインも合わせる」
   置き場＝wp-content/uploads/ck/ （themes/ は一括再デプロイで消えるため・[[seo-critical-values-belong-in-mu-plugin]]）
   外し方＝mu-plugins/cantik-column-design.php を消すだけ。CSSのみでDOMは変更しない。 */

:root{
  --ckc-navy:#0a2e5c; --ckc-cobalt:#0f4aa2; --ckc-mid:#2f7fd1; --ckc-sky:#cfe0f7;
  --ckc-pale:#f7fafe; --ckc-border:#e3eaf5; --ckc-red:#e0394f; --ckc-ink:#1a2b4a;
  --ckc-ease:cubic-bezier(.4,0,.2,1);
}

/* ============ 1. ページ地＋薄い図解 ============ */
/* 本文は下の白カードに載るので、この層が本文の可読性に触れることはない */
/* ★`dm` シート(別セッション)が body 内で `#single{background:#fff!important}` を当てている。
   同詳細度・同!importantでは後勝ちなので `body #single` (1,0,1) で上書きする。
   相手の意図（本文の真後ろを白にして可読性を確保）は、本文を白カードに載せることで保たれる。 */
body #single{ background:var(--ckc-pale) !important; position:relative; overflow:clip; }
body #single::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726%27%20height%3D%2726%27%3E%3Ccircle%20cx%3D%271.6%27%20cy%3D%271.6%27%20r%3D%271.1%27%20fill%3D%27%230f4aa2%27%2F%3E%3C%2Fsvg%3E");
  background-size:26px 26px; background-repeat:repeat;
  opacity:.055;
}
body #single::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20900%27%20fill%3D%27none%27%20stroke%3D%27%230f4aa2%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%280%2C40%29%27%3E%3Crect%20x%3D%275%27%20y%3D%279%27%20width%3D%27110%27%20height%3D%2774%27%20rx%3D%277%27%2F%3E%3Cpath%20d%3D%27M5%2026h110%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2717.5%27%20r%3D%272.3%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2717.5%27%20r%3D%272.3%27%2F%3E%3Ccircle%20cx%3D%2733%27%20cy%3D%2717.5%27%20r%3D%272.3%27%2F%3E%3Crect%20x%3D%2715%27%20y%3D%2736%27%20width%3D%2740%27%20height%3D%2734%27%20rx%3D%274%27%2F%3E%3Cpath%20d%3D%27M65%2039h35M65%2049h35M65%2059h23%27%2F%3E%3Cpath%20d%3D%27M86%2062l16%2016-6%201.6%203.4%207-3.6%201.6-3.4-7-4.6%204z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%201040%27%20fill%3D%27none%27%20stroke%3D%27%230f4aa2%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%280%2C60%29%27%3E%3Cpath%20d%3D%27M12%2078V56M28%2078V44M44%2078V62M60%2078V34%27%2F%3E%3Cpath%20d%3D%27M6%2078h68%27%2F%3E%3Ccircle%20cx%3D%2779%27%20cy%3D%2731%27%20r%3D%2721%27%2F%3E%3Cpath%20d%3D%27M94%2046l14%2014%27%2F%3E%3Cpath%20d%3D%27M70%2031h18M79%2022v18%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%201180%27%20fill%3D%27none%27%20stroke%3D%27%230f4aa2%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%280%2C30%29%27%3E%3Cpath%20d%3D%27M34%2082s22-20%2022-34a22%2022%200%201%200-44%200c0%2014%2022%2034%2022%2034z%27%2F%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2746%27%20r%3D%278%27%2F%3E%3Crect%20x%3D%2764%27%20y%3D%2720%27%20width%3D%2750%27%20height%3D%2734%27%20rx%3D%278%27%2F%3E%3Cpath%20d%3D%27M76%2062l2-8h-4z%27%2F%3E%3Cpath%20d%3D%27M75%2032h28M75%2042h18%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:repeat-y,repeat-y,repeat-y;
  background-position:left -26px top 60px, right -30px top 420px, left -34px top 980px;
  background-size:236px auto, 250px auto, 220px auto;
  opacity:.11;
}
body #single > .inner{ position:relative; z-index:1; }

/* ============ 2. 本文＝白いカード ============ */
/* ★body内に14枚の<style>が積まれており `#single .cell{max-width:820px!important}` がある。
   .cell とは争わず、本文ブロックを負のマージンで外側に広げて、テキストの measure を 820px のまま保つ。
   （card幅 = 820 + 56*2 = 932。inner が 1140 なので収まる） */
#single .single__body{
  max-width:none !important;
  margin:0 -56px !important;
  padding:46px 56px 40px !important;
  background:#fff !important;
  border:1px solid var(--ckc-border) !important;
  border-radius:20px !important;
  box-shadow:0 18px 48px rgba(15,74,162,.07) !important;
}
#single .single__thumb img{ border-radius:14px !important; }

/* ============ 3. 見出しのアクセント ============ */
/* h2 の下罫（#e3eaf5）は既存。その上にコバルトの短いグラデ罫を重ねるだけ。
   ★左の縦罫は §1-19 で外された経緯があるので復活させない。
   ★.dmi の background:none も別セッションの意図的な指定なので触らない。 */
#single .single__body h2{ position:relative; }
#single .single__body h2::after{
  content:''; position:absolute; left:0; bottom:-1px; width:86px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--ckc-cobalt),var(--ckc-mid));
}

/* ============ 4. CTA ============ */
/* ★2026-09-29 実測の結論：コラムのCTAは触らない。既に揃っている。
   経緯＝以前の .meo-cta（角丸10px・矢印なし）は別セッションが
   ck2in / ck2cta / ckcta-main / ckcta-sub / ckcta-arw に置き換え済み。
   実測すると全ボタンが border-radius:999px・白地メインは #fff/#0f4aa2（/web/ の
   .midcta.alt .ckbtn--main と同値）・矢印は ckcta-arw で入っている。
   赤の終点 #e0394f は /web/ のブランド赤トークン --c-red そのもの。
   「青＋赤の2ボタン」はヘッダー・追従バー・メガメニューと共通のサイト規約で、
   /web/ の midcta 仕様（白＋白）を持ち込むほうが不整合になる。
   さらに ck2in-css 側は #single .single__body .ck2in .ckcta-sub に !important を
   二重に掛けており、意図的な指定。上書きすると二重管理になるので入らない。 */

/* ============ 5. SP ============ */
@media screen and (max-width:767px){
  body #single::after{
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20900%27%20fill%3D%27none%27%20stroke%3D%27%230f4aa2%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%280%2C40%29%27%3E%3Crect%20x%3D%275%27%20y%3D%279%27%20width%3D%27110%27%20height%3D%2774%27%20rx%3D%277%27%2F%3E%3Cpath%20d%3D%27M5%2026h110%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2717.5%27%20r%3D%272.3%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2717.5%27%20r%3D%272.3%27%2F%3E%3Ccircle%20cx%3D%2733%27%20cy%3D%2717.5%27%20r%3D%272.3%27%2F%3E%3Crect%20x%3D%2715%27%20y%3D%2736%27%20width%3D%2740%27%20height%3D%2734%27%20rx%3D%274%27%2F%3E%3Cpath%20d%3D%27M65%2039h35M65%2049h35M65%2059h23%27%2F%3E%3Cpath%20d%3D%27M86%2062l16%2016-6%201.6%203.4%207-3.6%201.6-3.4-7-4.6%204z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position:right -60px top 80px;
    background-size:176px auto;
    opacity:.08;
  }
  #single .single__body{
    margin:0 -14px !important;
    padding:24px 15px 28px !important;
    border-radius:16px !important;
  }
  #single .single__body h2::after{ width:64px; }
}