/*-----------------------
このファイルはフロント(include/head/katsufujiya-css.html)と
管理画面プレビュー(admin.html の editor-css セクション)の両方から
同一内容で読み込む。管理画面プレビューと公開ページの見た目を一致させるため、
katsufujiya.css本体(フロント全量CSS)からは分離している。

このファイルの .acms-entry 向けルールは、注文/決済画面の支払い方法・配送方法
案内ボックス(.orderInfoBack、themes/netstore@katsufujiya@bootstrap3/order/form/
main.html 経由で Entry_Body が出力するユニット本文のラッパー)にも同じ見た目・
同じブロックエディター対応を適用するため .orderInfoBack を併記している
(docs/steering/20260817-block-editor-order-info-style/requirement.md)。
ただし .acms-grid-r との祖先/子孫関係を前提にしたルール(.acms-entry .acms-grid-r ul等)は、
.orderInfoBack 側に .acms-grid-r が現れることがないため対象外。
-------------------------*/

/*-----------------------
本文の基本タグ共通スタイル(見出し/段落/リスト/テーブル/リンク等)
katsufujiya.css内の同名ルールを複製したもの。EC固有クラス(storeEntry/
itemInfoBox/tag-list等、従来ユニット専用UI)と合成されたルールは対象外。
katsufujiya.css側が本来の定義元のため、本文の見た目を変える場合は
katsufujiya.css側を修正し、このセクションにも同じ内容を反映すること。
ただし本文テーブル(.acms-entry/.entry-container配下)のスタイルは例外で、
本ファイルが唯一の定義元(katsufujiya.css側からは削除済み)。EC画面用の
テーブル(.orderPanelBody/.orderConfirmWrapper/.kf-table等)は移動対象外のため
katsufujiya.css側に残している。
出現順序はkatsufujiya.css内の元の並び順(カスケードの上書き順)を維持。
-------------------------*/

/* テーブルユニット(横スクロール表示)のラッパー: include/unit/extend.html の unit#table_slide */
.entry-container-slide-wrap {
  overflow: hidden;
}

.entry-container-slide {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 768px) {
  .entry-container-slide {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .entry-container-slide table,
  .entry-container-slide tbody,
  .entry-container-slide tr,
  .entry-container-slide td,
  .entry-container-slide th {
    white-space: nowrap;
  }
}

.acms-entry table,
.orderInfoBack table {
  width: 100%;
  margin: 0 0 15px;
}


.acms-entry table,
.orderInfoBack table {
  margin-right: 10px;
  margin-left: 10px;
}

/* 従来ユニット/ブロックエディターを問わずスクロールする table 要素自体に左右の余白を持たせる(はみ出し防止) */
.acms-entry .acms-table-scrollable,
.acms-entry .entry-container-slide,
.acms-entry .is-scrollable,
.orderInfoBack .acms-table-scrollable,
.orderInfoBack .entry-container-slide,
.orderInfoBack .is-scrollable {
  margin-right: 10px;
  margin-left: 10px;
  box-sizing: border-box;

  table {
    margin-right: 0;
    margin-left: 0;
  }
}

.acms-entry table dt,
.acms-entry table dd,
.orderInfoBack table dt,
.orderInfoBack table dd {
  margin-bottom: 0px;
  line-height: 1.7;
  font-size: 15px;
  float: left;
}

.acms-entry table dt,
.orderInfoBack table dt {
  width: 30%;
}

.acms-entry table dd,
.orderInfoBack table dd {
  width: 69%;
}

.acms-entry table td,
.orderInfoBack table td {
  border: 1px solid #cccccc;
  vertical-align: middle;
  padding: 15px 20px;
}

.acms-entry table th,
.orderInfoBack table th {
  border: 1px solid #cccccc;
  background-color: #eeeeee;
  text-align: center;
  vertical-align: middle;
  padding: 10px 20px;
  white-space: nowrap;
}

.acms-entry table td > *,
.acms-entry table th > *,
.orderInfoBack table td > *,
.orderInfoBack table th > * {
  margin-left: 0;
  margin-right: 0;
}

.acms-entry table td > *:last-child,
.acms-entry table th > *:last-child,
.orderInfoBack table td > *:last-child,
.orderInfoBack table th > *:last-child {
  margin-bottom: 0;
}

/* スクロールするテーブル(従来のテーブルユニット・ブロックエディターのテーブルブロック共通) */
.acms-table-scrollable th,
.acms-table-scrollable td,
.js-table-unit-scroll-hint th,
.js-table-unit-scroll-hint td {
  word-break: keep-all;
  white-space: nowrap;
}

/*
フロントは scroll-hint ライブラリ(js/dest/index.js)が実行時に
.tableWrapper.acms-table-scrollable へ style="position:relative;overflow:auto;"
を動的付与するが、そのJSは管理画面(編集画面)には読み込まれないため、
CSS側でも同じoverflow指定をフォールバックとして持たせる。
これがないと、はみ出しがブロックエディターのコンテナ全体に伝播し、
テーブルではなくコンテナ自体が横スクロールしてしまう。
本体側のブロックエディター(Tiptap)テーブル拡張の実装変更により、
.tableWrapperへ acms-table-scrollable クラスが付与されなくなり、代わりに
テーブル要素自体に data-scrollable="true" 属性 / js-table-unit-scroll-hint
クラスが付与される挙動に変わったため(2026-09時点で実機確認)、
:has()での判定を追加してどちらの付与方式でもフォールバックが効くようにしている。
*/
.tableWrapper.acms-table-scrollable,
.tableWrapper:has(> table[data-scrollable='true']),
.tableWrapper:has(> .js-table-unit-scroll-hint) {
  position: relative;
  overflow: auto;
}

.acms-entry ul {
  padding-right: 10px;
  /* 編集画面(.acms-grid-r外)向けデフォルト値。ブラウザ標準のul padding-left(40px)は
     閲覧画面側のmargin-left(-20px)と組み合わさって実効20pxになる前提のため、
     編集画面では単独でその実効値(40-20=20px)を再現する。
     .orderInfoBackは前後を問わず.acms-grid-rが現れないため、このデフォルト値を
     フロント・管理画面プレビュー共通で使う。 */
  padding-left: 20px;
}

.orderInfoBack ul {
  padding-right: 10px;
}

/* margin-left/padding-leftは.acms-grid-rの左右paddingを打ち消す前提の値のため、
   グリッドに囲まれない編集画面ではへこんでしまう。閲覧画面限定にする。
   .acms-grid-rは entry.html等では.acms-entryの内側（子孫）だが、
   cartList.htmlの注意書きモーダル等では.acms-entryの外側（祖先）になるため、
   両方のDOM構造をカバーする。 */
.acms-entry .acms-grid-r ul,
.acms-grid-r .acms-entry ul {
  margin-left: -20px;
  padding-left: 40px;
}

.acms-entry li:last-child,
.orderInfoBack li:last-child {
  margin-bottom: 0;
}

.acms-entry ol li,
.orderInfoBack ol li {
  list-style-type: decimal;
  padding-left: 0;
  background: none;
}

.acms-entry li a,
.acms-entry li a:visited,
.orderInfoBack li a,
.orderInfoBack li a:visited {
  color: #6ca51e;
}

.acms-entry a,
.acms-entry a:visited,
.orderInfoBack a,
.orderInfoBack a:visited {
  color: #6ca51e;
}

.acms-entry a:hover,
.orderInfoBack a:hover {
  color: #6ca51e;
  background-color: #f0f6e7;
}

.acms-entry a:hover img,
.orderInfoBack a:hover img {
  background-color: transparent;
}

/* katsufujiya.cssの同名リセット（.kf-btn/.acms-btn-adminをリンク色から除外）が
   ここに複製されていなかったため、このファイルの.acms-entry a:visited等（後読み込みで
   詳細度が同じため勝ってしまう）によりボタン内文字色が緑になる回帰が発生していた。 */
.acms-entry a.acms-btn-admin,
.orderInfoBack a.acms-btn-admin {
  color: #333333;
}
.acms-entry a.kf-btn,
.orderInfoBack a.kf-btn {
  color: #ffffff;
}
.acms-entry a.kf-btn:active,
.orderInfoBack a.kf-btn:active {
  color: #ffffff;
}

.acms-entry a:active,
.orderInfoBack a:active {
  color: #6ca51e;
}

.acms-entry p,
.orderInfoBack p {
  margin-bottom: 20px;
  /* themes/bootstrap3/css/acms.css の同名ルールを複製したもの(margin-right/left: 10px)。
     .acms-grid-rの左右マイナスマージンを打ち消すための値で、
     acms.min.cssは管理画面には読み込まれないため、ここで明示する。 */
  margin-right: 10px;
  margin-left: 10px;
}

/* ネットストア商品ページ（.storeEntry、entryBody.html）は .acms-grid-r を使わないため、
   上記の margin-right/left: 10px は不要かつ有害（ul・.acms-container等の左端と揃わない）。
   商品ページに限定して打ち消す。p のほか、h2〜h6・dl・table・blockquote・hr にも
   同種の .acms-grid-r 前提の margin-right/left: 10px があるため、まとめて打ち消す
   （.acms-table-scrollable 等の「はみ出し防止」用マージンは別目的のため対象外）。 */
.acms-entry.storeEntry p,
.acms-entry.storeEntry h2,
.acms-entry.storeEntry h3,
.acms-entry.storeEntry h4,
.acms-entry.storeEntry h5,
.acms-entry.storeEntry h6,
.acms-entry.storeEntry dl,
.acms-entry.storeEntry table,
.acms-entry.storeEntry hr {
  margin-right: 0;
  margin-left: 0;
}

/* blockquoteの元ルールは :not(.entry-container > blockquote) を含み詳細度が高いため
   (0,2,2)、上記と同じ (0,2,1) では打ち消せない。:not() 部分を複製して詳細度を揃える。 */
.acms-entry.storeEntry blockquote:not(.entry-container > blockquote) {
  margin-right: 0;
  margin-left: 0;
}

.acms-entry.storeEntry .acms-container
{
  padding-right: 0;
  padding-left: 0;
}

.acms-entry.storeEntry ul,
.acms-entry.storeEntry ol,
{
  margin-top: 0;
}

/* 管理画面のテーブルレイアウト用リセット（acms-system.cssの
   .acms-admin-table-admin-edit td p, .acms-admin-table-admin-edit th p { margin: 0 }）が
   詳細度で競合し、ブロックエディター内の p の margin を打ち消してしまう問題への対処。
   ブロックエディターのコンテナクラスを含めて詳細度を上げ、フロント側と同じ余白を保証する。 */
.acms-admin-block-editor .acms-entry p,
.acms-admin-block-editor .orderInfoBack p {
  margin-bottom: 20px;
  margin-right: 10px;
  margin-left: 10px;
}

.acms-entry h1,
.orderInfoBack h1 {
  font-size: 24px;
  margin-bottom: 32px;
  font-weight: bold;
  line-height: 1.2;
  font-family:
    'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo,
    'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana, sans-serif;
}

.acms-entry h2,
.orderInfoBack h2 {
  margin: 20px 0;
  font-size: 18px;
  font-weight: bold;
  border-left: 5px solid #6aa900;
  padding-left: 15px;
  line-height: 1.2;
  margin-bottom: 40px;
  font-family:
    'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo,
    'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana, sans-serif;
}
.acms-entry h2,
.orderInfoBack h2 {
  margin-left: 10px;
  margin-right: 10px;
}

.acms-entry h3,
.orderInfoBack h3 {
  margin: 15px 10px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  font-family:
    'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo,
    'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana, sans-serif;
}
.acms-entry h3,
.orderInfoBack h3 {
  padding: 10px 0;
  border-bottom: 2px solid #6aa900;
}

.acms-entry h4,
.acms-entry h5,
.acms-entry h6,
.orderInfoBack h4,
.orderInfoBack h5,
.orderInfoBack h6 {
  padding: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  font-family:
    'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo,
    'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana, sans-serif;
}

/* themes/bootstrap3/css/acms.css の同名ルールを複製したもの(h2〜h6/dl/pに共通の
   margin-right/left: 10px)。.acms-grid-r の左右マイナスマージンを
   打ち消すための値で、acms.min.cssは管理画面には読み込まれないため、ここで明示する。
   h2/h3は既存のkatsufujiya.css側の値(同じ10px)を複製済みのため対象外。 */
.acms-entry h4,
.acms-entry h5,
.acms-entry h6,
.acms-entry dl,
.orderInfoBack h4,
.orderInfoBack h5,
.orderInfoBack h6,
.orderInfoBack dl {
  margin-right: 10px;
  margin-left: 10px;
}

.acms-entry dt,
.orderInfoBack dt {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.7;
}

.acms-entry p + h2,
.acms-entry p + h3,
.acms-entry p + h4,
.acms-entry p + h5,
.acms-entry p + h6,
.orderInfoBack p + h2,
.orderInfoBack p + h3,
.orderInfoBack p + h4,
.orderInfoBack p + h5,
.orderInfoBack p + h6 {
  margin-top: 2em;
}
.acms-entry hr + h2,
.acms-entry hr + h3,
.acms-entry hr + h4,
.acms-entry hr + h5,
.acms-entry hr + h6,
.orderInfoBack hr + h2,
.orderInfoBack hr + h3,
.orderInfoBack hr + h4,
.orderInfoBack hr + h5,
.orderInfoBack hr + h6 {
  margin-top: 2em;
}

.acms-entry ul + h2,
.acms-entry ul + h3,
.acms-entry ul + h4,
.acms-entry ul + h5,
.acms-entry ul + h6,
.orderInfoBack ul + h2,
.orderInfoBack ul + h3,
.orderInfoBack ul + h4,
.orderInfoBack ul + h5,
.orderInfoBack ul + h6 {
  margin-top: 2em;
}
.acms-entry ol + h2,
.acms-entry ol + h3,
.acms-entry ol + h4,
.acms-entry ol + h5,
.acms-entry ol + h6,
.orderInfoBack ol + h2,
.orderInfoBack ol + h3,
.orderInfoBack ol + h4,
.orderInfoBack ol + h5,
.orderInfoBack ol + h6 {
  margin-top: 2em;
}
.acms-entry table + h2,
.acms-entry table + h3,
.acms-entry table + h4,
.acms-entry table + h5,
.acms-entry table + h6,
.orderInfoBack table + h2,
.orderInfoBack table + h3,
.orderInfoBack table + h4,
.orderInfoBack table + h5,
.orderInfoBack table + h6 {
  margin-top: 2em;
}

.acms-entry h2 + table,
.acms-entry h3 + table,
.acms-entry h4 + table,
.acms-entry h5 + table,
.acms-entry h6 + table,
.orderInfoBack h2 + table,
.orderInfoBack h3 + table,
.orderInfoBack h4 + table,
.orderInfoBack h5 + table,
.orderInfoBack h6 + table {
  margin-top: 2em;
}

/* Bootstrapの.tableと併用されたテーブルのth背景を、本文では白に戻す */
.acms-entry .table > tbody > tr > th,
.orderInfoBack .table > tbody > tr > th {
  background-color: #fff;
}

.acms-entry .caption,
.orderInfoBack .caption {
  font-size: 12px;
}

.acms-entry a:hover img,
.orderInfoBack a:hover img {
  opacity: 0.7;
}

.acms-entry em,
.orderInfoBack em {
  font-weight: bold;
  font-style: normal;
  color: #333333;
}

.acms-entry strong,
.orderInfoBack strong {
  font-style: normal;
  color: #ff0000;
}

/* katsufujiya.css の `b, strong { font-weight: normal; }`（サイト全体でstrong要素を
   太字にしない方針）が管理画面には読み込まれず、ブラウザ標準の太字が残ってしまう問題への対処。
   フロント側と同じ見た目（赤字のみ、太字にしない）に揃える。 */
b,
strong {
  font-weight: normal;
}

@media screen and (max-width: 768px) {
  /* SPではユニットグループ／ブロックエディターのコンテナ内テーブルを縦積みにする。
     直後の .acms-entry table th と詳細度が同じ(class 1 + 要素 2)ため、
     padding が 5px 側で上書きされる元の記述順を保つ目的でこの位置に置く。 */
  .entry-container table th,
  .entry-container table td {
    display: block;
    padding: 6px 10px;
    text-align: left;
    margin-top: -1px;
    width: 100%;
  }

  .acms-entry table th,
  .orderInfoBack table th {
    font-size: 13px;
    padding: 5px;
    line-height: 1.5;
  }
}

/* RWD Table: src/js/table-transform.js が th のみで構成された1行目を持つ
   本文テーブルに .js-rwd-table を付与し、各 td に data-th を埋める。
   SPではヘッダ行を隠して td の前に見出し名を疑似要素で表示する。
   (このJSは管理画面には読み込まれないため、編集画面では適用されない) */
.acms-entry .js-rwd-table td:before {
  display: none;
}
@media screen and (max-width: 768px) {
  .acms-entry .js-rwd-table th {
    display: none;
  }
  .acms-entry .js-rwd-table td {
    display: block;
  }
  .acms-entry .js-rwd-table td:before {
    font-weight: bold;
    margin-right: 10px;
    display: inline-block;
    font-size: 13px;
  }
}

/* katsufujiya.css内で後方に再定義され、実際の見た目として優先されているルール群 */
.acms-entry ul,
.orderInfoBack ul {
  margin-bottom: 20px;
}

.acms-entry .acms-grid-r ul {
  margin-left: -10px;
}

.acms-entry ol,
.orderInfoBack ol {
  margin-bottom: 20px;
  /* 編集画面向けデフォルト。閲覧画面側の実効値(40-10=30px)を再現する。 */
  padding-left: 30px;
}

.acms-entry .acms-grid-r ol {
  margin-left: -10px;
  padding-left: 40px;
}

.acms-entry ul li,
.orderInfoBack ul li {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 10px;
  list-style-type: none;
  padding-left: 0.5em;
  position: relative;
}

.acms-entry ol li,
.orderInfoBack ol li {
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 10px;
  padding-left: 0.5em;
  position: relative;
}

.acms-entry ul li:before,
.orderInfoBack ul li:before {
  content: '';
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
  background: #bababa;
  position: absolute;
  left: -8px;
  top: 0.5em;
}

/* ブロックエディターは各liの中身を <li><p>...</p></li> のように
   pタグで包んで出力する（従来ユニットのリストはliに直接テキストを持ち、
   pタグを挟まない）。.acms-entry p / .orderInfoBack p のmargin-bottom:20pxが
   liの margin-bottom:10px と隣接マージンとして結合(collapse)し、
   従来ユニットのリストより項目間の余白が広くなってしまうため、
   li内のpのマージンを打ち消して従来ユニットと同じ余白に揃える。 */
.acms-entry li p,
.orderInfoBack li p {
  margin: 0;
}

.acms-entry h2,
.orderInfoBack h2 {
  padding-left: 10px;
  line-height: 1;
}

.acms-entry h3,
.orderInfoBack h3 {
  padding: 0;
  border: none;
}

.acms-entry h4,
.orderInfoBack h4 {
  font-size: 14px;
}

.acms-entry h2,
.orderInfoBack h2 {
  border-left: 7px solid #6aa900;
  padding-left: 6px;
  line-height: 1.3;
  margin-bottom: 12px;
}

.acms-entry h3,
.orderInfoBack h3 {
  margin-bottom: 10px;
  margin-top: 20px;
}

/* [class*='column-table-'] は テーブルユニット(unit#table_slide)のラッパー
   .column-table-{align} を指す(include/unit/extend.html) */
.acms-entry p + h2,
.acms-entry hr + h2,
.acms-entry ul + h2,
.acms-entry ol + h2,
.acms-entry table + h2,
.acms-entry [class*='column-table-'] + h2,
.orderInfoBack p + h2,
.orderInfoBack hr + h2,
.orderInfoBack ul + h2,
.orderInfoBack ol + h2,
.orderInfoBack table + h2,
.orderInfoBack [class*='column-table-'] + h2 {
  margin-top: 40px;
}

.acms-entry p + h3,
.acms-entry hr + h3,
.acms-entry ul + h3,
.acms-entry ol + h3,
.acms-entry table + h3,
.acms-entry [class*='column-table-'] + h3,
.orderInfoBack p + h3,
.orderInfoBack hr + h3,
.orderInfoBack ul + h3,
.orderInfoBack ol + h3,
.orderInfoBack table + h3,
.orderInfoBack [class*='column-table-'] + h3 {
  margin-top: 25px;
}

.acms-entry h2 + h3,
.orderInfoBack h2 + h3 {
  margin-top: 22px;
}

.acms-entry .acms-grid-r ul {
  margin-left: -20px;
}

.acms-entry li ul,
.orderInfoBack li ul {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* .orderInfoBack 固有の白背景カード（.acms-entry には対応なし、katsufujiya.cssの
   同名ルールを複製したもの）。管理画面では本体が .acms-admin-block-editor-content
   .acms-entry へ orderInfoBack クラスを上乗せする(themes/katsufujiya@bootstrap3/admin.html
   の admin-js セクション、対象はbid=7のみ)ことで、このスタイルも反映される。 */
.orderInfoBack {
  padding: 20px;
  background: #fff;
  border-radius: 5px;
}

.orderInfoBack {
  padding: 20px 10px;
}

.orderInfoBack > p,
.orderInfoBack > h3,
.orderInfoBack > h2 {
  padding: 0 10px;
}

.orderInfoBack [class*='acms-col'] p {
  padding: 0;
}

.orderInfoBack > [class*='column-image'] {
  padding: 0 10px;
}

.orderInfoBack > ul {
  margin-left: -5px;
}

/*-----------------------
ブロックエディター固有の構造用スタイル
(https://developer.a-blogcms.jp/document/block-editor/)
参照元: themes/system/src/scss/editor/ 配下
-------------------------*/

/* themes/bootstrap3/css/acms.css の .acms-entry blockquote を複製したもの
   (margin: 0 0 20px; padding: 10px 20px; border-left: solid 5px #ccc;)。
   acms.min.cssは管理画面には読み込まれないため、ここで明示する。 */
.acms-entry blockquote:not(.entry-container > blockquote),
.orderInfoBack blockquote:not(.entry-container > blockquote) {
  margin-right: 10px;
  margin-left: 10px;
  padding: 10px 20px;
  border-left: solid 5px #ccc;
}

.acms-entry hr,
.orderInfoBack hr {
  margin-right: 10px;
  margin-left: 10px;
}

/* カラムレイアウト(2/3カラム) */
.acms-entry [data-type='columns'],
.orderInfoBack [data-type='columns'] {
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;
  gap: 0;
}

.acms-entry [data-type='columns'].layout-two-column,
.orderInfoBack [data-type='columns'].layout-two-column {
  /* minmax(0, 1fr): CSS Gridの既定挙動では各カラムの最小幅がコンテンツの
     自然幅(min-content)未満に縮まらないため、テーブル等の幅が広い要素が
     カラム内にあるとグリッド自体がコンテナ幅を超えてはみ出す。0を許容して防ぐ。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.acms-entry [data-type='columns'].layout-three-column,
.orderInfoBack [data-type='columns'].layout-three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 画像ブロック(figure) */
.acms-entry figure,
.acms-entry [role='figure']:not(:has(a[href*='media-download'], a[href*='storage'])),
.orderInfoBack figure,
.orderInfoBack [role='figure']:not(:has(a[href*='media-download'], a[href*='storage'])) {
  margin-block: 0 1rem;
  margin-inline: 0;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  line-height: 0;
  text-align: center;
}

.acms-entry figure a,
.acms-entry [role='figure']:not(:has(a[href*='media-download'], a[href*='storage'])) a,
.orderInfoBack figure a,
.orderInfoBack [role='figure']:not(:has(a[href*='media-download'], a[href*='storage'])) a {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.acms-entry figure a:hover,
.acms-entry [role='figure']:not(:has(a[href*='media-download'], a[href*='storage'])) a:hover,
.orderInfoBack figure a:hover,
.orderInfoBack [role='figure']:not(:has(a[href*='media-download'], a[href*='storage'])) a:hover {
  opacity: 0.7;
}

.acms-entry figure img,
.acms-entry [role='figure']:not(:has(a[href*='media-download'], a[href*='storage'])) img,
.orderInfoBack figure img,
.orderInfoBack [role='figure']:not(:has(a[href*='media-download'], a[href*='storage'])) img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.acms-entry figcaption,
.acms-entry [role='figure']:not(:has(a[href*='media-download'], a[href*='storage']), .column-file) .caption,
.orderInfoBack figcaption,
.orderInfoBack [role='figure']:not(:has(a[href*='media-download'], a[href*='storage']), .column-file) .caption {
  display: block;
  margin: 4px 0 0;
  font-size: 0.9em;
  line-height: 1.3;
}

/* 画像ブロックの表示幅(v3.2.0〜3.2.1互換) */
.acms-entry [data-type='imageBlock'] .media-width-25,
.orderInfoBack [data-type='imageBlock'] .media-width-25 {
  max-width: 25%;
}

.acms-entry [data-type='imageBlock'] .media-width-33,
.orderInfoBack [data-type='imageBlock'] .media-width-33 {
  max-width: 33%;
}

.acms-entry [data-type='imageBlock'] .media-width-50,
.orderInfoBack [data-type='imageBlock'] .media-width-50 {
  max-width: 50%;
}

.acms-entry [data-type='imageBlock'] .media-width-66,
.orderInfoBack [data-type='imageBlock'] .media-width-66 {
  max-width: 66%;
}

.acms-entry [data-type='imageBlock'] .media-width-75,
.orderInfoBack [data-type='imageBlock'] .media-width-75 {
  max-width: 75%;
}

.acms-entry [data-type='imageBlock'] .media-width-100,
.orderInfoBack [data-type='imageBlock'] .media-width-100 {
  max-width: 100%;
}

/* ファイルブロック(アイコン型) */
.acms-entry [data-type='fileBlock'][data-display-type='icon'],
.orderInfoBack [data-type='fileBlock'][data-display-type='icon'] {
  margin-block: 0 1rem;
  margin-inline: 10px;
  font-size: 0;
  text-align: center;
}

.acms-entry [data-type='fileBlock'][data-display-type='icon'] img,
.orderInfoBack [data-type='fileBlock'][data-display-type='icon'] img {
  display: inline-block;
  width: 56px;
  max-width: 100%;
  height: auto;
}

.acms-entry [data-type='fileBlock'][data-display-type='icon'] .caption,
.orderInfoBack [data-type='fileBlock'][data-display-type='icon'] .caption {
  display: block;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.acms-entry [data-type='fileBlock'][data-display-type='icon'] a,
.orderInfoBack [data-type='fileBlock'][data-display-type='icon'] a {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.acms-entry [data-type='fileBlock'][data-display-type='icon'] a:hover,
.orderInfoBack [data-type='fileBlock'][data-display-type='icon'] a:hover {
  opacity: 0.7;
}

/* リンクボタン／ファイルブロック(ボタン型) */
.acms-entry [data-type='linkButton'],
.acms-entry [data-type='fileBlock'][data-display-type='button'],
.orderInfoBack [data-type='linkButton'],
.orderInfoBack [data-type='fileBlock'][data-display-type='button'] {
  margin-block: 0 1rem;
  margin-inline: 10px;
}

.acms-entry [data-type='linkButton'] a,
.acms-entry [data-type='fileBlock'][data-display-type='button'] a,
.orderInfoBack [data-type='linkButton'] a,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'] a {
  box-sizing: border-box;
  display: inline-flex;
  gap: 0.5rem;
  place-items: center;
  min-height: 40px;
  padding: 0.625rem 1.5rem;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
  background-color: #6aa900;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.acms-entry [data-type='linkButton'] a:link,
.acms-entry [data-type='linkButton'] a:visited,
.acms-entry [data-type='fileBlock'][data-display-type='button'] a:link,
.acms-entry [data-type='fileBlock'][data-display-type='button'] a:visited,
.orderInfoBack [data-type='linkButton'] a:link,
.orderInfoBack [data-type='linkButton'] a:visited,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'] a:link,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'] a:visited {
  color: #fff;
}

.acms-entry [data-type='linkButton'] a:hover,
.acms-entry [data-type='fileBlock'][data-display-type='button'] a:hover,
.orderInfoBack [data-type='linkButton'] a:hover,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'] a:hover {
  color: #fff;
  background-color: #70b300;
}

/* セカンダリー(kf-btn-default) */
.acms-entry [data-type='linkButton'].kf-btn-default a,
.acms-entry [data-type='fileBlock'][data-display-type='button'].kf-btn-default a,
.orderInfoBack [data-type='linkButton'].kf-btn-default a,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'].kf-btn-default a {
  color: #666666;
  background-color: #eeeeee;
  border: 1px solid #d6d6d6;
}

.acms-entry [data-type='linkButton'].kf-btn-default a:link,
.acms-entry [data-type='linkButton'].kf-btn-default a:visited,
.acms-entry [data-type='fileBlock'][data-display-type='button'].kf-btn-default a:link,
.acms-entry [data-type='fileBlock'][data-display-type='button'].kf-btn-default a:visited,
.orderInfoBack [data-type='linkButton'].kf-btn-default a:link,
.orderInfoBack [data-type='linkButton'].kf-btn-default a:visited,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'].kf-btn-default a:link,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'].kf-btn-default a:visited {
  color: #666666;
}

.acms-entry [data-type='linkButton'].kf-btn-default a:hover,
.acms-entry [data-type='fileBlock'][data-display-type='button'].kf-btn-default a:hover,
.orderInfoBack [data-type='linkButton'].kf-btn-default a:hover,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'].kf-btn-default a:hover {
  color: #666666;
  background-color: #e0e0e0;
}

.acms-entry [data-type='fileBlock'][data-display-type='button'] img,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'] img {
  width: auto;
  height: 1em;
  height: 1lh;
}

.acms-entry [data-type='fileBlock'][data-display-type='button'] .caption,
.orderInfoBack [data-type='fileBlock'][data-display-type='button'] .caption {
  margin: 0;
  color: currentColor;
}

/* 区切り線(ブロックエディター) */
.acms-entry [data-type='horizontalRule'],
.orderInfoBack [data-type='horizontalRule'] {
  margin-block: 0 1rem;
}

.acms-entry [data-type='horizontalRule'] hr,
.orderInfoBack [data-type='horizontalRule'] hr {
  margin-block: 0;
}

/* ブロックエディターの新配置クラス(左寄せ/右寄せ/中央寄せ)。
   画像とキャプション(<p class="caption">)が同じ要素内の2つの子要素になるため、
   flex-direction を指定しないと横並び(row)になりキャプションが画像の横・前に来て
   レイアウトが崩れる。縦積み(column)にしたうえで、交差軸の位置決めを
   justify-content ではなく align-items で行う。 */
.acms-entry .align-left,
.orderInfoBack .align-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.acms-entry .align-right,
.orderInfoBack .align-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.acms-entry .align-center,
.orderInfoBack .align-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}