/**************************************
 * responsive
**************************************/
@media screen and (min-width: 769px) {
  .c-s {
    display: none;
  }
}

/**************************************
 * font
**************************************/
.ff-Roboto {
  font-family: 'Roboto', sans-serif;
}

.ff-NotoSansJP {
  font-family: 'Noto Sans JP', sans-serif;
}

/**************************************
 * button
**************************************/
.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 245px;
  height: 60px;
  background-color: var(--color-fighters-blue);
  border-radius: calc(1px / 0);
  font-size: calc(16 / var(--root-font-size) * 1rem);
  font-weight: 600;
  color: var(--color-default-white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
  .c-button:hover {
    opacity: 0.8;
  }
}

.c-button:active {
  transform: scale(0.95);
}

.c-button:disabled {
  filter: grayscale(1);
}

@media screen and (min-width: 769px) {
  .c-button {
    width: 320px;
    height: 80px;
    font-size: calc(18 / var(--root-font-size) * 1rem);
  }
}

/**************************************
 * headline
**************************************/
.c-headlineL {
  text-align: center;
  font-size: calc(24 / var(--root-font-size) * 1rem);
  font-weight: 700;
}

.c-headlineM {
  text-align: center;
  font-size: calc(16 / var(--root-font-size) * 1rem);
  font-weight: 700;
}

@media screen and (min-width: 769px) {
  .c-headlineL {
    font-size: calc(40 / var(--root-font-size) * 1rem);
  }

  .c-headlineM {
    font-size: calc(20 / var(--root-font-size) * 1rem);
  }
}

/**************************************
 * link
**************************************/
.c-textlink {
  color: #006298;
  text-decoration: underline;
}

/**************************************
 * hover
**************************************/
.c-hover {
  display: block;
}
@media (hover: hover) {
  .c-hover:hover {
    opacity: 0.8;
  }
}

/**************************************
 * divider
**************************************/
.c-divider {
  margin-top: 32px;
  margin-bottom: 0;
  border-bottom: 0px;
  border-color: var(--color-gray);
}

/**************************************
 * shadow
**************************************/
.c-shadow {
  box-shadow: 2px 3px 6px 1px rgb(0 0 0 / 16%);
}

/**************************************
 * color
**************************************/
.c-color-fightersblue {
  color: var(--color-fighters-blue);
}

/**************************************
 * accordion
**************************************/
.c-accordion {
  background-color: var(--background-color);
  border-radius: 10px;
}

.c-accordion-trigger {
  position: relative;
  padding: 20px 65px 20px 22px;
}
.c-accordion-trigger::before,
.c-accordion-trigger::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 22px;
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-default-black);
}
.c-accordion-trigger::before {
  rotate: 90deg;
  transition: rotate 0.3s ease;
}
.c-accordion.is-open .c-accordion-trigger::before {
  rotate: 180deg;
}

.c-accordion-container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.c-accordion.is-open .c-accordion-container {
  grid-template-rows: 1fr;
}

.c-accordion-inner {
  overflow: hidden;
}

.c-accordion-contents {
  padding: 0 22px 20px;
}

@media screen and (min-width: 769px) {
  .c-accordion {
    border-radius: 20px;
  }

  .c-accordion-trigger {
    padding: 35px 90px 35px 50px;
  }
  .c-accordion-trigger::before,
  .c-accordion-trigger::after {
    right: 50px;
  }

  .c-accordion-contents {
    padding: 0 50px 40px;
  }
}

/**************************************
 * layout
**************************************/
.mt24 {
  margin-top: 24px;
}
.mt28 {
  margin-top: 28px;
}
.mt35 {
  margin-top: 35px;
}