@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;800&family=Oswald:wght@500&display=swap');
*, *:after, *:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
body, html {
 font-size: 100%;
 padding: 0;
 margin: 0;
 height: 100%;
}
.clearfix:before, .clearfix:after {
 content: " ";
 display: table;
}
.clearfix:after {
 clear: both;
}
body {
 font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";
 font-size: 1rem;
 line-height: 1.85;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-text-size-adjust: 100%;
 word-wrap: break-word;
 font-weight: 500;
 color: #111;
 background: #f9abbb;
 letter-spacing: normal;
 /* iPhoneポップアップ無効 */
 -webkit-touch-callout: none;
}
.en {
 font-family: 'Oswald', Arial, Helvetica, "sans-serif";
 font-weight: 500;
 letter-spacing: -1px;
}
a {
 color: #555;
 text-decoration: none;
 outline: none;
}
a:hover, a:active {
 color: #777;
}
a img {
 border: none;
}
/* 画像の上に透明のフィルター画像を被せる */
.ImgArea {
 position: relative;
}
.ImgArea .clr {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 right: 0;
 top: 0;
 z-index: 10000;
}
.guard {
 pointer-events: none;
 cursor: default;
}
img {
 max-width: 100%;
 height: auto;
}
.loading {
 position: fixed;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: #000;
}
.copyright {
 color: #fff;
 font-size: 0.7em;
 text-align: center;
 padding: 40px 10px 10px;
 letter-spacing: normal;
}
.cap {
 font-size: .9em;
 line-height: 1.6em;
 width: 90%;
 margin: 0 auto 2em;
}
/* セレクト */
.cp_ipselect {
 overflow: hidden;
 width: 92%;
 max-width: 400px;
 margin: 2em auto 1em;
 text-align: center;
 position: relative;
 border: 4px solid #ddd;
 border-radius: 50px;
 background: #ffffff;
}
.cp_ipselect select {
 width: 100%;
 cursor: pointer;
 text-overflow: ellipsis;
 border: none;
 outline: none;
 background: transparent;
 background-image: none;
 box-shadow: none;
 -webkit-appearance: none;
 appearance: none;
 padding: 10px 38px 10px 28px;
 font-size: 1.8em;
 font-family: Arial, Helvetica, "sans-serif";
 font-weight: 600;
 letter-spacing: -1px;
 color: #000;
}
.cp_ipselect select::-ms-expand {
 display: none;
}
.cp_ipselect::before {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 1.2em;
 margin: auto;
 width: 0;
 height: 0;
 padding: 0;
 content: '';
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-top: 6px solid #111;
 pointer-events: none;
}
/* Header Style */
.main, .container > header {
 margin: 0 auto;
}
.container {
 height: 100%;
}
.container > header {
 text-align: center;
 background: rgba(0, 0, 0, 0.01);
}
.container > header h1 {
 font-size: 2.625em;
 line-height: 1.3;
 margin: 0;
 font-weight: 300;
}
.container > header span {
 display: block;
 font-size: 60%;
 opacity: 0.3;
 padding: 0 0 0.6em 0.1em;
}
/* Main Content */
.main {
 max-width: 1000px;
 min-height: 100%;
 justify-content: center;
 align-items: center;
 display: flex;
}
.column {
 float: left;
 width: 50%;
 padding: 0 2em;
 min-height: 300px;
 position: relative;
}
.column:nth-child(2) {
 box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1);
}
.column p {
 font-weight: 300;
 font-size: 2em;
 padding: 0;
 margin: 0;
 text-align: right;
 line-height: 1.5;
}
/* To Navigation Style */
.codrops-top {
 background: #fff;
 background: rgba(255, 255, 255, 0.6);
 text-transform: uppercase;
 width: 100%;
 font-size: 0.69em;
 line-height: 2.2;
}
.codrops-top a {
 padding: 0 1em;
 color: #888;
 display: inline-block;
}
.codrops-top a:hover {
 background: rgba(255, 255, 255, 0.95);
 color: #333;
}
.codrops-top span.right {
 float: right;
}
.codrops-top span.right a {
 float: left;
 display: block;
}
.codrops-icon:before {
 font-family: 'codropsicons';
 margin: 0 4px;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
 content: "\e001";
}
.codrops-icon-prev:before {
 content: "\e004";
}
.codrops-icon-archive:before {
 content: "\e002";
}
.codrops-icon-next:before {
 content: "\e000";
}
.codrops-icon-about:before {
 content: "\e003";
}
/* Demo Buttons Style */
.codrops-demos {
 padding-top: 1em;
 font-size: 0.9em;
}
.codrops-demos a {
 display: inline-block;
 margin: 0.2em;
 padding: 0.45em 1em;
 background: #999;
 color: #fff;
 font-weight: 700;
 border-radius: 2px;
}
.codrops-demos a:hover, .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover {
 opacity: 0.6;
}
.codrops-nav {
 text-align: center;
}
.codrops-nav a {
 display: inline-block;
 margin: 20px auto;
 padding: 0.3em;
}
/* Demo Styles */
.demo-1 body {
 color: #87968e;
 background: #fff2e3;
}
.demo-1 a {
 color: #72b890;
}
.demo-1 .codrops-demos a {
 background: #72b890;
 color: #fff;
}
.demo-2 body {
 color: #fff;
 background: #c05d8e;
}
.demo-2 a {
 color: #d38daf;
}
.demo-2 a:hover, .demo-2 a:active {
 color: #fff;
}
.demo-2 .codrops-demos a {
 background: #883b61;
 color: #fff;
}
.demo-2 .codrops-top a:hover {
 background: rgba(255, 255, 255, 0.3);
 color: #333;
}
.demo-3 body {
 color: #87968e;
 background: #fff2e3;
}
.demo-3 a {
 color: #ea5381;
}
.demo-3 .codrops-demos a {
 background: #ea5381;
 color: #fff;
}
.demo-4 body {
 color: #999;
 background: #fff2e3;
 overflow: hidden;
}
.demo-4 a {
 color: #1baede;
}
.demo-4 a:hover, .demo-4 a:active {
 opacity: 0.6;
}
.demo-4 .codrops-demos a {
 background: #1baede;
 color: #fff;
}
.demo-5 body {
 background: #fffbd6;
}
@media screen and (max-width: 46.0625em) {
 .column {
  width: 100%;
  min-width: auto;
  min-height: auto;
  padding: 1em;
 }
 .column p {
  text-align: left;
  font-size: 1.5em;
 }
 .column:nth-child(2) {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
 .cap {
  font-size: .8em;
  text-align: left;
 }
}
@media screen and (max-width: 25em) {
 .codrops-icon span {
  display: none;
 }
.cp_ipselect select {
 font-size: 1.4em;
}
}
.my-area {
 position: relative;
}
.bb-custom-wrapper {
 position: relative;
 margin: 0 auto 40px;
 text-align: center;
 width: 100%;
}
.bb-custom-wrapper .bb-bookblock {
 box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6);
 width: 100%;
 height: 0;
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
 z-index: 100;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 overflow: hidden;
}
.bb-custom-wrapper .bb-bookblock.jp {
 padding-bottom: 70.707071%;
}
.bb-custom-wrapper .bb-bookblock.thai {
 padding-bottom: 69.4949494949%;
}
.bb-custom-wrapper .bb-bookblock.india {
 padding-bottom: 63.2%;
}
.bb-custom-wrapper .bb-bookblock.indonesia {
 padding-bottom: 63.43%;
}
.bb-custom-wrapper .bb-bookblock {
 padding-bottom: 63.43%;
}
.bb-custom-wrapper .bb-bookblock.cn {
 padding-bottom: 64.797998%;
}
.bb-custom-wrapper .bb-bookblock.cn-trad {
 padding-bottom: 63.88888%;
}
.bb-custom-wrapper .bb-bookblock.korean {
 padding-bottom: 70%;
}
.book-area iframe {
 width: 100%;
}
.bb-custom-wrapper .title {
 font-size: 8.55555vw;
 line-height: 1em;
 margin: .4em 0 .2em;
}
.bb-custom-wrapper .title span {
 font-size: .5em;
 display: block;
 line-height: 1em;
}
.bb-custom-wrapper nav {
 width: 100%;
 height: 30px;
 margin: 1em auto 0;
 z-index: 0;
 text-align: center;
}
.bb-custom-wrapper nav a {
 display: inline-block;
 width: 50px;
 height: 50px;
 text-align: center;
 margin: 3px;
 vertical-align: top;
 font-size: 0;
}
.bb-custom-wrapper nav a svg {
 width: 50px;
 height: 50px;
 fill: #fff;
}
.bb-custom-icon-arrow-left svg, .bb-custom-icon-first svg {
 -webkit-transform: rotate(180deg);
 transform: rotate(180deg);
}
@media screen and (min-width: 1200px) {
 .bb-custom-wrapper .title {
  font-size: 6em;
 }
 .bb-custom-wrapper nav .bb-nav-prev, .bb-custom-wrapper nav .bb-nav-next {
  position: absolute;
  top: 50%;
  margin-top: -45px;
  width: 80px;
  height: 80px;
 }
 .bb-custom-wrapper nav .bb-nav-prev {
  left: -100px;
 }
 .bb-custom-wrapper nav .bb-nav-next {
  right: -100px;
 }
 .bb-custom-wrapper nav .bb-nav-prev svg, .bb-custom-wrapper nav .bb-nav-next svg {
  width: 80px;
  height: 80px;
 }
}
@media screen and (min-width: 980px) {
 .bb-custom-wrapper nav a:hover {
  opacity: 0.6;
 }
}
/* No JS */
.no-js .bb-custom-wrapper {
 height: auto;
}
.no-js .bb-custom-content {
 height: 470px;
}
.sp {
 display: none;
}
@media screen and (max-width : 812px) {
 .sp {
  display: block;
 }
 .pc {
  visibility: hidden;
  display: none !important;
 }
}
/* タイマー */
.view_timer{display:none;}