/* CSS Document */
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box; height:100%;
}
body{ background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.4em; text-align:left; }
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
p{ font-size:1.6rem; line-height:2em;margin:0 auto; font-weight:400; text-align:left;}
.center{ text-align:center;}

/*トグルボタン*/
#menubtn{
	width:40px;
	height:41px;
    position: absolute;
    top: 10px;
    right: 20px;
    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;
	}
header #menubtn{display:none;}

#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);
}


/*ヘッダー*/
.header_wrap{ border-bottom:1px solid #CCC;}
header { width:1300px; max-width:100%; margin:0 auto; position:relative; padding-bottom:15px;}
header .header_top{ display: flex; justify-content: space-between; align-items: flex-end;}
header .logo{ margin:10px 10px 10px 25px; max-width:30%;}
header .tel_box{ background:#46BAB3; color:#fff; padding:20px 30px 10px; margin-right:80px; border-radius:0 0 20px 20px; -webkit-border-radius:0 0 20px 20px; -moz-border-radius:0 0 20px 20px; }
header .tel_box p{ font-size:1.6rem; line-height:1.2em; font-weight:bold;}
header .tel_box p.tel{ font-size:3.8em; line-height:1.2em; position:relative; padding:10px 0 0 36px;}
header .tel_box p.tel a{color:#fff;}
header .tel_box p.tel:before{ content:"";  width:31px; height:45px; position:absolute; left:0; bottom:0; background:url(../images/tel.svg) no-repeat; background-size:cover;}
header .tel_box p.s_text{ font-size:1.2em; line-height:1.6em;}


header .nav_wrap{ width:100%; display: flex; justify-content: space-between; }
header nav {width:850px; max-width:90%; margin:50px 80px 0 auto;}
header ul.nav { display: flex; justify-content: space-between;}
header ul.nav li{font-size:1.2rem; line-height:1.4rem; padding:5px 20px;}
header ul.nav li span{ font-size:2rem; display:block; margin-bottom:5px;}

#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.9); padding:30px; position:absolute; right:0; top:0; z-index:2; box-sizing: border-box;}
#navi_toggle ul{ margin-bottom:50px;}
#navi_toggle ul li{ font-size:1.6rem; line-height:1.4em; text-align:left; padding-bottom:10px;}
#navi_toggle ul li span{ font-size:2rem; line-height:1.4em; display:inline-block; width:200px;}


/*フッター*/

footer{ width:1000px; max-width:90%; margin:0 auto; padding:100px 0; display:flex; justify-content: space-between; flex-wrap: wrap; text-align:left; }
footer .left_box{ width:400px; max-width:100%; padding:0; margin:0;}
footer .left_box h1.logo{ margin-bottom:30px;}
footer .left_box h2{ width:7em; font-weight:bold; margin-bottom:10px; font-size:1.8rem; line-height:1.2em; padding:15px 1em 0 0 ; position:relative;}
footer .left_box h2 span{ position:absolute; right:0; top:0; display:block; font-size:1.4rem; line-height:1.2em; font-weight:normal;}
footer .left_box p{font-size:1.4rem; line-height:1.4em; font-weight:500; margin-bottom:50px;}
footer ul.nav{ margin-bottom:50px;}
footer ul.nav li{ font-size:1.6rem; line-height:1.4em; text-align:left; padding-bottom:10px;}
footer ul.nav li span{ font-size:2rem; line-height:1.4em; display:inline-block; width:200px;}

footer .right_box{ width:330px;}
footer .right_box .tel_box a{ color:#46BAB3;}
footer .right_box .tel_box p{ font-size:1.6rem; line-height:1.2em; font-weight:bold;}
footer .right_box .tel_box p.tel,#flow .sec2 .step_box p.tel{ color:#46BAB3; font-size:3.8em; font-weight:bold; line-height:1.2em; position:relative; padding:10px 0 0 36px; margin-bottom:10px;}
footer .right_box .tel_box p.tel:before,#flow .sec2 .step_box p.tel:before{ content:"";  width:35px; height:50px; position:absolute; left:0; bottom:-5px;  mask-position: left bottom;
  mask-repeat: no-repeat;
  mask-size:cover;
  mask-image: url(../images/tel.svg);
  background:#46BAB3;}

footer .right_box .tel_box .mail{ font-size:2rem; line-height:1.2em; letter-spacing:0; background:#46BAB3; color:#fff; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; position:relative; padding:15px 20px 15px 75px;}
footer .right_box .tel_box .mail:before{ content:"";  width:50px; height:42px; position:absolute; left:15px; bottom:5px; background:url(../images/mail_icon.png) no-repeat; background-size:cover;}


/*共通*/
h1.title{ font-size:2rem; line-height:1.4em; margin:200px auto 100px; font-weight:500; text-align:center;}
h1.title span{ font-size:5rem; line-height:1.4em; display:block; padding-bottom:10px; font-family: 'Roboto', serif;}

header ul.nav li span,header .tel_box p.tel,footer ul.nav li span,span.price,.f_robo,.plan_contents h2 span,#price .sec2 table td.price span.yen
,#price .sec2 table th.plan_name span,#achivements .original_list .img_box div,#flow .sec2 .step_box h1 span{font-family: 'Roboto', serif;}

.more_btn_wrap{ text-align:center; width:100%;}
.more_btn{ display:inline-block; text-align:left; background:#fff; box-shadow:5px 5px #3E3531; margin:60px auto; border:2px solid #000; position:relative; font-size:2.2rem; line-height:1.2em; font-weight:bold; padding:40px 40px 40px 80px;}
.more_btn:hover{ color:#F7B300;}
.more_btn:before{ width:70px; height:74px; content:""; background:url(../images/btn_icon.jpg) no-repeat; background-size:cover; 
position:absolute; left:5px; bottom:0; top:0; margin:auto 0;}
.more_btn:hover:before{ width:80px; height:84px; content:""; background:url(../images/btn_icon.jpg) no-repeat; background-size:cover; 
position:absolute; left:0px; bottom:0; top:0; margin:auto 0; transition:0.2s;}


/*トップページ*/
#top h1.title1{ font-size:2.6rem; line-height:1.4em; margin:100px auto 80px; font-weight:bold;}

#top .mainimage{ width:1996px; margin:0 auto; max-width:100%; position:relative;}

#top .mainimage .text_wrap{ position:absolute; top:18%; left:0;}
#top .mainimage p { color:#fff; font-size:calc(1.6vw + 1rem); line-height:1.4em; font-weight:bold; padding:20px;}
#top .mainimage .text1 { background:rgba(35,24,21,0.8); border-radius:0 9999px 9999px 0; -webkit-border-radius:0 9999px 9999px 0; -moz-border-radius:0 9999px 9999px 0;}
#top .mainimage .text2 { background:rgba(35,24,21,0.8); border-radius:0 9999px 9999px 0; -webkit-border-radius:0 9999px 9999px 0; -moz-border-radius:0 9999px 9999px 0; margin-top:20px;}
/* background:rgba(76,165,165,0.8);*/
#top .mainimage .text3 {position:absolute; bottom:10%; left:0; font-size:calc(2vw + 1.8rem); background:rgba(235,109,142,0.8); padding:2% 2% 2% 4%;}

#top .mainimage .text3 span.price{ font-size:calc(2.2vw + 2.6rem);}
#top .mainimage .text3 span.s_text{ font-size:calc(1vw + 1.2rem);}

#top .sec1{background:#F0F1F1; padding:10px;}
#top .sec1 div{ background:#fff; width:1196px; max-width:95%; margin:50px auto; padding:4%; position:relative; z-index:2;}
#top .sec1 h1.title{margin:50px auto;}
#top .sec1 p{ width:900px; max-width:90%; margin:50px auto 20px;}



#top .sec2{ background:#46BAB3; margin-top:-180px; padding:10px;}
#top .sec2 div{ width:1100px; max-width:95%; margin:180px auto 50px;}
#top .sec2 p{ color:#fff; font-size:3.4rem; font-weight:bold;}
#top .sec2 p span.price{ font-size:5rem; padding:0 5px;}
#top .sec2 p.text2{ margin:50px auto 0; padding:15px 20px; text-align:center; line-height:1.2em; color:#46BAB3; background:#fff; font-size:2.8rem; border-radius: 9999px; -webkit-border-radius: 9999px; -moz-border-radius: 9999px; }


#top .sec3{ max-width:90%; margin:0 auto 200px;}
#top .sec4 { background:#F8CFD4; padding-bottom:100px;}
#top .sec4 .image_box{ position:relative; width:100%; max-width:100%; margin:0 auto;}
#top .sec4 .image_box img{ width:100%;}
#top .sec4 .image_box h1{ width:465px; max-width:50%; background:rgba(235,109,142,0.8); position:absolute; top:40%; left:0; font-size:2rem; line-height:1.2em; color:#fff; padding:30px 30px 30px 100px;}
#top .sec4 .image_box h1 span{ font-size:4.9rem; line-height:1.2em; display:block;}

#top .sec4 .feature_list_wrap{ width:1230px; max-width:100%; margin:0 auto; display:flex; justify-content: space-between; flex-wrap:wrap; padding:30px 0;}
#top .sec4 .feature_list_box{ width:390px; max-width:32%; padding:35px; background:#fff; margin:2% 0.5%; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; }
#top .sec4 .feature_list_box h2{ font-size:2.6rem; line-height:1.4em; font-weight:bold; margin-bottom:30px;}
#top .sec4 .feature_list_box h2 span:nth-child(1){ font-size:3.8rem; line-height:1.2em; display:block; font-weight:400;}
#top .sec4 .feature_list_box h2 span:nth-child(2){ font-size:9.5rem; line-height:1.2em; display:block; font-weight:400;}
#top .sec4 .feature_list_box h2 span.s_text{ font-size:1.8rem; line-height:1.2em; display:inline-block; padding-top:10px;}
#top .sec4 .feature_list_box p{ line-height:2.4em;}


#top .sec5{ max-width:90%; margin:0 auto;}
.plan_box{ width:940px; max-width:100%; margin:20px auto 40px; display:flex; justify-content:left; flex-wrap:wrap; align-items: flex-start;}
.plan_contents{ width:calc(100% - 180px); margin-left:20px;}
.plan_box:nth-of-type(1) .plan_contents h2{ color:#EB6D8E;}
.plan_box:nth-of-type(2) .plan_contents h2{ color:#46BAB3;}
.plan_box:nth-of-type(3) .plan_contents h2{ color:#F7B300;}

.plan_contents h2{ font-size:3.2rem; line-height:1.6em; border-bottom:2px solid #221814; font-weight:bold; padding:30px 0 5px 0; }
.plan_contents h2 span:nth-child(1){ font-size:4.4rem;}
.plan_contents h2 span:nth-child(2){ font-size:5.8rem; padding-left:10px;}


#top .sec6 .title_box{ display:flex; justify-content:center; flex-wrap:wrap; background:#D4EBEC; align-items: flex-start; padding-bottom:200px;}
#top .sec6 .title_box img{ margin-top:80px; max-width:30%;}
#top .sec6 .title_box div{ width:720px; max-width:70%; text-align:center;}

#top .sec6 .title_box div h1.title{ margin-bottom:60px;}
#top .sec6 .title_box div p{ width:500px; max-width:100%; margin:0 auto;}

#top .sec6 .achivements_wrap{ background:#46BAB3; padding:10px 0px 80px;}
#top .sec6 ul.achivements_list{ margin:-100px auto 80px; width:1100px; max-width:100%; display:flex; justify-content:center; flex-wrap:wrap;}
#top .sec6 ul.achivements_list li{ width:330px; box-shadow:1px 1px 3px #CCCCCC; margin:15px;}


#feature .sec1{ background:#D4EBEC; padding:10px 0;}
#feature .sec1 .contents{ width:1160px; max-width:95%; margin:150px auto; padding:5%; background:#fff; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px;}
#feature .mainimage{ width:920px; max-width:100%; margin:70px auto; display:flex; justify-content:center; flex-wrap:wrap; align-items: flex-start;}
#feature .sec1 h1{ width:920px; max-width:90%; margin:30px auto 0; font-size:4.2rem; line-height:1.6em; font-weight:bold;}
#feature .sec1 .mainimage h2{ font-size:3.4rem; line-height:1.6em; font-weight:bold;}
#feature .sec1 .mainimage img{ max-width:40%;}
#feature .sec1 .mainimage h2 span:nth-of-type(1) { background:#EB6D8E; color:#fff; padding:20px; display:inline-block; margin:10px 0;}
#feature .sec1 .mainimage h2 span:nth-of-type(2) { background:#46BAB3; color:#fff; padding:20px; display:inline-block; margin-bottom:10px;}
#feature .sec1 .contents p{ font-size:1.6rem; width:920px; max-width:100%; margin:0 auto; line-height:2.4em; padding:20px 0;}


#price .sec1 { background:#F9D3DA; padding:10px 0;}
#price .sec1 .contents{ width:1160px; max-width:95%; margin:70px auto; padding:5%; background:#fff; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px;}

#price .sec2  { width:1120px; max-width:100%; margin:100px auto;}
#price .sec2 .title1{ font-size:3.2rem; max-width:90%; margin:0 auto; line-height:1.6em; text-align:center; font-weight:bold;}
#price .sec2 .table_wrap{ width:1150px; max-width:96%; overflow:auto; margin:0 auto;}

#price .sec2 table{ width:1050px; max-width:1050px; margin:50px auto; text-align:left;}

#price .sec2 table th{ width:220px; font-size:1.6rem; line-height:1.4em; font-weight:normal; padding:15px; border:1px solid #221814; box-sizing: border-box;}
#price .sec2 table th.plan_name{ font-size:2.6rem; line-height:1.4em; border:3px solid #fff; border-bottom:none; color:#fff; font-weight:bold; text-align:center;}
#price .sec2 table th.plan_name span{ font-size:3.6rem; padding-right:5px;}
#price .sec2 table th.plan_name:nth-of-type(1){ border:none;}
#price .sec2 table th.plan_name:nth-of-type(2){ width:290px; background:#EB6D8E;}
#price .sec2 table th.plan_name:nth-of-type(3){ width:290px; background:#46BAB3;}
#price .sec2 table th.plan_name:nth-of-type(4){ width:290px; background:#F7B300;}

#price .sec2 table th span{ font-size:1rem; line-height:1.2em; display:inline-block;}
#price .sec2 table td{ font-size:1.4rem; vertical-align:top; line-height:1.6em; padding:20px 15px; border:1px solid #221814; }
#price .sec2 table td.price{ font-size:2.6rem; line-height:1.6em; text-align:center; font-weight:bold;}
#price .sec2 table td.price span.yen{ font-size:4.6rem;}
#price .sec2 table td.price:nth-of-type(1){ color:#EB6D8E;}
#price .sec2 table td.price:nth-of-type(2){ color:#46BAB3;}
#price .sec2 table td.price:nth-of-type(3){ color:#F7B300;}
#price .sec2 table td.price span.year { color:#221814; font-size:1.6rem; line-height:1.4em; text-align:right; display:block; width:100%;}
#price .sec2 table td.tf span { display:inline-block; width:100%; text-align:center;}
#price .sec2 table td.tf{ vertical-align:middle;}
#price .sec2 table td span.s_text{ font-size:1.2rem; line-height:1.4em;}


#achivements p{ width:880px; max-width:90%; margin:20px auto;}
#achivements h1.plan_title{ font-size:2.1rem; line-height:1.6em; font-weight:bold; position:relative; padding:30px 0 0 90px; display:inline-block; margin:200px auto 10px;}
#achivements .simple h1.plan_title:before{ content:""; width:75px; height:94px; content:""; background:url(../images/plan_icon1.jpg) no-repeat; background-size:cover; position:absolute; left:5px; bottom:0;}
#achivements .original h1.plan_title:before{ content:""; width:75px; height:94px; content:""; background:url(../images/plan_icon3.jpg) no-repeat; background-size:cover; position:absolute; left:5px; bottom:0;}
#achivements h1.plan_title span{ font-size:3.2rem; line-height:1.6em;}
#achivements h1.plan_title span:first-child{ font-size:4.4rem;}
#achivements .simple h1.plan_title span{ color:#EB6D8E;}
#achivements .original h1.plan_title span{ color:#F7B300;}

#achivements .design_list_wrap{ background:#F8FBFC; padding:10px 0;}
#achivements .design_list_wrap a:hover{ opacity:0.8;}
#achivements .design_list_wrap>div{ width:1140px; max-width:95%; margin:70px auto; display:flex; justify-content:center; flex-wrap:wrap;}
#achivements ul.img_box{ width:700px; display:flex; justify-content: left; flex-wrap:wrap; text-align:left;}
#achivements ul.img_box li { margin:1%;}
#achivements ul.img_box li img{ border:1px solid #CCC;}
#achivements .img_box .pc_icon { font-size:1.6rem; line-height:1.2em; padding:3px 5px; color:#fff; background:#EB6D8E; display:inline-block; margin-top:10px;}
#achivements .img_box .mobile_icon { font-size:1.6rem; line-height:1.2em; padding:3px 5px; color:#fff; background:#46BAB3; display:inline-block; margin-top:10px;}
#achivements .img_box li:nth-of-type(1){ width:450px; max-width:65%;}
#achivements .img_box li:nth-of-type(2){ width:200px; max-width:30%;}

#achivements .text_box{ width: calc(100% - 700px); text-align:left;}
#achivements .text_box p{ padding:10px; width:100%; margin:0;}
#achivements .original .design_list .text_box h2{font-size:2rem; line-height:1.4em; font-weight:bold; border-bottom:1px dotted #221814; padding:10px 10px 5px;}
#achivements .simple .design_list .text_box h2{ display:inline-block; padding:5px 15px; font-size:2rem; line-height:1.4em; border:1px solid #333; background:}




#qa dl{ width:1060px; max-width:95%; margin:80px auto; border-top:1px dotted #C9C9CA; text-align:left;}
#qa dl dt{ font-size:2rem; line-height:1.6em; padding:20px 20px 20px 73px; border-bottom:1px dotted #C9C9CA; position:relative;}
#qa dl dd{ font-size:1.6rem; line-height:1.6em; padding:40px 20px 40px 73px; border-bottom:1px dotted #C9C9CA; position:relative;}

#qa dl dt:before{ width:57px; height:57px; content:""; background:url(../images/qa_icon1.png) no-repeat; background-size:cover; 
position:absolute; left:5px; bottom:0; top:0; margin:auto 0;}

#qa dl dd:before{ width:57px; height:57px; content:""; background:url(../images/qa_icon2.png) no-repeat; background-size:cover; 
position:absolute; left:5px; bottom:0; top:0; margin:auto 0;}

#flow .sec1 p{ width:880px; max-width:90%; margin:50px auto;}
#flow .sec1 p.main_text{ font-size:3.2rem; line-height:1.6em; text-align:center; font-weight:bold;}
#flow .sec2{ background:#F9D3DA; padding:10px 0;}
#flow .sec2 .step_box{ width:1140px; max-width:95%; margin:15px auto; padding:70px 20px 60px 50px; display:flex; justify-content: space-between; flex-wrap:wrap; align-items: flex-end; background:#fff; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px;}
#flow .sec2 .step_box .left_box{ width:700px; max-width:68%;}
#flow .sec2 .step_box:nth-of-type(6){ align-items:flex-start;}
#flow .sec2 .step_box .right_box{ max-width:30%;}
#flow .sec2 .step_box h1{ font-size:3.2rem; line-height:1.4em; color:#EB6D8E; font-weight:bold; position:relative; padding:43px 0 0 120px;}
#flow .sec2 .step_box h1 span{ font-size:3.8rem; text-align:center; display:inline-block; padding:0 20px; position:absolute; left:0; top:0;}
#flow .sec2 .step_box h1 span span{ font-size:4.8rem; position:static;}

#flow .sec2 .step_box p{ margin:50px 0 25px 145px;}
#flow .sec2 .step_box p.tel_text{ margin:10px 0 40px 145px;}



/*.gmap {
position: relative;
width:800px;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

*/ 
 
 
/*a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

*/

#privacy { width:800px; max-width:90%; margin:60px auto;}
#privacy h2{ max-width:100%; font-size:1.8rem; line-height:1.4em; margin:30px auto 16px; font-weight:500;}
#privacy h3{ max-width:100%;  font-size:1.6rem; line-height:1.6em; margin:0 auto 5px;}
#privacy p{ max-width:100%; font-size:1.4rem; line-height:1.6em; margin-bottom:20px;}
#privacy .sec1 section{ margin-bottom:60px;}



#sitemap ul{ width:500px; max-width:90%; margin:150px auto 100px;}
#sitemap ul li{ font-size:1.6rem; line-height:1.4em; text-align:left; padding-bottom:25px;}
#sitemap ul li span{ font-size:2rem; line-height:1.4em; display:inline-block; width:250px; max-width:50%;}


#contact .mainimage{ width:1996px; margin:0 auto; max-width:100%; position:relative;}
#contact .mainimage img{ width:100%;}
#contact .mainimage h1.title{ color:#fff; position:absolute; left:10%; top:0;}
#contact p{ width:880px; max-width:90%; margin:120px auto;}
#contact .mailform_wrap{ background:#D4EBEC; width:1000px; max-width:100%; margin:0 auto; padding:1px;}
#contact .mailform_box{ background:#fff; width:860px; max-width:84%;  margin:8%;}


.thanks h2{ width:880px; max-width:90%; font-size:2.4rem; line-height:1.6em; text-align:left; margin:100px auto 50px; font-weight:bold;}
#contact.thanks p{ width:880px; max-width:90%; margin:60px auto;}










@media screen and (max-width: 1090px){
#top .sec2 p{font-size:2.8rem;}
#top .sec2 p span.price{ font-size:4rem;}
#top .sec2 p.text2{ font-size:2.4rem; padding:15px 30px;}
#top h1.title1{ font-size:2.4rem; margin:50px auto;}
#top .sec4 .feature_list_box{ width:500px; max-width:46%; padding:35px; background:#fff; margin:2%; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; }



#price .sec2 table{ width:1100px; max-width:900px; margin:50px auto; text-align:left;}

#price .sec2 table th{ width:150px; font-size:1.4rem; padding:10px;}
#price .sec2 table th.plan_name{ font-size:2rem;}
#price .sec2 table th.plan_name span{ font-size:3rem;}

#achivements .design_list_wrap>div{ width:700px; display:block;}
  #achivements .text_box{ width:100%;}
  #achivements ul.img_box{ width:100%;}
  

#flow .sec2 .step_box{ padding:50px 10px 50px 30px; display:flex; justify-content: space-between; flex-wrap:wrap; align-items: flex-end; background:#fff; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;}
#flow .sec2 .step_box h1{ font-size:3rem;}
#flow .sec2 .step_box h1 span{ font-size:3.6rem; padding:0 15px;}
#flow .sec2 .step_box h1 span span{ font-size:4.4rem;}
#flow .sec2 .step_box p{ margin:30px 0 15px 125px;}
#flow .sec2 .step_box p.tel_text{ margin:10px 0 30px 125px;}

}


@media screen and (max-width: 960px){
header .nav_wrap,header ul.sns_nav{ display:none;}
header #menubtn{ display:block;}


}
@media screen and (max-width: 900px){
#top .sec4 .feature_list_wrap{ display:block; padding:10px;}
#top .sec4 .feature_list_box{ width:90%; max-width:90%; margin:40px auto; }

#top .mainimage .text_wrap { top:10%;}
#top .mainimage .text3 { }



#feature .sec1 h1{ font-size:3.4rem; }
#feature .sec1 .mainimage h2{ font-size:2.6rem;}
#feature .sec1 .contents p{line-height:2em;}

#price .sec2 table{ width:720px; }
#price .sec2 table th{ width:120px;}
#price .sec2 table th.plan_name:nth-of-type(2){ width:200px;}
#price .sec2 table th.plan_name:nth-of-type(3){ width:200px;}
#price .sec2 table th.plan_name:nth-of-type(4){ width:200px;}
#price .sec2 table th.plan_name{ font-size:1.8rem;}
#price .sec2 table th.plan_name span{ font-size:2.4rem;}
#price .sec2 table td.price{ font-size:2rem;}
#price .sec2 table td.price span.yen{ font-size:3.6rem;}



}
@media screen and (max-width: 850px){
	
#flow .sec2 .step_box{ padding:50px 10px 50px 20px; display:block;  border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;}
#flow .sec2 .step_box .left_box{max-width:100%; margin:0 auto;}
#flow .sec2 .step_box .right_box{ max-width:100%; margin:0 auto;}
#flow .sec2 .step_box .right_box img{ max-width:80%;}

#flow .sec2 .step_box p{ max-width:95%; margin:50px auto 25px;}
#flow .sec2 .step_box p.tel_text{ margin:10px auto 30px;}


}




/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
header .tel_box p{ font-size:1.4rem;}
header .tel_box p.tel{ font-size:2.8em; padding:10px 0 0 25px;}
header .tel_box p.tel:before{ content:"";  width:20px; height:29px;}
header .tel_box p.s_text{ font-size:1em; line-height:1.6em;}



#top .sec2 p{font-size:2.4rem;}

h1.title{ font-size:1.8rem; margin:150px auto 70px;}
h1.title span{ font-size:4rem; }

.plan_contents h2{ font-size:2.8rem; }
.plan_contents h2 span:nth-child(1){ font-size:3.8rem;}
.plan_contents h2 span:nth-child(2){ font-size:5rem;}

#feature .mainimage{ width:340px; margin:50px auto; display:block;}
#feature .sec1 h1{  font-size:2.8rem;}
#feature .sec1 .mainimage img{ max-width:100%;}
#feature .sec1 .contents p{line-height:1.8em; padding:10px 0;}
#feature .sec1 .mainimage h2 span{ display:block; width:100%; text-align:center;}
#feature .sec1 .contents{ margin:100px auto; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;}
#price .sec1 .contents{border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;}
}





/*660以下 */
@media screen and (max-width: 660px){
header .tel_box{  padding:15px 5px 10px 15px; margin:70px 0 0 0; border-radius:20px 0 0 20px; -webkit-border-radius:20px 0 0 20px; -moz-border-radius:20px 0 0 20px; }
header .tel_box p.tel{ font-size:2.2em;}
header .logo{ margin:10px 15px 10px 15px; max-width:35%;}

#top .sec3{ margin:0 auto 100px;}
#top .sec4 .image_box h1{ max-width:60%; position:absolute; top:40%; left:0; font-size:1.6rem; padding:20px 20px 15px 50px;}
#top .sec4 .image_box h1 span{ font-size:3.6rem;}
#top .mainimage .text_wrap { max-width:60%; }
#top .mainimage .text3 { bottom:15%; left:0; padding:5% 4%;}

#top .sec4 .feature_list_box{ padding:30px;}
#top .sec4 .feature_list_box h2{ font-size:2rem; margin-bottom:20px;}
#top .sec4 .feature_list_box h2 span:nth-child(1){ font-size:2.8rem;}
#top .sec4 .feature_list_box h2 span:nth-child(2){ font-size:7.5rem;}
#top .sec4 .feature_list_box h2 span.s_text{ font-size:1.6rem;}
#top .sec4 .feature_list_box p{ line-height:1.8em;}

#top .sec6 .title_box{ display:block;}
#top .sec6 .title_box img{ margin-top:80px; width:280px; max-width:80%;}
#top .sec6 .title_box div{ max-width:90%; margin:0 auto;}

#top .sec6 .title_box div h1.title{ margin:20px auto 50px;}
#top .sec6 .title_box div p{ width:500px; max-width:100%; margin:0 auto;}


#contact p{ margin:70px auto;}





#footer_wrap{ padding:30px 0;}

footer .left_box{ width:100%; padding:0; margin:0;}
footer .logo{max-width:60%;}
footer .right_box{ max-width:100%;}
footer .right_box ul{margin:30px 0 ; }
footer .right_box ul li{ padding:8px 15px; text-align:left;}
footer .right_box ul li.reserve_btn{margin:0 0 30px 0;}

}

/*560以下 */
@media screen and (max-width: 560px){
#top .mainimage .text3 { bottom:0%; width:100%; left:0; font-size:calc(1.8vw + 1.6rem); padding:5% 4%;}

#top .sec2 p.text2{ font-size:1.8rem; }
#top h1.title1{ font-size:2rem; margin:50px auto;}
#price .sec2 .title1{ font-size:2.4rem;}

.plan_box{ display:block; }
.plan_contents{ width:100%; margin-left:0;}

.plan_contents h2{ font-size:2.2rem; margin-bottom:10px;}
.plan_contents h2 span:nth-child(1){ font-size:3rem;}
.plan_contents h2 span:nth-child(2){ font-size:4rem; padding-left:2px;}


footer ul.nav li,#navi_toggle ul li{ font-size:1.4rem; }
footer ul.nav li span,#navi_toggle ul li span{ font-size:2rem; line-height:1.4em; display:block; width:100%;}

#achivements h1.plan_title{ font-size:1.8rem; }
#achivements h1.plan_title span{ font-size:2.6rem;}
#achivements h1.plan_title span:first-child{ font-size:3.6rem;}

#achivements .img_box li:nth-of-type(1){ max-width:100%; margin:10px auto;}
#achivements .img_box li:nth-of-type(2){ max-width:100%; margin:10px auto;}

#flow .sec2 .step_box h1{ font-size:2.6rem; padding:0px 0 0 10px;}
#flow .sec2 .step_box h1 span{ font-size:3.2rem; text-align:center; display:block; padding:0 5px 15px; position:relative; text-align:left;}
#flow .sec2 .step_box h1 span span{ font-size:4rem; position:static; padding:0 5px;}
#flow .sec2 .step_box p.tel{font-size:2.8em;}
#flow .sec2 .step_box p.tel:before{ content:"";  width:30px; height:43px; }
#flow .sec2 .step_box:first-child .right_box img{ width:180px;}


/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 70%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
	
}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
.spno{ display:none;}
p{ font-size:1.4rem; line-height:1.6em;}

.more_btn{ padding:30px 20px 30px 70px; font-size:1.8rem; margin:20px auto;}
.more_btn:before{ width:60px; height:63px; content:""; }
.more_btn:hover:before{ width:70px; height:74px;}


header .header_top{ display: block; }
header .tel_box{ width:420px; max-width:100%; padding:15px 25px 10px 25px; margin:10px auto 0; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px}
header {padding-bottom: 0px;}

h1.title{ font-size:1.6rem; margin:100px auto 50px;}
h1.title span{ font-size:3.2rem; }

#top .sec4{padding-bottom:30px;}
#top .sec4 .image_box h1{ max-width:60%; font-size:1.4rem; padding:20px 20px 15px 20px;}
#top .sec4 .image_box h1 span{ font-size:2.8rem;}

#top .sec2 div{ margin:150px auto 30px;}
#top .sec2 p.text2{ margin:40px auto 0; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; }
#top .sec2 p{ font-size:2rem; line-height:1.6em;}
#top .sec2 p span.price{ font-size:3rem;}

.plan_box img{ width:120px;}
.plan_contents h2{ padding-top:10px;}

#feature .sec1 h1{  font-size:2.4rem; max-width:100%;}
#feature .sec1 .mainimage h2{ font-size:2.2rem;}
#feature .mainimage{ margin:20px auto; display:block;}
#feature .sec1 .contents{ margin:50px auto;}

#achivements h1.plan_title{ font-size:1.6rem; padding:25px 0 0 70px;}
#achivements h1.plan_title span{ font-size:1.8rem;}
#achivements h1.plan_title span:first-child{ font-size:2.8rem;}
#achivements .simple h1.plan_title:before{ content:""; width:60px; height:74px; content:""; background:url(../images/plan_icon1.jpg) no-repeat; background-size:cover; position:absolute; left:5px; bottom:0;}
#achivements .original h1.plan_title:before{ content:""; width:60px; height:74px; content:""; background:url(../images/plan_icon3.jpg) no-repeat; background-size:cover; position:absolute; left:5px; bottom:0;}


#sitemap ul{ width:270px; max-width:90%; margin:80px auto 50px}
#sitemap ul li span{ font-size:2rem; line-height:1.4em; display:-block; width:100%; max-width:100%;}



#contact .mailform_box{ max-width:92%;  margin:4%;}
#contact p{ margin:40px auto;}


}

@media screen and (max-width: 330px){
	
#top .mainimage .text_wrap{ top:10%; max-width:70%; }
#top .mainimage .text2 { margin-top:10px;}
#top .mainimage p{ padding:10px; }


h1.title{ font-size:1.4rem; margin:80px auto 30px;}
h1.title span{ font-size:3rem; }

#top .sec4 .feature_list_box{ width:95%; max-width:95%; margin:10px auto; padding:20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
#feature .sec1 .mainimage h2{ font-size:2rem;}
#feature .sec1 .mainimage h2 span:nth-of-type(1),#feature .sec1 .mainimage h2 span:nth-of-type(2){ padding:10px;}

footer{ width: 280px; max-width:95%;}
footer .right_box .tel_box p.tel{font-size:2.8em;}
footer .right_box .tel_box .mail{ display:inline-block; max-width:100%; font-size:1.6rem; padding:10px 20px 10px 60px;}
footer .right_box .tel_box p.tel:before{ content:"";  width:30px; height:43px; }
footer .right_box .tel_box .mail:before{ content:"";  width:40px; height:32px; }
	
#qa dl dt{ font-size:1.8rem; padding:10px 20px 10px 63px;}
#qa dl dd{ font-size:1.4rem; padding:30px 20px 30px 63px;}

#qa dl dt:before{ width:47px; height:47px; content:"";}
#qa dl dd:before{ width:47px; height:47px; content:"";}



}