@charset "UTF-8";
/*====================================================================================
[TABLE OF CONTENT]

BREAKPOINTS: PIXEL / 16 = EM.
MAX-WIDTH (−0.02px overlap).         MIN-WIDTH
- 379.98px  (23.74875em).            - 380px  (23.75em).
- 575.98px  (35.99875em).            - 576px  (36em).
- 767.98px  (47.99875em).            - 768px  (48em).
- 991.98px  (61.99875em).            - 992px  (62em).
- 1024.98px (64.06125em).            - 1025px (64.0625em).
- 1199.98px (74.99875em).            - 1200px (75em).
- 1399.98px (87.49875em).            - 1400px (87.5em).
- 1599.98px (99.99875em).            - 1600px (100em).
- 1799.98px (112.49875em).           - 1800px (112.5em).
- 1920.98px (120.06125em).           - 1921px (120.0625em).

1. FOUNDATION.
   1.1. VARIABLE.
   1.2. BASE.
   1.3. SETUP.
2. LAYOUT.
   2.1. CONTAINER.
   2.2. HEADER.
   2.3. SECTION COMMON.
   2.4. FOOTER.
3. COMPONENT.
   3.1. ACCESSIBILITY.
   3.2. CLEARFIX.
   3.3. CIRCLE.
   3.4. TITLE.
   3.5. HEADING.
   3.6. BUTTON.
   3.7. TEXT.
   3.8. LINK.
   3.9. LOGO.
   3.10. DECORATION.
   3.11. ITEM.
   3.13. LIST.
   3.14. FORM.
4. PROJECT.
   4.1. DECORATION.
   4.2. NAVIGATION.
   4.3. GROUP.
   4.4. BANNER.
5. KEYFRAMES.
   5.1. MOUSE OUT TEXT.
   5.2. MOUSE IN TEXT.
   5.3. MOUSE OUT TEXT REVERSE.
   5.4. MOUSE IN TEXT REVERSE.
====================================================================================*/
/*====================================================================================
1. FOUNDATION.
====================================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/*------------------------------------------------------------------------------------
1.1. VARIABLE.
------------------------------------------------------------------------------------*/
/*---------- COLOR PALETTE ----------*/
:root {
  --color-blue-100: #EEF3F9;
  --color-blue-200-rgb: 210, 229, 247;
  --color-blue-400: #70D6EA;
  --color-blue-500: #44C0DE;
  --color-gray-900: #363636;
  --color-gray-300: #E1E5E8;
  --color-gray-100: #F6FAFD;
  --color-white: #FFFFFF;
  --color-white-rgb: 255, 255, 255;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --font-noto-sans-jp: "Noto Sans JP", sans-serif;
}

/*---------- SEMANTIC COLORS ----------*/
:root {
  --theme-color-primary: var(--color-blue-500);
  --theme-color-primary-muted: var(--color-blue-100);
  --theme-color-primary-soft-rgb: var(--color-blue-200-rgb);
  --theme-color-primary-medium: var(--color-blue-400);
  --theme-color-neutral: var(--color-gray-900);
  --theme-color-neutral-muted: var(--color-gray-100);
  --theme-color-neutral-light: var(--color-gray-300);
  --theme-color-light: var(--color-white);
  --theme-color-light-rgb: var(--color-white-rgb);
  --theme-color-dark: var(--color-black);
  --theme-color-dark-rgb: var(--color-black-rgb);
  --theme-font-jp-primary: var(--font-noto-sans-jp);
}

/*---------- SPACING SYSTEM ----------*/
@media (max-width: 47.99875em) {
  :root {
    --height-header: 70;
    --spacing-sp-50-pc-100: 5rem;
    --spacing-sp-45-pc-90: 4.5rem;
    --spacing-sp-40-pc-80: 4rem;
    --spacing-sp-35-pc-70: 3.5rem;
    --spacing-sp-30-pc-60: 3rem;
    --spacing-sp-30-pc-50: 3rem;
    --spacing-sp-25-pc-50: 2.5rem;
    --spacing-sp-25-pc-45: 2.5rem;
    --spacing-sp-25-pc-40: 2.5rem;
    --spacing-sp-20-pc-40: 2rem;
    --spacing-sp-20-pc-30: 2rem;
    --spacing-sp-15-pc-30: 1.5rem;
    --spacing-sp-10-pc-30: 1rem;
    --spacing-sp-15-pc-25: 1.5rem;
    --spacing-sp-15-pc-20: 1.5rem;
    --spacing-sp-10-pc-20: 1rem;
    --spacing-sp-10-pc-15: 1rem;
    --spacing-sp-5-pc-10: 0.5rem;
  }
}
@media (min-width: 48em) {
  :root {
    --spacing-sp-50-pc-100: 10rem;
    --spacing-sp-45-pc-90: 9rem;
    --spacing-sp-40-pc-80: 8rem;
    --spacing-sp-35-pc-70: 7rem;
    --spacing-sp-30-pc-60: 6rem;
    --spacing-sp-30-pc-50: 5rem;
    --spacing-sp-25-pc-50: 5rem;
    --spacing-sp-25-pc-45: 4.5rem;
    --spacing-sp-25-pc-40: 4rem;
    --spacing-sp-20-pc-40: 4rem;
    --spacing-sp-20-pc-30: 3rem;
    --spacing-sp-15-pc-30: 3rem;
    --spacing-sp-10-pc-30: 3rem;
    --spacing-sp-15-pc-25: 2.5rem;
    --spacing-sp-15-pc-20: 2rem;
    --spacing-sp-10-pc-20: 2rem;
    --spacing-sp-10-pc-15: 1.5rem;
    --spacing-sp-5-pc-10: 1rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  :root {
    --height-header: 110;
  }
}
@media (min-width: 64.0625em) {
  :root {
    --height-header: 115;
  }
}
/*------------------------------------------------------------------------------------
1.2. BASE.
------------------------------------------------------------------------------------*/
html {
  --anchor-scroll-offset: 7rem;

  scroll-padding-top: var(--anchor-scroll-offset);
  font-size: 62.5%;
  overflow-y: auto;
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  html {
    --anchor-scroll-offset: 11rem;
  }
}
@media (min-width: 64.0625em) {
  html {
    --anchor-scroll-offset: 11.5rem;
  }
}

body {
  background-color: var(--theme-color-light);
  color: var(--theme-color-neutral);
  font-weight: 500;
  font-family: var(--theme-font-jp-primary);
  -webkit-text-size-adjust: 100%;
}
body.is-open {
  position: fixed;
  width: 100%;
}

@media (max-width: 47.99875em) {
  body {
    font-size: 1.4rem;
    line-height: 1.7;
  }
}
@media (min-width: 48em) {
  body {
    font-size: 1.6rem;
    line-height: 1.85;
  }
}
.l-wrapper {
  position: relative;
  width: max(100%, 32rem);
  height: 100%;
  overflow: hidden;
}

@media (max-width: 47.99875em) {
  .l-main {
    padding-block-start: 7rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .l-main {
    padding-block-start: 11rem;
  }
}
/*------------------------------------------------------------------------------------
1.3. SETUP.
------------------------------------------------------------------------------------*/
h1 {
  line-height: 1.4;
}

h2,
h3,
h4,
h5,
h6 {
  line-height: 1.6;
}

a {
  color: currentColor;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}

@media (min-width: 48em) {
  a[href^="tel:"] {
    cursor: pointer;
    pointer-events: none;
  }
  a {
    transition: color 0.3s ease;
  }
  img {
    transition: transform 0.5s ease;
  }
}
picture {
  display: block;
  line-height: 1;
}

figure {
  margin: 0;
  padding: 0;
}

input,
select,
option,
optgroup,
textarea {
  background-color: var(--theme-color-light);
  color: var(--theme-color-neutral);
  font-weight: 500;
  font-family: var(--theme-font-jp-primary);
  -webkit-text-size-adjust: 100%;
}

button,
input[type=submit],
input[type=button] {
  font-family: var(--theme-font-jp-primary);
}

.is-ios input,
.is-ios textarea {
  font-size: 1.6rem;
}

@media (max-width: 47.99875em) {
  input,
  select,
  option,
  optgroup,
  textarea {
    font-size: 1.4rem;
    line-height: 1.7;
  }
}
@media (min-width: 48em) {
  input,
  select,
  option,
  optgroup,
  textarea {
    font-size: 1.6rem;
    line-height: 1.85;
  }
}
/*====================================================================================
2. LAYOUT.
====================================================================================*/
/*------------------------------------------------------------------------------------
2.1. CONTAINER.
------------------------------------------------------------------------------------*/
.l-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.l-container {
  max-width: 123rem;
}

/*------------------------------------------------------------------------------------
2.2. HEADER.
------------------------------------------------------------------------------------*/
.l-header {
  position: fixed;
  z-index: 999;
  inset-block-start: 0;
  inset-inline: 0;
}
.l-header.is-fixed {
  background-color: var(--theme-color-light);
  box-shadow: 0.1rem 0.4rem 0.8rem -0.4rem rgba(0, 0, 0, 0.1);
}
.l-header__row {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr max-content;
}

@media (max-width: 47.99875em) {
  .l-header__row {
    padding: 1rem 1.5rem 1rem 1.5rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .l-header__row {
    padding: 1.5rem;
  }
}
@media (min-width: 64.0625em) {
  .l-header.is-fixed .l-header__row {
    padding-block: 1.4rem 2.4rem;
  }
  .l-header .c-logo {
    margin-block-end: -1rem;
  }
}
@media (min-width: 64.0625em) and (max-width: 74.99875em) {
  .l-header__row {
    padding: 2.8rem 1.5rem 3.5rem 1.5rem;
  }
}
@media (min-width: 75em) and (max-width: 99.99875em) {
  .l-header__row {
    padding: 2.8rem 2.5rem 3.5rem 2.5rem;
  }
}
@media (min-width: 100em) {
  .l-header__row {
    padding: 2.8rem 4.5rem 3.5rem 4.5rem;
  }
}
/*------------------------------------------------------------------------------------
2.3. SECTION COMMON.
------------------------------------------------------------------------------------*/
.l-common__item {
  text-align: center;
}
.l-common__item:not(:first-child) {
  margin-block-start: 1.2rem;
  padding-inline-start: 2.5rem;
}

@media (max-width: 47.99875em) {
  .l-common {
    padding-block: 5rem;
  }
  .l-common .c-title {
    text-align: center;
    margin-block-end: 2rem;
  }
  .l-common__row {
    margin-block-start: 2rem;
  }
  .l-common__desc, .l-common__right {
    text-align: center;
  }
  .l-common__left {
    padding-inline-end: 4rem;
  }
  .l-common__right {
    margin-block-start: 3.5rem;
  }
}
@media (min-width: 48em) {
  .l-common {
    padding-block: 10rem;
  }
  .l-common .c-title {
    margin-block-end: 3.8rem;
  }
  .l-common__row {
    display: flex;
    align-items: center;
    margin-block-start: 3.5rem;
  }
  .l-common__left {
    flex: 0 0 auto;
  }
  .l-common__right {
    flex: 1;
    min-width: 1px;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .l-common__right {
    padding-inline-start: 2.5rem;
  }
}
@media (min-width: 64.0625em) {
  .l-common__row {
    padding-inline: 2rem;
  }
  .l-common__right {
    padding-inline-start: 14.5rem;
  }
}
/*------------------------------------------------------------------------------------
2.4. FOOTER.
------------------------------------------------------------------------------------*/
.l-footer .l-container {
  position: relative;
}
.l-footer__copy {
  color: var(--theme-color-light);
  text-align: center;
}
.l-footer__copy small {
  font-size: 1.2rem;
}

@media (max-width: 35.99875em) {
  .l-footer {
    padding-block: 7rem 1.5rem;
    background: url("./../common_img/l-footer-bg-sp.svg") no-repeat left 41% top/cover;
  }
}
@media (min-width: 36em) and (max-width: 47.99875em) {
  .l-footer {
    padding-block: 10rem 1.5rem;
    background: url("./../common_img/l-footer-bg-sp.svg") no-repeat center top/cover;
  }
}
@media (max-width: 47.99875em) {
  .l-footer .c-logo {
    margin-block-end: 2rem;
  }
  .l-footer .p-group-footer {
    margin-block-end: 3rem;
  }
  .l-footer .p-nav-footer {
    margin-block-end: 3rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .l-footer {
    padding-block: 10rem 1.5rem;
    background: url("./../common_img/l-footer-bg.svg") no-repeat left 40% top/cover;
  }
}
@media (min-width: 48em) {
  .l-footer .c-logo {
    margin-block-end: 3rem;
  }
  .l-footer .p-group-footer {
    margin-block-end: 6.5rem;
  }
  .l-footer .p-nav-footer {
    margin-block-end: 4.5rem;
  }
}
@media (max-width: 61.99875em) {
  .l-footer .c-deco {
    inset-block-start: -14rem;
    inset-inline-start: -10rem;
    width: 60vw;
  }
}
@media (min-width: 62em) and (max-width: 99.99875em) {
  .l-footer .c-deco {
    inset-block-end: 20rem;
    inset-inline-start: -30rem;
    width: 60rem;
  }
}
@media (min-width: 64.0625em) {
  .l-footer {
    padding-block: 15rem 1.5rem;
    background: url("./../common_img/l-footer-bg.svg") no-repeat center top/cover;
  }
}
@media (min-width: 100em) {
  .l-footer .c-deco {
    inset-block-end: -2rem;
    inset-inline-start: -52.7rem;
  }
}
/*====================================================================================
3. COMPONENT.
====================================================================================*/
/*------------------------------------------------------------------------------------
3.1. ACCESSIBILITY.
------------------------------------------------------------------------------------*/
.c-visually-hidden:not(:focus):not(:active) {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/*---------- SKIP LINK ----------*/
#skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 2.5rem;
  padding: 1rem 3rem;
  color: var(--theme-color-primary);
  font-weight: 500;
  text-decoration: none;
  background-color: var(--theme-color-light);
  border: 1px solid var(--theme-color-primary);
}
#skip-link:focus-visible {
  inset-block-start: 2.5rem;
  z-index: 1001;
}

/*------------------------------------------------------------------------------------
3.2. CLEARFIX.
------------------------------------------------------------------------------------*/
.c-clearfix {
  display: block;
}
.c-clearfix::after {
  display: block;
  content: " ";
  height: 0;
  clear: both;
  visibility: hidden;
}

/*------------------------------------------------------------------------------------
3.3. CIRCLE.
------------------------------------------------------------------------------------*/
.c-circle {
  position: absolute;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 3rem;
  border: 1px solid var(--theme-color-primary);
  overflow: hidden;
}
.c-circle__arrow {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 1.3rem;
  height: 0.8rem;
  margin-inline-start: -0.6rem;
  margin-block-start: -0.4rem;
}
.c-circle__arrow::before {
  position: absolute;
  content: "";
  opacity: 1;
  width: 100%;
  height: 100%;
  background: url("./../common_img/c-arrow2-light.svg") no-repeat center center/100% auto;
  transition: opacity 0.1s ease;
}

@media (min-width: 64.0625em) {
  .c-circle {
    transition: border-color 0.1s ease;
  }
  .c-circle:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  .c-circle:hover .c-circle__arrow::before {
    opacity: 0;
  }
  .c-circle:hover .c-circle__arrow::after {
    opacity: 1;
  }
  .c-circle__arrow::after {
    position: absolute;
    content: "";
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.1s ease;
    background: url("./../common_img/c-arrow2-primary.svg") no-repeat center center/100% auto;
  }
  .c-circle::after {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
}
/*---------- CIRCLE PRIMARY ----------*/
.c-circle--primary {
  background-color: var(--theme-color-primary);
}

@media (min-width: 48em) {
  .c-circle--primary::after {
    background-color: var(--theme-color-light);
  }
}
/*---------- CIRCLE LEFT ----------*/
@media (min-width: 48em) {
  .c-circle--left:hover::after {
    transform-origin: right center;
  }
  .c-circle--left::after {
    transform-origin: left center;
  }
  .c-circle--left .c-circle__arrow {
    transform: scaleX(-1);
  }
}
/*------------------------------------------------------------------------------------
3.4. TITLE.
------------------------------------------------------------------------------------*/
.c-title__text {
  font-weight: 700;
}
.c-title__text--jp {
  position: relative;
  display: inline-block;
}
.c-title__text--jp::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  background: url("./../common_img/c-icon-plane-primary.svg") no-repeat center center/100% auto;
}
.c-title__text--en {
  display: block;
  line-height: 1.25;
}

/*---------- TITLE MEDIUM ----------*/
.c-title--sm .c-title__text--jp::before {
  inset-block-start: 0.5rem;
}

@media (max-width: 47.99875em) {
  .c-title--sm .c-title__text--jp {
    padding-inline-start: 1.8rem;
    font-size: 1.4rem;
  }
  .c-title--sm .c-title__text--jp::before {
    width: 1.1rem;
    height: 1.3rem;
  }
  .c-title--sm .c-title__text--en {
    font-size: 2.2rem;
  }
}
@media (min-width: 48em) {
  .c-title--sm .c-title__text--en {
    margin-block-start: 0.3rem;
  }
}
@media (min-width: 48em) and (max-width: 74.99875em) {
  .c-title--sm .c-title__text--jp {
    font-size: 1.5rem;
  }
  .c-title--sm .c-title__text--en {
    font-size: 2.6rem;
  }
}
@media (min-width: 48em) and (max-width: 74.99875em) {
  .c-title--sm .c-title__text--jp {
    padding-inline-start: 2rem;
  }
  .c-title--sm .c-title__text--jp::before {
    width: 1.3rem;
    height: 1.5rem;
  }
}
@media (min-width: 75em) {
  .c-title--sm .c-title__text--jp {
    padding-inline-start: 2.2rem;
    font-size: 1.6rem;
  }
  .c-title--sm .c-title__text--jp::before {
    inset-block-start: 0.5rem;
    width: 1.5rem;
    height: 1.7rem;
  }
  .c-title--sm .c-title__text--en {
    margin-block-start: 0.3rem;
    font-size: 3rem;
  }
}
/*---------- TITLE MEDIUM ----------*/
.c-title--md .c-title__text--jp::before {
  inset-block-start: 0.5rem;
}

@media (max-width: 47.99875em) {
  .c-title--md .c-title__text--jp {
    padding-inline-start: 2rem;
    font-size: 1.4rem;
  }
  .c-title--md .c-title__text--jp::before {
    width: 1.3rem;
    height: 1.5rem;
  }
  .c-title--md .c-title__text--en {
    font-size: 3.1rem;
  }
}
@media (min-width: 48em) {
  .c-title--md .c-title__text--jp {
    padding-inline-start: 2.2rem;
    font-size: 1.6rem;
  }
  .c-title--md .c-title__text--jp::before {
    width: 1.5rem;
    height: 1.7rem;
  }
  .c-title--md .c-title__text--en {
    font-size: 4.1rem;
  }
}
/*---------- TITLE LARGE ----------*/
@media (max-width: 47.99875em) {
  .c-title--lg .c-title__text--jp {
    font-size: 1.4rem;
  }
  .c-title--lg .c-title__text--jp::before {
    inset-block-start: 0.4rem;
    width: 1.2rem;
    height: 1.5rem;
  }
  .c-title--lg .c-title__text--en {
    font-size: 3.6rem;
  }
}
@media (min-width: 48em) and (max-width: 74.99875em) {
  .c-title--lg .c-title__text--jp {
    font-size: 1.6rem;
  }
  .c-title--lg .c-title__text--jp::before {
    inset-block-start: 0.5rem;
  }
  .c-title--lg .c-title__text--en {
    font-size: 5rem;
  }
}
@media (min-width: 48em) {
  .c-title--lg .c-title__text--jp::before {
    width: 1.4rem;
    height: 1.7rem;
  }
}
@media (max-width: 64.06125em) {
  .c-title--lg .c-title__text--jp {
    padding-inline-start: 2rem;
  }
}
@media (min-width: 64.0625em) {
  .c-title--lg .c-title__text--jp {
    padding-inline-start: 2.2rem;
  }
}
@media (min-width: 75em) {
  .c-title--lg .c-title__text--jp {
    font-size: 1.8rem;
  }
  .c-title--lg .c-title__text--jp::before {
    inset-block-start: 0.7rem;
  }
  .c-title--lg .c-title__text--en {
    font-size: 6.2rem;
  }
}
/*---------- TITLE CENTER ----------*/
.c-title--center {
  text-align: center;
}

/*---------- TITLE LIGHT ----------*/
.c-title--light {
  color: var(--theme-color-light);
}

/*------------------------------------------------------------------------------------
3.5. HEADING.
------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------
3.6. BUTTON.
------------------------------------------------------------------------------------*/
/*---------- BUTTON HAMBURGER ----------*/
@media (max-width: 64.06125em) {
  .c-btn-burger {
    width: 5rem;
    height: 5rem;
  }
  .c-btn-burger.is-active .c-btn-burger__line:nth-child(1), .c-btn-burger.is-active .c-btn-burger__line:nth-child(3) {
    inset-block-start: 0.9rem;
  }
  .c-btn-burger__wrap {
    width: 2.8rem;
    height: 2rem;
  }
  .c-btn-burger__line {
    height: 0.2rem;
  }
  .c-btn-burger__line:nth-child(2) {
    inset-block-start: 0.9rem;
  }
  .c-btn-burger__line:nth-child(3) {
    inset-block-start: 1.8rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .c-btn-burger {
    width: 8rem;
    height: 8rem;
  }
  .c-btn-burger.is-active .c-btn-burger__line:nth-child(1), .c-btn-burger.is-active .c-btn-burger__line:nth-child(3) {
    inset-block-start: 1.3rem;
  }
  .c-btn-burger__wrap {
    width: 4rem;
    height: 2.8rem;
  }
  .c-btn-burger__line {
    height: 0.3rem;
  }
  .c-btn-burger__line:nth-child(2) {
    inset-block-start: 1.2rem;
  }
  .c-btn-burger__line:nth-child(3) {
    inset-block-start: 2.4rem;
  }
}
@media (max-width: 64.06125em) {
  .c-btn-burger {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--theme-color-primary);
    cursor: pointer;
  }
  .c-btn-burger.is-active .c-btn-burger__line:nth-child(1), .c-btn-burger.is-active .c-btn-burger__line:nth-child(3) {
    width: 100%;
  }
  .c-btn-burger.is-active .c-btn-burger__line:nth-child(1) {
    transform: rotate(-225deg);
  }
  .c-btn-burger.is-active .c-btn-burger__line:nth-child(2) {
    opacity: 0;
  }
  .c-btn-burger.is-active .c-btn-burger__line:nth-child(3) {
    transform: rotate(225deg);
  }
  .c-btn-burger__wrap {
    position: relative;
  }
  .c-btn-burger__line {
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 100%;
    background-color: var(--theme-color-light);
    transition: all 0.3s ease-in-out;
  }
  .c-btn-burger__line:nth-child(1), .c-btn-burger__line:nth-child(3) {
    transform-origin: center;
  }
  .c-btn-burger__line:nth-child(1) {
    inset-block-start: 0;
  }
}
/*---------- BUTTON, HEADER, ACCENT ----------*/
.c-btn,
.c-btn-header,
.c-btn-accent {
  position: relative;
  isolation: isolate;
  contain: paint;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 0;
  overflow: hidden;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.c-btn::before,
.c-btn-header::before,
.c-btn-accent::before {
  position: absolute;
  content: "";
  z-index: 1;
  inset: 0;
}

@media (min-width: 48em) {
  .c-btn:hover::after,
  .c-btn-header:hover::after,
  .c-btn-accent:hover::after {
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: 100%;
  }
  .c-btn::after,
  .c-btn-header::after,
  .c-btn-accent::after {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: 0;
    height: 100%;
    transition: width 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
}
/*---------- BUTTON ----------*/
.c-btn {
  justify-content: center;
  max-width: 20.2rem;
  min-height: 4.5rem;
  padding: 0.5rem 1rem;
  border-radius: 3rem;
  text-align: center;
}
.c-btn::before {
  border-radius: 3rem;
}
.c-btn__text, .c-btn__circle {
  z-index: 2;
}
.c-btn__circle {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inset-inline-end: 1rem;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
}
.c-btn__text {
  position: relative;
  line-height: 1.4;
  font-weight: 700;
}

@media (max-width: 47.99875em) {
  .c-btn {
    font-size: 1.4rem;
  }
}
@media (min-width: 48em) {
  .c-btn {
    font-size: 1.6rem;
  }
}
@media (min-width: 64.0625em) {
  .c-btn:hover .c-btn__text {
    animation: k-mouseInText 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }
  .c-btn:not(:hover).is-hovered .c-btn__text {
    animation: k-mouseOutText 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .c-btn__text {
    color: transparent;
  }
  .c-btn__circle {
    transition: border-color 0.1s 0.2s ease, background-color 0.1s 0.2s ease;
  }
}
/*---------- BUTTON LONG ----------*/
.c-btn--long {
  max-width: 27rem;
}

/*---------- BUTTON LEFT ----------*/
.c-btn--left .c-btn__arrow {
  transform: scaleX(-1);
}
.c-btn--left .c-btn__circle {
  inset-inline-start: 1rem;
  inset-inline-end: auto;
}

@media (min-width: 48em) {
  .c-btn--left.c-btn--primary .c-btn__text {
    background: linear-gradient(270deg, var(--theme-color-primary) 0%, var(--theme-color-primary) 50%, var(--theme-color-light) 50%, var(--theme-color-light) 100%);
    background-position: 0% 50%;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .c-btn--left.c-btn--outline-primary .c-btn__text {
    background: linear-gradient(270deg, var(--theme-color-light) 0%, var(--theme-color-light) 50%, var(--theme-color-primary) 50%, var(--theme-color-primary) 100%);
    background-position: 0% 50%;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .c-btn--left:hover::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .c-btn--left:hover .c-btn__text {
    animation: k-mouseInTextReverse 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }
  .c-btn--left:not(:hover).is-hovered .c-btn__text {
    animation: k-mouseOutTextReverse 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .c-btn--left::after {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }
}
/*---------- BUTTON PRIMARY ----------*/
.c-btn--primary {
  color: var(--theme-color-light);
  background-color: var(--theme-color-primary);
}
.c-btn--primary::before {
  border: 1px solid var(--theme-color-primary);
}
.c-btn--primary .c-btn__circle {
  border: 1px solid var(--theme-color-light);
  background-color: var(--theme-color-primary);
}

@media (max-width: 64.06125em) {
  .c-btn--primary .c-btn__text {
    color: var(--theme-color-light);
  }
}
@media (min-width: 64.0625em) {
  .c-btn--primary:hover {
    color: var(--theme-color-primary);
  }
  .c-btn--primary:hover .c-btn__circle {
    border-color: var(--theme-color-primary);
  }
  .c-btn--primary::after {
    background-color: var(--theme-color-light);
  }
  .c-btn--primary .c-btn__text {
    background: linear-gradient(270deg, var(--theme-color-light) 0%, var(--theme-color-light) 50%, var(--theme-color-primary) 50%, var(--theme-color-primary) 100%);
    background-position: 100% 50%;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
/*---------- BUTTON OUTLINE PRIMARY ----------*/
.c-btn--outline-primary {
  color: var(--theme-color-primary);
  background-color: var(--theme-color-light);
}
.c-btn--outline-primary::before {
  border: 1px solid var(--theme-color-primary);
}
.c-btn--outline-primary .c-btn__circle {
  border: 1px solid var(--theme-color-primary);
  background-color: var(--theme-color-primary);
}

@media (max-width: 64.06125em) {
  .c-btn--outline-primary .c-btn__text {
    color: var(--theme-color-primary);
  }
}
@media (min-width: 64.0625em) {
  .c-btn--outline-primary:hover .c-btn__circle {
    border-color: var(--theme-color-light);
  }
  .c-btn--outline-primary::after {
    background-color: var(--theme-color-primary);
  }
  .c-btn--outline-primary .c-btn__text {
    background: linear-gradient(270deg, var(--theme-color-primary) 0%, var(--theme-color-primary) 50%, var(--theme-color-light) 50%, var(--theme-color-light) 100%);
    background-position: 100% 50%;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
/*---------- BUTTON TRANSPARENT ----------*/
.c-btn--transparent {
  color: var(--theme-color-light);
}
.c-btn--transparent::before {
  border: 1px solid var(--theme-color-light);
}
.c-btn--transparent .c-btn__circle {
  border: 1px solid var(--theme-color-light);
}

@media (max-width: 64.06125em) {
  .c-btn--transparent .c-btn__text {
    color: var(--theme-color-light);
  }
}
@media (min-width: 64.0625em) {
  .c-btn--transparent:hover .c-btn__circle {
    border-color: var(--theme-color-primary);
    background-color: var(--theme-color-primary);
  }
  .c-btn--transparent::after {
    background-color: var(--theme-color-light);
  }
  .c-btn--transparent .c-btn__text {
    background: linear-gradient(270deg, var(--theme-color-light) 0%, var(--theme-color-light) 50%, var(--theme-color-primary) 50%, var(--theme-color-primary) 100%);
    background-position: 100% 50%;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
/*---------- BUTTON HEADER ----------*/
.c-btn-header {
  border-radius: 1rem;
  text-align: start;
}
.c-btn-header::before {
  border-radius: 1rem;
}
.c-btn-header__wrap, .c-btn-header__icon {
  z-index: 2;
}
.c-btn-header__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 1.7rem;
}
.c-btn-header__icon::before, .c-btn-header__icon::after {
  position: absolute;
  content: "";
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.1s ease;
}
.c-btn-header__icon::before {
  background: url("./../common_img/c-icon-mail-light.svg") no-repeat center center/100% auto;
}
.c-btn-header__icon::after {
  background: url("./../common_img/c-icon-mail-primary.svg") no-repeat center center/100% auto;
}
.c-btn-header__wrap {
  position: relative;
}
.c-btn-header__icon {
  width: 2.7rem;
  height: 2rem;
  margin-block-start: -1rem;
}
.c-btn-header__text {
  display: block;
  line-height: 1.5;
  font-weight: 500;
}
.c-btn-header__text--en {
  color: var(--theme-color-primary);
}

@media (max-width: 47.99875em) {
  .c-btn-header {
    max-width: 18rem;
    min-height: 7rem;
    padding-inline-start: 6rem;
  }
  .c-btn-header__text--jp {
    font-size: 1.6rem;
  }
  .c-btn-header__text--en {
    font-size: 1.2rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .c-btn-header {
    max-width: 21.5rem;
    min-height: 8.5rem;
    padding-inline-start: 7rem;
  }
  .c-btn-header__text--jp {
    font-size: 2rem;
  }
  .c-btn-header__text--en {
    font-size: 1.6rem;
  }
  .c-btn-header__icon {
    width: 3.8rem;
    height: 2.8rem;
    margin-block-start: -1.4rem;
  }
}
@media (max-width: 64.06125em) {
  .c-btn-header::before {
    border: 1px solid var(--theme-color-primary);
  }
  .c-btn-header__icon::before {
    opacity: 0;
  }
  .c-btn-header__icon::after {
    opacity: 1;
  }
}
@media (min-width: 64.0625em) {
  .c-btn-header {
    max-width: 16.2rem;
    min-height: 6.5rem;
    padding-inline-start: 5.5rem;
    border-radius: 1rem;
  }
  .c-btn-header:hover .c-btn-header__text {
    animation: k-mouseInText 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }
  .c-btn-header:hover .c-btn-header__icon::before {
    opacity: 0;
  }
  .c-btn-header:hover .c-btn-header__icon::after {
    opacity: 1;
  }
  .c-btn-header:not(:hover).is-hovered .c-btn-header__text {
    animation: k-mouseOutText 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .c-btn-header::before {
    border-radius: 1rem;
    border: 1px solid var(--theme-color-light);
    transition: border-color 0.3s ease;
  }
  .c-btn-header::after {
    background-color: var(--theme-color-light);
  }
  .c-btn-header__icon::before {
    opacity: 1;
  }
  .c-btn-header__icon::after {
    opacity: 0;
  }
  .c-btn-header__text--jp {
    background: linear-gradient(270deg, var(--theme-color-light) 0%, var(--theme-color-light) 50%, var(--theme-color-primary) 50%, var(--theme-color-primary) 100%);
    background-position: 100% 50%;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.5rem;
  }
  .c-btn-header__text--en {
    font-size: 1.1rem;
  }
}
/*---------- BUTTON ACCENT ----------*/
.c-btn-accent {
  justify-content: center;
  border-radius: 4.5rem;
  text-align: center;
}
.c-btn-accent::before {
  border-radius: 4.5rem;
}
.c-btn-accent__text, .c-btn-accent__circle {
  z-index: 2;
}
.c-btn-accent__text {
  position: relative;
  line-height: 1.4;
  font-weight: 700;
}
.c-btn-accent__circle {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inset-block-start: 50%;
  border: 1px solid var(--theme-color-light);
  background-color: var(--theme-color-primary);
}

@media (max-width: 47.99875em) {
  .c-btn-accent {
    max-width: 35rem;
    min-height: 6.5rem;
    padding: 0.5rem 0.5rem 0.5rem 2.5rem;
    font-size: 1.4rem;
  }
  .c-btn-accent__circle {
    inset-inline-start: 1rem;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 4.6rem;
    margin-block-start: -2.3rem;
  }
}
@media (min-width: 48em) {
  .c-btn-accent {
    max-width: 50rem;
    min-height: 8.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1.7rem;
    font-size: 1.6rem;
  }
  .c-btn-accent:hover .c-btn-accent__text {
    animation: k-mouseInText 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }
  .c-btn-accent:not(:hover).is-hovered .c-btn-accent__text {
    animation: k-mouseOutText 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .c-btn-accent::after {
    transition: width 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .c-btn-accent__text {
    color: transparent;
  }
  .c-btn-accent__circle {
    inset-inline-start: 2rem;
    width: 5rem;
    height: 5rem;
    margin-block-start: -2.5rem;
    border-radius: 5rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .c-btn-accent {
    padding-inline-start: 6.5rem;
  }
}
/*---------- BUTTON ACCENT PRIMARY ----------*/
.c-btn-accent--primary {
  color: var(--theme-color-light);
  background-color: var(--theme-color-primary);
}
.c-btn-accent--primary::before {
  border: 1px solid var(--theme-color-primary);
}

@media (min-width: 48em) {
  .c-btn-accent--primary:hover {
    color: var(--theme-color-primary);
  }
  .c-btn-accent--primary::after {
    background-color: var(--theme-color-light);
  }
  .c-btn-accent--primary .c-btn-accent__text {
    background: linear-gradient(270deg, var(--theme-color-light) 0%, var(--theme-color-light) 50%, var(--theme-color-primary) 50%, var(--theme-color-primary) 100%);
    background-position: 100% 50%;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
/*---------- BUTTON FIXED ----------*/
.c-btn-fixed {
  position: fixed;
  z-index: 200;
  inset-inline-end: 2rem;
  inset-block-end: 2rem;
  width: 6.5rem;
  height: 6.5rem;
  transform: translateY(8.5rem);
  cursor: pointer;
  transition: all 0.5s ease;
}
.c-btn-fixed__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--theme-color-primary);
  box-shadow: 0 0.2rem 0.5rem rgba(var(--theme-color-dark-rgb), 0.2);
  background-color: var(--theme-color-primary);
  transition: background-color 0.3s ease;
}
.c-btn-fixed__wrap.is-show {
  transform: translateY(0);
  transition: all linear 0.5s;
}
.c-btn-fixed__wrap::before {
  position: absolute;
  content: "";
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 1.8rem;
  height: 1.1rem;
  margin-block-start: -0.7rem;
  margin-inline-start: -0.9rem;
  background: url("./../common_img/c-arrow-up-light.webp") no-repeat center center/contain;
}

@media (max-width: 47.99875em) {
  .c-btn-fixed {
    inset-inline-end: 1rem;
    inset-block-end: 1rem;
    width: 5.5rem;
    height: 5.5rem;
    transform: translateY(6.5rem);
  }
  .c-btn-fixed__wrap {
    border-radius: 1rem;
  }
}
@media (min-width: 48em) {
  .c-btn-fixed:hover .c-btn-fixed__wrap {
    background-color: var(--theme-color-secondary);
  }
  .c-btn-fixed:hover .c-btn-fixed__wrap::before {
    background-image: url("./../common_img/c-arrow-up-dark.webp");
  }
}
/*------------------------------------------------------------------------------------
3.7. TEXT.
------------------------------------------------------------------------------------*/
/*---------- TEXT INDENT ----------*/
.c-text-indent {
  display: block;
  margin-inline-start: 1em;
  text-indent: -1em;
}

/*---------- COMMON PARAGRAPH ----------*/
@media (max-width: 47.99875em) {
  .c-paragraph p:not(:first-child) {
    margin-block-start: 2rem;
  }
}
@media (min-width: 48em) {
  .c-paragraph p:not(:first-child) {
    margin-block-start: 3.2rem;
  }
}
/*---------- TEXT NUMBER ----------*/
.c-text-number {
  line-height: 1;
  font-weight: 800;
  text-decoration: none;
}
.c-text-number__wrap {
  position: relative;
}
.c-text-number__wrap::before {
  position: absolute;
  content: "";
  inset-block-start: 50%;
  inset-inline-start: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}

/*---------- TEXT NUMBER TELEPHONE ----------*/
.c-text-number--tel .c-text-number__wrap::before {
  background-image: url("./../common_img/c-circle-tel-primary.svg");
}

/*---------- TEXT NUMBER FAX ----------*/
.c-text-number--fax .c-text-number__wrap::before {
  background-image: url("./../common_img/c-circle-fax-primary.svg");
}

/*---------- TEXT NUMBER SMALL ----------*/
@media (max-width: 47.99875em) {
  .c-text-number--sm {
    font-size: 2.5rem;
  }
  .c-text-number--sm .c-text-number__wrap {
    padding-inline-start: 4rem;
  }
  .c-text-number--sm .c-text-number__wrap::before {
    width: 3.2rem;
    height: 3.2rem;
    margin-block-start: -1.6rem;
  }
}
@media (min-width: 48em) {
  .c-text-number--sm {
    font-size: 3.1rem;
  }
  .c-text-number--sm .c-text-number__wrap {
    padding-inline-start: 4.5rem;
  }
  .c-text-number--sm .c-text-number__wrap::before {
    width: 3.6rem;
    height: 3.6rem;
    margin-block-start: -1.8rem;
  }
}
/*---------- TEXT NUMBER MEDIUM ----------*/
@media (max-width: 47.99875em) {
  .c-text-number--md {
    font-size: 3.3rem;
  }
  .c-text-number--md .c-text-number__wrap {
    padding-inline-start: 5rem;
  }
  .c-text-number--md .c-text-number__wrap::before {
    width: 4rem;
    height: 4rem;
    margin-block-start: -2rem;
  }
}
@media (min-width: 48em) {
  .c-text-number--md {
    font-size: 4.1rem;
  }
  .c-text-number--md .c-text-number__wrap {
    padding-inline-start: 5.5rem;
  }
  .c-text-number--md .c-text-number__wrap::before {
    width: 4.6rem;
    height: 4.6rem;
    margin-block-start: -2.3rem;
  }
}
/*---------- TEXT NUMBER LAGER ----------*/
@media (max-width: 47.99875em) {
  .c-text-number--lg {
    font-size: 3.3rem;
  }
  .c-text-number--lg .c-text-number__wrap {
    padding-inline-start: 5rem;
  }
  .c-text-number--lg .c-text-number__wrap::before {
    width: 4rem;
    height: 4rem;
    margin-block-start: -2rem;
  }
}
@media (min-width: 48em) and (max-width: 61.99875em) {
  .c-text-number--lg {
    font-size: 3.7rem;
  }
  .c-text-number--lg .c-text-number__wrap {
    padding-inline-start: 5.3rem;
  }
  .c-text-number--lg .c-text-number__wrap::before {
    width: 4.2rem;
    height: 4.2rem;
    margin-block-start: -2.2rem;
  }
}
@media (min-width: 62em) {
  .c-text-number--lg {
    font-size: 5rem;
  }
  .c-text-number--lg .c-text-number__wrap {
    padding-inline-start: 7rem;
  }
  .c-text-number--lg .c-text-number__wrap::before {
    width: 5.6rem;
    height: 5.6rem;
    margin-block-start: -2.5rem;
  }
}
/*------------------------------------------------------------------------------------
3.8. LINK.
------------------------------------------------------------------------------------*/
.c-link {
  position: relative;
  display: inline-block;
  padding-left: 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  text-decoration: none;
}
.c-link::before {
  position: absolute;
  content: "";
  inset-block-start: 0.8rem;
  inset-inline-start: 0;
  width: 0.6rem;
  height: 1rem;
  background: url("./../common_img/c-arrow-primary.svg") no-repeat center center/100% auto;
}

@media (max-width: 64.06125em) {
  .c-link {
    color: var(--theme-color-neutral);
  }
}
@media (min-width: 64.0625em) {
  .c-link {
    color: transparent;
  }
  .c-link:hover {
    animation: k-mouseInText 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }
  .c-link:not(:hover).is-hovered {
    animation: k-mouseOutText 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
}
/*---------- LINK NAVIGATION ----------*/
.c-link-nav {
  text-decoration: none;
}
.c-link-nav__text {
  display: block;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.c-link-nav__text--en {
  color: var(--theme-color-primary);
}

@media (max-width: 47.99875em) {
  .c-link-nav__text--jp {
    font-size: 1.6rem;
  }
  .c-link-nav__text--en {
    font-size: 1.2rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .c-link-nav__text--jp {
    font-size: 2rem;
  }
  .c-link-nav__text--en {
    font-size: 1.6rem;
  }
}
@media (max-width: 64.06125em) {
  .c-link-nav__text--jp {
    color: var(--theme-color-neutral);
  }
}
@media (min-width: 64.0625em) and (max-width: 87.49875em) {
  .c-link-nav__text--ja {
    font-size: 1.4rem;
  }
}
@media (min-width: 64.0625em) {
  .c-link-nav:hover .c-link-nav__text--jp {
    animation: k-mouseInText 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }
  .c-link-nav:not(:hover).is-hovered .c-link-nav__text--jp {
    animation: k-mouseOutText 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .c-link-nav__text--jp {
    color: transparent;
    font-size: 1.5rem;
  }
  .c-link-nav__text--en {
    font-size: 1.1rem;
  }
}
/*---------- LINK FOOTER ----------*/
.c-link-footer {
  text-decoration: none;
}

@media (max-width: 64.06125em) {
  .c-link-footer {
    color: var(--theme-color-light);
  }
}
@media (min-width: 64.0625em) {
  .c-link-footer {
    background: linear-gradient(270deg, var(--theme-color-light) 0%, var(--theme-color-light) 50%, var(--theme-color-neutral) 50%, var(--theme-color-neutral) 100%);
    background-position: 100% 50%;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .c-link-footer:hover {
    animation: k-mouseInText 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }
  .c-link-footer:not(:hover).is-hovered {
    animation: k-mouseOutText 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
}
/*------------------------------------------------------------------------------------
3.9. LOGO.
------------------------------------------------------------------------------------*/
.c-logo__link {
  display: inline-block;
  text-decoration: none;
}
.c-logo img {
  width: auto;
}

/*---------- LOGO HEADER ----------*/
.c-logo-header {
  position: relative;
  z-index: 1000;
}

@media (max-width: 47.99875em) {
  .c-logo-header img {
    height: 5rem;
  }
}
@media (min-width: 48em) and (max-width: 74.99875em) {
  .c-logo-header img {
    height: 5rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .c-logo-header img {
    height: 7rem;
  }
}
/*---------- LOGO FOOTER ----------*/
.c-logo-footer {
  text-align: center;
  mix-blend-mode: multiply;
}

@media (max-width: 47.99875em) {
  .c-logo-footer img {
    max-height: 5.8rem;
  }
}
/*------------------------------------------------------------------------------------
3.10. DECORATION.
------------------------------------------------------------------------------------*/
.c-deco {
  position: absolute;
  z-index: -1;
  line-height: 1;
  pointer-events: none;
}

/*------------------------------------------------------------------------------------
3.11. ITEM.
------------------------------------------------------------------------------------*/
/*---------- ITEM DOT, CIRCLE, STAR ----------*/
.c-item-dot,
.c-item-circle,
.c-item-star {
  position: relative;
}
.c-item-dot::before,
.c-item-circle::before,
.c-item-star::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

/*---------- ITEM DOT ----------*/
.c-item-dot {
  padding-inline-start: 1em;
}
.c-item-dot::before {
  content: "・";
}

/*---------- ITEM CIRCLE ----------*/
.c-item-circle {
  padding-inline-start: 1.3em;
}
.c-item-circle::before {
  content: "●";
}

/*---------- ITEM STAR ----------*/
.c-item-star {
  padding-inline-start: 1.3em;
}
.c-item-star::before {
  content: "※";
}

/*---------- COMMON ITEM ----------*/
.c-item__row {
  display: grid;
  grid-template-columns: max-content 1fr;
}
.c-item__right {
  padding-inline-start: 0.2rem;
}

/*------------------------------------------------------------------------------------
3.12. LIST.
------------------------------------------------------------------------------------*/
/*---------- LIST INDENT ----------*/
.c-list-indent > li {
  margin-inline-start: 1em;
  text-indent: -1em;
}

/*---------- LIST DOT, CIRCLE, STAR ----------*/
.c-list-dot > li,
.c-list-minus > li,
.c-list-circle > li,
.c-list-star > li {
  position: relative;
}
.c-list-dot > li::before,
.c-list-minus > li::before,
.c-list-circle > li::before,
.c-list-star > li::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

/*---------- LIST DOT ----------*/
.c-list-dot > li {
  padding-inline-start: 1em;
}
.c-list-dot > li::before {
  content: "・";
}

/*---------- LIST MINUS ----------*/
.c-list-minus > li {
  padding-inline-start: 1em;
}
.c-list-minus > li::before {
  content: "-";
}

/*---------- LIST CIRCLE ----------*/
.c-list-circle > li {
  padding-inline-start: 1.3em;
}
.c-list-circle > li::before {
  content: "●";
}

/*---------- LIST STAR ----------*/
.c-list-star > li {
  padding-inline-start: 1.3em;
}
.c-list-star > li::before {
  content: "※";
}

/*---------- LIST NUMBER ----------*/
.c-list-number--int > li {
  margin-inline-start: 1.1em;
  list-style-type: decimal;
}
.c-list-number--one-dot .c-item-number {
  padding-inline-start: 1.2em;
}
.c-list-number--one-dot .c-item-number__char {
  width: 1.2em;
  padding-right: 0.2em;
}

/*------------------------------------------------------------------------------------
3.14. FORM.
------------------------------------------------------------------------------------*/
/*---------- COMMON INPUT ----------*/
.c-input input {
  width: 100%;
  border: 1px solid var(--theme-color-neutral-light);
}
.c-input input::placeholder {
  color: var(--theme-color-neutral-darker);
}

@media (max-width: 47.99875em) {
  .c-input input {
    height: 4.5rem;
    padding-inline: 1rem;
  }
  .c-input input::placeholder {
    font-size: 1.4rem;
  }
}
@media (min-width: 48em) {
  .c-input input {
    height: 5rem;
    padding-inline: 1.5rem;
  }
  .c-input input::placeholder {
    font-size: 1.6rem;
  }
}
/*---------- COMMON NUMBER ----------*/
.c-number input[type=number] {
  -moz-appearance: textfield;
}
.c-number input[type=number]::-webkit-outer-spin-button,
.c-number input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/*---------- COMMON SELECT ----------*/
.c-select {
  position: relative;
  display: inline-block;
  width: 100%;
}
.c-select:after {
  position: absolute;
  content: "▼";
  inset-block-start: 50%;
  inset-inline-end: 1.7rem;
  transform: translateY(-50%);
  color: var(--theme-color-neutral);
  font-size: 1.5rem;
  pointer-events: none;
}
.c-select select {
  width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: none;
  border: 1px solid var(--theme-color-neutral-light);
}

@media (max-width: 47.99875em) {
  .c-select {
    height: 4.5rem;
  }
  .c-select:after {
    inset-inline-end: 1rem;
  }
  .c-select select {
    height: 4.5rem;
    padding-inline: 1rem 2.5rem;
  }
}
@media (min-width: 48em) {
  .c-select {
    height: 5rem;
  }
  .c-select select {
    height: 5rem;
    padding-inline: 1.5rem 3.5rem;
  }
}
/*---------- COMMON TEXTAREA ----------*/
.c-textarea {
  display: flex;
}
.c-textarea textarea {
  resize: none;
  width: 100%;
  height: 100%;
  border: 1px solid var(--theme-color-neutral-light);
}
.c-textarea textarea::placeholder {
  color: var(--theme-color-neutral-darker);
}

@media (max-width: 47.99875em) {
  .c-textarea textarea {
    padding: 0.5rem 1rem;
  }
  .c-textarea textarea::placeholder {
    font-size: 1.4rem;
  }
}
@media (min-width: 48em) {
  .c-textarea textarea {
    padding: 1rem 1.5rem;
  }
  .c-textarea textarea::placeholder {
    font-size: 1.6rem;
  }
}
/*---------- COMMON RADIO, CHECKBOX ----------*/
.c-rdo,
.c-chk {
  display: flex;
}
.c-rdo label,
.c-chk label {
  cursor: pointer;
}

/*---------- COMMON RADIO ----------*/
.c-rdo label {
  flex: 1;
  min-width: 1px;
}

@media (max-width: 47.99875em) {
  .c-rdo input[type=radio] {
    width: 1.6rem;
    height: 1.6rem;
    margin-block-start: 0.4rem;
  }
  .c-rdo label {
    margin-inline-start: 0.7rem;
  }
}
@media (min-width: 48em) {
  .c-rdo input[type=radio] {
    width: 1.8rem;
    height: 1.8rem;
    margin-block-start: 0.6rem;
  }
  .c-rdo label {
    margin-inline-start: 1rem;
  }
}
/*---------- COMMON CHECKBOX ----------*/
.c-chk input[type=checkbox] {
  width: 1.8rem;
  height: 1.8rem;
}

@media (max-width: 47.99875em) {
  .c-chk input[type=checkbox] {
    margin-block-start: 0.2rem;
  }
}
@media (min-width: 48em) {
  .c-chk input[type=checkbox] {
    margin-block-start: 0.5rem;
  }
}
/*====================================================================================
4. PROJECT.
====================================================================================*/
/*------------------------------------------------------------------------------------
4.1. DECORATION.
------------------------------------------------------------------------------------*/
.p-deco {
  position: relative;
}
.p-deco__wrap {
  position: absolute;
  z-index: -1;
  inset-block-start: 0;
  height: 100%;
  pointer-events: none;
}
.p-deco__img {
  position: absolute;
  height: auto;
}

@media (max-width: 64.06125em) {
  .p-deco__img {
    width: 60vw;
  }
  .p-deco__img--v1 {
    inset-block-end: -15.5vw;
    inset-inline-end: -27vw;
  }
  .p-deco__img--v2 {
    inset-block-start: 0;
    inset-inline-start: -26vw;
  }
}
@media (max-width: 99.99875em) {
  .p-deco__wrap {
    left: 0;
    width: 100%;
  }
}
@media (min-width: 100em) {
  .p-deco__wrap {
    left: 50%;
    width: 192rem;
    margin-left: -96rem;
  }
}
@media (min-width: 64.0625em) and (max-width: 99.99875em) {
  .p-deco__img {
    width: 60rem;
  }
  .p-deco__img--v1 {
    inset-block-end: -25rem;
    inset-inline-end: -18rem;
  }
  .p-deco__img--v2 {
    inset-block-start: -10rem;
    inset-inline-start: -20rem;
  }
}
@media (min-width: 100em) {
  .p-deco__img--v1 {
    inset-block-end: 14rem;
    inset-inline-end: -28rem;
  }
  .p-deco__img--v2 {
    inset-block-start: -19.5rem;
    inset-inline-start: -13rem;
  }
}
/*------------------------------------------------------------------------------------
4.2. NAVIGATION.
------------------------------------------------------------------------------------*/
.p-nav__grid {
  display: grid;
}

@media (max-width: 47.99875em) {
  .p-nav {
    padding: 7rem 1.5rem 5.5rem 1.5rem;
  }
  .p-nav__grid {
    gap: 2.5rem 0;
  }
  .p-nav__item .c-link-nav {
    padding-block: 1.3rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .p-nav {
    padding: 11rem 1.5rem 5.5rem 1.5rem;
  }
  .p-nav__grid {
    gap: 4rem 0;
  }
  .p-nav__item .c-link-nav {
    padding-block: 2rem;
  }
}
@media (max-width: 64.06125em) {
  .p-nav {
    position: fixed;
    z-index: 998;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--theme-color-light);
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    will-change: clip-path;
    overflow-y: auto;
  }
  .p-nav__list {
    grid-row: 1/2;
  }
  .p-nav__item {
    border-block-end: 1px solid var(--theme-color-neutral-light);
  }
  .p-nav__item .c-link-nav {
    display: block;
  }
  .p-nav__group {
    grid-row: 2/3;
  }
  .p-nav__btn {
    grid-row: 3/4;
    text-align: center;
  }
}
@media (min-width: 64.0625em) {
  .p-nav__grid {
    align-items: center;
    grid-template-columns: 1fr 16.2rem;
    gap: 0.8rem min(2.1vw, 4rem);
  }
  .p-nav__group, .p-nav__list {
    grid-column: 1/2;
  }
  .p-nav__group {
    grid-row: 1/2;
  }
  .p-nav__list {
    grid-row: 2/3;
    display: flex;
    gap: 1rem min(2.8vw, 5.3rem);
  }
  .p-nav__btn {
    grid-row: 1/3;
    grid-column: 2/3;
    padding-block-start: 1rem;
  }
}
/*---------- NAVIGATION FOOTER ----------*/
@media (max-width: 35.99875em) {
  .p-nav-footer .c-banner-footer {
    margin-block-start: 3rem;
  }
}
@media (min-width: 36em) and (max-width: 64.06125em) {
  .p-nav-footer {
    display: grid;
    align-items: end;
  }
}
@media (max-width: 47.99875em) {
  .p-nav-footer {
    grid-template-columns: 1fr max-content;
  }
  .p-nav-footer__list:not(:first-child), .p-nav-footer__item:not(:first-child) {
    margin-block-start: 1.1rem;
  }
}
@media (min-width: 48em) {
  .p-nav-footer__item:not(:first-child) {
    margin-block-start: 1.8rem;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .p-nav-footer__list:not(:first-child) {
    margin-block-start: 1.8rem;
  }
}
@media (max-width: 64.06125em) {
  .p-nav-footer .c-banner-footer {
    grid-column: 2/3;
    grid-row: 1/3;
  }
}
@media (min-width: 64.0625em) {
  .p-nav-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    max-width: 111.3rem;
    margin-inline: auto;
  }
}
/*------------------------------------------------------------------------------------
4.3. GROUP.
------------------------------------------------------------------------------------*/
/*---------- GROUP NAVIGATION ----------*/
.p-group-nav__item {
  white-space: nowrap;
}

@media (max-width: 47.99875em) {
  .p-group-nav__item {
    padding-inline-end: 1.4rem;
    text-align: center;
  }
  .p-group-nav__item:not(:first-child) {
    margin-block-start: 0.5rem;
  }
}
@media (min-width: 36em) {
  .p-group-nav__list {
    display: flex;
  }
}
@media (max-width: 47.99875em) {
  .p-group-nav__list {
    gap: 0.6rem 3rem;
  }
  .p-group-nav__item .c-link {
    padding-inline-start: 1.4rem;
    font-size: 1.6rem;
  }
  .p-group-nav__item .c-link::before {
    inset-block-start: 0.8rem;
    width: 0.7rem;
    height: 1.2rem;
  }
}
@media (min-width: 36em) and (max-width: 47.99875em) {
  .p-group-nav__item {
    width: calc(50% - 1.5rem);
  }
  .p-group-nav__item:first-child {
    text-align: end;
  }
}
@media (min-width: 48em) and (max-width: 64.06125em) {
  .p-group-nav__list {
    gap: 1rem 5rem;
  }
  .p-group-nav__item .c-link {
    padding-inline-start: 1.5rem;
    font-size: 2rem;
  }
  .p-group-nav__item .c-link::before {
    inset-block-start: 1.2rem;
    width: 0.9rem;
    height: 1.7rem;
  }
}
@media (max-width: 64.06125em) {
  .p-group-nav__list {
    justify-content: center;
    flex-wrap: wrap;
  }
  .p-group-nav__item:not(:last-child) {
    border-bottom: 1px solid var(--theme-color-light);
  }
}
@media (min-width: 64.0625em) and (max-width: 87.49875em) {
  .p-group-nav__list {
    gap: 2.5rem;
  }
}
@media (min-width: 64.0625em) {
  .p-group-nav__list {
    justify-content: end;
  }
}
@media (min-width: 87.5em) {
  .p-group-nav__list {
    gap: 4.5rem;
  }
}
/*---------- GROUP FOOTER ----------*/
.p-group-footer__address {
  color: var(--theme-color-light);
  text-align: center;
  font-style: normal;
}
.p-group-footer__btn {
  margin-block-start: 2.5rem;
  text-align: center;
}

/*------------------------------------------------------------------------------------
4.4. BANNER.
------------------------------------------------------------------------------------*/
/*---------- BANNER FOOTER ----------*/
.c-banner-footer {
  text-align: center;
}

/*====================================================================================
5. KEYFRAMES.
====================================================================================*/
/*------------------------------------------------------------------------------------
5.1. MOUSE OUT TEXT.
------------------------------------------------------------------------------------*/
@keyframes k-mouseOutText {
  0% {
    background-position: 0 50%;
  }
  99% {
    background-position: -80% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
/*------------------------------------------------------------------------------------
5.2. MOUSE IN TEXT.
------------------------------------------------------------------------------------*/
@keyframes k-mouseInText {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
/*------------------------------------------------------------------------------------
5.3. MOUSE OUT TEXT REVERSE.
------------------------------------------------------------------------------------*/
@keyframes k-mouseOutTextReverse {
  0% {
    background-position: 100% 50%;
  }
  99% {
    background-position: 180% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
/*------------------------------------------------------------------------------------
5.4. MOUSE IN TEXT REVERSE.
------------------------------------------------------------------------------------*/
@keyframes k-mouseInTextReverse {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}