/* Swipeshow
 * http://ricostacruz.com/swipeshow
 * https://github.com/rstacruz/swipeshow
 *
 * Load this stylesheet when using jquery.swipeshow.js.
 *
 * This provides no styles or embelishments: just basic resets. For a sample
 * theme, also try:
 *
 *     http://ricostacruz.com/swipeshow/slideshow-theme.css
 *
 */

.wrapper{ display:block; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word; }
.wrapper_mobile{ display:none; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word; }
.wrapper *{transition:all 0.5s ease-in-out;}
.swipeshow,.swipeshow .slides,.swipeshow .slide {
  /* Basic resets */
  display: block; margin: 0; padding: 0; list-style: none; position: relative;
  /* Prevent flickers */
  -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
  /* In case you add padding */
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
}
/* iOS: disable text select, disable callout, image save panel (popup) */
.swipeshow img { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.swipeshow { overflow: hidden; }
/* Cursor (open-hand) */
.swipeshow-active .slides { cursor: -moz-grab !important; cursor: ew-resize; }
/* Cursor (closed-hand) */
html.swipeshow-grabbed, html.swipeshow-grabbed * { cursor: -moz-grabbing !important; cursor: ew-resize; }
/* Positioning */
.swipeshow .slides,.swipeshow .slide { position: absolute; top: 0; width: 100%; height: 145%; }
/* First slide should be visible by default */
.swipeshow .slide { visibility: hidden; }
.swipeshow .slide:first-child { visibility: visible; }
.slideshow { margin: 0 auto; width: 100%; height: auto; padding-top:26%; }

@media only screen and (max-width: 730px) {
  .wrapper_mobile{display:block;}
  .wrapper{display:none;}
  .slideshow {padding-top:61%;}/*  モバイル版高さ指定*/
}
.slides img { margin:0 auto; width: 100%; height: auto;/*  max-width: 1000px;*/ }
.slideshow .next,
.slideshow .previous { border: 0; padding: 0; margin: 0; background-color: rgba(0, 0, 0, 0.0); cursor: pointer;
 position: absolute; width: 40px; height: 100%; text-align: center; outline: none; top: 0;
 color: white; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 font-size: 18pt; opacity: 0;
 -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear;  -o-transition: opacity 300ms linear;  transition: opacity 300ms linear;}
.slideshow.no-touch:hover .next,
.slideshow.no-touch:hover .previous { opacity: 1; transition: none; }
.slideshow .next:hover,
.slideshow .previous:hover { background-color: rgba(0, 0, 0, 0.2); }
.slideshow .next:active,
.slideshow .previous:active { background-color: rgba(0, 0, 0, 0.4); }
.slideshow .previous { left: 0; }
.slideshow .next { right: 0; }
.slideshow .previous:before { content: '\2039'; }
.slideshow .next:before { content: '\203a'; }
.slideshow .dots,
.slideshow .dot-item,
.slideshow .dot { margin: 0;  padding: 0;  list-style: none; outline: none; border: 0; background: transparent; }
.slideshow .dots { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; list-style: none;  font-size: 0; }
.slideshow .dot-item { list-style: none; display: inline-block; width: 18px; height: 20px; line-height: 20px; text-align: center; cursor: pointer; opacity: 0.8; }
.slideshow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 3px; font-size: 0; border: solid 1px rgba(255, 255, 255, 0.8); box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.5);}
.no-touch .dot-item:hover .dot { background-color: rgba(255, 255, 255, 0.2); }
.slideshow .dot-item:active .dot,
.slideshow .dot-item.active .dot { background-color: white;}
/* Super slide */
.with-overlay { position: relative;}
.with-overlay img,
.with-overlay .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.with-overlay img { z-index: 1; }
.with-overlay .overlay { z-index: 2; background: rgba(0, 10, 60, 0.75); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.3); text-align: center; }
.with-overlay .in { display: inline-block; vertical-align: middle; }
.with-overlay a.action { display: inline-block; padding: 10px 20px; border: solid 2px #ddd; text-transform: uppercase; font-weight: bold; color: white; border-radius: 5px; }
@media only screen and (min-width: 730px) {
.slideshow { margin: 0 auto; width: 100%; height: auto; padding-top:61.5%; max-width:650px; max-height:500px; }/*PC高さ指定*/
.slides img { margin: 0 auto; width: 100%; height: auto;/*  max-width: 1000px;*/ }
}