@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* 基本の黄緑 #7FBE26; */
/* 基本の赤 #C11A29; */
html {
	scroll-behavior: smooth;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height: 1.75;
	font-size: clamp(0.95rem, 3vw, 1.05rem);
}
small {
	font-size: 80%;
}
label, input[type=checkbox] {
	cursor: pointer;
}
a {
	color: #39C;
	text-underline-offset: calc(1em / 6);
	transition: .2s;
}
body {
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: subpixel-antialiased;
	animation: fadeIn .5s ease 0s 1 normal;
}
@keyframes fadeIn {
	0% { opacity: 0; }
	25% { opacity: 0; }
	100% { opacity: 1; }
}
@media (orientation: portrait) {
	body:has(#navi_switch:checked) {
		overflow: hidden;
	}
}
/* ==================== ヘッダー ==================== */
@media (min-width: 50.001rem) {
	header {
		width: 100%;
		height: 9rem;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 min(2.5vw, 1rem) 0 min(5vw, 2.5rem);
		border-top: solid 0.5rem #7FBE26;
		position: relative;
	}
	header h1 img {
		width: 25rem;
		height: auto;
	}
	header nav > ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap:1rem;
	}
	header nav > ul > li {
		list-style: none;
		transition: .2s;
	}
	header nav > ul > li > a:any-link {
		display: flex;
		width: 6rem;
		height: 6rem;
		border: solid thin #7FBE26;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		text-align: center;
		line-height: 1.25;
		color: #7FBE26;
	}
	header nav > ul > li:nth-child(2) > a:any-link {
		color: white;
		background: #7FBE26;
	}
	header label img {
		transform: scale(66.67%);
		transition: .2s;
	}
	@media (orientation: landscape) {
		header nav > ul > li > a:hover {
			filter: brightness(120%);
		}
		header label img:hover {
			filter: brightness(120%);
		}
	}
}
@media (max-width: 50rem) {
	header {
		flex-direction: column;
		padding-inline: 0;
		height: 7.5rem;
		border-top: solid 0.5rem #7FBE26;
	}
	header h1 {
		width: 100%;
		height: 4rem;
		display: flex;
		align-items: center;
		padding-inline: 2.5vw;
	}
	header h1 a img {
		width: 30rem;
		max-width: 90%;
	}
	header nav {
		height: 3rem;
	}
	header nav > ul {
		display: flex;
		justify-content: space-between;
		border-top: solid 2px #7FBE26;
	}
	header nav > ul > li {
		list-style: none;
		height: calc(3rem - 2px);
	}
	header nav > ul > li:nth-child(1) {
		width: calc((100% - 4rem) / 2);
	}
	header nav > ul > li:nth-child(2) {
		width: calc((100% - 4rem) / 2);
	}
	header nav > ul > li:nth-child(3) {
		width: 4rem;
	}
	header nav > ul > li:nth-child(1) a:any-link {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		text-decoration: none;
		color: #7FBE26;
	}
	header nav > ul > li:nth-child(1) a br {
		display: none;
	}
	header nav > ul > li:nth-child(2) a:any-link {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		text-decoration: none;
		color: white;
		background: #7FBE26;
	}
	header nav > ul > li label img {
		transform: scale(48%);
	}
}

header input[type=checkbox] {
	position: absolute;
	top: 4.2rem;
	right: 2.5rem;
	z-index: 9;
	transform: scale(4);
	opacity: 0;
	-webkit-tap-highlight-color: rgba(255,255,255,0);
}
@media (max-width: 50rem) {
	header input[type=checkbox] {
		top: 5.5rem;
		right: 1.5rem;
	}
}
header input[type=checkbox]:checked {
	position: fixed;
	top: calc(5vh + 1.5rem);
	right: calc(5vw + 1.5rem);
}
header nav > ul > li ul {
	position: fixed;
	top: 5vh;
	left: -100%;
	width: 90%;
	height: 90vh;
	z-index: 8;
	background: rgba(255,255,255,1);
	padding-top: clamp(3.5rem, 10vw, 5rem);
	padding-bottom: 10vh;
	transition: .5s;
	overflow-y: scroll;
}
header nav > ul > li ul::before {
	content: '';
	width: clamp(1.75rem, 5vw, 2.5rem);
	height: clamp(1.75rem, 5vw, 2.5rem);
	background: url(./img/menu_close.svg) center center no-repeat;
	background-size: contain;
	position: absolute;
	top: 1rem;
	right: min(2.5vw, 1rem);
}


header nav > ul > li ul li {
	list-style: none;
	width: calc(100% - 10vw);
	margin: 0 auto;
}
header nav > ul > li ul li:first-child {
	border-top: solid thin #222;
}
header nav > ul > li ul li a {
	display: block;
	text-decoration: none;
	padding: 0.75rem 1rem;
	border-bottom: solid thin #333;
	line-height: 1.5;
	color: #222;
}
header nav > ul > li input:checked + ul {
	left: 5%;
}
/* ==================== セクション共通 ==================== */
section {
	padding-block: min(10vw, 5rem);
}
section:nth-of-type(even) {
	background: #f3f8f9;
}
section > * {
	width: 75rem;
	max-width: calc(100% - 10vw);
	margin-inline: auto;
}
section h3 {
	font-size: clamp(1.25rem, 5vw, 2rem);
	position: relative;
	font-weight: 600;
	
	margin-block: 0.001rem 2rem;
	line-height: 1.5;
}
section h3::before {
	content: '';
	display: block;
	width: 3rem;
	height: 0.3em;
	background: #C11A29;
	position: absolute;
	top: -1rem;
}
section h4 {
	font-size: clamp(1.125rem, 4vw, 1.75rem);
	position: relative;
	font-weight: 600;
	display: flex;
	line-height: 1.5;
	margin: min(3vw, 1.5rem) auto;
	gap: 0.25em;
}
section h4::before {
	content: '━';
	color: #C11A29;
	letter-spacing: 0;
	flex: none;
	width: 2rem;
}
p + h4,
ul + h4,
dl + h4,
ol + h4,
table + h4,
figure + h4,
div + h4 {
	margin-top: min(8vw, 4rem);
}
section h5 {
	font-size: clamp(1rem, 3vw, 1.125rem);
	font-weight: 600;
}
img {
	display: block;
}
/* ==================== タイトル部分 ==================== */
#block0 {
	display: flex;
	justify-content: center;
	background: url(./img/bg.jpg) center center no-repeat, linear-gradient(to bottom, #008080, #F3F8F9);
	background-size: cover;
}
#block0 h2 {
	width: fit-content;
	display: flex;
	align-items: flex-end;
	gap: 1rem 1rem;
	flex-wrap: wrap;
	padding: min(10vw, 5rem) auto;
}
#block0 h2 img {
	width: min(60vw, 32rem);
	height: auto;
}
#block0 h2 span {
	color: white;
	font-size: min(3.75vw, 1.75rem);
	padding-bottom: 0.5em;
}
/* ==================== HuPEX®網羅型タンパク質アレイ受託解析サービスとは？ ==================== */
#block1 > * + * {
	margin-top: 2.5rem;
}
#block1 p em {
	font-weight: 600;
	font-size: clamp(1.125rem, 4vw, 1.5rem);
}
#block1 figure {
	display: grid;
	grid-template-columns: auto auto;
	width: 75rem;
	max-width: calc(100% - 10vw);
	gap: min(5vw, 2.5rem);
}
#block1 figure img {
	width: 539px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
#block1 figure figcaption p + p {
	margin-top: 0.75rem;
}
@media (max-width: 65rem) {
	#block1 figure {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: min(5vw, 2.5rem);
	}
}
@media (max-width: 50rem) {
	#block1 > p br {
		display: none;
	}
}
/* ==================== タンパク質アレイの特徴 ～他のタンパク質アレイとの違い～ ==================== */
#block2 h3 small {
	font-size: smaller;
	display: inline-block;
}
#block2 figure:nth-of-type(1) {
	margin: 1.5rem auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#block2 figure:nth-of-type(1) img {
	max-width: 100%;
}
#block2 figure:nth-of-type(1) figcaption {
	font-size: min(2.9vw, 1rem);
}
#block2 figure:nth-of-type(2) {
	display: grid;
	grid-template-columns: auto auto;
	width: 75rem;
	max-width: calc(100% - 10vw);
	gap: min(5vw, 2.5rem);
}

#block2 figure:nth-of-type(2) img {
	width: 407px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
@media (max-width: 65rem) {
	#block2 figure:nth-of-type(2) {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: min(5vw, 2.5rem);
	}
}
/* ==================== 自己抗体が、疾患マーカー・原因となる代表的な病気 ==================== */
#block3 dl {
	display: flex;
	margin-top: 2rem;
	gap: 1.5rem 2.5rem;
}
#block3 dl dt {
	white-space: nowrap;
	color: white;
	background: #C11A29;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.25em 3em;
	font-size: clamp(1.05rem, 3vw, 1.25rem);
	position: relative;
}
#block3 dl dt::after {
	content: '';
	display: block;
	width: 1.4rem;
	height: 2rem;
	position: absolute;
	top: calc(50% - 1rem);
	right: -1rem;
	box-sizing: border-box;
	border-top: solid 1rem rgba(255,255,255,0);
	border-right: none;
	border-bottom: solid 1rem rgba(255,255,255,0);
	border-left: solid 1.4rem #C11A29;
}
#block3 dl dd {
	background: white;
	padding: min(2.5vw, 1.5rem);
}
@media (max-width: 50rem) {
	#block3 dl {
		flex-direction: column;
	}
	#block3 dl dt::after {
		width: 1rem;
		height: 1rem;
		top: calc(clamp(1.05rem, 3vw, 1.25rem) * 1.667);
		right: calc(50% - 1rem);
		border-top: solid 1.4rem #C11A29;
		border-right: solid 1rem rgba(255,255,255,0);
		border-bottom: none;
		border-left: solid 1rem rgba(255,255,255,0);
	}
}
/* ==================== HuPEX®網羅型タンパク質アレイ受託解析サービスの内容について ==================== */
#block4 table {
	border-collapse: collapse;
	border: solid thin #CCC;
	width: calc(100% - 10vw);
	margin-inline: auto;
	max-width: 70rem;
}
#block4 table thead tr th {
	background: #818181;
	color: white;
	border: solid thin #CCC;
	text-align: center;
	padding: 0.125rem 0;
	font-size: clamp(0.9rem, 3vw, 1rem);
}
#block4 table tbody tr :where(th,td) {
	border: solid thin #CCC;
	padding: 1rem min(2.5vw, 1rem);
	font-size: clamp(0.9rem, 3vw, 1rem);
	word-break: break-all;
}
#block4 table tbody tr th {
	text-align: left;
	white-space: nowrap;
}
@media (max-width: 45rem) {
	#block4 table tbody tr th {
		white-space: normal;
		min-width: 20vw;
	}
}
#block4 > ul.file_dl {
	display: flex;
	gap: 1rem;
	width: 70rem;
}
#block4 > ul.file_dl li {
	list-style: none;
	width: calc(100% / 3);
}
#block4 > ul.file_dl li a:any-link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 3.5rem;
	font-size: clamp(1rem, 3vw, 1.125rem);
	border: solid medium #C11A29;
	border-radius: 3em;
	text-decoration: none;
	background: #C11A29;
	color: white;
	margin: 0 auto;
	gap: 0.5em;
}
@media (orientation: landscape) {
	#block4 > ul.file_dl li a:hover {
		filter: brightness(150%);
	}
}
#block4 > ul.file_dl li a::after {
	content: '';
	display: block;
	width: 1.25em;
	height: 1.25em;
	background: url(./img/icon_dl_w.svg) center center no-repeat;
	background-size: contain;
}
@media (max-width: 75rem) {
	#block4 > ul.file_dl {
		flex-direction: column;
		align-items: center;
		margin-top: 5vw;
	}
	#block4 > ul.file_dl li {
		list-style: none;
		width: 25rem;
		max-width: calc(100% - 5vw);
	}
	#block4 > ul.file_dl li a:any-link {
		height: 4.5rem;
	}
}
#block4 div.result {
	display: flex;
	width: 65rem;
	gap: 2.5rem;
}
#block4 div.result > * {
	width: 50%;
	margin-inline: auto;
}
#block4 div.result ul {
	padding-top: 5rem;
}
#block4 div.result ul li {
	list-style: none;
	margin: 1.5rem 0 1.5rem;
}
#block4 div.result ul li a:any-link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 22rem;
	height: 3.5rem;
	font-size: clamp(1rem, 3vw, 1.125rem);
	border: solid medium #C11A29;
	border-radius: 3em;
	text-decoration: none;
	color: #C11A29;
	margin: 0 auto;
}
@media (orientation: landscape) {
	#block4 div.result ul li a:hover {
		filter: brightness(150%);
	}
}
@media (max-width: 60rem) {
	#block4 div.result {
		flex-direction: column;
		gap: 0;
		max-width: calc(100% - 10vw);
	}
	#block4 div.result > * {
		padding: 0 !important;
		margin: 0 auto;
		width: 100%;
	}
	#block4 div.result ul li {
		max-width: 100%;
		margin-bottom: 0;
	}
	#block4 div.result > img {
		width: 90%;
		max-width: 30rem;
	}
	#block4 div.result ul li a {
		max-width: 100%;
	}
}
#block4 h5 {
	width: 70rem;
}
#block4 h5 span {
	background: #C11A29;
	color: white;
	display: inline-block;
	font-size: 0.8em;
	padding: 0.1em 0.5em;
	margin-left: 1em;
}
#block4 ul.image {
	display: flex;
	gap: 2rem;
	width: 70rem;
	margin: 1.5rem auto;
}
#block4 ul.image li {
	width: 25%;
	list-style: none;
	border: solid thin #999;
	aspect-ratio: 1/1;
	overflow: hidden;
}
#block4 ul.image li figure img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
#block4 ul.image li figure figcaption {
	height: 2rem;
	padding: 0.5rem;
	line-height: 1.25;
	text-wrap: pretty;
	font-size: clamp(0.9rem, 3vw, 1rem);
}
#block4 ul.image + * {
	margin-top: min(5vw, 2.5rem);
	width: 70rem;
}
@media (max-width: 75rem) {
	#block4 ul.image {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: min(2.5vw, 1rem);
		justify-content: center;
		align-content: center;
	}
	#block4 ul.image li {
		width: 16rem;
		height: 16rem;
		max-width: 45vw;
		max-height: 45vw;
	}

}
#block4 ul.data {
	display: flex;
	width: 70rem;
	gap: 2rem;
	margin-block: 0.5rem min(10vw, 5rem);
}
#block4 ul.data li {
	list-style: none;
	border: solid thin #999;
	width: 17rem;
}
#block4 ul.data li a:any-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #222;
	text-decoration: none;
	padding: 0.5rem 1rem;
}
@media (orientation: landscape) {
	#block4 ul.data li a:hover {
		box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0,0.05);
	}
}
#block4 ul.data li a span {
	line-height: 1.5;
	flex-grow: 1;
}
#block4 ul.data li a::before {
	content: '・';
	width: 1rem;
	height: 1rem;
	flex: none;
	position: relative;
	top:-1rem;

}
#block4 ul.data li a::after {
	content: '';
	width: 2rem;
	height: 3rem;
	background: url(./img/icon_xls.svg) center center no-repeat;
	background-size: contain;
	flex: none;
}

@media (max-width: 60rem) {
	#block4 p:has(+ ul.data) {
		text-align: center;
		margin-bottom: 1rem;
	}
	#block4 ul.data {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	#block4 ul.data li {
		width: 20rem;
	}
	#block4 ul.data li br {
		display: none;
	}
	#block4 ul.data li a::before {
		top: -0.3rem;
	}
}


#block4 > figure {
	width: 70rem;
}

#block4 > figure table {
	width: 100%;
	margin-bottom: 1rem;
	border: none;
	border-bottom: solid thin #999;
}

#block4 > figure table tbody tr :where(th,td) {
	border: none;
}
#block4 > figure table tbody tr:nth-child(even) {
	background: #FFF3F3;
}

#block4 > figure table tbody tr th {
	border-right: solid thin #999;
}
#block4 > figure table + figcaption {
	margin-top: 1.5rem;
}
#block4 > figure table + figcaption ul li {
	list-style: none;
	line-height: 1.5;
	margin-top: 0.75rem;
	font-size: clamp(0.95rem, 3vw, 1rem);
}
/* ==================== 測定原理 ==================== */
#block5 ul {
	display: flex;
	gap: 1rem 3rem;
	margin-bottom: 2rem;
}

#block5 ul li {
	width: calc(100% / 3);
	list-style: none;
}
#block5 ul li figure {
	width: 100%;
}
#block5 ul li figure figcaption {
	text-align: center;
	font-weight: 600;
	padding-bottom: 0.5rem;
}
#block5 ul li figure img {
	width: 100%;
	height: auto;
	border: solid thin #999;
}
@media (max-width: 70rem) {
	#block5 ul {
		flex-direction: column;
	}
	#block5 ul li {
		width: 100%;
		max-width: 30rem;
		margin-inline: auto;
		margin-bottom: 0.5rem;
	}
	#block5 ul li figure figcaption {
		text-align: left;
	}
}
/* 測定手順 */
#block5 ol {
	width: 70rem;
}
#block5 ol li {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	height: 4.5rem;
	border: solid medium #C11A29;
	margin-top: 2rem;
	border-radius: 3rem;
	background: white;
	font-size: clamp(1rem, 3vw, 1.125rem);
	line-height: 1.25;
	padding-right: 1rem;
}
#block5 ol li span {
	font-size: 1rem;
	width: 4.5rem;
	height: 4.5rem;
	background: #C11A29;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: white;
	line-height: 1.1;
	position: relative;
	left: -3px;
	flex: none;
}
#block5 ol li span em {
	font-size: 1.75em;
	line-height: 1.1;
}
@media (max-width: 40rem) {
	#block5 ol {
		gap: 2.5vw;
	}
	#block5 ol li {
		height: 6rem;
		border: solid thin #C11A29;
		border-radius: 0;
		margin-top: 1rem;
		gap: 1.5vw;
		line-height: 1.5;
	}
	#block5 ol li span {
		left: 1vw;
		transform: scale(85%);
	}
}
/* ==================== オーダー方法について ==================== */
#block6 #div_6_1 {
	margin-block: min(5vw, 2.5rem);
}
#block6 #div_6_1 a:any-link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 22rem;
	max-width: 100%;
	height: 3.5rem;
	font-size: clamp(1rem, 3vw, 1.125rem);
	border: solid medium #C11A29;
	border-radius: 3em;
	text-decoration: none;
	color: #C11A29;
	margin: 0 auto;
	gap: 0.5em;
	position: relative;
	padding-right: 2em;
}
@media (orientation: landscape) {
	#block6 #div_6_1 a:hover {
		filter: brightness(150%);
	}
}
#block6 #div_6_1 a::after {
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	background: url(./img/icon_dl.svg) center center no-repeat;
	background-size: contain;
	position: absolute;
	top: 0.75rem;
	right: 1rem;
}
#block6 #div_6_2 {
	display: flex;
	gap: 1rem;
}
#block6 #div_6_2 figure {
	width: 48%;
	border: solid thin #666;
}
#block6 #div_6_2 > div {
	width: 4%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#block6 #div_6_2 > div img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
#block6 #div_6_2 figure figcaption {
	background: #666;
	color: white;
	padding: 0.125em 0;
	text-align: center;
	font-size: clamp(1rem, 3vw, 1.125rem);
}
#block6 #div_6_2 figure img {
	width: 100%;
	border: solid min(5vw, 2.5rem) white;
	height: auto;
}
#block6 #div_6_2 figure ul {
	margin: 0;
	width: 100%;
	height: calc(100% - 3rem);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1rem;
}
#block6 #div_6_2 figure ul li {
	list-style: none;
}
#block6 #div_6_2 figure ul li a:any-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 28rem;
	max-width: calc(100% - 5vw);
	height: 3.5rem;
	font-size: clamp(1rem, 3vw, 1.125rem);
	border: solid medium #C11A29;
	border-radius: 3em;
	text-decoration: none;
	color: #C11A29;
	margin: 0 auto;
	gap: 0.5em;
	position: relative;
	padding-right: 2em;
}
@media (orientation: portrait) {
	#block6 #div_6_2 figure ul li a:any-link {
			height: 4rem;
			line-height: 1.5;
		}
}
@media (orientation: landscape) {
	#block6 #div_6_2 figure ul li a:any-link br {
		display: none;
	}
	#block6 #div_6_2 figure ul li a:hover {
		filter: brightness(150%);
	}
}
#block6 #div_6_2 figure ul li a::after {
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	background: url(./img/icon_dl.svg) center center no-repeat;
	background-size: contain;
	position: absolute;
	top: 0.75rem;
	right: 1rem;
}
@media (max-width: 70rem) {
	#block6 #div_6_2 {
		flex-direction: column;
		margin-top: 2.5rem;
	}
	#block6 #div_6_2 figure {
		width: 100%;
		max-width: 30rem;
		margin-inline: auto;
		border: solid 2px #666;
	}
	#block6 #div_6_2 figure ul {
		margin-block: 2rem;
	}
	#block6 #div_6_2 figure ul li a:any-link {
		width: 25rem;
		max-width: 80vw;
	}
	#block6 #div_6_2 > div {
		width: 100%;
	}
	#block6 #div_6_2 > div img {
		width: 2.1rem;
		height: 2.1rem;
	}
}
#block6 #div_6_3 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: min(5vw, 2.5rem) auto;
}
#block6 #div_6_3 img {
	width: auto;
	height: clamp(3.75rem, 10vw, 5rem);
}
#block6 #div_6_3 + figure {
	border: solid thin #666;
}
@media (max-width: 70rem) {
	#block6 #div_6_3 + figure {
		border: solid 2px #666;
	}
}
#block6 #div_6_3 + figure figcaption {
	background: #666;
	color: white;
	padding: 0.125em 0;
	text-align: center;
	font-size: clamp(1rem, 3vw, 1.125rem);
}
#block6 #div_6_3 + figure address {
	padding: 1rem min(5vw, 2.5rem);
}
#block6 #div_6_3 + figure address span {
	color: #C11A29;
}
/* ==================== details要素 ==================== */
.accordion {
	overflow: hidden;
}
details summary {
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: rgba(255,255,255,0);
}
details summary::-webkit-details-marker {
	display: none;
}
/* ==================== HuPEX®網羅型タンパク質アレイ・カスタム型タンパク質アレイの活用例 ==================== */
#block7 details {
	width: 70rem;
	max-width: calc(100% - 10vw);
	margin: 1.5rem auto;
	background: white;
	transition: .2s;
}
#block7 details[open] {
	box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0,0.05);
}
@media (orientation: landscape) {
	#block7 details:hover {
		box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0,0.05);
	}
}
#block7 details[open] + details {
	margin-top: 3rem;
}
#block7 details summary {
	display: flex;
	gap: min(1vw, 1rem);
	padding: min(1vw, 1rem);
	align-items: center;
	font-size: clamp(1rem, 3.2vw, 1.25rem);
	line-height: 1.5;
	font-weight: 500;
	width: 100%;
	position: relative;
	padding-right: min(9vw, 5rem);
}
#block7 details summary span {
	display: flex;
	width: 4rem;
	height: 4rem;
	color: white;
	background: #C11A29;
	border-radius: 50%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 0.5;
	padding-top: 1em;
	font-size: 1rem;
	flex: none;
}
#block7 details summary span em {
	font-size: 1.5rem;
}
@media (orientation: portrait) {
	#block7 details summary span {
		transform: scale(85%);
	}
}
#block7 details summary::after {
	content: '╋';
	flex: none;
	position: absolute;
	top: 2rem;
	right: min(4vw, 2rem);
}
@media (orientation: portrait) {
	#block7 details summary::after {
		top: 1.5rem;
	}
}
#block7 details[open] summary::after {
	content: '━';
}
#block7 details div.content {
	border: solid thin white;
	padding: 0 min(2.5vw, 1rem);
}

#block7 details h6 {
	font-size:clamp(1rem, 3vw, 1.125rem);
	color: white;
	background: #333;
	padding: 0.75em 0.5em;
	line-height: 1;
	margin: 1rem 0;
}
#block7 details h6:nth-of-type(1)::before {
	content: '■ ';
}
#block7 details h6:nth-of-type(2)::before {
	content: '◎ ';
}
#block7 details dl {
	padding: 0.5rem 0 1rem;
}
#block7 details dl > div {
	background: #FdF6F3;
	margin: 1rem 0;
	padding: 1rem min(2.5vw, 1rem);
}
#block7 details dl > div dt {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: clamp(1.125rem, 3.5vw, 1.25rem);
	font-weight: 500;
	margin-bottom: 0.5rem;
	line-height: 1.5;
}
#block7 details dl > div dt::before {
	content: '';
	width: clamp(2rem, 7.5vw, 6rem);
	height: 2rem;
	background: url(./img/icon_yajirushi.svg) center center no-repeat;
	background-size: contain;
	flex: none;
}
#block7 details dl > div dd {
	margin-left: 7rem;
}
@media (max-width: 60rem) {
	#block7 details dl > div dd {
		margin-left: 0;
		margin-top: 1rem;
	}
}
#block7 details > div ul {
	margin: 1rem 0;
}
#block7 details > div ul li {
	margin: 0.5rem 0 0.5rem 1.25rem;
}
#block7 details > div ul li::marker {
	content: '⚫︎';
	color: #666;
}
#block7 details > div blockquote {
	border: solid thin #333;
	padding: 0.5rem min(2.5vw, 1rem);
	margin: 1rem 0 min(5vw, 2.5rem);
	word-spacing: 0.25em;
}
#block7 details > div blockquote em {
	font-weight: 500;
}
/* ==================== よくあるご質問 ==================== */
#block8 h5 {
	margin: 2rem auto 0.5rem;
}
#block8 details {
	border-left: solid thin #333;
	border-bottom: solid thin #333;
	border-right: solid thin #333;
}
#block8 h5 + details {
	border-top: solid thin #333;
}
#block8 details summary {
	padding: 1.25rem 2.5rem 1.25rem min(11vw, 5rem);
	position: relative;
	transition: .2s;
}
#block8 details summary::after {
	content: '╋';
	flex: none;
	position: absolute;
	top: 1.25rem;
	right: min(4vw, 2rem);
}
#block8 details[open] summary::after {
	content: '━';
}
#block8 details summary::before {
	content: 'Q';
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1;
	color: #C11A29;
	position: relative;
	top: -0.1em;
	position: absolute;
	top: 1.25rem;
	left: min(2.5vw, 1.25rem);
}
#block8 details[open] summary {
	background: #FdF6F3;
}
@media (orientation: landscape) {
	#block8 details summary:hover {
		background: #FdF6F3;
	}
}
#block8 details div.content {
	padding: 0;
	padding-left: min(10vw, 5rem);
	padding-right: min(3.33vw, 1rem);
	position: relative;
	transition: .2s;
}
#block8 details div.content > *:first-child {
	padding-top: 1.25rem;
}
#block8 details div.content > *:last-child {
	padding-bottom: min(5vw, 2.5rem);
}
#block8 details div.content::before {
	content: 'A';
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1;
	color: blue;
	position: relative;
	top: -0.1em;
	position: absolute;
	top: 1.25rem;
	left: min(3.33vw, 1.25rem);
}
#block8 details div.content ol li,
#block8 details div.content ul li {
	margin-left: 1.5rem;
	line-height: 1.5;
}
#block8 details div.content ol li + li,
#block8 details div.content ul li + li {
	margin-top: 0.5rem;
}
#block8 details div.content ul,
#block8 details div.content address {
	margin-top: 2rem;
}
/* ==================== 論文情報 ==================== */
#block9 dl {
	width: 60rem;
	max-width: calc(100% - 10vw);
	margin: 0 auto;
}
#block9 dl div {
	display: flex;
	border: solid medium #C11A29;
	border-radius: 5rem;
	transition: .2s;
	overflow: hidden;
	width: 100%;
}
#block9 dl div + div {
	margin-top: 1.5rem;
}
#block9 dl div dt {
	width: 35rem;
	text-align: center;
	font-size: clamp(1.125rem, 3.5vw, 1.25rem);
	font-weight: 500;
	background: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.5;
}
#block9 dl div dd {
	width: 25rem;
	color: white;
	background: #C11A29;
	padding: 0.25rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#block9 dl div dd a:any-link {
	color: white;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-weight: 500;
}
@media (orientation: landscape) {
	#block9 dl div:has(a:hover) {
		filter: brightness(120%);
	}
	#block9 dl div dt br {
		display: none;
	}
}
@media (max-width: 65rem) {
	#block9 dl {
		width: 40rem;
	}
	#block9 dl div {
		flex-direction: column;
		border-radius: 1rem;
		border: solid 2px #C11A29;
	}
	#block9 dl div dt {
		width: 100%;
		height: 5rem;
		
	}
	#block9 dl div dd {
		width: 100%;
		height: 5rem;
	}
}
/* ==================== お問い合わせ ==================== */
#block10 div {
	width: 50rem;
	max-width: calc(100% - 20vw);
	margin-inline: auto;
}
#block10 div a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 5rem;
	border: solid medium #C11A29;
	margin: 0 auto;
	border-radius: 3rem;
	background: #C11A29;
	color: white;
	text-decoration: none;
	font-size: clamp(0.95rem, 3vw, 1.25rem);
	font-weight: 500;
	line-height: 1.5;
}
@media (orientation: landscape) {
	#block10 div a br {
		display: none;
	}
	#block10 div a:hover {
		filter: brightness(120%);
	}
}
#block10 p {
	display: flex;
	justify-content: center;
	margin: 2rem auto;
	width: fit-content;
	font-size: clamp(1.05rem, 3vw, 1.125rem);
}
#block10 ul {
	width: 50rem;
	max-width: calc(100% - 20vw);
	margin-inline: auto;
	display: flex;
	gap: 1rem;
}
#block10 ul li {
	width: calc(100% / 3);
	list-style: none;
}
#block10 ul li a:any-link {
	color: white;
	background: #7FBE26;
	width: 100%;
	height: 3.5rem;
	border-radius: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(1.05rem, 3vw, 1.125rem);
	text-decoration: none;
	font-weight: 500;
	gap: 0.75rem;
}
@media (orientation: landscape) {
	#block10 ul li a:hover {
		filter: brightness(120%);
	}
}
#block10 ul li:nth-child(1) a::before {
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	background: url(./img/icon_tel.svg) center center no-repeat;
	background-size: contain;
}
#block10 ul li:nth-child(2) a::before {
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	background: url(./img/icon_fax.svg) center center no-repeat;
	background-size: contain;
}
#block10 ul li:nth-child(3) a::before {
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	background: url(./img/icon_mail.svg) center center no-repeat;
	background-size: contain;
}
@media (max-width: 60rem) {
	#block10 ul {
		flex-direction: column;
	}
	#block10 ul li {
		width: 100%;
	}
}
/* ==================== フッター ==================== */
footer {
	background: #7FBE26;
	padding: min(8vw, 4rem) 0;
}
footer div {
	background: white;
	border-radius: 3rem;
	width: fit-content;
	max-width: calc(100% - 20vw);
	margin: 0 auto;
}
footer div a:any-link {
	color: white;
	background: #7FBE26;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30rem;
	max-width: 100%;
	height: 4rem;
	border: solid 2px white;
	border-radius: 3rem;
	margin: 0 auto;
	font-size: clamp(0.95rem, 3vw, 1.125rem);
	text-decoration: none;
	font-weight: 500;
}
@media (orientation: landscape) {
	footer div a:hover {
		filter: brightness(120%);
	}
}
@media (orientation: portrait) {
	footer div a:any-link {
			border: solid 2px white;
			height: 3rem;
	}
}
footer p {
	color: white;
	text-align: center;
	margin-top: 4rem;
	font-size: clamp(0.95rem, 2.9vw, 1rem);
}


#side_navi {
	position: fixed;
	top: 0;
	right: min(2.5vw, 3rem);
	height: 100dvh;
	mix-blend-mode: multiply;
	z-index: 5;
}

#side_navi {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: min(2.5vw, 1.25em);
	margin: auto;
	height: 100%;
}
#side_navi li {
	width: min(5vw, 1.5rem);
	height: min(5vw, 1.5rem);
	background: #7FBE26;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0.5;
	
}
#side_navi li a:any-link {
	border: solid 0.25em #7FBE26;
	color: rgba(255,255,255,0);
	border-radius: 50%;
	display: block;
	width: 100%;
	height: 100%;
	transition: .2s;
}
#side_navi li a.current {
	background: white;
}