@charset "Shift_JIS";

#read #wrap #title {
  width: 97vw;
  margin: 0 auto;
  text-align: right;
  font-size: 200%;
   font-weight: bold;
  background-color: #000;
  color: #fff;
  padding: 2em 3vw 0 0;
}

#book_area {
  display: block;
  width: 100%;
  height: calc( 100vw / 7 * 3 + 15em );
  max-height:100vh;
  overflow: hidden;
  background: #000000;
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1) 10%, rgba(70, 70, 70, 1) 30%, rgba(70, 70, 70, 1) 70%, rgba(0, 0, 0, 1) 90%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 1) 10%, rgba(70, 70, 70, 1) 30%, rgba(70, 70, 70, 1) 70%, rgba(0, 0, 0, 1) 90%);
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 10%, rgba(70, 70, 70, 1) 30%, rgba(70, 70, 70, 1) 70%, rgba(0, 0, 0, 1) 90%);
  margin: 0em 0 6em;
}

.book_base,
.swiper-slide {
  display: block;
  aspect-ratio: 7 / 3;
  background-color: #fff;
  height: calc( 94vw / 7 * 3 );
  margin: 0 auto 0;
  overflow: hidden;
}

.picture_area {
  display: block;
  float: left;
  height: calc( 94vw / 7 * 3 );
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
}

.sentence_area {
  display: block;
  float: right;
  height: calc( 94vw / 7 * 3 );
  aspect-ratio: 3 / 3;
  overflow: hidden;
  /* background-color: azure; */
  position: relative;
}

.vertical_text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  right: 0;
  position: absolute;
  text-align: left;
  font-size: calc(( 94vw / 7 * 3 ) / 38 );
  line-height: 2em;
  padding: 2em 1em;
  /* -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all; */
  right: calc( 50% - 1em );
  transform: translateX(50%);
}


.page000 .picture_area {
  display: block;
  float: left;
  height: calc( 94vw / 7 * 2.4 );
  margin: calc( 94vw / 7 * 0.3 )  0 0 6vw;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
}

.front_cover_title {
  display: block;
  font-weight: bold;
  font-size: 200%;
  margin-left: 1em;
  margin-top: 2em;
}
.front_cover_sentence {
  display: inline-block;
  margin-top: 8em;
}
.front_cover_picture {
  display: inline-block;
  margin-top: 2em;
}


/* Swiper ---------------------------------------------------------------- */

.swiper-container {
  display: block;
  width: 94vw;
  max-height:  calc( 94vw / 7 * 3 );
  height:  calc( 94vw / 7 * 3 );
  margin: 5em auto 10em;
}

.swiper-wrapper,
.swiper-slide {
  display: block;
  width: 94vw;
  max-height:  calc( 94vw / 7 * 3 );
  height:  calc( 94vw / 7 * 3 );
}

.swiper-pagination {
  z-index: 9999;
}

/* Swipe 次へ前へ -------------------------------------------------------------- */

.swiper-button-next,.swiper-button-prev{
  /*
  position:absolute;
  top:var(--swiper-navigation-top-offset,50%);
  width:calc(var(--swiper-navigation-size)/ 44 * 27);
  height:var(--swiper-navigation-size);
  margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));
  z-index:10;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--swiper-navigation-color,var(--swiper-theme-color));
  */
  position: absolute;
  display: flex;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled{
  opacity:.35;
  cursor:auto;
  pointer-events:none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden{
  opacity:0;
  cursor:auto;
  pointer-events:none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev{
  display:none!important
}

.swiper-button-next svg,
.swiper-button-prev svg{
  width:100%;
  height:100%;
  object-fit:contain;
  transform-origin:center
}
.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg{
  transform:rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next{
  left:var(--swiper-navigation-sides-offset,10px);
  right:auto
    
  left: -26vw;
  transform: translateX(26vw);
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev{
  right:var(--swiper-navigation-sides-offset,10px);
  left:auto
    
  right: 20vw;
  transform: translateX(-20vw);
}
.swiper-button-lock{
  display:none
}
.swiper-button-next:after,
.swiper-button-prev:after{
  font-family:swiper-icons;
  font-size:var(--swiper-navigation-size);
  text-transform:none!important;
  letter-spacing:0;
  font-variant:initial;
  line-height:1
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after{
  content:'prev'
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev{
  right:var(--swiper-navigation-sides-offset,10px);
  left:auto
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after{
  content:'next'
}




/* -------------------------------------------------------------------- */
/* スライド矢印のカスタマイズ */
/* -------------------------------------------------------------------- */

/* 矢印画像の高さと幅 */
.swiper-button-prev,
.swiper-button-next {
  width: 10vw;
  height: 5vw;
  margin-top: 2em;
}
/* 矢印を消して画像に変更する */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  width: 10vw;
  height: 5vw;
  margin: auto;
}
/* 前に戻る矢印の画像パスと表示位置 */
.swiper-button-prev::after {
  background-image: url(../img/bottun_back.png);
  left: -3vw;
  transform: translateX(3vw);
}
/* 次に進む矢印の画像パスと表示位置 */
.swiper-button-next::after {
  background-image: url(../img/bottun_next.png);
  right: 3vw;
  transform: translateX(-3vw);
}

..swiper-pagination-bullet {
  background: #ddd;
}



.end_declaration {
  font-size: 600%;
  font-weight: bold;
  margin-top: 14vw;
}
.swiper .swiper-wrapper .swiper-slide .page_lust img {
  width: 16vw;
  height: auto;
  margin: 8vw auto 4vw;
}

.swiper .swiper-wrapper .swiper-slide .page_lust .front_cover_title {
    display: block;
    font-weight: bold;
    font-size: 260%;
    margin-top: 6vw;
}

.swiper .swiper-wrapper .swiper-slide .page_lust .front_cover_sentence,
.swiper .swiper-wrapper .swiper-slide .page_lust .front_cover_picture {
    display: inline-block;
    margin-top: 1em;
    font-size: 200%;
}


/*------パンくず-----------------------------*/

#breadcrumb           { font-size: 100%; margin: 2em; }
#breadcrumb    { color:#63635e; font-size:150%; font-weight: bold; }

#breadcrumb a         { color: #666; font-weight: normal; }
#breadcrumb a:hover   { color:#e55058; }
#breadcrumb ol        { display:block; width: 1150px; height:1.6em; margin: 1.2em auto 0.3em; }
#breadcrumb ol li {
	/* liを横並び＆ブレットを消す */
	display: inline;
	list-style-type: none;
}
#breadcrumb ol li:before {
        /* liの前に記号追加 */
        content: " ｜ ";
}

#breadcrumb ol li:first-child:before {
        /* 最初のliだけcontentを消す */
        content:"";
}

#breadcrumb .container { background:url(../img/border_shadow.png) no-repeat bottom left; background-size:contain; }




/*-----パンくず end---------------------------*/