/* =============================
   Keita Portfolio Theme - PC base styles
   ============================= */

:root {
	--color-bg: #eef0f2;
	--color-ink: #2f3a43;
	--color-sub: #717b83;
	--color-dark: #39434d;
	--color-line: #c6ccd1;
	--color-panel: rgba(238, 240, 242, 0.86);
	--color-panel-deep: rgba(241, 243, 245, 0.94);
	--font-en: 'Cormorant Garamond', 'Times New Roman', serif;
	--font-jp: 'Zen Old Mincho', 'Noto Serif JP', serif;
	--transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- リセット・ベース ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-jp);
	color: var(--color-ink);
	background: var(--color-bg);
	letter-spacing: 0.06em;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

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

ul {
	list-style: none;
}

.container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 32px;
}

.container--narrow {
	max-width: 860px;
}

/* ---------- フェードイン（IntersectionObserver連動） ---------- */
.fade-in {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-in.visible {
	opacity: 1;
	transform: none;
}

/* =============================
   最背面：レコード回転動画
   ============================= */
.record-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: #16191c;
	overflow: hidden;
}

.record-bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.record-bg__overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 16, 20, 0.38);
}

/* サブページでは動画レイヤーが無いので背景色で担保 */
body:not(.home) {
	background: var(--color-bg);
}

/* =============================
   ヘッダー
   ============================= */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 30px 48px;
	transition: background var(--transition), padding var(--transition);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.site-nav__list {
	display: flex;
	gap: 44px;
}

.site-nav__list a {
	font-family: var(--font-en);
	font-size: 15px;
	letter-spacing: 0.18em;
	color: #fff;
	position: relative;
	padding-bottom: 4px;
}

.site-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--transition);
}

.site-nav__list a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* スクロール後・サブページは濃色背景 */
.site-header.is-scrolled,
body:not(.home) .site-header {
	background: rgba(47, 58, 67, 0.92);
	padding: 16px 48px;
	backdrop-filter: blur(6px);
}

/* =============================
   ヒーロー
   ============================= */
.hero {
	position: relative;
	z-index: 2;
	height: 100vh;
	min-height: 640px;
	overflow: hidden;
	background: #1d2226; /* 画像読み込み前の下地 */
}

.hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 2.6s ease, transform 8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.is-loaded .hero__bg {
	opacity: 1;
	transform: scale(1);
}

.hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 24, 28, 0.28) 0%, rgba(20, 24, 28, 0.05) 45%, rgba(20, 24, 28, 0.42) 100%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 6vw;
}

.hero__title {
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 400;
	color: #fff;
	font-size: clamp(88px, 14vw, 210px);
	line-height: 1;
	letter-spacing: 0.04em;
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 1.6s ease 0.9s, transform 1.6s ease 0.9s;
}

body.is-loaded .hero__title {
	opacity: 1;
	transform: none;
}

.hero__meta {
	align-self: flex-end;
	max-width: 560px;
	margin-top: 7vh;
	color: #fff;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1.4s ease 1.6s, transform 1.4s ease 1.6s;
}

body.is-loaded .hero__meta {
	opacity: 1;
	transform: none;
}

.hero__name {
	font-size: 19px;
	letter-spacing: 0.2em;
	margin-bottom: 22px;
}

.hero__desc {
	font-size: 13px;
	line-height: 2.2;
	letter-spacing: 0.12em;
	opacity: 0.92;
}

.hero__scroll {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: #fff;
}

.hero__scroll span {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.3em;
}

.hero__scroll i {
	display: block;
	width: 1px;
	height: 64px;
	background: rgba(255, 255, 255, 0.7);
	overflow: hidden;
	position: relative;
}

.hero__scroll i::after {
	content: '';
	position: absolute;
	left: 0;
	top: -100%;
	width: 100%;
	height: 100%;
	background: #fff;
	animation: kp-scroll-line 2.2s ease-in-out infinite;
}

@keyframes kp-scroll-line {
	0% { top: -100%; }
	55% { top: 0; }
	100% { top: 100%; }
}

/* =============================
   インタールード（レコードが全面に見える区間）
   ============================= */
.interlude {
	height: 48vh;
}

/* =============================
   Archive：制作実績
   ============================= */
.archive-section {
	position: relative;
	z-index: 2;
	background: var(--color-panel);
	backdrop-filter: blur(2px);
	padding: 110px 0 96px;
}

.section-head {
	display: flex;
	align-items: baseline;
	gap: 26px;
}

.section-head__en {
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 46px;
	letter-spacing: 0.06em;
	line-height: 1;
}

.section-head__rule {
	width: 64px;
	height: 1px;
	background: var(--color-ink);
	align-self: center;
}

.section-head__jp {
	font-size: 13px;
	color: var(--color-sub);
	letter-spacing: 0.18em;
}

.section-head__more {
	margin-left: auto;
	font-family: var(--font-en);
	font-size: 15px;
	letter-spacing: 0.14em;
	color: var(--color-sub);
	transition: color var(--transition);
}

.section-head__more:hover {
	color: var(--color-ink);
}

.section-head__more .arrow {
	display: inline-block;
	transition: transform var(--transition);
}

.section-head__more:hover .arrow {
	transform: translateX(6px);
}

/* ---- 3カード ---- */
.work-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 58px 0 76px;
}

.work-card__link {
	display: block;
}

.work-card__thumb {
	aspect-ratio: 15 / 10;
	overflow: hidden;
	background: #d4d8db;
}

.work-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.85);
	transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.work-card:hover .work-card__thumb img {
	transform: scale(1.05);
}

.work-card.is-hidden {
	display: none;
}

/* ---- カードのページ切り替えナビ ---- */
.work-cards-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	margin: -44px 0 76px;
}

.work-cards-nav__count {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.18em;
	color: var(--color-sub);
}

.work-cards-nav__next {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--color-ink);
	background: transparent;
	color: var(--color-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}

.work-cards-nav__next:hover {
	background: var(--color-ink);
	color: #fff;
	transform: translateX(4px);
}

/* ---- 一覧リスト ---- */
.work-list {
	border-top: 1px solid var(--color-line);
}

.work-list__row {
	display: grid;
	grid-template-columns: 88px 88px 1fr auto 36px;
	align-items: center;
	gap: 26px;
	padding: 24px 10px;
	border-bottom: 1px solid var(--color-line);
	transition: background var(--transition), padding var(--transition);
}

a.work-list__row:hover {
	background: rgba(255, 255, 255, 0.55);
	padding-left: 18px;
}

.work-list__no,
.work-list__year {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.14em;
	color: var(--color-sub);
}

.work-list__title {
	font-size: 15px;
	letter-spacing: 0.1em;
}

.work-list__skills {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--color-sub);
	text-align: right;
}

.work-list__arrow {
	text-align: right;
	color: var(--color-sub);
	transition: transform var(--transition), color var(--transition);
}

a.work-list__row:hover .work-list__arrow {
	transform: translateX(6px);
	color: var(--color-ink);
}

.work-list__note {
	margin-top: 18px;
	font-size: 11px;
	color: var(--color-sub);
	letter-spacing: 0.1em;
}

/* =============================
   Profile / Skills / Links
   ============================= */
.info-section {
	position: relative;
	z-index: 2;
	background: var(--color-panel-deep);
	padding: 96px 0 110px;
	border-top: 1px solid rgba(198, 204, 209, 0.6);
}

.info-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	gap: 64px;
}

.info-col__head {
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 30px;
	letter-spacing: 0.08em;
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 34px;
}

.info-col__rule {
	width: 44px;
	height: 1px;
	background: var(--color-ink);
}

.info-col__intro {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 22px;
}

.info-col__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 4px 16px rgba(47, 58, 67, 0.18);
}

.info-col__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.info-col__name {
	font-size: 15px;
	letter-spacing: 0.16em;
	margin-bottom: 18px;
}

.info-col__intro .info-col__name {
	margin-bottom: 0;
}

.info-col__bio {
	font-size: 13px;
	line-height: 2.2;
	letter-spacing: 0.1em;
	color: var(--color-sub);
	margin-bottom: 28px;
}

.profile-table div {
	display: flex;
	gap: 18px;
	font-size: 13px;
	letter-spacing: 0.12em;
	padding: 6px 0;
}

.profile-table dt {
	color: var(--color-sub);
	min-width: 3.5em;
}

.profile-table dt::after {
	content: '：';
	color: var(--color-line);
}

/* ---- Skills ---- */
.skills-list li {
	font-size: 14px;
	letter-spacing: 0.1em;
	padding: 14px 2px;
	border-bottom: 1px solid var(--color-line);
	position: relative;
	padding-left: 30px;
}

.skills-list li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 50%;
	width: 16px;
	height: 1px;
	background: var(--color-sub);
}

/* ---- Links ---- */
.links-list li {
	border-bottom: 1px solid var(--color-line);
}

.links-list a {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 2px;
	transition: background var(--transition), padding var(--transition);
}

.links-list a:hover {
	background: rgba(255, 255, 255, 0.5);
	padding-left: 10px;
}

.links-list__label {
	font-family: var(--font-en);
	font-size: 16px;
	letter-spacing: 0.12em;
}

.links-list__arrow {
	margin-left: auto;
	color: var(--color-sub);
	transition: transform var(--transition);
}

.links-list a:hover .links-list__arrow {
	transform: translateX(6px);
}

/* アイコン（CSSマスクでSVG描画） */
.links-list__icon {
	width: 20px;
	height: 20px;
	background-color: var(--color-ink);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.links-list__icon--github {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.17c-3.2.7-3.87-1.38-3.87-1.38-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.76 2.69 1.25 3.34.96.1-.74.4-1.25.73-1.54-2.55-.29-5.23-1.28-5.23-5.68 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.46.11-3.05 0 0 .96-.31 3.15 1.18a10.9 10.9 0 0 1 5.74 0c2.18-1.49 3.14-1.18 3.14-1.18.63 1.59.24 2.76.12 3.05.74.81 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.67.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.17c-3.2.7-3.87-1.38-3.87-1.38-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.76 2.69 1.25 3.34.96.1-.74.4-1.25.73-1.54-2.55-.29-5.23-1.28-5.23-5.68 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.46.11-3.05 0 0 .96-.31 3.15 1.18a10.9 10.9 0 0 1 5.74 0c2.18-1.49 3.14-1.18 3.14-1.18.63 1.59.24 2.76.12 3.05.74.81 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.67.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z'/%3E%3C/svg%3E");
}

.links-list__icon--x {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.47l8.6-9.83L0 1.15h7.59l5.24 6.93 6.07-6.93zm-1.29 19.49h2.04L6.49 3.24H4.3l13.31 17.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.47l8.6-9.83L0 1.15h7.59l5.24 6.93 6.07-6.93zm-1.29 19.49h2.04L6.49 3.24H4.3l13.31 17.4z'/%3E%3C/svg%3E");
}

.links-list__icon--globe {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7.93 9h-3.45a15.7 15.7 0 0 0-1.46-6.13A8.02 8.02 0 0 1 19.93 11zM12 4.07c.96 1.16 2.13 3.6 2.45 6.93h-4.9c.32-3.33 1.49-5.77 2.45-6.93zM4.07 13h3.45c.13 2.32.66 4.45 1.46 6.13A8.02 8.02 0 0 1 4.07 13zm3.45-2H4.07a8.02 8.02 0 0 1 4.91-6.13A15.7 15.7 0 0 0 7.52 11zM12 19.93c-.96-1.16-2.13-3.6-2.45-6.93h4.9c-.32 3.33-1.49 5.77-2.45 6.93zm3.02-.8a15.7 15.7 0 0 0 1.46-6.13h3.45a8.02 8.02 0 0 1-4.91 6.13z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7.93 9h-3.45a15.7 15.7 0 0 0-1.46-6.13A8.02 8.02 0 0 1 19.93 11zM12 4.07c.96 1.16 2.13 3.6 2.45 6.93h-4.9c.32-3.33 1.49-5.77 2.45-6.93zM4.07 13h3.45c.13 2.32.66 4.45 1.46 6.13A8.02 8.02 0 0 1 4.07 13zm3.45-2H4.07a8.02 8.02 0 0 1 4.91-6.13A15.7 15.7 0 0 0 7.52 11zM12 19.93c-.96-1.16-2.13-3.6-2.45-6.93h4.9c-.32 3.33-1.49 5.77-2.45 6.93zm3.02-.8a15.7 15.7 0 0 0 1.46-6.13h3.45a8.02 8.02 0 0 1-4.91 6.13z'/%3E%3C/svg%3E");
}

.links-list__icon--mail {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1.5 2.5v.59L12 13l8.5-5.91V6.5h-17zm17 3.03L12 15.41 3.5 9.53v8.97h17V9.53z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1.5 2.5v.59L12 13l8.5-5.91V6.5h-17zm17 3.03L12 15.41 3.5 9.53v8.97h17V9.53z'/%3E%3C/svg%3E");
}

/* =============================
   フッター
   ============================= */
.site-footer {
	position: relative;
	z-index: 2;
	background: var(--color-dark);
	color: #dfe3e6;
	text-align: center;
	padding: 20px 16px;
}

.site-footer small {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
}

/* =============================
   サウンドトグル
   ============================= */
.sound-toggle {
	position: fixed;
	left: 28px;
	bottom: 26px;
	z-index: 120;
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(22, 26, 30, 0.55);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.22em;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background var(--transition), border-color var(--transition);
}

.sound-toggle:hover {
	background: rgba(22, 26, 30, 0.8);
}

.sound-toggle__icon {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 12px;
}

.sound-toggle__icon i {
	width: 2px;
	height: 4px;
	background: #fff;
	transition: height 0.3s ease;
}

.sound-toggle.is-on .sound-toggle__icon i {
	animation: kp-eq 1s ease-in-out infinite;
}

.sound-toggle.is-on .sound-toggle__icon i:nth-child(2) {
	animation-delay: 0.2s;
}

.sound-toggle.is-on .sound-toggle__icon i:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes kp-eq {
	0%, 100% { height: 4px; }
	50% { height: 12px; }
}

/* =============================
   サブページ（一覧・詳細）
   ============================= */
.sub-page {
	position: relative;
	z-index: 2;
	background: var(--color-bg);
	min-height: 100vh;
	padding: 170px 0 110px;
}

.sub-page__head {
	margin-bottom: 56px;
}

.sub-page__title {
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 52px;
	letter-spacing: 0.06em;
	line-height: 1.1;
}

.sub-page__sub {
	margin-top: 10px;
	font-size: 13px;
	color: var(--color-sub);
	letter-spacing: 0.18em;
}

.pagination {
	margin-top: 48px;
	text-align: center;
	font-family: var(--font-en);
	letter-spacing: 0.14em;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	color: var(--color-sub);
}

.pagination .page-numbers.current {
	color: var(--color-ink);
	border-bottom: 1px solid var(--color-ink);
}

/* ---- 詳細記事 ---- */
.entry__head {
	margin-bottom: 40px;
}

.entry__year {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-sub);
}

.entry__title {
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 8px 0 14px;
	line-height: 1.5;
}

.entry__skills {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.12em;
	color: var(--color-sub);
}

.entry__thumb {
	margin-bottom: 44px;
}

.entry__content {
	font-size: 15px;
	line-height: 2.2;
}

.entry__content > * + * {
	margin-top: 1.4em;
}

.entry__content h2 {
	font-size: 22px;
	letter-spacing: 0.1em;
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 10px;
	margin-top: 2.2em;
}

.entry__content h3 {
	font-size: 18px;
	letter-spacing: 0.1em;
	margin-top: 2em;
}

.entry__foot {
	margin-top: 64px;
	border-top: 1px solid var(--color-line);
	padding-top: 28px;
}

.entry__back {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.14em;
	color: var(--color-sub);
	transition: color var(--transition);
}

.entry__back:hover {
	color: var(--color-ink);
}