@charset "utf-8";
@import url("/ssi/css/swiper-bundle.css");

/* スライドショー機能のためのCSS変数再定義 */
.slideshow_detail{
	--swiper-theme-color: #000;                          /* ドットの色 */
	--swiper-pagination-bullet-size: 10px;                 /*  */
	--swiper-pagination-bullet-width: 5px;                 /* ナビゲーションのサイズ：幅 */
	--swiper-pagination-bullet-height: 5px;                /* ナビゲーションのサイズ：高さ */
	--swiper-pagination-bullet-inactive-color: #000;     /* ナビゲーションの色：アクティブではないドット */
	--swiper-pagination-bullet-inactive-opacity: 0.2;      /* ナビゲーションの透明度：アクティブではないドット */
	--swiper-pagination-bullet-opacity: 1;                 /* ナビゲーションの透明度：アクティブではないドット */
	--swiper-pagination-bullet-horizontal-gap: 10px;       /* ナビゲーション同士の間隔：横 */
	--swiper-pagination-bullet-vertical-gap: 10px;         /* ナビゲーション同士の間隔：縦 */
}

/* スライドショー機能の停止再生ボタン非表示 */
.slideshow_detail :is(.swiper-button-stop,.swiper-button-start) {
	/* display: none !important; */
}
/* 背景色変更時対応 */
.color_change .slideshow_detail .swiper-pagination-bullet{
	-webkit-filter: invert(1);
	        filter: invert(1);
}



#main_body div.detail_slideshow {
	clear: both;
	width: 100%;
	margin: 0px 0px 30px;
	padding: 0px;
}

div.detail_slideshow {
	position: relative;
}

.swiper-container {
	overflow: hidden;
	position: relative;
}

.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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	color: var(--swiper-navigation-color,var(--swiper-theme-color))
}

.swiper-pagination {
	position: relative;
	text-align: center;
	-webkit-transition: .3s opacity;
	-o-transition: .3s opacity;
	transition: .3s opacity;
	-webkit-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);
	z-index: 10;
	margin-top: 10px;
}

.swiper-pagination-progressbar {
	background: var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));
	position: relative;
}

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

.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal {
	position: relative;
	left: var(--swiper-scrollbar-sides-offset,1%);
	bottom: var(--swiper-scrollbar-bottom,4px);
	top: var(--swiper-scrollbar-top,auto);
	z-index: 50;
	height: var(--swiper-scrollbar-size,4px);
	width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar {
	position: relative;
	left: var(--swiper-scrollbar-left,auto);
	right: var(--swiper-scrollbar-right,4px);
	top: var(--swiper-scrollbar-sides-offset,1%);
	z-index: 50;
	width: var(--swiper-scrollbar-size,4px);
	height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))
}

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



button[class*="swiper-button-"]{
	/* background-color: transparent; */
	border: none;
}

/* 停止再生 */

button.swiper-button-prev,button.swiper-button-next{
	border-radius: 50%;
	width: 36px;
	height: 36px;
	margin: 0px;
	padding: 0px;
	line-height: 1em;
	display: block;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	background: #303030;
	color: #ffffff;
	-webkit-box-shadow: 0px 0px 0px 2px #fff inset;
	        box-shadow: 0px 0px 0px 2px #fff inset;
}
button.swiper-button-prev::after,button.swiper-button-next::after{
	content: '';
	display: block;
	width: 10px;
	height: 15px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	background: #fff;
	color: #000000;
}
button.swiper-button-prev::after{
	left: 11px;
	-webkit-clip-path: polygon(100% 0, 25% 50%, 100% 100%, 75% 100%, 0% 50%, 75% 0);
	        clip-path: polygon(100% 0, 25% 50%, 100% 100%, 75% 100%, 0% 50%, 75% 0);
}
button.swiper-button-next::after{
	right: 11px;
	-webkit-clip-path: polygon(25% 0, 100% 50%, 25% 100%, 0 100%, 75% 50%, 0 0);
			clip-path: polygon(25% 0, 100% 50%, 25% 100%, 0 100%, 75% 50%, 0 0);}

:is(button.swiper-button-start,button.swiper-button-stop):not(.is-active){
	display: none;
}

button.swiper-button-start,button.swiper-button-stop {
	display: block;
	width: 36px;
	height: 36px;
	position: absolute;
	top: calc(50% + 46px);
	right: 10px;
	-webkit-transform: translate(0%,-50%);
	    -ms-transform: translate(0%,-50%);
	        transform: translate(0%,-50%);
	border-radius: 50%;
	z-index: 10;
	background: #303030;
	color: #ffffff;
	-webkit-box-shadow: 0px 0px 0px 2px #fff inset;
	        box-shadow: 0px 0px 0px 2px #fff inset;
}
:where(button.swiper-button-start,button.swiper-button-stop)::after{
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	background-color: #fff;
	color: #000000;
}
button.swiper-button-stop::after{
	/* clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%); */
	-webkit-clip-path: polygon(0 0, 35% 0, 35% 100%, 65% 100%, 65% 0, 100% 0%, 100% 100%, 0 100%);
	        clip-path: polygon(0 0, 35% 0, 35% 100%, 65% 100%, 65% 0, 100% 0%, 100% 100%, 0 100%);
}

button.swiper-button-start::after{
	left: calc(50% + 1px);
	-webkit-clip-path: polygon(90% 50%, 10% 0%, 10% 100%);
	        clip-path: polygon(90% 50%, 10% 0%, 10% 100%);
}

.swiper-caption {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	line-height: 1em;
	background: #000;
	color: #fff;
	padding: 5px 10px;
	width: 100%;
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	overflow: hidden;
	text-align: center;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-size: 1.4rem;
}

.swiper-slide img {
	display: block;
}

.swiper-scrollbar{
	display: none;
}

/* サムネイル */
.swiper-thumb img{
	width: 100%;
	max-height: 150px;
	object-fit: contain;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border: 3px solid  transparent;
}
/* サムネイルのアクティブなスライド */
.swiper-thumb .swiper-slide-thumb-active img {
	border: 3px solid #51a77b;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

/* 表示位置調整 縦方向 */
.pg_class_slide_div_top {
	height: auto;
	max-height: 100%;
	display: flex;
	align-items: flex-start;
}

.pg_class_slide_div_center {
	height: auto;
	max-height: 100%;
	display: flex;
	align-items: center;
}

.pg_class_slide_div_bottom {
	height: auto;
	max-height: 100%;
	display: flex;
	align-items: flex-end;
}

/* 表示位置調整 橫方向 */
.pg_class_slide_a_left {
	width: 100%;
	max-height: 100%;
	display: inline-block;
	text-align: left;
}

.pg_class_slide_a_center {
	width: 100%;
	max-height: 100%;
	display: inline-block;
	text-align: center;
}

.pg_class_slide_a_right {
	width: 100%;
	max-height: 100%;
	display: inline-block;
	text-align: right;
}

/* 表示サイズ 自動調整・高さ固定 */
.swiper-slide img.pg_class_slide_img_fit {
	display: inline-block;
	object-fit: contain;
	width:100%;
}

.swiper-slide img.pg_class_slide_img_auto {
	display: inline-block;
	max-width: 100%;
}