@charset "Shift_JIS";

/* ---------------------------------------
 お支払い方法の設定
---------------------------------------- */
/* 共通パーツ */
div.method_box_ { margin-bottom: 20px;}
div.method_box_.border { border: #D8D8DB 1px solid;}
div.method_box_ h3 { padding: 18px 40px; margin: 0; border-bottom: #D8D8DB 1px solid; font-size: 24px; font-weight: 400; line-height: 1; background: #F8F8FB;}
div.method_box_ .method_box_content_ { padding: 40px;}

/* お支払い方法
---------------------------------------- */
#method_pay { margin: 0 0 40px 0; border: none;}
#method_pay > h2 { padding: 0; margin: 0 0 10px 0; font-size: 14px; font-weight: 400; display: flex; align-items: center;}
#method_pay .method_box_content_ { padding: 0; margin: 10px 0 20px; display: flex; flex-wrap: wrap;}
#method_pay .method_box_content_ span { font-size: 12px; color: #757575; display: block;}
#method_pay .method_box_content_ span.efo-error_ { color: #D10000; font-size: 16px;}
#method_pay .method_pay_btn {
  width: calc((100% - 60px)/4);
  height: 79px;
  padding: 0;
  margin: 0 20px 20px 0;
  border: #1A1A1C 1px solid;
  border-radius: 6px;
  display: flex;
  justify-content: left;
  align-items: center;
}
#method_pay .method_pay_btn:nth-child(4n) { margin: 0 0 10px 0;}
#method_pay .method_pay_btn:has(input[type="radio"]:checked) { border: #CC0000 2px solid;}
#method_pay .method_pay_btn:has(input:disabled) { border-color: #949497; background-color: #F1F1F4; color: #949497;}
#method_pay .method_pay_btn label {
  width: 100%;
  height: 100%;
  padding: 10px 10px 10px 54px;
  margin: 0;
	font-size: 16px;
	line-height: 1.2;
  display: flex;
  justify-content: left;
  align-items: center;
  position: relative;
}
#method_pay .method_pay_btn label:before {
  content: '';
  width: 18px;
  height: 18px;
  border: #1A1A1C 1px solid;
  border-radius: 50%;
  display: block;
  background: #FFF;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
#method_pay .method_pay_btn input[type="radio"],
#method_pay .method_pay_btn input[type="radio"]:checked:before { display: none;}
#method_pay .method_pay_btn input[type="radio"]:checked + label:before { border-color: #CC0000;}
#method_pay .method_pay_btn input[type="radio"]:checked + label:after {
  content: '';
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  display: block;
  background: #CC0000;
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
#method_pay .method_pay_btn input:disabled + label:before { border-color: #949497; background-color: transparent;}
#method_pay .method_pay_btn input:disabled { border: none;}
#method_pay .method_pay_btn input:disabled:hover { opacity: 1;}
#method_pay .method_pay_text_wrap { margin-top: 24px; margin-bottom: 16px; color: #404040;}
#method_pay .method_pay_text_wrap p { padding: 0 0 0 1em; font-size: 14px; text-indent: -1em; line-height: 1.8;}

#method_pay #jpbaknentry_link { margin-top: 40px; display: none;}
#method_pay #jpbaknentry_link p.text_ { text-align: center;}
#method_pay #jpbaknentry_link div.btn_ { margin: 20px 0 0 0; text-align: center;}
#method_pay #jpbaknentry_link div.btn_ .yellow_button_ { 
	width: 300px;
	height: 56px;
	padding: 0;
	margin: 0 auto;
	border-radius: 56px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 本人認証
---------------------------------------- */
#method_authperson .method_authperson_question_ { margin: 0 0 20px 0;}
#method_authperson table.method_authperson_answer_ th { margin-top: 0;}

/* クーポン利用
---------------------------------------- */
#method_coupon { vertical-align: middle; overflow: hidden;}
#method_coupon .ttl_ { margin: 0 0 7px 0; font-size: 14px; font-weight: 500;}
#method_coupon .open_available_coupon { 
	padding: 8px 18px;
	margin: 0 0 0 20px;
	border: #333 1px solid;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	color: #333;
	display: inline-block;
	transition: 0.2s;
	position: relative;
	top: 3px;
}
#method_coupon .open_available_coupon:hover { opacity: 0.7;}

/* 利用可能クーポン（ポップアップ）
---------------------------------------- */
#available_coupon { width: 872px; padding: 40px 56px; margin: 0 auto; border-radius: 12px; background: #FFF;}
#available_coupon .close_button_ img { display: none !important;}
#available_coupon .close_button_ {
  width: 163px;
  height: 40px;
  padding: 0;
  margin: 0 0 16px 0;
  border: #333 1px solid;
  border-radius: 40px;
  outline: none;
  font-size: 16px;
  font-weight: 700;
	text-decoration: none;
  color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFF;
}
#available_coupon .close_button_::before {
  content: '';
  width: 8px;
  height: 8px;
	margin: 0 6px 0 0;
  border-right: #333 1px solid;
  border-top: #333 1px solid;
  display: block;
  transform: rotate(-135deg);
	position: relative;
	top: auto;
	right: auto;
	left: auto;
}
#available_coupon .close_button_::after {
  content: '前の画面に戻る';
  font-size: 16px;
  font-weight: 700;
}
#available_coupon table.available_coupon_ { width: 100%;}
#available_coupon table.available_coupon_ th { font-size: 14px; font-weight: 500; text-align: center; vertical-align: middle;}
#available_coupon table.available_coupon_ td { font-size: 14px; font-weight: 400; vertical-align: middle; background: #FFF;}
#available_coupon table.available_coupon_ .coupon_ { width: 140px;}
#available_coupon table.available_coupon_ .name_ {  word-break: break-all;}
#available_coupon table.available_coupon_ .bonus_type_ { width: 130px;}
#available_coupon table.available_coupon_ .select_ { width: 180px; text-align: center;}
#available_coupon table.available_coupon_ .term_ {}
#available_coupon table.available_coupon_ .freespace_ { word-break: break-all;}
#available_coupon table.available_coupon_ a.select_coupon_ {
  width: 176px;
  height: 40px;
  padding: 0;
  margin: auto;
  border: #CC0000 1px solid;
  border-radius: 40px;
  outline: none;
  font-size: 16px;
  font-weight: 700;
	text-decoration: none;
  color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #CC0000;	
}
#available_coupon table.available_coupon_ a.select_coupon_:hover { opacity: 0.7;}
#available_coupon .available_coupon_empty_ { margin: 40px 0; font-size: 16px; font-weight: 500; text-align: center;}
#available_coupon .navipage_.top_ { min-width: 100%; padding: 0; margin: 20px 0 0 0; justify-content: center;}
#available_coupon .navipage_ a[href=''] { display: none;}

/* ポイント利用
---------------------------------------- */
#method_point { overflow: hidden;}
#method_point .currentpoint_ { margin-bottom: 10px;}
#method_point .currentpoint_ strong { font-size: 20px;}
#method_point .point_use_ { margin-bottom: 5px; display: flex; flex-direction: column; color: #CCC;}
#method_point .point_use_ .point_use_wrap { margin-bottom: 10px;}
#method_point .point_use_ label[for="pointpay"] { width: 100%; margin-right: 30px;}
#method_point .point_use_ input#pointpay { margin-right: 10px;}
#method_point .point_use_ input#pointpay_num {
  width: 150px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0 10px 0 0;
  border: #E9E9E9 1px solid;
  border-radius: 4px;
  text-align: right;
  font-size: 20px;
  color: #AAA;
  background: #E9E9E9;
}
#method_point .point_use_ input#pointpay_num.checked_ { background: #fff !important; color: rgb(34, 34, 34); border: 1px solid rgb(170, 170, 170);}
#method_point .point_desc_ { width: 100%; margin: 0; font-size: 14px;}

/* 当サイトをご案内した郵便局・社員についての情報
---------------------------------------- */
#method_post h3 .sub_ { margin: 0 0 0 20px; font-size: 12px; font-weight: 400; color: #414143;}
#method_post .method_box_content_ { padding: 40px 0; margin: 0 40px; border-bottom: #D9D9DB 1px solid;}

/* 1 */
#method_post .method_box_content_ .postoffice_qa1 { margin: 0 0 10px 0; font-size: 14px; font-weight: 500;}
#method_post .method_box_content_ .postoffice_qa1_selecter_wrap_ { margin: 15px 0; display: flex; align-items: center; column-gap: 10px;}
#method_post .method_box_content_ .postoffice_qa1_selecter_wrap_ label { padding: 0 20px 0 0; margin: 0 10px 0 0;}
#method_post .method_box_content_ .postoffice_qa1_selecter_wrap_ input[type="button"] {
	width: auto;
  min-width: 100px;
	height: 42px;
  padding: 0 30px;
  margin: 0;
  border: #333 1px solid;
  border-radius: 42px;
	font-size: 16px;
	font-weight: 700;
  text-align: center;
  color: #404040;
  display: flex;
	justify-content: center;
	align-items: center;
  background: #fff;
}
#method_post .method_box_content_ .postoffice_qa1_selecter_wrap_ input[type="button"].active_ { border: #707070 1px solid; color: #FFF; background: #707070;}
#method_post .method_box_content_ #search_postoffice_line input[name="search_postoffice"] { width: 250px; margin: 0; float: none;}
#method_post .method_box_content_ #search_postoffice_line #SearchPostOffice {
	padding: 6px 22px;
	margin: 0 0 0 20px;
	border: #333 1px solid;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	color: #333;
	display: inline-block;
	transition: 0.2s;
	position: relative;
	top: 3px;
}
#method_post .method_box_content_ #search_postoffice_line > div { width: 100%; margin: 0 0 0 0; display: flex; align-items: center;}
#method_post .method_box_content_ #search_postoffice_line > div select#post_stop_list { margin: 0; min-width: 380px; max-width: 600px;}
#method_post .method_box_content_ #search_postoffice_line > div .postoffice_serch_wrap { display: flex; align-items: center;}
#method_post .method_box_content_ #search_postoffice_line div.post_stop_select_message_ { margin: 10px 0 0 0;font-size: 12px;line-height: 1.7;color: #333;}
/* 2 */
#method_post .method_box_content_ .postoffice_qa2 { margin: 0 0 10px 0; font-size: 14px; font-weight: 500;}
#method_post .method_box_content_ .postoffice_qa2_selecter_wrap_ { margin: 0 0 15px 0;  display: flex; align-items: center;}
#method_post .method_box_content_ .postoffice_qa2_selecter_wrap_ .input_wrap_ .supplement_ { margin: 0 0 5px 0;}
#method_post .method_box_content_ .postoffice_qa2_selecter_wrap_ .input_between_ { padding: 16.5px 0 0 0; margin: 0 20px;}
#method_post .method_box_content_ .postoffice_qa2_selecter_wrap_ .input_between_::before { content: '-'; font-size: 20px;}
#method_post .method_box_content_ p.indent_ { padding: 0 0 0 1em; font-size: 14px; text-indent: -1em; line-height: 1.8;}

/* 3 */
#method_post .method_box_content_ .postoffice_qa3_intro { margin: 0 0 20px 0; font-size: 14px; font-weight: 400;}
#method_post .method_box_content_ .postoffice_qa3 { margin: 0 0 10px 0; font-size: 14px; font-weight: 500;}
#method_post .method_box_content_ .post_office_notice_ .notice_radio_ { display: flex; justify-content: left; align-items: center;}
#method_post .method_box_content_ .post_office_notice_ .notice_radio_ .notice_radio_wrap { margin: 0 20px 0 0;}
#method_post .postoffice_thanks { padding: 55px 0; margin: 0 40px; font-size: 24px; text-align: center;}

/* 年齢確認
---------------------------------------- */
#method_age .method_box_content_ ul.age_attention_ li { font-size: 16px; font-weight: 400;}
#method_age .method_box_content_ ul.age_attention_ li + li { margin: 7px 0 0 0;}
#method_age .method_box_content_ ul.age_attention_ li strong { font-size: 16px; font-weight: 500; color: #EC0000;}
#method_age .method_box_content_ span.birthdate_ttl_ { font-weight: bold;}
#method_age .method_box_content_ .birthdate_ { width: 100%; padding: 0; line-height: 1.4; display: flex; align-items: center; column-gap: 20px;}
#method_age .method_box_content_ .birthdate_ div { width: auto; display: flex; align-items: center;}
#method_age .method_box_content_ .birthdate_ input[name="age_yyyy"] { width: 110px; margin: 0 10px;}
#method_age .method_box_content_ .birthdate_ select { width: 80px; min-width: 80px; margin: 0 10px 0 0;}

/* サブミットエリア
---------------------------------------- */
div.page_select_ .submit-bottom_ + p.back_attention { margin-top: 20px;}