@charset "UTF-8";

/* =======================================================
#contents
======================================================= */

#contents .merit {
	background: rgba(222,222,222,0.25);
	padding: 3rem 5%;
	text-align: center;
}

#contents .merit .maxwidth h2 {
	text-align: center;
	margin: 0 0 2rem;
	padding: 0;
	font-weight: 500;
	display: inline-block;
}

#contents .notes-in,
#contents .notes-ex {
	padding: 5%;
	text-align: center;
}

#contents .notes-ex:nth-of-type(odd) {
	background: #F2F5FC;
}

#contents .notes-ex p {
	font-size: 0.8125rem;
	line-height: 1.1825rem;
}

#contents .notes-ex .maxwidth {
	background: #FFFFFF;
	padding: min(4%, 2rem);
	margin: 3% auto;
	max-width: 1000px;
}

#contents .notes-ex:nth-of-type(even) .maxwidth {
	padding: 0 min(4%, 2rem);
}

#contents .notes-ex strong {
	background: #F4F4F4;
	text-align: left;
	display: flex;
	width: 17rem;
	padding: 0;
	text-align: center;
	font-size: 0.875rem;
	font-weight: normal;
	justify-content: center;
	box-sizing: border-box;
}

#contents .notes-ex figure {
	margin: 2rem 0;
}

#contents .notes-ex .flex {
	display: flex;
	gap: min(3%, 2rem);
	margin: 2rem 0;
}

#contents .notes-ex .flex figcaption {
	font-weight: 700;
	padding: 1rem 0;
}

#contents .notes-ex .flex.flex-1 figure {
	margin: 2rem 0;
}

#contents .notes-ex .flex figure {
	margin: 0;
	display: flex;
}

#contents .notes-ex .flex-2 {
	margin-bottom: 4rem;
}

#contents .notes-ex .flex-2 figure {
	flex-wrap: wrap;
	justify-content: center;
}

#contents .notes-ex .flex-2 figure:not(:nth-of-type(2)) img {
	margin: 18% 0 0;
	display: flex;
}

#contents .notes-ex .flex-3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
}

#contents .notes-ex .flex-3 li {
	text-align: center;
	width: calc(50% - 1rem);
}

#contents .notes-ex .flex-4 div {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	text-align: center;
	width: calc(50% - 1rem);
}

#contents .notes-ex .flex-4 div figure {
	display: flex;
	margin-top: auto;
	margin-bottom: 0.5rem;
	aspect-ratio: 5.2 / 4;
}

#contents .notes-ex .flex-4 div figure img {
	display: flex;
	max-width: 100%;
	margin-top: auto;
}

#contents .notes-ex .flex-4 div ul {
	height: auto;
	flex-grow: 1;
	width: auto;
	margin: 0;
	padding-left: 1.5rem;
}

#contents .notes-ex table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 2rem;
}

#contents .notes-ex table th,
#contents .notes-ex table td {
	border: solid 1px #C4C4C4;
	padding: 0.4rem;
	line-height: 150%;
}

#contents .notes-ex table th {
	font-weight: normal;
	background: #F4F4F4;
}

#contents .notes-ex ul {
	text-align: left;
	font-size: 0.8125rem;
	line-height: 150%;
	max-width: 43rem;
	margin: 0 auto;
}

#contents .notes-info strong {
	margin-top: 2rem;
	display: block;
}

#contents .notes-info h3 {
	margin: 0;
}

#contents .notes-info h4 {
	margin: 0;
	font-size: 0.875rem;
}

#contents .notes-info01 {
	display: flex;
	gap: 2rem;
	margin: 0 auto;
	max-width: 860px;
	justify-content: space-between;
}

#contents .notes-info01 h4 {
	background: #F4F4F4;
	padding: 0.3rem;
}

#contents .notes-info01 h4 br {
	display: none;
}

#contents .arrow-info {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	max-width: 860px;
	margin: 0 auto;
}

#contents .arrow-info p {
	padding: 0;
	margin: 0;
	padding-left: 2.5rem;
	margin-right: 2rem;
	background-size: auto 1.2rem;
	background-position: left center;
	background-repeat: no-repeat;
}

#contents .arrow-info p:nth-of-type(1) {
	background-image: url(../images/202503/arrow_01.png);
}

#contents .arrow-info p:nth-of-type(2) {
	background-image: url(../images/202503/arrow_02.png);
}

#contents .arrow-info p:nth-of-type(3) {
	background-image: url(../images/202503/arrow_03.png);
}

#contents .notes-att {
	margin: 3rem auto;
	max-width: 860px;
	padding: 1rem 1.5rem;
	box-sizing: border-box;
	border: 1px solid #FF0000;
	color: #ff0000;
	font-size: 1rem;
	line-height: 150%;
	text-align: left;
}

#contents .notes-att2 {
	margin: 0 auto;
	max-width: 860px;
	padding: 1rem 1.5rem;
	box-sizing: border-box;
	border: 1px solid #5C5C5C;
	color: #000;
	font-size: 0.8125rem;
	line-height: 150%;
	text-align: left;
}

#contents .notes-att3 {
	margin: 3rem auto;
	max-width: 860px;
	padding: 1rem 1.5rem;
	box-sizing: border-box;
	color: #000;
	font-size: 0.8125rem;
	line-height: 150%;
	text-align: left;
}

#contents .notes-att3 h3 {
	text-align: center;
}

.notes-02 strong {
	margin: 0 auto;
}

.notes-02 figure {
	max-width: 400px;
	margin: 2rem auto !important;
}

.tc p {
	text-align: center;
	font-size: 0.8125rem;
}

#contents .notes-study {
	background: rgba(222,222,222,0.25);
	margin: 3rem auto;
	padding: 2rem 5%;
	text-align: center;
}

#contents .notes-study h3 {
	padding: 0;
	margin: 0 0 2rem;
}

#contents .notes-study p {
	padding: 0;
	margin: 0;
}

#contents .notes-ex .flex-3 li br {
	display: none;
}

.spset {
	width: auto !important;
	max-width: 30rem !important;
	padding: 0.5rem 0.5rem !important;
	box-sizing: border-box;
	line-height: 150%;
	margin: 0 auto;
}

.spset br {
	display: none;
}

/* =======================================================
Responsive
======================================================= */

@media screen and (max-width:768px) {

#contents .notes-info01 h4 br {
	display: block;
}

#contents .notes-ex .flex.flex-1 {
	flex-wrap: wrap;
	gap: 0;
}

#contents .notes-ex .flex.flex-2 {
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0;
}

#contents .notes-ex .flex.flex-2 figure {
	width: calc(50%);
}

#contents .notes-in,
#contents .notes-ex {
	padding: 4% !important;
}

#contents .notes-ex .flex figcaption {
	padding-bottom: 0;
}

#contents .notes-ex .flex-2 figure:not(:nth-of-type(2)) img {
	margin: 2% 0;
}

#contents .notes-info01 {
	gap: 0;
	flex-wrap: wrap;
}

#contents .notes-ex .flex-3 {
	gap: 1rem;
}

#contents .notes-ex .flex-3 li {
	width: calc(50% - 0.5rem);
	font-size: 0.75rem;
}

table {
	font-size: 0.75rem;
}

.spset br {
	display: block;
}
	
}

@media screen and (max-width:500px) {

#contents .notes-ex strong {
	width: auto;
}

#contents .notes-ex .flex-3 li br {
	display: block;
}

}