@charset "UTF-8";

@media screen and (min-width:751px) {

	.mainvisual{
		padding:0 0 0 0;
		position: relative;
		margin:0 0 0 0;
	}
	
	.mainvisual .logo{
		width:202px;
		position: absolute;
		top:40px;
		left: 2.5%;
		z-index: 2;
	}
	
	.mainvisual .slidecontainer{
		width:100%;
		position: relative;
		z-index: 1;
	}
	
	.mainvisual .slidecontainer .slider{
		width:100%;
		overflow: hidden;
		z-index: 1;
		height:100vh;
	}
	
	.mainvisual .slidecontainer .slider .box .inbox{
		height:100vh;
		width:100%;
		position: relative;
	}
	
	.mainvisual .slidecontainer .slider .box img{
		position: relative;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	
	.mainvisual .slidecontainer .slider .add-animation {
  		animation: zoomOut 15s linear 0s normal both;
	}
	
	.mainvisual .mtlbox{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 2;
		pointer-events: none;
	}
	
	.mainvisual .mtlbox h1{
		max-width:347px;
		width:90%;
		margin:0 auto;
	}
	
	.mainvisual .mtlbox .mtx{
		font-size: 1.8rem;
		letter-spacing: 0.15em;
		font-weight: 600;
		color:#fff;
		background:#000;
		padding:5px 25px;
		margin:30px 0 0 0;
	}
	
	.mainvisual .mtlbox .mtx span{
		font-size: 1.2rem;
	}
	
	/*concept_cont*/
	.concept_cont{
		width:100%;
		padding:160px 0;
		background-image: url("/new/new_2024/images/index/concept_bg.jpg");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.concept_cont .innerbox{
		padding:0 0 0 0;
		position: relative;
	}
	
	.concept_cont .innerbox p{
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 2em;
		letter-spacing: 0.15em;
		margin:0 0 40px 0;
		color:#fff;
		text-align: center;
	}
	
	.concept_cont .innerbox h2{
		font-size: 3.6rem;
		font-weight: 600;
		line-height: 1.8em;
		letter-spacing: 0.15em;
		margin:0 0 10px 0;
		color:#fff;
		text-align: center;
	}
	
	.concept_cont .innerbox h3{
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 2em;
		letter-spacing: 0.15em;
		margin:0 0 70px 0;
		color:#fff;
		text-align: center;
	}
	
	/*movie_cont*/
	.movie_cont{
		width:100%;
		height:51.5vw;
		display: flex;
		justify-content:center;
		align-items: center;
		background-image: url("/new/new_2024/images/index/movie_bg.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		cursor: pointer;
	}
	
	/*.movie_cont .playbtn{
		width:88px;
		cursor: pointer;
	}*/
	
	/*service*/
	.service_cont{
		padding:150px 0 150px 0;
		background:#f2f2f2;
	}
	
	.service_cont .innerbox{
		padding:0 0 0 150px;
		position: relative;
	}
	
	.service_cont .innerbox ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.service_cont .innerbox ul li{
		width:calc((100% - 1px) / 2);
		margin:0 0 1px 0;
		overflow: hidden;
	}
	
	.service_cont .innerbox ul li:nth-child(1) a,
	.service_cont .innerbox ul li:nth-child(2) a{
		padding-top:86.2%;
		position: relative;
		display: block;
	}
	
	.service_cont .innerbox ul li:nth-child(3) a,
	.service_cont .innerbox ul li:nth-child(4) a{
		padding-top:42.4%;
		position: relative;
		display: block;
	}
	
	.service_cont .innerbox ul li .phbox{
		position: absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		z-index: 1;
	}
	
	.service_cont .innerbox ul li .phbox img{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		transition: all 0.5s;
		transform: scale(1);
	}
	
	.service_cont .innerbox ul li a:hover .phbox img{
		transform: scale(1.1);
	}
	
	.service_cont .innerbox ul li .txcont{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		z-index: 2;
		padding:20px;
	}
	
	.service_cont .innerbox ul li .txcont .tl{
		font-size: 3.6rem;
		font-weight: 700;
		color:#fff;
	}
	
	.service_cont .innerbox ul li .txcont .cap{
		font-size: 1.4rem;
		color:#fff;
	}
	
	.service_cont .innerbox ul li .txcont span{
		width:58px;
		height:21px;
		border:1px solid #fff;
		border-radius: 9999px;
		display: flex;
		justify-content:center;
		align-items: center;
		transition: all 0.2s;
	}
	
	.service_cont .innerbox ul li .txcont span::before{
		content: "";
		display: inline-block;
 		width: 6px;
  		height: 6px;
  		border-top: 1px solid #fff;
  		border-right: 1px solid #fff;
  		transform: rotate(45deg);
		transition: all 0.2s;
	}
	
	.service_cont .innerbox ul li a:hover .txcont span{
		border:1px solid #1d2088;
		background:#1d2088;
	}
	
	/*topics*/
	.topics_cont{
		padding:150px 0 120px 0;
	}
	
	.topics_cont .innerbox{
		padding:0 150px;
		position: relative;
	}
	
	.topics_cont .innerbox ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.topics_cont .innerbox ul::after{
		content: "";
		width:calc((100% - 50px) / 3);
		height:0;
		display: block;
	}
	
	.topics_cont .innerbox ul li{
		width:calc((100% - 50px) / 3);
		margin:0 0 65px 0;
	}
	
	.topics_cont .innerbox ul li .phbox{
		width:100%;
		overflow: hidden;
		margin:0 0 25px 0;
	}
	
	.topics_cont .innerbox ul li .phbox .inbox{
		padding-top:66.4%;
		position: relative;
	}
	
	.topics_cont .innerbox ul li .phbox .inbox img{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		transition: all 0.5s;
		transform: scale(1);
	}
	
	.topics_cont .innerbox ul li a:hover .phbox .inbox img{
		transform: scale(1.1);
	}
	
	.topics_cont .innerbox ul li .cate{
		margin:0 0 10px 0;
	}
	
	.topics_cont .innerbox ul li .cate span{
		font-size: 1.2rem;
		border-radius: 9999px;
		padding:2px 10px;
		line-height: 1;
	}
	
	.topics_cont .innerbox ul li .cate span.news{
		border:1px solid #689485;
		color:#689485;
	}
	
	.topics_cont .innerbox ul li .cate span.column{
		border:1px solid #c7ad8c;
		color:#c7ad8c;
	}
	
	.topics_cont .innerbox ul li .cate span.event{
		border:1px solid #6fa7ca;
		color:#6fa7ca;
	}
	
	.topics_cont .innerbox ul li .tl{
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 1.6em;
		margin:0 0 15px 0;
	}
	
	.topics_cont .innerbox ul li .date{
		font-size: 1.2rem;
		color:#808080;
	}
	
	
	/*factory*/
	.factory_cont{
		width:100%;
		display: flex;
		margin:0 0 1px 0;
	}
	
	.factory_cont .phbox{
		position: relative;
		overflow: hidden;
		width:50%;
		height: 50vw;
	}
	
	.factory_cont .phbox img{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		transform: scale(1);
		transition: all 0.5s;
	}
	
	.factory_cont .phbox.active img{
		transform: scale(1.1);
	}
	
	.factory_cont .txcont{
		background:#f2f2f2;
		padding:min(7vw,100px);
		width:50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.factory_cont .txcont p{
		margin:20px 0 70px 0;
		font-size: 1.6rem;
		line-height: 1.8em;
	}
	
	/*bottom_cont*/
	.bottom_cont{
		width:100%;
		display: flex;
		justify-content: space-between;
	}
	
	.bottom_cont .box{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		width:calc((100% - 2px) / 3);
		margin:0 0 1px 0;
		height:288px;
	}
	
	.bottom_cont .box img{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		transform: scale(1);
		transition: all 0.5s;
		z-index: 1;
	}
	
	.bottom_cont .box:hover img{
		transform: scale(1.1);
	}
	
	.bottom_cont .box p{
		font-size: 2.2rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		color:#fff;
		z-index: 2;
		position: relative;
	}
	
	.bottom_cont .box span{
		width:58px;
		height:21px;
		border:1px solid #fff;
		border-radius: 9999px;
		position: absolute;
		bottom:20px;
		right:20px;
		z-index: 2;
		display: flex;
		justify-content:center;
		align-items: center;
		transition: all 0.2s;
	}
	
	.bottom_cont .box span::before{
		content: "";
		display: inline-block;
 		width: 6px;
  		height: 6px;
  		border-top: 1px solid #fff;
  		border-right: 1px solid #fff;
  		transform: rotate(45deg);
		transition: all 0.2s;
	}
	
	.bottom_cont .box:hover span{
		border:1px solid #1d2088;
		background:#1d2088;
	}
	
	/*common_tl*/
	.common_tl.rotate{
		transform: rotate(90deg);
		transform-origin: left bottom;
		position: absolute;
		top:-150px;
		left:35px;
	}
	
	.common_tl span{
		font-size: 1.3rem;
		display: flex;
		align-items: center;
		letter-spacing: 0.12em;
		font-weight: 600;
	}
	
	.common_tl span::after{
		content: "";
		width:40px;
		border-bottom:1px solid #1a1a1a;
		display: block;
		margin:0 0 0 10px;
	}
	
	.common_tl h2{
		font-size: 5rem;
		letter-spacing: 0.1em;
		font-weight: 700;
		line-height: 1;
	}
	
	.common_tl.white span{
		color:#fff;
	}
	
	.common_tl.white span::after{
		border-bottom:1px solid #fff;
	}
	
	.common_tl.white h2{
		color:#fff;
	}
	
}


@media screen and (max-width:750px) {
	.mainvisual{
		padding:0 0 0 0;
		position: relative;
		margin:0 0 0 0;
	}
	
	.mainvisual .logo{
		width:111px;
		position: absolute;
		top:15px;
		left: 5%;
		z-index: 2;
	}
	
	.mainvisual .slidecontainer{
		width:100%;
		position: relative;
		z-index: 1;
	}
	
	.mainvisual .slidecontainer .slider{
		width:100%;
		overflow: hidden;
		z-index: 1;
		height:100vh;
	}
	
	.mainvisual .slidecontainer .slider .box .inbox{
		height:100vh;
		width:100%;
		position: relative;
	}
	
	.mainvisual .slidecontainer .slider .box img{
		position: relative;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	
	.mainvisual .slidecontainer .slider .add-animation {
  		animation: zoomOut 15s linear 0s normal both;
	}
	
	.mainvisual .mtlbox{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 2;
	}
	
	.mainvisual .mtlbox h1{
		max-width:250px;
		width:90%;
		margin:0 auto;
	}
	
	.mainvisual .mtlbox .mtx{
		font-size: 1.3rem;
		letter-spacing: 0.15em;
		font-weight: 600;
		color:#fff;
		background:#000;
		padding:5px 15px;
		margin:15px 0 0 0;
	}
	
	.mainvisual .mtlbox .mtx span{
		font-size: 0.8rem;
	}
	
	/*concept_cont*/
	.concept_cont{
		width:100%;
		padding:150px 5% 80px; 
		background-image: url("/new/new_2024/images/index/concept_bg.jpg");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.concept_cont .innerbox{
		padding:0 0 0 0;
		position: relative;
	}
	
	.concept_cont .innerbox .common_tl.rotate{
		transform: rotate(90deg);
		transform-origin: left bottom;
		position: absolute;
		top:-150px;
		left:0;
	}
	
	.concept_cont .innerbox .common_tl.rotate h2{
		font-size: 2.8rem;
		line-height: 1;
	}
	
	.concept_cont .innerbox p{
		font-size: 1.2rem;
		font-weight: 600;
		line-height: 2em;
		letter-spacing: 0.15em;
		margin:0 0 30px 0;
		color:#fff;
		text-align: center;
	}
	
	.concept_cont .innerbox h2{
		font-size: 2.4rem;
		font-weight: 600;
		line-height: 1.8em;
		letter-spacing: 0.15em;
		margin:0 0 0 0;
		color:#fff;
		text-align: center;
	}
	
	.concept_cont .innerbox h3{
		font-size: 1.2rem;
		font-weight: 600;
		line-height: 2em;
		letter-spacing: 0.15em;
		margin:0 0 50px 0;
		color:#fff;
		text-align: center;
	}
	
	/*movie_cont*/
	.movie_cont{
		width:100%;
		height:51.5vw;
		display: flex;
		justify-content:center;
		align-items: center;
		background-image: url("/new/new_2024/images/index/movie_bg.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	/*.movie_cont .playbtn{
		width:44px;
		cursor: pointer;
	}*/
	
	/*service*/
	.service_cont{
		padding:45px 0 55px 0;
		background:#f2f2f2;
	}
	
	.service_cont .innerbox{
		padding:0 5%;
		position: relative;
	}
	
	.service_cont .innerbox .common_tl{
		margin:0 0 40px 0;
	}
	
	.service_cont .innerbox ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.service_cont .innerbox ul li{
		width:100%;
		margin:0 0 1px 0;
		overflow: hidden;
	}
	
	.service_cont .innerbox ul li:nth-child(1) a,
	.service_cont .innerbox ul li:nth-child(2) a{
		padding-top:86.2%;
		position: relative;
		display: block;
	}
	
	.service_cont .innerbox ul li:nth-child(3) a,
	.service_cont .innerbox ul li:nth-child(4) a{
		padding-top:42.4%;
		position: relative;
		display: block;
	}
	
	.service_cont .innerbox ul li .phbox{
		position: absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		z-index: 1;
	}
	
	.service_cont .innerbox ul li .phbox img{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		transition: all 0.5s;
		transform: scale(1);
	}
	
	.service_cont .innerbox ul li a:hover .phbox img{
		transform: scale(1.1);
	}
	
	.service_cont .innerbox ul li .txcont{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		z-index: 2;
		padding:15px;
	}
	
	.service_cont .innerbox ul li .txcont .tl{
		font-size: 2.7rem;
		font-weight: 700;
		color:#fff;
	}
	
	.service_cont .innerbox ul li .txcont .cap{
		font-size: 1.2rem;
		color:#fff;
	}
	
	.service_cont .innerbox ul li .txcont span{
		width:46px;
		height:17px;
		border:1px solid #fff;
		border-radius: 9999px;
		display: flex;
		justify-content:center;
		align-items: center;
		transition: all 0.2s;
	}
	
	.service_cont .innerbox ul li .txcont span::before{
		content: "";
		display: inline-block;
 		width: 5px;
  		height: 5px;
  		border-top: 1px solid #fff;
  		border-right: 1px solid #fff;
  		transform: rotate(45deg);
		transition: all 0.2s;
	}
	
	.service_cont .innerbox ul li a:hover .txcont span{
		border:1px solid #1d2088;
		background:#1d2088;
	}
	
	/*topics*/
	.topics_cont{
		padding:45px 0 70px 0;
	}
	
	.topics_cont .innerbox{
		padding:0 5%;
		position: relative;
	}
	
	.topics_cont .innerbox .common_tl{
		margin:0 0 40px 0;
	}
	
	.topics_cont .innerbox ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.topics_cont .innerbox ul::after{
		content: "";
		width:calc((100% - 10px) / 2);
		height:0;
		display: block;
	}
	
	.topics_cont .innerbox ul li{
		width:calc((100% - 10px) / 2);
		margin:0 0 40px 0;
	}
	
	.topics_cont .innerbox ul li .phbox{
		width:100%;
		overflow: hidden;
		margin:0 0 15px 0;
	}
	
	.topics_cont .innerbox ul li .phbox .inbox{
		padding-top:66.4%;
		position: relative;
	}
	
	.topics_cont .innerbox ul li .phbox .inbox img{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		transition: all 0.5s;
		transform: scale(1);
	}
	
	.topics_cont .innerbox ul li a:hover .phbox .inbox img{
		transform: scale(1.1);
	}
	
	.topics_cont .innerbox ul li .cate{
		margin:0 0 10px 0;
	}
	
	.topics_cont .innerbox ul li .cate span{
		font-size: 1rem;
		border-radius: 9999px;
		padding:3px 10px;
		line-height: 1;
		display: inline-block;
		text-align: center;
	}
	
	.topics_cont .innerbox ul li .cate span.news{
		border:1px solid #689485;
		color:#689485;
	}
	
	.topics_cont .innerbox ul li .cate span.column{
		border:1px solid #c7ad8c;
		color:#c7ad8c;
	}
	
	.topics_cont .innerbox ul li .cate span.event{
		border:1px solid #6fa7ca;
		color:#6fa7ca;
	}
	
	.topics_cont .innerbox ul li .tl{
		font-size: 1.3rem;
		font-weight: 600;
		line-height: 1.6em;
		margin:0 0 10px 0;
	}
	
	.topics_cont .innerbox ul li .date{
		font-size: 1.1rem;
		color:#808080;
	}
	
	
	/*factory*/
	.factory_cont{
		width:100%;
		display: flex;
		flex-direction: column;
		margin:0 0 1px 0;
	}
	
	.factory_cont .phbox{
		position: relative;
		overflow: hidden;
		width:100%;
		height: 61.3vw;
	}
	
	.factory_cont .phbox img{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		transform: scale(1);
		transition: all 0.5s;
	}
	
	.factory_cont .phbox.active img{
		transform: scale(1.1);
	}
	
	.factory_cont .txcont{
		background:#f2f2f2;
		padding:20px 5% 30px;
		width:100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.factory_cont .txcont p{
		margin:20px 0 30px 0;
		font-size: 1.2rem;
		line-height: 1.8em;
	}
	
	/*bottom_cont*/
	.bottom_cont{
		width:100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	
	.bottom_cont .box{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		width:100%;
		margin:0 0 1px 0;
		height:140px;
	}
	
	.bottom_cont .box img{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		transform: scale(1);
		transition: all 0.5s;
		z-index: 1;
	}
	
	.bottom_cont .box:hover img{
		transform: scale(1.1);
	}
	
	.bottom_cont .box p{
		font-size: 1.7rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		color:#fff;
		z-index: 2;
		position: relative;
	}
	
	.bottom_cont .box span{
		display: none;
	}
	
	/*common_tl*/
	.common_tl.rotate{
		
	}
	
	.common_tl span{
		font-size: 1rem;
		display: flex;
		align-items: center;
		letter-spacing: 0.12em;
		font-weight: 600;
	}
	
	.common_tl span::after{
		content: "";
		width:32px;
		border-bottom:1px solid #1a1a1a;
		display: block;
		margin:0 0 0 10px;
	}
	
	.common_tl h2{
		font-size: 2.8rem;
		letter-spacing: 0.1em;
		font-weight: 700;
		line-height: 1;
	}
	
	.common_tl.white span{
		color:#fff;
	}
	
	.common_tl.white span::after{
		border-bottom:1px solid #fff;
	}
	
	.common_tl.white h2{
		color:#fff;
	}
}


@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}