@charset "UTF-8";

#contact_page{
    padding-top: 206px;
    @media (max-width: 896px) {
        padding-top: 120px;
    }
    .head_ttl{
        margin-top: 104px;
        @media (max-width: 896px) {
            margin-top: 60px;
        }
    }
    .contact_content{
        max-width: 868px;
        margin: 120px auto 0;
        @media (max-width: 896px) {
            margin-top: 60px;
        }
        .txt{
            padding: 0 140px;
            background: linear-gradient(90deg, #003F8C, #D71918);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            font-size: 24px;
            line-height: 2;
            text-align: center;
            @media (max-width: 896px) {
                padding: 0 5%;
                font-size: 18px;
            }
        }
        .formarea{
            padding-top: 80px;
            margin-top: 80px;
            border-top: 1px solid #fff;
            @media (max-width: 896px) {
                padding: 0 5%;
                margin-top: 40px;
            }
        }
        .head{
            display: flex;
            align-items: center;
            margin-top: 40px;
            margin-bottom: 16px;
            .form_item{
                background: linear-gradient(90deg, #003F8C, #D71918);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
                font-size: 24px;
            }
            .required{
                padding: 2px 4px 3px;
                margin-left: 8px;
                border-radius: 4px;
                background-color: #fff;
                line-height: 1;
                b{
                    background: linear-gradient(90deg, #003F8C, #D71918);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                    color: transparent;
                    font-size: 12px;
                }
            }
        }
        .item{
            margin: 0;
            .select_box{
                width: 306px;
                border-radius: 6px;
                background-color: #fff;
                .select_item{
                    display: block;
                    width: 100%;
                    height: 100%;
                    padding: 10px;
                    border: 0;
                    border-radius: 6px;
                }
            }
            .input_area{
                width: 100%;
                height: 46px;
                padding: 0 10px;
                line-height: 46px;
                background-color: #fff;
                border-radius: 6px;
                border: 0;
                box-shadow: none;
            }
            .content{
                width: 100%;
                min-height: 250px;
                max-height: 250px;
                height: 250px;
                padding: 10px;
                border-radius: 6px;
                background-color: #fff;
                line-height: 1.75;
            }
        }
    }

    .pp_txt{
        margin-top: 48px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        text-align: center;
        @media (max-width: 896px) {
            margin-top: 32px;
            font-size: 14px;
        }
        a{
            position: relative;
            display: inline-block;
            background: linear-gradient(90deg, #003F8C, #D71918);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            &:before{
                content: "";
                position: absolute;
                bottom: -2px;
                left: 0;
                width: 100%;
                height: 1px;
                background: linear-gradient(90deg, #003F8C, #D71918);
            }
        }
    }

    .submit_btn{
        position: relative;
        display: block;
        width: 322px;
        padding: 24px 28px;
        margin: 32px auto 0;
        background: linear-gradient(90deg, #003F8C 0%, #D71918 100%);
        border-radius: 32px;
        border: 0;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
        color: #fff;
        letter-spacing: .04em;
        @media (min-width: 897px) {
            transition: .4s ease;
        }
        @media (max-width: 896px) {
            width: 90%;
            margin-top: 20px;
            font-size: 16px;
        }
        &:before{
            content: "";
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translate(0,-50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #fff;
            background-image: url(../../img/common/icon_arrow_link_grad.svg);
            background-size: 8px;
            background-position: 55% center;
            background-repeat: no-repeat;
        }
        &:after{
            content: "";
            position: absolute;
            top: 50%;
            right: 10px;
            z-index: 2;
            transform: translate(-5px,-50%);
            opacity: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-image: url(../../img/common/icon_arrow_link.svg);
            background-size: 8px;
            background-position: 55% center;
            background-repeat: no-repeat;
            transition: .5s ease;
        }
        &:hover{
            background: #fff;
            &:before{
                background: linear-gradient(90deg, #003F8C 0%, #D71918 100%);
                transition: .5s ease;
            }
            &:after{
                opacity: 1;
                transform: translate(0,-50%);
            }
            .send_txt{
                display: inline-block;
                background: linear-gradient(90deg, #003F8C, #D71918);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
            }
        }
    }

    .contact{
        padding-top: 0;
        @media (max-width: 896px) {
            margin-top: 40px;
        }
    }
}

#pp_page{
    padding-top: 206px;
    @media (max-width: 896px) {
        padding-top: 120px;
    }
    .head_ttl{
        margin-top: 104px;
        @media (max-width: 896px) {
            margin-top: 60px;
        }
    }
    .pp_content{
        max-width: 870px;
        margin: 120px auto 0;
        @media (max-width: 896px) {
            padding: 0 5%;
            margin: 60px 0 0;
        }
        .head{
            font-size: 24px;
            font-weight: 600;
            @media (max-width: 896px) {
                font-size: 18px;
            }
            span{
                display: inline-block;
                background: linear-gradient(90deg, #003F8C, #D71918);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
            }
        }
        .head{
            display: flex;
            align-items: center;
            margin-top: 120px;
            @media (max-width: 896px) {
                margin-top: 70px;
            }
            .line{
                position: relative;
                flex: 1;
                margin-left: 32px;
                @media (max-width: 896px) {
                    margin-left: 16px;
                }
                &:before{
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translate(0,-50%);
                    width: 100%;
                    height: 1px;
                    background-color: #fff;
                }    
            }
        }
        .txt{
            margin-top: 52px;
            background: linear-gradient(90deg, #003F8C, #D71918);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            max-width: 486px;
            margin-left: auto;
            font-size: 16px;
            font-weight: 600;
            line-height: 2;
            letter-spacing: .04em;
            @media (max-width: 896px) {
                margin-top: 32px;
                font-size: 14px;
            }
        }
    }
}