/* 165（2026-10-08）MIEKATA「積み木でつくるWeb」 影なし・本文16px以上（600px以下14px以上） */

/* ── FV：ブラウザの中でサイトが積み上がる ── */
.fv165{position:relative;width:100%;padding:8px 0 24px}
.fv165-browser{position:relative;width:80%;margin-left:20%;border-radius:20px;overflow:hidden;background:#fff;border:1px solid #dfe6f2}
.fv165-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#102650}
.fv165-bar i{width:9px;height:9px;border-radius:50%;background:#a8c0ed}
.fv165-bar i:nth-child(2){background:#ffd36b}.fv165-bar i:nth-child(3){background:#7fe0b0}
.fv165-bar span{flex:1;height:14px;margin-left:10px;border-radius:7px;background:rgba(255,255,255,.14)}
.fv165-view{position:relative;aspect-ratio:16/11;overflow:hidden;container-type:inline-size;background:repeating-linear-gradient(0deg,#f4f7fc 0 20px,#eef1ff 20px 40px)}
.fv165-page{will-change:transform;animation:fv165build 6.7s .96s both,fv165loop 30s 9s ease-in-out infinite alternate}
.fv165-page img{display:block;width:100%;height:56.25cqw;object-fit:cover;object-position:top;animation:fv165drop .7s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(.96s + var(--i) * .96s)}
@keyframes fv165drop{from{opacity:0;transform:translateY(-36px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fv165build{
  0%,14%{transform:translateY(0)}
  28.5%{transform:translateY(-43.75cqw)}
  43%{transform:translateY(-100cqw)}
  57%{transform:translateY(-156.25cqw)}
  71.5%{transform:translateY(-212.5cqw)}
  86%{transform:translateY(-268.75cqw)}
  100%{transform:translateY(-325cqw)}}
@keyframes fv165loop{from{transform:translateY(-325cqw)}to{transform:translateY(0)}}
/* 立体の積み木（自作SVG） */
.blk165{position:absolute;left:0;bottom:0;width:22%;height:auto;animation:fv165bob 5s ease-in-out infinite}
.fv165-c{position:absolute;width:9%;height:auto;animation:fv165float 6s ease-in-out infinite}
.fv165-c.c1{left:3%;top:4%}
.fv165-c.c2{left:9%;top:30%;width:7%;animation-delay:-2s}
.fv165-c.c3{left:1%;top:52%;width:6%;animation-delay:-4s}
@keyframes fv165float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-4deg)}}
@keyframes fv165bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
html body section.hero .proof148{display:none}

/* ── 積み木の料金：プレビュー付きのレイアウト ── */
html body .bk155-body{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;grid-template-areas:"stage preview" "panel panel";gap:28px!important;align-items:stretch!important}
html body .bk155-stage{grid-area:stage}
html body .bk165-preview{grid-area:preview;display:flex;flex-direction:column;padding:18px;border-radius:20px;background:#f4f7fc;border:1px solid #dfe6f2;transition:background-color .2s,border-color .2s}
html body .bk155-panel{grid-area:panel}
html body .bk155-panel .bk155-btns{grid-template-columns:repeat(3,minmax(0,1fr))}
html body .bk155-panel .bk155-btns.is-one{grid-template-columns:1fr}
html body .bk155-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:28px;align-items:start}
html body .bk155-panel>*:not(.bk155-total):not(.bk155-month){grid-column:1}
html body .bk155-panel .bk155-total{grid-column:2;grid-row:1 / span 5;align-self:start;position:sticky;top:120px}
html body .bk155-panel .bk155-month{grid-column:2}
.bk165-pv-title{margin:0 0 10px!important;font-size:16px;font-weight:700;color:#102650}
.bk165-browser{flex:1;display:flex;flex-direction:column;min-height:300px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #dfe6f2}
.bk165-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px 8px 0;background:#102650}
.bk165-tabs span{padding:5px 10px;border-radius:8px 8px 0 0;background:rgba(255,255,255,.14);color:#dfe6f2;font-size:14px;font-weight:700;white-space:nowrap}
.bk165-tabs span.is-on{background:#fff;color:#102650}
.bk165-tabs span.is-new{background:#2448d8;color:#fff}
.bk165-tabs span.is-news{background:#a8c0ed}
.bk165-tabs span i{font-style:normal;margin-left:4px;opacity:.8}
.bk165-body{flex:1;padding:8px;display:grid;gap:5px;align-content:start;max-height:360px;overflow:hidden}
.bk165-strip{position:relative;height:42px;border-radius:8px;overflow:hidden;background:#eef1fb}
.bk165-strip.is-fv{height:78px}
.bk165-strip img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.bk165-strip.is-new{outline:2px solid #2448d8;outline-offset:-2px}
.bk165-strip em{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 8px;border-radius:999px;background:#2448d8;color:#fff;font-style:normal;font-size:14px;font-weight:700}
.bk165-news{display:grid;gap:5px;padding:8px 10px;border-radius:8px;background:#f4f7fc;outline:2px solid #a8c0ed;outline-offset:-2px}
.bk165-news b{font-size:14px;color:#2448d8}
.bk165-news span{height:6px;border-radius:8px;background:#dfe6f2}
.bk165-news span:nth-child(3){width:80%}.bk165-news span:nth-child(4){width:60%}
.is-pop{animation:bk165pop .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes bk165pop{from{transform:translateY(-14px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.bk165-drop{margin:10px 0 0!important;font-size:14px;color:#4b5375;text-align:center}
.bk155-add[draggable="true"]{cursor:grab}
.bk155-add.is-drag{opacity:.5}
[data-bk155].is-over :is(.bk155-stage,.bk165-preview){background:#e8edff!important;border-color:#2448d8!important}
@media(prefers-reduced-motion:reduce){.fv165-page,.fv165-page img,.blk165,.fv165-c,.is-pop{animation:none!important}}
@media(max-width:900px){
  html body .bk155-body{grid-template-columns:1fr!important;grid-template-areas:"preview" "stage" "panel"}
  html body .bk155-panel{grid-template-columns:1fr}
  html body .bk155-panel .bk155-total,html body .bk155-panel .bk155-month{grid-column:1;grid-row:auto;position:static}
  .bk165-drop{display:none}
  .bk165-body{max-height:300px}
}
@media(min-width:601px){.bk165-tabs span,.bk165-strip em,.bk165-news b,.bk165-drop{font-size:16px}}

/* ── お支払い：プラン切替と月数スライダー ── */
.mo165{max-width:1080px;margin:0 auto 22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 28px;align-items:center;padding:20px 24px;border-radius:20px;background:#fff;border:1px solid #dfe6f2}
.mo165-plan{display:flex;gap:8px}
.mo165-plan button{display:grid;gap:2px;padding:10px 16px;border-radius:12px;border:1px solid #dfe6f2;background:#f6f8ff;color:#102650;font:inherit;font-size:16px;font-weight:700;cursor:pointer;text-align:left}
.mo165-plan button small{font-size:14px;font-weight:400;color:#4b5375}
.mo165-plan button[aria-pressed="true"]{background:#102650;border-color:#102650;color:#fff}
.mo165-plan button[aria-pressed="true"] small{color:#dfe6f2}
.mo165-range{display:grid;gap:6px;font-size:16px;font-weight:700;color:#102650}
.mo165-range input{--p:100%;-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:12px;background:linear-gradient(90deg,#2448d8 0 var(--p),#e4e8f8 var(--p));outline-offset:6px}
.mo165-range input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:6px solid #2448d8;cursor:grab}
.mo165-range input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:6px solid #2448d8}
.mo165-out{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 28px;margin:0!important;font-size:16px;color:#102650}
.mo165-out b{margin:0 2px 0 6px;font:700 26px/1.2 'Noto Sans JP',sans-serif;color:#2448d8}
.mo165-out span:first-child b{margin-left:0;color:#102650}
.mo165-out span:last-child b{color:#2448d8}
.mo165-out small{font-size:14px}
.cf154-col{transition:opacity .3s}
.cf154-col.is-off{opacity:.25}
.cf154-bar,.cf154-dot,.cf154-val,.cf154-art{transition:height .4s cubic-bezier(.22,1,.36,1),bottom .4s cubic-bezier(.22,1,.36,1)}
@media(max-width:800px){.mo165{grid-template-columns:1fr;padding:16px}.mo165-plan button{flex:1}.mo165-out{gap:6px 16px}.mo165-out b{font-size:22px}}
@media(max-width:600px){.mo165-plan button{font-size:14px;padding:8px 10px}.mo165-range,.mo165-out{font-size:14px}}
/* 165b：「2か月目からは毎月」の帯は、記事の線と重ならないようグラフの上に */
html body .cf154-flat{top:-46px!important;bottom:auto!important;left:auto!important;right:0!important;border-top:0!important;padding:0!important;justify-content:flex-end!important}
html body .cf154-chart{padding-top:80px!important}
@media(max-width:900px){html body .bk155-panel .bk155-btns{grid-template-columns:1fr!important}}
@media(max-width:600px){.fv165-browser{width:84%;margin-left:16%}.blk165{width:20%}}
@media(min-width:601px){.mo165-plan button small,.mo165-out small{font-size:16px!important}}
html body .cf154-flat{right:auto!important;left:50%!important;transform:translateX(-50%)}

/* 170（2026-10-09）「組み上がるサイト」の表示はなし → 積み木（左）とボタン・合計（右）を横並びに */
html body .bk155-body{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;grid-template-areas:"stage panel"!important;align-items:start!important}
html body .bk155-stage{position:sticky;top:110px;align-self:start}
html body .bk155-panel{grid-template-columns:1fr!important}
html body .bk155-panel>*{grid-column:1!important}
html body .bk155-panel .bk155-total,html body .bk155-panel .bk155-month{grid-column:1!important;grid-row:auto!important;position:static!important}
@media(max-width:900px){
  html body .bk155-body{grid-template-columns:1fr!important;grid-template-areas:"stage" "panel"!important}
  html body .bk155-stage{position:static}
}