@charset "UTF-8";

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  line-height: 1.6;
  height: 100%;
  font-size: 62.5%;
}

@media screen and (max-width: 750px) {
  html {
    font-size: 1.3333333333vw;
  }
}

body {
  color: #000;
  background-color: #fff;
  font-size: 1.6rem;
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  max-width: 75rem;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  position: relative;
}

@media screen and (max-width: 750px) {
  body {
    width: 100%;
  }
}

img,
video,
object {
  max-width: 100%;
  width: 100%;
  height: auto;
  border: none;
  display: block;
}

iframe {
  max-width: 100%;
  width: 100%;
  height: 100%;
}

a {
  transition: opacity 0.4s;
}

a:hover {
  opacity: 0.8;
}

a:hover img {
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.3s;
}

a[href^="tel:"] {
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

/*コンテンツ*/
header {
  position: relative;
}

h1.site_title.mw_1 {
  position: absolute;
  display: block;
  width: clamp(123.5px, 32.933vw, 247px);
  height: clamp(28px, -7.467vw, 56px);
  top: clamp(17.15px, 4.573vw, 34.3px);
  left: clamp(17.15px, 4.573vw, 34.3px);
  z-index: 1;
  margin: 0;
}

.mv {
  display: block;
  position: relative;
  background: url(../images/mv-bg.jpg) no-repeat top center;
  background-size: cover;
  width: 100%;
  height: clamp(680px, 1px + 181.0666666667vw, 1359px);
}

.wrap2 {
  width: clamp(264px, 0px + 70.4vw, 528px);
  height: clamp(142px, -3px + 38.6666666667vw, 287px);
  position: absolute;
  top: clamp(305px, -2px + 81.8666666667vw, 612px);
  left: 52%;
  transform: translateX(-50%);
}

.wrap2-text {
  width: clamp(325px, 0px + 86.6666666667vw, 650px);
  height: clamp(62px, 0px + 16.5333333333vw, 124px);
  position: absolute;
  top: clamp(447px, 1px + 118.9333333333vw, 893px);
  left: 50%;
  transform: translateX(-50%);
}

.opening-content {
  position: relative;
}

.opening-content-bg {
  background: url(../images/section01-bg.svg) no-repeat;
  background-size: contain;
  width: 100%;
  height: clamp(327px, 1px + 86.9333333333vw, 653px);
}

.opening-content h2 {
  display: none;
}

.opening-content p {
  font-size: clamp(11.5px, 0px + 3.0666666667vw, 23px);
  font-weight: 500;
  line-height: 2.34;
  letter-spacing: 0.05em;
  position: absolute;
  top: clamp(180px, 0px + 48vw, 360px);
  left: clamp(37.9px, -0.01px + 10.109vw, 75.81px);
}

.section02-content02,
.section02-content03,
.section02-content04,
.section03-content01,
.section03-content02,
.section03-content03,
.section03-content04,
.section03-content05 {
  position: relative;
}

.section02-2-1 {
  position: absolute;
  width: clamp(285.5px, 0px + 76.1333333333vw, 571px);
  height: clamp(395px, 0px + 105.3333333333vw, 790px);
  top: clamp(185px, 0px + 49.3333333333vw, 370px);
  left: 50%;
  transform: translateX(-50%);
}

.section02-3-1 {
  position: absolute;
  width: clamp(144px, 0px + 38.4vw, 288px);
  height: clamp(127.5px, -20px + 39.3333333333vw, 275px);
  top: clamp(200px, 0px + 53.3333333333vw, 400px);
  left: clamp(185px, 0px + 49.3333333333vw, 370px);
}

.section03 {
  color: #fff;
}

.section03 h2 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(15px, 0px + 4vw, 30px);
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
  line-height: 1.8;
  position: absolute;
}

.section03 p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(11.5px, 0px + 3.0666666667vw, 23px);
  font-weight: 500;
  line-height: 2.34;
  letter-spacing: 0.1em;
  position: absolute;
}

.section03-content02 h2 {
  display: none;
}

.section03-content02 p {
  top: clamp(285px, 0px + 76vw, 570px);
  left: clamp(37.5px, 0px + 10vw, 75px);
}

.section03-content03 h2 {
  display: none;
}

.section03-content03 p {
  top: clamp(253.5px, 0px + 67.6vw, 507px);
  left: clamp(167.5px, 0px + 44.6666666667vw, 335px);
}

.section03-content04 h2 {
  display: none;
}

.section03-content04 p {
  top: clamp(300px, 0px + 80vw, 600px);
  left: clamp(37.5px, 0px + 10vw, 75px);
}

.section03-content05 h2 {
  display: none;
}

.section03-content05 p {
  top: clamp(284px, 0px + 75.7333333333vw, 568px);
  left: clamp(163px, 0px + 43.4666666667vw, 326px);
}

.consultation {
  padding-top: clamp(98px, 0px + 26.1333333333vw, 196px);
}

.consultation h2 {
  font-size: clamp(10px, 0px + 2.6666666667vw, 20px);
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: 0.6em;
  color: #000;
  margin-left: clamp(192.5px, 0px + 51.3333333333vw, 385px);
}

.consultation h3 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(20px, 0px + 5.3333333333vw, 40px);
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 1.5;
  color: #69951f;
  margin-bottom: clamp(29px, 0px + 7.7333333333vw, 58px);
  margin-left: clamp(37.5px, 0px + 10vw, 75px);
}

.hr-img {
  width: clamp(300px, 0px + 80vw, 600px);
  height: clamp(58.5px, 0px + 15.6vw, 117px);
  margin: 0 auto;
  margin-top: clamp(41px, 0px + 10.9333333333vw, 82px);
  margin-bottom: clamp(45px, 0px + 12vw, 90px);
}

.consultation-house {
  position: relative;
  padding-top: clamp(31.15px, 0px + 8.3066666667vw, 62.3px);
  padding-left: clamp(37.5px, 0px + 10vw, 75px);
  padding-bottom: clamp(37.5px, 0px + 10vw, 75px);
}

.consultation-house::before {
  content: "";
  background-color: #f4f3ed;
  width: 43.31%;
  height: 87.5%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.consultation-house h3.consultation-title {
  color: #231815;
  margin-left: 0;
  margin-bottom: clamp(13.8px, 0px + 3.68vw, 27.6px);
}

.accordion_reverse {
  position: relative;
}

.accordion_reverse button {
  border: 0;
  background-color: #69951f;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(12.5px, 0px + 3.3333333333vw, 25px);
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0.1em;
  width: 100%;
  padding-top: clamp(12.1px, 0px + 3.2266666667vw, 24.2px);
  padding-bottom: clamp(12.1px, 0px + 3.2266666667vw, 24.2px);
  padding-left: clamp(17.5px, 0px + 4.6666666667vw, 35px);
  padding-right: clamp(17.5px, 0px + 4.6666666667vw, 35px);
  position: relative;
}

.accordion_reverse button p {
  margin: 0;
  text-align: left;
}

.accordion_reverse .content {
  position: relative;
  max-height: 0;
  margin-right: clamp(37.5px, 0px + 10vw, 75px);
  overflow: hidden;
  opacity: 0.3;
  transition: max-height 0.4s, opacity 0.4s;
}

.accordion_reverse .content-img {
  position: absolute;
  top: clamp(48px, 0px + 12.8vw, 96px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
}

.accordion_reverse.open .content {
  max-height: 1000px;
  opacity: 1;
  padding-bottom: 0px;
}

.accordion_reverse.open .toggle {
  margin-bottom: 0px;
}

.accordion_reverse .toggle {
  width: 100%;
  cursor: pointer;
  margin: auto;
  margin-bottom: clamp(10.35px, 0px + 2.76vw, 20.7px);
  display: block;
}

.accordion_reverse .toggle span,
.accordion_reverse .toggle span::before,
.accordion_reverse .toggle span::after {
  content: "";
  display: block;
  margin: auto;
  transition: transform 0.3s;
  position: absolute;
  top: 0;
  bottom: 0;
}

.accordion_reverse .toggle span {
  width: clamp(17.5px, 1px + 4.4vw, 34px);
  height: clamp(17.5px, 1px + 4.4vw, 34px);
  border: #fff 2px solid;
  border-width: clamp(1px, 0px + 0.2666666667vw, 2px);
  border-radius: 100px;
  right: clamp(8.5px, 0px + 2.2666666667vw, 17px);
}

.accordion_reverse .toggle span::before,
.accordion_reverse .toggle span::after {
  background: #fff;
  left: 0;
  right: 0;
}

.accordion_reverse .toggle span::before {
  width: clamp(1px, 0px + 0.2666666667vw, 2px);
  height: clamp(7.5px, 0px + 2vw, 15px);
}

.accordion_reverse.open .toggle span::before {
  transform: rotate(90deg);
}

.accordion_reverse .toggle span::after {
  height: clamp(1px, 0px + 0.2666666667vw, 2px);
  width: clamp(7.5px, 0px + 2vw, 15px);
}

.accordion_reverse.open .toggle_icon {
  transform: rotate(-180deg);
  transition: transform 0.3s;
}

.grand-open {
  background-color: #f4f3ed;
  padding-bottom: clamp(65px, 0px + 17.3333333333vw, 130px);
}

h2.grand-open-title {
  width: clamp(325px, 0px + 86.6666666667vw, 650px);
  height: clamp(91px, 0px + 24.2666666667vw, 182px);
  position: relative;
  margin: auto;
  margin-top: clamp(27px, 1px + 6.9333333333vw, 53px);
}

.grand-open-badge {
  width: clamp(154px, -1px + 41.3333333333vw, 309px);
  height: clamp(83px, 1px + 21.8666666667vw, 165px);
  margin: auto;
  margin-top: clamp(15px, 1px + 3.7333333333vw, 29px);
  margin-bottom: clamp(13px, 1px + 3.2vw, 25px);
}

.grand-open-hr {
  width: clamp(300px, 0px + 80vw, 600px);
  margin: 0 auto;
}

.map {
  width: clamp(300px, 0px + 80vw, 600px);
  height: clamp(208px, 0px + 55.4666666667vw, 416px);
  margin: 0 auto;
  position: relative;
}

.grand-open-text {
  width: clamp(310px, 0px + 82.6666666667vw, 620px);
  margin: 1.2em auto;
  margin-bottom: clamp(22px, 0px + 5.8666666667vw, 44px);
}

.grand-open-tel {
  width: clamp(277px, 0px + 73.8666666667vw, 554px);
  margin: 0 auto;
  margin-bottom: clamp(22.5px, 0px + 6vw, 45px);
  position: relative;
}

.grand-open-tel a.absol.absol_tel {
  position: absolute;
  width: clamp(233px, 1px + 61.8666666667vw, 465px);
  height: clamp(28px, 0px + 7.4666666667vw, 56px);
  top: 0;
  left: clamp(45px, 0px + 12vw, 90px);
}

.kengaku-button {
  width: clamp(300px, 0px + 80vw, 600px);
  display: block;
  margin: 0 auto;
}

.design-works {
  padding-top: clamp(56px, 1px + 14.6666666667vw, 111px);
  padding-bottom: clamp(50px, 0px + 13.3333333333vw, 100px);
}

.design-works h2 {
  font-family: "Cinzel", serif;
  font-size: clamp(10px, 0px + 2.6666666667vw, 20px);
  font-weight: 400;
  letter-spacing: 0.6em;
  text-align: center;
  margin: auto;
  margin-top: 0;
  margin-bottom: clamp(9px, 1px + 2.1333333333vw, 17px);
}

.design-works h3 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(20px, 0px + 5.3333333333vw, 40px);
  font-weight: 200;
  margin-top: clamp(27px, 0px + 7.2vw, 54px);
  margin-bottom: clamp(32px, 0px + 8.5333333333vw, 64px);
  text-align: center;
  letter-spacing: 0.3em;
}

ul.btn_list {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: clamp(25px, 0px + 6.6666666667vw, 50px);
  row-gap: clamp(17px, -1px + 4.8vw, 35px);
  flex-wrap: wrap;
  padding-left: unset;
}

ul.btn_list li {
  width: clamp(138px, 1px + 36.5333333333vw, 275px);
}

.works_slide {
  width: clamp(250px, 0px + 66.6666666667vw, 500px);
  margin: 0 auto;
}

.works_slide.works-slider_1 {
  margin-top: clamp(46px, 0px + 12.2666666667vw, 92px);
}

.works_slide .splide__arrow {
  background: rgba(0, 0, 0, 0) !important;
  opacity: 1 !important;
  width: clamp(18px, 0px + 4.8vw, 36px);
  height: clamp(18px, 0px + 4.8vw, 36px);
}

.works_slide .splide__arrow::before {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(18px, 0px + 4.8vw, 36px);
  height: clamp(18px, 0px + 4.8vw, 36px);
}

.works_slide .splide__arrow.splide__arrow--prev {
  left: clamp(-48px, 0px + -6.4vw, -24px);
}

.works_slide .splide__arrow.splide__arrow--prev::before {
  background: url("../images/arrow-prev.svg") no-repeat;
  background-size: contain;
}

.works_slide .splide__arrow.splide__arrow--next {
  right: clamp(-48px, 0px + -6.4vw, -24px);
}

.works_slide .splide__arrow.splide__arrow--next::before {
  background: url("../images/arrow-next.svg") no-repeat;
  background-size: contain;
}

.slide-title {
  margin: auto;
  margin-top: clamp(14px, 1px + 3.4666666667vw, 27px);
  margin-bottom: clamp(18px, 0px + 4.8vw, 36px);
}

.slide-title.slide-title-1 {
  width: clamp(223px, -1px + 59.7333333333vw, 447px);
}

.slide-title.slide-title-2 {
  width: clamp(155px, 0px + 41.3333333333vw, 310px);
}

.slide-title.slide-title-3 {
  width: clamp(172px, 0px + 45.8666666667vw, 344px);
}

.slide-title.slide-title-4 {
  width: clamp(237px, -1px + 63.4666666667vw, 475px);
}

.quality {
  position: relative;
}

.quality p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(11.5px, 0px + 3.0666666667vw, 23px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 2.39;
  color: #000;
  position: absolute;
  top: clamp(404px, 0px + 107.7333333333vw, 808px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  margin: 0;
  width: 100%;
}

.shop-info {
  padding-bottom: clamp(80px, 0px + 21.3333333333vw, 160px);
  position: relative;
}

.shop-info-hr {
  width: clamp(300px, 0px + 80vw, 600px);
  margin: 0 auto;
}

.shop-info h2 {
  margin-top: clamp(13px, -1px + 3.7333333333vw, 27px);
  margin-bottom: clamp(28px, 0px + 7.4666666667vw, 56px);
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: clamp(34.57px, 0.01px + 9.216vw, 69.13px);
  line-height: 1.157;
  letter-spacing: 0.2em;
  font-weight: 400;
  color: #69951f;
}

.shop-info h2 .title-jp {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(15px, 0px + 4vw, 30px);
  letter-spacing: 0.1em;
  line-height: 1.73;
  font-weight: 500;
  color: #231815;
}

.shop-info h3 {
  color: #231815;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(12px, 0px + 3.2vw, 24px);
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 700;
  line-height: 1;
  padding-bottom: clamp(10px, 0px + 2.6666666667vw, 20px);
  width: clamp(300px, 0px + 80vw, 600px);
  border-bottom: 1px solid #231815;
  margin: 0 auto;
  margin-bottom: clamp(13px, 0px + 3.4666666667vw, 26px);
}

.shop-info-detail {
  width: clamp(290px, 0px + 77.3333333333vw, 580px);
  margin: 0 auto;
  margin-bottom: clamp(31px, 0px + 8.2666666667vw, 62px);
}

.shop-info .map {
  height: clamp(181px, 0px + 48.2666666667vw, 362px);
}

.shop-info::after {
  border-left: 1px solid #231815;
  position: absolute;
  content: "";
  width: 1px;
  height: clamp(80px, 0px + 21.3333333333vw, 160px);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.reserve {
  padding-top: clamp(20px, 0px + 5.3333333333vw, 40px);
}

.reserve h2 {
  margin-top: clamp(13px, -1px + 3.7333333333vw, 27px);
  margin-bottom: clamp(28px, 0px + 7.4666666667vw, 56px);
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: clamp(34.57px, 0.01px + 9.216vw, 69.13px);
  line-height: 1.157;
  letter-spacing: 0.2em;
  font-weight: 400;
  color: #69951f;
}

.reserve h2 .title-jp {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(15px, 0px + 4vw, 30px);
  letter-spacing: 0.1em;
  line-height: 1.73;
  font-weight: 500;
  color: #231815;
}

.reserve-form {
  /*@include fluid(width, 90%, 100%);
  @include fluid(height, 2100px, 1340px);*/
  margin: auto;
}

.reserve-tel {
  width: clamp(288px, -19px + 81.8666666667vw, 595px);
  height: clamp(110px, 0px + 29.3333333333vw, 220px);
  margin: auto;
  margin-top: clamp(32px, 0px + 8.5333333333vw, 64px);
  margin-bottom: clamp(27px, 0px + 7.2vw, 54px);
  position: relative;
}

.reserve-tel a.absol.absol_tel {
  position: absolute;
  width: clamp(250px, 0px + 66.6666666667vw, 500px);
  height: clamp(30px, 0px + 8vw, 60px);
  top: clamp(35px, 0px + 9.3333333333vw, 70px);
  left: clamp(51px, -1px + 13.8666666667vw, 103px);
}

.float_bar {
  position: fixed;
  opacity: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(43px, 0px + 11.4666666667vw, 86px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.4s;
  pointer-events: none;
}

.float_bar a {
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.float_bar.active {
  opacity: 1;
  pointer-events: auto;
}

.footer {
  position: relative;
  padding-top: clamp(34px, 1px + 8.8vw, 67px);
  padding-bottom: clamp(13px, 0px + 3.4666666667vw, 26px);
}

.footer::before {
  content: "";
  border-top: 1px solid #231815;
  width: clamp(300px, 0px + 80vw, 600px);
  height: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.footer-logo {
  width: clamp(182px, 0px + 48.5333333333vw, 364px);
  height: clamp(41px, 0px + 10.9333333333vw, 82px);
  margin: auto;
  margin-bottom: clamp(20px, -1px + 5.6vw, 41px);
}

.footer-address {
  width: clamp(177px, 0px + 47.2vw, 354px);
  height: clamp(42px, 0px + 11.2vw, 84px);
  margin: auto;
}