/* ===================================================================
   base.css
   Scope : l- / c- / u- classes used in index.html
   Strategy : Mobile First（Default = SP）
   Breakpoint : 768px (Laptop)
   =================================================================== */

@import "./tokens.css";

:root {
  interpolate-size: allow-keywords;
}

/* -----------------------------------------------------------
   Base Elements
   ----------------------------------------------------------- */
html {
  scroll-padding-top: var(--component-header-height);
}

body {
  font-family: var(--semantic-typography-body-font-family);
  font-size: var(--semantic-font-size-base);
  font-weight: var(--semantic-typography-body-font-weight);
  line-height: var(--semantic-typography-body-line-height);
  letter-spacing: var(--semantic-typography-body-letter-spacing);
  color: var(--semantic-color-text-body);
  background-color: var(--semantic-color-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  & *,
  & *::before,
  & *::after {
    font-variant-east-asian: proportional-width;
    font-feature-settings: "palt";
  }

  &.is-fixed {
    position: fixed;
  }

}

:where(a) {
  color: var(--component-link-color);
  text-decoration: none;

  &:visited {
    color: var(--component-link-color-visited);
  }

  &:hover {
    color: var(--component-link-color-hover);
  }

  &:focus-visible {
    outline: var(--semantic-border-width-medium) solid var(--semantic-color-border-focus);
    outline-offset: 2px;
    border-radius: var(--semantic-border-radius-xs);
  }

  &[href^="tel:"] {
    color: inherit;
  }
}

:where(details) {
  -webkit-appearance: none;
  appearance: none;

  &::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.3s, content-visibility 0.3s allow-discrete;
  }

  &[open]::details-content {
    height: auto;
  }
}

:where(summary) {
  list-style-type: none;

  &::marker {
   content: "";
  }

  &::-webkit-details-marker {
    display: none;
  }
}

:where(figure) {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  body {
    min-width: var(--semantic-layout-container-width);
    max-width: 1920px;
    margin-inline: auto;
    box-shadow: var(--semantic-shadow-lg);
  }
}


@media (hover: hover) and (pointer: fine) {
  a[href^="tel:"] {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
  }
}


/* -----------------------------------------------------------
   l-container
   ----------------------------------------------------------- */

.l-container {
  width: 100%;
  max-width: var(--semantic-layout-container-width);
  margin-inline: auto;
  padding-inline: var(--semantic-layout-padding-x);
}


/* -----------------------------------------------------------
   l-main
   ----------------------------------------------------------- */

.l-main {
  position: relative;
}

.l-main__header {
  position: relative;
  width: 100%;
  max-width: var(--semantic-layout-container-width);
  margin-inline: auto;
  padding-inline: var(--semantic-layout-padding-x);
}

@media (max-width: 767.98px) {
  .l-main {
    padding-block-start: var(--component-header-height);
  }
}


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

.l-header {
  z-index: 2000;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
}

.l-header__container {
  display: grid;
  grid-template-columns: auto 1fr;
  transform: rotate(-0.03deg);
  & * { transform: rotate(0.03deg);}
}

.l-header__button {
  display: block;
  margin-inline-start: auto;
}

@media (max-width: 767.98px) {
  .l-header {
    z-index: 9000;
  }

  .l-header__container {
    min-height: var(--component-header-height);
    padding-inline: calc(var(--semantic-layout-padding-x) / 2) 0;
    background-color: var(--semantic-color-bg-body);
  }

  .l-header__menu {
    pointer-events: none;

    overflow: hidden;
    position: fixed;
    top: var(--component-header-height);
    left: 0;
    width: 100vw;
    height: 100%;
    min-height: 100dvh;
    background-color: rgba(0,0,0,0);
    transition: background .3s;

    &.is-open {
      background-color: rgba(0,0,0,.5);
    }
  }

  .l-header__nav {
    pointer-events: auto;

    position: relative;
    top: 0;
    left: 100vw;

    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding-block-end: calc(var(--component-header-height) * 2);
    padding-inline: var(--semantic-layout-padding-x);
    background-color: var(--semantic-color-bg-body);
    transition: .3s transform ease;
    transform: translateX(0);

    .is-open & {
      transform: translateX(-100%);
    }

    &::before {
      order: 2;
      content: "サイトメニュー";
      display: block;
      padding-block: .5em;
      font-family: var(--component-footer-nav-title);
      font-size: calc(var(--component-header-nav-font-size) * 1.25);
      font-weight: var(--component-footer-nav-title-weight);
      color: var(--component-footer-nav-title-color);
    }
  }

}
@media (min-width: 768px) {
  .l-header {
    position: sticky;
    min-height: var(--component-header-height);

    &::before {
      content: "";
      opacity: .96;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(0deg, transparent 25%, var(--semantic-color-bg-body) 35%);
    }
  }

  .l-header__container {
    grid-template-rows: calc(var(--component-header-height) / 2) auto;
  }

  .l-header__button {
    display: none;
  }

  .l-header__nav,
  .l-header__menu {
    display: contents;
  }
}


/* -----------------------------------------------------------
   l-header__logo / l-footer__logo（共通）
   ----------------------------------------------------------- */

.l-header__logo,
.l-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--component-logo-gap);
}


/* -----------------------------------------------------------
   l-header__side
   ----------------------------------------------------------- */

.l-header__side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .l-header__side {
    display: contents;
  }
}
@media (min-width: 768px) {
  .l-header__side {
    position: relative;
    z-index: 2001;
    flex-direction: row;
    gap: var(--semantic-spacing-8);
  }
}


/* -----------------------------------------------------------
   l-global-nav /  l-global-subnav
   ----------------------------------------------------------- */

.l-global-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
}

.l-global-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  align-items: stretch;
  width: 100%;
}

.l-global-nav__item {
  position: relative;
  display: flex;
  width: 100%;
}


/**
 * subnav
 */
.l-global-subnav {
  font-family: var(--component-header-nav-font-family);
  font-size: var(--component-header-nav-font-size);
  font-weight: var(--component-header-nav-font-weight);
  color: var(--component-header-nav-color);
}

.l-global-subnav__list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
}


@media (max-width: 767.98px) {
  .l-global-nav,
  .l-global-nav__list {
    display: contents;
  }

  .l-global-nav__list {
    flex-direction: column;
  }

  .l-global-nav__item {
    border-block-start: var(--semantic-border-width-thin) solid var(--component-header-nav-border-color);

    &:nth-of-type(1) { order: 3; }
    &:nth-of-type(2) { order: 4; }
    &:nth-of-type(3) { order: 5; }
    &:nth-of-type(4) { order: 6; }
    &:nth-of-type(5) { order: 7; }
    &:nth-of-type(6) { order: 8; }

    &:nth-of-type(7) { order: 15; padding-block: var(--semantic-spacing-8); }
  }

  /**
   * subnav
   */
  .l-global-subnav,
  .l-global-subnav__list {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .l-global-subnav {
    order: 10;
  }

  .l-global-subnav__item {
    width: 100%;
    border-block-start: var(--semantic-border-width-thin) solid var(--component-header-nav-border-color);

    &:first-of-type {
      display: none;
    }
  }
}
@media (min-width: 768px) {
  .l-global-nav {
    grid-column: span 2;
    flex-direction: row;
    width: calc(100% + (var(--semantic-layout-padding-x) * 2));
    height: var(--component-header-nav-height);
    max-width: var(--semantic-layout-container-width);
    margin-inline: calc(var(--semantic-layout-padding-x) * -1);
    background: linear-gradient(180deg, var(--semantic-color-bg-body) 0%, var(--semantic-color-bg-tertiary) 100%);
    border: var(--semantic-border-width-thin) solid var(--component-header-nav-border-color);
    border-radius: var(--semantic-border-radius-full);
    box-shadow: var(--semantic-shadow-sm);
  }

  .l-global-nav__list {
    flex-direction: row;
  }

  .l-global-nav__item {
    flex-grow: 1;
    width: 100%;

    &:first-of-type {
      display: none;
    }

    /* ナビ修正時には順番に注意 */
    &:nth-of-type(n+3)::before {
      border-inline-start: var(--semantic-border-width-thin) solid var(--component-header-nav-border-color);
    }
  }

  /**
   * subnav
   */
  .l-global-subnav__list {
    flex-direction: row;
  }

  .l-global-subnav__item {
    width: auto;

    & + &::before {
      content: "／";
      color: var(--semantic-color-border-default);
      padding-inline: var(--semantic-spacing-1);
    }

    .page-top &:first-of-type,
    .page-top &:first-of-type + &::before {
      display: none;
    }
  }
}


/* -----------------------------------------------------------
   l-global-lang
   ----------------------------------------------------------- */

.l-global-lang {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  font-size: var(--component-header-nav-font-size);
}

.l-global-lang__container {
  border: var(--semantic-border-width-thin) solid var(--semantic-color-border-default);
  border-radius: var(--semantic-border-radius-sm);
  background-color: var(--semantic-color-bg-body);
  font-size: 1em;
}

.l-global-lang__summary {

  display: flex;
  align-items: center;
  gap: var(--semantic-spacing-2);
  padding: var(--semantic-spacing-1) var(--semantic-spacing-3);
  font-weight: var(--component-header-nav-font-weight);
  color: var(--component-link-color-hover);
  background: transparent;
  cursor: pointer;
}

.l-global-lang__icon {
  display: flex;
  flex-shrink: 0;

  & svg {
    width:  1.75em;
    height: 1.75em;
  }
}

.l-global-lang__dropdown {
  list-style: none;
  margin: 0;
  padding-block: calc(var(--component-select-option-padding-y) / 2);
  padding-inline: calc(var(--component-select-option-padding-x) / 2);
}

.l-global-lang__link {
  display: grid;
  grid-template-columns: 1em 1fr;
  width: fit-content;
  font-weight: var(--component-header-nav-font-weight);
  line-height: 2;
  color: var(--component-header-nav-color);
  text-decoration: none;
  white-space: nowrap;

  &::before {
    content: "・";
    color: var(--semantic-color-brand-primary);
  }
}

@media (max-width: 767.98px) {
  .l-global-lang {
    order: 1;
    z-index: 2001;
    position: relative;
    width: 100%;
    margin-block: 1.5em;
  }


  .l-global-lang__container {
    font-size: 0.875em;
  }
}
@media (min-width: 768px) {
  .l-global-lang {
    position: relative;
    width: 14em;
    height: 2.4em;
  }
}

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

.l-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.l-footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--component-footer-gap);
  padding-block: var(--semantic-spacing-10);
}

.l-footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--component-footer-gap-y);
  transform: rotate(-0.03deg);
  & * { transform: rotate(0.03deg);}
}

.l-footer-nav__items {
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: 1fr fit-content(100%);
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  column-gap: var(--component-footer-gap-x);
  row-gap: var(--component-footer-gap-y);
  width: 100%;
}

.l-footer-nav__item {
  min-width: 0;
  line-height: var(--component-footer-nav-line-height);

  &:first-of-type {
    grid-column: span 2;
  }
}

@media (max-width: 767.98px) {
  .l-footer {
    display: contents;
  }

  .l-footer__container {
    position: relative;
    padding-block-end: var(--semantic-spacing-8);
    background: linear-gradient(180deg, var(--semantic-color-bg-body) 45%, var(--semantic-color-brand-primary) 100%);

    &::after {
      content: "";
      display: block;
      position: absolute;
      top: calc(100% - 1px);
      left: 0;
      width: 100%;
      height: 20%;
      background-color: var(--semantic-color-brand-primary);
    }

    .page-contact &,
    .page-reservation & {
      padding-block-end: 0;

      &::after {
        position: relative;
        top: unset;
        left: unset;
        width: auto;
        height: var(--semantic-spacing-16);
        margin-inline: calc(var(--semantic-layout-padding-x) * -1);
        background: linear-gradient(0deg, var(--semantic-color-bg-body) 0%, transparent 100%);
      }
    }
  }

  .l-footer-nav__items {
    width: calc(100% - 1em);
  }
}
@media (min-width: 768px) {
  .l-footer {
    background: linear-gradient(180deg, var(--semantic-color-bg-body) 45%, var(--semantic-color-brand-primary) 100%);
  }

  .l-footer__container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .l-footer-nav__items {
    grid-template-columns: repeat(3, fit-content(100%));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
  }

  .l-footer-nav__item:first-of-type {
    grid-column: span 3;
  }
}


/* -----------------------------------------------------------
   l-banners
   ----------------------------------------------------------- */

.l-banners {
  margin: 0;
  padding: var(--semantic-spacing-8) 0;
}

.l-banners__container {
  display: flex;
  flex-direction: column;
  gap: var(--semantic-spacing-4);
}

@media (min-width: 768px) {
  .l-banners {
    padding-block: var(--semantic-spacing-16);
    gap: var(--semantic-spacing-8);

    & .c-annotations {
      align-items: flex-end;
    }
  }
}


/* -----------------------------------------------------------
   l-cta
   ----------------------------------------------------------- */

.l-cta {
  width: 100%;
}

.l-cta__container {
  display: flex;
  justify-content: center;
  margin-inline-start: auto;
}

.l-cta__header {
  color: var(--semantic-color-brand-primary);
}


@media (max-width: 767.98px) {
  .l-cta__container {
    display: grid;
    grid-template-columns: auto 1fr;

    & .l-cta__figure {
      width: 24vw;
    }

    & .l-cta__header {
      align-self: flex-end;
    }

    & .l-cta__content {
      display: contents;
    }

    & .l-cta__text {
      grid-column: span 2;
    }

    & .l-cta__button {
      grid-column: span 2;
      justify-content: center;
      margin-block: .75em;

      & br {
        display: none;
      }

      & a {
        max-width: 480px;
      }
    }
  }
}
@media (min-width: 768px) {
  .l-cta__container {
    display: flex;
    justify-content: center;
    column-gap: var(--semantic-spacing-8);

    & .l-cta__button {
      margin-block-start: var(--semantic-spacing-8);
    }
  }
}

/* -----------------------------------------------------------
   l-cv
   ----------------------------------------------------------- */

@media (max-width: 767.98px) {
  .l-cv--fixed {
    z-index: 7000;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding-block: var(--semantic-spacing-8) var(--semantic-spacing-4);
    padding-inline: var(--semantic-layout-padding-x);
    background-image: linear-gradient(0deg, var(--semantic-color-bg-body) 50%, transparent 100%);

    & .c-button--conversion {
      justify-content: center;
      max-width: none;
      width: 100%;
    }

    .page-contact &,
    .page-schedule &,
    .page-reservation & {
      display: none;
    }
  }

  .l-cv--fixed__figure {
    pointer-events: none;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: calc(8 * var(--vw-scale));
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    padding-inline: var(--semantic-layout-padding-x);
    gap: calc(16 * var(--vw-scale));
  }

  .l-cv--fixed__caps {
    width: calc(200 * var(--vw-scale));
    padding-block-end: calc(8 * var(--vw-scale));
    & img {
      width: 100%;
      max-width: unset;
    }
  }

  .l-cv--fixed__image {
    width: calc(96 * var(--vw-scale));
  }

}
@media (min-width: 768px) {
  .l-cv--fixed {
    display: none;
  }
}

/* -----------------------------------------------------------
   c-copyright
   ----------------------------------------------------------- */

.c-copyright {
  z-index: 8000;
  pointer-events: none;
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--semantic-layout-container-width);
  margin-inline: auto;
  padding: var(--semantic-spacing-3) var(--semantic-layout-padding-x);
  font-family: var(--semantic-typography-copyright-font-family);
  font-size: var(--semantic-font-size-2xs);
  font-weight: var(--semantic-typography-copyright-font-weight);
  line-height: var(--semantic-typography-copyright-line-height);
  letter-spacing: var(--semantic-typography-copyright-letter-spacing);
  color: var(--semantic-color-text-darken);
  text-align: right;
}

@media (max-width: 767.98px) {
  .c-copyright {
    padding-block-start: 0;
  }
}


/* -----------------------------------------------------------
   c-logo
   ----------------------------------------------------------- */

.c-logo--site {
  display: flex;
  gap: 2px;
  align-items: center;
  & img {
    width: auto;
  }
  & img:first-of-type {
    height: var(--component-logo-site-mark-height);
  }
  & img:last-of-type {
    height: var(--component-logo-site-type-height);
  }
}

.c-logo--sewerage img {
  width: auto;
  height: var(--component-logo-sewerage-height);
}


/* -----------------------------------------------------------
   c-figure
   ----------------------------------------------------------- */

.c-figure {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.c-figure--frame {
  border: var(--component-photo-border) solid var(--component-photo-border-color);
  border-radius: var(--component-photo-border-radius);
  box-shadow: var(--semantic-shadow-lg);

  & > * {
    object-fit: cover;
    width:  100%;
    height: 100%;
  }
}


/* -----------------------------------------------------------
   c-heading
   ----------------------------------------------------------- */

:where(.c-heading-1, .c-heading-2, .c-heading-3, .c-heading-3b, .c-heading-4, .c-heading-5) {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: var(--semantic-typography-heading-font-family);
  font-feature-settings: 'pwid' on, 'palt' on;
  font-style: normal;
}

.c-heading-1 {
  font-size: var(--semantic-font-size-5xl);
  font-weight: var(--semantic-typography-weight-bold);
  line-height: var(--semantic-typography-line-height-tight);
  letter-spacing: var(--semantic-typography-letter-spacing-wide);
}

.c-heading-2 {
  font-size: var(--semantic-font-size-4xl);
  font-weight: var(--semantic-typography-weight-bold);
  line-height: var(--semantic-typography-line-height-normal);
  letter-spacing: var(--semantic-typography-letter-spacing-normal);
}

.c-heading-3 {
  font-size: var(--semantic-font-size-3xl);
  font-weight: var(--semantic-typography-weight-medium);
  line-height: var(--semantic-typography-line-height-normal);
  letter-spacing: var(--semantic-typography-letter-spacing-normal);
}
.c-heading-3b {
  font-size: var(--semantic-font-size-3xl);
  font-weight: var(--semantic-typography-weight-extrabold);
  line-height: var(--semantic-typography-line-height-normal);
  letter-spacing: var(--semantic-typography-letter-spacing-normal);
}

.c-heading-4 {
  font-size: var(--semantic-font-size-xl);
  font-weight: var(--semantic-typography-weight-medium);
  line-height: var(--semantic-typography-line-height-relaxed);
  letter-spacing: var(--semantic-typography-letter-spacing-normal);
}

.c-heading-5 {
  font-size: var(--semantic-font-size-lg);
  font-weight: var(--semantic-typography-weight-medium);
  line-height: var(--semantic-typography-line-height-relaxed);
  letter-spacing: var(--semantic-typography-letter-spacing-normal);
  color: var(--semantic-color-text-secondary);
  transform: rotate(.03deg);
  & * {
    transform: rotate(-.03deg);
  }
}


/* -----------------------------------------------------------
   c-title
   ----------------------------------------------------------- */

/**
 * section
 */
.c-title__section,
.c-title__section--inverse {
  display: flex;
  flex-direction: column;

  &::after {
    content: attr(data-label);
    display: block;
    font-size: var(--semantic-font-size-xl);
    font-weight: var(--semantic-typography-weight-medium);
    line-height: var(--semantic-typography-body-small-line-height);
    text-transform: uppercase;
  }
}

.c-title__section {
  color: var(--semantic-color-brand-primary);

  &::after {
    color: var(--semantic-color-text-secondary);
  }
}

.c-title__section--inverse {
  color: var(--semantic-color-text-inverse);

  &::after {
    color: var(--semantic-color-brand-tertiary);
  }
}


/**
 * row line
 */
.c-title__row {
  display: flex;
  align-items: center;
  gap: var(--semantic-spacing-4);
  color: var(--semantic-color-brand-primary);

  &::before {
    order: 3;
    content: "";
    display: none;
    flex-grow: 1;
    height: var(--component-divider-width);
    background: var(--semantic-color-brand-primary);
  }

  &::after {
    order: 2;
    content: attr(data-label);
    color: var(--semantic-color-text-secondary);
    font-size: var(--semantic-font-size-xl);
    font-weight: var(--semantic-typography-weight-medium);
    line-height: var(--semantic-typography-line-height-tight);
    letter-spacing: var(--semantic-typography-letter-spacing-normal);
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/**
 * bullet
 */
.c-title__bullet {
  display: flex;
  gap: var(--semantic-spacing-3);
  margin-block-start: 1.5em;
  color: var(--semantic-color-text-secondary);

  &::before {
    content: "";
    display: block;
    width: var(--semantic-spacing-1);
    border-radius: var(--semantic-border-radius-full);
    background-color: var(--semantic-color-brand-primary);
  }
}


@media (max-width: 767.98px) {
  .c-title__section::after,
  .c-title__section--inverse::after {
    font-size: var(--semantic-font-size-base);
  }

  .c-title__row::after {
    font-size: var(--semantic-font-size-base);
    line-height: 1;
  }
}
@media (min-width: 768px) {
  .c-title__row::before {
    display: block;
  }
}


/**
 * circle bullet
 */
.c-title__circle {
  width: 100%;
  padding-block-end: var(--semantic-spacing-2);
  border-block-end: 1px solid var(--semantic-color-brand-primary);

  & > * {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--semantic-spacing-2);
    margin-block-start: 1em;
    width: 100%;

    &::before {
      content: "";
      display: grid;
      place-content: center;
      width:  1.444em;
      height: 1.444em;
      margin-block-start: .288em;
      font-size: 0.6923em;
      line-height: 1;
      border-radius: 50%;
      background-color: var(--semantic-color-brand-primary);
      color: var(--semantic-color-text-inverse);
    }

    &:not([data-icon])::before {
      content: counter(sectionNum)"";
    }

    &[data-icon]:before {
      content: attr(data-icon)"";
    }
  }

}


/**
 * icons
 */
.c-title__icons {
  display: flex;
  align-items: center;
  gap: var(--semantic-spacing-4);
}

.c-title__icon {
  flex-shrink: 0;
  width: 6em;

  & + * {
    flex-grow: 1;
  }
}

@media (min-width: 768px) {
  .c-title__icons {
    gap: var(--semantic-spacing-8);
  }

  .c-title__icon {
    width: 12em;
  }
}

/**
 * footer
 */
.c-footer-nav__title {
  margin: 0;
  font-family: var(--component-footer-nav-title);
  font-size: var(--component-footer-nav-title-size);
  font-weight: var(--component-footer-nav-title-weight);
  color: var(--component-footer-nav-title-color);
}

/**
 * page title
 */
.c-page-title {
  display: flow-root;
  margin: 0;
}

.c-page-title__icon {
  float: right;
  display: block;
  margin: 0 calc(var(--semantic-layout-padding-x) * -1) 0 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  text-align: center;

  & img {
    object-fit: contain;
    object-position: center;
    width:  100%;
    height: 100%;
  }
}

.c-page-title__heading {
  display: flex;
  flex-direction: column;

  font-family: var(--component-page-title-font-family);
  font-size: var(--component-page-title-font-size);
  font-weight: var(--component-page-title-font-weight);
  line-height: var(--component-page-title-line-height);
  letter-spacing: var(--component-page-title-letter-spacing);
  color: var(--component-page-title-color);

  &::after {
    content: attr(data-label);
    color: var(--semantic-color-text-secondary);
    font-size: var(--component-page-title-en-font-size);
    font-weight: var(--component-page-title-en-font-weight);
    line-height: var(--component-page-title-en-line-height);
    letter-spacing: 0;
  }
}

.c-page-title__icon img:where(.page-schedule *) {
  object-position: center bottom;
}

@media (max-width: 767.98px) {
  .c-page-title__icon {
    width: 27vw;

    .page-aboutus & {
      margin-inline-end: 1.5vw;
    }

    .page-curriculum & {
      width: 32.38vw;
      margin-inline-end: .5vw;
      aspect-ratio: unset;
    }

    .page-schedule & {
      width: 32.38vw;
      transform: translate(-3.5vw, 3vw) scale(1.125);
      transform-origin: right bottom;
    }

    .page-faq & {
      width: 32vw;
      transform: translateY(-1.5vw);
    }

    .page-contact:not(.page-form--completion) & {
      width: 36vw;
      margin-block-start: -3vw;
      transform: translate(-1.5vw, 3vw);
    }

    .page-reservation:not(.page-form--completion) & {
      width: 35vw;
      margin-block-end: -4.5vw;
      margin-inline-start: -6vw;
      margin-inline-end: -1vw;
      aspect-ratio: unset;
      transform: translate(3vw, -3.5vw);
    }

    .page-form--completion & {
      margin-inline-end: 1.5vw;
      aspect-ratio: unet;
    }
    .page-information & {
      width: 30vw;
      margin-block-start: -3vw;
      margin-inline-end: 5vw;
      transform: translateY(3vw);
      aspect-ratio: unset;
    }

    .page-termsofuse & {
      width: 35vw;
      aspect-ratio: unset;
    }
  }

  .c-page-title__heading {
    padding-block-start: var(--semantic-spacing-4);

    &::after {
      padding-block-start: .5em;
      white-space: nowrap;
    }
  }
}
@media (min-width: 768px) {
  .c-page-title__icon {
    width:  256px;

    .page-curriculum & {
      width: 307px;
      height: 256px;
      aspect-ratio: unset;
    }

    .page-faq & {
      width: 285px;
      height: 256px;
      aspect-ratio: unset;
    }

    .page-schedule & {
      transform: scale(1.5);
      transform-origin: right center;
    }

    .page-contact:not(.page-form--completion) & {
      position: absolute;
      top: 0;
      right: 16px;
      width: 282px;
      height: auto;
      aspect-ratio: unset;
    }

    .page-reservation:not(.page-form--completion) & {
      width: 412px;
      height: auto;
      margin-block-start: -108px;
      aspect-ratio: 256 / 226;
    }

    .page-information & {
      width: 293px;
      height: 256px;
      aspect-ratio: unset;
    }

    .page-termsofuse & {
      width: 312px;
      height: 306px;
      margin-block-start: -50px;
      aspect-ratio: unset;
    }
  }

  .c-page-title__heading {
    padding-block-start: var(--semantic-spacing-12);
    white-space: nowrap;
  }
}


/* -----------------------------------------------------------
   c-paragraph
   ----------------------------------------------------------- */

.c-paragraph {
  margin-block-start: 1em;

  & * {
    letter-spacing: var(--semantic-typography-letter-spacing-wider);
    line-height: var(--semantic-typography-line-height-loose);
  }
}


/* -----------------------------------------------------------
   c-button / c-button--secondary
   ----------------------------------------------------------- */

.c-button,
.c-button--small,
.c-button--large {
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  white-space: nowrap;
  cursor: pointer;

  & .c-button__icon {
    flex-shrink: 0;
    position: relative;
    display: block;
    width:  1em;
    aspect-ratio: 1 / 1;
    & svg {
      position: absolute;
      inset: -27.778%;
      width:  155.556%;
      height: 155.556%;
    }
  }
}

/**
 * button size
 */

.c-button {
  max-width: var(--component-button-default-max-width);
  padding: var(--component-button-default-padding-y) var(--component-button-default-padding-x);
  font-size: var(--component-button-default-font-size);
  font-weight: var(--component-button-font-weight);
  line-height: var(--component-button-default-line-height);
}

.c-button--large {
  max-width: var(--component-button-lg-max-width);
  padding-block: var(--component-button-lg-padding-y);
  padding-inline: var(--component-button-lg-padding-x);
  font-size: var(--component-button-lg-font-size);
  line-height: var(--component-button-lg-line-height);
  gap: var(--component-button-lg-gap);
}

.c-button--small {
  max-width: var(--component-button-sm-max-width);
  padding-block: var(--component-button-sm-padding-y);
  padding-inline: var(--component-button-default-padding-x);
  border-width: var(--component-button-sm-border-width);
  font-size: var(--component-button-sm-font-size);
  line-height: var(--component-button-sm-line-height);
  gap: var(--component-button-sm-gap);
}

/**
 * button type
 */

.c-button--primary {
  border-radius: var(--component-button-border-radius);
  border: var(--component-button-border-width) solid var(--component-button-primary-border);
  background-color: var(--component-button-primary-bg);
  background-image: linear-gradient(0deg, var(--component-button-primary-bg-active) 0%, var(--component-button-primary-bg) 100%);
  color: var(--component-button-primary-text);
  box-shadow: var(--semantic-shadow-sm);
}

.c-button--secondary,
.c-button--secondary-inverse {
  border-radius: var(--component-button-border-radius);
  border-width: var(--component-button-border-width);
  border-style: solid;
}

.c-button--secondary {
  background-color: var(--component-button-secondary-bg);
  border-color: var(--component-button-secondary-border);
  color: var(--component-button-secondary-text);

}

.c-button--secondary-inverse {
  background-color: var(--component-button-secondary-bg);
  border-color: var(--component-button-secondary-inverse-border);
  color: var( --component-button-secondary-inverse-text);
}

.c-button--tertiary {
  width: auto;
  min-width: unset;
  background-color: var(--component-button-tertiary-bg);
  border-color: var(--component-button-tertiary-border);
  color: var(--component-button-tertiary-text);
  font-weight: var(--semantic-typography-weight-medium);
  gap: 1.5em;

  & .c-button__icon:not(:empty) {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: -.5em;
      border-radius: 50%;
      border: 1px solid currentColor;
    }
  }
}

.c-button--conversion {
  border-radius: var(--component-button-border-radius);
  background-image: linear-gradient(0deg, var(--component-button-conversion-bg-hover) 0%, var(--component-button-conversion-bg-active) 100%);
  border-color: var(--component-button-conversion-border);
  color: var(--component-button-conversion-text);
  box-shadow: var(--semantic-shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
  .c-button--primary,
  .c-button--secondary,
  .c-button--secondary-inverse,
  .c-button--tertiary,
  .c-button--conversion {
    transition: background .3s, border-color .3s, color .3s;
  }

  .c-button--primary:hover {
    border-color: var(--component-button-primary-border-hover);
    background-color: var(--component-button-primary-bg-hover);
    background-image: linear-gradient(180deg, var(--component-button-primary-bg-active) 0%, var(--component-button-primary-bg-hover) 100%);
    color: var(--component-button-primary-text-hover);
    transform: translateY(1px);
    box-shadow: none;
  }

  .c-button--secondary-inverse:hover {
    background-color: var(--component-button-secondary-bg-hover);
    border-color: var(--component-button-secondary-border-hover);
    color: var(--component-button-secondary-text-hover);
  }

  .c-button--tertiary:hover {
    background-color: var(--component-button-tertiary-bg-hover);
    border-color: var(--component-button-tertiary-border-hover);
    color: var(--component-button-tertiary-text-hover);
  }

  .c-button--conversion:hover {
    background-image: linear-gradient(180deg, var(--component-button-conversion-bg-hover) 0%, var(--component-button-conversion-bg-active) 100%);
    border-color: var(--component-button-conversion-border-hover);
    color: var(--component-button-conversion-text-hover);
    transform: translateY(1px);
    box-shadow: none;
  }
}


/**
 * button wrapper
 */

.c-btn__wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--semantic-spacing-4);
  margin-block-start: 1.5em;
}


/**
 * drawer button (SP only)
 */
@media (max-width: 767.98px) {
  .c-button__drawer {
    display: block;
    position: relative;
    width:  var(--component-header-height);
    height: var(--component-header-height);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transform: rotate(360deg);
    transition: transform .3s ease;
    transform-origin: center center;

    &.is-active {
      transform: rotate(0);
    }

    & .c-button__drawer-bar {
      display: block;
      position: absolute;
      inset: 0;
      width: 50%;
      height: max(2px, calc(2 * var(--vw-scale)));
      margin: auto;
      background-color: var(--semantic-color-text-body);
      transition: transform .3s ease;
      transform-origin: center center;
    }
  }

  .c-button__drawer-bar:nth-of-type(1) {
    transform: translateY(-500%);
    .is-active & {
      transform: translateY(0) rotate(45deg);
    }
  }
  .c-button__drawer-bar:nth-of-type(2) {
    transform: scaleX(1);
    .is-active & {
      transform: scaleX(0);
    }
  }
  .c-button__drawer-bar:nth-of-type(3) {
    transform: translateY(500%);
    .is-active & {
      transform: translateY(0) rotate(-45deg);
    }
  }
}

/* -----------------------------------------------------------
   c-pager
   ----------------------------------------------------------- */

.c-pager {
  display: grid;
  grid-template-columns: 128px 1fr 128px;
  width: 100%;
  margin-block-start: var(--semantic-spacing-8);
}

.c-pager--prev {
  grid-column: 1;
  min-width: unset;
}

.c-pager--next {
  grid-column: 3;
  min-width: unset;
}

@media (min-width: 768px) {
  .c-pager {
    margin-block-start: var(--semantic-spacing-12);
  }
}

/* -----------------------------------------------------------
   c-icon
   ----------------------------------------------------------- */

.c-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--semantic-spacing-6);
  height: var(--semantic-spacing-6);
  color: var(--semantic-color-brand-primary);

  &::after {
    content: "";
    display: block;
    width: var(--semantic-spacing-2);
    height: var(--semantic-spacing-2);
    border-top: var(--semantic-border-width-medium) solid currentColor;
    border-right: var(--semantic-border-width-medium) solid currentColor;
    transform: rotate(45deg);
  }
}

/* -----------------------------------------------------------
   c-card
   ----------------------------------------------------------- */

.c-card--withImage,
.c-card--facility {
  display: flex;
  height: 100%;
  border-radius: var(--component-card-border-radius);
  box-shadow: var(--semantic-shadow-lg);
}

.c-card__inner {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  background-color: var(--component-card-bg);
  border: var(--component-card-border-width) solid var(--component-card-border);
  border-radius: var(--component-card-border-radius);
  text-decoration: none;
}

.c-card__image {
  overflow: hidden;
  margin: 0;
  line-height: 1;
  vertical-align: bottom;
}

.c-card__content {
  padding: var(--component-card-padding);
}

.c-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--component-card-gap);
}

.c-card__title {
  margin: 0;
  font-size: var(--component-card-header-font-size);
  font-weight: var(--component-card-header-font-weight);
  line-height: var(--component-card-header-line-height);
  color: var(--component-card-header-color);
}


@media (max-width: 575.98px) {
  .c-card__inner:where(.c-card--withImage *) {
    flex-direction: row;
    align-items: center;
  }

  .c-card__image:where(.c-card--withImage *) {
    flex-shrink: 0;
    width: min(368px, 45%);
  }

  .c-card__buttons:where(.c-card--facility *) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    & > * {
      min-width: unset;
      min-height: 3.5em;
    }
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .c-card__title:where(.c-card--withImage *) {
    font-size: calc(var(--component-card-header-font-size) * .875);
  }
}
@media (min-width: 768px) {
  .c-card--facility {
    position: relative;

    & .c-card__inner {
      width: 100%;
      flex-direction: row;
    }

    & .c-card__image {
      flex-shrink: 0;
      width: 23em;
    }

    & .c-card__content {
      flex-grow: 1;

      display: grid;
      grid-template-columns: 1fr 12em;
      grid-template-rows: auto 1fr;
      align-items: flex-start;
    }

    & .c-card__header {
      grid-column: span 2;
      flex-direction: row;
      align-items: baseline;
    }

    & .c-card__title {
      font-size: 1.5em;
    }

    & .c-card__buttons {
      flex-direction: column;
      justify-content: center;
      height: 100%;
      margin-block-start: 0;
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .c-card--withImage:has(a.c-card__inner) {
    transition: box-shadow .3s, transform .3s;

    &:hover {
      box-shadow: none;
      transform: translateY(1px);
    }
  }
}

/**
 * card - data
 */
.c-data__items {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin-block-start: 1em;
  font-size: var(--semantic-font-size-sm);
}

.c-data__link {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.c-data__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .25em;
  color: var(--semantic-color-text-body);

  &::before {
    content: "";
    width:  1.25em;
    height: 1.25em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  [data-type="access"] &::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%20%3Cpath%20fill%3D%22%232B8FBF%22%20d%3D%22M13.9441%206.90346C16.4329%206.90346%2018.466%208.84922%2018.466%2011.231C18.4659%2013.6128%2016.4328%2015.5586%2013.9441%2015.5586C11.4556%2015.5585%209.42414%2013.6127%209.42404%2011.231C9.42404%208.8493%2011.4555%206.90359%2013.9441%206.90346ZM13.9441%208.63449C12.4543%208.63461%2011.231%209.80518%2011.231%2011.231C11.2311%2012.6568%2012.4544%2013.8274%2013.9441%2013.8276C15.434%2013.8276%2016.6571%2012.6569%2016.6572%2011.231C16.6572%209.80511%2015.4341%208.63449%2013.9441%208.63449Z%22%20%2F%3E%20%3Cpath%20fill%3D%22%232B8FBF%22%20d%3D%22M14.0054%202C21.663%202.00048%2026.2041%2010.2871%2021.7336%2016.2902L14.4689%2026H13.4771L6.27537%2016.2902C1.80841%2010.2915%206.28124%202%2014.0054%202ZM14.0054%203.73103C7.84205%203.73103%204.25116%2010.2311%207.58382%2015.058L7.75%2015.2874L13.9774%2023.6847L20.2625%2015.284C23.8666%2010.4414%2020.2109%203.73151%2014.0054%203.73103Z%22%20%2F%3E%3C%2Fsvg%3E');
  }

  [data-type="phonenumber"] &::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%20%3Cpath%20fill%3D%22%232B8FBF%22%20d%3D%22M25%2020.375C25%2020.9375%2024.75%2022.0313%2024.5156%2022.5469C24.1875%2023.3125%2023.3125%2023.8125%2022.6094%2024.2031C21.6875%2024.7031%2020.75%2025%2019.7031%2025C18.25%2025%2016.9375%2024.4063%2015.6094%2023.9219C14.6563%2023.5781%2013.7344%2023.1563%2012.875%2022.625C10.2188%2020.9844%207.01562%2017.7813%205.375%2015.125C4.84375%2014.2656%204.42188%2013.3438%204.07812%2012.3906C3.59375%2011.0625%203%209.75%203%208.29688C3%207.25%203.29688%206.3125%203.79688%205.39063C4.1875%204.6875%204.6875%203.8125%205.45312%203.48438C5.96875%203.25%207.0625%203%207.625%203C7.73438%203%207.84375%203%207.95313%203.04688C8.28125%203.15625%208.625%203.92188%208.78125%204.23438C9.28125%205.125%209.76563%206.03125%2010.2813%206.90625C10.5313%207.3125%2011%207.8125%2011%208.29688C11%209.25%208.17188%2010.6406%208.17188%2011.4844C8.17188%2011.9062%208.5625%2012.4531%208.78125%2012.8281C10.3594%2015.6719%2012.3281%2017.6406%2015.1719%2019.2188C15.5469%2019.4375%2016.0938%2019.8281%2016.5156%2019.8281C17.3594%2019.8281%2018.75%2017%2019.7031%2017C20.1875%2017%2020.6875%2017.4688%2021.0938%2017.7188C21.9688%2018.2344%2022.875%2018.7188%2023.7656%2019.2188C24.0781%2019.375%2024.8438%2019.7188%2024.9531%2020.0469C25%2020.1563%2025%2020.2656%2025%2020.375Z%22%20%2F%3E%3C%2Fsvg%3E');
  }
}

.c-data__desc {
  color: var(--semantic-color-text-body);
}

@media (min-width: 768px) {
  .c-data__items {
    font-size: var(--semantic-font-size-base);
  }
}

@media (hover: hover) and (pointer: fine) {

  .c-data__link:hover .c-data__desc {
    color: var(--component-link-color-hover);
    text-decoration: underline;
  }
}

/* -----------------------------------------------------------
   c-banner
   ----------------------------------------------------------- */

.c-banners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--component-banner-gap);
  width: 100%;
  height: auto;
}

.c-banner {
  display: block;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  padding: var(--component-banner-padding);
  border: var(--component-banner-border);
  aspect-ratio: 275 / 80;
  text-align: center;
  & img {
    object-fit: contain;
    object-position: center center;
    margin: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
  }
}

@media (max-width: 767.98px) {
  .c-banners {
    margin-block-start: var(--semantic-spacing-2);
  }
}
@media (min-width: 768px) {
  .c-banners {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (hover: hover) and (pointer: fine) {
  .c-banner {
    transition: opacity .3s;

    &:hover {
      opacity: 0.8;
    }
  }
}

/* -----------------------------------------------------------
   c-annotations / c-annotation
   ----------------------------------------------------------- */

.c-annotations {
  display: flex;
  flex-direction: column;
  gap: var(--semantic-spacing-2);
}

.c-annotation {
  display: flex;
  gap: .5em;
  font-size: var(--semantic-font-size-sm);
  line-height: var(--semantic-typography-body-small-line-height);
  color: var(--semantic-color-text-notes);

  &::before {
    content: "※";
    flex-shrink: 0;
  }
}

.c-annotation__text {
  flex-grow: 1;
}


/* -----------------------------------------------------------
   c-nav / c-link
   ----------------------------------------------------------- */

.c-link {
  text-decoration: underline;
}

/**
 * global
 */
.c-global-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--component-nav-item-padding-y) var(--component-nav-item-padding-x);
  font-family: var(--component-nav-item-font-family);
  font-size: var(--component-nav-item-font-size);
  font-weight: var(--component-nav-item-font-weight);
  color: var(--component-nav-item-color);
  text-align: center;
  line-height: var(--semantic-typography-line-height-normal);
  letter-spacing: var(--semantic-typography-letter-spacing-wide);
}

.c-global-nav__text {
  display: block;
  text-align: left;
}

.c-global-nav__button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  padding-inline: var(--component-header-nav-padding-x);
  background: linear-gradient(0deg, var(--component-button-primary-bg-active) 0%, var(--component-button-primary-bg) 100%);
  font-family: var(--component-header-nav-font-family);
  font-size: var(--component-header-nav-font-size);
  font-weight: var(--component-header-nav-font-weight);
  color: var(--component-button-text-inverse);
  letter-spacing: var(--semantic-typography-letter-spacing-wide);
  text-align: center;
  line-height: var(--semantic-typography-line-height-normal);
}

.c-global-subnav__link {
  font-weight: 500;

  &:link,
  &:visited {
    color: var(--component-link-color-hover);
  }
}


@media (max-width: 767.98px) {
  .c-global-nav__link,
  .c-global-subnav__link {
    display: flex;
    justify-content: flex-start;
    padding: calc(var(--component-nav-item-padding-y) * 1.5) var(--component-nav-item-padding-x);
    font-size: var(--component-header-nav-font-size);
    font-weight: var(--component-header-nav-font-weight);
    color: var(--component-nav-item-color) !important;

    &::after {
      content: "";
      flex-shrink: 0;
      display: block;
      width: 1.5em;
      height: 1.5em;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewbox%3D%220%200%2028%2028%22%20width%3D%2228%22%20height%3D%2228%22%3E%20%3Cpath%20fill%3D%220f3a4d%22%20d%3D%22M19.5469%2014C19.5469%2014.125%2019.4844%2014.2656%2019.3906%2014.3594L12.1094%2021.6406C12.0156%2021.7344%2011.875%2021.7969%2011.75%2021.7969C11.625%2021.7969%2011.4844%2021.7344%2011.3906%2021.6406L10.6094%2020.8594C10.5156%2020.7656%2010.4531%2020.6406%2010.4531%2020.5C10.4531%2020.375%2010.5156%2020.2344%2010.6094%2020.1406L16.75%2014L10.6094%207.85938C10.5156%207.76563%2010.4531%207.625%2010.4531%207.5C10.4531%207.375%2010.5156%207.23438%2010.6094%207.14063L11.3906%206.35938C11.4844%206.26563%2011.625%206.20312%2011.75%206.20312C11.875%206.20312%2012.0156%206.26563%2012.1094%206.35938L19.3906%2013.6406C19.4844%2013.7344%2019.5469%2013.875%2019.5469%2014Z%22%20%2F%3E%3C%2Fsvg%3E');
    }

    & br {
      display: none;
    }
  }

  .c-global-nav__button {
    min-height: 4em;
    border-radius: var(--semantic-border-radius-full);
  }

  .c-global-nav__text,
  .c-global-subnav__text {
    display: block;
    width: 100%;
  }

  .c-global-nav__buttontext {
    font-size: 1.25em;
  }
}

@media (hover: hover) and (pointer: fine) {
  .c-link:hover {
    text-decoration: none;
  }

  .c-global-nav__link {
    transition: background-color .3s, color .3s;

    &:hover {
      color: var(--component-nav-item-color-hover);
      background-color: var(--component-nav-item-bg-hover);
    }
  }

  .c-global-nav__button:hover {
    background: linear-gradient(0deg, var(--component-button-primary-bg-hover), var(--component-button-primary-bg-active));
  }

  .c-global-subnav__link {
    position: relative;
    transition: color .3s;

    &:hover {
      background-size: 100% 1px;
      color: var(--component-link-color);
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .3s;
    }

    &:hover::after {
      transform: scaleX(1);
    }
  }
}

/**
 * footer
 */
.c-footer-nav__link {
  display: grid;
  grid-template-columns: 1em 1fr;
  width: fit-content;
  font-size: var(--component-footer-nav-font-size);
  font-weight: var(--component-footer-nav-font-weight);
  letter-spacing: var(--semantic-typography-letter-spacing-wide);
  color: var(--component-footer-nav-color);

  &::before {
    content: "・";
    color: var(--semantic-color-brand-primary);
  }
}

@media (hover: hover) and (pointer: fine) {
  .c-footer-nav__link:hover {
    color: var(--component-nav-item-color-hover);
  }
}

/* -----------------------------------------------------------
   c-breadcrumb
   ----------------------------------------------------------- */

.c-breadcrumb {
  display: none;
}

@media (min-width: 768px) {
  .c-breadcrumb {
    position: absolute;
    top: 0;
    left: var(--semantic-layout-padding-x);

    display: block;
    font-size: var(--semantic-font-size-sm);
    line-height: var(--semantic-typography-body-small-line-height);
    & * {
      color: var(--component-nav-item-color);
    }

    & a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .c-breadcrumb__list {
    display: flex;
    gap: .5em;
  }

  .c-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: .5em;

    &:not(:first-of-type)::before {
      content: "";
      flex-shrink: 0;
      display: block;
      width: 1em;
      height: 1em;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewbox%3D%220%200%2028%2028%22%20width%3D%2228%22%20height%3D%2228%22%3E%20%3Cpath%20fill%3D%220f3a4d%22%20d%3D%22M19.5469%2014C19.5469%2014.125%2019.4844%2014.2656%2019.3906%2014.3594L12.1094%2021.6406C12.0156%2021.7344%2011.875%2021.7969%2011.75%2021.7969C11.625%2021.7969%2011.4844%2021.7344%2011.3906%2021.6406L10.6094%2020.8594C10.5156%2020.7656%2010.4531%2020.6406%2010.4531%2020.5C10.4531%2020.375%2010.5156%2020.2344%2010.6094%2020.1406L16.75%2014L10.6094%207.85938C10.5156%207.76563%2010.4531%207.625%2010.4531%207.5C10.4531%207.375%2010.5156%207.23438%2010.6094%207.14063L11.3906%206.35938C11.4844%206.26563%2011.625%206.20312%2011.75%206.20312C11.875%206.20312%2012.0156%206.26563%2012.1094%206.35938L19.3906%2013.6406C19.4844%2013.7344%2019.5469%2013.875%2019.5469%2014Z%22%20%2F%3E%3C%2Fsvg%3E');
    }
  }
}

/* -----------------------------------------------------------
   c-form
   ----------------------------------------------------------- */

:where(fieldset) {
  margin: 0;
  padding: 0;
  border: 0 none;
}

.c-form {
  width: 100%;
}

.c-form__title {
  padding: var(--semantic-spacing-4) var(--semantic-spacing-4) var(--semantic-spacing-2);

  & .c-title__row::before {
    display: block;
  }
}

.c-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--semantic-spacing-4);
  padding-block: var(--semantic-spacing-2) var(--semantic-spacing-4);
  border-block-end: 1px dashed var(--semantic-color-border-default);

  /* error（フィールド単位） */
  &.is-error {

    & .c-form__label-text {
      color: var(--semantic-color-status-error);
    }

    & .c-form__error-message {
      display: block;
    }
  }
}

.c-form__error-message {
  display: none;
  color: var(--semantic-color-status-error);
  font-size: var(--semantic-font-size-sm);
}

.c-form__note {
  display: block;
  margin-block: .5em;
  font-size: var(--semantic-font-size-sm);
  font-weight: var(--semantic-typography-weight-medium);
  line-height: 2.5;
  color: var(--semantic-color-text-darken);
}

.c-form__notice {
  margin-block-end:  .5em;
  padding-block-end: .75em;
  border-block-end: 3px double var(--semantic-color-border-default);

  & > * + * {
    margin-block-start: .5em;
  }
}

.c-form__label {
  display: flex;
  align-items: flex-start;
  gap: 1em;
}

.c-form__label-text {
  display: block;
  padding-block: .5em;
  font-weight: var(--semantic-typography-weight-medium);
  line-height: 1.5;
  color: var(--semantic-color-text-darken);
}

.c-form__label-text__sub {
  display: block;
  margin-block-start: 0.25em;
  font-size: var(--semantic-font-size-sm);
}

.c-badge--required,
.c-badge--optional,
.c-badge--notice,
.c-badge--success,
.c-badge--warning {
  display: block;
  width: fit-content;
  padding-inline: 1em;
  border-radius: var(--component-badge-border-radius);
  line-height: var(--component-badge-line-height);
  font-weight: var(--component-badge-font-weight);
  white-space: nowrap;
}

.c-badge--required {
  background-color: var(--component-badge-alert-bg);
  color: var(--component-badge-alert-text);
}

.c-badge--optional {
  background-color: var(--component-badge-optional-bg);
  color: var(--component-badge-optional-text);
}

.c-badge--notice {
  background-color: var(--component-alert-info-text);
  color: var(--semantic-color-text-inverse);
}

.c-badge--success {
  background-color: var(--component-alert-success-text);
  color: var(--semantic-color-text-inverse);
}

.c-badge--warning {
  background-color: var(--component-alert-warning-text);
  color: var(--semantic-color-text-inverse);
}

.c-form__agreement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-block-start: var(--semantic-spacing-6);

  & .c-helper-group {
    margin-block-start: 0;
  }
}

.c-form__submit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block-start: var(--semantic-spacing-6);
}

@media (max-width: 767.98px) {
  * + .c-form__title {
    margin-block-start: var(--semantic-spacing-4);
  }

  .c-form__field {
    padding-inline: var(--semantic-layout-padding-x);
  }

  .c-form__notice {
    margin-block-end: 1.5em;
  }

  .c-badge--required,
  .c-badge--optional,
  .c-badge--notice,
  .c-badge--success,
  .c-badge--warning {
    margin-block-start: .75em;
    font-size: .875em;
  }

  .c-form__submit {
    padding-block-end: var(--semantic-spacing-4);
    gap: 1em;
  }
}
@media (min-width: 768px) {
  .c-form__title {
    padding-block: var(--semantic-spacing-12) var(--semantic-spacing-6);
    padding-inline: var(--semantic-spacing-8);
  }

  .c-form__field {
    display: grid;
    grid-template-columns: 20em 1fr;
    align-items: flex-start;
    gap: var(--semantic-spacing-8);
    padding-block:  var(--semantic-spacing-6);
    padding-inline: var(--semantic-spacing-8);
  }

  .c-form__label {
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .c-badge--required,
  .c-badge--optional,
  .c-badge--notice,
  .c-badge--success,
  .c-badge--warning {
    margin-block-start: .8125em;
  }

  .c-form__label-text {
    padding-block: .8125em;
    line-height: 1.5;
  }

  .c-form__printed {
    padding-block: .666em;
  }

  .c-form__submit {
    flex-direction: row-reverse;
    padding-inline: var(--semantic-spacing-8);

    .page-form--input &,
    .page-form--completion & {
      justify-content: center;
      align-items: center;
    }

    .page-form--confirm & {
      justify-content: space-between;
      align-items: center;
    }
  }
}

/* -----------------------------------------------------------
   c-input / c-textarea / c-radio / c-checkbox / c-select
   ----------------------------------------------------------- */

.c-input,
.c-textarea,
.c-select {
  padding-inline: .75em;
  border-radius: var(--component-input-border-radius);
  border: var(--component-input-border-width) solid var(--component-input-border);
  background: var(--component-input-bg);
  line-height: 2.5;

  /* focus */
  &:focus-visible {
    outline: 2px solid var(--component-input-border-focus);
    outline-offset: 2px;
    border-color: var(--component-input-border-focus);
    color: var(--component-input-text);
  }

  /* error */
  &.is-error {
    border-color: var(--component-input-border-error);
    background: var(--semantic-color-status-error-bg);
  }

  /* disabled */
  &:disabled {
    background: var(--semantic-color-bg-disabled);
    border-color: var(--semantic-color-border-disabled);
    color: var(--semantic-color-text-disabled);
    cursor: not-allowed;
  }
}

.c-input:not([size]) {
  width: 100%;
}

.c-input--count {
  width: auto;
  min-width: 4em;
}

.c-textarea {
  width: 100%;
}

.c-select {
  width: 100%;
  padding: var(--semantic-spacing-1) var(--semantic-spacing-3);
  font-weight: var(--component-header-nav-font-weight);
  color: var(--component-link-color-hover);
  background: transparent;
  cursor: pointer;
}

.c-select__label {
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: .5em;
    width:  1.5em;
    height: 1.5em;
    margin: auto;
    background-size: contain;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22icon_arrow_down%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%20%3Cpath%20fill%3D%22%231f6b8f%22%20d%3D%22M21.7969%2010.75C21.7969%2010.875%2021.7344%2011.0156%2021.6406%2011.1094L14.3594%2018.3906C14.2656%2018.4844%2014.125%2018.5469%2014%2018.5469C13.875%2018.5469%2013.7344%2018.4844%2013.6406%2018.3906L6.35937%2011.1094C6.26562%2011.0156%206.20312%2010.875%206.20312%2010.75C6.20312%2010.625%206.26562%2010.4844%206.35937%2010.3906L7.14063%209.60937C7.23437%209.51562%207.35938%209.45312%207.5%209.45312C7.625%209.45312%207.76563%209.51562%207.85938%209.60937L14%2015.75L20.1406%209.60937C20.2344%209.51562%2020.375%209.45312%2020.5%209.45312C20.625%209.45312%2020.7656%209.51562%2020.8594%209.60937L21.6406%2010.3906C21.7344%2010.4844%2021.7969%2010.625%2021.7969%2010.75Z%22%20%2F%3E%20%3C%2Fsvg%3E');
    pointer-events: none;
  }
}

.c-radio,
.c-checkbox {
  display: flex;
  width: fit-content;
  align-items: baseline;
  gap: .5em;
  line-height: 2;
  cursor: pointer;

  /* focus */
  &:has(:focus-visible) {
    outline: 2px solid var(--component-input-border-focus);
    outline-offset: 4px;
    border-radius: var(--semantic-border-radius-xs);
  }

  /* disabled */
  &:has(:disabled) {
    color: var(--semantic-color-text-disabled);
    cursor: not-allowed;

    & input {
      cursor: not-allowed;
    }
  }
}

.c-radio-group {
  display: flex;
  flex-direction: column;
}

.c-helper {
  display: flex;
  gap: .5em;
  font-size: var(--semantic-font-size-sm);
  color: var(--semantic-color-text-body);

  &::before {
    content: "※";
    color: var(--semantic-color-status-error);
  }
}

.c-helper-group {
  margin-block-start: 1em;
  font-size: var(--semantic-font-size-xs);
}

@media (max-width: 767.98px) {
  .c-radio-group {
    gap: 1em;
    padding-inline-start: .5em;
  }
}
@media (min-width: 768px) {
  .c-radio,
  .c-checkbox {
    line-height: 3;
  }
}


/* applications */
.c-applications-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  margin-block: 1.5em;
}

.c-application {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: var(--component-button-sm-padding-y);
  padding-inline-end: 0;
  border-radius: var(--component-button-border-radius);
  border-width: var(--component-button-border-width);
  border-style: solid;
  border-color: currentColor;
  font-weight: var(--semantic-typography-weight-bold);
  line-height: var(--semantic-typography-line-height-tight);
  gap: var(--component-button-lg-gap);
  color: var(--semantic-color-text-secondary);
  cursor: pointer;

  & input {
    display: none;
  }

  &:has(input:checked) {
    padding-inline-end: var(--component-button-default-padding-x);
    background-color: var(--semantic-color-status-success-bg);
    color: var(--semantic-color-status-success);

    & .c-application__icon {
      opacity: 1;
      width: auto;
      transform: scale(1);
      transition: .3s;
    }
  }
}

.c-application__label {
  display: block;
  padding-block: .5em;
  font-size: 1.125em;
}

.c-application__icon {
  opacity: 0;
  width: 0;
  transform: scale(0);

  font-size: 2em;
  line-height: 1;
  vertical-align: bottom;

  & svg {
    vertical-align: bottom;
  }
}

/* -----------------------------------------------------------
   c-alert
   ----------------------------------------------------------- */

.c-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1em;
  margin-block-start: 1.5em;
  padding: 1em 1.5em;
  border-radius: var(--component-alert-border-radius);
  border: var(--component-alert-border-width) solid var(--component-alert-error-border);
  background-color: var(--component-alert-error-bg);
  line-height: var(--component-alert-line-height);
  color: var(--component-alert-error-text);
}

.c-alert__text {
  padding-block: .5em;
}

.c-alert__icon {
  align-self: flex-start;
  font-size: 1.5em;
  color: var(--component-alert-error-text);
}


.c-standby {
  display: grid;
  min-height: 33svh;
  place-content: center;
  margin-block-start: 3em;
  padding-block: 3em;
  border-radius: var(--component-card-border-radius);
  box-shadow: var(--semantic-shadow-lg);
  color: var(--semantic-color-text-secondary);
  font-weight: bold;
  text-align: center;

  &::before {
    content: "";
    display: block;
    width:  6em;
    height: 6em;
    margin-block-end: .5em;
    margin-inline: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../common_img/icon-completion.webp")
  }
}


/* -----------------------------------------------------------
   u-
   ----------------------------------------------------------- */

.u-c--alert {
  color: var(--semantic-color-status-error);
}


.u-ti-1 {
  padding-inline-start: 1em;
  text-indent: -1em;
}

/**
 * display / visivility
 */
.u-d-none {
  display: none;
}

.u-d-sp {
  display: block;
}

.u-d-tb,
.u-d-pc {
  display: none;
}

@media (max-width: 767.98px) {
  .u-hidden-sp {
    visibility: hidden;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .u-d-pc {
    display: none;
  }

  .u-d-sp,
  .u-d-tb {
    display: block;
  }
}
@media (min-width: 768px) {
  .u-d-sp,
  .u-d-tb {
    display: none;
  }

  .u-d-pc {
    display: block;
  }

  .u-hidden-pc {
    visibility: hidden;
  }
}