@charset "utf-8";

/*----------------------------------------------------------------
 /category/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 background skew
-----------------------------------------------------*/
#outline{
	padding: 50px 0 20px 0;
	z-index				: 7;
}
#wrap,#outline,#outline:after			{ background: var(--bg-color); }
@media screen and (min-width: 768px) {
#outline{
	padding: 100px 0 20px 0;
}
}
#case{
	z-index				: 6;
}
#case,#case:after			{ background: var(--sub-color); }

#overview{
	padding				: 150px 0 50px 0;
	z-index				: 5;
}
#overview,#overview:after			{ background: var(--bg-color); }

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/*-----------------------------------------------------
 header
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
#header .theme img{ max-width: 690px; }
}

/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
#contents h2{
	margin				: 0 0 30px 0;
	line-height			: 1.4;
}
#contents h3{
	margin				: 3em 0 -30px 0;
	border-top			: 2px solid var(--text-color);
	padding				: 2.5em 0;
	text-align			: center;
	font-weight			: bold;
	font-size			: 1.5rem;
}
#contents h4{
	margin				: 30px 0 0 0;
	font-weight			: bold;
	font-size			: 1.4rem;
	color				: var(--main-color);
}
@media screen and (min-width: 768px) {
#contents h2{ margin: 0 0 50px 0; }
#contents h3{ font-size: 2rem; }
#contents h4{ font-size: 2rem; }
#contents .container>p{ font-size: 115%; }
}

/* outline-list
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
#contents .outline-list dl>dt{ flex: 0 0 120px; }
}


/* outline-list
-----------------------------------------------------*/

#contents .text{ margin: 0 0 20px 0; }
#contents .text small{ font-size: 1.2rem; }


/* outline-list
-----------------------------------------------------*/
#contents .copy{ line-height: 2; }

/* case-list
-----------------------------------------------------*/
@media screen and (max-width: 767px) {
#contents .case-list>ul>li{ flex: 0 0 100%; }
}


/* required
-----------------------------------------------------*/
.required { color: rgb(255, 255, 0); }