@charset "shift_JIS";
/*
■1：ELEMENTS
■2：CLEAR
■4：HEADER
■5：Navi
■6：footer
■7：Contents
*/

/****************************************

ELEMENTS

*****************************************/
html{font-size: 62.5%; height:100%;}

body, h1, h2, h3, h4, h5, p, ul, ol, form, dl, dd, dt, address {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

body {
  margin: 0;
  padding: 0;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.2em;
  color: #2a2a2a;
  font-size:1.6em;
  height:100%;
}

ul, li, dl, dd, dt {
  list-style: none;
}
img, img a {
  border: 0;
  vertical-align: bottom;
}
header, footer, nav, section, article, figure, aside, ul, li, dl, dd, dt {
  display: block;
}

a {
	text-decoration: none;
	-webkit-transition: all .2s;
	transition: all .2s;
	color:#2a2a2a;
}

a:hover{
	color:#e51c23;
}

a img{
	-webkit-transition: all .2s;
	transition: all .2s;
}
/*
a:hover img{
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter:"alpha(opacity=55)";
}
*/
input, select {
	-webkit-transition: all .2s;
	transition: all .2s;
	-webkit-appearance: none;
	appearance: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.floatLeft { float: left;}
.floatRight { float: right;}

.Left { text-align: left;}
.Right { text-align: right;}
.Center {text-align: center;}


/****************************************

CLEAR

*****************************************/
.cf {clear: both; font: 0pt/0pt;}
.cf:after { content: ""; clear: both; height: 0; display: block; visibility: hidden;}

.clear{ clear:both;}
/****************************************

HEADER

*****************************************/
header{
	background:#e51c23;
	height:80px;
	text-align:center;
	width: 100%;
	min-width: 900px;
	overflow: hidden;
}

/****************************************

Navi

*****************************************/
header nav {
	position:relative;
}
header nav ul{
	width:900px;
	height:80px;
	display: table;
	margin:auto;
}
header nav ul li{
	display: table-cell;
	height: 80px;
	vertical-align: middle;
	text-align: center;
	position: relative;
	box-sizing: border-box;
}

header nav ul li > *{
	display: table-cell;
	text-align: center;
	height: 80px;
	vertical-align: middle;
}


nav ul li.h1{width: 367px;}
nav ul li.navi01{width: 86px; border-top: 2px #be0bb5 solid; background: #e51c23;}
	nav ul li.navi01 > *{width: 86px;}
nav ul li.navi02{width: 86px; border-top: 2px #f38400 solid; background: #e51c23;}
	nav ul li.navi02 > *{width: 86px;}
nav ul li.navi03{width: 108px; border-top: 2px #067eca solid; background: #2a2a2a; padding-left: 1px;}
nav ul li.navi03::before{content:''; display:block; height:80px; width: 0px; position: absolute; left: 0; top:0; border-left:1px solid #FFF;}
	nav ul li.navi03 > *{width: 108px;}
nav ul li.navi04{width: 108px; border-top: 2px #2ca507 solid; background: #2a2a2a; padding-left: 1px;}
	nav ul li.navi04 > *{width: 108px;}
nav ul li.navi04::before{content:''; display:block; height:80px; width: 0px; position: absolute; left: 0; top:0; border-left:1px solid #FFF;}
nav ul li.navi05{width: 145px; border-top: 2px #e51c23 solid; background: #FFF;}
	nav ul li.navi05 > *{width: 145px;}

nav ul li.navi01,
nav ul li.navi02,
nav ul li.navi03,
nav ul li.navi04,
nav ul li.navi05{
	-webkit-transition: all .2s; transition: all .2s;
	-ms-transform: skew(-22deg);
	-webkit-transform: skew(-22deg);
	transform: skew(-22deg);
	transform: skew(-22deg);
	transform-origin: bottom;
}
nav ul li.navi01:empty,
nav ul li.navi02:empty,
nav ul li.navi03:empty,
nav ul li.navi04:empty,
nav ul li.navi05:empty{
	visibility: hidden;
}
nav ul li.navi01 > *,
nav ul li.navi02 > *,
nav ul li.navi03 > *,
nav ul li.navi04 > *,
nav ul li.navi05 > *{
	-ms-transform: skew(22deg);
	-webkit-transform: skew(22deg);
	transform: skew(22deg);
	transform: skew(22deg);
}

nav ul li.navi01:hover img,
nav ul li.navi02:hover img{opacity: 0.6;}

nav ul li.navi03:hover,
nav ul li.navi04:hover{background-color:#7a0e12;}
nav ul li.navi05:hover{background-color:#ffc8ca;}

nav ul li.navi03 img,
nav ul li.navi04 img,
nav ul li.navi05 img{
	-webkit-transition: none !important;
	transition: none !important;
}

nav ul li img{
	vertical-align: middle;
}


header nav ul li.h1 h1{
	width:530px;
	height: 80px;
	background:url(../images/common/head_bg.png) no-repeat;
	position: absolute;
	top: 0;
	left: -138px;
	padding-left: 138px;
}
header nav ul li.h1 h1 .titlelogoWrap{
	width: 351px;
	height: 80px;
	display: block;
	margin: 0;
	position: relative;
}
header nav ul li.h1 h1 .titlelogoWrap .logo{
	display: block;
	position: absolute;
	width: 254px;
	height: 52px;
	left: 0;
	top: 50%;
	margin:-26px 0 0 0;
}
header nav ul li.h1 h1 .titlelogoWrap .chara{
	display: block;
	position: absolute;
	width: 106px;
	height: 80px;
	right: 0;
	top: 50%;
	margin:-40px 0 0 0;
}

nav ul li.navi05 .cartIconWrap{
	display: inline-block;
	position: relative;
	line-height:0;
	vertical-align: middle;
	margin-right: 10px;
}
nav ul li.navi05 .cartIconWrap .number{
 position:absolute;
 top:-7px;
 right: -8px;
 z-index:10;
 display:none;
 background:#2a2a2a;
 color:#FFF;
 font-size: 9px;
 border-radius:50%;
 height:18px;
 width:18px;
 line-height:18px;
}
nav ul li.navi05 .cartTxtWrap{
	display: inline-block;
	line-height:0;
	vertical-align: middle;
}
nav ul li.navi05 .cartTxtWrap p.signInTxt{
	display:none;
}
html.login nav ul li.navi05 .cartTxtWrap p.signInTxt{
	display:block;
	margin-bottom: 2px;
	margin-top: -5px;
}

/****************************************

footer

*****************************************/
footer{
	background:url(../images/common/foot_bg.png);
	padding:0 0 30px;
}

footer #footBanner{
	background:url(../images/common/footbanner_bg.png);
	padding:15px 15px 0;
}

footer #footBanner ul{
	margin:0 auto;
	display:block;
	letter-spacing: -0.4em;
	max-width: 910px;
}
footer #footBanner ul li{
	display: inline-block;
	vertical-align: top;
	width: 50%;
	margin:0 0 15px;
}
footer #footBanner ul li a{
	display:block;
	padding: 0 5px;
}
footer #footBanner ul li img{
	width: 100%;
	height: auto;
}



footer #foot{
	padding:25px 0 30px;
	width:900px;
	margin:0 auto;
}

footer #foot ul.footNavi{
	width:900px;
	margin:15px 0 45px;
	display:flex;
	display: -webkit-flex;
	
	justify-content: space-between;
	-webkit-justify-content: space-between;
}

footer #foot ul.footNavi li.btn01 a{
	display:block;
	width:190px;
	text-align:center;
	border-bottom:1px solid #636363;
}

footer #foot ul.footNavi li.btn01 a:hover{
	border-bottom:1px solid #ff7d82;
}

footer #foot ul.footNavi li.btn02 a{
	display:block;
	width:190px;
	text-align:center;
	border-bottom:1px solid #636363;
}

footer #foot ul.footNavi li.btn03 a{
	display:block;
	width:210px;
	background:url(../images/common/foot_icon.png) no-repeat 25px center #e51c23;
	text-align:center;
	line-height:48px;
	color:#FFF;
	text-indent:40px;
	border-radius:5px;
}
footer #foot ul.footNavi li.btn03 a:hover{
	background:url(../images/common/foot_icon.png) no-repeat 25px center #9a0005;
}

footer #foot ul.footNavi li.btn03 a span{
	color:#FF0;
	display: none;
}

footer #foot .footText{
	width:900px;
	display:flex;
	display: -webkit-flex;
	
	justify-content: space-between;
	-webkit-justify-content: space-between;
}

footer #foot .footText div ul li{
	float:left;
	border-right:2px solid #6d6d6d;
	margin:0 10px 5px 0;
	padding:0 10px 0 0;
	line-height:10px;
}
footer #foot .footText div.textLink{ font-size:68%;}
footer #foot .footText div.textLink li{ margin:0 10px 15px 0;}
footer #foot .footText div.copylight{ font-size:68%;}
footer #foot .footText div.copylight img{ margin:0 0 9px;}


footer #foot .footText div,
footer #foot .footText div a{ color:#FFF;}
footer #foot .footText div a{ color:#FFF; text-decoration:underline;}
footer #foot .footText div a:hover{ color:#FF0;}

#footBanner a:hover img,
.infoBanner a:hover img{
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter:"alpha(opacity=55)";
}

footer #foot .footSns{
	display: none;
}
#topPage footer #foot .footSns{
	display: block;
	margin-bottom: 20px;
	font-size: 0;
	line-height: 0;
}



/* BACK_TO_TOP
-------------------------------------------------------*/
#pageTop {
	display:none;
    position:relative;
	max-width:900px;
	margin:0 auto;
}
#pageTop a{
	display:block;
    padding:10px;
	background:rgba(51,51,51,0.6);
	border-radius: 50% 50%;
	position: fixed;
    bottom: 0;
	margin-left:860px;
}

#pageTop a:hover{
	background:#333;
}


/****************************************

Contents

*****************************************/
#indexWrapper{ padding:0 0 100px;}

#Wrapper{}
#ContentWrapper { padding:80px 0 100px; width:900px; margin:0 auto;}
#ContentWrapper {clear: both; font: 0pt/0pt;}
#ContentWrapper:after { content: ""; clear: both; height: 0; display: block; visibility: hidden;}


#mainWrapper{ width:735px; float:left;}


.contents{
	width:900px;
	margin:0 auto 10px;
}


/*sideWrapper
----------------------------------------*/

#sideWrapper{ width:140px; float:right;}

#sideWrapper .pickup ul{
	background:#efefef;
	padding:0 13px;
	margin:0 0 12px;
}

#sideWrapper .pickup ul li{padding:0 0 28px; font-size:75%; line-height:1.6em;}
#sideWrapper .pickup ul li .photo{ margin:0 0 10px;}
#sideWrapper .pickup ul li .photo img{width:114px;}
#sideWrapper .pickup ul li .title{ font-weight:bold;}

#sideWrapper .banner p{ margin:0 0 12px;}


/*btnSet
----------------------------------------*/
.btnBox{ margin: 0 0 15px;}
.previousBtn a{
	background-image:url(../images/common/previous_btn.png);
	background-position:30px center;
	text-indent:1em;
}
.nextBtn a{
	background-image:url(../images/common/next_btn.png);
	background-position:140px center;
	text-indent:-1em;
}

.previousBtn a,
.nextBtn a{
	display:block;
	border-radius:3px;
	width:180px;
	height:40px;
	line-height:40px;
	font-size:94%;
	text-align:center;
	background-color:#eaeaea;
	background-repeat: no-repeat;
}

/****************************************

/*scrollTable

*****************************************/

ul.scrollItem li a p{
	white-space: pre-line;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;

}

.scrollTable{
	width:900px;
	margin:0 auto 10px;
}


.scrollTable h3{
	width:187px;
}

.scrollTable h3 img{ width: 100%;}

.scroll{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

ul.scrollItem {	display:table;}
ul.scrollItem li{
	display:table-cell;
	padding:6px;
	font-size:82%;
}
ul.scrollItem li a p{ width:140px;}
ul.scrollItem li:first-child{ padding: 6px 6px 0 0px;}
ul.scrollItem li:last-child{ padding: 6px 0 0 6px;}

ul.scrollItem li .photo{ padding: 3px; margin:0 0 12px;}
ul.scrollItem li .photo img{ width:134px;}

ul.scrollItem li:nth-child(1n) .photo{ background:url(../images/common/scroll_bg01.jpg) no-repeat; background-size:cover;}
ul.scrollItem li:nth-child(2n) .photo{ background:url(../images/common/scroll_bg02.jpg) no-repeat; background-size:cover;}
ul.scrollItem li:nth-child(3n) .photo{ background:url(../images/common/scroll_bg03.jpg) no-repeat; background-size:cover;}
ul.scrollItem li:nth-child(4n) .photo{ background:url(../images/common/scroll_bg04.jpg) no-repeat; background-size:cover;}


ul.scrollItem li a p.price{ color:#e51c23;}
ul.scrollItem li a p.price strong{ font-size:125%; font-weight:bold;}


@media screen and (max-width: 760px) {
.scrollTable{
	width: 100% !important;
	margin:0 auto 3%;
	line-height: 1.55em;
}

.scrollTable h3{ padding:0px 0 0; width:100%;}
.scrollTable h3  img{ width:55% !important;}
ul.scrollItem {
	display: inline-table;
	padding:0 10px 10px;
}
ul.scrollItem li{
	display:table-cell;
	padding:6px;
	font-size:100%;
	width:170px;
}
ul.scrollItem li a p{ width:170px;}

ul.scrollItem li:first-child{ padding: 3px 3px 0 0px;}
ul.scrollItem li:last-child{ padding: 3px 0 0 3px;}

ul.scrollItem li .photo{ padding: 3px; margin:0 0 12px;}
ul.scrollItem li .photo img{ width:170px;}


ul.scrollItem li a p{font-weight:bold;}
ul.scrollItem li a p.price{ color:#e51c23;}
ul.scrollItem li a p.price strong{ font-size:130%; font-weight:bold;}


}


@media screen and (max-width: 480px) {
ul.scrollItem li{
	padding:6px;
	font-size:100%;
	font-weight:bold;
	width:120px;
}
ul.scrollItem li a p{ width:120px;}

ul.scrollItem li .photo img{ width:120px;}

}