@charset "utf-8";
@import url("style_mobile.css");
/* CSS Document */

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

.wf-sawarabimincho { font-family: "Sawarabi Mincho", serif; }

body {
	font-weight: 400;
	font-family: "Noto Sans Japanese";
	height: auto;
	margin: 0;
	position: relative;
}

dl,dt,dd { margin: 0; }

img{ width: 100%; vertical-align: top;}

#loader {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
}

#load {
	width: 100%;
	height: 100%;
}

#warpper {
	margin: auto;
	padding: 0 auto;
}



/* header */
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	z-index: 10;
}

header .logo {
    background: #fff;
    margin-left: 0;
    margin-top: 0;
    border-radius: 0 0 50px 0;
    padding: 20px 50px;
    width: 450px;
    box-sizing: border-box;
}

header .logo a {
	font-size: .8em;
    color:#000;
    text-decoration: none;
    letter-spacing: .1em;
}
header .logo a span {
	display: block;
	font-size: .58em;
	letter-spacing: .1em;
}

header #pc_nav { display: block; width: 38%; margin-right: 60px; }
header #pc_nav .menu {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
header #pc_nav .menu ul {
	width: 75%;
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: space-between;
	font-family: source-han-sans-japanese, sans-serif;
	font-style: normal;
	font-weight: 500;
}
header #pc_nav .menu ul li a { position: relative; color: #fff; text-decoration: none; }
header #pc_nav .menu ul li a::after {
	position: absolute;
	bottom: -10px;
	left: 0;
	content: '';
	width: 100%;
	height: 3px;
	background: #fff;
	transform: scale(0,1);
	transform-origin: left top;
	transition: transform .3s;
}
header #pc_nav .menu ul li a:hover::after {
	transform: scale(1,1);
}

header #pc_nav .menu .sns { width: 10%; display: flex; }
header #pc_nav .menu .sns .sns-icon01 { width: 50px; height: 50px; margin-right: 20px; }

/* space */
.space01 { width: 100%; height: 10px; }
.short_space { width: 100%; height: 40px; }



/* ※SMARTPHONE MENU */
.button_container { display: none; }
.overlay { display: none; }



/* content */
#content { width: 90%; max-width: 1240px; margin: 0 auto 100px auto; }
#banner-content { width: 90%; max-width: 1240px; margin: 0 auto; }
#works-content{ 
    position: relative;
    width: 90%; 
    max-width: 1240px;
    margin: 0 auto;
    padding: 7em 0
}

#service-content{ width: 90%; max-width: 1200px; margin: 0 auto; }

/* home_content */
.home_comment { width: 100%; height: auto; margin: 0 auto; text-align: center; }
.home_comment h1 { color: #111; font-size: calc(90.5% + 0.8vw); }
.home_comment p { font-size: calc(80.5% + 0.2vw); }



/* slide */
#vegas {
    width: 100%;
    height: 100vh;
	margin: auto;
	margin-bottom: 100px;
	position: relative;
}
#vegas .bg { background-color: rgba(14,31,88,0.7); width: 100%; height: 100%; }
#vegas .caption {
	position: absolute;
  	top: 60%;
  	left: 10%;
  	transform: translateY(-60%);
  	-webkit- transform: translateY(-60%);
  	margin: auto;
	font-size: 4em;
	font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; 
	font-weight: 600; 
	font-style: normal; 
	line-height: 1.3em;
	color: #fff;
}

#vegas .caption p { margin: 0; margin-top: -15px; }
#vegas .caption span {
	display: block;
	font-size: .3em;
	font-weight: 400;
	line-height: 1.6em;
	letter-spacing: .1em;
	margin-top: 20px;
	margin-bottom: -5px;
}
#vegas .caption .sp-br { display: none; }



/* scroll */
.scroll-Block { position: absolute; bottom: 3rem; right: 0px; z-index: 5; }
.scroll-Block .Txt {
    display: block;
    font-size: .8em;
	font-weight: bold;
    line-height: 1;
	position: relative;
	bottom: 1.7rem;
	right: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.scroll-Block .Txt a { color: #fff; text-decoration: none; letter-spacing: .1em; }
.scroll-Block .Line {
    position: relative;
    margin: 50px 0 0 55px;
    width: 2px;
    height: 60px;
    overflow: hidden;
    z-index: 10;
}
.scroll-Block .Line:after, .scroll-Block .Line:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 2px;
    height: 100%;
}
.scroll-Block .Line:before {
    background: #FFF;
    z-index: 10;
    -webkit-animation: scroll 2s infinite normal;
    animation: scroll 2s infinite normal;
}
.scroll-Block .Line:after {
    background: transparent;
}

@-webkit-keyframes scroll {
	0% {
		-webkit-transform: translate3d(0,-100%,0);
	}
	15% {
		-webkit-transform: translate3d(0,-98%,0);
	}
	85% {
		-webkit-transform: translate3d(0,98%,0);
	}
	100% {
		-webkit-transform: translate3d(0,100%,0);
	}
}


/* common */
.page-head {
    overflow: hidden;
    padding: 230px 0 130px;
	background: url("../image/common/page_head_back.png") no-repeat;
	background-position: 35%;
}
.page-head-ttl {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
    position: relative;
}
.page-head-ttl__main {
	position: relative;
    display: block;
    margin: 0 0 10px;
    font-size: 2.3em;
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 800;
    font-style: normal;
	color: #fff;
    z-index: 1;
}
.page-head-ttl__sub {
	position: relative;
    display: block;
    font-size: .9em;
    color: #fff;
    letter-spacing: .1em;
    z-index: 1;
}

.top-warpper{ position: relative; }

.top-warpper::before{
    content: "";
    position: absolute;
    top: 225px;
    right: 0;
    width: calc(100% - 500px);
    height: calc(100% - 160px);
    z-index: -10;
    background:#F6F6F6;
}

/*company*/

.top-company-flex{
    display: flex;
    justify-content: space-between;
}

.top-company-flex .flex-img{
    width: 50%;
}

.top-company-flex .flex-img img{
    width: 100%;
    height: calc(100% - 100px);
    object-fit: cover;
    border-radius: 10px;
}

.top-company-flex .flex-text-box{
    width: 50%;
    margin-left: 60px;
}

.heading{
    display: flex;
    align-items: baseline;
    position: relative;
}

.heading .en-tit{
    font-size: 2em;
    font-weight: bold;
    color:#0E1F58;
    margin-right: 20px;
}

.heading .tit{
    font-size: 1.2em;
    position: relative;
    margin-left: 20px;
    font-weight: 600;
    color:#333;
}

.heading .tit::before{
    content: "";
    position: absolute;
    top: 6px;
    left: -20px;
    width: 1px;
    height: 20px;
    background: #333;
}

.company-tit{
    font-size: 2em;
    display: inline-block;
    line-height: 1.8;
    font-weight: 600;
    margin-bottom: 45px;
}

.table tr{
    position: relative;
}

.th-tit,.td-text{ 
    padding: 20px 0; 
    border-bottom: solid 1px #c9d3e5;
}

.th-tit{ 
    width: 140px;
    vertical-align: top;
    text-align: left;
    font-weight: 600;
}
.td-text{ 
    border-bottom: solid 1px #c9d3e5;
    width: calc(100% - 140px);
}

.td-text_space{
    display: inline-block;
    width: 5em;
}

/*banner*/
.service-bg{
    margin-top: 120px;
}
.banner-bg{
    width: 100%;
    background: #ddd;
    padding: 60px 0 80px 0;
}

.banner-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.service-banner .banner-item{ width: 48.5%!important; }

.banner-flex .banner-item{
    width: 32%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}

.banner-flex .banner-item a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.banner-flex .banner-item a:hover{
    opacity: .5;
}

.banner-flex .banner-item .banner-heading{
    display: inline-block;
}

.banner-flex .banner-item .banner-heading .en-tit{
    color: #0E1F58;
    font-weight: bold;
    font-size: 1.6em;
}

.banner-flex .banner-item .banner-heading .tit{
    color:#000;
    font-weight: bold;
}

.banner-flex .banner-item .arrow{
    background: url("../image/common/arrow.svg") no-repeat;
    background-size: cover;
    width: 50px;
    height: 50px;
    display: block;
}

/*works*/

.works-heading{
    display: flex;
    align-items: baseline;
    position: relative;
}

.works-heading .en-tit{
    font-size: 2em;
    font-weight: bold;
    color:#0E1F58;
    margin-right: 20px;
    -webkit-text-stroke: 1px #FFF;
    text-stroke: 1px #FFF;
}

.works-heading .tit{
    font-size: 1.2em;
    position: relative;
    margin-left: 20px;
    font-weight: 600;
    color:#fff;
}

.works-heading .tit::before{
    content: "";
    position: absolute;
    top: 6px;
    left: -20px;
    width: 1px;
    height: 20px;
    background: #fff;
}

.works-bg{ 
    position: relative;
    background: url("../image/works/background-img.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
}

.works-inner{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 30px;
}

.works-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style: none;
    margin: 20px 0;
    padding: 0;
    
}

.works-list:not(:last-of-type){ margin-bottom: 40px;}

.works-list li{
    width: 50%;
    color: #fff;
    line-height: 3em;
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;
    border-bottom: solid .5px #fff;
}

.works-list li::before{
    content: "";
    position: absolute;
    top: 19px;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: #0E1F58;
    border: solid 1px #fff;
    border-radius: 50%;
}

.works_category{
    color: #fff;
    font-weight: 600;
    margin: 40px 0 0 0;
    padding-left: 20px;
    position: relative;
}

.works_category::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #fff;
}

/*service*/

.service{ margin: 60px 0 80px 0; }

.section-heading{
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.section-heading .section_en{
    font-size: 1.6em;
    font-weight: 600;
    color: #0E1F58;
    margin: 0;
}

.section-heading .section_ja{
    font-size: 1.8em;
    font-weight: 600;
    margin: 0;
}

.service-flex{
    display: flex;
    justify-content: space-between;
}

.service-flex .img{ width: 49%; position: relative; height: 100%; }
.service-flex .img span{ 
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    background: #fff;
    padding: 10px 20px;
    border-radius: 10px 0 0 0;
    color: #0E1F58;
    font-weight: bold;
}
.service-flex .img img{ border-radius: 10px; }
.service-flex .text{ width: 47.5%;}

.service-flex .text h3{
    font-size: 1.6em;
    margin: 20px 0;
    padding-left: .8em;
    border-left: 5px solid #0E1F58;
}

.service-flex .text p{ margin: 0; line-height: 2.2; }

.column-img{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 50px;
}

.column-img .img{ 
    width: 49%; 
    position: relative;
}

.column-img .mt{ margin-top: 50px;}

.column-img .img span{
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    background: #fff;
    padding: 10px 20px;
    border-radius: 10px 0 0 0;
    color: #0E1F58;
    font-weight: bold;
}
.column-img .img img{ border-radius: 10px; }

.recruit{ margin-bottom: 80px; }

.g-map{
    width: 100%;
    position: relative;
    padding-top: 56.25%;
}

.g-map iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* footer */
#footer {
	background: #111;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: auto;
	padding: 50px 0;
	text-align: center;
	color: #FFF;
}

#footer p { box-sizing: border-box; font-size: 100%; font-weight: 400; }
#footer .company-name {
    max-width: 300px;
    width: 90%;
    text-align: center;
    margin: 0 auto 30px auto;
}
#footer .company-name a {
	font-size: 1.5em;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	letter-spacing: .1em;
}
#footer .company-name a span {
	display: block;
	font-size: .55em;
	letter-spacing: .1em;
}

#footer .add {margin-bottom: 10px; }
#footer .add_inner{max-width: 400px; width: 90%; margin: 0 auto; text-align: left;}
#footer .info_inner{max-width: 400px; width: 90%; margin: 0 auto; text-align: center;}
#footer .font-space{ width: 5rem; display: inline-block; }
#footer .add span {letter-spacing: .05em;}
#footer .add .tel{ margin-right: 20px; margin-left: 20px; }

#footer .copy { font-weight: 200; font-size: .8em; padding: 10px; margin-top: 40px; letter-spacing: .05em; }

#footer .mail{ display: block; width: 180px; margin: 20px auto; text-align: center;}


/* Page Top */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 12px;
	line-height: 15px;
	text-align: center;
	z-index: 80;
}
#page-top a {
	display: block;
	width: 120px;
	padding: 12px 0px;
	color: #0f214e;
	border-radius: 5px;
	text-decoration: none;
	transition: .3s;
	background-color: #fff;
}
#page-top a:hover { color: #fff; background-color: #0f214e; }



/* ※BREADCRUMB LIST */
#bread {
	width: 100%;
	margin: 0 auto;
	padding: 12px 0px;
	font-size: 80%;
	text-align: right;
}
#bread a {
	text-decoration: none;
	position: relative;
	font-weight: 500;
	color: #353535;
}
#bread a:hover {
	color: #868686;
}

#bread-box { width: 90%; max-width: 1200px; margin: 0px auto; }

#bread-box .list-item {
	display: inline;
	position: relative;
	margin-left: 25px;
    line-height: 1.2;
	list-style-type: none;
}
#bread-box .list-item::before {
    content: '';
    display: block;
    width: 1px;
    height: 14px;
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%) skew(-20deg);
    background: #282828;
}

/* 改行調整 */
@media screen and (min-width: 480px){
	.br-pc { display: block; }
	.br-sp { display: none; }
}
@media screen and (max-width: 480px){
	.br-pc { display: none; }
	.br-sp { display: block; }
}