@charset "utf-8";


/*=============================================
	Browser Default Initialization
=============================================*/

html {
	overflow-y: scroll;
}

body, div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,
figure, figcaption {
	margin: 0;
	padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
q:before ,q:after {
	content: '';
}
object, embed {
	vertical-align: top;
}
hr, legend {
	display: none;
}
input, select {
	vertical-align: middle;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
img, abbr, acronym, fieldset {
	border: 0;
}
img {
	vertical-align: top;
	-ms-interpolation-mode: bicubic;
}
ul li {
	list-style-type: none;
}


/*---------------------------------------------
	body
---------------------------------------------*/

body {
	line-height: 1.6;
	color: #000;
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	font-size: 14px;
	text-align: left;
	-webkit-text-size-adjust: 100%;
}


/*---------------------------------------------
	anchor
---------------------------------------------*/

a {
	color: #000;
	outline: none;
	text-decoration: underline;
}
a:link,
a:visited {
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
a img {
	-webkit-transition: 0.2s ease-in-out;  
	-moz-transition: 0.2s ease-in-out;  
	transition: 0.2s ease-in-out;  
}
a:hover img {
	opacity: 0.7;  
	filter: alpha(opacity=70);  
}


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

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix {
	zoom: 1;
}


/*---------------------------------------------
	general
---------------------------------------------*/

.red {
	color: #950703;
}
.left {
	float: left;
}
.right {
	float: right;
}
.center {
	text-align: center;
}
.hidden {
	display: none;
}

#wrapper {
	position: relative;
	background: #efefec;
}
img {
	max-width: 100%;
}


/*---------------------------------------------
	header
---------------------------------------------*/

header {
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 1000;
}
header .header-inner {
	position: relative;
	width: 100%;
}
header .primary-message {
	display: none;
	color: #333;
	font-size: 12px;
}
header .logo {
	float: left;
	margin: 9px 0 8px 8px;
}
header .logo a {
	display: block;
	overflow: hidden;
	width: 200px;
	height: 32px;
	background: url(../img/header-logo.png) no-repeat center center;
	background-size: contain;
	text-indent: 100%;
	white-space: nowrap;
}
header .header-navi {
	width: 100%;
}
.header-navi .toggle {
	float: right;
	width: 46px;
	height: 40px;
	margin-top: 8px;
}
.header-navi .toggle a {
	display: block;
	overflow: hidden;
	width: 26px;
	height: 20px;
	padding: 10px;
	background: url(../img/btn-menu.png) no-repeat center center;
	background-size: 26px auto;
	text-indent: 200%;
	white-space: nowrap;
}
.header-navi .menu {
	display: none;
	clear: left;
	width: 100%;
	padding: 10px 0 15px;
	background: #fff;
}
.header-navi .menu a {
	display: block;
	padding: 4px 8px 4px 26px;
	background: url(../img/ico-arrow.png) no-repeat 2px center;
	color: #950703;
	font-size: 13px;
	text-decoration: none;
}
.header-navi .menu ul {
	margin: 0 10px;
}
.header-navi .menu li {
	border-bottom: 1px #ccc dotted;
}
header .contact,
header .inquiry {
	display: none;
}

/* ------ global navigation ------ */
.global-navi {
	display: none;
}


/*---------------------------------------------
	contents
---------------------------------------------*/

#contents {
	width: 100%;
	padding-bottom: 20px;
}


/*---------------------------------------------
	Footer
---------------------------------------------*/

footer {
	position: relative;
	z-index: 800;
	width: 100%;
	margin-bottom: 30px;
	background: url(../img/bg-color.png);
	color: #fff;
}
.footer-inner {
	position: relative;
	padding: 10px 10px 15px;
}
footer .logo {
	margin: 30px 0 12px;
}
footer .logo a {
	display: block;
	overflow: hidden;
	width: 175px;
	height: 28px;
	background: url(../img/footer-logo.png) no-repeat center center;
	background-size: contain;
	text-indent: 100%;
	white-space: nowrap;
}
.footer-link {
	position: absolute;
	top: 10px;
}
.footer-link li {
	float: left;
	line-height: 1;
	padding: 0 8px;
	border-right: 1px #fff solid;
	font-size: 12px;
}
.footer-link li:first-child {
	padding-left: 0;
}
.footer-link li:last-child {
	border-right: 0;
}
.footer-link li a {
	color: #fff;
	font-size: 12px;
	text-decoration: none;
}
footer .address {
	margin-bottom: 15px;
	font-size: 12px;
}
footer .note {
	font-size: 12px;
}
footer .copy {
	position: absolute;
	right: 0;
	bottom: -25px;
	left: 0;
	width: 100%;
	color: #666;
	font-size: 11px;
	text-align: center;
}
#pagetop {
	position: fixed;
	right: 5px;
	bottom: 20px;
	z-index: 900;
}
#pagetop a {
	display: block;
	width: 49px;
	height: 50px;
	float: right;
}


/*=============================================
	for greater than 480px
=============================================*/

@media screen and (min-width: 480px) {
	#pagetop {
		right: 10px;
	}
}


/*=============================================
	for greater than 640px
=============================================*/

@media screen and (min-width: 640px) {
	footer .logo {
		margin-top: 5px;
	}
	footer .logo a {
		width: 200px;
		height: 32px;
	}
	.footer-link {
		float: right !important;
		top: 15px;
		right: 10px;
	}
}


/*=============================================
	for greater than 768px
=============================================*/

@media screen and (min-width: 768px) {
	#wrapper {
		background: url(../img/bg.gif);
	}
	.bg-01 {
		display: block;
		overflow: hidden;
		position: absolute;
		top: 18px;
		right: 0;
		z-index: 1;
		width: 298px;
		height: 245px;
		background: url(../img/bg-body-01.png) no-repeat right 0;
		background-size: 80% auto;
	}
	.bg-02 {
		display: block;
		overflow: hidden;
		position: absolute;
		top: 336px;
		left: 0;
		z-index: 2;
		width: 369px;
		height: 384px;
		background: url(../img/bg-body-02.png) no-repeat 0 0;
		background-size: 80% auto;
	}
	.bg-03 {
		display: block;
		overflow: hidden;
		position: absolute;
		top: 795px;
		right: 0;
		z-index: 3;
		width: 245px;
		height: 301px;
		background: url(../img/bg-body-03.png) no-repeat right 0;
		background-size: 80% auto;
	}
	.bg-04 {
		display: none;
		overflow: hidden;
		position: absolute;
		/*top: 1610px;*/
		bottom: 280px;
		left: 0;
		z-index: 4;
		width: 216px;
		height: 289px;
		background: url(../img/bg-body-04.png) no-repeat 0 0;
		background-size: 80% auto;
	}

	header {
		height: 210px;
		background: url(../img/bg-header.gif) repeat-x 0 0;
	}
	header .primary-message {
		display: block;
		line-height: 30px;
		padding: 0 5px;
	}
	header .logo {
		margin: 15px 0 0 8px;
	}
	header .logo a {
		width: 294px;
		height: 50px;
	}
	.header-navi {
		display: none;
	}
	header .contact {
		display: block;
		position: absolute;
		top: 50px;
		right: 128px;
		width: 218px;
	}
	header .contact p {
		overflow: hidden;
		margin-bottom: 4px;
		text-indent: 100%;
		white-space: nowrap;
	}
	header .contact .tel {
		width: 218px;
		height: 18px;
		background: url(../img/header-tel.png) no-repeat center center;
	}
	header .contact .fax {
		width: 218px;
		height: 18px;
		background: url(../img/header-fax.png) no-repeat center center;
	}
	header .inquiry {
		display: block;
		position: absolute;
		top: 0;
		right: -40px;
		width: 197px;
		height: 99px;
		background: url(../img/bg-inquiry.png) no-repeat center top;
		z-index: 100;
	}
	header .inquiry a {
		display: block;
		overflow: hidden;
		position: absolute;
		top: 26px;
		left: 54px;
		width: 88px;
		height: 40px;
		background: url(../img/btn-inquiry.png) no-repeat center center;
		text-indent: 100%;
		white-space: nowrap;
	}
	.global-navi {
		display: block;
		position: absolute;
		top: 108px;
		width: 100%;
		padding: 2px 0 8px;
		background: url(../img/bg-navi.png);
		text-align: center;
	}
	.global-navi ul {
		width: 100%;
		height: 70px;
		margin: 0 auto;
		background: url(../img/bg-navi-03.png) repeat-y right 0;
	}
	.global-navi li {
		float: left;
		background: url(../img/bg-navi-01.png) repeat-y 0 0;
	}
	.global-navi li a {
		display: block;
		overflow: hidden;
		padding: 24px 0;
		text-indent: 200%;
		white-space: nowrap;
	}
	.global-navi li.home {
		width: 12.91666666%;
	}
	.global-navi li.home a {
		width: 100%;
		background: url(../img/navi-home.png) no-repeat center center;
	}
	.global-navi li.policy {
		width: 14.7916666%;
	}
	.global-navi li.policy a {
		width: 100%;
		background: url(../img/navi-policy.png) no-repeat center center;
	}
	.global-navi li.merchandise {
		width: 16.7708333%;
	}
	.global-navi li.merchandise a {
		width: 100%;
		background: url(../img/navi-merchandise.png) no-repeat center center;
	}
	.global-navi li.business {
		width: 16.3541666%;
	}
	.global-navi li.business a {
		width: 100%;
		background: url(../img/navi-business.png) no-repeat center center;
	}
	.global-navi li.company {
		width: 15%;
	}
	.global-navi li.company a {
		width: 100%;
		background: url(../img/navi-company.png) no-repeat center center;
	}
	.global-navi li.shop {
		width: 24.0625%;
	}
	.global-navi li.shop {
		background: #aa9463 url(../img/bg-navi-02.png) repeat-y 0 0;
	}
	.global-navi li.shop a {
		width: 100%;
		background: url(../img/navi-shop.png) no-repeat center center;
	}
	#contents {
		padding-bottom: 50px;
		background: url(../img/bg-bottom.jpg) repeat-x 0 bottom;
		background-size: auto 120px;
	}
	footer .logo a {
		width: 250px;
		height: 40px;
	}
	footer .address {
		margin-bottom: 10px;
		font-size: 14px;
	}
	footer .note {
		font-family: 'Times New Roman','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','HG明朝E',serif;
		font-size: 13px;
	}
	footer .copy {
		color: #b8b6b8;
		font-family: Verdana;
		font-size: 12px;
	}
	#pagetop {
		right: 15px;
	}
	#pagetop a {
		width: 59px;
		height: 60px;
	}
}


/*=============================================
	for greater than 980px
=============================================*/

@media screen and (min-width: 980px) {
	img {
		max-width: auto;
	}
	.bg-01,
	.bg-02,
	.bg-03,
	.bg-04 {
		background-size: contain;
	}
	header .header-inner {
		width: 960px;
		margin: 0 auto;
	}
	.global-navi ul {
		width: 960px;
		margin: 0 auto;
	}
	.global-navi li a {
		padding: 24px 36px 24px 35px;
	}
	.global-navi li.home a {
		width: 53px;
	}
	.global-navi li.policy a {
		width: 71px;
	}
	.global-navi li.merchandise a {
		width: 90px;
	}
	.global-navi li.business a {
		width: 86px;
	}
	.global-navi li.company a {
		width: 73px;
	}
	.global-navi li.shop a {
		width: 158px;
		padding-right: 38px;
	}
	footer {
		margin-bottom: 0;
		padding: 20px 0 30px;
	}
	.footer-inner {
		width: 960px;
		margin: 0 auto;
		padding: 0;
	}
	footer .text {
		float: left;
	}
	footer .copy {
		position: absolute;
		right: 0;
		bottom: 0;
		text-align: right;
	}
	#pagetop {
		right: 30px;
	}
	#pagetop a {
		width: 83px;
		height: 84px;
	}
}