@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

:root {
	--color-bk: #3E3E3E;
	--color-wh: #fff;
	--color-gray: #6c6c6c;
	--color-gray2: #ddd;
	--color-gray3: #999;
	--color-org: #ED8000;
	--color-org2: #fac362;
	--color-beg1: #E3E0D9;
	--color-beg2: #DED5C7;
	--color-beg3: #F2F0EA;
	--color-beg4: #f6f4f0;
	--color-beg5: #f3ebe3;
	--color-beg6: #f1e9e1;
	--color-beg7: #f0eee8;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-black: 900;

	--base-width: 1080;
	--minimize-ratio: 1.6;

	--fs10-val: 10;
	--fs11-val: 11;
	--fs12-val: 12;
	--fs13-val: 13;
	--fs14-val: 14;
	--fs15-val: 15;
	--fs16-val: 16;
	--fs18-val: 18;
	--fs20-val: 20;
	--fs24-val: 24;
	--fs26-val: 26;
	--fs28-val: 28;
	--fs30-val: 30;
	--fs32-val: 32;
	--fs36-val: 36;
	--fs40-val: 40;
	--fs60-val: 60;

	--fz-10: clamp(calc(var(--fs10-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs10-val) / var(--base-width) * 100vw), calc(var(--fs10-val) * 0.1rem));
	--fz-11: clamp(calc(var(--fs11-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs11-val) / var(--base-width) * 100vw), calc(var(--fs11-val) * 0.1rem));
	--fz-12: clamp(calc(var(--fs12-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs12-val) / var(--base-width) * 100vw), calc(var(--fs12-val) * 0.1rem));
	--fz-13: clamp(calc(var(--fs13-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs13-val) / var(--base-width) * 100vw), calc(var(--fs13-val) * 0.1rem));
	--fz-14: clamp(calc(var(--fs14-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs14-val) / var(--base-width) * 100vw), calc(var(--fs14-val) * 0.1rem));
	--fz-15: clamp(calc(var(--fs14-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs14-val) / var(--base-width) * 100vw), calc(var(--fs14-val) * 0.1rem));
	--fz-15: clamp(calc(var(--fs15-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs15-val) / var(--base-width) * 100vw), calc(var(--fs15-val) * 0.1rem));
	--fz-16: clamp(calc(var(--fs16-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs16-val) / var(--base-width) * 100vw), calc(var(--fs16-val) * 0.1rem));
	--fz-18: clamp(calc(var(--fs18-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs18-val) / var(--base-width) * 100vw), calc(var(--fs18-val) * 0.1rem));
	--fz-20: clamp(calc(var(--fs20-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs20-val) / var(--base-width) * 100vw), calc(var(--fs20-val) * 0.1rem));
	--fz-24: clamp(calc(var(--fs24-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs24-val) / var(--base-width) * 100vw), calc(var(--fs24-val) * 0.1rem));
	--fz-26: clamp(calc(var(--fs26-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs26-val) / var(--base-width) * 100vw), calc(var(--fs26-val) * 0.1rem));
	--fz-28: clamp(calc(var(--fs28-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs28-val) / var(--base-width) * 100vw), calc(var(--fs28-val) * 0.1rem));
	--fz-30: clamp(calc(var(--fs30-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs30-val) / var(--base-width) * 100vw), calc(var(--fs30-val) * 0.1rem));
	--fz-32: clamp(calc(var(--fs32-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs32-val) / var(--base-width) * 100vw), calc(var(--fs32-val) * 0.1rem));
	--fz-36: clamp(calc(var(--fs36-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs36-val) / var(--base-width) * 100vw), calc(var(--fs36-val) * 0.1rem));
	--fz-40: clamp(calc(var(--fs40-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs40-val) / var(--base-width) * 100vw), calc(var(--fs40-val) * 0.1rem));
	--fz-60: clamp(calc(var(--fs60-val) * 0.1rem / var(--minimize-ratio)), calc(var(--fs60-val) / var(--base-width) * 100vw), calc(var(--fs60-val) * 0.1rem));


	--space-ratio: 2.5; /* スマホではPCの40%程度まで縮小する設定 */

	--sp-10: clamp(calc(10px / var(--space-ratio)), calc(10 / var(--base-width) * 100vw), 10px);
	--sp-20: clamp(calc(20px / var(--space-ratio)), calc(20 / var(--base-width) * 100vw), 20px);
	--sp-30: clamp(calc(30px / var(--space-ratio)), calc(30 / var(--base-width) * 100vw), 30px);
	--sp-40: clamp(calc(40px / var(--space-ratio)), calc(40 / var(--base-width) * 100vw), 40px);

	--sp-60: clamp(calc(60px / var(--space-ratio)), calc(60 / var(--base-width) * 100vw), 60px);
	--sp-80: clamp(calc(80px / var(--space-ratio)), calc(80 / var(--base-width) * 100vw), 80px);

	--sp-100: clamp(calc(100px / var(--space-ratio)), calc(100 / var(--base-width) * 100vw), 100px);
	--sp-120: clamp(calc(120px / var(--space-ratio)), calc(120 / var(--base-width) * 100vw), 120px);
	--sp-160: clamp(calc(160px / var(--space-ratio)), calc(160 / var(--base-width) * 100vw), 160px);
	--sp-200: clamp(calc(200px / var(--space-ratio)), calc(200 / var(--base-width) * 100vw), 200px);


}
@media (max-width: 769px) {
	:root {
	--base-width: 375;
	--minimize-ratio: 1.8;
	}
}



html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}
body {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-feature-settings: "palt";
	line-height: 1.6;
	font-size: var(--fz-16);
	font-weight: var(--fw-regular);
	color: var(--color-bk);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	position: relative;
}


img {	vertical-align: bottom;}

p {	padding-bottom: 1em;}


.grecaptcha-badge {
	visibility: hidden;
}


.t-org {
	color: var(--color-org);
}
.ctr {	text-align: center;}
.t-left {	text-align: left;}

.brpc {display: block;}
.brsp {display: none;}

a {
	color: var(--color-org);
	text-decoration: underline;
	transition: opacity 0.3s;
}
a:hover {
	opacity: 0.7;
	text-decoration: none;
}






/* --- ハンバーガーボタンの外枠（黒丸） --- */
#nav-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 55px;
	height: 55px;
	background-color: var(--color-bk);
	border-radius: 50%;
	z-index: 10001;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* --- 三本線の共通スタイル --- */
#nav-toggle span {
	display: block;
	position: absolute;
	width: 27px;
	height: 1px;
	background-color: var(--color-wh);
	border-radius: 2px;
	transition: all 0.4s;
}

/* 各線の位置 */
#nav-toggle span:nth-child(1) { top: 17px; }
#nav-toggle span:nth-child(2) { top: 27px; }
#nav-toggle span:nth-child(3) { top: 37px; }

/* --- クリック時（nav-open時）の「×」アニメーション --- */
body.nav-open #nav-toggle span:nth-child(1) {
	top: 27px;
	transform: rotate(45deg);
}
body.nav-open #nav-toggle span:nth-child(2) {
	opacity: 0; /* 真ん中の線を消す */
}
body.nav-open #nav-toggle span:nth-child(3) {
	top: 27px;
	transform: rotate(-45deg);
}

#full-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-beg4); /* 右側メインの背景色 */
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
	overflow-y: auto;
}
#full-nav::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 30%; /* nav-side の幅に合わせる（後述のflex-basisと連動） */
	height: 100%;
	background-color: var(--color-wh);
	z-index: -1;
}
body.nav-open #full-nav {
	opacity: 1;
	visibility: visible;
}

body.nav-open {
	overflow: hidden;
}

#full-nav .nav-inner {
	width: 100%;
	display: flex;
	min-height: 100%;
}

/* --- 左側サイド --- */
#full-nav .nav-side {
	flex: 0 0 30%; /* 画面の30%を占有 */
	background-color: var(--color-wh);
	padding: 40px;
	display: flex;
	flex-direction: column;
}

#full-nav .nav-side .course {
	color: var(--color-org);
	font-size: var(--fz-15);
	font-weight: var(--fw-bold);
	border-bottom: 1px solid var(--color-org);
	margin-top: 20px;
}

#full-nav .nav-side .course p {
	border-top: 1px solid var(--color-org);
	padding: 2px 0;
}
#full-nav .nav-side .course p span {
	font-size: var(--fz-11);
	font-weight: var(--fw-medium);
}
#full-nav .nav-side .address {
	font-size: var(--fz-11);
	font-weight: var(--fw-medium);
	color: var(--color-org);
	margin-top: 10px;
}
#full-nav .nav-side .address strong {
	font-size: var(--fz-18);
	font-weight: var(--fw-bold);
}

#full-nav .nav-logo { margin-bottom: 10px; }
#full-nav .nav-logo a { display: flex; flex-direction: column; gap: 10px; }
#full-nav .nav-logo img { width: 100%; }

#full-nav .nav-target-btns {
	width: calc(100% + 80px);
	margin: 0 -40px 20px -40px;
}
#full-nav .nav-target-btns li { margin-bottom: 1px; }
#full-nav .nav-target-btns a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	background-color: var(--color-org);
	color: var(--color-wh);
	text-decoration: none;
	font-weight: var(--fw-bold);
	transition: opacity 0.3s;
}
#full-nav .nav-target-btns a:hover { opacity: 0.8; }

#full-nav .nav-sns {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
}
#full-nav .nav-sns img { width: 30px; }

#full-nav .nav-contact-btn a {
	font-size: var(--fz-18);
	font-weight: var(--fw-bold);
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	background-color: var(--color-bk);
	color: var(--color-wh);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: 6px;
}

/* --- 右側メイン --- */
#full-nav .nav-main {
	flex: 1;
	padding: 80px 40px;
}

#full-nav .nav-banner { margin-bottom: 40px; }
#full-nav .nav-banner img { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); }

#full-nav .nav-links-grid {
	padding-bottom: 10px;
}

#full-nav .group-ttl {
	font-size: var(--fz-18);
	font-weight: var(--fw-bold);
	margin-bottom: 15px;
	line-height: 1.2;
	padding-bottom: 0;
}
#full-nav .group-ttl a {
	color: var(--color-bk);
	text-decoration: none;
}
#full-nav .nav-group {
	margin-bottom: 30px;
}
#full-nav .nav-group ul {
	display: flex;
	flex-wrap: wrap;
	gap: 15px 30px;
	padding: 5px 0 5px 15px;
	border-left: 1px solid var(--color-bk);
}
#full-nav .nav-group ul a {
	font-size: var(--fz-16);
	font-weight: var(--fw-medium);
	color: var(--color-bk);
	text-decoration: none;
	display: flex;
	align-items: center;
}
#full-nav .nav-group ul a::before {
	content: "●";
	color: var(--color-org);
	font-size: var(--fz-10);
	margin-right: 8px;
}

#full-nav .nav-sub-links {
	border-top: 1px solid var(--color-bk);
	padding-top: 20px;
}
#full-nav .nav-sub-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 15px 30px;
}
#full-nav .nav-sub-links a {
	text-decoration: none;
	font-size: var(--fz-16);
	font-weight: var(--fw-medium);
	color: var(--color-bk);
	display: flex;
	align-items: center;
}
#full-nav .nav-sub-links a::before {
	content: "●";
	color: var(--color-org);
	font-size: var(--fz-10);
	margin-right: 8px;
}









.topbnroc {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: var(--sp-80) var(--sp-20);
	margin: 40px auto;
}
.topbnroc img {
	width: 100%;
	box-shadow: 0 3px 3px rgba(0,0,0,0.1);
}





#footerfix {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 910px;
	z-index: 9999;
	background: var(--color-beg2); 
	border-radius: 10px 10px 0 0;
	box-shadow: 0 -5px 15px rgba(0,0,0,0.1); /* 少し影を強めて浮かせる */
	padding: 15px 0;
}

#footerfix .inner {
	/* innerは中身を並べるだけ */
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--sp-20);
}

#footerfix ul {
	display: flex;
	gap: 10px;
	flex: 1;
	align-items: stretch;
}

#footerfix ul li {
	flex: 1;
	display: flex;
}

#footerfix ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bk);
	color: var(--color-beg1);
	text-decoration: none;
	border-radius: 10px;
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
	transition: opacity 0.3s;
	padding: 16px 0;
	width: 100%;
	text-align: center;
}

#footerfix ul li a:hover {
	opacity: 0.8;
}


#footerfix .icon {
	width: 38px;
	margin-left: 15px;
	flex-shrink: 0;
}

#footerfix .icon img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}







#keyword {
	padding: 0 0 var(--sp-80) 0;
	background-color: var(--color-wh);
}

#keyword .inner {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	margin: 0 auto;
	padding: 0 var(--sp-20);
	text-align: center;
	width: 100%;
}


#keyword h2 {
	border-top: 1px solid var(--color-bk);
	font-size: var(--fz-18);
	font-weight: var(--fw-bold);
	margin: var(--sp-40) 0;
	color: var(--color-bk);
	padding-top: var(--sp-20);
}

#keyword ul {
	display: flex;
	flex-wrap: wrap;
	gap: 25px 25px;
}

#keyword ul li a {
	display: inline-block;
	padding: 5px 25px;
	border: 1px solid var(--color-bk);
	border-radius: 50px;
	font-size: var(--fz-15);
	font-weight: var(--fw-bold);
	color: var(--color-bk);
	text-decoration: none;
	transition: all 0.3s ease;
}

#keyword ul li a:hover {
	background-color: var(--color-bk);
	color: var(--color-wh);
}







#footer {
	background: var(--color-gray);
	color: var(--color-wh);
	padding: 40px 0 120px;
	font-size: var(--fz-16);
}

#footer .inner {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--sp-20);
}

#footer .inner .logo {
	text-align: right;
	margin-bottom: var(--sp-40);
}
#footer .inner .logo img {
	width: 145px;
}

#footer a {
	color: var(--color-wh);
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
}

.sns {
	margin-bottom: var(--sp-20);
	font-weight: var(--fw-bold);
}
.sns p {
	font-size: var(--fz-18);
	margin-bottom: var(--sp-10);
	display: block;
}
.sns ul {
	display: flex;
	gap: 50px;
}
.sns li a {
	font-size: var(--fz-16);
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.sns li img {
	width: 30px;
}


.sitemap {
	border-top: 1px solid var(--color-wh);
	border-bottom: 1px solid var(--color-wh);
	padding: 20px 0;
	margin-bottom: 40px;
}
.sitemap > ul {
	display: flex;
	gap: 40px;
	list-style: none;
	margin: 0 0 20px 0;
}
.sitemap > ul:last-child {
	border-top: 1px solid var(--color-wh);
	padding: 20px 0 0 0;
	margin-bottom: 0;
}
.sitemap > ul > li {
	flex: 1;
}


.sitemap p {
	font-size: var(--fz-18);
	font-weight: var(--fw-bold);
	margin-bottom: 15px;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.sitemap p::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("../../images/common/icon_footer.svg") no-repeat center / contain;
}

.sitemap ul ul li {
	margin: 5px;
	padding-left: 15px;
	position: relative;
	font-size: var(--fz-16);
	font-weight: var(--fw-medium);
}
.sitemap ul ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 10px;
	height: 10px;
	background-color: var(--color-org);
	border-radius: 50%;
}

#footer .schoolinfo {
	text-align: center;
	margin: 80px 0;
}
#footer .schoolinfo img {
	width: 284px;
	filter: brightness(0) invert(1); /* 黒いSVGを白く反転 */
	margin-bottom: 15px;
}
.schoolinfo .course {
display: inline-block;
margin: 0 auto 10px;
font-size: var(--fz-15);
font-weight: var(--fw-medium);
padding: 0.5em 0;
border-top: 1px solid var(--color-wh);
border-bottom: 1px solid var(--color-wh);
}
#footer .schoolinfo .address {
	font-size: var(--fz-16);
	font-weight: var(--fw-medium);
}


.footersub {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin-bottom: 30px;
	font-size: var(--fz-13);
	font-weight: var(--fw-medium);
}
.footersub li::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: var(--color-org);
	border-radius: 50%;
	margin-right: 10px;
}

/* コピーライト */
#copyright {
	border-top: 1px solid var(--color-wh);
	font-size: var(--fz-13);
	text-align: center;
	padding-top: 20px;
}


#header {
	margin: 20px;
}

#header img {
	width: 250px;
}


#contactbox {
	padding: 0 0 var(--sp-80) 0;
	background: var(--color-beg4);
}

#contactbox #cimg img {
	width: 100%;
}

#contactbox h2 {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: 0 var(--sp-20);
	margin: 0 auto;
	font-size: var(--fz-32);
	font-weight: var(--fw-bold);
	color: var(--color-bk);
	margin-bottom: var(--sp-60);
	padding: 80px 0 15px 45px; 
	position: relative;
	text-align: left;
	line-height: 1;
}

#contactbox h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 10px;
	height: 100%;
	background: var(--color-bk);
}

#contactbox h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 45px; 
	width: 300px;
	height: 1px;
	background: var(--color-bk);
}

#contactbox .inner {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: 0 var(--sp-20);
	margin: 0 auto;
}

#contactbox .inner > p {
	font-size: var(--fz-16);
	margin-bottom: 20px;
}

#contactbox ul {
	display: flex;
	justify-content: center;
	gap: 20px;
}

#contactbox ul li {
	flex: 1;
	max-width: 480px;
}

#contactbox ul li a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 57px;
	background-color: var(--color-wh);
	border: 1px solid var(--color-bk);
	border-radius: 50px;
	text-decoration: none;
	color: var(--color-bk);
	font-weight: var(--fw-medium);
	font-size: var(--fz-20);
	padding: 0 70px;
	transition: background-color 0.3s;
}

#contactbox ul li a:hover {
	background: #f8f8f8;
}


#contactbox ul li a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 55px; 
	background-color: var(--color-beg2);
	border-radius: 50%;
	
	background-image: url("../../images/common/icon_arrow.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30%;
}


#contactbox ul li:first-child a::before {
	content: "";
	width: 28px;
	height: 28px;
	margin-right: 15px;
	background: url("../../images/common/icon_mail.svg") no-repeat center / contain;
}

#contactbox ul li:last-child a {
	font-size: var(--fz-24);
}
#contactbox ul li:last-child a span {
		font-size: var(--fz-15);
	}

#contactbox ul li:last-child a::before {
	content: "";
	width: 24px;
	height: 24px;
	margin-right: 15px;
	background: url("../../images/common/icon_tel.svg") no-repeat center / contain;
}

#contactbox ul li:last-child p {
	margin-top: 10px;
	font-size: var(--fz-15);
	padding-bottom: 0;
	text-align: center
}


.cv-area {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: 0 var(--sp-20);
	margin: 100px auto;
	display: flex;
	gap: 40px;
}


.cv-box {
	flex: 1;
	background: var(--color-beg5);
	padding: 35px 30px;
	text-align: center;
	border-top: 1px solid var(--color-bk);
	border-bottom: 1px solid var(--color-bk);
}

.cv-box h3 {
	font-size: var(--fz-24);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	margin-bottom: 5px;
}

.cv-box p {
	font-size: var(--fz-15);
	line-height: 1.8;
	margin-bottom: 10px;
}

.cv-btns {
	display: flex;
	justify-content: center;
	gap: 15px;
}

.cv-area a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 320px;
	height: 57px;
	background-color: var(--color-wh);
	border: 1px solid var(--color-bk);
	border-radius: 50px;
	text-decoration: none;
	color: var(--color-bk);
	font-weight: var(--fw-medium);
	font-size: var(--fz-15);
	line-height: 1.3;
	padding: 0 50px 0 20px;
	transition: background-color 0.3s;
}

.cv-btns.flex a {
	max-width: 200px;
}

.cv-area a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 55px; 
	background-color: var(--color-org);
	border-radius: 50%;
	background-image: url("../../images/common/icon_arrow.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30%;
}

.cv-area a:hover {
	background: #f8f8f8;
}








.page-visual {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: 0 var(--sp-20);
	margin: 0 auto 100px;
}

.page-visual .container {
	margin: 0 auto;
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	background: var(--color-beg4);
	border-radius: 15px;
	overflow: hidden;
}

.page-visual figure {
	flex: 1;
	margin: 0;
	position: relative;
}

.page-visual figure img {
	width: 100%;
	height: 100%;
	vertical-align: bottom;
	object-fit: cover;
}

.opening-hours {
	position: absolute;
	right: 20px;
	bottom: 20px;
	background: var(--color-wh);
	border: 1px solid var(--color-bk);
	border-radius: 10px;
	padding: 5px;
	width: fit-content;
	z-index: 2;
	font-size: 1.5rem;
	font-weight: var(--fw-bold);
}
.opening-hours.left {
	left: 20px;
}
.opening-hours-ttl {
	text-align: center;
	padding-bottom: 0;
}

.opening-hours dl {
	display: flex;
	flex-wrap: wrap;
}

.opening-hours dt {
	width: 3.2em;
}

.opening-hours dd {
	width: calc(100% - 3.2em);
}


.page-visual h2 {
	position: static;
	width: clamp(100px, 12vw, 140px);
	margin: 0;
	background: var(--color-beg4);
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	font-size: var(--fz-32);
	font-weight: var(--fw-bold);
	letter-spacing: 0.3em;
	color: var(--color-bk);
}

.page-novisual {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: 0 var(--sp-20);
	margin: 0 auto 100px;
}

.page-novisual h2 {
	background: var(--color-beg4);
	border-radius: 15px;
	padding: var(--sp-20);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	min-height: 250px;
	box-sizing: border-box;
}

.page-novisual h2 span {
	background-color: var(--color-wh);
	border-radius: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	font-size: var(--fz-32);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	min-width: 180px;
	min-height: 210px;
	padding: 20px 0;
}






.tobira {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: 0 var(--sp-20);
	margin: 0 auto;
}

.tobira ul {
	display: flex;
	gap: 40px;
}

.tobira li {
	flex: 1;
}

.tobira a {
	text-decoration: none;
	color: var(--color-bk);
	display: block;
	transition: opacity 0.3s;
}

.tobira a:hover {
	opacity: 0.7;
}

.tobira a > span {
	display: block;
	font-size: var(--fz-20);
	font-weight: var(--fw-bold);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-bk);
	position: relative;
}

.tobira a > span::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	width: 25px;
	height: 1px;
	background: var(--color-org);
}

.tobira a div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 10px;
}

.tobira a div span {
	font-size: var(--fz-16);
	font-weight: var(--fw-medium);
}

.tobira a div::after {
	content: "";
	width: 10px;
	height: 10px;
	margin-right: 10px;
	border-top: 1px solid var(--color-org);
	border-right: 1px solid var(--color-org);
	transform: rotate(45deg);
	display: block;
}

.tobira figure {
	margin: 0 0 15px;
	line-height: 0;
	border-radius: 10px;
	overflow: hidden;
}

.tobira figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.cinner, .catcenter {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: 0 var(--sp-20);
	margin: 0 auto;
}

.cinner h3,
.catcenter h3 {
	font-size: var(--fz-28);
	font-weight: var(--fw-bold);
	margin-bottom: 20px;
}
.cinner h3 + p,
.catcenter h3 + p {
	font-size: var(--fz-16);
	margin-bottom: 40px;
}

.catcenter {
	text-align: center;
}







.cfaq li {
	margin-bottom: 20px;
	border: 1px solid var(--color-bk);
	border-radius: 10px;
	overflow: hidden;
}

.cfaq dt {
	position: relative;
	padding: 10px 60px 10px 10px;
	background-color: var(--color-wh);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 15px;
	transition: background-color 0.3s;
}

.cfaq dt:hover {
	background-color: #f9f9f9;
}

.cfaq dt {
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
	line-height: 1.4;
}

.cfaq .faq-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: var(--fw-bold);
}

.cfaq .faq-icon.q {
	width: 40px;
	height: 40px;
	background-color: var(--color-beg2);
	color: var(--color-bk);
	border-radius: 50%;
	font-size: var(--fz-32);
}

.cfaq .faq-icon.a {
	width: 40px;
	color: var(--color-bk);
	font-size: var(--fz-32);
}

.cfaq dt::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background-color: var(--color-beg2);
	border-radius: 4px;
}

.cfaq dt .icon-line {
	position: absolute;
	right: 27px;
	top: 50%;
	width: 16px;
	height: 2px;
	background-color: var(--color-wh);
	z-index: 1;
	transition: all 0.3s;
	margin-top: -1px;
}

.cfaq dt .icon-line.vertical {
	transform: rotate(90deg);
}

.cfaq dt.open .icon-line.vertical {
	transform: rotate(0deg);
	opacity: 0;
}

.cfaq dd {
	height: 0;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	background-color: var(--color-beg1);
}



.cfaq .answer-inner {
	padding: 30px 40px 40px 10px;
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

.cfaq .answer-content {
	font-size: var(--fz-16);
	font-weight: var(--fw-regular);
	line-height: 1.65;
}

.cfaq .answer-content p {
	margin-bottom: 1.5em;
	padding-bottom: 0;
}

.cfaq .answer-content p:last-child {
	margin-bottom: 0;
}




.csection h3 {
	font-size: var(--fz-28);
	font-weight: var(--fw-bold);
	margin-bottom: 25px;
	padding-top: 30px;
	border-top: 1px solid var(--color-bk); 
	position: relative;
	line-height: 1.2;
}

.csection h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 200px;
	height: 5px;
	background: var(--color-bk);
}


.basesection {
	margin-bottom: 80px;
}
.basesection table {
	width: 100%;
}
.basesection table.ctr1 th,
.basesection table.ctr1 td {
	text-align: center;
}
.basesection table.ctr2 th {
	text-align: center;
}
.basesection table.ctr3 td {
	text-align: center;
}

.basesection table th {
	background: var(--color-gray2);
	font-size: var(--fz-20);
	font-weight: var(--fw-bold);
	padding: 10px;
	border: 1px solid var(--color-gray3);
}

.basesection table td {
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
	padding: 10px;
	border: 1px solid var(--color-gray3);
}


.c-download-list {
	display: flex;
	gap: 20px;
}

.c-download-list li {
	flex: 1;
}

.c-download-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--color-bk);
	color: var(--color-wh);
	text-decoration: none;
	padding: 25px 40px;
	transition: background-color 0.3s;
}

.c-download-list a:hover {
	background-color: #555555;
}

.c-download-list a span {
	font-size: var(--fz-20);
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
}

.c-download-list a::after {
	content: "";
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--color-wh);
	border-bottom: 2px solid var(--color-wh);
	transform: rotate(45deg);
}

.c-accordion {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.c-accordion__item {
	width: 100%;
}

.c-accordion__title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25px 40px;
	background: var(--color-org2);
	cursor: pointer;
	position: relative;
	font-size: var(--fz-20);
	font-weight: var(--fw-bold);
}

.c-accordion__title::after {
	content: "";
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--color-bk);
	border-bottom: 2px solid var(--color-bk);
	transform: translateY(-50%) rotate(45deg); /* 中央配置 */
	position: absolute;
	right: 40px;
	top: 50%;
	transition: all 0.3s;
	flex-shrink: 0;
}



.c-accordion__item.is-open .c-accordion__title::after {
	border-right-color: transparent;
	transform: translateY(-50%) rotate(0deg);
	margin-top: 0;
}

.c-accordion__content {
	height: 0;
	overflow: hidden;
	transition: height 0.4s ease;
}

.c-accordion__inner {
	padding-top: 50px;
}

.c-accordion__inner .cap {
	text-align: center;
	line-height: 1.8;
	margin-bottom: 40px;
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
}

.c-accordion__inner .cap strong {
	display: inline-block;
	color: var(--color-org);
	margin-top: 10px;
}

.cbox {
	margin-bottom: 50px;
}

.cbox h4 {
	font-size: var(--fz-24);
	font-weight: var(--fw-bold);
	border-bottom: 1px solid var(--color-bk);
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.cbox h4 span {
	color: var(--color-org);
}
.cbox p {
	line-height: 1.8;
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
}


.cbox dl {
	display: flex;
	margin-bottom: 15px;
	align-items: baseline;
}

.cbox dt {
	color: var(--color-org);
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
	min-width: 80px;
}

.cbox dd {
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
	line-height: 1.6;
}



.cbox div .greenbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	background: #33c0ac;
	color: var(--color-wh);
	text-decoration: none;
	font-weight: var(--fw-bold);
	font-size: var(--fz-20);
	border-radius: 5px;
	transition: opacity 0.3s;
}

.cbox div a:hover {
	opacity: 0.8;
}

.c-lead {
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
	line-height: 1.8;
	margin-top: 30px;
	margin-bottom: 60px;
}


.page-novisual + .c-accordion__inner {
	padding-top: 0;
}






.news-date {
	margin-right: 15px;
	color: var(--color-gray);
}
.news-cat {
	display: inline-block;
	min-width: 100px;
	margin-right: 15px;
	font-size: var(--fz-10);
	padding: 1px 2px;
	border-radius: 20px;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	border: 1px solid transparent;
	background: none;
}

.news-cat:not(:empty) {
	border: 1px solid var(--color-bk);
	background: #FAFCD2;
}
.news-list {
	width: 100%;
	font-size: var(--fz-16);
	font-weight: var(--fw-medium);
}

.news-list li {
	margin-bottom: 10px;
}
.news-list li a {
	color: var(--color-bk);
	text-decoration: none;
}
.news-list li a:hover {
	text-decoration: underline;
}



/* 記事詳細のタイトル周り */
.entry-header {
	margin-bottom: 40px;
}
.entry-title {
	font-size: var(--fz-24);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	color: var(--color-bk);
	border-bottom: 1px solid var(--color-bk);
	margin-bottom: 10px;
	padding-bottom: 10px;
}

/* 本文エリアのスタイル調整 */
.entry-content {
		line-height: 1.8;
		color: var(--color-bk);
		font-size: var(--fz-16);
}
.entry-content img {
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
}

/* 記事下ナビゲーション */
.post-navigation {
	margin-top: 20px;
	padding-top: 40px;
	border-top: 1px solid var(--color-gray3);
}
.nav-links {
	display: flex;
	justify-content: space-between;
}
.nav-back {
	text-align: center;
}




/* コラムグリッド */
.column-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 横3つ */
	gap: 30px;
	margin-top: 10px;
}

.column-card {
	transition: transform 0.3s, box-shadow 0.3s;
}

.column-card a {
	text-decoration: none;
	color: var(--color-bk);
	display: block;
	height: 100%;
}

.column-card:hover {
	transform: translateY(-5px);
}

/* サムネイル */
.column-thumb {
	overflow: hidden;
}

.column-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.3s;
}

.column-card:hover .column-thumb img {
	transform: scale(1.05);
}

/* カードの中身 */
.column-body {
	padding: 20px 0;
}

.column-date {
	font-size: var(--fz-12);
	color: var(--color-gray3);
}

.column-tag {
	font-size: var(--fz-11);
	background: var(--color-org);
	color: var(--color-wh);
	padding: 2px 8px;
	border-radius: 6px;
}

.column-title {
	font-size: var(--fz-18) !important;
	font-weight: var(--fw-bold);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.column-tag-wrapper {
		display: flex;
		flex-wrap: wrap; /* 横幅がいっぱいになったら自動で折り返し */
		gap: 6px;       /* タグ同士の隙間 */
		margin-top: 12px;
}

/* 個別のタグリンク */
a.column-tag {
		display: inline-block;
		font-size: var(--fz-11);
		background: var(--color-org);
		color: var(--color-wh) !important;
		padding: 2px 10px;
		border-radius: 2px;
		text-decoration: none;
		transition: opacity 0.3s;
		/* 文字が長すぎても崩れないように */
		white-space: nowrap; 
}

a.column-tag:hover {
		opacity: 0.7;
}

.tagname {
	font-size: var(--fz-16);
}



/* ページネーションの共通スタイル */
.pagination {
	margin: 50px 0;
	text-align: center;
}
.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 10px;
}
.pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-gray3);
	color: var(--color-bk);
	text-decoration: none;
	font-weight: var(--fw-bold);
	transition: all 0.3s;
}
.pagination .page-numbers.current {
	background-color: var(--color-bk);
	color: var(--color-wh);
	border-color: var(--color-bk);
}
.pagination .page-numbers:hover:not(.current) {
	background-color: var(--color-beg4);
}



.strength-section {
	background: var(--color-beg5);
	padding: var(--sp-80) 0;
}

.strength-section h2 {
	text-align: center;
	font-size: var(--fz-24);
	font-weight: var(--fw-bold);
	position: relative;
	margin-bottom: 60px;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 40px;
}
.strength-section h2::before,
.strength-section h2::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 1px;
	height: 30px;
	background: var(--color-bk);
}

.strength-section h2::before {
	left: 0;
	transform: translateY(-50%) rotate(-25deg);
}

.strength-section h2::after {
	right: 0;
	transform: translateY(-50%) rotate(25deg);
}
.strength-section .inner {
	max-width: calc(var(--base-width) * 1px + (var(--fs20-val) * 2px));
	width: 100%;
	padding: 0 var(--sp-20);
	margin: 0 auto;
}

.strength-section ol {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}


.strength-section ol li {
	flex: 0 0 calc(50% - 10px); 
	background: var(--color-wh);
	border-radius: 15px;
	box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
	overflow: hidden;
	transition: transform 0.3s ease;
}

.strength-section ol li:hover {
	transform: translateY(-10px);
}

.strength-section ol li a {
	text-decoration: none;
	color: var(--color-bk);
	display: flex;
	height: 100%;
	position: relative;
}

.strength-section ol li a > div {
	flex: 0 0 50%;
}

.strength-section ol li a > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 追加：右側のテキストエリアを広げる */
.strength-section ol li section {
	flex: 1;
	padding: 30px;
}

.strength-section .count1 strong {
	color: var(--color-org);
}

.strength-section .count1 {
	display: flex;
	align-items: center;
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
	color: var(--color-bk);
	margin-bottom: 3px;
}

.strength-section .count1 img {
	width: 20px;
	margin: 0 3px;
}

.strength-section .count1 span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background-color: var(--color-bk);
	color: var(--color-wh);
	border-radius: 50%;
	font-size: var(--fz-16);
	margin-left: 2px;
	line-height: 1;
}

.strength-section .count2 {
	font-size: var(--fz-15);
	color: #999;
	padding-bottom: 4px;
	line-height: 1;
}

.strength-section h3 {
	font-size: var(--fz-24);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	display: inline-block;
	border-bottom: 1px solid var(--color-bk);
	padding-bottom: 3px;
}

.strength-section ol li a::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: 25px;
	width: 50px;
	height: 50px;
	background-color: var(--color-beg2);
	border-radius: 50%;
	background-image: url("../../images/common/icon_arrow.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30%;
}



.ppschoolinfo {
	background: var(--color-gray2);
	margin-bottom: 40px;
	padding: var(--sp-20);
	display: inline-block
}
.ppschoolinfo p:last-child {
	padding-bottom: 0;
	font-weight: var(--fw-regular);
}
.ppschoolinfo p {
	font-weight: var(--fw-bold);
}
.ppright {
	text-align: right;
}



.ppsection {
	margin-top: 40px;
}

.ppsection h3 {
	font-size: var(--fz-20);
	font-weight: var(--fw-bold);
}
.ppsection p {
	margin-bottom: 0 !important;
}



.kjschoolinfo {
	background: var(--color-gray2);
	margin-bottom: 40px;
	padding: var(--sp-20);
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
	display: inline-block;
}





.hiroba_section li {
	margin-bottom: 15px;
}

.hiroba_section a {
	display: flex;
	align-items: center;
	background: var(--color-bk);
	color: var(--color-wh);
	text-decoration: none;
	padding: 20px 40px;
	transition: 0.3s;
}
.hiroba_section a p {
	padding-bottom: 0;
}
.hiroba_section a:hover {
	background: #555;
}

.hiroba_section .pdf_head {
	flex: 0 1 15%;
	display: flex;
	gap: 20px;
	padding-right: var(--sp-20);
	font-weight: var(--fw-bold);
}

.hiroba_section .pdf_content {
	flex: 0 1 73%;
	display: flex;
	gap: var(--sp-10);
	padding: 0 var(--sp-20);
	border-left: 1px solid var(--color-wh);
	border-right: 1px solid var(--color-wh);
	align-items: center;
}

.hiroba_section .pdf_content .label {
	flex-shrink: 0;
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
}

.hiroba_section .pdf_content .summary {
	font-size: var(--fz-16);
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.hiroba_section .pdf_action {
	flex: 0 1 12%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
	padding-left: var(--sp-20);
	font-size: var(--fz-20);
	font-weight: var(--fw-bold);
}

/* 矢印アイコン（CSSで作成） */
.hiroba_section .icon_arrow {
		width: 12px;
		height: 12px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
}


.dwonloadlist {
	margin-bottom: 10px;
}
.dwonloadlist a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--color-bk);
	color: var(--color-wh);
	text-decoration: none;
	padding: 25px 40px;
	transition: background-color 0.3s;
}



.dwonloadlist li {
	margin-bottom: 10px;
}

.dwonloadlist li:last-child {
	margin-bottom: 0;
}

.dwonloadlist a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--color-bk);
	color: var(--color-wh);
	text-decoration: none;
	padding: 25px 40px;
	transition: background-color 0.3s;
}

.dwonloadlist a:hover {
	background-color: #555555;
}

.dwonloadlist a span {
	font-size: var(--fz-20);
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	padding-right: 20px;
}

.dwonloadlist a::after {
	content: "";
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--color-wh);
	border-bottom: 2px solid var(--color-wh);
	transform: rotate(45deg);
}






/* /////////////////////////// */
/* /////////////////////////// */
/* /////////////////////////// */
/* スマホ用 */
@media (max-width:769px) {


.brpc {display: none;}
.brsp {display: block;}


#nav-toggle {
	top: 15px;
	right: 15px;
	width: 40px;
	height: 40px;
}
#nav-toggle span { width: 24px; }
#nav-toggle span:nth-child(1) { top: 12px; }
#nav-toggle span:nth-child(2) { top: 20px; }
#nav-toggle span:nth-child(3) { top: 28px; }

body.nav-open #nav-toggle span:nth-child(1),
body.nav-open #nav-toggle span:nth-child(3) { top: 20px; }

/* 背景の白塗り擬似要素を消す */
#full-nav::before {
	display: none;
}

#full-nav .nav-inner {
	flex-direction: column;
}

/* --- 左側サイド（スマホ） --- */
#full-nav .nav-side {
	order: 2;
	flex: 0 0 auto;
	width: 100%;
	padding: 40px 20px 20px;
	display: flex;
	flex-direction: column;
}


#full-nav .nav-target-btns {
	order: 1;
	width: calc(100% + 40px);
	margin: 0 -20px 20px -20px;
}

#full-nav .nav-logo {
	order: 2;
	margin-bottom: 30px;
}

#full-nav .nav-sns {
	order: 3;
	gap: 40px;
}
#full-nav .nav-sns img {
	width: 100%;
}
#full-nav .nav-contact-btn {
	order: 4;
}

#full-nav .nav-target-btns ul {
	display: flex;
	flex-wrap: wrap;
}
#full-nav .nav-target-btns li {
	flex: 0 0 50%; /* 2列並び */
	margin-bottom: 0;
	border: 0.5px solid rgba(255,255,255,0.3); /* 境界線を薄く入れる */
}


#full-nav .nav-main {
	order: 1;
	padding: 20px;
}

#full-nav .nav-banner {
	margin-bottom: 30px;
}

/* リンク集をスマホでは縦気味に（または2列に） */
#full-nav .nav-group {
	margin-bottom: 25px;
}

#full-nav .nav-group ul {
	gap: 10px 20px;
	padding: 5px 0 5px 12px;
}

#full-nav .nav-group ul a {
	font-size: var(--fz-14); /* 少しフォントを小さく */
}

/* サブリンク */
#full-nav .nav-sub-links ul {
	gap: 10px 20px;
}

#full-nav .nav-sub-links a {
	font-size: var(--fz-14);
}



.news-list li a {
	display: block;
	margin-bottom: 5px;
}



.topbnroc {
	max-width: none; 
}


#footerfix .icon { display: none; }
#footerfix ul li a {
	padding: 8px 0;
	line-height: 1.1;
}


#header {
	margin: 20px;
}

#header img {
	width: 40vw;
}



#keyword {
	padding: var(--sp-60) 0;
}
#keyword h2 {
		padding-top: var(--sp-30);
		margin: var(--sp-30) 0;
}
#keyword ul {
	gap: 16px 12px;
}

#keyword ul li a {
	padding: 4px 18px;
}



#keyword .inner,
#footer .inner {
	max-width: none; 
}

.sns {
	border-bottom: 1px solid var(--color-wh);
	padding-bottom: var(--sp-40);
}
.sns ul {
	justify-content: center;
	gap: var(--sp-40);
}


.sns li img {
	width: clamp(30px, calc(40 / var(--base-width) * 100vw), 80px);
}

.sns p,
.sns li a span,
.sitemap,
#footer .schoolinfo span {
	display: none;
}






#contactbox ul {
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
#contactbox ul li {
	width: 100%;
}
#contactbox ul li a {
	height: 60px;
	font-size: var(--fz-16);
	padding: 0 60px;
}
#contactbox ul li a::after {
	height: 100%; 
	width: 58px; 
}
#contactbox ul li a,
#contactbox ul li:last-child a {
	font-size: var(--fz-20);
}

#contactbox ul li:last-child a span {
	font-size: var(--fz-13);
}

#contactbox ul li:last-child a::before {
	width: 20px;
	height: 20px;
}
#contactbox h2, #contactbox .inner {
	max-width: none; 
}

	.cv-area {
		flex-direction: column;
		margin: 60px auto;
		padding: 0 20px;
		max-width: none;
	}

	.cv-btns {
		flex-direction: column;
		align-items: center;
	}

	.cv-btns.flex a {
		max-width: 100%; /* スマホでは横幅いっぱい */
	}

	.cv-area a {
		max-width: 100%;
	}

	.cv-area a::after {
		height: 100%; 
		width: 58px; 
	}






	.page-visual {
		max-width: none;
		margin-bottom: 0 auto 50px;
	}
	.page-visual .container {
		flex-direction: column;
	}
	.page-visual figure {
		border-radius: 10px 10px 0 0;
	}
	.page-visual h2 {
		position: static;
		width: 100%;
		/* height: clamp(60px, 15vh, 80px); ←これを削除 */
		
		/* 上下の余白で高さを出す */
		padding-top: clamp(10px, 5vh, 20px);
		padding-bottom: clamp(10px, 5vh, 20px);
		
		/* 縦方向の中央揃えを確実にするため */
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 60px; /* 最低限の高さは維持したい場合に有効 */
		
		writing-mode: horizontal-tb;
		border-radius: 0 0 10px 10px;
		letter-spacing: 0.2em;
		line-height: 1.2;
		text-align: center;
	}

	.page-novisual {
		max-width: none;
	}
	.page-novisual h2 {
		min-height: auto;
		padding: 15px;
	}
	.page-novisual h2 span {
		background: none;
	}
	
	.page-novisual h2 span {
		width: 100%;
		min-width: auto;
		min-height: 100px;
		writing-mode: horizontal-tb;
		font-size: var(--fz-24);
		text-align: center;
	}




	.tobira {
		max-width: none;
	}
	
	.tobira ul {
		flex-direction: column;
		gap: 30px;
	}
	

	.tobira a > span {
		font-size: var(--fz-20);
	}
	
	.tobira a div span {
		font-size: 16px;
	}
	
	.cinner, .catcenter {
		max-width: none;
	}
	.catcenter {
		text-align: left;
	}


	.cfaq dt {
		padding: 15px 50px 15px 15px;
		gap: 10px;
	}
	.cfaq .answer-inner {
		padding: 20px 20px 30px 15px;
		gap: 10px;
	}
	.cfaq .answer-inner {
		display: block;
	}


	.basesection table th {
		font-size: var(--fz-10);
		padding: 4px;
	}
	
	.basesection table td {
		font-size: var(--fz-10);
		font-weight: var(--fw-medium);
		padding: 4px;
	}


	.c-download-list {
		flex-direction: column;
		gap: 10px;
	}
	
	.c-download-list a {
		padding: 20px 25px;
	}
	
	.c-download-list a span {
		font-size: var(--fz-16);
	}
	
	.c-download-list a::after {
		width: 10px;
		height: 10px;
	}
	
	.c-accordion__title {
		padding: 20px 35px 20px 25px;
		font-size: var(--fz-16);
	}
	.c-accordion__title::after {
		width: 10px;
		height: 10px;
		right: 24px;
	}
	.c-lead {
		margin-bottom: 40px;
	}

	.sp-vertical, 
	.sp-vertical tbody, 
	.sp-vertical tr, 
	.sp-vertical th, 
	.sp-vertical td {
		display: block;
		width: 100%;
	}
	.sp-vertical thead {
		display: none;
	}
	.sp-vertical {
		border-bottom: 1px solid var(--color-gray3);
	}

	.sp-vertical th {
		background: var(--color-gray2);
	}

	.sp-vertical td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		text-align: right !important;
	}
	

	
	/* 左側の項目名 */
	.sp-vertical td::before {
			content: attr(data-label);
			font-weight: var(--fw-bold);
			color: var(--color-bk);
	}
	
	.basesection .sp-vertical th,
	.basesection .sp-vertical td {
		border-bottom: none;
		font-size: var(--fz-16);
	}




	.column-grid {
		grid-template-columns: repeat(2, 1fr); /* タブレットは2つ */
	}

	.strength-section h2 {
		font-size: var(--fz-18);
	}
	.strength-section ol {
		flex-direction: column;
		gap: 20px;
	}
	.strength-section ol li:hover {
		transform: translateY(0);
	}
	.strength-section ol li a > div {
		flex: 0 0 40%;
	}
	.strength-section ol li section {
		padding: 10px 20px 0;
	}
	.strength-section .count1,
	.strength-section .count2 {
		font-size: var(--fz-10);
		padding-bottom: 0;
	}
	.strength-section .count1 span {
		font-size: 1.2rem;
	}
	.strength-section h3 {
		font-size: var(--fz-15);
	}
	.strength-section ol li a::after {
		width: 40px;
		height: 40px;
	}




	.hiroba_section a {
		padding: 15px 20px;
	}

	.hiroba_section .pdf_content {
		display: none;
	}

	.hiroba_section .pdf_head {
		flex: 0 0 auto;
		padding-right: 10px;
		font-size: var(--fz-20);
	}


	.hiroba_section .pdf_action {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		padding-left: 0;
		font-size: var(--fz-20);
	}
	
	.hiroba_section .icon_arrow {
		margin-left: auto;
		width: 10px;
		height: 10px;
	}




}