/*==========================================================================

   mixin

===========================================================================*/
/*--------------------------------------------------------------------------
   overwrite
---------------------------------------------------------------------------*/
.g-header .gnav__item--07 > a::after {
	transform: scale(1, 1);
}

.m-page-header {
	background-image: url('../../img/access/bg_header.jpg');
}

@media only screen and (min-width: 768px) {
	.m-page-header {
		background-image: url('../../img/access/bg_header_pc.jpg');
	}
}

/*--------------------------------------------------------------------------
   common
---------------------------------------------------------------------------*/
/* xxx
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   #sec-intro
---------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) {
	.sec-intro {
		display: -ms-flexbox;
		display: flex;
	}
}

@media only screen and (min-width: 768px) {
	.sec-intro__txt {
		width: 50%;
		padding: 0 80px 0 44px;
	}
}

.sec-intro__map {
	width: 100%;
	height: 245px;
	margin-top: 58px;
}

@media only screen and (min-width: 768px) {
	.sec-intro__map {
		width: 50%;
		height: 430px;
	}
}

.sec-intro__map iframe {
	width: 100% !important;
	height: 100% !important;
}

.sec-intro .bus {
	position: relative;
	margin-top: 20px;
	background-color: #00523a;
	color: #fff;
}

@media only screen and (min-width: 768px) {
	.sec-intro .bus {
		margin-top: 50px;
	}
}

.sec-intro .bus::before,
.sec-intro .bus::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: url('../../img/common/obj_bus.png') no-repeat 50% 50%/cover;
	content: '';
}

@media only screen and (min-width: 768px) {
	.sec-intro .bus::before,
	.sec-intro .bus::after {
		top: 5px;
		left: 5px;
		width: 24px;
		height: 24px;
	}
}

.sec-intro .bus::after {
	left: inherit;
	right: 3px;
	transform: rotate(90deg);
}

@media only screen and (min-width: 768px) {
	.sec-intro .bus::after {
		right: 5px;
	}
}

.sec-intro .bus__body {
	padding: 16px 25px;
}

@media only screen and (min-width: 768px) {
	.sec-intro .bus__body {
		padding: 20px 26px 28px;
	}
}

.sec-intro .bus__body::before,
.sec-intro .bus__body::after {
	position: absolute;
	bottom: 3px;
	width: 18px;
	height: 18px;
	background: url('../../img/common/obj_bus.png') no-repeat 50% 50%/cover;
	content: '';
}

@media only screen and (min-width: 768px) {
	.sec-intro .bus__body::before,
	.sec-intro .bus__body::after {
		bottom: 5px;
		width: 24px;
		height: 24px;
	}
}

.sec-intro .bus__body::before {
	left: 3px;
	transform: rotate(-90deg);
}

@media only screen and (min-width: 768px) {
	.sec-intro .bus__body::before {
		left: 5px;
	}
}

.sec-intro .bus__body::after {
	right: 3px;
	transform: rotate(180deg);
}

@media only screen and (min-width: 768px) {
	.sec-intro .bus__body::after {
		right: 5px;
	}
}

.sec-intro .bus__hdg {
	position: relative;
	padding-bottom: 10px;
	border-bottom: 1px solid #fff;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
}

@media only screen and (min-width: 768px) {
	.sec-intro .bus__hdg {
		padding-bottom: 6px;
		font-size: 27px;
	}
}

.sec-intro .bus__txt {
	margin-top: 12px;
	text-align: center;
	font-size: 13px;
	line-height: 1.65;
}

@media only screen and (min-width: 768px) {
	.sec-intro .bus__txt {
		margin-top: 15px;
		text-align: center;
		font-size: 16px;
	}
}

/*--------------------------------------------------------------------------
   #sec-root
---------------------------------------------------------------------------*/
.sec-root {
	margin-top: 30px;
	padding-top: 52px;
	padding-bottom: 70px;
	background-color: #f4f8f7;
}

@media only screen and (min-width: 768px) {
	.sec-root {
		margin-top: 65px;
		padding-top: 100px;
		padding-bottom: 100px;
	}
}

@media only screen and (min-width: 768px) {
	.sec-root__inner {
		display: -ms-flexbox;
		display: flex;

		-ms-flex-pack: justify;
		justify-content: space-between;
	}
}

@media only screen and (min-width: 768px) {
	.sec-root__illust {
		width: 700px;
		padding: 0 35px;
	}
}

.sec-root__illust img {
	max-width: 100%;
	height: auto;
}

.sec-root__access {
	margin: 50px 15px 0;
	padding: 14px 18px 15px;
	border: 1px solid #c1c4c4;
	background-color: #fff;
}

@media only screen and (min-width: 768px) {
	.sec-root__access {
		width: 450px;
		margin-top: 0;
		margin-right: 19px;
		padding: 20px 24px;
	}
}

.sec-root__unit .unit-hdg {
	position: relative;
	padding-left: 1em;
	color: #00523a;
	font-size: 15px;
	font-weight: 600;
}

@media only screen and (min-width: 768px) {
	.sec-root__unit .unit-hdg {
		font-size: 20px;
	}
}

.sec-root__unit .unit-hdg::before {
	position: absolute;
	top: 5px;
	left: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: #00523a;
	line-height: 13px;
	content: '';
}

@media only screen and (min-width: 768px) {
	.sec-root__unit .unit-hdg::before {
		top: 8px;
		width: 16px;
		height: 16px;
		line-height: 16px;
	}
}

.sec-root__unit .unit-item {
	font-size: 12px;
	line-height: 1.66;
}

@media only screen and (min-width: 768px) {
	.sec-root__unit .unit-item {
		font-size: 16px;
		line-height: 1.687;
	}
}

.sec-root__unit .unit-item + .unit-hdg {
	margin-top: 12px;
}

@media only screen and (min-width: 768px) {
	.sec-root__unit .unit-item + .unit-hdg {
		margin-top: 20px;
	}
}

/*--------------------------------------------------------------------------
   #sec-outline
---------------------------------------------------------------------------*/
.sec-outline {
	padding-top: 65px;
}

@media only screen and (min-width: 768px) {
	.sec-outline {
		padding-top: 95px;
	}
}

.sec-outline + .sec-outline {
	padding-bottom: 70px;
}

@media only screen and (min-width: 768px) {
	.sec-outline + .sec-outline {
		padding-top: 95px;
		padding-bottom: 140px;
	}
}

.sec-outline__hdg {
	position: relative;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}

@media only screen and (min-width: 768px) {
	.sec-outline__hdg {
		font-size: 27px;
	}
}

.sec-outline__hdg::before {
	position: absolute;
	bottom: -11px;
	left: calc(50% - 9px);
	width: 17px;
	height: 1px;
	background-color: #1a1b1b;
	content: '';
}

@media only screen and (min-width: 768px) {
	.sec-outline__hdg::before {
		bottom: -15px;
		left: calc(50% - 12px);
		width: 23px;
	}
}

.sec-outline__hdg span {
	display: block;
	font-size: 12px;
}

@media only screen and (min-width: 768px) {
	.sec-outline__hdg span {
		font-size: 15px;
	}
}

.sec-outline__unit {
	margin-top: 40px;
}

@media only screen and (min-width: 768px) {
	.sec-outline__unit {
		display: -ms-flexbox;
		display: flex;
		margin-top: 55px;

		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}
}

.sec-outline__unit .unit-hdg,
.sec-outline__unit .unit-item {
	margin-top: 2px;
	padding: 10px 15px;
	font-size: 13px;
	line-height: 1.69;
}

@media only screen and (min-width: 768px) {
	.sec-outline__unit .unit-hdg,
	.sec-outline__unit .unit-item {
		margin-top: 0;
		padding: 0;
		font-size: 16px;
	}
}

.sec-outline__unit .unit-hdg {
	background-color: #f0f0f0;
}

@media only screen and (min-width: 768px) {
	.sec-outline__unit .unit-hdg {
		display: -ms-flexbox;
		display: flex;
		width: 210px;
		padding: 20px 0;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		text-align: center;

		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

.sec-outline__unit .unit-item {
	background-color: #f9f9f9;
}

@media only screen and (min-width: 768px) {
	.sec-outline__unit .unit-item {
		width: calc(100% - 210px);
		padding: 20px 14px;
		border-bottom: 2px solid #fff;
	}
}

.sec-outline__unit .unit-item span {
	border-bottom: 1px solid #0088da;
	color: #0088da;
}