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

1. START BASE.
2. START CONTAINER.
3. START HEADER.
4. START FOOTER.
5. START GROUP.

6. START BUTTON.
7. START BOX.
8. START ICON.
9. START LINK.
10. START HEADING.
11. START TITLE.
12. START TEXT.
13. START LOGO.
14. START IMAGE.
15. START DECORATION.
16. START KEYFRAMES.
17. START ITEM.
18. START LIST.
19. START FORM.

====================================================================================*/
/*====================================================================================
1. START BASE.
====================================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
}

.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
}

:root {
  /* Start shade system */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F5F5F5;
  --color-neutral-100: #EFEFEF;
  --color-neutral-200: #E8E7E3;
  --color-neutral-300: #E8E6E0;
  --color-neutral-400: #D9D9D9;
  --color-neutral-450: #D3D3D3;
  --color-neutral-500: #C8C8C8;
  --color-neutral-600: #9E9E9E;
  --color-neutral-650: #919191;
  --color-neutral-675: #878888;
  --color-neutral-700: #808080;
  --color-neutral-800: #707070;
  --color-neutral-850: #4C4C4C;
  --color-neutral-900: #1F1F1F;
  --color-neutral-950: #1A1A1C;
  --color-neutral-975: #101010;
  --color-gold-500: #B1976B;
  --color-blue-700: #00328D;
  --color-blue-800: #004D85;
  --color-red-800: #A80015;
  --color-red-500: #ff0000;
  --color-brown-700: #472813;
  --bg-gradient-gold-1000: linear-gradient(90deg, rgba(189, 162, 47, 1) 0%, rgba(200, 177, 75, 1) 18%, rgba(231, 219, 157, 1) 43%, rgba(217, 200, 120, 1) 69%, rgba(194, 168, 58, 1) 100%);
  --bg-gradient-gold-500: linear-gradient(90deg, rgba(172, 146, 31, 1) 0%, rgba(169, 146, 39, 1) 18%, rgba(191, 173, 79, 1) 43%, rgba(183, 161, 59, 1) 69%, rgba(164, 136, 17, 1) 100%);
  --font-noto-sans-jp: "Noto Sans JP", sans-serif;
  --font-noto-serif-jp: "Noto Serif JP", serif;
  /* Start color */
  --theme-color-primary: var(--color-neutral-950);
  --theme-color-secondary: var(--color-neutral-0);
  --theme-color-tertiary: var(--color-neutral-975);
  --theme-color-quaternary: var(--color-neutral-900);
  --theme-color-quinary: var(--color-neutral-800);
  --theme-color-senary: var(--color-neutral-700);
  --theme-color-septenary: var(--color-neutral-600);
  --theme-color-octonary: var(--color-neutral-500);
  --theme-color-nonary: var(--color-neutral-400);
  --theme-color-denary: var(--color-neutral-300);
  --theme-color-undenary: var(--color-neutral-200);
  --theme-color-dodenary: var(--color-neutral-100);
  --theme-color-tridenary: var(--color-neutral-50);
  --theme-color-quattuordenary: var(--color-gold-500);
  --theme-color-quindenary: var(--color-blue-700);
  --theme-color-sexdenary: var(--color-brown-700);
  --theme-color-septendenary: var(--color-neutral-850);
  --theme-color-octodenary: var(--color-neutral-450);
  --theme-color-novemdenary: var(--color-neutral-650);
  --theme-color-vigenary: var(--color-neutral-675);
  --theme-color-unvigenary: var(--color-blue-800);
  --theme-color-dovigenary: var(--color-red-800);
  --theme-bg-primary: var(--bg-gradient-gold-1000);
  --theme-bg-secondary: var(--bg-gradient-gold-500);
  /* Start font */
  --theme-font-jp-primary: var(--font-noto-sans-jp);
  --theme-font-jp-secondary: var(--font-noto-serif-jp);
}

@media only screen and (max-width: 767px) {
  :root {
    /* Start spacing */
    --spacing-sp-70-pc-140: 7rem;
    --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-75: 3.5rem;
    --spacing-sp-35-pc-70: 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-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;
  }
}
@media only screen and (min-width: 768px) {
  :root {
    /* Start spacing */
    --spacing-sp-70-pc-140: 14rem;
    --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-75: 7.5rem;
    --spacing-sp-35-pc-70: 7rem;
    --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-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;
  }
}
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.lb-disable-scrolling {
  position: fixed;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 1.3rem;
    line-height: 1.7;
  }
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 1.5rem;
    line-height: 1.9;
  }
}
@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,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
  font-weight: 700;
}

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-fluid,
.l-container-xxl,
.l-container-xl,
.l-container-lg,
.l-container-md,
.l-container-sm {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

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

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

/*====================================================================================
3. START HEADER.
====================================================================================*/
/*---------- START LAYOUT HEADER ----------*/
.l-header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
}
.l-header::before {
  position: absolute;
  content: "";
  z-index: -1;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: var(--theme-color-secondary);
  transition: height 0.2s ease;
}
.l-header.is-fixed::before {
  height: 100%;
}
.l-header.is-fixed .c-logo__img--white {
  display: none;
}
.l-header.is-fixed .c-logo__img--black {
  display: block;
}
.l-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.l-header__left {
  flex: 1;
}
.l-header__right {
  flex: 0 0 auto;
}

@media only screen and (max-width: 767px) {
  .l-header::before {
    box-shadow: 0.1rem 0.4rem 0.8rem -0.4rem rgba(0, 0, 0, 0.1);
  }
  .l-header__left {
    padding: 1rem 1rem 1rem 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .l-header.is-fixed .p-nav__link {
    color: var(--theme-color-primary);
  }
  .l-header.is-fixed .p-nav__link::after {
    background-color: var(--theme-color-primary);
  }
  .l-header::before {
    box-shadow: 0.1rem 0.4rem 0.8rem -0.4rem rgba(0, 0, 0, 0.15);
  }
  .l-header__row {
    padding: 2.8rem 3rem 2.8rem 2.8rem;
  }
}
/*---------- START COMPONENT NAV ----------*/
.p-nav__link {
  font-weight: 700;
  text-decoration: none;
}

@media only screen and (max-width: 767px) {
  .p-nav {
    position: fixed;
    z-index: 997;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100dvh;
    padding: 7rem 1.5rem 5.5rem 1.5rem;
    background-color: var(--theme-color-secondary);
    overflow-y: auto;
    visibility: hidden;
    transition: left 0.3s ease, visibility 0.3s ease;
  }
  .p-nav.is-active {
    left: 0;
    visibility: visible;
  }
  .p-nav.is-active .p-nav__item {
    backface-visibility: hidden;
    animation-name: fadeInLeft;
    animation-duration: 0.6s;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0, 0.2, 0.8, 1);
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  .p-nav.is-active .p-nav__item:nth-child(1) {
    animation-delay: 0.1s;
  }
  .p-nav.is-active .p-nav__item:nth-child(2) {
    animation-delay: 0.2s;
  }
  .p-nav.is-active .p-nav__item:nth-child(3) {
    animation-delay: 0.3s;
  }
  .p-nav.is-active .p-nav__item:nth-child(4) {
    animation-delay: 0.4s;
  }
  .p-nav.is-active .p-nav__item:nth-child(5) {
    animation-delay: 0.5s;
  }
  .p-nav.is-active .p-nav__item:nth-child(6) {
    animation-delay: 0.6s;
  }
  .p-nav.is-active .p-nav__item:nth-child(7) {
    animation-delay: 0.7s;
  }
  .p-nav.is-active .p-nav__item:nth-child(8) {
    animation-delay: 0.8s;
  }
  .p-nav.is-active .p-nav__item:nth-child(9) {
    animation-delay: 0.9s;
  }
  .p-nav.is-active .p-nav__item:nth-child(10) {
    animation-delay: 1s;
  }
  .p-nav__item {
    border-bottom: 1px solid var(--theme-color-septenary);
  }
  .p-nav__link {
    display: block;
    padding: 1.4rem 0;
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-nav__list {
    display: flex;
  }
  .p-nav__item {
    margin-left: 4rem;
  }
  .p-nav__item:first-child {
    margin-left: auto;
  }
  .p-nav__link {
    position: relative;
    padding: 0.5rem 0;
    color: var(--theme-color-secondary);
  }
  .p-nav__link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  .p-nav__link::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.2rem;
    background-color: var(--theme-color-secondary);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s cubic-bezier(0.37, 0.31, 0.31, 0.9);
  }
}
/*====================================================================================
4. START FOOTER.
====================================================================================*/
.l-footer {
  position: relative;
  z-index: 100;
  background-color: var(--theme-color-secondary);
}
.l-footer__copy {
  padding: 2rem 0;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
}

/*====================================================================================
5. START GROUP.
====================================================================================*/
/*---------- START COMPONENT GROUP ----------*/
.c-group {
  position: relative;
}
.c-group::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: url("./../common_img/group-bg.webp") no-repeat center center/cover;
}
.c-group__outer {
  position: relative;
  background-color: var(--theme-color-secondary);
}
.c-group__inner {
  border: 1px solid var(--theme-color-quattuordenary);
}

@media only screen and (max-width: 767px) {
  .c-group {
    margin-right: 1rem;
  }
  .c-group::before {
    right: -1rem;
    bottom: -1rem;
  }
  .c-group__outer {
    padding: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-group::before {
    right: -2rem;
    bottom: -2rem;
  }
  .c-group__outer {
    padding: 2rem;
  }
}
/*====================================================================================
6. START BUTTON.
====================================================================================*/
/*---------- START COMPONENT BUTTON ----------*/
.c-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  border: 0;
  outline: none;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  touch-action: manipulation;
  text-decoration: none;
  overflow: hidden;
  background-color: var(--theme-color-quattuordenary);
  transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0, 0, 0.38, 2);
}
.c-btn:focus {
  outline: none;
}
.c-btn svg {
  position: absolute;
  top: 50%;
}
.c-btn svg path {
  transition: stroke 0.3s ease;
}
.c-btn__text {
  font-weight: 700;
  transition: color 0.2s ease;
}

@media only screen and (max-width: 767px) {
  .c-btn {
    max-width: 30rem;
    min-height: 7rem;
  }
  .c-btn svg {
    width: 1.6rem;
    height: 1.4rem;
    margin-top: -0.7rem;
  }
  .c-btn__text {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn {
    max-width: 46rem;
    min-height: 9.2rem;
  }
  .c-btn:hover {
    background-color: var(--theme-color-quindenary);
  }
  .c-btn:hover svg path {
    stroke: var(--theme-color-secondary);
  }
  .c-btn:hover .c-btn__text {
    color: var(--theme-color-secondary);
  }
  .c-btn svg {
    width: 2.3rem;
    height: 2rem;
    margin-top: -1rem;
  }
  .c-btn__text {
    font-size: 2.4rem;
  }
}
/*---------- START COMPONENT BUTTON LEFT ----------*/
.c-btn--left svg {
  transform: scaleX(-1);
}

@media only screen and (max-width: 767px) {
  .c-btn--left svg {
    left: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn--left svg {
    left: 2.5rem;
  }
}
/*---------- START COMPONENT BUTTON RIGHT ----------*/
@media only screen and (max-width: 767px) {
  .c-btn--right svg {
    right: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn--right svg {
    right: 2.5rem;
  }
}
/*---------- START COMPONENT BUTTON HAMBURGER ----------*/
@media only screen and (max-width: 767px) {
  .c-btn-hamburger {
    position: relative;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border: 0;
    background-color: var(--theme-color-secondary);
  }
  .c-btn-hamburger__wrap {
    position: relative;
    width: 2.8rem;
    height: 2rem;
  }
  .c-btn-hamburger__line {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 0.2rem;
    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__line:nth-child(2) {
    top: 0.9rem;
  }
  .c-btn-hamburger__line:nth-child(3) {
    top: 1.8rem;
  }
  .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;
    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 (min-width: 768px) {
  .c-btn-hamburger {
    display: none;
  }
}
/*====================================================================================
7. START BOX.
====================================================================================*/
/*---------- START COMPONENT BUTTON FIXED ----------*/
.c-box-fixed {
  position: fixed;
  z-index: 99;
  cursor: pointer;
}
.c-box-fixed__link {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.c-box-fixed__link img {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 767px) {
  .c-box-fixed {
    right: 1rem;
    bottom: 1rem;
    width: 8rem;
    height: 8rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-box-fixed {
    right: 2vw;
    bottom: 2vw;
    width: 12vw;
    height: 12vw;
  }
  .c-box-fixed:hover img {
    transform: scale(1.03);
  }
}
/*====================================================================================
8. START ICON.
====================================================================================*/
/*---------- START COMPONENT ICON PLUS ----------*/
.c-icon-plus {
  position: absolute;
  top: 50%;
}
.c-icon-plus::before, .c-icon-plus::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background-color: var(--theme-color-denary);
}
.c-icon-plus::before {
  transform: rotate(-90deg);
  transition: transform 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
}

@media only screen and (max-width: 767px) {
  .c-icon-plus {
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -0.7rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-icon-plus {
    width: 2.2rem;
    height: 2.2rem;
    margin-top: -0.8rem;
  }
}
/*====================================================================================
9. START LINK.
====================================================================================*/
@media only screen and (min-width: 768px) {
  a[href^="tel:"] {
    cursor: pointer;
    pointer-events: none;
  }
}
/* ---------- LINK DECORATION ---------- */
@media only screen and (max-width: 767px) {
  .c-link-line {
    text-decoration: underline !important;
  }
}
@media only screen and (min-width: 768px) {
  .c-link-line {
    text-decoration: none !important;
  }
}
/*====================================================================================
10. START HEADING.
====================================================================================*/
/*---------- START COMPONENT HEADING ----------*/
.c-heading {
  font-family: var(--theme-font-jp-secondary);
}
.c-heading__title {
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.c-heading__row {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 78.6rem;
  margin: 0 auto;
}
.c-heading__deco {
  position: relative;
  flex: 1;
  height: 1px;
}
.c-heading__deco--left {
  margin: 0 1rem 0 1.3rem;
}
.c-heading__deco--left::before {
  left: -1.3rem;
}
.c-heading__deco--left::after {
  right: -1rem;
}
.c-heading__deco--right {
  margin: 0 1.3rem 0 1rem;
}
.c-heading__deco--right::before {
  right: -1.3rem;
}
.c-heading__deco--right::after {
  left: -1rem;
}
.c-heading__deco::before, .c-heading__deco::after {
  position: absolute;
  content: "";
}
.c-heading__deco::before {
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.35rem;
  border-radius: 50%;
}
.c-heading__deco::after {
  top: 50%;
  width: 1rem;
  height: 1.9rem;
  margin-top: -0.95rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
.c-heading__center {
  flex: 0 0 auto;
  padding: 0 1.2rem;
  line-height: 1.5;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .c-heading__title {
    margin-bottom: 1.5rem;
    font-size: 7vw;
    font-size: clamp(3rem, 7vw, 4.5rem);
  }
  .c-heading__text {
    font-size: 1.2rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-heading__title {
    margin-bottom: 2.8rem;
    font-size: 8rem;
  }
  .c-heading__text {
    font-size: 1.6rem;
  }
}
/*---------- START COMPONENT HEADING WHITE ----------*/
.c-heading--white {
  color: var(--theme-color-denary);
}
.c-heading--white .c-heading__deco {
  background-color: var(--theme-color-denary);
}
.c-heading--white .c-heading__deco--left::after {
  background-image: url("./../common_img/arrow-left-white.svg");
}
.c-heading--white .c-heading__deco--right::after {
  background-image: url("./../common_img/arrow-right-white.svg");
}
.c-heading--white .c-heading__deco::before {
  background-color: var(--theme-color-denary);
}

/*---------- START COMPONENT HEADING BLACK ----------*/
.c-heading--black {
  color: var(--theme-color-primary);
}
.c-heading--black .c-heading__deco {
  background-color: var(--theme-color-primary);
}
.c-heading--black .c-heading__deco--left::after {
  background-image: url("./../common_img/arrow-left-black.svg");
}
.c-heading--black .c-heading__deco--right::after {
  background-image: url("./../common_img/arrow-right-black.svg");
}
.c-heading--black .c-heading__deco::before {
  background-color: var(--theme-color-primary);
}

/*====================================================================================
11. START TITLE.
====================================================================================*/
/*---------- START COMPONENT TITLE ----------*/
.c-title__text {
  display: block;
  font-weight: 700;
  text-align: center;
  font-family: var(--theme-font-jp-secondary);
}
.c-title__text--en {
  margin-bottom: 1rem;
  color: var(--theme-color-quattuordenary);
  text-transform: uppercase;
}
.c-title__text--ja {
  color: var(--theme-color-primary);
}

@media only screen and (max-width: 767px) {
  .c-title__text--en {
    font-size: 1.5rem;
  }
  .c-title__text--ja {
    font-size: 2.2rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-title__text--en {
    font-size: 2rem;
  }
  .c-title__text--ja {
    font-size: 3.6rem;
  }
}
/*---------- START COMPONENT TITLE SP SHADOW ----------*/
@media only screen and (max-width: 767px) {
  .c-title--sp-shadow {
    text-shadow: 1px 0 var(--theme-color-secondary), -1px 0 var(--theme-color-secondary), 0 1px var(--theme-color-secondary), 0 -1px var(--theme-color-secondary), 1px 1px var(--theme-color-secondary), -1px -1px var(--theme-color-secondary), 1px -1px var(--theme-color-secondary), -1px 1px var(--theme-color-secondary);
  }
}
/*====================================================================================
12. START TEXT.
====================================================================================*/
/*---------- START COMPONENT TEXT INDENT ----------*/
.c-text-quattuordenary {
  color: var(--theme-color-quattuordenary);
  font-weight: 700;
}

/*====================================================================================
13. START LOGO.
====================================================================================*/
/*---------- START COMPONENT LOGO ----------*/
.c-logo {
  text-decoration: none;
}
.c-logo__img {
  width: auto;
}
.c-logo__img--white {
  display: block;
}
.c-logo__img--black {
  display: none;
}

@media only screen and (max-width: 767px) {
  .c-logo__img {
    max-height: 3.5rem;
  }
}
/*====================================================================================
14. START IMAGE.
====================================================================================*/
/*---------- START COMPONENT BACKGROUND ----------*/
.c-bg {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

/*====================================================================================
15. 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, .c-deco__shape {
  position: absolute;
  height: auto;
}
.c-deco__img {
  z-index: 2;
}
.c-deco__shape {
  z-index: 1;
}

@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: 136.6rem;
    margin-left: -68.3rem;
  }
}
/*====================================================================================
16. START KEYFRAMES.
====================================================================================*/
/*---------- START FADE IN LEFT ----------*/
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-3rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*====================================================================================
17. 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 PROJECT LIST ITEM CHECK ----------*/
.p-list-item-check .c-item-check {
  border-bottom: 1px solid var(--theme-color-quinary);
}
.p-list-item-check .c-item-check:last-child {
  border-bottom: 0;
}

/*---------- START COMPONENT ITEM CHECK ----------*/
.c-item-check {
  position: relative;
}
.c-item-check::before {
  position: absolute;
  content: "";
  left: 0;
  background: url("./../common_img/icon-check-box.svg") no-repeat center center/100% auto;
}
.c-item-check__text {
  color: var(--theme-color-secondary);
  font-weight: 700;
}
.c-item-check__text strong {
  color: var(--theme-color-quattuordenary);
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .c-item-check {
    padding: 1rem 0 1rem 3rem;
  }
  .c-item-check::before {
    top: 1.4rem;
    width: 2.3rem;
    height: 2rem;
  }
  .c-item-check__text {
    font-size: 1.6rem;
    letter-spacing: 0.05em;
  }
}
@media only screen and (min-width: 768px) {
  .c-item-check {
    padding: 1.15rem 0 1.15rem 3.8rem;
  }
  .c-item-check::before {
    top: 1.8rem;
    width: 3rem;
    height: 2.6rem;
  }
  .c-item-check__text {
    font-size: 2rem;
    letter-spacing: 0.12em;
  }
}
/*====================================================================================
18. 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;
}

/*====================================================================================
19. START FORM.
====================================================================================*/
/*---------- START BASE FORM ----------*/
input,
select,
textarea {
  font-family: var(--theme-font-jp-primary);
  font-weight: 400;
  text-size-adjust: 100%;
  color: var(--theme-color-primary);
  background-color: var(--theme-color-tridenary);
}

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

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

@media only screen and (max-width: 767px) {
  .c-input {
    height: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .c-input--sm {
    width: 20rem;
  }
  .c-input::placeholder {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-input {
    height: 6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .c-input--sm {
    width: 24rem;
  }
  .c-input--md {
    width: 36rem;
  }
  .c-input::placeholder {
    font-size: 1.6rem;
  }
}
/*---------- START COMPONENT TEXTAREA ----------*/
.c-textarea {
  resize: none;
  width: 100%;
  height: 100%;
  border: 1px solid var(--theme-color-tridenary);
}
.c-textarea:focus {
  outline: none;
  border: 1px solid var(--theme-color-quattuordenary);
}
.c-textarea::placeholder {
  color: var(--theme-color-senary);
  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;
  align-items: center;
}
.c-rdo label {
  flex: 1;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .c-rdo label {
    padding-left: 0.6rem;
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-rdo input[type=radio] {
    margin-top: 0.2rem;
  }
  .c-rdo label {
    padding-left: 0.8rem;
    font-size: 1.6rem;
  }
}
/*---------- START COMPONENT CHECKBOX ----------*/
.c-chk {
  display: flex;
  align-items: center;
}
.c-chk label {
  flex: 1;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .c-chk input[type=checkbox] {
    transform: scale(1.4);
  }
  .c-chk label {
    padding-left: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-chk input[type=checkbox] {
    transform: scale(1.5);
  }
  .c-chk label {
    padding-left: 1.5rem;
  }
}
/*---------- START UI DATE PICKER ----------*/
.ui-datepicker {
  z-index: 100 !important;
  width: 20em !important;
}
.ui-datepicker.hide-calendar .ui-datepicker-calendar {
  display: none;
}
.ui-datepicker td a,
.ui-datepicker td span {
  text-align: center;
}
.ui-datepicker .ui-state-default {
  background-color: var(--theme-color-secondary);
}
.ui-datepicker .ui-state-default.ui-state-active {
  color: var(--theme-color-secondary);
  border-color: var(--theme-color-quattuordenary);
  background-color: var(--theme-color-quattuordenary);
}
.ui-datepicker .ui-state-default.ui-state-highlight {
  color: var(--theme-color-secondary);
  border-color: var(--theme-color-primary);
  background-color: var(--theme-color-primary);
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  top: 0.8rem;
  border: 1px solid var(--theme-color-primary);
  background-color: var(--theme-color-secondary);
}
.ui-datepicker select {
  height: 3.5rem;
  background-color: var(--theme-color-secondary);
}
.ui-datepicker select.ui-datepicker-year {
  width: 41%;
  margin-right: 4%;
}
.ui-datepicker select.ui-datepicker-month {
  width: 41%;
  margin-left: 4%;
}