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

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


/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height:100%; overflow-y:scroll;}
body{ height:100%; margin:0; padding:0; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:12px; word-break:normal; -webkit-text-size-adjust:100%;}
img{ width:100%; max-width:100%; height:auto; border:0; font-size:0; line-height:0; vertical-align:bottom;}
form{ margin:0; padding:0;}
p{ margin:0; padding:0;}
a, a:hover{ text-decoration:none; outline:none;}
h1, h2, h3, h4, h5, h6{ margin:0; padding:0; font-size:0; line-height:0;}
ul, dl, dt, dd{ margin:0; padding:0;}
li, ol{ margin:0; padding:0; list-style:none;}
table{ border:0; border-collapse:collapse; border-spacing:0;}
caption, th{ text-align:left;}
.clear{ clear:both; margin:0; padding:0; font-size:0; line-height:0;}
sup{ font-size:60%;}
header, nav, article, aside, section, footer{ display:block;}
*{ box-sizing:border-box;}



/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
body{ color:#181D1E;}
.sp,.sptb{ display:block;}

/* header
**********************************************************************/
header{ background:#FFF; height:64px; padding:18px 15px 0; border-top:#74C1BD 2px solid;}
header h1{ overflow:hidden;}
header h1 a{ display:block;}
header h1 a img:first-child{ width:76px; padding:0 18px 0 0; float:left;}
header h1 a img:last-child{ width:80px; padding:10px 0 0; float:left;}

/* main
**********************************************************************/
main{ display:block; background:url(../img/main_bg.jpg) no-repeat center top; background-size:cover; padding:20px 15px 15px; position:relative; color:#FFF;}
main div h2 img{ display:block; margin:0 auto;}
main div > p{ margin:20px 0; padding:14px 0; border-top:#B9E0DE 1px solid; border-bottom:#B9E0DE 1px solid; text-align:center;}


/* cast
**********************************************************************/
.cast{ padding:35px 15px 50px;}
.cast > li{ background:#FFF; margin:0 0 35px;}
.cast > li:last-child{ margin:0;}
.cast > li > a{ display:block; padding:0 0 12px; color:#000;}
.cast > li > a h3{ padding:0 14px; margin:20px 0; font-size:16px; line-height:1.5;}

/*position*/
.position{ height:35px; padding:0 0 0 83px; position:relative; font-size:16px; color:#FFF; line-height:35px;}
.it .position{ background-color:#2A75C2;}
.business .position{ background-color:#794E92;}
.game .position{ background-color:#CA2F06;}
.cg .position{ background-color:#EC8500;}
.design .position{ background-color:#EA6885;}

.position:before{ content:""; display:block; background-size:70% !important; width:35px; height:35px; position:absolute; top:0; left:0; z-index:2;}
.it .position:before{ background:url(../img/icon_it.png) no-repeat center right #0095DD;}
.business .position:before{ background:url(../img/icon_business.png) no-repeat center right #8F67A6;}
.game .position:before{ background:url(../img/icon_game.png) no-repeat center right #E94628;}
.cg .position:before{ background:url(../img/icon_cg.png) no-repeat center right #D76D00;}
.design .position:before{ background:url(../img/icon_design.png) no-repeat center right #FD7690;}

.position:after{ content:""; display:block; width:0; height:0; position:absolute; top:0; left:0; border:35px solid transparent;}
.it .position:after{ border-top-color:#0095DD;}
.business .position:after{ border-top-color:#8F67A6;}
.game .position:after{ border-top-color:#E94628;}
.cg .position:after{ border-top-color:#D76D00;}
.design .position:after{ border-top-color:#FD7690;}




/* footer
**********************************************************************/
footer{ background:#74C1BD; position:relative; color:#FFF; text-align:center;}

footer > a{ display:block; background:#5EADA9; width:38px; height:38px; position:absolute; bottom:17px; right:15px; border-bottom:2px solid #459491; overflow:hidden; text-indent:100%; white-space:nowrap;}
footer > a:before{ content:""; display:block; width:8px; height:8px; margin:-2px 0 0 -5px; position:absolute; top:50%; left:50%; border:1px solid #FFF; border-right:none; border-bottom:none; transform:rotate(45deg);}

footer .ftTxt{ padding:22px 0 30px;}
footer .ftTxt .ftTop a{color:#FFF;}
footer .ftTxt .ftTop a img{ width:58px;}
footer .ftTxt .ftTop dl{ margin:20px 0 34px;}
footer .ftTxt .ftTop dl dt{ margin:0 0 20px; font-weight:bold;}
footer .ftTxt .flBottom ul{ display:none;}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
  .sp{ display:none;}
  
  /* header
  **********************************************************************/
  header{ padding:12px 20px 0;}
  header h1{ max-width:950px; margin:0 auto;}
  header h1 a img:first-child{ width:106px; padding:0 20px 0 0;}
  header h1 a img:last-child{ width:160px; padding:12px 0 0;}
  
  
    /* main
  **********************************************************************/
  main div h2 img{ max-width:745px;}
  main div > p{ max-width:745px; margin:20px auto; padding:15px 0; font-size:15px;}
  
  /* cast
  **********************************************************************/
  .cast{ padding:35px 2% 30px 0; overflow:hidden;}
  .cast > li{ width:48%; margin:0 0 20px 2%; float:left;}
  .cast > li:last-child{ margin:0 0 20px 2%;}
  
  .cast > li > a h3{ margin:14px 0; font-size:13px;}
  
  
  /* footer
  **********************************************************************/
  footer > a{ width:62px; height:62px; bottom:17px; right:15px; border-bottom-width:3px;}
  footer > a:before{ width:14px; height:14px; margin:-4px 0 0 -8px; border-width:2px;}


}


/*************************************************************************************************************************
* 1024px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:1024px){
  
  .sptb{ display:none;}
  
  /* header
  **********************************************************************/
  header{ padding:12px 0 0; border-top-width:3px;}
  
  
  /* cast
  **********************************************************************/
  .cast{ max-width:950px; margin:0 auto; padding:35px 0 30px;}

  .cast > li{ width:31.3333333%; margin:0 1% 20px; float:left;}
  .cast > li:last-child{ margin:0 1% 20px;}

  .cast > li > a div{ height:188px; overflow:hidden;}
  .cast > li > a img{ transition:all 0.3s ease-in-out 0s;}
  .cast > li > a:hover img{ transform:scale(1.1,1.1);}
  
  /*position*/
  .position{ height:30px; font-size:13px; line-height:30px;}
  .position:before{ height:30px; background-size:60% !important;}
  .position:after{ border-top-width:30px;}
  
  
  /* footer
  **********************************************************************/
  footer{ font-size:11px; text-align:left;}
  
  footer > a{ margin:0 0 0  413px; top:-30px; left:50%; transition:linear 0.05s;}
  footer > a:hover{ margin-top:3px; border-bottom-width:0;}
  
  footer .ftTxt{ width:950px; padding:16px 0 10px; margin:0 auto; overflow:hidden;}
  footer .ftTxt .ftTop{ display:table; overflow:hidden; float:left;}
  footer .ftTxt .ftTop a:hover{ opacity:0.6; transition:all 0.3s ease-in-out 0s;}
  footer .ftTxt .ftTop a img{ float:left;}
  footer .ftTxt .ftTop dl{ padding:0 0 0 30px; margin:0; float:left;}
  footer .ftTxt .ftTop dl dt{ margin:0 0 10px;}
  footer .ftTxt .flBottom{ display:table; margin:34px 0 0; text-align:right; float:right;}
  footer .ftTxt .flBottom ul{ display:block; margin:0 0 10px; overflow:hidden;}
  footer .ftTxt .flBottom ul li{ float:left;}
  footer .ftTxt .flBottom ul li:nth-child(1){ padding:0 6px 0 0;}
  footer .ftTxt .flBottom ul li:nth-child(2):before{ content:"|"; position:absolute; top:0;left:0;}
  footer .ftTxt .flBottom ul li:nth-child(2){ padding:0 0 0 12px; position:relative;}
  footer .ftTxt .flBottom ul li a{ display:block; color:#FFF;}
  footer .ftTxt .flBottom ul li a:hover{ opacity:0.4;}


}