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

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/03/31
* Last update : 2017/04/01
* Made by     : Murata Hiroyuki
* 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; word-break: break-all; -webkit-text-size-adjust: 100%; text-align: justify; text-justify: inter-ideograph;}
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, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}



/*************************************************************************************************************************
* 画面幅：640px 以下
*************************************************************************************************************************/
html{ color: #333;}

body#home{ padding-top: 395px;}
body#detail{ padding-top: 45px;}

.loading div{ width: 50px; height: 50px; padding: 8px; background: #000000; opacity: .8; border-radius: 5px; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 100; }


/* header
**********************************************************************/
header{ background: #4db1a7; width: 100%; height: 45px; position: fixed; top: 350px; left: 0; z-index: 10;}
header h1{ opacity: 0; width: 240px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); transition: opacity .2s linear;}
header h1.on{ opacity: 1;}
header > a{ display: block; background: url(../img/nav_open.svg) no-repeat center / 14px 12px; width: 60px; height: 45px; position: absolute; top: 0; right: 0; z-index: 2; border-left: 1px solid rgba(255,255,255,.5); overflow: hidden; text-indent: 100%; white-space: nowrap; transition: background .2s linear;}
header > a:hover{ background-color: #007f77;}
header > a.on{ background: url(../img/nav_close.svg) no-repeat center / 14px 14px #007f77;}

/* detail */
#detail header { top: 0;}
#detail header h1{ opacity: 1;}

@media print, screen and (max-width:400px){
  header h1{ left: 15px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%);}
  header > a{ width: 46px;}
}


/* navgation
**********************************************************************/
nav{ width: 280px; position: absolute; top: 0; right: -280px; transition: right .3s ease-in-out;}
nav.on{ right: 0;}
nav p{ background: #007e77; height: 45px; padding: 0 30px; font: 16px / 45px "DINOT-Medium"; color: #fff;}
nav dl{ background: #529b94; height: calc(100vh - 110px); overflow-y: auto;}
nav dl dt{ height: 45px; padding: 0 30px; border-bottom: 1px solid rgba(255,255,255,.5); font-weight: bold; font-size: 14px; color: #ffff00; line-height: 45px;}
nav dl dd ul li a{ display: block; background: url(../img/icon_arrow.svg) no-repeat 30px center / 5px 7px; height: 45px; padding: 0 30px 0 42px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: 14px; line-height: 45px; color: #fff; transition: background-color .2s linear;}
nav dl dd ul li a:hover{ background-color: #007f77;}


/* contents
**********************************************************************/
.contents{ min-height: 700px; padding: 15px 15px 81px; position: relative; z-index: 2;}
#home .contents{ background: url(../img/contents_bg.png) repeat center / 6px 8px #f1f1f1;}
#detail .contents{ background: #fff;}


/* work list
**********************************************************************/
.workList{ overflow: hidden;}

.workList li{ width: 100%;}
.workList li a{ display: block; background: #fff; padding: 9px 9px 12px; position: relative; border: 1px solid #e2e2e2; transition: all .3s;}
.workList li a::before,
.workList li a::after{content: ""; width: 0; height: 0; position: absolute; top: -1px; left: -1px; z-index: 2; border: 1px solid transparent;}
.workList li a:hover::before,
.workList li a:hover::after{ width: 100%; height: 100%;}
.workList li a:hover::before{ transition: width .3s, height .3s .3s;}
.workList li.it a:hover::before{ border-top-color: #0079be; border-right-color: #0079be;}
.workList li.ga a:hover::before{ border-top-color: #ce2d14; border-right-color: #ce2d14;}
.workList li.cg a:hover::before{ border-top-color: #ef8100; border-right-color: #ef8100;}
.workList li.de a:hover::before{ border-top-color: #ec6983; border-right-color: #ec6983;}
.workList li a:hover::after{ transition: height .3s, width .3s .3s;}
.workList li.it a:hover::after{ border-bottom-color: #0079be; border-left-color: #0079be;}
.workList li.ga a:hover::after{ border-bottom-color: #ce2d14; border-left-color: #ce2d14;}
.workList li.cg a:hover::after{ border-bottom-color: #ef8100; border-left-color: #ef8100;}
.workList li.de a:hover::after{ border-bottom-color: #ec6983; border-left-color: #ec6983;}

.workList li a div{ height: 0; padding-top: calc(275 / 364 * 100%); position: relative; overflow: hidden;}
.workList li a div img.wide{ width: auto; max-width: none; height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.workList li a div img.tall{ width: 100%; height: auto; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}


.workList li a p{ height: 26px; padding: 0 8px; font-size: 13px; line-height: 26px; color: #fff;}
.workList li.it a p{ background: #0079be;}
.workList li.ga a p{ background: #ce2d14;}
.workList li.cg a p{ background: #ef8100;}
.workList li.de a p{ background: #ec6983;}

.workList li a dl{ margin: 14px 0 0; padding: 0 50px 0 0; position: relative; line-height: 1.4;}
.workList li a dl:before{ content: ""; background: url(../img/icon_zoom.svg) no-repeat center / cover #e1e1e1; width: 40px; height: 40px; position: absolute; top: -2px; right: 4px; border-radius: 50%; overflow: hidden; transition: background-color .3s linear;}
.workList li.it a:hover dl:before{ background-color: #0079be;}
.workList li.ga a:hover dl:before{ background-color: #ce2d14;}
.workList li.cg a:hover dl:before{ background-color: #ef8100;}
.workList li.de a:hover dl:before{ background-color: #ec6983;}

.workList li a dl dt{ font-size: 14px; color: #000; text-align: left;}
.workList li a dl dd{ margin: 3px 0 0 2px; font: 14px / 1.4 "DINOT-Medium"; color: #aeaeae;}

.workList li.dataNone{ width: 100%; margin: 0; padding: calc((100vh - 520px)/2) 0 0 0; font-size: 12px; color: #666; text-align: center; float: none; }


/* home */
#home .workList li{ margin: 0 0 20px;}

/* detail */
@media print, screen and (max-width:641px){
  #detail .workList li a{ display: table; background: none; width: 100%; margin: 0; padding: 14px 15px; border: none; border-top: 1px solid #dedede;}
  #detail .workList li a div{ display: table-cell; width: 85px; height: 66px;  padding-top: 0; vertical-align: middle;}
  #detail .workList li a p{ display: none;}
  #detail .workList li a dl{ display: table-cell; margin: 0; padding: 0 0 0 15px; vertical-align: middle;}
  #detail .workList li a dl:before{ display: none;}
}



/* footer
**********************************************************************/
footer{ background: #4db1a7; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 20;}
footer div > a{ display: none;}
footer div ul{ display: table; width: 100%;}
footer div ul li{ display: table-cell;}
footer div ul li:nth-child(1){ width: 28%;}
footer div ul li:nth-child(2){ width: 44%;}
footer div ul li:nth-child(3){ width: 28%;}
footer div ul li a{ display: block; height: 40px; padding: 0 10px 0 28px; border-left: 1px solid rgba(255,255,255,.5); font-size: 11px; color: #fff; line-height: 40px; text-align: center; transition: background-color .3s linear;}
footer div ul li:nth-child(1) a{ background: url(../img/f_icon01.svg) no-repeat calc(50% - 2.4em) center / 18px 15px; border-left: none;}
footer div ul li:nth-child(2) a{ background: url(../img/f_icon02.svg) no-repeat calc(50% - 4.6em) center / 18px 15px;}
footer div ul li:nth-child(3) a{ background: url(../img/f_icon03.svg) no-repeat calc(50% - 2.4em) center / 18px 15px;}
footer div ul li a:hover{ background-color: #007f77;}
footer p{ background: #529b94; height: 26px; font: 11px / 26px Helvetica,Arial,"sans-serif"; color: #fff; text-align: center;}

@media print, screen and (min-width:460px){
  
  .contents{ padding-bottom: 91px!important;}
  
  /* navgation
  **********************************************************************/
  nav dl{ height: calc(100vh - 120px);}
  
  /* footer
  **********************************************************************/
  footer div ul li a{ height: 50px; padding: 0 10px 0 42px; font-size: 14px; line-height: 50px;}
  footer div ul li:nth-child(1) a{ background-size: 26px 22px;}
  footer div ul li:nth-child(2) a{ background-size: 26px 22px;}
  footer div ul li:nth-child(3) a{ background-size: 26px 22px;}
  
}



/* home
**********************************************************************/
#home main{ width: 100%; height: 350px; position: fixed; top: 0; left: 0; overflow: hidden; }

#home main div{ width: 100%; height: 350px; position: absolute; top: 0; left: 0; transform: scale(1.05,1.05);
background-image: url("../img/main_bg02.png"), url("../img/main_bg01.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: 1300px 350px, cover;
}

#home main p{ width: 80%; max-width: 372px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}



/* detail
**********************************************************************/
#detail article .gallery{ margin: 0 0 10px; overflow: hidden;}
#detail article .gallery ul .slick-dots{ bottom: -23px; line-height: 0;}
#detail article .gallery ul .slick-dots li{ width: 7px; height: 7px; margin: 0 10px;}
#detail article .gallery ul .slick-dots li button{ background: #dedede; width: 7px; height: 7px; padding: 0; border-radius: 50%; overflow: hidden; text-indent: 100%; white-space: nowrap; transition: background 0.3s ease-in-out;}
#detail article .gallery ul .slick-dots li button:before{ content:"";}
#detail article .gallery ul .slick-dots li button:hover,
#detail article .gallery ul .slick-dots li button:focus,
#detail article .gallery ul .slick-dots li.slick-active button{ background: #4daea4;}

#detail article section{ margin: 0 -15px;}

#detail article section .course{ height: 26px; padding: 0 15px; font-size: 13px; line-height: 26px; color: #fff;}
#detail article section.it .course{ background-color: #0079be;}
#detail article section.ga .course{ background-color: #ce2d14;}
#detail article section.cg .course{ background-color: #ef8100;}
#detail article section.de .course{ background-color: #ec6983;}

#detail article section .date{ display: inline-block; margin: 20px 0 0; padding: 0 12px 5px 15px; border-bottom: 1px solid #dedede; font: 14px / 1.4 "DINOT-Medium"; color: #ababab;}

#detail article section h2{ margin: 20px 0 0; padding: 0 15px; font-size: 20px; line-height: 1.4;}
#detail article section.it h2{ color: #0079be;}
#detail article section.ga h2{ color: #ce2d14;}
#detail article section.cg h2{ color: #ef8100;}
#detail article section.de h2{ color: #ec6983;}
#detail article section h2 span{ display: block; margin: 0 0 4px 0; font: 10px / 1 "DINOT-Bold";}

#detail article section dl{ margin: 25px 0 0; padding: 23px 15px; border-top: 1px solid #dedede;}
#detail article section dl dt{ display: block; margin: 20px 0 5px 0; font: 10px / 1 "DINOT-Bold";}
#detail article section.it dl dt{ color: #0079be;}
#detail article section.ga dl dt{ color: #ce2d14;}
#detail article section.cg dl dt{ color: #ef8100;}
#detail article section.de dl dt{ color: #ec6983;}

#detail article section dl dt:first-of-type{ margin-top: 0;}
#detail article section dl dd{ font-size: 13px; line-height: 1.7;}
#detail article section dl dd:first-of-type{ font-weight: bold; font-size: 15px;}
#detail article section dl dd:first-of-type span{ display: block; font-weight: normal; font-size: 12px;}

#detail .pages{ display: block; background: #4daea4; margin: 0 -15px; overflow: hidden;}
#detail .pages li a{ width: 50%; height: 45px; float: left; font-size: 14px; line-height: 45px; color: #fff; text-align: center; transition: background-color .2s linear;}
#detail .pages li:nth-child(1) a{ background: url(../img/icon_prev.svg) no-repeat 18px center / 6px 10px; padding: 0 0 0 20px; border-right: 1px solid #fff;}
#detail .pages li:nth-child(2) a{ background: url(../img/icon_next.svg) no-repeat right 18px center / 6px 10px; padding: 0 20px 0 0;}
#detail .pages li a:hover{ background-color: #007f77;}

#detail .sns{ display: table; margin: 16px auto;}
#detail .sns li{ display: table-cell; padding: 0 5px; width: 39px; vertical-align: middle;}
#detail .sns li d{ display: block;}

#detail .same-genre{ background: url(../img/contents_bg.png) repeat center / 6px 8px #fff; margin: 0 -15px -15px; border-top: 1px solid #dedede;}
#detail .same-genre > p{ display: block; height: 55px; padding: 0 0 0 40px; position: relative; font-weight: bold; font-size: 15px; color: #4daea4; line-height: 55px;}
#detail .same-genre > p:before{ content: ""; background: #4daea4; width: 15px; height: 3px; position: absolute; top: 26px; left: 15px;}
#detail .same-genre > p:after{ content: ""; width: 0; height: 0; position: absolute; top: 22px; left: 184px; border: 6px solid transparent; border-left: 9px solid #4daea4;}
#detail .same-genre > p.on:after{ top: 23px; left: 182px; border: 6px solid transparent; border-top: 9px solid #4daea4;}

#detail .same-genre .workList .slick-list{}

#detail .same-genre .workList{ height: 0; transition: height .3s linear;}
#detail .same-genre .workList .slick-prev,
#detail .same-genre .workList .slick-next{ width: 40px; height: 40px; padding: 0; z-index: 2;}
#detail .same-genre .workList .slick-prev{ left: -55px;}
#detail .same-genre .workList .slick-next{ right: -50px;}
#detail .same-genre .workList .slick-prev:after,
#detail .same-genre .workList .slick-next:after{ content: ""; width: 0; height: 0; position: absolute; top: 0; border: 20px solid transparent;}
#detail .same-genre .workList .slick-next:after{ left: 8px; border-left-color: #4daea4;}
#detail .same-genre .workList .slick-prev:after{ right: 8px;  border-right-color: #4daea4;}
#detail .same-genre .workList .slick-prev:before,
#detail .same-genre .workList .slick-next:before{ display: none;}






/*************************************************************************************************************************
* 画面幅：600px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
  
  /* contents
  **********************************************************************/
  .contents{ padding: 30px;}
  
  
  /* work list
  **********************************************************************/
  #home .workList li{ width: calc(50% - 8px); float: left;}
  #home .workList li:nth-child(even){ float: right;}
  #home .workList li.dataNone{ width: 100%; padding: calc((100vh - 550px)/2) 0 0 0;  float: none; }
  #detail .workList li{ width: calc(100% / 3 - 6px); margin: 0 9px 0 0; float: left;}
  
  
  
  /* detail
  **********************************************************************/
  #detail article section{ margin: 0 -30px;}
  #detail article section .course{ padding: 0 30px;}
  #detail article section .date{ padding-left: 30px;}
  #detail article section h2{padding: 0 30px;}
  #detail article section dl{padding: 23px 30px;}

  #detail .pages{ margin: 0 -30px;}
  #detail .pages li:nth-child(1) a{ background-position: 30px center; padding: 0 0 0 48px; text-align: left;}
  #detail .pages li:nth-child(2) a{ background-position: right 30px center; padding: 0 48px 0 0; text-align: right;}
  
  #detail .sns{ margin-top: 40px;}
  #detail .sns li{ padding: 0 10px; width: 49px;}

  #detail .same-genre > p:after{ display: none; }
  #detail .same-genre{ display: block; background: none; margin: 0; padding: 20px 40px 40px; border-top: none;}
  #detail .same-genre .workList{ height: auto!important; overflow: visible!important;}
  
}



@media print, screen and (min-width:800px){
  
  .contents{ padding-bottom: 120px!important;}
  
  /* work list
  **********************************************************************/
  #home .workList li.dataNone{ padding: calc((100vh - 570px)/2) 0 0 0; }
  
  /* navgation
  **********************************************************************/
  nav dl{ height: calc(100vh - 134px);}
  
  
  /* footer
  **********************************************************************/
  footer div{ overflow: hidden;}
  footer div > a{ display: block; width: 284px; margin: 15px 0 0 20px; float: left;}
  footer div ul{ width: 460px; float: right;}
  footer div ul li a{ height: 60px; line-height: 60px;}
  footer div ul li:nth-child(1) a{ border-left: 1px solid rgba(255,255,255,.5);}
  footer p{ height: 30px; font-size: 12px; line-height: 30px;}
  
}



/*************************************************************************************************************************
* 画面幅：1040px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:1040px){
  
  /* contents
  **********************************************************************/
  #detail .contents{ padding: 40px calc((100% - 960px) / 2);}
  
  
  /* work list
  **********************************************************************/
  /* detail */
  #detail .workList li{ width: calc(25% - 6px); margin: 0 8px 0 0; float: left;}
  
  
  /* detail
  **********************************************************************/
  
  /* detail
  **********************************************************************/
  #detail article{ overflow: hidden;}
  #detail article .gallery{ width: 620px; margin-bottom: 0; padding: 9px; float: right; border: 1px solid #dedede;}
  #detail article .gallery ul{ overflow: hidden;}
  #detail article .gallery ul li{ width: 143px; margin: 9px 0 0; float: left; border: 1px  solid #dedede; }
  #detail article .gallery ul li:nth-child(1){ width: 100%; margin-top: 0; clear: both;}
  #detail article .gallery ul li:nth-child(2){ margin-right: 9px;}
  #detail article .gallery ul li:nth-child(3){ margin-right: 10px;}
  #detail article .gallery ul li:nth-child(4){ margin-right: 9px;}
  #detail article .gallery ul li a{ display: block; height: 95px; position: relative; overflow: hidden;}
  #detail article .gallery ul li:nth-child(1) a{ height: 500px; text-align: center; }
  
  #detail article .gallery ul li a img.wide{ width: 100%; height: auto; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
  #detail article .gallery ul li a img.tall{ width: auto; height: 500px; }
  #detail article .gallery ul li iframe{ display: block; }
  
  #detail article section{ width: 320px; margin: 0; padding: 20px 0 0; float: left; border: 1px solid #dedede;}
  
  #detail article section .course{ position: relative; width: calc(100% + 1px); margin: 0 0 0 -1px;}
  #detail article section .course:after{ content: ""; width: 0; height: 0; position: absolute; top: 0; right: -26px; border: 13px solid transparent; z-index: 2;}
  #detail article section.it .course:after{  border-left-color: #0079be;}
  #detail article section.ga .course:after{  border-left-color: #ce2d14;}
  #detail article section.cg .course:after{  border-left-color: #ef8100;}
  #detail article section.de .course:after{  border-left-color: #ec6983;}
  
  
  #detail .pages{ margin: 40px 0 0;;}
  
  #detail .sns{ display: block; width: 29px; margin-top: 0; position: fixed; top: 85px; right: calc((100vw - 1050px) / 2);}
  #detail .sns li{ display: block; padding: 0; width: auto; margin: 0 0 5px;}
  
  #detail .same-genre{ margin: 20px 0 0; padding: 0;}
}




/*************************************************************************************************************************
* 画面幅：1260px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:1260px){
  
  /* contents
  **********************************************************************/
  #home .contents{ padding: 40px calc((100% - 1180px) / 2);}
  
  /* work list
  **********************************************************************/
  /* home */
  #home .workList li{ width: calc(100% / 3 - 16px); margin: 0 24px 24px 0; float: left;}
  #home .workList li:nth-child(even){ float: left;}
  #home .workList li:nth-child(3n){ margin-right: 0;}
  #home .workList li.dataNone{ width: 100%; margin: 0; padding: calc((100vh - 590px)/2) 0 0 0; float: none; }

}