/*------------------------------------
* PC,SP共通部分
*-------------------------------------*/
/* リセット */
body { margin: 0;}

#lp-form h1,
#lp-form h2,
#lp-form h3,
#lp-form h4,
#lp-form h5,
#lp-form h6,
#lp-form p,
#lp-form ul,
#lp-form ol,
#lp-form li,
#lp-form dl,
#lp-form dt,
#lp-form dd,
#lp-form blockquote {
  margin: 0;
}

#lp-form ul,
#lp-form ol {
  ist-style: none inside;
}

#lp-form img,
#lp-form a img {
  border: 0;
  vertical-align: middle;
}

#lp-form .clearfix {
  zoom: 1;
}

#lp-form .clearfix:after {
  clear: both;
  content: '';
  display: block;
}

#lp-form {
  font-size: 12px;
  line-height: 1.42857143;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333333;
}

#lp-form table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Form 項目と入力ボックス間の空白調節*/
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16, .col-17, .col-18, .col-19, .col-20, .col-21, .col-22, .col-23, .col-24 {
  float: left;
  position: relative;
  min-height: 1px;
}
.col-24 {width: 100%;}
.col-23 {width: 95.83333333%;}
.col-22 {width: 91.66666667%;}
.col-21 {width: 87.5%;}
.col-20 {width: 83.33333333%;}
.col-19 {width: 79.16666667%;}
.col-18 {width: 75%;}
.col-17 {width: 70.83333333%;}
.col-16 {width: 66.66666667%;}
.col-15 {width: 62.5%;}
.col-14 {width: 58.33333333%;}
.col-13 {width: 54.16666667%;}
.col-12 {width: 50%;}
.col-11 {width: 45.83333333%;}
.col-10 {width: 41.66666667%;}
.col-9 {width: 37.5%;}
.col-8 {width: 33.33333333%;}
.col-7 {width: 29.16666667%;}
.col-6 {width: 25%;}
.col-5 {width: 20.83333333%;}
.col-4 {width: 16.66666667%;}
.col-3 {width: 12.5%;}
.col-2 {width: 8.33333333%;}
.col-1 {width: 4.16666667%;}

/*------------------------------------
* PC部分
*-------------------------------------*/
/* 本フォーム全体  */
.form_container_ec {
  width: 940px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
}
.form_main_container_ec {
  font-size:12px;
  width: 100%;
  border-radius:3px
}
.landing_form_label_ec {
  padding: 15px;
}
/* フォームの項目名ラベル */
.form_box_label {
  background: #cadefc;
  border-bottom: 1px solid #C3C3C3;
  border-top: 1px solid #C3C3C3;
  padding: 2%;
  vertical-align: middle;
  text-align: left;
  color: #333;
  margin-bottom: 2%;
}
span.form_required_ec{
  padding: 2px 4px;
  margin-left: 5px;
  display: inline-block;
  float: right !important;
}
/* フォーム入力ボックス内の基本デザイン */
table.landing_form_ec {
  width: 852px;
  margin: 0 auto;
}
/* フォーム一項目　項目名ラベルと入力ボックス */
.landing_form_ec tr {
  line-height: 18px;
  font-size: 14px;
}
/* フォーム左側　項目名ラベル */
.landing_form_ec th {
  text-align: left;
  vertical-align: top;
  padding: 13px 11px;
}
/* フォーム右側　入力ボックス */
.landing_form_ec td {
  width: 584px;
  padding: 13px 5px;
}
/* フォームトップメッセージ */
.login_message_ec,
.purchase_message_ec {
  font-weight: normal;
  font-size: 14px;
  padding:20px 0px;
  margin-left: 4%;
  margin-right: 4%;
}
/* エラーメッセージ背景 */
.alert-danger_ec {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

.alert-success_ec {
  background-color: #DFF0D8;
  border-color: #d6e9c6;
  color: #468847;
}

.form_main_container_sp_ec .formError {
  width: 200px;
}

.form_main_container_ec .formError {
  width: 470px;
}

.formError .formErrorContent {
  width: 60%;
  font-size: 100%;
}

.alert_ec {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
p.caution_ec {
  padding-top:10px;
  font-size: 14px;
}
.optin_view_ec,
.agreement_view_ec,
.order_checklist_view_ec {
  margin-left: 4%;
  padding-top: 20px;
  position: relative;
}

.submit_ec {
  padding-top: 2%;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  margin-left: auto;
  margin-right: auto;
}

#option_types {
  margin-top: 10px;
}

#option_types:empty {
  display: none;
}

.option_type{
  margin: 5px 0;
}

.option_type label {
  display: inline-block;
  width: 80px;
}

.form_group_ec {
  padding-left: 2%;
  padding-right: 2%;
  position: relative;
}
.form_main_container_ec div.form_group_ec input{
  padding: 10px 10px;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form_main_container_ec div.form_group_ec input[type=checkbox]{
  margin-left: 3px;
  margin-right: 3px;
}
.form_main_container_ec div.form_group_ec select{
  padding: 10px 10px;
  height: 40px;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form_main_container_ec div.form_group_ec .disabled-input-ec {
  pointer-events: none;
  background-color: #ccc !important;
  opacity: 0.7;
}
input.input_box_ec { width:70%; }
select.input_box_product_ec { min-width:50%; }
p.input_product_ec { display:inline-block; }
input.input_box_name_ec { width:70%; }
input.input_box_name1_ec { width:70%; }
input.input_box_name2_ec { width:70%; }
input.input_box_kana_ec { width:70%; }
input.input_box_kana1_ec { width:70%; }
input.input_box_kana2_ec { width:70%; }
select.input_box_sex_ec { width: 25%; }
select.input_box_job_ec { width: 70%; }
select.input_box_birth_year_ec { width: 25%; }
select.input_box_birth_month_ec { width: 15%; }
select.input_box_birth_day_ec { width: 15%; }
input.input_box_zip1_ec { width: 50px; }
input.input_box_zip2_ec { width: 60px; }
select.input_box_pref_ec { width: 150px; }
input.input_box_addr1_ec { width: 70%; }
input.input_box_addr2_ec { width: 70%; }
input.input_box_addr3_ec { width: 70%; }
input.input_box_tel_ec { width: 70%; }
input.input_box_tel1_ec { width: 45px; }
input.input_box_tel2_ec { width: 45px; }
input.input_box_tel3_ec { width: 45px; }
input.input_box_fax_ec { width: 70%; }
input.input_box_fax1_ec { width: 45px; }
input.input_box_fax2_ec { width: 45px; }
input.input_box_fax3_ec { width: 45px; }
input.input_box_email_ec { width: 70%; }
input.input_box_email_confirm_ec { width: 70%; }
input.input_box_customer_number_ec { width: 70%; }
select.input_box_card_method_ec { width: 50%; }
select.input_box_card_times_ec { width: 15%; }
input.input_box_card_number_ec { width: 70%; }
select.input_box_card_month_ec { width: 15%; }
select.input_box_card_year_ec { width: 15%; }
input.input_box_card_name_ec { width: 70%; }
input.input_box_password_ec { width: 70%; }
input.input_box_password_confirm_ec { width: 70%; }

p.form_box_label_ec strong { font-weight: bold; }
p.form_box_label_ec label { font-weight: bold; }
div.form_group_ec p {}
div.form_group_ec span { font-weight: bold; }
div.scheduled_delivery_date_text_ec {
  font-size: 14px;
  line-height: 20px;
}

div.pre_ordered_delivery_description_text_ec {
  font-size: 14px;
  line-height: 20px;
}

.preview_container_ec > table th,
.preview_container_ec > table td {
  border: 1px solid #d0dcec;
}

.table_bordered_ec {
  border: 0px !important;
}

.table_ec {
  width: 100%;
  max-width: 100%;
}

.table_ec tr > .pull_right_ec {
  text-align: right;
}

.table_ec tr > th.product_name_ec {
  width: 60%;
}

.table_ec tr > th.product_price_ec {
  width: 15%;
}

.table_ec tr > th.product_quantity_ec {
  width: 10%;
}

.table_ec tr > th.product_pickup_available_date_ec {
  width: 15%;
}

.table_ec tr > th.product_sub_total_ec {
  width: 15%;
}

.total_color_ec {
  color: #ff0000;
  font-weight: bold;
}

.without_border_ec {
  border: none !important;
}

/* Paypal */
#paypal-button-container {
  width: 50%;
}

/* Amazon Pay */
.amazon_pay_box_ec {
  border: solid 1px #C3C3C3;
  margin: 10px;
  padding: 20px 0;
  text-align: center;
}

.amazon_pay_title_ec {
  margin: 0 auto 10px auto !important;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 25px;
  color: #df1800;
  font-weight: bold;
}

.amazon_pay_subtitle_ec {
  margin: 0 auto 10px auto !important;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  color: #e6a300;
}

.amazon_pay_message_ec {
  margin: 0 auto;
  font-weight: bold;
  text-align: center;
}

.amazon_pay_not_use_message_ec {
  height: 32px;
  margin: 0 auto !important;
  padding: 0;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 15px;
  color: #e6a300;
}

.amazon_pay_button_all_ec {
  margin: 20px auto 20px;
  width: 300px;
}

.amazon_pay_button_wallet_ec {
  padding-top: 15px;
  margin-left: -25px;
}

.amazon_pay_button_wallet_ec input.billing_agreement_ec {
  visibility: hidden;
  font-size: 0px !important;
}

.address_book_widget_wrapper_ec {
  height: 228px;
}

.wallet_widget_wrapper_ec {
  height: 228px;
  width:417px;
  float:left;
  margin-right:6px;
}

.consent_widget_wrapper_ec {
  height:193px;
  width:417px;
  float:left;
  margin-top: 5px;
}

.consent_wrapper_ec {
  height: 30px;
  width: 405px;
  color: white;
  background: red;
  vertical-align: middle;
  display: table-cell;
  padding: 0 10px;
  border-radius: 5px;
  position: relative;
}

.consent_wrapper_ec > span.consent_message_ec {
  padding: 0 0 0 10px;
}

.consent_wrapper_ec > span.consent_mandatory_ec {
  float: right;
  background: white;
  color: red;
  padding: 0 4px;
}

.consent_wrapper_ec > input.consent_checkbox_ec {
  visibility: hidden;
}

/* AmazonPay popup >> */
.amazon_pay_popup_box_ec {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
}

.amazon_pay_popup_content_ec {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 30%;
  max-height: 250px;
  padding: 20px;
  background: #ffffff;
}

.amazon_pay_popup_title_ec {
  font-size: 20px;
}

.amazon_pay_popup_close_ec {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  border-style: none;
  cursor: pointer;
}

.amazon_pay_popup_subtitle_ec {
  margin: 40px 0 30px;
  font-size: 18px;
}

.amazon_pay_popup_body_ec {
  margin: 20px auto 20px;
  width: 300px;
}
/* << AmazonPay popup */

.login_message_box_ec {
  width: 852px;
  margin: 20px auto 0px auto;
  border: solid 1px #C3C3C3;
}

p.login_message_wrapper_ec {
  font-size: 14px;
  margin: 20px 0 !important;
  text-align: center;
}

/* Socialplus */
.socialplus_ec {
  margin: 0 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  justify-content: center;
}

.socialplus_ec .button-container {
  width: calc(33.3% - 10px);
  margin: 5px;
}

.socialplus_ec .button-container .button {
  position: relative;
  display: block;
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  line-height: 40px;
  padding-left: 40px;
  height: 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  text-decoration: none;
}

.socialplus_ec .button-container .button:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-size: 100%;
}

.socialplus_ec .button-container .button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: inline-block;
  width: 40px;
  height: 100%;
  border-right-style: solid;
  border-right-width: 1px;
}

.socialplus_ec .button-container .btn-facebook {
  background-color: #4267b2;
}

.socialplus_ec .button-container .btn-facebook:before {
  background-image: url("/assets/login-facebook-3e1626e3d5c7df61a277513295e7acb6cf9112c4df07db1b867c7641a7005492.png");
}

.socialplus_ec .button-container .btn-facebook:after {
  border-color: #8298cc;
}

.socialplus_ec .button-container .btn-twitter {
  background-color: #438dc4;
}

.socialplus_ec .button-container .btn-twitter:before {
  background-image: url("/assets/login-twitter-944a487f4746a5ce6557d56ae65421e8b71eaa7fda7a0f74a1bed6b86d345567.png");
}

.socialplus_ec .button-container .btn-twitter:after {
  border-color: #88BEEF;
}

.socialplus_ec .button-container .btn-google {
  background-color: #0056c7;
}

.socialplus_ec .button-container .btn-google:before {
  background-image: url("/assets/login-google-0119f2ac53e7fc66fe39b1e40fc4757c35ceab4bf28021ce0a81d45eee5d2360.png");
}

.socialplus_ec .button-container .btn-google:after {
  border-color: #4285f4;
}

.socialplus_ec .button-container .btn-gplus {
  background-color: #d04d40;
}

.socialplus_ec .button-container .btn-gplus:before {
  background-image: url("/assets/login-gplus-f2319e7179a28ad715384eb95ff7490c6ff1efa46a13c944022702b87ab4be07.png");
}

.socialplus_ec .button-container .btn-gplus:after {
  border-color: #cf837a;
}

.socialplus_ec .button-container .btn-mixi {
  background-color: #cba958;
}

.socialplus_ec .button-container .btn-mixi:before {
  background-image: url("/assets/login-mixi-99e3d6436ac6491642b1ed205a8f6ea2fbc7a349aea04474f1ae3477c27373f5.png");
}

.socialplus_ec .button-container .btn-mixi:after {
  border-color: #e6bc5c;
}

.socialplus_ec .button-container .btn-yahoo {
  background-color: #fe0032;
  border: 0.5px solid #f00;
}

.socialplus_ec .button-container .btn-yahoo:before {
  background-image: url("/assets/login-yahoo-ecc9e51a9724b036b6fd228bdef4855731ad44ae44b75fe1f4af7eb0f59684de.png");
}

.socialplus_ec .button-container .btn-yahoo:after {
  border-color: #fe0032;
}

.socialplus_ec .button-container .btn-rakuten {
  background-color: #b21d23;
}

.socialplus_ec .button-container .btn-rakuten:before {
  background-image: url("/assets/login-rakuten-8e21ab472f9e803e6d89857d15dd46768e21dc685f03156cfd96205df6773a66.png");
}

.socialplus_ec .button-container .btn-rakuten:after {
  border-color: #ae6164;
}

.socialplus_ec .button-container .btn-line {
  background-color: #31ae36;
}

.socialplus_ec .button-container .btn-line:before {
  background-image: url("/assets/login-line-ed8c51d83aae2ebc670a6fdc20afa7dc93ab3205464e89d999349f49f53659c0.png");
}

.socialplus_ec .button-container .btn-line:after {
  border-color: #70C053;
}

/* ecforce-payment */
.ecforce-payment-card-number,
.ecforce-payment-card-expiry,
.ecforce-payment-card-cvv {
  cursor: text !important;
  font-size: 12px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #cccccc !important;
  border-radius: 3px !important;
  width: 70% !important;
}
.ecforce-payment-card-number #card-number,
.ecforce-payment-card-expiry #card-expiry,
.ecforce-payment-card-cvv #card-cvv {
  padding: 10px 10px !important;
}

/* payjp */
.payjp-card-number,
.payjp-card-expiry,
.payjp-card-cvv {
  cursor: text !important;
  font-size: 12px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #cccccc !important;
  border-radius: 3px !important;
  width: 70% !important;
}
.payjp-card-number #card-number,
.payjp-card-expiry #card-expiry,
.payjp-card-cvv #card-cvv {
  padding: 10px 10px !important;
}

/* fincode */
.fincode-card-number,
.fincode-card-expiry,
.fincode-card-cvv {
  cursor: text !important;
  font-size: 12px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #cccccc !important;
  border-radius: 3px !important;
  width: 70% !important;
}
.fincode-card-number #card-number,
.fincode-card-expiry #card-expiry,
.fincode-card-cvv #card-cvv {
  padding: 10px 10px !important;
}

.toggle_text {
  display: none;
}

/* カスタム項目 */
.free_columns-section_ec input {
  width: 70%;
}
.free_columns-section_ec input[type=checkbox], .free_columns-section_ec input[type=radio] {
  width: auto;
  top: -2px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.free_columns-section_ec .checkbox-wrapper, .free_columns-section_ec .radio-wrapper {
  margin-top:5px
}
.free_columns-section_ec .checkbox-wrapper>label, .free_columns-section_ec .radio-wrapper>label {
  display: inline-block;
  margin-left: 2px;
  width: 93%;
}
.free_columns-section_ec .form_group_ec label {
  font-weight: normal;
}
.free_columns-section_ec textarea {
  width: 100%;
}
.free_columns-section_ec select {
  width: 70%;
}
.free_columns-section_ec select[multiple]{
  height: 100% !important;
}
.free_columns-section_ec .category-caption-wrapper {
  margin: 1.5em 0 0.8em 3em;
  padding: 1em 0em 1em 1em;
  font-size: 14px;
  font-weight: bold;
  border-left: 5px solid #203594;
  width: 852px;
}
.free_columns-section_ec .category-caption-text {
  display: inline-block;
  width: 90%;
}
.free_columns-section_ec tr.free_column_category-footer td{
  border-left: none;
  border-right: none;
}
.free_columns-section_ec .category-btn-wrapper {
  cursor:pointer ;
  font-size: 14px;
  display:inline-block;
  font-weight: bold;
  color: #010FEE;
  letter-spacing: 0.2em;
}
.free_columns-section_ec .category-btn-wrapper .category-btn:before {
  display:inline-block;
  margin-right: 0.4rem;
  width: 1.9rem;
  height: 1.9rem;
  background-color: #010FEE;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}
.free_columns-section_ec .category-btn-wrapper.category-minus .category-btn:before {
  content:'ー';
  letter-spacing: 0;
  line-height: 1.95rem;
}
.free_columns-section_ec .category-btn-wrapper.category-plus {
  margin: 0.7em 0 0.8em 2em;
  padding: 1em;
}
.free_columns-section_ec .category-btn-wrapper.category-plus .category-btn:before {
  content:'＋';
  letter-spacing: 0;
  line-height: 1.95rem;
  font-weight: bold;
}

/* 受注自由項目 */
.order_free_columns-section_ec input {
  width: 70%;
}
.order_free_columns-section_ec .form_group_ec label {
  font-weight: normal;
}

/* セット商品 */
.table_ec td.set_item_selected{
  padding-left: 28px;
}

/*------------------------------------
* スマートフォン部分
*-------------------------------------*/
.form_container_sp_ec {
  padding: 0;
  background-size: 100%;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}
.landing_form_label_sp_ec {
  padding: 15px;
}
/* フォーム入力ボックスの基本 */
.form_main_container_sp_ec div.form_group_sp_ec input{
  padding: 8px 4px;
  line-height: 2.4;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
}
.form_main_container_sp_ec div.form_group_sp_ec input[type=checkbox]{
  margin-left: 3px;
  margin-right: 3px;
}
.form_main_container_sp_ec div.form_group_sp_ec select{
  height: 50px;
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
}
.form_group_sp_ec {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
  padding-top: 15px;
  position: relative;
}
.form_main_container_sp_ec div.form_group_sp_ec .disabled-input-ec {
  pointer-events: none;
  color: #555;
  background-color: #ccc !important;
  border: 1px solid #cccccc;
  opacity: 0.7;
}
/* フォームトップメッセージ */
.login_message_sp_ec,
.purchase_message_sp_ec {
  font-weight: normal;
  font-size: 14px;
  padding:20px 0px;
  margin-left: 4%;
  margin-right: 4%;
}
/* エラーメッセージ背景 */
.alert-danger_sp_ec {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

.alert-success_sp_ec {
  background-color: #DFF0D8;
  border-color: #d6e9c6;
  color: #468847;
}

.alert_sp_ec {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.form_main_container_sp_ec {
  width: 100%;
  border-radius:3px
}
span.form_required_sp_ec{
  padding: 2px 4px;
  margin-left: 5px;
  display: inline-block;
}
/* フォームの項目名ラベル */
.form_box_label_sp_ec {
  padding: 2%;
  vertical-align: middle;
  text-align: left;
  margin-bottom: 2%;
}
select.input_box_sp_ec {
  padding: 10px;
  font-size: 14px;
  width: 100%;
  height: 50px;
}
input.input_box_sp_ec { width:98%; }
select.input_box_product_sp_ec { width:98%; }
select.input_box_quantity_sp_ec { width:98%; }
input.input_box_name_sp_ec { width:98%; }
input.input_box_name1_sp_ec { width:45%; }
input.input_box_name2_sp_ec { width:45%; }
input.input_box_kana_sp_ec { width:98%; }
input.input_box_kana1_sp_ec { width:45%; }
input.input_box_kana2_sp_ec { width:45%; }
select.input_box_sex_sp_ec { width:98%; }
select.input_box_job_sp_ec { width:98%; }
select.input_box_birth_year_sp_ec { width: 40%; }
select.input_box_birth_month_sp_ec { width: 25%; }
select.input_box_birth_day_sp_ec { width: 25%; }
input.input_box_zip1_sp_ec { width: 80px; }
input.input_box_zip2_sp_ec { width: 100px; }
select.input_box_pref_sp_ec { width:98%; }
input.input_box_addr1_sp_ec { width:98%; }
input.input_box_addr2_sp_ec { width:98%; }
input.input_box_addr3_sp_ec { width:98%; }
input.input_box_tel_sp_ec { width: 98%; }
input.input_box_tel1_sp_ec { width: 24%; }
input.input_box_tel2_sp_ec { width: 24%; }
input.input_box_tel3_sp_ec { width: 24%; }
input.input_box_fax_sp_ec { width: 98%; }
input.input_box_fax1_sp_ec { width: 24%; }
input.input_box_fax2_sp_ec { width: 24%; }
input.input_box_fax3_sp_ec { width: 24%; }
input.input_box_company_sp_ec { width: 98%; }
input.input_box_email_sp_ec { width:98%; }
input.input_box_email_confirm_sp_ec { width:98%; }
input.input_box_customer_number_sp_ec { width:98%; }
select.input_box_shipping_address_sp_ec { width:98%; }
select.input_box_wrapping_sp_ec { width:98%; }
select.input_box_card_method_sp_ec { width:98%; }
select.input_box_card_times_sp_ec { width:98%; }
input.input_box_card_number_sp_ec { width:98%; }
select.input_box_card_month_sp_ec { width: 25%; }
select.input_box_card_year_sp_ec { width: 25%; }
input.input_box_card_name_sp_ec { width:98%; }
select.input_box_container_payment_schedule_sp_ec { width:98%; }
input.input_box_password_sp_ec { width:98%; }
input.input_box_password_confirm_sp_ec { width:98%; }

p.form_box_label_sp_ec strong { font-weight: bold; }
p.form_box_label_sp_ec label { font-weight: bold; }
div.form_group_sp_ec p {}
div.form_group_sp_ec span { font-weight: bold; }
p.caution_sp_ec {
  padding-top:10px;
  font-size: 14px;
}
p.product_name_sp_ec {
  padding: 0 15px 0 15px;
  font-size: 16px;
}
div.scheduled_delivery_date_text_sp_ec {
  font-size: 14px;
  line-height: 20px;
  padding-left:15px;
  padding-right:15px;
}
.optin_view_sp_ec,
.agreement_view_sp_ec,
.order_checklist_view_sp_ec {
  margin-left: 4%;
  padding-top: 15px;
  position: relative;
}
.submit_sp_ec {
  padding-top: 2%;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%
  margin-left: auto;
  margin-right: auto;
}

.pre_ordered_delivery_description_text_sp_ec {
  font-size: 14px;
  line-height: 20px;
  padding-left:15px;
  padding-right:15px;
}

/* カスタム項目 */
.free_columns-section_sp_ec input {
  width: 98%;
}
.free_columns-section_sp_ec input[type=checkbox], .free_columns-section_sp_ec input[type=radio] {
  width: auto;
  top: -1px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.free_columns-section_sp_ec .checkbox-wrapper, .free_columns-section_sp_ec .radio-wrapper {
  margin-top:5px
}
.free_columns-section_sp_ec .checkbox-wrapper>label, .free_columns-section_sp_ec .radio-wrapper>label {
  display: inline-block;
  margin-left: 6px;
  width: 90%;
}
.free_columns-section_sp_ec .form_group_ec label {
  font-weight: normal;
}
.free_columns-section_sp_ec textarea {
  width: 100%;
}
.free_columns-section_sp_ec select {
  width: 98%;
}
.free_columns-section_sp_ec select[multiple]{
  height: 100% !important;
}
.free_columns-section_sp_ec .category-caption-wrapper {
  margin: 1em 0;
  padding: 1em 0em 1em 1em;
  font-size: 13px;
  font-weight: bold;
  border-left: 5px solid #203594;
}
.free_columns-section_sp_ec .category-caption-text {
  display: inline-block;
  width: 78%;
}
.free_columns-section_sp_ec tr.free_column_category-footer td{
  border-left: none;
  border-right: none;
}
.free_columns-section_sp_ec .category-btn-wrapper {
  cursor:pointer ;
  font-size: 14px;
  display:inline-block;
  font-weight: bold;
  color: #010FEE;
  letter-spacing: 0.2em;
}
.free_columns-section_sp_ec .category-btn-wrapper .category-btn:before {
  display:inline-block;
  margin-right: 0.4rem;
  width: 1.3rem;
  height: 1.3rem;
  background-color: #010FEE;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}
.free_columns-section_sp_ec .category-btn-wrapper.category-minus .category-btn:before {
  content:'ー';
  letter-spacing: 0;
  line-height: 1.35rem;
}
.free_columns-section_sp_ec .category-btn-wrapper.category-plus {
  padding: 1em;
}
.free_columns-section_sp_ec .category-btn-wrapper.category-plus .category-btn:before {
  content:'＋';
  letter-spacing: 0;
  line-height: 1.35rem;
  font-weight: bold;
}

/* 受注自由項目 */
.order_free_columns-section_sp_ec input {
  width: 98%;
}
.order_free_columns-section_sp_ec .form_group_sp_ec label {
  font-weight: normal;
}

/* セット商品 */
.table_sp_ec td.set_item_selected{
  padding-left: 28px;
}

/*------------------------------------
* PCデザイン可変部分
*-------------------------------------*/
/* 【PC】フォームの項目名ラベル内必須アイコン */
span.form_required_ec{
  /* セクションラベルの色 */
  background: #7E0F09;
  /* セクションラベルのフォント色*/
  color: #ffffff;
}
/* 【PC】フォームのセクションラベル */
.landing_form_label_ec {
  /* セクションラベルの色 */
  background: #203594;
  /* セクションラベルのフォント色*/
  color: #ffffff;
  /* セクションラベルのフォントサイズ */
  font-size: 18px;
}
/* 【PC】フォーム入力ボックス内の基本デザイン */
table.landing_form_ec {
  border-top: 1px solid #d0dcec;
  border-right: 1px solid #d0dcec;
  background: #FFF;
  border-bottom: 1px solid #999;
}
/* 【PC】フォーム左側　項目名ラベル */
.landing_form_ec th {
  background-color: #e1edfd;
  border-bottom: 1px solid #d0dcec;
  border-left: 1px solid #d0dcec;
  background-color: #e1edfd;
}
/* 【PC】フォーム右側　入力ボックス */
.landing_form_ec td {
  border-bottom: 1px solid #d0dcec;
  border-left: 1px solid #d0dcec;
  background-color: #ffffff;
}
/* 【PC】購入ボタンのデザイン */
.login_button_ec {
  border: 0px;
  width: 400px;
  height: 150px;
  background: url("/assets/default_login_btn-3545ead6f7c1f581390be8bada934a229cd580f4f4830b21c14803de789ad249.png") center;
  background-size: 394px auto;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* 【PC】購入ボタンのデザイン */
.submit_bottom_ec {
  border: 0px;
  width: 400px;
  height: 150px;
  background: url("/assets/default_btn-f6c2a9bc1ad7a90718756cd965847d700d3750ab3c837bf74bcf30dd3d083ea0.png") center;
  background-size: 394px auto;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* 【PC】購入ボタンのデザイン */
.submit_button_complete_ec {
  border: 0px;
  width: 400px;
  height: 150px;
  background: url("/assets/default_order_comp-6baf1ae5951cb6ca295e07a256d9d8ce2e646d315125a11207f4d833c9cca5d3.png") center;
  background-size: 394px auto;
  background-repeat: no-repeat;
  cursor: pointer;
}
/*------------------------------------
* スマートフォンデザイン可変部分
*-------------------------------------*/
/* 【SP】フォームの項目名ラベル内必須アイコン */
span.form_required_sp_ec{
  /* セクションラベルの色 */
  background: #7E0F09;
  /* セクションラベルのフォント色*/
  color: #ffffff;
}

/* 【SP】フォームのセクションラベル */
.landing_form_label_sp_ec {
  /* セクションラベルの色 */
  background: #203594;
  /* セクションラベルのフォント色*/
  color: #ffffff;
  /* セクションラベルのフォントサイズ */
  font-size: 18px;
}

/* 【SP】フォームの項目名ラベル */
.form_box_label_sp_ec {
  background: #cadefc;
  border-bottom: 1px solid #C3C3C3;
  border-top: 1px solid #C3C3C3;
}

/* 【SP】ログインボタンのデザイン */
.login_button_sp_ec {
  border: 0px;
  width: 100%;
  height: 150px;
  background: url("/assets/default_login_btn-3545ead6f7c1f581390be8bada934a229cd580f4f4830b21c14803de789ad249.png") center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* 【SP】購入ボタンのデザイン */
.submit_bottom_sp_ec {
  border: 0px;
  width: 100%;
  height: 150px;
  background: url("/assets/default_btn-f6c2a9bc1ad7a90718756cd965847d700d3750ab3c837bf74bcf30dd3d083ea0.png") center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  cursor: pointer;
}

.submit_button_complete_sp_ec {
  border: 0px;
  width: 100%;
  height: 150px;
  background: url("/assets/default_order_comp-6baf1ae5951cb6ca295e07a256d9d8ce2e646d315125a11207f4d833c9cca5d3.png") center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  cursor: pointer;
}

.preview_container_sp_ec > table {
  width: 100%;
}

.preview_container_sp_ec > table th {
  background: #cadefc;
}

.preview_container_sp_ec > table,
.preview_container_sp_ec > table tr,
.preview_container_sp_ec > table th,
.preview_container_sp_ec > table td {
  border: 1px solid #C3C3C3;
}

.table_bordered_sp_ec {
  border: 0px !important;
}

.table_sp_ec {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

.table_sp_ec > thead > tr > th,
.table_sp_ec > tbody > tr > th,
.table_sp_ec > tfoot > tr > th,
.table_sp_ec > thead > tr > td,
.table_sp_ec > tbody > tr > td,
.table_sp_ec > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

.table_bordered_sp_ec > thead > tr > th,
.table_bordered_sp_ec > tbody > tr > th,
.table_bordered_sp_ec > tfoot > tr > th,
.table_bordered_sp_ec > thead > tr > td,
.table_bordered_sp_ec > tbody > tr > td,
.table_bordered_sp_ec > tfoot > tr > td {
  border: 1px solid #ddd;
}

.table_sp_ec tr > th {
  border-top: 0px;
  background: #F0F0F0;
  font-size: 10px;
}

.table_sp_ec tr > th,
.table_sp_ec tr > td {
  font-size: 12px;
}

.table_bordered_sp_ec tr > th,
.table_bordered_sp_ec tr > td {
  border: 1px solid #e5e5e5 !important;
}

.table_sp_ec th,
.table_sp_ec td {
  vertical-align: middle !important;
  line-height: 20px !important;
  border-top: 1px solid #e5e5e5 !important;
}

.total_color_sp_ec {
  color: #ff0000;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

/* Amazon Pay */
.amazon_pay_box_sp_ec {
  border: solid 3px #C3C3C3;
  margin: 10px auto;
  padding: 20px 0;
  text-align: center;
}

.amazon_pay_title_sp_ec {
  margin: 0 auto 10px auto !important;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 18px;
  color: #df1800;
  font-weight: bold;
}

.amazon_pay_subtitle_sp_ec {
  margin: 0 auto 10px auto !important;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 15px;
  color: #e6a300;
}

.amazon_pay_message_sp_ec {
  margin: 0 10px;
  font-weight: bold;
  text-align: center;
}

.amazon_pay_not_use_message_sp_ec {
  margin: 0 10px !important;
  padding: 0 0 10px 0;
  text-align: center;
  font-size: 12px;
  color: #e6a300;
}

.amazon_pay_button_all_sp_ec {
  margin: 20px auto 20px;
  width: 300px;
}

.amazon_pay_button_wallet_sp_ec {
  padding-top: 15px;
  margin-left: -15px;
}

.amazon_pay_button_wallet_sp_ec input.billing_agreement_sp_ec {
  visibility: hidden;
  font-size: 0px !important;
}

.address_book_widget_wrapper_sp_ec,
.wallet_widget_wrapper_sp_ec,
.consent_widget_wrapper_sp_ec {
}

.address_book_widget_wrapper_sp_ec,
.wallet_widget_wrapper_sp_ec,
.consent_widget_wrapper_sp_ec {
}

.consent_wrapper_sp_ec {
  height: 30px;
  color: white;
  background: red;
  padding-top: 5px;
  margin: 10px 0;
}

.consent_wrapper_sp_ec > span.consent_message_sp_ec {
  padding: 0 0 0 10px;
}

.consent_wrapper_sp_ec > span.consent_mandatory_sp_ec {
  float: right;
  background: white;
  color: red;
  padding: 2px 8px;
  margin: 2px 10px;
}

.consent_wrapper_sp_ec > input.consent_checkbox_sp_ec {
  visibility: hidden;
}

/* AmazonPay popup >> */
.amazon_pay_popup_box_sp_ec {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
}

.amazon_pay_popup_content_sp_ec {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-height: 250px;
  padding: 20px;
  background: #ffffff;
}

.amazon_pay_popup_title_sp_ec {
  font-size: 20px;
}

.amazon_pay_popup_close_sp_ec {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  border-style: none;
  cursor: pointer;
}

.amazon_pay_popup_subtitle_sp_ec {
  margin: 40px 0 30px;
  font-size: 15px;
}

.amazon_pay_popup_body_sp_ec {
  margin: 20px auto 20px;
  width: 300px;
}
/* << AmazonPay popup */

.login_message_box_sp_ec {
  width: 100%;
  margin: 0 auto;
  border: solid 1px #d0dcec;
}

p.login_message_wrapper_sp_ec {
  font-size: 14px;
  margin: 20px 0 !important;
  text-align: center;
}

/* Socialplus */
.socialplus_sp_ec {
  margin: 0 0 20px 0;
  overflow: hidden;
}

.socialplus_sp_ec .button-container {
  width: 100%;
  float: left;
  padding: 10px 10px 0;
  box-sizing: border-box;
}

.socialplus_sp_ec .button-container .button {
  position: relative;
  display: block;
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  line-height: 50px;
  padding-left: 20px;
  height: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  text-decoration: none;
}

.socialplus_sp_ec .button-container .button:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-size: 100%;
}

.socialplus_sp_ec .button-container .button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: inline-block;
  width: 50px;
  height: 100%;
  border-right-style: solid;
  border-right-width: 1px;
}

.socialplus_sp_ec .button-container .btn-facebook {
  background-color: #4267b2;
}

.socialplus_sp_ec .button-container .btn-facebook:before {
  background-image: url("/assets/login-facebook-3e1626e3d5c7df61a277513295e7acb6cf9112c4df07db1b867c7641a7005492.png");
}

.socialplus_sp_ec .button-container .btn-facebook:after {
  border-color: #8298cc;
}

.socialplus_sp_ec .button-container .btn-twitter {
  background-color: #438dc4;
}

.socialplus_sp_ec .button-container .btn-twitter:before {
  background-image: url("/assets/login-twitter-944a487f4746a5ce6557d56ae65421e8b71eaa7fda7a0f74a1bed6b86d345567.png");
}

.socialplus_sp_ec .button-container .btn-twitter:after {
  border-color: #88BEEF;
}

.socialplus_sp_ec .button-container .btn-google {
  background-color: #0056c7;
}

.socialplus_sp_ec .button-container .btn-google:before {
  background-image: url("/assets/login-google-0119f2ac53e7fc66fe39b1e40fc4757c35ceab4bf28021ce0a81d45eee5d2360.png");
}

.socialplus_sp_ec .button-container .btn-google:after {
  border-color: #4285f4;
}

.socialplus_sp_ec .button-container .btn-gplus {
  background-color: #d04d40;
}

.socialplus_sp_ec .button-container .btn-gplus:before {
  background-image: url("/assets/login-gplus-f2319e7179a28ad715384eb95ff7490c6ff1efa46a13c944022702b87ab4be07.png");
}

.socialplus_sp_ec .button-container .btn-gplus:after {
  border-color: #cf837a;
}

.socialplus_sp_ec .button-container .btn-mixi {
  background-color: #cba958;
}

.socialplus_sp_ec .button-container .btn-mixi:before {
  background-image: url("/assets/login-mixi-99e3d6436ac6491642b1ed205a8f6ea2fbc7a349aea04474f1ae3477c27373f5.png");
}

.socialplus_sp_ec .button-container .btn-mixi:after {
  border-color: #e6bc5c;
}

.socialplus_sp_ec .button-container .btn-yahoo {
  background-color: #fe0032;
  border: 0.5px solid #f00;
}

.socialplus_sp_ec .button-container .btn-yahoo:before {
  background-image: url("/assets/login-yahoo-ecc9e51a9724b036b6fd228bdef4855731ad44ae44b75fe1f4af7eb0f59684de.png");
}

.socialplus_sp_ec .button-container .btn-yahoo:after {
  border-color: #fe0032;
}

.socialplus_sp_ec .button-container .btn-rakuten {
  background-color: #b21d23;
}

.socialplus_sp_ec .button-container .btn-rakuten:before {
  background-image: url("/assets/login-rakuten-8e21ab472f9e803e6d89857d15dd46768e21dc685f03156cfd96205df6773a66.png");
}

.socialplus_sp_ec .button-container .btn-rakuten:after {
  border-color: #ae6164;
}

.socialplus_sp_ec .button-container .btn-line {
  background-color: #31ae36;
}

.socialplus_sp_ec .button-container .btn-line:before {
  background-image: url("/assets/login-line-ed8c51d83aae2ebc670a6fdc20afa7dc93ab3205464e89d999349f49f53659c0.png");
}

.socialplus_sp_ec .button-container .btn-line:after {
  border-color: #70C053;
}

/* LINE ID 連携 */

.line_ec {
}

.line_ec .button-container.w100 {
  width: 100%;
}

.line_ec .button-container .button {
  position: relative;
  display: block;
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  line-height: 50px;
  padding-left: 30px;
  height: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  text-decoration: none;
}

.line_ec .button-container .button:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-size: 100%;
}

.line_ec .button-container .button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: inline-block;
  width: 50px;
  height: 100%;
  border-right-style: solid;
  border-right-width: 1px;
}

@media screen and (min-width: 480px) {
  .line_ec {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .line_ec .button-container {
    width: calc(33.3% - 10px);
    margin: 5px;
  }

  .line_ec .button-container .button {
    line-height: 40px;
    padding-left: 40px;
    height: 40px;
  }

  .line_ec .button-container .button:before {
    width: 40px;
    height: 40px;
  }

  .line_ec .button-container .button:after {
    width: 40px;
  }
}

.line_ec .button-container .btn-line {
  background-color: #31ae36;
}

.line_ec .button-container .btn-line:before {
  background-image: image_url('login-line.png');
}

.line_ec .button-container .btn-line:after {
  border-color: #70C053;
}

.line_ec .button-container .btn-line:before {
  background-image: url("/assets/login-line-ed8c51d83aae2ebc670a6fdc20afa7dc93ab3205464e89d999349f49f53659c0.png");
}

.line_sp_ec {
}

.line_sp_ec .button-container.w100 {
  width: 100%;
}

.line_sp_ec .button-container .button {
  position: relative;
  display: block;
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  line-height: 50px;
  padding-left: 30px;
  height: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  text-decoration: none;
}

.line_sp_ec .button-container .button:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-size: 100%;
}

.line_sp_ec .button-container .button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: inline-block;
  width: 50px;
  height: 100%;
  border-right-style: solid;
  border-right-width: 1px;
}

.line_sp_ec .button-container .btn-line:before {
  background-image: url("/assets/login-line-ed8c51d83aae2ebc670a6fdc20afa7dc93ab3205464e89d999349f49f53659c0.png");
}

.form_container_sp_ec .line_alert_sp_ec {
  font-size: 12px;
  padding: 0px;
}

.line_alert_sp_ec {
  margin: 10px;
}

@media screen and (min-width: 480px) {
  .line_sp_ec {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .line_sp_ec .button-container {
    width: calc(33.3% - 10px);
    margin: 5px;
  }

  .line_sp_ec .button-container .button {
    line-height: 40px;
    padding-left: 40px;
    height: 40px;
  }

  .line_sp_ec .button-container .button:before {
    width: 40px;
    height: 40px;
  }

  .line_sp_ec .button-container .button:after {
    width: 40px;
  }
}

.line_sp_ec .button-container .btn-line {
  background-color: #31ae36;
}

.line_sp_ec .button-container .btn-line:before {
  background-image: image_url('login-line.png');
}

.line_sp_ec .button-container .btn-line:after {
  border-color: #70C053;
  margin: 10px;
  width: 95%;
}

#popup_required_field_check.pc {
  z-index: 99999;
  width: 275px !important;
  float: right;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  position: fixed;
  top: 25px;
  right: 25px;
  display: none;
}

#popup_required_field_check.sp {
  z-index: 99999;
  width: 100% !important;
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: white;
  position: fixed;
  top: 0;
  display: none;
  text-align: center;
}

#popup_required_field_check.required_field_exists {
  background: rgba(242, 133, 12, 0.8);
}

#popup_required_field_check.required_field_not_exists {
  background: rgba(4, 162, 34, 0.8)
}

.input_required_ec {
  background-color: rgba(242, 133, 12, 0.2) !important;
}

.hide {
  display: none !important;
}
/* 認証基盤 連携 */

.auth_infra_ec {
}

.auth_infra_ec .button-container.w100 {
  width: 100%;
}

.auth_infra_ec .button-container .button {
  position: relative;
  display: block;
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  line-height: 50px;
  height: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  text-decoration: none;
  margin-top: 10px;
  cursor: pointer;
}

#auth_infra_button_name::before {
  content: '認証基盤でログイン';
}

@media screen and (min-width: 480px) {
  .auth_infra_ec {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .auth_infra_ec .button-container {
    width: calc(33.3% - 10px);
    margin: 5px;
  }

  .auth_infra_ec .button-container .button {
    line-height: 40px;
    height: 40px;
  }
}

.auth_infra_ec .button-container .btn-auth_infra {
  background-color: #2780E3;
}

.auth_infra_sp_ec {
}

.auth_infra_sp_ec .button-container.w100 {
  width: 100%;
}

.auth_infra_sp_ec .button-container .button {
  position: relative;
  display: block;
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  line-height: 50px;
  height: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  text-decoration: none;
  margin-top: 10px;
}

@media screen and (min-width: 480px) {
  .auth_infra_sp_ec {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .auth_infra_sp_ec .button-container {
    width: calc(33.3% - 10px);
    margin: 5px;
  }

  .auth_infra_sp_ec .button-container .button {
    line-height: 40px;
    padding-left: 40px;
    height: 40px;
  }
}

.auth_infra_sp_ec .button-container .btn-auth_infra {
  background-color: #2780E3;
}


/*-------------------------------------*
 * PCデザイン可変部分
 *-------------------------------------*/
/* 【PC】フォームの項目名ラベル内必須アイコン */
span.form_required_ec{
  /* セクションラベルの色 */
  background: #7E0F09;
  /* セクションラベルのフォント色*/
  color: #ffffff;
}
/* 【PC】フォームのセクションラベル */
.landing_form_label_ec {
  /* セクションラベルの色 */
  background: #203594;
  /* セクションラベルのフォント色*/
  color: #ffffff;
  /* セクションラベルのフォントサイズ */
  font-size: 18px;
}
/* 【PC】フォーム入力ボックス内の基本デザイン */
table.landing_form_ec {
  border-top: 1px solid #d0dcec;
  border-right: 1px solid #d0dcec;
  background: #FFF;
  border-bottom: 1px solid #999;
}
/* 【PC】フォーム左側　項目名ラベル */
.landing_form_ec th {
  background-color: #e1edfd;
  border-bottom: 1px solid #d0dcec;
  border-left: 1px solid #d0dcec;
  background-color: #e1edfd;
}
/* 【PC】フォーム右側　入力ボックス */
.landing_form_ec td {
  border-bottom: 1px solid #d0dcec;
  border-left: 1px solid #d0dcec;
  background-color: #ffffff;
}

/* 【PC】購入ボタンのデザイン */
.submit_bottom_ec {
  border: 0px;
  width: 400px;
  height: 150px;
  background-size: 394px auto;
  background-repeat: no-repeat;
  cursor: pointer;
}

/*-------------------------------------*
 * スマートフォンデザイン可変部分
 *-------------------------------------*/
/* 【SP】フォームの項目名ラベル内必須アイコン */
span.form_required_sp_ec{
  /* セクションラベルの色 */
  background: #7E0F09;
  /* セクションラベルのフォント色*/
  color: #ffffff;
}

/* 【SP】フォームのセクションラベル */
.landing_form_label_sp_ec {
  /* セクションラベルの色 */
  background: #203594;
  /* セクションラベルのフォント色*/
  color: #ffffff;
  /* セクションラベルのフォントサイズ */
  font-size: 18px;
}

/* 【SP】フォームの項目名ラベル */
.form_box_label_sp_ec {
  background: #cadefc;
  border-bottom: 1px solid #C3C3C3;
  border-top: 1px solid #C3C3C3;
}

/* 【SP】購入ボタンのデザイン */
.submit_bottom_sp_ec {
  border: 0px;
  width: 100%;
  height: 150px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* MAYBISSClassic_3d for ecforce. Generated by convert.py from site-3d/*.css: do not edit by hand. */
/* Every rule is scoped to #mbsv; lengths are multiples of --u (1/9.07 of the LP width, i.e. 100px of the 907px design). */
.mbsv-frame { max-width: 907px; margin: 0 auto; container-type: inline-size; }
#mbsv { --u: calc(min(100vw, 907px) / 9.07); }
@supports (width: 1cqw) { #mbsv { --u: calc(100cqw / 9.07); } }
.mbsv-xpop { --u: calc(min(100vw, 907px) / 9.07); }
:is(#mbsv, .mbsv-xpop) :where(h1, h2, h3, h4, p, ul, ol, dl, dt, dd, table, figure, small, strong, b, a, label, button) { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; text-decoration: none; letter-spacing: inherit; }
:is(#mbsv, .mbsv-xpop) :where(button) { background: none; appearance: none; box-shadow: none; text-transform: none; }
:is(#mbsv, .mbsv-xpop) :where(strong, b) { font-weight: bolder; }
:is(#mbsv, .mbsv-xpop) :where(small) { font-size: smaller; }
:is(#mbsv, .mbsv-xpop) :where(sup) { position: static; top: auto; font-size: smaller; line-height: normal; vertical-align: super; }
:is(#mbsv, .mbsv-xpop) :where(img, svg) { max-width: none; vertical-align: baseline; }
/* ---- styles.css ---- */
:is(#mbsv, .mbsv-xpop) { --navy: #102b3a; --navy-panel: #132d3e; --deep: #14506b; --teal: #1d8faf; --teal-dark: #0f6b7c; --pale: #e6f6fa; --copper: #c99c6c; --yellow: #ded245; --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; --latin: "Montserrat", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; --mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --didone: "Bodoni Moda", "Didot", "Bodoni 72", "Hiragino Mincho ProN", serif; --price: "Barlow Condensed", "Roboto Condensed", "Oswald", "Hiragino Sans", sans-serif; --cond: "Roboto Condensed", "Oswald", "Hiragino Sans", "Noto Sans JP", sans-serif; }
:is(#mbsv, .mbsv-xpop) { -webkit-text-size-adjust: 100%; }
:is(#mbsv, .mbsv-xpop) *, :is(#mbsv, .mbsv-xpop) *::before, :is(#mbsv, .mbsv-xpop) *::after { box-sizing: border-box; }
:is(#mbsv, .mbsv-xpop) { color: var(--navy); font-family: var(--sans); font-size: calc(0.24 * var(--u)); line-height: 1.5; -webkit-font-smoothing: antialiased; }
:is(#mbsv, .mbsv-xpop) h1, :is(#mbsv, .mbsv-xpop) h2, :is(#mbsv, .mbsv-xpop) h3, :is(#mbsv, .mbsv-xpop) h4, :is(#mbsv, .mbsv-xpop) p, :is(#mbsv, .mbsv-xpop) ul, :is(#mbsv, .mbsv-xpop) ol, :is(#mbsv, .mbsv-xpop) dl, :is(#mbsv, .mbsv-xpop) dd, :is(#mbsv, .mbsv-xpop) table { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
:is(#mbsv, .mbsv-xpop) ul, :is(#mbsv, .mbsv-xpop) ol { list-style: none; }
:is(#mbsv, .mbsv-xpop) img, :is(#mbsv, .mbsv-xpop) svg { display: block; }
:is(#mbsv, .mbsv-xpop) i, :is(#mbsv, .mbsv-xpop) em { font-style: normal; }
:is(#mbsv, .mbsv-xpop) .lp { width: calc(9.07 * var(--u)); margin: 0 auto; overflow: hidden; background: #fff; }
:is(#mbsv, .mbsv-xpop) .lp > section { position: relative; overflow: hidden; }
:is(#mbsv, .mbsv-xpop) .wordmark { display: block; overflow: hidden; aspect-ratio: 615 / 97; }
:is(#mbsv, .mbsv-xpop) .wordmark img { width: 100%; height: auto; }
:is(#mbsv, .mbsv-xpop) .fv { height: calc(16.66 * var(--u)); color: #fff; }
:is(#mbsv, .mbsv-xpop) .fv > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .fv__bg { inset: 0; width: 100%; height: 100%; }
:is(#mbsv, .mbsv-xpop) .fv__headline { left: 0; top: calc(1.53 * var(--u)); width: 100%; font-family: var(--mincho); font-size: calc(1.005 * var(--u)); font-weight: 900; letter-spacing: -0.045em; line-height: calc(1.2 * var(--u)); text-align: center; transform: skewX(-10deg) scaleX(0.92); filter: drop-shadow(0 calc(0.03 * var(--u)) calc(0.06 * var(--u)) rgba(0, 22, 38, 0.45)); font-feature-settings: "palt"; padding-left: calc(0.3 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .fv__line { display: block; white-space: nowrap; -webkit-text-stroke: calc(0.012 * var(--u)) #fff; }
:is(#mbsv, .mbsv-xpop) .fv__line b { margin: 0 0.02em; font-family: var(--didone); font-size: 1.72em; font-style: italic; font-weight: 800; letter-spacing: 0; line-height: 0; vertical-align: -0.08em; -webkit-text-stroke: 0; }
:is(#mbsv, .mbsv-xpop) .fv__line--2 { font-size: 1.09em; margin: calc(0.02 * var(--u)) 0 0 calc(0.14 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .fv__line em, :is(#mbsv, .mbsv-xpop) .fv__line i { background: linear-gradient(180deg, #eaf7fd 15%, #a8d6ee 85%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke-color: #cdeafa; }
:is(#mbsv, .mbsv-xpop) .fv__line em { font-size: 1.19em; }
:is(#mbsv, .mbsv-xpop) .fv__badge { left: calc(6.34 * var(--u)); top: calc(4.86 * var(--u)); width: calc(2.7 * var(--u)); height: calc(1.2 * var(--u)); color: #fff; line-height: 1; text-align: center; }
:is(#mbsv, .mbsv-xpop) .fv__badge-label { display: block; font-family: var(--mincho); font-size: calc(0.205 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; color: #fff; text-shadow: 0 calc(0.01 * var(--u)) calc(0.04 * var(--u)) rgba(0, 0, 0, 0.45); }
:is(#mbsv, .mbsv-xpop) .fv__badge-num { display: block; margin-top: calc(0.02 * var(--u)); padding-right: calc(0.06 * var(--u)); font-family: var(--didone); font-size: calc(0.88 * var(--u)); font-style: normal; font-weight: 700; line-height: calc(0.88 * var(--u)); letter-spacing: -0.03em; font-optical-sizing: none; font-variation-settings: "opsz" 28; font-variant-numeric: lining-nums; background: linear-gradient(180deg, #fffaf0 0%, #f6e3b0 32%, #dcb873 58%, #f5e6bd 78%, #c9a25e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 calc(0.015 * var(--u)) calc(0.03 * var(--u)) rgba(0, 0, 0, 0.5)); }
:is(#mbsv, .mbsv-xpop) .fv__badge-num small { font-size: 0.52em; margin-left: 0.02em; }
:is(#mbsv, .mbsv-xpop) .fv__badge-num sup { font-family: "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", serif; font-size: calc(0.13 * var(--u)); font-style: normal; font-weight: 700; position: absolute; right: calc(0.56 * var(--u)); top: calc(0.14 * var(--u)); line-height: 1; letter-spacing: 0; color: #f3e1b0; -webkit-text-fill-color: #f3e1b0; }
:is(#mbsv, .mbsv-xpop) .fv__tag { top: calc(6.92 * var(--u)); width: calc(0.68 * var(--u)); display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-size: calc(0.4 * var(--u)); font-weight: 800; line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .fv__tag--teal { left: calc(6.89 * var(--u)); height: calc(4.46 * var(--u)); letter-spacing: -0.09em; font-size: calc(0.44 * var(--u)); padding-bottom: calc(0.06 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .fv__tag--copper { left: calc(7.8 * var(--u)); height: calc(2.51 * var(--u)); font-size: calc(0.44 * var(--u)); letter-spacing: 0.177em; padding-bottom: calc(0.1 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .fv__reading, :is(#mbsv, .mbsv-xpop) .fv__note { left: 0; width: 100%; line-height: 1; text-align: center; white-space: nowrap; font-weight: 500; }
:is(#mbsv, .mbsv-xpop) .fv__reading { top: calc(15.29 * var(--u)); font-size: calc(0.29 * var(--u)); font-weight: 500; letter-spacing: 0.05em; }
:is(#mbsv, .mbsv-xpop) .fv__note { top: calc(15.7 * var(--u)); left: calc(0.6 * var(--u)); width: calc(100% - calc(1.2 * var(--u))); font-size: calc(0.145 * var(--u)); line-height: calc(0.235 * var(--u)); white-space: normal; font-weight: 400; font-feature-settings: "palt"; }
:is(#mbsv, .mbsv-xpop) .fv__backdrop { left: 0; top: 0; width: 100%; height: calc(17.33 * var(--u)); background:
    
    radial-gradient(36% 1.5% at 40% 50.42%, rgba(232, 255, 255, 0.72) 0%, rgba(232, 255, 255, 0) 100%),
    radial-gradient(72% 6.5% at 40% 50.42%, rgba(150, 240, 246, 0.46) 0%, rgba(150, 240, 246, 0) 100%),
    radial-gradient(130% 19% at 40% 50.42%, rgba(70, 200, 215, 0.30) 0%, rgba(70, 200, 215, 0) 100%),
    
    linear-gradient(118deg, rgba(150, 232, 242, 0) 36%, rgba(150, 232, 242, 0.20) 49%, rgba(190, 246, 250, 0.26) 55%, rgba(150, 232, 242, 0) 70%),
    
    radial-gradient(74% 36% at 78% 40%, rgba(104, 220, 230, 0.60) 0%, rgba(104, 220, 230, 0) 100%),
    radial-gradient(70% 34% at 4% 22%, rgba(26, 84, 150, 0.60) 0%, rgba(26, 84, 150, 0) 100%),
    linear-gradient(180deg, #082c41 0%, #0d4a64 24%, #15809b 50.42%, #0a3b52 100%); }
:is(#mbsv, .mbsv-xpop) .fv__horizon { left: 0; top: calc(8.73 * var(--u)); width: 100%; height: calc(0.015 * var(--u)); background: linear-gradient(90deg, rgba(210, 250, 252, 0) 0%, rgba(210, 250, 252, 0.5) 22%, rgba(226, 254, 255, 0.8) 40%, rgba(210, 250, 252, 0.5) 62%, rgba(210, 250, 252, 0) 100%); }
:is(#mbsv, .mbsv-xpop) .fv__lines { left: 0; top: 0; width: 100%; height: auto; mix-blend-mode: screen; }
:is(#mbsv, .mbsv-xpop) .fv__products { left: 0; top: 0; width: 100%; height: calc(17.33 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .fv__depth { left: 0; top: calc(12.4 * var(--u)); bottom: 0; width: 100%; background: linear-gradient(180deg, rgba(7, 40, 58, 0) 0%, rgba(7, 40, 58, 0.42) 38%, rgba(6, 34, 50, 0.78) 100%); }
:is(#mbsv, .mbsv-xpop) .fv__logo { left: calc(0.47 * var(--u)); top: calc(0.45 * var(--u)); width: calc(2.15 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .fv__seal { left: calc(6.34 * var(--u)); top: calc(4 * var(--u)); width: calc(2.7 * var(--u)); height: calc(2.7 * var(--u)); background: radial-gradient(circle calc(1.25 * var(--u)) at 50% 53%, rgba(4, 22, 32, 0.46) 0, rgba(4, 22, 32, 0.36) 55%, rgba(4, 22, 32, 0.12) 85%, rgba(4, 22, 32, 0) 100%); }
:is(#mbsv, .mbsv-xpop) .fv__seal img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 calc(0.01 * var(--u)) calc(0.02 * var(--u)) rgba(0, 0, 0, 0.35)); }
:is(#mbsv, .mbsv-xpop) .fv__badge { background: none; }
:is(#mbsv, .mbsv-xpop) .fv__bar { top: calc(6.92 * var(--u)); width: calc(0.67 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .fv__bar--teal { left: calc(6.9 * var(--u)); height: calc(4.46 * var(--u)); background: linear-gradient(180deg, #2192ab, #126a86); }
:is(#mbsv, .mbsv-xpop) .fv__bar--copper { left: calc(7.8 * var(--u)); height: calc(2.51 * var(--u)); background: linear-gradient(180deg, #b97a43, #8a5632); }
:is(#mbsv, .mbsv-xpop) .fv__brand { left: calc(1.48 * var(--u)); top: calc(13.5 * var(--u)); width: calc(6.12 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .store { height: calc(11.28 * var(--u)); border-top: calc(0.4 * var(--u)) solid #fff; background: linear-gradient(180deg, #fff 0, #fff 62%, #e4f1fb 84%, #f3f9fd 100%); color: #10284a; }
:is(#mbsv, .mbsv-xpop) .store > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .store__map { left: 0; top: calc(1.3 * var(--u)); width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }
:is(#mbsv, .mbsv-xpop) .store__fm { left: calc(0.85 * var(--u)); top: calc(0.41 * var(--u)); width: calc(3.4 * var(--u)); height: auto; mix-blend-mode: multiply; }
:is(#mbsv, .mbsv-xpop) .store__headline { left: calc(0.56 * var(--u)); top: calc(1.19 * var(--u)); font-weight: 800; line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .store__line { display: flex; font-size: calc(0.735 * var(--u)); letter-spacing: 0; align-items: baseline; }
:is(#mbsv, .mbsv-xpop) .store__line strong { display: block; margin: 0 calc(-0.01 * var(--u)) 0 calc(-0.16 * var(--u)); font-size: calc(1.31 * var(--u)); font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(180deg, #1bbbdb 8%, #1789b2 42%, #12406b 86%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; transform: translateY(calc(0.07 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .store__line strong b { font-size: 1.15em; font-weight: 800; letter-spacing: -0.04em; margin-right: calc(-0.25 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .store__line--2 { margin-top: calc(0.115 * var(--u)); font-size: calc(0.776 * var(--u)); margin-left: calc(0.02 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .store__t { display: block; }
:is(#mbsv, .mbsv-xpop) .store__t + strong + .store__t { font-size: calc(0.77 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .store__brand { left: calc(0.55 * var(--u)); top: calc(3.92 * var(--u)); width: calc(4.45 * var(--u)); display: block; height: calc(0.72 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .store__brand::before, :is(#mbsv, .mbsv-xpop) .store__brand::after { content: ""; height: calc(0.02 * var(--u)); background: #2c5f9a; position: absolute; top: calc(0.2 * var(--u)); left: 0; width: calc(0.65 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .store__brand::after { left: calc(3.7 * var(--u)); width: calc(0.75 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .store__brand .wordmark { position: absolute; left: calc(0.93 * var(--u)); top: 0; width: calc(2.47 * var(--u)); height: calc(0.39 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .store__classic { position: absolute; left: calc(2.1 * var(--u)); top: calc(0.44 * var(--u)); width: calc(1.32 * var(--u)); font-family: var(--latin); font-size: calc(0.245 * var(--u)); font-weight: 500; line-height: calc(0.28 * var(--u)); text-align: right; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .store__brand img { width: 100%; height: auto; }
:is(#mbsv, .mbsv-xpop) .store__note { left: calc(6.12 * var(--u)); top: calc(10.06 * var(--u)); font-size: calc(0.165 * var(--u)); font-weight: 500; line-height: calc(0.26 * var(--u)); letter-spacing: 0.04em; }
:is(#mbsv, .mbsv-xpop) .starter { height: calc(15.67 * var(--u)); background: linear-gradient(112deg, rgba(255, 255, 255, 0.7) 6%, rgba(255, 255, 255, 0) 20%), linear-gradient(180deg, #6b9fc2 0%, #9cc3da 10%, #cfe2ed 26%, #e6f0f6 55%, #c9dfeb 100%); }
:is(#mbsv, .mbsv-xpop) .starter > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .starter__frame { inset: calc(0.63 * var(--u)) calc(0.27 * var(--u)) calc(0.3 * var(--u)) calc(0.25 * var(--u)); border: calc(0.06 * var(--u)) solid #6fa3c2; background: rgba(255, 255, 255, 0.78); border-image: linear-gradient(180deg, #1e4c72 0%, #3f7fa8 22%, #9fcbe0 55%, #b9dbe9 100%) 1; }
:is(#mbsv, .mbsv-xpop) .starter__eyebrow { left: calc(0.57 * var(--u)); top: calc(0.28 * var(--u)); z-index: 2; width: calc(3.18 * var(--u)); height: calc(0.82 * var(--u)); display: grid; place-items: center; border: calc(0.02 * var(--u)) solid #3f6f92; background: linear-gradient(180deg, #0c2138, #17395b); font-size: calc(0.57 * var(--u)); font-weight: 800; letter-spacing: 0.1em; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .starter__eyebrow span { background: linear-gradient(180deg, #f6e2bd, #d3a36a); -webkit-background-clip: text; background-clip: text; color: transparent; }
:is(#mbsv, .mbsv-xpop) .starter__title span { display: block; transform: scaleX(0.94); }
:is(#mbsv, .mbsv-xpop) .starter__title { left: calc(0.65 * var(--u)); top: calc(1 * var(--u)); width: calc(7.77 * var(--u)); height: calc(1.12 * var(--u)); display: grid; place-items: center; background: linear-gradient(180deg, #0c2440, #153c5e); color: #fff; font-size: calc(0.8 * var(--u)); font-weight: 700; letter-spacing: -0.082em; line-height: 1; padding-left: 0; }
:is(#mbsv, .mbsv-xpop) .starter__sub { left: calc(0.88 * var(--u)); top: calc(2.2 * var(--u)); display: flex; align-items: center; gap: calc(0.14 * var(--u)); color: #0e2740; line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .starter__sub .wordmark { width: calc(2.69 * var(--u)); height: calc(0.424 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .starter__sub-classic { font-family: var(--latin); font-size: calc(0.475 * var(--u)); font-weight: 400; margin-left: calc(0.03 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .starter__sub strong { margin-left: calc(0.07 * var(--u)); font-size: calc(0.62 * var(--u)); font-weight: 800; transform: translateY(calc(-0.1 * var(--u))); letter-spacing: -0.03em; font-feature-settings: "palt"; }
:is(#mbsv, .mbsv-xpop) .starter__sub strong b { font-size: 1.55em; font-weight: 800; margin-right: 0.1em; font-family: var(--price); letter-spacing: 0; }
:is(#mbsv, .mbsv-xpop) .starter__packs { left: calc(0.024 * var(--u)); top: calc(2.865 * var(--u)); width: calc(8.84 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .starter__usual { left: calc(0.7 * var(--u)); top: calc(9.62 * var(--u)); font-size: calc(0.3 * var(--u)); font-weight: 700; letter-spacing: 0.06em; line-height: calc(0.46 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .starter__usual-head { display: block; }
:is(#mbsv, .mbsv-xpop) .starter__usual s { position: relative; text-decoration: none; }
:is(#mbsv, .mbsv-xpop) .starter__usual s::after { content: ""; position: absolute; inset: calc(0.08 * var(--u)) calc(-0.02 * var(--u)) calc(0.02 * var(--u)); background: linear-gradient(to top right, transparent calc(50% - calc(0.012 * var(--u))), var(--red) calc(50% - calc(0.012 * var(--u))), var(--red) calc(50% + calc(0.012 * var(--u))), transparent calc(50% + calc(0.012 * var(--u)))); }
:is(#mbsv, .mbsv-xpop) .starter__usual b { font-size: calc(0.4 * var(--u)); font-weight: 700; letter-spacing: 0; font-family: var(--cond); }
:is(#mbsv, .mbsv-xpop) .starter__usual i { margin-left: calc(0.02 * var(--u)); font-size: calc(0.3 * var(--u)); font-weight: 800; letter-spacing: 0; }
:is(#mbsv, .mbsv-xpop) .starter__usual em { margin-left: calc(0.04 * var(--u)); font-style: normal; }
:is(#mbsv, .mbsv-xpop) .starter__usual > span:last-child { font-size: calc(0.3 * var(--u)); letter-spacing: 0.04em; }
:is(#mbsv, .mbsv-xpop) .starter__off { left: calc(0.47 * var(--u)); top: calc(10.68 * var(--u)); width: calc(1.95 * var(--u)); height: calc(1.95 * var(--u)); display: block; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1b4a72, #0c2440 75%); box-shadow: 0 calc(0.04 * var(--u)) calc(0.1 * var(--u)) rgba(0, 0, 0, 0.25); color: #f0d3a0; font-weight: 700; line-height: 1; font-family: var(--cond); text-align: center; }
:is(#mbsv, .mbsv-xpop) .starter__off span { font-size: calc(0.56 * var(--u)); position: absolute; left: 0; top: calc(1.245 * var(--u)); width: 100%; letter-spacing: -0.01em; }
:is(#mbsv, .mbsv-xpop) .starter__off span:first-child { font-family: var(--sans); font-size: calc(0.3 * var(--u)); font-weight: 800; top: calc(0.19 * var(--u)); letter-spacing: 0; }
:is(#mbsv, .mbsv-xpop) .starter__off b { margin: 0; font-size: calc(1.04 * var(--u)); font-weight: 700; letter-spacing: -0.01em; position: absolute; left: 0; top: calc(0.41 * var(--u)); width: 100%; font-family: var(--cond); }
:is(#mbsv, .mbsv-xpop) .starter__off i { font-size: 0.56em; }
:is(#mbsv, .mbsv-xpop) .starter__price { left: calc(2.5 * var(--u)); top: calc(10.78 * var(--u)); width: calc(4.55 * var(--u)); height: calc(1.6 * var(--u)); color: var(--navy); line-height: 1; }
:is(#mbsv, .mbsv-xpop) .starter__price > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .starter__first { left: 0; top: 0; z-index: 1; font-size: calc(0.29 * var(--u)); font-weight: 800; }
:is(#mbsv, .mbsv-xpop) .starter__num { left: calc(0.04 * var(--u)); top: calc(-0.33 * var(--u)); font-family: var(--price); font-size: calc(2.1 * var(--u)); font-weight: 800; letter-spacing: calc(-0.02 * var(--u)); background: linear-gradient(180deg, #1c7088 0%, #0d4a61 100%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .starter__num span { display: inline-block; background: linear-gradient(180deg, #1c7088 0%, #0d4a61 100%); color: transparent; -webkit-background-clip: text; background-clip: text; }
:is(#mbsv, .mbsv-xpop) .starter__num i { margin: 0 calc(-0.1 * var(--u)) 0 calc(-0.06 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .starter__tax { left: calc(3.76 * var(--u)); top: calc(0.44 * var(--u)); font-size: calc(0.22 * var(--u)); font-weight: 700; white-space: nowrap; font-feature-settings: "palt"; letter-spacing: 0.02em; }
:is(#mbsv, .mbsv-xpop) .starter__yen { left: calc(3.73 * var(--u)); top: calc(0.7 * var(--u)); font-size: calc(0.92 * var(--u)); font-weight: 800; color: #10566e; transform: scaleX(0.86); transform-origin: left; }
:is(#mbsv, .mbsv-xpop) .starter__ship { left: calc(7.17 * var(--u)); top: calc(11.05 * var(--u)); width: calc(1.35 * var(--u)); height: calc(1.32 * var(--u)); display: grid; place-items: center; border: calc(0.03 * var(--u)) solid #173650; background: #fff; font-size: calc(0.46 * var(--u)); font-weight: 800; letter-spacing: 0.06em; line-height: 1.2; text-align: center; }
:is(#mbsv, .mbsv-xpop) .starter__benefits { left: calc(0.47 * var(--u)); top: calc(12.77 * var(--u)); width: calc(8.14 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(0.11 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .starter__benefits li { height: calc(2.1 * var(--u)); padding-top: calc(0.12 * var(--u)); border: calc(0.02 * var(--u)) solid #a9d3e6; border-radius: calc(0.08 * var(--u)); background: #fff; font-size: calc(0.3 * var(--u)); font-weight: 400; line-height: calc(0.37 * var(--u)); text-align: center; font-feature-settings: "palt"; }
:is(#mbsv, .mbsv-xpop) .starter__benefits svg { width: calc(1.1 * var(--u)); height: calc(0.92 * var(--u)); margin: 0 auto calc(0.14 * var(--u)); color: #17364d; }
:is(#mbsv, .mbsv-xpop) .starter__note { right: calc(0.38 * var(--u)); top: calc(15.05 * var(--u)); font-size: calc(0.172 * var(--u)); font-weight: 500; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .cycle { padding: calc(0.25 * var(--u)) calc(0.47 * var(--u)) calc(0.27 * var(--u)); background: linear-gradient(135deg, #f4f8fa 0%, #dbe9ee 45%, #f1f6f8 100%); }
:is(#mbsv, .mbsv-xpop) .cycle__frame { position: absolute; inset: calc(0.25 * var(--u)) calc(0.24 * var(--u)) calc(0.27 * var(--u)) calc(0.25 * var(--u)); border: calc(0.03 * var(--u)) solid #1b4a66; pointer-events: none; }
:is(#mbsv, .mbsv-xpop) .cycle__title { position: relative; padding-top: calc(0.19 * var(--u)); font-size: calc(0.49 * var(--u)); font-weight: 800; line-height: calc(0.66 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .cycle__title span { position: relative; display: inline-block; padding: 0 calc(0.08 * var(--u)) calc(0.02 * var(--u)); border-bottom: calc(0.02 * var(--u)) solid #b5d2dc; }
:is(#mbsv, .mbsv-xpop) .cycle__title span::before, :is(#mbsv, .mbsv-xpop) .cycle__title span::after { content: ""; position: absolute; bottom: 0; width: calc(0.03 * var(--u)); height: calc(0.46 * var(--u)); background: var(--copper); right: calc(-0.52 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cycle__title span::before { left: calc(-0.39 * var(--u)); transform: rotate(-32deg); }
:is(#mbsv, .mbsv-xpop) .cycle__title span::after { right: calc(-0.46 * var(--u)); transform: rotate(32deg); }
:is(#mbsv, .mbsv-xpop) .cycle__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(0.12 * var(--u)); margin-top: calc(0.1 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step { position: relative; padding-bottom: calc(1.22 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step__label { height: calc(0.58 * var(--u)); display: grid; place-items: center; border-radius: calc(0.12 * var(--u)) calc(0.12 * var(--u)) 0 0; background: #0f2b3f; color: #fff; font-size: calc(0.295 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: 0.02em; }
:is(#mbsv, .mbsv-xpop) .step__body { position: relative; height: calc(4.48 * var(--u)); border: calc(0.015 * var(--u)) solid #b8d4da; border-top: 0; border-radius: 0 0 calc(0.12 * var(--u)) calc(0.12 * var(--u)); background: #fbfdfd; box-shadow: 0 calc(0.04 * var(--u)) calc(0.1 * var(--u)) rgba(20, 60, 80, 0.12); }
:is(#mbsv, .mbsv-xpop) .step__body > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .step__count { left: calc(0.18 * var(--u)); top: calc(0.12 * var(--u)); width: calc(0.82 * var(--u)); height: calc(0.82 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: #0f6f7f; color: #fff; font-size: calc(0.34 * var(--u)); font-weight: 800; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .step--first .step__count { left: calc(0.3 * var(--u)); top: calc(0.1 * var(--u)); width: calc(0.72 * var(--u)); height: calc(0.72 * var(--u)); border: calc(0.02 * var(--u)) solid #0f6f7f; background: #fff; color: #0f6f7f; font-size: calc(0.3 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step__support { left: calc(0.72 * var(--u)); top: calc(0.12 * var(--u)); width: calc(1.84 * var(--u)); height: calc(0.82 * var(--u)); display: grid; place-items: center; padding-left: calc(0.26 * var(--u)); border-radius: calc(0.41 * var(--u)); background: #f1f7f8; font-size: calc(0.21 * var(--u)); font-weight: 700; line-height: calc(0.31 * var(--u)); text-align: center; z-index: -1; padding-bottom: calc(0.1 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step__body { isolation: isolate; }
:is(#mbsv, .mbsv-xpop) .step__packs { left: 0; top: calc(0.82 * var(--u)); width: 100%; display: flex; justify-content: center; gap: calc(0.075 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step__packs img { width: calc(0.345 * var(--u)); height: auto; filter: drop-shadow(0 calc(0.03 * var(--u)) calc(0.04 * var(--u)) rgba(0, 0, 0, 0.25)); }
:is(#mbsv, .mbsv-xpop) .step--first .step__packs img { width: calc(0.37 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step--first .step__packs { gap: calc(0.15 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step__off { left: calc(0.21 * var(--u)); right: calc(0.21 * var(--u)); top: calc(2.79 * var(--u)); height: calc(0.52 * var(--u)); display: grid; place-items: center; border: calc(0.02 * var(--u)) solid #4a9aaa; border-radius: calc(0.03 * var(--u)); background: #f3fafb; color: var(--teal-dark); font-size: calc(0.255 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .step__price { left: 0; right: calc(0.22 * var(--u)); top: calc(3.38 * var(--u)); color: var(--teal-dark); font-size: calc(0.5 * var(--u)); font-weight: 800; line-height: calc(0.6 * var(--u)); text-align: right; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .step__price b { font-family: inherit; font-size: calc(0.51 * var(--u)); font-weight: 900; font-feature-settings: "palt"; }
:is(#mbsv, .mbsv-xpop) .step__price small { display: block; margin-top: calc(-0.04 * var(--u)); color: var(--navy); font-size: calc(0.22 * var(--u)); font-weight: 700; line-height: calc(0.3 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step__after { position: absolute; left: calc(0.2 * var(--u)); top: calc(5.06 * var(--u)); width: calc(1.95 * var(--u)); height: calc(1.14 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step__after::before { content: ""; position: absolute; left: 0; top: 0; width: calc(0.34 * var(--u)); height: calc(0.6 * var(--u)); border: solid #9aa3a5; border-width: 0 0 calc(0.02 * var(--u)) calc(0.02 * var(--u)); border-radius: 0 0 0 calc(0.1 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .step__after img { position: absolute; left: calc(0.32 * var(--u)); top: calc(0.27 * var(--u)); width: calc(1.6 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .step__after span { position: absolute; left: calc(0.44 * var(--u)); top: calc(0.47 * var(--u)); color: #fff; font-size: calc(0.26 * var(--u)); font-weight: 800; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .cycle__note { margin-top: calc(0.24 * var(--u)); padding: calc(0.22 * var(--u)) calc(0.1 * var(--u)) 0; border-top: calc(0.015 * var(--u)) solid #7fb9c6; color: #555b5e; font-size: calc(0.19 * var(--u)); line-height: calc(0.36 * var(--u)); width: calc(8.13 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cycle__cta { height: calc(4.74 * var(--u)); padding-top: calc(0.5 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .problem { height: calc(10.04 * var(--u)); color: #0f2a3a; }
:is(#mbsv, .mbsv-xpop) .problem__bg { width: 100%; height: 100%; object-fit: cover; }
:is(#mbsv, .mbsv-xpop) .problem__headline { position: absolute; left: calc(0.55 * var(--u)); top: calc(3.64 * var(--u)); font-weight: 800; line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .problem__headline span { display: block; }
:is(#mbsv, .mbsv-xpop) .problem__l1 { margin-left: calc(0.05 * var(--u)); font-size: calc(0.545 * var(--u)); margin-top: calc(0.07 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .problem__l2 { width: calc(5.28 * var(--u)); height: calc(0.8 * var(--u)); margin-top: calc(0.205 * var(--u)); background: #0f2b3f; color: #fff; font-size: calc(0.555 * var(--u)); line-height: calc(0.78 * var(--u)); text-align: center; border-radius: calc(0.02 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .problem__l3 { margin-top: calc(0.08 * var(--u)); font-size: calc(0.9 * var(--u)); letter-spacing: 0.01em; margin-left: calc(0.03 * var(--u)); font-feature-settings: "palt"; }
:is(#mbsv, .mbsv-xpop) .problem__l4 { margin: calc(0.12 * var(--u)) 0 0 calc(0.02 * var(--u)); font-size: calc(0.665 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .problem__q { position: absolute; left: calc(0.6 * var(--u)); top: calc(8.22 * var(--u)); font-size: calc(0.262 * var(--u)); font-weight: 600; letter-spacing: calc(0.012 * var(--u)); line-height: calc(0.54 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .check { height: calc(16.85 * var(--u)); border-top: calc(0.55 * var(--u)) solid #fafafa; background: #fafafa; }
:is(#mbsv, .mbsv-xpop) .check__box { position: absolute; left: calc(0.67 * var(--u)); top: calc(0.07 * var(--u)); width: calc(7.71 * var(--u)); height: calc(10.26 * var(--u)); border-radius: calc(0.06 * var(--u)); background: #232323; color: #fff; }
:is(#mbsv, .mbsv-xpop) .check__title { position: absolute; left: calc(0.41 * var(--u)); right: calc(0.37 * var(--u)); top: 0; height: calc(0.97 * var(--u)); display: flex; align-items: center; border-bottom: calc(0.015 * var(--u)) solid #d4d4d4; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .check__title span { width: calc(2.54 * var(--u)); color: var(--yellow); font-family: "Oswald", var(--latin); font-size: calc(0.42 * var(--u)); font-weight: 500; letter-spacing: 0.01em; transform: translateY(calc(-0.15 * var(--u))) scaleX(0.91); transform-origin: left; }
:is(#mbsv, .mbsv-xpop) .check__title small { font-size: calc(0.26 * var(--u)); font-weight: 600; letter-spacing: 0.06em; }
:is(#mbsv, .mbsv-xpop) .check__photo { position: absolute; left: calc(1.01 * var(--u)); top: calc(1.3 * var(--u)); width: calc(6.9 * var(--u)); height: calc(3.4 * var(--u)); object-fit: cover; border-radius: calc(0.04 * var(--u)); box-shadow: calc(0.1 * var(--u)) calc(0.1 * var(--u)) calc(0.2 * var(--u)) rgba(0, 0, 0, 0.35); }
:is(#mbsv, .mbsv-xpop) .check__list { position: absolute; left: 0; top: calc(3.45 * var(--u)); font-size: calc(0.316 * var(--u)); font-weight: 600; letter-spacing: 0.02em; line-height: calc(0.48 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .check__list li { position: relative; height: calc(1.43 * var(--u)); padding: calc(0.33 * var(--u)) 0 0 calc(0.98 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .check__list li:first-child { width: calc(5.78 * var(--u)); height: calc(1.46 * var(--u)); margin-bottom: calc(-0.03 * var(--u)); border-radius: 0 calc(0.24 * var(--u)) calc(0.24 * var(--u)) 0; background: #232323; }
:is(#mbsv, .mbsv-xpop) .check__list li::before { content: ""; position: absolute; left: calc(0.43 * var(--u)); top: calc(0.47 * var(--u)); width: calc(0.36 * var(--u)); height: calc(0.36 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Ccircle cx='18' cy='18' r='15.5' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M10.5 18.5l5 5 10-11' stroke='%23ded245' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat; }
:is(#mbsv, .mbsv-xpop) .check__devices { position: absolute; left: calc(5.2 * var(--u)); top: calc(5.59 * var(--u)); width: calc(4.29 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .check__closing { position: absolute; left: 0; top: calc(12.1 * var(--u)); width: 100%; color: #1c1c1c; font-weight: 800; line-height: 1; text-align: center; }
:is(#mbsv, .mbsv-xpop) .check__closing > * { display: block; }
:is(#mbsv, .mbsv-xpop) .check__closing::before, :is(#mbsv, .mbsv-xpop) .check__closing::after { content: ""; position: absolute; left: 50%; width: calc(1.6 * var(--u)); height: calc(1 * var(--u)); margin-left: calc(-0.8 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='none' stroke='%2314506b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8l68 26 68-26' opacity='.2'/%3E%3Cpath d='M12 36l68 26 68-26' opacity='.5'/%3E%3Cpath d='M12 64l68 26 68-26' stroke='%231d8faf'/%3E%3C/svg%3E") center / contain no-repeat; }
:is(#mbsv, .mbsv-xpop) .check__closing::before { bottom: calc(100% + calc(0.42 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .check__closing::after { top: calc(100% + calc(0.5 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .check__c1 { font-size: calc(0.58 * var(--u)); transform: translateX(calc(0.17 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .check__c1 mark { display: inline-block; margin-right: calc(0.14 * var(--u)); padding: calc(0.05 * var(--u)) 0 calc(0.08 * var(--u)) calc(0.16 * var(--u)); background: #1c1c1c; color: #fff; }
:is(#mbsv, .mbsv-xpop) .check__c2 { margin-top: calc(0.25 * var(--u)); font-size: calc(0.52 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .check__c3 { margin-top: calc(0.19 * var(--u)); color: var(--deep); font-size: calc(0.805 * var(--u)); font-weight: 800; letter-spacing: -0.01em; }
:is(#mbsv, .mbsv-xpop) .features { height: calc(24.13 * var(--u)); background: #fff; }
:is(#mbsv, .mbsv-xpop) .features__panel { position: absolute; left: calc(0.72 * var(--u)); top: calc(0.1 * var(--u)); width: calc(7.79 * var(--u)); height: calc(23.72 * var(--u)); border-radius: calc(0.1 * var(--u)); background: var(--navy-panel); color: #fff; }
:is(#mbsv, .mbsv-xpop) .feature > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .feature__photo { object-fit: cover; border-radius: calc(0.06 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature__body { font-size: calc(0.3 * var(--u)); font-weight: 600; letter-spacing: 0.02em; line-height: calc(0.535 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature__bars { left: calc(0.51 * var(--u)); color: #1a1a1a; font-size: calc(0.6 * var(--u)); font-weight: 800; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .feature__bars span { display: block; width: calc(3.87 * var(--u)); height: calc(0.97 * var(--u)); padding: 0 0 0 calc(0.42 * var(--u)); background: #fff; line-height: calc(0.93 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .feature__bars span + span { height: calc(1.02 * var(--u)); margin-top: calc(0.03 * var(--u)); line-height: calc(0.98 * var(--u)); width: calc(6.72 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--3 .feature__bars span { width: calc(4.33 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--3 .feature__bars span + span { width: calc(5.69 * var(--u)); height: calc(0.97 * var(--u)); line-height: calc(0.94 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--1 .feature__photo { left: 0; top: 0; width: calc(7.79 * var(--u)); height: calc(6.44 * var(--u)); border-radius: calc(0.1 * var(--u)) calc(0.1 * var(--u)) 0 0; }
:is(#mbsv, .mbsv-xpop) .feature__lead { left: calc(0.53 * var(--u)); top: calc(0.76 * var(--u)); font-size: calc(0.99 * var(--u)); font-weight: 800; line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .feature__lead small { display: block; margin: 0 0 calc(0.3 * var(--u)) calc(0.02 * var(--u)); font-size: calc(0.49 * var(--u)); font-weight: 800; }
:is(#mbsv, .mbsv-xpop) .feature--1 .feature__body { left: calc(0.54 * var(--u)); top: calc(3 * var(--u)); width: calc(5.6 * var(--u)); padding-top: calc(0.35 * var(--u)); border-top: calc(0.025 * var(--u)) solid #fff; font-size: calc(0.3 * var(--u)); letter-spacing: 0.03em; line-height: calc(0.64 * var(--u)); padding-left: calc(0.04 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--2 .feature__photo { left: calc(-0.29 * var(--u)); top: calc(6.45 * var(--u)); width: calc(7.3 * var(--u)); height: calc(4.09 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--2 .feature__bars { top: calc(9.98 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--2 .feature__body { left: calc(1.15 * var(--u)); top: calc(12.24 * var(--u)); font-size: calc(0.295 * var(--u)); line-height: calc(0.53 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--3 .feature__photo { left: calc(0.83 * var(--u)); top: calc(15.51 * var(--u)); width: calc(7.29 * var(--u)); height: calc(3.62 * var(--u)); object-position: 50% 62%; }
:is(#mbsv, .mbsv-xpop) .feature--3 .feature__bars { top: calc(18.67 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--3 .feature__body { left: calc(1.15 * var(--u)); top: calc(21.01 * var(--u)); line-height: calc(0.555 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .solution { padding: calc(0.74 * var(--u)) 0 0; background: #f6f8f8; text-align: center; }
:is(#mbsv, .mbsv-xpop) .solution__eyebrow { position: relative; width: calc(2.47 * var(--u)); height: calc(0.71 * var(--u)); margin: 0 auto; background: #dde024; color: #fff; font-size: calc(0.412 * var(--u)); font-weight: 800; line-height: calc(0.7 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .solution__eyebrow::after { content: ""; position: absolute; left: 50%; top: 100%; border: solid transparent; border-width: calc(0.2 * var(--u)) calc(0.18 * var(--u)) 0; border-top-color: #dde024; transform: translateX(-50%); }
:is(#mbsv, .mbsv-xpop) .solution__headline { margin-top: calc(0.47 * var(--u)); font-weight: 800; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .solution__headline span { display: block; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .solution__headline span::after { content: ""; display: block; height: calc(0.03 * var(--u)); margin: calc(0.16 * var(--u)) auto 0; background: #173b4d; }
:is(#mbsv, .mbsv-xpop) .solution__h1 { color: var(--deep); font-size: calc(0.675 * var(--u)); letter-spacing: -0.02em; }
:is(#mbsv, .mbsv-xpop) .solution__h1::after { width: calc(7.54 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .solution__h2 { margin-top: calc(0.165 * var(--u)); color: #12303f; font-size: calc(0.9 * var(--u)); letter-spacing: -0.02em; }
:is(#mbsv, .mbsv-xpop) .solution__h2::after { width: calc(3.97 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .solution__headline .solution__h2::after { margin-top: calc(0.15 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .solution__lead { margin-top: calc(0.25 * var(--u)); font-size: calc(0.3 * var(--u)); font-weight: 700; letter-spacing: 0.03em; line-height: calc(0.36 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .solution__labels { display: flex; align-items: center; gap: calc(0.12 * var(--u)); margin: calc(0.58 * var(--u)) 0 0 calc(0.99 * var(--u)); font-size: calc(0.28 * var(--u)); font-weight: 700; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .solution__labels li:not(.solution__wo) { height: calc(0.55 * var(--u)); padding: 0 calc(0.2 * var(--u)); background: #7c7f7f; color: #fff; line-height: calc(0.53 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .solution__wo { margin-left: calc(0.04 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .solution__visual { position: relative; height: calc(11.6 * var(--u)); margin-top: calc(0.6 * var(--u)); overflow: hidden; background: #031a22; }
:is(#mbsv, .mbsv-xpop) .solution__photo { width: 100%; height: 100%; object-fit: cover; }
:is(#mbsv, .mbsv-xpop) .solution__visual::after { content: ""; position: absolute; left: 0; right: 0; top: calc(6.9 * var(--u)); bottom: 0; background: linear-gradient(180deg, rgba(3, 24, 32, 0) 0%, rgba(3, 24, 32, 0.5) 34%, rgba(3, 24, 32, 0.86) 100%); }
:is(#mbsv, .mbsv-xpop) .solution__answer { position: absolute; left: 0; top: calc(8.4 * var(--u)); z-index: 1; width: 100%; color: #fff; }
:is(#mbsv, .mbsv-xpop) .solution__brand { position: relative; display: block; width: calc(4.95 * var(--u)); height: calc(0.98 * var(--u)); margin: 0 auto; }
:is(#mbsv, .mbsv-xpop) .solution__brand img { position: absolute; left: 0; top: 0; width: calc(4.15 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .solution__brand i { position: absolute; left: calc(4.33 * var(--u)); top: calc(0.15 * var(--u)); font-size: calc(0.5 * var(--u)); font-weight: 800; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .solution__answer strong { display: block; margin-top: calc(0.36 * var(--u)); font-size: calc(0.7 * var(--u)); font-weight: 800; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .compare { padding: calc(0.9 * var(--u)) calc(0.38 * var(--u)) calc(0.9 * var(--u)); background: #f8fbfb; }
:is(#mbsv, .mbsv-xpop) .compare__table { width: calc(8.28 * var(--u)); border-collapse: collapse; table-layout: fixed; text-align: center; }
:is(#mbsv, .mbsv-xpop) .compare__table th, :is(#mbsv, .mbsv-xpop) .compare__table td { padding: 0; vertical-align: middle; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .c-head { height: calc(1.14 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .c-head--label { width: calc(1.77 * var(--u)); padding: calc(0.44 * var(--u)) 0 0 !important; color: #111; font-size: calc(0.303 * var(--u)); font-weight: 800; }
:is(#mbsv, .mbsv-xpop) .c-head--m { width: calc(3.89 * var(--u)); background: #1589ad; box-shadow: 0 0 calc(0.12 * var(--u)) rgba(20, 80, 100, 0.3); }
:is(#mbsv, .mbsv-xpop) .c-head--m img { width: calc(3.15 * var(--u)); height: auto; margin: 0 auto; }
:is(#mbsv, .mbsv-xpop) .c-head--o { vertical-align: bottom !important; }
:is(#mbsv, .mbsv-xpop) .c-head--o span { display: grid; place-items: center; height: calc(0.72 * var(--u)); background: #888b8d; color: #fff; font-size: calc(0.309 * var(--u)); font-weight: 800; }
:is(#mbsv, .mbsv-xpop) .compare__table tbody th, :is(#mbsv, .mbsv-xpop) .compare__table tbody td { height: calc(1.695 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .compare__table tbody span { display: grid; place-items: center; height: calc(1.57 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .compare__table tbody th span { background: var(--navy-panel); color: #fff; font-size: calc(0.29 * var(--u)); font-weight: 800; line-height: calc(0.45 * var(--u)); padding-bottom: 0; }
:is(#mbsv, .mbsv-xpop) .compare__table tbody tr:nth-child(-n + 2) th span { padding-bottom: calc(0.12 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .c-m { padding: 0 calc(0.08 * var(--u)) !important; border: solid #1589ad; border-width: 0 calc(0.03 * var(--u)); background: #fff; box-shadow: 0 0 calc(0.12 * var(--u)) rgba(20, 80, 100, 0.18); clip-path: inset(0 calc(-0.2 * var(--u))); }
:is(#mbsv, .mbsv-xpop) tr:last-child .c-m { border-bottom-width: calc(0.03 * var(--u)); clip-path: inset(0 calc(-0.2 * var(--u)) calc(-0.2 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .c-m span { background: var(--pale); color: #132d3e; font-size: calc(0.325 * var(--u)); font-weight: 800; letter-spacing: 0.02em; line-height: calc(0.5 * var(--u)); padding-bottom: calc(0.2 * var(--u)); }
:is(#mbsv, .mbsv-xpop) tr:nth-child(even) .c-m span { background: #eefafc; }
:is(#mbsv, .mbsv-xpop) .c-m--big span { font-family: inherit; font-size: calc(0.515 * var(--u)); font-weight: 800; letter-spacing: 0; padding-bottom: calc(0.25 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .c-o { background: #f3f5f5; padding: 0 calc(0.16 * var(--u)) !important; }
:is(#mbsv, .mbsv-xpop) .c-o span { height: calc(1.695 * var(--u)) !important; border-bottom: calc(0.01 * var(--u)) solid #d3d9dd; color: #7d8284; font-size: calc(0.262 * var(--u)); font-weight: 500; letter-spacing: 0; line-height: calc(0.42 * var(--u)); white-space: nowrap; padding-bottom: calc(0.1 * var(--u)); }
:is(#mbsv, .mbsv-xpop) tr:last-child .c-o span { border-bottom: 0; }
:is(#mbsv, .mbsv-xpop) .compare__notes { margin: calc(0.14 * var(--u)) 0 0 calc(0.12 * var(--u)); color: #666b6e; font-size: calc(0.1935 * var(--u)); line-height: calc(0.335 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .points { padding-bottom: calc(0.73 * var(--u)); background: #f9fbfb; color: #17313f; }
:is(#mbsv, .mbsv-xpop) .points__hero { position: relative; height: calc(5.67 * var(--u)); overflow: hidden; }
:is(#mbsv, .mbsv-xpop) .points__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 28, 22, 0.55) 0%, rgba(40, 28, 22, 0) 12%, rgba(16, 43, 58, 0) 50%, rgba(16, 43, 58, 0.82) 100%); }
:is(#mbsv, .mbsv-xpop) .points__hero > img:first-child { width: 100%; height: 100%; object-fit: cover; }
:is(#mbsv, .mbsv-xpop) .points__logo { position: absolute; left: calc(1.28 * var(--u)); top: calc(3.93 * var(--u)); z-index: 1; width: calc(6.5 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .points__headline { margin-top: calc(0.07 * var(--u)); color: #fff; font-size: calc(0.455 * var(--u)); font-weight: 800; letter-spacing: 0.04em; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .points__headline span { display: block; width: calc(7.91 * var(--u)); height: calc(0.78 * var(--u)); margin: 0 auto; background: #132d3e; line-height: calc(0.75 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .points__headline span + span { width: calc(6.29 * var(--u)); margin-top: calc(0.12 * var(--u)); font-size: calc(0.49 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .point { margin: calc(0.71 * var(--u)) calc(0.46 * var(--u)) 0 calc(0.47 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .point + .point { margin-top: calc(0.98 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .point + .point + .point { margin-top: calc(0.84 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .point__head { display: flex; align-items: center; height: calc(0.8 * var(--u)); border-bottom: calc(0.03 * var(--u)) solid #132d3e; }
:is(#mbsv, .mbsv-xpop) .point__no { flex: none; align-self: stretch; width: calc(2.04 * var(--u)); display: grid; place-items: center; background: #132d3e; color: #fff; font-family: var(--latin); font-size: calc(0.42 * var(--u)); font-weight: 700; line-height: 1; padding-right: calc(0.06 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .point__head h3 { margin-left: calc(0.19 * var(--u)); font-size: calc(0.52 * var(--u)); font-weight: 800; letter-spacing: 0; line-height: 1; white-space: nowrap; transform: translateY(calc(-0.07 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .point__photo { position: relative; margin: calc(0.02 * var(--u)) calc(0.02 * var(--u)) 0; border: calc(0.025 * var(--u)) solid #132d3e; }
:is(#mbsv, .mbsv-xpop) .point__photo img { width: 100%; height: auto; }
:is(#mbsv, .mbsv-xpop) .point__body { margin: calc(0.34 * var(--u)) 0 0 calc(0.29 * var(--u)); font-size: calc(0.4 * var(--u)); font-weight: 600; letter-spacing: 0.005em; line-height: calc(0.62 * var(--u)); white-space: nowrap; transform: translateY(calc(0.02 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .point + .point + .point .point__body { margin-top: calc(0.39 * var(--u)); transform: translateY(calc(0.07 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .point + .point .point__body { transform: translateY(calc(0.04 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .point__labels { display: flex; align-items: center; gap: calc(0.16 * var(--u)); margin: calc(0.36 * var(--u)) 0 0 calc(0.28 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .tag { height: calc(0.71 * var(--u)); display: grid; place-items: center; font-size: calc(0.395 * var(--u)); font-weight: 800; line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .tag--line { width: calc(2.2 * var(--u)); border: calc(0.025 * var(--u)) solid var(--teal); background: #f3fcfd; color: var(--teal); }
:is(#mbsv, .mbsv-xpop) .tag--wide { width: calc(4.29 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .tag--fill { width: calc(2.26 * var(--u)); height: calc(0.69 * var(--u)); background: var(--teal); color: #fff; font-size: calc(0.4 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .tag--text { margin-left: calc(0.08 * var(--u)); font-size: calc(0.36 * var(--u)); font-weight: 600; }
:is(#mbsv, .mbsv-xpop) .point__badge { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-family: inherit; font-weight: 800; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .point__badge small { font-family: var(--sans); font-weight: 700; }
:is(#mbsv, .mbsv-xpop) .point__badge--teal { left: calc(0.27 * var(--u)); top: calc(1.16 * var(--u)); width: calc(1.87 * var(--u)); height: calc(1.87 * var(--u)); background: var(--teal); font-size: calc(0.5 * var(--u)); padding-bottom: calc(0.16 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .point__badge--teal small { margin-bottom: calc(0.17 * var(--u)); font-size: calc(0.315 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .point__badge--gold { left: calc(1.64 * var(--u)); top: calc(2.33 * var(--u)); width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); background: #dcb767; font-size: calc(0.39 * var(--u)); padding-bottom: calc(0.19 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .point__badge--gold small { margin-bottom: calc(0.15 * var(--u)); font-size: calc(0.285 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .points__closing { width: calc(7.57 * var(--u)); margin: calc(0.44 * var(--u)) auto 0; padding-top: calc(0.25 * var(--u)); border-top: calc(0.02 * var(--u)) solid #c9e8ee; line-height: 1; text-align: center; }
:is(#mbsv, .mbsv-xpop) .points__closing span { display: block; color: var(--teal); font-size: calc(0.315 * var(--u)); font-weight: 400; }
:is(#mbsv, .mbsv-xpop) .points__closing strong { display: block; margin-top: calc(0.21 * var(--u)); font-size: calc(0.32 * var(--u)); font-weight: 800; letter-spacing: 0; }
:is(#mbsv, .mbsv-xpop) .flavors { padding-bottom: calc(0.54 * var(--u)); background: #f9fbfb; color: #17313f; }
:is(#mbsv, .mbsv-xpop) .flavors__hero { position: relative; height: calc(3.3 * var(--u)); border-bottom: calc(0.08 * var(--u)) solid #10283a; }
:is(#mbsv, .mbsv-xpop) .flavors__hero img { width: 100%; height: 100%; object-fit: cover; }
:is(#mbsv, .mbsv-xpop) .flavors__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 28, 40, 0.42) 0%, rgba(8, 28, 40, 0.16) 58%, rgba(8, 28, 40, 0.3) 100%); }
:is(#mbsv, .mbsv-xpop) .flavors__hero h2 { position: absolute; z-index: 1; left: 0; top: calc(0.91 * var(--u)); width: 100%; color: #fff; font-family: var(--latin); font-size: calc(0.98 * var(--u)); font-weight: 800; line-height: 1; text-align: center; }
:is(#mbsv, .mbsv-xpop) .flavors__hero h2 span { display: inline-block; transform: scaleY(1.1); transform-origin: 50% 85%; }
:is(#mbsv, .mbsv-xpop) .flavors__sub { margin-top: calc(0.37 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .flavors__sub span { display: block; width: calc(7.57 * var(--u)); height: calc(0.82 * var(--u)); margin: 0 auto; background: #132d3e; color: #fff; font-size: calc(0.455 * var(--u)); font-weight: 800; line-height: calc(0.78 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .flavors__brand, :is(#mbsv, .mbsv-xpop) .flavor__brand { color: #1d86a6; font-family: var(--latin); font-weight: 700; line-height: 1; font-size: calc(0.27 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .flavors__brand { margin-top: calc(0.24 * var(--u)); font-size: calc(0.29 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .flavor { position: relative; height: calc(15.23 * var(--u)); margin: calc(0.63 * var(--u)) calc(0.24 * var(--u)) 0 calc(0.25 * var(--u)); border: calc(0.02 * var(--u)) solid #c5dde3; border-bottom: calc(0.04 * var(--u)) solid var(--accent); background: #fff; }
:is(#mbsv, .mbsv-xpop) .flavors__brand + .flavor { margin-top: calc(0.62 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .flavor__banner { width: 100%; height: calc(3.9 * var(--u)); object-fit: cover; border-bottom: calc(0.12 * var(--u)) solid var(--accent); box-sizing: content-box; }
:is(#mbsv, .mbsv-xpop) .flavor__no { position: absolute; left: calc(0.19 * var(--u)); top: calc(0.19 * var(--u)); width: calc(1.78 * var(--u)); height: calc(0.79 * var(--u)); display: grid; place-items: center; background: #10283a; color: #fff; font-family: var(--latin); font-size: calc(0.46 * var(--u)); font-weight: 800; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .flavor__pkg, :is(#mbsv, .mbsv-xpop) .flavor__device { position: absolute; height: auto; }
:is(#mbsv, .mbsv-xpop) .flavor__pkg { left: calc(5.25 * var(--u)); top: calc(2.77 * var(--u)); width: calc(1.86 * var(--u)); filter: drop-shadow(calc(0.04 * var(--u)) calc(0.08 * var(--u)) calc(0.1 * var(--u)) rgba(0, 0, 0, 0.3)); }
:is(#mbsv, .mbsv-xpop) .flavor__device { left: calc(7.35 * var(--u)); top: calc(3.87 * var(--u)); width: calc(0.9 * var(--u)); filter: drop-shadow(calc(0.04 * var(--u)) calc(0.08 * var(--u)) calc(0.1 * var(--u)) rgba(0, 0, 0, 0.3)); }
:is(#mbsv, .mbsv-xpop) .flavor__text { padding: calc(0.64 * var(--u)) 0 0 calc(0.41 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .flavor__brand { font-size: calc(0.28 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .flavor__en { margin: calc(0.13 * var(--u)) 0 0 calc(-0.03 * var(--u)); font-family: var(--latin); font-size: calc(0.784 * var(--u)); font-weight: 800; letter-spacing: -0.01em; line-height: calc(0.83 * var(--u)); transform: scaleX(0.91); transform-origin: left; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .flavor__jp { margin-top: calc(0.18 * var(--u)); padding-bottom: calc(0.26 * var(--u)); width: calc(4.6 * var(--u)); border-bottom: calc(0.03 * var(--u)) solid var(--accent); color: var(--accent); font-size: calc(0.32 * var(--u)); font-weight: 800; line-height: calc(0.36 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .flavor__tagline { margin-top: calc(0.21 * var(--u)); font-size: calc(0.4 * var(--u)); font-weight: 800; line-height: calc(0.54 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .flavor__body { margin-top: calc(0.415 * var(--u)); font-size: calc(0.315 * var(--u)); font-weight: 600; letter-spacing: 0.02em; line-height: calc(0.55 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .flavor__spec { position: absolute; left: calc(0.41 * var(--u)); right: calc(0.42 * var(--u)); top: calc(11.89 * var(--u)); border-top: calc(0.02 * var(--u)) solid #c7e6ea; }
:is(#mbsv, .mbsv-xpop) .flavor__spec h4 { margin: calc(0.2 * var(--u)) 0 calc(0.18 * var(--u)); font-size: calc(0.33 * var(--u)); font-weight: 800; line-height: calc(0.4 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .flavor__spec h4 span { font-family: var(--latin); font-weight: 700; }
:is(#mbsv, .mbsv-xpop) .flavor__spec dl { background: #1c1f20; color: #fff; }
:is(#mbsv, .mbsv-xpop) .flavor__spec dl div { display: flex; align-items: center; height: calc(0.76 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .flavor__spec dl div + div { border-top: calc(0.015 * var(--u)) solid #6d7374; }
:is(#mbsv, .mbsv-xpop) .flavor__spec dt { width: calc(3.9 * var(--u)); padding-left: calc(0.31 * var(--u)); font-size: calc(0.33 * var(--u)); font-weight: 800; line-height: 1; transform: translateY(calc(-0.06 * var(--u))); }
:is(#mbsv, .mbsv-xpop) .stars { color: #b9bfc0; font-size: calc(0.495 * var(--u)); letter-spacing: calc(0.165 * var(--u)); line-height: 1; transform: translateY(calc(-0.04 * var(--u))); padding-left: calc(0.07 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .stars b { color: #fff; font-weight: 400; }
:is(#mbsv, .mbsv-xpop) .flavors__foot { margin-top: calc(0.53 * var(--u)); color: #4a6470; font-size: calc(0.27 * var(--u)); font-weight: 700; letter-spacing: 0; line-height: calc(0.4 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .flavors__foot i { margin: 0 calc(0.13 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .flavors__note { margin-top: calc(0.12 * var(--u)); color: #777d80; font-size: calc(0.203 * var(--u)); font-weight: 500; line-height: calc(0.3 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .flavor__text .flavor__brand { font-size: calc(0.27 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--2 .feature__bars span { padding-left: calc(0.39 * var(--u)); font-size: calc(0.62 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--2 .feature__bars span + span { padding-left: calc(0.42 * var(--u)); font-size: calc(0.595 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--3 .feature__bars span { padding-left: calc(0.37 * var(--u)); font-size: calc(0.63 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .feature--3 .feature__bars span + span { padding-left: calc(0.47 * var(--u)); font-size: calc(0.6 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .compare__table tbody tr:nth-child(n + 3) th span { font-size: calc(0.32 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cta__lead { color: #e2361b; font-size: calc(0.34 * var(--u)); font-weight: 900; letter-spacing: 0.04em; line-height: calc(0.44 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cta__lead b { display: inline-block; margin-right: calc(0.1 * var(--u)); padding: 0 calc(0.12 * var(--u)); border-radius: calc(0.06 * var(--u)); background: #e2361b; color: #fff; font-size: calc(0.26 * var(--u)); line-height: calc(0.4 * var(--u)); vertical-align: calc(0.03 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cta__lead::before, :is(#mbsv, .mbsv-xpop) .cta__lead::after { display: inline-block; width: calc(0.035 * var(--u)); height: calc(0.38 * var(--u)); margin: 0 calc(0.2 * var(--u)); background: #e2361b; vertical-align: calc(-0.07 * var(--u)); content: ""; }
:is(#mbsv, .mbsv-xpop) .cta__lead::before { transform: rotate(-28deg); }
:is(#mbsv, .mbsv-xpop) .cta__lead::after { transform: rotate(28deg); }
:is(#mbsv, .mbsv-xpop) .cta__btn { position: relative; display: block; width: calc(8 * var(--u)); height: calc(2.2 * var(--u)); margin: calc(0.5 * var(--u)) auto 0; border-radius: calc(1.1 * var(--u)); background: #fff; box-shadow: 0 calc(0.12 * var(--u)) calc(0.3 * var(--u)) rgba(18, 140, 62, 0.35); color: #fff; text-decoration: none; transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
:is(#mbsv, .mbsv-xpop) .cta__btn-face { position: absolute; inset: calc(0.07 * var(--u)); overflow: hidden; border-radius: calc(1.03 * var(--u)); background: linear-gradient(180deg, #4fdc82 0%, #1fbf5c 50%, #10a046 100%); box-shadow: inset 0 calc(-0.12 * var(--u)) 0 #0b7a33; }
:is(#mbsv, .mbsv-xpop) .cta__btn-face::before { position: absolute; left: calc(0.4 * var(--u)); right: calc(0.4 * var(--u)); top: calc(0.05 * var(--u)); height: 44%; border-radius: calc(0.8 * var(--u)) calc(0.8 * var(--u)) calc(1.2 * var(--u)) calc(1.2 * var(--u)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); content: ""; }
:is(#mbsv, .mbsv-xpop) .cta__btn-face::after { position: absolute; top: -20%; left: -30%; width: 18%; height: 140%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); transform: skewX(-20deg); animation: cta-glint 3.2s ease-in-out infinite; content: ""; }
@keyframes cta-glint { 0%, 62% { left: -30%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
:is(#mbsv, .mbsv-xpop) .cta__btn-face::after { animation: none; display: none; }
}
:is(#mbsv, .mbsv-xpop) .cta__btn-device { position: absolute; left: calc(0.52 * var(--u)); top: calc(-0.42 * var(--u)); bottom: calc(0.1 * var(--u)); width: calc(0.74 * var(--u)); z-index: 1; overflow: hidden; filter: drop-shadow(calc(0.03 * var(--u)) calc(0.03 * var(--u)) calc(0.04 * var(--u)) rgba(0, 0, 0, 0.35)); }
:is(#mbsv, .mbsv-xpop) .cta__btn-device img { display: block; width: 100%; height: auto; }
:is(#mbsv, .mbsv-xpop) .cta__btn-label { position: absolute; left: calc(1.3 * var(--u)); right: calc(1 * var(--u)); top: calc(0.07 * var(--u)); bottom: calc(0.19 * var(--u)); z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(0.44 * var(--u)); font-weight: 900; letter-spacing: 0; line-height: 1.1; text-shadow: 0 calc(0.02 * var(--u)) calc(0.04 * var(--u)) rgba(0, 80, 30, 0.45); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .cta__btn-label small { margin-bottom: calc(0.08 * var(--u)); padding: calc(0.04 * var(--u)) calc(0.24 * var(--u)); border-radius: calc(0.22 * var(--u)); background: #fff; color: #0f9a44; font-size: calc(0.28 * var(--u)); font-weight: 800; letter-spacing: 0.06em; text-shadow: none; }
:is(#mbsv, .mbsv-xpop) .cta__btn-main { display: block; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .cta__btn-main b { margin: 0 calc(0.03 * var(--u)); font-family: var(--price); font-size: calc(0.78 * var(--u)); font-weight: 800; letter-spacing: 0.005em; line-height: calc(0.7 * var(--u)); vertical-align: calc(-0.03 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cta__btn::before { position: absolute; right: calc(0.4 * var(--u)); top: calc(50% - calc(0.05 * var(--u))); width: calc(0.62 * var(--u)); height: calc(0.62 * var(--u)); z-index: 1; border-radius: 50%; background: #fff; box-shadow: 0 calc(0.02 * var(--u)) calc(0.04 * var(--u)) rgba(0, 80, 30, 0.35); transform: translateY(-50%); content: ""; }
:is(#mbsv, .mbsv-xpop) .cta__btn::after { position: absolute; right: calc(0.66 * var(--u)); top: calc(50% - calc(0.05 * var(--u))); width: calc(0.16 * var(--u)); height: calc(0.16 * var(--u)); z-index: 2; border: solid #0f9a44; border-width: calc(0.05 * var(--u)) calc(0.05 * var(--u)) 0 0; transform: translateY(-50%) rotate(45deg); content: ""; }
:is(#mbsv, .mbsv-xpop) .cta__btn:hover { transform: translateY(calc(0.03 * var(--u))); box-shadow: 0 calc(0.06 * var(--u)) calc(0.18 * var(--u)) rgba(18, 140, 62, 0.35); }
:is(#mbsv, .mbsv-xpop) .cta__btn:focus-visible { outline: calc(0.04 * var(--u)) solid var(--copper); outline-offset: calc(0.05 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cta__note { margin-top: calc(0.28 * var(--u)); color: #4a6470; font-size: calc(0.22 * var(--u)); font-weight: 600; letter-spacing: 0.03em; line-height: calc(0.3 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .closing { padding: calc(0.7 * var(--u)) 0 calc(0.9 * var(--u)); background: linear-gradient(180deg, #f9fbfb 0%, #e6f1f6 100%); text-align: center; }
:is(#mbsv, .mbsv-xpop) .closing__eyebrow { width: fit-content; margin: 0 auto; padding: 0 calc(0.3 * var(--u)); background: #132d3e; color: #fff; font-size: calc(0.3 * var(--u)); font-weight: 800; letter-spacing: 0.04em; line-height: calc(0.56 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .closing__offer { margin: calc(0.28 * var(--u)) 0 0; font-size: calc(0.34 * var(--u)); font-weight: 800; line-height: calc(0.5 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .closing__price small { font-size: calc(0.22 * var(--u)); font-weight: 700; color: var(--navy); }
:is(#mbsv, .mbsv-xpop) .closing__price { margin: calc(0.02 * var(--u)) 0 calc(0.3 * var(--u)); color: var(--teal-dark); font-size: calc(0.4 * var(--u)); font-weight: 800; line-height: calc(0.9 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .closing__price b { margin: 0 calc(0.04 * var(--u)) 0 calc(0.12 * var(--u)); font-family: var(--price); font-size: calc(0.96 * var(--u)); font-weight: 800; vertical-align: calc(-0.04 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .starter__packs { filter: drop-shadow(0 calc(0.08 * var(--u)) calc(0.1 * var(--u)) rgba(10, 40, 60, 0.28)); }
:is(#mbsv, .mbsv-xpop) .problem__devices { position: absolute; left: calc(4.87 * var(--u)); top: calc(1.522 * var(--u)); width: calc(4.2 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .fcta { position: sticky; bottom: 0; z-index: 50; width: calc(9.07 * var(--u)); height: calc(3.36 * var(--u)); margin: calc(-3.36 * var(--u)) auto 0; padding: calc(0.46 * var(--u)) calc(0.5 * var(--u)) 0; pointer-events: none; }
:is(#mbsv, .mbsv-xpop) .fcta .cta__btn { margin: 0 auto; opacity: 0; transform: translateY(140%); transition: transform 250ms ease-out, opacity 250ms ease-out; }
:is(#mbsv, .mbsv-xpop) .fcta.is-on .cta__btn { opacity: 1; transform: none; pointer-events: auto; }
:is(#mbsv, .mbsv-xpop) .fcta.is-on .cta__btn:hover { transform: translateY(calc(0.03 * var(--u))); }
@media (prefers-reduced-motion: reduce) {
:is(#mbsv, .mbsv-xpop) .fcta .cta__btn { transition: none; }
}
:is(#mbsv, .mbsv-xpop) .xpop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: calc(0.12 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .xpop[hidden] { display: none; }
:is(#mbsv, .mbsv-xpop) .xpop__backdrop { position: absolute; inset: 0; background: rgba(8, 24, 34, 0.62); opacity: 0; transition: opacity 200ms ease-out; }
:is(#mbsv, .mbsv-xpop) .xpop__panel { position: relative; width: calc(8.6 * var(--u)); padding: calc(0.56 * var(--u)) calc(0.3 * var(--u)) calc(0.3 * var(--u)); border-radius: calc(0.3 * var(--u)); background: linear-gradient(180deg, #f9fbfb 0%, #e6f1f6 100%); box-shadow: 0 calc(0.2 * var(--u)) calc(0.6 * var(--u)) rgba(0, 0, 0, 0.3); color: var(--navy); text-align: center; opacity: 0; scale: var(--xpop-scale, 1); translate: 0 calc(0.2 * var(--u)); transition: opacity 200ms ease-out, translate 200ms ease-out; }
:is(#mbsv, .mbsv-xpop) .xpop.is-open .xpop__backdrop, :is(#mbsv, .mbsv-xpop) .xpop.is-open .xpop__panel { opacity: 1; }
:is(#mbsv, .mbsv-xpop) .xpop.is-open .xpop__panel { translate: none; }
:is(#mbsv, .mbsv-xpop) .xpop__close { position: absolute; right: calc(0.18 * var(--u)); top: calc(0.18 * var(--u)); width: calc(0.58 * var(--u)); height: calc(0.58 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 calc(0.02 * var(--u)) calc(0.08 * var(--u)) rgba(10, 40, 60, 0.25); cursor: pointer; }
:is(#mbsv, .mbsv-xpop) .xpop__close::before, :is(#mbsv, .mbsv-xpop) .xpop__close::after { position: absolute; left: 50%; top: 50%; width: calc(0.28 * var(--u)); height: calc(0.04 * var(--u)); border-radius: calc(0.02 * var(--u)); background: #132d3e; content: ""; }
:is(#mbsv, .mbsv-xpop) .xpop__close::before { transform: translate(-50%, -50%) rotate(45deg); }
:is(#mbsv, .mbsv-xpop) .xpop__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
:is(#mbsv, .mbsv-xpop) .xpop__eyebrow { color: #132d3e; font-size: calc(0.46 * var(--u)); font-weight: 900; letter-spacing: 0.04em; line-height: calc(0.6 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .xpop .cta__lead { margin-top: calc(0.14 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .xpop__packs { display: block; width: calc(4.6 * var(--u)); height: auto; margin: calc(0.1 * var(--u)) auto 0; filter: drop-shadow(0 calc(0.06 * var(--u)) calc(0.08 * var(--u)) rgba(10, 40, 60, 0.25)); }
:is(#mbsv, .mbsv-xpop) .xpop__price { margin-top: calc(0.04 * var(--u)); color: var(--teal-dark); font-size: calc(0.36 * var(--u)); font-weight: 800; line-height: calc(0.96 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .xpop__price b { margin: 0 calc(0.04 * var(--u)) 0 calc(0.1 * var(--u)); font-family: var(--price); font-size: calc(1.02 * var(--u)); font-weight: 800; vertical-align: calc(-0.04 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .xpop__price small { color: var(--navy); font-size: calc(0.22 * var(--u)); font-weight: 700; }
:is(#mbsv, .mbsv-xpop) .xpop .cta__btn { margin-top: calc(0.48 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .xpop .cta__note { margin-top: calc(0.2 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .xpop__later { margin-top: calc(0.12 * var(--u)); padding: calc(0.06 * var(--u)) calc(0.2 * var(--u)); border: 0; background: none; color: #4a6470; font: inherit; font-size: calc(0.24 * var(--u)); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
:is(#mbsv, .mbsv-xpop) .xpop__backdrop, :is(#mbsv, .mbsv-xpop) .xpop__panel { transition: none; }
}
/* ---- sections-12-19.css ---- */
:is(#mbsv, .mbsv-xpop) { --ink: #17313f; --slate: #6f7b82; --red: #d93a50; --pink: #f85b77; --grotesk: "Inter", "Helvetica Neue", Arial, "Hiragino Sans", sans-serif; }
:is(#mbsv, .mbsv-xpop) .life { height: calc(35.74 * var(--u)); background: var(--slate); color: #fff; }
:is(#mbsv, .mbsv-xpop) .life::before { position: absolute; inset: 0 0 auto; height: calc(0.4 * var(--u)); background: #f4f8f9; content: ""; }
:is(#mbsv, .mbsv-xpop) .life > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .life__hero { left: 0; top: calc(0.4 * var(--u)); width: 100%; height: calc(6.3 * var(--u)); object-fit: cover; border-bottom: calc(0.05 * var(--u)) solid #1c7d99; }
:is(#mbsv, .mbsv-xpop) .life__headline { left: calc(0.86 * var(--u)); top: calc(7.2 * var(--u)); font-weight: 800; line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .life__headline span { display: block; width: calc(6.59 * var(--u)); height: calc(1.08 * var(--u)); padding-left: calc(0.32 * var(--u)); background: #fff; color: #132d3e; font-size: calc(0.662 * var(--u)); letter-spacing: 0; line-height: calc(1.06 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .life__headline span + span { width: calc(5.67 * var(--u)); height: calc(1.17 * var(--u)); margin-top: calc(0.09 * var(--u)); padding-left: calc(0.12 * var(--u)); color: var(--teal); font-size: calc(0.78 * var(--u)); letter-spacing: 0; line-height: calc(1.14 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .life__vertical { left: calc(1.315 * var(--u)); top: calc(10.93 * var(--u)); width: calc(2.44 * var(--u)); height: calc(2.9 * var(--u)); writing-mode: vertical-rl; font-size: calc(0.4 * var(--u)); font-weight: 800; letter-spacing: 0.13em; line-height: calc(0.61 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .life__zero { top: calc(10.4 * var(--u)); width: calc(2 * var(--u)); height: calc(3.66 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .life__zero--1 { left: calc(4.12 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .life__zero--2 { left: calc(6.65 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .life__zero > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .life__zero-label { left: 0; top: 0; width: 100%; font-size: calc(0.42 * var(--u)); font-weight: 800; line-height: calc(0.6 * var(--u)); text-align: center; white-space: nowrap; transform: rotate(-6deg); }
:is(#mbsv, .mbsv-xpop) .life__zero--2 .life__zero-label { transform: rotate(6deg); }
:is(#mbsv, .mbsv-xpop) .life__zero-ring { left: 0; top: calc(0.7 * var(--u)); width: calc(2 * var(--u)); height: calc(2.96 * var(--u)); border: solid #fff; border-width: calc(0.44 * var(--u)) calc(0.56 * var(--u)); border-radius: calc(1 * var(--u)) / calc(1.28 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .life__zero-kana { left: calc(0.83 * var(--u)); top: calc(1.72 * var(--u)); writing-mode: vertical-rl; font-size: calc(0.34 * var(--u)); font-weight: 800; letter-spacing: 0.08em; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .life__scenes { left: 0; top: calc(14.07 * var(--u)); width: 100%; padding-top: calc(0.36 * var(--u)); border-top: calc(0.02 * var(--u)) solid #fff; text-align: center; }
:is(#mbsv, .mbsv-xpop) .scene { height: calc(6.775 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .scene img { width: calc(7.66 * var(--u)); height: calc(4.09 * var(--u)); margin: 0 auto; object-fit: cover; border: calc(0.025 * var(--u)) solid #eef3f4; box-shadow: 0 calc(0.06 * var(--u)) calc(0.2 * var(--u)) rgba(20, 30, 36, 0.35); }
:is(#mbsv, .mbsv-xpop) .scene h3 { width: calc(6.43 * var(--u)); margin: calc(0.2 * var(--u)) auto 0; padding-bottom: calc(0.14 * var(--u)); border-bottom: calc(0.015 * var(--u)) solid #fff; font-size: calc(0.5 * var(--u)); font-weight: 800; letter-spacing: 0.01em; line-height: calc(0.54 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .scene p { margin-top: calc(0.13 * var(--u)); font-size: calc(0.27 * var(--u)); font-weight: 600; letter-spacing: 0.03em; line-height: calc(0.5 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .life__brand { left: calc(3.25 * var(--u)); top: calc(34.6 * var(--u)); width: calc(2.58 * var(--u)); padding-top: calc(0.3 * var(--u)); border-top: calc(0.015 * var(--u)) solid #fff; font-family: var(--latin); font-size: calc(0.27 * var(--u)); font-weight: 700; line-height: calc(0.3 * var(--u)); text-align: center; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .ana { height: calc(13.13 * var(--u)); background: #f6f9f9; color: #1c3040; }
:is(#mbsv, .mbsv-xpop) .ana > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .ana__photo { left: 0; top: 0; width: 100%; height: calc(8.06 * var(--u)); object-fit: cover; object-position: 55% 50%; border-bottom: calc(0.06 * var(--u)) solid #1d8faf; }
:is(#mbsv, .mbsv-xpop) .ana__headline { left: calc(0.44 * var(--u)); top: calc(0.38 * var(--u)); width: calc(1.84 * var(--u)); height: calc(7.02 * var(--u)); color: #fff; font-size: calc(0.5 * var(--u)); font-weight: 800; letter-spacing: 0.09em; line-height: calc(0.87 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .ana__headline span { position: absolute; top: 0; width: calc(0.87 * var(--u)); height: calc(6.79 * var(--u)); padding-top: calc(0.2 * var(--u)); background: #1a1e20; writing-mode: vertical-rl; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .ana__headline span:first-child { left: calc(0.97 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .ana__headline span + span { left: 0; top: calc(0.23 * var(--u)); width: calc(0.86 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .ana__headline em { color: var(--yellow); }
:is(#mbsv, .mbsv-xpop) .ana__report { left: calc(0.52 * var(--u)); top: calc(8.42 * var(--u)); width: calc(3.28 * var(--u)); height: calc(4.01 * var(--u)); overflow: hidden; border: calc(0.025 * var(--u)) solid #c9dadd; background: #fff; box-shadow: 0 calc(0.1 * var(--u)) calc(0.24 * var(--u)) rgba(40, 70, 80, 0.16); padding: calc(0.16 * var(--u)) calc(0.17 * var(--u)) 0; }
:is(#mbsv, .mbsv-xpop) .ana__report img { width: 100%; height: auto; }
:is(#mbsv, .mbsv-xpop) .ana__title { left: calc(4.24 * var(--u)); top: calc(8.5 * var(--u)); font-size: calc(0.355 * var(--u)); font-weight: 800; line-height: calc(0.44 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .ana__body { left: calc(4.24 * var(--u)); top: calc(9.13 * var(--u)); font-size: calc(0.29 * var(--u)); font-weight: 800; line-height: calc(0.585 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .cost { height: calc(18.42 * var(--u)); background: #f3f8f9; color: var(--ink); }
:is(#mbsv, .mbsv-xpop) .cost > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .cost__panel { left: calc(0.32 * var(--u)); top: calc(0.47 * var(--u)); width: calc(8.42 * var(--u)); height: calc(5.06 * var(--u)); overflow: hidden; border: calc(0.02 * var(--u)) solid #0b2230; background:
    linear-gradient(#69bcd3, #69bcd3) no-repeat,
    #0f2c3d; color: #fff; background: #0f2c3d; }
:is(#mbsv, .mbsv-xpop) .cost__panel::before, :is(#mbsv, .mbsv-xpop) .cost__panel::after { position: absolute; inset: 0; content: ""; }
:is(#mbsv, .mbsv-xpop) .cost__panel::before { background: #1987a9; clip-path: polygon(61.2% 0, 100% 0, 100% 100%, 65% 100%); }
:is(#mbsv, .mbsv-xpop) .cost__panel::after { background: #69bcd3; clip-path: polygon(98% 0, 100% 0, 100% 100%, 84% 100%); }
:is(#mbsv, .mbsv-xpop) .cost__panel > * { position: absolute; z-index: 1; }
:is(#mbsv, .mbsv-xpop) .cost__device { left: calc(4.4 * var(--u)); top: calc(-0.26 * var(--u)); width: calc(5.43 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .cost__eyebrow { left: calc(0.68 * var(--u)); top: calc(0.33 * var(--u)); font-family: var(--latin); font-size: calc(0.275 * var(--u)); font-weight: 500; line-height: calc(0.36 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cost__headline { left: calc(0.66 * var(--u)); top: calc(0.87 * var(--u)); font-size: calc(0.78 * var(--u)); font-weight: 800; letter-spacing: -0.04em; line-height: calc(1.1 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .cost__headline span { display: block; width: calc(3.85 * var(--u)); border-bottom: calc(0.03 * var(--u)) solid #7cc4dc; }
:is(#mbsv, .mbsv-xpop) .cost__headline span + span { width: calc(3.61 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cost__headline span:last-child { border-bottom: 0; }
:is(#mbsv, .mbsv-xpop) .cost__support { left: calc(0.32 * var(--u)); top: calc(5.53 * var(--u)); width: calc(8.42 * var(--u)); height: calc(1.97 * var(--u)); padding: calc(0.3 * var(--u)) 0 0 calc(0.78 * var(--u)); background: #fff; font-size: calc(0.447 * var(--u)); font-weight: 800; line-height: calc(0.7 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .cost__photo { left: calc(0.78 * var(--u)); top: calc(7.55 * var(--u)); width: calc(7.51 * var(--u)); height: calc(4.05 * var(--u)); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 81%, 50% 100%, 0 81%); }
:is(#mbsv, .mbsv-xpop) .cost__photo img { width: 100%; height: 100%; object-fit: cover; }
:is(#mbsv, .mbsv-xpop) .cost__photo p { position: absolute; left: calc(3.02 * var(--u)); top: calc(1.0 * var(--u)); font-weight: 800; line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .cost__photo p > * { display: block; }
:is(#mbsv, .mbsv-xpop) .cost__photo span { font-size: calc(0.43 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cost__photo strong { margin-top: calc(0.17 * var(--u)); font-size: calc(0.88 * var(--u)); font-weight: 800; letter-spacing: -0.02em; }
:is(#mbsv, .mbsv-xpop) .cost__photo small { margin: calc(0.24 * var(--u)) 0 0 calc(0.02 * var(--u)); font-size: calc(0.315 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cost__lower { left: calc(0.78 * var(--u)); top: calc(10.83 * var(--u)); z-index: -1; width: calc(7.51 * var(--u)); height: calc(7.59 * var(--u)); background: #eef7f8; }
:is(#mbsv, .mbsv-xpop) .cost { isolation: isolate; }
:is(#mbsv, .mbsv-xpop) .cost__lower > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .cost__sub { left: 0; top: calc(1.06 * var(--u)); width: 100%; font-size: calc(0.615 * var(--u)); font-weight: 800; line-height: calc(0.7 * var(--u)); text-align: center; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .cost__circle { left: calc(3.29 * var(--u)); top: calc(2.37 * var(--u)); width: calc(3.88 * var(--u)); height: calc(3.88 * var(--u)); border-radius: 50%; background: #a9d8e1; }
:is(#mbsv, .mbsv-xpop) .cost__puffs { left: calc(0.34 * var(--u)); top: calc(2.37 * var(--u)); width: calc(3.86 * var(--u)); height: calc(3.86 * var(--u)); border-radius: 50%; background: #1a8fb0; color: #fff; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .cost__puffs::after { position: absolute; left: calc(3.82 * var(--u)); top: calc(1.9 * var(--u)); border: solid transparent; border-width: calc(0.19 * var(--u)) 0 calc(0.19 * var(--u)) calc(0.36 * var(--u)); border-left-color: #1a8fb0; content: ""; }
:is(#mbsv, .mbsv-xpop) .cost__puffs > span { position: absolute; left: 0; width: 100%; }
:is(#mbsv, .mbsv-xpop) .cost__p1 { top: calc(0.8 * var(--u)); font-size: calc(0.5 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cost__p2 { top: calc(1.42 * var(--u)); display: flex; align-items: baseline; justify-content: center; padding-right: calc(0.14 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cost__p2 i { font-size: calc(0.4 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cost__p2 b { margin: 0 calc(0.04 * var(--u)) 0 calc(0.02 * var(--u)); font-size: calc(0.77 * var(--u)); font-weight: 800; letter-spacing: -0.02em; }
:is(#mbsv, .mbsv-xpop) .cost__p2 i + b + i { font-size: calc(0.56 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cost__p3 { top: calc(2.52 * var(--u)); font-size: calc(0.56 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .cost__stick { box-sizing: content-box; left: calc(3.6 * var(--u)); top: calc(1.8 * var(--u)); width: auto; height: calc(6.35 * var(--u)); padding: calc(0.2 * var(--u)) calc(0.3 * var(--u)) 0 0; filter: drop-shadow(calc(0.06 * var(--u)) calc(0.1 * var(--u)) calc(0.12 * var(--u)) rgba(8, 46, 62, 0.28)); -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(2.51 * var(--u)) no-repeat,
    radial-gradient(circle calc(1.94 * var(--u)) at calc(1.63 * var(--u)) calc(2.51 * var(--u)), #000 99.5%, transparent 100%); mask:
    linear-gradient(#000, #000) top / 100% calc(2.51 * var(--u)) no-repeat,
    radial-gradient(circle calc(1.94 * var(--u)) at calc(1.63 * var(--u)) calc(2.51 * var(--u)), #000 99.5%, transparent 100%); }
:is(#mbsv, .mbsv-xpop) .cost__notes { left: calc(0.4 * var(--u)); right: calc(0.4 * var(--u)); top: calc(6.24 * var(--u)); color: #46555d; font-size: calc(0.175 * var(--u)); line-height: calc(0.31 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim { height: calc(18.8 * var(--u)); background: #f6fafa; color: var(--ink); }
:is(#mbsv, .mbsv-xpop) .sim > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .sim__title { left: calc(0.55 * var(--u)); top: calc(0.27 * var(--u)); width: calc(7.97 * var(--u)); height: calc(0.95 * var(--u)); background: #1a8eae; color: #fff; font-size: calc(0.57 * var(--u)); font-weight: 800; line-height: calc(0.93 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .sim__sub { left: calc(0.78 * var(--u)); top: calc(1.48 * var(--u)); font-size: calc(0.475 * var(--u)); font-weight: 800; letter-spacing: 0.02em; line-height: calc(0.6 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__assume { right: calc(0.7 * var(--u)); top: calc(1.68 * var(--u)); color: #5d696f; font-size: calc(0.2137 * var(--u)); font-weight: 500; line-height: calc(0.28 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__card { top: calc(2.4 * var(--u)); width: calc(3.73 * var(--u)); height: calc(6.98 * var(--u)); overflow: hidden; border: calc(0.025 * var(--u)) solid #1c1c1c; border-radius: calc(0.08 * var(--u)); background: #fff; text-align: center; }
:is(#mbsv, .mbsv-xpop) .sim__card--paper { left: calc(0.66 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__card--maybiss { left: calc(4.69 * var(--u)); border-color: #1a8eae; }
:is(#mbsv, .mbsv-xpop) .sim__card > * { position: absolute; left: 0; width: 100%; }
:is(#mbsv, .mbsv-xpop) .sim__card h4 { top: 0; height: calc(1.21 * var(--u)); background: #1f2122; color: #fff; font-weight: 800; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .sim__card--maybiss h4 { background: #0f2c3d; }
:is(#mbsv, .mbsv-xpop) .sim__card h4 span { display: block; padding-top: calc(0.22 * var(--u)); font-size: calc(0.356 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__card h4 span[lang] { padding-top: calc(0.17 * var(--u)); font-family: var(--grotesk); font-size: calc(0.355 * var(--u)); font-weight: 700; line-height: calc(0.38 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__card h4 small { display: block; margin-top: calc(0.13 * var(--u)); font-size: calc(0.3 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__card--maybiss h4 small { margin-top: calc(0.12 * var(--u)); font-size: calc(0.275 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__visual { left: calc(0.47 * var(--u)); top: calc(1.28 * var(--u)); width: calc(2.74 * var(--u)); height: calc(2.74 * var(--u)); border-radius: 50%; background: #eceff1; }
:is(#mbsv, .mbsv-xpop) .sim__card--maybiss .sim__visual { background: #e0f3f7; }
:is(#mbsv, .mbsv-xpop) .sim__visual img { position: absolute; left: calc(0.42 * var(--u)); top: calc(0.26 * var(--u)); width: calc(1.945 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .sim__card--maybiss .sim__visual img { left: calc(0.73 * var(--u)); top: calc(0.12 * var(--u)); width: auto; height: calc(2.5 * var(--u)); filter: drop-shadow(calc(0.03 * var(--u)) calc(0.05 * var(--u)) calc(0.07 * var(--u)) rgba(8, 46, 62, 0.22)); }
:is(#mbsv, .mbsv-xpop) .sim__badge { left: calc(0.2 * var(--u)); top: calc(3.33 * var(--u)); width: calc(0.92 * var(--u)); height: calc(0.92 * var(--u)); border-radius: 50%; background: #1f2122; color: #fff; font-size: calc(0.33 * var(--u)); font-weight: 800; line-height: calc(0.9 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__card--maybiss .sim__badge { background: #1a8eae; }
:is(#mbsv, .mbsv-xpop) .sim__price { top: calc(4.36 * var(--u)); color: var(--red); font-size: calc(0.62 * var(--u)); font-weight: 800; line-height: calc(0.8 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .sim__price b { font-size: calc(0.72 * var(--u)); font-weight: 900; font-feature-settings: "palt"; }
:is(#mbsv, .mbsv-xpop) .sim__detail { top: calc(5.26 * var(--u)); color: #6b7378; font-size: calc(0.24 * var(--u)); font-weight: 500; line-height: calc(0.34 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__repeat { top: calc(5.8 * var(--u)); left: calc(0.21 * var(--u)); width: calc(3.26 * var(--u)); padding-top: calc(0.14 * var(--u)); border-top: calc(0.015 * var(--u)) solid #b9dfe8; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .sim__repeat strong { display: block; font-size: calc(0.265 * var(--u)); font-weight: 800; line-height: calc(0.36 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__repeat small { display: block; margin-top: calc(0.07 * var(--u)); color: #6b7378; font-size: calc(0.21 * var(--u)); font-weight: 500; line-height: calc(0.3 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__dots { left: calc(3.27 * var(--u)); top: calc(9.58 * var(--u)); width: calc(2.55 * var(--u)); height: calc(0.93 * var(--u)); background: radial-gradient(circle, #8fb6c1 calc(0.032 * var(--u)), transparent calc(0.038 * var(--u))) 0 0 / calc(0.17 * var(--u)) calc(0.17 * var(--u)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
:is(#mbsv, .mbsv-xpop) .sim__wallet { left: calc(0.73 * var(--u)); top: calc(10.9 * var(--u)); width: calc(7.61 * var(--u)); height: calc(2.92 * var(--u)); object-fit: cover; border: calc(0.02 * var(--u)) solid #173040; }
:is(#mbsv, .mbsv-xpop) .sim__year { left: calc(6.07 * var(--u)); top: calc(12.72 * var(--u)); width: calc(2.36 * var(--u)); height: calc(2.36 * var(--u)); border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; line-height: 1; text-align: center; }
:is(#mbsv, .mbsv-xpop) .sim__year span { display: block; padding-top: calc(0.55 * var(--u)); font-size: calc(0.42 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__year strong { display: block; margin-top: calc(0.22 * var(--u)); font-size: calc(0.66 * var(--u)); font-weight: 800; }
:is(#mbsv, .mbsv-xpop) .sim__diff { left: calc(0.8 * var(--u)); top: calc(15.36 * var(--u)); width: calc(7.48 * var(--u)); height: calc(1.46 * var(--u)); border-bottom: calc(0.04 * var(--u)) solid var(--red); line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .sim__diff strong { position: absolute; left: calc(0.05 * var(--u)); top: 0; color: var(--red); font-size: calc(1.27 * var(--u)); font-weight: 900; letter-spacing: -0.02em; font-feature-settings: "palt"; }
:is(#mbsv, .mbsv-xpop) .sim__diff span { position: absolute; left: calc(5.87 * var(--u)); top: calc(0.9 * var(--u)); font-size: calc(0.42 * var(--u)); font-weight: 800; }
:is(#mbsv, .mbsv-xpop) .sim__yen { left: calc(0.93 * var(--u)); top: calc(17.19 * var(--u)); width: calc(1.02 * var(--u)); height: calc(1.02 * var(--u)); border: calc(0.05 * var(--u)) solid #1a8eae; border-radius: 50%; outline: calc(0.02 * var(--u)) solid #1a8eae; outline-offset: calc(-0.11 * var(--u)); background: #dff2f6; color: #1a8eae; font-family: var(--grotesk); font-size: calc(0.6 * var(--u)); font-weight: 800; line-height: calc(0.92 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .sim__closing { left: calc(2.38 * var(--u)); top: calc(17.11 * var(--u)); font-size: calc(0.357 * var(--u)); font-weight: 800; line-height: calc(0.6 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .sim__closing em { color: var(--red); }
:is(#mbsv, .mbsv-xpop) .trust { height: calc(11.64 * var(--u)); background: linear-gradient(180deg, #e6f0f4 0%, #eef4f6 45%, #f4f6f6 100%); color: #132d3e; }
:is(#mbsv, .mbsv-xpop) .trust > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .trust__floor { inset: 0; background: #f8f8f7; clip-path: polygon(0 48.3%, 100% 41.3%, 100% 100%, 0 100%); }
:is(#mbsv, .mbsv-xpop) .trust__clip { inset: 0; clip-path: polygon(0 0, 100% 0, 100% 41.3%, 0 48.3%); }
:is(#mbsv, .mbsv-xpop) .trust__pkg { width: calc(1.11 * var(--u)); height: auto; transform: rotate(29deg); transform-origin: 0 0; filter: drop-shadow(calc(0.04 * var(--u)) calc(0.08 * var(--u)) calc(0.1 * var(--u)) rgba(20, 40, 50, 0.3)); }
:is(#mbsv, .mbsv-xpop) .trust__pkg--rich { left: calc(4.93 * var(--u)); top: calc(-1.5 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__pkg--menthol { left: calc(6.51 * var(--u)); top: calc(-1.29 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__pkg--berry { left: calc(8.29 * var(--u)); top: calc(-1.37 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__pkg--ocean { position: absolute; left: calc(6.24 * var(--u)); top: calc(1.13 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__pkg--shine { left: calc(9.38 * var(--u)); top: calc(0.58 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__badge { left: calc(0.57 * var(--u)); top: calc(1.44 * var(--u)); width: calc(2.66 * var(--u)); height: calc(2.66 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 calc(0.04 * var(--u)) calc(0.14 * var(--u)) rgba(40, 80, 100, 0.14); color: #1a86a8; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .trust__badge::before { position: absolute; inset: calc(0.08 * var(--u)); border: calc(0.03 * var(--u)) solid #7fc4dc; border-radius: 50%; content: ""; }
:is(#mbsv, .mbsv-xpop) .trust__badge > * { display: block; }
:is(#mbsv, .mbsv-xpop) .trust__badge span { padding-top: calc(0.42 * var(--u)); font-size: calc(0.44 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__badge strong { margin-top: calc(0.12 * var(--u)); font-size: calc(0.64 * var(--u)); font-weight: 800; letter-spacing: -0.03em; }
:is(#mbsv, .mbsv-xpop) .trust__badge strong + span { padding-top: calc(0.1 * var(--u)); font-size: calc(0.37 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__headline { left: calc(0.67 * var(--u)); top: calc(4.93 * var(--u)); font-size: calc(0.778 * var(--u)); font-weight: 800; line-height: calc(1.015 * var(--u)); white-space: nowrap; font-feature-settings: "palt"; letter-spacing: calc(-0.03 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__body { left: calc(0.67 * var(--u)); top: calc(8.47 * var(--u)); font-size: calc(0.343 * var(--u)); font-weight: 600; letter-spacing: 0.02em; line-height: calc(0.57 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .trust__body strong { color: #1a86a8; font-weight: 800; font-size: 1.036em; }
:is(#mbsv, .mbsv-xpop) .trust__note { left: calc(0.67 * var(--u)); top: calc(10.76 * var(--u)); color: #5d666b; font-size: calc(0.2 * var(--u)); font-weight: 500; line-height: calc(0.28 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__device { width: calc(0.89 * var(--u)); height: auto; filter: drop-shadow(calc(0.06 * var(--u)) calc(0.1 * var(--u)) calc(0.12 * var(--u)) rgba(20, 30, 36, 0.35)); }
:is(#mbsv, .mbsv-xpop) .trust__device--ocean { left: calc(6.41 * var(--u)); top: calc(3.97 * var(--u)); transform: rotate(-26.6deg); }
:is(#mbsv, .mbsv-xpop) .trust__device--shine { left: calc(7.37 * var(--u)); top: calc(4.685 * var(--u)); transform: rotate(16.4deg); }
:is(#mbsv, .mbsv-xpop) .offer { height: calc(20.1 * var(--u)); background: #f5f4f3; color: #fff; }
:is(#mbsv, .mbsv-xpop) .offer__card { position: absolute; left: calc(0.66 * var(--u)); top: calc(0.33 * var(--u)); width: calc(7.74 * var(--u)); height: calc(19.42 * var(--u)); border-radius: calc(0.14 * var(--u)); background: #1f2223; }
:is(#mbsv, .mbsv-xpop) .offer__card > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .offer__eyebrow { left: calc(2.49 * var(--u)); top: calc(0.755 * var(--u)); width: calc(2.77 * var(--u)); height: calc(0.815 * var(--u)); background: #fff; color: #1f2223; font-size: calc(0.602 * var(--u)); font-weight: 800; line-height: calc(0.79 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .offer__title { left: 0; top: calc(2.1 * var(--u)); width: 100%; font-size: calc(0.653 * var(--u)); font-weight: 800; line-height: calc(0.8 * var(--u)); text-align: center; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .offer__packs { left: calc(0.585 * var(--u)); top: calc(3.19 * var(--u)); display: flex; gap: calc(0.5 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .offer__packs li { width: calc(0.922 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .offer__packs img { width: 100%; height: auto; filter: drop-shadow(0 calc(0.04 * var(--u)) calc(0.08 * var(--u)) rgba(0, 0, 0, 0.4)); }
:is(#mbsv, .mbsv-xpop) .offer__body, :is(#mbsv, .mbsv-xpop) .offer__accent { left: 0; width: 100%; font-size: calc(0.3416 * var(--u)); text-align: center; white-space: nowrap; top: calc(8.88 * var(--u)); line-height: calc(0.56 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .offer__body { top: calc(7.68 * var(--u)); font-weight: 600; letter-spacing: 0.02em; line-height: calc(0.57 * var(--u)); font-size: calc(0.335 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .offer__accent { top: calc(8.945 * var(--u)); color: #2aa7c7; font-weight: 800; line-height: calc(0.55 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .offer__label { left: calc(0.92 * var(--u)); top: calc(10.52 * var(--u)); width: calc(5.91 * var(--u)); font-size: calc(0.43 * var(--u)); font-weight: 800; line-height: calc(0.5 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .offer__label::after { position: absolute; left: calc(2.76 * var(--u)); right: 0; top: calc(0.42 * var(--u)); height: calc(0.015 * var(--u)); background: #fff; content: ""; }
:is(#mbsv, .mbsv-xpop) .offer__count { left: calc(0.98 * var(--u)); top: calc(11.36 * var(--u)); width: calc(1.55 * var(--u)); height: calc(1.55 * var(--u)); border: calc(0.02 * var(--u)) solid #9aa3a8; font-size: calc(0.615 * var(--u)); font-weight: 800; line-height: calc(1.54 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .offer__price { left: calc(2.7 * var(--u)); top: calc(11.3 * var(--u)); width: calc(4.2 * var(--u)); height: calc(1.7 * var(--u)); color: #f0506e; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .offer__price > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .offer__price b { left: 0; top: calc(-0.23 * var(--u)); font-family: var(--price); font-size: calc(1.93 * var(--u)); font-weight: 600; letter-spacing: calc(0.02 * var(--u)); transform: scaleX(0.824); transform-origin: left; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .offer__price b i { letter-spacing: calc(0.155 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .offer__price small { left: calc(3.23 * var(--u)); top: calc(0.35 * var(--u)); font-size: calc(0.22 * var(--u)); font-weight: 800; font-feature-settings: "palt"; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .offer__price span { left: calc(3.36 * var(--u)); top: calc(0.76 * var(--u)); font-size: calc(0.68 * var(--u)); font-weight: 800; }
:is(#mbsv, .mbsv-xpop) .offer__per { right: calc(0.97 * var(--u)); top: calc(13.06 * var(--u)); font-size: calc(0.307 * var(--u)); font-weight: 500; line-height: calc(0.4 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .offer__benefits { left: calc(0.585 * var(--u)); top: calc(13.89 * var(--u)); display: flex; gap: calc(0.2 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .offer__benefits li { position: relative; width: calc(3.2 * var(--u)); height: calc(2.29 * var(--u)); padding-top: calc(0.91 * var(--u)); background: #70767a; font-size: calc(0.36 * var(--u)); font-weight: 800; line-height: calc(0.53 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .offer__benefits li::before { position: absolute; left: 50%; top: calc(0.3 * var(--u)); width: calc(0.4 * var(--u)); height: calc(0.4 * var(--u)); margin-left: calc(-0.2 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19' fill='%23fff'/%3E%3Ccircle cx='20' cy='20' r='14.5' fill='%23f0506e'/%3E%3Cpath d='M12.5 20.5l5 5 10-11' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat; content: ""; }
:is(#mbsv, .mbsv-xpop) .offer__closing { left: calc(0.63 * var(--u)); top: calc(16.81 * var(--u)); font-size: calc(0.35 * var(--u)); font-weight: 800; line-height: calc(0.685 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .offer__device { position: absolute; left: calc(7.53 * var(--u)); top: calc(15.72 * var(--u)); width: calc(0.55 * var(--u)); height: auto; transform: rotate(7.4deg); filter: drop-shadow(calc(-0.1 * var(--u)) calc(0.12 * var(--u)) calc(0.16 * var(--u)) rgba(0, 0, 0, 0.45)); }
:is(#mbsv, .mbsv-xpop) .voice { height: calc(14.1 * var(--u)); background: #f4f8f8; color: #132d3e; }
:is(#mbsv, .mbsv-xpop) .voice > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .voice__hero { left: 0; top: 0; width: 100%; height: calc(4.68 * var(--u)); overflow: hidden; color: #fff; text-align: center; }
:is(#mbsv, .mbsv-xpop) .voice__hero img { width: 100%; height: 100%; object-fit: cover; }
:is(#mbsv, .mbsv-xpop) .voice__hero::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 28, 32, 0.25) 0, rgba(20, 28, 32, 0.25) calc(0.85 * var(--u)), rgba(18, 26, 30, 0.6) calc(0.85 * var(--u))); content: ""; }
:is(#mbsv, .mbsv-xpop) .voice__hero > p, :is(#mbsv, .mbsv-xpop) .voice__hero > h2 { position: absolute; left: 0; z-index: 1; width: 100%; font-family: var(--grotesk); line-height: 1; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .voice__brand { top: calc(0.86 * var(--u)); font-size: calc(0.38 * var(--u)); font-weight: 400; letter-spacing: 0.01em; }
:is(#mbsv, .mbsv-xpop) .voice__title { top: calc(1.74 * var(--u)); font-size: calc(1.13 * var(--u)); font-weight: 800; letter-spacing: -0.005em; transform: scaleX(1.077); }
:is(#mbsv, .mbsv-xpop) .voice__sub { left: calc(1.08 * var(--u)); top: calc(4.02 * var(--u)); width: calc(6.9 * var(--u)); height: calc(1.15 * var(--u)); border-radius: calc(0.575 * var(--u)); background: #17191b; color: #fff; font-size: calc(0.6 * var(--u)); font-weight: 800; line-height: calc(1.12 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .voice__sub::after { position: absolute; left: 50%; top: 100%; margin-left: calc(-0.27 * var(--u)); border: solid transparent; border-width: calc(0.27 * var(--u)) calc(0.27 * var(--u)) 0; border-top-color: #17191b; content: ""; }
:is(#mbsv, .mbsv-xpop) .voice__sub em { color: #f6e84f; }
:is(#mbsv, .mbsv-xpop) .v { left: calc(2.37 * var(--u)); width: calc(5.98 * var(--u)); height: calc(1.8 * var(--u)); border-radius: calc(0.9 * var(--u)); background: #eef0f1; box-shadow: calc(0.14 * var(--u)) calc(0.1 * var(--u)) 0 #fbef8a; }
:is(#mbsv, .mbsv-xpop) .v--1 { top: calc(6.1 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .v--2 { left: calc(0.7 * var(--u)); top: calc(8.65 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .v--3 { top: calc(11.18 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .v::before { position: absolute; left: calc(-0.22 * var(--u)); top: calc(0.88 * var(--u)); border: solid transparent; border-width: calc(0.1 * var(--u)) calc(0.24 * var(--u)) calc(0.1 * var(--u)) 0; border-right-color: #eef0f1; content: ""; }
:is(#mbsv, .mbsv-xpop) .v--2::before { left: auto; right: calc(-0.22 * var(--u)); border-width: calc(0.1 * var(--u)) 0 calc(0.1 * var(--u)) calc(0.24 * var(--u)); border-color: transparent transparent transparent #eef0f1; }
:is(#mbsv, .mbsv-xpop) .v__text { position: absolute; left: calc(0.39 * var(--u)); top: calc(0.36 * var(--u)); font-size: calc(0.4 * var(--u)); font-weight: 800; line-height: calc(0.58 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .v--1 .v__text { left: 0; width: 100%; text-align: center; }
:is(#mbsv, .mbsv-xpop) .v--2 .v__text { left: calc(0.4 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .v__text em { color: var(--teal); }
:is(#mbsv, .mbsv-xpop) .v__who { position: absolute; left: calc(-1.74 * var(--u)); top: calc(0.16 * var(--u)); width: calc(1.44 * var(--u)); font-size: calc(0.28 * var(--u)); font-weight: 800; line-height: calc(0.3 * var(--u)); text-align: center; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .v--2 .v__who { left: calc(6.32 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .v__who img { width: calc(1.44 * var(--u)); height: calc(1.44 * var(--u)); border-radius: 50%; object-fit: cover; }
:is(#mbsv, .mbsv-xpop) .v__who span { display: block; margin-top: calc(0.14 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .v__who span::after { display: block; width: calc(0.92 * var(--u)); height: calc(0.015 * var(--u)); margin: calc(0.1 * var(--u)) auto 0; background: #132d3e; content: ""; }
:is(#mbsv, .mbsv-xpop) .v--2 .v__who span::after { width: calc(1.57 * var(--u)); margin-left: calc(-0.07 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .voice__note { left: 0; top: calc(13.62 * var(--u)); width: 100%; color: #5d666b; font-size: calc(0.223 * var(--u)); font-weight: 500; line-height: calc(0.3 * var(--u)); text-align: center; }
:is(#mbsv, .mbsv-xpop) .guar { height: calc(10.2 * var(--u)); background: #1981b0; color: #151719; }
:is(#mbsv, .mbsv-xpop) .guar > * { position: absolute; }
:is(#mbsv, .mbsv-xpop) .guar__lead { left: 0; top: calc(0.52 * var(--u)); width: 100%; color: #fff; font-size: calc(0.4215 * var(--u)); font-weight: 800; line-height: calc(0.5 * var(--u)); text-align: center; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .guar__card { left: calc(0.34 * var(--u)); right: calc(0.34 * var(--u)); top: calc(1.9 * var(--u)); bottom: calc(0.65 * var(--u)); border: calc(0.04 * var(--u)) solid #151719; background: #fff; }
:is(#mbsv, .mbsv-xpop) .guar__badge { left: calc(1.93 * var(--u)); top: calc(1.44 * var(--u)); width: calc(5.21 * var(--u)); height: calc(0.88 * var(--u)); background: #151719; color: #fff; font-size: calc(0.526 * var(--u)); font-weight: 800; line-height: calc(0.86 * var(--u)); text-align: center; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .guar em { color: var(--pink); }
:is(#mbsv, .mbsv-xpop) .guar__icon { left: calc(1.01 * var(--u)); top: calc(2.81 * var(--u)); width: calc(1.9 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .guar__headline { left: calc(3.12 * var(--u)); top: calc(2.83 * var(--u)); font-weight: 800; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .guar__headline span { display: block; font-size: calc(0.45 * var(--u)); line-height: calc(0.54 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .guar__headline strong { display: block; margin: calc(0.08 * var(--u)) 0 0 calc(-0.02 * var(--u)); color: var(--pink); font-size: calc(0.916 * var(--u)); font-weight: 800; line-height: calc(1.01 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .guar__body { left: 0; top: calc(5.21 * var(--u)); width: 100%; padding-top: calc(0.2 * var(--u)); font-size: calc(0.31 * var(--u)); font-weight: 600; line-height: calc(0.55 * var(--u)); text-align: center; white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .guar__body::before { position: absolute; left: calc(0.82 * var(--u)); top: calc(-0.1 * var(--u)); width: calc(7.44 * var(--u)); height: calc(0.04 * var(--u)); background: #151719; content: ""; }
:is(#mbsv, .mbsv-xpop) .guar__closing { left: 0; top: calc(7.42 * var(--u)); width: 100%; color: #fff; font-size: calc(0.42 * var(--u)); font-weight: 800; line-height: calc(0.58 * var(--u)); white-space: nowrap; }
:is(#mbsv, .mbsv-xpop) .guar__closing span { display: block; width: calc(6.89 * var(--u)); height: calc(0.7 * var(--u)); margin: 0 auto; background: #151719; text-align: center; }
:is(#mbsv, .mbsv-xpop) .guar__closing span + span { width: calc(6.26 * var(--u)); margin-top: calc(0.12 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .v--3 .v__text { font-feature-settings: "palt"; font-size: calc(0.37 * var(--u)); top: calc(0.32 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .v--3 .v__text em { letter-spacing: calc(-0.005 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .sim__card--paper .sim__price { transform: scaleX(0.942); }
:is(#mbsv, .mbsv-xpop) .sim__card--maybiss .sim__detail { font-size: calc(0.231 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .offer__benefits li + li { font-size: calc(0.336 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .v--2 .v__text { font-size: calc(0.392 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .trust__cross { left: calc(4.6 * var(--u)); top: calc(3.64 * var(--u)); width: calc(4.47 * var(--u)); height: auto; }
:is(#mbsv, .mbsv-xpop) .faq { padding: calc(0.9 * var(--u)) calc(0.44 * var(--u)) calc(1 * var(--u)); background: #fff; color: var(--navy); }
:is(#mbsv, .mbsv-xpop) .faq__title { display: flex; align-items: baseline; gap: calc(0.22 * var(--u)); font-weight: 800; }
:is(#mbsv, .mbsv-xpop) .faq__title span { font-family: var(--cond); font-size: calc(1.15 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: 0.01em; }
:is(#mbsv, .mbsv-xpop) .faq__title small { font-size: calc(0.36 * var(--u)); letter-spacing: 0.06em; }
:is(#mbsv, .mbsv-xpop) .faq__item { margin-top: calc(0.34 * var(--u)); padding: calc(0.34 * var(--u)) calc(0.42 * var(--u)) calc(0.4 * var(--u)); border: calc(0.03 * var(--u)) solid var(--navy); background: #fff; }
:is(#mbsv, .mbsv-xpop) .faq__item dt, :is(#mbsv, .mbsv-xpop) .faq__item dd { display: flex; align-items: flex-start; }
:is(#mbsv, .mbsv-xpop) .faq__item dt { align-items: center; gap: calc(0.24 * var(--u)); padding-bottom: calc(0.26 * var(--u)); border-bottom: calc(0.025 * var(--u)) solid var(--navy); font-size: calc(0.36 * var(--u)); font-weight: 800; line-height: calc(0.52 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .faq__item dt b { font-family: var(--cond); font-size: calc(0.86 * var(--u)); font-weight: 700; line-height: 1; }
:is(#mbsv, .mbsv-xpop) .faq__item dd { gap: calc(0.2 * var(--u)); padding-top: calc(0.26 * var(--u)); font-size: calc(0.29 * var(--u)); font-weight: 500; line-height: calc(0.5 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .faq__item dd b { flex: none; font-family: var(--cond); font-size: calc(0.42 * var(--u)); font-weight: 700; line-height: calc(0.5 * var(--u)); color: var(--teal-dark); }
/* ---- motion.css ---- */
#mbsv.has-motion [data-reveal] { opacity: 0; translate: 0 calc(0.18 * var(--u)); transition:
    opacity 450ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms),
    translate 450ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms); }
#mbsv.has-motion [data-reveal="right"] { translate: calc(0.24 * var(--u)) 0; }
#mbsv.has-motion [data-reveal].is-in { opacity: 1; translate: none; }

/* FamilyMart / FamiPay exit popup (u=MAYBISSClassic_teiki, 2026-10-30) */
:is(#mbsv, .mbsv-xpop) .xpop__fm-logo { display: block; width: calc(3.2 * var(--u)); height: auto; margin: calc(0.24 * var(--u)) auto 0; }
:is(#mbsv, .mbsv-xpop) .xpop__fm-head { margin-top: calc(0.18 * var(--u)); color: #132d3e; font-size: calc(0.46 * var(--u)); font-weight: 900; letter-spacing: 0.02em; line-height: calc(0.66 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .xpop__fm-coupon { margin-top: calc(0.04 * var(--u)); color: #132d3e; font-size: calc(0.28 * var(--u)); font-weight: 700; line-height: calc(0.4 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .xpop__fm-coupon b { display: block; color: #0081cc; font-size: calc(0.52 * var(--u)); font-weight: 900; letter-spacing: 0.04em; line-height: calc(0.72 * var(--u)); }
:is(#mbsv, .mbsv-xpop) .xpop__fm-btn { display: flex; align-items: center; justify-content: center; gap: calc(0.14 * var(--u)); min-height: calc(1.12 * var(--u)); margin-top: calc(0.2 * var(--u)); border-radius: 999px; background: linear-gradient(180deg, #23a6ea 0%, #0079c2 100%); box-shadow: 0 calc(0.06 * var(--u)) calc(0.16 * var(--u)) rgba(0, 92, 150, 0.32); color: #fff; font-size: calc(0.36 * var(--u)); font-weight: 900; letter-spacing: 0.04em; text-decoration: none; }
:is(#mbsv, .mbsv-xpop) .xpop__fm-btn::after { content: "→"; font-weight: 700; }