@charset "UTF-8"

* {
	margin: 0;
	padding: 0;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

.wrapper {
	background-color: #f6eaeb;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	color: #313131;
	overflow: hidden;
	text-align: center;
	margin: 0;
	padding: 0;
}

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}

ul {
	padding: 0;
	margin: auto;
	max-width: 750px;
	list-style-type: none;
}

img {
	max-width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}


/*追従*/
a#rc_rightArea_pc {
	width: 300px;
	/*画像の全体幅*/
	position: fixed;
	top: 180px;
	right: -200;
	/*マウスを乗せた時に出てくる幅*/
	display: inline-block;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	z-index: 9999;
}

a#rc_rightArea_pc:hover {
	right: 0px;
	opacity: 1;
}



/*===================header======================================*/

header {
	background-color: #000;
}

.header-inner {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

h1 {
	padding: 0;
	width: 100%;
	margin: 0 auto;
	display: block;
}

h1 img {
	max-width: 250px;
	padding: 10px 0;
	display: block;
}


/*===================サイドボタン======================================*/

.side-menu {
    position: fixed;
    right: 0;
    top: 117px;
    max-width: 167px;
z-index: 999;	
}

.side-menu ul {

    width: 100%;
    list-style-type: none;
}

.side-menu li {
    margin: 5px 0;
}



/*===================商品一覧======================================*/
/*==画像の並び(1列2列3列）====*/
.item-list {
	width: 1000px;
	overflow: hidden;
	/*ulに高さ出す*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	margin: 3em auto;
}


.item-list  li{
    border: 2px solid #e12950;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	background-color: #ffffff;
}

.item-list.img li{
    border: none;
    background-color: inherit;
}

.item a:link,
.item a:visited{
	color: #fff;
	}
	
.none{
color: #ffffff;
}

.item-list:before,
.item-list:after{
	content: "";
	clear: both;
	display: block;
	/*ulに高さ出す*/
}


.onecol {
	/*margin:0 auto 5% auto;*/
	margin: 0px 15px 30px 15px;
}

.twocol {
	float: left;
	width: 48.6%;
	margin: 0 0.3em 4% 0.3em;
}

.threecol {
	float: left;
	width: 30%;
	margin: 0 0.7em 3% 0.7em;
}

.item {
     width: 48%;
    margin: 2% 2% 3% 0%;
}
.item_onecol {
	width: 100%;
    margin: 2% 2% 3% 0%;
}

.check_btn a,
.list_btn a {
	display: block;
    background: #252525;
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #333;
    border-radius: 2px;
    font-size: 15px;
    padding: 12px 0;
    letter-spacing: 0.1rem;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.twocol .check_btn a {
	margin: 5px 70px;
}

.threecol .check_btn a {
	margin: 5px;
}
.item .check_btn a {
	margin: 5px 70px 10px 70px;
}
.item_onecol .check_btn a {
	margin: 5px 200px 15px 200px;
}

.list_btn {
	width: 750px;
	margin: 1em auto;
}
.list_btn a {
	width: 70%;
	margin: 0 auto;
    background: #42a7db;
    border: 1px solid #42a7db;
    border-radius: 4px;
	font-size: 20px;
    padding: 20px 0;
}




/*==商品名・価格表示====*/

.itemname{
font-weight: bold;
font-size: 22px;
margin: 1em 0 0 0;
padding: 0 5%;
line-height: 1.3;
}

.r-price{
    margin-bottom: 5px;
    text-decoration: line-through;
	    font-size: 18px;
}

.s-price{
    font-weight: bold;
    color: #e12950;
    font-size: 28px;
    margin: 5px auto;
}
.n-price{
    font-weight: bold;
    color: #252525;
    font-size: 28px;
    margin: 5px auto;
}
.item_onecol .r-price,
.item_onecol .s-price {
	display: inline;
	padding: 0 0.5em;
}

.yen{
    font-weight: bold;
    color: #e12950;
    font-size: 0.8em;
    padding-left: 7px;
}
.n-price .yen{
    color: #252525;
}	
	
.item-img{  
}	
.percent{
	position: relative;
	}	
.per{
	z-index: 800;
    position: absolute;
    top: 92%;
    left: 0;
    background-color: #e12950;
    color: white;
    width: 40%;
    padding: 5px 0px;
	font-size: 22px;
	line-height: 1.5;
	font-weight: bold;
}
.item_per_text{
    background-color: #ed950a;
    width: 70%;
	font-size: 18px;
}
/*===ページトップへのボタン===*/
#pagetop_pc a {
    position: fixed;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
    bottom: 50px;
    right: 25px;
    z-index: 999;
    background-color: #000;
    opacity: 0.5;
}

#pagetop_pc a::before {
font-family: FontAwesome;
    content: '\f077';
    font-size: 36px;
    color: #fff;
    position: absolute;
    top: 5px;
    left: 10px;
}



/*クーポン*/
#coupon {
    margin: 0px auto;
    max-width: 750px;
}

#coupon img {
	margin-top: 0.5em;
	display: block;
}
#coupon h2 img {
	margin-top: 0;
}

.coupon_flex{
width: 750px;
}

.coupon_flex ul {
	width: 100%;
	margin: 40px auto 0 auto;
	padding: 0px 0 70px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	align-items: center;
	-webkit-box-align:
		center;
	-ms-flex-align:
		center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	bottom: 0;
	left: -2;
	z-index: 1;
	border-radius: 0 0 10px 10px;
}

.coupon_flex li.coupon_1col {
	width: 100%;
	padding: 0 0 15px 0;	
}

.coupon_flex li.coupon_1col img {
}

.coupon_flex li.coupon_1col_pad {
	padding-bottom:40px;
}

.coupon_flex li.coupon_2col {
    width: 48%;
    padding: 10px 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.coupon_flex li.coupon_3col {
    width: 33%;
    padding: 10px 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


.coupon_flex p {
	display: inline-block;
	width: 600px;
	font-size: 1em;
	margin: 10px auto 40px auto;
}



/*カテゴリボタン小*/
.btn-list {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width: 750px;
	margin: 0 auto 30px auto;
}
.btn-list li {
	display: inline-block;
	margin: 8px;
	padding: 5px 15px;
	background: #313131;
	border: 1px solid #313131;
	border-radius: 100vh;
}
.btn-list li a {
	color: #fff;
}



/*各メニュータイトル*/
.title {
	margin: 4em auto 2em auto;
	padding: 0;
	width: 100%;
}

.title img {
	width: 100%;
	max-width: 750px;
	margin: 0px auto 0px auto;
}

.btn_flex{
    display: flex;
    flex-direction: row;
    justify-content: center;
	margin: 4em auto;
	}
.btn_flex li {
    max-width: 33%;
	padding: 5px;
}




/*======特集=======*/

.contents {
	display: block;
	width: 95%;
	max-width: 750px;
	margin: 120px auto;
}
.contents img {
	display: block;
	width: 95%;
	max-width: 750px;
	margin-bottom: 10px;
}

.contents p {
	font-size: 16px;
	margin: 3px auto 3px auto;
	letter-spacing: 0.5;
	font-weight: 600;
	line-height: 1.5;
	color: #313131;
}

#coupon::before,
#medama::before,
#cat::before,
#offrate::before {
	content: "";
	padding-top: 80px;
	margin-top: -80px;
	display: block;
	visibility: hidden;
	clear: both;
}


/*===footer===*/

.bottom-logo {
	width: 240px;
	height: 60px;
	margin: 10% auto;
	display: block;
}

.bottom img {
	margin: 1%;
}

.mail {
	max-width: 750px;
	margin: 2.5em auto;
}

.foot-nav ul {
	max-width: 750px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 5% auto 0 auto;
	padding-bottom: 2%;


}

.foot-nav li {
	display: inline;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 100%;
}

.foot-nav li + li {
	border-left: 0;
	/*  border-right: 1px solid black;*/
}

.foot-nav li:last-child {
	display: inline;
	border-right: 0;
}

.foot-nav li:first-child {
	display: inline;
	border-left: 0;
}

.foot-nav li a {
	text-decoration: none;
	text-align: center;
	font-weight: 100;
	color: #313131;
	font-weight: bold;
	font-size: 1.4em;
	display: block;
}

.foot-nav a:hover {
	display: block;
	text-decoration: none;
	opacity: 0.8;

}

.copyright {
	font-size: 11px;
	padding: 10px 0px 20px;
	background-color: black;
    color: white;
    padding: 20px 0 15px 0px;
    margin-bottom: 0;

}


/* --------PC用---------- */
@media screen and (min-width: 540px) {
	.pcnone {
		display: none !important;
	}

	h1 img {
		max-width: 250px;
	}


a:hover {
	opacity: 0.8;
}
}







/* --------スマホ用---------- */
@media screen and (max-width: 599px) {
	.spnone {
		display: none !important;
	}

	h1 img {
		max-width: 250px;
		margin: auto;
	}
/*追従*/
a#rc_rightArea_sp {
	width: 150px;
		/*画像の全体幅*/
		position: fixed;
		top: 100px;
		right: -100;
		display: inline-block;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 9999;
	}

	a#rc_rightArea_sp:hover {
 				/*right: 0px;*/
 				opacity: 1;
 			}
 	
	/*===SPページトップボタン===*/
	#pagetop_sp a {
		position: fixed;
		display: block;
		width: 40px;
		height: 40px;
		text-decoration: none;
		bottom: 70px;
		right: 10px;
		z-index: 999;
		background-color: #080808;
		opacity: 0.5;
	}

	#pagetop_sp a::before {
		font-family: FontAwesome;
		content: '\f077';
		font-size: 24px;
		color: #fff;
		position: absolute;
		top: 7px;
		left: 10px;
	}

	/*===SPnav===*/

/*===SPクーポン===*/
.coupon_flex{
    width: 90%;
    margin: 20px auto;
    margin-bottom: 5px;
}	

.coupon_flex ul {

    width: 100%;
    margin-top: 0;
    bottom: 15;
    left: -1px;
    z-index: 2;
    border-radius: 0 0 5px 5px;
    padding-bottom: 5px;
    /* border: solid #f8964e 3.8px; */
    border-top: none;
}

	.coupon_flex li {
		padding: 0 3px;
	}

	.coupon_flex li.coupon_1col_pad {
		padding-bottom:20px;
	}

	.coupon_flex p {
		width: 360px;
		font-size: 0.5em;
		margin: 20px 10px;
	}



	/*===SP商品一覧===*/

	.itemname{
		font-size: 16px;
		padding: 0 5%;
		}

	.r-price{
     font-size: 12px;
	}
	.s-price,
	.n-price{
		font-size: 22px;
		margin: 9px auto;
	}
	.item-list{
	width: 100%;
	margin: 0 auto 3em auto;
	}

	.onecol .check_btn a {
		font-size: 13px;
		padding: 8px 0;
		margin: 10px 100px 15px 100px;
	}
	.twocol {
		width: 47.2%;
		margin: 0 0.3em 2% 0.3em;
	}

	.twocol .check_btn a  {
		font-size: 11px;
		padding: 6px 0;
		margin: 15px 30px;
	}

	.threecol {
		margin: 0 0.3em 5% 0.3em;
	}

	.threecol .check_btn a {
		font-size: 10px;
		padding: 6px 0;
	}
	
	.item {
		/*width: 47.2%;*/
		/*margin: 0 0.3em 3% 0.3em;*/
		width: 43%;
		margin: 20px -10px 5px 20px;
	}
	.item_onecol {
	width: 88%;
	margin: 20px -10px 5px 20px;
}
	.item a{
	display: block;
	}
	.item .check_btn a  {
		font-size: 11px;
		padding: 6px 0;
		margin: 5px 30px 10px 30px;
	}
	.item_onecol .check_btn a {
		font-size: 13px;
		padding: 8px 0;
		margin: 10px 100px 15px 100px;
	}


	.list_btn {
		width: 100%;
	}
	.list_btn a {
		width: 70%;
		background: #42a7db;
		border: 1px solid #42a7db;
		border-radius: 4px;
		padding: 12px 0;
		font-size: 15px;
	}
	
.per{
    font-size: 73%;
    top: 90%;
    left: 0px;
    width: 45%;
    padding: 2px 0px;  
	font-size: 14px;
}
.item_per_text{
    width: 80%;
}

.btn_flex{
    display: flex;
    flex-direction: row;
    justify-content: center;
	margin: 2em 5%;
	}
.btn_flex li {
    max-width: 33%;
}


.title {
	margin: 2em auto 0 auto;
}



/*カテゴリボタン小*/
.btn-list {
	width: 90%;
	margin: -3em auto 20px auto;
}
.btn-list li {
	margin: 5px;
	font-size: 11px;
}
.btn-list li a {
	color: #fff;
}


	/*======SP特集=======*/

	.contents {
		margin: 60px auto;
	}
	.contents p {
		margin: 3px auto;
		line-height: 1.5
	}



/*======SPfooter-nav=======*/
	
	.footer-menu {
    position: fixed;
		display: block;
    width: 100%;
    height: 62px;
    /*background-color: rgba(255,255,255,0.9);*/
    background-color: #313131;
    z-index: 999;
    bottom: 0;
  /* 1. メニューを画面下へ隠す */
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  /* 2. 0.3秒かけて表示する */
  -webkit-transition: .3s;
  transition: .3s;				
}
.active{
  /* 3. メニューを定位置へ戻す */
  -webkit-transform: translate(0);
  transform: translate(0);
}
	.footer-menu ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    height: 62px;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    border-top: 1px solid #000;

}
	.footer-menu ul li {
    width: 100%;
    font-size: 10px;
    text-align: center;
    line-height: 1.0;
	margin-top: 5px;
    padding-top: 5px;
}

	.footer-menu ul li p {
    -webkit-margin-before: unset;
    margin-block-start: unset;
    margin-top: 6px;
	font-weight: bold;
	color: #fff;
}
	.footer-menu ul li a {
    text-decoration: none;
}
	.footer-menu img {
    width: 25px;
	font-size: 30px;
}


	.bottom-logo {
		width: 120px;
		height: 30px;
		margin: 20px auto 40px auto;
		display: block;
	}


	.foot-nav li a {
		font-size: 12px;
		position: relative;
		z-index: 999;
	}

	.menucheck {
		font-size: 1em;
		letter-spacing: 2px;
		font-weight: bold;
	}

	.menucheck span {
		color: #D43E3D;
	}



.onecol {
	margin: 20px 20px 0px 20px;
}

.twocol {
	float: left;
	width: 43%;
	margin: 15px -10px 0px 20px;
}


.more {
	margin: 1em auto 4em auto;
	width: 100%;
}




}



/*＝＝＝＝＝＝＝＝＝＝レイアウト用＝＝＝＝＝＝＝＝＝＝*/
.mrla{
margin-right: auto;
margin-left: auto;
}

.txt_left {text-align: left;}
.txt_center {text-align: center;}
.txt_right {text-align: right;}


.mt0 {margin-top: 0px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}

.mb0 {margin-bottom: 0px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}

.pt0 {padding-top: 0px;}
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pt40 {padding-top: 40px;}
.pt50 {padding-top: 50px;}

.pb0 {padding-bottom: 0px;}
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}

.w100 {width: 100%;}
.w90 {width: 90%;}
.w80 {width: 80%;}
.w70 {width: 70%;}
.w60 {width: 60%;}
.w50 {width: 50%;}
.w45 {width: 45%;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w20 {width: 20%;}

.lh0 {line-height: 0;}
.lh1 {line-height: 1;}
.lh12 {line-height: 1.2;}
.lh15 {line-height: 1.5;}
.lh18 {line-height: 1.8;}
.lh20 {line-height: 2;}
.lh25 {line-height: 2.5;}


.ft12px {font-size: 12px;}
.ft13px {font-size: 13px;}
.ft14px {font-size: 14px;}
.ft15px {font-size: 15px;}
.ft16px {font-size: 16px;}
.ft18px {font-size: 18px;}
.ft22px {font-size: 22px;}
.ft24px {font-size: 24px;}
.ft28px {font-size: 28px;}
.ft32px {font-size: 32px;}
.ft36px {font-size: 36px;}


.bg_orange{background-color: #f0a000;}


@media screen and (max-width: 599px) {

	.sp_ft12px {font-size: 12px;}
	.sp_ft13px {font-size: 13px;}
	.sp_ft14px {font-size: 14px;}
	.sp_ft15px {font-size: 15px;}
	.sp_ft16px {font-size: 16px;}
	.sp_ft18px {font-size: 18px;}
	.sp_ft22px {font-size: 22px;}
	.sp_ft24px {font-size: 24px;}
	.sp_ft28px {font-size: 28px;}
	.sp_ft32px {font-size: 32px;}
	.sp_ft36px {font-size: 36px;}

}


/*＝＝＝＝＝＝＝＝＝＝クーポンコードエリア用＝＝＝＝＝＝＝＝＝＝*/


.backtoschool_box{
    margin:2em;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.backtoschool_box:before, .backtoschool_box:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.backtoschool_box:before {left: 10px;}
.backtoschool_box:after {right: 10px;}
.backtoschool_box p {
    margin: 0;
    padding: 0;
}