@charset "utf-8";
/* CSS Document */
/*--- YouTube ------------------------------------*/
.video_box{
	padding-bottom: 66.25%;
	height: 0;
}
.video_box iframe{
	top: 0;
	left: 0;
}

/*--- main_img ------------------------------------*/
#video{
	background-image: url("../img/main_img.jpg");
	z-index: -1;
	height: 100vh;
}
#video::after{
	display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
#main_img .catch{
	bottom: 80px;
	z-index: 10;
}

/*--- intro ------------------------------------*/
#intro{
	background-image: url("../img/intro_bg.png");
	background-size: 40%;
}

/*--- about,recruit ------------------------------------*/
#about .about_bg{
	background-image: url("../img/top_about_img1.jpg");
}
#recruit .recruit_bg{
	background-image: url("../img/top_recruit_img1.jpg");
}
#about .txt_wrap, #recruit .txt_wrap{
	z-index: 10;
	right: 0;
	bottom: -80px;
}
#about .cate_box, #recruit .cate_box{
	max-width: 800px;
	margin-left: auto;
	margin-top: -265px;
}


/*--- staff ------------------------------------*/
#staff .right_box{
	z-index: 10;
}
#staff .box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -60px;
    height: 612px;
    width: 81%;
	background-image: url("../img/top_staff_img1.jpg");
}
#staff .cate_box .cate_box_inner{
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
}
#staff .cate_item{
	bottom: 0;
	left: 0;
	right: 0;
	transition: .6s;
}
#staff .cate_box a:hover .cate_item{
	opacity: 0;
}
#staff .cate_box img, #gallery .cate_box img{
	transition: transform .6s;
}
#staff .cate_box a:hover img, #gallery .cate_box a:hover img{
	transform: scale(1.05) translate(-49%,-49%);
}

/*--- gallery ------------------------------------*/
#gallery .cate_box figure{
	border-radius: 50%;
}

/*--- top_menu ------------------------------------*/
#top_menu a{
	top: 0;
	left: 0;
}
#top_menu .box figure::before{
	display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
	z-index: 1;
	transition: background .35s;
}
#top_menu .box figure{
	transition: transform .6s;
}
#top_menu .box:hover figure::before {
    background: rgba(0,0,0,0.4);
}
#top_menu .box:hover figure {
	transform: scale(1.05);
}
#top_menu .box .top_title{
	z-index: 2;
}

/* ---------- 1280px ---------- */
@media screen and (max-width: 1280px){
#gallery .cate_box{
	padding: 10px;
}
#about .txt_wrap .cate_box::before, #recruit .txt_wrap .cate_box::before {
    width: 50vw;
    height: 100%;
    right: -49vw;
    top: 0;
    background-color: #fff;
	display: block;
    position: absolute;
    content: "";
    pointer-events: none;
}
}
/* ---------- 1110px ---------- */
@media screen and (max-width: 1200px){
#gallery .cate_box{
	width: 32.66667%!important;
}
}

/*IE*/
@media all and (-ms-high-contrast: none){
#staff .cate_box .font_bold{
	font-weight: normal;
}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#video,.video{
	height: 80vh;
}
#main_img .catch{
	width: 90%;
}
#intro {
    background-size: 60%;
}
#about .about_bg.height50vh ,#staff .staff_bg.height50vh, #recruit .recruit_bg.height50vh {
    height: 400px;
}
#about .cate_box, #recruit .cate_box {
    max-width: 500px;
}
#staff .staff_bg {
    background-image: url("../img/top_staff_img1.jpg");
}
#staff .staff_box{
	margin-top: -210px;
}
#top_menu figure{
	padding: 30px 0;
}
#top_menu .rectangle_img img {
    -ms-transform: translate(-50%,-50%)scale(1.1);
    -webkit-transform: translate(-50%,-50%)scale(1.1);
    transform: translate(-50%,-50%)scale(1.1);
}
#top_menu .box figure::before {
    background: rgba(0,0,0,0.3);
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#main_img .catch {
    bottom: 25px;
	font-size: 18px;
}
#intro {
    background-size: 80%;
}
#about .about_bg.height50vh, #staff .staff_bg.height50vh, #recruit .recruit_bg.height50vh {
    height: 230px;
}
#about .txt_wrap, #recruit .txt_wrap {
    bottom: 0;
}
#about .cate_box, #recruit .cate_box {
    max-width: 100%;
    margin: auto;
    margin-top: 0;
}
#staff .staff_box {
    margin-top: -75px;
}
#staff .more_button a:hover {
    color: #fff;
}
#gallery .cate_box {
    width: 50%!important;
}
#top_menu figure {
    padding: 0;
}
.video_box {
    padding-bottom: 55.25%;
}
}