@charset "UTF-8";
/*================================
frontpage.css
=================================*/

/*================================
header
=================================*/

header{
display: block;
height: 1260px;
position: relative;
margin:0 auto 0;
background-color: #000;
}

header .mv_wrap{
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 1151px;
margin-top: 25px;
}

header .mv_wrap .mv{
flex-shrink: 0;
display: block;
width: 3900px;
height: 100%;
}

header .mv_wrap .mv.mv1{
background:url(../img/frontpage/mv_img2.png) no-repeat center top;
}
header .mv_wrap .mv.mv2{
background:url(../img/frontpage/mv_img2.png) no-repeat center top;
}

.mv_wrap .mv:first-child {
animation: loop 80s -40s linear infinite;
}

.mv_wrap .mv:last-child {
animation: loop2 80s linear infinite;
}

@keyframes loop {
	0% {
	transform: translateX(100%);
	}
	to {
	transform: translateX(-100%);
	}
	}

	@keyframes loop2 {
	0% {
	transform: translateX(0);
	}
	to {
	transform: translateX(-200%);
	}
}

header .ovl {
display: block;
width: 100%;
height: 1260px;
background:url(../img/frontpage/mv_ovl.png) no-repeat center top;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}

header .row_ovl {
overflow: hidden;
display: block;
}

header .row_inner{
overflow: hidden;
width:100%;
}

header h2{
background:url(../img/frontpage/mv_tit.png) no-repeat center center;
background-size: cover;
display: block;
width:100%;
height:614px;
position: absolute;
left: 0;
right: 0;
top: 125px;/*205px 10px*/
margin: auto;
opacity: 0;
}
	header .row_inner h2::after{
	display: none;
	}

header h3{
background:url(../img/frontpage/mv_tit2.png) no-repeat center center;
background-size: contain;
display: block;
width: 920px;
height: 214px;
position: absolute;
left: 0;
right: 0;
top: 1025px;
margin: auto;
opacity: 0;
}

header a.btn_scroll_graphic{
display: block;
background:url(../img/frontpage/mv_scroll_graphic.png) no-repeat center bottom;
width:30px;
height:250px;
position: absolute;
bottom: 390px;
right: 30px;
}

header a.btn_scroll_logo{
display: block;
background:url(../img/frontpage/mv_scroll_logo.png) no-repeat center bottom;
width:30px;
height:250px;
position: absolute;
bottom: 390px;
left: 30px;
}

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


/*
-------------------------------- */

#logo{
position: relative;
/*
background:url(../img/frontpage/logo_bg.png) no-repeat center top, linear-gradient(180deg, #040000 0%, #020000 120px, #020000 1050px, #fff 1050px);
*/
background:url(../img/frontpage/logo_bg.png) no-repeat center top, linear-gradient(180deg, #000000 0%, #000000 1050px, #F7F8F8 1050px);

display: block;
height: 1126px;
}

#logo .ubox{
background:url(../img/frontpage/logo_pop_bg.png) no-repeat center top;
display: block;
width: 661px;
height: 723px;
position: absolute;
left: 0;
top: 134px;
}

#logo .ubox .on_img{
background:url(../img/frontpage/logo_pop_img.png) no-repeat center bottom;
display: block;
width: 248px;
height: 680px;
position: absolute;
left: 480px;
top: 0;
}

#logo .ubox .tbox{
display: block;
width: 460px;
position: absolute;
left: 120px;
top: 180px;
color: #fff;
}

#logo .ubox .tbox h3{
font-size: 31px;
font-weight: bold;
letter-spacing: 0.12em;
}

#logo .ubox .tbox h4{
font-family: 'Century Gothic', Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #BDC1C5;
letter-spacing: 0.10em;
margin-top: 15px;
}

#logo .ubox .tbox p{
width: 320px;
letter-spacing: 0.10em;
margin-top: 25px;
}

#logo a.btn_to_design {
background:url(../img/frontpage/logo_btn_to_design.png) no-repeat center top;
margin-top: 80px;
display: block;
width: 303px;
height: 59px;
margin-top: 35px;
}

#logo a.btn_to_works {
background:url(../img/frontpage/logo_btn_to_works.png) no-repeat center top;
margin-top: 80px;
display: block;
width: 303px;
height: 59px;
margin-top: 35px;
}


/* feature
-------------------------------- */

#feature{
overflow: hidden;
background-color: #F7F8F8;
}

#feature .row_inner{
overflow: hidden;
padding-top: 0;
}

#feature h3 {
background:url(../img/frontpage/feature_tlt.png) no-repeat center top;
margin-top: 80px;
display: block;
width: 400px;
height: 90px;
margin: 20px auto 30px;
}

#feature ul{
position: relative;
display: flex;
justify-content: space-between;
padding: 0;
margin:0 auto 30px;
}

#feature ul li{
position: relative;
display: block;
width:380px;
height: 410px;
padding: 10px;
margin:0 auto;
}

#feature ul li.feature01{ background:url(../img/frontpage/feature_li01.png) no-repeat center top 10px #010101; }
#feature ul li.feature02{ background:url(../img/frontpage/feature_li02.png) no-repeat center top 10px #010101; }
#feature ul li.feature03{ background:url(../img/frontpage/feature_li03.png) no-repeat center top 10px #010101; }

#feature ul li .tbox{
display: block;
width: 320px;
margin: 190px auto 0;
}

#feature ul li .tbox h4{
font-size: 22px;
font-weight: bold;
color: #87B9E4;
letter-spacing: 0.12em;
line-height: 1.7em;
margin-top: 20px;
}

#feature ul li .tbox p{
text-align: justify;
color: #fff;
margin-top: 10px;
}


/*
-------------------------------- */

#graphic{
position: relative;
background:url(../img/frontpage/graphic_bg.png) no-repeat center top, linear-gradient(180deg, #fff 0%, #fff 1170px, #F8F8F8 1170px);
display: block;
height: 1320px;
}

#graphic .ubox{
background:url(../img/frontpage/graphic_pop_bg.png) no-repeat center top;
display: block;
width: 825px;
height: 722px;
position: absolute;
right: 0;
top: 134px;
}

#graphic .ubox .on_img{
background:url(../img/frontpage/graphic_pop_img.png) no-repeat center bottom;
display: block;
width: 328px;
height: 680px;
position: absolute;
left: -90px;
top: 0;
}

#graphic .ubox .tbox{
display: block;
width: 460px;
position: absolute;
left: 280px;
top: 180px;
color: #fff;
}

#graphic .ubox .tbox h3{
font-size: 31px;
font-weight: bold;
letter-spacing: 0.12em;
}

#graphic .ubox .tbox h4{
font-family: 'Century Gothic', Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.10em;
color: #BDC1C5;
margin-top: 15px;
}

#graphic .ubox .tbox p{
width: 420px;
letter-spacing: 0.10em;
margin-top: 25px;
}

#graphic a.btn_to_design {
background:url(../img/frontpage/graphic_btn_to_design.png) no-repeat center top;
margin-top: 80px;
display: block;
width: 331px;
height: 59px;
margin-top: 35px;
}

#graphic a.btn_to_works {
background:url(../img/frontpage/graphic_btn_to_works.png) no-repeat center top;
margin-top: 80px;
display: block;
width: 331px;
height: 59px;
margin-top: 35px;
}



/*
-------------------------------- */

#homepage{
overflow: hidden;
position: relative;
background: linear-gradient(180deg, #fff 0%, #fff 70px, #040000 70px, #040000 78%, #fff 78%);
display: block;
}

#homepage .vbox {
width: 88%;
height: auto;
z-index: 1;
margin:0 auto;
}

#homepage #video {
width: 100%;
height: 100%;
background-size: cover;
z-index: 1;
}

#homepage .ubox{
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 95px, #fff 95px);
position: relative;
display: block;
width: 1200px;
height: auto;
margin: -130px auto 0;
color: #111;
}

#homepage .ubox h3{
background:url(../img/frontpage/homepage_tit.png) no-repeat center center;
display: block;
width: 900px;
height: 152px;
margin: 0 auto;
}

#homepage .ubox .tbox{
overflow: hidden;
display: block;
width: 1100px;
margin: 20px auto 0;
text-align: center;
}

#homepage .ubox .tbox h4{
font-size: 31px;
font-weight: bold;
letter-spacing: 0.12em;
}

#homepage .ubox .tbox h5{
font-family: 'Century Gothic', Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.10em;
margin-top: 15px;
color: #C8C9C9;
}

#homepage .ubox .tbox p{
letter-spacing: 0.10em;
margin-top: 25px;
}

#homepage .ubox .tbox p.note{
font-weight: bold;
}

#homepage a.btn_to_homepage_site {
background:url(../img/frontpage/homepage_btn_to.png) no-repeat center top;
margin-top: 80px;
display: block;
width: 339px;
height: 58px;
margin: 35px auto 0;
}


/*
-------------------------------- */

#bnr{
overflow: hidden;
position: relative;
display: block;
}

#bnr .homepage_link{
position: relative;
background:url(../img/frontpage/homepage_link_bg.png) no-repeat center center;
display: block;
width: 1201px;
height: 273px;
margin: 25px auto 100px;
}

#bnr .homepage_link a{
background:url(../img/frontpage/homepage_link_btn.png) no-repeat center center;
display: block;
width: 652px;
height: 49px;
position: absolute;
left: 470px;
top: 175px;
}



/*
-------------------------------- */

#greeting{
overflow: hidden;
background: url(../img/frontpage/greet_bg.png) no-repeat center top 20px, linear-gradient(180deg, #fff 0%, #fff 20px, #000 20px);
display: block;
position: relative;
margin:0 auto;
}

#greeting .tbox{
display: block;
width:600px;
position: relative;
padding:0;
margin-left:40px;
margin-top:0;
text-align: justify;
}

#greeting .tbox h3.tagblk,
#greeting .tbox h4.tagblk {
display: inline-block;
width:auto;
margin-bottom:20px;
padding-left:40px;
padding-right: 40px;
background-color:#191D20;
font-size: 28px;
font-weight: bold;
color: #fff;
letter-spacing: 0.1em;
line-height: 2.4em;
}

#greeting .tbox p{
width:420px;
color:#fff;
text-align: justify;
margin-top:30px;
margin-left:0.4em;
line-height: 2.2em;
}

#greeting .tbox a.btn_to{
background: url(../img/frontpage/greet_btn_to.png) no-repeat center center;
display: block;
width:303px;
height:59px;
margin-top:40px;
margin-left:10px;
}

#greeting .nbox{
overflow: hidden;
background: url(../img/frontpage/greet_note_bg.png) no-repeat left bottom;
display: block;
width:280px;
position: absolute;
top: 120px;
right: -60px;
padding-left: 30px;
padding-bottom: 30px;

}

#greeting .nbox h3{
font-family: 'Century Gothic', Arial, Verdana, Helvetica, sans-serif;
color:#82B1DA;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
}

#greeting .nbox p{
color:#fff;
font-size: 18px;
font-weight: bold;
text-align: justify;
margin-top: 10px;
line-height: 1.6em;
}

/*
-------------------------------- */

#topics {
display: block;
}

#topics .ubox{
overflow: hidden;
display: block;
width: 1200px;
background-color: #000000;
margin: 80px auto 70px;
}


#topics h3{
background:url(../img/frontpage/topics_tit.png) no-repeat center center;
display: block;
width: 200px;
height: 50px;
margin: 60px auto 40px;
}

#topics dl{
display: block;
width: 1100px;
margin: 0 auto;
padding: 0;
color: #fff;
background-color: #030303;
margin: 0 auto;
}

#topics dt {
overflow: hidden;
position: relative;
display: block;
width: 100%;
margin: 0 auto;
background-color: #000;
padding: 20px 0;
border-bottom: 1px solid #6E7376;
cursor: pointer;
}

	#topics dt:first-child {
	border-top: 1px solid #6E7376;
	}


#topics dt::after{
content: "";
background:url(../img/frontpage/topics_li_arrow.png) no-repeat center center;
display: block;
width: 30px;
height: 30px;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
margin: auto;
}

#topics dt p{
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
padding: 0;
}

#topics dt p .date{
display: block;
width: 160px;
color: #86B9E6;
font-weight: normal;
color: #D2D2D2;
text-align: center;
font-size: 14px;
vertical-align: middle;
}

#topics dt p .tit{
display: block;
width:800px;
margin-left: 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
vertical-align: middle;
}

#topics dd{
position: relative;
display:none;
overflow: hidden;
width:100%;
padding: 20px 30px;
line-height:1.6;
margin-bottom:18px;
background-color:#fff;
}

#topics dd {
text-align: left;
font-size: 16px;
color: #111;
}

#topics dd a.close{
display:block;
background:url(../img/element/ast_qa_close.png) no-repeat center center;
width:127px;
height:43px;
cursor:pointer;
margin:30px auto 0;
transition: 0.2s;
}