@charset "UTF-8";
/* CSS Document */

.slider_c{
margin-top: 0px; min-width:1084px;}
	
.sl1{
	background-image: url(/wp-content/themes/D/d/img/slider/slide1-2.jpg);
}
.sl2{ 
	background-image: url(/wp-content/themes/D/d/img/slider/slide2-1.webp);}
.sl3{
	background-image: url(/wp-content/themes/D/d/img/slider/slide3.jpg);
	}
	
	.sl4{
	background-image: url(/wp-content/themes/D/d/img/slider/slide4.jpg);
	}
	
	.sl5{
	background-image: url(/wp-content/themes/D/d/img/slider/slide5.jpg);
	}
	
	
.viewer ul li{
    background-position: center center;
    background-repeat: no-repeat;
	/*これでスマホとかの場合、画像の横幅以上にいかない*/
   /* background-size: contain;*/
	
    background-size: cover;
}
	

/*文字*/
.sl_catch{ position:absolute; z-index:9; color:#FFFFFF;
  /*  bottom: 64px;*/
  
  top:30px;
    left: 30px;
    width: 100%;
 /*   text-align: center;*/
	font-size:16px;
}

.sl_catch .sl_box{ display:inline-block; padding:12px 24px; /*background-color: rgba(65,155,191,0.5);*/

	-moz-text-shadow:2px 2px 2px #333;
	-webkit-text-shadow:2px 2px 2px #333;
	text-shadow:0px 0px 8px #333;
	
	}

.sl_sub_title{ font-weight:bold; font-size:40%}
.sl_catch .sl_box .sl_title{ font-size:350%; font-weight:bold}

.sl_catch .sl_box p{ font-size:120%; }
 

/*追記文字　大きくなり過ぎないように*/
.viewer ul li .sl_moji{max-width:1084px;

 position:absolute;
 top: 0;
	left: 3%;
	
	bottom:0;
	margin: auto;}
	
.viewer ul li .sl_moji2{max-width:1084px;

 position:absolute;
 top: 0;
	right: 3%;
	
	bottom:0;
	margin: auto;}
	/*ここだけ*/


#main_contents_top_fade{
	position: relative;
	
	background-color: #f7fafe;

}
.viewer {
	overflow: hidden;
	display:none;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

.viewer ul {
	overflow: hidden;
	position: relative;
	
}
/*アフターでコンテンツの高さを
フェードインのため消えてしまうので大外のdivも*/
#main_contents_top_fade:before,
.viewer ul:before {
    content:"";
    display: block;
    padding-top: 35%; /* 1200で400の高さ */
}
/*アフターのためｎその中のコンテンツ.viewerもあアブソルとで中心
もちろんulは元々*/
.viewer,
.viewer ul li {
	top: 0;
	left: 0;
	right:0;
	bottom:0;
	display: none;
	position: absolute;
	margin: auto;
	width:100%
	
}


.viewer ul li img{ width:100%}

/*つまりは1200以上ってことだわこれが*/
#main_contents_top_fade,
.viewer,
.viewer ul,
.viewer ul li{
	/*max-height:390px;*/
	max-height:550px;/* 高さ　最大500まで */

min-height:inherit;
min-height:auto;

}




/*high*/
.sl_wrap{ position:absolute; bottom:0; width:100%; text-align:center; background:rgba(255,255,255,0.5); padding:20px; z-index:101}

.sl_title2{ font-size:44px; font-weight:bold; color:#fff;
	-moz-text-shadow:2px 2px 2px #333;
	-webkit-text-shadow:2px 2px 2px #333;
	text-shadow:0px 0px 8px #333;
	}
	
.sl_title2_p{ font-size:26px; color:#fff;
	-moz-text-shadow:2px 2px 2px #333;
	-webkit-text-shadow:2px 2px 2px #333;
	text-shadow:0px 0px 8px #333;}
	
	/*f4*/
	.sl_under_title{font-weight: bold;text-align:center; font-size:24px; color:#428ae0; margin:24px 5%;}
	.sl_under_p{text-align:center; font-size:16px;max-width:800px; width:80%; margin:0 auto;
	margin-bottom:48px;}
	
	
	/*コレを追加して、幅広の場合めいっぱい*/
	@media screen and (min-width: 1200px) {
	/*.viewer ul li{
    background-size: cover;
}*/
	}
/*こうすればここまできたら100%の高さで表示させれる
@media screen and (min-width: 2000px) {
	.viewer ul li{
    background-size: contain;
}
	}*/


.mob_slider{overflow: hidden}



@media (max-width: 736px) {
#main_contents_top_fade, .viewer, .viewer ul, .viewer ul li{ min-height: 150px}

.slider_c{
margin-top: 0px; min-width:inherit;}



/*文字*/
.sl_catch{ 
  
  top:30px;
    left: 10px;
    width: 100%;
 /*   text-align: center;*/
	font-size:16px;
	line-height:2
}

.sl_catch .sl_box{ display:inline-block; padding:24px 12px; /*background-color: rgba(65,155,191,0.5);*/

	-moz-text-shadow:2px 2px 2px #555;
	-webkit-text-shadow:2px 2px 2px #555;
	text-shadow:2px 2px 2px #555;
	
	}

.sl_sub_title{ font-weight:bold; font-size:60%}
.sl_catch .sl_box .sl_title{ font-size:180%; font-weight:bold}

.sl_catch .sl_box p{ font-size:80%; }


.sl_catch .sl_box{ display:inline-block; padding:24px 12px; /*background-color: rgba(65,155,191,0.5);*/

	-moz-text-shadow:1px 1px 1px #555;
	-webkit-text-shadow:1px 1px 1px #555;
	text-shadow:1px 1px 1px #555;
	
	}
 
 
 
 /*high*/
.sl_wrap{ padding:12px;}

.sl_title2{ font-size:16px; font-weight:bold; color:#fff;
	-moz-text-shadow:2px 2px 2px #333;
	-webkit-text-shadow:2px 2px 2px #333;
	text-shadow:0px 0px 8px #333;
	}
	
.sl_title2_p{ font-size:16px; color:#fff;
	-moz-text-shadow:2px 2px 2px #333;
	-webkit-text-shadow:2px 2px 2px #333;
	text-shadow:0px 0px 8px #333;
	display:none}
	
	/*f4*/
	.sl_under_title{  font-size:18px; margin:24px 5%;}
	.sl_under_p{ font-size:14px;width:80%; margin:0 auto;
	margin-bottom:48px;}
	
	
	.mob_slider{ display: none}
 

}