@charset "utf-8";

/* ===== header=====  */
.s-header-wrap{
	justify-content: flex-start;
}
header .s-header-wrap__logo{
	width: 19rem;
	margin-left: 1em;
}
.s-header-wrap__logo span{
	display: none;
}

.s-header-categoryNav__body .nav-flex ul{
	padding-bottom: 20px;
	text-align: left;
}
.s-header-categoryNav__body .nav-flex ul:last-child{
	padding-bottom: 0;
}
.s-header-categoryNav__body .nav-flex ul h3{
	font-weight: bold;
	padding-bottom: 10px;
	padding-top: 10px;
}
.s-header-contentsNavBlock__item.u-hidden-lg-up{
	padding-top: 10px;
}

.s-header-wrap__nav{
	left: auto;
	right: 1rem;
}
.s-header-wrap__utility{
	top: 1.4rem;
    right: 5rem;
    height: 3rem;
}
.s-header-navBlok__nav{
	padding: 0;
	background: #0c5cb3;
}
@media screen and (max-width: 991px) {
	.s-header-contentsNavBlock{
		background: #0c5cb3;
		padding: 0 15px;
		color: white;
	}
	.s-header-contentsNavBlock a{
		color: white;
	}

	.s-header-navBlok__openBtn::before, .s-header-navBlok__openBtn::after, .s-header-navBlok__openBtn > span{
		background-color: #0c5cb3;
	}
}


.pc_only{
	display: none;
}
.s-header{
  height: 5rem;
}
@media screen and (min-width: 992px) {
	.s-header {
        height:9.5rem;
        border-bottom: 1px solid #ccc;
		background: white;
		position: fixed;
		z-index: 100;
		top: 0;
    }
	.pc_only{
		display:block;
	}
	.sp_only{
		display: none;
	}
	header .s-header-wrap__logo {
		width: 26rem;
		margin: 0;
	}
	.s-header-wrap{
		height: 5rem;
        background: none;
        border: none;
		flex-wrap: wrap;
		padding: .5rem 2rem 0 2rem;
	}
	.s-header-navBlok__nav{
		background: none;
	}
	.s-header-categoryNav:hover {
      border-bottom: none;
    }

    .s-header-categoryNav:hover::after {
        display: none;
    }
    .s-header-categoryNav__head {
		font-size: 1.4rem;
	}
	.s-header-categoryNav__body{
		background:#0c5cb3;
		color: white;
		top:9.2rem;

	}
	.s-header-categoryNav__body a{
		color: white;
	}
	.s-header-categoryNav{
		border: none;
		padding: 5px;
	}
	.s-header-categoryNav:hover,
	.s-header-categoryNav__head:hover{
		background:#0c5cb3;
		color: white;
		cursor: pointer;
	}
	.s-header-categoryNav:hover .s-header-categoryNav__head::after{
		background-image: url(/assets/img/common/icon-arrow-select_w.svg);
		background-repeat: none;
	}
	.s-header-contentsNavBlock{
		height: auto;
	}
	.s-header-categoryNav__body .nav-flex{
		display: flex;
		justify-content: center;
	}
	.s-header-categoryNav__body .nav-flex ul{
		/*width: 33%;*/
		margin-right: 2rem;
		border: none;
	}
	.s-header-categoryNav__body .nav-flex ul h3{
		font-weight: bold;
		padding-bottom: 10px;
		padding-top: 20px;
	}
}

@media screen and (min-width: 768px) {
    .p-homeSection {
        padding-top: 5rem;
    }
	.m-breadcrumb {
		margin-top:11rem;
	}
}
@media screen and (max-width: 991px) {
	.s-header-categoryNav__body .nav-flex ul{
		padding-bottom: 0;
	}
	.s-header-contentsNav__navlist li{
		padding: 10px 0;
		border-bottom: 1px dashed #fff;
	}
	.s-header-categoryNav__head{
		display: none;
	}
	.s-header-categoryNav:hover .s-header-categoryNav__head::after{
		background-image: url(/assets/img/common/icon-arrow-select_w.svg);
		background-repeat: none;
	}
	.nav-flex ul li{
		display: none;
	}
	.nav-flex ul h3{
		border-bottom: 1px dashed #fff;
	}
}


header p.sendfree{
	display: none;
}

@media screen and (min-width: 992px) {
	header p.sendfree{display:block;font-size:11px;padding: 4px 10px;background:#efefef; line-height: 1.1rem;}

	header p.sendfree::after {
		content: "＊沖縄・離島は除く";
		/*position: absolute;
		bottom: 3px;
		right: 11px;*/
		font-size: 10px;
		display: block;
	}
}
header p.sendfree strong:first-child{ font-size: 0}
header p.sendfree strong:first-child:after{ content: "3,080"; font-weight: bold; font-size: 11px; display: inline-block}
header p.sendfree small{ font-size: 0}
header p.sendfree small:after{ content: "(税込)"; display: inline-block;font-size: 10px}

header ul.s-header-utilityList{}
header ul.s-header-utilityList li{ display:inline-block; margin-right:0px; padding-left:10px}
header ul.s-header-utilityList li.cart li,
header ul.s-header-utilityList li.cart{ padding-left: 0;}
header ul.s-header-utilityList li a{color:#555;}
header ul.s-header-utilityList li.account a{ background:#0c5cb3 url(/assets/img/common/login_ic.svg) no-repeat 5px center/12px; padding:5px 7px 3px 23px; color:white; display:inline-block}
header ul.s-header-utilityList li.inq a{ background:#0c5cb3 url(/assets/img/common/mail_ic.svg) no-repeat 5px center/16px; padding:5px 7px 3px 23px; color:white; display:inline-block}
header ul.s-header-utilityList li a:hover{ background-color:#ffae00;}


@media screen and (max-width: 991px) {
	header ul.s-header-utilityList li.inq a,
	header ul.s-header-utilityList li.account a{
		text-indent: -9999px;
		background-position: center center;
	}
}
@media(max-width:767px){
	ul#plink{ border-top:1px solid #ccc; display: flex; flex-wrap: wrap; align-items: center;}
	ul#plink li{ width:50%; border-bottom:1px solid #ccc; box-sizing:border-box}
	ul#plink li:nth-child(odd){ border-right:1px solid #ccc}
	ul#plink li a{ display:block; padding:10px; background:white url(/assets/img/common/arrow.png) no-repeat 95% center/10px; text-align:center; color:#555}
}

@media screen and (min-width: 1149px) {
	.subnav>ul{
		gap: 0 10px;
	}
}
@media screen and (min-width: 992px) {
	header ul.s-header-utilityList li.sp_only{
		display: none;
	}
	.subnav{
		margin: 0 0px;
		width: 100%;
	}
	.subnav>ul{
		display: flex;
		justify-content: center;
		align-items: center;
		/*gap: 0 20px;*/
	}
	.subnav>ul>li{
		text-align: center;
		padding: 0px;
	}
	.subnav>ul>li>a{
		display: block;
		padding: 5px 10px;
		box-sizing: border-box;
	}
	.subnav>ul>li>a:hover{
		background-color: #0c5cb3;
		color: white;
	}
	.subnav>ul>li.cart a:hover{
		background:none;
	}
}


/*sns*/
header div.sns{
	display: flex;
	align-items: center;
	/*position: absolute;
	right:-130px;
	top: 15px;*/
}
header div.sns a{
	display: inline-block;
	padding: 0 5px;
}
header div.sns a img{
	width: 25px;
}


/*ナビ*/
#nav{ position:relative}
#nav ul{width:1000px; margin:0 auto;}
#nav ul li{ float:left; text-align:left; font-size:13px;}
#nav ul li a{ color:#555; display:block; padding:7px 11px; position:relative}
#nav ul li.plist{ padding:7px 15px 7px 10px; margin-right:15px; background:url(../images/arrow_list.png) no-repeat right center; cursor:pointer}
#nav ul li a:hover{ background:rgba(12,92,179,0.9);color:white; cursor:pointer}
/*#nav ul li.plist:after{ content:"▼"; position:absolute; right:-5px; top:15px; font-size:12px; color:#0c5cb3;}*/
#nav ul li.plist:hover{background:rgba(12,92,179,0.9); color:white}
#nav ul li.plist:hover:after{ display:none}
#nav ul li.cart{ float:right;}
#nav ul li.cart a{ background:#ffae00 url(../images/cart_ic.png) no-repeat 5px center; background-size:20%; padding-left:35px; color:white; padding:7px 15px 7px 35px}
#nav ul li.cart a:hover{ background-color:#ff9000}

div#sub{ width:100%; z-index:1000; float:none; position:absolute; left:0; top:35px; background:rgba(12,92,179,0.9); display:none; padding:0 30px 30px 30px}
div#sub ul { float:left; width:33%; margin-bottom:20px}
div#sub ul h3{ font-size:18px; color:white; margin-bottom:10px}
div#sub ul:first-child{ width:30%}
div#sub ul:nth-child(2){ width:45%}
div#sub ul:nth-child(3){ width:25%}
div#sub ul:nth-child(4){ width:28%; clear:both}
div#sub ul li{ float:none; white-space:nowrap; position:relative; margin-bottom:10px; padding:0}
#nav ul li div#sub a{color:white; padding:0}
#nav ul li div#sub a:hover{ background:none; text-decoration:underline}
div#sub ul li a{ padding:0; height:auto; color:white}
div#sub ul li:last-child a{ border-bottom:none}
div#sub ul li a:hover{ color:#f0f0f0; text-decoration:underline; background:none}

#navSp,
#navSp ul.spMenu{
	display: none;
}

@media(max-width:1120px){
	header div.sns{
		display: none;
	}
	header div.sns.sp_only{
		display:flex;
		justify-content: center;
		align-items: center;
		gap: 0 1rem;
		padding: 10px 0;
	}
	#nav{ display:none}
	#navSp{
		display: block;
	}
	#navSp ul.spMenu{ position:absolute; right:0; top:1vh; z-index:1000; display: block;}
	#navSp ul.spMenu li{}
	#navSp ul.spMenu li a{ display:block;box-sizing:border-box}
	#navSp ul.spMenu li.menu{ position:absolute; width:40px; right:1.5vw; top:0.5vh; height:40px; z-index:2000}
	/*#navSp ul.spMenu li.menu a{ background:#065c40 url(../image/menu_ic.png) no-repeat center center; background-size:50%; height:8vh; text-indent:-9999px; border-radius:9vw}*/
	#navSp ul.spMenu li.menu a,
	#navSp ul.spMenu li.menu span{
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	#navSp ul.spMenu li.menu a{
		position: relative;
		width:100%;
		height:100%;
		background:#0c5cb3;
	}
	#navSp ul.spMenu li.menu span{
	position: absolute;
	left: 0;
	width: 60%;
	height: 3px;
	background-color: #fff;
	border-radius: 4px;
	left:50%;
	margin-left:-30%;
	}
	#navSp ul.spMenu li.menu span:nth-of-type(1) {
		top: 10px;
	}
	#navSp ul.spMenu li.menu span:nth-of-type(2) {
		top: 18px;
	}
	#navSp ul.spMenu li.menu span:nth-of-type(3) {
	top: 26px;
	}
	
	#header.openNav ul.spMenu li.menu a{ height:6vh}
	#header.openNav ul.spMenu li.menu span:nth-of-type(1) {
	-webkit-transform: translateY(1.1vh) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
	}
	#header.openNav ul.spMenu li.menu span:nth-of-type(2) {
	opacity: 0;
	}
	#header.openNav ul.spMenu li.menu span:nth-of-type(3) {
	-webkit-transform: translateY(-1.1vh) rotate(45deg);
	transform: translateY(-6px) rotate(45deg);
	}

	
	#navSp ul.spMenu li.cart{ position:absolute; right:55px; top:0.5vh; width: 40px; height:40px;}
	#navSp ul.spMenu li.cart a{ 
		background:#ffae00 url(../images/cart_ic.png) no-repeat center center;
		height:100%; background-size:80%; padding-top:4vh; text-align:center;
		font-size:9px; line-height:1.2em; color:#444; width:100%; text-indent:-9999px; text-decoration:none}
	#navSp ul.spMenu li.oc a strong{ font-weight:bold; font-size:10px}
	
	header .spNavOpen{ display:none}
#header.openNav .spNavOpen { display:block; position:absolute; top:7.5vh; z-index:1000; width:100%;background:#0c5cb3;}
header .spNavOpen ul li{ width:100%; box-sizing:border-box;color:white; padding:0}
header .spNavOpen ul li.plist span{ padding:10px}
header .spNavOpen ul li a{ display:block; padding:10px; color:white;font-size:14px;border-bottom:1px solid #ccc; text-decoration:none}
header .spNavOpen ul li:first-child a{ border-bottom:1px dotted #ccc}
header .spNavOpen ul li ul{ font-size:12px}
header .spNavOpen ul li ul li a{ display:block; padding:10px 10px 10px 20px; font-size:12px; border-bottom:none}
header .spNavOpen ul li ul li:last-child a{ border-bottom:1px solid #ccc}
header .spNavOpen ul li.account{ background:url(../images/login_ic_sp.png) no-repeat 10px center;}
header .spNavOpen ul li.account a{padding-left:30px}
header .spNavOpen ul li.inq{ background:url(../images/inq_ic_sp.png) no-repeat 10px center;}
header .spNavOpen ul li.inq a{padding-left:30px}
}