@charset "UTF-8";
/* ============================================================
   トップビジュアル スライドショー Ken Burns 演出（PC / SP 個別）
   bxSlider(#slider1=PC / #slider2=SP)

   構造：
   .top_main_ph1（スライド／bxSliderがabsoluteで重ねる）
     ├ .top_main_ph1_txt1（テキスト枠画像＝サイズ確定・固定・非アニメ）
     ├ .kb-clip（動く画像のクリップ枠＝overflow:hidden）
     │    └ img もしくは .kb-col>img（拡大・縮小・パンする画像）
     └ .contents98（キャプション＝固定・非アニメ）

   テキスト枠画像がスライドの天地サイズを確定し、
   その枠の外へ出た動く画像は overflow:hidden で非表示。
   アニメーション時間 = 静止5100 + フェード1400 = 6.5s（forwardsで終端保持）
   効果は .top_main_ph1[data-kb] を JS が読み、効果クラスを付与。
   ============================================================ */

/* テキスト枠画像：通常フローでスライドの高さを確定（基準） */
#slider1 .top_main_ph1_txt1,
#slider2 .top_main_ph1_txt1 {
	position: relative;
	z-index: 3;
	margin: 0;
	padding: 0;
}
#slider1 .top_main_ph1_txt1 > img,
#slider2 .top_main_ph1_txt1 > img {
	display: block;
	width: 100%;
	height: auto;
	transform: none !important;
	animation: none !important;
}

/* 動く画像のクリップ枠：テキスト枠と完全に重なる絶対配置＋はみ出し切り */
#slider1 .kb-clip,
#slider2 .kb-clip {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;     /* ← 枠外を非表示にする本体 */
	z-index: 1;
	line-height: 0;
}

/* 単一の動く画像（strip以外）：枠いっぱいに cover で敷く */
#slider1 .kb-clip > img,
#slider2 .kb-clip > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	will-change: transform;
	transform-origin: center center;
	backface-visibility: hidden;
}

/* 横パンするスライドの画像は「高さ100%・幅auto」で枠より広くし、
   左右中央は .kb-clip の flex で行う（transformに依存しない）。
   これにより animation 終了状態で transform がリセットされても
   中央配置が保たれ、片側に余白が出る不具合を防ぐ。
   data-kb 属性（常に存在）で判定するため、効果クラスの有無に依存しない。 */
#slider1 .top_main_ph1[data-kb="panright"] .kb-clip,
#slider1 .top_main_ph1[data-kb="panleft"]  .kb-clip,
#slider2 .top_main_ph1[data-kb="panright"] .kb-clip,
#slider2 .top_main_ph1[data-kb="panleft"]  .kb-clip {
	display: flex;
	justify-content: center;
	align-items: center;
}
#slider1 .top_main_ph1[data-kb="panright"] .kb-clip > img,
#slider1 .top_main_ph1[data-kb="panleft"]  .kb-clip > img,
#slider2 .top_main_ph1[data-kb="panright"] .kb-clip > img,
#slider2 .top_main_ph1[data-kb="panleft"]  .kb-clip > img {
	position: relative;     /* absolute/left をやめ flex 中央に委ねる */
	top: auto;
	left: auto;
	width: auto;
	height: 100%;
	max-width: none;        /* 親CSSのmax-width:100%で潰れるのを防ぐ */
	flex: 0 0 auto;
	object-fit: initial;
	transform-origin: center center;
	transform: none;        /* 静止時は無変形（中央はflexが担保） */
}

/* キャプション復活：スライド枠の右下に固定し最前面へ */
#slider1 .top_main_ph1 > .contents98,
#slider2 .top_main_ph1 > .contents98 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 98%;
	margin: 0 auto;
	z-index: 4;
	pointer-events: none;
}
#slider1 .top_main_ph1 > .contents98 .cap01.right01.pa01,
#slider2 .top_main_ph1 > .contents98 .cap01.right01.pa01 {
	position: absolute;
	bottom: 0.4em;
	right: 0.5em;
}

/* ============================================================
   PC（#slider1）の動き
   ============================================================ */

/* 拡大：100% → 拡大（PCでは基本未使用だが定義しておく） */
#slider1 .kb-active.kb-zoomin .kb-clip > img {
	animation: kb-zoomin-pc 6.5s linear forwards;
}
@keyframes kb-zoomin-pc {
	from { transform: scale(1.0); }
	to   { transform: scale(1.12); }
}

/* 縮小：拡大状態スタート → 100%付近で終了（スライド1） */
#slider1 .kb-active.kb-zoomout .kb-clip > img {
	animation: kb-zoomout-pc 6.5s linear forwards;
}
@keyframes kb-zoomout-pc {
	from { transform: scale(1.12); }
	to   { transform: scale(1.0); }
}

/* 左→右（スライド3）：高さ100%・幅auto・中央配置。
   余白(±6.25%)の範囲内で、現行の2/3の移動量にする。 */
#slider1 .kb-active.kb-panright .kb-clip > img {
	animation: kb-panright-pc 6.5s linear forwards;
}
@keyframes kb-panright-pc {
	from { transform: translateX(-3.2%); }
	to   { transform: translateX(3.2%); }
}

/* 右→左（スライド4） */
#slider1 .kb-active.kb-panleft .kb-clip > img {
	animation: kb-panleft-pc 6.5s linear forwards;
}
@keyframes kb-panleft-pc {
	from { transform: translateX(3.2%); }
	to   { transform: translateX(-3.2%); }
}

/* ============================================================
   SP（#slider2）の動き
   ============================================================ */

/* 拡大：100% → 拡大（スマホ スライド4） */
#slider2 .kb-active.kb-zoomin .kb-clip > img {
	animation: kb-zoomin-sp 6.5s linear forwards;
}
@keyframes kb-zoomin-sp {
	from { transform: scale(1.0); }
	to   { transform: scale(1.12); }
}

/* 縮小：拡大状態 → 100%付近（スマホ スライド1） */
#slider2 .kb-active.kb-zoomout .kb-clip > img {
	animation: kb-zoomout-sp 6.5s linear forwards;
}
@keyframes kb-zoomout-sp {
	from { transform: scale(1.12); }
	to   { transform: scale(1.0); }
}

/* 左→右（スマホ スライド3）：高さ100%・幅auto・中央配置。
   画像は枠より約42%広い→画像幅±14.7%まで安全。±12%で動かす。 */
#slider2 .kb-active.kb-panright .kb-clip > img {
	animation: kb-panright-sp 6.5s linear forwards;
}
@keyframes kb-panright-sp {
	from { transform: translateX(-12%); }
	to   { transform: translateX(12%); }
}

/* 右→左（SPでは未使用だが定義） */
#slider2 .kb-active.kb-panleft .kb-clip > img {
	animation: kb-panleft-sp 6.5s linear forwards;
}
@keyframes kb-panleft-sp {
	from { transform: translateX(12%); }
	to   { transform: translateX(-12%); }
}

/* ============================================================
   strip（分割カラムの天地移動） PC=3分割 / SP=2分割
   ============================================================ */
#slider1 .kb-strip,
#slider2 .kb-strip {
	display: flex;
	flex-wrap: nowrap;
}
#slider1 .kb-strip .kb-col,
#slider2 .kb-strip .kb-col {
	position: relative;
	height: 100%;
	overflow: hidden;
	line-height: 0;
}
/* PC=3分割（各幅は画像比に合わせて 462:476:462 = 1400） */
#slider1 .kb-strip3 .kb-col:nth-child(1) { width: 33.000%; }
#slider1 .kb-strip3 .kb-col:nth-child(2) { width: 34.000%; }
#slider1 .kb-strip3 .kb-col:nth-child(3) { width: 33.000%; }
/* SP=2分割（均等 50%:50%） */
#slider2 .kb-strip2 .kb-col { width: 50%; }

/* 列の画像：横幅は列いっぱい、縦は元比のまま（枠より長い）→上下にパン */
#slider1 .kb-strip .kb-col > img,
#slider2 .kb-strip .kb-col > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: cover;
	object-position: center top;
	will-change: transform;
	backface-visibility: hidden;
}

/* PC strip：はみ出し25%→22%動かす。SP strip：はみ出し20%→18%動かす。 */
#slider1 .kb-strip-active .kb-col-down > img { animation: kb-down-pc 6.5s linear forwards; }
#slider1 .kb-strip-active .kb-col-up   > img { animation: kb-up-pc   6.5s linear forwards; }
@keyframes kb-down-pc { from { transform: translateY(-11%); } to { transform: translateY(0); } }
@keyframes kb-up-pc   { from { transform: translateY(0); }   to { transform: translateY(-11%); } }

#slider2 .kb-strip-active .kb-col-down > img { animation: kb-down-sp 6.5s linear forwards; }
#slider2 .kb-strip-active .kb-col-up   > img { animation: kb-up-sp   6.5s linear forwards; }
@keyframes kb-down-sp { from { transform: translateY(-18%); } to { transform: translateY(0); } }
@keyframes kb-up-sp   { from { transform: translateY(0); }   to { transform: translateY(-18%); } }

/* アクセシビリティ：動きを減らす設定では演出停止 */
@media (prefers-reduced-motion: reduce) {
	#slider1 .kb-clip img,
	#slider2 .kb-clip img {
		animation: none !important;
		transform: none !important;
	}
}