@charset "Shift_JIS";

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

/* TOPへ戻るリンク */
.shopping_link_ { margin-top: 16px; border: none; text-align: center;}
.shopping_link_ a { font-size: 16px; color: #1D3994; text-decoration: underline;}
.shopping_link_ a.page_back_ { margin-left: 60px;}

/* ※「戻る」を押した場合、変更内容は保存されません。 */
p.back_attention { margin: 20px auto; font-size: 14px; text-align: center; color: #EC0000;}

/* ---------------------------------------
 オーダーフローSTEP
---------------------------------------- */
div.order_flow_ { margin: 0 auto 45px; text-align: center;}
div.order_flow_ img { width: auto; max-width: 100%; vertical-align: top;}
div.order_flow_ div.order_flow_step_figure_ { max-width: 564px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; position: relative;}
div.order_flow_ div.order_flow_step_figure_::before { content: ''; width: calc(50vw - 282px); height: 60px; display: block; background: #FFF; position: absolute; left: calc(-50vw + 282px); top: 0; z-index: 3;}
div.order_flow_ ul.order_flow_step_ { width: 100%; height: 60px; display: flex; justify-content: space-between; position: relative;}
div.order_flow_ ul.order_flow_step_::before { content: ''; width: 100%; border-top: #D1D1D1 2px solid; display: block; position: absolute; left: 0; top: 15px; z-index: 1;}
div.order_flow_ ul.order_flow_step_ li { width: 72px; height: 60px; position: relative;}
div.order_flow_ ul.order_flow_step_ li.done::before { content: ''; width: 564px; border-top: #CC0000 2px solid; display: block; position: absolute; right: 0; top: 15px; z-index: 1;}
div.order_flow_ ul.order_flow_step_ li::after { content: ''; width: 100%; height: 60px; display: block; background: #fff; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2;}
div.order_flow_ ul.order_flow_step_ li span {
	width: 72px;
	height: 60px;
	padding: 42px 0 0 0;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	line-height: 1.0;
	word-break: keep-all;
	white-space: nowrap;
	color: #CC0000;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFF;
	position: relative;
	z-index: 3;
}
div.order_flow_ ul.order_flow_step_ li span::before { 
	content: '';
	width: 33px;
	height: 33px;
	border-radius: 33px;
	display: block;
	background: #CC0000;
	position: absolute;
	top: 0;
	left: calc(50% - 16px);
	box-sizing: border-box;
}
div.order_flow_ ul.order_flow_step_ li span::after { 
	content: '';
  width: 10px;
  height: 14px;
  margin: auto;
  border-right: #FFF 3px solid;
  border-bottom: #FFF 3px solid;
  position: absolute;
  top: 7px;
	left: calc(50% - 5px);
  transform: rotate(45deg);
	box-sizing: border-box;
}
div.order_flow_ ul.order_flow_step_ li.done span::before { border: #CC0000 8px solid; background: #FFF;}
div.order_flow_ ul.order_flow_step_ li.done span::after { display: none;}
div.order_flow_ ul.order_flow_step_ li.done span { color: #CC0000;}
div.order_flow_ ul.order_flow_step_ li.done + li span::before,
div.order_flow_ ul.order_flow_step_ li.done + li + li span::before,
div.order_flow_ ul.order_flow_step_ li.done + li + li + li span::before,
div.order_flow_ ul.order_flow_step_ li.done + li + li + li + li span::before { border: #D1D1D1 4px solid; background: #FFF;}
div.order_flow_ ul.order_flow_step_ li.done + li span,
div.order_flow_ ul.order_flow_step_ li.done + li + li span,
div.order_flow_ ul.order_flow_step_ li.done + li + li + li span,
div.order_flow_ ul.order_flow_step_ li.done + li + li + li + li span { color: #D1D1D1;}

/* ---------------------------------------
 Apple Payボタン
---------------------------------------- */
@supports (-webkit-appearance: -apple-pay-button) {
	#apple-pay-button-disp2 { margin-left: 30px;}
	.apple-pay-button-with-text { display: inline-block; -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; width: 315px; height: 54px;}
	.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-disp2 { margin-left: 30px;}
	.apple-pay-button-with-text {
	  width: 315px;
	  min-width: 200px;
	  height: 54px;
	  min-height: 32px;
	  max-height: 64px;
	  padding: 0px;
	  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 { font-family: -apple-system; font-size: calc(1em * var(--apple-pay-scale)); font-weight: 300; align-self: center; margin-right: calc(2px * var(--apple-pay-scale));}
	.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_ .caution_txt_ { color: #D10000; font-size: 16px; line-height: 1.6;}
div.page_order_ .drugstore_pay_ { margin-bottom: 30px; display: flex; justify-content: center; align-items: center;}
div.page_order_ .drugstore_pay_ a {
  height: 56px;
  padding: 0 20px;
	margin: 0 5px;
  border: #D10000 1px solid;
  border-radius: 56px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
	vertical-align: middle;
  color: #FFF;
  display: flex;
	justify-content: center;
	align-items: center;
  background: #D10000;
}
div.page_order_ .order_end_top_comment_ { font-size: 14px;}
div.page_order_ .order_end_top_comment_ p { font-size: 16px; margin-bottom: 30px;}
div.page_order_ .order_end_top_comment_ p span.caution_txt_ { margin-top: 20px; padding: 0 0 0 1em; text-indent: -1em; display: block;}

div.page_order_ div.rules_comment_ { margin: 0 0 40px 0; font-size: 14px; font-weight: 400;}
div.page_order_ div.rules_comment_ .error_ { font-size: 16px; text-align: center;}

/* オーダーID */
div.page_order_ #order_id { width: 680px; padding: 40px; margin: 40px auto; border: #333 1px solid; text-align: center;}
div.page_order_ #order_id dt { font-size: 14px; font-weight: 400; margin-bottom: 10px;}
div.page_order_ #order_id dd { font-size: 24px; font-weight: 400;}

/* 初めてご利用の方 */
div.page_order_ #order_guest { width: 680px; padding: 60px; margin: 40px auto 80px; background: #F8F8FB;}
div.page_order_ #order_guest h2 { padding: 0; margin: 0 0 30px 0; border: none; font-size: 24px; font-weight: 400; text-align: center; line-height: 1.4; letter-spacing: 0.5px; background: none;}
div.page_order_ #order_guest p  { margin-bottom: 30px; font-size: 16px; line-height: 2.0;}
div.page_order_ #order_guest ul { display: flex; justify-content: center; align-items: center; gap: 20px;}
div.page_order_ #order_guest li a,
div.page_order_ #order_guest li input {
	min-width: 200px;
	height: 56px;
	padding: 0 56px;
	margin: 0;
	border: none;
	border-radius: 56px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: none;
}
div.page_order_ #order_guest li a.yellow_button_ { border: #CC0000 1px solid; color: #FFF; background: #CC0000;}
div.page_order_ #order_guest li input.yellow_button_ { border: #CC0000 1px solid; color: #FFF; background: #CC0000;}

/* 残りの商品の購入手続きへ */
div.page_order_ table.formlist_.cartlist_ { width: 680px; margin: 0 auto;}
div.page_order_ table.formlist_.cartlist_ td { border-left: none; border-right: none;}
div.page_order_ table.formlist_.cartlist_ .qty_ { font-size: 14px;}
div.page_order_ table.formlist_.cartlist_ .qty_ span { font-size: 14px;}
div.page_order_ table.formlist_.cartlist_ .money_ { text-align: right;}
div.page_order_ #disp_cart_list a.button_ { width: 280px; margin: 0 auto; display: flex; justify-content: center; align-items: center;}

/* ---------------------------------------
 ギフト注文完了画面
---------------------------------------- */
div.page_order_ .order_gift_content_ { max-width: 1000px; margin: 40px auto; text-align: center;}
div.page_order_ .order_gift_content_ .order_gift_comment_ { 
	width: 100%;
	padding: 40px;
	margin: 0 auto;
	border: #BA1A1A 1px solid;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	line-height: 1.7;
}
div.page_order_ .order_gift_content_ .order_gift_comment_ h2 { margin: 0 0 20px; font-size: 20px; font-weight: 400; text-align: center; color: #EC0000;}
div.page_order_ .order_gift_content_ .order_CautionText { width: 100%; padding: 40px; margin: 30px auto 60px; border-radius: 4px; text-align: center; line-height: 1.7; background: #F2F2F2;}
div.page_order_ .order_gift_content_ .order_CautionText dt { padding: 0; margin: 0 0 10px 0; font-size: 20px; font-weight: 400;}
div.page_order_ .order_gift_content_ .order_CautionText dd { padding: 0; font-size: 20px; font-weight: 400; letter-spacing: 0.1em; color: #EC0000;}
div.page_order_ .order_gift_content_ .order_gift_btn_ { margin: 0 0 60px; display: flex; justify-content: space-between; column-gap: 28px;}
div.page_order_ .order_gift_content_ .order_gift_btn_ a {
  width: calc((100% - 56px)/ 3);
	height: 48px;
	border: #333 1px solid;
  border-radius: 6px;
  text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  transition: .3s;
  cursor: pointer;
}
div.page_order_ .order_gift_content_ .order_gift_btn_ a:hover { text-decoration: none; opacity: 0.7;}
div.page_order_ .order_gift_content_ .order_gift_btn_ a.send_line_ span { padding: 0 0 0 40px; background: url(../../img/usr/common/line.png) no-repeat left center / 23px;}
div.page_order_ .order_gift_content_ .order_gift_btn_ a.copy_url_ span { padding: 1px 0 1px 35px; background: url(../../img/usr/common/link2.png) no-repeat left center;}
div.page_order_ .order_gift_content_ .order_gift_btn_ a.send_mail_ span { padding: 0 0 0 40px; background: url(../../img/usr/common/mail.png) no-repeat left center;}
div.page_order_ .order_gift_content_ .order_gift_url_ { margin: 20px 100px; text-align: left;}
div.page_order_ .order_gift_content_ .order_gift_url_ textarea { width: 100%; min-height: 100px; padding: 40px; text-align: left; line-height: 1.7;}
div.page_order_ .order_gift_content_ .annot { font-size: 14px; font-weight: 400; color: #EC0000;}

/* ギフトURLコピー（モーダル） */
.gift_url_copy_bg_ { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; position: fixed; top: 0; left: 0; z-index: 112;}
.gift_url_copy_bg_ .gift_url_copy_ {
  width: 642px;
  padding: 40px 56px;
  border: #EC0000 2px solid;
  border-radius: 12px;
  display: block;
  background: #FFF;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 113;
  transform: translate(-50%, -50%);
}
.gift_url_copy_bg_ .gift_url_copy_ p { 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 24px;
	background-size: auto 24px;
}
.gift_url_copy_bg_ .gift_url_copy_caution_ {
  padding: 20px 20px 20px 80px;
  margin: 30px 0 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 1.7;
  color: #333;
  display: flex;
  align-items: center;
	background: #FFF3F3 url(../../img/usr/common/caution.png) 20px center no-repeat;
	-webkit-background-size: auto 34px;
	background-size: auto 34px;
}
.gift_url_copy_bg_ .close_btn_ { margin-top: 30px; font-weight: 400; text-decoration: underline; color: #1D3994; cursor: pointer;}