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

/********************************
 サイトポリシーページ固有のスタイル 
********************************/

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

#section1,#section2,#section3,#section4,#section5 {
	/* 各セクション共通設定 */
	overflow: hidden;
	position: relative;
	padding: 10px 30px;
	max-width: 1100px;
	margin: auto;
}

.section_frame span {
	/* span指定文字列を字下げ */
	margin-left: 4rem;
}

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

	.side_frame {
		display: block;
	}
	
}

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

	/* ウィンドウサイズが狭いときは各セクションのパディングを縮小 */
	#section1,#section2,#section3,#section4,#section5 {
		padding: 10px;
	}
}