@charset "UTF-8";

/*--------------------------------------------------
  デジタルアーカイブサービス 個別ページ共通
  （和古書 / 洋古書 / 大型資料 / ガラス乾板 / 立体物 / フィルム）
  共通CSS（cmn_style.css / sp_style.css）の後に読み込む
--------------------------------------------------*/
.as {
	--blue: #009fe6;
	--pale: #f0f7ff;
	--black: #333;
	padding: 100px 20px;
	color: var(--black);
	line-height: 1.6;
	overflow: hidden;
}
.as *,
.as *::before,
.as *::after {
	font-family: inherit;
	color: inherit;
	box-sizing: border-box;
}
/* 共通CSSの section / 見出し / リストの既定値をリセット */
.as section {
	padding: 0;
	margin: 0;
}
.as h1,
.as h2,
.as p,
.as ul,
.as li,
.as figure {
	margin: 0;
	padding: 0;
	font-weight: normal;
	text-align: left;
	list-style: none;
}
.as img {
	display: block;
	max-width: 100%;
	height: auto;
}
.as_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 100px;
	max-width: 1060px;
	margin: 0 auto;
}

/*--------------------------------------------------
  ページ見出し
--------------------------------------------------*/
.as_head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 27px;
	width: 100%;
	max-width: 960px;
}
.as_head::before,
.as_head::after {
	content: "";
	flex: 0 0 100px;
	height: 1px;
	background: url(../../service/archive/images/deco_line.svg) no-repeat center / 100% 1px;
}
.as_head_text {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.2;
}
.as .as_head_en {
	color: var(--blue);
	font-size: 12px;
	letter-spacing: .05em;
	text-align: center;
}
.as h1 {
	margin: 0;
	font-size: 32px;
	line-height: 1.2;
	text-align: center;
}
.as h1 span {
	display: block;
	text-align: center;
	/* 語の途中で改行せず、<wbr> の位置で折り返す */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/*--------------------------------------------------
  動画
--------------------------------------------------*/
.as_movie {
	position: relative;
	width: 100%;
	aspect-ratio: 1060 / 600;
	background-color: #ccc;
	overflow: hidden;
}
.as_movie video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--------------------------------------------------
  メインビジュアル（静止画）
--------------------------------------------------*/
.as_visual {
	width: 100%;
	aspect-ratio: 1060 / 600;
	background-color: #ccc;
	overflow: hidden;
}
.as .as_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--------------------------------------------------
  スライドショー（Swiper）
--------------------------------------------------*/
.as_slider.swiper {
	width: 100%;
	aspect-ratio: 1060 / 600;
	background-color: #ccc;
}
.as_slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.as_slider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background-color: #fff;
	opacity: .7;
}
.as_slider .swiper-button-prev,
.as_slider .swiper-button-next {
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: none;
	background: none;
	color: var(--blue);
	cursor: pointer;
	transition: opacity .3s;
}
.as_slider .swiper-button-prev {
	left: 20px;
}
.as_slider .swiper-button-next {
	right: 20px;
}
.as_slider .swiper-button-prev::after,
.as_slider .swiper-button-next::after {
	/* .as *::after の font-family: inherit で矢印アイコンが文字になるため指定し直す */
	font-family: swiper-icons;
	font-size: 32px;
	font-weight: bold;
}
.as_slider .swiper-button-prev:hover,
.as_slider .swiper-button-next:hover {
	opacity: .7;
}
@media screen and (max-width: 767px) {
	.as_slider .swiper-button-prev,
	.as_slider .swiper-button-next {
		width: 32px;
		height: 32px;
		margin-top: -16px;
	}
	.as_slider .swiper-button-prev {
		left: 10px;
	}
	.as_slider .swiper-button-next {
		right: 10px;
	}
	.as_slider .swiper-button-prev::after,
	.as_slider .swiper-button-next::after {
		font-size: 22px;
	}
}
.as_slider .swiper-pagination-bullet-active {
	background-color: var(--blue);
	opacity: 1;
}

/*--------------------------------------------------
  特長（画像＋テキストの交互配置）
--------------------------------------------------*/
.as_features {
	display: flex;
	flex-direction: column;
	gap: 72px;
	width: 100%;
}
.as_feature {
	display: grid;
	grid-template-columns: minmax(0, 550px) minmax(0, 450px);
	align-items: center;
	justify-content: center;
	gap: 50px;
}
.as_feature.is-reverse {
	grid-template-columns: minmax(0, 450px) minmax(0, 550px);
}
.as_feature.is-reverse .as_feature_media {
	order: 2;
}
/* 画像は550px四方の枠の内側(50px)に450px四方で配置し、四隅に十字の装飾 */
.as_feature_media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}
.as_feature_media::before,
.as_feature_media::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 18.1818%;
	height: 18.1818%;
	background: url(../../service/archive/images/deco_corner_bl.svg) no-repeat center / 100% 100%;
}
.as_feature_media::before {
	left: 0;
	bottom: 0;
}
.as_feature_media::after {
	top: 0;
	right: 0;
	transform: rotate(180deg);
}
.as_feature_img {
	position: absolute;
	inset: 9.0909%;
	overflow: hidden;
	background-color: #ccc;
}
.as_feature_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* デザインのトリミング位置に合わせる */
.as_feature_img.is-large img {
	object-position: 18% center;
}
.as_feature_img.is-protect img {
	object-position: 67% center;
}
.as_feature_img.is-film-scan img {
	object-position: 84% center;
}
.as_feature_img.is-contain {
	background-color: transparent;
}
.as_feature_img.is-contain img {
	object-fit: contain;
}
/* 枠の横幅に合わせ、上下中央に配置（立体物） */
.as_feature_img.is-fit {
	display: flex;
	align-items: center;
	background-color: transparent;
}
.as_feature_img.is-fit img {
	height: auto;
}
/* 画像2枚を対角に重ねる配置（ガラス乾板 保存包材） */
.as_feature_img.is-pair {
	background-color: #fff;
}
.as_feature_img.is-pair img {
	position: absolute;
	width: 75.1111%;
	height: 50%;
}
.as_feature_img.is-pair img:first-child {
	top: 0;
	left: 0;
}
.as_feature_img.is-pair img:last-child {
	right: 0;
	bottom: 0;
}
/* スクロールで画面内に入ったら中心から広がるように表示（JSで .is-anim / .is-inview を付与） */
.as_feature_img.is-anim {
	clip-path: inset(50%);
	transition: clip-path 1.2s cubic-bezier(.77, 0, .175, 1);
}
.as_feature_img.is-anim img {
	transform: scale(1.3);
	transition: transform 1.6s cubic-bezier(.22, 1, .36, 1);
}
.as_feature_img.is-anim.is-inview {
	clip-path: inset(0);
}
.as_feature_img.is-anim.is-inview img {
	transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
	.as_feature_img.is-anim,
	.as_feature_img.is-anim img {
		clip-path: none;
		transform: none;
		transition: none;
	}
}
.as_feature_body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: 50px;
}
.as .as_feature_body h2 {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: bold;
    color: var(--blue);
}
.as .as_feature_body p {
	font-size: 16px;
	line-height: 30px;
}
.as .as_btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 10px 20px;
	border-radius: 50px;
	background-color: var(--blue);
	font-size: 16px;
	line-height: 1.2;
	transition: opacity .3s;
	margin: 0 auto;
}
/* PC・タブレットではデザイン通り1行で表示 */
@media screen and (min-width: 768px) {
	.as .as_btn {
		white-space: nowrap;
	}
}
.as .as_btn:link,
.as .as_btn:visited,
.as .as_btn:hover {
	color: #fff;
}
.as .as_btn:hover {
	opacity: .85;
}
.as .as_btn::after {
	content: "";
	flex: none;
	width: 25px;
	height: 25px;
	background: url(../../service/archive/images/icon_arrow_circle.svg) no-repeat center / contain;
}

/*--------------------------------------------------
  撮影対象 / 劣化資料の例
--------------------------------------------------*/
.as_block {
	display: flex;
	flex-direction: column;
	gap: 41px;
	width: 100%;
	padding-top: 100px;
}
.as .as_block h2 {
	margin: 0;
	padding-left: 30px;
	border-left: 12px solid var(--blue);
	/*font-size: 32px;*/
	line-height: 39px;
}
.as_target {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 50px;
	background-color: var(--pale);
	flex-direction: column;
}
/* 5件ごとに列を折り返す（デザイン通り縦方向に並ぶ） */
.as_target ul {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(5, auto);
	/*grid-auto-columns: var(--col, 225px);*/
	gap: 20px;
}
/* 項目名が長い場合は、列幅を文字数に合わせて折り返さない（フィルム） */
.as_target.is-auto ul {
	--col: auto;
}
.as_target li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 24px;
	line-height: 29px;
}
.as_target li::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: url(../../service/archive/images/icon_dot.svg) no-repeat center / contain;
}
.as .as_target_etc {
	font-size: 24px;
	line-height: 29px;
	display: inline-block;
    margin-left: auto;
    margin-right: 0;
}
.as_samples {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.as_samples figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background-color: #fff;
}
.as_samples img {
	width: 100%;
	aspect-ratio: 300 / 230;
	object-fit: cover;
	background-color: #ccc;
}
.as_samples figcaption {
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
}

/* スキャン対象の種類（画像＋見出し＋説明。フィルム） */
.as_types {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.as_type {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	background-color: #fff;
}
.as .as_type img {
	flex: none;
	width: 300px;
	aspect-ratio: 300 / 230;
	object-fit: cover;
	background-color: #ccc;
}
.as_type_body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}
.as .as_type h3 {
	margin: 0;
	padding: 10px 20px;
	background-color: var(--pale);
	color: var(--blue);
	font-size: 24px;
	font-weight: bold;
	line-height: 1.2;
}
.as .as_type p {
	padding: 0 20px;
	font-size: 16px;
	line-height: 30px;
}

/* 事例（WEB制作） */
.as_works {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.as .as_works a {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
	padding: 20px;
	background-color: #fff;
	color: var(--black);
	text-decoration: none;
}
.as .as_works img {
	width: 100%;
	aspect-ratio: 300 / 230;
	object-fit: cover;
	background-color: #ccc;
	transition: opacity .3s;
}
.as .as_works span {
	font-size: 16px;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.as .as_works a:hover img {
	opacity: .8;
}
.as .as_works a:hover span {
	color: var(--blue);
}

/* 他のサービス（サービスページ下部）。カードの見た目はトップページのサービス一覧に合わせる */
.as_others_list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.as .as_others_list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}
.as_others_img {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #ccc;
	overflow: hidden;
}
.as .as_others_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
/* トップページと同じトリミング位置 */
.as .as_others_list .is-wakosho img {
	object-position: 37% center;
}
.as .as_others_list .is-yokosho img {
	object-position: 61% center;
}
.as .as_others_list .is-movie img {
	object-position: 34% center;
}
.as .as_others_list .is-db img {
	object-position: left center;
}
.as .as_others_list .is-web img {
	object-position: 90% center;
}
.as .as_others_label {
	position: relative;
	width: 90%;
	margin-top: -20px;
	padding: 8px;
	background-color: var(--blue);
	color: #fff;
	font-size: 18px;
	line-height: 22px;
	text-align: center;
}
.as .as_others_list a:hover img {
	transform: scale(1.05);
}

/*--------------------------------------------------
  Tablet
--------------------------------------------------*/
@media screen and (max-width: 1023px) {
	.as {
		padding: 60px 20px;
	}
	.as_feature,
	.as_feature.is-reverse {
		grid-template-columns: minmax(0, 550px);
		gap: 30px;
	}
	.as_feature.is-reverse .as_feature_media {
		order: 0;
	}
	.as_feature_body {
		padding: 10px 9.0909% 0;
	}
	.as_features {
		gap: 30px;
	}
	.as_target ul {
		grid-auto-columns: auto;
	}
	.as_others_list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.as_works {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*--------------------------------------------------
  Smartphone
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	.as {
		padding: 40px 20px 60px;
	}
	.as_inner {
		gap: 50px;
	}
	.as_head {
		gap: 12px;
	}
	.as_head::before,
	.as_head::after {
		flex-basis: 20px;
	}
	.as h1 {
		font-size: 18px;
		line-height: 1.4;
	}
	.as_feature_body {
		gap: 16px;
		padding: 0 4px;
	}
	.as .as_feature_body h2 {
		font-size: 20px;
	}
	.as .as_feature_body p {
		font-size: 15px;
		line-height: 1.8;
	}
	.as_block {
		gap: 20px;
		padding-top: 30px;
	}
	.as .as_block h2 {
		padding-left: 14px;
		border-left-width: 8px;
		font-size: 22px;
		line-height: 30px;
	}
	.as_target {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 24px 20px;
	}
	.as_target ul {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 16px;
	}
	.as_target li,
	.as .as_target_etc {
		font-size: 17px;
		line-height: 1.4;
	}
	.as_target li::before {
		width: 11px;
		height: 11px;
	}
	.as .as_target_etc {
		text-align: right;
	}
	.as_samples {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
	.as_types {
		gap: 20px;
	}
	.as_type {
		flex-direction: column;
		gap: 16px;
		padding: 0 0 10px;
	}
	.as .as_type img {
		width: 100%;
	}
	.as_type_body {
		flex-basis: auto;
		gap: 12px;
		width: 100%;
	}
	.as .as_type h3 {
		padding: 8px 14px;
		font-size: 18px;
	}
	.as .as_type p {
		padding: 0 4px;
		font-size: 15px;
		line-height: 1.8;
	}
	.as_samples figure {
		gap: 10px;
		padding: 0 0 10px;
	}
	.as_others_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.as .as_others_label {
		margin-top: -16px;
		padding: 6px;
		font-size: 15px;
		line-height: 20px;
	}
	.as_works {
		gap: 10px;
	}
	.as .as_works a {
		gap: 10px;
		padding: 0 0 10px;
	}
	.as .as_works span {
		font-size: 14px;
		line-height: 1.4;
	}
}


/*==================================================
  2. Metis DRS2000 DCS（.metis）
==================================================*/
/*--------------------------------------------------
  Metis DRS2000 DCS（大型非接触上面スキャナー）
  共通CSS（cmn_style.css / sp_style.css）の後に読み込む
--------------------------------------------------*/
.metis {
	--blue: #1b4fd8;
	--yellow: #ffd447;
	--navy: #172230;
	--gray: #f2f4f3;
	--black: #333;
	color: var(--black);
	line-height: 1.7;
	overflow: hidden;
}
.metis *,
.metis *::before,
.metis *::after {
	font-family: inherit;
	color: inherit;
	box-sizing: border-box;
}
/* 共通CSSの section / h1-h3 / table の既定値をリセット */
.metis section {
	padding: 0;
	margin: 0;
}
.metis h1,
.metis h2,
.metis h3,
.metis p,
.metis ul,
.metis ol,
.metis dl,
.metis dd,
.metis figure {
	margin: 0;
	padding: 0;
	font-weight: normal;
	text-align: left;
}
.metis h1,
.metis h2,
.metis h3 {
	font-weight: bold;
}
.metis img {
	display: block;
	max-width: 100%;
	height: auto;
}
.metis h2 {
	font-size: 32px;
	line-height: 1.4;
}
.metis h3 {
	font-size: 24px;
	line-height: 1.4;
}

/*--------------------------------------------------
  メインビジュアル
--------------------------------------------------*/
.metis .mv {
	position: relative;
	display: flex;
	flex-direction: column;
	/* 固定ヘッダー（.wrap の padding-top）を除いたウインドウの高さいっぱいに表示 */
	height: calc(100vh - 66px);
	height: calc(100svh - 66px);
	min-height: 480px;
	padding: 54px 66px 57px 62px;
	background-color: #ccc;
	color: #fff;
}
/* 背景動画。全面に敷き、白文字が読めるよう薄い黒を重ねる */
.metis .mv_media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #ccc url(../../service/archive/large-materials/metis/images/scanner-metis_poster.jpg) no-repeat center / cover;
}
.metis .mv_media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .3);
}
.metis .mv_media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 動きを減らす設定の環境では動画を止め、ポスター画像のみ表示 */
@media (prefers-reduced-motion: reduce) {
	.metis .mv_media video {
		display: none;
	}
}
.metis .mv_inner {
	position: relative;
	z-index: 1;
}
.metis .mv_badge {
	display: inline-block;
	margin-bottom: 8px;
	padding: 10px 20px;
	background-color: var(--yellow);
	color: var(--black);
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
}
.metis .mv h1 {
	margin: 0;
	font-size: 40px;
	line-height: 1.3;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.metis .mv h1 span {
	display: block;
	margin-top: 8px;
	font-size: 32px;
	line-height: 1.3;
}
.metis .btn_cta {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	white-space: nowrap;
	margin-top: auto;
	margin-left: auto;
	padding: 20px 20px;
	border-radius: 10px;
	background-color: var(--blue);
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
	transition: opacity .3s;
}
.metis .btn_cta:link,
.metis .btn_cta:visited,
.metis .btn_cta:hover {
	color: #fff;
}
.metis .btn_cta:hover {
	opacity: .85;
}
/* 動画素材のクレジット */
.metis .mv_credit {
	position: absolute;
	bottom: 57px;
	left: 62px;
	z-index: 1;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
	text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
/* スクロール誘導。右端に縦書きの文字と、上から下へ流れる線を表示 */
.metis .mv_scroll {
	position: absolute;
	right: 24px;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .15em;
	line-height: 1;
	text-transform: uppercase;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.metis .mv_scroll:link,
.metis .mv_scroll:visited,
.metis .mv_scroll:hover {
	color: #fff;
}
.metis .mv_scroll span {
	writing-mode: vertical-rl;
}
.metis .mv_scroll::after {
	content: "";
	width: 1px;
	height: 80px;
	background: linear-gradient(#fff, #fff) no-repeat top / 1px 0, rgba(255, 255, 255, .4);
	animation: mv_scroll 2s ease-in-out infinite;
}
@keyframes mv_scroll {
	0% {
		background-position: top;
		background-size: 1px 0, auto;
	}
	50% {
		background-position: top;
		background-size: 1px 100%, auto;
	}
	50.1% {
		background-position: bottom;
		background-size: 1px 100%, auto;
	}
	100% {
		background-position: bottom;
		background-size: 1px 0, auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	.metis .mv_scroll::after {
		animation: none;
		background-size: 1px 100%, auto;
	}
}
.metis .btn_cta::after {
	content: "";
	flex: none;
	width: 8px;
	height: 15px;
	background: url(../../service/archive/large-materials/metis/images/icon_arrow.svg) no-repeat center / contain;
}

/*--------------------------------------------------
  お悩み
--------------------------------------------------*/
.metis .trouble {
	padding: 200px 20px 100px;
	background-color: var(--gray);
}
.metis .trouble_inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 50px;
	max-width: 723px;
	margin: 0 auto;
}
.metis .trouble_body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
}
.metis .trouble h2 {
	display: inline-block;
	margin: 0;
	padding-bottom: 25px;
	background: url(../../service/archive/large-materials/metis/images/trouble_title_line.png) no-repeat left 15px / 100% 49px;
	line-height: 39px;
}
.metis .trouble_list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
}
.metis .trouble_list li {
	padding: 10px 20px;
	border-radius: 10px;
	background-color: #fff;
	list-style: none;
}
/* 画面内に入ったら、項目を上から順に、中央から滲み出るように表示（JSで .is-fade / .is-inview と、項目ごとの --i を付与） */
/* 中央を基点に、少し小さく・強くぼかした状態から広げながらくっきりさせる */
.metis .trouble_list.is-fade li {
	opacity: 0;
	transform: scale(.85);
	transform-origin: center;
	filter: blur(10px);
}
/* transition は表示時のみ指定（JSで .is-fade を付けた瞬間に、表示→非表示のアニメーションが走らないように） */
.metis .trouble_list.is-fade.is-inview li {
	opacity: 1;
	transform: none;
	filter: none;
	transition: opacity 1s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1), filter 1.2s ease;
	transition-delay: calc(var(--i, 0) * .2s);
}
@media (prefers-reduced-motion: reduce) {
	.metis .trouble_list.is-fade li {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}
.metis .trouble_img {
	flex: none;
	align-self: center;
	width: 225px;
}
.metis .trouble_img img {
	width: 100%;
	height: auto;
}
.metis .solve {
	margin-top: 100px;
	text-align: center;
}
.metis .solve p {
	padding: 10px 20px 0;
	font-size: 32px;
	font-weight: bold;
	line-height: 39px;
	text-align: center;
}
.metis .solve img {
	width: 69.28px;
	height: 37.5px;
	margin: 12.5px auto 0;
	transform: rotate(180deg);
}

/*--------------------------------------------------
  おすすめする3つのポイント
--------------------------------------------------*/
.metis .points {
	padding: 100px 10px;
	background-color: #fff;
}
.metis .points_inner {
	max-width: 835px;
	margin: 0 auto;
}
.metis .points h2 {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin: 0 0 5px;
}
.metis .points h2 .num {
	position: relative;
	display: block;
	width: 49px;
	color: var(--blue);
	font-family: "Fira Code", Consolas, monospace;
	font-size: 64px;
	line-height: 1;
	text-align: center;
	text-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
}
.metis .points h2 .num::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 8px;
	width: 33px;
	height: 11px;
	background: url(../../service/archive/large-materials/metis/images/point_deco.svg) no-repeat center / contain;
}
.metis .points h2 .num {
	margin-top: 10px;
	padding-top: 8px;
}
.metis .points_list {
	display: flex;
	flex-direction: column;
	gap: 43px;
	padding: 50px;
	counter-reset: point;
}
.metis .points_list li {
	list-style: none;
}
.metis .points_list h3 {
	display: flex;
	align-items: center;
	gap: 10px;
}
.metis .points_list h3::before {
	counter-increment: point;
	content: counter(point);
	flex: none;
	width: 50px;
	height: 50px;
	background: url(../../service/archive/large-materials/metis/images/point_circle.svg) no-repeat center / contain;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
}
.metis .points_list p {
	padding: 10px 10px 10px 60px;
}
.metis .points_list p small {
	display: block;
	font-size: 12px;
}

/*--------------------------------------------------
  製品紹介
--------------------------------------------------*/
.metis .product {
	padding: 100px 20px;
	background-color: var(--gray);
}
.metis .product_head {
	text-align: center;
}
.metis .product_head h2,
.metis .product_head p {
	text-align: center;
}
.metis .product_head p {
	margin-top: 10px;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
}
.metis .product_main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
	max-width: 919px;
	margin: 100px auto 0;
}
.metis .product_img {
	flex: none;
	width: 384px;
}
.metis .spec {
	display: flex;
	flex: 1 1 485px;
	flex-direction: column;
	gap: 50px;
	max-width: 485px;
}
.metis .spec > div {
	display: flex;
	align-items: center;
	gap: 20px;
}
.metis .spec dt {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding-right: 10px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
}
.metis .spec .label_01 {
	width: 79px;
	background-image: url(../../service/archive/large-materials/metis/images/label_01.svg);
}
.metis .spec .label_02 {
	width: 138px;
	background-image: url(../../service/archive/large-materials/metis/images/label_02.svg);
}
.metis .spec .label_03 {
	width: 111px;
	background-image: url(../../service/archive/large-materials/metis/images/label_03.svg);
}
.metis .spec .label_04 {
	width: 81px;
	background-image: url(../../service/archive/large-materials/metis/images/label_04.svg);
}
.metis .spec dd {
	line-height: 1.4;
}
.metis .perf {
	max-width: 992px;
	margin: 100px auto 0;
}
.metis .perf h3 {
	margin-bottom: 20px;
}
/* 全幅で通常の表（解像度が縦に並ぶ）として表示する */
.metis .perf_table {
	display: table;
	width: 100%;
	max-width: 916px;
	margin: 0 auto;
	padding: 0;
	border-collapse: separate;
	border-spacing: 2px;
	table-layout: fixed;
	background-color: var(--gray);
}
.metis .perf_table th,
.metis .perf_table td {
	display: table-cell;
	padding: 10px 4px;
	border: 0;
	background-color: #fff;
	font-size: 16px;
	font-weight: normal;
	line-height: 19px;
	text-align: center;
	vertical-align: middle;
}
.metis .perf_table thead th,
.metis .perf_table tbody th {
	background-color: var(--navy);
	color: #fff;
	font-weight: bold;
}
.metis .perf_table thead th:nth-child(2) {
	width: 36%;
}
.metis .perf_note {
	margin-top: 20px;
	padding: 20px 50px;
	font-size: 20px;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
}
.metis .compare {
	max-width: 992px;
	margin: 100px auto 0;
}
.metis .compare h3 {
	margin-bottom: 20px;
}
.metis .compare_list {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.metis .compare_list li {
	flex: 1 1 0;
	min-width: 0;
	list-style: none;
}
.metis .compare_list figure {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.metis .compare_list figcaption {
	order: -1;
	font-size: 16px;
	line-height: 19px;
	text-align: center;
}
.metis .compare_list img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/*--------------------------------------------------
  DC Synchro Light System
--------------------------------------------------*/
.metis .light {
	padding: 100px 20px;
	background-color: var(--navy);
	color: #fff;
}
.metis .light_inner {
	max-width: 901px;
	margin: 0 auto;
}
.metis .light_head p {
	line-height: 1.4;
}
.metis .light_head .eyebrow {
	color: var(--yellow);
	font-size: 16px;
	font-weight: bold;
}
.metis .light_head h2 {
	margin: 14px 0;
}
.metis .light_row {
	display: grid;
	grid-template-columns: minmax(0, 388px) minmax(0, 456px);
	justify-content: space-between;
	gap: 20px;
	margin-top: 76px;
}
.metis .light figure {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.metis .light figcaption {
	line-height: 1.4;
}
.metis .light img {
	width: 100%;
	border-radius: 10px;
}
.metis .light_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
}
.metis .light_grid > div {
	position: relative;
}
.metis .light_grid > div span {
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 5px 10px;
	background-color: rgba(0, 0, 0, .8);
	font-size: 12px;
	line-height: 15px;
}
.metis .light_samples {
	margin-top: 76px;
}
.metis .light_samples ul {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
}
.metis .light_samples li {
	flex: 1 1 0;
	min-width: 0;
	list-style: none;
}
.metis .light_samples img {
	aspect-ratio: 287 / 489;
	object-fit: cover;
}

/*--------------------------------------------------
  非接触スキャン
--------------------------------------------------*/
.metis .contactless {
	padding: 100px 20px;
	background-color: var(--gray);
}
.metis .contactless_inner {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 61px;
	max-width: 961px;
	margin: 0 auto;
}
.metis .contactless_img {
	flex: none;
	width: 450px;
}
.metis .contactless_img img {
	width: 100%;
	border-radius: 10px;
}
.metis .contactless_text {
	width: 450px;
}
.metis .contactless_text p {
	margin-top: 14px;
}
.metis .contactless_text p + p {
	margin-top: 1.7em;
}

/*--------------------------------------------------
  お問い合わせバナー
--------------------------------------------------*/
.metis .banner {
	padding: 100px 20px;
	background-color: #fff;
}
.metis .banner a {
	display: block;
	max-width: 810px;
	margin: 0 auto;
	transition: opacity .3s;
}
.metis .banner a:hover {
	opacity: .8;
}
.metis .banner img {
	width: 100%;
}

/*--------------------------------------------------
  Tablet
--------------------------------------------------*/
@media screen and (max-width: 1023px) {
	.metis .mv {
		height: calc(100vh - 56px);
		height: calc(100svh - 56px);
		min-height: 420px;
		padding: 40px 30px 40px;
	}
	.metis .mv_credit {
		bottom: 40px;
		left: 30px;
	}
	.metis .mv_scroll {
		right: 10px;
	}
	.metis .trouble {
		padding-top: 120px;
	}
	.metis .product_main {
		flex-direction: column;
		margin-top: 60px;
	}
	.metis .spec {
		flex: none;
		width: 100%;
		max-width: 485px;
	}
	.metis .light_row {
		grid-template-columns: minmax(0, 388px);
		justify-content: center;
	}
	.metis .contactless_inner {
		flex-direction: column;
		align-items: center;
	}
}

/*--------------------------------------------------
  Smartphone
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	.metis h2 {
		font-size: 24px;
	}
	.metis h3 {
		font-size: 18px;
	}
	.metis .mv {
		min-height: 360px;
		padding: 24px 20px 24px;
	}
	/* スマホではボタンが全幅になるため、ボタンの下に中央寄せで配置 */
	.metis .mv_credit {
		position: relative;
		bottom: auto;
		left: auto;
		margin-top: 12px;
		font-size: 10px;
	}
	.metis .mv_scroll {
		right: 6px;
		gap: 8px;
		font-size: 10px;
	}
	.metis .mv_scroll::after {
		height: 50px;
	}
	.metis .mv h1 {
		margin: 0;
		font-size: 26px;
	}
	.metis .mv h1 span {
		font-size: 20px;
	}
	.metis .btn_cta {
		width: 100%;
		max-width: 300px;
		margin-right: auto;
		margin-left: auto;
		font-size: 18px;
	}
	.metis .trouble {
		padding: 60px 20px 50px;
	}
	.metis .trouble_inner {
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}
	.metis .trouble_body {
		gap: 30px;
		width: 100%;
	}
	.metis .trouble h2 {
		align-self: center;
	}
	.metis .trouble_list {
		width: 100%;
	}
	.metis .trouble_list li {
		width: 100%;
	}
	.metis .trouble_img {
		width: 160px;
	}
	.metis .solve {
		margin-top: 50px;
	}
	.metis .solve p {
		font-size: 24px;
	}
	.metis .points {
		padding: 60px 20px;
	}
	.metis .points h2 .num {
		font-size: 48px;
		width: 40px;
	}
	.metis .points h2 .num::before {
		left: 4px;
	}
	.metis .points_list {
		gap: 30px;
		padding: 30px 0 0;
	}
	.metis .points_list h3 {
		align-items: flex-start;
		gap: 10px;
	}
	.metis .points_list h3::before {
		width: 40px;
		height: 40px;
		font-size: 20px;
		line-height: 40px;
	}
	.metis .points_list h3 {
		line-height: 40px;
	}
	.metis .points_list p {
		padding: 10px 0 0 0;
	}
	.metis .product {
		padding: 60px 20px;
	}
	.metis .product_head p {
		font-size: 16px;
	}
	.metis .product_main {
		gap: 30px;
		margin-top: 40px;
	}
	.metis .product_img {
		width: 100%;
		max-width: 384px;
	}
	.metis .spec {
		gap: 24px;
	}
	.metis .spec > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px 20px;
	}
	.metis .perf,
	.metis .compare {
		margin-top: 60px;
	}
	/* スマホでは横スクロールなしで収まるよう文字と余白を詰める */
	.metis .perf_table th,
	.metis .perf_table td {
		padding: 8px 2px;
		font-size: 13px;
		line-height: 1.4;
	}
	.metis .perf_table thead th {
		font-size: 12px;
	}
	.metis .perf_note {
		padding: 16px 10px;
		font-size: 16px;
	}
	.metis .compare_list {
		gap: 4px;
	}
	.metis .compare_list figure {
		gap: 6px;
	}
	.metis .compare_list figcaption {
		font-size: 11px;
		line-height: 1.3;
	}
	.metis .compare_list img {
		border-radius: 5px;
	}
	.metis .light {
		padding: 60px 20px;
	}
	.metis .light_row,
	.metis .light_samples {
		margin-top: 40px;
	}
	.metis .light_samples ul {
		gap: 8px;
	}
	.metis .contactless {
		padding: 60px 20px;
	}
	.metis .contactless_inner {
		gap: 30px;
	}
	.metis .contactless_img,
	.metis .contactless_text {
		width: 100%;
		max-width: 450px;
	}
	.metis .banner {
		padding: 60px 20px;
	}
}


/*==================================================
  3. 超高精細フィルムデジタル化システム（.metis.ixh）
  メインビジュアル・CTAボタンなどの共通部分は .metis を利用
==================================================*/
.ixh {
	--blue-deep: #1f4fbf;
	--pale: #f0f7ff;
}
.ixh h2 {
	font-size: 32px;
	line-height: 1.4;
}

/*--------------------------------------------------
  メインビジュアル（静止画）
--------------------------------------------------*/
.ixh .mv_media {
	background: #333;
}
.ixh .mv_media::after {
	background-color: rgba(0, 0, 0, .15);
}
.ixh .mv_media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ixh .mv h1 span {
	margin-top: 0;
	font-size: inherit;
}

/*--------------------------------------------------
  導入の背景（フィルム風のカード）
--------------------------------------------------*/
.ixh .ixh_intro {
	padding: 100px 20px;
	background-color: var(--pale);
}
/* 上下のフィルム穴は SVG を横に繰り返して表示 */
.ixh_film {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	max-width: 708px;
	margin: 0 auto;
	padding: 126px 40px;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .25);
	overflow: hidden;
	text-align: center;
}
.ixh_film::before,
.ixh_film::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 40px;
	background: #333 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='18'%3E%3Crect x='10' width='30' height='18' rx='5' fill='%23fff'/%3E%3C/svg%3E") repeat-x 4px center / 50px 18px;
}
.ixh_film::before {
	top: 0;
}
.ixh_film::after {
	bottom: 0;
}
.ixh .ixh_film p {
	font-size: 16px;
	line-height: 30px;
	text-align: center;
}
/*
  スクロールで画面内に入ったら、フィルムを送り込むように表示（JSで .is-feed / .is-inview を付与）
  ・フィルム穴は最初から一定の速さで送り続け、0.5秒後に文章が流れ込んでくる
  ・文章とフィルム穴は同じ距離（--feed）を同じ減速カーブで動き、同時に止まる
  --feed-step：フィルム穴の間隔（PC 50px / SP 36px）
  --feed     ：文章の移動距離。JSでカード幅以上かつ --feed-step の倍数に計算して上書きする（下の値はJSが動かない場合の初期値）
  --feed-pre ：文章が動き出すまでの0.5秒間にフィルム穴が送られる距離（文章の初速と同じ速さになる値）。JSで --feed に合わせて上書きする
  ※ 文章の遅れ（0.5s）を変える場合は、keyframes の 21.74%（0.5s ÷ 2.3s）と --feed-pre も合わせて変更する
*/
.ixh_film {
	--feed-step: 50px;
	--feed: 750px;
	--feed-pre: 1305px;
	--feed-x: 4px;
	--feed-ease: cubic-bezier(.16, 1, .3, 1);
}
.ixh_film.is-feed > * {
	transform: translateX(var(--feed));
}
.ixh_film.is-feed.is-inview > * {
	transform: none;
	transition: transform 1.8s var(--feed-ease) .5s;
}
.ixh_film.is-feed.is-inview::before,
.ixh_film.is-feed.is-inview::after {
	animation: ixh_film_feed 2.3s both;
}
@keyframes ixh_film_feed {
	0% {
		background-position-x: calc(var(--feed-x) + var(--feed) + var(--feed-pre));
		animation-timing-function: linear;
	}
	21.74% {
		background-position-x: calc(var(--feed-x) + var(--feed));
		animation-timing-function: cubic-bezier(.16, 1, .3, 1);
	}
	100% {
		background-position-x: var(--feed-x);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ixh_film.is-feed > * {
		transform: none;
	}
	.ixh_film.is-feed.is-inview::before,
	.ixh_film.is-feed.is-inview::after {
		animation: none;
	}
}
.ixh .ixh_film em {
	font-style: normal;
	background: linear-gradient(transparent 60%, #D9E3F7 60%);
}
.ixh .ixh_film .ixh_film_lead {
	margin-top: 70px;
}
.ixh .ixh_film strong {
	color: var(--blue);
	font-size: 32px;
	font-weight: bold;
	line-height: 1.2;
	font-family: 'Noto Sans JP', sans-serif;
}
.ixh .ixh_film_lead span {
	font-size: 32px;
	line-height: 1.2;
	font-family: 'Noto Sans JP', sans-serif;
}

/*--------------------------------------------------
  日本で唯一
--------------------------------------------------*/
.ixh .ixh_only {
	padding: 200px 20px;
	background-color: var(--blue-deep);
	color: #fff;
}
.ixh_only_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
}
.ixh_only_img {
	flex: 0 1 500px;
	border-radius: 20px;
	overflow: hidden;
}
.ixh .ixh_only_img img {
	width: 100%;
	aspect-ratio: 500 / 450;
	object-fit: cover;
}
.ixh_only_text {
	display: flex;
	flex-direction: column;
	gap: 50px;
	flex: 0 1 450px;
	font-weight: bold;
}
.ixh .ixh_only h2 {
	font-size: 64px;
	line-height: 1.2;
}
/* 画面内に入ったら1文字ずつ下から浮かび上がるように表示（JSで .is-chars / .is-inview と、文字ごとの .ixh_char を付与） */
.ixh_only h2.is-chars .ixh_char {
	display: inline-block;
	opacity: 0;
	transform: translateY(.4em);
	filter: blur(6px);
}
/* transition は表示時のみ指定（JSで .is-chars を付けた瞬間に、表示→非表示のアニメーションが走らないように） */
.ixh_only h2.is-chars.is-inview .ixh_char {
	opacity: 1;
	transform: none;
	filter: none;
	transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1), filter .8s ease;
}
@media (prefers-reduced-motion: reduce) {
	.ixh_only h2.is-chars .ixh_char {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}
.ixh .ixh_only p {
	font-size: 16px;
	line-height: 30px;
}

/*--------------------------------------------------
  特長（POINT）
--------------------------------------------------*/
.ixh .ixh_points {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 100px 20px;
}
.ixh .ixh_points h2 {
	font-size: 36px;
	line-height: 1.75;
	text-align: center;
}
.ixh_point {
	display: flex;
	align-items: center;
	gap: 50px;
	width: 100%;
	max-width: 1000px;
	padding: 0 25px;
}
.ixh_point.is-reverse .ixh_point_img {
	order: 2;
}
/* 画面内に入ったら横からスライドして表示（JSで .is-slide / .is-inview を付与）。通常は右から、.is-reverse は左から */
.ixh_point.is-slide {
	opacity: 0;
	transform: translateX(120px);
}
.ixh_point.is-slide.is-reverse {
	transform: translateX(-120px);
}
/* transition は表示時のみ指定（JSで .is-slide を付けた瞬間に、表示→非表示のアニメーションが走らないように） */
.ixh_point.is-slide.is-inview {
	opacity: 1;
	transform: none;
	transition: opacity 1s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
	.ixh_point.is-slide,
	.ixh_point.is-slide.is-reverse {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/* 画像は450px四方の枠の中央に、幅300pxで配置 */
.ixh_point_img {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 450px;
	aspect-ratio: 1 / 1;
}
.ixh .ixh_point_img img {
	width: 66.6667%;
}
.ixh_point_text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 0 1 450px;
}
.ixh .ixh_point_num {
	margin-bottom: -15px;
	color: var(--blue);
	font-size: 16px;
	line-height: 1.2;
}
.ixh .ixh_point h3 {
	font-size: 24px;
	line-height: 1.2;
}
.ixh .ixh_point p {
	font-size: 16px;
	line-height: 30px;
}

/*--------------------------------------------------
  高精細
--------------------------------------------------*/
.ixh .ixh_detail {
	padding: 100px 20px;
	background-color: var(--pale);
}
.ixh_detail_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 61px;
}
.ixh_detail_img {
	flex: 0 1 450px;
	border-radius: 10px;
	overflow: hidden;
}
.ixh_detail_text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	flex: 0 1 450px;
}

.ixh .ixh_detail p {
	font-size: 16px;
	line-height: 30px;
}
.ixh .ixh_detail strong {
	color: var(--blue);
	font-weight: bold;
}
/*
  画面内に入ったら、スキャナーで読み取るように表示（JSで .is-scan / .is-scan-img / .is-inview を付与）
  ・画像の上にぼかしの膜（::before）を重ね、読み取りライン（::after）が上から下へ走るのに合わせて膜の上端を下げていく
    → .is-scan-img が付いているときのみ。現在は停止中（archive.js の SCAN_IMAGE を true にすると再開）
  ・テキストは見出し → 本文の順に下からふわっと表示（画像の演出があるときは読み取りが終わる頃に表示）
*/
.ixh_detail_img {
	position: relative;
}
.ixh_detail_inner.is-scan-img .ixh_detail_img::before,
.ixh_detail_inner.is-scan-img .ixh_detail_img::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
}
/* ぼかしの膜。読み取りラインより下の部分だけを覆う */
.ixh_detail_inner.is-scan-img .ixh_detail_img::before {
	top: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, .15);
	-webkit-backdrop-filter: blur(12px) grayscale(.6);
	backdrop-filter: blur(12px) grayscale(.6);
}
/* 読み取りライン */
.ixh_detail_inner.is-scan-img .ixh_detail_img::after {
	top: 0;
	height: 3px;
	background-color: #7fb2ff;
	box-shadow: 0 0 12px 4px rgba(27, 79, 216, .6), 0 0 40px 10px rgba(127, 178, 255, .35);
	opacity: 0;
}
/* 膜の上端（top）を読み取りラインと同じ速さで下げていく */
.ixh_detail_inner.is-scan-img.is-inview .ixh_detail_img::before {
	animation: ixh_detail_unblur 1.6s cubic-bezier(.65, 0, .35, 1) .2s both;
}
.ixh_detail_inner.is-scan-img.is-inview .ixh_detail_img::after {
	animation: ixh_detail_scan 1.6s cubic-bezier(.65, 0, .35, 1) .2s both;
}
@keyframes ixh_detail_unblur {
	from {
		top: 0;
	}
	to {
		top: 100%;
	}
}
@keyframes ixh_detail_scan {
	0% {
		top: 0;
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		top: calc(100% - 3px);
		opacity: 0;
	}
}
/* テキストは読み取りが終わる頃に、見出し → 本文の順で表示 */
.ixh_detail_inner.is-scan .ixh_detail_text > * {
	opacity: 0;
	transform: translateY(20px);
}
.ixh_detail_inner.is-scan.is-inview .ixh_detail_text > * {
	opacity: 1;
	transform: none;
	transition: opacity .8s ease 1.4s, transform .8s cubic-bezier(.22, 1, .36, 1) 1.4s;
}
.ixh_detail_inner.is-scan.is-inview .ixh_detail_text > :nth-child(2) {
	transition-delay: 1.7s;
}
/* 画像の演出を止めているときは、待たずにすぐ表示 */
.ixh_detail_inner.is-scan:not(.is-scan-img).is-inview .ixh_detail_text > * {
	transition-delay: 0s;
}
.ixh_detail_inner.is-scan:not(.is-scan-img).is-inview .ixh_detail_text > :nth-child(2) {
	transition-delay: .3s;
}
@media (prefers-reduced-motion: reduce) {
	.ixh_detail_inner.is-scan-img .ixh_detail_img::before,
	.ixh_detail_inner.is-scan-img .ixh_detail_img::after {
		display: none;
	}
	.ixh_detail_inner.is-scan .ixh_detail_text > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*--------------------------------------------------
  Tablet
--------------------------------------------------*/
@media screen and (max-width: 1023px) {
	.ixh .ixh_only {
		padding: 100px 30px;
	}
	.ixh .ixh_only h2 {
		font-size: 48px;
	}
	.ixh_point {
		gap: 30px;
		padding: 0;
	}
	.ixh_detail_inner {
		gap: 40px;
	}
}

/*--------------------------------------------------
  Smartphone
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	.ixh h2 {
		font-size: 24px;
	}
	.ixh .mv h1 {
		font-size: 24px;
	}
	.ixh .ixh_intro {
		padding: 50px 16px;
	}
	.ixh_film {
		--feed-step: 36px;
		--feed: 792px;
		--feed-pre: 1378px;
		--feed-x: 3px;
		gap: 20px;
		padding: 70px 16px;
		border-radius: 12px;
	}
	.ixh_film::before,
	.ixh_film::after {
		height: 28px;
		background-size: 36px 13px;
		background-position: 3px center;
	}
	.ixh .ixh_film p {
		font-size: 14px;
		line-height: 1.9;
	}
	/* スマホでは強制改行をせず、幅に合わせて折り返す */
	.ixh .ixh_film p:not(.ixh_film_lead) br {
		display: none;
	}
	.ixh .ixh_film .ixh_film_lead {
		margin-top: 20px;
	}
	.ixh .ixh_film strong,
	.ixh .ixh_film_lead span {
		font-size: 20px;
		line-height: 1.5;
	}
	.ixh .ixh_only {
		padding: 60px 20px;
	}
	.ixh_only_inner,
	.ixh_detail_inner {
		flex-direction: column;
		gap: 30px;
	}
	.ixh_only_img,
	.ixh_detail_img {
		flex-basis: auto;
		width: 100%;
	}
	.ixh_only_text,
	.ixh_detail_text {
		flex-basis: auto;
		gap: 20px;
	}
	.ixh .ixh_only h2 {
		font-size: 36px;
	}
	.ixh .ixh_points {
		gap: 40px;
		padding: 60px 20px;
	}
	.ixh .ixh_points h2 {
		font-size: 22px;
		line-height: 1.5;
	}
	.ixh_point,
	.ixh_point.is-reverse {
		flex-direction: column;
		gap: 20px;
	}
	.ixh_point.is-reverse .ixh_point_img {
		order: 0;
	}
	.ixh_point_img {
		flex-basis: auto;
		width: 100%;
		max-width: 300px;
		aspect-ratio: auto;
	}
	.ixh .ixh_point_img img {
		width: 100%;
	}
	.ixh_point_text {
		flex-basis: auto;
		width: 100%;
		gap: 12px;
	}
	.ixh .ixh_point_num {
		margin-bottom: -8px;
	}
	.ixh .ixh_point h3 {
		font-size: 20px;
		line-height: 1.4;
	}
	.ixh .ixh_point p,
	.ixh .ixh_only p,
	.ixh .ixh_detail p {
		font-size: 15px;
		line-height: 1.8;
	}
	.ixh .ixh_point p br {
		display: none;
	}
	.ixh .ixh_detail {
		padding: 60px 20px;
	}
	.ixh .ixh_detail h2 {
		text-align: left;
	}
}


/*==================================================
  4. お知らせ 詳細ページ（.as.an）
  見出しの装飾線・リセットなどの共通部分は .as を利用
==================================================*/
.an .as_inner {
	gap: 50px;
	max-width: 1000px;
}
.an .an_label {
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: .05em;
	text-align: center;
}
.an_article {
	display: flex;
	flex-direction: column;
	gap: 41px;
	width: 100%;
}
.an_article_head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.an .an_article time {
	display: block;
	font-size: 14px;
	line-height: 1.2;
}
.an .an_article h1 {
	font-size: 24px;
	line-height: 1.4;
	text-align: left;
}
.an_article_body {
	display: flex;
	flex-direction: column;
	gap: 1.6em;
	font-size: 16px;
	line-height: 1.6;
}
.an .an_article_body p,
.an .an_article_body dl,
.an .an_article_body dd {
	margin: 0;
	padding: 0;
}
.an .an_article_body dl > div {
	display: flex;
}
.an .an_article_body dt::after {
	content: "：";
}
.an .an_article_body a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}
.an .an_article_body a:hover {
	text-decoration: none;
}
/* タイトル下の補足（講演名・イベント名など） */
.an .an_article_sub {
	font-size: 16px;
	line-height: 1.6;
}
/* 記事内の写真（横並び・中央寄せ）。表示サイズは img の width / height 属性で指定し、画面幅に応じて縮小 */
.an .an_photos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 50px;
}
.an .an_photos li {
	max-width: 100%;
}
/* 記事の移動（前の記事 / 一覧へ戻る / 次の記事） */
.an_pager {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 30px;
	width: 100%;
	padding-top: 40px;
	border-top: 1px solid #ddd;
}
.an .an_pager_prev,
.an .an_pager_next {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #333;
	text-decoration: none;
}
.an .an_pager_next {
	align-items: flex-end;
	text-align: right;
}
.an .an_pager_label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--blue);
	font-size: 14px;
	line-height: 1.2;
}
/* 矢印（画像を使わずCSSで描画） */
.an .an_pager_prev .an_pager_label::before,
.an .an_pager_next .an_pager_label::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}
.an .an_pager_prev .an_pager_label::before {
	transform: rotate(-135deg);
}
.an .an_pager_next .an_pager_label::after {
	transform: rotate(45deg);
}
.an .an_pager_title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.an .an_pager_prev:hover .an_pager_title,
.an .an_pager_next:hover .an_pager_title {
	color: var(--blue);
	text-decoration: underline;
}
.an .an_pager_list {
	padding: 12px 30px;
	border: 1px solid var(--blue);
	border-radius: 50px;
	color: var(--blue);
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .3s, color .3s;
}
.an .an_pager_list:hover {
	background-color: var(--blue);
	color: #fff;
}

/*--------------------------------------------------
  Smartphone
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	.an .as_inner {
		gap: 30px;
	}
	.an .an_label {
		font-size: 24px;
	}
	.an_article {
		gap: 24px;
	}
	.an_article_head {
		gap: 10px;
	}
	.an .an_article h1 {
		font-size: 20px;
	}
	.an_article_body {
		font-size: 15px;
		line-height: 1.8;
	}
	.an .an_article_sub {
		font-size: 15px;
	}
	.an .an_photos {
		gap: 16px;
	}
	/* スマホでは「前の記事 / 次の記事」を横並びにし、「一覧へ戻る」をその下に置く */
	.an_pager {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 20px 16px;
		padding-top: 24px;
	}
	.an .an_pager_prev {
		grid-column: 1;
		grid-row: 1;
	}
	.an .an_pager_next {
		grid-column: 2;
		grid-row: 1;
	}
	.an .an_pager_list {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
	}
	.an .an_pager_title {
		font-size: 14px;
	}
}
/*--------------------------------------------------
  お知らせ 一覧ページ（.as.an.is-list）
--------------------------------------------------*/
.an.is-list .as_inner {
	max-width: 1060px;
}
.an_list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px;
	width: 100%;
}
.an .an_list a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 10px;
	color: var(--black);
	text-decoration: none;
}
/* サムネイルは正方形の枠に、縦横比を保って収める */
.an_list_img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background-color: #fff;
	width: 300px;
	height:300px;
}
.an .an_list_img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity .3s;
}
.an_list_text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: color .3s;
}
.an .an_list time {
	display: block;
	font-size: 14px;
	line-height: 1.2;
}
.an .an_list h2 {
	font-size: 20px;
	line-height: 1.4;
}

.an .an_list p {
	font-size: 16px;
	line-height: 1.5;
}
.an .an_list a:hover img {
	opacity: .8;
}
/* 日付・タイトル・説明文はすべて親の色を継承するため、まとめて色を変える */
.an .an_list a:hover .an_list_text {
	color: var(--blue);
}

/*--------------------------------------------------
  Tablet
--------------------------------------------------*/
@media screen and (max-width: 1023px) {
	.an_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
	}
}

/*--------------------------------------------------
  Smartphone
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	.an_list {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
	.an .an_list a {
		padding: 0 0 10px;
	}
	/* スマホでは縦に長くなりすぎないよう、横長の枠に収める */
	.an_list_img {
		aspect-ratio: 3 / 2;
		margin: 0 auto;
	}
	.an .an_list h2 {
		font-size: 18px;
	}
	.an .an_list p {
		font-size: 15px;
	}
}

/*==================================================
  5. デジタルアーカイブ トップページ（.as.at）
  見出しの装飾線・リセットなどの共通部分は .as を利用
  設備紹介のタブは共通CSS（#archive #equipment）のスタイルをそのまま利用
==================================================*/
.as.at {
	margin-top: 0;
	padding: 0;
	/* 左ナビの position: sticky が効くよう、hidden ではなく clip ではみ出しを隠す */
	overflow: visible;
	overflow: clip;
}
.at section {
	padding: 0;
	/* 固定ヘッダーに隠れないよう、ページ内リンクの到達位置を下げる */
	scroll-margin-top: 86px;
}
.at .as_head h2 {
	font-size: 32px;
	line-height: 1.2;
	text-align: center;
}
.at .at_lead {
	max-width: 660px;
	font-size: 16px;
	line-height: 1.8;
	text-align: center;
}

/*--------------------------------------------------
  メインビジュアル（背景動画）
--------------------------------------------------*/
.at_mv {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* 固定ヘッダー（.wrap の padding-top）を除いたウインドウの高さいっぱいに表示 */
	height: calc(100vh - 66px);
	height: calc(100svh - 66px);
	min-height: 480px;
	padding: 50px 66px 56px 56px;
	background-color: #333;
	color: #fff;
}
.at_mv_media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #333 url(../../service/archive/images/archive-mv_poster.jpg) no-repeat center / cover;
}
/* 白文字が読めるよう薄い黒を重ねる */
.at_mv_media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .2);
}
.at_mv_media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 動きを減らす設定の環境では動画を止め、ポスター画像のみ表示 */
@media (prefers-reduced-motion: reduce) {
	.at_mv_media video {
		display: none;
	}
}
.at .at_mv h1 {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 40px;
	font-weight: bold;
	line-height: 1.2;
	text-align: left;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.at .at_mv h1 span {
	font-size: 32px;
	text-align: left;
}

/* お問い合わせボタン（メインビジュアル・左ナビ共通） */
.at .at_cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px 30px;
	background: linear-gradient(to right, #009fe6, #005880);
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
	white-space: nowrap;
	transition: opacity .3s;
}
.at .at_cta:link,
.at .at_cta:visited,
.at .at_cta:hover {
	color: #fff;
}
.at .at_cta:hover {
	opacity: .85;
}
/*
  右側の矢印アイコン（白い丸＋青い「>」）を画像を使わずCSSで描画
  ::after … 白い丸（25px）
  ::before … 「>」の矢印。正方形の上辺と右辺に線を引いて45度回転し、order で丸の後ろに回してから
             負の margin で丸の上に重ねる（右側の margin で重ねた分の幅を戻し、ボタン内の中央揃えを保つ）
*/
.at .at_cta::after,
.ac .ac_btn::after {
	content: "";
	order: 1;
	flex: none;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #fff;
}
.at .at_cta::before,
.ac .ac_btn::before {
	content: "";
	order: 2;
	flex: none;
	width: 8px;
	height: 8px;
	margin: 0 11px 0 -29px;
	border-top: 2px solid #009fe6;
	border-right: 2px solid #009fe6;
	transform: rotate(45deg);
}
.at_mv .at_cta {
	align-self: flex-end;
	width: 250px;
}
/* スクロール誘導。右端に縦書きの文字と、上から下へ流れる線を表示（線の動きは Metis の mv_scroll を利用） */
.at .at_mv_scroll {
	position: absolute;
	right: 24px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .15em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.at .at_mv_scroll:link,
.at .at_mv_scroll:visited,
.at .at_mv_scroll:hover {
	color: #fff;
}
.at_mv_scroll span {
	writing-mode: vertical-rl;
}
.at_mv_scroll::after {
	content: "";
	width: 1px;
	height: 80px;
	background: linear-gradient(#fff, #fff) no-repeat top / 1px 0, rgba(255, 255, 255, .4);
	animation: mv_scroll 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.at_mv_scroll::after {
		animation: none;
		background-size: 1px 100%, auto;
	}
}

/*--------------------------------------------------
  本文（左ナビ＋メイン）
--------------------------------------------------*/
.at_body {
	display: flex;
	align-items: flex-start;
}
/* 左ナビ。スクロールしても固定ヘッダーの下に留まる */
.at_nav {
	position: sticky;
	top: 66px;
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	width: 220px;
	padding: 50px 0 50px 20px;
}
.at_nav ul {
	width: 100%;
	border-top: 1px solid var(--blue);
}
.at .at_nav li a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 80px;
	padding: 0 10px;
	border-bottom: 1px solid var(--blue);
	color: var(--black);
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color .3s, color .3s;
}
.at_nav li a span {
	flex: 1 1 0;
	text-align: center;
}
.at_nav li a::after {
	content: "";
	flex: none;
	width: 21px;
	height: 15px;
	background: url(../../service/archive/images/icon_arrow.svg) no-repeat center / contain;
	transition: transform .3s, filter .3s;
}
.at .at_nav li a:hover {
	background-color: var(--pale);
}
.at_nav li a:hover::after {
	transform: translateX(4px);
}
/* 表示中のセクションのボタン（JSで .is-current を付与） */
.at .at_nav li a.is-current {
	background-color: var(--blue);
	color: #fff;
}
.at_nav li a.is-current::after {
	/* 黒い矢印アイコンを白にする */
	filter: brightness(0) invert(1);
}
.at_nav .at_cta {
	width: 100%;
	padding: 20px;
}
.at_main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 200px;
	min-width: 0;
	/*
	  左ナビ（220px）を含めたウインドウの中央にコンテンツを揃えるため、右側にも左ナビ分の余白を取る
	  （左の余白 20px ＋ 左ナビ 220px ＝ 240px）。
	  幅が足りない場合はコンテンツ幅（960px）を優先し、右の余白を 20px まで縮める
	*/
	padding: 100px clamp(20px, calc(100% - 1200px), 240px) 100px 20px;
}
.at_main > section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	width: 100%;
	max-width: 960px;
}

/* 一覧を見る・詳しく見るボタン */
.at .at_more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border: 1px solid var(--blue);
	background-color: #fff;
	color: var(--black);
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .3s;
}
.at .at_more::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url(../../service/archive/images/icon_triangle.svg) no-repeat center / 17px 15px;
	transform: rotate(90deg);
}
.at .at_more:hover {
	background-color: var(--pale);
}

/*--------------------------------------------------
  新着情報
--------------------------------------------------*/
.at_news_list {
	width: 100%;
	max-width: 800px;
	border-top: .5px solid #333;
	border-bottom: .5px solid #333;
}
.at_news_list li + li {
	border-top: .5px solid #333;
}
.at .at_news_list a {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 20px;
	color: var(--black);
	text-decoration: none;
	transition: background-color .3s;
}
.at .at_news_list a:hover {
	background-color: #fbfafa;
}
.at_news_img {
	flex: none;
	width: 150px;
	height: 100px;
	overflow: hidden;
}
.at .at_news_img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* 書籍の表紙など、縦長の画像は切り取らずに収める */
.at_news_img.is-contain {
	background-color: transparent;
}
.at .at_news_img.is-contain img {
	object-fit: contain;
}
.at .at_news_list time {
	flex: none;
	width: 125px;
	font-size: 16px;
	line-height: 1.4;
}
.at_news_title {
	font-size: 16px;
	line-height: 1.4;
}
.at_news_title span {
	display: block;
}

/*--------------------------------------------------
  デジタルアーカイブとは
--------------------------------------------------*/
.at_about_box {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 50px;
	width: 100%;
}
.at_about_img {
	flex: 0 1 450px;
	background-color: #ccc;
}
.at .at_about_img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.at .at_about_text {
	flex: 0 1 auto;
	font-size: 16px;
	line-height: 30px;
}
.at .at_about_text + .at_about_text {
	margin-top: 30px;
}

/*--------------------------------------------------
  堀内カラーのデジタルアーカイブサービス
--------------------------------------------------*/
.at_service_group {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
	max-width: 720px;
}
.at .at_service_group h3 {
	margin: 0;
	padding-left: 10px;
	border-left: 12px solid var(--blue);
	font-size: 24px;
	font-weight: normal;
	line-height: 1.2;
}
.at_service_list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 240px));
}
.at .at_service_list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 20px;
	text-decoration: none;
}
.at_service_img {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #ccc;
	overflow: hidden;
}
.at .at_service_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
/* デザインのトリミング位置に合わせる */
.at .at_service_list .is-wakosho img {
	object-position: 37% center;
}
.at .at_service_list .is-yokosho img {
	object-position: 61% center;
}
.at .at_service_list .is-movie img {
	object-position: 34% center;
}
.at .at_service_list .is-db img {
	object-position: left center;
}
.at .at_service_list .is-web img {
	object-position: 90% center;
}
.at .at_service_label {
	position: relative;
	width: 90%;
	margin-top: -22px;
	padding: 10px;
	background-color: var(--blue);
	color: #fff;
	font-size: 20px;
	line-height: 24px;
	text-align: center;
}
.at .at_service_list a:hover img {
	transform: scale(1.05);
}

/*--------------------------------------------------
  デジタルアーカイブのメリット
--------------------------------------------------*/
.at_merit_list {
	display: flex;
	align-items: stretch;
	gap: 50px;
	width: 100%;
}
.at_merit_box {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 16px 50px 30px;
	background-color: var(--pale);
}
.at .at_merit_box h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 10px 20px;
	background-color: var(--blue);
	color: #fff;
	font-size: 24px;
	font-weight: normal;
	line-height: 1.2;
}
.at .at_merit_box h3 img {
	width: auto;
	height: 40px;
}
.at .at_merit_box p,
.at .at_merit_box dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}
.at_merit_box dl {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}
.at_merit_box dt {
	color: var(--blue);
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6;
}
.at_merit_box dd + dt {
	margin-top: 10px;
}
.at_merit_box .at_more {
	align-self: center;
	margin-top: auto;
}

/*--------------------------------------------------
  認証・資格
--------------------------------------------------*/
.at_license {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 50px;
}
.at_license ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.at_license li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 20px;
}
.at_license li::before {
	content: "";
	flex: none;
	width: 25px;
	height: 25px;
	background: url(../../service/archive/images/icon_circle.svg) no-repeat center / contain;
}
/* リンクがある項目だけ下線を付ける */
.at .at_license a {
	color: var(--black);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .3s;
}
.at .at_license a:hover {
	color: var(--blue);
}

/*--------------------------------------------------
  設備紹介（タブの見た目は共通CSSを利用）
--------------------------------------------------*/
.at #equipment .productList {
	width: 100%;
}

/*--------------------------------------------------
  Tablet
--------------------------------------------------*/
@media screen and (max-width: 1023px) {
	.at section {
		scroll-margin-top: 76px;
	}
	.at_mv {
		height: calc(100vh - 56px);
		height: calc(100svh - 56px);
		min-height: 420px;
		padding: 40px 30px;
	}
	.at .at_mv_scroll {
		right: 10px;
	}
	/* 左ナビを置く幅がないため非表示（各項目へはスクロールで移動） */
	.at_nav {
		display: none;
	}
	.at_main {
		gap: 120px;
		padding: 80px 20px;
	}
	.at_about_box {
		flex-direction: column;
		align-items: center;
	}
	.at_about_img {
		flex-basis: auto;
		width: 100%;
		max-width: 450px;
	}
	.at_merit_list {
		flex-direction: column;
		gap: 30px;
	}
}

/*--------------------------------------------------
  Smartphone
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	.at_mv {
		min-height: 360px;
		padding: 24px 20px;
	}
	.at .at_mv h1 {
		gap: 4px;
		font-size: 26px;
	}
	.at .at_mv h1 span {
		font-size: 18px;
	}
	.at_mv .at_cta {
		align-self: center;
		width: 100%;
		max-width: 300px;
		font-size: 18px;
	}
	.at .at_mv_scroll {
		right: 6px;
		gap: 8px;
		font-size: 10px;
	}
	.at_mv_scroll::after {
		height: 50px;
	}
	.at_main {
		gap: 80px;
		padding: 60px 20px;
	}
	.at_main > section {
		gap: 30px;
	}
	.at .as_head h2 {
		font-size: 20px;
		line-height: 1.4;
	}
	/* スマホでは強制改行をせず、幅に合わせて折り返す */
	.at .at_lead br,
	.at .at_about_text br {
		display: none;
	}
	.at .at_lead {
		font-size: 15px;
		text-align: left;
	}
	.at .at_news_list a {
		display: grid;
		grid-template-columns: 100px minmax(0, 1fr);
		gap: 4px 14px;
		padding: 12px 0;
	}
	.at_news_img {
		grid-row: span 2;
		width: 100px;
		height: 67px;
	}
	.at .at_news_list time {
		width: auto;
		font-size: 13px;
	}
	.at_news_title {
		font-size: 14px;
	}
	.at .at_about_text {
		font-size: 15px;
		line-height: 1.9;
	}
	.at_service_group {
		gap: 20px;
	}
	.at .at_service_group h3 {
		padding-left: 10px;
		border-left-width: 8px;
		font-size: 20px;
	}
	.at_service_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.at .at_service_list a {
		padding: 0 0 6px;
	}
	.at .at_service_label {
		margin-top: -18px;
		padding: 6px;
		font-size: 16px;
		line-height: 24px;
	}
	.at_merit_box {
		padding: 16px 16px 24px;
	}
	.at .at_merit_box h3 {
		padding: 8px 12px;
		font-size: 20px;
	}
	.at .at_merit_box h3 img {
		height: 30px;
	}
	.at .at_merit_box p,
	.at .at_merit_box dd {
		font-size: 15px;
	}
	.at_merit_box .at_more {
		align-self: stretch;
		justify-content: center;
		font-size: 15px;
	}
	.at_license {
		flex-direction: column;
		gap: 20px;
	}
}

/*==================================================
  6. お問い合わせ（.ac）各ページ共通
  main の後・パンくずリストの前に、画面幅いっぱいの帯として置く
  .as / .at の外に置くため、変数とリセットはここで指定する
  見出しの装飾線は .as_head を利用
==================================================*/
/* 共通CSSの「.service section { background-color: transparent; }」より優先させるため、要素名を付ける */
.ac,
section.ac {
	--blue: #009fe6;
	--pale: #f0f7ff;
	padding: 100px 20px;
	background-color: var(--pale);
	color: #333;
	line-height: 1.6;
}
/* 背景を白にする場合（Metis / ixh） */
.ac.is-white,
section.ac.is-white {
	background-color: #fff;
}
.ac *,
.ac *::before,
.ac *::after {
	box-sizing: border-box;
}
.ac_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: 960px;
	margin: 0 auto;
}
.ac .ac_en {
	margin: 0;
	color: var(--blue);
	font-size: 12px;
	letter-spacing: .05em;
	line-height: 1.2;
	text-align: center;
}
.ac h2 {
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 32px;
	font-weight: normal;
	line-height: 1.2;
	text-align: center;
}
.ac .ac_text {
	margin: 0;
	color: #333;
	font-size: 16px;
	line-height: 1.9;
	text-align: center;
}
/* お問い合わせボタン（トップページのお問い合わせボタンと同じ見た目） */
.ac .ac_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 300px;
	max-width: 100%;
	padding: 22px 30px;
	background: linear-gradient(to right, #009fe6, #005880);
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity .3s;
}
.ac .ac_btn:link,
.ac .ac_btn:visited,
.ac .ac_btn:hover {
	color: #fff;
}
.ac .ac_btn:hover {
	opacity: .85;
}
/* ホバー時に矢印アイコン（丸と「>」）を右へ少し動かす */
.ac .ac_btn::after,
.ac .ac_btn::before {
	transition: transform .3s;
}
.ac .ac_btn:hover::after {
	transform: translateX(4px);
}
.ac .ac_btn:hover::before {
	transform: translateX(4px) rotate(45deg);
}

/*--------------------------------------------------
  Smartphone
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	.ac,
	section.ac {
		padding: 60px 20px;
	}
	.ac_inner {
		gap: 24px;
	}
	.ac h2 {
		font-size: 22px;
	}
	/* スマホでは強制改行をせず、幅に合わせて折り返す */
	.ac .ac_text {
		font-size: 15px;
		text-align: left;
	}
	.ac .ac_text br {
		display: none;
	}
	.ac .ac_btn {
		font-size: 18px;
	}
}


/*==================================================
  7. 動画の一時停止／再生ボタン（.video_toggle）各ページ共通
  JS（archive.js）で自動再生の動画に追加する。アイコンは画像を使わずCSSで描画
==================================================*/
.video_toggle {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .45);
	cursor: pointer;
	transition: background-color .3s;
}
.video_toggle:hover {
	background-color: rgba(0, 0, 0, .7);
}
.video_toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
/* 一時停止アイコン（縦線2本） */
.video_toggle::before {
	content: "";
	box-sizing: border-box;
	width: 12px;
	height: 14px;
	border-right: 4px solid #fff;
	border-left: 4px solid #fff;
}
/* 再生アイコン（三角形）。一時停止中に表示 */
.video_toggle.is-paused::before {
	width: 0;
	height: 0;
	margin-left: 4px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}
/* 画面いっぱいのメインビジュアル（トップ / Metis）は右上に配置 */
.at_mv > .video_toggle,
.metis .mv > .video_toggle {
	top: 24px;
	right: 24px;
}
/* ページ内の動画（和古書 / 洋古書 / ガラス乾板）は動画の右下に配置 */
.as_movie > .video_toggle {
	right: 16px;
	bottom: 16px;
}
@media screen and (max-width: 767px) {
	.video_toggle {
		width: 36px;
		height: 36px;
	}
	.at_mv > .video_toggle,
	.metis .mv > .video_toggle {
		top: 16px;
		right: 16px;
	}
	.as_movie > .video_toggle {
		right: 10px;
		bottom: 10px;
	}
}


/*==================================================
  8. テキストのふわっと表示（.is-fadeup）各ページ共通
  JS（archive.js）で対象に .is-fadeup / .is-inview と、子要素ごとの --i を付与
  ixh「フィルムの細部まで、高精細に取り込める」のテキストと同じ動き（0.3秒ずつずらして表示）
==================================================*/
.is-fadeup > * {
	opacity: 0;
	transform: translateY(20px);
}
/* transition は表示時のみ指定（JSで .is-fadeup を付けた瞬間に、表示→非表示のアニメーションが走らないように） */
.is-fadeup.is-inview > * {
	opacity: 1;
	transform: none;
	transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i, 0) * .3s);
}
@media (prefers-reduced-motion: reduce) {
	.is-fadeup > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/*==================================================
  9. スクロールアニメーション（.anim / .anim-○○）
  JS（archive.js）で対象に .anim .anim-○○ / .is-inview と、子要素ごとの --i を付与
  ・既存の transform（回転など）を上書きしないよう、移動・拡大は translate / scale プロパティで指定
  ・transition は表示時のみ指定（JSでクラスを付けた瞬間に、表示→非表示のアニメーションが走らないように）
  ・時間はおおむね 0.8〜1.2秒、子要素は 0.15〜0.25秒ずつずらす
==================================================*/
/* fadeup：要素自体を下からふわっと表示 */
.anim-fadeup {
	opacity: 0;
	translate: 0 24px;
}
.anim-fadeup.is-inview {
	opacity: 1;
	translate: none;
	transition: opacity .8s ease, translate .8s cubic-bezier(.22, 1, .36, 1);
}
/* stagger：子要素を上から順に下からふわっと表示 */
.anim-stagger > * {
	opacity: 0;
	translate: 0 24px;
}
.anim-stagger.is-inview > * {
	opacity: 1;
	translate: none;
	transition: opacity .8s ease, translate .8s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i, 0) * .15s);
}
/* pop：1つ目（文字）は弾むように拡大、2つ目以降（三角）は上から降りる */
.anim-pop > * {
	opacity: 0;
}
.anim-pop > :first-child {
	scale: .8;
}
.anim-pop > :not(:first-child) {
	translate: 0 -16px;
}
.anim-pop.is-inview > * {
	opacity: 1;
	scale: none;
	translate: none;
	transition: opacity .6s ease, scale .7s cubic-bezier(.34, 1.56, .64, 1), translate .7s cubic-bezier(.34, 1.56, .64, 1);
	transition-delay: calc(var(--i, 0) * .25s);
}
/* reveal：上から下へ読み取るように表示 */
.anim-reveal {
	clip-path: inset(0 0 100% 0);
}
.anim-reveal.is-inview {
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1);
}
/* fadedown：上から少し降りてくるように表示 */
.anim-fadedown {
	opacity: 0;
	translate: 0 -30px;
}
.anim-fadedown.is-inview {
	opacity: 1;
	translate: none;
	transition: opacity 1s ease, translate 1.2s cubic-bezier(.22, 1, .36, 1);
}
/* sharpen：ぼやけた状態から左から順に鮮明にする */
.anim-sharpen > * {
	opacity: 0;
	filter: blur(8px);
}
.anim-sharpen.is-inview > * {
	opacity: 1;
	filter: none;
	transition: opacity .8s ease, filter 1s ease;
	transition-delay: calc(var(--i, 0) * .18s);
}
/* lightup：暗い状態から1つずつ照らされるように明るくする */
.anim-lightup > * {
	opacity: .5;
	filter: brightness(.2);
}
.anim-lightup.is-inview > * {
	opacity: 1;
	filter: none;
	transition: opacity .8s ease, filter .8s ease;
	transition-delay: calc(var(--i, 0) * .25s);
}
@media (prefers-reduced-motion: reduce) {
	.anim,
	.anim > * {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}