@charset "utf-8";

/*------------------------------ all ------------------------------*/
a:link, a:visited, a:hover, a:active, #shareSP li {
	color:#603501;
	-webkit-transition:all 0.3s ease-in-out 0s;
	transition:all 0.3s ease-in-out 0s;
}
a:hover, #shareSP li:hover {
	filter: alpha(opacity=70);
	opacity:0.7;
}
#header, #footer { position:relative;}
.glNavLogo img, #logo img, #informationSP img, #dateSP img, .image img, #information img, #date img {width:100%;}
.glNavTop, .glNavCenter, .glNavBottom, #information, #date {display:none;}
/*------------------------------ globalNav_SP ------------------------------*/
.glNavLogo {
	margin: 0px 20% 25px;
}
.glNavLogoTop {
	position: relative;
	z-index: 200;
	width: 160px;
	margin: 0px auto;
	padding: 8px 0px 15px;
}
.glNavSP {
	position: absolute;
	z-index:100;
	height: 50px;
	top: 0px;
	width: 100%;
	border-bottom: 3px solid #B18247;
	background-color: #fff;
}
.glNavButton {
	position: absolute;
	width: 47px;
	height: 47px;
	cursor: pointer;
	right: 15px;
	top: 0px;
}
.glNavButtonIcon::before, .glNavButtonIcon, .glNavButtonIcon::after {
	background-color: #B18247;
	height: 7px;
	width: 43px;
	position: absolute;
	top: 20px;
	right: 2px;
	border-radius: 50px;
}
.glNavButtonIcon::before, .glNavButtonIcon::after {
	content:"";
	display:block;
	right:0;
}
.glNavButtonIcon::before {
	top: -13px;
}
.glNavButtonIcon::after {
	top: 13px;
}
.active {
	background-color:transparent;
}
.active::before {
	-ms-transform:translateY(13px) rotate(45deg);
	-webkit-transform:translateY(13px) rotate(45deg);
	transform:translateY(13px) rotate(45deg);
}
.active::after {
	-ms-transform:translateY(-13px) rotate(-45deg);
	-webkit-transform:translateY(-13px) rotate(-45deg);
	transform:translateY(-13px) rotate(-45deg);
}
.glNavButtonIcon, .active {
	-webkit-transition:all 0.1s ease-in-out 0s;
	transition:all 0.1s ease-in-out 0s;
}
.glNavButtonIcon::before, .glNavButtonIcon::after, .active::before, .active::after {
	-webkit-transition:all 0.2s ease-in-out 0s;
	transition:all 0.2s ease-in-out 0s;
}
.glNavSP ul {
	display:none;
	position: absolute;
	top: 50px;
	width: 100%;
}
.glNavSP li {
	background-color: #fff;
}
.glNavSP li a {
	display:block;
	text-align:center;
	padding: 15px;
}
.glNavSP li a img {
	height:32px;
	width:auto;
}
.glNavSP li:last-child {
	border-bottom: 3px solid #B18247;
}
/*----▼SP_キャラクター追加----*/
.glNavSP01 {
	border-right:18px solid #90d1ff !important;
	border-left:18px solid #90d1ff !important;
}
.glNavSP02 {
	border-right:18px solid #fee866 !important;
	border-left:18px solid #fee866 !important;
}
.glNavSP03 {
	border-right:18px solid #9ae7eb !important;
	border-left:18px solid #9ae7eb !important;
}
.glNavSP04 {
	border-right:18px solid #d4e682 !important;
	border-left:18px solid #d4e682 !important;
}
.glNavSP05 {
	border-right:18px solid #f9cd83 !important;
	border-left:18px solid #f9cd83 !important;
}
.glNavSP06 {
	border-right:18px solid #c9afe5 !important;
	border-left:18px solid #c9afe5 !important;
}
.glNavSP07 {
	border-right:18px solid #a6e4f6 !important;
	border-left:18px solid #a6e4f6 !important;
}
.glNavSP08 {
	border-right:18px solid #f28e91 !important;
	border-left:18px solid #f28e91 !important;
}
/*------------------------------ content_SP ------------------------------*/
body {
	color:#603501;
	width: 100%;
	height: 100%;
	font-size:13px;
	-webkit-background-image: url("../img/haruka/bg_sp.jpg");background-image: url("../img/haruka/bg_sp.jpg");
	-webkit-background-repeat: repeat-y;background-repeat: repeat-y;
	-webkit-background-attachment: scroll;background-attachment: scroll;
	-webkit-background-position: center top;background-position: center top;
	-webkit-background-size: 100% auto;background-size: 100% auto;
}
#contentBG {
	margin:0 3%;
	border-right: 5px solid #f1c852;
	border-left: 5px solid #f1c852;
	background-color: #fff;
}
#content {
	background-color: #fff;
	margin: 0 auto;
}
/*------------------------------ header_SP ------------------------------*/
#headerTop {
	padding: 23% 0 0;
	-webkit-background-image: url("../img/haruka/bg_flagSP.png");background-image: url("../img/haruka/bg_flagSP.png");
	-webkit-background-repeat: no-repeat;background-repeat: no-repeat;
	-webkit-background-attachment: scroll;background-attachment: scroll;
	-webkit-background-position: center top;background-position: center top;
	-webkit-background-size: 100% auto;background-size: 100% auto;
}
#logo {
	margin: 0px auto;
	text-align: center;
	width: 89%;
}
/*------------------------------ main_SP ------------------------------*/
#informationSP, #dateSP {width:95%;}
#informationSP {margin: 15px auto 0;}
#dateSP {margin:5px auto 10%;}
#lineStart, #lineEnd {overflow: hidden;}
#lineStart img, #lineEnd img {
	position: relative;
	z-index: 10;
	width: 200%;
	left: -50.5%;
}
#goodsList {
	-webkit-background-image: url("../img/haruka/bg_lineup.png");background-image: url("../img/haruka/bg_lineup.png");
	-webkit-background-repeat: repeat;background-repeat: repeat;
	-webkit-background-attachment: scroll;background-attachment: scroll;
	-webkit-background-position: left center;background-position: left center;
	-webkit-background-size: 55% auto;background-size: 55% auto;
	margin: 0px auto;
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 10% 0 0;
}
.details {
	display: inline-block;
	font-size: 12px;
	width: 100%;
	margin-bottom:20px;
}
.goodsWrap {
	padding:8% 2% 15%;
	-webkit-background-image: url("../img/haruka/goods_bg.png");background-image: url("../img/haruka/goods_bg.png");
	-webkit-background-repeat: no-repeat;background-repeat: no-repeat;
	-webkit-background-attachment: scroll;background-attachment: scroll;
	-webkit-background-position: top center;background-position: top center;
	-webkit-background-size: 93% auto;background-size: 93% auto;
}
.image {
	width: 80%;
	margin: 0 auto;
}
.title {
	font-size:1.35em;
	text-align: center;
	letter-spacing: -0.1em;
}
.price, .tax {letter-spacing:normal;}
.price {
	margin-left: 5px;
	font-size:0.8em;
}
.tax {
	font-size:0.6em;
	font-weight:normal;
}
.description {
	line-height: 1.5;
	font-size: 15px;
	font-weight:bold;
	margin: 5px auto 0;
	width: 90%;
	text-align:left;
}
.description span {
	font-size: 13px;
	color: rgb(253, 79, 51);
}
.cart {
	filter: alpha(opacity=100) !important;
	opacity:1 !important;
	font-size: 25px;
	display: block;
	padding: 11px 0px 12px;
	margin: 20px auto;
	background-color: #959595;
	text-align: center;
	color: #FFF !important;
	font-weight: bold;
	width: 220px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
/*------------------------------ footer_SP ------------------------------*/
#footer {
	text-align:center;
	padding: 25% 0px 6%;
	-webkit-background-image: url("../img/haruka/bg_flagSP.png");background-image: url("../img/haruka/bg_flagSP.png");
	-webkit-background-repeat: no-repeat;background-repeat: no-repeat;
	-webkit-background-attachment: scroll;background-attachment: scroll;
	-webkit-background-position: center top;background-position: center top;
	-webkit-background-size: 100% auto;background-size: 100% auto;
}
#shareSP li {
	display:inline-block;
	margin: 0px 2%;
	cursor:pointer;
}
#link li {margin:20px;}
#link li:first-child {margin-top: 30px;}
small {font-size:.5em;}
#pagetop {
	text-align: center;
	padding: 30px 0;
}
#pagetop img {
	height: 30px;
	width: auto;
}

@media screen and (min-width:769px) {
/*------------------------------ all_PC ------------------------------*/
	.glNavSP, #informationSP, #dateSP, li#LINE {display:none;}
	.glNavTop, .glNavCenter, .glNavBottom, #information, #date {display:block;}
	.glNavLogo {
		margin: 0px auto;
		width: 340px;
		height: auto;
		padding:0;
	}
	.glNavTop, .glNavCenter {width:100%;}
	.glNavImgPrev, .glNavImgNext {
		overflow: hidden;
		position: absolute;
		display:block;
		width: 104px;
		height:96px;
	}
	.glNavImgPrev {
		background: url("../img/haruka/nav_left.png") no-repeat top right scroll;
	}
	.glNavImgNext {
		background: url("../img/haruka/nav_right.png") no-repeat top left scroll;
	}
	.on:hover {
		width: 240px;
	}
	.on, .on:hover {
		-webkit-transition:all 0.5s ease-in-out 0s;
		transition:all 0.5s ease-in-out 0s;
		filter: alpha(opacity=100);
		opacity:1;
	}
	.glNavTopPrev, .glNavCenterPrev {left:0;}
	.glNavTopNext, .glNavCenterNext {right:0;}
/*------------------------------ content_PC ------------------------------*/
	body {background: url("../img/haruka/bg_pc.jpg") repeat-y top center scroll;}
	#wrapper {
		width: 1100px;
		margin: 0 auto;
	}
	#contentBG {
		width:1000px;
		margin:0 auto;
	}
	#content {
		width:990px;
		background-image: url("../img/haruka/bg_side.png"), url("../img/haruka/bg_side.png");
		background-repeat: repeat-y, repeat-y;
		background-position: left, right;
		background-attachment: scroll, scroll;
		background-size: 3.5% auto, 3.5% auto;
	}
/*------------------------------ header_PC ------------------------------*/
	.glNavLogoTop {
		position: absolute;
		left:326px;
		top: 48px;
	}
	.glNavTop {
		height: 150px;
	}
	.glNavTopPrev, .glNavTopNext {
		top: 38px;
	}
	#headerTop {
		padding: 194px 0 0;
		background: url("../img/haruka/bg_flag.png") no-repeat scroll center top / 100% auto transparent;
	}
	#logo {width: 852px;}
/*------------------------------ main_PC ------------------------------*/
	#information, #date {
		margin: 0 auto;
		width: 740px;
	}
	#information {margin-top: 20px;}
	#date {margin-bottom:20px;}
	#lineStart, #lineEnd {
		overflow:visible;
		width: 100.3%;
		margin: 0px auto;
		left: -1px;
		position: relative;
		z-index: 10
	}
	#lineStart{top: 22px;}
	#lineEnd{top: -28px;}
	#lineStart img, #lineEnd img {
		position:static;
		width:100%;
	}
	#goodsList {
		background-size:33%;
		width: 93%;
		padding: 76px 18px 88px;
	}
	.details {
		width: 430px;
		margin:0;
	}
	.goodsWrap {
		background-size: 100%;
		width: 430px;
		height: 430px;
		padding: 40px;
	}
	.image {width: 100%;}
	.title {
		font-size:19px;
		letter-spacing:normal;
	}
	.description {
		line-height: normal;
		margin-top: 0;
	}
	.goods01, .goods02 {margin-bottom: 40px;}
	.goodsR {margin-left: 17px;}
/*------------------------------ footer_PC ------------------------------*/
	#footer {
		background: url("../img/haruka/bg_flag.png") no-repeat scroll center 75px / 100% auto transparent;
		text-align:center;
		padding: 238px 0px 50px;
	}
	.glNavCenter {
		position:absolute;
		top:0;
		height: 100px;
	}
	.glNavBottom {
		margin:35px auto 50px;
		width: 870px;
	}
	.glNavIcon {
		display:block;
		float:left;
		height:100px;
		width:100px;
		margin-right: 10px;
	}
	.glNavIcon:last-child {margin:0;}
	.glNav01 {background: url("../img/footer_nav01.png") no-repeat top center scroll;}
	.glNav02 {background: url("../img/footer_nav02.png") no-repeat top center scroll;}
	.glNav03 {background: url("../img/footer_nav03.png") no-repeat top center scroll;}
	.glNav04 {background: url("../img/footer_nav04.png") no-repeat top center scroll;}
	.glNav05 {background: url("../img/footer_nav05.png") no-repeat top center scroll;}
	.glNav06 {background: url("../img/footer_nav06.png") no-repeat top center scroll;}
	.glNav07 {background: url("../img/footer_nav07.png") no-repeat top center scroll;}
	.glNav08 {background: url("../img/footer_nav08.png") no-repeat top center scroll;}
	#share li, #link li {display:inline-block;}
	#share li {line-height: 0.7em;}
	#share li:first-child {width: 112px;}
	#link {padding: 35px 0px 40px;}
	#link li {
		margin:0 !important;
		border-left:solid 1px #9C9C9C;
		padding:0px 10px;
	}
	#link li:first-child {border:none;}
	small {font-size:12px;}
	#pagetop {
		padding: 50px 0 0;
	}
	
}