
/*------------------------------------------------------------
	ショッピングガイド
------------------------------------------------------------*/

/*ガイドトップ*/
section#guideInfo div {
	border: 1px solid #ccc;
	padding: 15px;
	margin-bottom: 15px;
}

section#guideInfo div dl dt a {
	font-weight: 500;
}

section#guideInfo div dl dd {
	font-size: 1.1rem;
	line-height: 1.8;
}


@media only screen and (max-width: 813px) {
	
	section#guideInfo div dl {
		width: 65%;
		padding-left: 15px;
		float: right;
	}
	
	section#guideInfo div img {
		width: 35%;
		margin-top: 10px;
		float: left;
	}
	
	section#guideInfo div a.button {
		display: none;
	}

}


@media only screen and (min-width: 813px) {

	section#guideInfo div {
		padding: 25px 25px 82px;
		position: relative;
	}
	
	section#guideInfo div img {
		margin: 0 auto 20px;
	}
	
	section#guideInfo div dl {
		margin-bottom: 10px;
	}
	
	section#guideInfo div dl dt {
		text-align: center;
		margin-bottom: 5px;
	}
	
	section#guideInfo div dl dt a {
		text-decoration: none;
		color: #3B2D13;
	}
	
	section#guideInfo div dl dt a:hover {
		text-decoration: underline;
	}
	
	section#guideInfo div dl dd {
		font-size: 1.2rem;
	}
	
	section#guideInfo div a.button {
		position: absolute;
		bottom: 25px;
		left: 25px;
	}

}


/*ガイド共通*/
table.guide01 {
	width: 100%;
	border-top: 1px solid #ddd;
	line-height: 1.8;
	margin-bottom: 40px;
}


table.guide01 th {
	display: block;
	background: #F8F3EA;
	font-weight: 500;
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
}

table.guide01 td {
	display: block;
	border-bottom: 1px solid #ddd;
	padding: 15px 10px;
}

table.guide01 td ul li,
table.guide02 td ul li {
	text-indent: -1.2em;
	padding-left: 1.2em;
	line-height: 1.7;
	margin-bottom: 3px;
	text-align: left;
}

table.guide01 td ul li:last-child {
	margin-bottom: 0;
}

table.guide01 td dl dt {
	color: #C35865;
	font-weight: 500;
}

table.guide01 td dl:not(:last-of-type) {
	margin-bottom: 15px;
}

ol.guideOl {
	margin-bottom: 40px;
}

ol.guideOl li {
	text-indent: -3em;
	padding-left: 3em;
	line-height: 1.7;
	margin-bottom: 3px;
}




@media only screen and (min-width: 813px) {
	
	table.guide01 {
		margin-bottom: 50px;
	}
	
	table.guide01 th {
		display: table-cell;
		background: #F8F3EA;
		width: 200px;
		padding: 30px 0;
	}
	
	table.guide01 td {
		display: table-cell;
		padding: 30px;
	}
	
	ol.guideOl {
		margin-bottom: 50px;
	}

}

/*ご注文方法*/
p.tellNumber {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: 1px;
	color: #C35865;
	text-align: center;
	padding-bottom: 10px;
}

p.faxNumber {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: 1px;
	color: #2d2d2d;
	text-align: center;
}

p.faxNumber span,
p.tellNumber span {
	display: block;
	font-size: 1.1rem;
	color: #000;
}


/*お支払い方法*/
div.borderBox {
	border: 1px solid #ddd;
	padding: 15px;
	margin-bottom: 15px;
}

table.guide01 .guideAccordion {
	margin-bottom: 5px;
}

table.guide01 .guideAccordion dt {
	background: #EEE;
	font-size: 1.1rem;
	font-weight: 500;
	color: #000;
	padding: 10px 15px;
	position: relative;
}

table.guide01 .guideAccordion dt:hover,
table.guide01 .guideAccordion dt.active {
	background: #ddd;
	cursor: pointer;
}

table.guide01 .guideAccordion dd.child {
	display: none;
	font-size: 1.1rem;
	background: #F9F9F9;
	padding: 15px;
}


table.guide01 .guideAccordion dt:after {
	content: '\f105';
	font-size: 1.6rem;
	font-family: 'Font Awesome 5 Pro';
	color: #000;
	position: absolute;
	top: 6px;
	right: 13px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: all, 0.25s, linear;
	transition: all, 0.25s, linear; 
 }
 
table.guide01 .guideAccordion dt.active:after {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); 
  top: 4px;
  right: 15px;
 }

@media only screen and (min-width: 813px) {
	
	/*ご注文方法*/
	p.tellNumber {
		font-size: 3rem;
		text-align: left;
	}
	
	p.faxNumber {
		font-size: 2rem;
		text-align: left;
	}
	
	p.faxNumber span,
	p.tellNumber span {
		display: inline-block;
		font-size: 1.2rem;
		margin-left: 10px;
	}
	
	/*お支払い方法*/
	div.borderBox {
		padding: 20px;
		margin-bottom: 30px;
	}
	
	div.borderBox img {
		width: 420px;
		height: auto;
		margin: 0 auto;
	}
	
	table.guide01 .guideAccordion dt {
		font-size: 1.2rem;
		padding: 10px 20px;
	}
	
	table.guide01 .guideAccordion dd.child {
		font-size: 1.2rem;
		padding: 20px;
	}
	
	table.guide01 .guideAccordion dt:after {
		top: 7px;
	 }
	 
	table.guide01 .guideAccordion dt.active:after {
	 	top: 5px;
	 }
		
}

div.tableScroll {
	width: 100%;
	overflow-x: scroll;
	-webkit-overflow-scrolling:touch;
	margin-bottom: 40px;
}


/*送料と配送*/
table.guide02 {
	width: 440px;
	font-size: 1.1rem;
	text-align: center;
}

table.guide02 thead th {
	background: #F8F3EA;
	font-weight: 500;
	vertical-align: middle;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	padding: 5px 0;
}

table.guide02 thead th:last-child {
	border-right: none;
}

table.guide02 tbody th {
	background: #F9F9F9;
	width: 140px;
	font-size: 1rem;
	font-weight: 500;
	padding: 10px 0;
	vertical-align: middle;
	border-bottom: 1px solid #ddd;
}

table.guide02 tbody td {
	width: 180px;
	padding: 10px;
	vertical-align: middle;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
}

table.guide02 tbody td span.small,
table.guide02 tbody td ul li.small {
	font-size: 1rem;
}

table.guide02 tbody td span.smallGry {
	display: block;
	font-size: 1rem;
	color: #9B9B9B;
}

@media only screen and (min-width: 813px) {
	
	div.tableScroll {
		margin-bottom: 50px;
	}
	
	table.guide02 {
		width: 100%;
		font-size: 1.3rem;
	}
	
	table.guide02 thead th {
		padding: 15px;
	}
	
	table.guide02 tbody th {
		font-size: 1.3rem;
		width: 200px;
		padding: 20px 0;
	}
	
	table.guide02 tbody td {
		width: 350px;
		padding: 15px;
	}

	table.guide02 tbody td span small,
	table.guide02 tbody td span.smallGry,
	table.guide02 tbody td ul li.small {
		font-size: 1.2rem;
	}
	
}

/*返品・交換*/
table.guide03 {
	width: 440px;
	font-size: 1.1rem;
}

table.guide03 thead th,
table.guide03 thead td {
	background: #EDE9E2;
	font-weight: 500;
	text-align: center;
	vertical-align: middle;
}

table.guide03 th {
	background: #F8F3EA;
	width: 80px;
	font-weight: 500;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
}

table.guide03 td {
	width: 180px;
	padding: 15px;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
}

@media only screen and (min-width: 813px) {
	
	table.guide03 {
		width: 100%;
		font-size: 1.3rem;
	}
	
	table.guide03 th {
		background: #F8F3EA;
		width: 15%;
		padding: 30px 0;
	}
	
	table.guide03 td {
		width: 42.5%;
		padding: 30px;
	}
	
}

