@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;}

.contact { width: 100%; padding: 1.0rem 0.5rem; margin: 0 auto; background-color:rgb(236,245,235); }
.contact > .content a img { transition: 0.4s; width: 50%; float: left;}
.contact > .content a:hover img { opacity: 0.8;}

.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 .full {width:100% !important; padding:0 0 1% 0;}/*バナー欄　幅いっぱい用*/

.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 {width:32.6%;margin-right:1%;margin-bottom:1.5%;}*/
	.adbnrs a img {margin-bottom: 0;}
	.bnrs {display: flex; flex-wrap: wrap; justify-content: center;}
	.adbnrs .used {width:66.5%;}
	.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;}
    .contact > .content a img { width: 100%;}
}

@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;}
}


/******** 小さいバナー *******
上の弦楽器のバナー画像にブレイクポイントを合わせた 768px */
.bnr-small{
    width: 100%;
}
.bnr-small > ul{
    display: flex;
    flex-wrap: wrap;
    margin-left: -4px;
    margin-right: -4px;
}
.bnr-small > ul > li{
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 10px;
    font-size: clamp(11px, (100vw - 375px) * 3 / 392.98 + 11px, 14px); /* 375px - 767.98px */
    font-weight: bold;
    line-height: 1.3;
    color: #666;
    letter-spacing: -0.75px
}
.bnr-small > ul > li > a > img{
    width: 100%;
    margin-bottom: 5px;
}
@media screen and (max-width: 767.98px) {
    .bnr-small > ul > li{
        width: 50%;
    }
    /*bnr-small 2個分*/
    .bnr-big {
    	width: 100%!important;
    }
}
@media screen and (min-width: 768px) {
    .bnr-small > ul > li{
        width: 25%;
    }
    /*bnr-small 2個分*/
    .bnr-big{
    	width: 50%!important;
    }
}

/******** YouTube ********/
.movie{
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 24px auto;
}
.movie iframe{
  width: 100%;
  height: 100%;
}