@charset "UTF-8";
/**
 *  - スニペット//suzuki用
 *
 * update：  2011/11/16
 * version： 00002
 */



/* ユーティリティ：フォントサイズ
-------------------------------------------------------------------------------*/
.snp-fs10px { font-size: 77%; }
.snp-fs11px { font-size: 85%; }
.snp-fs12px { font-size: 93%; }
.snp-fs13px { font-size: 100%; }
.snp-fs14px { font-size: 108%; }
.snp-fs15px { font-size: 116%; }
.snp-fs16px { font-size: 123.1%; }
.snp-fs17px { font-size: 131%; }
.snp-fs18px { font-size: 138.5%; }
.snp-fs19px { font-size: 146.5%; }
.snp-fs20px { font-size: 153.9%; }
.snp-fs21px { font-size: 161.6%; }
.snp-fs22px { font-size: 167%; }
.snp-fs23px { font-size: 174%; }
.snp-fs24px { font-size: 182%; }
.snp-fs25px { font-size: 189%; }
.snp-fs26px { font-size: 197%; }

/* ユーティリティ：フォント色＋太字＋下線
-------------------------------------------------------------------------------*/
.snp-def    { color: #696969; font-weight: normal; border-bottom: 0px; }/* デフォルトに戻すときに */
.snp-b      {                 font-weight: bold; }
.snp-u      { text-decoration:underline;         /*border-bottom: 1px solid #000000;*/ }
.snp-blue   { color: #0000ff; }
.snp-bb     { color: #0000ff; font-weight: bold; }
.snp-bu     { color: #0000ff;                    border-bottom: 1px solid #0000ff; }
.snp-bbu    { color: #0000ff; font-weight: bold; border-bottom: 1px solid #0000ff; }
.snp-red    { color: #ff0000; }
.snp-rb     { color: #ff0000; font-weight: bold; }
.snp-ru     { color: #ff0000;                    border-bottom: 1px solid #ff0000; }
.snp-rbu    { color: #ff0000; font-weight: bold; border-bottom: 1px solid #ff0000; }
.snp-orange { color: #ff9900; }
.snp-ob     { color: #ff9900; font-weight: bold; }
.snp-ou     { color: #ff9900;                    border-bottom: 1px solid #ff9900; }
.snp-obu    { color: #ff9900; font-weight: bold; border-bottom: 1px solid #ff9900; }
.snp-white  { color: #ffffff; }
.snp-wb     { color: #ffffff; font-weight: bold; }
.snp-wu     { color: #ffffff;                    border-bottom: 1px solid #ffffff; }
.snp-wbu    { color: #ffffff; font-weight: bold; border-bottom: 1px solid #ffffff; }

/* ユーティリティ：単機能ボックス
-------------------------------------------------------------------------------*/
.snp-invisible   { display: none; }/* 非表示にする */
.snp-comfortText { margin: 1em auto; line-height: 1.5; }/* 見やすい文章 */
.snp-heading     { padding-left: 1em; text-indent: -1em; }/* １文字段下げ。[※]で始まる文章に */
.snp-fit         { display: inline-block; zoom: 1; *display: inline;/* (IE7以下に)擬似inline-block */
				   margin-left: auto; margin-right: auto; }/* 箱を中の要素の幅にフィットさせる */

/* ユーティリティ：左インデント
-------------------------------------------------------------------------------*/
.snp-indent0     { margin-left:  0px; }
.snp-indent1     { margin-left: 24px; }
.snp-indent2     { margin-left: 48px; }
.snp-indent3     { margin-left: 72px; }

/* ユーティリティ：縦マージン
-------------------------------------------------------------------------------*/
.snp-marginv0    { margin-top:  0px; margin-bottom:  0px; }
.snp-marginv1    { margin-top:  4px; margin-bottom:  4px; }
.snp-marginv2    { margin-top:  8px; margin-bottom:  8px; }
.snp-marginv3    { margin-top: 16px; margin-bottom: 16px; }

/* ユーティリティ：横マージン
-------------------------------------------------------------------------------*/
.snp-marginflex  { margin-left: auto; margin-right: auto; }
.snp-marginh0    { margin-left:  0px; margin-right:  0px; }
.snp-marginh1    { margin-left:  4px; margin-right:  4px; }
.snp-marginh2    { margin-left:  8px; margin-right:  8px; }
.snp-marginh3    { margin-left: 16px; margin-right: 16px; }

/* ユーティリティ：縦パディング
-------------------------------------------------------------------------------*/
.snp-paddingv0   { padding-top:  0px; padding-bottom:  0px; }
.snp-paddingv1   { padding-top:  4px; padding-bottom:  4px; }
.snp-paddingv2   { padding-top:  8px; padding-bottom:  8px; }
.snp-paddingv3   { padding-top: 16px; padding-bottom: 16px; }

/* ユーティリティ：横パディング
-------------------------------------------------------------------------------*/
.snp-paddingh0   { padding-left:  0px; padding-right:  0px; }
.snp-paddingh1   { padding-left:  4px; padding-right:  4px; }
.snp-paddingh2   { padding-left:  8px; padding-right:  8px; }
.snp-paddingh3   { padding-left: 16px; padding-right: 16px; }

/* ユーティリティ：パーセント幅
-------------------------------------------------------------------------------*/
.snp-widthp1     { width:  20%; }
.snp-widthp2     { width:  40%; }
.snp-widthp3     { width:  60%; }
.snp-widthp4     { width:  80%; }
.snp-widthp5     { width: 100%; }

/* ユーティリティ：ピクセル幅
-------------------------------------------------------------------------------*/
.snp-width1      { width: 120px; }
.snp-width2      { width: 240px; }
.snp-width3      { width: 360px; }
.snp-width4      { width: 480px; }
.snp-width5      { width: 600px; }
.snp-width6      { width: 720px; }
.snp-width7      { width: 840px; }
.snp-width8      { width: 960px; }

/* ユーティリティ：縦揃え・横揃え
-------------------------------------------------------------------------------*/
.snp-align0-0    { text-align: left;   vertical-align: top; }
.snp-align0-1    { text-align: left;   vertical-align: middle; }
.snp-align0-2    { text-align: left;   vertical-align: bottom; }
.snp-align1-0    { text-align: center; vertical-align: top; }
.snp-align1-1    { text-align: center; vertical-align: middle; }
.snp-align1-2    { text-align: center; vertical-align: bottom; }
.snp-align2-0    { text-align: right;  vertical-align: top; }
.snp-align2-1    { text-align: right;  vertical-align: middle; }
.snp-align2-2    { text-align: right;  vertical-align: bottom; }

/* ユーティリティ：リスト
-------------------------------------------------------------------------------*/
.snp-level1 { margin: 0px 24px 16px; padding: 0px; font-weight: normal; }
	.snp-level1 li   { margin: 6px 0px; line-height: 1.3; }
	ol.snp-level1 li { list-style-type: decimal; }
	ul.snp-level1 li { list-style-type: disc; }
.snp-level2 { margin: 4px 48px 8px; padding: 0px; }
	.snp-level2 li   { margin: 2px 0px; line-height: 1.3; font-weight: normal; }
	ol.snp-level2 li { list-style-type: lower-roman; }
	ul.snp-level2 li { list-style-type: circle; }

/* ユーティリティ：clear、clearfix
-------------------------------------------------------------------------------*/
.snp-clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
/* slightly enhanced, universal clearfix hack */
.snp-clearfix:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; }
.snp-clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .snp-clearfix { height: 1%; }
.snp-clearfix { display: block; }
/* close commented backslash hack */

/* ユーティリティ：透過
-------------------------------------------------------------------------------*/
.snp-opacity25 { *height: 1px; filter: Alpha(opacity=25); -khtml-opacity: 0.25; -moz-opacity: 0.25; opacity: 0.25; }
.snp-opacity50 { *height: 1px; filter: Alpha(opacity=50); -khtml-opacity: 0.5;  -moz-opacity: 0.5;  opacity: 0.5; }
.snp-opacity75 { *height: 1px; filter: Alpha(opacity=75); -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; }

/* ユーティリティ：要素のボーダーを角丸に（IE系は除く）
-------------------------------------------------------------------------------*/
.snp-radius       { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }
.snp-radiusTop    { -moz-border-radius-topright: 1em; -moz-border-radius-topleft: 1em; -webkit-border-top-right-radius: 1em; -webkit-border-top-left-radius: 1em; border-top-right-radius: 1em; border-top-left-radius: 1em; }
.snp-radiusBottom { -moz-border-radius-bottomright: 1em; -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-right-radius: 1em; -webkit-border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; border-bottom-left-radius: 1em; }

/* ユーティリティ：要素にドロップシャドウ（IE系は除く）
-------------------------------------------------------------------------------*/
.snp-boxShadow,
.snp-boxShadowOuter { -moz-box-shadow: 5px 5px 5px #cccccc; -webkit-box-shadow: 5px 5px 5px #cccccc; box-shadow: 5px 5px 5px #cccccc; }
.snp-boxShadowInner { -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000; }

/* ユーティリティ：文字にドロップシャドウ（IE系は除く）
-------------------------------------------------------------------------------*/
.snp-textShadow { text-shadow: 1px 1px 1px #000000; }

/* コンポーネント：緑系の角丸ボックス＞見出し＋詳細文
<div class='cmp-explanation'>
	<div class='outer'>
		<div class='inner'>
			<div class='header'><span>東京ランナーズフェスタ</span></div>
			<div class='body'>ランニング技術の向上を目指したクリニック、子供の体力測定、手軽に楽しめるウォーキングのセミナーなど、スポーツを体験していただくプログラムを用意したイベント</div>
		</div>
	</div>
</div>
<div class='cmp-explanation'>
	<div class='outer'>
		<div class='inner'>
			<div class='header'><span>東京ランナーズコレクション</span></div>
			<div class='body'>ランニングスタイルを提案するファッションショーや、ランナーにとって必要な栄養などを含んだ食事（ランごはん）をテーマとしたトーク＆料理ショーなどで構成されており、ランニングの　様々な楽しみ方や東京マラソンの魅力を紹介するイベント</div>
		</div>
	</div>
</div>
-------------------------------------------------------------------------------*/
.cmp-explanation { width: 640px; margin: 1.2em auto 1.5em; }
	.cmp-explanation .outer { margin: 0  2px; padding: 0; border-top: 2px solid #99cc99; border-bottom: 2px solid #99cc99; }
		.cmp-explanation .inner { margin: 0 -2px; padding: .5em 1em; border-left: 2px solid #99cc99; border-right: 2px solid #99cc99; background-color: #ccffcc; }
			.cmp-explanation .header {}
				.cmp-explanation .header span { padding: 1px 1em 0; background-color: #ffffff; color: #339933; font-weight: bold; font-size: 125%; }
			.cmp-explanation .body { margin: .5em 1em .5em 2em; line-height: 1.5; font-size: 112%; }

/* コンポーネント：薄い黄色の背景色、補足事項向け
-------------------------------------------------------------------------------*/
.cmp-supplement { margin-top: 8px; margin-bottom: 8px; padding: .5em 1em; border: 1px solid #cccccc; background-color: #ffffdd; line-height: 1.3; }

/* コンポーネント：濃い黄色の背景色・赤枠・赤文字、警告文向け
-------------------------------------------------------------------------------*/
.cmp-danger     { margin-top: 8px; margin-bottom: 8px; padding: .5em 1em; border: 1px solid #ff9999; background-color: #ffff99; color: #ff0000; }

/* コンポーネント：白い背景色・灰色の枠、弱めの補足事項向け
-------------------------------------------------------------------------------*/
.cmp-cutOff     { margin-top: 4px; margin-bottom: 4px; padding: .1em 0;   border: 1px solid #ddddcc; background-color: #ffffff; color: #444444; text-align: center; }



/* EOF */