/* CSS Document */
html {
  overflow-x: hidden;
  min-width: 960px; }

body {
  margin-top: -60px;
  overflow-x: hidden;
  min-width: 960px;
  background: none; }

.backGround {
  background: url(../imgHtml/common/back.jpg);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; }

.centerBlock {
  position: relative;
  z-index: 1; }

h2 {
  font-size: 2.2em;
  padding: 20px;
  font-weight: 500;
  color: #deab32;
  text-align: left;
  line-height: 1.8em; }

p {
  font-weight: 300;
  line-height: 1.5em; }

h2 + p {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.2em; }

.more {
  display: block;
  margin: 0 auto;
  padding: 10px;
  width: 180px;
  text-align: center;
  position: relative;
  cursor: pointer; }
  .more p {
    position: absolute;
    z-index: 333;
    top: 30px;
    font-size: 1.2em;
    left: 19%; }
  .more .arrow_w {
    position: absolute;
    z-index: 333;
    top: 30px;
    right: -50px; }
  .more .moreImg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); }

header {
  background-position: top center;
  padding-top: 10%;
  position: relative;
  margin-bottom: 10%;
  color: #333;
  height: 250px;
  box-sizing: border-box; }
  header h1 {
    background: #deab32;
    color: #fff;
    padding: 10px 20px;
    position: absolute;
    top: 80px;
    z-index: 555;
    left: 0; }
  header .topLogo {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%); }
  header .topBlock {
    position: relative;
    z-index: 333;
    top: -100px; }
  header .telA {
    position: absolute;
    right: calc(50% - 475px);
    bottom: -30px;
    z-index: 333; }
  header .twitterA {
    position: absolute;
    right: calc(50% - 355px);
    bottom: -30px;
    z-index: 333; }
  header .mailA {
    position: absolute;
    right: calc(50% - 415px);
    bottom: -30px;
    z-index: 333; }
  header h5 {
    background: url("../imgHtml/bookClub/line_y.png");
    position: absolute;
    width: 100%;
    background-position: bottom;
    height: 50px;
    top: 50px; }

/*menu*/
menu {
  position: relative;
  margin-bottom: 45px; }
  menu .innerWrap {
    width: 960px;
    display: block;
    margin: -40px auto 0;
    box-sizing: border-box;
    padding: 0px 0px 0 30px; }
    menu .innerWrap a {
      background: url("../imgHtml/common/topLink.png");
      padding: 23px 20px;
      width: 148px;
      height: 63px;
      vertical-align: text-bottom;
      box-sizing: border-box;
      display: inline-block;
      position: relative;
      right: 10px;
      top: 12px;
      font-size: 1em;
      transition: 0.5s; }
    menu .innerWrap a:hover {
      opacity: 0.8; }
    menu .innerWrap a:nth-child(2) {
      background: url("../imgHtml/common/selectLink.png"); }
    menu .innerWrap a:nth-child(3) {
      background: url("../imgHtml/common/bookLink.png"); }
    menu .innerWrap a:nth-child(4) {
      background: url("../imgHtml/common/eventLink.png"); }
    menu .innerWrap a:nth-child(5) {
      background: url("../imgHtml/common/nerBookLink.png"); }
    menu .innerWrap a:nth-child(6) {
      background: url("../imgHtml/common/accLink.png"); }
    menu .innerWrap a::after {
      position: absolute;
      content: url("../imgHtml/common/arrow_w.png");
      right: 5px;
      top: 17px; }
    menu .innerWrap a + a {
      margin-left: 3px; }

/*mainBlock*/
.mainBlock .innerWrap {
  width: 100%;
  height: 240px;
  color: #fff;
  text-align: center;
  position: relative;
  padding: 60px;
  background: #deab32;
  font-family: "anzu"; }
  .mainBlock .innerWrap h2 {
    color: #fff;
    text-align: center;
    font-size: 1.2em;
    font-weight: normal;
    padding: 0;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
  .mainBlock .innerWrap h3 {
    padding: 5px;
    font-size: 3em; }
  .mainBlock .innerWrap a {
    background: url("../imgHtml/common/whiteBlock.png");
    width: 302px;
    height: 63px;
    margin: 20px auto;
    display: block;
    color: #deab32;
    font-size: 2em;
    padding: 10px; }
.mainBlock .innerWrap h5:first-child {
  width: 100%;
  height: 30px;
  position: absolute;
  top: -20px;
  left: 0;
  background: url(../imgHtml/bookClub/line_y.png);
  z-index: 333; }
.mainBlock .innerWrap h5:last-child {
  width: 100%;
  height: 30px;
  position: absolute;
  background-position: bottom;
  bottom: -30px;
  left: 0;
  background: url("../imgHtml/bookClub/line_y.png");
  background-position-y: bottom;
  z-index: 333; }
.mainBlock .accTtl {
  position: absolute;
  top: 190px;
  left: calc(50% - 420px);
  z-index: 334; }

/*normal*/
.normal {
  width: 960px;
  background: #fff;
  margin: 0 auto;
  box-sizing: border-box; }
  .normal .innerWrap {
    width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 100px 60px 100px;
    position: relative; }
    .normal .innerWrap h2 {
      padding: 0;
      font-weight: bold; }

/*special*/
.special {
  background: #deab32;
  position: relative; }
  .special h5:first-of-type {
    width: 100%;
    height: 56px;
    position: absolute;
    left: 0;
    top: -30px;
    background: url("../imgHtml/bookClub/line_y.png");
    z-index: 333; }
  .special h5:last-of-type {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: -20px;
    left: 0;
    background: url(../imgHtml/bookClub/line_y.png);
    background-position-y: bottom;
    z-index: 333; }
  .special .innerWrap {
    width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 60px 0;
    height: 960px;
    position: relative; }
    .special .innerWrap h2 {
      color: #fff;
      font-family: "anzu";
      font-size: 3em;
      line-height: 1.5em;
      transform: rotate(-15deg);
      margin-top: -70px; }
    .special .innerWrap div div {
      position: relative; }
      .special .innerWrap div div h3 {
        font-weight: bold;
        font-size: 1.2em;
        line-height: 1.2em; }

/*subBlock*/
.subBlock {
  position: relative; }
  .subBlock .innerWrap {
    text-align: center; }
    .subBlock .innerWrap h4 {
      font-size: 2em;
      color: #deab32;
      margin: 10px auto 30px;
      line-height: 1.5em;
      text-align: left;
      font-family: 'anzu'; }
    .subBlock .innerWrap h5 {
      color: #deab32;
      font-size: 1.3em;
      font-weight: bold;
      padding: 20px;
      height: 85px; }
    .subBlock .innerWrap h5::before {
      content: url("../imgHtml/bookClub/apple.png");
      padding-right: 10px;
      vertical-align: sub; }
    .subBlock .innerWrap h5::after {
      content: url("../imgHtml/bookClub/apple.png");
      padding-left: 10px;
      vertical-align: sub; }
    .subBlock .innerWrap h5 + p span {
      display: block;
      color: #deab32; }
    .subBlock .innerWrap .subDiv {
      display: flex;
      width: 100%;
      margin: 20px auto; }
      .subBlock .innerWrap .subDiv .rightBox {
        width: 50%; }
      .subBlock .innerWrap .subDiv .leftBox {
        width: 50%;
        position: relative; }
      .subBlock .innerWrap .subDiv p {
        width: 100%;
        display: block;
        font-weight: bold;
        padding: 30px 30px 30px 0;
        text-align: justify; }
      .subBlock .innerWrap .subDiv a {
        background: url("../imgHtml/bookClub/btn.png");
        display: block;
        width: 338px;
        height: 63px;
        padding: 15px;
        font-size: 1.3em;
        color: #fff;
        font-weight: bold;
        transition: 0.5s;
        cursor: pointer;
        margin: 0 auto;
        text-align: center; }
      .subBlock .innerWrap .subDiv .yomikikase {
        border: 10px solid #deab32; }
      .subBlock .innerWrap .subDiv .book {
        position: absolute;
        z-index: 335; }
      .subBlock .innerWrap .subDiv .book0 {
        top: 160px;
        right: -50px; }
      .subBlock .innerWrap .subDiv .book1 {
        top: 230px;
        right: 90px; }
      .subBlock .innerWrap .subDiv .book2 {
        top: 380px;
        right: -160px;
        z-index: 355; }
      .subBlock .innerWrap .subDiv .book3 {
        top: 400px;
        right: 200px; }
      .subBlock .innerWrap .subDiv .book4 {
        top: 270px;
        right: 0px; }
    .subBlock .innerWrap .fukidashi {
      display: flex; }
      .subBlock .innerWrap .fukidashi .ani {
        width: 25%; }
    .subBlock .innerWrap .fukidashi .ani:nth-child(odd) p {
      background: url("../imgHtml/senshokai/fukidashi0.png") no-repeat;
      width: 273px;
      height: 245px;
      padding: 50px;
      font-size: 1.2em;
      font-weight: bold; }
    .subBlock .innerWrap .fukidashi .ani:nth-child(even) p {
      background: url("../imgHtml/senshokai/fukidashi2.png") no-repeat;
      width: 169px;
      height: 245px;
      padding: 40px 20px;
      font-size: 1.2em;
      font-weight: bold;
      margin-left: 54px;
      margin-top: 40px; }
    .subBlock .innerWrap h6 {
      font-size: 2em;
      color: #f4abaf;
      margin: 10px auto;
      font-weight: bold;
      line-height: 1.5em; }

/*eyeSpotBlock*/
.eyeSpotBlock .innerWrap .spot {
  opacity: 0;
  transition: 0.5s;
  height: 0px;
  pointer-events: none; }
  .eyeSpotBlock .innerWrap .spot .innerBox {
    display: flex; }
    .eyeSpotBlock .innerWrap .spot .innerBox img {
      width: 50%; }
.eyeSpotBlock .innerWrap .spot.on {
  opacity: 1;
  height: 380px; }
.eyeSpotBlock .innerWrap h3 {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  color: #fff;
  padding: 20px;
  margin-bottom: 20px; }
.eyeSpotBlock .innerWrap p {
  text-align: center;
  color: #fff;
  font-weight: bold;
  padding: 10px; }
.eyeSpotBlock .innerWrap .hut {
  position: absolute;
  top: 152px;
  right: 60px;
  z-index: 334; }
.eyeSpotBlock .innerWrap .people {
  position: absolute;
  left: -50px;
  bottom: 180px; }
.eyeSpotBlock .innerWrap button {
  background: url("../imgHtml/common/whiteBlock.png");
  display: inline-block;
  width: 302px;
  height: 63px;
  padding: 10px;
  color: #deab32;
  font-weight: bold;
  transition: 0.5s;
  cursor: pointer; }
.eyeSpotBlock .innerWrap button.on {
  opacity: 0.5;
  pointer-events: none; }

/*sampleBlock*/
.sampleBlock {
  position: relative; }
  .sampleBlock .innerWrap {
    padding: 90px 30px; }
    .sampleBlock .innerWrap .flexBox {
      display: none; }
      .sampleBlock .innerWrap .flexBox .leftBox {
        width: 50%;
        height: 500px;
        position: relative; }
        .sampleBlock .innerWrap .flexBox .leftBox img {
          position: absolute;
          width: 200px; }
        .sampleBlock .innerWrap .flexBox .leftBox img:first-child {
          top: 220px;
          left: 0;
          transform: rotate(-15deg); }
        .sampleBlock .innerWrap .flexBox .leftBox img:nth-child(2) {
          top: 220px;
          left: 200px;
          transform: rotate(15deg); }
      .sampleBlock .innerWrap .flexBox .rightBox {
        width: 50%;
        padding: 140px 0 130px; }
        .sampleBlock .innerWrap .flexBox .rightBox img {
          vertical-align: middle;
          max-width: 100px; }
        .sampleBlock .innerWrap .flexBox .rightBox h6 {
          color: #fff;
          display: inline-block;
          font-size: 1.5em;
          font-weight: bold;
          vertical-align: middle; }
        .sampleBlock .innerWrap .flexBox .rightBox p {
          padding-top: 30px;
          text-align: left;
          color: #fff;
          font-weight: bold;
          font-size: 1.2em;
          width: 420px; }
    .sampleBlock .innerWrap .flexBox.on {
      display: flex;
      height: 540px; }
    .sampleBlock .innerWrap .btnBox {
      margin-bottom: 10px; }
      .sampleBlock .innerWrap .btnBox .btn {
        background: url("../imgHtml/common/whiteBlock_short.png");
        display: inline-block;
        width: 146px;
        height: 63px;
        padding: 10px 5px;
        color: #deab32;
        font-weight: bold;
        transition: 0.5s;
        cursor: pointer;
        transition: 0.5s; }
        .sampleBlock .innerWrap .btnBox .btn span {
          display: block; }
      .sampleBlock .innerWrap .btnBox .btn:first-child {
        background: url("../imgHtml/common/whiteBlock_long.png");
        display: block;
        width: 900px;
        margin-bottom: 2px; }
      .sampleBlock .innerWrap .btnBox .btn.on {
        opacity: 0.8;
        pointer-events: none; }
    .sampleBlock .innerWrap h2 {
      padding-bottom: 30px;
      position: absolute;
      z-index: 333;
      text-align: left;
      top: 100px; }
    .sampleBlock .innerWrap h3 {
      color: #fff;
      font-size: 3em;
      font-weight: bold;
      margin-top: 300px;
      text-align: center;
      width: 400px;
      margin-bottom: 60px; }
      .sampleBlock .innerWrap h3 span {
        font-size: 0.5em;
        display: block; }
    .sampleBlock .innerWrap .bird2 {
      position: absolute;
      top: 260px;
      left: -110px; }
    .sampleBlock .innerWrap .unnamed {
      position: absolute;
      top: 100px;
      right: 60px; }
    .sampleBlock .innerWrap p {
      color: #fff;
      font-weight: bold; }
    .sampleBlock .innerWrap a {
      background: url("../imgHtml/bookClub/btn.png");
      display: block;
      width: 338px;
      height: 63px;
      padding: 15px;
      font-size: 1.3em;
      color: #fff;
      font-weight: bold;
      transition: 0.5s;
      cursor: pointer;
      margin: 0 auto;
      text-align: center; }

/*omoiBlock*/
.omoiBlock {
  width: 960px;
  border: 15px solid #deab32;
  padding: 10px;
  margin: 0 auto;
  background: #fff; }
  .omoiBlock .innerWrap {
    border: 1px solid #deab32;
    padding: 60px;
    position: relative; }
    .omoiBlock .innerWrap h2 {
      font-size: 2em;
      font-weight: bold;
      text-align: left;
      width: 750px;
      margin: 0 auto; }
      .omoiBlock .innerWrap h2 span {
        font-size: 0.5em;
        color: #000;
        padding-left: 10px; }
    .omoiBlock .innerWrap p {
      text-align: justify;
      line-height: 1.8em;
      width: 700px;
      margin: 0 auto;
      font-weight: bold; }
    .omoiBlock .innerWrap .apple {
      bottom: 20px;
      right: 20px; }
    .omoiBlock .innerWrap .birdRight {
      position: absolute;
      top: -40px;
      right: -20px; }
    .omoiBlock .innerWrap .bird {
      position: absolute;
      top: 470px;
      left: -40px; }

/*attentionBlock*/
.attentionBlock .innerWrap {
  position: relative; }
  .attentionBlock .innerWrap h4 {
    font-size: 2em;
    color: #deab32;
    margin: 10px auto 30px;
    font-family: 'anzu';
    line-height: 1.5em;
    text-align: left; }
  .attentionBlock .innerWrap .book6 {
    position: absolute;
    top: 70px;
    right: 130px; }
  .attentionBlock .innerWrap .book5 {
    position: absolute;
    top: 120px;
    right: 10px; }
  .attentionBlock .innerWrap .hut {
    position: absolute;
    top: 70px;
    right: 5px; }
  .attentionBlock .innerWrap ul li {
    font-size: 0.9em;
    line-height: 2.5em; }
    .attentionBlock .innerWrap ul li p {
      display: inline-block;
      vertical-align: middle; }
  .attentionBlock .innerWrap ul li:before {
    content: url("../imgHtml/bookClub/apple.png");
    vertical-align: -webkit-baseline-middle;
    vertical-align: middle;
    width: 80px;
    height: 70px;
    display: inline-block; }

/*addBlock*/
.addBlock .innerWrap {
  position: relative; }
  .addBlock .innerWrap h2 {
    margin-bottom: 30px;
    font-family: 'anzu';
    font-weight: normal;
    text-align: center;
    font-size: 3em;
    line-height: 1.3em; }
  .addBlock .innerWrap h2 + p {
    font-size: 1em;
    line-height: 1.5em; }
  .addBlock .innerWrap .neko0 {
    position: absolute;
    left: 50px;
    top: 370px; }
  .addBlock .innerWrap .telLink {
    background: url(../imgHtml/bookClub/btn.png);
    display: block;
    width: 338px;
    height: 63px;
    padding: 10px;
    font-size: 1.3em;
    color: #fff;
    font-weight: bold;
    transition: 0.5s;
    cursor: pointer;
    margin: 0 auto;
    text-align: center; }
    .addBlock .innerWrap .telLink span {
      display: block;
      font-size: 0.6em; }
  .addBlock .innerWrap .mailLink {
    color: #deab32;
    text-decoration: underline;
    text-align: center;
    margin: 20px auto 0;
    display: block; }

/*selectBlock*/
.selectBlock {
  background: #de7b32; }
  .selectBlock h5:first-of-type {
    background: url("../imgHtml/select/orangeLine.png"); }
  .selectBlock h5:last-of-type {
    background: url("../imgHtml/select/orangeLine.png"); }
  .selectBlock .innerWrap {
    height: 500px;
    margin: 0 auto 150px;
    position: relative; }
    .selectBlock .innerWrap h2 + p {
      text-align: left;
      margin-bottom: 30px;
      font-size: 1.2em;
      color: #fff;
      width: 780px;
      font-weight: bold;
      padding-left: 420px;
      padding-bottom: 60px;
      margin-top: -130px; }
    .selectBlock .innerWrap a {
      background: url(../imgHtml/common/whiteBlock.png);
      width: 302px;
      height: 63px;
      margin: 20px auto;
      display: block;
      color: #de7b32;
      font-size: 1.3em;
      padding: 15px;
      text-align: center; }
    .selectBlock .innerWrap .girl {
      position: absolute;
      z-index: 335;
      right: -80px;
      bottom: 10px; }

@media screen and (max-width: 960px) {
  .backGround {
    width: 960px;
    height: 100%; }

  .normal {
    width: 900px; }
    .normal .innerWrap {
      width: 900px;
      padding: 100px 30px 60px; }

  .special .innerWrap {
    width: auto; } }