@charset "utf-8";

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

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


/* card-list
-----------------------------------------------------*/
.card-list ol{
	display				: flex;
	flex-direction		: row;
	justify-content		: center;
}
.card-list li{ list-style: none; }
.card-list li:not(:last-child){ margin: 0 30px 0 0; }
.card-list li>a{
	display				: block;
	height				: 280px;
	max-width			: 240px;
	background			: #FFF;
	text-decoration		: none;
	color				: var(--text-color);
	opacity				: 1;
}
.card-list li>a:hover{ opacity: 0.8; }
.card-list li dl{ padding: 15px; }
.card-list li dl dt{ margin: 0 0 15px 0; }
.card-list li time{
	display				: block;
	margin				: 0 0 10px 0;
	font-size			: 1.2rem;
}
.card-list li strong{
	display				: block;
	line-height			: 1.3;
	font-size			: 1.6rem;
}

@media screen and (max-width: 768px) {
.card-list{
	position			: relative;
	margin				: 0 calc(50% - 50vw);
	width				: 100vw;
}
.card-list ol{
	overflow-x			: auto;
	overflow-y			: hidden;
	-webkit-overflow-scrolling	: touch;
	overflow-scrolling			: touch;
	padding				: 0 calc(2.5vw + var(--content-padding));
	justify-content		: flex-start;
}
.card-list li>a{ width: 240px; }
}

/* more */
.card-list .more{
	margin				: 20px 0;
	text-align			: right;
	padding				: 0 5vw 30px 5vw;
}
@media screen and (min-width: 769px) {
.card-list .more{
	padding				: 20px 0 10px 0;
	text-align			: center;
}
}

/* btn */
.card-list .btn{
	background			: #FFF!important;
	color				: var(--main-color)!important;
}
.card-list .btn:hover{
	border-color		: #FFF!important;
	background: transparent!important;
	color				: #FFF!important;
}

.voice{
	margin: 50px 0;
}
.voice h3:not(class){
	color: #FFF!important;
	text-align: center;
	font-size: 2.2rem;
}

/*-----------------------------------------------------
 section:news
-----------------------------------------------------*/
#news{ color: #FFF; }

/* news-list
-----------------------------------------------------*/
#news .news-list{ padding: 0 var(--content-padding); }

#news .news-list a{ text-decoration: none; }
#news .news-list a::after{ content: url(../images/arrow-w.svg); }

#news .news-list ol:not([class]){ border-bottom: 1px solid #FFF; }
#news .news-list li{
	border-top			: 1px solid #FFF;
	list-style			: none;
}
#news .news-list li a{
	position			: relative;
	display				: block;
	padding				: 10px 0;
}
#news .news-list li a:hover{
	background			: rgba(255,255,255,0.5);
	color				: #FFF;
}
#news .news-list li a::after{
	position			: absolute;
	top					: 7px;
	right				: 0;
}
#news .news-list li a>dl{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
#news .news-list li a>dl>dt{ flex: 0 0 7em; }
#news .news-list li a>dl>dd{ padding: 0 3em 0 0; }

/* more
---------------------------------*/
#news .news-list .more{
	padding				: 10px 0 30px 0;
	text-align			: right;
}
#news .news-list .more a{
	font-weight			: bold;
	font-size			: 1.2rem;
}
#news .news-list .more a:hover{ color: #FFF; }
#news .news-list .more a::after{
	position			: relative;
	left				: 0;
	display				: inline-block;
	margin				: 0 0 0 10px;
	transition			: all .2s ease-out;
}
#news .news-list .more a:hover::after{ left: 10px; }

@media screen and (min-width: 769px) {
#news .news-list .more{ padding: 20px 0 30px 0; }
}


/*-----------------------------------------------------
 content
-----------------------------------------------------*/
#content{
	padding				: var(--content-padding);
	background			: #FFF;
	color				: var(--text-color);
}
@media screen and (min-width: 769px) {
#content{
	--content-padding	: 60px;
	padding				: calc(var(--content-padding) / 2) var(--content-padding);
}
}

/* header
-----------------------------------------------------*/
#content>header{ position: relative; }
#content>header h1{
	font-size			: 2rem;
	font-weight			: bold;
	line-height			: 1.4;
	color				: var(--heading-color);
}
@media screen and (min-width: 769px) {
#content>header h1{
	margin				: 10px 0;
	font-size			: 3rem;
}
}

/* meta
---------------------------------*/
#content>header .meta{ margin: 15px 0; }
#content>header .meta li{ list-style: none; }


/* footer
-----------------------------------------------------*/
#content>footer{ position: relative; }
#content>footer>nav{
	margin				: 0 0 20px 0;
	text-align			: center;
}
#content>footer>nav a{
	display				: inline-block;
	text-decoration		: none;
	font-weight			: bold;
	font-size			: 1.2rem;
	color				: var(--main-color);
}
#content>footer>nav a::before{
	content				: url(../images/arrow-b.svg);
	display				: inline-block;
	margin				: 0 10px;
	position			: relative;
	right				: 0;
	transition			: all .2s ease-out;
	transform			: scale(-1, 1);
}
#content>footer>nav a:hover::before{ right: 10px; }
@media screen and (min-width: 769px) {
#content>footer>nav{ margin: -15px 0 25px 0; }
}

/*-----------------------------------------------------
 main
-----------------------------------------------------*/
#main{}


/* row
-----------------------------------------------------*/
#main .row{
	flex-wrap			: wrap;
	justify-content		: space-between;
	margin				: var(--content-padding) 0;
}
#main .row:first-of-type{ margin: 0 0 var(--content-padding)  0; }
#main .row>.col{ margin: 0 0 var(--content-padding)  0; }

@media screen and (min-width: 769px) {
#main .row{ margin: var(--content-padding) 0; }
#main .row>.col{
	margin				: 0;
	flex				: 0 0 45%;
}
}


/* heading
-----------------------------------------------------*/
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6{
	margin				: var(--content-padding)  0 0 0;
	font-weight			: bold;
}
@media screen and (max-width: 768px) {
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6{
	margin				: calc(var(--content-padding) * 2)  0 0 0;
	font-size			: 1.5rem;
}
}

/* list
-----------------------------------------------------*/
#main ul,
#main ol,
#main dl{ margin: 10px 0; }
#main ul li,
#main ol li{
	margin				: 5px 0 5px 20px;
	line-height			: 1.5;
}

#main ul li{ list-style: disc outside; }
#main ol li{ list-style: decimal outside; }

#main dl dt{
	font-weight			: bold;
}

/* table
-----------------------------------------------------*/
#main table{ }

#main table th,
#main table td{
	border				: 1px solid var(--main-color);
	padding				: 5px 10px;
}
#main table th{
	background			: var(--main-color);
	color				: #FFF;
}

/* block elements
-----------------------------------------------------*/
#main p,
#main pre{
	margin				: 0 0 1em 0;
	line-height			: 2;
}

#main blockquote{
	position			: relative;
	margin				: calc(var(--content-padding) * 2)  0;
	padding				: calc(var(--content-padding) * 2) calc(var(--content-padding) * 2) calc(calc(var(--content-padding) * 2) - 1em) calc(var(--content-padding) * 2);
	background			: #eeeeee;
}
#main blockquote[cite]::after {
	display				: block;
	padding				: 5px 10px;
	content				: "引用元: "attr(cite);
	color				: var(--main-color);
	text-align			: right;
	font-size			: 1.2rem;
}

@media screen and (min-width: 769px) {
#main blockquote{
	margin				: var(--content-padding)  0;
	padding				: calc(var(--content-padding) / 2) var(--content-padding) calc(calc(var(--content-padding) / 2) - 1em) var(--content-padding);
}
}