@charset "utf-8";

/* -------------------------------------------------------------------------
	ABOUT
========================================================================= */
#about {}

#about .pageNavi { padding: 45px 0 45px; }

#about .introduction .pageTitle::before,
#about .introduction .pageTitle::after,
#access .pageTitle::before,
#access .pageTitle::after {
	width: 30px;
	height: 30px;
	top: -2px;
	}
#about .introduction .pageTitle::before,
#access .pageTitle::before {
	left: -45px;	
	background: url("../img/icon_fillflower.svg") no-repeat;
	}
#about .introduction .pageTitle::after,
#access .pageTitle::after {
	right: -40px;	
	background: url("../img/icon_flower.svg") no-repeat;
	}
#about .overview .pageTitle::before,
#about .overview .pageTitle::after {
	width: 30px;
	height: 30px;
	top: -2px;
	}
#about .overview .pageTitle::before {
	left: -45px;	
	background: url("../img/icon_star.svg") no-repeat;
	}
#about .overview .pageTitle::after {
	right: -35px;	
	background: url("../img/icon_triangles.svg") center no-repeat;
	}
#about .teacher .pageTitle::before,
#about .teacher .pageTitle::after {
	height: 30px;
	top: -2px;
	}
#about .teacher .pageTitle::before {
	width: 28px;
	left: -55px;	
	background: url("../img/icon_squaredot.svg") no-repeat;
	}
#about .teacher .pageTitle::after {
	width: 30px;
	right: -50px;	
	background: url("../img/icon_circles.svg") center no-repeat;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#about .introduction .pageTitle::before {
	left: -40px;	
	}
#about .introduction .pageTitle::after {
	right: -35px;	
	}
}

/*  ---------------------------------------------------------*/
#about .introduction {
	padding-top: 50px;
	text-align: center;
	}
#about .introduction dd > p {
	padding: 30px 0;
	font-size: var(--font-size-large);
	line-height: 220%;
	}

#about .introduction dd > .arrowButton {
	padding: 9px 45px;
	letter-spacing: 0.2rem;
	}
#about .introduction dd > .arrowButton:hover { border-color: #FFF; }
#about .introduction dd > .arrowButton::before,
#about .introduction dd > .arrowButton::after { right: 20px; }
#about .introduction dd > .arrowButton::before {
    width: 10px;
    height: 2px;
	}
#about .introduction dd > .arrowButton::after {
    width: 6px;
    height: 6px;
    border-top-width: 2px;
    border-right-width: 2px;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#about .introduction {
	padding-top: 30px;
	}
#about .introduction dd > p {
	padding: 20px 0 25px;
	font-size: var(--font-size-small);
	line-height: 180%;
	}
#about .introduction dd > .arrowButton {
	width: 100%;
	max-width: 200px;
	padding: 8px 25px;
	font-size: var(--font-size-large);
	}
}



/*  ---------------------------------------------------------*/
#about .overview {
	padding-top: 120px;
	text-align: center;
	}

#about .oveList {
	width: 100%;
	margin-top: 40px;
	}
#about .oveList > tbody tr th {
	width: 8%;
	min-width: 80px;
	height: 40px;
	padding: 10px;
	background: var(--accent-color);
	color: #FFF;
	font-weight: 400;
	letter-spacing: 0.3rem;
	border-bottom: 1px solid #FFF;
	font-size: var(--font-size-med-large);
	}
#about .oveList > tbody tr:last-of-type th { border-bottom: 1px solid var(--accent-color); }
#about .oveList > tbody tr td {
	padding: 12px 0 12px 40px;
	border-bottom: 1px solid var(--accent-color);
	text-align: left;
	}
#about .oveList > tbody tr:first-of-type td,
#about .oveList > tbody tr:first-of-type th { border-top: 1px solid var(--accent-color); }

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#about .overview { padding-top: 80px; }
#about .oveList { margin-top: 30px; }
#about .oveList > tbody tr {
	display: flex;
	flex-direction: column;
	}
#about .oveList > tbody tr th,
#about .oveList > tbody tr td { width: 100%; }
#about .oveList > tbody tr th {
	height: auto;
	padding: 3px 0;
	border-bottom: none;
	}
#about .oveList > tbody tr td {
	padding: 6px 0 20px;
	border-bottom: none;
	text-align: center;
	}
#about .oveList > tbody tr:first-of-type td { border-top: 1px solid var(--accent-color); }
#about .oveList .oveTextLeft { text-align: left; }
}



/*  ---------------------------------------------------------*/
#about .teacher {
	padding-top: 100px;
	background: url("../about/img/teacher_bg_01.svg") left 20px top 500px / 15.6% auto no-repeat,
	url("../about/img/teacher_bg_02.svg") right 40px top 170px / 7% auto no-repeat;
	text-align: center;
	}
#about .teacher .photoframe {
	width: 75.5%;
	margin: 36px auto 30px;
	}
#about .teaText {
	font-size: var(--font-size-large);
	line-height: 230%;
	}


/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#about .teacher {
	padding-top: 60px;
	background: none;
	}
#about .teacher .photoframe {
	width: 100%;
	margin: 18px auto;
	}
#about .teaText {
	font-size: var(--font-size-medium);
	line-height: 210%;
	text-align: left;
	}
}



/*  ---------------------------------------------------------*/
#about #access {
	padding: 130px 0 50px;
	text-align: center;
	}
#about .map {
	max-width: 1000px;
	height: 460px;
	margin: 30px auto 0;
	position: relative;
	}
#about .map > iframe {
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	}
#about .routeWrapper {
	padding-top: 30px;
	display: flex;
	justify-content: flex-start;
	gap: 30px;
	text-align: left;
	}
#about .route {
	width: 50%;
	padding-top: 30px;
	font-weight: 500;
	}
#about .fEng {
	display: flex;
	align-items: center;
	}
#about .rouAccent {
	padding-left: 3px;
	font-size: 3.5rem;
	line-height: 130%;
	}
#about .route > table { margin: 20px 0 65px; }
#about .route > table tbody {
	display: flex;
	flex-direction: column;
	gap: 24px;
	}
#about .route > table th span {
	min-width: 120px;
	padding: 3px;
	background: var(--accent-color);
	border-radius: 5px;
	display: block;
	color: #FFF;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.3rem;
	}
#about .route > table td {
	padding-left: 10px;
	font-size: var(--font-size-large);
	}
#about .pdfButton {
	padding: 8px 50px 8px 15px;
	display: inline-block;
	position: relative;
	border: 2px solid var(--accent-color);
	border-radius: 5px;
	color: var(--accent-color);
	font-size: 2rem;
	}
#about .pdfButton::after {
	content: "";
	width: 32px;
	height: 32px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	background: url("../img/icon_pdf.png") top left / contain no-repeat;
	}
#about .pdfButton.hide { display: none!important; }
#about .parking { width: calc( 50% - 30px); }
#about .parking > dt {
	padding-bottom: 13px;
	color: var(--accent-color);
	font-size: 2rem;
	}
#about .parking > dd img {
	width: calc((33.2% / 47)* 100);
	margin-bottom: 10px;
	}
#about #aboutWajiro .route > table th span { background: var(--accent-sub-color); }

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#about #access { padding-top: 70px; }
#about .map {
	height: 245px;
	margin: 20px auto 0;
	}
#about .routeWrapper {
	padding-top: 0;
	flex-direction: column;
	gap: 40px;
	}
#about .route {
	width: 100%;
	padding-top: 10px;
	line-height: 130%;
	}
#about .route .flarge { font-size: var(--font-size-med-large); }
#about .fEng { display: block; }
#about .rouAccent { padding-left: 0; }
#about .route > table { margin: 20px 0 0; }
#about .route > table tbody { gap: 24px; }
#about .route > table th span {
	min-width: 90px;
	padding: 5px;
	background: var(--accent-color);
	border-radius: 5px;
	color: #FFF;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.3rem;
	}
#about .route > table td {
	padding-left: 10px;
	font-size: var(--font-size-med-large);
	}
#about .pdfButton {
	padding: 8px 30px 8px 30px;
	font-size: var(--font-size-xlarge);
	}
#about .pdfButton.hide { display: inline-block!important; }
#about .pdfButton.show { display: none!important; }
#about .parking { width: 100%; }
#about .parking > dt {
	padding-bottom: 13px;
	color: var(--accent-color);
	font-size: 2rem;
	}
#about .parking > dd img {
	width: 100%;
	margin-bottom: 5px;
	}
#about #aboutWajiro .route { padding-bottom: 20px; }
}