@charset "Shift_JIS";

/*ボタンのリセット*/
input[type="button"],
input[type="submit"] {
	appearance:none;
	-webkit-appearance:none;
}
/*MacSafari対策*/
input:focus::-webkit-input-placeholder, isindex:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
 color: transparent;
}

/*========================================
ヘッダフッタ制御
========================================*/
.layout_form #global_banner,
.layout_form #footer_navi,
.layout_form .ui_box { display:none; }

/*========================================
PCとスマホで共通の設定
========================================*/
input,
button,
textarea,
select {
	vertical-align: middle;
	margin:  0.1em;
	padding:0.1em 0.2em;
	background: #fff;
	border: 0.1em solid #ccc;
	border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	outline: none;
	font-size:1em;
	font-family: inherit;
}

input[type="radio"] {
	font-size:auto/*base.css相殺*/;
	height:auto/*base.css相殺*/;
	width:auto/*base.css相殺*/;
	top:-2px;
	position: relative;
}

input[type="file"] {
	border:none;
	font-size:0.88em;
	background:none;
}

input[type="button"],
input[type="submit"] {
	padding:0.3em 0.5em;
	border-color:#999;
}

label {
	display:inline-block;
	padding:0.2em 0;
	margin-right:0.5em;
}

label.disabled {
	opacity:0.5;
	cursor:default;
}

.body_sph input,
.body_sph button,
.body_sph textarea,
.body_sph select { padding:0.2em; }

.body_sph input[type="radio"] {
	height:1.2em;
	width:1.2em;
}

/*========================================
バグ対応
========================================*/

@media all and (-ms-high-contrast:none) {
 *::-ms-backdrop, input[type="radio"] {/* IE11 */
 border:none;
 background:none;
}
}

.alerts { color:#F33; }

/*========================================
readonly
========================================*/
input[type="radio"]:disabled + label { color:#CCC; }

input.readonly {
	background-color:#f0f0f0;
	font-weight:bold;
}

/*========================================
form_box
========================================*/
.form_box {
	margin:1em 0;
	border:2px solid #ccc;
}

.body_sph .form_box {/*暫定対応
マークアップ修正後にglobal_setで全sphを変更*/ margin:1em 0; /*font-size:14px;
	font-size:4vw;*/ }

.form_box dl:first-child { border-top:none; }

/*clearfix*/
.form_box > dl:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.form_box > dl { min-height: 1px; }

* html .form_box > dl { /*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }

.form_box > dl {
	border-top:1px solid #ccc;
	background:#f0f0f0;
}

.form_box > dl > dt,
.form_box > dl > dd { padding:0.5em 0.8em; }

.form_box dl > dt span {
	font-size:0.83em;
	display:inline-block;
}

.form_box > dl > dd { background-color:#fff; }

.form_box .caption,
#change_box .caption {
	font-size:0.8em;
	color:#666;
	display:inline-block;
}

.example {
	font-size:0.85em;
	color:#999;
	display:inline-block;
	font-style:italic;
}

.example:before { content:"例）"; }

/*----------------------------------------
PC
----------------------------------------*/
.form_box > dl > dt {
	width:14em;
	float:left;
}

.form_box > dl > dd { margin-left:15em; }

/*table組みにしたい

.body_pc .form_box:before {
	content:"table表示確認中";
	color:#f00;
}

.body_pc .form_box {
	display:table;
	margin-left:auto;
	margin-right:auto;
}

.body_pc .form_box dl { display:table-row; }

.body_pc .form_box dl > dt,
.body_pc .form_box dl > dd {
	display:table-cell;
	border-top:0.1em solid #ccc;
}

.body_pc .form_box dl > dt { white-space:nowrap; }
*/


/*========================================
form_search
========================================*/
.form_search { padding:0.5em 0; }

.form_search dd { margin:0.2em 0; }

.body_pc .form_search dl,
.body_pc .form_search dt,
.body_pc .form_search dd {
	display:inline-block;
	margin:0.2em;
}

/*========================================
btn_box
========================================*/
.btn_box {
	position:relative;
	margin:3em 0;
	text-align:center;
}

.body_pc .btn_box { margin:3em 1em; }

/*clearfix*/
.btn_box:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.btn_box { min-height: 1px; }

* html .btn_box { /*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }

.btn_box input {
	border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-moz-border-radius:0.5em;
	padding:1em 0.7em;
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	cursor:pointer;
}

.btn_box input[type="submit"] {
	min-width:5em;
	background:#004098;
	color:#fff;
	padding-right:1em;
	padding-left:1em;
}

.form_box .btn_box,
.tokuten_box .btn_box { margin:0; }

/*========================================
ログイン
========================================*/
.btn_login a { background:#fff; }

#body_login .btn_login a,
#body_newcustadd .btn_login a {
	background:#004098;
	color:#fff;
}

/*========================================
  cssボタン共通設定
========================================*/
.btn_box div > a,
ul.btn_box li a {
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	padding:0.5em 1.2em;
	min-width:5em;
	margin:0.2em;
	border:1px solid #ccc;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	box-shadow:rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
}

.body_pc .btn_box div > a,
ul.btn_box li a {
	font-size:1.3em;
	display:inline-block;
	vertical-align:middle;
}

.body_sph .btn_box div > a {
	display:inline-block;
	padding:1em 1.2em;
}

.btn_box > a:hover {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}

/*----------------------------------------
戻る
----------------------------------------*/

.btn_box > div + .btn_back {
	float:none;
	position:absolute;
	left:0;
	bottom:0;
}

/*----------------------------------------
次へ
----------------------------------------*/
.btn_next { float:right; }

.btn_next > a {
	color:#fff;
	background-color:#004098;
}

.btn_next p {
	display:inline-block;
	vertical-align:middle;
	margin-bottom:0;
	text-align:left;
}

.body_pc .btn_next p { max-width:60%; }

/*----------------------------------------
確認する
----------------------------------------*/

.btn_confirm a {
	color:#fff;
	background-color:#004098;
}

/*----------------------------------------
変更する
----------------------------------------*/

.btn_change a {
	color:#fff;
	background-color:#004098;
}

/*----------------------------------------
送信する
----------------------------------------*/


.btn_send a {
	color:#fff;
	background-color:#004098;
}

/*----------------------------------------
送信する
----------------------------------------*/


.btn_finalorder a {
	color:#fff;
	background-color:#004098;
}

/*----------------------------------------
btn_mydhc
----------------------------------------*/


.btn_mydhc a {
	display:block;
	background:#004098;
	color:#fff;
	padding:0.7em 0;
	text-align:center;
}

.contents_side .btn_mydhc a { }

/*----------------------------------------
クーポンを保存する
----------------------------------------*/
.btn_coupon_save a {
	background:#004098;
	color:#fff;
}

/*----------------------------------------
サンプルおまかせボタン
----------------------------------------*/

.btn_omakase a {
	display:inline-block;
	border:0.1em solid #999;
	padding:0.6em 1.2em;
	text-decoration:none;
	border-radius:0.5em;/*color:#fff;
	background-color:#666;*/
	margin-bottom:2em;
}

.btn_omakase a:before {
	content:"\e960";
	font-family:icomoon;
	color:#999;
	margin-right:0.3em;
	font-size:1.3em;
	vertical-align:-0.1em;
}

.body_sph .btn_omakase a {
	margin:0 auto;
	font-size:0.88em;
	display:block;
	width:11em;
	text-align:center;
	padding:0.7em 0;
}

/*----------------------------------------
検索（テキストボタン）
----------------------------------------*/
.btn_search {
	display:inline-block;
	white-space:nowrap;
	line-height:1;
}

.btn_search a {
	display:block;
	background:#333;
	color:#fff;
	padding:0.5em 0.7em;
	text-decoration:none;
	border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
}

.btn_search a:before {
	content:"\e944";
	margin-right:0.3em;
	font-weight:normal;
}

/*----------------------------------------
追加（テキストボタン）
----------------------------------------*/
.btn_plus { text-align:right; }

.btn_plus a {
	line-height:1;
	display:inline-block;
	border:0.1em solid #999;
	padding:0.5em 0.6em;
	text-decoration:none;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
}

.btn_plus a:before {
	content:"\e96c";
	margin-right:0.2em;
}

.btn_plus a:hover { border-color:#000; }

/*----------------------------------------
削除（テキストボタン）
----------------------------------------*/

.btn_delete,
.btn_clear {
	display:inline-block;
	white-space:nowrap;
	line-height:1;
    border: 1px solid #999;/*231219追加*/
    margin: 0.1em;/*231219追加*/
    font-size: 0.85em;/*231219追加*/
    margin-top: -0.1em;/*231219追加*/
    border-radius: 3px;/*231219追加*/
}

.btn_delete a,
.btn_clear a {
	display:inline-block;
	padding:0.5em 0.4em 0.4em 0.4em;
	padding-right:0.5em;
	text-decoration:none;
	color:#666;
	border-radius:1em;
	-webkit-border-radius:1em;
	-moz-border-radius:1em;
}

.btn_delete a:before,
.btn_clear a:before {
/*	content:"\e95d";*//*231219非表示*/
/*	font-family:icomoon;*//*231219非表示*/
	margin-right:0.2em;
}

select + .btn_delete { margin-top:0.4em; }

/*----------------------------------------
増減（テキストボタン）
----------------------------------------*/

.btn_fluctuation {
	display:inline-block;
	white-space:nowrap;
	line-height:1;
	font-size:0.88em;
}

.body_sph .btn_fluctuation {
	font-size:0.8em;
	margin-left:0.2em;
}

.btn_fluctuation a {
	display:inline-block;
	padding:0.3em 0.5em;
	padding-right:0.7em;
	text-decoration:none;
	/*color:#666;*/
	border-radius:1em;
	-webkit-border-radius:1em;
	-moz-border-radius:1em;
	border:0.1em solid #666;
}

.btn_fluctuation a:before {
	content:"\e9a3";
	font-family:icomoon;
	margin-right:0.2em;
}

/*----------------------------------------
ログイン（テキストボタン）
----------------------------------------*/
/*.btn_login a:before{content:"\e934";
font-family:icomoon;
margin-right:0.2em;font-weight:normal;vertical-align:-0.1em;}

/*----------------------------------------
ログアウト（テキストボタン）
----------------------------------------*/
/*.btn_logout a:before{content:"\e928";
font-family:icomoon;
margin-right:0.2em;font-weight:normal;vertical-align:-0.1em;}

/*----------------------------------------
お気に入りボタン
----------------------------------------*/
.btn_favorite a {
	display:block;
	text-align:left;
	line-height:1;
	text-decoration:none;
}

.btn_favorite a:before {
	content:"\e916";
	font-family:icomoon;
	font-weight:100;
	margin-right:0.2em;
	color:#666;
	font-size:1.2em;
	vertical-align:-0.1em;
}

.btn_favorite a.active:before {
	content:"\e917";
	color:#ff433c;
}

/*----------------------------------------
新しい住所を追加
----------------------------------------*/
.btn_newreceiver {
	display:block;
	text-align:left;
	line-height:1;
}

.btn_newreceiver a {
	display:inline-block;
	font-size: 1.15em;
	font-weight:bold;
	padding:0.8em 0;
}

.btn_newreceiver a:before {
	content:"\e95b";
	font-weight:normal;
	opacity:0.7;
	display:inline-block;
	text-decoration:none;
	margin-right:0.2em;
}

/*----------------------------------------
定期コースに追加
----------------------------------------*/
#addMyPeriod { margin-top:1em; }

.btn_courseadd {
	display:block;
	line-height:1;
	text-align:left;
}

.btn_courseadd a {
	display:inline-block;
	font-size: 1.15em;
	font-weight:bold;
	padding:0.8em 0;
}

.btn_courseadd a:before {
	content:"\e95a";
	font-family:icomoon;
	font-weight:normal;
	display:inline-block;
	text-decoration:none;
	opacity:0.7;
	margin-right:0.2em;
}

.btn_courseadd.open a:before,
.btn_courseadd a.active:before { content:"\e95c"; }

/*既存定期コースの詳細
----------------------------------------*/
.orderselect_box .btn_courseadd { text-align:right; }

.orderselect_box .btn_courseadd a {
	font-weight:normal;
	font-size:1em;
}

/*========================================
カレンダー
========================================*/
.form_fulldate img#calbutton {
	vertical-align:middle;
	width:2em;
	margin-left:0.5em;
}

/*========================================
項目別フィールドサイズ設定
========================================*/
.form_box input[type="text"],
.form_box input[type="password"]{ max-width:100%; }

.form_box textarea {
	width:98%;
	resize: vertical;
}

.form_box .form_name input[type="text"] { width:7em; }

.body_sph .form_name label { display:table-cell; }

.body_sph .form_box .form_name input[type="text"] { width:80% }

.form_title input { width:98%; }

.form_message textarea { height:8em; }

.body_pc .form_message textarea { height:15em; }

.body_pc .form_box .form_email input[type="text"] { max-width:15em; }

.body_pc .form_box .form_password input { max-width:15em; }

.form_box .form_birthday input#birthyear,
.form_box .form_date input[type="text"] { width:3.5em!important; }

.form_box .form_birthday input[type="text"],
.form_box .form_birthday input[type="tel"] { width:3em!important; }

.form_box .form_zip input[type="text"],
.form_box .form_zip input[type="tel"] { width:3.5em!important; }

.form_box .form_knowmedia input[type="text"],
.form_box .form_knowmedia input[type="tel"] { width:5em!important; }

.form_box input#ambId { width:10em; }

.form_cardno input {
	width:3.5em!important;
	ime-mode: disabled;
}

.body_pc .form_goodsname input[type="text"] { width:70%; }

.body_pc .form_goodsname .btn_box,
.body_pc .form_goodsname .btn_search a {
	display:inline;
	font-size:0.9em;
}

.form_title input[type="text"] { width:98% }

.form_age input[type="text"] {
	width:3em!important;
	text-align:center;
}

.body_pc .form_coupon input { width:15em; }

.form_credit input[type="text"],
.form_credit input[type="tel"],
.form_credit input[type="password"] { width:4em!important; }

/*----------------------------------------
住所
----------------------------------------*/
.form_address textarea { height:4em; }

.form_box .form_address input[type="text"] { width:20em; }
.body_pc .form_box .form_address label.label_input:not(:last-of-type) span {
display:inline-block;
width:4em;
}

.body_pc .form_box .form_address label.label_input:last-of-type input { width:24.5em; }

.body_pc .form_box .form_address label.label_input:last-of-type span,
.body_sph .form_box .form_address label { display:block; }

.body_sph .form_box .form_address input { width:100%; }

/*========================================
画像認証
========================================*/
.form_captcha .pict {
	background:url("/common/image/bg_slash.png")repeat left top;
	margin:0.3em 0;
	padding:0.7em;
}

.form_captcha a {
	font-size:0.83em;
	color:#666;
}

/*========================================
郵便番号を入力してクリックボタン
========================================*/
input#findPostBtn {
	background:#004098;
	color:#fff;
	border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-moz-border-radius:0.5em;
	padding:0.2em 0.7em;
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	cursor:pointer;
}

#findPostBtn { margin:0.5em 0; }

#findPostBtn a {
	display:inline-block;
	background-color:#004098;
	color:#fff;
	text-decoration:none;
	line-height:1;
	padding:0.5em 1em;
	border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-moz-border-radius:0.5em;
}

/*========================================
DHCギフト券
========================================*/
.form_box .form_coupondesign dd li,
.form_coupondesign label,
.form_coupondesign a { display:block; }

.body_pc .form_box .form_coupondesign dd ul { display:table; }

.body_pc .form_box .form_coupondesign dd li {
	display:table-cell;
	padding:0.3em;
}

/*==========================================
スマホ対応
==========================================*/
.body_sph .form_box dl > dt {
	width:auto;
	float:none;
	font-size:0.85em;
}

.body_sph .form_box dl > dd { margin-left:0; }

.body_sph select {
	border: 0.1em solid #ccc;
	-webkit-appearance: button;
	-moz-appearance: none;
	appearance: button;
	border-radius:0.3em;
	-webkit-border-radius:0.3em;
	-moz-border-radius:0.3em;
	line-height: 2;
	padding-right:1.5em;
	background:#fff url("/sph/image/select_open.png") no-repeat right center;
	background-size:1.5em auto;
	-webkit-background-size:1.5em auto;
	-moz-background-size:1.5em auto;
	-o-background-size:1.5em auto;
	-ms-background-size:1.5em auto;
	min-width:1em;
	max-width: 100%;
	overflow:hidden;
}
 @media screen and (max-width:650px) {
.form_box dl > dt {
width:auto;
float:none;
}
.form_box dl > dd {
margin-left:0;
}

/*========================================
ラジオボタンスイッチャー
========================================*/
ul.form_switch input[type="radio"] {
display:none;
}
ul.form_switch {
width:100%;
border:1px solid #ccc;
display:table;
table-layout:fixed;
}
ul.form_switch li {
display:table-cell;
padding:0.2em;
border-left:1px dotted #ccc;
vertical-align:middle;
}
ul.form_switch li:first-child {
border-left:none;
}
ul.form_switch li label {
display:block;
text-align:center;
padding:1em 0.4em;
}
ul.form_switch li input[type="radio"]:checked + label {
background-color:#f98c17;
color:#fff;
}
}

/*========================================
在庫表
========================================*/
 @media screen and (min-width:649px) {
#stock_box .form_box dt {
width:50%;
}
 #stock_box .form_box dd {
margin-left:50%;
}
}

/*========================================
sendmail_box　メールを送りましたマーク
========================================*/
.sendmail_box {
	border:1px solid #ccc;
	background:url("/common/image/mark_mail.png") no-repeat 1em center;
	background-size:2.5em auto/*svgではauto→100%*/;
	-webkit-background-size:2.5em auto;
	-moz-background-size:2.5em auto;
	-o-background-size:2.5em auto;
	-ms-background-size:2.5em auto;
	padding:1em;
	padding-left:4em;
	margin:2em 1em;
}

.sendmail_box p { margin-bottom:0; }

.sendmail_box p + * { margin-top:1em; }

/*========================================
headsup_box　注意喚起マーク
========================================*/
.headsup_box {
	margin:2em 0;
	padding:1em;
	border:0.1em solid #fed234;
	background:#fffbe6;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
}

.headsup_box .mark { position:relative; }

.body_pc .headsup_box .mark {
	margin:0.5em 0 1em;
	padding-left:3em;
}

.headsup_box .mark:before {
	content:"\e95f";
	font-family:icomoon;
	color:#999;
	width:1em;
	height:1em;
	line-height:1;
}

.body_pc .headsup_box .mark:before {
	font-size:2.2em;
	bottom:0;
	margin:auto;
	position:absolute;
	left:0;
	top:0;
}

.body_sph .headsup_box .mark:before {
	font-size:1.7em;
	float:left;
	margin-right:0.2em;
}

.headsup_box .mark strong { color:#f00; }

.headsup_box .list_check {
	background:#fff;
	padding:0.5em 1em;
	margin: 0;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	border:3px double #ccc;
	font-size:0.88em;
}

.headsup_box p,
.headsup_box .list_circle li { margin-bottom:0.6em; }

.headsup_box p:last-child,
.headsup_box .list_circle li:last-child { margin-bottom:0; }

.headsup_box .btn_box { margin:1em 0; }

.body_sph .headsup_box li { font-size:0.88em; }

/*========================================
faq_pickup_box　よくあるご質問ピックアップ
========================================*/
.faq_pickup_box {
	margin:2em 0;
	padding:1em;
	border:1px solid #ccc;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
}

.body_pc .contents_main .faq_pickup_box ul { margin-left:1.5em; }

.faq_pickup_box .faq_title {
	padding:0.5em;
	padding-left:25px/*画像サイズに合わせて固定指定*/;
	margin-bottom:0.5em;
	font-weight:bold;
	background: url("/faq/image/mark.png") no-repeat left top;
}

.faq_pickup_box .faq_list li {
	padding:0.3em 0;
	text-indent:-1.8em;
	padding-left:1.8em;
}

.faq_pickup_box .faq_list img {
	height:1.35em;
	margin-right:0.3em;
	vertical-align:middle;
}

.contents_side .faq_pickup_box { padding:0.7em; }

.contents_side .faq_pickup_box li { border-top:0.1em dotted #ccc; }

.contents_side .faq_pickup_box li a { text-decoration:none; }

.contents_side .faq_pickup_box li:hover { background-color:#f0f0f0; }

/*========================================
body_remind　
========================================*/
/*法人注記非表示*/
#body_remind .form_fullname .attention { display:none; }

/*ドメイン指定受信注記非表示*/
#body_remind .form_email .attention { display:none; }

/*=================================================
change_box
=================================================*/
#change_box {
	text-align:center;
	margin:2em auto;
	background:#f0f0f0;
	padding:1em;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
}

#change_box dl,
#change_box dt,
#change_box dd { display:inline-block; }

#change_box dt:after { content:"："; }

#change_box p { margin-bottom:0; }

#change_box dd .caption { display:none; }

/*========================================
label_input 確認次第
========================================*/
/*IE8暫定対応*/
label.label_input { width:10em\9; }

label.label_textarea { width:90%\9; }

/*label.label_input {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	margin:0.1em;
	padding:0.1em 0.2em;
	display:block;
}

label.label_input span {
	font-size:0.7em;
	color:#999;
	display:block;
}

label.label_input input,
label.label_input textarea {
	border:none;
	padding:0;
	width:100%!important;
}

label.label_input.readonly { background:#f0f0f0; }

.form_name label.label_input{width:46%;float:left;}*/

/*========================================
label_radio
========================================*/
label.label_radio {
	position:relative;
	text-align:left;
	padding-left:2em;
	text-indent:-2em;
	padding-right:0.5em;
	margin-right:0;
}

label.label_radio input[type="radio"] {
	display:none;
	display:inline\9;
	border:none\9;
}

label.label_radio input[type="radio"] + span {
	font-size:1em;
	cursor : pointer;
	display:inline;
}

label.label_radio input[type="radio"] + span:before {
	content:" ";
	display:inline-block;
	vertical-align:top;
	width:1.8em;
	height:1.5em;
	background:url("/common/image/mark_radio_off.png") no-repeat center left;
	background-size:contain;
	-webkit-background-size:contain;
	-moz-background-size:contain;
	-o-background-size:contain;
	-ms-background-size:contain;
	background:none\9;
	display:inline\9;
}

label.label_radio input[type="radio"]:checked + span:before { background-image:url("/common/image/mark_radio_on.png"); }

label.label_radio input[type="radio"]:disabled + span {
	color:#999;
	cursor:default;
}

label.label_radio input[type="radio"]:disabled + span:before { background-image:url("/common/image/mark_radio_readonly.png"); }

/*----------------------------------------
スマホで押しやすく
----------------------------------------*/
.body_sph .form_sex label.label_radio,
.body_sph .form_magazine label.label_radio,
.body_sph .form_catalog label.label_radio,
.body_sph .form_dm label.label_radio {
	border:0.1em solid #f0f0f0;
	min-width:48%;
	padding:0.5em;
	padding-left:2.5em;
	border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-moz-border-radius:0.5em;
}

.body_sph .form_sex label.label_radio:hover,
.body_sph .form_magazine label.label_radio:hover,
.body_sph .form_catalog label.label_radio:hover,
.body_sph .form_dm label.label_radio:hover {
	background:#f0f0f0;
	border-color:#666;
}

/*========================================
label_check
========================================*/
label.label_check {
	position:relative;
	text-align:left;
	padding-left:2em;
	text-indent:-2em;
	margin-right:0;
	vertical-align:middle;
}

label.label_check input[type="checkbox"] {
	display:none;
	display:inline\9;
	border:none\9;
}

label.label_check input[type="checkbox"] + span {
	font-size:1em;
	cursor : pointer;
	display:inline;
}

label.label_check input[type="checkbox"] + span:before {
	content:" ";
	display:inline-block;
	vertical-align:top;
	width:1.8em;
	height:1.5em;
	background:url("/common/image/mark_check_off.png") no-repeat center left;
	background-size:contain;
	-webkit-background-size:contain;
	-moz-background-size:contain;
	-o-background-size:contain;
	-ms-background-size:contain;
	background:none\9;
	display:inline\9;
}

label.label_check input[type="checkbox"]:checked + span:before { background-image:url("/common/image/mark_check_on.png"); }

label.label_check input[type="checkbox"]:disabled + span {
	color:#999;
	cursor:default;
}

label.label_check input[type="checkbox"]:disabled + span:before { background-image:url("/common/image/mark_check_readonly.png"); }

/*========================================
label_file
========================================*/
label.label_file { position:relative; }

label.label_file:before {
	content:"ファイルを選択";
	background:#666;
	color:#fff;
	border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-moz-border-radius:0.5em;
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
	padding:0.5em;
	margin:0.3em 0;
	display:block;
	width:8em;
	text-align:center;
	cursor:pointer;
}

label.label_file:hover:before { background:#888; }

label.label_file input {
	position:absolute;
	right:0;
	top:0;
	width:100%;
	height:100%;
	font-size:400em\9;
	opacity:0;
}

/*========================================
パスワードを表示する
========================================*/
input.toggle_password {
	margin-top:0.2em;
	font-size:0.75em;
	text-align:center;
	background:#f0f0f0;
	line-height:0;
	padding:1em 0;
	width:4em;
	display:none\9/*IE8非対応のためボタンを非表示に*/;
}

/*========================================
orderselect_list/orderselect_form
========================================*/


dl.orderselect_list,
dl.orderselect_form {
	margin-bottom:0.8em;
	border:0.1em solid #999;
	border-radius:0.2em;
}

dl.orderselect_list > dt,
dl.orderselect_list > dd,
dl.orderselect_form > dt,
dl.orderselect_form > dd { padding:0.3em 0.5em; }

.body_pc dl.orderselect_list,
.body_pc dl.orderselect_form {
	width:100%;
	display:table;
}

.body_pc dl.orderselect_list > dt,
.body_pc dl.orderselect_list > dd,
.body_pc dl.orderselect_form > dt,
.body_pc dl.orderselect_form > dd {
	display:table-cell;
	vertical-align:middle;
	padding:0.5em 0.7em;
}

.body_pc dl.orderselect_list > dt,
.body_pc dl.orderselect_form > dt { width:10em; }

.body_sph dl.orderselect_list > dd,
.body_sph dl.orderselect_form > dd {
	border-top:1px dotted #ccc;
	font-size:0.88em;
}

.body_pc dl.orderselect_list > dd,
.body_pc dl.orderselect_form > dd { border-left:1px dotted #ccc; }

/*----------------------------------------
orderselect_list独自
----------------------------------------*/
dl.orderselect_list > dt {
	padding-right:1.7em;
	position:relative;
	background-color:#fffbe6;/*background:url("/common/image/bg_slash.png") repeat left top;*/
}

dl.orderselect_list > dt a:after {
	content:"\e96a";
	display:block;
	width:1em;
	height:1em;
	position:absolute;
	right:0.6em;
	top:0;
	bottom:0;
	margin:auto;
	line-height:1;
	font-weight:normal;
}

dl.orderselect_list > dt a,
dl.orderselect_list > dt span {
	display:block;
	padding:0.4em 0.3em;
	text-decoration:none;
	padding-left:2em;
	background:url("/common/image/mark_radio_off.png") no-repeat 0 center;
	background-size:1.5em auto;
}

dl.orderselect_list > dt a:hover { background-image:url("/common/image/mark_radio_on.png"); }

dl.orderselect_list > dt.disabled {
	opacity:0.5;
	background:#f0f0f0;
}

/*========================================
20231127ステップバー
========================================*/
.progressbar {
    position: relative;
    margin-bottom: 5%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    z-index: 0;
    justify-content: space-between;
}
.body_pc .progressbar {
    margin: 2% 5%;
}
.progressbar li {
    position: relative;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8em;
    color: #666;
    counter-increment: steps;
}

/* data-cust="new"に指定したいcss */
.progressbar[data-cust="new"] li {
    width: 20%;
}

/* data-cust="exist"に指定したいcss */
.progressbar[data-cust="exist"] li {
    width: 32%;
}

.progressbar li.active,
.progressbar li.complete{
    font-weight: bold;
    color:#004099;
}

.progressbar li:before {
    display: block;
    width: 50px;
    height: 50px;
    margin: 7px auto 10px auto;
    content: '';
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    border: solid 1px #999;
    border-radius: 50%;
    background-color: #ffffff;
    content: counter(steps);
}

.progressbar li:after {
    position: absolute;
    z-index: -1;
    top: 30px;
    left: -50%;
    width: 100%;
    height: 3px;
    content: '';
    background-color: #ccc;
}
.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active:before {
    background-color: #004099;
    color: #FFF;
    border: solid 1px #004099;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
/*    font-size: 1.4em;*/
}
.progressbar li.complete:before{
    background-color: #deeaf6;
    border: solid 2px;
}
.progressbar li.active:after,
.progressbar li.complete:after {
    background-color: #004099;
}