/*!
 *   swiper css
 * reference: [Swiper 5.1.0](github.com/nolimits4web/swiper)
 * laymicの動作に必要な部分だけ抜粋
 */

:root {
  --swiper-theme-color: #007aff;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

/* Progress */

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-theme-color);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

/* a11y */

.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

/*!
 *   laymic base
 * reference: [ress 2.0.1](github.com/filipelinhares/ress)
 */

.laymic_root {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
}

.laymic_root button {
  cursor: pointer;
  background-color: transparent;
  border-style: none;
  overflow: visible;
  font: inherit;
  margin: 0;
  padding: 0;
  -webkit-appearance: button; /* for iOS */
}

.laymic_root button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.laymic_root svg:not([fill]) {
  fill: currentColor;
}

/*!
 * laymic layout
 */

.laymic_root {
  /*
      javascript側で追加する変数リスト
    * --page-height: 各ページの縦幅
    * --page-width: 各ページの横幅
    * --viewer-padding: 漫画表示周囲の余白ピクセル数
    * --progressbar-width: 進行度バーの幅ピクセル数
    * --js-vh: 正確なvh数字
   */
  /* preference, thumbsでの背景色 */
  --laymic-container-bg-color: #333;
  /* 各場所での半透明黒背景色 */
  --laymic-translucent-bg-color: rgba(0, 0, 0, .7);
  /* 全般的なテキスト色 */
  --laymic-text-color: #fafafa;
  width: 100vw;
  height: calc(1vh * 100);
  height: calc(var(--js-vh, 1vh) * 100);
  position: fixed;
  top: 0;
  left: 0;
  /* rootElの半透明黒背景色は少しだけ濃いめに */
  background: rgba(0, 0, 0, .8);
  transition: opacity .3s, visibility .3s;
  visibility: hidden;
  opacity: 0;
  color: var(--laymic-text-color);
  z-index: 9999;
}

.laymic_root:-webkit-full-screen {
  /* 全画面表示時の背景色 */
  background: #444;
}

.laymic_root:-ms-fullscreen {
  /* 全画面表示時の背景色 */
  background: #444;
}

.laymic_root:fullscreen {
  /* 全画面表示時の背景色 */
  background: #444;
}

.laymic_controller {
  position: relative;
  width: 100%;
  height: 100%;
}

.laymic_controllerTop,
.laymic_controllerBottom {
  position: absolute;
  width: 100%;
  height: 3rem;
  background: var(--laymic-translucent-bg-color);
  left: 0;
  z-index: 20;
  transition: transform .3s;
  /* 親要素のカーソル変化に追従させない */
  cursor: auto;
  /* 子要素のfocus表示をはみ出させないためのpadding */
  padding: 2px 0;
}

.laymic_controllerTop {
  top: 0;
  /* HACK: safari z-index bug対策にtranslate3d使用 */
  transform: translate3d(0, -100%, 0);
  display: flex;
  align-items: center;
  /* 暫定で右寄せ */
  justify-content: flex-end;
}

.laymic_controllerBottom {
  bottom: 0;
  /* HACK: safari z-index bug対策にtranslate3d使用 */
  transform: translate3d(0, 100%, 0);
}

.laymic_progressbar {
  /* #888か#999くらいの配色が良さそう */
  --swiper-pagination-color: rgba(136, 187, 0, .8);
  /* 当たり判定インチキ要素のサイズ
    他操作を阻害しないよう最低限の太さにしておく */
  --collision-padding-size: .5rem;
	width: 100%;
	height: var(--progressbar-width);
  top: 0;
  left: 0;
  z-index: 15;
  /* button同様カーソルをポインターにしておく */
  cursor: pointer;
}

.laymic_root .laymic_progressbar {
  /* 進捗バーの存在をわかりやすくするための背景色 */
  background: rgba(255, 255,255, .1);
}

/* 当たり判定インチキの影響がfocusに出ないようにする */

.laymic_progressbar:focus {
  outline: 0;
}

/* isLTR設定がfalseの際にのみ有効なスタイル */

.laymic_root:not(.laymic_isLTR) .laymic_progressbar .swiper-pagination-progressbar-fill {
  /* プログレスバーが右から左へ流れるようにする */
  transform-origin: right top;
}

/* 縦読み時はプログレスバーを右側配置 */

.laymic_isVertView .laymic_progressbar {
  height: 100%;
  width: var(--progressbar-width);
  left: auto;
  right: 0;
}

/* 進捗バークリック当たり判定をインチキするための透明要素 */

.laymic_progressbar::before {
  content: "";
  height: var(--collision-padding-size);
  /* 通常時は横幅いっぱいまで広がる */
  width: inherit;
  /* 進捗バーの下へと連なるように配置 */
  top: 100%;
  display: block;
  position: absolute;
}

/* 縦読み時の表示調整 */

.laymic_isVertView .laymic_progressbar::before {
  width: var(--collision-padding-size);
  /* 縦読み時は縦幅いっぱいまで広げる */
  height: inherit;
  /* 画面上に貼り付ける */
  top: 0;
  /* 進捗バーの左に寄り添うように配置 */
  right: 100%;
}

.laymic_isVisibleUI .laymic_controllerTop,
.laymic_isVisibleUI .laymic_controllerBottom {
  transform: translateY(0);
}

.swiper-wrapper {
  /* 縦読み時などでの中央寄せ */
  align-items: center;
}

.laymic_controller,
.laymic_slider {
  -webkit-tap-highlight-color: transparent;
}

.laymic_slider,
.laymic_helpWrapper,
.laymic_thumbsWrapper,
.laymic_preferenceWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.laymic_slider {
  width: calc(100% - var(--viewer-padding) * 2);
  /* 100% - 左右余白 - プログレスバー幅 */
  height: calc(100% - var(--viewer-padding) * 2 - var(--progressbar-width));
  max-width: calc(var(--page-width) * 2);
  max-height: var(--page-height);
  /* プログレスバー幅の半分だけ下にずらす */
  top: calc(50% + var(--progressbar-width) / 2);
}

.laymic_isSingleSlide .laymic_slider {
  max-width: var(--page-width);
}

.laymic_isVertView .laymic_slider {
  /* 100% - 左右余白 - プログレスバー幅 */
  width: calc(100% - var(--viewer-padding) * 2 - var(--progressbar-width));
  height: calc(100% - var(--viewer-padding) * 2);
  overflow: visible;
  max-width: inherit;
  /* 横読み時につけた値を通常値で上書き */
  top: 50%;
  /* プログレスバー幅の半分だけ左にずらす */
  left: calc(50% - var(--progressbar-width) / 2);
}

.laymic_slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: var(--page-width);
  max-height: var(--page-height);
}

.laymic_isVertView .laymic_emptySlide {
  display: none;
}

.swiper-slide img,
.laymic_imgThumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.laymic_help,
.laymic_thumbs,
.laymic_preference {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--laymic-translucent-bg-color);
  z-index: 18;
  /* 初期状態では非表示とする */
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility .3s;
}

.laymic_isShowHelp .laymic_help,
.laymic_isShowThumbs .laymic_thumbs,
.laymic_isShowPreference .laymic_preference {
  opacity: 1;
  visibility: visible;
}

/* help */

.laymic_helpWrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}

/* helpWrapper内に直置きされるタッチアイコン */

.laymic_helpWrapper > .icon_touchApp {
	--icon-size: calc(4vmin + 2rem);
  /* 上下余白幅を若干確保して、`.laymic_helpInnerWrapper`を上に押し上げる */
  margin: 2vmin 0;
}

.laymic_helpInnerWrapper {
  background: rgba(0, 0, 0, .5);
  /* フォントサイズはアイコンより少し小さく */
  font-size: calc(3vmin + .2rem);
  /* フォントサイズを起点に余白指定 */
  padding: .5em;
  /* 気持ち上に引き上げておいたほうがなんか良い気がする */
  margin-top: -2vmin;
}

.laymic_helpInnerItem {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.laymic_helpIconWrapper {
  display: flex;
}

.laymic_helpIconWrapper .laymic_svgIcon {
  /* 画面サイズと比例させつつ固定値も混ぜる */
  --icon-size: calc(3vmin + .5rem);
}

.laymic_helpIconLabel {
  margin-left: .5vmin;
}

.laymic_helpChevrons {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 念の為helpInnerWrapperより後ろにしておく */
  z-index: -1;
}

.laymic_isVertView .laymic_helpChevrons {
  width: auto;
  height: 100%;
  flex-direction: column;
}

/* ページ送り方向を示唆するヘルプ要素 */

.laymic_helpChevrons .icon_chevronLeft {
  --icon-size: calc(4vmin + 2rem);
}

.laymic_helpChevrons .icon_chevronLeft.laymic_isReversed {
  transform: rotateY(180deg);
}

/* 縦読み時は二つのchevronを適切に回転させる */

.laymic_isVertView .laymic_helpChevrons .icon_chevronLeft {
  transform: rotate(90deg);
}

.laymic_isVertView .laymic_helpChevrons .icon_chevronLeft.laymic_isReversed {
  transform: rotate(270deg)
}

/* UI内に当該ボタンが表示されていない場合は説明の上でも非表示とする */

.laymic_isUnsupportedFullscreen .laymic_helpFullscreenItem,
.laymic_isMobile .laymic_helpZoomItem {
  display: none;
}

/* thumbs */

.laymic_thumbsWrapper {
  /*
    * --thumb-item-width: サムネイル横幅
    * --thumb-item-height: サムネイル縦幅
    * --thumb-item-gap: サムネイル間の余白
    * --thumbs-wrapper-padding: サムネイルラッパーの余白（側面）
  */
  max-height: 90%;
  max-width: 90%;
  padding: .5rem var(--thumbs-wrapper-padding);
  background: var(--laymic-container-bg-color);
  overflow: auto;
  display: grid;
  grid-gap: var(--thumb-item-gap);
  grid-template-columns: repeat(auto-fit, var(--thumb-item-width));
  grid-auto-rows: var(--thumb-item-height);
  width: 100%;
  justify-content: space-around;
  /* 下方向のpaddingだけ上手く効かないので苦肉の策 */
  border: solid transparent;
  border-width: .5rem 0;
}

/* 優先度を上げるため冗長な書き方を行う */

.laymic_thumbsWrapper .laymic_thumbItem {
  overflow: hidden;
}

/* preference */

.laymic_preferenceWrapper {
  /* 認識性向上のため文字サイズを上げておく */
  --font-size: 1.1rem;
  /* 選択用要素高さ計算のための余白数値 */
  --padding-size: .6rem;
  /* 選択用要素の高さを計算 */
  --item-height: calc(var(--font-size) + var(--padding-size) * 2);
  /* 最低でも確保する子要素横幅 */
  --select-wrapper-min-width: 5.5rem;
  /* 最大横幅は親要素より少し小さめに */
  max-width: 80%;
  /* 最大縦幅も同様 */
  max-height: 80%;
  overflow: auto;
  background: var(--laymic-container-bg-color);
  padding: 1rem;
  z-index: 18;
  /* どの状況でもある程度の横幅は確保 */
  width: 35rem;
  font-size: var(--font-size);
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: .5rem;
}

.laymic_isMobile .laymic_preferenceWrapper {
  /* スマホではアイテム間余白を1remずつに変更 */
  grid-gap: 1rem;
}

.laymic_preferenceButton {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.laymic_preferenceButton,
.laymic_uiButton {
  /* 文字色 + svg配色設定 */
  color: inherit;
}

.laymic_uiButton {
  max-height: 100%;
  max-width: 2.5rem;
  display: flex;
}

/* select button & checkbox button */

.laymic_checkboxIconWrapper {
  display: flex;
  position: relative;
  /* selectWrapperの最小横幅と合わせる */
  flex: 0 0 var(--select-wrapper-min-width);
  justify-content: flex-end;
}

.laymic_checkboxIconWrapper .laymic_svgIcon {
  --icon-size: var(--item-height);
  /* selectWrapper右端とcheckboxIcon右端を合わせるため微調整 */
  margin-right: -2px;
}

.laymic_selectWrapper {
  /* 選択中要素背景色 */
  --highlight-bg-color: royalblue;
  /* 現在値要素背景色 */
  --current-bg-color: #e6e6e6;
  /* 通常要素背景色 */
  --normal-bg-color: #fafafa;
  /* 通常要素文字色 */
  --normal-text-color: #333;
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  min-width: var(--select-wrapper-min-width);
  color: var(--normal-text-color);
}

.laymic_selectCurrentItem {
  padding: var(--padding-size);
  background: var(--current-bg-color);
}

.laymic_selectItem {
  padding: var(--padding-size);
}

.laymic_selectItemWrapper {
  /* 通常時は非表示 */
  display: none;
  background: var(--normal-bg-color);
  position: absolute;
  /* 最小限の高さで上に浮かせる */
  z-index: 1;
  /* currentItemの下に来るように縦位置を調整 */
  top: 100%;
  width: 100%;
}

.laymic_selectItemWrapper[aria-expanded="true"] {
  /* 展開中は表示する */
  display: block;
}

.laymic_selectItem[aria-selected="true"] {
  /* 選択中ハイライト色設定 */
  background: var(--highlight-bg-color);
  color: var(--laymic-text-color);
}

.laymic_checkboxLabel,
.laymic_selectLabel {
  /* 画面幅が狭い際に効果を発揮する右側余白を追加 */
	margin-right: .5rem;
  /* テキストを左寄せにする */
  text-align: left;
}

.laymic_preferenceNotice {
  /* フォントサイズをデフォルトに戻す */
  font-size: 1rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  flex: 1 1 auto;
  /* 上下に余白を付ける */
  padding: .5rem 0;
}

.laymic_preferenceNotice p {
  /* 下向け余白をなくす */
  margin: 1rem 0 0;
}

/* PC画面では非表示する要素 */

.laymic_preferenceIsDisabledTapSlidePage,
.laymic_preferenceIsDisabledForceHorizView,
.laymic_preferenceIsDisabledDoubleTapResetZoom {
  display: none;
}

/* スマホ画面では表示する要素 */

.laymic_isMobile .laymic_preferenceIsDisabledTapSlidePage,
.laymic_isMobile .laymic_preferenceIsDisabledForceHorizView,
.laymic_isMobile .laymic_preferenceIsDisabledDoubleTapResetZoom {
  display: flex;
}

.laymic_pagination {
  /* 通常時は主張控えめなアイコン色 */
  color: rgba(255, 255, 255, .3);
  display: none;
  cursor: auto;
  position: absolute;
  top: calc(50% + var(--progressbar-width) / 2);
  /* 表示位置をページ中央に合わせる */
  transform: translateY(-50%);
  /* .laymic_sliderの上に来るよう配置する */
  z-index: 3;
}

.laymic_root.laymic_isVisiblePagination .laymic_pagination {
  /* ページ送りボタンを表示する設定の際のみ表示 */
  display: flex;
}

.laymic_pagination.laymic_isActive {
  /* ハイライト時には主張強めなアイコン色 */
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
}

.laymic_pagination.laymic_isHidden {
  visibility: hidden;
  opacity: 0;
}

/* 進むボタン */

.laymic_paginationNext,
/* LTR時の戻るボタン */
.laymic_isLTR .laymic_paginationPrev {
  left: 0;
}

/* 戻るボタン */

.laymic_paginationPrev,
/* LTR時の進むボタン */
.laymic_isLTR .laymic_paginationNext {
  right: 0;
  transform: translateY(-50%) rotate(180deg);
}

/* 縦読み時戻る進むボタン */

.laymic_isVertView .laymic_paginationNext,
.laymic_isVertView .laymic_paginationPrev {
  left: calc(50% + var(--progressbar-width) / 2);
  /* top値を一旦初期値に戻す */
  top: auto;
  margin: 0;
}

.laymic_isVertView .laymic_paginationNext {
	bottom: 0;
  /* ページ中央に位置調整し、下向きにする */
  transform: translateX(-50%) rotate(-90deg);
}

.laymic_isVertView .laymic_paginationPrev {
	top: 0;
  /* ページ中央に位置調整し、上向きにする */
  transform: translateX(-50%) rotate(90deg);
}

/* for mobile and zooming */

.laymic_isMobile .laymic_pagination,
.laymic_isZoomed .laymic_pagination {
  /* モバイル環境ではクリックイベントを透過するように */
  pointer-events: none;
  /* モバイル環境ではアイコンハイライト色をオフにする */
  color: rgba(255, 255, 255, .3);
}

/* for unsupported fullscreen api  */

.laymic_isUnsupportedFullscreen .laymic_fullscreen,
.laymic_isUnsupportedFullscreen .laymic_preferenceIsAutoFullscreen,
.laymic_isUnsupportedFullscreen .laymic_preferenceIsDisabledDoubleTapResetZoom {
  display: none;
}

/* zoom */

.laymic_zoomWrapper {
  width: 100%;
  height: 100%;
  /* 左上基準前提で処理を書いたので
  この値を変えると表示崩れするはず */
  transform-origin: top left;
}

.laymic_zoomController {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  /* 非ズーム時は裏側に隠す */
  z-index: -1;
}

.laymic_isZoomed .laymic_zoomController {
  /* 他要素より前にせりでて操作を妨害する */
  z-index: 20;
}

/* disable zoom button for mobile  */

.laymic_isMobile .laymic_zoom,
.laymic_isMobile .laymic_preferenceZoomButtonRatio {
  display: none;
}

/* laymic template */

.laymic_template {
  /* 中身だけ取り出すので表示する必要はない */
  display: none;
}

/* icons */

.laymic_svgIcon {
  --icon-size: 3rem;
  height: var(--icon-size);
  width: var(--icon-size);
}

.icon_checkboxInner {
  /* checkboxOuter要素と重ねる */
  position: absolute;
  right: 0;
  top: 0
}

.laymic_root .icon_horizView,
.laymic_root .icon_exitFullscreen,
.laymic_root .icon_checkboxInner,
.laymic_isVertView .icon_vertView,
.laymic_isFullscreen .icon_fullscreen {
  display: none;
}

.laymic_isVertView .icon_horizView,
.laymic_isFullscreen .icon_exitFullscreen,
.laymic_preferenceButton[aria-checked="true"] .icon_checkboxInner {
  display: block;
}

/*
  helpでのページ送り方向アイコン
  縦読みモードでは90度回転させる
*/

.laymic_isVertView .icon_viewerDirection {
  transform: rotate(90deg);
}



button.laymic_opener 		 {transition: all .3s;}
button.laymic_opener:hover   {text-decoration:none !important; filter:alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}
button.laymic_opener:focus   {text-decoration:none !important; ffilter:alpha(opacity=100); -moz-opacity:1; opacity:1; outline: none;}