@charset "Shift_JIS";

/*
	================================================================================================
		support walkman flow shindan jacket css common.css
	================================================================================================
*/
.ml15 {margin-left:15px !important;}
.ml30 {margin-left:30px !important;}

.section {
	margin-bottom: 40px;
	clear: both;
}

#productsArea h2.title {
	margin-bottom: 20px;
	border-bottom: 1px solid #D0D0D0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 13px;
	font-size: 18px;
	font-weight: 700;
}

#productsArea h3.step {
	border-bottom: 1px solid #111;
	font-size: 14px;
	font-weight: 700;
	margin: 40px 10px 20px;
	padding: 0 0 5px 13px;
}

.under {
	text-decoration: underline;
}

.arrow_box {
	margin-bottom: 30px;
}
.arrow_area {
	float: left;
	margin: 0 0 0 10px;
	padding: 0 5px 0 0;
}
.main_area {
	display: table-cell;
	padding-left: 10px;
	border-left: 6px solid #111;
	width: 870px;
}

.main_area h4 {
	margin-bottom: 10px;
}
.main_area .txt_l {
	float: left;
	width: 685px;
	margin-bottom: 15px;
}

.main_area .pct_r {
	float: right;
}

#productsArea ul.btn_area {
	margin-left: 12px;
}
#productsArea ul.btn_area li {
	list-style: none;
	margin: 0 0 10px;
}

#productsArea ul.btn_area_select li {
	list-style: none;
	margin-right: 15px;
	display: inline-block;
}

.Button {
	display: inline-table;
	vertical-align: middle;
	width: 490px;
	min-height: 28px;
	height: 28px;
	border: 1px solid #BCBCBC;
	border-radius: 6px 6px 6px 6px;
	padding: 6px 0 6px 10px;
	cursor: pointer;
	transition: opacity 0.2s ease-in 0s;
}

.smallButton {
	display: inline-table;
	vertical-align: middle;
	width: 300px;
	min-height: 28px;
	height: 28px;
	border: 1px solid #BCBCBC;
	border-radius: 6px 6px 6px 6px;
	padding: 6px 0 6px 10px;
	cursor: pointer;
	transition: opacity 0.2s ease-in 0s;
}
.selectButton {
	display: inline-table;
	vertical-align: middle;
	width: 250px;
	min-height: 28px;
	height: 28px;
	border: 1px solid #BCBCBC;
	border-radius: 6px 6px 6px 6px;
	padding: 6px 0 6px 10px;
	cursor: pointer;
	transition: opacity 0.2s ease-in 0s;
}
a:hover span.Button,
a:hover span.selectButton,
a:hover span.smallButton,
a:active span.Button,
a:active span.selectButton,
a:active span.smallButton {
	color: #333333;
	text-decoration: none;
	background: #f5f5f5;
}
.ButtonText {
	word-break: break-all;
	min-height: 32px;
	height: 32px;
	color: #333333;
	text-decoration: none;
	display: table-cell;
	vertical-align: middle;
	font-size: 12px;
	line-height: 1.2em;
	padding-right: 12px;
	letter-spacing: 0;
	_margin: -3px 0 0 0;
	padding-left: 10px;
	background: url(/support/share/images/arrow_black.gif) no-repeat 0px 12px;
}

.txtlink.top_link {
	display: inline-block;
	float: right;
}


#productsArea .pct.one_case {
	width: 400px;
	margin: 0 auto;
}

#productsArea .pct.one_case p {
	text-align: right;
	margin: 15px 0 0;
}
#productsArea #contents .pct.one_case img {
	margin: 0px 0 20px 0px;
}

#productsArea .pct.one_case_left {
	width: auto;
	text-align: left;
	margin-top: 15px
}

#productsArea .pct.one_case_left p {
	margin: 0px;
}
#productsArea #contents .pct.one_case_left img {
	margin: 0px 0 20px 0px;
}


.on {
	color: #333333;
	text-decoration: none;
	background: #f5f5f5;
}

#contents .pregBox .two_column{
	display: inline-block;
	width: 400px;
	vertical-align: top;
}


/*
----------------------------------------------------------------------------
	画面幅＜640px＞以下のときに適用
----------------------------------------------------------------------------
*/
@media screen and (max-width: 640px) {

	.Button {
		width: 90%;
	}
	.selectButton{
		margin-bottom: 10px;
	}
	.smallButton{
		width: 90%;
	}
	#productsArea ul.btn_area {
		margin-left: 6px;
	}
	.main_area .txt_l {
		float: none;
		width: auto;
		margin-bottom: 5px;
	}
	.main_area .pct_r {
		float: none;
		text-align: center;
	}
	#contents .pregBox .list_body{
		margin-left: 0px;
	}
	#contents ul.btn_area_select {
		margin-left: 0px;
	}
	
	#contents .pregBox .two_column{
		width: auto;
	}


}

/*------------------------
	STEP ボタン
------------------------*/

#contents .step_box {
	margin: 0 0 20px 20px;
}
#contents .step_box span {
	display: table-cell;
	text-align: center;
	height: 50px;
	font-weight: bold;
	vertical-align: middle;
	*float: left;
	*padding-top: 4px;
}
#contents .step_box .step1a {
	width: 160px;
	background: url("/support/walkman/flow/shindan/jacket/images/step_img/step_01a.png") no-repeat ;
}
#contents .step_box .step1b {
	width: 140px;
	color: #FFFFFF;
	background: url("/support/walkman/flow/shindan/jacket/images/step_img/step_01b.png") no-repeat ;
}
#contents .step_box .step_m {
	width: 150px;
	color: #FFFFFF;
	background: url("/support/walkman/flow/shindan/jacket/images/step_img/step_xx.png") no-repeat ;
}
#contents .step_box .step_l {
	width: 160px;
	background: url("/support/walkman/flow/shindan/jacket/images/step_img/step_last.png") no-repeat ;
}

#contents .step_box span a {
	color: #FFFFFF;
}



@media screen and (max-width: 640px) {
	#contents .step_box{
		margin-left: 10px;
	}
	#contents .step_box .step1b,
	#contents .step_box .step_m {
		display: none;
	}
	#contents .step_box .step1a,
	#contents .step_box .step_l {
		width: 160px;
		background: url("/support/walkman/flow/shindan/jacket/images/step_img/step_01a.png") no-repeat ;
	}
}

/*------------------------
	STEP  エリア
------------------------*/
#contents div#step_area,
#contents div#step_area_step2 {
	margin-bottom: 50px;
}

#contents div#step_area h3,
#contents div#step_area_step2 h3 {
	margin-top: 0px;
}

@media screen and (max-width: 640px) {
	
	#contents div#step_area h3 
	#contents div#step_area_step2 h3{
		margin-left: 0px;
		padding-left: 5px;
	}
	
}