@charset "utf-8";
/*2021.06リニューアル*/
/*-----------------------------
汎用
-----------------------------*/
.note{
font-size: 1.3rem;
color: #666;
display: block;
padding: 0.8em 0 0;
}
.arrow{
margin: 1em 0 0 0.8em;
position: relative;
padding-left: 1rem;
font-size: 1.2rem;
display: block;
}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
/*-----------------------------
グランドナビエリア
-----------------------------*/
#global_nav_pc nav{
width: 100%;
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
#global_nav_pc nav ul{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0 auto;
width: 960px;
}
#global_nav_pc nav ul li{
font-size: 16px;
width: 20%;
display: table-cell;
vertical-align: middle;
background: url(../img/content/4g_nav_div_line.gif) no-repeat;
}
#global_nav_pc nav ul li:last-child{
background: #fd6103;
}
#global_nav_pc nav ul li:last-child:hover{
opacity: 0.8;
}
#global_nav_pc nav ul li a{
display: block;
padding: 6%;
text-decoration: none;
}
ul li a.document_request{
color: #fff;
font-weight: bold;
}
/*-----------------------------
TOPエリア
-----------------------------*/
#top_wap{
background: url("../img/content/4GLP_main.png") no-repeat top / cover;
width: 100%;
height: 600px;
}
#top_wap .top_inner{
max-width: 1260px;
margin: 0 auto;
height: 100%;
}
#top_wap .top_inner .top_txt{
background: rgba(255,255,255,0.5);
padding: 1% 2%;
position: relative;
top: 12%;
text-align: left;
width: 730px;
line-height: 1.5;
color: #333;
}
#top_wap .top_inner .top_txt h1{
font-size: 2.8rem;
font-weight: bold;
}
#top_wap .top_inner .top_txt h1 img{
background-color: #fff;
display: block;
width: 60%;
padding: 3%;
margin: 2% 0 0;
}
.catch{
font-size: 1.8em;
font-weight: bold;
margin: 6% 0 0;
}
#feature #feature_ttl{
background-color: #fff;
}
/*-----------------------------
企業スライダーエリア
-----------------------------*/
#slide_company{
background-color: #014190;
overflow: hidden;
padding: 0 0 1%;
}
#slide_company h3{
color: #fff;
font-size: 1.8rem;
font-weight: bold;
padding: 1%;
}
.row{
display: -ms-grid;
-ms-grid-columns: min-content;
background: #014190;
}
.autoplay-slider {
display: flex;
min-width: 100%;
width: min-content;
animation: 50s linear infinite sliderAnimation;
}
.slide {
height: 84px;
width: 220px;
margin: 0 10px;
position: relative;
}
@keyframes sliderAnimation {
100% {
transform: translateX(-50%);
}
}
/*-----------------------------
VeriTrans4Gの特徴
-----------------------------*/
#feature{
background: #fff;
padding: 0;
}
#feature #feature_ttl{
height: auto;
}
#feature #feature_ttl h2{
color: #003c88;
font-size: 4rem;
width: 100%;
font-weight: 500;
}
#feature #feature_ttl h2 img{
width: auto;
vertical-align: -2px;
padding: 0 4px;
}
#feature .feature2021_h3{
width: 950px;
height: 87px;
position: relative;
margin: 0 auto 35px;
text-align: center;
background-color: #009ee5;
color: #fff;
font-size: 3.5rem;
font-weight: normal;
vertical-align: middle;
line-height: 1.1;
}
#feature_ttl{
height: auto;
}
#feature01, #feature02, #feature03, #feature04, #feature05{
padding: 60px 0 70px;
}
#feature02, #feature04{
background: #ecf8fe;
}
#feature p, #scene p{
width: 940px;
line-height: 2.8rem;
}
/*1.豊富な決済手段を一括導入・一括管理*/
#feature #logo{
margin: 20px  auto;
}
#feature #point{
background-color: #fff;
display: flex;
margin: 0 auto;
}
#feature #point dl{
width: calc(33.3% - 10px);
margin: 5px;
}
#feature #point dt {
color: #fff;
background-color: #009ee5;
margin: 0 20% 4%;
padding: 0.8rem 0;
}
#feature #point dd p{
width: 100%;
padding: 4% 0 0;
font-size: 1.6rem;
}
/*2.都度課金、継続課金双方に対応*/
#feature .charge{
width: 600px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 30px auto 0;
}
#feature .charge li{
width: calc(33.3% - 10px);
margin: 5px;
height: auto;
}
#feature .charge li img{
width: 170px;
height: 170px;
}
/*5.充実のサポート体制*/
.feature05_col{
display: flex;
flex-wrap: wrap;
width: 940px;
margin: 20px auto;
}
.feature05_col li{
width: calc(33.3% - 60px);
margin: 0 30px;
}
.feature05_col li h5{
padding: 0 0 1rem;
font-size: 1.8rem;
}
#feature .feature05_col li p{
width: auto;
font-size: 1.5rem;
line-height: 2rem;
}
#feature .feature05_col li img{
width: 64%;
padding: 0 0 4%;
}
/*-----------------------------
ボタン
-----------------------------*/
.btn_m{
padding: 38px 0 0;
}
.btn{
width: 306px;
height: 70px;
display: inline-block;
border-radius: 6px;
font-size: 2rem;
text-align: center;
background: #fd6103;
color: #ffffff;
line-height: 2.8rem;
text-decoration: none;
font-weight: 800;
vertical-align: middle;
padding-top: 9px;
}
.btn span{
display: block;
font-weight: 300;
font-size: 0.8em;
}
.btn:hover{
opacity: 0.8;
}
.top_wap_btn{
top: 23%;
position: relative;
color: #fff;
}
.top_wap_btn .btn{
display: table-cell;
height: 80px;
padding-top: 0;
width: 400px;
font-size: 2.4rem;
}
.top_wap_btn a{
color: #fff;
text-decoration: none;
}
.top_wap_btn .btn:hover{
background: #ff9900;
opacity: 1;
}
/*-----------------------------
導入事例
-----------------------------*/
#LP_case_study{
background: #ecf8fe;
padding: 60px 0 70px;
}
h2.casestudy_h2{
color: #014190;
font-size: 3.5rem;
font-weight: normal;
margin: 0 0 2%;
}
.case_study_text h5{
font-size: 1.6em;
padding: 8% 0;
}
.case_study_text{
text-align: center;
margin: 0 auto;
}
.case_study_text p{
color: #fff;
font-size: 1.5em;
font-weight: bold;
line-height: 1.6;
background-color: #009ee5;
border-radius:6px;
padding: 4%;
}
/*導入事例スライダー*/
.slider {
width: 94%;
max-width: 950px;
margin: 0 auto;
}

.slider img {
width: 100%;
max-width: 227px;
height:auto;
margin: 0 auto;
}
.slider .slick-slide {
margin:0 10px;/*スライド左右の余白調整*/
}
.slick-prev{
left: -45px;
}
.slick-next{
right: -2%;
}
.slick-prev,
.slick-next {
position: absolute;
top: 42%;
height: 15px;
width: 15px;
}
.slick-prev:before, .slick-next:before{
color: #003b8d;
font-size: 40px;
}
.slick-dots{
bottom: -38px;
}
.slick-dots li.slick-active button:before{
opacity: .9;
color: #014190;
}
/*-----------------------------
接続方式
-----------------------------*/
#system{
padding: 60px 0 70px;
}
.system_flex{
display: flex;
justify-content: space-between;
width: 950px;
margin: 0 auto;
}
.system_box{
flex-wrap: wrap;
width: 48%;
background-color: #fff;
border-radius: 6px;
padding: 3% 4%;
}
#system h3{
margin: 2% auto 6%;
}
.system_box img{
width: 100%;
margin: 8% 0 0;
}
#system p{
margin: 0 0 1em;
text-align: center;
}
/*-----------------------------
よくあるご質問
-----------------------------*/
#faq_new{
padding: 60px 0 70px;
margin: 0;
width: 100vw;
background-color: #fff;
}
#faq_new h2{
margin: 0px auto 30px auto;
color: #014190;
font-size: 3.5rem;
font-weight: normal;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
.accordion {
width: 860px;
max-width: 100%;
margin: 0 auto;
}
.accordion-hidden{
display: none;
}
.accordion-open {
color: #fff;
display: block;
padding: 20px 20px 20px 50px;
background: #00b4f3;
cursor: pointer;
margin: 5px 0;
font-weight: 700;
font-size: 1.6em;
position: relative;
text-align: left;
}
.accordion-open::before,
.accordion-open::after {
content: '';
width: 20px;
height: 3px;
background: #fff;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
.accordion-open::after {
transform: translateY(-50%) rotate(90deg);
/*transition: .5s;1本になるまでの時間*/
}
.accordion-hidden:checked + .accordion-open:after {
transform: translateY(-50%) rotate(0);
}
.accordion-close {
display: block;
height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
/*transition: 0.5s;開く速度*/
position: relative;
}
.accordion-hidden:checked + .accordion-open + .accordion-close {
height: auto;
opacity: 1;
padding: 20px 20px 20px 50px;
background: #fff;
font-weight: normal;
font-size: 1.5rem;
line-height: 1.6;
text-align: left;
}
.accordion-open span.q,
.accordion-close span.a {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 100%;
position: absolute;
text-align: center;
left: 0;
top: 0;
}
.accordion-open span.q{
background: #00b4f3;
color: #fff;
}
.accordion-close span.a {
background: #fff;
font-size: 1.6rem;
font-weight: 700;
}
.accordion_ul ul{
margin-bottom: 0;
}
.accordion_ul li{
display: inline-block;
}
/*-----------------------------
導入ステップ
-----------------------------*/
#step {
padding: 60px 0 70px;
background-color: #f6f5f4;
}
/*-----------------------------
CTA
-----------------------------*/
#inquiry {
padding: 20px 0 70px;
background: #f6f5f4;
}
#inquiry p.catch{
font-size: 2.6rem;
}
/*-----------------------------
追従お問い合わせエリア
-----------------------------*/
.fixFooter{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 77px;
background: rgba(13,67,143,0.2);
z-index: 100;
border-bottom: 4px solid #0D438F;
box-sizing: border-box;
}
.fixFooter ul{
max-width: 1000px;
display: flex;
justify-content: flex-end;
height: 100%;
margin: auto;
font-size: 1.5em;
font-weight: bold;
}
.fixFooter ul li{
flex: 0 1 200px;
position: relative;
}
.fixFooter ul li.faq:after{
content:"";
display: inline-block;
height: 50%;
width: 1px;
background: #ccc;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.fixFooter ul li a{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
padding: 1em 2.5em 1em 1em;
box-sizing: border-box;
background: #FD6103;
color: #fff;
position: relative;
text-decoration: none;
transition: 0.3s all ease;
font-size: 1.3em;
}
.fixFooter ul li a:before{
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-right: 0.5em;
margin-bottom: 2px;
}
.fixFooter ul li.contact{
border-left: solid 1px #fff;
}
.fixFooter ul li.contact a{
background: #FD6103;
color: white;
}
.fixFooter ul li.contact a{
background: #fff;
color: #333;
}
.fixFooter ul li.contact a:before{
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid #FD6103;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-right: 0.5em;
margin-bottom: 2px;
}
.fixFooter ul li.document a:hover{
background: #ff9900;
}
.fixFooter ul li a:after{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.fixFooter ul li.contact a:after{
content: url(/assets/img/icon/cv_heading_contact_grey.png);
width: 27px;
height: 21px;
right: 20px;
}
.fixFooter ul li.document a:after{
content: url(/assets/img/icon/cv_heading_document_grey.png);
width: 22px;
height: 27px;
right: 26px;
}
.fixFooter ul li.faq a:after{
content: url(/assets/img/icon/cv_heading_question_grey.png);
width: 13px;
height: 21px;
right: 20px;
}
#siteFooter .goTop p{
bottom: 90px;
}

/*////////////////////////////////
スマホ対応
////////////////////////////////*/
@media (max-width: 767px){
#company, #feature01, #feature02, #feature03, #feature04, #feature05, #system, #faq_new, #step {
padding: 30px 0 40px;
margin: 0 auto;
}
#company .inner, #feature01 .inner, #feature02 .inner, #feature03 .inner, #feature04 .inner, #feature05 .inner{
background: none;
width: 94.6%;
margin:0 auto;
padding: 0;
}
#company p, #feature p, #scene p{
font-size: 1.5rem;
line-height: 1.8em;
margin-bottom: 30px;
text-align: center;
width: 100%;
}
.inner img{
width: 100%;
}
#top_wap{
height: 720px;
}
#top_wap .top_inner{
width: 100%;
}
#top_wap .top_inner .top_txt{
top: 28%;
}
#result p.copy {
font-size: 1.2rem;
}
.top_wap_btn{
top: 35%;
}
.btn_m{
width: 90%;
}
#feature .feature2021_h3 {
width: 100%;
height: 76px;
position: relative;
margin: 0 auto 22px auto;
text-align: center;
background-color: #009ee5;
color: #ffffff;
font-size: 2.4rem;
font-weight: normal;
line-height: 3rem;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
padding: 0 2%;
}
/*-----------------------------
企業スライダーエリア
-----------------------------*/
#slide_company h3{
font-size: 1.4rem;
padding: 3% 2%;
}
.slide {
width: 140px;
height: 54px;
margin: 0 5px 7px;
}
.slide img{
width: 100%;
}
#feature{
margin-top: 0;
padding: 0;
}
/*-----------------------------
オンラインサービスVeriTrans4Gの特徴
-----------------------------*/
#feature #feature_ttl{
background-color: #fff;
padding: 20px 0 0;
}
#feature #feature_ttl h2 {
color: #003c88;
font-size: 2.9rem;
width: 100%;
font-weight: 500;
line-height: 2;
padding: 0;
}
#feature #point {
width: 100%;
padding: 0;
}
#feature #point dl {
    width: calc(33.3% - 12px);
    margin: 6px;
}
#feature #point dt{
margin: 0 0 8%;
font-size: 1.5rem;
}
#feature #point img{
width: 50%;
height: auto;
margin: 0;
}
/*-----------------------------
1.豊富な決済手段を
-----------------------------*/
#feature01{
padding-top: 0;
}
/*-----------------------------
2.都度課金、継続課金双方に対応
-----------------------------*/
#feature .charge {
width: 100%;
margin: 0 auto;
}
#feature .charge li img {
width: 90px;
height: 90px;
}
/*-----------------------------
5.充実のサポート体制
-----------------------------*/
.feature05_col {
width: 100%;
margin: 0 auto;
}
.feature05_col li {
width: 100%;
margin: 0 auto;
}
.feature05_col li h5 {
font-size: 1.5rem;
}
#feature .feature05_col li img{
width: 30%;
}
#feature05 .btn_m{
padding: 0;
}
/*-----------------------------
接続方法
-----------------------------*/
.system_flex{
flex-direction: column;
align-items: center;
width: 100%;
}
.system_box{
flex-wrap: wrap;
width: 90%;
margin: 0 0 8%;
padding: 4% 6% 6%;
}
#system h3{
margin: 4% auto;
}
/*-----------------------------
導入事例
-----------------------------*/
#LP_case_study{
padding: 30px 0 50px;
}
.case_study h1{
padding: 6% 0;
}
h2.casestudy_h2{
font-size: 2.4rem;
margin-bottom: 4%;
}
#LP_case_study{
width: 100%;
flex-direction: column;
align-items: center;
}
.case_study{
width: 86%;
margin: 0 0 14%;
}
/*-----------------------------
よくあるご質問
-----------------------------*/
#faq_new h2 {
    margin: 0px auto 15px auto;
    color: #014190;
    font-size: 2.4rem;
    font-weight: normal;
}
.accordion-open{
padding: 20px 40px;
line-height: 1.3;
margin: 2px 0;
font-size: 1.5rem;
font-weight: 600;
}
.accordion-open::before, .accordion-open::after{
width: 15px;
}
.accordion-open span.q, .accordion-close span.a{
width: 40px;
}
.accordion-hidden:checked + .accordion-open + .accordion-close{
font-size: 1.4rem;
}
/*-----------------------------
導入ステップ
-----------------------------*/
#step {
padding-bottom: 10px;
}
/*-----------------------------
CTA
-----------------------------*/
#inquiry p.catch{
font-size: 2rem;
}
/*-----------------------------
追従お問合せエリア
-----------------------------*/
#siteFooter .goTop p{
bottom: 11%;
}
}
/*////////////////////////////////
スマホ小対応
////////////////////////////////*/
@media (max-width: 599px){
#top_wap{
max-height: 580px;
}
#top_wap .top_inner{
width: 100%;
}
#top_wap .top_inner .top_txt{
position: relative;
padding: 4%;
top: 20%;
width: 100%;
}
#top_wap .top_inner .top_txt h1{
font-size: 2em;
}
#top_wap .top_inner .top_txt h1 img {
width: 80%;
}
.catch{
font-size: 1.4em;
}
.top_wap_btn{
top: 30%;
width: 90%;
margin: 0 auto;
}
/*-----------------------------
CTAボタン
-----------------------------*/
.btn_m{
width: 90%;
}
.btn_m .btn{
width: 100%;
}
.btn {
margin: 0 0 6%;
}
.top_wap_btn .btn{
font-size: 2.1rem;
}
/*-----------------------------
CTA
-----------------------------*/
#inquiry p.catch{
font-size: 1.6rem;
}
}