/ *！Dmitry SemenovによるPhotoSwipeメインCSS | photoswipe.com | MITライセンス* /
/ *
	基本的なPhotoSwipe機能のスタイル（スライド領域、開閉の切り替え）
* /
/ * pswp = photoswipe * /
.pswp {
  表示：なし。
  位置：絶対;
  幅：100％;
  高さ：100％;
  左：0;
  上：0;
  オーバーフロー：非表示。
  -ms-touch-action：なし。
  タッチアクション：なし。
  z-index：1500;
  -webkit-text-size-adjust：100％;
  / * webkit / blinkのwindow.onscrollへのペイントを避けるために、別のレイヤーを作成します* /
  -webkit-backface-visibility：隠し;
  概要：なし。}
  .pswp * {
    -webkit-box-sizing：border-box;
            ボックスサイズ：ボーダーボックス; }
  .pswp img {
    max-width：なし。}

/ * JSオプションshowHideOpacityがtrueに設定されている場合、スタイルが追加されます* /
.pswp--animate_opacity {
  / *不透明度0はペイントアクションをトリガーせず、遷移の開始時に遅延を引き起こすため、0.001 * /
  不透明度：0.001;
  変更予定：不透明度。
  / *オープン/クローズ遷移の場合* /
  -webkit-transition：不透明度333ms cubic-bezier（0.4、0、0.22、1）;
          トランジション：不透明度333ms立方ベジエ（0.4、0、0.22、1）; }

.pswp--open {
  表示ブロック; }

.pswp--ズーム許可.pswp__img {
  / *オートプレフィックス：オフ* /
  カーソル：-webkit-zoom-in;
  カーソル：-moz-zoom-in;
  カーソル：ズームイン; }

.pswp--ズームインされた.pswp__img {
  / *オートプレフィックス：オフ* /
  カーソル：-webkit-grab;
  カーソル：-moz-grab;
  カーソル：グラブ; }

.pswp-- .pswp__imgをドラッグする{
  / *オートプレフィックス：オフ* /
  カーソル：-webkit-grabbing;
  カーソル：-moz-grabbing;
  カーソル：つかむ; }

/ *
	背景は別の要素として追加されます。
	不透明度のアニメーションは、rgba（）background-colorのアニメーションよりもはるかに高速です。
* /
.pswp__bg {
  位置：絶対;
  左：0;
  上：0;
  幅：100％;
  高さ：100％;
  背景：＃000;
  不透明度：0;
  -webkit-backface-visibility：隠し;
  変更予定：不透明度。}

.pswp__scroll-wrap {
  位置：絶対;
  左：0;
  上：0;
  幅：100％;
  高さ：100％;
  オーバーフロー：非表示。}

.pswp__container、
.pswp__zoom-wrap {
  -ms-touch-action：なし。
  タッチアクション：なし。
  位置：絶対;
  左：0;
  右：0;
  上：0;
  下：0; }

/ *選択を禁止し、ハイライトをタップします* /
.pswp__container、
.pswp__img {
  -webkit-user-select：なし。
  -moz-user-select：なし。
  -ms-user-select：なし。
      ユーザー選択：なし。
  -webkit-tap-highlight-color：透明;
  -webkit-touch-callout：none; }

.pswp__zoom-wrap {
  位置：絶対;
  幅：100％;
  -webkit-transform-origin：左上;
  -ms-transform-origin：左上。
  変換元：左上;
  / *オープン/クローズ遷移の場合* /
  -webkit-transition：-webkit-transform 333ms cubic-bezier（0.4、0、0.22、1）;
          トランジション：333ms cubic-bezier（0.4、0、0.22、1）; }

.pswp__bg {
  変更予定：不透明度。
  / *オープン/クローズ遷移の場合* /
  -webkit-transition：不透明度333ms cubic-bezier（0.4、0、0.22、1）;
          トランジション：不透明度333ms立方ベジエ（0.4、0、0.22、1）; }

.pswp--アニメーション化された.pswp__bg、
.pswp--animated-in .pswp__zoom-wrap {
  -webkit-transition：なし。
  遷移：なし。}

.pswp__container、
.pswp__zoom-wrap {
  -webkit-backface-visibility：隠し;
  変更予定：変換。}

.pswp__item {
  位置：絶対;
  左：0;
  右：0;
  上：0;
  下：0;
  オーバーフロー：非表示。}

.pswp__img {
  位置：絶対;
  幅：自動;
  高さ：自動;
  上：0;
  左：0; }

/ *
	引き伸ばされたサムネイルまたはdivプレースホルダー要素（下記参照）
	レイヤーが重なるときにwebkit / blinkでちらつきを避けるためにスタイルが追加されました
* /
.pswp__img--placeholder {
  -webkit-backface-visibility：隠し; }

/ *
	大きな画像のサイズに一致するdiv要素
	その上に大きな画像がロードされます
* /
.pswp__img--placeholder--blank {
  背景：＃222; }

.pswp--ie .pswp__img {
  幅：100％！重要;
  高さ：自動！重要;
  左：0;
  上：0; }

/ *
	画像が読み込まれていないときにエラーメッセージが表示される
	（JSオプションerrorMsgはマークアップを制御します）
* /
.pswp__error-msg {
  位置：絶対;
  左：0;
  上：50％;
  幅：100％;
  text-align：中央;
  font-size：14px;
  line-height：16px;
  margin-top：-8px;
  色：#CCC; }

.pswp__error-msg a {
    色：#CCC;
    テキスト装飾：下線; }

/ *！Dmitry SemenovによるPhotoSwipeデフォルトUI CSS | photoswipe.com | MITライセンス* /
/ *

	目次：

	1.ボタン
	2.モーダルとリンクを共有する
	3.インデックスインジケーター（「1 of X」カウンター）
	4.キャプション
	5.ローディングインジケーター
	6.追加のスタイル（ルート要素、トップバー、アイドル状態、非表示状態など）

* /
/ *
	
	1.ボタン

 * /
/ * <ボタン> cssリセット* /
.pswp__button {
  幅：44px;
  高さ：44px;
  位置：相対;
  背景：なし。
  カーソル：ポインタ;
  オーバーフロー：表示;
  -webkit-appearance：なし。
  表示ブロック;
  ボーダー：0;
  パディング：0;
  マージン：0;
  float：右;
  不透明度：0.75;
  -webkit-transition：不透明度0.2秒。
          トランジション：不透明度0.2s;
  -webkit-box-shadow：なし。
          ボックスシャドウ：なし。}
  .pswp__button：focus、
  .pswp__button：hover {
    不透明度：1; }
  .pswp__button：active {
    概要：なし。
    不透明度：0.9; }
  .pswp__button ::-moz-focus-inner {
    パディング：0;
    ボーダー：0; }

/ * pswp__ui--over-closeクラスは、ギャラリーを閉じる必要のある要素の上にマウスが置かれたときに追加されます* /
.pswp__ui--over-close .pswp__button--close {
  不透明度：1; }

.pswp__button、
.pswp__button--arrow--left：before、
.pswp__button--arrow--right：before {
  background：url（skin / default-skin.png）0 0 no-repeat;
  background-size：264px 88px;
  幅：44px;
  高さ：44px; }

@media（-webkit-min-device-pixel-ratio：1.1）、（-webkit-min-device-pixel-ratio：1.09375）、（min-resolution：105dpi）、（min-resolution：1.1dppx）{
  / *ブラウザがSVGをサポートし、解像度が105dpiを超える場合はSVGスプライトを提供* /
  .pswp--svg .pswp__button、
  .pswp--svg .pswp__button--arrow--left：before、
  .pswp--svg .pswp__button--arrow--right：before {
    background-image：url（skin / default-skin.svg）; }
  .pswp--svg .pswp__button--arrow--left、
  .pswp--svg .pswp__button--arrow--right {
    背景：なし。}}

.pswp__button--閉じる{
  background-position：0 -44px; }

.pswp__button--共有{
  background-position：-44px -44px; }

.pswp__button--fs {
  表示：なし。}

.pswp--supports-fs .pswp__button--fs {
  表示ブロック; }

.pswp--fs .pswp__button--fs {
  background-position：-44px 0; }

.pswp__button--zoom {
  表示：なし。
  background-position：-88px 0; }

.pswp--zoom-allowed .pswp__button--zoom {
  表示ブロック; }

.pswp--zoomed-in .pswp__button--zoom {
  background-position：-132px 0; }

/ *タッチスクリーンに矢印なし* /
.pswp--touch .pswp__button--arrow--left、
.pswp--touch .pswp__button--arrow--right {
  可視性：非表示; }

/ *
	矢印ボタンのヒット領域
	（アイコンは：before疑似要素に追加されます）
* /
.pswp__button--arrow--left、
.pswp__button--arrow--right {
  背景：なし。
  上：50％;
  margin-top：-50px;
  幅：70px;
  高さ：100px;
  位置：絶対; }

.pswp__button--arrow--left {
  左：0; }

.pswp__button--arrow--right {
  右：0; }

.pswp__button--arrow--left：before、
.pswp__button--arrow--right：before {
  コンテンツ： '';
  top：35px;
  背景色：rgba（0、0、0、0.3）;
  高さ：30px;
  幅：32px;
  位置：絶対; }

.pswp__button--arrow--left：before {
  左：6px;
  background-position：-138px -44px; }

.pswp__button--arrow--right：before {
  右：6px;
  background-position：-94px -44px; }

/ *

	2.モーダル/ポップアップとリンクを共有する

 * /
.pswp__counter、
.pswp__share-modal {
  -webkit-user-select：なし。
  -moz-user-select：なし。
  -ms-user-select：なし。
      ユーザー選択：なし。}

.pswp__share-modal {
  表示ブロック;
  背景：rgba（0、0、0、0.5）;
  幅：100％;
  高さ：100％;
  上：0;
  左：0;
  パディング：10px;
  位置：絶対;
  z-index：1600;
  不透明度：0;
  -webkit-transition：不透明度0.25秒の緩和。
          トランジション：不透明度0.25秒のイーズアウト。
  -webkit-backface-visibility：隠し;
  変更予定：不透明度。}

.pswp__share-modal--hidden {
  表示：なし。}

.pswp__share-tooltip {
  z-index：1620;
  位置：絶対;
  背景：#FFF;
  top：56px;
  border-radius：2px;
  表示ブロック;
  幅：自動;
  右：44px;
  -webkit-box-shadow：0 2px 5px rgba（0、0、0、0.25）;
          ボックスシャドウ：0 2px 5px rgba（0、0、0、0.25）;
  -webkit-transform：translateY（6px）;
      -ms-transform：translateY（6px）;
          変換：translateY（6px）;
  -webkit-transition：-webkit-transform 0.25s;
          トランジション：0.25秒の変換。
  -webkit-backface-visibility：隠し;
  変更予定：変換。}
  .pswp__share-tooltip a {
    表示ブロック;
    パディング：8px 12px;
    色：＃000;
    text-decoration：なし。
    font-size：14px;
    line-height：18px; }
    .pswp__share-tooltip a：hover {
      text-decoration：なし。
      色：＃000; }
    .pswp__share-tooltip a：first-child {
      / *最初/最後のリストアイテムの角を丸める* /
      border-radius：2px 2px 0 0; }
    .pswp__share-tooltip a：last-child {
      border-radius：0 0 2px 2px; }

.pswp__share-modal--fade-in {
  不透明度：1; }
  .pswp__share-modal--fade-in .pswp__share-tooltip {
    -webkit-transform：translateY（0）;
        -ms-transform：translateY（0）;
            変換：translateY（0）; }

/ *タッチデバイスの共有リンクのサイズを大きくします* /
.pswp--touch .pswp__share-tooltip a {
  パディング：16px 12px; }

a.pswp__share--facebook：before {
  コンテンツ： '';
  表示ブロック;
  幅：0;
  高さ：0;
  位置：絶対;
  上：-12px;
  右：15px;
  ボーダー：透明な6ピクセル;
  border-bottom-color：#FFF;
  -webkit-pointer-events：なし。
  -moz-pointer-events：なし。
  ポインターイベント：なし。}

a.pswp__share--facebook：hover {
  背景：＃3E5C9A;
  色：#FFF; }
  a.pswp__share--facebook：hover：before {
    border-bottom-color：＃3E5C9A; }

a.pswp__share--twitter：hover {
  背景：＃55ACEE;
  色：#FFF; }

a.pswp__share--pinterest：hover {
  背景：#CCC;
  色：＃CE272D; }

a.pswp__share--download：hover {
  背景：#DDD; }

/ *

	3.インデックスインジケーター（「1 of X」カウンター）

 * /
.pswp__counter {
  位置：絶対;
  左：0;
  上：0;
  高さ：44px;
  font-size：13px;
  line-height：44px;
  色：#FFF;
  不透明度：0.75;
  パディング：0 10px; }

/ *
	
	4.キャプション

 * /
.pswp__caption {
  位置：絶対;
  左：0;
  下：0;
  幅：100％;
  min-height：44px; }
  .pswp__caption small {
    font-size：11px;
    色：#BBB; }

.pswp__caption__center {
  text-align：左;
  最大幅：420px;
  マージン：0自動;
  font-size：13px;
  パディング：10px;
  line-height：20px;
  色：#CCC; }

.pswp__caption--empty {
  表示：なし。}

/ *次/前の画像の高さを計算するために使用される偽のキャプション要素* /
.pswp__caption--fake {
  可視性：非表示; }

/ *

	5.ローディングインジケーター（プリローダー）

	ここでプレイできます-http://codepen.io/dimsemenov/pen/yyBWoR

 * /
.pswp__preloader {
  幅：44px;
  高さ：44px;
  位置：絶対;
  上：0;
  左：50％;
  margin-left：-22px;
  不透明度：0;
  -webkit-transition：不透明度0.25秒の緩和。
          トランジション：不透明度0.25秒のイーズアウト。
  変更予定：不透明度。
  方向：ltr; }

.pswp__preloader__icn {
  幅：20px;
  高さ：20px;
  マージン：12px; }

.pswp__preloader--active {
  不透明度：1; }
  .pswp__preloader--active .pswp__preloader__icn {
    / * CSSアニメーションをサポートしないブラウザでは.gifを使用します* /
    背景：url（skin / preloader.gif）0 0繰り返しなし; }

.pswp--css_animation .pswp__preloader--active {
  不透明度：1; }
  .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    -webkit-animation：時計回りに500ミリ秒の線形無限大。
            アニメーション：時計回りに500ミリ秒の線形無限大。}
  .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    -webkit-animation：1000ms cubic-bezier（0.4、0、0.22、1）無限のドーナツ回転;
            アニメーション：ドーナツ回転1000ms立方ベジエ（0.4、0、0.22、1）無限; }

.pswp--css_animation .pswp__preloader__icn {
  背景：なし。
  不透明度：0.75;
  幅：14px;
  高さ：14px;
  位置：絶対;
  左：15px;
  top：15px;
  マージン：0; }

.pswp--css_animation .pswp__preloader__cut {
  / * 
			内側の円をアニメーション化するアイデアは、ポリマー（「材料」）のローディングインジケーターに基づいています。 
			 キアヌ・リーhttps://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		* /
  位置：相対;
  幅：7px;
  高さ：14px;
  オーバーフロー：非表示。}

.pswp--css_animation .pswp__preloader__donut {
  -webkit-box-sizing：border-box;
          ボックスサイズ：ボーダーボックス;
  幅：14px;
  高さ：14px;
  ボーダー：2pxソリッド#FFF;
  border-radius：50％;
  border-left-color：透明;
  border-bottom-color：透明;
  位置：絶対;
  上：0;
  左：0;
  背景：なし。
  マージン：0; }

@media screen and（max-width：1024px）{
  .pswp__preloader {
    位置：相対;
    左：自動;
    上：自動;
    マージン：0;
    float：右; }}

@ -webkit-keyframes時計回り{
  0％{
    -webkit-transform：rotate（0deg）;
            変換：回転（0度）; }
  100％{
    -webkit-transform：rotate（360deg）;
            変換：回転（360度）; }}

@keyframes時計回り{
  0％{
    -webkit-transform：rotate（0deg）;
            変換：回転（0度）; }
  100％{
    -webkit-transform：rotate（360deg）;
            変換：回転（360度）; }}

@ -webkit-keyframes donut-rotate {
  0％{
    -webkit-transform：rotate（0）;
            変換：rotate（0）; }
  50％{
    -webkit-transform：rotate（-140deg）;
            変換：回転（-140deg）; }
  100％{
    -webkit-transform：rotate（0）;
            変換：rotate（0）; }}

@keyframes donut-rotate {
  0％{
    -webkit-transform：rotate（0）;
            変換：rotate（0）; }
  50％{
    -webkit-transform：rotate（-140deg）;
            変換：回転（-140deg）; }
  100％{
    -webkit-transform：rotate（0）;
            変換：rotate（0）; }}

/ *
	
	6.追加のスタイル

 * /
/ * UIのルート要素* /
.pswp__ui {
  -webkit-font-smoothing：auto;
  可視性：可視;
  不透明度：1;
  z-index：1550; }

/ *ボタンと「Xの1」インジケーターがある上部の黒いバー* /
.pswp__top-bar {
  位置：絶対;
  左：0;
  上：0;
  高さ：44px;
  幅：100％; }

.pswp__caption、
.pswp__top-bar、
.pswp--has_mouse .pswp__button--arrow--left、
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility：隠し;
  変更予定：不透明度。
  -webkit-transition：不透明度333ms cubic-bezier（0.4、0、0.22、1）;
          トランジション：不透明度333ms立方ベジエ（0.4、0、0.22、1）; }

/ * pswp--has_mouseクラスは、後続の2つのマウスムーブイベントが発生したときにのみ追加されます* /
.pswp--has_mouse .pswp__button--arrow--left、
.pswp--has_mouse .pswp__button--arrow--right {
  可視性：可視; }

.pswp__top-bar、
.pswp__caption {
  背景色：rgba（0、0、0、0.5）; }

/ * pswp__ui--fitクラスは、メイン画像がトップバーとボトムバー（キャプション）の間に「はまる」ときに追加されます* /
.pswp__ui-。pswp__top-barに適合し、
.pswp__ui--fit .pswp__caption {
  背景色：rgba（0、0、0、0.3）; }

/ * pswp__ui--マウスが数秒間動かないときにアイドルクラスが追加されます（JSオプションtimeToIdle）* /
.pswp__ui--idle .pswp__top-bar {
  不透明度：0; }

.pswp__ui--idle .pswp__button--arrow--left、
.pswp__ui--idle .pswp__button--arrow--right {
  不透明度：0; }

/ *
	pswp__ui--コントロールが非表示のときに非表示クラスが追加されます
	たとえば、ユーザーがタップしてコントロールの表示を切り替えたとき
* /
.pswp__ui--非表示の.pswp__top-bar、
.pswp__ui--非表示の.pswp__caption、
.pswp__ui--hidden .pswp__button--arrow--left、
.pswp__ui--hidden .pswp__button--arrow--right {
  / *強制的にペイントして、コントロールの構成レイヤーを作成します。* /
  不透明度：0.001; }

/ * pswp__ui--ギャラリーにアイテムが1つしかない場合、one-slideクラスが追加されます* /
.pswp__ui--one-slide .pswp__button--arrow--left、
.pswp__ui--one-slide .pswp__button--arrow--right、
.pswp__ui--ワンスライド.pswp__counter {
  表示：なし。}

.pswp__element--disabled {
  表示：なし！重要; }

.pswp--minimal--dark .pswp__top-bar {
  背景：なし。}