@charset "UTF-8";
#LastUpdate {
  font-size: 18px;
  color: #FFF;
  height: 40px;
  width: 400px;
  position: relative;
  top: 8px;
  left: 10px; }

article {
  margin-bottom: 55px; }
  article .thum {
    background-color: black;
    cursor: pointer;
    border: 4px ridge white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 10px 10px 10px rgba(5, 5, 5, 0.8);
    -webkit-box-shadow: 10px 10px 10px rgba(5, 5, 5, 0.8);
    border-radius: 15px;
    margin-bottom: 8px;
    transition: opacity 0.4s;
    position: relative;
    -moz-transition: opacity 0.4s;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s; }
    article .thum p {
      position: absolute;
      top: 0;
      left: 0;
      font-weight: bold;
      color: white;
      font-size: 20px; }
  article .new {
    border: 6px ridge red; }
  article .award {
    border: 6px ridge gold; }
  article .horizontal {
    width: 198px;
    height: 95px;
    padding: 0 20px; }
  article .vertical {
    width: 95px;
    height: 198px;
    padding: 20px 0; }

.photoData {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 11px;
  border: 6px groove #fff;
  border-collapse: collapse;
  /*border-radius:10px;*/ }
  .photoData tr th {
    width: 100px;
    text-align: left;
    font-weight: normal;
    border: solid 2px #000; }
  .photoData tr td {
    border: solid 2px #000; }
    .photoData tr td img {
      display: block;
      margin: auto; }

#glayLayer {
  display: none;
  /*マウスでサムネイル画像をクリックするまで非表示としておく*/
  position: fixed;
  /*ブラウザをスクロールしても暗幕が動かないように固定*/
  left: 0;
  top: 0;
  height: 100%;
  /*暗幕の縦横サイズをbodyタグ全体を覆うようにする。*/
  width: 100%;
  /*暗幕の縦横サイズをbodyタグ全体を覆うようにする。*/
  background: rgba(123, 174, 181, 0.7);
  /*暗幕を半透明の灰色で塗る*/
  cursor: pointer; }

/*暗幕の中央に配置する拡大写真の白い外枠の設定*/
#overLayer {
  display: none;
  /*マウスでクリックするまで非表示としておく*/
  position: relative;
  /*スマホ閲覧時に外枠をタップでスクロールさせるならabsolute/relative。ブラウザをスクロールしても外枠を固定するならfixed*/
  top: 30px;
  left: 50%;
  /*モーダルウィンドウの位置を、ブラウザの左右中央配置とする。*/
  z-index: 50;
  cursor: pointer; }

/*暗幕の中央に配置する更新履歴表の設定*/
#historyHeaderLayer {
  display: none;
  /*マウスでクリックするまで非表示としておく*/
  position: fixed;
  /*スマホ閲覧時に外枠をタップでスクロールさせるならabsolute。ブラウザをスクロールしても外枠を固定するならfixed*/
  width: 370px;
  height: 30px;
  cursor: pointer;
  top: 80px;
  left: 50%;
  /*モーダルウィンドウの位置を、ブラウザの左右中央配置とする。*/
  z-index: 50; }
  #historyHeaderLayer table {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    border-collapse: collapse; }
    #historyHeaderLayer table tr td {
      border: solid 2px #000;
      height: 30px; }
    #historyHeaderLayer table tr td:nth-of-type(1) {
      width: 80px; }
    #historyHeaderLayer table tr td:nth-of-type(2) {
      width: 290px; }

#historyLayer {
  display: none;
  /*マウスでクリックするまで非表示としておく*/
  position: fixed;
  /*スマホ閲覧時に外枠をタップでスクロールさせるならabsolute。ブラウザをスクロールしても外枠を固定するならfixed*/
  width: 370px;
  height: 270px;
  overflow: scroll;
  cursor: pointer;
  top: 110px;
  left: 50%;
  /*モーダルウィンドウの位置を、ブラウザの左右中央配置とする。*/
  z-index: 50; }
  #historyLayer table {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    border-collapse: collapse; }
    #historyLayer table tr td {
      border: solid 2px #000;
      height: 30px; }
      #historyLayer table tr td a {
        color: skyblue; }
      #historyLayer table tr td a:hover {
        font-weight: bold; }
    #historyLayer table tr td:nth-of-type(1) {
      width: 80px; }
    #historyLayer table tr td:nth-of-type(2) {
      width: 290px; }

/*iPhoneのブラウザ上で、画像を長押しして保存できる機能を無効にする*/
img {
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -webkit-touch-callout: none; }

/*モーダルウィンドウの左右進む・戻るボタン*/
#next, #prev {
  cursor: pointer;
  color: #444;
  font-size: 40px;
  -webkit-transform: scale(1, 3);
  -ms-transform: scale(1, 3);
  transform: scale(1, 3);
  position: absolute; }

#next:hover, #prev:hover {
  font-weight: bold;
  font-size: 46px;
  color: #666; }

@media (max-width: 700px) {
  .photoData tr th {
    width: 60px; }
  #LastUpdate {
    display: none; } }