* {
  box-sizing: border-box;
  min-inline-size: 0;

  &:focus-visible {
    outline: 2px solid rgb(60 0 255);
    outline-offset: 2px;
  }
}

html,
body {
  min-height: 100vh;
}

html {
  font-size: var(--root-font-size);
  color-scheme: initial;
  scrollbar-gutter: stable;
  scroll-behavior: auto;
}

body {
  overflow-y: scroll;
  font-family: var(--font-family-sans-serif);
  font-style: normal;
  font-weight: 500;
  font-feature-settings: "palt", "kern";
  font-optical-sizing: auto;
  font-kerning: normal;
  line-height: var(--leading-base);
  color: var(--color-text);
  letter-spacing: 0.005em;
  overflow-wrap: break-word;
  background-color: var(--color-bg-fill-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
}

:where(img, svg) {
  max-width: 100%;
  height: auto;
}

:where(svg) {
  width: 100%;
  height: auto;
  overflow: visible;
}

:where(strong) {
  font-weight: 700;
}

:where(button) {
  background-color: transparent;
  border: 0;
}

:where(figcaption) {
  padding-block: 0.25em;
  font-size: var(--font-size-14);
  line-height: var(--leading-sm);
  color: var(--color-text-secondary);
}

:where(mark, .marker) {
  background-color: var(--current-theme-color-alpha);
}

:where(a, button, summary) {
  text-underline-offset: 0.25em;
}

:where(.btn, ::file-selector-button) {
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

:where(a) {
  color: var(--color-text-base);
  -webkit-text-decoration: underline;
  text-decoration: underline;

  &:focus-visible {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

  @media (any-hover: hover) {
    &:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
    }
  }
}

:where(
    a:not(.btn):not(.sns-link):not(.no-icon):not([class*="button"]):not(
        :has(img, svg)
      )
  ) {
  &:is([target="_blank"], [href*=".pdf"]) {
    &::after {
      display: inline-block;
      width: 1.5em;
      height: 1em;
      margin-inline-start: 0.125em;
      margin-inline-end: 0.125em;
      content: "";
      background-color: currentcolor;
    }
  }

  &[target="_blank"]::after {
    -webkit-mask: var(--mask-ico-external) no-repeat center / contain;
    mask: var(--mask-ico-external) no-repeat center / contain;
  }

  &[href*=".pdf"]::after {
    width: 2em;
    -webkit-mask: var(--mask-ico-pdf) no-repeat center / 90%;
    mask: var(--mask-ico-pdf) no-repeat center / 90%;
  }
}

main,
.has-contents-root {
  overflow: clip;

  & > :where(*) {
    max-width: var(--container-max-width-view);
    margin-inline: auto;
  }
}

[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/* x-cloak @see https://alpinejs.dev/directives/cloak */
[x-cloak] {
  display: none !important;
}

/* prevent */
.has-prevent-default,
[data-prevent-default],
[x-data="prevent"] {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* no print */
@media print {
  .has-no-print {
    display: none !important;
  }
}

.screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-screen);
  margin: auto;
  background-color: var(--color-base);
  transition: 0.36s;
  transform: translate3d(0, 0, 0);
  will-change: opacity;
  backface-visibility: hidden;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 4px;
    content: "";
    background-color: var(--color-primary);
    transition: opacity 0.4s ease;
    transform: scaleX(0);
    transform-origin: center left;
    animation: 8s progress-bar var(--ease-in-circ) 1s;
  }

  &.is-hidden {
    visibility: hidden !important;
    opacity: 0 !important;

    &::before {
      opacity: 0;
      animation-duration: 0.2s;
    }
  }
}

@media (scripting: none) {
  .screen {
    display: none;
  }
}

:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 1.25em;
  font-weight: 700;
  line-height: var(--leading-hd);
  text-wrap: initial;
  overflow-wrap: break-word;
}

* + :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 2.5em;
}

:where(h1) {
  font-size: var(--h1);
}

:where(h2) {
  font-size: var(--h2);
}

:where(h3) {
  font-size: var(--h3);
}

:where(h4) {
  font-size: var(--h4);
}

:where(h5) {
  font-size: var(--h5);
}

:where(h6) {
  font-size: var(--h6);
}

.h1 {
  font-size: var(--h1) !important;
}

.h2 {
  font-size: var(--h2) !important;
}

.h3 {
  font-size: var(--h3) !important;
}

.h4 {
  font-size: var(--h4) !important;
}

.h5 {
  font-size: var(--h5) !important;
}

.h6 {
  font-size: var(--h6) !important;
}

.has-lead-size-lg {
  font-size: var(--hd-lg);
}

.has-lead-size-md {
  font-size: var(--hd-md);
}

:where(p, .p, li) {
  font-size: var(--p);
}

:where(p, .p) {
  margin-block-end: 1em;
}

* + :where(p, .p) {
  margin-block-start: 1em;
}

/* @see https://developer.mozilla.org/ja/docs/Web/HTML/Element/wbr */
.wbr {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.has-display-contents {
  display: contents;
}

.has-relative {
  position: relative;
}

.has-overflow-clip {
  overflow: clip;
}

.has-center-fit-content {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

.has-list-style-none {
  padding-inline: 0;
  list-style: none;
}

/* ----------------------------
 components
---------------------------- */

.btn {
  --_btn-color-base: var(--color-primary);
  --_btn-color-hover: var(--color-primary-darken);
  --_btn-color-label: var(--color-base);
  --_btn-icon-size: 1.5em;
  --_btn-radius: var(--infinity);
  --_btn-shadow-color: var(--color-primary-darken);
  --_btn-shadow-spacer: calc(4 * var(--rem));

  position: relative;
  display: flex;
  min-width: var(--_btn-min-width);
  padding-block-end: var(--_btn-shadow-spacer);
  -webkit-text-decoration: none;
  text-decoration: none;

  &::before {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: calc(100% - var(--_btn-shadow-spacer));
    margin: auto auto 0;
    content: "";
    background-color: var(--_btn-shadow-color);
    border-radius: var(--_btn-radius);
  }

  &:active > .btn__link {
    transform: translateY(var(--_btn-shadow-spacer));
  }

  &:focus-visible {
    --_btn-shadow-color: var(--color-text);
  }

  @media (any-hover: hover) {
    &:hover {
      --_btn-shadow-color: var(--color-text);
    }
  }

  &.is-small {
    --_btn-shadow-spacer: calc(3 * var(--rem));

    min-width: min(100%, calc(155 * var(--rem)));

    & .btn__link {
      padding-inline: 1.25em;
      font-size: var(--font-size-14);

      @media (width >= 48em) {
        font-size: var(--font-size-14);
      }
    }
  }

  &.is-large {
    --_btn-radius: min(4vw, 2.5rem);
    --_btn-shadow-spacer: calc(6 * var(--rem));

    min-width: min(100%, calc(635 * var(--rem)));

    @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
      --_btn-icon-size: 1.25em;
    }

    & .btn__link {
      column-gap: 0.75em;
      font-size: var(--font-size-16);
      line-height: var(--leading-md);

      @media (width >= 48em) {
        font-size: var(--font-size-36);
      }
    }
  }

  &.is-square .btn__link {
    border-radius: 0 !important;
  }
}

.btn__link {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.5em;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 2.25em;
  padding: 0.5em 1em;
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: var(--leading-sm);
  color: var(--_btn-color-label);
  text-align: center;
  background-color: var(--_btn-color-base);
  border-radius: var(--_btn-radius);

  @media (width >= 48em) {
    font-size: var(--font-size-18);
  }

  &::after {
    width: var(--_btn-icon-size);
    height: 100%;
    margin-block: auto;
    content: "";
    background-color: transparent;
    background-color: currentcolor;
    -webkit-mask: var(--ico-circle-arrow-right) no-repeat center /
      var(--_btn-icon-size);
    mask: var(--ico-circle-arrow-right) no-repeat center / var(--_btn-icon-size);
  }

  &:focus-visible {
    background-color: var(--_btn-color-hover);
  }

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--_btn-color-hover);
    }
  }

  & .btn__inner {
    display: block;
  }
}

.link {
  display: inline-grid;
  display: inline grid;
  grid-template-columns: auto auto;
  align-items: center;

  &::after {
    width: 1em;
    aspect-ratio: 1;
    content: "";
    background-color: currentColor;
    -webkit-mask: var(--ico-arrow-right) no-repeat center / 0.5em;
    mask: var(--ico-arrow-right) no-repeat center / 0.5em;
  }

  > span {
    display: inline block;
  }
}

.container {
  display: block;
  width: calc(100% - calc(var(--gutter) * 2));
  max-width: var(--container-max-width);
  margin-inline: auto;

  &.is-max-sm {
    @media (width >= 36em) {
      max-width: var(--container-max-width-sm) !important;
    }
  }

  &.is-max-md {
    @media (width >= 48em) {
      max-width: var(--container-max-width-md) !important;
    }
  }

  &.is-max-lg {
    @media (width >= 62em) {
      max-width: var(--container-max-width-lg) !important;
    }
  }

  &.is-max-xl {
    @media (width >= 75em) {
      max-width: var(--container-max-width-xl) !important;
    }
  }

  &.is-max-xxl {
    @media (width >= 100em) {
      max-width: var(--container-max-width-xxl) !important;
    }
  }
}

:where(.section) {
  --_block-gutter: var(--spacer-lg);

  position: relative;
  width: 100%;
  padding-block: var(--_block-gutter);
  margin-inline: auto;

  @media (width >= 62em) {
    --_block-gutter: var(--spacer-xl);
  }
}

.card-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, calc(340 * var(--rem))), 1fr)
  );
  gap: var(--spacer-md) var(--gutter);
  padding-block: var(--spacer-lg);
  list-style: none;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  background-color: var(--color-base);

  &.is-drop-shadow {
    box-shadow: var(--shadow-sm);
  }

  &.is-round {
    border-radius: 1rem;

    & > *:nth-child(1) {
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
    }

    & > *:last-child {
      border-bottom-right-radius: 1rem;
      border-bottom-left-radius: 1rem;
    }
  }
}

.card-thumbnail {
  aspect-ratio: 16/9;
  overflow: hidden;

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

.card-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block-start: var(--spacer);
  padding-inline: var(--gutter);
  margin: 0 auto;
  font-size: var(--font-size-24);
  line-height: var(--leading-sm);
  text-align: center;

  @media (width >= 48em) {
    font-size: var(--font-size-32);
  }

  & > span {
    display: inline-block;
    text-align: initial;
  }

  &.is-stroke-end {
    width: calc(100% - (var(--gutter) * 2));
    padding-block: 0.5em;
    padding-inline: 0;
    border-block-end: max(2px, calc(2 * var(--rem))) solid var(--color-text);
  }

  &.is-stroke-block {
    width: 100%;
    padding: 0.5em 0;
    margin-block-end: var(--spacer);
    border-block: max(2px, calc(2 * var(--rem))) solid var(--color-text);
  }

  &.is-head-secondary {
    padding-block: 0.5em;
    margin-block: 0;
    color: var(--color-base);
    background-color: var(--color-secondary);
  }

  &.is-badge-num {
    display: grid block;
    grid-template-columns: auto 1fr;
    column-gap: 0.15em;
    color: var(--color-tertiary);

    & > span {
      display: inline-block;
      text-align: initial;
    }

    & > .badge-num {
      width: 1.6em;
      aspect-ratio: 1;

      @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
        width: 1.5em;
      }

      & img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}

.card-content {
  padding: var(--spacer) var(--gutter) var(--spacer-md);

  & *:last-child {
    margin-block-end: 0;
  }
}

.card.is-flat .card-content {
  padding-inline: 0;
}

.heading {
  font-size: var(--font-size-36);

  @media (width >= 48em) {
    font-size: var(--font-size-56);
  }
}

.heading-brackets {
  --_stroke: calc(4 * var(--rem));

  @media (width >= 48em) {
    --_stroke: calc(5 * var(--rem));
  }

  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 0.5em;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;

  &::before,
  &::after {
    width: 0.75rem;
    height: calc(100% - 0.5em);
    margin-block: auto;
    content: "";
    border: var(--_stroke) solid currentColor;
  }

  &::before {
    border-inline-end: none;
  }

  &::after {
    border-inline-start: none;
  }
}

.heading-marker {
  max-width: var(--container-max-width-md);
  margin-inline: auto;
  font-size: var(--font-size-36);
  color: var(--_theme-color, var(--color-primary));
  text-align: center;

  @media (width >= 48em) {
    font-size: var(--font-size-56);
  }

  .heading-marker__maker {
    display: inline;
    padding-inline: 0.125em;
    background-color: var(--color-base);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

.attention {
  display: grid;
  row-gap: var(--spacer-sm);
  padding-inline: 0;
  line-height: var(--leading-sm);
  list-style: none;

  & > .attention__label {
    display: grid;
    display: block grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.25em;
    font-size: var(--font-size-12);
  }

  &.is-block-center {
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}

.accordion:is(details) {
  --_accordion-inline-gutter: max(2.5%, var(--gutter));
  --_accordion-block-gutter: var(--spacer-md);
  --_accordion-duration: 0.2s;

  padding: var(--spacer-md) var(--_accordion-inline-gutter);
  background: var(--color-base);
  box-shadow: var(--shadow-sm);

  &.has-icon-open .accordion-summary:is(summary) {
    &::before {
      height: calc(100% + var(--_accordion-block-gutter));
    }

    &::after {
      -webkit-mask-image: var(--mask-ico-minus);
      mask-image: var(--mask-ico-minus);
      transform: rotate(0deg);
    }
  }

  &[data-accordion-open="true"] {
    .accordion-panel {
      grid-template-rows: 1fr;
    }
  }
}

.accordion-summary:is(summary) {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1rem;
  min-height: 1em;
  font-size: var(--font-size-16);
  font-weight: 700;

  @media (width >= 48em) {
    font-size: var(--font-size-20);
  }

  /* hide icon | Safari   */
  &::-webkit-details-marker {
    display: none;
  }

  /* hidden click spacer */
  &::before {
    position: absolute;
    inset-block-start: calc(-1 * var(--_accordion-block-gutter));
    inset-inline: calc(-1 * var(--_accordion-inline-gutter));
    width: calc(100% + (var(--_accordion-inline-gutter) * 2));
    height: calc(100% + (var(--_accordion-block-gutter) * 2));
    content: "";
  }

  /* icon */
  &::after {
    position: relative;
    inset-block-start: 0.5em;
    display: block;
    width: 1rem;
    aspect-ratio: 1;
    content: "";
    background-color: currentcolor;
    -webkit-mask: var(--mask-ico-plus) no-repeat center / contain;
    mask: var(--mask-ico-plus) no-repeat center / contain;
    transition: transform var(--_accordion-duration) ease;
    transform: rotate(180deg);
  }

  &:focus-visible {
    color: var(--color-primary);
  }

  @media (any-hover: hover) {
    &:hover {
      color: var(--color-primary);
    }
  }
}

.accordion-summary__label {
  display: block;
  max-width: 100%;
  cursor: pointer;
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--_accordion-duration) var(--ease-out-sine);
}

.accordion-panel__inner {
  overflow: hidden;

  & *:last-child {
    margin-bottom: 0;
  }
}

.accordion-content {
  padding-block-start: var(--spacer-sm);
}

:where(* + .accordion) {
  margin-block-start: var(--spacer-lg);
}

.accordion + .accordion {
  margin-block-start: var(--spacer-md);
}

.accordion.is-qa {
  & :is(.accordion-summary__label, .accordion-content__inner) {
    --_ico-width: calc(28 * var(--rem));

    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: flex-start;
    line-height: var(--leading-lg);

    &:before {
      display: flex;
      flex: 0 0 var(--_ico-width);
      align-items: center;
      justify-content: center;
      width: var(--_ico-width);
      aspect-ratio: 1;
      margin-block-start: calc(1ch - 0.5em);
      font-family: var(--font-family-sans-serif-en);
      font-size: var(--font-size-16);
      font-weight: 700;
      line-height: 1;
      color: var(--color-base);
      background-color: var(--color-tertiary);
      border-radius: var(--infinity);
    }
  }

  & .accordion-summary__label {
    &::before {
      color: var(--color-base);
      content: "Q";
      background-color: var(--color-tertiary);
      border-radius: var(--infinity);
    }
  }

  & .accordion-content__inner {
    &::before {
      color: var(--color-tertiary);
      content: "A";
      background-color: var(--color-base);
      border: calc(2 * var(--rem)) solid var(--color-tertiary);
      border-radius: var(--infinity);
    }
  }
}

/* ----------------------------
 utility
---------------------------- */

:where(.has-text-emphasis-underline) {
  font-size: var(--font-size-30);

  @media (width >= 48em) {
    font-size: var(--font-size-36);
  }
}

.has-text-emphasis-underline {
  margin-inline: 0.05em;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-thickness: calc(4 * var(--rem));
  text-decoration-color: var(--color-primary);
  text-underline-offset: 0.25em;

  @media (width >= 48em) {
    text-decoration-thickness: calc(5 * var(--rem));
  }
}

.has-list-style-disc {
  padding-left: var(--spacer);
  list-style-type: disc;
}

.has-text-align-center {
  text-align: center;
}

.has-text-break-line {
  & > span {
    display: block;
  }
}

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

.header {
  display: grid;
  grid-template-columns: 1fr calc((1 / 3) * 100%);
  max-width: var(--container-max-width-view);
  height: var(--header-height);
  margin-inline: auto;
  background-color: var(--color-base);
  box-shadow: var(--shadow-sm);

  @media (width >= 48em) {
    grid-template-columns: 1fr calc(300 * var(--rem));
  }
}

.header-body {
  display: grid;
  align-items: center;
  /*justify-content: center;*/
  justify-content: flex-start;
  padding: var(--spacer-sm);

  @media (width >= 48em) {
    justify-content: flex-start;
    padding-inline: var(--gutter);
  }
}

.header-brand {
  width: 100%;
  max-width: 86%;
  margin-inline: auto;

  @media (width >= 48em) {
    max-width: initial;
    height: min(100%, calc(45 * var(--rem)));
    aspect-ratio: 175 / 45;
  }

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

/* 202503 ヘッダー用CTA別途作成 （最下部に追加）
.header-cta-link {
  display: inline-grid;
  grid-template-columns: 1fr 35%;
  align-items: center;
  overflow: clip;
  color: var(--color-base);
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: var(--color-primary);

  &::after {
    --_width: calc(40 * var(--rem));

    display: block;
    width: var(--_width);
    aspect-ratio: 1;
    content: "";
    background-color: currentColor;
    -webkit-mask: var(--ico-circle-arrow-right) no-repeat center / 60%;
    mask: var(--ico-circle-arrow-right) no-repeat center / 60%;
    rotate: 0deg;

    @media (width >= 48em) {
      --_width: calc(80 * var(--rem));
    }
  }

  &:focus-visible {
    background-color: var(--color-text);
  }

  @media (any-hover: hover) {
    transition: background-color 0.2s ease;

    &:hover {
      background-color: var(--color-text);
    }
  }
}

.header-cta-link__label {
  display: block;
  line-height: var(--leading-sm);
  text-align: center;

  & > span {
    display: block;
    font-size: var(--font-size-14);
    font-weight: 700;

    &:first-child {
      font-size: var(--font-size-12);
    }

    @media (width >= 48em) {
      font-size: var(--font-size-16);

      &:first-child {
        font-size: var(--font-size-14);
      }
    }
  }
}
*/

/* ----------------------------
 transitions
---------------------------- */

@media not print, not (prefers-reduced-motion: no-preference) {
  .has-fade-b-in {
    --_delay: 0.05s;
    --_duration: 0.6s;
    --_y: 3rem;

    opacity: 0;
    transform: translateY(var(--_y));
    will-change: opacity, transform;
  }

  .is-page-active .has-fade-b-in {
    transition:
      transform var(--_duration) var(--ease-out-circ),
      opacity var(--_duration);
    transition-delay: var(--_delay), var(--_delay);
  }

  .is-page-active [data-scroll="in"].has-fade-b-in {
    opacity: 1;
    transform: translateY(0);
  }

  .has-mask-l-in {
    --_delay: 0s;
    --_duration: 1s;
    --_y: 10%;
    --_ease: var(--ease-in-out-circ);

    clip-path: polygon(0 0, 0 0, 0 0);
    will-change: clip-path;
  }

  .is-page-active .has-mask-l-in {
    transition: clip-path var(--_duration) var(--_ease) var(--_delay);
  }

  .is-page-active [data-scroll="in"].has-mask-l-in,
  .is-page-active [data-scroll="in"][data-transition-parent] .has-mask-l-in {
    clip-path: polygon(0 0, 200% 0, 0 200%);
  }

  :where(img).has-img-fade {
    --_delay: 0.1s;
    --_duration: 1s;
    z-index: 0;
    opacity: 0;
    transform: scale(1.1);
    will-change: transform, opacity;
  }

  .is-page-active .has-img-fade {
    transition:
      transform var(--_duration) var(--ease-out-circ) var(--_delay),
      opacity var(--_duration) ease var(--_delay);
  }

  .is-page-active [data-scroll="in"][data-img-decoded="true"].has-img-fade {
    opacity: 1;
    transform: scale(1);
  }
}

/* ----------------------------
 cta sticky
---------------------------- */

.cta-sticky-layer {
  position: sticky;
  inset-inline: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-cta-sticky);
  display: grid;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100vw;
  height: 0px;
  padding-block: var(--spacer-sm) var(--spacer);
  padding-inline: calc(var(--spacer-sm) + 15px) var(--gutter);
  margin-inline: auto;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  will-change: opacity, visibility;
}

.is-page-active .cta-sticky-layer {
  transition:
    opacity 0.2s ease,
    visibility 0.2s;
}

.is-page-active .cta-sticky-layer.is-active {
  visibility: visible;
  opacity: 1;
  transition-duration: 0.4s, 1s;
}

.cta-sticky {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--spacer);
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto 0;
  pointer-events: initial;

  @media (width >= 48em) {
    width: max-content;
    max-width: calc(425 * var(--rem));
  }
}

.cta-sticky__link {
  display: block;
  opacity: 0;
  transform: translateX(-1rem);

  &:nth-child(2) {
    transform: translateY(1rem);
  }

  & .btn .btn__link {
    --_btn-icon-size: 1.25em;

    padding: 0.25em 1em;
    font-size: var(--font-size-24);
  }
}

.is-page-active .cta-sticky__link {
  transition:
    opacity 0.2s ease 0.4s,
    transform 0.2s var(--ease-out-circ) 0.4s;
}

.is-page-active .cta-sticky-layer.is-active .cta-sticky__link {
  opacity: 1;
  transition-delay: 0.3s, 0.3s;
  transition-duration: 0.4s, 0.6s;
  transform: translateX(0);

  &:nth-child(2) {
    transition-delay: 0.4s, 0.4s;
    transform: translateY(0);
  }
}

.btn-go-top {
  display: grid;
  display: block grid;
  width: calc(30 * var(--rem));
  aspect-ratio: 1;
  background-color: var(--color-base);
  border-radius: 50%;
  box-shadow:
    0 0 2px rgb(26 26 26 / 0.3),
    0 calc(15 * var(--rem)) calc(30 * var(--rem)) rgb(26 26 26 / 0.1);
  transition:
    color 0.2s ease,
    background-color 0.2s ease;

  &:focus-visible {
    color: var(--color-base);
    background-color: var(--color-text);
  }

  &::after {
    grid-area: 1/1;
    width: 100%;
    height: 100%;
    margin-block: auto;
    content: "";
    background-color: transparent;
    background-color: currentcolor;
    border-radius: 50%;
    -webkit-mask: var(--ico-arrow-top) no-repeat center / 0.75em;
    mask: var(--ico-arrow-top) no-repeat center / 0.75em;
  }

  @media (any-hover: hover) {
    &:hover {
      color: var(--color-base);
      background-color: var(--color-text);
    }
  }
}

/* ----------------------------
 hero
---------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-text);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(
      clamp(calc(540 * var(--rem)), 100svh, calc(1980 * var(--rem))) -
        var(--header-height)
    );
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: cover;

  &.is-view-large {
    object-position: 65%;

    @media (min-aspect-ratio: 4/3) {
      object-position: center;
    }
  }
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;

  &::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: auto;
    content: "";
    background: linear-gradient(
      to bottom,
      rgba(26, 26, 26, 0) 0%,
      rgba(26, 26, 26, 0) 70%,
      rgba(26, 26, 26, 1) 100%,
      var(--color-text)
    );
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    &::after {
      content: none !important;
      background: none !important;
    }
  }
}

.hero-body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(
    clamp(calc(300 * var(--rem)), 100svh, calc(1600 * var(--rem))) -
      var(--header-height)
  );
  overflow: hidden;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    max-width: 55%;
    min-height: initial;
    padding: var(--spacer-xl) var(--gutter);
  }
}

.hero-head {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  padding: max(calc(300 * var(--rem)), 50svh) max(5%, var(--gutter))
    var(--spacer);
  overflow: clip;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    padding-block-start: var(--spacer);
  }
}

.hero-heading {
  position: relative;
  z-index: 3;
  width: min(100%, calc(640 * var(--rem)));
  margin: auto 0 0;

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

  &.has-mask-l-in {
    --_duration: 1.4s;
  }
}

.hero-content {
  flex: 0 0 auto;
  padding: var(--spacer-xs) max(5%, var(--gutter)) var(--spacer);
  background-color: var(--color-text);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    background-color: transparent;
  }
}

.hero-description {
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: var(--leading-md);
  color: var(--color-base);

  @media (width >= 48em) {
    margin-block-end: 0;
    font-size: var(--font-size-24);
  }

  &.has-mask-l-in {
    --_duration: 1.4s;
  }
}

/* ----------------------------
 section: lead
---------------------------- */

.section-lead {
  background-color: var(--color-bg-fill);
}

.section-lead-heading {
  font-size: var(--font-size-18);
  line-height: var(--leading-xl);
  text-align: center;

  & > span {
    display: block;
  }

  & strong {
    font-size: var(--font-size-30);
    line-height: var(--leading-md);
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-24);
    line-height: var(--leading-lg);

    & strong {
      font-size: var(--font-size-36);
    }
  }
}

/* ----------------------------
 section: fact
---------------------------- */

.section-fact {
  background-color: var(--color-text);
}

.section-fact-heading {
  display: grid;
  display: block grid;
  place-items: center;
  width: 100%;
  padding: var(--spacer-lg) var(--gutter);
  margin: 0;

  @media (width >= 48em) {
    padding-block: var(--spacer-xl);
  }

  & picture {
    display: block;
    width: min(100%, calc(360 * var(--rem)));

    @media (width >= 48em) {
      width: min(100%, calc(765 * var(--rem)));
    }
  }

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

.section-fact-group {
  position: relative;
}

.section-fact-group-bg-wrapper {
  position: relative;
}

:is(.section-fact-group-bg, .section-fact-group-thumbnail) {
  position: absolute;
  inset: 0;
  margin: 0;

  &::before,
  &::after {
    position: absolute;
    inset: -1px;
    z-index: 1;
    margin: auto;
    content: "";
  }

  &::before {
    background: var(--color-text);
    mix-blend-mode: multiply;
    opacity: 0.25;
  }

  &::after {
    background: linear-gradient(
      to top,
      transparent 0%,
      transparent 70%,
      var(--color-text) 100%
    );
  }

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.section-fact-group-bg {
  overflow: clip;
}

.has-left-grad :is(.section-fact-group-bg, .section-fact-group-thumbnail) {
  &::after {
    --_shadow: color-mix(in srgb, var(--color-text) 70%, transparent);

    background: linear-gradient(
      to left,
      transparent 0%,
      transparent 50%,
      var(--_shadow) 100%
    );
  }
}

.section-fact-group-thumbnail {
  z-index: 0;
  overflow: clip;

  &::after {
    background: linear-gradient(
      to top,
      transparent 0%,
      transparent 50%,
      var(--color-text) 100%
    );
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    display: none;
  }
}

.section-fact-group-container {
  position: relative;
  margin-inline: auto;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    max-width: min(
      calc(100% - (2 * var(--gutter))),
      var(--container-max-width-xl)
    );
    min-height: calc(640 * var(--rem));
  }
}

.section-fact-group-shoulder {
  --_delay: 0.3s;
  --_duration: 1.4s;

  position: absolute;
  inset: var(--spacer-lg) var(--gutter) auto auto;
  z-index: 5;
  width: 18%;

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

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    inset-block-start: var(--spacer-xxl);
    inset-inline-end: 0;
    width: calc(136 * var(--rem));

    &.is-single-line {
      width: calc(68 * var(--rem));
    }
  }
}

.section-fact-group-body {
  position: relative;
  z-index: 2;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    width: 38%;
  }
}

.section-fact-group-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 375/350;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    aspect-ratio: initial;
  }
}

.section-fact-group-head-content {
  position: relative;
  width: 100%;
  padding: var(--spacer-xl) var(--gutter) var(--spacer-sm);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-bg-fill-smoke) 100%
  );

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    padding-block-end: var(--spacer);
    padding-inline-start: 0;
    background: transparent;
  }
}

.section-fact-group-head-index {
  position: relative;
  column-gap: 0.75rem;
  align-items: center;
  max-width: 100%;
  margin-inline: 0 auto;
  color: var(--color-primary);
}

.section-fact-group-head-index__label {
  display: flex;
  align-items: center;
  font-family: var(--font-family-sans-serif-en);
  font-size: var(--font-size-30);
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;
  vertical-align: middle;

  & strong {
    margin-inline: 0.1em;
    font-size: var(--font-size-42);
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-40);

    & strong {
      font-size: var(--font-size-56);
    }
  }
}

.section-fact-group-content {
  padding: var(--spacer-xs) var(--gutter) calc(var(--spacer-xl) * 1.25);
  color: var(--color-base);
  background-color: var(--color-bg-fill-smoke);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    padding-inline-start: 0;
    background: transparent;
  }
}

.section-fact-group-heading {
  width: 72%;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    width: 100%;
  }

  & img {
    width: 100%;
    height: auto;
  }
}

.section-fact-group-description {
  font-size: var(--font-size-16);
  font-weight: 700;

  @media (width >= 48em) {
    font-size: var(--font-size-24);
  }

  & mark {
    padding-inline: 0.25em;
    color: var(--color-base);
    background: var(--color-primary);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

.section-fact-group-footer {
  background: var(--color-bg-fill-darken) url("../img/bg-texture.webp") repeat
    center;
}

.section-fact-group-footer-content {
  position: relative;
  z-index: 5;
  padding: 0 var(--gutter) var(--spacer-lg);

  @media (width >= 48em) {
    padding-block-end: var(--spacer-xl);
  }
}

.section-fact-group-chart-badge {
  --_width: calc(85 * var(--rem));

  position: absolute;
  inset-block-start: calc(-0.65 * var(--_width));
  inset-inline-end: calc(-0.125 * var(--_width));
  width: var(--_width);
  aspect-ratio: 1;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    --_width: calc(170 * var(--rem));
    inset-block-start: calc(-0.45 * var(--_width));
    inset-inline-end: calc(-0.35 * var(--_width));
  }

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

.section-fact-group-chart {
  position: relative;
  width: 100%;
  margin-block-start: calc(-1 * var(--spacer-lg));
  background-color: var(--color-base);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    width: 74%;
  }

  & img {
    width: 100%;
    height: auto;
  }
}

/* ----------------------------
 section solution
---------------------------- */

.section-solution {
  position: relative;
  background-color: var(--color-bg-fill);
}

.section-solution-head {
  position: relative;
  padding-block-end: var(--spacer);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    display: flex;
    align-items: center;
    min-height: calc(582 * var(--rem));
    padding-block: var(--spacer-xxl);
  }
}

.section-solution-head-cover {
  position: relative;
  overflow: clip;
  background-color: var(--color-base);

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

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    position: absolute;
    inset: 0 0 0 auto;
    width: 87.5%;
    margin: auto 0 auto auto;
  }
}

.section-solution-head-heading {
  position: relative;
  width: calc(100% - (var(--gutter) * 2));
  padding: var(--spacer);
  margin-block: calc(-1 * var(--spacer-lg)) var(--spacer);
  margin-inline: auto;
  font-size: var(--font-size-20);
  line-height: var(--leading-sm);
  color: var(--color-base);
  background: var(--grad-ribbon-bg);

  @media (width >= 48em) {
    padding-block: var(--spacer-xl);
    padding-inline: max(5%, var(--gutter)) var(--spacer-md);
    font-size: var(--font-size-32);
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    width: 58%;
    margin: 0;
  }

  & > span {
    display: block;
  }

  & strong {
    font-size: 150%;
  }
}

/* .section-solution-group { } */

.section-solution-group-heading {
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - (var(--gutter) * 2));
  margin-block-end: 1.5em;
  font-size: var(--font-size-30);
  text-align: center;

  @media (width >= 48em) {
    font-size: var(--font-size-48);
  }
}

.section-solution-group-heading__body {
  display: block;
  text-align: center;

  & > span {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;

    @media (width >= 48em) {
      display: inline-block;
    }
  }
}

.section-solution-card-grid {
  display: grid;
  gap: var(--spacer-lg) var(--gutter);
  width: 100%;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    row-gap: var(--spacer-xl);
  }
}

.section-solution-card {
  display: grid;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-template-columns: repeat(48, 1fr);
    align-items: center;
  }
}

.section-solution-card-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-area: 1 / 1 / 1 / 29;
  }

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

.section-solution-card:nth-child(even) .section-solution-card-thumbnail {
  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-area: 1 / 22 / 1 / 49;
  }
}

.section-solution-card-content {
  --_shadow-width: 1rem;

  margin-block-start: calc(-1 * var(--spacer-md));
  margin-inline: auto;

  @media (width >= 48em) {
    --_shadow-width: 1.5rem;
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-area: 1 / 27 / 1 / 49;
    margin-block: 0;
  }
}

.section-solution-card:nth-child(even) .section-solution-card-content {
  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-area: 1 / 1 / 1 / 23;
  }
}

.section-solution-card-heading {
  position: relative;
  z-index: 2;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 2em;
  max-width: calc(100% - (var(--gutter) * 2));
  padding: 0.5em 1em;
  margin-block: 0;
  margin-inline: var(--gutter) auto;
  overflow: visible;
  font-size: var(--font-size-24);
  line-height: var(--leading-sm);
  color: var(--color-base);
  background: var(--grad-ribbon-bg);

  &::after {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    width: var(--_shadow-width);
    aspect-ratio: 16/9;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    pointer-events: none;
    content: "";
    background-color: var(--color-tertiary-darken);
  }

  > span {
    display: block;
  }

  @media (width >= 48em) {
    font-size: var(--font-size-40);
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    max-width: calc(100% - var(--spacer));
    padding-inline: var(--spacer-md);
    margin-inline-start: 0;

    &::after {
      width: var(--spacer-md);
    }
  }
}

.section-solution-card-description {
  position: relative;
  z-index: 1;
  width: calc(100% - (var(--gutter) + var(--_shadow-width)));
  padding: var(--spacer-lg) var(--gutter) var(--spacer);
  margin: calc(-1 * var(--spacer-md)) 0 0 auto;
  background: var(--color-base);
  box-shadow: var(--shadow-sm);

  & :last-child {
    margin-block-end: 0;
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    width: calc(100% - var(--spacer-md));
    margin-inline: auto 0;
  }
}

/* ----------------------------
 section entry
---------------------------- */

.section-entry {
  padding-block-start: 0;
  background-color: var(--color-secondary);
}

.section-entry-heading {
  padding: 1em var(--gutter) 0.75em;
  margin-block-end: 0;
  font-size: var(--font-size-36);
  line-height: var(--leading-sm);
  color: var(--color-base);
  text-align: center;

  & > span {
    display: block;
  }

  @media (width >= 48em) {
    font-size: var(--font-size-48);
  }
}

.section-entry-heading__label-small {
  font-size: var(--font-size-20);

  @media (width >= 48em) {
    font-size: var(--font-size-48);
  }
}

.section-entry-cover {
  position: relative;
  clip-path: polygon(50% var(--spacer-lg), 100% 0, 100% 100%, 0 100%, 0 0);
  background-color: var(--color-base);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    clip-path: polygon(50% var(--spacer-xl), 100% 0, 100% 100%, 0 100%, 0 0);
  }

  & img {
    width: 100%;
    height: auto;
  }
}

.section-entry-content {
  position: relative;
  padding: var(--spacer-md) var(--gutter);
  margin-block-start: calc(-1 * var(--spacer-lg));
  background-color: var(--color-base);
  box-shadow: 0 calc(-50 * var(--rem)) calc(25 * var(--rem)) 0
    rgb(59 64 75 / 0.05);

  @media (width >= 48em) {
    padding-block: var(--spacer-lg);
  }
}

.section-entry-tagline {
  display: block;
  max-width: var(--container-max-width-md);
  margin-inline: auto;
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: var(--leading-md);
  text-align: center;

  & > span {
    display: block;
  }

  & strong {
    font-size: var(--font-size-26);
    color: var(--color-primary);
  }

  @media (width >= 48em) {
    font-size: var(--font-size-36);

    & strong {
      font-size: var(--font-size-56);
    }
  }
}

/* 202503 CTA部分変更（鰐渕）---------------------------------------------------------------------------------------------------------- */
.section-entry-cta-link {
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  a{
    color: var(--color-base);
    display: block;
    text-decoration: none;
    margin-bottom: .5em;
    padding: .5em 0;
    border-radius: 1rem;
    font-weight: 700;
    background: var(--color-primary) var(--ico-circle-arrow-right) no-repeat right 1em center / auto 50%;
    &:nth-child(even){
      background-color: #fcac4e;
    }
  }
  @media (width >= 48em) {
    a{
      display: inline-block;
      min-width: 15em;
      margin: 0 .25em .5em;
      font-size: 2em;
      padding-right: 1em;
    }
  }
}

.section-entry-cta-link-text-small {
  display: block;
  font-size: 87.5%;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: 66.6%;
  }
}

.section-entry-footer {
  text-align: center;
  strong{
    color: var(--color-primary);
  }

  @media (width >= 48em) {
    padding-top: var(--spacer);
  }

  & .link {
    color: var(--color-primary);

    &:focus-visible {
      color: var(--color-primary-darken);
      -webkit-text-decoration: none;
      text-decoration: none;
    }
  }

  @media (any-hover: hover) {
    & .link:hover {
      color: var(--color-primary-darken);
      -webkit-text-decoration: none;
      text-decoration: none;
    }
  }
}

/* ----------------------------
 section helper
---------------------------- */

.section-helper {
  background-color: var(--color-bg-fill);
}

.section-helper-description {
  > span {
    display: block;
  }
}

.section-helper-em-text {
  margin-inline: 0.025em;
  font-size: var(--font-size-24);
  font-weight: 700;
  color: var(--color-primary);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-36);
  }
}

.section-helper-well {
  padding: var(--spacer-lg) var(--gutter);
  background-color: var(--color-base);
  border: calc(4 * var(--rem)) solid var(--color-primary);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    padding-block: var(--spacer-xl);
  }
}

.section-helper-well-tagline {
  margin-block-end: 0;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;

  & > span {
    display: block;
    font-size: var(--font-size-24);

    & > strong {
      font-size: var(--font-size-30);
      background: linear-gradient(transparent 60%, var(--color-bg-fill) 60%);

      & > em {
        font-size: var(--font-size-48);
      }
    }
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    & > span {
      font-size: var(--font-size-36);

      & > strong {
        font-size: var(--font-size-56);

        & > em {
          font-size: var(--font-size-72);
        }
      }
    }
  }
}

/* ----------------------------
 section reasons
---------------------------- */

.section-reasons-heading {
  --_v-gutter: var(--spacer-lg);
  --_clip-triangle-height: calc(100% - var(--_v-gutter));

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    --_v-gutter: var(--spacer-xl);
  }

  padding: 1em var(--gutter) calc(0.75em + var(--_v-gutter));
  margin-block-end: var(--spacer-xl);
  clip-path: polygon(
    100% 0,
    100% var(--_clip-triangle-height),
    50% 100%,
    0 var(--_clip-triangle-height),
    0 0
  );
  color: var(--color-base);
  text-align: center;
  background-color: var(--color-secondary);

  & > span {
    display: block;
  }
}

.section-reasons-heading__label {
  display: block;
}

.section-reasons-list {
  display: grid;
  row-gap: var(--spacer-lg);
  padding: 0;
  margin-block-end: var(--spacer-lg);
  list-style: none;
}

.section-reasons-list-item {
  position: relative;
  padding: var(--spacer-md) var(--gutter);
  background-color: var(--color-bg-fill);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    display: grid;
    grid-template-columns: max(calc(400 * var(--rem)), 36%) 1fr;
    column-gap: var(--gutter);
    align-items: center;
    padding-block: var(--spacer-lg);
  }
}

.section-reasons-list-item-badge {
  --_badge-size: calc(85 * var(--rem));

  position: absolute;
  inset-block: calc(-1 * (var(--_badge-size) * 0.35)) auto;
  inset-inline: calc(-1 * (var(--_badge-size) * 0.15)) auto;
  display: block;
  width: var(--_badge-size);
  aspect-ratio: 1;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    --_badge-size: calc(120 * var(--rem));
  }

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

.section-reasons-list-item-thumbnail {
  aspect-ratio: 16/9;

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

.section-reasons-list-item-content {
  padding-block-start: var(--spacer);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    padding-block-start: initial;
  }
}

.section-reasons-list-item-heading > span {
  font-size: var(--font-size-24);
  text-decoration-color: var(--color-secondary);

  @media (width >= 48em) {
    font-size: var(--font-size-36);
  }
}

.section-reasons-list-item:nth-child(even) {
  .section-reasons-list-item-badge {
    inset-inline: auto calc(-1 * (var(--_badge-size) * 0.15));
  }

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-template-columns: 1fr max(calc(400 * var(--rem)), 36%);

    .section-reasons-list-item-thumbnail {
      order: 2;
    }
  }
}

/* ----------------------------
 section benefit
---------------------------- */

.section-benefit-heading {
  font-size: var(--font-size-20);
  color: var(--color-tertiary);
  text-align: center;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-32);
  }
}

/* ----------------------------
 section voice
---------------------------- */

.section-voice {
  --_theme-color: var(--color-primary);

  background-color: var(--color-bg-fill);

  .has-color-theme-tertiary {
    --_theme-color: var(--color-tertiary);
  }
}

.section-voice-heading {
  text-align: center;
}

.section-voice-list {
  display: grid;
  row-gap: var(--spacer-lg);
  padding: var(--spacer) 0;
  list-style: none;
}

* + .section-voice-list {
  margin-block-start: var(--spacer-lg);
}

.section-voice-list-item {
  display: grid;
  gap: var(--spacer) var(--gutter);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-template-columns: 20% 1fr;
    align-items: center;
  }
}

.section-voice-list-item:nth-child(even) {
  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-template-columns: 1fr 20%;

    .section-voice-list-thumbnail {
      order: 2;
    }
  }
}

.section-voice-list-thumbnail {
  --_width: calc(150 * var(--rem));

  width: 100%;
  max-width: min(100%, var(--_width));
  aspect-ratio: 1;
  margin: auto;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    --_width: 100%;
  }

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

.section-voice-list-content {
  --_box-gutter: calc(20 * var(--rem));
  --_box-stroke: calc(4 * var(--rem));

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    --_box-stroke: calc(5 * var(--rem));
  }

  position: relative;
  padding: var(--spacer-sm) max(var(--gutter), calc(var(--_box-gutter) * 1.25));

  &::before,
  &::after {
    position: absolute;
    width: var(--_box-gutter);
    aspect-ratio: 1;
    content: "";
  }

  &::before {
    inset: 0 auto auto 0;
    border-block-start: var(--_box-stroke) solid var(--_theme-color);
    border-inline-start: var(--_box-stroke) solid var(--_theme-color);
  }

  &::after {
    inset: auto 0 0 auto;
    border-block-end: var(--_box-stroke) solid var(--_theme-color);
    border-inline-end: var(--_box-stroke) solid var(--_theme-color);
  }
}

.section-voice-list-heading {
  font-size: var(--font-size-20);
  text-align: center;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-32);
  }
}

/* ----------------------------
 section: activity
---------------------------- */

.section-activity-heading {
  font-size: var(--font-size-36);
  line-height: var(--leading-sm);
  color: var(--color-primary);
  text-align: center;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-56);
  }

  & > span {
    display: block;
  }
}

.section-activity-list {
  display: grid;
  gap: var(--spacer-md) var(--gutter);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--spacer-lg);
  }
}

.section-activity-list-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;

  --_box-radius: 1rem;
  background-color: var(--color-bg-fill);
  border-radius: var(--_box-radius);

  & *:first-child {
    border-top-left-radius: var(--_box-radius);
    border-top-right-radius: var(--_box-radius);
  }
}

.section-activity-list-item-title {
  display: grid;
  place-items: center;
  padding: 0.75em 1em;
  margin-block: 0;
  font-size: var(--font-size-24);
  line-height: var(--leading-sm);
  color: var(--color-base);
  text-align: center;
  background-color: var(--color-secondary);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-32);
  }
}

.section-activity-list-item-head {
  display: grid;
  gap: var(--spacer-md) var(--gutter);
  padding-block-end: var(--spacer-md);
  border-block-end: calc(2 * var(--rem)) solid var(--color-primary);

  @media (width >= 48em) {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: flex-start;
  }
}

/* .section-activity-list-item-head-content { } */

.section-activity-list-item-thumbnail {
  width: calc(150 * var(--rem));
  margin: auto;

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

.section-activity-label-list {
  display: grid;
  display: block grid;
  gap: var(--spacer-md) var(--gutter);

  & > li {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
  }

  @media (width >= 48em) {
    display: flex;
    display: block flex;
    flex-wrap: wrap;
    justify-content: center;

    & > li {
      margin-inline: initial;
    }
  }
}

.section-activity-label-list-heading {
  margin: 0 auto 0.5em;
  font-size: var(--font-size-18);
  font-weight: 500;
}

.section-activity-label-list-data {
  width: max-content;
  padding: 0.25em 0.75em;
  margin-inline: auto;
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: var(--leading-sm);
  color: var(--color-primary);
  background-color: var(--color-base);

  & > strong {
    font-size: var(--font-size-24);

    & > em {
      font-size: var(--font-size-32);
    }
  }
}

.section-activity-list-item-container {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: var(--spacer);
  padding: var(--spacer-xs) max(5%, var(--gutter)) var(--spacer);
}

.section-activity-list-item-heading {
  font-size: var(--font-size-20);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-24);
  }
}

/* ----------------------------
 section: faq
---------------------------- */

.section-faq {
  background-color: var(--color-bg-fill);
}

.section-faq-heading {
  font-size: var(--font-size-36);
  text-align: center;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-56);
  }
}

.section-faq-group {
  padding-bottom: var(--spacer-xl);
}

/* ----------------------------
 section about
---------------------------- */

.section-about {
  position: relative;
  padding-block: 0 calc(var(--spacer-lg) + var(--spacer-xl));
}

.section-about-lead {
  position: relative;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--container-max-width);
  margin-block-start: calc(-1 * var(--spacer-xl));
  margin-inline: auto;

  @media (width >= 100em) {
    max-width: var(--container-max-width-xl);
  }

  &::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    width: 100%;
    height: calc(var(--spacer-xxl) * 2.5);
    margin: auto;
    content: "";
    background-color: var(--color-base);
    box-shadow: 0px -50px 49.5px 0px rgba(59, 64, 75, 0.05);
  }
}

.section-about-lead__inner {
  position: relative;
  padding: var(--spacer-lg) 0;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    padding-block-start: var(--spacer-xl);
    padding-inline: max(7.5%, var(--gutter));
  }
}

.section-about-heading {
  padding-inline: 0.5em;
  font-size: var(--font-size-36);
  color: var(--color-primary);
  text-align: center;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-56);
  }
}

.section-about-lead-grid {
  display: grid;
  gap: var(--spacer) var(--gutter);
  padding-inline: var(--spacer);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-template-columns: 1fr 58%;
  }
}

.section-about-lead-heading {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  text-align: center;

  > span {
    display: inline-block;
    text-align: initial;
  }
}

.section-about-well {
  padding: var(--spacer-lg) var(--gutter);
  background-color: var(--color-bg-fill);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    padding-inline: max(8%, var(--gutter));
  }
}

.section-about-additional-info-heading {
  margin-block-end: 0;
  font-size: var(--font-size-24);
  color: var(--color-primary);
  text-align: center;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    font-size: var(--font-size-36);
  }

  & > span {
    display: block;
  }
}

.section-about-additional-info-lead {
  margin-block: 0.25em 0.75em;
  font-weight: 700;
  text-align: center;

  & > span {
    font-size: var(--font-size-20);

    @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
      font-size: var(--font-size-24);
    }
  }
}

.section-about-additional-info-media {
  display: grid;
  gap: var(--spacer-md) var(--gutter);
  padding-block: var(--spacer-md);

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    grid-template-columns: calc(260 * var(--rem)) 1fr;
    column-gap: 10%;
  }
}

.section-about-additional-info-media__thumbnail {
  & img {
    width: 100%;
    height: auto;
  }
}

.section-about-additional-info-media__content {
  display: block;
}

.section-about-additional-info-dl {
  & :where(dt, dd) {
    display: block;
  }

  & dd {
    padding-inline: var(--spacer-sm);
  }

  & dt + dd {
    margin-block-start: var(--spacer-xs);
  }

  & dd + dt {
    margin-block-start: var(--spacer);
  }
}

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

.footer {
  position: relative;
  z-index: 10;
  background-color: var(--color-base);
  border-radius: var(--spacer-lg);
  box-shadow: var(--shadow-lg);
}

.footer-container {
  position: relative;
  width: 100%;
  max-width: calc(
    var(--container-max-width-lg) -
      (var(--safe-left, 0px) + var(--safe-right, 0px))
  );
  padding: var(--spacer-md) var(--gutter) var(--spacer-lg);
  margin-inline: auto;

  @media (width >= 48em) and (orientation: landscape), (width >= 62em) {
    display: flex;
    justify-content: space-between;
    padding-block: var(--spacer-xl);
  }
}

.footer-logo-brand {
  position: relative;
  display: block;
  width: calc(175 * var(--rem));
  aspect-ratio: 175/45;
  margin: var(--spacer) auto var(--spacer-lg);

  @media (width >= 48em) {
    margin-inline: 0 auto;
  }

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.footer-address {
  display: block;
}

.footer-address-heading {
  font-size: var(--font-size-16);
  font-weight: 700;
  border-block-end: max(2px, calc(2 * var(--rem))) solid
    var(--color-stroke-lighten);
}

.footer-address-info {
  font-size: var(--font-size-14);
}

.footer-nav {
  display: grid;
  row-gap: 0.25em;
  align-items: flex-start;
  padding: var(--spacer) 0;
  list-style: none;

  @media (width >= 48em) {
    row-gap: 0.75em;
  }

  & li {
    display: block;
  }

  & a {
    display: grid;
    grid-template-columns: 1em 1fr;
    column-gap: 0.25em;
    font-size: var(--font-size-12);
    -webkit-text-decoration: none;
    text-decoration: none;

    &::before {
      display: block;
      content: "";
      background-color: currentColor;
      -webkit-mask: var(--ico-arrow-right) no-repeat center / 0.5em;
      mask: var(--ico-arrow-right) no-repeat center / 0.5em;
    }

    &:focus-visible {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

    @media (any-hover: hover) {
      &:hover {
        -webkit-text-decoration: underline;
        text-decoration: underline;
      }
    }
  }
}

.copyright {
  padding: var(--spacer);
  padding-block-end: calc(var(--spacer) + var(--cta-sticky-height, 0px));
  margin-block-end: 0;
  font-family: var(--font-family-sans-serif-en);
  font-size: var(--font-size-12);
  font-weight: 700;
  color: var(--color-base);
  text-align: center;
  background-color: var(--color-primary);
}

/*--ABテスト用（202503／鰐渕）-------------------------------------------------------------------------------------------------------------*/
header.header{
  position: relative;
  .header-cta{
    position: absolute;
    inset: 0 0 0 auto;
    font-size: 0;

    a{
      position: relative;
      line-height: 1;
      font-size: 1rem;
      display: inline-block;
      text-decoration: none;
      transition: .3s;
      color: var(--color-base);
      font-weight: 700;
      height: 100%;
      background: var(--ico-circle-arrow-right) no-repeat right .5em center / auto 30%;
      br{
        display: none;
      }
      &.monthly{
        width: 15rem;
        background-color: var(--color-primary);
      }
      &.onetime{
        width: 13rem;
        background-color: #fcac4e;
      }
      &:hover{
        background-color: var(--color-primary-hover);
      }
      span{
        position: absolute;
        box-sizing: border-box;
        padding: 0 2em;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
      }
    }
  }
}

section#mv{
  background-color: #101010;
  text-align: center;
  font-size: 0;
  div{
    position: relative;
    a{
      display: inline-block;
      position: absolute;
      img{
        width: 100%;
      }
    }
  }
}

/*PCのみ*/
@media (width >= 48em){
  section#mv{
    div{
      display: inline-block;
      img.mv_sp{
        display: none;
      }
      a{
        width: 41.5%;
        bottom: 10%;
        left: 3%;
        background-color: var(--color-base);
        img{
          transition: .3s;
        }
        &:hover{
          img{
            opacity: .75;
          }
        }
      }
    }
  }
}
/*モバイル*/
@media (width <= 48em){
  header.header{
    position: relative;
    .header-cta{
      a{
        font-size: 3vw;
        background-size: auto 25%;
        line-height: 1.5;
        span{
          padding: 0 1em;
        }
        br{
          display: inline;
        }
        &.monthly{
          width: 26vw;
        }
        &.onetime{
          width: 24vw;
        }
      }
    }
  }

  section#mv{
    div{
      img.mv_pc{
        display:none;
      }
      img.mv_sp{
        display: block;
        width: 100%;
      }
      a{
        width: 90%;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.donate-goodgiving {
  display: grid;
  padding: var(--spacer);
  background-color: #fff;
  box-shadow: var(--shadow-lg);
  margin-top: var(--spacer);
  .wrap-media {
    text-align: center;
    line-height: 1;
    /*埋め込みタグから吐き出されるdiv*/
    > div{
      margin: auto;
      width: 50% !important;
    }
  }
  @media (width >= 48em) {
    grid-template-columns: 150px 1fr;
    gap: var(--spacer);
    .wrap-media {
      > div{
        width: 100% !important;
      }
    }
    .wrap-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      p{
        font-size:  var(--font-size-14);
      }
    }
  }
}