@charset "UTF-8";


/* ----- 全体 ----- */

.pcView {
	display: inline-block;
}

.spView {
	display: none;
}

a[href^="tel:"] {
	pointer-events: none;
}

/* ===== ----- ヘッダー ----- ===== */

.headArea {
	max-width: 1040px;
	margin: 0px auto;
	padding: 0px 20px;
	box-sizing: border-box;
}

.headLt {
	float: left;
	width: 54%;
	font-size: 80%;
}

.headRt {
	float: right;
	width: 44%;
	font-size: 90%;
}

.logo {
	width: 221px;
	height: 27px;
	background: url(../img/logo.png) no-repeat 0px 0px;
	background-size: 221px auto;
	text-indent: -9999px;
	margin: 18px 0px 15px 0px;
}

.logo a {
	display: block;
	width: 100%;
	height: 100%;
}

.logoTp {
	padding-top: 5px;
}

.logoBtm {
	padding-bottom: 20px;
}

.headMenu {
	float: right;
}

.headMenu li {
	position: relative;
	float: left;
	display: inline-block;
	margin-top: 12px;
	padding-right: 20px;
}

.headMenu li:after {
	content: "";
	position: absolute;
	top: 4px;
	right: 10px;
	height: 14px;
	border-right: 1px solid #333;
}

.headMenu li:last-child {
	padding-right: 0px;
}

.headMenu li:last-child:after {
	border-right: none;
}

.headMenu li a {
	text-decoration: none;
	line-height: 110%;
	color: #333;
}

.headMenu li a:hover{
	text-decoration: underline;
}

.headMember {
	float: right;
	padding-top: 20px;
}

.headMember img {
	vertical-align: top;
}

.headMember li {
	float: left;
	margin-top: 5px;
	padding-left: 20px;
}

.headMember li.cart {
	padding-left: 30px;
}

.headMember li.cart a {
	position: relative;
}

.headMember li.cart span {
	position: absolute;
	top: -11px;
	left: -5px;
	display: inline-block;
	background-color: #ff8000;
	width: 24px;
	height: 24px;
	font-size: 95%;
	font-weight: bold;
	text-align: center;
	line-height: 26px;
	color: #fff;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}

a.headBtn {
	display: inline-block;
	background-color: #333;
	width: 100px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	padding: 6px 6px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

.searchBar {
	padding: 5px 0px;
	background-color: #ff8000;
}

.searchBar .txt {
	float: left;
	width: 30%;
	color: #fff;
	padding: 8px 1% 0px 0px;
}

.searchArea {
	float: right;
	width: 69%;
}

.searchArea img {
	vertical-align: top;
}

.searchArea li {
	float: left;
}

.searchArea li.box {
	position: relative;
	width: 46%;
}

.searchArea li.line {
	float: right;
}

.searchCate {
	background: #fff url(../img/ico_sele.png) no-repeat right 0px center;
	width:150px;
	height: 40px;
	padding: 5px 45px 5px 15px;
	border: none;
	border-top-left-radius : 8px;
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	border-bottom-left-radius : 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-top-right-radius : 0px;
	-webkit-border-top-right-radius: 0px;
	-moz-border-radius-topright: 0px;
	border-bottom-right-radius : 0px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-radius-bottomright: 0px;
	box-shadow: 2px 1px 2px 1px rgba(0,0,0,0.2) inset;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.searchTxt {
	background: #fff url(../img/ico_search.png) no-repeat right 18px center;
	width: 100%;
	height: 40px;
	padding: 5px 40px 5px 15px;
	border: none;
	border-top-left-radius : 0px;
	-webkit-border-top-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	border-bottom-left-radius : 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-right-radius : 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	border-bottom-right-radius : 8px;
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	box-shadow: -2px 1px 2px 1px rgba(0,0,0,0.2) inset;
	box-sizing: border-box;
}

.submBtn {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 41px;
	height: 41px;
	cursor: pointer;
	opacity: 0;
}

/* ----- drawer ----- */

.drawer-menu li{
	margin-bottom: 0;
	background-color: #fffcf9;
}

.drawer-menu li a{
	display: block;
	padding: 12px 0 12px 15px !important;
	text-decoration: none;
	text-align: left;
	color: #333;
	border-bottom: 1px dotted #ff8000;
}

.drawer-menu li.mem a {
	background-color: #ff9932;
	color: #fff;
	border-bottom: 1px dotted #fff;
}

.drawer-menu li.mem.cart span {
	display: inline-block;
	background-color: #fff;
	width: 24px;
	height: 24px;
	font-size: 85%;
	font-weight: bold;
	text-align: center;
	line-height: 24px;
	color: #ff8000;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}

/* ===== ----- メイン ----- ===== */

.container {
	max-width: 1040px;
	margin: 0px auto;
	padding: 0px 20px;
	box-sizing: border-box;
}

.mainArea {
	max-width: 1040px;
	margin: 0px auto;
	padding: 20px 20px 50px 20px;
	box-sizing: border-box;
}

.mainTxt {
	text-align: justify;
	text-justify: distribute;
	padding-bottom: 20px;
}

h1 {
	font-size: 150%;
}

.mainArea h1.h1ttl {
	padding: 0 0 5px 0;
	font-size: 160%;
	border-bottom: 1px solid #e07e00;
}

.mainArea h2.h2ttl {
	margin: 40px 0 20px 0;
	padding: 0 0 0 8px;
	font-size: 120%;
	border-left: 5px solid #e07e00;
}

/* ===== ----- 商品一覧 ----- ===== */

h1 .listNum {
	display: inline-block;
	font-size: 60%;
	font-weight: normal;
	padding-left: 20px;
}

.listItem {
	margin-top: 10px;
	padding-top: 20px;
	border-top: 1px solid #ccc;
}

.listItem li:nth-child(even) {
	background-color: #f5f5f5;
}

.listItem a {
	position: relative;
	display: block;
	text-decoration: none;
	color: #333;
	padding: 20px 10px;
}

.listItem a:hover:after {
	position: absolute;
	content: "";
	top: 0px;
	left: 0px;
	background-color: rgba(255, 128, 0, 0.1);
	width: 100%;
	height: 100%;
}

.listItem .listPh {
	float: left;
	width: 140px;
	padding-right: 30px;
}

.listItem .listPh img {
	width: 100%;
	height: auto;
	border: 1px solid #ddd;
}

.listItem .listTxt {
	float: left;
	width: 100%;
	margin-left: -170px;
	padding-left: 170px;
	box-sizing: border-box;
}

.listItem .listTxt h2 {
	display: inline-block;
	font-size: 120%;
	padding-bottom: 10px;
}

.listItem .listPrice {
	display: inline-block;
	float: right;
}

.listItem .listPrice.noPri,
.detailPrice.noPri {
	font-size: 100%;
	font-weight: bold;
	color: #ee0000;
	margin: 5px 0px;
}

.listItem .listPrice span,
.detailPrice span {
	font-size: 280%;
	font-weight: bold;
	color: #ff0000;
}

.listItem .otherTxt {
	display: inline-block;
	float: right;
	text-align: right;
	padding-top: 25px;
	clear: right;
}

.listItem .otherTxt span {
	display: inline-block;
	padding-right: 25px;
}

.listItem .otherTxt span:last-child {
	padding-right: 10px;
}

.listItem span.detailBtn {
	display: inline-block;
	background-color: #333;
	font-size: 80%;
	line-height: 110%;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/* ----- ページング -----*/

.pager{
	text-align: center;
	padding: 35px 0px;
}

a.page-numbers,
.pager .current{
	background-color: #333;
	line-height: 240%;
	text-decoration: none;
	color: #fff;
	margin: 0 2px;
	padding: 5px 8px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.pager .current{
	background-color: #fff;
	font-weight: bold;
	color: #333;
	border: 1px solid #333;
}

/* ===== ----- 商品詳細 ----- ===== */

.detailPh {
	float: left;
	width: 36%;
}

.detailSpec {
	float: right;
	width: 54%;
}

.detailPh img {
	width: 100%;
	height: auto;
	border: 1px solid #ddd;
}

.detailSpec dt {
	float: left;
	width: 30%;
	margin-top: 5px;
	padding-top: 30px;
	border-top: 1px solid #ccc;
}

.detailSpec dd {
	float: left;
	width: 70%;
	margin-top: 5px;
	padding-top: 30px;
	border-top: 1px solid #ccc;
}

.detailSpec dt:first-child,
.detailSpec dd:nth-child(2) {
	margin-top: 0px;
	padding-top: 0px;
	border-top: none;
}

.detailSpec dl {
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
}

.requestArea {
	text-align: center;
}

.requestArea a,
.requestArea button {
	display: inline-block;
	background-color: #333;
	font-size: 120%;
	text-align: center;
	text-decoration: none;
	color: #fff;
	margin: 50px auto 10px auto;
	padding: 30px 150px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-sizing: border-box;
	border: 0px;
}

/* ===== ----- カート ----- ===== */

.card-body h2.cartTtl {
	background-color: #ddd;
	font-size: 100%;
	line-height: 120%;
	color: #333;
	padding: 6px 5px 4px 20px;
}

.card-body table {
	width: 100%;
	margin: 20px 0px 40px 0px;
	box-sizing: border-box;
}

.card-body thead th {
	font-size: 80%;
	font-weight: normal;
	text-align: left;
	padding: 5px 0.5%;
	border-bottom: 1px dotted #ccc;
}

.card-body tbody td {
	font-size: 90%;
	padding: 15px 0.5%;
	border-bottom: 1px dotted #ccc;
}

.card-body thead th.ph {
	width: 12%;
}

.card-body thead th.name {
	width: 50%;
}

.card-body thead th.num,
.card-body thead th.price {
	width: 15%;
}

.card-body thead th.btn {
	width: 6%;
}

.card-body img {
	width: 90%;
	height: auto;
}

.card-body tbody input {
	width: 70%;
}

.card-body tbody td.name {
	font-size: 100%;
	font-weight: bold;
}

.card-body tbody td.name span {
	display: inline-block;
	font-size: 80%;
	font-weight: normal;
	text-align: justify;
	text-justify: distribute;
	padding-top: 5px;
}

.card-body tbody td.price {
	font-size: 100%;
	font-weight: bold;
	color: #ee0000;
}

.card-body tfoot td {
	font-size: 100%;
	font-weight: bold;
	padding: 15px 0.5%;
}


/* ===== ----- ログイン ----- ===== */

.loginArea {
	max-width: 400px;
	margin: 50px auto 30px auto;
	padding: 20px 30px 20px 30px;
	border: 1px solid #ddd;
	box-sizing: border-box;
}

.loginArea h1,
.loginArea h2 {
	font-size: 120%;
	margin-bottom: 20px;
	padding-bottom: 5px;
	border-bottom: 1px dotted #ccc;
}

.loginArea h2 {
	font-size: 110%;
	margin-bottom: 10px;
}

.loginForm dd {
	padding-bottom: 15px;
}

.loginForm dd:last-child {
	padding-bottom: 0px;
}

.loginBtn,
a.loginBtn {
	display: inline-block;
	background-color: #333;
	width: 100%;
	text-align: center;
	text-decoration: none;
	color: #fff;
	margin: 10px auto 10px auto;
	padding: 15px 6px;
	border: none;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-sizing: border-box;
}


/* ===== ----- マイページ ----- ===== */

.mypageArea {
	padding: 35px 0px 0px 0px;
}

.mypageLt {
	position: relative;
	float: left;
	width: 260px;
	padding-right: 40px;
	z-index: 100px;
}

.mypageRt {
	float: left;
	width: 100%;
	margin-left: -300px;
	padding-left: 300px;
	box-sizing: border-box;
	z-index: 1px;
}

.maypageMenu {
	display: block;
}

.maypageMenu li {
	margin-bottom: 1px;
}

.maypageMenu li a {
	display: block;
	background: url(../img/ico_mypagemenu.png) no-repeat 15px 19px, linear-gradient(#fff, #d8d8d8);
	line-height: 110%;
	text-decoration: none;
	color: #333;
	padding: 15px 10px 15px 35px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

.maypageMenu li a:hover,
.maypageMenu li a.menuAct {
	background: url(../img/ico_mypagemenu.png) no-repeat 15px 19px, linear-gradient(#fff, #ffdbb8);
}

.mypageTtl {
	font-size: 130%;
	padding-bottom: 20px;
}

.messArea {
	padding: 20px 30px;
	border: 1px solid #ddd;
	box-sizing: border-box;
}

a.spmenuBtn {
	display: none;
}

/* ===== ----- 依頼履歴 ----- ===== */

.historyItem {
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

.historyData {
	background-color: #f0f0f0;
}

.historyData li {
	display: inline-block;
	font-size: 80%;
	padding: 5px 2%;
}

.statusArea {
	font-size: 120%;
	text-align: right;
	margin: 15px 4% 20px 4%;
}

.statusArea span {
	display: inline-block;
}

.historyList {
	width: 92%;
	margin: 10px 4% 25px 4%;
	border-collapse: collapse;
}

.historyList th {
	font-size: 80%;
	font-weight: normal;
	text-align: left;
	padding: 5px 0.5%;
	border-bottom: 1px solid #999;
}

.historyList td {
	font-size: 90%;
	padding: 10px 0.5%;
	border-bottom: 1px dotted #ccc;
}

.historyList td.name {
	width: 60%;
}

.historyList td.num {
	width: 10%;
}

.historyList td.price {
	width: 15%;
}

.historyList td.newold {
	width: 15%;
}


/* ----- フォーム ----- */

.formDl {
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 1px dotted #ddd;
}

.formDl dt,
.formDl dd {
	float: left;
	width: 65%;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dotted #ddd;
}

.formDl dt.noBorder,
.formDl dd.noBorder {
	margin-top: 15px;
	padding-top: 15px;
	border-top: none;
}

.formDl dt {
	clear: both;
	width: 24%;
	font-weight: bold;
	padding-top: 28px;
	padding-right: 1%;
}

.formDl dd.reqArea {
	position: relative;
	width: 10%;
}

.formDl.confirm dd.reqArea:after {
	content: "：";
	position: absolute;
	top: 27px;
	right: 10px;
}

.formDl dd.txtSpace,
.formDl.confirm dd {
	padding-top: 26px;
}

.reqArea span {
	display: inline-block;
	background-color: #ff8000;
	width: 40px;
	font-size: 80%;
	text-align: center;
	line-height: 110%;
	color: #fff;
	margin-top: 8px;
	padding: 6px 6px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-sizing: border-box;
}

.txtbox01,
.txtbox02,
.txtbox03,
.txtbox04,
.txtbox05 {
	width: 100%;
	padding: 10px 3%;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

.txtbox02 {
	width: 80%;
}

.txtbox03 {
	width: 20%;
}

.txtbox04 {
	width: 20%;
}

.txtbox05 {
	height: 100px;
}

a.nmlBtn,
.nmlBtn {
	display: block;
	background-color: #333;
	width: 60%;
	text-align: center;
	text-decoration: none;
	color: #fff;
	margin: 10px auto 10px auto;
	padding: 15px 6px;
	border: none;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-sizing: border-box;
}

a.nmlBtn.confirm,
.nmlBtn.confirm {
	display: inline-block;
}

a.nmlBtn.backBtn,
.nmlBtn.backBtn {
	display: inline-block;
	background-color: #f0f0f0;
	width: 35%;
	color: #333;
	margin-left: 5%;
	border: 1px solid #ccc;
}

a.oraBtn,
.oraBtn {
	display: inline-block;
	background-color: #f08801;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff;
	margin: 10px auto 10px auto;
	padding: 15px 40px;
	border: none;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-sizing: border-box;
	box-shadow: 0px 3px 0px 0px rgba(185,107,0,1.0);
}

a.smlBtn,
.smlBtn {
	display: inline-block;
	background-color: #333;
	text-align: center;
	text-decoration: none;
	color: #fff;
	padding: 5px 8px;
	border: none;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-sizing: border-box;
}

.errTxt {
	font-size: 90%;
	font-weight: bold;
	color: #cc0000;
	padding-top: 5px;
}

.errBoxArea {
	background-color: #FDE9E9;
	border: 1px solid #F3BBBB;
	font-size: 90%;
	font-weight: bold;
	color: #cc0000;
	text-align: center;
	margin: 0px 0px 25px 0px;
	padding: 15px;
}

.danbollLi li {
	float: left;
	width: 29%;
	padding: 0px 2%;
	border-right: 1px solid #f0f0f0;
}

.danbollLi li:last-child {
	border-right: none;
}

.danbollLi li img {
	max-width: 100%;
	height: auto;
}

/* ===== ----- フッター ----- ===== */

.footGuideArea {
	background-color: #fff8ee;
	margin-top: 20px;
	padding: 0px 0px 50px 0px;
}

.footGuideArea .footGuideBtn {
	max-width: 1040px;
	margin: 0px auto;
	padding: 20px 20px 0px 20px;
	box-sizing: border-box;
}

.footGuideArea .footGuideBtn li {
	float: left;
	width: 32%;
	padding-right: 2%;
}

.footGuideArea .footGuideBtn li:last-child {
	padding-right: 0px;
}

.footGuideArea .footGuideBtn li img {
	width: 100%;
	height: auto;
}

.footLogoArea {
	background-color: #525252;
	color: #fff;
	padding: 30px 0px 0px 0px;
}

.footLogo {
	float: left;
	width: 300px;
}

.footLogo a {
	display: block;
	width: 221px;
	height: 27px;
	background: url(../img/logo_white.png) no-repeat 0px 0px;
	background-size: 221px auto;
	text-indent: -9999px;
	margin: 18px 0px 10px 0px;
}

.footLogo span {
	display: block;
	width: 221px;
	font-size: 60%;
	font-weight: normal;
	text-align: center;
	color: #ff8000;
	margin: 0px 0px 30px 0px;
}

.footContact li {
	float: left;
}

.footContact li.tel {
	background: url(../img/ico_tel.png) no-repeat 0px bottom;
}

.footContact li.tel span {
	display: block;
	font-size: 90%;
	color: #fff;
	margin-top: 0px;
	padding: 0px 0px 0px 50px;

}

.footContact li.tel a {
	display: block;
	font-family: Arial, sans-serif;
	font-size: 280%;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	margin-top: 0px;
	padding: 6px 0px 0px 50px;

}

.footContact li.mail {
	float: right;
}

.footContact li.mail a {
	display: inline-block;
	background: #fff url(../img/ico_mail.png) no-repeat 10px center;
	font-size: 120%;
	font-weight: bold;
	text-decoration: none;
	color: #333;
	margin-top: 12px;
	padding: 15px 15px 15px 60px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

.footMenuArea {
	background-color: #3a3a3a;
	color: #fff;
	padding: 30px 0px 0px 0px;
}

.footMenu {
	float: left;
	width: 260px;
}

.footMenu li {
	padding: 0px 0px 5px 0px;
}

.footMenu li a {
	background: url(../img/ico_link01.png) no-repeat 0px 4px;
	font-size: 90%;
	text-decoration: none;
	color: #fff;
	padding: 0px 0px 0px 20px;
}

.footMenu li a:hover{
	text-decoration: underline;
}

#kobutsu {
	font-size: 90%;
	text-align: center;
	padding: 50px 0px 0px 0px;
}

#copyright {
	font-size: 90%;
	text-align: center;
	padding: 16px 0px 28px 0px;
}


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

.footLogo {
	width: 240px;
}

.footLogo a {
	width: 200px;
	height: 24px;
	background: url(../img/logo_white.png) no-repeat 0px 0px;
	background-size: 200px auto;
}

.footLogo span {
	width: 200px;
	font-size: 50%;
}

.footContact li.tel a {
	font-size: 220%;
}

.footContact li.mail a {
	background: #fff url(../img/ico_mail.png) no-repeat 10px center;
	background-size: 24px auto;
	font-size: 100%;
	margin: 10px 0px 0px 0px;
	padding: 18px 13px 13px 40px;
}

}