@charset "shift_jis";

img {border: none;}

/* ------------- �y�[�W�S�̂������� ----------- */
@media screen and (min-width: 600px) {
#contents {font-size: 14px;}
body {padding-top: 60px;} /* �w�b�_�[�Œ胁�j���[���Ԃ��� */
}

@media screen and (max-width: 599px) {
#contents {font-size: 12px;}
body {padding-top: 0;} /* �w�b�_�[�Œ胁�j���[���Ԃ��� */
}

@media screen and (min-width: 1000px) {
#contents {width: 700px; margin: 0 auto;} /* �w�b�_�[�Œ胁�j���[���Ԃ��� */
}
/* ------------- �y�[�W�S�̂����܂� ----------- */


/* ------------- goods_���o�� ----------- */

#contents #goods {
	background: #fafafa;
	text-align: center;
	width: 100%;
}
#contents #pc_left ~ #goods {
	width: 740px;
	float: right;
}
#goods h1, h1 {
	width: 100%;
	line-height: 0;
}
#goods h1 img, .ttlbnr img, h1 img, h1 .ttlbnr {
	width: 100%;
	border :none;
}
#goods h2,
#goods h3 {
	background: #eeede4;
	color: #111;
	font-size: 1.5em;
	line-height: .8em;
	margin: 3em 0 1em;
	padding: .4em;
	text-align: left;
	box-shadow: 0 .1em .1em rgba(238,237,228,0.8);
}
#goods h3 {font-size: 1.2em;}
#goods h2 img {width: 100%;}
#goods h2 span {font-size: .6em; font-weight: normal; padding: 0 0 0 .8em; display: block;}

#goods h2:nth-of-type(n+3) {padding: 1em .8em;}
#goods h2:nth-of-type(1) {margin: .5em 0 1em;}

/* ------------- goods�R���e���c��������
 ----------------------------------------------------- */
/* ------------- goods_�{�b�N�X���� ----------- */


#goods .wrap-item {
	display: block;
	margin: 0 auto;
	padding: 0 0 2em;
	width: 95%;
}
#goods .wrap-item:after {
	display: block;
	clear: both;
	content: " ";
}
/* ------------- goods_item ----------- */

#goods .wrap-item .item {
	background: #fff;
	box-sizing: border-box;
	float: left;
	padding-bottom: 1em;
	box-shadow: .2em .5em .5em rgba(0,0,0,0.2);
}
#goods .wrap-item .item .exp {
	background: #666;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	padding: .4em 0;
}
#goods .wrap-item .item .catch {
	background: #ddd;
	font-size: .9em;
	line-height: 1.4em;
	padding: .8em;
	margin: 0 auto .7em;
	text-align: left;
	width: 90%;
}
#goods .wrap-item .item .photo {
	border: 0;
	margin: 0 auto .7em;
	width: 100%;
}
#goods .wrap-item .item .name {
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.4em;
	margin: 0 auto .7em;
}
#goods .wrap-item .item .pricename {
	font-size: .9em;
	margin: 0 auto;
}
#goods .wrap-item .item .price {
	color: #f00;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0 auto .8em;
}
#goods .wrap-item .item .price span {
	font-size: 1.6em;
	font-family: "Verdana", "Arial", "Helvetica";
	letter-spacing: -.04em;
}
#goods .wrap-item .item .icon span {
	padding: 1px 3px;
	font-size: .9em;
}
#goods .wrap-item .item .icon {
	height: 1.2em;
}
#goods .wrap-item .item .icon .dlv {
	border: 1px #f00 solid;
	color: #f00;
}
#goods .wrap-item .item .btn a {
	border-radius: 5px;
	background: #f60;
	color: #fff;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	margin: .7em auto 0;
	padding: .5em 0;
	text-decoration: none;
	width: 80%;
}
#goods .wrap-item .item .btn:hover a {
	background: #c00;
}

/* ------------- goods_box���ѕʎw�� ----------- */
#goods .wrap-item .box-1 {width: calc(100% - 1em); margin: 0 .5em 1.1em;}
#goods .wrap-item .box-2 {width: calc(50% - 1em); margin: 0 .5em 1.1em;}
#goods .wrap-item .box-3 {width: calc(33.3333% - 1em); margin: 0 .5em 1.1em;}
#goods .wrap-item .box-4 {width: calc(25% - 1em); margin: 0 .5em 1.1em;}
#goods .wrap-item .box-5 {width: calc(20% - 1em); margin: 0 .5em 1.1em;}
#goods .wrap-item .box-6 {width: calc(16.6666% - 1em); margin: 0 .5em 1.1em;}
#goods .wrap-item .box-7 {width: calc(14.2857% - 1em); margin: 0 .5em 1.1em;}


/* ------------- goods_box���ѕʎw��-PC�̂� ----------- */
@media screen and (min-width: 600px) {
#goods .wrap-item .box-4 {font-size: .9em;} 
#goods .wrap-item .box-5 {font-size: .8em;} 
#goods .wrap-item .box-6 {font-size: .65em;} 
#goods .wrap-item .box-7 {font-size: .55em;}

#goods .wrap-item .box-6 .pricename, #goods .wrap-item .box-6 .icon span {font-size: 1.1em;} 
#goods .wrap-item .box-7 .pricename, #goods .wrap-item .box-7 .icon span {font-size: 1.2em;} 
}


/* ------------- goods_item box-1���� ----------- */

#goods .wrap-item .box-1 .photo {
	float: left;
	margin: 0;
	width: 50%;
}
#goods .wrap-item .box-1 .catch,
#goods .wrap-item .box-1 .name,
#goods .wrap-item .box-1 .pricename,
#goods .wrap-item .box-1 .price,
#goods .wrap-item .box-1 .icon,
#goods .wrap-item .box-1 .btn {
	box-sizing: border-box;
	float: right;
	margin-left: 2.5%;
	margin-right: 2.5%;
	width: 45%;
}
#goods .wrap-item .box-1 .name {margin-top: 1.5em;}
#goods .wrap-item .box-1 .btn a {width: 90%;}


/* ------------- goods�R���e���c�X�}�z�p�������� ----------- */
@media screen and (max-width: 599px) {
#contents #pc_left ~ #goods {
	width: 100%;
}
/* ------------- goods_item box-1�����X�}�z ----------- */

#goods .wrap-item .box-1 .photo {
	float: none;
	margin: .5em 20% 0;
	width: 60%;
}
#goods .wrap-item .box-1 .catch,
#goods .wrap-item .box-1 .name,
#goods .wrap-item .box-1 .pricename,
#goods .wrap-item .box-1 .price,
#goods .wrap-item .box-1 .icon,
#goods .wrap-item .box-1 .btn {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}
#goods .wrap-item .box-1 .name {margin-top: .5em;}


/* ------------- goods_item box-�����X�}�z ----------- */
#goods .wrap-item .box-2,
#goods .wrap-item .box-3,
#goods .wrap-item .box-4 {width: calc(50% - .5em); margin: 0 .25em .8em; font-size: .8em;}

#goods .wrap-item .box-5,
#goods .wrap-item .box-6,
#goods .wrap-item .box-7 {width: calc(33.3333% - .5em); margin: 0 .25em .8em; font-size: .8em;}


}

/* ------------- goods�R���e���c�X�}�z�p�������� ----------- */


#goods .wrap-ranking .item .exp {background: #feea42; color: #333;}
#goods .wrap-item .item .canonink {background: #fe0000;}
#goods .wrap-item .item .epsonink {background: #0102fd;}
#goods .wrap-item .item .brotherink {background: #002ad8;}

/* ------------- goods�R���e���c�����܂�
 ----------------------------------------------------- */



/* ------------- �X���C�v�����i�r��������
 ----------------------------------------------------- */
.flex-viewport {
	width: 100%;
	overflow-y: auto;
	margin: 1em 0 2em;
	text-align: left;
}

.flex-viewport:-webkit-scrollbar {
	display: none;
	height: 0 !important;
}
.flex-viewport ul li {
	box-sizing: border-box;
	display: inline-block;
	font-size: 1em;
	line-height: 1.5;
	padding: 0 15px 2em 0;
	vertical-align: top;
	width: 24%;
}
.flex-viewport ul {
	margin: 0 0 0 20px;
}
.flex-viewport ul li .photo {
	width: 100%;
}

@media screen and (max-width: 599px) {
.flex-viewport {
	overflow-x: scroll;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-ms-scroll-chaining: chained;
	-webkit-transform: translateZ(0);
}
.flex-viewport .slides {
	overflow-x: visible;
	margin: 0;
	width: 950px;
}
.flex-viewport ul li {
	font-size: .8em;
	padding: 0 5px 0 0;
	width: 100px;
}
}



/* ------------- �X���C�v�����i�r�����܂�
 ----------------------------------------------------- */

/* ------------- �y�[�W�㕔�i�r��������
 ----------------------------------------------------- */
.topNavi {
	box-sizing: border-box;
	font-weight: bold;
	margin: 0;
	padding: 2em 5%;
	text-align: center;
	width: 100%;
}
#contents #pc_left ~ .topNavi {
	float: right;
	margin: 2em 0;
	width: 740px;
}
.topNavi .wrap-topNavi:after {
	content: " ";
	clear: both;
	display: block;
}
.topNavi .wrap-topNavi li {
	float: left;
	list-style: none;
	margin-bottom: .6em;
	display: block;
}
.topNavi .wrap-topNavi li a {
	background-color: #eee;
	border-radius: 5px;
	color: #fff;
	padding: 0 0 1em 0;
	display: block;
	width: 100%;
	text-decoration: none;
}
.topNavi .wrap-topNavi li a span {
	display: block;
	height: 2.2em;
	line-height: 1.2;
}
.topNavi .wrap-topNavi li a:hover {
	background-color: #666;
	color: #fff;
}
/* ------------- �y�[�W�㕔�i�r �•ʒ��� ----------- */

.topNavi .list-1 {width: 100%;}
.topNavi .list-2 {width: 49.5%; margin-right: 1%;}
.topNavi .list-3 {width: 32.66%; margin-right: 1%;}
.topNavi .list-4 {width: 24.25%; margin-right: 1%;}

.topNavi .list-2:nth-child(2n),
.topNavi .list-3:nth-child(3n), 
.topNavi .list-4:nth-child(4n) {margin-right:0;}


/* ------------- �y�[�W�㕔�i�r �e�L�X�gver ----------- */
.topNavi .text li a {
	position: relative;
}
.topNavi .text li a:before {
	background: #d43734;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	width: 18px;
}
.topNavi .text li a:hover:before {
	background: #c51916;
}
.topNavi .text li a:after {
	border: 5px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #FFFFFF;
	margin-top: -5px;
	content: '';
	position: absolute;
	right: 0px;
	top: 50%;
}

/* ------------- �y�[�W�㕔�i�r �摜ver ----------- */
.topNavi .img li img {
	width:100%;
	margin:-10px 0 3px 0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/* ------------- �y�[�W�㕔�i�r�X�}�z�p�������� ----------- */

@media screen and (max-width: 599px) {
#contents #pc_left ~ .topNavi {
	width: 96%;
	margin: 2em 2%;
}
}
/* ------------- �y�[�W�㕔�i�r�X�}�z�p�����܂� ----------- */



/* ------------- �y�[�W�����J�e�S�������N�������� ----------- */
/* ------------- �J�e�S���������� ----------- */
.cat {
	text-align: left;
}
.cat .wrap-topNavi li {
	border-bottom: 1px dashed #fff;
	margin-bottom: 0;
}
.cat .wrap-topNavi li a {
	border-radius: 0;
	box-sizing: border-box;
	color: #333;
	height: 3.5em;
	padding: .8em 0 .8em 1.2em;
	vertical-align: bottom;
}
.cat .wrap-topNavi li a img {
	float: left;
	width: 11.2%;
}
.cat .wrap-topNavi li a span {
	float: left;
	padding: .5em 0 0 .5em;	
	width: 80%;
}
.cat .wrap-topNavi li a span:after {
	clear: both;
	content: "";
	display: block;
}
.cat .img li a:before {
	background: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.cat .img li a:hover:before {
	background: #f60;
}
.cat .img li a:after {
	border-left-color: #333;
}

@media screen and (max-width: 599px) {
.cat .wrap-topNavi li a {
	padding: .8em 0 0 .5em;
}
.cat .wrap-topNavi li a img {
	padding: .2em 0 0 0;	
	width: 28%;
}
.cat .wrap-topNavi li a span {
	padding: .5em 0 0 .5em;	
	width: 60%;
}
}

/* ------------- �J�e�S�������܂� ----------- */

.footerstore {background: #fff;}
.footerstore .wrap-topNavi li a {background: #eee; color: #333; text-align: left; padding-left: 1em;}
.footerstore .wrap-topNavi li a:hover {background: #666;}

/* ------------- �y�[�W�����J�e�S�������N�����܂� ----------- */
/* ------------- �t�@�[�X�g�r���[�i�r�����܂�
 ----------------------------------------------------- */







/* ------------- �w�b�_�[�Œ�i�r��������
 ----------------------------------------------------- */
#headNavi {
	background: #ffeb3b;
	border-bottom: 3px #dbc62b solid;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 999;
	filter: alpha(opacity=95);
	-moz-opacity: 0.95;
	opacity: 0.95;
}
#headNavi .wrap-headNavi {
	margin: 0 auto;
	width: 940px;
}
#headNavi .wrap-headNavi li a {
	background: #367ABD;
	border-radius: 5px;
	color:#fff;
	font-size: .85em;
	font-weight: bold;
	float: left;
	line-height: 1.4em;
	margin:.8em 1% .8em 0;
	padding: .7em 0;
	text-decoration: none;
}
#headNavi .wrap-headNavi li a:after {
	content: " ";
	clear: both;
	display: block;
}
#headNavi  .wrap-headNavi li a span {
	font-size:1.2em;
}
#headNavi .navi-8 a {width: 11.625%;}
#headNavi .navi-7 a {width: 13.428%;}
#headNavi .navi-6 a {width: 15.833%;}
#headNavi .navi-5 a {width: 19.2%;}
#headNavi .navi-4 a {width: 24.25%;}
#headNavi .navi-3 a {width: 32.666%;}

#headNavi .wrap-headNavi li:last-of-type a {margin-right: 0;}

/* ------------- �w�b�_�[�i�r�X�}�z�p�������� ----------- */
@media screen and (max-width: 599px) {
#headNavi {
	border-bottom: none;
	border-top: 3px #333 solid;
	bottom: 0;
	padding:0 1%;
	top: auto;
	width: 98%;
}
#headNavi .wrap-headNavi {
	padding:0 1%;
	width: 98%;
}
}
/* ------------- �w�b�_�[�i�r�X�}�z�p�����܂� ----------- */

/* ------------- �w�b�_�[�Œ�i�r�����܂�
 ----------------------------------------------------- */

/* ------------- �d���f���‚�������
 ----------------------------------------------------- */
.ledText {
    overflow: hidden;
    position: relative;
    padding:5px 0;
    color: #f6d638;
    font-size: 3em;
    font-weight: bold;
    background: #333333;
}
 
/* CSS3�O���f�[�V�����Ńh�b�g�����o�� */
.ledText:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
    background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
    background-size: 2px 2px;
    z-index: 10;
}
 
/* CSS3�A�j���[�V�����ŃX�N���[�� */
.ledText span {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    -webkit-animation-name: marquee;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 15s;
    -moz-animation-name: marquee;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 15s;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 15s;
}
 
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

@media screen and (max-width: 599px) {
.ledText {
    font-size: 1.5em;
}
}
/* ------------- �d���f���‚����܂�
 ----------------------------------------------------- */
 
/* ------------- �|�C���g������������
 ----------------------------------------------------- */
.pointtext {
	font-size: 1.5em;
	font-weight: bold;
	background: #f6d638;
	line-height: 2.5em;
	padding: 2em 0 1em;
	text-align: center;
	}
.pointtext span {
	color: #f44336;
	font-size: 1.5em;
	}
.pointtext a {
	background: #f44336;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	text-decoration: none;
	padding: .5em 2em;
	margin: -.2em 0 0 0;
	}
.pointtext a:hover {
	background: #ddc936;
	}


@media screen and (max-width: 599px) {
.pointtext {font-size: .8em;}
}



 
/* ------------- �|�C���g���������܂�
 ----------------------------------------------------- */

/* ------------- �E���y�[�WTOP�փ{�^����������
 ----------------------------------------------------- */
#pagetop a {
	background: #c00;
	border-radius: 5em;
	box-sizing: border-box;
	bottom: 2em;
	color: #fff;
	display: block;
	font-weight: bold;
	font-size: 1em;
	height: 6em;
	line-height: 1;
	position: fixed;
	padding: .5em 0 0;
	right: 2.5em;
	text-align: center;
	text-decoration: none;
	width: 6em;
}
#pagetop a span {
	font-size: 4em;
}
@media screen and (max-width: 599px) {
#pagetop a {
	background: #fff;
	bottom: 6em;
	border: 1px #ccc solid;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	color: #ccc;
	font-size: .8em;
	height: 3em;
	right: 0;
	opacity:0.9;
	padding: .4em 0;
	width: 4em;
	z-index: 9999;
}
#pagetop a span {
	font-size: 1.2em;
}
}

/* ------------- �E���y�[�WTOP�փ{�^�������܂�
 ----------------------------------------------------- */
 
/* ------------- �����ƌ��邱������
 ----------------------------------------------------- */
#goods .morebtn {
	background: #f60;
	color: #fff;
	display: block;
	box-sizing: border-box;
	font-size: 2em;
	font-weight: bold;
	margin: 0 10% 2em;
	padding: 1.2em 0;
	width: 80%;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
}

@media screen and (max-width: 599px) {
#goods .morebtn {
	font-size: 1.2em;
}
}
#goods .morebtn:hover {
	background: #E10033;
	}

/* ------------- �����ƌ��邱���܂�
 ----------------------------------------------------- */
 
/* ------------- ���w�肱������
 ----------------------------------------------------- */
#goods .bnr-100 {width: 100%;}
#goods .bnr-95 {width: 95%;}
#goods .bnr-90 {width: 90%;}
#goods .bnr-85 {width: 85%;}
#goods .bnr-80 {width: 80%;}
#goods .bnr-75 {width: 75%;}
#goods .bnr-70 {width: 70%;}
#goods .bnr-65 {width: 65%;}
#goods .bnr-60 {width: 60%;}
#goods .bnr-55 {width: 55%;}
#goods .bnr-50 {width: 50%;}
#goods .bnr-45 {width: 45%;}
#goods .bnr-40 {width: 40%;}

#goods .bnr-100, #goods .bnr-95, #goods .bnr-90, #goods .bnr-85, #goods .bnr-80, #goods .bnr-75, #goods .bnr-70, #goods .bnr-65, #goods .bnr-60, #goods .bnr-55, #goods .bnr-50, #goods .bnr-45, #goods .bnr-40 {margin: 0 auto; line-height: 0;}
#goods .bnr-100 img, #goods .bnr-95 img, #goods .bnr-90 img, #goods .bnr-85 img, #goods .bnr-80 img, #goods .bnr-75 img, #goods .bnr-70 img, #goods .bnr-65 img, #goods .bnr-60 img, #goods .bnr-55 img, #goods .bnr-50 img, #goods .bnr-45 img, #goods .bnr-40 img {width: 100%;}



/* ------------- ���w�肱���܂�
 ----------------------------------------------------- */


/* ------------- �����{�b�N�X��������
 ----------------------------------------------------- */
body {
	background: #f7f7f7;
	}
.searchBox {
	box-sizing: border-box;
	margin: .5em 5%;
	width: 90%;
	}
.searchBox .frame {
	float: left;
	position: relative;
	width: 60%;
	}
.searchBox .frame input {
	border: #999 1px solid;
	padding: .5em 0 .5em 5%;
	width: 95%;
	}
.searchBox label {
	display: block;
	float: left;
	width: 25%;
	}
.searchBox label input[type="submit"] {
	background: #f60;
	border: none;
	border-radius: 3px;
	box-sizing: border-box;
	color: #fff;
	padding: .5em 0;
	margin: 0 0 0 5%;
	width: 95%;
	}
.searchBox:after {
	content: " ";
	clear: both;
	display: block;
}
input[type="TEXT"], input[type="button"], input[type="submit"] {
	-webkit-appearance: none;
}
.searchBox .clearButton {
	position: absolute;
	top: 0.4em;
	right: 2%;
	z-index: 99;
	}
/* �u���E�U�̃f�t�H���g�N���A�{�^�����o���Ȃ� */
.searchBox .search::-webkit-search-cancel-button {
	color: #fff;
}
.searchBox .search::-ms-clear {
	color: #fff;
}

@media screen and (min-width: 600px) {
.searchBox {
	margin: .5em auto;
	width: 600px;
	}
.searchBox .frame {
	width: 70%;
	}
.searchBox label {
	width: 30%;
	}
}


/* ------------- �����{�b�N�X�����܂�
 ----------------------------------------------------- */


a#link01, a#link02, a#link03, a#link04, a#link05, a#link06, a#link07, a#link08, a#link09, a#link10, a#link01b, a#link02b, a#link03b, a#link04b, a#link05b, a#link06b, a#link07b, a#link08b, a#link09b, a#link10b, h2#link01, h2#link02, h2#link03, h2#link04, h2#link05, h2#link06, h2#link07, h2#link08, h2#link09, h2#link10, h2#link01b, h2#link02b, h2#link03b, h2#link04b, h2#link05b, h2#link06b, h2#link07b, h2#link08b, h2#link09b, h2#link10b {
	display:block;
	margin-top:-60px !important;
	padding-top:60px !important;
}
}