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

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


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

/* vision
**********************************************************************/
.vision .main-block h4{ background: url(../img/vision_main.jpg) no-repeat center / cover; height: 140px; margin: 0 -15px; padding: 20px 0 0;}
.vision .main-block h4 span{ background: #be0716; padding: 6px 6px 6px 12px; font: bold 14px/2.5 "游ゴシック",YuGothic,sans-serif; color: #fff;}

.vision .main-block p,
.vision .additional-block p{ margin: 2rem 0 0;}

.vision .additional-block dl dt{ font: bold 17px/1.75 "游ゴシック",YuGothic,sans-serif;}
.vision .additional-block dl dt span{ color: #be0716;}
.vision .additional-block dl dd{ margin: 22px 0 0;}
.vision .additional-block dl dd div{ background: #eee; height: 180px; position: relative;}
.vision .additional-block dl dd div img{ width: 175px; margin: -8px 0 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}


/* thought
**********************************************************************/
.thought .main-block section{ margin: -10px 0 0; padding: 50px 0 0;}
.thought .main-block section:nth-of-type(1){ margin-top: -40px; padding-top: -40px;}

.thought .main-block section .photo{ height: 194px; margin: 0 -15px; position: relative; overflow: hidden;}

.thought .main-block section .photo::before{ content: ""; width: calc(100% - 220px); height: 100%; position: absolute; top: 0; z-index: 2; transition: .3s linear;}
.thought .main-block section:nth-of-type(1) .photo::before{ background: linear-gradient(to right, rgba(207,214,219,1) 80%,rgba(207,214,219,0) 100%); right: 286px;}
.thought .main-block section:nth-of-type(2) .photo::before{ background: linear-gradient(to right, rgba(237,239,247,0) 0%,rgba(237,239,247,1) 20%); left: 286px;}
.thought .main-block section:nth-of-type(3) .photo::before{ background: linear-gradient(to right, rgba(222,226,238,1) 80%,rgba(222,226,238,0) 100%); right: 286px;}

.thought .main-block section .photo img{ width: 450px; max-width: none; position: absolute; top: 0;}
.thought .main-block section:nth-of-type(1) .photo img{ right: -30px;}
.thought .main-block section:nth-of-type(2) .photo img{ left: -35px;}
.thought .main-block section:nth-of-type(3) .photo img{ right: -58px;}

@media print, screen and (max-width:374px){
  .thought .main-block section:nth-of-type(odd) .photo img{ margin-right: calc((100% - 375px) / 2);}
  .thought .main-block section:nth-of-type(even) .photo img{ margin-left: calc((100% - 375px) / 2);}
}

.thought .main-block section .text{ margin: -150px 0 0; position: relative; z-index: 2;}
.thought .main-block section .text h4{ height: 84px; margin: 0 -15px;}
.thought .main-block section:nth-of-type(even) .text h4{ text-align: right;}
.thought .main-block section .text h4 span{ background: #be0716; padding: 6px 6px 6px 12px; font: bold 14px/2.5 "游ゴシック",YuGothic,sans-serif; color: #fff;}

.thought .main-block section .text h5{ height: 90px; font: bold 13px/1 "游ゴシック",YuGothic,sans-serif;}
.thought .main-block section:nth-of-type(even) .text h5{ text-align: right;}
.thought .main-block section .text h5 span{ display: inline-block; margin: 0 1em 0 0; font-size: 12px;}

.thought .main-block section .text p{ margin: 2rem 0 0; line-height: 1.8;}
.thought .main-block section .text p:nth-of-type(1){ margin-top: 0;}



/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
  
  /* vision
  **********************************************************************/
  .vision .main-block h4{ height: 370px; margin: 0; padding-top: 80px;}
  .vision .main-block h4 span{ padding: 10px 10px 10px 20px; font-size: 28px; line-height: 2; letter-spacing: 3px;}
  
  .vision .additional-block dl{ position: relative;}
  .vision .additional-block dl dt{ font-size: 19px;}
  .vision .additional-block dl dd{ margin-top: 25px; padding: 0 430px 0 0;}
  .vision .additional-block dl dd div{ width: 370px; height: 100%; min-height: 270px; position: absolute; top: 0; right: 0;}
  .vision .additional-block dl dd div img{ width: 206px; margin-top: -15px;}
  
  
  /* thought
  **********************************************************************/
  .thought .main-block section{ margin-top:-47px; padding-top: 97px; position: relative;}
  .thought .main-block section:nth-of-type(1){ margin-top: -47px; padding-top: 47px;}
  
  .thought .main-block section .photo{ width: calc(100% + 40px); height: 630px; margin: 0 -20px;}
  .thought .main-block section .photo::before{ display: none;}
  .thought .main-block section .photo img{ width: 100%; min-width: 1200px; margin: 0 calc((100% - 1200px) / 2); left: 0!important;}
  
  .thought .main-block section .text{ background: #fff; width: 520px; min-height: 580px; margin-top: 0; padding: 50px 60px 40px; position: absolute; top: 92px; left: 0; border-top: 5px solid #be0716;}
  .thought .main-block section:nth-of-type(1) .text{ top: 42px;}
  .thought .main-block section:nth-of-type(even) .text{ left: auto; right: 0;}
  
  .thought .main-block section .text h4{ height: auto; margin: 0;}
  .thought .main-block section:nth-of-type(even) .text h4{ text-align: left;}
  .thought .main-block section .text h4 span{ background: none; padding: 0; font-size: 20px; line-height: 1.6; color: #be0716;}
  
  .thought .main-block section .text h5{ height: auto; margin: 20px 0 0; font-size: 16px;}
  .thought .main-block section:nth-of-type(even) .text h5{ text-align: left;}
  .thought .main-block section .text h5 span{ font-size: 13px;}
  
  .thought .main-block section .text p:nth-of-type(1){ margin-top: 2rem;}
  
}



@media print, screen and (min-width:1020px){
  
  /* thought
  **********************************************************************/
  .thought .main-block section .photo{ width: 100vw; margin: 0 calc(((100vw - 980px) / 2) * -1);}
  
}



@media print, screen and (min-width:1200px){
  
  /* thought
  **********************************************************************/
  .thought .main-block section .photo img{ margin: 0;}
  
}