@charset "UTF-8";

body {
  font-size: 4vw;
}
.inner {
  max-width: 100%;
  padding: 0 5vw;
}

/**********************************************************
 * header
 **********************************************************/
header {
  background: url(../img/mv_bg@2x.jpg) no-repeat #ffee1a;
  height: auto;
  padding-bottom: 5vw;
  background-size: cover;
  background-position: top center;
}
header .logo{
  width: 40vw;
  padding: 2vw;
}
header .inner{
  display: block;
  padding: 0;
}
header .mv_contents{
  padding: 0 4vw;
}
header .inner .for {
  font-size: 3.5vw;
  line-height: 1.4;
  margin: 5vw 0;
}  
header .inner .text{
  font-size: 3.5vw;
  width: 60%;
  padding: 2vw;
  margin: 5vw 0;
}
header .inner .main_character{
  position: absolute;
  width: 34%;
  top: 40%;
  right: 2vw;
}
header .inner .btn_read{
  width: 60%;
  display: block;
  margin: 0 auto;
}

/**********************************************************
 * main
 **********************************************************/
#concept .inner {
  padding: 15vw 5vw;
}
#concept h2,
#concept.introduction h2{
  position: static;
  font-size: 6vw;
  margin-left: 30vw;
}
#concept p,
#concept.introduction p{
  font-size: 3.6vw;
  margin: 10vw 0 0;
}
#concept p strong {
  font-size: 118%;
}

#era{
  padding: 15vw 0;
}
#era .aboutTitle{
  font-size: 4vw;
  width: 50vw;
  margin-bottom:5vw;
}
#era h2{
  font-size: 5.2vw;
  margin-bottom: 30vw;
}
#era .eraName{
  font-size: 15vw;
  right: 2vw;
  top: -26vw;
}
#era .eraContents p{
  font-size: 3.8vw;
}

#era .eraContents.shouwa,
#era .eraContents.heisei,
#era .eraContents.reiwa{
  margin-left: 0;
  display: block;
  padding: 10vw 5vw 5vw;
  margin-bottom: 30vw;
}
#era .eraContents.heisei .eraName{
  left: 2vw;
}
#era .eraContents.reiwa{
  margin-bottom: 0;
}
#era .eraContents.reiwa img{
  display: block;
  width: 60%;
  margin: 0 auto;
}
#era .text{
  font-size: 3.9vw;
  margin-top: 10vw;
}


#scene{
  padding: 15vw 0;
}
#scene h2{
  font-size: 6vw;
}
#scene ul{
  display: block;
}
#scene li{
  border: 3px solid #ffee1a;
  width: 100%;
  min-height: auto;
}
#scene .heading .number{
  font-size: 5vw;
  width: 5vw;
  height: 10vw;
  padding-top: 2vw;
}
#scene .heading h3{
  font-size: 4.4vw;
}
#scene .text{
  font-size: 3.8vw;
  padding: 2vw 4vw 4vw;
}
#scene .textlast{
  font-size: 4.8vw;
}


#book_outline .book_block{
  padding: 5vw;
  margin-bottom: 12vw;
}
#book_outline .book_block .number{
  width: 18vw;
  height: 18vw;
  font-size: 4.5vw;
  top: -9vw;
  left: 2vw;
  padding-top: 6.5vw;
}
#book_outline .book_block.comingsoon .number {
  width: 15vw;
  height: 15vw;
  font-size: 4vw;
  top: -7vw;
  padding-top: 5vw;
}
#book_outline .book_block_inner{
  display: block;
}
#book_outline .book_block .book_cover{
  width: 100%;
  margin-bottom: 10vw;
}
#book_outline .book_block .book_cover img{
  display: block;
  width: 70%;
  margin: 5vw auto;
}
#book_outline .book_block .pr{
  font-size: 5.6vw;
}
#book_outline .book_block .text{
  width: 100%;
}
#book_outline .book_block .book_title{
  font-size: 5.5vw;
}
#book_outline .book_block .book_title strong{
  font-size: 7vw;
}
#book_outline .book_block .spec{
  font-size: 3.6vw;
}
#book_outline .book_block .spec dt{
  width: 25%;
}
#book_outline .book_block .spec dd{
  width: 75%;
}
#book_outline .book_block .btn_read{
  width: 80%;
  display: block;
  margin: 0 auto;
}
#book_outline .point {
  padding: 5vw 0 15vw;
}
#book_outline .point li{
  font-size: 4.5vw;
  padding-left: 14vw;
}
#book_outline .point li strong {
  font-size: 6vw;
}


#about{
  padding: 15vw 0;
}
#about .flex{
  display: block;
}
#about .yorisowel .box{
  width: 100%;
  padding: 8vw 5vw;
}
#about .yorisowel .box h3{
  font-size: 6vw;
}
#about .yorisowel .box.manabi{
  margin-top:5vw;
  padding: 8vw 5vw;
}
#about .yorisowel .box h4{
  font-size: 4.8vw;
}

#about .company h3{
  font-size: 6vw;  
}
#about .company p{
  font-size: 3.6vw;
}
#about .company .photo {
  width: 80%;
  display: block;
  margin: 5vw auto;
}

#about .contact{
  font-size: 3.6vw;
}
#about .btn_contact{
  width: 70%;
}

/**********************************************************
 * footer
 **********************************************************/
footer .inner{
  display: block;
  padding: 5vw;
}
footer ul li{
  font-size: 2.8vw;
}
footer small{
  font-size: 2.5vw;
  margin-top: 1.5em;
  text-align: center;
}

/**********************************************************
 * 下部ボタン
 **********************************************************/
.fixed_contact{
  position: fixed;
  bottom: 2vw;
  left: 2vw;
  z-index: 100;
  width: 18vw;
}

.banner {
  width: 75vw;
  bottom: 2vw;
  right: 2vw;
}
.banner-close {
  top: -2vw;
  right: 2vw;
}