@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,700&display=swap');

/* reset css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }nav ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }/* change colours to suit your needs */ins { background-color: #ff9; color: #000; text-decoration: none; }/* change colours to suit your needs */mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }del { text-decoration: line-through; }abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }table { border-collapse: collapse; border-spacing: 0; }/* change border colour to suit your needs */hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }input, select { vertical-align: middle; }li {list-style: none;}area{border:none;outline:none;}

/*
 * defaut style
 */
html { height: 100%; overflow-y: scroll; font-size:16px; line-height: 1.6; }
body { font-size: 100%; color: #000000; min-width: 1000px; overflow: hidden; word-wrap: break-word; -webkit-text-size-adjust: 100%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
* { box-sizing:border-box; }

.fontMin ,
.fontMin * {
    font-family:  "Yu Mincho", "游明朝", YuMincho, 'Noto Serif JP' , 'ヒラギノ明朝 Pro W3' , 'HiraMinPro-W3' ,serif;
}
.content1000 {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 999;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 29px;
  height: 29px;
  margin-top: -14px;
  margin-left: -14px;
  text-align: center;
  color: #333;
  z-index: 1000;
}

/*
 * header
 */
header {
    padding-top: 5px;
    height: 1495px;
    width: 100%;
    position: relative;
    z-index: 10;
}
header::before {
    content:  '';
    background: url("../img/img_main_keyvisual.jpg") no-repeat center 0;
    height: 1495px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
header::after {
    content:  '';
    background-color: #000;
    width: 100%;
    height: 140px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
header > div {
    position: relative;
    height: 100%;
}

.visual-area .title01 , 
.visual-area .title02 ,
.visual-area .title03 ,
.visual-area .title04 ,
.visual-area .box1 {
    position: absolute;
    opacity: 0;
}
.visual-area .title01 {
    top: 0;
    left: 10px;
}
.visual-area .title02 {
    top: 765px;
    left: 133px;
}
.visual-area .title03 {
    top: 193px;
    right: 192px;
}
.visual-area .title04 {
    top: 677px;
    right: 205px;
}
.visual-area .box1 {
    width: 400px;
    right: 20px;
    bottom: 238px;
}
.visual-area .box1 .book {
    background-color: #000;
    padding: 10px;
    margin-left: 218px;
    margin-bottom: 5px;
}
.visual-area .box1 .book .title {
    padding: 0 10px 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.visual-area .box1 .book ul li {
    line-height: 0;
    margin-top: 5px;
}
.visual-area .box1 .book ul li a:hover {
    opacity: .7;
    transition: all 0.3s ease;
}

/*
 * footer
 */

#footer { background:#000; position:relative; padding:30px 0; color:#fff; }
#footer .pagetop { text-align:center;  }
#footer .pagetop:hover { opacity:0.7; transition: all 0.3s ease; }
#footer .sns { text-align:center; margin:20px 0 20px; }
#footer .sns ul {
    display: flex;
    justify-content: center;
}
#footer .sns ul li {
    margin: 0 3px ;
}
#footer .sns ul li .fb_iframe_widget {
    position: relative;
    top: -6px;
}
#footer .logo { text-align:center; margin:20px 0 20px; }
#footer .copyright { text-align:center;}

/* anime */
.fadeInUpEx { animation:_fadeInUpEx 0.5s ease 0s forwards; }
.fadeInDownEx { animation:_fadeInDownEx 0.5s ease 0s forwards; }

@keyframes _fadeInUpEx {
    0% { opacity:0; transform:translateY( -50px); }
  100% { opacity:1; transform:translateY(  0px); }
}

@keyframes _fadeInDownEx {
    0% { opacity:0; transform:translateY( 50px); }
  100% { opacity:1; transform:translateY(  0px); }
}

#story {
    background-color: #ffba00;
    padding-bottom: 45px;
}
#story > div img {
    position: relative;
    margin-top: -90px;
    z-index: 100;
}

#recommend {
    background: url("../img/img_recommend01.jpg") no-repeat center 0;
    padding-bottom: 50px;
}
#recommend > div {
    padding-right: 20px;
    padding-left: 20px;
}
#recommend > div h2 {
    padding: 45px 0;
    text-align: center;
}
.thumb-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 5px;
}
.thumb-list .thumb-item {
    width: 156px;
    line-height: 0;
    margin-bottom: 5px;
}
.swiper-button-next, .swiper-button-prev {
    width: 20px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url("../img/prev.png");
    left: 15px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(../img/next.png);
    right: 15px;
}
.swiper-container {
    background-color: rgba(173,157,182,.8);
}
.gallery-slider .swiper-slide {
    width: 100%;
    padding: 60px;
}
.gallery-slider .swiper-slide h3 {
    font-size: calc(24em / 16);
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 5px;
}
.gallery-slider .swiper-slide h3 strong {
    font-size: calc(30em / 24);
}
.gallery-slider .swiper-slide h4 {
    font-size: calc(18em / 16);
    color: #a26990;
    font-family: 'Noto Sans JP', sans-serif;
}
.gallery-slider .swiper-slide p {
    font-size: calc(18em / 16);
    margin-top: 15px;
}

#interview {
    background-color: #ad9db6;
    padding-bottom: 45px;
}
#interview * {
    text-align: center;
}
#interview h2 {
    padding-bottom: 40px;
}

#pv {
    background-color: #222222;
    padding: 50px 0;
}
#pv > div {
    margin: auto;
    text-align: center;
}
#pv iframe {
    width: 860px;
    height: 484px;
}

#character {
    padding: 45px 0 40px 0;
}
#character h2 {
    padding-left: 20px;
}
#character ul.gallery-list {
    display: flex;
    justify-content: space-between;
    padding: 5px 30px 20px 30px;
}
#character ul.gallery-list li a:hover {
    opacity: .7;
    transition: all 0.3s ease;
}
#character p:last-of-type {
    text-align: center;
}

#books {
    background-color: #ffba00;
    padding-bottom: 10px;
}
#books * {
    line-height: 1.4;
}
#books h2 {
    text-align: center;
    padding-bottom: 55px;
}
#books > div {
    padding-right: 30px;
    padding-left: 30px;
}
#books > div > div {
    display: flex;
    justify-content: space-between;
    padding-bottom: 60px;
}
#books > div > div > div {
    width: 605px;
}
#books > div > div > div dl {
    margin-bottom: 20px;
}
#books > div > div > div dl * {
    font-weight: 700;
}
#books > div > div > div dl dt {
    font-size: calc(26em / 16);
    margin-bottom: 20px;
    font-family: 'Noto Sans JP', sans-serif;
}
#books > div > div > div dl dt strong {
    font-size: calc(36em / 26);
    display: block;
}
#books > div > div > div dl dd:nth-of-type(1) {
    font-size: calc(24em / 16);
    font-family: 'Noto Sans JP', sans-serif;
}
#books > div > div > div h4 {
    font-size: calc(18em / 16);
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 10px;
}
#books > div > div > div ul {
    display: flex;
    margin-top: 20px;
}
#books > div > div > div ul li {
    margin-right: 30px;
}
#books > div > div p:hover ,
#books > div > div > div ul li a:hover {
    opacity: .7;
    transition: all 0.3s ease;
}