@charset "utf-8";

/*----------------------------------------------------------------
 /about/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/* about
----------------------------------------------------------------*/
#about p{ margin: 0 0 calc(var(--line-height) * 1em); }

/*-----------------------------------------------------
 row
-----------------------------------------------------*/
#about .row{ margin: 0 0 60px 0; }
@media screen and (min-width: 769px) {
#about .row{
	margin				: 0 0 70px 0;
	flex-wrap			: wrap;
	align-items			: flex-start;
}
#about .row-reverse{ flex-direction: row-reverse; }

#about .row>.col:nth-child(odd),
#about .row.row-reverse>.col:nth-child(even)	{ flex: 0 1 43.8%; }
#about .row>.col:nth-child(even),
#about .row.row-reverse>.col:nth-child(odd)		{ flex: 0 1 56.2%; }
}

/*-----------------------------------------------------
 note
-----------------------------------------------------*/
#about .note{
	border-radius		: 25px;
	padding				: 30px 20px 1px 20px;
	background			: var(--invert-text-color);
}
#about .note h2{
	margin				: 0 0 30px 0;
	text-align			: center;
	font-size			: 2.2rem;
	font-weight			: 700;
	line-height			: 1.2;
	color				: var(--heading-color);
}
#about .note h3{
	margin				: 10px 0;
	font-size			: 2rem;
	font-weight			: 700;
	line-height			: 1.2;
}
@media screen and (min-width: 769px) {
#about .note{
	border-radius		: 50px;
	padding				: 40px 70px;
}
#about .note h2{
	margin				: 15px 0 50px 0;
	font-size			: 3rem;
}
#about .note h3{ font-size: 2.4rem; }
}



/* about
----------------------------------------------------------------*/
#case{ background: var(--invert-text-color); }

#case figcaption{
	margin				: 20px 0;
	text-align			: center;
	font-size			: 2.2rem;
	font-weight			: 700;
	color				: var(--heading-color);
}
@media screen and (min-width: 769px) {
#case figcaption{ font-size: 2.4rem; }
}

/*-----------------------------------------------------
 row
-----------------------------------------------------*/
#case .row>.col{
	margin				: 0 0 60px 0;
	font-size			: 1.2rem;
	line-height			: 1.714;
}
@media screen and (min-width: 769px) {
#case .row{ margin: 70px 0 0 0; }
#case .row>.col{
	flex				: 0 0 30%;
	font-size			: 1.4rem;
}
}