/* CSS Document */
html{ height:100%;}
body{ width:100%; background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.2em;}
img{ max-width:100%; vertical-align:bottom; -webkit-backface-visibility: hidden; image-rendering: -webkit-optimize-contrast;}
.sp{ display:none;}
p{ font-size:1.8rem; line-height:2em; margin:0 auto; padding:10px 0;}
a:hover img{ opacity:0.8;}


.reform_arekore .reform_list li,#top .form,#qa dl,#reform .sec2{ font-family:'Noto Sans JP', "Helvetica Neue",Arial, "ヒラギノ角ゴ ProN W3","Hiragino Sans","Hiragino Kaku Gothic ProN", Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;}

/*トグルボタン*/
#navi_toggle{ display:none; background:rgba(255,255,255,0.6); padding-left:20px; margin:0px 0 0 40px; z-index:1;}
#top #navi_toggle{ padding-top:40px;}
#navi_toggle ul{ width:200px; padding:0px 0 20px 0; font-size:1.4rem; line-height:1.4em; text-align:left; margin-left:auto;}
#navi_toggle ul li{ padding:5px;}
.sp_nav{display:none;}
.sp_nav .logo{ width:63px; margin:10px auto 10px 20px;}
#menubtn{
	display:none;
	width:40px;
	height:41px;
    position: absolute;
	cursor:pointer;
    top: 10px;
    right: 15px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


.wrap{ width:980px; max-width:100%; margin:0 auto; }
header { max-width:90%; margin:0 auto; text-align:right;}

.sec1 p{ width:450px; max-width:54%; float:left; padding:3%; text-align:left;}
.sec1 .image2{ max-width:40%; margin-top:40px;}

.sec2 .text{ width:450px; max-width:54%; float:right; padding:3%; text-align:left;}
.sec2 .image4{ max-width:40%; margin-top:40px;}
.sec2 h3{ text-align:left; max-width:60%;}
.sec2 ul.plan_list li{ width:47%; padding:1%; display:inline-block; }

.sec2 ul.customer li{
	padding-left:30px;
	position:relative;
	font-size:1.8rem; line-height:1.4em;
	text-align:left;
	margin-bottom:5px;
	font-weight:bold;
}
.sec2 ul.customer li:before,
.sec2 ul.customer li:after{
	content:"";
	display:block;
	position:absolute;
}
.sec2 ul.customer li:before{
	width:16px;
	height:16px;
	background:#ffffff;
    border:1px solid #000000;
	left:0;top:6px;
}
.sec2 ul.customer li:after{
	border-left:2px solid #D61084;
	border-bottom:2px solid #D61084;
	width:18px;
	height:7px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:6px;
}

.form_btn{ width:490px; max-width:90%; margin:50px auto;}

.sec3{ text-align:left;}
.sec3 h2{ font-size:2.6rem; display:inline-block; line-height:1.4em; padding-left:30px; position:relative; text-align:left; border-bottom:6px solid #FDD000;}
.sec3 h2:before{
	content:"";
	position:absolute;
	top:4px; left:5px;
    border-top: solid 12px transparent;
    border-right: solid 14px transparent;
    border-bottom: solid 12px transparent;
    border-left: solid 14px #000;
}

.sec3 ul{ width:860px; max-width:90%; margin:0 auto;}
.sec3 ul li{ display:inline-block; width:45%; padding:20px 2%; text-align:center; vertical-align:top;}
.sec3 ul.meishi li:nth-child(3){ text-align:right;}
.sec3 ul.meishi li{}

.sec3 ul.tirashi li:nth-child(2n){ width:53%; padding:20px 1%;}
.sec3 ul.tirashi li:nth-child(2n+1){ width:42%; padding:20px 1%;}
.sec3 ul.tirashi li:nth-child(3){ margin-top:-80px;}
.sec3 ul.tirashi li:nth-child(6){ margin-top:-60px;}
.sec3 ul.tirashi li:nth-child(7){ width:90%;}

.sec3 ul.web li{ width:30%; padding:0px 1%; }
.sec3 ul.web li:nth-child(2),.sec3 ul.web li:nth-child(6){ margin-top:150px;}
.sec3 ul.web li:nth-child(3){ margin-top:300px;}
.sec3 ul.web li:nth-child(4){ margin-top:-150px;}

.sec4 h1{ text-align:left;}
.sec4 img{ margin-bottom:20px;}

.form p{ font-size:1.2rem; line-height:1.4em; padding:3px 0;}

.footer_wrap { background:#DCDBCE; width:100%; overflow:hidden;}
footer{ width:980px; max-width:90%; margin:0 auto; text-align:left;}
footer h1{ width:80px; float:left; font-size:1.6rem; line-height:1.4em;}
footer .company{ margin-left:80px; padding:5px 20px; border-left:4px #fff solid;}
footer .logo{ margin:40px 0;}
footer h2{  font-size:1.6rem; line-height:1.4em;}
footer .company p{ padding:0;}
footer .company p.fax,footer .company p.mail{ margin-left:44px; position:relative;}
footer .company p.fax:before{ width:34px; height:34px; content:""; background:url(../images/fax_icon.png); background-size:cover; top:0; left:-44px; position:absolute;}
footer .company p.mail:before{ width:34px; height:25px; content:""; background:url(../images/mail_icon.png); background-size:cover; top:7px; left:-44px; position:absolute;}
footer .tel{ margin:40px 0 10px;}
footer .copy { font-size:1.4rem; text-align:center; margin:100px auto 30px;}


.thanks p{ font-size:1.8rem; line-height:1.8em; text-align:left; padding:20px; margin:50px auto;}

@media screen and (max-width: 1192px){


}


@media screen and (max-width: 900px){

}


@media screen and (max-width: 830px){
.sp_nav{ display:block;}
.nav_wrap1{ display:none;}
#menubtn{ display:block;}


}



/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
p{ font-size:1.6rem; line-height:1.8em; margin:0 auto; padding:10px 0;}


}



@media screen and (max-width: 700px){
.sec1 p{ width:auto; max-width:90%; float:none; padding:3%;}
.sec1 .image2{ max-width:80%; margin-top:0px}
.sec2 .text{ width:auto; max-width:90%; float:none; padding:3%;}
.sec2 .image4{ max-width:80%; margin-top:0px}

}


/*560以下 */
@media screen and (max-width: 560px){

}
@media screen and (max-width: 450px){
.sec3 ul li{ width:90%;}
.sec3 ul.meishi li:nth-child(3){ text-align:center;}

.sec3 ul.tirashi li:nth-child(2n){ width:90%;}
.sec3 ul.tirashi li:nth-child(2n+1){ width:90%;}
.sec3 ul.tirashi li:nth-child(3){ margin-top:0px;}
.sec3 ul.tirashi li:nth-child(6){ margin-top:0px;}

.sec3 ul.web li{ width:90%; margin:10px auto;}
.sec3 ul.web li:nth-child(2),.sec3 ul.web li:nth-child(6){ margin-top:0px;}
.sec3 ul.web li:nth-child(3){ margin-top:0px;}
.sec3 ul.web li:nth-child(4){ margin-top:0px;}

}