@charset "UTF-8";
[class*="ttl"] {
  font-family: "Hina Mincho", serif;
  font-size: clamp(1.8rem, 2.8vw, 3.2rem);
}

/*HERO───────────────*/
#hero {
  width: 97.91%;
  height: 80vh;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0 50px 0 50px;
  background: url("../images/hero01.png") no-repeat;
  background-size: cover;
  position: relative;
}
#hero .catch {
  position: absolute;
  left: 3em;
  bottom: 4em;
  font-size: clamp(2rem, 3vw, 4rem);
  font-family: "Hina Mincho", serif;
  z-index: 1;
  line-height: 1;
}
#hero .catch span {
  display: block;
  padding: 10px;
  background-color: #fff;
  margin-top: 5px;
  width: fit-content;
}
#hero .holiday {
  display: block;
  width: fit-content;
  padding: max(1em, 1.5%);
  background-color: #ADB61C;
  color: #fff;
  font-weight: 900;
  border-radius: 10px;
  position: absolute;
  bottom: -2em;
  right: 2em;
  z-index: 1;
}

@media (max-width: 840px) {
  #hero {
    width: 100%;
    height: 60vh;
    background-size: 230%;
    border-radius: 0;
  }
  #hero .catch {
    left: 15px;
  }
}
.tuta {
  width: 26vw;
  aspect-ratio: 508 / 454;
  display: block;
  background: url("../images/tuta.png") no-repeat;
  background-size: contain;
  position: absolute;
  top: 80vh;
  z-index: 0;
  right: -20px;
}
@media (max-width: 840px) {
  .tuta {
    top: 60vh;
  }
}

/*お客様の立場で───*/
#top-head {
  width: 94.8%;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, #fff 0%, #fff 10%, #F1EDE8 10%, #F1EDE8 100%);
  padding-bottom: max(60px, 8%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-radius: 20px;
}
#top-head .head-ttl {
  text-align: center;
  position: relative;
}
#top-head .head-ttl::before {
  content: "";
  width: max(70px, 16.67%);
  aspect-ratio: 108 / 82;
  display: block;
  background: url("../images/clover.png") no-repeat;
  transform: scale(-1, 1);
  mix-blend-mode: multiply;
  background-size: contain;
  position: absolute;
  left: -4%;
  top: -15px;
}
#top-head .head-txt {
  width: 54%;
  padding-right: 15.1%;
  padding-top: 10%;
  order: 2;
}
#top-head .head-txt strong {
  font-weight: 900;
}
#top-head .head-img {
  order: 1;
  width: 42%;
  margin-top: -2%;
  margin-left: -2.7%;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.6));
}

@media (max-width: 890px) {
  #top-head {
    background: linear-gradient(180deg, #fff 0%, #fff 5%, #F1EDE8 5%, #F1EDE8 100%);
  }
  #top-head .head-txt {
    width: 68%;
    padding-right: 3%;
  }
  #top-head .head-img {
    width: 30%;
  }
}
@media (max-width: 540px) {
  #top-head {
    width: 100%;
  }
  #top-head .head-txt {
    width: 100%;
    padding-right: 6%;
    padding-left: 6%;
  }
  #top-head .head-img {
    width: 70%;
  }
}
/*ほぐし処　心について───*/
#shin {
  margin-top: max(60px, 8%);
  padding-left: calc( ( 100% - 1280px ) / 2 );
}
@media (max-width: 1368px) {
  #shin {
    padding-left: 37px;
  }
}

.shin-ttl {
  width: fit-content;
}
.shin-ttl span {
  font-size: clamp(2rem, 3.6vw, 4.2rem);
}

.shin-txt {
  width: 34%;
  position: relative;
}
.shin-txt::before {
  content: "";
  width: max(70px, 16.5%);
  aspect-ratio: 108 / 82;
  display: block;
  background: url("../images/clover.png") no-repeat;
  mix-blend-mode: multiply;
  background-size: contain;
  position: absolute;
  right: 0;
  top: -15px;
}
.shin-txt .br1360 {
  display: none;
}

.shin-img {
  width: 56.5%;
  margin-top: -17%;
  position: relative;
}
.shin-img img {
  position: absolute;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.6));
}
.shin-img .shin-img01 {
  width: min(750px, 80%);
  top: 0;
  right: 0;
}
@media (max-width: 1364px) {
  .shin-img .shin-img01 {
    top: 10%;
  }
}
.shin-img .shin-img02 {
  width: max(150px, 50%);
  top: 50%;
  left: 0;
  z-index: 2;
}

@media (max-width: 900px) {
  .shin-txt {
    width: 100%;
  }

  .shin-img {
    width: 80%;
    margin-top: max(20px, 4%);
  }
  .shin-img .shin-img01 {
    position: static;
  }
  .shin-img .shin-img02 {
    left: auto;
    right: 0;
  }

  #shin .btn.par-sp {
    margin-top: 55px;
  }
}
@media (max-width: 600px) {
  .shin-img {
    width: 100%;
  }
  .shin-img .shin-img02 {
    right: 20px;
  }
}
/*リンクバナー───*/
.link-bn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.link-bn li {
  width: 49%;
  text-align: center;
}
.link-bn li img {
  margin-bottom: 10px;
}
.link-bn li.btn a::before {
  display: none;
}

.link-bn .btn a {
  padding: 0;
}

@media (max-width: 540px) {
  .link-bn li {
    width: 100%;
  }
  .link-bn li:first-child {
    margin-bottom: 30px;
  }
}