@charset "utf-8";
/* CSS Document */

/*---------------------
  共通
---------------------*/
/*▼sns▼*/
#sns{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

.sns_in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 4% 0%;
}
.sns_in li {
  width: 90%;
  height: auto;
  list-style: none;
}
.sns_lineArea_bg {
  position: relative;
}
.sns_line_addbtn {
  position: absolute;
  top: 77%;
  left: 54%;
  width: 27.5%;
}
@media screen and (max-width:768px) {
  .sns_line_addbtn {
    position: absolute;
    top: 75%;
    left: 15%;
    width: 70%;
  }
}
.sns_in a img {
  width: 100%;
}
@media screen and (max-width:768px) {
  .sns_in {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    align-items: center;
  }
  ul.sns_in li {
    width: 90%;
    display: flex;
    margin: 0% auto 4% auto;
    justify-content: center;
  }
  ul.sns_in li:nth-child(2) {
    margin: 0% 0% 0% 0%;
  }
}

.sns_line_qrcode {
  width: 14%;
  position: absolute;
  top: 44%;
  left: 47.25%;
}
@media screen and (max-width:768px) {
  .sns_line_qrcode {
    display: none;
  }
}

.sns_line_account_name {
  position: absolute;
  top: 47.5%;
  left: 75%;
  width: 13.5%;
}
@media screen and (max-width:768px) {
  .sns_line_account_name {
    display: none;
  }
}
/*▲sns▲*/
/*▼shop▼*/
section#shop {
  margin: 5% auto 0%;
  max-width: 1000px;
  width: 100%;
}
@media screen and (max-width:768px) {
  section#shop {
    width: 95%;
    margin: 6% auto 10%;
  }
}
#shop h3{
  background-color: #0ba046;
  color: #fff;
  text-align: center;
  font-size: clamp(25px, 4.7vw, 47px);
  font-weight: 800;
  line-height: 2;
  padding: 1% 0;
  border-radius: 16px;
  margin: 0 0 3.5% 0;
  letter-spacing: 0.25em;
  aspect-ratio: 1000 / 90;
  text-shadow: 3px 3px 2px #147838;
}
@media screen and (max-width:768px) {
  #shop h3{
    aspect-ratio: 375 / 45;
    font-size: clamp(25px, 8.0vw, 50px);
    text-shadow: 3px 3px 2px #147838;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

@media screen and (min-width:768px) {
  .for_sp{ display: none;}
}

.shopDataList{
  border: 3px solid #0ba046;
  width: 90%;
  margin: 25px auto;
  padding: 2%;
}

.shopNameArea{
  margin: 0 auto 2% auto;
  display: flex;
  justify-content: space-between;
  padding-bottom: 1%;
  border-bottom: 2px solid #aaa; 
}
@media screen and (max-width:768px) {
  .shopNameArea{
    padding-bottom: 1.5%;
  }
}
.shopNameArea h4{
  font-size: clamp(16px, 3.1vw, 32px);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width:768px) {
  .shopNameArea h4 {
      font-size: clamp(18px, 4.8vw, 52px);
      text-align: end;
      font-weight: 900;
      justify-content: left;
      line-height: 1.3;
  }
}

.shopNameArea h4::before{
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: #0ba046;
  margin-right: 0.5em;
}
@media screen and (max-width:768px) {
  .shopNameArea h4::before{
    height: 2.2em;
  }
}

.shopNameArea div{
  margin: 0 0 0 2%;
  position: relative; 
}
@media screen and (max-width:768px) {
  .shopNameArea div{ 
    font-size: 0.95em;
    display: flex;
    height: auto;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 32%;
    margin: 1% 0 1% 5%;
  }
}

.shopNameArea div a{
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    min-width: 80px;
    margin: 0 auto;
    padding: 1rem 2.5rem 1rem 2rem;
    border-radius: 10px;
    background-color: #f6f6f2;
    font-size: clamp(14px, 1.6vw, 22px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.25rem;
}
@media screen and (max-width:768px) {
  .shopNameArea div a{ 
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: left;
    min-width: 4em;
    width: 100%;
    height: 70%;
    font-size: clamp(10px, 3.0vw, 30px);
    padding: 0.5em 0.6em 0.5em 0.8em;
    letter-spacing: 0.1em;
  }
}

.shopNameArea div a:hover,
.shopNameArea div a:active,
.shopNameArea div a:visited{  color: #000; text-decoration: none;}
.shopNameArea div a::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #0ba046;
    top: 40%;
    right: 8%;
}
.shopNameArea div a:hover{ opacity: 0.7;}
.shopData{
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width:768px) {
  .shopData{ display: block;}
  .shopNameArea div a::after{
    border-width: 1.6vw 0 1.6vw 1.9vw;
  }
}

.shopData .shopPhoto img{
  width: 100%;
}
.shopData .shopPhoto{
  width: 49%;
}
@media screen and (max-width:768px) {
  .shopData .shopPhoto{ width: 100%;}
}

.shopData table{
  width: 49%;
}
@media screen and (max-width:768px) {
  .shopData table{ width: 100%;}
}

.shopData table th{
  width: 30%;
  background-color: #f6f6f2;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,1.8vw ,18px);
  padding: 1%;
}
@media screen and (max-width:768px) {
  .shopData table th{ font-size: clamp(13px ,2.5vw ,19px);}
}

.shopData table td{
  font-size: clamp(12px ,1.8vw ,18px);
  padding: 1%;
}
@media screen and (max-width:768px) {
  .shopData table td{ font-size: clamp(13px ,2.5vw ,19px);}
}
.shopMap{
  margin: 2% 0 0 0;
  padding: 2%;
  text-align: center;
  background-color: #f6f6f2;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 2px;  
}
@media screen and (max-width:768px) {
  .shopMap{ padding: 4% 2% 2% 2%;}
}

.shopMap h5{
  margin: 0;
  padding-bottom: 2%;
  line-height: 1;
}
.shopMap iframe{
  width: 96%;
  height: 40vh;
  margin: 0 2%;
}
/*▲shop▲*/