@charset "utf-8";
/* PARALLAX common ================= */
p span.txt{
  display: inline-block;
}
/* 初期状態（待機） */
#intro h1.delighter,
#intro h2.delighter,
#intro p.delighter span.txt{
	transform: translateY(40%);
	opacity: 0;
}
#bottom_link.delighter p{
  transform: translateY(40%);
  opacity: 0;
}
/* 個別設定 */
/* 見出し */
#intro.delighter h1{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#intro.delighter h2{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
/* p span.txt 5つセット */
#intro p.delighter span.txt:nth-of-type(1){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
#intro p.delighter span.txt:nth-of-type(2){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.9s;
}
#intro p.delighter span.txt:nth-of-type(3){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}
#intro p.delighter span.txt:nth-of-type(4){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.5s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s;
}
#intro p.delighter span.txt:nth-of-type(5){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.8s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s;
}
#intro p.delighter span.txt:nth-of-type(6){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 2.1s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.1s;
}
/* p 末尾ボタン */
#bottom_link.delighter p:nth-of-type(1){
	transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#bottom_link.delighter p:nth-of-type(2){
	transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
	transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
/* 発火後 */
#intro.delighter.started h1,
#intro.delighter.started h2,
#intro.delighter.started p span.txt,
#bottom_link.delighter.started p{
	transform: none;
	opacity: 1;
}

/* SUPREMO PARALLAX ======================== */

#sec_products h2{
  opacity: 0;
  transform: translateY(50%);
  transition:
    opacity 0.9s ease-out,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
#sec_products h2.started{
  opacity: 1;
  transform: translateY(0);
}

/* PRODUCTS-------------- */
/* 初期状態：透明＋少し下 */
#list_products [data-slick-index="-3"] a,
#list_products [data-slick-index="-2"] a,
#list_products [data-slick-index="-1"] a,
#list_products [data-slick-index="0"]  a,
#list_products [data-slick-index="1"]  a,
#list_products [data-slick-index="2"]  a,
#list_products [data-slick-index="3"]  a,
#list_products [data-slick-index="4"]  a,
#list_products [data-slick-index="5"]  a,
#list_products [data-slick-index="6"]  a{
  opacity: 0;
  transform: translateY(26px);
  /* ゆっくりふわっと */
  transition:
    opacity 0.9s ease-out,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* started：浮き上がって定位置へ */
#list_products.started [data-slick-index="-3"] a,
#list_products.started [data-slick-index="-2"] a,
#list_products.started [data-slick-index="-1"] a,
#list_products.started [data-slick-index="0"]  a,
#list_products.started [data-slick-index="1"]  a,
#list_products.started [data-slick-index="2"]  a,
#list_products.started [data-slick-index="3"]  a,
#list_products.started [data-slick-index="4"]  a,
#list_products.started [data-slick-index="5"]  a,
#list_products.started [data-slick-index="6"]  a{
  opacity: 1;
  transform: translateY(0);
}

/* 時差：間隔も少し広げる（好みで 100〜140ms くらいに） */
#list_products.started [data-slick-index="-3"] a{ transition-delay:   0ms; }
#list_products.started [data-slick-index="-2"] a{ transition-delay: 110ms; }
#list_products.started [data-slick-index="-1"] a{ transition-delay: 220ms; }
#list_products.started [data-slick-index="0"]  a{ transition-delay: 330ms; }
#list_products.started [data-slick-index="1"]  a{ transition-delay: 440ms; }
#list_products.started [data-slick-index="2"]  a{ transition-delay: 550ms; }
#list_products.started [data-slick-index="3"]  a{ transition-delay: 660ms; }
#list_products.started [data-slick-index="4"]  a{ transition-delay: 770ms; }
#list_products.started [data-slick-index="5"]  a{ transition-delay: 880ms; }
#list_products.started [data-slick-index="6"]  a{ transition-delay: 990ms; }

/* PRODUCTS-------------- */
/*  banner_sales：初期（透明＋下） */
.banner_sales a{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .8s ease-out,
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* banner_sales：started（表示＋上へ） */
.banner_sales.delighter.started a{
  opacity: 1;
  transform: translateY(0);
}
/* CONCEPT -------------- */

/* concept_cnt01：テキスト ふわっと出現 */
#concept_cnt01 h3,
#concept_cnt01 p{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .8s ease-out,
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#concept_cnt01.delighter.started h3,
#concept_cnt01.delighter.started p{
  opacity: 1;
  transform: translateY(0);
}

/* テキストの時差（必要なら） */
#concept_cnt01.delighter.started h3{ transition-delay: 0ms; }
#concept_cnt01.delighter.started p { transition-delay: 140ms; }

/* concept_cnt01：線（既存heightは活かす。上→下に伸ばす） */
#concept_cnt01::after{
  /* 既存の width/height/background/position/left/bottom はそのまま前提 */
  transform: translateX(-50%) scaleY(0);
  transform-origin: top; /* 上を起点に下へ伸びる */
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);

  /* ★ここが「テキストの後で」 */
  transition-delay: 520ms;  /* 好みで調整。テキストの体感に合わせる */
  will-change: transform;
}

#concept_cnt01.delighter.started::after{
  transform: translateX(-50%) scaleY(1);
}

/* concept_cnt02：テキスト ふわっと出現 */
#concept_cnt02 p span{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .8s ease-out,
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
#concept_cnt02.delighter.started p span{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   ■ concept_cnt02：txt 共通 初期状態
========================================= */
#concept_cnt02 span.txt{
  transform: translateY(50%);
  opacity: 0;
  display: inline-block;
}

/* =========================================
   ■ concept_cnt02：1つ目 flex（先に全部出す）
   ※ 1つ目の .flex の中にある span.txt を順番に
========================================= */
#concept_cnt02 .flex:nth-of-type(1) span.txt:nth-of-type(1){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#concept_cnt02 .flex:nth-of-type(1) span.txt:nth-of-type(2){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#concept_cnt02 .flex:nth-of-type(1) span.txt:nth-of-type(3){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

/* =========================================
   ■ concept_cnt02：2つ目 flex（1つ目が終わってから）
   1つ目の最後(0.4s delay + 2.0s duration) ≒ 2.4s
   → 余裕を見てベース遅延を 2.6s に設定
========================================= */
#concept_cnt02 .flex:nth-of-type(2) span.txt:nth-of-type(1){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s;
}
#concept_cnt02 .flex:nth-of-type(2) span.txt:nth-of-type(2){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}
#concept_cnt02 .flex:nth-of-type(2) span.txt:nth-of-type(3){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.4s;
}
#concept_cnt02 .flex:nth-of-type(2) span.txt:nth-of-type(4){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.6s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.6s;
}
#concept_cnt02 .flex:nth-of-type(2) span.txt:nth-of-type(5){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s;
}
#concept_cnt02 .flex:nth-of-type(2) span.txt:nth-of-type(6){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 2.0s;
}
#concept_cnt02 .flex:nth-of-type(2) span.txt:nth-of-type(7){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 2.2s;
}

/* =========================================
   ■ concept_cnt02 罫線
========================================= */
#concept_cnt02.delighter.started span.txt{
  transform: none;
  opacity: 1;
}

/* concept_cnt02：線（既存heightは活かす。上→下に伸ばす） */
#concept_cnt02::after{
  /* 既存の width/height/background/position/left/bottom はそのまま前提 */
  transform: translateX(-50%) scaleY(0);
  transform-origin: top; /* 上を起点に下へ伸びる */
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);

  /* ★ここが「テキストの後で」 */
  transition-delay: 3.2s;  /* 好みで調整。テキストの体感に合わせる */
  will-change: transform;
}
#concept_cnt02.delighter.started::after{
  transform: translateX(-50%) scaleY(1);
}
/* =========================================
   ■ concept_cnt03：共通 初期状態（ふわっと出現）
========================================= */
#concept_cnt03 h4,
#concept_cnt03 h5,
#concept_cnt03 p span.txt{
  opacity: 0;
  transform: translateY(50%);
  will-change: opacity, transform;
}

/* =========================================
   ■ concept_cnt03：個別 transition（順番・時差）
   h4 → h5 → span.txt 1〜
========================================= */
#concept_cnt03 h4{
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#concept_cnt03 h5{
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

/* p内のtxtは h5の後から（ベース 0.4s 〜） */
#concept_cnt03 p span.txt:nth-of-type(1){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#concept_cnt03 p span.txt:nth-of-type(2){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
#concept_cnt03 p span.txt:nth-of-type(3){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}
#concept_cnt03 p span.txt:nth-of-type(4){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s;
}
#concept_cnt03 p span.txt:nth-of-type(5){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}

/* =========================================
   ■ concept_cnt03：発火後
========================================= */
#concept_cnt03.delighter.started h4,
#concept_cnt03.delighter.started h5,
#concept_cnt03.delighter.started p span.txt{
  opacity: 1;
  transform: none;
}
/* =========================================
   ■ concept_cnt04
========================================= */
#concept_cnt04 img{
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 1.8s ease,
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#concept_cnt04.delighter.started img{
  opacity: 1;
  transform: scale(1);
}
/* =========================================
   ■ concept_cnt05 画像
========================================= */
#concept_cnt05 img{
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 1.8s ease,
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#concept_cnt05.delighter.started img{
  opacity: 1;
  transform: scale(1);
}
/* =========================================
   ■ concept_cnt05：共通 初期状態（ふわっと出現）
========================================= */
#concept_cnt05 p span.txt{
  opacity: 0;
  transform: translateY(-50%);
  will-change: opacity, transform;
}
/* =========================================
   ■ concept_cnt05個別 transition（順番・時差）
========================================= */
#concept_cnt05 p span.txt:nth-of-type(1){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#concept_cnt05 p span.txt:nth-of-type(2){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#concept_cnt05 p span.txt:nth-of-type(3){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#concept_cnt05 p span.txt:nth-of-type(4){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
#concept_cnt05 p span.txt:nth-of-type(5){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}

/* =========================================
   ■ concept_cnt05：発火後
========================================= */
#concept_cnt05 p.delighter.started span.txt{
  opacity: 1;
  transform: none;
}
/* =========================================
   ■ concept_cnt06 画像
========================================= */
#concept_cnt06 img{
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 1.8s ease,
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#concept_cnt06.delighter.started img{
  opacity: 1;
  transform: scale(1);
}
/* =========================================
   ■ concept_cnt06：共通 初期状態（ふわっと出現）
========================================= */
#concept_cnt06 p span.txt{
  opacity: 0;
  transform: translateY(-50%);
  will-change: opacity, transform;
}
/* =========================================
   ■ concept_cnt06個別 transition（順番・時差）
========================================= */
#concept_cnt06 p span.txt:nth-of-type(1){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#concept_cnt06 p span.txt:nth-of-type(2){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#concept_cnt06 p span.txt:nth-of-type(3){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#concept_cnt06 p span.txt:nth-of-type(4){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
#concept_cnt06 p span.txt:nth-of-type(5){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}
#concept_cnt06 p span.txt:nth-of-type(6){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s;
}
#concept_cnt06 p span.txt:nth-of-type(7){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}

/* =========================================
   ■ concept_cnt06：発火後
========================================= */
#concept_cnt06 p.delighter.started span.txt{
  opacity: 1;
  transform: none;
}
/* =========================================
   ■ concept_cnt06 罫線
========================================= */
/* concept_cnt02：線（既存heightは活かす。上→下に伸ばす） */
#concept_cnt06::after{
  /* 既存の width/height/background/position/left/bottom はそのまま前提 */
  transform: translateX(-50%) scaleY(0);
  transform-origin: top; /* 上を起点に下へ伸びる */
  transition: transform 2.1s cubic-bezier(0.16, 1, 0.3, 1);

  /* ★ここが「テキストの後で」 */
  transition-delay: 2.2s;  /* 好みで調整。テキストの体感に合わせる */
  will-change: transform;
}
#concept_cnt06.delighter.started::after{
  transform: translateX(-50%) scaleY(1);
}
/* =========================================
   ■ LINKS
========================================= */
#sec_links{
	overflow: hidden;
}

/* === 基本状態(started無し) === */
a.links.delighter {
	opacity: 0;
	transition: opacity 2.5s ease 1s;
}

a.links.delighter:not(.started) img {
	/* opacity: 0; ← これを削除 */
	transform: scale(1.02);
	transition:
		opacity 2.5s ease 1s,
		transform 3s cubic-bezier(0.16, 1, 0.3, 1) 1s;
	will-change: opacity, transform;
}

/* === started状態 === */
a.links.delighter.started {
	opacity: 1;
	transition: opacity 1.8s ease;
}

a.links.delighter.started img {
	opacity: 1;
	transform: scale(1.005);
	transition:
		opacity 1.8s ease,
		transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* =========================================
   ■CONSULTATION
========================================= */
#consultation_link p{
	opacity: 0;
	transform: translateY(-50%);
	will-change: opacity, transform;
}
#consultation_link p:nth-of-type(1){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#consultation_link p:nth-of-type(2){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#consultation_link.delighter.started p{
  opacity: 1;
  transform: none;
}
/* =========================================
   ■MAGGIORE
========================================= */
/* 初期　--------- */
#maggiore_top{
	overflow-x:hidden;
}
.copy_bggray p,
#maggiore_top h3,
#maggiore_top p{
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity 1.8s ease,
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
/* 発火後　--------- */
.copy_bggray.delighter.started p,
#maggiore_top.delighter.started h3,
#maggiore_top.delighter.started p{
  opacity: 1;
  transform: scale(1);
}
/* =========================================
   ■MAGGIORE detail
========================================= */
/* 押し下げ役（空白は“アニメの結果”として必要） */
#maggiore_stage{
  height: 0;
  overflow: hidden;
  transition: height 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 中身：上に隠しておく（自分の高さ分） */
#maggiore_detail{
  transform: translateY(-100%);
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* 開いた状態 */
#maggiore_stage.is-open{ /* heightはJSで入れる */ }
#maggiore_detail.is-open{
  transform: translateY(0);
}
/* 共通　--------- */
#maggiore_detail{
	overflow: hidden;
}
#maggiore_detail.delighter h4,
#maggiore_detail.delighter h5,
#maggiore_detail.delighter p span.txt{
  opacity: 0;
  transform: scale(1.05);
  will-change: opacity, transform;
}
/* 個別　--------- */
#maggiore_detail h4{
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#maggiore_detail h5{
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#maggiore_detail p span.txt:nth-of-type(1){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#maggiore_detail p span.txt:nth-of-type(2){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
#maggiore_detail p span.txt:nth-of-type(3){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}
#maggiore_detail p span.txt:nth-of-type(4){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s;
}
#maggiore_detail p span.txt:nth-of-type(5){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}
#maggiore_detail p span.txt:nth-of-type(6){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.4s;
}
#maggiore_detail p span.txt:nth-of-type(7){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.6s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.6s;
}
#maggiore_detail p span.txt:nth-of-type(8){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s;
}
#maggiore_detail p span.txt:nth-of-type(9){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 2.0s;
}
#maggiore_detail p span.txt:nth-of-type(10){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 2.2s;
}


/* 発火後　--------- */
#maggiore_detail.delighter.started h4,
#maggiore_detail.delighter.started h5,
#maggiore_detail.delighter.started p span.txt{
  opacity: 1;
  transform: scale(1);
}
/* =========================================
   ■MEISTER PARALLAX
========================================= */
/* 画像 ------------ */
.meister_cnt.delighter img{
	transform: translateY(30%);
	opacity: 0;
}
/* 遅延 */
.meister_cnt.delighter img{
	transition: opacity 2.3s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
/* 発火後 */
.meister_cnt.delighter.started img{
  transform: none;
  opacity: 1;
}
/* テキスト ------------ */
.meister_cnt p.delighter span.txt{
	transform: translateY(50%);
	opacity: 0;
	display: inline-block;
}
/* 遅延（transition） */
.meister_cnt p.delighter span.txt:nth-of-type(1){
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
.meister_cnt p.delighter span.txt:nth-of-type(2){
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
	transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.meister_cnt p.delighter span.txt:nth-of-type(3){
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
	transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.meister_cnt p.delighter span.txt:nth-of-type(4){
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
	transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
.meister_cnt p.delighter span.txt:nth-of-type(5){
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s,
	transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s;
}
/* 発火後 */
.meister_cnt p.delighter.started span.txt{
  transform: none;
  opacity: 1;
}
/* 末尾キャプション ------------ */
p.bottomcap.delighter{
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
p.bottomcap.delighter.started{
  transform: none;
  opacity: 1;
}
/* =========================================
   ■LIMITED PARALLAX
========================================= */
/* 画像 ------------ */
#page_limited .cnt_photo.delighter img{
	transform: translateY( 15% );
	opacity: 0;
}
/* 遅延 */
#page_limited .cnt_photo.delighter img{
	transition: opacity 2.3s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#page_limited .cnt_photo.delighter.started img{
  transform: none;
  opacity: 1;
}
/* =========================================
   ■ concept_cnt06：共通 初期状態（ふわっと出現） */
#page_limited .cont_txt.delighter p span.txt{
  opacity: 0;
  transform: translateY(50%);
  will-change: opacity, transform;
}
/* =========================================
   ■ concept_cnt06個別 transition（順番・時差） */
#page_limited .cont_txt.delighter p span.txt:nth-of-type(1){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#page_limited .cont_txt.delighter p span.txt:nth-of-type(2){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#page_limited .cont_txt.delighter p span.txt:nth-of-type(3){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#page_limited .cont_txt.delighter p span.txt:nth-of-type(4){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
#page_limited .cont_txt.delighter p span.txt:nth-of-type(5){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}

/* =========================================
   ■ concept_cnt06：発火後 */
#page_limited .cont_txt.delighter.started p span.txt{
  opacity: 1;
  transform: none;
}
/* =========================================
   ■HIGH CLASS PARALLAX
========================================= */
/* =========================================
   ■ 画像（ふわっと出現） */
#page_high .cnt_photo picture.delighter img,
#page_high #img02 .delighter img{
	transform: translateY(30%);
	opacity: 0;
}
#page_high .cnt_photo picture.delighter img,
#page_high #img02 .delighter img{
	transition: opacity 2.3s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#page_high .cnt_photo picture.delighter.started img,
#page_high #img02 .delighter.started img{
  transform: none;
  opacity: 1;
}
/* =========================================
   ■ concept_cnt06：共通 初期状態（ふわっと出現） */
#page_high .cnt_photo div.delighter span.txt{
  opacity: 0;
  transform: translateY(50%);
  will-change: opacity, transform;
}

/* テキスト行別 */
#page_high .cnt_photo div.delighter span.txt:nth-of-type(1){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#page_high .cnt_photo div.delighter span.txt:nth-of-type(2){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#page_high .cnt_photo div.delighter span.txt:nth-of-type(3){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#page_high .cnt_photo div.delighter span.txt:nth-of-type(4){
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
#page_high .cnt_photo div.delighter.started span.txt{
  transform: none;
  opacity: 1;
}
/* =========================================
   ■BRAND AREA PARALLAX
========================================= */
/* ■ MAP
========================================= */
#page_brand #brand_area_map.delighter img{
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 1.8s ease,
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
#page_brand #brand_area_map.delighter.started img{
  opacity: 1;
  transform: scale(1);
}
/* ■ MAP
========================================= */
#brand_area_txt.delighter,
#brand_area_txt.delighter h3,
#brand_area_txt.delighter h3 + p,
#brand_area_txt.delighter h4,
#brand_area_txt.delighter h4 + p{
  opacity: 0;
  transform: translateY(30px);
}
#brand_area_txt.delighter,
#brand_area_txt.delighter h3{
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#brand_area_txt.delighter h3 + p{
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#brand_area_txt.delighter h4{
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}
#brand_area_txt.delighter h4 + p{
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s,
              transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}

#brand_area_txt.delighter.started,
#brand_area_txt.delighter.started h3,
#brand_area_txt.delighter.started h3 + p,
#brand_area_txt.delighter.started h4,
#brand_area_txt.delighter.started h4 + p{
  opacity: 1;
  transform: none;
}
/* border */

/*  画像グループ1-------- */
#page_brand #img01.delighter img,
#page_brand .delighter #img02 img,
#page_brand .delighter #img03 img,
#page_brand .delighter #img04 img,
#page_brand .delighter .photocap{
  opacity: 0;
  transform: scale(1.02);
  will-change: opacity, transform;
}
/* 個別 */
#page_brand #img01.delighter img{
  transition:
    opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0s,
    transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#page_brand .delighter #img02 img{
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#page_brand .delighter #img03 img{
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}
#page_brand .delighter #img04 img{
  transition:
    opacity  2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#page_brand .delighter .photocap{
  transition:
    opacity  2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

#page_brand #img01.delighter.started img,
#page_brand .delighter.started #img02 img,
#page_brand .delighter.started #img03 img,
#page_brand .delighter.started #img04 img,
#page_brand .delighter.started .photocap{
  opacity: 1;
  transform: scale(1);
}
/*  画像グループ2-------- */
#page_brand #img05.delighter img,
#page_brand .delighter #img06 img,
#page_brand .delighter #img07 img,
#page_brand .delighter #img08 img{
  opacity: 0;
  transform: scale(1.02);
  will-change: opacity, transform;
}
/* 個別 */
#page_brand #img05.delighter img{
  transition:
    opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0s,
    transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#page_brand .delighter #img06 img{
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#page_brand .delighter #img07 img{
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}
#page_brand .delighter #img08 img{
  transition:
    opacity  2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#page_brand .delighter #img08 + .photocap{
  transition:
    opacity  2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

#page_brand #img05.delighter.started img,
#page_brand .delighter.started #img06 img,
#page_brand .delighter.started #img07 img,
#page_brand .delighter.started #img08 img,
#page_brand .delighter.started .photocap{
  opacity: 1;
  transform: scale(1);
}
/*  画像グループ3-------- */
#page_brand #img09.delighter img,
#page_brand .delighter #img10 img,
#page_brand .delighter #img11 img,
#page_brand .delighter #img12 img{
  opacity: 0;
  transform: scale(1.02);
  will-change: opacity, transform;
}
/* 個別 */
#page_brand #img09.delighter img{
  transition:
    opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0s,
    transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#page_brand .delighter #img10 img{
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#page_brand .delighter #img11 img{
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#page_brand .delighter #img12 img{
  transition:
    opacity  2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
#page_brand .delighter #img10 + .photocap{
  transition:
    opacity  2s cubic-bezier(0.16, 1, 0.3, 1) 1s,
    transform 2s cubic-bezier(0.16, 1, 0.3, 1) 1s;
}
#page_brand #img09.delighter.started img,
#page_brand .delighter.started #img10 img,
#page_brand .delighter.started #img11 img,
#page_brand .delighter.started #img12 img,
#page_brand .delighter.started .photocap{
  opacity: 1;
  transform: scale(1);
}
/* =========================================
   ■THE ONE
========================================= */
#page_one #intro .btn.delighter{
	transform: translateY(40%);
	opacity: 0;
}
#page_one .umber h3.delighter{
	transform: translateY(1em);
	opacity: 0;
}
#page_one #intro .btn.delighter,
#page_one .umber h3.delighter{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#page_one #intro .btn.delighter.started,
#page_one .umber h3.delighter.started{
  transform:none;
  opacity: 1;
}
/* slider ----------- */
#case article.delighter h4,
#case article.delighter .js-movie,
#case article.delighter figure{
	transform: translateY(50px);
	opacity: 0;
	will-change: opacity, transform;
}
#case article.delighter .swiper-pagination-bullet{
	transform: translateY(20px);
	opacity: 0;
	will-change: opacity, transform;
}
/* タイミング */
#case article.delighter h4{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#case article.delighter .js-movie{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#case article.delighter figure{
	transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
	transform 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#case article.delighter .swiper-pagination-bullet:nth-of-type(1){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.0s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s;
}
#case article.delighter .swiper-pagination-bullet:nth-of-type(2){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.1s;
}
#case article.delighter .swiper-pagination-bullet:nth-of-type(3){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}
#case article.delighter .swiper-pagination-bullet:nth-of-type(4){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.3s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.3s;
}
#case article.delighter .swiper-pagination-bullet:nth-of-type(5){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.4s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.4s;
}
#case article.delighter .swiper-pagination-bullet:nth-of-type(6){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.5s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s;
}
#case article.delighter .swiper-pagination-bullet:nth-of-type(7){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.6s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.6s;
}
#case article.delighter .swiper-pagination-bullet:nth-of-type(8){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.7s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.7s;
}
#case article.delighter .swiper-pagination-bullet:nth-of-type(9){
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.8s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s;
}
/* 最終系 */
#case article.delighter.started h4,
#case article.delighter.started .js-movie,
#case article.delighter.started figure{
  transform:none;
  opacity: 1;
}
#case article.delighter.started .swiper-pagination-bullet,
#case article.delighter.ended .swiper-pagination-bullet{
  transform: translateY(0);
  opacity: .4;
  transition:
    transform 1.2s,
    opacity .2s;
}

/* delighter状態でもhover/active勝たせる */
#case article.delighter.started .swiper-pagination-bullet:hover,
#case article.delighter.ended .swiper-pagination-bullet:hover,
#case article.delighter.started .swiper-pagination-bullet-active,
#case article.delighter.ended .swiper-pagination-bullet-active{
  opacity: 1;
}
/* case mini ----------- */
#case_mini.delighter article h5,
#case_mini.delighter article img,
#case_mini.delighter .btn{
	transform: translateY(50px);
	opacity: 0;
	will-change: opacity, transform;
}
/* CASE mini　削除
#case_mini.delighter article:nth-of-type(1) h5{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#case_mini.delighter article:nth-of-type(1) img{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#case_mini.delighter article:nth-of-type(2) h5{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
#case_mini.delighter article:nth-of-type(2) img{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
#case_mini.delighter .btn{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}*/
#case_mini.delighter .btn{
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
	transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
#case_mini.delighter.started article h5,
#case_mini.delighter.started article img,
#case_mini.delighter.started .btn{
	transform:none;
	opacity: 1;
}