/*@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: "Noto Sans Japanese";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    z-index: 1;
    -webkit-text-size-adjust: 100%;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.95, #b8b8b8), color-stop(0.48, #ffffff), color-stop(0.00, #b8b8b8));
background: -webkit-linear-gradient(top, #b8b8b8 0%, #ffffff 48%, #b8b8b8 95%);
background: -moz-linear-gradient(top, #b8b8b8 0%, #ffffff 48%, #b8b8b8 95%);
background: -o-linear-gradient(top, #b8b8b8 0%, #ffffff 48%, #b8b8b8 95%);
background: -ms-linear-gradient(top, #b8b8b8 0%, #ffffff 48%, #b8b8b8 95%);
background: linear-gradient(top, #b8b8b8 0%, #ffffff 48%, #b8b8b8 95%);
background-attachment: fixed;
overflow-x: hidden;
}

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

#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;
}

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

.twitter img:hover, .shindan_button:hover{
    opacity: 0.7;
    filter: alpha(opacity=80);
}

.header{
    width: 1200px;
    height: 774px;
     background-image:url(../images/main.png);
}
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: 1200px;
    height: 100px;
    background-color: #222222;
}

.nav ul {
    height: 100px;
    width: 1200px;
    list-style: none;
    text-align: center;
    vertical-align:middle;
    display: table;
    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;
width: calc(100% / 4);
    height: auto;
    padding:0 10px;
}

/* .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;
}

/* .nav ul li img:hover, */
.siritai img:hover{
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: “alpha( opacity=70)”;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li p {
  font-size: 44px;
  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:200px;
}

.nep{
  color:#fff !important;
}

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

.nav_k{
  background: url("../images/kurotaitu_on.png") no-repeat;
  background-position: center;
}

.nav_k a {
    display: inline-block;
}

.nav_k a:hover {
	background-color: transparent; /* IE6対応 */
}

.nav_k a img{
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}

.nav_k a:hover img {
  /* visibility: hidden; */
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0);	/* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
}

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



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

}

/*ナビここまで*/

/*概要ページ*/

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

.stamp_bottom{
  width:1200px;
  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: 630px;
    left: 28px;
    z-index: 52;
}

.nagoya {
    position: absolute;
    top: 1035px;
    left: 16px;
    z-index: 2;
    margin: 50px;
}

.about .bird img {
    position: absolute;
    top: 1240px;
    left: 710px;
    z-index: 55;
}

.about .bird 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)”;
}

/*概要ページここまで*/


/* くろたいつページ */

.kurotaitu_page{
  position: relative;
  box-sizing: border-box;
  width:1200px;
  height:3177px;
}

.kurotaitu_page_link{
  position: absolute;
  width:1200px;
  bottom:120px;
  display:flex;
  justify-content: center;
  z-index:1;
}

.kurotaitu_page_link 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;
cursor: pointer;
}

.kurotaitu_page_link a:hover{
  opacity: .8;
}

.kurotaitu_page_link img{
  box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.88) ;
-webkit-box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.88) ;
-moz-box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.88) ;
-o-box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.88) ;
-ms-box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.88) ;
}
/* くろたいつページ */


.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: 100vw;
    height: 150px;
    background-color:#222 ;
    background-repeat: no-repeat;
    margin:0 auto;
    position: absolute;
    left: 0;
    right: 0;
    padding:10px 0;
    box-sizing: border-box;

}

.copyright{
    width: 100%;
    display: inline-block;
    margin:25px 0 25px 0;
    text-align: center;
    color: #fff;
}

#footer table {
    width:1030px;
    float: left;
    display: table-cell;
    margin-left: 40px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#footer td {
    padding-right:10px;
    padding-bottom: 1px;
    float:left;
}

table,
tbody,
thead,
tfoot,
tr,
th,
td {
    display: block;
    text-align: left;
     table-layout: fixed;
}
#footer td img {
    width:190px;
}

#footer td img:hover {
    filter: alpha(opacity=80);
    -webkit-animation: animation 1200ms linear both;
    animation: animation 1200ms linear both;
}

@-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{
    width: 100%;
    display: inline-block;
    margin: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
}

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

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

/*トップボタン*/

.topBtn {
    position: fixed;
    bottom: 20px;
    right: 30px;
    display: block;
    background-color: rgb(22, 190, 239);
    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;
}

.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:767px) {

    wrapper {
        width: 100%;
    }

}