/* =============================
   Keita Portfolio Theme - Mobile styles (≤768px)
   ============================= */

.container {
	padding: 0 20px;
}

/* ---------- ヘッダー ---------- */
.site-header {
	padding: 16px 20px;
}

.site-header.is-scrolled,
body:not(.home) .site-header {
	padding: 12px 20px;
}

.site-nav__list {
	gap: 20px;
}

.site-nav__list a {
	font-size: 12px;
	letter-spacing: 0.14em;
}

/* ---------- ヒーロー ---------- */
.hero {
	min-height: 560px;
}

.hero__inner {
	padding: 0 24px;
	justify-content: flex-end;
	padding-bottom: 18vh;
}

.hero__title {
	font-size: clamp(58px, 17vw, 96px);
}

.hero__meta {
	align-self: flex-start;
	margin-top: 5vh;
	max-width: 100%;
}

.hero__name {
	font-size: 15px;
}

.hero__desc {
	font-size: 12px;
	line-height: 2;
}

.hero__scroll i {
	height: 44px;
}

/* ---------- インタールード ---------- */
.interlude {
	height: 34vh;
}

/* ---------- Archive ---------- */
.archive-section {
	padding: 72px 0 64px;
}

.section-head {
	flex-wrap: wrap;
	gap: 14px;
}

.section-head__en {
	font-size: 34px;
}

.section-head__rule {
	width: 36px;
}

.section-head__jp {
	font-size: 11px;
}

.section-head__more {
	margin-left: 0;
	width: 100%;
	font-size: 13px;
}

.work-cards {
	grid-template-columns: 1fr;
	gap: 36px;
	margin: 40px 0 56px;
}

/* リストは2段組みに再構成 */
.work-list__row {
	grid-template-columns: auto auto 1fr;
	grid-template-areas:
		'no   year  arrow'
		'title title title'
		'skills skills skills';
	gap: 4px 18px;
	padding: 18px 4px;
}

.work-list__no { grid-area: no; font-size: 12px; }
.work-list__year { grid-area: year; font-size: 12px; }
.work-list__title { grid-area: title; font-size: 14px; }
.work-list__skills { grid-area: skills; text-align: left; font-size: 12px; }
.work-list__arrow { grid-area: arrow; }

a.work-list__row:hover {
	padding-left: 4px;
}

/* ---------- Profile / Skills / Links ---------- */
.info-section {
	padding: 64px 0 72px;
}

.info-grid {
	grid-template-columns: 1fr;
	gap: 56px;
}

.info-col__head {
	font-size: 26px;
	margin-bottom: 24px;
}

.info-col__intro {
	gap: 16px;
}

.info-col__photo {
	width: 76px;
	height: 76px;
}

/* ---------- サウンドトグル ---------- */
.sound-toggle {
	left: 16px;
	bottom: 16px;
	padding: 8px 14px;
	font-size: 10px;
}

/* ---------- サブページ ---------- */
.sub-page {
	padding: 130px 0 72px;
}

.sub-page__title {
	font-size: 34px;
}

.entry__title {
	font-size: 24px;
}