@charset "utf-8";

.circle_more{z-index:60; display:block; width:120rem; height:120rem; position:absolute; left:50%; bottom:45rem; border:none; background:url(../img/common/icon_play.svg)no-repeat center; background-size:17rem 21rem; transform:translateX(-50%);}
.circle{position:absolute; z-index:10; left:0; bottom:0; display: flex; justify-content: center; align-items: center;  width:120rem; height:120rem; border-radius: 100%; pointer-events: none }
.circle_more .text,
.circle_more .text2{ position: absolute; width: 100%; height: 100%; animation: rotateAni 15s linear infinite }
.circle_more .text span,
.circle_more .text2 span{ position: absolute; left: 50%; transform-origin: 0 calc( 120rem / 2 ); font-size:14rem; color:#fff; font-weight:600; text-transform:uppercase; }

@keyframes rotateAni {
	0%{ transform: rotate( 0deg ) }
	100%{ transform: rotate( -360deg ) }
}

.area_visual{position:relative;}
.area_visual .modal{
	z-index: 60;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.8);
	width: 100%;
	height: 100vh;
	}
.area_visual iframe{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	display:block;
	width:80%; height:80%;
}
.area_visual .modal-close{
	cursor: pointer;
	position: absolute;
	top:30rem;
	right:30rem;
	padding: 5px;
	color: #fff;
	z-index: 60;
	font-size:40rem
}

.is-hide{display: none;}

.v-active .scrolldown,
.v-active #hd{display:none;}


/* common */
.tit_main{ transition:all 800ms ease;}
.tit_main span{font-size:20rem; color:#a71d1d; font-weight:700}
.tit_main h3{line-height:1.4; margin-top:35rem; font-weight:800; font-size:56rem; color:#222; letter-spacing:-0.05rem;}
.section{height:100vh;width: 100%;}

#en .tit_main h3{line-height:1.2;}

.btn_more > div{position:relative; opacity:0; top:50%; width:1%; height:1%; margin:0 auto; background:#fff url(../img/main/icon_plus_c.png) no-repeat 50%;; border:1px solid #f0f0f0; transform:translateY(-50%); border-radius:50%;}
.btn_more:hover{border:0;}
.btn_more:hover > div{opacity:1; width:100%; height:100%;}
.btn_more > div{position:relative; opacity:0; top:50%; width:1%; height:1%; margin:0 auto; transform:translateY(-50%); border-radius:50%;}
.btn_more{display:block;width:70rem;height:70rem;background-size:cover;background-position:center center;border-radius:50%;background-repeat:no-repeat;background: #a71d1d url(../img/main/icon_plus.png) no-repeat 50%;border: 1rem solid #a71d1d;}
.btn_more *{transition:all ease-in-out 200ms;}

.btn_view > div{position:relative; opacity:0; top:50%; width:1%; height:1%; margin:0 auto; background:#fff url(../img/main/icon_view_c.png) no-repeat 50%;; border:1px solid #f0f0f0; transform:translateY(-50%); border-radius:50%;}
.btn_view:hover{border:0;}
.btn_view:hover > div{opacity:1; width:100%; height:100%;}
.btn_view > div{position:relative; opacity:0; top:50%; width:1%; height:1%; margin:0 auto; transform:translateY(-50%); border-radius:50%;}
.btn_view{display:block;width:70rem;height:70rem;background-size:cover;background-position:center center;border-radius:50%;background-repeat:no-repeat;background: #a71d1d url(../img/main/icon_view.png) no-repeat 50%;border: 1rem solid #a71d1d;}
.btn_view *{transition:all ease-in-out 200ms;}

.scrolldown{position:fixed;left:90rem;top:45%;z-index:30;width: 15rem;display: block;height: 175rem;}
.iconScroll{position:absolute;left:0;z-index:100}
.iconScroll:before{position:absolute;left:50%;z-index:100}
.iconScroll{width: 12rem;height: 27rem;bottom: 50rem;box-shadow: inset 0 0 0 1.5rem #ccc;border-radius: 20rem;}
.iconScroll:before{content:'';width:2rem;height:2rem;background:#ccc;margin-left:-1px;top:4px;border-radius:2px;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count: infinite;animation-iteration-count:infinite;-webkit-animation-name: scroll;animation-name:scroll}
.scrolldown span{position:absolute;width: 130rem;left: -58rem;top: 0;color:#ccc;font-size: 12rem;transform: rotate(-90deg);letter-spacing: 3rem;font-weight: 600;}

.area_quick{z-index: 50; position:fixed; right:50rem; bottom:40rem;}
.area_quick ul li{margin-top:10rem;}
.area_quick ul li a{display:flex;align-items: center; justify-content: center;  width:70rem; height:70rem; border-radius:50%; background:#a71d1d}
.area_quick ul li a.btn-top{background:#fff;}


@-webkit-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(15rem);
    transform: translateY(15rem);
  }
}

@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(15rem);
    transform: translateY(15rem);
  }
}


/* visual */
.area_visual [data-visual="00"] .img{background-image:url(../img/main/img_visual01.jpg);}
.area_visual [data-visual="01"] .img{background-image:url(../img/main/img_visual02.jpg);}
.area_visual [data-visual="02"] .img{background-image:url(../img/main/img_visual03.jpg);}
.visual_list li{position:relative; width:100%; height:100vh; } 
.visual_list li .img{position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover; background-position:50% 50%; }
.visual_list li.swiper-slide-active .img{animation: imagescale 5s; -webkit-animation: imagescale 5s; -moz-animation: imagescale 5s; -o-webkit-animation: imagescale 5s;}

.area_visual .txt{position:absolute; top:40vh;}
.area_visual .txt p{line-height:1.2; font-weight:800; font-size:68rem; color:#fff;  transform: translate3d(0, 100%, 0); opacity:0}
.area_visual .txt p i{color:#a71d1d; font-style: normal;}
.area_visual .txt p i.blue{color:#528dcc}
.area_visual .txt div{overflow:hidden;}
.area_visual .txt span{position:relative; display:block; margin-top:45rem; font-size:28rem; color:#fff; font-weight:600; transform: translate3d(0, 150%, 0); opacity:0;}
.area_visual .txt span i{color:#a71d1d; font-style: normal;}
.area_visual .swiper-slide-active .txt p{transform: translate3d(0, 0%, 0); opacity: 1; transition: 1.2s .6s;}
.area_visual .swiper-slide-active .txt span{transform: translate3d(0, 0%, 0); opacity: 1; transition:0.8s 1.4s;}

#en .area_visual .txt{position:absolute; top:38vh;}
#en .area_visual .txt p{word-break:keep-all;}
#en .area_visual [data-visual="02"] .txt p{font-size:52rem; word-break:keep-all;}

.visual_control{z-index: 50; position:absolute; bottom:220rem; left:0; width:100%;}
.visual_control .wrap{display:flex;}

.area_visual .circle-box svg{overflow: visible;position:absolute; width: 60rem;height: 60rem;fill:none;stroke:#fff;transform: rotate(-90deg);}
.control-box{position:relative; width:60rem; height:60rem;}
.control-box > div{position:absolute; width:12rem; height:12rem; left:50%; top:50%; transform: translate(-50%, -50%);}
.control-box > div span{display:block; width:100%; height:100%; font-size:0; cursor:pointer}
.control-box .stop{}
.control-box .stop span{background:url(../img/main/icon_pause.png) no-repeat center;}
.control-box .start{display:none;}
.control-box .start span{background:url(../img/main/icon_play.png) no-repeat center;}

#circle__path.on{stroke-dashoffset: 129;transition: none;}
#circle__path{stroke-dashoffset: 0;transition: all 4s ease 0s;stroke-dasharray: 129;}
#circle__path2 {stroke: #ffffff4f;}

.slide-btn-wrap{position:relative;margin-left:50rem;width:150rem;display: flex;align-items: center;}
.slide-btn-wrap .swiper-button-prev{z-index:50; left:0;width: 20rem;}
.slide-btn-wrap .swiper-button-next{z-index:50; right:0; width:20rem;}
.slide-btn-wrap .swiper-button-next:after, 
.slide-btn-wrap .swiper-button-prev:after{color:#fff; font-size:18rem; font-weight: bold;}
.slide-btn-wrap .swiper-pagination{position:static;display: flex;align-items: center;justify-content: center;}
.slide-btn-wrap .swiper-pagination span{font-size:16rem; color:#fff; font-weight:bold;}
.slide-btn-wrap .swiper-pagination span.dot{display:block;width:3rem;height:3rem;background:#fff;margin: 0 8rem;}
.slide-btn-wrap .swiper-pagination span.total{opacity:0.5}

@keyframes imagescale {
  0% {
    transform: scale(1.2)  rotate(.001deg);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
  }

  100% {
    transform: scale(1)  rotate(.001deg);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }
}

/* project */
#section1{justify-content: center !important; background:url(../img/main/img_project_bg.jpg) no-repeat 50%;}
.area_project{margin-left:220rem;display: flex;align-items: center;}
.area_project .txt{width:630rem}
.area_project .swiper-slide{width:550rem; transition:0.5s}
.area_project .swiper-slide .img{display:block; overflow:hidden;position:relative;width:100%;padding-top:59%;text-align:center;transition:opacity 0.5s ease-out 0s; background-size:cover;}
.area_project .swiper-slide .img img{width:100%;}
.area_project .swiper-slide:hover{margin-top:-30rem; transition:0.5s}
.area_project .swiper-slide .text{overflow:hidden;position:relative;margin-top: 35rem;font-size:24rem;font-weight:600;height: 60rem;vertical-align: middle;line-height: 60rem;padding-right: 75rem;white-space: nowrap;text-overflow: ellipsis;}
.area_project .swiper-slide .text:before{opacity:0; content:''; position:absolute; right:0; top:0; display:block; width:60rem; height:60rem; background:#a71d1d url(../img/common/icon_arr.png) no-repeat center; border-radius:50%; transition:0.5s}
.area_project .swiper-slide:hover .text:before{opacity:1; transition:0.5s}
.area_project .swiper-slide:hover .img{box-shadow: 11rem 22rem 23rem rgb(0 0 0 / 7%);}

.area_project .project_list {width:calc(100% - 630rem);overflow: hidden;padding-top: 30rem;}
.area_project .slide_btn{display: flex;justify-content: space-between;align-items: center;position: relative;width:365rem;margin-top: 100rem;}
.slide_btn div[class*="swiper-button"]{width:70rem;height:70rem;border:1rem solid #eaeaea;border-radius:50%;display: block;margin-top: 0;}
.slide_btn .swiper-button-next, 
.slide_btn .swiper-button-prev{position:static;}
.slide_btn .swiper-button-next{background:#fff url(../img/common/icon_arr_right_c.png) no-repeat center; }
.slide_btn .swiper-button-prev:after{display:none;}
.slide_btn .swiper-button-prev{background:#fff url(../img/common/icon_arr_left.png) no-repeat center; }
.slide_btn .swiper-button-next:after{display:none;}
.slide_btn .swiper-pagination{position:static;display: flex; align-items: center;justify-content: center;}
.slide_btn .swiper-pagination{position:static;display: flex;align-items: center;justify-content: center;width: 125rem;}
.slide_btn .swiper-pagination span{font-size:16rem; color:#e5e5e5; font-weight:bold;}
.slide_btn .swiper-pagination span.dot{display:block;width:3rem;height:3rem;background:#e5e5e5;margin: 0 8rem;}
.slide_btn .swiper-pagination span.current{color:#a71d1d}


/* business */
.area_biz{display:flex; align-items: flex-end; height:100vh;}
.area_biz *{color:#fff;}
.area_biz > div{width:50%;}
.area_biz .biz_img_wrap{position:relative; height: 100vh;}
.area_biz .biz_img [data-biz].on{opacity:1;}
.area_biz .biz_img [data-biz="01"]{background-image:url(../img/main/bg_business04.jpg);}
.area_biz .biz_img [data-biz="02"]{background-image:url(../img/main/bg_business01.jpg);}
.area_biz .biz_img [data-biz="03"]{background-image:url(../img/main/bg_business02.jpg);}
.area_biz .biz_img [data-biz="04"]{background-image:url(../img/main/bg_business03.jpg);}
.area_biz .biz_img [data-biz]{position:absolute;opacity:0;top:0;left:0;width:100%;height: 100%;background-size:cover;transition:all 0.5s ease;background-position: 50%;}

.area_biz .biz_text{padding:150rem 100rem;}
.area_biz .list_biz{display:flex; flex-wrap: wrap; position:relative; z-index:9; margin-top:140rem;}
.area_biz .list_biz ul{display:flex; align-items:center;}
.area_biz .list_biz li{flex: 1; margin-right:10rem; transition:0.5s}
.area_biz .list_biz li a{display:flex;align-items:center;/* width:190rem; */padding: 45rem 10rem;font-size: 18rem;letter-spacing:-0.5rem;transition:all 0.5s ease;flex-direction: column;}
.area_biz .list_biz li a p{text-align: center; margin-top:30rem; color:#222;}

.area_biz .list_biz li span{width:80rem; height:65rem; background-position:50%; background-repeat:no-repeat}
.area_biz .list_biz li[data-biz="01"] span{background-image:url(../img/main/icon_business04.png);}
.area_biz .list_biz li[data-biz="02"] span{background-image:url(../img/main/icon_business01.png);}
.area_biz .list_biz li[data-biz="03"] span{background-image:url(../img/main/icon_business02.png);}
.area_biz .list_biz li[data-biz="04"] span{background-image:url(../img/main/icon_business03.png);}
.area_biz .list_biz li.on{background:#a71d1d;box-shadow: 11rem 14rem 20rem rgb(167 29 29 / 20%);}
.area_biz .list_biz li.on[data-biz="01"] span{background-image:url(../img/main/icon_business04_w.png);}
.area_biz .list_biz li.on[data-biz="02"] span{background-image:url(../img/main/icon_business01_w.png);}
.area_biz .list_biz li.on[data-biz="03"] span{background-image:url(../img/main/icon_business03_w.png);}
.area_biz .list_biz li.on[data-biz="04"] span{background-image:url(../img/main/icon_business03_w.png);}

.area_biz .list_biz li.on a p{color:#fff;}

/* news */
#section3 {display: flex; justify-content: center; flex-direction: column; padding-top: 55rem;}
.area_news{padding-top:35rem;}
.area_news .slide_btn{display:flex; position:absolute; right:0; top:90rem;}
.area_news .slide_btn > *{margin-left:15rem;}
.news_list{margin-top: 60rem;padding-top:30rem;}
.news_list .swiper-slide{transition: 0.5s;}
.news_list .swiper-slide:hover{margin-top:-30rem; transition:0.5s}
.news_list li .img{overflow:hidden;position:relative;width:100%;padding-top:59%;text-align:center;transition:opacity 0.5s ease-out 0s;}
.news_list li .img img{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); transition:all 0.5s ease-out 0s;}
.news_list li:hover .img{box-shadow: 11rem 22rem 23rem rgb(0 0 0 / 7%);}
.news_list li .text{margin-top:35rem;}
.news_list li h6{overflow:hidden; margin-bottom:20rem; color:#222; font-size:20rem; font-weight:600; white-space: nowrap;text-overflow: ellipsis;}
.news_list li time{display:block; font-size:14rem; color:#ccc;}
.news_list li p{display:none}
.news_list li a span{display:block; height:200rem; background-size:cover; background-position:50% 50%; background-repeat:no-repeat;}

/* inquiry */
.area_inquiry .inr{display:flex;align-items: center;}
.area_inquiry .inr > div{width:50%;}
.area_inquiry .inr .text{padding-left:220rem;}
.area_inquiry .inr .text p{margin:60rem 0 80rem 0; font-size:20rem; color:#222; font-weight:600; }
.area_inquiry .inr .image{overflow:hidden; height:600rem;}
.area_inquiry .inr .image > div{width:100%;height:100%;background:url(../img/main/img_inquiry.jpg) no-repeat 50%;background-size: cover;}
.area_inquiry .btn_wrap{display:flex; align-items: center;}
.area_inquiry .btn_wrap em{margin-right:30rem; font-size:16rem;color:#999;letter-spacing:2rem;font-weight:600;}
.active .area_inquiry .inr .image > div{animation: imagescale 5s; -webkit-animation: imagescale 5s; -moz-animation: imagescale 5s; -o-webkit-animation: imagescale 5s;}

#en .area_inquiry .inr .text{padding-right:50rem;}

@keyframes main_slide_motion {
	from {
		opacity:0;filter:Alpha(opacity=0);
		margin-right:15px
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		margin-right:0
	}
}

@keyframes bgscale {
	from {transform: scale(1.2);}
	to {transform: scale(1);}
}

@media (max-width:1680px){
	.scrolldown{left:20rem}
	.area_visual .wrap{margin:0 70rem}
}

@media (max-width:1480px){
	.area_project{margin-left:70rem}
	.area_project .txt{width:500rem;}
	.area_project .project_list{width: calc(100% - 500rem);}

	.area_biz{align-items: center;}
	.area_biz .biz_text{padding:0 80rem;}
	.area_biz .list_biz li a{/* width:180rem; */padding: 45rem 10rem;}

	.area_inquiry .inr .text{padding-left:70rem}
	
}

@media (max-width:1279px){
	
	
}

@media (max-width:1023px){
	
	.area_quick{right:20rem; bottom:20rem}
	.tit_main h3{font-size:35rem;line-height: 1.2;}

	.fp-scrollable .fp-section,
	.fp-scrollable .fp-slide{height:auto !important;}
	.fp-overflow{overflow:hidden !important;}
	.area_visual .txt p{font-size:50rem;}
	.area_visual .txt span{font-size:22rem}
	.visual_control{bottom:300rem;}

	#en .visual_control{bottom:100rem;}
	
	.scrolldown{top:450rem; position:absolute;}
	.area_project{flex-direction: column;align-items: flex-start;margin-left:0;margin-top: 100rem;margin-bottom: 100rem;}
	.area_project .txt{width:100%;padding:0 30rem;display: flex;justify-content: space-between;}
	.area_project .project_list{width:calc(100% - 30rem); margin-left:30rem}
	.area_project .slide_btn{margin-top:50rem}
	.area_project .swiper-slide{width:420rem}

	.area_biz{display:block;/* margin-top:70rem; */height: auto;}
	.area_biz .biz_img_wrap{width:100%; height:600rem}
	.area_biz .biz_img_wrap:before{content:'';opacity: 0.2;position:absolute;left:0;top:0;display:block;width:100%;height:100%;background:#000;z-index: 1;}
	.area_biz .biz_text{display: flex;justify-content: center;flex-direction: column;align-items: center;position:absolute;top: 50%;width:100%;transform: translateY(-50%);z-index: 2;}
	.area_biz .biz_text .tit_main{text-align:center;}
	.area_biz .biz_text .tit_main h3{color:#fff;}
	.area_biz .list_biz{margin-top:40rem}
	.area_biz .list_biz li{flex: auto; background:#fff; min-width:120rem}

	#section3{padding:100rem 0}

	.area_news .slide_btn{top:70rem;}
	.news_list{padding-top:0}
	.news_list .swiper-slide:hover{margin-top:0}

	.area_inquiry .inr .text{padding-left:30rem}
}

@media (max-width:860px){
	.area_visual .txt p{line-height:1.3; font-size:40rem;}	
	#en .area_visual [data-visual="02"] .txt p{font-size:30rem}
	.area_visual .txt span{margin-top:40rem;}
	.visual_control{bottom:245rem;}

	#main-counter > em{font-size:16rem;}
	[data-main-tit] h3{font-size:30rem;}
	
	.slide_btn .swiper-pagination{display:none;}
	.area_project .slide_btn{width:auto;}
	.area_project .slide_btn > *{margin-left:7rem}
	.area_project .swiper-slide:hover{margin-top:0}

	.area_news .slide_btn > *{margin-left:7rem}
	
}

@media (max-width:540px){
	.area_quick ul li a{width:35rem; height:35rem}
	
	.scrolldown{display:none;}
	
	.area_visual .wrap{margin:0 30rem}
	.area_visual .txt p{font-size:27rem;}
	.area_visual .swiper-slide-active .txt span{margin-top:25rem; font-size:16rem}

	#en .area_visual [data-visual="02"] .txt p{font-size:25rem;}

	#main-control{bottom:auto; top:25vh}
	#main-counter > em{font-size:13rem;}
	#main-counter > span{font-size:15rem;}
	
	.area_visual .circle-box svg,
	.control-box{width:40rem; height:40rem;}
	.slide-btn-wrap{margin-left:30rem; width:120rem}
	.slide-btn-wrap .swiper-pagination span{font-size:13rem}
	
	.tit_main span{font-size:17rem;}
	.tit_main h3{margin-top:20rem; font-size:22rem}
	
	.slide_btn div[class*="swiper-button"]{width:40rem; height:40rem}
	.btn_more{width:40rem; height:40rem}
	
	.area_project{margin:40rem 20rem}
	.area_project .txt{padding:0;}
	.area_project .project_list{width:100%; margin-left:0}
	.area_project .swiper-slide .text{line-height:30rem; height:30rem; margin-top:25rem; font-size:18rem}
	.area_project .swiper-slide .text:before{opacity:1;width:30rem;height:30rem;right: 3rem;}
	
	.area_biz .biz_img_wrap{height:450rem}
	.area_biz .list_biz li a{width:100%; padding: 20rem 10rem;}

	.area_biz .biz_text{padding:0 20rem;}
	.area_biz .list_biz li a p{text-align:center; font-size:15rem}

	#section3{padding:40rem 0}
	.area_news .tit_main h3 em{display:block}
	.area_news .slide_btn{top:90rem}
	.news_list{margin-top:30rem}

	.news_list li .text{margin-top:15rem;}
	.news_list li .text p{margin-bottom:10rem; font-size:12rem}
	.news_list li .text span{font-size:10rem;}

	.area_inquiry .inr{flex-direction: column-reverse;}
	.area_inquiry .inr > div{width:100%}
	.area_inquiry .inr .image{height:200rem}
	.area_inquiry .inr .text{padding:30rem 30rem 60rem 30rem}
	.area_inquiry .inr .text p{font-size:16rem; margin:40rem 0}
	.area_inquiry .btn_wrap em{font-size:14rem;}

	.btn_view{width:40rem; height:40rem}

	.circle_more{bottom:15rem; width:80rem; height:80rem;background-size: 15rem 16rem;}
	.circle{width:80rem; height:80rem}
	.circle_more .text span, .circle_more .text2 span{font-size:10rem; transform-origin: 0 calc( 80rem / 2 );}

}


@media (max-width:359px){
	.area_quick ul li a{width:45rem; height:45rem;}
}