/**
 * #.# WordPress ブロックレイアウト
 *
 * 規定classのレイアウトを調整
 */

.wp-block-group {
    width: 100%;
}
.form-wrapper{
    max-width: 960px;
    width: 100%;
    margin: 150px auto 100px;
}

/**
 * #.# フォームページの共通レイアウト
 *
 * 見出しタグなどのデザイン
 */

h2 {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 700;
    color: #b50005; /* #17C1B0 → #b50005 */
}

h3 {
    width: 100%;
    margin-bottom: 30px !important;
    padding-bottom: 8px;
    position: relative;
    text-align: center;
    font-size: 36px;
    font-weight: 700;   
}
h3::after {
    content: "";
    width: 80px;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 40px);
    display: block;
    background: #b50005; /* #17C1B0 → #b50005 */
}

.page-form button {
    margin: 20px 15px 0 15px;
}

@media screen and (max-width:768px){
    h3 {
        font-size: 30px;
    }
}

/* ボタン ----- 背景ホワイト文字ブラック シャドウ */
.form-button-white {
    padding: 8px 35px;
    display: inline-block;
    background: #FFF;
    border-top: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 3px solid #D9D9D9;
    border-bottom: 3px solid #D9D9D9;
    border-radius: 30px;
}

/* ---------- メインコンテンツ レイアウト ---------- */
.page-form {
    width: 100%;
    margin: 70px 0;
}

@media screen and (max-width:1365px){
    .page-form {
        margin: 40px 0 70px;
    }
}


/**
 * #.# インフォメーション
 *
 * フォームより上部 バナーや案内を記載する箇所。
 */

/* ---------- wrapper ---------- */
.form-info-wrapper {
    margin-bottom: 60px;
}

@media screen and (max-width:959px){
    .form-info-wrapper {
        margin-bottom: 40px;
    }
}

/* ---------- FAQへのリンク段落 ---------- */
.form-faq-link {
    margin: 30px auto 50px;
    text-align: center;
}
@media screen and (max-width:1365px){
    .form-faq-link {
        margin: 30px auto;
    }
}

/**
 * #.# フォームデザイン
 *
 * プラグインSnowMonkeyFormのデザインをリセット、上書き
 */

/* ---------- フォーム進捗に合わせてコンテンツ切り替え ---------- */
/* 操作class
 - .form-view-input,
 - .form-view-confirm,
 - .form-view-complete,
 - .form-view-systemerror */

/* 案内部分 入力画面時のみ表示 */
.wp-block-group.form-view-input:not(:has(~ .wp-block-group > .wp-block-group__inner-container > form[data-screen="input"])) {
    display: none;
}

/* フォーム上部 フォームタイトル表示切り替え */
/* 入力画面 */
.wp-block-heading.form-view-confirm:has(~ .snow-monkey-form[data-screen="input"]),
.wp-block-heading.form-view-complete:has(~ .snow-monkey-form[data-screen="input"]),
.wp-block-heading.form-view-systemerror:has(~ .snow-monkey-form[data-screen="input"]) {
    display: none;
}
/* 確認画面 */
.wp-block-heading.form-view-input:has(~ .snow-monkey-form[data-screen="confirm"]),
.wp-block-heading.form-view-complete:has(~ .snow-monkey-form[data-screen="confirm"]),
.wp-block-heading.form-view-systemerror:has(~ .snow-monkey-form[data-screen="confirm"]) {
    display: none;
}
/* 送信完了 */
.wp-block-heading.form-view-input:has(~ .snow-monkey-form[data-screen="complete"]),
.wp-block-heading.form-view-confirm:has(~ .snow-monkey-form[data-screen="complete"]),
.wp-block-heading.form-view-systemerror:has(~ .snow-monkey-form[data-screen="complete"]) {
    display: none;
}
/* 無効な入力エラー */
.wp-block-heading.form-view-confirm:has(~ .snow-monkey-form[data-screen="invalid"]),
.wp-block-heading.form-view-complete:has(~ .snow-monkey-form[data-screen="invalid"]),
.wp-block-heading.form-view-systemerror:has(~ .snow-monkey-form[data-screen="invalid"]) {
    display: none;
}
/* 戻るボタン後 */
.wp-block-heading.form-view-confirm:has(~ .snow-monkey-form[data-screen="back"]),
.wp-block-heading.form-view-complete:has(~ .snow-monkey-form[data-screen="back"]),
.wp-block-heading.form-view-systemerror:has(~ .snow-monkey-form[data-screen="back"]) {
    display: none;
}
/* 送信エラー */
.wp-block-heading.form-view-input:has(~ .snow-monkey-form[data-screen="systemerror"]),
.wp-block-heading.form-view-confirm:has(~ .snow-monkey-form[data-screen="systemerror"]),
.wp-block-heading.form-view-complete:has(~ .snow-monkey-form[data-screen="systemerror"]) {
    display: none;
}

/* フォーム内部 表示切り替え */
/* 入力画面 */
[data-screen="input"] .wp-block-snow-monkey-forms-item.form-view-confirm,
[data-screen="input"] .wp-block-snow-monkey-forms-item.form-view-complete {
    display: none;
}
/* 確認画面 */
[data-screen="confirm"] .wp-block-snow-monkey-forms-item.form-view-input,
[data-screen="confirm"] .wp-block-snow-monkey-forms-item.form-view-complete {
    display: none;
}
/* 送信完了 */
[data-screen="complete"] .wp-block-snow-monkey-forms-item.form-view-input,
[data-screen="complete"] .wp-block-snow-monkey-forms-item.form-view-confirm {
    display: none;
}
/* 無効な入力エラー */
[data-screen="invalid"] .wp-block-snow-monkey-forms-item.form-view-confirm,
[data-screen="invalid"] .wp-block-snow-monkey-forms-item.form-view-complete {
    display: none;
}
/* 戻るボタン後 */
[data-screen="back"] .wp-block-snow-monkey-forms-item.form-view-confirm,
[data-screen="back"] .wp-block-snow-monkey-forms-item.form-view-complete {
    display: none;
}
/* 送信エラー */
[data-screen="systemerror"] .wp-block-snow-monkey-forms-item.form-view-input,
[data-screen="systemerror"] .wp-block-snow-monkey-forms-item.form-view-confirm,
[data-screen="systemerror"] .wp-block-snow-monkey-forms-item.form-view-complete {
    display: none;
}

/* 送信完了画面 メッセージ余白調整 */
.rhino-form-complete {
    margin: 40px 0;
}


/* ---------- フォームパーツのデザインをリセット+上書き ---------- */
.smf-button-control__control,
.smf-text-control__control,
.smf-textarea-control__control {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-size: 100% !important;
  font-family: inherit !important;
}

/* フォームボタンをデザイン */
.smf-button-control__control {
  padding: 8px 35px !important;
  background: var(--accent-color, #b50005) !important; /* #17C1B0 → #b50005 */
  color: #FFF !important;
  border: none !important;
  border-right: 3px solid #B50005 !important; /* #0CA595 → #B50005 */
  border-bottom: 3px solid #B50005 !important; /* #0CA595 → #B50005 */
  border-radius: 30px !important;
  transition: opacity 0.2s !important;
}

/* 「戻る」フォームボタンを個別にデザイン */
.smf-button-control__control[data-action="back"] {
  background: transparent !important;
  color: #222 !important;
  border-right: 3px solid #D9D9D9 !important;
  border-bottom: 3px solid #D9D9D9 !important;
  border-radius: 30px !important;
  text-decoration: none !important;
}

/* 「戻る」以外のフォームボタンのホバー＆フォーカス色 */
.smf-button-control__control:not([data-action="back"]):hover,
.smf-button-control__control:not([data-action="back"]):focus {
  opacity: 0.6 !important;
}

/* ---------- 実行ボタンのレイアウト ---------- */

.smf-action {
    margin: 20px 0 10px !important;
}

/* ---------- フォームのデザイン ---------- */
/* チェックボックス */
input[type="checkbox"] {
    position: relative;
    width: 24px;
    height: 24px;
    background: #FFF;
    border: 1px solid #C6C6C6;
    border-radius: 4px;
    vertical-align: -5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex-shrink: 0 !important;
}
input[type="checkbox"]:checked:before {
    position: absolute;
    top: 2px;
    left: 7px;
    transform: rotate(50deg);
    width: 8px;
    height: 14px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    content: '';
}

/* テキストボックス */
input[type="text"],
input[type="email"],
input[type="tel"] {
    padding: 8px 20px !important;
    border: 1px solid #CCC !important;
    border-radius: 4px !important;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
    color: #D9D9D9;
}

input[type="text"] {
    width: 100%;
    max-width: 960px !important;
}

input[type="email"],
input[type="tel"] {
    width: 100%;
    max-width: 960px !important;
}
input[type="radio"] {
    width: 100%;
    max-width: 960px !important
}
textarea{
    padding: 8px 20px !important;
    border: 1px solid #CCC !important;
    border-radius: 4px !important;
    width:100%;
    max-width: 960px !important;
    height:150px;
}    
/* チェックボックス */
.smf-form .smf-item .smf-checkbox-control__control{
    border: 1px solid #222 !important;
    border-radius: 4px !important;
    margin:4px 4px 0 0px !important;
    padding:8px !important;
}
.smf-form .smf-item .smf-checkbox-control__control:checked{
    background-color: #fff !important;
} 
.smf-checkbox-control__label{
    margin-right:15px;
}
.smf-form .smf-item .smf-checkbox-control__control:checked:before{        
    top: 1px !important;
    width: 6px !important;
    height: 12px !important;
}

/* ラジオボタン */
.smf-form .smf-item .smf-radio-button-control__control{
    border: 1px solid #222 !important;
    margin:4px 4px 0 0px !important;
    padding:8px !important;
}
.smf-form .smf-item .smf-radio-button-control__control:checked{
    background-color: #fff !important;
} 
.smf-form .smf-item .smf-radio-button-control__control:checked:before{
    background:#333 !important;
    top:3px !important;
    left:3px !important;
    padding:5px !important;
}
.smf-radio-button-control__label{
    margin-right: 15px;
}

/* セレクトボックス */
select {
    padding: 8px 40px 8px 20px !important;
    border: 1px solid #CCC !important;
    border-radius: 4px !important;
    line-height: normal !important;
}
.smf-select-control__toggle {
    right: 24px !important;
    left: auto !important;
}
.smf-select-control__toggle::before {
    width: 12px !important;
    height: 9px !important;
    top: calc(50% - 3px) !important;
    border: none !important;
    background: #222;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: none !important;
}

/* ファイルアップローダー */
.smf-file-control__label {
    padding: 3px 10px !important;
    background: #eee !important;
    border: 1px solid #aaa !important;
    border-radius: 4px !important;
}

/* ---------- トラッカーデザイン上書き ---------- */
/* 背景色 */
.smf-progress-tracker {
    margin: 20px 0;
    justify-content: center;
    gap: 10px;
}
.smf-progress-tracker__item {
    max-width: 132px;
    height: 35px;
    position: relative;
    flex-direction: row !important;
    justify-content: center;
    gap: 7px;
    background: #FCDCDF; /* #CDFCF7 → 赤の薄色 */
}

/* 背景色 矢印 */
.smf-progress-tracker li:before,
.smf-progress-tracker li:after {
    width: 14px !important;
    height: 35px !important;
    position: absolute !important;
    top: 0 !important;
    display: block !important;
}
.smf-progress-tracker li:before {
    right: auto !important;
    left: 0 !important;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #FFF !important;
}
.smf-progress-tracker li:after {
    right: -14px !important;
    left: auto !important;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #FCDCDF !important; /* #CDFCF7 → 赤の薄色 */
    z-index: 1;;
}

[data-screen="input"] .smf-progress-tracker li:nth-child(1)::after,
[data-screen="confirm"] .smf-progress-tracker li:nth-child(1)::after,
[data-screen="confirm"] .smf-progress-tracker li:nth-child(2)::after,
[data-screen="complete"] .smf-progress-tracker li:nth-child(1)::after,
[data-screen="complete"] .smf-progress-tracker li:nth-child(2)::after,
[data-screen="complete"] .smf-progress-tracker li:nth-child(3)::after,
[data-screen="invalid"] .smf-progress-tracker li:nth-child(1)::after,
[data-screen="back"] .smf-progress-tracker li:nth-child(1)::after {
    background: #b50005 !important; /* #17C1B0 → #b50005 */
}

/* 背景色 現在位置 */
[data-screen="input"] .smf-progress-tracker__item:nth-child(1),
[data-screen="confirm"] .smf-progress-tracker__item:nth-child(1),
[data-screen="confirm"] .smf-progress-tracker__item:nth-child(2),
[data-screen="complete"] .smf-progress-tracker__item:nth-child(1),
[data-screen="complete"] .smf-progress-tracker__item:nth-child(2),
[data-screen="complete"] .smf-progress-tracker__item:nth-child(3),
[data-screen="invalid"] .smf-progress-tracker__item:nth-child(1),
[data-screen="back"] .smf-progress-tracker__item:nth-child(1) {
    background: #b50005; /* #17C1B0 → #b50005 */
}
/* 送信エラー */
[data-screen="systemerror"] .smf-progress-tracker li:nth-child(1)::after,
[data-screen="systemerror"] .smf-progress-tracker li:nth-child(2)::after {
    background: #b50005 !important; /* #17C1B0 → #b50005 */
}
[data-screen="systemerror"] .smf-progress-tracker li:nth-child(3)::after {
    background: #FF5773 !important;
}
[data-screen="systemerror"] .smf-progress-tracker__item:nth-child(1),
[data-screen="systemerror"] .smf-progress-tracker__item:nth-child(2) {
    background: #b50005; /* #17C1B0 → #b50005 */
}
[data-screen="systemerror"] .smf-progress-tracker__item:nth-child(3) {
    background: #FF5773;
}

/* 数字+文字 デフォルトカラー */
.smf-progress-tracker__item__number {
    width: 18px !important;
    height: 18px !important;
    padding-bottom: 1px;
    background-color: transparent !important;
    border: 1px solid #222;
    font-size: 12px;
    color: #222 !important;
}
.smf-progress-tracker__item__text {
    padding-bottom: 7px;
    font-size: 14px;
    color: #222 !important;
}

/* 数字+文字 現在位置のカラー変更 */
[data-screen="input"] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen="confirm"] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen="confirm"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__number,
[data-screen="complete"] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen="complete"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__number,
[data-screen="complete"] .smf-progress-tracker__item--complete .smf-progress-tracker__item__number,
[data-screen="invalid"] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen="back"] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen="systemerror"] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen="systemerror"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__number,
[data-screen="systemerror"] .smf-progress-tracker__item--complete .smf-progress-tracker__item__number {
    background-color: transparent !important;
    border: 1px solid #FFF;
    font-weight: 400 !important;
    color: #FFF !important;
}
[data-screen="input"] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen="confirm"] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen="confirm"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text,
[data-screen="complete"] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen="complete"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text,
[data-screen="complete"] .smf-progress-tracker__item--complete .smf-progress-tracker__item__text,
[data-screen="invalid"] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen="back"] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen="systemerror"] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen="systemerror"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text,
[data-screen="systemerror"] .smf-progress-tracker__item--complete .smf-progress-tracker__item__text {
    font-weight: 700 !important;
    color: #FFF !important;
}

/* ---------- フォームレイアウト調整 ---------- */
/* フォーム border */
.form-wrapper {
    padding: 40px;
}
.form-wrapper:has(form[data-screen="confirm"]),
.form-wrapper:has(form[data-screen="complete"]),
.form-wrapper:has(form[data-screen="invalid"]),
.form-wrapper:has(form[data-screen="back"]),
.form-wrapper:has(form[data-screen="systemerror"]) {
    border: none;
}

/* ---------- 注意事項 ---------- */
.form-notes {
    margin: 20px 0 !important;
    padding: 30px 40px !important;
    background: #FCEEF0; /* #EFFEFC → 赤の薄背景色 */
    border-radius: 30px;
}

.smf-item__label {
    min-width: 300px;
    display: flex;
    align-items: center;
}
.smf-form--simple-table .smf-item__col--label {
    max-width: fit-content !important;
}

/* チェックボックス */

.form-notes-content {
    display: flex !important;
    flex-direction: row;
    gap: 8px;
    justify-content: center;

}
.form-notes-content p {
    line-height: 24px;
}


@media screen and (max-width:959px){
    .form-wrapper {
        padding: 40px 20px;
    }

    .form-notes {
        margin: 10px 0 !important;
        padding: 14px !important;
        border-radius: 14px;
    }

    .smf-form--simple-table .smf-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .smf-form--simple-table .smf-item__col--label {
        width: 100%;
        max-width: 600px !important;
        margin: 0 auto;
        flex: auto !important;
    }

    .smf-form--simple-table .smf-item__col--controls {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .smf-item__label {
        padding-left: 0;
    }

    .smf-placeholder .smf-text-control {
        width: 100%;
    }
}

@media screen and (max-width:768px){
    /* チェックボックス */
    .form-notes-content {
        margin: 20px 0;
    }
    .form-notes-content p {
        line-height: 15px;
    }
    input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }
    input[type="checkbox"]:checked:before {
        width: 5px;
        height: 8px;
        top: 1px;
        left: 4px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
    }
}


.snow-monkey-form {
    width: 100%;
}

/* 送信エラーメッセージ */
.smf-system-error-content {
    padding: 15px 0;
    text-align: center;
}

/* 必須アイコン */
p.form-required-text::after,
.form-required-text .smf-item__label::after {
    content: "必須";
    margin-left: 7px;
    padding: 0px 5px 2px;
    border-radius: 4px;
    background: #b50005;
    font-size: 12px;
    font-weight: 400;
    color: #FFF;
}

/* ラベル */
p.form-required-text,
.form-required-text .smf-item__label {
    font-weight: 700;
}
p.form-text-label,
.form-text-label .smf-item__label{
    font-weight: 700;
    margin-bottom: 15px;
}
/* フォームタイトル非表示（確認画面） */
[data-screen="confirm"] .fome-title,
[data-screen="complete"] .fome-title {
    display: none;
}
/* 同意チェックボックスの必須を消す */
.form-no-required-text::after{
display:none !important;
content:none !important;
}
/* 個人情報の取り扱いリンク */
.form-notes-content a{
color:#b50005;
text-decoration:underline;
}

.form-notes-content a:hover{
opacity:0.7;
}
/* 確認画面で個人情報のチェックボックスを消す */
[data-screen="confirm"] ~ .form-notes-content,
[data-screen="back"] ~ .form-notes-content {
    display: none !important;
}

/* 確認画面 各項目に下線 */
[data-screen="confirm"] .smf-item {
    border-bottom: 1px solid #CCC;
    padding: 10px 0;
}

/* 個人情報チェックボックス 確認・完了・エラー画面で非表示 */
[data-screen="confirm"] .form-notes-content,
[data-screen="complete"] .form-notes-content,
[data-screen="systemerror"] .form-notes-content {
    display: none !important;
}

/* 確認画面で個人情報エリアの区切り線を消す */
[data-screen="confirm"] .smf-item--divider {
    display: none !important;
}
/* 完了画面 */
.form-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-complete p {
    padding: 30px;
    text-align: center;
    font-size: 20px;
}
.form-complete a {
    display: inline;
    color: #b50005 !important;
    border-bottom: 1px solid #b50005 !important;
    text-decoration: none;
}
.form-complete a:hover {
    opacity: 0.7;
}
@media screen and (max-width: 768px) {
    .form-complete p {
        padding: 20px 10px;
        font-size: 14px;
    }
    .form-complete a {
        font-size: 14px;
    }
}