@charset "UTF-8";


/* ===================================
共通項目
 =================================== */



/* ===================================

 =================================== */
.contactForm {
    margin-bottom: 160px;
}
.contactForm__inner {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.13);
    padding: 50px 50px 130px 50px;
}


/*  */
.Form {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.Form-Item {
    display: flex;
    align-items: center;
    gap: 30px;
    border-top: 1px dashed #707070;
    padding: 36px 23px 40px;
}
.Form-Item.--top {
    align-items: start;
}
.Form-Item:first-of-type {
    border: none;
}
.Form-Item:last-of-type {
    border-bottom: 1px dashed #707070;
}
/*  */
.Form-Item.--block {
    display: block;
}

.Form-Item-Label {
    width: 330px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 20px;
    font-weight: bold;
}

/* 必須マーク */
.Form-Item-Label-Required {
    display: inline-block;
    padding: 3px 10px;
    font-size: 14px;
    color: #fff;
    background: #333333;
}

.wpcf7-form-control-wrap {
    flex: 1;
    display: block;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select,
input[type="url"],
textarea {
    width: 100%;
    padding: 9px 14px 7px;
    font-size: 16px;
    border: 1px solid #333333;
    border-radius: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
    color: #959595 !important;
}

input[type="text"]:read-only,
input[type="tel"]:read-only,
input[type="email"]:read-only,
input[type="url"]:read-only,
textarea:read-only {
    background: #d1d1d1;
    cursor: not-allowed;
}

input:-webkit-autofill {
    background-color: #fff !important;
    box-shadow: 0 0 0 1000px #fff inset;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
    max-width: 420px;
}

textarea {
    padding: 30px;
    resize: vertical;
    min-height:340px;
}


/* フォーカス時のスタイル */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus {
    outline: 1px solid #333333;
    border: none;
    background: #F7D2B4;
    box-shadow: 0px 0px 10px rgba(239, 127, 39, 0.5);
}

/* ===================================
select
=================================== */
select,
.confirm_area .select-wrap input {
    /* デフォルトのスタイルリセット */
    background-color: #fff !important;
    color: unset;
    font-family: unset;
    appearance: none;
    -webkit-appearance: none;
    /* all: unset !important; */

    /* 独自のスタイル */
    font-family: inherit !important;
    padding-right: 30px !important;
    border: 1px solid #333333 !important;
    color: inherit !important;
    padding: 9px 30px 7px 14px !important;
    /* display: inline-block; */
    /* width: 100%; */
    /* 矢印を消す */
    -webkit-appearance: none;
    appearance: none;
}
/* フォーカス時のスタイル */
select:focus {
    outline: none;
    background-color: #fff !important;
    /* border: 1px solid #333333 !important; */
    border: none;
    box-shadow: 0px 0px 10px rgba(239, 127, 39, 0.5);
}
/* 確認画面のread-onlyのスタイル */
.confirm_area .select-wrap input:read-only {
    background-color: #b5b5b5 !important;
    cursor: not-allowed;
}

.select-wrap {
    position: relative;
}
.select-alow {
    display: inline-block;
    position: absolute;
    z-index: 2;
    top: 13px;
    right: 13px;
    width: 15px;
    height: 13px;
    background: #EF7F27; /* お好みの背景色 */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    /* 古いブラウザ用 */
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
}


/* ===================================
ラジオボタン
=================================== */
.wpcf7-form-control.wpcf7-radio {
    display: flex;
    gap: 24px 60px;
    flex-wrap: wrap;
}
.wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
    margin-left: 0;
}

input[type=radio] {
    /* デフォルトのものを消す */
    width: 1px;
    height: 1px;
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

input[type=radio] + .wpcf7-list-item-label {
    padding-block: 12px;
}

/* チェックボタン */
input[type=radio] + .wpcf7-list-item-label {
    display: block;
    position: relative;
    padding-left: 55px;
}
/* frame */
input[type=radio] + .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 1px solid #EF7F27;
    border-radius: 999px;
    background: #fff;
}

/* チェック時のマーク */
input[type=radio] + .wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 10px;
    width: 22px;
    height: 22px;
    background: #EF7F27;
    border-radius: 999px;
    opacity: 0;
}

/* チェックされた時の挙動 */
input[type=radio]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
}

/* フォーカス時のスタイル */
input[type=radio]:focus + .wpcf7-list-item-label::before {
    border: 2px solid #EF7F27;
    background: #F7D2B4;
    box-shadow: 0px 0px 10px rgba(239, 127, 39, 0.5);
}


/* ===================================
チェックボックス
=================================== */
.wpcf7-form-control.wpcf7-checkbox {
    display: flex;
    gap: 24px 60px;
    flex-wrap: wrap;
}
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item {
    margin-left: 0;
}

input[type="checkbox"] {
    /* デフォルトのものを最小化 */
    width: 1px;
    height: 1px;
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
input[type="checkbox"] + .wpcf7-list-item-label {
    padding-block: 12px;
}
/* チェックされた時の挙動 */
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background: #333333;
    border-color: #333333;
}
/* チェックボタン */
input[type="checkbox"] + .wpcf7-list-item-label {
    display: block;
    position: relative;
    padding-left: 55px;
}
/* frame */
input[type="checkbox"] + .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 1px solid #707070;
    background: #fff;
    transition: all 0.3s ease;
}
/* チェックマーク */
input[type="checkbox"] + .wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 13px;
    width: 12px;
    height: 20px;
    rotate: 45deg;
    border-right: 5px solid #fff;
    border-bottom: 5px solid #fff;
    opacity: 0;
}

/* チェックされた時の挙動 */
input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background: #333333;
    border-color: #333333;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
}

/* フォーカス時のスタイル */
input[type="checkbox"]:focus + .wpcf7-list-item-label::before {
    box-shadow: 0px 0px 10px rgba(239, 127, 39, 0.5);
}

/*
クリック時のリップル（波及）アニメーション設定
 */

/* ラベル自体を相対位置に */
label {
  position: relative;
  overflow: hidden; /* リップルがはみ出さないように */
}

/* リップル効果用の擬似要素 */
label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 40px;  /* 初期サイズ */
  height: 40px;
  background: #333;  /* リップルの色 */
  transform: translate(-50%, 0) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* クリック時（アクティブ状態）にアニメーションを実行 */
label:has(input[type="checkbox"]:checked)::before {
  /* 例：リップルアニメーションの適用 */
  animation: ripple 0.65s ease-out;
  background: #333;  /* リップルの色 */
}

/* リップルアニメーションの定義 */
@keyframes ripple {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.35;
  }
  to {
    transform: translate(-50%, -50%) scale(4); /* 拡大率は調整可能 */
    opacity: 0;
  }
}



/* ===================================
承認ボタン
=================================== */

.acceptance {
    margin-top: 60px;
    text-align: center;
}
.acceptance__text {
    /* wbrで改行 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.acceptance__text a {
    text-decoration: underline;
}


/* ===================================

=================================== */

/* ボタン */
.button-items {
    margin-top: 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.button-wrap {
    width: fit-content;
    /* display: block;
    width: 100%; */
    margin-inline: auto;
    position: relative;
}
.button-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 13px;
    height: 11px;
    background: url(../../img/arrow-right_w.svg) no-repeat center center / contain;
    transition: all 0.3s ease;
}

.form-button {
    display: inline-block;
    width: min(200px, 100%);
    margin-left: auto;
    margin-right: auto;
    padding: 13px 37px 13px 30px;
    color: #fff;
    background: #EF7F27;
    border-radius: 999px;
    font-size: 16px;
    border: 1px solid #EF7F27;
    text-align: left;
    cursor: pointer;
}

/* --- disabled 時のスタイル --- */
.form-button:disabled {
    background-color: #c6c6c6;
    border: 1px solid #c6c6c6;
    color: #fff;
    opacity: .6;
    /* cursor: not-allowed; */
    box-shadow: none;
}

.form-button.--back {
    text-align: center;
    color: #333;
    background: #eeeeee;
    border: 1px solid #eeeeee;
}





/* ----------  ツールチップ  ---------- */
.button-wrap {
    position: relative;
}
.tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 10;

    width: 500px;
    max-width: calc(100vw - 30px * 2);
    padding: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: #fff;
    background: rgba(51, 51, 51, .95);
    border-radius: 6px;
    text-align: center;
    pointer-events: none;

    opacity: 0;
    transform: translateX(-50%) scale(.95);
    /* transition: .3s opacity ease, .25s transform ease; */
}
/* “disabled かつ hover” のときだけ表示 */
.confirm_button:disabled:hover + .tooltip {
    opacity: 1;
    transform: translate(-50%) scale(1);
}
/* スマホのタップ長押し対策（フォーカスでも出したい場合） */
.confirm_button:disabled:focus-visible + .tooltip {
    opacity: 1;
    transform: translate(-50%) scale(1);
}





/* 問い合わせ種別エリア */
.radio-items {
    margin-top: 30px;
}

/* 名前エリア */
.name-items {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.name-item {
    display: flex;
    align-items: center;
    gap: 30px;
}
.name-item__text {
    width: 330px;
}
.name-item__box {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 20px;
}








/* ========================================
ファイル
 ======================================== */

/* input[type="file"] を非表示にする */
input[type="file"] {
    width: 1px;
    height: 1px;
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

/* カスタムのファイル選択ボタン */
.file-label {
    display: inline-block;
    padding: 8px 44px;
    background-color: #fff;
    border: 1px solid #333333;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

.file-input {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
}

.file-input .wpcf7-form-control-wrap {
    flex: unset;
}

/* ボタンホバー時 */
.file-label:hover {
    background-color: #333333;
    color: #fff;
}

/* 選択されたファイル名の表示 */
#file-name {
    font-size: 14px;
    color: #333;
    margin-left: 10px;
}

.file-attention {
    margin-top: 17px;
}







/* ===================================
reCAPTCHA　テキスト
=================================== */
.contact-form__reCAPTCHA {
    margin-top: 30px;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
    text-align: center;
}
.contact-form__reCAPTCHA a {
    text-decoration: underline;
}
.contact-form__reCAPTCHA a {
    text-decoration: underline;
}


/*reCAPTCHAのバッジを非表示に*/
.grecaptcha-badge {
    visibility: hidden;
}







/* ===================================
送信完了画面
=================================== */
.thanks-box {
    text-align: center;
}
.thanks-box__title {
    font-size: 25px;
    font-weight: bold;
    color: #EF7F27;
}
.thanks-box__text {
    margin-top: 30px;
}
.thanks-box__button {
    margin-top: 30px;
}


/* ===================================
その他
=================================== */
.wpcf7-spinner {
    display: none !important;
}

/* // エラーメッセージ */
.wpcf7-not-valid-tip {
    font-size: 10px !important;
    color: red;
}

/* // // デフォルトのサンクスメッセージ */
.wpcf7-response-output{
    display: none;
}

/* エラー時だけ表示する */
/* .wpcf7 .wpcf7-response-output {
    display: block;
    text-align: center;
    padding: 20px !important;
} */