@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 2px solid #555; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin: 0; list-style-type: none; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0 0 5px red; -webkit-box-shadow: 0 0 5px red; box-shadow: 0 0 5px red;}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #66ccff; color:#fff; text-shadow: none; }
::selection { background:#66ccff; color:#fff; text-shadow: none; }
/*a:link { tap-highlight-color:#00A0E9; -webkit-tap-highlight-color: #00A0E9;  }*/

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

body {  line-height: 1; color: #333; padding:0 5px;}
a, a:active, a:visited { color: #00A0E9; }
a:hover { color: #00A0E9; text-decoration: underline; }


/* #Styling
================================================== */
html { height: 100%;}

body {
width: 290px;
min-height: 100%; height: auto !important; height: 100%;
margin: auto;
background: #00BFFF url(img/background.png);
font: 0.75%/1.4 ;
color: #333;
}

body:before { content:"."; display: block; background: #000 url(img/header-bg.png) center top repeat-x; width: 100%; height: 60px; position: absolute; left: 0; top:0px;}

#header_nav{
    background-color: #000;
    color: #FFF;
    height: 20px;
    margin-top: -20px;
}


/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.5; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit;}
h1, h3 { color:#00A0E9;}
h3 { font-size: 1.3em;}
p { line-height: 1.4em;}

/* #Links
================================================== */
a, a:visited { color: #00A0E9; text-decoration: none; }
a:hover, a:focus { color: #00A0E9; text-decoration: none; }
p a, p a:visited { line-height: inherit;}
img a { border: none; text-decoration: none; }

/* ................ STRUCTURAL*/
header[role="banner"],
nav[role="navigation"],
div[role="main"],
footer[role="contentinfo"] {
    width: 290px;
    margin: 0 auto;
	float: left;
}
nav[role="navigation"], div[role="main"],  footer[role="contentinfo"] { overflow: hidden;}

/* Header
================================================== */
header[role="banner"] { position: relative; height: 60px; z-index: 100; }


p#header-description{float: left; font-size: 0; height: 52px; margin-top: 13px; margin-left: 0; width: 145px; overflow: hidden; background: url('img/mobile_header.png') no-repeat;}
#logo { display: block; float: left; font-size: 0; line-height: 0; margin-left: -7px; width: 145px; height: 80px; position: relative; z-index: 10; background:  url('img/logo.png');}
/*header[role="banner"] a, header[role="banner"] a:visited { color: #333; text-decoration: none;}*/

nav a, nav a:visited { color: #333; font-size: 1.1em;  text-decoration: none;}
nav a:hover { color: #888; font-size: 1.1em;  text-decoration: none;}
nav {
position: relative;
background-color: #fff; width: 140px; margin:auto; margin-top: 20px;
color: #333; font-size: 11px; line-height: 1.4em;
padding: 3px 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

}
nav ul { text-align: left;}
nav ul:before { content: url('img/nav-bg.png'); position: absolute; right: 5px;}
nav li {}
nav li .info {
	position: relative; z-index: 900;
	display: none;
	padding: 0 5px;
	font-size: 10px;
	text-indent: 1em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
nav li:hover .info { display: block; padding: 5px 0 0 5px; color: #000; }
.info li:hover:before { content: "✓"; position: absolute; left: -5px;}

#top_image_links img{
    width: 33%;
    height: 80px;
    float: left;
    font-size: 0px;
    margin: 0px;
    padding: 0px;
}

.imagge_links {
  height: 80px;
}

/* #Footer
================================================== */
footer[role="contentinfo"] { height: 30px; padding: 30px 0 45px 0; }
footer[role="contentinfo"] p { color: #fff; text-indent: 2em; font-size: 1em; font-family: Helvetica, Arial, sans-serif; }
footer[role="contentinfo"] a, footer[role="contentinfo"] a:visited { color: #fff; text-decoration: none; font-weight: bold;}
footer[role="contentinfo"] a:hover, footer[role="contentinfo"] a:focus {  color: #fff; text-decoration: underline; }

/* #main
==================================================  */
div[role="main"] { position: relative; z-index: 1; margin: 0 auto;}
div[role="main"] > section { margin-bottom: 1.5em; background: white;}
div[role="main"] > section + section {
	position: relative;
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
div[role="main"] > section + section + section { padding: 0;}
div[role="main"]> section + section > div {
position: relative;
background: #0096db;
padding: 20px 15px 0px 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div[role="main"] > section + section > div > hr { display: block; margin-bottom: 2em; height: 1px; border: 1px solid #fff; margin: 2em 0; padding: 0;}
#goods-pixivtan{ height: 137px; overflow: hidden; color: transparent; background: url('img/mobile_paperbag.png') no-repeat; background-size: 100%;}
div[role="main"] > section + section > div > h3{ width: 580px;}
div[role="main"] > section + section > div > p { padding:10px 0; color: #fff;}
#pixivtan-uchiwa{ background: url('img/uchiwa_mobile.png') no-repeat; position: relative; top:5px; text-indent: -9999px; width:249px; height:110px; }
#pixivtan-illust{ background: url('img/illust.png') no-repeat; position: absolute; top: 340; left:10px; margin-bottom: 0px; padding:0px;z-index: 3; width:270px; height:270px; text-indent: -9999px;}

/* #content
========================  */

#section-2 a{
    display: block;
    position: relative;
    line-height:17px;
    top: -18px;
    font-size: 10px;
    font-weight: bold;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
    float: left;
    width:150px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

div[role="main"] > section + section + div {
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px
}
div[role="main"] > section + section + div > h2 + article { margin-top: 2em;}
#section-heading { background: url('img/section-heading.png'); width: 100%; position: absolute; top: 0; left: 0; display: block; overflow: hidden; width: 290px; line-height: 40px; position: relative; color: #fff; padding-left: 20px;}

#section-heading2 { background: url('img/mobile_bar_orange.png'); width: 100%; position: absolute; top: -3px; left: -5px; display: block; overflow: hidden; width: 290px; line-height: 40px; position: relative; margin-top:12px; color: #fff; padding-left: 20px;}

#section-heading_event { background: url('img/mobile_header_event.png'); width: 100%; position: absolute; top: -3px; left: 0; display: block; overflow: hidden; width: 290px; line-height: 40px; position: relative; margin-top:12px; color: #fff; padding-left: 20px;}

#section-heading_distribution { background: url('img/mobile_header_muryohaihu.png'); width: 100%; position: absolute; top: -3px; left: 0; display: block; overflow: hidden; width: 290px; line-height: 40px; position: relative; margin-top:12px; color: #fff; padding-left: 20px;}

section + section + section > article { width: 860px; margin: auto; position: relative; }
article:before, article:after, .feature:before, .feature:after
{ content: "\0020"; display: block; height: 0; overflow: hidden;}
article:after, .feature:after {clear: both;}

#content hr { display: block; margin-bottom: 2em; height: 1px; border: 0;  margin: 2em 0; padding: 0; }
#content hr:before { content: url('img/border-hr.png'); }
#content2 hr:before { content: url('img/border-hr.png'); }
#content3 hr:before { content: url('img/border-hr.png'); }

.product_img{
    width:180px;
    margin: 0 auto;
    display: block;
}

/* #article
======================== */
article { position: relative; margin: 0 20px;}
article > section { width: 250px; margin: auto; float: right; }
article > section + div { width: 380px; margin: auto; text-align: center; float: left; margin-left: 30px; }
article > section + div > figure > figcaption { display: none;}
article > section h1, article > section h5 { font-size: 1.4em; color:#00A0E9; text-indent: -.5em;}
article > section > header > p { font-size: 1.2em;}
article > section > p { margin-top: 15px;}
.beveled { width: 260px; outline: 1px solid #ddd; border-top: 1px solid #f2f2f2;  margin: 0 -10px -10px -10px; padding: 10px; background: #f0f0f0;}
.beveled-horizon {
width: 320px; outline: 1px solid #ddd; border-top: 1px solid #f2f2f2;  margin: 0 -10px -10px -10px; padding: 10px; background: #f0f0f0;
-webkit-box-shadow: 0 0px 0px #fff; -moz-box-shadow: 0 0px 0px #fff;
}
.none-shadow {-webkit-box-shadow: 0 0px 0px #fff; -moz-box-shadow: 0 0px 0px #fff;}
.none-shadow:hover{-webkit-box-shadow: 0 0px 0px #fff; -moz-box-shadow: 0 0px 0px #fff;}
article > section + div > figure {
width: 230px; margin: auto; position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
article > section + div > figure img { width: 100%; margin: auto;}
article > section + div > figure:hover {/* -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;*/ }
article > section + div > figure:focus { outline: none; -webkit-transform: rotate(-0deg) scale(1.5); -moz-transform: rotate(-0deg) scale(1.5); z-index: 999; /*-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;*/}
.none-action:focus { -webkit-transform: none; -moz-transform: none);}
.category { font-size: 1em; margin-bottom: 5px;}

/* aside complementary
==================================================  */
aside { width: 840px; margin:auto; overflow: hidden;}
.widget { width: 380px; margin: 0 20px; float: left;}

/* the use of classes
================================================== */
.feature {
position: relative; background: #333;
padding-top: 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

.outline { float: left; width: 260px; padding:0px 15px 15px 15px;}
.outline-item01{ width: 260px; height: 95px; background: url('../images/nittei.png'); text-indent: -9999px;}
.outline > hr + p { width: 260px; height: 34px;}
.outline > img+p+hr:after { content: url('img/outline-item02.png');}
.outline > dl { margin-top: 15px; line-height: 1.4em; font-size: 1em;}
/*追加箇所*/
.outline > dl > dd {margin-left: 0px;}
.outline > dl > dd:first-of-type { margin-top: -1.4em;}
.outline > figure { width: 255px; height: 164px; margin: auto; margin-top: 15px; position: relative;}
.outline > figure > figcaption { position: absolute; bottom: 0; right: 0; margin: 10px;}
.map { width: 255px; height: 164px; margin: auto; margin-top: 15px; position: relative;}
.map img { width: 100%;}
.caption { position: absolute; left: 0; bottom: 0; margin:0 0 6px 12px;}

#zoom-button {
display:block;
padding: 0 10px;
line-height: 22px;
overflow: hidden;
border: 2px solid #ccc;
vertical-align: middle;
text-align: center;
background-color: #0096DB;
color: #fff;
font-size: 11px;
font-weight: bold;
}

body section .button-userlist{
display:block;
overflow: hidden;
margin-top: 30px;
line-height: 44px;
background-color:#0099DB;
color: #FFF;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#back-top { text-align: right; padding: 0 2em 2em;}
#back-top a:before { content: url('img/goup.png'); position: relative; bottom: -3px; margin-right: .3em; }
#back-top a { -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;}


.block { display: block;}
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.notice { color:#ff0000;}

/* CSS3 Zoom
-------------------------- */
@-webkit-keyframes modalFadeIn {
	0% {opacity: 0;display: block;}
	100% {opacity: 1;}
}
#modal div:target {
	-webkit-animation-name: modalFadeIn;
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display: block;

}

@-webkit-keyframes modalScale {
	0% {opacity: 0;display: block; -webkit-transform:scale(0);}
	100% {opacity: 1; -webkit-transform:scale(1);}
}
#modal div:target .zoom-window {
	-webkit-animation-name: modalScale;
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	-webkit-transform:scale(1);
	opacity: 1;
	display: block;
}
.overlay { width: 100%; height: 100%; top: 0; left: 0; display: block; text-indent: -9999px; position: absolute; background: #000; opacity: 0.5; z-index: 5; }
.zoom-window { top: 50%; left: 50%; margin: -150px 0 0 -200px; text-align: center; display: block; position: absolute; z-index: 10; -webkit-transform: scale(0); }
.zoom-window a { display: block; font-size: 16px; font-weight: bold; line-height: 160%; text-align: center; }

.pixiv_goods {
color: black;
background: #e0fcff;
border: 0;
padding: 15px;
border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
border: 0px #40E0D0 solid;
}

.pixiv_goods section{
    width: 220px;
    padding-bottom: 5px;
}