@charset "UTF-8";

/*-------------------------------------------------
	Reset
-------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; vertical-align:baseline;background:transparent;}
body {line-height:1; -webkit-text-size-adjust: 100%;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display:block;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; vertical-align:baseline; background:transparent;}
ins {background-color:#fff; color:#000; text-decoration:none;}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit;}
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}
img {vertical-align:top; font-size:0; line-height:0;}

/*-------------------------------------------------
	Clearfix
-------------------------------------------------*/
.cf:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

/*-------------------------------------------------
	Base
-------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}
body {
	position: relative;
	margin: 0;
	padding: 0;
	min-width: 900px;
	font-family: YuGothic,'Yu Gothic','Noto Sans JP','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	color: #000;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.loading {
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
}
a:link, a:visited {
	color: #000;
	text-decoration: none;
	outline: none;
	opacity: 1;
	transition: all 360ms;
}
a:hover {
	text-decoration: none;
	opacity: .6;
	cursor: pointer;
}
h1, h2, h3, h4 {
	font-weight: 500;
}
img {
	width: 100%;
	height: auto;
}
@media screen and (max-width: 666px) {
	body {
		min-width: 100%;
		font-family: 'Noto Sans JP','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,sans-serif;
	}
}
@media screen and (max-width: 374px) {
	html {
		font-size: 50.5%;
	}
}

/*-------------------------------------------------
	Commons
-------------------------------------------------*/
/* Layout */
.ly_fL {
	float: left;
}
.ly_fR {
	float: right;
}
.ly_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.ly_flex.rev {
	flex-direction: row-reverse;
}
.ly_flex.aiC {
	align-items: center;
}
.ly_flex.jcC {
	justify-content: center;
}
.ly_w100 {
	width: 100%;
}
/* Helper */
.hp_mA {
	margin-left: auto;
	margin-right: auto;
}
.hp_txt_c {
	text-align: center !important;
}
.hp_ls0 {
	letter-spacing: 0;
}

/*-------------------------------------------------
	SCW
-------------------------------------------------*/
/* BG Slide */
.ly_bgSlide {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.bl_bgSlide div {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 100vh;
	margin: 0;
}
.el__bgSlide_1 {
	background-image: url("../img/bg_slide_1.jpg");
}
.el__bgSlide_2 {
	background-image: url("../img/bg_slide_2.jpg");
}
.el__bgSlide_3 {
	background-image: url("../img/bg_slide_3.jpg");
}
/* Contents */
.ly_contents {
	z-index: 1;
}
.ly_leftSide, .ly_rightSide {
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	padding-top: 30px;
	height: 100vh;
	min-height: 800px;
}
@media screen and (max-height: 800px) {
	.ly_leftSide, .ly_rightSide {
		display: block;
	}
}
.ly_leftSide {
	left: 0;
	padding-left: 30px;
	width: 410px;
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.ly_rightSide {
	right: 0;
	padding-right: 30px;
	width: 280px;
}
.bl_leftSide, .bl_rightSide {
	position: relative;
	width: 100%;
	height: 100%;
	height: 740px;
}
.el_scw_logo {
	margin-bottom: 30px;
	width: 260px;
}
.el_scw_txt {
	font-size: 1.2rem;
	line-height: 1.75;
	letter-spacing: .05em;
}
.el_scw_txt + .el_scw_txt {
	margin-top: 2em;
}
.ly_scw_link {
	position: absolute;
	left: 0;
	bottom: 0;
}
.el_scw_link {
	display: inline-block;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.5;
	letter-spacing: .05em;
	border-bottom: 1px solid #000;
}
.el_scw_link + .el_scw_link {
	margin-top: 0.5em;
}
.el_scw_arrow {
	font-size: .75em;
}
/* Youtube Button */
.ly_ytBtn {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.bl_ytBtn {
	padding: 3px;
	width: 100%;
	height: 174px;
	background-color: rgba(0,0,0,.2);
	cursor: pointer;
	transition: all 360ms;
}
.bl_ytBtn:hover {
	opacity: .6;
}
.el_ytBtn_tn {
	width: 100%;
	height: 137px;
	overflow: hidden;
}
.el_ytBtn_ttl {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 34px;
}
.el_ytBtn_ttl span {
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.333;
	letter-spacing: .05em;
	color: #fff;
}
.bl_ytBtn.dummy {
	background-color: transparent;
	pointer-events: none;
}
/* Youtube Full Screen */
.hp_ofh {
	overflow: hidden;
}
.bl_ytOpen {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.9);
}
.wrp_yt {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
	width: 100%;
	height: 100%;
}
.ly_yt {
	width: 100%;
	max-width: 910px;
	height: 100%;
	max-height: 512px;
}
.bl_yt {
	position: relative;
	padding-top: 56.25%;
	width: 100%;
}
.bl_yt iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.el_yt_closeBtn {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 25px;
	height: 25px;
	cursor: pointer;
	transition: all 360ms;
}
.el_yt_closeBtn:hover {
	opacity: .6;
}