@charset "utf-8";

html,body {
  margin: 0;
  padding: 0;
}
body {
  /* font-family: Georgia, 'Times New Roman', Times, serif; */
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 100%;
  font-weight: normal;
  line-height: 24px;
  text-align: center;

  color: #333333;;
  background: #f0f0f0;
}

/* layout */
#container {
  width: 460px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  /* background: transparent url(../images/grid_940w_16c_20g.png) 50% 0 repeat-y; *\\\/  background: transparent url(../images/grid_940w_16c_20g.png) 50% 0 repeat-y; */
}
#header {
  width: 460px;
  height: 48px;
  margin: 0;
  padding: 12px 0 36px;
  background: #333333;
}
#greeting {
  width: 460px;
  height: 264px;
  margin: 0 0 72px 0;
  padding: 0 0;

  width: 920px;
  height: 353px;
  margin: 0 -230px 0 -230px;
  background: #f0f0f0 url(../images/greeting-bg2.gif) 50% 0 no-repeat;
}
#greeting p {
  height: 264px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 687%;
  font-style: italic;
  line-height: 264px;
  text-align: center;
  letter-spacing: 2px;
  color: #000000;
  background: transparent;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

#content {
  margin: 0;
  color: #ffffff;
  background: #333333;
}

#footer {
  clear: both;
  width: 460px;
  margin: 0;
  padding: 48px 0 0;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  color: #333333;
  background: transparent url(../images/footer-bg.gif) 0 0 no-repeat;
}

/* html elements */
h1, h2, h3, h4, h5 {
  clear: both;
  margin: 0 0 24px;
  padding: 0;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 24px;
}
h2 {
  margin: 0 0 0 0px;
  padding: 0 0 0 16px;
  background: transparent url(../images/icon-hw2.gif) 0 50% no-repeat;
  font-size: 144%;
  line-height: 48px;
}
h3 {
  margin: 0;
  padding: 0;
  font-size: 100%;
  line-height: 24px;
  letter-spacing: 0;
}
h4 { font-size: 100%; }
h5 { font-size: 100%; }

p, table {
  margin: 0 0 24px;
  padding: 0;
  line-height: 24px;
}

ul, ol {
  position: relative;
  left: -3em;
  margin: 0 -3em 24px 0;
  padding: 0;
  line-height: 24px;
}
li {
  margin: 0 0 0 5em;
  padding: 0;
}

img {
  border: none;
}
em {
  padding: 0 2px;
  font-style: normal;
  color: #ffffff;
  background: #1affb2;
}
a {
  /* color: #1a79ff; */
  color: #ffffff;
  background: transparent;
  text-decoration: underline;
}
a:visited {
  /* color: #791aff; */
  color: #999999;
  background: transparent;
}
a:hover {
  color: #ffffff;
  background: #1a66ff;
  text-decoration: none;
}
a:active {
  color: #791aff;
  background: transparent;
}

/* context */
h1.logo {
  width: 460px;
  height: 48px;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 281%;
  line-height: 48px;
}
h1.logo img {
  display: block;
  margin: 0;
  padding: 0 16px;
}
.textblock {
  width: 230px;
  margin: 0 0 24px 0;
  padding: 0;
  float: left;
}

#mp3 {
  margin-right: 0 !important;
}

.textblock p,
.textblock ul,
.textblock ol,
.textblock dl {
  margin-left: 16px;
  margin-right: 16px;
  font-size: 92%;
  line-height: 24px;
}

#footer h2 {
  margin: 0 0 12px 0;
  padding: 0 16px;
  background: none;
  font-size: 115%;
  letter-spacing: 0;
  line-height: 24px;

}
#footer .textblock {
  width: 460px;
  margin: 0 0 24px 0;
  padding: 0;
}

#footer .textblock p,
#footer .textblock ul {
  margin: 0;
  padding: 0 8px;
  font-size: 74%;
  line-height: 16px;
}
#footer .icon {
  display: block;
  margin: 0;
  padding: 0 0 12px;
  background: transparent url(../images/balloon-bg.gif) 0 100% no-repeat;
  overflow: auto;
}

#footer .balloon {
  display: block;
  width: 460px;
  margin: 0;
  padding: 0 0 0;

  overflow: hidden;
}
#footer .icon h3 {
  margin: 0;
  padding: 0 16px;
  line-height: 24px;
  font-size: 74%;
  font-weight: bold;
}
#footer .twitter {
  width: 428px;
  margin: 0 16px 0;
  padding: 8px 0;
  color: #333333;
  background: #cccccc;
}
#footer .lastfm {
  width: 428px;
  margin: 0 16px;
  padding: 8px 0 8px;
  overflow: auto;
  color: #333333;
  border-top: 2px solid #f0f0f0;
  background: #cccccc;
}
#footer .twitter ul {
  left: 0;
  margin: 0;
  padding: 0 8px;
  list-style-type: none;
}
#footer .twitter li {
  margin: 0;
  padding: 0;
  background: transparent;
}

#footer a,
#footer a:visited {
  color: #333333;
  background: transparent;
  text-decoration: none;
}
#footer a:hover {
  color: #333333;
  background: transparent;
  text-decoration: underline;
}
#footer a:active {
  color: #333333;
  background: transparent;
  text-decoration: none;
}

#footer p.service-detail {
  margin: 0;
  padding: 0 10px;
  text-align: right;
}
#footer p.service-detail a,
#footer p.service-detail a:visited,
#footer p.service-detail a:hover,
#footer p.service-detail a:active {
  text-decoration: underline;
}

ul.file {
  left: 0;
  margin: 0 0 0 16px;
  padding: 0;
  list-style-type: none;
}
ul.file li {
  float: left;
  display: block;
  margin: 0 16px 16px 0;
  padding: 0;
  width: 90px;
  height: 90px;
  overflow: hidden;
  background: transparent url(../images/disc.gif) 0 0 no-repeat;
}

.file-name,
.file-detail {
  display: block;
  margin: 0;
  padding: 0;
}
.file-name a {
  margin: 12px 0 0;
  padding: 0;
  display: block;
  font-size: 100%;
  line-height: 1.2;
  color: #ffffff;
  text-decoration: underline;
}
.file-detail {
  padding: 2px 0 0;
  font-size: 74%;
  line-height: 1.2;
}

#copyright {
  clear: both;
  margin: 0;
  padding: 12px 0;
  text-align: center;
}
#copyright p {
  font-size: 74%;
  margin: 0;
  padding: 0 4px;
  line-height: 24px;

  display: inline;
  color: #333333;
  background: #eeeeee;
}


.clear {
  clear: both;
}

/* clearfix */
#greeting:after,
#content:after,
#footer .icon:after,
.clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
        }
* html #greeting,
* html #content,
* html #footer .icon,
* html .clearfix { zoom: 1; }
*:first-child+html #greeting,
*:first-child+html #content,
*:first-child+html #footer .icon,
*:first-child+html .clearfix { zoom: 1; }