:root{
    /* ---- colors ---- */
    --ink:#111111;
    --canvas:#ffffff;
    --soft-cloud:#f5f5f5;
    --charcoal:#39393b;
    --ash:#4b4b4d;
    --mute:#707072;
    --stone:#9e9ea0;
    --hairline:#cacacb;
    --hairline-soft:#e5e5e5;
    --success:#007d48;      /* 「無料」の合図。価格の合図にだけ使う */
    --line-green:#06C755;   /* LINEアイコンの線のみ */

    /* ---- spacing (8px base) ---- */
    --xxs:2px; --xs:4px; --sm:8px; --md:12px; --lg:18px; --xl:24px; --xxl:30px;
    --section:48px;

    /* ---- radius ---- */
    --r-none:0px;
    --r-md:24px;
    --r-lg:30px;
    --r-full:9999px;

    --max:1440px;
    --gutter:24px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:"Noto Sans JP","Helvetica Neue",Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:var(--canvas);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.2;}
  p{margin:0;}
  ul,ol,dl,dd,dt{margin:0;padding:0;list-style:none;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}

  /* 欧文ラベル（PROCESS / PRICE など） */
  .label{
    font-family:"Bebas Neue","Helvetica Neue",Arial,sans-serif;
    letter-spacing:.06em;
    line-height:1;
  }

  .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
  section{padding:32px 0;}
  @media (min-width:640px){ :root{--gutter:40px;} section{padding:var(--section) 0;} }
  @media (min-width:1920px){ :root{--gutter:80px;} }

  /* ================= 文字階層 ================= */
  /* 日本語には大文字がないため、資料の96px大文字ロックアップは
     太いゴシック＋詰めた行間で置き換えている */
  .display{
    font-weight:900;
    font-size:clamp(2.5rem,9vw,5.25rem);
    line-height:1.02;
    letter-spacing:-.02em;
  }
  .h-xl{font-size:clamp(1.5rem,4vw,2rem);font-weight:900;line-height:1.2;letter-spacing:-.01em;}
  .h-lg{font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;line-height:1.2;}
  .h-md{font-size:1rem;font-weight:700;line-height:1.75;}
  .body{font-size:1rem;font-weight:400;line-height:1.75;}
  .body-strong{font-size:1rem;font-weight:500;line-height:1.5;}
  .cap-md{font-size:.875rem;font-weight:500;line-height:1.5;color:var(--mute);}
  .cap-sm{font-size:.75rem;font-weight:500;line-height:1.5;}
  .util-xs{font-size:.6875rem;font-weight:500;line-height:1.75;color:var(--mute);}

  /* ================= ボタン ================= */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--sm);
    min-height:48px;padding:0 32px;
    border-radius:var(--r-lg);
    font-size:1rem;font-weight:500;line-height:1.5;
    border:1px solid transparent;
    transition:opacity .12s ease;
    cursor:pointer;
  }
  .btn:active{opacity:.6;}
  .btn-primary{background:var(--ink);color:var(--canvas);}
  .btn-secondary{background:var(--soft-cloud);color:var(--ink);}
  .btn-on-image{background:var(--canvas);color:var(--ink);min-height:44px;padding:0 24px;}
  .btn-outline-dark{background:transparent;color:var(--canvas);border-color:rgba(255,255,255,.5);}
  .btn-sm{min-height:44px;padding:0 20px;font-size:.875rem;}
  .btn svg{flex-shrink:0;}
  .ic-line{stroke:var(--line-green);}

  /* ================= ナビ ================= */
  .nav{
    position:sticky;top:0;z-index:50;
    background:var(--canvas);
    box-shadow:inset 0 -1px 0 var(--hairline-soft);
  }
  .nav .wrap{
    height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--md);
  }
  @media (min-width:1024px){ .nav .wrap{height:64px;} }
  /* ロゴは必ず1行。スマホは画面幅に合わせて入るいちばん大きいサイズ（最大30px） */
  .brand{
    font-weight:900;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;
    font-size:min(calc((100vw - 100px) / 12.9), 1.875rem);
  }
  @media (min-width:640px){ .brand{font-size:1.875rem;} }  /* 30px */
  @media (min-width:768px){ .brand{font-size:2.25rem;} }   /* 36px */
  /* スマホは下部の固定バーに予約ボタンがあるので、ナビの予約ボタンは隠してロゴの幅を確保 */
  @media (max-width:639px){ .nav-right .btn{display:none;} }
  .nav-links{display:none;gap:var(--xl);}
  @media (min-width:1200px){ .nav-links{display:flex;} }
  .nav-links a{font-size:1rem;font-weight:500;padding:4px 0;}
  .nav-links a:hover{box-shadow:inset 0 -2px 0 var(--ink);}
  .nav-right{display:flex;align-items:center;gap:var(--sm);}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:0;background:var(--soft-cloud);
    border-radius:var(--r-full);cursor:pointer;
  }
  @media (min-width:1200px){ .nav-toggle{display:none;} }

  /* モバイルのドロワー */
  .drawer{display:none;border-top:1px solid var(--hairline-soft);background:var(--canvas);}
  .drawer.open{display:block;}
  @media (min-width:1200px){ .drawer{display:none!important;} }
  .drawer a{
    display:block;padding:var(--lg) var(--gutter);
    font-size:1rem;font-weight:500;
    border-bottom:1px solid var(--hairline-soft);
  }

  /* ================= キャンペーンヒーロー ================= */
  .campaign{position:relative;background:var(--ink);}
  .campaign img{width:100%;height:100%;object-fit:cover;}
  .campaign .media{aspect-ratio:4/5;}
  @media (min-width:768px){ .campaign .media{aspect-ratio:16/9;} }
  .campaign .scrim{
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%);
  }
  .campaign .copy{
    position:absolute;left:0;right:0;bottom:0;
    padding:var(--xl) var(--gutter) var(--xxl);
    color:var(--canvas);
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--lg);
    max-width:var(--max);margin:0 auto;
  }
  @media (min-width:1024px){ .campaign .copy{padding-bottom:var(--section);} }
  .campaign .display{color:var(--canvas);}
  .campaign .sub{font-size:1rem;font-weight:500;line-height:1.5;max-width:34em;}
  .hero-tall{display:block;}
  .hero-wide{display:none;}
  @media (min-width:768px){ .hero-tall{display:none;} .hero-wide{display:block;} }

  /* ================= セクション見出し ================= */
  .sec-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:var(--md);
    margin-bottom:var(--xl);
  }
  .sec-head .label{font-size:1.125rem;color:var(--mute);}
  .sec-head h2{margin-bottom:var(--xs);}
  .sec-lead{color:var(--mute);font-size:.875rem;font-weight:500;margin-top:var(--sm);}

  /* ================= グリッド ================= */
  .grid{display:grid;gap:var(--sm);}
  .grid-2{grid-template-columns:repeat(1,minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(1,minmax(0,1fr));}
  @media (min-width:600px){
    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
    .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (min-width:1024px){
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  }

  /* ================= フラットカード ================= */
  .tile{
    background:var(--soft-cloud);
    border-radius:var(--r-none);
    padding:var(--xl);
    display:flex;flex-direction:column;gap:var(--md);
  }
  .tile .n{
    font-family:"Bebas Neue",Arial,sans-serif;
    font-size:2rem;line-height:1;color:var(--ink);
  }
  .tile .shot{
    position:relative;
    aspect-ratio:16/9;
    margin:calc(var(--xl) * -1) calc(var(--xl) * -1) var(--xs);
    background:var(--hairline-soft);overflow:hidden;
  }
  .tile .shot img{width:100%;height:100%;object-fit:cover;display:block;}
  .tile .sym{color:var(--mute);font-size:.875rem;font-weight:500;line-height:1.6;}
  .tile .body{font-size:.9375rem;line-height:1.75;}

  /* ================= 工程（写真カード） ================= */
  .step{display:flex;flex-direction:column;gap:var(--md);}
  .step .shot{
    aspect-ratio:1/1;background:var(--soft-cloud);
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .step .shot img{width:100%;height:100%;object-fit:cover;}
  .step .shot .no-photo{
    font-family:"Bebas Neue",Arial,sans-serif;
    font-size:1rem;color:var(--stone);letter-spacing:.06em;
  }
  .step .stepno{
    position:absolute;top:0;left:0;
    background:var(--canvas);color:var(--ink);
    font-family:"Bebas Neue",Arial,sans-serif;font-size:1rem;
    padding:var(--xs) var(--md);
    border-radius:var(--r-lg);
    margin:var(--md);
  }
  .step h3{font-size:1rem;font-weight:500;line-height:1.5;}
  .step p{font-size:.875rem;font-weight:400;line-height:1.6;color:var(--mute);}
  .imgnote{
    position:absolute;right:0;bottom:0;
    background:var(--canvas);color:var(--mute);
    font-size:.6875rem;line-height:1;
    padding:var(--xs) var(--sm);
    border-radius:var(--r-lg);
    margin:var(--md);
  }

  /* ================= 料金 ================= */
  .price{
    background:var(--canvas);
    padding:var(--xl) 0;
    border-top:1px solid var(--hairline);
    display:flex;flex-direction:column;gap:var(--sm);
  }
  .price .row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--md);}
  .price .amount{font-size:1.25rem;font-weight:700;white-space:nowrap;}
  .price .desc{color:var(--mute);font-size:.875rem;line-height:1.6;}
  .price .who{font-size:.75rem;font-weight:500;color:var(--ink);}
  .free-list{
    background:var(--soft-cloud);padding:var(--xl);
    display:flex;flex-direction:column;gap:var(--md);
  }
  .free-list .amount{color:var(--success);font-weight:700;}
  .free-list .row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--md);
    padding-bottom:var(--md);box-shadow:inset 0 -1px 0 var(--hairline);}
  .free-list .row:last-child{box-shadow:none;padding-bottom:0;}

  /* ================= 黒ブロック（ご予約） ================= */
  .block-dark{background:var(--ink);color:var(--canvas);}
  .block-dark .sec-head .label{color:var(--stone);}
  .block-dark .lead{font-size:1rem;font-weight:400;line-height:1.75;color:var(--stone);max-width:34em;}
  .book-actions{display:flex;flex-direction:column;gap:var(--md);margin:var(--xl) 0;}
  @media (min-width:600px){ .book-actions{flex-direction:row;flex-wrap:wrap;} }
  .book-note{color:var(--stone);font-size:.875rem;font-weight:500;}
  .flow{display:grid;gap:0;margin-top:var(--xl);}
  .flow li{
    display:flex;align-items:baseline;gap:var(--lg);
    padding:var(--lg) 0;
    box-shadow:inset 0 -1px 0 var(--ash);
  }
  .flow .n{font-family:"Bebas Neue",Arial,sans-serif;font-size:1.25rem;color:var(--stone);flex-shrink:0;width:24px;}
  .flow span:last-child{font-size:1rem;font-weight:500;}
  .ask{margin-top:var(--xl);display:grid;gap:var(--md);}
  .ask li{display:flex;gap:var(--md);font-size:.875rem;line-height:1.7;color:var(--stone);}
  .ask li::before{content:"—";color:var(--ash);flex-shrink:0;}

  /* ================= プロフィール ================= */
  .profile{display:grid;gap:var(--xl);}
  @media (min-width:768px){ .profile{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--xxl);} }
  .profile .shot{aspect-ratio:1/1;background:var(--soft-cloud);display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .profile .shot img{width:100%;height:100%;object-fit:cover;}
  .profile .shot .no-photo{font-family:"Bebas Neue",Arial,sans-serif;color:var(--stone);letter-spacing:.06em;}
  .profile .role{color:var(--mute);font-size:.875rem;font-weight:500;margin-top:var(--xs);}
  .profile .text{display:flex;flex-direction:column;gap:var(--lg);}
  .profile .text p{font-size:1rem;line-height:1.75;}
  .profile .creds{margin:0;border-top:1px solid var(--hairline-soft);}
  .profile .creds > div{display:grid;grid-template-columns:3.5em minmax(0,1fr);gap:var(--md);padding:var(--sm) 0;border-bottom:1px solid var(--hairline-soft);}
  .profile .creds dt{font-size:.875rem;font-weight:500;color:var(--mute);line-height:1.7;}
  .profile .creds dd{margin:0;font-size:.9375rem;font-weight:500;line-height:1.7;}
  .flag{
    border:1px solid var(--hairline);padding:var(--md) var(--lg);
    font-size:.75rem;font-weight:500;color:var(--mute);
  }

  /* ================= ブログ ================= */
  .col-item{display:flex;flex-direction:column;gap:var(--md);}
  /* トップのブログ予告カード。カード全体がリンク */
  a.post-card h3{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;}
  a.post-card:hover h3,a.post-card:focus-visible h3{text-decoration-color:var(--ink);}
  /* blog.html#post-NN で飛んだとき、固定ナビに見出しが隠れないように */
  .col-item[id],.col-link[id]{scroll-margin-top:96px;}
  /* 表を載せる回だけ、グリッドの全幅を使う */
  .col-item.wide{grid-column:1/-1;background:var(--soft-cloud);padding:var(--xl);}
  @media (min-width:640px){ .col-item.wide{padding:var(--xxl);} }
  .col-item.wide .steps-how{display:grid;gap:var(--lg);margin-top:var(--sm);}
  @media (min-width:768px){ .col-item.wide .steps-how{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--xl);} }
  .col-item.wide .steps-how h4{font-size:1rem;font-weight:700;margin-bottom:var(--xs);}
  .col-item.wide .steps-how p{font-size:.875rem;line-height:1.7;color:var(--mute);}
  .col-item.wide .steps-how .n{
    font-family:"Bebas Neue",Arial,sans-serif;font-size:1.5rem;
    color:var(--ink);line-height:1;display:block;margin-bottom:var(--xs);
  }
  /* 早見表。狭い画面では表だけ横にスクロールする */
  .tbl-scroll{overflow-x:auto;margin-top:var(--sm);}
  table.size{border-collapse:collapse;width:100%;min-width:420px;font-size:.875rem;}
  table.size caption{
    text-align:left;font-weight:700;padding:var(--md) 0 var(--sm);
    font-size:.9375rem;
  }
  table.size th,table.size td{
    border-bottom:1px solid var(--hairline);
    padding:var(--sm) var(--md);text-align:right;white-space:nowrap;
  }
  table.size th:first-child,table.size td:first-child{text-align:left;font-weight:700;}
  table.size thead th{border-bottom:1px solid var(--ink);font-weight:700;}
  .col-item .shot{aspect-ratio:1/1;background:var(--soft-cloud);}
  .col-item .shot img{width:100%;height:100%;object-fit:cover;}
  .col-item .idx{font-family:"Bebas Neue",Arial,sans-serif;font-size:1rem;color:var(--mute);letter-spacing:.06em;}
  .col-item h3{font-size:1rem;font-weight:500;line-height:1.5;}
  .col-item p{font-size:.875rem;line-height:1.7;color:var(--mute);}
  .col-link{
    display:block;margin-top:var(--xl);
    background:var(--soft-cloud);padding:var(--xl);
    border-bottom:1px solid transparent;
  }
  @media (min-width:640px){ .col-link{padding:var(--xxl);} }
  .col-link .idx{font-family:"Bebas Neue",Arial,sans-serif;font-size:1rem;color:var(--mute);letter-spacing:.06em;display:block;}
  .col-link h3{margin-top:var(--sm);}
  .col-link p{font-size:.9375rem;line-height:1.75;color:var(--ash);margin-top:var(--sm);max-width:62ch;}
  .col-link .cta{
    display:inline-flex;align-items:center;gap:var(--sm);
    margin-top:var(--lg);font-size:.875rem;font-weight:500;
    padding-bottom:var(--xxs);box-shadow:inset 0 -1px 0 var(--hairline);
  }
  .col-link:hover .cta{box-shadow:inset 0 -1px 0 var(--ink);}

  /* ================= FAQ ================= */
  .rows{border-top:1px solid var(--hairline);}
  .rows details{border-bottom:1px solid var(--hairline);}
  .rows summary{
    list-style:none;cursor:pointer;
    padding:var(--xl) 0;
    font-size:1rem;font-weight:700;line-height:1.75;
    display:flex;align-items:center;justify-content:space-between;gap:var(--md);
  }
  .rows summary::-webkit-details-marker{display:none;}
  .rows summary .chev{flex-shrink:0;transition:transform .15s ease;}
  .rows details[open] summary .chev{transform:rotate(180deg);}
  .rows .a{padding:0 0 var(--xl);font-size:.9375rem;line-height:1.75;color:var(--mute);max-width:60em;}

  /* ================= アクセス ================= */
  .facts{border-top:1px solid var(--hairline);}
  .facts .row{
    display:grid;gap:var(--xs);
    padding:var(--lg) 0;border-bottom:1px solid var(--hairline);
  }
  @media (min-width:600px){ .facts .row{grid-template-columns:180px minmax(0,1fr);gap:var(--lg);align-items:baseline;} }
  .facts dt{color:var(--mute);font-size:.875rem;font-weight:500;}
  .facts dd{font-size:1rem;font-weight:500;line-height:1.6;}
  .facts a{box-shadow:inset 0 -1px 0 var(--ink);}
  .caution{margin-top:var(--xl);color:var(--mute);font-size:.8125rem;line-height:1.7;max-width:60em;}

  /* ================= フッター ================= */
  footer{border-top:1px solid var(--hairline);padding:var(--section) 0 var(--xl);}
  .foot-grid{display:grid;gap:var(--xl);}
  @media (min-width:600px){ .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
  .foot-grid h4{font-size:1rem;font-weight:500;margin-bottom:var(--md);}
  .foot-grid li{margin-bottom:var(--sm);}
  .foot-grid a{color:var(--mute);font-size:.875rem;font-weight:500;}
  .foot-grid a:hover{color:var(--ink);}
  .fine{
    margin-top:var(--xxl);padding-top:var(--lg);
    border-top:1px solid var(--hairline-soft);
    display:flex;flex-wrap:wrap;gap:var(--lg);
  }

  /* ================= モバイル固定バー ================= */
  .sticky{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--canvas);
    box-shadow:inset 0 1px 0 var(--hairline);
    padding:var(--md) var(--gutter);
    display:none;gap:var(--sm);
  }
  .sticky .btn{flex:1 1 0;padding:0 12px;font-size:.875rem;}
  @media (max-width:767px){
    .sticky{display:flex;}
    body{padding-bottom:80px;}
  }