@charset "UTF-8";
/* ===========================================
 * 
	----------------------------------
  Structure
  ----------------------------------
  01_head エリア
  02_contactメイン
  03_コンタクトフォーム
  04_送信
 * ======================================== */

/* ===========================================
 * 01_head エリア
 * ======================================== */
.c-head__bg {
  background-image: url('../img/img_contact_head.webp');
}

/* ===========================================
 * 02_contactメイン
 * ======================================== */
.contact-form {
  container-type: inline-size;
}

.contact-head {
  background-image: url('../img/img_fv_newslist.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.contact-head__title {
  --clamp-min: 20;
  --clamp-max: 40;
  color: var(--color-font-wh);
  text-align: center;
  padding-block: var(--spc-120-60);
}

/* ===========================================
 * 03_コンタクトフォーム
 * ======================================== */
.contact-form__inner {
  max-width: 900px;
}

.contact-form__phrase-wrap {
  --clamp-min: 16;
  --clamp-max: 18;
  padding-bottom: var(--spc-60-30);
}

.contact-form__phrase {
  padding-bottom: var(--spc-40-20);
}
.contact-form__text {
  text-align: center;

  &.--bold {
    font-weight: bold;
  }
  &.--large  {
    --clamp-min: 24;
    --clamp-max: 30;
    font-weight: bold;
    color: var(--color-font-or);
  }
  &.--small {
    --clamp-min: 14;
    --clamp-max: 16;
  }
}

@container (width <= 768px) {
  .contact-form__text {
    text-align: left;

    &.--center {
      text-align: center;
    } 
  }

}

.contact-form__forms {
  padding: var(--spc-40-20);
  background: var(--color-bg-lgr);
}
.contact-form__group {
  display: grid;
  gap: var(--spc-40-20);
  padding-bottom: var(--spc-40-20);
}
.contact-form__item {
  display: flex;
  flex-direction: column;
  gap: var(--spc-10-5);
}
.form__title {
  --clamp-min: 16;
  --clamp-max: 18;
  font-weight: bold;
  padding-right: var(--spc-10-5);
}

.form__required {
  --clamp-min: 10;
  --clamp-max: 12;
  line-height: 1.2;
  color: var(--color-font-wh);
  font-weight: bold;
  background: #dc3434;
  padding: var(--spc-4-2) var(--spc-10-5);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  
}

/* form radio */
/* ======================================== */
.form__radio-group {
  /* 選択肢を縦並びにする */
  .wpcf7-list-item {
    display: block; /* 縦に積む */
    margin-bottom: var(--spc-4-2); /* 項目間の縦の余白 */
    margin-left: 0;
  }

  /* 最後の選択肢の下には余白なし */
  .wpcf7-list-item:last-child {
    margin-bottom: 0;
  }
  .wpcf7-list-item-label {
    cursor: pointer;
    display: flex;
  }
  /* デフォルトのボタン */
  input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%); /* 視覚的にのみ完全に隠す */
    white-space: nowrap;
  }
  .wpcf7-list-item-label:hover::before {
    border-color: var(--color-primary); 
  }
  /* チェック前のボタン */
  .wpcf7-list-item-label::before {
    background: var(--color-bg-wh);
    border: 2px solid var(--color-bg-lgr);
    border-radius: 100%;
    content: "";
    width: var(--len-20-10);
    height: var(--len-20-10);
    margin-bottom: auto;
    margin-right: .5em;
    margin-top: auto;
    transition: background-color .3s ease,border 0.3s ease ;
  }
  @container (width <= 768px) {
    .wpcf7-list-item-label::before {
      width: var(--len-30-15);
      height: var(--len-30-15);
    }
  }

  /* チェック時のスタイル */
  input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    border-color: var(--color-primary); 

    /*  選択時の真ん中の丸（ドット）の色と大きさを変更  */
    /* var(--color-primary) が色、 40% がドットの大きさ */
    background: radial-gradient(var(--color-primary) 40%, transparent 45%);
  }

}

/* プライバシーポリシー */
/* ======================================== */
/* プライバシーポリシーのラッパー */
.contact-form__privacy-wrap {
  text-align: center;
  padding-bottom: var(--spc-40-20);
}

/* ラベル全体をクリッカブル */
.contact-form__privacy-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spc-10-5);
  cursor: pointer;
}

/* チェックボックス本体の調整 */
.contact-form__privacy-input {
  appearance: none;
  -webkit-appearance: none;
  width: var(--len-20-10);
  height: var(--len-20-10);
  cursor: pointer;
  /* 未チェック時の枠線と背景を指定 */
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-wh);
  
  /* チェックマークを配置するための基準値 */
  position: relative;
  
  /* フォーカス時の変化を滑らかにする */
  transition: background-color 0.2s, border-color 0.2s;
}
@container (width <= 768px) {
  .contact-form__privacy-input {
    width: var(--len-40-20);
    height: var(--len-40-20);
  }
}
/* チェックが入ったとき（:checked）の箱の色 */
/* ======================================== */
.wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: var(--spc-8-4);
}
.contact-form__privacy-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
/* チェックマーク */
.contact-form__privacy-input:checked::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  
  /* ✓の大きさと色 */
  width: var(--spc-8-4);
  height: var(--spc-16-8);
  border-right: 3px solid var(--color-border-wh);
  border-bottom: 3px solid var(--color-border-wh);
  /* 位置を中央にずらし、45度回転させて✓の形 */
  transform: translate(-50%, -50%) rotate(45deg);
}
@container (width <= 768px) {
  .contact-form__privacy-input:checked::after {
    width: var(--spc-16-8);
    height: var(--spc-30-15);
  }
}
.contact-form__privacy-text {
  padding-bottom: var(--spc-20-10);
}
/* リンクテキストの装飾 */
.contact-form__privacy-link {
  color: var(--color-font);
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: opacity 0.3s ease;
}

.contact-form__privacy-link:hover {
  opacity: 0.7;
}


/* 04_送信 */
/* ======================================== */
.contact-form__submit {
  text-align: center;
  padding-bottom: var(--spc-20-10);
}

.contact-form__btn {
  --clamp-min: 18;
  --clamp-max: 20;
  font-weight: bold;
  color: var(--color-primary);
  padding: var(--spc-10-5) var(--spc-50-25);
  background: var(--color-bg-wh);
  border: 1px solid var(--color-primary);
  transition: color 0.3s ease, background-color 0.3s ease;
}

@media (hover: hover) {
  .contact-form__btn:hover {
    color: var(--color-font-wh);
    background: var(--color-primary);
  }
}

.contact-form__notice {
  --clamp-min: 12;
  --clamp-max: 14;
  text-align: center;
}
@container (width <= 768px) {
  .contact-form__notice {
    text-align: left;
  }
}

.wpcf7-spinner {
  display: block;
  margin-inline: auto;
}

/* 送信後メッセージ 非表示設定 */
/* ======================================== */
.wpcf7-form.sent .wpcf7-response-output {
  display: none;
}