@charset "utf-8";
/*+++++++++++++++++++++++++++++
 札幌えんじゅ swiper用CSS
++++++++++++++++++++++++++++++*/

/* ■■　Swiper用CSS　■■
************************************************************************************************************************
【HTML】
<!--------------------------  Swiper [ここから] ---------------------------->
<div class="○○">
<div class="swiper-container">
<div class="swiper-wrapper">

        <!-- ギャラリー [ここから] -->
        <div class="swiper-slide"> <img> / <p>〜</p> / <div>〜</div> 好きに入れてOK </div>
        <div class="swiper-slide"> 〜いくつでも増やせる〜 </div>
        <div class="swiper-slide"> 〜いくつでも増やせる〜 </div>
        <!-- ギャラリー [ここまで] -->

        </div>
        <!-- /.swiper-wrapper -->

<!-- Add Page Number -->
<div class="swiper-pagination"></div>

 <!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

</div>
<!--/.swiper-container -->

<!-- Swiper JavaScriptの読み込み・上には置かない！ -->
<script src="/js/swiper.min.js"></script>
<script src="/js/swiper_set.js"></script>

</div><!--/#○○-->
<!--------------------------  Swiper [ここまで] ---------------------------->
**************************************************************************************************************************/


/*Swiper 基本設定 (あまりいじらない)
***************************************************************************/
.swiper-container {
	height: auto;
	line-height: auto;
	vertical-align: middle;
	text-align: center;
	}
.swiper-wrapper {
	width: 100%;
	height: 100%;
	}
/* ナビの表示／非表示（画像なので書き換えはimg指定）*/
.swiper-button-prev,
.swiper-button-next {
	opacity: 0.8; /*透明度設定 1.0 - 0.0 まで*/
	}
/* ナビの変更（画像なので書き換えはimg指定）*/
.swiper-button-prev {
	background: url(/img/chevron-circle-left-solid.svg) no-repeat center center / contain;
	}
.swiper-button-next {
	background: url(/img/chevron-circle-right-solid.svg) no-repeat center center / contain;
	}
/* ページ数表示 */
.swiper-pagination {
	opacity: 0.8;  /*透明度設定 1.0 - 0.0 まで*/
	color: #fff;
	}
.swiper-slide {
	text-align: center;
	background: rgba(0,0,0,0);
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	 justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	}


/*Swiper 追加設定 「#minpaku」
***************************************************************************/
/*swiper全体にfloatをかけるおまじない*/
#minpaku { overflow: auto;}

/*一番外側のBOX(枠)*/
#minpaku .swiper-container {
	max-width: 680px; /*最大の横幅*/
	max-height: 450px; /*最大の高さ*/
	background-color: ; /*背景色 (写真が覆いきれない部分)*/
	margin-bottom: 15px; /*下の余白*/ 
	}
/*縦長写真の調整*/	
#minpaku .swiper-wrapper img {
	max-height: 450px; /*containerの最大の高さに合わせる*/
	}
/*ナビの表示／非表示*/
#minpaku .swiper-button-prev,
#minpaku .swiper-button-next {
	display: block; /*消す場合はnone*/
	}
/*ページ数の表示／非表示*/	
#minpaku .swiper-pagination {
	display: none; /*消す場合はnone*/
	}

/*「#minpaku」スマホ画面を横向きにした場合
--------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:480px){
/*一番外側のBOX(枠)*/
.swiper-container img{
	max-height: 300px; /*最大の高さ*/
	}
}/*---------スマホ横向きここまで------------*/

/*「#minpaku」画面幅[480px以下]の設定
----------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*一番外側のBOX(枠)*/
#minpaku .swiper-container {
	max-height: 250px; /*最大の高さ*/
	margin-bottom: 15px; /*下の余白*/
	}
/*縦長写真の調整*/
#minpaku .swiper-wrapper img {
	max-height: 250px; /*containerの最大の高さに合わせる*/
	}
}/*--------------[480px以下]ここまで-----------*/

/************追加設定 「#minpaku」ここまで************************/


/*Swiper 追加設定 「#ski」
<script src="/js/swiper_set2.js"></script>にて
***************************************************************************/
/*swiper全体にfloatをかけるおまじない*/
#ski { overflow: auto;}

/*一番外側のBOX(枠)*/
#ski .swiper-container {
	max-width: 800px; /*最大の横幅*/
	max-height: 150px; /*最大の高さ*/
	background-color: #999; /*背景色 (写真が覆いきれない部分)*/
	margin-bottom: 0px; /*下の余白*/ 
	}
/*縦長写真の調整*/	
#ski .swiper-wrapper img {
	max-height: 150px; /*containerの最大の高さに合わせる*/
	}
/*ナビの表示／非表示*/
#ski .swiper-button-prev,
#ski .swiper-button-next {
	display: block; /*消す場合はnone*/
	}
/*ページ数の表示／非表示*/	
#ski .swiper-pagination {
	display: none; /*消す場合はnone*/
	}

/*「#ski」スマホ画面を横向きにした場合
--------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:480px){
/*一番外側のBOX(枠)*/
.swiper-container img{
	max-height: 150px; /*最大の高さ*/
	}
}/*---------スマホ横向きここまで------------*/

/*「#ski」画面幅[480px以下]の設定
----------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*一番外側のBOX(枠)*/
#ski .swiper-container {
	max-height: 150px; /*最大の高さ*/
	margin-bottom: 20px; /*下の余白*/
	}
/*縦長写真の調整*/
#ski .swiper-wrapper img {
	max-height: 90px; /*containerの最大の高さに合わせる*/
	}
}/*--------------[480px以下]ここまで-----------*/

/************追加設定 「#ski」ここまで************************/

/* ■■　Swiper用CSSここまで　■■
************************************************************************************************************************/