/* ================================
   curtain マスクアニメーション
================================ */
.curtain {
	overflow: hidden;
	position: relative;
	width: fit-content;
	height: fit-content;
	border-radius: 30px;
}

.curtain::after {
	background-color: var(--color-main-blue);
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 0;
	z-index: 2;
	transition: left 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.4s,
	            width 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.curtain.is-active::after {
	left: 100%;
	width: 100%;
}

.curtain img {
	opacity: 0;
	transition: opacity 0s 0.4s;
}

.curtain.is-active img {
	opacity: 1;
}


/* ================================
   fadeIn 共通フェードイン（全ページ基本アニメーション）
   使い方：
     .fadeIn        → フェードイン（下から少し）
     .fadeIn--slow  → よりゆっくり
     .fadeIn--up    → 大きめに上から
================================ */
.fadeIn,
.fadeIn--slow,
.fadeIn--up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.fadeIn--slow {
  transition-duration: 0.8s;
}

.fadeIn--up {
  transform: translateY(80px);
}

.fadeIn.is-active,
.fadeIn--slow.is-active,
.fadeIn--up.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 親を監視して子のテキスト→写真の順序を保証 */
.fadeIn--pair .interview_txtWrap,
.fadeIn--pair .interview_mainTi,
.fadeIn--pair .description {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.fadeIn--pair figure,
.fadeIn--pair .photo_1 {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  transition-delay: 0.3s;
}

.fadeIn--pair.is-active .interview_txtWrap,
.fadeIn--pair.is-active .interview_mainTi,
.fadeIn--pair.is-active .description {
  opacity: 1;
  transform: translateY(0);
}

.fadeIn--pair.is-active figure,
.fadeIn--pair.is-active .photo_1 {
  opacity: 1;
  transform: translateY(0);
}

/* staggerは親に .fadeIn-group、子に .fadeIn-item を付ける */
.fadeIn-group .fadeIn-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}


.fadeIn-group.is-active .fadeIn-item {
  opacity: 1;
  transform: translateY(0);
}

/* PC: 0.2秒間隔スタッガー（最大7個） */
.fadeIn-group.is-active .fadeIn-item:nth-child(1) { transition-delay: 0s; }
.fadeIn-group.is-active .fadeIn-item:nth-child(2) { transition-delay: 0.2s; }
.fadeIn-group.is-active .fadeIn-item:nth-child(3) { transition-delay: 0.4s; }
.fadeIn-group.is-active .fadeIn-item:nth-child(4) { transition-delay: 0.6s; }
.fadeIn-group.is-active .fadeIn-item:nth-child(5) { transition-delay: 0.8s; }
.fadeIn-group.is-active .fadeIn-item:nth-child(6) { transition-delay: 1.0s; }
.fadeIn-group.is-active .fadeIn-item:nth-child(7) { transition-delay: 1.2s; }

/* SP: スタッガーなし、各アイテム個別にフェードイン */
@media screen and (max-width: 640px) {
  .fadeIn-group .fadeIn-item {
    /* SPではグループではなく個別IO監視に切替 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  }
  .fadeIn-group.is-active .fadeIn-item:nth-child(n) {
    transition-delay: 0s;   /* 遅延なし */
  }
}


/* ================================
   donut-chart ドーナツグラフアニメーション
================================ */
.donut-chart {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 10px auto 15px;
  transform: scaleX(-1);           /* 左右反転でblueを左側に */
}

.donut-chart svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);       /* 12時スタート */
}

.donut-chart circle {
  fill: none;
  stroke-width: 28;
  /* cx, cy, r はSafari非対応のためHTML属性で指定 */
}

.donut-bg {
  stroke: #ccc;
}

.donut-fill {
  stroke: var(--color-main-blue);
  stroke-dasharray: 0 440;
  transition: stroke-dasharray 1.2s ease-out;
}

.donut-chart.is-active .donut-fill {
  /* JS側で最終値をセット */
}

.data_data.donut-chart-wrap {
  font-size: 1rem;       /* data_data の 5em をリセット */
  font-weight: 400;
  color: #333;
}

.donut-labels {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 5px;
}

.donut-label {
  text-align: center;
}

.donut-label .label-name {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 2px;
}

.donut-label .label-value {
  font-weight: 900;
  line-height: 1;
}

.donut-label:first-child .label-value {
  color: var(--color-main-blue);
  font-size: 2.2em;
}

.donut-label:last-child .label-value {
  color: #999;
  font-size: 2.2em;
}

.donut-label .label-value .unit {
  font-size: 0.4em;
  font-weight: 500;
}


/* ================================
   fadeUp テキストフェードイン
================================ */
.fadeUp {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadeUp.is-active {
	opacity: 1;
	transform: translateY(0);
}


/* ================================
   entry_btn アニメーション
================================ */
.entry_btn .btn-label {
	display: inline-block;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.entry_btn .arrow {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.entry_btn.is-active .btn-label {
	opacity: 1;
	transform: translateY(0);
}

.entry_btn.is-active .arrow {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.2s;
}



/* ================================
   slide1 初期非表示（FOUC防止）
================================ */
.slide1_title {
	opacity: 0;
}

.slide1_message {
	visibility: hidden;
}

.slide1_message .description {
	opacity: 0;
}


/* ================================
   stripe-reveal ストライプマスク
================================ */
.stripe-reveal {
	position: relative;
	overflow: hidden;
}

.stripe-reveal .stripe-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	display: flex;
	pointer-events: none;
}

.stripe-reveal .stripe {
	flex: 1;
	height: 100%;
	background-color: #fff;
}