@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;
  }
}
//ブレイクポイントを指定------ここまで
html {scroll-behavior: smooth;}
#wrapper{
	overflow-x: hidden;
	padding-top: 80px;
	@include sm{padding-top: 65px;}
}
a {
	color: #000000;
}
a:hover{
	color: #000000;
}
p{margin-bottom: 0;}

//ーーーーーーーーーーーーーーーーーーーーーーーーーーフォント指定
.josefin-sb{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
}
.josefin-rg{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
}
.josefin-li{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
}
//ーーーーーーーーーーーーーーーーーーーーーーーーーー文字色指定
.orange{
	 color: #ef821d;
}
.white{
	color: #fff;
}
.navy{
	color: #1b377f;
}
//ーーーーーーーーーーーーーーーーーーーーーーーーーー文字サイズ指定
.font-l1{
	font-size: 2rem;
}
.font-l2{
	font-size: 2.25rem;
}
.font-l3{
	font-size: 2.5rem;
}
.font-l4{
	font-size: 2.75rem;
}
.font-l5{
	font-size: 3rem;
}
.font-l6{
	font-size: 3.5rem;
}
//ーーーーーーーーーーーーーーーーーーーーーーーーーー文字ウェイト指定
.weight400{
	font-weight: 400
}
.weight500{
	font-weight: 500
}
.weight600{
	font-weight: 600
}

//ーーーーーーーーーーーーーーーーーーーーーーーーーー背景色指定
.bg-gradient{
	background: linear-gradient(to right, #ffa64f, #f77f2f);
}
.bg-white{
	background: #fff;
}
.bg-li-orange{
	background: #fbeee0;
}
.bg-gray{
	background: #f0f0f0;
}
//ーーーーーーーーーーーーーーーーーーーーーーーーーー字間指定
.letter-wide1{
	letter-spacing:0.15rem;
}
.letter-wide2{
	letter-spacing:0.3rem;
}
.letter-wide3{
	letter-spacing:0.5rem;
}

//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーヘッダー
#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
//    min-width: 1024px;
	.navSet {
		position: relative;
		display: block;
		width: 100%;
		.logo{
			position: absolute;
			top: 0px;
			left: 30px;
			@include md{top: 15px;}
			.logoSet{
				display: flex;
				align-items: center;
				column-gap: 20px;
				.logoPic{height: 70px;}
				.logoDesc{
					font-size: 1.25rem;
					margin-bottom: -0.5rem;
				}
				.logoType{height:20px;}
			}
		}
		.navArea {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			background: #fff;
			height: 80px;
			.navList{
				display: flex;
				justify-content:flex-end;
				padding-right: 2rem;
				margin-bottom: 0;
				height: 100%;
				align-items: center;
				.has-sub{
					display: flex;
					align-items: center;
					height: 100%;
					width: 120px;
					@include md{width: 80px;}
					.bussinessBtn{
						position: relative;
						width: 100%;
						height: 100%;
						&::after{
						  position: absolute;
						  bottom: 0px;
						  left: 0;
						  content: "";
						  width: 100%;
						  height: 3px;
						  background: #ef821d;
						  transform: scale(0, 1);
						  transform-origin: center top;
						  transition: transform 0.3s;
						}
						&:hover::after{transform: scale(1, 1);}
						span{
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							display: block;
							width: 100%;
							text-align: center;
						}
					}
				}
				.subNav{
					background-color: rgba(255,255,255,0.85);
					justify-content: center;
					overflow: hidden;
					position: absolute;
					left: 0;
					top: 80px;
					width: 100vw;
					min-height: 0;
					height: 0;
					z-index: 99;
					transition: all 100ms 0s ease-in;
					display: block;
					.subNavContents{
						display: flex;
						margin-top: 0.75rem;
						justify-content: center;
					}
					&.active{
						min-height: 50px;
						width: 100vw;
					}
					.bussiness-title{
						border-right: 1px solid #b9b9b9;
						padding: 0 3rem;
						margin-bottom: 0;
						a{
							display: block;
							transition: 2
						}
						span{
							color: #939393;
							font-size: 1.25rem;
							margin-left: 2rem;
						}
					}
					ul{
						display: flex;
						height: 35px;
						li{
							height: 100%;
							margin: 0 3rem;
							a{
								height: 100%;
 							    display: block;
								transition: 0.2s all linear;
								&:hover{color: #ef821d;}
								}
							}
						}
					}
				.companyNav{
						height: 100%;
						width: 120px;
						display: flex;
						align-items: center;
						justify-content: center;
						@include md{width: 80px;}
						}
				> li{
					> a{
						display: contents;
						transition: 0.2s all linear;
						&:hover{color: #ef821d;}
						}
					}
			}
			.phoneNum{
					margin: 0 1rem;
					color: #1b377f;
					font-size: 2rem;
					display: inline-block;
			}
		}
	}
}

//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーヘッダーイメージ
#headerImg{
	position: relative;
	margin-bottom: 15rem;
	@include xs{margin-bottom: 5rem;}
	.imgContainer{
		width: 100%;
		height: 200px;
		object-fit: cover;
		@include sm{height: 150px;}
		@include xs{height: 150px;}
	}
	.pageTitle{
		position: absolute;
		left: 10%;
		bottom: -80px;
		@include xs{
			position: absolute;
			top: 66%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
		}
		p{
			display: inline-block;
			background: #1b377f;
			color: #fff;
		}
		.mainTitle{
			font-size: 4rem;
			font-weight: 500;
			padding: 8px 15px 10px;
			margin-bottom: 1rem;
			@include xs{
				font-size: 3rem;
				padding: 9px;
				margin-bottom: 0.5rem;
			}
		}
		.subTitle{
			font-size: 1.75rem;
			padding: 5px 10px;
			@include xs{
				font-size: 1.25rem;
				padding: 5px 10px;
			}
		}
	}
	.copyright{
		position: absolute;
		right: 0px;
		top: 280px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-orientation: sideways;
		color: #939393;
		font-size: 1.25rem;
		height: 200px;
		@include sm{display: none;}
	}
}
//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー順番変え
.order-xs-1{
	@include xs{
		order: 1;
	}
}
.order-xs-2{
	@include xs{
		order: 2;
	}
}

//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーブログフィード
#blogitembox{margin-bottom: 3rem;}

#blogitembox > div{
	padding-left: 8px;
	padding-right: 8px;
	margin-top: 2rem;
	position: relative;
}
.blogitem {
	padding: 15px;
	margin: 0 5px;
	overflow: hidden;
	min-height: 350px;
	background: #fff;
	margin-bottom: 2rem;
//	&:hover img{opacity: 0.5;}
//	&:hover .blogtitle{color: #ef821d;}
	.trim {
		overflow: hidden;
		height: 200px;
		position: relative;
		margin-bottom: 1.5rem;
		@include lg{height: 160px;}
		@include sm{height: 120px;}
		@include xs{height: 200px;}
		img { 
			transition: 0.1s all linear;
		  position: absolute;
		  top: 0%;
		  left: 50%;
		  -webkit-transform: translate(-50%, 0%);
		  -ms-transform: translate(-50%, 0%);
		  transform: translate(-50%, 0%);
		  width: 100%;
		  height: auto;
		&:hover{opacity: 0.5;}
		}
	}
	.blogtitle {
		transition: 0.1s all linear;
			margin-top: 10px;
			font-weight: bold;
			font-size: 1.85rem;
			line-height: 18px;
			line-height: 1.8rem;
			text-align: justify;
			cursor: pointer;
			display: block;
			height: 20px;
			overflow: hidden;
		@include md{height: 17px;}
		@include xs{height: 19px;}
		&:hover{
			color: #ef821d;
			}
		}
		.text {
			margin-top: 10px;
			text-align: justify;
			font-size: 1.5rem;
			line-height: 2.5rem;
			padding-left: 0;
		}
}

//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー矢印ボタン
.arrowContainer{
		text-align: end;
		margin-right: 90px;
		margin-top: 1.5rem;
		.arrow{
			/*矢印と下線の基点とするためrelativeを指定*/
			position: relative;
			/*形状*/
			display: inline-block;
			padding: 0 20px;
			color: #333;
			text-decoration: none;
			outline: none;
			&::before{
				content: '';
				/*絶対配置で下線の位置を決める*/
				position: absolute;
				bottom: 10px;
				left: 120px;
				width: 80px;
				height: 1px;
				background:#333;
				/*アニメーションの指定*/
				transition: all .3s;
			}
			&::after{
				content: '';
				/*絶対配置で矢印の位置を決める*/
				position: absolute;
				bottom: 14px;
				left: 188px;
				width: 12px;
				height: 1px;
				background:#333;
				transform: rotate(35deg);
				/*アニメーションの指定*/
				transition: all .3s;
			}
			&:hover::before{left:135px;}
			&:hover::after{left:203px;}
		}
		.arrow-wh{
			color: #fff;
			&::before,&::after{background:#fff;}
		}
	}


//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーお問い合わせボタン
.contactBtn{
			margin: 0 1rem;
			width: 160px;
			display: inline-block;
			.contactLink{
				color: #fff;
				position: relative;
				display: block;
				height: 45px;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				z-index: 1;
				transition: 0.2s all ease-in;
				background: linear-gradient(90deg, #ffa64f 0%, #f77f2f 51%, #f76713 100%);
				background-position: 1% 50%;
				background-size: 200% auto;
				border-radius: 50px;
				&:hover{
					background-position: 99% 50%;
					color: #fff;
				}
			}
		}

//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーグラデーションボタン
.gradBtn{
	display: inline-block;
	a{
		color: #fff;
		position: relative;
		display: block;
		padding: 0 50px 0 30px;
		height: 45px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		z-index: 1;
		transition: 0.2s all ease-in;
		background: linear-gradient(90deg, #ffa64f 0%, #f77f2f 51%, #f76713 100%);
		background-position: 1% 50%;
		background-size: 200% auto;
		border-radius: 50px;
		&:hover{
			background-position: 99% 50%;
			color: #fff;
		}
		&::after{
			content: '';
			/*絶対配置で矢印の位置を決める*/
		 	position: absolute;
			top:42%;
			right: 25px;
			/*矢印の形状*/
			width: 8px;
			height: 8px;
			border-top: 2px solid #fff;
			border-right: 2px solid #fff;
			transform: rotate(45deg);
			/*アニメーションの指定*/
			transition: all .3s;
		}
		&:hover::after{right: 20px;}
	}
}
//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー下線つきネイビー見出し
.borderTitle{
	display: inline-block;
	text-align: center;
	color: #1b377f;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing:0.3rem;
	border-bottom: 3px solid #1b377f;
	margin-bottom: 1.25rem;
}

//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーフッター
#footer{
	position: relative;
	background: #1b377f;
	color: #fff;
	padding: 5rem 0;
	@include sm{padding: 3rem 0;}
	li a:hover{color:#ef821d; }
	.row{
		@include sm{
		text-align: center;
		justify-content: center;
		}
	}
	.row>ul>li{margin-right: 3rem;}
	.row ul li ul li{font-size: 1.25rem;}
	.footerLogo{
		p{margin-bottom: 0;}
	}
	.adress{font-size: 1.25rem;}
	.footerPhone{
		font-size: 3rem;
		@include sm{margin-top: 2rem;}
	}
	a{color: #fff;}
	ul a{transition: 100ms all linear;}
	
	.license-btn {
		margin: 0.5rem 0 1rem 0;
		a {
			font-size: 14px;
			font-size: 1.4rem;
			color: #1b377f;
			background-color: #fff;
			padding: 0.5rem 2rem 0.7rem 2rem;
			border-radius: 5px;
			transition: 0.2s;
			&:hover {
				color: #ef821d;
			}
			@include md {
				font-size: 12.5px;
				font-size: 1.25rem;
				padding: 0.5rem 1rem 0.7rem 1rem;
			}
			@include sm {
				padding: 0.5rem 2rem 0.7rem 2rem;
			}
		}
	}
	
	.contactBtn{
		margin: 1rem 0;
		a{
			color: #ef821d;
			background: #fff;
			&:hover{
				color: #fff;
				background: linear-gradient(to left, #ffa64f, #f77f2f);
			}
		}
	}
	.heichanTotop{
		width: 80px;
		position: absolute;
		right: 2rem;
		top: -130px;
		z-index: 50;
		transition: 100ms all linear;
		@include xs{
			width: 55px;
			top: -90px;
		}
		&:hover{
			top: -140px;
			@include xs{
				top: -100px;
			}
		}
	}
	.copyright{
		display: none;
		font-size: 1.25rem;
		text-align: center;
		@include sm{
			display: block;
		}
	}
}