@charset "UTF-8";


#about {
	width: 1100px;
	margin: 0 auto;
	padding-bottom: 100px;
}

/* とびら */
#main2 .let1 {
	position: absolute;
	top: 68px;
	right: 100px;
	width: 600px;
}

h3.tobira {
	text-align: center;
	color: #81CDE4;
	font-size: 3rem;
	line-height: 1.8;
	font-feature-settings: "palt";
}

.tobiramenu {
	width: 1100px;
	margin: 50px auto;
	padding: 80px 0 100px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-top: 1px solid #81CDE4;
}

.tobiramenu li {
	width: 520px;
	margin-bottom: 50px;
}

.tobiramenu a {
	display: block;
	text-decoration: none;
	position: relative;
	padding-bottom: 30px;
	border-bottom: 1px solid #999;
}
.tobiramenu a:after {
	content: "";
	position: absolute;
	width: 10%;
	border-bottom: 1px solid #000;
	bottom: -1px;
	right: 0;
}
.tobiramenu div {
	border-radius: 10px;
	overflow:hidden;
	will-change: transform;
}
.tobiramenu img {
	transition:500ms all;
}
.tobiramenu img:hover{
	transform:scale(1.05,1.05);
}
.tobiramenu h4 {
	font-size: 2.5rem;
	color: #81CDE4;
	margin-bottom: 5px;
}

.tobiramenu p {
	font-size: 2rem;
	color: #333;
	font-weight: bold;
	position: relative;
	padding-right: 20px;
	margin-top: 30px;
	padding-bottom: 0;
}

.tobiramenu p:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 9px;
	border-color: transparent transparent transparent #E76110;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}



/* 校長 */

#main2 .let2 {
	position: absolute;
	top: 120px;
	right: 0;
	width: 600px;
}
.messagebox {
	width: 650px;
	margin: 0 auto;
	position: relative;
}

.messagebox h3 {
	color: #81CDE4;
	font-size: 3rem;
	line-height: 1.8;
	writing-mode: vertical-rl;
	position: absolute;
	top: 0;
	left: 50px;
}

.messagebox div img {
	border-radius: 10px;
	margin-top: 100px;
}

.messagebox div {
	margin-bottom: 50px;
}

.messagebox h4 {
	font-size: 2.5rem;
	line-height: 1.6;
}

.messagebox h4 span {
	font-size: 1.6rem;
	line-height: 1.6;
	font-weight: normal;
	display: block;
}

.messagebox p {
	font-size: 1.6rem;
	line-height: 1.6;
}



/* 教員紹介 */

#main2 .let3 {
	position: absolute;
	top: 68px;
	right: 0;
	width: 540px;
}

.teacherbox h3 {
	font-size: 2.5rem;
	color:	#81CDE4;
	border-bottom: 1px solid #81CDE4;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.teacherbox h3 span {
	font-size: 1.6rem;
}

.teacherbox ul {
	margin-bottom: 50px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.teacherbox ul:before {
	width: 250px;
	display: block;
	content:"";
	order: 1;
}
.teacherbox ul:after {
	width: 250px;
	display: block;
	content:"";
}
.teacherbox li {
	width: 250px;
	text-align: center;
}
.teacherbox li p {
	color: #81CDE4;
	font-size: 2rem;
	margin-top: 20px;
	font-weight: bold;
	line-height: 2;
}
.teacherbox li p span {
	color: #333;
	font-size: 1.6rem;
	display: block;
}
.teacherbox li img {
	box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
}



/* 沿革・施設・グループ */

#main2 .let4 {
	position: absolute;
	top: 68px;
	right: 0;
	width: 730px;
}

.history, .facilities, .group {
	position: relative;
	margin-bottom: 100px;
}

.history h3,
.facilities h3,
.group h3 {
	color: #81CDE4;
	font-size: 3rem;
	margin-bottom: 50px;
}
.history .let {
	position: absolute;
	top: -40px;
	right: 0;
	width: 270px;
}

.history dl {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 1.6rem;
	border-top: 1px solid #acacac;
}

.history dt {
	width: 12%;
	font-weight: bold;
	padding: 10px 0;
	line-height: 2;
	border-bottom: 1px solid #acacac;
}
.history dd {
	width: 88%;
	padding: 10px 0;
	line-height: 2;
	border-bottom: 1px solid #acacac;
}

.facilities .let {
	position: absolute;
	top: -40px;
	right: 0;
	width: 340px;
}

.floor {
	display: flex;
	justify-content: space-between;
}
.floor img {
	border-radius: 10px;
}

.facilities table {
	border-collapse: collapse;
	width: 520px;
}
.facilities table th {
	background: #81CDE4;
	font-size: 2.1rem;
	font-weight: bold;
	color: #fff;
	border: 1px solid #ACACAC;
	padding: 10px;
}
.facilities table td {
	font-size: 1.6rem;
	border: 1px solid #ACACAC;
	padding: 10px;
}

.facilities #facilities_slide {
	margin: 50px 0;
}

.facilities .splide.is-initialized:not(.is-active) .splide__list {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 40px;
	grid-row-gap: 40px;
}

.facilities .splide.is-initialized:not(.is-active) .splide__list .splide__slide:first-of-type {
	grid-area: 1 / 1 / 2 / 4;
}
.facilities .splide.is-initialized:not(.is-active) .splide__list .splide__slide:nth-of-type(2) {
	grid-area: 1 / 4 / 2 / 7;
}
.facilities .splide.is-initialized:not(.is-active) .splide__list .splide__slide:nth-of-type(3) {
	grid-area: 2 / 1 / 3 / 3;
}
.facilities .splide.is-initialized:not(.is-active) .splide__list .splide__slide:nth-of-type(4) {
	grid-area: 2 / 3 / 3 / 5;
}
.facilities .splide.is-initialized:not(.is-active) .splide__list .splide__slide:last-of-type {
	grid-area: 2 / 5 / 3 / 7;
}
.facilities .splide__slide img {
	height: auto;
	width: 100%;
	border-radius: 10px;
}
.facilities .splide__slide p {
	font-size: 2.5rem;
	font-weight: bold;
	color: #81CDE4;
	padding-bottom: .5em;
}




.group .let {
	position: absolute;
	top: -40px;
	right: 0;
	width: 280px;
}

.group .glist {
	display: flex;
	justify-content: space-between;
}
.group .glist>div {
	width: 520px;
}
.group .glist>div div img {
	border-radius: 10px;
}

.group .glist h4 {
	color: #81CDE4;
	font-size: 2rem;
	margin: 20px 0;
}

.group .glist p:first-of-type {
	line-height: 1.6;
}
.group .glist p {
	font-size: 1.6rem;
	line-height: 3.2;
	font-feature-settings: "palt";
	text-align:justify;
	border-bottom: 1px solid #808080;
	position: relative;
}
.group .glist p:after {
	content: "";
	position: absolute;
	width: 5%;
	border-bottom: 1px solid #000;
	bottom: -1px;
	right: 0;
}

.group .glist a {
	color: #333;
}





/* アクセス */

#main2 .let5 {
	position: absolute;
	top: 68px;
	right: 65px;
	width: 330px;
}

.mapbox, .directions {
	position: relative;
}
.mapbox h3,
.directions h3 {
	color: #81CDE4;
	font-size: 3rem;
	margin-bottom: 50px;
}
.mapbox .let,
.directions .let {
	position: absolute;
	top: -20px;
	right: 65px;
	width: 330px;
}
.mapbox .inner {
	width: 750px;
	margin: 0 auto;
}

.mapbox .stations {
	display: flex;
	justify-content: space-between;
	margin: 50px 0;
}
.mapbox .stations div {
	font-size: 1.6rem;
	line-height: 2;
}
.mapbox .stations div strong {
	color: #f00;
}
.mapbox .stations div:first-child strong {
	color: #66CEE6;
}
.mapbox .stations div:last-child strong {
	color: #981A8B;
}
.mapbox .walk {
	font-size: 1.6rem;
	line-height: 2;
	margin: 10px 0 100px;
}

.directions ol {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.directions ol li {
	width: 330px;
}

.directions p {
	font-size: 1.6rem;
	line-height: 2;
	font-feature-settings: "palt";
	text-align:justify;
}

.directions img {
	border-radius: 10px;
	margin-bottom: 10px;
}





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




#about {
	width: 86%;
	padding-top: 40px;
	padding-bottom: 50px;
}

#main2 .let1 {
	position: absolute;
	top: 80px;
	right: 0;
	width: 300px;
}




.tobiramenu {
	width: 100%;
	margin: 50px auto 0;
	padding: 40px 0 0;
}

.tobiramenu li {
	width: 100%;
}

.tobiramenu a {
	padding-bottom: 20px;
}

.tobiramenu p {
	font-size: 1.6rem;
	margin-top: 20px;
}



/*校長*/


#main2 .let2 {
	position: absolute;
	top: 85px;
	right: 0;
	width: 310px;
}
.messagebox {
	width: 100%;
}

.messagebox h3 {
	font-size: 2.5rem;
	position: static;
	margin: 80px auto 0;
}

.messagebox div img {
	margin-top: 20px;
}

.messagebox p {
	font-size: 1.6rem;
	line-height: 1.6;
}



/* 教員紹介 */

#main2 .let3 {
	position: absolute;
	top: 85px;
	right: 0;
	width: 270px;
}

.teacherbox h3 {
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.teacherbox ul {
	margin-bottom: 25px;
}

.teacherbox ul:before {
	width: 48%;
}
.teacherbox ul:after {
	width: 48%;
}
.teacherbox li {
	width: 48%;
}
.teacherbox li p {
	font-size: 1.6rem;
	margin-top: 10px;
}
.teacherbox li p span {
	font-size: 1.05rem;
}



/* 沿革・施設・グループ */

#main2 .let4 {
	position: absolute;
	top: 90px;
	right: 0;
	width: 320px;
}

.history, .facilities, .group {
	margin-bottom: 50px;
}
.history h3,
.facilities h3,
.group h3 {
	font-size: 2.5rem;
	margin-bottom: 25px;
}
.history .let {
	position: absolute;
	top: -10px;
	width: 150px;
}

.history dl {
	display: block;
	font-size: 1.6rem;
}
.history dt {
	width: 100%;
	padding: 10px 0 0 0;
	border-bottom: none;
}
.history dd {
	width: 100%;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #acacac;
}

.facilities .let {
	position: absolute;
	top: -10px;
	width: 170px;
}


.group .let {
	position: absolute;
	top: -30px;
	width: 140px;
}

.floor {
	display: block;
	width: 100vw;
	margin: 0 calc(49.3% - 50vw);
	background: url(../images/about/building.webp) no-repeat top center/100% auto;
	padding-top: 200px;
}

.floor img {
	display: none;
}
.facilities table {
	width: 86%;
	margin: 0 auto;
	background: #fff;
}
.facilities table th {
	font-size: 1.4rem;
}
.facilities table td {
	font-size: 1.1rem;
}
.facilities .splide__track {
	padding: 0 32px !important;
}
.facilities .splide__slide p {
	font-size: 1.25rem;
}
.facilities .spinner {
	padding: 0 20px;
}
.facilities #facilities_slide {
	width: 100vw;
	margin: 50px calc(50% - 50vw);
}


.group .glist {
	display: block;
}
.group .glist>div {
	width: 100%;
}

.group .glist h4 {
	font-size: 2.5rem;
	margin: 10px 0;
}
.group .glist>div:first-of-type {
	margin-bottom: 40px;
}



/* アクセス */

#main2 .let5 {
	position: absolute;
	top: 80px;
	right: 0;
	width: 165px;
}

.mapbox h3,
.directions h3 {
	font-size: 2.5rem;
	margin-bottom: 30px;
}
.mapbox .let,
.directions .let {
	position: absolute;
	top: 0px;
	right: 0;
	width: 165px;
}
.mapbox .inner {
	width: 100%;
}

.mapbox .stations {
	display: block;
	margin: 25px 0;
}
.gmap {
	width: 100vw;
	margin: 0 calc(49.3% - 50vw);
}
.mapbox .walk {
	margin: 10px 0 50px;
}

.directions ol {
	display: block;
}

.directions ol li {
	width: 100%;
	margin-bottom: 20px;
}







}