@charset "UTF-8";

body {
	margin: 0;
	padding: 0;
	background: #f0f0f0;
	color: black;
	font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'MS P Gothic', sans-serif;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
}

ul {list-style: none; padding: 0; margin: 0;}

a {text-decoration: none;}

#page, #main, #body {overflow: hidden;}

#header a:focus {}
#body a:hover, #body a:active, #footer a:hover, #footer a:active {color: red;}
#body a {color: #0033cc;}
#body a:visited {color: #666666;}

.clear {clear: both;}

#page {background: white; }
#body {margin: 16px 10px;}
#main, .ad {overflow: hidden;}

#main .ad {text-align: center;}
#main .ad a img {width: 100%; max-width: 468px; margin: 16px auto;}

#sub .ad, #sub .menu {margin-bottom: 16px;}
#sub .buttons {text-align: center; line-height: 1em; height: 27px; overflow: hidden;}

#header .ad {width: 320px; height: 100px; margin: auto;}
#sub .ad {width: 300px; height: 250px; margin: 0 auto 16px auto;}

#footer {background: #f0f0f0;}

h1, h2 {margin: 0 10px;}

h1, .nav {font-family: 'Helvetica Neue', 'Droid Sans', sans-serif;}
h1 a {color: black; display: block;} 
h1 {
	font-size: medium;
	line-height: 1em;
	border-left: solid 4px black;
	padding-top: 0.5em;
	padding-left: 6px; 
}

h2 {font-weight: normal; font-size: x-large; line-height: 1.3em; margin: 1em 10px;}
h3 {font-size: x-large; line-height: 1.5em; font-weight: normal; margin: 1em 0 0 0;}

#main {font-size: medium; line-height: 1.8em;}
#main p {margin-top: 0;}

#sub .menu li {font-size: large; line-height: 1em; border-bottom: dotted thin gray;}
#sub .menu li a {display: block; padding: 0.75em 0;}

.buttons {text-align: center;}
.button {display: inline-block; vertical-align: top; margin: 0 1px;}

.lastmod {font-size: small; color: gray; text-align: right;}

.nav {padding: 10px;}
.nav ul {margin: 0;}
.nav li {font-size: x-large; line-height: 1.5em; border-bottom: solid thin silver;}
.nav li a {display: block;}
.nav a:link, .nav a:visited {color: gray;}

/* iTunes */

.itunes-music li {padding: 0.25em 0; border-bottom: solid thin silver;}
.itunes-music .title {font-weight: bold;}

/* muji */

h3.muji {color: maroon;}
h4.muji {margin: 1em 0 0 0;}

.mini-calendar table {
	margin: auto;
	border-collapse: collapse;
	font-size: 8px;
	font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	line-height: 1.5em;
}

.mini-calendar caption {caption-side: bottom; font-size: larger;}
.mini-calendar thead th {min-width: 2.5em; text-align: center;}
.mini-calendar tbody tr {border-top: 1px solid silver;}
.mini-calendar tbody tr:hover {color: maroon;}
.mini-calendar th, .mini-calendar td {padding: 0.25em 0;}
.mini-calendar td {text-align: center;}

col.feb, col.apr, col.jun, col.aug, col.oct, col.dec {background: #f0f0f0;}

.muji-hotdays {
	max-width: 300px;
	margin: auto;
	text-align: center;
}
.muji-hotdays h4 {
	margin: auto;
	font-size: medium;
	text-align: center;
	background: maroon;
	color: white;
	padding: 4px;
}
.muji-hotdays ul {border: solid 2px maroon; margin: 0; text-align: left; font-size: large; line-height: 1em;}
.muji-hotdays li {border-top: solid thin silver; padding: 4px;}
.muji-hotdays li:first-child {border: none;}
.muji-hotdays li span {display: block; font-size: small; line-height: 1em; color: gray;}

.mini-calendar, .muji-hotdays  {text-align: center; margin-bottom: 16px;}

.muji-sales table {width: 100%; border-collapse: collapse; font-size: small; line-height: 1.5em; text-align: right; margin-bottom: 32px;}
.muji-sales caption {font-size: x-large; line-height: 1.5em; text-align: left;}
/*.muji-sales caption:before {content: '■';}*/
.muji-sales th {text-align: center;}
.muji-sales thead tr {border-bottom: thin solid black;}
.muji-sales tbody tr {border-bottom: thin solid silver;}
.muji-sales tbody th, .muji-sales thead th:first-child {text-align: left;}
.muji-sales tbody th {font-weight: normal;}
.muji-sales tbody td {width: 6.5em;}
.muji-sales th.mujiweek {font-weight: bold; color: maroon;}
.muji-sales tfoot {font-size: smaller; line-height: 1.5em;}
.muji-sales .note {vertical-align: text-top; font-size: smaller; line-height: 1em; font-weight: normal; color: black;}


@media(min-width: 640px) {
	h1 {font-size: large; line-height: 1em; padding-top: 1em;}
	h2 {font-size: xx-large; line-height: 1.5em; margin: 1em 10px;}
	h3 {font-size: x-large; line-height: 1.5em; margin-top: 1em;}

	#body {margin-top: 32px;}
	#main {font-size: medium; line-height: 1.5em;}
	#main .column {width: 50%; margin: 0; padding: 0; float: left;}

	.mini-calendar table {font-size: small; line-height: 1.5em;}
	.muji-sales table {margin-bottom: 16px;}
	.muji-sales th, .muji-sales td {font-size: medium; line-height: 1.5em;}
	.muji-sales tfoot td {font-size: small;}
	.muji-sales thead th {font-size: small;}

	#sub {width: 620px; margin: auto;}
	#sub .ad {width: 300px; float: right;}
	#sub .menu {width: 300px; float: left;}
	#sub .buttons {clear: both;}

	.nav ul {margin: 0;}
	.nav li {font-size: medium; line-height: 1.5em; border: none; display: inline-block; margin-right: 0.5em;}
}

@media(min-width: 960px) {
	#header {width: 960px; margin: auto;}
		#header h1 {margin: 0;}
	#body {width: 940px; margin: 32px auto 0;}
	#main {width: 620px; float: left;}
	#sub {width: 300px; float: right;}
	#sub .ad, #sub .menu {width: 100%; float: initial;}
	#sub .menu li a {padding: 0.5em 0;}
	#sub .menu li a:hover {background: #f0f0f0;}

	#footer {margin-top: 30px; padding-bottom: 30px;}
	#footer .nav {width: 940px; margin: auto;}
	#footer .nav {padding: 10px 0;}
}

@media(min-width: 480px) {
	#header .ad {width: 468px; height: 60px;}
}

@media(min-width: 768px) {
	#header .ad {width: 728px; height: 90px;}
}