/*-----------------------------------------------
【S001】『お問い合わせ』画面CSS
-----------------------------------------------*/
/* コンテナー */
.trial_reg_container {
    margin-bottom: 60px;
}

/* ページタイトル */
.trial_reg_left .inner_left .page_title {
    margin-bottom: 50px;
}

/* 左側のエリアの項目タイトル */
.trial_reg_left .topic_title {
    margin-bottom: 30px;
}

/* 各項目エリア */
.trial_reg_left .faq_area, .send_mail_area, .quit_area {
    margin-bottom: 90px;
}

/* 左側の各テキスト領域 */
.trial_reg_left .topic_text_area {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* 退会項目の退会日テキスト領域 */
.trial_reg_left .quit_date_area {
    position: relative;
    margin-bottom: 10px;
    padding-left: 15px;
    margin-left: 5px;
}
.trial_reg_left .quit_date_area::before {
    border-radius: 50%;
    width: 6px;
    height: 6px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.7em;
    content: "";
    background: rgb(150, 150, 150);
}

.trial_reg_left #quit_date {
    margin-bottom: 0px;
}

/* ラジオボタン */
.trial_reg_left .select_mail_topic_area ul {
    list-style: none;
    line-height: 15px;
}

.send_mail_area button[disabled]{
    opacity: 30%;
}

/* 各ボタン領域 */
.trial_reg_left .btn_area {
    position: relative;
}

/* ボタン */
.trial_reg_left .start_btn {
    border-radius: 30px;
    background-color: rgb(255,155,000);
    color: white;
    border: none;
    outline: none;
    font-size: 16px;
    padding-left: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 200px;
    position: absolute;
    right: 0px;
    vertical-align: middle;
}
.trial_reg_left .start_btn:hover {
    color: white;
    text-decoration: none;
}

/* ボタンの矢印マーク */
.trial_reg_left .btn_area .icon_arrow {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    background-image: url(../../img/arrow/ico-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 1200px) {

    /* 左側のエリアのインナー */
    .inner_left {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* 左側のエリアの項目タイトル */
    .trial_reg_left .topic_title {
        font-size: 3vh;
    }

    /* 左側の各テキスト領域 */
    .trial_reg_left .topic_text_area {
        font-size: 2vh;
        line-height: 3.5vh;
        margin-bottom: 10px;
    }

    /* ラジオボタン */
    .trial_reg_left .select_mail_topic_area ul {
        list-style: none;
        line-height: 3.5vh;
        font-size: 2vh;
    }

    @media (min-height: 1025px) {

        /* ボタン */
        .trial_reg_left .start_btn {
            font-size: 22px;
            padding-left: 22px;
            width: 300px;
        }
    
        /* ボタンの矢印マーク */
        .trial_reg_left .btn_area .icon_arrow {
            right: 7px;
            top: 6px;
            width: 32px;
            height: 32px;
        }
    }
    
    @media (max-height: 735px) {
        /* 左側のエリアの項目タイトル */
        .trial_reg_left .topic_title {
            font-size: 16px;
        }

        /* 左側の各テキスト領域 */
        .trial_reg_left .topic_text_area {
            font-size: 12px;
            line-height: 18px;
            margin-bottom: 10px;
        }

        /* ボタン */
        .trial_reg_left .start_btn {
            font-size: 12px;
            padding-left: 12px;
            width: 150px;
        }
    
        /* ボタンの矢印マーク */
        .trial_reg_left .btn_area .icon_arrow {
            right: 3px;
            top: 3px;
            width: 18px;
            height: 18px;
        }
    }
}

@media (max-width: 400px) {
    /* ボタン */
    .trial_reg_left .start_btn {
        width: 200px;
    }

    @media (min-height: 1025px) {
        /* ボタン */
        .trial_reg_left .start_btn {
            font-size: 22px;
            padding-left: 22px;
            width: 300px;
        }
    
        /* ボタンの矢印マーク */
        .trial_reg_left .btn_area .icon_arrow {
            right: 7px;
            top: 6px;
            width: 32px;
            height: 32px;
        }
    }
    
    @media (max-height: 735px) {
        /* ボタン */
        .trial_reg_left .start_btn {
            font-size: 12px;
            padding-left: 12px;
            width: 150px;
        }
    
        /* ボタンの矢印マーク */
        .trial_reg_left .btn_area .icon_arrow {
            right: 3px;
            top: 3px;
            width: 18px;
            height: 18px;
        }
    }
}