@charset "utf-8";
/* *************************************************************************************************************
 *	js_scrollMouseDrag (v1.0)																			2023.09
----------------------------------------------------------------------------------------------------------------
 *	[スクロールのドラッグ有効化]、[矢印ボタンをホバーで左右スクロール]の初期スタイルです。
 *	カスタムデータ属性の接頭辞は[data-js-scrollmousedrag-]。※JSでも利用しているため、カスタムデータ属性名・値名は基本的に変更不可。
 *	カスタムデータ属性の等号記号に注意（^=先頭の値、$=末尾の値）
----------------------------------------------------------------------------------------------------------------
 *	ページ用CSSにて、コンテンツの幅高さなどの設定必須。メディアクエリ指定もページ用CSSでの設定を推奨。
----------------------------------------------------------------------------------------------------------------
div[data-js-scrollmousedrag-elem="wrap"]>(div[data-js-scrollmousedrag-elem="scroll"][data-js-scrollmousedrag-position="center"](>div[data-js-scrollmousedrag-elem="innerbox"]>img[alt="眺望"]))+(div>(div[data-js-scrollmousedrag-arrow="button_prev"][aria-label="マウスホバーで「左」にスクロール移動"]>(span.icon)+(span.arrow{←}))+(div[data-js-scrollmousedrag-arrow="button_next"][aria-label="マウスホバーで「右」にスクロール移動"]>(span.icon)+(span.arrow{→}))+(div[data-js-scrollmousedrag-arrow="forTouchDevices_prev"][aria-hidden="true"]>(span.icon)+(span.arrow{←}))+(div[data-js-scrollmousedrag-arrow="forTouchDevices_next"][aria-hidden="true"]>(span.icon)+(span.arrow{→})))
----------------------------------------------------------------------------------------------------------------
 *	[data-js-scrollmousedrag-elem="wrap"]						スクロールコンテンツのラッパー
 *	[data-js-scrollmousedrag-elem="scroll"]						ドラッグスクロール要素
 *	[data-js-scrollmousedrag-elem="innerbox"]					インナーボックス
 *	[data-js-scrollmousedrag-position="center"]					スクロール要素の初期表示位置：センター
 *	[data-js-scrollmousedrag-arrow="button_prev"]				矢印：JS連携-矢印ボタン：左
 *	[data-js-scrollmousedrag-arrow="button_next"]				矢印：JS連携-矢印ボタン：右
 *	[data-js-scrollmousedrag-arrow="forTouchDevices_prev"]		矢印：タッチデバイス用アイコン：左
 *	[data-js-scrollmousedrag-arrow="forTouchDevices_next"]		矢印：タッチデバイス用アイコン：右
************************************************************************************************************* */

/* CssCustomProperties | ページ用CSSで設定必須
------------------------------------------------------------------------ */
	[data-js-scrollmousedrag-elem="wrap"] {
		/* ------------------------------------
		 * ラッパーの幅の関数に使う引数（width: min(VAL, MAX);）
		------------------------------------ */
		--scrollmousedrag-elem-wrap-width-parameter_VAL: 100%;			/* 初期値：ラッパーの横幅 */
		--scrollmousedrag-elem-wrap-width-parameter_MAX: 1920px;		/* 初期値：ラッパーのmax横幅 */
		/* ------------------------------------
		 * インナーボックスの幅高さ、縮小率
		------------------------------------ */
		--scrollmousedrag-elem-innerbox-width:	3430;					/* 初期値：インナーボックスの横幅（単位無し） */
		--scrollmousedrag-elem-innerbox-height:	680;					/* 初期値：インナーボックスの縦幅（単位無し） */
		--scrollmousedrag-elem-innerbox-height-reductionRatio: .8;		/* 初期値：インナーボックスの縮小率 */
	}


/* スクロールコンテンツ一式の設定
------------------------------------------------------------------------ */
	/* ------- スクロールコンテンツのラッパー */
	[data-js-scrollmousedrag-elem="wrap"] {
		width: min(var(--scrollmousedrag-elem-wrap-width-parameter_VAL, 90%), var(--scrollmousedrag-elem-wrap-width-parameter_MAX, 1920px));
		position: relative;
		z-index: 0;
		overflow: hidden;
		margin: auto;
	}
	/* --------------- ドラッグスクロール要素 */
	[data-js-scrollmousedrag-elem="scroll"] {
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		margin: auto;
		cursor: move;
	}
	/* --------------------- インナーボックス */
	[data-js-scrollmousedrag-elem="innerbox"] {
		height: calc((var(--scrollmousedrag-elem-innerbox-height) * 1px) * var(--scrollmousedrag-elem-innerbox-height-reductionRatio));
		aspect-ratio: var(--scrollmousedrag-elem-innerbox-width) / var(--scrollmousedrag-elem-innerbox-height);
	}
	[data-js-scrollmousedrag-elem="innerbox"] img {
		width: auto;
		max-width: none;
		height: 100%;
	}
	/* --------------------------------- 矢印 */
	[data-js-scrollmousedrag-arrow] {
		--scrollmousedrag-arrow-display: flex;	/* それぞれのタイミングで flex に変更する */
		display: none;							/* 非表示を初期値とする (none | flex) */
		justify-content: center;
		align-items: center;
		position: absolute;
		inset: 0 auto auto;
		z-index: 1;
		width: 75px;
		height: calc(100% - 16px);				/* ざっくりスクロールバーの高さ分減らす（背景色有の場合は100%にする） */
		overflow: hidden;
		color: #fff;
		font-size: 2em;
		/*background: rgba(0, 0, 0, .7);*/
	}
	[data-js-scrollmousedrag-arrow$="_prev"] { left: 0; }
	[data-js-scrollmousedrag-arrow$="_next"] { right: 0; }
	
	[data-js-scrollmousedrag-arrow] .icon {
		/*--scrollmousedrag-arrow-icon-translateX:	calc(25% - ((var(--scrollmousedrag-arrow-icon-line-bd-width)/2)/2));*/	/* 中央揃え */
		--scrollmousedrag-arrow-icon-translateX:	calc(50% - ((var(--scrollmousedrag-arrow-icon-line-bd-width)/2)));		/* 内寄り */
		--scrollmousedrag-arrow-icon-scaleX:		.85;	/* 初期値：1 */
		--scrollmousedrag-arrow-icon-scaleY:		1;		/* 初期値：1 */
		--scrollmousedrag-arrow-icon-line-bd-color:	#fff;
		--scrollmousedrag-arrow-icon-line-bd-width:	6px;	/* 0pxでも単位必須 */
		display: flex;
		width: 100%;
		aspect-ratio: 1;
		clip-path: inset(0 calc(50% - (var(--scrollmousedrag-arrow-icon-line-bd-width)/2)) 0 0);
	}
	[data-js-scrollmousedrag-arrow$="_prev"] .icon { transform: scale(calc(var(--scrollmousedrag-arrow-icon-scaleX, 1)*1), var(--scrollmousedrag-arrow-icon-scaleY, 1)) translateX(var(--scrollmousedrag-arrow-icon-translateX, 0)); }
	[data-js-scrollmousedrag-arrow$="_next"] .icon { transform: scale(calc(var(--scrollmousedrag-arrow-icon-scaleX, 1)*-1), var(--scrollmousedrag-arrow-icon-scaleY, 1)) translateX(var(--scrollmousedrag-arrow-icon-translateX, 0)); }
	
	[data-js-scrollmousedrag-arrow] .icon::before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 1;
		border: 0 solid var(--scrollmousedrag-arrow-icon-line-bd-color);
		border-top-width: var(--scrollmousedrag-arrow-icon-line-bd-width);
		border-left-width: var(--scrollmousedrag-arrow-icon-line-bd-width);
		transform: scale(calc(1/(1*1.41421356))) rotate(-45deg); /* scale(calc(1/(1*1.41421356))) = 45度回転した子を親の内寸に合わせて縮める */
	}
	
	[data-js-scrollmousedrag-arrow] .arrow {
		position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.99% 99.99%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; padding: 0; border: 0;
	}
	
	/* --- hover可能 | JS連携-矢印ボタン（^=先頭の値） --- */
	@media (hover: hover) and (pointer: fine) {
		[data-js-scrollmousedrag-arrow^="button_"] {
			display: var(--scrollmousedrag-arrow-display);
		}
	}
	/* --- hover不能 | タッチデバイス用アイコン（^=先頭の値） --- */
	/*@media (hover: none) {
		[data-js-scrollmousedrag-arrow^="forTouchDevices_"] {
			display: var(--scrollmousedrag-arrow-display);
			pointer-events: none;
			cursor: default;
			animation: .6s ease-out 0s both infinite alternate;
		}
		[data-js-scrollmousedrag-arrow="forTouchDevices_prev"] { animation-name: ANIME-scrollmousedrag-arrow-prev; }
		[data-js-scrollmousedrag-arrow="forTouchDevices_next"] { animation-name: ANIME-scrollmousedrag-arrow-next; }
	}*/


/* メディアクエリ
------------------------------------------------------------------------ */
/*
@media screen and (max-width: 900px) {
	[data-js-scrollmousedrag-elem="wrap"] {
		--scrollmousedrag-elem-innerbox-height-reductionRatio: .8;
	}
	[data-js-scrollmousedrag-arrow] {
		width: 60px;
	}
}
@media screen and (max-width: 600px) {
	[data-js-scrollmousedrag-elem="wrap"] {
		--scrollmousedrag-elem-wrap-width-parameter_VAL: 100%;
		--scrollmousedrag-elem-innerbox-height-reductionRatio: .6;
	}
	[data-js-scrollmousedrag-arrow] {
		width: 40px;
	}
	[data-js-scrollmousedrag-arrow] .icon {
		--scrollmousedrag-arrow-icon-scaleY:		1.3;
		--scrollmousedrag-arrow-icon-line-bd-width:	4px;
	}
}
*/


/* =================================
	@KEYFRAMES
================================= */
@keyframes ANIME-scrollmousedrag-arrow-prev {
	0% {	transform: translateX(0%);}
	100% {	transform: translateX(-18%);}
}
@keyframes ANIME-scrollmousedrag-arrow-next {
	0% {	transform: translateX(0%);}
	100% {	transform: translateX(18%);}
}