@charset "UTF-8";

/*--------------------------------------------------------------
	Table of Contents:
	1. CSS Variables
	2. Base Styles
	3. Utilities
	4. Components (Slider, Headings, Badges)
	5. Layout (Header, Footer)
	6. Navigation (PC Dropdown)
	7. SP Components (Drawer, CTA Bar)
	8. Media Queries (SP, Tablet)
-------------------------------------------------------------- */


/*--------------------------------------------------------------
	1. CSS Variables
-------------------------------------------------------------- */
:root {
	/* Brand Colors */
	--primary-color: #3353b2;
	--primary-light: #4a6bc9;
	--accent-color: #00A8FF;
	--accent-orange: #ff8c00;
	--accent-orange-light: #ff9f40;

	/* Text Colors */
	--text-color: #333;
	--text-light: #555;
	--text-muted: #888;

	/* Link Colors */
	--link-color: #358cac;
	--link-hover: #73c4e6;

	/* Border Colors */
	--border-color: #ccc;
	--border-light: #eee;
	--border-lighter: #f5f5f5;

	/* Background Colors */
	--bg-light: #f9f9f9;
	--bg-hover: #f8faff;
}

/*--------------------------------------------------------------
	2. Base Styles
-------------------------------------------------------------- */
html {
	font-size: 100%;
}

body {
	color: var(--text-color);
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	border-top: 1em solid var(--primary-color);
}

/* Link Styles */
a {
	color: var(--link-color);
	text-decoration: none;
}

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

a:active,
a:focus {
	outline: 0;
}

a:hover img {
	opacity: 0.6;
}

figure {
	margin: 0;
}

a img {
	border: 0;
}

:focus {
	outline: 0;
}

/* Table defaults override if needed */
table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}



/*--------------------------------------------------------------
	3. Common Utilities
-------------------------------------------------------------- */
.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

.line {
	border-bottom: 1px solid #ccc;
}

.center {
	text-align: center;
}

.block {
	display: inline-block;
}

.bold {
	font-weight: bold;
}

.red {
	color: red;
}

.blue {
	color: blue;
}

.mt-20 {
	margin-top: 20px;
}

.border {
	border: 2px solid var(--text-color);
	border-left: none;
}

/* Status Badges */
.reception {
	display: inline-block;
	background: var(--accent-color);
	color: #fff;
	font-size: 1em;
}

.end_of_reception {
	width: 40px;
	color: #ffffff;
	background-color: red;
	font-size: 80%;
	border-radius: 3px;
	font-weight: 500;
	padding: 2px 4px;
	margin-right: 5px;
}

.cancel {
	width: 40px;
	color: #000000;
	background-color: yellow;
	font-size: 80%;
	border-radius: 3px;
	font-weight: 500;
	padding: 4px 6px;
	margin-right: 5px;
}

.blink {
	animation: blink 2s ease infinite;
}

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

	100% {
		opacity: 1;
	}
}


/*--------------------------------------------------------------
	4. Components (Slider, Headings, Badges)
-------------------------------------------------------------- */

/* Swiper Slider */
#mainSlider {
	margin-bottom: 20px;
}

#mainSlider .swiper-pagination {
	position: relative;
	bottom: auto;
	margin-top: 15px;
}

#mainSlider .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
}

/* Headings */
.heading {
	position: relative;
	padding-left: 30px;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}

.heading:after,
.heading:before {
	content: '';
	height: 18px;
	width: 4px;
	display: block;
	background: var(--accent-color);
	position: absolute;
	top: 4px;
	left: 15px;
	border-radius: 10px;
	transform: rotate(45deg);
}

.heading:before {
	height: 10px;
	transform: rotate(-45deg);
	top: 10px;
	left: 7px;
}

/* Section Heading */
.section-heading {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.5em 0 0.5em 1em;
	border-left: 6px solid #d4a017;
	margin: 1em 0;
}

.section-heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 1em;
	right: 0;
	height: 3px;
	background: linear-gradient(to right, #d4a017 0%, #d4a017 10%, #333 10%, #333 90%, #d4a017 90%, #d4a017 100%);
}

.section-heading__title {
	font-family: 'Roboto', 'Noto Sans JP', sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--text-color);
}

.section-heading__subtitle {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	color: var(--text-light);
}

/* Link More Button style */
.link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: bold;
	margin: 12px 0 0 12px;
}

.link-more::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: var(--accent-orange);
}


/*--------------------------------------------------------------
	5. Layout (Header, Footer)
-------------------------------------------------------------- */
header {
	position: relative;
	width: 100%;
}

/* Logo Area */
#logo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;

	margin: 0 auto;
	width: 100%;
	max-width: 1024px;
	padding: 10px;
	box-sizing: border-box;
}

/* Site Info (Text) */
.site-info {
	flex: 1;
	/* 残りのスペースを埋める */
	min-width: 300px;
}

.site-info .three-quarter {
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2;
}

.contact-info {
	font-size: 14px;
	line-height: 1.4;
}

.contact-info img {
	vertical-align: middle;
	margin-right: 2px;
}

/* SNS Links */
.sns-links {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sns-links li {
	margin: 0;
	/* Reset */
}

.sns-links a {
	display: block;
	transition: opacity 0.3s;
}

.sns-links a:hover {
	opacity: 0.7;
}

.sns-links img {
	width: 30px;
	height: auto;
}

/* Footer */
#footer_bg {
	height: 160px;
	background: url("../img/footer.png") bottom left repeat-x;
}

#footer {
	height: 2em;
	background-color: var(--primary-color);
	text-align: center;
}

#footer small {
	color: #fff;
}

#pagetop {
	border: 1px solid var(--border-color);
	background-color: #fff;
	padding: 5px;
	position: fixed;
	bottom: 10px;
	right: 10px;
}


/*--------------------------------------------------------------
	6. Navigation (PC Dropdown)
-------------------------------------------------------------- */

/* Top Menu Container */
#menu {
	height: 74px;
	width: 100%;
	border-top: 6px double #aaa;
	border-bottom: 6px double #aaa;
	margin-top: 5px;
}

/* Dropdown Menu Structure */
#dropmenu {
	margin: 0 auto;
	text-align: center;
}

#dropmenu>li {
	position: relative;
	display: inline-block;
	padding: 0;
}

/* Main Navigation Links (Text based) */
#dropmenu>li>a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #555;
	padding: 8px 12px 12px 20px;
	transition: all 0.3s ease;
	position: relative;
}

#dropmenu>li>a:hover {
	opacity: 0.6;
}

/* Vertical Separator */
#dropmenu>li>a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 48px;
	background: radial-gradient(circle, #aaa 2px, transparent 2px) top center / 4px 8px repeat-y;
}

#dropmenu>li:first-child>a::before {
	display: none;
	/* Hide separator for first item */
}

/* Nav Text Styles */
#dropmenu>li>a .nav-en {
	display: block;
	font-size: 16px;
	font-weight: normal;
	color: #555;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}

#dropmenu>li>a .nav-ja {
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

/* Submenu Styles */
#dropmenu li ul {
	list-style: none;
	position: absolute;
	z-index: 100;
}

#dropmenu li:last-child ul {
	left: -100%;
	width: 100%;
}

#dropmenu li ul li {
	overflow: hidden;
	width: 150%;
	margin-left: -1em;
	height: 0;
	color: #fff;
	transition: .2s;
}

#dropmenu li:hover ul li {
	overflow: visible;
	height: 38px;
}

/* Submenu Links */
#dropmenu li ul li a {
	display: block;
	color: #333;
	background: #fff;
	text-align: left;
	font-size: 13px;
	/* Adjusted size */
	padding: 10px 0 10px 1em;
	font-weight: normal;
	align-items: flex-start;
	/* Reset flex alignment */
	justify-content: flex-start;
	flex-direction: row;
}

#dropmenu li ul li a:hover {
	background-color: #f0f8ff;
	opacity: 1;
	/* Reset opacity on hover for submenu items */
}

#dropmenu li ul li a::before {
	display: none;
	/* Hide separator for submenu items */
}

#dropmenu li ul .about-school a:before {
	content: url(../img/school-icon.png);
	position: relative;
	padding: 0 1em;
	display: inline-block;
	vertical-align: middle;
}

#dropmenu li ul .about-pro a:before {
	content: url(../img/study-icon.png);
	position: relative;
	padding: 0 1em;
	display: inline-block;
	vertical-align: middle;
}

#dropmenu li ul .about-fuss a:before {
	content: url(../img/foot-icon.png);
	position: relative;
	padding: 0 1em;
	display: inline-block;
	vertical-align: middle;
}

#dropmenu li ul .about-ost a:before {
	content: url(../img/last-icon.png);
	position: relative;
	padding: 0 1em;
	display: inline-block;
	vertical-align: middle;
}


/*--------------------------------------------------------------
	7. SP Components (Default: Hidden on PC)
-------------------------------------------------------------- */
/* Hamburger Button */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 30px;
	height: 24px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1001;
}

.hamburger span {
	display: block;
	width: 100%;
	height: 3px;
	background-color: #333;
	border-radius: 2px;
	transition: all 0.3s ease;
}

.hamburger.is-active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.is-active span:nth-child(2) {
	opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* Drawer Overlay */
.drawer-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.drawer-overlay.is-open {
	opacity: 1;
}

/* Drawer Menu */
.drawer-menu {
	display: none;
	position: fixed;
	top: 0;
	right: -80%;
	width: 80%;
	max-width: 320px;
	height: 100%;
	background: #fff;
	z-index: 1000;
	overflow-y: auto;
	transition: right 0.3s ease;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.drawer-menu.is-open {
	right: 0;
}

/* Close Button */
.drawer-close {
	position: absolute;
	top: 10px;
	right: 15px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	font-size: 28px;
	color: var(--text-light);
	cursor: pointer;
	line-height: 1;
	z-index: 10;
}

.drawer-close:hover {
	color: var(--text-color);
}

.drawer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drawer-nav>ul>li {
	border-bottom: 1px solid var(--border-light);
}

.drawer-nav>ul>li>a {
	display: block;
	padding: 15px 20px;
	text-decoration: none;
	color: var(--text-color);
}

.drawer-nav-en {
	display: block;
	font-size: 10px;
	color: var(--text-muted);
	margin-bottom: 2px;
}

.drawer-nav-ja {
	display: block;
	font-size: 16px;
	font-weight: bold;
}

.drawer-submenu {
	background: var(--bg-light);
	padding-left: 20px;
}

.drawer-submenu li a {
	display: block;
	padding: 12px 20px;
	font-size: 14px;
	color: #555;
	text-decoration: none;
	border-bottom: 1px solid #eee;
}

.drawer-submenu li:last-child a {
	border-bottom: none;
}

.drawer-contact {
	padding: 15px 20px;
	text-align: center;
	border-top: 1px solid #eee;
}

.drawer-tel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	color: #555;
	text-decoration: none;
	font-size: 13px;
}

.drawer-tel img {
	height: 12px;
	opacity: 0.6;
}

.drawer-sns {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 20px;
	list-style: none;
	margin: 0;
}

.drawer-sns img {
	width: 40px;
	height: auto;
}

/* SP CTA Bar */
.sp-cta-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 998;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.sp-cta-bar a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	padding: 15px;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
}

.sp-cta-catalog {
	background: #fff;
	color: var(--primary-color);
	border-top: 2px solid var(--primary-color);
}

.sp-cta-inquiry {
	background: var(--primary-color);
	color: #fff;
}

/* Body scroll lock */
body.no-scroll {
	overflow: hidden;
}


/*--------------------------------------------------------------
	8. Media Queries (SP, Tablet)
-------------------------------------------------------------- */

/* SP (max-width: 959px) */
@media screen and (max-width: 959px) {

	/* Header */
	body>header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 100;
		border-bottom: 1px solid var(--border-light);
	}

	#logo {
		justify-content: space-between;
		padding: 8px 15px;
		max-width: none;
	}

	#logomark img {
		max-height: 40px;
		width: auto;
	}

	.site-info,
	.sns-links {
		display: none;
	}

	.hamburger {
		display: flex;
	}

	/* Hide PC Navigation */
	#menu {
		display: none;
	}

	/* Show SP components */
	.drawer-menu {
		display: block;
	}

	.drawer-overlay.is-open {
		display: block;
	}

	.sp-cta-bar {
		display: flex;
	}

	/* Body padding for fixed header/footer */
	body {
		padding: 55px 0;
	}

	/* Footer */
	#footer_bg {
		height: 120px;
	}
}

/* Tablet (1024px) */
@media screen and (max-width: 1024px) and (min-width: 960px) {
	#logo p {
		font-size: 90%;
	}

	#dropmenu li {
		position: relative;
		margin-top: 0.5em;
		margin-right: -1em;
		padding: 0;
	}
}