@charset "utf-8";

/* CSS Document */

/*------------RESET CSS------------*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td { margin:0; padding:0;border:0;outline:0;font-size:100%; background:transparent; -webkit-text-size-adjust:none; } 
ol, ul {list-style:none; } 
table {border-collapse:collapse; border-spacing:0; } 
legend {display:none; }
sup {bottom:1ex; height:0; line-height:1; vertical-align:baseline; _vertical-align:bottom; }

/*------------END RESET------------*/

img { max-width:100%; height:auto; vertical-align:middle; }
a { color:#fff; text-decoration:none; }

@media screen and (min-width:568px) {
body {
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	color:#333;
	line-height:1.8;
	-webkit-text-size-adjust:100%;
	}
}
header { width:100%; }

#thumnail { max-width:320px; text-align:center; margin:0 ; position:relative }

#wrapHeader { position:relative; max-width:890px; margin:0 auto; }

#wrapHeader #logo { padding:10px 0 15px; z-index:1; }

#content { max-width:890px; margin:0 auto; background:#fff; }

#catch { max-width:890px; text-align:center; margin:0 auto; }

footer {
	clear:both;
	color:#fff;
	background:#222;
	margin:0 auto;
	padding:8px;
	text-align:center;
}
footer a { color:#fff; text-decoration:none; }
footer a:hover { color:#fff; text-decoration:underline; }

#footNav { margin:0 auto; padding:8px; overflow:hidden; display:inline-block; }
#footNav li { float:left; margin-right:8px; border-right:1px #999 solid; padding-right:8px; }
#footNav li:last-child { border:0; } /*最後の縦線を消す*/

#copyright { padding:0 8px; font-size:10px; text-align:center; display:block; }

.mt2 { margin-top:2em; }

#attention {
	font-size:0.8em;
	background:#ffc;
	border-top:4px solid #efefef;
	border-bottom:4px solid #efefef;
	margin:30px 0;
	padding:5px 30px 25px;
}

.ttl {
	font-size:1.2em;
	font-weight:bold;
	line-height:1.4;
	margin:0.8em 0;
	}
.ttl2 {
	font-size:1.2em;
	font-weight:bold;
	line-height:1.2;
	margin:0.6em 0;
	}

.price { font-weight:bold;  font-size:1.4em; color:#d71901; vertical-align:middle }
.price2 { text-decoration:line-through; font-size:0.9em }
.price .del { text-decoration:line-through; }
.price .sale { font-size:1.4em; color:#d71901; vertical-align:middle  }
.percent50 { font-size:1.4em; color:#d71901; vertical-align:middle; background:red; color:yellow; font-weight:bold; }
.percent40 { font-size:1.4em; color:#d71901; vertical-align:middle; background:yellow; color:red; font-weight:bold; }
.percent30 { font-size:1.4em; color:#d71901; vertical-align:middle; background:#09f; color:white; font-weight:bold; }
.percent20 { font-size:1.4em; color:#d71901; vertical-align:middle; background:#00a800; color:white; font-weight:bold; }


.accordion {
	font-size:0.8em;
	cursor:pointer;
	background:#feb;
	border:1px dashed #ffcc33;
}

dd { font-size:0.8em; }

.review { font-size:1.2em; font-weight:bold; margin-top:1em; }
.review:before { content:url("../images/icon_basket.png"); margin-right:0.4em; top:2px; position:relative; }

.new:after { content:url("../images/icon_new.png"); margin-left:0.4em; top:2px; position:relative; }

.arrow_box {
	position:relative;
	background:#ffffff;
	border:4px solid #FEBA00/*#F27179*/; /*線色*/
	border-radius:5px;
	margin-top:1.6em;
	padding:8px;
	box-shadow:1px 1px 4px 0px;
	-webkit-box-shadow:1px 1px 4px 0px #999;
}
.arrow_box:after, .arrow_box:before {
	bottom:100%;
	left:15%;
	border:solid transparent;
	content:" ";
	height:0;
	width:0;
	position:absolute;
	pointer-events:none;
}

.arrow_box:after {
	border-color:rgba(255, 255, 255, 0);
	border-bottom-color:#ffffff;
	border-width:10px;
	margin-left:-10px;
}
.arrow_box:before {
	border-color:rgba(194, 225, 245, 0);
	border-bottom-color:#FEBA00/*#F27179*/; /*線色*/
	border-width:16px;
	margin-left:-16px;
}

.close { font-size:0.9em; cursor:pointer; text-align:center; margin:20px 0 0; }
.close:hover { border-radius:5px; background:#e6e6e6; }

.bg { background:#f6f6f6; padding:1em; }

ul.detail_catch {
	font-weight:bold;
	list-style-type:disc;
	margin-left:1.5em !important;
	margin-bottom:1em !important; }

.quality { font-size:0.8em; margin:1em; text-align:center;}

.goods {
	overflow:hidden;
	margin:0 0 2em;
	border:10px solid #183659;
	border-radius:5px;
}
.goods dl {}
.goods dt { font-size:0.8em; text-align:center; margin:10px 0 0; }
.goods dt:hover { background:#fd7; }
.goods dd {	padding:1em; }

.goods ul { font-size:1em; margin:15px 0 0; }
.goods li { margin-bottom:0px; }

.catch2 {
	font-weight:bold;  font-size:1.1em; color:#DB441F;
	line-height:1.5em
	}
	
.campaign {
	text-align:center;
	padding:10px;
	}

.campaign2-goods img:hover {
	opacity:0.8 ;
	}

.cp_banner{
	text-align:center;	
	}
	
.cp_banner:hover{
	opacity:0.8;	
}
	
.volume {
	font-size:0.9em;
	color:#fff;
	background:#183659;
	padding:5px 8px 2px;
	margin-right:1em;
}

.box { text-align:center; margin:50px 0; clear:both; }

.coach { font-size:0.9em; line-height:1.4; margin-top:0.5em; }

.youtube {
	position:relative;
	width:100%;
	padding:75% 0 0 0; /*4:3*/
	/* padding:56.25% 0 0 0; 16:9*/
}

.youtube iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.yt-wrap {
	max-width:320px;
	width:100%;
	margin:0 1em 1em 0;
	border:1px solid #000;
	background:#222;
	float:left;
	display:block;
}

.textLink {
	position:relative;
	display:inline-block;
	padding:10px 20px 10px 20px;
	text-decoration:none;
	background-color:#EACA2B;
	border-bottom:solid 2px #B29726;
	border-radius:4px;
	box-shadow:inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-weight:bold;
	float:right;
}

.textLink:active {
	border-bottom:solid 2px #B29726;
	box-shadow:0 0 2px rgba(0, 0, 0, 0.30);
	float:right;
}

.sonota{
	text-align:center;	
}

.sonota:hover{
	opacity:0.8;	
}

#attention p { padding-left:1em; text-indent:-1em; }
.referenceMark { color:#FF0000; }

#pagetop {
	background:#fff url("../images/icon_pagetop_arw.png") no-repeat center 10px;
	border:2px solid #666;
	width:55px;
	height:55px;
	border-radius:50%;
	font-size:0.8em;
	text-align:center;
	position:fixed;
	bottom:1em;
	right:1em;
	cursor:pointer;
	display:table;
	opacity:0.8;
	filter:Alpha(opacity=80);
	}
#pagetop span { display:block; padding-top:20px; }
a #pagetop { color:#666; }
a:hover #pagetop { opacity:1; filter:Alpha(opacity=100); }

/* clearfix
-----------------*/

.cf { clear:both; }

@media screen and (max-width:568px) {
	body {
		font-size:12px;
	}
	
	#logo img { width:120px; }
}