@charset "utf-8";

/* ================================================================
   assets/css/style.css  –  Fusspflege  (modernised 2026-02)
   ================================================================
   - Mobile-first, fully responsive
   - CSS custom properties inherited from style.css (root theme)
   - No vendor prefixes for well-supported properties
   - No IE hacks
   - Float-free layout (flexbox / grid)
   ================================================================ */

/* ========================================
   0. Utility classes
   ======================================== */
.clear {
	clear: both;
}

.center {
	text-align: center;
}

.bold {
	font-weight: bold;
}

.red {
	color: #c00;
}

.link-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.4em;
	line-height: 1;
	margin-top: 1em;
}

/* --- Alignment --- */
.alignright {
	float: right;
	margin-left: 1rem;
	margin-bottom: 1rem;
}

.alignleft {
	float: left;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

/* SP link shown only on small screens inside PC layout */
#spLinkBlockInPc {
	display: none;
	grid-column: 1 / -1;
}

.font_1 {
	font-family: var(--font-serif);
}

/* ========================================
   1. Header bar  (#h)
   ======================================== */
#h {
	width: 100%;
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-bg-soft);
	padding: 0.4em var(--gutter);
	display: none;
	/* スマホでは非表示にしてヘッダーの高さを節約 */
}

h1 {
	max-width: var(--max-width);
	margin: 0 auto;
	overflow: hidden;
	color: royalblue;
	font-size: 0.8rem;
	font-weight: normal;
	text-align: right;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Status badges */
.reception,
.end_of_reception,
.cancel {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 500;
	padding: 0.15em 0.5em;
	border-radius: 3px;
	color: var(--color-white);
}

.reception {
	background-color: blue;
}

.end_of_reception {
	background-color: red;
}

.cancel {
	background-color: yellow;
	color: #000;
}

/* ========================================
   2. Header  (header / #head / #logo)
   ======================================== */
.header {
	width: 100%;
	border-bottom: 1px solid var(--color-border);
	background-color: #fff;
	position: relative;
	/* 非固定時もメニューの上に表示 */
	z-index: 10000;
}

.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
}

#head {
	max-width: var(--max-width);
	margin: 0 auto;
}

/* --- Logo row --- */
#logo {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	min-height: 3.5rem;
	/* スマホ時は小さく */
	border-bottom: 1px solid var(--color-border);
}

#logo a {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	/* スマホでは可変幅 */
	border-right: none;
	/* スマホでは右ボーダー不要 */
	text-align: center;
	padding: 0.5rem;
	pointer-events: none;
	/* SP時はリンク無効 */
	cursor: default;
}

#logo .ue,
#logo .sita {
	display: block;
	line-height: 1;
}

.ue {
	font-family: var(--font-serif);
	font-weight: lighter;
	color: var(--color-primary);
	font-size: clamp(1.6rem, 4vw, 2.5rem);
}

.sita {
	font-family: var(--font-body);
	color: var(--color-primary);
}

/* --- Tel block --- */
#logo #tel {
	flex: 0 0 17.2rem;
	display: none;
	/* スマホでは非表示 */
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 0.5rem 0.75rem;
	border-left: 1px solid var(--color-border);
}

#logo #tel p {
	font-family: var(--font-sans);
	color: var(--color-primary);
	line-height: 1.2;
}

#logo #tel p span {
	font-size: 1.5rem;
}

#logo #tel p+p span {
	font-size: 1rem;
}

#jikan {
	margin-top: 0.4em;
}

.small {
	height: 2em;
}

/* ========================================
   3. Navigation  (#menu / #dropmenu)
   ======================================== */

/* モバイル向けスタイル（デフォルト） */
#nav-toggle {
	display: block;
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 30px;
	height: 30px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 10001;
	/* ヘッダーより上に */
	padding: 0;
}

#nav-toggle span {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--color-primary);
	margin-bottom: 5px;
	transition: all 0.3s ease-in-out;
}

#nav-toggle span:last-child {
	margin-bottom: 0;
}

/* ハンバーガーのアニメーション */
#nav-toggle.active span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

#nav-toggle.active span:nth-child(2) {
	opacity: 0;
}

#nav-toggle.active span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

#menu #dropmenu {
	margin: 0;
	padding: 0;
	display: none;
	/* デフォルトで非表示 */
	flex-direction: column;
	position: fixed;
	/* absoluteからfixedに変更して画面いっぱいに */
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	padding-top: 5rem;
	/* ヘッダーの高さ分下げる */
	background-color: rgba(255, 255, 255, 0.95);
	/* 背景色を不透明に近く */
	overflow-y: auto;
	/* メニューが長い場合はスクロール */
	z-index: 9999;

}

#menu #dropmenu.is-open {
	display: flex;
	/* 開いたときに表示 */
}

/* メニュー展開中は背後のロゴやリンクをクリック不可にする */
.is-menu-open #logo,
.is-menu-open #logo a,
.is-menu-open #tel,
.is-menu-open #h {
	pointer-events: none !important;
}

/* ハンバーガーボタン自体は押せないといけない */
.is-menu-open #nav-toggle {
	pointer-events: auto !important;
	z-index: 10002;
	/* header(10000)より上 */
}

#menu #dropmenu>li {
	flex: none;
	/* 等幅解除 */
	width: 100%;
	text-align: center;
	line-height: 1.3;
	border-right: none;
	border-bottom: 1px solid var(--color-border);
}

.all {
	border-right: 1px solid var(--color-border);
}

.last {
	border-right: none;
}

#menu a {
	color: darkblue;
}

#dropmenu>.all>a:hover,
#dropmenu>.all>a:focus-visible,
#dropmenu>.last>a:hover,
#dropmenu>.last>a:focus-visible {
	background-color: var(--color-bg-soft);
	color: var(--color-accent);
}

/* --- Dropdown sub-menus --- */
/* スマホ用アコーディオン・サブメニュー */
#dropmenu .all,
#dropmenu .last {
	position: relative;
	/* トグルボタンの配置基準 */
}

#dropmenu .all>a,
#dropmenu .last>a {
	display: block;
	padding: 1.2rem 0;
	/* タップしやすいように広げる */
}

/* 通常時は非表示 */
#dropmenu .all ul,
#dropmenu .last ul {
	display: none;
	width: 100%;
	background-color: var(--color-bg-soft);
	border-top: 1px dotted var(--color-border);
}

/* アコーディオンが開いたとき */
#dropmenu .all.is-accordion-open>ul,
#dropmenu .last.is-accordion-open>ul {
	display: block;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#dropmenu .all ul li,
#dropmenu .last ul li {
	width: 100%;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#dropmenu .all ul li a,
#dropmenu .last ul li a {
	display: block;
	/* パディングを確実に効かせる */
	padding: 1rem 1.5rem;
	/* 上下＋左右にも余白 */
	font-size: 1rem;
}

/* トグルボタン（JSで追加） */
.dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	width: 4rem;
	/* タップしやすい範囲 */
	height: 3.5rem;
	/* 高さ固定 */
	cursor: pointer;
	z-index: 10;
}

.dropdown-toggle::after {
	content: '+';
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--color-primary);
	transition: transform 0.3s;
}

.is-accordion-open>.dropdown-toggle::after {
	transform: rotate(45deg);
	/* + が × に */
}



/* ========================================
   4. Company bar (#vansan_wrapper)
   ======================================== */
#vansan_wrapper {
	width: 100%;
	background-color: var(--color-bg);
	margin-top: 1rem;
}

#by_vansan {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0.6rem var(--gutter);
	text-align: center;
}

#by_vansan p {
	font-family: var(--font-serif);
	font-size: clamp(0.75rem, 2vw, 0.95rem);
	color: var(--color-primary);
	letter-spacing: 0.05em;
}

#by_vansan a {
	color: var(--color-primary);
	border: 1px solid var(--color-border);
	padding: 0.5em 1em;
	transition: background-color 0.25s;
}

#by_vansan a:hover {
	background-color: var(--color-bg-soft);
}

/* ========================================
   5. Hero stage  (#stage_wrap)
   ======================================== */
#stage_wrap {
	width: 100%;
	height: 100%;
	border: 1px solid var(--color-border);
	background: url("../img/back.jpg") center / cover no-repeat;
}

#main_stage {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-content: start;
}

/* -- Schedule hero card -- */
#fuss_sche {
	width: 100%;
	min-height: 240px;
	padding: 2rem 1rem;
	/* 太い枠線を削除しシンプルに */
	border: none;
	border-radius: var(--radius);
	background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url("../img/top-pc.jpg") center / cover no-repeat;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#fuss_sche h2 {
	max-width: 100%;
	margin: 0 auto 1.5rem;
	font-size: clamp(1.4rem, 4vw, 2.2rem);
	text-align: center;
	padding: 1rem 1.5rem;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	line-height: 1.4;
	color: var(--color-primary);
	opacity: 0.85;
}

#fuss_sche a {
	display: inline-block;
	margin: 0 auto;
}

.uki {
	display: inline-block;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	padding: 0.8rem 2rem;
	background-color: var(--color-primary);
	color: #fff;
	/* テキスト白 */
	font-family: var(--font-sans);
	/* ゴシック体に変更 */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	border-radius: 50px;
	/* 丸いボタン */
	transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
	text-decoration: none;
}

.uki:hover {
	background-color: var(--color-accent);
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	color: var(--color-primary);
}

.uki_white {
	display: inline-block;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	padding: 0.8rem 2rem;
	background-color: #fff;
	color: var(--color-primary) !important;
	font-family: var(--font-sans);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	border-radius: 50px;
	border: 1px solid var(--color-primary);
	transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
	text-decoration: none;
}

.uki_white:hover {
	background-color: var(--color-primary);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#fuss_sche a:hover {
	background: var(--color-bg-soft);
}

/* -- NEWS -- */
#news {
	width: 100%;
	background: #fff;
	padding: 1rem;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

#news h3 {
	padding: 0.5rem 0;
	border-bottom: 2px solid var(--color-border);
	background-color: transparent;
	font-size: 1.2rem;
	color: var(--color-primary);
}

#news article {
	padding: 0;
	background-color: transparent;
}

#news p {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--color-border);
	border-color: rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 1rem;
	align-items: baseline;
}

#news p:last-child {
	border-width: 0;
	padding-bottom: 0;
}

#news span {
	font-family: var(--font-sans);
	font-weight: bold;
	color: var(--color-primary);
	min-width: 6em;
}

#news a {
	color: var(--color-text);
	text-decoration: none;
}

#news a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

/* -- EC SHOP -- */
#ec_shop {
	display: none;
	/* hidden on mobile, shown on desktop */
	width: 100%;
	padding: 0.75rem;
	background-color: var(--color-bg);
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.5s;
}

#ec_shop h3 {
	padding: 0.6rem 1rem;
	border-left: 6px solid var(--color-border);
	background-color: var(--color-bg);
	font-weight: bold;
	font-size: 1.1rem;
	margin-bottom: 0.6rem;
}

#ec_shop #ec_banner {
	display: flex;
	align-items: center;
	/* 縦中央 */
	justify-content: center;
	/* 横中央 */
	width: 100%;
	aspect-ratio: 220 / 450;
	max-width: 220px;
	margin: 0 auto;
	background: url("../img/ec_banner.jpg") center / contain no-repeat;
}

#ec_shop #ec_banner .uki {
	margin: 0;
	/* 親のflexで中央配置するのでマージン不要 */
}

/* Hover transitions for cell images */
.cell img {
	transition: opacity 0.5s;
}

.cell img:hover {
	opacity: 0.7;
}



/* ========================================
   6. Content – headings shared
   ======================================== */
h3,
h4 {
	font-family: var(--font-serif);
	color: var(--color-primary);
	font-weight: bold;
}

h2 {
	font-size: 1em;
}

h3 a,
h4 a {
	font-family: var(--font-sans);
	font-size: 1.1rem;
}

/* ========================================
   7. Topics grid  (#topi_wrap / #topics)
   ======================================== */
#wrapper {
	width: 100%;
	margin-top: 2rem;
}

#topi_wrap {
	width: 100%;
	margin-bottom: 3rem;
}

#topics {
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	/* カード幅を少し広く */
	gap: 2rem;
	/* カード間の余白をしっかり取る */
	padding: 0 var(--gutter);
}

.block,
.block_last {
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	/* 全体をカード化 */
	overflow: hidden;
	/* 角丸からはみ出さないように */
	transition: transform 0.3s, box-shadow 0.3s;
}

.block:hover,
.block_last:hover {
	transform: translateY(-5px);
	/* ホバーで少し浮く */
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 1. English Title (First h3) */
.block h3:first-child,
.block_last h3:first-child {
	order: -1;
	/* 一番上 */
	font-family: var(--font-serif);
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	color: var(--color-text-light);
	padding: 0.8rem;
	text-align: center;
	border: none;
	/* ボーダー削除 */
}

/* 2. Image */
.block>a,
.block_last>a {
	display: block;
	overflow: hidden;
	/* 画像拡大用 */
}

.block img,
.block_last img {
	width: 100%;
	height: auto;
	aspect-ratio: 3/2;
	/* アスペクト比固定 */
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	/* 親のradiusに従う */
	box-shadow: none;
	/* 影はカード全体に */
	transition: transform 0.5s ease;
}

.block:hover img,
.block_last:hover img {
	transform: scale(1.05);
	/* 画像ズーム */
	opacity: 1;
	/* 透明度は変えない */
}

/* 3. Japanese Title (Second h3 with link) */
.block h3:nth-of-type(2),
.block_last h3:nth-of-type(2) {
	background: none;
	border: none;
	text-align: center;
	padding: 1rem 0.5rem 0.5rem;
}

.block h3 a,
.block_last h3 a {
	font-weight: bold;
	color: var(--color-primary);
	background: linear-gradient(transparent 70%, var(--color-highlight) 0%);
	/* マーカー細く */
	text-decoration: none;
}

/* 4. Paragraph */
.block p,
.block_last p {
	padding: 0 1.25rem 1.5rem;
	/* 下と左右に余白 */
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--color-text);
	background: none;
	border: none;
	flex-grow: 1;
	/* 高さを揃えるため */
}

/* ========================================
   8. Main content area  (#content)
   ======================================== */
#content {
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
	padding: 0 var(--gutter);
}

/* Sidebar (#right) styles */
#right {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 100%;
}

#right>div {
	text-align: center;
	/* 子要素を中央寄せ */
}

#right img {
	margin: 0 auto 0.5rem;
	/* 画像中央寄せ */
	box-shadow: var(--shadow-card);
	transition: opacity 0.3s;
}

#right img:hover {
	opacity: 0.8;
}

#right h3 {
	font-family: var(--font-serif);
	border-bottom: 2px solid var(--color-border);
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	text-align: center;
}

#right .link-right {
	text-align: center;
}

/* --- Main article (<article id="left">) --- */
article#left h3 {
	padding: 0.6rem 1rem;
	border: 1px solid var(--color-border);
	border-left: 6px solid var(--color-border);
	margin-bottom: 1rem;
	background: #fff;
}

article#left h4 {
	padding: 0;
	font-size: 1.05rem;
	margin-bottom: 1rem;
}

.heading-accent {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 1.1rem;
	font-weight: bold;
	background: linear-gradient(transparent 60%, var(--color-highlight) 0%);
}

.lesson-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: start;
	margin-top: 1em;
}

.box {
	line-height: 1.9;
	border-bottom: 2px dotted var(--color-border);
	padding-bottom: 1em;
}

.lesson-row>img {
	display: block;
	max-width: 150px;
	margin: 0 auto;
}

/* --- Q&A Specific Styles --- */
#qalist {
	list-style: decimal;
	margin: 0 0 0 2rem;
	padding-left: 0;
}

#qalist li {
	margin-bottom: 0.5rem;
}

#qalist a {
	text-decoration: underline;
}

#qanda dt {
	margin-top: 1.5rem;
	margin-bottom: 0.8rem;
	font-weight: bold;
	padding: 0.8rem;
	background-color: #fff;
	border-left: 5px solid var(--color-primary);
	line-height: 1.5;
}

#qanda dd {
	margin: 0 0 2rem 0;
	padding: 0 1rem 0.5rem;
	line-height: 1.8;
}

.sc img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Tejun (Process) Specific Styles --- */
.video-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}

.video-grid video {
	width: 100%;
	height: auto;
}

.process-list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.process-list figure {
	margin: 0;
}

.process-list img {
	width: 100%;
	height: auto;
	display: block;
}

.process-list figcaption,
.video-grid figcaption {
	margin-bottom: 0.5rem;
	font-weight: bold;
}

@media (min-width: 640px) {

	.video-grid,
	.process-list {
		grid-template-columns: 1fr 1fr;
	}
}

.section-medical,
.section-salon {
	margin-top: 2em;
}

.cell-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding-top: 1rem;
}

.cell {
	width: 100%;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	/* 画像のはみ出し防止 */
	transition: transform 0.3s, box-shadow 0.3s;
}

.cell:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.cell img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform 0.5s;
}

.cell:hover img {
	transform: scale(1.05);
	opacity: 1;
	/* hover opacityリセット */
}

/* IDセレクタを含めて詳細度を上げる */
article#left .cell h4 {
	padding: 1.5rem 1.5rem 0.5rem;
	/* 上下の余白増 */
	font-size: 1.2rem;
	line-height: 1.4;
	margin-bottom: 0;
	/* 詳細度で負けていた場合のマージンリセット */
}

article#left .cell p {
	padding: 0 1.5rem 2rem;
	/* 下の余白増 */
	margin-top: 0.5rem;
	font-size: 0.95rem;
	line-height: 1.8;
	/* 行間ゆったり */
	color: var(--color-text);
}

/* Link with arrow buttons */
.link-right {
	text-align: center;
	margin-top: 1rem;
}

.link-right a {
	display: inline-block;
	padding: 0.5rem 1.2rem;
	background-color: var(--color-bg-soft);
	color: var(--color-primary);
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: bold;
	transition: all 0.3s;
	text-decoration: none;
}

.link-right a:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* --- Sidebar (<aside id="right">) --- */
aside#right h3 {
	padding: 0.6rem 1rem;
	border: 1px solid var(--color-border);
	border-left: 6px solid var(--color-border);
	background: #fff;
}

aside#right img {
	transition: opacity 0.5s;
	margin-top: 0.75rem;
}

aside#right img:hover {
	opacity: 0.7;
}

#link img {
	margin-bottom: 1rem;
}

article#left strong a {
	font-size: 1rem;
}

/* ========================================
   Content Page Styles (.box_t, .sc, .btn-link)
   ======================================== */
.box_t {
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px dotted var(--color-border);
}

.box_t:last-child {
	border-bottom: none;
}

.box_t h4 {
	font-size: 1.2rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--color-border);
	padding-bottom: 0.5rem;
}

.sc {
	margin: 0 auto;
	text-align: center;
}

.sc img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}



.lesson-row figure {
	text-align: center;
	margin: 1rem 0;
}

.lesson-row img {
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	margin: 1rem auto;
	/* SP時は中央寄せ */
	display: block;
	/* margin autoを効かせるため */
}

/* Utility classes */
.no-shadow {
	box-shadow: none !important;
}

/* ========================================
   9. Arrow icon
   ======================================== */
.schedule-block h5 {
	margin-top: 1rem;
}

article#left span,
aside#right span {
	margin-right: 0.5rem;
	height: 20px;
	line-height: 18px;
	width: auto;
	display: inline-block;
	position: relative;
}

.arrow {
	background: var(--color-primary);
	border-radius: 50%;
	width: 1em;
	height: 1em;
}

.arrow::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-right-width: 0;
	border-left-color: yellow;
	position: absolute;
	top: 3px;
	left: 24px;
}

/* ========================================
   10. Footer
   ======================================== */
#page-top {
	max-width: var(--max-width);
	margin: 0 auto;
}

#page-top p {
	padding: 0.6rem;
	width: fit-content;
	text-align: center;
	margin-left: auto;
	background-color: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius) var(--radius) 0 0;
	margin-bottom: -1px;
}

#ft_up {
	background-color: var(--color-bg-soft);
	border-top: 1px solid var(--color-border);
}

#ft_up nav {
	max-width: var(--max-width);
	margin: 0 auto;
	font-size: 0.75rem;
	line-height: 1.8;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 1em var(--gutter);
	gap: 1rem;
}

#ft_up nav ul {
	display: flex;
	flex-direction: column;
	flex: 1 1 8rem;
	min-width: 0;
	padding: 0 0.75rem;
	border-right: 1px solid var(--color-bg);
}

#ft_up nav ul:last-child {
	border-right: 0;
}

.ft_b {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 0.25em;
}

/* Footer bottom bar */
#ft_m {
	background-color: var(--color-border);
}

#ft_m nav {
	max-width: var(--max-width);
	margin: 0 auto;
	font-size: 0.75rem;
	line-height: 1.8;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 1em var(--gutter);
	gap: 1rem;
}

#ft_m nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
}

.btn {
	line-height: 2.2rem;
	margin: 0 auto;
}

.btn a {
	display: block;
	min-width: 10rem;
	padding: 0.25rem 1rem;
	background-color: var(--color-primary);
	color: var(--color-white);
	text-align: center;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.5s, background-color 0.25s;
}

.btn a:hover,
.btn a:focus-visible {
	background-color: #283593;
	box-shadow: var(--shadow-none);
	color: var(--color-white);
}

#copy {
	color: var(--color-primary);
	font-size: 0.8rem;
	font-weight: normal;
	text-align: right;
}

/* ========================================
   11. Sub-page common styles
   ======================================== */

/* --- Tables --- */
td {
	background: var(--color-border);
	text-align: center;
	color: var(--color-white);
	border-bottom: 1px solid var(--color-white);
	line-height: 2;
	padding: 0.25rem 0.5rem;
}

td+td {
	background: var(--color-bg-soft);
	text-align: left;
	padding-left: 1em;
	padding-right: 1em;
	color: #000;
	border-bottom: 1px solid var(--color-border);
}

dt {
	font-weight: bold;
}

dd {
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 1em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"] {
	/* width is controlled by size attribute or class */
	padding: 0.5em;
	font-weight: bold;
	border: 1px solid var(--color-border);
}

.long {
	width: 100%;
	/* SP: フル幅 */
	font-weight: bold;
	box-sizing: border-box;
}

/* Seminar table */
.sem-table {
	border: 1px solid var(--color-border);
	margin-bottom: 1.5rem;
	width: 100%;
	margin-top: 1rem;
}

.sem-table td {
	width: 30%;
}

.sem-table td+td {
	width: 70%;
}

.btn-cell {
	text-align: center;
	background-color: var(--color-white);
	/* Override td background */
	border: none;
}



/* --- Course page --- */
.course-index {
	list-style: decimal;
	margin: 1rem 0 2rem 2rem;
	padding-left: 0;
}

.course-index li {
	margin-bottom: 0.4rem;
}

.course-index a {
	text-decoration: underline;
}

.course-section {
	margin-bottom: 2rem;
}

.text-caution {
	color: red;
	font-weight: bold;
}

/* --- Schedule page --- */
.schedule-block {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
}

/* SP: Center the button */
.schedule-block .btn-link {
	display: table;
	margin: 1.5rem auto 0;
}

.schedule-block h5 {
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

.schedule-detail {
	display: grid;
	grid-template-columns: 5em 1fr;
	gap: 0.25rem 0.5rem;
	margin-bottom: 0.75rem;
}

.schedule-detail dt {
	font-weight: bold;
	padding: 0.25rem 0;
}

.schedule-detail dd {
	margin: 0;
	padding: 0.25rem 0;
}

.schedule-note {
	font-size: 0.9em;
	color: #666;
	margin-top: 0.25rem;
}

/* --- Schedule Status Badges --- */
.reception,
.end_of_reception {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 4px;
	margin-left: 0.5em;
	font-weight: bold;
	font-size: 0.85em;
	color: #fff;
	white-space: nowrap;
	/* Prevent wrapping */
	line-height: 1;
	vertical-align: middle;
}

.reception {
	background-color: var(--color-primary);
}

.end_of_reception {
	background-color: #999;
}

/* --- Teacher list --- */
.teacher-list {
	list-style: none;
	padding-left: 1em;
}

/* --- Utility --- */


.box+.box {
	margin-top: 1rem;
}

.mt-1 {
	margin-top: 1rem !important;
}

.mb-1 {
	margin-bottom: 1rem !important;
}

/* --- Jyukou Page Modern Layout --- */
.jyukou-intro {
	margin-bottom: 2rem;
	line-height: 1.8;
}

.jyukou-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

.jyukou-card {
	height: 100%;
}

.jyukou-card h5 {
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--color-text);
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

.jyukou-card p {
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 1rem;
}

.achievement-box {
	background-color: #f5f5f5;
	padding: 1rem;
	border-radius: 4px;
	font-size: 0.9rem;
}

.achievement-title {
	font-weight: bold;
	color: #666;
	margin-bottom: 0.25rem;
	display: block;
}

/* --- Medi Pages --- */
.medi-section {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
	margin-bottom: 2rem;
	background: #fff;
	padding: 1.5rem;
	/* border: 1px solid var(--color-border); */
}

.medi-text {
	flex: 1;
}

.medi-image {
	flex: 0 0 150px;
	margin: 0;
	text-align: center;
}

.medi-section h4 {
	margin-top: 0;
}

@media (max-width: 600px) {
	.medi-section {
		flex-direction: column;
		align-items: center;
	}

	.medi-image {
		margin-top: 1rem;
	}
}

/* --- Institute Page --- */
.institute-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.institute-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border: 1px solid var(--color-border);
	text-decoration: none;
	color: var(--color-text);
	background: #fff;
	transition: background-color 0.2s;
	min-height: 120px;
	text-align: center;
}

.institute-item:hover {
	background-color: #f5f5f5;
	text-decoration: none;
}

.institute-item img {
	max-width: 100%;
	height: auto;
	max-height: 60px;
	margin-bottom: 0.5rem;
}

.institute-item p {
	font-size: 0.9rem;
	margin: 0;
	line-height: 1.4;
	font-weight: bold;
}

/* --- Salon Pages --- */
.salon-section {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px dashed #ddd;
}

.salon-section:last-child {
	border-bottom: none;
}

.salon-header {
	margin-bottom: 1rem;
}

.salon-header a {
	font-size: 1.2rem;
	text-decoration: none;
	color: var(--color-primary);
}

.salon-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.salon-info {
	flex: 1;
	min-width: 300px;
}

.salon-images {
	flex: 0 0 320px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 auto;
	/* SPでは中央寄せ */
}

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

/* Service Course */
.course-wrap {
	display: flex;
	border: 1px solid var(--color-border);
	margin-bottom: 1.5rem;
	background: #fff;
}

.course-left {
	background: var(--color-primary);
	color: #fff;
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: bold;
}

.course-right {
	padding: 1rem;
	flex: 1;
}

.course-eng {
	font-size: 0.8rem;
	color: #999;
	margin-bottom: 0.2rem;
}

.course-name {
	font-weight: bold;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	color: var(--color-primary);
}

.course-content {
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.course-detail {
	font-size: 0.9rem;
}

/* Option Grid */
.option-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.option-item {
	border: 1px solid #ddd;
	padding: 1rem;
	background: #f9f9f9;
}

.option-name {
	font-weight: bold;
	margin-bottom: 0.5rem;
	color: #333;
	border-bottom: 1px dotted #ccc;
	padding-bottom: 0.5rem;
}

/* Interview */
.interview-box {
	margin-bottom: 2rem;
}

.interview-q {
	font-weight: bold;
	color: var(--color-primary);
	margin-bottom: 0.5rem;
	display: block;
}

.interview-a {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	display: block;
}



/* Salon Detail specific (1 column layout) */
.salon-images-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin: 1rem 0;
}

.salon-images-row img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.salon-links {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Button Styles */
.btn-wrapper {
	text-align: center;
	margin: 0 auto;
}

.btn-link {
	display: inline-block;
	padding: 1rem 3rem;
	background-color: var(--color-primary);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	transition: opacity 0.3s;
	font-weight: bold;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	margin-top: 1rem;
}

.btn-link:hover {
	opacity: 0.8;
	color: #fff;
	text-decoration: none;
}

/* Salon List */
.salon-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.salon-card {
	border: 1px solid var(--color-border);
	padding: 1rem;
	background: #fff;
	font-size: 0.9rem;
}

.salon-card p {
	margin-bottom: 0.25rem;
}

.salon-name {
	font-weight: bold;
	margin-bottom: 0.5rem !important;
	border-bottom: 1px solid #eee;
	padding-bottom: 0.5rem;
	color: var(--color-primary);
}

.salon-name a {
	text-decoration: none;
	color: inherit;
}

.salon-card strong {
	color: #666;
}

/* --- Q&A answers separator --- */
.qanda-answers {
	border-top: 1px solid var(--color-border);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}

#qanda dt {
	scroll-margin-top: 350px;
}

/* --- Procedure boxes --- */
.box_t {
	width: 100%;
	line-height: 1.9;
	margin-bottom: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.box_t:last-child {
	margin-bottom: 0;
}

.box_t .right {
	padding-bottom: 0.6rem;
}

/* --- Institute --- */
#institute p {
	width: 180px;
	height: 60px;
	margin: 0.6rem;
	padding: 0.6rem;
	display: inline-block;
	text-align: center;
	line-height: 2;
	box-shadow: 0 0 0 5px var(--color-border) inset;
	position: relative;
	z-index: 1;
	background: var(--color-white);
	overflow: hidden;
}

#institute p::before,
#institute p::after {
	border-radius: 50%;
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	content: "";
	background-color: royalblue;
	box-shadow: 0 0 0 2px var(--color-white), 0 0 0 7px royalblue;
}

#institute p::before {
	top: -10px;
	left: -10px;
}

#institute p::after {
	bottom: -10px;
	right: -10px;
}

/* --- Students --- */
#student h5 {
	font-size: 1.05rem;
}

/* --- Teachers --- */
.tec {
	width: 100%;
	border-bottom: 1px solid var(--color-border);
	margin: 1.25rem 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding-bottom: 1rem;
}

.tec div {
	flex: 1 1 20rem;
}

.tec img {
	height: fit-content;
	margin: 0 auto;
	/* SPでは中央寄せ */
}

/* --- Trial --- */
.taiken-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
	margin-top: 1.5rem;
}

.taiken-text {
	flex: 1;
}

.taiken-image {
	flex: 0 0 150px;
	margin: 0;
	text-align: center;
}

@media (max-width: 600px) {
	.taiken-content {
		flex-direction: column;
		align-items: center;
	}

	.taiken-image {
		margin-top: 1rem;
	}
}

/* --- Salon list --- */
#zenkoku {
	width: 100%;
	border: 1px solid var(--color-border);
	padding: 0.6rem;
	text-align: center;
}

.fc_list {
	width: 100%;
	line-height: 1.7;
	font-size: 0.9rem;
	border: 1px solid var(--color-border);
}

.fc_list a {
	text-decoration: underline;
}

.fc_list th {
	width: 25%;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
	padding: 0.6rem;
	text-align: center;
}

.fc_list td {
	background: var(--color-bg-soft);
	color: #000;
	border-bottom: 1px solid var(--color-border);
}

.fc_list td+td {
	border-left: 1px solid var(--color-border);
}

/* --- Course --- */
#course_shop,
#course_shop2 {
	width: 100%;
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

#course_shop div {
	flex: 1 1 15rem;
	padding: 0.6rem;
	border: 1px solid var(--color-border);
}

#course_shop2 div {
	flex: 1 1 15rem;
	padding: 0.6rem;
}

#shop_disc2 {
	margin: 1.25rem 0;
}

/* --- Service (course wrap) --- */
#course_wrap {
	width: 100%;
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.course_left {
	flex: 0 0 5rem;
	height: 5rem;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.course_left span {
	font-size: 3.5rem;
	font-family: var(--font-serif);
	line-height: 1;
}

.course_right {
	flex: 1 1 20rem;
}

.course_right p {
	margin-left: 1em;
}

.course_name {
	font-size: 1.05rem;
	font-weight: bold;
	border-bottom: 1px solid var(--color-border);
}

.course_cont,
.course_cont_b,
.course_cont_c,
.course_cont_d {
	color: var(--color-white);
	width: fit-content;
	min-width: 12rem;
	padding: 0.3rem 0.75rem;
	text-align: center;
}

.course_cont {
	background-color: red;
}

.course_cont_b {
	background-color: #000;
}

.course_cont_c {
	background-color: seagreen;
}

.course_cont_d {
	background-color: mediumblue;
}

.course_nai {
	width: 100%;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding-bottom: 1rem;
}

.course_nai img {
	margin-left: 0;
}

#option_wrap {
	width: 100%;
	margin-top: 1.25rem;
	margin-bottom: 3rem;
}

.option_name {
	font-size: 1.05rem;
	font-weight: bold;
	border-bottom: 1px solid var(--color-border);
	margin-top: 2rem;
}

.option_info {
	font-size: 0.9rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2rem;
}

.attension {
	font-size: 0.95rem;
	font-weight: bold;
	margin-top: 2rem;
}

.attension2 {
	color: red;
	font-size: 0.75rem;
	font-weight: bold;
}

/* Circle decorations */
.cir,
.cir_r {
	width: min(300px, 80vw);
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1rem auto;
}

.cir {
	background-color: gold;
}

.cir_r {
	background-color: lightpink;
}

.cir div,
.cir_r div {
	width: 85%;
	text-align: center;
}

.cir_r .font_1 {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
}

/* YouTube */
.youtube {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.youtube iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Twitter widget */
.twitter {
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 1;
	vertical-align: text-top;
}

/* Blink animation */
.blink {
	animation: blink 2s ease infinite;
	font-family: var(--font-sans);
}

@keyframes blink {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* --- Column / interview --- */
.intvw {
	line-height: 3;
}

/* --- Catalog --- */
.catalog-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.catalog_box {
	width: 100%;
	padding: 0.6rem;
	border: 1px dotted var(--color-border);
	background-color: #fff;
}

.catalog_box p {
	margin-left: 0.6rem;
}

.catalog_box img {
	margin: 0 auto;
}

#catalog_menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* SPでは中央揃え */
	gap: 0.5rem;
	margin-bottom: 1rem;
}

#catalog_menu a {
	display: block;
	/* margin: 0 0.6rem 0.6rem 0; gapに任せる */
	margin: 0;
	width: 31%;
}

#catalog_menu img:hover {
	opacity: 0.7;
	box-shadow: var(--shadow-none);
	transition: box-shadow 0.5s, opacity 0.5s;
}

#ws h5 {
	font-size: 1.05rem;
}

/* --- Form --- */
#form_box {
	max-width: var(--max-width);
	margin: 0 auto;
}

#form_box h2 {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	text-align: center;
	margin-bottom: 1rem;
}

#form_box table {
	width: 100%;
	border: 1px solid var(--color-border);
	border-bottom: none;
	/* 下邊ボーダー重複回避 */
	border-collapse: collapse;
	margin-bottom: 2rem;
}

#form_box th,
#form_box td {
	display: block;
	width: 100%;
	border: none;
	/* 個別に設定 */
	border-bottom: 1px solid var(--color-border);
}

#form_box th {
	padding: 0.5rem 1rem;
	background: var(--color-bg-soft);
	text-align: left;
	/* SPは左寄せ */
}

#form_box td {
	background: var(--color-white);
	color: #000;
	text-align: left;
	padding: 0.6rem 1rem;
}

#form_box tr {
	display: block;
	background: var(--color-white);
}

#form_box b {
	color: red;
}

.error-summary {
	background: #fee;
	color: #c00;
	padding: 0.75rem 1rem;
	border: 1px solid #fcc;
	margin-bottom: 1.5rem;
	border-radius: var(--radius);
}

/* SP: フォーム要素が画面からはみ出さないように */
#form_box input[type="text"],
#form_box input[type="email"],
#form_box input[type="tel"],
#form_box select,
#form_box textarea {
	max-width: 100%;
	box-sizing: border-box;
}

#form_box select {
	width: 100%;
}

#form_box textarea {
	width: 100% !important;
	/* インラインstyle上書き */
	box-sizing: border-box;
}

.name-group {
	display: flex;
	align-items: center;
	margin-bottom: 0.8rem;
}

.name-group input {
	flex: 1;
	margin-left: 0.5rem;
}

#form_box ul {
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#form_box li {
	text-align: left;
	min-width: 12rem;
}

#form_box .last {
	flex-basis: 100%;
}

#form_box .submit {
	display: block;
	margin: 1.5rem auto;
	height: auto;
	padding: 0.75rem 2rem;
	font-size: 1.2rem;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.25s;
}

#form_box .submit:hover {
	background: wheat;
}

#fin {
	max-width: 600px;
	margin: 0 auto;
}

#chk_box {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

#chk_sub {
	display: block;
	margin: 1.5rem auto;
	height: auto;
	padding: 0.75rem 2rem;
	font-size: 1.2rem;
	background: var(--color-border);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.25s;
}

#chk_sub:hover {
	background: wheat;
}

#chk_table {
	width: 100%;
	margin: 0 auto;
	border: 1px solid var(--color-border);
	border-bottom: none;
}

#chk_table th,
#chk_table td {
	display: block;
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--color-border);
}

#chk_table th {
	padding: 0.5rem 1rem;
	background: var(--color-bg-soft);
	text-align: left;
}

#chk_table td {
	background: var(--color-white);
	color: #000;
	text-align: left;
	padding: 0.6rem 1rem;
}

#chk_table tr {
	display: block;
	background: var(--color-white);
}

#chk_table b {
	color: red;
}

#chk_table ul {
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#chk_table li {
	text-align: left;
	min-width: 12rem;
}

select {
	padding: 0.5em;
}

/* ========================================
   12. Responsive – tablet  (≥ 640px)
   ======================================== */
@media screen and (min-width: 640px) {
	.cell-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	.lesson-row {
		grid-template-columns: 1fr auto;
	}

	.lesson-row img {
		margin: 0;
		/* PC時はリセット（左寄せ/グリッド配置に従う） */
	}

	.tec img {
		margin: 0;
		/* PC時は左寄せ */
	}

	.salon-images {
		margin: 0;
		/* PC時は左寄せ */
	}

	.catalog_box {
		/* Flex handled by parent .catalog-grid */
		width: calc(50% - 0.75rem);
	}

	#form_box th,
	#chk_table th {
		display: table-cell;
		/* PCでは横並びに戻す */
		width: 30%;
		border: 1px solid var(--color-border);
	}

	#form_box td,
	#chk_table td {
		display: table-cell;
		/* PCでは横並びに戻す */
		border: 1px solid var(--color-border);
	}

	#form_box tr,
	#chk_table tr {
		display: table-row;
	}

	#form_box table,
	#chk_table {
		border-bottom: 1px solid var(--color-border);
	}

	.long {
		width: 220px;
		/* PCでは固定幅に戻す */
	}

	#form_box select {
		width: auto;
		/* PCでは自動幅 */
	}

	#form_box textarea {
		width: 400px !important;
		/* PCでは固定幅に戻す */
	}

	.name-group {
		display: inline-flex;
		width: auto;
		margin-right: 1.5rem;
		margin-bottom: 0;
	}

	.name-group input {
		width: auto;
		flex: none;
	}

	/* PC: Left align the button back */
	.schedule-block .btn-link {
		margin: 1rem 0 0;
	}
}

/* ========================================
   13. Responsive – desktop  (≥ 960px)
   ======================================== */
@media screen and (min-width: 960px) {
	#head {
		border-left: 1px solid var(--color-border);
		border-right: 1px solid var(--color-border);
	}

	/* h1バーを表示 */
	#h {
		display: block;
	}

	/* ハンバーガー非表示 */
	#nav-toggle {
		display: none;
	}

	/* ロゴ行をPC用に復帰 */
	#logo {
		min-height: 5rem;
	}

	#logo a {
		flex: 0 0 17.1rem;
		border-right: 1px solid var(--color-border);
		pointer-events: auto;
		/* PCではリンク有効 */
		cursor: pointer;
	}

	#logo #tel {
		display: flex;
		/* PC時は表示 */
	}

	/* メニューを通常表示 */
	#menu #dropmenu {
		display: flex;
		flex-direction: row;
		position: static;
		width: auto;
		height: auto;
		/* SP用の100vhをリセット */
		padding-top: 0;
		/* SP用の5remをリセット */
		overflow-y: visible;
		/* SP用のautoをリセット */
		border-top: none;
		box-shadow: none;
		background-color: transparent;
	}

	#menu #dropmenu>li {
		flex: 1 1 0;
		border-bottom: none;
		border-right: 1px solid var(--color-border);
	}

	#menu #dropmenu>li.last {
		border-right: none;
	}

	/* PC用ドロップダウン（ホバーで表示） */
	#dropmenu .all,
	#dropmenu .last {
		position: relative;
		z-index: 1000;
	}

	#dropmenu .all a,
	#dropmenu .last a {
		padding: 0.625rem 0;
		/* PC時は元のパディング */
	}

	/* サブメニューのPC用スタイル（absoluteで浮かす） */
	#dropmenu .all ul,
	#dropmenu .last ul {
		display: block;
		/* blockに戻す */
		position: absolute;
		top: 100%;
		left: 0;
		width: max-content;
		/* 中身に合わせて幅調整 */
		min-width: 100%;
		/* 最低でも親と同じ幅 */
		border-top: none;

		/* ホバーアニメーション用 */
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: max-height 0.25s, opacity 0.25s, transform 0.25s;
		overflow: hidden;
		/* はみ出し隠す */
	}

	#dropmenu .all:last-child ul {
		left: auto;
		right: 0;
		/* 最後の項目は右寄せ */
	}

	/* サブメニュー項目 PC用 */
	#dropmenu .all ul li,
	#dropmenu .last ul li {
		width: 100%;
		/* 親(ul)いっぱい */
		height: 0;
		transition: height 0.25s;
		border-bottom: none;
	}

	#dropmenu .all ul li a,
	#dropmenu .last ul li a {
		white-space: nowrap;
		/* 改行させない */
		padding: 0.8rem 1.5rem;
		/* 余白調整 */
		text-align: left;
	}

	/* ホバー時の表示 */
	#dropmenu .all:hover>ul,
	#dropmenu .last:hover>ul,
	#dropmenu .all:focus-within>ul,
	#dropmenu .last:focus-within>ul {
		max-height: 30rem;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		overflow: visible;
		padding-bottom: 1rem;
	}

	#dropmenu .all:hover>ul>li,
	#dropmenu .last:hover>ul>li,
	#dropmenu .all:focus-within>ul>li,
	#dropmenu .last:focus-within>ul>li {
		height: 2.2rem;
		overflow: visible;
	}

	/* トグルボタンはPCでは非表示 */
	.dropdown-toggle {
		display: none;
	}

	/* h2の改行をPCでは非表示 */
	#fuss_sche h2 br {
		display: none;
	}


	/* Main stage: 2-column */
	#main_stage {
		grid-template-columns: 1fr 240px;
		gap: 1.25rem;
	}

	#ec_shop {
		display: block;
		grid-column: 2;
		grid-row: 1 / span 2;
		height: 85%;
	}

	#fuss_sche {
		grid-column: 1;
		grid-row: 1;
		min-height: 290px;
	}

	#news {
		grid-column: 1;
		grid-row: 2;
	}

	/* Topics: 4 columns */
	#topics {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Content: 2 columns (<article> + <aside>) */
	#content {
		grid-template-columns: 1fr 220px;
		gap: 2.5rem;
		padding: 0;
	}

	.lesson-row {
		grid-template-columns: 1fr 150px;
	}

	.cell-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 2rem;
	}

	.catalog_box {
		width: calc(25% - 1.125rem);
		/* gap: 1.5rem -> 1.5 * 3 / 4 = 1.125rem reduction per item */
		margin-right: 0;
		background-color: #fff;
	}

	/* Force 1 column for specific pages */
	#content.one-column {
		grid-template-columns: 1fr;
	}
}