@charset "UTF-8";
/* ===================================================================
   English Learning Site - Bright Cool Redesign
   - 明るめのライトトーン
   - 青→紫→ピンクのグラデーション
   - ガラスモーフィズム
   - 高校生向けクール
   =================================================================== */

:root{
	--bg-0:#eef4ff;
	--bg-1:#f7faff;
	--bg-2:#ffffff;
	--surface:rgba(255,255,255,0.75);
	--surface-2:rgba(255,255,255,0.92);
	--surface-glass:rgba(255,255,255,0.55);
	--border:rgba(120,140,200,0.22);
	--border-strong:rgba(80,120,220,0.40);
	--text:#1a2240;
	--text-2:#34406a;
	--text-mute:#6c7aa3;
	--accent:#2563eb;            /* blue */
	--accent-2:#7c3aed;          /* purple */
	--accent-3:#ec4899;          /* pink */
	--accent-4:#f59e0b;          /* amber */
	--accent-5:#06b6d4;          /* cyan */
	--success:#10b981;
	--danger:#ef4444;
	--warn:#f59e0b;
	--grad-main:linear-gradient(135deg,#2563eb 0%,#7c3aed 50%,#ec4899 100%);
	--grad-cool:linear-gradient(135deg,#06b6d4 0%,#2563eb 100%);
	--grad-warm:linear-gradient(135deg,#ec4899 0%,#f59e0b 100%);
	--shadow-soft:0 8px 24px rgba(80,100,180,0.10);
	--shadow-card:0 10px 30px rgba(80,100,180,0.15),0 2px 6px rgba(80,100,180,0.08);
	--shadow-glow:0 0 24px rgba(124,58,237,0.20);
	--radius:16px;
	--radius-sm:10px;
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	text-align:center;
}

html,body{
	min-height:100%;
}

body{
	font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
	color:var(--text);
	background:
		radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,0.10), transparent 60%),
		radial-gradient(900px 500px at 110% 10%, rgba(6,182,212,0.10), transparent 60%),
		radial-gradient(800px 600px at 50% 120%, rgba(236,72,153,0.08), transparent 60%),
		linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 60%,var(--bg-2) 100%);
	background-attachment:fixed;
	letter-spacing:0.01em;
}

strong{
	color:var(--accent-3);
	font-weight:700;
}

a{
	color:var(--accent);
	text-decoration:none;
	transition:all .2s ease;
}
a:hover{
	color:var(--accent-2);
}

/* ----- popup tooltip ----- */
.popup{
	display:none;
	position:absolute;
	top:15px;
	left:90px;
	white-space:nowrap;
	border:1px solid var(--border-strong);
	padding:6px 10px;
	color:var(--text);
	background:var(--surface-2);
	border-radius:var(--radius-sm);
	box-shadow:var(--shadow-soft);
	text-decoration:none;
}
a:hover .popup{ display:block; }
a:hover{ position:relative; }

/* ----- menu blocks ----- */
.menu_left1 a,
.menu_left2 a,
.menu_left4 a,
.menu_right1 a,
.menu_right2 a{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	width:100%;
	height:100%;
	text-decoration:none;
	color:var(--text);
	font-weight:600;
	padding-left:4px;
}

.menu_left1,
.menu_left2,
.menu_left3,
.menu_left4{
	margin:0 0 8px 0;
	padding:6px 10px;
	display:flex;
	align-items:center;
	float:left;
	width:220px;
	font-size:105%;
	background:var(--surface);
	border:1px solid var(--border);
	border-left:4px solid var(--accent);
	border-radius:var(--radius-sm);
	transition:all .2s ease;
	color:var(--text);
}
.menu_left1{ border-left-color:var(--accent);   height:32px; }
.menu_left2{ border-left-color:var(--accent-2); height:32px; }
.menu_left3{ border-left-color:var(--accent-3); height:32px; }
.menu_left4{ border-left-color:var(--accent-3); height:48px; }

.menu_right1,
.menu_right2,
.menu_right_none{
	margin:0 0 8px 16px;
	padding:6px 10px;
	display:flex;
	align-items:center;
	float:left;
	height:32px;
	width:100px;
	font-size:105%;
	background:var(--surface);
	border:1px solid var(--border);
	border-left:4px solid var(--accent);
	border-radius:var(--radius-sm);
	transition:all .2s ease;
	color:var(--text);
}
.menu_right1{ border-left-color:var(--accent); }
.menu_right2{ border-left-color:var(--accent-2); }
.menu_right_none{
	border-left-color:transparent;
	visibility:hidden;
}

.menu_left1:hover,
.menu_left2:hover,
.menu_left4:hover,
.menu_right1:hover,
.menu_right2:hover{
	background:var(--surface-2);
	border-color:var(--border-strong);
	transform:translateX(2px);
	box-shadow:var(--shadow-soft);
}

.clearl{ clear:left; }
.clearb{ clear:both; }

/* ----- link list ----- */
ul#linklist{ list-style:none; padding-left:8px; }
ul#linklist li{
	list-style:none;
	padding:6px 10px;
	border-left:3px solid var(--accent);
	margin-bottom:6px;
	background:var(--surface);
	border-radius:var(--radius-sm);
	transition:all .2s ease;
}
ul#linklist li:hover{
	background:var(--surface-2);
	border-left-color:var(--accent-3);
	box-shadow:var(--shadow-soft);
}
ul#linklist li a{ text-decoration:none; color:var(--text); }
ul#linklist li a:hover{ color:var(--accent-2); }

/* ----- left/right text ----- */
.left{
	text-align:left;
	float:left;
	color:var(--text-mute);
}
.right{
	text-align:right;
	font-size:80%;
	color:var(--text-mute);
}

/* ----- information / menu / login ----- */
#information_contents h2{
	background:var(--grad-warm);
	font-size:110%;
	padding:6px 12px;
	color:#fff;
	border-radius:var(--radius-sm) var(--radius-sm) 0 0;
	letter-spacing:0.05em;
}
#information_contents p,
#information_contents ul{
	border:1px solid var(--border);
	border-top:none;
	background:var(--surface);
	padding:10px 14px;
	border-radius:0 0 var(--radius-sm) var(--radius-sm);
	color:var(--text);
}
#information_contents ul{ padding-left:24px; }

#menu_contents p{ padding-top:15px; }

#menu{ width:400px; float:left; }
#menu_contents{ padding:15px 0 0 10px; }

#login{ width:600px; float:left; }
#login_contents{ padding:15px 0 0 10px; }

#information{ width:450px; float:right; }
#information_contents{ padding:15px 10px 0 0; }

/* ----- table ----- */
table,th,td{
	border:1px solid var(--border-strong);
	border-collapse:collapse;
}

.center{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

/* ----- top header ----- */
#top{
	width:100%;
	background:
		linear-gradient(90deg,rgba(37,99,235,0.10),rgba(124,58,237,0.10),rgba(236,72,153,0.10)),
		#ffffff;
	border-bottom:1px solid var(--border);
	text-align:center;
	box-shadow:var(--shadow-soft);
}
#top_contents{ padding:14px 20px 14px 30px; }
#top_contents h1{
	color:var(--text);
	font-weight:800;
	letter-spacing:0.04em;
	background:var(--grad-main);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}

/* ----- login ----- */
#login_contents h2{
	background:var(--grad-cool);
	padding:6px 14px;
	color:#fff;
	border-radius:var(--radius-sm) var(--radius-sm) 0 0;
	letter-spacing:0.05em;
}

.login_text{
	width:140px;
	border:1px solid var(--border-strong);
	background:#fff;
	color:var(--text);
	padding:6px 8px;
	border-radius:6px;
	outline:none;
}
.login_text:focus{
	border-color:var(--accent);
	box-shadow:0 0 0 3px rgba(37,99,235,0.18);
}

#login_table{
	text-align:right;
	margin:0 auto;
	border:none;
}
#login_table tr td{
	text-align:right;
	border:none;
	padding:6px;
	color:var(--text);
}

#login_button{
	margin-left:10px;
	background:var(--grad-main);
	color:#fff;
	border:none;
	padding:8px 18px;
	border-radius:8px;
	font-weight:700;
	cursor:pointer;
	box-shadow:0 4px 14px rgba(124,58,237,0.30);
	transition:all .2s ease;
}
#login_button:hover{
	transform:translateY(-1px);
	box-shadow:0 6px 20px rgba(124,58,237,0.45);
}

#login_contents div{
	border:1px solid var(--border);
	border-top:none;
	background:var(--surface);
	padding:14px;
	border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
#login_contents p{
	padding-top:10px;
	color:var(--text-mute);
}

/* ----- footer ----- */
#footer{
	width:100%;
	clear:both;
	border-top:1px solid var(--border);
	margin-top:30px;
	color:var(--text-mute);
}
#footer_contents{
	padding:20px 16px 12px 16px;
	text-align:right;
	font-size:80%;
}

/* ----- schedule table cells ----- */
th.class_name{
	color:#fff;
	background:var(--grad-main);
	font-weight:700;
	padding:4px 8px;
	border:1px solid var(--border-strong);
	letter-spacing:0.05em;
}
td.finished{
	background:#e3e7f0;
	color:#8a93ac;
	padding:4px 6px;
	border:1px solid var(--border-strong);
	text-decoration:line-through;
}
td.plan{
	background:linear-gradient(135deg,rgba(37,99,235,0.10),rgba(124,58,237,0.10));
	color:var(--text);
	padding:4px 6px;
	border:1px solid var(--border-strong);
	font-weight:600;
}
td.test{
	background:var(--grad-warm);
	color:#fff;
	padding:4px 6px;
	border:1px solid var(--border-strong);
	font-weight:800;
}

/* ----- responsive ----- */
@media (max-width:600px){
	#menu,#login,#information{
		width:100%;
		float:none;
	}
	.menu_left1,.menu_left2,.menu_left3,.menu_left4,
	.menu_right1,.menu_right2,.menu_right_none{
		width:100%;
		float:none;
		font-size:100%;
	}
	#login_table,#login_table tr,#login_table td{
		display:block;
		width:100%;
		text-align:left;
	}
	.loginbox{
		width:100%;
		box-sizing:border-box;
	}
	#top_contents h1{ font-size:1.2em; }
	#login_contents h2{ font-size:1.1em; }
	#footer_contents{ text-align:center; }
}