/* BASE */
div.keitai_outer {
  background:url("./img/_pageback1.png");
  background-size: cover;
  padding: 12px;
  font-family: "ＭＳ ゴシック", "MS Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "sans-serif";
  font-size: 16px;
  color: #ffffff;
  text-shadow    : 
       1px  1px 0px #000000,
      -1px  1px 0px #000000,
       1px -1px 0px #000000,
      -1px -1px 0px #000000,
       1px  0px 0px #000000,
       0px  1px 0px #000000,
      -1px  0px 0px #000000,
       0px -1px 0px #000000;        /* 文字の影 */
}
/* BASE */
div.screen1{
  background-color: rgba(77,77,77,0.6);
}
/* BASE */
div.pagein > div.screen1 {
  margin: 4px 4px 0 2px;
  padding: 6px;
}
/* BASE */
div.pagein > div.screen1 > a > img {
  border-color: #8855ee;
  border-style: solid;
  border-width: 1px;
}

/* BASE */
div.page{
  float:left;
  background-color:#333333;
  background:url("./img/_pageback1.png");
  background-size: cover;

  font-family: "ＭＳ ゴシック", "MS Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "sans-serif";
  font-size: 14px;
  color: #ffffff;
  text-shadow    : 
       1px  1px 0px #000000,
      -1px  1px 0px #000000,
       1px -1px 0px #000000,
      -1px -1px 0px #000000,
       1px  0px 0px #000000,
       0px  1px 0px #000000,
      -1px  0px 0px #000000,
       0px -1px 0px #000000;        /* 文字の影 */

  width:536px;
  height:465px;
  margin:8px 8px;
  padding:0px;
  position: relative;

  filter:alpha(opacity=90);
  -moz-opacity: 0.9;
  opacity: 0.9;
}
/* BASE */
div.nodata{
  background:url("./img/_pageback0.png");
}
/* BASE */
div.pagein{
  width:500px;
  height:425px;
  margin:10px;
  padding:10px 8px;
  border:solid 1px rgba(255,255,255,0.3);
  word-wrap: break-word;
  line-break: strict;
}
/* BASE */
div.kgtext{
  padding:8px 0;
}
/* BASE */
div.title{
  background-image : url("./img/_titleback.png");
  font-size: 16px;
  width: 96%;
  height: 24px;
  line-height: 24px;
  color: #ffffff;
  margin: 8px 0 8px 2px;
  padding: 0 0 0 16px ;
}
/* BASE */
div.scanline{
  background:url("./img/_scanline.png");
  width:540px;
  height:1px;
  position: absolute;
  top:465px;

  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;

  z-index: 30;
}
/* BASE */
/* チラつき演出用 */
@keyframes shiny {
     0%  { opacity: 0.98; }
     2%  { opacity: 0.75; }
     3%  { opacity: 0.98; }
    95%  { opacity: 0.99; }
    100% { opacity: 0.98; }
}
/* BASE */
/* チラつき演出用 */
.shiny-page {
    animation: shiny 22.5s ease-in-out infinite;
}
/* BASE */
/* スキャンライン演出用 */
@keyframes scanline {
    0% {
        height: 1px;
        top: 465px;
    }
    4% {                    /* 1200ms / 約30s */
        height: 24px;
        top: 426px;         /* 450 - 24 */
    }
    45% {                   /* (1200+12000)ms / 30s */
        height: 24px;
        top: 0px;           /* 426 - 426 */
    }
    48.3% {                 /* +1000ms */
        height: 1px;
        top: 0px;
    }
    48.4% {
        height: 1px;
        top: 465px;         /* 瞬時にリセット */
    }
    100% {
        height: 1px;
        top: 465px;
    }
}
/* BASE */
/* スキャンライン演出用 */
.scanline {
    animation: scanline 30s linear infinite;
    will-change: height, top;        /* パフォーマンス向上 */
    /* 必要に応じて追加 */
    position: absolute;
    background: rgba(0, 255, 0, 0.6); /* スキャンラインの見た目例 */
    pointer-events: none;
}

/* BASE */
span.ktag {
    font-family: "ＭＳ ゴシック", "MS Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "sans-serif";
    font-size: 12px;
    color: #ffffff;
    text-shadow    : 
         1px  1px 0px #000000,
        -1px  1px 0px #000000,
         1px -1px 0px #000000,
        -1px -1px 0px #000000,
         1px  0px 0px #000000,
         0px  1px 0px #000000,
        -1px  0px 0px #000000,
         0px -1px 0px #000000;        /* 文字の影 */
    white-space: nowrap;
    padding: 2px;
    margin : 2px;
}
/* BASE */
span.ktag_c {
 background-color: #33dddd;
}
/* BASE */
span.ktag_y {
 background-color: #44ff99;
}
/* BASE */
span.ktag_g {
 background-color: #4433dd;
}
/* BASE */
span.ktag_m {
 background-color: #777777;
}
/* BASE */
span.ktag_rh {
 background-color: #ff33aa;
}
/* BASE */
span.ktag_s {
 background-color: #ee7722;
}
/* BASE */
span.ktag_o {
 background-color: #ee7799;
}
/* BASE */
span.ktag_r {
 background-color: #229988;
}
/* BASE */
span.ktag_w {
 background-color: #eeeeee;
}
/* BASE */
span.ktag_read_the_rest {
 color: #ffbbbb;
 background-color: #aa3333;
}
/* BASE */
span.ktag_ln {
 color: #ffffff;
 background-color: #333300;
}
/* BASE */
span.ktag_ln > a {
 color: #ffff00;
}

/* BASE */
div.kgsearch_total {
 background-color: rgba(200,200,200,0.3);
 border-color: #777777;
 background:url("./img/_serach_header.png");
 background-size: cover;
 border-style: solid;
 border: 1px;
 width: 100%;
}

/* BASE */
div.kgsearch_elem {
 float: left;
 margin: 4px 8px;
}

/* BASE */
input.kgsearch_elem_name {
 width: 100px;
}

/* BASE */
input.kgsearch_elem_year {
 width: 35px;
}

/* BASE */
input.kgsearch_elem_maker {
 width: 100px;
}

/* BASE */
input.kgsearch_button{
 width: 148px;
 height: 43px;
 background-image: url("./img/_search.png");
 background-size: auto;
 background-repeat: no-repeat;
}

/* MP用 */
@media screen and (max-width:1100px){

 /* MP */
 div.keitai_outer {
   width: 97%;
   padding: 4px;
 }
 /* MP */
 div.keitai_inner {
   width: 99%;
 }
 /* MP */
 div.page{
   width:98%;
   height:auto;
   margin:0;
 }
 /* MP */
 div.pagein{
   width:97%;
   height:auto;
   margin:0;
 }
 /* MP */
 div.scanline{
   width:100%;
 }

 /* MP */
 div.title{
  width: 95%;
 }

 /* MP */
 span.ktag {
  white-space: wrap;
 }

 /* MP */
 div.pagein > div.screen1 {
  width: 96%;
 }
 /* MP */
 div.pagein > div.screen1 > a > img {
  width: 95%;
 }
}
/* /MP用 */


/* PC用 */
@media screen and (min-width:1100px){
 /* PC */
 div.keitai_outer {
  width: 1081px;
  border:solid 0px rgba(255,255,255,0.3);
  word-wrap: break-word;
  line-break: strict;
 }
 /* PC */
 div.keitai_inner{
  margin:8px;
  padding:8px;
  border:solid 1px rgba(255,255,255,0.3);
 }
 /* PC */
 img.keitailist {
  width: 240px;
  height: 240px;
  object-fit: contain;
 }
}
/* /PC用 */