。
必須には * が付くので、任意側に注記が無くても迷わない。 */
body.dp-shop.woocommerce-checkout .optional,
body.dp-shop .woocommerce-checkout .optional { display: none; }
/* ---- (2) 合計の「(¥382 消費税を含む)」はレジでも出さない ----
カート画面と同じ理由。商品は軽減8%・箱代は10%と税率が混ざるうえ、
いまの内訳は箱代の10%分を含んでいないため紛らわしい（金額そのものは正しい）。 */
body.dp-shop .woocommerce-checkout-review-order-table .includes_tax { display: none !important; }
/* ---- (3)「ご要望」の入力欄を広げる ---- */
body.dp-shop #order_comments {
min-height: 120px;
padding: 10px;
font-size: 15px;
line-height: 1.6;
}
/* ---- (4) 支払い欄 ----
【重要】「注文する」ボタンは #payment の中（div.form-row.place-order）にある。
#payment ごと display:none にするとボタンまで消えるので、背景と中の部品だけを消す。
・支払い方法は「店頭でお支払い（受取時）」の1つだけなので一覧は出さない。
ラジオは display:none でも送信されるため注文には影響しない。
・英文のプライバシーポリシー文（.woocommerce-privacy-policy-text）も出さない。
・代わりに inc/woocommerce.php の (e) が出す案内を大きく見せる。 */
body.dp-shop #payment { background: transparent; border-radius: 0; }
body.dp-shop #payment ul.wc_payment_methods,
body.dp-shop #payment .woocommerce-privacy-policy-text { display: none !important; }
body.dp-shop #payment div.form-row.place-order { padding: 0; }
body.dp-shop .dp-pay-notice {
margin: 0 0 18px;
padding: 18px 16px;
border: 2px solid #e05a52;
border-radius: 6px;
background: #fff7f6;
text-align: center;
}
body.dp-shop .dp-pay-notice__main {
margin: 0;
color: #c9302c;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
}
body.dp-shop .dp-pay-notice__sub {
margin: 8px 0 0;
color: #444;
font-size: 15px;
line-height: 1.6;
}
/* ---- (5) 受取日の上の「店頭受取のみ」の案内（出力は dp-takeout プラグイン） ---- */
body.dp-shop .dp-pickup-notice {
margin: 6px 0 14px;
padding: 10px 12px;
border-left: 4px solid #55798f;
border-radius: 3px;
background: #f2f6f9;
color: #33566b;
font-size: 15px;
font-weight: bold;
line-height: 1.6;
}
@media screen and (max-width: 767px) {
body.dp-shop .dp-pay-notice { padding: 14px 12px; }
body.dp-shop .dp-pay-notice__main { font-size: 17px; }
body.dp-shop .dp-pay-notice__sub { font-size: 14px; }
body.dp-shop .dp-pickup-notice { font-size: 14px; }
}
/* ---- (6) ご注文内容の表：商品の行と合計の行で背景色を分ける（2026-08-18 利用者指示） ----
それまでは全部が白一色で、どこまでが商品でどこからが合計なのか目で追えなかった。
見出し(thead)と合計欄(tfoot)に薄いグレーを敷き、商品(tbody)を白にして区切る。
色はカート画面の合計欄と同じ #f7f7f7 に揃えている。 */
body.dp-shop .woocommerce-checkout-review-order-table {
width: 100%;
border: 1px solid #e5e5e5;
border-collapse: collapse;
}
body.dp-shop .woocommerce-checkout-review-order-table th,
body.dp-shop .woocommerce-checkout-review-order-table td {
padding: 12px 14px;
border-bottom: 1px solid #eee;
font-size: 15px;
}
body.dp-shop .woocommerce-checkout-review-order-table thead th {
background: #f7f7f7;
color: #333;
font-weight: bold;
}
body.dp-shop .woocommerce-checkout-review-order-table tbody td {
background: #fff;
}
body.dp-shop .woocommerce-checkout-review-order-table tfoot th,
body.dp-shop .woocommerce-checkout-review-order-table tfoot td {
background: #f7f7f7;
font-weight: bold;
}
/* 合計の行だけ少し濃くして大きく */
body.dp-shop .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.dp-shop .woocommerce-checkout-review-order-table tfoot tr.order-total td {
background: #efefef;
border-bottom: 0;
font-size: 18px;
}
/* 金額の列は右寄せ・折り返さない */
body.dp-shop .woocommerce-checkout-review-order-table td.product-total,
body.dp-shop .woocommerce-checkout-review-order-table th.product-total,
body.dp-shop .woocommerce-checkout-review-order-table tfoot td {
text-align: right;
white-space: nowrap;
}
/* ---- (7) 受取日の下の「本日／明日のお受け取りです」（出力は dp-takeout の M1-3） ----
入力欄には日付しか入れられない（datepicker が値を日付として読み書きするため）ので、
欄の下に1行で出している。 */
body.dp-shop .dp-pickup-when {
margin: 6px 0 0;
color: #c9302c;
font-size: 15px;
font-weight: bold;
line-height: 1.5;
}
/* 店頭受取の案内文の中のリンク（UberEats）。
教訓27: reset.css に a{width:100%} があるので、文中のリンクは必ず幅を戻す。 */
body.dp-shop .dp-pickup-notice a {
display: inline;
width: auto;
color: #b3453d;
text-decoration: underline;
}
body.dp-shop .dp-pickup-notice a:hover { color: #e05a52; }
/* ============================================================
(8) 注文完了画面（2026-08-18 利用者指示）
・全体的に文字が小さく、行が詰まっていて読みにくい → 文字を大きく・行間を広げる
・注文詳細の表は、レジと同じ配色で「商品」と「小計以降」を分ける
・請求先住所は出さない（テンプレート woocommerce/order/order-details-customer.php で
「ご来店お待ちしております」に差し替え）
============================================================ */
body.dp-shop.woocommerce-order-received .woocommerce-order {
font-size: 17px;
line-height: 1.9;
}
body.dp-shop.woocommerce-order-received .woocommerce-order > p {
margin: 0 0 14px;
font-size: 17px;
}
/* ---- 上部の枠：お受け取り日時 ＋ キャンセルの連絡先（2026-08-18 利用者指示で合体） ----
注文番号の一覧に氏名・会社名・ご要望を足したぶん、受取日時を下に置くと画面外に出てしまう。
ページの先頭に1つの枠としてまとめ、受取日時をいちばん大きくした。
※ WooCommerce のテンプレートはこの中身を の中に出すので、
入れ子にできるのは （block 化して行にしている）。 は使えない。 */
body.dp-shop .woocommerce-thankyou-order-received {
margin: 0 0 22px;
padding: 20px 16px;
border: 3px solid #c9302c;
border-radius: 8px;
background: #fff7f6;
text-align: center;
}
body.dp-shop .dp-thx__label {
display: block;
margin: 0 0 8px;
color: #c9302c;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.05em;
}
body.dp-shop .dp-thx__value {
display: block;
margin: 0 0 14px;
color: #c9302c;
font-size: 27px;
font-weight: bold;
line-height: 1.4;
}
body.dp-shop .dp-thx__note {
display: block;
padding-top: 12px;
border-top: 1px solid #f0c8c5;
color: #c9302c;
font-size: 16px;
font-weight: bold;
line-height: 1.7;
}
/* 受取日時が無い注文（将来の商品構成の変化に備えて）は区切り線を出さない */
body.dp-shop .dp-thx__note:first-child {
padding-top: 0;
border-top: 0;
}
/* 教訓27: reset.css の a{width:100%} があるので文中のリンクは幅を戻す */
body.dp-shop .woocommerce-thankyou-order-received a {
display: inline;
width: auto;
color: #c9302c;
text-decoration: underline;
}
/* ---- 注文番号・日付・合計・決済方法の一覧 ---- */
body.dp-shop ul.woocommerce-order-overview {
margin: 0 0 24px;
padding: 0;
border: 1px solid #e5e5e5;
border-radius: 4px;
list-style: none;
}
body.dp-shop ul.woocommerce-order-overview li {
float: none;
width: auto;
margin: 0;
padding: 12px 14px;
border: 0;
border-bottom: 1px solid #eee;
font-size: 16px;
text-transform: none;
}
body.dp-shop ul.woocommerce-order-overview li:last-child { border-bottom: 0; }
body.dp-shop ul.woocommerce-order-overview li strong {
display: inline-block;
margin-left: 10px;
font-size: 17px;
}
/* ---- 見出し ---- */
body.dp-shop .woocommerce-order-details__title,
body.dp-shop .woocommerce-column__title {
margin: 26px 0 12px;
font-size: 20px;
}
/* ---- 注文詳細の表（商品＝白／見出しと合計＝薄いグレー） ---- */
body.dp-shop table.order_details {
width: 100%;
border: 1px solid #e5e5e5;
border-collapse: collapse;
}
body.dp-shop table.order_details th,
body.dp-shop table.order_details td {
padding: 14px;
border-bottom: 1px solid #eee;
font-size: 16px;
line-height: 1.8;
}
body.dp-shop table.order_details thead th {
background: #f7f7f7;
color: #333;
font-weight: bold;
}
body.dp-shop table.order_details tbody td { background: #fff; }
body.dp-shop table.order_details tfoot th,
body.dp-shop table.order_details tfoot td {
background: #f7f7f7;
font-weight: bold;
}
body.dp-shop table.order_details tfoot tr:last-child th,
body.dp-shop table.order_details tfoot tr:last-child td { border-bottom: 0; }
body.dp-shop table.order_details th.product-total,
body.dp-shop table.order_details td.product-total,
body.dp-shop table.order_details tfoot td { text-align: right; white-space: nowrap; }
body.dp-shop table.order_details tbody td.product-name a {
display: inline;
width: auto;
color: #55798f;
font-weight: bold;
}
/* 消費税の内訳はカート・レジと同じ理由で出さない（税率が混ざり、箱代の10%分を含んでいないため） */
body.dp-shop table.order_details .includes_tax { display: none !important; }
/* ---- 受取日・受取時刻（プラグインが表の下に出す） ---- */
body.dp-shop .woocommerce-order-details > p {
margin: 12px 0 0;
font-size: 17px;
}
/* ---- 「ご来店お待ちしております」 ---- */
body.dp-shop .dp-order-thanks {
margin-top: 28px;
text-align: center;
}
body.dp-shop .dp-order-thanks__text {
margin: 0;
padding: 18px;
border: 2px solid #55798f;
border-radius: 6px;
background: #f2f6f9;
color: #33566b;
font-size: 20px;
font-weight: bold;
}
@media screen and (max-width: 767px) {
body.dp-shop.woocommerce-order-received .woocommerce-order { font-size: 16px; }
body.dp-shop table.order_details th,
body.dp-shop table.order_details td { padding: 12px 10px; font-size: 15px; }
body.dp-shop .dp-order-thanks__text { font-size: 17px; padding: 14px 12px; }
}
/* ---- (9) 注文完了画面：受け取りの案内を目立たせる（2026-08-18 利用者指示） ----
利用者の言葉「間違える人が多いので」。受取日時の取り違えが実際に起きているため、
ページの中で **受取日時をいちばん大きく** する。
3つの案内の強さの順は 受取日時（赤・特大）＞ キャンセルの電話（赤枠）＞ この画面を見せる（紺帯）。 */
/* 受取時にこの画面を見せる案内（見出しの直下） */
body.dp-shop .dp-show-screen {
margin: 0 0 16px;
padding: 14px 16px;
border-radius: 6px;
background: #33566b;
color: #fff;
font-size: 17px;
font-weight: bold;
line-height: 1.6;
text-align: center;
}
@media screen and (max-width: 767px) {
body.dp-shop .dp-show-screen { font-size: 15px; padding: 12px; }
body.dp-shop .woocommerce-thankyou-order-received { padding: 16px 12px; }
body.dp-shop .dp-thx__value { font-size: 21px; }
body.dp-shop .dp-thx__label { font-size: 15px; }
body.dp-shop .dp-thx__note { font-size: 15px; }
}
/* ---- 注文番号一覧に足した項目（氏名（フリガナ）・会社名・ご要望）（2026-08-18 利用者指示） ----
ご要望は長くなることがあるので、ラベルと値を同じ行に置きつつ折り返せるようにする。 */
body.dp-shop ul.woocommerce-order-overview li.dp-note strong {
display: inline;
font-weight: bold;
word-break: break-all;
}
/* ============================================================
(10) カート以降の画面ではヘッダーを小さくする（2026-08-18 利用者指示）
理由（利用者の言葉）:
「スマホで観ると肝心の手続きなどが画面下に追いやられて見えにくい」。
ロゴ・商品検索・カートボタン・カテゴリーナビの3段で画面の上半分が埋まってしまい、
カートの中身や入力欄までスクロールしないと見えなかった。
対象は カート（body.woocommerce-cart）／ご注文手続き・注文完了（body.woocommerce-checkout）。
※ 注文完了ページは body に woocommerce-checkout も付くので、この2つで3画面すべてを拾える。
残すのはロゴだけ。ロゴはテイクアウトのトップ（/takeout/）へのリンクなので、
買い物に戻る道は残る。
============================================================ */
body.dp-shop.woocommerce-cart .to-header__utility,
body.dp-shop.woocommerce-cart .to-nav,
body.dp-shop.woocommerce-checkout .to-header__utility,
body.dp-shop.woocommerce-checkout .to-nav {
display: none !important;
}
/* ロゴだけになるので、下の余白を詰めて本文を上げる */
body.dp-shop.woocommerce-cart .to-header,
body.dp-shop.woocommerce-checkout .to-header {
margin-bottom: 10px;
}
/* ---- (11) 「戻る」ボタン（2026-08-18 利用者指示） ----
カートの「購入手続きに進む」の下＝「商品画面に戻る」、
レジの「注文する」の下＝「ショッピングカートに戻る」。
主要ボタン（赤）より控えめなグレーにして、押し間違いを防ぐ。
※ class="button" を付けていないので common-all.css の装飾は乗らない（意図的）。
※ reset.css の a{width:100%} と噛み合うよう box-sizing を指定する。 */
body.dp-shop .dp-back-button {
display: block;
width: 100%;
box-sizing: border-box;
margin: 10px 0 0;
padding: 16px 12px;
border: 1px solid #bbb;
border-radius: 4px;
background: #eeeeee;
color: #333 !important;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
body.dp-shop .dp-back-button:hover {
background: #dddddd;
color: #333 !important;
}
@media screen and (max-width: 767px) {
body.dp-shop .dp-back-button { padding: 14px 10px; font-size: 15px; }
}
/* ---- (12) 主要ボタン・戻るボタンの幅と間隔（2026-08-24 利用者指示） ----
利用者の言葉:「注文するとショッピングカートに戻るの間にスペースを開けてほしい」
「そのボタンも横長すぎてボタンに見えない」。
PCでは幅を絞って中央に置き、影を付けて「押せるもの」に見せる。
スマホは指で押す面積を確保したいので全幅のまま（幅の制限を外す）。
幅は --dp-btn-max の1か所だけ直せばよい。 */
body.dp-shop {
--dp-btn-max: 440px;
}
body.dp-shop .wc-proceed-to-checkout a.checkout-button,
body.dp-shop #place_order,
body.dp-shop .dp-back-button {
max-width: var(--dp-btn-max);
margin-left: auto;
margin-right: auto;
border-radius: 6px;
}
/* 主要ボタンだけ影を付けて、補助ボタンとの差をはっきりさせる */
body.dp-shop .wc-proceed-to-checkout a.checkout-button,
body.dp-shop #place_order {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}
/* 主要ボタンと戻るボタンの間隔（もとは 10px で、くっついて見えていた） */
body.dp-shop .dp-back-button {
margin-top: 26px;
}
@media screen and (max-width: 767px) {
body.dp-shop {
--dp-btn-max: none;
}
body.dp-shop .dp-back-button { margin-top: 20px; }
}
/* ---- (12-b) 【重要】WooCommerce本体の float を止める（2026-08-24 実機で発覚） ----
本体CSSに次の指定がある。
.woocommerce #payment #place_order { float: right } ← ID2つ+クラス1つ
(12) で幅を 100% から 440px に絞った途端、この float が効いて「注文する」が
右に浮き、「ショッピングカートに戻る」と重なった。
幅が全幅のうちは float していても見た目に出ないので、今まで気づかなかった。
ID2つ+クラス1つ+要素 で本体を上回るセレクタにして打ち消す。 */
body.dp-shop #payment #place_order {
float: none;
clear: both;
}
body.dp-shop .dp-back-button {
clear: both;
}