/* ==========================
   Business Inquiry Form
   ========================== */

/* 見出し */
.ns-form__title{
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: .02em;
  margin: 0 0 14px;
  font-weight: 500;
}

.ns-form__meta{
  font-size: 11px;
  letter-spacing: .18em;
  margin: 0 0 36px; 
  margin-top: -4px;
  opacity: .55;
}

/* 説明文 */
.ns-form__intro{
  max-width: 560px;
  margin: 0 0 64px;
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: .04em;
  opacity: .85;
}

/* フォーム外枠（余白と格） */
.ns-form{
  max-width: 820px;
  margin: 80px auto 120px;
  padding: 56px 44px 70px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-sizing: border-box;
}

/* 既存の変な継承を切る */
.ns-form *, .ns-form *::before, .ns-form *::after{
  box-sizing: border-box;
}

/* SOYフォーム本文エリア */
.ns-form .soy_iqnuiry_responsive{
  width: 100%;
}

/* dt/dd を整然と（PC） */
.ns-form .soy_iqnuiry_responsive dl{
  width: 100%;
  margin: 0;
  display: grid !important;
  grid-template-columns: 220px 1fr;
  column-gap: 36px;
  row-gap: 22px;
}

/* dt（項目名） */
.ns-form .soy_iqnuiry_responsive dt{
  margin: 0 !important;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  opacity: .9;
}

/* 必須表示：赤→控えめ */
.ns-form .soy_iqnuiry_responsive dt span{
  color: rgba(0,0,0,.55) !important;
  font-size: 11px;
  margin-left: 8px;
  letter-spacing: .08em;
}

/* dd：幅・中央寄せ・float等を全殺し */
.ns-form .soy_iqnuiry_responsive dd{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  text-align: left !important;
}

/* dd配下のラッパーが幅を持っているケースも潰す */
.ns-form .soy_iqnuiry_responsive dd > *{
  max-width: none !important;
}

/* 入力UI（CV寄りの上質） */
.ns-form .soy_iqnuiry_responsive input[type="text"],
.ns-form .soy_iqnuiry_responsive input[type="email"],
.ns-form .soy_iqnuiry_responsive input[type="tel"],
.ns-form .soy_iqnuiry_responsive input[type="number"],
.ns-form .soy_iqnuiry_responsive select,
.ns-form .soy_iqnuiry_responsive textarea{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 10px !important;
  background: #fff !important;

  padding: 12px 14px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: .03em;

  transition: border-color .2s ease, box-shadow .2s ease;
}
.ns-form .soy_iqnuiry_responsive select{
  background-color:#fff !important;
  background-image: none !important;
  padding-right: 44px !important;
  box-shadow: inset -34px 0 0 rgba(0,0,0,.02); /* 右側だけ薄く区切る */
}

/* 高さ（入力欄が“最小”に見えるのを防ぐ） */
.ns-form .soy_iqnuiry_responsive input[type="text"],
.ns-form .soy_iqnuiry_responsive input[type="email"],
.ns-form .soy_iqnuiry_responsive input[type="tel"],
.ns-form .soy_iqnuiry_responsive input[type="number"],
.ns-form .soy_iqnuiry_responsive select{
  height: 48px;
}

/* textarea */
.ns-form .soy_iqnuiry_responsive textarea{
  height: auto;
  min-height: 190px;
  resize: vertical;
}

/* フォーカス */
.ns-form .soy_iqnuiry_responsive input:focus,
.ns-form .soy_iqnuiry_responsive select:focus,
.ns-form .soy_iqnuiry_responsive textarea:focus{
  outline: none !important;
  border-color: rgba(0,0,0,.40) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important;
}

/* size属性に引っ張られるのを強制解除 */
.ns-form .soy_iqnuiry_responsive input[size]{
  width: 100% !important;
  max-width: none !important;
}

/* 住所テーブル（レガシー感を消す：幅＆罫線） */
.ns-form .soy_iqnuiry_responsive table{
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

.ns-form .soy_iqnuiry_responsive table td{
  border: none !important;
  padding: 6px 0 !important;
  vertical-align: top;
}

/* 郵便番号など狭くしたいものだけ任意で絞れる */
.ns-form .soy_iqnuiry_responsive .input-zip{
  max-width: 220px !important;
}

/* チェックボックス（縦に詰まりすぎない） */
.ns-form .soy_iqnuiry_responsive .check{
  margin: 10px 0 !important;
}

.ns-form .soy_iqnuiry_responsive .check label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.7;
  font-size: 14px;
}

.ns-form .soy_iqnuiry_responsive input[type="checkbox"]{
  margin-top: 3px;
}

/* 送信ボタン（確認画面へ） */
.ns-form .textcenter input[type="submit"]{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-width: 280px;
  height: 52px;
  padding: 0 28px;

  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 999px !important;

  font-size: 12px !important;
  letter-spacing: .18em !important;
  cursor: pointer;

  transition: transform .2s ease, opacity .2s ease;
}

@media (hover:hover){
  .ns-form .textcenter input[type="submit"]:hover{
    transform: translateY(-1px);
    opacity: .9;
  }
}
.ns-form .textcenter{
  margin-top: 70px;
}

/* SPでは少しだけ縮める */
@media (max-width: 767px){
  .ns-form .textcenter{
    margin-top: 50px;
  }
}
/* 下の注意文（返信目安） */
.ns-form + blockquote{
  max-width: 820px;
  margin: 22px auto 0;
  padding: 18px 22px;
  border-left: 2px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  font-size: 13px;
  line-height: 2.0;
}

/* SP：縦積み＆余白最適化 */
@media (max-width: 767px){
  .ns-form{
    margin: 50px auto 90px;
    padding: 40px 18px 54px;
  }

  .ns-form .soy_iqnuiry_responsive dl{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .ns-form .soy_iqnuiry_responsive dt{
    padding-top: 18px;
  }

  .ns-form .soy_iqnuiry_responsive .input-zip{
    max-width: 100% !important;
  }

  .ns-form .textcenter input[type="submit"]{
    min-width: 100%;
  }
}

/* ==========================
   Address block (no HTML change)
   ========================== */

/* 住所の外枠を整える */
.ns-form .soy_iqnuiry_responsive .responsive{
  margin-top: 6px;
  padding: 18px 18px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: transparent;
}

/* table感を消す */
.ns-form .soy_iqnuiry_responsive .responsive table{
  width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 各行をグリッド化 */
.ns-form .soy_iqnuiry_responsive .responsive table tr{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 10px 0;
}

.ns-form .soy_iqnuiry_responsive .responsive table tr:last-child{
  border-bottom: none;
}

/* 左ラベル */
.ns-form .soy_iqnuiry_responsive .responsive table td:first-child{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  opacity: .8;
  padding: 0 !important;
  white-space: nowrap;
  align-self: center;
}

/* 右入力 */
.ns-form .soy_iqnuiry_responsive .responsive table td:last-child{
  padding: 0 !important;
}

/* 建物名だけ全幅 */
.ns-form .soy_iqnuiry_responsive .responsive table td[colspan="2"]{
  display: block;
  padding-top: 10px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  opacity: .8;
}

/* 建物名inputは通常に戻す */
.ns-form .soy_iqnuiry_responsive .responsive table td[colspan="2"] input{
  margin-top: 8px;
  font-size: 14px !important;
  font-weight: 400;
  opacity: 1;
}

/* 郵便番号だけ短く */
.ns-form .soy_iqnuiry_responsive .responsive .input-zip{
  max-width: 240px !important;
}

/* SP */
@media (max-width: 767px){

  .ns-form .soy_iqnuiry_responsive .responsive{
    padding: 14px 14px 10px;
  }

  .ns-form .soy_iqnuiry_responsive .responsive table tr{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ns-form .soy_iqnuiry_responsive .responsive table td:first-child{
    white-space: normal;
  }

  .ns-form .soy_iqnuiry_responsive .responsive .input-zip{
    max-width: 100% !important;
  }
}
/* 建物名・部屋番号の行（最後のtr）だけ grid をやめる */
.ns-form .soy_iqnuiry_responsive .responsive table tr:last-child{
  display: block !important;
  padding: 14px 0 0 !important;
  border-bottom: none !important;
}

/* 最後の行のセルはブロックで縦積み */
.ns-form .soy_iqnuiry_responsive .responsive table tr:last-child td{
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ラベル（建物名・部屋番号） */
.ns-form .soy_iqnuiry_responsive .responsive table tr:last-child td[colspan="2"]{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  opacity: .8;
}

/* 入力欄はフル幅に */
.ns-form .soy_iqnuiry_responsive .responsive table tr:last-child td[colspan="2"] input{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 10px;
}
/* 住所ブロックを軽くする */
.ns-form .soy_iqnuiry_responsive .responsive{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.06);
  padding: 14px 16px 10px;
}

/* 行間を少し締める */
.ns-form .soy_iqnuiry_responsive .responsive table tr{
  padding: 10px 0 !important;
}

/* 業種・問い合わせ種別のddだけ2列に */
.ns-form .soy_iqnuiry_responsive dd:has(.check){
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px 40px;
}

/* チェックの整列 */
.ns-form .soy_iqnuiry_responsive .check{
  margin: 0 !important;
}

.ns-form .soy_iqnuiry_responsive .check label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 767px){
  .ns-form .soy_iqnuiry_responsive dd:has(.check){
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* チェックボックスを視覚的に消す */
.ns-form input[type="checkbox"]{
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 50%; /* ← 丸にする */
  position: relative;
  cursor: pointer;
  transition: all .2s ease;
}

/* 選択時 */
.ns-form input[type="checkbox"]:checked{
  background: #000;
  border-color: #000;
}

/* 2行ラベルでも丸が崩れない整列 */
.ns-form .check label{
  align-items: flex-start !important; /* ← center をやめる */
}

/* 丸の“サイズ固定”と“つぶれ防止” */
.ns-form input[type="checkbox"]{
  flex: 0 0 18px;     /* 固定幅 */
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  box-sizing: border-box;
  margin-top: 2px;    /* 1行目の文字と揃える */
}


.ns-form input[type="radio"]:checked{
  border-color: #000;
}

.ns-form input[type="radio"]:checked::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  background: #000;
  border-radius: 50%;
}
/* labelは行として整列 */
.ns-form .soy_iqnuiry_responsive dd > label{
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin: 0 !important;
  line-height: 1.65;
}

/* ラベル整列 */
.ns-form .check label{
  display: flex;
  align-items: flex-start; /* 2行でも崩れない */
  gap: 10px;
  line-height: 1.6;
}

.ns-form .soy_iqnuiry_responsive dd{
  display: grid;
  row-gap:11px; 
}

.ns-form .soy_iqnuiry_responsive dd > br{
  display: none;
}

.ns-form .soy_iqnuiry_responsive dd > label{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ns-form input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;

  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;

  border: 1px solid rgba(0,0,0,.28);
  border-radius: 50%;
  background: #fff;

  position: relative;
  margin-top: 2px;
  cursor: pointer;

  transition: border-color .2s ease;
}
/* ==========================
   ns-form bottom notes
   ========================== */

.ns-form__note{
  max-width: 820px;
  margin: 36px auto 0;
  padding: 20px 24px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}

.ns-form__note-text{
  margin: 0;
  font-size: 13px;
  line-height: 2.0;
  letter-spacing: .04em;
  opacity: .9;
}

/* 売り込み側はより軽く */
.ns-form__note--light{
  background: transparent;
  border-color: rgba(0,0,0,.06);
}

/* 小見出し */
.ns-form__subheading{
  max-width: 820px;
  margin: 60px auto 16px;
  font-size: 14px;
  letter-spacing: .10em;
  font-weight: 600;
}

/* ==========================
   Inquiry message
   ========================== */

.ns-form .soy_inquiry_message{
  max-width: 620px;
  margin: 0 0 48px;   
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
  opacity: .75;
}

/* header */
.ns-contact-head{ margin: 0 0 26px; }
.ns-contact-head__title{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .10em;
  margin: 0;
}

/* hero */
.ns-contact-hero{
  margin: 0 0 60px;
  align-items: stretch;
}

/* 画像は控えめに、角と明度で“静かに” */
.ns-contact-hero__media .prod_thumb{
  width: 100%;
  height: auto;
  border-radius: 12px;
  filter: brightness(98%);
}

/* 右側の説明ブロック */
.ns-contact-hero__content{
  display: flex;
  align-items: center;
}

/* intro */
.ns-contact-intro{
  max-width: 620px;
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: .04em;
  opacity: .92;
}

.ns-contact-intro p{ margin: 0 0 16px; }

.ns-contact-intro__tel{
  margin-top: 26px;
}
.ns-contact-intro__telnum{
  font-weight: 600;
  letter-spacing: .08em;
}
.ns-contact-intro__teltime{
  opacity: .75;
  font-size: 13px;
}
.ns-contact-intro{
  max-width: 720px;
  margin: 0 auto 72px;
  padding: 0;

  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .06em;

  color: rgba(0,0,0,.78);
  text-align: left;
}

.ns-contact-intro a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ns-contact-intro strong{
  font-weight: 500;
  letter-spacing: .08em;
}

/* SP：画像→テキストの順に。余白だけ整える */
@media (max-width: 767px){
  .ns-contact-hero{
    margin-bottom: 44px;
  }
  .ns-contact-hero__media{
    margin-bottom: 18px;
  }
}
/* 確認画面ボタンエリア */
.ns-form .pb30{
  margin-top: 48px !important;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* 共通 */
.ns-form .pb30 input[type="submit"]{
  min-width: 180px;
  height: 48px;
  padding: 0 28px;

  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .18em;

  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

/* 主ボタン（送信） */
.ns-form .pb30 input[name="send"]{
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

/* 従ボタン（戻る） */
.ns-form .pb30 input[name="form"]{
  background: transparent;
  color: #000;
  border: 1px solid rgba(0,0,0,.3);
}

/* hover */
@media (hover:hover){
  .ns-form .pb30 input[name="send"]:hover{
    transform: translateY(-1px);
    opacity: .9;
  }

  .ns-form .pb30 input[name="form"]:hover{
    border-color: rgba(0,0,0,.6);
  }
}

/* ==========================
   Confirm message (override balloon)
   ========================== */

/* balloonの黒ベタ＋大きい文字を無効化して、品のある案内に置換 */
.ns-form .soy_inquiry_message.balloon{
  background: transparent !important;
  color: rgba(0,0,0,.78) !important;
  text-align: center !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  line-height: 2 !important;

  margin: 0 auto 48px !important;
  padding: 28px 0 0 !important;

}

/* 吹き出しの三角（after）を消す */
.ns-form .soy_inquiry_message.balloon:after{
  content: none !important;
  display: none !important;
}

  /* ==========================
   Sample request grid (image options)
   ========================== */
.sample-page .ns-form{
  max-width: 1180px;
}

/* 1) dd をグリッド化（.check が並ぶ場所） */
.ns-form .soy_iqnuiry_responsive dd:has(.check > label > img){
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 18px;
  margin-top: 10px;
}

/* タブレット */
@media (max-width: 1024px){
  .ns-form .soy_iqnuiry_responsive dd:has(.check > label > img){
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* SP */
@media (max-width: 767px){
  .ns-form .soy_iqnuiry_responsive dd:has(.check > label > img){
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
}

/* 2) 既存floatレイアウトを無効化 */
.ns-form .check{
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) labelをカード化（押せる面積を広げる） */
.ns-form .check label{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;

  padding: 14px 14px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;

  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

/* hover：静かに */
@media (hover:hover){
  .ns-form .check label:hover{
    border-color: rgba(0,0,0,.18);
    transform: translateY(-1px);
    background: rgba(0,0,0,.015);
  }
}

/* 4) 画像を整える（角・比率・品） */
.ns-form .check label img{
  width: 100% !important;
  height: auto !important;
  display: block;

  border-radius: 10px;
  background: #fff;
}

/* 5) テキスト（名称）を整える */
.ns-form .check label{
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .05em;
  color: rgba(0,0,0,.86);
}

/* 6) checkbox を「カード右上の静かな丸」に */
.ns-form .check label{
  position: relative;
  padding-top: 18px; /* チェックの余白分 */
}

/* チェック本体：隠してカスタム */
.ns-form .check input[type="checkbox"].sample{
  -webkit-appearance: none !important;
  appearance: none !important;

  position: absolute;
  top: 12px;
  right: 12px;

  width: 18px;
  height: 18px;

  border: 1px solid rgba(0,0,0,.28);
  border-radius: 50%;
  background: #fff;

  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

/* 選択時：中点（品） */
.ns-form .check input[type="checkbox"].sample:checked{
  border-color: rgba(0,0,0,.85);
}
.ns-form .check input[type="checkbox"].sample:checked::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,.92);
  transform: translate(-50%, -50%);
}

/* 7) 選択時、カードもほんの少しだけ“締まる” */
.ns-form .check label:has(input[type="checkbox"].sample:checked){
  border-color: rgba(0,0,0,.42);
}

/* ==========================
   Sample card: maximize image (no title truncation)
   ========================== */

/* カード内の余白を削って画像面積を確保 */
.ns-form .check label{
  padding: 10px 10px 12px !important;   /* 14→10 */
  gap: 10px !important;
}

/* 画像は “正方形枠を確保” してその中で最大表示 */
.ns-form .check label img{
  width: 100% !important;
  aspect-ratio: 1 / 1;                 /* 正方形の表示枠 */
  height: auto !important;
  object-fit: cover;                    /* 画像面積を最大化（必要ならcontainに変更可） */
  border-radius: 3px !important;
  display: block !important;
}

/* 文字を切らずに、2行で綺麗に固定（改行はOK） */
.ns-form .check label{
  font-size: 13px !important;
  line-height: 1.55 !important;
  letter-spacing: .06em !important;
}

/* 画像の下のテキストを“下段として整列” */
.ns-form .check label{
  grid-template-rows: auto 1fr;         /* 画像 / テキスト */
}
.ns-form .check label{
  align-content: start;
}

/* チェックが画像を邪魔するので、位置とサイズを控えめに */
.ns-form .check input[type="checkbox"].sample{
  top: 10px !important;
  right: 10px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  background: rgba(255,255,255,.92) !important; /* 画像上でも沈まない */
  border-color: rgba(0,0,0,.22) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.65) !important; /* さりげなく視認性UP */
}
.ns-form .check input[type="checkbox"].sample:checked::after{
  width: 6px !important;
  height: 6px !important;
}

/* SPでは2列を維持しつつ画像をさらに大きく見せる */
@media (max-width: 767px){
  .ns-form .soy_iqnuiry_responsive dd:has(.check > label > img){
    gap: 12px 12px !important;
  }
  .ns-form .check label{
    padding: 9px 9px 11px !important;
  }
}
.ns-form .soy_iqnuiry_responsive dd:has(.check > label > img){
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
  
  /* ==========================
   資料請求カード（サンプルより軽め）
   ========================== */

.ns-form .check label{
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;

  padding: 16px 16px 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 3px;
  background: #fff;

  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}

/* 画像最大化 */
.ns-form .check label img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
}

/* テキスト */
.ns-form .check label{
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1.6;
}

/* ラジオ・チェック統一位置 */
.ns-form .check input[type="checkbox"]{
  position: absolute;
  top: 14px;
  right: 14px;

  width: 16px;
  height: 16px;

  appearance: none;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.3);
  background: #fff;
}

.ns-form .check input[type="checkbox"]:checked{
  border-color: #000;
}
.ns-form .check input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:6px;
  height:6px;
  background:#000;
  border-radius:50%;
  transform:translate(-50%,-50%);
}
  
/* ==========================
   Date selects (year/month/day) ? FORCE inline row
   ========================== */

/* 年月日の dd だけ flex に戻す（grid上書き） */
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]){
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  /* 以前のgrid設定が残っていても無効化 */
  grid-template-columns: none !important;
  row-gap: 0 !important;
  column-gap: 0 !important;

  flex-wrap: nowrap !important; /* PCは1行固定 */
}

/* selectが “幅100%・block” にされているのを殺す */
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]) > select{
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;

  height: 44px;
  padding: 0 18px;

  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  background: #fff;

  font-size: 14px;
  letter-spacing: .05em;
}

/* サイズ微調整 */
.sample-page .ns-form select[name*="[year]"]{ min-width: 110px; }
.sample-page .ns-form select[name*="[month]"],
.sample-page .ns-form select[name*="[day]"]{ min-width: 90px; }

/* brを“改行用のflexアイテム”として扱う（注釈を下段に送る） */
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]) > br{
  display: block !important;
  flex: 0 0 100% !important;
  height: 0 !important;
  margin: 0 !important;
}

/* brの後ろの注釈テキスト（匿名flexアイテム）を整える */
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]){
  color: rgba(0,0,0,.85);
}
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]){
  /* 注釈は次行に落ちるので行間を確保 */
  padding-bottom: 2px;
}

/* SPは折り返し許可（1行にこだわらず崩れない） */
@media (max-width: 767px){
  .sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]){
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}
/* ==========================
   Date dd: back to normal flow, break note by <br>
   ========================== */

/* 年月日の dd を flex/grid から通常フローへ戻す */
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]){
  display: block !important;
}

/* select を横並びにする（幅100%を殺す） */
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]) > select{
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;

  height: 44px;
  padding: 0 18px;
  margin-right: 12px;

  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  background: #fff;

  font-size: 14px;
  letter-spacing: .05em;
}

/* 年だけ少し広く */
.sample-page .ns-form select[name*="[year]"]{ min-width: 110px !important; }
.sample-page .ns-form select[name*="[month]"],
.sample-page .ns-form select[name*="[day]"]{ min-width: 90px!important; }

/* ここが肝：br を “このdd内だけ” 復活させる */
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]) > br{
  display: block !important;
  margin-top: 10px;
}

/* 注釈のトーン（dd全体の2行目が効く） */
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]){
  line-height: 1.7;
  color: rgba(0,0,0,.62);
  font-size: 13px;
}

/* select文字は濃く戻す（ddを薄くした分） */
.sample-page .ns-form .soy_iqnuiry_responsive dd:has(> select[name*="[year]"]) > select{
  color: rgba(0,0,0,.92) !important;
  font-size: 14px !important;
}

/* ==========================
   Sample page intro (image + note)
   ========================== */

/* 説明カード：well2 の“古さ”を消す */
.sample-page .prd_list.flex_wrapper .sample-intro{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 22px 24px !important;
  box-shadow: none !important;
}

/* 先頭の段落：本文の品 */
.sample-page .prd_list.flex_wrapper .sample-intro > p{
  margin: 0 0 16px !important;
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: .04em;
  color: rgba(0,0,0,.82);
}

/* SP：1列、余白を少し詰める */
@media (max-width: 767px){
  .sample-page .prd_list.flex_wrapper{
    margin: 22px 0 34px !important;
    gap: 14px;
  }

  .sample-page .prd_list.flex_wrapper .sample-intro{
    padding: 18px 16px !important;
    border-radius: 16px;
  }
}

/* ==========================
   Sample cards: SP safety net
   ========================== */
@media (max-width: 767px){

  /* 古いfloatを殺す */
  .sample-page .ns-form .check{
    float: none !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* カードを確実に有効化（他CSSに負けない） */
  .sample-page .ns-form .check > label{
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  /* 画像の崩れ止め */
  .sample-page .ns-form .check > label > img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 名前は折り返しで保持 */
  .sample-page .ns-form .check > label{
    line-height: 1.6 !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-size: 12px !important;
  }
  /* ddグリッド：各セルの行高を揃える */
  .sample-page .ns-form .soy_iqnuiry_responsive dd:has(.check > label > img){
    grid-auto-rows: 1fr;      /* ★ ここが肝 */
    align-items: stretch;
  }

  /* グリッドの子要素を“高さ100%”で埋める */
  .sample-page .ns-form .check{
    height: 100%;
  }
  .sample-page .ns-form .check > label{
    height: 100%;
  }
}
/* 見出し：カードグリッドを横断して“行”として入れる */
.sample-page .ns-form .soy_iqnuiry_responsive dd .sample-heading{
  grid-column: 1 / -1;          /* これで全列に跨る */
  margin: 6px 0 2px;
  padding-top: 26px;

  font-size: 16px;
  letter-spacing: .14em;
  font-weight: 500;
  color: rgba(0,0,0,.70);
}

/* SPは少し詰める */
@media (max-width: 767px){ 
  .sample-page .ns-form .soy_iqnuiry_responsive dd:has(.check > label > img){
    grid-auto-rows: auto;
    align-items: stretch;
  }

  .sample-page .ns-form .check{
    height: 100%;
  }
  .sample-page .ns-form .check > label{
    height: 100%;
  }

  .sample-page .ns-form .soy_iqnuiry_responsive dd .sample-heading{
    margin: 2px 0 6px !important;  
    line-height: 1.2;
  }
/* 右上チェック：小さく・半透明・存在感を下げる */
  .sample-page .ns-form .check > label > input[type="checkbox"]{
    top: 8px !important;
    right: 8px !important;

    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;

    border-width: 1px !important;
    border-color: rgba(0,0,0,.18) !important;

    /* 画像の質感を邪魔しない“薄膜” */
    background: rgba(255,255,255,.55) !important;
    backdrop-filter: blur(2px);                /* 対応ブラウザだけ効く */
    -webkit-backdrop-filter: blur(2px);

    box-shadow: 0 0 0 1px rgba(255,255,255,.35) !important;
    opacity: .85;
  }

  /* 未選択時：さらに控えめ */
  .sample-page .ns-form .check > label > input[type="checkbox"]:not(:checked){
    opacity: .55;
  }
 /* 画像にトランジション */
  .sample-page .ns-form .check > label > img{
    transition: transform .35s ease;
  }

  /* チェックされたら画像を少しだけ拡大 */
  .sample-page .ns-form 
  .check > label:has(input[type="checkbox"]:checked) > img{
    transform: scale(1.06);
  }
}

/* ==========================
   natsusobiku ? Estimate page
   ========================== */

.ns-estimate{
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 18px 90px;
  color: rgba(0,0,0,.84);
}

.ns-estimate a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; margin:40px 0;}

.ns-estimate__hero{
  margin: 10px 0 46px;
  padding: 20px 0 64px;
  border-bottom: 1px solid rgba(0,0,0,.06); 
}

.ns-estimate__hero-inner{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}

.ns-estimate__hero-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  filter: brightness(99%);
}

.ns-estimate__title{
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: .10em;
  font-weight: 600;
  margin: 0 0 14px;
}

.ns-estimate__lead{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: .04em;
  color: rgba(0,0,0,.78);
}

.ns-estimate__bullets{
  margin: 0 0 18px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 2.0;
  letter-spacing: .04em;
  color: rgba(0,0,0,.74);
}
.ns-estimate__bullets li{ margin: 0 0 6px; }

.ns-estimate__hero-note{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 12px;
  letter-spacing: .10em;
  color: rgba(0,0,0,.62);
}

/* section title */
.ns-estimate__section-title{
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(0,0,0,.70);
}

/* routes grid */
.ns-route-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ns-route{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  padding: 18px 16px 0px;
  border-radius: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.ns-route--primary{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
}

.ns-route__kicker{
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(0,0,0,.62);
}
.ns-route__kicker--muted{ opacity: .75; }

.ns-route__title{
  margin: 0;
  font-size: 16px;
  letter-spacing: .08em;
  font-weight: 600;
}

.ns-route__desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: rgba(0,0,0,.76);
}

.ns-route__meta{
  margin: 6px 0 4px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ns-route__meta li{
  font-size: 11px;
  letter-spacing: .10em;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
}

.ns-route__cta{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(0,0,0,.20);
  background: transparent;
  text-decoration: none;
  letter-spacing: .16em;
  font-size: 12px;
}

.ns-route__cta--primary{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.35);
  color: #000;
}

@media (hover:hover){
  .ns-route:hover{
    border-color: rgba(0,0,0,.16);
  }
  .ns-route__cta:hover{
    border-color: rgba(0,0,0,.42);
  }
  .ns-route__cta--primary:hover{
    opacity: .92;
  }
}

/* tertiary */
.ns-route__sub{
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 10px;
  margin-top: 4px;
}
.ns-route__link{
  font-size: 12px;
  letter-spacing: .10em;
}
.ns-route__small{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: rgba(0,0,0,.70);
}

/* pricelist sub card */
.ns-estimate__pricelist{
  margin-top: 26px;
}

.ns-pricelist{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 18px;
  border: 1px solid rgba(0,0,0,.28);
  text-decoration: none !important;
  background: rgba(0,0,0,.01);
}
.ns-pricelist__kicker{
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(0,0,0,.62);
  margin-bottom: 6px;
}
.ns-pricelist__title{
  font-size: 25px;
  letter-spacing: .10em;
  font-weight: 600;
}
.ns-pricelist__desc{
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(0,0,0,.70);
}
.ns-pricelist__arrow{
  font-size: 18px;
  opacity: .55;
}

/* responsive */
@media (max-width: 900px){
  .ns-estimate__hero-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ns-route-grid{
    grid-template-columns: 1fr;
  }
  .ns-route__cta{
    width: 100%;
  }
}
/* ===== Guide (id="exp") reset & accordion ===== */
#exp.ns-guide{
  max-width: 1100px;
  margin: 90px auto 0;
  padding: 0 18px 18px;
}

/* 既存の well / lead が強い場合があるので “ガイド内だけ” トーンを揃える */
#exp .lead{
  font-size: 13px;
  line-height: 2.0;
  letter-spacing: .04em;
  color: rgba(0,0,0,.74);
  margin: 10px 0 14px;
}

/* well の箱感を弱める（消し切らない） */
#exp .well{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.06);
  padding: 14px 16px;
  margin: 12px 0 0;
}

#exp .ns-guide__title{
  font-size: 18px;
  letter-spacing: .12em;
  font-weight: 600;
  margin: 0 0 10px;
}

#exp .ns-guide__lead{
  font-size: 13px;
  line-height: 2.0;
  letter-spacing: .04em;
  color: rgba(0,0,0,.72);
  margin: 0 0 34px;
}

#exp .ns-acc{
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 18px 0;
}

#exp .ns-acc:last-child{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

#exp .ns-acc__summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: .08em;
  color: rgba(0,0,0,.84);
}

/* 記号を描画する（文字を使わないので文字化けゼロ） */
#exp .ns-acc__summary{
  position: relative;
  padding-right: 28px;
}

#exp .ns-acc__summary::after,
#exp .ns-acc__summary::before{
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: rgba(0,0,0,.45);
  transform: translateY(-50%);
}

#exp .ns-acc__summary::before{
  transform: translateY(-50%) rotate(90deg); /* ＋の縦線 */
}

#exp details[open] > .ns-acc__summary::before{
  opacity: 0; /* open時は?にする */
}


#exp .ns-acc__body{
  padding-top: 16px;
  font-size: 13px;
  line-height: 2.0;
  letter-spacing: .04em;
  color: rgba(0,0,0,.78);
}

/* 画像グリッドの“うるささ”を抑える */
#exp .col_3.plan{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 14px;
  padding: 0;
}

@media (max-width: 767px){
  #exp .col_3.plan{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 画像の 85% 指定が余白を生むので、ガイド内だけ無効化 */
#exp .col_3.plan img{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* li/grid の余計な装飾を抑える（既存CSSが強いときの保険） */
#exp .col_3.plan .grid{
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ===== Guide image grid fix (only inside #exp) ===== */

/* リスト自体をグリッドに固定 */
#exp .col_3.plan{
  list-style: none;
  margin: 14px 0 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 18px;
  align-items: start;         /* ずれ防止 */
}

@media (max-width: 767px){
  #exp .col_3.plan{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 14px;
  }
}

/* li.grid の既存float/幅/余白を殺して、縦積みに */
#exp .col_3.plan > li.grid{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

#exp .col_3.plan > li.grid > img{
  width: 100% !important;
  height: auto !important;
  display: block !important;

  aspect-ratio: 4 / 3;     
  object-fit: contain;      

  border-radius: 10px;     
}

/* ラベル（下の文字）の余白を整えてズレを減らす */
#exp .col_3.plan > li.grid > p.lead{
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: rgba(0,0,0,.78);
}