@charset "UTF-8";

*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
html{
  scroll-behavior: smooth;
}
body{
  background:#FFFEF2;
  -webkit-text-size-adjust: 100%;
  color: #333;
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
ul,a{
  text-decoration: none;
  list-style: none;
}
a{
  transition: .2s ease;
}
a:hover{
  transition: .2s ease;
  opacity: .7;
  text-decoration: underline;
  cursor: pointer;
}
h1{
  font-weight: bold;
  font-size: clamp(18px,2.6vw,30px);
  /* font-size: clamp(18px,3vw,30px); */
  margin-bottom: 1em;
  line-height: 1.4;
}
.content{
  padding: 2em 20px 0;
  margin: 1em auto 3em;
  max-width: 1200px;
  margin: auto;
  width: 100%;
}
p{
  line-height: 1.8;
  font-size: clamp(15px,2vw,19px);
  margin: 1.5em 0;
}
iframe{
  width: 100%;
  border: 0;
}
.flx{
  display: flex;
  justify-content: space-around;
}
.spots{
  flex-wrap: wrap;
  margin-top: 2em;
}
div.spot_box{
  width: 100%;
  display: flex;
  /* justify-content: center; */
  justify-content: space-evenly;
  align-items: stretch;
  flex-wrap: wrap;
}
div.spot_box a{
  /* width: 30%; */
  width: 23%;
  /* margin: 10px; */
  /* padding: 1.5em; */
  padding: 0.7em;
  background-color: #80bfa3;
  border-radius: 10px;
  color: #fff;
  text-align: center;
}
div.spot_box a:hover{
  text-decoration: none;
  background-color: #9f955c;
  opacity: 1;
}
.spot_icon {
  height: 50px;
  margin: 10px auto 15px;
}
div.spot_box p {
  font-size: clamp(12px, 2vw, 17px);
  margin: 0;
  line-height: 1.4;
  padding-bottom: 5px;
}


section{
  padding: 2em 0;
}
article{
  padding: 2em 0;
}
.h2 {
  color:#9f955c;
  text-align: center;
  margin-top: 2em;
}

.shop_sub {
  font-size: clamp(18px,3vw,25px);
  padding: 4px 0 15px;
  width: fit-content;
  margin: 0 auto;
}

.shop_name {
  font-size: clamp(25px,3vw,35px);
}

h3{
  text-align: center;
  font-size: clamp(22px,2vw,28px);
  margin:2em 0 1em;
  line-height: 1.4;
}
figure{
  margin: 3em auto;
  width: 100%;
  max-width: 800px;
}
figure.full{
  max-width: 1000px;
}
figure img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.flx figure{
  width: 48.5%;
  margin: 1em 0;
}
h4{
  border-top: solid 2px #ddd;
  border-bottom: solid 2px #ddd;
  font-size: clamp(18px,2vw,22px);
  padding: .8em;
}
.detail{
  border: solid 2px #ddd;
  padding: 1.5em 1.5em 2.2em;
}
.detail p{
  margin: 0;
  font-size: clamp(14px,1vw,16px);
}
h5{
  font-size: clamp(17px,2vw,20px);
  font-weight: initial;
  margin: 0 0 1em 0;
  font-weight: bold;
}
.detail .flx{
  margin-bottom: 2em;
}
.detail .flx figure{
  margin: 0 1.5em 0 0;
  display: grid;
  place-content: flex-start;
}
.detail .flx figure img{
  object-fit: contain;
}
.detail .flx .txt{
  width: 48.5%;
}
.detail .btn_content{
  margin: 2em 0 0;
}
.flx a.btn{
  color: #fff;
  border-radius: 100px;
  display: grid;
  place-content: center;
  width: 49%;
  padding: .8em;
  font-size: clamp(17px,2vw,19px);
  font-weight: bold;
}
.flx a.btn:hover{
  text-decoration: none;
}
.flx a.btn:nth-child(1){
  background-color: #9f955c;
}
.flx a.btn:nth-child(2){
  background-color: #80bfa3;
}
/* ===============メリッジャーレのボタン=============== */
.flx a.btn_mono{
  color: #fff;
  border-radius: 100px;
  display: grid;
  place-content: center;
  width: 49%;
  padding: .8em;
  font-size: clamp(17px,2vw,19px);
  font-weight: bold;
  background-color: #80bfa3;
  margin: 0 auto;
}
.flx a.btn_mono:hover{
  text-decoration: none;
}
/* ===============ここまで=============== */
.other h3{
  background-color: #ebf8f4;
  padding: .5em;
}
.other .flx .box{
  width: 47%;
}
.other .flx .box figure{
  width: 100%;
}
.other .flx .box h4{
  text-align: center;
}
.other .flx .box p{
  font-size: clamp(14px,1vw,16px);
}
.sp{
  display: none;
}
.pc{
  display: inline-block;
}

header .logo {
  max-width: 200px;
  margin-bottom: 40px;
}
header .logo img {
  width: 100%;
  height: auto;
}
footer .link-box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 16px;
  list-style-type: none;
  margin: 4em 0 1.8em;
  padding: 0;
}
footer section{
  padding: initial;
}
footer .link-box ul li {
  width: 240px;
  background-color: #fff;
  text-align: center;
  border: 1px solid #aa8f63;
}
footer .link-box ul li a {
  display: block;
  width: 100%;
  color: #aa8f63;
  padding: 15px 0;
}
footer .copy {
  font-size: clamp(10px,1vw,13px);
  text-align: center;
  margin-bottom: 60px;
}

span {
  font-weight: bold;
}

.other2 h3{
  font-weight: normal;
  line-height: 1.7;
}
.other2 h3 span{
  font-weight: bold;
}
.other2 h3 strong{
  font-size: clamp(24px, 5vw, 38px);
  font-weight: normal;
}
.center{
  text-align: center;
}
.t_center{
  text-align: center;
  font-weight: bold;
}
.m_center{
  margin: auto;
}
.btn.yellow{
  background-color: #f39800!important;
}
.other2 .btn_content{
  padding: 2em 1em 1em;
}
.btn.flx.yellow{
  width: 100%;
  position: relative;
  height: 3.2em;
  transition: .2s ease-in-out;
  max-width: 800px;
}
.btn.long{
  width: 100%!important;
  position: relative;
  height: 3.2em;
  transition: .2s ease-in-out;
  max-width: 800px;
}

.btn .fa-chevron-right{
  position: absolute;
  right: 2em;
  display: flex;
  align-items: center;
  top: 0;
  bottom:0;
}
.btn:hover .fa-chevron-right{
  right: 1.8em;
  transition: .2s ease-in-out;
}
.fa-chevron-right:before {
  content: "\f054";
}
h2 {
  color: #9f955c;
  font-size: clamp(25px, 3vw, 35px);
  margin: 2em 0 1em;
  position: relative;
  text-align: center;
  width: 100%;
  margin: auto;
  border-radius: 5px;
}
h2.box {
  background-color: #9f955c;
  color: #fff;
  padding: 0.4em 0.5em 0.6em;
}
.box_span{
  font-size: clamp(18px, 2.6vw, 28px);
  font-weight: normal;
  display: inline-block;
  padding-bottom: 10px;
  line-height: 1.5rem;
}
@media screen and (max-width: 780px) {
  .sp{
    display: block;
  }
  .pc{
    display: none!important;
  }
  .content{
    padding: 1em 15px 0;
  }
  p{
    margin: 1em 0;
  }
  div.spot_box a{
    width: 45%;
    margin: .5em;
    padding: 1em;
  }
  h5{
    margin-top: 1em;
  }
  figure{
    margin: 1em auto;
  }
  .flx.imgs,.detail .flx,.other .flx{
    flex-wrap: wrap;
  }
  .flx.imgs figure,.detail figure,.flx a.btn,.detail .flx .txt{
    width: 100%;
  }
  .detail{
    padding: 1em;
  }
  .detail .flx figure{
    margin: 0;
  }
  .flx a.btn:nth-child(odd){
    margin-bottom: 1em;
  }
  .other .flx .box{
    width: 100%;
  }
  .other .flx .box:nth-child(2){
    margin-top: 1em;
  }
  footer .link-box ul li {
    margin-bottom: 1em;
  }
/* ===============茜屋のボタン=============== */
  .flx a.btn_mono {
    width: 100%;
  }
/* ===============ここまで=============== */

}