@charset "utf-8";
/* ==================================================
   CSS Variables
================================================== */

:root {

  /* ========================================
     Color
  ======================================== */

  --color-base: #FFFFFF;
  --color-switch: #F5F2E9;

  --color-green: #20460C;
  --color-gold: #A5925D;

  --color-text: #000000;
  --color-white: #FFFFFF;

  --color-border: #D9D9D9;
  --color-border-dark: #9A9A9A;


  /* ========================================
     Font
  ======================================== */

  --font-base:
    "Zen Kaku Gothic New",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  --font-title:
    "Zen Old Mincho",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  --font-en:
    "Manrope",
    "Helvetica Neue",
    Arial,
    sans-serif;


  /* ========================================
     Layout
  ======================================== */

  --content-width: 1200px;
  --content-width-wide: 1360px;
  --content-width-narrow: 960px;

  --side-padding: 40px;


  /* ========================================
     Section Space
  ======================================== */

  --section-space: 160px;
  --section-space-small: 120px;


  /* ========================================
     Transition
  ======================================== */

  --transition: 0.35s ease;

}


/* ==================================================
   Reset
================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  margin: 0;
  padding: 0;

  font-size: 16px;

  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;

  scroll-behavior: smooth;
}


body,
div,
p {
  margin: 0;
  padding: 0;
}


body {
  position: relative;

  width: 100%;
  min-width: 320px;
  min-height: 100vh;

  margin: 0;
  padding: 0;

  color: var(--color-text);
  background-color: var(--color-base);

  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 400;

  line-height: 2;

  letter-spacing: 0.04em;

  word-break: auto-phrase;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==================================================
   Link
================================================== */

a {
  color: inherit;

  text-decoration: none;

  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    opacity var(--transition),
    transform var(--transition);
}


a:hover {
  color: inherit;

  text-decoration: none;
}


/* ==================================================
   Paragraph
================================================== */

p {
  margin: 0;

  color: var(--color-text);

  font-family: var(--font-base);
  font-size: inherit;
  font-weight: 400;

  line-height: inherit;

  letter-spacing: inherit;
}


/* ==================================================
   Image
================================================== */

img {
  display: block;

  max-width: 100%;
  height: auto;

  border: 0;

  vertical-align: bottom;
}


/* ==================================================
   Main
================================================== */

.container {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  //overflow: hidden;
}


/* ==================================================
   Inner
================================================== */

.inner {
  position: relative;

  width: min(
    calc(100% - var(--side-padding) * 2),
    var(--content-width)
  );

  margin-inline: auto;
}


.inner--wide {
  width: min(
    calc(100% - var(--side-padding) * 2),
    var(--content-width-wide)
  );
}


.inner--narrow {
  width: min(
    calc(100% - var(--side-padding) * 2),
    var(--content-width-narrow)
  );
}


/* ==================================================
   Section
================================================== */

.section {
  position: relative;

  width: 100%;

  padding: var(--section-space) 0;
}


.section--small {
  padding: var(--section-space-small) 0;
}


/* ==================================================
   Background
================================================== */

.section--white {
  background-color: var(--color-white);
}


.section--beige {
  background-color: var(--color-switch);
}


/* ==================================================
   Font
================================================== */

.font-title {
  font-family: var(--font-title);
}


.font-base {
  font-family: var(--font-base);
}


.font-en {
  font-family: var(--font-en);
}


/* ==================================================
   Color
================================================== */

.color-green {
  color: var(--color-green);
}


.color-gold {
  color: var(--color-gold);
}


.color-black {
  color: var(--color-text);
}


.color-white {
  color: var(--color-white);
}


/* ==================================================
   Section Heading
================================================== */

.section-heading {
  position: relative;
}


/* ==================================================
   Section Label
================================================== */

.section-label {
  margin-bottom: 20px;

  color: var(--color-green);

  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 500;

  line-height: 1.5;

  letter-spacing: 0.08em;
}


/* ==================================================
   Section Title
================================================== */

.section-title {
  color: var(--color-text);

  font-family: var(--font-title);
  font-size: clamp(26px, 2.2vw, 38px);
  font-weight: 500;

  line-height: 1.65;

  letter-spacing: 0.05em;
}


/* ==================================================
   Large Title
================================================== */

.page-title {
  color: var(--color-text);

  font-family: var(--font-title);
  font-size: clamp(34px, 3.5vw, 56px);
  font-weight: 500;

  line-height: 1.5;

  letter-spacing: 0.05em;
}


/* ==================================================
   English Title
================================================== */

.en-title {
  color: var(--color-green);

  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;

  line-height: 1.4;

  letter-spacing: 0.05em;
}


/* ==================================================
   Text
================================================== */

.text {
  font-size: 15px;

  line-height: 2.1;

  letter-spacing: 0.04em;
}


/* ==================================================
   Small Text
================================================== */

.text-small {
  font-size: 13px;

  line-height: 1.9;
}


/* ==================================================
   Text Align
================================================== */

.text-center {
  text-align: center;
}


.text-left {
  text-align: left;
}


.text-right {
  text-align: right;
}


/* ==================================================
   Basic Button
================================================== */

.c-button {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  max-width: 320px;
  min-height: 58px;

  padding: 15px 58px 15px 22px;

  color: var(--color-text);
  background-color: var(--color-white);

  border: 1px solid var(--color-border-dark);

  overflow: hidden;

  transition:
    color var(--transition),
    border-color var(--transition);
}


/* ==================================================
   Button Background
================================================== */

.c-button::before {
  content: "";

  position: absolute;
  z-index: 0;

  inset: 0;

  background-color: var(--color-switch);

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 0.4s ease;

  pointer-events: none;
}


/* ==================================================
   Button Text
================================================== */

.c-button p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: inherit;

  font-size: 14px;
  font-weight: 400;

  line-height: 1.5;
  letter-spacing: 0.04em;
}


/* ==================================================
   Button Arrow Circle
================================================== */

.c-button__arrow {
  position: absolute;
  z-index: 3;

  top: 50%;
  right: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  background-color: var(--color-green);

  border-radius: 50%;

  transform: translateY(-50%);

  transition:
    transform var(--transition),
    background-color var(--transition);

  pointer-events: none;
}


/* ==================================================
   Button Arrow
================================================== */

.c-button__arrow::after {
  content: "";

  display: block;

  width: 5px;
  height: 5px;

  border-top: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);

  transform: translateX(-1px) rotate(45deg);
}


/* ==================================================
   Button Hover
================================================== */

.c-button:hover::before {
  transform: scaleX(1);
}

.c-button:hover .c-button__arrow {
  transform:
    translateY(-50%)
    scale(1.1);
}

/* ==================================================
   Green Button
================================================== */

.c-button--green {
  color: var(--color-white);
  background-color: var(--color-green);

  border-color: var(--color-green);
}


.c-button--green::before {
  background-color: var(--color-gold);
}


.c-button--green::after {
  background-color: var(--color-white);
}


.c-button--green p::after {
  border-color: var(--color-green);
}


/* ==================================================
   Gold Button
================================================== */

.c-button--gold {
  color: var(--color-white);
  background-color: var(--color-gold);

  border-color: var(--color-gold);
}


.c-button--gold::before {
  background-color: var(--color-green);
}


/* ==================================================
   Text Link
================================================== */

.c-text-link {
  position: relative;

  display: inline-flex;
  align-items: center;

  padding: 8px 34px 8px 0;

  color: var(--color-text);
}


.c-text-link p {
  font-size: 13px;

  line-height: 1.5;
}


.c-text-link::before {
  content: "";

  position: absolute;

  right: 0;
  bottom: 4px;

  width: 100%;
  height: 1px;

  background-color: #B7B7B7;
}


.c-text-link::after {
  content: "";

  position: absolute;

  top: 50%;
  right: 4px;

  width: 7px;
  height: 7px;

  background-color: var(--color-green);

  border-radius: 50%;

  transform: translateY(-50%);

  transition: transform var(--transition);
}


.c-text-link:hover::after {
  transform:
    translateY(-50%)
    scale(1.25);
}


/* ==================================================
   Image Cover
================================================== */

.img-cover {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ==================================================
   Image Contain
================================================== */

.img-contain {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* ==================================================
   Aspect Ratio
================================================== */

.ratio-square {
  aspect-ratio: 1 / 1;

  overflow: hidden;
}


.ratio-landscape {
  aspect-ratio: 4 / 3;

  overflow: hidden;
}


.ratio-wide {
  aspect-ratio: 16 / 9;

  overflow: hidden;
}


.ratio-portrait {
  aspect-ratio: 3 / 4;

  overflow: hidden;
}


/* ==================================================
   Decorative Logo
================================================== */

.logo-decoration {
  position: absolute;

  width: clamp(260px, 30vw, 500px);

  pointer-events: none;

  opacity: 1;
}


.logo-decoration img {
  width: 100%;
  height: auto;
}


/* ==================================================
   Hide
================================================== */

.invisible-style {
  display: none !important;
}


/* ==================================================
   PC / SP
================================================== */

.pc {
  display: block;
}


.sp {
  display: none;
}


/* ==================================================
   Fade Image Hover
================================================== */

.image-link {
  display: block;

  overflow: hidden;
}


.image-link img {
  transition:
    transform 0.6s ease,
    opacity 0.4s ease;
}


.image-link:hover img {
  transform: scale(1.03);

  opacity: 0.92;
}


/* ==================================================
   CMS Text
================================================== */

.cms-text p {
  white-space: pre-line;
}


/* ==================================================
   Scroll Margin
================================================== */

.scroll-target {
  scroll-margin-top: 120px;
}


/* ==================================================
   1280px
================================================== */

@media screen and (max-width: 1280px) {

  :root {
    --side-padding: 32px;
  }

}


/* ==================================================
   Tablet
================================================== */

@media screen and (max-width: 1024px) {

  :root {
    --side-padding: 30px;

    --section-space: 120px;
    --section-space-small: 90px;
  }


  /* ========================================
     Body
  ======================================== */

  body {
    font-size: 14px;
  }


  /* ========================================
     Section Title
  ======================================== */

  .section-title {
    font-size: clamp(26px, 3vw, 34px);
  }


  /* ========================================
     Page Title
  ======================================== */

  .page-title {
    font-size: clamp(32px, 5vw, 46px);
  }


  /* ========================================
     Button
  ======================================== */

  .c-button {
    max-width: 290px;
  }

}


/* ==================================================
   SP
================================================== */

@media screen and (max-width: 768px) {

  :root {
    --side-padding: 20px;

    --section-space: 90px;
    --section-space-small: 70px;
  }


  /* ========================================
     Body
  ======================================== */

  body {
    font-size: 14px;

    line-height: 1.9;

    letter-spacing: 0.03em;
  }


  /* ========================================
     PC / SP
  ======================================== */

  .pc {
    display: none !important;
  }


  .sp {
    display: block;
  }


  /* ========================================
     Section
  ======================================== */

  .section {
    padding: var(--section-space) 0;
  }


  /* ========================================
     Section Label
  ======================================== */

  .section-label {
    margin-bottom: 14px;

    font-size: 11px;
  }


  /* ========================================
     Section Title
  ======================================== */

  .section-title {
    font-size: 27px;

    line-height: 1.6;
  }


  /* ========================================
     Page Title
  ======================================== */

  .page-title {
    font-size: 34px;
  }


  /* ========================================
     Text
  ======================================== */

  .text {
    font-size: 14px;

    line-height: 2;
  }


  /* ========================================
     Button
  ======================================== */

  .c-button {
    width: 100%;
    max-width: 100%;
    min-height: 56px;

    padding:
      14px
      54px
      14px
      20px;
  }


  .c-button p {
    font-size: 13px;
  }


  /* ========================================
     Decoration
  ======================================== */

  .logo-decoration {
    width: 260px;
  }


  /* ========================================
     Scroll Margin
  ======================================== */

  .scroll-target {
    scroll-margin-top: 90px;
  }

}


/* ==================================================
   Small SP
================================================== */

@media screen and (max-width: 480px) {

  :root {
    --side-padding: 16px;

    --section-space: 80px;
    --section-space-small: 60px;
  }


  /* ========================================
     Section Title
  ======================================== */

  .section-title {
    font-size: 25px;
  }


  /* ========================================
     Page Title
  ======================================== */

  .page-title {
    font-size: 30px;
  }

}


/* ==================================================
   Reveal Parallax
================================================== */

.reveal-parallax {
  position: relative;
  --reveal-bg: #FFFFFF;
  --reveal-offset: 35px;
  --reveal-scale: 1.05;
  --parallax-scale: 1.03;
}

.reveal-parallax__image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--reveal-bg);
}

.reveal-parallax__image::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background-color: var(--reveal-bg);
  transform: translateY(0);
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}

.reveal-parallax.is-show .reveal-parallax__image::after {
  transform: translateY(-101%);
}

.reveal-parallax__img {
  position: absolute;
  top: -8%;
  left: 0;
  display: block;
  width: 100%;
  height: 116%;
  object-fit: cover;
  transform: translate3d(
    0,
    calc(var(--parallax-y, 0px) + var(--reveal-offset)),
    0
  ) scale(var(--reveal-scale));
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.reveal-parallax.is-show .reveal-parallax__img {
  transform: translate3d(
    0,
    var(--parallax-y, 0px),
    0
  ) scale(var(--parallax-scale));
}


/* ==================================================
   Reveal Delay
================================================== */

.reveal-delay-01 .reveal-parallax__image::after,
.reveal-delay-01 .reveal-parallax__img {
  transition-delay: 0.1s;
}

.reveal-delay-02 .reveal-parallax__image::after,
.reveal-delay-02 .reveal-parallax__img {
  transition-delay: 0.5s;
}

.reveal-delay-03 .reveal-parallax__image::after,
.reveal-delay-03 .reveal-parallax__img {
  transition-delay: 0.9s;
}

.reveal-delay-04 .reveal-parallax__image::after,
.reveal-delay-04 .reveal-parallax__img {
  transition-delay: 1.3s;
}


/* ==================================================
   Products Background
================================================== */

.top-products .reveal-parallax {
  --reveal-bg: #F5F2E9;
}


/* ==================================================
   Reduced Motion
================================================== */

@media (prefers-reduced-motion: reduce) {

  .reveal-parallax__image::after {
    display: none;
  }

  .reveal-parallax__img {
    transform: scale(1.03) !important;
    transition: none;
  }

}


/* ==================================================
   Common Inner
================================================== */

.common-inner {
  width: min(80%, 1280px);
  margin-inline: auto;
}


/* ==================================================
   Lower FV
================================================== */

.lower-fv {
  width: 100%;
  background-color: #FFFFFF;
}


/* ==================================================
   Lower FV Head
================================================== */

.lower-fv__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  min-height: 150px;
  padding-top: 40px;
  padding-bottom: 30px;
}


/* ==================================================
   Lower FV Title
================================================== */

.lower-fv__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lower-fv__en {
  margin: 0;

  color: #000000;

  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;

  line-height: 1.4;
}

.lower-fv__title {
  margin: 0;

  color: #000000;

  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 400;

  line-height: 1.5;
  letter-spacing: 0.06em;
}


/* ==================================================
   Breadcrumb
================================================== */

.lower-fv__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;

  padding-bottom: 4px;
}

.lower-fv__breadcrumb a,
.lower-fv__breadcrumb p,
.lower-fv__breadcrumb span {
  margin: 0;

  color: #555555;

  font-family: var(--font-base);
  font-size: 10px;
  font-weight: 400;

  line-height: 1.5;
}

.lower-fv__breadcrumb a {
  text-decoration: none;
}


/* ==================================================
   Lower FV Visual
================================================== */

.lower-fv__visual {
  width: 100%;
  height: clamp(300px, 33vw, 520px);

  overflow: hidden;
}

.lower-fv__visual img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


/* ==================================================
   SP
================================================== */

@media screen and (max-width: 768px) {

  .common-inner {
    width: calc(100% - 40px);
  }

  .lower-fv__head {
    min-height: 125px;

    padding-top: 30px;
    padding-bottom: 22px;
  }

  .lower-fv__title {
    font-size: 24px;
  }

  .lower-fv__breadcrumb {
    display: none;
  }

  .lower-fv__visual {
    height: 58vw;
    min-height: 240px;
  }

}

/* ==================================================
   Lower Intro
================================================== */

.lower-intro {
  width: 100%;

  padding: 58px 0;

  background-color: #F5F2E9;
}

.lower-intro__inner {
  display: grid;

  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(60px, 8vw, 100px);

  width: min(100%, 980px);

  margin-inline: auto;
}

.lower-intro__title {
  margin: 0;

  color: #000000;

  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 400;

  line-height: 1.7;
}

.lower-intro__text p {
  margin: 0;

  color: #000000;

  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 400;

  line-height: 2;
}

.lower-intro__text p + p {
  margin-top: 18px;
}


@media screen and (max-width: 768px) {

  .lower-intro {
    padding: 50px 0;
  }


  .lower-intro__inner {
    display: block;

    width: 90%;
  }

  .lower-intro__text {
    max-width: none;
  }

  .lower-intro__title {
    margin-bottom: 28px;

    font-size: 21px;
  }

  .lower-intro__text p {
    font-size: 13px;
  }

}

/* ==================================================
   Common FAQ
================================================== */

.common-faq {
  width: 100%;
  padding: 2rem 0;
  background-color: #FFFFFF;
}


/* ==================================================
   FAQ List
================================================== */

.common-faq__list {
  width: min(100%, 960px);
  margin: 55px 0 0 auto;
}


/* ==================================================
   FAQ Item
================================================== */

.common-faq__item {
  width: 100%;
}

.common-faq__item + .common-faq__item {
  margin-top: 16px;
}


/* ==================================================
   Question / Answer
================================================== */

.common-faq__question,
.common-faq__answer {
  display: grid;

  grid-template-columns: 22px minmax(0, 1fr);

  align-items: start;

  gap: 12px;

  width: 100%;

  padding: 16px 18px;
}


/* ==================================================
   Question
================================================== */

.common-faq__question {
  background-color: #F5F2E9;
}


/* ==================================================
   Answer
================================================== */

.common-faq__answer {
  padding-top: 14px;
  padding-bottom: 20px;

  background-color: #FFFFFF;
}


/* ==================================================
   Q / A Mark
================================================== */

.common-faq__mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  margin: 1px 0 0;

  color: #404040;
  background-color: transparent;

  border: 1px solid #404040;
  border-radius: 50%;

  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 400;

  line-height: 1;
}


/* ==================================================
   FAQ Text
================================================== */

.common-faq__text {
  margin: 0;

  color: var(--color-text);

  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 400;

  line-height: 1.9;
  letter-spacing: 0.03em;
}


/* ==================================================
   SP
================================================== */

@media screen and (max-width: 768px) {

  .common-faq {
    padding: 80px 0 100px;
  }

  .common-faq__list {
    margin-top: 40px;
  }

  .common-faq__item + .common-faq__item {
    margin-top: 14px;
  }

  .common-faq__question,
  .common-faq__answer {
    grid-template-columns: 20px minmax(0, 1fr);

    gap: 10px;

    padding-right: 14px;
    padding-left: 14px;
  }

  .common-faq__mark {
    width: 17px;
    height: 17px;

    font-size: 9px;
  }

  .common-faq__text {
    font-size: 12px;
    line-height: 1.85;
  }

}


/* ==================================================
   Common Section Head
================================================== */

.common-section-head {
  width: 100%;

  padding-top: 40px;

  border-top: 1px solid #8C8C8C;
}

.common-section-head__title {

  color: #000000;

  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 400;

  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.common-section-head__sub {
  margin-top: 6px;

  color: #000000;

  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 400;

  line-height: 1.8;
}

@media screen and (max-width: 768px) {
.common-section-head__title {
  font-size: 18px;
}
}