@charset "utf-8";

/* 白基調・単一テーマ（ビューアのテーマに関わらず白で表示されます） */
:root {

	/* Cerebro Pharma Color System */
	--cerebro-blue: #2368bd;
	--cerebro-blue1: #213f68;
	--cerebro-blue2: #192c49;
	--cerebro-accent: #39c3c3;
	--cerebro-accent1: #a1eee9;
	--cerebro-white: #ffffff;
	--cerebro-white1: #f7f7f7;
	--cerebro-white2: #dcdcdc;
	--cerebro-black: #000000;
	--cerebro-black1: #292929;
	--cerebro-black2: #3d3d3d;
	--cerebro-black3: #7c7c7c;

	--cerebro-background-white: var(--cerebro-white1);
	--cerebro-background-black: var(--cerebro-black2);
	--cerebro-background-deepblack: var(--cerebro-black1);

	--cerebro-text-black: var(--cerebro-black2);
	--cerebro-text-point: var(--cerebro-blue);
	--cerebro-text-white: var(--cerebro-white);
	--cerebro-text-accent: var(--cerebro-accent);

	/* Default Setting */
	color-scheme: light;
	--paper: var(--cerebro-background-white);
	--surface: var(--cerebro-white);
	--surface-2: var(--cerebro-white);
	--band: #fafcfd;
	--ink: #0e1c26;
	--ink-2: #2e4250;
	--muted: #5e7180;
	--line: #e7edf1;
	--line-strong: #cedae2;
	--brand: var(--cerebro-text-point);
	--brand-2: var(--cerebro-text-point);
	--accent: var(--cerebro-text-point);
	--accent-soft: #e9f5f3;
	--signal: #b4651b;
	--signal-soft: #fbf2e8;
	--shadow: 0 2px 4px rgba(0, 0, 0, .2);
	--serif: "STIX Two Text", "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--sans: "Manrope", "Zen Kaku Gothic Antique", system-ui, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
	--mono: "SF Mono", ui-monospace, "Zen Kaku Gothic Antique", system-ui, Menlo, monospace;
	--measure: 34rem;

	--head-top: clamp(30px, 5vw, 80px);
	--head-height: clamp(52px, 5vw, 60px);

	--button-shadow: 0 -2.5px 10px rgba(35, 104, 189, 0), 0 5px 30px rgba(57, 195, 195, 0);
	--button-shadow-hover: 0 -2.5px 10px rgba(35, 104, 189, .075), 0 5px 30px rgba(57, 195, 195, .15);

	--grid-autofit: repeat(auto-fit, minmax(350px, 1fr))
}

html {
	width: 100%;
	overflow-x: hidden;
	color-scheme: light;
	min-width: 320px;
}

[hidden] {
	display: none !important
}

.hidden {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	font-size: 0;
	visibility: hidden;
	pointer-events: none
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

*::before,
*::after {
	pointer-events: none;
}

body {
	width: 100%;
	overflow-x: clip;
	margin: 0;
	background: var(--cerebro-white) url(./images/bkg_pattern.svg) 50% 0 repeat;
	background-size: 2px 2px;
	color: var(--cerebro-text-black);
	font-family: var(--sans);
	font-size: clamp(15px, 2.5vw, 16px);
	line-height: 1.8;
	/* -webkit-font-smoothing: antialiased; */
	font-feature-settings: "palt" 1;
}

a {
	color: inherit;
	text-decoration: none
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
	line-height: 1.4;
	margin: 0;
}
p {
	margin: 0;
}
img {
	max-width: 100%;
}

.wrap,
.wrap-narrow {
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(18px, 5vw, 40px)
}

.wrap {
	max-width: 1180px
}
.wrap-narrow {
	width: 100%;
	max-width: 860px
}

/* ── header ───────────────────────────── */

.site-head {
	position: relative;
	min-height: calc(var(--head-top) + var(--head-height) + clamp(18px, 5vw, 20px))
}

.head-container {
	position: relative;
	margin: auto;
	padding-top: var(--head-top)
}

.head-container:before {
	content: "";
	position: absolute;
	top: 0;
	left: -330px;
	width: 900px;
	height: clamp(320px, 40vw, 900px);
	background: url(./images/head_effects.webp) 40% 0 no-repeat;
	background-size: contain
}

.head-in {
	position: relative;
}

.brand {
	position: absolute;
	z-index: 100;
	top: 0;
	left: calc(clamp(7px, 1.5vw, 10px) * -1);
	width: clamp(220px, 60vw, 284px);
	height: var(--head-height);
	background: url(./images/logo.svg) 0 50% no-repeat;
	background-size: contain
}

.main-sticky {
	position: sticky;
	z-index: 200;
	top: calc(var(--head-height) + clamp(36px, 5vw, 40px));
	height: 0;
}

nav.main {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	position: absolute;
	right: clamp(18px, 5vw, 40px);
	bottom: clamp(18px, 5vw, 20px);
	height: var(--head-height);
	border: .5px solid rgba(255, 255, 255, .5);
	background: linear-gradient( rgba(255, 255, 255, .5), rgba(255, 255, 255, 1));
	border-radius: 30px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
	backdrop-filter: blur(20px) saturate(180%);
	transition: padding .4s
}

#maintoggle {
	display: none;
	position: relative;
	overflow: hidden;
	width: calc(var(--head-height) - 2px);
	height: calc(var(--head-height) - 2px);
	border: none;
	background: none;
	appearance: none;
	cursor: pointer;
	border-radius: 30px;
	transition: .4s
}

#maintoggle:before,
#maintoggle:after {
	content: "";
	position: absolute;
	inset: calc(50% - 40px);
	width: 80px;
	height: 80px;
	background: 50% 50%/80px 80px no-repeat;
	transition: transform .6s, opacity .3s
}

body.mainopen #maintoggle:before,
body:not(.mainopen) #maintoggle:after {
	opacity: 0;
}

#maintoggle:before {
	background-image: url(./images/hamburger_open.svg)
}

#maintoggle:after {
	background-image: url(./images/hamburger_close.svg)
}

body:not(.mainopen) #maintoggle:after {
	transform: rotate(45deg) scaleY(0)
}

body.mainopen #maintoggle:before {
	transform: rotate(-45deg) scaleY(0)
}

.mainnav-link {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: stretch;
	padding: 9px
}

nav.main a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	font-size: 15px;
	border-radius: 30px;
	transition: color .2s
}

nav.main a:hover {
	color: var(--cerebro-text-point)
}

nav.main a[aria-current="page"] {
	color: var(--cerebro-blue1);
	font-weight: 700;
	background-color: rgba(255, 255, 255, .8);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	cursor: default
}

#overlay {
	display: none;
	position: fixed;
	z-index: 150;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	appearance: none;
	background: linear-gradient(rgba(25, 44, 73, .8), rgba(57, 195, 195, .3));
	transition: opacity .4s
}

/* Old Code */
/*
.site-head {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 40;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid var(--line);
}
.head-in {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 100px;
	flex-wrap: wrap;
	padding-block: 10px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	flex: 0 0 auto;
}
.brand svg {
	display: block;
	flex: 0 0 auto;
}
.brand-name {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 1.06rem;
	letter-spacing: 0.04em;
	color: var(--ink);
}
.brand-sub {
	display: block;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	color: var(--muted);
	line-height: 1.4;
	margin-top: 1px;
}
nav.main {
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	margin-left: auto;
}
nav.main a {
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--ink-2);
	padding: 7px 11px;
	border-radius: 5px;
	white-space: nowrap;
}
nav.main a:hover {
	background: var(--surface-2);
	color: var(--brand);
}
*/

/* ── hero ─────────────────────────────── */
.hero {
	padding: calc(var(--head-height) + clamp(18px, 5vw, 20px) + 140px) 0 60px;
	margin-top: -160px;
	background: url(./images/hero/hero_top.webp) 50% 50% no-repeat;
	background-size: cover
}
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 56px);
	align-items: center;
	position: relative;
	z-index: 1
}

.hero h1 {
	font-size: clamp(36px, 5vw ,48px);
	font-weight: 300;
	line-height: 1.3
}
.hero h1 em {
	font-style: normal;
	color: var(--cerebro-text-point)
}
.hero p.lede {
	margin-top: 20px;
	max-width: 30rem;
	text-wrap: pretty
	
}
.hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 30px;
}

.btn {
	display: inline-flex;
	height: 60px;
	align-items: center;
	gap: 8px;
	padding: 8px;
	font-size: 15px;
	transition: color .2s, background-color .2s;
}

.btn:not(.btn-ghost) {
	padding-inline: 30px;
	font-weight: 700;
	border-radius: 30px;
	color: var(--cerebro-white);
	background: var(--cerebro-blue);
}

.btn:not(.btn-ghost):hover {
	background-color: var(--cerebro-blue1);
	color: var(--cerebro-white)
}

.btn:hover {
	color: var(--cerebro-blue)
}

/* hero figure */
.hero-fig {
	position: relative;
}
.hero-fig figcaption {
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.11em;
	color: var(--muted);
	margin-top: 12px;
	line-height: 1.7;
}

/* ── shared section frames ────────────── */
.section {
	margin-block: clamp(60px, 5vw, 80px);
}

.sec-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.sec-head h2 {
	font-size: clamp(32px, 5vw ,42px);
	font-weight: 300
}
.sec-head .count {
	font-size: 13px;
	font-family: var(--mono);
}
.sec-note {
	max-width: var(--measure);
	margin-top: -14px;
	margin-bottom: 40px;
}

/* ── series ───────────────────────────── */
.series {
	display: grid;
	grid-template-columns: var(--grid-autofit);
	gap: clamp(18px, 5vw, 30px);
}
.series-card {
	background: var(--surface);
	border-radius: 6px;
	padding: clamp(30px, 5vw ,50px) clamp(18px, 5vw, 30px) clamp(20px, 5vw ,40px);
	border: .5px solid var(--cerebro-white2);
	display: flex;
	flex-direction: column;
}
.series-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	font-size: 12px;
	background-color: var(--cerebro-black2);
	color: var(--cerebro-white);
	padding: 4px 9px;
	border-radius: 3px;
	margin-bottom: 14px;
}
.series-card h3 {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	text-wrap: balance;
}
.series-card > p {
	color: var(--cerebro-black3);
	font-size: 14px;
	margin-top: 10px
}
.parts {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	border-top: .5px solid var(--cerebro-white2);
}
.parts li {
	border-bottom: .5px solid var(--cerebro-white2);
}
.parts a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px 2px;
	text-decoration: none
}

.parts a:hover .pt-title {
	color: var(--cerebro-text-point);
}

.pt-num {
	min-width: 24px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}
.pt-title {
	font-size: 15px;
	line-height: 1.6;
	text-wrap: pretty;
	transition: color .2s
}
.pt-date {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--cerebro-black3);
	white-space: nowrap;
}

/* ── Interview List ─────────────────────── */
.interview-parts {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 60px
}

.interview-parts li {
	--parts-width: clamp(350px, 40vw, 480px);
	
	display: flex;
	position: relative;
	z-index: 0;
	flex-direction: row;
	width: calc(100% / 2 + 50vw);
	min-height: 520px;
	background-color: var(--cerebro-white);
}

.interview-parts li:nth-child(odd) {
	border-radius: 5.25px 0 0 5.25px
}

.interview-parts li:nth-child(even) {
	margin-left: calc(-50vw + 550px);
	border-radius: 0 5.25px 5.25px 0
}

.interview-parts .pt-img {
	overflow: hidden;
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: calc(100% - var(--parts-width));
	height: 100%;
	pointer-events: none;
}

.pt-img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s
}

.interview-parts li a:hover + .pt-img img {
	transform: scale(1.025);
}

.interview-parts li:nth-child(even) .pt-img {
	left: 0;
	right: auto
}

.interview-parts li a {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	align-items: baseline;
	justify-content: center;
	width: 100%;
	padding: clamp(40px, 5vw, 60px) clamp(18px, 5vw, 30px);
	border: .5px solid var(--cerebro-white2);
	border-radius: 5px;
	box-shadow: var(--button-shadow);
	transition: box-shadow .4s
}

.interview-parts li a:hover {
	box-shadow: var(--button-shadow-hover);
}

.interview-parts li:nth-child(odd) a {
	padding-right: calc(100% - var(--parts-width) + clamp(18px, 5vw, 30px));
	border-radius: 5px 0 0 5px;
	border-right: none
}

.interview-parts li:nth-child(even) a {
	padding-left: calc(100% - var(--parts-width) + clamp(18px, 5vw, 30px));
	border-radius: 0 5px 5px 0;
	border-left: none
}

.interview-title {
	font-family: var(--serif);
	font-size: clamp(24px, 5vw, 28px);
	line-height: 1.5;
	font-weight: 700;
	text-wrap: balance;
	transition: color .2s
}

.pt-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	margin: 10px 0
}

.interview-parts .series-tag {
	margin: 0
}

.interview-parts li a:hover .interview-title {
	color: var(--cerebro-text-point)
}

.interview-parts .pt-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(48px, 40vw, 60px);
	min-width: clamp(190px, 40vw, 200px);
	padding: 10px 40px;
	margin-top: clamp(18px, 5vw, 30px);
	font-weight: 700;
	color: var(--cerebro-text-point);
	border: 2px solid var(--cerebro-text-point);
	border-radius: 30px
}

.interview-parts .pt-excerpt {
	color: var(--cerebro-black3);
	font-size: 15px;
	margin-top: 10px
}

/* ── article list ─────────────────────── */
.post-list {
	display: grid;
	grid-template-columns: var(--grid-autofit);
	gap: clamp(18px, 5vw, 30px);
	list-style: none;
	margin: 0;
	padding: 0
}

.post-list li {
	display: flex;
}

.post-list[data-length="6"] > li:nth-child(n + 7) {
	display: none !important
}

.post-list a {
	display: flex;
	flex-direction: column;
	padding: clamp(30px, 5vw, 40px) clamp(18px, 5vw, 30px);
	background-color: var(--cerebro-white);
	border: .5px solid var(--cerebro-white2);
	border-radius: 5px;
	box-shadow: var(--button-shadow);
	transition: box-shadow .2s
}

.post-list a:hover {
	box-shadow: var(--button-shadow-hover);
}

.post-list a:hover h3 {
	color: var(--brand-2);
}

.post-meta {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
	margin: 10px 0;
}

.cat {
	display: inline-flex;
    align-items: center;
    gap: 15px;
    align-self: flex-start;
	font-size: clamp(11px, 2.5vw, 12px);
    background-color: var(--cerebro-black2);
    color: var(--cerebro-white);
    padding: 4px 9px;
    border-radius: 3px
}
.date {
	font-family: var(--mono);
	font-size: clamp(11px, 2.5vw, 12px);
	color: var(--cerebro-black3)
}
.post-list h3 {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	transition: color .2s
}
.post-list p {
	color: var(--cerebro-black3);
	font-size: 14px;
	margin-top: 8px;
	max-width: 44rem;
	line-height: 1.85;
}

/* ── key findings table ───────────────── */
.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--cerebro-white2);
	border-radius: 6px;
	background: var(--cerebro-background-white);
}
table.matrix {
	border-collapse: collapse;
	width: 100%;
	min-width: 560px;
	font-size: 0.87rem;
}
table.matrix th,
table.matrix td {
	padding: 13px 16px;
	text-align: left;
	border-bottom: 1px solid var(--cerebro-white2);
	vertical-align: top;
}
table.matrix thead th {
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	color: var(--muted);
	font-weight: 500;
	background: var(--surface-2);
	border-bottom: 1px solid var(--line-cerebro-white2);
}
table.matrix tbody th {
	font-weight: 500;
	color: var(--ink);
	white-space: nowrap;
}
table.matrix tr:last-child th,
table.matrix tr:last-child td {
	border-bottom: 0;
}
.rank {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
}
.bar {
	display: inline-block;
	height: 7px;
	border-radius: 2px;
	background: var(--accent);
	vertical-align: middle;
}
.bar.w1 {
	width: 22px;
	opacity: 0.35;
}
.bar.w2 {
	width: 44px;
	opacity: 0.6;
}
.bar.w3 {
	width: 74px;
	opacity: 1;
}

/* ── glossary ─────────────────────────── */
.glossary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
}
.glossary div {
	background: var(--surface);
	padding: 18px 20px;
}
.glossary dt {
	font-family: var(--mono);
	font-size: 0.76rem;
	letter-spacing: 0.05em;
	color: var(--brand-2);
	margin-bottom: 6px;
}
.glossary dd {
	margin: 0;
	font-size: 0.86rem;
	color: var(--ink-2);
	line-height: 1.8;
}

/* ── article page ─────────────────────── */
.art-in {
	position: relative;
	z-index: 1;
}

.art-head {
	padding-block: 80px 30px;
	border-bottom: .5px solid var(--cerebro-white2);
}

.art-head h1 {
	font-family: var(--serif);
	font-size: clamp(28px, 7.5vw, 42px);
	font-weight: 700;
	line-height: 1.4;
	margin-block: 20px;
	text-wrap: balance;
}

.art-series span {
	position: relative;
	font-size: clamp(12px, 2.5vw, 14px);
	padding: 10px 2px
}

.art-series span:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 0;
	border-bottom: 1px solid var(--cerebro-black2)
}

.art-in .cat {
	background-color: var(--cerebro-blue);
}

.art-body {
	padding-block: 40px;
	font-size: clamp(15px, 2.5vw, 16px);
	line-height: 2
}

.art-body h2 {
	width: 85%;
	font-size: clamp(22px, 5vw, 26px);
	font-weight: 700;
	line-height: 1.6;
	margin-top: 70px;
	color: var(--cerebro-text-point);
	text-wrap: pretty;
}
.art-body h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.art-body h3 {
	font-size: clamp(18px, 5vw, 20px);
	font-weight: 700;
	margin-top: 50px
}

.art-body h3:before {
	content: "◾ "
}

.art-body p {
	margin-top: 24px;
	text-wrap: pretty
}

.art-body p:first-child  {
	margin-top: 0;
}

.art-body h2 + p,
.art-body h3 + p {
	margin-top: 12px;
}

.art-body ol,
.art-body ul {
	margin-block: 36px 40px;
	padding-left: 1.35em;
}

.art-body li {
	margin-top: 4px;
}
.art-body strong {
	font-weight: 700;
}
.art-body .pull {
	margin-top: 30px;
	padding: 20px 22px;
	border-left: 3px solid var(--accent);
	background: var(--band);
	border-radius: 0 5px 5px 0;
	font-family: var(--serif);
	font-size: 1.04rem;
	line-height: 1.85;
}

.art-body .note {
	margin-top: 28px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--surface);
	font-size: 0.85rem;
	line-height: 1.85;
}

/* Figure Block */
.art-body figure {
	margin: 0
}

.art-body figure[class*="block"] {
	margin-block: clamp(30px, 5vw, 40px)
}

.art-body figure[class*="block"].wrap {
	width: 100vw;
	max-width: 1100px;
	padding-inline: 0;
	margin-left: -160px
}

/* Imageblock */
.art-body figure.imageblock {
	margin-top: clamp(50px, 5vw, 70px)
}

.art-body .imageblock img {
	display: block;
	width: 100%;
	margin-inline: auto;
	border-radius: 5px
}

/* Tableblock */
.tableblock {
	overflow-x: auto;
}

.art-body table {
	width: 100%;
	margin-top: 40px;
	border-collapse: collapse;
	border-top: 1px solid var(--cerebro-white2);
}

.art-body table th,
.art-body table td {
	padding: 20px 30px;
	border-bottom: 1px solid var(--cerebro-white2);
	text-align: left;
	vertical-align: top;
}

.art-body table th {
	background-color: var(--cerebro-white1);
	font-weight: 700;
	white-space: nowrap;
}

.art-body table td {
	overflow-wrap: anywhere;
}

/* Talk */
.art-body .talkblock {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 5vw, 30px)
}

.art-body .talkblock .balloon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	position: relative;
	padding: 20px clamp(18px, 5vw, 30px);
	background-color: var(--cerebro-white1);
	border: .5px solid var(--cerebro-white2);
	border-radius: 30px
}

.art-body .talkblock .balloon[data-align="left"] {
	padding-left: 100px;
	margin-right: 20%;
	border-top-left-radius: 5px;
}

.art-body .talkblock .balloon[data-align="right"] {
	padding-right: 100px;
	text-align: right;
	margin-left: 20%;
	border-top-right-radius: 5px;
}

.art-body .talkblock .balloon:before {
	content: "";
	position: absolute;
	top: 26px;
	width: 60px;
	height: 60px;
	background-color: var(--cerebro-white);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border: .5px solid var(--cerebro-white2);
	border-radius: 30px
}

.art-body .talkblock .balloon[data-align="left"]:before {
	left: 20px
}

.art-body .talkblock .balloon[data-align="right"]:before {
	right: 20px
}

.art-body .talkblock .balloon[data-person="tomiyama"]:before {
	background-image: url(./posts/category/interview/balloon/tomiyama.webp)
}

.art-body .talkblock .balloon[data-person="hayano"]:before {
	background-image: url(./posts/category/interview/balloon/hayano.webp)
}

.art-body .talkblock .balloon span {
	font-weight: 700;
	font-size: clamp(14px, 2.5vw, 15px);
}

.art-body .talkblock .balloon p {
	margin: 0
}

.art-foot {
	padding-block: 0 36px;
	border-top: .5px solid var(--cerebro-white2);
	margin-top: 48px;
}

/*
.src-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.84rem;
	color: var(--brand-2);
	text-decoration: none;
	font-weight: 500;
}
.src-link:hover {
	text-decoration: underline;
}

*/

.pager {
	display: flex;
	flex-direction: row;
	gap: clamp(18px, 5vw, 30px);
	margin-top: 28px;
	padding-bottom: 12px;
}
.pager a {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	max-width: 420px;
	min-height: 100px;
}

.pager a:before {
	content: "";
	position: absolute;
	top: calc(50% - 30px);
	width: 60px;
	height: 60px;
	background: var(--cerebro-black3) url(./images/arrow_left.svg) 50% 50% no-repeat;
	background-size: 60px 60px;
	border-radius: 30px
}

.pager .next:before {
	right: 0;
	background-image: url(./images/arrow_right.svg)
}

.pager a:not(.next) {
	padding-left: 70px
}

.pager a:not(.next):before {
	left: 0
}

.pager a:hover {
	border-color: var(--brand-2);
}
.pager span {
	color: var(--cerebro-black3);
	font-size: 12px
}
.pager strong {
	line-height: 1.6;
	text-wrap: balance;
	transition: .2s
}

.pager a:hover strong {
	color: var(--cerebro-text-point)
}

.pager .next {
	margin-left: auto;
	text-align: right;
	padding-right: 70px
}

/* ── empty state ──────────────────────── */
.empty {
	border: 1px dashed var(--cerebro-white2);
	border-radius: 5px;
	padding: 44px 28px;
	text-align: center;
}
.empty p {
	margin-top: 10px;
}
.empty .mark {
	font-size: clamp(22px, 5vw, 24px);
	letter-spacing: 0.18em;
	color: var(--cerebro-text-point);
}

/* ── about ────────────────────────────── */
.about-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 100vh;
	padding-top: 80px;
	margin-top: calc((var(--head-top) + var(--head-height) + clamp(18px, 5vw, 20px)) * -1) !important;
	color: var(--cerebro-white)
}

.about-hero:before,
.about-hero:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.about-hero:before {
	background: var(--cerebro-black1) url(./images/about/hero.webp) 50% 50% no-repeat fixed;
	background-size: cover;
}

.about-hero:after {
	background-color: var(--cerebro-blue2);
	opacity: .5;
}

.about-hero h1 {
	font-size: clamp(36px, 5vw, 52px);
	line-height: 1.3;
	font-family: var(--serif);
	text-align: center
}

.about-hero p {
	margin-top: 18px;
	text-align: center
}
.about-body h2 {
	font-family: var(--serif);
	font-size: 1.2rem;
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.about-intro {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 40px;
	width: calc(550px + 50vw)
}

.about-intro-text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(18px, 5vw, 30px);
	max-width: clamp(350px, 40vw, 520px);
	margin-top: 20px
}

.about-intro-title h2 {
	font-size: clamp(16px, 5vw, 18px);
	color: var(--cerebro-text-point)
}

.about-intro-title h3 {
	font-size: clamp(42px, 10vw, 52px);
	font-weight: 300
}

.about-intro-title span {
	font-size: 18px;
	font-family: var(--serif);
}

.about-intro-title p {
	font-size: clamp(14px, 15vw, 15px)
}

.about-intro-title:after {
	content: "";
	display: block;
	width: 100px;
	height: 0;
	margin-top: 20px;
	border-bottom: 1px solid var(--cerebro-black3)
}

.about-intro-art p {
	margin-bottom: 15px
}

.about-intro-image {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.about-intro-image img {
	width: 100%;
	min-height: 100%;
	max-height: 480px;
	object-fit: cover
}

.rewards {
	padding-bottom: 60px;
	border-bottom: .5px solid var(--cerebro-white2)
}

.rewards ul {
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	gap: 30px;
	position: relative;
	left: -20px
}

.rewards ul:before,
.rewards ul:after  {
	content: "";
	position: absolute;
	top: 0;
	width: 100px;
	height: 140px;
	background-position: 50% 50%;
	background-size: 100px 140px;
	background-repeat: no-repeat;
}

.rewards ul:before {
	left: -36px;
	background-image: url(./images/about/rewards_left.svg)
}

.rewards ul:after {
	right: -76px;
	background-image: url(./images/about/rewards_right.svg)
}

.rewards li {
	flex: 1;
	position: relative;
	list-style: none;
	text-align: center;
	font-family: var(--serif)
}

.rewards li:not(:last-child):before {
	content: "";
	position: absolute;
	top: calc(50% - 10px);
	left: calc(100% + 10px);
	width: 10px;
	height: 10px;
	background-color: #e0c059;
	border-radius: 5px;
}

.reward-item p {
	font-size: clamp(22px, 5vw, 24px);
	line-height: 1.5;
	font-weight: 700
}

.reward-item span {
	font-size: clamp(11px, 2.5vw, 12px);
}

.biography {
	padding-bottom: 60px;
	border-bottom: .5px solid var(--cerebro-white2)
}

.biography h2 {
	margin-bottom: 20px;
	font-size: clamp(22px, 5vw, 24px);
	color: var(--cerebro-text-point);
	text-align: center;
}

.biography ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(18px, 5vw, 30px);
	padding-inline: 60px;
	text-align: center;
}

.biography li {
	list-style: none;
	margin-block: 10px
}

.biography h3 {
	margin-bottom: 6px;
	font-size: 20px
}

.biography p {
	font-size: clamp(15px, 2.5vw, 16px);
	line-height: 1.8;
	font-weight: 400
}

.researcher h2 {
	margin-bottom: 30px;
	font-size: clamp(22px, 5vw, 24px);
	color: var(--cerebro-text-point);
	text-align: center;
}

.researcher ul {
	display: grid;
	grid-template-columns: var(--grid-autofit);
	padding: 0;
	list-style: none;
	gap: clamp(18px, 5vw, 30px);
}

.researcher li {
	display: flex;
	align-items: stretch
}

.researcher-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--cerebro-white);
	padding: 30px;
	border: .5px solid var(--cerebro-white2);
	border-radius: 5px
}

.researcher-item img {
	width: 128px;
	height: 128px;
	margin-bottom: 20px;
	border-radius: 64px;
	object-fit: cover;
}

.researcher-item h3 {
	font-size: clamp(20px, 5vw, 22px);
}

.researcher-item span {
	font-family: var(--serif);
}

.researcher-item p {
	margin-top: 12px;
	line-height: 1.8;
	font-weight: 400
}

.exp-in {
	padding-bottom: 30px
}

.exp-in ul {
	display: grid;
	grid-template-columns: var(--grid-autofit);
	gap: 40px;
	padding: 0;
	list-style: none;
}

.exp-item h2 {
	font-size: clamp(22px, 5vw, 24px);
	color: var(--cerebro-text-point);
	margin-bottom: 15px
}

.about-site {
	text-align: center;
	padding-block: 80px;
	background: var(--cerebro-black2) url(./images/about/about_site.webp) 50% 50%/cover no-repeat fixed;
	color: var(--cerebro-white)
}

.about-site h2 {
	font-size: clamp(32px, 5vw, 42px);
	font-weight: 300;
	margin-block: 60px 10px
}

.about-site h2:first-child {
	margin-top: 0;
}

/* ── 専門用語 ───────────────────────────── */
.termi-list {
	display: grid;
	grid-template-columns: var(--grid-autofit);
	gap: clamp(18px, 5vw, 30px);
	padding: 0;
	margin-bottom: clamp(60px, 5vw, 80px)
}

.termi-list li {
	list-style: none;
	padding: clamp(18px, 5vw, 20px);
	background-color: var(--cerebro-white1);
	border-radius: 5px
}

.termi-list h3 {
	color: var(--cerebro-text-point);
	font-size: 16px;
	margin-bottom: 5px
}

/* ── footer ───────────────────────────── */
.site-foot {
	margin-top: 40px;
	padding: 36px 0;
	background-color: var(--cerebro-background-white);
	color: var(--cerebro-black3)
}
.foot-in {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	align-items: flex-end;
}

.company-name-container {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	gap: 20px
}

.company-name-in a {
	display: block;
	position: relative;
	width: 172px;
	padding-bottom: 26px;
	background: url(./images/footer/company_logo.svg) -10px calc(100% + 10px) no-repeat
}

.foot-nav {
	display: flex;
	gap: 20px;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.foot-nav ul {
	display: flex;
	flex-direction: row;
	gap: 20px;
	padding: 0;
	margin: 0
}

ul.foot-sns {
	gap: 10px
}

.foot-nav li {
	list-style: none;
}

.foot-nav a {
	font-size: 15px
}

.foot-nav a.sns {
	display: block;
	overflow: hidden;
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: 24px;
	background-color: var(--cerebro-black3);
}

.foot-nav a.sns:before,
.foot-nav a.sns:after  {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 44px;
	height: 44px
}

.foot-nav a.sns:before {
	opacity: 0;
	transition: opacity .2s
}

.foot-nav a.sns:hover:before {
	opacity: 1
}

.foot-nav a.sns:after {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 40px
}

.foot-nav a[href*="facebook"]:before {
	background-color: #0866ff;
}

.foot-nav a[href*="facebook"]:after {
	background-image: url(./images/footer/facebook.svg)
}

.foot-nav a[href*="linkedin"]:before {
	background-color: #0a66c2;
}

.foot-nav a[href*="linkedin"]:after {
	background-image: url(./images/footer/linkedin.svg)
}

.foot-nav a[href*="instagram"]:before {
	background:  linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5)
}

.foot-nav a[href*="instagram"]:after {
	background-image: url(./images/footer/instagram.svg)
}

.foot-nav a:hover {
	color: var(--cerebro-text-point);
}

@media (prefers-reduced-motion: reduce) {
	* {
	animation: none !important;
	transition: none !important;
	}
}

@media (max-width: 1280px) {

	.hero {
		background-image: url(./images/hero/hero_top_notext.webp)
	}
}

@media (max-width: 1180px) {

	.interview-parts li:nth-child(even) {
		margin-left: calc(clamp(18px, 5vw, 40px) * -1)
	}

}

@media (max-width: 1100px) {

	.art-body figure[class*="block"].wrap {
		margin-left: calc((100vw - 100%) / -2)
	}

	.art-body .imageblock.wrap img {
		border-radius: 0
	}

	.rewards ul {
		flex-direction: column;
		align-items: center;
		gap: 40px
	}

	.rewards ul:before,
	.rewards ul:after {
		content: none !important
	}

	.rewards li {
		z-index: 0;
		width: 320px;
		max-width: 100%;
	}

	.rewards li:before,
	.rewards li:after {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0 !important;
		width: clamp(80px, 20vw, 100px) !important;
		height: clamp(100px, 20vw, 140px) !important;
		background-size: contain;
		background-repeat: no-repeat;
		background-color: transparent !important;
	}

	.rewards li:before {
		left: calc(clamp(44px, 7vw, 80px) * -1) !important;
		background-position: 0 50%;
    	background-image: url(./images/about/rewards_left.svg);
	}

	.rewards li:after {
		right: calc(clamp(44px, 7vw, 80px) * -1);
		background-position: 100% 50%;
    	background-image: url(./images/about/rewards_right.svg);
	}

}

@media (max-width: 939px) {

	body.no-transition nav.main,
	body.no-transition .mainnav-link {
		transition: none !important
	}

	#maintoggle {
		display: block;
		margin-right: clamp(9px, 5vw, 10px)
	}

	nav.main {
		flex-direction: column;
		align-items: end;
		top: calc((var(--head-height) + clamp(18px, 5vw, 20px)) * -1);
		bottom: auto;
		height: auto;
		max-width: calc(100% - clamp(36px, 5vw, 40px));
		padding: clamp(9px, 5vw, 10px) 0;
		border-radius: 26px;
	}

	.mainnav-link {
		overflow: hidden;
		flex-direction: column;
		padding: 0;
		width: 320px;
		max-width: 100%;
		interpolate-size: allow-keywords;
		transition: width .4s, height .4s, opacity .4s;
	}

	nav.main a {
		height: 64px;
		justify-content: start;
		padding-inline: calc(clamp(18px, 5vw, 20px) + 6px);
		font-size: 18px;
		font-weight: 700;
		border-radius: 0;
		white-space: nowrap;
		transform: translateY(0);
		transition: color .4s, opacity .6s, transfrom .6s;
	}

	nav.main a:first-child {
		transition-delay: 0s, .2s, .2s;
	}

	nav.main a:nth-child(2) {
		transition-delay: 0s, .22s, .22s;
	}

	nav.main a:nth-child(3) {
		transition-delay: 0s, .24s, .24s;
	}

	nav.main a:nth-child(4) {
		transition-delay: 0s, .26s, .26s;
	}

	nav.main a:nth-child(5) {
		transition-delay: 0s, .28s, .28s;
	}

	nav.main a:nth-child(6) {
		transition-delay: 0s, .30s, .30s;
	}

	body:not(.mainopen)	nav.main a {
		opacity: 0;
		transform: translateY(-52px);
		transition: opacity .1s, transform .1s !important;
	}
	
	nav.main a[aria-current="page"] {
		box-shadow: none;
		color: var(--cerebro-text-black);
		background-color: rgba(0, 0, 0, .05)
	}

	body:not(.mainopen) nav.main {
		padding: 0
	}

	body:not(.mainopen) #maintoggle {
		margin-right: 0
	}

	body:not(.mainopen) .mainnav-link {
		width: 0;
		height: 0;
		pointer-events: none;
	}

	#overlay {
		display: block !important
	}

	body:not(.mainopen) #overlay {
		opacity: 0;
		pointer-events: none
	}

	body.mainopen #overlay {
		opacity: 1
	}

}

@media (max-width: 809px) {

	.interview-parts {
		gap: clamp(18px, 5vw, 30px)
	}

	.interview-parts li {
		width: 100%;
		margin-inline: 0 !important;
	}

	.interview-parts li a {
		padding-top: calc(clamp(320px, 50vw, 500px) + clamp(20px, 5vw, 40px)) !important;
		padding-inline: clamp(18px, 5vw, 30px) !important;
		border: .5px solid var(--cerebro-white2) !important;
		border-radius: 5px !important
	}

	.interview-parts .pt-img {
		inset: 0;
		width: 100%;
		height: clamp(320px, 50vw, 500px);
		border-radius: 5.25px 5.25px 0 0
	}

}

@media (max-width: 760px) {

	.hero-grid {
	grid-template-columns: 1fr;
	}

	.pager {
		flex-direction: column;
	}

	.about-intro {
		flex-direction: column-reverse;
		align-items: end;
		justify-content: start;
		width: auto
	}

	.about-intro-image {
		width: 85%;
		margin-right: calc(clamp(18px, 5vw, 40px) * -1);
		margin-bottom: -20px
	}

	.about-intro-text {
		max-width: none
	}

	.foot-in {
		flex-direction: column-reverse;
		align-items: center;
		text-align: center;
	}

	.foot-nav {
		flex-direction: column;
	}

	.foot-nav ul {
		padding: 0;
		margin: 0
	}

}

@media (max-width: 480px) {
	:root {
		--grid-autofit: repeat(auto-fit, minmax(240px, 1fr))
	}

	.biography ul {
		grid-template-columns: var(--grid-autofit);
		padding-inline: 0
	}
}