@charset "UTF-8";
/* ============================================================
   トップメインスライダー UI 調整
   ・ページャー（丸ボタン）を現状の90%サイズに
   ・全体を opacity:0.7 で薄く
   bxSlider 標準ページャー(.bx-pager.bx-default-pager)を上書き
   ============================================================ */

/* ページャー全体を薄く */
.bx-wrapper .bx-pager.bx-default-pager {
	opacity: 0.5;
}

/* SP（既定 12px / margin 0 11px → 90%） */
.bx-wrapper .bx-pager.bx-default-pager a {
	width: 10.8px;          /* 12 * 0.9 */
	height: 10.8px;
	margin: 0 9.9px;        /* 11 * 0.9 */
	-moz-border-radius: 5.4px;
	-webkit-border-radius: 5.4px;
	border-radius: 5.4px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	width: 10.8px;
	height: 10.8px;
}

/* PC（既定 10px / margin 0 8px → 90%） */
@media print, screen and (min-width: 751px) {
	.bx-wrapper .bx-pager.bx-default-pager a {
		width: 9px;          /* 10 * 0.9 */
		height: 9px;
		margin: 0 7.2px;     /* 8 * 0.9 */
		-moz-border-radius: 4.5px;
		-webkit-border-radius: 4.5px;
		border-radius: 4.5px;
	}
	.bx-wrapper .bx-pager.bx-default-pager a:hover,
	.bx-wrapper .bx-pager.bx-default-pager a.active {
		width: 9px;
		height: 9px;
	}
}


/* ============================================================
   box2〜5 画像のホバーエフェクト（明るくなる＋軽く拡大）
   .hover-zoom でラップした画像にのみ適用。
   data-scroll のスクロール演出は親(.contents100等)側なので干渉しない。
   ============================================================ */
.hover-zoom {
	display: block;
	position: relative;
	overflow: hidden;       /* 拡大した画像のはみ出しをクリップ */
	line-height: 0;
}
.hover-zoom > img {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
	            filter 0.6s ease;
	will-change: transform, filter;
	backface-visibility: hidden;
}
/* マウスが乗ったとき：軽く拡大＋明るく */
.hover-zoom:hover > img {
	transform: scale(1.04);
	filter: brightness(1.08);
}

/* タッチ端末ではホバーが固定化しないよう無効化（誤作動防止） */
@media (hover: none) {
	.hover-zoom:hover > img {
		transform: none;
		filter: none;
	}
}


/* ============================================================
   CONTENTSスライダー（box7 Swiper）TOP/ACCESS等ボタンの
   hover フェード演出
   既存は .slider_ph1bg の background が hover で
   rgba(0,0,0,.5)→.8 に即時変化していたため、
   transition を付けて滑らかにフェードさせる。
   ============================================================ */
.swiper-slide .slider_ph1bg {
	transition: background-color 0.45s ease;
	will-change: background-color;
}

/* 背景画像も hover でわずかに拡大しながらフェード（上品な動き）。
   .slider_ph1 に overflow:hidden を付けてはみ出しをクリップ。 */
.swiper-slide .slider_ph1 {
	overflow: hidden;
}
.swiper-slide a:not(.off) .slider_ph1 > img {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	backface-visibility: hidden;
}
.swiper-slide a:not(.off):hover .slider_ph1 > img {
	transform: scale(1.05);
}

/* テキスト（ラベル画像）も hover でふわっと（任意の上品な演出） */
.swiper-slide .slider_ph1_txt {
	transition: opacity 0.45s ease;
}

/* タッチ端末ではホバー演出を無効化 */
@media (hover: none) {
	.swiper-slide a:not(.off):hover .slider_ph1 > img {
		transform: none;
	}
}