@charset "UTF-8";

/* -------------------------------------
  utilities

  mini-utilities.css
  A tiny, dependency-free utility framework for margins, padding and font-size.
  - spacing scale (rem): 0, .125, .25, .5, .75, 1, 1.5, 2, 3, 4
  - classes: m-*, mt-*, mr-*, mb-*, ml-*, mx-*, my-*
             p-*, pt-*, pr-*, pb-*, pl-*, px-*, py-*
             m-n* / p-n* => negative spacing
  - font sizes: fs-xs .. fs-2xl and numeric fs-1..fs-6
  - responsive prefixes: sm:, md:, lg: (use like .sm\:m-2)
  Notes: class names use a single dash and numbers 0..9. Negative uses m-n1 etc.
------------------------------------- */

:root {
  /* spacing scale (1rem = 10px) */
  --sp-0: 0rem;    /* 0px */
  --sp-1: .2rem;   /* 2px */
  --sp-2: .4rem;   /* 4px */
  --sp-3: .8rem;   /* 8px */
  --sp-4: 1.2rem;  /* 12px */
  --sp-5: 1.6rem;  /* 16px */
  --sp-6: 2.4rem;  /* 24px */
  --sp-7: 3.2rem;  /* 32px */
  --sp-8: 4.8rem;  /* 48px */
  --sp-9: 6.4rem;  /* 64px */

  /* font sizes (1rem = 10px) */
  --fs-xs: 1.2rem;  /* 12px */
  --fs-sm: 1.4rem;  /* 14px */
  --fs-md: 1.6rem;  /* 16px */
  --fs-lg: 1.8rem;  /* 18px */
  --fs-xl: 2.0rem;  /* 20px */
  --fs-2xl: 2.4rem; /* 24px */

  --inner-padding: 5.34vw;
}

/* ----- SPACING UTILITIES ----- */
/* helper to avoid repetition: using explicit class list */

/* Margin shorthand */
.m-0{ margin: var(--sp-0) ; }
.m-1{ margin: var(--sp-1) ; }
.m-2{ margin: var(--sp-2) ; }
.m-3{ margin: var(--sp-3) ; }
.m-4{ margin: var(--sp-4) ; }
.m-5{ margin: var(--sp-5) ; }
.m-6{ margin: var(--sp-6) ; }
.m-7{ margin: var(--sp-7) ; }
.m-8{ margin: var(--sp-8) ; }
.m-9{ margin: var(--sp-9) ; }

/* Negative margins: use m-nX */
.m-n1{ margin: calc(var(--sp-1) * -1) ; }
.m-n2{ margin: calc(var(--sp-2) * -1) ; }
.m-n3{ margin: calc(var(--sp-3) * -1) ; }
.m-n4{ margin: calc(var(--sp-4) * -1) ; }
.m-n5{ margin: calc(var(--sp-5) * -1) ; }
.m-n6{ margin: calc(var(--sp-6) * -1) ; }
.m-n7{ margin: calc(var(--sp-7) * -1) ; }
.m-n8{ margin: calc(var(--sp-8) * -1) ; }
.m-n9{ margin: calc(var(--sp-9) * -1) ; }

/* Margin by side */
.mt-0{ margin-top: var(--sp-0) ; }
.mt-1{ margin-top: var(--sp-1) ; }
.mt-2{ margin-top: var(--sp-2) ; }
.mt-3{ margin-top: var(--sp-3) ; }
.mt-4{ margin-top: var(--sp-4) ; }
.mt-5{ margin-top: var(--sp-5) ; }
.mt-6{ margin-top: var(--sp-6) ; }
.mt-7{ margin-top: var(--sp-7) ; }
.mt-8{ margin-top: var(--sp-8) ; }
.mt-9{ margin-top: var(--sp-9) ; }

.mr-0{ margin-right: var(--sp-0) ; }
.mr-1{ margin-right: var(--sp-1) ; }
.mr-2{ margin-right: var(--sp-2) ; }
.mr-3{ margin-right: var(--sp-3) ; }
.mr-4{ margin-right: var(--sp-4) ; }
.mr-5{ margin-right: var(--sp-5) ; }
.mr-6{ margin-right: var(--sp-6) ; }
.mr-7{ margin-right: var(--sp-7) ; }
.mr-8{ margin-right: var(--sp-8) ; }
.mr-9{ margin-right: var(--sp-9) ; }

.mb-0{ margin-bottom: var(--sp-0) ; }
.mb-1{ margin-bottom: var(--sp-1) ; }
.mb-2{ margin-bottom: var(--sp-2) ; }
.mb-3{ margin-bottom: var(--sp-3) ; }
.mb-4{ margin-bottom: var(--sp-4) ; }
.mb-5{ margin-bottom: var(--sp-5) ; }
.mb-6{ margin-bottom: var(--sp-6) ; }
.mb-7{ margin-bottom: var(--sp-7) ; }
.mb-8{ margin-bottom: var(--sp-8) ; }
.mb-9{ margin-bottom: var(--sp-9) ; }

.ml-0{ margin-left: var(--sp-0) ; }
.ml-1{ margin-left: var(--sp-1) ; }
.ml-2{ margin-left: var(--sp-2) ; }
.ml-3{ margin-left: var(--sp-3) ; }
.ml-4{ margin-left: var(--sp-4) ; }
.ml-5{ margin-left: var(--sp-5) ; }
.ml-6{ margin-left: var(--sp-6) ; }
.ml-7{ margin-left: var(--sp-7) ; }
.ml-8{ margin-left: var(--sp-8) ; }
.ml-9{ margin-left: var(--sp-9) ; }

/* Axis shorthands */
.mx-0{ margin-left: var(--sp-0) ; margin-right: var(--sp-0) ; }
.mx-1{ margin-left: var(--sp-1) ; margin-right: var(--sp-1) ; }
.mx-2{ margin-left: var(--sp-2) ; margin-right: var(--sp-2) ; }
.mx-3{ margin-left: var(--sp-3) ; margin-right: var(--sp-3) ; }
.mx-4{ margin-left: var(--sp-4) ; margin-right: var(--sp-4) ; }
.mx-5{ margin-left: var(--sp-5) ; margin-right: var(--sp-5) ; }
.mx-6{ margin-left: var(--sp-6) ; margin-right: var(--sp-6) ; }
.mx-7{ margin-left: var(--sp-7) ; margin-right: var(--sp-7) ; }
.mx-8{ margin-left: var(--sp-8) ; margin-right: var(--sp-8) ; }
.mx-9{ margin-left: var(--sp-9) ; margin-right: var(--sp-9) ; }

.my-0{ margin-top: var(--sp-0) ; margin-bottom: var(--sp-0) ; }
.my-1{ margin-top: var(--sp-1) ; margin-bottom: var(--sp-1) ; }
.my-2{ margin-top: var(--sp-2) ; margin-bottom: var(--sp-2) ; }
.my-3{ margin-top: var(--sp-3) ; margin-bottom: var(--sp-3) ; }
.my-4{ margin-top: var(--sp-4) ; margin-bottom: var(--sp-4) ; }
.my-5{ margin-top: var(--sp-5) ; margin-bottom: var(--sp-5) ; }
.my-6{ margin-top: var(--sp-6) ; margin-bottom: var(--sp-6) ; }
.my-7{ margin-top: var(--sp-7) ; margin-bottom: var(--sp-7) ; }
.my-8{ margin-top: var(--sp-8) ; margin-bottom: var(--sp-8) ; }
.my-9{ margin-top: var(--sp-9) ; margin-bottom: var(--sp-9) ; }

/* ----- PADDING UTILITIES ----- */
.p-0{ padding: var(--sp-0) ; }
.p-1{ padding: var(--sp-1) ; }
.p-2{ padding: var(--sp-2) ; }
.p-3{ padding: var(--sp-3) ; }
.p-4{ padding: var(--sp-4) ; }
.p-5{ padding: var(--sp-5) ; }
.p-6{ padding: var(--sp-6) ; }
.p-7{ padding: var(--sp-7) ; }
.p-8{ padding: var(--sp-8) ; }
.p-9{ padding: var(--sp-9) ; }

.pt-0{ padding-top: var(--sp-0) ; }
.pt-1{ padding-top: var(--sp-1) ; }
.pt-2{ padding-top: var(--sp-2) ; }
.pt-3{ padding-top: var(--sp-3) ; }
.pt-4{ padding-top: var(--sp-4) ; }
.pt-5{ padding-top: var(--sp-5) ; }
.pt-6{ padding-top: var(--sp-6) ; }
.pt-7{ padding-top: var(--sp-7) ; }
.pt-8{ padding-top: var(--sp-8) ; }
.pt-9{ padding-top: var(--sp-9) ; }

.pr-0{ padding-right: var(--sp-0) ; }
.pr-1{ padding-right: var(--sp-1) ; }
.pr-2{ padding-right: var(--sp-2) ; }
.pr-3{ padding-right: var(--sp-3) ; }
.pr-4{ padding-right: var(--sp-4) ; }
.pr-5{ padding-right: var(--sp-5) ; }
.pr-6{ padding-right: var(--sp-6) ; }
.pr-7{ padding-right: var(--sp-7) ; }
.pr-8{ padding-right: var(--sp-8) ; }
.pr-9{ padding-right: var(--sp-9) ; }

.pb-0{ padding-bottom: var(--sp-0) ; }
.pb-1{ padding-bottom: var(--sp-1) ; }
.pb-2{ padding-bottom: var(--sp-2) ; }
.pb-3{ padding-bottom: var(--sp-3) ; }
.pb-4{ padding-bottom: var(--sp-4) ; }
.pb-5{ padding-bottom: var(--sp-5) ; }
.pb-6{ padding-bottom: var(--sp-6) ; }
.pb-7{ padding-bottom: var(--sp-7) ; }
.pb-8{ padding-bottom: var(--sp-8) ; }
.pb-9{ padding-bottom: var(--sp-9) ; }

.pl-0{ padding-left: var(--sp-0) ; }
.pl-1{ padding-left: var(--sp-1) ; }
.pl-2{ padding-left: var(--sp-2) ; }
.pl-3{ padding-left: var(--sp-3) ; }
.pl-4{ padding-left: var(--sp-4) ; }
.pl-5{ padding-left: var(--sp-5) ; }
.pl-6{ padding-left: var(--sp-6) ; }
.pl-7{ padding-left: var(--sp-7) ; }
.pl-8{ padding-left: var(--sp-8) ; }
.pl-9{ padding-left: var(--sp-9) ; }

.px-0{ padding-left: var(--sp-0) ; padding-right: var(--sp-0) ; }
.px-1{ padding-left: var(--sp-1) ; padding-right: var(--sp-1) ; }
.px-2{ padding-left: var(--sp-2) ; padding-right: var(--sp-2) ; }
.px-3{ padding-left: var(--sp-3) ; padding-right: var(--sp-3) ; }
.px-4{ padding-left: var(--sp-4) ; padding-right: var(--sp-4) ; }
.px-5{ padding-left: var(--sp-5) ; padding-right: var(--sp-5) ; }
.px-6{ padding-left: var(--sp-6) ; padding-right: var(--sp-6) ; }
.px-7{ padding-left: var(--sp-7) ; padding-right: var(--sp-7) ; }
.px-8{ padding-left: var(--sp-8) ; padding-right: var(--sp-8) ; }
.px-9{ padding-left: var(--sp-9) ; padding-right: var(--sp-9) ; }

.py-0{ padding-top: var(--sp-0) ; padding-bottom: var(--sp-0) ; }
.py-1{ padding-top: var(--sp-1) ; padding-bottom: var(--sp-1) ; }
.py-2{ padding-top: var(--sp-2) ; padding-bottom: var(--sp-2) ; }
.py-3{ padding-top: var(--sp-3) ; padding-bottom: var(--sp-3) ; }
.py-4{ padding-top: var(--sp-4) ; padding-bottom: var(--sp-4) ; }
.py-5{ padding-top: var(--sp-5) ; padding-bottom: var(--sp-5) ; }
.py-6{ padding-top: var(--sp-6) ; padding-bottom: var(--sp-6) ; }
.py-7{ padding-top: var(--sp-7) ; padding-bottom: var(--sp-7) ; }
.py-8{ padding-top: var(--sp-8) ; padding-bottom: var(--sp-8) ; }
.py-9{ padding-top: var(--sp-9) ; padding-bottom: var(--sp-9) ; }

/* ----- FONT SIZE UTILITIES ----- */
.fs-xs{ font-size: var(--fs-xs) ; }
.fs-sm{ font-size: var(--fs-sm) ; }
.fs-md{ font-size: var(--fs-md) ; }
.fs-lg{ font-size: var(--fs-lg) ; }
.fs-xl{ font-size: var(--fs-xl) ; }
.fs-2xl{ font-size: var(--fs-2xl) ; }

/* numeric sizes for fine control */
.fs-1{ font-size: .75rem ; }
.fs-2{ font-size: .875rem ; }
.fs-3{ font-size: 1rem ; }
.fs-4{ font-size: 1.125rem ; }
.fs-5{ font-size: 1.25rem ; }
.fs-6{ font-size: 1.5rem ; }

/* ----- RESPONSIVE PREFIXES ----- */
/* Use classes with escaped colon in HTML: e.g. class="sm:mx-3 md:mx-5" becomes class="sm\:mx-3 md\:mx-5" in HTML source. */

/* small >= 576px */
@media (min-width: 576px){
  .sm\:m-0{ margin: var(--sp-0) ; }
  .sm\:m-1{ margin: var(--sp-1) ; }
  .sm\:m-2{ margin: var(--sp-2) ; }
  .sm\:m-3{ margin: var(--sp-3) ; }
  .sm\:m-4{ margin: var(--sp-4) ; }
  .sm\:m-5{ margin: var(--sp-5) ; }
  .sm\:p-3{ padding: var(--sp-3) ; }
  .sm\:px-5{ padding-left: var(--sp-5) ; padding-right: var(--sp-5) ; }
  .sm\:fs-lg{ font-size: var(--fs-lg) ; }
}

/* medium >= 768px */
@media (min-width: 768px){
  .md\:m-0{ margin: var(--sp-0) ; }
  .md\:m-3{ margin: var(--sp-3) ; }
  .md\:mx-4{ margin-left: var(--sp-4) ; margin-right: var(--sp-4) ; }
  .md\:p-5{ padding: var(--sp-5) ; }
  .md\:fs-xl{ font-size: var(--fs-xl) ; }
}

/* large >= 1024px */
@media (min-width: 1024px){
  .lg\:m-0{ margin: var(--sp-0) ; }
  .lg\:m-4{ margin: var(--sp-4) ; }
  .lg\:mx-6{ margin-left: var(--sp-6) ; margin-right: var(--sp-6) ; }
  .lg\:p-6{ padding: var(--sp-6) ; }
  .lg\:fs-2xl{ font-size: var(--fs-2xl) ; }
}

/* tiny helpful helpers */
.container-center{ margin-inline: auto; }
.hide{ display: none ; }
.inline-block{ display: inline-block ; }
.block{ display: block ; }

/* end */

/* =====================================
   Font-size utilities 62.5%（1rem=10px）
   ===================================== */
.fs-10 { font-size: 1.0rem; }
.fs-11 { font-size: 1.1rem; }
.fs-12 { font-size: 1.2rem; }
.fs-13 { font-size: 1.3rem; }
.fs-14 { font-size: 1.4rem; }
.fs-15 { font-size: 1.5rem; }
.fs-16 { font-size: 1.6rem; }
.fs-17 { font-size: 1.7rem; }
.fs-18 { font-size: 1.8rem; }
.fs-19 { font-size: 1.9rem; }
.fs-20 { font-size: 2.0rem; }
.fs-22 { font-size: 2.2rem; }
.fs-24 { font-size: 2.4rem; }
.fs-26 { font-size: 2.6rem; }
.fs-28 { font-size: 2.8rem; }
.fs-30 { font-size: 3.0rem; }
.fs-32 { font-size: 3.2rem; }
.fs-34 { font-size: 3.4rem; }
.fs-36 { font-size: 3.6rem; }
.fs-40 { font-size: 4.0rem; }
.fs-42 { font-size: 4.2rem; }
.fs-50 { font-size: 5rem ; }
.fs-52 { font-size: 5.2rem ; }

/* =====================================
   Text align utilities
   ===================================== */
.ta-left { text-align: left ; }
.ta-center { text-align: center ; }
.ta-right { text-align: right ; }

/* =====================================
   Font weight utilities
   ===================================== */
.fw-400 { font-weight: 400 ; }
.fw-500 { font-weight: 500 ; }
.fw-600 { font-weight: 600 ; }
.fw-700 { font-weight: 700 ; }

/* =====================================
   Flex utilities
   ===================================== */
.flex { display: flex ; }
.inline-flex { display: inline-flex ; }
.flex-col { flex-direction: column ; }
.flex-row { flex-direction: row ; }
.flex-wrap { flex-wrap: wrap ; }
.flex-nowrap { flex-wrap: nowrap ; }
.justify-start { justify-content: flex-start ; }
.justify-center { justify-content: center ; }
.justify-end { justify-content: flex-end ; }
.justify-between { justify-content: space-between ; }
.justify-around { justify-content: space-around ; }
.items-start { align-items: flex-start ; }
.items-center { align-items: center ; }
.items-end { align-items: flex-end ; }
.column-reverse { flex-direction: column-reverse; }
.no-wrap { flex-wrap: nowrap!important; }
.gap-1 { gap: var(--sp-1) ; }
.gap-2 { gap: var(--sp-2) ; }
.gap-3 { gap: var(--sp-3) ; }
.gap-4 { gap: var(--sp-4) ; }
.gap-5 { gap: var(--sp-5) ; }

/* =====================================
    Flex child width utilities (30%〜70%)
    ===================================== */
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }

/* =====================================
   Line-height utilities (100%〜200%)
   ===================================== */
.lh-100 { line-height: 1; }
.lh-110 { line-height: 1.1; }
.lh-120 { line-height: 1.2; }
.lh-130 { line-height: 1.3; }
.lh-140 { line-height: 1.4; }
.lh-150 { line-height: 1.5; }
.lh-160 { line-height: 1.6; }
.lh-170 { line-height: 1.7; }
.lh-180 { line-height: 1.8; }
.lh-190 { line-height: 1.9; }
.lh-200 { line-height: 2; }


@media (width < 768px) {
  .mt-0-sp {
    margin-top: 0 !important;
  }
  .mb-0-sp {
    margin-bottom: 0 !important;
  }
  .flex {
    display: block;
  }
  .flex-imp {
    display: flex !important;
    gap: 18px !important;
    margin-top: 30px !important;
  }
  .flex-sp {
    display: flex;
  }
  .column-reverse-sp {
    display: flex !important;
    flex-direction: column-reverse;
  }
  .d-contents {
    display: contents;
  }
  .w-20, .w-25, .w-30, .w-35, .w-40, .w-45, .w-50, .w-55, .w-60, .w-65, .w-70, .w-75, .w-80 {
    width: 100%;
  }
}


/* -------------------------------------
  base
------------------------------------- */

:root {
  --text-color: #1B1B1B;
}

body {
  font-family: 'Noto Sans JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color: var(--text-color);
}

html {
  font-size: 62.5%;
}

img {
  width: 100%;
}

main {
  /* padding: 100px 0 80px; */
  padding-top: 100px;
}

article {
  padding-bottom: 64px;
}


/* -------------------------------------
  style
------------------------------------- */

.inner-l {
  max-width: calc(1040px + var(--inner-padding) * 2);
  margin: auto;
  padding: 0 var(--inner-padding);
}

.inner {
  max-width: calc(800px + var(--inner-padding) * 2);
  margin: auto;
  padding: 0 var(--inner-padding);
}

.inner-s {
  max-width: calc(770px + var(--inner-padding) * 2);
  margin: auto;
  padding: 0 var(--inner-padding);
}

.inner-xs {
  max-width: 560px;
  margin: auto;
}

.is-pc {
  display: block;
}

.is-sp,
span.is-sp {
  display: none;
}

span.is-pc {
  display: inline;
}

.ff-noto-sans {
  font-family: "Noto Sans JP", sans-serif;
}

.ff-roboto {
  font-family: "Roboto", sans-serif;
}

.ff-roboto-c {
  font-family: "Roboto Condensed", sans-serif;
}

.ff-shippori {
  font-family: "Shippori Mincho B1", serif;
}

.ff-arsenal {
  font-family: "Arsenal", sans-serif;
}

.ff-arsenal-sc {
  font-family: "Arsenal SC", sans-serif;
}

.ff-inter {
  font-family: "Inter", sans-serif;
}

.ff-autour-one {
  font-family: "Autour One", system-ui;
}

.ff-crimson-pro {
  font-family: "Crimson Pro", serif;
}

.head__number {
  padding-top: 35px;
}

.head__number span {
  padding: 0 12px;
}

.head__number span:first-of-type {
  border-right: 1px solid var(--text-color);
}

.indent {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

.link {
  color: #007AFF;
}

.link-blue {
  color: #374EA2;
  text-decoration: underline;
}

a.link,
a.link-blue {
  transition: all .3s;
}

a.link:hover,
a.link-blue:hover {
  opacity: .7;
}


/* -------------------------------------
  header
------------------------------------- */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #fff;
  z-index: 999;
}

header > * {
  top: 50%;
  transform: translateY(-50%);
}

header a {
  transition: all .3s;
}

header a:hover {
  opacity: .7;
}

.header__logo {
  position: absolute;
  left: 40px;
  width: 122px;
}

.header__main-logo {
  position: absolute;
  width: 185px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header__nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transform: none;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

.header__nav.open {
  opacity: 1;
  visibility: visible;
}

.header__nav .inner-s {
  height: 100%;
}

.nav__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-bottom: 30px;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.nav__content::-webkit-scrollbar {
  display: none;
}

.nav__logo img {
  width: 180px;
}

.nav__logo p {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 18px;
}

.nav__logo p span {
  position: relative;
}

.nav__logo p span:nth-of-type(1)::before {
  position: absolute;
  content: '';
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--text-color);
}

.nav__feature {
  margin-top: 64px;
}

.nav__main-list {
  font-family: "Shippori Mincho B1", serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.nav__main-list span {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  padding-left: 10px;
}

.nav__feature .title {
  font-family: "Shippori Mincho B1", serif;
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  margin-top: 16px;
}

.nav__wrap {
  display: flex;
  justify-content: space-between;
  gap: 5%;
  width: 100%;
  margin-top: 48px;
}

.nav__wrap > * {
  width: 50%;
}

.nav-lists__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
  padding-left: 24px;
  border-left: 1px solid #6B6B6B;
}

.nav-lists__left li {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
}

.nav-lists__right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.drawer-btn {
  position: absolute;
  width: 40px;
  height: 26px;
  right: 40px;
  display: inline-block;
  cursor: pointer;
  z-index: 9999;
}

.drawer-btn span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: #6B6B6B;
  transition: 0.3s;
}

.drawer-btn span:nth-child(1) { top: 0; }
.drawer-btn span:nth-child(2) { top: 12px; }
.drawer-btn span:nth-child(3) { top: 24px; }

.drawer-btn.active span:nth-child(1) {
  top: 12px;
  transform: rotate(45deg);
}

.drawer-btn.active span:nth-child(2) {
  opacity: 0;
}

.drawer-btn.active span:nth-child(3) {
  top: 12px;
  transform: rotate(-45deg);
}


/* -------------------------------------
  footer
------------------------------------- */

footer {
  color: #fff;
  text-align: center;
  padding: 48px 0;
  background-color: #B29881;
}

.footer__main-logo {
  width: 185px;
  margin: auto;
}

.footer__text {
  font-size: 1.4rem;
  margin-top: 24px;
}

.footer__logo {
  width: 280px;
  height: 56px;
  margin: 12px auto 0;
}

.footer__logo a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 28px;
}

.footer__logo img {
  width: 98px;
}

.footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.footer__links li {
  display: flex;
  align-items: center;
  padding-right: 0.8em;
}

.footer__links li:not(:last-of-type)::after {
  content: '|';
  padding-left: 0.8em;
}

.footer__links li a {
  font-size: 1.2rem;
  line-height: 2;
}

.copyright {
  margin-top: 20px;
}

.copyright small {
  font-size: 1rem;
}

footer a {
  transition: all .3s;
}

footer a:hover {
  opacity: .7;
}



/* -------------------------------------
  responsive
------------------------------------- */

@media (width < 768px) {
  .full-container {
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .full-container-left {
    width: calc(100% + var(--inner-padding));
    margin-left: calc(50% - 50vw) !important;
  }

  .full-container-right {
    width: calc(100% + var(--inner-padding));
    margin-right: calc(50% - 50vw) !important;
  }

  main {
    padding-top: 70px;
    overflow: hidden;
  }

  article {
    padding-bottom: 10px;
  }

  .is-pc,
  span.is-pc {
    display: none;
  }

  .is-sp {
    display: block;
  }

  span.is-sp {
    display: inline;
  }

  .head__number {
    padding-top: 20px;
  }


  /* header
  ------------------------------------- */

  header {
    height: 70px;
  }

  .header__logo {
    top: 7px;
    left: 17px;
    width: 65px;
    transform: none;
  }

  .header__main-logo {
    width: 130px;
  }

  .nav__content {
    justify-content: flex-start;
    padding: 32px 0 60px;
  }

  .nav__feature {
    margin-top: 32px;
  }

  .nav__feature .title {
    font-size: 2.8rem;
  }

  .nav__wrap {
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }

  .nav__wrap > * {
    width: 100%;
  }

  .nav-lists__left,
  .nav-lists__right {
    gap: 16px;
  }

  .nav-lists__left {
    margin-top: 12px;
  }

  .drawer-btn {
    right: 9px;
  }
}