@charset "UTF-8";

/* ============================================
   お問い合わせセクション (.contact)
   ============================================ */

/* セクション全体設定 */
.contact {
  width: 100%;
  padding: 8rem 2rem 10rem;
  background-color: var(--c-text-white);
}

.contact__container {
  max-width: var(--w-narrow);
  margin: 0 auto;
}

/* セクションヘッダー */
.contact__header {
  text-align: center;
  margin-bottom: 4rem;
}

.contact__title {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 200;
  color: var(--c-text-main);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.contact__title-line {
  width: 8rem;
  height: 0.5rem;
  background-color: var(--c-primary);
  margin: 0 auto 1.5rem;
}

.contact__subtitle {
  font-family: "Century Gothic", var(--font-en), sans-serif;
  font-size: 2rem;
  color: var(--c-text-main);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* 説明文 */
.contact__description {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--c-text-main);
  margin-bottom: 5rem;
}

/* フォームラッパー */
.contact__form-wrapper {
  max-width: 77.5rem;
  margin: 0 auto;
}

/* フォーム本体・行設定 */
.contact__form {
  border-top: 0.1rem solid #aaaaaa;
}

.contact__form-row {
  display: flex;
  align-items: center;
  min-height: 6.5rem;
  border-bottom: 0.1rem solid #aaaaaa;
}

.contact__form-row--textarea {
  align-items: flex-start;
  padding: 2rem 0;
}

/* ラベル・必須バッジ */
.contact__form-label {
  display: flex;
  align-items: center;
  width: 23rem;
  flex-shrink: 0;
  padding-right: 1.5rem;
}

.contact__required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 2.5rem;
  background-color: #eb5656;
  color: var(--c-text-white);
  font-size: 1.3rem;
  font-weight: normal;
  border-radius: 0.5rem;
  margin-right: 1.2rem;
  flex-shrink: 0;
}

.contact__label-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--c-text-main);
}

/* 入力フィールド */
.contact__form-input {
  flex: 1;
}

.contact__input {
  width: 100%;
  max-width: 50rem;
  height: 3.5rem;
  background-color: #efefef;
  border: none;
  padding: 0 1.5rem;
  font-size: 1.5rem;
  color: var(--c-text-main);
}

.contact__input::placeholder {
  color: #bdbdbd;
}

.contact__textarea {
  width: 100%;
  max-width: 50rem;
  height: 20rem;
  background-color: #efefef;
  border: none;
  padding: 1.5rem;
  font-size: 1.5rem;
  color: var(--c-text-main);
  resize: vertical;
}

.contact__textarea::placeholder {
  color: #bdbdbd;
}

/* チェックボックス（元々のスタイル ※CF7では下の追加CSSが優先されます） */
.contact__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.contact__checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.contact__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contact__checkbox-custom {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: #efefef;
  border: 0.1rem solid #a0a0a0;
  border-radius: 0.2rem;
  margin-right: 0.8rem;
  flex-shrink: 0;
  position: relative;
}

.contact__checkbox:checked + .contact__checkbox-custom::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.6rem;
  width: 0.5rem;
  height: 1rem;
  border: solid var(--c-primary);
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
}

.contact__checkbox-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--c-text-main);
}

/* 同意チェックボックス */
.contact__agreement {
  text-align: center;
  margin: 3.5rem 0 3rem;
}

.contact__agreement-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.contact__agreement-text {
  font-size: 1.4rem;
  color: var(--c-text-main);
}

/* 送信ボタン（共通ベース） */
.contact__submit-wrapper {
  text-align: center;
  margin-bottom: 6rem;
}

.contact__submit {
  width: 25rem;
  height: 6rem;
  background-color: var(--c-primary);
  color: var(--c-text-white);
  font-size: 2.5rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
  letter-spacing: 0.3em;
  transition: opacity 0.3s ease;
}

.contact__submit:hover {
  opacity: 0.85;
}

/* 個人情報の取り扱い */
.contact__privacy {
  max-width: 77.5rem;
  margin: 0 auto;
}

.contact__privacy-title {
  font-size: 1.7rem;
  font-weight: bold;
  color: var(--c-text-main);
  margin-bottom: 1.5rem;
}

.contact__privacy-text {
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--c-text-main);
}

/* レスポンシブ対応：お問い合わせ（タブレット） */
@media (max-width: 900px) {
  .contact__form-label {
    width: 20rem;
  }
}

/* レスポンシブ対応：お問い合わせ（スマートフォン） */
@media (max-width: 768px) {
  .contact {
    padding: 6rem 3rem 8rem;
  }

  .contact__title {
    font-size: 3.2rem;
  }

  .contact__title-line {
    width: 6rem;
    height: 0.4rem;
  }

  .contact__subtitle {
    font-size: 1.6rem;
  }

  .contact__description {
    font-size: 1.4rem;
    margin-bottom: 4rem;
    text-align: left;
  }

  .contact__form-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 0;
    min-height: auto;
  }

  .contact__form-row--textarea {
    padding: 1.5rem 0;
  }

  .contact__form-label {
    width: 100%;
    margin-bottom: 1rem;
    padding-right: 0;
  }

  .contact__form-input {
    width: 100%;
  }

  .contact__input,
  .contact__textarea {
    max-width: 100%;
  }

  .contact__textarea {
    height: 15rem;
  }

  .contact__checkbox-group {
    gap: 0.8rem 2rem;
  }

  .contact__checkbox-text {
    font-size: 1.4rem;
  }

  .contact__submit {
    width: 20rem;
    height: 5.5rem;
    font-size: 2rem;
  }

  .contact__privacy-title {
    font-size: 1.5rem;
  }

  .contact__privacy-text {
    font-size: 1.3rem;
  }
}

/* レスポンシブ対応：お問い合わせ（小型スマートフォン） */
@media (max-width: 480px) {
  .contact {
    padding: 5rem 2rem 6rem;
  }

  .contact__title {
    font-size: 2.6rem;
  }

  .contact__subtitle {
    font-size: 1.4rem;
  }

  .contact__required {
    width: 4rem;
    height: 2.2rem;
    font-size: 1.1rem;
    margin-right: 1rem;
  }

  .contact__label-text {
    font-size: 1.4rem;
  }

  .contact__checkbox-group {
    flex-direction: column;
    gap: 1rem;
  }

  .contact__agreement-text {
    font-size: 1.3rem;
  }

  .contact__submit {
    width: 18rem;
    height: 5rem;
    font-size: 1.8rem;
  }
}


/* ============================================
   資料ダウンロードセクション (.download)
   ============================================ */

/* セクション全体設定 */
.download {
  width: 100%;
  padding: 8rem 2rem 10rem;
  background-color: var(--c-text-white);
}

.download__container {
  max-width: var(--w-narrow);
  margin: 0 auto;
}

/* セクションヘッダー */
.download__header {
  text-align: center;
  margin-bottom: 4rem;
}

.download__title {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 200;
  color: var(--c-text-main);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.download__title-line {
  width: 8rem;
  height: 0.5rem;
  background-color: var(--c-primary);
  margin: 0 auto 1.5rem;
}

.download__subtitle {
  font-family: "Century Gothic", var(--font-en), sans-serif;
  font-size: 2rem;
  color: var(--c-text-main);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* 説明文 */
.download__description {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--c-text-main);
  margin-bottom: 5rem;
}

/* フォームラッパー */
.download__form-wrapper {
  max-width: 77.5rem;
  margin: 0 auto;
}

/* フォーム本体・行設定 */
.download__form {
  border-top: 0.1rem solid #aaaaaa;
}

.download__form-row {
  display: flex;
  align-items: center;
  min-height: 6.5rem;
  border-bottom: 0.1rem solid #aaaaaa;
}

.download__form-row--textarea {
  align-items: flex-start;
  padding: 2rem 0;
}

.download__form-row--checkbox {
  align-items: flex-start;
  padding: 2rem 0;
}

/* ラベル・必須バッジ */
.download__form-label {
  display: flex;
  align-items: center;
  width: 23rem;
  flex-shrink: 0;
  padding-right: 1.5rem;
}

.download__form-row--textarea .download__form-label,
.download__form-row--checkbox .download__form-label {
  padding-top: 0;
}

.download__required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 2.5rem;
  background-color: #eb5656;
  color: var(--c-text-white);
  font-size: 1.3rem;
  font-weight: normal;
  border-radius: 0.5rem;
  margin-right: 1.2rem;
  flex-shrink: 0;
}

.download__label-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--c-text-main);
}

/* 入力フィールド */
.download__form-input {
  flex: 1;
}

.download__input {
  width: 100%;
  max-width: 50rem;
  height: 3.5rem;
  background-color: #efefef;
  border: none;
  padding: 0 1.5rem;
  font-size: 1.5rem;
  color: var(--c-text-main);
}

.download__input::placeholder {
  color: #bdbdbd;
}

.download__textarea {
  width: 100%;
  max-width: 50rem;
  height: 20rem;
  background-color: #efefef;
  border: none;
  padding: 1.5rem;
  font-size: 1.5rem;
  color: var(--c-text-main);
  resize: vertical;
}

.download__textarea::placeholder {
  color: #bdbdbd;
}

/* チェックボックス */
.download__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.download__checkbox-group--vertical {
  flex-direction: column;
  gap: 1.2rem;
}

.download__checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.download__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.download__checkbox-custom {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: #efefef;
  border: 0.1rem solid #a0a0a0;
  border-radius: 0.2rem;
  margin-right: 0.8rem;
  flex-shrink: 0;
  position: relative;
}

.download__checkbox:checked + .download__checkbox-custom::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.6rem;
  width: 0.5rem;
  height: 1rem;
  border: solid var(--c-primary);
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
}

.download__checkbox-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--c-text-main);
}

/* 同意チェックボックス */
.download__agreement {
  text-align: center;
  margin: 3.5rem 0 3rem;
}

.download__agreement-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.download__agreement-text {
  font-size: 1.4rem;
  color: var(--c-text-main);
}

/* 送信ボタン */
.download__submit-wrapper {
  text-align: center;
  margin-bottom: 6rem;
}

.download__submit {
  width: 25rem;
  height: 6rem;
  background-color: var(--c-primary);
  color: var(--c-text-white);
  font-size: 2.5rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
  letter-spacing: 0.3em;
  transition: opacity 0.3s ease;
}

.download__submit:hover {
  opacity: 0.85;
}

/* 個人情報の取り扱い */
.download__privacy {
  max-width: 77.5rem;
  margin: 0 auto;
}

.download__privacy-title {
  font-size: 1.7rem;
  font-weight: bold;
  color: var(--c-text-main);
  margin-bottom: 1.5rem;
}

.download__privacy-text {
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--c-text-main);
}

/* レスポンシブ対応：資料ダウンロード（タブレット） */
@media (max-width: 900px) {
  .download__form-label {
    width: 20rem;
  }
}

/* レスポンシブ対応：資料ダウンロード（スマートフォン） */
@media (max-width: 768px) {
  .download {
    padding: 6rem 3rem 8rem;
  }

  .download__title {
    font-size: 3.2rem;
  }

  .download__title-line {
    width: 6rem;
    height: 0.4rem;
  }

  .download__subtitle {
    font-size: 1.6rem;
  }

  .download__description {
    font-size: 1.4rem;
    margin-bottom: 4rem;
    text-align: left;
  }

  .download__form-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 0;
    min-height: auto;
  }

  .download__form-row--textarea,
  .download__form-row--checkbox {
    padding: 1.5rem 0;
  }

  .download__form-label {
    width: 100%;
    margin-bottom: 1rem;
    padding-right: 0;
  }

  .download__form-input {
    width: 100%;
  }

  .download__input,
  .download__textarea {
    max-width: 100%;
  }

  .download__textarea {
    height: 15rem;
  }

  .download__checkbox-group {
    gap: 0.8rem 2rem;
  }

  .download__checkbox-group--vertical {
    gap: 1rem;
  }

  .download__checkbox-text {
    font-size: 1.4rem;
  }

  .download__submit {
    width: 20rem;
    height: 5.5rem;
    font-size: 2rem;
  }

  .download__privacy-title {
    font-size: 1.5rem;
  }

  .download__privacy-text {
    font-size: 1.3rem;
  }
}

/* レスポンシブ対応：資料ダウンロード（小型スマートフォン） */
@media (max-width: 480px) {
  .download {
    padding: 5rem 2rem 6rem;
  }

  .download__title {
    font-size: 2.6rem;
  }

  .download__subtitle {
    font-size: 1.4rem;
  }

  .download__required {
    width: 4rem;
    height: 2.2rem;
    font-size: 1.1rem;
    margin-right: 1rem;
  }

  .download__label-text {
    font-size: 1.4rem;
  }

  .download__checkbox-group--vertical {
    gap: 1rem;
  }

  .download__agreement-text {
    font-size: 1.3rem;
  }

  .download__submit {
    width: 18rem;
    height: 5rem;
    font-size: 1.8rem;
  }
}

/* ==================================================
   CF7 お問い合わせフォーム用カスタマイズ
   ================================================== */

/* 1. 確認画面の表示制御 (JS連動) */
/* 通常時（入力モード）：確認エリアを非表示 */
.wpcf7-form:not(.is-confirm) .form-step2,
.wpcf7-form:not(.is-confirm) .btn-back {
    display: none !important;
}

/* 確認モード時：入力エリアを非表示 */
.wpcf7-form.is-confirm .form-step1 {
    display: none !important;
}

/* 確認モード時：確認エリアを表示 */
.wpcf7-form.is-confirm .form-step2,
.wpcf7-form.is-confirm .btn-back {
    display: inline-block !important;
}
.wpcf7-form.is-confirm .form-step2 {
    display: block !important;
    margin-bottom: 40px !important; /* 確認一覧とボタンの間隔 */
}

/* 確認値のスタイル */
.confirmation-value {
    padding: 10px 0;
    font-weight: 500;
}


/* 2. デザイン復元：チェックボックス・ラジオボタン */
/* Flexboxによる横並び・縦並び */
.contact__checkbox-group .wpcf7-form-control,
.download__checkbox-group .wpcf7-form-control {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem 2.5rem !important;
}

/* 資料ダウンロードなどの縦並び用 */
.download__checkbox-group--vertical .wpcf7-form-control {
    flex-direction: column !important;
    gap: 1.2rem !important;
}

/* CF7リストアイテムの余白リセット */
.wpcf7-list-item {
    margin: 0 !important;
    display: inline-block !important;
}

/* ラベルの設定 */
.wpcf7-list-item label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    position: relative !important;
    width: auto !important;
    margin: 0 !important;
}

/* デフォルトのチェックボックスを透明にして隠す */
.wpcf7-list-item input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    z-index: -1 !important;
}

/* カスタムチェックボックスの「枠」を作成 (::before) */
span.wpcf7-list-item-label {
    position: relative !important;
    padding-left: 3rem !important;   /* 枠(2rem) + 余白(1rem) */
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: var(--c-text-main) !important;
    line-height: 2rem !important;
    display: inline-block !important;
}

span.wpcf7-list-item-label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2rem !important;
    height: 2rem !important;
    background-color: #efefef !important;
    border: 0.1rem solid #a0a0a0 !important;
    border-radius: 0.2rem !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

/* チェックマークの作成 (::after) */
span.wpcf7-list-item-label::after {
    content: '' !important;
    position: absolute !important;
    left: 0.7rem !important; 
    top: 50% !important;
    margin-top: -0.6rem !important; 
    width: 0.5rem !important;
    height: 1rem !important;
    border: solid var(--c-primary) !important;
    border-width: 0 0.2rem 0.2rem 0 !important;
    transform: rotate(45deg) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

/* チェック時の挙動 */
.wpcf7-list-item input[type="checkbox"]:checked + span.wpcf7-list-item-label::after {
    opacity: 1 !important;
}


/* 3. レイアウト崩れ修正：必須マークと項目名の横並び強制 */
.contact__form-label, 
.download__form-label {
    display: flex !important;       
    flex-direction: row !important; 
    align-items: center !important; 
    flex-wrap: nowrap !important;   
}

.contact__required,
.download__required {
    display: inline-flex !important;
    margin-right: 1.2rem !important;
    margin-bottom: 0 !important;     
}

.contact__label-text,
.download__label-text {
    display: inline-block !important;
    margin: 0 !important;
    width: auto !important;
}


/* 4. ボタンレイアウト修正（上下余白・ズレ防止確定版） */
/* ボタンを包むエリアの設定 */
.contact__submit-wrapper {
    display: flex !important;           /* Flexbox有効化 */
    flex-direction: column !important;  /* 縦並び固定 */
    align-items: center !important;     /* 左右中央揃え */
    justify-content: center !important;
    
    width: 100% !important;
    margin-top: 30px !important;        /* 上の余白 */
    margin-bottom: 60px !important;     /* 下の余白 */
    padding: 0 !important;
    gap: 20px !important;               /* ボタン同士の間隔を20pxに設定 */
}

/* ボタン本体の基本設定 */
.contact__submit, 
.btn-back {
    display: block !important;
    width: 25rem !important;           /* ボタン幅 */
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* gapが効かない環境への対策（上のボタンの下に余白を追加） */
.btn-back {
    margin-bottom: 20px !important; 
}

/* gapが効く環境ではマージンをリセット */
@supports (gap: 20px) {
    .btn-back {
        margin-bottom: 0 !important;
    }
}

/* 送信ボタンを囲むspanタグのズレ防止 */
.submit-icon-wrapper {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    width: auto !important;
}

/* スマホ表示時のサイズ微調整 */
@media (max-width: 768px) {
    .contact__submit, 
    .btn-back {
        width: 20rem !important; 
    }
}

/* ==================================================
   送信ボタンの位置ズレ修正・スピナー対策
   ================================================== */

/* ボタンを包む要素を相対配置の基準にする */
.download__submit-wrapper,
.contact__submit-wrapper {
    position: relative;
    text-align: center;
}

/* ボタン自体をブロック要素にして中央揃えを強制 */
.download__submit,
.contact__submit {
    display: block !important;
    margin: 0 auto !important;
}

/* CF7の読み込み中アイコン（スピナー）を絶対配置にしてレイアウト干渉を防ぐ */
.wpcf7-spinner {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    z-index: 10;
}