/* *******************
****** Archive *********
********************** */
@font-face {
	font-family: 'チェックポイントフォント';
	src: url('font/CP Font.woff') format('woff');
}

@font-face {
	font-family: 'ぼくたちのゴシック２ボールド';
	src: url('font/Boku2-Bold.woff') format('woff');
}

.dela-gothic-one-regular {
	font-family: "Dela Gothic One", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.m-plus-rounded-1c-medium {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 500;
	font-style: normal;
}
a,a:hover,a:visited {
	color: inherit;
	text-decoration: none!important;
}


*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html, body, header {
	height: 100%;
}

#archive-topmenu{
	width: 100%;
	height: 9rem;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	font-size: 3rem;
	font-family: 'チェックポイントフォント';
}

#archive-topmenu span {
	display: inline-block;
	margin: 0 2rem;
	cursor: pointer;
}

.nothere {
	color: #bbbeb9;
}
.nothere:hover {
	color: #ff701e;
}

#archive-mainbg {
	display: flex;
}

#archive-main {
	width: 80vw;
	margin-left: 15vw;
	margin-top: 5rem;
	height: 85vh;
	overflow-y: auto;
}

#archive-sidemenu {
	position: relative;
	width: 20vw;
	height: 85vh;
	display: flex;
	flex-direction: column;
	padding-top: 5rem;
	padding-left: 3rem;
	font-family: "Dela Gothic One";
	font-size: 2vw;
}

#archive-sidemenu::after {
	flex-grow: 1;
	position: absolute;
	top: 5%;
	right: 95%;
	content: "";
	width: 10px;
	height: 90%;
	margin: auto 0;
	background-color: #000;
}

#archive-sidemenu .selectable {
	cursor: pointer;
}

#archive-childmenu {
	display: flex;
	flex-direction: column;
	padding-left: 2rem;
	font-size: 1vw;
}

.selectable {
	position: relative;
	z-index: 1;
	padding: 0 10px;
}

.selectable::before {
	background: #ffde59;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease-in-out;
	z-index: -1;
}

.selectable:hover {
	color: #fff;
	cursor: pointer;
}
.selectable:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}

/*----------------------*/
/*---- 中身の部分 ----- --*/
/*----------------------*/
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.archive-page {
	display: none; /* 普段は非表示 */
}

.archive-page.active {
	display: block; /* activeクラスが付いたら表示 */
	animation: fadeIn 0.5s ease; /* フェードインアニメーションを適用 */
}

/* 各ページのコンテンツのスタイル */
.archive-page h3 {
	font-family: 'Dela Gothic One', sans-serif;
	font-size: 2rem;
	margin-bottom: 1rem;
}

.archive-page hr {
	margin: 2rem 0;
}


.annai {
	text-align: right;
	margin-right: 2rem;
	font-family: "M PLUS Rounded 1c";
	font-size: 1.5rem;
}
.yajirusi {
	color: #f1c1c3;
	font-size: 1.8rem;
}

.art-gallery, .web-gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	text_decoration: none;
	margin-bottom: 30px;
}

.art-gallery span{
	display: inline-block;
}

.art-gallery img {
	width: 15vw;
	min-width: 8rem;
	height: auto;
	margin: 0.3vw;
}

.art-gallery-block {
	width: 15vw;
	min-width: 8rem;
}

.web-item {
	width: calc(50% - 10px);
}
.web-item img {
	width: 100%;
	border: 1px solid #ddd;
}
.web-item p {
	text-align: center;
	margin-top: 0.5rem;
}

/* 選択中のメニューのスタイル */
#archive-sidemenu .is-active {
	color: #ff701e;
}

#movie-content {
	margin: 0 4vw;
	margin-bottom: 10vh;
}

#movie-content-smallbox {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.movie-box {
	width: calc(50% - 1rem); /* 2列表示。gapの半分を引く */
}

.movie-video-wrapper {
	position: relative;
	padding-top: 56.25%; /* 16:9のアスペクト比 */
	height: 0;
	overflow: hidden;
}

.movie-box iframe {
	position: absolute; /* 親要素を基準に配置 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0; /* 境界線を消す */
}

.movie-description {
	padding: 10px; /* 文字の周りに少し余白を持たせる */
	font-size: 0.9rem; /* 文字サイズを少し調整 */
	color: #333; /* 文字色 */
}

.movie-super-title {
	font-size: 0.9rem;          /* 文字サイズ */
	font-weight: bold;          /* 少し太字に */
	color: #444;                /* 文字色 */
	margin-bottom: 0.75rem;     /* 下の動画との間に少し余白をとる */
	padding: 0 10px;            /* 左右の余白を他の文字と合わせる */
}


/*----- Web ---------*/
/* モーダル */
#web-modal-overlay {
	position: fixed; /* 画面全体に固定 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none; /* 普段は非表示 */
	justify-content: center;
	align-items: center;
	z-index: 1000; /* 他の要素より手前に表示 */
	cursor: pointer; /* 背景クリックで閉じられるように見せる */
}

#web-modal-overlay.active {
	display: flex; /* activeクラスがついたら表示 */
}

#web-modal-window {
	position: relative;
	background-color: #eaeae9;
	width: 90%;
	max-width: 800px; /* モーダルの最大幅 */
	max-height: 90vh; /* モーダルの最大高 */
	padding: 40px;
	overflow-y: auto; /* コンテンツがはみ出たらスクロール */
	cursor: default; /* ウィンドウ内は通常のカーソル */
	border-radius: 5px;
}

#web-modal-close {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 2.5rem;
	color: #333;
	background: none;
	border: none;
	cursor: pointer;
}
#web-modal-close:hover {
	color: #ff701e;
}

#web-modal-content img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

#web-modal-content h3 {
	font-family: 'Dela Gothic One', sans-serif;
	font-size: 1.8rem;
	margin-bottom: 1rem;
}

#web-modal-content p {
	font-family: "M PLUS Rounded 1c";
	font-size: 1.1rem;
	line-height: 1.8;
}
/* モーダルここまで */

.popupIcon {
	display: inline-block;
	width: 20px!important;
	margin-left: 10px;
	padding-top: 3px;
	vertical-align: middle;
	border: none!important;
}


/* *****************
****** レスポンシブ ******
* **************** */

@media(max-width: 1200px) {
	#archive-topmenu {
		height: 5rem;
		font-size: 2.5rem;
	}
	#archive-topmenu span {
		margin: 0 0.5rem;
}

	#archive-mainbg {
		display: flex;
		flex-direction: column-reverse;
	}

	#archive-sidemenu::after {
		display: none;
	}

	#archive-sidemenu {
		position: relative;
		width: 100vw;
		height: 10dvh;
		display: flex;
		flex-direction: row;
		padding-top: 4rem;
		padding-left: 2rem;
		font-family: "Dela Gothic One";
		font-size: 2rem;
	}


	#archive-main {
		width: 90vw;
		margin-left: 5vw;
		margin-top: 2rem;
		height: 85vh;
		overflow-y: auto;
	}

}

@media(max-width: 800px) {

	#archive-topmenu {
		height: 3.5rem;
		font-size: 1rem;
	}
	#archive-topmenu span {
		margin: 0 0.5rem;
}

	#archive-sidemenu {
		position: relative;
		width: 100vw;
		height: 5dvh;
		display: flex;
		flex-direction: row;
		padding-top: 4rem;
		padding-left: 2rem;
		font-family: "Dela Gothic One";
		font-size: 2rem;
	}


	#archive-sidemenu {
		padding-top: 2rem;
		padding-left: 1.5rem;
		font-size: 1.3rem;
	}

	.annai {
		text-align: right;
		margin-right: 0.5rem;
		font-family: "M PLUS Rounded 1c";
		font-size: 1rem;
	}
	.yajirusi {
		color: #f1c1c3;
		font-size: 1rem;
	}

	.art-gallery img {
		width: 15vw;
		min-width: 8rem;
		margin: 0.1rem;
	}

	.art-gallery-block {
		width: 15vw;
		min-width: 8rem;
	}

	.movie-box {
		width: 100%; /* 横幅いっぱいにする */
		/*padding-top: 56.25%; /* アスペクト比16:9 (9 / 16) */
	}

	.selectable.is-active::before {
		background: #ffde59;
		transform: scale(1, 1);
	}
}