[class*=ttl-],
.ttl {
  line-height: 1.4;
  letter-spacing: .05em;
  position: relative;
  z-index: 1
}

.ttl-sec {
  font-size: min(5.8vw, 32px)
}

.ttl-sec.s {
  font-size: min(5vw, 24px)
}

.ttl-sec::after {
  display: block;
  content: attr(data-en);
  padding-top: .1em;
  font-family: "Unna", serif;
  font-weight: 400;
  letter-spacing: .05em;
  color: #afdcd3;
  font-size: .625em;
  letter-spacing: .15em
}

.ttl-sec:not(.center)::after {
  padding-left: 3.25em
}

.ttl-sec.dark::after {
  color: #00a587
}

.ttl-def {
  width: fit-content;
  margin: 0 auto 1em;
  padding-left: 1em;
  padding-top: .5em;
  text-align: center;
  font-size: clamp(1.4em, 3.6vw, 32px)
}

.ttl-def::before {
  content: "";
  display: block;
  position: absolute;
  width: 3.5em;
  aspect-ratio: 1;
  left: -2em;
  top: 0;
  background: url(../img/common/logo-mark.png) no-repeat 0 0/contain
}

.ttl-def::after {
  display: block;
  content: attr(data-en);
  font-family: "Unna", serif;
  font-weight: 400;
  letter-spacing: .05em;
  color: #00a587;
  font-size: .6em;
  letter-spacing: .15em
}

.ttl-b {
  font-size: clamp(1.2em, 2.7vw, 24px)
}

.ttl-bb {
  margin-bottom: 1em;
  padding-bottom: .6em;
  font-size: clamp(1.4em, 3.6vw, 32px);
  border-bottom: 1px solid #b1a99f
}

.ttl-bb.b0 {
  padding-bottom: 0;
  border-bottom: 0
}

.ttl-b2 {
  margin-bottom: 1em;
  padding-bottom: .5em;
  font-size: clamp(1.2em, 2vw, 18px);
  border-bottom: 1px solid #b1a99f
}

.ttl-b2::before {
  content: "";
  display: block;
  position: absolute;
  width: 4em;
  height: 2px;
  bottom: -1px;
  left: 0;
  background: #00a587
}

.ttl-bt {
  position: relative;
  margin-bottom: 1em;
  padding-top: .7em;
  text-align: center;
  font-size: clamp(1.25em, 2.2vw, 20px)
}

.ttl-bt::before {
  content: "";
  display: block;
  position: absolute;
  width: 1.8em;
  height: 2px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #5fbdac
}

.ttl-fill {
  padding: .8em;
  font-size: clamp(1.3em, 2.2vw, 20px);
  background-color: #e4e0d9
}

.ttl-fill.sub {
  padding-block: .4em;
  font-size: clamp(1.2em, 2vw, 18px)
}

.ttl-num {
  counter-increment: num;
  margin: 1.5em 0 .7em;
  padding-bottom: .3em;
  font-size: min(4.2vw, 18px);
  border-bottom: 2px solid #f2f2f2
}

.ttl-num::before {
  content: counter(num);
  display: inline-block;
  margin-right: .4em;
  font-size: 1.3em;
  color: #00a587
}

.ttl-sub {
  margin-bottom: .8em;
  padding-left: .6em;
  font-size: clamp(1.15em, 2vw, 18px);
  border-left: 4px solid #00a587
}

.ttl-col {
  margin-bottom: .8em;
  font-size: clamp(1.15em, 2vw, 18px);
  color: #00a587
}

.ttl-position {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center
}

.ttl-position .posi {
  margin-block: 0;
  font-size: .7em
}

[class*=btn-] {
  position: relative;
  display: inline-block;
  text-decoration: none;
  line-height: 1.5
}

[class*=btn-]::before,
[class*=btn-]::after {
  transition: all .3s
}

.btn-def {
  min-width: 200px;
  text-align: center;
  padding: .4em 2.5em .4em 1.5em;
  font-size: .9735em;
  color: #fff;
  background-color: #5a4b40;
  border-radius: 2em
}

.btn-def::before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 1.2em;
  transform: translateY(-50%);
  width: .65em;
  height: .65em;
  background: url(../img/common/arrow-wht.svg) no-repeat center/contain
}

.btn-def.bgr {
  background-color: #00a587
}

.btn-def.high {
  padding-block: .8em
}

@media screen and (min-width: 960px) {
  .btn-def:hover {
    color: #fff;
    background-color: #7e6d55
  }

  .btn-def.bgr:hover {
    background-color: #5fbdac
  }
}

@media screen and (max-width: 599px) {
  .btn-def {
    min-width: 170px
  }
}

.btn-box {
  width: fit-content;
  margin: clamp(1.5em, 5vw, 45px) auto;
  text-align: center
}

.btn-box .btn-def {
  min-width: 250px
}

@media screen and (min-width: 600px) {
  .btn-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.5em
  }
}

@media screen and (max-width: 599px) {
  .btn-box .btn-def+.btn-def {
    margin-top: 1em
  }
}

.list-btn {
  display: grid;
  gap: 10px min(2.5vw, 12px)
}

.list-btn.col2 {
  grid-template-columns: repeat(2, 1fr)
}

.list-btn.col2 li.wide {
  grid-column: span 2
}

.list-btn>li>a {
  position: relative;
  display: block;
  height: 100%;
  padding-block: .5em;
  text-align: center;
  background-color: #fff;
  border: 2px solid #00a587;
  border-radius: 2em
}

.list-btn>li>a::after {
  transition: all .3s;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: .5em;
  transform: translateY(-51%);
  width: 1.625em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #00a587 url(../img/common/arrow-wht.svg) no-repeat center/56% auto
}

@media screen and (max-width: 959px) {
  .list-btn>li>a {
    padding-right: 1.5em
  }
}

.list-btn>li>a:hover::after {
  right: .2em
}

.list-square>li {
  padding-block: .1em;
  padding-left: .9em;
  position: relative
}

.list-square>li::before {
  content: "";
  display: block;
  position: absolute;
  top: .75em;
  left: 0;
  width: .5em;
  height: .5em;
  background-color: #00a587
}

.list-square.w500>li {
  padding-block: .2em;
  padding-left: 1.2em
}

.list-square.w500>li::before {
  top: .7em;
  width: .75em;
  height: .75em
}

.list-square.flex {
  gap: .3em 1.5em
}

@media screen and (max-width: 599px) {
  .list-square.flex {
    display: block
  }
}

.list-disc>li {
  margin-bottom: .2em;
  padding-block: .1em;
  padding-left: 1em;
  position: relative
}

.list-disc>li::before {
  content: "";
  display: block;
  position: absolute;
  top: .75em;
  left: .1em;
  width: 6px;
  height: 6px;
  background-color: #00a587;
  border-radius: 50%
}

.list-disc.brz>li::before {
  background-color: #7e6d55
}

.list-num {
  counter-reset: num;
  margin-left: 0;
  padding-left: 0
}

.list-num>li {
  counter-increment: num;
  list-style-type: none;
  margin-bottom: .4em;
  padding-left: 1.6em;
  position: relative;
  line-height: 1.5
}

.list-num>li::before {
  content: counter(num);
  position: absolute;
  top: .1em;
  left: .2em;
  display: inline-block;
  font-family: "Unna", serif;
  font-weight: 400;
  letter-spacing: .05em;
  font-size: 1.6em;
  line-height: 1;
  color: #00a587
}

.list-rnum {
  counter-reset: rnum;
  margin-left: 0;
  padding-left: 0
}

.list-rnum>li {
  counter-increment: rnum;
  list-style-type: none;
  padding-left: 2.4em;
  position: relative
}

.list-rnum>li::before {
  content: counter(rnum);
  position: absolute;
  top: .1em;
  left: 0;
  font-family: "Unna", serif;
  font-weight: 400;
  letter-spacing: .05em;
  display: inline-block;
  width: 1.6em;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  background-color: #00a587;
  border-radius: 50%
}

.list-rnum2 {
  counter-reset: rnum2;
  list-style: none;
  padding-left: 1.3em
}

.list-rnum2>li::before {
  counter-increment: rnum;
  margin-inline: -1.3em .3em
}

.list-rnum2>li:nth-child(1)::before {
  content: "\2460"
}

.list-rnum2>li:nth-child(2)::before {
  content: "\2461"
}

.list-rnum2>li:nth-child(3)::before {
  content: "\2462"
}

.list-rnum2>li:nth-child(4)::before {
  content: "\2463"
}

.list-rnum2>li:nth-child(5)::before {
  content: "\2464"
}

.list-rnum2>li:nth-child(6)::before {
  content: "\2465"
}

.list-rnum2>li:nth-child(7)::before {
  content: "\2466"
}

.list-rnum2>li:nth-child(8)::before {
  content: "\2467"
}

.list-rnum2>li:nth-child(9)::before {
  content: "\2468"
}

.list-rnum2>li:nth-child(10)::before {
  content: "\2469"
}

label {
  display: inline-block
}

input.t {
  width: 15%
}

input.s {
  width: 50%
}

@media screen and (max-width: 599px) {
  input.s {
    width: 60%
  }
}

input.m {
  width: 70%
}

@media screen and (max-width: 599px) {
  input.m {
    width: 99%
  }
}

input.l {
  width: 99%
}

textarea {
  width: 99%
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%
}

.submit {
  margin: 2em 1em;
  text-align: center
}

.submit.confirm>input[value=戻る] {
  background-color: #999
}

@media screen and (min-width: 600px) {
  .submit.confirm {
    display: flex;
    justify-content: space-between
  }

  .submit.confirm>input[value=戻る] {
    order: -1
  }
}

@media screen and (max-width: 599px) {
  .submit.confirm>input {
    width: 100%;
    margin-bottom: 1em
  }
}

select {
  max-width: 100%;
  padding: .6em .8em;
  font-size: 15px;
  color: #1a1a1a;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px
}

select option {
  color: #1a1a1a
}

select option[value=""] {
  color: #ddd
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input textarea {
  padding: .6em .8em;
  font-size: 1em;
  color: #1a1a1a;
  font-family: inherit;
  border-radius: 3px;
  border: 1px solid #ddd
}

input[type=radio],
input[type=checkbox] {
  margin-right: 2px
}

.row label {
  display: block;
  padding: .15em
}

input[type=submit],
input[type=button],
form button {
  box-sizing: border-box;
  appearance: button;
  border: none;
  border-radius: 0;
  cursor: pointer;
  min-width: 260px;
  padding: 1em;
  font-family: inherit;
  color: #fff;
  font-size: 1.1em;
  letter-spacing: .1em;
  background-color: #00a587
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none
}

input[type=submit]::focus,
input[type=button]::focus {
  outline-offset: -2px
}

.form-area dt {
  padding-bottom: .3em;
  position: relative
}

.form-area dt::after {
  content: "";
  display: block;
  position: absolute;
  top: 1.9em;
  right: 1.5em;
  content: "任意";
  display: inline-block;
  padding: .3em .5em;
  font-size: 12px;
  color: #fff;
  line-height: 1;
  background-color: #999;
  border-radius: 3px
}

@media screen and (max-width: 599px) {
  .form-area dt::after {
    top: .8em
  }
}

.form-area dt.required::after {
  content: "必須";
  background-color: #ef3636
}

.form-area.confirm dt::after {
  display: none
}

.form-notice {
  margin-bottom: 6%;
  padding: .75em 1.5em;
  border-radius: 10px
}

.form-complete {
  max-width: 880px
}

.form-complete .contact-box {
  margin-inline: auto
}

@media screen and (max-width: 599px) {
  .form-area dt {
    padding: .5em
  }
}

.login .input,
.pass .input {
  width: 100%
}

.done-msg {
  max-width: 640px;
  margin: 0 auto 1em
}

@media screen and (min-width: 600px) {
  .done-msg {
    text-align: center
  }
}

.error-msg {
  max-width: 640px;
  margin: 0 auto 1em;
  padding: 1em;
  background-color: #f2f2f2
}

.email-msg {
  padding-block: min(4%, 30px)
}

html.fixed {
  height: 100vh;
  overflow: hidden
}

#header {
  z-index: 1001;
  position: relative
}

#header .overlay {
  display: none
}

#header a {
  display: block
}

#header #gnav .smenu {
  display: none
}

#header .menu-button {
  display: block;
  position: fixed;
  top: 0;
  right: .5em;
  z-index: 999;
  text-align: center;
  font-family: "Unna", serif;
  font-weight: 400;
  letter-spacing: .05em;
  color: #fff;
  background: #00a587;
  width: 48px;
  height: 48px;
  border-radius: 0 0 2em 2em;
  cursor: pointer
}

#header .menu-button .h_menu {
  position: relative;
  margin-inline: .8em;
  height: 100%
}

#header .menu-button .h_menu span {
  display: block;
  position: absolute;
  width: 100%;
  right: 0;
  height: 1px;
  background-color: #fff;
  transition: all .5s
}

#header .menu-button .h_menu span:nth-of-type(1) {
  top: 36%
}

#header .menu-button .h_menu span:nth-of-type(2) {
  top: 46%
}

#header .menu-button .h_menu span:nth-of-type(3) {
  top: 56%
}

#header .menu-button.active span:nth-of-type(1) {
  transform: translateY(3px) rotate(-45deg)
}

#header .menu-button.active span:nth-of-type(2) {
  transform: translateY(-2px) rotate(45deg)
}

#header .menu-button.active span:nth-of-type(3) {
  opacity: 0
}

@media screen and (min-width: 1170px) {
  #header {
    padding-top: 40px;
    padding-bottom: 30px
  }

  #header .sitename {
    position: absolute;
    top: 48px;
    left: 4vw
  }

  #header .sitename img {
    width: 162px
  }

  #header #gnav .sitename {
    display: none
  }

  #header .gmenu {
    margin-inline: auto 3.3vw;
    padding-left: 1em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 2em;
    width: fit-content;
    border-bottom: 1px solid hsla(0, 0%, 100%, .3)
  }

  #header .gmenu>li {
    padding-bottom: 14px
  }

  #header .gmenu>li a:hover {
    color: #00a587
  }

  #header .gmenu>li.contact>a {
    padding: .3em 1.5em;
    color: #fff;
    background-color: #5a4b40;
    border-radius: 2em
  }

  #header .gmenu>li.contact>a:hover {
    background-color: #7e6d55
  }

  #header .gmenu>li.privacy {
    display: none
  }

  #header .menu-button {
    display: none
  }
}

@media screen and (max-width: 1169px) {
  #header {
    height: 70px
  }

  #header .sitename {
    position: absolute;
    top: 14px;
    left: 4%
  }

  #header .sitename img {
    width: 110px
  }

  #header #gnav {
    visibility: hidden;
    opacity: 0;
    transition: all ease .3s;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 300;
    background: #00a587;
    padding-top: 2.5em
  }

  #header #gnav.active {
    visibility: visible;
    opacity: 1
  }

  #header #gnav .gmenu {
    padding: 3em 2em
  }

  #header #gnav .gmenu a {
    position: relative;
    padding: .5em 1.5em .5em 0;
    color: #fff;
    border-bottom: 1px dotted #afdcd3
  }

  #header #gnav .gmenu a::before {
    content: "";
    display: block;
    position: absolute;
    width: .6em;
    height: .6em;
    right: 0;
    top: 1em;
    background: url(../img/common/arrow-wht.svg) no-repeat center/100%
  }

  #header #gnav .gmenu a.g-toggle::before {
    transform: rotate(90deg)
  }

  #header #gnav .gmenu .smenu {
    background: #00896f
  }

  #header #gnav .gmenu .smenu a {
    padding-inline: 1em 2em
  }

  #header #gnav .gmenu .smenu a::before {
    right: 1.5em
  }
}

#footer {
  padding-block: clamp(2em, 6.7vw, 60px) clamp(1.5em, 4.4vw, 40px);
  background: url(../img/common/bg-footer.jpg) no-repeat center/cover
}

#footer .sitename {
  width: clamp(8em, 18vw, 162px);
  margin-inline: auto
}

#footer .gmenu {
  padding-block: clamp(2em, 7.8vw, 70px)
}

#footer .gmenu a {
  display: inline-block;
  padding-block: .2em;
  font-size: 1.15em;
  color: #fff
}

#footer .gmenu .smenu {
  font-size: .8em
}

#footer .gmenu .smenu a {
  position: relative;
  padding-left: 1em
}

#footer .gmenu .smenu a::before {
  content: "";
  display: block;
  position: absolute;
  width: 4px;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #b1a99f
}

#footer .copyright {
  margin: 0;
  font-family: "Unna", serif;
  font-weight: 400;
  letter-spacing: .05em;
  font-size: .95em;
  text-align: center;
  color: #999288;
  letter-spacing: .05em
}

#footer .copyright a {
  color: #707776
}

@media screen and (min-width: 600px) {
  #footer .gmenu {
    columns: 3
  }

  #footer .gmenu>li:first-child {
    padding-left: 4em
  }

  #footer .gmenu .break {
    break-before: column
  }
}

@media screen and (min-width: 960px) {
  #footer .inner {
    max-width: 900px
  }
}

@media screen and (max-width: 959px) {
  #footer .gmenu a {
    font-size: 1.05em
  }
}

@media screen and (max-width: 599px) {
  #footer .gmenu {
    padding-inline: 2em
  }

  #footer .gmenu>li {
    margin-bottom: .5em
  }

  #footer .gmenu .g-toggle {
    position: relative;
    padding-right: 2em
  }

  #footer .gmenu .g-toggle::before {
    content: "";
    display: block;
    position: absolute;
    width: .6em;
    height: .6em;
    right: 0;
    top: .7em;
    background: url(../img/common/arrow-wht.svg) no-repeat center/100%;
    transform: rotate(90deg)
  }

  #footer .gmenu .smenu {
    display: none
  }
}

body {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  line-height: 1.75;
  font-size: 16px;
  letter-spacing: .04em;
  color: #1a1a1a;
  background: #fff
}

@media screen and (max-width: 959px) {
  body {
    font-size: 15px
  }
}

@media screen and (max-width: 599px) {
  body {
    font-size: 14px
  }
}

::selection {
  background: #afdcd3
}

#wrapper {
  overflow: clip
}

.inner,
*[class*=inner-] {
  margin: auto;
  position: relative
}

.inner {
  max-width: 1200px
}

@media screen and (max-width: 1280px) {
  .inner {
    width: 92%
  }
}

.inner-fw {
  width: 92%
}

.inner-wide {
  max-width: 1350px
}

@media screen and (max-width: 1430px) {
  .inner-wide {
    width: 92%
  }
}

.inner-narrow {
  max-width: 1080px
}

@media screen and (max-width: 1160px) {
  .inner-narrow {
    width: 92%
  }
}

.inner-narrow.s {
  max-width: 800px
}

.sec-btm {
  padding-bottom: min(12%, 95px)
}

.sec-box {
  padding-block: clamp(3em, 7vw, 70px)
}

.bg-wht {
  background: #fff
}

.bg-gry {
  background: #f2f2f2
}

.bg-beg {
  background: #f7f6f4
}

.bg-gra {
  background: linear-gradient(45deg, #e6dccd 0%, #ecfefb 100%)
}

.bg-gra2 {
  background: linear-gradient(45deg, #a2927c 0%, #7b6a52 100%)
}

.bg-gra3 {
  background: linear-gradient(45deg, #e6dccd 0%, #d1c3b3 100%)
}

.bg-gra4 {
  background: linear-gradient(90deg, #fbf5ed 0%, #e3fcf8 100%)
}

.en {
  font-family: "Unna", serif;
  font-weight: 400;
  letter-spacing: .05em
}

.w500 {
  font-weight: 500
}

a {
  color: #1a1a1a;
  text-decoration: none
}

a:hover {
  color: #00a587
}

a.ul {
  color: #00a587;
  text-decoration: underline
}

a.disable {
  pointer-events: none
}

.c-red {
  color: #ef3636
}

.c-wht {
  color: #fff
}

.slick-slider {
  touch-action: auto
}

.w100 {
  width: 100%
}

.mw360 {
  max-width: 360px
}

.mt15 {
  margin-top: 1.5em
}

.mt0 {
  margin-top: 0
}

.mt1 {
  margin-top: 1em
}

.mt2 {
  margin-top: 2em
}

.mt3 {
  margin-top: 3em
}

.mb0 {
  margin-bottom: 0
}

.mb2 {
  margin-bottom: 2em
}

.ml1 {
  margin-left: 1em
}

.object-fit-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%)
}

@keyframes fade-zoom {
  0% {
    transform: scale(1)
  }

  100% {
    transform: scale(1.2)
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}