@charset "UTF-8";

#mv { background-image:url(./img/mv.jpg); }

h5 { margin-top:0; }
/* about */
.left, .right { width:460px; }
.about ul { padding:0; list-style:none; }
/* borderColor */
.left li::before, .right li,
.list .flexBox2 > li { border:5px solid #D0E6F0; }
.right .option,
.list .flexBox2 .option { border-color:#9FA9B1; border-style:dashed; }

/* left */
.left ul { margin:1.5em 0; }
.left li { position:relative; padding-left:3.5em; margin-bottom:1em; }
.left li::before {
	content:""; position:absolute; top:50%; left:0; transform:translate(0,-50%);
	width:3em; height:2em; background:#FFF; box-sizing:border-box;
}
/* right */
.right     { font-weight:bold; }
.right ul  { display:flex; flex-wrap:wrap; text-align:center; margin-bottom:0; }
.right li  { width:32%; padding:1em; margin:.5em 0 0 0; }
.right li:nth-child(-n + 2) { margin-top:0; width:49%; }
.right li:not(:first-child) { margin-left:2%; }
.right li:nth-child(3) { margin-left:0; }
.right h6  { text-align:center; }
.right img { width:230px; }
.right .option { color:#9FA9B1; }

/* list */
.list .flexBox2 { justify-content:flex-start; }
.list .flexBox2 > li    { width:32%; padding:1em; margin:2em 2% 0 0; }
.list .flexBox2 > li:nth-child(-n + 3) { margin-top:0; }
.list .flexBox2 > li:nth-child(3n) { margin-right:0; }
.list dl { margin:1em 0 0 0; }
.list dt { font-weight:bold; margin-bottom:.5em; }
.list .option *  { color:#9FA9B1; }
.list .option h5 { border-color:#9FA9B1; }

@media (max-width: 768px){
	.flexBox { flex-wrap:wrap; }
	.left, .right { width:100%; }
	.right { margin-top:1em; }
	.right li  { width:49%; }
	.right li:nth-child(n + 3) { margin-top:.5em; }
	.right li:nth-child(3n + 1) { margin-left:2%; }
	.right li:nth-child(odd) { margin-left:0; }

	.list .flexBox2 > li { width:100%; margin-right:0; }
	.list .flexBox2 > li:not(:first-child) { margin-top:2em; }
}