@charset "utf-8";
/*---------- 
01.共通
02.ヘッダー
03.フッター
----------*/
/*---------- 
01.共通
----------*/
html {
    scroll-behavior: smooth;
    scroll-padding-top: 96.78px; 
}
body{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
position: relative;
line-height: 1.6;
}
.wrapper{
max-width: 1100px;
width: 89%;
margin: 0 auto;
}
a:hover{
opacity: 0.7;
transition: 0.1s;
}
.flex-box{
display: flex;
}
.main-div{
padding-top: 90px;
padding-bottom: 50px;
}
.line{
position: relative;
z-index: 10;
}
.line::after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 6px;
width: 100%;
background:
center / cover no-repeat
url("../../img/common/line.png");
z-index: -1;
}
.pc{
  display: block;
}
.sp{
  display: none;
}
.cmn-title{
  text-align: center;
  padding: 30px 0;
  /* background: linear-gradient(transparent, #b8d98f); */
  background: #b8d98f;
}
.cmn-title h2{
font-size: 28px;
font-weight: 500;
}
.breadcrumb{
display: flex;
list-style-type: none;
justify-content: center;
flex-wrap: wrap;
padding: 5px 0;
border-bottom: 1px solid #e9ebe7;
margin-bottom: 30px;
font-size: 14px;
}
.breadcrumb li a{
  position: relative;
  display: flex;
  align-items: center;
}
.breadcrumb li a::after{
  content: ">";
  display: inline-block;
  font-size: 14px;
  padding: 0 10px;
}
.breadcrumb li.first a::before{
  content: "";
  display: inline-block;
width: 15px;
height: 15px;
background: center/contain no-repeat url('../../img/common/home.png');
margin-right: 5px;
}
#banner-area{
background: #eff3e9;
padding: 36px 0 25px;
}

#banner-area .wrapper{
max-width: 935px;
}

#banner-area .flex-box01{
list-style-type: none;
gap: 10px;
margin-bottom: 25px;
}

#banner-area .flex-box01 li{
border:1px solid #ccc
}

#banner-area .flex-box02{
list-style-type: none;
gap: 20px;
justify-content: flex-end;
}

#banner-area .flex-box02 a{
color: #075e20;
position: relative;
display: flex;
align-items: center;
}

#banner-area .flex-box02 a::before{
content: "";
display: block;
width: 13px;
height: 13px;
background: center / contain no-repeat
url("../../img/common/btn_green.png");
margin-right: 5px;
flex-shrink: 0;
}
.navigation{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.navigation .prev,.navigation .next{
  color: transparent;
  position: relative;
}
.navigation .prev::after{
content: "<<";
display: inline-block;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
color: darkgreen;
}
.navigation .next::after{
content: ">>";
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
color: darkgreen;
left: 50%;
transform: translateX(-50%);
}
.page-numbers{
  display: inline-block;
  padding: 0 5px;
}
.navigation .current{
color:#6c8e34;
}
.cmn-btn{
  width: 280px;
  margin: 0 auto;
}
.cmn-btn a{
text-align: center;
color: #fff;
font-weight: 500;
padding: 15px 0;
display: block;
background: #6c8e34;
position: relative;
}
.cmn-btn a::after{
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
#map {
position: relative;
width: 100%;
height: 262px;
}

#map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.like-table{
display: flex;
flex-wrap: wrap;
}

.like-table dt{
width: 35%;
text-align: center;
padding: 10px 0;
border-bottom: 1px solid #d2d9d3;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
background: #eff3e9;
}

.like-table dd{
width: 65%;
padding: 10px;
border-bottom: 1px solid #d2d9d3;
margin-bottom: 5px;
}

.like-table dd a{
text-decoration: underline;
color: #075e20;
}

.with-insta{
  max-width: fit-content;
  margin: 0 auto;
  position: relative;
}

.with-insta .insta{
  position: absolute;
  right: -75px;
}

.link{
display: block;
}

.link a{
color: #075e20;
text-decoration: underline;
display: flex;
align-items: center;
}

.link img{
width: 25px;
margin-right: 5px;
}
/*---------- 
02.ヘッダー
----------*/
header {
position: fixed;
width: 100%;
top: 0;
background: #fff;
z-index: 100;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0);
}
header.is-fixed{
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

header .wrapper{
max-width: 1150px;
display: flex;
justify-content: space-between;
padding: 10px 0;
align-items: center;
}
header h1{
font-size: 32px;
font-weight: 700;
}
header h1 span{
display: block;
font-size: 16px;
}

header nav ul{
display: flex;
list-style-type: none;
gap: 30px;
}

header .menu-btn{
display: none;
width: 30px;
height: 30px;
}

header nav .access{
  display: none;
}

/*---------- 
03.フッター
----------*/
footer{
background-color: #6c8e34;
padding: 20px 0;
text-align: center;
color: #fff;
}

footer span{
display: block;
}

footer span:first-of-type{
font-size: 18px;
margin-bottom: 5px;
}

footer span:nth-of-type(2){
font-size: 14px;
margin-bottom: 15px;
}

footer span:nth-of-type(3){
font-size: 14px;
}

@media screen and (max-width: 1080px){
/*---------- 
01.共通 1080px
----------*/
.main-div {
padding-top: 73.98px;
}
}

@media screen and (max-width: 768px) {
/*---------- 
01.共通 768px
----------*/
html {
    scroll-padding-top: 70px; 
}
body{
line-height: 1.5;
}
.pc{
  display: none;
}
.sp{
  display: block;
}
#banner-area .flex-box01{
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 500px;
margin: 0 auto 20px;
}

#banner-area .flex-box01 li{
background: #fff;
}

#banner-area .flex-box01 li a{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

#banner-area .flex-box01 li img{
margin: 0 auto;
}
.with-insta .insta{
right: -40px;
top: 50%;
transform: translateY(-50%);
}
/*---------- 
02.ヘッダー
----------*/
header .wrapper{
max-width: 1150px;
display: flex;
justify-content: space-between;
padding: 5px 0;
align-items: center;
}
header h1{
font-size: 26px;
}
header h1 span{
font-size: 14px;
}

header .close-btn{
display: none;
}

header .menu-btn{
display: block;
cursor: pointer;
}

header .menu-btn.open .open-btn{
display: none;
}

header .menu-btn.open .close-btn{
display: block;
}

header nav{
overflow-y: auto;
height: calc(100vh - 70px);
position: absolute;
top: 70px;
width: 100%;
right:-100%;
transition: 0.4s;
background-color: #fff;
padding: 30px 20px;
z-index: 110;
}

header .menu-btn.open + nav{
right:0;
transition: 0.4s;
}

header nav ul{
display: block;
margin-bottom: 30px;
}

header nav li a{
  padding: 10px 0;
display: flex;
border-bottom: 1px solid #eaeef1;
position: relative;
align-items: center;
justify-content: space-between;
}

header nav li a::after{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: center/contain no-repeat url(../../img/common/arrow_green.png);
}

header nav .access{
  display: block;
}

header nav .access span{
  display: block;
font-size: 14px;
text-align: center;
color: gray;
}
}