@charset "utf-8";

#mainContent {
	.wrap {
		.contents {
			h2 {
				margin-bottom:1em;
			}
			p {
				&.body {
					font-size:2.2rem;
					color:#4a647c;
					margin-bottom:1em;
				}
			}
		}
		#group {
			p {
				&.body {
					margin-bottom:2em;
				}
			}
			.group {
				position:relative;
				max-width:900px;
				margin:0 auto;
				padding-right:5%;
				margin-bottom:45px;
				ul {
				font-size:1.8rem;
				position:absolute;
				right:0;
				bottom:15%;
				width:25%;
				text-align:center;
				display:grid;
				grid-gap:.33em;
					li {
						color:#4a647c;
						&:first-child {
							margin-bottom:.5em;
						}
					}
				}
			}
			table {
				border-collapse:collapse;
				width:100%;
				max-width:900px;
				margin:0 auto;
				font-size:inherit;
				th {
					background-color:#929dab;
					vertical-align:middle;
					color:#FFFFFF;
					line-height:1.5;
					padding:1em;
					text-align:center;
					border:1px solid #4a647c;
					width: 15em;
				}
				td {
					background-color:#FFFFFF;
					line-height:1.5;
					padding:1em;
					border:1px solid #4a647c;
					color:#4a647c;
				}
			}
		}
		#philosophy {
			.philosophy {
				padding:0 30px;
				&:not(:last-child) {
					margin-bottom:30px;
				}
				h3 {
					display:grid;
					grid-template-columns:3em auto 1fr;
					color:#003d96;
					font-size:2.0rem;
					line-height:1.4;
					font-weight:500;
					grid-gap:1em;
					align-items:center;
					padding:0 .5em;
					margin-bottom:.5em;
				}
				p {
					color:#4a647c;
				}
			}
		}
	}
}

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

	#mainContent {
		.wrap {
			.contents {
				p {
					&.body {
						font-size:2.0rem;
					}
				}
			}
			#group {
				.group {
					ul {
					font-size:min(2vw,1.8rem);
					}
				}
			}
			#philosophy {
				.philosophy {
					h3 {
						font-size:1.8rem;
					}
				}
			}
		}
	}
	
}

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

	#mainContent {
		.wrap {
			.contents {
				p {
					&.body {
						font-size:1.6rem;
					}
				}
			}
			#group {
				p {
					&.body {
						margin-bottom:1.5em;
					}
				}
				.group {
					margin-bottom:30px;
					ul {
					font-size:min(2.8vw,1.8rem);
					bottom:0;
					width:27%;
						li {
							&:first-child {
								text-align:right;
								margin-left:-3em;
							}
						}
					}
				}
				table {
					font-size:1.4rem;
					tr {
						&:not(:first-child) {
							th {
								border-top:none;
							}
						}
					}
					th,td {
						padding:.5em;
						display:block;
						width:100%;
					}
					th {
						border-bottom:none;
					}
				}
			}
			#philosophy {
				.philosophy {
					padding:0;
					&:not(:last-child) {
						margin-bottom:20px;
					}
					h3 {
						grid-template-columns:2.5em 1fr;
						font-size:1.6rem;
						grid-gap:.25em .5em;
						padding:0;
						span {
							&:last-child {
								grid-area:2/1/3/3;
								font-size:min(3.6vw,1.6rem);
								margin-right:-1em;
							}
						}
					}
				}
			}
		}
	}

}