@charset "utf-8";

/* --------------------------------------------------------
	clear
--------------------------------------------------------- */
* {
  margin: 0; padding: 0; font-style: normal; background-repeat: no-repeat; font-size: 16px;
}
h1, h2, h3, h4, div, p, ul, ol, li, dl, dt, dd, img {
  margin: 0px; padding: 0px; border: none; list-style-type: none;
  font-size: 16px; font-weight: normal; font-style: normal; line-height: 1;
}

body {
  color: #555; background-color: #FFF;
  font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "sans-serif", "ＭＳ Ｐゴシック";
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
hr {
  clear: both; visibility: hidden; height: 0; margin: 0; padding: 0; border:0;
}
p {
  line-height: 1.8em; padding-bottom: 20px;
}
table {
  border-collapse: collapse; border: 0;
}
blockquote {
  margin: 0; margin-bottom: 20px; padding: 20px; line-height: 1.6em; background-color:#FFDFDF;
}
em {
  color: #FF3300;
}
em.blue {
  color: #3366FF;
}
.green {
  color: green;
}
a:hover {
  color: #FF0000;
}
.mgn-b30 {
  margin-bottom: 30px;
}
.pdg-b30 {
  padding-bottom: 30px;
}
input, select, textarea {
  padding: 5px;
}

table.td-small td {
  font-size: small;
}

.view-pc { display: block !important; visibility: visible; }
.view-sp { display: none !important; visibility: hidden; }

@media screen and (max-width: 500px){
  * {
    margin: 0; padding: 0; font-size: 100%; -webkit-text-size-adjust: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

 .view-pc { display: none !important; visibility: hidden; }
 .view-sp { display: block !important; visibility: visible; }
}


/* --------------------------------------------------------
  header
--------------------------------------------------------- */

#header, #main, #footer {
  width: 1040px; padding: 0 20px; margin-left: auto; margin-right: auto;
}

#header {
  height: 230px; color: #FFF;
  background-image: url(../../images/bg_header.jpg); background-repeat: no-repeat; background-position: top;
}

#header h1 {
  height: 20px; color: #FFF; font-size: 12px; line-height: 1.2em;
}

#header #logo {
  width: 230px; height: 75px; margin-top: 5px; margin-bottom: 40px; margin-left: 10px;
}
#header #logo A {
  width: 230px; height: 75px;
  font-size: 1px; text-indent: -9999px; display: block; background-size: contain;
  background-image: url(../../images/btn_logo.png); text-decoration: none; overflow: hidden;
}

#header ul#series {
  width: 950px; list-style-type: none; float: left; margin-top: 20px; margin-left: 10px;
}
#header ul#series li {
  margin-right: 5px; float: left;
}
#header ul#series li a {
  width: 130px; height: 64px; overflow:hidden; display: block;
  background: url(../../images/btn_gnavi.png) no-repeat; text-indent: -9999px; text-decoration: none;
}
#header ul#series li.nv01 a {
  background-position: 5px 0px;
}
#header ul#series li.nv02 a {
  background-position: -125px 0px;
}
#header ul#series li.nv03 a {
  background-position: -260px 0px;
}
#header ul#series li.nv04 a {
  background-position: -395px 0px;
}
#header ul#series li.nv05 a {
  background-position: -530px 0px;
}
#header ul#series li.nv06 a {
  background-position: -665px 0px;
}
#header ul#series li.nv07 a {
  background-position: -800px 0px;
}

#header ul#series li.nv01 a:hover,
#header ul#series li.nv01_o a {
  background-position: 5px -65px;
}
#header ul#series li.nv02 a:hover,
#header ul#series li.nv02_o a {
  background-position: -125px -65px;
}
#header ul#series li.nv03 a:hover,
#header ul#series li.nv03_o a {
  background-position: -260px -65px;
}
#header ul#series li.nv04 a:hover,
#header ul#series li.nv04_o a {
  background-position: -395px -65px;
}
#header ul#series li.nv05 a:hover,
#header ul#series li.nv05_o a {
  background-position: -530px -65px;
}
#header ul#series li.nv06 a:hover,
#header ul#series li.nv06_o a {
  background-position: -665px -65px;
}
#header ul#series li.nv07 a:hover,
#header ul#series li.nv07_o a {
  background-position: -800px -65px;
}


@media screen and (max-width: 500px){
  #header {
    width: 100%; margin: 0; padding: 0; background-size: contain;
    height: 0; padding-top: 24.3%;
    top: 0px; left: 0px; position: relative;
    background-image: url(../../images/bg_header_sp.png);
  }
  #header h1 {
    width: 100%; height: auto; margin: 0; padding: 0; color: #fff;
    background-color: #76bbfe; text-align: left;
    display: none;
  }
  #header #logo {
    top: 0px; left: 0px; position: absolute;
  }
  #header #logo A {
    width: 300px; height: 58px; background-size: contain;
    background-size: auto 100%;
  }


  #header ul#series {
    width: 100%; margin: 0; padding: 0;
  }
  #header ul#series li {
    margin: 0; padding: 0; float: none;
  }
  #header ul#series li a {
    width: 100%; height: auto; line-height: 2.0em; margin: 0; padding-left: 40px;
    border: 1px solid #ccc; color:#111; position: relative;
    overflow: visible; text-indent: 0px; display: inline; font-size: 120%;
    float: left;
  }
  #header ul#series li a:before {        /*グレーのひし型 */  
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    right: 15px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: #333;
  }
  #header ul#series li a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: #eee;
  }
  #header ul#series li a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
    background: #eee;
  }

  #header ul#series li.nv01 a,
  #header ul#series li.nv01 a:hover,
  #header ul#series li.nv01_o a {
    background: #eee;
    background-repeat: no-repeat; background-position: 5px center; background-size: auto 70%;
    background-image: url(../../images/icon_switch.png);
  }
  #header ul#series li.nv02 a,
  #header ul#series li.nv02 a:hover,
  #header ul#series li.nv02_o a {
    background: #eee;
    background-repeat: no-repeat; background-position: 5px center; background-size: auto 70%;
    background-image: url(../../images/icon_3ds.png);
  }
  #header ul#series li.nv03 a,
  #header ul#series li.nv03 a:hover,
  #header ul#series li.nv03_o a {
    background: #eee;
    background-repeat: no-repeat; background-position: 5px center; background-size: auto 70%;
    background-image: url(../../images/icon_wii.png);
  }
  #header ul#series li.nv04 a,
  #header ul#series li.nv04 a:hover,
  #header ul#series li.nv04_o a {
    background: #eee;
    background-repeat: no-repeat; background-position: 5px center; background-size: auto 70%;
    background-image: url(../../images/icon_nds.png);
  }
  #header ul#series li.nv05 a,
  #header ul#series li.nv05 a:hover,
  #header ul#series li.nv05_o a {
    background: #eee;
    background-repeat: no-repeat; background-position: 5px center; background-size: auto 70%;
    background-image: url(../../images/icon_pen.png);
  }
  #header ul#series li.nv06 a,
  #header ul#series li.nv06 a:hover,
  #header ul#series li.nv06_o a {
    background: #eee;
    background-repeat: no-repeat; background-position: 5px center; background-size: auto 70%;
    background-image: url(../../images/icon_faq.png);
  }
  #header ul#series li.nv07 a,
  #header ul#series li.nv07 a:hover,
  #header ul#series li.nv07_o a {
    background: #eee;
    background-repeat: no-repeat; background-position: 5px center; background-size: auto 70%;
    background-image: url(../../images/icon_bbs.png);
  }
}


/* --------------------------------------------------------
  main
--------------------------------------------------------- */

#main {
  padding: 0 20px; 
  background-image: url(../../images/bg_main.gif); background-repeat: repeat-y; background-position: top;
}
#main #topnavi {
  height: 32px; padding: 1px 20px; 
  background-image: url(../../images/bg_pankuzu.gif); background-repeat: no-repeat; background-position: top;
}
#main #topnavi.switch {
  /* background-image: url(../../images/bg_pankuzu_p.gif); background-repeat: no-repeat; background-position: top; */
}
#main #topnavi.n3ds {
  background-image: url(../../images/bg_pankuzu_b.gif); background-repeat: no-repeat; background-position: top;
}
#main #topnavi.wii {
  background-image: url(../../images/bg_pankuzu_p.gif); background-repeat: no-repeat; background-position: top;
}
#main #topnavi.nds {
  background-image: url(../../images/bg_pankuzu_g.gif); background-repeat: no-repeat; background-position: top;
}
#main #topnavi #pankuzu {
  padding-top: 3px; color: #555;
}
#main #topnavi #pankuzu li {
  display: block; float: left;
  font-size: 12px;
}
#main #topnavi #pankuzu li a {
  display: block; padding-right: 18px; color: #555;
  background-image: url(../../images/bg_arrow.gif); background-repeat: no-repeat; background-position: right;
  font-size: 12px;
}
#main #topnavi #pankuzu li h2 {
  font-size: 12px; font-weight: normal;
}


@media screen and (max-width: 500px){
  #main {
    width: 100%; margin: 0; padding: 0;
  }
  #main #topnavi {
display: none;
    width: 100%; height: auto; line-height: auto; margin: 0; padding: 0;
    background-image: url(../../images/bg_pankuzu.gif);
  }
  #main #topnavi #pankuzu li {
    display: none;
  }
}


/* --------------------------------------------------------
  main left
--------------------------------------------------------- */

#left {
  width: 735px; padding: 20px 0 20px 20px; float: left;
}
#left #descript {
  width: 715px; padding: 10px; background-color: #DAF5BE; border: solid 1px #C0D99B;
  color: #555; font-size: 12px; line-height: 1.2em;
}
#left #descript h2 {
  color: #669900; font-weight: bold; margin-bottom: 5px;
}
#left h3 {
  width: 700px; height: 25px; padding-top: 25px; padding-left: 35px; margin-top: 10px; margin-bottom: 10px;
  color: #FFFFFF; font-size: 14px; font-weight: bold;
  background-image: url(../../images/bar_main.png); background-repeat: no-repeat; background-position: top;
}
#left h3.switch {
  background-image: url(../../images/bar_switch.png);
}
#left h3.n3ds {
  background-image: url(../../images/bar_3ds.png);
}
#left h3.n3ds2 {
  background-image: url(../../images/bar_3ds2.png);
}
#left h3.n3ds3 {
  background-image: url(../../images/bar_3ds3.png); width: 680px; padding-left: 55px;
}
#left h3.nds {
  background-image: url(../../images/bar_nds.png);
}
#left h3.wii {
  background-image: url(../../images/bar_wii.png);
}

#left h4 {
  font-weight: bold; font-size: 16px; color: #F60; padding-left: 25px;
  background-image: url(../../images/icon_face.gif); background-position: left center; clear: both;
}
#left h4 a {
  font-size: 16px; color: #F60;
}
#left h4 a:hover {
  font-size: 16px; color: #FF3366;
}

#left h4.ordinance {
  background-image: url(../../images/icon_ordinance.png);
}
#left h4.public {
  background-image: url(../../images/icon_public.png); color: #FF78B4;
}

#left h5 {
  margin-bottom: 10px; padding-left: 16px;
  line-height: 1; color: #54B208; font-size:14px;
  background-image: url(../../images/icon_star.gif);
}


#left .contents {
  width: 725px; padding: 10px 0 10px 10px;
}
#left .contents p {
  margin-bottom: 15px;
}

#left .contents img {
  margin-bottom: 15px;
  width: 100%; height: auto;
}
#left .contents img.frame {
  border: solid 1px #CCCCCC; padding: 10px;
  background-color: #DDD; background-image: url(../../images/bg_diagonal.gif); background-repeat: repeat;
}

#left .contents img.icon {
  width: auto;
}



#left .contents .harf {
  width: 350px; padding-right: 10px; float: left;
}
#left .contents .harf ul {
  width: 310px;  margin-left: 10px;
}
#left .contents .harf li {
  line-height: 1.2em; margin-bottom: 5px; list-style-type: square;
}
#left .contents .harf li ul {
  width: 310px; margin: 5px 0;
}
#left .contents .harf li li {
  list-style-type: circle; margin: 0;
}

/* インフォメーション */
#left .information {
  margin-bottom: 20px;
}
#left .information ul {
  margin-bottom: 5px; margin-left: 10px;
}
#left .information li {
  line-height: 1.4em; margin-bottom: 5px;
}

#left .information p {
  margin-bottom: 10px; clear: both;
}
#left p.top {
  line-height: 36px;
}
#left p.top img {
  float: left; margin-right: 15px; display: block;
}
#left p.top a {
  margin-right: 10px;
}

/* ソーシャルボタン */
#left .social-btn {
  width: auto; margin-bottom: 10px;
}
#left .social-btn div {
  float: left;
}
#left .social-btn li {
  display: block;
}
iframe.twitter-share-button {
  width: 90px!important;
}

@media screen and (max-width: 500px){
  #left {
    width: 100%; margin: 0; padding: 0 10px; font-size: 100%; !important; float: none;
  }
  #left #descript {
    width: auto; margin: 0; margin-top: 10px; margin-bottom: 10px; padding: 10px; font-size: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  #left h3 {
    width: auto; height: auto; margin: 10px 0; padding: 5px; font-size: 110%;
    color: #fff; background: #f89a19; line-height: 1.2em; font-weight: normal;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
  }
  #left h3.switch {
    background-image: none; background: #f63d34;
  }
  #left h3.n3ds,
  #left h3.n3ds2 {
    background-image: none; background: #356feb;
  }
  #left h3.n3ds3 {
    width: auto; padding: 5px;
    background-image: none; background: #356feb;
  }
  #left h3.wii {
    background-image: none; background: #136800;
  }
  #left h3.nds {
    background-image: none; background: #4a9306;
  }

  #left .contents,
  #left .contents .harf,
  #left .contents .harf ul {
    width: 100%; margin: 0; padding: 0; float: none;
  }

  #left .contents img,
  #left .information img {
    width: 100%; height: auto;
  }
  #left img.new {
    width: auto; height: auto;
  }
  #left p.top img {
    float: none;
  }
  #left p.top span {
    line-height: 1.4em;
  }
}


/* 全メニュー */

#left .menulist dl {
  width: 175px; height: auto; padding-right: 5px; margin-bottom: 10px; float: left; display: block;
}
#left .menulist dl dt {
  padding: 10px 0 5px 25px; line-height: 1.4em; font-weight: bold; clear: both;
  background-image: url(../../images/icon_leaf.gif); background-repeat: no-repeat; background-position: left center;
}
#left .menulist dl dt.facility {
  background-image: url(../../images/icon_facility.gif);
}
#left .menulist dl dt.hints {
  background-image: url(../../images/icon_hints.gif);
}
#left .menulist dl dt.bbs {
  background-image: url(../../images/icon_bbs.gif);
}
#left .menulist dl dt.animal {
  background-image: url(../../images/icon_animal.gif);
}
#left .menulist dl dt.flag {
  background-image: url(../../images/icon_flag.gif);
}
#left .menulist dl dt.duties {
  background-image: url(../../images/icon_duties.gif);
}
#left .menulist dl dd {
  line-height: 1.4em; clear: both;
}
#left .menulist dl dd ul {
  margin: 0; padding: 0; padding-left: 12px; clear: both;
}
#left .menulist dl dd ul li {
  line-height: 1.4em;
}
#left .menulist dl dd ul.line,
#left .menulist dl dd ul.line-lp {
  padding-bottom: 10px; padding-left: 0; width: 175px;
}
#left .menulist dl dd ul.line-lp {
  padding-left: 12px;
}
#left .menulist dl dd ul.line2 {
  padding-left: 12px; width: 163px; margin-bottom: -5px;
}
#left .menulist dl dd ul.line li,
#left .menulist dl dd ul.line-lp li,
#left .menulist dl dd ul.line2 li {
  float: left; padding-right: 8px; line-height: 1.4em;
}
#left .menulist dl dd ul.line {
}

/* リスト */
#left .contents dl {
  width: 100%; padding: 0; margin-left: 15px; margin-top: 10px;
}
#left .contents dl dt {
  font-size: 14px; margin-bottom: 5px; font-weight: bold;
  /*background-image: none;*/ color: #dd4b39;
}
#left .contents dl dd {
  margin-left: 15px; margin-bottom: 12px; line-height: 1.4em;
}
#left .contents dl dd table {
  width: 680px;
}


#left .contents ul {
  margin: 15px 0; margin-left: 1.0em; padding-left: 1.0em;
}
#left .contents ul li {
 list-style: disc; margin-bottom: 5px; line-height: 1.4em;
}

#left .contents table {
  width: 100%; border: #999999 1px solid; margin-bottom: 15px;
}
#left .contents table th {
  padding: 5px 0; color: #FFFFFF; border: #ABABAB 1px solid; background-color: #418341; /* background-color: #66CC99; */
  font-size: 10px; text-align: center;
}
#left .contents table tr {
  background-color: #ffffe1;
}
#left .contents table td {
  padding: 3px 10px; border: #CCCCCC 1px solid; line-height: 1.4em;
}



/* リンクメニュー P */
#left .contents p.linkmenu {
  line-height: 1.8em;
}
#left .contents p.linkmenu a {
  padding: 4px; background-color: #FFCCCC;
}
#left .contents p.linkmenu a:hover {
  background-color: #FFFF99;
}

/* リンクメニュー UL */
#left .contents ul.linkmenu {
  margin: 0; padding: 0;
}
#left .contents ul.linkmenu li {
  margin-right: 0.5em; float: left; border: 1px solid #CCCCCC; list-style: none; width: 160px;
}
#left .contents ul.linkmenu li.col1 {
  background-color: #FFB3B3;
}
#left .contents ul.linkmenu li.col2 {
  background-color: #FFC8AA;
}
#left .contents ul.linkmenu li.col3 {
  background-color: #C7FFA2;
}
#left .contents ul.linkmenu li.col4 {
  background-color: #C1FFCC;
}
#left .contents ul.linkmenu li.col5 {
  background-color: #C1EDFF;
}
#left .contents ul.linkmenu li.col6 {
  background-color: #C1DAFF;
}
#left .contents ul.linkmenu li.col7 {
  background-color: #C9C1FF;
}
#left .contents ul.linkmenu li.col8 {
  background-color: #F5C1FF;
}
#left .contents ul.linkmenu li.col9 {
  background-color: #FFBBDF;
}
#left .contents ul.linkmenu li a {
  display: block; padding: 3px; text-align: center;
}
#left .contents ul.linkmenu li a:hover {
  background-color: #FFFF99;
}

/* リンクメニュー UL-Text */
#left .contents ul.linkmenu-t {
  margin: 0; padding: 0;
}
#left .contents ul.linkmenu-t li {
  margin-right: 0.5em; float: left; border: 1px solid #CCCCCC; list-style: none; width: 126px; line-height: 1.2em;
}
#left .contents ul.linkmenu-t li a {
  display: block; padding: 3px; text-align: center;
}
#left .contents ul.linkmenu-t li a:hover {
  background-color: #FFFF99;
}


@media screen and (max-width: 500px){
  #left .menulist dl,
  #left .menulist dl dd ul.line,
  #left .menulist dl dd ul.line-lp {
   width: 100%; margin: 0; padding: 0; float: none; display: block;
  }

  #left .menulist dl dt {
    line-height: 1.6em; font-size: 140%; margin: 0; padding: 0; padding-left: 25px;
  }
  #left .menulist dl dd {
    line-height: 1.6em; font-size: 120%; margin: 0; padding: 0;
  }
  #left .menulist dl dd ul,
  #left .menulist dl dd ul li{
    line-height: 1.6em; font-size: 100%; margin: 0;
  }
  #left .contents dl {
    width: 100%; padding: 0; margin: 0;
  }
  #left .contents dl dd table {
    width: 100%; margin: 0; padding: 0;
  }
  #left .contents ul.linkmenu li,
  #left .contents ul.linkmenu-t li {
    width: 100%; margin: 0; float: none;
  }

  #left .contents table {
    width: 100%;
  }
  #left .contents table th {
    padding: 0;
  }
  #left .contents table td {
    padding: 0;
  }
}


#prev_page a {
  width: 18px; font-weight: normal; padding: 2px 3px;
  display: block; float: left; margin: 0 3px 3px 0;
  color: #333333; border: #DDDDDD solid 1px;
}


/* 段違い着色 */
#left .contents table tr.type01 {
  background-color: #ffffe1;
}
#left .contents table tr.type02 {
  background-color: #ddffdf;
}
/* カレンダー */
#left .contents table tr.day01 {
  background-color:#FFE6FF;
}
#left .contents table tr.day02,
#left .contents table tr.day03,
#left .contents table tr.day04,
#left .contents table tr.day05,
#left .contents table tr.day06, {
  background-color:#F6F6F6;
}
#left .contents table tr.day07 {
  background-color:#DFEAFF;
}

/* 等幅段違い着色（各セル用） */
#left .contents table.td2 tr td {
  width: 50%; background-color: #ffffe1;
}
#left .contents table.td3 tr td {
  width: 33%; background-color: #ffffe1;
}
#left .contents table.td4 tr td {
  width: 25%; background-color: #ffffe1;
}
#left .contents table.td5 tr td {
  width: 20%; background-color: #ffffe1;
}
#left .contents table.td6 tr td {
  width: 15%; background-color: #ffffe1;
}
#left .contents table.td6 tr th {
  width: 15%;
}
#left .contents table.matrix {
  width: 480px;
}
#left .contents table.matrix td {
  text-align: center;
}

#left .contents table tr.oc td {
  background-color: #ddffdf;
}
#left .contents table tr td.name {
  padding-left: 5px; color: #666; font-weight: bold; text-align: center; white-space: nowrap;
}
#left .contents table tr td.w120 {
  width: 120px;
}


#left .contents table tr.red th {
  background-color: #FB9C88
}
#left .contents table tr.blue th {
  background-color: #8FCBFC
}
#left .contents table tr.pink th {
  background-color: #F5BEF4;
}
#left .contents table tr.yellow th {
  background-color: #F5E992
}
#left .contents table tr.orange th {
  background-color: #FBBA6A
}
#left .contents table tr.kimidori th {
  background-color: #CDF178
}
#left .contents table tr.mizuiro th {
  background-color: #C1F4FD;
}
#left .contents table tr.purple th {
  background-color: #D3AFF1;
}
#left .contents table tr.brown th {
  background-color: #B38988;
}
#left .contents table tr.black th {
  background-color: #666666;
}
#left .contents table tr.white th {
  background-color: #CCCCCC;
}


/* カレンダー table */
#left .contents table.month th {
  background-color: #CCCCCC; color: #666666; width: 14%;
}
#left .contents table.month .red {
  background-color: #FFC8C8; color: #666666;
}
#left .contents table.month .blue {
  background-color: #CFD6FE; color: #666666;
}
#left .contents table.month td {
  height: 80px; vertical-align: top;
}

/* 魚・誕生日 table */
#left .contents table.small td {
  font-size: 12px; padding: 1px;
}
#left .contents table.small td.name {
  width: 100px; font-size: 10px;
}





/* カレンダー LI横並び */
#left .contents ul.inline {
  padding: 0; margin: 0;
  padding-bottom: 5px;
}
#left .contents ul.inline li {
  margin-bottom: 5px; font-weight: normal;
  display: inline; padding-left: 5px; padding-right: 7px; list-style-type: none;
}
#left .contents ul.month {
  padding: 15px 0; font-size: 16px;
}
#left .contents ul.bottom {
  margin-bottom: 25px;
}

#left .contents ul.list {
  margin-bottom: 15px;
}
#left .contents ul.list li {
  line-height: 1.2em;
}

/* ページ下部ボタン */
#left ul#f_gnavi {
  width: 360px; height: 35px; margin: 20px 0; margin-left: auto; margin-right: auto;
}
#left ul#f_gnavi li {
  width: 100px; height: 35px; margin: 0 10px;
  display: block; float: left;
}
#left ul#f_gnavi li.n3ds {
  background-image: url(../../images/btn_f_3ds.gif); background-repeat: no-repeat; background-position: left;
}
#left ul#f_gnavi li.wii {
  background-image: url(../../images/btn_f_wii.gif); background-repeat: no-repeat; background-position: left;
}
#left ul#f_gnavi li.nds {
  background-image: url(../../images/btn_f_nds.gif); background-repeat: no-repeat; background-position: left;
}
#left ul#f_gnavi li a {
  width: 100px; height: 35px; 
  font-size: 1px; text-indent: -9999px; display: block; text-decoration: none; overflow: hidden;
}


@media screen and (max-width: 500px){
  #left .contents table.matrix {
    width: 100%;
  }

  #left .contents table tr td.name {
    padding: 0; white-space: normal;
  }
  #left .contents table tr td.w120 {
    width: auto;
  }

  #left ul#f_gnavi,
  #left ul#f_gnavi li,
  #left ul#f_gnavi li a {
    display: none;
    width: 100%; height: 30px; line-height: auto; margin: 0;
  }
}



/* QRコード */
#left .qrcode {
  float: right;
}

/* youtube */
#left .youtube {
  width: auto; margin-bottom: 30px;
}

/* マイデザイン */
.md_sample {
 
}
.md_sample img {
  width: 90px; height: 90px; margin-right: 10px; margin-bottom: 10px; float: left;
}

.md_gallery,
.capture {
  float: left; margin-right: 5px; width: auto; height: auto;
}
.capture img {
  width: 140px; height: 140px;
}
.capture .tagline {
  width: 140px; height: 40px;
}
.capture .tagline p {
  line-height: 1.2em; padding: 0;
}

.small-pict .md_gallery,
.small-pict .capture {
  float: left; margin-right: 5px;
}
.small-pict .capture img {
  width: 100px; height: 100px;
}
.small-pict .capture .tagline {
  width: 100px; height: 50px;
}
.small-pict .capture .tagline P {
  width: auto; font-size: 10px;
}

/* リンク */
#link.contents strong {
  clear: both;
}
#link.contents li {
  display: block; float: left; width: 350px;
}

#left .ad-space {
  margin-bottom: 10px; margin-left: 7px; clear: both;
}

@media screen and (max-width: 500px){
  .md_gallery,
  .capture {
    width: 100%; height: auto;
  }
  .md_gallery img {
    width: 100%; height: auto;
  }
  .md_gallery .tagline {
    width: 100%; height: auto;
  }
  .md_gallery .tagline p {
    line-height: 1.2em; height: auto; padding: 0;
  }

  div.small-pict .md_gallery,
  div.small-pict .capture {
    width: 100%; margin-right: 5px; width: auto; height: auto;
  }

  #left .ad-space {
    width: 100vw; margin: 0; margin-left: -10px; padding: 10px 0;
  }
}


/* --------------------------------------------------------
  main right
--------------------------------------------------------- */

#right {
  width: 250px; padding: 20px 20px 20px 0;  float: right;
}
#right h3 {
  width: 215px; height: 28px; padding-top: 12px; padding-left: 35px; margin-top: 20px; margin-bottom: 5px; color: #666; font-size: 14px; font-weight: bold;
  background-image: url(../../images/bar_short.gif); background-repeat: no-repeat; background-position: left; clear: both;
}
#right p {
  width: 250px; clear: both; line-height: 1.2em; margin-bottom: 10px;
}

#right .ad-space {
  width: 250px; clear: both; margin-bottom: 10px;
}
#right #searchbox {
  width: 250px; height: auto;
}
#right #searchbox .form {
  width: 158px;
}
#right #searchbox .button {
  width: 80px;
}

#right ul {
  width: 250px; clear: both;
}
#right ul li {
  font-size: 14px; line-height: 1.4em; margin: 3px 0;
}
#right ul li a {
  text-decoration:none;
}
#right ul li a:hover {
  background-color: #FFFF9C;
}
#right ul li.selected a {
  color: #333; font-weight: bold; text-decoration:none;
}
#right ul li.l {
  float: left; padding-bottom: 10px; margin-right: 5px;
}
#right ul li.r {
  float: left; padding-bottom: 10px; margin-left: 5px;
}

#right iframe.goods {
   width: 250px; height: 800px;
   margin: 0px; border: 0px; overflow: hidden;
}
#right iframe.rectangle {
   width: 250px; height: 290px;
   margin: 0px; border: 0px; overflow: hidden;
}

@media screen and (max-width: 500px){
  #right {
    width: 100%; margin: 0; padding: 0 10px; font-size: 100%; !important; float: none;
  }
  #right h3 {
    width: auto; height: auto; margin: 10px 0; padding: 5px; font-size: 110%;
    color: #fff; background: #ff9900; line-height: 1.2em; font-weight: normal;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
  }
  #right p {
    width: 100%; line-height: 1.2em; margin: 0; padding: 0;
  }
  #right .ad-space {
    width: 100vw; margin: 0; margin-left: -10px; padding: 10px 0;
  }
  #right #searchbox {
    width: 100%; margin: 0; padding: 0;
  }
  #right #searchbox .form {
    margin: 0; padding: 0;
  }
  #right #searchbox .button {
    margin: 0; padding: 0;
  }
  #right #searchbox,
  #right #searchbox .form,
  #right #searchbox .button,
  #right #searchbox input {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
  }

  #right ul {
    width: 100%;
  }
  #right iframe.goods {
     width: 100%; height: 1010px;
  }
  #right iframe.rectangle {
     width: 100%; height: 290px;
  }
}


/* --------------------------------------------------------
  footer
--------------------------------------------------------- */

#footer {
  height: 30px; color: #FFF; padding-top: 20px;
  background-image: url(../../images/bg_footer.gif); background-repeat: no-repeat; background-position: top;
}
#footer address {
   text-align: center; clear: both;
}
#footer #pageup {
  position: fixed; top:60%; right:0;
}
#footer #pageup a {
  width: 25px; height: 80px; overflow:hidden; display: block;
  background-image: url(../../images/btn_pageup.gif); text-indent: -9999px; text-decoration: none;
  background-repeat: no-repeat; background-position: center;
}
#footer #pagedown {
  position: fixed; top: 80%; right: 0;
}
#footer #pagedown a {
  width: 25px; height: 80px; overflow: hidden; display: block;
  background-image: url(../../images/btn_pagedown.gif); text-indent: -9999px; text-decoration: none;
  background-repeat: no-repeat; background-position: center;
}


@media screen and (max-width: 500px){
  #footer {
    width: auto; height: auto; margin: 10px 0; padding: 5px; font-size: 80%;
    line-height: 1.2em; font-weight: normal; background-image: none; background-color: #54b208;
  }
  #footer #pageup a,
  #footer #pagedown a {
    background-size: contain;  display: block;
  }

  #footer #pagedown {
   position: static; display: block;
  }
  #footer #pagedown a {
   position: fixed; left: 0; bottom: 0; text-decoration: none;
   width: 100%; height: 20px; padding: 10px;
   text-align: center; color: #fff; font-size: 140%;
   background-image: none;
   background-color: #a7c443;
   filter:alpha(opacity=85); -moz-opacity:0.85; -khtml-opacity: 0.85; opacity:0.85;
   overflow: none; text-indent: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
  }
}

/* --------------------------------------------------------
  画像角丸
--------------------------------------------------------- */

.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------
  master mainte (regist.cgi)
--------------------------------------------------------- */

#ms-mainte {
  margin: 20px;
}
#ms-mainte input[type=checkbox] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}