@charset "utf-8";
/* CSS Document */

/* =============================================
   CSS Variables（カスタムプロパティ）
   ============================================= */
:root {
  --gap: clamp(16px, 3vw, 32px);
  --text-w: min(680px, 80vw);
}

/* =============================================
   ベーススタイル
   ============================================= */
* {
  box-sizing: border-box;
}

article {
  margin: 0;
  font: 16px/1.9 -apple-system, 'Zen Old Mincho', Meiryo, sans-serif;
  color: #223;
  /*background: #f8f9fa;*/
}

/* =============================================
   シーン（セクション）のレイアウト
   ============================================= */
/*.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--text-w)) 1fr;
  align-items: center;
  padding: 10vh 0;
}*/

.scene {
  /*position: sticky;*/
  top: 0;
  /*min-height: 100vh;*/
  height: 90vh;  /* ← 追加 */
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--text-w)) 1fr;
  align-items: start;
  padding: 0;
  margin: 100px auto;
  position: relative; 
  /*min-height: 140vh;*/          /* ← スクロール量を確保。必要に応じて調整 */
  isolation: isolate; 
	opacity: 1;
    animation: none;
	}

/* =============================================
   中央カラム（テキストエリア）
   ============================================= */
/*.center {
  grid-column: 2;
  z-index: 2;
  padding: 0 var(--gap);
  position: sticky; 
  top: 50%; 
  transform: translateY(-50%); 
}*/

.center {
  grid-column: 2;
  z-index: 2;
  padding: 0 var(--gap);
  /* position: fixed などは削除 */
  margin-top: -70vh
}

.textbox {
  /*max-height: min(60vh, 560px);
  overflow: auto;*/
  padding: clamp(18px, 2.4vw, 24px);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #eee;
  /*border-radius: 14px;*/
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  margin-top: -20vh;
  opacity: 1;
    animation: none;
}

.textbox h2 {
  margin-top: 0;
  font-size: 1.6em;
  color: #5a2a6e;
}

.textbox p {
  margin: 1em 0;
}

/* =============================================
   画像レイヤー（sticky配置）
   ============================================= */
.side.sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  grid-column: 1 / -1;
  pointer-events: none; /* テキスト操作を邪魔しない */
}

/* =============================================
   画像の共通スタイル
   ============================================= */
.pimg {
  position: absolute;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  filter: blur(6px);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
  will-change: opacity, transform, filter;
  /*border-radius: 12px;*/
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* フェードイン状態 */
.pimg.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}



/* =============================================
   画像サイズのバリエーション
   ============================================= */
.pimg.small {
  width: clamp(220px, 22vw, 360px);
  height: clamp(160px, 16vw, 260px);
}

.pimg.med {
  width: clamp(300px, 28vw, 460px);
  height: clamp(220px, 20vw, 340px);
}

.pimg.large {
  width: clamp(380px, 36vw, 600px);
  height: clamp(280px, 26vw, 440px);
}

.pimg.wide {
  width: min(980px, 88vw);
  height: clamp(200px, 18vw, 320px);
}

.pimg.tall {
  width: clamp(280px, 24vw, 400px);
  height: clamp(400px, 36vw, 600px);  /* 高さを幅より大きく */
}

/* =============================================
   画像の位置プリセット
   ============================================= */
/* 左上 */
.pimg.lt {
  left: max(16px, 3vw);
  top: 8vh;
}

/* 右上 */
.pimg.rt {
  right: max(16px, 3vw);
  top: 8vh;
}

/* 左下 */
.pimg.lb {
  left: max(16px, 3vw);
  bottom: 6vh;
}

/* 右下 */
.pimg.rb {
  right: max(16px, 3vw);
  bottom: 6vh;
}

/* =============================================
   画像位置の微調整ユーティリティ
   ============================================= */
.pimg.y20 {
  top: -10vh;
  bottom: auto;
}

.pimg.y68 {
  top: auto;
  bottom: 12vh;
}

.pimg.y70 {
  top: auto;
  bottom: 8vh;
}

/* =============================================
   レスポンシブ対応（モバイル）
   ============================================= */
/*@media (max-width: 768px) {
  .textbox {
    max-height: 75vh;
  }

  .pimg.small,
  .pimg.med {
    width: clamp(180px, 46vw, 320px);
  }

  .pimg.wide {
    width: 94vw;
  }
}*/

/*@media (max-width: 768px) {
  .scene {
    height: auto;
    min-height: 100vh;
    padding: 0;
	margin: 150px auto;
  }

  .center {
    margin-top: 0;
    align-self: center;
    margin-bottom: 0;
  }

  .textbox {
    font-size: 14px;
	margin-top: -82vh;
  }

  .textbox h2 {
    font-size: 1.3em;
  }


  .pimg.small {
    width: clamp(120px, 35vw, 200px);
    height: clamp(90px, 26vw, 150px);
  }

  .pimg.med {
    width: clamp(140px, 38vw, 220px);
    height: clamp(105px, 28vw, 165px);
  }

  .pimg.large {
    width: clamp(160px, 42vw, 260px);
    height: clamp(120px, 31vw, 195px);
  }

  .pimg.tall {
    width: clamp(120px, 30vw, 180px);
    height: clamp(180px, 45vw, 280px);
  }

  .pimg.wide {
    width: 90vw;
    height: clamp(100px, 25vw, 150px);
  }

 
  .pimg.lt {
    left: 5px;
    top: 2vh;
  }

  .pimg.rt {
    right: 5px;
    top: 2vh;
  }

  .pimg.lb {
    left: 5px;
    bottom: 2vh;
    top: auto;
  }

  .pimg.rb {
    right: 5px;
    bottom: -16vh;
    top: auto;
  }

  .pimg.y20 {
    top: 2vh;
    bottom: auto;
  }

  .pimg.y68 {
    top: auto;
    bottom: -14vh;
  }

  .pimg.y70 {
    top: auto;
    bottom: -11vh;
  }
}*/

@media (max-width: 768px) {
  .scene {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 3vh 16px;
	opacity: 0;
        animation: fadeInAnime 1.6s ease-out forwards;
  }

  .side.sticky {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 3vh;
    pointer-events: auto;
    grid-column: auto !important;
	  opacity: 0;
        animation: fadeInAnime 1.6s ease-out forwards;
  }

  .center {
    position: relative !important;
    margin-top: 0 !important;
    padding: 0;
    max-width: 100%;
    order: 2;
    grid-column: auto !important;
  }

  .textbox {
    font-size: 14px;
    margin-bottom: 3vh;
	margin-top: -2vh
  }

  .textbox h2 {
    font-size: 1.3em;
  }

  /* 画像を通常配置に */
  .pimg {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 0 16px 0 !important;
    display: block !important;
    width: 100% !important;
  }

  /* 画像サイズ調整 */
  .pimg.small {
    height: auto;
    aspect-ratio: 4/3;
  }

  .pimg.med {
    height: auto;
    aspect-ratio: 4/3;
  }

  .pimg.large {
    height: auto;
    aspect-ratio: 16/10;
  }

  .pimg.tall {
    height: auto;
    aspect-ratio: 3/4;
  }

  .pimg.wide {
    height: auto;
    aspect-ratio: 21/9;
  }

  /* セクションごとの順番 */
  .scene:nth-of-type(1) .pimg:nth-child(1) { order: 1; }
  .scene:nth-of-type(1) .pimg:nth-child(2) { order: 4; }
  .scene:nth-of-type(1) .pimg:nth-child(3) { order: 3; }

  /*.scene:nth-of-type(2) .pimg:nth-child(1) { order: 1; }
  .scene:nth-of-type(2) .pimg:nth-child(2) { order: 3; }
  .scene:nth-of-type(2) .pimg:nth-child(3) { order: 4; }

  .scene:nth-of-type(3) .pimg:nth-child(1) { order: 1; }
  .scene:nth-of-type(3) .pimg:nth-child(2) { order: 3; }
  .scene:nth-of-type(3) .pimg:nth-child(3) { order: 4; }*/
}


@keyframes fadeInAnime {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}