@charset "UTF-8";

.top-icatch {
	position:relative;
	max-height:700px;
	min-height:500px;
	width:100%;
	aspect-ratio:2 / 1;
	overflow:hidden;
	background-color:#fff;
}

/*
.top-header-img {
	position:absolute;
	top:0;
	left:0;
	object-fit:cover;
	object-position: center bottom;
	z-index:-1;
}

.top-header-img img {
	width:100%;
	object-fit:cover;
}
*/

.slide-animation{
	animation: fadezoom 15s 0s forwards linear;
}

@keyframes fadezoom {
	0% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

.slickslide {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	background-color:#222;
	opacity:0;
	transition: all 1s;
}

.slickslide.slick-initialized{
	opacity:1;
}


.slickslide li {
	margin:0;
	padding:0;
}


.maintitle {
	margin:0 auto;
	width:500px;
	max-width:90%;
}

.toptitle {
	position:absolute;
	top:100px;
	left:50%;
	margin-left:-350px;
	width:700px;
	text-align:center;
}

.toptitle2 {
	position:absolute;
	top:250px;
	left:50%;
	margin-left:-500px;
	width:1000px;
}

.toptitle3 {
	position:absolute;
	top:180px;
	left:50%;
	margin-left:-500px;
	width:1000px;
	color:#fff;
	font-size:1em;
	text-shadow:0 0 12px #222;
	font-weight:500;
}

.rsimg {
	width:260px;
}

.rsimg2 {
	width:200px;
}

.top-cmt {
	position:absolute;
	bottom:20px;
	left:50%;
	width:1200px;
	margin-left:-600px;
	color:#fff;
	font-size:1.2em;
	text-shadow:0 0 12px #222;
	font-weight:500;
	letter-spacing:0.1em;
	line-height:1.4;
}

.top-cmt .btn {
	text-shadow:none;
}

.top-cmt-title {
	font-size:1.5em;
}

.top-cmt-bg {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	background-color:rgba(0,0,0,0.4);
}

.top-cmt2 {
	width:1200px;
	margin:10px auto;
	color:#fff;
	font-size:1.2em;
	text-shadow:0 0 12px #222;
	font-weight:500;
	letter-spacing:0.1em;
	line-height:1.4;
}

.top-cmt2 .btn {
	text-shadow:none;
}

.topcmt-left {
	width:550px;
}

.topcmt-right {
	width:620px;
	color:#fff;
	font-size:1.2em;
	font-weight:500;
	text-shadow:0 0 10px #555;
	
}

.topbtn {
	height:2em;
}


.hissu {
	font-size:0.6em;
}

.bunyakubunmark {
	position:absolute;
	top:1px;
	right:2px;
	font-size:0.5em;
	color:#f22;
}

.shubetsuwaku {
	height:100px;
}

.shubetsutop {
	position:sticky;
	top:60px;
	left:0;
	width:100%;
	background-color:#fff;
	border-bottom:1px solid #ddd;
	z-index:1;
}

.shubetsukensu {
	font-size:1.6em;
	font-weight:bold;
	color:#007;
}


.shubetsubtn {
	margin:0 3px;
	width:420px;
	height:80px;
	padding:3px;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	cursor:pointer;
	border-radius:20px 20px 0 0;
	background-color:#fff;
	transition: all 0.3s;
}

.shubetsubtn:hover {
	width:440px;
	height:90px;
	background-color:#f7f7f7;
	box-shadow:0 -2px 3px #ccc;
}

.shubetsubtn-active {
	width:440px;
	height:90px;
	background-color:#f2f2f2;
	box-shadow:0 -2px 3px #ccc;
}

.kaisaijikikbtn {
	width:180px;
}

.dataloading {
	color:#999;
}

.fail {
	color:#f22;
}

.helpicon {
	color:#06a;
	cursor:pointer;
}

.helpcmt {
	position:absolute;
	bottom:-20%;
	left: calc(100% + 5px);
	white-space:nowrap;
	background-color:#ffc;
	padding:5px;
	border:1px solid #fa7;
	color:#333;
	font-size:0.9rem;
	font-weight:normal;
	opacity:0;
	z-index:-1;
	transition: all 0.3s;
}

.helpicon:hover + .helpcmt {
	opacity:1;
	z-index:1;
}

.otherkoumokubtn {
	font-size:1.05em;
}

.otherkoumokubtn i {
	transition: transform 0.3s ease;
}

.bunyabtn ,.taishoshabtn ,.chikibtn ,.kaisaijikibtn ,.kikanbtn ,.hiyoubtn {
	min-width:100px;
}

.bunyadown {
	margin-top:-9px;
}

.bunyadownsp {
	margin-top:-9px;
}

.seldata {
	padding-bottom:3px;
	border-bottom:2px dooted #aaa;
}


h3 {
	font-size:1.3em;
	font-weight:bold;
	padding-bottom:0.2em;
	border-bottom:1px solid #ccc;
	margin-bottom:0.3em;
}

.scwaku {
	border:1px solid #ccc;
	padding:10px;
	border-radius:10px;
}



/* 講座一覧 */
.kouzakensutop {
	position:sticky;
	top:60px;
	left:0;
	width:100%;
	background-color:#fff;
	border-bottom:1px solid #ddd;
	z-index:1;
}

.kouzawaku {
	position:relative;
	display:block;
	margin:0.8em 0.5em;
	padding:1em;
	background-color:#f6f6f6;
	color:#222;
	border-radius:0.3em;
	transition: all 0.3s;
}

.kouzawaku:hover {
	text-decoration:none;
	color:#000;
	background-color:#f0f0f0;
	box-shadow:0 0 6px #bbb;
}

.kouzawaku .kubuntitle {
	display:inline-block;
	padding:0.15em 1em 0.2em 1em;
	font-size:0.9em;
	color:#fff;
	background-color:#008;
	border-radius:0.8em;
}

.kouzawaku .chikititle {
	display:inline-block;
	padding:0.15em 1em 0.2em 1em;
	font-size:0.9em;
	color:#000;
	background-color:#ccc;
	border-radius:0.8em;
}

.kouzawaku .houjinname {
	position:absolute;
	top:1em;
	right:1em;
	padding:0 0.4em 0.1em 0.4em;
	background-color:#e3e3e3;
	font-size:0.9em;
	border-radius:0.3em;
}

.kouzawaku .boshutitle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#444;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzawaku .kaisaititle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#484;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzawaku .bashotitle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#37d;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzawaku .hiyoutitle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#d72;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzawaku .teiintitle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#a5a;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzawaku .endtitle {
	display:inline-block;
	text-align:center;
	padding:0.4em 1.4em 0.3em 1.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#f33;
	color:#fff;
	border-radius:1em;
}

.kouzawaku .kline {
	border-top:3px dotted #ccc;
}

.kouzawaku .kouzatitle {
	font-size:1.1em;
	font-weight:bold;
}


.kouzatopics {
	position:relative;
	display:block;
	margin:0.8em 0.5em;
	padding:1em;
	background-color:#f6f6f6;
	color:#222;
	border-radius:0.3em;
	transition: all 0.3s;
}

.kouzatopics:hover {
	text-decoration:none;
	color:#000;
	background-color:#f0f0f0;
	box-shadow:0 0 6px #bbb;
}

.kouzatopics .kubuntitle {
	display:inline-block;
	padding:0.15em 1em 0.2em 1em;
	font-size:0.9em;
	color:#fff;
	background-color:#008;
	border-radius:0.8em;
}

.kouzatopics .chikititle {
	display:inline-block;
	padding:0.15em 1em 0.2em 1em;
	font-size:0.9em;
	color:#000;
	background-color:#ccc;
	border-radius:0.8em;
}

.kouzatopics .houjinname {
	position:absolute;
	top:1em;
	right:1em;
	padding:0 0.4em 0.1em 0.4em;
	background-color:#e3e3e3;
	font-size:0.9em;
	border-radius:0.3em;
}

.kouzatopics .boshutitle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#444;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzatopics .kaisaititle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#484;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzatopics .bashotitle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#37d;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzatopics .hiyoutitle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#d72;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzatopics .teiintitle {
	display:block;
	width:5em;
	text-align:center;
	padding:0 0.4em 0.1em 0.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#a5a;
	font-size:0.85em;
	color:#fff;
	border-radius:0.2em;
}

.kouzatopics .endtitle {
	display:inline-block;
	text-align:center;
	padding:0.4em 1.4em 0.3em 1.4em;
	margin-top:0.1em;
	margin-right:0.3em;
	background-color:#f33;
	color:#fff;
	border-radius:1em;
}

.kouzatopics .kline {
	border-top:3px dotted #ccc;
}

.kouzatopics .kouzatitle {
	font-size:1.1em;
	font-weight:bold;
}


.footerbtn {
	width:200px;
	height:auto;
	aspect-ratio: 5 / 3;
	padding:20px;
}

.junbi {
	position:absolute;
	top:-0.5em;
	right:-0.5em;
	padding:0.2em 0.8em;
	color:#fff;
	font-size:0.8em;
	background-color:#f22;
	border-radius:0.8em;
}


/* --- パソコン ---------------------------------------------------------------------- */
@media screen and (min-width: 576px) {
	
}

/* --- スマホ ------------------------------------------------------------------------ */
@media screen and (max-width: 575px) {
	
	.top-icatch {
		max-height:600px;
		min-height:600px;
		height:600px;
	}
	
	.slickslide {
		height:600px;
	}
	
	.slickslide li img {
		height:600px;
		object-fit:cover;
	}
	
	.toptitle {
		position:absolute;
		top:100px;
		left:0;
		margin-left:0;
		width:100%;
		text-align:center;
	}
	
	.toptitle2 {
		position:absolute;
		top:120px;
		left:0;
		margin-left:0;
		width:100%;
		text-align:center;
	}
	
	.toptitle3 {
		position:absolute;
		top:100px;
		left:0;
		margin-left:0;
		width:100%;
		text-align:center;
	}
	
	.top-cmt {
		bottom:30px;
		left:0;
		width:100%;
		margin-left:0;
		padding:5px;
		font-size:0.9em;
		letter-spacing:0.1em;
		line-height:1.4;
		background-color:rgba(0,0,0,0.4);
	}
	
	.top-cmt2 {
		width:100%;
		padding:5px 10px;
		color:#fff;
		font-size:0.85em;
		text-shadow:0 0 12px #222;
		font-weight:500;
		letter-spacing:0.1em;
		line-height:1.4;
	}
	
	.topbtn {
		width:35vw;
		height:3.5em;
	}
	
	.shubetsutop {
		top:50px;
	}
	
	.shubetsubtn {
		width:220px;
	}
	
	.shubetsubtn:hover {
		width:240px;
	}
	
	.shubetsubtn-active {
		width:240px;
	}
	
	.kouzakensutop {
		top:50px;
	}
	
	.helpcmt {
		left: -10em;
		bottom:100%;
		width: calc(100vw - 2em);
		white-space:wrap;
	}
	
	.kouzawaku .houjinname {
		display:inline-block;
		position:relative;
		top:0;
		right:0;
	}
	
	.footerbtn {
		width: calc(50vw - 20px);
		height:auto;
		aspect-ratio: 5 / 3;
		padding:30px 0;
		font-size:0.9em;
	}
	
	
}