@charset "UTF-8";

header{
	height: 98px;
	width: 100%;
/* 	background-color: #FFF; */
}
.headerWrap{
	padding: 15px 45px;
    height: 100%;
}
.headerTelArea{
	display: block;
	text-align: right;
	color: #f39700;
	font-size: 1.17em;
/* 	font-weight: bold; */
	line-height: 1;
	margin-right: 15px;
}
.headerTel{

}
.headerBottomArea{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.headerLogoArea {
    width: 195px;
    position: relative;
}


.headerLogoArea > a{
	    position: absolute;
    top: -40px;
    left: 0;
    width: 180px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    background-color: #FFF;
    border-radius: 20px;
    filter: drop-shadow(2px 2px 3px #444);
    padding: 20px;
}
.headerNavArea{


}
.headerNav{
	display: flex;
	justify-content: space-between;
	align-items: center;
    padding-top: 15px;
}
.headerNavUl{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.headerNavUlIn{
	padding: 0 20px;
/* 	border-left: 1px solid #FFF; */
}
.headerNavUlIn:first-child{
/* 	border-left: none; */
}
.headerNavUlInLink, .headerNavUlInLink:hover, .headerNavUlInLink:visited{
	color: #666666;
	cursor: pointer;
}

.headerNavUlInLink {
    font-size: 14px;
}
.header-spShow{
	display: none;
}
.linkBtn.ty4.headLink{
	width: auto;
}

.linkBtn.ty4.headLink{
	font-size: 1.1em;
	padding: 3px 15px;
	border-radius: 20px;

}

.indexHeader{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
.indexHeader > header{
/*     background-color: rgba(28,58,54,0); */
    background-color: rgba(0,0,0,0.3);
}

.headerNavUlInLink.clOrange{
	color: #f39700;
}

header.fixedHeader{
    position: fixed;
    top: -144px;
    left: 0;
    z-index:999;

    transform: translateY(0);
    transition: transform .8s , background-color .8s ;
}
header.fixedHeader.noAni{
    top: 0px;
}

header.fixedHeader.animate{
    transform: translateY(144px);
    transition: transform .8s , background-color .8s ;
    transition-delay: 250ms;
}
.headerNavUlInLink.actiuve {
    border-bottom: 1px solid #f39700;
}

.headerLogoArea > a img{
    width: 100%;
    object-fit: contain;
	font-family: "object-fit: contain;";
}

@media screen and (max-width: 1420px){

	.headerNavUlInLink {
	    font-size: 1em;
	}
	.headerNavUlIn {
	    padding: 0 10px;
	}

	.linkBtn.ty4.headLink{
		font-size: 1.1em;
		padding: 3px 15px;
		border-radius: 20px;
	}


	.headerLogoArea > a{
	    width: 150px;
	    height: 120px;
	    padding: 20px;
	}
	.headerTelArea {
	    font-size: 1.2em;
	}
}
@media screen and (max-width: 1280px){

	.headerNavUlIn{
		padding: 0 10px;
		border-left: 1px solid #FFF;
	}

}


@media screen and (max-width: 1100px){

	.headerLogoArea {
	    width: 165px;
	}

}


n.headLink{
	height: 35px;
/* 	width: 235px; */
    width: 155px;
}
.icon.ma.mama2{
	margin-right: 0;
}

.linkBtn.headLink:first-of-type{
	margin-right: 15px;
}

.linkBtn.headLink.white{
	background-color: #FFF;
	color: #1c3a36;
	font-size: 2em;
}
.headLink.contact{
	width: 60px;
    font-size: 2em;
}

.spShow{
	display: none;
}
@media screen and (min-width: 1075px){

	.pcHead{
		width:20%;
		float:left;
		padding-top:30px;
	}
	.pcHead2{
		width:80%;
		float:right;
	}
	.headerLogoArea {
	    width: 0;
	}
}
@media screen and (max-width: 1075px){

	.headerBottomArea {
	    width: 100%;
	}

	.pcHead{
		float:left;
	}
	.pcHead2{
		width:80%;
		float:right;
	}

	#container{
		margin-top: 60px;
	}

	.headerWrap {
		height: 100%;
		padding: 15px 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	header{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 99;
		height: 72px;
	}

	.headerLogoArea {
	    flex-basis: 78%;
	}
	.headerLogoArea > a {
		display: flex;
		align-items: center;
	}

	.humb{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.humbBer{
		display: flex;
		justify-content: center;
		align-items: center;
		width:  35px;
		height: 35px;
		margin-right: 10px;
	}
	.humbBer > span{
		width: 35px;
		height: 2px;
		position: relative;
		background-color: #f39700;
		border-radius: 3px;
		opacity: 1;
		transition: background-color .2s;
	}
	.humbBer > span:before, .humbBer > span:after{
		content: "";
		display: block;
		width: 35px;
		height: 2px;
		position: absolute;
		background-color: #f39700;
		margin-right: 10px;
		border-radius: 3px;
		left: 0;
	}
	.humbBer > span:before{
		top: -10px;
		transform: rotate(0);
	 	transition: .2s;
	}
	 .humbBer > span:after{
	 	top: 10px;
	 	transform: rotate(0);
	 	transition: .2s;
	}

	#humbChk:checked ~ .humb .humbBer > span{
		background-color: rgba(255,255,255,0);
	 	transition: background-color .2s;
	}

	#humbChk:checked ~ .humb .humbBer > span:before{
		top: 0;
		transform: rotate(-225deg);
	 	transition: .2s;
	}

	#humbChk:checked ~ .humb .humbBer > span:after{
		top: 0;
		transform: rotate(225deg);
	 	transition: .2s;
	}

	.headerContRight{
	}

	.headeMenu{
		position: fixed;
		width: 100vw;
		height: auto;
		top: 60px;
		left: 0;
		z-index: 9999;
	}
	.headerContMenuLink{
		display: block;
		width:  100%;
	}
	.headerContMenuLinkIn, a.headerContMenuContact{
		display: block;
		width: 100%;
/* 		height: 50px; */
		background-color: #FFF;
	}
	.headerContMenu{
		display: block;
		background-color:#FFF;
		transform: translateX( 100vw);
		transition:transform .2s;
	}
	.bottomLayer{
		display: block;
		position: fixed;
		top: 80px;
		left: 0;
		width: 100vw;
		height: calc( 100vh - 80px );
		background-color: rgba(0,0,0,0.2);
		transform: translateX(100vw);
		z-index: 9996
	}
	#humbChk:checked ~ .headerContMenu, #humbChk:checked ~ .bottomLayer{
		transform: translateX(0);
		transition:transform .2s;
	}
	.headeMenuIn{
/* 		padding: 10px 30px; */
		border-bottom: 1px solid #262626;
		color: #262626;
	}

	.headeMenuIn a{
	    padding: 12px 30px;
		display: block;
		width: 100%;
		color: #262626;
	}

	.headerLogoArea > a{
		position: static;
	    width: auto;
	    height: 50px;
	    background-color: #FFF;
	    border-radius: 0px;
	    filter: none;
	    padding: 0;
	    justify-content: flex-start;
	}
	.headerLogoArea > a img{
	    width: auto;
	    height: 100%;
	}
	.headerLogoArea {
	    width: 100%;
	}
	.header-spHide{
		display: none;
	}
	.header-spShow{
		display: block;
	}

}