@charset "UTF-8";
@import "_module";
//**************************
//1. general style
//2. header style
//3. main style
//4. footer style
//**************************

/* ====================================================================================
	1. general style
======================================================================================= */
html {
	font-size: 13px;
}

body {
	color: $black;
	@include baseSet;
	//@include opacity(0);
	//@include transition(all, .3s);
	/*
	&.on {
		@include opacity(1);
	}
	*/
	a {
		text-decoration: none;
		@include transition(all .3s);
	}
	$sprite:sprite-map("common/sprite/*.png", $spacing:10px, $position: 0%, $layout: vertical);
	@include sprites($sprite, true);
	video {
		width: 100%;
	}
	/*
	.inview {
		opacity: 0;
		@include transition(all 1s);
		&.on {
			opacity: 1;
		}
	}
	.inview-top {
		opacity: 0;
		@include transition(all 1s);
		@include transform(translateY(-50px));
		&.on {
			opacity: 1;
			@include transform(translateY(0));
		}
	}
	.inview-bottom {
		opacity: 0;
		@include transition(all 1s);
		@include transform(translateY(50px));
		&.on {
			opacity: 1;
			@include transform(translateY(0));
		}
	}
	.inview-right {
		opacity: 0;
		@include transition(all 1s);
		@include transform(translateX(50px));
		&.on {
			opacity: 1;
			@include transform(translateX(0));
		}
	}
	.inview-left {
		opacity: 0;
		@include transition(all 1s);
		@include transform(translateX(-50px));
		&.on {
			opacity: 1;
			@include transform(translateX(0));
		}
	}
	.inview-scale-big {
		opacity: 0;
		@include transition(all 1s);
		@include transform(scale(1.5));
		&.on {
			opacity: 1;
			@include transform(scale(1));
		}
	}
	.inview-scale-small {
		opacity: 0;
		@include transition(all 1s);
		@include transform(scale(0.5));
		&.on {
			opacity: 1;
			@include transform(scale(1));
		}
	}
	*/
}

button {
	@include baseSet;
	@include transition(all .3s);
	cursor: pointer;
}

/* toggle */
.toggle-wrapper {
	.toggle-trigger {
		color: $black;
		text-decoration: underline;
		display: block;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.toggle-content {
		display: none;
	}
}

@media screen and (min-width:0px) and ( max-width:640px) {
	.overlay {
		background: rgba(255,255,255,0.75);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		display: none;
	}
}


/* ====================================================================================
	2. header style
======================================================================================= */
// SP
@media screen and (min-width:0px) and ( max-width:640px) {
	header {
		width: 100%;
		background: $white;
		height: 50px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		h1 {
			display: none;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		nav {
			.logo-head {
				margin: 10px 0 0 9px;
				a {
					width: (213px / 2);
					height: (65px / 2);
					display: inline-block;
					.sprite-logo-head {
						background: url(../img/common/sp/logo.png) no-repeat 0 0;
						background-size: (190px / 2) auto;
					}
				}
				span {
					font-size: 10px;
					vertical-align: text-top;
				}
			}
			.h-icon-tel {
				background: $blue;
				width: 28px;
				height: 28px;
				display: block;
				@include border-radius(50%);
				text-align: center;
				position: absolute;
				top: 11px;
				right: 63px;
				img {
					width: 12px;
					height: 16px;
					margin-top: 6px;
					margin-left: 1px;
				}
			}
			// menu
			.menu-trigger,
			.menu-trigger span {
				display: inline-block;
				transition: all .4s;
				box-sizing: border-box;
			}
			.menu-trigger {
				position: absolute;
				width: 28px;
				height: 22px;
				z-index: 99999999;
				top: 14px;
				right: 14px;
				span {
					position: absolute;
					left: 0;
					width: 100%;
					height: 2px;
					background-color: $blue;
					border-radius: 2px;
					&:nth-of-type(1) {
						top: 0;
					}
					&:nth-of-type(2) {
						top: 10px;
					}
					&:nth-of-type(3) {
						bottom: 0;
					}
				}
			}
			.menu-trigger span:nth-of-type(1) {
				-webkit-animation: menu-bar01 .5s forwards;
				animation: menu-bar01 .5s forwards;
			}
			// @-webkit-keyframes menu-bar01 {
			// 	0% {
			// 		-webkit-transform: translateY(10px) rotate(45deg);
			// 	}
			// 	50% {
			// 		-webkit-transform: translateY(10px) rotate(0);
			// 	}
			// 	100% {
			// 		-webkit-transform: translateY(0) rotate(0);
			// 	}
			// }
			// @keyframes menu-bar01 {
			// 	0% {
			// 		transform: translateY(10px) rotate(45deg);
			// 	}
			// 	50% {
			// 		transform: translateY(10px) rotate(0);
			// 	}
			// 	100% {
			// 		transform: translateY(0) rotate(0);
			// 	}
			// }
			.menu-trigger span:nth-of-type(2) {
				// transition: all .25s .25s;
				opacity: 1;
			}
			.menu-trigger span:nth-of-type(3) {
				-webkit-animation: menu-bar02 .5s forwards;
				animation: menu-bar02 .5s forwards;
			}
			// @-webkit-keyframes menu-bar02 {
			// 	0% {
			// 		-webkit-transform: translateY(-10px) rotate(-45deg);
			// 	}
			// 	50% {
			// 		-webkit-transform: translateY(-10px) rotate(0);
			// 	}
			// 	100% {
			// 		-webkit-transform: translateY(0) rotate(0);
			// 	}
			// }
			// @keyframes menu-bar02 {
			// 	0% {
			// 		transform: translateY(-10px) rotate(-45deg);
			// 	}
			// 	50% {
			// 		transform: translateY(-10px) rotate(0);
			// 	}
			// 	100% {
			// 		transform: translateY(0) rotate(0);
			// 	}
			// }
			.menu-trigger.active span:nth-of-type(1) {
				-webkit-animation: active-menu-bar01 .5s forwards;
				animation: active-menu-bar01 .5s forwards;
			}
			@-webkit-keyframes active-menu-bar01 {
				0% {
					-webkit-transform: translateY(0) rotate(0);
				}
				50% {
					-webkit-transform: translateY(10px) rotate(0);
				}
				100% {
					-webkit-transform: translateY(10px) rotate(45deg);
				}
			}
			@keyframes active-menu-bar01 {
				0% {
					transform: translateY(0) rotate(0);
				}
				50% {
					transform: translateY(10px) rotate(0);
				}
				100% {
					transform: translateY(10px) rotate(45deg);
				}
			}
			.menu-trigger.active span:nth-of-type(2) {
				opacity: 0;
			}
			.menu-trigger.active span:nth-of-type(3) {
				-webkit-animation: active-menu-bar03 .5s forwards;
				animation: active-menu-bar03 .5s forwards;
			}
			@-webkit-keyframes active-menu-bar03 {
				0% {
					-webkit-transform: translateY(0) rotate(0);
				}
				50% {
					-webkit-transform: translateY(-10px) rotate(0);
				}
				100% {
					-webkit-transform: translateY(-10px) rotate(-45deg);
				}
			}
			@keyframes active-menu-bar03 {
				0% {
					transform: translateY(0) rotate(0);
				}
				50% {
					transform: translateY(-10px) rotate(0);
				}
				100% {
					transform: translateY(-10px) rotate(-45deg);
				}
			}
			// g-navi
			.g-navi {
				background: $blue;
				width: 220px;
				height: 100%;
				box-sizing: border-box;
				margin-top: 0;
				position: fixed;
				top: 50px;
				right: -220px;
				z-index: 99999;
				overflow: scroll;
				overflow-x: hidden;
				@include opacity(0);
				@include transition(all, .6s);
				&.on {
					right: 0;
					@include opacity(1);
				}
				.tel-head {
					display: none;
				}
				.g-navi-inner {
					.nav-shadow {
						background: url(../img/common/sp/nav-shadow.png) repeat-x 0 0;
						background-size: auto 60px;
						width: 100%;
						height: 60px;
						display: block;
						content: "";
						position: absolute;
						top: 0;
						right: 0;
						&:after {
							background: url(../img/common/sp/arrow-nav-bottom.png) no-repeat 0 0;
							background-size: 19px 10px;
							width: 19px;
							height: 10px;
							display: block;
							content: "";
							position: absolute;
							bottom: 10px;
							left: 50%;
							margin-left: -10px;
						}
					}
				}
				ul {
					width: 100%;
					li {
						@include remSize(14);
						line-height: 50px;
						box-sizing: border-box;
						border-bottom: solid 1px #cfcfe4;
						a {
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							color: $white;
							padding-left: 18px;
							font-weight: bold;
							display: block;
						}
						.navi-service {
							.tl,
							.img {
								display: none;
							}
							ul {
								border-top: solid 1px #228bc3;
							}
							li {
								background: #006aa2;
								@include remSize(12);
								border-bottom: solid 1px #228bc3;
								padding-left: 1em;
								position: relative;
								&:before {
									content: "-";
									width: 1em;
									height: 1em;
									display: block;
									position: absolute;
									top: 0;
									left: 22px;
									color: $white;
								}
								&:nth-child(5){
									a {
										line-height: 1.3em;
										height: 55px;
										display: table-cell;
										vertical-align: middle;
									}
								}
							}
						}
					}
				}
				.link-contact {
					background: #60AB0F;
					@include remSize(14);
					line-height: 50px;
					margin-bottom: 50px;
					a {
						color: $white;
						padding-left: 18px;
					}
				}
			}
		}
	}
	.sp-head {
		margin-top: 40px;
	}
}
.device-sp {
	header {
		width: 100%;
		background: $white;
		height: 50px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		nav {
			.logo-head {
				margin: 11px 0 0 10px;
				a {
					width: 80px;
					height: 28px;
					display: block;
					float: left;
					.sprite-logo-head {
						background: url(../img/common/sp/logo.png) no-repeat 0 0;
						background-size: (160px / 2) auto;
					}
				}
				span {
					display: block;
					float: left;
					font-size: 10px;
					margin-top: 28px - 13px;
					margin-left: 11px;
				}
			}
			.logo-head:after { content: ""; display: block; clear: both; }
			.h-icon-tel.sp {
				background: $blue;
				width: 28px;
				height: 28px;
				display: block;
				@include border-radius(50%);
				text-align: center;
				position: absolute;
				top: 11px;
				right: 63px;
				img {
					width: 12px;
					height: 16px;
					margin-top: 6px;
					margin-left: 1px;
				}
			}
			// menu
			.menu-trigger,
			.menu-trigger span {
				display: inline-block;
				transition: all .4s;
				box-sizing: border-box;
			}
			.menu-trigger {
				position: absolute;
				width: 28px;
				height: 22px;
				z-index: 99999999;
				top: 14px;
				right: 14px;
				span {
					position: absolute;
					left: 0;
					width: 100%;
					height: 2px;
					background-color: $blue;
					border-radius: 2px;
					&:nth-of-type(1) {
						top: 0;
					}
					&:nth-of-type(2) {
						top: 10px;
					}
					&:nth-of-type(3) {
						bottom: 0;
					}
				}
			}
			.menu-trigger span:nth-of-type(1) {
				-webkit-animation: menu-bar01 .5s forwards;
				animation: menu-bar01 .5s forwards;
			}
			.menu-trigger span:nth-of-type(2) {
				// transition: all .25s .25s;
				opacity: 1;
			}
			.menu-trigger span:nth-of-type(3) {
				-webkit-animation: menu-bar02 .5s forwards;
				animation: menu-bar02 .5s forwards;
			}
			.menu-trigger.active span:nth-of-type(1) {
				-webkit-animation: active-menu-bar01 .5s forwards;
				animation: active-menu-bar01 .5s forwards;
			}
			@-webkit-keyframes active-menu-bar01 {
				0% {
					-webkit-transform: translateY(0) rotate(0);
				}
				50% {
					-webkit-transform: translateY(10px) rotate(0);
				}
				100% {
					-webkit-transform: translateY(10px) rotate(45deg);
				}
			}
			@keyframes active-menu-bar01 {
				0% {
					transform: translateY(0) rotate(0);
				}
				50% {
					transform: translateY(10px) rotate(0);
				}
				100% {
					transform: translateY(10px) rotate(45deg);
				}
			}
			.menu-trigger.active span:nth-of-type(2) {
				opacity: 0;
			}
			.menu-trigger.active span:nth-of-type(3) {
				-webkit-animation: active-menu-bar03 .5s forwards;
				animation: active-menu-bar03 .5s forwards;
			}
			@-webkit-keyframes active-menu-bar03 {
				0% {
					-webkit-transform: translateY(0) rotate(0);
				}
				50% {
					-webkit-transform: translateY(-10px) rotate(0);
				}
				100% {
					-webkit-transform: translateY(-10px) rotate(-45deg);
				}
			}
			@keyframes active-menu-bar03 {
				0% {
					transform: translateY(0) rotate(0);
				}
				50% {
					transform: translateY(-10px) rotate(0);
				}
				100% {
					transform: translateY(-10px) rotate(-45deg);
				}
			}
			// g-navi
			.g-navi {
				background: $blue;
				width: 220px;
				height: 100%;
				box-sizing: border-box;
				margin-top: 0;
				position: fixed;
				top: 50px;
				right: -220px;
				z-index: 99999;
				overflow: scroll;
				overflow-x: hidden;
				@include opacity(0);
				@include transition(all, .6s);
				&.on {
					right: 0;
					@include opacity(1);
				}
				.tel-head {
					display: none;
				}
				ul {
					width: 100%;
					li {
						@include remSize(14);
						line-height: 50px;
						box-sizing: border-box;
						border-bottom: solid 1px #cfcfe4;
						a {
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							color: $white;
							padding-left: 18px;
							font-weight: bold;
							display: block;
						}
						.navi-service {
							.tl,
							.img {
								display: none;
							}
							ul {
								border-top: solid 1px #228bc3;
							}
							li {
								background: #006aa2;
								@include remSize(12);
								border-bottom: solid 1px #228bc3;
								padding-left: 1em;
								position: relative;
								&:before {
									content: "-";
									width: 1em;
									height: 1em;
									display: block;
									position: absolute;
									top: 0;
									left: 22px;
									color: $white;
								}
								&:nth-child(5){
									a {
										line-height: 1.3em;
										height: 55px;
										display: table-cell;
										vertical-align: middle;
									}
								}
							}
						}
					}
				}
				.link-contact {
					background: #60AB0F;
					@include remSize(14);
					line-height: 50px;
					a {
						color: $white;
						padding-left: 18px;
						letter-spacing: 0.1em;
					}
				}
			}
		}
	}
}

// PC
@media screen and (min-width:641px)  {
	header {
		width: 100%;
		min-width: 1030px;
		box-sizing: border-box;
		background: $white;
		position: fixed;
		z-index: 10000;
		h1 {
			background: $blue;
			font-size: 10px;
			color: $white;
			padding: 6px 15px;
			letter-spacing: 1px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		nav {
			@include clearfix;
			.logo-head {
				position: relative;
				float: left;
				width: 310px;
				margin: 9px 0 15px 16px;
				span {
					position: absolute;
					left: 190px;
					top: 22px;
					font-size: 10px;
					white-space: nowrap;
				}
			}
			.g-navi {
				float: right;
				text-align: center;
				>ul {
					@include clearfix;
					display: inline-block;
					text-align: left;
					vertical-align: top;
					>li {
						float: left;
						padding: 0 10px;
						>a {
							color: $blue;
							font-weight: bold;
							text-decoration: none;
							display: block;
							padding: 24px 0 11px 0;
							&:after {
								width: 0;
								height: 3px;
								display: block;
								content: '';
								text-align: center;
								margin: 8px auto 0 auto;
								background: $blue;
								@include transition(all .3s);
							}
							&:hover {
								&:after {
									width: 100%;
								}
							}
						}
						&.current {
							>a {
								&:after {
									width: 100%;
								}
							}
						}
						.navi-service {
							width: 100%;
							// height: 240px;
							padding: 30px 0;
							box-sizing: border-box;
							position: fixed;
							top: 80px;
							left: 0;
							background: $blue;
							z-index: 10000;
							visibility: hidden;
							opacity: 0;
							@include transition(all .3s);
							@include box-shadow(0px 3px 3px rgba(0, 0, 0, 0.15));
							.wrap {
								width: 100%;
								min-width: 960px;
								max-width: 1720px;
								padding: 0 30px;
								margin: 0 auto;
								box-sizing: border-box;
								@include clearfix;
								.inner {
									width: 84%;
									@include clearfix;
									float: left;
									border-right: 1px solid rgba(207, 207, 228, 0.2);
									padding-right: 15px;
									box-sizing: border-box;
									.tl {
										color: $white;
										font-weight: bold;
										font-size: percentage(18 / $font-size-base);
										padding: 0 0 21px 2px;
									}
									ul {
										width: 100%;
										box-sizing: border-box;
										@include clearfix;
										li {
											width: 20%;
											float: left;
											padding-right: 15px;
											box-sizing: border-box;
											.img {
												background: $blue;
												width: 100%;
												overflow: hidden;
												margin-bottom: 8px;
												a {
													position: relative;
													display: block;
													img {
														height: auto;
														width: 100%;
														@include opacity(1);
														@include transition(all ,.3s);
													}
													&:after {
														background: rgba(255,255,255,0.3);
														width: 100%;
														height: 98.5%;
														display: block;
														content: "";
														position: absolute;
														top: 0;
														left: 0;
														@include opacity(0);
														@include transition(all, .3s);
													}
													&:hover {
														&:after {
															@include opacity(1);
														}
													}
													// &:hover {
													// 	img {
													// 		@include opacity(0.8);
													// 	}
													// }
												}
											}
											.txt {
												padding-left: 2px;
												a {
													color: $white;
													font-weight: bold;
													line-height: (17 / 13);
												}
											}
										}
									}
									&.last {
										width: 16%;
										border-right: none;
										padding-left: 30px;
										padding-right: 0;
										box-sizing: border-box;
										.tl {
											padding-top: 8px;
											padding-bottom: 17px;
											font-size: percentage(13 / $font-size-base);
											letter-spacing: -0.05em;
										}
										ul {
											padding-right: 0;
											li {
												width: 100%;
												padding-right: 0;
											}
										}
									}
								}
							}
							.balloon {
								width: 0;
								height: 0;
								content: "";
								margin-left: -10px;
								position: absolute;
								top: -8px;
								left: 448px;
								z-index: 100;
								border-bottom: 9px solid $blue;
								border-left: 7px solid transparent;
								border-right: 7px solid transparent;
							}
						}
					}
					.link-service {
						@include transition(all .3s);
						&:hover {
							.navi-service {
								visibility: visible;
								opacity: 1;
							}
							> a {
								&:after {
									width: 100%;
								}
							}
						}
					}
				}
				.tel-head {
					display: inline-block;
					text-align: left;
					margin: 13px 21px 0 0;
					vertical-align: top;
					@include remSize(21);
					color: $blue;
					font-weight: bold;
					li {
						float: none;
						padding: 0px;
						a {
							padding: 0;
							pointer-events: none;
							&:after {
								content: none;
							}
						}
					}
					.time {
						@include remSize(10);
						letter-spacing: 0.5px;
						margin-top: 3px;
					}
				}
				.link-contact {
					display: inline-block;
					vertical-align: top;
					background: $green;
					width: 106px;
					height: 37px;
					overflow: hidden;
					text-align: center;
					padding: 0;
					margin: 11px 20px 0 10px;
					@include transition(all .3s);
					&.orange {
						background: #ff5a00;
					}
					&.orange:hover {
						background: #e35000;
					}
					&:hover {
						background: $green-hover;
					}
					a {
						color: $white;
						font-weight: bold;
						display: block;
						text-decoration: none;
						letter-spacing: 0.1em;
						padding-top: 12px;
						&:hover {
							&:after {
								display: none;
							}
						}
					}
				}
			}
		}
	}
}


/* ====================================================================================
	3. main style
======================================================================================= */
.info-closure {
	background-color: #f4f4f4;
	line-height: 1.6;
	padding: 2em 0;
	margin-bottom: 2em;
	.heading {
		@include remSize(17);
		text-align: center;
		font-weight: normal;
		color: #F44360;
		padding-bottom: .8em;
	}
	p {
		@include remSize(14);
		padding: 0 15px;
	}
}
// SP
@media screen and (min-width:0px) and ( max-width:640px) {
	body {
		-webkit-text-size-adjust: 100%;
		.sprite {
			&.sprite-icon-btn-arrow-blue {
				background: url(../img/common/sp/btn-arrow-white.png) no-repeat 0 0px;
				background-size: 7px 12px;
				width: 7px;
				height: 12px;
				position: relative;
			}
			&.sprite-icon-double-circle {
				background: url(../img/common/sp/icon-circle_double.png) no-repeat center 0;
				background-size: 20px 20px;
				width: 26px;
				height: 20px;
			}
			&.sprite-icon-single-circle {
				background: url(../img/common/sp/icon-circle_single.png) no-repeat center 0;
				background-size: 20px 20px;
				width: 26px;
				height: 20px;
			}
			&.sprite-icon-triangle {
				background: url(../img/common/sp/icon-triangle.png) no-repeat center center;
				background-size: 18px 17px;
				width: 18px;
				height: 20px;
			}
		}
		.btn-white {
			.sprite {
				&.sprite-icon-btn-arrow-blue {
					background: url(../img/common/sp/btn-arrow-blue.png) no-repeat 0 0px;
					background-size: 7px 12px;
					width: 7px;
					height: 12px;
					position: relative;
				}
			}
		}
		.sprite-icon-pdf {
			width: 18px;
			height: 20px;
		}
		.sns-box {
			.sprite {
				&.sprite-icon-pdf {
					background: url(../img/common/sp/icon-pdf.png) no-repeat 0 0;
					background-size: 18px 20px;
					margin-right: 8px;
					margin-top: -3px;
				}
			}
			ul {
				li {
					.sprite {
						width: 27px;
						height: 27px;
						&.sprite-icon-fb {
							background: url(../img/common/sp/icon-sns_fb.png) no-repeat 0 0;
							background-size: 27px 27px;
						}
						&.sprite-icon-tw {
							background: url(../img/common/sp/icon-sns_tw.png) no-repeat 0 0;
							background-size: 27px 27px;
						}
						&.sprite-icon-gp {
							background: url(../img/common/sp/icon-sns_gp.png) no-repeat 0 0;
							background-size: 27px 27px;
						}
						&.sprite-icon-in {
							background: url(../img/common/sp/icon-sns_li.png) no-repeat 0 0;
							background-size: 27px 27px;
						}
					}
				}
			}
		}
		.sprite.sprite-icon-more {
			background: url(../img/common/sp/icon-more.png) no-repeat 0 0;
			background-size: 18px 18px;
			width: 18px;
			height: 18px;
			margin-left: -8px;
		}
		.sprite.sprite-icon-more-on {
			background: url(../img/common/sp/icon-more.png) no-repeat 0 0;
			background-size: 18px 18px;
			width: 18px;
			height: 18px;
			margin-left: -8px;
		}
		.sprite.sprite-btn-more-link {
			background: url(../img/common/sp/icon-window.png) no-repeat 0 0;
			background-size: 16px 16px;
			width: 16px;
			height: 16px;
			margin-left: -7px;
		}
		.sprite.sprite-btn-more-link-on {
			background: url(../img/common/sp/icon-window.png) no-repeat 0 0;
			background-size: 16px 16px;
			width: 16px;
			height: 16px;
			margin-left: -7px;
		}
		.sprite.sprite-icon-arrow-up {
			background: url(../img/common/sp/icon-btn_up.png) no-repeat 0 0;
			background-size: 34px 34px;
			width: 34px;
			height: 34px;
			&.sprite-icon-dot {
				background: url(../img/common/sp/icon-dot.png) no-repeat 0 0;
				background-size: 4px 4px;
				width: 4px;
				height: 4px;
				margin: -1px 5px 0;
			}
		}
		.sprite.sprite-icon-arrow-down {
			background: url(../img/common/sp/icon-btn_down.png) no-repeat 0 0;
			background-size: 34px 34px;
			width: 34px;
			height: 34px;
			&.sprite-icon-dot {
				background: url(../img/common/sp/icon-dot.png) no-repeat 0 0;
				background-size: 4px 4px;
				width: 4px;
				height: 4px;
				margin: -1px 5px 0;
			}
		}
		.sprite.sprite-tel-contact-banner {
			background: url(../img/common/sp/sprite-tel-contact-banner.png) no-repeat 0 0;
			background-size: 21px 27px;
			width: 21px;
			height: 27px;
			// margin-left: -16px;
		}
		.sprite.sprite-icon-mail {
			background: url(../img/common/sp/icon-mail.png) no-repeat 0 0;
			background-size: 25px 17px;
			width: 27px;
			height: 17px;
			margin-right: 7px;
			position: relative;
			top: -1px;
		}
		.point-box {
			li {
				.sprite-icon-scale,
				.sprite-icon-range,
				.sprite-icon-responsible {
					width: 91px;
					height: 91px;
				}
				&:first-child {
					.sprite {
						background: url(../img/common/sp/icon-dummy_01.png) no-repeat center center;
						background-size: 91px 91px;
					}
				}
				&:nth-child(2) {
					.sprite {
						background: url(../img/common/sp/icon-dummy_02.png) no-repeat center center;
						background-size: 91px 91px;
					}
				}
				&:nth-child(3) {
					.sprite {
						background: url(../img/common/sp/icon-dummy_03.png) no-repeat center center;
						background-size: 91px 91px;
					}
				}
			}
		}
	}
	main {
		width: 100%;
		overflow: hidden;
		padding-top: 50px;
		.breadcrumb {
			padding: 8px 10px 0 10px;
			@include remSize(12);
			margin-bottom: 30px;
			word-wrap: break-word;
			overflow: scroll;
			ul {
				// @include clearfix;
				white-space: nowrap;
				li {
					// float: left;
					display: inline;
					margin-right: 5px;
					line-height: 1.7;
					white-space: nowrap;
					&:after {
						content: '/';
						margin-left: 5px;
					}
					&:last-child {
						&:after {
							content: '';
							margin-left: 0;
						}
					}
					a {
						color: $blue;
						padding-bottom: 1px;
						border-bottom: 1px solid $blue;
						// &.hover {
						// 	border-bottom: 1px solid $white;
						// }
					}
				}
			}
		}
		.tl-main {
			@include remSize(68 / 2);
			@include gothic-bbb;
			line-height: (88 / 68);
			color: $blue;
			letter-spacing: -0.05em;
			text-align: center;
			margin-top: -4px;
			margin-bottom: 16px;
			display: block;
			.sp-small {
				@include remSize(20);
				line-height: 1.3;
				display: block;
				margin-top: 10px;
			}
		}
		.img-main {
			display: none;
		}
		.img-cover {
			width: 100%;
			margin-bottom: 12px;
			img {
				width: 100%;
				height: auto;
			}
		}
		.txt-main {
			@include remSize(15);
			line-height: 1.7;
			margin-bottom: 31px;
			padding: 0 15px;
		}
		.link-download {
			width: 250px;
			height: 50px;
			overflow: hidden;
			text-align: center;
			margin: 0 auto;
			a {
				width: 100%;
				height: 100%;
				display: block;
				color: $white;
				padding-top: 18px;
				@include remSize(15);
				font-weight: bold;
				background: $turquoise;
				box-sizing: border-box;
				.sprite {
					background: url(../img/common/sp/icon-pdf.png) no-repeat 0 0;
					background-size: 18px 20px;
					margin-top: -3px;
					margin-right: 8px;
				}
				&.hover {
					background: $turquoise-hover;
				}
			}
		}
		.link-downloadbtm {
			width: 250px;
			height: 50px;
			overflow: hidden;
			text-align: center;
			margin: 0 auto;
			a {
				width: 100%;
				height: 100%;
				display: block;
				color: $white;
				padding-top: 18px;
				@include remSize(15);
				font-weight: bold;
				background: $turquoise;
				box-sizing: border-box;
				.sprite {
					background: url(../img/common/sp/icon-pdf.png) no-repeat 0 0;
					background-size: 18px 20px;
					margin-top: -3px;
					margin-right: 8px;
				}
				&.hover {
					background: $turquoise-hover;
				}
			}
		}
		.tab-box {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			margin-top: 50px;
			margin-bottom: 36px;
			ul {
				border: solid 2px $blue;
				@include remSize(14);
				font-weight: bold;
				@include clearfix;
				li {
					a {
						width: 50%;
						float: left;
						border-bottom: 2px solid $blue;
						padding: 15px 0 16px;
						box-sizing: border-box;
						text-align: center;
						color: $blue;
						display: block;
						// &.hover {
						// 	background: $blue;
						// 	color: $white;
						// }
					}
					&:nth-child(odd) {
						a {
							border-right: 2px solid $blue;
						}
					}
					&:last-child {
						a {
							border-bottom: none;
						}
					}
					&.on {
						a {
							background: $blue;
							color: $white;
						}
					}
				}
			}
		}
		.point-box {
			margin-bottom: 37px;
			.tl {
				@include remSize(48 / 2);
				line-height: (64 / 48);
				color: $blue;
				font-weight: bold;
				text-align: center;
				padding: 0 15px;
				margin-bottom: 16px;
			}
			ul {
				text-align: center;
				letter-spacing: -.40em;
				width: 100%;
			}
			li {
				display: inline-block;
				letter-spacing: normal;
				width: 50%;
				text-align: center;
				margin-bottom: 20px;
				a {
					dl {
						position: relative;
					}
					.img {
						background: $t-blue;
						width: 91px;
						height: 91px;
						display: block;
						@include border-radius(50%);
						overflow: hidden;
						margin: 0 auto 11px;
					}
					.txt {
						@include remSize(13);
						line-height: (39 / 26);
						font-weight: bold;
						color: $blue;
						display: inline;
						position: relative;
						left: -3px;
						.sprite-icon-arrow-right {
							background: url(../img/common/sp/arrow-right.png) no-repeat 0 0;
							background-size: 13px auto;
							width: 13px;
							height: 12px;
							display: block;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
				}
				&:first-child {
					a {
						.txt {
							.sprite-icon-arrow-right {
								right: 0;
								top: 0;
							}
						}
					}
				}
				&:nth-child(2) {
					a {
						.txt {
							.sprite-icon-arrow-right {
								right: 0;
								top: 0;
							}
						}
					}
				}
				&:nth-child(3) {
					a {
						.txt {
							.sprite-icon-arrow-right {
								right: 0;
								top: 0;
							}
						}
					}
				}
			}
		}
		.tl-box {
			width: 100%;
			margin: 0 auto 13px;
			line-height: 1.3;
			padding: 0 15px;
			box-sizing: border-box;
			text-align: center;
			position: relative;
			&:after {
				width: 100%;
				height: 1px;
				background: $l-purple;
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				margin-top: -2px;
			}
			&:before {
				background: $white;
				width: 15px;
				height: 55px;
				display: block;
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				z-index: 10;
			}
			.tl {
				color: $blue;
				@include remSize(56 / 2);
				font-weight: bold;
				display: inline-block;
				background: $white;
				padding: 0 12px;
				margin-bottom: 5px;
				position: relative;
				z-index: 10;
				font-weight: bold;
			}
			.stl {
				@include remSize(24);
				line-height: (64 / 48);
				font-weight: bold;
				color: $blue;
				margin-top: 13px;
				margin-bottom: 3px;
			}
		}
		.txt-img-l-box {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			margin-bottom: 47px;
			.img-area {
				width: 100%;
				margin-bottom: 20px;
				img {
					width: 100%;
					height: auto;
				}
			}
			.txt-area {
				.tl {
					@include remSize(48 / 2);
					line-height: (62 / 48);
					font-weight: bold;
					color: $blue;
					margin-bottom: 16px;
				}
				.txt {
					@include remSize(15);
					line-height: 1.7;
					margin-left: 2px;
				}
			}
		}
		.txt-img-m-box,
		.txt-img-s-box {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			ul {
				width: 100%;
			}
			li {
				width: 100%;
				margin-bottom: 47px;
				.img {
					width: 100%;
					margin-bottom: 16px;
					img {
						width: 100%;
						height: auto;
					}
				}
				.tl {
					@include remSize(20);
					line-height: 1.3;
					font-weight: bold;
					color: $blue;
					margin-bottom: 7px;
				}
				.txt {
					@include remSize(15);
					line-height: 1.7;
					margin-left: 2px;
				}
			}
		}
		.btn-blue {
			width: 250px;
			height: 50px;
			margin: 0 auto;
			display: inline-block;
			overflow: hidden;
			text-align: center;
			a {
				color: $white;
				font-size: percentage(15 / $font-size-base);
				font-weight: bold;
				width: 100%;
				height: 100%;
				display: block;
				padding-top: 15px;
				box-sizing: border-box;
				border: 2px solid $blue;
				background: $blue;
				.sprite {
					margin-right: 7px;
					vertical-align: 0;
				}
				// &.hover {
				// 	color: $blue;
				// 	background: $white;
				// }
			}
		}
		.btn-white {
			width: 250px;
			height: 50px;
			margin: 0 auto;
			display: inline-block;
			overflow: hidden;
			text-align: center;
			a {
				color: $blue;
				font-size: percentage(15 / $font-size-base);
				font-weight: bold;
				width: 100%;
				height: 100%;
				display: block;
				padding-top: 15px;
				box-sizing: border-box;
				border: 2px solid $blue;
				background: $white;
				.sprite {
					margin-right: 7px;
					vertical-align: 0;
				}
				// &.hover {
				// 	color: $white;
				// 	background: $blue;
				// }
			}
		}
		.table-area {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			overflow: scroll;
			margin-bottom: 40px;
			height: auto !important;
		}
		.table {
			width: 514px;
			padding-right: 15px;
			thead {
				th {
					color: $blue;
					font-weight: bold;
					padding: 21px 5px;
					vertical-align: middle;
					border-top: 1px solid $l-gray;
					border-right: 1px solid $l-gray;
					width: 87px;
					@include remSize(11);
					line-height: (29 / 22);
					&:nth-child(even) {
						background: #edebfa;
					}
					&:nth-child(odd) {
						background: #dfddf5;
					}
					&.head {
						width: 79px;
						border: none;
						border-right: 1px solid $l-gray;
						background: none;
					}
				}
			}
			tbody {
				border-left: 1px solid $l-gray;
				border-right: 1px solid $l-gray;
				border-bottom: 1px solid $l-gray;
				tr {
					&:nth-child(even) {
						background: #f4f4f4;
						.head {
							background: #dce5f8;
						}
					}
					&:nth-child(odd) {
						background: $white;
						.head {
							background: #edf3ff;
						}
					}
					&:first-child {
						.head {
							border-top: 1px solid $l-gray;
						}
					}
				}
				td {
					border-left: 1px solid $l-gray;
					text-align: center;
					vertical-align: middle;
					padding: 15px 0 10px;
					box-sizing: border-box;
					&.head {
						@include remSize(11);
						width: 79px;
						color: $blue;
						font-weight: bold;
						padding: 10px;
						box-sizing: border-box;
						line-height: (29 / 22);
						text-align: center;
						border-left: none;
					}
					.sprite {
						width: 26px;
						margin: 0 auto;
						display: block;
					}
					span {
						@include remSize(11);
						line-height: (29 / 22);
						margin-top: 5px;
						display: inline-block;
						span {
							margin-top: 0;
						}
					}
				}
			}
			&.type {
				margin-bottom: 15px;
				th {
					border-bottom: 1px solid $l-gray;
					&.head {
						border-top: 1px solid $l-gray;
						background: #dce5f8;
						&:first-child {
							width: 120px;
							box-sizing: border-box;
							border-left: 1px solid $l-gray;
						}
						&:nth-child(2) {
							width: 205px;
							box-sizing: border-box;
							border-bottom: 1px solid $l-gray;
						}
					}
					.sprite {
						margin-right: 7px;
						vertical-align: -3px;
					}
					span {
						border-bottom: 1px solid $blue;
					}
				}
				td {
					&.head {
						background: #dce5f8 !important;
					}
					&.s-head {
						background: #f7faff;
						color: $blue;
						font-size: percentage(13 / $font-size-base);
						font-weight: bold;
						text-align: left;
						padding-left: 18px;
						&.even {
							background: #e6ecf7;
						}
						span {
							width: 18px;
							padding: 2px 0;
							display: inline-block;
							background: $blue;
							color: $white;
							text-align: center;
							font-size: percentage(11 / $font-size-base);
							font-weight: bold;
							vertical-align: 0px;
							margin-right: 8px;
						}
					}
					.sprite-icon-vatu {
						width: 16px;
					}
				}
				tr {
					&.last {
						td {
							padding: 12px 0;
							border-top: 1px solid $l-gray;
							background: #f1f7e6 !important;
						}
					}
					&.part {
						border-bottom: 1px solid $l-gray;
					}
				}
			}
		}
		.table-description {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			color: #666;
			text-align: left;
			@include remSize(12);
			line-height: (40 / 24);
			margin-top: -39px;
			margin-bottom: 52px;
			li {
				text-indent: -1em;
				margin-left: 1em;
			}
		}
		.d-list {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			margin: 0 auto 70px;
			@include clearfix;
			dt {
				color: $black;
				@include remSize(15);
				font-weight: bold;
				margin-bottom: 10px;
			}
			dd {
				float: left;
				width: 100%;
				@include remSize(15);
				line-height: (45 / 30);
				text-indent: -1em;
				margin-left: 1em;
				padding-right: 1em;
				box-sizing: border-box;
				margin-bottom: 5px;
				&:before {
					content: '-';
					margin-right: 5px;
					vertical-align: 1px;
					padding-left: 3px;
				}
			}
		}
		.news-box {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			margin: 35px auto 100px;
			@include clearfix;
			dl {
				margin-bottom: 28px;
				dt {
					width: 100%;
					margin-bottom: 5px;
					.date {
						margin-right: 11px;
						vertical-align: 5px;
					}
					.cat {
						width: auto;
						height: 22px;
						overflow: hidden;
						box-sizing: border-box;
						display: inline-block;
						color: $blue;
						text-align: center;
						font-size: percentage(11 / $font-size-base);
						font-weight: bold;
						padding-top: 5px;
						padding-left: 5px;
						padding-right: 5px;
						border: 1px solid $blue;
						margin-right: 10px;
					}
					.situation {
						text-align: center;
						.sprite {
							position: absolute;
						}
						span {
							color: $white;
							font-size: percentage(11 / $font-size-base);
							font-weight: bold;
							position: relative;
							z-index: 10;
						}
					}
				}
				dd {
					width: 100%;
					margin-left: 2px;
					a {
						color: $blue;
						font-size: percentage(15 / $font-size-base);
						line-height: (24 / 15);
						font-weight: bold;
						padding-bottom: 1px;
						border-bottom: 1px solid $blue;
						// &.hover {
						// 	border-bottom: 1px solid $white;
						// }
					}
				}
			}
		}
		.sns-box {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			margin: 0 auto 30px;
			@include clearfix;
			.link-download {
				overflow: visible;
				width: auto;
				height: auto;
				margin: 0;
				margin-bottom: 25px;
				a {
					width: auto;
					height: auto;
					background: transparent;
					text-align: center;
					margin-bottom: 0;
					color: $blue;
					@include remSize(13);
					border-bottom: solid 1px $blue;
					overflow: visible;
					padding: 0;
					display: inline-block;
					margin: 0 auto;
					span {
						@include remSize(11);
					}
				}
			}
			.link-downloadbtm {
				overflow: visible;
				width: auto;
				height: auto;
				margin: 0;
				margin-bottom: 25px;
				a {
					width: auto;
					height: auto;
					background: transparent;
					text-align: center;
					margin-bottom: 0;
					color: $blue;
					@include remSize(13);
					border-bottom: solid 1px $blue;
					overflow: visible;
					padding: 0;
					display: inline-block;
					margin: 0 auto;
					span {
						@include remSize(11);
					}
				}
			}
			ul {
				text-align: center;
				li {
					display: inline-block;
					margin-left: 6px;
				}
			}
		}
		.pagetop-box{
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			margin: 30px auto 60px;
			text-align:center;
			font-size:13.5px;
			@include clearfix;
			a{
				color:$black;
				text-decoration:underline;
				&:hover {
					text-decoration:none;
				}
			}
		}
		.pagetop-box{
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			margin: 30px auto 60px;
			text-align:center;
			font-size:13.5px;
			@include clearfix;
			a{
				color:$black;
				text-decoration:underline;
				&:hover {
					text-decoration:none;
				}
			}
		}
		.modal-thumbnail-box {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			ul {}
			li {
				margin-bottom: 40px;
				.tl {
					@include remSize(20);
					font-weight: bold;
					color: $blue;
					margin-bottom: 10px;
				}
				.img {
					width: 100%;
					margin-bottom: 15px;
					border: solid 1px $l-purple;
					box-sizing: border-box;
					img {
						width: 100%;
						height: auto;
					}
				}
				.txt {
					@include remSize(15);
					line-height: (46 / 30);
					margin-bottom: 26px;
				}
				.btn-more {
					width: 240px;
					height: 50px;
					overflow: hidden;
					text-align: center;
					margin: 0 auto;
					a {
						width: 100%;
						height: 100%;
						display: block;
						background: $blue;
						color: $white;
						font-size: percentage(15 / $font-size-base);
						font-weight: bold;
						padding-top: 16px;
						box-sizing: border-box;
						border: 2px solid $blue;
						.sprite {
							margin-right: 10px;
						}
						// &.hover {
						// 	color: $blue;
						// 	background: $white;
						// }
					}
				}
				.btn-window {
					width: 240px;
					height: 50px;
					overflow: hidden;
					text-align: center;
					margin: 0 auto;
					a {
						width: 100%;
						height: 100%;
						display: block;
						background: $blue;
						color: $white;
						font-size: percentage(15 / $font-size-base);
						font-weight: bold;
						padding-top: 16px;
						box-sizing: border-box;
						border: 2px solid $blue;
						.sprite {
							margin-right: 10px;
						}
						// &.hover {
						// 	color: $blue;
						// 	background: $white;
						// }
					}
				}
				.righbox {
					display: none;
				}
			}
		}
		.graph-box {
			margin-bottom: 56px;
			.tl {
				@include remSize(20);
				font-weight: bold;
				color: $blue;
				padding: 0 15px;
				margin-bottom: 20px;
			}
			.slides {
				width: 290px;
				margin: 0 auto;
				text-align: center;
				li {
					width: 100%;
					img {
						width: 80%;
						height: auto;
					}
				}
			}
			.bx-wrapper {
				position: relative;
			}
			.bx-pager {
				margin-top: 22px;
				text-align: center;
				.bx-pager-item {
					display: inline-block;
					margin-left: 10px;
					&:first-child {
						margin-left: 0;
					}
				}
				.bx-pager-link {
					background: #dce5f8;
					text-indent: -9999px;
					overflow: hidden;
					width: 10px;
					height: 10px;
					display: block;
					@include border-radius(50%);
					&.active {
						background: $blue;
					}
				}
			}
			.bx-controls-direction {
				.bx-prev,
				.bx-next {
					width: 15px;
					height: 28px;
					@include txtHide;
					position: absolute;
					top: 105px;
					z-index: 9999;
				}
				.bx-prev {
					background: url(../img/common/sp/slide-arrow-prev.png) no-repeat 0 0;
					background-size: 15px 28px;
					left: 10px;
				}
				.bx-next {
					background: url(../img/common/sp/slide-arrow-next.png) no-repeat 0 0;
					background-size: 15px 28px;
					right: 10px;
				}
			}
			.txt {
				padding: 0 15px;
				@include remSize(12);
				line-height: (40 / 24);
				color: $lite-gray;
				margin-top: 16px;
				text-align: right;
			}
		}
		.service-box {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			.item {
				width: 100%;
				margin-bottom: 50px;
				.img {
					width: 100%;
					margin-bottom: 16px;
					border: solid 1px $l-purple;
					box-sizing: border-box;
					img {
						width: 100%;
						height: auto;
					}
				}
				.txt-area {
					.tl {
						@include remSize(20);
						line-height: (52 / 40);
						font-weight: bold;
						color: $blue;
						margin-bottom: 7px;
					}
					.txt {
						@include remSize(15);
						line-height: 1.7;
						margin-bottom: 21px;
					}
				}
				.btn-more {
					width: 240px;
					height: 50px;
					overflow: hidden;
					text-align: center;
					margin: 0 auto;
					a {
						width: 100%;
						height: 100%;
						display: block;
						background: $blue;
						color: $white;
						font-size: percentage(15 / $font-size-base);
						font-weight: bold;
						padding-top: 16px;
						box-sizing: border-box;
						border: 2px solid $blue;
						.sprite {
							margin-right: 10px;
						}
						// &.hover {
						// 	color: $blue;
						// 	background: $white;
						// }
					}
				}
			}
		}
		.toggle-box {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			margin-bottom: 60px;
			ul {
			}
			li {
				&.item {
					&:last-child {
						border-bottom: solid 2px $blue;
					}
					.tab-area {
						width: 100%;
						border-top: solid 2px $blue;
						padding: 20px 10px 22px;
						box-sizing: border-box;
						position: relative;
						.date {
							@include remSize(13);
							font-weight: bold;
							margin-bottom: 4px;
							margin-left: 2px;
							display: inline-block;
						}
						.tl {
							width: 100%;
							padding-right: 60px;
							box-sizing: border-box;
							@include remSize(15);
							line-height: (40 / 30);
							font-weight: bold;
							color: $blue;
						}
						.btn {
							width: 34px;
							height: 34px;
							position: absolute;
							top: 50%;
							right: 0;
							margin-top: -17px;
						}
					}
					.content-area {
						width: 100%;
						padding: 0 10px;
						box-sizing: border-box;
						display: none;
						.tl {
							@include remSize(13);
							font-weight: bold;
							margin-bottom: 13px;
							&:first-child {
								border-top: solid 1px #dedede;
								padding-top: 25px;
							}
						}
						.inner {
							margin-bottom: 19px;
						}
						li {
							line-height: 1.3;
							margin-left: 2px;
							margin-bottom: 5px;
							position: relative;
							padding-left: 14px;
							@include clearfix;
							&:before {
								content: "-";
								margin-right: 5px;
								padding-left: 3px;
								vertical-align: 1px;
								position: absolute;
								left: 0;
								top: -1px;
							}
							.name {
								width: 7.5em;
								display: inline-block;
							}
							.num {
								width: 3em;
								display: inline-block;
								text-align: right;
							}
							.profile-name {
								width: auto;
								float: left;
								display: inline-block;
							}
							.profile-detail {
								display: block;
								padding-left: 3em;
								width: 100%;
								box-sizing: border-box;
								margin-top: -1px;
								margin-bottom: 5px;
								&.last {
									margin-bottom: 10px;
								}
							}
						}
						.btn-more {
							width: 240px;
							height: 50px;
							margin: 0 auto 30px;
							a {
								background: $green;
								width: 100%;
								height: 100%;
								display: block;
								text-align: center;
								color: $white;
								@include remSize(15);
								font-weight: bold;
								padding-top: 18px;
								box-sizing: border-box;
								&.hover {
									background: $green-hover;
								}
							}
						}
					}
				}
			}
		}

		/* 関連コラム */
		.relation-column {
			margin: 0 auto 60px;
			.tl-box {
				width: auto;
				margin: 0 15px;
				position: relative;
				&:before {
				background: none;
				}
				.tl {
					position: relative;
					line-height:  (67.2 / 56);
					margin-bottom: 15px;
				}
			}
			.tl-box:before {
				position: absolute;
				top: 0;
			}
			.tl-box:after{
				top: 50%;
				left: 0;
			}
			.relation-column-items {
				margin-top: 10px;
				.item {
					display: block;
					width: 220px;
					margin-right: 20px;
					margin-bottom: 30px;
					box-sizing: border-box;
					a {
						display: block;
					}
					.column-thum {
						position: relative;
						width: 100%;
						height: 145px;
						overflow: hidden;
						background-color: #cfcfe4;
						background-color: #cfcfe4;
						background-size: cover;
						background-position: 50% 50%;
						background-repeat: none;
					}
					.column-info {
						background: $white;
						width: 100%;
						height: 10em;
						padding: 15px 20px;
						box-sizing: border-box;
						border: 1px solid $l-gray;
						border-top: none;
						@include transition(all, .6s);
						.column-title {
							font-size: 16px;
							font-weight: bold;
							line-height: 1.6;
							color: $black;
						}
					}
					&:hover {
						.column-info {
							background-color: $blue;
							border-color: $blue;
							* {
								color: #fff!important;
							}
						}
					}
				}
				.slick-prev ,
				.slick-next {
					position: absolute;
					top: 39%;
					left: 0;
					z-index: 99;
					background-color: rgba(0,127,195,0.8);
					display: block;
					width: 30px;
					height: 43px;
					text-indent: -9999px;
					border: none;
					-webkit-appearance: none;
					border-radius: 0;
					&::before {
						content: "";
						display: block;
						width: 10px;
						height: 10px;
						border-top: 2px solid #fff;
						border-left: 2px solid #fff;
						transform: rotate(-45deg);
						position: absolute;
						top: 15px;
						left: 10px;
					}
				}
				.slick-prev {
				}
				.slick-next {
					left: auto;
					right: 0;
					&::before {
						transform: rotate(135deg);
						left: 7px;
					}
				}
			}
			.link {
				width: 100%;
				text-align: center;
				a {
					color: #007fc3;
					font-weight: bold;
					text-decoration: underline;
					&:hover {
						text-decoration: none;
					}
					i {
						margin-right: 7px;
					}
				}
			}
			.link-btn-center {
				text-align: center;
			}
		}

		.relation-link-box {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			margin-top: 15px;
			margin-bottom: 120px;
			ul {
				li {
					font-size: 13px;
					font-weight: bold;
					line-height: (52 / 26);
					margin-bottom: 19px;
					a {
						color: $blue;
						text-decoration: underline;
					}
				}
			}
			// 関連リンク スタイル追加
			ul.relation-link-box-link{
				li{
					margin-bottom:30px;
					line-height:1.7;
					font-weight:normal;
					@include remSize(13);
				}
				h4{
					font-weight:bold;
					@include remSize(14);
				}
				h5{
					font-weight:normal;
					@include remSize(13);
					&:before{
						content: "-";
						margin-right: 5px;
					}
				}
				p{
					margin-left: 10px;
					margin-bottom: 15px;
				}
				a{
					color: $blue;
					font-weight:bold;
					text-decoration:underline;
				}
			}
		}
		.description-box {
			width: 100%;
			padding: 17px 15px;
			box-sizing: border-box;
			background: $blue;
			p {
				color: $white;
				font-size: 10px;
				line-height: (32 / 20);
			}
		}
		.contact-box {
			background: url(../img/common/sp/bg-contact-banner.jpg) no-repeat center center;
			background-size: cover;
			width: 100%;
			padding-top: 29px;
			padding: 25px 15px 30px;
			box-sizing: border-box;
			.tl {
				@include remSize(68 / 2);
				@include gothic-bbb;
				color: $blue;
				text-align: center;
				line-height: (80 / 68);
				margin-bottom: 12px;
			}
			.txt {
				@include remSize(15);
				line-height: 1.7;
				padding: 0 5px;
				margin-bottom: 26px;
			}
			.inner {
				background: rgba(255,255,255,0.8);
				text-align: center;
				padding: 17px 0 25px;
				box-sizing: border-box;
				.tel-num {
					@include remSize(33);
					font-weight: bold;
					color: $blue;
					.sprite-tel-contact-banner {
						margin-bottom: 6px;
					}
					a {
						&.num {
							display: inline-block;
							@include remSize(33);
							font-weight: bold;
							color: $blue;
						}
					}
					.time {
						color: $black;
						@include remSize(13);
						font-weight: normal;
						margin-top: 5px;
						margin-bottom: 20px;
					}
				}
				.btn-contact {
					width: 250px;
					height: 55px;
					margin: 0 auto;
					a {
						background-color: $green;
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						color: $white;
						@include remSize(15);
						font-weight: bold;
						padding-top: 19px;
						display: block;
						&.hover {
							background: $green-hover;
						}
					}
				}
			}
		}
		// input
		input[type=text],
		input[type=email],
		input[type=tel],
		input[type=checkbox],
		input[type=radio],
		textarea {
			@include appearance(none);
			border: none;
			@include box-shadow(none);
		}
		.radio,
		.checkbox {
			display: none;
		}
		.radio + .radio-icon,
		.checkbox + .checkbox-icon {
		  position: relative;
		  vertical-align: middle;
		}
		.checkbox + .checkbox-icon:before {
			background: url(../img/contact/sp/checkbox.png) no-repeat 0 0;
			background-size: 20px 18px;
			width: 20px;
			height: 18px;
			content: "";
			position: absolute;
			top: -1px;
			left: 0;
		}
		.checkbox:checked + .checkbox-icon:before {
		  	background: url(../img/contact/sp/checkbox_on.png) no-repeat 0 0;
		  	background-size: 20px 18px;
			width: 20px;
			height: 18px;
			content: "";
			position: absolute;
			top: -3;
			left: 0;
		}
		.radio + .radio-icon:before {
			background: url(../img/contact/sp/radio.png) no-repeat 0 0;
			background-size: 20px 18px;
			width: 20px;
			height: 18px;
			content: "";
			position: absolute;
			top: -1px;
			left: 0;
		}
		.radio:checked + .radio-icon:before {
		  	background: url(../img/contact/sp/radio_on.png) no-repeat 0 0;
		  	background-size: 20px 18px;
			width: 20px;
			height: 18px;
			content: "";
			position: absolute;
			top: -3;
			left: 0;
		}
		label {
			.radio-tl,
			.check-tl {
				padding-left: 22px;
			}
		}
		textarea {
			width: 100%;
			border: solid 1px $l-purple;
			height: 70px;
			box-sizing: border-box;
			padding: 10px 13px 12px;
			@include remSize(14);
			display:block;
		}
		input[type=text],
		input[type=email],
		input[type=tel] {
			border: solid 1px $l-purple;
			box-sizing: border-box;
			@include remSize(14);
			padding: 0 13px;
			height: 36px;
			&.w-type1 {
				width: 100%;
			}
			&.w-type2 {
				width: 48.5%;
				margin-right: 1%;
				box-sizing: border-box;
				&.last {
					margin-right: 0;
				}
			}
		}
		.form-guide-for-sp {
			padding: 0 15px;
			margin-bottom: 20px;
			p {
				font-weight: bold;
				text-align: center;
				margin-bottom: 10px;
				line-height: 1.4;
			}
			a {
				display: block;
				padding: 15px 0;
				background-color: #60AB0F;
				color: #fff;
				font-weight: bold;
				text-align: center;
				font-size: 16px;
			}
		}
		// formbox
		.formbox {
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;
			.form-guide-text {
				text-align: right;
				margin-bottom: 10px;
				margin-bottom: 20px;
			}
			.icon-must-asterisk {
				color: #ff0000;
				display: inline-block;
				@include remSize(15);
				font-weight: bold;
			}
			dl {
				dt {
					width: 100%;
					@include remSize(15);
					font-weight: bold;
					margin-bottom: 16px;
					.icon-must {
						background: #ff0000;
						@include remSize(12);
						color: $white;
						padding: 5px 5px 4px;
						position: relative;
						top: -1px;
					}
				}
				dd {
					width: 100%;
					@include remSize(15);
					margin-left: 2px;
					margin-bottom: 33px;
					position: relative;
					.error {
						display: inline-block;
						background: $white;
						border: solid 2px #ff0000;
						color: #ff0000;
						@include remSize(12);
						padding: 7px 8px 6px;
						box-sizing: border-box;
						position: absolute;
						top: -41px;
						left: 0;
						line-height: 1.35;
						display: none;
						&:after {
							background: url(../img/contact/sp/arrow-error.png) no-repeat 0 0;
							background-size: 13px 11px;
							width: 13px;
							height: 11px;
							display: block;
							content: "";
							position: absolute;
							bottom: -11px;
							left: 4px;
						}
					}
					&[data-validate=required] {
						input[type=text],
						input[type=email],
						input[type=tel] {
							background: rgb(255, 221, 221);
							&:focus {
								background: #fff;
							}
						}
						&.passed {
                            input[type=text],
                            input[type=email],
                            input[type=tel] {
								background: #fff;
							}
						}
					}
				}
			}
		}
		.check-group {
			li {
				margin-bottom: 18px;
				vertical-align: top;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.check-tl {
				display: inline-block;
				line-height: 1.3;
				vertical-align: top;
			}
		}
		.radio-group {
			margin-bottom: 10px;
			li {
				margin-bottom: 18px;
				vertical-align: top;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.radio-tl {
				display: inline-block;
				line-height: 1.3;
				vertical-align: top;
			}
		}
		.form-sample {
			@include remSize(14);
			margin-top: 10px;
			line-height: (40 / 28);
			text-indent: -1.8em;
			margin-left: 1.8em;
			.indent {
				display: inline-block;
				padding-left: 4px;
				padding-top: 4px;
			}
		}
		.pricvacy-area {
			width: 100%;
			padding: 0 15px;
		}
		.privacy-box {
			background: #f4f4f4;
			width: 100%;
			height: 275px;
			padding: 20px 0 20px 20px;
			box-sizing: border-box;
			.inner {
				width: 100%;
				height: 100%;
				overflow-y: scroll;
				padding-right: 20px;
				box-sizing: border-box;
				@include remSize(14);
				line-height: (24 / 14);
			}
			.tl {
				font-weight: bold;
				margin-bottom: 8px;
			}
			p {
				margin-bottom: 18px;
			}
			dl {
				margin-bottom: 20px;
				dt {
					margin-bottom: 5px;
				}
				dd {
					margin-bottom: 15px;
					margin-left: 2px;
					@include remSize(13);
				}
			}
			.privacy-link {
				text-align: right;
				a {
					color: $blue;
					border-bottom: solid 1px $blue;
					// &.hover {
					// 	border-bottom-color: transparent;
					// }
				}
			}
		}
		.flow-box {
			width: 100%;
			padding: 0 15px 60px;
			box-sizing: border-box;
			.inner {
				border: solid 1px $l-purple;
				padding: 21px 25px 25px;
				box-sizing: border-box;
				.tl {
					@include remSize(24);
					line-height: (64 / 48);
					color: $blue;
					font-weight: bold;
					text-align: center;
					margin: 0 -25px 21px;
				}
				ul {}
				li {
					margin-top: 34px;
					.item {
						position: relative;
						.tl {
							background: #f0f0f0;
							width: 100%;
							line-height: 50px;
							color: $blue;
							font-weight: bold;
							@include remSize(15);
							margin: 0 auto 6px;
						}
						.txt {
							@include remSize(13);
							line-height: (39 / 26);
							padding: 0 2px;
						}
						&:before {
							background: url(../img/common/sp/arrow-flow.png) no-repeat;
							background-size: 40px 20px;
							width: 40px;
							height: 20px;
							display: block;
							content: "";
							position: absolute;
							top: -25px;
							left: 50%;
							margin-left: -20px;
						}
					}
					&:first-child {
						margin-top: 0;
						.item {
							&:before {
								display: none;
							}
						}
					}
					&:last-child {
						.tl {
							margin-bottom: 0;
						}
					}
					&.on {
						.item {
							.tl {
								background: #dce5f8;
							}
						}
					}
				}
			}
		}

		//よくある質問
		.faq-box {
			width: auto;
			margin: 10px 15px 25px;
			.faq-list{
				display:block;
				li{
					display: block;
					margin-bottom:20px;
					background-color:#edf3ff;
					line-height:1.5;
					@include remSize(15);
					dl{
						padding:20px 15px;
						dt{
							position:relative;
							margin-left:25px;
							margin-bottom: 12px;
							color:$blue;
							font-weight:bold;
							@include remSize(16);
							&:before{
								position:absolute;
								content:"Q.";
								top: 2px;
								left:-25px;
								@include remSize(18);
								line-height:1;
								font-weight:500;
							}
							br{
								display:none;
							}
						}
						dd{
							position:relative;
							margin-left:25px;
							&:before {
								position:absolute;
								content: 'A.';
								top: 2px;
								left:-25px;
								@include remSize(18);
								line-height:1;
								font-weight:500;
								color:#9f9e95;
							}
							a{
								display:inline-block;
								padding-left:20px;
								background-image: url(../img/common/sp/arrow-right-tranceparent.png);
								background-repeat: no-repeat;
								background-position:0 50%;
								background-size: auto 12px;
								color:$blue;
								font-weight:bold;
								text-decoration:underline;
								@include remSize(13);
							}
							.txt{
								@include remSize(12);
								color: $lite-gray;
							}
						}
					}
				}
			}
		}

	}
	// main
}

// PC
@media screen and (min-width:641px) {
	body {
		.info-closure {
			width: 946px;
			margin: 0 auto 4em;
			padding: 2.5em 0;
			.heading {
				@include remSize(20);
			}
			p {
				padding: 0 70px;
			}
		}
		.complete .info-closure {
			width: 814px;
		}
		.sprite-icon-btn-arrow-blue {
			background-position: 1px -456px;
		}
		.btn-blue {
			&:hover {
				.sprite-icon-btn-arrow-blue {
					background-position: 0 0;
				}
			}
		}
		.btn-white {
			.sprite-icon-btn-arrow-blue {
				background-position: 0 0;
			}
		}
		.service-box {
			li {
				a {
					&:hover {
						.btn-blue {
							.sprite-icon-btn-arrow-blue {
								background-position: 0 0;
							}
						}
					}
				}
			}
		}
	}
	main {
		padding-top: 63px;
		.breadcrumb {
			padding: 30px 20px 40px 20px;
			font-size: percentage(12 / $font-size-base);
			line-height: 1.5;
			ul {
				@include clearfix;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				li {
					margin-right: 2px;
					display: inline;
					&:after {
						content: '/';
						margin-left: 5px;
					}
					&:last-child {
						&:after {
							content: '';
							margin-left: 0;
						}
					}
					a {
						color: $blue;
						padding-bottom: 1px;
						border-bottom: 1px solid $blue;
						&:hover {
							border-bottom: 1px solid $white;
						}
					}
				}
			}
		}
		.tl-main {
			color: $blue;
			font-size: percentage(46 / $font-size-base);
			font-family: "Helvetica Neue", "Helvetica", "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20px;
			display: block;
			line-height: 1.3;
		}
		.img-main {
			width: 100%;
			height: 280px;
			margin-bottom: 40px;
			background: url(../../assets/img/common/img-main-sample.jpg) no-repeat center center / cover;
			.inner {
				width: $content-width;
				height: 100%;
				display: table;
				margin: 0 auto;
				.txt {
					display: table-cell;
					vertical-align: middle;
					padding-left: 2px;
					p {
						font-size: percentage(14 / $font-size-base);
						line-height: (24 / 14);
						margin-bottom: 15px;
					}
					.btn-download {
						width: 240px;
						height: 60px;
						overflow: hidden;
						text-align: center;
						a {
							width: 100%;
							height: 100%;
							display: block;
							color: $white;
							padding-top: 16px;
							font-size: percentage(14 / $font-size-base);
							font-weight: bold;
							background: $turquoise;
							.sprite {
								margin-right: 10px;
								vertical-align: -8px;
							}
						}
						&:hover {
							a {
								background: $turquoise-hover;
							}
						}
					}
				}
			}
		}
		.txt-main {
			font-size: percentage(15 / $font-size-base);
			line-height: 1.7;
			text-align: center;
			margin-bottom: 30px;
		}
		.link-download {
			text-align: center;
			margin-bottom: 45px;
			a {
				color: $blue;
				font-size: percentage(14 / $font-size-base);
				font-weight: bold;
				text-decoration: none;
				padding-bottom: 1px;
				border-bottom: 1px solid $blue;
				span {
					font-size: percentage(12 / 14);
				}
				&:hover {
					border-bottom: 1px solid $white;
				}
			}
			.sprite {
				margin-right: 7px;
				vertical-align: -5px;
				letter-spacing: 1px;
			}
		}
		.link-downloadbtm {
			text-align: center;
			margin-bottom: 45px;
			a {
				color: $blue;
				font-size: percentage(14 / $font-size-base);
				font-weight: bold;
				text-decoration: none;
				padding-bottom: 1px;
				border-bottom: 1px solid $blue;
				span {
					font-size: percentage(12 / 14);
				}
				&:hover {
					border-bottom: 1px solid $white;
				}
			}
			.sprite {
				margin-right: 7px;
				vertical-align: -5px;
				letter-spacing: 1px;
			}
		}
		.tab-box {
			width: $content-width;
			margin: 0 auto 45px;
			@include translate(3px, 0);
			ul {
				width: 100%;
				text-align: center;
				li {
					width: 20%;
					margin-left: -5px;
					box-sizing: border-box;
					display: inline-block;
					vertical-align: top;
					border-top: 2px solid $blue;
					border-bottom: 2px solid $blue;
					border-right: 2px solid $blue;
					@include transition(all .3s);
					&:first-child {
						border-left: 2px solid $blue;
					}
					&:hover, &.on {
						a {
							color: $white;
							background: $blue;
						}
					}
					a {
						display: block;
						padding: 20px 0;
						color: $blue;
						font-size: percentage(15 / $font-size-base);
						font-weight: bold;
					}
				}
			}
		}
		.point-box {
			max-width: $content-width;
			margin: 0 auto 80px;
			.tl {
				color: $blue;
				font-size: percentage(24 / $font-size-base);
				font-weight: bold;
				text-align: center;
				margin-bottom: 30px;
			}
			ul {
				@include clearfix;
				li {
					width: 33.33333333%;
					float: left;
					vertical-align: top;
					text-align: center;
					.img {
						width: 124px;
						height: 124px;
						overflow: hidden;
						margin: 0 auto 20px auto;
						@include border-radius(50%);
						background: $t-blue;
						.sprite {
							margin-top: 28px;
						}
					}
					.txt {
						margin-top: -4px;
						span {
							color: $blue;
							font-size: percentage(15 / $font-size-base);
							font-weight: bold;
							padding-bottom: 1px;
							@include transition(all .3s);
							line-height: (21 / 15);
						}
						.sprite {
							margin-left: 8px;
							vertical-align: -1px;
						}
					}
				}
			}
		}
		.tl-box {
			width: $content-width;
			margin: -4px auto 11px;
			text-align: center;
			position: relative;
			line-height: 1.3;
			&:after {
				width: 100%;
				height: 1px;
				background: $l-purple;
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				margin-top: -3px;
			}
			.tl {
				color: $blue;
				font-size: percentage(34 / $font-size-base);
				font-weight: bold;
				display: inline-block;
				background: $white;
				padding: 0 20px;
				margin-bottom: 5px;
				position: relative;
				z-index: 10;
				font-weight: bold;
			}
			.stl {
				color: $blue;
				font-size: percentage(24 / $font-size-base);
				font-weight: bold;
				margin-top: 15px;
			}
		}
		.txt-img-l-box {
			width: $content-width;
			margin: 0 auto 60px;
			text-align: center;
			.img-area {
				display: inline-block;
				vertical-align: top;
			}
			.txt-area {
				width: 460px;
				display: inline-block;
				vertical-align: top;
				text-align: left;
				margin-left: 20px;
				.tl {
					color: $blue;
					font-size: percentage(24 / $font-size-base);
					font-weight: bold;
					line-height: (32 / 24);
					margin-bottom: 15px;
				}
				.txt {
					font-size: percentage(15 / $font-size-base);
					line-height: 1.7;
				}
			}
		}
		.txt-img-m-box {
			width: $content-width;
			margin: 0 auto 55px;
			ul {
				@include clearfix;
				li {
					width: 50%;
					float: left;
					box-sizing: border-box;
					&:nth-child(odd) {
						padding-right: 12px;
					}
					&:nth-child(even) {
						padding-left: 12px;
					}
					.img {
						margin-bottom: 20px;
					}
					.tl {
						color: $blue;
						font-size: percentage(20 / $font-size-base);
						font-weight: bold;
						margin-bottom: 10px;
					}
					.txt {
						font-size: percentage(15 / $font-size-base);
						line-height: 1.7;
					}
				}
			}
		}
		.txt-img-s-box {
			width: $content-width;
			margin: 0 auto 45px;
			ul {
				@include clearfix;
				li {
					width: 300px;
					float: left;
					box-sizing: border-box;
					margin-right: 23px;
					&:nth-child(3n) {
						margin-right: 0;
					}
					.img {
						margin-bottom: 20px;
					}
					.tl {
						color: $blue;
						font-size: percentage(20 / $font-size-base);
						font-weight: bold;
						margin-bottom: 10px;
					}
					.txt {
						font-size: percentage(15 / $font-size-base);
						line-height: 1.7;
					}
				}
			}
		}
		.btn-blue {
			width: auto;
			min-width: 240px;
			height: 60px;
			margin: 0 auto 75px;
			display: inline-block;
			overflow: hidden;
			text-align: center;
			a, button {
				@include transition(all .3s);
				color: $white;
				font-size: percentage(15 / $font-size-base);
				font-weight: bold;
				width: 100%;
				height: 100%;
				display: block;
				padding: 21px 50px 0 50px;
				box-sizing: border-box;
				border: 2px solid $blue;
				background: $blue;
				.sprite {
					margin-right: 7px;
					vertical-align: 0;
				}
				&:hover {
					color: $blue;
					background: $white;
				}
			}
			button {
				padding-top: 0;
				line-height: 1;
			}
		}
		.btn-white {
			width: auto;
			min-width: 240px;
			height: 60px;
			margin: 0 auto 75px;
			display: inline-block;
			overflow: hidden;
			text-align: center;
			a, button {
				@include transition(all .3s);
				color: $blue;
				font-size: percentage(15 / $font-size-base);
				font-weight: bold;
				width: 100%;
				height: 100%;
				display: block;
				padding: 21px 50px 0 50px;
				box-sizing: border-box;
				border: 2px solid $blue;
				background: $white;
				.sprite {
					margin-right: 7px;
					vertical-align: 0;
				}
				&:hover {
					color: $white;
					background: $blue;
				}
			}
			button {
				padding-top: 0;
				line-height: 1;
			}
		}
		.table {
			width: $content-width;
			margin: 0 auto 35px;
			thead {
				th {
					color: $blue;
					font-weight: bold;
					padding: 21px 0;
					vertical-align: middle;
					border-top: 1px solid $l-gray;
					border-right: 1px solid $l-gray;
					&:nth-child(even) {
						background: #edebfa;
					}
					&:nth-child(odd) {
						background: #dfddf5;
					}
					&.head {
						border: none;
						border-right: 1px solid $l-gray;
						background: none;
					}
				}
			}
			tbody {
				border-left: 1px solid $l-gray;
				border-right: 1px solid $l-gray;
				border-bottom: 1px solid $l-gray;
				tr {
					&:nth-child(even) {
						background: #f4f4f4;
						.head {
							background: #dce5f8;
						}
					}
					&:nth-child(odd) {
						background: $white;
						.head {
							background: #edf3ff;
						}
					}
					.head {
						border-top: 1px solid $l-gray;
					}
				}
				td {
					border-left: 1px solid $l-gray;
					text-align: center;
					vertical-align: middle;
					padding: 20px 0;
					&.head {
						color: $blue;
						font-weight: bold;
						padding: 30px;
						line-height: (20 / 13);
						text-align: center;
						border-left: none;
					}
					.sprite {
						width: 26px;
						margin: 0 auto;
						display: block;
					}
					span {
						font-size: percentage(12 / $font-size-base);
						line-height: (16 / 12);
						margin-top: 5px;
						display: inline-block;
					}
				}
			}
			&.type {
				margin-bottom: 15px;
				th {
					border-bottom: 1px solid $l-gray;
					&.head-careers{
						width:11%;
					}
					&.head-plan{
						width:13%;
					}
					&.head {
						border-top: 1px solid $l-gray;
						background: #dce5f8;
						&:first-child {
							width: 120px;
							box-sizing: border-box;
							border-left: 1px solid $l-gray;
						}
						&:nth-child(2) {
							width: 205px;
							box-sizing: border-box;
							border-bottom: 1px solid $l-gray;
						}
					}
					.sprite {
						margin-right: 7px;
						vertical-align: -3px;
					}
					span {
						border-bottom: 1px solid $blue;
						&.pc {
							border-bottom: none;
							text-align: center;
							display: inline;
						}
					}
				}
				td {
					&.head {
						background: #dce5f8 !important;
					}
					&.s-head {
						background: #f7faff;
						color: $blue;
						font-size: percentage(13 / $font-size-base);
						font-weight: bold;
						text-align: left;
						padding-left: 18px;
						&.even {
							background: #e6ecf7;
						}
						span.num {
							width: 18px;
							padding: 2px 0;
							display: inline-block;
							background: $blue;
							color: $white;
							text-align: center;
							font-size: percentage(11 / $font-size-base);
							font-weight: bold;
							vertical-align: 0px;
							margin-right: 8px;
						}
					}
					.sprite-icon-vatu {
						width: 16px;
					}
				}
				tr {
					&.last {
						td {
							padding: 12px 0;
							border-top: 1px solid $l-gray;
							background: #f1f7e6 !important;
						}
					}
					&.part {
						border-bottom: 1px solid $l-gray;
					}
				}
			}
		}
		.table-description {
			width: $content-width;
			margin: 0 auto 75px;
			padding: 0 3px;
			box-sizing: border-box;
			color: #666;
			font-size: percentage(12 / $font-size-base);
			line-height: (20 / 12);
			text-align: left;
			li {
				display: inline;
			}
		}
		.d-list {
			width: $content-width;
			padding-left: 3px;
			box-sizing: border-box;
			margin: 0 auto 70px;
			@include clearfix;
			dt {
				color: $black;
				font-size: percentage(15 / $font-size-base);
				font-weight: bold;
				margin-bottom: 7px;
			}
			dd {
				float: left;
				width: 50%;
				font-size: percentage(15 / $font-size-base);
				line-height: (26 / 15);
				&:before {
					content: '-';
					margin-right: 5px;
					vertical-align: 1px;
					padding-left: 3px;
				}
			}
		}
		.news-box {
			width: $content-width;
			margin: 35px auto 100px;
			@include clearfix;
			dl {
				margin-bottom: 23px;
				dt {
					float: left;
					width: 275px;
					.date {
						margin-right: 15px;
						vertical-align: 5px;
					}
					.cat {
						width: auto;
						height: 22px;
						overflow: hidden;
						box-sizing: border-box;
						display: inline-block;
						color: $blue;
						text-align: center;
						font-size: percentage(11 / $font-size-base);
						font-weight: bold;
						padding-top: 5px;
						padding-left: 5px;
						padding-right: 5px;
						border: 1px solid $blue;
						margin-right: 10px;
					}
					.situation {
						position: relative;
						text-align: center;
						.sprite {
							position: absolute;
						}
						span {
							color: $white;
							font-size: percentage(11 / $font-size-base);
							font-weight: bold;
							position: relative;
							z-index: 10;
						}
					}
				}
				dd {
					margin: 0 0 0 275px;
					a {
						color: $blue;
						font-size: percentage(15 / $font-size-base);
						line-height: (24 / 15);
						font-weight: bold;
						padding-bottom: 1px;
						border-bottom: 1px solid $blue;
						&:hover {
							border-bottom: 1px solid $white;
						}
					}
				}
			}
		}
		.sns-box {
			width: $content-width;
			margin: 0 auto 35px;
			@include clearfix;
			.link-download {
				float: left;
				margin-bottom: 0;
			}
			.link-downloadbtm {
				float: left;
				margin-bottom: 0;
			}
			ul {
				@include clearfix;
				float: right;
				li {
					float: left;
					margin-left: 10px;
				}
			}
		}
		.pagetop-box{
			width: $content-width;
			margin: 35px auto 60px;
			font-size:15px;
			text-align:right;
			@include clearfix;
			a{
				color:$black;
				text-decoration:underline;
				&:hover {
					text-decoration:none;
				}
			}
		}
		.pagetop-box{
			width: $content-width;
			margin: 35px auto 60px;
			font-size:15px;
			text-align:right;
			@include clearfix;
			a{
				color:$black;
				text-decoration:underline;
				&:hover {
					text-decoration:none;
				}
			}
		}

		/* 関連コラム */
		.relation-column {
			width: 946px;
			margin: 0 auto 60px;
			.relation-column-items {
				display: flex;
				justify-content: center;
				margin-top: 40px;
				margin-right: -20px;
				.item {
					display: block;
					width: 300px;
					margin-right: 20px;
					margin-bottom: 30px;
					box-sizing: border-box;
					a {
						display: block;
					}
					.column-thum {
						position: relative;
						width: 100%;
						height: 200px;
						overflow: hidden;
						background-color: #cfcfe4;
						background-size: cover;
						background-position: 50% 50%;
						background-repeat: none;
					}
					.column-info {
						background: $white;
						width: 100%;
						height: 10em;
						padding: 15px 20px;
						box-sizing: border-box;
						border: 1px solid $l-gray;
						border-top: none;
						@include transition(all, .6s);
						.column-title {
							font-size: 16px;
							font-weight: bold;
							line-height: 1.6;
							color: $black;
						}
					}
					&:hover {
						.column-info {
							background-color: $blue;
							border-color: $blue;
							* {
								color: #fff!important;
							}
						}
					}
				}
				.slick-prev ,
				.slick-next {
					position: absolute;
					top: 39%;
					left: -27px;
					z-index: 1;
					background-color: rgba(0,127,195,0.8);
					display: block;
					width: 30px;
					height: 43px;
					text-indent: -9999px;
					border: none;
					-webkit-appearance: none;
					border-radius: 0;
					&::before {
						content: "";
						display: block;
						width: 10px;
						height: 10px;
						border-top: 2px solid #fff;
						border-left: 2px solid #fff;
						transform: rotate(-45deg);
						position: absolute;
						top: 15px;
						left: 10px;
					}
				}
				.slick-next {
					left: auto;
					right: -27px;
					&::before {
						transform: rotate(135deg);
						left: 7px;
					}
				}
			}
			.link {
				width: 946px;
				margin: 0 auto;
				text-align: right;
				a {
					@include remSize(17);
					line-height: 1.7;
					color: #007fc3;
					font-weight: bold;
					text-decoration: underline;
					&:hover {
						text-decoration: none;
					}
					i {
						margin-right: 7px;
					}
				}
			}
		}

		.relation-link-box {
			width: 946px;
			margin: 40px auto 125px auto;
			ul {
				margin-left: 2px;
				li {
					font-size: 13px;
					font-weight: bold;
					margin-bottom: 15px;
					a {
						color: $blue;
						text-decoration: underline;
						&:hover {
							text-decoration: none;
						}
					}
				}
			}
			// 関連リンク スタイル追加
			ul.relation-link-box-link{
				li{
					margin-bottom:20px;
					line-height:2;
					font-weight:normal;
					@include remSize(12);
				}
				h4{
					font-weight:bold;
					@include remSize(14);
				}
				h5{
					font-weight:normal;
					@include remSize(12);
					&:before{
						content: "-";
						margin-right: 5px;
					}
				}
				a{
					color: $blue;
					font-weight:bold;
					text-decoration:underline;
				}
			}
		}
		.description-box {
			width: 100%;
			padding: 14px 0 11px 0;
			background: $blue;
			p {
				width: 100%;
				max-width: 960px;
				padding: 0 5px;
				color: $white;
				font-size: 10px;
				line-height: (16 / 10);
				margin: 0 auto;
				box-sizing: border-box;
			}
		}
		.modal-thumbnail-box {
			width: $content-width;
			margin: 0 auto 120px;
			ul {
				@include clearfix;
				margin-left: -24px;
				li {
					width: 461px;
					margin-left: 24px;
					float: left;
					.img {
						width: 100%;
						height: 360px;
						border: 1px solid $l-gray;
						box-sizing: border-box;
						margin-bottom:12px;
						img {
							width: 100%;
						}
					}
					.tl {
						color: $blue;
						font-size: percentage(20 / $font-size-base);
						font-weight: bold;
						margin-bottom: 10px;
						padding-left: 2px;
					}
					.txt {
						font-size: percentage(15 / $font-size-base);
						line-height: (23 / 15);
						padding-left: 2px;
						margin-bottom: 25px;
					}
					.btn-more {
						width: 200px;
						height: 50px;
						overflow: hidden;
						text-align: center;
						margin: 0 auto;
						a {
							width: 100%;
							height: 100%;
							display: block;
							background: $blue;
							color: $white;
							font-size: percentage(15 / $font-size-base);
							font-weight: bold;
							padding-top: 16px;
							box-sizing: border-box;
							border: 2px solid $blue;
							.sprite {
								margin-right: 10px;
							}
							&:hover {
								color: $blue;
								background: $white;
							}
						}
					}
					.btn-window {
						width: 200px;
						height: 50px;
						overflow: hidden;
						text-align: center;
						margin: 0 auto;
						a {
							width: 100%;
							height: 100%;
							display: block;
							background: $blue;
							color: $white;
							font-size: percentage(15 / $font-size-base);
							font-weight: bold;
							padding-top: 16px;
							box-sizing: border-box;
							border: 2px solid $blue;
							.sprite {
								margin-right: 10px;
							}
							.sprite-btn-more-link {
								background: url(../img/common/icon-window.png) no-repeat 0 0;
								width: 15px;
								height: 14px;
							}
							&:hover {
								color: $blue;
								background: $white;
								.sprite-btn-more-link {
									background: url(../img/common/icon-window-on.png) no-repeat 0 0;
									width: 15px;
									height: 14px;
								}
							}
						}
					}
					.righbox {
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.8);
						position: fixed;
						top: 0;
						left: 0;
						padding: 5% 0;
						display: none;
						box-sizing: border-box;
						overflow: hidden;
						z-index: 20000;
						.btn-close {
							width: $content-width;
							position: relative;
							margin: -34px auto 14px;
							z-index: 100;
							text-align: right;
							.sprite {
								cursor: pointer;
							}
						}
						.inner {
							width: $content-width;
							height: 100%;
							background: $white;
							margin: 0 auto;
							position: relative;
							overflow: scroll;
							overflow-x: hidden;
						}
					}
				}
			}
		}
		.graph-box {
			width: $content-width;
			margin: 0 auto 100px;
			.tl {
				color: $blue;
				font-size: percentage(24 / $font-size-base);
				font-weight: bold;
				margin-bottom: 45px;
			}
			.img {
				width: 926px;
				margin: 0 auto 40px;
				img {
					width: 100%;
				}
			}
			.txt {
				width: 926px;
				margin: 0 auto;
				color: #666;
				font-size: percentage(12 / $font-size-base);
				line-height: (20 / 12);
			}
		}
		.service-box {
			width: $content-width;
			margin: 0 auto 40px;
			.item {
				@include clearfix;
				height: 262px;
				position: relative;
				margin: 35px 0 60px 0;
				.img {
					float: left;
					width: 461px;
					height: 100%;
					box-sizing: border-box;
					border: 1px solid $l-gray;
					img {
						width: 100%;
					}
				}
				.txt-area {
					float: right;
					width: 457px;
					height: 100%;
					@include clearfix;
					.tl {
						color: $blue;
						font-size: percentage(24 / $font-size-base);
						font-weight: bold;
						line-height: (32 / 24);
						margin: -8px 0 15px 0;
					}
					.txt {
						font-size: percentage(15 / $font-size-base);
						line-height: 1.7;
					}
					.btn-more {
						width: 200px;
						height: 50px;
						overflow: hidden;
						text-align: center;
						position: absolute;
						right: 0;
						bottom: 0;
						a {
							width: 100%;
							height: 100%;
							display: block;
							background: $blue;
							color: $white;
							font-size: percentage(15 / $font-size-base);
							font-weight: bold;
							padding-top: 16px;
							box-sizing: border-box;
							border: 2px solid $blue;
							.sprite {
								margin-right: 10px;
								vertical-align: -1px;
							}
							&:hover {
								color: $blue;
								background: $white;
							}
						}
					}
				}
			}
		}
		.toggle-box {
			width: $content-width;
			margin: 0 auto 120px;
			border-top: 1px solid $blue;
			.item {
				padding: 10px 24px 0 24px;
				border-bottom: 1px solid $blue;
				cursor: pointer;
				.tab-area {
					@include clearfix;
					margin-bottom: 10px;
					.date {
						@include english;
						font-size: percentage(15 / $font-size-base);
						margin-right: 15px;
						padding-top: 10px;
					}
					.tl {
						display: inline-block;
						color: $blue;
						font-size: percentage(15 / $font-size-base);
						font-weight: bold;
						padding-top: 10px;
						.sprite {
							margin: 0 5px;
							vertical-align: 3px;
						}
					}
					.btn {
						float: right;
					}
				}
				.content-area {
					border-top: 1px solid $l-gray;
					display: none;
					padding-bottom: 33px;
					.tl {
						font-size: percentage(15 / $font-size-base);
						font-weight: bold;
						margin: 30px 0 0 0;
					}
					.inner {
						@include clearfix;
						ul {
							float: left;
							margin-right: 40px;
							li {
								@include clearfix;
								padding-left: 5px;
								font-size: percentage(13 / $font-size-base);
								margin-top: 15px;
								&:before {
									content: '−';
									display: block;
									float: left;
									margin-right: 5px;
								}
								.name {
									float: left;
								}
								.num {
									float: right;
								}
								.sprite {
									margin: 0 5px;
									vertical-align: 3px;
								}
							}
						}
					}
					.btn-more {
						width: 240px;
						height: 60px;
						margin: 30px auto 25px auto;
						overflow: hidden;
						text-align: center;
						a {
							width: 100%;
							height: 100%;
							display: block;
							padding-top: 23px;
							color: $white;
							font-size: percentage(15 / $font-size-base);
							font-weight: bold;
							background: $green;
							&:hover {
								background: $green-hover;
							}
						}
					}
				}
			}
		}
		.contact-box {
			width: 100%;
			height: 397px;
			box-sizing: border-box;
			padding: 45px 0 67px 0;
			background: url(../../assets/img/common/bg-contact-banner.jpg) no-repeat center center / cover;
			.tl {
				color: $blue;
				font-size: percentage(40 / $font-size-base);
				@include gothic-bbb;
				text-align: center;
				margin-bottom: 20px;
			}
			.txt {
				text-align: center;
				margin-bottom: 30px;
				font-size: percentage(15 / $font-size-base);
				line-height: 1.7;
			}
			.inner {
				width: 820px;
				height: 177px;
				padding: 50px 0;
				margin: 0 auto;
				box-sizing: border-box;
				text-align: center;
				background: rgba(255, 255, 255, 0.8);
				.tel-num {
					display: inline-block;
					vertical-align: top;
					margin: 7px 20px 0 0;
					text-align: left;
					width: 332px;
					.sprite {
						margin-bottom: 7px;
						float: left;
						margin: 2px 10px 0 0;
					}
					a{
						pointer-events:none;
						&.num {
							color: $blue;
							font-size: percentage(40 / $font-size-base);
							@include gothic-bbb;
						}
					}
					.time {
						letter-spacing: 1px;
						text-align: left;
						margin-left: 40px;
						font-size: percentage(15 / $font-size-base);
						margin-top: 10px;
					}
				}
				.btn-contact {
					display: inline-block;
					vertical-align: top;
					width: 340px;
					height: 74px;
					margin-left: 20px;
					overflow: hidden;
					a {
						color: $white;
						font-size: percentage(18 / $font-size-base);
						font-weight: bold;
						width: 100%;
						height: 100%;
						display: block;
						padding-top: 25px;
						background: $green;
						.sprite {
							margin-right: 10px;
							vertical-align: -6px;
						}
						&:hover {
							background: $green-hover;
						}
					}
				}
			}
		}
		// input
		input[type=text],
		input[type=email],
		input[type=tel],
		input[type=checkbox],
		input[type=radio],
		textarea {
			@include appearance(none);
			border: none;
			@include box-shadow(none);
		}
		.radio,
		.checkbox {
			display: none;
		}
		.checkbox + .checkbox-icon {
		  position: relative;
		  vertical-align: middle;
		}
		.checkbox + .checkbox-icon:before {
			background: url(../img/contact/checkbox.png) no-repeat 0 0;
			width: 20px;
			height: 18px;
			content: "";
			position: absolute;
			left: 0;
		}
		.checkbox:checked + .checkbox-icon:before {
		  background: url(../img/contact/checkbox_on.png) no-repeat 0 0;
			width: 20px;
			height: 18px;
			content: "";
			position: absolute;
			top: -3;
			left: 0;
		}
		.radio + .radio-icon {
		  position: relative;
		  vertical-align: middle;
		}
		.radio + .radio-icon:before {
			background: url(../img/contact/radio.png) no-repeat 0 0;
			width: 20px;
			height: 18px;
			content: "";
			position: absolute;
			left: 0;
		}
		.radio:checked + .radio-icon:before {
		  background: url(../img/contact/radio_on.png) no-repeat 0 0;
			width: 20px;
			height: 18px;
			content: "";
			position: absolute;
			top: -3;
			left: 0;
		}
		label {
			.radio-tl,
			.check-tl {
				vertical-align: middle;
				padding-left: 26px;
			}
		}
		textarea {
			width: 100%;
			border: solid 1px $l-purple;
			height: 70px;
			box-sizing: border-box;
			padding: 10px 13px 12px;
			@include remSize(14);
			display:block;
		}
		input[type=text],
		input[type=email],
		input[type=tel] {
			border: solid 1px $l-purple;
			box-sizing: border-box;
			@include remSize(14);
			padding: 0 13px;
			height: 30px;
			&.w-type1 {
				width: 100%;
			}
			&.w-type2 {
				width: 305px;
				margin-right: 5px;
				&.last {
					margin-right: 0;
				}
			}
		}
		// formbox
		.formbox {
			width: 840px;
			margin: 0 auto;
			.form-guide-text {
				text-align: right;
				margin-bottom: 10px;
				margin-bottom: 20px;
			}
			.icon-must-asterisk {
				color: #ff0000;
				display: inline-block;
				@include remSize(15);
				font-weight: bold;
			}
			dl {
				@include clearfix;
				margin-bottom: 15px;
				dt {
					width: 194px;
					float: left;
					@include remSize(15);
					font-weight: bold;
					line-height: 1.5;
					position: relative;
					display: inline-block;
					.icon-must {
						background: #ff0000;
						display: inline-block;
						width: auto;
						height: auto;
						content: "必須";
						color: $white;
						@include remSize(12);
						font-weight: bold;
						padding: 3px 5px;
					}
				}
				dd {
					margin-left: 194px;
					position: relative;
					top: -3px;
					.error {
						display: inline-block;
						background: $white;
						border: solid 2px #ff0000;
						color: #ff0000;
						padding: 7px 8px 6px;
						box-sizing: border-box;
						@include remSize(12);
						position: absolute;
						top: -33px;
						left: 0;
						display: none;
						&:after {
							background: url(../img/contact/arrow-error.png) no-repeat 0 0;
							width: 13px;
							height: 11px;
							display: block;
							content: "";
							position: absolute;
							bottom: -11px;
							left: 4px;
						}
					}
					&[data-validate=required] {
						input[type=text],
						input[type=email],
						input[type=tel] {
							background: rgb(255, 221, 221);
							&:focus {
								background: #fff;
							}
						}
						&.passed {
							input[type=text],
							input[type=email],
							input[type=tel] {
								background: #fff;
							}
						}
					}
				}
				&.category {
					.icon-must {
						margin-left: 3em;
						position: relative;
						top: -1.9em;
					}
					.icon-must-asterisk {
						position: absolute;
						top: 0;
						right: 20px;
					}
				}
				.check-group {
					width: 100%;
					@include clearfix;
					@include remSize(15);
					padding-top: 4px;
					li {
						width: 60%;
						float: left;
						margin-bottom: 13px;
						&.even {
							width: 40%;
						}
						&:nth-child(even) {
							width: 40%;
						}
					}
				}
				.radio-group {
					width: 100%;
					//@include clearfix;
					@include remSize(15);
					padding-top: 4px;
					li {
						float: left;
						margin-bottom: 13px;
						&:nth-child(1) {
							width: 39%;
						}
						&:nth-child(2) {
							width: 45%;
						}
						&:nth-child(3) {
							width: 16%;
						}
						label {
							cursor: pointer;
						}
					}
				}
				.form-sample {
					@include remSize(14);
					margin-top: 8px;
				}
			}
		}
		.privacy-box {
			background: #f4f4f4;
			width: 815px;
			height: 245px;
			margin: 0 auto;
			padding: 30px 5px 30px 30px;
			box-sizing: border-box;
			.inner {
				width: 100%;
				height: 100%;
				padding-right: 25px;
				box-sizing: border-box;
				overflow-y: scroll;
				@include remSize(14);
				line-height: (24 / 14);
			}
			.tl {
				font-weight: bold;
				margin-bottom: 8px;
			}
			p {
				margin-bottom: 18px;
			}
			dl {
				margin-bottom: 20px;
				dt {
					margin-bottom: 5px;
				}
				dd {
					margin-bottom: 15px;
					margin-left: 2px;
					@include remSize(13);
				}
			}
			.privacy-link {
				text-align: right;
				a {
					color: $blue;
					border-bottom: solid 1px $blue;
					&:hover {
						border-bottom-color: transparent;
					}
				}
			}
		}
		// flow-box
		.flow-box {
			width: 946px;
			margin: 0 auto 60px;
			border: solid 1px $l-purple;
			box-sizing: border-box;
			.inner {
				width: 100%;
				padding: 44px 110px 55px;
				box-sizing: border-box;
				.tl {
					@include remSize(24);
					line-height: (32 / 24);
					text-align: center;
					color: $blue;
					font-weight: bold;
					margin-bottom: 26px;
				}
				ul {}
				li {
					margin-top: 35px;
					&:first-child {
						margin-top: 0;
						.item {
							.tl {
								&:before {
									display: none;
								}
							}
						}
					}
					.item {
						@include clearfix;
						.tl {
							background: #e7e7e7;
							width: 250px;
							line-height: 50px;
							@include remSize(15);
							float: left;
							margin-right: 20px;
							margin-bottom: 0;
							position: relative;
							&:before {
								background: url(../img/common/arrow-flow.png) no-repeat 0 0;
								width: 40px;
								height: 18px;
								display: block;
								content: "";
								position: absolute;
								top: -25px;
								left: 50%;
								margin-left: -20px;
							}
						}
						.txt {
							display: table-cell;
							height: 50px;
							@include remSize(15);
							line-height: (24 / 15);
							vertical-align: middle;
						}
					}
					&.on {
						.item {
							.tl {
								background: #ced8f1;
							}
						}
					}
				}

			}
		}

		// movie
		#movie {
			margin-bottom: 100px;
			.tl-box {
				margin-bottom: 31px;
			}
			.inner {
				width: 946px;
				margin: 0 auto;
			}
		}

		//よくある質問
		.faq-box {
			width: $content-width;
			margin: 40px auto 120px;
			box-sizing: border-box;
			.faq-list{
				display:flex;
				justify-content: space-between;
				-webkit-flex-wrap: wrap;
				flex-wrap:wrap;
				li{
					display: flex;
					align-items:top;
					flex-basis: 49%;
					margin-bottom:20px;
					background-color:#edf3ff;
					line-height:1.5;
					@include remSize(15);
					dl{
						padding:30px;
						dt{
							position:relative;
							margin-left:30px;
							margin-bottom: 20px;
							color:$blue;
							font-weight:bold;
							@include remSize(17);
							&:before{
								position:absolute;
								content:"Q.";
								top: 0;
								left:-30px;
								@include remSize(22);
								line-height:1;
								font-weight:500;
							}
						}
						dd{
							position:relative;
							margin-left:30px;
							&:before {
								position:absolute;
								content: 'A.';
								top: 0;
								left:-30px;
								@include remSize(22);
								line-height:1;
								font-weight:500;
								color:#9f9e95;
							}
							a{
								display:inline-block;
								padding-left:20px;
								background-image: url(../img/common/icon-arrow-right-tranceparent.png);
								background-repeat: no-repeat;
								background-position:0 50%;

								color:$blue;
								font-weight:bold;
								text-decoration:underline;
							}
							.txt{
								@include remSize(12);
								color: $lite-gray;
							}
						}
					}
				}
			}
		}

	}
	// main

	// form
	.safari {
		main {
			.radio + .radio-icon,
			.checkbox + .checkbox-icon {
				top: -3px;
			}
		}
	}
	.chrome {
		main {
			.radio + .radio-icon,
			.checkbox + .checkbox-icon {
				top: -1px;
			}
		}
	}
}


/* ====================================================================================
	4. footer style
======================================================================================= */
// SP
@media screen and (min-width:0px) and ( max-width:640px) {
	body {
		.sprite.sprite-icon-arrow-footer {
			background: url(../img/common/sp/f-icon-arrow.png) no-repeat 0 0;
			background-size: 4px 8px;
			width: 4px;
			height: 8px;
			position: relative;
			top: -2px;
			margin-right: 4px;
		}
		.sprite-icon-link-footer {
			background: url(../img/common/sp/f-icon-window.png) no-repeat 0 0;
			background-size: 12px 12px;
			width: 12px;
			height: 12px;
			position: relative;
			top: -1px;
			margin-right: 3px;
		}
		.navi-services {
			.sprite-icon-link-footer {
				display: none;
			}
		}
		.sprite.sprite-logo-privacy-footer {
			background: url(../img/common/sp/f-privacy.jpg) no-repeat 0 0;
			background-size: 40px 40px;
			width: 40px;
			height: 40px;
		}
		.sprite-logo-intelligence-footer {
			background: url(../img/common/sp/f-logo.png) no-repeat 0 0;
			background-size: 95px 32px;
			width: 95px;
			height: 32px;
		}
	}
	footer {
		width: 100%;
		.g-navi-footer {
			padding: 0 15px;
			@include clearfix;
			border-top: solid 1px $l-purple;
			box-sizing: border-box;
			.inner {
				padding-top: 25px;
			}
			ul {
				li {
					width: 100%;
					margin-bottom: 18px;
					a {
						@include remSize(13);
						font-weight: bold;
						color: $black;
					}
					&.f-navi-service {
						ul {
							margin-top: 14px;
							@include clearfix;
							width: 100%;
							margin-bottom: 6px;
							li {
								width: 50%;
								float: left;
								margin-bottom: 14px;
								box-sizing: border-box;
								a {
									@include remSize(12);
									font-weight: normal;
									line-height: (30 / 24);
									display: inline-block;
									padding-left: 1em;
									position: relative;
									&:before {
										content: "-";
										margin-right: 5px;
										vertical-align: 1px;
										padding-left: 3px;
										color: $l-purple;
										display: block;
										position: absolute;
										top: 0;
										left: 0;
									}
								}
								&:nth-child(2n) {
									padding-left: 11px;
								}
							}
						}
					}
				}
				&:nth-child(2),
				&:nth-child(3) {
					width: 50%;
					float: left;
					box-sizing: border-box;
				}
				&:nth-child(3) {
					padding-left: 15px;
				}
			}
		}
		.navi-services {
			border-top: solid 1px $l-purple;
			border-bottom: solid 1px $l-purple;
			padding: 25px 15px 4px;
			box-sizing: border-box;
			.tl {
				width: 100%;
				@include remSize(13);
				font-weight: bold;
				margin-bottom: 20px;
				position: relative;
				display: block;
				&:after {
					background: url(../img/common/sp/f-toggle-open.png) no-repeat 0 0;
					background-size: 12px 7px;
					width: 12px;
					height: 7px;
					display: block;
					content: "";
					position: absolute;
					top: 50%;
					right: 0;
					margin-top: -4px;
				}
				&.on {
					&:after{
						background: url(../img/common/sp/f-toggle-close.png) no-repeat 0 0;
						background-size: 12px 7px;
					}
				}
			}
			ul {
				width: 100%;
				@include clearfix;
				display: none;
				li {
					width: 50%;
					float: left;
					@include remSize(12);
					font-weight: normal;
					box-sizing: border-box;
					margin-bottom: 16px;
					line-height: (30 / 24);
					a {
						color: $black;
						padding-left: 18px;
						position: relative;
						display: inline-block;
						&:before {
							background: url(../img/common/sp/f-icon-window.png) no-repeat 0 0;
							background-size: 12px 12px;
							width: 12px;
							height: 12px;
							display: block;
							content: "";
							position: absolute;
							top: 50%;
							left: 0;
							margin-top: -6px;
						}

					}
				}
			}
		}
		.navi-intelligence {
			border-top: solid 4px $blue;
			.tl {
				display: none;
			}
			ul {
				width: 100%;
				@include clearfix;
				li {
					width: 50%;
					height: 48px;
					float: left;
					padding: 10px 15px 0;
					box-sizing: border-box;
					display: table-cell;
					vertical-align: middle;
					border-bottom: solid 1px #d6d6d6;
					&:nth-child(2n) {
						border-left: solid 1px #d6d6d6;
					}
					&:last-child {
						padding-top: 18px;
					}
					a {
						@include remSize(12);
						color: $black;
						padding-left: 18px;
						display: inline-block;
						position: relative;
						line-height: (30 / 24);
						.sprite {
							display: none;
						}
						&:before {
							background: url(../img/common/sp/f-icon-window.png) no-repeat 0 0;
							background-size: 12px 12px;
							width: 12px;
							height: 12px;
							display: block;
							content: "";
							position: absolute;
							top: 50%;
							left: 0;
							margin-top: -6px;
						}
					}
				}
			}
		}
        .permissionnumber{
            margin: 10px auto 21px auto;
            padding: 0 10px;
            box-sizing: border-box;
}
		.navi-group {
			display: none;
		}
		.logos-footer {
			width: 100%;
			padding: 10px 10px 0 10px;
			@include clearfix;
			box-sizing: border-box;
			.logo-privacy {
				float: left;
				margin-bottom: 20px;
				dl {
					@include clearfix;
				}
				dt {
					width: 40px;
					height: 40px;
					float: left;
					display: block;
					margin-right: 10px;
				}
				dd {
					float: left;
					.txt {
						@include remSize(12);
						font-weight: bold;
						line-height: 1.4;
						margin-bottom: 2px;
					}
					a {
						color: $black;
						@include remSize(10);
						line-height: (28 / 20);
						text-decoration: underline;
						position: relative;
						top: 0;
					}
					i {
						display: none;
					}
				}
			}
			.logo-yuryoshokai {
				float: left;
				margin-bottom: 20px;
				dl {
					@include clearfix;
				}
				dt {
					width: 40px;
					height: 40px;
					float: left;
					display: block;
					margin-right: 10px;
					img {
						width: 100%;
						height: auto;
					}
				}
				dd {
					float: left;
					.txt {
						@include remSize(12);
						font-weight: bold;
						line-height: 1.4;
						margin-bottom: 2px;
					}
					.info {
						color: $black;
						@include remSize(10);
						line-height: (28 / 20);
						position: relative;
						top: 0;
					}
					i {
						display: none;
					}
				}
			}
			.logo-intelligence-footer {
				display: none;
			}
			.logo_persol {
				clear: both;
				text-align: center;
				padding: 10px;
			}
		}
		.copyright {
			display: block;
			padding: 4px 0 12px;
			font-size: 12px;
			text-align: center;
		}
		.pagetop {
			background: url(../img/common/sp/page-top.png) no-repeat 0 0;
			background-size: 38px 38px;
			width: 38px;
			height: 38px;
			display: block;
			text-indent: -9999px;
			overflow: hidden;
			position: fixed;
			bottom: 10px;
			right: 10px;
			display: none;
			z-index: 99999;
		}
	}
}

// PC
@media screen and (min-width:641px) {
	footer {
		width: 100%;
		padding-bottom: 20px;
		.g-navi-footer {
			padding: 23px 0 7px 0;
			border-top: 1px solid $l-purple;
			border-bottom: 1px solid $l-purple;
			.inner {
				@include clearfix;
				width: 960px;
				margin: 0 auto;
				padding: 0 10px;
				box-sizing: border-box;
				ul {
					float: left;
					margin-left: 55px;
					&:first-child {
						margin-left: 0;
					}
					li {
						margin-bottom: 15px;
						&>a {
							color: $black;
							font-weight: bold;
							.sprite {
								vertical-align: 0px;
								margin-right: 5px;
							}
							&.head {
								display: block;
								overflow: visible;
							}
							&:hover {
								text-decoration: underline;
							}
						}
						&.f-navi-service {
							width: 570px;
							ul {
								width: 100%;
								@include clearfix;
								margin-left: 0;
								margin-top: 13px;
								li {
									float: left;
									margin-bottom: 0;
									display: block;
									height: 26px;
									&.f-service-01 {
										width: 180px;
									}
									&.f-service-02 {
										width: 206px;
									}
									&.f-service-03 {
										width: 180px;
									}
									a {
										@include remSize(12);
										font-weight: normal;
										display: block;
										&:before {
											content: "-";
											margin-right: 5px;
											vertical-align: 1px;
											padding-left: 3px;
											color: $l-purple;
										}
									}
								}
							}
						}
						div {
							display: inline-block;
							a {
								color: $black;
								display: block;
								margin: 15px 25px 0 0;
								font-size: percentage(12 / $font-size-base);
								overflow: visible;
								&:before {
									content: '–';
									padding-right: 3px;
									vertical-align: 1px;
									padding-left: 3px;
									color: #007fc3;
								}
								&:hover {
									text-decoration: underline;
								}
							}
						}
					}
				}
			}
		}
		.navi-services {
			width: 960px;
			margin: 0 auto 35px auto;
			padding: 23px 10px 0 10px;
			box-sizing: border-box;
			.tl {
				font-weight: bold;
				letter-spacing: 1px;
				margin-bottom: 5px;
			}
			ul {
				@include clearfix;
				margin-left: 3px;
				li {
					float: left;
					margin-right: 2em;
					a {
						color: $black;
						display: block;
						margin: 13px 0 0 0;
						font-size: percentage(12 / $font-size-base);
						overflow: visible;
						.sprite {
							margin-right: 5px;
							vertical-align: -1px;
						}
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
		.navi-intelligence {
			width: 960px;
			margin: 0 auto 21px auto;
			padding: 0 10px;
			box-sizing: border-box;
			@include clearfix;
			.tl {
				float: left;
			}
			ul {
				float: right;
				@include clearfix;
				li {
					float: left;
					a {
						color: $black;
						font-size: percentage(11 / $font-size-base);
						margin-left: 30px;
						overflow: visible;
						.sprite {
							margin-right: 5px;
							vertical-align: -1px;
						}
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
        .permissionnumber{
            width: 960px;
            margin: 0 auto 21px auto;
            padding: 0 10px;
            box-sizing: border-box;
            font-weight:bold
                
}

		.navi-group {
			width: 960px;
			margin: 0 auto;
			padding: 0 0 20px 10px;
			box-sizing: border-box;
			border-bottom: 1px solid #dedede;
			.tl {
				color: $d-gray;
				font-size: percentage(11 / $font-size-base);
				font-weight: bold;
				margin-bottom: 10px;
			}
			ul {
				@include clearfix;
				li {
					float: left;
					padding-right: 5px;
					&:after {
						content: '|';
						font-size: percentage(10 / $font-size-base);
						padding-left: 5px;
						vertical-align: 1px;
					}
					&:last-child {
						padding-right: 0;
						&:after {
							content: '';
						}
					}
					a {
						color: $d-gray;
						font-size: percentage(11 / $font-size-base);
						overflow: visible;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
		.logos-footer {
			width: 960px;
			margin: 0 auto;
			padding: 15px 10px 25px;
			box-sizing: border-box;
			@include clearfix;
			.logo-privacy {
				float: left;
				margin-right: 15px;
				@include clearfix;
				dt {
					float: left;
				}
				dd {
					display: inline-block;
					margin: 0 0 0 12px;
					.txt {
						@include remSize(12);
						font-weight: bold;
						line-height: 1.3;
						margin-bottom: 6px;
					}
					a {
						color: $d-gray;
						font-size: percentage(10 / $font-size-base);
						line-height: 1.3;
						padding-bottom: 1px;
						border-bottom: 1px solid $d-gray;
						&:hover {
							border-bottom: 1px solid $white;
						}
					}
				}
			}
			.logo-yuryoshokai {
				float: left;
				@include clearfix;
				dt {
					float: left;
					width: 53px;
					img {
						width: 100%;
						height: auto;
					}
				}
				dd {
					display: inline-block;
					margin: 0 0 0 12px;
					.txt {
						@include remSize(12);
						font-weight: bold;
						line-height: 1.3;
						margin-bottom: 2px;
					}
					.info {
						color: $d-gray;
						line-height: 1.3;
						font-size: percentage(10 / $font-size-base);
					}
				}
			}
			.logo-intelligence-footer {
				float: right;
				margin-top: 10px;
			}
			.logo_persol {
				display: none;
			}
		}
		.copyright {
			width: 100%;
			@include remSize(10);
			color: #4c4c4c;
			text-align: center;
			display: inline-block;
		}
		.pagetop {
			position: fixed;
			bottom: 1px;
			right: 20px;
			bottom: 20px;
			z-index: 10000;
			display: none;
			cursor: pointer;
		}
	}
}