@charset "UTF-8";

html {
  min-width: 320px;
  font-size: calc(10 / 375 * 100vw);
  overflow: auto;
  scroll-padding-top: 7.4em;
}
@media screen and (min-width: 768px) {
  html {
    font-size: calc(10 / 1920 * 100vw * var(--zoom-ratio, 1));
    scroll-padding-top: 13.2em;
  }
}
html:not(.nosmooth) {
  scroll-behavior: smooth;
}
body {
  padding: 0 1.75rem;
  font-family: Roboto, Arial, "Noto Sans JP", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.6rem;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  color: rgb(26, 26, 26);
  background-color: rgb(255, 255, 255);
  overflow-x: clip;
}
:lang(hi) {
  font-family: Roboto, Arial, "Noto Sans", sans-serif;
}
@media screen and (min-width: 768px) {
  body {
    padding: 0;
  }
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: rgb(255, 255, 255);
  translate: -100% 0;
  opacity: 0;
}
:root:not(.loaded) body::before {
  translate: none;
  opacity: 1;
}
:root.loaded body::before {
  transition:
    0.8s opacity ease-out,
    0s translate linear 0.8s;
}
#wrapper {
  margin: 0 auto;
  max-width: 180rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
section p {
  font-feature-settings: "palt";
}
:lang(ja) section p {
  text-align: justify;
}
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
img,
svg,
video,
object,
canvas {
  max-width: 100%;
  height: auto;
}
img,
svg {
  vertical-align: middle;
}
svg {
  fill: currentColor;
}
label[for] {
  cursor: pointer;
}
a {
  text-decoration: none;
  color: inherit;
}
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
a,
button:not(:disabled) {
  transition: opacity 0.2s ease-out;
}
a:hover,
button:not(:disabled):hover {
  opacity: 0.75;
}
br.pc {
  display: none;
}
@media screen and (min-width: 768px) {
  br.pc {
    display: inline;
  }
  br.sp {
    display: none;
  }
}

/* header */
#wrapper > header {
  padding: 0 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 7.4rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  #wrapper > header {
    padding: 0 6rem 0 4.7rem;
    min-height: 13.2rem;
  }
}
#wrapper > header h1 {
  margin: 0;
}
#wrapper > header .logo {
  width: 17.5rem;
}
@media screen and (min-width: 768px) {
  #wrapper > header .logo {
    width: 28.2rem;
  }
}
#wrapper > header .logo a {
  display: block;
  pointer-events: auto;
}
#wrapper > header .logo img {
  width: 100%;
}
#drawer:checked + header .logo img,
#drawer:not(:checked) + header.wh > .logo img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
#drawer:not(:checked) + header:not(.wh) .logo img {
  transition: 0.6s -webkit-filter ease-in-out;
  transition: 0.6s filter ease-in-out;
  transition:
    0.6s filter ease-in-out,
    0.6s -webkit-filter ease-in-out;
}

/*  globalnav  */
/* drawer + header label */
#drawer {
  display: none;
}
#wrapper > header label {
  width: 8.2rem;
  height: 3.7rem;
  border-radius: 6px;
  position: relative;
  line-height: 1;
  text-align: center;
  background-color: rgb(0, 0, 0, 0.8);
  pointer-events: auto;
  cursor: pointer;
}
#drawer:checked + header label {
  border-radius: 0 6px 6px 0;
  background-color: transparent;
}
@media screen and (min-width: 768px) {
  #wrapper > header label {
    order: 10;
    width: 12.6rem;
    height: 6rem;
    transition: 0.2s background-color ease-out;
  }
  #drawer:not(:checked) + header label {
    border-radius: 0 6px 6px 0;
  }
  #drawer:not(:checked) + header label:hover {
    background-color: rgb(0, 0, 0, 0.6);
  }
}
#wrapper > header label span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
}
#wrapper > header label span::before {
  content: "";
  display: inline-block;
  width: 100%;
}
#wrapper > header label::before,
#wrapper > header label::after,
#wrapper > header label span::after {
  content: "";
  margin: auto;
  display: inline-block;
  width: 3.75rem;
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(183, 28, 43);
}
@media screen and (min-width: 768px) {
  #wrapper > header label::before,
  #wrapper > header label::after,
  #wrapper > header label span::after {
    width: 7rem;
    height: 2px;
  }
}
#wrapper > header label::before {
  translate: 0 -0.4rem;
}
#wrapper > header label::after {
  translate: 0 0.4rem;
}
@media screen and (min-width: 768px) {
  #wrapper > header label::before {
    translate: 0 -0.8rem;
  }
  #wrapper > header label::after {
    translate: 0 0.8rem;
  }
}
#drawer:not(:checked) + header label::before,
#drawer:not(:checked) + header label::after,
#drawer:not(:checked) + header label span::after {
  transform-origin: 0% 50%;
}
#drawer:not(:checked) + header label::before,
#drawer:not(:checked) + header label::after {
  transition:
    0.2s rotate linear,
    0s transform-origin linear 0.2s,
    0.2s background-color linear 0.2s,
    0.2s translate linear 0.2s,
    0.2s scale ease-out 0.4s;
}
#drawer:not(:checked) + header label::after {
  scale: calc(57 / 70 * 100%) 1;
}
#drawer:not(:checked) + header label span::after {
  scale: calc(52 / 70 * 100%) 1;
  transition:
    0s width linear 0.2s,
    0.2s scale ease-out 0.4s;
}
@media screen and (min-width: 768px) {
  #drawer:not(:checked) + header label:hover::after,
  #drawer:not(:checked) + header label:hover span::after {
    scale: 1 1;
  }
}
#drawer:checked + header label::before,
#drawer:checked + header label::after,
#drawer:checked + header label span::after {
  scale: 1 1;
  transform-origin: 50% 50%;
}
#drawer:checked + header label::before,
#drawer:checked + header label::after {
  background-color: rgb(255, 255, 255);
  translate: none;
  transition:
    0.2s opacity ease-out,
    0.2s scale linear,
    0.2s translate linear 0.2s,
    0s transform-origin linear 0.4s,
    0.2s background-color linear 0.4s,
    0.2s rotate ease-out 0.4s;
}
@media screen and (min-width: 768px) {
  #drawer:checked + header label:hover::before,
  #drawer:checked + header label:hover::after {
    opacity: 0.75;
  }
}
#drawer:checked + header label::before {
  rotate: -16.3deg;
}
#drawer:checked + header label::after {
  rotate: 16.3deg;
}
#drawer:checked + header label span::after {
  width: 0;
  transition:
    0.2s scale linear,
    0s transform-origin linear 0.2s,
    0s width linear 0.4s;
}

/* actionnav & globalnav */
#actionnav a,
#globalnav a {
  pointer-events: auto;
}
#actionnav a:not([href]),
#actionnav a[href=""],
#globalnav a:not([href]),
#globalnav a[href=""] {
  pointer-events: none;
}
#actionnav a[target="_blank"]::after,
#globalnav .contents a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 1.8rem;
  height: 1.3rem;
  background: url(../images/ico_extarnal.svg) no-repeat 50% 50% / contain;
}

/* actionnav */
@media screen and (max-width: 767px) {
  /* sp only */
  #actionnav {
    margin-left: auto;
  }
  #actionnav > ul > li:not(.lang) {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  #actionnav {
    margin-left: auto;
    position: relative;
    z-index: -10;
  }
  #actionnav > ul {
    display: flex;
    align-items: center;
  }
  #actionnav li.store {
    padding-right: 1.6rem;
    /* min-width: 12.2rem; */
    min-width: 14.7rem;
  }
  #actionnav > ul > li:nth-last-of-type(-n + 2) {
    position: relative;
    z-index: 0;
  }
  #actionnav > ul > li:nth-last-of-type(-n + 2)::before,
  #actionnav > ul > li:nth-last-of-type(-n + 2)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 3.4rem;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
    background-color: rgb(102, 102, 102);
  }
  #actionnav > ul > li:nth-last-of-type(-n + 2)::before {
    left: -1px;
  }
  #actionnav > ul > li:nth-last-of-type(-n + 2)::after {
    right: 0;
  }
  #actionnav > ul > li > a {
    padding: 0.15em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 6rem;
    box-sizing: border-box;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: calc(0.5 / 14 * 1em);
    text-indent: calc(0.5 / 14 * 1em);
    text-align: center;
    color: rgb(255, 255, 255);
  }
  #actionnav .store a {
    /* max-width: 12.2rem; */
    max-width: 14.7rem;
    border-radius: 6px;
    position: relative;
    background-color: rgb(183, 28, 43, 0.8);
  }
  #actionnav > ul > li:not(.store) > a {
    padding: 0 2.1rem;
    white-space: nowrap;
    background-color: rgb(0, 0, 0, 0.8);
  }
  #actionnav .store + li > a {
    border-radius: 6px 0 0 6px;
  }
  #actionnav .store a::after {
    width: 0.9rem;
    height: 0.65rem;
    position: absolute;
    top: 1.4rem;
    right: 1rem;
  }
}

/* actionnav lang  */
@media screen and (max-width: 767px) {
  /* sp only */
  #actionnav .lang {
    display: flex;
    align-items: center;
  }
  #actionnav .lang > a {
    display: inline-block;
    width: 5rem;
    height: 3.7rem;
    white-space: nowrap;
    overflow: hidden;
  }
  #actionnav .lang > a::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    background: url(../images/ico_lang.svg) no-repeat 50% 50% / 2.5rem 2.5rem;
    -webkit-filter: brightness(0);
    filter: brightness(0);
  }
  #drawer:checked + header:not(.wh) #actionnav .lang > a::before,
  header.wh #actionnav .lang > a::before {
    -webkit-filter: none;
    filter: none;
  }
  header:not(.wh) #actionnav .lang > a::before {
    transition: 0.6s -webkit-filter ease-in-out;
    transition: 0.6s filter ease-in-out;
    transition:
      0.6s filter ease-in-out,
      0.6s -webkit-filter ease-in-out;
  }
}
#actionnav .lang {
  position: relative;
}
@media screen and (min-width: 768px) {
  #actionnav .lang {
    min-width: 13.2rem;
  }
  #actionnav .lang > a::after {
    content: "";
    margin-left: 0.5em;
    display: inline-block;
    vertical-align: middle;
    width: 1.1rem;
    height: 0.7rem;
    background: url(../images/ico_arrow8.svg) no-repeat 50% 50% / contain;
  }
}
#actionnav .lang ul {
  padding: 0.55em 0;
  margin: auto;
  border-radius: 6px;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 1.2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.7rem;
  background-color: rgb(122, 122, 122, 0.9);
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
@media screen and (min-width: 768px) {
  #actionnav .lang ul {
    top: calc(100% - 1.5rem);
    left: 0;
    right: 0;
    font-size: 1.4rem;
  }
}
#actionnav .lang ul:not(.visible) {
  visibility: hidden;
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
  transition:
    0s visibility linear 0.4s,
    0.4s -webkit-clip-path ease-out;
  transition:
    0.4s clip-path ease-out,
    0s visibility linear 0.4s;
  transition:
    0.4s clip-path ease-out,
    0s visibility linear 0.4s,
    0.4s -webkit-clip-path ease-out;
}
#actionnav .lang ul.visible {
  transition: 0.4s -webkit-clip-path ease-out;
  transition: 0.4s clip-path ease-out;
  transition:
    0.4s clip-path ease-out,
    0.4s -webkit-clip-path ease-out;
}
#actionnav .lang li a {
  padding: 0.15em 1.15em;
  display: flex;
  align-items: center;
  min-height: 2.1em;
  box-sizing: border-box;
  font-size: inherit;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: calc(0.5 / 14 * 1em);
  color: rgb(255, 255, 255);
  white-space: nowrap;
}
#actionnav .lang li a[data-stt-active] {
}
#actionnav .lang:has(ul[data-stt-disabled]) > a {
  cursor: not-allowed;
}
#actionnav .lang ul[data-stt-disabled] a[data-stt-changelang] {
  opacity: 0.75;
  text-decoration: line-through;
  pointer-events: none;
}

/* globalnav */
#globalnav {
  padding: 7.4rem 1.75rem 0 1.75rem;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10;
  overflow: auto;
  pointer-events: auto;
  color: rgb(255, 255, 255);
  background-color: rgb(51, 51, 51, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}
@media screen and (min-width: 768px) {
  #globalnav {
    padding: 13.2rem 0;
    align-items: center;
    justify-content: center;
  }
}
#drawer:not(:checked) + header #globalnav {
  opacity: 0;
  translate: -100% 0;
  transition:
    0.4s opacity ease-out 0.2s,
    0s translate linear 0.6s;
}
#drawer:checked + header #globalnav {
  transition: 0.4s opacity ease-out;
}
#globalnav a {
  display: block;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  transform: translateZ(0);
}
#drawer:not(:checked) + header #globalnav a {
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  translate: 0 25%;
  transition:
    0s translate linear 0.6s,
    0s -webkit-clip-path linear 0.6s;
  transition:
    0s clip-path linear 0.6s,
    0s translate linear 0.6s;
  transition:
    0s clip-path linear 0.6s,
    0s translate linear 0.6s,
    0s -webkit-clip-path linear 0.6s;
}
#drawer:checked + header #globalnav a {
  transition:
    0.2s opacity ease-out,
    0.2s color ease-out,
    0.2s translate ease-out 0.4s,
    0.2s -webkit-clip-path ease-in-out 0.4s;
  transition:
    0.2s opacity ease-out,
    0.2s color ease-out,
    0.2s clip-path ease-in-out 0.4s,
    0.2s translate ease-out 0.4s;
  transition:
    0.2s opacity ease-out,
    0.2s color ease-out,
    0.2s clip-path ease-in-out 0.4s,
    0.2s translate ease-out 0.4s,
    0.2s -webkit-clip-path ease-in-out 0.4s;
}
#globalnav .contents a:hover {
  color: rgb(184, 28, 43);
  opacity: 1;
}
#globalnav .sns a:hover {
  opacity: 0.75;
}

/* globalnav .contents */
#globalnav .contents {
  padding: 0.9rem 0;
}
@media screen and (min-width: 768px) {
  #globalnav .contents {
    padding: 0;
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 14.2rem;
    column-gap: 14.2rem;
    min-width: 139.8rem;
  }
  #globalnav .contents > li {
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    display: flex;
    align-items: flex-start;
  }
  #globalnav .contents > li > div {
    flex-basis: 31.4rem;
    flex-shrink: 0;
  }
  #globalnav .contents > li > ul {
    flex-grow: 1;
  }
}
#globalnav .contents > li {
  padding: 0.5em 0;
  font-size: 1.8rem;
  line-height: 1.25;
}
@media screen and (min-width: 768px) {
  #globalnav .contents > li {
    padding: 2.2rem 0;
    font-size: 2.4rem;
    line-height: 1.4;
  }
  #globalnav .contents > li:last-child {
    margin-top: calc(4.4rem * 3);
  }
}
#globalnav .contents > li > div {
  padding: 0.3rem 0;
}
@media screen and (min-width: 768px) {
  #globalnav .contents > li > div {
    padding: 0;
  }
}
#globalnav .contents > li > div > a {
  padding: 0.125em 0;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: calc(0.96 / 24 * 1em);
}
@media screen and (min-width: 768px) {
  #globalnav .contents > li > div > a {
    padding: 0.20833333em 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
#globalnav .contents > .contact > div > a {
  padding: 0;
  font-size: 2.7rem;
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media screen and (min-width: 768px) {
  #globalnav .contents > .contact > div > a {
    padding: 0;
    font-size: 4rem;
    text-underline-offset: 4px;
  }
}
#globalnav .contents > .store > div > a {
  padding: 0.52031rem 0;
  font-size: 1.7rem;
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
@media screen and (min-width: 768px) {
  #globalnav .contents > .store > div > a {
    padding: 0.52031rem 0;
    font-size: 2.1rem;
    line-height: 1.6;
  }
}
#globalnav .contents > .store > div > a::after {
  margin-left: 0.1em;
  vertical-align: top;
}
#globalnav .contents > .store > div > a:hover {
  transition: 0.2s -webkit-filter ease-out;
  transition: 0.2s filter ease-out;
  transition:
    0.2s filter ease-out,
    0.2s -webkit-filter ease-out;
}
#globalnav .contents > .store div > a:hover::after {
  -webkit-filter: invert(17%) sepia(89%) saturate(4505%) hue-rotate(330deg) brightness(65%) contrast(130%);
  filter: invert(17%) sepia(89%) saturate(4505%) hue-rotate(330deg) brightness(65%) contrast(130%);
}

/* :has(img) */
#globalnav .contents > li > div > a:has(img) {
  padding: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}
#globalnav .contents > li > div > a .image {
  padding: 0.65rem 0;
  display: inline-block;
  vertical-align: top;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 1.4rem;
  box-sizing: content-box;
}
@media screen and (min-width: 768px) {
  #globalnav .contents > li > div > a .image {
    padding: 1.3rem 0;
    height: 1.8rem;
  }
}
#globalnav .contents > .contact > div > a .image {
  padding: 0.3rem 0 calc(0.3rem - 2px) 0;
  height: 2.1rem;
  border-bottom: 2px solid currentColor;
}
@media screen and (min-width: 768px) {
  #globalnav .contents > .contact > div > a .image {
    padding: 0.75rem 0 calc(0.75rem - 2px) 0;
    height: 2.9rem;
    border-bottom-width: 2px;
  }
}
#globalnav .contents > li > div > a .image img {
  width: auto;
  max-width: none;
  height: 100%;
  vertical-align: top;
  transition: 0.2s -webkit-filter ease-out;
  transition: 0.2s filter ease-out;
  transition:
    0.2s filter ease-out,
    0.2s -webkit-filter ease-out;
}
#globalnav .contents > li > div > a:not(:hover) .image img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/* li ul */
#globalnav .contents li ul {
  padding-left: 5.5rem;
}
@media screen and (min-width: 768px) {
  #globalnav .contents li ul {
    padding-left: 0;
  }
}
#globalnav .contents li li {
  padding: 0.2em 0;
  font-size: 1.5rem;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  #globalnav .contents li li {
    padding: 0;
    font-size: 2rem;
    line-height: 1.6;
  }
}
#globalnav .contents li li a {
  padding: 0.2em 0;
  display: flex;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: inherit;
  font-weight: normal;
  line-height: inherit;
  letter-spacing: 0.075em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}
@media screen and (min-width: 768px) {
  #globalnav .contents li li a {
    padding: 0.3em 0;
    text-underline-offset: 2px;
  }
}
#globalnav .contents li li a[href$="/ja/about/#purpose"] {
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
#globalnav .contents li li a::before {
  content: "";
  margin-right: calc(14 / 20 * 1em);
  display: inline-block;
  width: calc(5 / 20 * 1em);
  height: 1px;
  background-color: currentColor;
}
@media screen and (min-width: 768px) {
  #globalnav .contents li li a::before {
    height: 2px;
  }
}

/* globalnav footer */
#globalnav .footer {
  padding: 2.4rem 0;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  #globalnav .footer {
    padding: 2.4rem 9rem;
    min-height: 13.2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
#globalnav .footer .sns {
  padding: 2.4rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  #globalnav .footer .sns {
    padding: 0;
    margin-left: auto;
    justify-content: flex-start;
    -moz-column-gap: 3.6rem;
    column-gap: 3.6rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
#globalnav .footer .sns a {
  display: block;
}
#globalnav .footer .sns a[href*="//www.youtube.com/"] {
  width: 8.1rem;
}
#globalnav .footer .sns a[href*="//www.linkedin.com/"] {
  width: 8.4rem;
}
#globalnav .footer .sns a[href*="//www.instagram.com/"] {
  width: 2.2rem;
}
#globalnav .footer .sns a[href*="//www.tiktok.com/"] {
  width: 7.5rem;
}
@media screen and (min-width: 768px) {
  #globalnav .footer .sns a[href*="//www.youtube.com/"] {
    width: 11.2rem;
  }
  #globalnav .footer .sns a[href*="//www.linkedin.com/"] {
    width: 11.6rem;
  }
  #globalnav .footer .sns a[href*="//www.instagram.com/"] {
    width: 3rem;
  }
  #globalnav .footer .sns a[href*="//www.tiktok.com/"] {
    width: 10.3rem;
  }
}
#globalnav .footer .sns a img {
  width: 100%;
}
#globalnav .footer small {
  padding: 2.4rem 0;
  display: block;
  border-top: 1px solid rgb(255, 255, 255, 0.5);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: calc(0.96 / 12 * 1em);
}
@media screen and (min-width: 768px) {
  #globalnav .footer small {
    padding: 0;
    border-top: none;
    font-size: 1.2rem;
  }
}
#globalnav .footer small .image {
  display: inline-block;
  vertical-align: top;
  width: calc(26.2rem * 10 / 12);
}
@media screen and (min-width: 768px) {
  #globalnav .footer small .image {
    width: 26.2rem;
  }
}
#globalnav .footer small .image img {
  width: 100%;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/*  main  */
#wrapper > main {
}

/*  aside  */
#contact {
  padding: 3.8rem calc(50vw - 50%) 0 calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
  position: relative;
  z-index: 0;
  color: rgb(255, 255, 255);
  background-color: rgb(51, 51, 51);
}
@media screen and (min-width: 768px) {
  #contact {
    padding: 1.2rem 0 1.2rem calc(50vw - 50%);
    display: flex;
    align-items: center;
    -moz-column-gap: 6.8rem;
    column-gap: 6.8rem;
    position: static;
    z-index: auto;
  }
}
#contact h2 {
  padding: 1.4rem 0;
  margin: 0;
  width: 22rem;
}
@media screen and (min-width: 768px) {
  #contact h2 {
    padding: 0;
    margin: 0;
    width: 53.6rem;
  }
}
#contact h2 img {
  width: 100%;
}
#contact .desc {
  padding: 0.28em 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.56;
}
@media screen and (min-width: 768px) {
  #contact .desc {
    padding: 0.34em 0;
    max-width: 67.8rem;
    font-size: 2.7rem;
    line-height: 1.68;
  }
}
#contact .desc p {
  margin: 0;
  letter-spacing: calc(1.89 / 27 * 1em);
}
#contact .desc a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
#contact .button {
  margin-top: -7rem;
  position: relative;
  z-index: -10;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  #contact .button {
    margin-top: 0;
    margin-left: auto;
    position: static;
    z-index: auto;
  }
}
#contact .button a {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18.8rem;
  height: 18.8rem;
  border: solid 2px;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: calc(0.84 / 21 * 1em);
  color: rgb(183, 28, 43);
  pointer-events: auto;
  translate: 3.2rem 2.3rem;
  transition:
    0.2s scale ease-out,
    0.2s -webkit-backdrop-filter ease-out;
  transition:
    0.2s backdrop-filter ease-out,
    0.2s scale ease-out;
  transition:
    0.2s backdrop-filter ease-out,
    0.2s scale ease-out,
    0.2s -webkit-backdrop-filter ease-out;
}
@media screen and (min-width: 768px) {
  #contact .button a {
    margin-left: 0;
    width: 35.4rem;
    height: 35.4rem;
    border-width: 3px;
    font-size: 2.1rem;
    translate: 5rem 7.3rem;
  }
}
#contact .desc:has(a:hover) + .button a,
#contact .button a:hover {
  opacity: 1;
  -webkit-backdrop-filter: invert(0.1);
  backdrop-filter: invert(0.1);
  scale: 1.1;
}
#contact .button a::before {
  content: "";
  margin-right: 0.6rem;
  display: inline-block;
  width: 0.72rem;
  height: 1.2rem;
  background: url(../images/ico_arrow2.svg) no-repeat 50% 50% / contain;
}
@media screen and (min-width: 768px) {
  #contact .button a::before {
    margin-right: 0.8rem;
    width: 1.2rem;
    height: 2rem;
  }
}
#contact .button a .image {
  display: inline-block;
  vertical-align: top;
  width: calc(13.5rem * 14 / 21);
  font-size: 1rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  #contact .button a .image {
    width: 13.5rem;
  }
}
#contact .button a .image img {
  width: 100%;
}

/*  footer  */
#wrapper > footer {
  padding: 2.4rem calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
  display: grid;
  grid-template-columns: 18rem 1fr;
  grid-template-rows: auto auto auto auto;
  row-gap: 1.6rem;
  -moz-column-gap: 2.2rem;
  column-gap: 2.2rem;
  background-color: rgb(239, 242, 242, 0.4);
}
#wrapper > footer > .logo {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#wrapper > footer > .tagline {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#wrapper > footer > .addr {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}
#wrapper > footer > .sns {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
#wrapper > footer > small {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
}
@media screen and (min-width: 768px) {
  #wrapper > footer {
    padding-top: 9rem;
    padding-bottom: 9rem;
    grid-template-columns: 64rem 1fr;
    grid-template-rows: 5.1rem auto 1fr auto;
    row-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
  }
  #wrapper > footer > .logo {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  #wrapper > footer > .tagline {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
  #wrapper > footer > .addr {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  #wrapper > footer > .sitemap {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
  }
  #wrapper > footer > .sns {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  #wrapper > footer > small {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }
}
#wrapper > footer .logo {
  margin: auto 0;
}
@media screen and (min-width: 768px) {
  #wrapper > footer .logo {
    margin: 0;
  }
}
#wrapper > footer .logo a {
  display: block;
  width: 18rem;
}
@media screen and (min-width: 768px) {
  #wrapper > footer .logo a {
    width: 28rem;
  }
}
#wrapper > footer .tagline {
  padding: 0.23em 0;
  font-size: 1.3rem;
  line-height: 1.46;
}
@media screen and (min-width: 768px) {
  #wrapper > footer .tagline {
    padding-top: 4.4rem;
    display: flex;
    align-items: center;
    font-size: 2.5rem;
  }
  #wrapper > footer .tagline::before {
    content: "";
    margin-right: 1em;
    display: inline-block;
    width: 31.5rem;
    height: 1px;
    background-color: currentColor;
  }
  html[lang="de"] #wrapper > footer .tagline::before {
    width: 26rem;
  }
}
#wrapper > footer .tagline p {
  margin: 0 auto;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgb(0, 0, 0);
}
@media screen and (min-width: 768px) {
  #wrapper > footer .tagline p {
    margin: 0;
  }
}
#wrapper > footer .addr {
  margin: 0;
}
@media screen and (min-width: 768px) {
  #wrapper > footer .addr {
    padding: 5.6rem 2.4rem 0 0;
  }
}
#wrapper > footer .addr dt,
#wrapper > footer .addr dd {
  font-size: 1.3rem;
  line-height: 1.8;
  letter-spacing: calc(1 / 13 * 1em);
}
@media screen and (min-width: 768px) {
  #wrapper > footer .addr dt,
  #wrapper > footer .addr dd {
    padding: 0.25em 0;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: calc(0.64 / 16 * 1em);
  }
}
#wrapper > footer .addr dt {
  font-weight: 500;
}
#wrapper > footer .addr dd {
  margin: 0;
}
#wrapper > footer .sitemap {
  display: none;
}
@media screen and (min-width: 768px) {
  #wrapper > footer .sitemap {
    display: block;
  }
  #wrapper > footer .sitemap > ul {
    margin-top: -0.7rem;
    margin-left: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -moz-column-count: 4;
    column-count: 4;
    -moz-column-gap: 5.6rem;
    column-gap: 5.6rem;
  }
  #wrapper > footer .sitemap > ul > li {
    padding-bottom: 3.2rem;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
  }
  #wrapper > footer .sitemap > ul > li > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-height: 3.2rem;
    box-sizing: border-box;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: calc(0.72 / 18 * 1em);
    color: rgb(184, 28, 43);
  }
  #wrapper > footer .sitemap > ul > li > a img {
    vertical-align: top;
    width: auto;
    max-width: none;
    height: 1.3rem;
  }
  #wrapper > footer .sitemap li li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 3.2rem;
    box-sizing: border-box;
  }
  #wrapper > footer .sitemap li li a {
    padding: 0.15em 0;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 1.6rem;
    line-height: 1.3;
    letter-spacing: calc(0.64 / 16 * 1em);
  }
  #wrapper > footer .sitemap li li a[href$="#purpose"] {
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
  }
}
#wrapper > footer .sns {
  padding: 3.6rem 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  #wrapper > footer .sns {
    padding: 0 2.4rem 0 0;
    justify-content: flex-start;
    -moz-column-gap: 3.2rem;
    column-gap: 3.2rem;
  }
}
#wrapper > footer .sns a {
  display: block;
}
#wrapper > footer .sns li:has(a[href*="//www.youtube.com/"]) a {
  width: 7.5rem;
}
#wrapper > footer .sns li:has(a[href*="//www.linkedin.com/"]) a {
  width: 7.7rem;
}
#wrapper > footer .sns li:has(a[href*="//www.instagram.com/"]) a {
  width: 2rem;
}
#wrapper > footer .sns li:has(a[href*="//www.tiktok.com/"]) a {
  width: 6.9rem;
}
@media screen and (min-width: 768px) {
  #wrapper > footer .sns li:has(a[href*="//www.youtube.com/"]) a {
    width: 10.3rem;
  }
  #wrapper > footer .sns li:has(a[href*="//www.linkedin.com/"]) a {
    width: 10.6rem;
  }
  #wrapper > footer .sns li:has(a[href*="//www.instagram.com/"]) a {
    width: 2.7rem;
  }
  #wrapper > footer .sns li:has(a[href*="//www.tiktok.com/"]) a {
    width: 9.4rem;
  }
}
#wrapper > footer .sns a img {
  width: 100%;
}
#wrapper > footer small {
  padding: 2.4rem 0;
  display: block;
  border-top: 1px solid rgb(0, 0, 0, 0.5);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: calc(0.96 / 12 * 1em);
}
@media screen and (min-width: 768px) {
  #wrapper > footer small {
    padding: 0;
    margin-top: auto;
    border-top: none;
    font-size: 1.2rem;
  }
}
#wrapper > footer small .image {
  display: inline-block;
  vertical-align: top;
  width: calc(26.2rem * 10 / 12);
}
@media screen and (min-width: 768px) {
  #wrapper > footer small .image {
    width: 26.2rem;
  }
}
#wrapper > footer small .image img {
  width: 100%;
}

/* components */

/* .cmp_header */
.cmp_header {
  padding: 7.4rem calc(50vw - 50%) 0 calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .cmp_header {
    padding-top: 13.2rem;
    background-image: linear-gradient(to top, rgb(255, 255, 255) 0%, rgb(255, 255, 255, 0) 100%),
      radial-gradient(circle at 20% 36.8rem, rgb(255, 255, 255, 0.7) 12%, rgb(241, 241, 241, 0.7) 45%);
    background-repeat: no-repeat, no-repeat;
    background-position: 50% 76rem, 50% 0;
    background-size: 100% 43rem, 100% 119rem;
  }
}
.cmp_header h1 {
  margin: 0;
  margin: 3.3rem 0 0 0;
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  font-size: 4rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 768px) {
  .cmp_header h1 {
    padding: 6.8rem 10rem;
    margin-top: 7.2rem;
    font-size: 10rem;
  }
}
.cmp_header h1 span {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
:root:not(.loaded) .cmp_header h1 span {
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  translate: 0 25%;
}
:root.loaded .cmp_header h1 span {
  transition:
    0.8s translate ease-out,
    0.8s -webkit-clip-path ease-in-out;
  transition:
    0.8s clip-path ease-in-out,
    0.8s translate ease-out;
  transition:
    0.8s clip-path ease-in-out,
    0.8s translate ease-out,
    0.8s -webkit-clip-path ease-in-out;
}
:root.loaded .cmp_header h1 .ttl {
  transition-delay: 0s;
}
:root.loaded .cmp_header h1 .dsc {
  transition-delay: 0.2s;
}
.cmp_header h1 .ttl:has(img),
.cmp_header h1:not(:has(.ttl)):has(img) {
  --width-img: fit-content;
  --width-img-sp: calc(var(--width-img) * 155 / 390);
  display: block;
  width: var(--width-img-sp);
  font-size: 1rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .cmp_header h1 .ttl:has(img),
  .cmp_header h1:not(:has(.ttl)):has(img) {
    width: var(--width-img);
  }
}
.cmp_header h1 .ttl img {
  width: 100%;
  vertical-align: top;
}
.cmp_header h1 .dsc {
  padding: 0.3em 0;
  margin-bottom: 1em;
  order: -10;
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .cmp_header h1 .dsc {
    font-size: 2.2rem;
  }
}
.cmp_header h1 .dsc::after {
  content: "";
  margin-top: 0.6rem;
  display: inline-block;
  width: 1.5rem;
  height: 3px;
  background-color: rgb(183, 28, 43);
}
@media screen and (min-width: 768px) {
  .cmp_header h1 .dsc::after {
    margin-top: 1.8rem;
    width: 3rem;
    height: 5px;
  }
}
.cmp_header .photo {
  aspect-ratio: 1800 / 924;
}
.cmp_header .photo img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  -o-object-fit: cover;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .cmp_header .photo img {
    border-radius: 10px;
  }
}

/* cmp_reveal.clipup */
.cmp_reveal.clipup:not(.inner),
.cmp_reveal.clipup.inner > * {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.cmp_reveal.clipup:not(.inner).outside,
.cmp_reveal.clipup.inner.outside > * {
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  translate: 0 25%;
}
.cmp_reveal.clipup:not(.inner):not(.outside),
.cmp_reveal.clipup.inner:not(.outside) > * {
  transition:
    0.8s translate ease-out,
    0.8s -webkit-clip-path ease-in-out;
  transition:
    0.8s clip-path ease-in-out,
    0.8s translate ease-out;
  transition:
    0.8s clip-path ease-in-out,
    0.8s translate ease-out,
    0.8s -webkit-clip-path ease-in-out;
}

/* cmp_reveal.fadeup */
.cmp_reveal.fadeup.outside:not(.inner),
.cmp_reveal.fadeup.outside.inner > * {
  opacity: 0;
  translate: 0 25%;
}
.cmp_reveal.fadeup:not(.outside):not(.inner),
.cmp_reveal.fadeup:not(.outside).inner > * {
  transition:
    opacity 0.8s ease-in-out,
    translate 0.8s ease-out;
}

/* cmp_reveal.inner */
.cmp_reveal:not(.outside).inner > *:nth-child(1) {
  transition-delay: 0s;
}
.cmp_reveal:not(.outside).inner > *:nth-child(2) {
  transition-delay: 0.2s;
}
.cmp_reveal:not(.outside).inner > *:nth-child(3) {
  transition-delay: 0.4s;
}
.cmp_reveal:not(.outside).inner > *:nth-child(4) {
  transition-delay: 0.6s;
}
.cmp_reveal:not(.outside).inner > *:nth-child(5) {
  transition-delay: 0.8s;
}
.cmp_reveal:not(.outside).inner > *:nth-child(6) {
  transition-delay: 1s;
}
.cmp_reveal:not(.outside).inner > *:nth-child(7) {
  transition-delay: 1.2s;
}
.cmp_reveal:not(.outside).inner > *:nth-child(8) {
  transition-delay: 1.4s;
}

/* .cmp_heading */
.cmp_heading {
  margin: 0;
}
.cmp_heading {
  padding: 0.2em 0;
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.cmp_heading:has(img) {
  padding: 0.4em 0;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .cmp_heading {
    padding: 0.22em 0;
    font-size: 5.9rem;
    line-height: 1.44;
  }
  .cmp_heading:has(img) {
    padding: 0.44em 0;
    line-height: 1;
  }
}
.cmp_heading span,
.cmp_heading span {
  display: block;
}
#wrapper .cmp_heading .ttl:has(img),
#wrapper .cmp_heading:not(:has(.ttl)):has(img),
#wrapper .cmp_heading .ttl:has(img),
#wrapper .cmp_heading:not(:has(.ttl)):has(img) {
  --width-img: fit-content;
  --width-img-sp: calc(var(--width-img) * 155 / 390);
  display: block;
  width: var(--width-img-sp);
}
@media screen and (min-width: 768px) {
  #wrapper .cmp_heading .ttl:has(img),
  #wrapper .cmp_heading:not(:has(.ttl)):has(img),
  #wrapper .cmp_heading .ttl:has(img),
  #wrapper .cmp_heading:not(:has(.ttl)):has(img) {
    width: var(--width-img);
  }
}
.cmp_heading .ttl img {
  width: 100%;
  vertical-align: baseline;
}
#wrapper .cmp_heading .dsc {
  padding: 0.05em 0;
  margin: 0.5em 0;
  display: flex;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  #wrapper .cmp_heading .dsc {
    padding: 0.2em 0;
    margin: 0;
    align-items: center;
    font-size: 2.2rem;
    line-height: 1.4;
  }
}
#wrapper .cmp_heading .dsc::before {
  content: "";
  margin-top: 0.5em;
  margin-right: 0.6rem;
  display: inline-block;
  width: 1.2rem;
  height: 1px;
  background-color: rgb(183, 28, 43);
}
@media screen and (min-width: 768px) {
  #wrapper .cmp_heading .dsc::before {
    margin-top: 0;
    margin-right: 1.3rem;
    width: 2.3rem;
    height: 2px;
  }
}

/* cmp_accordion */
.cmp_accordion {
  margin: 0;
}
.cmp_accordion > div {
  --term-height: 3.5em;
  --group-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 0;
  overflow: hidden;
  max-height: var(--group-height);
  transition: 0.4s max-height ease-out;
}
@media screen and (min-width: 768px) {
  .cmp_accordion.sp > div {
    position: static;
    z-index: auto;
    overflow: hidden;
    max-height: none;
    transition: none;
  }
}
.cmp_accordion > div:not(.open) {
  max-height: var(--term-height);
}
@media screen and (min-width: 768px) {
  .cmp_accordion.sp > div:not(.open) {
    max-height: none;
  }
}
.cmp_accordion > div > dt {
  padding-top: 1em;
  padding-bottom: 1em;
  line-height: 1.5;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px) {
  .cmp_accordion > div > dt {
    padding: 0;
    line-height: inherit;
    cursor: auto;
  }
}
.cmp_accordion > div > dd {
  margin: 0;
  position: relative;
  z-index: -10;
  transition: 0.4s translate ease-out;
}
@media screen and (min-width: 768px) {
  .cmp_accordion.sp > div > dd {
    position: static;
    z-index: auto;
    transition: none;
  }
}
.cmp_accordion > div:not(.open) > dd {
  translate: 0 -100%;
}
@media screen and (min-width: 768px) {
  .cmp_accordion.sp > div:not(.open) > dd {
    translate: none;
  }
}

/* cmp_cursor */
.cmp_cursor {
  position: relative;
}
.cmp_cursor::after {
  content: "";
  position: absolute;
}
@media screen and (min-width: 768px) {
  .cmp_cursor::after {
    left: var(--x, 50%);
    top: var(--y, 50%);
    pointer-events: none;
    translate: -50% -50%;
    scale: 0;
    opacity: 0;
  }
  .cmp_cursor:not(:hover)::after {
    transition:
      0.2s scale ease-out,
      0.2s opacity ease-in-out,
      0s left linear 0.2s,
      0s top linear 0.2s;
  }
  .cmp_cursor:hover::after {
    scale: 1;
    opacity: 1;
    transition:
      0.2s scale ease-out 0.1s,
      0.2s opacity ease-in-out 0.1s,
      0.1s left ease,
      0.1s top ease;
  }
}

/* cmp_slider */
.cmp_slider .navigator {
  display: none;
}
@media screen and (min-width: 768px) {
  .cmp_slider {
    position: relative;
  }
  .cmp_slider .navigator {
    padding: 2.596rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -moz-column-gap: 2.4rem;
    column-gap: 2.4rem;
    position: absolute;
    right: 0;
    bottom: 100%;
  }
  .cmp_slider .navigator span {
    display: inline-block;
    width: 5.6rem;
    height: 5.6rem;
    border: solid 1px rgb(255, 255, 255);
    border-radius: 50%;
    box-sizing: border-box;
    background: url(../images/ico_arrow6.svg) no-repeat 50% 50% / 0.9rem 1.4rem;
    cursor: pointer;
    transition: 0.2s opacity ease-out;
  }
  .cmp_slider .navigator span:first-of-type {
    scale: -1 1;
  }
  .cmp_slider .navigator span:hover {
    opacity: 0.75;
  }
  .cmp_slider .navigator span.is-disabled {
    opacity: 0.25;
    pointer-events: none;
  }
}
.cmp_slider ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  overflow: auto;
  scrollbar-width: none;
}
.cmp_slider li {
  flex-shrink: 0;
  scroll-snap-align: center;
}
.cmp_slider .indicator {
  padding: 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 1.25em;
  column-gap: 1.25em;
  font-size: 1rem;
}
.cmp_slider .indicator span {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: rgb(204, 204, 204);
  transition:
    0.2s scale ease,
    0.2s background-color ease;
}
.cmp_slider .indicator span.current {
  background-color: rgb(184, 28, 43);
  scale: 1.5;
}

/* cmp_button */
.cmp_button a,
.cmp_button button {
  padding: 0.05em 0 0.05em 3rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 20rem;
  min-height: 4.4rem;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgb(183, 28, 43);
  background-color: rgb(255, 255, 255);
  border-radius: 2rem;
  box-sizing: border-box;
}
.cmp_button.red a,
.cmp_button.red button {
  color: rgb(255, 255, 255);
  background-color: rgb(183, 28, 43);
}
.cmp_button.trans a,
.cmp_button.trans button {
  border: solid 1px;
  color: rgb(255, 255, 255);
  background-color: transparent;
}
.cmp_button.outline a,
.cmp_button.outline button {
  border: 1px solid;
}
@media screen and (min-width: 768px) {
  .cmp_button a,
  .cmp_button button {
    padding-left: 2.6rem;
    margin: 0;
    min-width: 22rem;
    min-height: 4.8rem;
    font-size: 1.6rem;
    border-radius: 2.4rem;
  }
}
.cmp_button a .image,
.cmp_button button .image {
  display: inline-block;
  width: 8.6rem;
}
@media screen and (min-width: 768px) {
  .cmp_button a .image,
  .cmp_button button .image {
    width: 9.8rem;
  }
}
.cmp_button a .image img,
.cmp_button button .image img {
  width: 100%;
}
.cmp_button.red a .image img,
.cmp_button.trans a .image img,
.cmp_button.red button .image img,
.cmp_button.trans button .image img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.cmp_button a::after,
.cmp_button button::after {
  content: "";
  margin: 0 1.4rem;
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  background: url(../images/ico_more.svg) no-repeat 50% 50% / contain;
}
.cmp_button.red a::after,
.cmp_button.trans a::after,
.cmp_button.red button::after,
.cmp_button.trans button::after {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
@media screen and (min-width: 768px) {
  .cmp_button a::after,
  .cmp_button button::after {
    margin: 0 1.8rem;
    width: 2rem;
    height: 2rem;
  }
}
.cmp_button a:hover::after,
.cmp_button button:hover::after {
  rotate: 180deg;
  transition: 0.2s rotate ease-out;
}

/* cmp_hidden / cmp_more */
.cmp_hidden:has(> .cmp_more),
.cmp_hidden:has(> dd.absolute) {
  position: relative !important;
  z-index: 0 !important;
}
.cmp_hidden > .cmp_more,
.cmp_hidden > dd.absolute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
*:not(.js-expanded) > .cmp_hidden > *:not(.cmp_more):not(.absolute) {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  will-change: filter;
}
.js-expanded > .cmp_hidden > *:not(.cmp_more):not(.absolute) {
  transition: 0.8s -webkit-filter ease-out;
  transition: 0.8s filter ease-out;
  transition:
    0.8s filter ease-out,
    0.8s -webkit-filter ease-out;
}
*:not(.js-expanded) > .cmp_hidden ~ * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0 !important;
  min-height: auto !important;
  max-height: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  overflow: hidden !important;
  visibility: hidden !important;
}
.js-expanded > .cmp_hidden ~ * {
  max-height: var(--expanded-height, 100svh);
  transition:
    0.8s padding ease-out,
    0.8s margin ease-out,
    0.8s max-height ease-out,
    0.8s border ease-out,
    0.8s opacity ease-out,
    0s min-height linear 0.8s,
    0s overflow linear 0.8s allow-discrete,
    0.8s -webkit-filter ease-out;
  transition:
    0.8s padding ease-out,
    0.8s margin ease-out,
    0.8s max-height ease-out,
    0.8s border ease-out,
    0.8s opacity ease-out,
    0.8s filter ease-out,
    0s min-height linear 0.8s,
    0s overflow linear 0.8s allow-discrete;
  transition:
    0.8s padding ease-out,
    0.8s margin ease-out,
    0.8s max-height ease-out,
    0.8s border ease-out,
    0.8s opacity ease-out,
    0.8s filter ease-out,
    0s min-height linear 0.8s,
    0s overflow linear 0.8s allow-discrete,
    0.8s -webkit-filter ease-out;
}
.cmp_more:has(button[aria-expanded="true"]) {
  visibility: hidden;
  opacity: 0;
  transition:
    0.8s opacity ease-out,
    0s visibility linear 0.8s;
}
.cmp_hidden > dd.absolute:has(button[aria-expanded="true"]) {
  display: none;
  transition: 0s display linear 0.8s allow-discrete;
}

/* keyframes */
@-webkit-keyframes arrow {
  0% {
    background-position: 50% 50%;
  }
  49.9999% {
    background-position: calc(100% + 1.2rem) 50%;
  }
  50.0001% {
    background-position: -1.2rem 50%;
  }
  100% {
    background-position: 50% 50%;
  }
}
@keyframes arrow {
  0% {
    background-position: 50% 50%;
  }
  49.9999% {
    background-position: calc(100% + 1.2rem) 50%;
  }
  50.0001% {
    background-position: -1.2rem 50%;
  }
  100% {
    background-position: 50% 50%;
  }
}

/* reset-swiper @swiper-bundle.min.js */
.pagination .swiper-pagination {
  position: static;
  top: auto;
  bottom: auto;
  left: auto;
  width: auto;
  text-align: start;
  transform: none;
  transition: none;
  z-index: auto;
}
.pagination .swiper-pagination .swiper-pagination-bullet {
  margin: 0;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: currentColor;
  opacity: 1;
  display: inline-block;
  cursor: pointer;
  outline: none;
}
.pagination .swiper-pagination .swiper-pagination-bullet-active {
  background: currentColor;
}
.navigation .swiper-button-prev,
.navigation .swiper-button-next {
  position: static;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  margin-top: 0;
  z-index: auto;
  cursor: pointer;
  display: block;
  align-items: flex-start;
  justify-content: flex-start;
  color: currentColor;
  outline: none;
}
.navigation .swiper-button-prev::after,
.navigation .swiper-button-next::after {
  content: none;
  font-family: inherit;
  font-size: inherit;
  text-transform: none;
  letter-spacing: normal;
  font-variant: normal;
  line-height: normal;
}