@charset "UTF-8";

/* fv
=======================================================*/
#fv {
  position: relative;
  width: 100%;
  height: 63.2rem;
  margin-top: 60px;
  padding: 6rem 0;
  overflow: hidden;
}

.fv__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: -1;
}

.fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

#fv .inner__1600 .content__wrap {
  z-index: 1;
}

.fv__catch-en {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-family: "Cedarville Cursive", cursive;
  font-size: 3.2rem;
  font-weight: 400;
  color: var(--color_2);
  transform: rotate(-5deg);
}

.fv__catch {
  font-size: 5.6rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.fv__catch span {
  font-size: 114.2%;
}

.fv__sub {
  font-size: 2.4rem;
  margin-bottom: 6rem;
}

.fv__sub br {
  display: none;
}

.fv__location {
  margin-bottom: 1rem;
}

.fv__location br {
  display: none;
}

/* バッジ */
.fv__badges {
  display: flex;
  gap: 2rem;
}

.fv__badge {
  min-width: 14rem;
  font-weight: bold;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}

.fv__badge-top {
  padding: 0.4rem 0 0.2rem;
  text-align: center;
  color: #fff;
  background: var(--color_3);
}

.fv__badge-bottom {
  padding: 1rem 0.5rem;
  text-align: center;
}

/* CTA */
.fv__cta {
  position: absolute;
  right: 8%;
  bottom: 10px;
  width: 45rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: #99999980 0 4px 5px;
  transition: opacity 0.3s;
}
.fv__cta:hover,
.fv__cta:active,
.fv__cta:focus {
  opacity: 0.9;
}

.fv__cta-btn {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* fv__end */
.fv__end {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  background: url(../img/fv_endline.jpg);
  background-size: contain;
  background-position: left top;
  background-repeat: repeat-x;
  z-index: -1;
}

@media screen and (max-width: 896px) {
  #fv {
    padding: 2rem 0;
  }
  .fv__catch-en {
    font-size: 2.4rem;
  }
  .fv__catch {
    font-size: 4rem;
    text-shadow: #ffffff 0 4px 10px;
  }
  .fv__sub {
    margin-bottom: 15rem;
    text-shadow: #ffffff 0 4px 10px;
  }
  .fv__sub br {
    display: block;
  }
  .fv__location br {
    display: block;
  }
  .fv__location {
    line-height: 1.4;
  }
  .fv__cta {
    right: 2%;
    width: 33rem;
  }
}

@media screen and (max-width: 600px) {
  .fv__bg img {
    object-position: center top;
  }
  .fv__catch-en {
    font-size: 1.6rem;
  }
  .fv__catch {
    font-size: 3.2rem;
  }
  .fv__sub {
    font-size: 1.6rem;
    margin-bottom: 25vh;
  }
  .fv__badges {
    justify-content: space-between;
    gap: 1rem;
  }
  .fv__badge {
    width: 30%;
    min-width: 5rem;
  }  
  .fv__badge-top,
  .fv__badge-bottom {
    padding: 0.4rem 0 0.2rem;
    font-size: 65%;
  }
  .fv__cta {
    position: relative;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    margin-top: 1.6rem;
  }
}

/* fv以下の共通
=======================================================*/
.bg__p {
  background: var(--color_6);
}

.section__p {
  padding: 8rem 0;
}

@media screen and (max-width: 600px) {
  .section__p {
    padding: 8rem 0 5rem;
}
}


/* features
=======================================================*/
.features__head {
  margin-bottom: 8rem;
  font-size: 2.4rem;
  text-align: center;
}

.features__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.features__item {
  width: 31%;
}

.features__img {
  width: 100%;
  aspect-ratio: 36 / 22;
  margin-bottom: 1rem;
  border-radius: 0 30px 0 30px;
  overflow: hidden;
}

.features__txt {
  display: flex;
  gap: 1.6rem;
}

.features__txt .number {
  font-size: 3.2rem;
  white-space: nowrap;
  color: var(--color_3);
}

.features__txt .txt__wrap h3 {
  padding: 0.5em 0;
  font-size: 2rem;
  font-weight: bold;
}

@media screen and (max-width: 896px) {
  .features__txt {
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .features__head {
    margin-bottom: 5rem;
    font-size: 1.8rem;
  }
  .features__list {
    flex-direction: column;
    gap: 2.4rem;
  }
  .features__item {
    width: 100%;
  }
  .features__txt .number {
    font-size: 2.4rem;
    line-height: 1.2;
  }
  .features__txt .txt__wrap h3 {
    padding: 0;
  }
}

/* machines
=======================================================*/
.machines__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem 3rem;
  width: 80%;
  margin: auto;
}

.machines__item {
  width: 20rem;
  border: var(--color_5) 1px solid;
}

.machine__name {
  padding: 0.9rem;
  padding-top: 1rem;
  font-weight: bold;
  text-align: center;
  color: var(--color_1);
  background: var(--color_5);
}

.machine__txt {
  padding: 1.2rem 0.5rem;
  text-align: center;
  background: var(--color_1);
}

@media screen and (max-width: 896px) {
  .machines__list {
    gap: 3rem;
    width: 100%;
  }
  .machines__item {
    width: 18rem;
  }
}

@media screen and (max-width: 600px) {
  .machines__list {
    gap: 1.6rem;
    font-size: 90%;
  }
  .machines__item {
    width: 14rem;
  }
  .machine__txt {
    padding: 0.8rem 0.5rem;
  }
}

@media screen and (max-width: 340px) {
  .machines__list {
    gap: 1.5rem;
    font-size: 80%;
  }
  .machines__item {
    width: 13rem;
  }
}

/* price
=======================================================*/
.note__sp {
  display: none;
}

.price__note {
  margin-top: 0.5rem;
  font-size: 90%;
  line-height: 1.3;
}

.price__note span {
  font-weight: bold;
  color: var(--color_5);
}

@media screen and (max-width: 600px) {
  .note__sp {
    display: block;
    margin-left: 0.5rem;
    font-size: 80%;
    color: #999;
  }
  .price__list {
    height: 36rem;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .price__list img {
    width: auto;
    height: 100%;
  }
}

/* cta
=======================================================*/
.cta {
  position: relative;
  padding: 8rem 0 10rem;
  background-color: var(--color_3);
  background-image: url(../img/bg_motif_left.png), url(../img/bg_motif_right.png);
  background-repeat: no-repeat;
  background-position: top 30px left, bottom 30px right;
  background-size: 40rem auto;
}
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color_1);
}
.cta::before {
  top: 2rem;
}
.cta::after {
  bottom: 2rem;
}

.cta h2 {
  margin-bottom: 3.2rem;
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}

.cta .cta__btn {
  width: 80%;
  max-width: 62rem;
  margin: auto;
  border-radius: 10px;
  box-shadow: #99999980 0 4px 5px;
  overflow: hidden;
  transition: opacity 0.3s;
}

.cta .cta__btn:hover,
.cta .cta__btn:active,
.cta .cta__btn:focus {
  opacity: 0.7;
}

.cta .cta__btn a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/*** ページ下部のcta用 ***/
.cta.-end {
  background-color: #FFDAE9;
}

.cta-end__head {
  margin-bottom: 2rem;
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
}

.cta.-end h2 {
  margin-bottom: 2rem;
}

@media screen and (max-width: 896px) {
  .cta {
    background-size: 25rem auto;
  }
}

@media screen and (max-width: 600px) {
  .cta {
    padding: 6rem 0 8rem;
    background-size: 40% auto;
  }
  .cta h2 {
    margin-bottom: 2.4rem;
    font-size: 2.4rem;
  }
  .cta h2 span {
    display: inline-block;
  }
  .cta .cta__btn {
    max-width: 30rem;
  }
  .cta-end__head {
    font-size: 2.4rem;
  }
  .cta-end__head span {
    display: inline-block;
  }
}

/* faq
=======================================================*/
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 90%;
  margin: auto;
}

.faq__item {
  background: #fff;
  border: #efefef 1px solid;
  border-radius: 5px;
}

/* Q */
.faq__q {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 2rem 5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q-mark {
  flex-shrink: 0;
}

.faq__q-txt {
  flex: 1;
}

/* トグルアイコン */
.faq__toggle {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.faq__toggle::before,
.faq__toggle::after {
  content: '';
  position: absolute;
  background: var(--color_3);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 横 */
.faq__toggle::before {
  width: 14px;
  height: 2px;
}
/* 縦 */
.faq__toggle::after {
  width: 2px;
  height: 14px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
details[open] .faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* A */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease, padding-bottom 0.35s ease;
  padding: 0 5rem;
  padding-bottom: 0;
}

.faq__a-inner {
  overflow: hidden;
  display: flex;
  gap: 1.2rem;
}

.faq__a-mark {
  color: var(--color_4);
  flex-shrink: 0;
}

.faq__a-txt {
  color: var(--color_4);
}

@media screen and (max-width: 600px) {
  .faq__list {
    width: 100%;
  }
  .faq__q {
    gap: 0.5rem;
    padding: 2rem 1.5rem;
  }
  .faq__a {
    padding: 0 1.5rem;
  }
  .faq__a-inner {
    gap: 0.5rem;
  }
}


/* shopinfo
=======================================================*/
.shopinfo__flex {
  display: flex;
  align-items: flex-end;
  gap: 6rem;  
}

/* マップ */
.shopinfo__map {
  width: 50rem;
  aspect-ratio: 5 / 4;
  border-radius: 10px;
  overflow: hidden;
}

.shopinfo__map iframe {
  width: 100%;
  height: 100%;
}

/* 詳細 */
.shopinfo__detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.shopinfo__table {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.shopinfo__row {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 5rem;
}

.shopinfo__row dt {
  font-weight: bold;
}

/* 予約ボタン */
.shopinfo__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  max-width: 22rem;
  margin-top: 8rem;
  padding: 1.6rem 2.4rem;
  font-weight: bold;
  color: var(--color_1);
  background: var(--color_5);
  border-radius: 10px;
  transition: opacity 0.2s;
}

.shopinfo__btn:hover {
  opacity: 0.8;
}

@media screen and (max-width: 896px) {
  .shopinfo__flex {
    gap: 3rem;
  }
  .shopinfo__map {
    width: 50%;
  }
  .shopinfo__table {
    gap: 2rem;
  }
  .shopinfo__row {
    gap: 0.5rem;
  }
}

@media screen and (max-width: 600px) {
  .shopinfo__flex {
    flex-direction: column-reverse;
    align-items: center;
    gap: 4.8rem;
  }
  .shopinfo__map {
    width: 100%;
  }
  .shopinfo__btn {
    margin: 4rem auto 0;
  }
}