@charset "utf-8";

/*----------------------------------------------------------------
 TopPage only
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
.section{
	margin				: 50px 0;
}
#main{
	padding				: calc(var(--item-padding) * 1.5);
}
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/*-----------------------------------------------------
 mainview
-----------------------------------------------------*/

/* mv-text
-----------------------------------------------------*/

#mainview .mv-text{
	position			: relative;
	z-index				: 2;
}
@media screen and (max-width: 768px) {
#mainview .mv-text{
	margin				: 0 0 -0.25em 0;
	padding				: 0 var(--item-padding);
}
}
@media screen and (min-width: 769px) {
#mainview{
	margin: 0 0 80px 0;
}
#mainview .mv-text{
	position			: absolute;
	top					: 0;
	left				: 0;
}
}

/* mv-image
-----------------------------------------------------*/
#mainview .mv-image{
	position			: relative;
	z-index: 1;
}
@media screen and (max-width: 768px) {
#mainview .mv-image{
	margin				: 0 auto;
	width				: 80%;
}
#mainview .mv-image img{
	width				: 100%;
	aspect-ratio		: 5 / 7;
	object-fit			: cover;
	object-position		: left top;
	border-radius		: var(--border-radius);
}
}
@media screen and (min-width: 769px) {
#mainview .mv-image{
	left				: -60px;
	top					: 15px;
	width				: 38%;
	text-align			: left;
}
#mainview .mv-image img{ border-radius: 0 var(--border-radius) var(--border-radius) 0; }
}
@media screen and (min-width: 1150px) {
#mainview .mv-image{
	left				: -60px;
	top					: 8px;
	width				: 42.3423%;
}
}


/*-----------------------------------------------------
 news
-----------------------------------------------------*/
#news h2{
	margin				: 0 0 1em 0;
	text-align			: center;
	font-weight			: 700;
	font-size			: 137.5%;
	color				: var(--main-color);
}

/* topics-list
-----------------------------------------------------*/
#news .topics-list{
	margin				: 0 auto;
	max-width			: 770px;
	border-top			: 1px solid var(--main-color);
}
#news .topics-list li{ border-bottom: 1px solid var(--main-color); }
#news .topics-list li a{
	display				: flex;
	flex-direction		: column;
	padding				: 0.8em 0;
	font-size			: 87.5%;
	color				: var(--main-color);
}

@media screen and (min-width: 769px) {
#news .topics-list li a			{ flex-direction: row; }
#news .topics-list li a>time	{ flex: 0 0 7em; }
#news .topics-list li a>.title	{ flex: 1 1 auto; }
}

/* more
-----------------------------------------------------*/
#news .more{
	margin				: 2em 0;
	text-align			: center;
}

/*-----------------------------------------------------
 course
-----------------------------------------------------*/
#course{}

/* course-list
-----------------------------------------------------*/
#course .course-list li{ margin: 0 0 50px 0; }

/* course-item
-----------------------------------------------------*/
#course .course-item img{ border-radius: var(--border-radius); }
#course .course-item h2{
	font-style			: italic;
	margin				: 0 0 0.5em 0;
	line-height			: 1.2;
	font-size: 125%; 
}
#course .course-item h2 small{ font-size: 75%; }
#course .course-item .copy{
	margin				: 0 0 1em 0;
	line-height			: 1.2;
	font-size			: 125%;
	color				: var(--main-color);
}
@media screen and (max-width: 768px) {
#course .row.course-item{ flex-direction: column-reverse; }
#course .course-item h2{ margin: 0 0 0.5em 0; }
#course .course-item .copy{ font-size: 71.428571%; }
#course .course-item .link{
	margin-top			: -5px;
}
}
@media screen and (min-width: 769px) {
#course .row.course-item{
	--item-gap: 30px;
	align-items			: center;
}
#course .course-list li:nth-child(even) .row{ flex-direction: row-reverse; }
#course .course-item h2{ font-size: 175%; }
#course .course-item h2 small{ font-size: 35%; }
}
@media screen and (min-width: 1150px) {
#course .course-item h2{ font-size: 250%; }
#course .course-item .copy{ font-size: 156.25%; }
}

/* global-course
-----------------------------------------------------*/
#course .global-course{
	padding				: var(--item-padding);
	border-radius		: var(--border-radius);
	background			: var(--base-color);
}

@media screen and (min-width: 769px) {
#course .global-course .row{ flex-direction: row-reverse; }
}

/*-----------------------------------------------------
 aboutus
-----------------------------------------------------*/
#aboutus{ position: relative; }
#aboutus .row{
	margin: 0 0 20px 0;
}
#aboutus h2{
	font-family: var(--font-family-en);
	color: var(--main-color);
	line-height: 1;
	font-size: 36px;
}
#aboutus p{
	font-size: 90%;
}
#aboutus .image img{
	border-radius: var(--border-radius);
}

@media screen and (min-width: 769px) {
#aboutus .row{
	align-items: flex-end;
}
}
@media screen and (min-width: 769px) and (max-width: 1149px){
#aboutus .col{
	flex: 1 1 auto;
}
#aboutus nav .btn{
	width: 200px;
}
}
@media screen and (min-width: 1150px) {
#aboutus h2{
	font-size: 86px;
}
#aboutus nav .btn{
	width: 260px;
}
}