@charset "UTF-8";

/* 共通CSS：全ページでこのファイルを読み込みます。
   色は冒頭の変数、余白や文字サイズは各見出しの下で編集できます。
   後半の @media はスマートフォン用の設定です。 */


/* 配色（サイト全体の基本色） */
:root {
	--ink:#303e40;
	--muted:#677373;
	--accent:#59736b;
	--line:#dce2dd;
	--paper:#fafbf8;
	--soft:#eef2ec;
}

* {
	box-sizing:border-box;
}

body {
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:"Yu Gothic",Meiryo,sans-serif;
	font-size:16px; /* 本文の基本サイズ */
	line-height:1.9;
}

a {
	color:inherit;
	text-underline-offset:5px;
}

a:hover {
	color:var(--accent);
}

a:focus-visible,button:focus-visible,audio:focus-visible {
	outline:3px solid #8e7050;
	outline-offset:5px;
}

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

h1,h2,h3,p {
	margin-top:0;
}

h1,h2,h3 {
	line-height:1.5;
}

h1,h2,.brand,.footer-name {
	font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
	font-weight:500;
}

h2 {
	font-size:22px;
}

h3 {
	font-size:18px;
}

p {
	margin-bottom:18px;
}

[hidden] {
	display:none!important;
}

/* ヘッダー・ナビゲーション */
.site-header {
	background:#fff;
	border-bottom:1px solid var(--line);
	position:relative;
	z-index:10;
}

.header-inner {
	max-width:1200px;
	margin:auto;
	min-height:100px;
	padding:20px 40px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
}

.brand {
	text-decoration:none;
	font-size:23px;
	letter-spacing:.14em;
	white-space:nowrap;
}

.brand span {
	display:block;
	font:9px/1.8 Arial,sans-serif;
	letter-spacing:.25em;
	margin-top:3px;
}

nav ul {
	list-style:none;
	display:flex;
	gap:30px;
	padding:0;
	margin:0;
}

nav a {
	font:14px/2 Arial,sans-serif; /* メニューの文字サイズ */
	letter-spacing:.13em;
	text-decoration:none;
	display:block;
	padding:12px 0;
	border-bottom:1px solid transparent;
}

nav a[aria-current],nav a:hover {
	border-color:var(--accent);
}

/* トップページの画像と配置 */
.hero {
	background:#fff;
	position:relative;
	max-width:1400px;
	margin:auto;
}

.hero>img {
	display:block;
	width:100%;
}

.hero-caption {
	padding:28px 7%;
	display:flex;
	align-items:center;
	gap:28px;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
}

.hero-caption h1 {
	font-size:27px;
	letter-spacing:.13em;
	margin:0;
}

.hero-caption p {
	margin:0;
	color:var(--muted);
	font-size:13px;
}

.text-link {
	font-size:12px;
	margin-left:auto;
	text-decoration:none;
}

/* 本文の横幅と余白 */
.container {
	max-width:1120px;
	margin:auto;
	padding:72px 40px 92px;
}

.home-grid {
	display:grid;
	grid-template-columns:1.5fr 1fr;
	gap:76px;
}

.eyebrow {
	font:11px/1.7 Arial,sans-serif;
	letter-spacing:.2em;
	color:var(--accent);
	margin-bottom:9px;
}

.section-heading {
	margin-bottom:30px;
}

.section-heading h2 {
	margin-bottom:0;
}

.news-card {
	padding:28px 0;
	border-top:1px solid var(--line);
}

.tag {
	font:10px/1.5 Arial,sans-serif;
	letter-spacing:.12em;
	background:var(--soft);
	padding:6px 10px;
	display:inline-block;
	margin-bottom:16px;
}

.news-card h3 {
	font-size:21px;
	margin-bottom:12px;
}

.news-card p,.link-list {
	font-size:15px;
}

.link-list {
	padding:0;
	list-style:none;
	margin:14px 0 20px;
}

.link-list li {
	padding:10px 0;
	border-bottom:1px solid var(--line);
	overflow-wrap:anywhere;
}

.link-list a {
	text-decoration:none;
}

.note {
	font-size:11px!important;
	color:var(--muted);
	line-height:1.8;
}

.video {
	display:block;
	aspect-ratio:16/9;
	width:100%;
	height:auto;
	border:0;
	background:#e4e8e3;
	margin-bottom:22px;
}

.social-card {
	padding:26px;
	background:var(--soft);
	margin-top:32px;
}

.social-card h3 {
	font-size:16px;
}

.social-card p,.social-card a {
	font-size:12px;
}

/* 共通お問い合わせ欄 */
.contact-band {
	background:var(--soft);
	border-top:1px solid var(--line);
	padding:45px max(40px,calc((100vw - 1040px)/2));
	display:flex;
	justify-content:space-between;
	gap:30px;
	align-items:center;
}

.contact-band h2 {
	font-size:22px;
	margin-bottom:8px;
}

.contact-band p:last-child {
	font-size:12px;
	margin:0;
}

.button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:35px;
	padding:16px 25px;
	background:var(--ink);
	color:white;
	text-decoration:none;
	font-size:13px;
	border:1px solid var(--ink);
}

.button:hover {
	background:var(--accent);
	color:white;
}

footer {
	text-align:center;
	padding:40px 24px 28px;
	background:white;
}

.footer-name {
	text-decoration:none;
	font-size:19px;
	letter-spacing:.16em;
}

.social-links {
	display:flex;
	justify-content:center;
	gap:25px;
	font:11px/2 Arial,sans-serif;
	margin:18px 0;
}

footer small {
	font-size:9px;
	color:var(--muted);
}

/* 下層ページのタイトル */
.page-title {
	padding:0 0 38px;
	margin-bottom:40px;
	border-bottom:1px solid var(--line);
}

.page-title h1 {
	font-size:38px;
	letter-spacing:.08em;
	margin-bottom:12px;
}

.page-title p:last-child {
	margin-bottom:0;
}

/* プロフィール */
.profile-intro {
	display:grid;
	grid-template-columns:300px 1fr;
	gap:70px;
	align-items:center;
	margin-bottom:80px;
}

.profile-intro img {
	width:300px;
}

.profile-intro h2 {
	font-size:36px;
	letter-spacing:.13em;
	margin-bottom:6px;
}

.reading {
	font-size:14px;
	color:var(--muted);
}

dl {
	display:grid;
	grid-template-columns:120px 1fr;
	font-size:15px; /* 出身地・血液型などの本文 */
	max-width:450px;
}

dt,dd {
	border-bottom:1px solid var(--line);
	padding:10px 0;
	margin:0;
}

dt {
	color:var(--muted);
}

.works-grid {
	columns:2;
	column-gap:60px;
}

.work-category {
	break-inside:avoid;
	margin-bottom:32px;
}

.work-category h3 {
	font-weight:500;
	border-bottom:1px solid var(--accent);
	padding-bottom:10px;
}

.work-category ul {
	padding-left:18px;
	font-size:15px; /* 出演履歴の本文 */
}

.work-category li {
	padding-bottom:10px;
}

/* 音声サンプル */
.voice-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
	margin-bottom:64px;
}

.voice-card {
	display:flex;
	gap:20px;
	padding:28px;
	background:white;
	border:1px solid var(--line);
}

.voice-card>div {
	min-width:0;
	flex:1;
}

.voice-number {
	font:28px/1.5 Georgia,serif;
	color:var(--accent);
}

.voice-card h3 {
	font-size:14px;
	font-weight:500;
}

audio {
	width:100%;
	display:block;
}

.movie-grid {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:24px;
}

.movie-grid .video {
	margin:0;
}

.container>.link-list {
	margin-bottom:60px;
}

.narrow {
	max-width:900px;
}

.contact-panel {
	text-align:center;
	background:white;
	border:1px solid var(--line);
	padding:55px 28px;
}

.contact-panel h2 {
	font-size:24px;
}

.contact-panel .note {
	margin:20px 0 0;
}

.skip-link {
	position:absolute;
	top:-100px;
	left:20px;
	background:white;
	padding:12px;
	z-index:30;
}

.skip-link:focus {
	top:10px;
}

/* モバイルメニューボタン */
.menu-toggle {
	background:none;
	border:0;
	color:var(--ink);
	padding:12px 4px;
	font:11px/1.5 Arial,sans-serif;
	letter-spacing:.1em;
	cursor:pointer;
}

.menu-icon {
	display:block;
	width:24px;
	height:16px;
	border-top:1px solid;
	border-bottom:1px solid;
	position:relative;
	margin:0 auto 6px;
}

.menu-icon:after {
	content:"";
	position:absolute;
	top:7px;
	left:0;
	width:24px;
	border-top:1px solid;
}

[aria-expanded=true] .menu-icon {
	border-bottom:0;
	transform:translateY(7px) rotate(45deg);
}

[aria-expanded=true] .menu-icon:after {
	top:-1px;
	transform:rotate(90deg);
}


/* スマートフォン用：画面幅760px以下 */
@media(max-width:760px) {
	.header-inner {
		min-height:82px;
		padding:14px 24px;
		flex-wrap:wrap;
		gap:10px;
	}
	.brand {
		font-size:21px;
	}
	nav {
		width:100%;
		border-top:1px solid var(--line);
	}
	nav ul {
		display:flex;
		flex-direction:column;
		gap:0;
		padding:10px 0;
	}
	nav a {
		font-size:14px;
		padding:12px 5px;
	}
	.hero-caption {
		display:block;
		padding:24px;
	}
	.hero-caption h1 {
		font-size:25px;
		margin-bottom:8px;
	}
	.hero-caption p {
		margin-bottom:12px;
	}
	.hero>img {
		width:100%;
		min-height:190px;
		object-fit:cover;
		object-position:65% center;
	}
	.hero-caption .text-link {
		display:inline-block;
		min-height:35px;
	}
	/* 本文の横幅と余白 */
	.container {
		padding:44px 24px 56px;
	}
	.home-grid {
		grid-template-columns:1fr;
		gap:35px;
	}
	.section-heading h2 {
		font-size:25px;
	}
	/* 共通お問い合わせ欄 */
	.contact-band {
		display:block;
		padding:35px 24px;
	}
	.contact-band h2 {
		font-size:20px;
	}
	.contact-band .button {
		margin-top:24px;
		width:100%;
	}
	.page-title h1 {
		font-size:32px;
	}
	/* プロフィール */
	.profile-intro {
		grid-template-columns:1fr;
		gap:30px;
		margin-bottom:48px;
	}
	.profile-intro img {
		width:260px;
		justify-self:center;
	}
	.profile-intro h2 {
		font-size:30px;
	}
	.works-grid {
		columns:1;
	}
	.voice-grid,.movie-grid {
		grid-template-columns:1fr;
	}
	.voice-card {
		padding:20px 16px;
		gap:12px;
	}
	.voice-number {
		font-size:24px;
	}
	.contact-panel {
		padding:30px 20px;
	}
	.contact-panel h2 {
		font-size:21px;
	}
	.contact-panel .button {
		width:100%;
		padding:15px 10px;
	}
	.desktop-break {
		display:none;
	}
}


/* スマートフォン用：画面幅760px以下 */
@media(max-width:760px) {
	.hero>img {
		min-height:0;
		object-fit:contain;
	}
}

.header-inner {
	justify-content:center;
	min-height:76px;
}

.visually-hidden {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}


/* スマートフォン用：画面幅760px以下 */
@media(max-width:760px) {
	.header-inner {
		justify-content:flex-end;
		min-height:68px;
		padding-top:8px;
		padding-bottom:8px;
	}
}