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

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


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

/* title
**********************************************************************/
#vision h3{ margin: 30px 0 0; padding: 42px 0 30px; font: 300 20px/1 "heisei-kaku-gothic-std",sans-serif; letter-spacing: 3px; text-align: center;}
#vision .message h3{ background: url(../img/message_icon.svg) no-repeat center 0 / 36px 36px;}
#vision .vision h3{ background: url(../img/vision_icon.svg) no-repeat center 0 / 36px 36px;}
#vision h3 span{ display: block; margin: 0 0 8px; font: 400 12px/1 "din-2014",sans-serif; color: #dd0716; letter-spacing: 1px;}


/* message
**********************************************************************/
.message > div{ padding: 0 0 30px;}
.message .photo{ background: url("../img/messege_img_sp.jpg") no-repeat center/cover; width: 100%; height: 0; padding-top: calc(220 / 375 * 100%);}
.message .photo img{ display: none;}
.message .text{ margin: 20px 0 0;}
.message .text p{ margin: 15px 0 0; padding: 0 16px; line-height: 1.8;}
.message .text p:last-child{ margin-top: 25px; text-align: right;}
.message .text p img{ width: 120px; margin: 10px 0 0 0;}


/* vision
**********************************************************************/
.vision{ padding: 0 16px; border-top: solid 1px #dadada;}
.vision h4{ font: 300 19px/1.5 "heisei-kaku-gothic-std",sans-serif; text-align: center; color: #333;}
@media print, screen and (max-width:359px){ .vision h4{ font-size: 17px;} }
@media print, screen and (min-width:460px){ .vision h4 br:nth-child(2){ display: none;} }
.vision p{ margin: 20px 0 0;}
.vision dl{ margin: 35px 0 0; padding: 15px 20px 20px; position: relative; border: solid 1px #c7c7c7; font: 300 15px/1.5 "heisei-kaku-gothic-std",sans-serif; text-align: center;}
.vision dl dt{ display: inline-block; background: #fff; width: 160px; padding: 3px 0; position: absolute; top: -13px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-weight: 500; color: #dd0716;}
.vision dl dd{ margin: 8px 0 0;}
.vision dl dd strong{ font-weight: 300; color: #dd0716;}
@media print, screen and (max-width:340px){ .vision dl dd{ font-size: 14px;} }


/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
  
  /* title
  **********************************************************************/
  #vision h3{ margin: 40px 0 0; padding: 54px 0 40px; font-size: 23px;}
  #vision .message h3,
  #vision .vision h3{ background-size: 48px 48px;}
  #vision h3 span{  font-size: 15px;}
  
  
  /* message
  **********************************************************************/
	.message > div{ display: flex; flex-direction: row-reverse; padding-bottom: 0; border-bottom: 1px solid #ccc;}
	.message .photo{ background-image: url("../img/messege_img_pc.jpg"); height: auto; padding: 0;}
	.message .photo{ width: 40%;}
	.message .text{ width: 60%; margin: 0; padding: 30px 100px 100px;}
	.message .text p{ margin: 15px 0 0; line-height: 1.8;}
	.message .text p img{ width: 150px;}
  
  
  /* vision
  **********************************************************************/
  .vision{ padding: 0; border-top: none;}
  .vision h4{ margin: -10px 0 0; font-size: 25px;}
  .vision p{ width: 516px; margin: 35px auto 0;}
  .vision dl{ width: 550px; margin: 45px auto 0; padding: 20px 20px 25px;}
  .vision dl dd{ font-size: 18px;}
  
}


@media print, screen and (min-width:1710px){
	.message .photo{ background-image: none;}
	.message .photo img{ display: block;}
}