@charset "UTF-8";
/*======================================
CSS information

file name   : _variables.scss
author		: Oyakawa Masaki
style info  : 基本・共通設定
======================================*/
/*======================================
【 基本設定、リンクカラーなど 】
======================================*/
/*======================================
【 ブレイクポイント 】
・@mixin mediaQuery($device) に $breakpoint を入力
・使用例：@mixin mediaQuery(sp)　→ デバイスサイズ（sp）のメディアクエリが適用される
======================================*/
/*======================================
	【 デバイス別：表示・非表示設定 】
======================================*/
@media screen and (min-width: 1025px) {
  .view_tab-sp,
  .view_tab {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .view_sp {
    display: none !important;
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .view_pc,
  .view_sp {
    display: none !important;
  }
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
  .view_pc {
    display: none !important;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .view_pc-tab,
  .view_tab {
    display: none !important;
  }
}
/*======================================
【 基本フォント設定 】
・@function：ルールを作成
・@return；出力結果
・@mixin fsz：基準を 10px に設定
・使用例：@include fsz(14);　→ 14px を vw に変換して出力
======================================*/
/*======================================
【 任意のCSSを切り分け設定 】
・@include variable(プロパティ,pc幅,tab~sp幅); or @include variable(プロパティ,pc幅,tab幅,sp幅);
・使用例：@include variable(margin-block, 100px, 75px, 50px);
======================================*/
/*======================================
【 フォントファミリー設定 】
・使用例：font-gothic($lang) 言語ごとに設定
======================================*/
/*======================================
CSS information

file name   : _mixin.scss
author		: Oyakawa Masaki
style info  : 基本・共通設定
======================================*/
/*----------------------------------------------
【 コンテンツ幅 】
・$content_size のみ数値調整しやすく設定
・使用例：@include contentWidth(1280)　→ max-width: 1280px
----------------------------------------------*/
/*======================================
【 コンテンツの割合を計算 】
・使用例：percent(100, 200); → 出力結果：親要素 200px に対して、対象要素 100px なので【 50% 】ととなる。
======================================*/
/*======================================
【 vw変換設定 】
・px を vw に変換する関数（デバイス幅対応）
・@param {Number} $px - px単位の数値
・@param {Number} $device - 基準となるデバイス幅（例: 375, 768, 1440）
・@return {Number} vw単位の数値
======================================*/
/*======================================
CSS information

file name	: common.css
author		: Oyakawa Masaki
style info  : 基本・共通設定
======================================*/
/*======================================
	【　body　】
======================================*/
html {
  position: relative;
}
html::before {
  content: "";
  backdrop-filter: blur(0);
  transition: 0.3s backdrop-filter ease-in-out;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 2;
}
html.has-opened {
  overflow: hidden;
}
html.has-opened::before {
  background-color: rgba(216, 239, 255, 0.4);
  backdrop-filter: blur(5px);
  pointer-events: auto;
  transition: 0.3s backdrop-filter ease-in-out;
}
html body {
  animation: animation_bg 8s infinite linear;
  background: #fff url(../images/common/bg-dot__gray.png) repeat top left;
  box-sizing: border-box;
  line-height: 2;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 auto;
  padding: 0;
  position: relative;
  word-break: break-all;
}
html body main {
  overflow: hidden;
}
html body p {
  margin: 0;
  padding: 0;
}
html body i {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
}
html body a {
  color: #007bfc;
  text-decoration: none;
}
html body img {
  height: auto;
  max-width: 100%;
  width: auto;
}

/*======================================
	【　マウスカーソルの軌跡　】
======================================*/
@media screen and (min-width: 1025px) {
  .cursor-circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px; /* 最初の50%のサイズ (48px の半分) */
    height: 24px;
    background-color: rgba(106, 0, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
  }
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
  .cursor-circle {
    display: none;
  }
}

/*======================================
	【 アニメーション 】
======================================*/
@keyframes animation_bg {
  0% {
    background-position-x: 0;
    background-position-y: 0;
  }
  100% {
    background-position-x: 100px;
    background-position-y: -100px;
  }
}
@keyframes infiniteSlides {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes infiniteSlidesReverse {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/*======================================
	ヘッダー
======================================*/
.p-header {
  box-sizing: border-box;
  border-radius: 100vmax 0 0 100vmax;
  display: flex;
  justify-content: flex-end;
  padding: 0.5em 1em;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .p-header__logo {
    flex: 1;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .p-header__logo {
    width: 100%;
  }
}
.p-header__hamburger {
  cursor: pointer;
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  position: fixed;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  top: 0;
  right: 1.25em;
  height: 1.75em;
  width: 4.5em;
}
.p-header__hamburger span {
  background-color: #1a1a1a;
  display: block;
  transform: rotate(0deg);
  transition: ease 0.4s;
  position: absolute;
  right: 0;
  height: 2px;
  width: 2.5em;
}
.p-header__hamburger span:nth-child(1) {
  top: 0;
  width: 60%;
}
.p-header__hamburger span:nth-child(2) {
  top: calc(50% - 1px);
  width: 80%;
}
.p-header__hamburger span:nth-child(3) {
  bottom: 0;
  width: 100%;
}
.p-header__hamburger.is-loaded {
  opacity: 1;
  top: 40px;
  transition: opacity 0.5s, top 0.5s ease-in-out;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .p-header__hamburger.is-loaded {
    top: 30px;
  }
}
.p-header__hamburger.is-opened {
  right: 2.2em;
  transition: all 0.3s ease-in-out;
  width: 1.75em;
}
.p-header__hamburger.is-opened span {
  background-color: #6a00ff;
  width: 100%;
}
.p-header__hamburger.is-opened span:nth-child(1) {
  top: 50%;
  transform: rotate(-45deg) translateY(-50%) scale(1.3);
}
.p-header__hamburger.is-opened span:nth-child(2) {
  opacity: 0;
  transition: opacity 0s;
}
.p-header__hamburger.is-opened span:nth-child(3) {
  top: 50%;
  bottom: auto;
  transform: rotate(45deg) translateY(-50%) scale(1.3);
}

/*======================================
	モーダルメニュー
======================================*/
.p-modal__menu {
  background-color: rgba(106, 0, 255, 0.86);
  border-radius: 50%;
  box-shadow: 0 0 2em rgba(96, 91, 117, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: fixed;
  top: 50%;
  right: 50%;
  transform: scale(0) translate(50%, -50%);
  transform-origin: top right;
  transition: 0.3s all ease-in-out;
  height: 25vw;
  width: 25vw;
  z-index: 2;
}
.p-modal__menu.is-opened {
  transform: scale(1) translate(50%, -50%);
  transition: 0.3s all ease-in-out;
  height: 90vw;
  width: 90vw;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .p-modal__menu.is-opened {
    height: 160vw;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .p-modal__menu.is-opened {
    width: 160vw;
  }
}
.p-modal__menu.is-opened .p-modal__menu--list {
  opacity: 1;
  transform: rotate(0);
  transition: 0.3s transform, 0.3s opacity ease-in-out;
}
.p-modal__menu--list {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  opacity: 0.5;
  padding: 0;
  transform: rotate(-360deg);
  transition: 0.3s opacity ease-in-out;
  width: 100%;
}
.p-modal__menu--item {
  display: inline-block;
  text-align: center;
}
.p-modal__menu--item a {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 2em;
  position: relative;
  padding: 1.5em 2em;
}
.p-modal__menu--item a span {
  color: #fff;
  font-weight: bold;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.p-modal__menu--item a span.en {
  font-size: clamp(20px, 2vw, 26px);
}
.p-modal__menu--item a span.jp {
  font-size: clamp(14px, 1.5vw, 16px);
}
.p-modal__menu--item a::after {
  content: "";
  background-color: #ff24e7;
  margin-inline: calc(50% - 50vw);
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
  height: 100%;
  width: 0%;
}
.p-modal__menu--item a:hover::after {
  width: 100vw;
}

/*======================================
	フッター
======================================*/
.l-footer {
  background: linear-gradient(60deg, #FFCDF7, #DEDAFB, #CDEBF9, #C9F3EC);
  position: relative;
  z-index: 1;
}
.l-footer .p-footer__menu--list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 auto;
  padding: 0;
  width: 90%;
}
.l-footer .p-footer__menu--item {
  display: inline-block;
  text-align: center;
}
.l-footer .p-footer__menu--item a {
  position: relative;
  padding: 1.5em 2em;
}
.l-footer .p-footer__menu--item a:hover span {
  color: #ff24e7;
}
.l-footer .p-footer__menu--item a span {
  color: #1a1a1a;
  font-weight: bold;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.l-footer .p-footer__menu--item a span.en {
  display: block;
  font-size: clamp(14px, 2vw, 20px);
}
.l-footer .p-footer__menu--item a span.jp {
  display: block;
  font-size: clamp(12px, 1.2vw, 14px);
  margin-top: 0.75em;
}
.l-footer .p-copyright .c-text {
  font-weight: bold;
  padding-block: 2em;
  text-align: center;
}

/*======================================
	JS関連
======================================*/
.js-fadeIn {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transform: scale3d(0.4, 1, 5) skew(10deg, 10deg);
}
.js-fadeIn.is-loaded {
  opacity: 1;
  transition: all 1s ease-in-out;
  transform: scale3d(1, 1, 1) skew(0deg, 0deg);
}

.js-fadeUp {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transform: translate(0, 50px);
}
.js-fadeUp.is-loaded {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 1s ease-in-out;
}

.js-fadeDown {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transform: translate(0, -50px);
}
.js-fadeDown.is-loaded {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 1s ease-in-out;
}

.js-fadeLeft {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transform: translate(-50px, 0);
}
.js-fadeLeft.is-loaded {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 1s ease-in-out;
}

.js-fadeRight {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transform: translate(50px, 0);
}
.js-fadeRight.is-loaded {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 1s ease-in-out;
}

.js-fadeScale {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transform: scale(0.6);
}
.js-fadeScale.is-loaded {
  opacity: 1;
  transform: scale(1);
  transition: all 0.5s ease-in-out;
}

/*======================================
CSS information

file name	: conponents.css
author		: Oyakawa Masaki
style info  : 基本・共通設定
======================================*/
/*======================================
	【　title関連　】
======================================*/
.c-heading--large {
  margin-inline: auto;
  text-align: center;
  position: relative;
  width: fit-content;
}
.c-heading--large span.jp {
  display: inline-block;
  line-height: 1.5;
  position: relative;
}
@media screen and (min-width: 1025px) {
  .c-heading--large span.jp {
    font-size: 1.25vw;
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .c-heading--large span.jp {
    font-size: 2.0833333333vw;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .c-heading--large span.jp {
    font-size: 3.7333333333vw;
  }
}
.c-heading--large span.jp::before {
  content: "";
  background: url(../images/common/icon-title__drip.svg) no-repeat left top/contain;
  opacity: 0;
  position: absolute;
  transform: rotate(45deg) translate(0, -10px);
  transition: 1s transform ease-in-out;
  left: -2.8em;
  top: -1.75em;
  height: 4em;
  max-width: 4em;
  width: 100%;
}
.c-heading--large span.jp.is-loaded::before {
  opacity: 1;
  transition: 1s transform, 0.5s opacity ease-in-out;
  transform: rotate(0deg) translate(0, 0);
}
.c-heading--large span.en {
  display: block;
  font-family: "Noto Sans", sans-serif;
  line-height: 0.7;
  position: relative;
}
@media screen and (min-width: 1025px) {
  .c-heading--large span.en {
    font-size: 5.5555555556vw;
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .c-heading--large span.en {
    font-size: 6.5104166667vw;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .c-heading--large span.en {
    font-size: 8vw;
  }
}
.c-heading--large span.en::before {
  content: "";
  background-color: #FFE0FC;
  border-radius: 50%;
  filter: blur(2px);
  transform: scale(0);
  transition: 1s transform ease-in-out;
  position: absolute;
  bottom: 0;
  right: -0.3em;
  height: 0.5em;
  width: 0.5em;
  z-index: -1;
}
.c-heading--large span.en::after {
  content: "";
  background-color: #1a1a1a;
  transition: 1s right ease-in-out;
  opacity: 0;
  position: absolute;
  bottom: 0.15em;
  right: -1em;
  height: 1px;
  width: 0.4em;
}
.c-heading--large span.en.is-loaded::before {
  transform: scale(1);
  transition: 1s transform ease-in-out;
}
.c-heading--large span.en.is-loaded::after {
  opacity: 1;
  right: -0.5em;
  transition: 1s right, 2s opacity ease-in-out;
}
.c-heading--large.dark span {
  color: #2B2B3A;
  text-shadow: 0 0 1em #af90b1;
}
.c-heading--large.dark span.jp::before {
  background: url(../images/common/icon-title__drip-dark.svg) no-repeat left top/contain;
}
.c-heading--large.dark span.en::before {
  background-color: #f6f0c4;
}
.c-heading--medium {
  margin: 0;
  position: relative;
}
.c-heading--medium span.jp {
  display: block;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 1025px) {
  .c-heading--medium span.jp {
    font-size: 1.5277777778vw;
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .c-heading--medium span.jp {
    font-size: 2.2135416667vw;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .c-heading--medium span.jp {
    font-size: 4.2666666667vw;
  }
}
.c-heading--medium span.jp small {
  font-size: clamp(14px, 70%, 17px);
  line-height: 1.6;
}
.c-heading--medium span.jp .u-color-yellow {
  color: #eeff34;
}
.c-heading--medium span.jp .u-color-violet {
  color: #8777c0;
}
.c-heading--medium span.jp .u-fs-sm {
  font-size: 86%;
}
.c-heading--small {
  margin-block: 0 0.75em;
  position: relative;
}
.c-heading--small span.jp {
  display: flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1.5;
}
@media screen and (min-width: 1025px) {
  .c-heading--small span.jp {
    font-size: 1.25vw;
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .c-heading--small span.jp {
    font-size: 2.0833333333vw;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .c-heading--small span.jp {
    font-size: 3.7333333333vw;
  }
}

/*======================================
	【　text関連　】
======================================*/
.c-text {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 500;
  line-height: 2;
}
.c-text + .c-text {
  margin-top: 1em;
}

.c-text--sm {
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 500;
  line-height: 2;
}
.c-text--sm + .c-text--sm {
  margin-top: 1em;
}

/*======================================
	【　button関連　】
======================================*/
.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25em;
  margin-inline: auto;
  text-align: center;
}
.c-button a, .c-button button {
  appearance: none;
  background-color: var(--button-bg-color, #1a1a1a);
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 100vmax;
  color: var(--button-text-color, #fff);
  cursor: pointer;
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 2;
  padding: 0.75em 1em;
  transition: 0.3s box-shadow, 0.3s transform ease-in-out;
  position: relative;
  max-width: 350px;
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .c-button a, .c-button button {
    width: 80%;
  }
}
.c-button a:hover, .c-button button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.13);
  transition: 0.3s box-shadow, 0.3s transform ease-in-out;
  transform: scale(0.9);
}
.c-button a span, .c-button button span {
  font-weight: 700;
  text-shadow: 0 0 1px #fff;
}
.c-button a.u-color--gradation, .c-button button.u-color--gradation {
  --button-bubble-color: #d3e8f9;
  --button-text-color: #1a1a1a;
  background: linear-gradient(90deg, #FFCDF7 0%, #CDEBF9 100%);
  position: relative;
}
.c-button a.u-color--black, .c-button button.u-color--black {
  --button-bg-color: #1a1a1a;
  --button-bubble-color: #1a1a1a;
  --button-text-color: #fff;
  background: var(--button-bg-color);
}
.c-button a.u-type--glass, .c-button button.u-type--glass {
  --button-bubble-color: rgba(255, 255, 255, .2);
  --button-bg-color: rgba(255, 255, 255, .2);
  --button-text-color: #1a1a1a;
}
.c-button a.u-hover--bubbles .i-button--bubbles, .c-button button.u-hover--bubbles .i-button--bubbles {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s opacity ease-in-out;
  height: 100%;
  width: 3em;
}
.c-button a.u-hover--bubbles .i-button--bubbles span, .c-button button.u-hover--bubbles .i-button--bubbles span {
  background-color: var(--button-bubble-color, #1a1a1a);
  border-radius: 50%;
  position: absolute;
  right: 8%;
  top: 12%;
  opacity: 1;
}
.c-button a.u-hover--bubbles .i-button--bubbles span:nth-of-type(1), .c-button button.u-hover--bubbles .i-button--bubbles span:nth-of-type(1) {
  animation: anime-bezier 1.5s linear infinite;
}
.c-button a.u-hover--bubbles .i-button--bubbles span:nth-of-type(2), .c-button button.u-hover--bubbles .i-button--bubbles span:nth-of-type(2) {
  animation: anime-bezier 1.8s linear infinite;
}
.c-button a.u-hover--bubbles .i-button--bubbles span:nth-of-type(3), .c-button button.u-hover--bubbles .i-button--bubbles span:nth-of-type(3) {
  animation: anime-bezier 2s linear infinite;
}
.c-button a.u-hover--bubbles .i-button--bubbles span:nth-of-type(1), .c-button button.u-hover--bubbles .i-button--bubbles span:nth-of-type(1) {
  right: 15%;
  height: 5px;
  width: 5px;
}
.c-button a.u-hover--bubbles .i-button--bubbles span:nth-of-type(2), .c-button button.u-hover--bubbles .i-button--bubbles span:nth-of-type(2) {
  right: 32%;
  height: 9px;
  width: 9px;
}
.c-button a.u-hover--bubbles .i-button--bubbles span:nth-of-type(3), .c-button button.u-hover--bubbles .i-button--bubbles span:nth-of-type(3) {
  top: 32%;
  right: 10%;
  height: 13px;
  width: 13px;
}

@keyframes anime-bezier {
  0% {
    transform: translate3d(0, 0, 0);
  }
  0.8% {
    transform: translate3d(0.63px, -0.07px, 0);
  }
  1.6% {
    transform: translate3d(1.23px, -0.16px, 0);
  }
  2.4% {
    transform: translate3d(1.8px, -0.27px, 0);
  }
  3.2% {
    transform: translate3d(2.35px, -0.39px, 0);
  }
  4% {
    transform: translate3d(2.87px, -0.53px, 0);
  }
  4.8% {
    transform: translate3d(3.37px, -0.69px, 0);
  }
  5.6% {
    transform: translate3d(3.85px, -0.86px, 0);
  }
  6.4% {
    transform: translate3d(4.3px, -1.05px, 0);
  }
  7.19% {
    transform: translate3d(4.73px, -1.24px, 0);
  }
  8% {
    transform: translate3d(5.14px, -1.45px, 0);
  }
  8.79% {
    transform: translate3d(5.53px, -1.67px, 0);
  }
  9.6% {
    transform: translate3d(5.9px, -1.91px, 0);
  }
  10.4% {
    transform: translate3d(6.26px, -2.15px, 0);
  }
  11.2% {
    transform: translate3d(6.59px, -2.39px, 0);
  }
  12% {
    transform: translate3d(6.91px, -2.65px, 0);
  }
  12.8% {
    transform: translate3d(7.22px, -2.91px, 0);
  }
  13.6% {
    transform: translate3d(7.5px, -3.18px, 0);
  }
  14.39% {
    transform: translate3d(7.77px, -3.46px, 0);
  }
  15.2% {
    transform: translate3d(8.03px, -3.74px, 0);
  }
  16% {
    transform: translate3d(8.28px, -4.03px, 0);
  }
  16.8% {
    transform: translate3d(8.51px, -4.32px, 0);
  }
  17.59% {
    transform: translate3d(8.73px, -4.61px, 0);
  }
  18.39% {
    transform: translate3d(8.94px, -4.9px, 0);
  }
  19.2% {
    transform: translate3d(9.14px, -5.21px, 0);
  }
  20% {
    transform: translate3d(9.33px, -5.51px, 0);
  }
  20.8% {
    transform: translate3d(9.5px, -5.81px, 0);
  }
  21.6% {
    transform: translate3d(9.67px, -6.11px, 0);
  }
  22.4% {
    transform: translate3d(9.82px, -6.42px, 0);
  }
  23.2% {
    transform: translate3d(9.97px, -6.72px, 0);
  }
  24% {
    transform: translate3d(10.11px, -7.03px, 0);
  }
  24.8% {
    transform: translate3d(10.24px, -7.33px, 0);
  }
  25.6% {
    transform: translate3d(10.37px, -7.64px, 0);
  }
  26.4% {
    transform: translate3d(10.48px, -7.94px, 0);
  }
  27.2% {
    transform: translate3d(10.59px, -8.24px, 0);
  }
  28% {
    transform: translate3d(10.7px, -8.54px, 0);
  }
  28.79% {
    transform: translate3d(10.79px, -8.83px, 0);
  }
  29.6% {
    transform: translate3d(10.88px, -9.13px, 0);
  }
  30.4% {
    transform: translate3d(10.97px, -9.43px, 0);
  }
  31.2% {
    transform: translate3d(11.05px, -9.72px, 0);
  }
  32% {
    transform: translate3d(11.12px, -10px, 0);
  }
  32.8% {
    transform: translate3d(11.19px, -10.29px, 0);
  }
  33.6% {
    transform: translate3d(11.25px, -10.57px, 0);
  }
  34.4% {
    transform: translate3d(11.31px, -10.85px, 0);
  }
  35.19% {
    transform: translate3d(11.37px, -11.12px, 0);
  }
  36% {
    transform: translate3d(11.42px, -11.39px, 0);
  }
  36.79% {
    transform: translate3d(11.47px, -11.66px, 0);
  }
  37.6% {
    transform: translate3d(11.51px, -11.92px, 0);
  }
  38.4% {
    transform: translate3d(11.56px, -12.18px, 0);
  }
  39.2% {
    transform: translate3d(11.59px, -12.44px, 0);
  }
  40% {
    transform: translate3d(11.63px, -12.69px, 0);
  }
  40.79% {
    transform: translate3d(11.66px, -12.93px, 0);
  }
  41.6% {
    transform: translate3d(11.69px, -13.17px, 0);
  }
  42.4% {
    transform: translate3d(11.72px, -13.41px, 0);
  }
  43.2% {
    transform: translate3d(11.74px, -13.64px, 0);
  }
  44% {
    transform: translate3d(11.77px, -13.87px, 0);
  }
  44.8% {
    transform: translate3d(11.79px, -14.09px, 0);
  }
  45.6% {
    transform: translate3d(11.81px, -14.31px, 0);
  }
  46.4% {
    transform: translate3d(11.83px, -14.52px, 0);
  }
  47.2% {
    transform: translate3d(11.84px, -14.73px, 0);
  }
  48% {
    transform: translate3d(11.86px, -14.93px, 0);
  }
  48.8% {
    transform: translate3d(11.87px, -15.12px, 0);
  }
  49.6% {
    transform: translate3d(11.88px, -15.32px, 0);
  }
  50.4% {
    transform: translate3d(11.89px, -15.5px, 0);
  }
  51.2% {
    transform: translate3d(11.9px, -15.69px, 0);
  }
  52% {
    transform: translate3d(11.91px, -15.86px, 0);
  }
  52.8% {
    transform: translate3d(11.91px, -16.04px, 0);
  }
  53.6% {
    transform: translate3d(11.92px, -16.2px, 0);
  }
  54.4% {
    transform: translate3d(11.93px, -16.37px, 0);
  }
  55.2% {
    transform: translate3d(11.93px, -16.52px, 0);
  }
  56% {
    transform: translate3d(11.93px, -16.68px, 0);
  }
  56.8% {
    transform: translate3d(11.94px, -16.82px, 0);
  }
  57.59% {
    transform: translate3d(11.94px, -16.97px, 0);
  }
  58.4% {
    transform: translate3d(11.94px, -17.1px, 0);
  }
  59.2% {
    transform: translate3d(11.94px, -17.24px, 0);
  }
  60% {
    transform: translate3d(11.95px, -17.37px, 0);
  }
  60.8% {
    transform: translate3d(11.95px, -17.49px, 0);
  }
  61.6% {
    transform: translate3d(11.95px, -17.61px, 0);
  }
  62.4% {
    transform: translate3d(11.95px, -17.72px, 0);
  }
  63.2% {
    transform: translate3d(11.95px, -17.84px, 0);
  }
  64% {
    transform: translate3d(11.95px, -17.94px, 0);
  }
  64.8% {
    transform: translate3d(11.95px, -18.04px, 0);
  }
  65.6% {
    transform: translate3d(11.95px, -18.14px, 0);
  }
  66.4% {
    transform: translate3d(11.94px, -18.23px, 0);
  }
  67.2% {
    transform: translate3d(11.94px, -18.32px, 0);
  }
  68% {
    transform: translate3d(11.94px, -18.41px, 0);
  }
  68.8% {
    transform: translate3d(11.94px, -18.49px, 0);
  }
  69.59% {
    transform: translate3d(11.94px, -18.56px, 0);
  }
  70.39% {
    transform: translate3d(11.94px, -18.64px, 0);
  }
  71.2% {
    transform: translate3d(11.94px, -18.71px, 0);
  }
  72% {
    transform: translate3d(11.94px, -18.77px, 0);
    opacity: 1;
  }
  72.8% {
    transform: translate3d(11.93px, -18.83px, 0);
  }
  73.59% {
    transform: translate3d(11.93px, -18.89px, 0);
  }
  74.4% {
    transform: translate3d(11.93px, -18.95px, 0);
  }
  75.2% {
    transform: translate3d(11.93px, -19px, 0);
  }
  76% {
    transform: translate3d(11.93px, -19.05px, 0);
  }
  76.8% {
    transform: translate3d(11.93px, -19.1px, 0);
  }
  77.6% {
    transform: translate3d(11.93px, -19.14px, 0);
  }
  78.4% {
    transform: translate3d(11.93px, -19.18px, 0);
  }
  79.2% {
    transform: translate3d(11.92px, -19.22px, 0);
  }
  80% {
    transform: translate3d(11.92px, -19.25px, 0);
  }
  80.8% {
    transform: translate3d(11.92px, -19.28px, 0);
  }
  81.59% {
    transform: translate3d(11.92px, -19.31px, 0);
  }
  82.4% {
    transform: translate3d(11.92px, -19.34px, 0);
  }
  83.2% {
    transform: translate3d(11.92px, -19.36px, 0);
  }
  84% {
    transform: translate3d(11.92px, -19.38px, 0);
  }
  84.8% {
    transform: translate3d(11.92px, -19.4px, 0);
  }
  85.6% {
    transform: translate3d(11.92px, -19.42px, 0);
  }
  86.4% {
    transform: translate3d(11.92px, -19.44px, 0);
  }
  87.2% {
    transform: translate3d(11.92px, -19.45px, 0);
  }
  88% {
    transform: translate3d(11.92px, -19.47px, 0);
  }
  88.8% {
    transform: translate3d(11.92px, -19.48px, 0);
  }
  89.6% {
    transform: translate3d(11.92px, -19.49px, 0);
  }
  90.4% {
    transform: translate3d(11.92px, -19.49px, 0);
  }
  91.2% {
    transform: translate3d(11.92px, -19.5px, 0);
  }
  92% {
    transform: translate3d(11.92px, -19.51px, 0);
  }
  92.8% {
    transform: translate3d(11.92px, -19.51px, 0);
  }
  93.6% {
    transform: translate3d(11.92px, -19.52px, 0);
  }
  94.4% {
    transform: translate3d(11.92px, -19.52px, 0);
  }
  95.19% {
    transform: translate3d(11.92px, -19.52px, 0);
  }
  96% {
    transform: translate3d(11.92px, -19.52px, 0);
  }
  96.8% {
    transform: translate3d(11.92px, -19.52px, 0);
  }
  97.6% {
    transform: translate3d(11.92px, -19.52px, 0);
  }
  98.4% {
    transform: translate3d(11.92px, -19.52px, 0);
  }
  100% {
    transform: translate3d(11.92px, -19.52px, 0);
    opacity: 0;
  }
}
/*======================================
	【　リスト関連　】
======================================*/
.c-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0;
  margin-inline: 0;
  margin-bottom: 0;
}
.c-taglist li {
  background-color: var(--category-title-color, #1a1a1a);
  border-radius: 100vmax;
  color: #fff;
  display: inline-block;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: bold;
  line-height: 1;
  padding: 0.5em 1em;
  position: relative;
}
.c-taglist li::before {
  content: "#";
  margin-right: 2px;
}

/*======================================
	【　モーダル関連　】
======================================*/
.l-modal {
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100vw;
  z-index: 10;
}
.l-modal .p-modal {
  background-color: #fff;
  border-radius: 1em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.3em;
  align-items: center;
  justify-content: center;
  padding: 4em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: clamp(350px, 55vw, 450px);
  width: clamp(350px, 55vw, 450px);
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-modal .p-modal {
    padding: 2.5em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-modal .p-modal {
    padding: 1em;
  }
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
  .l-modal .p-modal {
    height: clamp(420px, 45vw, 500px);
    width: clamp(420px, 45vw, 500px);
  }
}
.l-modal .p-modal__close {
  appearance: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  display: block;
  position: relative;
  width: 84%;
}
.l-modal .p-modal__close span {
  background-color: #1a1a1a;
  border-radius: 100vmax;
  color: #fff;
  display: block;
  padding: 0.25em;
  transition: 0.3s background-color, 0.1s color ease-in-out;
  width: 100%;
}
.l-modal .p-modal__close:hover span {
  background-color: #666;
  transition: 0.3s background-color, 0.1s color ease-in-out;
}
.l-modal .c-heading--medium {
  line-height: 1.7;
  text-align: center;
}
.l-modal .c-heading--medium .en span {
  color: #ff85b8;
}
.l-modal .c-heading--medium .jp {
  color: #c3c3c3;
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 0;
}
.l-modal img {
  display: block;
  max-width: clamp(160px, 20vw, 200px);
  padding: 0.5em;
}

/*======================================
CSS information

file name	: animation.css
author		: Oyakawa Masaki
style info  : アニメーション関連の設定
======================================*/
/*======================================
CSS information

file name   : page-index.scss
author		: Oyakawa Masaki
style info  : 基本・共通設定
======================================*/
/*======================================
	【　hero　】
======================================*/
.l-hero {
  position: fixed;
  top: 0;
  overflow: hidden;
  height: 100svh;
  width: 100%;
}
.l-hero .p-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
  z-index: 1;
}
.l-hero .p-hero::after {
  content: "";
  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  opacity: 0;
  position: absolute;
  bottom: 0;
  height: 50%;
  width: 100%;
}
.l-hero .p-hero.is-progress-complete::after {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.l-hero .p-hero .gsap-progress-bar {
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 4px;
  width: 90%;
}
.l-hero .p-hero .gsap-progress-bar .progress-bar__fill {
  animation: animation_bgChange 10s infinite linear;
  background: linear-gradient(60deg, #FFCDF7, #DEDAFB, #CDEBF9, #C9F3EC);
  border-radius: 4px 0 0 4px;
  transition: width 0.3s ease;
  height: 100%;
  width: 0%;
}
@keyframes animation_bgChange {
  0% {
    right: 0;
  }
  50% {
    right: 100vw;
  }
  100% {
    right: 0;
  }
}
.l-hero .p-hero__text {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 1;
}
@media screen and (max-height: 440px) {
  .l-hero .p-hero__text {
    top: 34%;
  }
}
@media screen and (min-width: 640px) and (max-width: 767px) {
  .l-hero .p-hero__text {
    top: 34%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .p-hero__text {
    top: 37vh;
  }
}
.l-hero .p-hero__text h1.c-heading--large {
  margin: 0 auto;
  line-height: 1.6;
  position: relative;
  opacity: 0;
  text-align: center;
  max-width: 90%;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .l-hero .p-hero__text h1.c-heading--large {
    font-size: 5.5555555556vw;
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-hero .p-hero__text h1.c-heading--large {
    font-size: 5.5989583333vw;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .p-hero__text h1.c-heading--large {
    font-size: 13.3333333333vw;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .p-hero__text h1.c-heading--large {
    line-height: 1.4;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .p-hero__text h1.c-heading--large {
    text-align: left;
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-hero .p-hero__text h1.c-heading--large {
    max-width: 92%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .p-hero__text h1.c-heading--large {
    max-width: fit-content;
  }
}
@media screen and (min-width: 640px) and (max-width: 767px) {
  .l-hero .p-hero__text h1.c-heading--large {
    font-size: clamp(33px, 8vw, 45px);
  }
}
.l-hero .p-hero__text h1.c-heading--large span {
  opacity: 0;
  text-shadow: 1px 1px 2px #fff;
  transition: 0.3s color ease-in-out;
}
.l-hero .p-hero__text h1.c-heading--large span:nth-of-type(1), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(2), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(3), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(5), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(10), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(11) {
  font-size: 1.2em;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(1), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(2), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(3), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(5), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(10), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(11) {
    font-size: 1em;
  }
}
.l-hero .p-hero__text h1.c-heading--large span:nth-of-type(4), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(6), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(7), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(8), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(9), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(12), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(13), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(14), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(15), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(16) {
  font-size: 0.8em;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(4), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(6), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(7), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(8), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(9), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(12), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(13), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(14), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(15), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(16) {
    font-size: 0.7em;
  }
}
.l-hero .p-hero__text h1.c-heading--large span:nth-of-type(4), .l-hero .p-hero__text h1.c-heading--large span:nth-of-type(6) {
  margin-inline: 5px;
}
.l-hero .p-hero__text h1.c-heading--large span:nth-of-type(10) {
  margin-left: 5px;
}
.l-hero .p-hero__text h1.c-heading--large span:nth-of-type(11) {
  margin-right: 5px;
}
.l-hero .p-hero__text h1.c-heading--large.is-loaded span:nth-of-type(1), .l-hero .p-hero__text h1.c-heading--large.is-loaded span:nth-of-type(2), .l-hero .p-hero__text h1.c-heading--large.is-loaded span:nth-of-type(3) {
  color: #6497f5;
}
.l-hero .p-hero__text h1.c-heading--large.is-loaded span:nth-of-type(5) {
  color: #f5647d;
}
.l-hero .p-hero__text h1.c-heading--large.is-loaded span:nth-of-type(10), .l-hero .p-hero__text h1.c-heading--large.is-loaded span:nth-of-type(11) {
  color: #8d77f5;
}
.l-hero .p-hero__text .logo {
  display: block;
  opacity: 0;
  position: absolute;
  right: 5%;
  bottom: -60%;
  transform: rotate(-7deg);
  width: clamp(200px, 30vw, 300px) !important;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .p-hero__text .logo {
    bottom: auto;
  }
}
.l-hero .p-hero__text .logo.is-loaded {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s ease-in-out;
}
.l-hero .p-hero__text > * {
  color: #1a1a1a;
}
.l-hero .p-hero > .c-text {
  color: #1a1a1a;
  font-size: clamp(14.5px, 2.5vw, 17px);
  margin-inline: auto;
  opacity: 0;
  position: absolute;
  bottom: clamp(30px, 5vw, 80px);
  text-align: left;
  text-shadow: 0 0 2.4em rgb(152, 148, 190);
  transform: translateY(50px);
  max-width: 86%;
  width: 100%;
  word-break: keep-all;
  z-index: 1;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .p-hero > .c-text {
    width: 90%;
  }
}
.l-hero .p-hero > .c-text.is-loaded {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s ease-in-out;
}
.l-hero .p-hero video {
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0.1;
  height: 100%;
  width: 100%;
}
.l-hero .gsap-grid__overlay {
  background-color: transparent; /* 背景色はJSで追加 */
  display: grid;
  grid-template-columns: repeat(20, 1fr); /* Step 2: 20列 */
  grid-template-rows: repeat(10, 1fr); /* Step 2: 10行 */
  pointer-events: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 0;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-hero .gsap-grid__overlay {
    grid-template-columns: repeat(8, 1fr); /* Step 2: 10列 */
    grid-template-rows: repeat(10, 1fr); /* Step 2: 10行 */
  }
}
.l-hero .gsap-grid__overlay .cell {
  border: 1px solid rgba(255, 255, 255, 0.5); /* Step 2: 線で分割 */
  opacity: 0; /* Step 2: 初期は見えない */
  transform: scale(1); /* Step 3: 初期スケール */
}
.l-hero .gsap-circle__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.l-hero .gsap-circle__overlay .gsap-semiCircle__wrap {
  position: absolute;
  transform-origin: center;
  height: 30vw;
  width: 30vw;
}
.l-hero .gsap-circle__overlay .gsap-semiCircle__wrap.top-left {
  top: -5vw;
  left: -5vw;
}
.l-hero .gsap-circle__overlay .gsap-semiCircle__wrap.bottom-right {
  bottom: -5vw;
  right: -5vw;
}
.l-hero .gsap-circle__overlay .gsap-semiCircle__wrap .item-semiCircle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid white;
  border-radius: 50%;
  clip-path: inset(0 0 50% 0); /* 上半分だけ表示 = 反円 */
  opacity: 0;
  transform: scale(0.5) rotate(0deg);
}
.l-hero .gsap-circle__overlay .gsap-semiCircle__wrap .item-semiCircle.small {
  top: 40%;
  left: 40%;
  height: 8vw;
  width: 8vw;
}
.l-hero .gsap-circle__overlay .gsap-semiCircle__wrap .item-semiCircle.large {
  top: 0;
  left: 0;
  height: 30vw;
  width: 30vw;
}

/*======================================
	【　main / page-index　】
======================================*/
#page-index {
  animation: animation_bg 8s infinite linear;
  background: #fff url(../images/common/bg-dot__gray.png) repeat top left;
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.1);
  margin-top: 100vh;
  position: relative;
  z-index: 1;
}

/*======================================
	【　status　】
======================================*/
.l-status {
  padding-top: 20vh;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-status {
    padding-top: 10vh;
  }
}
.l-status .p-status {
  margin: auto;
  max-width: 1440px;
  width: 95%;
}
.l-status .p-status__grid {
  margin-top: 2em;
  gap: 1.5em;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-status .p-status__grid {
    margin-top: 1.5em;
  }
}
@media screen and (min-width: 1025px) {
  .l-status .p-status__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-status .p-status__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .l-status .p-status__grid {
    display: grid;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-status .p-status__grid {
    display: flex;
    flex-direction: column;
  }
}
.l-status .p-status__item {
  border: 2px solid #fff;
  border-radius: 1em;
  box-shadow: 0 4px 0.5em rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 1.7em;
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-status .p-status__item {
    padding: 1.3em;
  }
}
.l-status .p-status__item::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
}
.l-status .p-status__item::after {
  content: "";
  animation: animation_bg 8s infinite linear;
  background: url(../images/common/bg-dot__white.png) repeat top left;
  opacity: 0.5;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.l-status .p-status__item[data-category=Profile] {
  --category-title-color: #FF7B93;
  display: flex;
  flex-direction: column;
  grid-area: 1/1/3/2;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-status .p-status__item[data-category=Profile] {
    flex-direction: row;
  }
}
.l-status .p-status__item[data-category=Profile]::before {
  background: linear-gradient(135deg, #ffebf6 0%, #ffe0e0 100%);
}
.l-status .p-status__item[data-category=Profile] .p-status__img img {
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 0.5em;
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
  .l-status .p-status__item[data-category=Profile] .p-status__img img {
    object-fit: cover;
    object-position: center 35%;
  }
}
.l-status .p-status__item[data-category=Profile] .p-status__detail {
  margin-top: 1em;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-status .p-status__item[data-category=Profile] {
    display: flex;
    justify-content: space-between;
    grid-area: 1/1/2/3;
  }
  .l-status .p-status__item[data-category=Profile] .p-status__img {
    width: 49%;
  }
  .l-status .p-status__item[data-category=Profile] .p-status__img img {
    background-color: #333;
    display: block;
    height: 100%;
    width: 100%;
  }
  .l-status .p-status__item[data-category=Profile] .p-status__detail {
    width: 45%;
  }
}
.l-status .p-status__item[data-category=Coding] {
  --category-title-color: #6c95c7;
  grid-area: 1/2/2/3;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-status .p-status__item[data-category=Coding] {
    grid-area: 2/1/3/2;
  }
}
.l-status .p-status__item[data-category=Coding]::before {
  background: linear-gradient(135deg, #e0efff 0%, #d6ffee 100%);
}
.l-status .p-status__item[data-category=Reports] {
  --category-title-color: #ea8f2a;
  grid-area: 1/3/2/4;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-status .p-status__item[data-category=Reports] {
    grid-area: 2/2/3/3;
  }
}
.l-status .p-status__item[data-category=Reports]::before {
  background: linear-gradient(135deg, #fff5e4 0%, #ffe2d6 100%);
}
.l-status .p-status__item[data-category="Light design"] {
  --category-title-color: #AF6CC7;
}
@media screen and (min-width: 1025px) {
  .l-status .p-status__item[data-category="Light design"] {
    grid-area: 2/2/3/3;
  }
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
  .l-status .p-status__item[data-category="Light design"] {
    grid-area: 3/1/4/2;
  }
}
.l-status .p-status__item[data-category="Light design"]::before {
  background: linear-gradient(135deg, #f1ecff 0%, #fed5ff 100%);
}
.l-status .p-status__item[data-category=Maintenance] {
  --category-title-color: #58b47d;
}
@media screen and (min-width: 1025px) {
  .l-status .p-status__item[data-category=Maintenance] {
    grid-area: 2/3/3/4;
  }
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
  .l-status .p-status__item[data-category=Maintenance] {
    grid-area: 3/2/4/3;
  }
}
.l-status .p-status__item[data-category=Maintenance]::before {
  background: linear-gradient(135deg, #faffe3 0%, #ccfac0 100%);
}
.l-status .p-status__detail {
  display: flex;
  align-items: stretch;
  gap: 1.2em;
  height: 100%;
}
.l-status .p-status__detail--category {
  border-right: 2px solid #fff;
  color: var(--category-title-color, #1a1a1a);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.3em;
  line-height: 1;
  padding-right: 1em;
  writing-mode: vertical-lr;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-status .p-status__detail--category {
    width: 1em;
  }
}
.l-status .p-status__detail--text .c-heading--medium {
  color: var(--category-title-color, #1a1a1a);
}
.l-status .p-status__detail--text .c-heading--medium span.jp {
  display: flex;
  align-items: center;
  gap: 0.5em;
  word-break: keep-all;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-status .p-status__detail--text .c-heading--medium img {
    max-width: 2em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-status .p-status__detail--text {
    flex: 1;
  }
}

/*======================================
	【　plactice　】
======================================*/
.l-plactice {
  margin-top: 20vh;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice {
    margin-top: 10vh;
  }
}
.l-plactice__img {
  margin-top: 6em;
  position: relative;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-plactice__img {
    margin-top: 5em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img {
    margin-top: 4em;
  }
}
.l-plactice__img::before {
  content: "";
  background-color: #BDBFF0;
  clip-path: polygon(0% 0%, 100% 63%, 100% 100%, 0% 100%);
  position: absolute;
  bottom: 0;
  height: 95%;
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img::before {
    clip-path: polygon(0% 0%, 100% 55%, 100% 100%, 0% 100%);
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img::before {
    height: 88%;
  }
}
.l-plactice__img--inner {
  aspect-ratio: 1440/632;
  margin-inline: auto;
  position: relative;
  max-width: 1440px;
  width: 80%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img--inner {
    width: 95%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1440px) {
  .l-plactice__img--inner {
    width: 60%;
  }
}
.l-plactice__img--inner > img {
  position: absolute;
}
.l-plactice__img--inner > img.illust-mac {
  aspect-ratio: 787/606;
  max-width: 62%;
  bottom: 8%;
  left: 21%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img--inner > img.illust-mac {
    bottom: 4%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img--inner > img.illust-mac {
    left: 18%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1600px) {
  .l-plactice__img--inner > img.illust-mac {
    bottom: 0%;
    left: 16%;
  }
}
.l-plactice__img--inner > img.illust-books {
  aspect-ratio: 375/247;
  max-width: 24%;
  top: 33%;
  left: 2%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img--inner > img.illust-books {
    left: 0%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1600px) {
  .l-plactice__img--inner > img.illust-books {
    left: -2%;
  }
}
.l-plactice__img--inner > img.illust-iphone {
  aspect-ratio: 219/129;
  max-width: 19%;
  bottom: -2%;
  right: 19%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img--inner > img.illust-iphone {
    right: 12%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1600px) {
  .l-plactice__img--inner > img.illust-iphone {
    bottom: -7%;
    right: 12%;
  }
}
.l-plactice__img--inner > img.illust-cup {
  aspect-ratio: 219/302;
  max-width: 17%;
  bottom: 13%;
  right: 2%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img--inner > img.illust-cup {
    bottom: 24%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice__img--inner > img.illust-cup {
    right: -2%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1600px) {
  .l-plactice__img--inner > img.illust-cup {
    right: -5%;
  }
}
.l-plactice .p-plactice {
  overflow: hidden;
  padding-block: 6em;
  position: relative;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-plactice .p-plactice {
    padding-block: 3em 5em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice {
    padding-block: 2em 4em;
  }
}
@media screen and (min-width: 768px) and (max-width: 1440px) {
  .l-plactice .p-plactice {
    padding-block: 3em 5em;
  }
}
.l-plactice .p-plactice::before {
  content: "";
  background: linear-gradient(#BDBFF0 0%, #eebde7 35%);
  position: absolute;
  top: -1px;
  left: 0;
  height: calc(100% + 1px);
  width: 100%;
  z-index: -1;
}
.l-plactice .p-plactice .c-heading--medium .jp {
  word-break: keep-all;
}
.l-plactice .p-plactice__roots {
  margin-inline: auto;
  max-width: clamp(1000px, 85%, 1440px);
  width: fit-content;
  position: relative;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-plactice .p-plactice__roots {
    width: 85%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice__roots {
    width: 85%;
  }
}
.l-plactice .p-plactice__roots .c-text {
  margin-top: 1.25em;
}
.l-plactice .p-plactice__products {
  display: flex;
  align-items: center;
  gap: 2em 6vw;
  margin-top: 5em;
  margin-inline: auto;
  position: relative;
  max-width: 1000px;
  width: 75%;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-plactice .p-plactice__products {
    gap: 2em 13%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice__products {
    gap: 2em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice__products {
    margin-top: 3em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice__products {
    flex-direction: column;
  }
}
.l-plactice .p-plactice__slider {
  position: relative;
  max-width: 25vw;
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice__slider {
    max-width: 80%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice__slider {
    margin-inline: auto;
  }
}
.l-plactice .p-plactice__slider img {
  display: block;
  margin-inline: auto;
  object-fit: contain;
  max-height: 70vh;
  width: auto;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-plactice .p-plactice__slider img {
    max-height: 80vh;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice__slider img {
    max-height: 70vh;
  }
}
.l-plactice .p-plactice__slider .splide__arrow {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 1;
  padding: 0.3em;
  transition: 0.3s background-color, 0.3s box-shadow, 0.1s transform ease-in-out;
  height: clamp(40px, 4vw, 60px);
  width: clamp(40px, 4vw, 60px);
}
.l-plactice .p-plactice__slider .splide__arrow--prev {
  left: -2.2em;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-plactice .p-plactice__slider .splide__arrow--prev {
    left: -3.5em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice__slider .splide__arrow--prev {
    left: -4.3em;
  }
}
.l-plactice .p-plactice__slider .splide__arrow--next {
  right: -2.2em;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-plactice .p-plactice__slider .splide__arrow--next {
    right: -3.5em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-plactice .p-plactice__slider .splide__arrow--next {
    right: -4.3em;
  }
}
.l-plactice .p-plactice__slider .splide__arrow svg {
  fill: #fff;
}
.l-plactice .p-plactice__slider .splide__arrow:hover {
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.13);
  transform: scale(0.9) translateY(-50%);
  transition: 0.3s background-color, 0.3s box-shadow, 0.1s transform ease-in-out;
}
.l-plactice .p-plactice__slider .splide__progress {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 1em;
  margin-top: 1em;
  margin-inline: auto;
  overflow: hidden;
  width: 70%;
}
.l-plactice .p-plactice__slider .splide__progress-bar {
  background-color: #eeff34;
  height: 4px;
  transition: 1s width ease;
  width: 0;
}
@media screen and (min-width: 768px) {
  .l-plactice .p-plactice__description {
    flex: 1;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1600px) {
  .l-plactice .p-plactice__description .c-text--sm br {
    display: none;
  }
}
.l-plactice .p-plactice__description .c-text--sm span {
  color: #4c3e8b;
  font-size: 1.02em;
  font-weight: 600;
}
.l-plactice .p-plactice__description .c-button {
  margin-top: 2em;
}
.l-plactice .p-plactice__description .c-button + .c-button {
  margin-top: 1em;
}

/*======================================
	【　works　】
======================================*/
.l-works {
  margin-top: 20vh;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works {
    margin-top: 10vh;
  }
}
.l-works .p-works {
  margin: auto;
  max-width: 1440px;
  width: 95%;
}
@media screen and (min-width: 768px) {
  .l-works .p-works {
    overflow: hidden;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works {
    width: 75%;
  }
}
.l-works .p-works .c-heading--large {
  margin-bottom: 0;
}
.l-works .p-works .splide__slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(2em, 3%, 5vw);
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works .splide__slide {
    gap: 1em;
  }
}
.l-works .p-works__slider {
  margin-inline: auto;
  padding-top: 1.5em;
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works__slider {
    padding-top: 1em;
  }
}
@media screen and (min-width: 768px) {
  .l-works .p-works__slider {
    width: 85%;
  }
}
.l-works .p-works .splide__slide {
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works .splide__slide {
    flex-direction: column;
  }
}
.l-works .p-works .splide__track {
  padding-bottom: 1em;
}
.l-works .p-works .splide__arrow {
  background-color: rgba(106, 0, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 1;
  padding: 0.3em;
  transition: 0.3s background-color, 0.3s box-shadow, 0.1s transform ease-in-out;
  height: clamp(40px, 4vw, 60px);
  width: clamp(40px, 4vw, 60px);
}
.l-works .p-works .splide__arrow--prev {
  left: -7.5%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works .splide__arrow--prev {
    left: -7.5%;
  }
}
.l-works .p-works .splide__arrow--next {
  right: -7.5%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works .splide__arrow--next {
    right: -7.5%;
  }
}
.l-works .p-works .splide__arrow svg {
  fill: #fff;
}
.l-works .p-works .splide__arrow:hover {
  background-color: rgba(106, 0, 255, 0.7);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.13);
  transform: scale(0.9) translateY(-50%);
  transition: 0.3s background-color, 0.3s box-shadow, 0.1s transform ease-in-out;
}
.l-works .p-works .splide__progress {
  background-color: rgba(190, 190, 190, 0.5);
  border-radius: 1em;
  margin-top: 1em;
  margin-inline: auto;
  overflow: hidden;
  width: 70%;
}
.l-works .p-works .splide__progress-bar {
  background-color: rgba(106, 0, 255, 0.5);
  height: 4px;
  transition: 1s width ease;
  width: 0;
}
.l-works .p-works__img {
  width: 57.5%;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-works .p-works__img {
    width: 50%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works__img {
    width: 80%;
  }
}
.l-works .p-works__img img {
  display: block;
  margin-inline: auto;
  max-height: 80vh;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works__img img {
    max-height: 60vh;
  }
}
.l-works .p-works__detail {
  flex: 1;
  width: 42.5%;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-works .p-works__detail {
    width: 50%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works__detail {
    width: 100%;
  }
}
.l-works .p-works__detail .c-heading--medium span.jp {
  padding-inline: 0.5em;
  padding-bottom: 0.5em;
  position: relative;
}
.l-works .p-works__detail .c-heading--medium span.jp::after {
  content: "";
  background: linear-gradient(90deg, #f5d0f9, #dadcfd, #c9e4ff, #cfeef3);
  border-radius: 5px;
  display: block;
  position: absolute;
  left: 4px;
  bottom: 0;
  height: 2px;
  width: 0;
}
.l-works .p-works__detail .c-heading--medium span.jp.is-loaded::after {
  transition: 0.3s width ease-in-out;
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works__detail .c-heading--medium span.jp > span {
    display: none;
  }
}
.l-works .p-works__detail .c-text {
  margin-top: 1em;
}
.l-works .p-works__detail .c-text span {
  color: #b5b5b5;
  display: block;
  margin-top: 0.5em;
  word-break: keep-all;
  white-space: nowrap;
}
.l-works .p-works__detail .c-text a {
  color: inherit;
  pointer-events: none;
}
.l-works .p-works__detail .c-button {
  margin-top: 3em;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-works .p-works__detail .c-button {
    margin-top: 2em;
  }
}

/*======================================
	【　products　】
======================================*/
.l-products {
  background: linear-gradient(#eebde8, #965aa5);
  padding-block: 10vh 15vh;
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products {
    padding-block: 10vh;
  }
}
.l-products .c-heading--large {
  position: relative;
  z-index: 1;
}
.l-products .p-products {
  position: relative;
  margin: auto;
  max-width: 1440px;
  width: 95%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products {
    width: 75%;
  }
}
.l-products .p-products__bg {
  opacity: 0;
  margin-left: 15%;
  opacity: 0;
  position: absolute;
  transform-origin: center center;
  top: -8%;
  height: 100%;
  width: 75%;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-products .p-products__bg {
    margin-left: 5%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__bg {
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-products .p-products__bg {
    top: -12%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__bg {
    top: -15%;
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-products .p-products__bg {
    width: 100%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__bg {
    width: 100%;
  }
}
.l-products .p-products__slider {
  position: relative;
  margin-top: 2.5em;
  max-width: clamp(768px, 64vw, 1010px);
  width: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  width: 75%;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__slider {
    margin-top: 1.5em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__slider {
    width: 80%;
  }
}
.l-products .p-products__slider .c-taglist {
  margin-top: 1.5em;
  justify-content: center;
  justify-content: center;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__slider .c-taglist {
    justify-content: flex-start;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__slider .c-taglist {
    margin-left: -20%;
    width: 140%;
  }
}
.l-products .p-products .splide__track {
  padding-bottom: 0.5em;
}
.l-products .p-products .splide__arrow {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 1;
  padding: 0.3em;
  transition: 0.3s background-color, 0.3s box-shadow, 0.1s transform ease-in-out;
  height: clamp(40px, 4vw, 60px);
  width: clamp(40px, 4vw, 60px);
}
.l-products .p-products .splide__arrow--prev {
  left: -2.2em;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-products .p-products .splide__arrow--prev {
    left: -3.5em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products .splide__arrow--prev {
    left: -4.3em;
  }
}
.l-products .p-products .splide__arrow--next {
  right: -2.2em;
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-products .p-products .splide__arrow--next {
    right: -3.5em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products .splide__arrow--next {
    right: -4.3em;
  }
}
.l-products .p-products .splide__arrow svg {
  fill: #fff;
}
.l-products .p-products .splide__arrow:hover {
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.13);
  transform: scale(0.9) translateY(-50%);
  transition: 0.3s background-color, 0.3s box-shadow, 0.1s transform ease-in-out;
}
.l-products .p-products .splide__progress {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 1em;
  margin-inline: auto;
  overflow: hidden;
  width: 70%;
}
.l-products .p-products .splide__progress-bar {
  background-color: #eeff34;
  height: 4px;
  transition: 1s width ease;
  width: 0;
}
.l-products .p-products__flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: space-evenly;
  align-items: flex-start;
  margin-inline: auto;
  margin-top: 3em;
  position: relative;
  width: 90%;
  z-index: 1;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__flex {
    margin-top: 1.5em;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__flex {
    width: 120%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__flex {
    margin-left: -10%;
  }
}
.l-products .p-products__description {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding-block: 1em;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__description {
    padding-block: 0.5em;
  }
}
@media screen and (min-width: 1025px) {
  .l-products .p-products__description {
    pointer-events: none;
    width: calc(33.3% - 0.75em);
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  .l-products .p-products__description {
    pointer-events: none;
    width: calc(50% - 0.5em);
  }
  .l-products .p-products__description.col1 {
    width: 100%;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__description {
    width: 100%;
  }
}
.l-products .p-products__description details:not([open]) .c-heading--medium {
  border-bottom: 3px solid transparent;
  margin-bottom: 0;
  padding-bottom: 0;
  transition: 0s all ease-in-out;
}
.l-products .p-products__description details[open] .c-heading--medium {
  border-bottom: 3px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 0.5em;
  transition: 0s all ease-in-out;
}
.l-products .p-products__description summary::marker {
  content: none;
  display: none;
  list-style: none;
  color: #fff;
  margin-left: 1em;
}
.l-products .p-products__description summary::-webkit-details-marker {
  display: none;
}
.l-products .p-products__description .c-heading--medium {
  padding-inline: 1.5em;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__description .c-heading--medium {
    padding-inline: 1em;
  }
}
.l-products .p-products__description .c-heading--medium .jp {
  color: #fef7ff;
  margin-bottom: 0;
  text-shadow: 0 0 1em #af90b1;
}
.l-products .p-products__description .c-text {
  color: #fef7ff;
  text-shadow: 0 0 1em #af90b1;
  padding-inline: 1.5em;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-products .p-products__description .c-text {
    padding-inline: 1.5em;
  }
}
.l-products .p-products__description .c-text .u-color-violet {
  color: #7b398d;
  font-weight: bold;
  display: inline-block;
  margin-right: 1em;
  text-shadow: 0 0 1em #edcbf1;
}

/*======================================
	【　about　】
======================================*/
.l-about {
  margin-top: 20vh;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-about {
    margin-top: 10vh;
  }
}
.l-about .p-about {
  overflow: hidden;
  position: relative;
}
.l-about .p-about *:focus-visible {
  outline: 3px solid rgba(255, 0, 208, 0.8);
  outline-offset: 4px;
  border-radius: 4px;
}
.l-about .p-about__canvas {
  overflow: hidden;
  width: 100%;
}
.l-about .p-about__canvas canvas {
  display: block;
  min-height: 150px;
  margin-top: -4.1666666667vw;
  height: 17.3611111111vw;
  width: 100%;
}
.l-about .p-about__layer {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-about .p-about__layer {
    align-items: center;
  }
}
.l-about .p-about__layer[data-layer=epipelagic-zone] {
  background: linear-gradient(#d2f1f6, rgb(137, 192, 185));
  padding-top: 10vh;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-about .p-about__layer[data-layer=epipelagic-zone] {
    padding-top: 7vh;
  }
}
.l-about .p-about__layer[data-layer=mesopelagic-zone] {
  background: linear-gradient(rgb(137, 192, 185), rgb(80, 122, 124));
  text-shadow: 0 0 5px #8ec3bd;
}
.l-about .p-about__layer[data-layer=mesopelagic-zone] span {
  color: #000;
}
.l-about .p-about__layer[data-layer=bathypelagic-zone] {
  background: linear-gradient(rgb(80, 122, 124), rgb(34, 79, 102));
  color: #fff;
}
.l-about .p-about__layer[data-layer=abyssopelagic-zone] {
  background: linear-gradient(rgb(34, 79, 102), rgb(12, 58, 87));
  color: #fff;
}
.l-about .p-about__layer .c-text {
  position: relative;
  padding-bottom: 15vh;
  margin-inline: auto;
  text-align: left;
  text-align: center;
  width: 90%;
  z-index: 2;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-about .p-about__layer .c-text {
    padding-bottom: 15vh;
  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .l-about .p-about__layer .c-text {
    text-align: left;
  }
}
.l-about #particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.l-about #particle-container .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  filter: blur(1px);
  will-change: transform, opacity;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}