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

1. START BASE.
2. START CONTAINER.
3. START HEADER.
4. START FOOTER.
5. START SECTION.
6. START LAYOUT.

7. START BUTTON.
8. START TAG.
9. START ARROW.
10. START ICON.
11. START LINK.

12. START HEADING.
13. START TITLE.
14. START TEXT.

15. START LOGO.
16. START DECORATION.
17. START EFFECT.

20. START ITEM.
21. START LIST.

22. START FORM.

====================================================================================*/
/*====================================================================================
1. START BASE.
====================================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
:root {
  /* Start shade system */
  --color-neutral-1000: #000000;
  --color-neutral-800: #373737;
  --color-neutral-600: #979797;
  --color-neutral-500: #b4b4b4;
  --color-neutral-400: #d8d8d8;
  --color-neutral-300: #e2e2e2;
  --color-neutral-150: #f1f1f1;
  --color-neutral-50: #f5f5f5;
  --color-neutral-25: #f8f8f8;
  --color-neutral-0: #ffffff;
  --color-blue-800: #0c5b96;
  --color-blue-700: #2c5884;
  --color-blue-600: #1992a1;
  --color-blue-500: #3C87b5;
  --color-blue-400: #75a4d2;
  --color-blue-300: #41b8d8;
  --color-blue-200: #ccd6de;
  --color-blue-100: #f3f8fb;
  --color-green-100: #d7decc;
  --color-green-200: #d8eae9;
  --color-green-300: #3aba7a;
  --color-green-350: #47b03e;
  --color-green-400: #3b9b76;
  --color-green-600: #29754a;
  --color-pink-100: #e5dada;
  --color-pink-400: #e96694;
  --color-red-400: #c91e41;
  --font-zen-kaku-gothic-new: "Zen Kaku Gothic New", sans-serif;
  --font-zen-maru-gothic: "Zen Maru Gothic", serif;
  /* Start font */
  --theme-font-jp-primary: var(--font-zen-kaku-gothic-new);
  --theme-font-en-primary: var(--font-zen-maru-gothic);
  /* Start color */
  --theme-color-primary: var(--color-neutral-1000);
  --theme-color-secondary: var(--color-neutral-0);
  --theme-color-third: var(--color-neutral-800);
  --theme-color-fourth: var(--color-neutral-600);
  --theme-color-fifth: var(--color-neutral-500);
  --theme-color-sixth: var(--color-neutral-300);
  --theme-color-seventh: var(--color-neutral-150);
  --theme-color-eighth: var(--color-blue-400);
  --theme-color-ninth: var(--color-blue-200);
  --theme-color-tenth: var(--color-green-100);
  --theme-color-eleventh: var(--color-pink-100);
  --theme-color-twelfth: var(--color-red-400);
  --theme-color-thirteenth: var(--color-red-400);
  --theme-color-fourteenth: var(--color-neutral-50);
  --theme-color-fifteenth: var(--color-neutral-400);
  --theme-color-sixteenth: var(--color-blue-800);
  --theme-color-seventeenth: var(--color-blue-100);
  --theme-color-eighteenth: var(--color-blue-600);
  --theme-color-nineteenth: var(--color-green-200);
  --theme-color-twentieth: var(--color-blue-500);
  --theme-color-twenty-first: var(--color-green-400);
  --theme-color-twenty-second: var(--color-pink-400);
  --theme-color-twenty-third: var(--color-neutral-25);
  --theme-color-twenty-fourth: var(--color-green-350);

  --theme-color-tag: var(--color-blue-300);
}

@media only screen and (max-width: 767px) {
  :root {
    /* Start spacing */
    --spacing-sp-75-pc-150: 7.5rem;
    --spacing-sp-70-pc-140: 7rem;
    --spacing-sp-65-pc-130: 6.5rem;
    --spacing-sp-60-pc-120: 6rem;
    --spacing-sp-55-pc-110: 5.5rem;
    --spacing-sp-50-pc-100: 5rem;
    --spacing-sp-45-pc-90: 4.5rem;
    --spacing-sp-40-pc-80: 4rem;
    --spacing-sp-35-pc-80: 3.5rem;
    --spacing-sp-0-pc-80: 0;
    --spacing-sp-35-pc-70: 3.5rem;
    --spacing-sp-35-pc-65: 3.5rem;
    --spacing-sp-35-pc-60: 3.5rem;
    --spacing-sp-30-pc-60: 3rem;
    --spacing-sp-30-pc-55: 3rem;
    --spacing-sp-35-pc-50: 3.5rem;
    --spacing-sp-30-pc-50: 3rem;
    --spacing-sp-25-pc-50: 2.5rem;
    --spacing-sp-25-pc-45: 2.5rem;
    --spacing-sp-20-pc-45: 2rem;
    --spacing-sp-30-pc-40: 3rem;
    --spacing-sp-25-pc-40: 2.5rem;
    --spacing-sp-20-pc-40: 2rem;
    --spacing-sp-25-pc-35: 2.5rem;
    --spacing-sp-20-pc-35: 2rem;
    --spacing-sp-15-pc-35: 1.5rem;
    --spacing-sp-25-pc-30: 2.5rem;
    --spacing-sp-20-pc-30: 2rem;
    --spacing-sp-15-pc-30: 1.5rem;
    --spacing-sp-10-pc-30: 1rem;
    --spacing-sp-20-pc-25: 2rem;
    --spacing-sp-15-pc-25: 1.5rem;
    --spacing-sp-10-pc-25: 1rem;
    --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;
    /* Start position */
    --position-sp-left-pc-center: left;
    --position-sp-right-pc-center: right;
    --position-sp-center-pc-left: center;
    --position-sp-center-pc-right: center;
  }
}
@media only screen and (min-width: 768px) {
  :root {
    /* Start spacing */
    --spacing-sp-75-pc-150: 15rem;
    --spacing-sp-70-pc-140: 14rem;
    --spacing-sp-65-pc-130: 13rem;
    --spacing-sp-60-pc-120: 12rem;
    --spacing-sp-55-pc-110: 11rem;
    --spacing-sp-50-pc-100: 10rem;
    --spacing-sp-45-pc-90: 9rem;
    --spacing-sp-40-pc-80: 8rem;
    --spacing-sp-35-pc-80: 8rem;
    --spacing-sp-0-pc-80: 8rem;
    --spacing-sp-35-pc-70: 7rem;
    --spacing-sp-35-pc-65: 6.5rem;
    --spacing-sp-35-pc-60: 6rem;
    --spacing-sp-30-pc-60: 6rem;
    --spacing-sp-30-pc-55: 5.5rem;
    --spacing-sp-35-pc-50: 5rem;
    --spacing-sp-30-pc-50: 5rem;
    --spacing-sp-25-pc-50: 5rem;
    --spacing-sp-25-pc-45: 4.5rem;
    --spacing-sp-20-pc-45: 4.5rem;
    --spacing-sp-30-pc-40: 4rem;
    --spacing-sp-25-pc-40: 4rem;
    --spacing-sp-20-pc-40: 4rem;
    --spacing-sp-25-pc-35: 3.5rem;
    --spacing-sp-20-pc-35: 3.5rem;
    --spacing-sp-15-pc-35: 3.5rem;
    --spacing-sp-25-pc-30: 3rem;
    --spacing-sp-20-pc-30: 3rem;
    --spacing-sp-15-pc-30: 3rem;
    --spacing-sp-10-pc-30: 3rem;
    --spacing-sp-20-pc-25: 2.5rem;
    --spacing-sp-15-pc-25: 2.5rem;
    --spacing-sp-10-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;
    /* Start position */
    --position-sp-left-pc-center: center;
    --position-sp-right-pc-center: center;
    --position-sp-center-pc-left: left;
    --position-sp-center-pc-right: right;
  }
}
html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 62.5%;
  overflow-y: auto;
  line-height: normal;
}

body {
  font-family: var(--theme-font-jp-primary);
  font-weight: 400;
  text-size-adjust: 100%;
  color: var(--theme-color-primary);
  background-color: var(--theme-color-secondary);
}
body.is-open, body.lity-disable-scrolling, body.lb-disable-scrolling {
  position: fixed;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
    line-height: 1.7;
  }
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
    line-height: 1.86;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  body {
    min-width: 119.9rem;
  }
  body .l-header {
    width: 119.9rem;
  }
  body .l-wrapper {
    max-width: 119.9rem;
  }
}
.l-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 32rem;
  overflow: hidden;
}

/*---------- START BASE SETUP ----------*/
h1,
h2 {
  line-height: 1.45;
}

@media only screen and (min-width: 768px) {
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.6;
  }
}
@media only screen and (max-width: 767px) {
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.5;
  }
}
a {
  color: currentColor;
  text-decoration: underline;
  background-color: transparent;
}
a:hover {
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  a {
    transition: color 0.3s ease, text-decoration 0.3s ease;
  }
}
img {
  border-style: none;
}

@media only screen and (min-width: 768px) {
  img {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
}
button,
input[type=submit],
input[type=button] {
  font-family: var(--theme-font-jp-primary);
}

picture {
  display: block;
  line-height: 1;
}

figure {
  margin: 0;
  padding: 0;
}

/*====================================================================================
2. START CONTAINER.
====================================================================================*/
.l-container,
.l-container-lg,
.l-container-md,
.l-container-sm,
.l-container-xs,
.l-container-xss {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

.l-container-lg {
  max-width: 192rem;
}

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

.l-container-sm {
  max-width: 117rem;
}

.l-container-xs {
  max-width: 111rem;
}

.l-container-xss {
  max-width: 95rem;
}

/*====================================================================================
3. START HEADER.
====================================================================================*/
/*---------- START LAYOUT HEADER ----------*/
.l-header {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
}
.l-header.is-fixed {
  position: fixed;
}
.l-header__line {
  position: absolute;
  background-color: var(--theme-color-secondary);
}
.l-header__line--top {
  width: 100%;
}
.l-header__line--left {
  left: 0;
}
.l-header__line--right {
  right: 0;
}
.l-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.l-header__main {
  position: relative;
}

@media only screen and (max-width: 767px) {
  .l-header .p-nav {
    position: fixed;
    z-index: 998;
    top: 0;
    left: 0;
    width: 100%;
  }
  .l-header .p-nav__wrap {
    padding: 2rem 1.5rem 5rem 1.5rem;
    overflow-y: auto;
  }
  .l-header .p-nav__body {
    margin-top: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .l-header.is-fixed .l-header__row {
    padding: 0 0 0 3rem;
  }
  .l-header.is-fixed .c-logo__img img {
    height: 7rem;
  }
  .l-header.is-fixed .c-logo__text {
    padding-left: 2.5rem;
    font-size: 1.6rem;
  }
  .l-header.is-fixed .p-group__list {
    height: 10rem;
  }
  .l-header.is-fixed .c-btn-hamburger {
    width: 10rem;
    height: 100%;
  }
  .l-header__main {
    display: flex;
  }
  .l-header .p-nav__body {
    position: absolute;
    top: calc(100% + 2rem);
    right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .l-header .p-nav__body {
    width: 117rem;
  }
}
@media only screen and (min-width: 1200px) {
  .l-header .p-nav__body {
    width: 120rem;
  }
}
/*---------- START PROJECT NAV ----------*/
@media only screen and (max-width: 575px) {
  .p-nav__item {
    margin-top: 1.7rem;
  }
  .p-nav__item:first-child {
    margin-top: 0;
  }
}
@media only screen and (min-width: 576px) {
  .p-nav__list {
    display: flex;
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .p-nav__list {
    margin: -1rem -1.5rem;
  }
  .p-nav__item {
    margin: 1rem 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-nav {
    background-color: var(--theme-color-secondary);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.5s ease;
  }
  .p-nav.is-active {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  .p-nav .p-subnav {
    padding-left: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-nav.is-active .p-nav__body {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  .p-nav__body {
    padding: 5rem;
    border-radius: 2rem;
    background-color: var(--theme-color-secondary);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.5s ease;
  }
  .p-nav__list {
    justify-content: space-between;
  }
  .p-nav__item-link {
    margin-bottom: 0.5rem;
  }
  .p-nav .p-subnav {
    padding-left: 3rem;
  }
  .p-nav .p-subnav__item {
    margin-top: 0.3rem;
  }
  .p-nav .p-subnav__item:first-child {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-nav__body {
    padding: 5rem 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .p-nav__body {
    padding: 5rem;
  }
}
/*---------- START PROJECT GROUP ----------*/
.p-group {
  display: flex;
  background-color: var(--theme-color-secondary);
  overflow: hidden;
}
.p-group__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.p-group__item:first-child {
  margin-left: 0;
}
.p-group__link {
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
}

@media only screen and (max-width: 767px) {
  .p-group {
    border-radius: 1.3rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
  }
  .p-group__list {
    flex: 1;
    min-height: 7rem;
    padding: 1rem 1.5rem;
  }
  .p-group__btn {
    width: 10rem;
  }
  .p-group__item {
    margin-left: 2rem;
  }
  .p-group__link {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-group__item {
    margin-left: 3.7rem;
  }
  .p-group__link {
    font-size: 1.8rem;
  }
  .p-group__link:hover {
    color: var(--theme-color-eighteenth);
  }
}
/*---------- START COMPONENT HAMBURGER ----------*/
.c-btn-hamburger {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border: 0;
  background-color: var(--theme-color-secondary);
  overflow: hidden;
}
.c-btn-hamburger::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--theme-color-primary);
  transition: width 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99);
}
.c-btn-hamburger__wrap {
  position: relative;
}
.c-btn-hamburger__line {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
  width: 100%;
  background-color: var(--theme-color-primary);
  transition: all 0.3s ease-in-out;
}
.c-btn-hamburger__line:nth-child(1), .c-btn-hamburger__line:nth-child(3) {
  transform-origin: center;
}
.c-btn-hamburger__line:nth-child(1) {
  top: 0;
}
.c-btn-hamburger.is-active .c-btn-hamburger__line {
  background-color: var(--theme-color-secondary);
}
.c-btn-hamburger.is-active .c-btn-hamburger__line:nth-child(1), .c-btn-hamburger.is-active .c-btn-hamburger__line:nth-child(3) {
  width: 100%;
}
.c-btn-hamburger.is-active .c-btn-hamburger__line:nth-child(1) {
  transform: rotate(-225deg);
}
.c-btn-hamburger.is-active .c-btn-hamburger__line:nth-child(2) {
  opacity: 0;
}
.c-btn-hamburger.is-active .c-btn-hamburger__line:nth-child(3) {
  transform: rotate(225deg);
}

@media only screen and (max-width: 767px) {
  .c-btn-hamburger.is-active::before {
    width: 9.5rem;
    height: 9.5rem;
  }
  .c-btn-hamburger.is-active .c-btn-hamburger__line:nth-child(1), .c-btn-hamburger.is-active .c-btn-hamburger__line:nth-child(3) {
    top: 0.9rem;
  }
  .c-btn-hamburger__wrap {
    width: 2.8rem;
    height: 2rem;
  }
  .c-btn-hamburger__line {
    height: 0.2rem;
  }
  .c-btn-hamburger__line:nth-child(2) {
    top: 0.9rem;
  }
  .c-btn-hamburger__line:nth-child(3) {
    top: 1.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn-hamburger.is-active .c-btn-hamburger__line:nth-child(1), .c-btn-hamburger.is-active .c-btn-hamburger__line:nth-child(3) {
    top: 1.1rem;
  }
  .c-btn-hamburger__wrap {
    width: 3.1rem;
    height: 2.5rem;
  }
  .c-btn-hamburger__line {
    height: 0.3rem;
  }
  .c-btn-hamburger__line:nth-child(2) {
    top: 1.1rem;
  }
  .c-btn-hamburger__line:nth-child(3) {
    top: 2.2rem;
  }
}
/*====================================================================================
4. START FOOTER.
====================================================================================*/
/*---------- START LAYOUT FOOTER ----------*/
.l-footer {
  padding: var(--spacing-sp-50-pc-100) 0 var(--spacing-sp-40-pc-80) 0;
  color: var(--theme-color-secondary);
  background-color: var(--theme-color-third);
}
.l-footer .c-list-item-social {
  margin-top: var(--spacing-sp-20-pc-25);
}
.l-footer__link {
  margin-top: 2.5rem;
}
.l-footer .p-bnr-footer {
  margin-top: var(--spacing-sp-20-pc-30);
}
.l-footer__copy {
  margin-top: var(--spacing-sp-15-pc-20);
  color: var(--theme-color-fourth);
  font-family: var(--theme-font-en-primary);
  text-align: right;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
  .l-footer__left {
    margin-bottom: 3rem;
  }
  .l-footer__link {
    text-align: center;
  }
}
@media only screen and (min-width: 768px) {
  .l-footer__row {
    display: flex;
  }
  .l-footer__left {
    flex: 1;
  }
  .l-footer__right {
    width: 76rem;
  }
}
/*---------- START COMPONENT LIST ITEM SOCIAL ----------*/
.c-list-item-social {
  display: flex;
  margin: -1rem;
}
.c-list-item-social .c-item-social {
  margin: 1rem;
}

@media only screen and (max-width: 767px) {
  .c-list-item-social {
    justify-content: center;
  }
}
/*---------- START COMPONENT ITEM SOCIAL ----------*/
.c-item-social__link {
  display: inline-block;
}

@media only screen and (max-width: 767px) {
  .c-item-social__link img {
    max-height: 3.5rem;
    width: auto;
  }
}
@media only screen and (min-width: 768px) {
  .c-item-social__link {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  .c-item-social__link:hover {
    transform: scale(1.08);
  }
}
/*---------- START PROJECT NAV FOOTER ----------*/
.p-nav-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.p-nav-footer__item {
  margin-bottom: 2rem;
}
.p-nav-footer__item:last-child {
  margin-bottom: 0;
}
.p-nav-footer__item-link {
  margin-bottom: 0.2rem;
}

/*---------- START PROJECT SUBNAV FOOTER ----------*/
@media only screen and (max-width: 575px) {
  .p-subnav-footer {
    padding-left: 2rem;
  }
  .p-subnav-footer__item {
    margin-top: 0.3rem;
  }
}
@media only screen and (min-width: 576px) {
  .p-subnav-footer {
    padding-left: 2.3rem;
  }
}
/*---------- START PROJECT BANNER FOOTER ----------*/
.p-bnr-footer__title {
  margin-bottom: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.p-bnr-footer__list {
  display: flex;
  flex-wrap: wrap;
}
.p-bnr-footer__item-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem 1.5rem;
  background-color: var(--theme-color-secondary);
}
.p-bnr-footer__link {
  margin-top: 1.5rem;
}

@media only screen and (max-width: 575px) {
  .p-bnr-footer__list {
    margin: -0.5rem;
  }
  .p-bnr-footer__item {
    width: calc(50% - 1rem);
    min-height: 5rem;
    margin: 0.5rem;
  }
}
@media only screen and (min-width: 576px) {
  .p-bnr-footer__list {
    margin: -1rem;
  }
  .p-bnr-footer__item {
    width: 24rem;
    min-height: 6.5rem;
    margin: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-bnr-footer__item-link:hover img {
    transform: scale(1.02);
  }
}
/*====================================================================================
5. START SECTION.
====================================================================================*/
/*---------- START PROJECT COMMON RECRUIT ----------*/
.p-cm-recruit {
  padding: var(--spacing-sp-65-pc-130) 0 var(--spacing-sp-50-pc-100) 0;
}
.p-cm-recruit .c-deco__img {
  bottom: 0;
  max-width: 100%;
}
.p-cm-recruit .c-title {
  margin-bottom: var(--spacing-sp-15-pc-30);
}
.p-cm-recruit .c-title-base {
  margin-bottom: var(--spacing-sp-15-pc-30);
  text-align: center;
}
.p-cm-recruit__desc {
  text-align: center;
}
.p-cm-recruit__inner {
  width: 100%;
  max-width: 79rem;
  margin: 0 auto;
  margin-top: var(--spacing-sp-25-pc-45);
}
.p-cm-recruit__list {
  display: flex;
  justify-content: space-between;
}

@media only screen and (max-width: 575px) {
  .p-cm-recruit__item .c-btn {
    padding-right: 4rem;
  }
  .p-cm-recruit__item .c-btn__text {
    font-size: 1.4rem;
  }
  .p-cm-recruit__item .c-btn .c-circle {
    right: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-cm-recruit .c-title-base {
    font-size: 1.6rem;
  }
  .p-cm-recruit__item {
    width: calc(50% - 0.75rem);
  }
  .p-cm-recruit__item .c-btn {
    max-width: 100%;
  }
  .p-cm-recruit__btn {
    margin-top: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-cm-recruit .c-title-base {
    line-height: 1.9;
  }
  .p-cm-recruit__item {
    width: calc(50% - 2.5rem);
  }
  .p-cm-recruit__btn {
    margin-top: 5rem;
  }
}
/*====================================================================================
6. START LAYOUT.
====================================================================================*/
/*---------- START COMPONENT CLEARFIX ----------*/
.c-clearfix {
  display: block;
}
.c-clearfix::after {
  display: block;
  content: " ";
  height: 0;
  clear: both;
  visibility: hidden;
}

/*---------- START LAYOUT OVERLAY ----------*/
@media only screen and (min-width: 768px) {
  .l-overlay {
    position: fixed;
    display: none;
    z-index: 998;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
  }
}
/*====================================================================================
7. START BUTTON.
====================================================================================*/
/*---------- START COMPONENT BUTTON ----------*/
.c-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  outline: none;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  touch-action: manipulation;
  text-decoration: none;
  overflow: hidden;
}
.c-btn__text {
  position: relative;
  z-index: 2;
  font-weight: 500;
  text-align: center;
}
.c-btn .c-circle {
  top: 50%;
}
.c-btn .c-circle__arrow {
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}

@media only screen and (max-width: 575px) {
  .c-btn {
    max-width: 27rem;
    min-height: 5.6rem;
  }
  .c-btn__text {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .c-btn {
    max-width: 30rem;
    min-height: 6rem;
  }
  .c-btn__text {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 767px) {
  .c-btn {
    padding: 0.5rem;
    border-radius: 0.8rem;
  }
  .c-btn__text {
    line-height: 1.4;
  }
  .c-btn .c-circle {
    right: 1rem;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn {
    max-width: 37rem;
    min-height: 7.5rem;
    padding: 1rem;
    border-radius: 1rem;
  }
  .c-btn:hover .c-circle::before {
    width: 70rem;
    height: 70rem;
    transition: width 0.4s 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.4s 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .c-btn:hover .c-circle:after {
    width: 100%;
    height: 100%;
    transition: width 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .c-btn:hover .c-circle__arrow {
    transition: fill 0.05s ease;
  }
  .c-btn__text {
    font-size: 1.8rem;
    line-height: 1.6;
  }
  .c-btn .c-circle {
    right: 2rem;
    width: 3.6rem;
    height: 3.6rem;
    margin-top: -1.8rem;
  }
  .c-btn .c-circle::before {
    transition: width 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .c-btn .c-circle::after {
    transition: width 0.1s 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.1s 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .c-btn .c-circle__arrow {
    transition: fill 0.05s 0.45s ease;
  }
}
/*---------- START COMPONENT BUTTON LEFT ----------*/
.c-btn--left .c-circle {
  right: auto;
}

@media only screen and (max-width: 767px) {
  .c-btn--left .c-circle {
    left: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn--left .c-circle {
    left: 2rem;
  }
}
/*---------- START COMPONENT BUTTON PRIMARY ----------*/
.c-btn--c-primary {
  background: url("./../common_img/btn-bg-gray.webp") no-repeat left center/cover;
}
.c-btn--c-primary .c-btn__text {
  color: var(--theme-color-secondary);
}
.c-btn--c-primary .c-circle:before {
  background-color: var(--theme-color-primary);
}
.c-btn--c-primary .c-circle::after {
  background-color: var(--theme-color-secondary);
}
.c-btn--c-primary .c-circle__arrow {
  fill: var(--theme-color-secondary);
}

@media only screen and (min-width: 768px) {
  .c-btn--c-primary:hover .c-circle__arrow {
    fill: var(--theme-color-primary);
  }
}
/*---------- START COMPONENT BUTTON eighteenth ----------*/
.c-btn--c-eighteenth {
  background: url("./../common_img/btn-bg-blue.webp") no-repeat left center/cover;
}
.c-btn--c-eighteenth .c-btn__text {
  color: var(--theme-color-secondary);
}
.c-btn--c-eighteenth .c-circle:before {
  background-color: var(--theme-color-eighteenth);
}
.c-btn--c-eighteenth .c-circle::after {
  background-color: var(--theme-color-secondary);
}
.c-btn--c-eighteenth .c-circle__arrow {
  fill: var(--theme-color-secondary);
}

@media only screen and (min-width: 768px) {
  .c-btn--c-eighteenth:hover .c-circle__arrow {
    fill: var(--theme-color-eighteenth);
  }
}
/*---------- START COMPONENT BUTTON MD ----------*/
.c-btn--md.c-btn--c-primary {
  background: url("./../common_img/btn-md-bg-gray.webp") no-repeat left center/cover;
}
.c-btn--md.c-btn--c-eighteenth {
  background: url("./../common_img/btn-md-bg-blue.webp") no-repeat left center/cover;
}

@media only screen and (max-width: 767px) {
  .c-btn--md {
    max-width: 32rem;
    padding-right: 4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn--md {
    max-width: 45rem;
  }
  .c-btn--md:hover .c-circle::before {
    width: 84rem;
    height: 84rem;
  }
}
/*---------- START COMPONENT BUTTON HEADER ----------*/
.c-btn-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  user-select: none;
  touch-action: manipulation;
  background: url("./../common_img/btn-header-bg-blue.webp") no-repeat center center/cover;
  text-decoration: none;
  overflow: hidden;
}
.c-btn-header__text {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  color: var(--theme-color-secondary);
  line-height: 1.45;
  font-weight: 500;
}
.c-btn-header__text--en {
  text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
  .c-btn-header__text {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn-header::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--theme-color-eighteenth);
    transition: width 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .c-btn-header__text {
    font-size: 1.8rem;
  }
}
/*---------- START COMPONENT BUTTON ENTRY ----------*/
.c-btn-entry {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 1rem;
  border: 0;
  outline: none;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  touch-action: manipulation;
  text-decoration: none;
  overflow: hidden;
}
.c-btn-entry__text {
  position: relative;
  z-index: 2;
  font-weight: 500;
  text-transform: uppercase;
}
.c-btn-entry .c-circle {
  top: 50%;
}
.c-btn-entry .c-circle__arrow {
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}

@media only screen and (max-width: 767px) {
  .c-btn-entry {
    min-height: 8rem;
    padding: 1rem;
  }
  .c-btn-entry__text {
    font-size: 1.6rem;
  }
  .c-btn-entry .c-circle {
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn-entry {
    min-height: 11rem;
    padding: 1rem;
  }
  .c-btn-entry:hover .c-circle::before {
    width: 155rem;
    height: 155rem;
    transition: width 0.4s 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.4s 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .c-btn-entry:hover .c-circle:after {
    width: 100%;
    height: 100%;
    transition: width 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.1s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .c-btn-entry:hover .c-circle__arrow {
    transition: fill 0.05s ease;
  }
  .c-btn-entry__text {
    font-size: 2.4rem;
  }
  .c-btn-entry .c-circle {
    right: 2rem;
    width: 3.6rem;
    height: 3.6rem;
    margin-top: -1.8rem;
  }
  .c-btn-entry .c-circle::before {
    transition: width 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .c-btn-entry .c-circle::after {
    transition: width 0.1s 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.1s 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .c-btn-entry .c-circle__arrow {
    transition: fill 0.05s 0.45s ease;
  }
}
/*---------- START COMPONENT BUTTON TWELFTH ----------*/
.c-btn-entry--c-twelfth {
  background: url("./../common_img/btn-entry-bg-pink.webp") no-repeat left center/cover;
}
.c-btn-entry--c-twelfth .c-circle:before {
  background-color: var(--theme-color-twelfth);
}
.c-btn-entry--c-twelfth .c-circle::after {
  background-color: var(--theme-color-secondary);
}
.c-btn-entry--c-twelfth .c-circle__arrow {
  fill: var(--theme-color-secondary);
}
.c-btn-entry--c-twelfth .c-btn-entry__text {
  color: var(--theme-color-secondary);
}

@media only screen and (min-width: 768px) {
  .c-btn-entry--c-twelfth:hover .c-circle__arrow {
    fill: var(--theme-color-twelfth);
  }
}
/*---------- START COMPONENT BUTTON EIGHTEENTH ----------*/
.c-btn-entry--c-eighteenth {
  background: url("./../common_img/btn-entry-bg-blue.webp") no-repeat left center/cover;
}
.c-btn-entry--c-eighteenth .c-circle:before {
  background-color: var(--theme-color-eighteenth);
}
.c-btn-entry--c-eighteenth .c-circle::after {
  background-color: var(--theme-color-secondary);
}
.c-btn-entry--c-eighteenth .c-circle__arrow {
  fill: var(--theme-color-secondary);
}
.c-btn-entry--c-eighteenth .c-btn-entry__text {
  color: var(--theme-color-secondary);
}

@media only screen and (min-width: 768px) {
  .c-btn-entry--c-eighteenth:hover .c-circle__arrow {
    fill: var(--theme-color-eighteenth);
  }
}
/*---------- START COMPONENT BUTTON TOP ----------*/
.c-btn-top {
  position: fixed;
  cursor: pointer;
  z-index: 200;
  right: 2rem;
  bottom: 2rem;
  width: 6.5rem;
  height: 6.5rem;
  transform: translateY(8.5rem);
  transition: all 0.5s ease;
}
.c-btn-top__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  background-color: var(--theme-color-primary);
  border: 1px solid var(--theme-color-primary);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: background-color 0.3s ease;
}
.c-btn-top__wrap::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 1.8rem;
  height: 1.1rem;
  margin-top: -0.7rem;
  margin-left: -0.9rem;
  background-image: url("./../common_img/");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.c-btn-top.is-show {
  transform: translateY(0);
  transition: all linear 0.5s;
}

@media only screen and (max-width: 767px) {
  .c-btn-top {
    right: 1rem;
    bottom: 1rem;
    width: 5.5rem;
    height: 5.5rem;
    transform: translateY(6.5rem);
  }
  .c-btn-top__wrap {
    border-radius: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn-top:hover .c-btn-top__wrap {
    background-color: var(--theme-color-secondary);
  }
  .c-btn-top:hover .c-btn-top__wrap::before {
    background-image: url("./../common_img/");
  }
}
/*====================================================================================
8. START TAG.
====================================================================================*/
/*---------- START COMPONENT TAG ----------*/
.c-tag {
  display: inline-flex;
  border-radius: 0.5rem;
}
.c-tag__text {
  line-height: 1;
  font-weight: 400;
}

@media only screen and (max-width: 767px) {
  .c-tag {
    padding: 0.5rem 0.7rem;
    min-height: 2.2rem;
  }
  .c-tag__text {
    font-size: 1.2rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-tag {
    padding: 0.5rem 1.5rem;
    min-height: 2.6rem;
  }
  .c-tag__text {
    font-size: 1.4rem;
  }
}

.c-tag--c-eleventh {
  background-color: var(--theme-color-eleventh);
}
.c-tag--c-ninth {
  background-color: var(--theme-color-ninth);
}
.c-tag--c-tenth {
  background-color: var(--theme-color-tenth);
}

/*====================================================================================
9. START ARROW.
====================================================================================*/
/*---------- START COMPONENT CIRCLE ----------*/
.c-circle {
  position: absolute;
  border-radius: 50%;
}
.c-circle::before, .c-circle::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.c-circle:before {
  width: 100%;
  height: 100%;
}
.c-circle::after {
  width: 0;
  height: 0;
}
.c-circle__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
}

@media only screen and (min-width: 768px) {
  .c-circle:hover::before {
    width: 100%;
    height: 100%;
  }
}
/*====================================================================================
10. START ICON.
====================================================================================*/
/*---------- START COMPONENT ICON ZOOM ----------*/
.c-icon-zoom {
  position: relative;
  display: block;
  overflow: hidden;
}
.c-icon-zoom:before {
  position: absolute;
  content: "";
  z-index: 3;
  display: inline-block;
  right: 1rem;
  bottom: 1rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-image: url("../common_img/lightbox/icon-zoom.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.5rem 2.5rem;
  background-color: rgba(0, 0, 0, 0.5);
}

@media only screen and (min-width: 768px) {
  .c-icon-zoom:hover img {
    transform: scale(1.03);
  }
  .c-icon-zoom img {
    transition: transform 0.3s ease;
  }
}
/*====================================================================================
11. START LINK.
====================================================================================*/
@media only screen and (min-width: 768px) {
  a[href^="tel:"] {
    cursor: pointer;
    pointer-events: none;
  }
}
/*---------- START COMPONENT LINK, LINK TOP ----------*/
.c-link,
.c-link-top,
.c-link-main,
.c-link-page {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  .c-link:hover .c-link__text,
  .c-link:hover .c-link-top__text,
  .c-link:hover .c-link-main__text,
  .c-link:hover .c-link-page__text,
  .c-link-top:hover .c-link__text,
  .c-link-top:hover .c-link-top__text,
  .c-link-top:hover .c-link-main__text,
  .c-link-top:hover .c-link-page__text,
  .c-link-main:hover .c-link__text,
  .c-link-main:hover .c-link-top__text,
  .c-link-main:hover .c-link-main__text,
  .c-link-main:hover .c-link-page__text,
  .c-link-page:hover .c-link__text,
  .c-link-page:hover .c-link-top__text,
  .c-link-page:hover .c-link-main__text,
  .c-link-page:hover .c-link-page__text {
    background-position: 0 100%;
    background-size: 100% 0.1rem;
  }
  .c-link__text,
  .c-link-top__text,
  .c-link-main__text,
  .c-link-page__text {
    display: inline;
    transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
/*---------- START COMPONENT LINK ----------*/
.c-link::before {
  position: absolute;
  content: "";
  left: 0;
  background: url("./../common_img/icon.svg") no-repeat center center/100% auto;
}
.c-link__text {
  font-weight: 500;
  text-transform: uppercase;
}


.c-link--nolink {
  transform: none;

  &:hover {

    &::before {
      transform: none;
    }
  }

}
/*---------- START COMPONENT LINK PRIMARY ----------*/
@media only screen and (min-width: 768px) {
  .c-link--c-primary .c-link__text {
    background-image: linear-gradient(var(--theme-color-primary), var(--theme-color-primary));
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0% 1px;
  }
}
/*---------- START COMPONENT LINK SECONDARY ----------*/
@media only screen and (min-width: 768px) {
  .c-link--c-secondary .c-link__text {
    background-image: linear-gradient(var(--theme-color-secondary), var(--theme-color-secondary));
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0% 1px;
  }
}
/*---------- START COMPONENT LINK SM ----------*/
.c-link--sm .c-link__text {
  letter-spacing: 0.05em;
}

@media only screen and (max-width: 767px) {
  .c-link--sm {
    padding-left: 1.9rem;
    font-size: 1.4rem;
  }
  .c-link--sm::before {
    top: 0.5rem;
    width: 1.3rem;
    height: 1.3rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-link--sm {
    padding-left: 2.2rem;
    font-size: 1.6rem;
  }
  .c-link--sm::before {
    top: 0.7rem;
    width: 1.4rem;
    height: 1.4rem;
  }
}
/*---------- START COMPONENT LINK MD ----------*/
@media only screen and (max-width: 767px) {
  .c-link--md {
    padding-left: 2.4rem;
    font-size: 1.6rem;
  }
  .c-link--md::before {
    top: 0.6rem;
    width: 1.5rem;
    height: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-link--md {
    padding-left: 2.7rem;
    font-size: 1.8rem;
  }
  .c-link--md::before {
    top: 0.7rem;
    width: 1.8rem;
    height: 1.8rem;
  }
}
/*---------- START COMPONENT LINK TOP ----------*/
.c-link-top__arrow {
  position: absolute;
  left: 0;
}
.c-link-top__text {
  font-weight: 400;
  display: inline;
  transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media only screen and (min-width: 768px) {
  .c-link-top:hover .c-link-top__arrow {
    transform: scale(1.2);
  }
  .c-link-top__arrow {
    transition: transform 0.3s ease;
  }
}
/*---------- START COMPONENT LINK TOP PRIMARY ----------*/
.c-link-top--c-primary .c-link-top__arrow {
  fill: var(--theme-color-twelfth);
}

@media only screen and (min-width: 768px) {
  .c-link-top--c-primary .c-link-top__text {
    background-image: linear-gradient(var(--theme-color-primary), var(--theme-color-primary));
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0% 1px;
  }
}
/*---------- START COMPONENT LINK TOP SECONDARY ----------*/
.c-link-top--c-secondary .c-link-top__arrow {
  fill: var(--theme-color-secondary);
}
.c-link-top--c-secondary .c-link-top__text {
  background-image: linear-gradient(var(--theme-color-secondary), var(--theme-color-secondary));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
}

/*---------- START COMPONENT LINK TOP SM ----------*/
.c-link-top--sm .c-link-top__text {
  letter-spacing: 0.05em;
}

@media only screen and (max-width: 767px) {
  .c-link-top--sm {
    padding-left: 1.4rem;
    font-size: 1.4rem;
  }
  .c-link-top--sm .c-link-top__arrow {
    top: 0.8rem;
    width: 0.8rem;
    height: 0.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-link-top--sm {
    padding-left: 1.5rem;
    font-size: 1.6rem;
  }
  .c-link-top--sm .c-link-top__arrow {
    top: 1.1rem;
    width: 1rem;
    height: 1rem;
  }
}
/*---------- START COMPONENT LINK TOP MD ----------*/
@media only screen and (max-width: 767px) {
  .c-link-top--md {
    padding-left: 1.7rem;
    font-size: 1.6rem;
  }
  .c-link-top--md .c-link-top__arrow {
    top: 0.8rem;
    width: 1rem;
    height: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-link-top--md {
    padding-left: 2rem;
    font-size: 1.8rem;
  }
  .c-link-top--md .c-link-top__arrow {
    top: 1.1rem;
    width: 1.2rem;
    height: 1.2rem;
  }
}
/*---------- START COMPONENT LINK MAIN ----------*/
.c-link-main__text {
  font-weight: 500;
}
.c-link-main .c-circle {
  right: 0;
}
.c-link-main .c-circle::after {
  transition: width 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99);
}

@media only screen and (min-width: 768px) {
  .c-link-main:hover .c-circle::after {
    width: 100%;
    height: 100%;
  }
  .c-link-main__arrow {
    transition: fill 0.1s ease;
  }
}
/*---------- START COMPONENT LINK MAIN PRIMARY ----------*/
.c-link-main--c-primary .c-circle {
  border: 1px solid var(--theme-color-primary);
  background-color: var(--theme-color-primary);
}
.c-link-main--c-primary .c-circle::before {
  content: none;
}
.c-link-main--c-primary .c-circle__arrow {
  fill: var(--theme-color-secondary);
}

@media only screen and (min-width: 768px) {
  .c-link-main--c-primary:hover .c-circle__arrow {
    fill: var(--theme-color-primary);
  }
  .c-link-main--c-primary .c-link-main__text {
    background-image: linear-gradient(var(--theme-color-primary), var(--theme-color-primary));
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0% 1px;
  }
  .c-link-main--c-primary .c-circle::after {
    background-color: var(--theme-color-secondary);
  }
}
/*---------- START COMPONENT LINK MAIN SM ----------*/
@media only screen and (max-width: 767px) {
  .c-link-main--sm {
    padding-right: 3.2rem;
    font-size: 1.6rem;
  }
  .c-link-main--sm .c-circle {
    top: 0.2rem;
    width: 2.4rem;
    height: 2.4rem;
  }
  .c-link-main--sm .c-circle__arrow {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: -0.4rem;
    margin-left: -0.35rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-link-main--sm {
    padding-right: 4rem;
    font-size: 1.8rem;
  }
  .c-link-main--sm .c-circle {
    top: 0.5rem;
    width: 2.6rem;
    height: 2.6rem;
  }
  .c-link-main--sm .c-circle__arrow {
    width: 0.9rem;
    height: 0.9rem;
    margin-top: -0.45rem;
    margin-left: -0.45rem;
  }
}
/*---------- START COMPONENT LINK MAIN MD ----------*/
@media only screen and (max-width: 767px) {
  .c-link-main--md {
    padding-right: 3.4rem;
    font-size: 1.8rem;
  }
  .c-link-main--md .c-circle {
    top: 0.4rem;
    width: 2.4rem;
    height: 2.4rem;
  }
  .c-link-main--md .c-circle__arrow {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: -0.4rem;
    margin-left: -0.35rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-link-main--md {
    padding-right: 4rem;
    font-size: 2.4rem;
  }
  .c-link-main--md .c-circle {
    top: 1rem;
    width: 2.6rem;
    height: 2.6rem;
  }
  .c-link-main--md .c-circle__arrow {
    width: 0.9rem;
    height: 0.9rem;
    margin-top: -0.45rem;
    margin-left: -0.45rem;
  }
}
/*---------- START COMPONENT LINK PAGE ----------*/
.c-link-page {
  font-weight: 500;
}
.c-link-page .c-circle {
  left: 0;
  border: 0;
}
.c-link-page .c-circle::after {
  transition: width 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), height 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99);
}

@media only screen and (min-width: 768px) {
  .c-link-page {
    letter-spacing: 0.05em;
  }
  .c-link-page:hover .c-circle::after {
    width: 100%;
    height: 100%;
  }
}
/*---------- START COMPONENT LINK PAGE SM ----------*/
@media only screen and (max-width: 767px) {
  .c-link-page--sm {
    padding-left: 2.8rem;
    font-size: 1.4rem;
  }
  .c-link-page--sm .c-circle {
    top: 0;
    width: 2.2rem;
    height: 2.2rem;
  }
  .c-link-page--sm .c-circle__arrow {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: -0.35rem;
    margin-left: -0.35rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-link-page--sm {
    padding-left: 3.5rem;
    font-size: 1.6rem;
  }
  .c-link-page--sm .c-circle {
    top: 0.3rem;
    width: 2.6rem;
    height: 2.6rem;
  }
  .c-link-page--sm .c-circle__arrow {
    width: 0.9rem;
    height: 0.9rem;
    margin-top: -0.45rem;
    margin-left: -0.45rem;
  }
}
/*---------- START COMPONENT LINK PAGE SECONDARY ----------*/
.c-link-page--c-secondary .c-circle {
  border: 1px solid var(--theme-color-secondary);
  background-color: var(--theme-color-secondary);
}
.c-link-page--c-secondary .c-circle::before {
  content: none;
}
.c-link-page--c-secondary .c-circle::after {
  background-color: var(--theme-color-primary);
}
.c-link-page--c-secondary .c-circle__arrow {
  fill: var(--theme-color-primary);
}

@media only screen and (min-width: 768px) {
  .c-link-page--c-secondary:hover .c-circle__arrow {
    fill: var(--theme-color-secondary);
  }
  .c-link-page--c-secondary .c-link-page__text {
    background-image: linear-gradient(var(--theme-color-secondary), var(--theme-color-secondary));
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0% 1px;
  }
}
/*====================================================================================
12. START HEADING.
====================================================================================*/
/*====================================================================================
13. START TITLE.
====================================================================================*/
/*---------- START COMPONENT TITLE ----------*/
.c-title__text {
  position: relative;
  display: block;
  font-weight: 500;
  text-align: center;
}
.c-title__text::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  background-image: url("./../common_img/icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media only screen and (max-width: 767px) {
  .c-title__text {
    padding-top: 3.6rem;
    font-size: 2.2rem;
  }
  .c-title__text::before {
    width: 2.8rem;
    height: 2.8rem;
    margin-left: -1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-title__text {
    padding-top: 5.2rem;
    font-size: 3rem;
  }
  .c-title__text::before {
    width: 3.7rem;
    height: 3.7rem;
    margin-left: -1.85rem;
  }
}
/*---------- START COMPONENT TITLE ----------*/
.c-title--en .c-title__text {
  text-transform: uppercase;
  font-family: var(--theme-font-en-primary);
}

/*---------- START COMPONENT TITLE BASE ----------*/
.c-title-base {
  font-weight: 500;
}

@media only screen and (max-width: 767px) {
  .c-title-base {
    line-height: 1.5;
  }
}
@media only screen and (min-width: 768px) {
  .c-title-base {
    line-height: 1.6;
  }
}
/*---------- START COMPONENT TITLE BASE sixteenth ----------*/
.c-title-base--c-sixteenth {
  color: var(--theme-color-sixteenth);
}

/*---------- START COMPONENT TITLE BASE eighteenth ----------*/
.c-title-base--c-eighteenth {
  color: var(--theme-color-eighteenth);
}

/*---------- START COMPONENT TITLE BASE LG ----------*/
@media only screen and (max-width: 767px) {
  .c-title-base--lg {
    font-size: 2.3rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-title-base--lg {
    font-size: 3.6rem;
  }
}
/*---------- START COMPONENT TITLE BASE MD ----------*/
@media only screen and (max-width: 767px) {
  .c-title-base--md {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-title-base--md {
    font-size: 3rem;
  }
}
/*---------- START COMPONENT TITLE BASE MD VERSION 2 ----------*/
@media only screen and (max-width: 767px) {
  .c-title-base--md-v2 {
    font-size: 2.2rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-title-base--md-v2 {
    font-size: 3rem;
  }
}
/*---------- START COMPONENT TITLE BASE SM ----------*/
@media only screen and (max-width: 767px) {
  .c-title-base--sm {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-title-base--sm {
    font-size: 2.4rem;
  }
}
/*---------- START COMPONENT TITLE BASE SM VERSION 2 ----------*/
.c-title-base--sm-v2 span {
  position: relative;
  display: inline-block;
}
.c-title-base--sm-v2 span::before, .c-title-base--sm-v2 span::after {
  position: absolute;
  top: 0;
}
.c-title-base--sm-v2 span::before {
  content: "＼";
}
.c-title-base--sm-v2 span::after {
  content: "／";
}

@media only screen and (max-width: 767px) {
  .c-title-base--sm-v2 {
    font-size: 2rem;
  }
  .c-title-base--sm-v2 span {
    padding-left: 0.5rem;
  }
  .c-title-base--sm-v2 span::before {
    left: -2rem;
  }
  .c-title-base--sm-v2 span::after {
    right: -2rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-title-base--sm-v2 {
    font-size: 2.4rem;
  }
  .c-title-base--sm-v2 span {
    padding: 0 1.5rem 0 2rem;
  }
  .c-title-base--sm-v2 span::before {
    left: -2rem;
  }
  .c-title-base--sm-v2 span::after {
    right: -2rem;
  }
}
/*====================================================================================
14. START TEXT.
====================================================================================*/
/*---------- START COMPONENT TEXT INDENT ----------*/
.c-text-indent {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

/*---------- START COMPONENT TEXT UNDERLINE ----------*/
a.c-tdn {
  text-decoration: none;
}
a.c-tdn:hover {
  text-decoration: underline;
}

/*====================================================================================
15. START LOGO.
====================================================================================*/
/*---------- START COMPONENT LOGO ----------*/
.c-logo {
  position: relative;
  z-index: 1000;
  text-align: center;
  text-decoration: none;
}
.c-logo__img img {
  width: auto;
}
.c-logo__text {
  font-family: var(--theme-font-en-primary);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
  .c-logo__img img {
    height: 6rem;
  }
  .c-logo__text {
    font-size: 1.1rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-logo {
    transition: transform 0.1s ease;
  }
  .c-logo__img img {
    height: 10.1rem;
  }
  .c-logo__text {
    font-size: 1.8rem;
  }
}
/*---------- START COMPONENT LOGO FOOTER ----------*/
.c-logo-footer {
  display: block;
  max-width: 23rem;
  padding: 2.5rem 1rem 1.5rem 1rem;
  border: 1px solid var(--theme-color-secondary);
  text-align: center;
  text-decoration: none;
}
.c-logo-footer__img img {
  width: auto;
  height: 10.1rem;
}
.c-logo-footer__text {
  margin-top: 0.5rem;
  font-family: var(--theme-font-en-primary);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
  .c-logo-footer {
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) {
  .c-logo-footer__wrap {
    transition: transform 0.1s ease;
  }
}
/*====================================================================================
16. START DECORATION.
====================================================================================*/
/*---------- START COMPONENT DECORATION ----------*/
.c-deco {
  position: relative;
}
.c-deco__wrap {
  position: absolute;
  z-index: -1;
  top: 0;
  height: 100%;
  pointer-events: none;
}
.c-deco__img {
  position: absolute;
  height: auto;
}

@media only screen and (max-width: 767px) {
  .c-deco__wrap {
    left: 0;
    width: 100%;
  }
  .c-deco__img {
    max-width: 37.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-deco__wrap {
    left: 50%;
    width: 192rem;
    margin-left: -96rem;
  }
}
/*====================================================================================
17. START EFFECT.
====================================================================================*/
/*---------- START COMPONENT EFFECT ZOOM ----------*/
.c-e-zoom {
  display: inline-block;
}

@media only screen and (min-width: 768px) {
  .c-e-zoom {
    transition: transform 0.3s ease;
  }
  .c-e-zoom:hover {
    transform: scale(1.025);
  }
}
/*---------- START COMPONENT EFFECT OPACITY IMAGES ----------*/
@media only screen and (min-width: 768px) {
  .c-e-opacity-img:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
}
/*====================================================================================
20. START ITEM.
====================================================================================*/
/*---------- START COMPONENT ITEM BASE ----------*/
.c-item-base {
  position: relative;
}
.c-item-base::before {
  position: absolute;
  top: 0;
  left: 0;
}

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

/*---------- START COMPONENT ITEM CIRCLE ----------*/
.c-item-circle {
  padding-left: 1.1em;
}
.c-item-circle::before {
  content: "●";
}

/*---------- START COMPONENT ITEM STAR ----------*/
.c-item-star {
  padding-left: 1.1em;
}
.c-item-star::before {
  content: "※";
}

/*---------- START COMPONENT ITEM MAIN ----------*/
.c-item-main__row {
  display: flex;
}
.c-item-main__left {
  flex: 0 0 auto;
}
.c-item-main__right {
  flex: 1;
  padding-left: 0.2rem;
}

/*====================================================================================
21. START LIST.
====================================================================================*/
/*---------- START COMPONENT LIST INDENT ----------*/
.c-list-indent > li {
  padding-left: 1em;
  text-indent: -1em;
}

/*---------- START COMPONENT LIST BASE ----------*/
.c-list-base > li {
  position: relative;
}
.c-list-base > li::before {
  position: absolute;
  top: 0;
  left: 0;
}

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

/*---------- START COMPONENT LIST CIRCLE ----------*/
.c-list-circle > li {
  padding-left: 1.3em;
}
.c-list-circle > li::before {
  content: "●";
  transform: scale(0.8);
}

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

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

/*====================================================================================
22. START FORM.
====================================================================================*/
/*---------- START BASE FORM ----------*/
input,
select,
option,
optgroup,
textarea {
  font-family: var(--theme-font-jp-primary);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-size-adjust: 100%;
  color: var(--theme-color-primary);
  background-color: var(--theme-color-secondary);
}

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

@media only screen and (max-width: 767px) {
  input,
  select,
  option,
  optgroup,
  textarea {
    font-size: 1.4rem;
    line-height: 1.7;
  }
}
@media only screen and (min-width: 768px) {
  input,
  select,
  option,
  optgroup,
  textarea {
    font-size: 1.6rem;
    line-height: 1.88;
  }
}
/*---------- START COMPONENT INPUT ----------*/
.c-input {
  width: 100%;
  border: 1px solid var(--theme-border-fifth);
}
.c-input:focus {
  outline: none;
  border: 1px solid var(--theme-color-primary);
}
.c-input::placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .c-input {
    height: 4.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .c-input::placeholder {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-input {
    height: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .c-input::placeholder {
    font-size: 1.6rem;
  }
}
/*---------- START COMPONENT 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;
}

/*---------- START COMPONENT SELECT ----------*/
.c-select {
  position: relative;
  display: inline-block;
  width: 100%;
}
.c-select select {
  width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: none;
  color: var(--theme-color-primary);
  border: 1px solid var(--theme-border-fifth);
}
.c-select select:focus {
  outline: none;
  border: 1px solid var(--theme-color-primary);
}
.c-select select::-ms-expand {
  display: none;
}
.c-select select option {
  color: var(--theme-color-primary);
}
.c-select:after {
  position: absolute;
  content: "▼";
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--theme-color-primary);
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  .c-select {
    height: 4.5rem;
  }
  .c-select:after {
    right: 1rem;
  }
  .c-select select {
    height: 4.5rem;
    padding-left: 1rem;
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-select {
    height: 5rem;
  }
  .c-select select {
    height: 5rem;
    padding-left: 1.5rem;
    padding-right: 3rem;
  }
}
/*---------- START COMPONENT TEXTAREA ----------*/
.c-textarea {
  resize: none;
  width: 100%;
  height: 100%;
  border: 1px solid var(--theme-border-fifth);
}
.c-textarea:focus {
  outline: none;
  border: 1px solid var(--theme-color-primary);
}
.c-textarea::placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .c-textarea {
    padding: 0.5rem 1rem;
  }
  .c-textarea::placeholder {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-textarea {
    padding: 1rem 1.5rem;
  }
  .c-textarea::placeholder {
    font-size: 1.6rem;
  }
}
/*---------- START COMPONENT RADIO ----------*/
.c-rdo {
  display: flex;
}
.c-rdo label {
  flex: 1;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .c-rdo input[type=radio] {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.2rem;
  }
  .c-rdo label {
    padding-left: 0.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-rdo input[type=radio] {
    width: 2rem;
    height: 2rem;
    margin-top: 0.5rem;
  }
  .c-rdo label {
    padding-left: 1rem;
  }
}
/*---------- START COMPONENT CHECKBOX ----------*/
.c-chk {
  display: flex;
}
.c-chk label {
  flex: 1;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .c-chk input[type=checkbox] {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.2rem;
  }
  .c-chk label {
    padding-left: 0.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-chk input[type=checkbox] {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 0.4rem;
  }
  .c-chk label {
    padding-left: 1.5rem;
  }
}