@charset "utf-8";

.main-wrap{
	position: relative;
	overflow: visible;
}
.main-wrap::after{
	content: "";
	display: block;
	clear: both;
}

.side_nav{
	position: sticky;
	top: 120px;
	float: left;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 220px;
	margin: 110px 0 40px 48px;
}
.side_nav a{
	display: flex;
	align-items: center;
	gap: 10px;
}
.side_nav a::before{
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #2682eb;
	flex: none;
}
.side_nav p{
	margin: 0;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 2px;
	color: #111111;
}
.side_nav a:hover{
	opacity: 1;
	transform: translateX(6px);
}
.co_block{padding: 110px 0;}
.co_block.gray{background: #eef2f4;}
.co_in{
	width: min(1000px, calc(100% - 360px));
	margin-left: 320px;
}
.co_in .en_title1{margin: 0;}
.sub_jp{
	margin: 6px 0 0;
	color: #003b7f;
}
.info_list{margin-top: 36px;}
.info_row{
	display: flex;
	gap: 20px;
	padding: 0 0 28px;
	margin-bottom: 20px;
	border-bottom: 1px solid #f2f2f2;
}
.info_row p{
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: #111111;
}
.info_row .label{width: 180px; flex: none;}
.info_row .value{flex: 1;}
.map_photo{
	position: relative;
	margin-top: 20px;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 1 / 0.6;
}
.map_photo iframe{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% + 5px);
	height: calc(100% + 5px);
}
.map_photo img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}
.office_head{
	margin: 36px 0 0;
	padding: 16px 20px;
	background: #bfd9e7;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.4;
}
.office_row,
.aff_row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 26px 36px;
	border: 1px solid #f0f0f0;
	background: #ffffff;
}
.aff_row.alt{background: rgba(255,255,255,0.55);}
.office_row p,
.aff_row p{margin: 0; color: #111111;}
.office_name,
.aff_name{width: 28%; font-size: 16px;}
.aff_name{font-size: 18px;}
.office_addr,
.aff_addr{width: 38%; font-size: 16px; line-height: 1.5;}
.tel_link{
	display: flex;
	align-items: center;
	gap: 8px;
	width: 190px;
	flex: none;
}
.tel_link img{width: 19px; height: auto; display: block;}
.tel_link p{
	font-family: "Questrial", sans-serif;
	font-size: 22px;
	line-height: 1.2;
	color: #111111;
}
.tel_link:hover{opacity: 1; transform: translateY(-2px);}
.site_btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 12px 18px;
	border-radius: 50px;
	background: #292d33;
	flex: none;
}
.site_btn p{
	margin: 0;
	color: #ffffff;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1.4;
}
.site_btn:hover{opacity: 1; background: #003b7f;}
.anchor{scroll-margin-top: 120px;}
@media screen and (max-width: 1280px){
	.co_in{width: calc(100% - 280px); margin-left: 240px;}
	.side_nav{margin-left: 16px;}
}
@media screen and (max-width: 1080px){
	.side_nav{
		position: static;
		float: none;
		width: min(1000px, calc(100% - 40px));
		margin: 36px auto 0;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 20px;
	}
	.co_in{
		width: min(1000px, calc(100% - 40px));
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 768px){
	.co_block{padding: 72px 0;}
}
@media screen and (max-width: 576px){
	.side_nav{
		position: static;
		width: min(680px, calc(100% - 40px));
		margin: 28px auto 0;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.co_in{
		width: min(680px, calc(100% - 40px));
		margin: 0 auto;
	}
	.info_row,
	.office_row,
	.aff_row{flex-direction: column; align-items: flex-start;}
	.info_row .label,
	.office_name,
	.aff_name,
	.office_addr,
	.aff_addr,
	.tel_link{width: 100%;}
	.office_head{font-size: 18px;}
	.tel_link p{font-size: 18px;}
	.office_row, .aff_row{
		padding: 26px 16px;
	}
}