@charset "utf-8";

:root {
  --gold: #b99f72;
  --brown: #8a6f46;
  --red: #d77f5e;
  --black: #655957;
}

html, body, main, section, div, header, footer, h1, h2, h3, h4, p, strong, a, span, img, figure, ul, ol, li, dl, dt, dd, table, colgroup, col, thead, tbody, tr, th, td, details, summary, form, i, input, label, button, textarea {
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  color: var(--black);
  letter-spacing: 0.1rem;
}

html {
  font-size: 62.5%;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body {
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 1.05vw, 2.1rem);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  overflow-x: hidden;
  overflow-y: auto;
}

.mincho {
  font-family: "shippori-mincho", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.gotham {
  font-family: "gotham", sans-serif;
  font-weight: 400;
  font-style: normal;
}

br {
  line-height: 0;
}

img {
  border: none;
  line-height: 0;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

a {
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

ul, li {
  list-style: none;
}

.db, .pc {
  display: block;
}

.dn, .sp, .tab {
  display: none;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

iframe {
  border: 0;
  vertical-align: bottom;
}

.wfit {
  width: fit-content;
}

.icon {
  font-family: Font Awesome\ 6 Brands;
  font-weight: 400;
  font-size: 150%;
}

@font-face {
  font-display: block;
  font-family: Font Awesome\ 6 Brands;
  font-style: normal;
  font-weight: 400;
  src: url(https://storage.googleapis.com/production-os-assets/assets/fontawesome/1629704621943/6.4.2/webfonts/fa-brands-400.woff2) format("woff2"), url(https://storage.googleapis.com/production-os-assets/assets/fontawesome/1629704621943/6.4.2/webfonts/fa-brands-400.ttf) format("truetype");
}

.icon-instagram:before {
  content: "\f16d";
}
.icon-line:before {
  content: "\f3c0";
}

/*---------- upper -----------*/
.box {
  max-width: 156.0rem;
  padding-left: min(4.5vw, 9rem);
  padding-right: min(4.5vw, 9rem);
  margin: 0 auto;
  position: relative;
}

.m_box {
  max-width: 156.0rem;
  padding-left: min(13.5vw, 27rem);
  padding-right: min(13.5vw, 27rem);
  margin: 0 auto;
  position: relative;
}

.s_box {
  max-width: 156.0rem;
  padding-left: min(21vw, 42rem);
  padding-right: min(21vw, 42rem);
  margin: 0 auto;
  position: relative;
}

/*---------- margin,padding -----------*/
.mb10 {margin-bottom: clamp(0.5rem, 0.5vw, 1.0rem);}
.mb15 {margin-bottom: clamp(0.75rem, 0.75vw, 1.5rem);}
.mb30 {margin-bottom: clamp(1.5rem, 1.5vw, 3.0rem);}
.mb45 {margin-bottom: clamp(2.25rem, 2.25vw, 4.5rem);}
.mb60 {margin-bottom: clamp(3.0rem, 3.0vw, 6.0rem);}

.pb90 {padding-bottom: clamp(4.5rem, 4.5vw, 9.0rem);}
.pt90 {padding-top: clamp(4.5rem, 4.5vw, 9.0rem);}

h3 {
  line-height: 2;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.4;
}

.fs15 {font-size: clamp(1.2rem, 1.05vw, 1.5rem);}
.fs30 {font-size: clamp(2.1rem, 1.5vw, 3.0rem);}
.fs39 {font-size: clamp(2.4rem, 1.95vw, 3.9rem);}
.fs42 {font-size: clamp(2.7rem, 2.1vw, 4.2rem);}
.fs66 {font-size: clamp(3.0rem, 3.3vw, 6.6rem);}

small {font-size: 80%;}
.fs120p {font-size: 120%;}
.fw400, b.mincho {font-weight: 400;}

/*----- color -----*/
.brown {color: var(--brown);}
.gold {color: var(--gold);}
.red {color: var(--red);}
.white {color: #fff;}
.beige_bg {background: url(../img/common/bg.jpg) no-repeat top center;}

/*----- img -----*/
.c_img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.h_img {display: block;}
.h_img:hover {opacity: 0.8;}
.br6 {border-radius: 0.6rem;}
.br12 {border-radius: 1.2rem;}

/*----- column -----*/
.flex {display: flex;}

.sec {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.jcc {justify-content: center;}
.jcs {justify-content: space-between;}
.jce {justify-content: flex-end;}
.aic {align-items: center;}

/*----- header -----*/
header {
  width: 100%;
  padding: 3rem 0;
}

#h_logo, #f_logo {
  width: clamp(18.6rem, 18.6vw, 28.4rem);
}

#h_nav_wrap li a {
  display: flex;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  padding: clamp(0.6rem, 0.6vw, 1.2rem) clamp(0.75rem, 0.75vw, 1.5rem);
  font-size: clamp(1.5rem, 1.05vw, 2.1rem);
}


/*----- footer -----*/
footer {
  background: var(--black);
  padding: 2.4rem 0;
}

#f_logo {
  margin: 0;
}

footer li {
  margin: 0 1.5rem;
}

footer a {
  color: #fff;
}

#copyright {
  color: #fff;
  margin-top: min(1.5vw, 3.0rem);
  padding-top: min(1.5vw, 3.0rem);
  border-top: 1px solid #ffffff1a;
}

/*----- btn -----*/
.btn {
  background: var(--gold);
  color: #fff;
  text-decoration: none;
  padding: 0  clamp(3.0rem, 3.0vw, 6.0rem);
  height: min(5.4vw, 10.8rem);
  border-radius: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  position: relative;
  font-size: clamp(1.5rem, 1.5vw, 3.0rem);
}

.btn .icon, #h_nav_wrap .icon {
  color: #fff;
  margin-right: clamp(0.6rem, 0.6vw, 1.2rem);
}

.btn:hover {
  filter: brightness(1.1);
}

.btn:hover::after {
  background-position: 75% center;
}
input[type="button"] {
  background: none;
  color: #fff;
}

/*---------- form -----------*/
input, textarea {
  font-family: inherit;
  font-size: 100%;
}

input[type="button"] {
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  font-optical-sizing: auto;
}

input[type="text"], input[type="tel"], input[type="email"], textarea {
  -webkit-user-select: auto;
  font-optical-sizing: auto;
  font-size: min(1.65vw, 3.0rem);
  padding: min(0.81vw, 1.5rem);
  background: #fff;
  border-radius: min(0.6vw, 1.2rem);
  width: 100%;
  vertical-align: bottom;
  border: 1px solid #cccccc;
}

input:focus, textarea:focus {
  outline: 0.1rem solid var(--blue);
}

input[type=checkbox] {
  display: none;
}

.check01 {
  cursor: pointer;
  display: inline-block;
  padding: 0 0 0 min(3vw, 5rem);
  position: relative;
  width: fit-content;
}

.check01::before {
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 0.3rem;
  content: '';
  display: block;
  width: min(2.2vw, 4rem);
  height: min(2.2vw, 4rem);
  left: 0;
  position: absolute;
  top: calc(50% - min(1vw, 2rem));
}

.check01::after {
  content: '';
  display: block;
  width: min(0.64vw, 1.2rem);
  height: min(1.2vw, 2.2rem);
  border-right: min(0.22vw, 0.4rem) solid var(--gold);
  border-bottom: min(0.22vw, 0.4rem) solid var(--gold);
  position: absolute;
  top: calc(50% - min(0.64vw, 1.2rem));
  left: min(0.7vw, 1.3rem);
  transform: rotate(45deg) translate3d(0, 2px, 0) scale3d(.7, .7, 1);
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
  opacity: 0;
}

input[type=checkbox]:checked+.check01::after {
  transform: rotate(45deg) scale3d(1, 1, 1);
  opacity: 1;
}



/* slider */
.slider {
  opacity: 0;
  transition: 3s;
}
.slick-initialized {
  opacity: 1
}
.slick-slide {
  cursor: grab;
}
/* slick_arrow */
.slick-arrow {
  display: block;
  border: none;
  font-size: 0;
  position: absolute;
  z-index: 100;
  top: calc(50% - 2.1rem);
  width: 4.2rem;
  height: 4.2rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 2.1rem;
  box-shadow: 0.2rem 0.2rem 0.6rem #0000004d;
}
.slick-arrow:hover {
  opacity: 0.8;
}
.slick-prev {
  background: url(../img/voice/prev.webp) no-repeat;
  background-size: contain;
  left: 1.5rem;
}
.slick-next {
  background: url(../img/voice/next.webp) no-repeat;
  background-size: contain;
  right: 1.5rem;
}
/* slick_dots */
.slick-dots {
  margin: 1.5rem auto 3rem auto;
  width: fit-content;
  display: flex !important;
  justify-content: center;
}
.slick-dots li {
  height: 0.6rem;
  width: 4rem;
  border-radius: 0;
  margin: 0 0.25rem;
  cursor: pointer;
  background: #fbf8f3;
}
.slick-dots li button {
  visibility: hidden;
  height: 0.6rem;
  width: 4rem;
}
.slick-dots li.slick-active {
  background: var(--gold);
}

/* ===== PC balance (min-width:1025px) ===== */
@media screen and (min-width:1025px) {
  #h_nav_wrap li:last-child {
    padding-left: clamp(0.75rem, 0.75vw, 1.5rem);
  }
  #h_nav_wrap li a::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: var(--brown);
    transition: 0.3s;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #h_nav_wrap li a:hover::after {
    width: 100%;
  }
  #h_nav_wrap li:last-child a::after {
    width: 0%;
  }
  #h_nav_wrap li:last-child a {
    display: flex;
  }
  
  #h_nav_wrap li a.btn {
    padding: 0 min(3.0vw, 6.0rem);
    height: min(4.0vw, 8.0rem);
    line-height: min(4.0vw, 8.0rem);
  }
}

/* --------------------------------------
iPad Pro
--------------------------------------- */
@media screen and (max-width: 1024px) {
  .m_box {
    padding-left: min(7.5vw, 15rem);
    padding-right: min(7.5vw, 15rem);
  }

  .s_box {
    padding-left: min(12vw, 24rem);
    padding-right: min(12vw, 24rem);
  }


  /*---------- nav -----------*/
  #header_nav {
    width: 50%;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    background: #fff;
    z-index: 99;
    display: none;
    box-shadow: 0rem 0 2rem #0000001a;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #h_nav_wrap {
    display: block;
    text-align: center;
    padding-top: 12rem;
  }
  #h_nav_wrap li:last-child, #h_nav_wrap li:nth-last-child(2), #h_nav_wrap li a {
    padding: 0.6em 3rem;
  }

  /* ハンバーガーメニュー */
  #nav-toggle,   #nav-toggle span {
    display: inline-block;
    box-sizing: border-box;
  }

  #nav-toggle {
    position: absolute;
    width: 3rem;
    height: 1.6rem;
    top: calc(50% - 0.8rem);
    right: min(4.5vw, 9rem);
    z-index: 100;
  }

  #nav-toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.2rem;
    background: var(--brown);
  }

  #nav-toggle span:nth-of-type(1) {
    top: 0;
    width: 50%;
  }

  #nav-toggle span:nth-of-type(2) {
    top: 0.7rem;
  }

  #nav-toggle span:nth-of-type(3) {
    bottom: 0;
    width: 65%;
  }

  /* オープン時 */
  #nav-toggle.active span:nth-of-type(1) {
    transform: translateY(20px) rotate(-45deg);
    top: -13px;
    width: 90%;
    right: inherit;
  }

  #nav-toggle.active span:nth-of-type(2) {
    opacity: 0;
  }

  #nav-toggle.active span:nth-of-type(3) {
    transform: translateY(-20px) rotate(45deg);
    bottom: -13px;
    width: 90%;
  }

  .btn {
    font-size: 1.6rem;
  }

  input[type="text"],   input[type="tel"],   input[type="email"],   textarea {
    font-size: 1.65rem;
  }
}

/* --------------------------------------
iPad Air
--------------------------------------- */
@media screen and (max-width: 820px) {

  .btn {
    font-size: 1.6rem;
  }

  input[type="text"],   input[type="tel"],   input[type="email"],   textarea {
    font-size: 1.6rem;
  }
}

/* --------------------------------------
iPad Mini
--------------------------------------- */
@media screen and (max-width:768px) {
  .m_box, .s_box {
    padding-left: min(4.5vw, 9rem);
    padding-right: min(4.5vw, 9rem);
  }
  input[type="text"], input[type="tel"], input[type="email"], textarea {
    font-size: 1.6rem;
  }

  .btn {
    font-size: 1.55rem;
  }

}

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

/* --------------------------------------
Smart Phone
--------------------------------------- */
@media screen and (max-width:540px) {

  img {
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
  }

  .pc, .tab {display: none;}
  .sp {display: block;}

  h2 {
    font-size: 2.1rem;
  }

  h2 .ttl01 {
    font-size: 11.5rem;
    top: -3rem;
    left: -4.91vw;
  }

  h2 .ttl01::after {
    width: 13rem;
    height: 12rem;
    right: -13rem;
    top: -3rem;
  }

  h2 .ttl02 {
    font-size: 3.6rem;
  }

  h3 {
    font-size: 2.0rem;
  }

  p.mb45, p.mb60 {
    margin-bottom: 2.4rem;
  }

  /*----- header -----*/
  #header_nav {
    width: 100%;
  }
  #h_nav_wrap {
    padding-top: 9rem;
  }

  #h_nav_wrap li a.btn {
    padding: 0 3rem;
    height: 5.2rem;
    line-height: 5.2rem;
  }



  /*----- btn -----*/
  .btn {
    font-size: 1.6rem;
    height: 5.2rem;
    line-height: 5.2rem;
  }

  input[type="button"] {
    width: 100%;
    font-size: 2.0rem;
    height: 5.8rem;
    line-height: 5.8rem;
  }

  .send_btn {
    width: 100%;
    margin-top: 2.1rem;
  }

  input[type="text"], input[type="tel"], input[type="email"], textarea {
    padding: 1.2rem 1.2rem;
    border-radius: 0.6rem;
    font-size: 1.8rem;
  }

  .check01 {
    padding: 0 0 0 3rem;
  }

  .check01::before {
    width: 2.4rem;
    height: 2.4rem;
    top: calc(50% - 1.2rem);
  }

  .check01::after {
    width: 0.8rem;
    height: 1.5rem;
    border-right: 0.2rem solid var(--gold);
    border-bottom: 0.2rem solid var(--gold);
    top: calc(50% - 1rem);
    left: 0.8rem;
  }

  footer .sec {
    display: block;
  }

  #f_logo {
    width: fit-content;
    margin: 0 auto 3rem;
  }

  footer ul ul {
    margin-bottom: 3rem;
  }

  footer ul ul li {
    text-align: center;
    margin-bottom: 1.2rem;
  }
}