/* 168（2026-10-09）MIEKATA 下層ページ：積み木の見出し／積み木の地図／流れの階段。影なし・文字16px以上（600px以下は14px以上） */

/* ── ページ見出しの積み木 ── */
html body .page-hero[data-ph168]{position:relative;overflow:hidden}
html body .page-hero[data-ph168]>.wrap{position:relative;z-index:1}
.ph168{position:absolute;inset:0;z-index:0;pointer-events:none}
.ph168 svg{position:absolute;display:block;height:auto}
.ph168-stack{right:max(32px,calc((100vw - 1440px) / 2 + 64px));bottom:10%;width:170px;animation:ph168drop .8s .2s cubic-bezier(.2,.9,.3,1.2) both,ph168float 7s 1s ease-in-out infinite}
.ph168-c{width:64px;animation:ph168drop .7s cubic-bezier(.2,.9,.3,1.2) both,ph168float 6s ease-in-out infinite}
.ph168-c.l1{left:max(40px,calc((100vw - 1440px) / 2 + 96px));top:18%;animation-delay:.35s,1.1s}
.ph168-c.l2{left:max(110px,calc((100vw - 1440px) / 2 + 180px));bottom:14%;width:44px;animation-delay:.5s,-2s}
.ph168-c.r2{right:max(220px,calc((100vw - 1440px) / 2 + 260px));top:12%;width:40px;animation-delay:.65s,-4s}
@keyframes ph168drop{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
@keyframes ph168float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media(max-width:1239px){.ph168-stack,.ph168-c.l2,.ph168-c.r2{display:none}.ph168-c.l1{left:24px;top:14px;width:40px}}
@media(max-width:600px){.ph168{display:none}}

/* ベースパッケージ：見出しの下で、サイトが積み上がる */
html body .page-hero[data-ph168="fv"] .fv165{position:relative;z-index:1;max-width:760px;margin:36px auto 0}

/* ── 料金・オプション：積み木の料金 ── */
html body #build.lw168 .bk155{margin-top:0}

/* ── 制作内容：積み木の地図 ── */
@media(min-width:900px){html body .service-layout124[data-map168]{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}}
html body .map168{display:flex;flex-direction:column;align-items:center}
.map168-stage{position:relative;width:100%;max-width:440px}
.map168-stage svg{display:block;width:100%;height:auto;overflow:visible}
.map168-l{cursor:pointer;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s}
.map168-l.is-on{transform:translateY(-14px)}
.map168-tag{position:absolute;padding:8px 14px;border-radius:999px;background:#fff;border:2px solid #dfe6f2;color:#102650;font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,transform .3s}
.map168-tag.t1{left:0;top:16%}
.map168-tag.t0{right:-4%;top:44%}
.map168-tag.t2{left:-2%;top:80%}
.map168-tag.is-on{background:#2448d8;border-color:#2448d8;color:#fff;transform:scale(1.06)}
html body [data-map168] .service-row{transition:background-color .3s,border-color .3s;border-radius:20px}
html body [data-map168] .service-row.is-on{background:#eef2ff}
/* 画面に入ると、土台から順に積み上がる */
html.mo161 [data-map168] .map168-l{opacity:0;transform:translateY(-40px)}
html.mo161 [data-map168].is-in168 .map168-l{opacity:1;transform:none}
html.mo161 [data-map168].is-in168 .map168-l.is-on{transform:translateY(-14px)}
html.mo161 [data-map168] .map168-l.is-l0{transition-delay:.25s}
html.mo161 [data-map168] .map168-l.is-l1{transition-delay:.5s}
html.mo161 [data-map168].is-ready168 .map168-l{transition-delay:0s}

/* ── 制作の流れ：5段の階段 ── */
.flow168{max-width:560px;margin:0 auto 36px}
.flow168 svg{display:block;width:100%;height:auto;overflow:visible}
.flow168 text{fill:#fff;font:700 28px Arial,sans-serif}
.flow168-c{transition:translate .35s cubic-bezier(.22,1,.36,1)}
.flow168-c.is-hl{translate:0 -12px}
html.mo161 .flow168 .flow168-c{opacity:0}
html.mo161 .flow168.is-in .flow168-c{animation:flow168drop .55s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i) * .35s)}
@keyframes flow168drop{from{opacity:0;transform:translateY(-48px)}to{opacity:1;transform:none}}
html body .steps[data-flow168] li{transition:background-color .4s,border-color .4s}
html body .steps[data-flow168] li.is-on168{background:#eef2ff;border-color:#2448d8}

@media(max-width:899px){.map168-stage{max-width:380px;margin:0 auto 24px}}
@media(max-width:600px){
  .map168-tag{padding:6px 10px;font-size:14px}
  .map168-tag.t0{right:0}
  .map168-tag.t2{left:0}
  .flow168{margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  .ph168-stack,.ph168-c{animation:none!important}
  html.mo161 [data-map168] .map168-l,html.mo161 .flow168 .flow168-c{opacity:1;transform:none;animation:none!important}
}

/* 制作内容：地図の横の説明は、縦に3段のカードに */
html body[data-story126] [data-map168] .service-copy124{grid-template-columns:1fr!important;gap:12px!important}
html body [data-map168] .service-copy124 .service-row{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:8px 24px;align-items:start;margin:0!important;padding:20px 24px!important;border:1.5px solid #dfe6f2!important;border-radius:20px}
html body [data-map168] .service-copy124 .service-row>p{margin:0!important}
html body [data-map168] .service-copy124 .service-row.is-on{border-color:#2448d8!important}
@media(max-width:600px){html body [data-map168] .service-copy124 .service-row{grid-template-columns:1fr;padding:16px!important}}
html body .steps[data-flow168] li{padding-left:16px!important;padding-right:16px!important;border-radius:12px}
/* 183（2026-10-09）白系ボタン（.button.light）は、アイコン（.cta-icon128）があるときは疑似要素の矢印を出さない（矢印が2つになっていた） */
html body.design main a.button.light:has(.cta-icon128)::after{content:none!important;display:none!important}