@charset "utf-8";
/* 	common.css
======================================================================== */
body{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #000000;
	word-wrap : break-word;
	overflow-wrap : break-word;
	word-break: break-word;
}
a,
a:link {
	display: inline-block;
	color:#000000;
	transition: 0.7s;
	text-decoration: none;
}
a:visited,
a:active {
	color:#000000;
}
a:hover {
	text-decoration: none;
	opacity: 0.7;
}
a img:hover {
	opacity: inherit;
}
@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}
p { line-height: 170%; }
ul,li { list-style: none; }
img {
	width:auto;
	height: auto;
}
.flex{ display: flex;}
.grid{ display: grid;}
.inline{ display: inline-block;}

.tblt,
.sp{
	display: none!important;
}
@media screen and (max-width: 768px) {
	.tblt{ display: inline-block!important;}
}
@media screen and (max-width: 767px) {
	.pc{ display: none!important; }
	.tblt{ display: none!important;}
	.sp{ display: block!important;}
}
* { box-sizing: border-box; }

:root {
	--font-spartan: "Spartan", sans-serif;
	--font-robot-slab: "Roboto Slab", serif;
	--color-red: #c41e1e;
	--color-gray: #f8f8f5;
}

/* header --------------------------------------------------*/
#head-area{
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	transition: .5s;
	background: var(--color-gray);
}
#head-area .inner{
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap:40px;
	width: 100%;
	height: 160px;
	transition: .5s;
	margin: 0 auto;
	padding: 0 20px 0 0;
}
#head-area.moved .inner{
	height: 100px;
}
	#head-area .logo{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 260px;
		height: 160px;
		font-weight: bold;
		color: #fff;
		line-height: 150%;
		text-align: center;
		background: var(--color-red);
		padding: 5px;
	}
	#head-area.moved .logo{
		width: 150px;
		height: 100px;
		padding: 0 15px;
	}
		#head-area .logo img{
			width: 100%;
			max-width: 171px;
		}
	#global-nav {
		width: calc(100% - 300px);
	}
	#head-area.moved #global-nav {
		width: calc(100% - 140px);
	}
		#global-nav .pc_navi{
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap:20px;
			width: 100%;
		}
			#global-nav .pc_navi .col_l{
				width: 100%;
				max-width: 800px;
			}
				#global-nav .pc_navi .col_l .tel_wrap{
					display: inline-flex;
					align-items: center;
					/*width: 100%;*/
					font-weight: bold;
					background: #fff;
					border-radius: 100px;
					margin-bottom: 5px;
					padding: 6px 15px 6px 6px;
				}
					/*
					#global-nav .pc_navi .col_l .tel_wrap .store_name{
						font-size: 12px;
						font-weight: bold;
						color: var(--color-red);
						line-height:140%;
					}
					*/
					#global-nav .pc_navi .col_l .tel_wrap .tel {
						display: flex;
						align-items: center;
						gap:10px;
						padding: 0 10px 0 0;
					}
						#global-nav .pc_navi .col_l .tel_wrap .tel .label{
							display: inline-flex;
							align-items: center;
							justify-content: center;
							font-size: 10px;
							font-weight: bold;
							color: #fff;
							width: 76px;
							height: 24px;
							border-radius: 100px;
							background: var(--color-red);
						}
						#global-nav .pc_navi .col_l .tel_wrap .tel .num{
							position: relative;
							top:2px;
							font-family: var(--font-spartan);
							font-size: 18px;
							font-weight: 700;
							letter-spacing: 1px;
						}
						#global-nav .pc_navi .col_l .tel_wrap .tel svg{
							position: relative;
							top:1px;
							margin-right: 8px;
						}
					#global-nav .pc_navi .col_l .tel_wrap .contact_link {
						font-size: 14px;
						letter-spacing: 1px;
						border-left: 1px solid #c8c8c8;
						padding: 4px 0 2px 12px;
					}
						#global-nav .pc_navi .col_l .tel_wrap .contact_link svg{
							position: relative;
							top:1px;
							margin-right: 8px;
						}

				#global-nav .pc_navi .col_l nav ul{
					display: flex;
					/*justify-content: space-between;*/
					gap: 40px;
				}
					#global-nav .pc_navi .col_l nav ul li{
					}
						#global-nav .pc_navi .col_l nav ul li > a{
							display: flex;
							align-items: center;
							gap:10px;
							font-size: 14px;
							font-weight: bold;
							line-height: 120%;
							padding: 15px 0;
						}
						#global-nav .pc_navi .col_l nav ul li a:hover{
							color: var(--color-red);
							opacity:1;
						}


				/* dropdown */
				#global-nav .pc_navi .col_l nav ul li.dropdown {
					position: relative;
				}
				#global-nav .pc_navi .col_l nav ul li.dropdown > a{
					/*cursor: default;*/
				}
				#global-nav .pc_navi .col_l nav ul li .dropdown_menu{
					position: absolute;
					top: 100%;
					left: -50%;
					display: none;
					background: #fff;
					width: 280px;					
					border: 1px solid #dadada;
					border-radius: 15px;
					padding: 20px 20px;
				}
				#global-nav .pc_navi .col_l nav ul li .dropdown_menu.open{
					display: block;
					animation-name: fadein-dropdown;
					animation-duration: .5s;
					animation-timing-function: ease-out;
					animation-fill-mode: forwards;
				}
				@keyframes fadein-dropdown {
					0% { opacity: 0;}
					100% { opacity: 1;}
				}
				#global-nav .pc_navi .col_l nav ul li .dropdown_menu li{
					width: 100%;
				}
				#global-nav .pc_navi .col_l nav ul li .dropdown_menu li + li{
					margin-top: 12px;
				}
				#global-nav .pc_navi .col_l nav ul li .dropdown_menu li a{
					position: relative;
					font-size: 13px;
					line-height: 120%;
					letter-spacing: 0;
					padding: 0 0 0 14px;
				}
				#global-nav nav .dropdown_menu li a::after{
					content: '';
					position: absolute;
					top: 3px;
					left: 0;
					width: 9px;
					height: 9px;
					background-image: url(../../img/common/dropdown_arrow.svg);
					background-repeat: no-repeat;
					background-size: contain;
				}
				@media screen and (max-width: 1000px) {
					#global-nav .sp_navi nav ul li.dropdown{
					  padding-bottom: 0;
					}
					#global-nav .sp_navi nav ul li .dropdown_menu{
						position: relative;
						top: 0;
						left: 0;
						display: block;
						width: 100%;
						background: none;
						transform: translateX(0);
						margin: 0;
						padding: 25px 0;
					}
					#global-nav .sp_navi nav ul li .dropdown_menu.open{
					  display: block;
					  animation: none;
					}
					#global-nav .sp_navi nav ul li .dropdown_menu li + li {
					  margin-top: 25px;	
					}
					#global-nav .sp_navi nav ul li .dropdown_menu li{
						padding: 0;
						width: 100%;
						padding: 0px 20px 0px 52px;
					}
					#global-nav .sp_navi nav ul li .dropdown_menu li a{
						position: relative;
						font-size: 14px;
						border:none;
						padding: 0 0 0 14px;
					}
					#global-nav .sp_navi nav ul li .dropdown_menu li a:hover{
						opacity: 1;
					}
				}


			#global-nav .pc_navi .col_r{
			}
				header .head_links.for_sp{
					display: none;
				}
				header .head_links{
					display: flex;
					gap:10px;
				}
					header .head_links a{
						display: flex;
						align-items: flex-end;
						justify-content: center;
						font-size: 10px;
						font-weight: bold;
						width:70px;
						height: 70px;
						border-radius: 100px;
						padding-bottom: 12px;
						background-color: #fff;
						background-repeat: no-repeat;
						background-position: center 36%;
					}
					header .head_links a:hover {
						opacity: 1;
						color: var(--color-red);
					}
					header .head_links a.member {
						background-image: url(../../img/common/icon_member.svg);
					}
					header .head_links a.usces_login_a,
					header .head_links a.usces_logout_a{
						background-image: url(../../img/common/icon_login.svg);
					}
					header .head_links a.cart_info {
						position: relative;
						color: #fff;
						background-color: #000000;
						background-image: url(../../img/common/icon_cart.svg);
					}
					header .head_links a.cart_info:hover {
						background-color: var(--color-red);
					}
						header .cart_info .cart_num{
							position: absolute;
							top: -4px;
							right: -2px;
							display:inline-flex;
							align-items: center;
							justify-content: center;
							font-size: 13px;
							color:#fff;
							width:25px;
							height:25px;
							background: var(--color-red);
							border-radius: 100px;
						}
#nav-toggle {
	display: none;
}
#head-area .sp_navi {
    display: none
}
.wrap{
	margin: 160px auto 0;
}
@media screen and (max-width: 1250px) {
	#head-area .logo{
		width: 150px;
		padding: 0 15px;
	}
	#global-nav {
		width: calc(100% - 140px);
	}
		#global-nav .pc_navi .col_l nav ul li a{
			gap:5px;
			font-size: 11px;
		}
}
@media screen and (max-width: 1000px) {
	#head-area .inner{
		height: 60px;
		padding-right: 75px;
	}
	#head-area.moved .inner{
		height: 60px;
	}
		#head-area .logo{
			width: 100px;
			height: 60px;
			padding: 0 10px;
		}
			#head-area.moved .logo{
				width: 100px;
				height: 60px;
				padding: 0 10px;
			}
				#head-area .logo img{
					max-width: 100px;
				}
		header .head_links.for_sp{
			display: flex;
			margin: 0 0 0 auto;
		}
			header .head_links a{
				font-size: 8px;
				width:46px;
				height: 46px;
				padding-bottom: 10px;
				background-repeat: no-repeat;
				background-position: center 30%;
				background-size: 16px;
				padding-bottom: 7px;
			}
				header .cart_info .cart_num{
					top: -4px;
					right: -4px;
					font-size: 10px;
					width:20px;
					height:20px;
				}
	#nav-toggle {
	  display: block;
	  position: absolute;
	  z-index: 1000;
	  top: 0;
	  right: 0;
	  cursor: pointer;
	  width: 60px;
	  height: 60px;
	  background: var(--color-red)
	}
	#nav-toggle>div {
	  position: relative;
	  width: 30px;
	  margin: 0 auto
	}
	#nav-toggle span {
	  display: block;
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 1px;
	  background: #fff;
	  transition: top .5s ease,-webkit-transform .6s ease-in-out;
	  transition: transform .6s ease-in-out,top .5s ease;
	  transition: transform .6s ease-in-out,top .5s ease,-webkit-transform .6s ease-in-out
	}
	#nav-toggle span:nth-child(1) { top: 23px	}
	#nav-toggle span:nth-child(2) { top: 30px	}
	#nav-toggle span:nth-child(3) { top: 37px	}
	.open #nav-toggle span:nth-child(1) {
		top: 30px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}
	.open #nav-toggle span:nth-child(2) {
		top: 30px;
		width: 0;
		left: 50%
	}
	.open #nav-toggle span:nth-child(3) {
		top: 30px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}


	/* z-index ------*/
	#nav-toggle {
	  z-index: 1000;
	}
	#head-area .logo,
	#head-area .head_links.for_sp {
	  z-index: 1000;
	}
	.wrap {
	  z-index: 900;
	}
	/* z-index ------*/

	#global-nav .pc_navi{
		display: none;
	}
	#global-nav .sp_navi{
		display: block;
	}
	#global-nav {
		z-index: -1;
		width: 100%;
		background: var(--color-gray);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		text-align: center;
		visibility: hidden;
		opacity: 0;
		padding-top: 80px;
		overflow-y: auto;
	}
	#head-area.moved #global-nav {
		width: 100%;
	}
		#global-nav ul {
			flex-wrap: wrap;
			justify-content: center;
			margin-bottom: 35px;
			padding: 0 20px;
		}
			#global-nav ul li {
				width: 100%;
			}
			#global-nav ul li a{
				font-size: 15px;
				font-weight: bold;
				text-align: left;
				width: 100%;
				border-bottom: 1px solid #ddd;
				padding: 25px 25px;
			}
				#global-nav ul li a:hover{
					color: var(--color-red);
					opacity: 1;
				}
				#global-nav ul li a img{
					position: relative;
					top: 2px;
					margin-right: 10px;
				}
			#global-nav ul li:last-child a{
				border-top: 1px solid #ddd;
			}




		#global-nav .tel_wrap{
			text-align: center;
			width: 100%;
			margin-bottom: 15px;
		}
			#global-nav .tel_wrap .store_name{
				font-size: 13px;
				font-weight: bold;
				color: var(--color-red);
				line-height:140%;
				margin-bottom: 12px;
			}
			#global-nav .tel_wrap .tel {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				gap:20px;
				font-weight: bold;
				background: #fff;
				border-radius: 20px 20px 0 0;
				width: 90%;
				margin: 0 auto;
				padding: 10px 10px 20px;
			}
				#global-nav .tel_wrap .tel .label{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 11px;
					font-weight: bold;
					color: #fff;
					width:100%;
					height: 24px;
					border-radius: 100px;
					background: var(--color-red);
				}
				#global-nav .tel_wrap .tel .num{
					position: relative;
					top:2px;
					font-family: var(--font-spartan);
					font-size: 20px;
					font-weight: 700;
				}
				#global-nav .tel_wrap .tel .num svg{
					margin-right: 8px;
				}
			#global-nav .tel_wrap .contact_link {
				position: relative;
				font-size: 15px;
				font-weight: bold;
				letter-spacing: 1px;
				background: #fff;
				width: 90%;
				border-radius: 0 0 20px 20px;
				margin: 0 auto;
				padding: 20px 0 20px 0;
			}
			#global-nav .tel_wrap .contact_link::before {
				content: '';
				position: absolute;
				top: 0;
				left: calc(50% - 100px);
				width: 200px;
				height: 1px;
				background: #c8c8c8;
			}
				#global-nav .tel_wrap .contact_link svg{
					position: relative;
					top:1px;
					margin-right: 8px;
				}


	/* open */
	.open #head-area {
		position: fixed;
		top: 0;
		left: 0;
	}

	.open {
	   overflow-y: hidden!important;
	}

	.open #head-area .logo {
		position: relative;
	}
	.open #global-nav {
		transition: opacity .6s ease, visibility .6s ease;	
		visibility: visible;
		opacity: 1;
	}
	.open #global-nav li {
	  opacity: 1;
	}
	.wrap{
		margin-top: 60px;
	}
}

/* Bread crumbs -------------------------------------*/
.breadcrumbs_wrap{
	width: 100%;
	padding: 35px 20px;
}
	.breadcrumbs {
		font-size: 10px;
		font-weight: bold;
		line-height: 140%;
		width: 100%;
		max-width: 954px;
		margin: 0 auto;
	}
		.breadcrumbs .split{
			display: inline-block;
			width: 5px;
			height: 10px;
			background-image: url(../../img/common/split.svg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			margin: 0 10px;
		}
@media screen and (max-width: 767px) {
	.breadcrumbs_wrap{
		padding: 15px 20px 14px;
	}
		.breadcrumbs {
			font-size: 10px;
		}
}

/* pagetop ------------------------------------------*/
.pagetop{
	display: none;
}
.pagetop a{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 30px;
	right: 20px;
	z-index: 999;
}
.pagetop a img{
	width: 100%;
}


/* fixed_shipping ------------------------------------------*/
.fixed_shipping{
	position: relative;
	z-index: 998;
	display: none;
}
	.fixed_shipping a {
		position: fixed;
		right: 0;
		z-index: 999;
		width: 72px;
	}
	.fixed_shipping a.shipping {
		top: 150px;
	}
	.fixed_shipping a.naisou {
		top: 394px;
	}
	.fixed_shipping a.original {
		top: 638px;
	}

	.fixed_shipping a img{
		position: relative;
		width: 100%;
		transition: .5s;
	}
	.fixed_shipping a img.off {
		z-index: 2;
	}
	.fixed_shipping a img.on {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.fixed_shipping a:hover {
		opacity: 1;
	}
	.fixed_shipping a:hover img.off{
		opacity: 0;
	}
@media screen and (max-width: 767px) {
	/*
	.fixed_shipping a {
		top: 100px;
		width: 41px;
	}
	*/
	.fixed_shipping {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100%;
	}
	.fixed_shipping .sp{
		display: flex!important;
	}
	.fixed_shipping a {
		position: relative;
		top: unset!important;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		font-weight: bold;
		color: #fff;
		letter-spacing: 1px;
		line-height: 1.4;	
		height: 70px;
	}
	.fixed_shipping a svg {
		margin-left: 4px;
	}
	.fixed_shipping a.shipping {
		width: 24%;
		background: #cb1e1e;
	}
	.fixed_shipping a.naisou {
		width: 38%;
		background: #4260a6;
	}
	.fixed_shipping a.original {
		width: 38%;
		background: #f3af1d;
	}


}


/* footer ------------------------------------------*/
footer {
	background: var(--color-red);
	margin-top: 150px;
	padding: 65px 20px 60px;
}
.top footer {
	margin-top: 0;
}
footer .inner{
	max-width: 485px;
	margin: 0 auto;
}
footer .footer_logo{
	text-align: center;
	margin-bottom: 40px;
}
	footer .footer_logo a img{
		width: 164px;
	}
footer .footer_links{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 30px;
	margin-bottom: 28px;
	margin-bottom: 55px;
}
	footer .footer_links li a{
		font-size: 11px;
		font-weight: bold;
		color: #fff;
	}
footer .bn_area{
	justify-content: center;
	gap: 30px;
	margin-bottom: 40px;
}
	footer .bn_area a img{
		width: 100%;
		max-width: 336px;
	}

footer .flex_btm{
	align-items: center;
	justify-content: space-between;	
	gap:20px;
}
footer .flex_btm .link_btns{
	display: inline-flex;
	gap:15px;
}
	footer .flex_btm .link_btns a{
		display: flex;
		align-items: center;
		font-size: 10px;
		color: #fff;
		border:1px solid #fff;
		border-radius: 100px;
		height: 24px;
		padding: 2px 12px; 
	}
	footer .flex_btm .link_btns a:hover{
		opacity: 1;
		color: var(--color-red);
		background: #fff;
	}
	footer .copyright{
		font-family: 'Spartan', sans-serif;
		font-size: 8px;
	}
		footer .copyright .txt{
			font-size:9px;
			font-weight:bold;
			letter-spacing:1px;
			text-align:right;
			margin-top:5px;
		}
@media screen and (max-width: 767px) {
	footer {
		padding: 60px 20px 70px;
	}
	footer .footer_logo{
		margin-bottom: 50px;
	}
		footer .footer_logo a img{
			width: 150px;
		}
		footer .footer_logo .description{
			font-size: 12px;
		}
	footer .footer_links{
		gap: 30px 20px;
		margin-bottom: 50px;
	}
		footer .footer_links li {
			width: calc(50% - 15px);
		}
			footer .footer_links li a{
				font-size: 12px;
			}
	footer .bn_area{
		gap: 10px;
	}
	footer .flex_btm{
		flex-wrap: wrap;
		justify-content: center;
		gap:20px;
	}
	footer .flex_btm .link_btns{
		display: inline-flex;
		gap:20px;
	}
		footer .copyright .txt{
			text-align:center;
		}
}