@charset "utf-8";

/* ----------------------------------------------------------------------
   目次
   1. p-form  お問い合わせフォーム（タブ切り替え）
   2. p-privacy  プライバシーポリシー
   3. p-tel  お電話でのお問い合わせ
   各コンポーネントの直後に、そのコンポーネントのレスポンシブ指定を置く
   ---------------------------------------------------------------------- */

/* ==========================================================================
   p-form  お問い合わせフォーム（タブ切り替え）
   ラベル270px＋入力欄の2カラム。コンテンツ幅は1000px
   ========================================================================== */

/* ----- タブ ----- */

.p-form__head {
  padding-top: 5rem;
  background-color: #fff;
}

.p-form__lead {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.1rem;
  color: #333;
  text-align: center;
}

.p-form__tabs {
  display: flex;
  width: 100%;
  max-width: 100rem;
  margin: 1.7rem auto 0;
  padding-bottom: 1px;
  border-bottom: 1px solid #ddd;
}

.p-form__tab {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  /* 下の余白18pxは4pxの下線を含む値 */
  padding: 1.4rem 2.8rem;
  border-bottom: .4rem solid transparent;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.25rem;
  color: #999;
  text-align: center;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}

.p-form__tab.is-current {
  border-bottom-color: #f6741b;
  color: #333;
}

.p-form__tab:hover {
  color: #333;
}

.p-form__tab-sub {
  font-size: 1.4rem;
}

/* ----- フォーム本体 ----- */

.p-form__body {
  /* 下側は送信ボタンのはみ出し分（4.5px）を差し引いた値 */
  padding: 5.6rem 0 5.15rem;
  background-color: #f2f2f2;
}

.p-form__panel {
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
}

.p-form__panel[hidden] {
  display: none;
}

.p-form__title {
  padding-top: .4rem;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 3.3rem;
  color: #333;
}

.p-form__title-sub {
  font-size: 1.8rem;
}

.p-form__form {
  padding-top: 2.4rem;
}

.p-form__row {
  display: flex;
  align-items: center;
  padding-bottom: 3.8rem;
  border-bottom: 1px solid #888;
}

/* 区切り線の1pxを含めて、線の上38px・下37pxになるようにする */
.p-form__row + .p-form__row {
  padding-top: 3.6rem;
}

/* テキストエリア・アップロードの行はラベルを上揃えにする */
.p-form__row--top {
  align-items: flex-start;
}

.p-form__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: .8rem;
  width: 27rem;
  padding-bottom: .6rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.1rem;
  color: #333;
}

.p-form__required {
  flex-shrink: 0;
  padding: .5rem .8rem;
  border-radius: 2px;
  background-color: #f6741b;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.p-form__field {
  flex: 1 0 0;
  min-width: 0;
}

.p-form__input,
.p-form__textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 1.2rem 1.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
}

.p-form__input {
  height: 4.65rem;
}

.p-form__textarea {
  height: 11.4rem;
  resize: vertical;
}

.p-form__input::placeholder,
.p-form__textarea::placeholder {
  color: #ccc;
}

.p-form__input:focus,
.p-form__textarea:focus {
  border-color: #f6741b;
  outline: none;
}

/* ----- ラジオボタン ----- */

/* CF7の [radio] は .wpcf7-radio > .wpcf7-list-item > label の構造で出力される。
   静的コーディング時の .p-form__radios / .p-form__radio と同じ見た目になるよう
   セレクタを併記している */
.p-form__radios,
.p-form__field .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 3rem;
}

.p-form__field .wpcf7-list-item {
  margin: 0;
}

.p-form__radio,
.p-form__field .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.1rem;
  color: #333;
  cursor: pointer;
}

.p-form__radio input,
.p-form__field .wpcf7-list-item input[type="radio"] {
  appearance: none;
  flex-shrink: 0;
  width: 1.54rem;
  height: 1.54rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}

.p-form__radio input:checked,
.p-form__field .wpcf7-list-item input[type="radio"]:checked {
  background-image: radial-gradient(circle at center, #f6741b 0 4px, transparent 4.5px);
}

.p-form__radio input:focus-visible,
.p-form__field .wpcf7-list-item input[type="radio"]:focus-visible {
  outline: 2px solid #f6741b;
  outline-offset: 2px;
}

/* ----- ファイルアップロード ----- */

.p-form__file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 2.8rem; /* 1pxの枠線を含めて29pxになるようにする */
  border: 1px dashed #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: border-color .3s ease;
}

.p-form__file:hover {
  border-color: #f6741b;
}

.p-form__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* アップロードアイコン。CF7のフォーム編集画面ではテーマの画像パスを書けないため、
   img要素ではなくCSSの疑似要素で表示する */
.p-form__file::before {
  content: "";
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.4665rem;
  background-image: url(../img/icon-upload.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.p-form__file-text {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.1rem;
  color: #888;
  text-align: center;
}

.p-form__note {
  padding-top: .8rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8rem;
  color: #888;
}

/* ----- 送信ボタン ----- */

.p-form__submit {
  display: flex;
  justify-content: center;
  padding-top: 4rem;
}

.p-form__submit .c-btn {
  cursor: pointer;
}

@media (max-width: 1023px) {
  .p-form__tab {
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

@media (max-width: 767px) {
  .p-form__head {
    padding-top: 3rem;
  }

  .p-form__lead {
    font-size: 1.4rem;
  }

  .p-form__tabs {
    margin-top: 1.2rem;
  }

  /* 2つのタブがそれぞれ1行で収まるサイズにする */
  .p-form__tab {
    padding: 1.2rem .4rem 1.1rem;
    border-bottom-width: .3rem;
    font-size: 1.3rem;
    line-height: 1.6;
  }

  .p-form__tab-sub {
    font-size: 1rem;
  }

  .p-form__body {
    padding: 3.6rem 0 4rem;
  }

  .p-form__title {
    font-size: 2rem;
    line-height: 1.5;
  }

  .p-form__title-sub {
    font-size: 1.4rem;
  }

  .p-form__form {
    padding-top: 2rem;
  }

  /* ラベルを入力欄の上に積む */
  .p-form__row,
  .p-form__row--top {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 2.4rem;
  }

  .p-form__row + .p-form__row {
    padding-top: 2.4rem;
  }

  .p-form__label {
    width: 100%;
    padding-bottom: 1rem;
    font-size: 1.4rem;
  }

  .p-form__input,
  .p-form__textarea {
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
  }

  .p-form__input {
    height: 4.2rem;
  }

  .p-form__textarea {
    height: 12rem;
  }

  .p-form__radios,
  .p-form__field .wpcf7-radio {
    gap: 1.2rem 2rem;
  }

  .p-form__radio,
  .p-form__field .wpcf7-list-item label {
    font-size: 1.4rem;
  }

  .p-form__file {
    padding: 2rem;
  }

  .p-form__file-text {
    font-size: 1.3rem;
  }

  .p-form__submit {
    padding-top: 3rem;
  }
}

/* ==========================================================================
   Contact Form 7 対応
   フォームのHTMLは管理画面（お問い合わせ → フォーム編集）で管理している。
   CF7が自動で足す要素を、静的コーディング時の見た目に合わせるための調整。
   入力欄・テキストエリアはCF7タグの class: オプションで
   .p-form__input / .p-form__textarea を付けているため、追加指定は不要。
   ========================================================================== */

/* CF7は入力欄を span で包む。ブロック要素にして width:100% を効かせる */
.p-form__field .wpcf7-form-control-wrap {
  display: block;
}

/* 送信ボタン。CF7の [submit] は input 要素なので中に矢印画像を置けない。
   .c-btn のスタイルはclass指定で当たるので、矢印だけ背景画像で描く */
.p-form__submit input[type="submit"] {
  /* 右端の余白22px＋矢印32.512px＋文字との間隔86px（c-btn--wide のgap相当） */
  padding-right: 14.0512rem;
  background-image: url(../img/icon-arrow-btn.svg);
  background-repeat: no-repeat;
  background-position: right 2.2rem center;
  background-size: 3.2512rem 1.1314rem;
  cursor: pointer;
}

.p-form__submit input[type="submit"]:disabled {
  cursor: default;
  opacity: .5;
}

/* 送信中に出るスピナー。ボタンの中央揃えを崩さないよう位置を固定する */
.p-form__submit .wpcf7-spinner {
  margin: 0 0 0 1.6rem;
  align-self: center;
}

/* ----- ファイルアップロード ----- */

/* 実体のinputは隠し、ラベル全体（点線の枠）をクリック領域にする */
.p-form__file .wpcf7-form-control-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* 選択したファイル名（assets/js/contact.js が差し込む） */
.p-form__file-name {
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: #333;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ----- エラー表示 ----- */

.p-form__field .wpcf7-not-valid-tip {
  display: block;
  padding-top: .6rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: #c0392b;
}

.p-form__field .wpcf7-not-valid {
  border-color: #c0392b;
}

.wpcf7-response-output {
  box-sizing: border-box;
  width: 100%;
  max-width: 100rem;
  margin: 2.4rem auto 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid #888;
  border-radius: 4px;
  background-color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.1rem;
  color: #333;
  text-align: center;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: #c0392b;
  color: #c0392b;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #f6741b;
  color: #333;
}

/* フォーム未作成時に編集権限者だけに見える案内（inc/cf7.php） */
.p-form__setup-notice {
  padding: 2rem;
  border: 1px dashed #c0392b;
  border-radius: 4px;
  background-color: #fff;
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: #c0392b;
}

@media (max-width: 767px) {
  /* ----- Contact Form 7 対応 ----- */
  .p-form__submit input[type="submit"] {
    /* SPは c-btn のgap 12px ＋ 矢印26px ＋ 右余白18px */
    padding-right: 5.6rem;
    background-position: right 1.8rem center;
    background-size: 2.6rem .905rem;
  }

  .wpcf7-response-output {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   p-privacy  プライバシーポリシー
   ========================================================================== */

.p-privacy {
  padding: 3.8rem 0 6.6rem;
  background-color: #fff;
}

.p-privacy__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 3.3rem;
  color: #333;
  text-align: center;
}

.p-privacy__box {
  box-sizing: border-box;
  width: 100%;
  max-width: 90rem;
  height: 20rem;
  margin: 1rem auto 0;
  /* 右は「余白21px＋本文とスクロールバーの間隔」。本文幅824pxを保つ */
  padding: 2.9rem 3.9rem 2.1rem 3.1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-y: auto;
}

.p-privacy__box p,
.p-privacy__box li {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.275rem;
  color: #555;
}

.p-privacy__box > * + * {
  margin-top: .5rem;
}

/* 条項見出し（1. 個人情報の定義 など） */
.p-privacy__box h3 {
  margin-top: 2.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.275rem;
  color: #333;
}

/* 枝番の見出し（5.1 / 7.2 など） */
.p-privacy__box h4 {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.275rem;
  color: #333;
}

.p-privacy__box > *:first-child {
  margin-top: 0;
}

.p-privacy__box li {
  padding-left: 1.4em;
  text-indent: -1.4em;
}

.p-privacy__box li::before {
  content: "・";
}

.p-privacy__box li + li {
  margin-top: .2rem;
}

.p-privacy__box a {
  text-decoration: underline;
}

/* 事業者名・住所・問い合わせ窓口 */
.p-privacy__address {
  padding-left: 1em;
}

.p-privacy__date {
  margin-top: 2.4rem;
  text-align: right;
}

/* スクロールバーはデザインに合わせて細くする */
.p-privacy__box::-webkit-scrollbar {
  width: 4px;
}

.p-privacy__box::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: #ccc;
}

@media (max-width: 767px) {
  .p-privacy {
    padding: 3rem 0 4rem;
  }

  .p-privacy__title {
    font-size: 1.6rem;
    line-height: 1.6;
  }

  .p-privacy__box {
    height: 18rem;
    padding: 1.6rem;
  }

  .p-privacy__box p,
  .p-privacy__box li,
  .p-privacy__box h3,
  .p-privacy__box h4 {
    font-size: 1.3rem;
    line-height: 2rem;
  }

  .p-privacy__box h3 {
    margin-top: 1.8rem;
  }
}

/* ==========================================================================
   p-tel  お電話でのお問い合わせ
   ========================================================================== */

.p-tel {
  padding-bottom: 5.6rem;
  background-color: #fff;
}

.p-tel__inner {
  padding: 5.5rem 2rem 0;
  border-top: 1px solid #888;
  text-align: center;
}

.p-tel__lead {
  padding-top: .4rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.7rem;
  color: #333;
}

.p-tel__number {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .4rem;
  padding-top: 1.4rem;
  font-family: "Barlow", sans-serif;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 4.2rem;
  letter-spacing: .07rem;
  color: #333;
}

.p-tel__icon {
  flex-shrink: 0;
  width: 4.7rem;
  height: 4.7rem;
}

.p-tel__hours {
  padding-top: .8rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.8rem;
  color: #333;
}

@media (max-width: 767px) {
  .p-tel {
    padding-bottom: 4rem;
  }

  .p-tel__inner {
    padding: 3.2rem 0 0;
  }

  .p-tel__lead {
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .p-tel__number {
    gap: .6rem;
    padding-top: 1rem;
    font-size: 3.2rem;
    line-height: 1;
  }

  .p-tel__icon {
    width: 3rem;
    height: 3rem;
  }

  .p-tel__hours {
    padding-top: .6rem;
    font-size: 1.2rem;
  }
}