/*modify by pekey 20190523*/
@charset "utf-8";
/* CSS Document */

/*------------------------------------------CSS Setting Start-------------------------------*/





/*-------------------------------------loading �恍�� -------------------------------------*/
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary_color); /* ���脰���� */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* loading ���� */
.loading_barBg {
    position: relative;
    max-width: 18.75rem; /*300px*/
    overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: center;
}

/* ��憪�����嚗��批捆敺�撌血�湧�脣�� */
.label-center {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo 閮剖� */
.logo_loading {
    width: 100%;
    height: auto;
    display: block;
}

/* �桃蔗撅歹���憪���摰��刻��� Logo */
.logo_loading_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary_color); /* �桃蔗憿��脰�����臭��� */
}
/* �桃蔗���� (��閮凋�������嚗����� JS �� class �批��) */
.logo_loading_mask.animate {
    animation: slideInFromLeft 0.5s ease-out forwards;
}

/* ���急���� */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}














#top{
	position:absolute;
	top:-100%;
}

.headertop{
	border-top: 0px solid #fff0;
}





/*/////////////////////////////////////////////////////////*/
/*-------����--------*/
/*/////////////////////////////////////////////////////////*/

.header {
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
	transition: 0.3s ease all;
	background-color: #fff;
	position: absolute; 
	background-color: transparent; 
	top: 0px; 
	box-shadow: none;
}

/*瘚桀��*/
.header.fixed{
	position: fixed;
	box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.3);
	transition: 0.3s ease all;
	padding: 0px;
	background-color: #fff;
}

	.header > .wrap {
		position: relative;
	}







	




/*================*/
/*-- ��璈�menu���� --*/
/*================*/
.menu_btn {
	position:absolute;
	width:20px;
	top: 50%;
    transform: translateY(-50%);
	right: 0;
	cursor:pointer;
	display:none;
	z-index: 99;
}
	.menu_btn span {
		display:block;
		background-color: #333;
		height:2px;
		margin: 4px 0px;
		transition:0.3s ease all;
		border-radius:3px;
	}
		/*暺���*/
		.menu_btn.active{
			top: 26px;
    		transform: unset;
		}
		.menu_btn.active span {
			background-color: #fff;
		}
			.menu_btn.active span:nth-of-type(1) {
				transform: rotate(39deg);
				transform-origin: top left;
			}
			.menu_btn.active span:nth-of-type(2) {
				opacity: 0;
			}
			.menu_btn.active span:nth-of-type(3) {
				transform: rotate(-39deg);
				transform-origin: bottom left;
			}

@media (max-width: 990px){
	
	/*��璈�menu����*/
	.menu_btn {
		display:block;
	}

}




/*================================*/
/*----- logo -----*/
/*================================*/
.logo{
	/*width: clamp( 9.375rem, 26.6667vw, 12.5rem ); *//* 100 200 */
	width: clamp(9.3551rem, 15.1042vw, 18.1250rem); /* 149.68px , 15.1042vw , 290.00px */
    margin: 0;
    transition: 0.3s  ease all;
    float: left;
    box-sizing: border-box;
    /* animation-name: bounceIn;
    animation-duration: 1.2s;
    animation-fill-mode: both;
    visibility: visible; */
    padding: .625rem 0px;
}

	.logo a{
		display: block;
		position: relative;
		/* padding-top: 32.3%; */
		/* padding-top: 25%;*/
		transition: all 0.3s ease-out; 
	}
	
		.logo img{
			width:100%;
			height:auto;
			/* transition: all 0.3s ease-out;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			float: none;
			width: 100% !important;
			height: 100% !important;
			object-fit: cover; */
			transition: all 0.3s ease-out;	
		} 
		
		/*hover*/
		.logo a:hover{
			transform: scale(0.9);
			animation: bounceIn;
			transition: all 0.3s ease-out;	
		}
	








		
@media (max-width: 1200px){

	.logo{
		width: 6.875rem;
	}
	
}
		
@media (max-width: 900px){

	.logo{
		transition: 0.3s ease all;
		width: 150px;
		padding: 10px 0px;
		float: none;
		margin: 0;
	}
	
}

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



/*================================*/
/*----- ���剖�� -----*/
/*================================*/

.header_rightArea{
    float: right;
    box-sizing: border-box;
    /* padding-top: 42px; */
    padding-right: 3.75rem;
	padding-top: clamp(0.7097rem, 1.1458vw, 1.3750rem); /* 11.36px , 1.1458vw , 22.00px */
}




/*================================*/
/*----- 隤�蝟� language -----*/
/*================================*/
.language{
	font-size: 14px;
	position: absolute;
	top: 17px;
	right: 30px;
}
	.language_content{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
		.language_list{	
			box-sizing: border-box;	
		}
			.language_list a{
				display: block;
				text-decoration: none;
				color: #8c8c8c;
				padding: 0 10px;
			}








/*================================*/
/*----- ���剜��撠���憛� -----*/
/*================================*/


/*-----PC��撠���憛�-----*/
.search_areaPC{
	position: absolute;
	right: 0;
	/* top: 14px; */
	/* top: 2.375rem; */
	top: clamp(1.7500rem, 1.9792vw, 2.3750rem); /* 28.00px , 1.9792vw , 38.00px */
}
	/*��撠�icon*/
	.search_iconPC{
		transition: 0.3s ease all;
	}
		.search_iconPC label{
			position: relative;
			display: block;
		}
			.search_iconPC label div{
				position:relative;
				display:block;
			}
			.search_iconPC label div svg{
				width:20px;
				height: 20px;
				display: block;
				fill: #000;
			}
			
		/*hover*/
		.search_iconPC:hover label{
			opacity:0.5;
			transition: 0.3s ease all;
		}	
		


.search_inAreaPC{
	-webkit-transition: top .2s;
	transition: top .2s;
	position: absolute;
	overflow: hidden;
	width: 350px;
	max-width: 350px;
	/* max-width: 100%; */
	display:none;
	top: 57px;
	right: 10%;
	background: rgba(255, 255, 255, 0.95);
	box-sizing: border-box;
	padding: 5px 15px 5px 40px;
}

	
	/*��撠�憿���*/
	/* .search_categoryAreaPC3{
		position: absolute;			
		left: 15px;
		width: 59px;
		z-index: 2;
	}
		.search_categoryAreaPC3 select{
			color: #fff;
			background: #000 url(../images/select_arrow_white.png) no-repeat;
			background-size: 13px;
			background-position: right;
			padding-right: 18px !important;
		} */

	.search_inBoxPC{
		position: relative;
		width: 100%;
		padding: 0px 45px 0px 0px;
		box-sizing: border-box;
	}
		.search_inBoxPC input[type="search"] ,
		.search_inBoxPC input[type="text"]{
			background: transparent;
			border: 0px;
			color: #333;
			font-size: 16px;
			font-weight: bold;
			line-height: 22px;
			height: 40px;
			padding: 0px;
			border-radius: 0;
			width: 100%;
			border-bottom: 1px solid #c3c3c3;
		}
		.search_inBoxPC input[type="search"]:focus ,
		.search_inBoxPC input[type="text"]:focus{
			border: 0px;
		}
		
		.search_inBoxPC button[type="button"] ,
		.search_inBoxPC button[type="submit"]{
			position: absolute;
			right: -15px;
			bottom: -5px;
			width: 50px;
			height: 50px;
			border-color: #fff0;
			text-align: center;
			cursor: pointer;
			background-color: var(--primary_color);
		}
			.search_inBoxPC svg{
				width: 25px;
				height: 25px;
				display: inline-block;
				/* color: var(--primary_color); */
				color: #fff;
				fill: #fff;
			}

	.search_inBoxPC .search_closePC{
		z-index: 2002;
		color: #3e3a39;
		position: absolute;
		left: -30px;
		/* top: -10px; */
		top: 50%;
		transform: translateY(-50%);
		text-decoration: none;
	}
		.search_inBoxPC span{
			display:inline-block;
			vertical-align:middle;
		}
		.search_closePC{
			font-size:22px;
			font-weight:lighter;
		}	
		
		.search_inBoxPC span svg{
			width: 15px;
			height: 15px;
			fill:var(--primary_color);
		}








		











/*================================*/
/*----- 銝餅���� -----*/
/*================================*/

	.navbar{
		/*margin-right: min(max(-1.5625vw, -0.9675rem), -1.875rem);*/ /* 憭批� 2.5vw����撠��� 12px����憭批�� 18px*/
		/* margin-right: -30px; */
		display: flex;
		justify-content: flex-end;
		font-size: clamp(1rem, 0.9375vw, 1.125rem); /* 摮�擃� ��撠��� 16px��憭批�蝝� 0.9375vw����憭批�� 18px */
	}
	
	/*瘚桀��*/
	/* .header.fixed .navbar{
		padding: 0px 0px;
	} */
	
		
		.nav{
			/* float: left; */
			box-sizing: border-box;
			position: relative;
		}
			.nav > a{
				display: block;
				text-decoration: none;
				color: #000;
				font-size: inherit;
				transition: 0.3s ease all;
				position: relative;
				/*padding: 0 clamp(0.9678rem, 1.5625vw, 1.8750rem);*/ /*  ��撠��� 15.48px��憭批�蝝� 1.5625vw����憭批�� 30.00px */
				padding: 0 clamp( .625rem, 2vw, .9375rem ); /* 10 15 */
				padding-top: 0.9375rem; /*15px*/
				padding-bottom: 0.9375rem; /*15px*/
			}
			.nav:last-of-type{

			}
				/*hover*/
				.nav:hover > a {
					opacity:0.5;
				}


				/*銝餅���萄���*/
				.navOpen {
					position:absolute;
					left:50%;
					padding:9px 0px 0px;
					width: 180px;
					/* width: 190px; */
					transform: translateX(-50%);
					display:none;
					z-index: 2;
				}
				.nav:hover .navOpen.pc {
					display:block;
				}
				.navOpenBg {
					position:relative;
				}


				.navOpen.mobile {
					display:none;
					opacity:0;
					z-index:-999999;
					transform: unset;
					padding: 0;
				}
				.navOpen.pc .navOpenBg:before {
					position: absolute;
					content:'';
					border-bottom: solid 8px rgba(0,0,0,0.65);
					border-left: solid 12px rgba(255,255,255,0);
					border-right: solid 12px rgba(255,255,255,0);
					top:-8px;
					left:50%;
					transform: translateX(-50%);
				}

					.navOpenList {
					}
						.navOpenList a {
							text-align:center;
							font-size:15px;
							color:#fff;
							line-height:22px;
							padding:7px 5px;
							background:rgba(0,0,0,0.65);
							display: block;
							transition:0.3s ease all;
							text-decoration: none;
						}
							.navOpenList a:hover {
								background: var(--primary_color);
							}

			



	
@media (max-width: 1200px){	

	.header_rightArea{
		padding-right: 25px;
		padding-top: 0; /* 11.36px , 1.1458vw , 22.00px */
	}
	
	/*-----PC��撠���憛�-----*/
	.search_areaPC{
		top: .8125rem;
	}						
}


/* �刻�Ｗ�\撖砍漲憭扳��991��嚗�憟��券��鋆∠���孵�璅�撘� */ 
@media screen and (min-width: 991px) {

	.navbar{
		/*margin-right: min(max(-1.5625vw, -0.9675rem), -1.875rem);*/ /* 憭批� 2.5vw����撠��� 12px����憭批�� 18px*/
	}

	.nav > a{
		overflow: hidden;
	}

	.nav:last-of-type > a{
		/* padding-right: 0px; */
	}

	.header:not(.fixed) .nav > a:before {
		/* content: "";
		position:
		absolute;
		background-color: #c3c3c3;
		width: 1px;
		height: 15px;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%); */
		content: "";
		width: 78%;
		height: 100%;
		position: absolute;
		z-index: -1;
		left: -125%;
		top: 0;
		background-color: var(--primary_color);
		border-radius: 5px;
		transform: skewX(0deg);
		transition: all 0.3s ease;
	}						

	.nav:first-of-type > a:before {
		/* display:none; */
	}
	
	/*hover*/
	.header:not(.fixed)  .nav:hover > a {
		opacity:1;
		transition: 0.3s ease all;
		position: relative;
		color: #fff;
	}
	.header:not(.fixed)  .nav:hover > a:before {
		left: 10.5%;
		transform: skewX(20deg);
	}



}


@media (max-width: 990px){

/*----- ���剖�� -----*/
.header_rightArea{
	position: fixed;
	max-width: 990px;
	width: 100%;
	top: -900px;
	right: 0px;
	height: 100%;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.7);
	transition: 0.3s ease all;
	padding: 52px 0px 0;
	overflow-y: auto;
	z-index: 4;
	float: none;
}
.header_rightArea.active {
	top: 0px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}



	/*----- 隤�蝟� language -----*/
	.language{
		position: unset;
		top: unset;
		right: unset;
	}
		.language_content{
			justify-content: center;
		}
			.language_list a {
				padding: 13px 5px;
			}






	/*-----PC��撠���憛�-----*/
	.search_areaPC{
		position: unset;
		right: unset;
		top: unset;
	}
		/*��撠�icon*/
		.search_iconPC{
			display: none;
		}
		.search_inAreaPC{
			position: unset;
			width: auto;
			max-width: unset;
			display: block;
			top: unset;
			right: unset;
			padding: 0px 0px;
		}
			.search_inBoxPC {
				position: relative;
				width: 100%;
				padding: 0px 50px 0px 10px;
				box-sizing: border-box;
			}
				.search_inBoxPC a{
					display: none;
				}
				.search_inBoxPC button[type="button"], 
				.search_inBoxPC button[type="submit"]{
					right: 0px;
					bottom: 0px;
					width: 40px;
					height: 40px;
					background-color: #fff0;
					display: flex;
				}
				.search_inBoxPC button[type="button"] svg ,
				.search_inBoxPC button[type="submit"] svg{
					width: 15px;
					height: 15px;
					margin: auto;
					color: var(--primary_color);
				}
















	/*----- 銝餅���� -----*/
	.navbar {	
		margin-right: 0px;	
		flex-direction: column;
	}
		.nav {
			float:none;
			width: 100%;
			padding: 0px;
			position: relative;
		}
		
			.nav > a {
				border:none;
				border-radius:0px;
				text-align:left;
				padding: 13px 15px;
				color: #cecece;
				border-bottom: 1px solid #5b5b5b;
				font-size: 14px;
			}
			.nav > a:before {
				display: none;
			}
			
					
				/*撅����詨��*/
				.navOpen {
					position:relative;
					top:0px;
					left:0px;
					margin:0px;
					width:auto;
					border-radius:0px;
					background:#444;
				}
				
				/*hover*/
				.nav:hover .navOpen.pc ,
				.fixed_nav:hover .navOpen.pc{
					display:none;
				}	
				
					
				.navOpen.mobile {
					display: none;
					opacity: 1;
					z-index: 1;
					position: relative;
				}
					.navOpenBg {
						box-shadow: none;
					}
						.navOpen.mobile  .navOpenList {
						}
						.navOpen.mobile  .navOpenList > a {
							text-align:left;
							font-size:14px;
							color: #cecece;
							line-height:22px;
							padding: 12px 15px 12px 30px;
							background-color: rgba(0, 0, 0, 0.7);
							transition:0.3s ease all;
							text-decoration:none;
							display:block;
							border-bottom: 1px solid #5b5b5b;
						}
						.navOpenList > a:hover {
							opacity: 0.7;
						}
						.search_inBoxPC input[type="search"] ,
						.search_inBoxPC input[type="text"] {
							border-bottom: 0px solid #c3c3c3;
						}
}


/*��璈���蝞剝��*/
.navArrow {
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	top: 13px;
	right: 20px;
	transition: all 0.3s ease;
	cursor: pointer;
}

.navArrow.first_arrow {
	display: none;
}

@media (max-width: 990px) {
	.navArrow.first_arrow {
		display: block;
	}
}

.navArrow:after {
	content: "";
	width: 6px;
	height: 6px;
	display: block;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	position: absolute;
	right: 5px;
	top: 50%;
	z-index: 50;
	-webkit-transform: translateY(-75%) rotate(-45deg);
	transform: translateY(-75%) rotate(45deg);
}

.navOpenList:hover .navArrow:after {
	right: 0px;
	/* transition: 0.6s ease all; */
}

.navOpen.pc .navOpenList a {
	text-align: center;
	font-size: 15px;
	/* padding: 10px 30px; */
	color: #fff;
	line-height: 22px;
	display: block;
	text-decoration: none;
	cursor: pointer;
	background-color: var(--primary_color);
	border-bottom: 1px solid rgba(225,225,225,0.5);
	opacity: 1;
	transform: all .3s ease;
}
.navOpen.pc .navOpenList a:hover {
	opacity: 0.5;
}



.navOpen.pc .navOpenList:last-of-type a{
	/* border-bottom:none; */
}