﻿@charset "utf-8";

* { margin:0; padding:0; box-sizing:border-box; }
body{ font:14px "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; line-height:2; -webkit-text-size-adjust:100%; }
h1 , h2 , h3 , h4 , h5 , h6 , address{ font-style:normal; font-weight:normal; font-size:100%; }
ul{ list-style-type:none; }
img{ border:0; vertical-align:bottom; }
a{ text-decoration:none; }

body
{
  overflow:hidden;
/*  background-image:url('./images/index/rbg_28.jpg');*/
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-color:#464646;
}
div.contents
{
  position:fixed;
  width:100%;
  height:100%;
}
div.contents img.logo
{
  position:absolute;
  top:33px;
  left:39px;
}
div.contents img.red-title
{
  position:absolute;
  left:0;
  bottom:0;
}
div.contents ul.thumbnail
{
  position:absolute;
  left:90px;
  bottom:0;
  width:calc(100% - 90px - 290px); width:-webkit-calc(100% - 90px - 290px);
  height:70px;
  background:rgba(0,0,0,0.8);

  display:-webkit-box; display:-webkit-flex; display:flex;  /* flex */
  -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; /* flex.横並び */

  overflow:hidden;

  padding-top:16px;
  padding-left:6px;
}
div.contents ul.thumbnail li
{
  margin-left:10px;
  cursor:pointer;
}

div.contents ul.thumbnail li { display:block; }
@media only screen and (max-width:  434px){ div.contents ul.thumbnail li:nth-child(n+ 1){ display:none; } }
@media only screen and (max-width:  482px){ div.contents ul.thumbnail li:nth-child(n+ 2){ display:none; } }
@media only screen and (max-width:  530px){ div.contents ul.thumbnail li:nth-child(n+ 3){ display:none; } }
@media only screen and (max-width:  578px){ div.contents ul.thumbnail li:nth-child(n+ 4){ display:none; } }
@media only screen and (max-width:  626px){ div.contents ul.thumbnail li:nth-child(n+ 5){ display:none; } }
@media only screen and (max-width:  674px){ div.contents ul.thumbnail li:nth-child(n+ 6){ display:none; } }
@media only screen and (max-width:  722px){ div.contents ul.thumbnail li:nth-child(n+ 7){ display:none; } }
@media only screen and (max-width:  770px){ div.contents ul.thumbnail li:nth-child(n+ 8){ display:none; } }
@media only screen and (max-width:  818px){ div.contents ul.thumbnail li:nth-child(n+ 9){ display:none; } }
@media only screen and (max-width:  866px){ div.contents ul.thumbnail li:nth-child(n+10){ display:none; } }
@media only screen and (max-width:  914px){ div.contents ul.thumbnail li:nth-child(n+11){ display:none; } }
@media only screen and (max-width:  962px){ div.contents ul.thumbnail li:nth-child(n+12){ display:none; } }
@media only screen and (max-width: 1010px){ div.contents ul.thumbnail li:nth-child(n+13){ display:none; } }
@media only screen and (max-width: 1058px){ div.contents ul.thumbnail li:nth-child(n+14){ display:none; } }
@media only screen and (max-width: 1106px){ div.contents ul.thumbnail li:nth-child(n+15){ display:none; } }
@media only screen and (max-width: 1154px){ div.contents ul.thumbnail li:nth-child(n+16){ display:none; } }
@media only screen and (max-width: 1202px){ div.contents ul.thumbnail li:nth-child(n+17){ display:none; } }
@media only screen and (max-width: 1250px){ div.contents ul.thumbnail li:nth-child(n+18){ display:none; } }
@media only screen and (max-width: 1298px){ div.contents ul.thumbnail li:nth-child(n+19){ display:none; } }
@media only screen and (max-width: 1346px){ div.contents ul.thumbnail li:nth-child(n+20){ display:none; } }
@media only screen and (max-width: 1394px){ div.contents ul.thumbnail li:nth-child(n+21){ display:none; } }
@media only screen and (max-width: 1442px){ div.contents ul.thumbnail li:nth-child(n+22){ display:none; } }
@media only screen and (max-width: 1490px){ div.contents ul.thumbnail li:nth-child(n+23){ display:none; } }
@media only screen and (max-width: 1538px){ div.contents ul.thumbnail li:nth-child(n+24){ display:none; } }
@media only screen and (max-width: 1586px){ div.contents ul.thumbnail li:nth-child(n+25){ display:none; } }
@media only screen and (max-width: 1634px){ div.contents ul.thumbnail li:nth-child(n+26){ display:none; } }
@media only screen and (max-width: 1682px){ div.contents ul.thumbnail li:nth-child(n+27){ display:none; } }
@media only screen and (max-width: 1730px){ div.contents ul.thumbnail li:nth-child(n+28){ display:none; } }
@media only screen and (max-width: 1778px){ div.contents ul.thumbnail li:nth-child(n+29){ display:none; } }
@media only screen and (max-width: 1826px){ div.contents ul.thumbnail li:nth-child(n+30){ display:none; } }
@media only screen and (max-width: 1874px){ div.contents ul.thumbnail li:nth-child(n+31){ display:none; } }
@media only screen and (max-width: 1922px){ div.contents ul.thumbnail li:nth-child(n+32){ display:none; } }
@media only screen and (max-width: 1970px){ div.contents ul.thumbnail li:nth-child(n+33){ display:none; } }
@media only screen and (max-width: 2018px){ div.contents ul.thumbnail li:nth-child(n+34){ display:none; } }
@media only screen and (max-width: 2066px){ div.contents ul.thumbnail li:nth-child(n+35){ display:none; } }
@media only screen and (max-width: 2114px){ div.contents ul.thumbnail li:nth-child(n+36){ display:none; } }
@media only screen and (max-width: 2162px){ div.contents ul.thumbnail li:nth-child(n+37){ display:none; } }
@media only screen and (max-width: 2210px){ div.contents ul.thumbnail li:nth-child(n+38){ display:none; } }
@media only screen and (max-width: 2258px){ div.contents ul.thumbnail li:nth-child(n+39){ display:none; } }
@media only screen and (max-width: 2306px){ div.contents ul.thumbnail li:nth-child(n+40){ display:none; } }
@media only screen and (max-width: 2354px){ div.contents ul.thumbnail li:nth-child(n+41){ display:none; } }
@media only screen and (max-width: 2402px){ div.contents ul.thumbnail li:nth-child(n+42){ display:none; } }

div.contents ul.buttons
{
  position:absolute;
  right:0;
  bottom:36px;
  width:288px;
  height:34px;
  background:rgba(0,0,0,0.8);

  display:-webkit-box; display:-webkit-flex; display:flex;  /* flex */
  -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; /* flex.横並び */
  padding-left:10px;
}
div.contents ul.buttons li
{
  width:90px;
  height:34px;
  text-align:center;
  vertical-align:middle;
}
div.contents ul.buttons li a
{
  display:block;
  width:100%;
  height:100%;
  font-size:10px;
  color:#ffffff;
}
div.contents img.copyright
{
  position:absolute;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.8);
}

div.contents div.menuS
{
  position:absolute;
  top:165px;
  left:40px;
}
div.contents div.menu
{
  position:absolute;
  top:165px;
  left:-500px;
  width:500px;
  height:430px;
  background:rgba(0,0,0,0.6);
  z-index:1;

  overflow:hidden;
  width:400px;
  left:-400px;
}
div.contents div.menu div.bar
{
  position:absolute;
  top:30px;
  left:0;
  width:500px;
  height:80px;
  background:#cccccc;
  z-index:2;
}
div.contents div.menu div.arrow
{
  background:url('../images/index/arrow.png');
  position:absolute;
  top:65px;
  left:52px;
  width:15px;
  height:10px;
  z-index:2;
}
div.contents div.menu ul
{
  position:absolute;
  top:30px;
  left:0;
  z-index:3;
}
