/* ==========================================================================
   下層ページ共通：固定ヘッダー分のクリアランス
   ⚠️ ヘッダーはposition:fixedで浮いているため、下層の中身はその下に潜り込む。
   ここでヘッダーの高さ分だけ中身を押し下げる（＝ヘッダーとの重なり回避）。
   各ページの.p-xxxのpadding-topは「ヘッダー下端からのデザイン上の余白」で別物。
   contents.cssは下層でのみ読み込まれるため、フロントのKV（ヘッダー下に潜り込む
   設計）には影響しない。ヘッダー高さはcommon.css実測でPC100px／1080px以下86px。
   ========================================================================== */
@layer common {
  .l-contents {
    padding-top: 100px;

    @media (max-width: 1080px) {
      padding-top: 86px;
    }
  }
}

/* ==========================================================================
   プライバシーポリシー
   ========================================================================== */
@layer common {
  .p-policy {
    padding-top: 80px;

    @media (max-width: 768px) {
      padding-top: 40px;
    }
  }

  .p-policy__lead {
    margin-top: 100px;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    line-height: 1.7;
    letter-spacing: 0.56px;
    color: #4d4c4a;

    @media (max-width: 768px) {
      margin-top: 80px;
    }
  }

  .p-policy__list {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 60px;

    @media (max-width: 768px) {
      margin-top: 48px;
      gap: 40px;
    }
  }

  .p-policy__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .p-policy__item-ttl {
    padding-bottom: 10px;
    border-bottom: 1px solid #d6d6d6;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.8rem; /* 18px */
    letter-spacing: 0.72px;
    line-height: 1;
    color: var(--color-primary);

    @media (max-width: 768px) {
      font-size: 1.5rem; /* 15px */
      letter-spacing: 0.6px;
    }
  }

  .p-policy__item-body {
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    line-height: 1.7;
    letter-spacing: 0.56px;
    color: #4d4c4a;

    p + p {
      margin-top: 0;
    }

    ul {
      list-style: disc;
      padding-inline-start: 21px;
    }
  }
}

/* ==========================================================================
   会社概要
   ========================================================================== */
@layer common {
  .p-company {
    padding-top: 80px;

    @media (max-width: 768px) {
      padding-top: 40px;
    }
  }

  .p-company__list {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 30px;

    @media (max-width: 768px) {
      margin-top: 80px;
      gap: 20px;
    }
  }

  .p-company__item {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 30px; /* Figma実測：ラベル/値のテキストは行の上端ぴったりで、下端との間だけ30px空く */
    border-bottom: 1px solid #d6d6d6;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    line-height: 1.7;
    letter-spacing: 0.56px;
    color: #4d4c4a;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 0; /* Figma実測：ラベルと値の間に隙間はなく詰まっている */
      padding-bottom: 20px; /* Figma実測：値の下端とボーダーの間だけ20px空く */
    }
  }

  .p-company__item-label {
    flex: 0 0 200px;

    @media (max-width: 768px) {
      flex-basis: auto;
    }
  }

  .p-company__item-value {
    flex: 1 1 640px;

    p + p {
      margin-top: 0;
    }

    a {
      text-decoration: underline;
    }

    @media (max-width: 768px) {
      flex-basis: auto; /* ⚠️ SPはflex-direction:columnになるため、640pxのflex-basisが「高さ」として
        効いてしまい大崩れする。列方向では基準サイズを自動に戻す必要がある */
      font-size: 1.5rem; /* 15px */
      letter-spacing: 0.6px;
    }
  }

  .p-company__address:not(:last-child) {
    margin-bottom: 30px;
  }

  /* --- 電話番号：PCではタップ操作が無意味なのでリンクとして機能させない。
       SPでのみタップして発信できるようにする --- */
  .p-company__item-value a.p-company__tel {
    pointer-events: none;
    cursor: default;
    text-decoration: none;

    @media (max-width: 768px) {
      pointer-events: auto;
      cursor: pointer;
    }
  }
}

/* ==========================================================================
   お問い合わせ（CF7）
   ========================================================================== */
@layer common {
  .p-contact {
    padding-top: 80px;

    @media (max-width: 768px) {
      padding-top: 40px;
    }
  }

  /* ⚠️ フォーム本体。CF7に移した後は生成される<form class="wpcf7-form">が
     この位置に来るので、見出しからの余白はwpcf7-form側に持たせておく */
  .p-contact .wpcf7-form {
    margin-top: 100px;

    @media (max-width: 768px) {
      margin-top: 90px;
    }
  }

  /* ⚠️ CF7は各入力欄を<span class="wpcf7-form-control-wrap">で囲む。
     デフォルトinlineのままだと入力欄がwidth:100%で伸びないのでblock化する */
  .p-contact .wpcf7-form-control-wrap {
    display: block;
  }

  .p-contact__fields {
    display: flex;
    flex-direction: column;
    gap: 30px;

    @media (max-width: 768px) {
      gap: 40px;
    }
  }

  .p-contact__field {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* お問い合わせ内容だけラベル〜入力欄の間隔がFigma実測で17px（他は10px） */
  .p-contact__field--message {
    gap: 17px;
  }

  .p-contact__label {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .p-contact__label-text {
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.5rem; /* 15px */
    letter-spacing: 0.6px;
    line-height: 1;
    color: var(--color-primary);
  }

  /* 必須/任意バッジ。※Figma上、必須の色は#f66b5eと#f6755eが混在していたが#f66b5eに統一 */
  .p-contact__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px 4px;
    border-radius: 10px;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.2rem; /* 12px */
    letter-spacing: 0.36px;
    line-height: 1;
    color: var(--color-text-light);
  }

  .p-contact__badge--required {
    background-color: #f66b5e;
  }

  .p-contact__badge--optional {
    background-color: #a6a5a2;
  }

  /* 入力欄（1行） */
  .p-contact__input {
    width: 100%;
    height: 44px;
    padding-inline: 15px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    background-color: #fff;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    letter-spacing: 0.56px;
    line-height: 1;
    color: var(--color-primary);

    &::placeholder {
      color: #a6a5a2;
      opacity: 1; /* Firefox対策 */
    }

    @media (max-width: 768px) {
      height: 50px;
    }
  }

  /* 入力欄（複数行） */
  .p-contact__textarea {
    display: block;
    width: 100%;
    height: 200px;
    padding: 15px 13px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    background-color: #fff;
    resize: vertical;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    letter-spacing: 0.56px;
    line-height: 1.7;
    color: var(--color-primary);

    &::placeholder {
      color: #a6a5a2;
      opacity: 1;
    }

    @media (max-width: 768px) {
      height: 170px;
    }
  }

  /* フォーカス時：共通リセットの:focus-visible（2px・offset2pxで一回り大きい枠）は
     使わず、既存の1px枠線の色だけアクセント色に変える。サイズ・太さは変わらない */
  .p-contact__input:focus,
  .p-contact__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  /* 個人情報同意チェック（中央寄せ） */
  .p-contact__agree {
    display: flex;
    justify-content: center;
    margin-top: 40px;

    /* ※.wpcf7-list-itemのマージン打ち消しはCF7のレイヤー無しCSSに勝つため
       ファイル末尾のレイヤー外ブロックに置いている */

    label {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
    }

    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      margin: 0;
      border: 1px solid #b8b8b8;
      border-radius: 2px;
      background-color: #fff;
      cursor: pointer;

      /* チェック時：中央にチェックマークを描く（Figmaは未チェック状態のみ提示）。
         塗り色はフォーカス枠と同じアクセント色に合わせる */
      &:checked {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
      }
    }

    .wpcf7-list-item-label {
      font-family: var(--font-base);
      font-weight: 400;
      font-size: 1.3rem; /* 13px */
      letter-spacing: 0.52px;
      line-height: 1;
      color: #4d4c4a;
    }
  }

  /* 送信ボタン（確認画面へ） */
  .p-contact__submit-wrap {
    position: relative;
    width: 235px;
    margin: 50px auto 0;

    /* 右寄せの矢印アイコン。input本体ではなくラッパーの::afterに描いて
       テキストと干渉させず、currentColor相当（#272726）でマスク着色する。
       ⚠️ icon-arrow.svgはviewBox="0 0 20 20"の中に8×9の矢印が入っている構造。
       Figmaのbtn03と同じく20×20の箱にmask-size:20pxで実寸表示する。
       （containだと20×20全体が縮小され矢印が3px程度に潰れてしまう） */
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 41px; /* btn03のleft174基準：235 - 174 - 20 */
      width: 20px;
      height: 20px;
      transform: translateY(-50%);
      background-color: var(--color-primary);
      pointer-events: none;

      mask-image: url("../images/common/icon/icon-arrow.svg");
      mask-size: 20px;
      mask-repeat: no-repeat;
      mask-position: center;

      -webkit-mask-image: url("../images/common/icon/icon-arrow.svg");
      -webkit-mask-size: 20px;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
    }
  }

  .p-contact__submit {
    display: block; /* inline-block由来の下余白でラッパー中央がズレ、矢印(::after)が縦にズレるのを防ぐ */
    width: 100%;
    height: 58px;
    border: 1px solid #bebebe;
    border-radius: 30px;
    background-color: #fff;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.5rem; /* 15px */
    letter-spacing: 3px;
    line-height: 1;
    color: var(--color-primary);
    cursor: pointer;
    transition: var(--transition-base);

    /* c-btn-white（トップの「ご契約医療機関様はこちら」）と同じホバー：
       フェードさせず、枠線を#bebebe→#5c5c5bに濃くする */
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        opacity: 1;
        border-color: #5c5c5b;
      }
    }
  }
}

/* ==========================================================================
   お問い合わせ 確認画面（CF7マルチステップ）
   ========================================================================== */
@layer common {
  .p-confirm {
    padding-top: 80px;

    @media (max-width: 768px) {
      padding-top: 40px;
    }
  }

  .p-confirm__ttl {
    font-family: var(--font-base);
    font-weight: 300;
    font-size: 3.4rem; /* 34px */
    letter-spacing: 1.36px;
    line-height: 1;
    color: var(--color-primary);
    text-align: center;

    @media (max-width: 768px) {
      font-size: 2.7rem; /* 27px */
      letter-spacing: 1.08px;
      line-height: 1.6;
    }
  }

  .p-confirm__lead {
    margin-top: 40px;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    line-height: 1.7;
    letter-spacing: 0.56px;
    color: #4d4c4a;
    text-align: center;

    @media (max-width: 768px) {
      margin-top: 30px;
      text-align: left; /* SPは折り返すため左寄せ（Figma準拠） */
    }
  }

  .p-confirm__list {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 30px;

    @media (max-width: 768px) {
      margin-top: 30px;
      /* Figma：値〜次バーは20px。値のline-height:1.5で下に約3.75pxのアキが出る分を引いて16px */
      gap: 16px;
    }
  }

  /* ラベルバー（グレー背景） */
  .p-confirm__label {
    display: flex;
    align-items: center;
    height: 40px;
    padding-inline: 24px;
    background-color: #f6f5f4;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    letter-spacing: 0.56px;
    line-height: 1;
    color: #a6a5a2;

    @media (max-width: 768px) {
      height: 32px;
      padding-inline: 20px;
    }
  }

  /* 入力値 */
  .p-confirm__value {
    margin-top: 20px;
    padding-inline: 24px;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.5rem; /* 15px */
    letter-spacing: 0.6px;
    line-height: 1.5;
    color: var(--color-primary);
    white-space: pre-wrap; /* お問い合わせ内容の改行を保持 */

    @media (max-width: 768px) {
      /* Figma：バー下端〜値は12px。line-height:1.5で上に約3.75pxのアキが出る分を引いて8px */
      margin-top: 8px;
      padding-inline: 20px;
    }
  }

  /* 戻る（下線付きテキストリンク） */
  .p-confirm__back-wrap {
    margin-top: 25px;
    text-align: center;
  }

  .p-confirm__back {
    display: inline-block;
    width: 55px; /* Figma：罫線はテキスト幅ではなく55px幅の箱いっぱいに引く */
    padding-bottom: 10px; /* Figma：テキスト下端〜罫線の間隔は約10px */
    border: none;
    border-bottom: 1px solid #bebebe;
    background: none;
    text-align: center;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    letter-spacing: 2.8px;
    line-height: 1;
    color: var(--color-primary);
    cursor: pointer;

    /* c-btn-whiteと同じホバー：フェードさせず、下罫線を#bebebe→#5c5c5bに濃くする */
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        opacity: 1;
        border-bottom-color: #5c5c5b;
      }
    }
  }
}

/* ==========================================================================
   お問い合わせ 完了画面
   ========================================================================== */
@layer common {
  .p-thanks {
    /* ⚠️ 完了画面は余白多めの構成（Figma PC：見出しtop200）。ヘッダー分の100pxは
       .l-contentsのクリアランスで確保済みなので、ここはヘッダー下端からの余白100px
       （総計200px＝Figma一致）。SPは他ページと同じ40px */
    padding-top: 100px;

    @media (max-width: 768px) {
      padding-top: 40px;
    }
  }

  .p-thanks__ttl {
    font-family: var(--font-base);
    font-weight: 300;
    font-size: 3.4rem; /* 34px */
    letter-spacing: 1.36px;
    line-height: 1;
    color: var(--color-primary);
    text-align: center;

    @media (max-width: 768px) {
      font-size: 2.7rem; /* 27px */
      letter-spacing: 1.08px;
      line-height: 1.6;
    }
  }

  /* 本文：PCは左揃えのブロックを中央配置（Figma：短い行も左端で揃う）、SPは中央揃え */
  .p-thanks__lead {
    width: fit-content;
    margin-top: 80px;
    margin-inline: auto;
    text-align: left;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    line-height: 1.7;
    letter-spacing: 0.56px;
    color: #4d4c4a;

    p + p {
      margin-top: 1.7em; /* 段落間の空行1行分（14px × line-height1.7） */
    }

    @media (max-width: 768px) {
      width: auto;
      margin-top: 50px;
      text-align: center;
    }
  }

  /* TOPへ戻る（下線付きテキストリンク） */
  .p-thanks__back-wrap {
    margin-top: 80px;
    text-align: center;

    @media (max-width: 768px) {
      margin-top: 50px;
    }
  }

  .p-thanks__back {
    display: inline-block;
    width: 109px; /* Figma：罫線は109px幅の箱いっぱい */
    padding-bottom: 10px;
    border-bottom: 1px solid #bebebe;
    text-align: center;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem; /* 14px */
    letter-spacing: 2.8px;
    line-height: 1;
    color: var(--color-primary);

    /* c-btn-whiteと同じホバー：フェードさせず、下罫線を#bebebe→#5c5c5bに濃くする */
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        opacity: 1;
        border-bottom-color: #5c5c5b;
      }
    }
  }
}

/* ==========================================================================
   CF7の「レイヤー無し」スタイルの上書き
   ⚠️ contents.css全体は @layer common の中にある。CSSカスケードレイヤーの規則で
   「レイヤー無しのスタイルはレイヤー内のスタイルより常に優先」されるため、CF7標準CSS
   (styles.css・レイヤー無し)と同じプロパティを当てても、詳細度に関係なく負ける。
   そこでCF7の値を打ち消す必要があるものだけ、ここでレイヤー外に書いて勝たせる。
   ========================================================================== */

/* CF7: .wpcf7-spinner{display:inline-block} を打ち消す。
   スピナーはvisibility:hiddenでも高さを持ち、ボタン中央（矢印の基準）がズレるため。
   送信ボタンのラッパー基準にして、入力画面・確認画面どちらのボタンにも効かせる */
.p-contact__submit-wrap .wpcf7-spinner {
  display: none;
}

/* CF7: .wpcf7-list-item{margin:0 0 0 1em} を打ち消す（チェックボックスが右にズレる） */
.p-contact__agree .wpcf7-list-item {
  margin: 0;
}

/* CF7: .wpcf7-not-valid-tip{color:#dc3232; font-size:1em} を上書き。
   Figma実測：エラーメッセージは#EA1616・14px（入力欄の枠線の色は変えない） */
.p-contact .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1.4rem; /* 14px */
  letter-spacing: 0.28px;
  line-height: 1;
  color: #ea1616;
}