@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");
:root {
  --color-black: #000;
  --color-gray: #666;
  --color-gray-light: #ccc;
  --color-gray-dark: #333;
  --color-white: #fff;
  --color-blue: #1E73BE;
  --color-blue-dark: #1A66A6;
  --color-ion-cyan: #01bce3;
  --color-ion-cyan-light: #38ddff;
  --color-ion-cyan-text: #00bae0;
  --color-ion-cyan-pale: #d9ffff;
  --color-ion-cyan-bg: #e9ffff;
  --color-ion-cyan-panel: #eafcff;
  --color-ion-heading: #3e9bcc;
  --color-ion-gray: #737373;
  --color-primary: var(--color-ion-cyan);
  --color-primary-dark: #00abcf;
  --color-text: #333;
  --color-text-light: #777;
  --color-text-inverse: var(--color-white);
  --color-bg: var(--color-white);
  --color-border: #dfdfdf;
  --gradient-ion: linear-gradient(99.6355deg, #01bce3 45.92%, #b3f0ff 115.63%);
  --gradient-ion-step: linear-gradient(110.453deg, #24bde6 31.091%, #24a8d7 72.508%, #2a81c3 115.63%);
  --gradient-ion-btn: linear-gradient(109.088deg, #24bde6 31.091%, #24a8d7 72.508%, #2a81c3 115.63%);
  --spacing-title-bottom: clamp(4rem, -3.221719457rem + 9.0497737557vw, 8rem);
  --spacing-heading-bottom: clamp(2rem, -1.6108597285rem + 4.5248868778vw, 4rem);
  --color-error: #e74c3c;
  --color-success: #27ae60;
  --text-primary: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --text-secondary: 'Lato', sans-serif;
  --text-size-regular: 1.6rem;
  --text-size-small: 1.4rem;
  --text-size-medium: 1.8rem;
  --text-size-large: 2rem;
  --text-weight-regular: 500;
  --text-weight-small: 400;
  --text-weight-medium: 700;
  --text-weight-large: 900;
  --content-width-size: 124rem;
  --content-width: min(100%, var(--content-width-size));
  --content-width-size-half: 62rem;
  --content-width-half: min(100%, var(--content-width-size-half));
  --content-padding: clamp(2.4rem, 0.9556561086rem + 1.8099547511vw, 3.2rem);
  --header-height: clamp(6.8rem, 1.3837104072rem + 6.7873303167vw, 9.8rem);
  --radius: clamp(0.6rem, 0.2389140271rem + 0.4524886878vw, 0.8rem);
  --trd-duration: 1.5s;
  --trd-hover-duration: 0.25s;
  --trd-timing: cubic-bezier(.165, .84, .44, 1);
  --modal-index: 1000;
  --header-index: 900;
  --footer-index: 300;
  --page-top-index: 700;
  --article-index: 600;
  --nav-index: 500;
  --main-index: 400;
  --section-index: 300;
  --content-index: 200;
}
@media (max-width: 768px) {
  :root {
    --spacing-title-bottom: 10.6666666667vw;
    --spacing-heading-bottom: 5.3333333333vw;
    --radius: 1.6vw;
    --content-padding: 6.4vw;
    --text-size-regular: 4.2666666667vw;
    --text-size-small: 3.7333333333vw;
    --text-size-medium: 4.8vw;
    --text-size-large: 5.3333333333vw;
    --header-height: 18.1333333333vw;
    --text-weight-small: 300;
    --text-weight-regular: 500;
    --text-weight-medium: 600;
    --text-weight-large: 800;
  }
}

:where(:not(:is(ul, ol, li))) {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  background-color: transparent;
}

html, body {
  font-size: 62.5%;
}

:where(:is(article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main)) {
  display: block;
}

:where(:is(ul, ol):not(.is-list-normal)) {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
:where(:is(ul, ol):not(.is-list-normal)) li {
  margin: 0;
  padding: 0;
}

:where(ul.is-list-normal) {
  padding-left: 1em;
  list-style: disc;
}

:where(:is(blockquote, q)) {
  quotes: none;
}
:where(:is(blockquote, q))::before, :where(:is(blockquote, q))::after {
  content: none;
}

:where(a) {
  text-decoration: none;
  color: inherit;
}

:where(img) {
  display: inline-flex;
  vertical-align: bottom;
  max-width: 100%;
}

:where(input) {
  vertical-align: middle;
}

:where(label) {
  cursor: pointer;
}

:where(picture) {
  max-width: 100%;
}

:where(input, select) {
  vertical-align: middle;
}

:where(br) {
  line-height: 0;
}

:where(input, textarea, select, button) {
  font: inherit;
  font-size: 16px;
}

:where(:is(button)) {
  color: var(--color-text);
  cursor: pointer;
}

:where(:is(input:is([type=checkbox][type=radio]), select, button)) {
  cursor: pointer;
}

:where(:is(input[type=submit], input[type=button])) {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
}
:where(:is(input[type=submit], input[type=button]))::-webkit-search-decoration {
  display: none;
}
:where(:is(input[type=submit], input[type=button])):focus {
  outline-offset: -2px;
}

:where(:is(h1, h2, h3, h4, h5, h6)) {
  font-size: inherit;
  font-weight: inherit;
}

:where(:root, body) {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  font-size: 62.5%;
}

.section-title[id],
#terms {
  scroll-margin-top: var(--header-height);
}

body {
  font-family: var(--text-primary);
  font-weight: var(--text-weight-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: var(--text-size-regular);
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  font-feature-settings: "palt";
  min-height: 100vh;
  min-height: 100dvh;
}

.container {
  width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.header {
  position: relative;
  z-index: var(--header-index);
}

.main {
  flex: 1;
  position: relative;
  z-index: var(--main-index);
}

.footer {
  position: relative;
  z-index: var(--footer-index);
  margin-top: auto;
}

@media (min-width: 769px) {
  .sp-only {
    display: none;
  }
}
@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
}
.js-inview {
  transition: opacity var(--trd-duration) var(--trd-timing), transform var(--trd-duration) var(--trd-timing);
}
.js-inview.is-inview-fade {
  opacity: 0;
}
.js-inview.is-inview-up {
  transform: translateY(25px);
}
.js-inview.is-inview-down {
  transform: translateY(-25px);
}
.js-inview.is-inview-right {
  transform: translateX(25px);
}
.js-inview.is-inview-left {
  transform: translateX(-25px);
}
.js-inview.is-active {
  opacity: 1;
  transform: translate(0, 0);
}

.section {
  z-index: var(--section-index);
}
.section-wave {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  align-items: end;
  overflow: hidden;
}
.section-wave picture {
  width: 100%;
}
.section-wave__image {
  width: 100%;
}
.section-wave--bottom {
  top: inherit;
  bottom: 0;
  transform: translateY(2px);
}
.section-wave--bottom img {
  vertical-align: bottom;
  width: 102%;
  max-width: 102%;
}
@media (max-width: 768px) {
  .section-wave--top {
    height: 13.3333333333vw;
  }
}
@media (max-width: 768px) {
  .section-wave--top img {
    position: absolute;
    top: 0;
    left: 0;
    width: 102%;
    max-width: 102%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }
}
.section-wave--top--reverse {
  background-color: var(--color-ion-cyan-pale);
  height: 6.1333333333vw;
}

.header {
  width: 100%;
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--header-index);
  transition: background-color 0.5s;
}
.header__inner {
  display: flex;
  justify-content: space-between;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(1rem, -0.263800905rem + 1.5837104072vw, 1.7rem);
  padding-inline: clamp(1rem, -4.4162895928rem + 6.7873303167vw, 4rem) clamp(1rem, -11.6380090498rem + 15.8371040724vw, 8rem);
}
@media (max-width: 768px) {
  .header__inner {
    padding-inline: 2.6666666667vw;
  }
}
.header__logo {
  display: flex;
  width: clamp(8rem, 2.5837104072rem + 6.7873303167vw, 11rem);
  z-index: calc(var(--nav-index) + 10);
}
.header__logo-link {
  display: inline-flex;
  align-items: center;
}
.header__logo-image {
  width: clamp(8rem, 2.5837104072rem + 6.7873303167vw, 11rem);
  height: auto;
}
.header.is-active {
  background-color: var(--color-ion-cyan-light);
}

.footer {
  width: 100%;
  height: clamp(3.3rem, -1.2135746606rem + 5.6561085973vw, 5.8rem);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-ion-cyan);
  z-index: var(--footer-index);
}
.footer__copyright {
  color: var(--color-text-inverse);
  font-family: var(--text-primary);
  font-size: clamp(1.2rem, 0.1167420814rem + 1.3574660633vw, 1.8rem);
  line-height: 1;
}
@media (max-width: 768px) {
  .footer__copyright {
    font-size: 3.2vw;
  }
}

.header__navigation {
  display: flex;
  align-items: center;
  height: 100%;
}
.header__navigation-button {
  width: 12.8vw;
  height: 12.8vw;
  flex: 0 0 auto;
  cursor: pointer;
  position: relative;
  z-index: calc(var(--nav-index) + 10);
  background-color: var(--color-primary);
  display: none;
  border-radius: 50%;
}
@media (max-width: 768px) {
  .header__navigation-button {
    display: block;
  }
}
.is-nav-open .header__navigation-button {
  position: fixed;
  right: 2.6666666667vw;
  background-color: var(--color-white);
}
.header__navigation-button-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  height: 2px;
  background-color: var(--color-white);
}
.is-nav-open .header__navigation-button-icon {
  background-color: var(--color-primary);
}
.header__navigation-button-icon::before, .header__navigation-button-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  transition: transform 0.3s ease, translate 0.3s ease;
  background-color: var(--color-white);
}
.is-nav-open .header__navigation-button-icon::before, .is-nav-open .header__navigation-button-icon::after {
  background-color: var(--color-primary);
}
.header__navigation-button-icon::before {
  translate: 0% -350%;
}
.header__navigation-button-icon::after {
  translate: 0% 350%;
}
.is-nav-open .header__navigation-button-icon {
  background-color: transparent;
}
.is-nav-open .header__navigation-button-icon::before {
  translate: 0 0;
  transform: rotate(45deg);
}
.is-nav-open .header__navigation-button-icon::after {
  translate: 0 0;
  transform: rotate(-45deg);
}
@media (max-width: 768px) {
  .header__nav {
    position: fixed;
    inset: 0 0 0;
    z-index: var(--nav-index);
    width: 100%;
    background: linear-gradient(94deg, #01BCE3 45.92%, #B3F0FF 115.63%);
    translate: 100% 0%;
    transition: translate var(--trd-duration) var(--trd-timing);
    padding-inline: 6.6666666667vw;
  }
}
@media (max-width: 768px) {
  .is-nav-open .header__nav {
    translate: 0% 0%;
  }
}
.header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, -0.8054298643rem + 2.2624434389vw, 2rem);
}
@media (max-width: 768px) {
  .header__nav-list {
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--header-height) + 17.3333333333vw);
    align-items: start;
    gap: 18.6666666667vw;
  }
}
.header__nav-item:nth-child(1) .header__nav-link-image {
  width: 3.7rem;
}
@media (max-width: 768px) {
  .header__nav-item:nth-child(1) .header__nav-link-image {
    width: fit-content;
  }
}
.header__nav-item:nth-child(2) .header__nav-link-image {
  width: 10.5rem;
}
@media (max-width: 768px) {
  .header__nav-item:nth-child(2) .header__nav-link-image {
    width: fit-content;
  }
}
.header__nav-item:nth-child(3) .header__nav-link-image {
  width: 12.5rem;
}
@media (max-width: 768px) {
  .header__nav-item:nth-child(3) .header__nav-link-image {
    width: fit-content;
  }
}
.header__nav-item:nth-child(4) .header__nav-link-image {
  width: 9.2rem;
}
@media (max-width: 768px) {
  .header__nav-item:nth-child(4) .header__nav-link-image {
    width: fit-content;
  }
}
.header__nav-item:nth-child(5) .header__nav-link-image {
  width: 6.7rem;
}
@media (max-width: 768px) {
  .header__nav-item:nth-child(5) .header__nav-link-image {
    width: fit-content;
  }
}
.header__nav-item.is-active .header__nav-link {
  background-color: var(--color-bg);
}
@media (max-width: 768px) {
  .header__nav-item.is-active .header__nav-link {
    background-color: transparent;
  }
}
.header__nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.1rem, -0.0805429864rem + 0.2262443439vw, 0.2rem) clamp(1.2rem, -0.9665158371rem + 2.7149321267vw, 2.4rem);
  border-radius: clamp(5rem, -3.8466063348rem + 11.0859728507vw, 9.9rem);
  text-decoration: none;
  height: 4.1rem;
  transition: all 0.5s;
}
@media (max-width: 768px) {
  .header__nav-link {
    display: flex;
    align-items: center;
    padding-inline: 0;
    height: auto;
  }
}
.header__nav-link picture {
  display: inline-flex;
}
@media (hover: hover) {
  .header__nav-link:hover {
    background-color: var(--color-bg);
  }
}

.section-title {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-title-bottom);
}
.section-title__image {
  width: auto;
  max-width: 100%;
  height: auto;
}
.section-title--cm {
  width: clamp(5.2rem, -4.0076923077rem + 11.5384615385vw, 10.3rem);
}
.section-title--product {
  width: clamp(14.9rem, -11.820361991rem + 33.4841628959vw, 29.7rem);
}
.section-title--campaign {
  width: clamp(32.2rem, -62.2239819005rem + 118.3257918552vw, 84.5rem);
  margin-bottom: clamp(1.8rem, 0.7167420814rem + 1.3574660633vw, 2.4rem);
}
.section-title--project {
  width: clamp(13.4rem, -10.792760181rem + 30.3167420814vw, 26.8rem);
}
.section-title--store {
  width: clamp(9.8rem, -7.8932126697rem + 22.1719457014vw, 19.6rem);
}
.section-title--pickup {
  width: clamp(12.05rem, -9.7054298643rem + 27.2624434389vw, 24.1rem);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, -0.6443438914rem + 1.8099547511vw, 1.6rem);
  padding: clamp(0.8rem, -0.6443438914rem + 1.8099547511vw, 1.6rem) clamp(1.2rem, -0.7859728507rem + 2.4886877828vw, 2.3rem) clamp(0.8rem, -0.6443438914rem + 1.8099547511vw, 1.6rem) clamp(1.2rem, -5.1190045249rem + 7.9185520362vw, 4.7rem);
  font-size: var(--text-size-medium);
  font-weight: 700;
  border-radius: clamp(0.3rem, -0.2416289593rem + 0.6787330317vw, 0.6rem);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  transition: var(--trd-hover-duration) var(--trd-timing);
}
@media (hover: hover) {
  .button:hover {
    opacity: 0.7;
  }
}
@media (max-width: 768px) {
  .button {
    padding: 3.2vw;
    border-radius: 0.8vw;
  }
}
.button-cv {
  background: linear-gradient(94deg, #24BDE6 31.09%, #24A8D7 72.51%, #2A81C3 115.63%);
  border-radius: 100vh;
  margin-inline: auto;
  font-weight: 500;
}
@media (max-width: 768px) {
  .button-cv {
    width: 100%;
    padding: 2.1333333333vw 5.0666666667vw 2.1333333333vw 10.4vw;
    font-size: 5.3333333333vw;
  }
}
.button-cv-text {
  font-size: clamp(2rem, 1.3987918552rem + 0.7533936652vw, 2.333rem);
}
.button-cv-icon {
  width: clamp(3.1rem, 2.0167420814rem + 1.3574660633vw, 3.7rem);
  height: clamp(3.1rem, 2.0167420814rem + 1.3574660633vw, 3.7rem);
}
.button-container {
  margin-top: clamp(1.6rem, 0.1556561086rem + 1.8099547511vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, -0.6443438914rem + 1.8099547511vw, 1.6rem);
}
@media (max-width: 768px) {
  .button-container {
    margin-top: 4.2666666667vw;
    flex-direction: column;
    gap: 2.1333333333vw;
  }
}

.kv {
  position: relative;
  width: 100%;
  aspect-ratio: 1680/875;
  overflow: hidden;
}
@media (max-width: 768px) {
  .kv {
    aspect-ratio: 375/493;
  }
}
.kv__bg {
  position: absolute;
  inset: 0;
}
.kv__bg-picture {
  position: absolute;
  inset: 0;
  margin: auto;
}
.kv__bg-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.kv__inner {
  position: relative;
  width: 100%;
  aspect-ratio: inherit;
}
.kv__copy {
  position: absolute;
  left: 12.8571428571%;
  top: 24.1142857143%;
  font-size: clamp(2.4rem, -0.12760181rem + 3.1674208145vw, 3.8rem);
  font-weight: 500;
  line-height: 1.9;
  color: var(--color-text-inverse);
  text-shadow: clamp(0.1rem, -0.0805429864rem + 0.2262443439vw, 0.2rem) clamp(0.1rem, -0.0805429864rem + 0.2262443439vw, 0.2rem) clamp(0.5rem, -0.4027149321rem + 1.1312217195vw, 1rem) rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  .kv__copy {
    left: 55.7333333333vw;
    top: 19.7333333333vw;
    font-size: 6.4vw;
  }
}
.kv__logo {
  position: absolute;
  left: 70.4166666667%;
  top: 24.1142857143%;
  width: clamp(13.5rem, -12.8592760181rem + 33.0316742081vw, 28.1rem);
}
@media (max-width: 768px) {
  .kv__logo {
    left: 56.8vw;
    top: 61.0666666667vw;
    width: 36vw;
  }
}
.kv__logo-image {
  width: 100%;
  height: auto;
}

.floating-badge {
  position: fixed;
  right: clamp(2.4rem, -1.9330316742rem + 5.4298642534vw, 4.8rem);
  top: 39.94vw;
  width: clamp(11.5rem, -16.1230769231rem + 34.6153846154vw, 26.8rem);
  z-index: var(--page-top-index);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--trd-duration) var(--trd-timing), opacity var(--trd-duration) var(--trd-timing), visibility var(--trd-duration) var(--trd-timing);
}
@media (max-width: 768px) {
  .floating-badge {
    right: 2.6666666667vw;
    top: 106.6666666667vw;
    width: 40vw;
  }
}
.floating-badge.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.floating-badge.is-following.is-visible {
  position: fixed;
  top: inherit;
  bottom: 0;
  animation: floating-badge-follow var(--trd-duration) var(--trd-timing) forwards;
}
.floating-badge__link {
  display: block;
  text-decoration: none;
}
.floating-badge-image {
  width: 100%;
  height: auto;
}

@keyframes floating-badge-follow {
  from {
    opacity: 0.5;
    transform: translateY(3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.concept {
  position: relative;
  padding-block: clamp(6rem, -4.8325791855rem + 13.5746606335vw, 12rem) clamp(3rem, -20.4705882353rem + 29.4117647059vw, 16rem);
}
.concept__inner {
  position: relative;
}
.concept__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, -0.8054298643rem + 2.2624434389vw, 2rem);
}
.concept__text {
  font-size: clamp(1.3rem, -0.6859728507rem + 2.4886877828vw, 2.4rem);
  line-height: 2;
}
@media (max-width: 768px) {
  .concept__text {
    letter-spacing: -0.04em;
  }
}
.concept__products {
  position: absolute;
  top: clamp(9rem, 0.1533936652rem + 11.0859728507vw, 13.9rem);
  right: clamp(-6.8rem, -0.0669683258rem + -5.4298642534vw, -4.4rem);
}
@media (max-width: 768px) {
  .concept__products {
    position: relative;
    top: inherit;
    right: inherit;
    margin-top: 8vw;
    width: 100%;
    text-align: center;
  }
}
.concept__products-image {
  width: clamp(39rem, 1.62760181rem + 46.8325791855vw, 59.7rem);
  height: auto;
}
@media (max-width: 768px) {
  .concept__products-image {
    width: 95.4666666667vw;
  }
}

.cm {
  position: relative;
  padding-block: clamp(12rem, -2.443438914rem + 18.0995475113vw, 20rem) clamp(6rem, -1.221719457rem + 9.0497737557vw, 10rem);
}
@media (max-width: 768px) {
  .cm {
    margin-top: -33.0666666667vw;
  }
}
.cm__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cm__bg-color {
  position: absolute;
  inset: 0;
  background-color: var(--color-ion-cyan-pale);
}
.cm__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cm__content {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, -3.221719457rem + 9.0497737557vw, 8rem);
  width: clamp(50rem, -40.2714932127rem + 113.1221719457vw, 100rem);
  max-width: 100%;
}
.cm-video {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, -0.9665158371rem + 2.7149321267vw, 2.4rem);
  align-items: center;
  width: 100%;
}
.cm-video iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  border-radius: clamp(0.5rem, -0.4027149321rem + 1.1312217195vw, 1rem);
}
.cm-video__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: clamp(0.5rem, -0.4027149321rem + 1.1312217195vw, 1rem);
  overflow: hidden;
}
.cm-video__thumb-image {
  width: 100%;
  height: auto;
}
.cm-video__play {
  background-color: transparent;
  border: none;
  padding: 0;
  appearance: none;
  color: var(--text-color);
  font-family: inherit;
}
.cm-video__play:not(:focus) {
  outline: none;
}
.cm-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(9rem, -7.2488687783rem + 20.3619909502vw, 18rem);
  aspect-ratio: 1;
  cursor: pointer;
}
.cm-video__play-icon {
  width: 100%;
}
.cm-video__title {
  font-size: clamp(1.5rem, -0.4859728507rem + 2.4886877828vw, 2.6rem);
  line-height: 1.5;
}
.cm-profile {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, -1.2886877828rem + 3.6199095023vw, 3.2rem);
  align-items: center;
  width: clamp(37rem, -29.8009049774rem + 83.7104072398vw, 74rem);
  max-width: 100%;
  margin-inline: auto;
}
.cm-profile__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 0.0778280543rem + 0.9049773756vw, 1.2rem);
}
.cm-profile__heading-image {
  width: clamp(10rem, -1.5547511312rem + 14.479638009vw, 16.4rem);
  height: auto;
}
.cm-profile__heading-line {
  width: clamp(1.5rem, -1.2081447964rem + 3.3936651584vw, 3rem);
  aspect-ratio: 30/2;
  background-color: var(--color-text);
}
.cm-profile__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, -0.9665158371rem + 2.7149321267vw, 2.4rem);
  width: clamp(32rem, -25.7737556561rem + 72.3981900452vw, 64rem);
  max-width: 100%;
}
@media (max-width: 768px) {
  .cm-profile__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cm-profile__card {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, -3.2108597285rem + 4.5248868778vw, 2.4rem);
}
.cm-profile__photo {
  width: clamp(7.65rem, -11.3972850679rem + 23.8687782805vw, 18.2rem);
}
@media (max-width: 768px) {
  .cm-profile__photo {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5.3333333333vw;
  }
}
.cm-profile__photo-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.6rem;
}
@media (max-width: 768px) {
  .cm-profile__photo-image {
    width: 40.4vw;
  }
}
.cm-profile__meta {
  margin-top: 0.8rem;
}
.cm-profile__role {
  font-size: 1.2rem;
  line-height: 1.5;
}
.cm-profile__name {
  font-size: clamp(1.6rem, 1.2389140271rem + 0.4524886878vw, 1.8rem);
  line-height: 1.5;
}
.cm-profile__name-en {
  font-size: clamp(1.2rem, 0.4778280543rem + 0.9049773756vw, 1.6rem);
}
@media (max-width: 768px) {
  .cm-profile__name-en {
    display: block;
  }
}
.cm-profile__bio {
  font-size: clamp(1.2rem, 1.0194570136rem + 0.2262443439vw, 1.3rem);
  line-height: 1.8;
}
.cm-profile__bio p + p {
  margin-top: clamp(0.4rem, -0.3221719457rem + 0.9049773756vw, 0.8rem);
}

.product {
  position: relative;
  padding-block: clamp(10rem, -8.0542986425rem + 22.6244343891vw, 20rem) clamp(34.7rem, -33.0036199095rem + 84.8416289593vw, 72.2rem);
  overflow-x: clip;
}
.product__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.product__bg-color {
  position: absolute;
  inset: 0;
  background-image: image-set(url("../images/product-color.webp") type("image/webp"), url("../images/product-color.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
}
@media (max-width: 768px) {
  .product__bg-color {
    background-image: image-set(url("../images/product-color_sp.webp") type("image/webp"), url("../images/product-color_sp.jpg") type("image/jpeg"));
  }
}
.product__bg-gradation img {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.product__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product__lead {
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--spacing-heading-bottom);
  font-size: clamp(1.3rem, 0.036199095rem + 1.5837104072vw, 2rem);
  line-height: 1.5;
  color: var(--color-ion-cyan);
  text-align: center;
}
@media (max-width: 768px) {
  .product__lead {
    letter-spacing: -0.04em;
  }
}
.product__action {
  margin-top: clamp(2rem, 0.1945701357rem + 2.2624434389vw, 3rem);
}
.product__lineup {
  width: clamp(37.5rem, -43.2027149321rem + 101.1312217195vw, 82.2rem);
  max-width: 100%;
  position: absolute;
  left: 50%;
  bottom: clamp(-12.2rem, 6.5963800905rem + -15.1583710407vw, -5.5rem);
  transform: translateX(-50%);
  margin: auto;
}
.product__lineup-image {
  width: 100%;
  height: auto;
}

.product-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, -0.8054298643rem + 2.2624434389vw, 2rem);
  max-width: 74.7rem;
}
@media (max-width: 768px) {
  .product-points {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
}
.product-points__item {
  list-style: none;
}
@media (max-width: 768px) {
  .product-points__item {
    min-height: 25.0666666667vw;
  }
}
.product-points__item:nth-child(1) {
  transition-delay: 0.2s;
}
.product-points__item:nth-child(2) {
  transition-delay: 0.4s;
}
.product-points__item:nth-child(3) {
  transition-delay: 0.6s;
}
.product-points__item:nth-child(4) {
  transition-delay: 0.8s;
}

.product-point {
  display: grid;
  grid-template-columns: clamp(8.5rem, 6.6945701357rem + 2.2624434389vw, 9.5rem) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  height: 100%;
  border-radius: 0.9rem;
  background-color: var(--color-white);
  box-shadow: 0.4rem 0.4rem 1.8rem rgba(0, 171, 207, 0.1);
  overflow: hidden;
}
.product-point__head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--gradient-ion);
  align-self: center;
}
.product-point__head-image {
  width: clamp(4.4rem, 2.9556561086rem + 1.8099547511vw, 5.2rem);
  height: auto;
}
.product-point__text {
  padding: clamp(0.8rem, -0.6443438914rem + 1.8099547511vw, 1.6rem);
  font-size: clamp(1.5rem, 1.3194570136rem + 0.2262443439vw, 1.6rem);
  line-height: 1.4;
  color: var(--color-text);
  align-self: center;
}
.product-point__text-em, .product-point__text-lg {
  color: var(--color-primary);
  font-size: clamp(2rem, 1.6389140271rem + 0.4524886878vw, 2.2rem);
}

.product-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, -0.8054298643rem + 2.2624434389vw, 2rem);
  padding: clamp(1.3rem, 0.7583710407rem + 0.6787330317vw, 1.6rem) 2rem clamp(1.3rem, 0.7583710407rem + 0.6787330317vw, 1.6rem) 4rem;
  border-radius: clamp(5rem, -166.3352941176rem + 214.7058823529vw, 99.9rem);
  background-color: var(--color-white);
  text-decoration: none;
}
.product-button__text {
  font-size: 2rem;
  line-height: 1.7;
  color: var(--color-ion-cyan);
}
.product-button__icon {
  width: 3.2rem;
  height: auto;
  transform: rotate(180deg);
}

.campaign {
  position: relative;
  padding-block: clamp(4rem, -3.221719457rem + 9.0497737557vw, 8rem) clamp(7rem, -23.6923076923rem + 38.4615384615vw, 24rem);
}
@media (max-width: 768px) {
  .campaign {
    margin-top: -1px;
  }
}
.campaign__bg {
  position: absolute;
  inset: 0 0 0 0;
  pointer-events: none;
  overflow: hidden;
}
.campaign__bg-water {
  position: absolute;
  inset: 0 0 0 0;
  width: 100%;
  object-fit: cover;
}
.campaign__bg-water img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.campaign__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.campaign__period {
  background-color: var(--color-bg);
  color: var(--color-primary);
  font-size: clamp(1.284rem, -0.7308597285rem + 2.5248868778vw, 2.4rem);
  line-height: 1.6;
  border-radius: 100vh;
  padding-inline: clamp(1.5rem, -1.2081447964rem + 3.3936651584vw, 3rem);
}
.campaign__period-small {
  font-size: clamp(0.9rem, -0.7248868778rem + 2.036199095vw, 1.8rem);
}
.campaign__period-large {
  font-size: clamp(1.6rem, -0.92760181rem + 3.1674208145vw, 3rem);
}
.campaign__caption {
  margin-top: 4rem;
  text-align: center;
}
.campaign__caption p {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.0972850679rem + 1.1312217195vw, 1.5rem);
  color: var(--color-white);
  font-size: clamp(1.5rem, -0.3054298643rem + 2.2624434389vw, 2.5rem);
  line-height: 1.6;
}
.campaign__caption p::before, .campaign__caption p::after {
  content: "";
  display: block;
  width: clamp(0.1rem, -0.0805429864rem + 0.2262443439vw, 0.2rem);
  height: clamp(2.1rem, -1.8719457014rem + 4.9773755656vw, 4.3rem);
  background-color: var(--color-bg);
  transform: skewX(20deg);
}
.campaign__caption p::after {
  transform: skewX(-20deg);
}
.campaign__lead {
  margin-top: clamp(1.5rem, 0.9583710407rem + 0.6787330317vw, 1.8rem);
  text-align: center;
}
.campaign__lead p {
  color: var(--color-white);
  font-size: clamp(1.4rem, -0.5859728507rem + 2.4886877828vw, 2.5rem);
  line-height: 1.6;
}
.campaign__wrap {
  width: clamp(72.1rem, 21.7285067873rem + 63.1221719457vw, 100rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, -0.6108597285rem + 4.5248868778vw, 5rem);
  margin-top: clamp(4rem, 0.3891402715rem + 4.5248868778vw, 6rem);
}
@media (max-width: 768px) {
  .campaign__wrap {
    width: 100%;
  }
}
.campaign__box {
  background-color: var(--color-ion-cyan-panel);
  padding: clamp(4.3rem, 1.2307692308rem + 3.8461538462vw, 6rem) clamp(6.8rem, 1.9253393665rem + 6.1085972851vw, 9.5rem);
  border-radius: clamp(0.45rem, -0.3624434389rem + 1.0180995475vw, 0.9rem);
  box-shadow: 3.6px 3.6px 18px 0 rgba(0, 171, 207, 0.1);
}
@media (max-width: 768px) {
  .campaign__box {
    border-radius: 1.2vw;
    padding: 8vw 6.4vw;
  }
}
.campaign__box-tilte {
  text-align: center;
  color: var(--color-ion-heading);
  font-size: clamp(2rem, -0.52760181rem + 3.1674208145vw, 3.4rem);
  line-height: 1.2;
  margin-bottom: clamp(2.5rem, -0.2081447964rem + 3.3936651584vw, 4rem);
}
.campaign__prize {
  /* display: flex;
  flex-wrap: wrap;
  gap: m.size(20, 30);
  @include m.mq {
  	gap: m.sizeSP(40);
  } 2つ以上ある場合使用*/
}
.campaign__prize-item {
  position: relative;
}
.campaign__prize-item-image {
  height: auto;
}
.campaign__prize-item--all {
  width: 100%;
}
.campaign__prize-item--all .campaign__prize-badge {
  width: clamp(10.5rem, 3.0977375566rem + 9.2760180995vw, 14.6rem);
  top: clamp(-3.9rem, -0.8140271493rem + -2.4886877828vw, -2.8rem);
  left: clamp(-5.5rem, -1.0113122172rem + -3.6199095023vw, -3.9rem);
}
@media (max-width: 768px) {
  .campaign__prize-item--all .campaign__prize-badge {
    width: 22.6666666667vw;
    top: -8.2666666667vw;
    left: -8.2666666667vw;
  }
}
.campaign__prize-item--all .campaign__prize-item-image {
  width: 100%;
}
@media (max-width: 768px) {
  .campaign__prize-item--all .campaign__prize-item-image {
    width: 52vw;
  }
}
.campaign__prize-item--a {
  width: clamp(35.8rem, 10.6593891403rem + 31.5045248869vw, 49.725rem);
}
@media (max-width: 768px) {
  .campaign__prize-item--a {
    width: 100%;
  }
}
.campaign__prize-item--a .campaign__prize-badge {
  width: clamp(10.5rem, 3.0977375566rem + 9.2760180995vw, 14.6rem);
  top: clamp(-3.9rem, -0.8140271493rem + -2.4886877828vw, -2.8rem);
  left: clamp(-5.5rem, -1.0113122172rem + -3.6199095023vw, -3.9rem);
}
@media (max-width: 768px) {
  .campaign__prize-item--a .campaign__prize-badge {
    width: 22.6666666667vw;
    top: -8.2666666667vw;
    left: -8.2666666667vw;
  }
}
.campaign__prize-item--a .campaign__prize-item-image {
  width: 66.9333333333vw;
}
.campaign__prize-item--b {
  width: clamp(20.3rem, 5.9016968326rem + 18.0429864253vw, 28.275rem);
}
@media (max-width: 768px) {
  .campaign__prize-item--b {
    width: 100%;
  }
}
.campaign__prize-item--b .campaign__prize-badge {
  width: clamp(7rem, 1.9447963801rem + 6.334841629vw, 9.8rem);
  top: clamp(-2.5rem, -0.536199095rem + -1.5837104072vw, -1.8rem);
  left: clamp(-1.8rem, -0.3972850679rem + -1.1312217195vw, -1.3rem);
}
@media (max-width: 768px) {
  .campaign__prize-item--b .campaign__prize-badge {
    width: 22.6666666667vw;
    top: -8.2666666667vw;
    left: -8.2666666667vw;
  }
}
.campaign__prize-item--b .campaign__prize-item-image {
  width: 52vw;
}
.campaign__prize-body {
  height: 100%;
  background-color: var(--color-bg);
  border-radius: 1.1rem;
  box-shadow: 4.643px 4.643px 23.214px 0 rgba(0, 171, 207, 0.1);
  padding-block: clamp(2.4rem, 0.7751131222rem + 2.036199095vw, 3.3rem);
  padding-inline: clamp(3.5rem, 0.97239819rem + 3.1674208145vw, 4.9rem);
  display: flex;
  justify-content: center;
  align-items: end;
}
@media (max-width: 768px) {
  .campaign__prize-body {
    padding-block: 5.3333333333vw;
    padding-inline: 3.4666666667vw;
  }
}
.campaign__prize-badge {
  position: absolute;
}
.campaign__prize-badge-image {
  height: auto;
}
.campaign__prize-note {
  margin-top: clamp(0.4rem, 0.0389140271rem + 0.4524886878vw, 0.6rem);
  text-align: right;
  color: var(--color-ion-gray);
  font-size: clamp(1.1rem, 0.9194570136rem + 0.2262443439vw, 1.2rem);
  line-height: 1.2;
}
.campaign__step-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(3rem, 0.2918552036rem + 3.3936651584vw, 4.5rem);
}
@media (max-width: 768px) {
  .campaign__step-list {
    gap: 14.6666666667vw;
  }
}
.campaign__step-item {
  position: relative;
  width: clamp(17.5rem, 5.7647058824rem + 14.7058823529vw, 24rem);
  border-radius: 0 0 0.9rem 0.9rem;
  background-color: var(--color-bg);
}
@media (max-width: 768px) {
  .campaign__step-item {
    width: 100%;
  }
}
.campaign__step-item::after {
  content: "";
  display: block;
  width: clamp(1.6rem, 0.6070135747rem + 1.2443438914vw, 2.15rem);
  height: clamp(2.3rem, 1.036199095rem + 1.5837104072vw, 3rem);
  background-image: url(../images/campaign_step_arrow.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  right: clamp(-3.15rem, -0.2042986425rem + -2.3755656109vw, -2.1rem);
}
@media (max-width: 768px) {
  .campaign__step-item::after {
    top: inherit;
    right: inherit;
    bottom: -13.4666666667vw;
    left: 50%;
    transform: rotate(90deg) translateX(-50%);
    width: 5.7333333333vw;
    height: 8vw;
  }
}
.campaign__step-item:last-child::after {
  display: none;
}
.campaign__step-head {
  border-radius: 0.9rem 0.9rem 0 0;
  background: linear-gradient(94deg, #01BCE3 45.92%, #B3F0FF 115.63%);
  text-align: center;
  height: clamp(3.6rem, 1.7945701357rem + 2.2624434389vw, 4.6rem);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .campaign__step-head {
    height: 14.4vw;
  }
}
.campaign__step-body {
  padding-bottom: 3rem;
}
@media (max-width: 768px) {
  .campaign__step-body {
    padding-bottom: 5.3333333333vw;
  }
}
.campaign__step-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 20/9;
}
.campaign__step-img {
  width: 85%;
  margin-inline: auto;
  margin-bottom: 0.8rem;
}
.campaign__step-text {
  text-align: center;
  font-size: clamp(1.077rem, 0.4938461538rem + 0.7307692308vw, 1.4rem);
}
@media (max-width: 768px) {
  .campaign__step-text {
    font-size: 4.5333333333vw;
  }
}
.campaign__step-text a {
  text-decoration: underline;
  color: var(--color-primary);
}
.campaign__step-text-blue {
  color: var(--color-primary);
}
.campaign__step-note {
  margin-top: clamp(2rem, 0.1945701357rem + 2.2624434389vw, 3rem);
  text-align: center;
  color: var(--color-ion-gray);
  font-size: clamp(1.1rem, 0.9194570136rem + 0.2262443439vw, 1.2rem);
  line-height: 1.2;
}
.campaign__step-note a {
  color: var(--color-primary);
  text-decoration: underline;
}
.campaign__action {
  text-align: center;
  margin-top: clamp(2rem, 0.1945701357rem + 2.2624434389vw, 3rem);
}
.campaign__overview {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.campaign__overview-box {
  background-color: var(--color-bg);
  padding-block: 2.5rem 3.5rem;
  padding-inline: 2rem;
}
.campaign__overview-title {
  text-align: center;
  color: var(--color-ion-heading);
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 2rem;
}
.campaign__overview-list li {
  position: relative;
  font-size: clamp(1.2rem, 0.6583710407rem + 0.6787330317vw, 1.5rem);
  line-height: 1.4;
  margin-top: 1.2rem;
  padding-left: 1em;
}
.campaign__overview-list li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
.campaign__overview-list li:first-child {
  margin-top: 0;
}
.campaign__overview-text {
  text-align: center;
  font-size: clamp(1.2rem, 0.6583710407rem + 0.6787330317vw, 1.5rem);
  line-height: 1.8;
}
.campaign__overview-text--large {
  font-size: clamp(1.3rem, 0.036199095rem + 1.5837104072vw, 2rem);
}
.campaign__overview-text--blue {
  color: var(--color-primary);
}
.campaign__overview-text em {
  font-style: normal;
  color: var(--color-ion-heading);
  font-size: clamp(1.5rem, -0.1248868778rem + 2.036199095vw, 2.4rem);
}
.campaign__overview a {
  color: var(--color-primary);
  text-decoration: underline;
  word-break: break-all;
}
.campaign__overview-notes {
  width: fit-content;
  margin-inline: auto;
  margin-top: clamp(1rem, 0.0972850679rem + 1.1312217195vw, 1.5rem);
}
.campaign__overview-notes li {
  position: relative;
  color: var(--color-ion-gray);
  font-size: clamp(1.1rem, 0.9194570136rem + 0.2262443439vw, 1.2rem);
  padding-left: 1em;
}
.campaign__overview-notes li::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
.campaign__overview-scroll {
  overflow-y: scroll;
  height: clamp(24.7rem, 60.328959276rem + -28.7330316742vw, 37.4rem);
  padding-right: clamp(1.5rem, -1.2081447964rem + 3.3936651584vw, 3rem);
}
.campaign__overview-scroll h4 {
  text-align: center;
  font-size: clamp(1.3rem, 0.3972850679rem + 1.1312217195vw, 1.8rem);
  font-weight: 600;
  line-height: 1.8;
  margin-bottom: clamp(0.3rem, -0.2416289593rem + 0.6787330317vw, 0.6rem);
}
.campaign__overview-scroll h5 {
  position: relative;
  font-size: clamp(1.2rem, 0.6583710407rem + 0.6787330317vw, 1.5rem);
  line-height: 1.8;
  margin-top: 1em;
  padding-left: 1em;
}
.campaign__overview-scroll h5::before {
  content: "■";
  position: absolute;
  left: 0;
}
.campaign__overview-scroll p,
.campaign__overview-scroll address,
.campaign__overview-scroll dl {
  font-style: normal;
  font-size: clamp(1.2rem, 0.6583710407rem + 0.6787330317vw, 1.5rem);
  line-height: 1.8;
}
.campaign__overview-scroll table {
  margin-top: 1em;
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(1.2rem, 0.6583710407rem + 0.6787330317vw, 1.5rem);
  line-height: 1.8;
}
.campaign__overview-scroll table th, .campaign__overview-scroll table td {
  border: solid 1px var(--color-border);
  padding: 0.5em;
}
.campaign__overview-scroll ol li {
  font-size: clamp(1.2rem, 0.6583710407rem + 0.6787330317vw, 1.5rem);
  line-height: 1.8;
}
.campaign__overview-scroll::-webkit-scrollbar {
  display: none;
}
.campaign__overview .simplebar-scrollbar::before {
  background: var(--color-primary);
  border-radius: 0;
  width: 5px;
  margin-left: -2px;
  margin-top: 0;
}
.campaign__overview .simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}
.campaign__overview .simplebar-track {
  background: #E7E7E7;
  width: 5px !important;
}
.campaign__overview-dl {
  width: 47rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.7rem, -0.7443438914rem + 1.8099547511vw, 1.5rem);
  margin-top: clamp(1.5rem, -1.2081447964rem + 3.3936651584vw, 3rem);
}
@media (max-width: 768px) {
  .campaign__overview-dl {
    width: 100%;
  }
}
.campaign__overview-dl dt {
  width: 8rem;
}
@media (max-width: 768px) {
  .campaign__overview-dl dt {
    width: 100%;
  }
}
.campaign__overview-dl dt span {
  text-align: center;
  display: inline-block;
  color: var(--color-primary);
  border: solid 1px var(--color-primary);
  border-radius: 0.4rem;
  font-size: 1.5rem;
  line-height: 1.8;
  width: 100%;
}
@media (max-width: 768px) {
  .campaign__overview-dl dt span {
    width: 21.3333333333vw;
    margin-inline: auto;
    font-size: 3.4666666667vw;
  }
}
.campaign__overview-dl dd {
  width: calc(100% - 8rem - clamp(0.7rem, -0.7443438914rem + 1.8099547511vw, 1.5rem));
  font-size: 1.7rem;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .campaign__overview-dl dd {
    width: 100%;
    font-size: 3.7333333333vw;
  }
}

.project {
  position: relative;
  padding-block: clamp(4.5rem, -3.6244343891rem + 10.1809954751vw, 9rem) clamp(6rem, -1.221719457rem + 9.0497737557vw, 10rem);
}
.project__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.project__bg-color {
  position: absolute;
  inset: 0;
  background-color: #F5FFFF;
}
.project__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.project__heding {
  font-size: clamp(2.4rem, -0.4886877828rem + 3.6199095023vw, 4rem);
  line-height: 1.5;
  color: var(--color-ion-cyan);
  border-bottom: dashed 0.2rem;
  padding-bottom: clamp(0.6rem, -0.4832579186rem + 1.3574660633vw, 1.2rem);
  margin-bottom: clamp(2rem, -3.0552036199rem + 6.334841629vw, 4.8rem);
}
.project__hero {
  display: grid;
  grid-template-columns: 35.7% minmax(0, 1fr);
  align-items: center;
  max-width: 104.8rem;
  margin-bottom: clamp(6rem, 2.3891402715rem + 4.5248868778vw, 8rem);
}
@media (max-width: 768px) {
  .project__hero {
    grid-template-columns: 1fr;
    gap: 5.3333333333vw;
    width: 100%;
  }
}
.project__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.project__visual-image {
  width: 87.675070028%;
  height: auto;
}
@media (max-width: 768px) {
  .project__visual-image {
    width: 61.3333333333vw;
  }
}
.project__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, -1.6108597285rem + 4.5248868778vw, 4rem);
}
.project__intro-text {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 0.4778280543rem + 0.9049773756vw, 1.6rem);
  font-size: clamp(1.2rem, -0.2443438914rem + 1.8099547511vw, 2rem);
  line-height: 1.8;
}
.project__intro-em {
  font-size: clamp(1.4rem, -0.0443438914rem + 1.8099547511vw, 2.2rem);
  color: var(--color-ion-cyan);
}

.project-survey {
  max-width: 100rem;
}
@media (max-width: 768px) {
  .project-survey {
    width: 100%;
  }
}
.project-survey__title {
  position: relative;
  margin-bottom: clamp(1.6rem, 7.4914027149rem + -4.7511312217vw, 3.7rem);
  font-size: clamp(1.6rem, 0.1556561086rem + 1.8099547511vw, 2.4rem);
  line-height: 1.5;
  text-align: center;
  background-color: var(--color-primary);
  border-radius: clamp(0.45rem, -0.3624434389rem + 1.0180995475vw, 0.9rem) clamp(0.45rem, -0.3624434389rem + 1.0180995475vw, 0.9rem) 0 0;
  color: var(--color-white);
  height: clamp(7.8rem, -0.3244343891rem + 10.1809954751vw, 12.3rem);
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-survey__title em {
  font-style: normal;
  font-size: clamp(1.6rem, -0.5665158371rem + 2.7149321267vw, 2.8rem);
}
.project-survey__lead {
  position: absolute;
  top: -2.7rem;
  font-size: clamp(1.5rem, 0.0556561086rem + 1.8099547511vw, 2.3rem);
  line-height: 1.5;
  color: var(--color-ion-cyan);
  text-align: center;
  background-color: var(--color-white);
  width: clamp(24.4rem, 5.6235294118rem + 23.5294117647vw, 34.8rem);
  height: clamp(3.4rem, 0.6918552036rem + 3.3936651584vw, 4.9rem);
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 2px var(--color-primary);
}
.project-survey__lead::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: clamp(1.2rem, 0.2972850679rem + 1.1312217195vw, 1.7rem) solid transparent;
  border-left: clamp(1.2rem, 0.2972850679rem + 1.1312217195vw, 1.7rem) solid transparent;
  border-top: clamp(1.2rem, 0.1167420814rem + 1.3574660633vw, 1.8rem) solid var(--color-white);
  border-bottom: 0;
  position: absolute;
  bottom: clamp(-1.6rem, 0.0832579186rem + -1.3574660633vw, -1rem);
}
.project-survey__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, -1.6108597285rem + 4.5248868778vw, 4rem);
  row-gap: clamp(0.8rem, 0.4389140271rem + 0.4524886878vw, 1rem);
  list-style: none;
}
@media (max-width: 768px) {
  .project-survey__list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.project-survey__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  list-style: none;
}
@media (max-width: 768px) {
  .project-survey__item:nth-child(1) .survey-card__graph-image {
    width: 32.5333333333vw;
  }
}
@media (max-width: 768px) {
  .project-survey__item:nth-child(2) .survey-card__graph-image {
    width: 64vw;
  }
}
.project-survey__item:nth-child(3) .survey-card__graph {
  position: relative;
}
@media (max-width: 768px) {
  .project-survey__item:nth-child(3) .survey-card__graph::after {
    content: "";
    display: block;
    width: 14.1333333333vw;
    height: 16.5333333333vw;
    background-image: url(../images/project-survey-graph-deco-03.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: absolute;
    right: -6.4vw;
    bottom: -4vw;
  }
}
@media (max-width: 768px) {
  .project-survey__item:nth-child(3) .survey-card__graph-image {
    width: 59.2vw;
  }
}
.project-survey__item:nth-child(4) .survey-card__graph {
  position: relative;
}
@media (max-width: 768px) {
  .project-survey__item:nth-child(4) .survey-card__graph::after {
    content: "";
    display: block;
    width: 24.5333333333vw;
    height: 21.8666666667vw;
    background-image: url(../images/project-survey-graph-deco-04.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: absolute;
    right: -12vw;
    bottom: 0vw;
  }
}
@media (max-width: 768px) {
  .project-survey__item:nth-child(4) .survey-card__graph-image {
    width: 32.5333333333vw;
  }
}
.project-survey__item:nth-child(-n+2) {
  margin-bottom: clamp(2.4rem, 1.3167420814rem + 1.3574660633vw, 3rem);
}
.project-survey__text {
  margin-top: clamp(2rem, 0.1945701357rem + 2.2624434389vw, 3rem);
}
.project-survey__text p {
  font-size: clamp(1.2rem, 0.4778280543rem + 0.9049773756vw, 1.6rem);
  line-height: 1.8;
}
.project-survey__overview {
  margin-top: clamp(2rem, 0.1945701357rem + 2.2624434389vw, 3rem);
}
.project-survey__overview-title {
  font-size: clamp(1.4rem, 1.0389140271rem + 0.4524886878vw, 1.6rem);
  margin-bottom: 1rem;
  color: var(--color-ion-cyan);
}
.project-survey__overview-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.7rem, -0.7443438914rem + 1.8099547511vw, 1.5rem);
}
@media (max-width: 768px) {
  .project-survey__overview-list {
    width: 100%;
  }
}
.project-survey__overview-list dt {
  width: 8rem;
}
@media (max-width: 768px) {
  .project-survey__overview-list dt {
    width: 13.3333333333vw;
  }
}
.project-survey__overview-list dt span {
  text-align: center;
  display: block;
  color: var(--color-primary);
  border: solid 1px var(--color-primary);
  border-radius: 0.4rem;
  font-size: 1.2rem;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .project-survey__overview-list dt span {
    font-size: 2.6666666667vw;
  }
}
.project-survey__overview-list dd {
  width: calc(100% - 8rem - clamp(0.7rem, -0.7443438914rem + 1.8099547511vw, 1.5rem));
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .project-survey__overview-list dd {
    width: calc(100% - 13.3333333333vw - 1.8666666667vw);
    font-size: 2.9333333333vw;
  }
}

.survey-card {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, -0.0832579186rem + 1.3574660633vw, 1.6rem);
  width: 100%;
  height: 100%;
  padding: clamp(2rem, 1.2778280543rem + 0.9049773756vw, 2.4rem);
  border-radius: clamp(0.4rem, -0.3221719457rem + 0.9049773756vw, 0.8rem);
  background-color: var(--color-white);
  box-shadow: clamp(0.2rem, 0.0194570136rem + 0.2262443439vw, 0.3rem) clamp(0.2rem, 0.0194570136rem + 0.2262443439vw, 0.3rem) clamp(0.8rem, -0.6443438914rem + 1.8099547511vw, 1.6rem) rgba(0, 171, 207, 0.1);
}
.survey-card__badge {
  width: fit-content;
  margin-inline: auto;
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 100vh;
  background-color: var(--color-primary);
  text-align: left;
  font-size: clamp(1.2rem, 0.4778280543rem + 0.9049773756vw, 1.6rem);
  text-align: center;
  line-height: 1.5;
  color: var(--color-white);
}
.survey-card__badge::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 10px 5px 0 5px;
  border-color: var(--color-primary) transparent transparent;
  translate: -50% 100%;
}
.survey-card__title {
  font-size: clamp(1.1rem, 0.1972850679rem + 1.1312217195vw, 1.6rem);
  line-height: 1.7;
  text-align: center;
}
.survey-card__title-em {
  font-size: clamp(1.5rem, 0.236199095rem + 1.5837104072vw, 2.2rem);
  color: var(--color-ion-cyan-text);
}
.survey-card__graph {
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  margin-top: auto;
}
.survey-card__graph-image {
  height: auto;
}
.survey-card__note {
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--color-ion-gray);
}
.survey-card__note:empty {
  visibility: hidden;
}

.store {
  position: relative;
  padding-block: clamp(12rem, -7.8597285068rem + 24.8868778281vw, 23rem) clamp(5rem, -4.0271493213rem + 11.3122171946vw, 10rem);
}
.store .section-wave--top {
  background-color: #F5FFFF;
}
.store__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.store__bg-color {
  position: absolute;
  inset: 0;
  background-color: var(--color-white);
}
.store__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.store__product {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: clamp(2rem, -1.6108597285rem + 4.5248868778vw, 4rem);
}
@media (max-width: 768px) {
  .store__product-image {
    width: 34.6666666667vw;
  }
}
.store__product-image img {
  height: auto;
}
.store__product-text {
  color: var(--color-ion-cyan);
  font-size: clamp(1.2rem, -0.9665158371rem + 2.7149321267vw, 2.4rem);
  line-height: 1.7;
}
@media (max-width: 768px) {
  .store__product-text {
    width: calc(100% - 34.6666666667vw);
  }
}
.store__lead {
  margin-bottom: clamp(2rem, -1.6108597285rem + 4.5248868778vw, 4rem);
  font-size: clamp(1.2rem, -0.9665158371rem + 2.7149321267vw, 2.4rem);
  line-height: 1.7;
  color: var(--color-ion-cyan);
  text-align: center;
}
.store-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.8rem, -1.4497737557rem + 4.07239819vw, 3.6rem);
  width: 100%;
  max-width: clamp(32.7rem, -122.7475113122rem + 194.7963800905vw, 118.8rem);
  list-style: none;
}
@media (max-width: 768px) {
  .store-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.store-logos__item {
  list-style: none;
}
.store-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: all var(--trd-duration);
}
.store-logo__image {
  width: 100%;
  height: auto;
}
.store-logo:hover {
  opacity: 0.7;
}

.pickup {
  position: relative;
  padding-block: clamp(9.2rem, -4.8823529412rem + 17.6470588235vw, 17rem) clamp(7rem, -5.6380090498rem + 15.8371040724vw, 14rem);
}
.pickup__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pickup__bg-color {
  position: absolute;
  inset: 0;
  background-color: var(--color-ion-cyan-pale);
}
.pickup__bg-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: hard-light;
  opacity: 0.7;
}
.pickup__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pickup-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, -1.6108597285rem + 4.5248868778vw, 4rem);
  width: clamp(50rem, -40.2714932127rem + 113.1221719457vw, 100rem);
  max-width: 100%;
  list-style: none;
}
@media (max-width: 768px) {
  .pickup-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pickup-cards__item {
  list-style: none;
}
.pickup-card {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, -0.6443438914rem + 1.8099547511vw, 1.6rem);
  text-decoration: none;
  color: inherit;
  transition: all var(--trd-duration);
}
.pickup-card__thumb {
  width: 100%;
  aspect-ratio: 434/228;
  overflow: hidden;
}
.pickup-card__thumb-image {
  width: 100%;
  height: auto;
}
.pickup-card__text {
  font-size: clamp(1.3rem, 0.9389140271rem + 0.4524886878vw, 1.5rem);
  line-height: 1.6;
}
.pickup-card:hover {
  opacity: 0.7;
}