html {
	overflow-x: hidden; /* 横スクロールを無効化 */
	width: 100%;
	overscroll-behavior: none; /* safariでスクロールを無効化 */
	position: fixed;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden; /* スクロールを無効化 */
	overscroll-behavior: none; /* safariでスクロールを無効化 */
	position: fixed;
}
/* 初期設定: dvhを使って高さを確保 */
.container {
	 /* アドレスバーの変化に対応 */
	/* height: 100dvh; */
	display: flex;
	justify-content: center;
	align-items: center;
	/* background-color: lightblue; */
	background-image: url('../pics/facility/library.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: height 0.3s ease; /* 高さ変化をスムーズに */
	opacity: 0;
	transition: opacity 0.5s ease;
}

.container.loaded {
	opacity: 1;
}

:root {
	--book-width: 38vw;
	--book-aspect-ratio: calc(1 / 2);
	--book-height: calc(var(--book-width) * var(--book-aspect-ratio));

	--max-book-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	--mobile-book-width: min(40vw, calc((100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.8 / var(--book-aspect-ratio)));
	--mobile-book-height: calc(var(--mobile-book-width) * var(--book-aspect-ratio));
}

.bookshelf {
	position: absolute;
	width: 90%;
	height: 100%;
	filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.4));
	top: 0;
}

.book-wrapper {
	position: relative;
	width: var(--book-width);
	height: min(var(--book-height), var(--max-book-height));
	filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.4));
	transition: all 1s ease;
	clip-path: polygon(
		50% 0,
		100% 0%,
		100% 100%,
		50% 100%
	);
	z-index: 100;
}

.book-wrapper:has(#book1) {
	position: absolute;
	left: calc(50% - var(--book-width) * 3 / 4 - var(--book-width)/2 - (var(--book-width)/2)/4); /* 真ん中　- 閉じた時の本の幅　 - 本と本の間の距離　*/
	top: calc(50% - (var(--book-width) * var(--book-aspect-ratio) / 2));
}

.book-wrapper:has(#book2) {
	position: absolute;
	left: calc(50% - var(--book-width) * 3 / 4 ); /*真ん中　*/
	top: calc(50% - (var(--book-width) * var(--book-aspect-ratio) / 2));
}

.book-wrapper:has(#book3) {
	position: absolute;
	left: calc(50% - var(--book-width) * 3 / 4 + var(--book-width)/2 + (var(--book-width)/2)/4); /* 真ん中 + 閉じた時の本の幅　 + 本と本の間の距離　*/
	top: calc(50% - (var(--book-width) * var(--book-aspect-ratio) / 2));
}



/* 非表示アニメーション用のクラス */
.book-wrapper.hiding {
	transform: scale(0.5);
	opacity: 0;
	pointer-events: none;
	transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1), 
				opacity 2s cubic-bezier(0.4, 0, 0.2, 1); /* イージング関数を追加し、時間を2秒に */
}

/* 表示アニメーション用のクラス */
.book-wrapper.showing {
	transform: scale(1);
	opacity: 1;
	transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1), 
				opacity 2s cubic-bezier(0.4, 0, 0.2, 1); /* イージング関数を追加し、時間を2秒に */
}

/* ホバーエリアを作成 */
.book-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
	cursor: pointer;
	transition: z-index 0s;
}

.book-wrapper.expanded::before {
	z-index: 0;
}

.book-wrapper.expanded {
	width: calc(var(--book-width) * 2);
	height: calc(var(--book-height) * 2);
	top: calc(50% - var(--book-height) * 2 / 2)!important;
	left: calc(50% - (3 * var(--book-width)) / 2) !important;
	filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0));
	clip-path: none;
	z-index: 999;
	transition: all 0.5s ease;
}


.book-wrapper.move_center {
	left: calc(50% - (3 * var(--book-width)) / 2 + var(--book-width) / 2) !important;
	filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.4));
	transition: all 0.5s ease;
}

/* ホバーエリアにマウスが乗った時の本全体の挙動 */
.book-wrapper:not(.expanded):hover {
	transform: scale(1.05);
	filter: drop-shadow(8px 8px 25px rgba(0, 0, 0, 0.5));
	z-index: 5;
	cursor: pointer;
}

.hover-reset {
	transform: scale(1.0);
	filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.4));
	z-index: 1;
}

#book1, #book2, #book3 {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	transition: width 0.3s ease, height 0.3s ease;
	z-index: 3;
	clip-path: none;
	transition: left 1s ease;
}

.page.fixed {
	opacity: 0;
}

.page img {
	pointer-events: none;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.page.left .gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
	z-index: 10;
}

.page.right .gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
	z-index: 10;
}

.page .gradient {
	pointer-events: none;
}

.link_wark_view {
	position: absolute;
	top: 0;
	left: 35%;
	width: 65%;
	height: 100%;
	/* background-color: rgba(187, 230, 251, 0.585); */
}


/* 写真に被せる透明のページリンクボタン*/
.index {
	position: absolute;
	/* background-color: rgba(187, 230, 251, 0.585); */
	width: 25%;
	height: 16.5%;
	z-index: 10000;
}

/* indexのグリッドレイアウトの位置設定 P.2*/
.index.LIVING_12{ left: 40%; top: 22.5%; }
.index.LIVING_14 { left: 40%; top: 41%; }
.index.LIVING_10 { left: 40%; top: 60%; }
.index.LIVING_4 { left: 40%; top: 79%; }

.index.LIVING_18 { left: 69.5%; top: 22.5%; }
.index.LIVING_22 { left: 69.5%; top: 41%; }
.index.LIVING_8 { left: 69.5%; top: 59.5%; }
.index.LIVING_6 { left: 69.5%; top: 79%; }


/* グリッドレイアウトの位置設定 P.3*/
.index.LIVING_16 { right: 69.5%; top: 22.5%; }
.index.LIVING_28 { right: 69.5%; top: 41%; }
.index.LIVING_32 { right: 69.5%; top: 59.5%; }

.index.LIVING_26 { right: 40%; top: 22.5%; }
.index.LIVING_30 { right: 40%; top: 41%; }
.index.LIVING_20 { right: 40%; top: 59.5%; }
.index.LIVING_24 { right: 40%; top: 79%; }

/* indexのグリッドレイアウトの位置設定 P.2*/
.index.KITCHEN_28 { left: 40%; top: 22.5%; }
.index.KITCHEN_32 { left: 40%; top: 41%; }
.index.KITCHEN_20 { left: 40%; top: 60%; }
.index.KITCHEN_16 { left: 40%; top: 78%; }

.index.KITCHEN_6 { left: 69.5%; top: 22.5%; }
.index.KITCHEN_12 { left: 69.5%; top: 41%; }
.index.KITCHEN_22 { left: 69.5%; top: 59.5%; }
.index.KITCHEN_14 { left: 69.5%; top: 78%; }

/* グリッドレイアウトの位置設定 P.3*/
.index.KITCHEN_10 { right: 69.5%; top: 22.5%; }
.index.KITCHEN_18 { right: 69.5%; top: 41%; }
.index.KITCHEN_4 { right: 69.5%; top: 59.5%; }

.index.KITCHEN_8 { right: 40%; top: 22.5%; }
.index.KITCHEN_24 { right: 40%; top: 41%; }
.index.KITCHEN_30 { right: 40%; top: 59.5%; }
.index.KITCHEN_26 { right: 40%; top: 78%; }


/* indexのグリッドレイアウトの位置設定 P.2*/
.index.FUKINUKE_22 { left: 40%; top: 22.5%; }
.index.FUKINUKE_14 { left: 40%; top: 41%; }
.index.FUKINUKE_16{ left: 40%; top: 60%; }
.index.FUKINUKE_20 { left: 40%; top: 80%; }

.index.FUKINUKE_4 { left: 69.5%; top: 22.5%; }
.index.FUKINUKE_10 { left: 69.5%; top: 41%; }
.index.FUKINUKE_24 { left: 69.5%; top: 60%; }

/* グリッドレイアウトの位置設定 P.3*/
.index.FUKINUKE_6 { right: 69.5%; top: 22.5%; }
.index.FUKINUKE_12 { right: 69.5%; top: 41%; }

.index.FUKINUKE_8 { right: 40%; top: 22.5%; }
.index.FUKINUKE_26 { right: 40%; top: 41%; }

.index.FUKINUKE_18 { width: 55%; height: 35%; right: 40%; top: 60%; }

.isTarget {
	background-color: rgba(187, 230, 251, 0.585);
}

.return_index.left {width: 26%; height: 8%; left: 5%; top: 69%;}
.return_index.right {width: 26%; height: 8%; left: 68%; top: 69%;}


/* 左ページ用のリンクエリア */
.page.left .link_wark_view {
	position: absolute;
	top: 0;
	left: 35%;
	width: 65%;
	height: 100%;
	/* background-color: rgba(187, 230, 251, 0.585); */
}

/* 右ページ用のリンクエリア */
.page.right .link_wark_view {
	position: absolute;
	top: 0;
	left: 0;
	width: 65%;
	height: 100%;
	/* background-color: rgba(187, 230, 251, 0.585); */
}

.nav-box {
	/* width: calc(var(--book-width)); */
	height: calc(var(--book-height) * 0.15);
	position: absolute;
	top: calc(-0.15 * var(--book-height) - 1vh);
	left: 50%;
	transform: translateX(-50%);
	z-index: 9998;
	cursor: pointer;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}

.nav-box.visible {
	opacity: 1;
	visibility: visible;
	z-index: 0;
}

.nav-box img {
	/* position: absolute; */
	height: 100%;

	/* top: 5%;
	right: 8%;
	background-color: rgba(0, 0, 0, 0.414);
	color: white;
	cursor: pointer;
	z-index: 9999; */
}


/* 閉じるボタンのスタイル */
.close-button {
	position: absolute;
	top: 5%;
	right: 10%;
    width: calc(var(--book-width)* 0.31);
    height: calc(var(--book-height)* 0.14);
	/* background-color: rgba(255, 0, 0, 0.38); */
	z-index: 9999;
}

.close-button:hover {
	cursor: pointer;
}

.to-index {
	position: absolute;
	width: calc(var(--book-width) * 0.31);
	height: calc(var(--book-height) * 0.14);
	/* background-color: rgba(255, 0, 0, 0.38); */
	top: 5%;
	left: 10%;
	z-index: 9999;
}

.to-index:hover {
	cursor: pointer;
}

/* プログレスバーのスタイル */
#cover-loading-progress {
    position: fixed;
    top: 0;
    left: 50%;
	transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
	max-width: 80vw;
}

#cover-loading-progress .progress-container {
    width: 100%;
    max-width: 300px;
    text-align: center;
}
#cover-loading-progress .progress-bar-box {
	margin-bottom: 5px;
}

#cover-loading-progress .progress-text {
	left: calc(50% - 10px);
}



.progress-bar-box {
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    /* background-color: #0ba0dd; */
    background-color: #184502;
    transition: width 0.3s ease;
}

.progress-text {
    color: #184502;
    font-size: 16px;
	font-weight: bold;
    position: absolute;
	width: 80px;
    height: 20px;
	line-height: 20px;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
	Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.book-loading-progress .progress-text::before {
    border-width: 2px;
}

.book-loading-progress {
	background-color: #c2c2c2be;
	width: calc(var(--book-width));
	height: calc(var(--book-width));
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 50%;
	opacity: 0;
	visibility: hidden;
	justify-content: center;
    display: flex;
    align-items: center;
	z-index: 1000;
}

.book-loading-progress .progress-container {
	width: 50%;
	position: absolute;
    bottom: 0;
}

.book-loading-progress .progress-bar-box {
	width: calc(100% - 30px);
	height: 10px;
	border-radius: 10px;
}

.book-loading-progress.visible {
	opacity: 1;
	visibility: visible;
}
.progress-loading {
	color: #184502;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
	Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.progress-circle-box {
	width:100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.progress-circle {
	transform: rotate(-90deg); /* 上から開始する */
}

circle {
fill: none;
stroke-width: 8;
stroke-linecap: round;
}

circle.bg {
stroke: #eee; /* 背景線 */
}

circle.fg {
stroke: #184502; /* プログレス色 */
stroke-dasharray: 219.911; /* 2πr（r=35） */
stroke-dashoffset: 219.911; /* 初期状態（0%） */
transition: stroke-dashoffset 0.5s ease;
}

.checkmark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
  }
  
  .checkmark-path {
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: draw-check 0.4s ease forwards;
  }
  
  @keyframes draw-check {
	to {
	  stroke-dashoffset: 0;
	}
  }


@media screen and (max-width: 480px) {
	.nav-box {
		height: calc(var(--book-height) * 0.35);
		top: calc(-0.35 * var(--book-height) - 1vh);
	}

	.close-button {
		width: calc(var(--book-width) * 0.75);
		height: calc(var(--book-height) * 0.25);
	}

	.to-index {
		width: calc(var(--book-width) * 0.75);
		height: calc(var(--book-height) * 0.25);
	}
	.book-loading-progress .progress-container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
}


@media screen and (max-width: 1024px) and (orientation: landscape) {
	.book-wrapper.expanded {
		width: calc(var(--book-width) * 1.5);
		height: calc(var(--book-height) * 1.5);
		top: calc(50% - var(--book-height) * 1.5 / 2)!important;
		left: calc(50% - (2.25 * var(--book-width)) / 2) !important;
	}

	.book-wrapper.move_center {
		left: 50% !important;
		transform: translateX(-50%);
	}

	.book-loading-progress {
		background-color: #c2c2c2be;
		width: calc(var(--book-width) * 0.75);
		height: calc(var(--book-width) * 0.75);
	}
}