@charset "utf-8";
/**************************************/
/*    共通レイアウト
/**************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
html{min-height: 100vh;}
body{
    font-family: 'Noto Sans JP', serif;
    position: relative;
    font-size: 16px;
    min-height: 100vh;
}
@media screen and (max-width: 767px) {
    body{
        font-size: 14px;
    }
}

/**************************************/
/*    ローディング中
/**************************************/
#loading {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.spinner_box {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: spinner_anime 0.8s infinite linear;
}

@keyframes spinner_anime {
    100% {
        transform: rotate(360deg);
    }
}


/**************************************/
/*    button
/**************************************/
.btn_common{
    display: block;
    color:#FFF;
    line-height: 40px;
    text-align: center;
    margin:24px auto;
    width:240px;
    background-color: #0185e2;
    border:none;
    border-radius: 4px;
    box-shadow:2px 2px 4px #00497c;
    cursor: pointer;
}


/**************************************/
/*    title
/**************************************/
h2{
    font-size:32px;
    line-height: 42px;
}
h2.title_icon{
    padding-left:48px;
    background-image:url('/img/icon.png');
    background-size:40px 40px;
    background-position: left center;
    background-repeat: no-repeat;
}
h2.sub_title{
    position: relative;
    font-size:24px;
    text-align: center;
    margin:24px auto 40px;
    width:96%;
    max-width:480px;
    border-bottom:solid 4px #0185e2;
}

h3{
    font-size:24px;
}

.title_caption{
    font-size:24px;
    font-weight: bold;
    line-height: 200%;
    text-align: center;
    margin:24px 40px;
}


@media screen and (max-width: 767px) {
    h2{
        font-size:28px;
        line-height: 42px;
    }
    h2.title_icon{
        padding-left:48px;
        background-image:url('/img/icon.png');
        background-size:40px 40px;
        background-position: left center;
        background-repeat: no-repeat;
    }
    h2.sub_title{
        position: relative;
        font-size:20px;
        text-align: center;
        margin:24px auto 16px;
        width:96%;
        max-width:480px;
        border-bottom:solid 4px #0185e2;
    }
    .title_caption{
        font-size:20px;
        line-height: 200%;
        text-align: center;
        margin:24px 40px;
    }
}

/**************************************/
/*    header / footer
/**************************************/
/* header */
header {
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    height: 72px;
    border-bottom:solid 1px #EFEFEF;
    background-color: rgba(255,255,255,0.5);
    z-index: 10;
}
header .header_layout{
    margin:0px auto;
    width: 100%;
    max-width:1200px;
}
header .logo_img{
    display: block;
    width:240px;
    height: 72px;
    background-image:url('/img/logo.png');
    background-position:12px 12px;
    background-repeat:no-repeat;
    background-size:auto 48px;
}
header .logo_img a{
    display: block;
    width: 100%;
    height: 100%;
}

header nav{
    line-height: 72px;
    padding-right:20px;
    width: calc(100% - 240px);
}
header nav ul{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
header nav ul li{
    display: block;
    font-weight: bold;
    text-align: center;
    width:120px;
    transition: all 0.3s;
    cursor: pointer;
}
header nav ul li:hover{
    color:#0185e2;
    border-bottom:solid 4px #0185e2;
}
header nav ul li a{
    display: block;
    width:120px;
    height:72px;
}
header .sp_contact_box{
    display: none;
}
@media screen and (max-width: 767px) {
    header{
        height: 64px;
    }
    header nav{
        display: none;
    }
    header .logo_img{
        display: block;
        width:160px;
        height: 64px;
        background-image:url('/img/logo.png');
        background-position:12px 12px;
        background-repeat:no-repeat;
        background-size:auto 40px;
    }
    header .sp_contact_box{
        display: flex;
        width:calc(100% - 160px);
        justify-content: flex-end;
    }
    header .sp_contact_box a{
        display: block;
        color:#0185e2;
        font-weight: bold;
        text-align: center;
        padding-top: 40px;
        width: 72px;
        height: 72px;
        background-image:url('/img/icon/contact.png');
        background-size:40px 40px;
        background-repeat: no-repeat;
        background-position: center 4px;
    }
}


/* footer */
footer{
    text-align: center;
    padding:20px 0px;
    background-color:#EFEFEF;
}
footer .footer_layout{
    margin:0px auto 20px;
    width:100%;
    max-width:1200px;
}
footer .footer_layout ul{
    display: flex;
    justify-content: center;
}
footer .footer_layout ul li{
    margin:0px 8px;
}
footer .footer_layout ul li a{
    text-decoration: underline;
}
footer .footer_layout ul li a:hover{
    color:#0185e2;
}
footer .footer_copyrights_box{
    text-align: center;
}

@media screen and (max-width: 767px) {
    footer .footer_layout ul li a{
        font-size:12px;
    }  

}

/**************************************/
/*    サイトレイアウト
/**************************************/
main{
    width:100%;
}

#contents{
    padding:16px;
    margin:0px auto;
    width:100%;
    max-width: 1200px;
}

.btn_top_scroll{
    position: fixed;
    bottom:24px;
    right:24px;
    color:#FFF;
    font-size:20px;
    line-height:48px;
    text-align: center;
    width:48px;
    height:48px;
    background-color: rgba(1,133,226,1);
    border-radius: 12px;
    cursor: pointer;
}

/* recaptcha no display */
.grecaptcha-badge{
    display: none!important;
}

@media screen and (max-width: 767px) {
    .btn_top_scroll{
        bottom:80px;
        right:8px;
    }
}
.main_visual .main_divider {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    line-height: 0;
    transform: translateY(1px) scaleY(-1);
}
.main_divider svg {
    display: block;
    width: 100%;
    height: 40px;
}


/********************************/
/* TOP                         */
/********************************/
#top .main_visual{
    position: relative;
    margin-bottom:32px;
    width:100%;
    height: 432px;
    padding-bottom:40px;
    background-image:url('/img/main_visual.jpg');
    background-size:cover;
    background-position:center 20%;
    background-repeat: no-repeat;
}

/* fix for sp */
@media screen and (max-width: 767px) {
    .main_visual{
        flex-flow: column;
        padding-bottom:0px;
    }
}


#contents .feature_layout{
    margin-bottom:16px;
}
.feature_layout .feature_box{
    margin:0px calc(10% / 6);
    padding:24px;
    width:30%;
    min-height: 360px;
    border:solid 1px #DDD;
    border-radius: 8px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    background-position:center bottom;
    background-repeat: no-repeat;
    background-size: 60% auto;
}
.feature_layout .feature_box.feature_1{
    background-image: url('/img/feature/feature_1.png');
}
.feature_layout .feature_box.feature_2{
    background-image: url('/img/feature/feature_2.png');
}
.feature_layout .feature_box.feature_3{
    background-image: url('/img/feature/feature_3.png');
}
.feature_layout .feature_box h4{
    font-size:20px;
    text-align: center;
    margin-bottom:24px;

}
.feature_layout .feature_box .feature_detail{
    font-size:16px;
    line-height: 150%;
}

@media screen and (max-width: 767px) {
    .feature_layout{
        flex-flow: column;
    }
    .feature_layout .feature_box{
        width:96%;
        margin-bottom:16px;
    }
}


#contents .function_layout{
    margin-bottom: 16px;
}
.function_layout ul {
    margin-top:24px;
}
.function_layout ul li{
    font-size:14px;
    line-height: 200%;
}
@media screen and (max-width: 767px) {
    #contents .function_layout{
        padding:16px;
    }
    .function_layout ul {
        margin-top:0px;
    }
    .function_layout+div{
        padding:8px;
    }
}


#contents .price_layout{
    max-width:640px;
    width:96%;
    min-height: 320px;
    padding:24px;
    margin:0px auto 16px;
    border:solid 1px #DDD;
    border-radius: 8px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}
.price_layout h5.price_sub_title{
    position: relative;
    font-size:20px;
    line-height: 40px;
    text-align: center;
    margin:0px auto 16px;
    width:96%;
    background-color:rgba(1,133,226,0.2);
    border-radius: 8px;
}
.price_layout .price_text{
    position: relative;
    font-size:32px;
    font-weight: bold;
    text-align: center;
}
.price_layout .price_text span{
    font-size:14px;
}
.price_layout ul.price_appeal{
    margin-top:32px;
}
.price_layout ul.price_appeal li{
    font-size:20px;
    font-weight: bold;
    line-height: 40px;
    padding-left:54px;
    background-image:url('/img/check.png');
    background-size:40px 40px;
    background-position: left center;
    background-repeat: no-repeat;
}

#contents .price_layout .plan_sub_title{
    position: relative;
    font-size:20px;
    line-height: 40px;
    text-align: center;
    margin:0px auto 16px;
    width:96%;
    background-color:rgba(226,51,1,0.2);
    border-radius: 8px;
}
.price_layout .plan_text{
    position: relative;
    font-size:18px;
    font-weight: bold;
    text-align: center;
    margin-bottom:16px;
}
.price_layout .plan_detail_box{
    display: flex;
    width:100%;
}
.price_layout .plan_detail_box .plan_detail_title{
    font-weight: bold;
    line-height: 40px;
    width:calc(100% / 3);
    border-bottom:solid 1px #999;
}
.price_layout .plan_detail_box .plan_detail_content{
    font-size: 14px;
    line-height: 32px;
    width:calc(100% / 3);
    border-bottom:dotted 1px #999;
}
.price_layout p{
    font-size:14px;
    line-height: 20px;
    margin-bottom:8px;
}

@media screen and (max-width: 767px) {
    #contents .price_layout{
        min-height: 240px;
    }
    .price_layout h5.price_sub_title{
        font-size:14px;
    }
    .price_layout ul.price_appeal li{
        font-size:14px;
        font-weight: bold;
        line-height: 32px;
        padding-left:32px;
        background-image:url('/img/check.png');
        background-size:16px 16px;
        background-position: left center;
        background-repeat: no-repeat;
    }
}

#contents .introduction_flow_layout{
    margin-bottom:16px;
}
.introduction_flow_layout h4{
    font-size:20px;
    font-weight: bold;
    text-align: center;
    margin-bottom:16px;
}
.introduction_flow_layout .introduction_flow_box{
    position: relative;
    max-width:640px;
    width:96%;
    min-height: 240px;
    padding:24px 24px 24px 160px;
    margin:0px auto 64px;
    border:solid 1px #DDD;
    border-radius: 8px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    background-size: 120px auto;
    background-position: 24px center;
    background-repeat: no-repeat;
}
.introduction_flow_layout .introduction_flow_box:after{
    position: absolute;
    left: 48%;
    bottom: -48px;
    content: "▼";
    color:#AAA;
    font-size:40px;
}
.introduction_flow_layout .introduction_flow_box:last-child{
    margin-bottom:48px;
}
.introduction_flow_layout .introduction_flow_box:last-child:after{
    display: none;
}
.introduction_flow_layout .introduction_flow_box.flow_1_1{
    background-image:url('/img/flow/flow_1_1.png');
}
.introduction_flow_layout .introduction_flow_box.flow_1_2{
    background-image:url('/img/flow/flow_1_2.png');
}
.introduction_flow_layout .introduction_flow_box.flow_1_3{
    background-image:url('/img/flow/flow_1_3.png');
}
.introduction_flow_layout .introduction_flow_box.flow_1_4{
    background-image:url('/img/flow/flow_1_4.png');
}
.introduction_flow_layout .introduction_flow_box.flow_2_1{
    background-image:url('/img/flow/flow_2_1.png');
}
.introduction_flow_layout .introduction_flow_box.flow_2_2{
    background-image:url('/img/flow/flow_2_2.png');
}
.introduction_flow_layout .introduction_flow_box.flow_2_3{
    background-image:url('/img/flow/flow_2_3.png');
}
.introduction_flow_layout .introduction_flow_box.flow_2_4{
    background-image:url('/img/flow/flow_2_4.png');
}
.introduction_flow_layout .introduction_flow_box.flow_2_5{
    background-image:url('/img/flow/flow_2_5.png');
}
.introduction_flow_layout .introduction_flow_box .flow_step{
    position: absolute;
    top:-8px;
    left:-8px;
    color:#FFF;
    font-size:20px;
    font-weight: bold;
    text-shadow:1px 1px 2px rgba(0,0,0,0.5);
    padding:8px 10px;
    background-color:#0185e2;
    border-radius: 4px;
}
.introduction_flow_layout .introduction_flow_box h5{
    position: relative;
    font-size: 16px;
    line-height: 40px;
    text-align: left;
    padding-left:16px;
    margin: 0px auto 8px;
    width: 96%;
    background-color: rgba(1, 133, 226, 0.2);
    border-radius: 8px;
}

@media screen and (max-width: 767px) {
    .introduction_flow_layout h4{
        font-size:16px;
        font-weight: bold;
        text-align: center;
        margin-bottom:16px;
    }
    .introduction_flow_layout .introduction_flow_box{
        padding:24px 24px 24px 100px;
        margin:0px auto 64px;
        border:solid 1px #DDD;
        border-radius: 8px;
        box-shadow:0px 0px 10px rgba(0,0,0,0.2);
        background-size: 80px auto;
        background-position: 12px center;
        background-repeat: no-repeat;
    }
    .introduction_flow_layout .introduction_flow_box h5{
        font-size: 14px;
        padding-left:8px;
    }
}

#contents .top_contact_layout{
    position: relative;
    padding:24px;
    /*
    max-width:960px;
    width:96%;
    min-height: 240px;
    margin:0px auto 64px;
    border:solid 1px #DDD;
    border-radius: 8px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    */
}
.top_contact_layout h4{
    font-size: 24px;
    text-align: center;
    margin-bottom:24px;
}
.top_contact_layout .top_contact_description{
    font-size:18px;
    text-align: center;
    line-height: 150%;
}
.top_contact_layout .top_contact_box{
    display: flex;
}
.top_contact_layout a.top_application_link{
    position: relative;
    display: block;
    color:#FFF;
    font-size:20px;
    font-weight: bold;
    line-height: 32px;
    text-align: center;
    margin:24px auto;
    padding:112px 16px 0px 16px;
    width:480px;
    height: 200px;
    border-radius: 8px;
    background-color: rgba(1, 133, 226, 0.8);
    background-image: url('/img/icon/application.png');
    background-size: 96px auto;
    background-position: center 16px;
    background-repeat: no-repeat;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.top_contact_layout a.top_application_link span{
    display: inline-block;
    position: absolute;
    top: 40%;
    right:8px;
    font-weight: bold;
    line-height: 40px;
    width:48px;
    height:48px;
    border: solid 4px #FFF;
    border-radius: 24px;
}
.top_contact_layout a.top_application_link span::after{
    display: block;
    position: absolute;
    top:12px;
    left: 8px;
    content:"";
    width: 16px;
    height: 16px;
    border-right:solid 4px #FFF;
    border-top:solid 4px #FFF;
    transform: rotate(45deg);
}
.top_contact_layout a.top_contact_link{
    position: relative;
    display: block;
    color:#FFF;
    font-size:20px;
    font-weight: bold;
    line-height: 32px;
    text-align: center;
    margin:24px auto;
    padding:112px 16px 0px 16px;
    width:480px;
    height: 200px;
    border-radius: 8px;
    background-color: rgba(1, 133, 226, 0.8);
    background-image: url('/img/icon/calling.png');
    background-size: 96px auto;
    background-position: center 16px;
    background-repeat: no-repeat;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.top_contact_layout a.top_contact_link span{
    display: inline-block;
    position: absolute;
    top: 40%;
    right:8px;
    font-weight: bold;
    line-height: 40px;
    width:48px;
    height:48px;
    border: solid 4px #FFF;
    border-radius: 24px;
}
.top_contact_layout a.top_contact_link span::after{
    display: block;
    position: absolute;
    top:12px;
    left: 8px;
    content:"";
    width: 16px;
    height: 16px;
    border-right:solid 4px #FFF;
    border-top:solid 4px #FFF;
    transform: rotate(45deg);
}
@media screen and (max-width: 767px) {
    .top_contact_layout{
        padding: 0px!important;
    }
    .top_contact_layout .top_contact_box{
        display: flex;
        flex-direction: column;
    }
    .top_contact_layout a.top_application_link{
        font-size:16px;
        width:320px;
        margin-bottom:0px;
    }
    .top_contact_layout a.top_application_link span{
        display: inline-block;
        position: absolute;
        top: 40%;
        right:8px;
        font-weight: bold;
        line-height: 24px;
        width:32px;
        height:32px;
        border: solid 3px #FFF;
        border-radius: 16px;
    }
    .top_contact_layout a.top_application_link span::after{
        display: block;
        position: absolute;
        top:8px;
        left: 6px;
        content:"";
        width: 12px;
        height: 12px;
        border-right:solid 3px #FFF;
        border-top:solid 3px #FFF;
        transform: rotate(45deg);
    }
    .top_contact_layout a.top_contact_link{
        font-size:16px;
        width:320px;
    }
    .top_contact_layout a.top_contact_link span{
        display: inline-block;
        position: absolute;
        top: 40%;
        right:8px;
        font-weight: bold;
        line-height: 24px;
        width:32px;
        height:32px;
        border: solid 3px #FFF;
        border-radius: 16px;
    }
    .top_contact_layout a.top_contact_link span::after{
        display: block;
        position: absolute;
        top:8px;
        left: 6px;
        content:"";
        width: 12px;
        height: 12px;
        border-right:solid 3px #FFF;
        border-top:solid 3px #FFF;
        transform: rotate(45deg);
    }
}


/********************************/
/* 利用規約                     */
/********************************/
#terms .main_visual{
    position: relative;
    margin-bottom:32px;
    width:100%;
    height: 432px;
    padding-bottom:40px;
    background-image:url('/img/main_visual.jpg');
    background-size:cover;
    background-position:center 20%;
    background-repeat: no-repeat;
}

#terms .terms_layout{
    margin:0px auto;
    width:100%;
    max-width:960px;
    min-width:300px;
}
#terms .terms_layout h2{
    font-size:28px;
}
#terms .terms_layout h3{
    font-size:24px;
    margin:16px 0px;
}
#terms .terms_layout h4{
    font-size:20px;
    margin:8px 0px;
}
#terms .terms_layout p{
    line-height: 150%;
}

/********************************/
/* 特定商取引法に関する表記        */
/********************************/
#tokusho .main_visual{
    position: relative;
    margin-bottom:32px;
    width:100%;
    height: 432px;
    padding-bottom:40px;
    background-image:url('/img/main_visual.jpg');
    background-size:cover;
    background-position:center 20%;
    background-repeat: no-repeat;
}

#tokusho .tokusho_layout{
    margin:48px auto;
    width:100%;
    max-width:960px;
    min-width:300px;
}
#tokusho .tokusho_layout .tokusho_box{
    margin-bottom:8px;
    border-bottom: solid 2px #333
}
#tokusho .tokusho_layout .tokusho_box h3{
    font-size:20px;
    line-height: 48px;
    border-bottom: dotted 2px #333;
}
#tokusho .tokusho_layout .tokusho_box .tokusho_detail{
    line-height: 24px;
    padding:16px 0px;
}


/********************************/
/* お問い合わせ                   */
/********************************/
#contact .main_visual{
    position: relative;
    margin-bottom:32px;
    width:100%;
    height: 432px;
    padding-bottom:40px;
    background-image:url('/img/main_visual.jpg');
    background-size:cover;
    background-position:center 20%;
    background-repeat: no-repeat;
}

#contact .contact_form_layout{
    margin:0px auto;
    width:100%;
    max-width:640px;
    min-width:300px;
}
.contact_form_layout .contact_form{
    padding-top:24px;
    width:100%;
}
.contact_form_layout .contact_form h3{
    font-size:16px;
    line-height: 32px;
    text-align: left;
}
.contact_form_layout .contact_form input[type="text"]{
    padding:0px 8px;
    font-size:14px;
    width:100%;
    height: 40px;
    border:solid 1px #999;
    border-radius:4px;
}
.contact_form_layout .contact_form input[type="text"]{
    padding:0px 8px;
    font-size:14px;
    width:100%;
    height: 40px;
    border:solid 1px #999;
    border-radius:4px;
}
.contact_form_layout .contact_form input[type="email"]{
    padding:0px 8px;
    font-size:14px;
    width:100%;
    height: 40px;
    border:solid 1px #999;
    border-radius:4px;
}
.contact_form_layout .contact_form input[type="tel"]{
    padding:0px 8px;
    font-size:14px;
    width:100%;
    height: 40px;
    border:solid 1px #999;
    border-radius:4px;
}
.contact_form_layout .contact_form select{
    padding:0px 8px;
    font-size:14px;
    width:100%;
    height: 40px;
    border:solid 1px #999;
    border-radius:4px;
}
.contact_form_layout .contact_form textarea{
    padding:8px 8px;
    font-size:14px;
    width:100%;
    min-height: 160px;
    line-height: 120%;
    border:solid 1px #999;
    border-radius:4px;
    font-family: 'Noto Sans JP', serif;
    background-color: #fff;
}

.contact_form_layout .contact_form .contact_form_split:nth-child(1){
    width:100%;
    padding-right:2%;
}
.contact_form_layout .contact_form .contact_form_split:nth-child(2){
    width:100%;
    padding-left:2%;
}

.contact_form_layout .btn_contact_submit{
    display: block;
    color:#FFF;
    line-height: 40px;
    margin:24px auto;
    width:240px;
    background-color: #0185e2;
    border:none;
    border-radius: 4px;
    box-shadow:2px 2px 4px #00497c;
    cursor: pointer;
}
.contact_form_layout .btn_contact_submit:disabled{
    cursor: auto;
    background-color:#BBB;
    box-shadow:none;
}

.contact_form_layout label{
    cursor: pointer;
}