@media (min-width: 751px){
	.-sp{display:none !important
}}
@media (max-width: 750px){
	.-pc{display:none !important
}}

/* IEのみの調整*/
@media all and (-ms-high-contrast: none) {
.gnav-megamenu{
	width: 100%;
}
.categcards-list>.categcards-item:nth-child(1)>a::after {
    background-size: 65%;
}
.categcards-list>.categcards-item:nth-child(2)>a::after {
    background-size: 50%;
}
.categcards-list>.categcards-item:nth-child(3)>a::after {
    background-size: 80%;
}
.categcards-list>.categcards-item:nth-child(4)>a::after {
    background-size: 40%;
}

.categcards-item:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	 grid-row: 1 / 2;
	  -ms-grid-column: 2;
	-ms-grid-column-span: 1;
    grid-column: 2 / 3;
}
.categcards-item:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	 grid-row: 1 / 2;
	  -ms-grid-column: 3;
	-ms-grid-column-span: 1;
	grid-column: 3 / 4;

}
.categcards-item:nth-child(4) {
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	 grid-row: 2 / 2;
	  -ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-column: 3/3

}
}

.nowrap{
	display:inline-block;
	white-space:nowrap
}

.header-inner{
	overflow:visible;
	position:relative;
	height:70px;
	background:#fff;
	left: auto;
	right: auto;
}
.gnav-item{
	max-width: 1000px;
	margin: 0 auto;
}

.header-logo{
	background: #fff;
}
.gnav-item li {
	margin-left: 50px;
}
.gnav-item li:first-child {
	margin-left: 0px;
}

.gnav-item li:not(:first-child) {
	margin-left: 50px;

}
.gnav-item>a{
	transition:opacity 0.3s, color 0.3s, background-color 0.3s
}
.gnav-item>a span{
	display:inline-block;
	position:relative;
	z-index:1;
	transition:opacity 0.3s, color 0.3s, background-color 0.3s
}
.megamenu-categ>a{
	position:relative;
	transition:opacity 0.3s, color 0.3s, background-color 0.3s
}
.megamenu-categ>a.-hover::before{
	width:100%;
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(219,243,243,0.1);
	z-index:99
}
.megamenu-categ>a::after{
	transition:all 0.5s ease
}
.megamenu-categ>a.-hover::after{
	opacity:0.7
}
.header .gnav>.sitelink{
	display:flex;
	align-items:center;
	width:140px
}
.gnav-title{
	display:none
}
.gnav-list{
	overflow:visible;
	display:flex;
	justify-content: space-around;
}
.gnav-item.-current>a{
	position:relative
}
.gnav-item.-current>a span{
	display:inline-block;
	position:relative;
	z-index:1
}
.gnav-item.-current>a span::before{
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	z-index:-1;
	width:110%;
	height:140%;
	background-color:#ebf6ff;
	content:"";
	transform:translate(-50%, -50%)
}
.gnav-item>a{
	display:flex;
	align-items:center;
	height:70px;
	color:#048082;
	font-weight:bold;
	font-size: 16px;
	text-decoration:none
}
.gnav-item>a.-active{
	position:relative;
	z-index:1000
}
.gnav-item>a.-spmenu{
	display:none
}
.gnav-item .gnav-item:last-child{
	padding-left:0
}
.gnav-item .gnav-item:last-child>a::before{
	display:none
}
.gnav-item .gnav .gnav-list{
	flex-wrap:wrap;
	align-items:stretch;
	height:70px;
	padding-top:6px;
	padding-bottom:6px
}
.gnav-item .gnav .gnav-list>.gnav-item>a{
	height:100%
}
.gnav-megamenu{
	overflow:hidden;
	position:absolute;
	top:70px;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 1000px;
	z-index:-1;
	height:0;
	background:#00a9ac;
	opacity:0;
	transition:height 0.3s ease-out, opacity 0.1s linear 0.1s, visibility 0.1s linear 0.1s, z-index 0.1s linear 0.1s;
	display: inline-block;
}
.gnav-megamenu.-opend{
	opacity:1;
	/* z-index:1000 */
}
.gnav-megamenu-inner{
	position:relative
}
.gnav-megamenu-title{
	color:#fff;
	font-weight:bold;
	font-size:2.5rem;
	text-align:center
}
.gnav.-spmenu.-opend{
	height:auto !important
}
#gNavi_product .gnav-item>a::after{
	bottom:-6px
}
.header.-opend{
	position:relative;
	z-index:1000
}
.header.-opend .gnav-item>a{
	opacity:0.3
}
.header.-opend .gnav-item>a.-active,.header.-opend .gnav-item>a:hover{
	opacity:1 !important
}
.header .gnav-item>a{
	position:relative
}
.header .gnav-item>a::after{
	display:block;
	opacity:0;
	position:absolute;
	bottom:0;
	left:50%;
	z-index:5;
	width:0;
	height:0;
	border-style:solid;
	border-width:0 8px 8px 8px;
	border-color:transparent transparent #00a9ac transparent;
	content:"";
	transform:translateX(-50%)
}
.header .gnav-item>a.-active::after{
	opacity:1;
	transition:opacity 0ms ease 250ms
}
.megamenu-title{
	font-size: 20px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	padding: 10px 0 15px;
	line-height:2em;
}
.megamenu-title::before{
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(../images/common/arrow_before.png) no-repeat;
	background-size:contain;
	position: relative;
	top: 30px;
	right: 15px;
}
.megamenu-title::after{
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(../images/common/arrow_before.png) no-repeat;
	background-size:contain;
	position: relative;
	top: 30px;
	left: 15px;
}

.megamenu>a{
	color:#0058ab
}
.megamenu-close{
	display:block;
	position:absolute;
	top:12px;
	right:20px;
	padding-left:28px;
	font-weight:700;
	font-size:1.4rem
}
.megamenu-close img:hover{
	opacity:0.7;
}
.megamenu-close::before{
	display:block;
	position:absolute;
	top:50%;
	left:0;
	width:19px;
	height:19px;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:100% auto;
	transform:translateY(-50%);
	content:""
}
.megamenu-main{
}
.megamenu-categ{
	width:100%;
	padding:0px 50px 40px;;
	display: flex;
	justify-content: space-between;
}
.megamenu-categ>a{
	overflow:hidden;
	display:block;
	position:relative;
	height:250px;
	padding:20px;
	background-color:#fff;
	color:#0e7c7d
}
.megamenu-categ>a>span{
	display:inline-block;
	position:relative;
	z-index:2;
	padding-left:23px;
	font-weight:700;
	font-size:1.8rem
}
.megamenu-categ>a>span::before{
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: solid 6px transparent;
	border-left: solid 8px #048082;
	top: 50%;
	left: 0;
	margin-top: -6px;
}
.megamenu-categ>a::before{
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	width:24%;
	height:100%;
	background: linear-gradient(to right, #dbf3f3 0%, rgba(255,255,255,0) 100%);
	content:""
}
.megamenu-categ>a::after{
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	width:100%;
	height:100%;
	content:""
}
.megamenu-categ ,.megamenu-categ .-bemask,.megamenu-categ .-bebest,.megamenu-categ .-belt,.megamenu-categ ,.megamenu-categ {
	width: 48%;
}
.megamenu-categ, .-zeroposi,.-biola,.megamenu-categ, .-sozai {
	width: 100%;
}
.megamenu-categ .-befaice,.megamenu-categ .-kakato,.megamenu-categ .-perm, .-bodybala, .-beband, .-beshapebelt{
	width: 32%;
}
		
.megamenu-categ .-biola::after{
	background-image:url("../images/common/_bmw.webp");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
	background-size: contain;	
}
.megamenu-categ .-bemask::after{
	background-image:url("../images/common/_syn.png");
	background-repeat:no-repeat;
	background-position: right 15px bottom 5px;
}
.megamenu-categ .-zeroposi::after{
	background-image:url("../images/common/_zeroposi.png");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
	background-size: contain;
}
.megamenu-categ .-bebest::after{
	background-image:url("../images/common/vest.png");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
}
.megamenu-categ .-belt::after{
	background-image:url("../images/common/onsoku.png");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
}
.megamenu-categ .-befaice::after{
	background-image:url("../images/common/facemask.png");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
}
.megamenu-categ .-kakato::after{
	background-image:url("../images/common/kakato.png");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
}
.megamenu-categ .-perm::after{
	background-image:url("../images/common/palm.png");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
}
.megamenu-categ .-beshapebelt::after{
	background-image:url("../images/common/belt.png");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
}
.megamenu-categ .-beband::after{
	background-image:url("../images/common/vannor.png");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
}
.megamenu-categ .-bodybala::after{
	background-image:url("../images/common/_bodybala.png");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
}

.megamenu-categ .-sozai::after{
	background-image:url("../images/common/_material.jpg");
	background-repeat:no-repeat;
	background-position: right 0px bottom 0px;
		background-size: contain;
}
.megamenu-footer{
	display:flex;
	justify-content:center;
	width:100%;
	padding:30px
}
.megamenu-footer{
	margin-left:20px
}
.megamenu-footer{
	margin-left:0
}
.overlay.-opend {
    background-color: rgba(0,0,0,0.5);
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    transition: background-color 0.3s;
}

/* 0521追記 */
.gnav-item:hover>.js-megamenu-trigger+.gnav-megamenu{
	position: absolute;
	top: 70px;
	right: 0;
	overflow: initial;
	z-index: 5;
	opacity: 1;
	height: auto;
	
}

.gnav-item:hover>.js-megamenu-trigger::after{
	opacity: 1;
	border-color: transparent transparent #00a9ac transparent;
}

.gnav-item:hover>.gnav-megamenu::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 20px;
    top: -20px;
}

.gnav-list::before{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0;
	background-color: rgba(0,0,0,0.5);
	transition: opacity 0.3s;
}

.gnav-list{
	pointer-events: none;
}

.gnav-item{
	pointer-events: auto;
}

.gnav-list:hover::before{
	opacity: 1;
	z-index: -1;
}

.header{
	position: relative;
	z-index: 3;
}

.sliderArea,
#container,
#footer{
	position: relative;
	z-index: 1;
}



/* 1200まで*/
@media (max-width: 1200px){
.gnav-megamenu{
	right:0
}
.gnav-item li:first-child {
    margin-left: 0px;
}}

/* 950まで*/
@media (max-width: 950px){
.gnav-item li:first-child{
    margin-left: 50px;
}
.gnav-item>a {
	font-size: 14px;
}}

/* 900まで*/
@media (max-width: 900px){
.gnav-item li:first-child {
    margin-left: 0px;
}
}
/* 850まで*/
@media (max-width: 850px){
.gnav-item li:not(:first-child) {
    margin-left: 40px;
}}

/* 800まで*/
@media (max-width: 800px){
.gnav-item li:not(:first-child) {
    margin-left: 32px;
}
.megamenu-categ>a>span{
font-size: 16px;
}}


/* 769以上*/
@media (min-width: 769px){
.gnav-item>a span:hover::before{
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	z-index:-1;
	width:110%;
	height:140%;
	background-color:#ccf2f1;
	content:"";
	transform:translate(-50%, -50%)
}
.megamenu-categ>a:hover::before{
	width:100%;
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(219,243,243,0.1);
	z-index:99
}
.megamenu-categ>a:hover::after{
	opacity:0.7
}
.megamenu-footer{
	display:none
}

/* 0521追記 */
.header .gnav-list .gnav-item:hover>a+.gnav-megamenu .megamenu-close{
	display: none;
}

}

/* 768まで*/
@media (max-width: 768px){
.header{
	border-bottom:1px solid #00a9ac
}
.header-inner{
	padding:0 15px
}
.header-logo>a{
	display:block;
	width:100%
}
.header-gnav{
	display:flex;
	justify-content:space-around;
}
.gnav-item>a{
	font-size:1.2rem
}
.gnav-item>a:hover{
	opacity:1
}
.gnav-menu .gnav-list>.gnav-item:last-child{
	padding-left:0
}
.gnav-megamenu{
	left:50%;
	width:calc(100% - 30px);
	margin:0;
	border:none;
	transform:translateX(-50%)
}
#gNavi_product .gnav-menu{
	max-width:none
}
.megamenu{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column-reverse
}
.megamenu-categ{
	display:flex;
	justify-content:center;
	width:100%;
	padding:30px
}
.megamenu-categ.-isliderAreast,.megamenu-categ{
	padding: 0px 0 30px;
}
.megamenu-categ>a{
	margin:0 14px
}
.megamenu-footer{
	padding:30px 15px 10px
}
.megamenu-title {
    font-size: 18px;
}
.gnav-item li:first-child {
    margin-left: 0px;
}
.megamenu-categ>a{
	height: 230px;
}
/*.megamenu-categ .-biola::after,{
	background-size: 230px;
}*/
.megamenu-categ .-bemask::after{
	background-size: 270px;
}
.megamenu-categ .-bebest::after,.megamenu-categ .-belt::after,{
	background-size: 230px;
}
.megamenu-categ .-befaice, .megamenu-categ .-kakato, .megamenu-categ .-perm,.megamenu-categ .-beshapebelt,.megamenu-categ .-beshapebelt,.megamenu-categ .-beband {
    width: 33%;
}
.megamenu-categ .-befaice::after,.megamenu-categ .-kakato::after,.megamenu-categ .-perm::after,.megamenu-categ .-bodybala::after,.megamenu-categ .-beshapebelt::after,.megamenu-categ .-beband::after{
	background-size: 200px;
}
}



@media (min-width: 751px){
.gnav-item>a.-hover>span::before{
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	z-index:-1;
	width:110%;
	height:140%;
	background-color:#ebf6ff;
	content:"";
	transform:translate(-50%, -50%)
}}



@media (max-width: 750px){
.gnav-list.-sp{
	flex-wrap:nowrap;
	height:auto;
	padding:0;
	flex-direction:column;
	align-items: center;
	position: relative;
	top: 70px;
}

.gnav-item.-sp>a span{
	display: block;
}


.spjs-megamenu-trigger{
	background: #fff;
	margin: 10px 20px;
	border-radius: 10px;
	color: #048082;
	text-align: left;
	padding: 20px 10px 20px 20px;

}
.spjs-megamenu-trigger span{
	font-size: 16px;
}
.spjs-megamenu-trigger span::before{
	content: "";
	position: absolute;
	top: 45%;
	 right: 15px;
	width: 15px;
	height: 2px;
	/*縦線に*/
	transform: rotate(90deg);
	background:#048082;
	transition: all .3s ease-in-out;
}
.spjs-megamenu-trigger span::after{
	content: "";
	position: absolute;
	top: 45%;
	right: 15px;
	/*横線*/
	width: 15px;
	 height: 2px;
	background:#048082;
	transition: all .2s ease-in-out;
}
.spjs-megamenu-target{
	display:none;
}

.megamenu-categ>a{
	border-radius: 0px;
	padding: 10px;
}



.spjs-megamenu-trigger.open span::before {
  transform: rotate(180deg);
}

.spjs-megamenu-trigger.open span::after {
  opacity: 0;
}

.spgnav-megamenu-inner{
	background: #00a9ac;
	margin-bottom: 20px;
}

.gnav-item.-sp{
	min-width:100px;
	margin:0
}
.gnav-item.-sp>a{
	display:block
}
.gnav-megamenu{
	left:0;
	width:100%;	
	transform:none
}
.globalMenuSp -sp{
	overflow:hidden;
	position:absolute;
	top:128px;
	left:0;
	z-index:-1;
	width:100vw;
	height:0;
	opacity:0;
	transition:height 0.3s ease-out, opacity 0.1s linear, z-index 0.1s linear
}
.globalMenuSp -sp.-opend{
	opacity:1;
	z-index:1000;
	top: 0;
}
.globalMenuSp -sp .gnav-menu{
	padding:25px 0 0;
	background:#048082;
}
.globalMenuSp -sp .gnav-item{
	width:100%
}
.globalMenuSp -sp .gnav-item>a{
	display:flex;
	justify-content:left;
	align-items:center;
	height:60px;
	margin:0 15px 10px;
	background:#fff;
	border-radius:3px;
	padding-left:15px;
	transition:margin 0.2s
}
.globalMenuSp -sp .gnav-item>a.-active{
	margin-bottom:20px
}
.globalMenuSp -sp .gnav-item>a>span::after{
	content:none
}
.globalMenuSp -sp .gnav-item:last-child{
	margin-bottom:10px
}
.globalMenuSp -sp .gnav-footer{
	display:block;
	margin:0;
	padding:10px 15px 20px 15px;
	background-color:rgba(255,255,255,0.95)
}
.globalMenuSp -sp{
	width:100%;
	margin:0
}
.gnav-megamenu{
	position:relative;
	top:0;
	width:auto;
	margin:0;
	background:rgba(255,255,255,0.9)
}
.gnav-megamenu.-opend{
	margin-bottom:20px
}
.globalMenuSp -sp .gnav-item>a{
	opacity:1;
	position:relative;
	pointer-events:auto
}
.header .gnav-item>a::after{
	content:none
}
.megamenu-footer{
	display:none
}
.megamenu{
	display: block;
}
.megamenu-main{
	display:block;
	width:100%
}
.megamenu-categ>a{
	display:flex;
	align-items: flex-start;
	width:100%;
	max-width:100%;
	height:120px;
	margin:5px;
}
.megamenu-categ>a>span{
	font-size:1.4rem;
	padding-left: 15px;
}
.megamenu-categ .-biola::after{
	background-position: right 0px bottom 0px;
	background-size: 230px auto;
}
.megamenu-categ .-bemask::after{
	background-position: right 9px bottom 0px;
	background-size: 125px auto;
}

.megamenu-categ .-zeroposi::after{
	background-position: right 0px bottom 0px;
	background-size: 200px auto;
}
.megamenu-categ .-bebest::after{
	background-position: right 0px bottom 0px;
	background-size: 115px auto;
}
.megamenu-categ .-belt::after{
	background-position: right 0px bottom 0px;
	background-size: 115px auto;
}

.megamenu-categ .-befaice::after{
	background-position: right 0px bottom 0px;
	background-size: 110px auto;
}
.megamenu-categ .-kakato::after{
	background-position: right 0px bottom 0px;
	background-size: 110px auto;
}

.megamenu-categ .-perm::after{
	background-position: right 0px bottom 0px;
	background-size: 110px auto;
}
.megamenu-categ .-beshapebelt::after{
	background-position: right 0px bottom 0px;
	background-size: 110px auto;
}
.megamenu-categ .-beband::after{
	background-position: right 0px bottom 0px;
	background-size: 110px auto;
}
.megamenu-categ .-bodybala::after{
	background-position: right 0px bottom 0px;
	background-size: 110px auto;
}
.megamenu-categ .-sozai::after{
	background-position: right 0px bottom 0px;
	background-size: 200px auto;
}
.megamenu-categ .-befaice, .megamenu-categ .-kakato,.megamenu-categ .-perm,.megamenu-categ .-beshapebelt,.megamenu-categ .-beband,.megamenu-categ .-bodybala,{
	width: 100%;
}
	
.megamenu-footer{
	padding:30px
}

.header-inner{
	height: 15px;
}

/*　ハンバーガーボタン　*/
.hamburger {
	display : block;
	position: fixed;
	z-index : 10;
	right : 13px;
	top   : 25px;
	width : 42px;
	height: 42px;
	cursor: pointer;
	text-align: center;
	/*background: #fff;*/
}
.hamburger span {
	display : block;
	position: absolute;
	width   : 30px;
	height  : 4px ;
	left    : 6px;
	background : #048082;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition   : 0.3s ease-in-out;
	transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
	top: 10px;
}
.hamburger span:nth-child(2) {
	top: 20px;
}
.hamburger span:nth-child(3) {
	top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
	top : 16px;
	left: 6px;
	background :#048082;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
	top: 16px;
	background :#048082;
	-webkit-transform: rotate(45deg);
	-moz-transform   : rotate(45deg);
	transform        : rotate(45deg);
}

nav.globalMenuSp {
	position: fixed;
	z-index : 8;
	top: 0px;
	left : 0;
	color: #fff;
	background:rgba(4,128,130,0.95);
	text-align: center;
	width: 100%;
	opacity: 0;
	transition: opacity .6s ease, visibility .6s ease;
	visibility: hidden;
height: 100%;
overflow-y: scroll;
}

nav.globalMenuSp ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

nav.globalMenuSp ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	transition: .4s all;
}


/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
	opacity: 100;
	padding-bottom: 300px;
	visibility: visible;

}
a:not([href]):not([tabindex]) {
	color: #048082 !important;
}
}


@media (max-width: 380px){
.header-logo img{
	width: 75%;
}
}





/* 320まで*/
@media (max-width: 320px){
.hamburger{
	top: 17px;
}
.megamenu-categ>a>span {
    font-size: 11px;
}
}