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

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2016/02/26
* Last update : 2020/01/29
* Made by     : Suga Yui
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/

/* pankuzu
**********************************************************************/
.pankuzu{display:none;}
.pankuzu .gion{ display: none;}


/* castBox
**********************************************************************/
.castBox{ position:relative;}
/*.castBox:after{  content:"."; display:block; height:0px; clear:both; visibility:hidden;}*/

.castBox > p{ height:22px; padding:0 10px; position:absolute; top:-10px; left:15px; font-size:12px; font-weight:bold; color:#FFF; line-height:22px;}
.it .castBox > p{ background:#0095DD;}
.business .castBox > p{ background:#8F67A6;}
.game .castBox > p{ background:#E94628;}
.cg .castBox > p{ background:#F08200;}
.design .castBox > p{ background:#FD7690;}

.castBox > p:before{ content:""; display:block; width:0; height:0; position:absolute; top:-10px; right:-10px; border:10px solid transparent;}
.it .castBox > p:before{ border-bottom-color:#0079BF;}
.business .castBox > p:before{ border-bottom-color:#77528F;}
.game .castBox > p:before{ border-bottom-color:#CF2D14;}
.cg .castBox > p:before{ border-bottom-color:#D76D00;}
.design .castBox > p:before{ border-bottom-color:#ED6984;}

.castBox > p:after{ content:""; display:block; width:10px; height:10px; position:absolute; top:0; right:0;}
.it .castBox > p:after{ background:#0095DD;}
.business .castBox > p:after{ background:#8F67A6;}
.game .castBox > p:after{ background:#E94628;}
.cg .castBox > p:after{ background:#F08200;}
.design .castBox > p:after{ background:#FD7690;}

.castBox > span{ display:block;}

.castBox div{ padding:22px 15px 0;}
.castBox div dl.name{ margin:14px 0 20px; position:relative; text-align:center;}
.castBox div dl.name dt{ margin:0 0 6px; font-size:18px; font-weight:bold;}
.castBox div dl.name dt span{ font-size:12px;}
.castBox div dl.name dd{ color:#999999;}
.castBox div dl.name:after{ content:""; display:block; width:70px; height:1px; position:absolute; bottom:-15px; left:0; border-top:#C1C0C1 1px solid;}
.castBox div dl.name .gion{ width: auto; height: 20px; vertical-align: middle;}

.castBox div dl.company{ margin:30px 0 0;}
.castBox div dl.company dt{ margin:0 0 20px; font-size:16px; font-weight:bold;}
.castBox div dl.company dt img{ display:block; width:auto; height:40px; margin:0 0 15px;}
.castBox div dl.company dd{ font-size:14px; line-height:1.6;}
.it div dl.company dd a{ color:#0095DD;}
.business div dl.company dd a{ color:#8F67A6;}
.game div dl.company dd a{ color:#E94628;}
.cg div dl.company dd a{ color:#F08200;}
.design div dl.company dd a{ color:#FD7690;}
.design div dl.company dd a{ color:#FD7690;}

.multi div ul li:first-child dl.name:after,
.multi div ul li:nth-child(2) dl.name:after{ display:none;}


/* interview
**********************************************************************/
.interview{ margin:42px 0 38px; padding:0 15px 20px;}

.interview h3{ height:57px; border-top:#DFDEDF 1px solid; border-bottom:#DFDEDF 1px solid; font-family:'Aldrich',sans-serif; font-size:19px; line-height:57px; text-align:center;}
.interview h3 span{ display:inline-block; background-size:18px 27px !important; padding:0 0 0 30px;}
.it .interview h3 span{ background:url(../img/icon_interview_it.png) no-repeat left 12px;}
.business .interview h3 span{ background:url(../img/icon_interview_bu.png) no-repeat left 12px;}
.game .interview h3 span{ background:url(../img/icon_interview_ga.png) no-repeat left 12px;}
.cg .interview h3 span{ background:url(../img/icon_interview_cg.png) no-repeat left 12px;}
.design .interview h3 span{ background:url(../img/icon_interview_de.png) no-repeat left 12px;}

.interview dl dt{ padding:0 0 0 73px; margin:36px 0 20px; position:relative; font-size:16px; font-weight:bold;}
.it .interview dl dt{ color:#3295DD;}
.business .interview dl dt{ color:#8F67A6;}
.game .interview dl dt{ color:#E94628;}
.cg .interview dl dt{ color:#F08200;}
.design .interview dl dt{ color:#FD7690;}

.interview dl dt:before{  content:""; display:block; width:50px; height:1px; position:absolute; top:18px; left:0;}
.it .interview dl dt:before{ border-top:#3295DD 1px solid;}
.business .interview dl dt:before{ border-top:#8F67A6 1px solid;}
.game .interview dl dt:before{ border-top:#E94628 1px solid;}
.cg .interview dl dt:before{ border-top:#F08200 1px solid;}
.design .interview dl dt:before{ border-top:#FD7690 1px solid;}

.interview dl dd{ font-size:14px; line-height:1.8;}
.interview dl dd.yellow,
.interview dl dd.green{ margin-top:15px;}
.interview dl dd.red span{ font-weight:bold; color:#E9381f;}
.interview dl dd.yellow span{ font-weight:bold; color:#f38e01;}
.interview dl dd.green span{ font-weight:bold; color:#00b2aa;}
.interview dl dd.red span:after,
.interview dl dd.yellow span:after,
.interview dl dd.green span:after{ content:"●";}

.it .interview dl dd a{ color:#3295DD;}
.business .interview dl dd a{ color:#8F67A6;}
.game .interview dl dd a{ color:#E94628;}
.cg .interview dl dd a{ color:#F08200;}
.design .interview dl dd a{ color:#FD7690;}


/* courseLink
**********************************************************************/
.courseLink{ background:#F6F6F6;}
.courseLink div{ position:relative;}
.courseLink div h4{ display:block; width:260px; height:28px; margin:0 0 0 -130px; position:absolute; top:-14px; left:50%; font-size:16px; font-weight:normal; color:#FFF; line-height:28px; text-align:center;}

.it .courseLink div h4{ background:#0095DD;}
.business .courseLink div h4{ background:#8F67A6;}
.game .courseLink div h4{ background:#E94628;}
.cg .courseLink div h4{ background:#F08200;}
.design .courseLink div h4{ background:#FD7690;}

.courseLink div .cast{ padding:25px 10px 30px; overflow:inherit;}
.courseLink div .cast .slick-list li{ background:#FFF; margin:0 5px; position:relative;}
.courseLink div .cast li a h5{ display:table; padding:7px 14px; font-size:11px; color:#191D1E; line-height:1.3;}
.courseLink div .cast li a h5 span{ display:table-cell; vertical-align:middle;}

.courseLink div .cast li .position{ padding:0 0 0 46px; font-size:11px;}
.courseLink div .cast li .position:before{ width:25px; height:35px;}
.courseLink div .cast li .position:after{ left:5px; border-left-width:20px; border-right-width:20px;}


/*slick*/
.slick-prev,.slick-next{ background-size:14px 26px!important; bottom:-20px!important;}
.slick-prev{ left:50%!important; margin:0 0 0 -86px;}
.slick-next{  right:50%!important; margin:0 -86px 0 0;}



/* btn
**********************************************************************/
.btn{ width:100%; overflow:hidden;}
.btn li{ display:table; width:50%; float:left;}

.btn li a{ display:table-cell; width:100%; height:56px; position:relative; border-top:#E4E4E4 1px solid; border-bottom:#E4E4E4 6px solid; font-size:12px; font-weight:bold; line-height:48px; vertical-align:middle;}
.it .btn li a,
.cg .btn li a,
.design .btn li a{ line-height:1.4;}

.btn li a:before{ content:""; display:block; width:14px; height:14px; margin:-8px 0 0 0; position:absolute; top:50%; border-right:none !important; border-bottom:none !important;}
.btn li a span{ display:table; margin:0 auto;}

.btn li:nth-child(1) a{ color:#2D2D2D;}
.btn li:nth-child(1) a:before{ left:15px; border:1px solid #bababa; transform:rotate(-45deg);}
.btn li:nth-child(1) a span{ background:url(../img/icon_btn_back.png) no-repeat left center; background-size:12px 10px; padding:0 0 0 18px;}

.btn li:nth-child(2) a{ color:#FFF;}
.it .btn li:nth-child(2) a{ background:#0095dd; border-top-color:#0095dd; border-bottom-color:#0086cd;}
.business .btn li:nth-child(2) a{ background:#8F67A6; border-top-color:#8F67A6; border-bottom-color:#794E92;}
.game .btn li:nth-child(2) a{ background:#E94628; border-top-color:#E94628; border-bottom-color:#CA2F06;}
.cg .btn li:nth-child(2) a{ background:#EC8500; border-top-color:#EC8500; border-bottom-color:#D76D00;}
.design .btn li:nth-child(2) a{ background:#FD7690; border-top-color:#FD7690; border-bottom-color:#EA6885;}

.btn li:nth-child(2) a:before{ right:15px; border:1px solid #FFF; transform:rotate(135deg);}

.btn li:nth-child(2) a span{ background-size:25px 26px !important;}
.it .btn li:nth-child(2) a span{ background:url(../img/icon_it.png) no-repeat left center; padding:0 20px 0 40px;}
.business .btn li:nth-child(2) a span{ background:url(../img/icon_business.png) no-repeat left center; padding:0 15px 0 36px;}
.game .btn li:nth-child(2) a span{ background:url(../img/icon_game.png) no-repeat left center; padding:0 10px 0 36px;}
.cg .btn li:nth-child(2) a span{ background:url(../img/icon_cg.png) no-repeat left center; padding:0 10px 0 36px;}
.design .btn li:nth-child(2) a span{ background:url(../img/icon_design.png) no-repeat left center; padding:0 20px 0 36px;}



/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
  
  body{ font-size:14px;}
  
  /* pankuzu
  **********************************************************************/
  .pankuzu{ display:block; background:url(../img/pankuzu.png) no-repeat 15px center; max-width:950px; margin:10px auto 60px; padding:0 15px; overflow:hidden; font-size:13px;}
  .pankuzu li{ padding:0 12px 0 20px; float:left;}
  .pankuzu li:nth-child(n+2){ padding:0 14px 0 24px; position:relative;}
  .pankuzu li:nth-child(n+2):before{ content:"＞"; position:absolute; top:0; left:0;}
  .pankuzu li a{ text-decoration:underline; color:#000;}
  .pankuzu li a:hover{ text-decoration:none;}
  .pankuzu li .gion{ display: inline-block; width: auto; height: 14px; vertical-align: middle;}
  
  
  /* castBox
  **********************************************************************/
  .castBox{ max-width:950px; margin:0 auto; padding:0 15px;}
  
  .castBox > p{ height:28px; padding:0 20px; top:-12px; left:30px; font-size:13px; line-height:28px;}
  .castBox > p:before{ top:-12px; right:-12px; border:12px solid transparent;}
  .castBox > p:after{ width:12px; height:12px;}
  
  .castBox div{ padding:22px 0 0;}
  
  .castBox div dl.name{ margin: 26px 0 10px; padding-bottom: 26px; }
  .castBox div dl.name:after{ bottom:-20px;}
  .castBox div dl.name dt{ font-size:25px;}
  .castBox div dl.name dt span{ font-size:18px;}
  .castBox div dl.name dd{ font-size:15px;}
  .castBox div dl.name .gion{ height: 27px;}
  
  .castBox div dl.company{ margin:40px 0 0;}
  .castBox div dl.company dt img{ height:50px;}
  
  .multi div ul:after{  content:"."; display:block; height:0px; clear:both; visibility:hidden;}
  .multi div ul li{ float:left;}
  
  .multi div ul.twoPpl li{ width:49%;}
  .multi div ul.twoPpl li:first-child{ margin:0 2% 0 0;}
  
  .multi div ul.threePpl li{ width:32%;}
  .multi div ul.threePpl li:nth-child(2){ margin:0 2%;}
  .multi div ul.threePpl li .position{ padding:0 0 0 70px; font-size:12px;}
  
  .multi div dl.name{ margin:15px 0;}
  .multi div ul li:first-child dl.name:after{ display:block;}
  .multi div ul li:last-child dl.name:after{ display:none;}
  
  .multi div ul li dl.name dt{ font-size:18px; text-align:left;}
  .multi div dl.name dt span{ font-size:13px;}
  .multi div ul li dl.name dd{ text-align:left;}
  .multi div ul.threePpl li dl.name dd{ font-size:12px; text-align:left;}
  
  
  /* interview
  **********************************************************************/
  .interview{ max-width:950px; margin:40px auto 0; padding:0 15px 50px;}
  .interview dl dt{ margin:50px 0 20px;}
  .interview dl dd{ margin:0 0 0 72px;}
  
  
  /* courseLink
  **********************************************************************/
  .courseLink div{ margin:0 auto;}
  .courseLink div h4{ width:250px; height:30px; font-size:15px; line-height:30px;}
  .courseLink div .cast{ padding:30px 10px;}
  .courseLink div .cast li a h5{ padding:14px 14px; font-size:14px;}
  .courseLink div .cast li a h5 .sptb{ display:none;}
  
  .courseLink div .cast li .position{ height:30px; padding:0 0 0 83px; font-size:13px; line-height:30px;}
  .courseLink div .cast li .position:before{ width:35px; height:30px;}
  .courseLink div .cast li .position:after{ left:0; border-left-width:35px; border-right-width:35px;}
  
  
  /* btn
  **********************************************************************/  
  .btn li a{ height:64px; border-bottom-width:8px; font-size:15px;}
  
  .btn li:nth-child(1) a:before{ left:20px;}
  .btn li:nth-child(1) a span{ background-size:15px 14px; padding:0 0 0 20px;}
  
  .btn li:nth-child(2) a:before{ right:20px;}
  .it .btn li:nth-child(2) a span{ padding:0 0 0 40px;}
  .business .btn li:nth-child(2) a span{ padding:0 0 0 36px;}
  .game .btn li:nth-child(2) a span{ padding:0 0 0 36px;}
  .cg .btn li:nth-child(2) a span{ padding:0 0 0 36px;}
  .design .btn li:nth-child(2) a span{ padding:0 0 0 36px;}
  
  .cg .btn li:nth-child(2) a span .sp{ display:inline;}

}

@media print, screen and (min-width:750px){
  .cg .btn li:nth-child(2) a span .sp{ display:none;}
}

/*************************************************************************************************************************
* 1024px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:1024px){
  
  body{font-size:15px;}
  
  /* main
  **********************************************************************/
  main{ height:100px; padding:0; overflow:hidden;}
  main div{ width:950px; margin:0 auto;}
  main div h2{  padding:30px 0 0; float:left;}
  main div h2 img{ max-width:454px; padding:0 48px 0 0; border-right:#FFF 1px solid;}
  main div > p{ margin:0; padding:0 0 0 48px; border-top:none; border-bottom:none; float:left; line-height:100px;}
  
  
  /* pankuzu
  **********************************************************************/
  .pankuzu{ background:url(../img/pankuzu.png) no-repeat left center; padding:0;}
  
  
  /* castBox
  **********************************************************************/
  .castBox { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; padding: 0; }
	
  .castBox > p{ left:15px;}
	.castBox > span { width: 552px; margin-right: 30px; }
	.castBox.multi > span { margin-right: 0; }
	.castBox > span img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; }
  .castBox div{ position: relative; flex: 1; width:370px; padding-top: 0; }
  
  .castBox div dl.name{ text-align:left;}
  .castBox div dl.name:after{ bottom:0;}
  .castBox div dl.name dt{ font-size:18px;}
  .castBox div dl.name dt span{ font-size:13px;}
  .castBox div dl.name dd{ font-size:13px;}
  .castBox div dl.name .gion{ height: 20px;}

/*  .castBox div dl.company{ padding:0; position:absolute; bottom:0; left:0;}*/
	.castBox div dl.company { margin: 0; }
	.castBox div dl.company--abs { position: absolute; left: 0; bottom: 0; }
  .castBox div dl.company dt{ font-size:15px;}
	.castBox div dl.company dt._noimg { padding-top: 10px; }
  .castBox div dl.company dd{ font-size:13px;}
  .castBox div dl.company dd.small{ font-size:12px;}
  .castBox div dl.company dd a:hover{ text-decoration:underline; }
  
  .castBox div dl.long dt{ display: flex; justify-content: space-between; align-items: flex-end; }
	.castBox div dl.long--vc dt { align-items: center; }
  .castBox div dl.long dt img{ margin-bottom: 0; }
  
	
	
	
  
  .multi > span{ width:100%; float:none;}
  .multi div{ width:100%; height:auto; padding:30px 0 0; float:none;}
  .multi div ul.threePpl li .position{ padding:0 0 0 83px; font-size:13px;}
  .multi div ul.threePpl li dl.name dd{ font-size:13px;}
  .multi div dl.company{ position:static;}
  
  
  /* interview
  **********************************************************************/
  .interview{ margin:60px auto 0; padding:0 0 80px;}
  .interview h3{ font-size:18px;}
  .interview dl{ padding:0 0 0 62px;}
  .interview dl dd a:hover{ text-decoration:underline; }
  
  
  /* courseLink
  **********************************************************************/
  .courseLink div h4{ margin:0 0 0 -475px;}
  .courseLink div .cast{ width:974px; max-width:974px; padding:35px 0 20px;}
  .courseLink div .cast .slick-list li{ margin:0 12px;}

  .courseLink div .cast .slick-list li a div{ overflow:hidden;}
  .courseLink div .cast .slick-list li a img{ transition:all 0.3s ease-in-out 0s;}
  .courseLink div .cast .slick-list li a:hover img{ transform:scale(1.1,1.1);}
  
  
  /*slick*/
  .slick-dots{ margin:38px auto 0!important;}
  .slick-prev,.slick-next{ background-size:28px 52px!important; bottom:50%!important;}
  .slick-prev{ left:0!important; margin:0 0 -26px -56px;}
  .slick-next{  right:0!important; margin:0 -56px -26px 0;}
  
  
  /* btn
  **********************************************************************/
  .btn{ width:950px; margin:0 auto; padding:30px 0 160px 0;}
  .btn li,
  .btn li a{ transition:linear 0.1s;}
  .btn li:hover{ margin:4px 0 0;}
  .btn li:hover a{ height:60px; border-bottom-width:4px;}
  
}