/* -----------------------------------------------
= main
----------------------------------------------- */
.main {
	padding-top: 48px;
}
@media print, screen and (min-width: 768px) {/* PC */
.main {
	padding-top: 94px;
}
}/* @media */
/* -----------------------------------------------
= page-title
----------------------------------------------- */
.page-title {
	position: relative;
	margin: 0 15px 10px 0;
	border-top: 0.5px solid #808080;
	border-bottom: 0.5px solid #808080;
	font-family: var(--zen);
	font-size: calc(2rem / 1.6);
	font-weight: 400;
	letter-spacing: .12em;
}
.page-title::before {
	content: "";
	position: absolute;
	top: -48px;
	left: 33px;
	width: 0.5px;
	height: calc(100% + 168px);
	background: #808080;
}
.page-title span {
	display: block;
	position: relative;
	padding: 4px 10px 4px 76px;
}
.page-title span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 33px;
	width: 32px;
	height: 100%;
	background: var(--red);
}
@media print, screen and (min-width: 768px) {/* PC */
.page-title {
	margin: 0 0 25px;
	border-top: 1px solid #808080;
	border-bottom: 1px solid #808080;
	font-size: calc(4rem / 1.6);
}
.page-title::before {
	top: -94px;
	left: calc(50% - 610px);
	width: 1px;
	height: calc(100% + 298px);
}
.page-title span {
	max-width: 1107px;
	margin-inline: auto;
	padding: 7px 30px 7px 83px;
}
.page-title span::before {
	left: 0;
	width: 64px;
}
}/* @media */
/* -----------------------------------------------
= map
----------------------------------------------- */
.map {
	margin: 0 12px 90px 20px;
}
.map .note {
	margin: 0 0 35px 56px;
	font-size: calc(1.1rem / 1.6);
}
.map .list {
	position: relative;
	width: 343px;
	height: 473px;
	margin-inline: auto;
}
.map .list li {
	position: absolute;
	font-size: calc(1.5rem / 1.6);
	font-weight: 700;
}
.map .list li .btn {
	padding-right: 24px;
}
.map .list .misawa {
	top: 0;
	right: 0;
}
.map .list .ibaraki {
	top: 192px;
	right: 0;
}
.map .list .chiba {
	top: 236px;
	right: 0;
}
.map .list .gifu {
	top: 132px;
	left: 56px;
}
.map .list .osaka {
	top: 191px;
	left: 25px;
}
.map .list .okayama {
	top: 336px;
	right: 88px;
}
.map .list .ehime {
	top: 380px;
	right: 49px;
}
.map .list .ohita {
	top: 452px;
	left: 50px;
}
@media print, screen and (min-width: 768px) {/* PC */
.map {
	max-width: 1038px;
	margin: 0 auto 200px;
}
.map .note {
	margin: 0 0 90px;
	font-size: calc(1.6rem / 1.6);
}
.map .js-scrollable {
	overflow-y: hidden !important;
}
.map .list {
	width: 1038px;
	height: 900px;
}
.map .list li {
	font-size: calc(2.2rem / 1.6);
}
.map .list li .btn {
	padding-right: 38px;
}
.map .list .misawa {
	top: 204px;
}
.map .list .ibaraki {
	top: 380px;
}
.map .list .chiba {
	top: 486px;
	right: 86px ;
}
.map .list .gifu {
	top: 313px;
	left: 192px;
}
.map .list .osaka {
	top: 412px;
	left: 105px;
}
.map .list .okayama {
	top: 738px;
	right: 386px;
}
.map .list .ehime {
	top: 846px;
	right: 289px;
}
.map .list .ohita {
	top: 564px;
	left: 0;
}
}/* @media */
@media (hover:hover) {
.map .list button {
	transition: color .3s;
}
.map .list button:hover {
	color: var(--red);
}
}/* @media */
/* -----------------------------------------------
= modal
----------------------------------------------- */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
	z-index: 1000;
}
.modal.is-open {
	opacity: 1;
	pointer-events: auto;
}
.modal-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.modal-content {
	position: relative;
	width: 95%;
	max-width: 980px;
	max-height: calc(100svh - 135px);
	margin: 45px auto 90px;
	background: #fff;
	overflow-y: auto; 
	-webkit-overflow-scrolling: touch;
}
.modal h2 {
	padding-left: 9px;
	border-left: 16px solid var(--red);
	border-bottom: 0.5px solid #808080;
	font-size: calc(2rem / 1.6);
	font-weight: 700;
	letter-spacing: .1em;
}
.location-contents {
	padding: 20px 10px;
}
.modal h3 {
	margin-block: 20px 15px;
	color: var(--red);
	font-size: calc(1.6rem / 1.6);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0;
}
.modal .text {
	margin-bottom: 25px;
	font-size: calc(1.3rem / 1.6);
	line-height: calc(20 / 13);
}
.modal .related {
	margin-bottom: 25px;
	padding: 10px;
	background: linear-gradient(90deg,#ffffd7,#fafad7);
	text-align: center;
}
.modal .related h4 {
	margin-bottom: 15px;
	font-size: calc(1.4rem / 1.6);
	font-weight: 700;
}
.modal .related p {
	margin-bottom: 5px;
	font-size: calc(1.6rem / 1.6);
	font-weight: 700;
	letter-spacing: -.01em;
}
.modal .related p + p {
	margin-top: 15px;
}
.modal .related .agro {
	color: #396f00;
}
.modal .related .ict {
	color: #e56400;
}
.modal .related .essential {
	color: #1c41a3;
}
.modal .related .advanced {
	color: #e33e50;
}
.modal .related a {
	display: block;
	position: relative;
	padding: 2px 16px 2px 4px;
	color: #fff;
	font-size: calc(1.1rem / 1.6);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -.02em;
}
.modal .related a::before,
.modal .related a::after {
	content: "";
	position: absolute;
}
.modal .related a::before {
	top: 4px;
	right: 4px;
	width: 13px;
	height: 13px;
	background: #fff;
}
.modal .related a::after {
	top: 7px;
	right: 7px;
	width: 6px;
	height: 8px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.modal .related .agro a,
.modal .related .agro a::after {
	background: #779c50;
}
.modal .related .ict a,
.modal .related .ict a::after {
	background: #ed9550;
}
.modal .related .essential a,
.modal .related .essential a::after {
	background: #506db8;
}
.modal .related .advanced a,
.modal .related .advanced a::after {
	background: #e75c6b;
}
.modal .products {
	margin-bottom: 20px;
	padding-bottom: 20px;
	background: url(../../img/location/bg-dot.svg) repeat-x 0 100% / auto 1px;
	text-align: center;
}
.modal .products h4 {
	margin-bottom: 10px;
	padding-bottom: 5px;
	color: #f14954;
	background: url(../../img/location/bg-dot.svg) repeat-x 0 100% / auto 1px;
	font-size: calc(1.4rem / 1.6);
	font-weight: 700;
}
.modal .products p {
	margin-bottom: 10px;
	font-size: calc(1.4rem / 1.6);
	font-weight: 700;
	letter-spacing: .02em;
}
.modal .products .img {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
.modal .products .img figure {
	max-width: 154px;
}
.modal .products .img figcaption {
	margin-top: 5px;
	font-size: calc(1.2rem / 1.6);
}
.modal .products .img img {
	max-width: 154px;
}
.modal .products .img + p {
	margin-top: 20px;
}
.modal .detail-link {
	display: block;
	position: relative;
	margin-bottom: 20px;
	color: #f14954;
	border: 0.5px solid #f14954;
	font-size: calc(1.2rem / 1.6);
	text-align: center;
}
.modal .detail-link::before,
.modal .detail-link::after {
	content: "";
	position: absolute;
}
.modal .detail-link::before {
	top: 4px;
	right: 4px;
	width: 13px;
	height: 13px;
	background: #f14954;
}
.modal .detail-link::after {
	top: 7px;
	right: 7px;
	width: 6px;
	height: 8px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: #fff;
}
.modal .interview-link {
	display: flex;
	align-items: center;
	gap: 0 10px;
	position: relative;
	margin-bottom: 20px;
	padding: 8px;
	color: #f14954;
	background: #f5f5f0;
	border: 0.5px solid #f14954;
	font-size: calc(1.2rem / 1.6);
	letter-spacing: .04em;
}
.modal .interview-link::before,
.modal .interview-link::after {
	content: "";
	position: absolute;
}
.modal .interview-link::before {
	top: calc(50% - 6.5px);
	right: 4px;
	width: 13px;
	height: 13px;
	background: #f14954;
}
.modal .interview-link::after {
	top: calc(50% - 4 px);
	right: 7px;
	width: 6px;
	height: 8px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: #fff;
}
.modal .interview-link img {
	width: calc(118/ 315 * 100%);
}
.modal .interview-link p {
	flex: 1;
}
.modal-close {
	display: block;
	width: 100%;
	max-width: 75px;
	margin-inline: auto;
	border-bottom: 0.5px solid #000;
	font-size: calc(1.3rem / 1.6);
	text-align: center;
	letter-spacing: .04em;
}
@media print, screen and (min-width: 768px) {/* PC */
.modal-content {
	max-height: calc(100vh - 185px);
	margin: 85px auto 75px;
}
.modal .map-img {
	display: block;
	max-width: 594px;
	margin-inline: auto;
}
.modal h2 {
	padding: 6px 14px;
	border-left: 32px solid var(--red);
	border-bottom: 1px solid #808080;
	font-size: calc(3.2rem / 1.6);
	letter-spacing: .12em;
}
.location-contents {
	padding: 40px 30px 10px;
}
.modal h3 {
	margin-block: 40px 35px;
	font-size: calc(2.4rem / 1.6);
	line-height: calc(36 / 24);
	letter-spacing: .04em;
}
.modal .text {
	max-width: 670px;
	margin: 0 auto 42px;
	padding-inline: 30px;
	font-size: calc(1.6rem / 1.6);
	line-height: calc(28 / 16);
	letter-spacing: .1em;
}
.modal .related {
	max-width: 630px;
	margin: 0 auto 45px;
	padding: 15px 20px 35px;
}
.modal .related h4 {
	margin-bottom: 20px;
	font-size: calc(1.4rem / 1.6);
}
.modal .related p {
	margin-bottom: 15px;
	font-size: calc(2.4rem / 1.6);
	letter-spacing: 0;
}
.modal .related p + p {
	margin-top: 35px;
}
.modal .related a {
	padding: 5px 30px 5px 4px;
	font-size: calc(1.6rem / 1.6);
	line-height: 1.7;
}
.modal .related a::before {
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
}
.modal .related a::after {
	top: 10px;
	right: 10px;
	width: 12px;
	height: 14px;
}
.modal .products {
	max-width: 670px;
	margin: 0 auto 55px;
	padding-bottom: 33px;
	background-size: auto 2px;
}
.modal .products h4 {
	margin-bottom: 25px;
	padding-bottom: 10px;
	background-size: auto 2px;
	font-size: calc(1.8rem / 1.6);
}
.modal .products p {
	margin-bottom: 25px;
	font-size: calc(2rem / 1.6);
	letter-spacing: .06em;
}
.modal .products .img {
	gap: 24px;
}
.modal .products .img figure {
	max-width: 280px;
}
.modal .products .img figcaption {
	margin-top: 10px;
	font-size: calc(1.4rem / 1.6);
}
.modal .products .img img {
	max-width: 280px;
}
.modal .products .img + p {
	margin-top: 35px;
}
.modal .detail-link {
	max-width: 610px;
	margin: 0 auto 30px;
	padding: 6px 30px;
	border-width: 1px;
	font-size: calc(1.6rem / 1.6);
}
.modal .detail-link::before {
	top: calc(50% - 12px);
	right: 6px;
	width: 24px;
	height: 24px;
}
.modal .detail-link::after {
	top: calc(50% - 6.5px);
	right: 11px;
	width: 12px;
	height: 13px;
}
.modal .interview-link {
	gap: 0 40px;
	max-width: 654px;
	margin: 0 auto 30px;
	border-width: 1px;
	font-size: calc(1.6rem / 1.6);
}
.modal .interview-link::before {
	top: calc(50% - 12px);
	right: 6px;
	width: 24px;
	height: 24px;
}
.modal .interview-link::after {
	top: calc(50% - 6.5px);
	right: 11px;
	width: 12px;
	height: 13px;
}
.modal .interview-link img {
	width: 158px;
}

.modal-close {
	max-width: 100px;
	font-size: calc(1.8rem / 1.6);
}
}/* @media */
@media (hover:hover) {
.modal .related a,
.modal .related a::after {
	transition: background .3s;
}
.modal .related .agro a:hover,
.modal .related .agro a:hover::after {
	background: #396f00;
}
.modal .related .ict a:hover,
.modal .related .ict a:hover::after {
	background: #e56400;
}
.modal .related .essential a:hover,
.modal .related .essential a:hover::after {
	background: #1c41a3;
}
.modal .related .advanced a:hover,
.modal .related .advanced a:hover::after {
	background: #e33e50;
}
.modal .detail-link,
.modal .interview-link {
	transition: opacity .3s;
}
.modal .detail-link:hover,
.modal .interview-link:hover {
	opacity: .8;
}
}/* @media */