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

div#body_container{
	padding-top: 84px;
}

div#contents_container{
	width: 100%;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

header ul.sns_ic_menu{
	top:50%!important;
	height: 300px!important;
	margin-top: -150px;
}

div#sec_about,
div#sec_information,
div#sec_instructor,
div#sec_schedule,
div#sec_access{
	padding: 0 60px;
}

/*----------------------------------------------------------------*/
/*---header_contents-------------------------------------------------------------*/

div#header_contents{
	z-index: 1000;
	position: relative;
	width: 100%;
	overflow: hidden;
}

/*---hc_main_image-------------------------------------------------------------*/

div#hc_main_image{
	z-index: 1000;
	position: relative;
	width: 100%;
}

/*---hcmi_movie-------------------------------------------------------------*/

div#hc_main_image div#hcmi_movie{
	z-index: 100;
	position: relative;
	width: 100%;
	height: 80vh;
	background-color: #ffffff;
	background-color: rgba(0,0,0,0.1);
	overflow: hidden;

	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
}
div#hc_main_image div#hcmi_movie::after{
	z-index: 110;
	content: '';
	position: absolute;top:0;right:0;
	width: 60px;
	height: 100%;
	background-color: rgba(255,255,255,0.2);
	display: block;

  backdrop-filter: blur(3px);
}

/* body.bc_st_2201 div#hc_main_image div#hcmi_movie{
background-image:url(../img/studio/2201/1.jpg);
background-size: cover;
} */

/*----------------------------------------------------------------*/

div#hc_main_image div#hcmi_movie video{
	z-index: 100;
	position: relative;
	width: 100%;
	min-width: 1500px;
}

/*---sound_bt-------------------------------------------------------------*/

div#hc_main_image div#hcmi_movie div#sound_bt{
position: absolute;top:30px;right:12px;
}

/*---hcmi_slider-------------------------------------------------------------*/

div#hc_main_image ul#hcmi_slider{
	z-index: 100;
	position: relative;
	height:70vh;
	background-color: #ffffff;
	overflow: hidden;
}

div#hc_main_image ul#hcmi_slider li{
height:100%;
	overflow: hidden;
}

div#hc_main_image ul#hcmi_slider li.lq_img{
	width:100%;
	height:100%;

	/* animation: animationZoom 40s ease-in-out 0s infinite normal; */
}
/* @keyframes animationZoom {
	50%{ transform:scale(1.2); }
} */

/*---hcmi_studio_data-------------------------------------------------------------*/

div#hc_main_image div.hcmi_studio_data{
	z-index: 110;
	position: absolute;bottom: 26%;left:30px;
	height: 100px;
}

div#hc_main_image div.hcmi_studio_data h1{

-webkit-transform: skew(-9deg);
-moz-transform: skew(-9deg);
-o-transform: skew(-9deg);

	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
}
div#hc_main_image div.hcmi_studio_data h1 span,
div#hc_main_image div.hcmi_studio_data h1 b{
	color: #ffffff;
font-family: 'Poppins', sans-serif;
}

div#hc_main_image div.hcmi_studio_data h1 span{
font-size: 52px;
font-weight: 600;
line-height: 1.1em;
letter-spacing: 0.01em;
}
div#hc_main_image div.hcmi_studio_data h1 b{
background-color: #0151A0;
font-size: 43px;
font-weight: 200;
line-height: 1.1em;
letter-spacing: 0.01em;
padding: 6px 12px;
padding-top: 8px;
margin-left: 16px;
}

/*----------------------------------------------------------------*/

div#hc_main_image div.hcmi_studio_data > ul{
	margin-top: 12px;
}
div#hc_main_image div.hcmi_studio_data > ul li{
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.9em;
	letter-spacing: 0.05em;
}

/*---hc_studio_menu-------------------------------------------------------------*/

div#hc_studio_menu{
	z-index: 1100;
	position: absolute;bottom: 0;left:0;
	width: 100%;
	height: 70px;
  background-color: rgba(1,81,159,0.5);
  /* background-color: #383838; */
	overflow: hidden;
	/* border-left:6px rgba(255,255,255,0.3) solid; */

	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

div#hc_studio_menu > ul{
	height: 100%;
	margin-left: -30px;

	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
}
div#hc_studio_menu > ul > li{
	min-width: 200px;
	height: 100%;
  background-color: rgba(1,81,159,1.0);
	border-left:1px rgba(255,255,255,0.3) solid;

-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);

-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
div#hc_studio_menu > ul > li:hover{
background-color: #0570B4;
}

div#hc_studio_menu > ul > li:first-child{
	padding-left: 40px;
}

div#hc_studio_menu > ul > li a{
	width: 100%;
height: 100%;
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
	padding: 0 20px;

-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);

display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
div#hc_studio_menu > ul > li:first-child a{
	padding-left: 10px;
}

/*----------------------------------------------------------------*/
/*---sec_about-------------------------------------------------------------*/

div#sec_about{
	width: 100%;
  background-color: rgba(232,15,28,0.02);
	padding: 80px 60px;
	margin: 0 auto;

	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
align-items: stretch;
}

/*---lq_img-------------------------------------------------------------*/

div#sec_about div.lq_img{
	width: 40%;
	min-height: 300px;

	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
}

div#sec_about div.lq_img{
}

/*---text-------------------------------------------------------------*/

div#sec_about div.text{
	margin-left: 60px;

	-webkit-flex: 1;
	flex: 1;

	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
}

div#sec_about div.text h2{
	width: 100%;
font-size: 30px;
font-weight: 800;
line-height: 1.1em;
letter-spacing: 0.15em;
}

div#sec_about div.text div{
	width: 100%;
margin-top: 15px;
}
div#sec_about div.text div p{
	width: 100%;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.7em;
	margin-top: 8px;
}

/*----------------------------------------------------------------*/
/*---sec_information-------------------------------------------------------------*/

div#sec_information{
	width: 100%;
	margin: 0 auto;
	margin-top: 60px;
}
div#sec_information a.pubt{
	margin: 0 auto;
	margin-top: 30px;
}

/*----------------------------------------------------------------*/
/*---sec_instructor-------------------------------------------------------------*/

div#sec_instructor{
	width: 100%;
	margin: 0 auto;
	margin-top: 80px;
}

div#sec_instructor div.sec_title{
	margin-bottom: 20px;
}

div#sec_instructor ul.cnt_instructor_list{
}
div#sec_instructor ul.cnt_instructor_list > li a div.text h2 b{
	font-size: 16px;
}

div#sec_instructor ul.cnt_instructor_list > li a div.lq_img{
	width:100%;
	padding-bottom:110%;
}

/*----------------------------------------------------------------*/
/*---sec_schedule-------------------------------------------------------------*/

div#sec_schedule{
	width: 100%;
	margin-top: 80px;
}

/*----------------------------------------------------------------*/
/*---sec_access-------------------------------------------------------------*/

div#sec_access{
	width: 100%;
	margin: 0 auto;
	margin-top: 80px;
}
