@charset "UTF-8";
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd {
  padding: 0;
  margin: 0; }

ol, ul {
  list-style-type: none; }

/*-----------------------------------------------
 root
-----------------------------------------------*/
html {
  overflow-y: scroll; }

body {
  overflow: hidden;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
  font-weight: 400; }

/*-----------------------------------------------
 font
-----------------------------------------------*/
html {
  overflow-x: hidden;
  font-size: medium; }

body {
  min-width: 1200px;
  font-size: 62.5%;
  /* 16px -> 10px */ }

div {
  line-height: 0;
  box-sizing: border-box; }

dt, dd, li,
caption, th, td,
input, button, textarea, select,
h1, h2, h3, h4, h5, h6, address {
  line-height: 0;
  font-size: 140%;
  margin: 0;
  padding: 0; }

p {
  line-height: 1.5;
  font-size: 140%;
  margin: 0;
  padding: 0; }

h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
p input, p button, p select,
li h1, li h2, li h3, li h4, li h5, li h6, li p, li dt, li dd, li li, li th, li td, li input, li button, li textarea, li select,
dd h1, dd h2, dd h3, dd h4, dd h5, dd h6, dd p, dd dt, dd dd, dd li, dd th, dd td, dd input, dd button, dd textarea, dd select,
tr h1, tr h2, tr h3, tr h4, tr h5, tr h6, tr p, tr dt, tr dd, tr li, tr input, tr button, tr textarea, tr select {
  font-size: 100%; }

input, button, select, option, textarea {
  font-size: 14px; }

figure {
  margin: 0; }

a,
a:link,
a:visited {
  color: #1d99c1;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

section {
  position: relative;
  box-sizing: border-box; }

@media only screen and (max-width: 768px) {
  body {
    min-width: 0; } }
/*-----------------------------------------------
 cf 
-----------------------------------------------*/
.clearfix {
  min-height: 1px; }
  .clearfix::after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }

* html .clearfix {
  height: 1px;
  /*¥*/
     /*/
height: auto;
overflow: hidden;
/**/ }

/*-----------------------------------------------
 hover
-----------------------------------------------*/
.hover :hover {
  opacity: 0.8;
  animation: btn 0.5s;
  -webkit-animation: btn 0.5s;
  -moz-animation: btn 0.5s; }

@keyframes btn {
  0% {
    opacity: 1; }
  10% {
    opacity: 0.4; }
  100% {
    opacity: 0.8; } }
@-webkit-keyframes btn {
  0% {
    opacity: 1; }
  10% {
    opacity: 0.4; }
  100% {
    opacity: 0.8; } }
body {
  background-color: #fff;
  background-image: url(../img/top/bg.png), url(../img/top/bg2.png); }

#wrapper {
  width: 1200px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8); }

@media only screen and (max-width: 768px) {
  #wrapper {
    width: 100%; } }
/*-----------------------------------------------
 aside
-----------------------------------------------*/
aside {
  float: left;
  width: 240px;
  padding: 10px 0 40px; }
  aside h1 {
    margin-bottom: 20px;
    text-align: center; }
  aside .bnrList {
    text-align: center; }
    aside .bnrList li:first-child {
      margin-bottom: 20px; }
    aside .bnrList li:last-child {
      margin-bottom: 40px; }
  aside .movie {
    position: relative;
    width: 228px;
    margin: 0 auto 40px;
    text-align: center; }
    aside .movie img {
      width: 100%; }
    aside .movie a {
      display: block;
      position: relative; }
      aside .movie a::before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/top/arrow.png);
        background-color: rgba(0, 0, 0, 0.3);
        background-position: center center;
        background-repeat: no-repeat;
        transition: all 0.3s ease; }
      aside .movie a:hover::before {
        opacity: 0; }
    aside .movie .movie-btn {
      margin-bottom: 20px; }
  aside .information {
    overflow-y: scroll;
    position: relative;
    width: 228px;
    height: 365px;
    margin: 0 auto;
    padding: 50px 8px 8px;
    box-sizing: border-box;
    border: 1px solid #d0c475;
    background-color: #fff; }
    aside .information h2 {
      position: absolute;
      top: 15px;
      left: 0;
      padding-left: 5px;
      border-left: 4px solid #1d2088;
      font-size: 18px;
      line-height: 1.5;
      color: #1d2088; }
    aside .information ul li {
      margin-bottom: 20px;
      font-size: 12px;
      line-height: 1.5; }
      aside .information ul li time {
        display: block;
        font-size: 14px;
        color: #d8b650; }

.video iframe {
  width: 800px;
  height: 450px; }

.mfp-bg {
  background-color: #000; }

.mfp-container {
  cursor: pointer; }

@media only screen and (max-width: 768px) {
  aside {
    float: none;
    width: 100%;
    padding: 20px 20px;
    box-sizing: border-box; }
    aside h1 {
      display: none; }
    aside .bnrList {
      font-size: 0; }
      aside .bnrList li {
        display: inline-block;
        width: 50%;
        box-sizing: border-box; }
        aside .bnrList li:first-child {
          padding-right: 2%; }
        aside .bnrList li:last-child {
          padding-left: 2%; }
        aside .bnrList li img {
          width: 100%; }
    aside .movie {
      width: 100%;
      height: auto; }
      aside .movie img {
        width: 100%; }
    aside .information {
      width: 100%; }
      aside .information ul h2 {
        font-size: 36px;
        font-size: 4.6875vw; }
      aside .information ul li {
        font-size: 26px;
        font-size: 3.3854166667vw; }
        aside .information ul li time {
          font-size: 26px;
          font-size: 3.3854166667vw; }

  .video {
    text-align: center; }
    .video iframe {
      width: 95%;
      height: 450px; }

  .mfp-container {
    overflow: hidden; }

  .mfp-content {
    width: 100%; }

  button.mfp-close, button.mfp-arrow {
    right: 0;
    font-size: 6vw; } }
/*-----------------------------------------------
 content
-----------------------------------------------*/
#content {
  float: right;
  width: 960px;
  min-height: 100vh; }
  #content h2.title1 {
    display: none;
    height: 0; }
  #content h2.title {
    cursor: pointer; }
  #content section .detail {
    float: left;
    width: 477px;
    padding: 20px 0 0 15px;
    box-sizing: border-box; }
    #content section .detail h2 {
      position: relative;
      padding: 2px 0 0 2px;
      font-size: 38px;
      line-height: 1.2; }
      #content section .detail h2 span {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff; }
    #content section .detail .sub {
      margin-bottom: 10px;
      font-size: 22px;
      color: #fff; }
    #content section .detail .author {
      margin-bottom: 20px; }
      #content section .detail .author li:first-child {
        display: inline-block;
        margin-right: 10px;
        font-size: 24px;
        font-weight: bold;
        line-height: 1; }
      #content section .detail .author li:last-child {
        display: inline-block;
        font-size: 18px;
        font-weight: bold; }
    #content section .detail .catch {
      font-size: 24px;
      font-weight: bold;
      color: #ffff00; }
    #content section .detail .text {
      margin-bottom: 20px;
      font-size: 18px;
      color: #fff; }
    #content section .detail ul {
      margin-bottom: 20px; }
      #content section .detail ul .release {
        display: inline-block;
        margin-right: 10px;
        font-size: 16px;
        line-height: 1.5;
        color: #fff; }
      #content section .detail ul .isbn {
        display: inline-block;
        font-size: 16px;
        line-height: 1.5;
        color: #fff; }
    #content section .detail .btn {
      text-align: center; }
  #content section .image {
    float: right;
    width: 483px;
    text-align: right; }

@media only screen and (max-width: 768px) {
  #content {
    float: none;
    width: 100%; }
    #content h2.title {
      display: none; }
    #content section {
      display: block;
      height: auto; }
      #content section .image {
        float: none;
        width: 100%; }
        #content section .image img {
          width: 100%; }
      #content section .detail {
        position: absolute;
        bottom: 0;
        padding: 10px 20px;
        float: none;
        width: auto; }
        #content section .detail h2 {
          font-size: 42px;
          font-size: 5.46875vw; }
        #content section .detail .sub {
          font-size: 28px;
          font-size: 3.6458333333vw; }
        #content section .detail .author {
          margin-bottom: 10px; }
          #content section .detail .author li:first-child {
            font-size: 24px;
            font-size: 3.125vw; }
          #content section .detail .author li:last-child {
            font-size: 18px;
            font-size: 2.34375vw; }
        #content section .detail .catch {
          margin-bottom: 10px;
          font-size: 24px;
          font-size: 3.125vw;
          line-height: 1.2; }
        #content section .detail .text {
          margin-bottom: 10px;
          font-size: 20px;
          font-size: 2.6041666667vw; }
        #content section .detail ul {
          margin-bottom: 10px; }
          #content section .detail ul .release {
            font-size: 24px;
            font-size: 3.125vw; }
          #content section .detail ul .isbn {
            font-size: 24px;
            font-size: 3.125vw; }
        #content section .detail .btn img {
          width: 134px;
          margin: 0 auto; } }
/*-----------------------------------------------
 title
-----------------------------------------------*/
#content .main {
  display: none; }
#content #front {
  display: none; }
#content #title1 {
  overflow: hidden;
  display: block;
  height: 550px;
  background-image: url(../img/top/title1-bg.png);
  background-repeat: no-repeat; }
  #content #title1 h2 {
    margin-bottom: 10px;
    color: #e4007f; }
#content #title2 {
  overflow: hidden;
  display: none;
  height: 550px;
  background-image: url(../img/top/title2-bg.png);
  background-repeat: no-repeat; }
  #content #title2 h2 {
    color: #e3bf16; }
#content #title3 {
  overflow: hidden;
  display: none;
  height: 550px;
  background-image: url(../img/top/title3-bg.png);
  background-repeat: no-repeat; }
  #content #title3 h2 {
    color: #4ca1bc; }
#content #title4 {
  overflow: hidden;
  display: none;
  height: 550px;
  background-image: url(../img/top/title4-bg.png);
  background-repeat: no-repeat; }
  #content #title4 h2 {
    color: #fff; }
#content #title5 {
  overflow: hidden;
  display: none;
  height: 550px;
  background-image: url(../img/top/title5-bg.png);
  background-repeat: no-repeat; }
  #content #title5 h2 {
    color: #fff; }
#content #title6 {
  overflow: hidden;
  display: none;
  height: 550px;
  background-image: url(../img/top/title6-bg.png);
  background-repeat: no-repeat; }
  #content #title6 h2 {
    color: #fff; }

@media only screen and (max-width: 768px) {
  #content {
    min-height: auto; }
    #content .main {
      display: block; }
      #content .main img {
        width: 100%; }
    #content #front {
      display: block; }
      #content #front .iconList {
        position: absolute;
        width: 100%;
        top: 0;
        padding: 20px 0 13% 6%;
        box-sizing: border-box;
        font-size: 0;
        background: url("../img/top/bg-icon.png") no-repeat top center; }
        #content #front .iconList li {
          display: inline-block;
          width: 33.3%; }
          #content #front .iconList li img {
            width: 100%; }
    #content #title1 {
      display: block;
      height: auto; }
      #content #title1 .detail {
        background-image: url(../img/top/title1-bg-sp.png); }
    #content #title2 {
      display: block;
      height: auto; }
      #content #title2 .detail {
        background-image: url(../img/top/title2-bg-sp.png); }
    #content #title3 {
      display: block;
      height: auto; }
      #content #title3 .detail {
        background-image: url(../img/top/title3-bg-sp.png); }
    #content #title4 {
      display: block;
      height: auto; }
      #content #title4 .detail {
        background-image: url(../img/top/title4-bg-sp.png); }
    #content #title5 {
      display: block;
      height: auto; }
      #content #title5 .detail {
        background-image: url(../img/top/title5-bg-sp.png); }
    #content #title6 {
      display: block;
      height: auto; }
      #content #title6 h2 {
        text-shadow: 3px 3px 0 #946bbd; }
      #content #title6 .detail {
        background-image: url(../img/top/title6-bg-sp.png); }
    #content .comingsoon {
      display: none; }
    #content .slick-dots {
      width: 100%;
      height: 25px;
      line-height: 25px;
      letter-spacing: -.40em;
      text-align: center; }
      #content .slick-dots li {
        display: inline-block;
        position: relative;
        margin: 0 10px;
        letter-spacing: normal;
        vertical-align: middle; }
        #content .slick-dots li button {
          width: 11px;
          height: 11px;
          font-size: 0;
          line-height: 0;
          display: block;
          cursor: pointer;
          color: transparent;
          border: 0;
          outline: none;
          background: transparent; }
        #content .slick-dots li button:hover,
        #content .slick-dots li button:focus {
          outline: none; }
        #content .slick-dots li button:hover:before,
        #content .slick-dots li button:focus:before {
          opacity: 1; }
        #content .slick-dots li button:before {
          content: '';
          line-height: 25px;
          position: absolute;
          top: 0;
          left: 0;
          width: 18px;
          height: 18px;
          border-radius: 9px;
          text-align: center;
          color: #c8ccc2;
          background: #c8ccc2;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale; }
        #content .slick-dots li.slick-active button:before {
          color: #1d2088;
          background: #1d2088; } }
/*-----------------------------------------------
 header
-----------------------------------------------*/
#header {
  position: relative;
  height: 110px;
  background-color: rgba(200, 185, 92, 0.8); }
  #header .catch {
    position: absolute;
    top: 5px;
    left: 11px; }
  #header .menu {
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background-image: url(../img/global/menu.png);
    background-size: 70px; }
  #header .sns {
    padding: 10px 10px 0 0;
    font-size: 0;
    text-align: right; }
    #header .sns li {
      display: inline-block;
      margin-left: 10px; }

@media only screen and (max-width: 768px) {
  #header {
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.9); }
    #header .catch {
      position: static;
      width: calc(458/640*100%);
      font-size: 0; }
      #header .catch img {
        width: 100%; }
    #header .menu {
      width: calc(100/640*100%);
      height: 0;
      padding-top: calc(100/640*100%);
      background-size: 100% auto; }
    #header .sns {
      display: none; } }
/*-----------------------------------------------
 loading
-----------------------------------------------*/
#loading {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100vh;
  background-color: white; }
  #loading .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    margin: -66px 0 0 -60px; }
    #loading .logo img {
      width: 100%; }

/*-----------------------------------------------
 navigation
-----------------------------------------------*/
#navigation {
  overflow: hidden;
  display: none;
  position: fixed;
  opacity: 0;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(255, 255, 255, 0.9); }
  #navigation .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background-image: url(../img/global/close.png);
    background-size: 70px; }
  #navigation .logo {
    width: 980px;
    margin: 25px auto 10px; }
    #navigation .logo img {
      width: 94px; }
  #navigation nav ul {
    width: 980px;
    margin: 0 auto;
    font-size: 0; }
    #navigation nav ul li {
      display: inline-block;
      width: 485px;
      margin-bottom: 10px; }
      #navigation nav ul li:nth-child(odd) {
        margin-right: 10px; }
      #navigation nav ul li.top {
        display: block;
        width: 98px;
        margin: 0 auto; }
      #navigation nav ul li img {
        width: 100%; }

@media only screen and (max-width: 768px) {
  #navigation .logo {
    width: auto;
    margin: 25px 10px 10px; }
    #navigation .logo img {
      width: 16%; }
  #navigation nav ul {
    width: auto;
    margin: 0 10px; }
    #navigation nav ul li {
      width: 49%; }
      #navigation nav ul li:nth-child(odd) {
        margin-right: 2%; }
      #navigation nav ul li.top {
        display: block;
        width: 16%;
        margin: 0 auto; }
  #navigation .close {
    width: calc(100/640*100%);
    height: 0;
    padding-top: calc(100/640*100%);
    background-size: 100% auto; } }
/*-----------------------------------------------
 footer
-----------------------------------------------*/
#footer {
  padding: 20px 0 40px;
  background-color: rgba(201, 186, 93, 0.8);
  text-align: center; }
  #footer .logo {
    margin-bottom: 10px; }
  #footer .author {
    margin-bottom: 20px;
    font-size: 14px;
    color: #1d2089; }
  #footer small {
    display: block;
    font-size: 14px;
    color: #1d2089; }

@media only screen and (max-width: 768px) {
  #footer .author, #footer small {
    font-size: 18px;
    font-size: 2.34375vw; } }