), and My Page (mypage.html's

), which all now share the same design system on request. Every other page keeps the shared .page{max-width: 1050px} rule above completely untouched; this override just widens the usable area here so the left-side photo column added to .menu-table below has room without cramping 内容/所要時間/料金 or causing text to wrap (menu.html/booking.html), and so My Page's own content column (.mypage-content below) has more room to expand into. Percentage side padding (not a fixed px value) keeps it responsive at any screen width; the max-width ceiling only matters on very large desktop monitors, so rows don't stretch to an unreasonable line length. Below 720px the existing .page mobile rule (media query further down) already wins the cascade (same specificity, later in source order) and reverts to the standard mobile padding, so no separate mobile override is needed here. */ .menu-page, .booking-page, .mypage-page{max-width:1700px;padding:70px 4% 100px} /* Navigation section spacing — MENU/RESERVATION/ABOUT/MY PAGE only (the .menu-category-tabs bar each of these 4 pages already has as the very first thing inside

, since Task 25/26 moved it to the top of the page). Written as calc( - ) rather than a pre-computed pixel number, so the exact amount being removed — 1.5cm off the page's own top padding (moves the nav up, closer to the header) and 1cm off the nav bar's own bottom margin (tightens the gap before the content below it) — stays self-evident. REVIEW is deliberately excluded (:not(.review-page); it shares .booking-page with booking.html above only for its unrelated width-widening) because it has no navigation/tabs section of its own to move — same scope decision already made for it in the earlier task that removed its page title. The nav's own size, buttons, typography, colors, and borders are completely untouched — nothing here changes .tabs/.menu-category-tabs' own rules above, only the blank space around it. */ .menu-page, .about-page, .mypage-page, .booking-page:not(.review-page){padding-top:calc(70px - 1.5cm)} /* Per request: review.html was deliberately excluded from the shared reduction just above (see the comment on it) because, at the time, it had no nav/tabs bar to tighten against — so it kept the full 70px top padding from .menu-page,.booking-page,.mypage-page{padding:70px 4% 100px} above, unlike every other content page, leaving a visibly larger gap between the header and the "Submit a Review" card here. This applies that exact same reduction directly to .review-page now, closing that gap the same way the other pages already got. Same specificity (one class) as the shared padding:70px 4% 100px rule above; placed after it so it wins by source order and overrides only padding-top, leaving that rule's max-width/side/bottom padding for review.html untouched. The :not(.review-page) rule above is itself completely unchanged — review.html still never matches it. */ .review-page{padding-top:calc(70px - 1.5cm)} /* On booking.html specifically, the running "Selected Menu" cart shown under the menu-selection table (.selected-summary) stays capped to a comfortable, centered reading width — it's part of the menu-selection step, not one of the three reservation-flow screens widened below, so it's left exactly as it was. Only margin-left/right are set here (not the shorthand margin already declared above), so the existing vertical spacing on this element is untouched. */ .booking-page .selected-summary{max-width:900px;margin-left:auto;margin-right:auto} /* Per request: on booking.html's menu-selection step, the "選択したメニュー" / Selected Menu card (#selected-summary, rendered by js/menu.js's renderSummary() — both its empty "まだメニューが選択されていません。" state and its populated state share this same id) is now forced to the full content width instead of the 900px cap set just above, matching how .selected-menu/.booking-box were already widened further down the booking flow. Scoped to the ID rather than editing the .booking-page .selected-summary rule above, because that class is also shared by review.html's own review list card (.selected-summary.review-list-wrap — review.html's

also carries .booking-page for an unrelated width reason) which must keep its existing 900px-capped, centered width untouched. The id "selected-summary" is only ever assigned here by js/menu.js, and only on booking.html, so this can't match anything on review.html; an ID selector also already outguns the class-based rule above on specificity, so this wins regardless of source order. */ #selected-summary{max-width:none;margin-left:0;margin-right:0} /* Per request: center only the "選択したメニュー" section title text itself (not the outer card, which stays full-width per above, and not the inner rows, which keep their existing label-left/value-right flex layout). Scoped to #selected-summary's own heading — .menu-section- title is a shared class also used by the ハンドネイル/フットネイル/ ハンド＋フット/追加オプション category headings elsewhere in #menu-root, and by review.html's own heading — this descendant selector only matches the one h2 that's actually inside #selected-summary. */ #selected-summary .menu-section-title{text-align:center !important} /* 予約をする (.selected-menu/.booking-box inside #booking-form-step) and 予約内容の確認 / ありがとうございました！(#booking-confirm-step, which carries the .booking-box class and is shared by both the confirmation and success states) used to share the same 900px cap above — that's what was producing the unwanted blank space on either side, since their parent .booking-page is already widened to max-width:1700px (see above). Removing the cap here (rather than raising it) lets them size to the full .booking-page content width instead, exactly like the menu-selection step's own table already does. Width only: this doesn't touch height, padding, font-size, or any vertical spacing — all of that still comes from the untouched rules elsewhere in this file (the customer-info form's inputs already stretch to 100% of their parent per #booking-form input/textarea below, so they simply follow this wider parent automatically). */ .booking-page .selected-menu, .booking-page .booking-box{max-width:none} .tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:2px solid #ddd4cd;margin-bottom:55px} .tabs button,.tabs a{display:block;border:0;background:none;padding:15px 8px;color:#706761;font-size:21px;cursor:pointer;line-height:1.35;text-decoration:none;text-align:center} .tabs button small,.tabs a small{font-size:18px} .tabs .active{color:#8a3d4d;border-bottom:4px solid #8a3d4d} /* Selected/touched state for the MENU/RESERVATION/ABOUT/MY PAGE category nav (.menu-category-tabs) only — mypage.html's own #change-tabs (the booking-change panel's separate nested tab bar, plain .tabs with no .menu-category-tabs) intentionally keeps the original maroon- underline .active style above, untouched. Footer-color fill + a white ring drawn with outline (outline never participates in the box model, unlike border, so it can never change the element's size or push the nav's height/padding/margin/position — even inactive vs. active items stay pixel-identical in size). border-bottom:0 cancels the shared rule above's underline so the two treatments don't double up. See the matching body.d6-theme rule further down for the text-color override (d6-theme's own .tabs .active rule is more specific and would otherwise win over the color set here). */ .menu-category-tabs .active{ color:#fff; background-color:var(--color-primary); border-bottom:0; outline:2px solid #fff; outline-offset:-4px; border-radius:6px; } /* Bottom-of-nav spacing reduction (1cm off the shared 55px .tabs margin-bottom above), scoped to just .menu-category-tabs — the MENU/RESERVATION/ABOUT/MY PAGE nav bar — so mypage.html's #change-tabs (which uses plain .tabs with no .menu-category-tabs, an unrelated nested tab bar inside the booking-change panel) keeps its original 55px untouched. Placed after the shared rule above (same specificity; source order decides) so it actually wins the cascade. */ .menu-category-tabs{margin-bottom:calc(55px - 1cm)} /* Category tab icons (Hand Nail / Foot Nail / Hand+Foot / Add-ons) — menu.html AND booking.html's menu-selection step (Reservation/Book Now share this one page). .menu-category-tabs is an additive class placed alongside the existing shared .tabs class on just these two tab bars, so mypage.html's #change-tabs (which still uses plain .tabs) is completely unaffected by this rule. Simple emoji glyphs act as each category's icon/mark; sized relative to the button's own font-size so they scale with the existing responsive .tabs button font-size rules above/below instead of needing their own breakpoints. */ .menu-category-tabs .tab-icon{display:inline-block;margin-right:6px;font-size:.9em;vertical-align:-1px} /* Per request: give every sub-tab/category button on the site (Menu & Booking's Hand Nail/Foot Nail/Hand+Foot/Add-ons, About's own About/ Access/Cancellation Policy tabs, and My Page's Profile/Upcoming Reservation/Booking History/Favorites tabs) the exact same look as the main header nav links — all 3 tab bars share this one .menu-category-tabs class already (confirmed: about.html's #about- page-tabs and mypage.html's #mypage-tabs both carry it too, and mypage.html's OWN nested #change-tabs — the booking-change panel's separate date/step sub-tabs — uses plain .tabs with no .menu- category-tabs, so it's naturally excluded here), so one rule covers all 11 buttons without touching any other page. Values below are copied verbatim from the header nav's own "Cyber Cyan" button rule (header nav a, ... — see the Header Navigation Items Button-style Transformation block further down this file) and its :hover glow rule right after it — that block itself is left completely untouched; this only reads its values and reapplies them here under a new selector. Structural sizing (font/letter-spacing/padding/border-radius) is applied to EVERY tab, active or not, so all tabs in a row stay the same size — a size mismatch between the active and inactive tabs would look broken. The translucent cyan background/border/inset-glow "glass" look and the hover glow are scoped to :not(.active) only, so the existing .menu-category-tabs .active rule (the solid teal selected-tab highlight built and tested in earlier tasks) is left completely alone in both its default and hovered state. Font-size/letter-spacing/padding are wrapped in a min-width:721px query (the exact breakpoint where .header-nav itself is hidden and a hamburger menu takes over — see .header-nav{display:none} in that same mobile query) so this can't collide with the carefully-tuned compact mobile sizing these tab bars already have (padding:12px 2px; font-size:12px etc.) — matching header-nav text size only makes sense at the widths where the header nav itself is actually visible to compare against. The background/border/box-shadow/hover-glow "skin", which carries no overflow risk at any width, still applies everywhere, including mobile. */ /* --- Follow-up request: sub-tab background/text-color redesign --- All 11 sub-tab/category buttons above (Menu & Booking's 4, About's 3, My Page's 4) now use a permanent gradient background built from the footer's own real color (footer{background:#0F9FB4} — solid teal) blended toward the existing --color-primary-dark token (#0C7E90) and a lighter teal tint, applied IDENTICALLY in every state (default / hover / active — the previous :not(.active) scoping is removed so nothing distinguishes active from inactive here anymore), with the tab text AND its Japanese subtext forced solid white in every state via !important. This safely overrides body.d6-theme's muted-gray tab-text rule and the plain .menu-category-tabs .active{background-color:...} rule further above WITHOUT editing either of them: an !important background here beats that non-important background-color regardless of selector specificity. The active tab's white outline ring (2px solid #fff, see .menu-category-tabs .active above) is left completely untouched and is now the sole visual "currently selected" indicator, since the background itself is intentionally identical across active/inactive/ hovered states per this request. This replaces the earlier "Cyber Cyan" glass background/border/glow look (header-nav-matching request) with this new footer-themed look; the sizing values that request set — border-radius, font-weight, and the >=721px font/letter-spacing/padding block right below — are left exactly as they were, since only background gradient and text color were asked to change this time. */ /* Follow-up: border color on these same 11 sub-tabs changed to Cyber Cyan (#00F0FF), 2px, in every state (default/hover/active — same uniform-across-states approach as the gradient/white-text change above). Edited directly on the two rules below (rather than adding a new competing rule) since that's the only way to actually change the border color everywhere it's set today: the base rule below sets the default border, and the :hover rule below it re-sets border-color on hover, so both need the same cyan value or hovering would revert it. Only the border's color/width changed on both rules — every other property (background gradient, radius, box-shadow, white text) is exactly as it was. */ .menu-category-tabs button, .menu-category-tabs a{ border-radius:6px!important; font-weight:700!important; color:#fff!important; background:linear-gradient(135deg,#12B4CC,#0F9FB4,#0C7E90)!important; border:2px solid #00F0FF!important; box-shadow:inset 0 0 8px rgba(0,0,0,0.15)!important; transition:all .3s ease-in-out!important; } .menu-category-tabs button small, .menu-category-tabs a small{color:#fff!important} .menu-category-tabs button:hover, .menu-category-tabs a:hover{ background:linear-gradient(135deg,#17C6E0,#12B4CC,#0F9FB4)!important; border-color:#00F0FF!important; box-shadow:0 0 15px rgba(15,159,180,0.65),inset 0 0 10px rgba(0,0,0,0.12)!important; transform:translateY(-2px)!important; filter:brightness(1.1)!important; } @media(min-width:721px){ .menu-category-tabs button, .menu-category-tabs a{font:700 13px/1.2 var(--font-body)!important;letter-spacing:1px!important;padding:8px 16px!important} .menu-category-tabs button small, .menu-category-tabs a small{font-size:11px!important;letter-spacing:.5px!important;font-weight:400!important} } .menu-section-title{font-size:34px;margin:0 0 25px} /* Per request: remove the black category title text (ハンドネイル／フットネイル／ハンド＋フット／追加オプション) that used to sit directly under the 4 category tabs on menu.html and booking.html, so the menu table shifts up and sits snugly beneath the tabs instead. Scoped to ONLY the h2 that's a direct child of .menu-section — the

wrapper js/menu.js's renderMainSection()/renderHandFootSection()/ renderAddonSection() generate for exactly these 4 category headings — so this can never match #selected-summary's own "選択したメニュー" heading (wrapped in .selected-summary, a different class, and already deliberately kept visible/centered per an earlier request) or review.html's "お客様の声" heading (wrapped in .review-list-wrap). display:none removes the h2 from layout entirely (not just visually hidden), so .menu-table-wrap's own margin-top:18px below becomes the only space between the tabs and the table — no leftover blank gap where the title used to be. About.html/My Page's own tab systems never render a .menu-section at all, so they're unaffected regardless. */ .menu-section > .menu-section-title{display:none} /* Menu/price table — shared by BOTH the standalone menu.html page and the booking.html selection step, so the two pages use one identical table design (structure, column widths, row height, borders, spacing, typography, background, alignment, responsive behavior). On menu.html there's no select button (selectButton() returns '' there); on booking.html the existing 選択する button renders inside the price cell, stacked directly under the price — see .menu-table-price below. */ .menu-table-wrap{margin:18px 0;overflow-x:auto} .menu-table{width:100%;min-width:640px;border-collapse:collapse} .menu-table thead th{background:#0F9FB4;color:#fff;font-weight:700;font-size:15px;letter-spacing:.5px;text-align:left;padding:16px 20px;white-space:nowrap} .menu-table tbody td{padding:20px;border-bottom:1px solid #e5ddd7;vertical-align:top;font-size:15px;line-height:1.8;color:#6e655f} .menu-table tbody tr:last-child td{border-bottom:none} .menu-table .menu-name{display:block;font-weight:700;color:#302a27;white-space:nowrap} .menu-table .menu-name.lang-en{font-weight:400;font-size:13px;color:#81766f;margin-top:3px;white-space:normal} /* Left-side menu/service photo column — same design on menu.html AND booking.html's menu-selection step (menuTable() in js/menu.js always emits this / now). Fixed pixel width (not a %) here so the thumbnail stays a consistent size no matter how wide the table itself is, and doesn't eat into the percentage-based columns beside it. The Menu page is this table's single source of truth for size/layout — booking.html's table intentionally has NO width/size overrides of its own any more (see the .menu-table--booking comment further down), so this same rule applies identically on both pages. Same rounded, soft-gradient placeholder treatment as .favorite-card-media (js/favorites.js) for items with no image_url yet, so an item without a photo still looks intentional rather than broken. */ .menu-table-image{width:148px} .menu-table-image img, .menu-table-image-placeholder{display:block;width:106px;height:106px;border-radius:var(--radius-card);object-fit:cover;background:linear-gradient(135deg,#f2ece6,#e7ddd3)} .menu-table-name{width:22%} .menu-table-duration{width:16%;text-align:center;font-size:13px;line-height:1.6;color:#81766f;white-space:normal} .menu-table-price{width:16%;text-align:center;font-weight:700;color:#8a3d4d;white-space:nowrap} .menu-table thead th:nth-last-child(-n+2){text-align:center} /* Price + 選択する button, stacked vertically (price on top, button directly below, centered) inside the price cell on booking.html. On menu.html this cell only ever contains the price span (no button), so the extra flex rules are inert there. The button itself keeps its existing markup/class/text/behavior — these rules only override its old card-layout position:absolute so it sits naturally in the cell. */ .menu-table-price-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px} .menu-table-price-value{display:block;white-space:nowrap} .menu-table-price-inner .article-book, .menu-table-price-inner .select-btn{position:static !important;top:auto !important;right:auto !important;left:auto !important;grid-column:auto !important;grid-row:auto !important;align-self:center !important;justify-self:center !important;margin:0 !important} /* Favorites — heart toggle button (js/favorites.js), appended into the price cell on menu.html (menu-table-price-inner) next to the price; on menu.html there's no 選択する button in that cell, so the heart is the only thing appended there. 🩵 = not favorited, ❤️ = favorited. Both states are already full-color emoji, so (unlike the old 🤍/🩷 pair) no grayscale filter is used — the two icons are told apart by their own natural colors, with a small opacity lift on the favorited state so it reads as "on" at a glance. */ .fav-heart-btn{border:0;background:none;padding:2px;margin:0;font-size:22px;line-height:1;cursor:pointer;transition:transform .15s ease,opacity .15s ease;opacity:.82} .fav-heart-btn:hover,.fav-heart-btn:focus-visible{transform:scale(1.15)} .fav-heart-btn.is-favorited{opacity:1} .fav-heart-btn:disabled{cursor:default;opacity:.5} /* Click "pop" animation — toggled on/off via .is-animating from js/favorites.js (playHeartPop()) so a tap reads as a deliberate, subtle confirmation without altering the icon's resting size/position. */ .fav-heart-btn.is-animating{animation:fav-heart-pop .32s ease} @keyframes fav-heart-pop{ 0%{transform:scale(1)} 40%{transform:scale(1.35)} 65%{transform:scale(.94)} 100%{transform:scale(1)} } /* Favorites list — used on both My Page's #favorites-list card and the standalone favorites.html page. Same white rounded card language as the rest of the light theme. */ .favorites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .favorite-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px} /* Menu image — item[6]/menu_items.image_url when present; a plain soft gradient placeholder (no schema change needed) for static-fallback items that have no image at all. Fixed 106x106 — same exact size as the Menu page's own photo column (.item-thumb/.menu-table-image img) per explicit request, replacing the previous full-width 4:3 banner so every menu/service photo on the site is now visually consistent. */ .favorite-card-media{width:106px;height:106px;border-radius:var(--radius-card);overflow:hidden;background:linear-gradient(135deg,#f2ece6,#e7ddd3)} .favorite-card-media img{display:block;width:100%;height:100%;object-fit:cover} .favorite-card .fav-heart-btn{position:absolute;top:14px;right:14px;font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.88);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.12)} .favorite-card-body{padding-right:26px} .favorite-card-body .menu-name.lang-en{display:block;margin-top:3px} .favorite-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--color-border-soft);font-size:13px;color:var(--color-text-muted)} .favorite-card-meta strong{color:var(--color-primary-dark);font-size:16px} .favorite-book-btn{width:100%;text-align:center;margin-top:0} /* gallery.html — same white rounded card language as .favorite-card above, one square photo/video per card instead of a menu row. Photos link out to the full-res file in a new tab; videos use native