@charset "UTF-8";
/*------------
about 共通
--------------*/
.main-container{
	padding-bottom:0;
}
/*----point------*/
.point article{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.point article figure{
	width:45%;
}
.point article .article-body{
	width:50%;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: flex-start;
}
.point article h4{
	width:20%;
	font-size:calc(var(--font-size-base)*5);
	font-weight: 400;
	line-height:1.2;
	text-align: center;
}
.point article .article-body > div{
	width:75%;
}
.container-base.point article h4{
	width:12%;
	font-size:calc(var(--font-size-base)*5);
	font-weight: 400;
	line-height:1.2;
	text-align: center;
}
.container-base.point article .article-body > div{
	width:80%;
}

.point article > div.point-wide{
	width:100%;
	margin-bottom: calc(var(--spacer)*5);
	margin-top: calc(var(--spacer)*2);
	order:4;
	border:1px solid var(--border);
	padding: calc(var(--spacer)*2);
}

.point article:nth-of-type(even) {
	& > div.article-body{
		order:2;
	}
	& figure{
		order:1;
	}
	& div.point-wide{
		order:3;
	}
}
@media screen and (max-width: 1200px){
	.point article .article-body{
		flex-direction: column;
		justify-content:flex-start;
	}
	.point article h4,
	.point article .article-body > div{
		width:100%;
	}
	.point article h4{
		text-align: left;
	}
}
@media screen and (max-width: 1000px){
	.point article{
		flex-direction: column;
		}
    .container-base.point article .article-body > div,
	.point article .article-body,
	.point article figure{
		width:100%;
	}
    .container-base.point article h4,
	.point article h4{
	font-size:calc(var(--font-size-base)*3);
	line-height:1;
	}
	.point article .article-body{
	margin-top:calc(var(--spacer)*0);
	margin-bottom:calc(var(--spacer)*5);
	}
	.point article:nth-of-type(even) {
		& .article-body{
			order:1;
		}
		& figure{
			order:2;
		}
		& div.point-wide{
			order:3;
		}
	}
}
/*----point2------*/

.point2 article{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.point2 article > div{
	width:50%;
}
.point2 article > div > div{
	border-left:1px solid var(--body);
	padding-left:calc(var(--spacer)*5);
	padding-top:calc(var(--spacer)*2);
}
.point2 article .heading-line2::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--black);
	position: absolute;
	bottom: 0;
	left: 0;
}
.point2 article figure{
	width:40%;
}
.point2 article figure img{
	max-width: none;
	width: 100%;
	display: block;
	object-fit: cover;
	min-height: 100%;
	aspect-ratio: 3/2;
}
.point2 article:nth-of-type(even) {
	& div{
		order:2;
	}
	& figure{
		order:1;
	}
}

@media screen and (max-width: 1000px){
	.point2 article{
	flex-direction: column;
	}
	.point2 article > div,
	.point2 article figure{
		width:100%;
	}
	.point2 article > div{
		margin-top:calc(var(--spacer)*0);
		margin-bottom:calc(var(--spacer)*5);
	}
	.point2 article:nth-of-type(even) {
		& > div{
			order:1;
		}
		& figure{
			order:3;
		}
	}
}
/*----point3------*/
.point3 {
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.point3 article{
	width:45%;
}
@media screen and (max-width: 1000px){
	.point3 article{
		width:100%;
	}
}
/*----voice------*/
.container-narrow:has(div.voicearea) {
	margin-bottom:0!important;
}
.voicearea figure{
	width:20%;
	order:2;
}
.voicearea > div{
	width:70%;
	order:1;
}
@media screen and (max-width: 768px){
	.voicearea figure{
		width:100%;
		order:1;
		text-align: center;
	}
	.voicearea figure img{
		width:60%;
		margin-bottom:15px;
	}
	.voicearea > div{
		width:100%;
		order:2;
	}
}
img.teacher-img{
	max-width:300px;
	margin:0 auto;
	width:100%;
}
/*------------
about トップ
--------------*/
#s_top{
    margin-bottom:calc(var(--spacer)*10);
}
#s_content .container{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
#s_content dl{
	float:  left;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 45%;
    margin-bottom:calc(var(--spacer)*8);
}
#s_content dl dt{
	display: block;
	background: #fff;
	width: auto;
	padding: calc(var(--spacer)*2.5);
	padding-left: 0;
	padding-bottom: 0;
	position: relative;
	z-index: 2;
	border-radius: 0 20px 0 0;
	color:var(--purple);
}
#s_content dl dt a{
	display: block;
	position: relative;
	padding-right:50px;
}
#s_content dl dt a:after{
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-right: 2px solid var(--purple);
	border-top: 2px solid var(--purple);
	transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 4px);
	right: 3px;
}
#s_content dl dd{
	display: block;
	width: 100%;
}
#s_content dl dd:not(:has(figure)){
	position: relative;
	z-index: 3;
	border-radius: 0 calc(var(--spacer)*4) 0 calc(var(--spacer)*4);
}
#s_content dl dd:has(figure){
	order: -1;
	z-index: 1;
	margin-bottom: -50px;
}
#s_content dl dd ul{
	margin-top: calc(var(--spacer)*1);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#s_content dl dd ul li{
	display: inline-block;
	width: 33.3%;
}
#s_content dl dd figure{
	position: relative;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
	width: 100%;
	aspect-ratio: 16/9;
}
#s_content dl dd a figure img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0% 0%;
	transition: 0.7s ease-in-out;
}
#s_content dl:hover figure img{
	transform: scale(1.1);
}

.d-flex-movie > div{
	width:30%;
}

@media screen and (max-width: 768px){
	#s_content dl{
		width: 100%;
	}
	#s_content dl dt .heading-4{
		font-size:calc(var(--font-size-base)*1.4)!important;
	}
	.pamphlet> * {
		width:100%!important;
	}
	.d-flex-movie > div{
		width:100%;
		margin-bottom:calc(var(--spacer)*4);
	}
}

/*------------
建学の精神と沿革
establishment
--------------*/
/*駒澤大学高等学校のあゆみ #history*/
.about-establishment #history  dl{
	position:relative;
	margin-left:5px;
	display: flex;
}
.about-establishment #history dt{
	position:relative;
	padding-left:1.8em;
	color:var(--purple);
	width:170px;
}
.about-establishment #history dd{
	padding-bottom:25px;
}
.about-establishment #history dl:before{
	content: "";
	width: 1px;
	display: block;
	position: absolute;
	top: 25px;
	bottom: 0;
	left: 4px;
	border-left:1px solid var(--border);
}
.about-establishment #history dl:after{
	content: "";
	display: inline-block;
	position: absolute;
	top: 7px;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border: solid 2px;
	border-color:var(--purple);
}
.about-establishment #history dl:nth-child(even):after{
	background:var(--purple);
}
.about-establishment #history dl:last-of-type:before{
	display: none;
}
@media screen and (max-width: 768px){
	.about-establishment #history  dl{
		flex-direction: column;
	}
	.about-establishment #history dd{
		padding-left:1.8em;
	}
}
/*------------
特色ある取り組み
feature
--------------*/
/*religion*/
.about-feature.religion .religion-article article{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.about-feature.religion .table table th{
	width:15%;
	font-weight: normal;
}
.about-feature.religion .table table tr td:first-of-type{
	width:15%;
}
/*forest*/
.about-feature.forest .d-flex-gallery > figure{
	width:32%;
	margin:calc(var(--spacer)* 1.5) 0;
}


/*intl_exchange*/
.about-feature.intl_exchange .badge{
	width:auto;
	border-radius: 2px;
}

.about-feature.intl_exchange .timetable dl{
	position:relative;
	margin-left:5px;
	display: flex;
}
.about-feature.intl_exchange .timetable dt{
	position:relative;
	padding-left:1.8em;
	width:170px;
}
.about-feature.intl_exchange .timetable dd{
	padding-bottom:25px;
}
.about-feature.intl_exchange .timetable dl:before{
	content: "";
	width: 1px;
	display: block;
	position: absolute;
	top: 25px;
	bottom: 0;
	left: 4px;
	border-left:1px solid var(--orange);
}
.about-feature.intl_exchange .timetable dl:after{
	content: "";
	display: inline-block;
	position: absolute;
	top: 7px;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border: solid 2px;
	border-color:var(--orange);
}
.about-feature.intl_exchange .timetable dl:nth-child(even):after{
	background:var(--orange);
}
.about-feature.intl_exchange .timetable dl:last-of-type:before{
	display: none;
}
.about-feature.intl_exchange .d-flex-gallery > figure{
	width:23%;
}

@media screen and (max-width: 768px){
	.about-feature.intl_exchange .timetable  dl{
		flex-direction: column;
	}
	.about-feature.intl_exchange .timetable dd{
		padding-left:1.8em;
	}
	.about-feature.intl_exchange .d-flex-gallery > figure{
		width:48%!important;
	}
}
/*------------
授業について
class
------------*/
.about-class #s_content dl{
	float:  left;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 32%;
    margin-bottom:calc(var(--spacer)*8);
}
.about-class #s_content dt span{
	display: block;
}
.about-class #s_content dt{
padding-top: calc(var(--spacer)*1.5);
line-height: 1.4!important;
}
@media screen and (max-width: 1000px){
	.about-class #s_content dl{
		width: 45%;
	}
}
@media screen and (max-width: 768px){
	.about-class #s_content dl{
		width: 100%;
	}
}
.class-curriculum >div{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: center;
}
.class-curriculum h3{
	font-weight: 500;
	padding:5px 8px;
	background:var(--purple);
	margin-bottom:8px;
	color:var(--white);
	width:200px;
	text-align: center;
}
.class-curriculum > div:nth-child(2) h3{
	background:var(--orange);
}
.class-curriculum ul.ul{
	width:calc(100% - 220px);
}
.class-curriculum ul.ul li{
	display: inline-block;
	margin:5px 10px;
}
.class-curriculum ul.ul li:before{
	border-right: 2px solid var(--green);
	border-top: 2px solid var(--green);
}
.class-curriculum table{
	border-top:1px solid var(--border);
	width:100%;
}
.class-curriculum table caption{
	padding:5px;
}
.freshman .class-curriculum .table-fill{
	background:var(--green);
	color:var(--white);
}
.freshman .class-curriculum .table-fill2{
	background:color-mix(in srgb, var(--green) 10%, white);
}
.course1 .class-curriculum .table-fill{
	background:var(--blue);
	color:var(--white);
}
.course1 .class-curriculum .table-fill2{
	background:color-mix(in srgb, var(--blue) 20%, white);
}
.course2 .class-curriculum .table-fill{
	background:var(--red);
	color:var(--white);
}
.course2 .class-curriculum .table-fill2{
	background:color-mix(in srgb, var(--red) 8%, white);
}
.course2 .class-curriculum .table-fill3{
	background:color-mix(in srgb, var(--body) 25%, white);
}
.class-curriculum table tr{
	border-bottom:1px solid var(--border);
	padding:5px;
	border-left:1px solid var(--border);
	border-right:1px solid var(--border);
}
.class-curriculum table th,
.class-curriculum table td{
	padding:5px 15px;
}
.class-curriculum table th{
	font-weight: normal;
	text-align: left;
	border-left:1px solid var(--border);
	vertical-align: middle;
}
.class-curriculum table td.unit{
	text-align: right;
	vertical-align: middle;
	width:10%;
}
.class-curriculum table th{
	width:40%;
}
.class-curriculum .hissu{
	border:1px solid var(--border);
	margin-right:5px;
	width:50px;
	height:var(--font-size-base);
	display: inline-block;
}
.class-end{
	border-top:1px solid var(--border);
	padding-top:calc(var(--spacer)* 2);
}
.class-end h4{
	border:1px solid var(--green);
	position:relative;
	text-align: center;
	padding:5px;
	background:var(--white);
	margin-top:calc(var(--spacer)* 5);
}
.class-end h4:before{
	content: "";
    position: absolute;
	width:90px;
	height:25px;
    top: -40px;
    left: calc(50% - 45px);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
	background-color: var(--green);
}
.course1 .class-end h4{
	border:1px solid var(--blue);
}
.course1 .class-end h4:before{
	background-color: var(--blue);
}
.course2 .class-end h4{
	border:1px solid var(--red);
}
.course2 .class-end h4:before{
	background-color: var(--red);
}
.class-end nav ul{
	display: flex;
	justify-content: center;
	margin-top:calc(var(--spacer)* 6);
}
.class-end nav ul li{
	width:33%;
	margin:5px 20px;
}
.class-end h5{
	background:var(--blue);
	position:relative;
	text-align: center;
	padding:10px;
	color:var(--white);
	border-radius: 6px;
}
.class-end h5:before{
	content: "";
    position: absolute;
	width:90px;
	height:25px;
    top: -40px;
    left: calc(50% - 45px);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
	background-color: var(--blue);
}
.class-end h5.course2,
.class-end h5.course2:before{
	background:var(--red);
}

@media screen and (max-width: 768px){
	.class-course article{
		width:100%;
	}
	.class-course article:not(:last-of-type){
		margin-bottom:calc(var(--spacer)*4);
	}
	.class-curriculum h3,
	.class-curriculum ul.ul{
		width:100%;
	}
	.class-curriculum ul.ul li{
		display: block;
		margin:5px 2%;
	}
	.class-end nav ul li{
		width:45%;
		margin:5px 10px;
	}
	.class-end h4:before,
	.class-end h5:before{
	width:60px;
	height:15px;
	left: calc(50% - 30px);
	top: -25px;
	}
}

/*------------
進路情報
course
------------*/

/*results*/
.results-gakubu{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.results-gakubu article{
	width:48%;
	border-bottom:1px solid var(--border);
	padding-top:calc(var(--spacer)*4);
	padding-bottom:calc(var(--spacer)*4);
}
.results-gakubu article p{
	padding-left:19px;
	padding-top:12px;
}
.results-flex{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: flex-start;
}
.results-flex > div{
	width:45%;
}
.results-flex > figure{
	width:50%;
}
.results-table table td{
	text-align: center;
}
.results-table table thead tr td{
	background:color-mix(in srgb, var(--purple) 15%, white)!important;
}
.results-table table tbody tr:nth-child(2n+1) td{
	background:color-mix(in srgb, var(--purple) 8%, white);
  }
.results-table table tbody tr:nth-child(2n) td{
	background:var(--white);
}
.results-table table tbody tr td.h{
	background:color-mix(in srgb, var(--purple) 11%, white);
	border-left:1px solid var(--border);
}
.results-table table tfoot tr td.h{
	background:var(--white);
	border-left:1px solid var(--border);
	font-weight: 700;
}
.results-table2  table tbody tr td:first-child{
	border-left:1px solid var(--border);
}
.results-table2  table tbody tr td:nth-of-type(odd){
	white-space: nowrap;
	width:40%;
}
.results-table2  table tbody tr td:nth-of-type(3n){
	border-left:2px solid var(--border);
}
@media screen and (max-width: 1000px){
	.results-table2 .stickytable table{
		width: 130%;
	}
}
@media screen and (max-width: 768px){
	.results-gakubu article{
		width:100%;
	}
	.results-flex > div,
	.results-flex > figure{
		width:100%;
	}
}

/*------------
キャンパスガイド
campusguide
------------*/
.about-campusguide #s_content .container{
	justify-content: center;
}
.about-campusguide #s_content dl{
	width: 31%;
	margin-right:1%;
	margin-left:1%;
}
@media screen and (max-width: 1000px){
	.about-campusguide #s_content dl{
		width: 48%;
	}
}
@media screen and (max-width: 768px){
	.about-campusguide #s_content dl{
		width: 100%;
		margin-right:0%;
		margin-left:0%;
	}
}

/*.facilities*/
.about-campusguide.facilities .d-flex-gallery > figure{
	width:32%;
	margin:calc(var(--spacer)* 1.5) 0;
}
.facilities-map{
	align-items: flex-start;
}
.facilities-map::after{
	content:"";
	display: block;
	width:31%;
  }
  .facilities-map > article{
	width:31%;
	margin-bottom: calc(var(--spacer)*3);
}
.facilities-map > article figure{
	margin-bottom: calc(var(--spacer)*2);
}
.facilities-map h3{
	display: flex;
	align-items: center;
	font-weight: 700;
	margin-bottom: calc(var(--spacer)*1);
}
.facilities-map h3 span{
	background:var(--orange);
	color:var(--white);
	font-size:calc(var(--font-size-base)*1);
	margin-right:5px;
	line-height:1;
	width:calc(var(--font-size-base)*1.5);
	height:calc(var(--font-size-base)*1.5);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
@media screen and (max-width: 768px){
	.about-campusguide.facilities .d-flex-basic > figure{
		order:1;
		margin-bottom:15px;
	}
	.about-campusguide.facilities .d-flex-basic > div{
		order:2;
	}
	.facilities-map > article{
		width:48%;
	}
}
@media screen and (max-width: 390px){
	.facilities-map > article{
		width:100%;
	}
}

/*event*/

.event-list dl{
	position:relative;
	margin-left:5px;
	display: flex;
	justify-content: space-between;
	margin-bottom:calc(var(--font-size-base)*1);
}
.event-list dt{
	position:relative;
	padding-left:1.8em;
	width:35%;
}
.event-list dd{
	width:60%;
}
.event-list dl:before{
	content: "";
	width: 1px;
	display: block;
	position: absolute;
	top: calc(var(--font-size-base)*3);
	bottom: 0;
	left: 4px;
	border-left:1px solid var(--border);
}
.event-list dl:after{
	content: "";
	display: inline-block;
	position: absolute;
	top: calc(var(--font-size-base)*1);
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border: solid 2px;
	border-color:var(--orange);
}
.event-list dl:nth-child(even):after{
	background:var(--orange);
}
.event-list dl:last-of-type:before{
	display: none;
}
.event-list dd .d-flex{
	margin-top:calc(var(--spacer)*2);
}
.event-list dd .d-flex .d-flex-basic div,
.event-list dd .d-flex .d-flex-basic figure{
	width:48%;
}
@media screen and (max-width: 768px){
	.event-list  dl{
		flex-direction: column;
	}
	.event-list dt,
	.event-list dd{
		width:100%;
	}
	.event-list dd{
		width:100%;
		padding-left:1.8em;
	}
	.event-list dd .d-flex figure{
		order:2;
	}
	.event-list dd .d-flex div{
		order:1;
		padding-top:10px;
	}
	
	.event-list dl:after{
		top: calc(var(--font-size-base)*.5);
	}
}
/*.club*/
.club-list{
	justify-content:flex-start;
}
.club-list li{
	width:calc(25% - 15px);
	margin:10px 0;
}
ul.ul.club-list li::before {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-right: 2px solid var(--orange);
	border-top: 2px solid var(--orange);
	transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 5px);
	left: 0px;
}
.club-achievement dl{
	display: flex;
	border-bottom:1px dotted var(--border);
	width:100%;
}
.club-achievement dt{
	width:25%;
	padding:5px;
}
.club-achievement dd{
	width:calc(75% - 20px);
	padding:5px;
}
/*clubnews*/
.club-news-wrap{
	overflow-y: scroll;
	height:50vh;
	min-height:500px;
}
.club-news h3{
	background:var(--orange);
	padding:5px;
	color:var(--white);
	font-weight: 700;;
	margin:calc(var(--spacer)*2) 0;
}
.club-news article{
	padding:calc(var(--spacer)*2) 0;
	border-bottom:1px dotted darkgray;
}
.club-news dl{
	display: flex;
	justify-content: space-between;
	width:100%;
}
.club-news dt{
	width:calc(100% - 150px);
}
.club-news dd{
	width:150px;
	color:var(--red);
}
@media screen and (max-width: 1000px){
	.club-list li{
		width:calc(33% - 15px);
	}
	.club-achievement dt{
		width:30%;
	}
	.club-achievement dd{
		width:calc(70% - 20px);
	}
}
@media screen and (max-width: 768px){
	.club-list li{
		width:calc(50% - 15px);
		margin:5px 0;
	}
	.club-achievement dl{
		flex-direction: column;
	}
	.club-achievement dt{
		background:var(--light);
	}
	.club-achievement dt,
	.club-achievement dd{
		width:100%;
	}
	.club-news dl{
		flex-direction: column;
		width:calc(100% - 20px);
	}
	.club-news dt{
		width:100%;
	}
	.club-news dd{
		width:100%;
		text-align: right;
	}
}
@media screen and (max-width: 390px){
	.club-list li{
		width:calc(100% - 15px);
	}
}
/*.uniform*/
.uniform-list{
	align-items: flex-start;
}
.uniform-list01{
	width:60%;
}
.uniform-list ul{
	width:100%;
}
.uniform-list ul li{
	width:45%;
	padding-bottom:calc(var(--spacer)*3);
	text-align: center;
}
.uniform-list ul figure{
	width:90%;
	margin:auto;
}
.uniform-list ul li img{
	position: relative;
	width: 100%;
	width: 100%;
	border-radius: 100%;
	overflow: hidden;
	z-index: 0;
}
.uniform-list05{
	width:35%;
}
@media screen and (max-width: 768px){
	.uniform-list{
		flex-direction: column;
	}
	.uniform-list01{
		width:100%;
	}
	.uniform-list05{
		width:100%;
	}
	.uniform-list05 figure{
		width:80%;
		margin:auto;
	}
}

/*.qa*/
.qa-life article{
	align-items: center;
	margin-bottom:calc(var(--spacer)*4);
} 
.qa-life article > div h4{
	position:relative;
	padding-left:70px;
	line-height:1.5;
	border-bottom:1px solid var(--border);
	padding-bottom:10px;
}
.qa-life article > div h4:before{
	position:absolute;
	content:"";
	width:55px;
	height:55px;
	top:calc(50% -50px);
	left:0;
}
.qa-life article > div h4 span{
	display: block;
	font-size:calc(var(--font-size-base)*1.1);
}
.qa-life article:nth-child(even) >div{
	order:2;
}
.qa-life article:nth-of-type(1) > div h4:before{
	background:url("../images/about/campusguide/qa/life-time01.webp") ;
	background-size:cover;
}
.qa-life article:nth-of-type(2) > div h4:before{
	background:url("../images/about/campusguide/qa/life-time02.webp") ;
	background-size:cover;
}
.qa-life article:nth-of-type(3) > div h4:before{
	background:url("../images/about/campusguide/qa/life-time03.webp") ;
	background-size:cover;
}
.qa-life article:nth-of-type(4) > div h4:before{
	background:url("../images/about/campusguide/qa/life-time04.webp") ;
	background-size:cover;
}
.qa-life article:nth-of-type(5) > div h4:before{
	background:url("../images/about/campusguide/qa/life-time05.webp") ;
	background-size:cover;
}
.qa-life article:nth-of-type(6) > div h4:before{
	background:url("../images/about/campusguide/qa/life-time06.webp") ;
	background-size:cover;
}
.qa-life article:nth-of-type(7) > div h4:before{
	background:url("../images/about/campusguide/qa/life-time07.webp") ;
	background-size:cover;
}
.qa-life article:nth-of-type(8) > div h4:before{
	background:url("../images/about/campusguide/qa/life-time08.webp") ;
	background-size:cover;
}
.qa-qa article{
	width:45%;
	margin-top:calc(var(--spacer)*5);
}
.qa-qa article h4 span{
	display:inline-block;
	border-radius: 50%;
	margin-right:10px;
	width:calc(var(--font-size-base)*3);
	height:calc(var(--font-size-base)*3);
	line-height:calc(var(--font-size-base)*3);
	font-size:calc(var(--font-size-base)*1);
	text-align: center;
	font-weight: bold;
	font-family: var(--font-family-min);
	background:var(--orange);
	color:var(--white);
}
@media screen and (max-width: 768px){
	.qa-life article:nth-child(even) >figure{
		order:2;
	}
	.qa-life article:nth-child(even) >div{
		order:1;
	}.qa-life article > div{
		margin-bottom:calc(var(--spacer)*2);
	}
	.qa-life article > div h4{
		position:relative;
		padding-left:55px;
	}
	.qa-life article > div h4:before{
		position:absolute;
		content:"";
		width:45px;
		height:45px;
		top:0;
		left:0;
	}
	.qa-qa article{
		width:100%;
	}
	
}