@charset "utf-8";

/*----------------------------------------------------------------
 TopPage only
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 mainview
-----------------------------------------------------*/
#mainview{
	padding				: var(--header-height) 0 40px 0;
	background			: var(--main-color);
}
@media screen and (min-width: 1200px) and (orientation: landscape){
#mainview .image{
	width: 100%;
	height: calc(100vh - var(--header-height));
	background: url(../images/main_visual-pc.jpg) center center /contain no-repeat;
}
#mainview .image img{
	display: none;
}
}

/* news-list
-----------------------------------------------------*/
#mainview .news-list{
	--content-padding: 0;

	display				: flex;
	padding				: 0 var(--content-padding);
	font-size			: 1.4rem;
	color				: var(--invert-text-color);
}
#mainview .news-list figcaption{ font-weight: 700; }
#mainview .news-list li{
	list-style			: none;
	display				: flex;
	flex-direction		: row;
}
#mainview .news-list li>time	{ padding: 0 1em 0 0; }
#mainview .news-list li a		{ text-decoration: underline; }

@media screen and (max-width: 768px) {
#mainview .news-list{ flex-direction: column; }
#mainview .news-list figcaption{
	margin				: 15px 0;
	text-align			: center;
}
#mainview .news-list ol{
	font-size			: 1.2rem;
	line-height			: 1.75;
}
}

@media screen and (min-width: 769px) {
#mainview .news-list{
	--content-padding: 50px;

	margin				: 20px 0 40px 0;
	flex-direction		: row;
}
#mainview .news-list figcaption	{ flex: 0 0 100px; }
#mainview .news-list li			{ margin: 0 0 5px 0; }
}
@media screen and (min-width: 1050px) {
#mainview .news-list{
	--content-padding: 100px;
}
}

/*-----------------------------------------------------
 outline
-----------------------------------------------------*/
#outline{ padding: 25px 0; }
@media screen and (min-width: 769px) {
#outline{ padding: 50px 0; }
}

/* about
-----------------------------------------------------*/
#outline .about .text p{
	margin				: 0 0 calc(var(--line-height) * 1em) 0;
	line-height			: var(--line-height);
}
@media screen and (max-width: 768px) {
#outline .about .image{
	margin				: 25px 0 35px 0;
	text-align			: center;
}
#outline .about .image img{ max-width: 60vw; }
}

@media screen and (min-width: 769px) {
#outline .about{
	margin				: 50px 0 20px 0;
	justify-content		: space-between;
}
#outline .about .image	{ flex: 0 0 33.5%; }

#outline .about .text	{ flex: 0 0 56.19047619%; }
}

/* more
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#outline .more		{ margin: 30px 0; }
#outline .more .btn	{ max-width: 400px; }
}

/* feature
-----------------------------------------------------*/
#outline .feature .col{ margin: 50px 0; }
#outline .feature h3{
	margin				: 15px 0;
	text-align			: center;
	font-weight			: 700;
	font-size			: 2rem;
	line-height			: 1.3;
	color				: var(--heading-color);
}
#outline .feature .text{ line-height: 1.7142857142; }

@media screen and (min-width: 769px) {
#outline .feature		{ justify-content: space-between; }
#outline .feature .col	{ flex: 0 0 calc(33% - 25px); }
#outline .feature h3{
	position			: relative;
	margin				: 20px 0;
	height				: 50px;
}
#outline .feature h3>span{
	display				: block;
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%);
	width				: 100%;
}
#outline .feature .text{ font-size: 1.4rem; }
}

/*-----------------------------------------------------
 about
-----------------------------------------------------*/
#about{
	padding				: 25px 0;
	background			: var(--main-color);
}
#about .content{
	border-radius		: 10px;
	padding				: 25px;
	background			: var(--base-color);
}
@media screen and (min-width: 769px) {
#about{ padding: 100px 0; }
#about .content{
	border-radius		: 50px;
	padding				: 40px 60px 60px 100px;
}
}

/* row
-----------------------------------------------------*/
#about .image{ margin: 30px 0; }
#about .text p{ margin: 0 0 calc(var(--line-height) * 1em) 0; }
@media screen and (max-width: 768px) {
#about .image		{ text-align: center;  }
#about .image img	{ max-width: 40vw; }
}
@media screen and (min-width: 769px) {
#about .image		{ flex: 0 0 40%; }
#about .image img	{ width: 70%; }
#about .text		{ margin: 40px 0 0 0; }
}

/* sign
-----------------------------------------------------*/
#about .sign{ margin: 0 0 50px 0!important; }
#about .sign ruby{
	position			: relative;
	display				: block;
	font-weight			: 500;
	font-size			: 2rem;
}
#about .sign ruby>rt{
	display				: inline-block;
	position			: absolute;
	left				: 0;
	bottom				: -1.9em;
	text-transform		: none;
	text-justify		: none;
	font-weight			: 400;
	font-style			: italic;
	font-size			: 1.2rem;
}
@media screen and (min-width: 769px) {
#about .sign ruby{ font-size: 2.4rem; }
}

/* more
-----------------------------------------------------*/
@media screen and (min-width: 769px) {
#about .more{ margin: 10px 0 0 0; }
}

/*-----------------------------------------------------
 navigation
-----------------------------------------------------*/
#navigation nav{ padding: 25px 0; }
#navigation ul{
	display				: flex;
	flex-direction		: row;
}

@media screen and (max-width: 768px) {
#navigation .container{
	overflow					: scroll;
	-webkit-overflow-scrolling	: touch;
	width						: 100vw;
}
#navigation ul			{ padding: 0 0 0 25px; }
#navigation ul li		{ flex: 0 0 187px; }
#navigation ul li img	{ height: 100px; }
}

@media screen and (min-width: 769px) {
#navigation nav		{ padding: 50px 0; }
#navigation ul		{ justify-content: space-between; }
#navigation ul li	{ flex: 0 0 calc(33% - 20px); }
}