@charset "utf-8";
/* ==============================================
 4.3 と 2系の CSS を一緒に使うための調整（2026-10-29 Claude）
 読み込む順番：4.3 の style.css → このファイル → 2系の CSS → customize.css
=============================================== */

/* 4.3 の style.css（Bootstrap の reboot）は、全部の要素を border-box にする。
   2系は content-box が前提なので戻す。4.3 の部品（ec- のクラス）の中だけ border-box のまま。
   2系の CSS で box-sizing を書いているところは、2系の CSS が後に読み込まれるので 2系が勝つ */
*,
*::before,
*::after {
  box-sizing: content-box;
}
[class^="ec-"],
[class*=" ec-"],
[class^="ec-"] *,
[class*=" ec-"] *,
[class^="ec-"] *::before,
[class*=" ec-"] *::before,
[class^="ec-"] *::after,
[class*=" ec-"] *::after {
  box-sizing: border-box;
}

/* 4.3 は必須の項目の名前（label）に class="required" を付ける。2系の add.css の .required（赤い背景の「必須」マーク、幅 40px）が
   効いてしまうので、4.3 の .ec-label の見た目に戻す（2系の「必須」マークは 4.3 では使っていない） */
.ec-label.required {
  display: inline-block;
  width: auto;
  margin: 0 0 5px;
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: bold;
  line-height: inherit;
  text-align: inherit;
}

/* 4.3 の style.css（Bootstrap の reboot）は label を inline-block にする。お支払方法などのラジオ・チェックボックスで、
   長いラベル（「カード決済 ※デビットカードを…」）が丸ごと次の行に落ちるので、文章として折り返すようにする */
.ec-radio label,
.ec-checkbox label {
  display: inline;
}

/* 4.3 の style.css（Bootstrap）の .btn が、2系の <div class="btn">（商品一覧の Details など）にも効いて、
   ボタンが inline-block・余白付きになるので消す。2系の CSS の .btn は全部「#cart_area .btn」のような書き方なので、2系のほうが勝つ */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn:first-child:active {
  display: block;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  vertical-align: baseline;
  cursor: auto;
  -webkit-user-select: auto;
  user-select: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: none;
}

/* 当サイトについてなどの表（ec-borderedDefs に act_helpDefs を付けたもの）。4.3 の style.css は、行の上に 15px・下に 4px の余白を取り、
   値の行の高さを 3 倍（PC）にしているので、文の上が下より広く、複数行のメッセージは行の間が空きすぎる。上下の余白をそろえて行の高さを詰める。
   入力の画面（会員登録・購入など）の ec-borderedDefs は 4.3 のまま */
.ec-borderedDefs.act_helpDefs dl {
  padding: 14px 0;
}
.ec-borderedDefs.act_helpDefs dt {
  padding-top: 0;
}
.ec-borderedDefs.act_helpDefs dd {
  line-height: 1.8;
}
@media only screen and (min-width: 768px) {
  .ec-borderedDefs.act_helpDefs dl {
    align-items: baseline;
  }
  .ec-borderedDefs.act_helpDefs dt .ec-label {
    margin-bottom: 0;
  }
}

/* カートの注意書き（act の Cart/index.twig で足した、2系のカートにあった文）。明細の表と同じ幅にする（4.3 の PC の明細は左右 10% 空ける）。
   4.3 の文字の色（#525263）と赤（.ec-color-red の #DE5D50）は薄くて読みにくい（利用者）ので、文字を濃く、赤い 2 行は濃い赤にする（太字は太すぎて読みにくい＝利用者） */
.ec-cartRole .act_cartNotice {
  width: 100%;
  padding-top: 16px;
  color: #222;
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
}
.ec-cartRole .act_cartNotice .ec-color-red {
  color: #c00;
}
.ec-cartRole .act_cartNotice p {
  margin: 0 0 10px;
}
.ec-cartRole .act_cartNotice .act_cartNotice__guide {
  padding-top: 6px;
  font-size: 16px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole .act_cartNotice {
    margin: 0 10%;
    width: 80%;
  }
}

/* ご注文内容確認の送料の注意（act の Shopping/confirm.twig で足した、2系の確認画面にあった文）。合計の箱の中、「注文する」の上。
   箱が狭く、15px の赤では読みにくく、13px では小さい（利用者）ので 14px にする。頭の「※」の後ろで折り返した行をそろえ、ボタンとの間を空ける */
.ec-totalBox .act_orderNotice {
  margin: 14px 0 12px;
  padding-left: 1em;
  text-indent: -1em;
  color: #c00;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

/* 2系の枠の一番外（<div class="frame_outer container-fluid pure-container">）の container-fluid に、4.3 の style.css（Bootstrap）の
   .container-fluid（幅 100% ＋ 左右に --bs-gutter-x の半分＝12px ずつの余白）が効く。このファイルで要素を content-box に戻しているので、
   ページ全体が 24px 広くなり、左に空白・右にはみ出しが出る（スマホで目立つ）。2系の CSS に .container-fluid は無いので、余白を消して 2系に戻す */
.frame_outer.container-fluid {
  --bs-gutter-x: 0;
  padding-left: 0;
  padding-right: 0;
}

/* トップの HOT ITEMS（Block/recommend_product_block.twig）：縦長の写真（APPLEBOX TOPPER など）があると、matchHeight で
   その行の写真の枠が全部その高さまで伸びる。写真の高さに上限を付けて、枠が伸びないようにする（2026-11-02 利用者） */
.listItems .product_item .productImage img {
  max-height: 240px;
  width: auto;
  max-width: 100%;
}