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

/* TOP */
#container {margin-top: -2%;}
#top_works,
#top_voice,
#top_movie,
#top_link,
#top_blog {
	padding: 4% 0;
	width: 90%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#top_event {
	width: 100%;
	background: url(img/top/event_b2.gif) no-repeat center top;
	background-size: cover;
	margin-top: 0;
	padding: 4% 0;
}
#top_works {padding: 2% 0 4%;}
#top_works/*,
#top_voice*/ {
	background: url(img/top/line_b.gif) no-repeat center bottom;
	background-size: 100%;
}
#top_vinjoy {
	padding: 5% 0 3%;
	width: 100%;
	background: url(img/top/vinjoy_b2.gif) no-repeat center top;
	background-size: 100%;
}
.top_vinjoy_wrap {
	width: 60%;
	margin: 0 auto;
}
#top_sns {
	padding: 4% 0;
	background: #f5f4eb;
	width: 100%;
}
#top_link {padding: 5% 0;}
#top_blog {padding: 4% 0 2%;}
#top_works h1,
#top_voice h1,
#top_movie h1,
#top_sns h1,
#top_event h1,
#top_blog h1{
	font-weight: normal;
	text-align: center;
	font-size: 40px;
	margin-bottom: 15px;
	line-height: 1.7em;
	letter-spacing: 0.1em;
	font-family: 'Oswald', sans-serif;
	width: 80%;
	float: left;
	margin-left: 10%;
}
#top_event h1 .top_sub_t,
#top_works h1 .top_sub_t,
#top_voice h1 .top_sub_t {
	font-size: 40%;
	font-weight: normal;
}
#top_blog h1{margin-bottom: 10px;}
#top_event h1:after {
	content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 80px;
  height: 50px;
  background: url(img/top/ill_event.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
#top_works h1:after {
	content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 80px;
  height: 50px;
  background: url(img/top/ill_works.gif) no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-left: 20px;
}
#top_voice h1:after {
	content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 50px;
  height: 50px;
  background: url(img/top/ill_voice.gif) no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-left: 20px;
}
#top_movie h1:after {
	content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 70px;
  height: 50px;
  background: url(img/top/ill_movie.gif) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-left: 20px;
}
#top_sns h1:after {
	content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 60px;
  height: 50px;
  background: url(img/top/ill_sns.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-left: 20px;
}
#top_blog h1:after {
	content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 250px;
  height: 50px;
  background: url(img/top/ill_blog.gif) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
#top_event ul li,
#top_voice ul li,
#top_movie ul li,
#top_blog ul li {
	width: 46%;
	float: left;
	margin: 0 2%;
}
#top_works ul li {
	width: 29%;
	float: left;
	margin: 0 2%;
}
.top_yellow_line {
	font-size: 15px;
	background: linear-gradient(transparent 50%, #fff9b9 50%);
	font-weight: normal;
	margin-left: 20px;
	letter-spacing: 0.1em;
}
.more {
	font-size: 20px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
	margin: 30px 0 0;
	float: right;
	width: 10%;
}
#top_sns ul {
	width: 80%;
	max-width: 700px;
	margin: 0 auto;
}

#top_sns ul li:nth-child(1) {
	width: 40%;
	float: left;
	margin: 0 5% 0 0;
}
#top_sns ul li:nth-child(2) {
	width: 25%;
	float: left;
	margin: 0 6% 0 0;
}
#top_sns ul li:nth-child(3) {
	width: 18%;
	float: left;
	margin: 0;
}
#top_sns ul li img {
	-moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
}
#top_sns ul li img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.term a {
	float: left;
	background: #3d4b61;
	color: #FFF;
	margin: 0 5px 5px 0;
	padding: 2% 5%;
}
#top_blog ul li {margin-bottom: 20px;}

.top_blog_right {
	width: 60%;
	float: right;
}
.top_icon {
	width: 35%;
	float: left;
	margin-right: 10px;
	margin-bottom:10px;
}
.newstopday {
	float: left;
	font-size: 12px;
}
.newstoptitle,
.newstoptitle2 {
	font-size: 15px;
	margin-bottom: 10px;
	letter-spacing: 0.05em;
}
.newstoptitle2 {
	font-weight: bold;
	text-align: center;
}
#top_link ul li{
	float: left;
	width: 28%;
	margin-right: 6%;
}
#top_link ul li:nth-child(3) {margin-right: 0;}
#top_link ul li img {width: 83%;}
#top_link ul li:nth-child(2) img {width: 65%;}
.btn {
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	display: inline-block;
	text-align: center;
}

.btn1 {
    background-color: #FFF;
    border: 1px solid #000 !important;
	padding: 1% 6%;
}
.btn1:hover {
    background-color: #d6d4cc;
    border: 1px solid #000;
	opacity: 1.0;
}
.btn2 {
    background-color: #cdb400;
	border: 1px solid #cdb400 !important;
	padding: 1%;
}
.btn2:hover {
    background-color: #e8e266;
	border: 1px solid #cdb400 !important;
	opacity: 1.0;
}
.btn3 {
    background-color: #FFF;
    border: 1px solid #ea5414 !important;
	padding: 1% 6%;
}
.btn3:hover {
    background-color: #ea5414;
    border: 1px solid #ea5414;
	opacity: 1.0;
}

.bk-img,
.bk-img2,
.bk-img3{
	background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /*object-fit: cover;*/
	margin-bottom: 10px;
  width: 100%;
  height: 230px;
}
.bk-img2 {
  height: 120px;
	width: 35%;
	margin-bottom: 0;
	float: left;
}
.bk-img3 {height: 170px;}

.top_staff {
	width: 80%;
	max-width: 700px;
	margin: 0 auto 30px;
}
.top_staff_m_left {
	width: 75%;
    float: left;
	margin: 0 0 30px;
}

/*スタッフくるりん*/
.var_nav
{
width: 20%;
float: right;
margin: 0 0 30px;
}
.link_title:hover .icon
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);  
}
.icon
{
position:relative;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out; 
-o-transition:all .6s ease-in-out; 
-ms-transition:all .6s ease-in-out;
transition:all .6s ease-in-out; 
}







.top_recruit {
	float: left;
	width: 47%;
}
.top_company {
	float: right;
	width: 47%;
}
/* TOPslider zoom */
.slider {
width:100%;
height:100%;
vertical-align: middle;
overflow: hidden;
position: relative;
}
/*.slides{ flexsliderのとき
width:100%;
height:100%;
vertical-align: middle;
overflow: hidden;
position: relative;
}*/

/*bxsliderに配置する画像のプロパティ*/
.slider img{
	width:100%;
	height:100%!important;
	line-height: 100%;
    z-index:-999;
	/*10秒かけてズームイン・アウトを永遠に繰り返す*/
	animation: animationZoom 10s ease-in-out 0s infinite normal;
}
/*.slides img{ flexsliderのとき
	width:100%;
	height:100%!important;
	line-height: 100%;
    z-index:-999;
	animation: animationZoom 10s ease-in-out 0s infinite normal;
}*/

.bx-viewport{
height: 100%!important;
}

/*拡大した画像のはみ出した部分を隠すためのクラス*/
.slidewrap{
	width:100%;
	height:100%!important;
	overflow: hidden;
}

/*イメージをズームさせるCSS3アニメーション*/
@keyframes animationZoom {
	50%{ transform:scale(1.1); }        
}




.sample04 .swiper-slide {
  cursor: pointer;
}

.sample04 .swiper-slide {
  display: flex;
  justify-content: center;
}

.sample04 .swiper-slide p {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
}

.sample04 .swiper-slide .is-anim {
  transition: .6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  transform: translateY(0px);
}

.sample04 .swiper-button-prev,
.sample04 .swiper-button-next {
  display: none;
}

@media (min-width: 768px) {
  .sample04 .swiper-button-prev,
  .sample04 .swiper-button-next {
    display: block;
  }
}


/*スライダーsvg*/
.logo-pairs {
  width: 50%;
  stroke: #FFF;
 /* fill: rgba(255,255,255,0.3);*/
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash-pairs 10s ease-in forwards;
     -moz-animation: dash-pairs 10s ease-in forwards;
          animation: dash-pairs 10s ease-in forwards;
  z-index: 20;/*メニューの下へ（メニュー24）*/
  position: absolute;
  top: 60%;
    left: 30%;
}
.logo-pairs2 {
  width: 100%;
  stroke: #000;
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  -webkit-animation: dash-pairs2 3s ease-in alternate infinite;
     -moz-animation: dash-pairs2 3s ease-in alternate infinite;
          animation: dash-pairs2 3s ease-in alternate infinite;
  z-index: 20;
  position: absolute;
  top: 40%;
}

@-webkit-keyframes dash-pairs {
  0% {
    fill: rgba(255,255,255,0);
    stroke-dashoffset: 2000;
  }
  30% {
    fill: rgba(255,255,255,0);
    stroke-dashoffset: 2000;
  }
  100% {
    fill: rgba(255,255,255,1.0);
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash-pairs2 {
  0% {
    fill: rgba(0,0,0,0);
    stroke-dashoffset: 1600;
  }
  100% {
    fill: rgba(0,0,0,1.0);
    stroke-dashoffset: 0;
  }
}


@-moz-keyframes dash-pairs {
  0% {
    fill: rgba(255,255,255,0);
    stroke-dashoffset: 2000;
  }
  30% {
    fill: rgba(255,255,255,0);
    stroke-dashoffset: 2000;
  }
  100% {
    fill: rgba(255,255,255,1.0);
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes dash-pairs2 {
  0% {
    fill: rgba(0,0,0,0);
    stroke-dashoffset: 1600;
  }
  100% {
    fill: rgba(0,0,0,1.0);
    stroke-dashoffset: 0;
  }
}


@keyframes dash-pairs {
  0% {
    fill: rgba(255,255,255,0);
    stroke-dashoffset: 2000;
  }
  30% {
    fill: rgba(255,255,255,0);
    stroke-dashoffset: 2000;
  }
  100% {
    fill: rgba(255,255,255,1.0);
    stroke-dashoffset: 0;
  }
}

@keyframes dash-pairs2 {
  0% {
    fill: rgba(0,0,0,0);
    stroke-dashoffset: 1600;
  }
  100% {
    fill: rgba(0,0,0,1.0);
    stroke-dashoffset: 0;
  }
}

.slider_logo {
   width: 5%;
   margin-left: 5%;
   margin-bottom: -10%;
  position: relative;
  top: 30%;
   z-index: 20;
}
/* chrome opera
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
   .slider_logo {
  top: -20%;
}
} */

/* Firefox 
@-moz-document url-prefix() {
    .slider_logo {top: 20%;}
}*/


/*===============================================
画面の横幅が640px以下
===============================================*/
@media screen and (max-width: 640px){
/* TOP */
#top_works,
#top_movie,
#top_sns,
#top_link,
#top_voice,
#top_blog{
	width: 90%;
	padding: 5% 0;
	margin-right: auto;
	margin-left: auto;
	float: none;
	clear: both;
}
#top_works,
#top_voice {
	background: url(img/top/line_b.gif) no-repeat center bottom;
	background-size: 200%;
}
#top_link {padding: 10px 0;}
#top_event {
	background: url(img/top/event_b2_sp.gif) no-repeat center top;
	background-size: 100%;
	margin: 0 auto 20px;
	padding: 10% 0 5%;
}
#top_vinjoy {
	padding: 20px 0;
	width: 100%;
	background: url(img/top/vinjoy_b2_sp.gif) no-repeat center top;
	background-size: 100%;
	margin-bottom: 20px;
}
.top_vinjoy_wrap {
	width: 70%;
	margin: 0 auto;
}
#top_sns{
	padding: 7% 0 3%;
	float: none;
	clear: both;
	width: 100%;
	margin-bottom: 20px;
}
#top_works h1,
#top_movie h1,
#top_sns h1,
#top_event h1,
#top_blog h1,
#top_voice h1{
	font-size: 200%;
	line-height: 0.7em;
	text-align: left;
	width: 90%;
	margin-bottom: 0;
}
#top_sns h1{
	font-size: 170%;
}
#top_works h1:after,
#top_movie h1:after,
#top_sns h1:after,
#top_voice h1:after,
#top_blog h1:after {
	content: none;
	width: 0;
	height: 0;
}
#top_event h1 {margin-bottom: -10px;}
#top_works h1 {
	background: url(img/top/ill_works.gif) no-repeat right center;
	background-size: 25%;
}
#top_voice h1 {
	background: url(img/top/ill_voice.gif) no-repeat right center;
	background-size: 15%;
	padding-top: 20px;
}
#top_movie h1 {
	background: url(img/top/ill_movie.gif) no-repeat right center;
	background-size: 35%;
	padding: 15px 0;
	width: 50%;
}
#top_sns h1 {
	background: url(img/top/ill_sns.png) no-repeat right bottom;
	background-size: 15%;
	width: 85%;
	margin-left: 6%;
	margin-bottom: 10px;
}

#top_blog h1 {
	background: url(img/top/ill_blog.png) no-repeat right bottom;
	background-size: 60%;
	padding-botttom: 50px;
	letter-spacing: 0.1em;
}
#top_event h1 span,
#top_works h1 span,
#top_voice h1 span {
	font-size: 60%;
	letter-spacing: 0;
}
.top_yellow_line {
	font-size: 12px !important;
	background: linear-gradient(transparent 50%, #fff9b9 50%);
	margin-left: 0;
	letter-spacing: 0.1em;
}
#top_event ul li,
#top_works ul li,
#top_voice ul li,
#top_movie ul li,
#top_blog ul li {
	width: 85%;
	float: none;
	margin: 0 auto 20px;
	clear: both;
}
.more {
	font-size: 110%;
	margin: 0 0 10px;;
	float: right;
	width: 20%;
}
#top_movie .more {margin-top: 5%;}
#top_blog ul li{
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.top_blog_right {
	width: 60%;
	float: right;
}
.top_icon {
	width: 35%;
	float: left;
	margin-right: 10px;
	margin-top: -5px;
}
.newstopday {
	float: left;
	font-size: 12px;
}
.newstoptitle,
.newstoptitle2 {
	font-size: 100%;
	margin-bottom: 10px;
	text-align: left;
	line-height: 1.5em;
}

.bk-img{height: 20vh;}
.bk-img2{height: 10vh;}
.bk-img3{height: 20vh;}

#top_sns ul{
	width: 70%;
	margin:  0 auto 20px;
}
#top_link ul{
	width: 90%;
	margin:  0 auto;
}
#top_sns ul li:nth-child(1) {
	width: 100%;
	float: none;
	margin: 20px auto 10px;
}
#top_sns ul li:nth-child(2) {
	width: 52%;
	float: left;
	margin: 0;
}
#top_sns ul li:nth-child(3) {
	width: 38%;
	float: right;
	margin: 0;
}
.top_staff,
.top_recruit,
.top_company {
	float: none;
	margin: 0 auto 10px;
	width: 90%;
}
.top_company .margin_b20 {margin-bottom:15px;}
#top_link ul li{
	float: left;
	width: 47%;
}
#top_link ul li:nth-child(1) {
	width: 100%;
	margin-bottom: 20px;
}
#top_link ul li:nth-child(3) {float: right;}
#top_link ul li:nth-child(2) img {width: 75%;}
    
.top_staff_m_left {
	width: 90%;
    float: none;
	margin: 0 auto 10px;
}

/*スタッフくるりん*/
.var_nav
{
width: 55%;
float: none;
margin: 0 auto 10px;
}


/*スライダーsvg*/
.logo-pairs,
.logo-pairs2 {
   width: 95%;
   left:5%;
   top: 65%;
}
.slider_logo {
   top: 0;
   width: 10%;
   margin-bottom: -20%;
}

}




/*===============================================
画面の横幅が641px以上
===============================================*/
@media screen and (min-width: 641px){
	
	
	
	
	
}