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

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


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

section{ margin: -64px 0 0; padding: 84px 0 0; overflow: hidden;}
section:first-of-type{ padding: 64px 0 0;}

section h3{ background: #7fcbec; height: 50px; position: relative; border-radius: 11px 11px 0 0; font-size: 15px; font-weight: bold; color: #fff; text-align: center; line-height: 50px; }
section h3:after{ content: ""; width: 0; height: 0; position: absolute; bottom: -30px; left: 50%; border: solid 14px transparent; border-top: solid 16px #7fcbec; -webkit-transform: translate(-50%,0); transform: translate(-50%,0);}

section dl{ background: #f0f0f0; padding: 35px 20px 25px; border-radius: 0 0 11px 11px;}

section dl dt{ margin: 0 auto;}
section#solution01 dl dt{ width: 213px;}
section#solution02 dl dt{ width: 244px;}
section#solution03 dl dt{ width: 244px;}
section#solution04 dl dt{ width: 199px;}

section dl dd:first-of-type{ margin: 22px 0 0;}
section dl dd:last-of-type{ margin: 30px 0 0; text-align: justify; text-justify: inter-ideograph;}



/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
  
  section{ margin: -100px 0 0; padding: 120px 0 0;}
  section:first-of-type{ padding: 100px 0 0;}
  
  section h3{ height: 80px; font-size: 34px; line-height: 80px; }
  
  section#solution01 dl dt{ width: 426px;}
  section#solution02 dl dt{ width: 488px;}
  section#solution03 dl dt{ width: 488px;}
  section#solution04 dl dt{ width: 398px;}
  
  section dl dd:first-of-type{ margin: 46px 0 0;}
  section dl dd:last-of-type{ margin: 30px 0 0;}
  
  
}



/*************************************************************************************************************************
* 1024px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:1024px){
  
  section{ margin:35px 0 0; padding: 0;}
  section:first-of-type{ margin: 0; padding: 0;}
  
  section h3{ height: 120px; border-radius: 22px 22px 0 0; font-size: 40px; line-height: 120px;}
  section h3:after{ bottom: -44px; border-width: 18px; border-top-width: 26px;}
  section dl{ padding: 60px 50px 50px; border-radius: 0 0 22px 22px;}
  
  section dl dt{ height: 94px; margin: 0 auto;}
  section#solution01 dl dt{ background: url(../img/catch01_pc.png) no-repeat; width: 569px;}
  section#solution02 dl dt{ background: url(../img/catch02_pc.png) no-repeat; width: 652px;}
  section#solution03 dl dt{ background: url(../img/catch03_pc.png) no-repeat; width: 651px;}
  section#solution04 dl dt{ background: url(../img/catch04_pc.png) no-repeat; width: 531px;}
  section dl dt img{ display: none;}
  
  section dl dd:first-of-type{ width: 578px; height: 251px; margin-left: auto; margin-right: auto;}
  section#solution01 dl dd:first-of-type{ background: url(../img/img01_pc.png) no-repeat;}
  section#solution02 dl dd:first-of-type{ background: url(../img/img02_pc.png) no-repeat;}
  section#solution03 dl dd:first-of-type{ background: url(../img/img03_pc.png) no-repeat;}
  section#solution04 dl dd:first-of-type{ background: url(../img/img04_pc.png) no-repeat;}
  section dl dd:first-of-type img{ display: none;}
  
  
}