@charset "UTF-8";
/**
 * section
**/
section {
  background: #fff;
  padding: 64px 0;
}
@media only screen and (max-width: 1040.98px) {
  section {
    padding: 48px 0;
  }
}


/**
 * パララックス関連
**/
/* NOTE: 文字のフェードインフェードアウト */
.parallax--text-fade {
  opacity: 1;
  transition: all 0.6s ease;
}
.parallax--text-fade.is--fade-50 {
  opacity: 0.5 !important;
}
.parallax--text-fade.is--fade {
  opacity: 0 !important;
}

/* NOTE: 通常のsectionは、パララックスするコンテンツよりも上に配置 */
.page-top>footer,
.page-top>section {
  position: relative;
  z-index: 10;
}

/* NOTE: メインビジュアルがパララックスする領域 */
.parallax-sticky-area {
  position: relative;
  z-index: 1;
}
.parallax-sticky-area>* {
  position: relative;
  z-index: 5;
}


/**
 * トップページ用変数
**/
.wrap.page-top {
  --mv-container-width: 1136px;
  --mv-container-padding-inline: 40px;
  --mv-end-size: 340px;/* NOTE: 主にスポットライトのサイズ調整に使用（その他計算にも使用） */
  --mv-slogan-margin-bottom: calc( 28dvh - 80px );/* NOTE: キャッチコピーの位置に使用 */
  --mv-capture-column-height: 690px;/* NOTE: 携帯電話画像が表示される領域の縦サイズに使用（その他計算にも使用） */
  --mv-capture-image-width: 205.6px;/* NOTE: 携帯電話画像のボタン含む横サイズ調整に使用 （その他計算にも使用）*/
  --mv-capture-image-height: 415.5px;/* NOTE: 携帯電話画像のボタン含む縦サイズ調整に使用 （その他計算にも使用）*/

  /**
   * NOTE:
   * ヘッダーはサイト内共通で画面上部固定で
   * かつ下層ページではmvが無いため「padding-top: ヘッダー縦幅サイズ」が必要
   * また逆にトップページのみmvがあるため「padding-top: 0」が必要
  **/
  padding-top: 0;
}
/* 縦方向制御 */
@media screen and (min-height: 901px) {
  .wrap.page-top {
    --mv-end-size: 440px;
    --mv-capture-column-height: 832px;
    --mv-capture-image-width: 274px;
    --mv-capture-image-height: 554px;
  }
}
/* 横方向制御 */
@media screen and (max-width: 1040.98px) {
  .wrap.page-top {
    --mv-container-width: 720px;
    --mv-container-padding-inline: 27px;
  }
}
@media screen and (max-height: 767.98px) and (max-width: 1040.98px) {
  .wrap.page-top {
    --mv-capture-column-height: calc( 100svh - 160px );
  }
}

/* header */
.wrap.page-top .head-nav-pulldown>i, .head-nav>ul>li>a>i {
  opacity: 1;
}


/**
 * トップページ共通タイトル
**/
.top-head {
  margin: 0 0 52px;
  position: relative;
}
.top-head__ja {
  display: block;
  color: var(--gray-dark);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  z-index: 10;
}
.top-head__ja.has--anime {
  transform: translate(4%,4%) skewX(60deg) scaleY(0.01);
  transform-origin: left bottom;
  opacity: 0;
  transition: all 0.5s ease-out 0s;
}
.top-head__ja.has--anime.is--active {
  transform: translate(0,0);
  transform-origin: left bottom;
  opacity: 1;
}
@media screen and (max-width: 1040.98px) {
  .top-head__ja {
    font-size: 12px;
  }
}

.top-head__en {
  display: block;
  font-size: 46px;
  font-weight: 700;
  font-family: var(--font-family-en);
  line-height: 1.4;
  position: relative;
  z-index: 5;
}
.top-head__en.has--anime {
  transform: translate(4%,4%) skewX(60deg) scaleY(0.01);
  transform-origin: left bottom;
  opacity: 0;
  transition: all 0.5s ease-out 0s;
}
.top-head__en.has--anime.is--active {
  transform: translate(0,0);
  transform-origin: left bottom;
  opacity: 1;
}
@media screen and (max-width: 1040.98px) {
  .top-head__en {
    font-size: 30px;
  }
}

.top-head__link {
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.top-head__link a {
  text-decoration: none;
}
.top-head__link a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.top-head__link a::after {
  content: '\f054';
  display: var(--fa-display, inline-block);
  font-family: "Font Awesome 6 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  text-rendering: auto;
  margin: 0 0 0 1ex;
  transform: scale(0.7);
  transform-origin: right center;
  pointer-events: none;
}
@media screen and (max-width: 1040.98px) {
  .top-head__link {
    font-size: 12px;
    bottom: 0.5lh;
  }
}


.top-subhead {
  display: block;
  color: #333;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin: 0 auto 40px;
}
.top-subhead::after {
  content: '';
  display: block;
  border-top: solid 4px;
  width: 4em;
  margin: 1.5em auto 0;
}
@media screen and (max-width: 1040.98px) {
  .top-subhead {
    font-size: 18px;
  }
}

/* シンプルなリンク */
.p-top__section__more-link {
  text-align: center;
  margin-top: 56px;
}
.p-top__section__more-link a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #21528B;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.p-top__section__more-link a::after {
  content: '\f105';
  display: var(--fa-display, inline-block);
  font-family: "Font Awesome 6 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  text-rendering: auto;
  margin-left: 1ex;
}
@media screen and (max-width: 1040.98px) {
  .p-top__section__more-link a {
    justify-content: end;
    margin-inline-end: 24px;
  }
}


/**
 * header
 * NOTE: 幅についてのみ記述します。
**/
.page-top header .l-container {
  max-width: 1360px;
}
@media only screen and (max-width: 1040.98px) {
  .page-top header .l-container {

  }
}




/**
 * header
 * NOTE: 色の変化についてのみ記述します。
**/
.page-top header {
  box-shadow: 0 0 0 rgba(0,0,0,0);
  background: transparent;
  color: var(--header-bg-c);
}
.page-top [data-header].is--active {
  box-shadow: var(--header-shadow);
  background: var(--header-bg-c);
  color: var(--header-c);
}
/* logo color */
.page-top .header__logo {
  filter: invert(1);
}
.page-top [data-header].is--active .header__logo {
  filter: invert(0);
}
/* img icon color */
.page-top .head-icon img {
  filter: invert(1);
}
.page-top [data-header].is--active .head-icon img {
  filter: invert(0);
}
.page-top [id="nav-open"] {
  filter: invert(1);
}
.page-top [id="nav-open"]:hover {
  filter: invert(0.75);
}
.page-top [id="nav-input"]:checked ~ [id="nav-open"] {
  filter: invert(0);
}

.page-top [data-header].is--active [id="nav-open"] {
  filter: invert(0);
}
.page-top [data-header].is--active [id="nav-input"]:checked ~ [id="nav-open"] {
  filter: invert(0);
}


/* mv */
.main-vis {
  display: block;
  color: #fff;
  height: 100svh;
  position: relative;
  z-index: 5;
}
.main-vis__inner {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  max-width: var(--mv-container-width);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--mv-container-padding-inline);
  position: relative;
  z-index: 10;
}
.main-vis__txt {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: stretch;
  width: calc( 100% - var(--mv-end-size) );
  padding-bottom: var(--mv-slogan-margin-bottom);
}
@media only screen and (max-width: 1040.98px) {
  .main-vis__inner {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100dvh;
    padding-top: calc( var(--header-height) + 30dvh + 18px );
  }
  .main-vis__txt {
    width: 100%;
    padding-block: 0;
  }
}



.main-vis__h1 {
  font-family: var(--font-family-en);
  font-size: 49px;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 1040.98px) {
  .main-vis__h1 {
    font-size: 36px;
  }
}
@media only screen and (max-width: 1040.98px) {}

.main-vis__h1 em {
  font-size: 64px;
}
@media screen and (max-width: 1040.98px) {
  .main-vis__h1 em {
    font-size: 49px;
  }
}
@media only screen and (max-width: 1040.98px) {}

.main-vis__h1>span,
.main-vis__h1>em {
  display: block;
}
.main-vis__h1>*+span,
.main-vis__h1>*+em {
  margin-top: 8px;
}

.main-vis__h1>.has--anime {
  display: block;
  transform: translate(4%,4%) skewX(60deg) scaleY(0.01);
  transform-origin: left bottom;
  opacity: 0;
  transition:
    transform 0.5s ease-out 1s,
    opacity 0.5s ease-out 1s;
}
.is--window-load .main-vis__h1>.has--anime {
  transform: translate(0,0);
  transform-origin: left bottom;
  opacity: 1;
}

.main-vis__copy {
  font-family: var(--font-family-en);
  font-size: 20px;
}
.main-vis__desc {
  font-family: var(--font-family-en);
  font-size: 20px;
}



/* pr */
/* NOTE: パララックス内部のコンテンツラッパー（featureが通りすぎるまで画面に存在します） */
.main-vis-pr {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: stretch;
  width: var(--mv-end-size);
  height: var(--mv-capture-column-height);
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 72%;
  margin-left: calc( var(--mv-end-size) * -0.5 );
  z-index: 10;
}
@media screen and (max-width: 1040.98px) {
  .main-vis-pr {
    display: none;
    position: static;
  }
}

.capture-image {
  height: var(--mv-capture-image-height);
  margin: 0 0 20px;
  position: relative;
}
/* 縦方向制御 */
@media screen and (min-height: 901px) {
  .capture-image {
    margin-bottom: 8px;
  }
}
/* 横方向制御 */
@media screen and (max-width: 1040.98px) {
  .capture-image {
    margin: 0;
  }
}

.capture-image__bg-lighting {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transform: translate(0,-22%) scale(1.4);
  opacity: 0;
  pointer-events: none;
  transition: all 1s ease 1.75s;
}
/* 縦方向制御 */
@media screen and (min-height: 901px) {
  .capture-image__bg-lighting {
    top: 56px;
  }
}
/* 横方向制御 */
@media screen and (max-width: 1040.98px) {}

.is--window-load .capture-image__bg-lighting {
  transform: translate(0,-20%) scale(1.4);
  opacity: 1;
}
.capture-image__bg-lighting img {
  width: 100%;
  height: auto;
}
.capture-image__slide {
  background-image: url("../images/mobile_screen_bg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: var(--mv-capture-image-width);
  height: 100%;
  margin: 0 auto;
  padding: 16px 14px 14px;
  position: relative;
  z-index: 5;
  transform: translate(0,-1%);
  opacity: 0;
  transition:
    opacity 1s ease 2s,
    transform 1s ease 2s;
}
.is--window-load .capture-image__slide {
  transform: translate(0,0%);
  opacity: 1;
}
/* 縦方向制御 */
@media screen and (min-height: 901px) {
  .capture-image__slide {
    padding: 18px 16px 16px;
  }
}

.capture-image__slide-list {
  width: 100%;
  height: 100%;
}
.capture-image__slide-item {
  max-width: none;
  margin: 0 auto;
}
.capture-image__slide-item img {
  width: 100%;
  height: auto;
}

.capture-image__fanned-layout {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 40px;
  position: relative;
}
.capture-image__fanned-layout> .capture-image__slide-item {
  box-shadow: 0 27px 80px 0px rgba(0, 0, 0, 0.06), 0 3px 16px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  background-image: url("/common/images/mobile_screen_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 160px;
  padding: 18px;
}
.capture-image__fanned-layout>.capture-image__slide-item:nth-child(1) {
  transform-origin: center bottom;
  position: relative;
  z-index: 5;
}
.capture-image__fanned-layout>.capture-image__slide-item:nth-child(2) {
  transform: translate(6%,-6%) rotate(-16.66deg) scale(0.8);
  transform-origin: center bottom;
  position: absolute;
  inset: auto 50% 0 auto;
  z-index: 1;
}
.capture-image__fanned-layout>.capture-image__slide-item:nth-child(3) {
  transform: translate(-6%,-6%) rotate(16.66deg) scale(0.8);
  transform-origin: center bottom;
  position: absolute;
  inset: auto auto 0 50%;
  z-index: 1;
}


.main-vis-pr__cta {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: stretch;
  max-width: 280px;
  margin: 20px auto 0;
  gap: 6px;
  position: relative;
  z-index: 5;
}
.main-vis-pr .main-vis-pr__cta {
  transform: translateY(8px);
  opacity: 0;
  transition:
    opacity 1s ease 2.9s,
    transform 1s ease 2.9s;
}
.is--window-load .main-vis-pr .main-vis-pr__cta {
  transform: translateY(0);
  opacity: 1;
}
.main-vis-pr__cta .btn {
  max-width: none;
  margin: 0;
}
.main-vis-pr__cta .btn>* {
  height: 56px;
}
.main-vis-pr__cta>p {
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  max-width: none;
  margin: 0;
}



/* bg */
/* NOTE: パララックス用（mv以外のコンテンツの背景としてもposition: fixedの状態で配置されます） */
.main-vis-bg {
  display: block;
  background: #000;
  height: 100svh;
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.main-vis-bg__list {
  width: 100%;
  height: 100%;
  opacity: 0.6;
  /* NOTE: 写真のグレイの濃さはここで調整 */
}
.main-vis-bg__item {
  width: 100%;
  height: 100%;
}
.main-vis-bg__item img {
  width: 100%;
  height: 100svh;
  transition: transform 6s linear;
  /* NOTE: 切り替え前に拡大アニメが終わってしまうので、ページ側のjsの切り替え秒数よりも2秒くらい長めに設定してください。 */
  /* NOTE: transitionへ、transform以外のプロパティの設定禁止 */
  object-fit: cover;
}
.is--active .main-vis-bg__item img {
  transform: scale(1.05);
}
@media only screen and (max-width: 1040.98px) {
  .main-vis-bg__item img {
    width: 100%;
    height: 50svh;
    object-fit: cover;
    transform: scale(1);
  }
  .is--active .main-vis-bg__item img {
    transform: scale(1);
  }
}

.feature {
  background: transparent;
  color: #fff;
  padding-bottom: 298px;
}
.feature .l-container {
  max-width: var(--mv-container-width);
  padding-inline: var(--mv-container-padding-inline);
}
@media only screen and (max-width: 1040.98px) {
  .feature {
    padding-bottom: 80px;
  }
}

.feature__logo {
  filter: invert(1);
  width: 144px;
  margin: 0 0 80px;
}
.feature__logo img {
  width: 100%;
  height: auto;
}
.feature__em {
  display: block;
  font-size: 32px;
  font-weight: 700;
  font-feature-settings: 'palt';
  line-height: 1.5;
  margin: 0 0 80px;
}
.feature__em.has--mt {
  margin-top: 80px;
}
@media only screen and (max-width: 1040.98px) {
  .feature__em {
    font-size: 24px;
  }
  .feature__em.item--middle {
    font-size: 20px;
  }
}
.feature__txt {
  display: block;
  font-size: 18px;
  font-weight: 400;
  font-feature-settings: 'palt';
  line-height: 2.7;
  margin: 0;
}
.feature__txt.has--mt {
  margin-top: 80px;
}
@media screen and (max-width: 1040.98px) {
  .feature__txt {
    font-size: 14px;
  }
}



.for-sale {}


.for-sale__link {
  display: inline-flex;
  justify-content: flex-start;
  align-items: stretch;
  color: #000;
  text-decoration: none;
  gap: 4px;
}
.for-sale__link::after {
  content: '';
  display: block;
  background-image: url("../images/arrow-link-b.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  width: 96px;
  height: auto;
}
.for-sale__link>span {
  display: block;
  color: inherit;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__link {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
  *+.for-sale__link {
    margin-top: 20px;
  }
}

.for-sale__case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
*+.for-sale__case {
  margin-top: 80px;
}
@media only screen and (min-width: 1041px) {
  .for-sale__case+.for-sale__case:nth-child(even)>:first-child {
    order: 1;
  }
  .for-sale__case+.for-sale__case:nth-child(even)>:last-child {
    order: 0;
  }
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__case {
    grid-template-columns: 1fr;
  }
}


.for-sale__case-ttl {
  display: block;
  color: #fff;
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__case-ttl {
    color: inherit;
  }
}

.for-sale__case-ttl-figure {
  display: block;
  color: inherit;
  text-decoration: none;
  min-height: 768px;
  padding: 32px;
  position: relative;
  opacity: 1;
}
.for-sale__case-ttl-figure:hover {
  color: inherit;
  opacity: 1;
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__case-ttl-figure {
    min-height: 0;
    padding: 0;
  }
}

.for-sale__case-ttl-figure>.item--ja {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  z-index: 10;
}
.for-sale__case-ttl-figure>.item--ja.has--anime {
  transform: translate(4%,4%) skewX(60deg) scaleY(0.01);
  transform-origin: left bottom;
  opacity: 0;
  transition: all 0.5s ease-out 0s;
}
.for-sale__case-ttl-figure>.item--ja.has--anime.is--active {
  transform: translate(0,0);
  transform-origin: left bottom;
  opacity: 1;
}
.for-sale__case-ttl-figure>.item--en {
  display: block;
  font-size: 46px;
  font-weight: 700;
  font-family: var(--font-family-en);
  line-height: 1.4;
  position: relative;
  z-index: 10;
}
.for-sale__case-ttl-figure>.item--en.has--anime {
  transform: translate(4%,4%) skewX(60deg) scaleY(0.01);
  transform-origin: left bottom;
  opacity: 0;
  transition: all 0.5s ease-out 0s;
}
.for-sale__case-ttl-figure>.item--en.has--anime.is--active {
  transform: translate(0,0);
  transform-origin: left bottom;
  opacity: 1;
}
.for-sale__case-ttl-figure>.for-sale__link {
  filter: invert(1);
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 10;
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__case-ttl-figure>.item--ja {
    font-size: 12px;
  }
  .for-sale__case-ttl-figure>.item--en {
    font-size: 30px;
  }
  .for-sale__case-ttl-figure>.for-sale__link {
    display: none;
  }
}

.for-sale__case-ttl-figure>.item--bg {
  display: block;
  background: rgba(0,0,0,0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__case-ttl-figure>.item--bg {
    display: none;
  }
}

.for-sale__case-ttl-figure>.item--bg>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2s ease;
  opacity: 0.9;
}
.for-sale__case-ttl-figure:hover>.item--bg>img {
  transform: scale(1.75);
  transition: transform 10s linear;
}

.for-sale__case-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 52px 16px;
  gap: 0;
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__case-list {
    padding: 16px 0;
  }
}

.for-sale__case-list-figure {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border: 0 solid #E5E5E5;
  text-decoration: none;
}
.for-sale__case-list-figure:nth-child(1) {
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.for-sale__case-list-figure:nth-child(2) {
  border-bottom-width: 1px;
}
.for-sale__case-list-figure:nth-child(3) {
  border-right-width: 1px;
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__case-list-figure {
    padding: 32px 10px;
  }
}

.for-sale__case-list-figure>.item--img {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 192px;
  height: 192px;
}
.for-sale__case-list-figure>.item--img>img {
  box-shadow: 0 4px 10px 3px rgba(0, 0, 0, 0.3);
  max-width: 168px;
  max-height: 168px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__case-list-figure>.item--img {
    max-width: 192px;
    width: 100%;
    height: 192px;
  }
  .for-sale__case-list-figure>.item--img>img {
    max-width: 128px;
    max-height: 128px;
  }
}


.for-sale__case-list-figure>.item--artist {
  font-size: 20px;
  font-weight: 700;
}
.for-sale__case-list-figure>.item--title {
  font-size: 14px;
  font-weight: 400;
}
@media only screen and (max-width: 1040.98px) {
  .for-sale__case-list-figure>.item--artist {
    font-size: 16px;
  }
  .for-sale__case-list-figure>.item--title {
    font-size: 12px;
    text-align: center;
  }
}



/**
 * owners
**/
.owners {
  overflow: hidden;
}
.owners__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  position: relative;
}
@media only screen and (max-width: 1040.98px) {
  .owners__list {
    width: 100%;
    padding-top: 30px;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
.owners__list::before {
  content: '';
  display: block;
  border-top: solid 1px #E5E5E5;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
}
.owners__list::after {
  content: '';
  display: block;
  border-top: solid 1px #E5E5E5;
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,0);
}
@media only screen and (max-width: 1040.98px) {
  .owners__list::before,
  .owners__list::after {
    display: none;
  }
}

.owners__item {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: stretch;
  box-shadow: 0 0 0 12px #fff inset;
  border: 1px solid #E5E5E5;
  background: #F8F6EB;
  padding: 32px;
  aspect-ratio: 1 / 1;
  position: relative;
}
*+.owners__item {
  border-left: none;
}
@media only screen and (max-width: 1040.98px) {
  .owners__item {
    max-width: 208px;
  }
}

.owners__num {
  color: #fff;
  font-size: 52px;
  font-family: var(--font-family-en);
  font-weight: 700;
  line-height: 1;
  width: 2em;
  position: absolute;
  top: 16px;
  left: 12px;
  z-index: 1;
  transform: translate(0,-100%);
}
.owners__num::before {
  content: attr(data-text);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: inherit;
  height: inherit;
  position: relative;
  z-index: 5;
}
.owners__num::after {
  content: attr(data-text);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  color: #ccc;
  -webkit-text-stroke: 2.5px #ccc;
  text-stroke: 2.5px #ccc;
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transform: translate(0,-0.5px);
}

.owners__img {
  width: 72px;
}
.owners__img>img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
@media only screen and (max-width: 1040.98px) {
  .owners__img>img {
    width: 56px;
    height: 56px;
  }
}

.owners__ttl {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}
@media only screen and (max-width: 1040.98px) {
  .owners__ttl {
    font-size: 15px;
    text-align: right;
  }
}



/**
 * hot to use
**/
.how-to-use {
  --how-to-use-img-width: 240px;
  --how-to-use-arrow-size: 40px;
  --how-to-use-desc-inner-width: 320px;
  --how-to-use-cta-width: 278px;
}

.how-to-use__inner {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  width: 100%;
  aspect-ratio: 1 / 0.437;
}
@media only screen and (min-width: 1041px) and (max-width: 1400.98px) {
  .how-to-use__inner {
    height: 552px;
    aspect-ratio: auto;
  }
}
@media only screen and (max-width: 1040.98px) {
  .how-to-use__inner {
    height: 552px;
    aspect-ratio: auto;
  }
}
@media only screen and (max-width: 1040.98px) {
  .how-to-use__inner {
    height: auto;
    aspect-ratio: auto;
    position: relative;
  }
}

.how-to-use__desc .top-head {
  width: 50%;
}
@media only screen and (max-width: 1040.98px) {
  .how-to-use__desc .top-head {
    width: 100%;
    order: 0;
  }
}

.how-to-use__desc-nation {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  margin: 0 0 40px;
  padding: 0 calc((50% - var(--how-to-use-desc-inner-width))*0.5);
  gap: 20px;
}
@media only screen and (max-width: 1040.98px) {
  .how-to-use__desc-nation {
    display: none;
    order: 2;
  }
}
.how-to-use__desc-nation>li {}
.how-to-use__desc-nation>li i {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-family-en);
  gap: 4px;
}
.how-to-use__desc-nation>li i::after {
  content: '';
  display: block;
  border-radius: 50%;
  border: 1px solid #ABBDC7;
  background: #fff;
  width: 12px;
  height: 12px;
  transition: background 0.1s ease;
}
.how-to-use__desc-nation[data-index-current="0"]>li [data-index-item="1"]::after,
.how-to-use__desc-nation[data-index-current="1"]>li [data-index-item="2"]::after,
.how-to-use__desc-nation[data-index-current="2"]>li [data-index-item="3"]::after,
.how-to-use__desc-nation[data-index-current="3"]>li [data-index-item="4"]::after {
  background: #ABBDC7;
}


.how-to-use__desc-list {
  width: 50%;
  padding: 0 calc((50% - var(--how-to-use-desc-inner-width))*0.5);
}
/* フェード時の重なりを制御するCSS（デフォルト） */
/**
 * NOTE: エフェクトを切り替え速度よりも遅らせる目的で
 * ページ側のjsのspeedプロパティの 1sよりも若干早い 0.8sの遅延を挿入し、
 * エフェクト開始を遅延させることで、現在のスライドと、前後スライドのエフェクトを
 * 干渉させることができ意図した動きとなります。
 * ※ページ側のjsのspeedプロパティよりも長い遅延は ×
**/
.how-to-use__desc-list .slick-slide {
  /* fade end */
  z-index: 1;/* 通常時は低めに設定 */
  transition: opacity 0.4s ease 0.8s !important;/* エフェクト実行時間に時差をつけて重なりを表現する */
}
.how-to-use__desc-list .slick-active {
  /* fade start */
  z-index: 2;/* 表示中のスライドを前面に */
  transition: opacity 0.6s ease 0.8s !important;/* fade endよりも少し遅いエフェクト実行時間 */
}
.how-to-use__desc-list .slick-current {
  /* fade start */
  z-index: 3;/* 切り替え中のスライドを最前面に保持 */
  transition: opacity 0.6s ease 0.8s !important;/* fade endよりも少し遅いエフェクト実行時間 */
}

/* フェード時の重なりを制御するCSS（前方向に進む場合） */
.how-to-use__desc-list[data-slick-direction="forward"] .slick-slide {
  /* fade end */
  transition: opacity 0.4s ease 0.8s !important;
}
.how-to-use__desc-list[data-slick-direction="forward"] .slick-active {
  /* fade start */
  transition: opacity 0.6s ease 0.8s !important;
}
.how-to-use__desc-list[data-slick-direction="forward"] .slick-current {
  /* fade start */
  transition: opacity 0.6s ease 0.8s !important;
}

/* フェード時の重なりを制御するCSS（後ろ方向に進む場合） */
.how-to-use__desc-list[data-slick-direction="previous"] .slick-slide {
  /* fade end */
  transition: opacity 0.6s ease 0s !important;
}
.how-to-use__desc-list[data-slick-direction="previous"] .slick-active {
  /* fade start */
  transition: opacity 0.6s ease 0.8s !important;
}
.how-to-use__desc-list[data-slick-direction="previous"] .slick-current {
  /* fade start */
  transition: opacity 0.6s ease 0.8s !important;
}

@media only screen and (max-width: 1040.98px) {
  .how-to-use__desc-list {
    width: 100%;
    margin-top: 32px;
    padding: 0 0 64px;
    order: 2;
  }
}

.how-to-use__desc-item {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 192px;
  /* fade end */
  transform: translate(0,12.5%);
  transition: transform 0.3s ease-in-out 0.8s;
}
.slick-active .how-to-use__desc-item {
  /* fade start */
  transform: translate(0,0);
  transition: transform 0.3s ease-in-out 0.8s;
}
/* フェード時の重なりを制御するCSS（前方向に進む場合） */
.how-to-use__desc-list[data-slick-direction="forward"] .how-to-use__desc-item {
  /* fade end */
  transition: transform 0.3s ease-in-out 0.8s;
}
.how-to-use__desc-list[data-slick-direction="forward"] .slick-active .how-to-use__desc-item {
  /* fade start */
  transition: transform 0.3s ease-in-out 0.8s;
}
/* フェード時の重なりを制御するCSS（後ろ方向に進む場合） */
.how-to-use__desc-list[data-slick-direction="previous"] .how-to-use__desc-item {
  /* fade end */
  transition: transform 0s ease-in-out 0.8s;
}
.how-to-use__desc-list[data-slick-direction="previous"] .slick-active .how-to-use__desc-item {
  /* fade start */
  transition: transform 0.3s ease-in-out 0.8s;
}


.how-to-use__desc-item>.item--step {
  display: block;
  font-family: var(--font-family-en);
  text-align: center;
  margin: 0 0 20px;
}
.how-to-use__desc-item>.item--step>span {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}
.how-to-use__desc-item>.item--step>b {
  display: block;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.125;
}
.how-to-use__desc-item>.item--ttl {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 24px;
  align-self: stretch;
}
.how-to-use__desc-item>.item--txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  align-self: stretch;
}
@media only screen and (max-width: 1040.98px) {
  .slick-slide .how-to-use__desc-item,
  .how-to-use__desc-item {
    --item-gap-col: 16px;
    --item-gap-row: 0px;
    --step-width: 36px;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    min-height: 84px;
    max-height: 84px;
    gap: var(--item-gap-row) var(--item-gap-col);
  }
  .how-to-use__desc-item>.item--step {
    width: var(--step-width);
    margin: 0 0 20px;
  }
  .how-to-use__desc-item>.item--step>span {
    font-size: 16px;
  }
  .how-to-use__desc-item>.item--step>b {
    font-size: 30px;
  }
  .how-to-use__desc-item>.item--ttl {
    font-size: 20px;
    width: calc(100% - var(--step-width) - var(--item-gap-col));
    margin: 0 0 12px;
  }
  .how-to-use__desc-item>.item--txt {
    font-size: 14px;
    width: calc(100% - var(--step-width) - var(--item-gap-col));
  }
}


.btn.how-to-use__cta {
  width: 50%;
  max-width: none;
  margin-top: 96px;
  padding: 0 calc((50% - var(--how-to-use-cta-width))*0.5);
}
@media only screen and (max-width: 1040.98px) {
  .btn.how-to-use__cta {
    max-width: var(--how-to-use-cta-width);
    width: 100%;
    margin: 40px auto 0;
    padding: 0;
    order: 3;
  }
}

.btn.how-to-use__cta>a {}
.btn.how-to-use__cta>a>span {}

.how-to-use__slider {
  width: 50%;
  padding: 24px 0 0;
  aspect-ratio: 1 / 0.873;
}
@media only screen and (max-width: 1040.98px) {
  .how-to-use__slider {
    max-width: var(--how-to-use-img-width);
    width: 100%;
    margin: 0 auto;
    padding: 0;
    aspect-ratio: 24 / 47;
    order: 1;
  }
}

.how-to-use__slider-list {
  width: var(--how-to-use-img-width);
  height: 100%;
  padding: 0 0 64px;
  position: relative;
}
@media only screen and (max-width: 1040.98px) {
  .how-to-use__slider-list {
    width: 100%;
    height: auto;
    padding-bottom: 0;
    position: static;
  }
}

.how-to-use__slider-list .slick-list {
  overflow: visible;
}
.how-to-use__slider-list .slick-track {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}
.how-to-use__slider-list .slick-track::before,
.how-to-use__slider-list .slick-track::after {
  display: none;
}
.how-to-use__slider-list .slick-slide {
  height: auto;
  float: none;
}
.how-to-use__slider-list .slick-prev {
  width: var(--how-to-use-arrow-size);
  top: auto;
  right: auto;
  bottom: 0;
  left: calc( var(--how-to-use-img-width) - var(--how-to-use-arrow-size) - 12px );
  transform: translate(-100%,0);
}
.how-to-use__slider-list .slick-next {
  width: var(--how-to-use-arrow-size);
  top: auto;
  right: auto;
  bottom: 0;
  left: var(--how-to-use-img-width);
  transform: translate(-100%,0);
}
.how-to-use__slider-list .slick-prev::before,
.how-to-use__slider-list .slick-next::before {
  transform: scale(0.75);
}
@media only screen and (max-width: 1040.98px) {
  .how-to-use__slider-list .slick-prev {
    top: auto;
    right: calc( var(--how-to-use-arrow-size) + 12px );
    bottom: calc( var(--how-to-use-arrow-size) + 48px );
    left: auto;
    transform: translate(-100%,0);
  }
  .how-to-use__slider-list .slick-next {
    top: auto;
    right: 0;
    bottom: calc( var(--how-to-use-arrow-size) + 48px );
    left: auto;
    transform: translate(-100%,0);
  }
}



.how-to-use__slider-list li {}

.how-to-use__slider-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: var(--how-to-use-img-width);
  height: 460px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.slick-current .how-to-use__slider-item,
.slick-current+* .how-to-use__slider-item {
  opacity: 1;
}
@media only screen and (max-width: 1040.98px) {
  .how-to-use__slider-item {
    justify-content: center;
    align-items: center;
  }
}

.how-to-use__slider-item>img {
  box-shadow: 0 27px 80px rgba(0,0,0,0.06), 0 3px 10px rgba(0,0,0,0.13);
  border-radius: 16px;
  width: 66.66%;
  height: auto;
  transition: width 0.4s ease, height 0.4s ease;
}
.how-to-use__slider-item>[src*="04.png"] {
  border-radius: 12%;
}
.slick-current .how-to-use__slider-item img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 1040.98px) {
  .how-to-use__slider-item>img {
    width: 66.66%;
  }
}



/**
 * solve
**/
.solve {
  background: var(--bg-c-light);
}


/**
 * news, article
**/
@media only screen and (max-width: 1040.98px) {
  .top-articles .knowledge__list {
    grid-template-columns: 1fr 1fr;
  }
}


/**
 * media
**/
.media {
  --media-logo-size: 144px;
  position: relative;
}
/*
.media::before {
  content: '';
  display: block;
  border-left: solid 2px #000;
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 10000;
  transform: translate(-50%,0);
}
*/
.media-roop {
  width: 100%;
  overflow: hidden;
}
*+.media-roop {
  margin-top: 96px;
}
@media screen and (max-width: 1040.98px) {
  *+.media-roop {
    margin-top: 48px;
  }
}

.media-list {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.media-list .slick-list {
  overflow: visible;
}
.media-list.list--1 {
  animation: infinity-scroll-right 50s infinite linear 0.5s both;
}
.media-list.list--2 {
  animation: infinity-scroll-left 50s infinite linear 0.5s both;
}
@media screen and (max-width: 1040.98px) {
  .media-list.list--1 {
    animation: infinity-scroll-right-sp 20s infinite linear 0.5s both;
  }
  .media-list.list--2 {
    animation: infinity-scroll-left-sp 20s infinite linear 0.5s both;
  }
}

@keyframes infinity-scroll-right {
  from {
    transform: translateX(-120vw);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes infinity-scroll-right-sp {
  from {
    transform: translateX(-280vw);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-120vw);
  }
}
@keyframes infinity-scroll-left-sp {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-280vw);
  }
}

.media-list>li {
  display: block;
  width: calc(120vw / 8);
  min-width: calc(120vw / 8);
  padding: 0 60px;
}
@media screen and (max-width: 1040.98px) {
  .media-list>li {
    width: calc(280vw / 8);
    min-width: calc(280vw / 8);
    padding: 0 2vw;
  }
}
@media screen and (max-width: 767.98px) {
  .media-list>li {
    width: calc(280vw / 8);
    min-width: calc(280vw / 8);
    padding: 0 5vw;
  }
}

.media-list img {
  width: var(--media-logo-size);
  height: auto;
  margin: 0 calc(var(--media-logo-size) * 0.5);
}
@media screen and (max-width: 1040.98px) {
  .media-list img {
    max-width: 140px;
    width: 100%;
    margin: 0;
  }
}