@charset "utf-8";

section .caption {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-size: 12px;
  color: #fff;
}
section .caption.bk {
  color: #000;
}
section .caption.wh {
  color: #fff;
}
.main{
  position: relative;
  padding:0;
}
.main .kv{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}
.main .kv.visible{
  visibility: hidden;
}
.main .kv .kv_wrap {
  position: relative;
  overflow: hidden;
}
.main .kv .kv_wrap .kv_img {
  position: relative;
  transform: scale(1.1);
  opacity: 0;
  mix-blend-mode: overlay;
}
.main .kv .kv_title {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: auto;
  font-family: "Cormorant Infant", serif;
  color: #fff;
  line-height: 1;
}
.main .kv .kv_caption {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  line-height: 1;
  filter: drop-shadow(0px 0px 14px rgba(0,0,0,0.6));
}
@media (max-width: 768px) {
  section .caption {
    bottom: calc( 3 / var(--media_sp) * 100vw);
    right: calc( 4 / var(--media_sp) * 100vw);
    font-size: calc( 10 * 2 / var(--media_sp) * 100vw);

  }
}
@media(min-width: 769px) {
  .main .kv .kv_title {
    font-size: 56px;
  }
  .main .kv .kv_caption {
    margin: 4px;
    font-size: 12px;
  }
}
@media(max-width: 768px) {
  .main .kv .kv_title {
    font-size: calc( 56 / var(--media_sp) * 100vw);
  }
  .main .kv .kv_caption {
    margin: calc( 10 / var(--media_sp) * 100vw);
    font-size: calc( 20 / var(--media_sp) * 100vw);
  }
}

.main section {
  position: relative;
  z-index: 2;
  background-color: #f4ecdf;
  
}
section .inner_content-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 40px;
  box-sizing: content-box;
}

.intro{
  position: relative;
  background-color: #f4ecdf;
  z-index: 2;
}
@media(min-width: 769px) {
  .intro{
    padding: 120px 0 80px;
    margin-top: 53.571%;
  }
}
@media(max-width: 768px) {
  .intro{
    padding: calc( 100 / var(--media_sp) * 100vw) 0 0;
    margin-top: 100%;
  }
  section .inner_content-wrap {
    max-width: initial;
    padding: calc( 30 / var(--media_sp) * 100vw) calc( 40 / var(--media_sp) * 100vw)
  }
}


.quarity_nav {
  max-width: 1280px;
  padding: 0 40px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 10px;
  box-sizing: content-box;
}
.quarity_nav a {
  font-size: 20px;
  color: #9c7e48;
  background-color: #fff;
  border: solid 1px #9c7e48;
  text-align: center;
  height: 70px;
  display: grid;
  place-content: center;
}
.quarity_nav a.current {
  color: #fff;
  background: #C4B585;
  border: initial;
  background: linear-gradient(90deg, rgba(196, 181, 133, 1) 0%, rgba(145, 122, 89, 1) 100%);
}
@media (max-width: 768px) {
  .quarity_nav {
    max-width: calc( 670 / var(--media_sp) * 100vw);
    padding: initial;
    display: block;
  }
  .quarity_nav a {
    font-size: calc( 14 * 2 / var(--media_sp) * 100vw);
    height: calc( 100 / var(--media_sp) * 100vw);
  }
  .quarity_nav > * + * {
    margin-top: calc( 20 / var(--media_sp) * 100vw);
  }
}

.page_theme {
  margin-top: 108px;
}
.page_theme h3 .en-title {
  font-size: 45px;
  color: #9c7e48;
  font-family: "Cormorant Infant", serif;
  display: block;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: calc(50/45);
}
.page_theme h3 .jp-title {
  font-size: 21px;
  color: #333;
  display: block;
  text-align: center;
  margin: 0 auto; 
  margin-top: 9px;
}
@media (max-width: 768px) {
  .page_theme {
    margin-top: calc( 71 / var(--media_sp) * 100vw);
    padding-bottom: calc( 100 / var(--media_sp) * 100vw);
  }
  .page_theme h3 .en-title {
    font-size: calc( 27 * 2 / var(--media_sp) * 100vw);
  }
  .page_theme h3 .jp-title {
    font-size: calc( 14 * 2 / var(--media_sp) * 100vw);
    line-height: 1;
  }
}

.sec_center_title-wrap,
.sec_title-wrap {
  padding: 0 40px;
}
h4 {
  border-bottom: solid 1px #9c7e48;
  max-width: 1280px;
  padding: 0 0px;
  margin: 0 auto;
  padding-bottom: 6px;
}
h4 .en-title {
  color: #9c7e48;
  font-size: 35px;
  font-family: "Cormorant Infant", serif;
  letter-spacing: 0.1em;
  margin-right: 0.3em;
}
h4 .jp-title {
  font-size: 17px;
  color: #9c7e48;
}
@media (max-width: 768px) {
  .sec_center_title-wrap,
  .sec_title-wrap {
    padding: 0 calc( 40 / var(--media_sp) * 100vw);;
  }
  h4 {
    border-bottom: solid 1px #9c7e48;
    max-width: 1280px;
    padding: 0 0px;
    margin: 0 auto;
    padding-bottom: calc( 2 / var(--media_sp) * 100vw);;
  }
  h4 .en-title {
    font-size: calc( 22 * 2 / var(--media_sp) * 100vw);;
    margin-right: 0.1em;
  }
  h4 .jp-title {
    font-size: calc( 12 * 2 / var(--media_sp) * 100vw);;
  }
}


.sec_center_title-wrap h4 {
  margin-bottom: 12px;
  padding-bottom: 16px;
}
.sec_center_title-wrap h4 .en-title {
  font-size: 21px;
}
.sec_center_title-wrap h4 span {
  display: block;
  margin: 0 auto;
  text-align: center;
}
.sec_center_title-wrap h4 .jp-title {
  font-size: 29px;
}
@media (max-width: 768px) {
  .sec_center_title-wrap h4 {
    margin-bottom: calc( 12 / var(--media_sp) * 100vw);
    padding-bottom: calc( 16 / var(--media_sp) * 100vw);
  }
  .sec_center_title-wrap h4 .en-title {
    font-size: calc( 14  * 2 / var(--media_sp) * 100vw);
  }
  .sec_center_title-wrap h4 span {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  .sec_center_title-wrap h4 .jp-title {
    font-size: calc( 18  * 2 / var(--media_sp) * 100vw);
    line-height: calc(27/18);
  }
}

.feature_content-white {
  background-color: #fff;
  padding: 30px;
}
@media (max-width: 768px) {
  .feature_content-white {
    padding: calc( 40 / var(--media_sp) * 100vw);;
  }
}

.common_layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 23px 40px;
}
.common_block .title {
  font-size: 21px;
  line-height: calc(29/21);
  color: #9c7e48;
  letter-spacing: -0.02em;
  margin-top: 15px;
  margin-bottom: 9px;
}
.common_block .img-wrap.with_type_caption .title {
  margin: 0;
}
.common_block .text {
  font-size: 15px;
  line-height: calc(25/15);
  letter-spacing: -0.01em;
}
.common_block .text .annotation,
.feature_content-white p .annotation {
  font-size: 12px;
  line-height: calc(20/12);
  display: inline-block;
}
.feature_content-white p .annotation {
  letter-spacing: -0.05em;
}
.inner_content-wrap .title {
  color: #9c7e48;
}
.inner_content-wrap .title .small-char {
  font-size: 17px;
}
.title.adjust_pc_spacing {
  letter-spacing: -0.07em;
}
@media (max-width: 768px) {
  .common_layout {
    gap: calc( 30 / var(--media_sp) * 100vw) calc( 30 / var(--media_sp) * 100vw);;
    grid-template-columns: 1fr 1fr;
  }
  .common_block .title {
    font-size: calc( 16 * 2 / var(--media_sp) * 100vw);;
    line-height: calc(19/16);
    margin-top: calc( 19 / var(--media_sp) * 100vw);
    margin-bottom: calc( 11 / var(--media_sp) * 100vw);
  }
  .common_block .img-wrap.with_type_caption .title {
    margin: 0;
  }
  .common_block .text {
    font-size: calc( 12 * 2 / var(--media_sp) * 100vw);
    line-height: calc(18/12);
    letter-spacing: -0.01em;
  }
  .common_block .text .annotation,
  .feature_content-white p .annotation {
    font-size: calc( 10 * 2 / var(--media_sp) * 100vw);
    line-height: calc(15/10);
  }
  .inner_content-wrap .title .small-char {
    font-size: calc( 14 * 2 / var(--media_sp) * 100vw);
    display: block;
  }
  .common_block .title.adjust_sp_spacing {
    letter-spacing: -0.12em;
  }
}

.img-wrap {
  position: relative;
}
.img-wrap .caption {
  position: absolute;
  right: 2px; 
  bottom: 0px;
  color: #fff;
}
.img-wrap .caption.bk {
  color: #333;
}
.img-wrap .caption.wh {
  color: #fff;
}
.text .annotation {
  font-size: 12px;
  line-height: calc(20/12);
  display: block;
}
@media (max-width: 768px) {
  .img-wrap .caption {
    right: calc( 2 / var(--media_sp) * 100vw);
  }
  .text .annotation {
    font-size: calc( 10 * 2 / var(--media_sp) * 100vw);
  }
}