/* ============================================================
   components.css  ＝ 何度も使う「部品」
   ・アイコンの共通設定
   ・大きい赤ボタン（.btn）。マウスを乗せると色面が左から塗り替わる
   ・ヘッダー右端の赤ボタン（.header-cta）。マウスを乗せると上にふわっと浮く
   ・（区切り②で追加）大きい赤ボタン426x80（.btn--large）、セクション見出し（.sec-head）、
     見出し下の説明文（.sec-lead）、スライダーの ◀ ▶ ボタン（.slider-btn）、タグ（.tag）
   ============================================================ */

/* ---------- アイコン（スプライトを <use> で呼び出す） ---------- */
.icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;                    /* アイコンの線の太さは全部1.5 */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 大きい赤ボタン ----------
   通常：赤地に白文字。マウスを乗せると、白い色面が左から流れ込んで「白地に赤文字」に変わる（0.4秒）。
   ※ 塗り替わる色は設計書に指定がないため「白」で仮置き（要確認） */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--color-white);
  background: var(--color-red);
  border: 1px solid var(--color-red);
  border-radius: var(--radius-cta);
  transition: color var(--motion-button) var(--ease-comore);
}

/* 左から流れ込む色面 */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-white);
  transform: translateX(-101%);
  transition: transform var(--motion-button) var(--ease-comore);
}

.btn:hover,
.btn:focus-visible {
  color: var(--color-red);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateX(0);
}

/* KVの大ボタン（Figma実測 434x73） */
.btn--hero {
  width: 434px;
  max-width: 100%;
  height: 73px;
}

.btn__icon {
  width: 30px;
  height: 30px;
}

@media (max-width: 959px) {
  .btn {
    font-size: 16px;
  }

  .btn--hero {
    height: 64px;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 0 20px;
    letter-spacing: .06em;
  }

  .btn--hero {
    width: 100%;                        /* 狭いスマホではボタンを画面幅いっぱいに */
  }
}

/* ---------- ヘッダー右端の赤ボタン「無料見積・ご相談」（Figma実測 188x50） ----------
   マウスを乗せると下がらず、上に2pxふわっと浮いて薄い影が付く */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 188px;
  height: 50px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: var(--radius-cta);
  transition: transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}

.header-cta:hover,
.header-cta:focus-visible {
  transform: translateY(-2px);
}

.header-cta:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, .15);   /* キーボード操作時は base.css の二重の枠を優先 */
}

/* ============================================================
   ここから区切り②で追加した部品
   ============================================================ */

/* ---------- 大きい赤ボタン（利用シーン下・お問い合わせ。Figma実測 426x80） ---------- */
.btn--large {
  width: 426px;
  max-width: 100%;
  height: 80px;
}

@media (max-width: 959px) {
  .btn--large {
    height: 64px;
  }
}

@media (max-width: 480px) {
  .btn--large {
    width: 100%;                        /* 狭いスマホではボタンを画面幅いっぱいに */
  }
}

/* ---------- セクション見出し「日本語 | 英語」 ----------
   左：日本語（40px・太字）／間に薄グレーの縦線／右：英語（金茶・Roboto 16px） */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-weight: 700;
  line-height: 1.2;
}

.sec-head__ja {
  font-size: 40px;
  letter-spacing: .05em;
}

.sec-head__en {
  position: relative;
  margin-left: 20px;
  padding-left: 24px;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--color-gold);
}

/* 日本語と英語の間の縦線（高さ17px） */
.sec-head__en::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 17px;
  background: var(--color-line);
  transform: translateY(-50%);
}

/* 見出しの下の説明文（16px・行の高さ1.75・字間広め） */
.sec-lead {
  margin-top: 32px;
  font-size: 16px;
  letter-spacing: .2em;
  line-height: 1.75;
}

.sec-lead__line {                       /* Figmaどおりの位置で改行する */
  display: block;
}

@media (max-width: 959px) {
  .sec-head__ja {
    font-size: 34px;
  }

  .sec-head__en {
    margin-left: 16px;
    padding-left: 18px;
    font-size: 14px;
  }

  .sec-lead {
    margin-top: 24px;
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .sec-head__ja {
    font-size: 28px;
  }

  .sec-head__en {
    margin-left: 12px;
    padding-left: 14px;
    font-size: 12px;
  }

  .sec-head__en::before {
    height: 14px;
  }

  .sec-lead {
    margin-top: 20px;
    font-size: 14px;
    letter-spacing: .1em;               /* スマホは字間を少し詰めて読みやすく（設計書に指定なし・暫定） */
  }
}

/* 狭いスマホ（480px以下）：見出しを1段階小さく */
@media (max-width: 480px) {
  .sec-head__ja {
    font-size: 24px;
  }
}

/* ---------- スライダーの ◀ ▶ ボタン（白い四角30x24の中に赤い三角） ----------
   特長の写真スライダーと、利用シーンの切り替えで共通 */
.slider-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  color: var(--color-red);
  background: var(--color-white);
  border-radius: var(--radius-cta);
}

/* 見た目は小さいままで、指で押せる範囲だけ上下に広げる（見えない当たり判定） */
.slider-btn::before {
  content: "";
  position: absolute;
  inset: -10px -3px;
}

.slider-btn:disabled {
  cursor: default;
  opacity: .4;
}

/* 赤い三角（べた塗り・約8px） */
.icon--tri {
  width: 8px;
  height: 8px;
}

/* ---------- タグ（利用シーンの用途。高さ32px・白地に薄グレーの枠） ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 11px;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.3;
  color: #333333;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-cta);
}

/* ============================================================
   ここから区切り④で追加した部品
   ============================================================ */

/* ---------- 「よくあるご質問 →」ボタン（FAQの下。Figma実測 194x58）----------
   色面が左から塗り替わる動きは .btn をそのまま使う。文字だけ 14px、矢印は少し小さめ */
.btn--faq {
  width: 194px;
  max-width: 100%;
  height: 58px;
  padding: 0 24px;
  gap: 8px;
  font-size: 14px;
  letter-spacing: .1em;
  white-space: nowrap;                  /* 「よくあるご質問」が2行に割れないように */
}

.btn--faq .btn__icon {
  width: 24px;
  height: 24px;
}

/* ---------- アコーディオン（FAQの開閉部品）----------
   1行＝質問ボタン（黒丸のQ＋質問＋右端の丸い＋／－）＋その下に開く回答パネル。
   開閉の動きは assets/js/accordion.js。JSが動くと入れ物（.accordion）に .is-ready が付く。
   JSが動かないときは、回答が全部開いた状態で読める（＋－のアイコンとホバー色は出さない） */
.accordion__heading {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border-bottom: 1px solid var(--color-faq-line);   /* 質問の下の線（閉じていても開いていても常にある。開いたときは質問と回答の間の区切り線になる）。行の高さ＝56px＋線1px＝57px */
}

/* 最後の行が閉じているときは、カードの下端に線が出ないよう色だけ消す（高さは同じ57px） */
.accordion__item:last-child:not(:has(.accordion__button[aria-expanded="true"])) .accordion__heading {
  border-bottom-color: transparent;
}

/* 質問の行（1行の高さ 56px＋線1px＝57px） */
.accordion__button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 8px 25px 8px 24px;
  text-align: left;
  cursor: default;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.accordion.is-ready .accordion__button {
  cursor: pointer;
}

/* マウスを乗せると背景が薄く変わる（0.2秒）。角丸のカードからはみ出さないよう、上下端の行だけ角を丸める */
.accordion.is-ready .accordion__button:hover {
  background-color: #F7F7F7;
}

.accordion__item:first-child .accordion__button {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.accordion__item:last-child .accordion__button[aria-expanded="false"] {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* キーボードで選んだときの枠が、隣の行の背景に隠れないよう手前に出す */
.accordion__button:focus-visible {
  position: relative;
  z-index: 1;
}

/* 黒丸（24px）に白い「Q」 */
.accordion__q {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  background: var(--color-faq-q);
  border-radius: var(--radius-round);
}

.accordion__question {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.6;
  color: #333333;
}

/* 右端の薄グレー丸（19px）。中は閉じているとき「＋」、開いているとき「－」 */
.accordion__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #555555;
  background: var(--color-faq-plus);
  border-radius: var(--radius-round);
}

.accordion:not(.is-ready) .accordion__toggle {
  display: none;                        /* JSが動かないときは開閉できないので、＋－は出さない */
}

.accordion__icon {
  width: 11px;
  height: 11px;
}

.accordion__icon--minus,
.accordion__button[aria-expanded="true"] .accordion__icon--plus {
  display: none;
}

.accordion__button[aria-expanded="true"] .accordion__icon--minus {
  display: block;
}

/* 回答パネル（高さの開閉は JS が height を動かす。閉じているときは hidden） */
.accordion__panel[hidden] {
  display: none;
}

/* 回答の文章（貸会議室ネット実測）。上16px・下24px、右32px。
   左64px＝質問文字の左端（左24px＋Q丸24px＋隙間16px）にそろえる。
   下端の線は次の行との区切り（カード幅いっぱい）。段落の間に余白は空けず、改行と同じ詰まり具合にする */
.accordion__body {
  padding: 16px 32px 24px 64px;
  border-bottom: 1px solid var(--color-faq-line);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.5;
  color: #333333;
}

.accordion__item:last-child .accordion__body {
  border-bottom: 0;                     /* 最後の行はカードの下端なので線を引かない */
}

/* 回答内リンク（貸会議室ネット実測）：青＋下線、マウスを乗せると下線が消える（色は変わらない）。外部リンクのアイコンは付けない */
.accordion__link {
  color: var(--color-link);
  text-decoration: underline;
}

.accordion__link:hover {
  text-decoration: none;
}

/* 狭いスマホ（480px以下）：左右を詰める。回答の左端は質問の文字（Q丸16px＋隙間12px＋24px＝52px）にそろえる */
@media (max-width: 480px) {
  .accordion__button {
    gap: 12px;
    padding-inline: 16px;
  }

  .accordion__body {
    padding: 16px 16px 24px 52px;
  }
}

/* ============================================================
   ここから区切り⑤で追加した部品
   ============================================================ */

/* ---------- ページトップへ戻るボタン（画面の右下に固定・40x40・白・角丸8px・薄グレーの枠1px・薄い影・小さめの灰色の上矢印）----------
   見た目は貸会議室ネットのページトップボタンに合わせた（制作者指示 2026-09-30）：枠 #DDDBDA、影 0 4px 10px rgba(0,0,0,.08)、矢印は #706E6B の不透明度50%。
   JSが動くとき（html.js）：300px以上スクロールするまで隠す（隠れているあいだは押せず、Tabの対象にもならない）。
   JSが動かないときは、いつも表示しておき、押すと href="#top"（ページ先頭）へ移る普通のリンクとして使える */
.back-to-top {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 90;                          /* ヘッダー（100）より下、本文より上 */
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #706E6B;
  background: var(--color-white);
  border: 1px solid #DDDBDA;
  border-radius: var(--radius-card);    /* 8px */
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transition: opacity var(--motion-fast) var(--ease-standard),
              visibility var(--motion-fast) var(--ease-standard);
}

.back-to-top__icon {
  width: 26px;                          /* 20x20の箱を26pxで表示＝矢印は約15.6px角（貸会議室ネットの実測と同じ） */
  height: 26px;
  opacity: .5;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.back-to-top:hover .back-to-top__icon {
  opacity: .8;
}

.js .back-to-top {
  opacity: 0;
  visibility: hidden;
}

.js .back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  .back-to-top {
    right: 16px;                        /* スマホは右16px・下16px（設計書§9.6） */
    bottom: 16px;
  }
}