@charset "UTF-8";

body {
   font-family: 'Times New Roman','メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
   background-color: #aaa;
}
#top {
   background-image: url(../images/back_01.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}
#illust,#contact {
   background-image: url(../images/back_02_03.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}
article p a img {
   position: fixed;
   top: 16%;
   left: 52%;
   width: 21%;
}
article p a img:hover {
   opacity: 0.7;
}
/*-----------header------------*/
#wrapper_illust {
   background-image: url(../images/back_02_cut.png);
   background-repeat: no-repeat;
   background-size: cover; 
   background-position: bottom center;

   width: 100%;
   padding-bottom: 70px;
   position: fixed;
   top: 0;
   left: 0%;
   z-index: 3;
}
#wrapper_contact {
   background-image: url(../images/back_03_cut.png);
   background-repeat: no-repeat;
   background-size: cover; 
   background-position: bottom center;

   width: 100%;
   padding-bottom: 70px;
   position: fixed;
   top: 0;
   left: 0%;
   z-index: 3;
}
header {
   padding-top: 50px;
   margin-left: 5%;
   margin-bottom: 30px;/*--#top headerとarticleの間---*/
   width: 38%;
   text-align: center;
   z-index: 5;
}
#illust header,#contact header {
   padding-top: 5px;
   width: 44%;
   margin: 0 auto;
}
#rogo img {
   vertical-align: bottom;
}
#rogo a:hover {
   opacity: 0.7;
}
#rogo h1 {
   margin: 5px 0 15px;
   font-size: 32px;
   font-weight: bold;
   color: #aa8300;
   text-shadow: 0 0 20px #ffff65;
}
#rogo a {
   text-decoration: none;
}
header ul {
   display: flex;
   justify-content: space-around;
   list-style-type: none;
}
header ul li a {
   padding: 4px 10px;
   border-radius: 50%;
   border: 1px solid #000;
   color: #000;
   font-size: 14px;
   font-weight: bold;
   text-decoration: none;
   transition: all 0.5s ease;
}
header ul li a:hover {
   padding: 6px 12px;
   box-shadow: 0 0 20px #f7bf05;
}
.active {
   padding: 6px 12px;
   box-shadow: 0 0 20px #f7bf05;
}
#genre ol {
    margin-top: 15px;
   display: flex;
   list-style-type: none;
}
#genre ol li {
   width: 25%;
   border-right: 1px solid #000;
   box-sizing: border-box;
}
#genre ol li:last-child {
   border-right: none;
}
#genre ol li a {
   display: block;
   width: 100%;
   text-decoration: none;
   color: #000;
}
#genre ol li a:hover {
   box-shadow: 0 0 20px #f7bf05;
}
/*-----------article-----------*/
#top article {
   margin-left: 8%;
   margin-bottom: 100px;
   width: 40%;
   z-index: 5;
}
#top article h1 {
   line-height: 1.8;
   font-size: 24px;
   font-weight: bolder;
}
#top article p {
   margin-bottom: 50px;
   line-height: 1.5;
   font-size: 0.9em;
}
#top section h2 {
   line-height: 2;
   font-size: 20px;
   font-weight: bold;
}
#top section ul li {
   margin-bottom: 10px;
   padding-left: 91px;
   text-indent: -91px;
   line-height: 1.3;
   font-size: 0.9em;
}
#top section ul li time {
   margin-right: 10px;
   padding: 2px 5px;
   border-radius: 10px;
   background-color: #000;
   color: #f6d28c;
}
/*-----------sozai-------------*/
#sozai {
   width: 90%;
   margin: 0 auto 0;
}
.margin {
   padding-top: 200px;
}
#sozai ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   list-style-type: none;
}
#sozai h2 {
   margin-left: 33px;
   margin-bottom: 8px;
   padding-left: 7px;
   border-left: 6px solid #f00;
   font-size: 1.5em;
   font-weight: bold;
}
#sozai li {
   margin: 0 10px 15px;
}
#sozai li p {
   margin-top: 5px;
   text-align: center;
}
/*------------form--------------*/
#formWrapper {
   width: 60%;
   margin: 0 auto;
   padding-top: 180px;
}
#formWrapper h2 {
   font-size: 20px;
   font-weight: bold;
}
#formWrapper label {
   display: block;
    margin-bottom: 10px;
}
#formWrapper input {
    margin-bottom: 30px;
    width: 300px;
}
#formWrapper .radio-b {
    width: 30px;
    margin-bottom: 18px;
}
textarea {
    display: block;
   width: 450px;
   height: 180px;
}
#thxMessage {
    padding-top: 200px;
    text-align: center;
}
#formFoot {
    margin: 50px auto;
}
/*------------footer------------*/
footer {
   margin-bottom: 20px;
   margin-left: 10%;
   padding: 5px 0;
   border-top: 1px solid #aa8300;
   border-bottom: 1px solid #aa8300;
   width: 300px;
   text-align: center;
}
#sozai footer,#wrap_form footer {
   margin: 0 auto;
}
/*-------------モーダルウインドウ---------------*/
#newDiv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0,0,0,0.8);
  z-index: 10;
  cursor: pointer;
  display: none;
}
#mContents {
  position: fixed;
  display: none;
  z-index: 15;
}
#big-pic {
  border-radius: 20px;
  border: 15px solid #555;
   vertical-align: bottom;
}
#winClose {
  position: fixed;
  cursor: pointer;
}
#proviso {
   margin: 0 auto;
   padding-bottom: 3px;
   text-align: center;
   width: 320px;
   border-radius: 0 0 10px 10px;
   background-color: #555;
   color: #fff;
   font-size: 14px;
}

/*-------------860px以下のとき-------------*/
@media (max-width: 860px) {
   header {
      margin: 0 auto 10px;
      width: 360px!important;
   }
    #genre ol {
        margin-top: 30px;
    }
   #top article {
      margin-left: none;
      width: 90%;
      margin: 0 auto 100px;
   }
    #top article p#anime {
        margin-bottom: 0;
    }
   #top article p a img {
      position: static;
      margin-left: 53%;
      width: 130px;
   }
    #sozai {
        width: 100%;
    }
    #sozai li img {
        width: 150px;
    }
    textarea {
       width: 250px;
       height: 150px;
    }
      #proviso {
      padding-top: 5px;
      background-color: rgb(0,0,0,0);
   }
   footer {
      margin: 0 auto 20px;
   }
    #formWrapper {
        width: 95%;
    }
}
/*-------------------------------------*/
@media(max-width: 330px) {
    header {
        margin-left: 0 auto;
        width: 320px!important;
    }
    header ul {
        display: block;
    }
    header ul li {
        margin: 30px 0;
    }
}