@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--red : #a5c13a;
	--gray : #e7e7e7;
}
/*--------------------------------------------
MAIN VISUAL
---------------------------------------------*/
#mv{
	background-image : url("../images/home/mv/bg.png");
	background-repeat : no-repeat;
	position : relative;
	overflow : hidden;
}
#mv ul{
	height : 100%;
	width : 200%;
	display : flex;
	overflow : hidden;
	position : absolute;
	top : 0;
	left : 0;
}
#mv li{
	width : 50%;
}
#mv picture img{
	width : auto;
	height : 100%;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : transform;
}
#mv li:first-child img{
	animation : loop 150s -700s linear infinite;
}
#mv li:nth-child(2) img{
	animation : loop2 150s linear infinite;
}
#mv .wrap{
	position : relative;
}
#mv h2{
	font-weight : 700;
}
#mv p{
	font-weight : 500;
}
@media screen and (max-width: 768px){
	#mv{
		height : calc( 536 * 100vw / 768 );
		background-size : auto 100%;
		background-position : center;
	}
	#mv picture{
		height : 100%;
	}
	#mv .box{
		margin-top : calc( 186 * 100vw / 768 );
		padding-left : calc( 26 * 100% / 720 );
		padding-right : calc( 40 * 100% / 720 );
		padding-top : calc( 30 * 100vw / 768 );
		padding-bottom : calc( ( 30 - 7 ) * 100vw / 768 );
	}
	#mv h2{
		font-size : 4rem;
	}
	#mv p{
		font-size : 2.6rem;
		line-height : 1.54;
		margin-top : calc( 10 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#mv{
		height : 452px;
		background-size : cover;
	}
	#mv .wrap{
		display : flex;
		align-items : flex-start;
		justify-content : flex-start;
	}
	#mv .box{
		padding-top : 30px;
		padding-left : 40px;
		padding-right : 60px;
		padding-bottom : calc( 35px - 6px );
		margin-top : 180px;
	}

	#mv h2{
		font-size : 3.0rem;
        font-weight: 400;
        line-height: 1.3;
	}
	#mv p{
		font-size : 2rem;
		line-height : 1.6;
		margin-top : 10px;
	}
}
@keyframes loop{
	0%{
		transform : translateX(100%);
	}
	to{
		transform : translateX(-100%);
	}
}
@keyframes loop2{
	0%{
		transform : translateX(0);
	}
	to{
		transform : translateX(-200%);
	}
}
/*--------------------------------------------
CONTENTS
---------------------------------------------*/
#contents{
	background-repeat : no-repeat;
	background-size : cover;
	background-position : 0 0;
}
#contents li:nth-child(1) a{
	background-image : url("../images/ui/icon/translation.svg");
}
#contents li:nth-child(2) a{
	background-image : url("../images/ui/icon/guide.svg");
}
#contents li:nth-child(3) a{
	background-image : url("../images/ui/icon/compliance.svg");
}
#contents li:nth-child(4) a{
	background-image : url("../images/ui/icon/interview.svg");
}
#contents li:nth-child(5) a{
	background-image : url("../images/ui/icon/column.svg");
}
#contents li:nth-child(6) a{
	background-image : url("../images/ui/icon/doc.svg");
}
#contents li:nth-child(7) a{
	background-image : url("../images/ui/icon/news.svg");
}
#contents li:nth-child(8) a{
	background-image : url("../images/ui/icon/seminar.svg");
}
#contents li.li-01 a{
	background-image : url("../images/ui/icon/translation.svg");
}
#contents li.li-02 a{
	background-image : url("../images/ui/icon/guide.svg");
}
#contents li.li-03 a{
	background-image : url("../images/ui/icon/compliance.svg");
}
#contents li.li-04 a{
	background-image : url("../images/ui/icon/column.svg");
}
#contents li.li-05 a{
	background-image : url("../images/ui/icon/contact.svg");
}
#contents li.li-06 a{
	background-image : url("../images/ui/icon/interview.svg");
}
#contents li.li-07 a{
	background-image : url("../images/ui/icon/seminar.svg");
}
#contents li.li-08 a{
	background-image : url("../images/ui/icon/guide.svg");
}
#contents li.li-09 a{
	background-image : url("../images/ui/icon/doc.svg");
}
#contents li.li-10 a{
	background-image : url("../images/ui/icon/beginner.svg");
}
#contents li.li-11 a{
}
@media screen and (max-width: 768px){
	#contents{
		background-image : url("../images/home/contents/bg_sp.png");
	}
	#contents .wrap{
		padding-top : calc( 71 * 100vw / 768 );
		padding-bottom : calc( 71 * 100vw / 768 );
	}
	#contents .title01 + .text{
		margin-top : calc( ( 24 - 7 ) * 100vw / 768 );
	}
	#contents ul{
		margin-top : calc( ( 27 - 7  ) * 100vw / 768 );
	}
	#contents li:nth-child(1) a{
		background-position-y : calc( 44 * 100vw / 768 );
		background-size : auto calc( 104 * 100vw / 768 );
	}
	#contents li:nth-child(2) a{
		background-position-y : calc( 40 * 100vw / 768 );
		background-size : auto calc( 111 * 100vw / 768 );
	}
	#contents li:nth-child(3) a{
		background-position-y : calc( 34 * 100vw / 768 );
		background-size : auto calc( 99 * 100vw / 768 );
	}
	#contents li:nth-child(4) a{
		background-position-y : calc( 33 * 100vw / 768 );
		background-size : auto calc( 101 * 100vw / 768 );
	}
	#contents li:nth-child(5) a{
		background-position-y : calc( 48 * 100vw / 768 );
		background-size : auto calc( 94 * 100vw / 768 );
	}
	#contents li:nth-child(6) a{
		background-position-y : calc( 43 * 100vw / 768 );
		background-size : auto calc( 102 * 100vw / 768 );
	}
	#contents li:nth-child(7) a{
		background-position-y : calc( 53 * 100vw / 768 );
		background-size : auto calc( 86 * 100vw / 768 );
	}
	#contents li:nth-child(8) a{
		background-position-y : calc( 39 * 100vw / 768 );
		background-size : auto calc( 96 * 100vw / 768 );
	}
	#contents li:nth-child(9) a{
		background-position-y : calc( 39 * 100vw / 768 );
		background-size : auto calc( 96 * 100vw / 768 );
	}
	#contents li:nth-child(10) a{
		background-position-y : calc( 39 * 100vw / 768 );
		background-size : auto calc( 96 * 100vw / 768 );
	}
	#contents .link01{
		margin-top : calc( 64 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#contents{
		background-image : url("../images/home/contents/bg_pc.png");
		padding-bottom : 23px;
	}
	#contents .wrap{
		padding-top : 54px;
	}
	#contents .title01 + .text{
		margin-top : calc( 28px - 3.5px );
	}
	#contents ul{
		margin-top : calc( 48px - 3.5px - 10px );
	}
	#contents li a{
		background-position-y : 30px;
		background-size : auto 65px;
	}
	#contents .link01{
		margin-top : 28px;
	}
	#contents form > ul > li:nth-child(1){
		order : 1;
	}
}
/*--------------------------------------------
SECTIONS
---------------------------------------------*/
#sections{
	background-repeat : no-repeat;
	background-size : auto 100% ;
	background-position : calc(50vw + 0px) bottom;
	background-size : auto 100% !important;
}
@media screen and (max-width: 768px){
	#sections{
		background-image : url("../images/home/guide/bg_sp.png");
		padding-bottom : calc( 331 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#sections{
        padding-top: 100px;
		background-image : url("../images/home/compliance/bg_pc.png");
		padding-bottom : 150px;
	}
}
@media screen and (max-width: 768px){
	.isWebp #sections{
		background-image : url("../images/home/compliance/bg_pc.png");
	}
}
@media print,screen and (min-width: 769px){
	.isWebp #sections{
		background-image : url("../images/home/compliance/bg_pc.png");
	}
}
/*--------------------------------------------
TRANSLATION
---------------------------------------------*/
#translation form{
	display : flex;
}
#translation input[type="text"]{
	flex-grow : 1;
	border : 0;
	background-color : var(--gray);
}
#translation input[type="submit"]{
	flex-shrink : 0;
	background : url("../images/ui/icon/search.svg") center no-repeat var(--red);
	font-size : 0;
}
@media screen and (max-width: 768px){
	#translation .wrap{
		padding-top : calc( 82 * 100vw / 768 );
		padding-bottom : calc( 82 * 100vw / 768 );
	}
	#translation .text01{
		margin-top : calc( ( 24 - 7 ) * 100vw / 768 );
	}
	#translation form{
		margin-top : calc( ( 18 - 7 ) * 100vw / 768 );
		height : calc( 60 * 100vw / 768 );
		margin-bottom : calc( 21 * 100vw / 768 );
	}
	#translation input[type="text"]{
		font-size : 2.4rem;
	}
	#translation input[type="submit"]{
		width : calc( 80 * 100% / 720 );
		background-size : auto calc( 33 * 100vw / 768 );
	}
	#translation .link02{
		margin-top : calc( 18 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#translation .wrap{
		padding-top : 46px;
		padding-bottom : 65px;
		padding-right : 360px;
	}
	#translation .text01{
		margin-top : calc( 24px - 3px );
	}
	#translation form{
		width : 520px;
		margin-top : calc( 28px - 3px );
		margin-bottom : 20px;
		height : 48px;
	}
	#translation input[type="text"]{
		font-size : 1.6rem;
	}
	#translation input[type="submit"]{
		width : 80px;
		background-size : auto 19px;
	}
	#translation .link02{
		margin-top : 22px;
	}
}
/*--------------------------------------------
GUIDE
---------------------------------------------*/
@media screen and (max-width: 768px){
	#guide .text01{
		margin-top : calc( ( 24 - 7 ) * 100vw / 768 );
		margin-bottom : calc( ( 29 - 7 ) * 100vw / 768 );
	}
	#guide .link02{
		margin-top : calc( 18 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#guide .wrap{
		padding-left : 500px;
	}
	#guide .text01{
		margin-top : calc( 18px - 3px );
		margin-bottom : calc( 21px - 3px );
	}
	#guide .link02{
		margin-top : 22px;
	}
}
/*--------------------------------------------
COMPLIANCE
---------------------------------------------*/
#compliance{
	position : relative;
	overflow : hidden;
}
#compliance:after{
	content : "";
	display : block;
	background-position : 0 0;
	background-size : contain;
	background-repeat : no-repeat;
}
@media screen and (max-width: 768px){
	#compliance:after{
		display : block;
		height : calc( 372 * 100vw / 768 );
		width : 100%;
		background-image : url("../images/home/compliance/bg_sp.png");
		margin-top : calc( 34 * 100vw / 768 );
	}
	#compliance .wrap{
		padding-top : calc( 94 * 100vw / 768 );
	}
	#compliance .text01{
		margin-top : calc( ( 24 - 7 ) * 100vw / 768 );
		margin-bottom : calc( ( 50 - 7 ) * 100vw / 768 );
	}
	#compliance .link02{
		margin-top : calc( 212 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#compliance:after{
		position : absolute;
		top : 0;
		left : calc( 1190 * 100% / 2000 );
		background-image : url("../images/home/compliance/bg_pc.png");
		width : 882px;
		height : 588px;
	}
	#compliance .wrap{
		padding-top : 46px;
		padding-bottom : 65px;
		padding-right : 360px;
		height : 588px;
	}
	#compliance .text01{
		margin-top : calc( 24px - 3px );
		margin-bottom : calc( 23px - 3px );
	}
	#compliance .link02{
		margin-top : 16px;
	}
}
@media screen and (max-width: 768px){
	.isWebp #compliance:after{
		background-image : url("../images/home/compliance/bg_sp.png.webp");
	}
}
/*--------------------------------------------
UPDATE
---------------------------------------------*/
#update{
	background-repeat : no-repeat;
	background-size : cover;
	background-position : 0 0;
}
#update li a , #update li span{
	display : flex;
	align-items : center;
	flex-wrap : wrap;
	background-color : rgba(255,255,255,.8);
}
#update time{
	color : #060102;
	letter-spacing : 0;
}
#update h3{
	width : 100%;
	letter-spacing : 0;
	text-decoration : underline;
}
@media screen and (max-width: 768px){
	#update{
		background-image : url("../images/home/update/bg_sp.png");
	}
	#update .wrap{
		padding-top : calc( 68 * 100vw / 768 );
		padding-bottom : calc( 34 * 100vw / 768 );
	}
	#update ul{
		margin-top : calc( 16 * 100vw / 768 );
	}
	#update li + li{
		margin-top : calc( 11 * 100vw / 768 );
	}
	#update li a, #update li span{
		padding-top : calc( 11 * 100vw / 768 );
		padding-left : calc( 11 * 100% / 720 );
		padding-right : calc( 11 * 100% / 720 );
		padding-bottom : calc( ( 27 - 7 ) * 100vw / 768 );
	}
	#update time{
		font-size : 2.6rem;
	}
	#update h3{
		font-size : 2.6rem;
		line-height : 1.54;
		margin-top : calc( 10 * 100vw / 768 );
	}
	#update .links{
		margin-top : calc( 24 * 100vw / 768 );
	}
	#update .links a + a{
		margin-top : calc( 20 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#update{
		background-image : url("../images/home/update/bg_pc.png");
	}
	#update .wrap{
		padding-top : 97px;
		padding-bottom : 32px;
	}
	#update ul{
		margin-top : 34px;
		display : flex;
		flex-wrap : wrap;
		width : 700px;
	}

	#update li{
		width : 340px;
	}
	#update li{
		margin-top : 20px;
	}
	#update li:nth-child(2n){
		margin-left : 20px;
	}
	#update li a, #update li span{
		padding-top : 17px;
		padding-left : 11px;
		padding-right : 16px;
		padding-bottom : calc( 28px - 3px );
	}
	#update time{
		font-size : 1.6rem;
	}
	#update h3{
		font-size : 1.6rem;
		line-height : 1.38;
		margin-top : calc( 12px - 3px );
	}
	#update .links{
		display : flex;
		margin-top : 30px;
		justify-content : flex-end;
		width : 700px;
	}
	#update .links .link02{
		margin-left : 0;
		margin-right : 0;
	}
	#update .links .link02 + .link02{
		margin-left : 24px;
	}
}
@media screen and (max-width: 768px){
	.isWebp #update{
		background-image : url("../images/home/update/bg_sp.png.webp");
	}
}
@media print,screen and (min-width: 769px){
	.isWebp #update{
		background-image : url("../images/home/update/bg_pc.png.webp");
	}
}
/*# sourceMappingURL=../maps/home.css.map */