@media all and (max-width: 780px) {
}

#life.campuslife {
	img {
		max-width: 100%;
	}
	p {
		text-align: justify;
	}
	.anshin {
		max-width: 240px;
		padding: 30px;
		background-color: white;
		margin: auto;
		display: none;
		@media all and (max-width: 780px) {
			display: inline-block;
			max-width: 300px;
		}
		strong {
			display: block!important;
			border-top: solid 2px;
			border-bottom: solid 2px;
			text-align: center;
			font-size: 1rem;
			position: relative;
			margin-bottom: 20px;
			@media all and (min-width: 780px) {
				font-size: 1.3rem;
			}
			&:before,
			&:after {
				content:"";
				display: block;
				position: absolute;
				bottom:0;
				left: 50%;
				transform: translate(-50%,50%) rotate(135deg);
				background-image: linear-gradient(225deg, white 50%, white 50%, transparent);
			}
			&:before {
				width: 30px;
				height: 30px;
				z-index: 2;
				border-top: solid 2px white;
				border-right: solid 2px white;
			}
			&:after {
				width: 20px;
				height: 20px;
				z-index: 3;
				border-top: solid 3px;
				border-right: solid 3px;
			}
		}
		p {
			color: black;
			padding: initial!important;
		}
	}
	.sec01 {
		.limit {
			padding:0;
			p {
				text-align: center;
				padding:20px 10px;
				@media all and (max-width: 780px) {
					padding: 10px 30px 30px;
				}
				span {
					display: inline-block;
				}
				@media all and (max-width: 780px) {
					text-align: left;
				}
			}
			h2 {
				position: absolute;
				z-index:1;
			}
			img {
				position: relative;
				z-index:2;
			}
		}
	}
	.campus {
		.nagatsuka1 strong { color: #e2929c; }
		.nagatsuka2 strong { color: #ac308c; }
		.aga strong { color: #6ebe7c; }
		.saka_gohara strong { color: #00aecf; }
		.campus_pos {
			position: relative;
			border-top: solid 1px white;
			h2 {
				position: absolute;
				z-index: 3;
				@media all and (max-width: 780px) {
					max-width: 80%;
				}
				img {
					display: block;
					position: relative;
					top: 0;
					z-index:2;
				}
				span {
					position: absolute;
					top: 0;
					z-index:1;
				}
				+ img {
					margin-top: 30px;
					@media all and (max-width: 780px) {
						margin-top: 20px;
					}
				}
			}
			.main {
				object-fit: cover;
				display: block;
				@media all and (max-width: 780px) {
					aspect-ratio: 5/3;
				}
			}
			.anshin {
				display: none;
				@media all and (min-width: 780px) {
					display: inline-block;
				}
				position: absolute;
				z-index: 3;
			}
			.like {
				position: absolute;
				width: 300px;
				z-index: 3;
				@media all and (max-width: 780px) {
					max-width: 35%;
				}
			}
			.name {
				position: absolute;
				bottom: 10px;
				right: 10px;
				padding: 10px 80px;
				border-radius: 80px;
				@media all and (max-width: 780px) {
					padding: 10px 40px;
					border-radius: 40px;
					/*transform: scale(60%) translate(35%,35%);*/
					position: relative;
					top: 10px;
					bottom: 0px;
					right: 0px;
					border-radius: 20px;
				}
				>div {
					color: white;
					font-size: 0.9rem;
					@media all and (max-width: 780px) {
						font-size: 0.7rem;
						line-height: 1rem;
					}
					&:nth-of-type(1) {
						position: relative;
						margin-bottom: 10px;
						object-fit: contain;
						object-position: left;
						@media all and (max-width: 780px) {
							margin-bottom: 5px;
						}
						img {
							position: absolute;
							bottom:0;
							left:0;
							transform: translate(0,100%);
							max-width: 100%;
							display: block;
							width: 100%;
						}
					}
					&:nth-of-type(2) {
						span {
							font-size: 140%;
						}
					}
				}
			}
			&.nagatsuka1 {
				.name {
					background-color: #d87366;
				}
			}
			&.nagatsuka2 {
				.name {
					background-color: #a53397;
				}
			}
			&.aga {
				.name {
					background-color: #76cc66;
				}
			}
			&.saka_gohara {
				.name {
					background-color: #46b8dd;
				}
			}

			&.nagatsuka1,
			&.aga {
				.anshin {
					top: 40px;
					right: 40px;
				}
				.like {
					bottom: 70px;
					left: 30px;
					@media all and (max-width: 780px) {
						display: none;
						/*
						bottom: 10px;
						left: 10px;
						*/
					}
				}
			}
			&.nagatsuka2,
			&.saka_gohara {
				.anshin {
					bottom: 50px;
					left: 40px;
				}
				.like {
					top: 50px;
					right: 30px;
					@media all and (max-width: 780px) {
						display: none;
						/*
						top: initial;
						bottom: 10px;
						left: 10px;
						*/
					}
				}
			}
		}

		.flex {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			justify-content: space-between;
			gap: 50px 50px;
			max-width: calc(100% - 50px);
			margin: 50px auto;
			> div {
				width: calc(100% / 3 - 50px);
				@media all and (max-width: 780px) {
					width: 100%;
					max-width: 500px;
					margin: auto;
				}
				&:first-of-type {
					strong {
						display: inline-block;
						margin-bottom: 20px;
						@media all and (max-width: 780px) {
							max-width: 300px;
						}
						span {
							font-size: 1.3rem;
							font-weight: bold;
							border-bottom: solid  5px yellow;
							@media all and (max-width: 780px) {
								font-size: 1rem;
							}
						}
					}
					>p {
						@media all and (max-width: 780px) {
							padding:0;
						}
					}
					@media all and (max-width: 780px) {
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						.anshin {
							position: initial;
						}
					}
				}
				&:last-of-type {
					@media all and (max-width: 780px) {
						margin-bottom: 50px;
						border-bottom: double 3px #aaa;
					}
				}
				.like {
					display: none;
					@media all and (max-width: 780px) {
						display:initial;
						img {
							max-width: 300px;
							margin: 0 auto 100px;
						}
					}
				}
				img {
					display: block;
					width: 100%;
					height: initial;
					&.sp {
						max-width: 200px;
					}
				}
				p {
					padding: 10px 0;
					@media all and (max-width: 780px) {
						padding: 10px 10px;
					}
				}
			}
		}
		&:last-of-type {
			.flex {
				> div {
					&:last-of-type {
						border: none;
					}
				}
			}
		}
	}
}