@charset "utf-8";

body       { position:relative; background:#efefef url(../img/bg-body.jpg?2017-09);
  z-index:1; background:#e6e6e6\9; } /* IE8以下 */
#body-wrap { background:#efefef url(../img/bg-body.jpg?2017-09); margin:0 auto; position:relative;
  overflow:hidden; box-shadow:0 0 8px 1px #555; z-index:2; max-width:1020px; min-width:315px; }
  @media all and (min-width: 1050px){
    #body-wrap { border-left:solid 1px #999; border-right:solid 1px #999; }}

#move { position:absolute; bottom:15px; left:-100px; z-index:0; width:210px; height:150px; }
#move img { width:200px; height:150px; padding-left:10px; }
#kong       { background:url(../img/gorilla.png?2017-09) no-repeat -200px 0; }
#kong:hover { background:url(../img/gorilla.png?2017-09) no-repeat 0 0; }

/* ========== nav ========== */
nav { width:100%; background:#70b92c; border-bottom:solid 1px #59a216;
  position:absolute; top:0; left:0; z-index:20; box-shadow:0 1px 2px #fff; }

  /* ========== sub-nav ========== */
  #sub-nav        { width:100%; height:30px; background:#428b00; box-shadow:0 -3px 3px #417f09 inset; }
    #sub-nav ul   { float:right; margin:5px 120px 0 0; text-align:right; }
    #sub-nav li   { float:left; font-size:12px; border-right:solid 2px #417c0b; }
    #sub-nav li a { padding:0 13px; color:#fff; text-decoration:none; }
    #sub-nav li a:hover { text-decoration:underline; }
    #sub-nav li:first-child { border-left:solid 2px #417c0b; }
    #phone-top,#phone-menu { display:none; width:100px; height:30px; font-size:13px; text-decoration:none; }
    #toggle { display:none; }

  /* ========== head-nav ========== */
  #head-nav     { width:100%; height:110px; border-top:solid 1px #8dd44c; position:relative; }
    #logo-nav   { width:250px; position:absolute; top:7px; left:15px; z-index:50; }
    #logo-anime { width:240px; height:90px; }

    #sns-nav  { position:relative; width:355px; margin:10px 120px 0 0;
      background:url(../img/header-img.png?2017-09) no-repeat top right; float:right; }
    #snake1   { width:85px; height:15px; position:absolute;
      top:5px; right:130px; background:url(../img/header-img.png?2017-09) 0 -30px;}
    #snake2   { width:78px; height:15px; position:absolute;
      top:5px; right:53px; background:url(../img/header-img.png?2017-09) 0 -45px;}
    #sns-wrap { margin-top:30px; width:355px; height:30px; background:#428b00; position:relative;
      border-radius:5px; box-shadow:0 0 3px #417f09 inset; }
    #sns-wrap img { width:100px; height:20px; }
    #sns-fb   { background:#e8f6da; border-radius:4px; width:100px; height:20px; position:absolute; top:5px; left:13px; }
    #sns-tw   { background:#e8f6da; border-radius:4px; width:100px; height:20px; position:absolute; top:5px; left:127px; }
    #sns-bm   { background:#e8f6da; border-radius:4px; width:100px; height:20px; position:absolute; top:5px; right:13px; }
    #sns-fb a,
    #sns-tw a,
    #sns-bm a { display:block; width:100px; height:20px; }
    #sns-fb a { background:url(../img/footer-img.png?2017-09) no-repeat 0px 0px; }
    #sns-tw a { background:url(../img/footer-img.png?2017-09) no-repeat 0px -30px; }
    #sns-bm a { background:url(../img/footer-img.png?2017-09) no-repeat 0px -60px; }
    #sns-fb a:hover,
    #sns-tw a:hover,
    #sns-bm a:hover { opacity:0.8; }

  /* ========== main-nav ========== */
  #main-nav { width:100%; height:70px; background:url(../img/header-img.png?2017-09) repeat-x 0 -210px;
    overflow:hidden; font-size:14px; position:relative; }
    #main-nav a    { color:#fff; text-decoration:none; }
    #main-nav ul   { float:right; position:relative; left:-50%; text-align:center; }
    #main-nav li   { float:left; position:relative; left:50%; margin:0 10px; }
    #main-nav li a { width:100px; height:70px; padding-top:46px; display:block;
      background-image:url(../img/header-img.png?2017-09); }

    #nav-home a   { background-position:center -280px; }
    #nav-guide a  { background-position:center -280px; }
    #nav-rule a   { background-position:center -280px; }
    #nav-print a  { background-position:center -280px; }
    #nav-column a { background-position:center -280px; }
    #nav-member a { background-position:center -280px; }
    #nav-xxxxxx a { background-position:center -280px; }
    #nav-home a:hover   { background-position:center -350px; }
    #nav-guide a:hover  { background-position:center -420px; }
    #nav-rule a:hover   { background-position:center -490px; }
    #nav-print a:hover  { background-position:center -560px; }
    #nav-column a:hover { background-position:center -630px; }
    #nav-member a:hover { background-position:center -700px; }
    #nav-xxxxxx a:hover { background-position:center -770px; }

  /* ========== pan-nav ========== */
  #pan-nav        { margin:20px;  font-size:13px; border-radius:8px 0 0 8px; overflow:hidden;
    background:#fafafa url(../img/header-img.png?2017-09) no-repeat right -1156px; }
    #pan-nav ol   {  }
    #pan-nav li   { float:left; background:url(../img/icon-img.png?2017-09) no-repeat 0 -50px; }
    #pan-nav li a { display:block; padding:2px 0 2px 24px; }
    #pan-nav li a:hover      { color:#f00; }
    #pan-nav li:first-child  { background-position:-1px -25px; margin-left:6px; }
    #pan-nav li:last-child a { text-decoration:none; color:#443e35; text-shadow:1px 1px 2px #ccc; }

  /* ========== label-nav ========== */
  #label-nav { width:85px; height:150px; position:absolute; top:-30px; right:15px; z-index:40;
    background:url(../img/header-img.png?2017-09) 0 -60px; }
    #label-nav img { width:85px; height:150px; }

    /* ========== media-query ========== */
    @media all and (min-width: 601px) and (max-width: 770px){
      #sns-nav  { display:none; }

      #main-nav { font-size:13px; }
      #main-nav li a { width:80px; padding-top:46px; }
      #main-nav li   { margin:0 7px; }

      #pan-nav        { border-radius:8px;
        background:#fafafa url(../img/header-img.png?2017-09) no-repeat 0 100px; }}

    @media all and (max-width: 600px){
      #logo-nav   { position:static; margin:0 auto; }
      #logo-anime { margin-top:15px; }
      #sns-nav    { display:none; }
      #label-nav  { display:none; }

      #sub-nav    { height:35px; background:#111;
        box-shadow:0 3px 3px #000; position:fixed; z-index:70; }
      #sub-nav ul   { display:none; border-bottom:1px solid #999; float:none; height:auto; margin:0; padding-top:37px; }
      #sub-nav li   { float:none; text-align:center; font-size:16px; margin:0; padding:0; border-right:solid 0px #000; }
      #sub-nav li:first-child { border-left:solid 0px #000; }
      #sub-nav li a { color:#444; border-top:1px solid #999;
        padding:12px; width:100%; text-decoration:none; display:block;
        background:url(../img/header-img.png?2017-09) no-repeat right -1247px,
	      -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(221,221,221,1) 100%);
	      background:url(../img/header-img.png?2017-09) no-repeat right -1247px,
	      linear-gradient(to bottom, rgba(240,240,240,1) 0%,rgba(221,221,221,1) 100%); }
      #sub-nav li a:hover { color:#333; text-decoration:none;
        background:url(../img/header-img.png?2017-09) no-repeat right -1247px,
	      -webkit-linear-gradient(top, rgba(221,221,221,1) 0%,rgba(190,190,190,1) 100%);
	      background:url(../img/header-img.png?2017-09) no-repeat right -1247px,
	      linear-gradient(to bottom, rgba(221,221,221,1) 0%,rgba(190,190,190,1) 100%); }

      #phone-top, #phone-menu { display:block; color:#333; border:solid 1px #999; padding:3px; text-shadow:1px 1px 3px #fff;
	      background:-webkit-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(210,210,210,1) 100%);
	      background:linear-gradient(to bottom,  rgba(240,240,240,1) 0%,rgba(210,210,210,1) 100%); }
      #phone-top  { position:absolute; top:3px; left:10px; z-index:71; border-radius:4px 0 0 4px; }
      #phone-menu { position:absolute; top:3px; left:108px; z-index:72; border-radius:0 4px 4px 0; }
      #toggle     { width:30px; height:30px; display:block; position:fixed; top:3px; right:10px; border-radius:3px; border:solid 1px #999;
	      background:-webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(210,210,210,1) 100%);
	      background:linear-gradient(to bottom, rgba(240,240,240,1) 0%,rgba(210,210,210,1) 100%); }
      #toggle img { width:30px; height:30px; background: url(../img/icon-img.png?2017-09) no-repeat center 4px; }
      #head-nav  { margin-top:35px; height:110px; border-top:solid 0px #000; }

      #main-nav      { height:auto; background:none; }
      #main-nav ul   { float:none; position:static; margin:0 auto; }
      #main-nav li   { float:none; position:static; }
      #main-nav li a { 
        float:left; border:solid 3px #428b00; border-radius:9px; text-shadow:0 1px 1px #bbb; color:#444;
        background-color:#fafafa; background-image:url(../img/header-img.png?2017-09),url(../img/header-img.png?2017-09);
        background-repeat:no-repeat,no-repeat; }

      #pan-nav        { margin:20px 15px; border-radius:8px;
        background:#fafafa url(../img/header-img.png?2017-09) no-repeat 0 100px; }}

    @media all and (min-width: 511px) and (max-width: 600px){
      #main-nav      { font-size:14px; }
      #main-nav ul   { width:100%; text-align:left; }
      #main-nav li a { width:31%; height:48px; margin:5px 1.15%; padding:11px 0 0 33px; }

      #nav-home a   { background-position:-25px -850px,right -1200px; }
      #nav-guide a  { background-position:-25px -900px,right -1200px; }
      #nav-rule a   { background-position:-25px -950px,right -1200px; }
      #nav-print a  { background-position:-25px -1000px,right -1200px; }
      #nav-column a { background-position:-25px -1050px,right -1200px; }
      #nav-member a { background-position:-25px -1100px,right -1200px; }
      #nav-xxxxxx a { background-position:-25px -1150px,right -1200px; }

      #main-nav li a:hover{ background-color:#f0f0f0; }
      #nav-home a:hover   { background-position:-25px -850px,right -1200px; }
      #nav-guide a:hover  { background-position:-25px -900px,right -1200px; }
      #nav-rule a:hover   { background-position:-25px -950px,right -1200px; }
      #nav-print a:hover  { background-position:-25px -1000px,right -1200px; }
      #nav-column a:hover { background-position:-25px -1050px,right -1200px; }
      #nav-member a:hover { background-position:-25px -1100px,right -1200px; }
      #nav-xxxxxx a:hover { background-position:-25px -1150px,right -1200px; }}

    @media all and (max-width: 510px){
      #main-nav      { font-size:13px; }
      #main-nav ul   { width:100%; text-align:center; }
      #main-nav li a { width:31.3%; height:55px; margin:5px 1%; padding:27px 0 0 0; }

      #nav-home a   { background-position:center -855px,0 100px; }
      #nav-guide a  { background-position:center -905px,0 100px; }
      #nav-rule a   { background-position:center -955px,0 100px; }
      #nav-print a  { background-position:center -1005px,0 100px; }
      #nav-column a { background-position:center -1055px,0 100px; }
      #nav-member a { background-position:center -1105px,0 100px; }
      #nav-xxxxxx a { background-position:center -1155px,0 100px; }

      #main-nav li a:hover{ background-color:#f0f0f0; }
      #nav-home a:hover   { background-position:center -855px,0 100px; }
      #nav-guide a:hover  { background-position:center -905px,0 100px; }
      #nav-rule a:hover   { background-position:center -955px,0 100px; }
      #nav-print a:hover  { background-position:center -1005px,0 100px; }
      #nav-column a:hover { background-position:center -1055px,0 100px; }
      #nav-member a:hover { background-position:center -1105px,0 100px; }
      #nav-xxxxxx a:hover { background-position:center -1155px,0 100px; }}


/* ========== contents ========== */
#main-wrap { margin:300px 15px 0; overflow:hidden; border-radius:5px; position:relative; text-align:left;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#33d6d3d3,EndColorStr=#33d6d3d3);
  background-color: rgba(214, 211, 211, 0.2); }
#main-wrap { /zoom:1; }/* IE7以下 */
#main-wrap:after { display:block; clear:both; height:0.01px; content:""; }

  #topic-wrap { width:100%; float:right; margin-left:-275px; }
  #topic { margin:5px 5px 5px 275px; padding-bottom:10px; background:#fafafa;
    border-radius:2px; box-shadow:0 0 3px #cecece; border:solid 1px #dfdfdf\9; } /* IE8以下 */

    /* ========== media-query ========== */
    @media all and (min-width: 601px) and (max-width: 850px){
      #main-wrap  { margin:300px 15px 0; }
      #topic-wrap { margin:0; float:none; }
      #topic      { margin:5px 5px 0; }}

    @media all and (min-width: 511px) and (max-width: 600px){
      #main-wrap  { margin:355px 10px 0; }
      #topic-wrap { margin:0; float:none; }
      #topic      { margin:5px 5px 0; }}

    @media all and (min-width: 361px) and (max-width: 510px){
      #main-wrap  { margin:395px 5px 0; }
      #topic-wrap { margin:0; float:none; }
      #topic      { margin:5px 5px 0; }}

    @media all and (max-width: 360px){
      #main-wrap  { margin:395px 0px 0; }
      #topic-wrap { margin:0; float:none; }
      #topic      { margin:5px 0 0; }}

/* ========== menu ========== */
#menu { width:260px; margin:5px 0 5px 5px; float:left; }
aside { width:100%; border-radius:2px; overflow:hidden; box-shadow:0 0 3px #cecece;
  background:#fafafa; border:solid 1px #dfdfdf\9; } /* IE8以下 */

  aside h1,aside h2 { color:#36312a; height:70px; padding:8px 0 0; font-size:16px;
   text-align:center; background:#efeded url(../img/icon-img.png?2017-09) repeat-x 0 -90px; }
  aside h2 { clear:both; border-top:solid 1px #e3e3e3; }

  #menu span { margin:-33px 50px 10px; color:#fff; display:block;
    font-size:12px; text-align:center; box-shadow:0 0 5px #fff inset; border-radius:5px; }
    #menu span.top     { background:#55b200; }
    #menu span.unpitsu { background:#e74862; }
    #menu span.kokugo  { background:#6dc20c; }
    #menu span.sansuu  { background:#03b0f2; }
    #menu span.syakai  { background:#00a33d; }
    #menu span.rika    { background:#ff9900; }
    #menu span.poster  { background:#9c4d91; }
    #menu span.other   { background:#f927a7; }

  /* ========== aside ========== */
  aside ul   { font-size:14px; text-align:left; }
  aside li   { width:100%; border-top:solid 1px #e3e3e3; float:left; }
  aside li:first-child { border-top:solid 0px #000; }
  aside li a { display:block; padding:5px 0 5px 32px; }
  aside li a:hover { background-color:#e9e7e7; background-image:url(../img/icon-img.png?2017-09); background-repeat:no-repeat; }
  .text-anime li:first-child { padding:7px 0 7px 32px; background-color:#e6e3e6; }

  #search li:first-child  { background:#ddd9dc url(../img/icon-img.png?2017-09) no-repeat 5px -164px;
    color:#222; font-size:15px; border-top:solid 1px #d4cfd2; }
  .icon-youji a { background:url(../img/icon-img.png?2017-09) no-repeat 4px -245px; }
  .icon-1nen a  { background:url(../img/icon-img.png?2017-09) no-repeat 4px -285px; }
  .icon-2nen a  { background:url(../img/icon-img.png?2017-09) no-repeat 4px -325px; }
  .icon-3nen a  { background:url(../img/icon-img.png?2017-09) no-repeat 4px -365px; }
  .icon-4nen a  { background:url(../img/icon-img.png?2017-09) no-repeat 4px -405px; }
  .icon-5nen a  { background:url(../img/icon-img.png?2017-09) no-repeat 4px -445px; }
  .icon-6nen a  { background:url(../img/icon-img.png?2017-09) no-repeat 4px -485px; }

  #picture li:first-child { background:#ddd9dc url(../img/icon-img.png) no-repeat 5px -204px;
    color:#222; font-size:15px; }
  .icon-unpitsu a { background:url(../img/icon-img.png?2017-09) no-repeat 2px -525px; }
  .icon-kokugo a  { background:url(../img/icon-img.png?2017-09) no-repeat 2px -565px; }
  .icon-sansuu a  { background:url(../img/icon-img.png?2017-09) no-repeat 2px -605px; }
  .icon-syakai a  { background:url(../img/icon-img.png?2017-09) no-repeat 2px -645px; }
  .icon-rika a    { background:url(../img/icon-img.png?2017-09) no-repeat 2px -685px; }
  .icon-poster a  { background:url(../img/icon-img.png?2017-09) no-repeat 2px -725px; }
  .icon-other a   { background:url(../img/icon-img.png?2017-09) no-repeat 2px -765px; }

  .unpitsu li:first-child { background:#ddd9dc url(../img/icon-img.png?2017-09) no-repeat 5px -803px; font-size:15px; }
  .unpitsu li a           { background:url(../img/icon-img.png?2017-09) no-repeat 5px -1085px; }
  .kokugo li:first-child  { background:#ddd9dc url(../img/icon-img.png?2017-09) no-repeat 5px -844px; font-size:15px; }
  .kokugo li a            { background:url(../img/icon-img.png?2017-09) no-repeat 5px -1125px; }
  .sansuu li:first-child  { background:#ddd9dc url(../img/icon-img.png?2017-09) no-repeat 5px -883px; font-size:15px; }
  .sansuu li a            { background:url(../img/icon-img.png?2017-09) no-repeat 5px -1165px; }
  .syakai li:first-child  { background:#ddd9dc url(../img/icon-img.png?2017-09) no-repeat 5px -923px; font-size:15px; }
  .syakai li a            { background:url(../img/icon-img.png?2017-09) no-repeat 5px -1205px; }
  .rika li:first-child    { background:#ddd9dc url(../img/icon-img.png?2017-09) no-repeat 5px -964px; font-size:15px; }
  .rika li a              { background:url(../img/icon-img.png?2017-09) no-repeat 5px -1245px; }
  .poster li:first-child  { background:#ddd9dc url(../img/icon-img.png?2017-09) no-repeat 5px -1003px; font-size:15px; }
  .poster li a            { background:url(../img/icon-img.png?2017-09) no-repeat 5px -1285px; }
  .other li:first-child   { background:#ddd9dc url(../img/icon-img.png?2017-09) no-repeat 5px -1044px; font-size:15px; }
  .other li a             { background:url(../img/icon-img.png?2017-09) no-repeat 5px -1325px; }

  .ranking      { text-align:center; }
  .ranking li   { background:#fafafa; font-size:13px; }
  .ranking li a { display:block; padding:5px 30px; }
  .ranking li a:hover { background:#e9e7e7; }
  .ranking li:first-child { border-top:solid 1px #d4cfd2; }
  .ranking p    { padding:0 1px; text-align:center; }
  .ranking img  { border:1px solid #333; box-shadow: 0 7px 6px -5px #777; }
  .tate img { width:140px; height:200px; }
  .yoko img { width:200px; height:140px; }

  /* ========== fix-menu ========== */
  #fix-menu    { width:260px; font-size:13px; }
  #fix-menu h2 { color:#36312a; padding:3px 0; font-size:14px; text-align:center;
    background:url(../img/icon-img.png?2017-09) repeat-x 0 -1365px; border-top:solid 1px #e3e3e3; }
  #fix-menu ul { box-shadow:0 0 5px #d9d9d9; border-radius:0 0 2px 2px; overflow:hidden;
    border-left:solid 1px #e3e3e3\9; border-right:solid 1px #e3e3e3\9; border-bottom:solid 1px #e3e3e3\9; } /* IE8以下 */
  #fix-menu li { background:#fafafa; border-top:solid 1px #d4cfd2; display:block; }
  #fix-menu.fix-on  { position:fixed; top:0; }
  #fix-menu.fix-off { position:absolute; bottom:5px; _position:static; }/* IE6以下 */

    /* ========== media-query ========== */
    @media all and (min-width: 531px) and (max-width: 850px){
      #menu    { width:100%; margin:10px 0 5px; clear:both; float:none; }
      aside    { width:auto; margin:0 5px; }
      aside ul { float:left; width:100%; font-size:14px; }
      aside li { float:left; width:50%; border:solid 1px #e3e3e3; border-top:solid 0px #e3e3e3; }
      aside li:first-child { width:100%; padding:9px 0 9px 32px; }
      aside li a { padding:9px 0 9px 32px; }
      .none { display:none; }}

    @media all and (max-width: 850px) {
      #menu span { margin:-35px 20% 9px; font-size:13px; padding:2px; }

      #search li:first-child  { background-position:5px -164px; }
      #picture li:first-child { background-position:5px -204px; }
      .icon-youji a { background-position:4px -242px; }
      .icon-1nen a  { background-position:4px -282px; }
      .icon-2nen a  { background-position:4px -322px; }
      .icon-3nen a  { background-position:4px -362px; }
      .icon-4nen a  { background-position:4px -402px; }
      .icon-5nen a  { background-position:4px -442px; }
      .icon-6nen a  { background-position:4px -482px; }
      .icon-unpitsu a { background-position:2px -521px; }
      .icon-kokugo a  { background-position:2px -561px; }
      .icon-sansuu a  { background-position:2px -601px; }
      .icon-syakai a  { background-position:2px -641px; }
      .icon-rika a    { background-position:2px -682px; }
      .icon-poster a  { background-position:2px -720px; }
      .icon-other a   { background-position:2px -761px; }
      .unpitsu li a           { background-position:5px -1081px; }
      .unpitsu li:first-child { background-position:5px -803px; }
      .kokugo li a            { background-position:5px -1121px; }
      .kokugo li:first-child  { background-position:5px -844px; }
      .sansuu li a            { background-position:5px -1161px; }
      .sansuu li:first-child  { background-position:5px -884px; }
      .syakai li a            { background-position:5px -1201px; }
      .syakai li:first-child  { background-position:5px -924px; }
      .rika li a              { background-position:5px -1241px; }
      .rika li:first-child    { background-position:5px -964px; }
      .poster li a            { background-position:5px -1281px; }
      .poster li:first-child  { background-position:5px -1004px; }
      .other li a             { background-position:5px -1321px; }
      .other li:first-child   { background-position:5px -1044px; }
      .none { display:none; }}

    @media all and (max-width: 530px) {
      #menu    { width:100%; margin:10px 0 5px; clear:both; float:none; }
      aside ul { font-size:14px; }
      aside li:first-child { width:100%; padding:9px 0 9px 32px; }
      aside li a { padding:9px 0 9px 32px; }
      .none { display:none; }}

    @media all and (min-width: 361px) and (max-width: 530px){
      aside    { clear:both; width:auto; margin:0 5px; }}

    @media all and (max-width: 360px){
      aside    { clear:both; width:auto; margin:0; }}

/* ========== footer ========== */

footer { clear:both; font-size:14px; color:#f8f5ea; padding-top:60px; }
footer a:link, footer a:visited, footer a:active 
  { color:#f90; text-decoration:none; }
footer a:hover { color:#ebff33; }

  /* footer-top */
  #foot-top { width:100%; height:100px; border-bottom:solid 8px #6e9a00;
    background:url(../img/footer-top.png) repeat-x 0 -605px; position:relative; }
    #foot-top span { background-image:url(../img/footer-top.png?2017-09); background-repeat:no-repeat; width:100px; }
    #foot-top img { width:100px; height:75px;}

    span.car     { position:absolute; left:55%;  bottom:0px; background-position:0 -442px; z-index:9; }
    span.house   { position:absolute; left:20%;  bottom:3px; background-position:0 -528px; z-index:8; }
    span.tree1   { position:absolute; left:35%;  bottom:5px; background-position:0 -357px; z-index:7; }
    span.tree2   { position:absolute; left:78%;  bottom:5px; background-position:0 -354px; z-index:3; }
    span.rainbow { position:absolute; left: 1%;  top:0;      background-position:0 -205px; z-index:5; }
    span.grass1  { position:absolute; left: 5%;  bottom:5px; background-position:0 -270px; z-index:4; }
    span.grass2  { position:absolute; left:68%;  bottom:5px; background-position:0 -268px; z-index:6; }

    #page-top        { position:absolute; right:5px; bottom:-5px; width:90px; height:100px; z-index:10; }
    #page-top img    { width:90px; height:90px; }
    #page-top a      { background:url(../img/footer-top.png?2017-09) no-repeat left 0; display:block; }
    #page-top a:hover{ background:url(../img/footer-top.png?2017-09) no-repeat left -100px; }

  /* footer-nav */
  #foot-nav  { clear:both; width:100%; background:#756050; border-top:solid 2px #5e4d40; overflow:hidden; text-align:center; }
  #foot-wrap { margin:20px 5px; overflow:hidden; }
  #foot-wrap div { float:left; background:url(../img/bg-foot.png?2017-09); border-radius:5px; margin:0 1.3%; width:22.4%;
     margin:0 1.4%\9; width:22%\9; } /* IE8以下 */
    .foot-title    { display:block; margin:10px 13px 5px; text-align:center; font-weight:bold;
      border-top:solid 1px #fff; border-bottom:solid 1px #fff; font-size:15px; }
    #foot-wrap p { padding:3 15px 8px; }

    #foot-fb { width:160px; height:28px; margin:0 auto 7px; text-align:center; display:block; }
    #foot-fb a { width:160px; height:28px; display:block; background:url(../img/footer-img.png?2017-09) no-repeat 0 -384px; }
    #foot-fb a:hover { background:url(../img/footer-img.png?2017-09) no-repeat 0 -356px; }
    #foot-fb img { width:160px; height:28px; }
    #foot-tw { width:160px; height:28px; margin:7px auto 0; text-align:center; display:block; }
    #foot-tw a { width:160px; height:28px; display:block; background:url(../img/footer-img.png?2017-09) no-repeat 0 -328px; }
    #foot-tw a:hover { background:url(../img/footer-img.png?2017-09) no-repeat 0 -300px; }
    #foot-tw img { width:160px; height:28px; }
    #qr-code { width:75px; height:75px; margin:10px auto 20px; text-align:center; display:block;
      background:url(../img/footer-img.png?2017-09) no-repeat 0 -412px; }
    #qr-code img { width:75px; height:75px; }

    #ft-about { width:160px; height:67px; margin:7px auto 0; text-align:center; display:block;
      background:url(../img/footer-img.png?2017-09) no-repeat 0px -487px; }
    #ft-about img { width:160px; height:67px; }
    #ft-logo { width:75px; height:75px; margin:7px auto 0; text-align:center; display:block;
      background:url(../img/footer-img.png?2017-09) no-repeat -80px -412px; }
    #ft-logo img { width:75px; height:75px; }

    /* リンクユニット */
    #link-unit { width:738px; height:23px; margin:10px auto 0; padding:3px 5px 0; background:#5e4d40; border-radius:5px; }
    /* 楽天・アマゾン */
    #wrap-rakuten , #wrap-amazon { width:120px; height:60px; overflow:hidden; display:block; background:#fff; }
    #wrap-rakuten { margin:0 auto; position:relative; }
    #wrap-amazon  { margin:10px auto 0; position:relative; }
    .footer-afi { width:120px; height:60px; position:absolute; top:0; left:0; z-index:5; display:block; }
    .edu-afi   { width:120px; height:60px; overflow:hidden; display:block; background:#fff; margin:0 auto; position:relative; }
    .edu-text { display:block; text-align:center; background:#756050; margin:0 auto 13px; font-size:11px; width:120px; }

    #foot-bg { margin:7px 10px; background:#756050; border-radius:5px; text-align:center; display:block; }
    address  { margin:0 5px 10px; background:#987d68; border-radius:5px; text-align:center; display:block; }

  /* footer-bottom */
  #foot-bottom   { clear:both; width:100%; background:#5e4d40; border-bottom:solid 4px #40342b; }
  #foot-bottom p { color:#f8f5ea; font-size:13px; text-align:center; }
  small          { margin:0 auto; }

    /* ========== media-query ========== */
    @media all and (min-width: 601px) and (max-width: 790px){
      span.tree2   { background-position:100px 0; }
      span.grass2  { left:70%; }}

    @media all and (min-width: 480px) and (max-width: 600px){
      #page-top    { display:none; }
      span.car     { left:73%; }
      span.house   { left:30%; }
      span.tree1   { left:50%; }
      span.tree2   { background-position:100px 0; }
      span.grass2  { left:80%; }}

    @media all and (max-width: 479px) {
      #page-top    { display:none; }
      span.rainbow { left:4px; }
      span.grass1  { left:13%; }
      span.car     { left:73%; }
      span.house   { left:40%; }
      span.tree1   { background-position:100px 0; }
      span.tree2   { background-position:100px 0; }
      span.grass2  { background-position:100px 0; }}

    @media all and (min-width: 480px) and (max-width: 820px){
      footer    { padding-top:40px; }
      #foot-wrap     { margin:0 5px 20px; }
      #foot-wrap div { margin:20px 2% 0; width:46%; }
      #foot-bg       { margin:15px 10px 8px;}
      address        { margin:0 10px 10px;}}

    @media all and (max-width: 479px) {
      footer         { font-size:14px; padding-top:40px; }
      .foot-title    { font-size:16px; }
      #foot-wrap     { margin:0 0 20px; }
      #foot-wrap div { margin:20px 20px 0; width:auto; }}