@charset "UTF-8";

/*--------------------------------------------------------------------
about.html
example.html
works.css
--------------------------------------------------------------------*/


/*------------about---------------------------------------------------------------*/
/*#about #photo {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 20px;
}
#about #photo li { width: calc((100% - 20px) / 2); }
#about #photo li:first-of-type { width: 100%; }*/
#about .grBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
	margin-bottom: 20px;
}
#about .grBox img { height: 100%; }
#about .gr01 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
}
#about .gr02 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
#about .gr03 {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}

#about #list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
}
#about #list li {
	width: calc((100% - 2em) / 3);
	padding-left: 1em;
}
#about #list li::before {
	margin-right: 0.5em;
	content: "・";
}

@media (max-width: 960px) {
}
@media (max-width: 550px) {
	#about .grBox {
		display: flex;
		flex-direction: column;
	}
/*	#about #photo { flex-direction: column; }
	#about #photo li { width: 100%; }*/
	#about #list { flex-direction: column; }
	#about #list li { width: 100%; }
}


/*------------example---------------------------------------------------------------*/
#example ul {
	display: flex;
	flex-wrap: wrap;
	gap: 65px 40px;
}
#example ul li { width: calc((100% - 40px) / 2); }
#example ul li p + p { text-align: center; }
#example table tr th,
#example table tr td {
	width: auto;
	padding: 10px;
	border-right: 1px solid var(--co-gray30);
	white-space: normal;
	vertical-align: middle;
}
#example table tr:first-of-type th {
	background-color: var(--co-navy);
	text-align: center;
	font-weight: bold;
	color: var(--co-white);
}
#example table tr:first-of-type th:last-of-type,
#example table tr td:last-of-type { border-right: 0 none; }
#example table tr:not(:first-of-type) th { width: 28%; }
#example table tr td { text-align: center; }
#example table tr td:first-of-type { text-align: left; }

@media (max-width: 650px) {
	#example ul {
		flex-direction: column;
		gap: 30px;
	}
	#example ul li {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 480px) {
	#example table tr th,
	#example table tr td {
		width: auto;
		padding: 20px;
		border-top: 1px solid var(--co-gray30);
		border-bottom: 1px solid var(--co-gray30);
		text-align: left;
		vertical-align: middle;
		white-space: nowrap;
	}
	#example table tr th {
		width: 30%;
		background-color: var(--co-gray10);
		border: 1px solid var(--co-gray30);
		border-left: 0 none;
	}
	#example table tr td {
		width: 100%;
	}
}