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

body{
	font: 1.3rem/2 "遊ゴシック体", "Noto Sans Japanese", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" ;
	letter-spacing: 0.1em;
	line-height: 1.7em;
}

header{
	height: 60px;
}
header > .wrap_header > .logo{
	width: 180px;
	margin-top: 15px;
}
header > .wrap_header > .logo img{
	width: 100%;
}
header > .spMenu > .menu_sp{
	height: 60px;
}
.spMenu > .menu_sp > .img{
	width: 30px;
    height: 28px;
    right: 15px;
    top: 15px;
}
.spMenu #open_contents{
    margin: 60px 0 0 0;
    overflow-y: scroll;
}


article{
	margin-top: 60px;
}

#main_visual .wrap{
	width: 100%;
	height: 300px;
}
@media (max-width: 500px) {
	#main_visual .wrap{
		height: 250px;
	}
}

#main_visual .movie{
	display: none;
}
#main_visual .movie_sp{
	display: block;
}
#main_visual .movie_sp img{
	width:100%;
}
#main_visual .wrap > .main_lead{
	width: 80%;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
}
#main_visual .wrap .main_lead img{
	width: 90%;
	max-width: 574px;
}
#main_visual .wrap > .movie_play{
	position: absolute;
    margin: auto;
    bottom: 0;
    left: 0;
    right: 0;
}
#main_visual .wrap > .movie_play img{
	width: 50px;
}
article #cace, #customers_voice, #price_plan, #area, #faq, #company{
	padding-top: 55px;
    margin-top: -55px;
}

article #lead{
	font-size: 115%;
	line-height: 1.6em;
}

article h2 img{
	width: 90%;
}
article #lead{
	margin-bottom: 80px;
}
article #cace h2{
	top:40px;
}
article #cace h2 img{
	max-width: 229px;
	vertical-align: middle;
}
article #cace .contents{
	padding-top: 20px;
}

article #characteristic h2 img{
	max-width: 464px;
	vertical-align: middle;
}
article #customers_voice h2{
	top: 35px;
}
article #customers_voice h2 img{
	max-width: 598px;
	vertical-align: middle;
}
article #customers_voice .contents{
	padding-top: 0;
}
#customers_voice .container{
	padding: 40px 0 0px 0;
}
article #price_plan{
	padding-top: 55px;
    margin-top: 0px;
}
article #price_plan h2{
	top: 44px;
}
article #price_plan h2 img{
	max-width: 521px;
	vertical-align: middle;
}
article #price_plan .contents{
	padding: 50px 0 20px 0;
}

article #area{
	padding-top: 70px;
}
article #area h2{
    top: 56px;
}
article #area h2 img{
	max-width: 410px;
	vertical-align: middle;
}

article #faq{
	padding-top: 70px;
}
article #faq h2{
	top: 58px;
}
article #faq h2 img{
	max-width: 319px;
	vertical-align: middle;
}
article #faq .contents{
	padding-top: 50px;
}

article #flow{
	padding-top: 100px;
    margin-top: 0px;
}
article #flow h2 img{
	max-width: 392px;
	vertical-align: middle;
}

article #company{
	padding-top: 85px;
    margin-bottom: 20px;
}
article #company h2{
    top: 74px;
}
article #company h2 img{
	max-width: 396px;
	vertical-align: middle;
}
article #company .contents{
	padding-top: 50px;
}

@media (max-width: 600px) {
	article h2 img{
		height: 25px;
		width: auto;
	}
}

#lead p{
	width: 90%;
	margin: 0 auto 50px;
}
#lead .image img{
	width: 90%;
	max-width: 610px;
}

article #characteristic{
	padding-top: 100px;
    margin-top: 0px;
}
article #characteristic .contents{
	margin-bottom: 0;
}
article #customers_voice,#price_plan,#area,#faq,#flow{
	margin-bottom: 0 !important;
	padding-top: 50px;
}
#price_plan dl > dt .menuIcon{
	background-position: 98% 50%;
}
.col3_wrap > .box{
	width: 80%;
}
.col3_wrap > .box > .no{
	width: 100%;
	margin: 0 auto;
}
.col3_wrap > .box > .image{
	width: 100%;
	margin: 0 auto;
}
.col3_wrap > .box > .image img{
	width: 100%;
}

#price_plan dl{
	width: 90%;
}
#price_plan dl > dd .plan_dt{
	width: 80%;
    padding: 0;
    margin: 10px auto 0;
    float: none;
}
#price_plan dl > dd .plan_dt::before{
	left: -15px;
}
#price_plan dl > dd .plan_dd{
	width: 80%;
    padding: 0;
    margin: 0 auto 30px;
    float: none;
    border: none;
}
#price_plan .detail{
	width: 80%;
    padding: 20px 0 0 0;
    margin: 0 auto 30px;
}
#price_plan .comment{
	width: 90%;
}

article #area .contents{
	margin: 0px 0 0px 0;
	padding: 50px 0 50px 0;
}
#area .wrap_menu{
	width: 90%;
}
#area .box_area_contents h3{
	margin-top: 10px;
}
#area .wrap_menu > .button{
	width: 47%;
	margin: 0 0 15px 0;
}
#area .wrap_menu > .button:nth-child(2n){
	float: right;
}
#area .box_area_contents{
	width: 90%;
}
#area .wrap_person > .box{
	width: 100%;
	float: none;
}
#area .wrap_person > .box > .prof{
	padding: 20px 15px;
    height: auto !important;
}

article #faq .contents > .wrap_faq{
	width: 90%;
	padding: 15px 0;
}
#faq dl > dt{
	width: 100%;
}
#faq dl > dt > .menuBar{
	height: auto;
}
#faq dl > dt > .menuBar > .q_icon{
	width: 80px;
	background-size: 50px;
}
#faq dl > dt > .menuBar > .q_title{
	width : -webkit-calc(100% - 120px);
	width : calc(100% - 100px);
	box-sizing: border-box;
    padding: 0 33px 5px 0;
    height: auto;
    min-height: 60px;
    line-height: 1.5em;
    font-size: 95%;
	background-position: 99% 40%;
}
#faq dl > dd > .a_icon{
	width: 80px;
}
#faq dl > dd > .a_icon img{
	width: 50px;
}
#faq dl > dt > .menuBar > .pulldownGR{
	right: 20px;
}
#faq dl > dd{
	width: 100%;
}
#faq dl > dd > .detail{
	width : -webkit-calc(100% - 120px);
	width : calc(100% - 120px);
}


#flow .contents .box_flow{
	width: 90%;
}
#flow .contents .box_flow > .image{
	float: none;
    width: 100%;
    text-align: center;
}
#flow .contents .box_flow > .document{
	float: none;
    width: 100%;
}
#flow .contents .box_flow > .document > h3{
	text-align: center;
}
#flow .contents .box_flow > .document > .text {
    width: 90%;
    margin: 0 auto;
}
#flow .wrap_contact{
	width: 90%;
	text-align: center;
    margin-top: 50px;
}
#flow .wrap_contact > .mail{
	float: none;
	margin: 0 0 20px 0;
}
#flow .wrap_contact > .mail img{
	width: 100%;
	max-width: 427px;
}
#flow .wrap_contact > .tel{
	float: none;
}
#flow .wrap_contact > .tel img{
	width: 100%;
	max-width: 427px;
}
article section .contents > .comment{
	width: 80%;
    margin: 20px auto;
    font-size: 110%;
}

#company .contents > .left{
	width: 90%;
	float: none;
	margin: 0 auto 50px;
    padding: 0;
}
#company .contents > .left > .company_logo{
	text-align: center;
	width: 200px;
    margin: 0 auto;
}
#company .contents > .left > .company_logo img{
	width: 100%;
}
#company .contents > .right{
	width: 90%;
	float: none;
	margin: 20px auto;
}
#company .contents > .right iframe{
	width: 100% !important;
}

.slide_all_voice .slide .name{
	font-size: 110%;
}
  
/*--slide--*/
.slide_all{
	width: 320px;
	height: 158px;
}
.slide_all .slide{
	width: 320px;
}
.slide_all .slide_wrap{
	width: 960px;
	margin-left: -480px;
}
.slide_all .slide > .ba{
	display: none;
}
.slide_all .slide > .ba_sp{
	display: block;
}
#cace .navi-btn_cace{
	width: 50px;
	top: 260px;
}
#cace .feed-prev-btn{
	left: 0% !important;
    margin: 0 auto;
}
#cace .feed-next-btn{
	right: 0% !important;
    margin: 0 auto;
}

#customers_voice .navi-btn_voice{
	width: 50px;
	top: 180px;
}
.slide_all_voice{
	width: 320px;
	height: 300px;
}
.slide_all_voice .slide_wrap{
	width: 960px;
	margin-left: -480px;
}
#customers_voice .feed-prev-btn{
	left: 0% !important;
    margin: 0 auto;
}
#customers_voice .feed-next-btn{
	right: 0% !important;
    margin: 0 auto;
}

footer > .menu ul li{
	float: none;
	margin: 0;
}

article .scrollTop{
	position: relative;
	right: 0;
    margin:30px auto;
}

.cover_WH{
	height: 250px;
	width: calc((100% - 320px)/2);
    z-index: 400;
    top: 250px;
}
#customers_voice .cover_WH{
	height: 300px;
}