/* ===============================================================================
Shop CSS
=============================================================================== */
#shopArea {
	padding: 25px 0 260px;
}
#shopArea .inner {
	width: 1015px;
	margin: 0 auto;
}

@media screen and (min-width: 768.1px) {
	#shopArea {
		padding: calc(25 / 1280 * 100vw) 0 calc(260 / 1280 * 100vw);
	}
	#shopArea .inner {
		width: calc(1015 / 1280 * 100vw);
	}
}
@media screen and (max-width: 768px) {
	#shopArea {
		padding: 20px 0 150px;
	}
	#shopArea .inner {
		width: auto;
		padding: 0 15px;
	}
}

/* shopLocalNavi
	======================================== */
#shopLocalNavi {
	text-align: center;
}

@media screen and (min-width: 768.1px) {
	#shopLocalNavi img {
		width: calc(734 / 1280 * 100vw);
		height: auto;
	}
}


/* shopBlocks
	======================================== */
/* shopItemList01 */
.shopItemList01 .mainList > li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 100px 0 0;
}
.shopItemList01 .mainList > li:first-child {
	padding-top: 57px;
}
.shopItemList01 .mainList > li + li {
	margin-top: 105px;
	border-top: 1px solid #b3b3b3;
}
.shopItemList01 .image {
	flex: 0 0 auto;
	width: 500px;
}
.shopItemList01 .descriptions {
	flex: 0 0 auto;
	width: 450px;
	margin-top: 5px;
}
.shopItemList01 .heading {
	margin-bottom: 22px;
}
.shopItemList01 .heading p {
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: .05em;
	font-weight: bold;
	margin-bottom: 10px;
}
.shopItemList01 h2 {
	font-size: 2rem;
	letter-spacing: .05em;
}
.shopItemList01 h2 .sub {
	display: block;
	font-size: 1.0rem;
	letter-spacing: normal;
	text-transform: uppercase;
}
.shopItemList01 .desc {
	margin-bottom: 10px;
}
.shopItemList01 .desc p {
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: .05em;
}
.shopItemList01 .desc p.marginTop {
	margin-top: 10px;
}
.shopItemList01 .desc p .smaller {
	font-size: 0.75em;
}
.shopItemList01 .desc .dotList {
	margin-top: 10px;
}
.shopItemList01 .desc .dotList .smaller {
	font-size: 0.75em;
}
.shopItemList01 .desc .dotList:last-child {
	margin-bottom: 30px;
}
.shopItemList01 .desc .dotList > li {
	position: relative;
	padding-left: 2.0em;
}
.shopItemList01 .desc .dotList > li::before {
	content: '●';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.shopItemList01 .desc .dotList > li.type02::before {
	content: '○';
}
.shopItemList01 .note {
	margin-bottom: 18px;
	font-size: 0.8125rem;
}
.shopItemList01 .note li {
	position: relative;
	padding-left: 3.0em;
}
.shopItemList01 .note .number {
	position: absolute;
	top: 0;
	left: 0;
}
.shopItemList01 .items {
	margin-top: 30px;
}
.shopItemList01 .itemButtons > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 21px 23px 21px 20px;
	background: #f0f6f2;
}
.shopItemList01 .itemButtons > li + li {
	margin-top: 18px;
}
.shopItemList01 .itemButtons .itemName {
	display: inline-block;
	position: relative;
	padding-left: 1.2em;
	line-height: 1.3;
}
.shopItemList01 .itemButtons .itemName::before {
	content: '●';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.shopItemList01 .itemButtons .price {
	margin-left: 0.3em;
}
.shopItemList01 .itemButtons .addButton {
	flex: 0 0 auto;
}
.shopItemList01 .itemButtons button {
	padding: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}
.shopItemList01 .itemButtons button:hover {
	opacity: 0.7;
}
.shopItemList01 .itemButtons button:focus {
	outline: none;
}
.shopItemList01 .items .notice {
	position: relative;
	margin-top: 19px;
	margin-left: 10px;
	padding-left: 2.0em;
	color: #f00;
}
.shopItemList01 .items .notice::before {
	content: '※';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.dirPath li a {
	color: #fff;
}
#footerArea .footerInner ul li a {
	color: #fff;
}
#footerArea .footerInner #copyright {
	color: #fff;
}

@media screen and (min-width: 768.1px) {
	.shopItemList01 .mainList > li {
		padding: calc(100 / 1280 * 100vw) 0 0;
	}
	.shopItemList01 .mainList > li:first-child {
		padding-top: calc(57 / 1280 * 100vw);
	}
	.shopItemList01 .mainList > li + li {
		margin-top: calc(105 / 1280 * 100vw);
		border-top-width: calc(1 / 1280 * 100vw);
	}
	.shopItemList01 .image {
		width: calc(500 / 1280 * 100vw);
	}
	.shopItemList01 .image img {
		width: 100%;
		height: auto;
	}
	.shopItemList01 .descriptions {
		width: calc(450 / 1280 * 100vw);
		margin-top: calc(5 / 1280 * 100vw);
	}
	.shopItemList01 .heading {
		margin-bottom: calc(22 / 1280 * 100vw);
	}
	.shopItemList01 .heading p {
		margin-bottom: calc(10 / 1280 * 100vw);
	}
	.shopItemList01 .desc {
		margin-bottom: calc(10 / 1280 * 100vw);
	}
	.shopItemList01 .desc p.marginTop {
		margin-top: calc(10 / 1280 * 100vw);
	}
	.shopItemList01 .desc .dotList {
		margin-top: calc(10 / 1280 * 100vw);
	}
	.shopItemList01 .desc .dotList:last-child {
		margin-bottom: calc(30 / 1280 * 100vw);
	}
	.shopItemList01 .note {
		margin-bottom: calc(18 / 1280 * 100vw);
	}
	.shopItemList01 .items {
		margin-top: calc(30 / 1280 * 100vw);
	}
	.shopItemList01 .itemButtons > li {
		padding: calc(21 / 1280 * 100vw) calc(23 / 1280 * 100vw) calc(21 / 1280 * 100vw) calc(20 / 1280 * 100vw);
	}
	.shopItemList01 .itemButtons > li + li {
		margin-top: calc(18 / 1280 * 100vw);
	}
	.shopItemList01 .itemButtons img {
		width: calc(67 / 1280 * 100vw);
		height: auto;
	}
	.shopItemList01 .items .notice {
		margin-top: calc(19 / 1280 * 100vw);
		margin-left: calc(10 / 1280 * 100vw);
	}
}
@media screen and (max-width: 768px) {
	.shopItemList01 .mainList > li {
		display: block;
		padding: 50px 0 0;
	}
	.shopItemList01 .mainList > li:first-child {
		padding-top: 30px;
	}
	.shopItemList01 .mainList > li + li {
		margin-top: 50px;
	}
	.shopItemList01 .image {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	.shopItemList01 .descriptions {
		width: 100%;
		margin-top: 20px;
	}
	.shopItemList01 .heading {
		margin-bottom: 12px;
	}
	.shopItemList01 .heading p {
		font-size: 1rem;
		margin-bottom: 10px;
	}
	.shopItemList01 h2 {
		font-size: 1.714rem;
	}
	.shopItemList01 .desc {
		margin-bottom: 10px;
	}
	.shopItemList01 .desc p {
		font-size: 1rem;
		line-height: 1.6;
	}
	.shopItemList01 .note {
		margin-bottom: 16px;
		font-size: 0.857rem;
	}
	.shopItemList01 .items {
		margin-top: 20px;
	}
	.shopItemList01 .itemButtons > li {
		padding: 15px 15px 15px 10px;
	}
	.shopItemList01 .itemButtons > li + li {
		margin-top: 13px;
	}
	.shopItemList01 .itemButtons .price {
		display: inline-block;
		margin-left: 0;
	}
	.shopItemList01 .items .notice {
		margin-top: 15px;
		margin-left: 0;
		padding-left: 1.5em;
	}
	#shop{
		width: 100%;
	}
}

/* かご
	======================================== */
#headerArea.kago{
	padding-bottom: 90px;
}

@media screen and (min-width: 768.1px) {
	#headerArea.kago{
		padding-bottom: calc(90 / 1280 * 100vw);
	}
}
@media screen and (max-width: 768px) {
	#headerArea.kago{
		padding-bottom: 0px;
	}
}

.shopKago{
	margin-top: 40px;
}
.shopKago a {
	color: #3d976c;
	text-decoration: underline;
}
.shopKago .inner{
	border-bottom: 1px dotted #333;
	padding-bottom: 40px;
}
.shopKago:last-child .inner{
	border-bottom: 0px;
}
.shopKago h2{
	text-align: center;
	font-size: 20px;
	margin-bottom: 20px;
	font-weight: bold;
}
.shopKago table{
	width: 100%;
	margin-top: 20px;
}
.kagotable{
	width: 100%;
	margin-top: 20px;
}
.kagotable th,
.kagotable td{
	padding: 10px;
	border: 1px solid #333;
}
.kagotable th{
	background: #eee;
	font-weight: bold;
}
.tc{
	text-align: center;
}
.tr{
	text-align: right;
}
.fwb{
	font-weight: bold;
}
.price{
	font-weight: bold;
	color: brown;
}
.num{
	text-align: right;
}
.buttonArea{
	margin: 20px 0;
}
.buttonArea ul.buttonLeft{
	float: left;
}
.buttonArea ul.buttonRight{
	float: right;
}
.buttonArea ul li{
	float: left;
}
.buttonArea ul.buttonLeft li{
	margin-right: 10px;
}
.buttonArea ul.buttonRight li{
	margin-left: 10px;
}
.buttonArea::after{
	content: "";
	clear: both;
	display: table;
}
.buttonArea ul::after{
	content: "";
	clear: both;
	display: table;
}
.kaiintable,
.ippantable,
.borderTable{
	margin: 20px 0;
	width: 100%;
}
.kaiintable .req,
.ippantable .req{
	color:red;
}
.kaiintable th,
.ippantable th,
.borderTable th{
	text-align: left;
	width: 20%;
}
.kaiintable th,
.kaiintable td,
.ippantable th,
.ippantable td{
	padding: 10px;
}
.ippantable th,
.ippantable td{
	padding: 20px 10px;
}
.borderTable th,
.borderTable td{
	padding: 10px;
	border: 1px solid #333;
}
.sz_3  {width:3rem;}
.sz_4  {width:4rem;}
.sz_6  {width:6rem;}
.sz_8  {width:8rem;}
.sz_12 {width:12rem;}
.sz_16 {width:16rem;}
.sz_18 {width:18rem;}
.sz_21 {width:21rem;}
.sz_24 {width:24rem;}
.sz_27 {width:27rem;}
.sz_32 {width:32rem;}
.sz_36 {width:36rem;}
.sz_40 {width:40rem;}
.sz_42 {width:42rem;}
.sz_48 {width:48rem;}
.sz_52 {width:52rem;}
.sz_56 {width:56rem;}
.sz_60 {width:60rem;}
.sz_64 {width:64rem;}
.sz_72 {width:72rem;}
.sz_80 {width:80rem;}
.sz_88 {width:88rem;}
.sz_92 {width:92rem;}
.sz_96 {width:86rem;}
.sz_100{width:100rem;}
@media screen and (max-width: 768px) {
	.sz_48,
	.sz_52,
	.sz_56,
	.sz_60,
	.sz_64,
	.sz_72,
	.sz_80,
	.sz_88,
	.sz_92,
	.sz_96,
	.sz_100{width:100%;}
}
.shopKago textarea{
	width: 500px;
}

@media screen and (min-width: 768.1px) {
	.shopKago{
		margin-top: calc(40 / 1280 * 100vw);
	}
	.shopKago .inner{
		border-bottom-width: calc(1 / 1280 * 100vw);
		padding-bottom: calc(40 / 1280 * 100vw);
	}
	.shopKago .inner > p > img[src$="/c_1.gif"],
	.shopKago .inner > p > img[src$="/c_6.gif"],
	.shopKago .inner > p > img[src$="/c_7.gif"],
	.shopKago .inner > p > img[src$="/c_13.gif"] {
		width: calc(383 / 1280 * 100vw);
	}
	.shopKago .inner > p > img[src$="/ippan.gif"],
	.shopKago .inner > p > img[src$="/kaiin.gif"] {
		width: calc(395 / 1280 * 100vw);
	}
	.shopKago h2{
		font-size: calc(20 / 1280 * 100vw);
		margin-bottom: calc(20 / 1280 * 100vw);
	}
	.shopKago table{
		margin-top: calc(20 / 1280 * 100vw);
	}
	.kagotable{
		margin-top: calc(20 / 1280 * 100vw);
	}
	.kagotable th,
	.kagotable td{
		padding: calc(10 / 1280 * 100vw);
		border-width: calc(1 / 1280 * 100vw);
	}
	.kagotable select {
		font: inherit;
	}
	.buttonArea{
		margin: calc(20 / 1280 * 100vw) 0;
	}
	.buttonArea ul.buttonLeft li{
		margin-right: calc(10 / 1280 * 100vw);
	}
	.buttonArea ul.buttonRight li{
		margin-left: calc(10 / 1280 * 100vw);
	}
	.buttonArea img {
		width: calc(116 / 1280 * 100vw);
	}
	.buttonArea img[src$="/_toppage.gif"] {
		width: calc(160 / 1280 * 100vw);
	}
	.buttonArea img[src$="/order.gif"] {
		width: calc(225 / 1280 * 100vw);
	}
	.kaiintable,
	.ippantable,
	.borderTable{
		margin: calc(20 / 1280 * 100vw) 0;
	}
	.kaiintable th,
	.kaiintable td,
	.ippantable th,
	.ippantable td{
		padding: calc(10 / 1280 * 100vw);
	}
	.ippantable th,
	.ippantable td{
		padding: calc(20 / 1280 * 100vw) calc(10 / 1280 * 100vw);
	}
	.borderTable th,
	.borderTable td{
		padding: calc(10 / 1280 * 100vw);
		border-width: calc(1 / 1280 * 100vw);
	}
	.shopKago [type="text"],
	.shopKago textarea {
		border-width: calc(1 / 1280 * 100vw);
		font: inherit;
	}
	.shopKago textarea{
		width: calc(500 / 1280 * 100vw);
	}
	.shopKago [type="radio"] {
		width: 0.7em;
		height: 0.7em;
		font: inherit;
	}
}
@media screen and (max-width: 768px) {
	.kagotable th,
	.kagotable td{
		display: block;
		width: 100%;
		border: 0px;
		padding: 0;
	}
	.kagotable th{
		display: none;
	}
	.kagotable tr,
	.borderTable tr{
		border-bottom: 1px solid #999;
	}
	.kagotable tr:last-child{
		border-bottom: 0px;
	}
	.kagotable td:first-child{
		margin-top: 10px;
	}
	.kagotable td:last-child{
		margin-bottom: 10px;
	}
	.kaiintable td,
	.kaiintable th,
	.ippantable td,
	.ippantable th,
	.borderTable td,
	.borderTable th{
		display: block;
		width: 100%;
		padding: 5px;
	}
	.borderTable td,
	.borderTable th{
		border: 0px;
	}
	.ippantable th:first-child,
	.borderTable th:first-child{
		padding: 20px 0 0;
	}
	.ippantable td:last-child,
	.borderTable td:last-child{
		padding: 0 0 20px;
	}
	.buttonArea ul.buttonLeft{
		float: none;
	}
	.buttonArea ul.buttonRight{
		float: none;
	}
	.buttonArea ul li{
		float: none;
	}
	.buttonArea ul.buttonLeft li{
		margin-right: 0px;
	}
	.buttonArea ul.buttonRight li{
		margin-left: 0px;
	}
	.buttonArea ul li{
		margin-bottom: 10px;
		text-align: center;
	}
	.restr{
		text-align: right;
	}
	.shopKago textarea{
		width: 100%;
	}
}


.btn_del
	{
	height: 32px;
	width: 42px;
	background-color: darkorange;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #C9C9C9;
	padding: 3px 2px 0;
	cursor:pointer;
	color: yellow;
	}
	
/*--------------------------------------------------------
●操作ガイドCSS
--------------------------------------------------------*/

@media screen and (max-width: 768px) {
	.grad-wrap {
	  position: relative;
	  padding-bottom: 6em;
	}
	.grad-wrap + .grad-wrap {
	  margin-top: 40px;
	}
	.grad-trigger {
	  z-index: 2;
	  position: absolute;
	  right: 0;
	  bottom: 1em;
	  left: 0;
	  width: 148px;
	  margin: auto;
	  padding: .5em 0;
	  border-radius: 2px;
	  background: darkorange;
	  color: #fff;
	  font-size: 1.3rem;
	  text-align: center;
	  cursor: pointer;
	  transition: .2s ease;
	  box-shadow: 0 0 3px rgba(0,0,0,.3);
	}
	.grad-trigger::after {
	  content: "続きを読む" /*クリック前のボタンのラベル*/
	}
	.grad-trigger .fa {
	  margin-right: .5em;
	}
	.grad-item {
	  position: relative;
	  overflow: hidden;
	}
	.grad-item.is-hide {
	  height: 120px; /*隠した後の高さ*/
	}
	.grad-item::before {
	  display: block;
	  position: absolute;
	  bottom: -1em;
	  left: 0;
	  content: "";
	  width: 100%;
	  height: 3em; /*グラデーションで隠す高さ*/
	  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
	  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
	}
	.grad-trigger.is-show {
	  bottom: 1em;
	}
	.grad-trigger.is-show::after {
	  content: "閉じる" /*クリック後にボタンのラベルを変える*/
	}
	.grad-trigger.is-show + .grad-item::before {
	  display: none;
	}
}