@charset "utf-8";
body { background: #eeddc1 url(img/background.jpg) repeat center top; font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif; min-width:300px; }
a,
a:visited { color:#594233; }
a:hover { color:#956e55; }
a:active,
a:focus { outline: 0; }
.note { font-size:0.8em; }

.ie6 header { margin-bottom:0; }
.ie6 #wrapper { min-width:900px; width: auto !important; width: 900px !important; }
.ie6 #appstore img { max-width:162px; width: auto !important; height: 162px !important; }

/* responsive elements */
#wrapper { margin-left: auto; margin-right: auto; width: 95%; padding-bottom:20px; }
/* header elements  */
header { position:relative; margin-bottom:15px; }
header figure { float:right; }
header figure img { width: 100%; display: block; }
#intro { text-align: center; color:#594233; width:100%; margin-bottom:10px; }
#intro_sub { text-align: center; width:100%; margin-bottom:10px; }
h1 { text-align:center; font-weight: bold; text-shadow: 1px 1px 0 #fff; margin: 0; font-size: 1.2em; letter-spacing:-1pt; margin-top: 20px; line-height: 1; }
h1 img { width:70%; max-width:290px; max-height:120px; }

#appstore img { width:55%; max-width:162px; max-height:56px; min-width:140px; min-height:48px; }

/* section elements  */
section { margin-bottom:5%; }
.products li { margin: 10px 0; color: #000; }
.products li:first-child { margin-top: 0; }
.products p { margin:0; }
.products li { overflow: auto; margin: 0 0 10px 0; padding: 10px; color: #000; text-decoration: none; }
.products li h2,
.infobox h2 { font-size:1.3em; color:#594233; margin:0 0 2% 0; padding:0; }
.infobox h2 span { font-size:0.8em; }
.products li img.ss_image { width:40%; float:left; margin-right:2%; }
.infobox { padding: 10px; }
.infobox figure img { width:30%; margin-right:20px; float:left; }

/* footer elements  */
footer { color:#f7ecdf; text-align:center; margin-top: 30px; background:#393939 url(img/footer_background.png) top left repeat-x; padding:80px 0 60px 0; }
footer p#company { font-size:1.2em; font-weight:bold; }
footer p img { margin-right:10px; }
#contact { font-weight:bold; }
footer a { padding:10px; background:#f7ecdf; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin:0 auto 20px auto; color:#594233; text-decoration:none; font-size:1em; font-weight:bold; display:block; width:40%; }
footer a:hover { background:#b9b1a7; }
#copyright { font-size:0.75em; }
#notice { clear:both; font-size:0.8em; padding: 20px 0.82%; }
.backtotop { text-align:right; clear:both; font-weight:bold; }
noscript p{ font-weight:bold; width:70%; margin:10px auto; color:#ffb1bc; }


@media only screen and (min-width: 481px) {
#appstore img { width:50%; min-width:120px; min-height:41px; }
body { margin-top:5%; }
header figure { width:70%; padding-bottom:5%; }
#intro { position:absolute; left:0; top:10px; width:45%; }
#intro_sub { position:absolute; left:0; bottom:0; width:45%; }
h1 img { width:80%; }
h1 { margin-top:0; }
.products li { width:29%; float:left; padding: 10px; color: #000; }
.products li img.ss_image { width:100%; float:none; margin-right:0; }
.infobox { width:29%; float:left; }
.infobox figure img { width:70%; margin-right:0; float:none; }
.products li h2,
.infobox h2 { margin:4% 0; }
}


@media only screen and (min-width: 600px) {
#intro_sub { position:absolute; left:0; bottom:15%; width:45%; }
#appstore img { width:50%; min-width:120px; min-height:41px; }
}

@media only screen and (min-width: 769px) {
body { margin-top:5%; }
#wrapper { margin-left: auto; margin-right: auto; width: 90%; max-width:900px; }
header figure { width:80%; max-width:632px; padding-bottom:0; }
#intro { position:absolute; left:0; top:8%; width:40%; }
#intro_sub { position:absolute; left:0; bottom:20%; width:40%; }
h1 img { width:100%; }
.infobox { width:29%; float:left; }
.infobox figure img { width:60%; margin-right:0; float:none; }
footer p#company { font-size:1.6em; }
}