/* UTF-8 */
@charset "utf-8";

/**************************
 会社情報ページ固有のスタイル 
**************************/

#section_wrapper {
	/* main要素内全体への設定 */
	margin:auto;
	padding-bottom: 40px;
	position: relative;
}

#greeting,#mission,#company_policy,#aboutUs,#history {
	/* 各セクション共通設定 */
	overflow: hidden;
	position: relative;
	padding: 10px 30px;
	max-width: 1100px;
	margin: auto;
}

#greeting {
	background-image: url(../images/toppage.jpg);
	background-size: contain;
	background-color: rgba(255, 255, 255, 0.8);
	background-blend-mode: lighten;
	height: 1000px;
	background-repeat: no-repeat;
}

/*#greeting img {
	border-radius: 30px 0px 30px 0px;
}*/

/*.greeting_left {
	background-image: url(../images/company/toppage.jpg);
	background: rgba(255, 255, 255, 0.3);
}*/

#history span {
display: inline-block;
width: 7em;
}

/* 表示領域が900px以上の場合に適用するスタイル */
@media screen and (min-width: 900px) {
	/* ウィンドウサイズが狭いときは左右にフレーム表示 */
	#section_wrapper {
		display: grid; /* 右側にフレームを表示させるためのモード変更 */
		/* 左右のフレームを%で分割。この場合は画面サイズに合わせ、フレーム内要素が
		比率を維持しながら相対的に伸縮する */
		grid-template-columns: 85% 15%; 
	}

	.side_frame {
		display: block;
	}
	
	/* 代表挨拶セクションに対し、左右領域を1:1で表示 */
/*	#greeting_left {
		width: 70%;
		float: left; 
		top: 0;
	}

	#greeting_right {
		width:30%;
		height:100%;
		max-height: 400px;
		overflow: hidden;
		padding-top:115px;
	}*/
}

/* 表示領域が900px未満の場合に適用するスタイル */
@media screen and (max-width: 899px) {
	/* ウィンドウサイズが狭いときはフレーム表示を解除 */
	#section_wrapper {
		display: block; 
	}
	
	.side_frame {
		display: none;
	}

	/* ウィンドウサイズが狭いときは各セクションのパディングを縮小 */
	#greeting,#mission,#company_policy,#aboutUs,#history {
		padding: 10px;
	}
	
	/* 代表挨拶セクションに対し、左右領域を上下に全幅表示 */
/*	#greeting_left{
		width: 100%;
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
		overflow: hidden;
	}
	
	#greeting_right {
		width: 100%;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
	}*/
}