@charset "UTF-8";
/*
DECCI高等学院
*/

/*
1. Initialize
2. Class
3. Layout
*/

/*************************************************************************

1. Initialize

**************************************************************************/

*,
*::before,
*::after {
	box-sizing: border-box;
}
body,
hgroup, h1, h2, h3, h4, h5, h6,
div, p, dl, dt, dd, ul, ol, li, img, caption,
fieldset, form, input, select, label, blockquote,
header, footer, section, nav, article, aside, figure {
	margin: 0;
	padding: 0;
}
hgroup,header,footer,section,nav,article,aside,figure {
	display: block;
}
body {
	background-color: #fff;
	width: 100%;
	font-size: 16px;
	line-height: 1.5;
}
div,p,pre,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}
img {
	display: block;
	border: none;
}
ul, ol{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul li, ol li {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse!important;
}
hr {
	border: none;
	border-top: 1px solid #000;
	margin: 30px 0;
}
blockquote {}

a {text-decoration: underline;}
a:link    {color: #000;}
a:active  {color: #000;}
a:visited {color: #000;}
a:hover   {color: #000; text-decoration: none;}

a:hover:not(.no-alpha) {
	opacity: 0.6;
	transition: all 0.5s 0s ease;
}
a:hover:not(.no-alpha) img {
	opacity: 0.6;
}

:root {
	--color-grey: #c9c9ca;
	--color-darkgrey: #717070;
}



/*************************************************************************

2. Class

**************************************************************************/

/* 表示切替 */
.pc-only { display: block !important; }
.sp-only { display: none !important; }

@media screen and (max-width:750px) {
	.pc-only { display: none !important; }
	.sp-only { display: block !important; }
}



/*************************************************************************

3. Layout

**************************************************************************/

/* コンテナ */
#containar {
	position: relative;
	width: 100%;
	overflow: hidden;
}


/* ヘッダー */
#header {
	position: fixed;
	top: 0;
	left: 90vw;
	width: 10vw;
	height: 100vh;
}
#header .recruit-text {
	width: 16%;
	max-width: 22px;
	min-width: 18px;
	margin: 80px auto 0;
}
#header .recruit-button {
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
}
#header .recruit-button a {
	box-sizing: border-box;
	display: block;
	background-color: var(--color-darkgrey);
	width: 50%;
	max-width: 68px;
	margin: 0 auto;
	padding: min(33%, 45px) min(15%, 24px);
	text-align: center;
}
#header .recruit-button a img {
	max-width: 21px;
	margin: 0 auto;
}

/* スマホ */
@media screen and (max-width:750px) {

	#header {
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		border-bottom: 1px solid #c6c6c6;
	}
	#header .recruit-text {
		width: 80%;
		max-width: none;
		min-width: auto;
		margin: 0 auto;
		padding: 6% 0;
	}
	#header .recruit-button {
		position: fixed;
		bottom: 20px;
		left: 0;
		width: 100%;
		z-index: 100;
		transition: 0.5s;
	}
	#header .recruit-button.hide {
		bottom: -70px;
	}
	#header .recruit-button a {
		width: 94%;
		max-width: none;
		padding: 25px 0;
	}
	#header .recruit-button a img {
		max-width: none;
		width: auto;
		height: 20px;
	}

}


/* キービジュアル */
#keyvisual {
	position: fixed;
	top: 0;
	left: 0;
	width: 62vw;
	height: 100vh;
}
#keyvisual h1 {
	position: absolute;
	width: 139px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#keyvisual .kv-bottom {
	box-sizing: border-box;
	position: absolute;
	left: 0;
	bottom: 35px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	padding: 0 8%;
}
#keyvisual .kv-bottom .kv-contact-tltle {
	width: 18%;
}
#keyvisual .kv-bottom .kv-contact-tel {
	width: 37%;
}
#keyvisual .kv-bottom .kv-contact-line {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 23%;
}
#keyvisual .kv-bottom .kv-contact-line .kv-contact-line-text {
	width: 35%;
}
#keyvisual .kv-bottom .kv-contact-line .kv-contact-line-qr {
	width: 50%;
}

/* スマホ */
@media screen and (max-width:750px) {

	#keyvisual {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 90vh;
	}
	#keyvisual h1 {
		width: 30%;
	}
	#keyvisual .kv-bottom {
		display: none;
	}

}


/* メインカラム */
#main-column {
	position: relative;
	left: 62vw;
	border-left: 1px solid var(--color-grey);
	border-right: 1px solid var(--color-grey);
	width: calc(28vw - 2px);
}

/* スマホ */
@media screen and (max-width:750px) {

	#main-column {
		left: auto;
		border: none;
		width: 100%;
	}

}


/* リード */
#main-column #lead {
	background-color: var(--color-darkgrey);
	padding: 36% 0 14%;
}
#main-column #lead > h2 {
	width: 56%;
	margin: 0 auto;
}
#main-column #lead > div {
	width: 42%;
	margin: 43% auto 0;
}

/* スマホ */
@media screen and (max-width:750px) {

}


/* アバウト */
#main-column #about {
	padding: 20% 6% 35%;
}
#main-column #about > h2 {
	width: 68%;
}
#main-column #about > div {
	margin: 26% auto 28%;
}

/* スマホ */
@media screen and (max-width:750px) {

}


/* 教育プログラム */
#main-column #program {
	background-color: var(--color-grey);
	padding: 20% 0;
}
#main-column #program > h2 {
	width: 43%;
	margin: 0 auto;
}
#main-column #program > figure {
	width: 53%;
	margin: 0 auto;
}
#main-column #program .program-image1 {
	margin-top: 12%;
}
#main-column #program .program-image1::after {
	content: "";
	display: block;
	background: url(../images/plus.svg) no-repeat center top;
	background-size: 100% auto;
	width: 19%;
	aspect-ratio: 1/1;
	margin: 10% auto;
}
#main-column #program .program-image2::after {
	content: "";
	display: block;
	background: url(../images/arrow-down.svg) no-repeat center top;
	background-size: 100% auto;
	width: 17%;
	aspect-ratio: 1 / 1.2463768115942029;
	margin: 10% auto 0;
}
#main-column #program > div {
	width: 65%;
	margin: 12% auto 0;
}

/* スマホ */
@media screen and (max-width:750px) {

}


/* ポイント */
#main-column #point {
	padding: 25% 0 27%;
}
#main-column #point > div {
	width: 81%;
	margin: 0 auto;
}

/* スマホ */
@media screen and (max-width:750px) {

}


/* 3年間学習スケジュール */
#main-column #schedule {
	border-top: 1px solid #c6c6c6;
	padding: 18% 0 20%;
}
#main-column #schedule > h2 {
	width: 84%;
	margin: 0 auto;
}
#main-column #schedule > h3 {
	width: 93%;
	margin-top: 12%;
}
#main-column #schedule > figure {
	width: 66%;
	margin: 9% 6% 0;
}

/* スマホ */
@media screen and (max-width:750px) {

}


/* D高生徒の強み */
#main-column #strength {
	background-color: var(--color-grey);
	padding: 24% 0 21%;
}
#main-column #strength > h2 {
	width: 68%;
	margin: 0 auto;
}
#main-column #strength > figure {
	width: 63%;
	margin: 0 auto;
}
#main-column #strength .strength-image1 {
	margin-top: 30%;
}
#main-column #strength .strength-image1::after,
#main-column #strength .strength-image2::after {
	content: "";
	display: block;
	background: url(../images/plus.svg) no-repeat center top;
	background-size: 100% auto;
	width: 14%;
	aspect-ratio: 1/1;
	margin: 8% auto;
}
#main-column #strength .strength-image3::after {
	content: "";
	display: block;
	background: url(../images/equal.svg) no-repeat center top;
	background-size: 100% auto;
	width: 7%;
	aspect-ratio: 1 / 2;
	margin: 8% auto;
}
#main-column #strength .strength-image4 {
	width: 86%;
	margin: 0 auto;
}
#main-column #strength > div {
	width: 77%;
	margin: 11% auto 0;
}

/* スマホ */
@media screen and (max-width:750px) {

}


/* フッター */
#main-column #footer {
	padding: 18% 0 6%;
}
#main-column #footer .footer-recruit-text {
	width: 47%;
	margin: 0 auto;
}
#main-column #footer .footer-recruit-button {
	width: 86%;
	margin: 4% auto 0;
}
#main-column #footer .footer-recruit-button a {
	display: block;
	background-color: var(--color-darkgrey);
	padding: 7% 0;
}
#main-column #footer .footer-recruit-button a img {
	width: 53%;
	margin: 0 auto;
}
#main-column #footer .footer-contact-tltle {
	width: 42%;
	margin: 25% auto 0;
}
#main-column #footer .footer-contact-tel {
	width: 73%;
	margin: 19% auto 0;
}
#main-column #footer .footer-contact-line {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 60%;
	margin: 25% auto 0;
}
#main-column #footer .footer-contact-line .footer-contact-line-text {
	width: 29%;
}
#main-column #footer .footer-contact-line .footer-contact-line-qr {
	width: 45%;
}
#main-column #footer .footer-logo {
	width: 38%;
	margin: 42% auto 0;
}
#main-column #footer .footer-address {
	width: 55%;
	margin: 12% auto 0;
}

/* スマホ */
@media screen and (max-width:750px) {

}