@charset "UTF-8";


undefined .mv_movie,
.mv_text .text1,
.mv_text .text2,
.mv_text .text3,
.js-slide,
.js-fade {
  opacity: 0;
}

.js-fade {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity var(--sec) ease, transform var(--sec) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js-fade.is-action {
  opacity: 1;
  transform: translateY(0);
}

.js-fade.is-action {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   ① mv_movie：ふわっと表示
   ========================= */
.mv_movie {
  transition: opacity var(--sec) ease;
}

.mv.is-ready .mv_movie {
  opacity: 1;
}

/* =========================
   ② text1 / text2：左からシュッ
   ========================= */
.mv_text .text1,
.mv_text .text2,
.mv_text .text3,
.js-slide {
  transform: translateX(-60px);
  transition: opacity var(--sec) ease, transform var(--sec) cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}

.mv.is-step2 .mv_text .text1,
.mv.is-step2 .mv_text .text3,
.js-slide.is-action {
  opacity: 1;
  transform: translateX(0);
}

/* text2は少し遅らせる */
.mv.is-step2 .mv_text .text2 {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.15s;
}

/* =========================
   ③ SVG：手書き風（stroke-dash）
   ※ SVGは「塗り（fill）」ではなく「線（stroke）」で描く必要がある
   ========================= */
.svg_anime svg path {
  fill: none;
  /* ここ重要：塗りだと“手書き”にならない */
  stroke: #000;
  /* 色は適宜 */
  stroke-width: 2;
  /* 適宜 */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--pathLen);
  stroke-dashoffset: var(--pathLen);
  /* 初期は見えない状態 */
  opacity: 1;
}

.mv.is-step3 .svg_anime svg path {
  animation: mvDraw 2.2s ease forwards;
}

/* もしパスが複数あるので“順番に描きたい”場合は後述（JSでdelay付け） */
@keyframes mvDraw {
  to {
    stroke-dashoffset: 0;
  }
}
#handwrite {
  opacity: 0;
}

/* JSがこのクラスを付けたら見せる */
#handwrite.is-show {
  opacity: 1;
}

#handwrite #text01 path {
  fill: #000 !important;
  stroke: none !important;
}

#handwrite #mask01 path {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== コンテナ：発火前は子要素を隠す ===== */
.system_zu .abs1,
.system_zu .abs2,
.system_zu .abs3,
.system_zu .abs4 {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--sec_zu) ease, transform var(--sec_zu) ease;
  will-change: opacity, transform;
}

.system_zu .zu_img {
  transform: scale(0.9);
  opacity: 0;
  transition: opacity var(--sec_zu) ease, transform var(--sec_zu) ease;
  will-change: opacity, transform;
}

/* ===== 発火後：順番に表示（ぽんぽん） ===== */
.system_zu.js-fade.is-action .abs1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.system_zu.js-fade.is-action .abs2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay1);
}

.system_zu.js-fade.is-action .abs3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay2);
}

.system_zu.js-fade.is-action .abs4 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay3);
}

/* 最後に円のライン画像を表示 */
.system_zu.js-fade.is-action .zu_img {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--delay4);
}

.content_list .anime1,
.content_list .anime2,
.content_list .anime3,
.content_list .anime4,
.content_list .anime5 {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--sec_zu) ease, transform var(--sec_zu) ease;
  will-change: opacity, transform;
}

.content_list.js-fade.is-action .anime1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.content_list.js-fade.is-action .anime2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay1);
}

.content_list.js-fade.is-action .anime3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay2);
}

.content_list.js-fade.is-action .anime4 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay3);
}

.content_list.js-fade.is-action .anime5 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay4);
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: clip;
  clip-path: inset(50%);
}

@media (740px < width) {
  .u-sp {
    display: none !important;
  }
}
@media (width <= 960px) {
  .u-pc {
    display: none !important;
  }
}
.u-txc {
  text-align: center;
}

.u-dip {
  display: inline-block;
}