/* ******************************************************************
 *	File name		: base.css
 *	Summary			: css base
 * ******************************************************************
 */

:root {
	--base-color: #5F8FCB;/* 青 */
	--nav-hover: #EAF2D7;/* F3F8E9 */
}
/*
font-color
#505050

*/
/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */
/*
*{
	border:1px solid red !important;
}
*/
html{
	background:url(../../image/base/bg.png) no-repeat center top #FFF;
	overflow-x:hidden;
}
body{
	position:relative;
	width:100%;
	line-height:145%;
	color:#222;
	}
	#wrapper{
		position:relative;
		width:100%;
		height:100%;
		padding-top:120px;
		text-align:center;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	html{
		background:none;
	}
	#wrapper{
		padding-top:60px;
	}
}

@media print {
	body{
		margin:0;
		width:1100px;
	}
}

/* -----------------------------------------------------------------
   header
----------------------------------------------------------------- */

header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:120px;
	margin:0 auto;
	z-index:101;
	}
	header::before{
		content:" ";
		position:absolute;
		top:-130px;
		left:0px;
		right:0;
		width:100%;
		height:120px;
		background:linear-gradient(0deg, rgba(255,255,255,0.9), rgba(255,255,255,1));
		z-index:-1;
		transition:0.5s;
		box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	}
	#head_contents{
		position:relative;
		width:min(1100px,100%);
		height:100%;
		margin:0 auto;
		padding:0 37px;
		text-align:center;
		z-index:1;
	}
	#head_contents h1{
		position:absolute;
		top:21px;
		left:37px;
		width:217px;
		}
		#head_contents h1 a{
			display:inline-block;
			position:relative;
			width:100%;
			height:100%;
}

/* nav */
header nav{
	position:absolute;
	top:27px;
	right:calc(195px + 37px);
	transition:1.0s;
	}
	header nav > ul{
		display:flex;
		justify-content:flex-end;
		flex-wrap:wrap;
		width:100%;
		height:100%;
		list-style:none;
		transition:0.5s;
	}
	header nav > ul > li{
		display:block;
		position:relative;
		min-width:80px;
		height:100px;
		margin-left:22px;
		transition:0.5s;
	}
	header nav > ul > li > a{
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		width:100%;
		height:100%;
		margin:0 auto;
		padding:50px 0 0;
		font-weight:600;
		font-size:0.74rem;
		text-decoration:none;
		text-align:center;
		z-index:10;
		border-radius:6px;
		transition:0.5s;
		color:#505050;
	}
	header nav > ul > li > a{
		background-repeat:no-repeat;
		background-position:center 0;
		background-size:65px;
	}
	header nav > ul > li#nav_about > a{background-image:url(../../image/base/nav_about.png);}
	header nav > ul > li#nav_program > a{background-image:url(../../image/base/nav_program.png);}
	header nav > ul > li#nav_art > a{background-image:url(../../image/base/nav_art.png);}
	header nav > ul > li#nav_access > a{background-image:url(../../image/base/nav_access.png);}
	header nav > ul > li#nav_students > a{background-image:url(../../image/base/nav_students.png);}

	header nav > ul > li.active a,
	header nav > ul > li > a:hover{
		text-decoration:none;
		color:rgba(234,87,98,1);
}

header nav > ul > li > ul{
	position:absolute;
	width:200px;
	padding:0 15px;
	background:var(--nav-hover);
	border-radius:6px;
	}
	header nav > ul > li > ul::before{
		content:" ";
		position:absolute;
		padding:;
		top:0px;
		left:10px;
		border:6px solid transparent;
		border-bottom:0px solid var(--nav-hover);
		transition-duration:0.5s;
}
header nav > ul > li > ul li{
	position:relative;
	height:0px;
	transition-duration:0.5s;
	overflow:hidden;
	}
	header nav > ul > li > ul li::before{
		content:" ";
		display:block;
		position:absolute;
		top:calc(50% + 1px);
		left:0;
		transform:translateY(-50%);
		width:16px;
		height:16px;
		line-height:13px;
		text-align:center;
		border:1px solid #555;
		border-radius:50%;
	}
	header nav > ul > li > ul li a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		padding:8px 0 0 23px;
		font-weight:600;
		font-size:12px;
		text-align:left;
		transition-duration:0.5s;
		color:#555;
	}
	header nav > ul > li > ul li a::before,
	header nav > ul > li > ul li a::after{
		content:" ";
		position:absolute;
		margin-left:-10px;
		opacity:0;
		transition-duration:0.5s;
		}
		header nav > ul > li:hover > ul li a::before,
		header nav > ul > li:hover > ul li a::after{
			margin-left:0px;
			opacity:1;
		}
		header nav > ul > li > ul li a::before{
			top:20px;
			left:5px;
			width:7px;
			height:1px;
			background:#555;
		}
		header nav > ul > li > ul li a::after{
			top:18px;
			left:6px;
			width:5px;
			height:5px;
			border-top:1px solid #555;
			border-right:1px solid #555;
			transform:rotate(45deg);
	}
	header nav > ul > li > ul li a:hover{
		text-decoration:none;
	}
	header nav > ul > li > ul li:hover{
		background:#C6DC92;
}


header nav > ul > li:hover > ul{
	padding:10px 15px;
	}
	header nav > ul > li:hover > ul::before{
		top:-18px;
		border-bottom:14px solid var(--nav-hover);
	}
	header nav > ul > li:hover > ul li{
		height:40px;
		border-bottom:2px dotted #999;
	}
	header nav > ul > li:hover > ul li:last-child{
		border-bottom:none;
}

/* -----------------------------------------------------------------
   h_slide
----------------------------------------------------------------- */

header.h_slide{
	position:fixed;
}
header.h_slide::before{
	top:0;
}
header.h_slide #head_contents{
	top:-10px;
}

/* -----------------------------------------------------------------
   nav_icon
----------------------------------------------------------------- */

#nav_icon{
	display:none;
	position:fixed;
	top:0px;
	right:0px;
	width:120px;
	height:120px;
	background:#F3F9E9;
	cursor:pointer;
	z-index:1000;
	transition-duration:0.5s;
	}
	#nav_icon::before,
	#nav_icon::after{
		content:" ";
		position:absolute;
		left:37px;
		width:45px;
		height:2px;
		background:#000;
		transition-duration:0.5s;
	}
	#nav_icon::before{
		top:35px;
	}
	#nav_icon::after{
		top:65px;
	}
	#nav_icon span{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	}
	#nav_icon span::before{
		content:"MENU";
		display:block;
		position:absolute;
		top:80px;
		left:0px;
		width:100%;
		font-size:0.87rem;
		text-align:center;
		color:#000;
	}
	#nav_icon span::after{
		content:" ";
		position:absolute;
		top:50px;
		left:37px;
		width:45px;
		height:2px;
		background:#000;
		transition-duration:0.5s;
}
/* --- responsive --- */
@media only screen and (max-width:1000px){
	#nav_icon{
		display:block;
	}
}

/* sp open menu */
.open_menu #nav_icon::before,
.open_menu #nav_icon::after{
	top:50px;
	left:40px;
	}
	.open_menu #nav_icon::before{
		transform:rotate(-135deg) !important;
	}
	.open_menu #nav_icon::after{
		transform:rotate(135deg) !important;
	}
	.open_menu #nav_icon span::after{
		left:50%;
		width:0px;
}

/* -----------------------------------------------------------------
   SP MENU
----------------------------------------------------------------- */
/* --- responsive --- */
@media only screen and (max-width:1000px){
	header{
		height:120px;
		z-index:999;
	}
	header nav{
		display:none;
	}
}
@media only screen and (max-width:767px){
	header{
		height:60px;
	}
	header::before{
		top:-70px;
		height:60px;
	}
	#head_contents h1{
		position:absolute;
		top:12px;
		left:20px;
		width:150px;
		}
		#head_contents h1 a{
			display:inline-block;
			position:relative;
			width:100%;
			height:100%;
	}
	#nav_icon{
		top:0px;
		right:0px;
		width:60px;
		height:60px;
		}
		#nav_icon::before,
		#nav_icon::after{
			left:15px;
			width:30px;
		}
		#nav_icon::before{
			top:12px;
		}
		#nav_icon::after{
			top:28px;
		}
		#nav_icon span::before{
			top:30px;
			font-size:0.65rem;
		}
		#nav_icon span::after{
			top:20px;
			left:15px;
			width:30px;
	}

	/* sp open menu */
	.open_menu #nav_icon::before,
	.open_menu #nav_icon::after{
		top:22px;
		left:15px;
	}
}

/* -----------------------------------------------------------------
   nav_line
----------------------------------------------------------------- */

#header_contact{
	position:absolute;
	top:36px;
	right:37px;
	width:165px;
	text-align: center;
}
#header_contact a{
	display:block;
	position:relative;
	width:100%;
	height:100%;
	text-align:center;
	color:#555;
	}
	#header_contact a:hover{
		text-decoration:none;
}
#header_contact p{
	margin:0;
	font-weight:500;
	font-size:16px;
}
#header_contact b{
	display:block;
	margin-bottom:4px;
	font-weight:500 !important;
	font-size:23px;
}
#header_contact span{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:20px;
	padding-bottom:1px;
	font-weight:700;
	font-size:13px;
	border-radius:20px;
	background:#E50012;
	color:#FFF;
	transition:.5s;
}
#header_contact a:hover span{
	background:#C00;
}

/* --- responsive --- */
@media only screen and (max-width:1000px){
	#header_contact{
		top:36px;
		right:157px;
	}
}
@media only screen and (max-width:767px){
	#header_contact{
		display:none;
	}
}

/* -----------------------------------------------------------------
   main
----------------------------------------------------------------- */

main{
	display:block;
	position:relative;
	margin-top:0;
	padding:0 20px;
	width:100%;
	z-index:1;
}
#main_contents{
	position:relative;
	width:100%;
	max-width:100%;
	margin:0 auto;
}

section{
	position:relative;
	width:100%;
	max-width:100%;
	margin:0 auto;
}

/* -----------------------------------------------------------------
   footer
----------------------------------------------------------------- */

footer{
	display:block;
	width:100%;
	padding:50px 0 90px;
	background:#F6F6F6;
}
#footer_inner{
	position:relative;
	width:min(960px,100%);
	margin:0 auto;
	padding:0 20px;
}
#footer_banner ul{
	display:flex;
	justify-content:center;
	gap:36px;
	list-style:none;
	}
	#footer_banner li{
		width:175px;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#footer_banner ul{
		display:-webkit-flex;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		gap:0px;
		}
		#footer_banner li{
			max-width:47%;
			margin:0 auto 20px;
	}
}

#footer_contents{
	display:grid;
	position:relative;
	grid-template-columns:370px 1fr;
	gap:20px;
	margin:58px 0 0;
	}
	#footer_info{
		text-align:left;
	}
	#footer_info p{
		font-weight:600;
		font-size:11.5px;
		line-height:1.25;
		color:#555;
	}
	#footer_logo{
		width:225px;
		margin:0 0 30px;
	}
	#footer_contact{
		margin:0 0 18px;
		font-weight:600;
		line-height:1.25;
	}
	#footer_contact span{
		display:block;
		font-size:20px;
		font-weight:600;
		line-height:1.25;
		color:#555;
	}
	#footer_contact #ft_tel{
		display:block;
		margin:4px 0 0;
		font-size:28px;
		color:#e6007e;
		text-decoration:none;
	}
	#footer_info address{
		margin:30px 0 18px;
		font-weight:600;
		font-size:11.5px;
		line-height:1.75;
		color:#555;
}
/* --- responsive --- */
@media screen and (max-width:1100px){
	#footer_contents{
		display:block;
		margin:40px auto 20px;
		}
		#footer_info{
			text-align:center;
		}
		#footer_logo{
			margin:0 auto 30px;
	}
}

footer nav{
	display:grid;
	grid-template-columns:1.1fr 1.15fr 1fr;
	gap:25px;
	padding:0 0 0;
	text-align:left;
}
footer nav ul{
	margin:0 0 15px;
	list-style:none;
	}
	footer nav li{
		position:relative;
		margin:0 0 10px;
	}
	footer nav li ul li:hover{
		opacity:0.7;
	}
	footer nav li a{
		position:relative;
		font-weight:600;
		font-size:12px;
		text-decoration:none;
		transition:color .3s;
		color:#555;
		}
		footer nav li a:hover{
			text-decoration:none;
			opacity:0.7;
}

footer nav ul li ul{
	margin:10px 0 20px;
	}
	footer nav ul li ul li::before{
		content:" ";
		display:block;
		position:absolute;
		top:calc(50% + 2px);
		left:0;
		transform:translateY(-50%);
		width:15px;
		height:15px;
		line-height:13px;
		text-align:center;
		border:1px solid #555;
		border-radius:50%;
	}
	footer nav ul li ul li a::before,
	footer nav ul li ul li a::after{
		content:" ";
		position:absolute;
		}
		footer nav ul li ul li a::before{
			top:9px;
			left:4px;
			width:7px;
			height:1px;
			background:#555;
		}
		footer nav ul li ul li a::after{
			top:7px;
			left:5px;
			width:5px;
			height:5px;
			border-top:1px solid #555;
			border-right:1px solid #555;
			transform:rotate(45deg);
	}
	footer nav ul li ul li a{
		padding-left:22px;
}

/* --- responsive --- */
@media screen and (max-width:1100px){
	footer nav{
		display:block;
		position:fixed;
		top:120px;
		right:-360px;
		width:360px;
		height:calc(100% - 120px);
		padding:30px;
		background:#F3F9E9;
		z-index:110;
		transition-duration:0.5s;
		overflow-y:scroll;
	}
	footer.open_menu nav{
		right:0px;
	}
	footer nav div:first-child{
		border-top:1px solid #555;
	}
	footer nav ul{
		margin:0px;
		}
		footer nav li{
			position:relative;
			margin:0px;
			border-bottom:1px solid #555;
			cursor:pointer;
		}
		footer nav li.sub_menu span{
			display:block;
			position:relative;
			width:100%;
			padding:7px 0;
			font-weight:500;
			font-size:16px;
			text-decoration:none;
			transition:color .3s;
			color:#555;
		}
		footer nav li a{
			display:block;
			position:relative;
			width:100%;
			padding:7px 0;
			font-weight:500;
			font-size:16px;
			text-decoration:none;
			transition:color .3s;
			color:#555;
	}
	footer nav ul li ul{
		margin:0px;
		}
		footer nav ul li.sub_menu::before,
		footer nav ul li.sub_menu::after{
			content:" ";
			display:block;
			position:absolute;
			background:#999;
			transition-duration:0.5s;
			}
			footer nav ul li.sub_menu::before{
				top:19px;
				right:5px;
				width:18px;
				height:3px;
			}
			footer nav ul li.sub_menu::after{
				top:12px;
				right:12px;
				width:3px;
				height:18px;
		}
		footer nav ul li.active.sub_menu::before,
		footer nav ul li.active.sub_menu::after{
			transform:rotate(45deg);
			}
			footer nav ul li.active.sub_menu::before{
				right:7px;
				width:12px;
			}
			footer nav ul li.active.sub_menu::after{
				top:14px;
				right:5px;
				height:12px;
		}
		footer nav ul li ul li{
			height:0px;
			border:none;
			overflow:hidden;;
			transition-duration:0.5s;
			border-top:1px dotted rgba(0,0,0,0);
		}
		footer nav ul li.active ul{
		}
		footer nav ul li.active ul li{
			height:37px;
			background:#FFF;
			border-top:1px dotted rgba(0,0,0,0.3);
		}
		footer nav ul li ul li a{
			padding-left:22px;
	}
	footer nav ul li ul li::before,
	footer nav ul li ul li a::before{
		display:none;
	}
	footer nav ul li ul li a::after{
		top:15px;
	}

	footer nav div:nth-child(3) ul li:nth-child(1){
		margin-bottom:10px;
	}
	footer nav div:nth-child(3) ul li:nth-child(2),
	footer nav div:nth-child(3) ul li:nth-child(3){
		border:none;
	}
	footer nav div:nth-child(3) ul li:nth-child(2) a,
	footer nav div:nth-child(3) ul li:nth-child(3) a{
		padding:3px 0;
		font-size:12px;
	}
}
@media only screen and (max-width:767px){
	footer nav{
		top:60px;
		right:-100%;
		width:100%;
		height:calc(100% - 60px);
	}
}

#footer_sns{
	display:flex;
	position:absolute;
	bottom:0px;
	right:0px;
	gap:12px;
	list-style:none;
	}
	#footer_sns li{
		width:25px;
	}
	#footer_sns li:first-child{
		width:35px;
}

#copyright{
	font-size:10px;
	text-align:right;
	color:#333;
}

/* --- responsive --- */
@media screen and (max-width:1100px){
	#footer_sns{
		display:block;
		position:relative;
		margin:40px auto 15px;
		text-align:center;
		list-style:none;
	}
	#footer_sns li{
		display:inline-block;
	}

	#copyright{
		font-size:10px;
		text-align:center;
		color:#333;
	}
}

/* -----------------------------------------------------------------
   btn
----------------------------------------------------------------- */

.btn{
	display:inline-block;
	position:relative;
	width:auto;
	min-width:400px;
	max-width:100%;
	height:70px;
	margin:10px 0 0;
	}
	.btn a{
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		height:100%;
		font-weight:500;
		font-size:1.1rem;
		text-decoration:none;
		border:2px solid #818181;
		border-radius:35px;
		background:#818181;
		color:#FFF;
		transition:0.5s;
	}
	.btn a:hover{
		text-decoration:none;
		background:#FFF;
		color:#818181;
}

/* --- responsive --- */
@media screen and (max-width:1040px){
	.btn{
		min-width:300px;
	}
}
@media screen and (max-width:767px){
	.btn{
		min-width:100px;
		max-width:100%;
		width:100%;
		height:50px;
	}
	.btn a{
		width:100%;
		font-size:1.0rem;
	}
}

/* -----------------------------------------------------------------
   float_bar
----------------------------------------------------------------- */

#float_bar{
	display:block;
	position:fixed;
	top:130px;
	right:-20px;
	width:auto;
	width:90px;
	height:271px;
	transition-duration:0.5s;
	z-index:100;
	}
	#float_bar a{
		display:block;
		border-radius:25px 0 0 25px;
		overflow:hidden;
		box-shadow: 2px 5px 7px rgba(0,0,0,0.3);
		transition-duration:0.5s;
	}
	#float_bar:hover{
		right:0px;
	}
	#float_bar:hover a{
		opacity:.8;
	}

/* --- responsive --- */
@media screen and (max-width:767px){
	#float_bar{
		display:fixed;
		top:auto;
		left:0px;
		right:0px;
		bottom:0px;
		width:100%;
		height:60px;
		background:#FF7373;
		border-top:5px solid #FF4D4D;
		box-shadow:0px 0px 10px rgba(0,0,0,0.2);
		}
		#float_bar a{
			display:block;
			width:100%;
			height:100%;
			border-radius:0;
			overflow:hidden;
			box-shadow:0 !important;
			transition-duration:0.5s;
		}
		#float_bar img{
			display:none;
		}
		#float_bar::before{
			display:flex;
			justify-content:center;
			align-items:center;
			content:"お問い合わせ・お申込み";
			position:absolute;
			top:-4px;
			left:0px;
			width:100%;
			height:60px;
			font-weight:500;
			font-size:1.1rem;
			color:#FFF;
		}
		#float_bar::after{
			content:" ";
			position:absolute;
			top:0px;
			left:20px;
			width:50px;
			height:50px;
			background:url(../../image/base/float_contact_sp.png) no-repeat 0 0;
			background-size:contain;
	}
}

/* -----------------------------------------------------------------
   pagetop
----------------------------------------------------------------- */

#pagetop{
	position:fixed;
	bottom:270px;
	right:30px;
	width:50px;
	height:50px;
	z-index:999;
	}
	#pagetop a{
		display:block;
		width:100%;
		height:100%;
		color:#FFF;
		border:2px solid #000;
		border-radius:50%;
		background:#000;
		color:#000;
		transition:0.5s;
		}
		#pagetop a:hover{
			background:#FFF;
			text-decoration:none;
	}
	#pagetop a::before,
	#pagetop a::after{
		content:" ";
		position:absolute;
		top:22px;
		width:16px;
		height:2px;
		background:#FFF;
		transition:0.5s;
		}
		#pagetop a::before{
			right:calc(50% - 3px);
			transform:rotate(-45deg);
		}
		#pagetop a::after{
			left:calc(50% - 3px);
			transform:rotate(45deg);
			}
			#pagetop a:hover::before,
			#pagetop a:hover::after{
				background:#000;
	}
	#pagetop a span{
		position:absolute;
		bottom:-25px;
		left:0;
		width:100%;
		text-align:center;
		color:#000;
}

@media screen and (max-width:1040px){
	#pagetop{
		bottom:120px;
	}
}
@media print{
	#pagetop{
		display:none;
	}
}