@charset "utf-8";
a:hover{ text-decoration: none;}

body *{font-family: 'Noto Sans JP', sans-serif;}
.en{font-family: 'Noto Serif JP', serif;}
.btnD {-webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }


article{ min-height: 100vh;}

/*-------------------------
 MV
---------------------------*/
.page{ width: 100%; float: left; position: relative; }
.pageMin{ margin:0 auto; overflow:hidden\9; *overflow:hidden;}
@media screen and (min-width: 1201px) {.pageMin { max-width:1200px;}}
@media screen and (max-width: 1200px) {.pageMin { max-width: auto; width:100%; float:left;}}


/*-------------------------
 header
---------------------------*/
header{background: #008342; text-align: center; padding: 10px 0;}
header img { width: 40%; height: auto; max-width: 160px;}

/*-------------------------
 #MV1
---------------------------*/
#MV1 { position: relative;}
#MV1 .mv{ width: 100%; height: 200px; position: absolute; left: 0; top: 0; z-index: -1; background:url(../../img/mv.jpg) 50% 50% no-repeat; background-size:cover;}
#MV1 .cf{ background: #fff; max-width: 1100px; padding: 40px 0; margin-top: 100px;}
#MV1 .cf > *{ width: 100%; float:left;}
#MV1 .cf h2{ text-align: center; font-size: 40px; margin: 20px 0;}
#MV1 .cf h2 br{ display: none;}
#MV1 .cf p{ text-align: left; font-size: 18px; line-height: 1.8em; padding: 60px;}
#MV1 .cf p b{ display: block; font-size: 22px; padding: 10px 0;}
#MV1 .cf p img{ width:90%; height: auto; margin: 20px 5%;}
#MV1 .cf p .pc{ display: block;}
#MV1 .cf p .sp{ display: none;}

@media screen and (max-width: 1200px) {
#MV1 .cf{ width: 90%; margin: 120px 5% 0; padding: 20px 0 40px;}
}


@media screen and (max-width: 800px) {
#MV1 .cf h2{ font-size: 3.0vw;}
#MV1 .cf p br{ display: block;}
}

@media screen and (max-width:700px) {
#MV1 .mv{ height: 220px;}


#MV1 .cf h2{ margin: 0 0 20px;font-size: 7.0vw; color: #008342;}
#MV1 .cf h2 br{ display: block;}
#MV1 .cf p{ padding: 0 3%; text-align:left; font-size: 16px;}
#MV1 .cf p b{ text-align: center; font-size: 4vw;;}


#MV1 .cf p .pc{ display: none;}
#MV1 .cf p .sp{ display: block;}
#MV1 .cf p img{ width:100%; margin: 20px 0% 0;}

}


/*-------------------------
 #txt
---------------------------*/
#txt{ padding-bottom: 30px;}
#txt .cf{ background: #fff; padding: 15px 5% 30px; border: solid 4px #178523; border-radius: 12px; box-shadow: 0 2px 8px #aaa; margin-bottom: 30px;}
#txt .cf > * { width: 100%; float: left; text-align: center;}
#txt .cf > h3{ font-size: 24px; padding: 15px 0; color: #178523;}
#txt .cf > p{ font-size:18px; text-align: left;}
#txt .cf > p{}

@media screen and (max-width: 1260px) {
#txt .cf{ width: 90%; margin: 0 5% 30px; padding: 15px 5% 30px; }
}


@media screen and (max-width: 800px) {
#txt .cf > p{font-size:16px;}
#txt .cf > h3{ font-size: 22px; font-weight: bold;}

}



/*-------------------------
 #txt
---------------------------*/
#main { background: #eee; padding: 50px 0;}
#main .infoCont{}

#main .infoCont h3{ width: 100%; float: left; font-weight: bold; font-size: 30px; color: #178523; margin:30px 0 10px;}
#main .infoCont h3 img{ display: inline-block; width: 70px; height: auto; margin-right:20px; margin-top: -10px;}

#main .infoCont > div { width: 94%; float: right; padding: 30px 3% 10px; background: #fff; border-radius: 14px; margin-bottom: 50px;}
#main .infoCont > div img{ width: 100%; height: auto; margin-bottom: 10px;}

#main .infoCont > div dl { width: 100%; float: right;}
#main .infoCont > div dl > *{ width: 100%;float: left; position: relative;}
#main .infoCont > div dl dt{ font-weight: bold; font-size:22px; color: #000; padding-left: 30px;}
#main .infoCont > div dl dt img{ width: 100%; height: auto; margin-bottom: 10px;}

#main .infoCont > div dl dt span{ width: 20px; height: 20px; position: absolute; left: 0; top: 8px; display: block; content: ""; background: url(../../img/check.png) 50% 50% no-repeat; background-size:100% 100%;}
#main .infoCont > div dl dd{ margin: 0 0 30px; padding-left: 30px; font-size: 16px;}



@media screen and (max-width: 1200px) {
#main .infoCont { width: 94%; margin: 0 3%;}
}

@media screen and (max-width: 900px) {
#main .infoCont > div { width: 100%;}
}

@media screen and (max-width: 640px) {
#main { background: #eee; padding: 20px 0 40px;}

#main .infoCont h3 img{width: 50px; margin-right: 10px;}
#main .infoCont h3{ font-size: 5vw; margin-bottom: 15px;}
#main .infoCont > div dl dt{ font-size:18px; padding-left:20px; line-height: 1.3em;}
#main .infoCont > div dl dt span{ width: 16px; height: 16px; top: 3px;}
#main .infoCont > div dl dd{ padding-left: 20px; line-height: 1.4em; margin-top: 5px;}

}


/*-------------------------
 #endtxt
---------------------------*/
#endtxt{ margin: 50px 0;}
#endtxt .cf { padding-bottom: 60px; border-bottom: dotted 2px #e0e0e0;}
#endtxt .cf > *{ width: 100%; float:left;}
#endtxt .cf p{ padding: 40px 2%; font-size: 28px; text-align: center; line-height: 1.8em;}
#endtxt .cf ul{}
#endtxt .cf ul li{ display:inline-block; width: 22.5%; margin: 10px 1%;}

#endtxt .cf ul li a{ display: block; text-decoration:none; border-radius: 4px; padding:10px 0px; margin: 0 0 6px;}

#endtxt .cf ul li a > *{ display: block; text-align: center; color: #fff;}
#endtxt .cf ul li a span{}
#endtxt .cf ul li a b{ display: block;}

#endtxt .cf ul li.n1 a{background-color: #008342; box-shadow: 0 6px 0 0 #206140;}
#endtxt .cf ul li.n2 a{background-color: #d13f3f; box-shadow: 0 6px 0 0 #921919;}
#endtxt .cf ul li.n3 a{background-color: #2f7753; box-shadow: 0 6px 0 0 #19452f;}
#endtxt .cf ul li.n4 a{background-color: #008342; box-shadow: 0 6px 0 0 #206140;}

#endtxt .cf ul li.n1 a:hover{box-shadow: 0 0px 0 0 #206140; margin: 6px 0 0;}


@media screen and (max-width: 800px) {
#endtxt{ width: 96%; margin: 20px 2%;}
#endtxt .cf { padding-bottom: 20px;}

#endtxt .cf p{ font-size:3.7vw; letter-spacing: 0; font-weight: bold; padding: 20px 0 10px;}
#endtxt .cf ul{ width: 98%; padding: 0 1%;}
#endtxt .cf ul li{ width: 45%; margin:10px 2%;}

}

@media screen and (max-width: 600px) {
#endtxt .cf ul li a{ padding:15px 0px;}
#endtxt .cf ul li a span{ font-size: 2.6vw;}
#endtxt .cf ul li a b{ font-size: 3.2vw;}

}









/*-------------------------
 #end
---------------------------*/
.foottxt1 b{ color: #333; font-size: 12px; margin-bottom: 10px;}
#end{ margin-bottom: 30px;}
#end p .copy{ display: block; font-size: 12px; padding-top: 20px; color: #777;}

@media screen and (max-width: 800px) {
#end{ margin-bottom: 70px;}

.foottxt1 span{ font-size: 12px;}
#end p .copy{ font-size: 2.4vw; letter-spacing: 0;}

}