@charset "UTF-8";
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
                                 all
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
* {
  margin: 0px;
  padding: 0px;
}
body {
  color: #666666;
  background-color: #f0f0f0;
  font-size: 0.85em;
  text-align: center;
  font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
}
img {
  border: none;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #00778f;
}
a:hover {
  color: #61cadf;
}
/******************************************************************************
                                header
******************************************************************************/
#header {
  height: 130px;
  background: url(../images/h_bg.png) repeat-x;
}
/******************************************************************************
                                h_inner
******************************************************************************/
#h_inner {
  width: 830px;
  height: 90px;
  padding: 10px 0px 30px;
  margin: 0px auto;
  background: url(../images/h_inner_bg.png) no-repeat bottom;
}
/******************************************************************************
                                h_logo
******************************************************************************/
#h_logo {
  height: 70px;
  width: 175px;
  margin: 10px 10px 10px 0px;
  float: left;
  background: url(../images/h_logo.jpg) no-repeat;
}
#h_logo a {
  height: 0px;
  width: 175px;
  float: left;
  overflow: hidden;
  padding-top: 70px;
  text-indent: -9999px;
  background: url(../images/h_logo.jpg) no-repeat;
}
/******************************************************************************
                                h_logo
******************************************************************************/
#h_logo2 {
  height: 70px;
  margin: 10px 10px 10px 30px; /* margin-left 0=> 30 してるけど、h_inner につける方が本来は妥当だろう*/
  float: left;
}
#h_logo2 img {
  /* avoid Safari's Text recognition */
  -webkit-user-select: none;
  cursor: inherit;
}
#h_logo2 a:hover {
  filter: drop-shadow(0 0 1px #ffffffcc);
}
/******************************************************************************
                                h_menu
******************************************************************************/
#h_menu {
  height: 90px;
  float: left;
}
#h_menu li {
  width: 90px;
  height: 90px;
  float: left;
  display: block;
}
#h_menu li a {
  height: 0px;
  width: 90px;
  display: block;
  overflow: hidden;
  padding-top: 90px;
  text-indent: -9999px;
  background: url(../images/h_menu.jpg) no-repeat;
}

#h_menu #news a {
  background-position: 0px 0px;
}
#h_menu #prof a {
  background-position: -90px 0px;
}
#h_menu #song a {
  background-position: -180px 0px;
}
#h_menu #mate a {
  background-position: -270px 0px;
}
#h_menu #tool a {
  background-position: -360px 0px;
}
#h_menu #voice a {
  background-position: -450px 0px;
}
#h_menu #about a {
  background-position: -540px 0px;
}

#h_menu #news a:hover {
  background-position: 0px -90px;
}
#h_menu #prof a:hover {
  background-position: -90px -90px;
}
#h_menu #song a:hover {
  background-position: -180px -90px;
}
#h_menu #mate a:hover {
  background-position: -270px -90px;
}
#h_menu #tool a:hover {
  background-position: -360px -90px;
}
#h_menu #voice a:hover {
  background-position: -450px -90px;
}
#h_menu #about a:hover {
  background-position: -540px -90px;
}

/******************************************************************************
                                h_menu
******************************************************************************/
#h_menu2 {
  height: 90px;
  display: flex;
  justify-content: space-between;
  margin-right: 30px;
}

#h_menu2 li {
  width: 90px;
  height: 90px;
  display: block;
}

#h_menu2 li a {
  width: 90px;
  overflow: hidden;

  height: 80px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #cccccc;
  font-weight: 600;
}

#h_menu2 li a:hover {
  /* 文字列にぼやっと光るシャドーをつける */
  text-shadow: 0px 0px 1px #ffffffcc, 0px 0px 7px #ffffff99;

  background-image: url(../images/h_menu_hover_bg.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
}

#h_menu2 li a span.ja {
  margin-bottom: 7px;
  line-height: 11px;
  font-size: 11px;
}

#h_menu2 li a span.en {
  height: 10px;
  margin-top: 10px;
  font-size: 6.5px;
  letter-spacing: 0.1em;
}

#h_menu2 li a hr {
  border-width: 0.5px;
  border-style: solid;
  border-color: #cfcfcf;
  width: 50px;
}

/******************************************************************************
                               container
******************************************************************************/
#container {
  text-align: left;
  width: 810px;
  margin: 0px auto;
  padding: 0px 10px;
  background: url(../images/c_bg.png) repeat-y;
  min-height: 600px;
}
/******************************************************************************
                               main_col
******************************************************************************/
#main_col {
  width: 770px;
  padding: 15px 20px;
  overflow: hidden;
}
/******************************************************************************
                               copy
******************************************************************************/
#copy {
  clear: left;
  text-align: center;
  overflow: hidden;
  background: url(../images/copy_bg.jpg) repeat-x;
}
#copy_inner {
  clear: left;
  width: 830px;
  margin: 0px auto;
  padding-bottom: 80px;
  background: url(../images/copy_inner_bg.jpg) no-repeat bottom;
}
#copy_inner p {
  clear: left;
  text-align: left;
  width: 790px;
  margin: 0px auto;
  padding: 60px 20px 0px;
  background: url(../images/copy_p_bg.jpg) no-repeat;
}
/******************************************************************************
                               footer
******************************************************************************/
#footer a {
  color: #8f8f8f;
}
#footer a:hover {
  color: #bfbfbf;
}
#footer {
  clear: left;
  color: #8f8f8f;
  overflow: hidden;
  font-weight: bold;
  text-align: center;
  background: url(../images/f_bg.jpg) repeat;
}
#f_inner {
  clear: left;
  width: 830px;
  overflow: hidden;
  margin: 0px auto;
  padding-bottom: 20px;
  background: url(../images/f_logo.png) no-repeat bottom right;
}
/******************************************************************************
                               f_menu
******************************************************************************/
.f_menu h2 {
  font-size: 1.1em;
  line-height: 1em;
  width: 170px;
}
.f_menu_en {
  font-size: 0.7em;
  color: #5f5f5f;
}
.f_menu {
  width: 830px;
  overflow: hidden;
}
.f_menu div {
  width: 170px;
  text-align: left;
  float: left;
  padding: 0px 10px 20px 20px;
}
.f_menu li {
  padding: 7px 0px;
  background: url(../images/f_menu_li_bottom.jpg) no-repeat bottom left;
}
.f_menu li a {
  display: block;
  padding-left: 20px;
  background: url(../images/f_menu_mark.jpg) no-repeat 0% 50%;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
                                   top
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/******************************************************************************
                                  top_main
******************************************************************************/
#top_main {
  width: 810px;
  overflow: hidden;
}
#top_main dt {
  height: 260px;
  width: 760px;
  padding: 0px 25px;
}
#top_main dd {
  height: 100px;
  width: 810px;
}
#top_main dd a {
  height: 0px;
  width: 810px;
  display: block;
  padding-top: 100px;
  overflow: hidden;
  background: url(../images/t_title.jpg) no-repeat;
}
#top_main dt a:hover {
  background: url(../images/t_title_hover.jpg) no-repeat;
}
/******************************************************************************
                               top_col
******************************************************************************/
.top_col {
  width: 375px;
  float: left;
  overflow: hidden;
}
.top_col h2 {
  height: 0px;
  overflow: hidden;
  padding-top: 30px;
  clear: left;
}
.top_left_col {
  margin-right: 20px;
}
/******************************************************************************
                               top_news
******************************************************************************/
#top_news h2 {
  background: url(../images/top_news.jpg) no-repeat;
}
#top_news dl {
  margin: 15px 5px;
}
#top_news dl dd {
  padding: 10px 0px;
  border-bottom: dotted 1px #999;
}
/******************************************************************************
                               top_pickup
******************************************************************************/
#top_pickup h2 {
  background: url(../images/top_pickup.jpg) no-repeat;
}
#top_pickup dl {
  margin: 20px 5px;
}
/******************************************************************************
                               top_twit
******************************************************************************/
#top_twit h2 {
  background: url(../images/top_twit.jpg) no-repeat;
}
#top_twit_icon {
  width: 90px;
  height: 90px;
  float: left;
  margin: 15px 0px;
  background: url(../images/top_twit_icon.jpg) no-repeat;
}
#top_twit_icon a {
  height: 0px;
  display: block;
  padding-top: 90px;
  overflow: hidden;
  text-indent: -9999px;
}
#top_tweet_dl {
  width: 255px;
  float: left;
  overflow: hidden;
  margin: 20px 0px 10px;
  padding: 10px 5px 0px 20px;
  background: url(../images/top_twit_text.jpg) no-repeat;
}
#top_tweet_dl dd {
  width: 225px;
}
#top_tweet_text {
  margin: 0px 15px 5px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #999999;
}
#top_twit_from {
  padding: 0px 15px 15px;
  background: url(../images/top_twit_bottom.jpg) no-repeat bottom left;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
                              contents page
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/******************************************************************************
                                 main
******************************************************************************/
.main {
  width: 770px;
  height: 100px;
  overflow: hidden;
  text-indent: -9999px;
}
#news_main {
  background: center/100% url(../images/news_main.png) no-repeat;
}
#prof_main {
  background: center/100% url(../images/prof_main.png) no-repeat;
}
#song_main {
  background: center/100% url(../images/song_main.png) no-repeat;
}
#mate_main {
  background: center/100% url(../images/mate_main.png) no-repeat;
}
#contents_main {
  background: center/100% url(../images/contents_main.png) no-repeat;
}
#tool_main {
  background: center/100% url(../images/tool_main.png) no-repeat;
}
#voice_main {
  background: center/100% url(../images/voice_main.png) no-repeat;
}
#about_main {
  background: center/100% url(../images/about_main.png) no-repeat;
}
#normal_main {
  background: center/100% url(../images/normal_main.png) no-repeat;
}
/******************************************************************************
                               B_crumbBox
******************************************************************************/
.B_crumbBox {
  display: block;
  margin: 10px 0px;
}
/******************************************************************************
                                 info
******************************************************************************/
.pagetitle,
div.contentcolumn h1 {
  clear: left;
  height: 2.5em;
  font-size: 1.5em;
  line-height: 2.5em;
  margin-bottom: 20px;
  padding-left: 20px;
  border-right: 1px solid #c9c9c9;
  background: url(../images/pagetitle.jpg) no-repeat;
}
.info_1,
div.contentcolumn h2 {
  height: 50px;
  font-size: 1.5em;
  line-height: 2.5em;
  padding-left: 40px;
  margin-bottom: 20px;
  background: url(../images/info_1.jpg) no-repeat;
}
.info_2,
div.contentcolumn h3 {
  height: 40px;
  font-size: 1.4em;
  line-height: 1.9em;
  padding-left: 40px;
  margin-bottom: 20px;
  background: url(../images/info_2.jpg) no-repeat;
}
.info_3,
div.contentcolumn h4 {
  height: 30px;
  font-size: 1.2em;
  line-height: 2em;
  padding-left: 40px;
  margin-bottom: 10px;
  background: url(../images/info_3.jpg) no-repeat;
}
.list li,
div.contentcolumn ul li {
  padding-left: 40px;
  background: url(../images/list_icon.jpg) no-repeat 7px;
  margin-bottom: 10px; /* Add */
}
/******************************************************************************
                               l_menu_en
******************************************************************************/
#left_menu {
  float: left;
  width: 195px;
  overflow: hidden;
  margin-right: 20px;
  background: url(../images/l_menu_bg.jpg) repeat;
}
#left_menu h2 {
  height: 45px;
  font-size: 1.5em;
  line-height: 1em;
  padding: 10px 0px 0px 20px;
  background: url(../images/l_menu_h2.jpg) no-repeat;
}
#l_menu_en {
  font-size: 0.7em;
}

#left_menu li {
  padding: 10px 10px 10px 10px;
  background: url(../images/l_menu_li_bottom.jpg) no-repeat bottom left;
}
#left_menu li a {
  display: block;
  padding-left: 20px;
  background: url(../images/l_menu_mark.jpg) no-repeat 0% 50%;
}

#left_menu .last {
  padding: 7px 0px 7px 10px;
  background: url(../images/l_menu_bg.jpg) repeat;
}
/******************************************************************************
                               right_col
******************************************************************************/
#right_col {
  width: 555px;
  float: left;
  overflow: hidden;
}

#onecolumn {
  width: 770px;
  overflow: hidden;
}
/* Addition */
div.contentcolumn dl.dlist > dt {
  /*  height:30px;*/
  font-size: 1.4em;
  line-height: 1.6em;
  padding-left: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
  background: url(../images/info_3.jpg) no-repeat;
}

div.contentcolumn dl.dlist > dd {
  line-height: 1.5em;
  margin-left: 30px;
  margin-bottom: 20px;
}

div.contentcolumn dl dt {
  line-height: 1.6em;
  margin-left: 10px;
  /*  margin-bottom:5px;*/
}
div.contentcolumn dl dd {
  line-height: 1.5em;
  margin-left: 20px;
  margin-bottom: 10px;
}

div.contentcolumn dl.credit dt {
  line-height: 1.6em;
  margin-left: 10px;
  /*  margin-bottom:5px;*/
  float: left;
}
div.contentcolumn dl.credit dd {
  line-height: 1.5em;
  margin-left: 20px;
  margin-bottom: 10px;
  padding-left: 110px;
}

div.contentcolumn p {
  margin-left: 10px;
  margin-bottom: 10px;
}

div.contentcolumn ol li {
  padding-left: 40px;
  list-style-type: decimal;
  margin-bottom: 10px; /* Add */
}

.aa {
  font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Mona",
    "mona-gothic-jisx0208.1990-0", sans-serif;
  font-size: 12px;
  line-height: 13.5px;
}

.dllink {
  margin-top: 10px;
}

#list_tbl {
  margin-left: 10px;
  width: 100%;
}

#list_tbl td {
  width: 50%;
}

/* for Logo Entry List  */
.fl_left {
  float: left;
}
.fl_clear {
  clear: both;
}

summary {
  font-size: 1.1em;
  font-weight: bold;
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/******************************************************************************
                               Snippet or such
******************************************************************************/
.author_ditto {
  /*  */
  text-align: right;
}

.right_ditto {
  padding-bottom: 1em;
}

.clear_ditto {
  margin-top: 10px;
  margin-bottom: 20px;
}