/* 法人のお取引（/business/）。スマホ基準。900px 以上でページ見出しをPC組みに、1100px 以上で各セクションを多段組・PC用の表にする。 */

/* ============================================================ ページ見出し（背景：コーヒー豆） */
.phead { padding: calc(var(--header-h) + 36px) 0 48px; }

.phead__crumb {
  font-size: 11px;
  line-height: 17.6px;
  letter-spacing: 0.1em;
  color: var(--cream-sub);
}

.phead__label {
  margin-top: 24px;
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.4px;
  letter-spacing: 0.02em;
  color: var(--copper-light);
}

.phead__title {
  margin-top: 8px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 43.4px;
  letter-spacing: 0.04em;
  color: var(--cream-text);
}

.phead__lead {
  margin-top: 16px;
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: var(--cream-sub);
}

.phead__buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.phead__buttons .pc-btn { display: none; }

/* 見出しの途中の改行はスマホだけ */
.sp-br { display: inline; }

@media (min-width: 900px) {
  .phead { padding: calc(var(--header-h) + 80px) 0 96px; }
  .phead__crumb { font-size: 12px; line-height: 19.2px; }
  .phead__label { margin-top: 32px; font-size: 20px; line-height: 28px; }
  .phead__title { margin-top: 12px; font-size: 46px; line-height: 69px; }
  .phead__lead { max-width: 640px; margin-top: 24px; font-size: 16px; line-height: 32px; }
  .phead__buttons { flex-direction: row; align-items: flex-start; gap: 14px; margin-top: 36px; }
  .phead__buttons .pc-btn { display: inline-flex; }
  .phead__buttons .sp-btn { display: none; }
  .sp-br { display: none; }
}

/* ============================================================ 扱っていただく理由 */
.reasons__list { margin-top: 16px; }

.reason {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 22px;
  border-top: 1px solid var(--rule);
}

.reason__no {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 26.4px;
  color: var(--copper);
}

.reason__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 28.5px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.reason__text {
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

@media (min-width: 1100px) {
  .reasons__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; }
  .reason { gap: 0; padding-block: 28px 0; }
  .reason__no { font-size: 44px; line-height: 48.4px; }
  .reason__title { margin-top: 18px; font-size: 24px; line-height: 36px; }
  .reason__text { margin-top: 13px; font-size: 15px; line-height: 29px; letter-spacing: 0.02em; }
}

/* ============================================================ 商品の規格 */
.specs .sec-head__sub { margin-top: 12px; }

.spec { width: 100%; border-collapse: collapse; }
.spec--pc { display: none; }

/* スマホ：白い箱の表。見出し行だけ薄い紫 */
.spec--sp {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--brown-line);
}

.spec--sp { table-layout: fixed; border-collapse: separate; border-spacing: 0; }

.spec--sp th,
.spec--sp td {
  padding: 12px 5px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--brown-line);
}

.spec--sp .spec__k { width: 26.2%; padding-left: 12px; font-size: 12px; font-weight: 400; line-height: 19.2px; letter-spacing: 0.02em; color: var(--plum-soft); }
.spec--sp th:last-child,
.spec--sp td:last-child { padding-right: 12px; }
.spec--sp thead tr > * { background: var(--plum-light); }
.spec--sp thead .spec__v { width: 35.9%; font-family: var(--ff-serif); font-size: 15px; font-weight: 500; line-height: 24px; letter-spacing: 0.02em; color: var(--plum); }
.spec--sp thead th:last-child { width: auto; }
.spec--sp tbody tr:last-child > * { border-bottom: 0; }
.spec--sp td { font-size: 13px; font-weight: 300; line-height: 22.1px; letter-spacing: 0.02em; color: var(--ink); }
.spec--sp tbody tr:nth-child(-n+2) td { line-height: 20.8px; }

.specs__more { margin-top: 20px; }

.catalog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--brown-line);
  background: #fff;
}

.catalog__body { display: flex; flex-direction: column; gap: 8px; }

.catalog__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.catalog__text { font-size: 13px; line-height: 23px; letter-spacing: 0.02em; color: var(--ink-2); }
.catalog__buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.catalog__buttons .btn { display: flex; width: 100%; }

@media (min-width: 1100px) {
  .specs .sec-head__sub { margin-top: 16px; }

  .spec--sp, .specs__more { display: none; }

  .spec--pc {
    display: table;
    width: 100%;
    table-layout: fixed; /* 列幅は 220 + 均等割り（見出しの字体に左右されない） */
    margin-top: 56px;
    border-top: 1px solid var(--plum);
    border-bottom: 1px solid var(--plum);
  }

  .spec--pc th,
  .spec--pc td { padding: 18px 28px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--brown-line); }
  .spec--pc tbody tr:last-child > * { border-bottom: 0; }
  .spec--pc .spec__k { width: 220px; font-size: 14px; font-weight: 400; line-height: 25px; letter-spacing: 0.02em; color: var(--plum-soft); }
  .spec--pc td { font-size: 15px; font-weight: 300; line-height: 27px; letter-spacing: 0.02em; color: var(--ink); }
  .spec--pc .spec__v--r { border-left: 1px solid var(--brown-line); }

  .spec--pc thead th { padding-block: 22px; border-bottom: 1px solid var(--plum); }
  .spec--pc thead .spec__k { font-size: 13px; line-height: 20.8px; letter-spacing: 0.08em; }
  .spec--pc thead .spec__v { font-family: var(--ff-serif); font-size: 22px; font-weight: 500; line-height: 30.8px; letter-spacing: 0.02em; color: var(--plum); }
  .spec--pc thead .spec__v--r { border-bottom: 1px solid var(--plum); }

  .catalog {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    margin-top: 48px;
    padding: 32px 40px;
  }

  .catalog__body { flex: 1 1 0; min-width: 0; gap: 6px; }
  .catalog__title { font-size: 22px; line-height: 33px; }
  .catalog__text { font-size: 14px; line-height: 25px; }
  .catalog__buttons { flex: none; flex-direction: row; gap: 12px; margin-top: 0; }
  .catalog__buttons .btn { display: inline-flex; width: auto; }
}

/* ============================================================ 導入シーン別のご提案 */
.props__list { margin-top: 16px; }

.prop {
  display: flex;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--rule);
}

.prop__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.prop__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 25.5px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.prop__text { font-size: 13px; line-height: 23px; letter-spacing: 0.02em; color: var(--ink-2); }

@media (min-width: 1100px) {
  .props__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }

  .prop {
    gap: 28px;
    padding: 36px 40px 40px 36px;
    border: 1px solid var(--rule);
    background: #fff;
  }

  .prop__body { gap: 10px; }
  .prop__title { font-size: 22px; line-height: 33px; }
  .prop__text { font-size: 15px; line-height: 29px; }
}

/* ============================================================ お取引までの流れ */
.flow .sec-head__sub { margin-top: 12px; }

.flow__list { margin-top: 20px; }

.fstep {
  display: flex;
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--plum-line);
}

.fstep:last-child { border-bottom: 0; }

.fstep__no {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--plum);
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: 14px;
  line-height: 16.8px;
  color: #fff;
}

.fstep__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.fstep__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 25.5px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.fstep__text { font-size: 13px; line-height: 23px; letter-spacing: 0.02em; color: var(--ink-2); }

@media (min-width: 1100px) {
  .flow .sec-head__sub { margin-top: 16px; }

  .flow__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 64px;
  }

  /* つなぎ線（丸の中心を通る） */
  .flow__list::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 26px;
    right: 26px;
    height: 1px;
    background: var(--plum-line);
  }

  .fstep {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
  }

  .fstep__no {
    width: 52px;
    height: 52px;
    font-style: italic;
    border: 1px solid var(--plum-line);
    background: #fff;
    font-size: 20px;
    line-height: 24px;
    color: var(--copper);
  }

  .fstep__body { display: block; margin-top: 22px; }
  .fstep__title { font-family: var(--ff-sans); font-size: 16px; line-height: 25.6px; letter-spacing: 0.04em; }
  .fstep__text { margin-top: 8px; font-size: 14px; line-height: 26px; letter-spacing: 0.02em; }
}

/* ============================================================ よくいただくご質問（details/summary） */
.faq__list { margin-top: 16px; border-top: 1px solid var(--rule); }

.qa { border-bottom: 1px solid var(--rule); }

.qa__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px 18px 0;
  list-style: none;
  cursor: pointer;
}

.qa__q::-webkit-details-marker { display: none; }

.qa__ic {
  position: absolute;
  top: 18px;
  right: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--plum-soft);
}

.qa__ic-on { display: none; }
.qa[open] .qa__ic-on { display: inline; }
.qa[open] .qa__ic-off { display: none; }

.qa__mark {
  flex: none;
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  color: var(--copper);
}

.qa__mark--a { color: var(--plum-soft); }

.qa__q .qa__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 23.8px;
  letter-spacing: 0.02em;
  color: var(--plum);
}

.qa[open] > .qa__q { padding-bottom: 10px; }
.qa__a { display: flex; gap: 12px; padding-bottom: 18px; }
.qa__a .qa__text { font-size: 13px; font-weight: 300; line-height: 23px; letter-spacing: 0.02em; color: var(--ink-2); }
.qa:not([open]) .qa__a { display: none; }

@media (min-width: 1100px) {
  .faq__inner { display: flex; align-items: flex-start; gap: 88px; }
  .faq .sec-head { flex: none; width: 360px; }
  .faq__list { flex: 1 1 0; min-width: 0; margin-top: 0; }

  .qa__q, .qa[open] > .qa__q { gap: 20px; padding: 24px 38px 24px 0; }
  .qa__ic { top: 26.8px; font-size: 18px; line-height: 21.6px; }
  .qa__mark { width: 24px; font-size: 20px; line-height: 24px; }
  .qa__q .qa__text { font-size: 16px; font-weight: 400; line-height: 27.2px; letter-spacing: 0.04em; }

  .qa__a { gap: 20px; padding: 0 40px 26px 0; }
  .qa__a .qa__text { font-size: 15px; line-height: 28px; letter-spacing: 0.02em; }
}