@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

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

/* ヒーロー直下の「重なり」領域をヒーローにかぶせる */
.hero-overlap{
  margin-top: -80px;              /* ← ここが「重なり」のキモ。数値はあとで好みで調整 */
  position: relative;
  z-index: 5;
  display: flex;
  gap: clamp(12px, 2vw, 24px);    /* カード間のすき間 */
  flex-wrap: wrap;                 /* 画面が狭い時は縦に折り返す */
  justify-content: center;         /* 中央寄せ（左右バランスが良い） */
}

/* 画像カード（画像を包むグループに付けたクラス） */
.hero-card{
  display: inline-block;
  border-radius: 16px;             /* 角丸 */
  overflow: hidden;                 /* 角丸から画像がはみ出さない */
  box-shadow: 0 10px 30px rgba(0,0,0,.12); /* 影 */
  transform: translateY(16px);     /* 初期位置：少し下にずらす（アニメ前） */
  opacity: 0;                      /* 初期は透明 */
  transition: transform .8s ease, opacity .8s ease;
  max-width: min(38vw, 520px);     /* 横幅の上限（大きすぎ防止） */
}

/* JSが反応すると .in-view が付く → そこで初めて表示 */
.hero-card.in-view{
  transform: translateY(0);
  opacity: 1;
}

/* 順番に遅らせるための遅延クラス（必要な枚数ぶん用意） */
.delay-1{ transition-delay: .1s; }
.delay-2{ transition-delay: .25s; }
.delay-3{ transition-delay: .4s; }
.delay-4{ transition-delay: .55s; }

/* スマホ調整（狭い画面のときの重なり量と幅） */
@media (max-width: 782px){
  .hero-overlap{ margin-top: -40px; }
  .hero-card{ max-width: 100%; }
}