/* CSS Document */

@charset "UTF-8";

@import url('/dist/css/style.css');

@import url('https://fonts.googleapis.com/css2?family=Galdeano&display=swap');

/*----------------------------------------------------------------------
全体
-----------------------------------------------------------------------*/
.flex {
	display: flex;
	justify-content: space-between;
}

@media screen and (min-width: 1100px) {
	.flex > div.left {
		width: calc(1100px - 616px);
		padding: 0px 50px;
	}
}

@media screen and (max-width: 736px) {
	.flex {
		flex-direction: column;
	}

	.flex > div {
		width: 92% !important;
		padding: 0% 4% !important;
	}

	article:not(#modelhouse) .flex > div.left {
		margin-bottom: 36px;
	}
}

/*----------------------------------------------------------------------
見出し
-----------------------------------------------------------------------*/
main article h2 {
	display: inline-block;
	border-bottom: none;
}

main article > iframe+h2 {
	margin-top: 0.5em;
}

main article h2 small {
	display:block;
	font-size: 0.75em;
	font-weight: 700;
}
main article:not(#news) h2 small {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
}

@media screen and (min-width: 1100px) {
	main article h2 {
		margin-left: 0;
	}
}

@media screen and (max-width: 736px) {
	main article h2 span, main article h2 small {
		margin-top: -0.625em;
		padding-left: 0;
	}
}

/*----------------------------------------------------------------------
リンク、ボタン
-----------------------------------------------------------------------*/
a.more {
	clear: none;
	display: grid;
	place-items: center;
	min-width: 286px;
	margin: 1.625em auto 0em;
	background-color: #FFF;
	border: 1px solid #231815;
	color: #231815 !important;
}

a.more:hover {
	background-color: #898983;
	border: 1px solid #BBB;
	color: #FFF !important;
}

/*----------------------------------------------------------------------
main-top
-----------------------------------------------------------------------*/
section#main-top {
	position: relative;
	width: 100vw;
	padding: 0;
}

#main-photo video {
	width: 100%;
	height: 720px;
	object-fit: cover;
}

section#main-top h1 {
	display: block;
	position: absolute;
	margin: 0;
	z-index: 1000;
}

section#main-top h1 img {
	width: 100%;
	height: auto;
}

section#main-top h1 {
	width: 480px;
	bottom: 13%;
	right: 21%;
}

@media screen and (max-width: 736px) {
	section#main-top {
		padding-top: 0 !important;
		max-height: calc(100vh - 17.6vw);
	}

	section#main-top h1 {
		bottom: 6%;
		right: 10%;
		width: 80vw;
		z-index: 4999;
	}
}

/*----------------------------------------------------------------------
article
-----------------------------------------------------------------------*/
main article {
	background-color: #F5F5F5;
}
main article:nth-of-type(odd) {
	background-color: #FFF;
}

@media screen and (max-width: 1100px) and (min-width: 736px) {
	p.tagline {
		padding: 0em 2.5em;
	}
}

@media screen and (max-width: 736px) {
	p.tagline {
		padding: 0em 1.25em;
	}
}

/*----------------------------------------------------------------------
News
-----------------------------------------------------------------------*/
#news {
	padding-top: 86px;
	background-color: #FFF;
}

ul.right {
	border-top: 1px solid#CCC;
}

ul.right li {
	padding: 1em 2.5em;
	border-bottom: 1px solid #CCC;
	font-size: 0.875em;
	font-weight: 400;
	overflow: hidden;
}

ul.right li span {
	display: inline-block;
	margin-left: 1.875em;
	font-size: 1.125em;
	font-weight: 400;
}

ul.right li span.button::before {
	display: inline-block;
	content: "\f0fe";
	margin-right: 0.625em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
ul.right li span.active::before {
	display: inline-block;
	content: "\f146";
	margin-right: 0.625em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
ul.right li span.button:hover {
	color: #EBBC78;
	text-decoration: underline;
	cursor: pointer;
}

ul.right li p {
	padding-top: 0.75em;
	font-size: 1em;
	font-weight: 300;
}

@media screen and (min-width: 1100px) {
	#news .flex > div.left {
		width: calc(1100px - 834px);
		padding: 0;
	}

	ul.right {
		width: 834px;
	}

	ul.right span {
		width: 86%;
	}
}

@media screen and (min-width: 736px) and (max-width: 1100px) {
	#news .flex > div.left {
		width: calc(1100px - 834px);
		padding: 0;
	}

	ul.right li {
		padding: 1em;
	}
}

@media screen and (max-width: 736px) {
	#news {
		padding-top: 65px;
	}

	article#news .flex div.left {
		margin-bottom: 0;
	}

	ul.right li {
		padding: 1em;
	}

	ul.right li span {
		display: block;
		margin: 0em 0em 0.25em 0.5em;
	}
}

/*----------------------------------------------------------------------
コース
-----------------------------------------------------------------------*/
@media screen and (max-width: 736px) {
	#course h2 {
		font-size: 1.125rem;
		line-height: 1.25em;
	}
}

/*----------------------------------------------------------------------
flex
-----------------------------------------------------------------------*/
.flex figure+figure {
	margin-top: 1.5em;
}

._02, ._03 {
	flex-wrap: wrap;
}

._02 figure {
	width: calc(100% / 2 - 18px);
}
._03 figure {
	width: calc(100% / 3 - 18px);
}

._02 figcaption, ._03 figcaption {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0.5em 1.25em 0em;
	font-size: 1.125em;
	font-weight: 700;
}

.flex figcaption span {
	display: flex;
	align-items: center;
	margin-left: 1.8125em;
	padding: 0em 0em 0.25em 2em;
	background-color: #C2C3C5;
	border-top: 3px solid #C2C3C5;
	font-size: 0.75em;
	font-weight: 400;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.flex figcaption span:after {
	content: "";
	flex-grow: 1;
	width: 1em;
	height: 1px;
	display: block;
	margin-left: 1.5em;
	background-color: #231815;
	transform: scaleX(300%);
}

@media screen and (min-width: 736px) {
	._02 figure:nth-of-type(2), ._03 figure:nth-of-type(2), ._03 figure:nth-of-type(3) {
		margin-top: 0;
	}
}

@media screen and (max-width: 736px) {
	._02, ._03 {
		flex-direction: column;
	}

	._02 figure, ._03 figure {
		width: 100%;
	}
}