@charset "utf-8";
/***********************
pc.css
************************/

/*---------------------
メインエリア
-----------------------*/
#main{
	position:relative;
	width:100%;
	height:100vh;
	/* min-width: 1200px; */
	margin: 0 auto;
	background: url(../img/main_img.jpg) no-repeat center top;
	background-size: cover;
}

#fv_scroll {
	position: absolute;
	height: 180px;
	bottom: 0;
	right: 50px;
	color: #fff;
	writing-mode: vertical-rl;
	font-size: 14px;
}

#fv_scroll .scrollborder {
	position: absolute;
	width: 2px;
	height: 90px;
	background-color: rgba(255, 255, 255, 0.4);
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	overflow: hidden;
}

#fv_scroll .scrollborder::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	animation: scroll 2.2s ease-in-out infinite;
}

@-webkit-keyframes scroll {
	0% {
		transform: translate(0, -100%);
	}
	60% {
		transform: translate(0, 100%);
	}
	100% {
		transform: translate(0, 100%);
	}
}

.main_logo {
	position: absolute;
	bottom: 50px;
	left: 30px;
	width: 176px;
	height: 191px;  
}
.main_logo img {
	width: 100%;
	height: auto;
  }  

@media screen and (min-width: 801px) and (max-width: 1300px) {
	#fv_scroll {
		right: 130px;
	}
}/* ----- max-width:1200px ----- */

/*---------------------
サイドバー
-----------------------*/
#side_area {
	position: fixed;
	background-color: #000;
	width: 100px;
	height: 100vh;
	right: 0;
	z-index: 999;
}
.side_txt {
	position: absolute;
	display: block;
	color: #fff;
	font-size: 14px;
	writing-mode: vertical-rl;
	top: 50px;
	left: 38%;
	letter-spacing: 2px;
}
#side_area ul {
	position: absolute;
	left: 40%;
	bottom: 20px;
}
#side_area ul li:nth-child(2){
	padding-bottom: 10px;
}
#side_area ul li {
	margin-bottom: 10px;
}
.tw_s {
	background: url("../img/common/tw_hover.png") no-repeat top center;
	background-size: 28px auto;
	background-position: 0 0;
}
.tw_s img:hover {
	opacity: 0;
}
.fb_s {
	background: url("../img/common/fb_hover.png") no-repeat top center;
	background-size: 28px auto;
	background-position: 0 0;
}
.fb_s img:hover {
	opacity: 0;
}
.li_s {
	background: url("../img/common/li_hover.png") no-repeat top center;
	background-size: 28px auto;
	background-position: 0 0;
}
.li_s img:hover {
	opacity: 0;
}

/*---------------------
ニュースエリア
-----------------------*/
#news_top {
	position: relative;
	background-color: #fff;
	z-index: 10;
}
#news_top a {
	display: flex;
	justify-content: space-between;
	padding: 35px 120px;
}
#news_wrap {
	display: flex;
}
#news_top h2 {
	display: block;
	align-items: center;
	padding-right: 20px;
}
#news_txt {
	align-items: center;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.4em;
	padding-left: 20px;
}
#news_txt span {
	font-size: 12px;
	margin-left: 10px;
}
.arrow {
	background: url(../img/arrow_over.png) no-repeat;
	background-size: 41px 41px;
	background-position: 0 0;
}
#news_top a:hover .arrow img {
	opacity: 0;
}

/*---------------------
プロジェクトエリア
-----------------------*/
#project_top {
	position: relative;
	background-color: #fcfcfc;
	/* background: url(../img/bg_project.jpg); */
	z-index: 10;
}
#project_area {
	width: 80%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 200px 0;
}
#project_wrap {
	display: flex;
}
#project_wrap h2 {
	width: 40%;
	padding-right: 10px;
}
#project_wrap h2 img {
	width: 297px;
}
.pro_txt {
	width: 60%;
	/* margin-top: -10px; */
	text-align: justify;
	font-size: 16px;
}
.pro_txt a {
	text-decoration: underline;
}
.pro_txt a img {
	vertical-align: text-bottom;
}
.subtitle {
	font-size: 22px;
	font-weight: bold;
}
#project_logo {
	margin: 100px auto;
	margin-bottom: 0;
	padding: 70px 50px;
	text-align: center;
	border: 1px solid #ccc;
}
#project_logo > img {
	margin-bottom: 50px;
}
.companylogo {
	display: flex;
	justify-content: space-evenly;
}

/*---------------------
ムービー紹介エリア
-----------------------*/
#movie_top {
	display: flex;
}
#movie_top h2 {
	border-right: 2px solid #e5e5e5;
}
.movie_area {
	width: 100%;
}
.movie_wrap{
	display: flex;
}
.movie_wrap .line_m {
	width: 8%;
	height: 2px;
	margin-top: 12px;
	background-color: #e5e5e5;
	margin-right: 10px;
}
.movie_wrap section {
	display: block;
	width: 80%;
	padding-bottom: 120px;
}
.movie_wrap:first-child {
	padding-top: 100px;
}
.movie_wrap:last-child {
	padding-bottom: 70px;
}
h3 {
	margin: 50px auto;
}
.img_b {
	margin-left: auto;
	margin-right: 0;
	margin-top: -400px;
	width: 688px;
	height: 460px;
	background-color: #e5e5e5;
	z-index: -1;
}
.img_b_eva {
	margin-left: auto;
	margin-right: 0;
	margin-top: -300px;
	width: 800px;
	height: 340px;
	background-color: #e5e5e5;
	z-index: -1;
}
hr {
	margin-top: 50px;
	color: #AAA;
}
.acbtn {
	display: block;
	position: relative;
	width: 100%;
	transform: translateX(50%);
	z-index: 5;
	margin-top: -9px;
	margin-left: -29px;
	background: url("../img/ac_open_hover.jpg") no-repeat top center;
	background-size: 59px auto;
	background-position: 0 0;
}
.acbtn img {
	width: 59px;
}
.acbtn img:hover {
	opacity: 0;
}
.acbtn.close_btn:hover {
	background: url("../img/ac_close_hover.jpg") no-repeat top center;
	background-size: 59px auto;
	background-position: 0 0;
}
.acbox {
	display: none;
}
.acbox .txt {
	padding: 30px 0;
	text-align: justify;
}
table {
	border-collapse: collapse;
	width: 100%;
	text-align: justify;
	/* white-space: nowrap; */
}
table tr{
	border-bottom: 1px solid #AAA;
}
table tr:first-child {
	border-top: 1px solid #AAA;
}
table tr td {
	vertical-align: middle;
	padding: 20px 40px;
	padding-left: 0;
	margin-left: 0;
}
td p {
	background-color: #000;
	padding: 15px 10px;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	line-height: 1.5em;
}
td a {
	text-decoration: underline;
}

/*---------------------
関連リンクエリア
-----------------------*/
#rlinks_top {
	background: url(../img/bg_rlinks.jpg) no-repeat center top;
	background-size: cover;
	width: 100%;
	padding: 130px 0 150px;
}
#rlinks_top h3 {
	margin: 0 auto 50px;
}
#rlinks_top h3 img {
	margin: 0 auto;
}
#rlinks_wrap {
	width: 60%;
	max-width: 1200px;
	margin: 0 auto;
	font-size: 20px;
}
#rlinks_wrap a {
	color: #fff;
}
.rlinks {
	display: flex;
	justify-content: space-between;
	position: relative;
	padding: 35px 0;
	border-bottom: 1px solid #858585;
	line-height: 2em;
	padding-left: 50px;
}
.rlinks::before {
	content: url(../img/r_content.png);
	vertical-align: middle;
	margin-left: 0;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#rlinks_wrap:first-of-type {
	border-top: 1px solid #858585;
}
#rlinks_wrap a .rlinks:hover {
	color: #fa0000;
}
#rlinks_wrap .arrow2 {
	background: url(../img/arrow_over.png) no-repeat;
	background-size: 41px 41px;
}
#rlinks_wrap a .rlinks:hover img {
	opacity: 0;
}

/* #rlinks_wrap img:hover {
	opacity: 0;
} */

/*---------------------
フッター
-----------------------*/
footer {
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding: 40px 0 50px;
	background: #fff;
	text-align: center;
}
small {
	width: 80%;
	display: block;
	margin: 0 auto;
	line-height: 1.8em;
}
.footer_menu {
	display: block;
	margin: 0 auto;
	width: 700px;
	margin-bottom: 30px;
}
.footer_menu ul {
	display: flex;
	justify-content: space-between;
}
.footer_menu ul li {
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 4em;
}
.footer_menu ul li a {
	display: block;
	padding: 0 20px;
}

/*---------------------
煙
-----------------------*/
#bottom_fade {
	position: absolute;
	width: 100%;
	height: 20%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a99faf+0,b687c8+100&0+0,1+99 */
background: -moz-linear-gradient(top,  rgba(169,159,175,0) 0%, rgba(182,135,200,1) 99%, rgba(182,135,200,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(169,159,175,0) 0%,rgba(182,135,200,1) 99%,rgba(182,135,200,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(169,159,175,0) 0%,rgba(182,135,200,1) 99%,rgba(182,135,200,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a99faf', endColorstr='#b687c8',GradientType=0 ); /* IE6-9 */
	left: 0;
	bottom: 0;
	max-height: 300px;
	transition:0.3s;
	opacity: 1;
}
#bottom_fade_ef {
	position: absolute;
	width: 100%;
	height: 20%;
	left: 0;
	bottom: 0;
	max-height: 300px;
	transition:0.3s;
	opacity: 1;
}

.bottom_active{
	opacity: 1 !important;
}

/*---------------------
アニメーション
-----------------------*/
.fadeIn_up {
	opacity: 0;
	transform: translate(0, 20%);
	transition: 1s;
  }
  .fadeIn_up.is-show {
	transform: translate(0, 0);
	opacity: 1;
  }
  .fadeIn_left {
	opacity: 0;
	transform: translate(-50%, 0);
	transition: 2s;
  }
  .fadeIn_left.is-show {
	transform: translate(0, 0);
	opacity: 1;
  }
  .fadeIn_right {
	opacity: 0;
	transform: translate(50%, 0);
	transition: 2s;
  }
  .fadeIn_right.is-show {
	transform: translate(0, 0);
	opacity: 1;
  }
  
  .fadein_all { 
	opacity:0;
	animation-name:fadein03;
	animation-delay:1s;
	animation-duration:2s; 
	animation-fill-mode: forwards;
  }
  @keyframes fadein03 {
	0% {
	opacity: 0;
	transform: translateY(30px);
	}
	100%{
	  opacity: 1;
	   transform: translateY(0);
	}
  }
  .fadein_sub { 
	opacity:0;
	animation-name:fadein03;
	animation-delay:2s;
	animation-duration:4s; 
	animation-fill-mode: forwards;
  }
  @keyframes fadein03 {
	0% {
	opacity: 0;
	transform: translateY(30px);
	}
	100%{
	  opacity: 1;
	   transform: translateY(0);
	}
  }