/* 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.4rem; line-height:1.6em; margin:0 auto; padding:10px 0;}
a:hover img{ opacity:0.8;}
p.text{ font-size:1.5rem; text-align:left; width:900px; max-width:90%;}


.reform_arekore .reform_list li,#top .form,#qa dl,#top .reform_flow{ 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);
}




#mainimage{ position:relative;}
#mainimage .m_text{ text-align:left;  padding:40px 40px 10px 40px; position:absolute; top:0; left:0;}
#mainimage .m_text h1{ font-size:2.4rem; line-height:1.6em; margin:0 0 10px 0;}
#mainimage .m_text p{ font-size:1.6rem; line-height:1.6em; margin:0 0 10px 0;}

.nav_wrap2{ margin:60px 0;}
ul.nav li{ display:inline-block; font-size:1.5rem; line-height:1.2em; margin-right:20px; padding:25px 0 0; vertical-align:top;}
ul.nav li.logo{ margin:0 50px; padding:0;}
ul.nav li.tel{ padding:25px 0 0 20px; position:relative;}
#navi_toggle ul li.tel{ padding:10px 0 0 20px; position:relative;}
ul.nav li.tel:before,#navi_toggle ul li.tel:before{ position:absolute; width:15px; height:15px; content:""; background:url(../images/tel.png) no-repeat; background-size:cover; left:0;}





#top .image_wrap{ width:100%; max-width:100%; position:relative; padding-bottom:80px;}
#top .image_wrap h1{ font-size:2.8rem; line-height:1.4em; margin:0 55px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position:absolute; top:0; left:0; letter-spacing:0.1em;}
#top .image_wrap img{  width : -webkit-calc(100% - 150px); width : calc(100% - 150px); max-width : -webkit-calc(100% - 150px);  max-width : calc(100% - 150px) ; margin-left:150px;}
#top .image_wrap .s_text_box{ width:400px; text-align:left; box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .2); padding:20px 30px 40px 30px; position:absolute; bottom:0; left:120px; background:rgba(255,255,255,1);}
#top .image_wrap .s_text_box h2{ font-size:2em; margin:0; line-height:1.2em; color:#F8B62C; position:absolute; right:20px; bottom:20px;}

#top .sec2 { text-align:left; width:900px; max-width:90%; margin:50px auto;}
#top .sec2 h1{ font-size:2.2rem; line-height:1.6em; color:#94BACC;}

#top .sec3 .image_wrap h1{ margin:0 45px; top:0; right:0;}
#top .sec3 .image_wrap img{ width : calc(100% - 180px) ;  width : -webkit-calc(100% - 180px) ; max-width : calc(100% - 180px) ;  max-width : -webkit-calc(100% - 180px) ; margin:0 180px 0 0 ;}
#top .sec3 .image_wrap .s_text_box{ left:auto; right:160px;}

#top .sec3 p.text{ margin:50px auto;}
#top .sec4 h1{ max-width:90%; margin:0 auto;}
#top .sec4 p.text{ margin:20px auto 50px;}
.reform_arekore{ width:900px; max-width:100%; margin:0px auto 40px; display:flex; flex-wrap: wrap; justify-content: center;}
.reform_arekore li{width:29%; margin:0.5%; border:1px solid #CCC; padding:1%;}
.reform_arekore .reform_list{ margin:20px 10px;}
.reform_arekore .reform_list li{ font-size:1.2rem; line-height:1.2em; display:block; width:auto; border:none; text-align:left; padding:2px; margin:0;}


#top .sec5 .image_wrap h1{ margin:0 60px; top:0; right:0;}
#top .sec5 .image_wrap img{  width : -webkit-calc(100% - 160px) ; width : calc(100% - 160px) ; max-width : -webkit-calc(100% - 160px) ; max-width : calc(100% - 160px) ; margin:0 160px 0 0 ;}
#top .sec5 .image_wrap .s_text_box{ left:auto; right:140px;}
#top .sec5 p.text{ margin:10px auto;}


#top h1.vertical{ font-size:2.8rem; line-height:1.4em; margin:0 55px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; letter-spacing:0.1em; float:left}

#top .sec6{ width:900px; max-width:90%; margin:100px auto; overflow:hidden;}
#top .sec6 .access_wrap{ overflow:hidden; width : -webkit-calc(100% - 150px) ; width : calc(100% - 150px) ; max-width : -webkit-calc(100% - 150px) ; max-width : calc(100% - 150px) ; margin:20px 0 50px 150px;}
#top .sec6 .access_wrap .g_map{ width:370px; float:left; max-width:100%;}
#top .sec6 .access { text-align:left; margin-left:400px;}
#top .sec6 .access h2{ font-size:2.4rem; line-height:1.4em;}
#top .sec6 .access h3{ font-size:1.6rem; line-height:1.4em; margin-top:5px; text-decoration:underline;}
#top .sec6 .access .tel{ font-size:2.6rem; position:relative; padding:0 0 0px 30px; margin:10px 0;}
#top .sec6 .access .tel:before{ position:absolute; width:26px; height:26px; content:""; background:url(../images/tel.png) no-repeat; background-size:cover; left:0; bottom:10px;}


#top .sec7 img{  width : -webkit-calc(100% - 160px) ; width : calc(100% - 160px) ; max-width : -webkit-calc(100% - 160px) ; max-width : calc(100% - 160px) ; margin-bottom:40px;}
#top .sec7 .tel{ font-size:3rem; position:relative; padding:0 0 0px 34px; margin:10px 0; display:inline-block;}
#top .sec7 .tel:before{ position:absolute; width:28px; height:28px; content:""; background:url(../images/tel.png) no-repeat; background-size:cover; left:0; bottom:10px;}

#top .sec8,#top .sec9{ padding-bottom:80px;}
#top .sec9 .image_wrap h1{ font-size:2em; margin:0 45px; top:0; right:0; text-align:left;}
#top .sec9 .image_wrap img{ width : calc(100% - 180px) ;  width : -webkit-calc(100% - 180px) ; max-width : calc(100% - 180px) ;  max-width : -webkit-calc(100% - 180px) ; margin:0 180px 0 0 ;}
#top .sec9 .image_wrap .s_text_box{ left:auto; right:160px;}


#top .anc{ padding-top:60px; margin-top:-60px;}


#top .thanks{ width:800px; max-width:90%; margin:30px auto; overflow:hidden; text-align:left;}
#top .thanks h2{ font-size:1.6rem; line-height:1.4em; }

.footer_wrap { background:#B5DCEB; width:100%; overflow:hidden;}
footer{ width:830px; max-width:90%; margin:0 auto; text-align:left;}
footer .left_box{ width:300px; float:left; padding:30px;}
footer h1 img{ margin-bottom:10px;}
footer ul{ margin:0 0 0 65%; padding:100px 20px 20px 20px;}
footer ul li{ font-size:1.4rem; line-height:1.4em; padding:5px 0;}
footer .tel{ font-size:2.4rem; position:relative; padding:0 0 0px 28px; margin:10px 0;}
footer .tel:before{ position:absolute; width:24px; height:24px; content:""; background:url(../images/tel.png) no-repeat; background-size:cover; left:0; bottom:10px;}
footer .copy{ text-align:center; margin:20px auto; clear:both;}

#qa dl{ width:800px; max-width:90%; margin:60px auto 80px; text-align:left;}
#qa dl dt{ font-size:2.2rem; line-height:1.4em; position:relative; margin:0 0 10px 50px; text-decoration:underline;}
#qa dl dt:before{ position:absolute; width:45px; height:32px; content:""; background:url(../images/q_icon.png) no-repeat; background-size:cover; left:-50px; top:0;}
#qa dl dd{ font-size:1.4rem; line-height:1.4em; margin:0 0 40px 45px;}

#top .reform_flow{ text-align:left; width:900px; max-width:90%; margin:100px auto;}
#top .reform_flow h2{ font-size:2.2rem; line-height:1.4em; background:#D9EDF9; padding:5px 0 4px 148px; position:relative;}
#top .reform_flow p{ padding:20px; margin-bottom:20px;}
#top .reform_flow h2:before{position:absolute; width:138px; height:38px; left:0; bottom:0; top:0;}
#top .reform_flow h2:nth-of-type(1):before{content:""; background:url(../images/step1.png) no-repeat; background-size:cover;}
#top .reform_flow h2:nth-of-type(2):before{content:""; background:url(../images/step2.png) no-repeat; background-size:cover;}
#top .reform_flow h2:nth-of-type(3):before{content:""; background:url(../images/step3.png) no-repeat; background-size:cover;}
#top .reform_flow h2:nth-of-type(4):before{content:""; background:url(../images/step4.png) no-repeat; background-size:cover;}
#top .reform_flow h2:nth-of-type(5):before{content:""; background:url(../images/step5.png) no-repeat; background-size:cover;}



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


}


@media screen and (max-width: 900px){
ul.nav li.logo{ margin:0 25px;}
ul.nav li{ margin-right:15px;}

#top h1.vertical{ float:none; margin:20px auto 60px; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;}
#top .sec6 .access_wrap,#top .sec7 img{  width :100%; max-width:100%;  margin-left:0;}

}


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

ul.nav li{ display:inline-block; margin-right:20px; padding:10px 0; vertical-align:baseline;}
ul.nav li.logo{ display:block; margin:0 auto 20px;}
ul.nav li.tel{ padding:10px 0 10px 20px;}


.image1 .s_text_box{bottom:0; left:auto; right:60px;}

}



/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){

footer h1{ float:none;}
.sp_no{ display:none;}

#top .image_wrap{ position:relative; padding-bottom:30px;}
#top .image_wrap img{  width :100%; max-width:100%; margin:0; padding:0;}
#top .image_wrap h1{ font-size:2.2rem; margin:0; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; position:relative; top:auto; left:auto; letter-spacing:0;}
#top .image_wrap .text_box{ width:400px; max-width:85%; margin:-30px 0 0 5%; text-align:left; box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .2); padding:5% 5% 40px 5%; position:relative;  background:rgba(255,255,255,1);}
#top .image_wrap .s_text_box{ width:auto; box-shadow: none; padding:0; position:relative; bottom:auto; left:auto; right:auto; background:none; position:static;}

#top .sec3 .image_wrap h1,#top .sec5 .image_wrap h1,#top .sec9 .image_wrap h1{ top:auto; right:auto; margin:0;}
#top .sec3 .image_wrap img,#top .sec5 .image_wrap img,#top .sec6 .access_wrap,#top .sec9 .image_wrap img{ max-width:100%; width :100%; margin:0; padding:0;}
#top .sec3 .image_wrap .s_text_box,#top .sec5 .image_wrap .s_text_box,#top .sec9 .image_wrap{ left:auto; right:auto;}

#top .sec6 .access_wrap .g_map{ float:none;}
#top .sec6 .access { text-align:left; margin:50px 0 0 0;}
#top h1.vertical{ margin:20px auto 40px; }

}



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


#mainimage .m_text p{ font-size:1.4rem;}
#mainimage .m_text{position:relative;}
.nav_wrap2{ margin:30px 0;}

footer .left_box{ width:auto; float:none; padding:30px;}
footer ul{ margin:0 0 0 0; padding:20px 20px 20px 20px;}

}


/*560以下 */
@media screen and (max-width: 560px){
#mainimage .m_text h1{ font-size:2rem;}


.reform_arekore li{width:45%; margin:0.5%; border:1px solid #CCC; padding:1%;}

}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
	.sp_no2{ display:none;}
	#navi_toggle{  margin:0px 0 0 10px;}

}