@charset "UTF-8";
/*
 * ==========================================================================
 * main.css  ―  共通CSS（scss/main.scss のコンパイル出力）
 * ==========================================================================
 * 生成条件：scss/main.scss の @use "./vars" with (...) で本案件の変数を上書き
 *   $base_color:#274d36 / $sub_color:#468560 / $accent_color:#5e9c78
 *   $txt:#433430 / $txt_light:#8b8378 / $bg_body:#fcfcfc / $bg_section:#f7f7f7
 *   $bg_section2:#f2f2f0 / $bg_dark:#274d36 / $bg_darker:#1e3d2b
 *   $border_color:#e2ded7 / $radius_sm,base,lg:0（本案件は全て直角）
 *   $font_en:Cormorant / $font_ja:Zen Kaku Gothic New / $font_mincho:Zen Old Mincho
 *
 * ※ このファイルは編集しない。値を変える場合は scss/ 側を直して
 *    npx sass scss/main.scss css/main.css --style=compressed --no-source-map
 *    でリコンパイルする。
 * ==========================================================================
 */

/* ==========================================================================
   base（_base.scss）
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  background: #fcfcfc;
  color: #433430;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (max-width: 896px) {
  body { font-size: 1.4rem; }
}
@media (max-width: 639px) {
  body { font-size: 1.2rem; }
}

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

a {
  color: #274d36;
  text-decoration: none;
  transition: all 0.3s ease;
}
a:hover { opacity: 0.8; }

ul, ol { list-style: none; }

table {
  border-collapse: collapse;
  width: 100%;
}

.subpage-wrapper { animation: fadein 2s ease forwards; }

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   layout（_layout.scss）
   ========================================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.container-wide {
  max-width: 1500px;
  margin: 0 auto;
}
@media (max-width: 1320px) {
  .container,
  .container-wide {
    max-width: 95%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
.container-full { max-width: 100%; }
.container-narrow {
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 639px) {
  .container-narrow { max-width: 95%; }
}

.section { padding: 120px 0; }
.section--pt0 { padding-top: 0; }
.section--pb0 { padding-bottom: 0; }
.section--half { padding: 60px 0; }
@media (max-width: 896px) {
  .section { padding: 60px 0; }
  .section--half { padding: 30px 0; }
}

.column2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.column2__child { width: 48%; }
.column2--5-5 > .column2__child { width: 48%; }
.column2--6-4 > .column2__child:first-child { width: 56%; }
.column2--6-4 > .column2__child:last-child  { width: 40%; }
.column2--7-3 > .column2__child:first-child { width: 67%; }
.column2--7-3 > .column2__child:last-child  { width: 30%; }
.column2--4-6 > .column2__child:first-child { width: 40%; }
.column2--4-6 > .column2__child:last-child  { width: 56%; }
.column2--3-7 > .column2__child:first-child { width: 30%; }
.column2--3-7 > .column2__child:last-child  { width: 67%; }
.column2--reverse { flex-direction: row-reverse; }
.column2--top { align-items: flex-start; }
@media (max-width: 896px) {
  .column2,
  .column2--reverse { flex-direction: column; }
  .column2__child { width: 100%; }
  .column2__child:not(:last-child) { margin-bottom: 30px; }
  .column2--6-4 > .column2__child,
  .column2--7-3 > .column2__child,
  .column2--4-6 > .column2__child,
  .column2--3-7 > .column2__child { width: 100%; }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 896px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   components: header / nav-toggle / sp-nav（components/_header.scss）
   ========================================================================== */
.header {
  position: relative;
  z-index: 100;
  width: 100%;
}

.header__inner {
  display: flex;
  align-items: center;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  height: 80px;
}
.header__inner--spread { justify-content: space-between; }
.header__inner--spread .header__nav {
  margin-left: 0;
  margin-right: 0;
}
.header__inner--flush-right {
  max-width: 100%;
  padding-right: 0;
}
@media (max-width: 1100px) {
  .header__inner { padding: 0 15px; height: 60px; }
  .header__inner--flush-right { padding-right: 0; }
}

.header__logo { flex-shrink: 0; }
.header__logo img {
  height: 40px;
  width: auto;
}
@media (max-width: 639px) {
  .header__logo img { height: 30px; }
}

.header__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  height: 100%;
}
@media (max-width: 1100px) {
  .header__right { display: none; }
}

.header-sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  transition: all 0.4s ease;
}
.header-sticky.is-fixed {
  position: fixed;
  background: #fcfcfc;
  box-shadow: 0 2px 10px rgba(39, 77, 54, 0.08);
}
.header-sticky--transparent .header__logo img { filter: brightness(0) invert(1); }
.header-sticky--transparent.is-fixed .header__logo img { filter: none; }

.nav-toggle {
  display: none;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 210;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 0;
  border: none;
  padding: 0;
}
@media (max-width: 1100px) {
  .nav-toggle { display: block; }
}
.nav-toggle__line {
  display: block;
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: #433430;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}
.nav-toggle__line:nth-child(1) { top: 13px; }
.nav-toggle__line:nth-child(2) { top: 21px; }
.nav-toggle__line:nth-child(3) { top: 29px; }
.nav-toggle.is-active .nav-toggle__line:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__line:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle__line:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

.sp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: linear-gradient(135deg, rgba(39, 77, 54, 0.97), rgba(15, 30, 21, 0.98));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 30px 40px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}
.sp-nav.is-open {
  visibility: visible;
  opacity: 1;
}
.sp-nav__list {
  text-align: center;
  width: 100%;
  max-width: 320px;
}
.sp-nav__item {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s ease;
}
.sp-nav__item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.sp-nav.is-open .sp-nav__item {
  transform: translateY(0);
  opacity: 1;
}
.sp-nav__item:nth-child(1) { transition-delay: 0.06s; }
.sp-nav__item:nth-child(2) { transition-delay: 0.12s; }
.sp-nav__item:nth-child(3) { transition-delay: 0.18s; }
.sp-nav__item:nth-child(4) { transition-delay: 0.24s; }
.sp-nav__item:nth-child(5) { transition-delay: 0.3s; }
.sp-nav__item:nth-child(6) { transition-delay: 0.36s; }
.sp-nav__link {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  padding: 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}
.sp-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}
.sp-nav__en {
  font-family: "Cormorant", "Times New Roman", serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-right: auto;
  padding-left: 12px;
}
.sp-nav__bottom {
  margin-top: auto;
  width: 100%;
  max-width: 320px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}
.sp-nav.is-open .sp-nav__bottom {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* ==========================================================================
   components: footer wrapper（components/_footer.scss）
   ========================================================================== */
.footer { position: relative; }

/* ==========================================================================
   components: accordion（components/_accordion.scss）
   ========================================================================== */
.accordion {
  border: 1px solid #e2ded7;
  border-radius: 0;
  overflow: hidden;
}
.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  border: none;
  background: #f7f7f7;
  color: #433430;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}
.accordion__head:hover { background: #efefef; }
.accordion__head::after {
  content: "+";
  flex-shrink: 0;
  margin-left: 12px;
  color: #274d36;
  font-size: 1.25rem;
  line-height: 1;
}
.accordion.is-open .accordion__head::after { content: "−"; }
.accordion__body {
  display: none;
  padding: 16px 20px;
  border-top: 1px solid rgba(39, 77, 54, 0.2);
  background: #fff;
}
.accordion.is-open .accordion__body { display: block; }

/* ==========================================================================
   components: form（components/_form.scss）
   ========================================================================== */
.form-input {
  width: 100%;
  background: #f7f7f7;
  border: 2px solid #e2ded7;
  border-radius: 0;
  padding: 12px 16px;
  font-size: 1.4rem;
  font-family: inherit;
  color: #433430;
  outline: none;
  transition: all 0.3s ease;
}
.form-input:focus { border-color: #274d36; }

/* ==========================================================================
   components: parts（components/_parts.scss）
   ========================================================================== */
.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 2rem;
}
.icon-circle--sm { width: 36px; height: 36px; font-size: 1.6rem; }
.icon-circle--lg { width: 72px; height: 72px; font-size: 2.8rem; }
.icon-circle--base   { background: rgba(39, 77, 54, 0.1); color: #274d36; }
.icon-circle--accent { background: rgba(94, 156, 120, 0.1); color: #5e9c78; }
.icon-circle--white  { background: #fff; }

.sentence p + p { margin-top: 20px; }
.sentence--narrow p + p { margin-top: 12px; }

.embed {
  width: 100%;
  overflow: hidden;
  border-radius: 0;
}
.embed iframe,
.embed video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   components: page-top（components/_page-top.scss）
   ========================================================================== */
.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}
.page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (min-width: 897px) {
  .page-top { right: 30px; bottom: 30px; }
}
.page-top__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #274d36;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.page-top__link:hover {
  background: #468560;
  transform: translateY(-2px);
}

/* ==========================================================================
   utility（_utility.scss）
   ========================================================================== */
/* -- spacing -- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }
.p-0  { padding: 0; }
.m-0  { margin: 0; }
.mt-5 { margin-top: 5px; } .mb-5 { margin-bottom: 5px; } .pt-5 { padding-top: 5px; } .pb-5 { padding-bottom: 5px; } .ml-5 { margin-left: 5px; } .mr-5 { margin-right: 5px; } .pl-5 { padding-left: 5px; } .pr-5 { padding-right: 5px; }
.mt-10 { margin-top: 10px; } .mb-10 { margin-bottom: 10px; } .pt-10 { padding-top: 10px; } .pb-10 { padding-bottom: 10px; } .ml-10 { margin-left: 10px; } .mr-10 { margin-right: 10px; } .pl-10 { padding-left: 10px; } .pr-10 { padding-right: 10px; }
.mt-15 { margin-top: 15px; } .mb-15 { margin-bottom: 15px; } .pt-15 { padding-top: 15px; } .pb-15 { padding-bottom: 15px; } .ml-15 { margin-left: 15px; } .mr-15 { margin-right: 15px; } .pl-15 { padding-left: 15px; } .pr-15 { padding-right: 15px; }
.mt-20 { margin-top: 20px; } .mb-20 { margin-bottom: 20px; } .pt-20 { padding-top: 20px; } .pb-20 { padding-bottom: 20px; } .ml-20 { margin-left: 20px; } .mr-20 { margin-right: 20px; } .pl-20 { padding-left: 20px; } .pr-20 { padding-right: 20px; }
.mt-25 { margin-top: 25px; } .mb-25 { margin-bottom: 25px; } .pt-25 { padding-top: 25px; } .pb-25 { padding-bottom: 25px; } .ml-25 { margin-left: 25px; } .mr-25 { margin-right: 25px; } .pl-25 { padding-left: 25px; } .pr-25 { padding-right: 25px; }
.mt-30 { margin-top: 30px; } .mb-30 { margin-bottom: 30px; } .pt-30 { padding-top: 30px; } .pb-30 { padding-bottom: 30px; } .ml-30 { margin-left: 30px; } .mr-30 { margin-right: 30px; } .pl-30 { padding-left: 30px; } .pr-30 { padding-right: 30px; }
.mt-35 { margin-top: 35px; } .mb-35 { margin-bottom: 35px; } .pt-35 { padding-top: 35px; } .pb-35 { padding-bottom: 35px; } .ml-35 { margin-left: 35px; } .mr-35 { margin-right: 35px; } .pl-35 { padding-left: 35px; } .pr-35 { padding-right: 35px; }
.mt-40 { margin-top: 40px; } .mb-40 { margin-bottom: 40px; } .pt-40 { padding-top: 40px; } .pb-40 { padding-bottom: 40px; } .ml-40 { margin-left: 40px; } .mr-40 { margin-right: 40px; } .pl-40 { padding-left: 40px; } .pr-40 { padding-right: 40px; }
.mt-45 { margin-top: 45px; } .mb-45 { margin-bottom: 45px; } .pt-45 { padding-top: 45px; } .pb-45 { padding-bottom: 45px; } .ml-45 { margin-left: 45px; } .mr-45 { margin-right: 45px; } .pl-45 { padding-left: 45px; } .pr-45 { padding-right: 45px; }
.mt-50 { margin-top: 50px; } .mb-50 { margin-bottom: 50px; } .pt-50 { padding-top: 50px; } .pb-50 { padding-bottom: 50px; } .ml-50 { margin-left: 50px; } .mr-50 { margin-right: 50px; } .pl-50 { padding-left: 50px; } .pr-50 { padding-right: 50px; }
.mt-60 { margin-top: 60px; } .mb-60 { margin-bottom: 60px; } .pt-60 { padding-top: 60px; } .pb-60 { padding-bottom: 60px; } .ml-60 { margin-left: 60px; } .mr-60 { margin-right: 60px; } .pl-60 { padding-left: 60px; } .pr-60 { padding-right: 60px; }
.mt-70 { margin-top: 70px; } .mb-70 { margin-bottom: 70px; } .pt-70 { padding-top: 70px; } .pb-70 { padding-bottom: 70px; } .ml-70 { margin-left: 70px; } .mr-70 { margin-right: 70px; } .pl-70 { padding-left: 70px; } .pr-70 { padding-right: 70px; }
.mt-80 { margin-top: 80px; } .mb-80 { margin-bottom: 80px; } .pt-80 { padding-top: 80px; } .pb-80 { padding-bottom: 80px; } .ml-80 { margin-left: 80px; } .mr-80 { margin-right: 80px; } .pl-80 { padding-left: 80px; } .pr-80 { padding-right: 80px; }
.mt-90 { margin-top: 90px; } .mb-90 { margin-bottom: 90px; } .pt-90 { padding-top: 90px; } .pb-90 { padding-bottom: 90px; } .ml-90 { margin-left: 90px; } .mr-90 { margin-right: 90px; } .pl-90 { padding-left: 90px; } .pr-90 { padding-right: 90px; }
.mt-100 { margin-top: 100px; } .mb-100 { margin-bottom: 100px; } .pt-100 { padding-top: 100px; } .pb-100 { padding-bottom: 100px; } .ml-100 { margin-left: 100px; } .mr-100 { margin-right: 100px; } .pl-100 { padding-left: 100px; } .pr-100 { padding-right: 100px; }
.mt-120 { margin-top: 120px; } .mb-120 { margin-bottom: 120px; } .pt-120 { padding-top: 120px; } .pb-120 { padding-bottom: 120px; } .ml-120 { margin-left: 120px; } .mr-120 { margin-right: 120px; } .pl-120 { padding-left: 120px; } .pr-120 { padding-right: 120px; }
.-mt-10 { margin-top: -10px; } .-mb-10 { margin-bottom: -10px; } .-ml-10 { margin-left: -10px; } .-mr-10 { margin-right: -10px; }
.-mt-20 { margin-top: -20px; } .-mb-20 { margin-bottom: -20px; } .-ml-20 { margin-left: -20px; } .-mr-20 { margin-right: -20px; }
.-mt-30 { margin-top: -30px; } .-mb-30 { margin-bottom: -30px; } .-ml-30 { margin-left: -30px; } .-mr-30 { margin-right: -30px; }
.-mt-40 { margin-top: -40px; } .-mb-40 { margin-bottom: -40px; } .-ml-40 { margin-left: -40px; } .-mr-40 { margin-right: -40px; }
.-mt-60 { margin-top: -60px; } .-mb-60 { margin-bottom: -60px; } .-ml-60 { margin-left: -60px; } .-mr-60 { margin-right: -60px; }
.-mt-80 { margin-top: -80px; } .-mb-80 { margin-bottom: -80px; } .-ml-80 { margin-left: -80px; } .-mr-80 { margin-right: -80px; }
@media (max-width: 896px) {
  .mt-40 { margin-top: 20px; } .mb-40 { margin-bottom: 20px; } .pt-40 { padding-top: 20px; } .pb-40 { padding-bottom: 20px; }
  .mt-45 { margin-top: 22.5px; } .mb-45 { margin-bottom: 22.5px; } .pt-45 { padding-top: 22.5px; } .pb-45 { padding-bottom: 22.5px; }
  .mt-50 { margin-top: 25px; } .mb-50 { margin-bottom: 25px; } .pt-50 { padding-top: 25px; } .pb-50 { padding-bottom: 25px; }
  .mt-60 { margin-top: 30px; } .mb-60 { margin-bottom: 30px; } .pt-60 { padding-top: 30px; } .pb-60 { padding-bottom: 30px; }
  .mt-70 { margin-top: 35px; } .mb-70 { margin-bottom: 35px; } .pt-70 { padding-top: 35px; } .pb-70 { padding-bottom: 35px; }
  .mt-80 { margin-top: 40px; } .mb-80 { margin-bottom: 40px; } .pt-80 { padding-top: 40px; } .pb-80 { padding-bottom: 40px; }
  .mt-90 { margin-top: 45px; } .mb-90 { margin-bottom: 45px; } .pt-90 { padding-top: 45px; } .pb-90 { padding-bottom: 45px; }
  .mt-100 { margin-top: 50px; } .mb-100 { margin-bottom: 50px; } .pt-100 { padding-top: 50px; } .pb-100 { padding-bottom: 50px; }
  .mt-120 { margin-top: 60px; } .mb-120 { margin-bottom: 60px; } .pt-120 { padding-top: 60px; } .pb-120 { padding-bottom: 60px; }
}
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* -- display / flex -- */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-reverse { flex-direction: row-reverse; }
.flex-center { justify-content: center; align-items: center; }
.jc-between { justify-content: space-between; }
.jc-center { justify-content: center; }
.jc-start { justify-content: flex-start; }
.jc-end { justify-content: flex-end; }
.ai-center { align-items: center; }
.ai-start { align-items: flex-start; }
.ai-end { align-items: flex-end; }
.ai-stretch { align-items: stretch; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }
.gap-40 { gap: 40px; }
.gap-60 { gap: 60px; }

/* -- font -- */
.fz-10 { font-size: 1rem; }
.fz-12 { font-size: 1.2rem; }
.fz-13 { font-size: 1.3rem; }
.fz-14 { font-size: 1.4rem; }
.fz-16 { font-size: 1.6rem; }
.fz-18 { font-size: 1.8rem; }
.fz-20 { font-size: 2rem; }
.fz-22 { font-size: 2.2rem; }
.fz-24 { font-size: 2.4rem; }
.fz-28 { font-size: 2.8rem; }
.fz-32 { font-size: 3.2rem; }
.fz-36 { font-size: 3.6rem; }
.fz-40 { font-size: 4rem; }
.fz-48 { font-size: 4.8rem; }
.fz-56 { font-size: 5.6rem; }
.fz-64 { font-size: 6.4rem; }
.fz-80 { font-size: 8rem; }
.fz-96 { font-size: 9.6rem; }
.fz-100 { font-size: 10rem; }
.fz-120 { font-size: 12rem; }
.lh-1 { line-height: 1; }
.lh-xs { line-height: 1.1; }
.lh-sm { line-height: 1.2; }
.lh-base { line-height: 1.4; }
.lh-md { line-height: 1.6; }
.lh-lg { line-height: 1.8; }
.lh-xl { line-height: 2; }
.ls-tight { letter-spacing: 0.02em; }
.ls-normal { letter-spacing: 0.05em; }
.ls-wide { letter-spacing: 0.1em; }
.ls-wider { letter-spacing: 0.15em; }
.ls-widest { letter-spacing: 0.2em; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
.font-en { font-family: "Cormorant", "Times New Roman", serif; }
.font-mincho { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }

/* -- border / text -- */
.border-bottom { border-bottom: 1px solid #e2ded7; }
.border-top { border-top: 1px solid #e2ded7; }
.border-left { border-left: 1px solid #e2ded7; }
.border-right { border-right: 1px solid #e2ded7; }
.border-none { border: none; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-white { color: #fff; }
.text-base { color: #274d36; }
.text-sub { color: #468560; }
.text-accent { color: #5e9c78; }
.text-light { color: #8b8378; }
.text-dark { color: #433430; }
.text-bold { font-weight: bold; }
.text-normal { font-weight: normal; }

/* -- position / z-index -- */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-fixed { position: fixed; }
.pos-sticky { position: sticky; top: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }
.z-header { z-index: 100; }
.z-overlay { z-index: 200; }
.z-modal { z-index: 300; }

/* -- visibility / overflow / size -- */
@media (min-width: 897px) { .sp-only { display: none !important; } }
@media (max-width: 896px) { .pc-only { display: none !important; } }
.overflow-hidden { overflow: hidden; }
.rounded { border-radius: 0; }
.rounded-sm { border-radius: 0; }
.rounded-lg { border-radius: 0; }
.rounded-pill { border-radius: 9999px; }
.rounded-circle { border-radius: 50%; }
.rounded-none { border-radius: 0; }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-150 { height: 150px; }
.h-180 { height: 180px; }
.h-200 { height: 200px; }
.h-250 { height: 250px; }
.h-280 { height: 280px; }
.h-300 { height: 300px; }
.h-350 { height: 350px; }
.h-400 { height: 400px; }
.h-500 { height: 500px; }
.h-auto { height: auto; }
.h-100vh { height: 100vh; }
.min-h-100vh { min-height: 100vh; }
@media (max-width: 896px) {
  .h-300 { height: 200px; }
  .h-350 { height: 233.3333333333px; }
  .h-400 { height: 266.6666666667px; }
  .h-500 { height: 333.3333333333px; }
}
@media (max-width: 639px) {
  .h-250 { height: 125px; }
  .h-280 { height: 140px; }
  .h-300 { height: 150px; }
  .h-350 { height: 175px; }
  .h-400 { height: 200px; }
  .h-500 { height: 250px; }
  .h-100vh { height: 70vh; }
  .min-h-100vh { min-height: 70vh; }
}
.max-w-400 { max-width: 400px; }
.max-w-500 { max-width: 500px; }
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
.max-w-900 { max-width: 900px; }
.max-w-none { max-width: none; }
.aspect-1-1 { aspect-ratio: 1/1; }
.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-3-2 { aspect-ratio: 3/2; }
.aspect-16-9 { aspect-ratio: 16/9; }
.aspect-21-9 { aspect-ratio: 21/9; }
.obj-cover { object-fit: cover; }
.obj-contain { object-fit: contain; }
.obj-top { object-position: top; }
.obj-bottom { object-position: bottom; }
.obj-center { object-position: center; }

/* -- opacity / pointer / whitespace / cursor -- */
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-15 { opacity: 0.15; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.opacity-100 { opacity: 1; }
.pe-none { pointer-events: none; }
.pe-auto { pointer-events: auto; }
.ws-nowrap { white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* -- background color -- */
.bg-base { background: #274d36; }
.bg-sub { background: #468560; }
.bg-dark { background: #274d36; }
.bg-section { background: #f7f7f7; }
.bg-section2 { background: #f2f2f0; }
.bg-white { background: #fff; }
.bg-body { background: #fcfcfc; }
.bg-base-light { background: #eaefe9; }
.bg-base-pale { background: #f5f7f4; }
.bg-accent-light { background: #eef4f0; }

/* -- shadow -- */
.shadow-sm { box-shadow: 0 2px 10px rgba(39, 77, 54, 0.08); }
.shadow-base { box-shadow: 0 4px 18px rgba(39, 77, 54, 0.1); }
.shadow-lg { box-shadow: 0 10px 34px rgba(39, 77, 54, 0.12); }
.shadow-none { box-shadow: none; }

/* -- hover state -- */
.hover-opacity-0:hover { opacity: 0; }
.hover-opacity-50:hover { opacity: 0.5; }
.hover-opacity-70:hover { opacity: 0.7; }
.hover-opacity-80:hover { opacity: 0.8; }
.hover-opacity-100:hover { opacity: 1; }
.hover-bg-base:hover { background: #274d36; }
.hover-bg-sub:hover { background: #468560; }
.hover-bg-accent:hover { background: #5e9c78; }
.hover-bg-white:hover { background: #fff; }
.hover-bg-dark:hover { background: #274d36; }
.hover-bg-section:hover { background: #f7f7f7; }
.hover-color-base:hover { color: #274d36; }
.hover-color-sub:hover { color: #468560; }
.hover-color-white:hover { color: #fff; }
.hover-color-dark:hover { color: #433430; }
.hover-shadow:hover { box-shadow: 0 4px 18px rgba(39, 77, 54, 0.1); }
.hover-shadow-lg:hover { box-shadow: 0 10px 34px rgba(39, 77, 54, 0.12); }
.hover-shadow-none:hover { box-shadow: none; }
.hover-up:hover { transform: translateY(-3px); }
.hover-up-sm:hover { transform: translateY(-2px); }
.hover-up-lg:hover { transform: translateY(-5px); }
.hover-scale:hover { transform: scale(1.05); }
.hover-scale-sm:hover { transform: scale(1.02); }
.hover-border-base:hover { border-color: #274d36; }
.hover-border-sub:hover { border-color: #468560; }
.transition { transition: all 0.3s ease; }
.transition-slow { transition: all 0.5s ease; }