@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Maru+Gothic:wght@700&display=swap');

/*共通*/

main img{
    width: 100%;
}
@media screen and (max-width: 768px){
    .only-pc{
        display: none;
    }
    .wrapper_original{
        max-width: 93.333vw;
        margin: 0 auto;
    }
}
@media screen and (min-width:769px){
    .only-sp{
        display: none;
    }
    .wrapper_original{
        max-width:77.599vw;
        margin: 0 auto;
    }
}

.h2{
    text-align: center;
    color: #2D6CAF;
    font-weight: 700;
    font-style: italic;
    position: relative;
    font-size: 9.333vw;
    margin-bottom: 11.467vw;
    font-family: "Noto Sans JP",sans-serif;
}
.h2::after{
    content: "";
    display: block;
    position: absolute;
    width: 8vw;
    height: 0.8vw;
    background-color: #2D6CAF;
    bottom: -5.333vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform:translateX(-50%);
}
.h2_small{
    font-size: 6.667vw;
}
@media screen and (min-width:769px){
    .h2{
        font-size: 3.5vw;
        margin-bottom: 5.417vw;
    }
    .h2::after{
        width: 2.928vw;
        height: 0.439vw;
        bottom: -2.489vw;
    }
    .h2_small{
        font-size: 2.928vw;
    }
}

/* kv */
/* sp */
.kv{
    position: relative;
    margin-bottom: 16vw;
}
.kv_float{
    position: absolute;
    top: 3.733vw;
    left: 2.667vw;
    z-index: 1;
}
.kv_ttl{
    margin-bottom: 1.333vw;
}
.kv_logo{
    display: block;
    width: 54.667vw;
    height: 17.6vw;
    background-color: #fff;
    padding: 1.333vw 2.667vw;
}
.kv_lead_bg{
    display: inline-block;
    padding: 0 2.667vw;
    background-color: #fff;
    margin-bottom: 2.667vw;
    height: 12vw;
}
.kv_lead_bg_wf{
    display: inline-block;
    padding: 0 2.667vw;
    background-color: #fff;
    margin-bottom: 2.667vw;
}
.kv_lead{
    color: #2D6CAF;
    font-size: 10vw;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-style: italic;
    line-height: 11vw;
}
.kv_lead_small{
    font-size: 7.467vw;
}
.kv_speadwifi{
    display: inline-block;
    width: 66.667vw;
    vertical-align: middle;
    margin-top: 1vw;
}
.kv_pointarea{
    display: flex;
}
.kv_point{
    position: relative;
    background-image: url(/content/dam/nttcom/hq/jp/business/lp/cp/con_manu/img/kv_point_bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 25.067vw;
    height:25.067vw;
    margin-right: 3.2vw;
    text-align:center;
}
.kv_point_txt{
    color: #FFFFFF;
    font-family: 'Zen Maru Gothic', sans-serif;
    position: absolute;
    font-weight: 700;
    top: 53%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    font-size: 3.5vw;
    display:inline-block;
    width:100%;
    line-height: 1.2;
}
.kv_point:nth-of-type(2) .kv_point_txt{
    top: 50%;
}
.point_txt_small{
    font-weight: 500;
    font-size: 2.667vw;
    /* (2.9vwが望ましい)&& */
}

/* pc */
@media screen and (min-width:769px){
    .kv_float{
        top: 5.564vw;
        left: 7.906vw;
    }
    .kv_ttl{
        margin-bottom:2.782vw;
    }
    .kv_logo{
        width: 23.792vw;
        height: auto;
        background-color:transparent;
        padding: 0;
    }
    .kv_lead_bg{
        padding: 0.586vw 1.464vw 0;
        line-height: 5.857vw;
        margin-bottom: 0.586vw;
        height: auto;
    }
    .kv_lead{
        font-size: 4.026vw;
        line-height: normal;
    }
    .kv_lead_small{
        font-size: 2.928vw;
    }
    .kv_speadwifi{
        width:29.283vw;
        margin-top: 0;
    }
    .kv_point{
        width: 13.177vw;
        height:13.177vw;
        margin-right:2.782vw;
    }
    .kv_point_txt{
        font-size: 1.9vw;
    }
    .point_txt_small{
        font-size: 1.5vw;
    }
}

/* about */
/* sp */
.about{
    margin-bottom: 17.333vw;
    font-family: 'Noto Sans JP', sans-serif;
}
.about_ttl_logo{
    display: inline-block;
    width: 60%;
    vertical-align: sub;
    margin-right: 1vw;
}
.about_maintxt{
    margin-bottom: 14.667vw;
}
.about_maintxt p{
    color: #444;
    font-size: 5.067vw;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
}
.about_ai{
    width: 80vw;
    margin: 0 auto 16.8vw;
}
.about_point{
    position: relative;
    width: 70.133vw;
    height: 70.133vw;
    margin: 0 auto 10.133vw;
}
.about_point::after{
    content: "";
    width: 100%;
    height: 100%;
    background-color: #DCF6F5;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    top: 0;
}
.about_point_logo{
    position: absolute;
    z-index: 1;
    width: 32vw;
    margin-bottom: 4.267vw;
    top:-4vw;
    left: 50%;
    transform:translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.about_point_ttl{
    color: #2D6CAF;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    font-weight: 700;
    font-size: 6vw;
    margin-bottom: 3.2vw;
    padding-top: 17.333vw;
}
.about_point_txt{
    color: #444;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    font-size: 4.5vw;
}

/* pc */
@media screen and (min-width:769px){
    .about{
        margin-bottom: 7.321vw;
    }
    .about_top{
        display: flex;
        justify-content: space-around;
        margin-bottom: 9vw;
    }
    .about_ttl_logo{
        margin-right: 0.5vw;
    }    
    .about_maintxt{
        margin-bottom: 0;
        width: 30.747vw;
    }
    .about_maintxt p{
        text-align: left;
        font-size: 1.903vw;
    }
    .about_ai{
        width: 36.603vw;
        margin: 0;
    }
    .about_ddl{
        display: flex;
        justify-content: space-around;
    }
    .about_point{
        position: relative;
        width: 24.158vw;
        height: 24.158vw;
        margin-bottom: 0 ;
    }
    .about_point_logo{
        width: 11.274vw;
        margin-bottom: 2.343vw;
    }
    .about_point_ttl{
        font-size: 2.1vw;
        margin-bottom: 1.757vw;
        padding-top: 5.49vw;
    }
    .about_point_txt{
        font-size: 1.464vw;
    }    
}

/* example */
/* sp */
.example{
    background-color: #DCF6F5;
    padding: 13.333vw 0 16vw;
}
.example_menulist{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8vw;
}
.example_menuitem{
    display: inline-block;
    position: relative;
    background-color: #2D6CAF;
    text-align: center;
    line-height: .9;
    width: 29.333vw;
    height: 29.333vw;
    border-radius: 50%;
    color: #DCF6F5;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 4.267vw;
    box-shadow: 0px 6px 0px #00000029;
    padding-top: 1.5vw;
}
.example_menuitem_arrow{
    display: inline-block;
    width: 4vw;
    height: 4vw;
    border-top: 0.8vw solid #DCF6F5;
    border-right: 0.8vw solid #DCF6F5;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.example_menuicon{
    display: inline-block;
    width: 6.667vw;
    margin-bottom: 2vw;
}
.example_content{
    background-color: #fff;
    border-radius: 5.333vw;
    padding: 5.333vw 4vw 9.333vw;
    margin-bottom: 10.667vw;
}
.example_content:last-of-type{
    margin-bottom: 0;
}
.example_content_ttl{
    position: relative;
    text-align: center;
    height: 29.333vw;
    margin-bottom: 5.333vw;
}
.example_ttlicon{
    display: inline-block;
    position: absolute;
    top: 2.667vw;
    width: 11.467vw;
    left: 50%;
    transform:translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.example_content_ttl .ttl_txt{
    display: inline-block;
    width: 100%;
    position: absolute;
    bottom: 4.667vw;
    left: 50%;
    transform:translateX(-50%);
    -webkit-transform: translateX(-50%);
    color: #024874;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 7.467vw;
}
.example_content_ttl::before{
    position: absolute;
    content: "";
    display: block;
    width: 29.333vw;
    height: 29.333vw;
    border-radius: 50%;
    background-color: #DCF6F5;
    top: 0;
    left: 50%;
    transform:translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.example_content_txt{
    color: #444;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 4.8vw;
    margin: 0 auto 7.467vw;
    width: 82.667vw;
}
.example_content_txt .text-blue{
    color: #3D53B2;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
}
.content_ddl_item{
    width: 69.333vw;
    margin: 0 auto 6vw;
}
.content_ddl_item:last-of-type{
    margin-bottom: 17.333vw;
}
.form_inner{
    position: relative;
}
.form_btn{
    display: block;
    width: 100%;
    text-align: center;
    line-height: 16vw;
    background-color: #E46F2D;
    box-shadow: 0px 7px 0px #00000029;
    border-radius: 8vw;
}
.form_btn_txt{
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 4.8vw;
    font-weight: 700;
}
.form_balloon{
    width: 26.667vw;
    position: absolute;
    top: -16vw;
    filter: drop-shadow(2px 3px 5px #4e4e4e);
}
/* pc */
@media screen and (min-width:769px){
    .example{
        padding: 7.321vw 0;
    }
    .example_menulist{
        margin-bottom: 2.196vw;
    }
    .example_menuitem{
        line-height: 4.5vw;
        width: 25.256vw;
        height: auto;
        border-radius: 1.464vw;
        font-size: 1.83vw;
        box-shadow:none;
        padding-top: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .example_menuitem.hover{
        opacity: .8;
    }
    .example_menuitem_arrow{
        width: 1.318vw;
        height:1.318vw;
        border-top: 3px solid #DCF6F5;
        border-right: 3px solid #DCF6F5;
    }
    .example_menuicon{
        width: 2.928vw;
        margin: 1vw 0 0 0.5vw;
    }
    .example_content{
        border-radius: 2.928vw;
        padding: 2.928vw 0 4.392vw;
        margin-bottom: 5.124vw;
    }
    .example_content_ttl{
        height: 10.981vw;
        margin-bottom:0.878vw;
    }
    .example_ttlicon{
        top: 0.878vw;
        width: 4.392vw;
    }
    .example_content_ttl .ttl_txt{
        bottom:2.5vw;
        font-size: 2vw;
    }
    .example_content_ttl::before{
        width: 10.981vw;
        height: 10.981vw;
    }
    .example_content_txt{
        font-size: 1.464vw;
        margin: 0 auto 42px;
        width: 63.25vw;
    }
    .example_content_ddl{
        display: flex;
        justify-content: space-between;
        width: 63.25vw;
        margin:0 auto 6.589vw;
    }
    .content_ddl_item{
        width: 19.766vw;
        margin: 0;
    }
    .content_ddl_item:last-of-type{
        margin-bottom:0;
    }
    .form_area{
        width: 68.96vw;
        margin: 0 auto;
    }
    .form_inner{
        position: relative;
    }
    .form_btn{
        line-height: 5.417vw;
        box-shadow: 0px 7px 0px #00000029;
        border-radius: 2.928vw;
    }
    .form_btn.hover{
        background-color: #C1612B;
        transform: translateY(7px);
        box-shadow: none;
    }
    .form_btn_txt{
        font-size:2.196vw;
    }
    .form_balloon{
        width: 10.615vw;
        left: 5vw;
        top:-5.857vw;
    }
}

/* price */
/* sp */
.price{
    padding: 13.333vw 0;
    font-family: 'Noto Sans JP', sans-serif;
}
.price_lead{
    background-color: #2D6CAF;
    border-radius: 2vw;
    width: 100%;
    line-height: 10.667vw;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 6.667vw;
    font-weight: 700;
    text-align: center;
    margin-bottom:3.333vw;
}
.price_ai{
    width: 18.133vw;
    margin: 0 auto 3.2vw;
}
.price_yen{
    color: #444;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 8vw;
    font-weight: 700;
    position: relative;
    text-align: center;
    width: 86.667vw;
    margin:0 auto 8vw;
}
.price_yen::before{
    content: "";
    width: 100%;
    height: 100%;
    background:linear-gradient(transparent 80%, #E2FF00 80%);
    position: absolute;
    z-index: -1;
    bottom:2vw;
    left: 0;
}
.price_yen .price_yen_red{
    color: #C40000;
    font-size: 15vw;
}
.price_yen .price_yen_small{
    font-size: 4.8vw;
}
.price_yen .price_yen_sup{
    font-size: 3.2vw;
    position: absolute;
    top: 8.5vw;
    right: 12vw;
}
.price_form_btn{
    display: block;
    width: 85.333vw;
    text-align: center;
    line-height: 16vw;
    background-color: #fff;
    border: solid 2px #E46F2D;
    box-shadow: 0px 7px 0px #00000029;
    border-radius: 8vw;
    margin: 0 auto;
}
.price_form_btn_txt{
    color: #E46F2D;
    font-size: 4.8vw;
    font-weight: 700;
}
/* pc */
@media screen and (min-width:769px){
    .price{
        padding: 7.321vw 0;
    }
    .price_lead{
        border-radius: 1.098vw;
        width: 69.546vw;
        line-height: 5.857vw;
        font-size: 3.66vw;
        margin:0 auto 2.635vw;
    }
    .price_ddl{
        display: flex;
        justify-content: space-between;
        width: 62.225vw;
        margin: 0 auto 3.66vw;
    }
    .price_ai{
        width: 12.299vw;
        margin: 0;
    }
    .price_yen{
        font-size: 3.5vw;
        width: 47.584vw;
        margin:0;
    }
    .price_yen::before{
        bottom:1vw;
    }
    .price_yen .price_yen_red{
        font-size:9.517vw;
    }
    .price_yen .price_yen_small{
        font-size: 2.196vw;
    }
    .price_yen .price_yen_sup{
        font-size: 1.757vw;
        top: 6.5vw;
        right: 5.5vw;
    }
    .price_form_btn{
        width: 63.69vw;
        line-height: 5.417vw;
        box-shadow: 0px 7px 0px #00000029;
        border-radius:2.928vw;
        margin: 0 auto;
    }
    .price_form_btn.hover{
        background-color: #EDEDED;
        transform: translateY(7px);
        box-shadow: none;
    }
    .price_form_btn_txt{
        font-size: 2.196vw;
    }
}
/* contact */
/* sp */
.contact{
    background-color: #FFFFF4;
    padding: 13.333vw 0;
    font-family: 'Noto Sans JP', sans-serif;
}
.contact_area{
    width: 80vw;
    margin: 0 auto;
}
.contact_h3{
    color: #363636;
    font-weight: 500;
    font-size: 5.067vw;
    margin-bottom: 4vw;
    text-align: center;
}
.contact_form_btn{
    display: block;
    width: 100%;
    line-height: 12vw;
    background-color: #3D53B2;
    border-radius: 6vw;
    text-align: center;
    margin-bottom: 17.333vw;
}
.contact_btn_txt{
    color: #fff;
    font-size: 4.533vw;
    font-weight: 700;
}
.tel_txt{
    color: #363636;
    font-size: 3.733vw;
    text-align: center;
}
.tel_num{
    width: 53.333vw;
    margin: 0 auto 4vw;
}
.tel_note{
    color: #363636;
    font-size: 2.667vw;
    text-align: center;
}

/* pc */
@media screen and (min-width:769px){
    .contact{
        padding: 7.321vw 0;
    }
    .contact_area{
        display: flex;
        width: 73.206vw;
    }
    .contact_h3{
        font-size: 2.05vw;
        margin-bottom: 4.392vw;
    }
    .contact_form,.contact_tel{
        width: 36.603vw;
    }
    .contact_tel .contact_h3{
        margin-bottom: 1.83vw;
    }
    .contact_form_btn{
        width: 35.505vw;
        line-height: 5.124vw;
        border-radius: 3.294vw;
        margin:0 auto;
    }
    .contact_form_btn.hover{
        opacity: .8;
    }
    .contact_btn_txt{
        font-size: 1.83vw;
    }
    .tel_txt{
        font-size: 1.318vw;
        margin-bottom: 2.343vw;
    }
    .tel_num{
        width: 24.158vw;
        margin: 0 auto 2.343vw;
    }
    .tel_note{
        font-size: 1.245vw;
    }
}

/* notes */
/* sp */
.notes{
    padding: 6.667vw 0 180px;
    position:relative;
}
.notes_txt{
    color: #767676;
    font-size: 12px;
    font-family: 'Noto Sans JP', sans-serif;
}
/* pc */
@media screen and (min-width:769px){
    .notes{
        padding: 3.66vw 0 180px;
    }
    .notes_txt{
        font-size: 14px;
    }    
}

.form_fl{
    position:fixed;
    bottom:100px;
    right: 20px;
    z-index: 100;
}
.form_fl_btn{
    width: 289px;
    /* 50.667vw */
}
/* pc */
@media screen and (min-width:769px){
    .form_fl_btn{
        width: 289px;
        /* 21.23vw */
    }
}

.liveagent_boxarea img{
   width:auto; 
}