php 20180511 slickの高さを保持して背景にしない方法！

Posted 2021-05-04

.con_main {
	overflow: hidden;
	position: relative;
	text-align: center;
	.main_inner {
		position: relative;
		.box_catch {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 1;
			h2 {
				color: #fff;
				font-family: $f_min;
				font-weight: normal;
				@include fsz_r(33,24,20);
				writing-mode: vertical-rl;
				margin: 0 auto;
				@include cV(margin-bottom,15px,10px,5px);
				line-height: 1.8;
				letter-spacing: .25em;
				text-shadow: 0 0 6px #000;
				@include mq(min_max_w,500px,767px) {
					@include fsz(15);
				}
			}
			.sub_en {
				color: #fff;
				text-shadow: 0 0 6px #000;
				@include mq(min_max_w,500px,767px) {
					@include fsz(12);
				}
			}
		}
		.box_insta {
			position: absolute;
			@include cV(bottom,100px,60px,10px);
			@include cV(right,6%,5%,2%);
			z-index: 10;
			@include cV(width,auto,20%,25%);
		}
		.slide_main {
			left: 50%;
			width: 2000px;
			@include cV(width,2000px,1300px,725px);
			@include mq(min_max_w,500px,767px) {
				height: 1000px;
			}
			position: relative;
			transform: translate(-50%, 0);
			.slide {
				@include cV(height,735px,500px,280px);
				@include mq(min_max_w,500px,767px) {
					height: 380px;
				}
			}
		}
	}
}

//slickオプションはいつも通り。CMSとかの時使える
//http://west02.ab-ss.com/elinn-kyoto.com/html_renewal/

<div class="con_main">
	<div class="main_inner">
	  <div class="box_catch">
			<h2>あなたの<br>京都観光に<br>寄りそう</h2>
			<p class="sub_en">Casual Relaxing Hotel.</p>
		</div>
		<div class="box_insta">
			<a href="https://www.instagram.com/el_inn_kyoto/?hl=ja" class="over">
				<img src="images/home/img_main_insta.jpg" alt="">
			</a>
		</div>
		<div class="slide_main">
			<div class="slide slide01">
				<img src="images/home/img_slide_main01.jpg" alt="">
			</div>
			<div class="slide slide02">
				<img src="images/home/img_slide_main02.jpg" alt="">
			</div>
			<div class="slide slide03">
				<img src="images/home/img_slide_main03.jpg" alt="">
			</div>
			<div class="slide slide04">
				<img src="images/home/img_slide_main04.jpg" alt="">
			</div>
			<div class="slide slide05">
				<img src="images/home/img_slide_main05.jpg" alt="">
			</div>
		</div><!-- /.box_slide -->
	</div>
</div><!-- /.con_main -->