@charset "euc-jp";

/* =======================================================
馬三郎とは？の設定
======================================================= */


/* =======================================================
目次
==========================================================

1.トップページ設定

2.トップ以下のページのメニュー設定

3.スタイル１

4.スタイル２

5.スタイル３

6.スタイル４

7.スタイル５

8.スタイル６

9.ダウンロード

10.左カラムメニュー

/* =======================================================
1.共通設定
======================================================= */

/*----本文注釈----*/
p.note{
	font-size				:	80%;
}

/* =======リード文========= */
body.whats div.whats_lead{
	padding							:	0 0 0 130px;
	background					:	url(../image/bg_whats_lead.gif) 0 0 repeat-y;
}

body.whats div.whats_lead p{
	margin:	0;
	font-weight:	bold;
}

/* =======STEP1〜10のかな背景========= */
body.whats div.whats_lead p.whats_lead_step_01{
	background					:	url(../image/bg_whats_lead_01.jpg) right 0 no-repeat;
}

body.whats div.whats_lead p.whats_lead_step_02{
	background					:	url(../image/bg_whats_lead_02.jpg) right 0 no-repeat;
}

body.whats div.whats_lead p.whats_lead_step_03{
	background					:	url(../image/bg_whats_lead_03.jpg) right 0 no-repeat;
}

body.whats div.whats_lead p.whats_lead_step_04{
	background					:	url(../image/bg_whats_lead_04.jpg) right 0 no-repeat;
}

body.whats div.whats_lead p.whats_lead_step_05{
	background					:	url(../image/bg_whats_lead_05.jpg) right 0 no-repeat;
}

body.whats div.whats_lead p.whats_lead_step_06{
	background					:	url(../image/bg_whats_lead_06.jpg) right 0 no-repeat;
}

body.whats div.whats_lead p.whats_lead_step_07{
	background					:	url(../image/bg_whats_lead_07.jpg) right 0 no-repeat;
}

body.whats div.whats_lead p.whats_lead_step_08{
	background					:	url(../image/bg_whats_lead_08.jpg) right 0 no-repeat;
}

body.whats div.whats_lead p.whats_lead_step_09{
	background					:	url(../image/bg_whats_lead_09.jpg) right 0 no-repeat;
}

body.whats div.whats_lead p.whats_lead_step_10{
	background					:	url(../image/bg_whats_lead_10.jpg) right 0 no-repeat;
}

/* =======STEP1〜10見出し用の背景========= */
body.whats .h2_step_01{
	background					:	url(../image/bg_whats_step_01.jpg) 0 0 no-repeat;
}

body.whats .h2_step_02{
	background					:	url(../image/bg_whats_step_02.jpg) 0 0 no-repeat;
}

body.whats .h2_step_03{
	background					:	url(../image/bg_whats_step_03.jpg) 0 0 no-repeat;
}

body.whats .h2_step_04{
	background					:	url(../image/bg_whats_step_04.jpg) 0 0 no-repeat;
}

body.whats .h2_step_05{
	background					:	url(../image/bg_whats_step_05.jpg) 0 0 no-repeat;
}

body.whats .h2_step_06{
	background					:	url(../image/bg_whats_step_06.jpg) 0 0 no-repeat;
}

body.whats .h2_step_07{
	background					:	url(../image/bg_whats_step_07.jpg) 0 0 no-repeat;
}

body.whats .h2_step_08{
	background					:	url(../image/bg_whats_step_08.jpg) 0 0 no-repeat;
}

body.whats .h2_step_09{
	background					:	url(../image/bg_whats_step_09.jpg) 0 0 no-repeat;
}

body.whats .h2_step_10{
	background					:	url(../image/bg_whats_step_10.jpg) 0 0 no-repeat;
}
/* =======================================================
2.ボタン設定
======================================================= */

/*---TOP「詳しくは」ボタン----*/
ul li.detail{
	width:	58px;
	height:	13px;
}

ul li.detail a,
ul li.detail a:link,
ul li.detail a:visited{
	display						:	block;
	width							:	58px;
	height						:	13px;
	background				:	url(../image/button_whats_detail_01.gif) 0 0 no-repeat;
}

ul li.detail a:hover, 
ul li.detail a:active{
	background				:	url(../image/button_whats_detail_01_over.gif) 0 0 no-repeat;
}

/*---「拡大する」ボタン----*/

ul.zoom{
	margin:	4px 0 8px 0;
}

ul.zoom li{
	float:	right;
}

ul.zoom li a,
ul.zoom li a:link,
ul.zoom li a:visited{
	display						:	block;
	width							:	55px;
	height						:	13px;
	background				:	url(../image/button_whats_zoom_01.gif) 0 0 no-repeat;
}

ul.zoom li a:hover, 
ul.zoom li a:active{
	background				:	url(../image/button_whats_zoom_01_over.gif) 0 0 no-repeat;
}

/*---美帆のポイント/ユーザーの声の設定----*/
.toggler {
	overflow					:	visible;
	display						:	block;
	width							:	79px;
	height						:	19px;
	margin						:	0 0 0 16px;
}

body.whats .voice_box{
	overflow					:	visible;
}

/*----ユーザーポイント----*/
body.whats div.user{
	position						:	relative;
	float:left;
}

body.whats div.user .toggler-closed {
	background				:	url(../image/button_users_01.gif) 0 0 no-repeat;
}

body.whats div.user .toggler-closed:hover {
	background-position		:	0 -19px;
}

body.whats div.user .toggler-opened {
	background				:	url(../image/button_users_01.gif) 0 0 no-repeat;
}

body.whats div.user .toggler-opened:hover {
	background-position		:	0 -19px;
}

/* ---ユーザーの声box--- */
body.whats div.user .users_box_x{
	position						:	absolute;
	display							:	none;
	left								:	26px;
	top									:	35px;
	width								:	212px;
	background					:	#f0f6e7;
	border: 1px solid #085ba8;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	border-top: 0;
}

/* ---縦に出る中のテキスト--- */
body.whats .users_box_x dl{
	width								:	200px !important;
	padding							:	0 0 8px 0 !important;
}

body.whats .users_box_x dl dt{
	margin								:	8px !important;
}

body.whats .users_box_x dl dd{
	margin								:	0 8px !important;
	font-size							:	11px !important;
}

/* ---横に出る--- */
body.whats div.user .users_box_y{
	position						:	absolute;
	display							:	none;
	left								:	254px;
	bottom							:	16px;
	width								:	212px;
}
body.whats div.user .users_box_y.right {
	left: 254px;
}
/* ---横に出るテキスト--- */
body.whats div.user .users_box_y dl{
	width								:	191px;
	background					:	#f0f6e7;
	border: 1px solid #085ba8;
	border-left: 0;
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
	padding							:	8px 0;
}

body.whats div.user .users_box_y dl dt{
	margin								:	0 8px 8px 8px;
}

body.whats div.user .users_box_y dl dd{
	margin								:	0 8px;
	font-size							:	11px;
}

/*----美帆ポイント----*/
body.whats div.miho{
	position						:	relative;
	float:left;
}

body.whats div.miho .toggler-closed {
	background				:	url(../image/button_maaya_01.gif) 0 0 no-repeat;
}

body.whats div.miho .toggler-closed:hover {
	background-position		:	0 -19px;
}

body.whats div.miho .toggler-opened {
	background				:	url(../image/button_maaya_01.gif) 0 0 no-repeat;
}

body.whats div.miho .toggler-opened:hover {
	background-position		:	0 -19px;
}

/* ---美帆の声box--- */

/* ---縦に出る--- */
body.whats div.miho .users_box_x{
	position						:	absolute;
	display							:	none;
	left								:	26px;
	top									:	35px;
	width								:	212px;
	background					:	#ebf6fd;
	border 						: 1px solid #085ba8;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	border-top: 0;
}

/* ---横に出る--- */
body.whats div.miho .users_box_y{
	position						:	absolute;
	display							:	none;
	left								:	349px;
	bottom							:	26px;
	width								:	212px;
}

/* ---横に出る美帆テキスト--- */
body.whats div.miho .users_box_y dl{
	width								:	191px;
	border: 1px solid #085ba8;
	border-left:0;
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
	background: #ebf6fd;
	padding							:	8px 0;
}

body.whats div.miho .users_box_y dl dt,
body.whats div.miho .users_box_z dl dt{
	margin								:	0 8px 8px 8px;
}

body.whats div.miho .users_box_y dl dd,
body.whats div.miho .users_box_z dl dd{
	margin								:	0 8px;
	font-size							:	11px;
}
body.whats div.miho .users_box_z{
	position: absolute;
	left: -192px;
	bottom: 26px;
	width: 212px;
}
body.whats div.miho .users_box_z dl{
width: 191px;
border: 1px solid #085ba8;
border-right: 0;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
background: #ebf6fd;
padding: 8px 0;
}
/* =======nextボタン========= */
body.whats .whats_next_r{
	margin							:	0 0 0 251px;
}

body.whats .whats_next_r a,
body.whats .whats_next_l a{
	display:	block;
	width:	349px;
	height:	66px;
}

body.whats .whats_next_r a,
body.whats .whats_next_r a:link,
body.whats .whats_next_r a:visited,
body.whats .whats_next_l a,
body.whats .whats_next_l a:link,
body.whats .whats_next_l a:visited{
	display					:	block;
	width					:	349px;
	height					:	66px;
	background-position		:	0 0;
	background-repeat		:	no-repeat;
}
body.whats .whats_next_r a:active,
body.whats .whats_next_r a:hover,
body.whats .whats_next_l a:active,
body.whats .whats_next_l a:hover{
	background-position		:	0 -66px;
}

/* =======================================================
1.枠の設定
======================================================= */
body.whats .whats_box{
	width:	600px;
	padding: 0 0 30px 0;
}

body.whats .bg_body_a{
	background:	url(../image/bg_whats_box_body_a.gif) 0 0 no-repeat;
}

body.whats .bg_body_b{
	background:	url(../image/bg_whats_box_body_b.gif) 0 0 no-repeat;
}

body.whats .bg_body_c{
	background:	url(../image/bg_whats_box_body_c.gif) 0 0 no-repeat;
}

body.whats .bg_body_d{
	background:	url(../image/bg_whats_box_body_d.gif) right 0 no-repeat;
}


/* ---左カラム用マージンボックス--- */
body.whats .whats_box .whats_box_body_01{
	margin:	0 251px 0 0;
}

/* ---右カラム用マージンボックス--- */
body.whats .whats_box .whats_box_body_02{
	margin:	0 0 0 251px;
}

/* ---各ボックスの背景美帆--- */
body.whats .step01{
	background:	url(../image/bg_whats_box_step01_body.jpg) 0 0 no-repeat;
}

body.whats .step02{
	background:	url(../image/bg_whats_box_step02_body.jpg) right 0 no-repeat;
}

body.whats .step03{
	background:	url(../image/bg_whats_box_step03_body.jpg) 0 0 no-repeat;
}
body.whats .step04{
	background:	url(../image/bg_whats_box_step04_body.jpg) right 0 no-repeat;
}

body.whats .step05{
	background:	url(../image/bg_whats_box_step05_body.jpg) 0 0 no-repeat;
}

body.whats .step06{
	background:	url(../image/bg_whats_box_step06_body.jpg) right 0 no-repeat;
}
body.whats .step07{
	background:	url(../image/bg_whats_box_step07_body.jpg) 0 0 no-repeat;
}

body.whats .step08{
	background:	url(../image/bg_whats_box_step08_body.jpg) right 0 no-repeat;
}

body.whats .step09{
	background:	url(../image/bg_whats_box_step09_body.jpg) 0 0 no-repeat;
}

body.whats .step10{
	background:	url(../image/bg_whats_box_step10_body.jpg) right 0 no-repeat;
}

/* ---各ボックスの背景美帆逆パターン--- */
body.whats .step01_b{
	background:	url(../image/bg_whats_box_step01_b_body.jpg) right 0 no-repeat;
}
body.whats .step02_b{
	background:	url(../image/bg_whats_box_step02_b_body.jpg) 0 0 no-repeat;
}
body.whats .step03_b{
	background:	url(../image/bg_whats_box_step03_b_body.jpg) right 0 no-repeat;
}
body.whats .step04_b{
	background:	url(../image/bg_whats_box_step04_b_body.jpg) 0 0 no-repeat;
}
body.whats .step05_b{
	background:	url(../image/bg_whats_box_step05_b_body.jpg) right 0 no-repeat;
}
body.whats .step06_b{
	background:	url(../image/bg_whats_box_step06_b_body.jpg) 0 0 no-repeat;
}
body.whats .step07_b{
	background:	url(../image/bg_whats_box_step07_b_body.jpg) right 0 no-repeat;
}
body.whats .step08_b{
	background:	url(../image/bg_whats_box_step08_b_body.jpg) 0 0 no-repeat;
}
body.whats .step09_b{
	background:	url(../image/bg_whats_box_step09_b_body.jpg) right 0 no-repeat;
}
body.whats .step10_b{
	background:	url(../image/bg_whats_box_step10_b_body.jpg) 0 0 no-repeat;
}
body.whats .whats_box_content{
	margin:	0 16px 8px 16px;
	padding:	8px 0 0 0;
}

body.whats .whats_box_foot_a{
	position:	relative;
	width:	349px;
	padding:	0 0 16px 0;
	background:	url(../image/bg_whats_box_foot_a.gif) 0 bottom no-repeat;
}

/* ---本文マージン調整用--- */
body.whats .whats_box p{
	margin:	0;
}



/* =======================================================
STEP1用
======================================================= */

body.whats .whats_box .img_box{
	margin							:	0 0 16px 0;
}

body.whats .whats_box .img_box .img_left{
	float								:	left;
	width								:	158px;
}

body.whats .whats_box .img_box p{
	float								:	right;
	width								:	152px;
}

body.whats .whats_box .img_box_2{
	margin							:	6px 0 0 0;
}

body.whats .whats_box .img_box_2 .img_right{
	float								:	right;
	width								:	158px;
}

body.whats .whats_box .img_box_2 p{
	float								:	left;
	width								:	152px;
}

/* =======================================================
STEP2用
======================================================= */
div.thum_box .thum_left{
	float:	left;
	width:	152px;
}

div.thum_box .thum_right{
	float:	right;
	width:	152px;
}

body.whats .whats_box_head_step_02_04{
	background				:	url(../image/bg_whats_box_foot_f.gif) 0 bottom no-repeat;
}

body.whats .whats_box_head_step_02_04 .sp_shisu{
	margin	:	12px 0;
}

body.whats .whats_box_head_step_02_04 p{
	margin	:	0 16px 12px 0;
}

body.whats .whats_box_head_step_02_04 dl{
	margin	:	0 16px 0 0;
}

body.whats .whats_box_head_step_02_04 dl dt{
	margin	:	0 0 4px 0;
}

body.whats .whats_box_head_step_02_04 dl dd{
	margin	:	0 0 16px 0;
}

body.whats .whats_box_head_step_02_04 .whats_box_foot_04{
	padding						:	0 0 36px 0;
	*padding						:	0 0 55px 0;
}

.whats_box_head_step_02_04_00{
	padding						:	0 0 16px 0;
	background				:	url(../image/bg_line_blue_y_03.gif) 477px 0 repeat-y;
}

body.whats .whats_box_head_step_02_04_01{
	background				:	url(../image/bg_whats_box_foot_g.gif) 0 bottom no-repeat;
}

body.whats .whats_box_head_step_02_04_01 .whats_box_foot_04{
	padding						:	0 0 16px 0;
	background				:	url(../image/bg_whats_box_head_f.gif) 0 0 no-repeat;
}

body.whats .whats_box_head_step_02_04_01 .whats_box_foot_04{
	_height						:	16px;
	padding						:	0 0 16px 0;
	background				:	url(../image/bg_whats_box_head_f.gif) 0 0 no-repeat;
}

body.whats .whats_box_head_step_02_04_01 .whats_box_foot_04 h4{
	margin:	0 0 8px 32px;
	padding:	16px 0 0 0;
}

body.whats .whats_box_head_step_02_04_01 .whats_box_foot_04 p, 
body.whats .whats_box_head_step_02_04_01 .whats_box_foot_04 dl{
	width	:415px;
	margin:	0 0 0 32px;
}

body.whats .whats_box_head_step_02_04_01 .whats_box_foot_04 dl.sp_example_01 dd{
	margin:	0 0 12px 0;
}

body.whats .whats_box_head_step_02_04_01 .whats_box_foot_04 dl.sp_example_02 dd{
	margin:	4px 0 12px 0;
}

/* =======================================================
10.左カラムメニュー
======================================================= */
#side_menu .side_button_dl a,
#side_menu .side_button_payment a,
#side_menu .side_button_charge a,
#side_menu .side_button_service a,
#side_menu .side_button_whats a,
#side_menu .side_button_corse_comp a{
	display					:	block;
	width					:	177px;
	height					:	42px;
	margin					:	0 0 8px;
}
#side_menu .side_button_charge a, 
#side_menu .side_button_charge a:link, 
#side_menu .side_button_charge a:visited{
	background				:	url(../image/side_button_charge.png);
	background-position		:	0 0;
	background-repeat		:	no-repeat;
	background-size			:	177px 84px;
}
#side_menu .side_button_payment a, 
#side_menu .side_button_payment a:link, 
#side_menu .side_button_payment a:visited{
	background				:	url(../image/side_button_payment.png);
	background-position		:	0 0;
	background-repeat		:	no-repeat;
	background-size			:	177px 84px;
}
#side_menu .side_button_dl a, 
#side_menu .side_button_dl a:link, 
#side_menu .side_button_dl a:visited{
	background				:	url(../image/side_button_dl.png);
	background-position		:	0 0;
	background-repeat		:	no-repeat;
	background-size			:	177px 84px;
}
#side_menu .side_button_service a, 
#side_menu .side_button_service a:link, 
#side_menu .side_button_service a:visited{
	background				:	url(../image/side_button_service.png);
	background-position		:	0 0;
	background-repeat		:	no-repeat;
	background-size			:	177px 84px;
}
#side_menu .side_button_whats a, 
#side_menu .side_button_whats a:link, 
#side_menu .side_button_whats a:visited{
	background-image		:	url(../image/side_whats_button_top.png);
	background-position		:	0 0;
	background-repeat		:	no-repeat;
	background-size			:	177px 84px;
}
#side_menu .side_button_corse_comp a, 
#side_menu .side_button_corse_comp a:link, 
#side_menu .side_button_corse_comp a:visited{
	background				:	url(../image/side_button_corse_comp.png);
	background-position		:	0 0;
	background-repeat		:	no-repeat;
	background-size			:	177px 84px;
}
#side_menu .side_button_charge a:hover, 
#side_menu .side_button_charge a:active,
#side_menu .side_button_charge a:active,
#side_menu .side_button_payment a:hover, 
#side_menu .side_button_payment a:active,
#side_menu .side_button_dl a:hover, 
#side_menu .side_button_dl a:active,
#side_menu .side_button_service a:hover, 
#side_menu .side_button_service a:active,
#side_menu .side_button_whats a:hover, 
#side_menu .side_button_whats a:active,
#side_menu .side_button_corse_comp a:hover, 
#side_menu .side_button_corse_comp a:active{
	background-position		:	0 -42px;
}
#side_menu div.active a {
	background-position		:	0 -42px !important;
}