@charset "UTF-8";

@media screen and (min-width:769px){
	
	#index #maincontainer{
		border-top:none;
	}
	
	#index .mainbox{
		padding:100px 0 100px 0;
		position: relative;
		width:100%;
		height:calc(100vh + 100px);
	}
	
	#index .mainbox::after{
		content: "";
		width:62.5%;
		height:100%;
		background:#fdd000;
		position: absolute;
		top:0;
		right:0;
		z-index:-1;
	}
	
	#index .mainbox .phbox{
		width:0;
		height:calc(100vh - 100px);
		position: relative;
		z-index:1;
		transition: all 0.5s;
		transition-delay: 0.1s;
		transition-timing-function: cubic-bezier(.14,.76,.34,.99);
	}
	
	#index .mainbox .phbox::after{
		content: "";
		width:100%;
		height:100%;
		background:#1a1a1a;
		position: absolute;
		top:0;
		left:0;
		transform: scaleX(1);
		transform-origin: top right;
		transition: all 0.5s;
		transition-delay: 0.6s;
		transition-timing-function: cubic-bezier(.14,.76,.34,.99);
	}
	
	#index .mainbox.active .phbox{
		width:75%;
	}
	
	#index .mainbox.active .phbox::after{
		transform: scaleX(0);
	}
	
	
	#index .mainbox .txcont{
		width:100%;
		position: absolute;
		/*height:calc(100vh - 100px);
		top:100px;*/
		bottom:150px;
		left:0;
		z-index:2;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: flex-end;
		padding:0 30px 0 0;
		box-sizing: border-box;
	}
	
	#index .mainbox .txcont .logo{
		width:18.75%;
		line-height: 0;
		min-width: 240px;
		overflow: hidden;
	}
	
	#index .mainbox .txcont .logo img{
		position: relative;
		top:100%;
		transition: all 0.5s;
		transition-delay: 0.6s;
		transition-timing-function: cubic-bezier(.14,.76,.34,.99);
	}
	
	#index .mainbox.active .txcont .logo img{
		top:0;
	}
	
	#index .mainbox .txcont .mtl{
		font-weight: 700;
		text-align: right;
		font-size:max(8.825vw,11.3rem);
		line-height: max(7.26vw,9.3rem);
		padding:max(1.95vw,25px) 0 0 0;
		
		font-size:max(2.625vw,3.65rem);
		line-height: max(3.68vw,4.3rem);
		padding:max(1.95vw,25px) 0 0 0;
		color:#fff;
		opacity: 0;
		transition: all 0.5s;
		transition-delay: 1s;
	}
	
	#index .mainbox .txcont .cap{
		font-size:max(1.32vw,17px);
		color:#fff;
		font-weight: 600;
		opacity: 0;
		transition: all 0.5s;
		transition-delay: 1s;
	}
	
	#index .mainbox.active .txcont .mtl{
		opacity: 1;
	}
	
	#index .mainbox.active .txcont .cap{
		opacity: 1;
	}
	
	#index .mainbox .scrollmotion{
		position: absolute;
		bottom:100px;
		left:40px;
		z-index: 4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	#index .mainbox .scrollmotion .tx{
		-webkit-writing-mode: vertical-rl;
	 	-ms-writing-mode: tb-rl;
	  	-o-writing-mode: vertical-rl;
	  	writing-mode: vertical-rl;
		color:#fff;
		font-weight: 400;
		line-height: 1;
		font-size:1.2rem;
		padding:0 0 10px 0;
	}
	
	#index .mainbox .scrollmotion .border{
		height:100px;
		width:1px;
		background:#fff;
		position: relative;
		display: block;
	}
	
	#index .mainbox .scrollmotion .border span{
		content: "";
		width:6px;
		height:6px;
		background:#fff;
		position: absolute;
		border-radius: 50%;
		top:0;
		left:-2.5px;
		animation-name: scanime;
		animation-fill-mode:backwards;
		animation-duration:2s;
		animation-iteration-count:infinite;
		animation-timing-function:ease-in-out;
		animation-delay: 0s;
		animation-direction:normal;
	}
	
	/*newscont*/
	#index .newscont{
		padding:100px 0;
	}
	
	#index .newscont .innerbox{
		width:1000px;
		margin:0 auto;
	}
	
	#index .newscont .innerbox .headbox{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin:0 0 40px 0;
	}
	
	#index .newscont .innerbox .headbox .tlcont{
		display: flex;
		flex-direction: column;
	}
	
	#index .newscont .innerbox .headbox .tlcont .sub{
		font-size:1.3rem;
		font-weight: 500;
	}
	
	#index .newscont .innerbox .headbox .tlcont .mtlbox{
		font-size:6.5rem;
		font-weight: 700;
		line-height: 1;
	}
	
	#index .newscont .innerbox .headbox .tlcont .mtlbox .mtx{
		padding:0 0 5px 0;
	}
	
	#index .newscont .innerbox .headbox .tlcont .mtlbox::after{
		content: "";
		width:36px;
		border-bottom:2px solid #fdd000;
		display: block;
	}
	
	#index .newscont .innerbox .headbox .navbox{
		display: flex;
		align-items: center;
	}
	
	#index .newscont .innerbox .headbox ul{
		display: flex;
		list-style: none;
	}
	
	#index .newscont .innerbox .headbox ul li{
		margin:0 0 0 40px;
		color:#9e9e9e;
		font-weight: 500;
		position:relative;
		cursor: pointer;
	}
	
	#index .newscont .innerbox .headbox ul li.active{
		color:#1a1a1a;
		pointer-events: none;
	}
	
	#index .newscont .innerbox .headbox ul li.active::before{
		content: "・";
		position: absolute;
		top:0;
		left:-10px;
		display: inline-block;
		vertical-align: middle;
	}

	#index .newscont .innerbox .headbox .btnbox{
		margin:0 0 0 80px;
	}
	
	#index .newscont .innerbox .newslist{
		border-top:1px solid #dcdcdc;
	}
	
	#index .newscont .innerbox .newslist a{
		border-bottom:1px solid #dcdcdc;
		padding:30px 10px 30px 30px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	#index .newscont .innerbox .newslist a .date{
		width:90px;
		font-size:1.3rem;
		line-height: 1;
		color:#666666;
	}
	
	#index .newscont .innerbox .newslist a .cate{
		width:100px;
		padding:7px 0;
		text-align: center;
		font-size:1.2rem;
		line-height: 1;
		color:#fff;
		background:#1a1a1a;
		border-radius: 5px;
	}
	
	#index .newscont .innerbox .newslist a .tl{
		width:750px;
		width:850px;
		font-weight: 500;
		font-size:1.3rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding:0 20px;
		box-sizing: border-box;
	}

	#index .newscont .innerbox .newslist a .arrow{
		display: flex;
		align-items: center;
		font-weight: 500;
		margin:0 0 0 auto;
	}
	
	#index .newscont .innerbox .newslist a .arrow span{
		width:60px;
		display: flex;
		background:#1a1a1a;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		margin:0 0 0 0;
		position: relative;
	}
	
	#index .newscont .innerbox .newslist a .arrow span::before{
		content:"";
		width:10px;
		height:10px;
		background:url("../images/common/b_arrow.svg") no-repeat;
		background-size:10px;
		display: block;
		position: absolute;
		right:calc(50% - 5px);
		top:calc(50% - 5px);
		
	}
	
	#index .newscont .innerbox .newslist a .arrow span::after{
		content:"";
		width:10px;
		height:10px;
		background:url("../images/common/b_arrow.svg") no-repeat;
		background-size:10px;
		opacity: 0;
		position: absolute;
		right:40px;
		top:calc(50% - 5px);
		
	}
	
	#index .newscont .innerbox .newslist a:hover .arrow span::before {
  		animation: arrowbefore .25s;
		animation-fill-mode: forwards;
	}
	
	#index .newscont .innerbox .newslist a:hover .arrow span::after {
  		animation: arrowafter .25s;
		animation-delay: .25s;
		animation-fill-mode: forwards;
	}
	
	#index .newscont .innerbox .newslist a:hover .tl {
  		text-decoration: underline;
	}
	
	/*business_cont*/
	
	#index .business_cont{
		padding:80px 0;
		position: relative;
	}
	
	#index .business_cont::after{
		content: "";
		width:65.75%;
		height:100%;
		position: absolute;
		top:0;
		left:calc(50% - (65.75% / 2));
		background:#fdd000;
		z-index: -1;
		
	}
	
	#index .business_cont .tlcont{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin:0 0 30px 0;
	}
	
	#index .business_cont .tlcont .sub{
		font-size:1.3rem;
		font-weight: 500;
	}
	
	#index .business_cont .tlcont .mtlbox{
		font-size:6.5rem;
		font-weight: 700;
		line-height: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#index .business_cont .tlcont .mtlbox .mtx{
		padding:0 0 5px 0;
	}
	
	#index .business_cont .tlcont .mtlbox::after{
		content: "";
		width:36px;
		border-bottom:2px solid #1a1a1a;
		display: block;
	}
	
	#index .business_cont .listbox{
		display: flex;
		justify-content: space-between;
		justify-content: center;
		margin:0 auto;
	}
	
	#index .business_cont .listbox .box{
		width:calc((100% - 20px) / 3);
		width:calc((100% + 120px) / 3);
		display: flex;
		flex-direction: column;
		margin:0 10px;
	}
	
	#index .business_cont .listbox .phbox{
		margin:0 0 20px 0;
		position: relative;
		padding-top:75.82%;
		transform: scaleX(0);
		transition: all 0.5s;
		transform-origin: left;
	}
	
	#index .business_cont .listbox .phbox::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		background:#1a1a1a;
		top:0;
		left:0;
		z-index: 2;
		transform: scaleX(1);
		transform-origin: right;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#index .business_cont .listbox.active .phbox{
		transform: scaleX(1);
	}
	
	#index .business_cont .listbox.active .phbox::after{
		transform: scaleX(0);
	}
	
	#index .business_cont .listbox .phbox img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%;
		z-index:1;
	}
	
	#index .business_cont .listbox .tl{
		font-size:2rem;
		margin:0 0 10px 0;
		text-align: center;
		font-weight: 500;
		position: relative;
		top:40px;
		opacity: 0;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#index .business_cont .listbox.active .tl{
		opacity: 1;
		top:0;
	}
	
	#index .business_cont .listbox .tx{
		font-size:1.3rem;
		line-height: 2.5rem;
		margin:0 0 20px 0;
		padding:0 70px;
		opacity:0;
		transition: all 0.5s;
		transition-delay: 0.75s;
	}
	
	#index .business_cont .listbox .btnbox{
		display: flex;
		justify-content: center;
		opacity: 0;
		transition: all 0.5s;
		transition-delay: 0.75s;
		margin:auto 0 0 0;
	}
	
	#index .business_cont .listbox.active .tx{
		opacity: 1;
	}
	
	#index .business_cont .listbox.active .btnbox{
		opacity: 1;
	}
	
	#index .business_cont .x_more{
		display: flex;
		justify-content: center;
	}
	
	/*workscont*/
	#index .workscont{
		padding:100px 0 0 0;
	}
	
	#index .workscont .innerbox{
		width:100%;
		margin:0 auto;
	}
	
	#index .workscont .innerbox .headbox{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin:0 auto 40px;
		width:1000px;
	}
	
	#index .workscont .innerbox .headbox .tlcont{
		display: flex;
		flex-direction: column;
	}
	
	#index .workscont .innerbox .headbox .tlcont .sub{
		font-size:1.3rem;
		font-weight: 500;
	}
	
	#index .workscont .innerbox .headbox .tlcont .mtlbox{
		font-size:6.5rem;
		font-weight: 700;
		line-height: 1;
	}
	
	#index .workscont .innerbox .headbox .tlcont .mtlbox .mtx{
		padding:0 0 5px 0;
	}
	
	#index .workscont .innerbox .headbox .tlcont .mtlbox::after{
		content: "";
		width:36px;
		border-bottom:2px solid #fdd000;
		display: block;
	}
	
	#index .workscont .innerbox .headbox .navbox{
		display: flex;
		align-items: center;
	}

	#index .workscont .innerbox .headbox .btnbox{
		margin:0 0 0 80px;
	}
	
	#index .workscont .innerbox .slidecont{
		position: relative;
		width:100%;
	}
	
	#index .workscont .innerbox .slidecont::after{
		content: "";
		width:100%;
		height:calc(100% - 20px - 97px);
		position: absolute;
		bottom:0;
		left:0;
		background:#fdd000;
		z-index: -1;
	}
	
	#index .workscont .innerbox .slidecont .innerbox{
		position: relative;
		width:1028px;
		margin: 0 auto;
	}
	
	#index .workscont .innerbox .slidecont .slider{
		display: flex;
	}
	
	#index .workscont .innerbox .slidecont .slider .box{
		margin:0 14px;
		display: flex;
		flex-direction: column;
	}
	
	#index .workscont .innerbox .slidecont .slider .box .phbox{
		width:100%;
		padding-top:73.7%;
		position: relative;
		margin:0 0 20px 0;
		transform: scaleX(0);
		transition: all 0.5s;
		transform-origin: left;
	}
	
	#index .workscont .innerbox .slidecont .slider .box .phbox::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		background:#1a1a1a;
		transform: scaleX(1);
		transform-origin: right;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#index .workscont .innerbox .slidecont.active .slider .box .phbox{
		transform: scaleX(1);
		overflow: hidden;
	}
	
	#index .workscont .innerbox .slidecont.active .slider .box .phbox::after{
		transform: scaleX(0);
	}
	
	#index .workscont .innerbox .slidecont .slider .box .phbox img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		transition: all 0.5s;
		transform: scale(1);
	}
	
	#index .workscont .innerbox .slidecont .slider .box:hover .phbox img{
		transform: scale(1.05);
	}
	
	#index .workscont .innerbox .slidecont .slider .box .sub{
		font-size:1.3rem;
		text-align: center;
		transition:all 0.5s;
		transition-delay: 0.75s;
		opacity: 0;
	}
	
	#index .workscont .innerbox .slidecont .slider .box .tl{
		font-size:1.6rem;
		text-align: center;
		font-weight: 500;
		transition:all 0.5s;
		transition-delay: 0.75s;
		opacity: 0;
	}
	
	#index .workscont .innerbox .slidecont.active .slider .box .sub{
		opacity: 1;
	}
	
	#index .workscont .innerbox .slidecont.active .slider .box .tl{
		opacity: 1;
	}
	
	
	#index .workscont .innerbox .slidecont .slider .left_arrow_btn{
		position: absolute;
		top:90px;
		left:-70px;
	}
	
	#index .workscont .innerbox .slidecont .slider .right_arrow_btn{
		position: absolute;
		top:90px;
		right:-70px;
	}
	
	#index .workscont .innerbox .slidecont .slider .right_arrow_btn span,
	#index .workscont .innerbox .slidecont .slider .left_arrow_btn span{
		margin:0 0 0 0;
		background:#fff;
		border:2px solid #1a1a1a;
	}
	
	#index .workscont .innerbox .slidecont .slider .right_arrow_btn span::before,
	#index .workscont .innerbox .slidecont .slider .right_arrow_btn span::after,
	#index .workscont .innerbox .slidecont .slider .left_arrow_btn span::before,
	#index .workscont .innerbox .slidecont .slider .left_arrow_btn span::after{
		background:url("../images/common/b_arrow.svg") no-repeat;
	}
	
	#index .workscont .innerbox .slidecont .slick-counter{
		padding:40px 0 80px 0;
		text-align: center;
		font-weight: 500;
	}
	
	#index .workscont .x_more{
		padding:60px 0;
		display: flex;
		justify-content: center;
	}
	
	#index .bottom_link_cont{
		padding:100px 0;
		display: flex;
		justify-content: space-between;
		width:100%;
	} 
	
	#index .bottom_link_cont a{
		width:calc((100% - 10px) / 2);
		padding-top:22%;
		position: relative;
		display: block;
		overflow: hidden;
	} 
	
	#index .bottom_link_cont a img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		transition: all 0.5s;
		transform: scale(1);
	} 
	
	#index .bottom_link_cont a:hover img{
		transform: scale(1.05);
	} 
	
	#index .bottom_link_cont a .inbox{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding:20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	} 
	
	#index .bottom_link_cont a .inbox .tlcont{
		display: flex;
		flex-direction: column;
		color:#fff;
	}
	
	#index .bottom_link_cont a .inbox .tlcont .sub{
		font-size:1.3rem;
		font-weight: 500;
	}
	
	#index .bottom_link_cont a .inbox .tlcont .mtlbox{
		font-size:5.4rem;
		font-weight: 700;
		line-height: 1;
	}
	
	#index .bottom_link_cont a .inbox .tlcont .mtlbox .mtx{
		padding:0 0 5px 0;
	}
	
	#index .bottom_link_cont a .inbox .tlcont .mtlbox::after{
		content: "";
		width:36px;
		border-bottom:2px solid #fff;
		display: block;
	}
	
	#index .bottom_link_cont a .inbox .btnbox{
		margin:auto 0 0 auto;
		font-size:1.6rem;
		color:#fff;
	}
	
	#index .bottom_link_cont a .inbox .arrow{
		display: flex;
		align-items: center;
		font-weight: 500;
		margin:0 0 0 auto;
	}
	
	#index .bottom_link_cont a .inbox .arrow span{
		width:30px;
		display: flex;
		background:#1a1a1a;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		margin:2px 0 0 0;
		position: relative;
	}
	
	#index .bottom_link_cont a .inbox .arrow span::before{
		content:"";
		width:10px;
		height:10px;
		background:url("../images/common/w_arrow.svg") no-repeat;
		background-size:10px;
		display: block;
		position: absolute;
		right:calc(50% - 5px);
		top:calc(50% - 5px);
		
	}
	
	#index .bottom_link_cont a .inbox .arrow span::after{
		content:"";
		width:10px;
		height:10px;
		background:url("../images/common/w_arrow.svg") no-repeat;
		background-size:10px;
		opacity: 0;
		position: absolute;
		right:20px;
		top:calc(50% - 5px);
		
	}
	
	#index .bottom_link_cont a:hover .inbox .arrow span::before {
  		animation: arrowbefore .25s;
		animation-fill-mode: forwards;
	}
	
	#index .bottom_link_cont a:hover .inbox .arrow span::after {
  		animation: arrowafter .25s;
		animation-fill-mode: forwards;
		animation-delay: .25s;
	}
}

@media screen and (max-width:768px){
	#index .mainbox{
		padding:0 0 50px 0;
		position: relative;
		width:100%;
		background:#fdd000;
	}
	
	#index .mainbox::after{
		content: "";
		width:100%;
		height:25vw;
		background:#fff;
		position: absolute;
		top:0;
		right:0;
		z-index:-1;
	}
	
	#index .mainbox .phbox{
		width:0;
		height:72.8vw;
		position: relative;
		z-index:1;
		transition: all 0.5s;
		transition-delay: 0.1s;
		transition-timing-function: cubic-bezier(.14,.76,.34,.99);
	}
	
	#index .mainbox .phbox::after{
		content: "";
		width:100%;
		height:100%;
		background:#1a1a1a;
		position: absolute;
		top:0;
		left:0;
		transform: scaleX(1);
		transform-origin: top right;
		transition: all 0.5s;
		transition-delay: 0.6s;
		transition-timing-function: cubic-bezier(.14,.76,.34,.99);
	}
	
	#index .mainbox.active .phbox{
		width:100%;
	}
	
	#index .mainbox.active .phbox::after{
		transform: scaleX(0);
	}
	
	
	#index .mainbox .txcont{
		width:100%;
		position: relative;
		z-index:2;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding:0 0 0 0;
		box-sizing: border-box;
		margin:-20vw 0 0 0;
	}
	
	#index .mainbox .txcont .logo{
		width:32.8%;
		line-height: 0;
		overflow: hidden;
	}
	
	#index .mainbox .txcont .logo img{
		position: relative;
		top:40vw;
		transition: all 0.5s;
		transition-delay: 0.6s;
		transition-timing-function: cubic-bezier(.14,.76,.34,.99);
	}
	
	#index .mainbox.active .txcont .logo img{
		top:0;
	}
	
	#index .mainbox .txcont .mtl{
		text-align: center;
		font-size:16vw;
		font-weight: 700;
		line-height: 12.8vw;
		padding:2vw 0 2vw 0;
		
		
		font-size:4.8vw;
		font-weight: 700;
		line-height: 8.8vw;
		padding:28vw 0 1.5vw 0;
		color:#fff;
		opacity: 0;
		transition: all 0.5s;
		transition-delay: 1s;
	}
	
	#index .mainbox .txcont .cap{
		font-size:4vw;
		color:#fff;
		font-weight: 600;
		opacity: 0;
		transition: all 0.5s;
		transition-delay: 1s;
	}
	
	#index .mainbox.active .txcont .mtl{
		opacity: 1;
	}
	
	#index .mainbox.active .txcont .cap{
		opacity: 1;
	}
	
	#index .mainbox .scrollmotion{
		display: none !important;
		position: absolute;
		bottom:100px;
		left:40px;
		z-index: 4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	#index .mainbox .scrollmotion .tx{
		-webkit-writing-mode: vertical-rl;
	 	-ms-writing-mode: tb-rl;
	  	-o-writing-mode: vertical-rl;
	  	writing-mode: vertical-rl;
		color:#fff;
		font-weight: 400;
		line-height: 1;
		font-size:1.2rem;
		padding:0 0 10px 0;
	}
	
	#index .mainbox .scrollmotion .border{
		height:100px;
		width:1px;
		background:#fff;
		position: relative;
		display: block;
	}
	
	#index .mainbox .scrollmotion .border span{
		content: "";
		width:6px;
		height:6px;
		background:#fff;
		position: absolute;
		border-radius: 50%;
		top:0;
		left:-2.5px;
		animation-name: scanime;
		animation-fill-mode:backwards;
		animation-duration:2s;
		animation-iteration-count:infinite;
		animation-timing-function:ease-in-out;
		animation-delay: 0s;
		animation-direction:alternate;
	}
	
	/*newscont*/
	#index .newscont{
		padding:50px 0;
	}
	
	#index .newscont .innerbox{
		width:90%;
		margin:0 auto;
	}
	
	#index .newscont .innerbox .headbox{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin:0 0 0 0;
		flex-wrap:wrap;
	}
	
	#index .newscont .innerbox .headbox .tlcont{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	
	#index .newscont .innerbox .headbox .tlcont .sub{
		font-size:1.2rem;
		font-weight: 500;
	}
	
	#index .newscont .innerbox .headbox .tlcont .mtlbox{
		font-size:4.4rem;
		font-weight: 700;
		line-height: 1;
	}
	
	#index .newscont .innerbox .headbox .tlcont .mtlbox .mtx{
		padding:0 0 5px 0;
	}
	
	#index .newscont .innerbox .headbox .tlcont .mtlbox::after{
		content: "";
		width:18px;
		border-bottom:2px solid #fdd000;
		display: block;
	}
	
	#index .newscont .innerbox .headbox .navbox{
		display: flex;
		align-items: center;
		order: 1;
		width:100%;
	}
	
	#index .newscont .innerbox .headbox ul{
		display: flex;
		list-style: none;
		margin:30px 0 30px 0;
		padding:0 0 0 10px;
		width:100%;
		box-sizing: border-box;
		justify-content: space-between;
	}
	
	#index .newscont .innerbox .headbox ul li{
		margin:0 0 0 0;
	}
	
	#index .newscont .innerbox .headbox ul li{
		color:#9e9e9e;
		font-weight: 500;
		position:relative;
	}
	
	#index .newscont .innerbox .headbox ul li.active{
		color:#1a1a1a;
	}
	
	#index .newscont .innerbox .headbox ul li.active::before{
		content: "・";
		position: absolute;
		top:0;
		left:-10px;
		display: inline-block;
		vertical-align: middle;
	}

	#index .newscont .innerbox .headbox .btnbox{
		margin:0 0 0 0;
	}
	
	#index .newscont .innerbox .newslist{
		border-top:1px solid #dcdcdc;
	}
	
	#index .newscont .innerbox .newslist a{
		border-bottom:1px solid #dcdcdc;
		padding:15px 15px;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		position: relative;
	}
	
	#index .newscont .innerbox .newslist a .date{
		width:70px;
		font-size:1.1rem;
		line-height: 1;
		color:#666666;
	}
	
	#index .newscont .innerbox .newslist a .cate{
		width:auto;
		padding:5px 10px;
		text-align: center;
		font-size:1.1rem;
		line-height: 1;
		color:#fff;
		background:#1a1a1a;
		border-radius: 3px;
	}
	
	#index .newscont .innerbox .newslist a .tl{
		width:100%;
		font-weight: 500;
		font-size:1.2rem;
		line-height: 2.1rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding:10px 20px 0 0;
		box-sizing: border-box;
	}

	#index .newscont .innerbox .newslist a .arrow{
		display: flex;
		align-items: center;
		font-weight: 500;
		margin:0 0 0 auto;
		position: absolute;
		top:50%;
		right:0;
	}
	
	#index .newscont .innerbox .newslist a .arrow span{
		width:40px;
		display: flex;
		background:#1a1a1a;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		margin:0 0 0 0;
		position: relative;
	}
	
	#index .newscont .innerbox .newslist a .arrow span::before{
		content:"";
		width:10px;
		height:10px;
		background:url("../images/common/b_arrow.svg") no-repeat;
		background-size:10px;
		display: block;
		position: absolute;
		right:calc(50% - 5px);
		top:calc(50% - 5px);
		
	}
	
	#index .newscont .innerbox .newslist a .arrow span::after{
		content:"";
		width:10px;
		height:10px;
		background:url("../images/common/b_arrow.svg") no-repeat;
		background-size:10px;
		opacity: 0;
		position: absolute;
		right:40px;
		top:calc(50% - 5px);
		
	}
	
	#index .newscont .innerbox .newslist a:hover .arrow span::before {
  		animation: arrowbefore .25s;
		animation-fill-mode: forwards;
	}
	
	#index .newscont .innerbox .newslist a:hover .arrow span::after {
  		animation: arrowafter .25s;
		animation-fill-mode: forwards;
		animation-delay: .25s;
	}
	
	
	#index .newscont .innerbox .newslist a:hover .tl {
  		text-decoration: underline;
	}
	
	/*business_cont*/
	
	#index .business_cont{
		padding:50px 0 20px 0;
		position: relative;
		background:#fdd000;
	}
	
	#index .business_cont .tlcont{
		display: flex;
		flex-direction: column;
		align-items: left;
		margin:0 0 30px 0;
		padding:0 5%;
	}
	
	#index .business_cont .tlcont .sub{
		font-size:1.2rem;
		font-weight: 500;
	}
	
	#index .business_cont .tlcont .mtlbox{
		font-size:4.4rem;
		font-weight: 700;
		line-height: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	#index .business_cont .tlcont .mtlbox .mtx{
		padding:0 0 5px 0;
	}
	
	#index .business_cont .tlcont .mtlbox::after{
		content: "";
		width:18px;
		border-bottom:2px solid #1a1a1a;
		display: block;
	}
	
	#index .business_cont .listbox{
		display: flex;
		justify-content: space-between;
		margin:0 auto;
		flex-direction: column;
	}
	
	#index .business_cont .listbox .box{
		width:100%;
		display: flex;
		align-items: flex-start;
		margin:0 0 30px 0;
	}
	
	#index .business_cont .listbox .phbox{
		width:50%;
		margin:0 0 0 0;
		position: relative;
		padding-top:37.41%;
		transform: scaleX(0);
		transition: all 0.5s;
		transform-origin: left;
	}
	
	#index .business_cont .listbox .phbox::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		background:#1a1a1a;
		top:0;
		left:0;
		z-index: 2;
		transform: scaleX(1);
		transform-origin: right;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#index .business_cont .listbox.active .phbox{
		transform: scaleX(1);
	}
	
	#index .business_cont .listbox.active .phbox::after{
		transform: scaleX(0);
	}
	
	#index .business_cont .listbox .phbox img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%;
		z-index:1;
	}
	
	#index .business_cont .listbox .txcont{
		width:50%;
		padding:0 5%;
	}
	
	#index .business_cont .listbox .tl{
		font-size:1.6rem;
		line-height: 2.8rem;
		margin:0 0 10px 0;
		text-align: center;
		font-weight: 500;
		position: relative;
		top:0;
		opacity: 0;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#index .business_cont .listbox.active .tl{
		opacity: 1;
		top:0;
	}
	
	#index .business_cont .listbox .tx{
		font-size:1.2rem;
		line-height: 2.1rem;
		margin:0 0 10px 0;
		padding:0 0;
		opacity:0;
		transition: all 0.5s;
		transition-delay: 0.75s;
	}
	
	#index .business_cont .listbox .btnbox{
		display: flex;
		justify-content: center;
		opacity: 0;
		transition: all 0.5s;
		transition-delay: 0.75s;
		margin:auto 0 0 0;
	}
	
	#index .business_cont .listbox.active .tx{
		opacity: 1;
	}
	
	#index .business_cont .listbox.active .btnbox{
		opacity: 1;
	}
	
	/*workscont*/
	#index .workscont{
		padding:50px 0 0 0;
		background:#fdd000;
		position: relative;
	}
	
	#index .workscont::after{
		content: "";
		width:100%;
		height:calc(113px + 26vw);
		background:#fff;
		position: absolute;
		top:0;
		left:0;
		z-index: 1;
	}
	
	#index .workscont .innerbox{
		width:100%;
		margin:0 auto;
		position: relative;
		z-index:2;
	}
	
	#index .workscont .innerbox .headbox{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin:0 auto 40px;
		width:90%;
	}
	
	#index .workscont .innerbox .headbox .tlcont{
		display: flex;
		flex-direction: column;
	}
	
	#index .workscont .innerbox .headbox .tlcont .sub{
		font-size:1.2rem;
		font-weight: 500;
	}
	
	#index .workscont .innerbox .headbox .tlcont .mtlbox{
		font-size:4.4rem;
		font-weight: 700;
		line-height: 1;
	}
	
	#index .workscont .innerbox .headbox .tlcont .mtlbox .mtx{
		padding:0 0 5px 0;
	}
	
	#index .workscont .innerbox .headbox .tlcont .mtlbox::after{
		content: "";
		width:18px;
		border-bottom:2px solid #fdd000;
		display: block;
	}
	
	#index .workscont .innerbox .headbox .navbox{
		display: flex;
		align-items: center;
	}

	#index .workscont .innerbox .headbox .btnbox{
		margin:0 0 0 0;
	}
	
	#index .workscont .innerbox .slidecont{
		position: relative;
		width:100%;
		z-index:2;
	}
	
	#index .workscont .innerbox .slidecont .innerbox{
		position: relative;
		width:95%;
		margin: 0 auto;
	}
	
	#index .workscont .innerbox .slidecont .slider{
		display: flex;
	}
	
	#index .workscont .innerbox .slidecont .slider .box{
		margin:0 5px;
		display: flex;
		flex-direction: column;
	}
	
	#index .workscont .innerbox .slidecont .slider .box .phbox{
		width:100%;
		padding-top:73.7%;
		position: relative;
		margin:0 0 10px 0;
		transform: scaleX(0);
		transition: all 0.5s;
		transform-origin: left;
	}
	
	#index .workscont .innerbox .slidecont .slider .box .phbox::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		background:#1a1a1a;
		transform: scaleX(1);
		transform-origin: right;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#index .workscont .innerbox .slidecont.active .slider .box .phbox{
		transform: scaleX(1);
		overflow: hidden;
	}
	
	#index .workscont .innerbox .slidecont.active .slider .box .phbox::after{
		transform: scaleX(0);
	}
	
	#index .workscont .innerbox .slidecont .slider .box .phbox img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		transition: all 0.5s;
		transform: scale(1);
	}
	
	#index .workscont .innerbox .slidecont .slider .box:hover .phbox img{
		transform: scale(1.05);
	}
	
	#index .workscont .innerbox .slidecont .slider .box .sub{
		font-size:1.2rem;
		text-align: center;
		transition:all 0.5s;
		transition-delay: 0.75s;
		opacity: 0;
	}
	
	#index .workscont .innerbox .slidecont .slider .box .tl{
		font-size:1.4rem;
		text-align: center;
		font-weight: 500;
		transition:all 0.5s;
		transition-delay: 0.75s;
		opacity: 0;
	}
	
	#index .workscont .innerbox .slidecont.active .slider .box .sub{
		opacity: 1;
	}
	
	#index .workscont .innerbox .slidecont.active .slider .box .tl{
		opacity: 1;
	}
	
	
	#index .workscont .innerbox .slidecont .slider .left_arrow_btn{
		position: absolute;
		bottom:32px;
		left:calc(50% - 100px);
	}
	
	#index .workscont .innerbox .slidecont .slider .right_arrow_btn{
		position: absolute;
		bottom:32px;
		right:calc(50% - 100px);
	}
	
	#index .workscont .innerbox .slidecont .slider .right_arrow_btn span,
	#index .workscont .innerbox .slidecont .slider .left_arrow_btn span{
		margin:0 0 0 0;
		background:#fff;
		border:2px solid #1a1a1a;
	}
	
	#index .workscont .innerbox .slidecont .slider .right_arrow_btn span::before,
	#index .workscont .innerbox .slidecont .slider .right_arrow_btn span::after,
	#index .workscont .innerbox .slidecont .slider .left_arrow_btn span::before,
	#index .workscont .innerbox .slidecont .slider .left_arrow_btn span::after{
		background:url("../images/common/b_arrow.svg") no-repeat;
	}
	
	#index .workscont .innerbox .slidecont .slick-counter{
		padding:40px 0 45px 0;
		text-align: center;
		font-weight: 500;
	}
	
	#index .bottom_link_cont{
		padding:50px 0;
		display: flex;
		justify-content: space-between;
		width:100%;
		flex-direction: column;
	} 
	
	#index .bottom_link_cont a{
		width:100%;
		padding-top:44%;
		position: relative;
		display: block;
		overflow: hidden;
		margin: 0 0 5px 0;
	} 
	
	#index .bottom_link_cont a img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		transition: all 0.5s;
		transform: scale(1);
	} 
	
	#index .bottom_link_cont a:hover img{
		transform: scale(1.05);
	} 
	
	#index .bottom_link_cont a .inbox{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding:10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	} 
	
	#index .bottom_link_cont a .inbox .tlcont{
		display: flex;
		flex-direction: column;
		color:#fff;
	}
	
	#index .bottom_link_cont a .inbox .tlcont .sub{
		font-size:1.2rem;
		font-weight: 500;
	}
	
	#index .bottom_link_cont a .inbox .tlcont .mtlbox{
		font-size:3.7rem;
		font-weight: 700;
		line-height: 1;
	}
	
	#index .bottom_link_cont a .inbox .tlcont .mtlbox .mtx{
		padding:0 0 5px 0;
	}
	
	#index .bottom_link_cont a .inbox .tlcont .mtlbox::after{
		content: "";
		width:18px;
		border-bottom:2px solid #fff;
		display: block;
	}
	
	#index .bottom_link_cont a .inbox .btnbox{
		margin:auto 0 0 auto;
		font-size:1.4rem;
		color:#fff;
	}
	
	#index .bottom_link_cont a .inbox .arrow{
		display: flex;
		align-items: center;
		font-weight: 500;
		margin:0 0 0 auto;
	}
	
	#index .bottom_link_cont a .inbox .arrow span{
		width:30px;
		display: flex;
		background:#1a1a1a;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		margin:2px 0 0 0;
		position: relative;
	}
	
	#index .bottom_link_cont a .inbox .arrow span::before{
		content:"";
		width:10px;
		height:10px;
		background:url("../images/common/w_arrow.svg") no-repeat;
		background-size:10px;
		display: block;
		position: absolute;
		right:calc(50% - 5px);
		top:calc(50% - 5px);
		
	}
	
	#index .bottom_link_cont a .inbox .arrow span::after{
		content:"";
		width:10px;
		height:10px;
		background:url("../images/common/w_arrow.svg") no-repeat;
		background-size:10px;
		opacity: 0;
		position: absolute;
		right:20px;
		top:calc(50% - 5px);
		
	}
	
	#index .bottom_link_cont a:hover .inbox .arrow span::before {
  		animation: arrowbefore .25s;
		animation-fill-mode: forwards;
	}
	
	#index .bottom_link_cont a:hover .inbox .arrow span::after {
  		animation: arrowafter .25s;
		animation-fill-mode: forwards;
		animation-delay: .25s;
	}
}

@keyframes scanime {
    0% {
        top:0;
    }
    100% {
        top:100%;
    }
}
@media screen and (max-width:768px){
	.business_cont .x_more{
		display: flex;
        justify-content: center;
	}
	.workscont .x_more{
		display: flex;
        justify-content: center;
		padding:30px 0 20px;
	}
}