@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
div#CONTENTS .guideBox {
	padding: 96px 0 68px;
	background: #F2F2F2;
}
div#CONTENTS .guideList {
	padding: 0 min(7vw,100px);
	display: flex;
	flex-wrap: wrap;
	gap: min(2.1vw,30px);
}
div#CONTENTS .guideList li {
	width: calc((100% - (min(2.1vw,30px) * 2 + 1px)) / 3);
}
div#CONTENTS .guideList .photo {
	margin: 0 auto 38px;
	width: min(22vw,209px);
	aspect-ratio: 1;
	position: relative;
}
div#CONTENTS .guideList .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 100%;
}
div#CONTENTS .guideList .photo .num {
	position: absolute;
	top: 0;
	left: 10px;
	color: #000;
	font-size: 52px;
	font-weight: 900;
	line-height: 1;
	opacity: 0.2;
}
div#CONTENTS .guideList p {
	display: flex;
	align-items: flex-start;
	text-align: center;
	color: #000;
	text-align: center;
	font-size: min(2.0vw,24px);
	font-weight: 600;
	line-height: 1.5;
}
div#CONTENTS .guideList p .guideImg {
	width: min(4vw,40px);
	flex-shrink: 0;
	margin: 0 10px 0 20px;
}
div#CONTENTS .guideList p .guideImg2 {
	margin-right: -10px;
}
div#CONTENTS .guideList p .guideImg3 {
	margin-left: 10px;
	margin-right: 0;
}
div#CONTENTS .introduction {
	padding: 100px 0;
}
div#CONTENTS .introduction .centerTxt {
	margin-bottom: 40px;
	color: #000;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}
div#CONTENTS .operations {
	padding: 100px 0;
	background: #F2F2F2;
}
div#CONTENTS .operations .centerTxt {
	margin-bottom: 59px;
	color: #000;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}
div#CONTENTS .operationsList {
	padding-top: 58px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	border-top: 1px solid #D9D9D9;
}
div#CONTENTS .operationsList > li {
	width: calc((100% - (20px * 2 + 1px)) / 3);
}
div#CONTENTS .operationsList .ttl {
	margin-bottom: 25px;
	font-size: 20px;
	padding-left: 18px;
	font-weight: 600;
	line-height: 1.5;
	position: relative;
}
div#CONTENTS .operationsList .ttl::before {
	width: 10px;  
	aspect-ratio: 1;
	background-color: #333;
	position: absolute;  
	top: 11px;
	left: 0;
	content: ""; 
	border-radius: 100%;
}
div#CONTENTS .operationsList{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
div#CONTENTS .operationsList .subList a {
	min-height: 60px;
	padding: 5px 35px 5px 18px;
	display: flex;
	align-items: center;
	color: #333;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	background: #FFF url(../img/icon01.png) no-repeat right 18px center;
	background-size: 9px auto;
	border-bottom: 1px solid #D9D9D9;
}
div#CONTENTS .operationsList .subList .introImg {
	width: 30px;
	margin: 6px 15px 0 0;
	flex-shrink: 0;
}

@media (hover: hover) {
	div#CONTENTS .operationsList .subList a:hover {
		opacity: 0.7;
	}
}

@media all and (max-width: 767px) {
	div#CONTENTS .guideBox {
		padding: 80px 0 55px;
	}
	div#CONTENTS .guideList {
		padding: 0;
		flex-direction: column;
		gap: 60px 0;
	}
	div#CONTENTS .guideList li {
		width: 100%;
	}
	div#CONTENTS .guideList .photo {
		width: 179px;
		margin-bottom: 12px;
	}
	div#CONTENTS .guideList .photo .num {
		top: -11px;
	}
	div#CONTENTS .guideList p {
		font-size: 22px;
		line-height: 1.5;
		justify-content: center;
	}
	div#CONTENTS .guideList p .guideImg {
		width: 33px;
		margin-left: 0;
		margin-right: 5px;
	}
	div#CONTENTS .guideList p .guideImg2 {
		margin-right: -12px;
		margin-top: 4px;
	}
	div#CONTENTS .guideList p .guideImg3 {
		width: 31px;
		margin-top: 5px;
	}
	div#CONTENTS .introduction {
		padding: 60px 0;
	}
	div#CONTENTS .introduction .centerTxt {
		font-size: 16px;
		line-height: 1.45;
	}
	div#CONTENTS .operations {
		padding: 60px 0;
	}
	div#CONTENTS .operations .centerTxt {
		margin-bottom: 38px;
		font-size: 16px;
	}
	div#CONTENTS .operationsList {
		padding-top: 40px;
		flex-direction: column;
		margin: 0 0 0 -2px;
		gap: 40px 0;
	}
	div#CONTENTS .operationsList > li {
		width: 100%;
	}
	div#CONTENTS .operationsList .ttl {
		font-size: 18px;
		margin-bottom: 14px;
	}
	div#CONTENTS .operationsList .ttl::before {
		top: 9px;
	}
	div#CONTENTS .operationsList .subList a {
		padding: 5px 32px 5px 15px;
		min-height: 51px;
		font-size: 16px;
		background-position: right 14px center;
	}
	div#CONTENTS .operationsList .subList .introImg {
		margin-right: 18px;
		width: 29px;
	}
}