﻿@charset 'UTF-8';
/* ----------------Slider---------------------- */
.tgw-core-freehtml .slide {
	margin:0 auto 5px;
	position:relative;
}
.tgw-core-freehtml .bx-wrapper .bx-next {
    background: url(../../../common/image/icon-right-arrow-black2.png) !important; /* GWP Path fix */
}
/* bx-wrapper  */
.tgw-core-freehtml .sliderL {
	margin: 20px auto;
	width: 100%;
	max-width: 700px;/*使用画像の幅*/
}
.tgw-core-freehtml .bx-wrapper {/*reset*/
	position: relative;
	margin: 0 0 50px;
	padding: 0;
	*zoom: 1;
}
.tgw-core-freehtml .bx-wrapper video,
.tgw-core-freehtml .bx-wrapper img {
	width: 100%;
	height: auto;/*auto又は100%に指定・縦横比を維持する*/
	display: block;
}
.tgw-core-freehtml .bx-wrapper .bx-pager {/*ページャーの表示位置など*/
	position: absolute;
	/*bottom: -30px; ずれるので様子見で停止 */
	width: 100%;
}
.tgw-core-freehtml .bx-wrapper video,
.tgw-core-freehtml .bx-wrapper img {
    max-width: 100%;
    display: block;
}
.tgw-core-freehtml .slide .bx-wrapper {
	margin: 0 auto !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	border: none !important;
	background: none !important;
}

.tgw-core-freehtml .slide-nav{
	padding:5px;
	width:calc(100% - 10px);
	height:24px;
	position:relative;
	background-color:rgb(212,215,217); /* GWP fix rgb(242,245,247);⇒rgb(212,215,217); */
	margin-left:auto;
	margin-right:auto;
}
.tgw-core-freehtml #slide-counter{
	text-align:center;
	z-index: 3;
	padding-top:5px;
	display:none;
}
.tgw-core-freehtml #slide-counter i{
	color:#fff;
}
.tgw-core-freehtml #slide-counter i.act{
	color:#0068B7;
}
  .tgw-core-freehtml .slide iframe{
		width:940px; /* GWP fix 700px⇒940px */
		height:calc(940px * 0.5625); /* GWP fix calc(700px * 0.5625);⇒calc(940px * 0.5625); */
	}

.tgw-core-freehtml #nav-btn{
  display: none !important; /* GWP add */
	text-align:right;
	position:absolute;
	width:100px;
	top:5px;
	right:5px;
	z-index: 55;
}


.tgw-core-freehtml .slide .bx-wrapper .bxslider-top li,
.tgw-core-freehtml .slide_full .bx-wrapper .bxslider li{background-color: #eef3f6!important;/*rgb(242,245,247)*/ max-height: 528px;}


/* レイヤー化の為追加 */

.tgw-core-freehtml .slide .bx-wrapper .bxslider-top,
.tgw-core-freehtml .slide_full .bx-wrapper .bxslider{padding-left: 0;}

.tgw-core-freehtml .slide .bx-wrapper .bxslider-top li,
.tgw-core-freehtml .slide_full .bx-wrapper .bxslider{overflow: hidden;}

/* 1枚目の画像 */
.tgw-core-freehtml .slide .bx-wrapper .bxslider-top li .bx-message-layer,
.tgw-core-freehtml .slide_full .bx-wrapper .bxslider li .bx-message-layer{
  position: absolute!important;
  top: 0;
  left: 0;
  box-sizing: border-box;
  /*height: 100%;*/
  width: auto;
  height: 100%;
  display: block;
  overflow: hidden;
  padding: 9%;
  z-index: 9;
 /* padding-left: 9%;
  transform: translateY(-50%);
  
  */
  /*z-index: 1;*/
}

/* 2枚目以降の設定 */
.tgw-core-freehtml .slide .bx-wrapper .bxslider-top li .bx-upper-layer,
.tgw-core-freehtml .slide_full .bx-wrapper .bxslider li .bx-upper-layer{
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 0;
  margin: auto;
  text-align: center;
}


/* （共通）ayerの中身の設定 */
.tgw-core-freehtml .slide .bx-wrapper .bxslider-top li .bx-message-layer img,
.tgw-core-freehtml .slide_full .bx-wrapper .bxslider li .bx-message-layer img{
  height: 100%!important;
  width: auto!important;
  max-height: 60vh!important;
}

/*
.slide .bx-wrapper .bxslider-top li#sl01 .bx-message-layer img,
.slide_full .bx-wrapper .bxslider li#sl01 .bx-message-layer img{

  width: auto!important;

}
*/


.tgw-core-freehtml .slide .bx-wrapper .bxslider-top li .bx-upper-layer img,
.tgw-core-freehtml .slide_full .bx-wrapper .bxslider li .bx-upper-layer img{
  width: 100%;
  height: 100%;
  object-fit:cover;
}

.tgw-core-freehtml .slide .bxslider-top li a{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.tgw-core-freehtml .slide .bxslider-top li a[target="_blank"]::after{
  position: absolute;
  bottom: 10px;
  right: 10px;
  content: url(../../../common/image/icon_otherwindow_s.png); /* GWP Path fix */
  display: inline;
  margin-left: 5px;
  vertical-align: middle;
}







/* 共通背景 */
.tgw-core-freehtml .slide .bxslider-top li img.bx-bg-layer,
.tgw-core-freehtml .slide_full .bxslider li img.bx-bg-layer{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* 共通背景 */
.tgw-core-freehtml .slide .bxslider-top li div.bx-bgImage-layer,
.tgw-core-freehtml .slide_full .bxslider li div.bx-bgImage-layer{
  display: block;
  width: 100%!important;
  height: 100%!important;
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}


/* 拡大時 */
.tgw-core-freehtml .slide[style="position:fixed;"] .bx-wrapper .bxslider-top li{
  display: block!important;
  width: 100%!important;
  height: 100%!important;
}


@media screen and (min-width: 769px){
  .tgw-core-freehtml .slide .bx-wrapper .bxslider-top li .bx-message-layer img.bx-png{display: none!important;}
  .tgw-core-freehtml .slide .bx-wrapper .bxslider-top li .bx-message-layer img.bx-svg{
    display: block !important;
  }
}


@media screen and (max-width: 768px){
  .tgw-core-freehtml .slide .bx-wrapper .bxslider-top li .bx-message-layer{padding: 0; /*height: 100%;*/}
  .tgw-core-freehtml .slide .bx-wrapper .bxslider-top li .bx-message-layer img.bx-png{display: block!important;}
  .tgw-core-freehtml .slide .bx-wrapper .bxslider-top li .bx-message-layer img.bx-svg{display: none!important;}
}

/* END レイヤー化の為追加 */






/*  ---------------------750px以下の処理-------------------- */
@media screen and (max-width: 768px){
	/* bx-wrapper  */
	.tgw-core-freehtml .bx-wrapper .bx-controls-direction a{
		height:20%!important;
		width:9%!important;
		background-size:cover!important;
	}
	
	.tgw-core-freehtml .article-sec .bx-wrapper{
		/*display:none;*/
	}
	.tgw-core-freehtml .bx-wrapper {
	    margin: auto!important;
	}
	.tgw-core-freehtml .article-sec .bx-wrapper a.bx-next {
	    right:0px;
	    width:32px!important;
	    height:32px!important;
	}
	.tgw-core-freehtml .article-sec .bx-wrapper a.bx-prev {
	    left:0px;
	    width:32px!important;
	    height:32px!important;
	}
  .tgw-core-freehtml .slide iframe{
		width:100%;
		height:calc(100vw * 0.5625);
	}
}
