﻿@charset "utf-8";


/* style */
/* -------------------------------------------------------- */
#header {position:absolute;}
#header .logo a svg {fill:#fff;}
#gNav .nav1 li a {color:#fff;}
#gNav .nav3 li svg {fill:#fff;}

#gNavBtn > span,
#gNavBtn > span::before,
#gNavBtn > span::after {background-color:rgba(255,255,255,1);}
#gNavCheck:checked + #header #gNavBtn > span {background-color:rgba(255,255,255,0);}
#gNavCheck:checked + #header #gNavBtn > span::before,
#gNavCheck:checked + #header #gNavBtn > span::after {background-color:rgba(255,255,255,1);}

body.mv-over #gNavBtn > span,
body.mv-over #gNavBtn > span::before,
body.mv-over #gNavBtn > span::after {background-color:rgba(0,0,0,1);}
body.mv-over #gNavCheck:checked + #header #gNavBtn > span {background-color:rgba(255,255,255,0);}
body.mv-over #gNavCheck:checked + #header #gNavBtn > span::before,
body.mv-over #gNavCheck:checked + #header #gNavBtn > span::after {background-color:rgba(255,255,255,1);}

.data-draft-btn {position:fixed;}

.top-ttl {text-align:left;}
.top-ttl .en {font-family:'Jost', sans-serif; font-size:6.3rem; font-weight:500; font-style:italic; line-height:1; color:#1160BE; display:block;}
.top-ttl .ja {font-size:2.0rem; font-weight:500; line-height:1; color:#000; margin:0.2em 0 0 0; display:block;}

.top-catch {font-size:2.8rem; font-weight:500; line-height:1.4; text-align:left; color:#000; margin:0.5em 0 0 0;}

.top-mv {width:100%; height:100vh; background-color:rgba(32,106,171,1); position:relative; overflow:hidden;}
.top-mv .imgs {width:100%; height:100%; position:absolute; top:0; left:0; pointer-events:none;}
.top-mv .imgs > div {width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; transform:scale(1,1); will-change:transform;}
.top-mv .imgs > div:last-of-type {position:relative;}
.top-mv .imgs > div.on {opacity:1; transform:scale(1.05,1.05);}
.top-mv .imgs .img {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; top:0; left:0;}
.top-mv .ctx {width:100%; height:100%; position:absolute; top:0; left:0; display:flex; align-items:center; opacity:0; z-index:10; transition:opacity 2.0s 1.0s linear;}
.top-mv .ctx > div {width:100%; text-align:left;}
.top-mv .ctx .sec {max-width:1800px;}
.top-mv .ctx .catch {max-width:53.0em; text-align:left; color:#fff; margin:0;}
.top-mv .ctx .catch dt {font-size:3.5rem; line-height:1.4; padding:0 0 0.2em 0; border-bottom:solid 1px #fff;}
.top-mv .ctx .catch dd {font-size:1.6rem; line-height:1.8; margin:0.5em 0 0 0;}
.top-mv .ctx .btns {margin:30px 0 0 0; display:flex;}
.top-mv .ctx .btns > div {padding:0 10px 0 0;}
.top-mv .ctx .btns > div a {width:197px; height:41px; font-size:1.4rem; font-weight:700; text-decoration:none; border-radius:5px; display:flex; justify-content:center; align-items:center; transition:opacity 0.2s ease;}
.top-mv .ctx .btns > div a:hover {opacity:0.7;}
.top-mv .ctx .btns > div.type1 a {color:#1571DA; background-color:#fff;}
.top-mv .ctx .btns > div.type2 a {color:#fff; background-color:#0A315D;}
.top-mv .txt {width:100%; font-family: 'STIX Two Text', serif; font-size:7.3vw; font-weight:400; white-space:nowrap; line-height:1; text-align:left; color:#fff; mix-blend-mode:overlay; opacity:0.3; position:absolute; bottom:35px; left:0; z-index:5;}
.top-mv .news {width:100%; height:45px; background-color:#206AAB; position:absolute; bottom:0; left:0; z-index:15; overflow:hidden;}
.top-mv .news dl {display:flex; align-items:center;}
.top-mv .news dt {padding:0 2.0em 0 0;}
.top-mv .news dt span {width:120px; height:25px; font-size:1.6rem; font-weight:500; line-height:1; color:#fff; padding:0 0 0.2em 0; background-color:#A22B2B; border-radius:25px; box-sizing:border-box; display:flex; justify-content:center; align-items:center;}
.top-mv .news dd {height:45px; position:relative; overflow:hidden; flex:1;}
.top-mv .news dd > div {width:100%; height:100%; font-size:1.6rem; line-height:1.2; text-align:left; color:#fff; display:flex; align-items:center; position:absolute; top:45px; left:0; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:normal; animation-fill-mode:backwards;}
.top-mv .news dd > div > span:nth-of-type(1) {white-space:nowrap; padding:0 2.0em 0 0;}
.top-mv .news dd > div > span:nth-of-type(2) {flex:1;}
.top-mv .news dd > div a {text-decoration:none; color:#fff; transition:opacity 0.2s ease;}
.top-mv .news dd > div a:hover {opacity:0.7;}
.top-mv .news dd > div {animation-name:newsMove;}
body.load .top-mv .ctx {opacity:1;}
@keyframes newsMove {
	0% {top:100%;}
	12.5% {top:0;}
	87.5% {top:0;}
	100% {top:-100%;}
}

.top-bnr {padding:90px 0;}
.top-bnr .bnrs {overflow:visible;}
.top-bnr .bnrs a {width:100%; text-decoration:none; background-color:#fff; border-radius:15px; display:flex; align-items:center; overflow:hidden;}
.top-bnr .bnrs a:hover .img img {transform:scale(1.1,1.1);}
.top-bnr .bnrs a:hover .more span::before {left:0;}
.top-bnr .bnrs a:hover .more span svg {animation:arrowMove1 0.4s ease 0s 1 normal forwards;}
.top-bnr .bnrs .ctx {width:67%; text-align:left; padding:10px 20px; box-sizing:border-box;}
.top-bnr .bnrs .img {width:33%; min-width:400px; overflow:hidden;}
.top-bnr .bnrs .img img {display:block; transform:scale(1,1); will-change:transform; transition:transform 0.4s ease;}
.top-bnr .bnrs .ttl {font-size:3.6rem; font-weight:700; line-height:1.2; color:#1160BE; display:block;}
.top-bnr .bnrs .txt {font-size:2.6rem; font-weight:700; line-height:1.6; color:#000; margin:0.3em 0 0 0; display:block;}
.top-bnr .bnrs .more {font-family:'Jost', sans-serif; font-size:2.0rem; font-weight:400; font-style:italic; line-height:1; text-align:right; color:#000; margin:0.5em 0 0 0; padding:0.5em 50px 0.5em 0; display:block; position:relative;}
.top-bnr .bnrs .more span {width:42px; height:42px; margin:-21px 0 0 0; border-radius:9999px; position:absolute; top:50%; right:0; overflow:hidden;}
.top-bnr .bnrs .more span::before {content:''; width:200%; height:100%; background:-webkit-linear-gradient(left, #1E2E85, #559DE2, #1E2E85); background:linear-gradient(to right, #1E2E85, #559DE2, #1E2E85); display:block; position:absolute; top:0; left:-100%; will-change:transform; transition:left 0.4s ease;}
.top-bnr .bnrs .more span svg {width:16px; height:16px; margin:-8px 0 0 -8px; fill:#fff; display:block; position:absolute; top:50%; left:50%; z-index:5;}
.top-bnr .bnrs .splide__slide {padding:0 1px; box-sizing:border-box;}
.top-bnr .bnrs .splide__arrows {display:none;}
.top-bnr .bnrs .splide__pagination {width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:absolute; top:108%; bottom:auto; left:0; z-index:5;}
.top-bnr .bnrs .splide__pagination > li {padding:5px 10px; box-sizing:border-box;}
.top-bnr .bnrs .splide__pagination > li button {width:70px; height:10px; padding:0; background-color:#DBDBDB; border:none; border-radius:0; box-sizing:border-box; overflow:hidden; transition:background-color 0.3s ease;}
.top-bnr .bnrs .splide__pagination > li button:hover,
.top-bnr .bnrs .splide__pagination > li button.is-active {background-color:#1160BE; border:none;}

.top-services {padding:0 0 100px 0;}
.top-services .clm {margin:35px -15px 0 -15px; display:flex;}
.top-services .clm > div {width:33.33%; width:calc(100% / 3); text-align:left; padding:0 15px; box-sizing:border-box;}
.top-services .clm .img img {width:100%;}
.top-services .txt1 {font-size:3.4rem; font-weight:700; line-height:1; color:#1160BE; margin:1.0em 0 0 0; padding:0.2em 0 0.2em 12px; position:relative;}
.top-services .txt1::before {content:''; width:2px; height:100%; background-color:#1160BE; display:block; position:absolute; top:0; left:0;}
.top-services .txt2 {margin:0 0 0 12px;}
.top-services .txt2 > li {min-height:2.2em; font-size:2.0rem; font-weight:700; line-height:1.2; margin:1.0em 0 0 0; padding:0 0 0 50px; display:flex; align-items:center; position:relative;}
.top-services .txt2 > li::before {content:''; width:40px; height:40px; margin:-20px 0 0 0; background:#fff url(../img/common/icon_check.svg) center center no-repeat; background-size:50% auto; border-radius:100%; display:block; position:absolute; top:50%; left:0;}
.top-services .txt2 > li a,
.top-services .txt2 > li a:hover {text-decoration:none; color:#000;}
.top-services .txt2 > li a span {background:linear-gradient(#000, #000) 0 100%/0 1px no-repeat; transition:background 0.4s ease;}
.top-services .txt2 > li a:hover span {text-decoration:none; color:#000; background-size:100% 1px;}
.top-services .txt3 {margin:40px 0 0 0; position:relative; overflow:hidden;}
.top-services .txt3 .img {width:100%; height:108px; background-repeat:no-repeat; background-position:center center; background-image:url(../img/top/img_02.jpg); background-size:cover; display:block; position:relative; z-index:1; transform:scale(1,1); will-change:transform; transition:transform 0.2s ease;}
.top-services .txt3 .img::before {content:''; width:100%; height:100%; background-color:rgba(0,0,0,0.2); display:block; position:absolute; top:0; left:0; opacity:0; transition:opacity 0.2s ease; will-change:opacity;}
.top-services .txt3 .ctx {width:100%; height:100%; font-size:3.4rem; font-weight:700; line-height:1; color:#fff; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; z-index:5;}
.top-services .txt3 a:hover .img {transform:scale(1.1,1.1);}
.top-services .txt3 a:hover .img::before {opacity:1;}

.top-works {color:#fff; padding:100px 0; background:-webkit-linear-gradient(left, #0E5797, #559DE2); background:linear-gradient(to right, #0E5797, #559DE2);}
.top-works .top-ttl .en {color:#fff;}
.top-works .top-ttl .ja {color:#fff;}
.top-works .top-catch {color:#FFF500;}
.top-works .clm {margin:0 -20px; display:flex; flex-wrap:wrap; align-items:flex-end;}
.top-works .clm > div {width:25%; padding:30px 20px 0 20px; box-sizing:border-box;}
.top-works .clm a {text-decoration:none; color:#fff; border-bottom:solid 1px #fff; display:flex; align-items:center; transition:opacity 0.2s ease;}
.top-works .clm a:hover {opacity:0.7;}
.top-works .clm a .img {width:70px;}
.top-works .clm a .img img {width:100%;}
.top-works .clm a .ctx {font-size:1.8rem; font-weight:700; line-height:1.2; text-align:left; flex:1;}

.top-company {padding:100px 0;}
.top-company .sec {position:relative;}
.top-company .btn {width:100%; text-align:right; position:absolute; top:50px; right:15px;}
.top-company .clm {margin:50px -15px 0 -15px; display:flex;}
.top-company .clm > dl {width:33.33%; width:calc(100% / 3); text-align:left; color:#000; padding:0 15px; box-sizing:border-box;}
.top-company .clm dt {font-size:3.0rem; line-height:1.2;}
.top-company .clm dt a {font-size:1.4rem; text-decoration:none; color:#000; margin:0 0 0 1.0em; padding:0 0 0 36px; display:inline-block; position:relative; top:-0.4em; transition:opacity 0.2s ease;}
.top-company .clm dt a:hover {opacity:0.7;}
.top-company .clm dt a::before {content:''; width:30px; height:30px; margin:-15px 0 0 0; background:url(../img/common/icon_googlemap.svg) center center no-repeat; background-size:100% auto; display:block; position:absolute; top:50%; left:0;}
.top-company .clm dd {font-size:1.8rem; line-height:1.7; margin:0.2em 0 0 0;}
.top-company .bnrs {margin:80px 10px 0 10px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.top-company .bnrs > div {width:16.66%; width:calc(100% / 6); text-align:center; padding:20px 10px 0 10px; box-sizing:border-box;}
.top-company .bnrs a {max-width:260px; width:100%; margin:0 auto; display:block; transition:opacity 0.2s ease;}
.top-company .bnrs a:hover {opacity:0.7;}

.top-news {color:#fff; padding:100px 0; background:-webkit-linear-gradient(left, #0E5797, #559DE2); background:linear-gradient(to right, #0E5797, #559DE2);}
.top-news .sec {position:relative;}
.top-news .top-ttl .en {color:#fff;}
.top-news .top-ttl .ja {color:#fff;}
.top-news .btn {width:100%; text-align:right; position:absolute; top:50px; right:15px;}
.top-news .btn .btn-01,
.top-news .btn .btn-01:hover {color:#fff;}
.top-news .box {margin:30px 0 0 0;}
.top-news .clm {margin:-10px -15px 0 -15px; display:flex; flex-wrap:wrap;}
.top-news .clm > li {width:25%; text-align:left; color:#000; padding:10px 15px 0 15px; box-sizing:border-box;}
.top-news .box a {text-align:left; text-decoration:none; color:#fff; padding:0 0 0.5em 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; position:relative;}
.top-news .box a::before {content:''; width:0; height:1px; background-color:#fff; display:block; position:absolute; bottom:0; left:0; will-change:width; transition:width 0.4s ease;}
.top-news .box a .img {width:100%; overflow:hidden;}
.top-news .box a .img img {width:100%; display:block; transform:scale(1,1); will-change:transform; transition:transform 0.4s ease;}
.top-news .box a .date {font-family:'Jost', sans-serif; font-size:1.6rem; font-weight:400; margin:10px 0 0 0;}
.top-news .box a .type {width:140px; height:25px; font-size:1.4rem; line-height:1; margin:10px 0 0 0; border:1px solid #fff; border-radius:25px; display:flex; justify-content:center; align-items:center;}
.top-news .box a .txt {font-size:1.6rem; line-height:1.5; margin:10px 0 0 0;}
.top-news .box a:hover::before {width:100%;}
.top-news .box a:hover .img img {transform:scale(1.1,1.1);}
.top-news .splide {overflow:visible;}
.top-news .splide__track {overflow:visible;}
.top-news .splide__list {display:flex; align-items:flex-start;}
.top-news .splide__slide {padding:0 10px; background-color:transparent; box-sizing:border-box;}
.top-news .splide__arrows {display:none;}
.top-news .splide__pagination,
.top-news .splide__pagination--ltr {display:none;}

@media screen and (max-width:767px){

	.top-ttl .en {font-size:4.0rem;}
	.top-ttl .ja {font-size:1.6rem;}

	.top-catch {font-size:2.0rem;}

	.top-mv .ctx .catch {max-width:100%;}
	.top-mv .ctx .catch dt {font-size:2.6rem; padding:0 0 0.2em 0;}
	.top-mv .ctx .catch dd {font-size:1.6rem; line-height:1.8; margin:0.5em 1.5em 0 1.5em;}
	.top-mv .ctx .btns {margin:20px 0 0 0; display:flex; flex-wrap:wrap;}
	.top-mv .ctx .btns > div {width:100%; text-align:center; padding:10px 0 0 0;}
	.top-mv .ctx .btns > div a {font-size:1.4rem; margin:0 auto;}
	.top-mv .txt {font-size:13.6vw; white-space:nowrap; top:80px; bottom:auto; left:0.8em; transform-origin:left top; transform:rotate(90deg);}
	.top-mv .news {height:90px;}
	.top-mv .news dt {padding:0; position:absolute; top:10px; left:7.6vw; z-index:10;}
	.top-mv .news dd {height:90px;}
	.top-mv .news dd > div {height:90px; display:block; top:90px;}
	.top-mv .news dd > div > span:nth-of-type(1) {white-space:nowrap; padding:15px 0 5px 130px; display:block;}
	.top-mv .news dd > div > span:nth-of-type(2) {line-height:1.4; display:block;}

	.top-bnr {padding:60px 0 100px 0;}
	.top-bnr .bnrs {overflow:visible;}
	.top-bnr .bnrs a {display:flex; flex-wrap:wrap;}
	.top-bnr .bnrs .ctx {width:100%; text-align:left; padding:10px 20px; order:2;}
	.top-bnr .bnrs .img {width:100%; min-width:100%; order:1;}
	.top-bnr .bnrs .img img {width:100%; height:auto;}
	.top-bnr .bnrs .ttl {font-size:2.0rem;}
	.top-bnr .bnrs .txt {font-size:1.4rem; margin:0.3em 0 0 0;}
	.top-bnr .bnrs .more {font-size:1.6rem; padding:0.5em 50px 0.5em 0;}
	.top-bnr .bnrs .more span {width:38px; height:38px; margin:-19px 0 0 0;}
	.top-bnr .bnrs .splide__list {align-items:flex-start;}
	.top-bnr .bnrs .splide__pagination {top:103%;}
	.top-bnr .bnrs .splide__pagination > li {padding:5px;}
	.top-bnr .bnrs .splide__pagination > li button {width:28px; height:6px;}

	.top-services {padding:0 0 60px 0;}
	.top-services .clm {margin:0; display:block;}
	.top-services .clm > div {width:auto; margin:30px 0 0 0; padding:0;}
	.top-services .txt1 {font-size:2.8rem; margin:0.5em 0 0 0; padding:0.2em 0 0.2em 12px;}
	.top-services .txt2 > li {font-size:1.6rem; padding:0 0 0 45px;}
	.top-services .txt2 > li::before {width:33px; height:33px; margin:-16px 0 0 0;}
	.top-services .txt3 .ctx {font-size:2.4rem;}
	.top-services .txt3 .img {background-image:url(../img/top/img_02_sp.jpg);}

	.top-works {padding:60px 0;}
	.top-works .top-catch {font-size:1.9rem;}
	.top-works .clm {margin:0 -7px;}
	.top-works .clm > div {width:50%; padding:15px 7px 0 7px;}
	.top-works .clm a .img {width:46px;}
	.top-works .clm a .ctx {font-size:1.1rem;}

	.top-company {padding:60px 0;}
	.top-company .btn {margin:30px 0 0 0; position:static;}
	.top-company .clm {margin:0; display:block;}
	.top-company .clm > dl {width:auto; margin:30px 0 0 0; padding:0;}
	.top-company .clm dt {font-size:2.4rem;}
	.top-company .clm dt a {font-size:1.1rem; padding:0 0 0 30px;}
	.top-company .clm dt a::before {width:25px; height:25px; margin:-12px 0 0 0;}
	.top-company .clm dd {font-size:1.4rem;}
	.top-company .bnrs {margin:50px -14px 0 -14px; padding:0 7.6vw; box-sizing:border-box;}
	.top-company .bnrs > div {width:50%; text-align:center; padding:10px 14px 0 14px;}

	.top-news {padding:60px 0;}
	.top-news .btn {margin:30px 0 0 0; position:static;}
	.top-news .box {width:69.2vw; margin:30px auto 0 auto;}
	.top-news .box a .date {font-size:1.4rem;}
	.top-news .box a .type {width:120px; height:22px; font-size:1.4rem;}
	.top-news .box a .txt {font-size:1.6rem;}

}
