/* PC (1920×1080ディスプレイ) iPad Pro 横 12.9インチ (第4世代) */
@media screen and (min-width: 1025px) {
	/* 通常画面のボタンとスライダーのUI */
	.amhv-toolbar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		margin-bottom: 15px;
	}
	/* 全画面のボタンとスライダーのUI */
	.amhv-fs-ui {
    	display: flex;
    	justify-content: center;
		margin: 10px 0;
    	gap: 20px;
	}

	/* 通常画面の画像表示エリア */
	.amhv-strip {
		display: flex;
		flex-direction: row-reverse;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	/* 通常画面の画像 */
	.amhv-page {
		scroll-snap-align: start;
		width: 100vw;
		max-height: calc(100vh - 30px);
		object-fit: contain;
		flex-shrink: 0;
	}
	/* 全画面UIボタン類（前話・次話・スライダー・戻る）配置 */
	.amhv-fs-buttons {
    	display: none; /* 初期は非表示 */
    	position: fixed;
    	top: 4%;
    	left: 50%;
    	transform: translateX(-50%);
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
		width: 100vw;
    	gap: 10px;
    	z-index: 10001;
    	background: none;
	}
	/* 全画面モードの画像表示設定 */
	body.amhv-fullscreen .amhv-strip {
    	position: fixed;
    	top: 100px;
    	left: 0;
    	width: 100vw;
    	height: 100vh;
    	background: transparent;
    	z-index: 1000;
    	overflow-x: auto;
	}
	/* 全画面モードの画像表示設定 */
	body.amhv-fullscreen .amhv-page {
		max-height: calc(100vh - 130px);
		scroll-snap-align: start;
		width: 100vw;
		object-fit: contain;
		flex-shrink: 0;
	}
	/* ページ送りナビボタン */
	.amhv-nav, .amhv-fs-nav {
    	display: flex;
    	justify-content: center;
    	margin: 10px;
		gap: 10px;
		margin-bottom: 0px;
	}
	/* ページ番号表示 */
	#amhv-page-indicator {
    	position: fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	font-size: 36px;
    	font-weight: bold;
    	padding: 12px 24px;
    	font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
		background: linear-gradient(135deg, #ff9a9e 0%, #ea3599 100%);
		border-radius: 20px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    	color: #fff;
    	z-index: 9999;
    	display: none;
    	pointer-events: none;
    	transition: opacity 0.3s ease;
	}
	#amhv-page-indicator.active {
    	display: block;
    	opacity: 1;
	}
	/* パソコンのドラッグ処理 */
	.dragging {
		cursor: grabbing;
		user-select: none;
	}
}

/* iPhone 16 Pro 縦 (約430px) */
@media screen and (max-width: 480px) and (orientation: portrait) {
	/* 通常画面のボタンとスライダーのUI */
	.amhv-toolbar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		margin-bottom: 15px;
	}
	/* 全画面のボタンとスライダーのUI */
	.amhv-fs-buttons {
    	display: none; /* 初期は非表示 */
    	position: fixed;
    	top: 3.2%;
    	left: 50%;
    	transform: translateX(-50%);
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
		width: 100vw;
    	gap: 10px;
    	z-index: 10001;
    	background: none;
	}
	
	/* 通常画面の画像表示エリア */
	.amhv-strip {
		display: flex;
		flex-direction: row-reverse;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		outline: 7px solid rgba(255, 0, 0, 0.2) !important;
	}
	/* 通常画面の画像 */
	.amhv-page {
		scroll-snap-align: start;
		width: 100vw;
		max-height: calc(100vh - 130px);
		object-fit: contain;
		flex-shrink: 0;
	}
	/* 全画面モードの画像表示設定 */
	body.amhv-fullscreen .amhv-strip {
    	position: fixed;
    	top: 50px;
    	left: 0;
    	width: 100vw;
    	height: 100vh;
    	background: transparent;
    	z-index: 1000;
    	overflow-x: auto;
		outline: none !important;
	}
	/* 通常画面のページ送りナビボタン */
	.amhv-nav {
    	display: flex;
    	justify-content: center;
    	margin: 10px;
		gap: 20px;
		margin-top: 15px;
		margin-bottom: 0px;
	}
	/* ページ番号表示 */
	#amhv-page-indicator {
    	position: fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	font-size: 36px;
    	font-weight: bold;
    	padding: 12px 24px;
    	font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
		background: linear-gradient(135deg, #ff9a9e 0%, #ea3599 100%);
		border-radius: 20px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    	color: #fff;
    	z-index: 9999;
    	display: none;
    	pointer-events: none;
    	transition: opacity 0.3s ease;
	}
	#amhv-page-indicator.active {
    	display: block;
    	opacity: 1;
	}
}

/* iPhone 16 Pro 横 (約932px) */
@media screen and (max-width: 1024px) and (orientation: landscape) {
	/* 通常画面のボタンとスライダーのUI */
	.amhv-toolbar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		margin-bottom: 15px;
	}
	/* 全画面のボタンとスライダーのUI */
	.amhv-fs-buttons {
    	display: none; /* 初期は非表示 */
    	position: fixed;
    	top: 1%;
    	left: 50%;
    	transform: translateX(-50%);
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
		width: 100%;
    	gap: 10px;
    	z-index: 10001;
    	background: none;
	}
	
	/* 通常画面の画像表示エリア */
	.amhv-strip {
		display: flex;
		flex-direction: row-reverse;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		width: 100%;
	}
	/* 通常画面の画像 */
	.amhv-page {
		scroll-snap-align: start;
		max-height: calc(100vh - 110px);
		width: 100vw;
		object-fit: contain;
		flex-shrink: 0;
	}

	/* 全画面モードの表示エリア設定 */
	body.amhv-fullscreen .amhv-strip {
    	position: fixed;
    	top: 45px;
		left: 0;
    	width: 100%;
    	background: transparent;
    	z-index: 1000;
    	overflow-x: auto;
	}
	/* 全画面モードの画像表示設定 */
	body.amhv-fullscreen .amhv-page {
		scroll-snap-align: start;
		width: 100vw;
		object-fit: contain;
		flex-shrink: 0;
	}

	/* ページ送りナビボタン */
	.amhv-nav, .amhv-fs-nav {
    	display: flex;
    	justify-content: center;
    	margin: 10px;
		gap: 20px;
		margin-top: 15px;
		margin-bottom: 0px;
	}
	/* ページ番号表示 */
	#amhv-page-indicator {
    	position: fixed;
    	top: 70%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	font-size: 24px;
    	font-weight: bold;
    	padding: 12px 24px;
    	font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
		background: linear-gradient(135deg, #ff9a9e 0%, #ea3599 100%);
		border-radius: 20px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    	color: #fff;
    	z-index: 9999;
    	display: none;
    	pointer-events: none;
    	transition: opacity 0.3s ease;
	}
	#amhv-page-indicator.active {
    	display: block;
    	opacity: 1;
	}
}

/************************************
  共通
************************************/

/* 通常画面内のボタン */
.amhv-nav a,
.amhv-toolbar button {
    background: #1E90FF;
    color: #fff !important;
    padding: 10px 18px;
    border: none;
    border-radius: 22px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
/* 全画面内のボタン */
.amhv-fs-buttons a {
    background: #1E90FF;
    color: #fff !important;
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
/* 全画面内の戻るボタン */
#amhv-exit-btn {
    background: #1E90FF;
    color: #fff !important;
    padding: 10px 8px;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
/* 初期は非表示 */
#amhv-exit-btn {
    display: none;
}

/* 全画面のオーバーレイ */
.amhv-fullscreen-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
	height: 100vh;
    background: black;
    z-index: 9998;
    display: none;
}
.amhv-fullscreen-overlay.active {
    display: flex;
}

/* 黒背景はstripの背面に固定表示 */
.amhv-fullscreen-overlay {
    background: black;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    display: none;
}

/* 全画面時のみ、画像の下にフッターかぶり回避用スペース */
body.amhv-fullscreen::after {
    content: "";
    display: block;
    height: 100vh;
}

/* 全画面表示中は footer を非表示にする */
body.amhv-fullscreen footer {
    display: none !important;
}

/* 有効時に pointer 操作可能にする */
.amhv-fs-buttons a,
.amhv-fs-buttons button,
.amhv-fs-buttons input[type=range] {
    pointer-events: auto;
}

/* 通常画面のスライダー */
.amhv-toolbar input[type=range] {
    width: 50%;
	height: 4px;
    accent-color: #0073aa;
    background-color: #ccc;
    border-radius: 4px;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}
/* 全画面のスライダー */
.amhv-fs-buttons input[type=range] {
    width: 40%;
	height: 4px;
    accent-color: #0073aa;
    background-color: #ccc;
    border-radius: 4px;
}
/* スライダーのバー */
.amhv-toolbar input[type=range]::-webkit-slider-runnable-track,
.amhv-fs-buttons input[type=range]::-webkit-slider-runnable-track {
	height: 10px;
	background: #F9C1CF;
	border-radius: 4px;
}
/* スライダーのつまみ */
.amhv-toolbar input[type=range]::-webkit-slider-thumb,
.amhv-fs-buttons input[type=range]::-webkit-slider-thumb {
	appearance: none;
	width: 1.5em;
	height: 2.5em;
	border-radius: 20px;
	background: #F067A6;
	border: none;
	margin-top: -0.8em;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	cursor: pointer;
}