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

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300&subset=latin,greek);


* {box-sizing:border-box;}
a, a:after {-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; outline:none;}
a {cursor:pointer;}
div,ol,ul,li,p,span,a {position:relative;}
ol,ul,li {list-style:none;list-style-type:none;padding:0;}
body,header,footer,menu,p {padding:0;margin:0;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;margin:0;padding:0;line-height:1em;}
div,a,img,p,li {display:block;}
/*a:hover img {opacity:0.75;}*/



body {background-color:#fff;color:color:rgb(0,77,57);;font-size:16px;width:100%;
font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#wrapper {overflow:hidden;}

/*ヘッダー*/
header {width:100%;}
header > div {max-width:980px;padding:3px 0 0;margin:0 auto;width:100%;}
header h1 {text-align:center;}
header h1 img {width:100%;max-width:570px;display:inline-block;}

/**/
#contentWrapper {}
 
img.mainimage {width:100%;}

/*groval_navigation*/
#gnavi {width:100%;display:table;margin:0.5em 0 0;}
#gnavi a {display:table-cell;text-decoration:none;padding:0.75em;background-color:#9c9;color:#fff;font-size:1.25em;font-weight:400;text-align:center;border-right:1px solid #54945d;}
#gnavi a.estimate {background-color:#e70;}
/*#gnavi a.thispage {background-color:rgb(0,77,57);cursor:default;}*/
#gnavi a:last-child {border-right:none;}
#gnavi a:hover {background-color:rgb(0,77,57);}
/*#gnavi a.thispage:hover {background-color:rgb(0,77,57);}*/

/*contents*/
#content {color:rgb(0,77,57);max-width:980px;width:90%;margin:0 auto;padding:0 0 20px;}
#content h2 {font-size:3em;font-weight:600;text-align:center;margin:40px 0 0;position:relative;}
#content h2:before {content:"";width:50px;height:0;display:block;position:absolute;top:25px;left:25px;border-top: 2px dotted rgb(0,77,57);transform:rotate(45deg);}
#content h2:after {content:"";width:50px;height:0;display:block;position:absolute;top:25px;right:25px;border-top: 2px dotted rgb(0,77,57);transform:rotate(-45deg);}

#content span {display:block;/*text-align:center;*/}
#content > span　{}
#content > span.prologue {margin:20px 0;font-size:1.25em;font-weight:600;}
#content > span.catch {font-size:1.25em;font-weight:600;margin:1.5em 0 0.5em;}
#content > span.tel {font-size:6em;font-family: 'Open Sans', sans-serif;font-weight:600;line-height:1em;}
#content > span.tel:before {content:url(../img/icon_tel_100.png);position:relative;top:0.15em;margin-right:0.15em;}
#content > span.time {text-align:right;font-weight:600;padding-right:8em;}
#content > span.mail {font-size:3em;font-family: 'Open Sans', sans-serif;}
#content > span.mail:before {content:url(../img/icon_mail_80.png);position:relative;top:0.25em;margin-right:0.15em;}
#content > span.form {font-size:2em;margin:0.3125em 0 0.625em;font-weight:600;}

#content > span > a {text-decoration:none;color:rgb(0,77,57);display:inline-block;}
#content > span > a:hover {color:#e70;text-decoration:underline;}


#content div.card {background-color:rgb(236,245,235);border-top:2px solid rgb(0,77,57);padding:10px;font-weight:500;font-size:1.125em;max-width:980px;height:auto;width:100%;margin-bottom:20px;}


#content div > h3 {font-weight:600;font-size:2.25em; font-style:italic;margin:0 0 10px;border-bottom:1px solid rgb(0,77,57);padding:0 0 0.35em;line-height:1em;}
#content div > span.prologue {color:#222;margin-bottom:0.5em;line-height:1.5em;font-size:0.85em;}
#content div > span.kome {font-size:0.7em;color:#333;}
#content div > span.plus {color:#e70;/*font-size:1.3em;*/line-height:1.3em;}
#content div > span.line {margin:0.5em 0;}
#content div > img.w65 {width:65%;max-width:670px;}
#content div > img.w60 {width:60%;max-width:600px;}
#content div > img.w50 {width:50%;max-width:500px;}
#content div > a img.w40 {width:40%;max-width:400px;}

#content div > div.assess {width:32%;float:left;padding:0.2em;margin-right:2%;font-weight:500;}
#content div > div.assess:last-child {margin-right:0;}
div.assess img {width:100%;}
div.assess a:hover img {opacity:0.75;}
div.assess h4 {line-height:1.5em;font-size:1.5em;font-weight:700;}
div.assess p {font-weight:600;color:#54945d;} 
div.assess p:before {content:"";}

#content #qanda {font-weight:500;font-size:1em;}
#content #qanda p.q {font-weight:600;color:#e70;}
#content #qanda p.a {margin-bottom:1.25em;}
#content #qanda p a {display:inline-block;}
#content #qanda p a:hover {color:#e70;}

#content #require, #content #identify {margin:50px 0; width:100%;border:2px solid rgb(0,77,57);padding:20px 12px 12px;border-radius:11px;font-weight:600;font-size:1.125em;}
#content #require h4, #content #identify h4 {position:absolute;top:-0.5em;left:1em;background-color:#fff;padding:0 1em;font-weight:600;font-size:1.25em;}
#content #require > span, #content #identify > span {font-size:0.875em;display:inline-block;font-weight:400;margin-left:0.5em;text-align:left;}
#content #require > span.kome, #content #identify > span.kome {font-size:0.75em;top:-0.2em;font-weight:500;}
#content #require > p {font-size:0.875em;color:#06c;}
#content #require a {display:inline-block;}
#content #require a:hover {color:#e70;}
#content #identify ul {margin:0;}
#content #identify ul li {display:list-item;padding-left: 0px;list-style:disc;list-style-type:disc; list-style-position:inside;}

#adbnrs {margin:20px 0 0;width:100%;padding:0 0;}
#adbnrs h4 {font-size:1.25em;font-weight:600;background-color:rgb(0,77,57);color:#fff;padding:0.375em;margin-bottom:0.5em;background-image: linear-gradient(rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent);background-size: 2px 2px;text-shadow:0.2em 0.2em 0.2em #004c38,-0.2em 0.2em 0.2em #004c38,-0.2em -0.2em 0.2em #004c38,0.2em -0.2em 0.2em #004c38; text-align:center;}
#adbnrs h4:after {}
#adbnrs a {float:left;width:24%;margin-right:1%;}
#adbnrs .used {width:49%; }
#adbnrs a:last-child {margin-right:0;}
#adbnrs a img {width:100%; margin-bottom: 5px;}


/*フッター*/
footer {background-color:rgb(0,0,0);color:#fff;width:100%;}
p.copyright {font-family: 'Open Sans', sans-serif;font-weight:400;font-size:0.75em;text-align:center;line-height:2em;}
span.pmnumber {font-size:0.5em;text-align:center;display:block;padding-top:0.5em;}

/*ページトップへ*/
.pagetop {display: none;position: fixed;bottom: 30px;right: 35px;z-index:+20;}
.pagetop a {display: block;width: 50px;height: 50px;background-color: rgba(0,150,100,0.7);text-align: center;color: #fff;font-size: 24px;text-decoration: none;line-height: 50px;border-radius:25px;outline:none;}

/*汎用*/
.mincho {font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.serif {font-family:  "Times New Roman", Times, serif, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝";}
.gothic {font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.boxshadow {box-shadow: 2px 2px 4px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.5); -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);}
.txthshadow {text-shadow:1px 1px 1px #fff,-1px 1px 1px #fff,-1px -1px 1px #fff,1px -1px 1px #fff;}
.clearfix:after {content:"";display:block;position:relative;clear:both;}

.spshow {display:none;visibility:hidden;}

/*1088px_90%が980を切るライン*/
@media screen and (max-width: 68em) {
	#content > span.time {padding-right:8em;}
}

/*1054px*/
@media screen and (max-width: 65.9em) {
	#content h2:before {border:none;}
	#content h2:after {border:none;}
}

/*980px*/
@media screen and (max-width: 61em) {
	#content > span.time {padding-right:6em;}
}

/*894px*/
@media screen and (max-width: 55.9em) {
}

/*830px*/
@media screen and (max-width: 51.9em) {
	#gnavi a {font-size:1em;}
	#content h2 {font-size:2.5em;}
	#content > span.prologue, #content > span.target {text-align:left;}
	#content > span.tel {font-size:5em;}
	#content > span.mail {font-size:2.5em;}
	#content > span.form {font-size:1.5em;}
	#content > span.time {padding-right:0;}
	#content div > div.assess {width:100%;margin-right:0;margin-bottom:2%;}
	#content div > div.assess:after {content:"";display:block;position:relative;clear:both;}
	#content div > div.assess img {width:35%;float:left;margin-right:0.5em;}
	#adbnrs a img {margin-bottom: 0;}
	.bnrs {display: flex; flex-wrap: wrap; justify-content: center;}
	#adbnrs a {width:32.6%;margin-right:1%;margin-bottom:1.5%;}
	#adbnrs .used {width:66.2%;}
	#adbnrs a:nth-child(3) {margin-right:0;}
	/**#adbnrs a:nth-child(3n+1) {margin-right:0;}**/
}

/*736px*/
@media screen and (max-width: 46.1em) {
	#gnavi {display:block;}
	#gnavi a {display:block;float:left;width:33.3%;border-right:0;padding:0.5em;}
	#gnavi a:nth-child(3n-1) {border-right:1px solid #54945d;border-left:1px solid #54945d;}
	#gnavi a:nth-child(-n+3) {border-bottom:1px solid #54945d;}
	#content {width:98%;}
	#content > span.prologue {font-size:1em;}
	#content > span.tel {font-size:4em;}
	#content > span.mail {font-size:2em;}
	#content > span.store {font-size:1.5em;}
	#content div.card {width:100%;min-height:20px;height:auto;max-width:736px;}
	#content div.card:last-child {width:100%;height:auto;}
}

@media screen and (max-width: 41.7em) {
	#content h2 {font-size:2.25em;}
}

/*606px*/
@media screen and (max-width: 37.9em) {
	.sphide {display:none;visibility:hidden;}
	.spshow {display:inline-block;visibility: visible;}
	#content div > div.assess img {width:100%;float: none;margin-right:0em;}
	#content #require h4, #content #identify h4 {padding:0 0.25em;font-size:1em;}
	#content div > img.w65 {width:100%;max-width:670px;}
	#content div > img.w60 {width:100%;max-width:600px;}
	#content div > img.w50 {width:100%;max-width:500px;}
	#content div > a img.w40 {width:100%;max-width:400px;}
}

/*529px*/
@media screen and (max-width: 34.5em) {
	#gnavi a {width:50%;border-bottom:}
	#gnavi a:nth-child(3n-1) {border-right:none;border-left:none;}
	#gnavi a:nth-child(-n+3) {border-bottom:none;}
	#gnavi a:nth-child(2n-1) {border-right:1px solid #54945d;}
	#gnavi a:nth-child(6n-3), #gnavi a:nth-child(6n-2) {border-top:1px solid #54945d;border-bottom:1px solid #54945d;}
}


/*430px*/
@media screen and (max-width: 26.9em) {
	#content h2 {font-size:1.5em;margin-top:0.375em;border-top:2px dotted #e70;padding-top:0.75em;}
	#content > span.catch {border-bottom:2px dotted #e70;padding-bottom:0.5em;}
	#content > span.prologue {margin-top:0.5em;}
	#content > span.tel {font-size:3em;color:#e70;}
	#content > span.time {color:#e70;} 
	#content > span.mail {font-size:1.625em;color:#e70;}
	#content > span.store {font-size:0.9em;}
	#content > span.tel:before {content:url(../img/icon_tel_40_or.png);top:0.05em;}
	#content > span.mail:before {content:url(../img/icon_mail_30_or.png);}
	#content > span.form {font-size:1.375em;color:#e70;}
	#content > span > a {color:#e70;}
	#content > span > a:hover {color:#f00;}
	#content div > h3 {font-size:1.875em;line-height:1.2em;}
	#adbnrs a {width:49.5%;margin-right:1%;}
	#adbnrs .used { width:99%; }
	#adbnrs a:nth-child(3n+1) {margin-right:1%;}
	#adbnrs a:nth-child(2n+1) {margin-right:0;}
}

/*375*/
@media screen and (max-width: 23.5em) {
	#content h2 {font-size:1.35em;}
	#content > span.catch {font-size:1.125em;}
	#content > span.mail {font-size:1.5em;}
	#content > span.form {font-size:1.25em;}
}

/*360*/
@media screen and (max-width: 22.6em) {
	#content h2 {font-size:1.25em;}
}

/*320*/
@media screen and (max-width: 20.1em) {
	#gnavi a {font-size:0.875em;}
	#content > span.catch {font-size:0.9em;}
	#content > span.tel {font-size:2.5em;}
	#content > span.mail {font-size:1.25em;}
	#content > span.form {font-size:1.125em;}
	#content h2 {font-size:2em;}
}