@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1000px) {}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}

/*-----------------------------------------------------------------------------------------
00000 ----------
10001 INITIAL
10002 area-hero
10003 area-banner
10004 area-feat
10005 area-message
10006 area-vision
10007 area-news
10008 area-program



----------------------------------------------------------------------------------------- */


/*-----------------------------------------------------------------------------------------
10001 INITIAL
----------------------------------------------------------------------------------------- */
.home main {
	/* border:10px solid red !important; */
	padding-top: 100vh;
	position: relative;
	z-index: 2;
}

.home footer {
	position: relative;
	z-index: 2;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1000px) {}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}









/*-----------------------------------------------------------------------------------------
10002 area-hero
----------------------------------------------------------------------------------------- */
.area-hero {
	display: none;
}

.home .area-hero {
	display: block;
}

.area-hero {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url('../img/common/hero.jpg');
	background-position: center center;
	background-size:cover;
	padding: 0;
	margin: 0;
}

.area-hero.delete {
	background-image:none;
	background-color:var(--color-dark)

}





.area-hero .waku {
	border: 0pt solid green;
	width: 100%;
	height: 100%;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	;
}

dl.catchcopy {
	width: 40%;
	border: 0pt solid blue;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	transform: translate(8vw, 4.5vh);
}

dl.catchcopy dt,
dl.catchcopy dd {
	border: 0pt solid pink;
	padding: 0;
	margin: 0;
}

dl.catchcopy dt {
	width: 30%;
}

dl.catchcopy dd {
	width: 70%;
	font-family: var(--font-Poppins);
	color: var(--color-lite);
}

dl.catchcopy b,
dl.catchcopy span,
dl.catchcopy small {
	display: block;
	line-height: 1.1;
	padding: 0;
	margin: 0;
	width: 100%;
	border: 0pt solid red;
}

dl.catchcopy span {
	font-size: calc(1.7vw * 7);
	font-weight: 600;
	line-height: 0.8;
}

dl.catchcopy b {
	font-size: 1.7vw;
	font-weight: 600;
	margin: 0.25em 0 0 0.3em;
}

dl.catchcopy small {
	font-size: calc(1.7vw * 0.75);
	font-weight: 300;
	margin: 0.5em 0 0 0.4em;
}

dl.catchcopy figure img {
	width: 100%;
	height: auto;
	padding: 0.5vw;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1000px) {
	dl.catchcopy {
		width: 80%;
		border: 0pt solid blue;
		transform: translate(0, 4.5vh);
		margin-left: auto;
		margin-right: auto;
	}

	dl.catchcopy span {
		font-size: calc(1.7vw * 7 * 2);
	}

	dl.catchcopy b {
		font-size: calc(1.7vw * 2);
	}

	dl.catchcopy small {
		font-size: calc(1.7vw * 0.75 * 1.9);
	}
}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {
	dl.catchcopy {
		width: 90%;
	}

	dl.catchcopy dt {
		width: 25%;
	}

	dl.catchcopy dd {
		width: 75%;
	}

	dl.catchcopy span {
		font-size: calc(1.7vw * 7 * 2.5);
	}

	dl.catchcopy b {
		font-size: calc(1.7vw * 2.5);
	}

	dl.catchcopy small {
		font-size: calc(1.7vw * 0.75 * 2.3);
	}
}

@media screen and (max-width: 400px) {}









/*-----------------------------------------------------------------------------------------
10003 area-banner
----------------------------------------------------------------------------------------- */
.area-banner {
	padding: 6.0rem 0;
}


.area-banner .title {
	border: 0pt solid red;
	position: absolute;
	bottom: calc(100% + 6.0rem);
	right: 0;
	background: var(--color-lite);
	font-family: var(--font-Poppins);
	font-size: clamp(2.5rem, 5.0vw, 5.0rem);
	font-size: clamp(20px, 5.0vw, 50px);
	padding: 0.15em 0.75em;
	margin: 0;
	font-weight: 300;
}


.area-banner .btn-more a {
	background:#B60202;
	background:var(--color-red);

}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1000px) {
	.area-banner {
		padding: 3.0rem 0;
	}

	.area-banner .title {
	bottom: calc(100% + 3.0rem);
}
}
@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}









/*-----------------------------------------------------------------------------------------
10004 area-feat
----------------------------------------------------------------------------------------- */
.area-feat {
	padding: 12.0rem 0;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1000px) {
	.area-feat {
		padding: 3.0rem 0;
	}
	.area-feat .col-06 {
		width:100%;
	}
}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}









/*-----------------------------------------------------------------------------------------
10005 area-message
----------------------------------------------------------------------------------------- */
.area-message {
	padding: 12.0rem 0;
}

.area-message p {
	margin:0 0 0.75em 0
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1000px) {
	.area-message {
		padding: 3.0rem 0;
	}
}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}









/*-----------------------------------------------------------------------------------------
10006 area-vision
----------------------------------------------------------------------------------------- */
.area-vision {
	padding: 0 0 6.0rem 0;
	background: linear-gradient(90deg, var(--color-lite) 0%, var(--color-lite) 50%, var(--color-font) 50%, var(--color-font) 100%);
}

.area-vision .waku {
	border: 0pt solid red;
	width: 100%;
	height: 100%;
	padding: 1vw;
	margin: 0;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.area-vision .waku blockquote {
	border: 0pt solid green;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	display: block;
}

.area-vision h4.default {
	margin-bottom: 0.25em;
}

.area-vision p {
	margin-top: -0.3em;
}

.area-vision .item-one {
	order: 1;
}

.area-vision .item-two {
	order: 2;
}

.area-vision.head {
	border:0pt solid red;
	padding:0 0 3.0rem;
}

.area-vision.head h2.default {
margin-bottom:0;
}



@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1000px) {
	.area-vision {
		padding: 3.0rem 0;
		background:var(--color-lite);
	}

	.area-vision .col-06 {
		width:100%;
	}

	.area-vision .waku blockquote {
		padding:3vw;
	}

	.area-vision .item-one {
		order: 2;
		border:5px solid var(--color-dark);

	}

	.area-vision .item-two {
		order: 1;
		background:var(--color-dark);
		border:5px solid var(--color-dark);
	}

	.area-vision.head {
		padding-bottom:0;
	}




}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}









/*-----------------------------------------------------------------------------------------
10007 area-news
----------------------------------------------------------------------------------------- */
.area-news {
	padding: 12.0rem 0;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1000px) {
	.area-news {
		padding: 3.0rem 0;
	}
}

@media screen and (max-width: 840px) {
	.area-news .col-04,
	.area-news .col-08{
		width:100%;
	}
}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}









/*-----------------------------------------------------------------------------------------
10008 area-program
----------------------------------------------------------------------------------------- */
.area-program {
	padding: 12.0rem 0;
}

.area-program p {
	color: var(--color-lite);
	line-height: 1.4;
	margin: 1em 0;
}

a.card {
	border: 0pt solid red;
	width: 100%;
	dipslay: block;
	padding: 0;
	margin: 0 0 3.0rem 0
}


@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1000px) {
	.area-program {
		padding: 3.0rem 0;
	}

	.area-program .col-06 {
		width:100%;
	}
}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}

















/*-----------------------------------------------------------------------------------------
10008 area-sponsor
----------------------------------------------------------------------------------------- */
.area-sponsor {
	border:0pt solid red;
	padding: 0;
	background:var(--color-lite);
}

.area-sponsor .container {
	border-top:1px solid var(--color-dark);
}