@charset "UTF-8";
/* 基本設定 */
/* --------------------------------------------------
	section size
-------------------------------------------------- */
/* 初期設定 */
/* 初期設定 */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  font-size: 62.5%;
}

body {
  font-family: "Shippori Mincho B1", sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.75;
  color: #313131;
  position: relative;
  overflow-x: clip;
}

.en {
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

.serif {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
}

a {
  text-decoration: none;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
a:hover {
  opacity: 0.5;
}

img {
  max-width: 100%;
  height: auto;
}

/* ----rem設定---- */
:root {
  --liquid-lgDesignRatio: calc(1440 / 10);
  --liquid-lmdDesignRatio: calc(1024 / 10);
  --liquid-mdDesignRatio: calc(840 / 10);
  --liquid-smDesignRatio: calc(390 / 10);
}

@media screen and (max-width: 1440px) {
  :root {
    --liquid-htmlroot: calc(100vw / var(--liquid-lgDesignRatio));
  }
  html {
    font-size: var(--liquid-htmlroot);
  }
}
@media screen and (max-width: 1024px) {
  :root {
    --liquid-htmlroot: calc(100vw / var(--liquid-lmdDesignRatio));
  }
}
@media screen and (max-width: 840px) {
  :root {
    --liquid-htmlroot: calc(100vw / var(--liquid-mdDesignRatio));
  }
}
@media screen and (max-width: 520px) {
  :root {
    --liquid-htmlroot: calc(100vw / var(--liquid-smDesignRatio));
  }
}
/* --------- */
/* ----レスポンシブの表示非表示---- */
.sp1440, .sp1024, .sp840, .sp520, .sp375 {
  display: none;
}

@media (max-width: 1440px) {
  .pc1440 {
    display: none !important;
  }
  .sp1440 {
    display: block;
  }
}
@media (max-width: 1440px) and (max-width: 1024px) {
  .pc1024 {
    display: none !important;
  }
  .sp1024 {
    display: block;
  }
}
@media (max-width: 1440px) and (max-width: 1024px) and (max-width: 840px) {
  .pc840 {
    display: none !important;
  }
  .sp840 {
    display: block;
  }
}
@media (max-width: 1440px) and (max-width: 1024px) and (max-width: 840px) and (max-width: 520px) {
  .pc520 {
    display: none !important;
  }
  .sp520 {
    display: block;
  }
}
@media (max-width: 1440px) and (max-width: 1024px) and (max-width: 840px) and (max-width: 520px) and (max-width: 375px) {
  .pc375 {
    display: none !important;
  }
  .sp375 {
    display: block;
  }
}
/* --------- */
/* ----------------------------------------------------------------------
クラス名設定
---------------------------------------------------------------------- */
.inner {
  max-width: 153.3rem;
  width: 86%;
  margin: 0 auto;
}

.maxnone {
  max-width: none;
  width: 100%;
}

/* 初期状態（非表示） */
.fuwa {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fuwa.is-visible {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻す */
}

.fade-in {
  opacity: 0;
  visibility: hidden;
}
.fade-in.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 2s;
}

/* ----------------------------------------------------------------------
コモンパーツ
---------------------------------------------------------------------- */
section, .inner {
  position: relative;
}

/* バナー */
.bnr-block {
  background-color: #fff;
  padding: 0.7em;
  position: fixed;
  inset: auto 1.2% 2.4% auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.09em;
  font-weight: 400;
  gap: 0.7em;
  z-index: 777;
  transition: 0.3s;
}
@media screen and (max-width: 1024px) {
  .bnr-block {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 1024px) and (max-width: 520px) {
  .bnr-block {
    font-size: 1rem;
    inset: auto 2% 1.4% auto;
  }
}
.bnr-block .img-box {
  width: 12.6em;
}
.bnr-block .img-box img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 520px) {
  .bnr-block .img-box {
    width: 10em;
  }
}
.bnr-block .txt-box .logo-box {
  width: 6.3em;
  margin-bottom: 0.2em;
}
.bnr-block .txt-box .tel {
  font-size: 125%;
}
.bnr-block .txt-box .time {
  font-size: 83.33%;
  margin-bottom: 0.9em;
}
.bnr-block .txt-box .contact {
  padding: 0.5em 1.2em;
  border: 1px solid #9B6661;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  gap: 0.3em;
  color: #9B6661;
}
.bnr-block .txt-box .contact span {
  display: block;
  width: 1em;
  filter: brightness(0) saturate(100%) invert(44%) sepia(35%) saturate(454%) hue-rotate(317deg) brightness(91%) contrast(88%);
}
.bnr-block.is-visible {
  transform: translateX(10px);
  opacity: 0;
  pointer-events: none;
}

/* flow */
#flow {
  background-color: #313131;
  height: 450vh;
}
#flow .subttl {
  position: sticky;
  inset: 4em 0 auto 0;
  margin: 0 auto;
  color: #fff;
  padding-top: 3em;
  width: fit-content;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.09em;
  font-weight: 400;
}
@media screen and (max-width: 520px) {
  #flow .subttl {
    font-size: 1.4rem;
  }
}
#flow .subttl:before {
  content: "";
  display: block;
  width: 1px;
  height: 8em;
  background-color: #fff;
  position: absolute;
  inset: auto 0 1.1em 0;
  margin: auto;
}
#flow .inner {
  position: sticky;
  top: 4rem;
  height: 100vh;
  color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  row-gap: 5rem;
}
@media screen and (max-width: 520px) {
  #flow .inner {
    padding-top: 9rem;
  }
}
#flow .inner .txt-block {
  width: 49%;
  height: 100%;
  position: relative;
}
@media screen and (max-width: 840px) {
  #flow .inner .txt-block {
    width: 100%;
    height: 32%;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #flow .inner .txt-block {
    height: 47%;
  }
}
#flow .inner .txt-block .txt-box {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1.8666666667;
  letter-spacing: 0.3em;
  font-weight: 400;
}
@media screen and (max-width: 1024px) {
  #flow .inner .txt-block .txt-box {
    font-size: 1.1rem;
  }
}
#flow .inner .txt-block .txt-box.active {
  opacity: 1;
  pointer-events: auto;
}
#flow .inner .txt-block .txt-box .number {
  font-size: 76%;
  letter-spacing: 0.23em;
  width: fit-content;
  padding: 1em 1em 1em 1.2em;
  margin-bottom: 3em;
  background-image: url(../img/top/circle.svg);
  background-size: 100%;
  background-position: center;
}
#flow .inner .txt-block .txt-box > h4 {
  font-size: 113.33%;
  margin-bottom: 2em;
}
#flow .inner .txt-block .txt-box .txt {
  min-height: 12em;
}
#flow .inner .txt-block .txt-box .cmt {
  font-size: 80%;
  opacity: 0.8;
  margin-top: 2em;
}
#flow .inner .slide-block {
  width: 49%;
  height: 62%;
  position: relative;
}
@media screen and (max-width: 840px) {
  #flow .inner .slide-block {
    width: 100%;
    height: 30%;
  }
}
#flow .inner .slide-block .slide-box {
  position: absolute;
  width: 50vw;
  height: 100%;
  overflow: hidden;
}
@media screen and (max-width: 840px) {
  #flow .inner .slide-block .slide-box {
    width: 97vw;
  }
}
#flow .inner .slide-block .slide-box .flow-slide {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#flow .inner .slide-block .slide-box .flow-slide * {
  height: 100%;
}
#flow .inner .slide-block .slide-box .flow-slide .slick-slide {
  margin-right: 3rem;
}

/* ----------------------------------------------------------------------
ヘッダー
---------------------------------------------------------------------- */
header {
  width: 100%;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 999;
  /* 子ページの時 */
}
header .main-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  font-size: 1.7rem;
  line-height: 1.5;
  letter-spacing: 0.09em;
  font-weight: 400;
  padding: 0.4em 1.6em;
  color: #fff;
  background-color: transparent;
  transition: 0.3s;
  position: relative;
  z-index: 999;
}
@media screen and (max-width: 520px) {
  header .main-header {
    padding: 1.1em 1.6em;
  }
}
header .main-header .logo-box {
  display: block;
  width: 13%;
  max-width: 15.6rem;
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 520px) {
  header .main-header .logo-box {
    opacity: 1;
    pointer-events: auto;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7459%) hue-rotate(313deg) brightness(100%) contrast(109%);
    width: 28%;
  }
}
header .main-header .menu-box {
  max-width: 78%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  gap: 1.1em;
  position: relative;
}
header .main-header .menu-box .menu-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  gap: 1em;
  position: relative;
}
header .main-header .menu-box .menu-list .menu-item {
  width: fit-content;
}
header .main-header .menu-box .menu-list .menu-item a {
  padding: 0.2em 0.4em;
}
header .main-header .menu-box .menu-list .menu-abs {
  font-size: 70.5%;
  position: absolute;
  inset: calc(100% + 0.5em) 0 auto auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  gap: 1em;
}
header .main-header .nav-btn {
  width: 3em;
  aspect-ratio: 45/12;
  position: relative;
}
header .main-header .nav-btn span {
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  right: 0;
  transition: 0.3s;
}
header .main-header .nav-btn span:nth-child(1) {
  top: 0;
  transform-origin: top left;
}
header .main-header .nav-btn span:nth-child(2) {
  bottom: 0;
  width: 70%;
  transform-origin: bottom left;
}
header .main-header .nav-btn.active span {
  width: 110%;
  background-color: #313131;
}
header .main-header .nav-btn.active span:nth-child(1) {
  transform: rotate(12deg);
}
header .main-header .nav-btn.active span:nth-child(2) {
  transform: rotate(-12deg);
}
header .main-header .abs-txt {
  position: absolute;
  inset: 2em auto auto 2.8em;
  font-size: 1.2rem;
  line-height: 1.24;
  letter-spacing: 0.095em;
  font-weight: 400;
  width: 39%;
  max-width: 55em;
}
@media screen and (max-width: 1024px) {
  header .main-header .abs-txt {
    font-size: 1rem;
  }
}
header .main-header.is-visible {
  background-color: #fff;
  color: #313131;
  padding: 1.1em 1.6em;
}
header .main-header.is-visible .logo-box {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}
header .main-header.is-visible .abs-txt {
  display: none;
}
header .main-header.is-visible .nav-btn span {
  background-color: #313131;
}
header.dark .main-header {
  background-color: #fff;
  color: #313131;
  padding: 1.1em 1.6em;
}
header.dark .main-header .logo-box {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}
header.dark .main-header .nav-btn span {
  background-color: #313131;
}
header.dark .main-header .abs-txt {
  display: none;
}

/* ドロワー */
.nav-main {
  width: 100vw;
  height: 100vh;
  max-width: 39rem;
  position: fixed;
  inset: 0 -2% auto auto;
  background-color: #fff;
  padding: 6.5em 0;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.09em;
  font-weight: 400;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  overflow: auto;
  transition: 0.5s;
  opacity: 0;
  pointer-events: none;
  z-index: 888;
}
@media screen and (max-width: 1024px) {
  .nav-main {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 1024px) and (max-width: 520px) {
  .nav-main {
    font-size: 1.4rem;
  }
}
.nav-main .inner {
  width: 86%;
}
.nav-main .inner .logo-box {
  display: block;
  width: 8em;
  margin-bottom: 2em;
}
.nav-main .inner .m-nav-list .m-nav-item {
  margin-bottom: 1em;
}
.nav-main .inner .m-nav-list .m-nav-item a {
  display: block;
  width: fit-content;
  padding: 0.5em 1em;
  position: relative;
}
.nav-main .inner .m-nav-list .m-nav-item a:before {
  content: "";
  display: block;
  position: absolute;
  inset: 50% auto auto 0;
  transform: translateY(-50%);
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background-color: #9B6661;
  opacity: 0.4;
  transition: 0.3s;
}
.nav-main .inner .m-nav-list .m-nav-item a:hover {
  opacity: 1;
}
.nav-main .inner .m-nav-list .m-nav-item a:hover:before {
  opacity: 1;
}
.nav-main .inner .m-nav-list .insta {
  display: block;
  width: fit-content;
  padding: 0.5em 2em 0.5em 0;
  position: relative;
}
.nav-main .inner .m-nav-list .insta:before {
  content: "";
  display: block;
  position: absolute;
  inset: 55% 0 auto auto;
  transform: translateY(-50%);
  background-image: url(../img/common/insta.svg);
  width: 1em;
  height: 1em;
  background-size: cover;
}
.nav-main .inner .m-nav-list .bnr-box {
  background-color: #fff;
  padding: 0.7em;
  margin-top: 4em;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.09em;
  font-weight: 400;
  gap: 0.7em;
  z-index: 999;
  transition: 0.3s;
}
@media screen and (max-width: 520px) {
  .nav-main .inner .m-nav-list .bnr-box {
    font-size: 1.2rem;
    inset: auto 2% 1.4% auto;
  }
}
.nav-main .inner .m-nav-list .bnr-box .img-box {
  width: 12.6em;
}
.nav-main .inner .m-nav-list .bnr-box .img-box img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nav-main .inner .m-nav-list .bnr-box .txt-box .logo-box {
  width: 6.3em;
  margin-bottom: 0.2em;
}
.nav-main .inner .m-nav-list .bnr-box .txt-box .tel {
  font-size: 125%;
}
.nav-main .inner .m-nav-list .bnr-box .txt-box .time {
  font-size: 83.33%;
  margin-bottom: 0.9em;
}
.nav-main .inner .m-nav-list .bnr-box .txt-box .contact {
  padding: 0.5em 1.2em;
  border: 1px solid #9B6661;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  gap: 0.3em;
  color: #9B6661;
}
.nav-main .inner .m-nav-list .bnr-box .txt-box .contact span {
  display: block;
  width: 1em;
  filter: brightness(0) saturate(100%) invert(44%) sepia(35%) saturate(454%) hue-rotate(317deg) brightness(91%) contrast(88%);
}
.nav-main.show {
  right: 0;
  opacity: 1;
  pointer-events: auto;
}

/* ----------------------------------------------------------------------
フッター
---------------------------------------------------------------------- */
/* ----ときを結び、想いをほどく---- */
#f-ttl {
  max-height: 95rem;
  overflow: hidden;
}
@media screen and (max-width: 520px) {
  #f-ttl {
    height: 30rem;
  }
}
#f-ttl img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 520px) {
  #f-ttl img {
    object-position: 31%;
  }
}
#f-ttl .abs-ttl {
  position: absolute;
  width: 57.8%;
  inset: 50% 0 auto auto;
  transform: translatey(-50%);
  color: #fff;
  font-size: 1.7rem;
  line-height: 2;
  letter-spacing: 0.09em;
  font-weight: 400;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  flex-direction: column;
}
@media screen and (max-width: 520px) {
  #f-ttl .abs-ttl {
    font-size: 1.2rem;
    width: 50%;
  }
}
#f-ttl .abs-ttl > h2 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  margin: 0 auto 1.5em;
  letter-spacing: 0.3em;
}
#f-ttl .abs-ttl > p {
  font-size: 66.66%;
}

/* ----loopslide---- */
#f-loop {
  margin-top: 1rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  gap: 1rem;
}
@media screen and (max-width: 520px) {
  #f-loop {
    margin-top: 0.5rem;
    gap: 0.5rem;
  }
}
#f-loop .f-loop-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  gap: 1rem;
  animation: scroll-left 40s linear infinite;
}
@media screen and (max-width: 520px) {
  #f-loop .f-loop-list {
    gap: 0.5rem;
  }
}
#f-loop .f-loop-list .f-loop-item {
  width: 70vw;
  max-width: 111.5rem;
}
#f-loop .f-loop-list .f-loop-item img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* ----footer---- */
footer {
  padding: 20rem 0;
}
@media screen and (max-width: 520px) {
  footer {
    padding: 21rem 0 9rem;
  }
}
footer .inner {
  font-size: 1.5rem;
  line-height: 1.75;
  letter-spacing: 0.09em;
  font-weight: 400;
}
@media screen and (max-width: 840px) {
  footer .inner {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  footer .inner {
    font-size: 1.2rem;
  }
}
footer .inner .over {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  padding-bottom: 10em;
  position: relative;
  border-bottom: 1px solid #313131;
  margin-bottom: 1em;
  row-gap: 3em;
}
footer .inner .over .logo-box {
  width: 10%;
  max-width: 15.1rem;
  margin-right: 12rem;
}
@media screen and (max-width: 840px) {
  footer .inner .over .logo-box {
    margin-right: 6rem;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  footer .inner .over .logo-box {
    margin-right: 0;
    width: 11rem;
  }
}
footer .inner .over .f-nav-list {
  font-size: 133%;
  line-height: 1;
}
footer .inner .over .f-nav-list .f-nav-item {
  margin-bottom: 1em;
}
footer .inner .over .f-nav-list .f-nav-item a {
  display: block;
  width: fit-content;
  padding: 0.5em 1em;
  position: relative;
}
footer .inner .over .f-nav-list .f-nav-item a:before {
  content: "";
  display: block;
  position: absolute;
  inset: 50% auto auto 0;
  transform: translateY(-50%);
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background-color: #9B6661;
  opacity: 0;
  transition: 0.3s;
}
footer .inner .over .f-nav-list .f-nav-item a:hover {
  opacity: 1;
}
footer .inner .over .f-nav-list .f-nav-item a:hover:before {
  opacity: 1;
}
footer .inner .over .f-nav-list .insta {
  display: block;
  width: fit-content;
  padding: 0.5em 2em 0.5em 1em;
  position: relative;
}
footer .inner .over .f-nav-list .insta:before {
  content: "";
  display: block;
  position: absolute;
  inset: 55% 0 auto auto;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  background-image: url(../img/common/insta.svg);
  background-size: cover;
}
footer .inner .over .abs-pp {
  display: block;
  font-size: 80%;
  position: absolute;
  inset: auto 0 1.7em auto;
}
footer .inner .over .abs-contact {
  position: absolute;
  width: 30%;
  max-width: 30rem;
  inset: -15% 0 auto auto;
}
@media screen and (max-width: 520px) {
  footer .inner .over .abs-contact {
    width: 39%;
    inset: -16% -4.1% auto auto;
  }
}
footer .inner .over .abs-contact .img-box {
  width: 100%;
}
footer .inner .over .abs-contact .form-btn {
  font-size: 133.33%;
  display: block;
  width: fit-content;
  margin-left: auto;
  padding: 0.1em 4em 0.1em 1em;
  position: relative;
}
@media screen and (max-width: 520px) {
  footer .inner .over .abs-contact .form-btn {
    padding: 0.1em 4em 0.1em 0em;
  }
}
footer .inner .over .abs-contact .form-btn:before {
  content: "";
  display: block;
  position: absolute;
  inset: 50% 0 auto auto;
  transform: translateY(-50%);
  width: 3em;
  aspect-ratio: 75/20;
  background-image: url(../img/common/arrow-btn.svg);
  filter: brightness(0) saturate(100%) invert(17%) sepia(4%) saturate(16%) hue-rotate(334deg) brightness(87%) contrast(87%);
  background-size: cover;
}
footer .inner .over .abs-contact .tel {
  display: block;
  width: fit-content;
  margin-left: auto;
  padding: 0.1em 0 0.3em;
}
footer .inner .over .abs-contact .tel:hover {
  color: #9B6661;
  opacity: 1;
}
footer .inner .under {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  row-gap: 1em;
}
footer .inner .under .addr-box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  row-gap: 1em;
}
footer .inner .under .addr-box > p {
  margin-right: 1em;
}
footer .inner .under .addr-box > a {
  padding: 0 2em 0 0.5em;
  background-color: #9B6661;
  color: #fff;
  display: block;
  position: relative;
}
footer .inner .under .addr-box > a:before {
  content: "";
  display: block;
  position: absolute;
  inset: 50% 0.3em auto auto;
  transform: translateY(-50%);
  width: 1em;
  aspect-ratio: 41/18;
  background-image: url(../img/common/arrow.svg);
  background-size: cover;
}
footer .inner .under .copyright {
  font-size: 106%;
}
footer .inner .seo-txt {
  font-size: 80%;
  line-height: 2.25;
  margin-top: 4em;
}