@charset "utf-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/


/* モバイルレイアウト : 480 px およびそれ以下. */

/*--（モバイル）左部分・メインビジュアル編集--*/

#left_box {
	width: 95.83333%;
	margin:2% auto 0;
	padding:2% 0 1.75%;
	background:#FFF;
	font-weight:bold;
	border:0.2em double #0000CC;
	border-radius:0.5em;
 -moz-box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.4);
 -webkit-box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.4);
 -o-box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.4);
 -ms-box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.4);
}

#left_box #osi-title{
	width:60%;
	margin:0 auto;
}

#left_box #osi-title h2{
	margin:0;
	text-align:center;
}

#left_box #osi-guide{
	width:92%;
	margin:1% auto;
}

#left_box #osi-guide .mobile{
	width:100%;
	float:left;
}

#left_box #osi-guide .mobile .mobile1{
	width:30%;
	margin:0;
	float:left;
}

#left_box #osi-guide .mobile .mobile1 p{
	margin:0;
}

#left_box #osi-guide .mobile .mobile1 img{
	width:90%;
}

#left_box #osi-guide .guide{
	width:100%;
}

#left_box #osi-guide .guide p{
	text-indent:1em;
	margin:2% 0;
}

#left_box #osi-guide .guide span.red-font,#left_box #osi-guide .guide2 span.red-font{
	color:#F00;
}

#left_box #osi-guide .ost-layer{
	margin:2% auto;
}

#left_box #osi-guide .ost-layer h2{
	text-align:center;
}

#left_box #osi-guide .guide2 ul{
	margin:0 5% 0 -5%;
}

#left_box #osi-guide .guide2 ul li{
	list-style-type:none;
	display:block;
	margin:2% auto;
}

#left_box .guide3{
	margin:2% auto;
	width:90%;
}

/* タブレットレイアウト : 593 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

/*--（タブレット）左部分・メインビジュアル編集--*/

@media only screen and (min-width: 593px) {

#left_box {
	width:65.3125%;
	height:150.2em;
	margin:0 1% 1% 0;
	float: left;
}


/*----左の高さと右の高さは必ず同じになるように----*/


}
/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {

/*--（PCサイト）左レイアウト・メインビジュアル編集--*/

#left_box {
	width:69%;
	margin-right:0.5%;
	margin-left:0;
	padding-bottom:1.75%;
	margin-bottom:1%;
	max-width: 670px;
	max-height:1770px;
}



/*----左の高さと右の高さは必ず同じになるように----*/


}