/* ============================================================
   三日（MIKKA）── 共通スタイル
   このファイルを直せば、全ページの見た目が一度に変わります。
   ============================================================ */

:root{
  /* ── 配色 2026-08-19 改訂 ──
     地：白　文字：藍墨（黒ではなく紺）　差し色：朱
     ・Appleの無彩色グレー＋青 をやめ、藍と朱に振った
     ・グレーは青みを持たせて、藍と同じ family に揃えている  */
  --ink:#16233A;      /* 藍墨。見出し・本文・濃い帯 */
  --ink-deep:#0F1A2C; /* いちばん濃い面（帯・フッター） */
  --sub:#5C6880;      /* 補足文 */
  --line:#D2D8E3;     /* 罫線 */
  --grey:#EEF1F6;     /* 面（青みのある淡いグレー） */
  --blue:#C7452E;     /* ＝朱。ボタン・リンクの差し色 */
  --blue-d:#A4351F;   /* 朱の濃いほう（hover） */
  --nav-h:52px;
  --maxw:980px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro JP","SF Pro Display","Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;
  line-height:1.5;letter-spacing:.01em;
}
a{color:var(--blue-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ---------- ナビゲーション ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav-in{max-width:1024px;margin:0 auto;height:var(--nav-h);padding:0 22px;display:flex;align-items:center;gap:28px}
.brand{font-size:19px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand span{font-size:11px;font-weight:400;letter-spacing:.08em;color:var(--sub);margin-left:7px}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links a{font-size:13px;color:var(--ink);opacity:.82}
.nav-links a:hover{opacity:1;text-decoration:none}
.nav-links a.here{opacity:1;font-weight:600}
.nav-cta{background:var(--ink);color:#fff !important;padding:7px 16px;border-radius:980px;font-size:12px !important;opacity:1 !important}
.nav-cta:hover{background:var(--ink-deep)}

/* ハンバーガー（スマホのみ） */
.burger{display:none;margin-left:auto;width:34px;height:34px;border:0;background:transparent;position:relative;cursor:pointer}
.burger i{position:absolute;left:7px;right:7px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s}
.burger i:nth-child(1){top:11px}
.burger i:nth-child(2){top:16.5px}
.burger i:nth-child(3){top:22px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:820px){
  .burger{display:block}
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:rgba(255,255,255,.97);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .nav-links.open{max-height:520px}
  .nav-links a{padding:15px 22px;font-size:16px;border-bottom:1px solid rgba(0,0,0,.06)}
  .nav-cta{margin:14px 22px 20px;text-align:center;border-radius:980px;font-size:15px !important;padding:12px 16px}
}

/* ---------- 共通レイアウト ---------- */
section{padding:88px 22px}
section.tight{padding:64px 22px}
.wrap{max-width:var(--maxw);margin:0 auto}
.narrow{max-width:720px;margin:0 auto}
.grey{background:var(--grey)}
.center{text-align:center}
h2{font-size:clamp(30px,4.6vw,46px);font-weight:600;line-height:1.12;letter-spacing:-.015em}
h3{letter-spacing:-.01em}
.lead{margin-top:14px;font-size:clamp(16px,2vw,20px);color:var(--sub);line-height:1.6}
.eyebrow{font-size:14px;font-weight:600;color:var(--blue-d);margin-bottom:10px;letter-spacing:.02em}
.body-txt{margin-top:20px;font-size:16px;line-height:1.95;color:#3A4358}
.body-txt p+p{margin-top:18px}
.body-txt strong{color:var(--ink);font-weight:600}

/* ---------- ページ見出し（下層ページ共通） ---------- */
.page-head{padding:76px 22px 56px;text-align:center;background:linear-gradient(180deg,#F7F9FC 0%,#fff 100%)}
.page-head h1{font-size:clamp(34px,6vw,58px);font-weight:600;line-height:1.08;letter-spacing:-.02em}
.page-head .lead{margin-top:16px}
.crumb{font-size:12px;color:var(--sub);margin-bottom:18px}
.crumb a{color:var(--sub)}

/* ---------- ボタン ---------- */
.cta-row{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:12px 28px;border-radius:980px;font-size:17px;border:0;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--blue-d);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--grey);color:var(--ink)}
.btn.dark{background:var(--ink)}
.btn.dark:hover{background:#000}
.link-more{font-size:17px}
.link-more::after{content:" ›"}

/* ---------- 数字の帯 ---------- */
.stat-row{margin-top:56px;display:flex;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--line)}
.stat{flex:1 1 200px;padding:28px 16px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat b{display:block;font-size:clamp(32px,5vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1}
.stat span{display:block;margin-top:8px;font-size:14px;color:var(--sub)}
@media(max-width:700px){
  .stat{border-right:none;border-bottom:1px solid var(--line);flex-basis:100%}
  .stat:last-child{border-bottom:none}
}

/* ---------- ヒーロー ---------- */
.hero{padding:104px 22px 84px;text-align:center;background:linear-gradient(180deg,#F7F9FC 0%,#fff 62%)}
.hero h1{font-size:clamp(40px,8.5vw,80px);font-weight:600;line-height:1.05;letter-spacing:-.02em}
.hero .lead{margin-top:20px;font-size:clamp(18px,2.6vw,25px)}

/* ---------- 黒帯（オファー） ---------- */
.offer{background:var(--ink);color:#fff;padding:68px 22px}
.offer .wrap{display:flex;gap:44px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:left}
.offer .amount{text-align:center;flex:0 0 auto}
.offer .was{font-size:19px;color:#7A8598;text-decoration:line-through;letter-spacing:-.01em}
.offer .now{font-size:clamp(46px,8vw,72px);font-weight:600;letter-spacing:-.025em;line-height:1.02}
.offer .now small{font-size:20px;font-weight:400}
.offer .txt{flex:1 1 330px}
.offer .pill{display:inline-block;border:1px solid #3A4560;color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:980px;margin-bottom:14px;letter-spacing:.02em}
.offer h2{font-size:clamp(24px,3.6vw,34px);color:#fff}
.offer p{margin-top:12px;font-size:16px;color:#94A0B8;line-height:1.7}
.offer p strong{color:#fff}

/* ---------- カード3列 ---------- */
.why{margin-top:48px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:860px){.why{grid-template-columns:1fr}}
.why .card{background:#fff;border-radius:18px;padding:32px 28px;border:1px solid rgba(0,0,0,.06)}
.grey .why .card{background:#fff}
.why h3{font-size:19px;font-weight:600;margin-bottom:10px;letter-spacing:-.005em}
.why p{font-size:15px;color:var(--sub);line-height:1.75}

/* ---------- 料金プラン ---------- */
.plans{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:860px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border-radius:18px;padding:34px 28px;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.06)}
.plan.featured{border:2px solid var(--ink)}
@media(min-width:861px){.plan:not(.featured)::before{content:"";display:block;height:35px}}
.tag{display:inline-block;font-size:12px;font-weight:600;background:var(--ink);color:#fff;padding:3px 10px;border-radius:980px;margin-bottom:14px;align-self:flex-start}
.plan h3{font-size:24px;font-weight:600}
.price{margin-top:16px;font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1}
.price small{font-size:15px;font-weight:400;color:var(--sub);letter-spacing:0}
.price-was{margin-top:6px;font-size:14px;color:var(--sub)}
.price-was s{opacity:.75}
.term{margin-top:8px;font-size:14px;color:var(--sub)}
.plan ul{margin-top:22px;list-style:none;display:flex;flex-direction:column;gap:11px}
.plan li{font-size:15px;padding-left:22px;position:relative;color:#3A4358;line-height:1.45}
.plan li::before{content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.plan .foot{margin-top:24px;padding-top:18px;border-top:1px solid rgba(0,0,0,.07);font-size:14px;color:var(--sub)}

/* ---------- 保守の帯 ---------- */
.keep{background:var(--grey);border-radius:18px;padding:44px 38px;display:flex;gap:36px;align-items:center;flex-wrap:wrap}
.grey .keep{background:#fff}
.keep .big{font-size:clamp(36px,6vw,56px);font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.keep .big small{font-size:16px;font-weight:400;color:var(--sub)}
.keep .txt{flex:1 1 320px}
.keep h3{font-size:22px;font-weight:600;margin-bottom:8px}
.keep p{font-size:15px;color:var(--sub);line-height:1.75}

/* ---------- 手順（4ステップ） ---------- */
.steps{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border-radius:18px;padding:28px 24px}
.grey .step{background:#fff}
section:not(.grey) .step{background:var(--grey)}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;margin-bottom:16px}
.step h3{font-size:18px;font-weight:600;margin-bottom:8px}
.step p{font-size:14px;color:var(--sub);line-height:1.7}

/* ---------- 縦のタイムライン（制作の流れ） ---------- */
.tl{margin-top:48px;position:relative;padding-left:38px}
.tl::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl-item{position:relative;padding-bottom:44px}
.tl-item:last-child{padding-bottom:0}
.tl-item .dot{position:absolute;left:-38px;top:2px;width:23px;height:23px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.tl-item .day{font-size:12px;font-weight:600;color:var(--blue-d);letter-spacing:.03em}
.tl-item h3{font-size:22px;font-weight:600;margin-top:4px}
.tl-item p{margin-top:10px;font-size:15px;color:var(--sub);line-height:1.85}
.tl-item .who{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.tl-item .who span{font-size:12px;padding:4px 11px;border-radius:980px;background:var(--grey);color:#3A4358}
.grey .tl-item .who span{background:#fff}
.tl-item .who span.mine{background:var(--ink);color:#fff}

/* ---------- 2カラムカード ---------- */
.cols{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.card2{background:var(--grey);border-radius:18px;padding:32px 28px}
.grey .card2{background:#fff}
.card2.warn{background:#fff;border:1px solid var(--line)}
.card2 h3{font-size:19px;font-weight:600;margin-bottom:16px}
.card2 ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.card2 li{font-size:15px;color:#3A4358;padding-left:16px;position:relative;line-height:1.6}
.card2 li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--sub)}

/* ---------- 実績 ---------- */
.works{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.works{grid-template-columns:1fr}}
.work{background:var(--grey);border-radius:18px;overflow:hidden}
.grey .work{background:#fff}
.work .thumb{aspect-ratio:16/10;background:repeating-linear-gradient(45deg,#E3E8F0 0 12px,#E8EDF4 12px 24px);display:flex;align-items:center;justify-content:center;color:#94A0B8;font-size:13px}
.work .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.work .meta{padding:22px 22px 26px}
.work h3{font-size:17px;font-weight:600}
.work .kind{margin-top:6px;font-size:13px;color:var(--blue-d);font-weight:600}
.work p{margin-top:10px;font-size:14px;color:var(--sub);line-height:1.75}
.note{margin-top:24px;font-size:13px;color:var(--sub);line-height:1.85;padding:18px 20px;background:#fff;border-radius:12px;border:1px solid var(--line)}
.grey .note{background:#fff}

/* ---------- 表 ---------- */
.tbl-wrap{margin-top:32px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.7}
th{font-weight:600;font-size:14px;color:var(--sub);white-space:nowrap}
thead th{border-bottom:1px solid var(--ink)}
tbody th{width:34%;color:var(--ink);white-space:normal}
td strong{font-weight:600}

/* スマホでは、表が横スクロールであることを明示する */
@media(max-width:700px){
  .tbl-wrap{position:relative}
  .tbl-wrap::before{
    content:"← 横にスクロールできます →";
    display:block;font-size:12px;color:var(--sub);
    margin-bottom:10px;letter-spacing:.02em;
  }
}

/* ---------- FAQ ---------- */
.faq{margin-top:36px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-size:17px;font-weight:500;line-height:1.5}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:rotate(-135deg)}
details p{padding:0 8px 24px 0;font-size:15px;color:var(--sub);line-height:1.85}
details p+p{padding-top:14px;margin-top:-10px}
.faq-cat{margin-top:56px;font-size:14px;font-weight:600;color:var(--blue-d);letter-spacing:.02em}
.faq-cat:first-of-type{margin-top:0}

/* ---------- フォーム ---------- */
.form{margin-top:40px;text-align:left}
.field{margin-bottom:24px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.field .req{font-size:11px;font-weight:600;color:#fff;background:var(--blue);padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:2px}
.field .opt-mark{font-size:11px;color:var(--sub);background:var(--grey);padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:2px}
.field .hint{font-size:13px;color:var(--sub);margin-top:6px;line-height:1.7}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
textarea{min-height:150px;resize:vertical;line-height:1.7}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.14)}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-row label{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:400;padding:11px 16px;border:1px solid var(--line);border-radius:12px;cursor:pointer;margin:0;background:#fff}
.radio-row input{accent-color:var(--blue)}
.radio-row label:has(input:checked){border-color:var(--ink);background:var(--grey)}
.form-note{font-size:13px;color:var(--sub);line-height:1.85;background:var(--grey);border-radius:12px;padding:18px 20px;margin-top:8px}
.grey .form-note{background:#fff}
.form .btn{width:100%;padding:16px;font-size:17px}
.err{color:var(--blue);font-size:13px;margin-top:6px;display:none}
.err.on{display:block}
input.bad,textarea.bad{border-color:var(--blue)}

/* ---------- 法務ページ ---------- */
.legal{font-size:15px;line-height:1.95;color:#3A4358}
.legal h2{font-size:20px;font-weight:600;color:var(--ink);margin-top:44px;margin-bottom:12px;line-height:1.4}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:14px}
.legal ol,.legal ul{margin:0 0 14px 22px}
.legal li{margin-bottom:8px}
.legal .updated{font-size:13px;color:var(--sub);margin-top:48px;padding-top:20px;border-top:1px solid var(--line)}

/* ---------- 最終CTA ---------- */
.final{background:var(--ink);color:#fff;text-align:center}
.final h2{color:#fff}
.final .lead{color:#94A0B8}
.final .btn{background:#fff;color:var(--ink)}
.final .btn:hover{background:#E3E8F0;color:var(--ink)}
.final .btn.ghost{background:transparent;color:#fff;border:1px solid #3A4560}
.final .btn.ghost:hover{background:#26314A;color:#fff}

/* ---------- フッター ---------- */
footer{background:var(--grey);padding:56px 22px 40px;font-size:13px;color:var(--sub);line-height:1.9}
.foot-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media(max-width:760px){.foot-in{grid-template-columns:1fr;gap:28px}}
.foot-in .foot-h{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 10px;letter-spacing:.04em}
.foot-in a{display:block;color:var(--sub);font-size:13px;padding:3px 0}
.foot-in a:hover{color:var(--ink)}
.foot-brand strong{display:block;color:var(--ink);font-size:16px;letter-spacing:.04em;margin-bottom:8px}
.foot-bottom{max-width:var(--maxw);margin:36px auto 0;padding-top:22px;border-top:1px solid var(--line);font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.todo{color:#b25000;font-weight:600}

/* ---------- スクロールで出す ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* 印刷 */
@media print{
  nav,.final,.rv{position:static}
  .rv{opacity:1;transform:none}
  nav,.burger{display:none}
}

/* ---------- 比較表（料金ページ） ---------- */
.cmp-table{width:100%;border-collapse:collapse;margin-top:44px;font-size:15px;min-width:560px}
.cmp-table th,.cmp-table td{padding:16px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp-table thead th{font-size:13px;color:var(--sub);font-weight:600;border-bottom:1px solid var(--ink)}
.cmp-table tbody th{width:9em;font-weight:600;color:var(--ink)}
.cmp-table td:last-child{background:var(--grey)}
.cmp-table thead th:last-child{color:var(--ink)}

/* ---------- ヒーロー：2カラム＋3D ---------- */
.hero{padding:88px 22px 72px;text-align:left;
  background:radial-gradient(1200px 520px at 78% 18%, #E9EEF7 0%, #F7F9FC 46%, #fff 78%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.hero-txt{max-width:520px}
.hero-eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--blue);
  margin-bottom:18px;text-transform:none}
.hero h1{font-size:clamp(38px,5.4vw,68px)}
.hero .lead{margin-top:18px;font-size:clamp(17px,1.6vw,20px);max-width:26em}
.hero .cta-row{justify-content:flex-start}
.hero .stat-row{margin-top:64px}

.hero-vis{position:relative}
#build3d{display:block;width:100%;height:460px}
.days{list-style:none;display:flex;justify-content:center;gap:34px;margin-top:-6px;padding:0}
.days li{display:flex;flex-direction:column;align-items:center;gap:3px}
.days b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.04em}
.days span{font-size:11px;color:var(--sub);letter-spacing:.06em}
.days li:last-child b{color:var(--blue)}

@media(max-width:900px){
  .hero{text-align:center;padding:72px 22px 60px}
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-txt{max-width:none;margin:0 auto;order:1}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .cta-row{justify-content:center}
  .hero-vis{order:2;margin-top:24px}
  #build3d{height:300px}
  .days{gap:26px}
}

/* 触れる実績プレビュー */
.work .live{background:#0e0d0c;border-bottom:1px solid var(--line)}
.work .livebar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#17161a;
  border-bottom:1px solid #26252b;font-size:11.5px;color:#8b8792}
.work .livebar .dots{display:flex;gap:5px}
.work .livebar .dots i{width:9px;height:9px;border-radius:50%;background:#3a3841;display:block}
.work .livebar .url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:#221f27;border-radius:20px;padding:4px 12px}
.work .livebar .expand{color:#c8c4d0;text-decoration:none;white-space:nowrap;font-size:11.5px}
.work .livebar .expand:hover{color:#fff}
.work .frame{position:relative;height:340px;overflow:hidden}
.work .frame iframe{position:absolute;top:0;left:0;width:200%;height:200%;border:0;
  transform:scale(.5);transform-origin:0 0}
@media(max-width:720px){ .work .frame{height:260px} }

/* 他社比較 */
table.cmp{width:100%;border-collapse:collapse;background:#fff;font-size:13.5px;min-width:660px}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
table.cmp thead th{background:#F2F5FA;font-size:12.5px;font-weight:600;color:var(--sub);text-align:center}
table.cmp thead th.me{background:#16233A;color:#fff}
table.cmp tbody th{background:#FAFBFD;font-weight:600;width:16%;white-space:nowrap}
table.cmp td{color:var(--sub)}
table.cmp td.me{background:#F5F8FF;color:var(--ink)}
table.cmp .sm{font-size:11.5px;color:var(--sub);display:inline-block;margin-top:3px;line-height:1.6}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.offer .was2{margin-top:10px;font-size:13px;color:#94A0B8;letter-spacing:.02em}
.offer .was2 b{color:#fff;font-weight:600}
.work .meta h3 .loc{display:block;font-size:12px;font-weight:400;color:var(--sub);margin-top:4px;letter-spacing:.02em}
.frame img[data-frame]{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;border:0}

/* ---------- オープニング（初回のみ・カレンダーが三日めくれる） ---------- */
#opening{position:fixed;inset:0;z-index:900;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .5s ease}
#opening.done{opacity:0;pointer-events:none}
.op-inner{text-align:center;perspective:900px}
.op-cal{position:relative;width:132px;height:150px;margin:0 auto}
.op-card{
  position:absolute;inset:0;border-radius:12px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transform-origin:50% 0%;backface-visibility:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  transform:rotateX(-92deg);opacity:0;
}
.op-card.show{transform:rotateX(0deg);opacity:1;
  transition:transform .42s cubic-bezier(.2,.9,.25,1),opacity .18s ease}
.op-card.tear{transform:rotateX(92deg);opacity:0;
  transition:transform .38s cubic-bezier(.6,0,.9,.4),opacity .3s ease .08s}
.op-num{font-size:58px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:.02em}
.op-card[data-i="3"] .op-num{color:var(--blue)}
.op-lbl{font-size:12px;color:var(--sub);letter-spacing:.24em;padding-left:.24em}
.op-word{margin-top:30px;font-size:15px;letter-spacing:.2em;color:#fff;opacity:0;
  transition:opacity .5s ease}
.op-word.show{opacity:.92}
.op-skip{position:absolute;right:22px;bottom:20px;background:none;border:0;cursor:pointer;
  color:#94A0B8;font-size:12px;letter-spacing:.1em;padding:8px 10px}
.op-skip:hover{color:#fff}
html.op-lock,html.op-lock body{overflow:hidden}
@media(prefers-reduced-motion:reduce){#opening{display:none}}

/* ---------- 「なぜ三日か」の動くアイコン ---------- */
.why .card .ic{width:72px;height:56px;display:block;margin-bottom:14px;overflow:visible}
.why .ic rect,.why .ic circle,.why .ic path,.why .ic line{transform-box:fill-box;transform-origin:50% 50%}

/* 1 材料が埋まる */
.ic-rows rect{fill:#E3E8F0}
.ic-ticks path{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22}
.why .card:hover .ic-ticks .t1,.ic-ticks .t1{animation:draw 3.6s ease-in-out infinite}
.ic-ticks .t2{animation:draw 3.6s ease-in-out .35s infinite}
.ic-ticks .t3{animation:draw 3.6s ease-in-out .7s infinite}
@keyframes draw{0%{stroke-dashoffset:22}18%,72%{stroke-dashoffset:0}90%,100%{stroke-dashoffset:22}}

/* 2 間に人が入らない */
.ic .ln{stroke:#E3E8F0;stroke-width:3;stroke-linecap:round}
.ic .mid{fill:var(--blue)}
.ic .gh{fill:#C9D2E0;animation:fadeout 3.2s ease-in-out infinite}
.ic .g2{animation-delay:.4s}
@keyframes fadeout{0%,20%{opacity:1;transform:scale(1)}55%,100%{opacity:0;transform:scale(.4)}}

/* 3 AI（立方体が回る） */
.ic .cube{transform-origin:36px 28px;animation:float 4.2s ease-in-out infinite}
.ic .f1{fill:#33456A}
.ic .f2{fill:var(--ink)}
.ic .f3{fill:var(--blue);animation:faceglow 4.2s ease-in-out infinite}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-4px) rotate(-4deg)}}
@keyframes faceglow{0%,100%{opacity:1}50%{opacity:.72}}

/* 4 画面で決める */
.ic .scr{fill:none;stroke:#C9D2E0;stroke-width:2.5}
.ic .bar,.ic .bar2{fill:#D6DDE8}
.ic .bar2{animation:widen 3.4s ease-in-out infinite}
@keyframes widen{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.6)}}
.ic .cur{fill:var(--ink);animation:point 3.4s ease-in-out infinite}
@keyframes point{0%,100%{transform:translate(0,0)}45%{transform:translate(-14px,-12px)}55%{transform:translate(-14px,-9px)}}

@media(prefers-reduced-motion:reduce){
  .why .ic *{animation:none!important}
  .ic-ticks path{stroke-dashoffset:0}
  .ic .gh{opacity:0}
}

/* 2026-08-23 枠表示（取り消し線なし・比較対照価格を出さない） */
.offer .quota{font-size:14px;color:#94A0B8;letter-spacing:.02em;margin-bottom:6px}

/* 2026-08-23 LPの埋め込みだけ枠を高くする
   理由：LPは画面下に申込ボタンが固定されている。枠が340pxだと
   「ヒーロー＋固定ボタン」で埋まり、間の料金カードが半分に切れて読めなかった。 */
.work .frame.tall{height:520px}
@media(max-width:720px){ .work .frame.tall{height:420px} }

/* 2026-08-23 料金ページ：スマホで金額の2つ並び（50,000円　100,000円）が
   横にはみ出していた。.amount が flex:0 0 auto で縮まないのが原因。 */
@media(max-width:520px){
  .offer .amount{flex:1 1 100%;min-width:0}
  .offer .now{font-size:clamp(32px,11vw,72px);line-height:1.12}
}

/* 2026-08-23 比較表を「確認リスト（2列）」に作り替えたため、
   3〜4列前提の最小幅を外す。スマホで横スクロールさせない。 */
table.cmp.two{min-width:0}

/* 2026-08-23 確認リスト（2列）は、スマホでは表をやめて縦に積む。
   横並びのままだと右の列が細くなり、答えが4文字ずつ折れて読めない。 */
@media(max-width:640px){
  table.cmp.two, table.cmp.two tbody, table.cmp.two tr,
  table.cmp.two th, table.cmp.two td{display:block;width:auto}
  table.cmp.two thead{display:none}
  table.cmp.two tr{background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:16px 18px;margin-bottom:10px}
  table.cmp.two th{border:0;padding:0 0 7px;font-size:13px;color:var(--sub);font-weight:600;background:transparent}
  table.cmp.two td{border:0;padding:0;background:transparent}
  table.cmp.two td.me{background:transparent}

  table.cmp-table, table.cmp-table tbody, table.cmp-table tr,
  table.cmp-table th, table.cmp-table td{display:block;width:auto}
  table.cmp-table thead{display:none}
  table.cmp-table tr{background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:16px 18px;margin-bottom:10px}
  table.cmp-table th{border:0;padding:0 0 7px;font-size:13px;color:var(--sub);font-weight:600;background:transparent}
  table.cmp-table td{border:0;padding:0;background:transparent;white-space:normal}
  table.cmp-table td:last-child{background:transparent}
  table.cmp-table{min-width:0;margin-top:28px}
}

/* 確認リスト（2列）は左の見出し列を広く取る。9emだと見出しが3行に折れる。 */
@media(min-width:641px){ .cmp-table.two tbody th{width:16em} }
.self-proof{margin-top:52px;font-size:13px;color:var(--sub);letter-spacing:.06em;text-align:center}
@media(max-width:900px){.self-proof{margin-top:34px}}

/* ---------- ヒーロー下：つくったものの壁 ---------- */
.wall{margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}
.wall-lead{max-width:var(--maxw);margin:0 auto 18px;padding:0 22px;
  font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.wall-lead span{font-weight:400;color:var(--sub);margin-left:10px;letter-spacing:.02em}
.wall-view{display:flex;gap:16px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wall-track{display:flex;gap:16px;flex:0 0 auto;animation:wallslide 46s linear infinite}
.wall-view:hover .wall-track{animation-play-state:paused}
@keyframes wallslide{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 16px))}}
.wall-item{flex:0 0 auto;width:250px;margin:0}
.wall-item img{width:100%;height:158px;object-fit:cover;object-position:top center;
  border-radius:10px;border:1px solid var(--line);display:block;background:#fff}
.wall-item figcaption{margin-top:7px;font-size:11.5px;color:var(--sub);letter-spacing:.04em}
@media(max-width:700px){.wall-item{width:190px}.wall-item img{height:122px}.wall{margin-top:38px}}
@media(prefers-reduced-motion:reduce){.wall-track{animation:none}.wall-view{overflow-x:auto}}

/* ---------- よくある困りごと ---------- */
.nayami{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:960px){.nayami{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.nayami{grid-template-columns:1fr}}
.ny{background:#fff;border-radius:16px;padding:26px 24px;border:1px solid rgba(0,0,0,.05)}
.ny h3{font-size:17px;font-weight:600;margin-bottom:9px;letter-spacing:-.005em;
  padding-left:16px;position:relative}
.ny h3::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--blue)}
.ny p{font-size:14.5px;color:var(--sub);line-height:1.75}

/* ---------- 画面に固定した相談ボタン ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:80;
  background:var(--ink);color:#fff!important;border-radius:14px;
  padding:13px 20px;font-size:15px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 10px 28px rgba(22,35,58,.28);
  display:flex;flex-direction:column;gap:2px;line-height:1.3;
  transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease}
.fab span{font-size:11px;font-weight:400;opacity:.72;letter-spacing:.04em}
.fab:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 34px rgba(22,35,58,.34)}
.fab:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(max-width:640px){
  .fab{left:14px;right:14px;bottom:14px;align-items:center;padding:14px 18px;border-radius:12px}
}

/* ============================================================
   品質不合格の修正（2026-09-04・OWNER承認）
   ★対象は3項目だけ：①本文16px未満 ②タップ44px未満 ③行送り150%未満
   ★デザイン再設計・構成変更・コピー変更は含みません。
   ★根拠：50_seisakubu/06_HINSHITSU_KIJUN.md §2（本文16px）・§3（行送り150%）・§5（タップ44px）
   ★元ファイルの控え：../_bak_style_2026-09-04_hinshitsu.css
   ============================================================ */

/* ① 本文を16px以上に ------------------------------------------- */
/* 実測で16px未満だった本文相当（p / li / td / th）をまとめて引き上げる */
.wrap p, .wrap li, .wrap td, .wrap th,
.legal, .legal p, .legal li,
.tl-item p,
.plan li, .plan .term,
.faq details p, details p,
.why .card p,
.note, .note p,
.nayami .ny p,
.steps .step p,
.keep .txt p,
.card2 li,
table, table td, table th,
table.cmp td, table.cmp th,
table.cmp-table td, table.cmp-table th{
  font-size:16px;
}

/* ③ 行送りを150%以上に ----------------------------------------- */
.plan li{line-height:1.6}
.card2 li{line-height:1.6}

/* ② 押せるものの当たり判定を44px以上に ------------------------- */
/* 単独で置かれているリンク・ボタン：高さそのものを44pxにする */
.link-more,
footer .foot-in a,
.nav-in .brand,
.burger,
.op-skip{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
/* 文中のリンク（パンくず）：見た目を変えずに当たり判定だけ広げる
   （padding で広げ、同じ量の負のマージンで打ち消す） */
.crumb a,
.note a,
.legal a{
  display:inline-block;
  padding:14px 6px;
  margin:-14px -6px;
}

/* 640px以下で13pxに落としていた比較表も16pxへ */
@media(max-width:640px){
  table.cmp.two th, table.cmp.two td,
  table.cmp-table th, table.cmp-table td{font-size:16px}
}

/* PC幅のナビゲーションのリンクも44pxへ（375pxでは既に44px以上） */
.nav-links a{min-height:44px;display:inline-flex;align-items:center}

/* ---------- 2026-09-12 追加：実績が自社事業だと分かるようにする ---------- */
.wall-note{max-width:760px;margin:0 auto 28px;padding:0 20px;
 font-size:16px;line-height:1.85;color:#5a6472;text-align:center}
.wall-note strong{color:#1b2a4a}
.sp-sub{display:block;margin-top:6px;font-size:16px;line-height:1.8;opacity:.72}
@media (max-width:640px){.wall-note{font-size:16px;text-align:left}}

/* ---------- 2026-09-12 追加：リスクの引き受け（料金の直後・折りたたまない） ---------- */
.risk{max-width:760px;margin:56px auto 0;padding:32px 34px;
 background:#fff;border:1px solid #e3e7ee;border-radius:14px}
.risk-ttl{margin:0 0 20px;font-size:20px;line-height:1.6;font-weight:700;color:#1b2a4a}
.risk-list{margin:0;padding:0;list-style:none;counter-reset:r}
.risk-list li{position:relative;margin:0 0 18px;padding-left:44px;counter-increment:r}
.risk-list li:last-child{margin-bottom:0}
.risk-list li::before{content:counter(r);position:absolute;left:0;top:2px;
 width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;
 background:#1b2a4a;color:#fff;font-size:14px;font-weight:700}
.risk-list strong{display:block;font-size:16.5px;line-height:1.75;color:#1b2a4a}
.risk-list span{display:block;margin-top:4px;font-size:16px;line-height:1.85;color:#5a6472}
@media (max-width:640px){
 .risk{margin-top:40px;padding:24px 20px;border-radius:12px}
 .risk-ttl{font-size:18px}
 .risk-list li{padding-left:38px}
 .risk-list strong{font-size:16px}
}

/* ---------- 2026-09-12 追加：無料サイト診断（主導線） ---------- */
.cta-note{margin:14px 0 0;font-size:16px;line-height:1.8;color:#5a6472}
.shindan{padding:88px 0 96px;background:#1b2a4a;color:#fff;text-align:left}
.shindan .wrap,.shindan .narrow{text-align:left}
.shindan .eyebrow{color:#e8a894;font-size:16px;letter-spacing:.16em;margin:0 0 18px}
.shindan h2{font-size:clamp(26px,3.6vw,38px);line-height:1.55;margin:0 0 22px;font-weight:600;color:#fff}
.shindan h2 strong{color:#ffd9cc}
.shindan .lead{font-size:17px;line-height:1.95;color:#c8d0dd;margin:0 0 44px}
.shindan .lead strong{color:#fff}
.sh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.sh-item{background:rgba(255,255,255,.06);border-radius:14px;padding:26px 24px}
.sh-n{width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;
 background:#c0563d;color:#fff;font-size:15px;font-weight:700;margin:0 0 14px}
.sh-t{text-align:left;margin:0 0 9px;font-size:17.5px;line-height:1.65;font-weight:700;color:#fff}
.sh-d{text-align:left;margin:0;font-size:16px;line-height:1.9;color:#bcc6d6}
/* ★濃紺の上のリンクは、コントラスト4.5:1を満たす色にする（#e8a894＝7.08:1・実測） */
.shindan a:not(.btn){color:#e8a894;text-decoration:underline;text-underline-offset:3px}
.shindan a:not(.btn):hover{color:#ffd9cc}
.sh-note{margin:40px 0 0;padding:26px 26px;background:rgba(255,255,255,.06);border-radius:14px}
.sh-note p{text-align:left;margin:0 0 12px;font-size:16px;line-height:1.9;color:#c8d0dd}
.sh-note p:last-child{margin-bottom:0}
.sh-note strong{color:#fff}
.shindan .btn{background:#fff;color:#1b2a4a}
@media (max-width:760px){
 .shindan{padding:64px 0 72px}
 .sh-grid{grid-template-columns:1fr;gap:16px}
 .sh-item{padding:22px 20px}
 .shindan .lead{margin-bottom:32px}
}

/* ---------- 2026-09-12：実績を「小さく流す」→「大きく見せる」に変更 ----------
   旧：250×158px のサムネイルを自動スクロール（作り込みが見えなかった）
   新：2列の大きな組み。画面・構成・説明・実物リンクをセットで出す        */
.showcase{max-width:var(--maxw);margin:0 auto;padding:0 22px;
 display:grid;grid-template-columns:repeat(2,1fr);gap:44px 36px}
.sc{margin:0}
.sc-shot{border-radius:14px;overflow:hidden;background:#0e1524;
 box-shadow:0 10px 30px rgba(16,24,40,.12)}
.sc-shot img{display:block;width:100%;height:auto;aspect-ratio:1100/687;
 object-fit:cover;object-position:top center}
.sc-txt{padding:20px 2px 0}
.sc-kind{margin:0 0 6px;font-size:20px;line-height:1.5;font-weight:700;color:var(--ink)}
.sc-spec{margin:0 0 12px;font-size:16px;line-height:1.7;color:var(--accent);font-weight:600}
.sc-desc{margin:0;font-size:16px;line-height:1.95;color:var(--sub)}
.sc-desc strong{color:var(--ink)}
.sc-live{margin:14px 0 0;font-size:16px;line-height:1.7}
.sc-live a{color:var(--accent);font-weight:600;text-decoration:underline;
 text-underline-offset:3px;display:inline-block;padding:6px 0}
.sc-live .ar{margin-left:6px}
@media(max-width:820px){
 .showcase{grid-template-columns:1fr;gap:36px}
 .sc-txt{padding-top:16px}
 .sc-kind{font-size:19px}
}

/* F1 burger desktop fix (2026-09-13)：.burger を44px化する共通ルールが display:inline-flex を上書きし、PCでもメニューアイコンが出ていた */
@media(min-width:821px){.burger{display:none}}