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

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


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

/* data
**********************************************************************/
.data .data-box{ background: #e7e7e7; margin: 0 -15px; padding: 15px;}
.data .logo{ display: none;}
.data .graph{ background: #fff; margin: 15px 0 0; padding: 0; position: relative; border-radius: 10px; position: relative;}
.data .graph:first-of-type{ margin-top: 0;}
.data .graph h4{ font: bold 18px/20px "游ゴシック",YuGothic,sans-serif; position: absolute; top: 10px; left: 10px;}
.data .graph h4 span{ display: block; background: #be0716; width: 20px; height: 20px; margin: 0 5px 0 0; float: left; font: 600 14px/20px "futura-pt",sans-serif; color: #fff; text-align: center;}
.data .graph p{ background: #be0716; width: 100px; height: 26px; position: absolute; top: 0; right: 0; font: 600 12px/26px "futura-pt",sans-serif; color: #fff; text-align: center;}
.data .graph p:before{ content: ""; width: 0; height: 0; position: absolute; top: 0; left: -12px; border-width: 0px 12px 26px 0; border-style: solid; border-color: transparent #be0716 transparent transparent;}

.data .graph .pc{ display: none;}

.data #graph07 ul{ margin: 10px 0 0; overflow: hidden;}
.data #graph07 ul li{ width: 31%; margin: 20px 0 0 3.5%; float: left;}
.data #graph07 ul li:nth-child(1){ margin-left: 0;}
.data #graph07 ul li:nth-child(4){ margin-left: 17%;}

.data .qa dl{ margin: 30px 0 0;}
.data .qa dl dt{ background: url(../img/data_qa_border.png) repeat-x 0 bottom / 6px 3px; margin: 0 0 10px; padding: 0 0 12px 25px; position: relative; font: bold 20px/20px "游ゴシック",YuGothic,sans-serif;}
.data .qa dl dt:before{ content: "Q"; background: #be0716; width: 20px; height: 20px; position: absolute; top: 0; left: 0; font: 600 14px/20px "futura-pt",sans-serif; color: #fff; text-align: center;}
.data .qa dl dd{ padding: 0 0 0 1em; text-indent: -1em;}
.data .qa dl dd:before{ content: "・";}


/* welfare
**********************************************************************/
.welfare .main-block > h4{ height: 90px; margin: 0 -15px; padding: 50px 15px 0; position: relative; font: bold 16px/1 "游ゴシック",YuGothic,sans-serif; color: #fff; text-align: center;}
.welfare .main-block > h4.skill{ background: url(../img/welfare_skill_bg.jpg) no-repeat center / cover;}
.welfare .main-block > h4.private{ background: url(../img/welfare_private_bg.jpg) no-repeat center / cover;}
.welfare .main-block > h4.event{ background: url(../img/welfare_event_bg.jpg) no-repeat center / cover;}
.welfare .main-block > h4.other{ background: url(../img/welfare_other_bg.jpg) no-repeat center / cover;}

.welfare .main-block > h4::before{ content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.welfare .main-block > h4.skill::before{ background: url(../img/welfare_skill_icon.svg) no-repeat center / contain; width: 23px; height: 31px; top: 14px; }
.welfare .main-block > h4.private::before{ background: url(../img/welfare_private_icon.svg) no-repeat center / contain; width: 42px; height: 20px; top: 24px; }
.welfare .main-block > h4.event::before{ background: url(../img/welfare_event_icon.svg) no-repeat center / contain; width: 26px; height: 34px; top: 13px; }
.welfare .main-block > h4.other::before{ background: url(../img/welfare_other_icon.svg) no-repeat center / contain; width: 32px; height: 32px; top: 20px; }
.welfare .main-block > h4 br{ display: none;}

@media print, screen and (max-width:359px){
  
  .welfare .main-block > h4{ padding-top: 40px; line-height: 1.3;}
  .welfare .main-block > h4.skill::before{ top: 4px; }
  .welfare .main-block > h4.private::before{ top: 14px; }
  .welfare .main-block > h4.event::before{ top: 3px; }
  .welfare .main-block > h4 br{ display: block;}
  
}

.welfare .points{ background: #eaeaea; margin: 0 -15px; padding: 15px;}
.welfare .points li{ background: #fff; margin: 10px 0 0; padding: 15px;}
.welfare .points li:first-child{ margin-top: 0;}
.welfare .points li h5{ margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid #be0716; font-size: 13px; line-height: 1; color: #be0716;}
.welfare .points li p{ overflow: hidden; line-height: 1.6;}
.welfare .points li p img{ width: 50%; float: left;}
.welfare .points li p img:nth-of-type(1),
.welfare .points li p img:nth-of-type(2){ margin: 10px 0 0;}

.welfare .pickup li{ background: url(../img/welfare_pickup_bg.png) repeat 0 0 / 3px 3px; margin: 15px 0 0;}
.welfare .pickup li h4{ height: 51px; padding: 0 0 0 102px; position: relative; border-bottom: 1px solid rgba(190,7,22,.5); font: bold 16px/50px "游ゴシック",YuGothic,sans-serif; color: #be0716;}
.welfare .pickup li h4 span{ display: block; background: url(../img/welfare_pickup_icon.svg) no-repeat center 9px / 16px 15px #be0716; width: 77px; height: 62px; padding: 28px 0 0; position: absolute; top: -6px; left: 10px; font: 700 11px/1.2 "futura-pt",sans-serif; color: #fff; text-align: center;}
.welfare .pickup li h4 span::before{ content: ""; width: 0; height: 0; position: absolute; top: 2px; right: -4px; border: 4px solid transparent; border-top-color: #8f0718; transform: rotate(45deg);}
.welfare .pickup li > div{ display: table; padding: 10px; overflow: hidden;}
.welfare .pickup li > div div{ display: table-cell; background: #fff; width: 120px; height: 100px; position: relative; overflow: hidden; vertical-align: middle;}
.welfare .pickup li > div div img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.welfare .pickup li:nth-child(1) > div div img{ width: 100%;}
.welfare .pickup li:nth-child(2) > div div img{ width: auto; max-width: none; height: 100%;}
.welfare .pickup li > div dl{ display: table-cell; width: calc(100% - 120px); padding: 0 0 0 10px; vertical-align: middle;}
.welfare .pickup li > div dl dt{ font: bold 13px/1.4 "游ゴシック",YuGothic,sans-serif; color: #be0716;}
.welfare .pickup li > div dl dd{ line-height: 1.5;}

@media print, screen and (max-width:369px){
  
  .welfare .pickup li > div{ display: block;}
  .welfare .pickup li > div div{ display: block; width: 100%; height: 0; padding-top: calc(278 / 400 * 100%);}
  .welfare .pickup li > div dl{ display: block; width: 100%; margin: 10px 0 0; padding: 0;}
  .welfare .pickup li > div dl dt{ margin: 0 0 5px;}
  
}


/* outline
**********************************************************************/
.outline .main-block dl{ background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px;}
.outline .main-block dl dt{ background: url(../../common/img/border_dot.png) repeat-x 0 0 / 2px 1px #f6f6f6; padding: 10px 15px; font-weight: bold;}
.outline .main-block dl dd{ padding: 10px 15px;}
.outline .main-block dl dd > ul > li{ padding: 0 0 0 1em; text-indent: -1em;}
.outline .main-block dl dd > ul > li ul li{ padding: 0 0 0 1em; text-indent: -1em;}
.outline .main-block dl dd > ul > li ul li::before{ content: "・";}

.outline .additional-block dl dt{ background: #be0716; padding: 10px 15px; color: #fff;}
.outline .additional-block dl dd{ padding: 10px 15px;}



/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
  
  /* data
  **********************************************************************/
  .data .data-box{ margin: 0 -20px; padding: 30px 20px 50px;}
  .data .graph-box{ width: 980px; padding: 23px 0 0 0; overflow: hidden;}
  
  .data .logo{ display: block; background: #be0716; width: 134px; height: 175px; padding: 32px 18px 0; position: absolute; top: 510px; left: 506px; border-radius: 10px;}
  
  .data .graph{ margin: 0;}
  
  .data .graph h4{ font-size: 23px; line-height: 25px; top: 25px; left: 25px;}
  .data .graph h4 span{ width: 25px; height: 25px; margin-left: 0; font-size: 19px; line-height: 25px;}
  .data .graph p{  width: 120px; height: 32px; font-size: 14px; line-height: 32px;}
  .data .graph p:before{ left: -16px; border-width: 0px 16px 32px 0;}
  
  .data #graph01{ width: 980px; height: 320px; margin: 0 0 22px 0;}
  .data #graph01 .pc img{ margin: -23px 0 0 0;}
  .data #graph02{ width: 479px; height: 345px; margin: 0 22px 22px 0; float: left;}
  .data #graph03{ width: 479px; height: 345px; margin: 0 0 22px 0; float: left;}
  
  .data #graph04{ width: 479px; height: 262px; margin: 0 22px 22px 0; float: left;}
  .data #graph05{ width: 479px; height: 262px; margin: 0 0 22px 0; float: left;}
  .data #graph06{ width: 479px; height: 262px; margin: 0 22px 0 0; float: left;}
  .data #graph07{ width: 479px; height: 262px; float: left;}
  
  .data .graph .pc{ display: block;}
  .data .graph .sp{ display: none;}
  
  .data #graph07 ul{ display: table; margin: 40px auto 0;}
  .data #graph07 ul li{ width: 150px; margin: 0 0 0 28px;}
  .data #graph07 ul li:nth-child(1){ margin-left: 0;}
  .data #graph07 ul li:nth-child(4){ margin-left: 28px;}
  
  .data .qa{ margin: 50px 0 0; overflow: hidden;}
  .data .qa dl{ width: 470px; margin-top: 0; float: left;}
  .data .qa dl:last-child{ float: right;}
  .data .qa dl dt{ margin: 0 0 20px; padding: 0 0 15px 38px; font-size: 23px; line-height: 25px;}
  .data .qa dl dt:before{ width: 25px; height: 25px; left: 4px; font-size: 19px; line-height: 25px;}
  
  
  /* welfare
  **********************************************************************/
  .welfare .main-block > h4{ height: 180px; margin: 40px 0 0; padding: 0 0 0 40px; line-height: 180px; font-size: 22px;}
  .welfare .main-block > h4:first-of-type{ margin-top: 0;}
  
  .welfare .main-block > h4::before{ transform: none!important;}
  .welfare .main-block > h4.skill::before{ width: 33px; height: 44px; top: 60px; left: 250px;}
  .welfare .main-block > h4.private::before{ width: 66px; height: 32px; top: 73px; left: 230px;}
  .welfare .main-block > h4.event::before{ width: 49px; height: 64px; top: 50px; left: 310px;}
  .welfare .main-block > h4.other::before{ width: 64px; height: 64px; top: 55px; left: 411px;}

  .welfare .points{ margin: -87px -20px 0; padding: 107px 20px 40px;}
  .welfare .points li{ display: table; width: 100%; margin-top: 10px; padding: 25px 0;}
  .welfare .points li h5{ display: table-cell; width: 171px; margin: 0; padding: 0 0 0 30px; border-bottom: none; border-right: 1px solid #be0716; font-size: 14px; vertical-align: middle;}
  .welfare .points:nth-of-type(4) li h5{ width: 231px;}
  .welfare .points:nth-of-type(4) li:nth-child(2) h5{ padding-top: 1em; vertical-align: top;}
  .welfare .points:nth-of-type(5) li h5{ width: 260px;}
  .welfare .points li p{ display: table-cell; padding: 0 30px; vertical-align: middle;}
  .welfare .points li p img{ width: 25%; margin: 10px 0 0;}
  
  .welfare .pickup{ overflow: hidden;}
  .welfare .pickup li{ margin-top: 40px;}
  .welfare .pickup li:nth-child(1){ width: 510px; float: left;}
  .welfare .pickup li:nth-child(2){ width: 430px; float: right;}
  .welfare .pickup li h4{ height: 61px; padding-left: 128px; font-size: 20px;  line-height: 60px;}
  .welfare .pickup li h4 span{ background-size: 20px 18px; width: 99px; height: 72px; padding: 32px 0 0; left: 15px; font-size: 14px;}
  .welfare .pickup li > div{ padding: 15px;}
  .welfare .pickup li > div div{ width: 200px; height: 139px;}
  .welfare .pickup li > div div img{ width: 100%!important; height: auto!important; position: static; -webkit-transform: none; transform: none;}
  .welfare .pickup li > div dl{ width: calc(100% - 200px); padding: 0 10px 0 20px;}
  .welfare .pickup li > div dl dt{ font-size: 15px; letter-spacing: -1px;}
  .welfare .pickup li > div dl dd{ margin: 14px 0 0;}
  
  
  /* outline
  **********************************************************************/
  .outline .main-block dl{ position: relative; overflow: hidden;}
  .outline .main-block dl::before{ content: ""; background: #f6f6f6; width: 214px; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
  .outline .main-block dl dt{ background-color: none; width: 214px; padding: 20px 40px; float: left; clear: both;}
  .outline .main-block dl dd{ background: url(../../common/img/border_dot.png) repeat-x 0 0 / 2px 1px; width: calc(100% - 214px); padding: 20px 40px; float: left;}
  .outline .main-block dl dd.executive ul > li{ float: left;}
  .outline .main-block dl dd.executive ul > li::after{ content: "／"; margin: 0 10px;}
  .outline .main-block dl dd.executive ul > li:last-child::after{ display: none;}
  .outline .main-block dl dd.staff br{ display: none;}
  
  .outline .additional-block dl{ background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px; overflow: hidden;}
  .outline .additional-block dl dt{ background: url(../../common/img/border_dot.png) repeat-x 0 0 / 2px 1px; width: 172px; padding: 15px 10px; float: left; color: #be0716; clear: both;}
  .outline .additional-block dl dd{ background: url(../../common/img/border_dot.png) repeat-x 0 0 / 2px 1px; width: calc(100% - 172px); padding: 15px 10px; float: left;}
  
}



@media print, screen and (min-width:1020px){
  
  /* data
  **********************************************************************/
  .data .data-box{ margin: 0 calc((100vw - 980px) / 2 * -1); padding: 30px calc((100vw - 980px) / 2) 50px;}
  
  
  /* welfare
  **********************************************************************/
  .welfare .points{ width: 100vw; margin: -87px calc((100vw - 980px) / 2 * -1) 0; padding: 107px calc((100vw - 980px) / 2) 40px;}
  
}