@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	h要素（見出し）
	paging（ページング）
	widget_btn（ボタン）
	widget_img（画像）
	widget_faq（FAQ）
	list_product（一覧：商品）
	list_cat（一覧：カテゴリー）
	content_pickup（コンテンツ：ピックアップ）
	content_ranking（コンテンツ：人気ランキング）
	content_limited（コンテンツ：期間限定商品）
	content_shop（コンテンツ：お店紹介）
	EC-CUBE（追加分）
------------------------------------------------------------------------ */

/* ========================================================================
	h要素（見出し）
======================================================================== */
main h2{
	margin:0 0 60px 0;
	text-align:center;
	font-size:5.0rem;
	line-height:7.0rem;
}

main h2 span{
	display:block;
	margin:5px 0 0 0;
	font-size:2.0rem;
	color:#a81b11;
	line-height:3.0rem;
}

main h3,
.h_01{
	position:relative;
	margin:0 0 40px 0;
	padding:0 0 22px 0;
	border-bottom:1px solid #cecece;
	text-align:left;
	font-size:3.8rem;
	line-height:5.4rem;
}

main h3::before,
.h_01::before{
	content:"";
	position:absolute;
	bottom:-1px;
	left:0;
	width:100px;
	height:1px;
	background:#ba8b17;
}

@media screen and (max-width: 767px) {
main h2{
	margin:0 0 40px 0;
	font-size:2.8rem;
	line-height:4.8rem;
}

main h2 span{
	font-size:1.4rem;
	line-height:2.4rem;
}

main h3,
.h_01{
	margin:0 0 20px 0;
	padding:0 0 15px 0;
	font-size:2.4rem;
	line-height:3.4rem;
}

main h3::before,
.h_01::before{
	width:50px;
}
}


/* ----------------------------------------
	h_vertical
---------------------------------------- */
.h_vertical{
	position:relative;
	margin:0;
	padding:0;
	border:none;
	text-align:left;
	font-size:4.2rem;
	line-height:7.2rem;
	letter-spacing:0.05em;
	writing-mode:vertical-rl;
	white-space:nowrap;
}

.h_vertical::before{
	content:"";
	position:absolute;
	bottom:auto;
	top:-130px;
	left:50%;
	width:1px;
	height:110px;
	background:#000000;
}

.h_vertical span{
	display:inline;
	margin:0;
	font-size:4.2rem;
	color:#a81b11;
}

@media screen and (max-width:767px){
.h_vertical{
	margin:0 0 30px 0;
	padding:0 0 0 60px;
	font-size:2.4rem;
	line-height:4.4rem;
	writing-mode:horizontal-tb;
	white-space:normal;
}

.h_vertical::before{
	bottom:auto;
	top:50%;
	left:0;
	width:40px;
	height:1px;
}

.h_vertical span{
	font-size:2.4rem;
}
}


/* ========================================================================
	paging（ページング）
======================================================================== */
.paging{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:20px;
	margin:0 0 200px 0;
	font-weight:500;
}

.paging span.dots{
	display:flex;
	align-items:center;
	height:50px;
	margin:0 10px;
	line-height:1;
}

.paging span.current,
.paging a{
	display:flex;
	justify-content:center;
	align-items:center;
	width:50px;
	height:50px;
	background:#eff1f3;
	color:#1c375f;
	line-height:1;
	text-decoration:none;
}
.paging span.current,
.paging a:hover{ background:#1c375f; color:#ffffff; }

@media screen and (max-width:767px){
.paging{
	gap:20px 10px;
	margin:0 0 60px 0;
}

.paging span.dots{
	height:40px;
	margin:0;
}

.paging span.current,
.paging a{
	width:40px;
	height:40px;
}
}


/* ========================================================================
	widget_btn / ec-off4Grid__cell（ボタン）
======================================================================== */
.widget_btn{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:40px;
	margin:0 auto 60px;
}

.widget_btn > *{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	min-width:330px;
	min-height:60px;
	padding:15px 50px 15px 40px;
	background:#ffffff;
	border:1px solid #000000;
	border-radius:44px;
	font-weight:400;
	color:#222222;
	line-height:2.8rem;
	text-decoration:none;
	transition-duration:0.2s;
}

.widget_btn .ec-blockBtn--action,
.widget_btn .ec-blockBtn--cancel{
	width:auto;
	height:auto;
	margin:0;
}

.widget_btn > *::before{
	content:"";
	position:absolute;
	top:0;
	right:18px;
	width:22px;
	height:100%;
	background:url(../../img/common/arrow_01.png) no-repeat center;
	background-size:100%;
	transition-duration:0.2s;
}

.widget_btn > *:hover{
	background:#000000;
	color:#ffffff;
}
.widget_btn > *:hover::before{
	filter:brightness(0) invert(1);
}

@media screen and (max-width:767px){
.widget_btn{
	gap:20px;
	margin:0 0 40px 0;
}

.widget_btn > *{
	min-width:auto;
	width:100%;
	padding:10px 42px 10px 32px;
	font-size:1.8rem;
	line-height:2.6rem;
}

.widget_btn .ec-blockBtn--action,
.widget_btn .ec-blockBtn--cancel{
	width:100%;
}

.widget_btn > *::before{
	width:14px;
}
}


/* ========================================================================
	widget_img（画像）
======================================================================== */
.widget_img{
	margin:0 0 60px 0;
	text-align:center;
}

.widget_img > img{
	border:1px solid #e6e6e6;
}

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


/* ========================================================================
	widget_faq（FAQ）
======================================================================== */
.widget_faq{
	padding:0 0 50px 0;
}

.widget_faq dl{
	margin:0 0 10px 0;
	padding:8px 30px;
	background:#fbf6f2;
	letter-spacing:0.025em;
}

.widget_faq dl dt{
	position:relative;
	padding:18px 20px 18px 74px;
	border-bottom:1px solid #cecece;
	font-weight:700;
}

.widget_faq dl dd{
	position:relative;
	padding:18px 20px 18px 74px;
}

.widget_faq dl dt::before,
.widget_faq dl dd::before{
	content:"";
	position:absolute;
	top:0;
	left:18px;
	width:38px;
	height:100%;
	background:url(../../img/common/icon_q.png) no-repeat center 19px;
}
.widget_faq dl dd::before{ background-image:url(../../img/common/icon_a.png) }

@media screen and (max-width: 767px) {
.widget_faq{
	padding:0 0 30px 0;
}

.widget_faq dl{
	padding:8px 20px;
	line-height:2.6rem;
}

.widget_faq dl dt,
.widget_faq dl dd{
	padding:15px 0 15px 40px;
}

.widget_faq dl dt::before,
.widget_faq dl dd::before{
	left:0;
	width:30px;
	background-position:center 15px;
	background-size:100%;
}
.widget_faq dl dd::before{ background-image:url(../../img/common/icon_a.png) }
}


/* ========================================================================
	list_product（一覧：商品）
======================================================================== */
.list_product{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:60px 28px;
	margin:0 0 140px 0;
}

.list_product a{
	display:block;
	position:relative;
	text-decoration:none;
}

.list_product a > span{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	left:0;
	min-width:34px;
	height:34px;
	background:#b58300;
	font-weight:500;
	color:#ffffff;
	line-height:1;
	z-index:1;
}
.list_product a > span.num{ background:#898989; }
.list_product li:nth-child(1) a > span.num{ background:#ffc32f; }
.list_product li:nth-child(2) a > span.num{ background:#cecece; }
.list_product li:nth-child(3) a > span.num{ background:#be5e12; }

.list_product a > span.txt{
	padding:0 13px;
	font-size:1.8rem;
}

.list_product a > img{
	display:block;
	margin:0 auto 16px;
	border:1px solid #cecece;
}

@media screen and (max-width:767px){
.list_product{
	grid-template-columns:repeat(2,1fr);
	gap:40px 20px;
	margin:0 0 40px 0;
}

.list_product a > span{
	min-width:30px;
	height:30px;
}

.list_product a > span.txt{
	padding:0 10px;
	font-size:1.4rem;
}

.list_product a > img{
	width:100%;
}
}


/* ----------------------------------------
	cat
---------------------------------------- */
.list_product .cat{
	padding:0 0 6px 0;
	font-size:1.8rem;
	color:#b68400;
	line-height:2.6rem;
}

@media screen and (max-width:767px){
.list_product .cat{
	padding:0 0 10px 0;
	font-size:1.6rem;
	line-height:2.4rem;
}
}


/* ----------------------------------------
	name
---------------------------------------- */
.list_product .name{
	padding:0 0 12px 0;
	font-size:2.2rem;
	line-height:3.0rem;
}

@media screen and (max-width:767px){
.list_product .name{
	padding:0 0 10px 0;
	font-size:1.8rem;
	line-height:2.6rem;
}
}


/* ----------------------------------------
	price
---------------------------------------- */
.list_product .price{
	line-height:2.8rem;
}

.list_product .price span{
	font-size:1.3rem;
}

@media screen and (max-width:767px){
.list_product .price{
	line-height:2.4rem;
}

.list_product .price span{
	font-size:1.2rem;
}
}


/* ========================================================================
	list_cat（一覧：カテゴリー）
======================================================================== */
.list_cat{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:50px;
}

.list_cat a{
	display:block;
	text-decoration:none;
}

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

.list_cat li{
	display:flex;
	justify-content:center;
	padding:0 0 20px 0;
}

.list_cat a{
	max-width:400px;
}
}


/* ----------------------------------------
	img
---------------------------------------- */
.list_cat .img{
	max-width:400px;
	border:1px solid #cecece;
	transition-duration:0.2s;
}
.list_cat a:hover .img{ opacity:0.8; }

.list_cat .img img{
	opacity:1;
}

.list_cat .img span{
	display:block;
	position:relative;
	padding:8px 42px 7px;
	background:#a81b11;
	text-align:center;
	font-size:2.4rem;
	color:#ffffff;
	line-height:3.0rem;
}

.list_cat .img span::before{
	content:"";
	position:absolute;
	top:0;
	right:15px;
	width:22px;
	height:100%;
	background:url(../../img/common/arrow_01.png) no-repeat center;
	background-size:100%;
	filter:brightness(0) invert(1);
}

@media screen and (max-width:767px){
.list_cat .img span{
	padding:6px 34px;
	font-size:2.0rem;
	line-height:2.8rem;
}

.list_cat .img span::before{
	right:10px;
	width:14px;
}
}


/* ----------------------------------------
	txt
---------------------------------------- */
.list_cat .txt{
	padding:10px 0 0 0;
	font-size:1.8rem;
	line-height:3.0rem;
}

@media screen and (max-width:767px){
.list_cat .txt{
	font-size:1.6rem;
	line-height:2.6rem;
}
}


/* ========================================================================
	content_pickup（コンテンツ：ピックアップ）
======================================================================== */
.content_pickup{
	padding:0 0 140px 0;
}

.content_pickup ul{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:35px;
}

.content_pickup ul li a{
	display:block;
	text-decoration:none;
}

.content_pickup ul li span{
	display:block;
	margin:24px 0 0 0;
	font-size:1.8rem;
	line-height:3.0rem;
}

@media screen and (max-width:767px){
.content_pickup{
	padding:0 0 60px 0;
}

.content_pickup ul{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:20px;
}

.content_pickup ul li span{
	margin:10px 0 0 0;
	font-size:1.4rem;
	line-height:2.4rem;
}
}


/* ========================================================================
	content_ranking（コンテンツ：人気ランキング）
	content_limited（コンテンツ：期間限定商品）
======================================================================== */
.content_ranking .list_product li:nth-child(5),
.content_limited .list_product li:nth-child(5){
	display:none;
}

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


/* ========================================================================
	content_shop（コンテンツ：お店紹介）
======================================================================== */
.content_shop ul{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:35px;
	max-width:1165px;
	margin:0 auto 140px;
}

.content_shop a{
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	position:relative;
	height:260px;
	background:#000000;
	border:1px solid #e6e6e6;
	color:#ffffff;
	text-decoration:none;	
}
.content_shop a:hover{ opacity:0.8; }

.content_shop a > img{
	position:absolute;
	top:-24px;
	left:50%;
	max-width:none;
	opacity:0.6;
	transform:translateX(-50%);
}

.content_shop dl{
	display:flex;
	flex-direction:column-reverse;
	gap:25px 0;
	position:relative;
	text-align:center;
}

.content_shop dl dt{
	font-size:4.2rem;
	line-height:1;
}

.content_shop dl dd{
	font-size:2.2rem;
	font-weight:700;
}

@media screen and (max-width:767px){
.content_shop ul{
	display:block;
	max-width:none;
	margin:0 auto 20px;
}

.content_shop ul li{
	padding:0 0 20px 0;
}

.content_shop a{
	height:auto;
}

.content_shop a > img{
	position:static;
	width:100%;
	transform:none;
}

.content_shop dl{
	gap:20px 0;
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	padding:0 10px;
	text-align:center;
	transform:translate(-50%,-50%);
}

.content_shop dl dt{
	font-size:3.0rem;
}

.content_shop dl dd{
	font-size:1.8rem;
	line-height:2.8rem;
}
}


/* ========================================================================
	EC-CUBE（追加分）
======================================================================== */
.ec-select select{
	margin:0 0 20px 0;
}

@media screen and (max-width:767px){
.ec-select select{
	margin:0 0 10px 0;
}
}


/* ----------------------------------------
	ec-pager（ページング）
---------------------------------------- */
.ec-pager{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:20px;
	margin:0 0 60px 0;
	text-align:center;
	line-height:4.0rem;
}

.ec-pager li a{
	display:block;
	padding:0 15px;
	background:#ffffff;
	border:1px solid #000000;
	text-decoration:none;
}
.ec-pager .ec-pager__item--active a,
.ec-pager a:hover{ background:#000000; color:#ffffff; }

@media screen and (max-width:767px){
.ec-pager{
	gap:20px 10px;
	margin:0 0 40px 0;
	padding:20px 0 0 0;
	line-height:3.6rem;
}

.ec-pager li a{
	padding:0 14px;
}
}


/* ----------------------------------------
	ec-borderedDefs（表）
---------------------------------------- */
.ec-borderedDefs{
	margin:0 0 60px 0;
	border-top:1px solid #cecece;
}

.ec-borderedDefs dl{
	display:table;
	width:100%;
	border-bottom:1px solid #cecece;
}

.ec-borderedDefs dl dt{
	display:table-cell;
	width:clamp(220px, 17.8625vw, 300px);
	padding:24px 40px;
	background:#f3f3f3;
	text-align:center;
	vertical-align:middle;
	font-weight:700;
}

.ec-borderedDefs dl dt .ec-label{
	margin:0;
}

.ec-borderedDefs dl dd{
	display:table-cell;
	padding:24px 40px 4px;
}

.ec-borderedDefs dl dd p{
	margin:0 0 20px 0;
}

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

.ec-borderedDefs dl dt{
	display:block;
	width:auto;
	padding:10px 20px;
}

.ec-borderedDefs dl dd{
	display:block;
	padding:20px 20px 10px;
}

.ec-borderedDefs dl dd .ec-select select{
	margin:0 0 10px 0;
}
}


/* ----------------------------------------
	ec-orderRole（商品購入）
---------------------------------------- */
.ec-orderRole .ec-orderPayment p{
	margin:0;
}

@media screen and (max-width:767px){
.ec-orderRole .ec-orderRole__summary{
	margin-top:0 !important;
}
}