/* ページ全体の背景と中央配置
   - 画面全体(100vh)を使い、Flexboxで水平・垂直とも中央寄せ
   - 余白の意図しない影響を避けるため margin: 0
*/
body {
  background-color: aliceblue; /* 優しい水色の背景 */
  margin: 0;                   /* デフォルト余白を無効化 */
  height: 100vh;               /* 画面の高さいっぱいを使用 */
  display: flex;               /* 子要素（.carousel）を中央配置しやすくする */
  justify-content: center;     /* 水平方向の中央揃え */
  align-items: center;         /* 垂直方向の中央揃え */
}

/* ページ全体のコンテナ */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 95%;
  gap: 30px;
}

/* カルーセルの土台
   - 中央に固定されたステージのような領域
   - position: relative を付けることで、子要素(.slide)を絶対配置できる
   - 任意の高さを指定（画像の動きに奥行きを感じさせるための余白）
*/
.carousel {
  display: flex;               /* 中身の初期配置補助（今回はabsolute主体なので見た目は影響少） */
  justify-content: center;     /* 中央寄せの保険 */
  align-items: center;         /* 縦方向の中央寄せの保険 */
  gap: 40px;                   /* 将来的にflex配置へ切り替える場合の余白 */
  padding: 20px;               /* ステージの内側余白 */
  position: relative;          /* 子要素の絶対配置基準にする */
  width: 100%;                 /* 横幅いっぱい */
  height: 400px;               /* ステージの高さ（画像の拡大・退避に十分な空間） */
}

/* 各スライドの枠
   - ステージ中央(50%, 50%)に原点を置き、そこからtranslateで微調整
   - transitionは「位置・回転・拡大・透明度」などの変化を滑らかに
   - perspectiveで3D回転(rotateY)に奥行きを与える
*/
.slide {
  position: absolute;          /* ステージ内で自由に重ねて配置 */
  left: 50%;                   /* ステージ中央のX座標 */
  top: 50%;                    /* ステージ中央のY座標 */
  transform: translate(-50%, -50%); /* 中央基準にぴったり合わせる */
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 少し弾むような滑らかさ */
  perspective: 1200px;         /* 3D効果の奥行き（数値が大きいほど遠近感が弱くなる） */
}

/* 画像の基本スタイル
   - 角丸＋影で柔らかく
   - opacityで控えめな初期印象
   - transitionはtransform/opacity/影をまとめてスムーズに
*/
.slide img {
  width: 300px;                /* 標準サイズ（PC想定） */
  height: auto;                /* アスペクト比維持 */
  border-radius: 12px;         /* 角を丸くする */
  box-shadow: 0 6px 18px rgba(0,0,0,0.2); /* ふんわりとした影 */
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 画像の変形も滑らかに */
  cursor: pointer;             /* クリックできることを示す */
  opacity: 0.8;                /* 控えめスタート（activeで1に） */
  display: block;              /* inline要素の余白を避けるため */
}

/* 左側に退避する写真（奥にある感じ）
   - translateX で左へずらす
   - scale で小さく
   - rotateY で斜め向きにして奥行きを演出
   - opacity/blur で奥の被写界深度っぽさをプラス
*/
.slide.left img {
  transform: translateX(-280px) scale(0.7) rotateY(35deg);
  opacity: 0.5;                /* 目立たせない */
  filter: blur(1px);           /* ほんの少しぼかして奥行き感 */
}

/* 中央のアクティブ写真（主役）
   - translateX(0) で真正面
   - scale(1) で等倍（必要なら大きくしたい値に変更）
   - rotateY(0deg) で正面向きに
   - 強めの影と不透明で主役感
   - z-index を上げて重なり順を最前面へ
*/
.slide.active img {
  transform: translateX(0) scale(1) rotateY(0deg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35); /* 主役用の存在感のある影 */
  opacity: 1;                 /* はっきり表示 */
  z-index: 2;                 /* 最前面に */
}

/* 右側に退避する写真（手前）
   - translateX で右へずらす
   - scale で小さく
   - rotateY(-35deg) で逆方向に斜め向き
   - opacity/blur で控えめに（手前感の演出に少しのぼかし）
*/
.slide.right img {
  transform: translateX(280px) scale(0.7) rotateY(-35deg);
  opacity: 0.5;                /* 目立たせない */
  filter: blur(1px);           /* 奥行き差の表現（過度にぼけないよう控えめ） */
}

/* 左右の退避スライドを主役より下に
   - z-indexの調整で重なりの順番を明示
*/
.slide.left { z-index: 1; }
.slide.right { z-index: 1; }

/* 表示対象外スライド（画面外へ移動して重なり防止） */
.slide.gone {
  transform: translateX(680px) scale(0.6);
  opacity: 0;
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
}

/* スマホ対応（幅600px以下）
   - ステージの高さを低めに
   - 画像サイズを縮め、object-fitで正方形のトリミング
   - 左右退避距離・回転角を緩めて、狭い画面でも重なりにくく
*/
@media (max-width: 600px) {
  .carousel { 
    height: 300px;             /* ステージ高さを調整 */
  }
  
  .slide img { 
    width: 200px;              /* スマホに合わせた基準サイズ */
    height: 120px;             /* 正方形にする */
    object-fit: cover;         /* 画像の中心を保ちつつ切り取り */
  }
  
  /* 左側（スマホ向けに控えめな退避・回転） */
  .slide.left img { 
    transform: translateX(-150px) scale(0.65) rotateY(25deg);
    opacity: 0.4;              /* より控えめに */
  }
  
  /* 中央（主役） */
  .slide.active img { 
    transform: translateX(0) scale(1) rotateY(0deg);
    width: 140px;              /* 主役は少し大きめに */
    height: 140px;
  }
  
  /* 右側（スマホ向けに控えめな退避・回転） */
  .slide.right img { 
    transform: translateX(150px) scale(0.65) rotateY(-25deg);
    opacity: 0.4;              /* より控えめに */
  }
}

/* ホームボタンのスタイル */
.home-link {
  text-decoration: none;
  color: #4a7ba7;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 24px;
  border: 2px solid #4a7ba7;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.home-link:hover {
  background-color: #4a7ba7;
  color: white;
  transform: scale(1.05);
}