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

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


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

.contents h3{ background: url(../../common/img/bg_dot_gray.png) repeat 0 0/13px 13px; padding: 20px 10px; font: 900 21px/1.5 "heisei-kaku-gothic-std"; color: #4d4d4d; text-align: center;}
.contents h3 span{ display: inline-block; margin: 0 0 15px; padding: 10px 20px; position: relative; border: solid 2px #4d4d4d; font: bold 14px/1 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";}
.contents h3 span::before{ content: ""; background: #fff; width: 12px; height: 12px; position: absolute; bottom: -8px; left: 50%; border: solid 2px transparent; border-bottom-color: #4d4d4d; border-left-color: #4d4d4d; transform: translateX(-50%) scaleX(.7) rotate(-45deg);}

@media print, screen and (max-width:340px){
  .contents h3{ font-size: 19px;}
  .contents h3 span{ font-size: 13px;}
}

.contents > div{ background: #f1efeb; padding: 20px 16px;}
.contents > div section{ background: #fff; padding: 20px;}
.contents > div section h4{ font: 900 20px/1.3 "heisei-kaku-gothic-std"; color: #2e919e; text-align: center;}
.contents > div section h4 span{ display: inline-block; background: url(../img/icon_car.svg) no-repeat 0 0/18px 15px; margin: 0 0 8px; padding: 1px 0 0 24px; font: 800 15px/1 "din-2014"; letter-spacing: .08em;}

@media print, screen and (max-width:330px){
  .contents > div section h4{ font-size: 19px;}
}


/* point 1
**********************************************************************/
.point1 p{ margin: 15px 0 0; font-size: 14px; line-height: 1.7;}
.point1 p strong{ font-size: 17px; color: #de4545;}
.point1 p span{ color: #6fb12c;}
.point1 .sp{ width: 100%; height: 360px; margin: 20px 0 0; position: relative;}
.point1 .sp > div{ width: 343px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.point1 .pc{ display: none;}


/* point 2
**********************************************************************/
.point2{ margin: 20px 0 0;}
.point2 h5{ margin: 15px 0 0; font-size: 13px; line-height: 1.5; text-align: center;}
.point2 h5 span{ font-weight: normal;}
.point2 h5 img{ width: 128px; margin: 0 0 10px;}
.point2 div{ background: url(../img/point02_table_sp.svg) no-repeat 0 0/cover; width: calc(100% + 2px); margin: 20px 0 0 -2px; padding-top: calc(893 / 305 * 100%);}
.point2 ul{ margin: 20px 0 0;}
.point2 ul li{ padding: 0 0 0 1em; font-size: 13px; line-height: 1.6; text-indent: -1em; letter-spacing: -.05em;}
.point2 ul li::before{ content: "※";}



/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
  
  .contents h3{ padding: 55px 0; font-size: 37px;}
  .contents h3 span{ padding: 10px 30px; font-size: 18px;}
  
  .contents > div{ padding: 50px 0;}
  .contents > div section{ width: 880px; margin: 0 auto; padding: 50px;}
  .contents > div section h4{ font-size: 24px; text-align: left;}
  .contents > div section h4 br:last-child{ display: none;}
  
  
  /* point 1
  **********************************************************************/
  .point1 p{ margin-top: 30px; font-size: 15px; line-height: 1.8;}
  .point1 .sp{ display: none;}
  .point1 .pc{ display: block; width: 780px; height: 570px; margin: 40px 0 0;}
  
  
  /* point 2
  **********************************************************************/
  .point2{ margin-top: 50px!important;}
  .point2 h5{ width: 250px; margin: 45px 0 0 15px;}
  .point2 h5 img{ width: 170px;}
  .point2 div{ background: url(../img/point02_table_pc.svg) no-repeat 0 0/cover; width: 100%; margin: -175px 0 0 0; padding-top: calc(693 / 778 * 100%);}
  .point2 ul{ margin: 20px 0 0;}
  .point2 ul li{ line-height: 1.77;}
  
  
}