@charset "utf-8";
/*BASE*/

/*SP*/
@media screen and (max-width: 767.98px) {

/*BASE*/
section {
	padding:2rem 2rem 4rem 2rem;
}
.summary {
	font-size:16px;
	padding:1.5rem 0;
}

section .content-box {
}

section .content-box > div {
}
section .content-box > div:nth-of-type(even) {
}
section .content-box > div > .img-box,
section .content-box > div > .txt-box {
}
section .content-box > div > .img-box {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1rem;
	width:100%;
	height:auto;
}
section .content-box > div:nth-of-type(odd) > .img-box { background-color:#65b974; }
section .content-box > div:nth-of-type(even) > .img-box { background-color:#f79043; }
section .content-box > div > .img-box > div,
section .content-box > div > .img-box > ul {
	padding:1rem;
}

section .content-box > div > .img-box > ul {
	display:grid;
	grid-template-columns: auto auto;
	gap:1rem;
}
section .content-box > div > .img-box > ul > li {
	align-self:center;
}
section .content-box > div > .img-box img {
	width:100%;
	border:solid 6px #FFF;
}
section .content-box > div > .txt-box {
	text-align:justify;
	padding:2rem 0;
}
section .content-box > div > .txt-box .message-box {
	padding: 0 1rem;
}
section .content-box > div > .txt-box h2 {
	font-size:18px;
	font-weight:bold;
	padding: 0 1rem 1.5rem 1rem;
	margin-bottom:1.5rem;
	border-bottom:dotted 6px #65b974;
}
section .content-box > div:nth-of-type(even) > .txt-box h2 { border-bottom-color:#ff8a33; }
section .content-box > div > .txt-box .message-box p:not(:last-of-type) {
	margin-bottom:1rem;
}

}


/*PC NPC TAB*/
@media screen and (min-width: 768px), print {

/*BASE*/
section {
	padding:80px 60px;
}
section .container {
	max-width:1440px;
	margin:auto;
}
section .hgroup h1 {
	text-align:center;
	padding-right:98px;
}
.summary {
	font-size:clamp(16px, 1.6vw, 18px);
	text-align:center;
	padding:60px 0;
}

section .content-box {
	max-width:1280px;
	margin:auto;
}

section .content-box > div {
	display:flex;
}
section .content-box > div:nth-of-type(even) {
	flex-direction:row-reverse;
}
section .content-box > div > .img-box,
section .content-box > div > .txt-box {
	flex: 1 0 50%;
}
section .content-box > div > .img-box {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0 40px;
	width:100%;
	height:auto;
	aspect-ratio:4 / 3;
}
section .content-box > div:nth-of-type(odd) > .img-box { background-color:#65b974; }
section .content-box > div:nth-of-type(even) > .img-box { background-color:#f79043; }
section .content-box > div > .img-box > div,
section .content-box > div > .img-box > ul {
	padding:1rem;
}
section .content-box > div > .img-box > ul {
	display:grid;
	grid-template-columns: auto auto;
	gap:1rem;
}
section .content-box > div > .img-box > ul > li {
	align-self:center;
}
section .content-box > div > .img-box img {
	width:100%;
	border:solid 6px #FFF;
}
section .content-box > div > .txt-box {
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:40px 0;
	text-align:justify;
}
section .content-box > div:nth-of-type(odd) > .txt-box .message-box {
	padding-left:40px;
}
section .content-box > div:nth-of-type(even) > .txt-box .message-box {
	padding-right:40px;
}
section .content-box > div > .txt-box h2 {
	font-size:clamp(18px, 1.75vw, 20px);
	font-weight:bold;
	padding-bottom:1.5rem;
	margin-bottom:1.5rem;
	border-bottom:dotted 6px #65b974;
}
section .content-box > div:nth-of-type(odd) > .txt-box h2 {
	padding-left:40px;
}
section .content-box > div:nth-of-type(even) > .txt-box h2 { border-bottom-color:#ff8a33; }
section .content-box > div > .txt-box .message-box p:not(:last-of-type) {
	margin-bottom:1rem;
}

}