@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

#wrapper{
	overflow: hidden;
}

#top-mainimg{
	background: url("../img/top-main.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 600px;
	padding: 4rem;
	position: relative;
	@include xs{
		height: auto;
	}
	div.title{
		position: absolute;
    	right: 10%;
    	top: 20%;
		@include xs{
			position: inherit;
			right: 0;
			top: 0;
		}
	}
	h1{
		font-size: 40px;
		color: #F4CA45;
		@include xs{
			font-size: 25px;
			text-align: center;
		}
		span{
			font-size: 30px;
			@include xs{
				font-size: 16px;
				text-align: center;
			}
		}
	}
	img{
		max-width: 500px;
	}
	p{
		display: block;
		text-align: center;
		font-size: 25px;
		font-weight: bold;
		color: #ffffff;
		padding: 0.5rem;
		margin: 1.5rem 0;
		border: 1px solid #ffffff;
	}
}
#main-pr{
	margin-bottom: 4rem;
	h2{
		display: block;
		padding: 6rem 0;
		font-size: 24px;
		font-weight: bold;
		line-height: 4rem;
		text-align: center;
		position: relative;
		@include sm{
			padding: 4rem 0;
		}
		@include xs{
			font-size: 18px;
			line-height: 3rem;
			padding-bottom: 2rem;
		}
		&:before{
			content: '';
			position: absolute;
			display: inline-block;
			top: 15%;
			left: 5%;
			width: 350px;
			height: 220px;
			background-image: url("../img/top-img-left.svg");
			background-size: contain;
			background-repeat: no-repeat;
			vertical-align: middle;
			z-index:-1; 
			@include md{
				opacity: 0.3;
			}
			@include sm{
				top: 20%;
				left: 2%;
				width: 270px;
				height: 270px;
			}
			@include xs{
				display: none;
			}
		}
		&:after{
			content: '';
			position: absolute;
			display: inline-block;
			top: 15%;
			right: 0%;
			width: 350px;
			height: 220px;
			background-image: url("../img/top-img-right.svg");
			background-size: contain;
			background-repeat: no-repeat;
			vertical-align: middle;
			z-index:-1; 
			@include md{
				opacity: 0.3;
			}
			@include sm{
				top: 20%;
				right: 2%;
				width: 270px;
				height: 270px;
			}
			@include xs{
				display: none;
			}
		}
	}
	.fukidashi{
		background: #F5FAFA;
		padding: 3rem;
		border-radius: 1rem;
		box-shadow: 15px 15px 0px #EBEBEB;
		margin: 2rem;
		position: relative;
		&:after{
			content: "";
			position: absolute;
			top: 50%;
			left: 100%;
			margin-top: -15px;
			border: 20px solid transparent;
			border-left: 20px solid #F5FAFA;
			filter: drop-shadow(15px 15px 0px #EBEBEB);
			@include xs{
				display: none;
			}
		}
	}
	dt{
		font-size: 18px;
		margin-bottom: 2rem;
		div.balloon-right{
			display: table-cell;
			div{
				position: relative;
				margin-right: 1.5rem;
				padding: 0 5px;
				width: 45px;
				height: 45px;
				line-height: 45px;
				text-align: center;
				color: #ffffff;
				font-size: 28px;
				font-weight: bold;
				background: #276FD1;
				border-radius: 50%;
				box-sizing: border-box;
				vertical-align: middle;
					&:before{
					content: "";
					position: absolute;
					top: 50%;
					right: -15px;
					margin-top: -10px;
					border: 10px solid transparent;
					border-left: 10px solid #276FD1;
					z-index: 0;
				}
			}
		}
		p{
			display: table-cell;
			vertical-align: middle;
		}
	}
	dd{
		display: inline-block;
		margin-bottom: 2rem;
		div.balloon-right{
			display: table-cell;
			div{
				position: relative;
				margin-right: 1.5rem;
				padding: 0 5px;
				width: 45px;
				height: 45px;
				line-height: 45px;
				text-align: center;
				color: #ffffff;
				font-size: 28px;
				font-weight: bold;
				background: #FF801E;
				border-radius: 50%;
				box-sizing: border-box;
				vertical-align: middle;
					&:before{
					content: "";
					position: absolute;
					top: 50%;
					right: -15px;
					margin-top: -10px;
					border: 10px solid transparent;
					border-left: 10px solid #FF801E;
					z-index: 0;
				}
			}
		}
		p{
			display: table-cell;
			vertical-align: middle;
		}
	}
	dl + p{
		color: #FF801E;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		line-height: 3rem;
		@include xs{
			font-size: 15px;
		}
	}
	figure{
		width: 70%;
		margin: auto;
		figcaption{
			font-size: 24px;
			font-weight: 500;
			text-align: center;
			margin-top: 2rem;
		}
	}
	figure + div{
		p{
			display: block;
			font-size: 20px;
			text-align: center;
			line-height: 2rem;
			margin-top: 2rem;
			font-weight: 500;
			span{
				font-size: 16px;
				font-weight: normal;
			}
		}
		ul{
			text-align: center;
			li {
				display: inline-block;
				a{
					color: #ffffff;
					background: #FF801E;
					border: 1px solid #FF801E;
					width: 100%;
					padding: 0.5rem 1rem;
					width: 140px;
					display: block;
					&:hover{
						background: #ffffff;
						color: #FF801E;
					}
				}
			}
			li:last-child a{
				background: #45B035;
				border: 1px solid #45B035;
				&:hover{
						background: #ffffff;
						color: #45B035;
				}
			}
		}
	}
}

#service{
	background: url("../img/top-service-back.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 6rem 0;
	h3{
		padding: 0;
		border: none;
		margin: auto;
		margin-bottom: 2rem;
		display: block;
		font-size: 28px;
		text-align: center;
		&:after{
			content: '';
			display: inline-block;
			width: 45px;
			height: 60px;
			background-image: url("../img/top-title-nobori.png");
			background-size: contain;
			background-repeat: no-repeat;
			vertical-align: middle;
			
		}
	}
	li{
		padding: 1rem;
		dt a{
			color: #000000;
			font-size: 23px;
			font-weight: 500;
			text-align: center;
			display: block;
			p{
				display: inline-block;
				width: 200px;
				margin-top: 2rem;
				border-bottom: 3px solid #0084E0;
				padding-bottom: 1rem;
				@include md{
					width: 150px;
					font-size: 20px;
				}
			}
			&:hover p{
				color: #FF801E;
			}
			.link-box{
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				overflow: hidden;
				background: #ffffff;
				position: relative;
				z-index: 1;
				@include md{
					width: 150px;
					margin: auto;
				}
				@include sm{
					width: 200px;
					margin: auto;
				}
				@include xs{
					width: 150px;
				}
				img{
					transition: 0.5s all;
				}
			}
			&:hover img{
				transform: scale(1.2,1.2);
				transition: 0.5s all;
			}
		dd{
			text-align: center;
			margin-top: 0.5rem;
			@include xs{
				font-size: 14px;
			}
			}
		}
	}

	.nobori-type{
		display: block;
		text-align: center;
		border: 1px solid #0084E0;
		padding: 3rem 0 0;
		h4{
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 2rem;
			span{
				color: #0084E0;
			}
		}
		li{
			display: inline-block;
			text-align: center;
			width: 180px;
			@include xs{
				width: 175px;
				figcaption{
					margin-top: 1rem;
				}
			}
		}
	}
	.nobori-type + a{
		display: block;
		text-align: right;
		color: #0084E0;
		margin-top: 0.5rem;
		&:hover{
			color: #FF801E;
		}
		i{
			padding-left: 0.5rem;
		}
	}
}

.top-link-button{
	li:first-child{
		position: relative;
		overflow: hidden;
		padding: 0;
		height: 135px;
		&:after {
				position: absolute;
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				top: 0;
				background: url(../img/top-button-1.jpg) no-repeat center center;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-ms-background-size: cover;
				background-size: cover;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				transition: all .3s ease-out;
				}
			&:hover:after{
				opacity: .8;
				-moz-transform: scale(1.1);
				-webkit-transform: scale(1.1);
				-ms-transform: scale(1.1);
				transform: scale(1.1);
				}
			a{
				font-size: 28px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1;
				height: 100%;
				text-decoration: none;
				color: #fff;
				i{
					padding-left: 0.5rem
				}
		}

	}
	li:last-child{
		position: relative;
		overflow: hidden;
		padding: 0;
		height: 135px;
		&:after {
			position: absolute;
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			background: url(../img/top-button-2.jpg) no-repeat center center;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-ms-background-size: cover;
			background-size: cover;
			-webkit-transition: all .3s ease-out;
			-moz-transition: all .3s ease-out;
			-ms-transition: all .3s ease-out;
			transition: all .3s ease-out;
		}
		&:hover:after{
			opacity: .8;
			-moz-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
		}
		a{
			font-size: 28px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
			height: 100%;
			text-decoration: none;
			color: #fff;
			i{
				padding-left: 0.5rem
			}
		}
	}
}

#info{
	margin-top: 6rem;
	margin-bottom: 6rem;
	h3{
		padding: 0;
		border: none;
		margin: auto;
		margin-bottom: 2rem;
		display: block;
		font-size: 28px;
		text-align: center;
		&:after{
			content: '';
			display: inline-block;
			width: 45px;
			height: 60px;
			background-image: url("../img/fukidashi.svg");
			background-size: contain;
			background-repeat: no-repeat;
			vertical-align: middle;
			margin-left: 0.5rem;
		}
	}	
	.news-item{
		border-bottom: 1px solid #949494;
		border-top: 1px solid #949494;
		padding: 0.5rem 0;
		span{
			padding-right: 1rem;
		}
	}
	.morelink{
		color: #333333;
	}
}

#Google-map{
	overflow: hidden;
	iframe{
	display: block;
		width: 100%;
		min-height: 280px;
	}
}