/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:17px;
font-family: 'Kosugi Maru',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
	LINE-HEIGHT: 180%;
	text-align: center;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
	height:auto;
	margin:0px auto;
	padding:0;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
}

img{
	border:0;
}
@media only screen and (max-width: 479px) {
img{
	border:0;
	max-width: 100%;
}
}

a:link,a:visited{
	outline:0;
	color:#333;
}

a:hover{
	outline:0;
	color: #00a269;
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

br.sp{
	display:inherit;
}
br.spt{
	display:inherit;
}
br.spm{
	display:inherit;
}
br.sm{
	display:none;
}
br.smt{
	display:none;
}
br.smm{
	display:none;
}
.nsp{
	display:inherit;
}
.nst{
	display:none;
}
.nss{
	display:none;
}
@media only screen and (max-width: 835px) {
br.sp{
	display:none;
}
br.spt{
	display:inherit;
}
br.spm{
	display:none;
}
br.sm{
	display:inherit;
}
br.smt{
	display:inherit;
}
br.smm,.smm{
	display:none;
}
.nsp{
	display:none;
}
.nst{
	display:inherit;
}
.nss{
	display:none;
}
.nsm{
	display:none;
}
}
@media only screen and (max-width: 640px) {
br.spt{
	display:none;
}
br.spm{
	display:inherit;
}
br.smt{
	display:none;
}
br.smm{
	display:inherit;
}
.nsp{
	display:none;
}
.nst{
	display:none;
}
.nss{
	display:inherit;
}
.nsm{
	display:none;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 0 0;
text-align: left;
position: sticky;
top:0;
background: #fff;
z-index: 9999;
}
header img{
max-width: 38%;
margin: 0 0 0 2%;
}
#header-box{
float: right;
width: 40%;
height: auto;
margin: 0;
padding: 0;
}
header #header-box img{
margin: 0 1%;
max-width: 48%;
}
#header-box img.bno{
display: none;
}
@media only screen and (max-width: 1366px) {
header img{
clear: both;
float: left;
max-width: 38%;
margin: 0 0 0 2%;
}
#header-box{
float: right;
width: 40%;
height: auto;
margin: 0;
padding: 0;
}
header #header-box img{
clear: none;
margin: 0 1%;
max-width: 48%;
}
}
@media only screen and (max-width: 835px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
position: sticky;
top:0;
z-index: 9999;
background: #fff;
}
header img{
clear: both;
float: left;
max-width: 35%;
margin: 15px 0 15px 2%;
}
#header-box{
float: right;
width: 51%;
height: auto;
margin: 0 10% 0 0;
padding: 15px 0 0;
}
header #header-box img{
clear: none;
margin: 0 1%;
max-width: 48%;
}
}
@media only screen and (max-width: 479px) {
header img{
clear: both;
float: left;
max-width: 45%;
margin: 10px 0 10px 2%;
}
#header-box{
float: right;
width: 53%;
height: auto;
margin: 0;
padding: 10px 0 10px;
text-align: left;
}
#header-box img{
display: none;
}
#header-box img.bno{
display: inherit;
max-width: 50px;
max-height: 50px;
margin: 0 0 0 6%;
}
}

menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 15px 0;
background: #60c1bd;
}
menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
menu li{
float: left;
width: 15%;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
font-size: 20px;
line-height: 100%;
}
menu li.bno{
display: none;
}
menu li a:link,menu li a:visited{
display: block;
width: 100%;
height: auto;
padding: 5px 2%;
text-align: center;
color: #fff;
text-decoration: none;
border-right: 2px solid #fff;
}
menu li a:hover{
text-decoration: underline;
}

@media only screen and (max-width:835px) {
#menu-link{
display: inherit;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 10px;
background: rgba(255,255,255,1.0);
}
menu{
clear: both;
float: left;
width: 100%;
height: auto;
height: 100vh;
margin: 0;
padding: 0;
text-align: center;
background: rgba(4,138,91,0.9);
}
menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
border-top:none;
border-bottom:none;
}
menu li{
display: block;
width: 100%;
float: left;
list-style-type: none;
font-size: 16px;
margin: 0;
padding: 25px 0 20px;
border-bottom:1px dotted #fff;
text-align: center;
}
menu li.bno{
display: inherit;
}
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
background:none;
padding: 0;
text-align: center;
border-right: none;
}
menu li a:hover{
text-decoration: underline;
}
menu ul img{
display: none;
float: none;
margin: 15px 0;
max-width: 10%;
}
menu ul img.bno{
display: inherit;
margin: 15px 0;
max-width: 10%;
}
header menu ul li.bno img{
display: inherit;
clear: none;
float: none;
max-width: 7%;
margin: 0 auto;
padding: 0;
}
@media only screen and (max-width: 479px) {
header menu ul li.bno img{
display: inherit;
clear: none;
float: none;
max-width: 9%;
margin: 0 auto;
padding: 0;
}
}
@media only screen and (max-width: 375px) {
header menu ul li.bno img{
display: inherit;
clear: none;
float: none;
max-width: 11%;
margin: 0 auto;
padding: 0;
}
}

#menu-box{
clear: both;
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: fixed;
z-index: 9999;
top:0;
}

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#60c1bd;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:15px;
  right:15px;
  z-index: 999;
}
@media only screen and (max-width: 479px) {
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#60c1bd;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:10px;
  right:10px;
  z-index: 999;
}
}

/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }
.openbtn4 span:nth-of-type(1) {
  top:13px; 
}
.openbtn4 span:nth-of-type(2) {
  top:19px;
}
.openbtn4 span:nth-of-type(3) {
  top:25px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:1px;
  left:-2px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:0px;
  left:7px;
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}

#photo{
	clear:both;
	float: left;
	width:100%;
	height: auto;
	margin:0;
	padding:0;
	text-align:center;
}
#photo ul{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	text-align:center;
}
#photo li{
	width:100%;
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:center;
}
#photo li img{
min-width: 100%;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
@media only screen and (max-width: 835px) {
#photo{
	clear:both;
	float: left;
	width:100%;
	height: auto;
	margin:0;
	padding:0;
	text-align:center;
}
}
@media only screen and (max-width: 479px) {
#photo{
	clear:both;
	float: left;
	width:100%;
	height: auto;
	margin:0;
	padding:0;
	text-align:center;
}
}

/*main
--------------------------------------------------------------------------*/
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
main.sub-p{
background: #eee;
}
main p{
font-size: 17px;
margin: 0 0 40px;
text-align: left;
line-height: 180%;
}
@media only screen and (max-width: 835px) {
main p{
font-size: 15px;
margin: 0 0 30px;
text-align: left;
line-height: 180%;
}
}
@media only screen and (max-width: 479px) {
main p{
font-size: 13px;
margin: 0 0 30px;
text-align: left;
line-height: 150%;
}
}

#sns{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 5%;
text-align: center;
border-top:15px solid #00a269;
}
@media only screen and (max-width: 835px) {
#sns{
clear: both;
float: left;
width: 100%;
height:auto;
margin: 0;
padding: 30px 5%;
text-align: center;
border-top:10px solid #00a269;
}
}

#news{
clear: both;
float: left;
width: 30%;
height: auto;
margin: 0;
padding:0;
background: #eee;
}
#news h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight: normal;
font-size: 35px;
line-height: 100%;
}
#news ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
}
#news li{
list-style-type: none;
font-size: 16px;
line-height: 150%;
text-align: left;
margin: 0 0 20px;
padding: 0;
}
#news li strong{
font-weight: normal;
margin: 0 5% 0 0;
}
@media only screen and (max-width: 1366px) {
#news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 80px 20% 50px;
background: #eee;
}
#news li{
list-style-type: none;
font-size: 15px;
line-height: 150%;
text-align: left;
margin: 0 0 20px;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
#news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 60px 15% 40px;
background: #eee;
}
#news h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight: normal;
font-size: 30px;
line-height: 100%;
}
#news li{
list-style-type: none;
font-size: 14px;
line-height: 150%;
text-align: left;
margin: 0 0 20px;
padding: 0;
}
}
@media only screen and (max-width: 835px) {
#news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 5% 20px;
background: #eee;
}
}
@media only screen and (max-width: 640px) {
#news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 3% 15px;
background: #eee;
}
#news h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight: normal;
font-size: 25px;
line-height: 100%;
}
#news li{
list-style-type: none;
font-size: 13px;
line-height: 150%;
text-align: left;
margin: 0 0 15px;
padding: 0;
}
}
@media only screen and (max-width: 479px) {
#news h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
text-align: left;
font-weight: normal;
font-size: 20px;
line-height: 100%;
}
#news li strong{
font-weight: normal;
margin: 0 5% 0 0;
}
}

#insta{
float: left;
width: 38%;
height: auto;
margin: 0 1% 0;
padding: 0;
}
#fb{
float: left;
width: 30%;
height: auto;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 1080px) {
#insta{
float: left;
width: 68%;
height: auto;
margin: 0 1% 0;
padding: 0;
}
#fb{
display: none;
float: left;
width: 30%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 479px) {
#insta{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}

h1{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 110px;
margin: 0 0 70px;
padding: 20px 0 0;
color: #fff;
font-size: 20px;
line-height: 130%;
text-align: center;
font-weight: normal;
background: url(image/top-h1.png) no-repeat top center;
}
@media only screen and (max-width: 1080px) {
h1{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 110px;
margin: 0 0 50px;
padding: 20px 0 0;
color: #fff;
font-size: 20px;
line-height: 130%;
text-align: center;
font-weight: normal;
background: url(image/top-h1.png) no-repeat top center;
}
}
@media only screen and (max-width: 835px) {
h1{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 90px;
margin: 0 0 30px;
padding: 15px 0 0;
color: #fff;
font-size: 16px;
line-height: 130%;
text-align: center;
font-weight: normal;
background: url(image/top-h1.png) no-repeat top center/20%;
}
}
@media only screen and (max-width: 640px) {
h1{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 90px;
margin: 0 0 0;
padding: 15px 0 0;
color: #fff;
font-size: 16px;
line-height: 130%;
text-align: center;
font-weight: normal;
background: url(image/top-h1.png) no-repeat top center/25%;
}
}
@media only screen and (max-width: 479px) {
h1{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 90px;
margin: 0 0 0;
padding: 15px 0 0;
color: #fff;
font-size: 15px;
line-height: 130%;
text-align: center;
font-weight: normal;
background: url(image/top-h1.png) no-repeat top center/37%;
}
}

#sagasu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 20% 90px;
text-align: center;
border-top:15px solid #00a269;
background: #eee;
}
.sagasu-box,.sagasu-box2{
float: left;
width: 49%;
height: auto;
min-height: 120px;
margin: 0 2px 2px;
padding: 0;
border: 1px solid #aaa;
background: #fff;
}
#sagasu p{
width: 100%;
margin: 0;
padding: 0;
line-height: 120px;
text-align: left;
font-size: 19px;
}
#sagasu a:link,#sagasu a:visited{
display: block;
width: 100%;
min-height: 120px;
margin: 0;
padding: 0 0 0 45%;
background: url(image/sagasu1.png) no-repeat 5% center,url(image/sagasu-li.png) no-repeat 95% center;
text-decoration: none;
}
#sagasu a:hover{
text-decoration: underline;
}
#sagasu a.s2{
background:none;
background: url(image/sagasu2.png) no-repeat 5% center,url(image/sagasu-li.png) no-repeat 95% center;
}
#sagasu a.s3{
background:none;
background: url(image/sagasu3.png) no-repeat 5% center,url(image/sagasu-li.png) no-repeat 95% center;
}
#sagasu a.s4{
background:none;
background: url(image/sagasu4.png) no-repeat 5% center,url(image/sagasu-li.png) no-repeat 95% center;
}
@media only screen and (max-width: 1366px) {
#sagasu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 7% 90px;
text-align: center;
border-top:15px solid #00a269;
background: #eee;
}
}
@media only screen and (max-width: 1080px) {
#sagasu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 70px;
text-align: center;
border-top:15px solid #00a269;
background: #eee;
}
}
@media only screen and (max-width: 835px) {
#sagasu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 30px;
text-align: center;
border-top:10px solid #00a269;
background: #eee;
}
.sagasu-box,.sagasu-box2{
float: left;
width: 49%;
height: auto;
min-height: 80px;
margin: 0 2px 2px;
padding: 0;
border: 1px solid #aaa;
background: #fff;
}
#sagasu p{
width: 100%;
margin: 0;
padding: 0;
line-height: 80px;
text-align: left;
font-size: 15px;
}
#sagasu a:link,#sagasu a:visited{
display: block;
width: 100%;
min-height: 50px;
margin: 0;
padding: 0 0 0 40%;
background: url(image/sagasu1.png) no-repeat 5% center/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
text-decoration: none;
}
#sagasu a:hover{
text-decoration: underline;
}
#sagasu a.s2{
background:none;
background: url(image/sagasu2.png) no-repeat 5% center/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
}
#sagasu a.s3{
background:none;
background: url(image/sagasu3.png) no-repeat 5% center/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
}
#sagasu a.s4{
background:none;
background: url(image/sagasu4.png) no-repeat 5% center/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
}
}
@media only screen and (max-width: 640px) {
main #sagasu p{
width: 100%;
margin: 0;
padding: 0;
line-height: 100%;
text-align: left;
font-size: 15px;
}
#sagasu a:link,#sagasu a:visited{
display: block;
width: 100%;
min-height: 50px;
margin: 0;
padding: 80px 0 10px 3%;
background: url(image/sagasu1.png) no-repeat center 30%/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
text-decoration: none;
text-align:center;
}
#sagasu a:hover{
text-decoration: underline;
}
#sagasu a.s2{
background:none;
background: url(image/sagasu2.png) no-repeat center 30%/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
}
#sagasu a.s3{
background:none;
background: url(image/sagasu3.png) no-repeat center 30%/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
}
#sagasu a.s4{
background:none;
background: url(image/sagasu4.png) no-repeat center 30%/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
}
}
@media only screen and (max-width: 479px) {
.sagasu-box,.sagasu-box2{
float: left;
width: 100%;
height: auto;
min-height: 80px;
margin: 0 0 15px;
padding: 0;
border: 1px solid #aaa;
background: #fff;
}
main #sagasu p{
width: 100%;
margin: 0;
padding: 0;
line-height: 80px;
text-align: left;
font-size: 14px;
}
#sagasu a:link,#sagasu a:visited{
display: block;
width: 100%;
min-height: 50px;
margin: 0;
padding: 0 0 0 40%;
text-align: left;
background: url(image/sagasu1.png) no-repeat 5% center/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
text-decoration: none;
}
#sagasu a:hover{
text-decoration: underline;
}
#sagasu a.s2{
background:none;
background: url(image/sagasu2.png) no-repeat 5% center/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
}
#sagasu a.s3{
background:none;
background: url(image/sagasu3.png) no-repeat 5% center/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
}
#sagasu a.s4{
background:none;
background: url(image/sagasu4.png) no-repeat 5% center/30%,url(image/sagasu-li.png) no-repeat 95% center/4%;
}
}

#kodawari{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 10% 90px;
text-align: center;
border-top:15px solid #00a269;
background: url(image/kodawari.webp) no-repeat bottom center/100%;
}
#kodawari img{
float: left;
}
#kodawari-text{
float: right;
width: 45%;
height: auto;
margin: 0;
padding: 0;
}
#kodawari-text img{
margin: 0 0 25px;
}
#kodawari-text p{
clear: both;
color: #fff;
font-size: 17px;
line-height: 200%;
text-align: left;
margin: 0;
padding: 20px 5%;
background: rgba(0,162,105,0.8);
}
@media only screen and (max-width: 1366px) {
#kodawari{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 90px;
text-align: center;
border-top:15px solid #00a269;
background: url(image/kodawari.webp) no-repeat bottom center/100%;
}
}
@media only screen and (max-width: 1280px) {
#kodawari{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 90px;
text-align: center;
border-top:15px solid #00a269;
background: url(image/kodawari.webp) no-repeat bottom center/100%;
}
#kodawari img{
float: left;
max-width: 50%;
}
#kodawari-text{
float: right;
width: 50%;
height: auto;
margin: 0;
padding: 0;
}
#kodawari #kodawari-text img{
max-width: 100%;
}
}
@media only screen and (max-width: 1080px) {
#kodawari img{
float: left;
max-width: 40%;
}
#kodawari-text{
float: right;
width: 60%;
height: auto;
margin: 0;
padding: 0;
}
#kodawari #kodawari-text img{
max-width: 100%;
}
}
@media only screen and (max-width: 835px) {
#kodawari{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 70px;
text-align: center;
border-top:10px solid #00a269;
background: url(image/kodawari.webp) no-repeat bottom center/100%;
}
#kodawari img{
float: left;
max-width: 35%;
}
#kodawari-text{
float: right;
width: 65%;
height: auto;
margin: 0;
padding: 0 0 0 3%;
}
#kodawari #kodawari-text img{
max-width: 90%;
}
#kodawari-text p{
clear: both;
color: #fff;
font-size: 15px;
line-height: 200%;
text-align: left;
margin: 0;
padding: 15px 4%;
background: rgba(0,162,105,0.8);
}
}
@media only screen and (max-width: 479px) {
#kodawari{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 30px;
text-align: center;
border-top:10px solid #00a269;
background: url(image/kodawari.webp) no-repeat bottom left/250% 100%;
}
#kodawari img{
float: none;
max-width: 65%;
}
#kodawari-text{
clear: both;
float: right;
width: 100%;
height: auto;
margin: 0;
padding: 15px 0 0;
}
#kodawari #kodawari-text img{
max-width: 95%;
margin: 0 0 10px;
}
#kodawari-text p{
clear: both;
color: #fff;
font-size: 13px;
line-height: 180%;
text-align: left;
margin: 0;
padding: 10px 3%;
background: rgba(0,162,105,0.9);
}
}

#kodawari3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:70px 5% 70px;
background: #eee;
display: flex;
}
#kodawari3 .kodawari-box{
float: left;
width: 31.3%;
height: auto;
margin: 0 1%;
padding: 30px 3% 0;
border: 1px solid #000;
text-align: center;
}
.kodawari-box img{
margin: 0 0 30px;
max-width: 100%;
}
.kodawari-box p{
font-size: 16px;
margin: 0 0 25px;
line-height: 160%;
text-align: left;
}
.kodawari-box p strong{
text-shadow: 2px 2px 1px #fff;
}
@media only screen and (max-width: 1366px) {
#kodawari3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:70px 3% 70px;
background: #eee;
display: flex;
}
.kodawari-box p{
font-size: 15px;
margin: 0 0 25px;
line-height: 160%;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
#kodawari3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:50px 3% 50px;
background: #eee;
display: flex;
}
.kodawari-box p{
font-size: 14px;
margin: 0 0 25px;
line-height: 160%;
text-align: left;
}
}
@media only screen and (max-width: 835px) {
#kodawari3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:50px 3% 40px;
background: #eee;
display: inherit;
}
#kodawari3 .kodawari-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 25px 3% 0;
border: 1px solid #000;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#kodawari3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:30px 5% 30px;
background: #eee;
display: inherit;
}
#kodawari3 .kodawari-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 25px 5% 0;
border: 1px solid #000;
text-align: center;
}
}
@media only screen and (max-width: 479px) {
#kodawari3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:30px 5% 15px;
background: #eee;
display: inherit;
}
.kodawari-box img{
margin: 0 0 30px;
max-width: 90%;
}
.kodawari-box p{
font-size: 13px;
margin: 0 0 20px;
line-height: 150%;
text-align: left;
}
}

#guide{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 90px;
text-align: center;
border-top:15px solid #00a269;
background: url(image/pay-back.webp) no-repeat left top/50%,url(image/faq-back.webp) no-repeat right top/50%,#eee;
}
@media only screen and (max-width: 1080px) {
#guide{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 60px;
text-align: center;
border-top:15px solid #00a269;
background: url(image/pay-back.webp) no-repeat left top/50%,url(image/faq-back.webp) no-repeat right top/50%,#eee;
}
}
@media only screen and (max-width: 835px) {
#guide{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 40px;
text-align: center;
border-top:10px solid #00a269;
background: url(image/pay-back.webp) no-repeat left top/50%,url(image/faq-back.webp) no-repeat right top/50%,#eee;
}
}
@media only screen and (max-width: 479px) {
#guide{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 30px;
text-align: center;
border-top:10px solid #00a269;
background: none;
background: url(image/pay-back.webp) no-repeat left top/100%,#eee;
}
}

#pay{
clear: both;
float:left;
width: 50%;
height: auto;
margin: -180px 0 0;
padding: 0;
}
#pay-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 120px 0 110px;
text-align: center;
}
#pay-title img{
max-width: 80%;
}
#pay h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 100%;
font-weight: bold;
font-size: 30px;
color: #00a269;
}
#pay p{
text-align: left;
margin: 0 0 30px;
font-size: 16px;
}
#pay-box{
clear: both;
float: left;
width: 86%;
height: auto;
margin: 0 7%;
padding: 40px 4% 15px;
border: 1px solid #000;
background: #eee;
}
#pay ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#pay li{
clear: both;
float: left;
width: 100%;
list-style-type: none;
margin: 0 0 40px;
padding: 0;
text-align: left;
font-size: 14px;
line-height: 150%;
}
#pay li strong{
font-weight: bold;
font-size: 1.1em;
line-height: 200%;
}
#pay li img{
float: left;
margin: 0 2% 0 0;
}
@media only screen and (max-width: 1080px) {
#pay-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 130px 0 40px;
text-align: center;
}
#pay-title img{
max-width: 70%;
}
#pay h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 100%;
font-weight: bold;
font-size: 25px;
color: #00a269;
}
#pay p{
text-align: left;
margin: 0 0 30px;
font-size: 15px;
}
#pay-box{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5%;
padding: 30px 4% 15px;
border: 1px solid #000;
background: #eee;
}
#pay li{
clear: both;
float: left;
width: 100%;
list-style-type: none;
margin: 0 0 40px;
padding: 0;
text-align: left;
font-size: 13px;
line-height: 150%;
}
}
@media only screen and (max-width: 835px) {
#pay{
clear: both;
float:left;
width: 100%;
height: auto;
margin: -130px 0 0;
padding: 0;
}
#pay-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 120px 0 20px;
text-align: center;
}
#pay-title img{
max-width: 50%;
}
#pay li{
clear: both;
float: left;
width: 100%;
list-style-type: none;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 13px;
line-height: 150%;
}
}
@media only screen and (max-width: 479px) {
#pay-title img{
max-width: 80%;
}
#pay h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 100%;
font-weight: bold;
font-size: 20px;
color: #00a269;
}
#pay p{
text-align: left;
margin: 0 0 25px;
font-size: 13px;
line-height: 150%;
}
#pay-box{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5%;
padding: 20px 4% 15px;
border: 1px solid #000;
background: #eee;
}
#pay li{
clear: both;
float: left;
width: 100%;
list-style-type: none;
margin: 0 0 20px;
padding: 0 0 10px;
text-align: left;
font-size: 13px;
line-height: 150%;
border-bottom: 1px dotted #444;
}
#pay li.bno{
margin: 0;
padding: 0;
border-bottom:none;
}
#pay li img{
float: left;
margin: 0 2% 0 0;
max-width: 20%;
}
}

#faq{
float:left;
width: 50%;
height: auto;
margin: -180px 0 0;
padding: 0;
}
#faq-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 120px 0 110px;

text-align: center;
}
#faq-title img{
max-width: 80%;
}
#faq h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 100%;
font-weight: bold;
font-size: 30px;
color: #00a269;
}
#faq-box{
clear: both;
float: left;
width: 86%;
height: auto;
margin: 0 7%;
padding: 40px 4% 0;
border: 1px solid #000;
background: #eee;
}
#faq dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 5px 0 15px;
padding: 0;
}
#faq dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
line-height: 150%;
text-align: left;
font-weight: bold;
font-size: 16px;
}
#faq dd{
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 0 15px;
text-align: left;
font-size: 14px;
line-height: 150%;
border-bottom:1px solid #000;
}
@media only screen and (max-width: 1080px) {
#faq-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 130px 0 40px;
text-align: center;
}
#faq-title img{
max-width: 40%;
}
#faq h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 100%;
font-weight: bold;
font-size: 25px;
color: #00a269;
}
#faq-box{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5%;
padding: 30px 4% 0;
border: 1px solid #000;
background: #eee;
}
#faq dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
line-height: 150%;
text-align: left;
font-weight: bold;
font-size: 14px;
}
#faq dd{
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 0 15px;
text-align: left;
font-size: 13px;
line-height: 150%;
border-bottom:1px solid #000;
}
}
@media only screen and (max-width: 835px) {
#faq{
float:left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 0;
}
#faq-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 30px;
text-align: center;
}
#faq-title img{
max-width: 30%;
}
}
@media only screen and (max-width: 479px) {
#faq{
float:left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0;
background: url(image/faq-back.png) no-repeat left top/100%;
}
#faq-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 30px;
text-align: center;
}
#faq-title img{
max-width: 50%;
}
#faq h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 100%;
font-weight: bold;
font-size: 20px;
color: #00a269;
}
#faq-box{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5%;
padding: 20px 3% 0;
border: 1px solid #000;
background: #eee;
}
#faq dd{
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 0 15px;
text-align: left;
font-size: 13px;
line-height: 150%;
border-bottom:1px dotted #333;
}
#faq dd.bno{
margin: 0;
padding: 0;
border-bottom:none;
}
}

#cate{
clear: both;
width: 900px;
height: auto;
margin: 0 auto;
padding: 100px 0 0;
}
.cate-box,.cate-box2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 0 50px;
border-bottom: 1px solid #999;
}
.cate-box2{
margin: 0 0 20px;
border-bottom: none;
}
#cate h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: left;
font-weight: bold;
font-size: 35px;
}
#cate h3 span{
font-size: 25px;
font-weight: normal;
margin: 0 0 0 1%;
}
#cate p{
text-align: right;
margin: 0;
font-size: 15px;
padding: 0 2% 0 0;
}
#cate p img{
vertical-align: text-bottom;
padding: 0 5px 0 0;
}
.cate-pict{
float: left;
width: 25%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
}
.cate-pict img{
max-width: 100%;
}
#cate .cate-pict p{
text-align: left;
font-size: 15px;
margin: 0;
}
@media only screen and (max-width: 1366px) {
#cate{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 auto;
padding: 100px 10% 0;
}
}
@media only screen and (max-width: 1080px) {
#cate{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 auto;
padding: 70px 10% 0;
}
#cate h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: left;
font-weight: bold;
font-size: 30px;
}
#cate h3 span{
font-size: 20px;
font-weight: normal;
margin: 0 0 0 1%;
}
#cate p{
text-align: right;
margin: 0;
font-size: 13px;
padding: 0 2% 0 0;
}
#cate .cate-pict p{
text-align: left;
font-size: 13px;
margin: 0;
}
}
@media only screen and (max-width: 835px) {
#cate{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 auto;
padding: 50px 5% 0;
}
.cate-box,.cate-box2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 30px;
border-bottom: 1px solid #999;
}
.cate-box2{
margin: 0 0 20px;
border-bottom: none;
}
#cate h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight: bold;
font-size: 25px;
}
#cate h3 span{
font-size: 17px;
font-weight: normal;
margin: 0 0 0 1%;
}
.cate-pict{
float: left;
width: 25%;
height: auto;
margin: 0 0 15px;
padding: 0 1%;
text-align: left;
}
.cate-pict img{
max-width: 100%;
}
}
@media only screen and (max-width: 640px) {
#cate{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 auto;
padding: 30px 3% 0;
}
#cate h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
font-weight: bold;
font-size: 20px;
}
#cate h3 span{
font-size: 15px;
font-weight: normal;
margin: 0 0 0 1%;
}
#cate .cate-pict p{
text-align: left;
font-size: 13px;
margin: 5px 0 0;
line-height: 140%;
}
}
@media only screen and (max-width: 479px) {
#cate{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 auto;
padding: 20px 3% 0;
}
.cate-box2{
margin: 0 0 0;
border-bottom: none;
}
#cate h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-weight: bold;
font-size: 18px;
}
#cate h3 span{
font-size: 14px;
font-weight: normal;
margin: 0 0 0 1%;
}
.cate-pict{
float: left;
width: 50%;
height: auto;
margin: 0 0 15px;
padding: 0 1%;
text-align: left;
}
}

#sub-page{
clear: both;
float:left;
width: 60%;
height: auto;
margin: 50px 20%;
padding: 0;
background: #fff;
}
@media only screen and (max-width: 1366px) {
#sub-page{
clear: both;
float:left;
width: 70%;
height: auto;
margin: 50px 15%;
padding: 0;
background: #fff;
}
}
@media only screen and (max-width: 1080px) {
#sub-page{
clear: both;
float:left;
width: 80%;
height: auto;
margin: 40px 10%;
padding: 0;
background: #fff;
}
}
@media only screen and (max-width: 835px) {
#sub-page{
clear: both;
float:left;
width: 94%;
height: auto;
margin: 40px 3%;
padding: 0;
background: #fff;
}
}

#sub-page h1{
clear: both;
float:left;
width: 100%;
height: auto;
min-height: auto;
margin: 0 0 50px;
padding: 30px 0 30px;
color: #00a269;
font-weight: bold;
font-size: 30px;
line-height: 100%;
text-align: left;
text-indent: 1em;
border-bottom: 2px solid #00a269;
background: none;
}
#sub-page h2{
clear: both;
float:left;
width: 100%;
height: auto;
margin: 20px 0 30px;
padding: 5px 0 5px 10px;
text-align: left;
font-size: 20px;
font-weight: bold;
color: #333;
border-bottom: 1px solid #00a269;
border-left:10px solid #00a269;
}
#sub-page h3{
clear: both;
float:left;
width: 100%;
height: auto;
margin: 20px 0 30px;
padding: 0 0 10px;
text-align: left;
font-weight:normal;
line-height: 100%;
font-size: 18px;
color: #333;
border-bottom: 1px solid #111;
}
@media only screen and (max-width: 835px) {
#sub-page h1{
clear: both;
float:left;
width: 100%;
height: auto;
min-height: auto;
margin: 0 0 40px;
padding: 25px 0 25px;
color: #00a269;
font-weight: bold;
font-size: 25px;
line-height: 100%;
text-align: left;
text-indent: 1em;
border-bottom: 2px solid #00a269;
background: none;
}
#sub-page h2{
clear: both;
float:left;
width: 100%;
height: auto;
margin: 20px 0 30px;
padding: 5px 0 5px 10px;
text-align: left;
font-size: 18px;
font-weight: bold;
color: #333;
border-bottom: 1px solid #00a269;
border-left:10px solid #00a269;
}
}
@media only screen and (max-width: 640px) {
#sub-page h2{
clear: both;
float:left;
width: 100%;
height: auto;
margin: 15px 0 20px;
padding: 5px 0 5px 10px;
text-align: left;
font-size: 15px;
font-weight: bold;
color: #333;
border-bottom: 1px solid #00a269;
border-left:10px solid #00a269;
}
#sub-page h3{
clear: both;
float:left;
width: 100%;
height: auto;
margin: 20px 0 30px;
padding: 0 0 5px;
text-align: left;
font-weight:normal;
line-height: 100%;
font-size: 15px;
color: #333;
border-bottom: 1px solid #111;
}
}
@media only screen and (max-width: 479px) {
#sub-page h1{
clear: both;
float:left;
width: 100%;
height: auto;
min-height: auto;
margin: 0 0 30px;
padding: 25px 0 20px;
color: #00a269;
font-weight: normal;
font-size: 23px;
line-height: 100%;
text-align: left;
text-indent: 1em;
border-bottom: 2px solid #00a269;
background: none;
}
#sub-page h2{
clear: both;
float:left;
width: 100%;
height: auto;
margin: 10px 0 20px;
padding: 10px 0 5px 10px;
text-align: left;
font-size: 15px;
font-weight: bold;
color: #333;
border-bottom: 1px solid #00a269;
border-left:10px solid #00a269;
line-height: 100%;
}
#sub-page h3{
clear: both;
float:left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 0 5px;
text-align: left;
font-weight:normal;
line-height: 100%;
font-size: 15px;
color: #333;
border-bottom: 1px solid #111;
}
}

.sub-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 100px;
}
@media only screen and (max-width: 1080px) {
.sub-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 50px;
}
}
@media only screen and (max-width: 835px) {
.sub-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 40px;
}
}
@media only screen and (max-width: 479px) {
.sub-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 30px;
}
}

#sub-page dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#sub-page dt{
clear: both;
width: 30%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: left;
line-height: 150%;
font-size: 17px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#sub-page dd{
width: 70%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: left;
line-height: 150%;
font-size: 17px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 1080px) {
#sub-page dt{
clear: both;
width: 30%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: left;
line-height: 150%;
font-size: 16px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#sub-page dd{
width: 70%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: left;
line-height: 150%;
font-size: 16px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
}
@media only screen and (max-width: 835px) {
#sub-page dt{
clear: both;
width: 30%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: left;
line-height: 150%;
font-size: 14px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#sub-page dd{
width: 70%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: left;
line-height: 150%;
font-size: 14px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
}
@media only screen and (max-width: 640px) {
#sub-page dt{
clear: both;
width: 35%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: left;
line-height: 150%;
font-size: 13px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#sub-page dd{
width: 65%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: left;
line-height: 150%;
font-size: 13px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
}
@media only screen and (max-width: 479px) {
#sub-page dt{
clear: both;
width: 35%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: left;
line-height: 150%;
font-size: 13px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#sub-page dd{
width: 65%;
height: auto;
margin: 0 0 15px;
padding: 0 0 5px 2%;
text-align: left;
line-height: 150%;
font-size: 13px;
border-bottom: 1px dotted #333;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
}

#sub-page iframe{
clear: both;
float: left;
width: 100%;
height: 400px;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 640px) {
#sub-page iframe{
clear: both;
float: left;
width: 100%;
height: 300px;
margin: 0;
padding: 0;
}
}

#hoshii{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
#hoshii img{
max-width: 100%;
margin: 0 0 30px;
}
@media only screen and (max-width: 835px) {
#hoshii{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
}
}
@media only screen and (max-width: 479px) {
#hoshii{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}

p.f30{
font-size: 25px;
line-height: 180%;
}
.f-green20b{
font-size: 20px;
font-weight: bold;
margin: 0 1%;
color: #60c1bd;
}
.f-green35b{
font-size: 35px;
font-weight: bold;
margin: 0 1%;
color: #60c1bd;
}
@media only screen and (max-width: 1080px) {
p.f30{
font-size: 20px;
line-height: 180%;
}
.f-green35b{
font-size: 30px;
font-weight: bold;
margin: 0 1%;
color: #60c1bd;
}
}
@media only screen and (max-width: 640px) {
p.f30{
font-size: 15px;
line-height: 180%;
}
.f-green35b{
font-size: 25px;
font-weight: bold;
margin: 0 1%;
color: #60c1bd;
}
}
@media only screen and (max-width: 479px) {
p.f30{
font-size: 16px;
line-height: 180%;
text-align: justify;
text-justify: inter-ideograph;
}
.f-green35b{
font-size: 25px;
font-weight: bold;
margin: 0 1%;
color: #60c1bd;
}
}

.se-pict{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
.se-pict p{
font-size: 15px;
margin: 0;
text-align: right;
}
.se-pict .cate-pict p{
text-align:left;
}
.se-pict p a img{
vertical-align: text-bottom;
margin: 0 1% 0 0;
}
@media only screen and (max-width: 1080px) {
.se-pict{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}
.se-pict p{
font-size: 13px;
margin: 0;
text-align: right;
}
.se-pict .cate-pict p{
text-align:left;
font-size: 12px;
line-height: 110%;
margin: 5px 0 0;
}
.se-pict .cate-pict img{
max-width: 90%;
}
}

img.pict-right{
float: left;
margin: 0 3% 0 0;
max-width: 20%;
}
p.f15{
font-size: 15px;
text-align: justify;
text-justify: inter-ideograph;
}
@media only screen and (max-width: 1080px) {
p.f15{
font-size: 14px;
text-align: justify;
text-justify: inter-ideograph;
}
img.pict-right{
float: left;
margin: 0 3% 0 0;
max-width: 30%;
}
}
@media only screen and (max-width: 835px) {
p.f15{
font-size: 13px;
text-align: justify;
text-justify: inter-ideograph;
}
}
@media only screen and (max-width: 479px) {
img.pict-right{
float: left;
margin: 0 5% 5px 0;
max-width: 50%;
}
}

table {
	clear:both;
	width:100%;
	margin:5px 0 50px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
}
table caption{
font-size: 20px;
text-align: left;
margin: 0;
padding: 15px 0 11px 1em;
background: #168352;
border-radius: 10px 10px 0 0;
color: #fff;
}
th{
	width:25%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
}
@media only screen and (max-width: 1080px) {
table caption{
font-size: 16px;
text-align: left;
margin: 0;
padding: 15px 0 11px 1em;
background: #168352;
border-radius: 10px 10px 0 0;
color: #fff;
}
th{
	width:25%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 15px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 15px;
}
}
@media only screen and (max-width: 835px) {
table caption{
font-size: 15px;
text-align: left;
margin: 0;
padding: 15px 0 11px 1em;
background: #168352;
border-radius: 10px 10px 0 0;
color: #fff;
}
th{
	width:25%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 5px;
	font-size: 13px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 5px;
	font-size: 13px;
}
}
@media only screen and (max-width: 479px) {
table {
	clear:both;
	width:100%;
	margin:5px 0 30px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
}
table caption{
font-size: 15px;
text-align: left;
margin: 0;
padding: 7px 0 3px 1em;
background: #168352;
border-radius: 10px 10px 0 0;
color: #fff;
}
th{
	width:25%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 13px;
	line-height: 120%;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 13px;
	line-height: 120%;
}
}

.hissu{
font-size: 12px;
border-radius: 7px;
background: #60c1bd;
padding: 4px 10px 2px;
margin: 0 0 0 2%;
color: #fff;
}
@media only screen and (max-width: 479px) {
.hissu{
font-size: 11px;
border-radius: 7px;
background: #60c1bd;
padding: 4px 10px 2px;
margin: 0;
color: #fff;
line-height: 200%;
}
}

textarea,input[type="text"] ,input[type="email"]{
width: 100%;
}
input[type="text"].t50{
width: 80%;
}
input[type="text"].t30{
width: 20%;
}
input[type="text"].t10{
width: 10%;
}
@media only screen and (max-width: 835px) {
input[type="text"].t50{
width: 70%;
}
}
@media only screen and (max-width: 479px) {
input[type="text"].t30{
width: 50%;
}
input[type="text"].t50{
width: 100%;
}
}

#mail-check{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:10px 0 0;
	padding:10px 0;
	text-align:center;
}
form{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
}
@media only screen and (max-width: 835px) {
form{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
}
}
@media only screen and (max-width: 479px) {
#mail-check{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	text-align:center;
}
}

input.btn_submit,input.btn_submit2,input.btn_submit3,input.btn_submit4{
 background:#60c1bd;
 border:none;
 width:25%;
 height:50px;
 line-height: 50px;
 cursor: pointer;
 color: #fff;
 font-size: 20px;
 border-radius: 7px;
}
input.btn_submit:hover {
 background:#00a269;
}
input.btn_submit2{
background:#ccc;
font-size: 14px;
width:15%;
 height:36px;
 line-height: 36px;
 color: #111;
}
input.btn_submit2:hover {
 background:#aaa;
}
@media only screen and (max-width: 479px) {
input.btn_submit,input.btn_submit2,input.btn_submit3,input.btn_submit4{
 background:#60c1bd;
 border:none;
 width:50%;
 height:50px;
 line-height: 50px;
 cursor: pointer;
 color: #fff;
 font-size: 17px;
 border-radius: 7px;
}
input.btn_submit:hover {
 background:#00a269;
}
input.btn_submit2{
background:#ccc;
font-size: 13px;
width:30%;
 height:36px;
 line-height: 36px;
 color: #111;
}
input.btn_submit2:hover {
 background:#aaa;
}
}

.sub-box ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 0 10%;
}
.sub-box ol li{
text-align: left;
font-size: 15px;
margin: 0 0 15px;
padding: 0;
}
@media only screen and (max-width: 835px) {
.sub-box ol li{
text-align: left;
font-size: 13px;
margin: 0 0 15px;
padding: 0;
line-height: 150%;
}
}

.staff{
clear: both;
float: left;
width: 100%;
height: auto;
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
	line-height: 0;
}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#000;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	color:#fff;
}
 
#page-top p:hover{
	background:#8b8b8b;
	color:#fff;
}
 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 0;
background: #60c1bd;
}
address{
color: #fff;
font-style: normal;
margin: 0 0 15px;
text-align: center;
line-height: 180%;
font-size: 17px;
}
address span{
font-size: 22px;
}
footer p{
margin: 0;
text-align: center;
color: #fff;
font-size: 15px;
line-height: 100%;
}
@media only screen and (max-width: 1080px) {
address{
color: #fff;
font-style: normal;
margin: 0 0 15px;
text-align: center;
line-height: 180%;
font-size: 16px;
}
address span{
font-size: 20px;
}
footer p{
margin: 0;
text-align: center;
color: #fff;
font-size: 14px;
line-height: 100%;
}
}
@media only screen and (max-width: 835px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 0;
background: #60c1bd;
}
address{
color: #fff;
font-style: normal;
margin: 0 0 15px;
text-align: center;
line-height: 180%;
font-size: 13px;
}
address span{
font-size: 18px;
}
footer p{
margin: 0;
text-align: center;
color: #fff;
font-size: 13px;
line-height: 100%;
}
}

#blog{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5%;
padding: 0 0 50px;
}
.blog-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 15px 3%;
border: 1px solid #60c1bd;
text-align: left;
}