@charset "UTF-8";
/*
 * top_layout.css
 *
 */

/* !opening
---------------------------------------------------------- */
.top-op,.top-op2{
	display:none;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0 auto;
	width: 100%;
	height: 100vh;
}
.top-op{
	display:none;
	z-index: 9999;
	background: #F1F1F3;
	animation-duration: 3.6s;
	animation-delay:1s;
	animation-fill-mode: forwards;
	animation-name: top-op;
}
	.top-op img{
		position: absolute;
		width: 329px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		-webkit-animation: logo 2.5s forwards;
		animation: logo 2.5s forwards;
	}
.top-op2{
	z-index: 10000;
	background: #002060;
	animation-duration: 1s;
	animation-delay: 0.3s;
	animation-fill-mode: forwards;
	animation-name: top-op2;
}
 
@keyframes top-op{
0% {
	width: 100%;
	opacity:1;
}
70% {
	width: 100%;
	opacity:1;
}
100% {
	width: 100%;
	opacity:0;
}
}
@keyframes top-op2{
0% {
	width: 100%;
	left:0;
}
50% {
	width: 100%;
}
100% {
	width: 0%;
	left: 100%;
}
}
@keyframes logo {
0% {
	opacity: 1;
}
40% {
	transform: rotate(0deg);
}
100% {
	transform: scale(0.8);
}
}

@media screen and (max-width:767px){
	.top-op img{
		width: 260px;
	}
}

/* !mainvisual
---------------------------------------------------------- */
.mainWrap {
	width:100%;
	height:730px;
	position: relative;
	top:120px;
	margin-bottom: 120px;
}
.mainWrap:before {
	position: absolute;
	content:"";
	width: 100%;
	height: 75%;
	background-color: #FFF;
	top:0;
	left:0;
	z-index:1;
}
.main {
	width: 100%;
	max-width:1100px;
	height:730px;
	background: url("../../img/main01.jpg") 50% 50% no-repeat;
	background-size: cover;
	position: relative;
	margin: 0 auto;
	z-index:2;
}
		.main h2 {
			position: absolute;
			font-family: 'Noto Serif JP', serif;
			font-size:48px;
			font-weight:700;
			color: #FFF;
			line-height: 1.5;
			letter-spacing: 0.04em;
			text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
			top:36%;
			left:6%;
			z-index: 1;
		}
			.main h2 span.emp {
				font-size:130%;
			}
			.main h2 span.name {
				display: block;
				font-size:16px;
				letter-spacing: 0.4em;
				margin-top: 1.2em;
			}
		
@keyframes copy {
    0% {
        opacity: 0;
		top:80px;
    }
	50% {
        opacity: 0;
		top:80px;
    }
	100% {
        opacity: 1;
		top:0;
    }
}
@keyframes copy2 {
    0% {
        opacity: 0;
    }
	60% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}

@media screen and (max-width:1039px){
.mainWrap {
	height:560px;
	top:70px;
	margin-bottom:70px;
}
.main {
	width:auto;
	height:560px;
	margin: 0 30px;
}
		.main h2 {
			font-size:44px;
			top:30%;
		}
			.main h2 span.name {
				font-size:15px;
			}
}

@media screen and (max-width:767px){
.mainWrap {
	height:240px;
}
.mainWrap:before {
	height: 70%;
}
.main {
	height:240px;
	margin: 0 25px;
}
		.main h2 {
			font-size:22px;
			top:30%;
			left:6%;
		}
			.main h2 span.name {
				font-size:9px;
			}
}

@media screen and (max-width:360px){
		.main h2 {
			font-size:20px;
		}
			.main h2 span.name {
				font-size:8px;
			}
}

@media screen and (max-width:359px){
		.main h2 {
			font-size:18px;
			top:30%;
		}
}

/* !contents
---------------------------------------------------------- */
#contents {
	width:100%;
	padding-top:120px;
}

@media screen and (max-width:1039px){
#contents {
	padding-top:100px;
}
}

@media screen and (max-width:767px){
#contents {
	padding-top:80px;
}
}

/* !アニメーション
---------------------------------------------------------- */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 100px);
  transition: 1.6s .4s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_right {
  opacity: 0;
  transform: translate(100px, 0);
  transition: 1.6s .4s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_left {
  opacity: 0;
  transform: translate(-100px, 0);
  transition: 1.6s .4s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* !代表挨拶
---------------------------------------------------------- */
.topGreeting {
	width:100%;
	position: relative;
	margin-bottom: 150px;
}
	.topGreeting div.bgBox {
		position: absolute;
		width:78%;
		height: 100%;
		background-color: #FFF;
		z-index: 1;
	}
	.topGreeting div.block {
		width:100%;
		padding:100px 50px;
	}
		.topGreeting div.block div.inner {
			width:100%;
			max-width:1100px;
			margin: 0 auto;
			position: relative;
		}
			.topGreeting div.block div.inner div.photo {
				position: relative;
				width:100%;
				height: 500px;
				background: url("../../img/greeting_img.jpg") 100% 50% no-repeat;
				background-size: cover;
				z-index: 2;
			}
			.topGreeting div.block div.inner div.contentsBox {
				position: absolute;
				width:56%;
				padding:0 60px 50px 0;
				background-color: #FFF;
				z-index: 3;
				top:0;
				left:0;
			}
				.topGreeting div.block div.inner div.contentsBox h2 {
					font-family: 'Noto Serif JP', serif;
					font-size:18px;
					font-weight:600;
					color: #002060;
					line-height: 1.4;
					letter-spacing: 0.1em;
					margin-bottom: 40px;
				}
					.topGreeting div.block div.inner div.contentsBox h2 span {
						display: block;
						font-family: "Libre Baskerville", serif;
						font-size:48px;
  						font-weight: 400;
						letter-spacing: 0.1em;
					}
				.topGreeting div.block div.inner div.contentsBox p {
					margin-bottom: 40px;
				}
				.topGreeting div.block div.inner div.contentsBox a.btn {
					position: relative;
					border: 1px solid #002060;
					padding: 8px 30px;
					display: inline-block;
					font-family: 'Noto Serif JP', serif;
					font-weight:600;
					text-align: center;
					text-decoration: none;
					color: #002060;
					letter-spacing: 0.1em;
					outline: none;
					transition: all .2s linear;
				}
					.topGreeting div.block div.inner div.contentsBox a.btn:hover {
						background:#002060;
						color:#FFF;
					}
					.topGreeting div.block div.inner div.contentsBox a.btn::before {
						content:"";
						position: absolute;
						top:50%;
						right:-26px;
						width:40px;
						height:1px;
						background:#002060;
						transition: all .2s linear;
					}
					.topGreeting div.block div.inner div.contentsBox a.btn::after {
						content:"";
						position: absolute;
						top: 26%;
						right: -21px;
						width:1px;
						height:12px;
						background:#002060;
						transform:skewX(45deg);
						transition: all .2s linear;
					}
						.topGreeting div.block div.inner div.contentsBox a.btn:hover::before {
							right:-36px;
						}
						.topGreeting div.block div.inner div.contentsBox a.btn:hover::after {
							right:-31px;
						}

@media screen and (max-width:1039px){
.topGreeting {
	margin-bottom: 120px;
}
	.topGreeting div.block {
		padding:90px 30px;
	}
			.topGreeting div.block div.inner div.photo {
				height: 460px;
			}
			.topGreeting div.block div.inner div.contentsBox {
				padding:0 50px 50px 0;
			}
				.topGreeting div.block div.inner div.contentsBox h2 {
					font-size:16px;
					margin-bottom: 35px;
				}
					.topGreeting div.block div.inner div.contentsBox h2 span {
						font-size:40px;
					}
				.topGreeting div.block div.inner div.contentsBox p {
					margin-bottom: 35px;
				}
					.topGreeting div.block div.inner div.contentsBox a.btn:hover {
						background:#FFF;
						color:#002060;
					}
					.topGreeting div.block div.inner div.contentsBox a.btn::after {
						top: 24%;
					}
						.topGreeting div.block div.inner div.contentsBox a.btn:hover::before {
							right:-26px;
						}
						.topGreeting div.block div.inner div.contentsBox a.btn:hover::after {
							right:-21px;
						}
}
	
@media screen and (max-width:767px){
.topGreeting {
	margin-bottom: 100px;
}
	.topGreeting div.bgBox {
		display: none;
	}
	.topGreeting div.block {
		width:100%;
		padding:0 25px;
	}
			.topGreeting div.block div.inner div.photo {
				height: 200px;
				margin-top:-50px;
			}
			.topGreeting div.block div.inner div.contentsBox {
				position: inherit;
				width:auto;
				padding:25px 20px 25px 20px;
				top:0;
				left:auto;
				margin:0 20px;
			}
				.topGreeting div.block div.inner div.contentsBox h2 {
					font-size:14px;
				}
					.topGreeting div.block div.inner div.contentsBox h2 span {
						font-size:30px;
					}
					.topGreeting div.block div.inner div.contentsBox a.btn::after {
						top: 26%;
					}
}

/* !業務内容
---------------------------------------------------------- */
.topService {
	width:100%;
	padding:0 50px 80px 50px;
	background-color: #FFF;
}
	.topService div.inner {
		width:100%;
		max-width:1100px;
		margin: 0 auto;
	}
		.topService div.inner h2 {
			position: relative;
			font-family: 'Noto Serif JP', serif;
			font-size:18px;
			font-weight:600;
			color: #002060;
			line-height: 1.4;
			letter-spacing: 0.1em;
			top: -52px;
			margin-bottom: 10px;
		}
			.topService div.inner h2 span {
				display: block;
				font-family: "Libre Baskerville", serif;
				font-size:70px;
  				font-weight: 400;
				letter-spacing: 0.1em;
			}
		.topService div.inner ul.menu {
			width:100%;
			display: flex;
			flex-wrap: wrap;
		}
			.topService div.inner ul.menu li {
				width:23%;
				margin-right: 2.666%;
				margin-bottom: 30px;
			}
			.topService div.inner ul.menu li:nth-child(4n) {
				margin-right: 0;
			}
				.topService div.inner ul.menu li a {
					position: relative;
					display: block;
					width:100%;
					height: 100%;
					border:1px solid #E3E7ED;
					padding:65px 5px 45px 5px;
					font-family: 'Noto Serif JP', serif;
					font-size:18px;
					font-weight:600;
					color: #002060;
					text-align: center;
					letter-spacing: 0.06em;
					line-height: 1.5;
					transition:.6s;
				}
					.topService div.inner ul.menu li a:hover {
						background-color: #E3E7ED;
					}
					.topService div.inner ul.menu li a:before {
						position: absolute;
						content:"";
						width:28px;
						height: 25px;
						background: url("../img/icon_libra.png") 0 0 no-repeat;
						background-size: 28px 25px;
						top:25px;
						left:50%;
						margin-left: -14px;
						transition:.2s;
						opacity:.3;
					}
						.topService div.inner ul.menu li a:hover:before {
							opacity:1;
						}
					.topService div.inner ul.menu li a:after {
						position:absolute;
						content:"";
						display: inline-block;
						width: 10px;
						height: 10px;
						margin: 0 10px;
						border-top: 2px solid #002060;
						border-left: 2px solid #002060;
						transform: rotate(225deg);
						bottom:20px;
						left:50%;
						margin-left: -5px;
						transition:.2s;
						opacity:.3;
					}
						.topService div.inner ul.menu li a:hover:after {
							opacity:1;
							bottom:15px;
						}

@media screen and (max-width:1039px){
.topService {
	padding:0 30px 60px 30px;
}
		.topService div.inner h2 {
			font-size:16px;
			top: -44px;
			margin-bottom: 10px;
		}
			.topService div.inner h2 span {
				font-size:60px;
			}
		.topService div.inner ul.menu {
			width:100%;
			display: flex;
		}
			.topService div.inner ul.menu li {
				width:23%;
				margin-right: 2.666%;
				
			}
			.topService div.inner ul.menu li:nth-child(4n) {
				margin-right: 0;
			}
				.topService div.inner ul.menu li a {
					display: block;
					width:100%;
					height: 100%;
					border:1px solid #E3E7ED;
					padding:65px 5px 45px 5px;
					font-family: 'Noto Serif JP', serif;
					font-size:14px;
					font-weight:600;
					color: #002060;
					text-align: center;
					letter-spacing: 0.04em;
					transition:.6s;
				}
					.topService div.inner ul.menu li a:hover {
						background-color: #FFF;
					}
						.topService div.inner ul.menu li a:hover:before {
							opacity:.3;
						}
						.topService div.inner ul.menu li a:hover:after {
							opacity:.3;
							bottom:20px;
						}
}
	
@media screen and (max-width:767px){
.topService {
	padding:0 25px 50px 25px;
}
		.topService div.inner h2 {
			font-size:14px;
			top: -32px;
			margin-bottom: 10px;
		}
			.topService div.inner h2 span {
				font-size:44px;
			}
		.topService div.inner ul.menu {
			width:100%;
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto;
		}
			.topService div.inner ul.menu li {
				width:48%;
				margin-right: 4%;
				margin-bottom: 20px;
			}
			.topService div.inner ul.menu li:nth-child(even) {
				margin-right: 0;
			}
				.topService div.inner ul.menu li a {
					display: block;
					width:100%;
					height: 100%;
					padding:65px 5px 45px 5px;
					font-size:14px;
				}
}

@media screen and (max-width:360px){
				.topService div.inner ul.menu li a {
					font-size:13px;
				}
}

@media screen and (max-width:359px){
				.topService div.inner ul.menu li a {
					font-size:12px;
				}
}

/* !バナー
---------------------------------------------------------- */
.topBnr {
	width:100%;
	padding:100px 50px 100px 50px;
}
	.topBnr ul {
		width:100%;
		max-width:1100px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
	}
		.topBnr ul li {
			width:48%;
		}
			.topBnr ul li a {
				position:relative;
				overflow: hidden;
				width:100%;
				height:280px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
				.topBnr ul li a div.bg {
					position:absolute;
					width:100%;
					height:100%;
					background-position:50% 50%;
					background-repeat:no-repeat;
					background-size:cover;
					top:0;
					left:0;
					z-index:50;
				}
				.topBnr ul li:first-child a div.bg {
					background-image: url("../../img/faq_bnr.jpg");
				}
				.topBnr ul li:last-child a div.bg {
					background-image: url("../../img/about_bnr.jpg");
				}
				.topBnr ul li a div.mask {
					position:absolute;
					width:100%;
					height:100%;
					background:rgba(8, 19, 39, .4);
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					z-index:51;
					-webkit-transform: scaleX(1);
					transform: scaleX(1);
					-webkit-transform-origin: top right;
					transform-origin: top right;
					-webkit-transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
					transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
					transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
					transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
				}
					.topBnr ul li a:hover div.mask {
						background:rgba(8, 19, 39, .4);
						transform: scaleX(0);
						-webkit-transform-origin: top left;
						transform-origin: top left;
					}
					.topBnr ul li a p {
						position:relative;
						font-family: 'Noto Serif JP', serif;
						font-size:20px;
						font-weight:600;
						color: #FFF;
						text-align:center;
						letter-spacing:0.14em;
						line-height:1.6;
						z-index:51;
					}

@media screen and (max-width:1039px){
.topBnr {
	padding:90px 30px 90px 30px;
}
			.topBnr ul li a {
				height:220px;
			}
					.topBnr ul li a:hover div.mask {
						transform: scaleX(1);
						-webkit-transform-origin: top right;
						transform-origin: top right;
					}
					.topBnr ul li a p {
						font-size:18px;
					}
}

@media screen and (max-width:767px){
.topBnr {
	padding:70px 25px 70px 25px;
}
	.topBnr ul {
		max-width:320px;
		flex-wrap: wrap;
		margin: 0 auto;
	}
		.topBnr ul li {
			width:100%;
			margin-bottom:20px;
		}
		.topBnr ul li:last-child {
			margin-bottom:0;
		}
			.topBnr ul li a {
				height:160px;
			}
					.topBnr ul li a p {
						font-size:15px;
					}
}