@charset "utf-8";
/* CSS Document */

.container{
	width:auto;
}

/* ---------------------------------------------
　keyvisual
------------------------------------------------ */

.keyvisual{
	position:relative;
	margin:100px 0 0;
	padding:0 50px 30px;
}

.keyvisual::before{
	border-style:solid;
	border-width:0 0 540px 650px;
	border-color:transparent transparent #001781 transparent;
	content:"";
	width:0;
	height:0;
	position:absolute;
	right:0;
	bottom:0;
	z-index:-1;
}

.keyvisual .slide{
	height:520px;
}

.keyvisual #slide01{
	background:url(../images/img_key_001.jpg) 50% 50% / cover no-repeat;
}

.keyvisual #slide02{
	background:url(../images/img_key_002.jpg) 50% 50% / cover no-repeat;
}

.keyvisual #slide03{
	background:url(../images/img_key_003.jpg) 50% 50% / cover no-repeat;
}

.keyvisual #slide04{
	background:url(../images/img_key_004.jpg) 50% 50% / cover no-repeat;
}

.keyvisual .slide span{
	color:#fff;
	font-family:'Montserrat', sans-serif;
	font-size:250%;
	font-weight:600;
	text-align:center;
	letter-spacing:0.1em;
	line-height:520px;
}

.keyvisual .slick-track{
	background:#eee;
}

/* ---------------------------------------------
　content
------------------------------------------------ */

.content{
	float:none;
	width:auto;
}

/* news-area */

.news-area{
	position:relative;
	padding:0 50px;
}

.news-area::before{
	background:#f5f5f5;
	content:"";
	height:219px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:-1;
}

.news-area.tips::before {
	display: none;
}

.news-area .inner{
	display:flex;
}

.news-area .inner::after{
	display:none;
}

.news-area .news-title{
	width:242px;
	margin:55px 0 0;
}

.news-area .news-title h2{
	background:none;
	color:#001781;
	font-family:'Montserrat', sans-serif;
	font-size:250%;
	font-weight:600;
	letter-spacing:0.2em;
	line-height:1;
	margin:0;
	padding:0;
}

.news-area .news-title h2.ja {
	font-size: 200%;
	letter-spacing:0.1em;
}

.news-area .news-title h2::before{
	display:none;
}

.news-area .more {
	line-height:1;
	margin:39px 0 0;
	text-align: center;
    width: 196px;
    line-height: 50px;
    margin: 24px 0 0;
}

.news-area .more a{
    background: #001781;
    border-radius: 25px;
    display: block;
    transition: opacity 0.2s ease;
}

.news-area .more a:link,
.news-area .more a:visited,
.news-area .more a:hover,
.news-area .more a:active{
    color: #fff;
    text-decoration: none;
}

.news-area .more a:hover,
.news-area .more a:active{
	opacity:0.5;
}

.news-area .news-list{
	margin:59px 0 0;
}

.news-area .news-list ul{
	display:flex;
	margin:0;
}

.news-area .news-list ul li{
	width:299px;
	margin:0 29px 0 0;
}

.news-area .news-list ul li:last-child{
	margin:0;
}

.news-area .news-list ul li a:link,
.news-area .news-list ul li a:visited,
.news-area .news-list ul li a:hover,
.news-area .news-list ul li a:active{
	text-decoration:none;
}

.news-area .news-list ul li .photo{
	position:relative;
	overflow:hidden;
	width:299px;
	height:199px;
}

.news-area .news-list ul li .photo img{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:50%;
	transform:translate(-50%,0);
}

.news-area .news-list ul li dl{
	margin:23px 2px 0;
}

.news-area .news-list ul li dl dt{
	color:#999;
	font-family:'Montserrat', sans-serif;
	letter-spacing:0.075em;
}

.news-area .news-list ul li dl dd{
	color:#111;
	line-height:1.56;
	margin:8px 0 0;
}

.news-area .news-list ul li a[href$='pdf'] dl dd::after{
  background:url(../../images/fileicon/pdf.png) no-repeat 0 0;
	content:"";
	display:inline-block;
	width:16px;
	height:16px;
	vertical-align:middle;
	margin:0 0 0 3px;
}

/* value-area */

.value-area{
	background:url(../images/bg_value_001.jpg) 0 0 no-repeat, url(../images/bg_value_002.jpg) 100% 0 no-repeat;
	min-height:653px;
	margin:47px 0 0;
	padding:162px 50px 0;
}

.value-area h2{
	background:none;
	display:block;
	font-size:100%;
	text-align:center;
	line-height:1;
	position:relative;
	margin:0;
	padding:0;
}

.value-area h2::before{
	display:none;
}

.value-area h2 .logo{
	display:block;
	width:114px;
	position:absolute;
	top:-32px;
	left:50%;
	margin:0 0 0 -57px;
}

.value-area h2 .logo img{
	width:114px;
	height:auto;
}

.value-area h2 svg{
	overflow:visible;
}

.value-area h2 text{
	font-family:'Montserrat', sans-serif;
	font-size:375%;
	font-weight:600;
  stroke:#8993bf;
  fill:rgba(255, 255, 255, 0);
  text-anchor:middle;
  dominant-baseline:alphabetic;
  stroke-width:1px;
  stroke-linejoin:round;
}

.value-area h2 .ja{
	color:#000;
	display:block;
	font-size:219%;
	letter-spacing:0.2em;
	margin:-37px 0 0;
}

.value-area p{
	width:496px;
	margin:50px auto 0;
}

.value-area .more{
	text-align:center;
	width:196px;
	line-height:50px;
	margin:24px auto 0;
}

.value-area .more a{
	background:#001781;
	border-radius:25px;
	display:block;
  transition:opacity 0.2s ease;
}

.value-area .more a:link,
.value-area .more a:visited,
.value-area .more a:hover,
.value-area .more a:active{
	color:#fff;
	text-decoration:none;
}

.value-area .more a:hover,
.value-area .more a:active{
	opacity:0.5;
}

/* service-area */

.service-area{
	position:relative;
	margin:-70px 0 0;
	padding:0 50px;
	z-index:2;
}

.service-area::before{
  background:#e5e7f2;
  content:"";
  width:100%;
  height:598px;
  position:absolute;
  left:0;
  top:27px;
  transform:skewY(-9deg);
	z-index:-1;
}

.service-area h2{
	background:none;
	display:block;
	font-size:100%;
	text-align:center;
	line-height:1;
	position:relative;
	margin:0;
	padding:0;
}

.service-area h2::before{
	display:none;
}

.service-area h2 svg{
	overflow:visible;
}

.service-area h2 text{
	font-family:'Montserrat', sans-serif;
	font-size:375%;
	font-weight:600;
  stroke:#8993bf;
  fill:rgba(255, 255, 255, 0);
  text-anchor:middle;
  dominant-baseline:alphabetic;
  stroke-width:1px;
  stroke-linejoin:round;
}

.service-area h2 .ja{
	color:#000;
	display:block;
	font-size:219%;
	letter-spacing:0.2em;
	margin:-37px 0 0;
}

.service-area ul{
	display:flex;
	justify-content:center;
	margin:40px -20px 0;
}

.service-area ul li{
	width:270px;
	margin:0 20px;
}

.service-area ul li:nth-child(even){
	margin-top:60px;
}

.service-area ul li a{
	display:block;
	position:relative;
	transition:opacity 0.2s ease;
}

.service-area ul li a:hover{
	opacity:0.5;
}

.service-area ul li a:hover img{
	opacity:1;
}

.service-area ul li .text{
	color:#fff;
	font-size:125%;
	font-weight:bold;
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	white-space:nowrap;
}

.service-area ul li .text img{
	display:block;
	margin:0 auto 13px;
}

.service-area ul li a:hover .text img{
	opacity:1;
}

/* case-area */

.case-area{
	margin:188px 0 0;
	padding:0 50px;
}

.case-area h2{
	background:none;
	display:block;
	font-size:100%;
	text-align:center;
	line-height:1;
	position:relative;
	margin:0;
	padding:0;
}

.case-area h2::before{
	display:none;
}

.case-area h2 svg{
	overflow:visible;
}

.case-area h2 text{
	font-family:'Montserrat', sans-serif;
	font-size:375%;
	font-weight:600;
  stroke:#8993bf;
  fill:rgba(255, 255, 255, 0);
  text-anchor:middle;
  dominant-baseline:alphabetic;
  stroke-width:1px;
  stroke-linejoin:round;
}

.case-area h2 .ja{
	color:#000;
	display:block;
	font-size:219%;
	letter-spacing:0.2em;
	margin:-37px 0 0;
}

.case-area .case-list ul{
	display:flex;
	flex-wrap:wrap;
	margin:-6px -20px 0;
}

.case-area .case-list ul li{
	width:373px;
	margin:61px 20px 0;
}

.case-area .case-list ul li a{
	display:block;
}

.case-area .case-list ul li a:link,
.case-area .case-list ul li a:visited,
.case-area .case-list ul li a:hover,
.case-area .case-list ul li a:active{
	text-decoration:none;
}

.case-area .case-list ul li .photo{
	position:relative;
	overflow:hidden;
	width:373px;
	height:254px;
}

.case-area .case-list ul li .photo img{
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.case-area .case-list ul li .photo img:hover {
  opacity:1;
}

.case-area .case-list ul li a:hover .photo img,
.case-area .case-list ul li a:active .photo img{
  opacity:0.5;
}

.case-area .case-list ul li .cat{
	background:#e5e7f2;
	color:#001781;
	display:inline-block;
	font-size:88%;
	line-height:35px;
	margin:28px 0 0;
	padding:0 20px;
}

.case-area .case-list ul li .title{
	color:#000;
	font-size:125%;
	font-weight:bold;
	line-height:1.75;
	margin:13px 0 0;
}

.case-area .case-list ul li a:hover .title,
.case-area .case-list ul li a:active .title{
	color:#418ace;
}

.case-area .more{
	text-align:center;
	width:196px;
	line-height:50px;
	margin:70px auto 0;
}

.case-area .more a{
	background:#001781;
	border-radius:25px;
	display:block;
  transition:opacity 0.2s ease;
}

.case-area .more a:link,
.case-area .more a:visited,
.case-area .more a:hover,
.case-area .more a:active{
	color:#fff;
	text-decoration:none;
}

.case-area .more a:hover,
.case-area .more a:active{
	opacity:0.5;
}

/* company-recruit */

.company-recruit{
	background:url(../images/bg_comapy_recruit.jpg) 50% 50% / cover no-repeat;
	margin:100px 0 0;
	padding:96px 50px 98px;
}

.company-recruit .company-area{
	float:left;
	width:50%;
}

.company-recruit .recruit-area{
	float:right;
	width:50%;
	margin:135px 0 0;
}

.company-recruit .area-inner{
	background:rgba(255,255,255,0.92);
	width:429px;
	margin:0 auto;
	padding:52px 0 58px;
}

.company-recruit h2{
	background:none;
	display:block;
	font-size:100%;
	text-align:center;
	line-height:1;
	position:relative;
	margin:0;
	padding:0;
	z-index:2;
}

.company-recruit h2::before{
	display:none;
}

.company-recruit h2 svg{
	overflow:visible;
}

.company-recruit h2 text{
	font-family:'Montserrat', sans-serif;
	font-size:375%;
	font-weight:600;
  stroke:#8993bf;
  fill:rgba(255, 255, 255, 0);
  text-anchor:middle;
  dominant-baseline:alphabetic;
  stroke-width:1px;
  stroke-linejoin:round;
}

.company-recruit h2 .ja{
	color:#000;
	display:block;
	font-size:219%;
	letter-spacing:0.2em;
	margin:-37px 0 0;
}

.company-recruit p{
	text-align:center;
	width:196px;
	line-height:50px;
	margin:28px auto 0;
}

.company-recruit p a{
	background:#001781;
	border-radius:25px;
	display:block;
  transition:opacity 0.2s ease;
}

.company-recruit p a:link,
.company-recruit p a:visited,
.company-recruit p a:hover,
.company-recruit p a:active{
	color:#fff;
	text-decoration:none;
}

.company-recruit p a:hover,
.company-recruit p a:active{
	opacity:0.5;
}


/* ---------------------------------------------
　topBanner
------------------------------------------------ */
.topBanner {
	margin: 100px auto;
	width: 1200px;
}
.topBanner--block {
	width: 100%;
}
.topBanner--block a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
}
.topBanner--block img {
	transition: all .2s ease 0s;
}
.topBanner--block img.on {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
.topBanner--block a:hover img.off {
	opacity: 0;
}
.topBanner--block a:hover img.on {
	opacity: 0.5;
}
.topBanner--block img {
	width: 100%;
}