/* ==========================================================================
   components.css
   複数箇所で使うパーツ（ボタン、見出し、入力欄など）
   Figma：docs/figma-links.md「共通パーツ」、コンポーネント枠（node 284:2）
   ========================================================================== */


/* --------------------------------------------------------------------------
   ヘッダー（ロゴのみ・上部固定なし）
   TOPページはヒーローの上に重ねるため header--overlay を付ける
   -------------------------------------------------------------------------- */
.header {
  padding: var(--space-15) var(--space-15) 0;
}

.header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.header__logo {
  display: block;
  width: 12.25rem;
}

.header__logo-image {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .header {
    padding: var(--space-58) var(--space-33) 0;
  }

  .header__logo {
    width: 20.875rem;
  }
}


/* --------------------------------------------------------------------------
   パンくずリンク（下層ページ用。ヘッダーの下に配置する）
   <nav class="breadcrumb" aria-label="パンくずリスト">
     <ol class="breadcrumb__list">
       <li><a class="breadcrumb__link" href="index.html">トップページ</a></li>
       <li class="breadcrumb__current" aria-current="page">プライバシーポリシー</li>
     </ol>
   </nav>
   -------------------------------------------------------------------------- */
.breadcrumb {
  padding: var(--space-20) var(--space-23) 0;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
}

.breadcrumb__link {
  text-decoration: underline;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.breadcrumb li:not(:last-child)::after {
  content: "";
  width: 0.6875rem;
  height: 0.375rem;
  background: url("../images/icon-breadcrumb-arrow.svg") no-repeat center / contain;
  transform: rotate(-90deg);
}

@media (min-width: 768px) {
  .breadcrumb {
    padding: var(--space-45) var(--space-33) 0;
  }

  .breadcrumb__list {
    font-size: var(--font-size-13);
  }
}


/* --------------------------------------------------------------------------
   ボタン
   hoverはアニメーションで切り替える（色は transition、丸アイコンの色は
   .button__icon の background-color を transition。矢印は常に白なので
   mask-image で色だけ乗せ、アイコン画像を差し替えない）
   <a class="button button--main" href="#reserve">
     レンタルを申込む<span class="button__icon" aria-hidden="true"></span>
   </a>
   <a class="button button--sub" href="#price">
     借りられる車を見る<span class="button__icon" aria-hidden="true"></span>
   </a>
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  width: 100%;
  max-width: 21.5rem;
  height: 4.0625rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-black);
  line-height: 1;
  text-align: center;
  transition: background-color 0.3s ease, background-image 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* 丸いアイコン（矢印は mask-image で乗せた白い矢印。円の色だけ variant ごとに変える） */
.button__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.button__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  mask-image: url("../images/icon-chevron.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-image: url("../images/icon-chevron.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}

/* アイコンの向き（デフォルトは下向き）。矢印として使う場合は左右に回転する
   「進む」系：右向き／「戻る」系（アイコンをテキストより前に置く）：左向き */
.button__icon--next::after {
  transform: rotate(-90deg);
}

.button__icon--prev::after {
  transform: rotate(90deg);
}

/* <button> として使う場合（フォームの各種送信ボタンなど）の無効状態 */
.button:disabled {
  background-image: none;
  background-color: var(--color-bg-disabled);
  border-color: var(--color-bg-disabled);
  color: var(--color-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.button:disabled .button__icon {
  background-color: var(--color-bg-white);
}

.button:disabled .button__icon::after {
  background-color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .button {
    gap: var(--space-15);
    max-width: 26.125rem;
    height: 5.4375rem;
    font-size: var(--font-size-22);
  }

  .button__icon {
    width: 1.6875rem;
    height: 1.6875rem;
  }
}

/* メイン（黄色）。アイコンは常に白地に黄色の矢印で、hoverでは背景だけ
   下側がオレンジのグラデーションに変わる。
   background-imageはグラデーション同士でもtransitionでふわっと変化しない
   （ブラウザの仕様）ため、hover用のグラデーションを::beforeで重ねて
   opacityだけをtransitionさせ、クロスフェードで滑らかに見せている */
.button--main {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(to bottom, var(--color-accent), var(--color-accent));
  color: var(--color-text-white);
}

.button--main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(to bottom, var(--color-accent), var(--color-accent-dark));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button--main:hover::before {
  opacity: 1;
}

.button--main .button__icon {
  background-color: var(--color-text-white);
}

.button--main .button__icon::after {
  background-color: var(--color-accent);
}

/* サブ（白地に青枠）。hoverで枠と文字の色、アイコンの円の色がアニメーションで変わる */
.button--sub {
  background-color: var(--color-bg-white);
  border: var(--border-width-thick) solid var(--color-main);
  color: var(--color-main);
}

.button--sub .button__icon {
  background-color: var(--color-main);
}

.button--sub .button__icon::after {
  background-color: var(--color-text-white);
}

.button--sub:hover {
  border-color: var(--color-main-hover);
  color: var(--color-main-hover);
}

.button--sub:hover .button__icon {
  background-color: var(--color-main-hover);
}

@media (min-width: 768px) {
  .button--sub {
    border-width: var(--border-width-heavy);
  }
}


/* --------------------------------------------------------------------------
   LINE問い合わせボタン（画面右上に常時固定）
   ポップアップ表示中は JS で line-button--hidden を付けて隠す
   <a class="line-button" href="https://lin.ee/PmVyl65" target="_blank" rel="noopener">
     <img class="line-button__icon" src="images/icon-line.svg" alt="LINE">
     <span class="line-button__text">お問い合わせ</span>
   </a>
   -------------------------------------------------------------------------- */
.line-button {
  position: fixed;
  top: 1.1875rem;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  width: 4.25rem;
  height: 4.0625rem;
  border-radius: var(--radius-small) 0 0 var(--radius-small);
  background-color: var(--color-line);
  color: var(--color-text-white);
  transition: opacity 0.3s ease;
}

.line-button:hover {
  opacity: 0.7;
}

.line-button__icon {
  width: 1.5rem;
  height: 1.375rem;
}

.line-button__text {
  font-size: var(--font-size-9);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
}

.line-button--hidden {
  display: none;
}

@media (min-width: 768px) {
  .line-button {
    top: 3.0625rem;
    width: 6.125rem;
    height: 5.8125rem;
    border-radius: var(--radius-medium) 0 0 var(--radius-medium);
  }

  .line-button__icon {
    width: 2.875rem;
    height: 2.6875rem;
  }

  .line-button__text {
    font-size: var(--font-size-13);
  }
}


/* --------------------------------------------------------------------------
   セクション見出し
   <hgroup class="section-heading">
     <p class="section-heading__en">Rental Fee</p>
     <h2 class="section-heading__title">レンタル料金</h2>
   </hgroup>
   -------------------------------------------------------------------------- */
.section-heading__en {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  font-family: var(--font-family-number);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

.section-heading__en::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.section-heading__title {
  font-size: var(--font-size-26);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

@media (min-width: 768px) {
  .section-heading__en {
    gap: var(--space-15);
    font-size: var(--font-size-18);
  }

  .section-heading__en::before {
    width: 1.125rem;
    height: 1.125rem;
  }

  .section-heading__title {
    font-size: var(--font-size-50);
  }
}


/* --------------------------------------------------------------------------
   フォーム項目（ラベル＋入力欄＋エラー）
   エラー時は .form-field に form-field--error を付ける（付け外しは実装者）
   <div class="form-field">
     <label class="form-field__label" for="applicant_name">申込み者お名前<span class="form-field__required">必須</span></label>
     <div class="form-field__body">
       <input class="form-input" id="applicant_name" ...>
       <p class="form-field__error">お名前を正しく入力してください</p>
     </div>
   </div>
   ※ 任意項目（車種・備考・合計金額など）には .form-field__required を付けない
   -------------------------------------------------------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* ラジオボタンの項目は選択肢とラベルが近すぎて見づらいため、
   SPでは項目名との間を少し広げる */
.form-field--radio {
  gap: var(--space-15);
}

.form-field__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.form-field__label-text {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* 入力必須の項目に付ける「必須」ラベル。任意項目には付けない */
.form-field__required {
  flex-shrink: 0;
  padding: 0.375rem 0.5rem;
  border-radius: 0.3125rem;
  background-color: var(--color-error);
  color: var(--color-text-white);
  font-size: var(--font-size-12);
  line-height: 1;
}

.form-field__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.form-field__error {
  display: none;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  color: var(--color-error);
}

.form-field--error .form-field__error {
  display: block;
}

@media (min-width: 768px) {
  .form-field {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-30);
  }

  /* PCは項目名の右側に必須バッジを並べる。「配車・引取の希望」など
     最長のラベルでも折り返さない幅(13rem)まで広げてある */
  .form-field__label {
    flex-shrink: 0;
    width: 13rem;
    font-size: var(--font-size-16);
  }

  /* ラベル分を除いた残り幅いっぱいに広がり、画面幅に合わせて縮む。
     max-widthが実質の標準幅(37rem。ラベル幅を広げた分だけ縮めてある)で、
     これより広い画面では広がらない。
     min-width:0 がないと子要素の内容サイズ分だけはみ出してしまう */
  .form-field__body {
    flex: 1;
    width: auto;
    max-width: 37rem;
    min-width: 0;
  }

  .form-field__error {
    font-size: var(--font-size-16);
  }

  /* お支払い方法など、入力欄が標準幅より広い項目は上限なく広がる */
  .form-field--wide .form-field__body {
    max-width: none;
  }
}

/* 入力欄の上に付く小見出し（「都道府県」など） */
.form-sublabel {
  display: block;
  margin-bottom: var(--space-5);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
}

@media (min-width: 768px) {
  .form-sublabel {
    margin-bottom: var(--space-10);
    font-size: var(--font-size-16);
  }
}


/* --------------------------------------------------------------------------
   テキスト入力・テキストエリア
   -------------------------------------------------------------------------- */
.form-input,
.form-textarea {
  display: block;
  width: 100%;
  border: var(--border-width-thin) solid var(--color-text);
  border-radius: var(--radius-medium);
  background-color: var(--color-bg-white);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
}

.form-input {
  height: 3rem;
  padding: 0 var(--space-15);
}

.form-textarea {
  height: 9.875rem;
  padding: var(--space-12) var(--space-15);
  line-height: var(--line-height-body);
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-placeholder);
}

@media (min-width: 768px) {
  .form-input,
  .form-textarea {
    font-size: var(--font-size-16);
  }
}


/* --------------------------------------------------------------------------
   セレクトボックス
   -------------------------------------------------------------------------- */
.form-select {
  display: block;
  width: 13.4375rem;
  max-width: 100%;
  height: 3rem;
  padding: 0 var(--space-40) 0 var(--space-15);
  border: var(--border-width-thin) solid var(--color-text);
  border-radius: var(--radius-medium);
  background: var(--color-bg-white) url("../images/icon-select-arrow.svg") no-repeat right var(--space-15) center / 0.875rem auto;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  appearance: none;
  cursor: pointer;
}

/* 都道府県を選ぶまでの市区町村など */
.form-select:disabled {
  border-color: var(--color-bg-disabled);
  background-color: var(--color-bg-disabled);
  color: var(--color-text-muted);
  cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   ラジオボタン
   <label class="form-radio">
     <input class="form-radio__input" type="radio" name="..." value="...">
     <span class="form-radio__text">不要</span>
   </label>
   -------------------------------------------------------------------------- */
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  cursor: pointer;
}

.form-radio__input {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--border-width-thin) solid var(--color-text);
  border-radius: 50%;
  background-color: var(--color-bg-white);
  appearance: none;
  cursor: pointer;
}

.form-radio__input:checked {
  background: var(--color-text) url("../images/icon-check.svg") no-repeat center / 0.875rem auto;
}

/* 複数のラジオボタンを並べる行（折り返しあり） */
.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10) var(--space-20);
}

@media (min-width: 768px) {
  .form-radio {
    font-size: var(--font-size-16);
  }
}


/* --------------------------------------------------------------------------
   チェックボックス（同意事項）
   ポップアップを最後まで読むまでは disabled にしておく（main.js で解除）
   <label class="form-checkbox">
     <input class="form-checkbox__input" type="checkbox" name="..." disabled>
     <span class="form-checkbox__text"><a href="#">プライバシーポリシー</a>に同意する</span>
   </label>
   -------------------------------------------------------------------------- */
.form-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-10);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  cursor: pointer;
}

.form-checkbox__input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  border: var(--border-width-thin) solid var(--color-text);
  background-color: var(--color-bg-white);
  appearance: none;
  cursor: pointer;
}

.form-checkbox__input:checked {
  background: var(--color-text) url("../images/icon-check.svg") no-repeat center / 0.875rem auto;
}

.form-checkbox__input:disabled {
  border-color: var(--color-border-checkbox);
  background-color: var(--color-bg-gray);
  cursor: not-allowed;
}

.form-checkbox__text a {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .form-checkbox {
    font-size: var(--font-size-16);
  }
}


/* --------------------------------------------------------------------------
   フッター（全ページ共通）
   Figma：SP 247:872 / PC 247:2469
   -------------------------------------------------------------------------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-14);
  padding: var(--space-50) var(--space-23) var(--space-76);
  background-color: var(--color-main);
  color: var(--color-text-white);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.footer__link {
  text-decoration: none;
}

.footer__link:hover {
  text-decoration: underline;
}

.footer__copyright {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .footer {
    gap: var(--space-28);
    padding: var(--space-53) var(--space-23);
    font-size: var(--font-size-16);
  }
}


/* --------------------------------------------------------------------------
   フェードイン
   対象に fade-in を付けると、最初は透明・少し下にずれた状態になる。
   main.js が「表示する」タイミングで is-visible を付けて動かし、
   一度動いたら二度と繰り返さない（js/main.js 参照）。
   -------------------------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--duration-fade) ease-out, transform var(--duration-fade) ease-out;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ボタンにfade-inを重ねて使う場合（ヒーローのCTAなど）。
   .button と .fade-in はどちらも transition を指定しているため、
   後から読み込まれる側で上書きされてしまい、どちらか一方しか
   アニメーションしなくなる。ここで両方ぶんをまとめて指定する */
.button.fade-in {
  transition: opacity var(--duration-fade) ease-out, transform var(--duration-fade) ease-out, background-color 0.3s ease, background-image 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}