@charset "UTF-8";
/* CSS Document */
/*---all--*/
html,body {
position: relative;
height: 100%;
}
html{
font-size:62.5%;
scroll-behavior: smooth;
}
body {
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size: 1.4rem;
line-height: 2.5rem;
letter-spacing: 0.1rem;
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph;/* 両端揃えの種類win */
font-feature-settings: "palt" 1;/* カーニング */
line-break: strict;/* 禁則 */
}
hr {
height: 0;margin: 0;padding: 0;border: 0;
}
hr.line01 {
height: 6px;
background-image: repeating-linear-gradient(-45deg, #fff 0, #fff 1px, transparent 0, transparent 50%);
background-size: 6px 6px;
}
hr.line02 {
height: 1px;
background-color: #fff;
}
@media (min-width: 992px) {
.container {max-width: 962px;}
}
@media (min-width: 1200px) {
.container {max-width: 1170px;}
}
@media (min-width: 768px) {
.pc-none{display: none;}
}
@media (max-width: 767.98px) {
.sp-none{display: none;}
}
.title-box{
max-width: 500px;
margin-right: auto;
margin-left: auto;
}
.row img{
width: 100%;
}

.textyellow{
color: #ffe603;
}

::selection {
background: #009342;
color: #fff;
}

a:hover {
text-decoration: none;
}




/*　hed　*/
#tophed img{
width: 300px;
margin: 20px;
}

#tophed{
position: relative;
}


/*　hamburger　*/


.hambuger{
position: absolute;
top:20px;
right: 20px;	
}

.hamburger-menu div {
width: 35px;
height: 5px;
background-color: #6bb936;
margin: 5px 0;
transition: .5s;
/* アニメーションの時間を0.5秒に指定 */
transform:rotateY(0deg);
/* Y軸(横)の回転角度を指定 */
}

.hamburger-menu:hover div {
opacity:0.6;
/* 透明度を指定 */
transform:rotateY(180deg);
/* Y軸(横)の回転角度を指定 */
}
.hamburger-menu + .sidenavs:target {
overflow-x: visible;
/* ボックスからはみ出る箇所をそのまま表示 */
width: 100%;
display:block;
}


.sidenavs:target {
overflow-x: hidden;
/* ボックスからはみ出る箇所を隠す */
width: 0;
}
/* ハンバーガーメニュー表示時 */
.sidenavs {	
height: 100%;
width: 0px;
position: fixed;
/* 画像の配置を指定 */
z-index: 999;
top: 0;
right: 0;
background-color: #6bb936;
opacity: 0.9;
overflow-x: hidden;
/* 横スクロールを無効にする */
padding-top: 50px;
transition: 0.5s;
/* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
padding: 8px 8px 8px 8px;
text-decoration: none;
font-size: 1.2em;
color: #000;
display: block;
transition: 0.3s;
/* アニメーションの時間を0.3秒に指定 */

transform:rotate(0deg) translate(0px,0px);
/* Z軸(平面)の回転角度とXY軸の移動距離を指定 */
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
color: white;

/* Z軸(平面)の回転角度とXY軸の移動距離を指定 */
}
/* クローズボタン */
.sidenavs .close-btn {
position: absolute;
/* 親要素との絶対位置を指定 */
top: 0;
right: 25px;
font-size: 36px;
}

@media (max-width: 767.98px) {
.nav-link{
width: 500px;
}
}




#sidemenu{
font-size: 1.0em;	
}
#sidemenu img{
width: 30px;
margin-right: 10px;
}


.header{
background-color: #6bb936;
}




/*　nav　*/
.navtop{
background-color: #6bb936;
width: 100%;
border-top: 5px solid #009342;
color: #FFF;
}
.navtop img{
width: 25px;
text-align: center;
margin-right: 5px;	
}
.nav-link{
color: #fff;
}


/*---menu---*/
nav{
text-align: center;
}
nav ul{
margin: 0 ;
padding: 0 ;
}
nav li{
list-style: none;
display: inline-block;
width: 15%;
min-width: 11%;
white-space: nowrap;
font-size: 1em;
font-weight: bold;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
}
nav li:not(:last-child){
border-right:2px solid #FFF;
}
nav a{
text-decoration: none;
color: #333;
}
nav a.current{
color: #FFF;
border-bottom:2px solid #FFF;
}
nav a:hover{
color:#ffe603;
}

@media (max-width: 1300px) {
nav li:not(:last-child){
border-right: #6bb936;
}
nav li{
width: 14%;
min-width: 10%;
font-size: 0.6em;
}	
}






/*---toppage---*/






/* TITLE */
.top-box{
position: relative;
background-color: #6bb936;
color: #FFF;
width: 100%;
height: 550px;
padding-top: 50px;
background:#6bb936 url("/img/haikei.png") no-repeat center bottom;
background-size: contain;
}
.top-box h1{
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
letter-spacing: 0.3em;
font-size: 2.5em;
text-shadow:2px 2px 0 #6bb936, -2px -2px 0 #6bb936,
-2px 2px 0 #6bb936, 2px -2px 0 #6bb936,
0px 2px 0 #6bb936,  0-2px 0 #6bb936,
-2px 0 0 #6bb936, 2px 0 0 #6bb936;		
}
.top-box h2{
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
letter-spacing: 0.3em;
margin-top: 25px;
text-shadow:2px 2px 0 #6bb936, -2px -2px 0 #6bb936,
-2px 2px 0 #6bb936, 2px -2px 0 #6bb936,
0px 2px 0 #6bb936,  0-2px 0 #6bb936,
-2px 0 0 #6bb936, 2px 0 0 #6bb936;	
}

.hato-box1 img{
width: 450px;
}
.hato-box1{
position: absolute;top: 80px;right: 150px;
}

.hato-box2 img{
width: 450px;
}
.hato-box2{
position: absolute;top: 180px;right:130px;
}

.hato-box3{
position: static;
}
.hato-box3{
width: 60%;
align-items: center;
margin: 0 auto;
}




@media (min-width: 1200px) {
.pc-none2{display: none;}
}
@media (max-width: 1200px) {
.sp-none2{display: none;}
.hato-box3{
text-align: center;
}	
.hato-box3 img{
width: 60%;
}	
}

@media (max-width: 768px) {
.hato-box3{
width: 100%;
}
	
}





.purupuru2 {
animation: purupuru2 3s infinite;
}
@keyframes purupuru2 {
0% {
transform: translate(0px, 2px);
}
5% {
transform: translate(0px, -2px);
}
10% {
transform: translate(0px, 2px);
}
15% {
transform: translate(0px, -2px);
}
20% {
transform: translate(0px, 2px);
}
25% {
transform: translate(0px, -2px);
}
30% {
transform: translate(0px, 0px);
}
}

@media (max-width: 767.98px) {
.top-box{
height: 500px;
background-size: contain;	
}
.top-box h1{
letter-spacing: 0.1em;
font-size: 1.8em;
}
.top-box h2{
letter-spacing: 0.1em;
font-size: 1em;
}
	

}



/* NEWS */
.marubox{
border:5px solid #000;
border-radius: 20px;
background-color: #fff;
margin-top: 10px;	
}


.newsinner{
display: flex;	
align-items: center;
justify-content: center;
}

.newsinner img{
width: 80%;
}

.n-list{
list-style:none;
padding-left:1.5em;
margin:20px 0px 30px 0px;
}
.n-list li{
border-bottom:solid 1px #000;
margin-right:2em;
padding:0.5em 0 0 1em;
}
.n-list li:nth-of-type(1){
margin-top:0;
}
.n-list li:nth-last-of-type(1){
margin-bottom:0;
}


/* main */
.mainbox{
background: url("/img/back02.png") no-repeat center top;
background-size: cover;
}

.mainbox p{
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-weight: 500;
font-size: 1.2em;
letter-spacing: 0.2em;	
margin-top: 20px;
}

.bg-pink{
background-color:#f2b9ba;
}

.maru-inner{
margin:30px 20px 100px 20px;
}

.maru-inner2{
margin-left: 30px;
}
@media (max-width: 767.98px) {
.mainbox p{
font-weight: 400;
font-size: 0.8em;
letter-spacing: 0.1em;	
margin-top: 20px;
}	
.newsinner img{
width: 60%;
margin-top: 15px;	
}	
.maru-inner2{margin-left: 0px;
}
.maru-inner{
margin-bottom: 50px;
}	
}


.marubox2{
border:5px solid #000;
border-radius: 20px;
background-color: #dceede;	
margin-top: 50px;
padding: 0px 30px;
background-image: url("../img/about.png");
background-position: top 80px left 0%;
background-repeat: no-repeat;
background-size: 80% auto;
}

.maru-title{
text-align: center;
}
.maru-title img{
text-align: center;
width: 50%;
margin-top: 20px;
}

.maru-maru{
text-align: right;
}
.maru-maru img{
width: 15%;
margin-right: 20px;
}

.maru-maru2{
text-align: left;
display: flex;
align-items: center;
justify-content: center;	
}
.maru-maru2 img{
width: 15%;
margin:30px 0px 30px 0px;
}

.hr1{
border-bottom: 3px dotted #000;
width: 70%;
margin:20px;
}

.maru-hato{
display: flex;	
align-items: center;
justify-content: center;
}
.maru-hato img{
width: 70%;
}

.mainbox h1{
letter-spacing: 0.6em;
}

.marker-pink {
background: linear-gradient(transparent 60%, #ff99cc 0%);
}

.btn03{
text-decoration: none;
display: inline-block;
text-align: center;
border-radius: 25px;
border: solid 3px #000;
outline: none;
box-shadow:0 3px 0 #000;
margin-top: 10px;
}

/*ボタンの中のテキスト*/
.btn03 span {
display: block;
padding: 10px 40px;
background:#fff;
border-radius: 25px;
color:#333;
font-weight: 500;
font-size: 1.2em;
letter-spacing: 0.3em;		
}

.pushdown:hover span {
background-color: #e60012;
color: #fff;
}

.back02{
background: url("/img/back_nami01.png") no-repeat center;
background-size: cover;
height: 20%;
}


@media (max-width: 767.98px) {
.marubox2{
padding: 0px;	
background-position: top 100px; left 0%;
background-size: 100%;
}
.marubox2 h1{
font-size: 1.4em;	
letter-spacing: 0.1em;
margin-top: 10px;
}	
.maru-title img{
width: 80%;
}	
.maru-inner img{
width: 100px;
}
.maru-maru{
text-align: center;
}	
.maru-hato{
margin-top: 20px;
}
.btnbox{
text-align: center;
}	
.btn03 span{
font-size: 1em;
letter-spacing: 0.1em;
}

		
}





/* バックナンバー */
.backnumber{
background-color: #dcdddd;
padding: 30px 0px 50px 0px;
}

.marubox_b{
position: relative;
border:5px solid #000;
border-radius: 20px;
background-color: #fff;
margin-top: 10px;
background-image: url("../img/kirakira.png");
background-position: top 0px left 0%;
background-repeat: no-repeat;
background-size: 15% auto;
}

.maru-title2{
text-align: center;
}
.maru-title2 img{
text-align: center;
width: 50%;
margin-top: -3px;
}

.hato-box4 img{
width: 150px;
}
.hato-box4{
position: absolute;top: 10px;right: 10px;
}

.bn_box{
width: 80%;
align-items: center;
justify-content: center;	
margin: 0 auto;
padding-bottom: 60px;
}
.bn_inner{
display: flex;	
align-items: center;
justify-content: center;
padding-bottom: 10px;
}

.btn01{
text-decoration: none;
display: inline-block;
text-align: center;
border-radius: 25px;
border: solid 3px #000;
outline: none;
margin-top: 10px;
width: 100%;	
}

/*ボタンの中のテキスト*/
.btn01 span {
display: block;
padding: 10px 40px;
background:#fff;
border-radius: 25px;
color:#333;
font-weight: 600;
font-size: 1.3em;
letter-spacing: 0.3em;		
}

.btn01:hover span {
background-color: #e60012;
color: #fff;
}


@media (max-width: 767.98px) {
.bn_box{
width: 100%;
margin-top: 30px;
}
.maru-title2 img{
width: 100%;
}
.hato-box4 img{
width: 70px;
margin-top: 10px;	
}
.hato-box4{
position: absolute;top: -10px;right: 0px;
}
.bn_box span{
font-size: 0.9em;
white-space: nowrap;
}	
}

.yureru-j {
animation: yureru-j 2s infinite;
}
@keyframes yureru-j {
0% {transform: translate(0px, 2px);}
5% {transform: translate(0px, -2px);}
10% {transform: translate(0px, 2px);}
15% {transform: translate(0px, -2px);}
20% {transform: translate(0px, 2px);}
25% {transform: translate(0px, -2px);}
30% {transform: translate(0px, 0px);}
}


.back03{
background: url("/img/back_con.png") no-repeat center;
background-size: cover;
height: 10%;
}


/*コンタクト*/
.contact{
background-color: #e60012;
padding: 30px 0px 50px 0px;
text-align: center;
}
.contact h1{
text-align: center;
font-size: 2.5em;
font-weight: bold;
letter-spacing: 0.3em;
}
.contact h2{
text-align: center;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 0.3em;
}
.contact span{
color: #fff;
}

.contact img{
width: 80%;
}

.telouter{
margin-top: 30px;
}

.telbox{
display: flex;
align-items: center;
justify-content: center;
}

.hr2{
border-bottom: 5px dotted #FFF;
width: 120px;
padding: 5px 0px;	
margin:auto;	
}

@media (max-width: 768px) {
.contact img{
width: 80%;
}
}



/*アクセス*/
.access{
text-align: center;
margin-top: 100px;
}

.access img{
width: 200px;
margin: 0 auto;
}

.mapbox{
margin-top: 20px;
margin-bottom: 30px;	
}

@media (max-width: 768px) {
.access{
margin-top: 50px;	
}
.access img{
width: 120px;
}	
}


/* FOOTER */
footer{
padding-top: 50px;
position: relative;
}
.footer-hato{
position: absolute;
width: 100%;	
background-image: url("../img/hato_toma.png");
background-position: top -20px right 10px;
background-repeat: no-repeat;
background-size: 150px;	
}

footer .footer-box{
display: flex;
align-items: center;
justify-content: center;
}
.footer-box img{
width: 50px;
}
.footer-box a{
color: #000;
}

.logobox{
text-align: right;
}

.footer-box h1{
font-size: 1.2em;
}
.footer-box h2{
font-size: 1em;
}
.footer-box h3{
font-size: 0.8em;
}
.f-tel{
font-size: 2.6em;
font-weight: 600;
font-family: 'M PLUS Rounded 1c', sans-serif;	
display: flex;
align-items: center;
justify-content: center;
padding-top:10px;	
}



.copy{
padding: 10px 0;
margin-top: 60px;	
background: #e60012;
text-align: center;
color: #fff;
font-size: 0.6em;
}



@media (max-width: 768px) {
.logobox{
width: 100%;
}
.f-tel{
margin-top: 10px;
font-size: 2em;	
}
.footer-hato{	
background-position: bottom 50px right 10px;
background-size: 100px;	
}	
	
}