@charset "Shift_JIS";

/* ---------------------------------------
 購入フロー共通
---------------------------------------- */
div.order_ table { width: 100%;}

/* 再計算ボタン */
input.calc_ { width: 0; height: 0;}

/* TOPへ戻るリンク */
p.back_shop_button_ { padding: 20px 0 30px; border: none; text-align: center; text-decoration: underline; background: #FFF;}
p.back_shop_button_ a { font-size: 16px; text-decoration: none; color: #1D3994;}

/* テキスト風リンク */
div.order-h_ button.delete-txt,
div.order-h_ button.change-txt,
div.order-h_ .reset-txt-box button { padding: 0; margin: 0; border: none; outline: none; text-decoration: underline; line-height: 1; color: #1D3994; background: none; cursor: pointer; transition: 0.2s;}

/* ※「戻る」を押した場合、変更内容は保存されません。 */
div.order-h_ span.back_attention { margin-bottom: 0; font-size: 14px; font-weight: 400; text-align: center; color: #EC0000; display: block;}

/* サブミットボタン下エラー */
div.order-h_ div.submit_.button-area_.last_ + .error_ { text-align: center;}

/* ---------------------------------------
 オーダーフロー
---------------------------------------- */
div.order_flow_ { padding: 16px 0 0; margin: 0 0 35px; text-align: center;}
div.order_flow_ img { width: 100%; max-width: 660px;}

/* ---------------------------------------
 楽天ペイボタン
---------------------------------------- */
#rakuten-pay-button,
#rakuten-pay-button2 { text-align: center;}
#rakuten-pay-button input,
#rakuten-pay-button2 input { display: inline;}

/* ---------------------------------------
 Apple Payボタン
---------------------------------------- */
@supports (-webkit-appearance: -apple-pay-button) { 
	.apple-pay-button-with-text { width: 100%; height: 53px; display: inline-block; -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy;}
  .apple-pay-button-with-text > * { display: none;}
  .apple-pay-button-black-with-text { -apple-pay-button-style: black;}
  .apple-pay-button-white-with-text { -apple-pay-button-style: white;}
  .apple-pay-button-white-with-line-with-text { -apple-pay-button-style: white-outline;}
}
@supports not (-webkit-appearance: -apple-pay-button) { 
	.apple-pay-button-with-text {
		width: 100%;
		min-width: 200px;
		height: 53px;
		min-height: 32px;
		max-height: 64px;
		padding: 0;
		border-radius: 5px;
		font-size: 12px;
		--apple-pay-scale: 1;
		display: inline-flex;
		justify-content: center;
	}
	.apple-pay-button-black-with-text { background-color: black; color: white;}
  .apple-pay-button-white-with-text { background-color: white; color: black;}
  .apple-pay-button-white-with-line-with-text { background-color: white; color: black; border: .5px solid black;}
  .apple-pay-button-with-text.apple-pay-button-black-with-text > .logo { background-image: -webkit-named-image(apple-pay-logo-white); background-color: black;}
  .apple-pay-button-with-text.apple-pay-button-white-with-text > .logo { background-image: -webkit-named-image(apple-pay-logo-black); background-color: white;}
  .apple-pay-button-with-text.apple-pay-button-white-with-line-with-text > .logo { background-image: -webkit-named-image(apple-pay-logo-black); background-color: white;}
  .apple-pay-button-with-text > .text {
    margin-right: calc(2px * var(--apple-pay-scale));
    font-family: -apple-system;
    font-size: calc(1em * var(--apple-pay-scale));
    font-weight: 300;
    align-self: center;
  }
  .apple-pay-button-with-text > .logo {
    width: calc(35px * var(--scale));
    height: 100%;
    margin-left: calc(2px * var(--apple-pay-scale));
    border: none;
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-position: 0 50%;
  }
}

/* ---------------------------------------
 注文完了画面
---------------------------------------- */
div.page_order_ div.top_comment_ { margin: 0 0 15px 0;}
div.page_order_ div.top_comment_ p { margin: 0; font-size: 14px; font-weight: 400;}
div.page_order_ dl.order_.order_id_ { padding: 20px 16px; margin: 20px 0 40px; border: #333 1px solid;}
div.page_order_ dl.order_.order_id_ dt { padding: 0 0 10px 0; margin: 0; border: none; font-size: 14px; font-weight: 500; text-align: center; background: none; display: block;}
div.page_order_ dl.order_.order_id_ dd { padding: 0; margin: 0; border: none; font-size: 20px; font-weight: 500; text-align: center; display: block;}

div.page_order_ div.rules_comment_ { margin: 0 0 20px 0; font-size: 12px; font-weight: 400;}
div.page_order_ div.button-area_ .large_button_.yellow_button_ { max-width: 260px; width: 260px; margin: 0 auto;}

div.page_order_ p.order_notice_ { padding: 0 0 0 1em; font-size: 14px; text-indent: -1em; line-height: 1.8; color: #EC0000;}
div.page_order_ p.order_notice_ strong { font-size: 14px; font-weight: 700; color: #EC0000;}
div.page_order_ div.button-area_ .large_button_.yellow_button_[onclick^="window.open()"] { width: 100%; max-width: 100%;}

div.page_order_ ul.formlist_.back_cartlist_ { margin: 20px 0 10px;}
div.page_order_ ul.formlist_.back_cartlist_ li { border: #DDD 1px solid; border-radius: 5px; background: #FFF;}
div.page_order_ ul.formlist_.back_cartlist_ li + li { margin-top: 10px;}
div.page_order_ ul.formlist_.back_cartlist_ li a { text-decoration: none; display: block; position: relative; color: #333;}
div.page_order_ ul.formlist_.back_cartlist_ li a .name1_ { font-size: 14px; font-weight: 400; text-decoration: underline; color: #333;}
div.page_order_ ul.formlist_.back_cartlist_ li .name1_ { margin: 0 0 10px 0;}
div.page_order_ ul.formlist_.back_cartlist_ li .box_ { width: 100%; padding: 10px; display: table;}
div.page_order_ ul.formlist_.back_cartlist_ li .img_ { width: 35%; vertical-align: top; display: table-cell;}
div.page_order_ ul.formlist_.back_cartlist_ li .img_ img { width: 100%;}
div.page_order_ ul.formlist_.back_cartlist_ li .desc_ { width: 65%; padding: 0 0 0 20px; vertical-align: top; display: table-cell;}
div.page_order_ ul.formlist_.back_cartlist_ li .price_box_ { font-size: 14px; font-weight: 500; text-align: right;}
div.page_order_ ul.formlist_.back_cartlist_ li .price_ { font-size: 14px; font-weight: 500; text-align: right;}
div.page_order_ ul.formlist_.back_cartlist_ li .price_ .tax_ { font-size: 10px; font-weight: normal; color: #333; display: block;}
div.page_order_ ul.formlist_.back_cartlist_ li .qty_ { margin: 10px 0 0 0; font-size: 12px; font-weight: 400;}
div.page_order_ ul.formlist_.back_cartlist_ li .qty_ span { margin-left: 5px; font-size: 12px; font-weight: 400;}

/* 始めてご利用の方 */
div.page_order_ .first_order_ p.message_ { margin: 10px 0; font-size: 14px; line-height: 1.6;}
div.page_order_ .first_order_ form .submit_.button-area_ input.button_.link_ { margin-bottom: 10px;}

/* ---------------------------------------
  ギフト注文完了画面
---------------------------------------- */
div.page_order_ .order_gift_content_ { margin: 0 0 40px 0;}
div.page_order_ .order_gift_content_ .order_gift_comment_ { padding: 30px 20px; margin: 0 0 20px 0; border: #BA1A1A 1px solid; border-radius: 4px; background: #FFF;}
div.page_order_ .order_gift_content_ .order_gift_comment_ h2 { margin: 0 0 20px 0; font-size: 16px; font-weight: 500; text-align: center; color: #EC0000;}
div.page_order_ .order_gift_content_ .order_gift_comment_ p { font-size: 14px; font-weight: 400; text-align: justify; line-height: 1.7;}
div.page_order_ .order_gift_content_bg_ .order_CautionText { padding: 20px; margin: 0 0 40px 0; font-size: 16px; font-weight: 700; text-align: center; background: #F2F2F2;}
div.page_order_ .order_gift_content_bg_ .order_CautionText dt { padding: 0; margin: 0 0 10px 0; font-size: 16px; font-weight: 500;}
div.page_order_ .order_gift_content_bg_ .order_CautionText dd { padding: 0; margin: 0; font-size: 20px; font-weight: 500; color: #FF0000;}
div.page_order_ .order_gift_content_bg_ p { margin: 0 0 20px 0; font-size: 14px; font-weight: 400; text-align: left;}
div.page_order_ .order_gift_content_bg_ .order_gift_btn_ { margin: 0 16px 40px;}
div.page_order_ .order_gift_content_bg_ .order_gift_btn_ a {
	width: 100%;
	height: 48px;
  padding: 5px 10px;
	margin: 0 0 20px 0;
  border-radius: 6px;
	border: #333 1px solid;
  text-decoration: none;
	font-size: 16px;
	font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  cursor: pointer;
}
div.page_order_ .order_gift_content_bg_ .order_gift_btn_ a span { padding: 0 10px 0 40px; text-align: left; display: inline-block;}
div.page_order_ .order_gift_content_bg_ .order_gift_btn_ a.send_line_ span { background: url(../../img/usr/common/line.png) no-repeat left center / 23px;}
div.page_order_ .order_gift_content_bg_ .order_gift_btn_ a.copy_url_ span  { background: url(../../img/usr/common/link2.png) no-repeat left center / 18px;}
div.page_order_ .order_gift_content_bg_ .order_gift_btn_ a.send_mail_ span { background: url(../../img/usr/common/mail.png) no-repeat left center / 21px;}
div.page_order_ .order_gift_content_bg_ .order_gift_url_ { margin: 20px 0; text-align: left;}
div.page_order_ .order_gift_content_bg_ .order_gift_url_ textarea { width: 100%; max-width: 100%; min-height: 175px; text-align: left; line-height: 1.7; word-wrap: break-word;}
div.page_order_ .order_gift_content_bg_ p.annot { padding: 0 0 0 1em; margin: 10px 0 0 0; text-indent: -1em; color: #EC0000;}

/* ギフトURLコピー（モーダル） */
.gift_url_copy_bg_ { width: 100%; height: 100%; display: none; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; z-index: 100;}
.gift_url_copy_bg_ .gift_url_copy_ {
  width: calc(100% - 32px);
  padding: 16px;
  border: #EC0000 2px solid;
  border-radius: 12px;
  text-align: center;
  color: #333;
  display: block;
  background: #FFF;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 111;
  transform: translate(-50%, -50%);
}
.gift_url_copy_bg_ .gift_url_copy_ p { padding: 16px 0; font-size: 20px; font-weight: 500; display: flex; align-items: center; justify-content: center;}
.gift_url_copy_bg_ .gift_url_copy_ p::before { 
	content: '';
	width: 24px;
	height: 24px;
	margin: 0 10px 0 0;
	display: block;
	background: url(../../img/usr/common/link.png) left center no-repeat;
	-webkit-background-size: auto 22px;
	background-size: auto 22px;
}
.gift_url_copy_bg_ .gift_url_copy_caution_ { padding: 16px; margin: 10px 0 0; border-radius: 12px; font-size: 14px; font-weight: 400; text-align: left; line-height: 1.8; color: #333; background: #FFF3F3;}
.gift_url_copy_bg_ .gift_url_copy_caution_::before { 
	content: '';
	width: 100%;
	height: 24px;
	margin: 0 auto 10px;
	display: block;
	background: url(../../img/usr/common/caution.png) center center no-repeat;
	-webkit-background-size: auto 24px;
	background-size: auto 24px;
}
.gift_url_copy_bg_ .close_btn_ { margin: 16px 0 4px 0; text-align: center; text-decoration: underline; color: #1D3994;}