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

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


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

.award{ background: #f2eaba; width: 100%; margin: 55px 0 0 0; }
.award dl{ width: 100%; position: relative;}
.award dl dt{ width: 80px; position: absolute; top: -45px; left: calc((100vw - 80px) / 2);}
.award dl dd{ width: 100%; padding: 40px 16px 20px 16px;}

.contents{ padding: 20px 16px 40px!important; overflow: hidden;}


/* main
**********************************************************************/
main{ background: url(../img/man_bg_sp.png) no-repeat center/cover; width: 100%; padding: 18px 0 0; color: #595757; text-align: center;}
main h2{ margin: 0 0 13px; font-size: 14px; line-height: 1.6;}
main h2 br:nth-child(1),
main h2 br:nth-child(2),
main h2 br:nth-child(4){ display: none;}
main h3{ font-size: 23px; line-height: 1.2;}
main p{ margin: 20px 0 0; padding: 10px 8px; border: solid 1px #595757; font-weight: bold; font-size: 15px; line-height: 1.4;}
main p span{ display: block; font-size: 13px;}
main p span sup{ margin: 0 0 0 -5px; font-size: 10px;}


/* bnr
**********************************************************************/
.bnr li a{ display: block; width: 100%; height: 0; margin: 18px 0 0; padding-top: calc(316 / 343 * 100%); position: relative; font-size: 0; line-height: 0;}

.bnr li a.apply{ background: url(../img/bnr01_sp.png) no-repeat center/contain;}
.bnr li a.connector{ background: url(../img/bnr02_bg_sp.png) no-repeat center/contain;}
.bnr li a.connector span{ display: block; width: 47.8464%; position: absolute; top: 23%; right: -5%; border-radius: 50%; transition: background-color .3s linear;}
.bnr li a.connector:hover span{ background-color: rgba(255,255,255,.2);}


/* about
**********************************************************************/
.about{ margin: 15px 0 0;}
.about h3{ display: table; margin: 0 auto; font-size: 20px; line-height: 1.3; color: #595757;}
.about h3 span{ display: block; font-size: 12px;}
.about h4{ margin: 15px 0 0; font-size: 21px; line-height: 1.2; color: #328296; text-align: center;}
.about p{ margin: 20px 0 0; font-size: 13px; line-height: 1.7; color: #595757;}
.about p span{ display: block; font-size: 12px;}
.about ul{ margin: 0 0 -10px;}
.about ul li{ min-height: 100px; margin: 10px 0 0; padding: 12px 12px 12px 105px; position: relative; border: solid 1px #c8c9ca; overflow: hidden; font-weight: bold; font-size: 13px; line-height: 1.6; color: #328296;}
.about ul li::before{ width: 58px; height: 58px; padding: 0 0 25px; position: absolute; top: 50%; left: 23px; transform: translateY(-50%); font-size: 20px; line-height: 1; text-align: center;}
.about ul li:nth-child(1)::before{ content: "01"; background: url(../img/about_point01.png) no-repeat center bottom/contain;}
.about ul li:nth-child(2)::before{ content: "02"; background: url(../img/about_point02.png) no-repeat center bottom/contain;}
.about ul li:nth-child(3)::before{ content: "03"; background: url(../img/about_point03.png) no-repeat center bottom/contain;}


/* solution
**********************************************************************/
.solution{ margin: 20px 0 0;}
.solution h5{ font-weight: normal; font-size: 15px; line-height: 1; color: #595757; text-align: center;}
.solution div{ background: url(../img/solution_img_sp.png) no-repeat center/contain; width: 100%; height: 0; margin: 15px 0 0; padding-top: calc(495 / 334 * 100%); overflow: hidden; white-space: nowrap; text-indent: 100%;}
.solution ul{ overflow: hidden;}
.solution ul li{ width: calc(50% - 3px); float: left;}
.solution ul li:last-child{ float: right;}
.solution ul li a{ display: block; height: 0; padding-top: calc(128 / 168 * 100%); overflow: hidden; white-space: nowrap; text-indent: 100%;}
.solution ul li:first-child a{ background: url(../img/solution_link01_sp.png) no-repeat center/contain;}
.solution ul li:last-child a{ background: url(../img/solution_link02_sp.png) no-repeat center/contain;}
.solution ul li p{ padding: 3px 0 0 0; font-size: 10px; text-align: center;}


/* flow
**********************************************************************/
.flow{ margin: 20px 0 0;}
.flow h5{ font-size: 15px; line-height: 1; color: #328296; text-align: center;}
.flow ul{ width: 260px; margin: 15px auto 0;}
.flow ul li{ height: 44px; margin: 5px 0 0; position: relative; border: solid 2px #328296; border-radius: 22px; font-size: 14px; line-height: 40px; color: #328296; text-align: center;}
.flow ul li:last-child::before{ display: none;}
.flow ul li::before{ content: ""; background: url(../img/flow_arrow.svg) no-repeat center/contain #fff; width: 20px; height: 20px; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%) rotate(90deg); z-index: 2;}
.flow ul li br{ display: none;}


/* btns
**********************************************************************/
.btns{ margin: 20px 0 0;}
.btns li a{ display: block; height: 44px; margin: 9px 0 0; border: solid 2px #e3007f; border-radius: 22px; font-weight: bold; font-size: 18px; line-height: 40px; color: #e3007f; text-align: center; transition: background .3s linear, color .3s linear;}
.btns li a:hover{ background: #e3007f; color: #fff;}


/* modal
**********************************************************************/
.modal{ display: none; background: rgba(0,0,0,.9); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000;}
.modal .overlay{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.modal .read{ background: #fff; width: calc(100% - 32px); padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.modal .read .close{ display: block; background: url(../../common/img/nav_close.svg) no-repeat 0 0 / cover; width: 50px; height: 50px; position: absolute; top: -50px; right: -15px; overflow: hidden; text-indent: 100%; white-space: nowrap;;}
.modal .read p{ font-weight: bold; font-size: 13px; line-height: 1.6; color: #595757; text-align: center;}

.modal .read ul{ margin: 25px 0 0; overflow: hidden;}
.modal .read ul li{ width: 50%; float: left; border-left: solid 1px #ccc; text-align: center;}
.modal .read ul li:last-child{ border-right: solid 1px #ccc;}
.modal .read ul li a{ padding: 5px 0 5px 20px; position: relative; font-weight: bold; font-size: 13px; line-height: 1.6; color: #595757;}
.modal .read ul li a::before{ content: ""; background: url(../img/icon_pdf.svg) no-repeat center/contain; width: 15px; height: 15px; position: absolute; top: 4px; left: 0;}
.modal .read ul li a:not(.unread)::before{ display: block; background: none; width: 8px; height: 3px; top: .5em; border-left: 2px solid #3498db; border-bottom: 2px solid #3498db; transform: rotate(-45deg);}
.modal .read ul li a:hover{ color: #ea4c3a;}

.modal .read .apply2{ display: block; width: 280px; height: 44px; margin: 30px auto 0; border: solid 2px #e3007f; border-radius: 22px; font-weight: bold; font-size: 14px; line-height: 40px; color: #e3007f; text-align: center; transition: background .3s linear, color .3s linear;}
.modal .read .apply2:hover{ background: #e3007f; color: #fff;}
.modal .read .apply2.disable{ border-color: #ccc; color: #ccc; cursor: default;}
.modal .read .apply2.disable:hover{ background: none; color: #ccc;}
.modal .read .apply2:last-of-type{  margin: 10px auto 0; }



/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
  
  .award{ height: 100px; margin: 30px 0 0 0; position: relative;}
  .award dl{ width: 650px; overflow: hidden; position: absolute; top: -12px; left: calc((100vw - 700px) / 2);}
  .award dl dt{ width: 125px; position: static; float: left;}
  .award dl dd{ width: 513px; padding: 26px 0 0 0; float: right;}

  .contents{ width: 980px; margin: 0 auto; padding: 50px 0 70px!important;}
  
  
  /* main
  **********************************************************************/
  main{ background-image: url(../img/man_bg_pc.png); height: 199px; padding: 0; position: relative;}
  main h2{ margin: 0; position: absolute; top: 40px; left: 40px; font-size: 18px; line-height: 1.3;}
  main h2 br:nth-child(1),
  main h2 br:nth-child(2),
  main h2 br:nth-child(4){ display: block;}
  main h3{ position: absolute; top: 20px; right: 30px; font-size: 34px; letter-spacing: .02em;}
  main h3 br:first-child{ display: none;}
  main p{ width: 690px; margin: 0; padding: 5px 8px; position: absolute; bottom: 25px; right: 30px; font-size: 20px; line-height: 1.4;}
  main p span{ font-size: 16px;}
  
  
  /* bnr
  **********************************************************************/
  .bnr li a.apply{ background-image: url(../img/bnr01_pc.png); height: 250px; margin-top: 0; padding-top: 0;}
  .bnr li a.connector{ background-image: url(../img/bnr02_bg_pc.png); height: 294px; margin-top: 12px; padding-top: 0;}
  .bnr li a.connector span{ background: url(../img/bnr02_btn_pc.png) no-repeat center/contain; width: 253px; height: 253px; padding-top: 0; top: 50%; right: 155px; transform: translateY(-50%);}
  .bnr li a.connector span img{ display: none;}
  
  
  /* about
  **********************************************************************/
  .about h3{  font-size: 28px;}
  .about h3 span{ font-size: 17px;}
  .about h4{ margin: 10px 0 -15px; font-size: 34px; line-height: 1.3;}
  .about h4 br:first-child{ display: none;}
  .about p{ margin-top: 30px; font-size: 14px;}
  .about p span{ font-size: 12px; text-align: right;}
  .about ul{ width: 850px; margin: 25px auto 0; overflow: hidden;}
  .about ul li{ width: 270px; min-height: 270px; margin: 0 20px 0 0; padding: 120px 15px 15px 15px; float: left; font-size: 14px;}
  .about ul li:last-child{ margin-right: 0;}
  .about ul li::before{ width: 74px; height: 74px; padding-bottom: 30px; top: 10px; left: 50%; transform: translateX(-50%)!important; font-size: 26px;}
  
  
  /* solution
  **********************************************************************/
  .solution{ margin-top: 30px;}
  .solution h5{ font-size: 16px;}
  .solution div{ background-image: url(../img/solution_img_pc.png); width: 891px; height: 680px; margin: 15px auto 0; padding-top: 0;}
  .solution ul{ overflow: hidden;}
  .solution ul li{ width: 464px; }
  .solution ul li a{ height: 338px; padding-top: 0;}
  .solution ul li:first-child a{ background-image: url(../img/solution_link01_pc.png);}
  .solution ul li:last-child a{ background-image: url(../img/solution_link02_pc.png);}
  .solution ul li p{ padding: 5px 0 0 0; font-size: 13px;}
  .solution ul li p br{ display: none;}
  
  
  /* btns
  **********************************************************************/
  .btns{ width: 630px; margin: 40px auto 0; overflow: hidden;}
  .btns li a{ width: 290px; height: 52px; margin: 0; float: left; border-radius: 26px; font-size: 21px; line-height: 48px;}
  .btns li:last-child a{ float: right;}
  
  
  /* flow
  **********************************************************************/
  .flow{ margin-top: 30px;}
  .flow h5{ font-size: 16px;}
  .flow ul{ width: 963px; overflow: hidden;}
  .flow ul li{ width: 148px; height: 148px; margin: 0 15px 0 0; float: left; border-radius: 50%; line-height: 144px;}
  .flow ul li:nth-child(1),
  .flow ul li:nth-child(4),
  .flow ul li:nth-child(5){ padding: 55px 0 0; line-height: 1.1;} 
  .flow ul li:last-child{ margin-right: 0;}
  .flow ul li::before{ width: 36px; height: 36px; top: 50%; left: auto; right: -25px; transform: translateY(-50%) rotate(0)!important;}
  .flow ul li br{ display: block;}
  
  
  /* modal
  **********************************************************************/
  .modal .read{ width: 500px; padding: 70px;}
  .modal .read p{ font-size: 14px;}
  /*.modal .read p br{ display: none;}*/
  
  .modal .read ul{ width: 340px; margin: 30px auto 0;}
  .modal .read ul li a{ padding-left: 23px; font-size: 14px;}
  .modal .read ul li a::before{ top: 5px;}
  
  .modal .read .apply2{ display: block; width: 340px; height: 52px; margin-top: 40px;  border-radius: 26px; font-size: 18px; line-height: 48px;}
  .modal .read .apply2:last-of-type{ margin-top: 20px;}
  

}