@charset "utf-8";

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

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

#mainview .mv-text{
	position			: relative;
	z-index				: 2;
}
@media screen and (max-width: 768px) {
#mainview .mv-text{
	margin				: 0 0 1em 0;
	padding				: 0 var(--item-padding);
}
}
@media screen and (min-width: 769px) {
#mainview{
	margin: 0 0 80px 0;
	display: flex;
	flex-direction: column-reverse;
}
#mainview .mv-text{
	padding				: 0 var(--item-padding);
	margin: -11% 0 0 0;
}
}

/* mv-image
-----------------------------------------------------*/
#mainview .mv-image{
	position			: relative;
	z-index: 1;
}
#mainview .mv-image img{
	border-radius		: var(--border-radius);
	object-fit			: cover;
	object-position		: center center;
}
@media screen and (max-width: 768px) {
#mainview .mv-image{
	margin				: 0 auto;
	width				: 90%;
}
#mainview .mv-image img{
	width				: 100%;
	aspect-ratio		: 56 / 40;
}
}
 @media screen and (min-width: 769px) {
 #mainview .mv-image img{
	width				: 100%;
	aspect-ratio		: 106 / 40;
 }
 }

/* @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;
}

/*-----------------------------------------------------
 about
-----------------------------------------------------*/


/* topics-list
-----------------------------------------------------*/
#about{
	margin: 0 auto;
	max-width			: 770px;
	display: flex;
	flex-direction: column;
	gap: 15px 0;
	padding				: calc(var(--item-padding) * 0.5);
}
@media screen and (min-width: 769px) {
#about{
	gap: 30px 0;
}
}