@charset "UTF-8";

/* ============================================================
   イドサワ.com 専用見本
   配色の根拠：現行サイトの実測色をそのまま使う
   ナビのボタン #FF9232→#E56301 ／ 見出し帯 #FE6500→#BB2D00
   本文の黒 #16181C ／ 罫線 #CFCFCF ／ 地は白 ／ ロゴの赤 #FF0000
   ============================================================ */

:root {
  color-scheme: only light;

  /* 文字サイズ（03_レビューゲートの18px仕様＝正本） */
  --fs-body: 18px; /* 本文・説明文・表・リスト */
  --fs-h3: 24px; /* 小見出し */
  --fs-h4: 20px; /* カード見出しの下限 */
  --fs-label: 15px; /* キャプション・ラベル・バッジ */
  --fs-note: 14px; /* 注記（これより小さくしない） */

  /* 白文字を乗せる面は、読める濃さ（白とのコントラスト4.5以上）まで落として使う。
     現行のオレンジ #E56301 は 3.43 で不足するため、面には --brand-on を使う。 */
  --brand: #e56301; /* 現行ナビのボタン（濃い側）。細い線・枠・アイコンに使う */
  --brand-light: #ff9232; /* 現行ナビのボタン（明るい側） */
  --brand-on: #c44d00; /* 白文字を乗せる面（対白 4.76） */
  --brand-dark: #bb2d00; /* 現行の見出し帯の濃い側＝締め色（対白 6.02） */
  --brand-deep: #a22c01;
  --ink: #16181c;
  --ink-sub: #5b6670;
  --line: #cfcfcf;
  --bg: #ffffff;
  --bg-tint: #f5f5f5;
  --white: #fff;
  --ok: #176b3f;
  --frame: #3b3937; /* サンプルページの外側 */
  --wrap: 1120px;
  --fixbar-h: 0px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo",
    sans-serif;
  font-size: var(--fs-body);
  line-height: 1.85;
  padding-bottom: var(--fixbar-h);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: var(--brand-dark);
}

ul,
ol {
  list-style: none;
}

.wrap {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

/* ---------- 外側の枠（ここはサンプルページではない） ---------- */

.frame {
  background: var(--frame);
  padding: 22px 22px 34px;
}

.site {
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  max-width: 1440px;
  margin-inline: auto;
}

.note {
  max-width: 1440px;
  margin-inline: auto;
  color: #f2f0ee;
}

.note--top {
  padding: 4px 4px 18px;
}

.note--bottom {
  padding: 20px 4px 4px;
}

.note p {
  font-size: var(--fs-label);
  line-height: 1.75;
}

.note__line1 {
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
}

.note__line2 {
  padding-top: 10px;
}

.note__body + .note__body {
  margin-top: 10px;
}

.note strong {
  color: #ffd7ad;
}

.note a {
  color: #ffd7ad;
}

/* 「ここから下が見本」「ここまでが見本」の目印 */
.note__mark {
  font-size: var(--fs-body);
  font-weight: 700;
  color: #ffbb77;
  letter-spacing: 0.04em;
}

.note--top .note__mark {
  margin-top: 16px;
}

.note--bottom .note__mark {
  margin-bottom: 14px;
}

/* ---------- ヘッダー ---------- */

.hd {
  background: var(--white);
  color: var(--ink);
  position: relative;
}

.hd__top {
  border-bottom: 1px solid var(--line);
}

.hd__inner {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}

.hd__logo {
  display: inline-block;
  line-height: 0;
}

.hd__logo img {
  width: 200px;
  height: auto;
}

.hd__contact {
  text-align: right;
}

.hd__tel {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.hd__telLabel {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--ink-sub);
}

.hd__telNum {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--brand-dark);
}

.hd__telNote {
  display: block;
  font-size: var(--fs-label);
  color: var(--ink-sub);
}

.hd__toggle {
  display: none;
  font-family: inherit;
  font-size: var(--fs-body);
}

.hd__nav {
  background: linear-gradient(
    180deg,
    var(--brand-on) 0%,
    var(--brand-dark) 100%
  );
}

.hd__navList {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.hd__navList a {
  display: block;
  padding: 14px 22px;
  color: var(--white);
  text-decoration: none;
  font-size: var(--fs-body);
}

.hd__navList a:hover {
  background: rgba(0, 0, 0, 0.14);
}

/* ---------- 第一画面 ---------- */

.hero {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
  padding: 56px 0 60px;
}

.hero__eyebrow {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-dark);
  border: 2px solid var(--brand-dark);
  border-radius: 4px;
  padding: 4px 14px;
  margin-bottom: 20px;
}

.hero__title {
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-weight: 700;
}

.hero__title span {
  display: inline-block;
}

.hero__lead {
  margin-top: 22px;
  font-size: 19px;
}

.hero__year {
  display: inline-block;
  font-weight: 700;
  color: var(--brand-dark);
}

.hero__points {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.hero__points li {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 4px;
  padding: 14px 18px;
  font-size: var(--fs-body);
}

.hero__btns {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  display: inline-block;
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  padding: 15px 30px;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.btn--main {
  background: var(--brand-on);
  color: var(--white);
}

.btn--main:hover {
  background: var(--brand-dark);
  color: var(--white);
}

.btn--sub {
  background: var(--white);
  color: var(--brand-dark);
  border-color: var(--brand);
}

.btn--sub:hover {
  background: #fff3e8;
}

/* ---------- お知らせ ---------- */

.news {
  padding: 34px 0 0;
}

.news__box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 24px;
}

.news__head {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bg-tint);
}

.news__list li {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  font-size: var(--fs-body);
}

.news__list li + li {
  border-top: 1px dashed var(--line);
}

.news__tag {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--white);
  background: var(--ink-sub);
  border-radius: 3px;
  padding: 2px 12px;
  margin-top: 5px;
}

.news__tag--imp {
  background: var(--brand-dark);
}

/* ---------- セクション共通 ---------- */

.sec {
  padding: 60px 0;
}

.sec--tint {
  background: var(--bg-tint);
}

.sec--dark {
  background: var(--bg-tint);
  color: var(--ink);
  border-top: 4px solid var(--brand-dark);
}

.sec-head {
  margin-bottom: 34px;
}

.sec-head__title {
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.4;
  font-weight: 700;
  position: relative;
  padding-left: 18px;
}

.sec-head__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  bottom: 0.22em;
  width: 6px;
  background: var(--brand);
  border-radius: 3px;
}

.sec-head__sub {
  margin-top: 14px;
  font-size: var(--fs-body);
  color: var(--ink-sub);
}

.sec-head--onDark .sec-head__sub {
  color: var(--ink-sub);
}

.sec-head--onDark .sec-head__title::before {
  background: var(--brand-dark);
}

/* ---------- 選び方 ---------- */

.erabi {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 26px 22px;
}

.erabi__q + .erabi__q {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
}

.erabi__qTitle {
  font-size: 21px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.erabi__qNum {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-on);
  color: var(--white);
  font-size: var(--fs-body);
  display: grid;
  place-items: center;
}

.erabi__opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}

.chip {
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: left;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 14px 18px;
  cursor: pointer;
  line-height: 1.5;
}

.chip small {
  display: block;
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--ink-sub);
  margin-top: 4px;
}

.chip:hover {
  border-color: var(--brand);
}

.chip.is-on {
  background: var(--brand-on);
  border-color: var(--brand-on);
  color: var(--white);
}

.chip.is-on small {
  color: #ffdede;
}

.erabi__result {
  margin-top: 20px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--brand-dark);
}

/* ---------- 商品カード ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  align-items: stretch;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card.is-hidden {
  display: none;
}

.card__img {
  background: var(--white);
  display: grid;
  place-items: center;
  padding: 14px 10px 6px;
}

.card__img img {
  width: 160px;
  height: 160px;
}

.card__body {
  padding: 4px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card__maker {
  font-size: var(--fs-label);
  color: var(--ink-sub);
}

.card__name {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 2px;
}

.card__spec {
  font-size: 16px;
  color: var(--ink-sub);
  margin-top: 8px;
}

.card__price {
  margin-top: 12px;
  font-size: 16px;
  color: var(--ink-sub);
}

.card__price span {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  margin-right: 4px;
}

.card__req {
  margin-top: 8px;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--brand-dark);
}

.card .btn--cart {
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 14px;
}

.btn--cart {
  background: var(--brand-on);
  color: var(--white);
  width: 100%;
  margin-top: 16px;
}

.btn--cart:hover {
  background: var(--brand-dark);
}

.card--other .card__name {
  font-size: var(--fs-h4);
}

.lineup__note {
  margin-top: 26px;
  font-size: var(--fs-body);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 22px;
}

/* ---------- ご注文の流れ ---------- */

.flow {
  display: grid;
  gap: 18px;
}

.flow__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.flow__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: var(--white);
  font-size: 26px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.flow__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.flow__mini {
  margin-top: 8px;
  font-size: 16px;
  color: var(--ink-sub);
}

.checklist {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.checklist li {
  background: var(--bg-tint);
  border-radius: 5px;
}

.checklist label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: 1.7;
}

.checklist input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  accent-color: var(--brand);
}

.checklist li:has(input:checked) {
  background: #e7f2eb;
}

.checklist__status {
  margin-top: 12px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ok);
  min-height: 1.85em;
}

.pay {
  margin-top: 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}

.pay__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}

.pay__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}

/* 意味のかたまりを途中で折らない */
.nobreak {
  display: inline-block;
}

.pay__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-dark);
  border-bottom: 2px solid var(--bg-tint);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

/* ---------- 当店について ---------- */

.honmono {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.honmono__photos {
  display: grid;
  gap: 16px;
}

.honmono__photos figure {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 6px;
}

.honmono__photos img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.honmono__photos figcaption {
  font-size: var(--fs-label);
  color: var(--ink-sub);
  margin-top: 8px;
}

.honmono__sub {
  font-size: 21px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 12px;
}

.honmono__sub + * + .honmono__sub,
.honmono__facts > * + .honmono__sub {
  margin-top: 28px;
}

.facts {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
}

.facts dt,
.facts dd {
  background: var(--white);
  padding: 12px 16px;
  font-size: var(--fs-body);
}

.facts dt {
  font-weight: 700;
  color: var(--brand-dark);
}

.badges {
  display: grid;
  gap: 8px;
}

.badges li {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: var(--fs-body);
}

.urls {
  display: grid;
  gap: 8px;
}

.urls li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 16px;
}

.urls span {
  display: block;
  font-size: 16px;
  color: var(--brand-dark);
  font-weight: 700;
}

.urls code {
  font-family: inherit;
  font-size: 17px;
  word-break: break-all;
}

.urls__note {
  margin-top: 14px;
  font-size: 17px;
}

.urls__note a {
  color: var(--brand-dark);
}

/* 会社案内（明るい面のfacts） */

.facts--wide {
  background: var(--line);
  border-color: var(--line);
}

.facts--wide > div {
  background: var(--line);
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
}

.facts--wide dt,
.facts--wide dd {
  background: var(--white);
}

.facts--wide dt {
  color: var(--brand-dark);
  background: #fffaf5;
}

/* ---------- お問い合わせ ---------- */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
}

.contact__card {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  text-decoration: none;
  color: var(--ink);
  display: block;
}

.contact__card--tel {
  border-color: var(--brand);
}

.contact__card--plain {
  background: var(--bg-tint);
}

.contact__label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-dark);
}

.contact__value {
  display: block;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700;
  line-height: 1.35;
  margin-top: 4px;
}

/* メールアドレスは単語の途中で折らない。入らない幅では字を小さくする */
.contact__card--mail .contact__value {
  font-size: clamp(20px, 2.4vw, 24px);
  overflow-wrap: anywhere;
}

.contact__note {
  display: block;
  font-size: var(--fs-label);
  color: var(--ink-sub);
  margin-top: 6px;
}

/* ---------- フッター ---------- */

.ft {
  background: var(--bg-tint);
  color: var(--ink);
  border-top: 4px solid var(--brand);
  padding: 34px 0 40px;
}

.ft a {
  color: var(--brand-dark);
}

.ft__line {
  font-size: var(--fs-body);
}

.ft__copy {
  font-size: var(--fs-label);
  margin-top: 10px;
  color: var(--ink-sub);
}

.ft__notice {
  margin-top: 18px;
  font-size: var(--fs-label);
  line-height: 1.75;
  color: var(--ink-sub);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.ft__notice strong {
  color: var(--brand-dark);
}

/* ---------- 固定電話バー・トースト ---------- */

.fixbar {
  display: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--white);
  font-size: 17px;
  line-height: 1.6;
  padding: 14px 20px;
  border-radius: 8px;
  max-width: min(92vw, 520px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 60;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   タブレット以下
   ============================================================ */

@media (max-width: 1000px) {
  .honmono {
    grid-template-columns: minmax(0, 1fr);
  }

  .honmono__photos {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
}

/* ============================================================
   スマートフォン
   ============================================================ */

@media (max-width: 780px) {
  body {
    font-size: var(--fs-body);
    --fixbar-h: 76px;
  }

  .frame {
    padding: 12px 10px 24px;
  }

  .note--top {
    padding: 2px 6px 14px;
  }

  .note--bottom {
    padding: 16px 6px 2px;
  }

  .hd__inner {
    padding: 12px 0;
    gap: 12px;
  }

  .hd__logo {
    padding: 6px 8px;
  }

  .hd__logo img {
    width: 150px;
    height: auto;
  }

  .hd__contact {
    display: none;
  }

  .hd__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(
      180deg,
      var(--brand-on) 0%,
      var(--brand-dark) 100%
    );
    border: 2px solid var(--brand-dark);
    border-radius: 6px;
    color: var(--white);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 700;
    padding: 10px 16px;
    cursor: pointer;
  }

  .hd__toggleBars {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
  }

  .hd__toggleBars::before,
  .hd__toggleBars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--white);
  }

  .hd__toggleBars::before {
    top: -7px;
  }

  .hd__toggleBars::after {
    top: 7px;
  }

  .hd__nav {
    display: none;
    border-top: 1px solid var(--line);
  }

  .hd__nav.is-open {
    display: block;
  }

  .hd__navList {
    display: block;
    padding-bottom: 8px;
  }

  .hd__navList li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.55);
  }

  .hd__navList a {
    padding: 12px 4px;
  }

  .hero__inner {
    padding: 36px 0 40px;
  }

  .hero__lead {
    font-size: var(--fs-body);
  }

  .hero__btns .btn {
    width: 100%;
  }

  .sec {
    padding: 44px 0;
  }

  .erabi {
    padding: 20px 18px 18px;
  }

  .news__box {
    padding: 18px 18px;
  }

  .news__list li {
    display: block;
  }

  .news__tag {
    display: inline-block;
    margin: 0 0 6px;
  }

  .flow__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 20px 18px;
  }

  .flow__num {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }

  .facts > div,
  .facts--wide > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts dt {
    padding-bottom: 4px;
  }

  .facts dd {
    padding-top: 4px;
  }

  .fixbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--brand-on);
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
  }

  .fixbar__tel {
    display: block;
    text-align: center;
    color: var(--white);
    text-decoration: none;
    padding: 10px 8px 12px;
  }

  .fixbar__label {
    display: block;
    font-size: var(--fs-label);
  }

  .fixbar__num {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
  }

  .toast {
    bottom: calc(var(--fixbar-h) + 16px);
  }
}