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

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2016/08/25
* Last update : 2016/08/29
* Made by     : Suga Yui
* Updated by  : Suga Yui
*
**********************************************************************/


/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
.contents{ padding: 158px 4.6875% 75px!important; margin:-128px 0 0;}
.contents > p{ margin: 20px 0 0;}

/* message
**********************************************************************/
#message h3{ width: 199px;}
#message p span{ display: block; width: 115px; margin: 10px 0 0;}
#message > img{ display: block; width: 193px; margin: 24px auto 0;}

/* philosophy
**********************************************************************/
#philosophy h3{ width: 268px; }
#philosophy .logo{ background: #f2f2f2; padding: 30px 24px 30px; margin: 20px 0 0;}
#philosophy .logo > img{ display: block; width: 130px; margin: 0 auto;}
#philosophy .logo p{ max-width:400px; margin: 30px auto 0;}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
  .contents{ padding: 322px 4.6875% 75px!important; margin:-292px 0 0;}
  .contents > p{ margin: 24px 0 0;}
  
  /* message
  **********************************************************************/
  #message h3{ width: 398px;}
  #message p span{ background: url(../img/name_pc.png) no-repeat; width: 206px; height: 26px; margin: 26px 0px 0;}
  #message p span img{ display: none;}
  #message > img{ width: 310px; }
  
  /* philosophy
  **********************************************************************/
  #philosophy h3{ width: 416px; }
  #philosophy .logo{ max-width:560px; padding: 40px 30px 50px; margin: 30px auto 0;}
  #philosophy .logo > img{ width: 220px;}
}

@media print, screen and (min-width:830px){
  #philosophy .logo{ max-width:770px; padding: 50px 40px 50px; overflow: hidden;}
  #philosophy .logo > img{ float: left;}
  #philosophy .logo p{ float: left; margin:0 0 0 50px;}
}

/*************************************************************************************************************************
* 1024px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:1024px){
  .contents{ padding: 256px 0 160px!important; margin: -192px auto 0; position: relative;}
  .contents h3{ height: 149px;}
  .contents h3 img{ display: none;}
  
  /* message
  **********************************************************************/
  #message h3{ background: url(../../greeting/img/h3_01_pc.png) no-repeat left top; width: auto;}
  #message p{ width: 600px;}
  #message p span{ margin: 36px 0 0; }
  #message > img{ position: absolute; top: 324px; right: 0; }
  
  /* philosophy
  **********************************************************************/
  #philosophy h3{ background: url(../img/h3_02_pc.png) no-repeat left top; width: auto; }
  #philosophy p{ margin: 40px 0 0;}
  #philosophy .logo{ max-width:none; padding: 60px 76px; margin: 70px 0 0; }
  #philosophy .logo > img{ width: 220px; }
  #philosophy .logo p{ background: url(../img/logo_txt_pc.png) no-repeat left top; width: 538px; max-width:none; height: 181px; margin: 0; float: right;}
  #philosophy .logo p img{ display: none;}
}