@charset "UTF-8";

/*-----------------------------
880pxより小さい時：スマホ・タブレット
@media (max-width: 880px) {}
------------------------------*/


/****************************************
	共通
*****************************************/
/*=============================
	pc/sp
==============================*/
.sp {
    display: none;
}
@media screen and (max-width:880px) {
	.pc {
        display: none;
    }
    .sp {
        display: inherit;
    }
}

/*=============================
	clearfix
==============================*/
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

/*=============================
	フォント
==============================*/
.m-txt-en {
	font-family: "Josefin Sans", sans-serif;
	font-weight: 700;
}


/*=============================
	タイマー
==============================*/
.view_timer{display:none;}

/*=============================
	電話リンク
==============================*/
@media (min-width: 751px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}

/****************************************
	タイトル
*****************************************/
/*=============================
	左に四角、のタイトル
	※下層ページで使われている
	※下層ページ編集の時にクラス振る！
==============================*/
h2 {
    padding: 0px 0 0px 10px;
    color: #FFF;
    font-size: 16px;
    line-height: 20px;
    border-bottom: dashed 2px #cc0000;
    margin-bottom: 1.5em;
    background: url(https://gigaplus.makeshop.jp/hasepro/img/common/H2icon.png) no-repeat;
    background-position: left;
    padding-left: 1.4em;
}


/****************************************
	button
*****************************************/
.btn-wrap {
text-align: center;
}

.btn {
position: relative;
z-index: 2;
background: #fff;
color: #6e6e6e;
border: 1px solid #6e6e6e;
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 54px;
outline: none;
border-radius: 5px;
}

.btn {
display: inline-block;
width: 200px;
height: 54px;
text-align: center;
text-decoration: none;
line-height: 54px;
outline: none;
}

.btn::before,
.btn::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}

.btn,
.btn::before,
.btn::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}


.product-list-btn {
width: 230px;
}

.mail-magazine-btn {
width: 100%;
}

/****************************************
	cart-button
*****************************************/
.add-btn {
background: #af4233;
font-size: 18px;
font-weight: bold;
text-align: center;
width: 60%;
border-radius: 3px;
margin-bottom: 20px;
}

.add-btn:hover {
background: #eb503c;
}

.outstock-btn {
background: #989898;
font-size: 18px;
font-weight: bold;
text-align: center;
width: 60%;
border-radius: 3px;
padding: 24px;
}

.outstock {
color: #fff;
display: inline-block;
border-radius: 2px;
width: 100%;
}

.sold-btn {
background: #adadad !important;
}

.sold-btn:hover {
background: #989898 !important;
}

.cart-btn {
display: inline-block;
border-radius: 2px;
width: 100%;
padding: 0px;
background:  #0058a7;
color: #FFF !important;
margin-bottom:1em;
}

.restock{
background: #0c6700;
}

.add-btn a {
color: #fff;
text-decoration: none;
}

.add-btn a:hover {
opacity: 1;
}


.add-btn-right {
width: 24%;
}

.cart-option-area {
font-size: 12px;
margin-top: 10px;
}

.cart-option-area span {
display: block;
}

.sell-period-btn {
background: #adadad !important;
}

.sell-period-btn p {
color: #fff;
}

/****************************************
	pager
*****************************************/
.pager {
margin-bottom: 64px;
}

.pager ul.pagination {
text-align: center;
margin: 0;
padding: 0;
}

.pager .pagination li {
margin: 0 2px;
padding: 0;
display: inline-block;
background: #ebebeb;
width: 30px;
height: 50px;
text-align: center;
position: relative;
}

.pager .pagination li a {
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display: table;
text-decoration: none;
}

.pager .pagination li a span {
display: table-cell;
vertical-align: middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active {
color: #fff;
background: #6e6e6e;
}

/****************************************
	pagetop
*****************************************/
#page-top {
	position: fixed;
	z-index: 2;	
	bottom: 50px;
	right: 30px;
	font-size: 100%;
}
#page-top a {
	text-decoration: none;
	color: #fff;
	width: 70px;
	padding: 0px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
		 -o-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
}
#page-top a:hover {
	text-decoration: none;
}

/****************************************************************************
    margin top
****************************************************************************/

/*   XXSサイズ
---------------------*/
.m-mt-XXS {
	margin-top: .5rem;
}

/*   XSサイズ
---------------------*/
.m-mt-XS {
	margin-top: 1rem;
}


/*   Sサイズ
---------------------*/
.m-mt-S {
	margin-top: 2rem;
}


/*   Mサイズ
---------------------*/
.m-mt-M {
	margin-top: 3rem;
}

/*   Lサイズ
---------------------*/
.m-mt-L {
	margin-top: 4rem;
}


/*   XLサイズ
---------------------*/
.m-mt-XL {
	margin-top: 5rem;
}