/* nico-BASEMENT サイト共通スタイル（Claude Design 由来のトークンを抽出） */
:root{
  --cream:#FBF6EF; --cream2:#F4EADB; --ink:#322E29; --ink-soft:#5c564d;
  --orange:#E67E3A; --orange-deep:#C9642A; --peach:#FCE7D2; --teal:#2C8683; --line:#06C755;
  --sun:#E67E3A; --border:#EFE6D6;
  --maru:'Zen Maru Gothic',sans-serif;
}
*{box-sizing:border-box}
/* overflow-x は clip を使う。hidden だと祖先が「スクロールコンテナ」化して
   position:sticky（追従ヘッダー）が効かなくなるため。clip は横はみ出しを防ぎつつ sticky を壊さない。 */
html{overflow-x:clip}
body{margin:0;background:var(--cream);font-family:'Zen Kaku Gothic New',sans-serif;
  overflow-x:clip;font-size:16px;line-height:1.75;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
img{max-width:100%}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* image-slot の置き換え: 親（aspect-ratio+overflow:hidden）にフィットする画像 */
.nb-slot{width:100%;height:100%;object-fit:cover;display:block}
/* 画像未設定スロットのプレースホルダ */
.nb-ph{width:100%;height:100%;min-height:80px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#F4EADB,#FCE7D2);color:#b79a72;font-size:12px;text-align:center;
  padding:10px;font-family:var(--maru);font-weight:700;line-height:1.5}

/* ===== ヘッダー（PC=テキストナビ / スマホ=LINEアイコン＋ハンバーガー） ===== */
.nb-h{display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,40px);background:rgba(251,246,239,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:20}
.nb-logo{display:flex;align-items:center;gap:4px;font-family:var(--maru);font-weight:900;
  font-size:22px;white-space:nowrap;flex-shrink:0}
.nb-logo img{width:46px;height:46px;margin-left:6px;margin-top:-5px;display:block;flex-shrink:0}
.nb-logo-txt{display:flex;flex-direction:column;line-height:1.1}
.nb-logo-sub{font-family:var(--maru);font-weight:500;font-size:11px;color:#a89f8f;letter-spacing:.05em}

.nb-nav-pc{display:flex;align-items:center;gap:16px 18px;font-size:14px;font-weight:500}
.nb-line-btn{display:inline-flex;align-items:center;gap:8px;background:var(--line);color:#fff;
  padding:11px 18px;border-radius:999px;font-weight:700;white-space:nowrap}

.nb-mobile{display:none;align-items:center;gap:10px}
.nb-line-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:var(--line);flex:none}
.nb-line-ico svg{width:24px;height:24px;display:block}
.nb-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;border:0;background:transparent;cursor:pointer}
.nb-burger span{display:block;width:100%;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .22s,opacity .22s}
.nb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nb-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.nb-menu{display:none;position:absolute;top:100%;right:clamp(16px,4vw,40px);
  min-width:230px;background:#fff;border:1px solid #EFE3D2;border-radius:16px;
  box-shadow:0 14px 34px rgba(50,46,41,.16);padding:10px;flex-direction:column;gap:2px}
.nb-menu.open{display:flex}
.nb-menu a{padding:12px 14px;border-radius:10px;font-weight:600;font-size:15px;color:var(--ink)}
.nb-menu a:hover{background:var(--cream);opacity:1}
.nb-menu-line{background:var(--line);color:#fff!important;text-align:center;font-weight:700;margin-top:6px}

@media (max-width:768px){
  .nb-nav-pc{display:none}
  .nb-mobile{display:flex}
}
@media (min-width:769px){
  .nb-menu{display:none!important}
}

/* サービス詳細のヒーロー: PC=左テキスト＋右に縦長写真 /
   スマホ=写真を横長の帯にして高さを抑え、すぐ本文へ入れるようにする */
.nb-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;align-items:center;
  padding-top:44px;padding-bottom:52px}
.nb-hero-img{border-radius:26px;overflow:hidden;aspect-ratio:4/5}
@media (max-width:768px){
  .nb-hero{gap:18px;padding-top:22px;padding-bottom:30px}
  .nb-hero-img{aspect-ratio:16/10;border-radius:18px}
}

/* ビフォーアフターの1コマ。写真は縦長（3:4）なので枠も縦長にする。
   横長(4/3)の枠に入れると上下が切れ、**壁と床の色**という肝心の情報が失われる。
   img は position:absolute で敷く（.nb-listrow__img と同じ作法）。 */
.nb-ba-cell{position:relative;aspect-ratio:3/4}
.nb-ba-cell>.nb-slot{position:absolute;inset:0}

/* メニューカードの本文。SPでは余白を詰める（.nb-listrow のSP余白に近づける）。 */
.nb-mcard__body{padding:24px}
@media (max-width:768px){ .nb-mcard__body{padding:18px} }

/* 選ばれる4つの理由: PC=自動フィット / スマホ=1列（縦積み・読みやすさ優先） */
.nb-reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-bottom:18px}
@media (max-width:768px){ .nb-reasons{grid-template-columns:1fr} }

/* 会社概要ほか: 横パディングをスマホで詰める */
.nb-pad{padding-left:44px;padding-right:44px}
/* 会社情報テーブル: PC=ラベル|値 / スマホ=縦積みで値に幅を与える */
.nb-info-row{display:grid;grid-template-columns:minmax(110px,200px) 1fr;gap:16px;padding:18px 26px;border-bottom:1px solid #F0E7D8}
@media (max-width:768px){
  .nb-pad{padding-left:18px;padding-right:18px}
  .nb-info-row{grid-template-columns:1fr;gap:3px;padding:14px 18px}
}

/* スタッフ紹介: PC=縦カード自動フィット / スマホ=横並び（左に画像・右にテキスト） */
.nb-staff{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;align-items:stretch}
.nb-staff-card{background:#fff;border:2px solid #EFE3D2;border-radius:22px;overflow:hidden;
  box-shadow:0 6px 18px rgba(50,46,41,.05);display:flex;flex-direction:column}
.nb-staff-img{aspect-ratio:1/1}
@media (max-width:768px){
  .nb-staff{grid-template-columns:1fr;gap:14px}
  .nb-staff-card{flex-direction:row;align-items:stretch}
  .nb-staff-img{width:120px;flex:none;aspect-ratio:auto}
}

/* 写真を送るときのヒント: PC=縦カード / スマホ=コンパクトな横並び行（LINEまで届くように） */
.nb-hints{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.nb-hint{background:#fff;border:2px solid #EFE3D2;border-radius:20px;padding:26px 22px}
.nb-hint-no{width:44px;height:44px;border-radius:14px;background:#FCE7D2;color:#E67E3A;
  font-family:var(--maru);font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.nb-hint-t{font-family:var(--maru);font-weight:700;font-size:17px;margin-bottom:8px}
.nb-hint-d{font-size:14px;color:#6b655c;line-height:1.7}
@media (max-width:768px){
  .nb-hints{grid-template-columns:1fr;gap:8px}
  .nb-hint{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px}
  .nb-hint-no{width:30px;height:30px;border-radius:9px;font-size:15px;margin-bottom:0;flex:none}
  .nb-hint-t{font-size:15px;margin-bottom:2px}
  .nb-hint-d{font-size:12.5px;line-height:1.5}
}

/* 料金のめやす: PC=サービス名｜料金の左右 / スマホ=縦積み（料金が全幅で読みやすい） */
.nb-price-row{display:flex;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid #F0E7D8}
.nb-price-svc{font-family:var(--maru);font-weight:700;font-size:16px;flex:none}
.nb-price-guide{font-size:15px;color:#6b655c;text-align:right}
@media (max-width:768px){
  .nb-price-row{flex-direction:column;gap:3px;padding:13px 16px}
  .nb-price-guide{text-align:left;font-size:14px}
}

/* こんなことも頼めます（タグ）: PC=中央寄せ / スマホ=左寄せ・小さめで行を揃える */
.nb-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.nb-chip{background:#fff;border-radius:999px;padding:11px 18px;font-size:14px;font-weight:500;box-shadow:0 3px 8px rgba(50,46,41,.06)}
@media (max-width:768px){
  .nb-chips{gap:8px;justify-content:flex-start}
  .nb-chip{padding:9px 14px;font-size:13px}
}

/* ステップ（4ステップ/ご依頼の流れ）: PC=縦カード / スマホ=コンパクトな横並び行
   背景は変種で切替: --teal（濃色帯の上）/ --card（白カード） */
.nb-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.nb-step{border-radius:18px;padding:22px 18px;text-align:center}
.nb-step--teal{background:rgba(255,255,255,.1)}
.nb-step--card{background:#fff;border:2px solid #EFE3D2}
.nb-step--ihin{border-color:#E4E0D6}
.nb-step--ihin .nb-step-no{background:#285E5B}
.nb-step-no{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:#E67E3A;color:#fff;
  font-family:var(--maru);font-weight:900;font-size:19px;display:flex;align-items:center;justify-content:center}
.nb-step-t{font-family:var(--maru);font-weight:700;font-size:16px;margin-bottom:6px}
.nb-step-d{font-size:13px;color:#6b655c;line-height:1.6}
.nb-step--teal .nb-step-t{color:#fff}
.nb-step--teal .nb-step-d{color:#d8f0ef}
@media (max-width:768px){
  .nb-steps{grid-template-columns:1fr;gap:8px}
  .nb-step{display:flex;align-items:center;gap:14px;padding:12px 16px;text-align:left}
  .nb-step-no{margin:0;flex:none;width:36px;height:36px;font-size:16px}
  .nb-step-t{margin-bottom:1px;font-size:15px}
}

/* ===== かんたん相談シート（1問ずつスライドするウィザード） ===== */
.nb-quiz{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.nb-quiz[hidden]{display:none}
.nb-quiz__backdrop{position:absolute;inset:0;background:rgba(40,30,20,.5);animation:nbFade .2s ease}
.nb-quiz__panel{position:relative;background:#fff;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  border-radius:22px 22px 0 0;padding:26px clamp(18px,5vw,30px) calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.2);animation:nbUp .28s cubic-bezier(.2,.7,.2,1)}
@media (min-width:600px){
  .nb-quiz{align-items:center}
  .nb-quiz__panel{border-radius:22px;max-height:88vh;animation:nbPop .24s cubic-bezier(.2,.7,.2,1)}
}
.nb-quiz__x{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:#F4EADB;color:#7a7266;font-size:22px;line-height:1;cursor:pointer;z-index:2}
.nb-quiz__eyebrow{font-family:var(--maru);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--orange-deep)}
.nb-quiz__head h2{font-family:var(--maru);font-weight:800;font-size:clamp(19px,5vw,23px);margin:6px 0 0}
.nb-quiz__dots{display:flex;gap:6px;justify-content:center;margin:16px 0 6px}
.nb-quiz__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#E4D8C4;cursor:pointer;transition:.2s}
.nb-quiz__dots button[aria-current="true"]{background:var(--orange);width:22px;border-radius:5px}
.nb-quiz__body{overflow:hidden;transition:height .28s ease}
.nb-quiz__track{display:flex;align-items:flex-start;transition:transform .32s cubic-bezier(.3,.75,.2,1)}
.nb-q{flex:0 0 100%;min-width:100%;padding:10px 2px 4px}
.nb-q__label{font-family:var(--maru);font-weight:800;font-size:17px;margin-bottom:16px;text-align:center}
.nb-q__label span{font-weight:500;font-size:12px;color:var(--ink-soft)}
.nb-q__opts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.nb-q__opts--nums .nb-opt{min-width:52px;text-align:center}
.nb-opt{font-family:var(--maru);font-weight:700;font-size:15px;color:var(--ink);background:#FBF6EF;
  border:2px solid #E4D8C4;border-radius:999px;padding:12px 20px;cursor:pointer;transition:.15s}
.nb-opt:hover{border-color:var(--sun);background:#fff}
.nb-opt[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:#fff;box-shadow:0 4px 12px rgba(230,126,58,.3)}
/* 面積の数字入力 */
.nb-q__area{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
.nb-q__area input{width:130px;font-family:var(--maru);font-weight:700;font-size:22px;text-align:center;
  border:2px solid #E4D8C4;border-radius:12px;padding:12px 10px;background:#FBF6EF;color:var(--ink)}
.nb-q__area input:focus{outline:none;border-color:var(--sun);background:#fff}
.nb-q__unit{font-family:var(--maru);font-weight:700;font-size:15px;color:var(--ink-soft)}
/* 希望日の日付入力 */
.nb-q__dates{display:flex;flex-direction:column;gap:10px;max-width:360px;margin:0 auto 14px}
.nb-q__dates label{display:flex;align-items:center;gap:12px;font-family:var(--maru);font-weight:700;font-size:14px;color:var(--ink)}
.nb-q__dates input{flex:1;border:2px solid #E4D8C4;border-radius:12px;padding:11px 12px;background:#FBF6EF;font-size:15px;color:var(--ink)}
.nb-q__dates input:focus{outline:none;border-color:var(--sun);background:#fff}
.nb-quiz__ready{text-align:center;font-family:var(--maru);font-weight:700;font-size:13px;color:var(--ink-soft);margin:18px 0 0;line-height:1.7}
.nb-quiz__summary{display:flex;flex-direction:column;gap:9px;background:#F4EADB;border-radius:14px;padding:16px 18px}
.nb-sum__row{display:flex;gap:12px;font-size:14px;line-height:1.6}
.nb-sum__k{flex:none;width:64px;font-family:var(--maru);font-weight:700;color:var(--orange-deep)}
.nb-sum__v{color:var(--ink)}
.nb-sum__v.is-empty{color:#a79f90;font-weight:500}
.nb-quiz__nav{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.nb-quiz__spacer{flex:1}
.nb-quiz__back,.nb-quiz__skip{border:0;font-family:var(--maru);font-weight:700;cursor:pointer}
.nb-quiz__back{background:none;color:var(--ink-soft);font-size:14px;padding:8px 6px}
.nb-quiz__skip{color:#fff;background:var(--orange);font-size:15px;border-radius:12px;padding:13px 26px;box-shadow:0 4px 12px rgba(230,126,58,.28)}
.nb-quiz__skip:disabled{opacity:.4;box-shadow:none;cursor:default}
.nb-quiz__back[hidden],.nb-quiz__skip[hidden],.nb-quiz__send[hidden]{display:none}
.nb-quiz__send{border:0;border-radius:12px;background:var(--line);color:#fff;font-family:var(--maru);font-weight:800;font-size:16px;padding:14px 22px;cursor:pointer;flex:1}
body.nb-noscroll{overflow:hidden}
@keyframes nbFade{from{opacity:0}to{opacity:1}}
@keyframes nbUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes nbPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* メニュー等の「左画像＋本文」リスト行 */
.nb-listrow{display:flex;background:#fff;border-radius:20px;overflow:hidden;align-items:stretch;
  box-shadow:0 6px 18px rgba(50,46,41,.06);border:2px solid transparent;transition:border-color .15s}
.nb-listrow:hover{border-color:#EFD9BE;opacity:1}
/* 画像は絶対配置にして行の高さに影響させない。in-flow のままだと、親の高さが
   未確定なため img の height:100% が auto に落ち、素材の縦横比がそのまま行の高さに
   なってしまう（正方形の素材だけ行が縦に伸びる）。 */
.nb-listrow__img{flex:0 0 36%;max-width:240px;min-height:150px;background:#F4EADB;position:relative}
.nb-listrow__img>.nb-slot{position:absolute;inset:0}
.nb-listrow__body{flex:1;padding:22px 26px;display:flex;flex-direction:column;color:#322E29}
.nb-listrow__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.nb-listrow__name{font-family:var(--maru);font-weight:900;font-size:20px}
.nb-listrow__badge{background:var(--teal);color:#fff;font-family:var(--maru);font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px}
.nb-listrow__desc{font-size:14px;color:#5c564d;line-height:1.75;margin-bottom:14px;flex:1}
.nb-listrow__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.nb-listrow__price{background:var(--peach);color:var(--orange-deep);font-family:var(--maru);font-weight:700;font-size:13px;padding:6px 13px;border-radius:999px}
.nb-listrow__more{color:var(--orange-deep);font-family:var(--maru);font-weight:700;font-size:13px;white-space:nowrap}
@media (max-width:600px){
  .nb-listrow__img{flex:0 0 40%;min-height:128px}
  .nb-listrow__body{padding:15px 15px}
  .nb-listrow__name{font-size:17px}
  .nb-listrow__desc{font-size:13px;line-height:1.65;margin-bottom:10px}
}

/* ===== フッター =====
   以前は _footer.html.twig に直書きしていた。インラインではメディアクエリが書けず、
   スマホでリンク行が押し潰されて「リンクの中で改行」→ 各リンクの高さがバラバラ、
   という凸凹を直せなかったため、ここへ移した。
   凸凹の要は .nb-f__links a の white-space:nowrap（リンク内で改行させない）と、
   行そのものは flex-wrap:wrap で折り返させること。 */
.nb-f{background:var(--ink);color:#cfc7ba;padding-top:34px;padding-bottom:34px;font-size:13px;
  width:100vw;position:relative;left:50%;margin-left:-50vw}
.nb-f__inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:1120px;margin:0 auto}
.nb-f__name{font-family:var(--maru);font-weight:900;font-size:19px;color:#fff;margin-bottom:8px}
.nb-f__nav{display:flex;flex-direction:column;gap:10px}
.nb-f__links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.nb-f__links a{white-space:nowrap}
/* 準備中のページ。リンクとしては生きているが、目立たせない。 */
.nb-f__links--sub{font-size:12px;opacity:.62}

@media (max-width:768px){
  .nb-f{padding-top:26px;padding-bottom:26px}
  .nb-f__inner{gap:18px}
  .nb-f__links{font-size:13px;gap:6px 16px}
  .nb-f__links--sub{font-size:11px}
}

@keyframes nicoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}