@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	common
	header
	menu
	title
	path
	contents
	main
	aside
	footer
------------------------------------------------------------------------ */


/* ========================================================================
	common
======================================================================== */
@media print, screen and (min-width:768px){
body{
	min-width:1260px;
}

.sp{
	display:none;
}

.inner{
	position:relative;
	max-width:1690px;
	margin:0 auto;
	padding:0 50px;
}

a img, button img{ transition-duration:0.2s; }
a:hover img, button:hover img{ opacity:0.8; }
}

@media screen and (max-width:767px){
body{
	min-width:320px;
	font-size:1.6rem;
}

.pc{
	display:none;
}

.inner{
	position:relative;
	padding:0 20px;
}
}


/* ========================================================================
	header
======================================================================== */
header h1,
header .logo{
	padding:30px 0;
}

header h1 a,
header .logo a{
	display:inline-block;
	vertical-align:bottom;
	font-size:1.8rem;
	line-height:1;
	text-decoration:none;
}

header h1 span,
header .logo span{
	display:block;
	padding:0 0 18px 4px;
}

@media screen and (max-width:767px){
header h1,
header .logo{
	padding:10px 0;
}

header h1 a,
header .logo a{
	font-size:1.2rem;
}

header h1 span,
header .logo span{
	padding:0 0 8px 2px;
}

header h1 img,
header .logo img{
	width:auto;
	height:40px;
}
}


/* ========================================================================
	menu
======================================================================== */
#menu .switch{
	display:none;
}

@media screen and (max-width:767px){
#menu .switch{
	display:block;
	position:fixed;
	top:0;
	right:0;
	width:60px;
	height:60px;
	background:#a81b11;
	cursor:pointer;
	z-index:30;
}

#menu .switch span{
	display:none;
}

#menu .switch::before,
#menu .switch.close::before,
#menu .switch.close::after{
	content:"";
	display:block;
	position:relative;
	top:50%;
	left:50%;
	transform:translateX(-50%);
	width:20px;
	height:1px;
	background:#ffffff;
	box-shadow:0 -6px 0 0 #ffffff, 0 6px 0 0 #ffffff;
	transition-duration:0.2s;
}
#menu .switch.close::before{
	box-shadow:none;
	transform:translateX(-50%) rotate(45deg);
}
#menu .switch.close::after{
	top:calc(50% - 1px);
	box-shadow:none;
	transform:translateX(-50%) rotate(-45deg);
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
#menu .menu a{
	text-decoration:none;
}

@media screen and (max-width:767px){
#menu .menu{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:70px 40px 40px;
	background:#ffffff;
	z-index:20;
}
}


/* gnavi
---------------------------------------- */
#menu .menu .gnavi{
	display:flex;
	gap:0 28px;
	position:absolute;
	top:76px;
	left:448px;
}

#menu .menu .gnavi a{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	height:44px;
}

#menu .menu .gnavi a::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:2px;
	background:transparent;
	transition-duration:0.2s;
}
#menu .menu .gnavi a:hover::before{ background:#1a304d; }

@media print, screen and (min-width:768px) and (max-width:1580px){
#menu .menu .gnavi{
	top:86px;
	left:auto;
	right:50px;
}
}

@media screen and (max-width:767px){
#menu .menu .gnavi{
	display:block;
	position:static;
	padding:0 0 20px 0;
}

#menu .menu .gnavi a{
	height:38px;
	margin:0 0 10px 0;
	font-size:1.8rem;
}
#menu .menu .gnavi a::before{ content:none; }
}


/* navi
---------------------------------------- */
#menu .menu .navi{
	display:flex;
	position:absolute;
	top:80px;
	right:50px;
	gap:0 20px;
}

#menu .menu .navi li{
	position:relative;
}

#menu .menu .navi a{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:44px;
	height:44px;
	border:1px solid #000000;
	border-radius:50%;
}
#menu .menu .navi a:hover{
	background:#000000;
}
#menu .menu .navi a:hover img{
	filter:brightness(0) invert(1);
	opacity:1;
}

#menu .menu .navi a span{
	position:absolute;
	top:-4px;
	right:-4px;
	width:18px;
	padding:2px 0 4px 0;
	background:#a81b11;
	border-radius:50%;
	text-align:center;
	font-size:1.2rem;
	color:#ffffff;
	line-height:1;
}

#menu .menu .navi .cart img{
	margin-top:4px;
}

@media print, screen and (min-width:768px) and (max-width:1580px){
#menu .menu .navi{
	top:30px;
}
}

@media screen and (max-width:767px){
#menu .menu .navi{
	flex-wrap:wrap;
	justify-content:center;
	gap:20px;
	position:static;
}
#menu .menu .navi a:hover{ background:#ffffff; }
#menu .menu .navi a:hover img{ filter:none; }
}


/* ---------- balloon ---------- */
#menu .menu .navi .balloon{
	display:none;
	position:absolute;
	bottom:-59px;
	right:0;
	padding:15px 20px;
	background:#ffffff;
	filter:drop-shadow(0 0 8px rgba(0,0,0,0.2));
	font-size:1.8rem;
	line-height:1;
	white-space:nowrap;
	z-index: 5;
}

#menu .menu .navi .balloon::before{
	content:"";
	position:absolute;
	top:-10px;
	right:18px;
	border-style:solid;
	border-width:0 4px 10px 4px;
	border-color:transparent transparent #ffffff transparent;
}


/* ---------- search ---------- */
#menu .menu .navi .search{
	position:relative;
}

#menu .menu .navi .search input{
	width:292px;
	height:44px;
	padding:0 56px 0 20px;
	background:#ffffff;
	border:1px solid #000000;
	border-radius:22px;
	font-size:1.8rem;
	letter-spacing:-0.05em;
}

#menu .menu .navi .search button{
	position:absolute;
	top:9px;
	right:15px;
	line-height:1;
}

@media screen and (max-width:767px){
#menu .menu .navi .search{
	position:relative;
	width:100%;
}

#menu .menu .navi .search input{
	width:100%;
	font-size:1.6rem;
}
}


/* ========================================================================
	title
======================================================================== */
#title{
	background:url(../../img/common/bg_title.png) no-repeat center;
	background-size:cover;
}

#title h1{
	display:flex;
	align-items:center;
	height:420px;
	max-width:1690px;
	margin:0 auto;
	padding:0 100px;
	font-size:4.2rem;
	color:#ffffff;
}

@media screen and (max-width:767px){
#title{
	background:url(../../img/common/bg_title.png) no-repeat center top #000000;
	background-size:100% auto;
}

#title h1{
	height:auto;
	max-width:none;
	padding:30px 20px;
	font-size:3.0rem;
	line-height:5.0rem;
}
}


/* ========================================================================
	path
======================================================================== */
#path{
	display:flex;
	flex-wrap:wrap;
	max-width:1690px;
	margin:0 auto;
	padding:30px 50px;
}

#path li{
	display:flex;
	font-size:1.8rem;
	line-height:3.8rem;
}

#path li::after{
	content:"＞";
	margin:0 0.5em;
}
#path li:last-child::after{ content:none; }

#path li a{
	display:block;
}

@media screen and (max-width:767px){
#path{
	max-width:none;
	padding:10px 20px 30px;
}

#path li{
	font-size:1.6rem;
	line-height:3.6rem;
}
}


/* ========================================================================
	contents
======================================================================== */
#contents{
	display:flex;
	gap:0 45px;
	max-width:1690px;
	margin:0 auto;
	padding:0 50px;
}

#contents main{
	order:2;
	flex:1;
}

#contents aside{
	order:1;
	width:clamp(288px, 22.4852vw, 380px);
}

#contents .inner{
	max-width:none;
	padding:0;
}

@media screen and (max-width:767px){
#contents{
	display:block;
	max-width:none;
	padding:0 20px;
}

#contents aside{
	width:auto;
}
}


/* ----------------------------------------
	home
---------------------------------------- */
#contents.homepage{
	max-width:none;
	padding:0;
}

#contents.homepage .inner{
	max-width:1690px;
	padding:0 50px;
}

@media screen and (max-width:767px){
#contents.homepage .inner{
	max-width:none;
	padding:0 20px;
}
}


/* ========================================================================
	main
======================================================================== */
main{
	overflow:hidden;
	padding:0 0 40px 0;
}

main > div,
main .section{
	padding:0 0 80px 0;
}

#main_top,
#main_bottom,
main .section:last-of-type{
	padding:0;
}

main p{
	margin:0 0 60px 0;
}

main iframe{
	width:100%;
	margin:0 0 60px 0;
}

@media screen and (max-width:767px){
main,
main .section{
	padding:0 0 20px 0;
}

main > div{
	padding:0 0 40px 0;
}

main p{
	margin:0 0 40px 0;
	line-height:2.6rem;
}

main iframe{
	width:100%;
	margin:0 0 40px 0;
}
}


/* ----------------------------------------
	table
---------------------------------------- */
main table{
	margin:0 0 60px 0;
	border-top:1px solid #cecece;
}

main table tr{
	border-bottom:1px solid #cecece;
}

main table th{
	width:clamp(220px, 17.8625vw, 300px);
	padding:24px 40px;
	background:#f3f3f3;
	text-align:center;
	font-weight:700;
}

main table td{
	padding:24px 40px;
}

@media screen and (max-width:767px){
main table{
	margin:0 0 40px 0;
	line-height:2.6rem;
}

main table tr{
	border-bottom:none;
}

main table th,
main table td{
	display:block;
	width:auto;
	padding:10px 20px;
}
main table td{
	padding:20px;
	border-bottom:1px solid #cecece;
}
}


/* ========================================================================
	aside
======================================================================== */
aside{
	padding:0 0 90px 0;
}

@media screen and (max-width:767px){
aside{
	padding:0 0 20px 0;
}
}


/* ----------------------------------------
	cart
---------------------------------------- */
aside .cart{
	margin:0 0 50px 0;
	text-align:center;
}

aside .cart dt{
	padding:15px 0;
	background:#000000;
	font-size:2.4rem;
	font-weight:700;
	color:#ffffff;
	line-height:3.4rem;
}

aside .cart dd a{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	height:64px;
	background:#ffffff;
	border:1px solid #000000;
	font-weight:500;
	text-decoration:none;
}
aside .cart dd a:hover{ opacity:0.8; }

aside .cart dd a::before{
	content:"";
	position:absolute;
	top:0;
	right:28px;
	width:22px;
	height:100%;
	background:url(../../img/common/arrow_02.png) no-repeat center;
	background-size:100%;
}

@media screen and (max-width:767px){
aside .cart{
	margin:0 0 40px 0;
}

aside .cart dt{
	font-size:2.0rem;
	line-height:3.0rem;
}

aside .cart dd a{
	height:60px;
	font-size:1.8rem;
}
}


/* price
---------------------------------------- */
aside .cart .price{
	display:flex;
	justify-content:center;
	align-items:center;
	height:86px;
	background:#f8efea;
	font-size:2.4rem;
	font-weight:500;
	line-height:1;
	letter-spacing:0.05em;
}

aside .cart .price > span{
	position:relative;
	margin:0 18px 0 0;
}

aside .cart .price span span{
	position:absolute;
	top:-4px;
	right:-4px;
	width:18px;
	padding:2px 0 4px 0;
	background:#a81b11;
	border-radius:50%;
	text-align:center;
	font-size:1.2rem;
	color:#ffffff;
	line-height:1;
}

@media screen and (max-width:767px){
aside .cart .price{
	height:80px;
}
}


/* ----------------------------------------
	cat
---------------------------------------- */
aside .cat{
	padding:0 0 50px 0;
}

aside .cat > li{
	border-top:1px solid #cecece;
}

aside .cat > li > a,
aside .cat > li > span{
	display:block;
	position:relative;
	padding:23px 0;
	font-size:2.8rem;
	line-height:3.8rem;
	text-decoration:none;
}
aside .cat > li > a:hover{ opacity:0.8; }

aside .cat > li > a::before{
	content:"";
	position:absolute;
	top:0;
	right:0;
	width:22px;
	height:100%;
	background:url(../../img/common/arrow_02.png) no-repeat center;
	background-size:100%;
}

aside .cat ul{
	margin:-12px 0 16px 0;
}

aside .cat ul li a{
	display:block;
	position:relative;
	margin:0 0 0 8px;
	padding:7px 0 7px 22px;
	line-height:3.0rem;
	text-decoration:none;
}
aside .cat ul li a:hover{ text-decoration:underline; }

aside .cat ul li a::before{
	content:"";
	position:absolute;
	top:22px;
	left:0;
	width:10px;
	height:1px;
	background:#000000;
}

@media screen and (max-width:767px){
aside .cat{
	margin:0 0 40px 0;
	padding:0;
	border-bottom:1px solid #cecece;
}

aside .cat > li > a,
aside .cat > li > span{
	padding:15px 0;
	font-size:2.0rem;
	line-height:3.0rem;
}

aside .cat ul{
	margin:-10px 0 15px 0;
}

aside .cat ul li a{
	padding:5px 0 5px 22px;
	line-height:2.6rem;
}

aside .cat ul li a::before{
	top:17px;
}
}


/* ----------------------------------------
	bnr
---------------------------------------- */
aside .bnr{
	padding:0 0 20px 0;
}

aside .bnr li{
	margin:0 0 30px 0;
}

@media screen and (max-width:767px){
aside .bnr li{
	margin:0 0 20px 0;
	text-align:center;
}

aside .bnr li img{
	width:300px;
}
}


/* ========================================================================
	footer
======================================================================== */
footer{
	background:#000000;
	color:#ffffff;
}

footer .inner{
	display:flex;
}

footer .inner > *{
	width:33.33%;
}

footer small{
	display:block;
	padding:0 0 28px 0;
	text-align:center;
	font-size:1.6rem;
	line-height:1;
}

@media screen and (max-width:767px){
footer .inner{
	display:block;
}

footer .inner > *{
	width:auto;
}

footer small{
	padding:0 20px 16px;
	font-size:1.2rem;
	line-height:2.0rem;
}
}


/* ----------------------------------------
	guide
---------------------------------------- */
footer .guide{
	padding:34px 0;
	background:#eae3db;
}

footer .guide dl{
	position:relative;
	padding:0 20px 0 106px;
	color:#222222;
}
footer .guide dl:first-child{ padding-left:86px; }
footer .guide dl:last-child{ padding-right:0; }

footer .guide dl::before{
	content:"";
	position:absolute;
	top:50%;
	left:0;
	width:1px;
	height:80px;
	background:#535353;
	transform:translateY(-50%);
}
footer .guide dl:first-child::before{ content:none; }

footer .guide dl dt{
	margin:0 0 6px 0;
	font-size:2.0rem;
	font-weight:500;
}

footer .guide dl dt img{
	position:absolute;
	top:50%;
	left:20px;
	transform:translateY(-50%);
}
footer .guide dl:first-child dt img{ left:0; }

footer .guide dl dd{
	font-size:1.5rem;
}

@media screen and (max-width:767px){
footer .guide{
	padding:10px 0;
}

footer .guide dl{
	padding:20px 0;
	border-top:1px solid #535353;
}
footer .guide dl:first-child{
	padding:20px 0;
	border:none;
}
footer .guide dl::before{ content:none; }

footer .guide dl dt{
	display:flex;
	align-items:center;
	margin:0 0 10px 0;
	font-size:1.8rem;
	line-height:2.8rem;
}

footer .guide dl dt img{
	position:static;
	width:40px;
	margin:0 15px 0 0;
	transform:none;
}

footer .guide dl dd{
	font-size:1.4rem;
	line-height:2.4rem;
}
}


/* ----------------------------------------
	foot
---------------------------------------- */
footer .foot{
	padding:60px 0 78px 0;
}

footer .foot .inner > *{
	display:flex;
	border-left:1px solid #535353;
}

@media screen and (max-width:767px){
footer .foot{
	padding:10px 0;
}

footer .foot .inner > *{
	border-left:none;
	border-top:1px solid #535353;
}
}


/* company
---------------------------------------- */
footer .foot .company{
	justify-content:flex-end;
	padding:0 clamp(60px, 4.7337vw, 80px) 0 clamp(30px, 2.3668vw, 40px);
	border:none;
}

footer .foot .company .block{
	display:flex;
	flex-direction:column;
	justify-content:center;
}

footer .foot .company .logo{
	padding:0 0 18px 0;
}

footer .foot .company address{
	font-size:clamp(1.5rem, 1.1834vw, 2.0rem);
	line-height:1.7;
}

@media screen and (max-width:767px){
footer .foot .company{
	justify-content:center;
	padding:30px 0;
}

footer .foot .company .logo img{
	width:240px;
}

footer .foot .company address{
	font-size:1.6rem;
	line-height:2.6rem;
}
}


/* menu
---------------------------------------- */
footer .foot .menu{
	display:block;
}

footer .foot .menu nav{
	display:flex;
	justify-content:space-between;
	padding:15px clamp(40px, 2.9585vw, 50px);
}

footer .foot .menu a{
	display:inline-block;
	font-size:clamp(1.4rem, 1.0650vw, 1.8rem);
	color:#ffffff;
	line-height:2.1111;
	text-decoration:none;
}
footer .foot .menu a:hover{ text-decoration:underline; }

@media screen and (max-width:767px){
footer .foot .menu nav{
	justify-content:center;
	gap:0 30px;
	padding:30px 0 18px 0;
}

footer .foot .menu ul li{
	line-height:1;
}

footer .foot .menu a{
	margin:0 0 12px 0;
	vertical-align:bottom;
	font-size:1.4rem;
	line-height:2.2rem;
}
}


/* order
---------------------------------------- */
footer .foot .order{
	padding:0 clamp(30px, 2.3668vw, 40px) 0 clamp(60px, 4.7337vw, 80px);
}

footer .foot .order dl{
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
	line-height:1;
}

footer .foot .order dl dt{
	margin:0 0 30px 0;
	font-size:clamp(2.2rem, 1.7751vw, 3.0rem);
}

footer .foot .order dl dd{
	font-size:clamp(1.5rem, 1.1834vw, 2.0rem);
}

footer .foot .order dl dd a{
	display:inline-block;
	margin:0 0 30px 0;
	font-size:clamp(3.6rem, 2.8402vw, 4.8rem);
	color:#ffffff;
	text-decoration:none;
}

footer .foot .order dl dd img{
	width:clamp(34px, 2.7218vw, 46px);
	margin:0 24px 0 0;
	vertical-align:top;
	opacity:1;
}

footer .foot .order dl dd span{
	font-size:clamp(1.2rem, 0.9467vw, 1.6rem);
}

@media screen and (max-width:767px){
footer .foot .order{
	justify-content:center;
	padding:30px 0;
}

footer .foot .order dl dt{
	margin:0 0 20px 0;
	font-size:2.0rem;
}

footer .foot .order dl dd{
	font-size:1.4rem;
}

footer .foot .order dl dd a{
	margin:0 0 20px 0;
	font-size:3.6rem;
}

footer .foot .order dl dd img{
	width:34px;
	margin:0 15px 0 0;
}

footer .foot .order dl dd span{
	font-size:1.2rem;
}
}