/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:17px;
    font-family: 'Noto Sans JP', sans-serif;
	LINE-HEIGHT: 180%;
	text-align: center;
	background: url(image/header-back.webp) repeat-x right top;
}
@media only screen and (max-width: 1080px) {
body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:17px;
    font-family: 'Noto Sans JP', sans-serif;
	LINE-HEIGHT: 180%;
	text-align: center;
	background: url(image/header-back.webp) repeat-x right top/200%;
}
}
@media only screen and (max-width: 835px) {
body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:17px;
    font-family: 'Noto Sans JP', sans-serif;
	LINE-HEIGHT: 180%;
	text-align: center;
	background: url(image/header-back.webp) repeat-x right top/200%;
}
}
@media only screen and (max-width: 640px) {
body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:17px;
    font-family: 'Noto Sans JP', sans-serif;
	LINE-HEIGHT: 180%;
	text-align: center;
	background: url(image/header-back.webp) repeat-x 90% top/250%;
}
}
@media only screen and (max-width: 479px) {
body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:14px;
    font-family: 'Noto Sans JP', sans-serif;
	LINE-HEIGHT: 180%;
	text-align: center;
	background: url(image/header-back-sm.webp) no-repeat right top/100%;
}
}

/*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:0 auto;
	padding:0;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height: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;
	font-weight: bold;
}

a:hover{
	outline:0;
	color: #4080b2;
}

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: 1080px) {
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 0 0;
padding: 0;
}

#header-title{
clear: both;
float: left;
width: 35%;
height: auto;
margin:20px 2% 0 3%;
padding: 15px 2% 13px;
background: #fff;
border-radius: 40px;
text-align: left;
}
header h1{
clear: both;
float: left;
width: auto;
margin: 0 2% 0 0;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 40px;
color: #9ec238;
font-family: 'M PLUS 1p', sans-serif;
font-weight: normal;
}
header h1 a:link,header h1 a:visited{
color: #9ec238;
text-decoration: none;
}
#header-title p{
float: left;
font-size: 15px;
line-height: 40px;
margin: 0;
}
@media only screen and (max-width: 1366px) {
#header-title{
clear: both;
float: left;
width: 35%;
height: auto;
margin:20px 2% 0 3%;
padding: 15px 1% 8px;
background: #fff;
border-radius: 20px;
text-align: left;
}
}
@media only screen and (max-width: 1280px) {
#header-title{
clear: both;
float: left;
width: 40%;
height: auto;
margin:20px 2% 0 3%;
padding: 15px 1% 8px;
background: #fff;
border-radius: 20px;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
#header-title{
clear: both;
float: left;
width: 70%;
height: auto;
margin:20px 2% 0 3%;
padding: 10px 1% 8px;
background: #fff;
border-radius: 10px;
text-align: left;
}
header h1{
clear: both;
float: left;
width: auto;
margin: 0 2% 0 0;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 35px;
color: #9ec238;
font-family: 'M PLUS 1p', sans-serif;
font-weight: normal;
}
header h1 a:link,header h1 a:visited{
color: #9ec238;
text-decoration: none;
}
#header-title p{
float: left;
font-size: 14px;
line-height: 35px;
margin: 0;
}
}
@media only screen and (max-width: 835px) {
header h1{
clear: both;
float: left;
width: auto;
margin: 0 2% 0 0;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 30px;
color: #9ec238;
font-family: 'M PLUS 1p', sans-serif;
font-weight: normal;
}
#header-title p{
float: left;
font-size: 14px;
line-height: 30px;
margin: 0;
}
}
@media only screen and (max-width: 640px) {
#header-title{
clear: both;
float: left;
width: 85%;
height: auto;
margin:20px 2% 0 3%;
padding: 10px 1% 8px;
background: #fff;
border-radius: 8px;
text-align: left;
}
header h1{
clear: both;
float: left;
width: auto;
margin: 0 2% 0 0;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 25px;
color: #9ec238;
font-family: 'M PLUS 1p', sans-serif;
font-weight: normal;
}
#header-title p{
float: left;
font-size: 13px;
line-height: 25px;
margin: 0;
}
}
@media only screen and (max-width: 479px) {
#header-title{
clear: both;
float: left;
width: 80%;
height: auto;
margin:10px 2% 0 3%;
padding: 5px 2% 3px;
background: #fff;
border-radius: 8px;
text-align: left;
}
header h1{
clear: both;
float: left;
width: auto;
margin: 0 2% 0 0;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 25px;
color: #9ec238;
font-family: 'M PLUS 1p', sans-serif;
font-weight: normal;
}
#header-title p{
float: left;
font-size: 13px;
line-height: 150%;
margin: 0 0 0 1%;
}
}

menu{
float: right;
width: 50%;
height: auto;
margin: 0 0 0 10%;
padding: 0;
}
menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
}
menu li{
flex: 1 0 auto;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
font-size: 20px;
line-height: 150%;
}
menu li.bno,menu li.bno2{
display: none;
}
menu li a:link,menu li a:visited{
display: block;
width: 100%;
height: auto;
padding: 10px 0 0;
text-align: center;
color: #fff;
text-decoration: none;
border-left:2px solid #fff;
}
menu li a:hover{
text-decoration: underline;
}
menu li span{
clear: both;
display: block;
font-size: 13px;
font-weight: normal;
}
@media only screen and (max-width: 1280px) {
menu{
float: right;
width: 50%;
height: auto;
margin: 0 0 0 5%;
padding: 0;
}
menu li{
flex: 1 0 auto;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
font-size: 17px;
line-height: 150%;
}
}

@media only screen and (max-width:1080px) {
menu{
clear: both;
float: left;
width: 100%;
height: auto;
height: 100vh;
margin: 0;
padding: 0;
text-align: center;
background: rgba(64,128,178,0.9);
position: fixed;
top: 0;
}
menu ul{
display:inherit;
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;
flex:inherit;
width: 100%;
float: left;
list-style-type: none;
font-size: 17px;
margin: 0;
padding:0;
border-bottom:1px solid #fff;
text-align: center;
}
menu li.bno,menu li.bno2{
display:inherit;
}
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
background:none;
padding: 15px 0 15px;
text-align: center;
border-left:none;
}
menu li a:hover{
text-decoration: underline;
}
menu li.bno a:link,menu li.bno a:visited{
padding: 5px 0 15px;
background: #b1d549;
color: #333;
font-size: 19px;
line-height: 200%;
}
menu li.bno span{
clear: both;
display: block;
font-size: 14px;
font-weight: normal;
line-height: 120%;
}

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

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

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

/*ボタン内側*/
.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:-2px;
  left:-5px;
  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:-2px;
  left:2px;
  font-size: 0.7rem;
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}

#header-text{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 60px 0 0;
padding: 0 3% 0 3%;
text-align: left;
}
#header-text p{
margin: 0;
padding: 0;
text-align: left;
font-size: 60px;
color: #fff;
text-shadow: 3px 3px 3px #6a9a27;
font-family: 'M PLUS 1p', sans-serif;
line-height: 150%;
}
#header-text p.p1{
font-size: 35px;
text-shadow: none;
}
#header-text p.p1 span{
color: #2d5b80;
}
@media only screen and (max-width: 1080px) {
#header-text p{
margin: 0;
padding: 0;
text-align: left;
font-size: 50px;
color: #fff;
text-shadow: 3px 3px 3px #6a9a27;
font-family: 'M PLUS 1p', sans-serif;
line-height: 150%;
}
#header-text p.p1{
font-size: 30px;
text-shadow: none;
}
}
@media only screen and (max-width: 835px) {
#header-text{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0 3% 0 3%;
text-align: left;
}
#header-text p{
margin: 0;
padding: 0;
text-align: left;
font-size: 40px;
color: #fff;
text-shadow: 3px 3px 3px #6a9a27;
font-family: 'M PLUS 1p', sans-serif;
line-height: 150%;
}
#header-text p.p1{
font-size: 25px;
text-shadow: none;
}
}
@media only screen and (max-width: 640px) {
#header-text{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0 3% 0 3%;
text-align: left;
}
#header-text p{
margin: 0 0 25px;
padding: 0;
text-align: left;
font-size: 50px;
color: #fff;
text-shadow: 3px 3px 3px #6a9a27;
font-family: 'M PLUS 1p', sans-serif;
line-height: 130%;
}
#header-text p.p1{
font-size: 25px;
text-shadow: none;
margin: 0 0 15px;
}
}
@media only screen and (max-width: 479px) {
#header-text p{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 30px;
color: #fff;
text-shadow: 3px 3px 3px #6a9a27;
font-family: 'M PLUS 1p', sans-serif;
line-height: 120%;
}
#header-text p.p1{
font-size: 19px;
text-shadow: none;
margin: 0 0 5px;
}
}

#header-box{
clear: both;
float: left;
width: 45%;
height: auto;
margin: 30px 55% 0 0;
padding: 30px;
border: 4px solid #fff;
}
#header-box img{
max-width: 100%;
}
@media only screen and (max-width: 1280px) {
#header-box{
clear: both;
float: left;
width: 55%;
height: auto;
margin: 30px 45% 0 0;
padding: 30px;
border: 4px solid #fff;
}
}
@media only screen and (max-width: 1080px) {
#header-box{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 20px 40% 0 0;
padding: 25px 2%;
border: 3px solid #fff;
}
}
@media only screen and (max-width: 835px) {
#header-box{
clear: both;
float: left;
width: 70%;
height: auto;
margin: 20px 30% 0 0;
padding: 20px 2%;
border: 3px solid #fff;
}
}
@media only screen and (max-width: 640px) {
#header-box{
display: none;
clear: both;
float: left;
width: 80%;
height: auto;
margin: 20px 20% 0 0;
padding: 15px 2%;
border: 2px solid #fff;
}
}
@media only screen and (max-width: 479px) {
#header-box{
display: none;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0 0;
padding: 10px 2%;
border: 2px solid #fff;
}
}

#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0;
}
#photo ul{
margin: 0;
padding: 0;
}
/*スライダーのためのcss*/
#photo .slider2 img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
#photo .slider2 .slick-slide {
    margin:0 40px;/*スライド左右の余白調整*/
}
#photo .slider2 img{
max-width: 100%;
}
@media only screen and (max-width: 1080px) {
#photo .slider2 .slick-slide {
    margin:0 20px;/*スライド左右の余白調整*/
}
}
@media only screen and (max-width: 835px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0;
}
}
@media only screen and (max-width: 640px) {
#photo .slider2 .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}
}

/*main
--------------------------------------------------------------------------*/
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0;
text-align: center;
}
main p{
font-size: 17px;
margin: 0 0 40px;
text-align: left;
line-height: 180%;
}
@media only screen and (max-width: 835px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0;
text-align: center;
}
main p{
font-size: 15px;
margin: 0 0 30px;
text-align: left;
line-height: 180%;
}
}
@media only screen and (max-width: 640px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 90px 0 0;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 479px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0;
text-align: center;
}
main p{
font-size: 14px;
margin: 0 0 25px;
text-align: left;
line-height: 180%;
}
}

#top-info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0 5%;
}
#top-info h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
text-align: left;
font-weight: normal;
font-size: 30px;
line-height: 150%;
}
#top-info h2 span{
color: #4080b2;
font-size: 40px;
}
@media only screen and (max-width: 1080px) {
#top-info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0 3%;
position: relative;
}
#top-info h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0 3% 0 0;
text-align: center;
font-weight: normal;
font-size: 30px;
line-height: 150%;
}
#top-info h2 span{
color: #4080b2;
font-size: 40px;
}
}
@media only screen and (max-width: 640px) {
#top-info h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0 3% 0 0;
text-align: center;
font-weight: normal;
font-size: 25px;
line-height: 130%;
}
#top-info h2 span{
color: #4080b2;
font-size: 35px;
}
}
@media only screen and (max-width: 479px) {
#top-info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
}
#top-info h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 3% 0 0;
text-align: center;
font-weight: normal;
font-size: 23px;
line-height: 130%;
}
#top-info h2 span{
color: #4080b2;
font-size: 30px;
}
}

#top-info-box{
clear: both;
float: left;
width: 40%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
#top-info-box h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
line-height: 130%;
font-weight: normal;
font-size: 50px;
font-family: 'M PLUS 1p', sans-serif;
}
#top-info-box p{
text-align: left;
font-size: 20px;
line-height: 200%;
margin: 0 0 40px;
}
#top-info-box p.f-green{
color: #b1d549;
font-size: 30px;
font-family: 'M PLUS 1p', sans-serif;
line-height: 120%;
}
#top-info-box p .f-blue{
color: #4080b2;
font-size: 22px;
font-family: 'M PLUS 1p', sans-serif;
line-height: 120%;
}
#top-info-box p a{
font-size: 22px;
font-family: 'M PLUS 1p', sans-serif;
}
@media only screen and (max-width: 1366px) {
#top-info-box p{
text-align: left;
font-size: 17px;
line-height: 200%;
margin: 0 0 40px;
}
#top-info-box p .f-blue{
color: #4080b2;
font-size: 20px;
font-family: 'M PLUS 1p', sans-serif;
line-height: 120%;
}
}
@media only screen and (max-width: 1280px) {
#top-info-box{
clear: both;
float: left;
width: 45%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
#top-info-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0 40% 0 3%;
text-align: left;
z-index: 9990;
position: absolute;
}
#top-info-box p{
clear: both;
text-align: left;
font-size: 16px;
line-height: 200%;
margin: 0;
padding: 15px 0;
background: rgba(255,255,255,0.8);
}
}
@media only screen and (max-width: 835px) {
#top-info-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 0 3%;
text-align: center;
z-index: 1;
position: relative;
}
#top-info-box h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: center;
line-height: 130%;
font-weight: normal;
font-size: 45px;
font-family: 'M PLUS 1p', sans-serif;
}
#top-info-box p{
clear: both;
text-align: center;
font-size: 17px;
line-height: 180%;
margin: 0;
padding: 15px 0;
background: rgba(255,255,255,0.8);
}
#top-info-box p.f-green{
color: #b1d549;
font-size: 25px;
font-family: 'M PLUS 1p', sans-serif;
line-height: 120%;
}
}
@media only screen and (max-width: 479px) {
#top-info-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 0 3%;
text-align: center;
z-index: 1;
position: relative;
}
#top-info-box h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: center;
line-height: 120%;
font-weight: normal;
font-size: 35px;
font-family: 'M PLUS 1p', sans-serif;
}
#top-info-box p{
clear: both;
text-align: center;
font-size: 14px;
line-height: 150%;
margin: 0 0 25px;
padding: 0;
background: rgba(255,255,255,0.8);
}
#top-info-box p .f-blue{
color: #4080b2;
font-size: 17px;
font-family: 'Noto Sans JP', sans-serif;
line-height: 120%;
font-weight: bold;
}
#top-info-box p a{
font-size: 17px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
}
}

#top-info-pict{
float: right;
width: 60%;
height: auto;
margin: 0;
padding: 0;
}
#top-info-pict img{
max-width: 100%;
}
@media only screen and (max-width: 1280px) {
#top-info-pict{
float: right;
width:55%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
#top-info-pict{
float: right;
width:90%;
height: auto;
margin: 0 0 20px 10%;
padding: 0;
z-index: 1;
}
}

nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
nav ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
nav li{
float: left;
margin: 0 3% 0 0;
padding: 0 30px 10px 0;
font-size: 20px;
line-height: 100%;
list-style-type: none;
background: url(image/nav-li.png) no-repeat right center;
}
nav li a:link,nav li a:visited{
text-decoration: none;
color: #4080b2;
border-bottom: 2px solid #ccc;
}
nav li a:hover{
border-bottom: 2px solid #4080b2;
}
@media only screen and (max-width: 1366px) {
nav li{
float: left;
margin: 0 3% 0 0;
padding: 0 30px 10px 0;
font-size: 17px;
line-height: 100%;
list-style-type: none;
background: url(image/nav-li.png) no-repeat right center;
}
}
@media only screen and (max-width: 1280px) {
nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 0 3%;
}
}
@media only screen and (max-width: 835px) {
nav li{
float: left;
margin: 0 3% 0 0;
padding: 0 20px 10px 0;
font-size: 15px;
line-height: 100%;
list-style-type: none;
background: url(image/nav-li.png) no-repeat right center/10%;
}
nav li a:link,nav li a:visited{
text-decoration: none;
color: #4080b2;
border-bottom: 1px solid #999;
}
nav li a:hover{
border-bottom: 2px solid #4080b2;
}
}
@media only screen and (max-width: 479px) {
nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}
nav li{
float: left;
width: 50%;
margin: 0 0 10px;
padding: 0 0 10px 3%;
font-size: 14px;
line-height: 100%;
list-style-type: none;
text-align: left;
background: url(image/nav-li.png) no-repeat 90% center/7%;
}
}

#top-tokucho{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 150px 0 0;
padding: 0 0 0 5%;
}
#top-tokucho h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: left;
line-height: 130%;
font-weight: normal;
font-size: 50px;
font-family: 'M PLUS 1p', sans-serif;
}
@media only screen and (max-width: 1280px) {
#top-tokucho{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0 0 0 5%;
}
}
@media only screen and (max-width: 1080px) {
#top-tokucho h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0px 0 30px;
padding: 0;
text-align: left;
line-height: 130%;
font-weight: normal;
font-size: 50px;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 835px) {
#top-tokucho{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0 0 0 3%;
}
#top-tokucho h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0px 0 15px;
padding: 0;
text-align: center;
line-height: 130%;
font-weight: normal;
font-size:45px;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 479px) {
#top-tokucho{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0;
}
#top-tokucho h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0px 0 15px;
padding: 0;
text-align: center;
line-height: 130%;
font-weight: normal;
font-size:35px;
font-family: 'M PLUS 1p', sans-serif;
}
}

#top-tokucho-box{
clear: both;
float: left;
width: 40%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
#top-tokucho-box dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#top-tokucho-box dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 30px;
color: #b1d549;
font-family: 'M PLUS 1p', sans-serif;
}
#top-tokucho-box dt img{
margin: 0 2% 0 0;
vertical-align:text-bottom;
max-width: 10%;
}
#top-tokucho-box dd{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 30px;
text-align: left;
font-size: 17px;
line-height: 200%;
border-bottom: 1px solid #ccc;
}
@media only screen and (max-width: 1366px) {
#top-tokucho-box dd{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0 0 25px;
text-align: left;
font-size: 16px;
line-height: 160%;
border-bottom: 1px solid #ccc;
}
}
@media only screen and (max-width: 1280px) {
#top-tokucho-box{
clear: both;
float: left;
width: 45%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
#top-tokucho-box dt img{
margin: 0 2% 0 0;
vertical-align:middle;
max-width: 7%;
}
}
@media only screen and (max-width: 1080px) {
#top-tokucho-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 40% 0 3%;
text-align: left;
z-index: 9990;
position: absolute;
}
#top-tokucho-box dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:20px 0;
background: rgba(255,255,255,0.9);
}
}
@media only screen and (max-width: 835px) {
#top-tokucho-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 0 3%;
text-align:center;
z-index: 1;
position: relative;
}
#top-tokucho-box dt{
clear: both;
float: left;
width: 30%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 25px;
color: #b1d549;
font-family: 'M PLUS 1p', sans-serif;
}
#top-tokucho-box dt img{
margin: 0 3% 0 0;
vertical-align:middle;
max-width: 13%;
}
#top-tokucho-box dd{
clear: none;
float: left;
width: 70%;
height: auto;
margin: 0 0 20px;
padding: 0 0 20px;
text-align: left;
font-size: 17px;
line-height: 180%;
border-bottom: 1px solid #ccc;
}
}
@media only screen and (max-width: 640px) {
#top-tokucho-box dd{
clear: none;
float: left;
width: 70%;
height: auto;
margin: 0 0 20px;
padding: 0 0 20px;
text-align: left;
font-size: 15px;
line-height: 180%;
border-bottom: 1px solid #ccc;
}
}
@media only screen and (max-width: 479px) {
#top-tokucho-box dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 25px;
color: #b1d549;
font-family: 'M PLUS 1p', sans-serif;
}
#top-tokucho-box dt img{
margin: 0 3% 0 0;
vertical-align:middle;
max-width: 8%;
}
#top-tokucho-box dd{
clear: none;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 0 20px;
text-align: left;
font-size: 15px;
line-height: 160%;
border-bottom: 1px solid #ccc;
}
}

#top-tokucho-pict{
float: right;
width: 60%;
height: auto;
margin: 0;
padding: 0;
}
#top-tokucho-pict img{
max-width: 100%;
}
@media only screen and (max-width: 1280px) {
#top-tokucho-pict{
float: right;
width: 55%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
#top-tokucho-pict{
float: right;
width:90%;
height: auto;
margin: 100px 0 0 10%;
padding: 0;
z-index: 1;
}
}
@media only screen and (max-width: 835px) {
#top-tokucho-pict{
float: right;
width:90%;
height: auto;
margin: 0 0 0 10%;
padding: 0;
z-index: 1;
}
}

#top-prof{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 150px 0 0;
padding: 0 0 0 5%;
}
#top-prof h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: left;
line-height: 130%;
font-weight: normal;
font-size: 50px;
font-family: 'M PLUS 1p', sans-serif;
}
@media only screen and (max-width: 1280px) {
#top-prof{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0 0 0 5%;
}
}
@media only screen and (max-width: 1080px) {
#top-prof{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 150px 0 0;
padding: 0 0 0 5%;
}
}
@media only screen and (max-width: 835px) {
#top-prof{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 80px 0 0;
padding: 0 0 0 5%;
}
#top-prof h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
line-height: 130%;
font-weight: normal;
font-size: 45px;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 479px) {
#top-prof{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 70px 0 0;
padding: 0;
}
#top-prof h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
text-align: center;
line-height: 130%;
font-weight: normal;
font-size: 35px;
font-family: 'M PLUS 1p', sans-serif;
}
}

#top-prof-box{
clear: both;
float: left;
width: 40%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
#top-prof-box p{
text-align: justify;
text-justify: inter-ideograph;
font-size: 20px;
line-height: 200%;
margin: 0 0 40px;
}
@media only screen and (max-width: 1366px) {
#top-prof-box p{
text-align: justify;
text-justify: inter-ideograph;
font-size: 17px;
line-height: 200%;
margin: 0 0 40px;
}
}
@media only screen and (max-width: 1280px) {
#top-prof-box{
clear: both;
float: left;
width: 45%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
#top-prof-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 40% 0 3%;
text-align: left;
z-index: 9990;
position: absolute;
}
#top-prof-box p{
clear: both;
text-align: left;
font-size: 16px;
line-height: 200%;
margin: 350px 0 0;
padding: 15px 0;
background: rgba(255,255,255,0.8);
}
}
@media only screen and (max-width: 835px) {
#top-prof-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0;
text-align: left;
z-index: 9990;
position:relative;
}
#top-prof-box p{
clear: both;
text-align: left;
font-size: 17px;
line-height: 180%;
margin: 0 0 30px;
padding: 0 5% 0 3%;
background: none;
}
}
@media only screen and (max-width: 640px) {
#top-prof-box p{
clear: both;
text-align: left;
font-size: 15px;
line-height: 180%;
margin: 0 0 30px;
padding: 0 5% 0 3%;
background: none;
}
}
@media only screen and (max-width: 479px) {
#top-prof-box p{
clear: both;
text-align: left;
font-size: 14px;
line-height: 150%;
margin: 0 0 25px;
padding: 0 3% 0 3%;
background: none;
}
}

#top-prof-pict{
float: right;
width: 60%;
height: auto;
margin: 0;
padding: 0;
}
#top-prof-pict img{
max-width: 100%;
}
@media only screen and (max-width: 1280px) {
#top-prof-pict{
float: right;
width: 55%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
#top-prof-pict{
float: right;
width:90%;
height: auto;
margin: 80px 0 0 10%;
padding: 0;
z-index: 1;
}
}
@media only screen and (max-width: 835px) {
#top-prof-pict{
float: right;
width:90%;
height: auto;
margin: 0 0 0 10%;
padding: 0;
z-index: 1;
}
}

#top-access{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 150px 0 0;
padding: 0 0 0 5%;
}
#top-access h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: left;
line-height: 130%;
font-weight: normal;
font-size: 50px;
font-family: 'M PLUS 1p', sans-serif;
}
@media only screen and (max-width: 1280px) {
#top-access{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0 0 0 5%;
}
}
@media only screen and (max-width: 1080px) {
#top-access{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 150px 0 0;
padding: 0 0 0 5%;
}
#top-access h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
line-height: 130%;
font-weight: normal;
font-size: 50px;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 835px) {
#top-access{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0 0 0 5%;
}
#top-access h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
line-height: 130%;
font-weight: normal;
font-size: 45px;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 479px) {
#top-access{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 60px 0 0;
padding: 0;
}
#top-access h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: center;
line-height: 130%;
font-weight: normal;
font-size: 35px;
font-family: 'M PLUS 1p', sans-serif;
}
}

#top-access-box{
clear: both;
float: left;
width: 40%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
#top-access-box p{
text-align: justify;
text-justify: inter-ideograph;
font-size: 20px;
line-height: 200%;
margin: 0 0 40px;
}
#top-access-box p .f-blue{
color: #4080b2;
font-size: 22px;
font-family: 'M PLUS 1p', sans-serif;
line-height: 120%;
}
@media only screen and (max-width: 1366px) {
#top-access-box p{
text-align: justify;
text-justify: inter-ideograph;
font-size: 17px;
line-height: 200%;
margin: 0 0 40px;
}
#top-access-box p .f-blue{
color: #4080b2;
font-size: 20px;
font-family: 'M PLUS 1p', sans-serif;
line-height: 120%;
}
}
@media only screen and (max-width: 1280px) {
#top-access-box{
clear: both;
float: left;
width: 45%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
#top-access-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 40% 0 3%;
text-align: left;
z-index: 9990;
position: absolute;
}
#top-access-box p{
clear: both;
text-align: left;
font-size: 16px;
line-height: 200%;
margin: 0;
padding: 15px 0;
background: rgba(255,255,255,0.8);
}
}
@media only screen and (max-width: 835px) {
#top-access-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 0 3%;
text-align: left;
z-index: 9990;
position: relative;
}
#top-access-box p{
clear: both;
text-align: center;
font-size: 17px;
line-height: 180%;
margin: 0 0 20px;
padding: 0;
background: none;
}
}
@media only screen and (max-width: 640px) {
#top-access-box p{
clear: both;
text-align: center;
font-size: 15px;
line-height: 180%;
margin: 0 0 20px;
padding: 0;
background: none;
}
}
@media only screen and (max-width: 479px) {
#top-access-box p{
clear: both;
text-align: center;
font-size: 14px;
line-height: 150%;
margin: 0 0 20px;
padding: 0;
background: none;
}
#top-access-box p .f-blue{
color: #4080b2;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
line-height: 120%;
}
}

#top-access-pict{
float: right;
width: 60%;
height: auto;
margin: 0;
padding: 0;
}
#top-access-pict img{
max-width: 100%;
}
@media only screen and (max-width: 1280px) {
#top-access-pict{
float: right;
width: 55%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
#top-access-pict{
float: right;
width:90%;
height: auto;
margin: 100px 0 0 10%;
padding: 0;
z-index: 1;
}
}
@media only screen and (max-width: 835px) {
#top-access-pict{
float: right;
width:90%;
height: auto;
margin: 20px 0 0 10%;
padding: 0;
z-index: 1;
}
}
@media only screen and (max-width: 479px) {
#top-access-pict{
float: right;
width:90%;
height: auto;
margin: 0 0 0 10%;
padding: 0;
z-index: 1;
}
}

#top-access iframe{
clear: both;
float: left;
width: 95%;
height: 500px;
margin: 30px 5% 0 0;
padding: 0;
}
@media only screen and (max-width: 1080px) {
#top-access iframe{
clear: both;
float: left;
width: 95%;
height: 400px;
margin: 30px 5% 0 0;
padding: 0;
}
}
@media only screen and (max-width: 835px) {
#top-access iframe{
clear: both;
float: left;
width: 95%;
height: 350px;
margin: 30px 5% 0 0;
padding: 0;
}
}
@media only screen and (max-width: 479px) {
#top-access iframe{
clear: both;
float: left;
width: 90%;
height: 300px;
margin: 30px 5% 0 5%;
padding: 0;
}
}

/*サブページ
--------------------------------------------------------------------------*/
#sub-page{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 150px 20% 0;
padding: 0;
text-align: left;
}
@media only screen and (max-width: 1366px) {
#sub-page{
clear: both;
float: left;
width: 70%;
height: auto;
margin: 150px 15% 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 1280px) {
#sub-page{
clear: both;
float: left;
width: 80%;
height: auto;
margin: 150px 10% 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
#sub-page{
clear: both;
float: left;
width: 80%;
height: auto;
margin: 100px 10% 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 835px) {
#sub-page{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 60px 5% 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 640px) {
#sub-page{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 60px 5% 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 479px) {
#sub-page{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 100px 5% 0;
padding: 0;
text-align: left;
}
}

main #sub-page p{
font-size: 20px;
line-height: 200%;
margin: 0 0 40px;
text-align: left;
}
@media only screen and (max-width: 1080px) {
main #sub-page p{
font-size: 17px;
line-height: 200%;
margin: 0 0 30px;
text-align: left;
}
}
@media only screen and (max-width: 835px) {
main #sub-page p{
font-size: 16px;
line-height: 200%;
margin: 0 0 30px;
text-align: left;
}
}
@media only screen and (max-width: 640px) {
main #sub-page p{
font-size: 15px;
line-height: 180%;
margin: 0 0 30px;
text-align: left;
}
}
@media only screen and (max-width: 479px) {
main #sub-page p{
font-size: 14px;
line-height: 180%;
margin: 0 0 30px;
text-align: left;
}
}

main #sub-page p strong{
font-weight: bold;
font-size: 1.2em;
}
main #sub-page p strong.f-green{
font-weight: bold;
font-size: 1.3em;
color: #90b624;
}
#sub-page p.f40{
font-family: 'M PLUS 1p', sans-serif;
font-size: 40px;
}
@media only screen and (max-width: 1080px) {
#sub-page p.f40{
font-family: 'M PLUS 1p', sans-serif;
font-size: 35px;
}
}
@media only screen and (max-width: 835px) {
#sub-page p.f40{
font-family: 'M PLUS 1p', sans-serif;
font-size: 30px;
}
}
@media only screen and (max-width: 640px) {
#sub-page p.f40{
font-family: 'M PLUS 1p', sans-serif;
font-size: 25px;
}
}
@media only screen and (max-width: 479px) {
#sub-page p.f40{
font-family: 'M PLUS 1p', sans-serif;
font-size: 22px;
line-height: 120%;
}
}

#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 0;
font-size: 60px;
font-weight: normal;
line-height: 100%;
text-align: left;
color: #b1d549;
font-family: 'M PLUS 1p', sans-serif;
}
@media only screen and (max-width: 1080px) {
#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
font-size: 50px;
font-weight: normal;
line-height: 100%;
text-align: left;
color: #b1d549;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 835px) {
#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 70px;
padding: 0;
font-size: 45px;
font-weight: normal;
line-height: 100%;
text-align: left;
color: #b1d549;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 479px) {
#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
font-size: 35px;
font-weight: normal;
line-height: 100%;
text-align: left;
color: #b1d549;
font-family: 'M PLUS 1p', sans-serif;
}
}

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

.sub-box h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
font-size: 40px;
font-weight: normal;
color: #4080b2;
line-height: 120%;
text-align: left;
font-family: 'M PLUS 1p', sans-serif;
}
@media only screen and (max-width: 1080px) {
.sub-box h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
font-size: 35px;
font-weight: normal;
color: #4080b2;
line-height: 120%;
text-align: left;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 835px) {
.sub-box h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 35px;
padding: 0;
font-size: 30px;
font-weight: normal;
color: #4080b2;
line-height: 120%;
text-align: left;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 479px) {
.sub-box h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 5px;
font-size: 25px;
font-weight: normal;
color: #4080b2;
line-height: 120%;
text-align: left;
font-family: 'M PLUS 1p', sans-serif;
border-bottom: 1px solid #4080b2;
}
}

.sub-pict{
clear: both;
float: left;
width: 35%;
margin: 0;
padding: 0;
}
.sub-pict img{
max-width: 100%;
}
@media only screen and (max-width: 479px) {
.sub-pict{
clear: both;
float: left;
width: 100%;
margin: 0 0 15px;
padding: 0 10%;
}
}

.sub-text{
float: right;
width: 65%;
margin: 0;
padding: 0 0 0 5%;
}
@media only screen and (max-width: 479px) {
.sub-text{
clear: both;
float: right;
width: 100%;
margin: 0;
padding: 0;
}
}

.sub-text ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}
.sub-text ul li{
text-align: left;
font-size: 22px;
line-height: 150%;
margin: 0 0 30px;
padding: 0 0 5px 6%;
background: url(image/be-li.png) no-repeat left center/4%;
list-style-type: none;
}
@media only screen and (max-width: 1080px) {
.sub-text ul li{
text-align: left;
font-size: 17px;
line-height: 150%;
margin: 0 0 30px;
padding: 0 0 5px 6%;
background: url(image/be-li.png) no-repeat left center/4%;
list-style-type: none;
}
}
@media only screen and (max-width: 640px) {
.sub-text ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 0;
}
.sub-text ul li{
text-align: left;
font-size: 17px;
line-height: 150%;
margin: 0 0 30px;
padding: 0 0 5px 10%;
background: url(image/be-li.png) no-repeat left center/7%;
list-style-type: none;
}
}
@media only screen and (max-width: 479px) {
.sub-text ul li{
text-align: left;
font-size: 15px;
line-height: 150%;
margin: 0 0 20px;
padding: 0 0 5px 10%;
background: url(image/be-li.png) no-repeat left center/7%;
list-style-type: none;
}
}

#be-kekka{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 5% 10px;
border: 3px solid #4080b2;
background: url(image/be-back.png) no-repeat left top,url(image/be-back2.png) no-repeat right bottom;
}
#sub-page #be-kekka p{
text-align: center;
font-size: 25px;
font-family: 'M PLUS 1p', sans-serif;
}
#sub-page #be-kekka p.f-green{
color: #4080b2;
font-size: 30px;
}
@media only screen and (max-width: 835px) {
#be-kekka{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 5% 5px;
border: 3px solid #4080b2;
background: url(image/be-back.png) no-repeat left top,url(image/be-back2.png) no-repeat right bottom;
}
#sub-page #be-kekka p{
text-align: center;
font-size: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
line-height: 170%;
}
#sub-page #be-kekka p.f-green{
color: #4080b2;
font-size: 25px;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 640px) {
#sub-page #be-kekka p{
text-align: center;
font-size: 17px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
line-height: 170%;
}
#sub-page #be-kekka p.f-green{
color: #4080b2;
font-size: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
}
}
@media only screen and (max-width: 479px) {
#be-kekka{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 5% 5px;
border: 3px solid #4080b2;
background: url(image/be-back.png) no-repeat left top/30%,url(image/be-back2.png) no-repeat right bottom/30%;
}
#sub-page #be-kekka p{
text-align: center;
font-size: 14px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
line-height: 160%;
margin: 0 0 15px;
}
#sub-page #be-kekka p.f-green{
color: #4080b2;
font-size: 17px;
line-height: 160%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
}
}

#flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 40px 5% 5px;
background: #f5f1e9;
}
@media only screen and (max-width: 1080px) {
#flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding:30px 5% 5px;
background: #f5f1e9;
}
}

.flow-pict{
clear: both;
float: left;
width: 45%;
margin: 0;
padding: 0;
}
.flow-pict img{
max-width: 100%;
margin: 0 0 15px;
}
@media only screen and (max-width: 479px) {
.flow-pict{
clear: both;
float: left;
width: 100%;
margin: 0 0 15px;
padding: 0 10%;
}
}

.flow-text{
float: right;
width:55%;
margin: 0;
padding: 0 0 0 5%;
}
@media only screen and (max-width: 479px) {
.flow-text{
clear: both;
float: right;
width: 100%;
margin: 0;
padding: 0;
}
}

.flow-text h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight: bold;
line-height: 150%;
color: #b1d549;
font-size: 27px;
font-family: 'M PLUS 1p', sans-serif;
}
@media only screen and (max-width: 835px) {
.flow-text h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight: bold;
line-height: 150%;
color: #b1d549;
font-size: 25px;
font-family: 'M PLUS 1p', sans-serif;
}
}
@media only screen and (max-width: 479px) {
.flow-text h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight: bold;
line-height: 150%;
color: #b1d549;
font-size: 20px;
font-family: 'Noto Sans JP', sans-serif;
}
}

.flow-text ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}
.flow-text ul li{
text-align: left;
font-size: 22px;
line-height: 150%;
margin: 0 0 30px;
padding: 0 0 5px 6%;
background: url(image/be-li.png) no-repeat left center/4%;
list-style-type: none;
}
@media only screen and (max-width: 1080px) {
.flow-text ul li{
text-align: left;
font-size: 17px;
line-height: 150%;
margin: 0 0 30px;
padding: 0 0 5px 6%;
background: url(image/be-li.png) no-repeat left center/4%;
list-style-type: none;
}
}
@media only screen and (max-width: 835px) {
.flow-text ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
}
.flow-text ul li{
text-align: left;
font-size: 17px;
line-height: 150%;
margin: 0 0 20px;
padding: 0 0 5px 6%;
background: url(image/be-li.png) no-repeat left center/4%;
list-style-type: none;
}
}
@media only screen and (max-width: 640px) {
.flow-text ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 0;
}
.flow-text ul li{
text-align: left;
font-size: 17px;
line-height: 150%;
margin: 0 0 30px;
padding: 0 0 5px 10%;
background: url(image/be-li.png) no-repeat left center/7%;
list-style-type: none;
}
}
@media only screen and (max-width: 479px) {
.flow-text ul li{
text-align: left;
font-size: 15px;
line-height: 150%;
margin: 0 0 20px;
padding: 0 0 5px 10%;
background: url(image/be-li.png) no-repeat left center/7%;
list-style-type: none;
}
}

.voice{
display: flex;
}
.voice-box{
margin: 0 2% 30px 0;
padding: 20px 3%;
border: 2px solid #4080b2;
text-align: center;
}
.voice-box img{
max-width: 100%;
}
@media only screen and (max-width: 640px) {
.voice{
display: inherit;
}
.voice-box{
clear: both;
float: left;
width: 100%;
margin: 0 2% 30px 0;
padding: 20px 3%;
border: 2px solid #4080b2;
text-align: center;
}
}

.voice h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 10px 0;
text-align: center;
font-weight: normal;
line-height: 150%;
font-size: 20px;
background: #f5f1e9;
}
@media only screen and (max-width: 1080px) {
.voice h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 10px 0;
text-align: center;
font-weight: bold;
line-height: 150%;
font-size: 18px;
background: #f5f1e9;
}
}
@media only screen and (max-width: 479px) {
.voice h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 10px 0;
text-align: center;
font-weight: bold;
line-height: 150%;
font-size: 16px;
background: #f5f1e9;
}
}

#sub-page .voice p{
font-size: 17px;
line-height: 180%;
margin: 0 0 25px;
}
@media only screen and (max-width: 1080px) {
#sub-page .voice p{
font-size: 15px;
line-height: 180%;
margin: 0 0 20px;
}
}
@media only screen and (max-width: 479px) {
#sub-page .voice p{
font-size: 14px;
line-height: 180%;
margin: 0 0 20px;
}
}


#staff-none{
display: none;
}
#staff{
text-align: center;
}
#staff img{
margin: 0 0 40px;
max-width: 70%;
}
#staff img.pict-right{
float: right;
margin: 0 0 15px 3%;
max-width: 40%;
}
#staff img.pict-herf{
max-width: 48%;
margin: 0 1%;
}
@media only screen and (max-width: 479px) {
#staff img{
margin: 0 5% 30px;
max-width: 90%;
}
#staff img.pict-right{
float: none;
margin: 0 5% 30px;
max-width: 90%;
}
#staff img.pict-herf{
margin: 0 5% 30px;
max-width: 90%;
}
}

.f15{
font-size: 15px;
}
@media only screen and (max-width: 479px) {
.f15{
font-size: 13px;
}
}

/*フッタ
--------------------------------------------------------------------------*/
#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:#b1d549;
	-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: 100px 0 0;
padding:50px 5%;
background: #f5f1e9;
}
#footer-box{
clear: both;
float: left;
width: 45%;
height: auto;
margin: 0;
padding: 30px;
border: 4px solid #3d3739;
}
#footer-box img{
max-width: 100%;
}
@media only screen and (max-width: 1080px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding:30px 5%;
background: #f5f1e9;
}
#footer-box{
clear: both;
float: left;
width: 35%;
height: auto;
margin: 0;
padding: 20px;
border: 3px solid #3d3739;
}
}
@media only screen and (max-width: 835px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 60px 0 0;
padding:30px 5%;
background: #f5f1e9;
}
}
@media only screen and (max-width: 640px) {
#footer-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 15px;
border: 2px solid #3d3739;
}
}
@media only screen and (max-width: 479px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding:15px 5%;
background: #f5f1e9;
}
}

#footer-text{
float: right;
width: 55%;
height: auto;
margin: 0;
padding: 0 0 0 3%;
}
#footer-text p{
text-align: left;
line-height: 150%;
margin: 0;
font-size: 15px;
}
#footer-text p strong{
font-weight: bold;
font-size: 17px;
color: #4080b2;
}
@media only screen and (max-width: 1080px) {
#footer-text{
float: right;
width: 65%;
height: auto;
margin: 0;
padding: 0 0 0 3%;
}
}
@media only screen and (max-width: 835px) {
#footer-text p{
text-align: left;
line-height: 150%;
margin: 0;
font-size: 13px;
}
#footer-text p strong{
font-weight: bold;
font-size: 15px;
color: #4080b2;
}
}
@media only screen and (max-width: 640px) {
#footer-text{
clear: both;
float: right;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}

footer ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
}
footer li{
list-style-type: none;
float: left;
margin: 0 5% 0 0;
padding: 0;
font-size: 16px;
line-height: 100%;
}
footer li a:link,footer li a:visited{
color: #3d3739;
text-decoration: underline;
}
footer li a:hover{
color: #4080b2;
}
@media only screen and (max-width: 1366px) {
footer li{
list-style-type: none;
float: left;
margin: 0 4% 0 0;
padding: 0;
font-size: 15px;
line-height: 100%;
}
}
@media only screen and (max-width: 1080px) {
footer ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
}
footer li{
list-style-type: none;
float: left;
margin: 0 3% 0 0;
padding: 0;
font-size: 14px;
line-height: 100%;
}
}
@media only screen and (max-width: 835px) {
footer li{
list-style-type: none;
float: left;
margin: 0 3% 15px 0;
padding: 0;
font-size: 13px;
line-height: 100%;
}
}
@media only screen and (max-width: 640px) {
footer ul{
display: none;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
}
}

#footer-price{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
}
footer h6{
clear: both;
float: left;
width: 20%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 100%;
background: #4080b2;
}
#footer-text #footer-price p{
float: left;
width: 78%;
margin: 0 0 0 2%;
font-size: 20px;
line-height: 150%;
text-align: left;
}
@media only screen and (max-width: 1080px) {
footer h6{
clear: both;
float: left;
width: 20%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
color: #fff;
font-size: 18px;
line-height: 100%;
background: #4080b2;
}
#footer-text #footer-price p{
float: left;
width: 78%;
margin: 0 0 0 2%;
font-size: 18px;
line-height: 150%;
text-align: left;
}
}
@media only screen and (max-width: 835px) {
footer h6{
clear: both;
float: left;
width: 20%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
color: #fff;
font-size: 15px;
line-height: 100%;
background: #4080b2;
}
#footer-text #footer-price p{
float: left;
width: 78%;
margin: 0 0 0 2%;
font-size: 15px;
line-height: 150%;
text-align: left;
}
}
@media only screen and (max-width: 479px) {
footer h6{
clear: both;
float: left;
width: 20%;
height: auto;
margin: 0;
padding: 15px 0;
text-align: center;
color: #fff;
font-size: 13px;
line-height: 100%;
background: #4080b2;
}
#footer-text #footer-price p{
float: left;
width: 78%;
margin: 0 0 0 2%;
font-size: 14px;
line-height: 150%;
text-align: left;
}
}

address{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0 5%;
font-style: normal;
font-size: 15px;
line-height: 120%;
text-align: left;
}
address strong{
margin: 0 2% 0 0;
font-size: 40px;
color: #9ec238;
font-family: 'M PLUS 1p', sans-serif;
font-weight: normal;
}
address strong a:link,address strong a:visited{
color: #9ec238;
text-decoration: none;
}
@media only screen and (max-width: 1080px) {
address strong{
margin: 0 2% 0 0;
font-size: 35px;
color: #9ec238;
font-family: 'M PLUS 1p', sans-serif;
font-weight: normal;
}
}
@media only screen and (max-width: 835px) {
address{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0 5%;
font-style: normal;
font-size: 13px;
line-height: 120%;
text-align: left;
}
address strong{
margin: 0 2% 0 0;
font-size: 25px;
color: #9ec238;
font-family: 'M PLUS 1p', sans-serif;
font-weight: normal;
}
}
@media only screen and (max-width: 640px) {
address{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 10px 0 5px;
padding: 0 5%;
font-style: normal;
font-size: 13px;
line-height: 200%;
text-align: center;
}
}
@media only screen and (max-width: 479px) {
address{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 5px 0 5px;
padding: 0 2%;
font-style: normal;
font-size: 13px;
line-height: 150%;
text-align: center;
}
address strong{
margin: 0 2% 0 0;
font-size: 25px;
color: #9ec238;
font-family: 'M PLUS 1p', sans-serif;
font-weight: normal;
line-height: 180%;
}
}