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

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/07/14
* Last update : 2017/07/26
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* 画面幅：680px 以下
*************************************************************************************************************************/

/* menu
**********************************************************************/
.menu{ padding: 20px 16px; overflow: hidden;}

.menu li{ width: calc(100% / 3 - 6px); margin: 0 9px 0 0; padding: 3px; position: relative; float: left; transition: background .2s linear;}
.menu li:last-child{ margin-right: 0;}
.menu li.course01{ border: solid 3px #0071b4}
.menu li.course02{ border: solid 3px #de4545}
.menu li.course03{ border: solid 3px #6fb12c}
.menu li.course01:hover{ background: #0071b4;}
.menu li.course02:hover{ background: #de4545;}
.menu li.course03:hover{ background: #6fb12c;}

.menu li::before{ content: ""; width: 100%; height: 3px; position: absolute; bottom: -3px; left: -3px; z-index: 2; border-color: background .2s linear}
.menu li.course01::before{ background: #0071b4}
.menu li.course02::before{ background: #de4545}
.menu li.course03::before{ background: #6fb12c}

.menu li a{ display: block; padding: 10px 5px; position: relative;}
.menu li.course01 a{ border: solid 1px rgba(0,113,180,.4);}
.menu li.course02 a{ border: solid 1px rgba(222,69,69,.4);}
.menu li.course03 a{ border: solid 1px rgba(111,177,44,.4);}
.menu li:hover a{ border-color: rgba(255,255,255,.4);}

.menu li a::before{ content: ""; width: 0; height: 0; position: absolute; bottom: -7px; left: 50%; border-style: solid; border-width: 10px 14px 0 14px; border-color: #fff transparent transparent transparent; transform: translateX(-50%); transition: border-top-color .2s linear;}
.menu li.course01:hover a::before{ border-top-color: #0071b4;}
.menu li.course02:hover a::before{ border-top-color: #de4545;}
.menu li.course03:hover a::before{ border-top-color: #6fb12c;}

.menu li a::after{ content: ""; width: 0; height: 0; position: absolute; bottom: -1px; left: 50%; border-style: solid; border-width: 7px 5px 0 5px; transform: translateX(-50%); transition: border-top-color .2s linear;}
.menu li.course01 a::after{ border-color: #0071b4 transparent transparent transparent;}
.menu li.course02 a::after{ border-color: #de4545 transparent transparent transparent;}
.menu li.course03 a::after{ border-color: #6fb12c transparent transparent transparent;}
.menu li:hover a::after{ border-top-color: #fff;}

.menu li a p{ transition: color .2s linear;}
.menu li.course01 a p{ color: #0071b4}
.menu li.course02 a p{ color: #de4545}
.menu li.course03 a p{ color: #6fb12c}
.menu li:hover a p{ color: #fff;}

.menu li a > p{ margin: 0 0 3px; padding: 0 0 5px; font: 900 12px/1 "heisei-kaku-gothic-std"; text-align: center; transition: border-bottom-color .2s linear;}
.menu li.course01 a > p{ border-bottom: solid 1px #0071b4}
.menu li.course02 a > p{ border-bottom: solid 1px #de4545}
.menu li.course03 a > p{ border-bottom: solid 1px #6fb12c}
.menu li:hover a > p{ border-bottom-color: #fff;}

.menu li a div p:first-child{ font: 900 22px/1 "heisei-kaku-gothic-std"; text-align: center; letter-spacing: -.05rem;}
.menu li a div p:first-child span:first-child{ font: 600 30px/1 "din-2014-narrow";}
.menu li a div p:first-child span:last-child{ font-size: 14px;}

.menu li a div p:last-child{ display: table; margin: 3px auto 0; overflow: hidden; text-align: center;}
.menu li a div p:last-child span:first-child{ float: right; font: 500 12px/14px "heisei-kaku-gothic-std";}
.menu li a div p:last-child span:last-child{ float: left; font: 900 14px/1 "heisei-kaku-gothic-std";}

@media print, screen and (max-width:350px){
  .menu li a > p{ font-size: 11px;}
  .menu li a div p:first-child{ font-size: 18px;}
  .menu li a div p:first-child span:first-child{ font-size: 26px;}
  .menu li a div p:first-child span:last-child{ font-size: 12px;}
  .menu li a div p:last-child span:first-child{ font-size: 10px;}
  .menu li a div p:last-child span:last-child{ font-size: 12px;}
}


/* title
**********************************************************************/
.title{ background: url(../../common/img/bg_oblique_5.png) repeat 0 0/30px 30px; height: 88px; position: relative;}
#course01 .title{ background-color: #00567c;}
#course02 .title{ background-color: #a33333;}
#course03 .title{ background-color: #5f8c27;}

.title h3{ width: 190px; height: 0; padding-top: calc(46 / 180 * 100%); position: absolute; top: 4px; left: 12px; overflow: hidden; text-indent: 100%; white-space: nowrap;}
#course01 .title h3{ background: url(../img/course01_title_sp.svg) no-repeat 0 0/contain;}
#course02 .title h3{ background: url(../img/course02_title_sp.svg) no-repeat 0 0/contain;}
#course03 .title h3{ background: url(../img/course03_title_sp.svg) no-repeat 0 0/contain;}

@media print, screen and (max-width:365px){
  .title h3{ width: 150px; top: 8px;}
}

.title div{ display: table; position: absolute; top: 15px; right: 16px;}
.title div p{ display: table-cell; color: #fff; vertical-align: bottom;}
.title div p:first-child{ padding: 0 3px 3px 0; font: 900 12px/1 "heisei-kaku-gothic-std";}
.title div p:first-child span{ display: none;}
.title div p:last-child{ font: 900 14px/1 "heisei-kaku-gothic-std";}
.title div p:last-child span{ font: 600 25px/1 "din-2014-narrow";}

@media print, screen and (max-width:365px){
  .title div{ display: table; position: absolute; top: 18px; right: 16px;}
  .title div p:first-child{ font-size: 10px;}
  .title div p:last-child{ font-size: 12px;}
  .title div p:last-child span{ font-size: 22px;}
}

.title ul{ width: calc(100% - 32px); position: absolute; bottom: 12px; left: 16px; overflow: hidden;}
.title ul li{ background: #fff; width: calc(50% - 3px); height: 23px; float: left; border-radius: 3px; font: 900 12px/23px "heisei-kaku-gothic-std"; text-align: center;}
.title ul li:last-child{ float: right;}
#course01 .title ul li{ color: #0a5b80;}
#course02 .title ul li{ color: #8c383a;}
#course03 .title ul li{ color: #5f8c27;}


/* attention
**********************************************************************/
.attention{ padding: 20px 16px 0;}
.attention li{ padding: 0 0 0 1em; font-size: 13px; line-height: 1.6; text-indent: -1em; letter-spacing: -.05em;}
.attention li::before{ content: "※";}



/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
  
  /* menu
  **********************************************************************/
  .menu{ width: 880px; margin: 0 auto; padding: 50px 0;}
  
  .menu li{ width: 280px; margin: 0 20px 0 0;}
  
  .menu li a{ padding: 10px 16px;}

  .menu li a > p{ font-size: 18px;}

  .menu li a div{ display: table; margin: 0 auto; overflow: hidden;}

  .menu li a div p:first-child{ display: table-cell; font-size: 30px; text-align: left; letter-spacing:0; vertical-align: bottom;}
  .menu li a div p:first-child span:first-child{ font-size: 48px;}
  .menu li a div p:first-child span:last-child{ font-size: 15px;}

  .menu li a div p:last-child{ display: table-cell; padding: 0 0 0 3px; text-align: left; vertical-align: bottom;}
  .menu li a div p:last-child span:first-child{ display: block; margin: 0 0 -3px; float: none;}
  .menu li a div p:last-child span:last-child{ font-size: 15px; float: none;}
  
  
  /* title
  **********************************************************************/
  .title{ height: 56px;}
  
  .title h3{ width: 380px; height: 80px; padding-top: 0; top: -32px; left: calc((100% - 880px) / 2 - 5px);}
  #course01 .title h3{ background-image: url(../img/course01_title_pc.svg);}
  #course02 .title h3{ background-image: url(../img/course02_title_pc.svg);}
  #course03 .title h3{ background-image: url(../img/course03_title_pc.svg);}
  
  .title div{ top: 50%; right: calc((100% - 880px) / 2); transform: translateY(-50%);}
  .title div p:first-child{ padding-bottom: 6px; line-height: 1.2;}
  .title div p:first-child span{ display: block;}
  .title div p:last-child span{ font-size: 39px;}
  
  .title ul{ width: 225px; height: 30px; top: 50%; left: auto; transform: translateY(-50%);}
  #course01 .title ul{ right: calc((100% - 880px) / 2);}
  #course02 .title ul{ right: calc((100% - 880px) / 2);}
  #course03 .title ul{ right: calc((100% - 880px) / 2);}
  
  .title ul li{ width: 85px; height: 30px; font-size: 15px; line-height: 30px;}
  .title ul li:last-child{ width: 135px;}
  
  
  /* attention
  **********************************************************************/
  .attention{ width: 880px; margin: 0 auto; padding: 50px 0 0;}
  .attention li{ line-height: 1.77;}
  
}