@charset "utf-8";
/* CSS Document */

/*==============================*/
/* section */
/*==============================*/
section { padding-top: 65px; padding-bottom: 60px;}

/* ======= SP =======*/
@media (max-width: 767px){
	section { padding-top: 40px; padding-bottom: 40px;}
    section#product { padding-top: 40px; padding-bottom: 0px;}
}

/*==============================*/
/* メインイメージ */
/*==============================*/
.mainSlide{
    margin-bottom: 110px;
	background-image: url("/static/mobile/common/img/slide/main_slide_pc.png") ;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center center;
	padding-top: 60vh;
}
.mainSlide ul{
	position: relative;
	bottom: -50px;
	display: flex; display: -webkit-flex; /* Safari */
	justify-content: space-between; -webkit-justify-content: space-between; /* Safari */
}
.mainSlide ul li{
    width: calc(33.3% - 1.5%);
    -webkit-box-shadow: 3px 3px 4px 0px rgba(201,201,201,1);
    -moz-box-shadow: 3px 3px 4px 0px rgba(201,201,201,1);
    box-shadow: 3px 3px 4px 0px rgba(201,201,201,1);
}

/* ======= TB =======*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .mainSlide{
        padding-top: 40vh;
        margin-bottom: 80px;
    }
}

/* ======= SP =======*/
@media (max-width: 600px) {
	.mainSlide{
        padding-top: 30vh;
        background-image: url("/static/mobile/common/img/slide/main_slide_sp.png") ;
    }
    .mainSlide ul{ flex-direction: column; -webkit-flex-direction: column; /* Safari */}
	.mainSlide ul li{ width: 100%;}
    .mainSlide ul li:not(:last-child){ margin-bottom: 5px;}
}

/*==============================*/
/* タイトル */
/*==============================*/
/*-- メインタイトル
------------------------- */
.mainTitle{
	margin-bottom: 25px;
	font-size: 35px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif; letter-spacing: 0.08em;
	text-align: center;
	line-height: 1.4em;
}
.mainTitle small{
	display: block;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3em;
	color: #CE0101;
}

/*-- サブタイトル
------------------------- */
.subTitle{
    position: relative;
    padding-bottom: 10px;
	margin-bottom: 35px;
	font-size: 23px;
	font-weight: bold;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
	text-align: center;
}
.subTitle:before{
    position: absolute; bottom: 0; left: 50%;
    content: "";
    width: 100px;
    height: 4px;
    background: #000000;
    margin-left: -50px;
}

    /* ======= SP =======*/
    @media (max-width: 767px){
        /*-- メインタイトル
        ------------------------- */
        .mainTitle{
            margin-bottom: 25px;
            font-size: 30px;
            letter-spacing: 0.01em;
            line-height: 1em;
        }
        .mainTitle small{ margin-top: 5px; }

        /*-- サブタイトル
        ------------------------- */
        .subTitle{
            padding-bottom: 8px;
            margin-bottom: 25px;
            font-size: 20px;
        }
        .subTitle:before{
            position: absolute; bottom: 0; left: 50%;
            content: "";
            width: 50px;
            height: 3px;
            margin-left: -25px;
        }
    }

/*==============================*/
/* ボタン */
/*==============================*/
.mainBtn a{
    display: inline-block;
    max-width: 400px;
    width: 100%;
    padding: 10px 0 10px 0;
    background: #D91920;
    font-size: 18px;
    font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
    color: #fff;
    text-align: center;
    border-radius: 200px;
}
.mainBtn a:hover{ background: #BC090F; }

    /* ======= SP =======*/
    @media (max-width: 767px){
        .mainBtn a{
            max-width: 100%;
            padding: 9px 0 10px 0;
            font-size: 16px;
        }
    }


.subBtn a{
    display: inline-block;
    max-width: 320px;
    width: 100%;
    padding: 10px 0 11px 0;
    background: #ffc000;
    font-size: 18px;
    font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
    color: #fff;
}

/* ======= SP =======*/
@media (max-width: 767px){
    .subBtn a{
        max-width: 220px;
        padding: 9px 0 10px 0;
        font-size: 16px;
    }
}


/*==============================*/
/* 製品 */
/*==============================*/
dl.productBox{
    padding: 8px 15px 15px 15px;
    background: #F3F3F3;
}
dl.productBox dt{
    padding-bottom: 8px;
    font-size: 19px;
	font-weight: 500;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
    text-align: center;
}

/*-- サービス
------------------------- */
dl.serviceBox{
    padding: 8px 15px 15px 15px;
    background: #F3F3F3;
}
dl.serviceBox dt{
    padding-bottom: 8px;
    font-size: 19px;
	font-weight: 500;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
    text-align: center;
}
dl.serviceBox dd ul{
    display: flex; display: -webkit-flex; /* Safari */
    justify-content: space-between; -webkit-justify-content: space-between; /* Safari */
    flex-wrap: wrap; -webkit-flex-wrap: wrap; /* Safari */
    margin-bottom: -4px;
}
dl.serviceBox dd ul li{
    width: calc(50% - 2px);
    margin-bottom: 4px;
}

/* ======= SP =======*/
@media (max-width: 767px){
    dl.serviceBox dd ul{
        flex-direction: column; -webkit-flex-direction: column; /* Safari */
        margin-bottom: -4px;
    }
    dl.serviceBox dd ul li{
        width: 100%;
        margin-bottom: 4px;
    }
}

/*==============================*/
/* 特長 */
/*==============================*/
.supportWrap{
	margin: 0 auto;
	padding: 30px;
	background: #EFEFEF;
	display: flex; display: -webkit-flex; /* Safari */
	justify-content: space-between; -webkit-justify-content: space-between; /* Safari */
}
dl.supportBox{
	padding: 40px 20px 30px 20px;
	width: calc(33.3% - 2px);
	background: #fff;
}
dl.supportBox dt{
	margin-bottom: 20px;
	font-size: 22px;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.03em;
	text-align: center;
}
dl.supportBox dd.supportIcon{
	margin-bottom: 5px;
	text-align: center;
}
dl.supportBox dd.supportIcon i{
	font-size: 50px;
	color: #C92F35;
	margin-bottom: 20px;

}
dl.supportBox dd.supportContent{ padding: 0 15px; }
dl.supportBox dd.supportContent p{ line-height: 1.6em;}


/*-- 個別設定
------------------------- */
dl.supportBox:nth-child(2) dt{ line-height: 0.8em; margin-bottom: 19px; font-size: 21px;}
dl.supportBox:nth-child(2) dd.supportIcon i{ margin-bottom: 15px;}


/* ======= TB =======*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .supportWrap{ padding: 20px; flex-wrap: wrap; -webkit-flex-wrap: wrap; /* Safari */ }
    dl.supportBox{ width: calc(50% - 2px); }

    /*-- 個別設定
    ------------------------- */
    dl.supportBox:nth-child(1),
    dl.supportBox:nth-child(2){margin-bottom: 4px;}
}


/* ======= SP =======*/
@media (max-width: 767px){
	.supportWrap{
		padding: 15px;
		flex-direction: column; -webkit-flex-direction: column; /* Safari */
	}
	dl.supportBox{
		padding: 35px 10px 28px 10px;
		width: 100%;
	}
	dl.supportBox:not(:last-child){ margin-bottom: 5px;}
    dl.supportBox dt{
        margin-bottom: 15px;
        font-size: 20px;
    }
    /*-- 個別設定
    ------------------------- */
    dl.supportBox:nth-child(2) dt{ margin-bottom: 19px; font-size: 18px; line-height: 1.2em;}

    dl.supportBox dd.supportContent p{ font-size: 14px;}
}


/*==============================*/
/* プラン */
/*==============================*/
dl.planBox{ display: flex; display: -webkit-flex; /* Safari */ }
dl.planBox dt{
    width: 30%;
    background: #3E3E3E;
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-family: "Noto Sans Japanese"; letter-spacing: -0.03em;
}
dl.planBox:first-child dt{ padding-top: 60px;}
dl.planBox:nth-child(2) dt{ padding-top: 85px;}

dl.planBox dt i{
    display: block;
    font-size: 45px;
}
dl.planBox dd{
    width: 70%;
    border: 1px solid #ccc;
}
dl.planBox dd ul li{ padding: 5px 0 5px 10px;}
dl.planBox dd ul li:not(:last-child){ border-bottom: 1px solid #ccc;}
dl.planBox dd ul li small{ font-size: 12px;}

/* ======= SP =======*/
@media (max-width: 767px){
    dl.planBox:first-child dt{ padding-top: 55px;}
    dl.planBox:nth-child(2) dt{ padding-top: 60px;}
    dl.planBox dd ul li{ padding: 4px 8px 4px 8px; font-size: 14px;}
}

/*==============================*/
/* 会社 */
/*==============================*/
.bg_companyPanel{ position: relative;}

ul.companyPanel{
    width: 700px;
    display: flex; display: -webkit-flex; /* Safari */
    justify-content: space-between; -webkit-justify-content: space-between; /* Safari */
}
ul.companyPanel li{
    width: calc(50% - 1.5%);
    background: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: 3px 3px 4px 0px rgba(201,201,201,1);
		-moz-box-shadow: 3px 3px 4px 0px rgba(201,201,201,1);
		box-shadow: 3px 3px 4px 0px rgba(201,201,201,1);
}

    /* ======= PC =======*/
    @media (min-width: 767px){
        ul.companyPanel{
            position: absolute; top: 50%; left: 50%;
            margin-top: -50px;
            margin-left: -350px;
        }
    }

    /* ======= SP =======*/
    @media (max-width: 767px){
        ul.companyPanel{
            position: relative; top: -110px;
            width: 100%;
        }
    }


/*==============================*/
/* サブテキスト */
/*==============================*/
.subText{
    font-size: 20px;
	font-weight: bold;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
	text-align: center;
}
.wrap_imgs{
    text-align: center;
    margin: 30px 0px 40px;
}
.wrap_imgs a{
    width: 33.33%;
    display: inline-block;
    margin: 0px 2%;
}
/* ======= SP =======*/
@media (max-width: 767px){
    .subText{
        font-size: 17px;
        line-height: 1.1em;
    }
}

/*==============================*/
/* ローカルSIM */
/*==============================*/
.localSim{
    padding-top: 100px;
    padding-bottom: 80px;
    background: url("/static/mobile/common/img/bg/bg_japan_sim.png")no-repeat;
    background-size: cover;
}
.localSim h2{
    margin-bottom: 13px;
    font-size: 25px;
	font-weight: bold;
	font-family: "Noto Sans Japanese"; letter-spacing: -0.04em;
}

/* ======= TB =======*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .localSim{ background-position: 60%; }
}

/* ======= SP =======*/
@media (max-width: 767px){
    .localSim{
        padding-top: 60px;
        padding-bottom: 45px;
        background-position: 55%;
    }
    .localSim h2{
        margin-bottom: 13px;
        font-size: 22px;
        text-align: center;
    }
}