@charset "utf-8";
/*=======================
 LINE相談CTA 追加分
 （style.css は原本のまま、ここで上書き）
=========================*/

/* ---- ヘッダー：電話／メール／LINE の3並び ---- */
.header .icon a{
    display: block;
    flex: 0 1 224px;
}
.icon a:nth-child(3){
    margin-left: 25px;
}
@media (max-width: 767px) {
    .header .h_right {
        width: 69%;
    }
    .header .icon a{
        flex: 1 1 0;
    }
    .icon a:nth-child(3) {
        margin-left: 5px;
    }
}

/* ---- 大CTA（オペレーター画像の上）：電話＋メール＋LINE ---- */
.cta_area .cta_btns{
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 6%;
    display: flex;
    align-items: center;
    gap: 2%;
}
.cta_area .cta_btns .cta_tel02,
.cta_area .cta_btns .cta_mail02,
.cta_area .cta_btns .cta_line02{
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .3));
}
.cta_area .cta_btns .cta_tel02{
    flex: 0 0 50%;
    width: auto;
}
.cta_area .cta_sub{
    flex: 1 1 auto;
    display: flex;
    gap: 4%;
}
.cta_area .cta_sub .cta_mail02,
.cta_area .cta_sub .cta_line02{
    flex: 1 1 0;
    width: auto;
}
/* 電話ボタンの波紋をボタンの高さに合わせる */
.cta_area .btn_animation:before,
.cta_area .btn_animation:after{
    height: 100%;
}
@media (max-width: 767px) {
    /* 背景に乗せず、画像の下に自然に並べる */
    .cta_area .cta_btns{
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        width: 92%;
        margin: -46% auto 0;
        display: block;
        flex-direction: row;
        gap: 0;
    }
    .cta_area .cta_btns .cta_tel02,
    .cta_area .cta_btns .cta_mail02,
    .cta_area .cta_btns .cta_line02{
        filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .3));
    }
    .cta_area .cta_btns .cta_tel02{
        flex: none;
        width: 100%;
        margin: 0 auto 3%;
    }
    .cta_area .cta_sub{
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 3%;
        margin: -7.5% auto;
    }
    .cta_area .cta_sub .cta_mail02,
    .cta_area .cta_sub .cta_line02{
        flex: 0 0 48%;
        width: 48%;
    }
.cta_area{
        padding-bottom: 8%;
    }
}
/* ---- 小CTA（cta_mini）：電話＋メール＋LINE ---- */
.cta_mini .cta_line02{
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .3));
    position: relative;
    width: 100%;
}
@media screen and (min-width:760px){
    .cta_mini{
        gap: 2%;
    }
    .cta_mini .cta_tel02{
        flex: 0 0 44%;
    }
    .cta_mini .cta_mail02,
    .cta_mini .cta_line02{
        flex: 1 1 0;
        width: auto;
    }
}
@media screen and (max-width:760px){
    .cta_mini .cta_mail02{
        margin-bottom: 14px;
    }
    .cta_mini .cta_line02{
        filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .3));
    }
}

/* ---- SP追従フッター：電話＋LINE ---- */
@media screen and (max-width:760px){
    .b_cta{
        align-items: center;
        gap: 2%;
    }
    .b_cta a{
        flex: 0 0 70%;
    }
    .b_cta a.b_line{
        flex: 1 1 0;
    }
    .b_cta a img,
    .b_cta a.b_line img{
        width: 100%;
    }
}

/*=======================
 フォーム変更分（5項目化）
=========================*/
.form_tbl input:not([type="submit"]),
.form_tbl textarea{
    box-sizing: border-box;
}
label span.any{
    margin-left: 10px;
    color: #fff;
    background: #9a9a9a;
    padding: 4px 10px 5px;
    font-size: 13px;
}
.form_tbl .form_note{
    margin-top: 4px;
    font-size: 13px;
    color: #666;
}
.form_tbl .form_error{
    margin-top: 4px;
    font-size: 13px;
    font-weight: bold;
    color: #e60012;
}
.form_tbl .form_error:empty{
    display: none;
}
.form_tbl input.is-error,
.form_tbl textarea.is-error{
    border-color: #e60012;
    background: #fff5f5;
}