/* 227（2026-10-14）：ヘッダーのブランド表記（2行キャプション・トップはh1）／FV見出しはh2（見た目はそのまま）／
   FVの3つの実績（支援実績・費用・公開までの早さ。数字を主役に）／制作内容の積み木の地図とリンク1行。影なし */

/* ── ヘッダー：ロゴの下に2行のキャプション ── */
html body:not(#a227) .site-header .brand .cap227{display:block;margin-top:6px!important;font-size:16px!important;line-height:1.45!important;letter-spacing:.02em!important;font-weight:600;color:#102650}
.cap227>span{display:block;white-space:nowrap}
@media(max-width:767px){html body:not(#a227) .site-header .brand .cap227{margin-top:4px!important;font-size:14px!important;line-height:1.4!important;letter-spacing:0!important}}
/* トップページだけ、ブランド表記を h1 に（見た目は他ページと同じ） */
html body:not(#a227) .site-header h1.brand227{margin:0!important;padding:0!important;border:0!important;font:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;color:inherit!important;text-align:left!important;max-width:none!important;background:none!important}
html body:not(#a227) .site-header h1.brand227::before,html body:not(#a227) .site-header h1.brand227::after{content:none!important;display:none!important}

/* ── FV：3つの実績（数字を一番目立たせる） ── */
.au227{margin:18px 0 0}
.au227 ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start}
.au227 li{display:grid;align-content:start;gap:4px;padding:0 24px;border-left:1px solid #dfe6f2}
.au227 li:first-child{padding-left:0;border-left:0}
.au227 b{display:flex;align-items:baseline;font-size:48px;font-weight:800;line-height:1;letter-spacing:-.01em;color:#2448d8;white-space:nowrap}
.au227 b small{margin-left:2px;font-size:20px;font-weight:800;letter-spacing:0;color:#102650}
.au227 b i{margin-right:4px;font-style:normal;font-size:18px;font-weight:800;letter-spacing:0;color:#102650}
.au227 b sup{align-self:flex-start;margin-left:2px;font-size:14px;line-height:1.2;color:#4b5375}
.au227 li>span{font-size:16px;font-weight:700;line-height:1.4;color:#102650;white-space:nowrap}
.au227 p{margin:8px 0 0!important;font-size:16px!important;line-height:1.6;color:#4b5375}
.au227 br.m227,.au227 .s227{display:none}
@media(min-width:768px) and (max-width:1199px){
  .au227 li{padding:0 16px}
  .au227 li>span{white-space:normal}
  .au227 br.m227{display:inline}
  .au227 b{font-size:38px}
  .au227 b small{font-size:18px}
  .au227 b i{font-size:16px}
}
@media(max-width:767px){
  .au227{margin-top:12px}
  .au227 ul{grid-template-columns:repeat(3,auto)}
  .au227 li{gap:2px;padding:0 14px}
  .au227 b{font-size:30px}
  .au227 b small{font-size:14px;margin-left:1px}
  .au227 b i{margin-right:2px;font-size:14px}
  .au227 b sup{font-size:12px}
  .au227 li>span{font-size:14px;line-height:1.35}
  .au227 p{margin-top:4px!important;font-size:14px!important;line-height:1.5}
  .au227 br.m227{display:inline}
  .au227 .l227{display:none}
  .au227 .s227{display:inline}
}
@media(max-width:374px){.au227 li{padding:0 8px}.au227 b{font-size:26px}.au227 b i{font-size:12px}}
/* 320px 前後：FV 550px に収めるため、リード文を少し詰める */
@media(max-width:359px){html body:not(#a227):not(#b227) section.hero#top .lead{line-height:1.6!important}html body:not(#a227):not(#b227) section.hero#top h2.fvh227{font-size:24px!important}}

/* ── 制作内容：積み木の地図（土台＝ベースパッケージ、上の積み木＝追加オプション、まわりの点線＝公開後の保守） ── */
html body .map168-l.is-l2 .ring227{fill:#eef2ff;stroke:#2448d8;stroke-width:2;stroke-dasharray:7 6;stroke-linejoin:round}
html body .map168-l.is-l2.is-on{transform:none!important}
html body .map168-l.is-l2.is-on .ring227{fill:#dfe6ff;stroke:#2448d8}
html body:not(#a227) .map168-tag.t1{left:0;right:auto;top:4%}
html body:not(#a227) .map168-tag.t0{left:auto;right:-6%;top:44%}
html body:not(#a227) .map168-tag.t2{left:-2%;right:auto;top:auto;bottom:4%}
@media(max-width:899px){
  html body:not(#a227) .map168-tag.t0{right:0}
  html body:not(#a227) .map168-tag.t2{left:0}
}

/* ── 制作内容：各行（番号｜見出し……リンク／説明）。「〜を見る」は1行で ── */
html body:not(#a227):not(#b227):not(#c227) [data-map168] .service-copy124 .service-row{grid-template-columns:52px minmax(0,1fr)!important;gap:8px 20px!important}
html body:not(#a227):not(#b227):not(#c227) [data-map168] .service-copy124 .service-row::before{grid-column:1!important;grid-row:1 / span 2!important}
html body:not(#a227):not(#b227):not(#c227) [data-map168] .service-copy124 .service-row>div{grid-column:2!important;grid-row:1!important;display:flex!important;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
html body:not(#a227):not(#b227):not(#c227) [data-map168] .service-copy124 .service-row>div>a{white-space:nowrap;font-size:16px}
html body:not(#a227):not(#b227):not(#c227) [data-map168] .service-copy124 .service-row>p{grid-column:2!important;grid-row:2!important}
@media(max-width:1023px){html body:not(#a227):not(#b227):not(#c227) [data-map168] .service-copy124 .service-row{grid-template-columns:40px minmax(0,1fr)!important;gap:6px 16px!important}}
@media(max-width:600px){html body:not(#a227):not(#b227):not(#c227) [data-map168] .service-copy124 .service-row>div>a{font-size:14px}}

/* ヘッダー：2行キャプションでもロゴが上下に詰まらないよう余白を確保 */
html body:not(#a227) .site-header .header-inner{padding-top:10px;padding-bottom:10px;box-sizing:border-box}
@media(max-width:767px){html body:not(#a227) .site-header .header-inner{padding-top:8px;padding-bottom:8px}}

/* ── FV 見出し（h1 → h2.fvh227）：h1 だったときの実測値どおりの見た目 ── */
html body:not(#a227):not(#b227) section.hero#top h2.fvh227{margin:0 0 14px!important;font-size:clamp(34px,3.2vw,46px)!important;line-height:1.32!important;font-weight:900!important;letter-spacing:-.035em!important;text-align:left!important;color:#102650!important}
html body:not(#a227):not(#b227) section.hero#top h2.fvh227::before,html body:not(#a227):not(#b227) section.hero#top h2.fvh227::after{content:none!important;display:none!important}
html body:not(#a227):not(#b227) section.hero#top h2.fvh227 .small{display:block!important;margin:0 0 10px!important;font-size:16px!important;line-height:1.5!important;font-weight:600!important;letter-spacing:.03em!important;color:#2448d8!important}
html body:not(#a227):not(#b227) section.hero#top h2.fvh227 em{font-style:normal!important;font-weight:inherit!important;letter-spacing:inherit!important;color:#2448d8!important}
@media(min-width:768px) and (max-width:1023px){html body:not(#a227):not(#b227) section.hero#top h2.fvh227{font-size:32px!important}}
@media(max-width:767px){
  html body:not(#a227):not(#b227) section.hero#top h2.fvh227{margin:0 0 10px!important;font-size:26px!important;line-height:1.3!important}
  html body:not(#a227):not(#b227) section.hero#top h2.fvh227 .small{margin-bottom:6px!important;font-size:14px!important}
}
@media(max-width:600px){html body:not(#a227):not(#b227):not(#c227) [data-map168] .service-copy124 .service-row>div{flex-direction:column;align-items:flex-start}}

/* 制作実績ページ：事例タイトル（h3 → h2）。見た目は他ページの h3 と同じ */
html body:not(#a227):not(#b227) .wk175-head h2.wk227{margin:0!important;padding:0!important;font-size:clamp(26px,2.6vw,34px)!important;line-height:1.3!important;font-weight:700!important;letter-spacing:.035em!important;color:#102650!important;text-align:left!important}
html body:not(#a227):not(#b227) .wk175-head h2.wk227::before,html body:not(#a227):not(#b227) .wk175-head h2.wk227::after{content:none!important;display:none!important}

/* ヘッダーのナビ：1101〜1365px で折り返さない（ロゴ＋2行キャプションの幅を確保） */
@media(min-width:1101px) and (max-width:1365px){
  html body:not(#a227) .site-header .header-inner{gap:20px!important}
  html body:not(#a227) .site-header .nav{gap:16px!important}
  html body:not(#a227) .site-header .nav a{white-space:nowrap!important}
}
@media(min-width:1101px) and (max-width:1199px){html body:not(#a227) .site-header .header-inner{width:calc(100% - 80px)!important}}