@charset "utf-8";

:root {
  --black: #291B0D;
  --white: #fff;
}

html,
body {
  font-family: "a-otf-ryumin-pr6n", serif;
  font-weight: 300;
  font-style: normal;
  font-optical-sizing: auto;
  line-height: 2.4;
  letter-spacing: 0.15em;
  overflow-x: clip;
  background-color: #F9F7EE;
  color: #291B0D;
  word-break: auto-phrase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "a-otf-ryumin-pr6n", serif;
  font-weight: 300;
  font-style: normal;
}

a {
  color: #291B0D;
  text-decoration: none !important;
}

a:hover {
  color: #469665;
  cursor: pointer;
}

/* フォント */

.bell {
  font-family: "belleza", serif;
  font-weight: 400;
  font-style: normal;
}

.ryu {
font-family: "a-otf-ryumin-pr6n", serif;
font-weight: 300;
font-style: normal;
}
.fc-black {
  color: var(--black) !important;
}
  
.fc-white {
  color: #fff !important;
}

.fc-yellow {
  color: #D9C173 !important;
}

.v-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}

.text-shadow {
  text-shadow: 2px 2px 5px black;
}

.text-shadow-white {
  text-shadow: 2px 2px 5px white;
}

.has-shadow {
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.10);
}

/* 背景 */
.bg-white {
  background-color: #fff;
}

.bg-beige {
  background-color: #F9F7EE;
}

/*罫線*/
.b-black {
  border: 1px solid #454545;
}

.bl-black {
  border-left: 1px solid #454545;
}

.br-black {
  border-right: 1px solid #454545;
}

.bb-black {
  border-bottom: 1px solid #454545;
}

.bt-balck {
  border-bottom: 1px solid #454545;
}

/* ボタン */
.button {
  position: relative;
  display: inline-flex !important;
  background-color: #6E6E6E;
  color: #fff;
  width: 220px;
  height: 58px;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.button-2 {
  position: relative;
  display: inline-flex !important;
  background-color: #6E6E6E;
  color: #fff;
  width: 300px;
  height: 58px;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.button-2 img {
  width: 18px;
}

.button.y {
  background-color: #D4BC51;
}

.button.w {
  background-color: #FFF;
  width: 250px;
  height: 58px;
}

.button:hover,
.button-2:hover {
  background-color: #469665;
}

.button p,
.button-2 p {
  color: #FFF;
  font-family: "a-otf-ryumin-pr6n", serif;
  font-size: clamp(0.75rem, 0.629rem + 0.53vw, 1.125rem);
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.15rem;
}

@media (min-width: 768px) {
.button {
  width: 276px;
  height: 64px;
}

.button-2 {
  width: 410px;
  height: 64px;
}
}

/* ナビ */

.a-nav-menu {
  display: none;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 800;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.3s;
  background-color: #C4E3D0;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .a-nav-menu {
    width: 60%;
  }
}

@media (min-width: 992px) {
  .a-nav-menu {
    width: 500px;
  }
}

.a-nav-menu.edit {
  display: flex;
  opacity: 1;
}

.nav-menu-box {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 2rem;
  z-index: 2;
}

@media (min-width: 768px) {
  .nav-menu-box {
    gap: 2.5rem;
  }
}

.nav-menu-box .nav-list {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  line-height: 1.5;
  gap: 1rem;
}

.nav-list a p {
  position: relative;
  font-family: "a-otf-ryumin-pr6n", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 14px;
  color: #454545;
  transition: all 0.3s;
  min-height: auto;
  padding-left: 2rem;
}

.nav-list a p::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 0.5px;
  background-color: #454545;
}

.nav-list a:hover p {
  color: #469665;
}

.nav-menu-box .inst {
  width: 220px;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border: solid 1px #454545 ;
}

.nav-menu-box .inst p {
  font-size: 16px;
}

.nav-menu-box .inst img {
  width: 18px;
}

.nav-menu-box .sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
} 

.nav-menu-box .sub a {
  width: 184px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border: solid 1px #454545 ;
}

.nav-menu-box .sub a p {
  font-size: 14px;
}

.nav-menu-box .inst:hover,
.nav-menu-box .sub a:hover {
  background-color: #FFF;
}

@media (min-width: 768px) {
.nav-menu-box .nav-list {
  gap: 1.2rem;
}

.nav-list a p {
  font-size: 20px;
}

.nav-menu-box .inst {
  width: 290px;
  padding: 1rem;
}

.nav-menu-box .inst p {
  font-size: 20px;
}

.nav-menu-box .sub a {
  width: 212px;
  padding: 1rem;
}

.nav-menu-box .sub a p {
  font-size: 16px;
}

}

.top-logo {
  max-width: 100px;
}

.menu-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.menu-box > a:not(:last-child) {
  margin-bottom: 12px;
}

/* ヘッダー　*/

.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0rem 1.5rem;
  z-index: 900;
}

.header-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.reserve-button {
  max-width: 134px;
  margin-right: 1.5rem;
}

.reserve-button img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.reserve-button img:hover {
  transform: scale(1.05);
}

.a-burger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 40px;
  height: 30px;
  margin: 0;
  padding: 0;
}

.a-burger div {
  width: 40px;
  height: 1px;
  background-color: #454545;
  position: absolute;
  left: 0px;
  transform-origin: center;
  transition: all 0.3s;
  padding: 0;
  margin: 0;
  min-height: 1px !important;
}

.a-burger div:nth-child(1) {
  top: 0px;
}

.a-burger div:nth-child(2) {
  top: 15px;
}

.a-burger div:nth-child(3) {
  bottom: 0px;
}

.a-burger.is-active div:nth-child(1) {
  transform: rotate(-45deg);
  top: 12px;
}

.a-burger.is-active div:nth-child(2) {
  display: none;
}

.a-burger.is-active div:nth-child(3) {
  transform: rotate(45deg);
  bottom: 16px;
}

@media (min-width: 768px) {

  .header-wrap {
  padding: 2rem 3rem 0rem 3rem;
}

  .a-burger {
  width: 50px;
  height: 40px;
}

.a-burger div {
  width: 50px;
}

.a-burger div:nth-child(2) {
  top: 20px;
}

.a-burger.is-active div:nth-child(1) {
  transform: rotate(-45deg);
  top: 20px;
}

.a-burger.is-active div:nth-child(3) {
  transform: rotate(45deg);
  bottom: 18px;
}

  .reserve-button {
    max-width: 240px;
    margin-right: 3.5rem;
  }

  .top-logo {
  max-width: 168px;
}

}

/* フッター */

.foot-wrap {
  background-color: #F7F3E2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
}

.foot-logo{
  position: relative;
}

.foot-logo img {
  max-width: 190px;
}

.foot-logo::after {
  content: "";
  display: block;
  height: 0.5px;
  width: 84px;
  background-color: #000;
  position: absolute;
  left: 50%;
  bottom: -30%;
  transform: translateX(-50%);
}

.foot-list {
  display: flex;
  gap: 2rem;
  max-width: 760px;
}

.foot-list .l {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.foot-list .box {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  gap: 1.2rem;
  align-items: start;
  justify-content: center;
}

.foot-list .box a {
  display: flex;
  align-items: center;
  justify-content: start;
  min-height: 40px;
  padding: 0;
}

.foot-list .box a p {
  position: relative;
  font-family: "a-otf-ryumin-pr6n", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  color: #454545;
  min-height: auto;
  padding-left: 2rem;
  transition: 0.3s;
}

.foot-list .box a p::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 16px;
  height: 0.5px;
  background-color: #454545;
}

.foot-list .box a:hover p {
  color: #469665;
}

.foot-wrap .inst {
  width: 340px;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border: solid 1px #454545 ;
}

.foot-wrap .inst p {
  font-size: 16px;
}

.foot-wrap .inst img {
  width: 18px;
}

.foot-wrap .sub {
  display: flex;
  align-items: center;
  justify-content: center;
} 

.foot-wrap .sub a {
  width: 160px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border: solid 1px #454545 ;
}

.foot-wrap .sub a p {
  font-size: 14px;
}

.foot-wrap .inst:hover,
.foot-wrap .sub a:hover {
  background-color: #FFF;
}

@media (min-width: 768px) {

  .foot-logo img {
  max-width: 270px;
}

  .foot-list .box a p {
  font-size: 20px;
}

  .foot-wrap .inst {
  width: 440px;
}

.foot-wrap .inst p {
  font-size: 20px;
}

  .foot-wrap .sub a {
  width: 210px;
}

.foot-wrap .sub a p {
  font-size: 16px;
}
}

/* News表示 */

/* News表示 画像あり版 */
.news-list .webgene-blog {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.news-list .webgene-item {
  width: 100%;
}

@media (min-width: 768px) {
  .news-list .webgene-item {
    width: 48%;
  }
}
/* ページネーション共通 */
.webgene-pagination {
  width: 100%;
}

.webgene-pagination ul,
.pagelink {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 5rem;
}

.webgene-pagination ul li a,
.pagelink p a {
  display: inline-flex !important;
  font-family: "hiragino-mincho-pron", serif;
  width: 136px;
  height: 50px;
  padding: 15px 22px !important;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  background-color: #6E6E6E;
  color: #FFF;
}
.webgene-pagination ul li a:hover,
.pagelink p a:hover {
  cursor: pointer;
  background-color: #469665;
}

/* フォーム */
.formInput,
.formTextArea {
  width: 100%;
  padding: 0.5rem;
  border: none;
  border-radius: 0;
  border: 1px solid #cbc3b0;
  background-color: #fffcf5;
  margin-bottom: 2rem;
}

.formTextArea {
  height: 8rem;
}

.formInput:focus,
.formInput:focus-visible,
.formTextArea:focus,
.formTextArea:focus-visible,
.form-button:focus,
.form-button:focus-visible {
  border: 1px solid #cbc3b0;
  background-color: #fffcf5;
}
.zipInput {
  width: 6rem;
}
@media (min-width: 768px) {
  .formTh {
    padding-left: 2rem;
  }
}

.requiredText {
  background-color: #a3987c;
  color: #fff;
  padding: 4px 8px;
  font-size: 0.8rem;
  margin-left: 1rem;
}
.privacyformError {
  padding-top: 25px;
}
@media (min-width: 768px) {
  .privacyformError {
    padding-top: 0;
  }
}
/* ページ共通設定 */

.fv {
  position: relative;
  height: 100vh;
  background: linear-gradient(180deg, #FFFAE4 0%, rgba(255, 250, 228, 0.00) 70.19%);
  display: flex;
  align-items: start;
  justify-content: end;
}

@media (min-width: 768px) {
  .fv {
    height: calc(100vh + 118px);
      align-items: end;
  }
}

.fv-sub {
  position: relative;
  height: 80vh;
  background: linear-gradient(180deg, #FFFAE4 0%, rgba(255, 250, 228, 0.00) 70.19%);
}

.common-fv-img {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 60%;
  max-width: 1720px;
  overflow: hidden;
}

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

@media (min-width: 768px) {

  .common-fv-img {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 70%;
}
}

@media (min-width: 1200px) {

      .fv-sub {
  height: 100vh;
}

  .common-fv-img {
  height: 70%;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
}
}

.common-fv-title {
  position: absolute;
  bottom: 2%;
  left: 10%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

@media (min-width: 768px) {
  .common-fv-title {
  bottom: 6%;
  left: 10%;
  }
}

@media (min-width: 1200px) {
  .common-fv-title {
  bottom: 4%;
  left: 10%;
  }
}

.common-fv-title p {
  font-size: clamp(2.5rem, 1.852rem + 2.8vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.15em;
}

.common-fv-title h1 {
  font-size: clamp(1.125rem, 0.963rem + 0.7vw, 1.625rem);
  line-height: 1.5;
  letter-spacing: 0.15em;
}

/* プラシバシーポリシー */
.policy-box {
  overflow-y: scroll;
  height: 400px;
  border-radius: 30px;
}

.btn a::after {
  content: "→";
}

/* TOP */

.top-fv-img {
  position: relative;
  width: 100%;
  margin-top: 104px;
}

.top-fv-wrap {
  overflow: hidden;
  height: 60vh;
}

.top-fv-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.top-fv-img::after {
  content: "";
  position: absolute;

  /* ▼ 任意の位置指定 */
  left: 66%;
  bottom: 25%;
  width: 180px;
  height: 1px;
  background-color: #B19966;
  transform: rotate(54deg);
  transform-origin: left center;
}

.top-title {
  position: absolute;
  left: 8%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top-title h1 {
  font-size: clamp(1.125rem, 0.963rem + 0.7vw, 1.625rem);
  line-height: 1;
}

.top-title h2 {
  font-size: clamp(1.5rem, 0.974rem + 2.28vw, 3.125rem);
  line-height: 1.8;
}

.top-title p {
  font-size: clamp(0.375rem, 0.213rem + 0.7vw, 0.875rem);
  line-height: 1;
}

@media (min-width: 768px) {
  .top-fv-img {
  width: 70%;
  margin-top: 0;
  margin-bottom: 118px;
}
  .top-fv-wrap {
  height: 85vh;
}

.top-fv-img::after {
  left: 35%;
  bottom: -8%;
  width: 330px;
  transform: rotate(-54deg);
}

.top-title {
  left: 10%;
  bottom: 20%;
}
}

@media (min-width: 992px) {
.top-fv-img {
  width: 80%;
  margin-right: 80px;
}

.top-fv-img::after {
  left: 25%;
}
}

.top-sec2-wrap {
  background: linear-gradient(128deg, rgba(248, 242, 212, 0.00) 40.39%, rgba(248, 242, 212, 0.75) 78.37%);
}

.top-sec2-box1 {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 5rem;
}

.top-sec2-box2 {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .top-sec2-box2 {
  justify-content: end;
}
}

.common-title {
  font-size: clamp(1.5rem, 0.974rem + 2.28vw, 3.125rem);
  position: relative;
  z-index: 4;
  letter-spacing: 0.15em;
}

.top-sec2-title {
  position: relative;
}

.top-sec2-title::after {
  content: "";
  display: block;
  background-image: url("../images/top-concept.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(250px, 40vw, 540px);
  height: 200%;
  position: absolute;
  bottom: 15%;
  left: 0;
  z-index: 1;
}

.top-sec2-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}

.top-sec2-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2%;
  height: 50%;              /* 親の高さの半分 */
  border-left: 1px dotted #454545;
}

.common-text h3 {
  font-size: clamp(1rem, 0.757rem + 1.05vw, 1.75rem);
  margin: 0;
  line-height: 1.5;
}

.common-text .text {
  font-size: clamp(0.75rem, 0.588rem + 0.7vw, 1.25rem);
  line-height: 3.0;
}

.top-sec2-img-l {
  position: relative;
  flex: 1.8;
}

.top-sec2-img-l::after {
  content: "";
  position: absolute;
  left: -8%;
  bottom: 40%;
  width: 50%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(54deg);
  transform-origin: left center;
}

.top-sec2-img-r {
  position: relative;
  flex: 1;
}

.top-sec2-img-r::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 40%;
  width: 68%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(54deg);
  transform-origin: right center;
}

.top-sec2-img-wrap {
  overflow: hidden;
}

.top-sec2-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.top-sec3-box1 {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 1rem;
  position: relative;
  z-index: 2;
}

.top-sec3-box2 {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 1rem;
  position: relative;
  z-index: 2;
  transform: translateY(100%);
}

.top-sec3-title {
  position: relative;
}

.top-sec3-title::after {
  content: "";
  display: block;
  background-image: url("../images/top-menu.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(280px, 60vw, 780px);
  height: 200%;
  position: absolute;
  bottom: -80%;
  right: 1%;
  z-index: 1;
}

.top-sec3-title2 {
  position: relative;
}

.top-sec3-title2::after {
  content: "";
  display: block;
  background-image: url("../images/top-headspa.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  width: clamp(250px, 60vw, 610px);
  height: 230%;
  position: absolute;
  bottom: -5%;
  left: 0%;
  z-index: 1;
}

.top-sec3-img-1,
.top-sec3-img-2 {
  position: relative;
  margin-top: 0rem;
  margin-left: 0rem;
  width: 100%;
}

@media (min-width: 768px) {
  .top-sec3-img-1,
  .top-sec3-img-2 {
  margin-top: 1rem;
  margin-left: 2rem;
  width: 85%;
}
}

.top-sec3-img-1::after {
  content: "";
  position: absolute;
  left: -5%;
  top: 40%;
  width: 30%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(-50deg);
  transform-origin: left center;
}

.top-sec3-img-2::after {
  content: "";
  position: absolute;
  right: -5%;
  top: 40%;
  width: 30%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(50deg);
  transform-origin: right center;
}

.top-sec3-img-wrap {
  overflow: hidden;
  width: 100%;
}

.top-sec3-img-wrap img {
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

.top-sec3-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}

.top-sec3-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0%;
  height: 50%;              /* 親の高さの半分 */
  border-left: 1px dotted #454545;
}

.top-sec4-bg {
  position: sticky;
  top: 0;
  width: 100%;
  height: 80vh;
}

.top-sec4-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}

@media (min-width: 768px) {
.top-sec4-bg {
  width: 100%;
  height: auto;
}

.top-sec4-bg img {
  object-fit: contain;
  object-position: center;
}
}

.top-sec4-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 4;
}

.top-sec4-info img {
  max-width: 756px;
  width: 95%;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .top-sec4-info img {
  width: 70%;
}
}

.top-sec4-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 5rem;
}

.top-sec4-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;        /* ← 下を基点 */
  width: 100%;
  height: 100%;      /* ← 親の90% */
  background-color: #FFF; /* 任意 */
  z-index: 0;      /* 背景として扱う */
}

.top-sec4-box {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 3rem;
  border-bottom: 0.5px #454545 solid;
  position: relative;
  z-index: 2;
  max-width: 930px;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .top-sec4-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
}

.top-sec4-title {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
}

.top-sec4-title h3 {
  font-size: clamp(1.5rem, 0.974rem + 2.28vw, 3.125rem);
}

.top-sec4-title img {
  width: 24px;
}

@media (min-width: 768px) {
  .top-sec4-title img {
  width: 34px;
}
}

.top-sec4-title p {
  font-size: clamp(1rem, 0.838rem + 0.7vw, 1.5rem);
}

.top-sec5-wrap {
  background: linear-gradient(176deg, rgba(248, 242, 212, 0.00) 31.01%, #F8F2D4 97.01%);
}

.top-sec5-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  background-color: #FFF;
  padding: 5rem 1.5rem 3rem 1.5rem;
}

.top-sec5-box h2 {
  position: relative;
  font-size: clamp(1rem, 0.838rem + 0.7vw, 1.5rem);
  padding-bottom: 1rem;
  z-index: 4;
}

.top-sec5-box.l h2::before {
  content: "";
  display: block;
  position: absolute;
  background-image: url("../images/top-sec4-business.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  top: -80%;
  left: 50%;
  transform: translateX(-50%);
  width: 180%;
  height: 57px;
}

.top-sec5-box.r h2::before {
  content: "";
  display: block;
  position: absolute;
  background-image: url("../images/top-sec4-school.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  top: -80%;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  height: 57px;
}

.top-sec5-box h2::after {
  content: "";
  display: block;
  height: 0.5px;
  width: 60px;
  background-color: #000;
  position: absolute;
  left: 50%;
  bottom: -10%;
  transform: translateX(-50%);
}

.top-sec6-title {
  position: relative;
  font-size: clamp(1rem, 0.838rem + 0.7vw, 1.5rem);
  z-index: 0;
}

.top-sec6-title::before {
  content: "";
  display: block;
  background-image: url("../images/top-contact.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(300px, 60vw, 510px);
  height: 400%;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.map-title {
  font-size: clamp(1rem, 0.919rem + 0.35vw, 1.25rem);
  position: relative;
}

.map-title::before {
  position: absolute;
  content: "";
  display: block;
  background-image: url("../images/line-2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 32px;
  height: 1px;
  top: 50%;
  left: -50%;
  transform: translateY(-50%);
}

.map-title::after {
  position: absolute;
  content: "";
  display: block;
  background-image: url("../images/line-2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 32px;
  height: 1px;
  top: 50%;
  right: -50%;
  transform: translateY(-50%);
}

.google-map {
  width: 100%;
  max-width: 766px;
  height: 270px;
}

  iframe{
    border:none; 
    display:block;
  }


/* 会社概要 */

.comp-sec2-bg {
  background: linear-gradient(128deg, rgba(248, 242, 212, 0.00) 40.39%, rgba(248, 242, 212, 0.75) 78.37%);
}

.comp-sec2-box {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .comp-sec2-box {
  flex-direction: row;
  align-items: start;
  justify-content: center;
}
}

.comp-sec2-text {
  display: flex;
  flex-direction: column;
  flex: 1.2;
}

.comp-sec2-text .title {
  font-size: clamp(1rem, 0.757rem + 1.05vw, 1.75rem);
  padding-bottom: 1.5rem;
  border-bottom:solid 1px #000;
}

.comp-sec2-text .text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: clamp(0.75rem, 0.669rem + 0.35vw, 1rem);
  line-height: 2.0;
}

.comp-sec2-wrap {
  position: relative;
  flex: 1;
}

.comp-sec2-wrap::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: 40%;
  width: 68%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(-54deg);
  transform-origin: right center;
}

.comp-sec2-img {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 350px;
}

@media (min-width: 768px) {
.comp-sec2-img {
  height: auto;
}
}

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

.comp-sec3-wrap {
  background-color: #FFF;
}

.comp-sec3-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px #000 solid;
  padding-bottom: 5rem;
}

.comp-sec3-box h2 {
  position: relative;
  font-size: clamp(1.5rem, 0.974rem + 2.28vw, 3.125rem);
  margin-top: 8rem;
  z-index: 4;
}

.comp-sec3-box h2::before {
  content: "";
  display: block;
  position: absolute;
  background-image: url("../images/comp-sec3-message.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  top: -110%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 550px;
  width: 200%;
  height: 200%;
}

.comp-sec3-box p {
  font-size: clamp(0.625rem, 0.504rem + 0.53vw, 1rem);
  line-height: 2.6;
  text-align: center;
}

.comp-sec3-bg {
  position: sticky;
  top: 0;
  width: 100%;
  height: 80vh;
}

.comp-sec3-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 768px) {
.comp-sec3-bg {
  width: 100%;
  height: auto;
}

.comp-sec3-bg img {
  object-fit: contain;
}
}

.comp-sec4-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .comp-sec4-wrap {
  display: flex;
  flex-direction: row;
}
}

.comp-sec4-text {
  display: flex;
  flex-direction: column;
  flex: 1.2;
}

.comp-sec4-text .title {
  font-size: clamp(1rem, 0.838rem + 0.7vw, 1.5rem);
  position: relative;
  z-index: 4;
}

.comp-sec4-text .title::after {
  content: "";
  display: block;
  background-image: url("../images/comp-sec3-profile.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(150px, 40vw, 210px);
  height: 100%;
  position: absolute;
  bottom: 50%;
  left: 0;
  z-index: -1;
}

.comp-sec4-text .text {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-size: clamp(0.625rem, 0.544rem + 0.35vw, 0.875rem);
  line-height: 1.5;
}

.comp-sec4-img {
  overflow: hidden;
  width: 100%;
  height: 280px;
}

@media (min-width: 768px) {
.comp-sec4-img {
  display: block;
  flex: 1;
  height: 100%;
}
}

.comp-sec4-img img {
  width: 100%;
  height: 120%;
  object-fit: cover;
}

@media (min-width: 768px) {
.comp-sec4-img img {
    height: 100%;
}
}

.comp-sec5-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  background-color: #FFF;
  padding: 5rem 1.5rem 3rem 1.5rem;
}

.comp-sec5-box h2 {
  position: relative;
  font-size: clamp(1rem, 0.838rem + 0.7vw, 1.5rem);
  padding-bottom: 1rem;
  z-index: 4;
}

.comp-sec5-box h2::before {
  content: "";
  display: block;
  position: absolute;
  background-image: url("../images/comp-instagram.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  top: -80%;
  left: 50%;
  transform: translateX(-50%);
  width: 160%;
  height: 57px;
}

.comp-sec5-box h2::after {
  content: "";
  display: block;
  height: 0.5px;
  width: 60px;
  background-color: #000;
  position: absolute;
  left: 50%;
  bottom: -10%;
  transform: translateX(-50%);
}

/* コンセプト */

.con-sec2-bg {
background: linear-gradient(128deg, rgba(248, 242, 212, 0.00) 40.39%, rgba(248, 242, 212, 0.75) 78.37%);
}

.con-sec2-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: end;
}

.con-sec2-wrap .box {
  position: relative;
  width: 80%;
  display: flex;
  justify-content: end;
}

.con-sec2-wrap .box::after {
  content: "";
  position: absolute;
  left: 42%;
  bottom: -8%;
  width: 35%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(-54deg);
  transform-origin: left center;
}

.con-sec2-wrap .img1 {
  width: 100%;
  height: 100%;
  max-width: 762px;
  overflow: hidden;
}

.con-sec2-wrap .img1 img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}

.con-sec2-wrap .title {
  position: absolute;
  left: -20%;
  bottom: 10%;
  width: 70%;
  max-width: 550px;
}

.con-sec2-wrap2 {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
.con-sec2-wrap2 {
  flex-direction: row;
}
}

.con-sec2-wrap2 .box {
  position: relative;
  width: 80%;
  display: flex;
  justify-content: end;
}

.con-sec2-wrap2 .box::after {
  content: "";
  position: absolute;
  left: 0%;
  bottom: 24%;
  width: 45%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(50deg);
  transform-origin: left center;
}

.con-sec2-wrap2 .img1 {
  overflow: hidden;
  width: 100%;
  height: 280px;
}

@media (min-width: 768px) {
.con-sec2-wrap2 .img1 {
  display: block;
  height: 100%;
}
}

.con-sec2-wrap2 .img1 img {
  width: 100%;
  height: 120%;
  object-fit: cover;
}

@media (min-width: 768px) {
.con-sec2-wrap2 .img1 img {
    height: 100%;
}
}

.con-sec3-wrap {
  background-color: #FFF;
}

.con-sec3-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.con-sec3-box h2 {
  position: relative;
  font-size: clamp(1.5rem, 1.136rem + 1.58vw, 2.625rem);
  z-index: 4;
  text-align: center;
}

.con-sec3-box h2::after {
  content: "";
  display: block;
  height: 0.5px;
  width: 20%;
  background-color: #000;
  position: absolute;
  left: 50%;
  bottom: -60%;
  transform: translateX(-50%);
}

.con-sec3-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.4rem;
}

.con-sec3-title .no {
  font-size: clamp(3rem, 2.676rem + 1.4vw, 4rem);
  color: #D9C173;
  font-family: "belleza", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1.5rem;
}

.con-sec3-title h3 {
  font-size: clamp(1rem, 0.757rem + 1.05vw, 1.75rem);
  margin-bottom: 1rem;
  text-align: center;
}

.con-sec3-title .text {
  font-size: clamp(0.75rem, 0.507rem + 1.05vw, 1.5rem);
}

.con-sec3-img {
  width: 100%;
  background-image: url("../images/con-sec3-imgsp.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (min-width: 768px) {
.con-sec3-img {
  background-image: url("../images/con-sec3-imgpc.png");
}
}

.con-sec3-text {
  background-color: #F7F3E2;
  width: 90%;
  text-align: center;
  padding: 2.4rem 1.5rem;
  font-size: clamp(0.875rem, 0.754rem + 0.53vw, 1.25rem);
  line-height: 2.4;
  color: #291B0D;
}

.con-sec3-title2 {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  margin-bottom: 2rem;
  width: 95%;
  max-width: 920px;
}

.con-sec3-title2 .title {
  color: #B19966;
  font-size: clamp(1rem, 0.757rem + 1.05vw, 1.75rem);
  margin-bottom: 1.5rem;
  text-align: center;
}

.con-sec3-title2 .text {
  font-size: clamp(0.75rem, 0.669rem + 0.35vw, 1rem);
  position: relative;
  padding-left: 1rem;
}

.con-sec3-title2 .text::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.con-sec3-text2 {
  background-color: #F7F3E2;
  width: 90%;
  text-align: center;
  padding: 1.5rem 1.5rem;
  font-size: clamp(0.875rem, 0.673rem + 0.88vw, 1.5rem);
  line-height: 1;
  letter-spacing: 0.28em;
  color: #291B0D;
}

/* メニュー */

.menu-sec2-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.menu-sec2-box h2 {
  position: relative;
  font-size: clamp(1.5rem, 0.974rem + 2.28vw, 3.125rem);
  margin-top: 5rem;
  z-index: 4;
}

.menu-sec2-box h2::before {
  content: "";
  display: block;
  position: absolute;
  background-image: url("../images/recommended.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  top: -110%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 550px;
  width: 200%;
  height: 200%;
}

.menu-sec2-box .text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1.2rem;
  padding-bottom: 2.5rem;
  border-bottom: 0.5px #000 solid;
  line-height: 1.5;
}

.menu-sec3-wrap {
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.menu-sec3-wrap .title {
  font-size: clamp(1.5rem, 1.014rem + 2.1vw, 3rem);
  color: #D9C173;
  font-family: "belleza", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  padding-left: 0.6rem;
}

.menu-list-wrap {
  display: flex;
  justify-content: start;
  row-gap: 1.4rem;
}

.menu-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: clamp(0.75rem, 0.669rem + 0.35vw, 1rem);
  gap: 0.8rem;
  width: 100%;
  padding: 0 2rem;
  line-height: 1.5;
}

.menu-text div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: start;
}

.menu-text div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: end;
}

/* ヘッドスパ */

.spa-sec2-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: end;
}

.spa-sec2-wrap .box {
  position: relative;
  width: 80%;
  display: flex;
  justify-content: end;
}

.spa-sec2-wrap .box::after {
  content: "";
  position: absolute;
  left: 42%;
  bottom: -8%;
  width: 35%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(-54deg);
  transform-origin: left center;
}

.spa-sec2-wrap .img1 {
  width: 80%;
  height: 100%;
  max-width: 582px;
  overflow: hidden;
}

.spa-sec2-wrap .img1 img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}

.spa-sec2-wrap .title {
  position: absolute;
  left: -22%;
  bottom: 60%;
  width: 85%;
  max-width: 620px;
}

@media (min-width: 768px) {
  .spa-sec2-wrap .title {
  bottom: 28%;
  width: 55%;
}
}

/* 業務委託 */

.busi-sec2-wrap {
  position: relative;
  flex: 1;
}

.busi-sec2-wrap::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: 40%;
  width: 45%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(-54deg);
  transform-origin: right center;
}

@media (min-width: 768px) {
.busi-sec2-wrap::after {
  width: 80%;
}
}

.busi-sec2-img {
  display: block;
  overflow: hidden;
  width: 345px;
  height: 250px;
}

@media (min-width: 768px) {
.busi-sec2-img {
  width: 100%;
  height: auto;
}
}

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

.busi-sec3-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.busi-sec3-box h2 {
  position: relative;
  font-size: clamp(1.5rem, 0.974rem + 2.28vw, 3.125rem);
  margin-top: 8rem;
  z-index: 4;
}

.busi-sec3-box h2::before {
  content: "";
  display: block;
  position: absolute;
  background-image: url("../images/roadmap.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  top: -110%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 616px;
  width: 200%;
  height: 200%;
}

.busi-sec3-box .title {
  font-size: clamp(1rem, 0.757rem + 1.05vw, 1.75rem);
  line-height: 1.8;
  text-align: center;
}

.busi-sec3-box .text {
  font-size: clamp(0.625rem, 0.504rem + 0.53vw, 1rem);
  line-height: 2.6;
  text-align: center;
}

.row-gap2 {
  gap: 1.2rem;
}

.busi-sec4-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.busi-sec4-box h2 {
  position: relative;
  font-size: clamp(1.5rem, 1.136rem + 1.58vw, 2.625rem);
  z-index: 4;
  text-align: center;
}

.busi-sec4-box h2::after {
  content: "";
  display: block;
  height: 0.5px;
  width: 20%;
  background-color: #000;
  position: absolute;
  left: 50%;
  bottom: -60%;
  transform: translateX(-50%);
}

.busi-sec5-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 920px;
}

@media (min-width: 768px) {
.busi-sec5-box {
  width: 85%;
}
}

.busi-sec5-box .title {
  font-size: clamp(0.625rem, 0.463rem + 0.7vw, 1.125rem);
  margin-bottom: 1.5rem;
  text-align: center;
}

.busi-sec5-box .text {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 1rem;
}

.busi-sec5-box .text p {
  font-size: clamp(0.75rem, 0.588rem + 0.7vw, 1.25rem);
  position: relative;
  padding-left: 2rem;
}

.busi-sec5-box .text p::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* 美容師スクール */

.sch-sec2-bg {
  background-image: url("../images/sch-sec2-bgsp.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media (min-width: 768px) {
  .sch-sec2-bg {
  background-image: url("../images/sch-sec2-bg.jpg");
}
}

.sch-sec2-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .sch-sec2-box {
  flex-direction: row;
  align-items: start;
  justify-content: center;
}
}

.sch-sec2-text {
  display: flex;
  flex-direction: column;
  flex: 1.2;
}

.sch-sec2-text .title {
  font-size: clamp(1rem, 0.757rem + 1.05vw, 1.75rem);
  padding-bottom: 1.5rem;
  border-bottom:solid 1px #000;
}

.sch-sec2-text .text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: clamp(0.75rem, 0.669rem + 0.35vw, 1rem);
  line-height: 3.0;
}

.sch-sec2-img {
  display: flex;
  align-items: start;
  flex: 1;
}

.guide-sec2-wrap {
  position: relative;
  width: 100%;
  max-width: 940px;
  background-color: #FFF;
}

@media (min-width: 768px) {
  .guide-sec2-wrap {
  width: 95%;
}
}

@media (min-width: 992px) {
  .guide-sec2-wrap {
  width: 85%;
}
}

.guide-sec2-wrap::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: 18%;
  width: 40%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(-50deg);
  transform-origin: right center;
}

@media (min-width: 992px) {
  .guide-sec2-wrap::after {
  width: 26%;
  bottom: 40%;
}
}

.guide-sec3-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

@media (min-width: 768px) {
  .guide-sec3-title {
    justify-content: start;
    padding: 1rem 2rem;
  }
}

.guide-sec3-title h2 {
  font-size: clamp(1.5rem, 1.014rem + 2.1vw, 3rem);
  z-index: 2;
}

.guide-sec3-step,
.guide-sec3-step2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 0 1.5rem 0rem 1.5rem;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .guide-sec3-step,
  .guide-sec3-step2 {
    flex-direction: row;
    padding: 0 2rem 4rem 2rem;
    gap: 1rem;
    text-align: start;
  }
}

.guide-sec3-step .no,
.guide-sec3-step2 .no {
  position: relative;
  width: 100px;
  flex: 1;
  padding: 0.5rem;
}

.guide-sec3-step .no::after {
  display: none;
  content: "";
  width: 26px;
  height: 15px;
  background-image: url(../images/yazirushi.svg);
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .guide-sec3-step .no::after {
    display: flex;
  }
}

.guide-sec3-step .no img,
.guide-sec3-step2 .no img {
  width: 100%;
  object-fit: contain;
  object-position: center;
  }

  .guide-sec3-step .box,
  .guide-sec3-step2 .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 2.5;
  }

  @media (min-width: 768px) {
    .guide-sec3-step .box,
    .guide-sec3-step2 .box {
      align-items: start;
      gap: 0.5rem;
      flex: 6;
    }
  }

  .guide-yazi {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
  }

  .guide-yazi img {
    width: 26px;
    height: 15px;
    margin-left: 0rem;
  }

  @media (min-width: 768px) {
    .guide-yazi {
      display: none;
    }
  }

.box .title {
  font-size: clamp(1.125rem, 1.004rem + 0.53vw, 1.5rem);
  line-height: 1.5;
  color: #81611D;
}

.box .text {
  font-size: clamp(0.75rem, 0.629rem + 0.53vw, 1.125rem);
  line-height: 2.4;
}

.news-sec2-img {
  position: relative;
}

.news-sec2-img::after {
  content: "";
  position: absolute;
  left: -8%;
  bottom: 55%;
  width: 50%;
  height: 1px;
  background-color: #B19966;
  transform: rotate(50deg);
  transform-origin: left center;
}

.news-sec2-img-wrap {
  overflow: hidden;
  width: 100%;
  height: 200px;
}

.news-sec2-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

  @media (min-width: 768px) {

    .news-sec2-img::after {
  left: -4%;
  bottom: 30%;
  width: 20%;
}

  .news-sec2-img-wrap {
  width: 60%;
  height: 300px;
}
  }

    @media (min-width: 992px) {
  .news-sec2-img-wrap {
  width: 60%;
  height: 400px;
}
  }

  .form-privacy {
  border: solid 1px var(--black);
  background-color: white;
  height: 230px;
  overflow-y: auto;
  padding: 40px 30px;
}

.b-none {
  border: none !important;
}