@charset "UTF-8";
/* =============================================================
   swipe.css
   先行実施エリア（pre_area.html）テーブルの「横スクロール誘導」演出
   -------------------------------------------------------------
   ・対象要素 : .tableWrapper（common.css で overflow-x:auto。
                SP では table.denwa-table が min-width:118vw のため横スクロールが発生する）
   ・表示条件 : SP のみ（max-width:767px。※他CSSのSPブレークポイントに準拠）
   ・表示制御 : swipe.js が .tableWrapper に .is-swipe を付与／
                mouseenter・touchstart で除去する
   ・演出構成 : ::after=半透明マスク / ::before=スワイプアイコン / .swipeObjText=誘導文言
   ============================================================= */

/* 誘導文言は演出中以外は常に非表示（PC含む） */
.tableWrapper .swipeObjText {
	display: none;
}

@media screen and (max-width: 767px) {

	/* 疑似要素・文言の配置基準 */
	.tableWrapper.is-swipe {
		position: relative;
	}

	/* ① テーブル全体を覆う半透明の黒マスク */
	.tableWrapper.is-swipe::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
		pointer-events: none;
	}

	/* ② スワイプアイコン（左右に揺れるアニメーション） */
	.tableWrapper.is-swipe::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 68px;
		height: 69px;
		margin-top: -46px;
		margin-left: -34px;
		background: url(../images/swipe/ic_swipe.svg) no-repeat center center;
		background-size: contain;
		z-index: 3;
		pointer-events: none;
		-webkit-animation: swipeExpansion linear 2s infinite;
		animation: swipeExpansion linear 2s infinite;
	}

	/* ③ 「左右にスワイプしてください」テキスト */
	.tableWrapper.is-swipe .swipeObjText {
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: 34px;
		width: 100%;
		z-index: 3;
		color: #fff;
		text-align: center;
		font-size: 1.4rem;
		line-height: 1.4;
		pointer-events: none;
	}
}

/* スワイプ促進アニメーション（左右に±10px揺れる） */
@-webkit-keyframes swipeExpansion {
	0%   { -webkit-transform: translateX(0);     transform: translateX(0); }
	25%  { -webkit-transform: translateX(10px);  transform: translateX(10px); }
	50%  { -webkit-transform: translateX(0);     transform: translateX(0); }
	75%  { -webkit-transform: translateX(-10px); transform: translateX(-10px); }
	100% { -webkit-transform: translateX(0);     transform: translateX(0); }
}
@keyframes swipeExpansion {
	0%   { transform: translateX(0); }
	25%  { transform: translateX(10px); }
	50%  { transform: translateX(0); }
	75%  { transform: translateX(-10px); }
	100% { transform: translateX(0); }
}