/* ===== nyans:confirm-skin v3 : ショップ確認画面(/shop/order/confirm)のトークンをLP確認画面に適用 =====
   ショップ実装から抽出：見出し#2E363A / 枠#D8DBDD radius4px / 行区切りは1px dashed #D8DBDD
   主ボタン#C4653A 540x64 radius8 / 副ボタン白地+#C4653A枠 540x56 / 合計ボックス#F5F5F5 radius4 */
#confirm-view, .form_container_ec, .form_confirm_ec {
  font-family: Ubuntu, "Noto Sans JP", sans-serif;
  color: #2E363A;
}
/* 全体：floatを解除して中央寄せ（右寄りの解消） */
.form_container_ec {
  width: auto !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box;
  float: none !important;
}
.confirm_content_ec, .form_confirm_ec, .form_wizard_ec, .block_ec {
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ページ見出し */
.confirm_title_ec {
  font-size: 34px !important;
  font-weight: 700;
  color: #2E363A;
  letter-spacing: .04em;
  text-align: left;
  margin: 0 0 14px !important;
}

/* ステップナビ：ショップと同じテラコッタ基調に */
.form_wizard_ec .form_wizard_levels_ec {
  background: #F5F5F5 !important;
  border-radius: 4px !important;
  margin: 0 0 48px !important;
  overflow: hidden;
}
.form_wizard_ec .form_wizard_levels_ec li a {
  color: #999da0 !important;
  font-size: 13px !important;
  background: transparent !important;
}
.form_wizard_ec .form_wizard_levels_ec li.active a {
  background: #C4653A !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 0 !important;
}
.form_wizard_ec .form_wizard_levels_ec li.active a:after { border-left-color: #C4653A !important; }

/* セクション見出し（二重帯の解消） */
.confirm_subtitle_ec {
  background: #2E363A !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 4px 4px 0 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 15px 24px !important;
  margin: 32px 0 0 !important;
}
.confirm_subtitle_ec + .confirm_subtitle_ec { display: none !important; }
.confirm_subtitle_ec p { margin: 0 !important; }

/* 表：ショップと同じ「点線区切り・枠は外側だけ」 */
.table_ec, .table_bordered_ec {
  width: calc(100% - 48px) !important;
  margin: 0 24px 0 !important;
  border-collapse: collapse !important;
  border: 0 !important;
  background: #fff;
}
.table_ec > tbody > tr,
.table_bordered_ec > tbody > tr {
  border-bottom: 1px dashed #D8DBDD !important;
  border-top: 0 !important; border-left: 0 !important; border-right: 0 !important;
}
.table_ec > tbody > tr:last-child,
.table_bordered_ec > tbody > tr:last-child { border-bottom: 0 !important; }
.table_ec th, .table_bordered_ec th {
  background: transparent !important;
  border: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 0 !important;
}
.table_ec td, .table_bordered_ec td {
  background: transparent !important;
  border: 0 !important;
  font-size: 15px !important;
  vertical-align: top;
  padding: 20px 0 !important;
}
/* セクション本体を白カードで囲う */
.confirm_subtitle_ec + table,
.confirm_subtitle_ec + * {
  border: 1px solid #D8DBDD !important;
  border-top: 0 !important;
  border-radius: 0 0 4px 4px !important;
  background: #fff !important;
  padding-bottom: 28px !important;
  margin-bottom: 32px !important;
}
.product_price_ec, .product_quantity_ec, .product_sub_total_ec { text-align: right !important; white-space: nowrap; }
.total_color_ec { color: #2E363A !important; font-weight: 700 !important; font-size: 28px !important; }

/* ボタン：ショップと同じ寸法 */
.btn_ec, .big_btn_ec, .submit_bottom_ec, .btn_color_ec {
  display: block !important;
  background: #C4653A !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  width: 100% !important;
  max-width: 540px !important;
  height: 64px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  cursor: pointer;
}
.btn_ec:hover, .big_btn_ec:hover, .submit_bottom_ec:hover { opacity: .85; }
.btn_default_ec {
  display: flex !important;
  justify-content: center; align-items: center;
  background: #fff !important;
  color: #C4653A !important;
  border: 1px solid #C4653A !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  width: 100% !important;
  max-width: 540px !important;
  height: 56px !important;
  margin: 16px auto 0 !important;
  box-shadow: none !important;
}
.center_ec { text-align: center !important; }
.btn_mg_ec { margin: 0 auto !important; }

@media (max-width: 767px) {
  .form_container_ec { padding: 0 16px !important; }
  .confirm_title_ec { font-size: 26px !important; text-align: center; }
  .table_ec, .table_bordered_ec { width: calc(100% - 32px) !important; margin: 0 16px !important; }
}

/* ===== nyans:confirm-skin v4 : 幅の制約と既定の実線枠を上書き ===== */
/* テンプレート側の .lp-confirm-wrap が max-width:720px で幅を絞っていた */
.lp-confirm-wrap {
  max-width: 1140px !important;
  padding: 24px 24px 64px !important;
  font-family: Ubuntu, "Noto Sans JP", sans-serif !important;
  color: #2E363A !important;
}
.lp-confirm-wrap h1 {
  font-size: 34px !important;
  text-align: left !important;
  letter-spacing: .04em;
  margin: 16px 0 14px !important;
}
/* 既定の `.table_bordered_ec tr>th{border:1px solid #e5e5e5!important}` を同等以上の詳細度で打ち消す */
#confirm-view .table_bordered_ec tr > th,
#confirm-view .table_bordered_ec tr > td,
#confirm-view .table_ec tr > th,
#confirm-view .table_ec tr > td {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px dashed #D8DBDD !important;
  vertical-align: top !important;
  line-height: 1.8 !important;
  font-size: 15px !important;
  padding: 18px 16px !important;
}
#confirm-view .table_bordered_ec tr:last-child > th,
#confirm-view .table_bordered_ec tr:last-child > td,
#confirm-view .table_ec tr:last-child > th,
#confirm-view .table_ec tr:last-child > td { border-bottom: 0 !important; }
#confirm-view .table_ec tr > td.pull_right_ec,
#confirm-view .table_bordered_ec tr > td.pull_right_ec { text-align: right !important; }
/* セクションの白カード */
#confirm-view .block_ec {
  border: 1px solid #D8DBDD !important;
  border-radius: 4px !important;
  margin-top: 32px !important;
  overflow: hidden;
}
#confirm-view .form_confirm_ec { margin: 0 auto !important; overflow: visible !important; }
#confirm-view { font-size: 15px !important; }
/* ステップナビが潰れる問題 */
#confirm-view .form_wizard_ec .form_wizard_levels_ec { display: flex !important; float: none !important; }
#confirm-view .form_wizard_ec .form_wizard_levels_ec li { float: none !important; flex: 1 1 0; }
#confirm-view .form_wizard_ec .form_wizard_levels_ec li a {
  display: block; text-align: center; padding: 14px 8px !important; font-size: 13px !important;
}

/* ===== nyans:confirm-skin v5 : 見出しの重複を解消・ボタンをショップ寸法に ===== */
/* テンプレート側の h1「ご注文内容のご確認」と、ecforce既定の「ご注文確認画面」が二重。既定側を隠す */
#confirm-view .form_confirm_ec > h1,
#confirm-view .confirm_title_ec { display: none !important; }
/* 外側の白カード（block_ec）は枠を消してフラットに */
#confirm-view .block_ec {
  border: 0 !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}
/* 注文確定ボタン：ショップと同じ 540×64 */
#confirm-view input.submit_bottom_ec,
#confirm-view .submit_bottom_ec {
  display: block !important;
  background: #C4653A !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  width: 100% !important;
  max-width: 540px !important;
  height: 64px !important;
  padding: 0 !important;
  margin: 40px auto 0 !important;
  cursor: pointer;
  line-height: 64px !important;
}
#confirm-view .form_inline_ec { display: block !important; }
/* 入力内容を修正する：白地＋テラコッタ枠 540×56 */
#confirm-view .btn_ec.btn_default_ec,
#confirm-view button.btn_default_ec {
  display: flex !important;
  justify-content: center; align-items: center;
  background: #fff !important;
  color: #C4653A !important;
  border: 1px solid #C4653A !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  width: 100% !important;
  max-width: 540px !important;
  height: 56px !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
#confirm-view .center_ec > a { display: block; text-decoration: none; }
#confirm-view .center_ec > br { display: none; }
#confirm-view .center_ec { padding-bottom: 64px; }
/* 「10%対象」の税明細ブロックはショップと同じ薄グレー箱に */
#confirm-view table.table_ec:not(.table_bordered_ec) { background: #F5F5F5 !important; border-radius: 4px !important; }

/* ===== nyans:confirm-skin v6 : ステップナビをショップと同じ「丸チェック＋線」に =====
   LP側は <ul.form_wizard_levels_ec><li><a><span>1</span>ラベル</a></li> という構造。
   数字は消して、擬似要素でチェックマークの丸を描く。 */
#confirm-view .form_wizard_ec { background: transparent !important; border: 0 !important; }
#confirm-view ul.form_wizard_levels_ec {
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  list-style: none;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 0 48px !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
#confirm-view ul.form_wizard_levels_ec li {
  position: relative;
  width: 104px;
  flex: 0 0 104px;
  float: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent !important;
}
/* つなぎ線 */
#confirm-view ul.form_wizard_levels_ec li + li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(-50% + 22px);
  width: calc(100% - 44px);
  height: 2px;
  background: #E3E5E6;
}
/* 線の色：完了済み区間だけテラコッタ（activeの手前まで） */
#confirm-view ul.form_wizard_levels_ec li.active::before { background: #C4653A; }
/* リンク本体：矢印帯をやめて縦積みに */
#confirm-view ul.form_wizard_levels_ec li a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  background: transparent !important;
  border: 0 !important;
  color: #999da0 !important;
  font-size: 12px !important;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
#confirm-view ul.form_wizard_levels_ec li a::after { display: none !important; }
/* 数字の丸 → チェックの丸に置換 */
#confirm-view ul.form_wizard_levels_ec li a span {
  display: block !important;
  float: none !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #D8DBDD !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 26px !important;
  position: relative;
}
#confirm-view ul.form_wizard_levels_ec li a span::after {
  content: "";
  position: absolute;
  top: 8px; left: 9px;
  width: 7px; height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  box-sizing: border-box;
}
#confirm-view ul.form_wizard_levels_ec li.active a span { background: #C4653A !important; }
#confirm-view ul.form_wizard_levels_ec li.active a { color: #C4653A !important; font-weight: 700 !important; }
@media (max-width: 767px) {
  #confirm-view ul.form_wizard_levels_ec li { width: auto; flex: 1 1 0; min-width: 0; max-width: 104px; }
  #confirm-view ul.form_wizard_levels_ec li a { font-size: 11px !important; }
}

/* ===== nyans:confirm-skin v7 : ステップナビの間隔をショップと同じ密度に ===== */
#confirm-view ul.form_wizard_levels_ec {
  justify-content: center !important;
  gap: 0 !important;
  max-width: 420px;
  margin-left: auto !important;
  margin-right: auto !important;
}
#confirm-view ul.form_wizard_levels_ec li { width: 120px !important; flex: 0 0 120px !important; }
#confirm-view ul.form_wizard_levels_ec li + li::before {
  left: calc(-50% + 20px) !important;
  width: calc(100% - 40px) !important;
}
/* 1つ目の丸（完了済み）もテラコッタに：現在地より前は完了扱い */
#confirm-view ul.form_wizard_levels_ec li:first-child a span { background: #C4653A !important; }
#confirm-view ul.form_wizard_levels_ec li:first-child a { color: #999da0 !important; }

/* ===== nyans:confirm-skin v8 : つなぎ線の垂直位置を丸の中心に合わせる =====
   li は flex-direction:column（丸26px → gap 8px → ラベル）なので、
   丸の中心は li の上端から 13px。線は高さ2pxなので top:12px が中心。
   ただし li 内に a が入る構造で a 側にも padding があるとズレるため、a を基準にせず li 基準で固定する。 */
#confirm-view ul.form_wizard_levels_ec { align-items: flex-start !important; }
#confirm-view ul.form_wizard_levels_ec li { padding-top: 0 !important; }
#confirm-view ul.form_wizard_levels_ec li a { padding-top: 0 !important; margin-top: 0 !important; }
#confirm-view ul.form_wizard_levels_ec li + li::before {
  top: 12px !important;
  transform: none !important;
}

/* ページ見出しのサイズを調整（34px→28px） */
.lp-confirm-wrap h1 {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  margin: 8px 0 20px !important;
}
@media (max-width: 767px) {
  .lp-confirm-wrap h1 { font-size: 22px !important; }
}

/* ===== nyans:confirm-skin v9 : 帯と表の左右をそろえる／商品写真の枠を用意 ===== */
/* 見出し帯と表を同じ幅・同じ左右位置に。表の内側余白は td 側で持たせる */
#confirm-view .confirm_content_ec > .confirm_subtitle_ec,
#confirm-view .confirm_subtitle_ec {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 4px 4px 0 0 !important;
}
#confirm-view table.table_ec,
#confirm-view table.table_bordered_ec {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 1px solid #D8DBDD !important;
  border-top: 0 !important;
  border-radius: 0 0 4px 4px !important;
  margin-bottom: 32px !important;
}
#confirm-view .table_ec tr > th,
#confirm-view .table_ec tr > td,
#confirm-view .table_bordered_ec tr > th,
#confirm-view .table_bordered_ec tr > td { padding: 18px 24px !important; }

/* 商品名セルに写真を並べる（JSが img を差し込む） */
#confirm-view td.qa-name { }
#confirm-view .nyans-confirm-thumb {
  width: 72px; height: 72px; flex: 0 0 72px;
  object-fit: cover; border-radius: 6px; background: #F5F5F5;
}
#confirm-view td.qa-name.has-thumb {
  display: flex !important;
  align-items: center;
  gap: 14px;
}
#confirm-view td.qa-name.has-thumb > p { margin: 0 !important; }

/* ===== nyans:confirm-skin v10 : 税率別内訳（10%外税）をショップの内訳ボックスに寄せる ===== */
/* qa-details は見出し帯を持たないので、単独のボックスとして閉じる */
#confirm-view table.qa-details {
  width: 100% !important;
  margin: -20px 0 32px !important;
  border: 1px solid #D8DBDD !important;
  border-radius: 4px !important;
  background: #FAFAFA !important;
}
#confirm-view table.qa-details tr > th,
#confirm-view table.qa-details tr > td {
  padding: 14px 24px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  color: #5A6469 !important;
}
#confirm-view table.qa-details tr > th:first-child { font-weight: 700 !important; color: #2E363A !important; }

/* 注文明細テーブルの直後に内訳が続くので、明細側の下余白を詰める */
#confirm-view table.qa-orders { margin-bottom: 20px !important; }

/* ===== nyans:confirm-skin v11 : 見出し直下のリード文（ショップと同文） ===== */
.lp-confirm-wrap .nyans-confirm-lead,
#confirm-view .nyans-confirm-lead {
  margin: -12px 0 28px !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #5A6469 !important;
}
@media (max-width: 767px) {
  .lp-confirm-wrap .nyans-confirm-lead { font-size: 13px !important; margin: -6px 0 20px !important; }
}

/* ===== nyans:confirm-skin v12 : 上部の確定ボタン／ご注文内容帯をショップに合わせる ===== */
/* 上部にも「注文を確定する」を置く（ショップ同様、リード文の直下） */
#confirm-view .nyans-top-submit {
  margin: 0 0 44px !important;
}
#confirm-view .nyans-top-submit form { margin: 0 !important; }

/* ご注文内容の帯だけテラコッタ（ショップ準拠） */
#confirm-view .confirm_subtitle_ec.nyans-band-order {
  background: #C4653A !important;
}

/* 明細ブロックは確定ボタンの直前に来るので、下の余白を確保 */
#confirm-view table.qa-details { margin-bottom: 44px !important; }

/* ===== nyans:confirm-skin v13 : 上部ボタン周りの余白を詰める ===== */
#confirm-view .center_ec.nyans-top-submit { padding-bottom: 0 !important; margin: 0 0 44px !important; }
#confirm-view .nyans-top-submit input.submit_bottom_ec { margin-top: 0 !important; }

/* ===== nyans:confirm-skin v14 : 金額サマリー2カラム＋見出し右のステップナビ ===== */
/* --- 金額サマリー（左=内訳／右=総合計） --- */
#confirm-view .nyans-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin: 0 0 44px !important;
}
#confirm-view .nyans-summary__col { display: flex; flex-direction: column; gap: 20px; }
#confirm-view .nyans-sum-box {
  background: #F5F5F5;
  border-radius: 4px;
  padding: 18px 24px;
}
#confirm-view .nyans-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  font-size: 14px;
  color: #5A6469;
}
#confirm-view .nyans-sum-row + .nyans-sum-row { border-top: 1px dashed #D8DBDD; }
#confirm-view .nyans-sum-row__value { white-space: nowrap; }

#confirm-view .nyans-sum-box--total { padding: 22px 24px; }
#confirm-view .nyans-sum-row--total { padding-bottom: 16px; }
#confirm-view .nyans-sum-row--total .nyans-sum-row__label {
  font-size: 16px !important; font-weight: 700 !important; color: #2E363A !important;
}
#confirm-view .nyans-sum-row--total .nyans-sum-row__value {
  font-size: 26px !important; font-weight: 700 !important; color: #2E363A !important;
}
#confirm-view .nyans-sum-row--point { padding-top: 16px; }
#confirm-view .nyans-sum-row--point .nyans-sum-row__value {
  font-weight: 700 !important; color: #2E363A !important;
}

/* サマリー内に入れた税率別内訳テーブルは箱として単独で成立させる */
#confirm-view .nyans-summary table.qa-details {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #F5F5F5 !important;
}
#confirm-view .nyans-summary table.qa-details tr > th,
#confirm-view .nyans-summary table.qa-details tr > td { padding: 10px 12px !important; }

/* 明細テーブルは商品行だけになるので下余白を詰める */
#confirm-view table.qa-orders { margin-bottom: 20px !important; }

/* --- 見出し＋リード文の右にステップナビ --- */
#confirm-view .nyans-confirm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  margin-bottom: 40px;
  border-bottom: 1px solid #E3E5E6;
}
#confirm-view .nyans-confirm-head__l { flex: 1 1 auto; min-width: 0; }
#confirm-view .nyans-confirm-head__r { flex: 0 0 auto; padding-top: 6px; }
#confirm-view .nyans-confirm-head h1 { margin: 0 0 8px !important; }
#confirm-view .nyans-confirm-head .nyans-confirm-lead { margin: 0 !important; }
#confirm-view .nyans-confirm-head__r ul.form_wizard_levels_ec {
  margin: 0 !important;
  justify-content: flex-end !important;
}
#confirm-view .nyans-confirm-head__r ul.form_wizard_levels_ec li a { font-size: 11px !important; }

@media (max-width: 767px) {
  #confirm-view .nyans-summary { grid-template-columns: 1fr; }
  #confirm-view .nyans-confirm-head {
    display: block;
    padding-bottom: 16px;
    margin-bottom: 24px;
  }
  #confirm-view .nyans-confirm-head__r { padding-top: 20px; }
  #confirm-view .nyans-confirm-head__r ul.form_wizard_levels_ec { justify-content: center !important; }
}

/* ===== nyans:confirm-skin v15 : つなぎ線を丸の中心に／ラベルの下線を消す ===== */
/* 丸の中心は li 上端から 27px（span top 14px + 半径 13px）。線は高さ2pxなので 26px */
#confirm-view ul.form_wizard_levels_ec li + li::before {
  top: 26px !important;
  transform: none !important;
}
#confirm-view ul.form_wizard_levels_ec li a,
#confirm-view ul.form_wizard_levels_ec li a:hover,
#confirm-view ul.form_wizard_levels_ec li.active a {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* ===== nyans:confirm-skin v16 : チェックマークを丸の中心に置く ===== */
/* 固定px（top:8/left:9）だと丸のサイズ変更で狂うので、中心基準に置き直す。
   回転前の7×12ボックスの中心を丸の中心に合わせ、視覚的な重心ぶんだけ上に寄せる。 */
#confirm-view ul.form_wizard_levels_ec li a span::after {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -58%) rotate(45deg) !important;
}

/* ===== nyans:confirm-skin v17 : 明細行のセルを縦中央でそろえる ===== */
#confirm-view table.qa-orders tr > th,
#confirm-view table.qa-orders tr > td { vertical-align: middle !important; }
#confirm-view td.qa-name.has-thumb { align-items: center !important; }

/* ===== nyans:confirm-skin v18 : つなぎ線を丸そのものに紐づける =====
   li 起点の絶対配置（top:26px）だと、テンプレートごとに丸の開始位置が違って上下にズレる。
   線を丸（span）の擬似要素にして top:50% で置けば、どのページでも必ず中心を通る。 */
#confirm-view ul.form_wizard_levels_ec li + li::before { display: none !important; }
#confirm-view ul.form_wizard_levels_ec li + li a span::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 7px);
  width: 80px;
  height: 2px;
  background: #E3E5E6;
  transform: translateY(-50%);
}
#confirm-view ul.form_wizard_levels_ec li.active a span::before,
#confirm-view ul.form_wizard_levels_ec li.is-done a span::before { background: #C4653A; }
@media (max-width: 767px) {
  #confirm-view ul.form_wizard_levels_ec li + li a span::before {
    right: calc(100% + 6px);
    width: 60px;
  }
}

/* ===================================================================
   nyans:confirm-skin-sp v1 : スマホ確認画面
   ecforceはSPに別マークアップ（*_sp_ec）を返すため、PC用の指定が一切効かない。
   LPフォーム（カート画面）のSPスキンと同じ設計に揃える：
     帯 #2E363A / 白カード / 角丸8px / テラコッタ全幅ボタン60px / max-width 600px
   =================================================================== */

/* --- 土台 --- */
#confirm-view .form_container_sp_ec,
#confirm-view .form_confirm_sp_ec,
#confirm-view .confirm_content_sp_ec {
  font-family: Ubuntu, "Noto Sans JP", sans-serif;
  color: #2E363A;
  width: 100% !important;
  max-width: 600px !important;
  float: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
#confirm-view .form_confirm_sp_ec { animation: none !important; }
/* ecforce既定の見出しはテンプレート側のh1と重複するので隠す */
#confirm-view h1.confirm_title_sp_ec,
#confirm-view .confirm_title_sp_ec { display: none !important; }

/* --- 見出し帯 --- */
#confirm-view .confirm_subtitle_sp_ec {
  background: #2E363A !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .6px;
  padding: 13px 16px !important;
  margin: 0 !important;
  text-align: center;
}
#confirm-view .confirm_subtitle_sp_ec p { margin: 0 !important; }
/* ご注文内容の帯だけテラコッタ（PCと同じ扱い） */
#confirm-view .confirm_subtitle_sp_ec.nyans-band-order { background: #C4653A !important; }

/* --- 表 --- */
#confirm-view table.table_sp_ec,
#confirm-view table.table_bordered_sp_ec {
  width: 100% !important;
  margin: 0 0 24px !important;
  background: #fff;
  border: 1px solid #D8DBDD !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  border-collapse: collapse;
  overflow: hidden;
}
#confirm-view table.table_sp_ec tr > th,
#confirm-view table.table_sp_ec tr > td,
#confirm-view table.table_bordered_sp_ec tr > th,
#confirm-view table.table_bordered_sp_ec tr > td {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px dashed #D8DBDD !important;
  background: #fff !important;
  padding: 14px 14px !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #2E363A !important;
  vertical-align: middle !important;
}
#confirm-view table.table_sp_ec tr:last-child > th,
#confirm-view table.table_sp_ec tr:last-child > td,
#confirm-view table.table_bordered_sp_ec tr:last-child > th,
#confirm-view table.table_bordered_sp_ec tr:last-child > td { border-bottom: 0 !important; }
/* 項目名セル */
#confirm-view .menu_sp_ec {
  width: 34% !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #2E363A !important;
}
#confirm-view .total_color_sp_ec {
  color: #2E363A !important;
  font-weight: 700 !important;
  border-bottom: 1px dashed #D8DBDD !important;
}

/* --- 明細（商品行） --- */
#confirm-view table.qa-orders tr:first-child > th {
  background: #FAFAFA !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6E7278 !important;
  padding: 10px 12px !important;
}
#confirm-view table.qa-orders td.qa-name.has-thumb {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
#confirm-view table.qa-orders td.qa-name.has-thumb > p { margin: 0 !important; font-size: 13px; }
#confirm-view .nyans-confirm-thumb { width: 64px; height: 64px; flex: 0 0 64px; }
#confirm-view .pull_right_ec { text-align: right; }

/* --- 金額サマリー：SPは1カラム --- */
#confirm-view .nyans-summary {
  display: block !important;
  margin: 0 0 24px !important;
}
#confirm-view .nyans-summary__col { display: block; }
#confirm-view .nyans-summary__col > * { margin-bottom: 12px !important; }
#confirm-view .nyans-sum-box { padding: 14px 16px; border-radius: 8px; }
#confirm-view .nyans-sum-row { font-size: 14px; padding: 9px 0; }
#confirm-view .nyans-sum-row--total .nyans-sum-row__label { font-size: 15px !important; }
#confirm-view .nyans-sum-row--total .nyans-sum-row__value { font-size: 22px !important; }
#confirm-view .nyans-summary table.qa-details tr > th,
#confirm-view .nyans-summary table.qa-details tr > td {
  padding: 9px 10px !important;
  font-size: 12px !important;
  border-bottom: 0 !important;
}

/* --- 税率別内訳（サマリー外に出た場合の保険） --- */
#confirm-view table.qa-details {
  border-radius: 8px !important;
  border: 1px solid #D8DBDD !important;
  background: #FAFAFA !important;
}

/* --- ボタン --- */
#confirm-view .center_sp_ec { text-align: center; padding: 0 0 40px; }
#confirm-view .center_sp_ec > br { display: none; }
#confirm-view input.submit_bottom_sp_ec {
  display: block !important;
  background: #C4653A !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  width: 100% !important;
  height: 60px !important;
  line-height: 60px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(196,101,58,.28);
}
#confirm-view .btn_sp_ec.btn_default_sp_ec,
#confirm-view button.btn_default_sp_ec {
  display: flex !important;
  justify-content: center; align-items: center;
  background: #fff !important;
  color: #C4653A !important;
  border: 1px solid #C4653A !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  width: 100% !important;
  height: 52px !important;
  margin: 12px auto 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#confirm-view .form_inline_sp_ec { display: block !important; margin: 0 !important; }
/* 上部の確定ボタン */
#confirm-view .center_sp_ec.nyans-top-submit { padding: 0 0 32px !important; margin: 0 !important; }

/* --- 見出し・リード文（SPはステップナビ無し） --- */
@media (max-width: 767px) {
  .lp-confirm-wrap { padding: 20px 16px 48px !important; }
  .lp-confirm-wrap h1 { font-size: 22px !important; text-align: center !important; margin: 0 0 10px !important; }
  .lp-confirm-wrap .nyans-confirm-lead { text-align: center; font-size: 13px !important; margin: 0 0 24px !important; }
}

/* ===== nyans:confirm-skin-sp v2 : 明細を4カラム表→カード型に／項目名の折返し解消 =====
   SP幅では「商品名・単価・個数・小計」の4列が潰れて商品名が8行になる。
   LPフォーム側の .nyans-order-item と同じ「画像＋名前＋金額行」の型に寄せる。
   ※ .table_sp_ec を必ず併記してPC側に波及させないこと */
#confirm-view table.qa-orders.table_sp_ec tr:first-child { display: none !important; }
#confirm-view table.qa-orders.table_sp_ec tr {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  padding: 16px 14px !important;
}
#confirm-view table.qa-orders.table_sp_ec td {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
#confirm-view table.qa-orders.table_sp_ec td.qa-name,
#confirm-view table.qa-orders.table_sp_ec td.qa-name.has-thumb {
  flex: 1 1 100%;
  display: flex !important;
  align-items: center;
  gap: 12px;
}
#confirm-view table.qa-orders.table_sp_ec td.qa-name > p {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.6;
}
#confirm-view table.qa-orders.table_sp_ec td.qa-price,
#confirm-view table.qa-orders.table_sp_ec td.qa-quantity,
#confirm-view table.qa-orders.table_sp_ec td.qa-subtotal_price {
  flex: 0 0 auto;
  margin: 12px 0 0 14px;
  font-size: 13px !important;
  color: #2E363A;
  text-align: right !important;
  white-space: nowrap;
}
#confirm-view table.qa-orders.table_sp_ec td.qa-price { margin-left: 0; margin-right: auto; }
#confirm-view table.qa-orders.table_sp_ec td.qa-subtotal_price { font-weight: 700; }

/* 項目名セルが「メールアドレス」で折り返すのを防ぐ */
#confirm-view .menu_sp_ec {
  width: 104px !important;
  font-size: 12px !important;
  white-space: nowrap;
  padding-right: 8px !important;
}
#confirm-view table.table_sp_ec tr > td { padding-left: 8px !important; }

/* 税率別内訳ボックスの地色がSPの表指定に負けるので取り戻す */
#confirm-view .nyans-summary table.qa-details.table_sp_ec {
  background: #F5F5F5 !important;
  border: 0 !important;
  border-radius: 8px !important;
  margin: 0 !important;
}
#confirm-view .nyans-summary table.qa-details.table_sp_ec tr,
#confirm-view .nyans-summary table.qa-details.table_sp_ec tr > th,
#confirm-view .nyans-summary table.qa-details.table_sp_ec tr > td {
  background: transparent !important;
  border: 0 !important;
}

/* ===== nyans:confirm-skin-sp v3 : 細部 ===== */
/* 「入力内容を修正する」はa要素なので下線が出る */
#confirm-view .btn_sp_ec.btn_default_sp_ec,
#confirm-view .center_sp_ec a { text-decoration: none !important; }
/* 税率別内訳ボックスの内側余白を他のカードとそろえる */
#confirm-view .nyans-summary table.qa-details.table_sp_ec tr > th,
#confirm-view .nyans-summary table.qa-details.table_sp_ec tr > td {
  padding: 12px 8px !important;
}
#confirm-view .nyans-summary table.qa-details.table_sp_ec tr > th:first-child { padding-left: 16px !important; }
#confirm-view .nyans-summary table.qa-details.table_sp_ec tr > td:last-child { padding-right: 16px !important; }

/* ===== nyans:confirm-skin-sp v4 : 金額サマリーの並びをPCと同じ読み順に =====
   PCは2カラムなので視覚順が「内訳（左上）→ 総合計（右上）→ 10%外税（左下）」。
   SPで素直に縦積みするとDOM順の「内訳 → 10%外税 → 総合計」になり、順番が入れ替わる。
   カラムを display:contents で解体し、order で並べ直す。 */
#confirm-view .nyans-summary {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  /* PC側の grid 用 align-items:start が flex に持ち越されると子が横に縮む */
  align-items: stretch !important;
}
#confirm-view .nyans-summary__col { display: contents !important; }
#confirm-view .nyans-summary__col > * { margin-bottom: 0 !important; }
#confirm-view .nyans-summary .nyans-sum-box { order: 1; }
#confirm-view .nyans-summary .nyans-sum-box--total { order: 2; }
#confirm-view .nyans-summary table.qa-details.table_sp_ec { order: 3; }

/* ===== nyans:confirm-skin-sp v5 : SPにもステップナビ（JSが挿入）===== */
#confirm-view ul.form_wizard_levels_ec.nyans-step-sp {
  margin: 0 auto 28px !important;
  max-width: 340px;
  padding: 0 !important;
  list-style: none;
}

/* ===== nyans:confirm-skin-sp v6 : ボタン入れ物がcenter_sp_ec以外だった場合の保険 ===== */
#confirm-view .submit_sp_ec,
#confirm-view .center_sp_ec { text-align: center; }
#confirm-view .submit_sp_ec { padding: 0 0 40px !important; }
#confirm-view .submit_sp_ec > br { display: none; }

/* ===================================================================
   nyans:confirm-skin-sp v7 : SPがPCと同じマークアップ（*_ec）で来る場合の
   レスポンシブ対応。767px以下でPC用クラスをそのまま縦積みに整える。
   =================================================================== */
@media (max-width: 767px) {
  /* 土台 */
  .form_container_ec { padding: 0 !important; }
  .lp-confirm-wrap { padding: 20px 16px 48px !important; }

  /* 見出し＋ステップナビ：横並びをやめて縦に。中央寄せ */
  #confirm-view .nyans-confirm-head {
    display: block !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
    border-bottom: 0 !important;
  }
  #confirm-view .nyans-confirm-head h1 {
    font-size: 22px !important;
    text-align: center !important;
    margin: 0 0 8px !important;
  }
  #confirm-view .nyans-confirm-head .nyans-confirm-lead {
    text-align: center;
    font-size: 12px !important;
    margin: 0 0 18px !important;
  }
  #confirm-view .nyans-confirm-head__r { padding-top: 0 !important; }
  #confirm-view .nyans-confirm-head__r ul.form_wizard_levels_ec {
    justify-content: center !important;
    margin: 0 auto !important;
  }

  /* 帯と表 */
  #confirm-view .confirm_subtitle_ec {
    font-size: 15px !important;
    padding: 13px 16px !important;
    text-align: center;
  }
  #confirm-view .table_ec tr > th,
  #confirm-view .table_ec tr > td,
  #confirm-view .table_bordered_ec tr > th,
  #confirm-view .table_bordered_ec tr > td {
    padding: 13px 12px !important;
    font-size: 13px !important;
  }
  #confirm-view table.table_ec { margin-bottom: 24px !important; }
  /* 項目名セルの折返し防止 */
  #confirm-view .table_bordered_ec tr > th.menu_ec,
  #confirm-view .menu_ec {
    width: 104px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* 明細：4カラム表→カード型 */
  #confirm-view table.qa-orders tr:first-child { display: none !important; }
  #confirm-view table.qa-orders tr {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 12px !important;
  }
  #confirm-view table.qa-orders td { border: 0 !important; padding: 0 !important; }
  #confirm-view table.qa-orders td.qa-name,
  #confirm-view table.qa-orders td.qa-name.has-thumb {
    flex: 1 1 100%;
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  #confirm-view table.qa-orders td.qa-name > p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.6;
  }
  #confirm-view .nyans-confirm-thumb { width: 64px !important; height: 64px !important; flex: 0 0 64px !important; }
  #confirm-view table.qa-orders td.qa-price,
  #confirm-view table.qa-orders td.qa-quantity,
  #confirm-view table.qa-orders td.qa-subtotal_price {
    flex: 0 0 auto;
    margin: 10px 0 0 14px;
    font-size: 13px !important;
    white-space: nowrap;
  }
  #confirm-view table.qa-orders td.qa-price { margin-left: 0; margin-right: auto; }
  #confirm-view table.qa-orders td.qa-price::before,
  #confirm-view table.qa-orders td.qa-quantity::before,
  #confirm-view table.qa-orders td.qa-subtotal_price::before {
    font-size: 11px; color: #6E7278; font-weight: 400; margin-right: 4px;
  }
  #confirm-view table.qa-orders td.qa-price::before { content: "単価"; }
  #confirm-view table.qa-orders td.qa-quantity::before { content: "数量"; }
  #confirm-view table.qa-orders td.qa-subtotal_price::before { content: "小計"; }
  #confirm-view table.qa-orders td.qa-subtotal_price { font-weight: 700; }

  /* 金額サマリー：1カラム化＋PCの視覚順（内訳→総合計→10%外税）を維持 */
  #confirm-view .nyans-summary {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    align-items: stretch !important;
    margin-bottom: 28px !important;
  }
  #confirm-view .nyans-summary__col { display: contents !important; }
  #confirm-view .nyans-summary__col > * { margin-bottom: 0 !important; }
  #confirm-view .nyans-summary .nyans-sum-box { order: 1; padding: 14px 16px; }
  #confirm-view .nyans-summary .nyans-sum-box--total { order: 2; }
  #confirm-view .nyans-summary table.qa-details { order: 3; margin: 0 !important; }
  #confirm-view .nyans-sum-row { font-size: 14px; padding: 9px 0; }
  #confirm-view .nyans-sum-row--total .nyans-sum-row__label { font-size: 15px !important; }
  #confirm-view .nyans-sum-row--total .nyans-sum-row__value { font-size: 22px !important; }
  #confirm-view .nyans-summary table.qa-details tr > th,
  #confirm-view .nyans-summary table.qa-details tr > td {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
  #confirm-view .nyans-summary table.qa-details tr > th:first-child { padding-left: 16px !important; }
  #confirm-view .nyans-summary table.qa-details tr > td:last-child { padding-right: 16px !important; }

  /* ボタン */
  #confirm-view input.submit_bottom_ec { height: 60px !important; line-height: 60px !important; font-size: 16px !important; }
  #confirm-view .btn_ec.btn_default_ec, #confirm-view button.btn_default_ec { height: 52px !important; }
  #confirm-view .center_ec { padding-bottom: 40px !important; }
  #confirm-view .center_ec.nyans-top-submit { padding-bottom: 0 !important; margin-bottom: 32px !important; }
}

/* ===== nyans:confirm-skin-sp v8 : 実DOM対応（2026/09/03 保存HTMLベース） ===== */
/* PC用カード化のラベル::beforeは、SPマークアップ（ラベル内蔵）には当てない */
@media (max-width: 767px) {
  #confirm-view table.qa-orders.table_sp_ec td.qa-price::before,
  #confirm-view table.qa-orders.table_sp_ec td.qa-quantity::before,
  #confirm-view table.qa-orders.table_sp_ec td.qa-subtotal_price::before { content: none !important; }
}
/* 10%外税テーブル（JSがqa-detailsクラスとcaptionを付与） */
#confirm-view table.qa-details.table_sp_ec,
#confirm-view .nyans-summary table.qa-details.table_sp_ec {
  background: #F5F5F5 !important;
  border: 0 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  width: 100% !important;
}
#confirm-view table.qa-details .nyans-details-cap {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #2E363A;
  padding: 12px 16px 0;
  background: #F5F5F5;
  border-radius: 8px 8px 0 0;
}
#confirm-view table.qa-details.table_sp_ec tr,
#confirm-view table.qa-details.table_sp_ec tr > td {
  display: table-row;
  background: transparent !important;
  border: 0 !important;
}
#confirm-view table.qa-details.table_sp_ec tr > td {
  display: table-cell;
  padding: 8px 16px 12px !important;
  font-size: 12px !important;
  color: #5A6469 !important;
  white-space: nowrap;
}
/* 商品行カード（SPは1つのtr内にname＋金額tdが並ぶ） */
#confirm-view table.qa-orders.table_sp_ec tr {
  border-bottom: 0 !important;
}
#confirm-view table.qa-orders.table_sp_ec td.qa-name[colspan] { margin-bottom: 4px; }
#confirm-view table.qa-orders.table_sp_ec td.qa-price,
#confirm-view table.qa-orders.table_sp_ec td.qa-quantity,
#confirm-view table.qa-orders.table_sp_ec td.qa-subtotal_price {
  border-bottom: 0 !important;
}

/* ===== nyans:confirm-skin-sp v9 : 10%外税の重複除去／青下線除去／各枠をカート同様に線で囲む ===== */
/* 10%外税：テーブル内蔵のth行は隠し、caption（左上の小見出し）だけ残す */
#confirm-view table.qa-details th { display: none !important; }

/* 「入力内容を修正する」を包む<a>の既定リンク装飾（青・下線）を消す */
#confirm-view .submit_sp_ec a,
#confirm-view .center_sp_ec a {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}
#confirm-view .submit_sp_ec a br { display: none; }

/* 各セクションをカート画面と同じく枠線で囲む。
   border-collapse:collapse だと角丸と干渉して外枠が描かれないため separate に */
#confirm-view table.table_sp_ec,
#confirm-view table.table_bordered_sp_ec {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #D8DBDD !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background: #fff !important;
  overflow: hidden;
}
/* 10%外税テーブルはグレーの箱のまま（枠なし） */
#confirm-view table.qa-details.table_sp_ec {
  border: 0 !important;
  background: #F5F5F5 !important;
  border-radius: 8px !important;
}

/* ===== nyans:confirm-skin-sp v10 : 10%外税ラベルは出さない ===== */
#confirm-view table.qa-details caption,
#confirm-view .nyans-details-cap { display: none !important; }
#confirm-view table.qa-details.table_sp_ec tr > td { padding-top: 12px !important; }

/* ===== nyans:confirm-skin-sp v11 : 10%外税ボックスはSPでは丸ごと出さない ===== */
#confirm-view table.qa-details.table_sp_ec { display: none !important; }

/* ===== nyans:confirm-skin-sp v12 : 上部ボタンはbutton要素になったのでボタン見た目を継承 ===== */
#confirm-view .nyans-top-submit button {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  cursor: pointer;
  font-family: inherit;
}
#confirm-view .nyans-top-submit button.submit_bottom_sp_ec {
  height: 60px !important; line-height: 60px !important;
}
#confirm-view .nyans-top-submit button.submit_bottom_ec {
  max-width: 540px !important; height: 64px !important; line-height: 64px !important; margin: 0 auto !important;
}

/* ===== nyans:confirm-skin-sp v13 : 10%外税ブロックはPCでも出さない =====
   v9で `table.qa-details th{display:none}` をSP限定にせず当てたため、
   PCでは見出しだけ消えて「6,345円 / 635円」の数字だけの帯が残っていた。
   SPと同じく丸ごと非表示にする（税率別内訳は確認メール・受注データに残る）。 */
#confirm-view table.qa-details { display: none !important; }

/* ===== nyans:confirm-skin-sp v14 : 上部ボタンの色が当たっていなかった =====
   主ボタンの配色は `input.submit_bottom_ec` / `input.submit_bottom_sp_ec` で
   指定していたが、上部ボタンは3DS対策で <button> にしたためセレクタが外れ、
   ブラウザ既定の灰色＋青文字のまま出ていた。button側にも同じ指定を当てる。 */
#confirm-view .nyans-top-submit button,
#confirm-view button.submit_bottom_ec,
#confirm-view button.submit_bottom_sp_ec {
  display: block !important;
  background: #C4653A !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  width: 100% !important;
  max-width: 540px !important;
  height: 60px !important;
  line-height: 60px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(196,101,58,.28);
  -webkit-appearance: none;
  appearance: none;
}
#confirm-view .nyans-top-submit button:hover { background: #B25A33 !important; }
@media (min-width: 768px) {
  #confirm-view .nyans-top-submit button { height: 64px !important; line-height: 64px !important; font-size: 17px !important; }
}

/* ===== nyans:logo-header v1 : 最上部のロゴヘッダー（ショップと同ロゴ） ===== */
.nyans-lp-header {
  background: #fff;
  border-bottom: 1px solid #EEF0F1;
  padding: 14px 16px;
  text-align: center;
}
.nyans-lp-header__link { display: inline-block; line-height: 0; }
.nyans-lp-header__logo { width: auto; height: 30px; }
@media (max-width: 767px) {
  .nyans-lp-header { padding: 12px 16px; }
  .nyans-lp-header__logo { height: 24px; }
}