/*@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);


@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css); */

/*背景に画像を適応などしたいとき、コメントとって使える。 */

/* div#containers{
background:url(//www.melonbooks.co.jp/special/b/0/fair_shoseki/20170424_sakura-quest/images/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:  0% -10%;
height: 100%;
margin: 0;
-webkit-text-size-adjust: 100%;
}

div#containers div#container {
background: rgba(255, 255, 255, 0.48);

} */



body {
    font-family: '小塚ゴシック Pro L','Kozuka Gothic Pro Light',sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0px auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    top: 0px;
    z-index: -50;
    -webkit-text-size-adjust: 100%;
/*background-image: url(../images/bg.png);*/
    background:linear-gradient(180deg, rgba(7, 145, 192,1) 4.375%,rgba(99, 196, 238,1) 89.2849099099099%);
background-attachment: fixed;
background-size:cover;
    background-repeat: no-repeat;
overflow-x: hidden;
}

.wrapper {
    margin: 0 auto;
    width: 1070px;
    background-color: #ffffff;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 4, 0.3);
    position: relative;
    top: 0px;
}

#main {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    height: auto;
    width: 100%;
    position: relative;
    padding-top: 200px;
    margin-top: -200px;
}

#main iframe{
display: block;
}



.header{
    width: 100%;
    height: 700px;
     background-image:url(../images/main.jpg);
    position: relative;
    top: 0px;
}
h1 {
    margin: 0px;
    padding: 0px;
    display: inline;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.siritai img{
position:relative;
    top: 585px;
    left: 880px;
}
/*ナビ*/

.nav {
    display: table;
    width: 100%;
    height: 65px;
    background-color: #0A52A6;
}

.nav ul {
    height: 65px;
    width: 100%;
    list-style: none;
    text-align: center;
    vertical-align:middle;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
    margin: auto;
    padding: 0;
}

.nav ul li {
    text-decoration: none;
    display: table-cell;
    table-layout: fixed;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding:0px;
}

.nav ul li img,
.siritai img{
  -webkit-transition:0.2s ease-in-out;
  -moz-transition:0.2s ease-in-out;
  -ms-transition:0.2s ease-in-out;
  -o-transition:0.2s ease-in-out;
  transition:0.2s ease-in-out;
}

#navi ul li a img:hover{
    background-color:#E50012;
    
}


/*.nav ul li img:hover,
.siritai img:hover{
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: “alpha( opacity=70)”;
}*/
.nav ul li img:hover{
animation-name: opa;
    animation-duration: 0.2s;
    animation-timing-function: ease;
}

@keyframes opa{
    0%{
    opacity: 0;
    }
    
    50%{
    opacity: 0;
    }
    
    100%{
    opacity: 1;
    }
}
.nav ul li a {
  text-decoration: none;
}

.nav ul li p {
  font-size: 45px;
  color:rgb(80, 80, 80);
font-family: 'ＭＳ Ｐ明朝','MS PMincho',sans-serif;
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
display: inline-block;
width:230px;
}

.nep{
  color:#fff !important;
}

.nep:hover{
  /*color:#999 !important;*/
  text-shadow:1px 1px 8px #f2f2f2,-1px -1px 8px #f2f2f2;
}

.fixed {
    position: -webkit-sticky;
    /* safari対応 */
    position: sticky;
    top: 0px;
    z-index: 1;
}



#content {
 padding-top: 60px;   /*ナビボタン押した時に、移動するナビバーからの高さ*/
    margin-top: -60px;　/*上の値をmarginマイナスで見かけ上変化無*/

}

/*ナビここまで*/

/*概要ページ*/

.about {
    position: absolute;
    z-index: -10;
    width:1070px;
    text-align: center;
}

.stamp_bottom{
  width:1070px;
  height:75px;
  box-sizing: border-box;
  background-color: #222;
  border-bottom:1px solid #bababa;
}

.stamp_font{
  color:#fff;
  font-size: 26px;
  text-align: center;
  line-height: 75px;
}

.stamp_font a{
  -webkit-transition:0.2s ease-in-out;
  -moz-transition:0.2s ease-in-out;
  -ms-transition:0.2s ease-in-out;
  -o-transition:0.2s ease-in-out;
  transition:0.2s ease-in-out;
  color: #6161fb;
}

.stamp_font a:hover{
  color: #e9405f
}


.about1{
  position: absolute;
  top:-25px;
  left:-25px;
}

.map {
    position: absolute;
    top: 390px;
    left: 43px;
    z-index: 2;
}


.about .twitter{
  display: inline-block;
  position: absolute;
  margin:0;
  bottom:175px;
  right:55px;
  text-align: right;
}

.sign .twitter{
  display: inline-block;
  position: absolute;
  margin:0;
  bottom:75px;
  right:55px;
  text-align: right;
}

.twitter img:hover {
   -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: “alpha( opacity=70)”;
}
/*概要ページここまで*/
.tokuten img {
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    transition: -webkit-transform 0.3s linear;
    -o-transition: transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.tokuten img:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 3;
}

/*10巻ここまで*/

/*フッター*/

#footer {
    width: 100%;
    height: 330px;
    background-image: url(../images/footer.jpg);
    background-repeat: no-repeat;
 display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0;
    box-sizing: border-box;
}

.footer_link{
display: flex;
    flex-direction: row;
}

.company{
display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 100%;
    padding: 30px 10px 20px 15px;
    box-sizing: border-box;
}

.ga{
display: flex;
    flex-direction: row;
    justify-content:flex-start;
    padding: 20px;
    position: relative;
    top: 100px;
    height: 182px;
}

.ga img{
padding: 10px 32px;
}

.ga a{

}


@media all and (-ms-high-contrast: none) {

    .company{
    width:182px;
        margin: 0 15px 0 0;
    }
    
    .melonbooks{
    margin: 200px 0 0 0;
    }
    
    .kdg{
    width: 443px;
    }
}

.copyright{
    width: 100%;
    font-size: 12px;
    text-align: left;
    color: #fff;
    padding: 0 0 20px 0;
}

.opacity:hover{
opacity: 0.7;
    transition-duration: ease-in;
    transition: 0.5s;
}

@-webkit-keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4% { -webkit-transform: matrix3d(1.13, 0, 0, 0, 0, 1.13, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.13, 0, 0, 0, 0, 1.13, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  7.91% { -webkit-transform: matrix3d(1.267, 0, 0, 0, 0, 1.267, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.267, 0, 0, 0, 0, 1.267, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.91% { -webkit-transform: matrix3d(1.357, 0, 0, 0, 0, 1.357, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.357, 0, 0, 0, 0, 1.357, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  15.82% { -webkit-transform: matrix3d(1.383, 0, 0, 0, 0, 1.383, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.383, 0, 0, 0, 0, 1.383, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20.42% { -webkit-transform: matrix3d(1.359, 0, 0, 0, 0, 1.359, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.359, 0, 0, 0, 0, 1.359, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.92% { -webkit-transform: matrix3d(1.318, 0, 0, 0, 0, 1.318, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.318, 0, 0, 0, 0, 1.318, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.53% { -webkit-transform: matrix3d(1.288, 0, 0, 0, 0, 1.288, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.288, 0, 0, 0, 0, 1.288, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  34.03% { -webkit-transform: matrix3d(1.279, 0, 0, 0, 0, 1.279, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.279, 0, 0, 0, 0, 1.279, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.14% { -webkit-transform: matrix3d(1.296, 0, 0, 0, 0, 1.296, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.296, 0, 0, 0, 0, 1.296, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% { -webkit-transform: matrix3d(1.305, 0, 0, 0, 0, 1.305, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.305, 0, 0, 0, 0, 1.305, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70.37% { -webkit-transform: matrix3d(1.299, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.299, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  88.59% { -webkit-transform: matrix3d(1.3, 0, 0, 0, 0, 1.3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.3, 0, 0, 0, 0, 1.3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1.3, 0, 0, 0, 0, 1.3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.3, 0, 0, 0, 0, 1.3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4% { -webkit-transform: matrix3d(1.13, 0, 0, 0, 0, 1.13, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.13, 0, 0, 0, 0, 1.13, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  7.91% { -webkit-transform: matrix3d(1.267, 0, 0, 0, 0, 1.267, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.267, 0, 0, 0, 0, 1.267, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.91% { -webkit-transform: matrix3d(1.357, 0, 0, 0, 0, 1.357, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.357, 0, 0, 0, 0, 1.357, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  15.82% { -webkit-transform: matrix3d(1.383, 0, 0, 0, 0, 1.383, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.383, 0, 0, 0, 0, 1.383, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20.42% { -webkit-transform: matrix3d(1.359, 0, 0, 0, 0, 1.359, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.359, 0, 0, 0, 0, 1.359, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.92% { -webkit-transform: matrix3d(1.318, 0, 0, 0, 0, 1.318, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.318, 0, 0, 0, 0, 1.318, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.53% { -webkit-transform: matrix3d(1.288, 0, 0, 0, 0, 1.288, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.288, 0, 0, 0, 0, 1.288, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  34.03% { -webkit-transform: matrix3d(1.279, 0, 0, 0, 0, 1.279, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.279, 0, 0, 0, 0, 1.279, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.14% { -webkit-transform: matrix3d(1.296, 0, 0, 0, 0, 1.296, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.296, 0, 0, 0, 0, 1.296, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% { -webkit-transform: matrix3d(1.305, 0, 0, 0, 0, 1.305, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.305, 0, 0, 0, 0, 1.305, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70.37% { -webkit-transform: matrix3d(1.299, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.299, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  88.59% { -webkit-transform: matrix3d(1.3, 0, 0, 0, 0, 1.3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.3, 0, 0, 0, 0, 1.3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1.3, 0, 0, 0, 0, 1.3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.3, 0, 0, 0, 0, 1.3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

.melon{
   position: relative;
    top: 215px;
    left: 30px;
    height: 83px;
}

.melon a{

}
.melon img:hover, .official img:hover{
  opacity: 0.8;
}

/*フッターここまで*/

/*トップボタン*/

.topBtn {
    position: fixed;
    bottom: 20px;
    right: 30px;
    display: block;
    background-color: #0068B6;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 19px;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 22px;
    border-radius: 40px;
    padding-top: 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.topBtn:before {
    content: '\25B2';
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 20px;
    height: 0;
}

.topBtn:hover {
    opacity: 0.7;
}

/*トップボタンここまで*/

.moral-wrap img{
width: 80%;
}
.modal-wrap.moreknow{
position:absolute;
    top:2%;
    left:1%;
    width: 1500px;
    align-self: flex-start;
    padding: 40px 50px;
    margin:0px;
}

@media screen and (max-width:1070px){
    
    body,#wrapper{
    width: 100%;
    }
}