@charset "utf-8";

/**********************************************
** Site Name: キャロットレードアジア
** Site URI: 
** Description: ご挨拶
**********************************************/

/*-------------------------------------------*/
/*  CONTENTS:
/*--------------------------------------------
1.0 - 汎用スタイル
    1.1 - 見出し
    1.2 - 見出し　背景
2.0 - ご挨拶
3.0 - 略歴
    
---------------------------------------------*/

/*-------------------------------------------*/
/*  1.0 - 汎用スタイル
/*-------------------------------------------*/

.management .txt {
  line-height: 2.0em;
}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
  .management .txt { font-size: 1.2rem;}
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
  .management .txt { font-size: 1.7rem;}
}

/*  1.1 - 見出し
/*-------------------------------------------*/

.management h3.heading { letter-spacing: 1px;}
.management h3.heading span { display: block;}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
 .management h3.heading {
   margin-bottom: 20px;
   font-size: 1.6rem;
  }
 .management h3.heading span { font-size: 1.4rem;}
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
  .management h3.heading {
    margin-bottom: 30px;
    font-size: 2.0rem;
  }
  .management h3.heading span { font-size: 1.6rem;}
}

/*  1.2 - 見出し　背景
/*-------------------------------------------*/

.management .title_bg {
  background: url("../img/management/bg_management.jpg") no-repeat center top;
  background-size: cover;
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
  .management .title_bg { margin-bottom: 70px;}
}


/*-------------------------------------------*/
/*  2.0 - ご挨拶
/*-------------------------------------------*/

.management .message { position: relative;}
.management .message .image {	z-index: 200;}
.management .message .message_detail_txt {
  width: 100%;
  display: table;
	table-layout: fixed;
}
.management .message .message_detail_txt .txt:last-child { margin-bottom: 0;}
.management .ceo_name {
  display: block;
  line-height: 1.5;
  text-align: right;
  font-weight: bold;
}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
  .management { padding-bottom: 50px;}
	.management .message {
	  overflow: hidden;
	}
  .management .message .inner { padding: 0;}
	.management .message .txt {
		margin-bottom: 20px;
	  padding-left: 0;
		padding-right: 0;
	}
  .management .message .txt:last-child { margin-bottom: 0;}
	.management .message .image { 
	  position: relative;
		padding: 15px;
	}
  .management .message .image img {  width: 100%;}
	.management .message .message_detail_txt {
	  position: relative;
		top: -90px;
		z-index: 100;
	  background: #EEF1F1;
		padding: 90px 15px 30px;
	}
  .management .ceo_name { font-size: 1.2rem;}
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
  .management { padding-bottom: 70px;}
  .management .message {
    margin-top: 55px;
    margin-bottom: 90px;
  }
	.management .message::before {
		width: calc(100% - 100px);
		height: 100%;
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		z-index: 100;
		background: #EEF1F1;
	}
	.management .message .txt { margin-bottom: 30px;}
	.management .message .message_detail_txt {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		z-index: 200;
		padding: 45px 0 45px 40%;
	}
  .management .message .image {
	  width: calc(100% - 68%);
	  position: absolute;
    top: -50px;
    left: 40px;
  }
  .management .message .image img {
	  width: 100%;
	}
  .management .ceo_name { font-size: 1.5rem;}
}

/*-------------------------------------------*/
/*  3.0 - 略歴
/*-------------------------------------------*/

.management .profile_detail_txt {
  background: #EEF1F1;
}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
  .management .profile_detail_txt {
    margin-bottom: 60px;
    padding: 20px;
  }
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
  .management .profile_detail_txt {
    margin-bottom: 90px;
    padding: 40px;
  }
}



