@charset "UTF-8";
/* CSS Document */
/*-------------------------------*/

/* simple-form template//

inputの属性
<input 〇〇="ここに指定">

autocomplete ==>
name : 姓名
family-name : 姓
given-name : 名
email : メールアドレス
postal-code : 郵便番号
address-level1 : 都道府県
address-level2 : 市区町村
address-line1 : 番地・マンション名（1行目）
address-line2 : 番地・マンション名（2行目）
organization : 会社名
off : 自動入力を無効にする

inputmode ==>
【iOSで下部のキーが変化】
text : 規定値
email : メール
search : サーチ
url : URL
【左下キーが変化】
decimal : .（ドット）が左下に表示
numeric : 表示なし
tel : 電話番号に必要なキーが表示

*/
/*------------------------------*/
/* reCAPTCHA */
/*------------------------------*/
.g-recaptcha{
    margin-top: 2em;
}

/*------------------------------*/
/* コンテナ */
/*------------------------------*/
#contact-form.content__fx-wrapper{
    width: calc(800rem/16);
    max-width: 100%;
    padding: 0 var(--mp-lr-reg);
}
/* リード */
#form-item__headline{
    font-size: var(--txt-md);
    text-align: center;
    padding-bottom: var(--mp-tb-lg);
}
/* 営業お断り文言 */
#contact-form .attention-sales__wrapper{
    margin-top: var(--mp-tb-xs);

    display: flex;
    justify-content: center;
}
#contact-form .attention-sales{
    display: inline-block;
    padding: 1em;
    width: calc(480rem/16);
    max-width: 100%;
    
    border: solid 1px var(--c-gray-pale);
    text-align: justify;
    font-size: var(--txt-sm);
}
#contact-form .attention-sales > .customer-first{
    display: block;
    padding-bottom: 0.5em;

    font-weight: 700;
    text-align: center;
    font-size: var(--txt-reg);
}
@media(max-width: 959px){
    #form-item__headline{
        font-size: var(--txt-md);
    }
}
/*------------------------------*/
/* スタイリング */
/*------------------------------*/
:root{
    --input-c-valid: #e9f7f2;
    --input-c-invalid: #fdebeb;
    --input-c-invalid-focus: #fed2d2;
    --input-c-complete: #e9f7f2;
    --label-c-required: #eb3737;
    --label-c-optional: #dedede;
    --error-message: #f72222;
    --accept-message: #2eb44b;
}
/* ---------------------
フォームグループ */
.form-item__group{
    width: 100%;
    border: none;
}
.form-item__group + .form-item__group{
    margin-top: 2em;
}
/* フォームグループタイトル */
.form-item__group-ttl{
    font-size: var(--txt-reg);
    width: 100%;
}
.form-item__group-ttl--name{
    vertical-align: middle;
    font-size: var(--txt-reg);
}
/* ---------------------
アイテムラッパー */
.form-item__wrapper{
    width: 100%;
}
.form-item__wrapper + .form-item__wrapper{
    margin-top: 1.5em;
}
@media(max-width: 559px){
    .form-item__wrapper + .form-item__wrapper{
        margin-top: 1em;
    }
}
/* ラベル */
.form-item__label{
    width: 100%;
}
.form-item__name{
    vertical-align: middle;
}
/* 必須マーク */
.form-item__required{
    font-size: var(--txt-sm);
    color: var(--c-white);
    padding: 0.2em 0.5em;
    border-radius: 2px;
    background-color: var(--label-c-required);
    vertical-align: middle;

    margin-right: 0.8em;
}
.form-item__required.-optional{
    color: var(--c-bk);
    background-color: var(--label-c-optional);
}
/* 入力欄 */
.form-item__input{
    display: block;
    width: 100%;
    padding: calc(8rem/16);
    border-radius: 8px;
    background-color: var(--c-gray-pale);
    margin-top: calc(8rem/16);
}
textarea.form-item__input{
    white-space: pre-wrap;
}
.form-item__input::placeholder{
    color: transparent;
}
#name,
#furigana,
#organization,
#email,
#tel,
#your-message
{
    width: 100%;
    max-width: 100%;
}
#tel,
#address-first,
#address-second
{
    width: calc(240rem/16);
    max-width: 100%;
}
/* アクセシビリティ対応 */
.form-item__describe{
    font-size: calc(14rem / 16);
    line-height: 1.4;
    margin-top: calc(4rem/16);

    /* display: inline-flex; */
}
.form-item__describe::before{
    content: "※";
    display: inline-block;
    vertical-align: middle;
    font-size: calc(14rem / 16);
    line-height: calc(calc(14rem / 16)/0.85);
    line-height: calc(calc(14rem / 16)/0.85);
    margin-right: 0.15em;
}
.form-item__input:focus{
    outline: 3px solid var(--c-main-light);
    outline-offset: 4px;
}
@media(max-width: 559px){
    .form-item__describe{
        font-size: calc(12rem / 16);
    }
    .form-item__describe::before{
        font-size: calc(12rem / 16);
        line-height: calc(calc(12rem / 16)/0.85);
        line-height: calc(calc(12rem / 16)/0.85);
    }
}
/* -------------------
ラジオボタン */
.radio__container{
    margin-top: 1em;
}
.radio__wrapper{
    display: inline-flex;
    flex-direction: column;
}
.radio__label{
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0 0.5em;
    position: relative;
}
.radio__label + .radio__label{
    margin-top: 0.3em;
}
.radio__input{
    margin: 0;
    opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%,-50%);
}
.radio__check-mark{
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #dedede;

    transition: border-color .1s var(--easeInSine);
}
.radio__check-mark::before{
    content: "";
    display: block;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: transparent;

    position: absolute;
    top: 50%;
    left: 4px;

    transform: translateY(-50%);
    transition: background-color .1s var(--easeInSine);
}
/* チェック時の挙動 */
.radio__input:checked + .radio__check-mark{
    border-color: var(--c-main);
}
.radio__input:checked + .radio__check-mark::before{
    background-color: var(--c-main);
}
@media(any-hover : hover){
    /* focus-visible polyfill / javascript */
    .radio__input:focus:not(.focus-visible) + .radio__check-mark + .radio__name{
        outline: none;
    }
    .radio__input.focus-visible + .radio__check-mark + .radio__name{
        outline: 2px solid var(--c-focus);
    }
}
/*------------------------------*/
/* エラーメッセージ//アクセプトメッセージ */
/* セッティング */
.input-message{
    margin-top: calc(4rem/16);
}
.mess-txt{
    display: block;
    font-size: var(--txt-sm);
    line-height: var(--txt-md);
}
.mess-icon{
    display: block;
    width: var(--txt-md);
    height: var(--txt-md);
    margin-right: 0.2em;
}
.mess-icon > svg{
    fill: currentColor;
    width: 100%;
    height: 100%;
    vertical-align: top;
}
/* エラーメッセージ */
.error-message{
    display: flex;
    align-items: flex-start;
}
.error-message .mess-icon{
    flex-shrink: 0;
    color: var(--error-message);
}
.error-message .mess-txt{
    color: var(--error-message);
}
/* アクセプトメッセージ */
.accept-message{
    display: flex;
    align-items: center;
}
.accept-message .mess-icon{
    color: var(--accept-message);
}
.accept-message .mess-txt{
    color: var(--accept-message);
}
/*------------------------------*/
/* フォームフッター */
#form__footer{
    margin-top: 3em;
}
#form__footer .input-message{
    margin-bottom: 1em;
    justify-content: center;
}
#form__footer .accept-message .mess-txt{
    color: var(--c-bk);
}
/* 送信ボタン */
#submit-button{
    font-size: var(--txt-reg);
	color: var(--c-white);

	display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 1em;

	width: 280px;
    max-width: 100%;
	padding: 1.4em min(5.5vw,1em);
    background-color: var(--c-main);
    border-radius: 4px;

    margin-right: auto;
    margin-left: auto;

	position: relative;
}
#submit-button > svg{
    width: var(--txt-reg);

    position: absolute;
    right: min(5.5vw,1em);
}
#submit-button[aria-disabled="true"]{
    color: #a7a7a7;
    background-color: #dedede;
    cursor: not-allowed;
}
@media(max-width: 559px){
    #submit-button{
        border-radius: 8px;
    }

    /* 営業お断り文言 */
    #contact-form .attention-sales{
        text-align: justify;
    }
}
/* hover設定 */
@media(any-hover:hover){
    #submit-button{
        transition:
        color .2s var(--easeInSine),
        background-color .2s  var(--easeInSine)
        ;
    }

    #submit-button[aria-disabled="false"]:hover,
    #submit-button[aria-disabled="false"]:focus
    {
        color: var(--c-white);
	    background-color: var(--c-main-light);
    }
}
/*------------------------------*/
/* 制御 */
/*
:valid = 入力中
:invalid = 正規表現判定以外の入力
:placeholder = プレースホルダーテキスト
:placeholder-shown = プレースホルダーが表示されてる時
:focus-within = 子要素にフォーカスがあたっている時に有効
:focus-visible = フォーカスがされている時有効
:disabled = 入力できない状態
*/
/*------------------------------*/
/* 入力なし */
.input-message[aria-hidden=true] {
    display: none;
}
.form-item__input:placeholder-shown + span .accept-message{
    display: none;
}
/* 任意設定のinputは一度入力した内容を消した状態でフォーカスを外したらaccept-messageなどを非表示にする */
.form-item__input:placeholder-shown + #organization-describe + span .accept-message{
    display: none;
}
/* アクセプト */
.form-item__input[data-form-changeValidate='false']:valid:not(:focus-visible){
    background-color: var(--input-c-complete);
}
/* アクセプト時のディスクリプションの挙動 */
.form-item__input[data-form-changeValidate='false']:valid:not(:focus-visible) + .form-item__describe{
    display: none;
}
.form-item__input[data-form-changeValidate='false']:valid:placeholder-shown:not(:focus-visible) + .form-item__describe{
    display: inline-flex;
}
/* エラー */
.form-item__input[data-form-changeValidate='true']{
    background-color: var(--input-c-invalid);
    border-color: var(--label-c-required);
}
.form-item__input[data-form-changeValidate='true']:focus{
    outline-color: var(--input-c-invalid-focus);
}
/* エラー時のシェイクアニメーション */
.form-item__input[data-form-changeValidate='true']:not(:focus){
    animation-name: error-shake;
    animation-duration: .1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-iteration-count: 4;
}
@keyframes error-shake{
    0%{
        outline: 3px solid var(--input-c-invalid-focus);
        outline-offset: 3px;
    }
    50%{
        transform: translateX(-4px);
        outline: 3px solid var(--input-c-invalid-focus);
        outline-offset: 3px;
    }
    100%{
        outline: 3px solid var(--input-c-invalid-focus);
        outline-offset: 3px;
    }
}



/* お問い合わせ進捗状況 */
/* コンテナ */
.step-badge__wrapper{
    margin-top: var(--mp-tb-lg);
    margin-bottom: var(--mp-tb-lg);
    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: center;
}
.step-badge{
    margin-top: 0.5em;

    display:flex;
    align-items:center;
    justify-content: center;
    gap: 0.5em;

    font-size: var(--txt-sm);
    line-height:1; 
}
/* タイトル */
.step-badge__wrapper > .step-badge__inner > .step-heading{
    text-align: left !important;
    color: var(--c-gray) !important;
    font-size: var(--txt-reg) !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;

    position: relative;

    display: flex;
    align-items: center;
    gap: 0.3em;
}
.step-badge__wrapper > .step-badge__inner > h3::after{
    content: "";

    background-color: var(--c-gray);
    height: 1px;
    flex-grow: 1;
}
/* ボックス */
.step-badge .step{
    padding: 0.35em 0.6em; 
    border:1px solid var(--c-border, #ddd);
    border-radius: 3px; 
    background-color: var(--c-white);
    color: var(--c-gray); 
    white-space:nowrap;
}
/* 該当ステップ強調 */
.step-badge .step.is-active{
    border-color: var(--c-main);
    background-color: rgba(71, 144, 189, 0.2);
    color: var(--c-main);
    font-weight:700;
}
/* 矢印 */
.step-badge .sep{ 
    opacity: 0.6;
}