@charset "UTF-8";

@import "./base.css";

/* ================================================================================== 
★　CSS インフォーメーション　★
☆　はじめての献血　トップページ関連　☆

■１．説明文
■２．上部メニューエリア
　●２-１　レイアウト
　●２-２　血液・輸血について知りたい
		●２-３　献血をしたい
		●２-４　献血を体験した方の声
		●２-５　イベント情報
		●２-６　献血にご協力いただいた後は・・・
		●２-７　モバイルサイトのご案内

===================================================================================== 

■１．説明文

================================================================================== */
#first-index-txt{
	margin:15px auto 0;
	width:854px;
	font-size:1.2em;
}

#first-index-txt img{
	float:right;
	margin:2px 5px 0 10px;
}

#first-index-care{
	margin:10px auto;
	width:854px;
	text-align:right;
}

/* ================================================================================== 

■２．上部メニューエリア
　●２-１　レイアウト
　●２-２　血液・輸血について知りたい
		●２-３　献血をしたい
		●２-４　献血を体験した方の声
		●２-５　イベント情報
		●２-６　献血にご協力いただいた後は・・・
		●２-７　モバイルサイトのご案内

===================================================================================== 

　●２-１　レイアウト

================================================================================== */
#first-index-menu,
.first-index-other{
	width:854px;
	margin:10px auto;
	font-size:1.2em;
	line-height:1.6em;
}


#first-indexEnd.first-index-other{
	margin:10px auto 30px;
}

#first-index-menuL{
	float:left;
	width:278px;
}

#first-index-menuR{
	float:right;
	width:560px;
}

.first-index-otherL{
	float:left;
	width:562px;
}

.first-index-otherR{
	float:right;
	width:278px;
}

/* ================================================================================== 

　●２-２　血液・輸血について知りたい

================================================================================== */
#first-index-menuL dl{
	margin:10px auto ;
	width:268px;
	padding:0 0 10px;
	background:url(../first/img/first_index_ctg_bg_end.gif) no-repeat left bottom;
}

#first-index-menuL dd{
	padding:6px 8px 0 12px;
	background:url(../first/img/first_index_ctg_bg.gif) repeat-y left;
}

#first-index-menuL dd a{
	display:-moz-inline-box;
	display:inline-block;
	/display:inline;
	/zoom:1;
	padding:0 0 0 15px;
	background:url(../first/img/icon_arrow01.gif) no-repeat 0 3px;
	color:#555;
	text-decoration:none;
}

.ff2 #first-index-menuL dd a{
	background:url(../first/img/icon_arrow01.gif) no-repeat 0 0;
}

#first-index-menuL dd a:hover{
	color:#55a91f;
}

#first-index-menuL dd img{
	margin-left:5px;
	vertical-align:middle;
}

#first-index-menuL dl.first-index-nolist{
	margin:8px auto 10px;
	width:268px;
	padding:0;
	background:none;
}

/* ================================================================================== 

　●２-３　献血をしたい

================================================================================== */

#first-index-menuR-ttl{
	background:url(../common_img/line_red_w.jpg) bottom repeat-x;
}

#first-index-menuR-ttl h2{
	float:left;
}

#first-index-menuR-ttl p{
	float:right;
}

#first-index-menuR p#first-index-menuR-txt{
	margin:15px auto;
	width:550px;
}

#first-index-menuR p#first-index-menuR-txt img{
	margin-right:5px;
	vertical-align:middle;
}

#first-index-menuR p#first-index-menuR-txt a{
	color:#ff2800;
	font-weight:bolder;
	letter-spacing:0.1em;
}

#first-index-menuR p#first-index-menuR-txt a:hover{
	text-decoration:none;
}

.first-index-menuR-in{
	margin:10px auto;
	width:550px;
	background:url(../first/img/first_index_ctg_bg.gif) repeat-y;
}

.first-index-menuR-end{
	padding:0 0 8px;
	min-height:120px;
	_height:120px;
	background:url(../first/img/first_index_ctg_bg_end.gif) no-repeat bottom;
}

#first-index-menuR dl.first-index-inR{
	float:right;
	width:268px;
}

#first-index-menuR dl.first-index-inL{
	float:left;
	width:268px;
}

#first-index-menuR dd{
	padding:6px 8px 0 12px;
}

#first-index-menuR dd a{
	display:-moz-inline-box;
	display:inline-block;
	/display:inline;
	/zoom:1;
	padding:0 0 0 15px;
	background:url(../first/img/icon_arrow01.gif) no-repeat 0 3px;
	color:#555;
	text-decoration:none;
}

.ff2 #first-index-menuR dd a{
	background:url(../first/img/icon_arrow01.gif) no-repeat 0 0;
}

.ff2 #first-index-menuR dd.longtext a{
	display:block;
	background:url(../first/img/icon_arrow01.gif) no-repeat 0 4px;
}

#first-index-menuR dd a:hover{
	color:#55a91f;
}

#first-index-menuR dd img{
	margin-left:5px;
	vertical-align:middle;
}

/* ================================================================================== 

　●２-４　献血を体験した方の声

================================================================================== */
#first-index-voice{
	position:relative;
	margin:10px auto;
	width:550px;
	height:100px;
	background:url(../first/img/first_index_img01.jpg) no-repeat;
}

#first-index-voice p.first-index-voiceBtn01{
	position:absolute;
	width:267px;
	height:37px;
	top:11px;
	right:5px;
}

#first-index-voice p.first-index-voiceBtn02{
	position:absolute;
	width:267px;
	height:37px;
	bottom:11px;
	right:5px;
}

/* ================================================================================== 

　●２-５　イベント情報

================================================================================== */

.first-index-event{
	margin:10px auto;
	width:270px;
}

.first-index-event dt{
	float:left;
}

.first-index-event dd{
	float:right;
	width:140px;
}

.first-index-event dd.first-index-eventBtn{
	text-align:right;
	padding:8px 0 0;
}

/* ================================================================================== 

　●２-６　献血にご協力いただいた後は・・・

================================================================================== */
#first-index-after{
	margin:10px auto;
	width:556px;
}

#first-index-after p{
	float:left;
}

#first-index-after dl{
	float:right;
	width:420px;
}

#first-index-after dt img{
	margin:0 0 6px;
}

#first-index-after dd.first-index-afterBtn{
	text-align:right;
	padding:8px 0 0;
}

/* ================================================================================== 

　●２-７　モバイルサイトのご案内

================================================================================== */

.first-index-mobile{
	padding:8px;
	border:1px solid #dcdcdc;
	border-top:none;
}

.first-index-mobile dt{
	float:right;
}

.first-index-mobile dt img{
	margin:10px 0;
}

.first-index-mobile dd{
	float:left;
	width:190px;
	line-height:1.7em;
}

.first-index-mobile dd a{
	display:-moz-inline-box;
	display:inline-block;
	/display:inline;
	/zoom:1;
	padding:10px 0 0;
	color:#f71113;
}

.first-index-mobile dd a:hover{
	color:#0099ff;
}