/* ============================================================
   mk-new-parts.css ── 新しく足した部品（2026-08-26）

   既存のデザインは一切変えない。
   新しいクラスだけを定義する。既存クラスには触れない。

   足した部品は3つ
     1 mk-numcard__list   箇条書きが入るカード
     2 mk-faq             開閉するQ&A（<details>を使う。JS不要）
     3 mk-numcard__ico    進め方のアイコン枠（★いまはダミー）
   ============================================================ */


/* ------------------------------------------------------------
   1  mk-numcard__list ── 箇条書き
   既存の .mk-numcard__text に合わせた
     font-size:14px / line-height:24px / font-weight:300
     color:rgba(37,58,79,.82) / margin-top:14px
   ------------------------------------------------------------ */
.mk .mk-numcard__list{
  margin-top:14px;
  padding-left:0;
  list-style:none;
}
.mk .mk-numcard__list li{
  position:relative;
  padding-left:16px;
  font-size:14px;
  line-height:24px;
  font-weight:300;
  color:rgba(37,58,79,.82);
}
.mk .mk-numcard__list li + li{
  margin-top:8px;
}
.mk .mk-numcard__list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:10px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(37,58,79,.42);
}

/* #issue の中では、既存の __text と同じ字間に揃える */
.mk.p-op #issue .mk-numcard__list li{
  letter-spacing:.07em;
}


/* ------------------------------------------------------------
   2  mk-faq ── 開閉するQ&A
   <details>/<summary> を使う。JavaScriptは不要。
   ------------------------------------------------------------ */
.mk .mk-faq{
  max-width:816px;
}

.mk .mk-faq__item{
  border-bottom:1px solid rgba(37,58,79,.14);
}
.mk .mk-faq__item:first-child{
  border-top:1px solid rgba(37,58,79,.14);
}

/* 質問（クリックする場所） */
.mk .mk-faq__q{
  position:relative;
  display:block;
  padding:22px 44px 22px 0;
  font-size:16px;
  line-height:28px;
  font-weight:500;
  letter-spacing:.07em;
  color:#253a4f;
  cursor:pointer;
  list-style:none;      /* Firefox の三角を消す */
}
.mk .mk-faq__q::-webkit-details-marker{
  display:none;         /* Safari/Chrome の三角を消す */
}

/* ＋ / − のマーク */
.mk .mk-faq__q::before,
.mk .mk-faq__q::after{
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  background:rgba(37,58,79,.55);
  transition:transform .2s ease, opacity .2s ease;
}
.mk .mk-faq__q::before{
  width:14px;
  height:1px;
  margin-top:-.5px;
}
.mk .mk-faq__q::after{
  width:1px;
  height:14px;
  margin-top:-7px;
  right:14.5px;
}
.mk .mk-faq__item[open] .mk-faq__q::after{
  transform:scaleY(0);
  opacity:0;
}

/* 答え */
.mk .mk-faq__a{
  padding:0 44px 24px 0;
  font-size:14px;
  line-height:26px;
  font-weight:300;
  letter-spacing:.07em;
  color:rgba(37,58,79,.82);
}

.mk .mk-faq__q:focus-visible{
  outline:2px solid rgba(0,124,200,.6);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .mk .mk-faq__q::before,
  .mk .mk-faq__q::after{ transition:none; }
}


/* ------------------------------------------------------------
   3  mk-numcard__ico ── 進め方のアイコン
   2026-08-26：ダミーの点線をやめ、SVGを埋め込む形にした。
   SVGはcurrentColor、画像生成WebPは画像内の青で表示する。
   ------------------------------------------------------------ */
.mk .mk-numcard__ico{
  display:block;
  width:40px;
  height:40px;
  margin-top:12px;
  color:#007cc8;            /* SVGの線の色。currentColor で効く */
}
.mk .mk-numcard__ico svg,
.mk .mk-numcard__ico img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
/* 悩みカードとトップの強みカード：番号の右上に48pxで置く */
.mk #issue .mk-numcard,
.mk #feature .mk-numcard{
  position:relative;
}
.mk .mk-numcard__ico--card{
  position:absolute;
  top:28px;
  right:28px;
  width:48px;
  height:48px;
  margin:0;
}
.mk .mk-numcard__ico--card + .mk-numcard__title{
  margin-top:54px;
}
/* アイコンが入っていない場合だけ、枠を出す（作業中の目印） */
.mk .mk-numcard__ico:empty{
  border-radius:50%;
  border:1px dashed rgba(37,58,79,.28);
  background:rgba(0,124,200,.05);
}


/* ------------------------------------------------------------
   4  mk-modal ── 事例のモーダル（2026-08-26 追加）
   カードを押すと、その事例の詳細がその場で開く。
   dirbato の型（個別ページを作らず一覧上で開く）に合わせた。
   ------------------------------------------------------------ */
.mk .mk-case--clickable{
  cursor:pointer;
}
.mk .mk-case--clickable:focus-visible{
  outline:2px solid rgba(0,124,200,.6);
  outline-offset:4px;
}

.mk-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.mk-modal.is-open{ display:flex; }

.mk-modal__veil{
  position:absolute;
  inset:0;
  background:rgba(19,38,56,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.mk-modal__box{
  position:relative;
  width:min(816px,100%);
  max-height:min(84vh,900px);
  overflow-y:auto;
  background:#fff;
  border-radius:16px;
  padding:44px 40px 40px;
  box-shadow:0 24px 60px rgba(19,38,56,.24);
}
@media (max-width:640px){
  .mk-modal__box{ padding:32px 20px 28px; border-radius:12px; }
}

.mk-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:rgba(37,58,79,.06);
  cursor:pointer;
}
.mk-modal__close::before,
.mk-modal__close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:15px;
  height:1px;
  margin-left:-7.5px;
  background:rgba(37,58,79,.7);
}
.mk-modal__close::before{ transform:rotate(45deg); }
.mk-modal__close::after{ transform:rotate(-45deg); }
.mk-modal__close:hover{ background:rgba(37,58,79,.12); }

.mk-modal__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}

.mk-modal__title{
  font-size:22px;
  line-height:36px;
  font-weight:500;
  letter-spacing:.07em;
  color:#253a4f;
}
.mk-modal__sub{
  margin-top:8px;
  font-size:14px;
  line-height:24px;
  font-weight:300;
  color:rgba(37,58,79,.7);
}

.mk-modal__body{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid rgba(37,58,79,.14);
}
.mk-modal__body p{
  font-size:14px;
  line-height:28px;
  font-weight:300;
  letter-spacing:.07em;
  color:rgba(37,58,79,.86);
}
.mk-modal__body p + p{ margin-top:16px; }

.mk-modal__foot{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid rgba(37,58,79,.14);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

body.is-modal-open{ overflow:hidden; }


/* ------------------------------------------------------------
   4  記事本文の追加部品（2026-08-26）
   既存の .mk-article の中でだけ使う。既存クラスには触れない。
     mk-cite     出典の引用（mk-quote は26px太字で本文には強すぎるため）
     mk-src      出典の表記（URL・参照日）
     mk-datatable 数字の表（既存 mk-table は th 固定180pxで表に向かない）
   ------------------------------------------------------------ */
.mk .mk-article .mk-cite{
  margin:0 0 24px;padding:20px 24px;
  border-left:4px solid var(--mk-accent);
  background:rgba(37,58,79,.03);border-radius:0 6px 6px 0;
}
.mk .mk-article .mk-cite p{
  margin:0;font-size:16px;line-height:30px;font-weight:300;letter-spacing:.04em;
}
.mk .mk-article .mk-src{
  margin:-8px 0 24px;font-size:13px;line-height:22px;
  font-weight:300;color:rgba(37,58,79,.62);word-break:break-all;
}
.mk .mk-article .mk-src a{color:inherit;text-decoration:underline;}

.mk .mk-article .mk-tablewrap{margin:0 0 24px;overflow-x:auto;}
.mk .mk-article .mk-datatable{
  width:100%;min-width:420px;border-collapse:collapse;
  font-size:15px;letter-spacing:.03em;
}
.mk .mk-article .mk-datatable th,
.mk .mk-article .mk-datatable td{
  padding:13px 16px;border-bottom:1px solid var(--mk-lineL);
  text-align:left;line-height:26px;
}
.mk .mk-article .mk-datatable thead th{
  font-weight:700;border-bottom:2px solid var(--mk-lineL);
  white-space:nowrap;
}
.mk .mk-article .mk-datatable tbody th{font-weight:300;}
.mk .mk-article .mk-datatable .is-num{
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media(max-width:767px){
  .mk .mk-article .mk-cite{padding:16px 18px;}
  .mk .mk-article .mk-datatable th,
  .mk .mk-article .mk-datatable td{padding:11px 12px;font-size:14px;}
}


/* ------------------------------------------------------------
   5  記事サムネの枠を、サムネ画像の比率(1200x630)に合わせる
   既存の .mk-post__pic は他ページでも使うため、
   ★サムネ画像を入れている枠だけに限定して上書きする。
   ------------------------------------------------------------ */
.mk .mk-post__pic:has(img[src*="/thumb/"]){aspect-ratio:1200/630;}
.mk .mk-post--sm .mk-post__pic:has(img[src*="/thumb/"]){aspect-ratio:1200/630;}


/* ------------------------------------------------------------
   6  青帯(s-canary)の中に置いた mk-numcard を白カードにする
   既存の .s-canary .mk-feature{background:#fff;color:#253a4f} と同じ扱い。
   これが無いと、青地に濃紺の文字が乗って読めない。
   ------------------------------------------------------------ */
.mk .s-canary .mk-numcard{background:#fff;border-color:#fff;color:#253a4f;}
.mk .s-canary .mk-numcard__title{color:#253a4f;}
.mk .s-canary .mk-numcard__no{color:rgba(37,58,79,.45);}
.mk .s-canary .mk-numcard__ico{color:var(--mk-accent);}
.mk .s-canary .mk-numcard__list{color:rgba(37,58,79,.82);}


/* ------------------------------------------------------------
   7  Contactの帯の下の余白を詰める（2026-08-26）
   border-radius:120px 0 の右下の丸みと、下135pxの余白が重なって、
   ボタンの下に大きな空白ができていた。
   ------------------------------------------------------------ */
.mk #contact .mk-band{padding-bottom:88px;border-radius:120px 0 0 0;}
/* ★本文の直後に青帯が始まっていたので、上に余白を入れる */
.mk #contact{padding-top:120px;}
@media(max-width:900px){
  .mk #contact .mk-band{padding-bottom:56px;border-radius:60px 0 0 0;}
  .mk #contact{padding-top:64px;}
}


/* ------------------------------------------------------------
   8  事例の絞り込みタブ（押せる見た目にする）
   ------------------------------------------------------------ */
.mk .mk-filter__tab{cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.mk .mk-filter__tab:hover{border-color:var(--mk-accent);color:var(--mk-accent);}
.mk .mk-filter__tab.is-on{background:var(--mk-accent);border-color:var(--mk-accent);color:#fff;}
.mk .mk-filter__tab.is-none{opacity:.38;cursor:default;}
.mk .mk-filter__tab.is-none:hover{border-color:inherit;color:inherit;}
.mk .mk-filter__tab:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px;}
.mk .mk-filter__empty{margin-top:24px;}


/* ------------------------------------------------------------
   9  ヘッダーのドロップダウン内の写真の位置を戻す（2026-08-26）
   mk-base.css で position:absolute（右上に固定）していたものを、
   後から読まれる mk-photo.css の position:relative が打ち消していた。
   そのため写真がメニューの下にはみ出していた。
   ------------------------------------------------------------ */
.mk-pop__pic{
  position:absolute;right:34px;
  top:181px;bottom:50px;             /* ★見出し・一覧リンクより下から始める */
  width:210px;height:auto;
  overflow:hidden;border-radius:10px;
}
/* 写真の列にメニューが重ならないようにする */
.mk-pop__list{padding-right:250px;}
.mk-pop__pic img{width:100%;height:100%;object-fit:cover;display:block;}
.mk-pop--sm .mk-pop__pic{display:none;}


/* ============================================================
   10  レイアウトの調整（2026-08-26）
   ============================================================ */

/* ── 10-1 強みカード（写真つき）────────────────
   riho さん指摘：カード内の余白を増やし、角丸を減らし、画像を大きく。
   実測 padding:30px / radius:12px / 画像が高さの29% だった。 */
.mk .mk-usecard{padding:36px 34px 38px;}   /* ★カードの角丸は元のまま */
.mk .mk-usecard__pic{
  aspect-ratio:425/230;      /* ★425/194 → 縦を伸ばして画像を大きく */
  border-radius:3px;
  margin-bottom:28px;
}
.mk .mk-usecard__pic img{border-radius:3px;}
@media(max-width:900px){
  .mk .mk-usecard{padding:26px 22px 28px;}
}

/* ── 10-2 3つ並びが縦長になるのを防ぐ ──────────
   実測：1024pxで3列のまま1枚253px、縦横比1.72（かなり縦長）だった。
   1100px以下では2列に落とす。 */
@media(max-width:1100px) and (min-width:901px){
  .mk .mk-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ── 10-3 記事ページを読みやすく ─────────────
   実測：本文910px・1行57文字。長すぎて目が戻りにくい。
   目次も270pxで、見出しが折り返していた。 */
.mk .mk-artgrid{gap:56px;}
.mk .mk-artgrid__main .mk-article{max-width:720px;}   /* ★1行あたり44文字前後に */
.mk .mk-artgrid__main .mk-article p{line-height:34px;}
.mk .mk-artgrid__main .mk-article h2{margin-bottom:22px;}
.mk .mk-artgrid__main .mk-article__block + .mk-article__block{margin-top:72px;}


/* ── 10-4 モーダルに画像を入れた（2026-08-26）──────── */
.mk-modal__pic{
  aspect-ratio:4/3;               /* ★画像は1365x1024なので4:3に合わせる */
  overflow:hidden;border-radius:4px;
  margin:0 0 22px;background:var(--mk-lineL);
}
.mk-modal__pic img{width:100%;height:100%;object-fit:contain;display:block;}
.mk-modal__foot{display:flex;flex-wrap:wrap;gap:12px;}


/* ── 10-5 アイコンを生成画像に変えたので、大きくする（2026-08-26）
   40pxだと絵の中身が潰れて判別できなかった。 */
.mk .mk-numcard__ico{width:56px;height:56px;margin-top:14px;}
.mk .mk-numcard__ico--card{width:56px;height:56px;top:26px;right:26px;}
.mk .mk-numcard__ico--card + .mk-numcard__title{margin-top:62px;}
@media(max-width:900px){
  .mk .mk-numcard__ico{width:48px;height:48px;}
  .mk .mk-numcard__ico--card{width:48px;height:48px;}
}


/* ── 10-6 アイコンをカードの中央に置く（2026-08-26）
   riho さん指摘：カードの中央、番号と同じくらいの高さから始める。
   番号は左上のまま。アイコンだけ中央に寄せ、番号の上端に合わせる。 */
.mk #issue .mk-numcard,
.mk #feature .mk-numcard{position:relative;}
.mk #issue .mk-numcard__ico,
.mk #feature .mk-numcard__ico{
  position:absolute;
  top:31px;                    /* ★番号の上端と同じ高さ */
  left:50%;
  transform:translateX(-50%);
  margin-top:0;
  width:64px;height:64px;
}
/* アイコンのぶん、見出しを下げる */
.mk #issue .mk-numcard__ico + .mk-numcard__title,
.mk #feature .mk-numcard__ico + .mk-numcard__title{margin-top:78px;}
@media(max-width:900px){
  .mk #issue .mk-numcard__ico,
  .mk #feature .mk-numcard__ico{width:52px;height:52px;top:26px;}
  .mk #issue .mk-numcard__ico + .mk-numcard__title,
  .mk #feature .mk-numcard__ico + .mk-numcard__title{margin-top:62px;}
}


/* ── 10-7 白いカードは青で囲う（2026-08-26）
   riho さん指摘：白カード型は全部この形にそろえる。 */
/* mk-base.css の .mk .mk-usecard と同じ強さなので、後勝ちで効かせる */
.mk .mk-numcard,
.mk .mk-usecard,
.mk .mk-body .mk-usecard,
.mk .mk-grid3 .mk-usecard{
  border:1px solid var(--mk-accent) !important;
}
.mk .s-tint .mk-numcard,
.mk .s-canary .mk-numcard{
  border:1px solid var(--mk-accent);
}


/* ── 10-8 よくある質問を中央に（2026-08-26）
   max-width:816px は付いていたが、左右の余白が無く左に寄っていた。
   実測：左100px / 右524px */
.mk #faq .mk-faq,
.mk #faq .mk-body{margin-left:auto;margin-right:auto;}

/* ── 10-9 狭い幅の崩れ2つ（2026-08-26）
   ★実測（390px幅）
     フッター  mk-ftr__grid = 190px  ← 親 mk-container は 390px ある
               中のボタンが箱からあふれ、縦長の楕円になっていた
     記事本文  mk-artgrid__main = 477〜485px  ← 親は 350px
               グリッドの子が縮まず、親の外へ出て右の文字が切れる
               （scrollWidth は 390 のままなので、全体の横スクロール検査では出ない）
   ★どちらも狭い幅だけ。768px 以上では起きていない */
@media (max-width:900px){
  /* ★真の原因：--mk-pad(画面左右の余白)を 100px→20px に縮める指定が
     mk-base.css:307 で .mk にだけ書かれている。フッターは .mk の外にあるため
     100px のまま残り、390px幅では 390-200=190px しか中身に残らなかった。
     .mk の外にも同じ縮小が当たるよう :root に置く */
  :root{--mk-pad:20px;}
  .mk-ftr__grid{justify-content:stretch;}
}
@media (max-width:1100px){
  .mk .mk-artgrid__main{min-width:0;max-width:100%;}
  .mk .mk-artgrid__main > *{max-width:100%;}
}

/* ── 10-10 フッターのボタンが縦長の楕円になる（2026-08-26）
   ★実測（390px幅）ボタン 350x240px。高さが 240px になっていた。
   ★原因：mk-step4.css:159（1100px以下）の flex:1 1 240px は
     .mk-ftr__side が横並び(row)のときの「幅」の指定。
     ところが 700px以下では同 :163 が flex-direction:column に戻すため、
     240px が flex-basis＝「高さ」として働き、縦に伸びていた。
   ★同ファイルの height:64px は、この basis に負けて効いていない。 */
@media (max-width:700px){
  .mk-ftr__btn{flex:0 0 auto;height:64px;}
}

/* ── 10-11 フッター下部の2つの崩れ（2026-08-26）
   ★実測（390px幅）
   ① ロゴが背景に沈んで読めない
      logo-01-wordmark.svg は fill="#017CC8" の★青一色。
      それを青のフッターの上に置いていたため見えなかった
      （白抜きの版は存在しない）→ brightness/invert で白にする
   ② 「プライバシーポリシー」が2行に折れ、「運営会社」が「運営会／社」と割れる
      mk-ftr__legal が flex-wrap:nowrap で3項目を横一列に押し込んでいた
      390px：113+45+135＋隙間56＝349px に対し箱は350px。潰れて折れていた
      → 狭い幅では縦に積む */
@media (max-width:700px){
  .mk-ftr__bottom img{filter:brightness(0) invert(1);}
  .mk-ftr__legal{flex-wrap:wrap;gap:8px 20px;}
  .mk-ftr__legal > *{white-space:nowrap;}
}

/* ── 10-12 狭い幅で文字が11px未満になる（2026-08-26）
   ★実測（390px幅）13ページすべてで発生。540px以下だけ。104箇所
   ★原因：clamp() の★下限が小さすぎ、狭い幅で下限に張り付いていた
     mk-type.css:143  clamp(★10.4px, 0.34vw+9.1px, 14px)  ← 10.426px の正体
     mk-type.css:171  clamp(★9px,    0.19vw+8.3px, 11px)
     mk-article.css:41,48  同じ 10.4px 下限
   ★mk-theme__text / mk-case__client / mk-btn-card__desc は自分に指定が無く、
     上の指定を★継承していた。元を直せばまとめて直る。
   ★下限だけ引き上げる。上限と傾きは変えないので、広い幅の見た目は変わらない
   ★連番の飾り数字(mk-numcard__no)は読む文字ではないので対象外 */
@media (max-width:700px){
  .mk .mk-theme__text,
  .mk .mk-usecard__text,
  .mk .mk-numcard__text,
  .mk .mk-table td,
  .mk .c-spec td,
  .mk .mk-case__client,
  .mk .mk-theme__cases p,
  .mk .mk-btn-card__desc,
  .mk .mk-diagram__note,
  .mk .mk-pill,
  .mk .mk-pill--auto,
  .mk-ftr__col li,
  .mk-ftr__legal,
  .mk-ftr__bnr p,
  .mk-hdr__item,
  .mk .mk-toc a,
  .mk .mk-toc__title{font-size:clamp(12px, 0.34vw + 9.1px, 14px);}

  .mk .mk-tag,
  .mk .mk-filter__tab,
  .mk .mk-stats span,
  .mk .mk-diagram__arrow,
  .mk-ftr__legal span{font-size:clamp(11px, 0.19vw + 8.3px, 11px);}
}