@charset "UTF-8";
/* ============================================================
   cart-renewal.css
   Hanahisho - cart / checkout flow restyle  (PC)

   Covers 7 screens:
     ShoppingCart / GuestLogin  / GuestEntry / DeliveryEdit
     SettleEdit   / OrderConfirm / OrderComplete

   HOW TO LOAD
     Put this file at /css/cart-renewal.css and add one line to
     the PC header comment (after contents_renew.css):
       <link rel="stylesheet" href="/css/cart-renewal.css">

   SCOPE
     Every rule is scoped to #FS2_body_Cart, the body id shared by
     all seven checkout screens. Other pages are never touched,
     so the file is safe to load site-wide.

   NO JAVASCRIPT
     Accordions use <details>. State-based display uses :has().
     Buttons are the original <input type="image"> made
     transparent, with the label drawn by a pseudo element.

   REVISIONS
     2026-09-07bh the worked-example pictures are centred. Left
       against the text they read as one more paragraph; with
       equal air on both sides they read as a figure the text is
       pointing at.
     2026-09-07bg the worked-example pictures are held to 90% of
       the text column. They are a reference, not the content of
       the fold. The width is on the frame, not the image, so the
       border comes in with it.
     2026-09-07bf .hhac--key paints one fold in the invoice pink.
       On the delivery screen "how to address a company" decides
       what is printed on the label, and getting it wrong is not
       a form error anyone catches - it is a delivery the
       recipient is embarrassed by. Every other fold stays gold;
       the modifier is in the markup so a second one only turns
       pink when someone decides it should.
       Also .hhSub, .hhFill and .hhFig, for a fold that
       holds two worked examples and ends each with a picture of
       the fields already filled in. The two cases in the
       "addressing a company" fold were separated by nothing but
       a <b> at body size, so the fold read as one paragraph.
     2026-09-07be the invoice fold is pink. Customers were not
       finding it, and for a company buyer "can I get a compliant
       invoice" can decide whether they order here at all - so it
       takes the colour the flow already uses for the thing that
       must not be walked past, rather than sitting among the gold
       folds as one more of them. The body stays white: once it is
       open the colour has done its work and the text has to be
       read. The open/close mark goes 17px to 22px on every fold
       in the flow, in the full gold - it is the only thing on the
       bar that says it opens, and it was quieter than the label.
     2026-09-06bd the saved-card table kept the shop's own dress -
       a grey right-aligned label column - because 13-3 only named
       the table for entering a NEW card. There are two:
       FS2_SettleEdit_list_Credit_table and FS2_SelectCreditCardTable,
       and only a customer with a card on file ever sees the
       second, which is why it was missed. Its label cells carry
       width, align and nowrap as markup attributes, so they need
       !important the way section 18's do.
     2026-09-06bc the checkboxes fill pink when ticked, as the
       radios already did. Selected was gold on one control and
       pink on the other, which reads as two states rather than
       one. All three in the flow change together - the consent
       box on the cart, "remember my mail address" on login, and
       "save this card" on payment - so it stays one rule rather
       than an exception. Hover is still gold: that is the cursor,
       not the state, and the radios say it the same way. The gold
       in the step bar is untouched - there it means a step behind
       you, not a choice you made.
     2026-09-06bb three things the credit card block exposed once
       it could be opened. The radio is appearance:none, so it is
       an inline-block sitting on the baseline: in the two plain
       labels inside that block it rode above the words. The same
       two labels were set in the td's 13px body type, the size of
       the notes around them, so a choice did not read as one. And
       "save this card" was still the browser's own checkbox - it
       is in none of the three containers section 5 names.
     2026-09-06ba the credit card details would not open for a
       customer with a card on file. The fold that hides an
       unselected method's description asked "does this row contain
       an unchecked radio", and the credit row's own td holds two
       more radios (saved card / new card), so the answer was yes
       even when credit was selected. The three :has in 13-1 are
       now scoped to the th, where the method's own radio lives.
     2026-09-06az the "log in" caption on the standalone login
       screen is hidden. It was the login table's caption, picking
       up 17-A's gold rule; with the column heading above it and
       the log-in button below, the word was there three times.
     2026-09-06ay the gold rule beside the benefits heading is
       gone. The panel already sits in its own boxed comment, so
       the bar was a second frame around the same thing.
     2026-09-06ax the benefit icons were too small against the card
       text - the drawing box goes 44px to 58px, the icon itself
       34px to 48px.
     2026-09-06aw the member-benefits panel on the registration
       screen was one png (member_entry_01.png) with the heading,
       the sentences and all five cards baked into it - so the
       point figure could not be changed without redrawing the
       image, and none of it was text to a search engine or a
       screen reader. Section 24 styles an html version; the five
       icons are redrawn as inline svg in the css, so the block
       needs no image files at all.
     2026-09-06av PasswordReminderComplete, the last screen of the
       flow, is the same markup as PasswordReminderEditComplete, so
       23-E now names both classes instead of one. Its extra empty
       <p> between the sentence and the button is hidden.
     2026-09-06au the password rules in the lower comment were a
       jpg (pw-info.jpg): text baked into an image, so unreadable
       to search, to a screen reader and to anyone zooming on a
       phone. 23-G styles an html version of the same two facts;
       the snippet goes in the lower comment of PasswordReminder.
     2026-09-06at the completion mark is now a gold ring on white
       with the tick drawn into it, larger (76px ring, was 56). The
       tick is a two-border box turned 135 degrees; the keyframes
       grow the short arm first and the long arm second, so it
       reads as one stroke rather than two things appearing. Still
       for prefers-reduced-motion.
     2026-09-06as PasswordReminder, the change form the mail link
       opens. Three things it exposed: the two <caption> elements
       were being laid out one character per line, because 23-C
       makes the table a block and a table-caption inside a block
       box shrinks to nothing - they are blocks here; the submit
       button was an empty pink bar, since 17-A hides the gif and
       this screen had no label yet; and the two tables sit in one
       inputTableArea separated by a bare <br>, now a rule instead.
     2026-09-06ar PasswordReminderEditComplete, the screen the form
       sends to. Its button is not FS2_bottom_btn_center_1 but
       FS2_bottom_btn_info, which no rule in the file had reached,
       so the gif sat there at its own size. Section 23-E gives that
       container the same button geometry and the "log in" label,
       and sets the two sentences as a centred completion message.
     2026-09-06aq the password reminder screens joined the file.
       #FS2_body_Password is added to section 17-A's :is() list and
       to the header-band rule in 16. The id carries no class there
       on purpose: every screen under it belongs to this one flow,
       so there is no sibling screen to protect. That hands them the
       breadcrumb, page title, field styling, required chip, error
       banner and button box already written for the other screens
       outside the cart. Section 23 holds only what is theirs: the
       numbered note above the form, the two field rows, and the
       button label.
     2026-09-06ap the "order is being processed" panel. It is a
       sibling of the confirm button carrying the same class, so
       section 8's button geometry applied to it: a 58px box with
       a 58px line and 20px padding, which the sentence could not
       fit inside. Given its own size, a muted fill and a spinner.
       display is deliberately not declared - the shop toggles it.
     2026-09-06ao the two buttons on the completion screen lost
       their labels. Not the shop's css: section 2's "links inside
       a lower comment are pink and underlined" rule was reaching
       them, because that is where the buttons are pasted. Pink on
       pink is invisible. The rule now excludes the two button
       classes.
     2026-09-06an the empty banner and slider bands at the top of
       every screen in the flow. Both are filled by scripts the
       cart and my-page layouts do not load, so on these screens
       they are blank space and nothing else.
     2026-09-06am a <b> inside <font color="red"> came out brown:
       the "bold is body-coloured in a comment area" rule also
       caught the bold that IS the red text. It now inherits.
     2026-09-06al sections 21 and 22: the registration confirm and
       complete screens. The complete screen has no class of its
       own - futureshop gives it the shared Information class - so
       it is pinned by :has on its own form action rather than by
       a class that would reach pages we have not seen.
     2026-09-06ak the consent band is centred. It is the last step
       before the confirm button, and the button is centred: left
       and centre on two stacked blocks read as a misalignment.
     2026-09-06aj section 17 rewritten to cover the four screens
       outside the cart at once - my-page EntryEdit, member
       MemberEntryEdit, MemberAgreement and the standalone Login -
       with the shared part written once under a :is() list
       instead of copied per screen. Sections 19 and 20 hold what
       only the login and terms screens have. The "my page top"
       gif becomes a text link on both my-page screens.
     2026-09-06ai section 18: the my-page EntryEditConfirm screen.
       Its class is a different token from the edit screen, so
       section 17 never reached it. Two image buttons share one
       container here, so the container cannot be the button: the
       two faces are pseudo elements and the inputs are laid over
       them (click targets verified against the painted pixels).
     2026-09-06ah section 17: the my-page EntryEdit screen. A
       logged-in member pressing "change" on the confirm screen
       lands there, and it was still the old design because every
       rule here is scoped to #FS2_body_Cart.
     2026-09-06ag the point options are dressed as the delivery and
       payment options are: a #faf6ea band, not a white card on a
       white card. Selected state now covers all three, not only
       the third. The unit after the amount box was baseline-set
       against a 46px field and sat near its top.
     2026-09-06af the input examples are prefixed, so the postcode
       box is widened to hold its own placeholder.
     2026-09-06ae the coupon "apply" button was gold on gold, a
       third button style on a screen that has two. It takes the
       outlined secondary shape used by "change".
     2026-09-06ad "(enter your coupon code)" comes out: the field
       now carries its own example, and the shop could not find
       the admin field that sets the sentence.
     2026-09-06ac coupon and points were the only two blocks on the
       payment screen painted as a filled band with no outline,
       while delivery, delivery date and payment were white cards
       with a #e0d9c6 edge. Rebuilt the same way as those. The
       label column goes: on points it repeated the caption above
       it, on the coupon it was the field's own instruction.
     2026-09-06ab .hhLead, for the opening line of a comment area.
     2026-09-06aa the redrawn tail only answered the properties it
       needed, so the shop's thick border-right/border-bottom
       survived as a red wedge inside the box and its margin threw
       the position off. Borders zeroed as a set; geometry forced.
     2026-09-06z the deferred-payment explanation was two jpegs
       with the terms typeset into them. Rebuilt as text: .hhPay,
       so the long half folds like the rest of this screen.
     2026-09-06y the "fill in the form below" line on GuestEntry.
       Not a comment area, so no admin field was found for it.
       Hidden by position: the <p> right after a CrossHead.
     2026-09-06x the delivery-date prompt was set at 700, the same
       weight as the error messages, and read as heavier than the
       heading above it. Down to 500, and the balloon gets its
       tail back - redrawn in gold at 40% of the box, which is
       under the select rather than under the label.
     2026-09-06v the free-text block carried no type of its own,
       so its intro line rendered larger than the folds under it.
     2026-09-06u accordions go white. The selected delivery card's
       header is #faf6ea and the folds sat inside it in the same
       colour, so a fold read as part of the selection. A rule
       under the header separates the two halves when open.
     2026-09-06t the warning boxes are pink throughout, <b> too.
     2026-09-06s the lower comment had no colour rule of its own,
       so its red was the raw #ff0000 while every other note in
       the flow was #ff2456. Matched, and links inside these
       boxes now take the same colour with an underline.
     2026-09-06r the lower comment's card was framing content that
       already had a frame - the warning boxes and the banner.
       The chrome comes off for those; plain text keeps it.
     2026-09-06q .hhCase, for the worked examples in the delivery
       guidance: a gold band, so an example is not dressed as an
       error.
     2026-09-06p the step numbers sat high: the circle was
       content-box, so it measured 34px while the rail and the
       tick were placed for 30px. border-box plus flex centring.
     2026-09-06o the comment area is a card, so the numbered step
       bar came out framed. The chrome comes off when the bar is
       in there.
     2026-09-06n the numbered step bar could never hide the
       segment bar: both selectors assumed the snippet sits
       inside .orderFlow or next to it, and it does neither.
       Asked of .system_content instead. Given an order on the
       completion screen, whose content area is a flex column.
     2026-09-06m order complete, against the real markup at last:
       the empty <P> left behind by the hidden gif, the affiliate
       span, and the lower comment which had no display:contents
       and would have thrown the contact card to the top.
     2026-09-06l order confirm: the caption headings were 14px
       against the 16px h3 headings beside them. Matched.
     2026-09-06k order confirm: return-policy link to body colour,
       the duplicate "shopping cart" heading dropped in favour of
       the table's own caption, and the item thumbnail shown -
       the shop's css hides it on this screen only.
     2026-09-06j the invoice "+" sat partway across the bar:
       inc_mtz.css loads later and was setting a margin on the
       pseudo element. Forced.
     2026-09-06i the payment error carries both FS2_assist_message
       and FS2_assist_message_large. The old bubble rules for
       _large fought the message rules and left a 0x0 dot above
       the box. Bubble removed; one treatment for both.
     2026-09-06h the delivery-date balloon is a standing prompt,
       not an error: it stays after a date is picked. Gold, not
       red, and the system's red tail is dropped.
     2026-09-06g the delivery-date balloon (div.arrow_box >
       p.note) was the last thing still in the system's own pure
       red. Same box as the other field errors, tail dropped.
     2026-09-06f the field error was a plain red line, which read
       the same as the store's red notes on this form. It now
       carries the banner's shape one size down.
     2026-09-06e the error state on a select was written with the
       background shorthand, which erased the dropdown arrow.
       Now background-color.
     2026-09-06d field validation: the real classes are
       .FS2_assist_container / .FS2_assist_message / the input's
       .FS2_assist_error (verified on GuestEntry). The red block
       becomes a line of text. Banner wraps by phrase.
     2026-09-06c login error banner: the real class is
       .error_content (verified with a failed login). The three
       guessed selectors are gone. Styled for all seven screens.
     2026-09-06b continue-shopping was landing 70px below the
       recalculate row: 9-1 set margin-top:-44px and the margin
       shorthand in 9-6 overwrote it. The pull-up now sits with
       the box in 9-6, guarded by :has(> span.itemRight).
     2026-09-06  specificity audit before the first live check.
       Six rules were losing to an id-scoped rule and so never
       applied. Five were given the id (written joined to the
       body class); the step label colour was moved off the id
       instead, so section 10 stays id-free. Shadow colours that
       still carried the dropped #d81e4a now use #ff2456.
       No visual decision was changed - only rules that were
       already meant to apply.

   SHIFT_JIS SAFETY
     No Japanese characters anywhere in this file.
     Labels are written as \XXXX unicode escapes, because a
     Shift_JIS second byte can be 0x5C and would break the CSS.
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --hh-gold:#a8964f;   /* headings rule, focus, secondary */
  /* completed steps. The full gold read as a second active
     state next to the pink one; these are quiet enough to say
     "done" without competing with "you are here". */
  --hh-gold-soft:#c9bd8e;
  --hh-gold-rail:#ddd4b6;
  --hh-dark:#3a3226;   /* body text, ghost buttons */
  /* site standard. NOTE the item page "add to cart" button
     renders #ff2556, one digit off; that button is the thing to
     correct, not this token. Checked 2026-09-02. */
  --hh-pink:#ff2456;   /* primary action, amounts - site standard */
  --hh-line:#e5e0d5;   /* borders */
  --hh-bg:#f7f5f0;     /* card background */
  --hh-head:#f2efe8;   /* table header, breadcrumbs */
  --hh-soft:#fdfcfa;   /* notice background */

  --cart-btn:440px;    /* order button width inside the card */
  --cart-gap:36px;     /* gap between the two columns */
}


/* ============================================================
   2. SHARED CHROME
   ============================================================ */

/* the login / coupon / wishlist strip is noise during checkout */
#FS2_body_Cart .utility{ display:none; }

#FS2_body_Cart .pan.FS2_breadcrumbs{
  background:var(--hh-head); color:#6b6350; font-size:12px;
  padding:10px 16px; margin:0 0 28px; border:none;
}
#FS2_body_Cart .pan.FS2_breadcrumbs a{ color:#6b6350; }

/* comment areas (store-entered text) */
#FS2_body_Cart .FS2_upper_comment{
  background:var(--hh-soft); border:1px solid #f0ece3; border-radius:4px;
  padding:18px 22px; margin:0 0 36px;
  font-size:13px; line-height:1.9; color:#5a5245;
}
#FS2_body_Cart .FS2_upper_comment b{ color:var(--hh-dark); }
#FS2_body_Cart .FS2_upper_comment font[color="red"],
#FS2_body_Cart .FS2_lower_comment font[color="red"]{ color:var(--hh-pink) !important; }
#FS2_body_Cart .FS2_lower_comment b{ color:var(--hh-dark); }
/* A link inside one of these boxes belongs to the warning it sits
   in, so it takes the warning's colour rather than reading as a
   stray blue default. The underline stays: colour alone is not
   enough to say "this is a link" when the surrounding text is
   the same colour. */
/* The two exclusions: the completion screen's buttons are pasted
   into the lower comment, so they are lower-comment links and this
   rule reached them - id + class + element beats the two classes
   the buttons are styled with. The result on 2026-09-06 was a pink
   underlined label on the white button, and on the pink button a
   pink label on pink: the words were simply not there. Scoping the
   rule out of the buttons is the fix; forcing the colour back on
   the buttons would only have hidden this rule's overreach. */
#FS2_body_Cart .FS2_upper_comment div[style] a,
#FS2_body_Cart .FS2_lower_comment div[style] a,
#FS2_body_Cart .FS2_lower_comment a:not(.ocCta__primary):not(.ocCta__ghost){
  color:var(--hh-pink);
  text-decoration:underline; text-underline-offset:3px;
}
#FS2_body_Cart .FS2_upper_comment div[style] a:hover,
#FS2_body_Cart .FS2_lower_comment a:not(.ocCta__primary):not(.ocCta__ghost):hover{ color:#d90f3f; }

/* the admin text often starts with a <br>, which leaves a blank line */
#FS2_body_Cart .FS2_upper_comment > br:first-child,
#FS2_body_Cart .FS2_lower_comment > br:first-child{ display:none; }

#FS2_body_Cart .FS2_lower_comment{
  clear:both; margin:56px 0 0; padding:30px 34px;
  border:1px solid var(--hh-line); border-radius:4px; background:#fff;
  font-size:13px; line-height:2; color:#5a5245;
}
#FS2_body_Cart .FS2_lower_comment img{ max-width:100%; height:auto; }
/* The card exists to give loose store text a home. Content that
   already carries its own shape - the framed warnings below, or
   a banner image - does not need a second frame around it, and
   the two edges sitting 30px apart read as a mistake. Plain text
   keeps the card. */
#FS2_body_Cart .FS2_lower_comment:has(div[style]),
#FS2_body_Cart .FS2_lower_comment:has(> img),
#FS2_body_Cart .FS2_lower_comment:has(> p > img),
#FS2_body_Cart .FS2_lower_comment:has(> div > p > img){
  padding:0; background:none; border:none; border-radius:0;
}

/* red double borders written inline in the admin text */
#FS2_body_Cart .FS2_upper_comment div[style],
#FS2_body_Cart .FS2_lower_comment div[style]{
  border:1px solid #f2c9d4 !important;
  border-radius:4px !important;
  background:#fdf2f5;
  padding:20px 24px !important;
  text-align:left;
  color:var(--hh-pink);
}
/* everything inside the box is the warning, so <b> does not drop
   back to the body colour the way it does in running text */
#FS2_body_Cart .FS2_upper_comment div[style] b,
#FS2_body_Cart .FS2_lower_comment div[style] b,
#FS2_body_Cart .FS2_upper_comment div[style] strong,
#FS2_body_Cart .FS2_lower_comment div[style] strong{
  color:var(--hh-pink);
}


/* ============================================================
   3. STEP INDICATOR
   the old Step1-5Button.gif images are hidden and replaced with
   a progress bar. label and fill are set per screen in section 10.
   ============================================================ */
#FS2_body_Cart .orderFlow{
  position:relative; padding:0 0 20px; margin:0 0 34px;
}
#FS2_body_Cart .orderFlow img{ display:none; }
#FS2_body_Cart .orderFlow::before{
  display:block; margin:0 0 12px;
  font-size:13px; font-weight:700;
  letter-spacing:.14em;
}
/* The default label colour. Written WITHOUT the id for the same
   reason as the track below: OrderComplete repaints the label in
   pink from section 10, and an id here would beat it.
   Do not add #FS2_body_Cart to this rule. */
.orderFlow::before{ color:var(--hh-dark); }
/* The bar is cut into five segments by a mask: one solid strip
   is drawn, then a repeating gradient punches a 7px gap every
   fifth of the width. The fill (section 10) is a plain gradient
   underneath, so a step boundary and the fill boundary always
   land on the same pixel - which is the point of doing it this
   way rather than drawing five separate elements.
   Older browsers without mask support simply show a solid bar,
   which is what this was before. */
#FS2_body_Cart .orderFlow::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:6px; border-radius:3px;
  -webkit-mask:repeating-linear-gradient(to right,
    #000 0 calc(20% - 7px), transparent calc(20% - 7px) 20%);
  mask:repeating-linear-gradient(to right,
    #000 0 calc(20% - 7px), transparent calc(20% - 7px) 20%);
}
/* The unfilled track. Written WITHOUT the id on purpose: the
   per-screen fills in section 10 are two classes, so an id here
   would beat every one of them and the bar would stay grey on
   all screens. Do not add #FS2_body_Cart to this rule. */
.orderFlow::after{ background:var(--hh-line); }


/* ============================================================
   3-B. STEP INDICATOR - NUMBERED VERSION  (optional)
   Needs html in the comment area; see step-bar-pc-snippet.txt.
   The same five <li> go on every screen and the state is worked
   out from the body class in section 10-B, so there is nothing
   per-screen to keep in sync.

   When the markup is present, section 3's bar is not drawn: the
   rule below hides it. Remove the snippet and the bar comes
   back on its own.
   ============================================================ */
/* The snippet goes into the comment area, and in the real markup
   that area is a separate div AFTER .orderFlow - not inside it
   and not its immediate sibling. Both of the selectors below
   were written for a nesting that never occurs, so the segment
   bar stayed on and two step bars showed at once. Checked
   against the live html 2026-09-06. Asking the container
   whether a .hhStep exists anywhere inside it is what actually
   answers the question; the other two are kept as fallbacks. */
/* The snippet lives in the comment area, and that area is a card
   - soft ground, border, padding. A progress indicator inside a
   notice card reads as if the shop is telling you something
   about the steps. When the bar is there, the card's chrome
   comes off. Any store text left in the same comment then sits
   as plain type, which is the right weight for it: on these six
   screens that text is a repeat of the cart screen, where it
   still has its card. */
#FS2_body_Cart .FS2_upper_comment:has(> .hhStep){
  background:none; border:none; border-radius:0;
  padding:0; margin:0 0 30px;
}

#FS2_body_Cart .system_content:has(.hhStep) .orderFlow,
#FS2_body_Cart .orderFlow:has(+ .hhStep),
#FS2_body_Cart .orderFlow:has(.hhStep){ display:none; }

/* NOTE the rules in this section are written WITHOUT
   #FS2_body_Cart on purpose. The per-screen states in 10-B are
   two classes plus an :nth-child; an id here would outrank every
   one of them and the bar would show plain numbers on all
   screens - which is exactly what happened on 2026-09-03.
   .hhStep only exists inside the checkout, so the id adds
   nothing but that bug. Do not put it back.
   ------------------------------------------------------------ */
.hhStep{
  display:flex; margin:0 0 40px; padding:0;
  list-style:none; counter-reset:hhStepNum;
}
.hhStep > li{
  flex:1 1 0; min-width:0; position:relative;
  padding:0 6px; margin:0; border:none;
  text-align:center;
  font-size:12px; line-height:1.5; letter-spacing:.02em;
  color:#a9a396;
}
/* the number, or a tick once the step is behind you */
/* box-sizing matters here. Without it the 30px box plus a 2px
   border makes a 34px circle whose centre is at 17px, while the
   line-height was set for 26px and the rail and the tick below
   are both placed at 15px. Everything was two pixels out and
   the number sat high in the circle. border-box puts the centre
   back at 15px for all three, and the glyph is centred by the
   flex box rather than by a line-height that has to be kept in
   step with the size by hand. */
.hhStep > li::before{
  counter-increment:hhStepNum;
  content:counter(hhStepNum);
  position:relative; z-index:2;
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin:0 auto 9px;
  border-radius:50%;
  background:#fff; border:2px solid #e0d9c6;
  color:#c9c1ad;
  font-family:"Lato",sans-serif;
  font-size:14px; font-weight:700; line-height:1;
  transition:background .2s, border-color .2s, color .2s;
}
/* the rail between two circles */
.hhStep > li::after{
  content:""; position:absolute; z-index:1;
  top:15px; right:50%; width:100%; height:2px;
  background:#e8e3d7;
}
.hhStep > li:first-child::after{ display:none; }

.hhStep > li.is-done{ color:#8b8371; }
.hhStep > li.is-done::before{
  /* the tick replaces the number: nothing is lost, the step is
     finished and its position is already given by the order */
  content:"";
  background:var(--hh-gold-soft); border-color:var(--hh-gold-soft);
}
.hhStep > li.is-done::after{ background:var(--hh-gold-rail); }
/* the tick itself, drawn with two borders */
/* The circle is 30px tall and starts at the top of the li, so
   its centre is at 15px. The tick box is placed with its own
   centre there (half of 6px up, half of 10px left) and nudged
   one pixel higher: a checkmark sits optically low when it is
   centred geometrically. */
.hhStep > li.is-done > span::before{
  content:""; position:absolute; z-index:3;
  top:15px; left:50%; margin:-4px 0 0 -5px;
  width:10px; height:6px;
  border:solid #fff; border-width:0 0 2px 2px;
  transform:rotate(-45deg);
}
.hhStep > li.is-now{
  color:var(--hh-pink); font-weight:700;
}
.hhStep > li.is-now::before{
  background:var(--hh-pink); border-color:var(--hh-pink); color:#fff;
  box-shadow:0 0 0 4px rgba(255,36,86,.14);
}
.hhStep > li.is-now::after{ background:var(--hh-gold-rail); }


/* ============================================================
   4. HEADINGS
   ============================================================ */
#FS2_body_Cart h2.pageTitle{
  font-family:"Noto Sans JP",sans-serif;
  font-size:24px; font-weight:700; letter-spacing:.06em;
  color:var(--hh-dark); background:none; border:none;
  padding:0 0 18px; margin:0;
}
#FS2_body_Cart h3.CrossHead{
  background:none !important; border:none;
  border-left:3px solid var(--hh-gold);
  margin:34px 0 14px; padding:2px 0 2px 12px;
  font-size:16px; font-weight:700; letter-spacing:.06em;
  color:var(--hh-dark) !important;
}
/* The page title already opens the section, so the first block
   heading under it does not need to open one again. Left as they
   came, the two paddings stacked to about 70px of nothing. */
#FS2_body_Cart h2.pageTitle + h3.CrossHead,
#FS2_body_Cart h2.pageTitle + form h3.CrossHead:first-of-type,
#FS2_body_Cart h2.pageTitle + div h3.CrossHead:first-of-type{
  margin-top:0;
}
/* <caption> is used as a section heading on several screens.
   display MUST stay table-caption. Setting it to block takes the
   element out of the table box model: caption-side stops working
   and the heading is painted inside the frame instead of above
   it. That is what happened on 2026-09-03. */
#FS2_body_Cart .inputTableArea table > caption{
  display:table-caption; caption-side:top;
  width:auto; margin:0 0 14px; padding:2px 0 2px 12px;
  background:none !important; border:none;
  border-left:3px solid var(--hh-gold);
  text-align:left; color:var(--hh-dark) !important;
  font-size:16px; font-weight:700; letter-spacing:.06em;
}


/* ============================================================
   5. FORM CONTROLS
   ============================================================ */
#FS2_body_Cart .inputTableArea input[type="text"],
#FS2_body_Cart .inputTableArea input[type="email"],
#FS2_body_Cart .inputTableArea input[type="tel"],
#FS2_body_Cart .inputTableArea input[type="password"],
#FS2_body_Cart .inputTableArea select,
#FS2_body_Cart .inputTableArea textarea,
#FS2_body_Cart table.userTable_01 input[type="text"],
#FS2_body_Cart table.userTable_01 input[type="password"]{
  box-sizing:border-box; padding:0 14px; background:#fff;
  border:1px solid #d8d2c4; border-radius:4px;
  font-size:14px; color:var(--hh-dark); vertical-align:middle;
  transition:border-color .15s, box-shadow .15s;
}
#FS2_body_Cart .inputTableArea input[type="text"],
#FS2_body_Cart .inputTableArea input[type="email"],
#FS2_body_Cart .inputTableArea input[type="tel"],
#FS2_body_Cart .inputTableArea input[type="password"],
#FS2_body_Cart .inputTableArea select,
#FS2_body_Cart table.userTable_01 input[type="text"],
#FS2_body_Cart table.userTable_01 input[type="password"]{ height:46px; }

#FS2_body_Cart .inputTableArea input:focus,
#FS2_body_Cart .inputTableArea select:focus,
#FS2_body_Cart .inputTableArea textarea:focus,
#FS2_body_Cart table.userTable_01 input:focus{
  outline:none; border-color:var(--hh-gold);
  box-shadow:0 0 0 3px rgba(168,150,79,.15);
}

/* select : native arrow removed, svg data uri instead (ascii safe) */
#FS2_body_Cart .inputTableArea select{
  -webkit-appearance:none; appearance:none;
  padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6350' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}

/* checkbox */
#FS2_body_Cart input[type="checkbox"].hh,
#FS2_body_Cart .FS2_privacyPageLink_container input[type="checkbox"],
#FS2_body_Cart .FS2_holdEmailAddress input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  position:relative; flex:0 0 auto;
  width:22px; height:22px; margin:0 12px 0 0;
  border:2px solid #c9c1ad; border-radius:4px; background:#fff;
  cursor:pointer; transition:background .15s, border-color .15s;
}
#FS2_body_Cart .FS2_privacyPageLink_container input[type="checkbox"]:hover,
#FS2_body_Cart .FS2_holdEmailAddress input[type="checkbox"]:hover{
  border-color:var(--hh-gold);
}
#FS2_body_Cart .FS2_privacyPageLink_container input[type="checkbox"]:checked,
#FS2_body_Cart .FS2_holdEmailAddress input[type="checkbox"]:checked{
  background:var(--hh-pink); border-color:var(--hh-pink);
}
#FS2_body_Cart .FS2_privacyPageLink_container input[type="checkbox"]:checked::after,
#FS2_body_Cart .FS2_holdEmailAddress input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
#FS2_body_Cart input[type="checkbox"]:focus-visible,
#FS2_body_Cart input[type="radio"]:focus-visible{
  outline:2px solid var(--hh-gold); outline-offset:2px;
}

/* radio */
/* vertical-align matters wherever the parent is NOT a flex box.
   The control is appearance:none, so it is a 20px inline-block,
   and an inline-block sits on the text baseline by default - the
   ring ends up riding above the middle of the words next to it.
   The payment and point options put the radio in a flex label and
   never saw this; the two sub-choices inside the credit card
   block (cardTypeSelect) are plain inline labels, and there the
   gap was visible. middle is ignored inside a flex container, so
   this costs the flex cases nothing. */
#FS2_body_Cart .inputTableArea input[type="radio"]{
  -webkit-appearance:none; appearance:none;
  position:relative; flex:0 0 auto; vertical-align:middle;
  width:20px; height:20px; margin:0 8px 0 0;
  border:2px solid #c9c1ad; border-radius:50%; background:#fff;
  cursor:pointer; transition:border-color .15s;
}
#FS2_body_Cart .inputTableArea input[type="radio"]:hover{ border-color:var(--hh-gold); }
#FS2_body_Cart .inputTableArea input[type="radio"]:checked{ border-color:var(--hh-pink); }
#FS2_body_Cart .inputTableArea input[type="radio"]:checked::after{
  content:""; position:absolute; left:3px; top:3px;
  width:10px; height:10px; border-radius:50%; background:var(--hh-pink);
}

/* required badge : the old icon_require.gif becomes a css chip */
#FS2_body_Cart table.userTable_01 th img[alt="\5FC5\9808"]{ display:none; }
#FS2_body_Cart table.userTable_01 th:has(img[alt="\5FC5\9808"])::after{
  content:"\5FC5\9808";
  display:inline-block; padding:3px 8px; border-radius:2px;
  background:var(--hh-pink); color:#fff;
  font-size:11px; font-weight:700; line-height:1.4; letter-spacing:.04em;
}

/* address search button (a real <input type="button">) */
#FS2_body_Cart .FS2_AddressSearchButton{
  height:46px; margin-left:10px; padding:0 20px;
  background:#fff; border:1px solid var(--hh-dark); border-radius:4px;
  color:var(--hh-dark); font-size:13px; font-weight:500; cursor:pointer;
  transition:background .2s, color .2s;
}
#FS2_body_Cart .FS2_AddressSearchButton:hover{
  background:var(--hh-dark); color:#fff;
}

/* validation messages (fassist)
   VERIFIED 2026-09-06 on GuestEntry with an empty submit. The
   system prints, under the field,
     <div class="FS2_assist_container">
       <span class="FS2_assist_message">...</span>
     </div>
   and puts .FS2_assist_error on the input itself, which becomes
   .FS2_assist_valid once it passes. label.error and
   .fs2_errorMessage were guesses and match nothing here; they
   stay only in case another screen still uses them.
   The system paints the message as a solid red block with white
   text. Ten of those at once is the whole form shouting, so it
   is reduced to one line of text. !important because that block
   style may carry an id. */
#FS2_body_Cart .FS2_assist_container{
  display:block; margin:8px 0 0;
  background:none !important; border:none !important; padding:0 !important;
}
/* A plain red line is not enough here: the store's own notes on
   this form are red text too, so an error read as one more note.
   The message gets the same shape as the page-level banner in
   section 11, one size down - pale ground, thin border, circled
   "!" - so an error is a box and a note is not. */
#FS2_body_Cart .FS2_assist_message,
#FS2_body_Cart label.error,
#FS2_body_Cart .fs2_errorMessage{
  display:inline-flex !important; align-items:center; gap:6px;
  position:static !important; margin:0; box-shadow:none !important;
  background:#fdf2f5 !important; border:1px solid #f2c9d4 !important;
  border-radius:4px !important; padding:6px 12px 6px 10px !important;
  color:#c0392b !important; font-size:12.5px; font-weight:700; line-height:1.5;
  text-align:left;
}
#FS2_body_Cart .FS2_assist_message::before,
#FS2_body_Cart label.error::before,
#FS2_body_Cart .fs2_errorMessage::before{
  content:"!" !important;
  position:static !important;
  flex:0 0 auto; width:15px !important; height:15px !important;
  line-height:12px;
  border:1.5px solid #c0392b !important; border-radius:50%;
  text-align:center; font-size:11px; font-weight:700;
}
#FS2_body_Cart .FS2_assist_message::after,
#FS2_body_Cart label.error::after,
#FS2_body_Cart .fs2_errorMessage::after{ content:none !important; }
/* background-COLOR, not the shorthand: a select carries its
   dropdown arrow as a background-image (section 5) and the
   shorthand wipes it. That is what happened on 2026-09-06. */
/* The delivery-date balloon: div.arrow_box > p.note, the only
   .arrow_box on the screen (verified 2026-09-06).
   It is NOT an error. The date select defaults to "no preference"
   and sits at the bottom of a very long block, so the shop put a
   balloon there to stop people walking past it. It stays on
   screen after a date is chosen, which is the whole point - and
   also why red is wrong for it. An error that never clears reads
   as broken. Gold, the site's own attention colour, says "do not
   miss this" without claiming something is wrong.
   The system's own tail is dropped; see below. */
#FS2_body_Cart .arrow_box{
  position:relative;
  display:inline-block !important; box-sizing:border-box;
  width:auto !important; max-width:100%;
  margin:16px 0 0; padding:0;
  background:#faf6ea !important; border:1px solid #e3d9b8 !important;
  border-radius:4px !important; box-shadow:none !important;
}
/* The system's own tail is drawn on p.note::after and it is red,
   so it is dropped and redrawn here in gold. It has to be redrawn
   rather than recoloured: the original lands under the left edge
   of the box, which is under the label, not under the select.
   The box starts at the left edge of the label column while the
   select starts about 38% of the box width further right, so the
   tail is set at 55%: past the select's left corner, and still
   short of the box's own right edge. Measured on the live page
   2026-09-06. */
#FS2_body_Cart .arrow_box::after,
#FS2_body_Cart .arrow_box p::after,
#FS2_body_Cart .arrow_box .note::after{ content:none !important; display:none !important; }
/* A square turned 45 degrees. Only border-left and border-top are
   set, and after the rotation those two edges are the ones facing
   up, so the outline continues cleanly and the half sitting inside
   the box has no line across it. No image, and the colours stay in
   step with the box above.
   Every property the shop's own tail sets has to be answered here,
   not only the ones this shape needs. The shop draws its tail the
   usual way - a zero-sized element with thick transparent borders
   and one coloured edge - so leaving border-right and border-bottom
   alone left a red wedge hanging inside the box, and its margin
   dragged the whole thing 20px off the mark (both seen live
   2026-09-06). The borders are zeroed as a set before the two
   visible edges are put back, and the geometry is forced. */
#FS2_body_Cart .arrow_box::before{
  content:"" !important; display:block !important;
  position:absolute !important;
  left:55% !important; right:auto !important;
  top:-6px !important; bottom:auto !important;
  width:10px !important; height:10px !important;
  margin:0 !important; padding:0 !important;
  background:#faf6ea !important;
  border:0 solid #e3d9b8 !important;
  border-left-width:1px !important; border-top-width:1px !important;
  border-radius:0 !important; box-shadow:none !important;
  transform:rotate(45deg) !important; transform-origin:center !important;
}
#FS2_body_Cart .arrow_box p.note,
#FS2_body_Cart .arrow_box .note{
  display:flex; align-items:center; gap:8px;
  margin:0; padding:11px 18px 11px 14px;
  background:none !important; border:none !important;
  color:#8c7c3e !important; font-size:13px; font-weight:500;
  line-height:1.6; text-align:left;
}
#FS2_body_Cart .arrow_box p.note::before{
  content:"!";
  flex:0 0 auto; width:16px; height:16px; line-height:14px;
  border:1.5px solid #a8964f; border-radius:50%;
  color:#a8964f; text-align:center; font-size:11px; font-weight:700;
}

#FS2_body_Cart input.FS2_assist_error,
#FS2_body_Cart select.FS2_assist_error,
#FS2_body_Cart textarea.FS2_assist_error,
#FS2_body_Cart input.error,
#FS2_body_Cart select.error{
  border-color:#e08a9b !important; background-color:#fffafb !important;
}


/* ============================================================
   6. ACCORDION  (<details>, no javascript)
   used inside admin-entered text on several screens
   ============================================================ */
/* White, not the pale gold this used to be. On the payment
   screen the selected delivery card's header is #faf6ea, and an
   accordion sitting inside it in the same colour read as part of
   the selection rather than as something to open. The border and
   the "+" carry it now. */
#FS2_body_Cart .hhac{
  margin:0 0 12px; border:1px solid #e8dfc4; border-radius:4px;
  background:#fff; overflow:hidden;
}
#FS2_body_Cart .hhac:last-child{ margin-bottom:0; }
#FS2_body_Cart .hhac > summary{
  display:flex; align-items:center; gap:9px;
  padding:12px 16px; cursor:pointer; list-style:none;
  background:#fff; font-size:13px; font-weight:700; color:#8c7c3e;
  transition:background .15s;
}
/* with both halves white, the fold needs a line to show where the
   header ends and the text begins */
#FS2_body_Cart .hhac[open] > summary{ border-bottom:1px solid #f0ebdd; }
#FS2_body_Cart .hhac > summary::-webkit-details-marker{ display:none; }
/* The mark is the only thing on the bar that says "this opens",
   and at 17px in #a3966d it was quieter than the label beside it.
   22px and the full gold; line-height 1 keeps the taller glyph
   from growing the bar. The minus is set in its own box of the
   same width so the bar does not shift by a pixel when it is
   swapped for the plus. */
#FS2_body_Cart .hhac > summary::after{
  content:"+"; margin-left:auto;
  width:22px; text-align:center; line-height:1;
  font-size:22px; font-weight:400; color:var(--hh-gold);
}
#FS2_body_Cart .hhac[open] > summary::after{ content:"-"; }

/* One fold in the flow is not optional reading. On the delivery
   screen, "how to address a company" decides what gets printed
   on the label, and getting it wrong is a delivery the recipient
   is embarrassed by rather than a form error anyone catches.
   It takes the same pink as the invoice fold - the flow's colour
   for the thing that must not be walked past - and every other
   fold stays gold, which is what keeps the signal worth
   anything. The modifier is set in the markup, so a second fold
   only becomes pink when someone decides it should. */
#FS2_body_Cart .hhac--key{ border-color:#f2c9d4; }
#FS2_body_Cart .hhac--key > summary{
  background:#fdf2f5; color:var(--hh-pink);
}
#FS2_body_Cart .hhac--key > summary:hover{ background:#fbe6ec; }
#FS2_body_Cart .hhac--key[open] > summary{ border-bottom-color:#f2c9d4; }
#FS2_body_Cart .hhac--key > summary::after{ color:var(--hh-pink); }
#FS2_body_Cart .hhac > summary:hover{ background:#faf9f5; }
#FS2_body_Cart .hhac__body{
  padding:16px; font-size:12.5px; line-height:1.95; color:#5a5245;
}
#FS2_body_Cart .hhac__body font[color="red"]{ color:#c0392b !important; }
/* A worked example needs a way to say "here is the case" without
   borrowing the error colours. The only box available inside the
   comment areas until now was the pink one, which the rest of the
   flow uses for things that are wrong. This is the same idea in
   the site's gold: a band with a rule down its left edge. */
/* A lead line for a comment area: the one sentence that has to be
   read before the rest of the screen. Sized between the page title
   and the body so it reads as an instruction, not as a warning -
   the pink boxes are already spoken for. */
#FS2_body_Cart .hhLead{
  margin:0 0 14px;
  font-size:14px; font-weight:700; line-height:1.8; color:var(--hh-dark);
}
#FS2_body_Cart .hhCase{
  display:block; margin:7px 0 11px; padding:9px 14px;
  background:#faf6ea; border-left:3px solid var(--hh-gold-soft);
  border-radius:0 2px 2px 0;
  font-size:13px; font-weight:700; line-height:1.7;
  color:#7a6a34;
}
#FS2_body_Cart .hhac__body b{ color:var(--hh-dark); }

/* ------------------------------------------------------------
   Worked examples with a picture of the filled-in fields
   (.hhSub / .hhFill / .hhFig)

   Written for the "how to address a company" fold on the
   delivery screen. Two cases live in one fold, and until now the
   only thing separating them was a <b> at body size - so the
   fold read as one long paragraph and people were filling the
   name fields the wrong way round anyway. Each case now opens
   with a heading, states the address it applies to in a gold
   band (.hhCase), says which field takes what, and ends with a
   picture of the fields already filled in.

   The line of field names is kept even though the picture shows
   the same thing: it is selectable, it is searchable, and it is
   what is left if the image does not load.
   ------------------------------------------------------------ */
#FS2_body_Cart .hhac__body .hhSub{
  display:block; margin:26px 0 10px;
  font-size:14px; font-weight:700; line-height:1.6; color:var(--hh-dark);
}
#FS2_body_Cart .hhac__body .hhSub:first-child{ margin-top:0; }
/* the band belongs to the heading above it, so it does not open
   a gap of its own */
#FS2_body_Cart .hhac__body .hhSub + .hhCase{ margin-top:0; }
/* field name in the label tone, the value in body colour, so the
   eye can pick out what actually goes in the box */
#FS2_body_Cart .hhac__body .hhFill{
  margin:6px 0 0; font-size:12.5px; line-height:1.9; color:#8b8371;
}
#FS2_body_Cart .hhac__body .hhFill b{ color:var(--hh-dark); font-weight:700; }
/* The picture carries width and height attributes in the markup
   and this rule keeps the ratio, so the fold does not jump when
   the image arrives. It sits in a frame because it is a picture
   OF the form: without an edge it reads as if those fields were
   part of this page. */
/* 90%, on the frame rather than on the image, so the border
   shrinks with it - at 100% on the frame and 90% inside it the
   picture would sit in a white margin of its own.
   Centred with auto margins. Left-aligned it read as another
   paragraph of the text above; with equal air on both sides it
   reads as a figure the text is pointing at, which is what it
   is. */
#FS2_body_Cart .hhFig{
  display:block; max-width:90%; margin:14px auto 0; padding:0;
  background:#fff; border:1px solid var(--hh-line); border-radius:4px;
  overflow:hidden;
}
#FS2_body_Cart .hhFig img{
  display:block; width:100%; height:auto;
}

/* ------------------------------------------------------------
   Payment method description (.hhPay)
   The deferred-payment method had its whole explanation baked
   into two jpegs: the logo strip, the sample invoice, the bullet
   list and the bordered terms box were all pixels. That text
   could not be folded, could not be selected, could not reflow
   on a phone and did not carry a single style from this file.
   The markup below is the same information as real text, so the
   long half can go into a fold like everything else on this
   screen. Class names are kept to one short word because the
   admin field this goes into is length-capped.
   ------------------------------------------------------------ */
#FS2_body_Cart .hhPay{ font-size:13px; line-height:1.8; color:#5a5245; }
#FS2_body_Cart .hhPay > .lead{
  margin:0 0 13px; font-size:14px; font-weight:700; color:var(--hh-dark);
}
#FS2_body_Cart .hhPay ul.facts{
  margin:0 0 14px; padding:0; list-style:none; border-top:1px solid #ece7d9;
}
#FS2_body_Cart .hhPay ul.facts > li{
  display:flex; gap:14px; margin:0; padding:7px 2px;
  border-bottom:1px solid #ece7d9; line-height:1.6;
}
#FS2_body_Cart .hhPay ul.facts > li > b{
  flex:0 0 8em; color:#8c7c3e; font-weight:700;
}
#FS2_body_Cart .hhPay ul.pay{ margin:0 0 12px; padding:0; list-style:none; }
#FS2_body_Cart .hhPay ul.pay > li{ margin:0 0 5px; padding:0; }
#FS2_body_Cart .hhPay ul.pay > li > b{ margin-right:.7em; color:#8c7c3e; }
#FS2_body_Cart .hhPay > .fine{
  margin:0 0 14px; font-size:12.5px; line-height:1.75; color:#7d7566;
}
#FS2_body_Cart .hhPay .hhac__body ul{ margin:0; padding:0 0 0 1.2em; }
#FS2_body_Cart .hhPay .hhac__body li{ margin:0 0 7px; }
#FS2_body_Cart .hhPay .hhac__body li:last-child{ margin-bottom:0; }
#FS2_body_Cart .hhPay .hhac__body a{ color:#8c7c3e; text-decoration:underline; }


/* ============================================================
   7. CART CONTENTS TABLE
   shared by ShoppingCart / GuestEntry / DeliveryEdit /
   SettleEdit / OrderConfirm
   ============================================================ */
#FS2_body_Cart table.cartTable{
  width:100%; border-collapse:collapse;
  border:1px solid var(--hh-line); background:#fff;
}
#FS2_body_Cart table.cartTable > caption{ display:none; }
#FS2_body_Cart table.cartTable th,
#FS2_body_Cart table.cartTable td{ border:none; background:none; }
#FS2_body_Cart table.cartTable thead th{
  background:var(--hh-head); color:#6b6350;
  font-size:12px; font-weight:500; letter-spacing:.06em;
  padding:11px 8px; text-align:center; white-space:nowrap;
}
#FS2_body_Cart table.cartTable tbody td{
  padding:14px 8px; vertical-align:top;
  font-size:14px; line-height:1.7; color:var(--hh-dark);
}

/* option rows. NOTE the class name differs between screens:
   ShoppingCart uses FS2_Cart_optionPrice_row (capital C),
   the others use FS2_cartTable_optionPrice_row. both listed. */
/* Option rows. These are a read-back of what was chosen on the
   item page, not something to act on here, so they are set as a
   compact list under the item name. Three of them at the old
   14px padding took more vertical space than the item itself. */
#FS2_body_Cart tr.FS2_Cart_optionPrice_row td,
#FS2_body_Cart tr.FS2_cartTable_optionPrice_row td{
  border-top:1px dotted #e9e4d8;
  padding-top:7px; padding-bottom:7px;
  font-size:12px; line-height:1.6; color:#6b6350;
}
#FS2_body_Cart .FS2_option_price_rule{ color:#b5ad99; }
#FS2_body_Cart .FS2_cartTable_optionName{
  padding-left:16px; padding-right:16px;
  font-size:12px; line-height:1.7; color:#6b6350;
}

#FS2_body_Cart .FS2_GoodsImage_td{ width:96px; padding:14px 0 14px 18px; }
#FS2_body_Cart .FS2_GoodsImage_td img{
  width:76px; height:auto; background:var(--hh-head); border-radius:2px;
}
#FS2_body_Cart .FS2_GoodsName_td{
  padding-left:16px; padding-right:16px;
  font-size:12px; line-height:1.7; color:#6b6350;
}
#FS2_body_Cart .FS2_GoodsName_td > a,
#FS2_body_Cart .FS2_GoodsName_td a.FS2_itemname{
  font-size:14px; font-weight:700; line-height:1.6;
  color:var(--hh-pink);
  text-decoration:underline; text-underline-offset:4px;
}
#FS2_body_Cart .FS2_GoodsName_td a:hover{ color:var(--hh-gold); }

#FS2_body_Cart .FS2_cartTable_unitPrice{
  text-align:right; white-space:nowrap; color:#5a5245; padding-right:16px;
}
#FS2_body_Cart tr.FS2_Cart_optionPrice_row .FS2_cartTable_unitPrice,
#FS2_body_Cart tr.FS2_cartTable_optionPrice_row .FS2_cartTable_unitPrice{ font-size:12px; }
#FS2_body_Cart .FS2_cartTable_point{ text-align:center; color:#6b6350; }
#FS2_body_Cart .FS2_cartTable_amount{ text-align:center; }
#FS2_body_Cart .FS2_cartTable_amount input[type="text"]{
  width:58px; height:40px; box-sizing:border-box;
  text-align:center; font-size:15px; color:var(--hh-dark);
  border:1px solid #d8d2c4; border-radius:4px; background:#fff;
}
#FS2_body_Cart .FS2_cartTable_subtotal{
  text-align:right; white-space:nowrap; padding-right:16px;
  font-size:16px; font-weight:700; color:var(--hh-pink);
}

/* totals box */
#FS2_body_Cart .FS2_total_area{
  background:var(--hh-bg); padding:10px 24px 2px; border-radius:4px;
}
#FS2_body_Cart .FS2_total_area table.cartTable{
  width:100%; border:none; background:none;
}
/* On the cart the panel runs the full page width, but the rows
   inside it must not: a label at the far left and a figure at
   the far right stop reading as a pair.
   The block is held to --cart-btn and pushed to the right edge,
   so the figures land under the subtotal column of the table
   above. The eye follows one line down the right side: subtotal,
   item total, order button. */
.FS2_body_Cart_ShoppingCart .FS2_total_area table.cartTable{
  max-width:var(--cart-btn); margin:0 0 0 auto;
}
#FS2_body_Cart .FS2_total_area th,
#FS2_body_Cart .FS2_total_area td{
  width:auto !important; padding:7px 0;
  border-bottom:1px solid var(--hh-line);
  font-size:14px; color:var(--hh-dark);
}
#FS2_body_Cart .FS2_total_area th{
  text-align:left; font-weight:500; color:#6b6350; white-space:nowrap;
}
/* The figures carry the card. The labels stay at 14px so the
   numbers read as the answer to them rather than as another
   line of the same text. */
#FS2_body_Cart .FS2_total_area td{
  text-align:right; font-weight:700;
  font-size:16px; letter-spacing:.01em; line-height:1.3;
}
/* the item total is the figure the customer checks before
   committing, so it takes one step up on its own */
#FS2_body_Cart .FS2_total_area .FS2_Cart_Detail_ItemPriceSummary td,
#FS2_body_Cart .FS2_total_area tr.summary td{
  font-size:19px; color:var(--hh-pink);
}
#FS2_body_Cart .FS2_total_area table.cartTable tr:last-child th,
#FS2_body_Cart .FS2_total_area table.cartTable tr:last-child td{ border-bottom:none; }


/* ============================================================
   8. BUTTONS
   The system prints <input type="image"> with an old gif.
   The image is made transparent and laid over a styled box,
   so the click target and the form action stay untouched.
   ============================================================ */

/* primary : filled pink */
#FS2_body_Cart .hhbtn-primary,
#FS2_body_Cart .FS2_bottom_btn_center_1{
  position:relative; box-sizing:border-box;
  max-width:420px; height:58px; line-height:58px;
  margin:44px auto 0; padding:0;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.08em;
  transition:background .2s;
}
#FS2_body_Cart .FS2_bottom_btn_center_1:hover{ background:#d90f3f; }
#FS2_body_Cart .FS2_bottom_btn_center_1 input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}

/* the 1px transparent gif used for enter-key submit */
#FS2_body_Cart .dummySubmit{ position:absolute; }


/* ============================================================
   9. SCREEN : ShoppingCart
   ============================================================ */

/* ---- 9-1. one column ------------------------------------
   The cart reads top to bottom: what you are buying, then what
   it costs, then the order button. A right-hand summary column
   was tried first (2026-09-02) and dropped: at this width the
   item table is the thing being checked, and pushing the totals
   beside it splits the reading in two.

   flex with order, not grid: every part is a direct child of
   #form and the system may add more, so a column that simply
   stacks in a set order survives an extra element better than
   a fixed grid does.

   order
     1  page title
     2  item table
     3  recalculate
     4  totals + consent + order button  (one card, right)
     5  continue shopping                (left)
   --------------------------------------------------------- */
.FS2_body_Cart_ShoppingCart #form{
  display:flex; flex-direction:column; align-items:stretch;
}
.FS2_body_Cart_ShoppingCart #form > br{ display:none; }
.FS2_body_Cart_ShoppingCart #form > *{ order:9; }

.FS2_body_Cart_ShoppingCart #form > h2.pageTitle{ order:1; }
.FS2_body_Cart_ShoppingCart #form > h3.CrossHead{ display:none; }
.FS2_body_Cart_ShoppingCart #form > table.cartTable{ order:2; }
.FS2_body_Cart_ShoppingCart #form > .itemRight50{ order:3; }
.FS2_body_Cart_ShoppingCart #form > .FS2_privacyPageLink_container{ order:4; }
.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_1{ order:5; }
.FS2_body_Cart_ShoppingCart #form > span.itemRight{ order:6; }
.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_2{ order:7; }

/* The summary card runs the full width, directly under the item
   table. A right-hand column was tried first and dropped twice
   over: with one item the left half is empty, and with several
   the card is stranded at the top while the table runs past it.
   Stacked, the page reads once from top to bottom, and the two
   blocks share an edge so they read as one object. */
.FS2_body_Cart_ShoppingCart #form > .itemRight50,
.FS2_body_Cart_ShoppingCart #form > .FS2_privacyPageLink_container,
.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_1{
  box-sizing:border-box; width:100%; max-width:none;
  margin:0;
}
.FS2_body_Cart_ShoppingCart #form > .itemRight50{
  padding:0; margin-top:0;
  border-radius:0 0 4px 4px; overflow:hidden;
}
/* the table above gives up its bottom corners so the two meet */
.FS2_body_Cart_ShoppingCart #form > table.cartTable{
  border-bottom:none; border-radius:4px 4px 0 0;
}
.FS2_body_Cart_ShoppingCart #form > .itemRight50 .FS2_total_area,
.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_1 .itemRight{
  float:none; clear:none; width:auto;
}
/* Continue-shopping leaves the column and sits on the left of the
   recalculate row, so the two secondary actions share one line
   instead of costing two. The order button stays the filled one;
   this one is outlined, which is what keeps them apart.
   The pull-up itself is set in 9-6 with the box: written here it
   was overwritten by the margin shorthand there and the button
   dropped 70px, which is what shipped until 2026-09-06. */
.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_2{
  align-self:flex-start;
}

/* ---- 9-2. column widths ---------------------------------- */
.FS2_body_Cart_ShoppingCart #form > table.cartTable thead th.FS2_cartTableHeader_goodsName{ width:53%; }
.FS2_body_Cart_ShoppingCart #form > table.cartTable thead th.FS2_cartTableHeader_unitPrice{ width:12%; }
.FS2_body_Cart_ShoppingCart #form > table.cartTable thead th.FS2_cartTableHeader_point{ width:8%; }
.FS2_body_Cart_ShoppingCart #form > table.cartTable thead th.FS2_cartTableHeader_amount{ width:10%; }
.FS2_body_Cart_ShoppingCart #form > table.cartTable thead th.FS2_cartTableHeader_subtotal{ width:12%; }
.FS2_body_Cart_ShoppingCart #form > table.cartTable thead th.FS2_cartTableHeader_delete{ width:6%; }

/* ---- 9-3. delete becomes a text link --------------------- */
.FS2_body_Cart_ShoppingCart .FS2_cartTable_delete{
  position:relative; width:78px; text-align:center;
}
.FS2_body_Cart_ShoppingCart .FS2_cartTable_delete input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
.FS2_body_Cart_ShoppingCart .FS2_cartTable_delete::after{
  content:"\524A\9664";
  font-size:13px; color:#6b6350;
  text-decoration:underline; text-underline-offset:4px;
}

/* ---- 9-4. recalculate --------------------------------------
   "empty the cart" is hidden: setting the quantity to 0 does the
   same thing, and the button causes more accidents than it saves.
   ---------------------------------------------------------- */
.FS2_body_Cart_ShoppingCart #form > span.itemRight{
  position:relative; display:block;
  box-sizing:border-box; width:152px; height:44px;
  margin:20px 0 0 auto; padding:0; font-size:0; line-height:0;
}
.FS2_body_Cart_ShoppingCart #form > span.itemRight::before{
  content:"\5408\8A08\91D1\984D\518D\8A08\7B97";
  display:block; box-sizing:border-box;
  width:152px; height:44px; line-height:42px;
  border:1px solid #cfc6a6; border-radius:4px;
  background:#fff; color:#8c7c3e;
  font-size:13px; letter-spacing:.04em; text-align:center;
}
.FS2_body_Cart_ShoppingCart #form > span.itemRight::after{ content:none; }
.FS2_body_Cart_ShoppingCart #form > span.itemRight input[name="calculate"]{
  position:absolute; top:0; right:0; width:152px; height:44px;
  opacity:0; cursor:pointer; z-index:2;
}
.FS2_body_Cart_ShoppingCart #form > span.itemRight input[name="clearCart"]{ display:none; }

/* ---- 9-5. consent ---------------------------------------- */
/* The consent row starts a new act: the figures above are being
   read, this one is being agreed to. It needs a gap the rows
   inside the totals table do not have. */
.FS2_body_Cart_ShoppingCart #form > .FS2_privacyPageLink_container{
  background:var(--hh-bg); border:none; padding:14px 24px 8px;
  text-align:right; font-size:13px; line-height:1.8; color:#5a5245;
}
.FS2_body_Cart_ShoppingCart .FS2_privacyPageLink_container label{
  display:flex; align-items:center; box-sizing:border-box;
  width:100%; max-width:var(--cart-btn);
  padding:11px 16px; margin:0 0 4px auto;
  background:#fff; border:none; border-radius:4px;
  font-size:14px; font-weight:700; color:var(--hh-dark);
  cursor:pointer; transition:background .15s;
}
.FS2_body_Cart_ShoppingCart .FS2_privacyPageLink_container label:hover{ background:#fffdf6; }
/* once ticked the row stops shouting (ignored where :has is unsupported) */
.FS2_body_Cart_ShoppingCart .FS2_privacyPageLink_container:has(#privacyAgree:checked) label{
  background:#fbfaf6; font-weight:500;
}
.FS2_body_Cart_ShoppingCart .FS2_privacyPageLink_container a.FS_privacyPageLink{
  font-size:12px; color:#8b8371;
  text-decoration:underline; text-underline-offset:3px;
}

/* ---- 9-6. order / continue buttons ----------------------- */
.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_1{
  background:var(--hh-bg); padding:0 24px 16px; border-radius:0 0 4px 4px;
}
.FS2_body_Cart_ShoppingCart .FS2_bottom_btn_right_and_left_1 .itemRight{
  display:block; position:relative;
  max-width:var(--cart-btn); margin:0 0 0 auto;
  background:var(--hh-pink); border-radius:4px;
  padding:15px 0; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.1em;
  transition:background .2s;
}
.FS2_body_Cart_ShoppingCart .FS2_bottom_btn_right_and_left_1 .itemRight:hover{ background:#d90f3f; }
.FS2_body_Cart_ShoppingCart .FS2_bottom_btn_right_and_left_1 .itemRight::after{
  content:"\3054\6CE8\6587\624B\7D9A\304D\3078\9032\3080";
}
.FS2_body_Cart_ShoppingCart .FS2_bottom_btn_right_and_left_1 #buy_here{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}

.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_2{
  position:relative; box-sizing:border-box;
  width:auto; max-width:none; height:44px;
  margin:26px 0 0; padding:0 26px; line-height:44px;
  background:#fff; border:1px solid var(--hh-dark); border-radius:4px;
  text-align:center; transition:background .2s, color .2s;
  color:var(--hh-dark); font-size:14px; font-weight:500; letter-spacing:.06em;
}
.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_2:hover{
  background:var(--hh-dark); color:#fff;
}
.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_2::after{
  content:"\2190\00A0\30B7\30E7\30C3\30D4\30F3\30B0\3092\7D9A\3051\308B";
}
.FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_2 input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
/* Pulled up by its own height so it lands on the recalculate row.
   Guarded by :has so it only happens when that row is actually
   there - with an empty cart the button keeps the 26px above and
   has nothing to collide with. The id is here on purpose: the
   26px is set by a shorthand further up in this section. */
#FS2_body_Cart.FS2_body_Cart_ShoppingCart #form:has(> span.itemRight) > .FS2_bottom_btn_right_and_left_2{
  margin-top:-44px;
}


/* ============================================================
   10. STEP LABELS AND PROGRESS PER SCREEN
   the site's own flow is: cart -> login -> customer -> address
   -> payment -> confirm -> complete
   ============================================================ */
.FS2_body_Cart_GuestLogin .orderFlow::before{
  content:"STEP 1 / 5\3000\30ED\30B0\30A4\30F3";
}
.FS2_body_Cart_GuestLogin .orderFlow::after{
  background:linear-gradient(to right, var(--hh-pink) 0 20%, var(--hh-line) 20% 100%);
}
.FS2_body_Cart_GuestEntry .orderFlow::before{
  content:"STEP 2 / 5\3000\304A\5BA2\69D8\60C5\5831";
}
.FS2_body_Cart_GuestEntry .orderFlow::after{
  background:linear-gradient(to right, var(--hh-pink) 0 40%, var(--hh-line) 40% 100%);
}
.FS2_body_Cart_DeliveryEdit .orderFlow::before{
  content:"STEP 3 / 5\3000\304A\5C4A\3051\5148";
}
.FS2_body_Cart_DeliveryEdit .orderFlow::after{
  background:linear-gradient(to right, var(--hh-pink) 0 60%, var(--hh-line) 60% 100%);
}
.FS2_body_Cart_SettleEdit .orderFlow::before{
  content:"STEP 4 / 5\3000\304A\652F\6255\3044\65B9\6CD5";
}
.FS2_body_Cart_SettleEdit .orderFlow::after{
  background:linear-gradient(to right, var(--hh-pink) 0 80%, var(--hh-line) 80% 100%);
}
.FS2_body_Cart_OrderConfirm .orderFlow::before{
  content:"STEP 5 / 5\3000\6700\7D42\78BA\8A8D";
}
.FS2_body_Cart_OrderConfirm .orderFlow::after{ background:var(--hh-pink); }
.FS2_body_Cart_OrderComplete .orderFlow::before{
  content:"\3054\6CE8\6587\5B8C\4E86"; color:var(--hh-pink);
}
.FS2_body_Cart_OrderComplete .orderFlow::after{ background:var(--hh-pink); }


/* ============================================================
   10-B. NUMBERED STEP : STATE PER SCREEN
   Copy one block and change the body class and the two numbers
   to add a screen.
   ============================================================ */
.FS2_body_Cart_GuestLogin .hhStep > li:nth-child(1){ color:var(--hh-pink); font-weight:700; }
.FS2_body_Cart_GuestLogin .hhStep > li:nth-child(1)::before{
  background:var(--hh-pink); border-color:var(--hh-pink); color:#fff;
  box-shadow:0 0 0 4px rgba(255,36,86,.14);
}

.FS2_body_Cart_GuestEntry .hhStep > li:nth-child(-n+1){ color:#8b8371; }
.FS2_body_Cart_GuestEntry .hhStep > li:nth-child(-n+1)::before{
  content:""; background:var(--hh-gold-soft); border-color:var(--hh-gold-soft);
}
.FS2_body_Cart_GuestEntry .hhStep > li:nth-child(-n+1) > span::before{
  content:""; position:absolute; z-index:3;
  top:15px; left:50%; margin:-4px 0 0 -5px;
  width:10px; height:6px;
  border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg);
}
.FS2_body_Cart_GuestEntry .hhStep > li:nth-child(-n+2)::after{ background:var(--hh-gold-rail); }
.FS2_body_Cart_GuestEntry .hhStep > li:nth-child(2){ color:var(--hh-pink); font-weight:700; }
.FS2_body_Cart_GuestEntry .hhStep > li:nth-child(2)::before{
  background:var(--hh-pink); border-color:var(--hh-pink); color:#fff;
  box-shadow:0 0 0 4px rgba(255,36,86,.14);
}

.FS2_body_Cart_DeliveryEdit .hhStep > li:nth-child(-n+2){ color:#8b8371; }
.FS2_body_Cart_DeliveryEdit .hhStep > li:nth-child(-n+2)::before{
  content:""; background:var(--hh-gold-soft); border-color:var(--hh-gold-soft);
}
.FS2_body_Cart_DeliveryEdit .hhStep > li:nth-child(-n+2) > span::before{
  content:""; position:absolute; z-index:3;
  top:15px; left:50%; margin:-4px 0 0 -5px;
  width:10px; height:6px;
  border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg);
}
.FS2_body_Cart_DeliveryEdit .hhStep > li:nth-child(-n+3)::after{ background:var(--hh-gold-rail); }
.FS2_body_Cart_DeliveryEdit .hhStep > li:nth-child(3){ color:var(--hh-pink); font-weight:700; }
.FS2_body_Cart_DeliveryEdit .hhStep > li:nth-child(3)::before{
  background:var(--hh-pink); border-color:var(--hh-pink); color:#fff;
  box-shadow:0 0 0 4px rgba(255,36,86,.14);
}

.FS2_body_Cart_SettleEdit .hhStep > li:nth-child(-n+3){ color:#8b8371; }
.FS2_body_Cart_SettleEdit .hhStep > li:nth-child(-n+3)::before{
  content:""; background:var(--hh-gold-soft); border-color:var(--hh-gold-soft);
}
.FS2_body_Cart_SettleEdit .hhStep > li:nth-child(-n+3) > span::before{
  content:""; position:absolute; z-index:3;
  top:15px; left:50%; margin:-4px 0 0 -5px;
  width:10px; height:6px;
  border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg);
}
.FS2_body_Cart_SettleEdit .hhStep > li:nth-child(-n+4)::after{ background:var(--hh-gold-rail); }
.FS2_body_Cart_SettleEdit .hhStep > li:nth-child(4){ color:var(--hh-pink); font-weight:700; }
.FS2_body_Cart_SettleEdit .hhStep > li:nth-child(4)::before{
  background:var(--hh-pink); border-color:var(--hh-pink); color:#fff;
  box-shadow:0 0 0 4px rgba(255,36,86,.14);
}

.FS2_body_Cart_OrderConfirm .hhStep > li:nth-child(-n+4){ color:#8b8371; }
.FS2_body_Cart_OrderConfirm .hhStep > li:nth-child(-n+4)::before{
  content:""; background:var(--hh-gold-soft); border-color:var(--hh-gold-soft);
}
.FS2_body_Cart_OrderConfirm .hhStep > li:nth-child(-n+4) > span::before{
  content:""; position:absolute; z-index:3;
  top:15px; left:50%; margin:-4px 0 0 -5px;
  width:10px; height:6px;
  border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg);
}
.FS2_body_Cart_OrderConfirm .hhStep > li::after{ background:var(--hh-gold-rail); }
.FS2_body_Cart_OrderConfirm .hhStep > li:nth-child(5){ color:var(--hh-pink); font-weight:700; }
.FS2_body_Cart_OrderConfirm .hhStep > li:nth-child(5)::before{
  background:var(--hh-pink); border-color:var(--hh-pink); color:#fff;
  box-shadow:0 0 0 4px rgba(255,36,86,.14);
}

/* every step behind you on the completion screen */
.FS2_body_Cart_OrderComplete .hhStep > li{ color:#8b8371; }
.FS2_body_Cart_OrderComplete .hhStep > li::before{
  content:""; background:var(--hh-gold-soft); border-color:var(--hh-gold-soft);
}
.FS2_body_Cart_OrderComplete .hhStep > li > span::before{
  content:""; position:absolute; z-index:3;
  top:15px; left:50%; margin:-4px 0 0 -5px;
  width:10px; height:6px;
  border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg);
}
.FS2_body_Cart_OrderComplete .hhStep > li::after{ background:var(--hh-gold-rail); }


/* ============================================================
   11. SCREEN : GuestLogin
   ============================================================ */
.FS2_body_Cart_GuestLogin #form .FS2_login_layout_table{
  width:100%; border-collapse:collapse; border:none;
  background:var(--hh-bg); border-radius:4px;
}
.FS2_body_Cart_GuestLogin #form .FS2_login_layout_table_td_left,
.FS2_body_Cart_GuestLogin #form .FS2_login_layout_table_td_right{
  width:50%; padding:40px; vertical-align:top; border:none;
}
.FS2_body_Cart_GuestLogin #form .FS2_login_layout_table_td_right{
  border-left:1px solid var(--hh-line);
}
.FS2_body_Cart_GuestLogin #form .FS2_login_layout_table h3.CrossHead{
  background:none; border:none; margin:0 0 26px; padding:0;
  text-align:center; font-size:18px; font-weight:700;
  letter-spacing:.06em; color:var(--hh-dark);
}
.FS2_body_Cart_GuestLogin #form .inputTableArea{
  margin:0; padding:0; border:none; background:none;
}
.FS2_body_Cart_GuestLogin #form table.userTable_01{
  width:100%; border:none; border-collapse:collapse; background:none;
}
.FS2_body_Cart_GuestLogin #form table.userTable_01 caption{ display:none; }
.FS2_body_Cart_GuestLogin #form table.userTable_01 th{
  width:34%; padding:9px 14px 9px 0; border:none; background:none;
  text-align:left; vertical-align:middle; white-space:nowrap;
  font-size:13px; font-weight:500; color:#5a5245;
}
.FS2_body_Cart_GuestLogin #form table.userTable_01 td{ padding:9px 0; border:none; background:none; }
.FS2_body_Cart_GuestLogin #form table.userTable_01 input[type="text"],
.FS2_body_Cart_GuestLogin #form table.userTable_01 input[type="password"]{ width:100%; }

.FS2_body_Cart_GuestLogin #form .FS2_holdEmailAddress{ margin:14px 0 0; }
.FS2_body_Cart_GuestLogin #form .FS2_holdEmailAddress label{
  display:flex; align-items:center; cursor:pointer;
  font-size:13px; color:#5a5245;
}
.FS2_body_Cart_GuestLogin #form .FS2_holdEmailAddress input[type="checkbox"]{
  width:20px; height:20px; margin-right:10px;
}
.FS2_body_Cart_GuestLogin #form .FS2_holdEmailAddress input[type="checkbox"]:checked::after{ left:5px; top:1px; }

/* login button */
.FS2_body_Cart_GuestLogin #form .inputTableArea .itemCenter{
  position:relative; display:block;
  height:56px; line-height:56px; margin:24px 0 0; padding:0;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.1em;
  transition:background .2s;
}
.FS2_body_Cart_GuestLogin #form .inputTableArea .itemCenter:hover{ background:#d90f3f; }
.FS2_body_Cart_GuestLogin #form .inputTableArea .itemCenter::after{
  content:"\30ED\30B0\30A4\30F3";
}
.FS2_body_Cart_GuestLogin #form .inputTableArea .itemCenter #login{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}

/* password reminder : the ">>" in the markup is hidden and the
   label is redrawn, because the text itself cannot be edited */
.FS2_body_Cart_GuestLogin #form .inputTableArea div[align="right"]{
  text-align:center !important; margin:16px 0 0;
}
.FS2_body_Cart_GuestLogin #form .inputTableArea div[align="right"] a{
  font-size:0; color:#8b8371;
  text-decoration:underline; text-underline-offset:4px;
}
.FS2_body_Cart_GuestLogin #form .inputTableArea div[align="right"] a::before{
  content:"\30D1\30B9\30EF\30FC\30C9\3092\304A\5FD8\308C\3067\3059\304B\FF1F";
  font-size:13px;
}

/* right column */
.FS2_body_Cart_GuestLogin #form .FS2_MemberRegistration_comment{
  font-size:13px; line-height:1.9; color:#5a5245;
}
.FS2_body_Cart_GuestLogin #form .FS2_MemberRegistration_comment p{ margin:0; }
.FS2_body_Cart_GuestLogin #form .FS2_MemberRegistration_comment b{ font-weight:500; }
.FS2_body_Cart_GuestLogin #form .FS2_MemberRegistration_comment font[color="#d5002b"]{
  display:block; margin:0 0 16px; padding:14px 16px;
  background:#fff; border-radius:4px;
  color:var(--hh-dark) !important; font-size:13px; line-height:1.8;
}
.FS2_body_Cart_GuestLogin #form .FS2_Login_btn_position{ position:relative; margin:28px 0 0; }
.FS2_body_Cart_GuestLogin #form .FS2_Login_btn_position br{ display:none; }
.FS2_body_Cart_GuestLogin #form .FS2_Login_btn_position::before{
  content:"\4F1A\54E1\767B\9332\5F8C\306B\8CFC\5165";
  display:block; height:56px; line-height:56px;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.08em;
  transition:background .2s;
}
.FS2_body_Cart_GuestLogin #form .FS2_Login_btn_position:hover::before{ background:#d90f3f; }
.FS2_body_Cart_GuestLogin #form .FS2_Login_btn_position #entry{
  position:absolute; top:0; left:0; width:100%; height:56px;
  opacity:0; cursor:pointer; z-index:2;
}
.FS2_body_Cart_GuestLogin #form .FS2_Login_btn_position a{
  display:block; box-sizing:border-box;
  height:56px; line-height:54px; margin:12px 0 0;
  border:1px solid var(--hh-dark); border-radius:4px;
  text-align:center; text-decoration:none;
  color:var(--hh-dark); font-size:14px; font-weight:500; letter-spacing:.06em;
  transition:background .2s, color .2s;
}
.FS2_body_Cart_GuestLogin #form .FS2_Login_btn_position a:hover{
  background:var(--hh-dark); color:#fff;
}
.FS2_body_Cart_GuestLogin #form .FS2_Login_btn_position a img{ display:none; }
.FS2_body_Cart_GuestLogin #form .FS2_Login_btn_position a::after{
  content:"\4F1A\54E1\767B\9332\305B\305A\306B\8CFC\5165";
}

/* error banner. VERIFIED 2026-09-06 by a deliberate failed login:
   the real class is .error_content, on a <div> the system inserts
   above the login table. The three names guessed before
   (.FS2_attention, .error, .attention) were all wrong.
   Not scoped to GuestLogin on purpose - the system prints the same
   block on the other checkout screens and it should read the same
   there. The system's own style is a solid orange bar with white
   text, louder than anything else on the page; !important on the
   two paint properties because that rule may carry an id. */
#FS2_body_Cart .error_content,
#FS2_body_Password .error_content{
  display:flex; align-items:center; gap:12px;
  margin:0 0 28px; padding:16px 20px;
  background:#fdf2f5 !important; border:1px solid #f2c9d4; border-radius:4px;
  color:#d90f3f !important; font-size:14px; font-weight:700; line-height:1.6;
  text-align:left; word-break:auto-phrase;
}
#FS2_body_Cart .error_content::before,
#FS2_body_Password .error_content::before{
  content:"!";
  flex:0 0 auto; width:22px; height:22px; line-height:20px;
  border:2px solid #d90f3f; border-radius:50%;
  text-align:center; font-size:14px; font-weight:700;
}


/* ============================================================
   12. SCREENS : GuestEntry / DeliveryEdit  (input forms)
   ============================================================ */
/* "Fill in the form below and go to the next step", printed as a
   bare <p> between the section heading and the form. The step bar
   says which step this is, the heading says what is being entered,
   and a form full of fields says the rest. It sat in the same
   sight line as the two red notes that do have to be read, so it
   was costing them weight. It is not in a comment area - there is
   no setting for it in the admin screens we could find - so it is
   hidden here. If the field turns up later, delete the text there
   and this rule can go.
   Only one <p> can match: the page's other CrossHead is followed
   by the cart table, not by a paragraph. */
#FS2_body_Cart.FS2_body_Cart_GuestEntry .system_content > h3.CrossHead + p{ display:none; }

.FS2_body_Cart_GuestEntry .inputTableArea{
  margin:0; padding:0; border:none;
  background:var(--hh-bg); border-radius:4px; overflow:hidden;
}
.FS2_body_Cart_GuestEntry table.userTable_01,
.FS2_body_Cart_DeliveryEdit table.userTable_01{
  width:100%; border-collapse:collapse; border:none; background:none;
}
#FS2_body_Cart.FS2_body_Cart_GuestEntry table.userTable_01 caption{ display:none; }

.FS2_body_Cart_GuestEntry table.userTable_01 th,
.FS2_body_Cart_GuestEntry table.userTable_01 td,
.FS2_body_Cart_DeliveryEdit table.userTable_01 th,
.FS2_body_Cart_DeliveryEdit table.userTable_01 td{
  border:none; background:none;
  border-bottom:1px solid #e8e3d7;
  padding:20px 10px; vertical-align:middle;
}
.FS2_body_Cart_GuestEntry table.userTable_01 tr:last-child th,
.FS2_body_Cart_GuestEntry table.userTable_01 tr:last-child td,
.FS2_body_Cart_DeliveryEdit table.userTable_01 tr:last-child th,
.FS2_body_Cart_DeliveryEdit table.userTable_01 tr:last-child td{ border-bottom:none; }

/* label column. GuestEntry uses colspan=2, DeliveryEdit does not,
   so :first-child is used for the second screen. */
.FS2_body_Cart_GuestEntry table.userTable_01 th[colspan="2"],
.FS2_body_Cart_DeliveryEdit table.userTable_01 th:first-child{
  width:27%; padding-left:26px; padding-right:0;
  text-align:left; font-size:14px; font-weight:500; color:var(--hh-dark);
  line-height:1.6;
}
.FS2_body_Cart_GuestEntry table.userTable_01 th[width="24"],
.FS2_body_Cart_DeliveryEdit table.userTable_01 th[width="24"]{
  width:60px; padding-left:10px; padding-right:0; text-align:left;
}
.FS2_body_Cart_GuestEntry table.userTable_01 td,
.FS2_body_Cart_DeliveryEdit table.userTable_01 td{
  padding-right:26px; font-size:14px; line-height:1.8; color:var(--hh-dark);
}
/* The note is a <font> followed by <br>. Making the font a block
   already ends the line, so that <br> then adds a whole empty
   line on top of the margin below. The margin is what controls
   the gap here; the line break is removed.
   The id goes with the body class because the base rules for
   these cells carry #FS2_body_Cart. */
.FS2_body_Cart_GuestEntry table.userTable_01 td font[color="red"],
.FS2_body_Cart_DeliveryEdit table.userTable_01 td font[color="red"]{
  display:block; margin:0 0 8px;
  color:#c0392b !important; font-size:12px; line-height:1.8;
}
#FS2_body_Cart.FS2_body_Cart_GuestEntry table.userTable_01 td > font[color="red"] + br,
#FS2_body_Cart.FS2_body_Cart_DeliveryEdit table.userTable_01 td > font[color="red"] + br{
  display:none;
}

/* field widths */
#FS2_body_Cart #fs2_companyName,
#FS2_body_Cart #fs2_departmentName,
#FS2_body_Cart #fs2_addressLine1,
#FS2_body_Cart #fs2_addressLine2,
#FS2_body_Cart #fs2_addressLine3,
#FS2_body_Cart #fs2_email,
#FS2_body_Cart #fs2_emailConfirmation{ width:100%; max-width:440px; }
#FS2_body_Cart #fs2_lastName,
#FS2_body_Cart #fs2_firstName,
#FS2_body_Cart #fs2_lastNameKana,
#FS2_body_Cart #fs2_firstNameKana{ width:190px; margin-right:8px; }
/* 90, not 80: with the examples prefixed "e.g." the placeholder
   for this field is 1px wider than the box was. */
#FS2_body_Cart #fs2_zipCodeFront{ width:90px; }
#FS2_body_Cart #fs2_zipCodeBack{ width:96px; }
#FS2_body_Cart #fs2_phoneNumberPublic,
#FS2_body_Cart #fs2_phoneNumberLocal,
#FS2_body_Cart #fs2_phoneNumberMember,
#FS2_body_Cart #fs2_dayPhonePublic,
#FS2_body_Cart #fs2_dayPhoneLocal,
#FS2_body_Cart #fs2_dayPhoneMember,
#FS2_body_Cart #fs2_faxNumberPublic,
#FS2_body_Cart #fs2_faxNumberLocal,
#FS2_body_Cart #fs2_faxNumberMember{ width:88px; text-align:center; padding:0 6px; }
#FS2_body_Cart #fs2_prefecture{ min-width:200px; }
#FS2_body_Cart #fs2_emailConfirmation{ margin-top:10px; }
#FS2_body_Cart #fs2_emailConfirmationLabel{
  margin-left:10px; font-size:12px; color:#8b8371;
}
#FS2_body_Cart .FS2_birthdayDateYear{ font-size:13px; color:#6b6350; }
#FS2_body_Cart .FS2_birthdayDateYear select{ min-width:96px; margin-right:4px; }

/* radios sit inline on these screens */
.FS2_body_Cart_GuestEntry .inputTableArea td label{
  display:inline-flex; align-items:center; margin-right:26px;
  cursor:pointer; font-size:14px;
}

/* The cart contents are hidden on this screen. They were checked
   on the previous one and are shown again on the confirmation
   screen; a third copy here only pushes the form down. The same
   is already done on DeliveryEdit and SettleEdit further down. */
.FS2_body_Cart_GuestEntry .system_content > h3.CrossHead:first-of-type,
.FS2_body_Cart_GuestEntry .system_content > table.cartTable,
.FS2_body_Cart_GuestEntry .system_content > .itemRight50,
.FS2_body_Cart_GuestEntry #form > h3.CrossHead:first-of-type,
.FS2_body_Cart_GuestEntry #form > table.cartTable,
.FS2_body_Cart_GuestEntry #form > .itemRight50{ display:none; }
/* The template separates those blocks with <br clear="all">.
   Hiding the blocks leaves the line breaks behind, and each one
   is still a line of empty space. The same applies on the two
   screens below, which hide the same blocks. */
.FS2_body_Cart_GuestEntry .system_content > br,
.FS2_body_Cart_GuestEntry #form > br,
.FS2_body_Cart_DeliveryEdit .system_content > br,
.FS2_body_Cart_SettleEdit .system_content > br{ display:none; }
/* With the cart block hidden, the heading that actually shows is
   the SECOND h3, and it still carried its 34px top margin under
   the page title's 18px. The "first heading needs no gap" rule in
   section 4 only reaches the adjacent one, which here is the
   hidden one - so the visible heading has to be named directly.
   Checked against the real markup on 2026-09-03: h3, table,
   itemRight50, br, h3 are all siblings of .system_content. */
/* The id is written together with the body class here on
   purpose: <body> carries both, and the base rule in section 4
   is "#FS2_body_Cart h3.CrossHead". Without the id this loses to
   it no matter how many classes it has - which is why the gap
   was still there after the first attempt. */
#FS2_body_Cart.FS2_body_Cart_GuestEntry .system_content > h3.CrossHead:nth-of-type(2),
#FS2_body_Cart.FS2_body_Cart_DeliveryEdit .system_content > h3.CrossHead:nth-of-type(2),
#FS2_body_Cart.FS2_body_Cart_SettleEdit .system_content > h3.CrossHead:nth-of-type(2){
  margin-top:0;
}

/* submit label */
.FS2_body_Cart_GuestEntry .FS2_bottom_btn_center_1::after{
  content:"\304A\5C4A\3051\5148\306E\6307\5B9A\3078\9032\3080";
}

/* ---- DeliveryEdit : the two shipping options as cards ------
   label and table are adjacent siblings, so the pair reads as
   one card. the block that is not selected is dimmed; touching
   it selects the radio automatically (site's own script).
   ---------------------------------------------------------- */
.FS2_body_Cart_DeliveryEdit .inputTableArea{
  margin:0; padding:0; border:none; background:none;
}
.FS2_body_Cart_DeliveryEdit .inputTableArea > label{
  display:flex; align-items:center; box-sizing:border-box;
  margin:0; padding:16px 20px;
  background:#fff; border:1px solid #e0d9c6; border-radius:4px 4px 0 0;
  font-size:15px; font-weight:700; color:var(--hh-dark);
  cursor:pointer; transition:background .15s, border-color .15s;
}
.FS2_body_Cart_DeliveryEdit .inputTableArea > label br{ display:none; }
.FS2_body_Cart_DeliveryEdit .inputTableArea > label:hover{
  border-color:var(--hh-gold); background:#fffdf6;
}
.FS2_body_Cart_DeliveryEdit .inputTableArea > label:has(input:checked){
  border-color:var(--hh-gold); background:#fffdf6;
}
/* The unselected block is closed, not dimmed. The new-address
   form is a dozen fields long: faded, it is still a dozen fields
   to scroll past on the way to the button, and it reads as
   something that might still need filling in.
   Ported from cart-renewal-sp.css, where the same call was made
   on 2026-09-02.
   Tapping the label opens the block; the label itself is never
   hidden, so nothing becomes unreachable. */
.FS2_body_Cart_DeliveryEdit .inputTableArea > label:has(input:not(:checked)) + table{
  display:none;
}
/* a closed card keeps only its header, so the rounded corners
   have to come back to the label */
.FS2_body_Cart_DeliveryEdit .inputTableArea > label:has(input:not(:checked)){
  border-radius:4px; margin-bottom:24px;
}
.FS2_body_Cart_DeliveryEdit .inputTableArea > table.userTable_01{
  border:1px solid #e0d9c6; border-top:none; border-radius:0 0 4px 4px;
  margin:0 0 24px; background:var(--hh-bg);
}
/* the "to myself" block is an address readout, not a form */
.FS2_body_Cart_DeliveryEdit .inputTableArea > table.userTable_01:not(.FS2_otherShippingAddress) th{
  display:none;
}
.FS2_body_Cart_DeliveryEdit .inputTableArea > table.userTable_01:not(.FS2_otherShippingAddress) td{
  display:block; padding:20px 22px;
  font-size:14px; line-height:1.9; color:var(--hh-dark);
}
.FS2_body_Cart_DeliveryEdit .FS2_bottom_btn_center_1::after{
  content:"\304A\652F\6255\3044\65B9\6CD5\3078\9032\3080";
}
/* the cart contents are already shown on the previous screen */
.FS2_body_Cart_DeliveryEdit .system_content > h3.CrossHead:first-of-type,
.FS2_body_Cart_DeliveryEdit .system_content > table.cartTable,
.FS2_body_Cart_DeliveryEdit .system_content > .itemRight50{ display:none; }


/* ============================================================
   13. SCREEN : SettleEdit
   ============================================================ */
.FS2_body_Cart_SettleEdit .inputTableArea{
  margin:0 0 34px; padding:0; border:none; background:none;
}

/* The screen opens with two headings in a row that name the
   same block: the h3 "delivery preferences" and, right under it,
   the table's own caption "delivery service". The caption sits
   with the table it belongs to, so the h3 goes.
   The id is written with the body class because section 4 styles
   h3.CrossHead with #FS2_body_Cart. */
#FS2_body_Cart.FS2_body_Cart_SettleEdit #form > h3.CrossHead:first-of-type{
  display:none;
}

/* ---- 13-1. delivery method / payment method as cards -------
   the tables are turned into blocks so each row is one card.
   the description of an unselected payment method is folded
   away with :has, which is what keeps this screen short.
   ---------------------------------------------------------- */
.FS2_body_Cart_SettleEdit .FS2_DeliveryMethod_table,
.FS2_body_Cart_SettleEdit #fs2_settleSelect{
  display:block; width:100%; border:none; background:none;
}
/* These two tables are turned into blocks, and a table-caption
   inside a block has no table to sit above: it collapses to the
   width of one character and the heading runs down the page.
   Only here - everywhere else the caption stays table-caption
   (see section 4). */
.FS2_body_Cart_SettleEdit .FS2_DeliveryMethod_table > caption,
.FS2_body_Cart_SettleEdit #fs2_settleSelect > caption{
  display:block !important; width:auto !important;
}
.FS2_body_Cart_SettleEdit .FS2_DeliveryMethod_table > tbody,
.FS2_body_Cart_SettleEdit #fs2_settleSelect > tbody{ display:block; }
.FS2_body_Cart_SettleEdit .FS2_DeliveryMethod_table > tbody > tr,
.FS2_body_Cart_SettleEdit #fs2_settleSelect > tbody > tr{
  display:block; margin:0 0 14px; overflow:hidden;
  background:#fff; border:1px solid #e0d9c6; border-radius:4px;
  transition:border-color .15s;
}
.FS2_body_Cart_SettleEdit .FS2_DeliveryMethod_table > tbody > tr > th,
.FS2_body_Cart_SettleEdit #fs2_settleSelect > tbody > tr > th{
  display:block; width:auto !important; border:none;
  padding:0; background:#faf6ea; text-align:left;
}
.FS2_body_Cart_SettleEdit .FS2_DeliveryMethod_table > tbody > tr > th > label,
.FS2_body_Cart_SettleEdit #fs2_settleSelect > tbody > tr > th > label{
  display:flex; align-items:center; gap:11px;
  padding:16px 20px; cursor:pointer;
  font-size:15px; font-weight:700; color:var(--hh-dark);
}
.FS2_body_Cart_SettleEdit .FS2_DeliveryMethod_table > tbody > tr > td,
.FS2_body_Cart_SettleEdit #fs2_settleSelect > tbody > tr > td{
  display:block; width:auto !important; border:none;
  padding:20px 22px; font-size:13px; line-height:1.9; color:#5a5245;
}
/* Every :has below is scoped to "> th", and it must stay that way.

   The row's own payment radio (settleTypeSelect) sits in the th,
   next to the label. The td can hold radios of its own: with a
   card on file the credit row's td carries cardTypeSelect twice -
   pay with the saved card / pay with a new card - and only one of
   those two can ever be checked.

   Written as :has(input[type="radio"]:not(:checked)) - without the
   "> th" - the fold asks "does this row contain ANY unchecked
   radio". With a card on file the answer is yes even while credit
   is the selected method, because the other cardTypeSelect radio
   is unchecked. The td was hidden and the customer could not see
   or change their saved card. Confirmed on the live screen
   2026-09-06: settleTypeSelect checked=true, two cardTypeSelect in
   the td, td display=none, no inline style - so nothing but this
   rule was closing it. SP was unaffected: its stylesheet has no
   fold. Scoping to the th asks the right question - is THIS row's
   method the selected one. */
.FS2_body_Cart_SettleEdit #fs2_settleSelect > tbody > tr:has(> th input[type="radio"]:checked),
.FS2_body_Cart_SettleEdit .FS2_DeliveryMethod_table > tbody > tr:has(> th input[type="radio"]:checked){
  border-color:var(--hh-gold);
}
.FS2_body_Cart_SettleEdit #fs2_settleSelect > tbody > tr:has(> th input[type="radio"]:checked) > th{
  background:#fffdf6;
}
.FS2_body_Cart_SettleEdit #fs2_settleSelect > tbody > tr:has(> th input[type="radio"]:not(:checked)) > td{
  display:none;
}

/* ---- 13-2. delivery date --------------------------------- */
.FS2_body_Cart_SettleEdit .FS2_Delivery_table02{
  width:100%; border-collapse:collapse; margin:6px 0 0;
  border:none !important; background:none !important;
}
#FS2_body_Cart.FS2_body_Cart_SettleEdit .FS2_Delivery_table02 > caption{
  margin:22px 0 12px; padding:0; white-space:nowrap;
  background:none !important; border:none;
  font-size:14px; font-weight:700; color:var(--hh-dark) !important;
}
.FS2_body_Cart_SettleEdit .FS2_Delivery_table02 th,
.FS2_body_Cart_SettleEdit .FS2_Delivery_table02 td{
  border:none !important; background:none !important; padding:16px 0;
  font-size:13px; color:var(--hh-dark); vertical-align:middle;
}
.FS2_body_Cart_SettleEdit .FS2_Delivery_table02 th{
  text-align:left; font-weight:500; color:#6b6350;
}
/* width:1% shrinks a table column to its content */
.FS2_body_Cart_SettleEdit .FS2_Delivery_table02 tr > th:not(.FS2_Delivery_table_caution){
  width:1% !important; white-space:nowrap; padding-right:24px;
}
.FS2_body_Cart_SettleEdit .FS2_Delivery_table_caution{
  width:auto !important; padding:0 !important; background:none !important;
}
#FS2_body_Cart #fs2_deliveryHopeDate{
  min-width:300px; height:52px;
  font-size:16px; font-weight:700; letter-spacing:.02em;
}

/* ---- 13-3. credit card ----------------------------------- */
/* Two tables live in the credit card block, and only one of them
   was named here until 2026-09-06:

     .FS2_SettleEdit_list_Credit_table   entering a new card
     .FS2_SelectCreditCardTable          choosing a card on file

   The second was written for a customer with a saved card, which
   is not a state we could reach while building, so it kept the
   shop's own dress - a #f6f6f6 label column, right-aligned, in
   the middle of a screen where every other label column is flat
   and left-aligned. Both are named now.

   The !important on the label cells is not defensive: that table
   writes width="20%", align="right" and nowrap into the markup,
   and a presentation attribute beats a plain declaration. Same
   three as the my-page confirm table in section 18. */
.FS2_body_Cart_SettleEdit .FS2_SettleEdit_list_Credit_table,
.FS2_body_Cart_SettleEdit .FS2_SelectCreditCardTable{
  width:100%; border-collapse:collapse; margin:18px 0 0;
  background:var(--hh-bg); border-radius:4px; overflow:hidden;
}
.FS2_body_Cart_SettleEdit .FS2_SettleEdit_list_Credit_table th,
.FS2_body_Cart_SettleEdit .FS2_SettleEdit_list_Credit_table td,
.FS2_body_Cart_SettleEdit .FS2_SelectCreditCardTable th,
.FS2_body_Cart_SettleEdit .FS2_SelectCreditCardTable td{
  border:none !important; border-bottom:1px solid #e8e3d7 !important;
  background:none !important;
  padding:16px 18px; font-size:13px; vertical-align:middle;
}
.FS2_body_Cart_SettleEdit .FS2_SettleEdit_list_Credit_table tr:last-child th,
.FS2_body_Cart_SettleEdit .FS2_SettleEdit_list_Credit_table tr:last-child td,
.FS2_body_Cart_SettleEdit .FS2_SelectCreditCardTable tr:last-child th,
.FS2_body_Cart_SettleEdit .FS2_SelectCreditCardTable tr:last-child td{
  border-bottom:none !important;
}
.FS2_body_Cart_SettleEdit .FS2_SettleEdit_list_Credit_table th,
.FS2_body_Cart_SettleEdit .FS2_SelectCreditCardTable th{
  width:30% !important; text-align:left !important;
  font-weight:500 !important; color:#6b6350 !important;
  white-space:normal !important;
}
/* the two controls on the saved-card table, sized like the ones
   on the new-card table next to them */
#FS2_body_Cart #fs2_registeredCredit{ width:100%; max-width:360px; }
#FS2_body_Cart #fs2_registeredCreditPayment{ min-width:160px; }
#FS2_body_Cart #fs2_cardNo,
#FS2_body_Cart #fs2_cardName{ width:100%; max-width:360px; }
#FS2_body_Cart #fs2_securityCode{ width:110px; }
#FS2_body_Cart #fs2_expireMonth,
#FS2_body_Cart #fs2_expireYear{ min-width:92px; }
#FS2_body_Cart #fs2_payment{ min-width:160px; }
.FS2_body_Cart_SettleEdit .FS2_securityCodeExplain{
  display:block; margin:8px 0 0; font-size:11.5px; line-height:1.7; color:#8b8371;
}
.FS2_body_Cart_SettleEdit .securityCodeLink{
  color:var(--hh-gold); text-decoration:underline; text-underline-offset:3px;
}
.FS2_body_Cart_SettleEdit .FS2_body_Cart_SettleEdit_icons{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin:14px 0 0; padding:14px; background:#fff;
  border:1px solid #ece4cf; border-radius:4px;
}
.FS2_body_Cart_SettleEdit .FS2_body_Cart_SettleEdit_icons img{
  height:26px; width:auto; display:block;
}

/* The two sub-choices inside the credit card block: pay with the
   card on file, or pay with a new one. They are choices, but they
   were inheriting the td's 13px body type, which is also what the
   3D-Secure note above them is set in - so a decision read as one
   more line of explanation. One step up in size and to bold puts
   them between the method name in the header (15px/700) and the
   notes around them, which is where they belong.

   The wrapper is selected by :has rather than by a tag, because
   the markup around cardTypeSelect is not in anything we were
   given; only the name attribute is certain (read off the live
   screen 2026-09-06). No display or margin is set here on purpose
   - the block already lays out correctly and this is meant to
   change the type, nothing else. */
#FS2_body_Cart.FS2_body_Cart_SettleEdit *:has(> input[name="cardTypeSelect"]){
  font-size:14px; font-weight:700; color:var(--hh-dark); cursor:pointer;
}

/* "Save this card" was still the browser's own checkbox: a 13px
   grey square next to controls that have all been redrawn. It is
   not in any of the three containers section 5 names
   (.hh / .FS2_privacyPageLink_container / .FS2_holdEmailAddress),
   so nothing reached it.
   Scoped to the screen rather than to an id: this is the only
   checkbox on the payment screen today, and any checkbox added
   here later should look the same as this one anyway. */
#FS2_body_Cart.FS2_body_Cart_SettleEdit input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  position:relative; flex:0 0 auto; vertical-align:middle;
  width:22px; height:22px; margin:0 10px 0 0;
  border:2px solid #c9c1ad; border-radius:4px; background:#fff;
  cursor:pointer; transition:background .15s, border-color .15s;
}
#FS2_body_Cart.FS2_body_Cart_SettleEdit input[type="checkbox"]:hover{
  border-color:var(--hh-gold);
}
#FS2_body_Cart.FS2_body_Cart_SettleEdit input[type="checkbox"]:checked{
  background:var(--hh-pink); border-color:var(--hh-pink);
}
#FS2_body_Cart.FS2_body_Cart_SettleEdit input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ---- 13-4. free text area -------------------------------- */
/* The free-text table is the only one left without a class, so
   it is picked out by excluding the others. Every table added to
   this screen from now on must be listed here as well, or it
   loses its frame and its padding - which is exactly what
   happened to the coupon and point tables until 2026-09-02. */
.FS2_body_Cart_SettleEdit .inputTableArea > table.userTable_01:not(#fs2_settleSelect):not(.FS2_DeliveryMethod_table):not(.FS2_CouponTable):not(.FS2_PointTable){
  width:100%; margin-top:34px;
  border:none !important; background:none !important;
  border-collapse:collapse;
}
.FS2_body_Cart_SettleEdit .inputTableArea > table.userTable_01:not(#fs2_settleSelect):not(.FS2_DeliveryMethod_table):not(.FS2_CouponTable):not(.FS2_PointTable) > tbody > tr > td{
  border:none !important; background:none !important; padding:0 !important;
  /* the free-text block had no type of its own and fell back to
     the system's, so the one line above the folds came out
     larger than the folds themselves */
  font-size:13px; line-height:1.9; color:#5a5245;
}
/* the folds start a new block, so the line introducing them
   keeps a gap of its own rather than relying on a <br> */
.FS2_body_Cart_SettleEdit .inputTableArea > table.userTable_01 td > .hhac:first-of-type{ margin-top:14px; }


/* ---- 13-7. coupon and points ------------------------------
   Both are userTable_01 with a caption, so the caption already
   reads as a section heading (section 4).
   These two were the odd ones out on this screen: a filled band
   with no outline, while delivery, delivery date and payment are
   all white cards with a #e0d9c6 outline. Two of the six blocks
   painted differently reads as a mistake rather than a grouping,
   so they are built the same way the delivery and payment tables
   are - table turned into blocks, one row one card.
   The label column goes with it. On the point block the header
   cell is the word "point", which is the caption sitting directly
   above it, so it is dropped; on the coupon block the header cell
   is the instruction for the field, which belongs above the field
   rather than beside it.
   ---------------------------------------------------------- */
.FS2_body_Cart_SettleEdit .FS2_CouponTable,
.FS2_body_Cart_SettleEdit .FS2_PointTable{
  display:block; width:100%; margin:0 0 30px;
  border:none !important; background:none !important;
}
/* same trap as the delivery and payment tables: a table-caption
   inside a block collapses to one character wide (section 4) */
.FS2_body_Cart_SettleEdit .FS2_CouponTable > caption,
.FS2_body_Cart_SettleEdit .FS2_PointTable > caption{
  display:block !important; width:auto !important;
}
.FS2_body_Cart_SettleEdit .FS2_CouponTable > tbody,
.FS2_body_Cart_SettleEdit .FS2_PointTable > tbody{ display:block; }
.FS2_body_Cart_SettleEdit .FS2_CouponTable > tbody > tr,
.FS2_body_Cart_SettleEdit .FS2_PointTable > tbody > tr{
  display:block; margin:0 0 14px; overflow:hidden;
  background:#fff; border:1px solid #e0d9c6; border-radius:4px;
}
.FS2_body_Cart_SettleEdit .FS2_CouponTable > tbody > tr:last-child,
.FS2_body_Cart_SettleEdit .FS2_PointTable > tbody > tr:last-child{ margin-bottom:0; }
.FS2_body_Cart_SettleEdit .FS2_CouponTable > tbody > tr > th,
.FS2_body_Cart_SettleEdit .FS2_CouponTable > tbody > tr > td,
.FS2_body_Cart_SettleEdit .FS2_PointTable > tbody > tr > th,
.FS2_body_Cart_SettleEdit .FS2_PointTable > tbody > tr > td{
  display:block; width:auto !important;
  border:none !important; background:none !important;
  text-align:left; vertical-align:top;
  font-size:13.5px; line-height:1.9; color:var(--hh-dark);
}
/* Both header cells go. On the point block it was the word
   "point", repeating the caption above it. On the coupon block it
   was "(enter your coupon code)", which the field now says itself
   through its own example - and the shop could not find where
   that sentence is set, so it is taken out here.
   Two selectors because the sentence may be the header cell or a
   span inside the field cell; neither costs anything if it is the
   other one. */
.FS2_body_Cart_SettleEdit .FS2_PointTable > tbody > tr > th,
.FS2_body_Cart_SettleEdit .FS2_CouponTable > tbody > tr > th,
.FS2_body_Cart_SettleEdit .FS2_CouponCodeComment{ display:none; }
.FS2_body_Cart_SettleEdit .FS2_CouponTable > tbody > tr > td,
.FS2_body_Cart_SettleEdit .FS2_PointTable > tbody > tr > td{ padding:20px 22px; }
.FS2_body_Cart_SettleEdit .FS2_CouponCodeInputBlock{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
#FS2_body_Cart #fs2_couponCode{
  box-sizing:border-box; width:260px; height:46px; padding:0 14px;
  background:#fff; border:1px solid #d8d2c4; border-radius:4px;
  font-size:14px; color:var(--hh-dark);
}
/* the apply button is an <input type="image"> with an old gif.
   Same trick as the other buttons: the image is made
   transparent and the label is drawn behind it. */
/* Same secondary button as "change" on the confirm screen: white
   with the body colour as its outline, filling on hover. It was
   gold-on-gold, which read as a third kind of button on a screen
   that only has two. */
.FS2_body_Cart_SettleEdit .FS2_ApplyCouponButton{
  position:relative; display:inline-block;
  box-sizing:border-box; width:104px; height:46px; line-height:44px;
  background:#fff; border:1px solid var(--hh-dark); border-radius:4px;
  text-align:center; font-size:13px; letter-spacing:.04em; color:var(--hh-dark);
  transition:background .2s, color .2s;
}
.FS2_body_Cart_SettleEdit .FS2_ApplyCouponButton::before{
  content:"\5229\7528";
}
.FS2_body_Cart_SettleEdit .FS2_ApplyCouponButton:hover{
  background:var(--hh-dark); color:#fff;
}
.FS2_body_Cart_SettleEdit .FS2_ApplyCouponButton input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
/* The three point options are choices, so they get rows of their
   own rather than running on from the paragraph above - and they
   are dressed exactly like the delivery and payment options,
   which is what they are. They were white on white while those
   are #faf6ea bands, so the same radio ring read as a different
   grey against the two backgrounds.
   The selected state used to be written for the third option
   only, so picking either of the other two lit nothing. :has on
   the label covers all three and needs no ids. */
.FS2_body_Cart_SettleEdit .FS2_PointTable td label{
  display:flex; align-items:center; gap:11px;
  box-sizing:border-box; width:100%;
  margin:10px 0 0; padding:15px 20px;
  background:#faf6ea; border:1px solid #e0d9c6; border-radius:4px;
  font-size:15px; font-weight:700; color:var(--hh-dark);
  cursor:pointer; transition:border-color .15s, background .15s;
}
.FS2_body_Cart_SettleEdit .FS2_PointTable td label:hover,
.FS2_body_Cart_SettleEdit .FS2_PointTable td label:has(input[type="radio"]:checked){
  border-color:var(--hh-gold); background:#fffdf6;
}
/* The amount box and the word after it are two inline boxes of
   very different heights, so the baseline put the word near the
   top of the box. Both are given the same height and top margin
   and aligned by their tops instead. */
#FS2_body_Cart #fs2_usePoint{
  box-sizing:border-box; width:120px; height:46px;
  margin:12px 10px 0 0; padding:0 14px; vertical-align:top;
  background:#fff; border:1px solid #d8d2c4; border-radius:4px;
  font-size:14px; text-align:right; color:var(--hh-dark);
}
#FS2_body_Cart #fs2_usePointLabel{
  display:inline-block; height:46px; line-height:46px;
  margin:12px 0 0; vertical-align:top;
  font-size:14px; color:var(--hh-dark);
}
/* the amount field only matters for the third option */
.FS2_body_Cart_SettleEdit .FS2_PointTable td:has(#fs2_point-some:not(:checked)) #fs2_usePoint,
.FS2_body_Cart_SettleEdit .FS2_PointTable td:has(#fs2_point-some:not(:checked)) #fs2_usePointLabel{
  display:none;
}
#FS2_body_Cart textarea#communication{
  width:100%; height:300px; padding:14px;
  font-size:13px; line-height:1.9; font-family:inherit; resize:vertical;
}

/* ---- 13-5. errors on this screen -------------------------
   There used to be a speech-bubble treatment here for
   .FS2_assist_message_large. It is gone. Verified 2026-09-06:
   the element is
     <span class="FS2_assist_message FS2_assist_message_large">
   so it already carries the ordinary message class, and the two
   rule sets fought - the bubble won display and the tail, the
   message class won the colours, and the tail collapsed into a
   0x0 dot floating above the box. One treatment, in section 5,
   with only a size step here.
   ---------------------------------------------------------- */
#FS2_body_Cart .FS2_assist_message_large{
  padding:9px 16px 9px 13px !important;
  font-size:13px;
}

/* ---- 13-6. invoice box ------------------------------------
   loaded by the site's own script from /include_ssi/.
   its toggle script is left alone; only the look is aligned and
   the body starts closed (jQuery slideToggle opens it fine).
   ---------------------------------------------------------- */
/* Pink, not gold. This one is not another fold among the folds:
   it answers "can I get a compliant invoice", which for a company
   buyer decides whether they can order here at all, and customers
   were not finding it. The flow already uses pink for the thing
   that must not be walked past, so it borrows that - the same
   #fdf2f5 ground and #f2c9d4 edge as the warning boxes in
   section 2 - rather than inventing a third register.

   The body stays white. A long explanation set on a tinted ground
   is harder to read, and once the box is open the customer has
   already found it, so the colour has done its work. */
.FS2_body_Cart_SettleEdit #InvoiceBox{
  margin:0 0 30px; border:1px solid #f2c9d4; border-radius:4px;
  background:#fff; overflow:hidden;
}
.FS2_body_Cart_SettleEdit #InvoiceBox h3{
  display:flex; align-items:center; gap:9px;
  margin:0 !important; padding:14px 18px !important; cursor:pointer;
  background:#fdf2f5 !important; border:none !important;
  text-align:left !important;
  font-size:13px !important; font-weight:700; color:var(--hh-pink) !important;
  transition:background .15s;
}
.FS2_body_Cart_SettleEdit #InvoiceBox h3:hover{ background:#fbe6ec !important; }
.FS2_body_Cart_SettleEdit #InvoiceBox h3.open{ border-bottom:1px solid #f2c9d4 !important; }
.FS2_body_Cart_SettleEdit #InvoiceBox h3::after{
  content:"+"; margin-left:auto;
  width:22px; text-align:center;
  font-size:22px; font-weight:400; color:var(--hh-pink);
}
.FS2_body_Cart_SettleEdit #InvoiceBox h3.open::after{ content:"-"; }
/* inc_mtz.css sets a grey #F6F6F6 on this body and loads after
   this file, so the background has to be forced back. */
.FS2_body_Cart_SettleEdit #InvoiceBox .invBox{
  display:none;
  padding:18px; background:#fff !important;
  font-size:12.5px; line-height:1.95; color:#5a5245;
}
/* the same file draws the toggle as two bars and centres the
   heading with a negative text-indent; both are undone here */
.FS2_body_Cart_SettleEdit #InvoiceBox h3{
  text-indent:0 !important; letter-spacing:0 !important;
}
.FS2_body_Cart_SettleEdit #InvoiceBox h3::before{ display:none !important; }
/* inc_mtz.css loads after this file, so every property it sets
   on this pseudo element wins unless it is forced. The margin
   was the one left out: the "+" was landing partway across the
   bar instead of at its right edge. */
/* font-size and colour are forced here as well. The rule above
   sets them, but inc_mtz.css loads later and touches this same
   pseudo element, so anything not forced can be taken back. */
.FS2_body_Cart_SettleEdit #InvoiceBox h3::after{
  position:static !important;
  width:22px !important; height:auto !important;
  margin:0 0 0 auto !important;
  padding:0 !important;
  border:none !important;
  background:none !important; transform:none !important;
  line-height:1 !important;
  font-size:22px !important; color:var(--hh-pink) !important;
  text-align:center !important;
}
.FS2_body_Cart_SettleEdit #InvoiceBox .invBox font[color="red"]{ color:#c0392b !important; }

.FS2_body_Cart_SettleEdit .FS2_bottom_btn_center_1::after{
  content:"\3054\6CE8\6587\5185\5BB9\306E\78BA\8A8D\3078\9032\3080";
}
.FS2_body_Cart_SettleEdit .FS2_lower_comment{ display:none; }
/* the cart contents are shown again on the confirmation screen */
.FS2_body_Cart_SettleEdit .system_content > h3.CrossHead:first-of-type,
.FS2_body_Cart_SettleEdit .system_content > table.cartTable,
.FS2_body_Cart_SettleEdit .system_content > .itemRight50{ display:none; }


/* ============================================================
   14. SCREEN : OrderConfirm
   the cart contents ARE shown here: this is the last place the
   customer can check the order.
   ============================================================ */
/* Two headings sat on top of each other over the same table:
   the h3 "shopping cart" and the table's own caption "order
   contents". The caption is the one kept - it belongs to the
   table it names and cannot drift away from it. The h3 goes.
   The table then has to carry the gap the h3 was providing. */
#FS2_body_Cart.FS2_body_Cart_OrderConfirm form > h3.CrossHead:first-of-type{
  display:none;
}
#FS2_body_Cart.FS2_body_Cart_OrderConfirm table.cartTable{ margin-top:30px; }
.FS2_body_Cart_OrderConfirm .inputTableArea{
  margin:0; padding:0; border:none; background:none;
}
/* A caption is painted inside the table box, which puts it on
   top of the frame. caption-side:top with a margin lifts it out,
   so it reads as a heading above the table rather than a first
   row inside it. */
/* Same type as h3.CrossHead in section 4, not a size down.
   On this screen some sections are headed by an h3 and some by
   their table's caption, and with the "shopping cart" h3 gone
   the caption is a section heading in its own right. 14px made
   it read as a sub-heading of the h3 above it. */
#FS2_body_Cart.FS2_body_Cart_OrderConfirm table > caption{
  caption-side:top;
  display:table-caption; width:auto; margin:0 0 14px; padding:2px 0 2px 12px;
  background:none !important; border:none;
  border-left:3px solid var(--hh-gold);
  text-align:left;
  font-size:16px; font-weight:700; letter-spacing:.06em;
  color:var(--hh-dark) !important;
}
.FS2_body_Cart_OrderConfirm .inputTableArea > table{ margin-top:26px; }
/* The shipping block carries the same wording twice: once as the
   h3 and once as the caption of the first table under it. The
   h3 is the one that sits at the right level, so the duplicate
   caption goes.
   NOTE the table is not the h3's sibling: a div.inputTableArea
   wraps it, which is why the adjacent selector alone missed
   this until 2026-09-03. Only the FIRST table's caption is
   hidden; the second one (the free-text block on the payment
   section) keeps its heading. */
/* the id is here on purpose: section 4 sets the caption's
   display with #FS2_body_Cart, and without an id this rule
   loses to it however many classes it carries */
#FS2_body_Cart h3.CrossHead + .inputTableArea > table:first-of-type > caption{
  display:none;
}
/* Two tables in a row are two blocks, not two halves of one:
   the free-text panel under the payment method needs the gap a
   heading would give it. 8px read as a printing accident. */
.FS2_body_Cart_OrderConfirm .inputTableArea > table + table{ margin-top:30px; }

.FS2_body_Cart_OrderConfirm .itemRight50{
  float:right; width:340px; margin:0; padding:0;
}
.FS2_body_Cart_OrderConfirm .FS2_Cart_Detail_InclusiveSum th{
  font-weight:700; color:var(--hh-dark);
}
.FS2_body_Cart_OrderConfirm .FS2_Cart_Detail_InclusiveSum td{
  font-size:24px; color:var(--hh-pink); letter-spacing:.02em;
}
.FS2_body_Cart_OrderConfirm .FS2_ReturnedSpecialContract{
  margin:14px 0 0; font-size:13px;
}
.FS2_body_Cart_OrderConfirm .FS2_ReturnedSpecialContract a{
  color:var(--hh-dark); text-decoration:underline; text-underline-offset:3px;
}
.FS2_body_Cart_OrderConfirm .FS2_ReturnedSpecialContract a:hover{
  color:var(--hh-gold);
}

/* The order-confirm screen is the one place the shop's own css
   hides the item thumbnail (display:none; the file loads, it is
   120x120). Nothing in this file hid it - checked 2026-09-06.
   The cell is still 96px wide, so the column sat empty, and the
   cart screen one step earlier does show the thumbnail. Shown
   again for consistency; delete these three lines to go back. */
#FS2_body_Cart.FS2_body_Cart_OrderConfirm .FS2_GoodsImage_td img{
  display:inline !important;
}

/* read-only tables.
   border-collapse:separate is required here: with collapse the
   border-radius is ignored and the outer border loses against
   the existing rules. */
.FS2_body_Cart_OrderConfirm table.userTable_01,
.FS2_body_Cart_OrderConfirm table.userTable_02{
  width:100%; margin:0; background:#fff;
  border-collapse:separate !important; border-spacing:0 !important;
  border:1px solid var(--hh-line) !important;
  border-radius:4px;
  /* NOT overflow:hidden. The caption is lifted above the table
     with caption-side, and hidden overflow clips it away - the
     heading simply vanishes. The rounded corners survive without
     it because border-collapse is separate here. */
}
.FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr > th,
.FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr > th,
.FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr > td,
.FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr > td{
  border:none !important; border-bottom:1px solid #ede8dc !important;
  padding:14px 18px; font-size:13.5px; line-height:1.8;
  vertical-align:top; text-align:left;
}
.FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr:last-child > th,
.FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr:last-child > td,
.FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr:last-child > th,
.FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr:last-child > td{
  border-bottom:none !important;
}
.FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr > th,
.FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr > th{
  width:32% !important; background:var(--hh-bg) !important;
  font-weight:500; color:#6b6350; white-space:normal !important;
}
.FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr > td,
.FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr > td{
  color:var(--hh-dark); font-weight:500;
}
.FS2_body_Cart_OrderConfirm td > table.userTable_02{
  border:1px solid #ede8dc !important; margin:0;
}
/* The item list nested in the shipping block is a small table of
   its own. It was inheriting the outer table's borderless rows,
   so the name and the quantity floated in one field with nothing
   between them. */
.FS2_body_Cart_OrderConfirm td > table.userTable_02{
  border-collapse:separate !important; border-spacing:0 !important;
}
.FS2_body_Cart_OrderConfirm td > table.userTable_02 th{
  width:auto !important; text-align:center !important;
  background:var(--hh-head) !important;
  border-bottom:1px solid #ede8dc !important;
  font-size:12px; padding:10px;
}
/* The outer table gives its label column 32%, and that rule
   reaches the nested table too - which squeezed the item name
   into a third of the width and left the quantity holding the
   rest. Both columns are set here explicitly. */
.FS2_body_Cart_OrderConfirm td > table.userTable_02 th:first-child,
.FS2_body_Cart_OrderConfirm td > table.userTable_02 td:first-child{
  width:auto !important; text-align:left !important;
}
/* the quantity column takes only what it needs, so the divider
   sits close to the figure rather than halfway across the row */
.FS2_body_Cart_OrderConfirm td > table.userTable_02 th:last-child,
.FS2_body_Cart_OrderConfirm td > table.userTable_02 td:last-child{
  width:76px !important; white-space:nowrap;
  text-align:center !important;
  border-left:1px solid #ede8dc !important;
}
.FS2_body_Cart_OrderConfirm td > table.userTable_02 td{
  font-size:13px; padding:12px; font-weight:400;
  border-bottom:none !important;
}
.FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr > td:only-child{
  padding:22px 24px !important;
  font-size:13px; line-height:1.95; color:#5a5245; font-weight:400;
}

/* "change" buttons */
.FS2_body_Cart_OrderConfirm .alignRight{
  position:relative; display:flex; justify-content:flex-end;
  margin:12px 0 0;
}
.FS2_body_Cart_OrderConfirm .alignRight::after{
  content:"\5909\66F4";
  box-sizing:border-box; width:112px; height:40px; line-height:38px;
  background:#fff; border:1px solid var(--hh-dark); border-radius:4px;
  text-align:center; font-size:13px; font-weight:500; color:var(--hh-dark);
  transition:background .2s, color .2s;
}
.FS2_body_Cart_OrderConfirm .alignRight:hover::after{
  background:var(--hh-dark); color:#fff;
}
.FS2_body_Cart_OrderConfirm .alignRight input[type="image"]{
  position:absolute; top:0; right:0; width:112px; height:40px;
  opacity:0; cursor:pointer; z-index:2;
}

/* the decisive button */
.FS2_body_Cart_OrderConfirm #FS2_OrderDecideButton_container{
  position:relative; box-sizing:border-box;
  max-width:440px; height:64px; line-height:64px;
  margin:52px auto 0; padding:0;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:17px; font-weight:700; letter-spacing:.1em;
  box-shadow:0 6px 18px rgba(255,36,86,.22);
  transition:background .2s, box-shadow .2s;
}
.FS2_body_Cart_OrderConfirm #FS2_OrderDecideButton_container:hover{
  background:#d90f3f; box-shadow:0 8px 22px rgba(255,36,86,.3);
}
.FS2_body_Cart_OrderConfirm #FS2_OrderDecideButton_container::after{
  content:"\6CE8\6587\3092\78BA\5B9A\3059\308B";
}
.FS2_body_Cart_OrderConfirm #FS2_OrderDecideButton_container input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
/* The processing state. Real markup, read off the confirm page
   2026-09-06:

     <div class="FS2_bottom_btn_center_1"
          id="FS2_OrderDecideButton_container">
       <input type="image" ... onclick="return orderDecide();">
     </div>
     <div class="FS2_bottom_btn_center_1"
          id="FS2_OrderProcessingComment_container">
       [the admin's processing comment, as a bare text node]
     </div>

   Two things follow from that, and both were wrong before.

   One: it is a sibling of the button, not the button. It carries
   the same FS2_bottom_btn_center_1 class, so section 8's pink
   button rule reaches it - including height:58px and
   line-height:58px. A fixed 58px box with 20px of padding leaves
   18px for a 58px line box, so the sentence hung out of the
   panel. That is the overflow, and it is why setting a colour
   here never fixed it: the geometry was the problem.

   Two: display is NOT set here on purpose. The shop hides this
   div and shows it from orderDecide(); if this rule declared
   display, the box would sit on the confirm page permanently,
   telling every customer their order was being processed before
   they had pressed anything. Everything below is written to
   centre without flex for exactly that reason.

   The state it should read as: the press registered, the shop is
   working, do not press again and do not close the page. Same
   footprint and position as the button so nothing jumps, muted so
   it is plainly no longer pressable, and a spinner because a
   static box cannot say "still working". */
#FS2_body_Cart.FS2_body_Cart_OrderConfirm #FS2_OrderProcessingComment_container{
  box-sizing:border-box;
  max-width:440px; height:auto; min-height:64px;
  margin:52px auto 0; padding:21px 24px;
  background:#8b8371; border-radius:4px; box-shadow:none;
  text-align:center; cursor:default;
  font-size:15px; font-weight:700; line-height:1.5; letter-spacing:.06em;
  color:#fff;
}
/* section 8 gives every FS2_bottom_btn_center_1 a pink hover.
   This box is not pressable, so it must not react to the cursor. */
#FS2_body_Cart.FS2_body_Cart_OrderConfirm #FS2_OrderProcessingComment_container:hover{
  background:#8b8371;
}
/* inline-block, not flex: see the note above about display. */
#FS2_body_Cart.FS2_body_Cart_OrderConfirm #FS2_OrderProcessingComment_container::before{
  content:""; display:inline-block; vertical-align:-3px;
  width:16px; height:16px; margin:0 10px 0 0;
  border:2px solid rgba(255,255,255,.38); border-top-color:#fff;
  border-radius:50%;
  animation:hhSpin .8s linear infinite;
}
@keyframes hhSpin{ to{ transform:rotate(360deg); } }
/* A customer who has set "reduce motion" still needs to know the
   box is live, so the spinner stays but stops turning and the
   panel breathes instead. */
@media (prefers-reduced-motion:reduce){
  #FS2_body_Cart.FS2_body_Cart_OrderConfirm #FS2_OrderProcessingComment_container::before{
    animation:none;
  }
  #FS2_body_Cart.FS2_body_Cart_OrderConfirm #FS2_OrderProcessingComment_container{
    animation:hhBreathe 1.6s ease-in-out infinite;
  }
}
@keyframes hhBreathe{ 50%{ opacity:.72; } }
/* On this screen the comment holds nothing but one framed
   warning, so the comment's own card would be a frame around a
   frame. It is reduced to a plain wrapper; the warning inside
   keeps its box. */
#FS2_body_Cart.FS2_body_Cart_OrderConfirm .FS2_upper_comment{
  margin:0 0 30px; padding:0;
  background:none; border:none; border-radius:0;
}
#FS2_body_Cart.FS2_body_Cart_OrderConfirm .FS2_upper_comment img{ display:none; }


/* ============================================================
   15. SCREEN : OrderComplete
   the comment area sits before <h2> in the markup. display:contents
   lifts its children into the flex layout so they can be ordered
   freely without touching the DOM.
   ============================================================ */
.FS2_body_Cart_OrderComplete .system_content{
  display:flex; flex-direction:column;
}
.FS2_body_Cart_OrderComplete .FS2_upper_comment{
  display:contents;
}
.FS2_body_Cart_OrderComplete .pan.FS2_breadcrumbs{ order:1; }
/* the numbered step bar, when the snippet is in place, stands
   where the segment bar stood. Without an order it would be a
   flex item at 0 and sit above the breadcrumbs. */
.FS2_body_Cart_OrderComplete .hhStep{ order:2; }
.FS2_body_Cart_OrderComplete .orderFlow{ order:2; margin-bottom:44px; }
.FS2_body_Cart_OrderComplete .ocHero{ order:3; }
.FS2_body_Cart_OrderComplete h2.pageTitle{ order:4; display:none; }
.FS2_body_Cart_OrderComplete blockquote{ order:5; }
.FS2_body_Cart_OrderComplete .ocContact{ order:6; }

/* Two ways to reach the shop, side by side and clearly two.
   Before, the labels floated above a single line of values and
   the pair read as one run-on address; a divider and equal
   halves say "pick one". The opening hours belong to the phone
   number, not to both, so they sit inside that half. */
.FS2_body_Cart_OrderComplete .ocContact{
  box-sizing:border-box; max-width:640px;
  margin:0 auto 36px; padding:26px 0 24px;
  background:#fff; border:1px solid var(--hh-line); border-radius:6px;
  text-align:center;
}
.FS2_body_Cart_OrderComplete .ocContact__ttl{
  margin:0 0 6px; font-size:15px; font-weight:700;
  letter-spacing:.04em; color:var(--hh-dark);
}
.FS2_body_Cart_OrderComplete .ocContact__note{
  margin:0 0 22px; font-size:12.5px; line-height:1.8; color:#6b6350;
}
/* Not 1fr 1fr. The address is far longer than the phone number,
   so equal halves force it to wrap while the right half sits
   half empty. auto lets each column take what its content needs
   and the divider lands where the two actually meet. */
.FS2_body_Cart_OrderComplete .ocContact__row{
  display:grid; grid-template-columns:auto auto;
  justify-content:center;
  align-items:start;
}
.FS2_body_Cart_OrderComplete .ocContact__item{
  padding:0 26px;
}
.FS2_body_Cart_OrderComplete .ocContact__item + .ocContact__item{
  border-left:1px solid var(--hh-line);
}
.FS2_body_Cart_OrderComplete .ocContact__label{
  display:block; margin:0 0 6px;
  font-family:"Lato",sans-serif;
  font-size:11px; letter-spacing:.16em; color:#a39a85;
}
/* The address is one string and has to read as one: broken over
   two lines it looks like a typo. 19px keeps it on a single line
   inside half of a 640px card; if the address ever gets longer,
   drop this a point rather than letting it wrap. */
.FS2_body_Cart_OrderComplete .ocContact a{
  display:inline-block;
  font-family:"Lato",sans-serif;
  font-size:19px; font-weight:700; letter-spacing:.01em;
  color:var(--hh-gold); text-decoration:none;
  white-space:nowrap;
}
.FS2_body_Cart_OrderComplete .ocContact a:hover{ text-decoration:underline; }
.FS2_body_Cart_OrderComplete .ocContact__hours{
  display:block; margin:8px 0 0;
  font-size:11.5px; color:#8b8371;
}

.FS2_body_Cart_OrderComplete .ocCta{ order:7; }

/* The real markup, confirmed with a live order 2026-09-06:
     div.user_content.FS2_upper_comment > P > IMG cart-step06.gif
   That one gif carries the whole thank-you block - the headline,
   the illustration, the mail address and the phone number. None
   of that text exists in the html, which is why the snippet has
   to rebuild it. Hiding the image is not enough: the <P> around
   it stays, and since the comment is display:contents the empty
   paragraph becomes a flex item with no order and lands above
   the breadcrumbs. The paragraph goes with the image.
   :has(> img) only matches the old wrapper - the paragraphs the
   snippet adds sit inside .ocHero, not here. */
.FS2_body_Cart_OrderComplete .FS2_upper_comment > p > img,
.FS2_body_Cart_OrderComplete .FS2_upper_comment > img{ display:none; }
.FS2_body_Cart_OrderComplete .FS2_upper_comment > p:has(> img){ display:none; }

/* The affiliate tag leaves an empty <span> directly in the
   content, which the flex layout also treats as an item at
   order 0. It has no size, but it is one more thing sitting in
   front of the breadcrumbs for no reason. */
.FS2_body_Cart_OrderComplete #a8sales{ display:none; }

/* The lower comment needs the same treatment as the upper one.
   The contact card and the buttons are pasted into it, and their
   order values only mean something if they are flex items of
   .system_content themselves. Without this the whole lower
   comment is one item at order 0 and the contact card jumps to
   the top of the page. Its own card styling would also frame a
   card that already has a frame. */
.FS2_body_Cart_OrderComplete .FS2_lower_comment{
  display:contents;
}

.FS2_body_Cart_OrderComplete .ocHero{ text-align:center; margin:0 0 12px; }
/* The tick is gone. It said "this worked", which the wording
   already says, and it competed with the Special Thanks mark
   for the same moment. Kept as a rule so the old markup does
   not leave an empty circle behind. */
.FS2_body_Cart_OrderComplete .ocHero__mark{ display:none; }
.FS2_body_Cart_OrderComplete .ocHero__ttl{
  margin:0 0 20px; font-size:26px; font-weight:700;
  letter-spacing:.06em; color:var(--hh-dark); line-height:1.5;
}
/* The shop's own Special Thanks lettering. It is #ebe6ce, the
   same tone the site uses to highlight text, so it reads as a
   flourish under the headline rather than a second message.
   width in em, not px: it then follows the headline if the
   type scale is ever changed. */
.FS2_body_Cart_OrderComplete .ocHero__thanks{
  display:block; width:100%; max-width:380px; height:auto;
  margin:0 auto 22px;
}
/* The lead and the system's order-code block below it are one
   piece of writing, so they share a type scale and sit a single
   line apart. Anything larger and the customer reads them as two
   separate notices. */
.FS2_body_Cart_OrderComplete .ocHero__lead{
  margin:0; font-size:14px; line-height:2.1; color:#5a5245;
}
/* The order code block, printed by the system. No panel: the
   Special Thanks mark above it is the only thing on this screen
   that should carry a shape, and a grey box under it read as a
   second one. */
.FS2_body_Cart_OrderComplete blockquote{
  box-sizing:border-box; max-width:640px;
  margin:0 auto 40px; padding:0;
  background:none; border:none; border-radius:0;
  text-align:center;
  font-size:14px; line-height:2.1; color:#5a5245;
}
/* the number itself has to be wrapped in the admin message; see
   the snippet file. <b> works too and is styled here. */
.FS2_body_Cart_OrderComplete blockquote b,
.FS2_body_Cart_OrderComplete blockquote strong,
.FS2_body_Cart_OrderComplete .ocCode{
  font-family:"Lato",sans-serif;
  font-size:19px; font-weight:700; letter-spacing:.03em;
  color:var(--hh-dark);
}
.FS2_body_Cart_OrderComplete .ocCta{
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:0 0 20px;
}
.FS2_body_Cart_OrderComplete .ocCta a{
  box-sizing:border-box; min-width:250px; height:56px; line-height:54px;
  border-radius:4px; text-align:center; text-decoration:none;
  font-size:15px; font-weight:700; letter-spacing:.06em;
  transition:background .2s, color .2s, border-color .2s;
}
.FS2_body_Cart_OrderComplete .ocCta__primary{
  background:var(--hh-pink); border:1px solid var(--hh-pink); color:#fff;
}
.FS2_body_Cart_OrderComplete .ocCta__primary:hover{
  background:#d90f3f; border-color:#d90f3f;
}
.FS2_body_Cart_OrderComplete .ocCta__ghost{
  background:#fff; border:1px solid var(--hh-dark); color:var(--hh-dark);
}
.FS2_body_Cart_OrderComplete .ocCta__ghost:hover{
  background:var(--hh-dark); color:#fff;
}

/* Written with the id as well. The rules above are two classes,
   which loses to anything the shop colours anchors with that
   carries an id - and the label is the one thing on this screen
   that must not be allowed to disappear again. No !important:
   the cause was found and scoped out, so the extra weight here
   is a guard, not a patch over an unknown. */
#FS2_body_Cart.FS2_body_Cart_OrderComplete .ocCta a.ocCta__primary{
  color:#fff; text-decoration:none;
}
#FS2_body_Cart.FS2_body_Cart_OrderComplete .ocCta a.ocCta__ghost{
  color:var(--hh-dark); text-decoration:none;
}
#FS2_body_Cart.FS2_body_Cart_OrderComplete .ocCta a.ocCta__ghost:hover{
  color:#fff;
}
/* ============================================================
   17. SCREENS OUTSIDE THE CART
   Four screens sit in the purchase path but are not under
   #FS2_body_Cart, so nothing in sections 1-16 reaches them and
   they stayed on the old design in the middle of the new flow:

     my-page   EntryEdit          "change your details", where a
                                  logged-in member lands from the
                                  confirm screen's change button
     member    MemberEntryEdit    new registration
     member    MemberAgreement    the terms, before registration
     login     Login              the standalone login screen

   All four use the same form markup as the cart screens - same
   table, same field ids, same required gif, same red notes - so
   17-A is the shared part, written once under a :is() list rather
   than copied four times. 17-B is the input-form table, which
   only two of them are. Everything after that is per screen.
   Each selector names an id AND a class: the other my-page,
   member and login screens are untouched.
   ============================================================ */

/* ---- 17-A. shared with the cart screens ------------------- */
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .utility{ display:none; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .pan.FS2_breadcrumbs{
  background:var(--hh-head); color:#6b6350; font-size:12px;
  padding:10px 16px; margin:0 0 28px; border:none;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .pan.FS2_breadcrumbs a{ color:#6b6350; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment{
  background:var(--hh-soft); border:1px solid #f0ece3; border-radius:4px;
  padding:18px 22px; margin:0 0 36px;
  font-size:13px; line-height:1.9; color:#5a5245;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment b{ color:var(--hh-dark); }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment font[color="red"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment font[color="red"]{ color:var(--hh-pink) !important; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment b{ color:var(--hh-dark); }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment div[style] a,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment div[style] a,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment a{
  color:var(--hh-pink);
  text-decoration:underline; text-underline-offset:3px;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment div[style] a:hover,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment a:hover{ color:#d90f3f; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment > br:first-child,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment > br:first-child{ display:none; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment{
  clear:both; margin:56px 0 0; padding:30px 34px;
  border:1px solid var(--hh-line); border-radius:4px; background:#fff;
  font-size:13px; line-height:2; color:#5a5245;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment img{ max-width:100%; height:auto; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment:has(div[style]),
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment:has(> img),
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment:has(> p > img),
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment:has(> div > p > img){
  padding:0; background:none; border:none; border-radius:0;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment div[style],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment div[style]{
  border:1px solid #f2c9d4 !important;
  border-radius:4px !important;
  background:#fdf2f5;
  padding:20px 24px !important;
  text-align:left;
  color:var(--hh-pink);
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment div[style] b,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment div[style] b,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment div[style] strong,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment div[style] strong{
  color:var(--hh-pink);
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) h2.pageTitle{
  font-family:"Noto Sans JP",sans-serif;
  font-size:24px; font-weight:700; letter-spacing:.06em;
  color:var(--hh-dark); background:none; border:none;
  padding:0 0 18px; margin:0;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) h3.CrossHead{
  background:none !important; border:none;
  border-left:3px solid var(--hh-gold);
  margin:34px 0 14px; padding:2px 0 2px 12px;
  font-size:16px; font-weight:700; letter-spacing:.06em;
  color:var(--hh-dark) !important;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) h2.pageTitle + h3.CrossHead,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) h2.pageTitle + form h3.CrossHead:first-of-type,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) h2.pageTitle + div h3.CrossHead:first-of-type{
  margin-top:0;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea table > caption{
  display:table-caption; caption-side:top;
  width:auto; margin:0 0 14px; padding:2px 0 2px 12px;
  background:none !important; border:none;
  border-left:3px solid var(--hh-gold);
  text-align:left; color:var(--hh-dark) !important;
  font-size:16px; font-weight:700; letter-spacing:.06em;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="text"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="email"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="tel"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="password"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea select,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea textarea,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) table.userTable_01 input[type="text"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) table.userTable_01 input[type="password"]{
  box-sizing:border-box; padding:0 14px; background:#fff;
  border:1px solid #d8d2c4; border-radius:4px;
  font-size:14px; color:var(--hh-dark); vertical-align:middle;
  transition:border-color .15s, box-shadow .15s;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="text"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="email"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="tel"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="password"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea select,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) table.userTable_01 input[type="text"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) table.userTable_01 input[type="password"]{ height:46px; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input:focus,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea select:focus,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea textarea:focus,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) table.userTable_01 input:focus{
  outline:none; border-color:var(--hh-gold);
  box-shadow:0 0 0 3px rgba(168,150,79,.15);
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea select{
  -webkit-appearance:none; appearance:none;
  padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6350' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) input[type="checkbox"].hh,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_privacyPageLink_container input[type="checkbox"],
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_holdEmailAddress input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  position:relative; flex:0 0 auto;
  width:22px; height:22px; margin:0 12px 0 0;
  border:2px solid #c9c1ad; border-radius:4px; background:#fff;
  cursor:pointer; transition:background .15s, border-color .15s;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_privacyPageLink_container input[type="checkbox"]:hover,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_holdEmailAddress input[type="checkbox"]:hover{
  border-color:var(--hh-gold);
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_privacyPageLink_container input[type="checkbox"]:checked,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_holdEmailAddress input[type="checkbox"]:checked{
  background:var(--hh-pink); border-color:var(--hh-pink);
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_privacyPageLink_container input[type="checkbox"]:checked::after,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_holdEmailAddress input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) input[type="checkbox"]:focus-visible,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) input[type="radio"]:focus-visible{
  outline:2px solid var(--hh-gold); outline-offset:2px;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="radio"]{
  -webkit-appearance:none; appearance:none;
  position:relative; flex:0 0 auto;
  width:20px; height:20px; margin:0 8px 0 0;
  border:2px solid #c9c1ad; border-radius:50%; background:#fff;
  cursor:pointer; transition:border-color .15s;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="radio"]:hover{ border-color:var(--hh-gold); }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="radio"]:checked{ border-color:var(--hh-pink); }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .inputTableArea input[type="radio"]:checked::after{
  content:""; position:absolute; left:3px; top:3px;
  width:10px; height:10px; border-radius:50%; background:var(--hh-pink);
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) table.userTable_01 th img[alt="\5FC5\9808"]{ display:none; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) table.userTable_01 th:has(img[alt="\5FC5\9808"])::after{
  content:"\5FC5\9808";
  display:inline-block; padding:3px 8px; border-radius:2px;
  background:var(--hh-pink); color:#fff;
  font-size:11px; font-weight:700; line-height:1.4; letter-spacing:.04em;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_AddressSearchButton{
  height:46px; margin-left:10px; padding:0 20px;
  background:#fff; border:1px solid var(--hh-dark); border-radius:4px;
  color:var(--hh-dark); font-size:13px; font-weight:500; cursor:pointer;
  transition:background .2s, color .2s;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_AddressSearchButton:hover{
  background:var(--hh-dark); color:#fff;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_assist_container{
  display:block; margin:8px 0 0;
  background:none !important; border:none !important; padding:0 !important;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_assist_message,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) label.error,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .fs2_errorMessage{
  display:inline-flex !important; align-items:center; gap:6px;
  position:static !important; margin:0; box-shadow:none !important;
  background:#fdf2f5 !important; border:1px solid #f2c9d4 !important;
  border-radius:4px !important; padding:6px 12px 6px 10px !important;
  color:#c0392b !important; font-size:12.5px; font-weight:700; line-height:1.5;
  text-align:left;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_assist_message::before,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) label.error::before,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .fs2_errorMessage::before{
  content:"!" !important;
  position:static !important;
  flex:0 0 auto; width:15px !important; height:15px !important;
  line-height:12px;
  border:1.5px solid #c0392b !important; border-radius:50%;
  text-align:center; font-size:11px; font-weight:700;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_assist_message::after,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) label.error::after,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .fs2_errorMessage::after{ content:none !important; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .arrow_box{
  position:relative;
  display:inline-block !important; box-sizing:border-box;
  width:auto !important; max-width:100%;
  margin:16px 0 0; padding:0;
  background:#faf6ea !important; border:1px solid #e3d9b8 !important;
  border-radius:4px !important; box-shadow:none !important;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .arrow_box::after,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .arrow_box p::after,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .arrow_box .note::after{ content:none !important; display:none !important; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .arrow_box::before{
  content:"" !important; display:block !important;
  position:absolute !important;
  left:55% !important; right:auto !important;
  top:-6px !important; bottom:auto !important;
  width:10px !important; height:10px !important;
  margin:0 !important; padding:0 !important;
  background:#faf6ea !important;
  border:0 solid #e3d9b8 !important;
  border-left-width:1px !important; border-top-width:1px !important;
  border-radius:0 !important; box-shadow:none !important;
  transform:rotate(45deg) !important; transform-origin:center !important;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .arrow_box p.note,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .arrow_box .note{
  display:flex; align-items:center; gap:8px;
  margin:0; padding:11px 18px 11px 14px;
  background:none !important; border:none !important;
  color:#8c7c3e !important; font-size:13px; font-weight:500;
  line-height:1.6; text-align:left;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .arrow_box p.note::before{
  content:"!";
  flex:0 0 auto; width:16px; height:16px; line-height:14px;
  border:1.5px solid #a8964f; border-radius:50%;
  color:#a8964f; text-align:center; font-size:11px; font-weight:700;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) input.FS2_assist_error,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) select.FS2_assist_error,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) textarea.FS2_assist_error,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) input.error,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) select.error{
  border-color:#e08a9b !important; background-color:#fffafb !important;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .hhbtn-primary,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_bottom_btn_center_1{
  position:relative; box-sizing:border-box;
  max-width:420px; height:58px; line-height:58px;
  margin:44px auto 0; padding:0;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.08em;
  transition:background .2s;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_bottom_btn_center_1:hover{ background:#d90f3f; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_bottom_btn_center_1 input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .dummySubmit{ position:absolute; }
/* ---- 17-B. the screens that are an input form ------------- */
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) .inputTableArea{
  margin:0; padding:0; border:none;
  background:var(--hh-bg); border-radius:4px; overflow:hidden;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01{
  width:100%; border-collapse:collapse; border:none; background:none;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 caption{ display:none; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 th,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 td{
  border:none; background:none;
  border-bottom:1px solid #e8e3d7;
  padding:20px 10px; vertical-align:middle;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 tr:last-child th,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 tr:last-child td{ border-bottom:none; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 th[colspan="2"]{
  width:27%; padding-left:26px; padding-right:0;
  text-align:left; font-size:14px; font-weight:500; color:var(--hh-dark);
  line-height:1.6;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 th[width="24"]{
  width:60px; padding-left:10px; padding-right:0; text-align:left;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 td{
  padding-right:26px; font-size:14px; line-height:1.8; color:var(--hh-dark);
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 td font[color="red"]{
  display:block; margin:0 0 8px;
  color:#c0392b !important; font-size:12px; line-height:1.8;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) table.userTable_01 td > font[color="red"] + br{
  display:none;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_companyName,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_departmentName,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_addressLine1,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_addressLine2,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_addressLine3,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_email,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_emailConfirmation{ width:100%; max-width:440px; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_lastName,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_firstName,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_lastNameKana,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_firstNameKana{ width:190px; margin-right:8px; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_zipCodeFront{ width:90px; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_zipCodeBack{ width:96px; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_phoneNumberPublic,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_phoneNumberLocal,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_phoneNumberMember,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_dayPhonePublic,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_dayPhoneLocal,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_dayPhoneMember,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_faxNumberPublic,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_faxNumberLocal,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_faxNumberMember{ width:88px; text-align:center; padding:0 6px; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_prefecture{ min-width:200px; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_emailConfirmation{ margin-top:10px; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) #fs2_emailConfirmationLabel{
  margin-left:10px; font-size:12px; color:#8b8371;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) .FS2_birthdayDateYear{ font-size:13px; color:#6b6350; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) .FS2_birthdayDateYear select{ min-width:96px; margin-right:4px; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit) .inputTableArea td label{
  display:inline-flex; align-items:center; margin-right:26px;
  cursor:pointer; font-size:14px;
}

/* ---- 17-C. per screen ------------------------------------- */
/* the line under the page title on all three form screens */
#FS2_body_MyPage.FS2_body_MyPage_EntryEdit h2.pageTitle + p,
#FS2_body_Member.FS2_body_Member_MemberEntryEdit #form > p{
  margin:0 0 26px; font-size:13px; line-height:1.9; color:#6b6350;
}
#FS2_body_MyPage.FS2_body_MyPage_EntryEdit .FS2_bottom_btn_center_1::after{ content:"\78BA\8A8D\753B\9762\3078\9032\3080"; }
#FS2_body_Member.FS2_body_Member_MemberEntryEdit .FS2_bottom_btn_center_1::after{ content:"\78BA\8A8D\753B\9762\3078\9032\3080"; }
#FS2_body_MyPage.FS2_body_MyPage_EntryEdit .FS2_bottom_btn_left_2{
  position:relative; box-sizing:border-box;
  width:180px; height:48px; line-height:46px;
  margin:20px auto 0; padding:0;
  background:#fff; border:1px solid var(--hh-dark); border-radius:4px;
  text-align:center; color:var(--hh-dark); font-size:14px;
  transition:background .2s, color .2s;
}
#FS2_body_MyPage.FS2_body_MyPage_EntryEdit .FS2_bottom_btn_left_2::after{ content:"\623B\308B"; }
#FS2_body_MyPage.FS2_body_MyPage_EntryEdit .FS2_bottom_btn_left_2:hover{ background:var(--hh-dark); color:#fff; }
#FS2_body_MyPage.FS2_body_MyPage_EntryEdit .FS2_bottom_btn_left_2 input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
#FS2_body_MyPage.FS2_body_MyPage_EntryEdit .FS2_birthdayOnceMessage,
#FS2_body_Member.FS2_body_Member_MemberEntryEdit .FS2_birthdayOnceMessage{
  display:block; margin:8px 0 0; font-size:12px; color:#8b8371;
}
/* registration only: password pair and the consent checkbox.
   The two password boxes are separated by a <br> inside a span,
   so the second one needs the gap the <br> does not give it. */
#FS2_body_Member.FS2_body_Member_MemberEntryEdit .FS2_pass_input{ display:block; }
#FS2_body_Member.FS2_body_Member_MemberEntryEdit #fs2_password,
#FS2_body_Member.FS2_body_Member_MemberEntryEdit #fs2_passwordConfirmation{ width:100%; max-width:280px; }
#FS2_body_Member.FS2_body_Member_MemberEntryEdit #fs2_passwordConfirmation{ margin-top:10px; }
/* The consent box is the last thing between the form and the
   button, and it was a bare checkbox on a white page. It gets a
   band of its own so it reads as a step, not as a stray line. */
#FS2_body_Member.FS2_body_Member_MemberEntryEdit .FS2_privacyPageLink_container{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px;
  margin:26px 0 0; padding:18px 22px;
  background:var(--hh-bg); border:1px solid var(--hh-line); border-radius:4px;
  font-size:14px; color:var(--hh-dark);
}
#FS2_body_Member.FS2_body_Member_MemberEntryEdit .FS2_privacyPageLink_container label{
  display:flex; align-items:center; cursor:pointer; font-weight:700;
}
#FS2_body_Member.FS2_body_Member_MemberEntryEdit .FS_privacyPageLink{
  color:#8c7c3e; font-size:13px;
  text-decoration:underline; text-underline-offset:3px;
}
/* the banner in the comment area is 950px wide in the markup */
#FS2_body_Member.FS2_body_Member_MemberEntryEdit .FS2_upper_comment,
#FS2_body_Member.FS2_body_Member_MemberAgreement .FS2_upper_comment{
  padding:0; background:none; border:none; border-radius:0; margin:0 0 30px;
}
#FS2_body_Member.FS2_body_Member_MemberEntryEdit .FS2_upper_comment img,
#FS2_body_Member.FS2_body_Member_MemberAgreement .FS2_upper_comment img{
  display:block; width:100%; height:auto; border-radius:4px;
}


/* ============================================================
   19. SCREEN : Login  (the standalone one, not the cart step)
   Same markup as the cart's login screen, so the same treatment.
   Three differences, all verified against the real page:
   the two image buttons are #submit and #submit_0 rather than
   #login and #entry, the right-hand text is
   .FS2_Login_comment_area rather than .FS2_MemberRegistration_-
   comment, and there is no "buy without registering" link.
   ============================================================ */
#FS2_body_Login.FS2_body_Login_Login #form .FS2_login_layout_table{
  width:100%; border-collapse:collapse; border:none;
  background:var(--hh-bg); border-radius:4px;
}
#FS2_body_Login.FS2_body_Login_Login #form .FS2_login_layout_table_td_left,
#FS2_body_Login.FS2_body_Login_Login #form .FS2_login_layout_table_td_right{
  width:50%; padding:40px; vertical-align:top; border:none;
}
#FS2_body_Login.FS2_body_Login_Login #form .FS2_login_layout_table_td_right{
  border-left:1px solid var(--hh-line);
}
/* the word "log in" over the two fields is the table's <caption>.
   The column is already headed "customers who have registered",
   and the button under the fields says log in, so the caption was
   the same word a third time - hidden rather than restyled.
   The heading's own 26px gap now sits directly above the first
   field, which matches the spacing in the right-hand column.
   !important because 17-A's caption selector carries two ids. */
#FS2_body_Login.FS2_body_Login_Login #form .inputTableArea table > caption{
  display:none !important;
}
#FS2_body_Login.FS2_body_Login_Login #form .FS2_login_layout_table h3.CrossHead{
  background:none; border:none; margin:0 0 26px; padding:0;
  text-align:center; font-size:18px; font-weight:700;
  letter-spacing:.06em; color:var(--hh-dark);
}
#FS2_body_Login.FS2_body_Login_Login #form .inputTableArea{
  margin:0; padding:0; border:none; background:none;
}
#FS2_body_Login.FS2_body_Login_Login #form table.userTable_01{
  width:100%; border:none; border-collapse:collapse; background:none;
}
#FS2_body_Login.FS2_body_Login_Login #form table.userTable_01 caption{ display:none; }
#FS2_body_Login.FS2_body_Login_Login #form table.userTable_01 th{
  width:34%; padding:9px 14px 9px 0; border:none; background:none;
  text-align:left; vertical-align:middle; white-space:nowrap;
  font-size:13px; font-weight:500; color:#5a5245;
}
#FS2_body_Login.FS2_body_Login_Login #form table.userTable_01 td{ padding:9px 0; border:none; background:none; }
#FS2_body_Login.FS2_body_Login_Login #form table.userTable_01 input[type="text"],
#FS2_body_Login.FS2_body_Login_Login #form table.userTable_01 input[type="password"]{ width:100%; }
#FS2_body_Login.FS2_body_Login_Login #form .FS2_holdEmailAddress{ margin:14px 0 0; }
#FS2_body_Login.FS2_body_Login_Login #form .FS2_holdEmailAddress label{
  display:flex; align-items:center; cursor:pointer;
  font-size:13px; color:#5a5245;
}
#FS2_body_Login.FS2_body_Login_Login #form .FS2_holdEmailAddress input[type="checkbox"]{
  width:20px; height:20px; margin-right:10px;
}
#FS2_body_Login.FS2_body_Login_Login #form .FS2_holdEmailAddress input[type="checkbox"]:checked::after{ left:5px; top:1px; }
#FS2_body_Login.FS2_body_Login_Login #form .inputTableArea .itemCenter{
  position:relative; display:block;
  height:56px; line-height:56px; margin:24px 0 0; padding:0;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.1em;
  transition:background .2s;
}
#FS2_body_Login.FS2_body_Login_Login #form .inputTableArea .itemCenter:hover{ background:#d90f3f; }
#FS2_body_Login.FS2_body_Login_Login #form .inputTableArea .itemCenter::after{
  content:"\30ED\30B0\30A4\30F3";
}
#FS2_body_Login.FS2_body_Login_Login #form .inputTableArea .itemCenter #submit{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
#FS2_body_Login.FS2_body_Login_Login #form .inputTableArea div[align="right"]{
  text-align:center !important; margin:16px 0 0;
}
#FS2_body_Login.FS2_body_Login_Login #form .inputTableArea div[align="right"] a{
  font-size:0; color:#8b8371;
  text-decoration:underline; text-underline-offset:4px;
}
#FS2_body_Login.FS2_body_Login_Login #form .inputTableArea div[align="right"] a::before{
  content:"\30D1\30B9\30EF\30FC\30C9\3092\304A\5FD8\308C\3067\3059\304B\FF1F";
  font-size:13px;
}
#FS2_body_Login.FS2_body_Login_Login #form .FS2_Login_comment_area{
  font-size:13px; line-height:1.9; color:#5a5245;
}
#FS2_body_Login.FS2_body_Login_Login #form .FS2_Login_comment_area p{ margin:0; }
#FS2_body_Login.FS2_body_Login_Login #form .FS2_Login_comment_area b{ font-weight:500; }
#FS2_body_Login.FS2_body_Login_Login #form .FS2_Login_comment_area font[color="#d5002b"]{
  display:block; margin:0 0 16px; padding:14px 16px;
  background:#fff; border-radius:4px;
  color:var(--hh-dark) !important; font-size:13px; line-height:1.8;
}
#FS2_body_Login.FS2_body_Login_Login #form .FS2_Login_btn_position{ position:relative; margin:28px 0 0; }
#FS2_body_Login.FS2_body_Login_Login #form .FS2_Login_btn_position br{ display:none; }
#FS2_body_Login.FS2_body_Login_Login #form .FS2_Login_btn_position::before{
  content:"\4F1A\54E1\767B\9332\3059\308B";
  display:block; height:56px; line-height:56px;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.08em;
  transition:background .2s;
}
#FS2_body_Login.FS2_body_Login_Login #form .FS2_Login_btn_position:hover::before{ background:#d90f3f; }
#FS2_body_Login.FS2_body_Login_Login #form .FS2_Login_btn_position #submit_0{
  position:absolute; top:0; left:0; width:100%; height:56px;
  opacity:0; cursor:pointer; z-index:2;
}


/* ============================================================
   20. SCREEN : MemberAgreement
   The terms come before the registration form. The text is a
   plain <div class="frameArea"> with no frame of its own, and the
   two answers are real submit buttons with a value attribute -
   the only buttons in this flow that are not gifs, so they are
   styled directly instead of being covered over.
   ============================================================ */
#FS2_body_Member.FS2_body_Member_MemberAgreement .frameArea{
  box-sizing:border-box; max-height:420px; overflow-y:auto;
  margin:0; padding:24px 28px;
  background:#fff; border:1px solid var(--hh-line); border-radius:4px;
  font-size:13px; line-height:2; color:#5a5245;
}
#FS2_body_Member.FS2_body_Member_MemberAgreement table.userTable_02{
  width:100%; margin:26px 0 0; border-collapse:separate; border-spacing:0;
  border:none; background:none;
}
#FS2_body_Member.FS2_body_Member_MemberAgreement table.userTable_02 th{
  display:block; width:auto; padding:0 0 16px; border:none; background:none;
  text-align:center; font-size:15px; font-weight:700; color:var(--hh-dark);
}
#FS2_body_Member.FS2_body_Member_MemberAgreement table.userTable_02 td{
  display:flex; justify-content:center; align-items:center; gap:16px;
  padding:0; border:none; background:none;
}
#FS2_body_Member.FS2_body_Member_MemberAgreement table.userTable_02 input[type="submit"]{
  box-sizing:border-box; -webkit-appearance:none; appearance:none;
  height:58px; padding:0 32px;
  border-radius:4px; cursor:pointer;
  font-size:15px; font-weight:700; letter-spacing:.06em;
  transition:background .2s, color .2s;
}
#FS2_body_Member.FS2_body_Member_MemberAgreement table.userTable_02 #submit{
  min-width:320px; background:var(--hh-pink); border:none; color:#fff;
  box-shadow:0 6px 18px rgba(255,36,86,.22);
}
#FS2_body_Member.FS2_body_Member_MemberAgreement table.userTable_02 #submit:hover{ background:#d90f3f; }
#FS2_body_Member.FS2_body_Member_MemberAgreement table.userTable_02 #submit_0{
  min-width:160px; background:#fff;
  border:1px solid var(--hh-dark); color:var(--hh-dark); font-weight:500;
}
#FS2_body_Member.FS2_body_Member_MemberAgreement table.userTable_02 #submit_0:hover{ background:var(--hh-dark); color:#fff; }

/* The "my page top" gif hangs under the buttons on both my-page
   screens. It is a third destination, not a third button, so it
   is drawn as a plain link. :has picks the parent whatever tag it
   is - the wrapper is in none of the sources we were given, and
   only the input's id is certain (the page's own script names it). */
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm) *:has(> #fs2_myPageTop){
  position:relative; display:block; width:max-content;
  height:22px; line-height:22px; margin:26px auto 0; padding:0;
  background:none; border:none;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm) *:has(> #fs2_myPageTop)::after{
  content:"\30DE\30A4\30DA\30FC\30B8\30C8\30C3\30D7\3078";
  font-size:13px; color:#6b6350;
  text-decoration:underline; text-underline-offset:4px;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm) #fs2_myPageTop{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}


/* ============================================================
   18. SCREEN : MyPage / EntryEditConfirm
   The confirmation step for the screen above. Read-only table,
   so the treatment comes from the order-confirm screen rather
   than from the input form.
   The class is a different token from FS2_body_MyPage_EntryEdit,
   so section 17 does not reach it; that is why this screen stayed
   old after the edit screen was fixed.
   ============================================================ */
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) .utility{ display:none; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) .pan.FS2_breadcrumbs{
  background:var(--hh-head); color:#6b6350; font-size:12px;
  padding:10px 16px; margin:0 0 28px; border:none;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) .pan.FS2_breadcrumbs a{ color:#6b6350; }
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) h2.pageTitle{
  font-family:"Noto Sans JP",sans-serif;
  font-size:24px; font-weight:700; letter-spacing:.06em;
  color:var(--hh-dark); background:none; border:none;
  padding:0 0 18px; margin:0;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) h2.pageTitle + p{
  margin:0 0 26px; font-size:13px; line-height:1.9; color:#6b6350;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) .inputTableArea{
  margin:0; padding:0; border:none; background:none;
}
/* NOT overflow:hidden - see the note on the order-confirm table */
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) table.userTable_01{
  width:100%; margin:0; background:#fff;
  border-collapse:separate !important; border-spacing:0 !important;
  border:1px solid var(--hh-line) !important; border-radius:4px;
}
/* the markup carries align="right" on every label cell, which is
   an attribute and beats a plain declaration - hence !important */
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) table.userTable_01 > tbody > tr > th,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) table.userTable_01 > tbody > tr > td{
  border:none !important; border-bottom:1px solid #ede8dc !important;
  padding:14px 18px; font-size:13.5px; line-height:1.8;
  vertical-align:top; text-align:left !important;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) table.userTable_01 > tbody > tr:last-child > th,
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) table.userTable_01 > tbody > tr:last-child > td{
  border-bottom:none !important;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) table.userTable_01 > tbody > tr > th{
  width:32% !important; background:var(--hh-bg) !important;
  font-weight:500; color:#6b6350; white-space:normal !important;
}
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm) table.userTable_01 > tbody > tr > td{
  color:var(--hh-dark); font-weight:500;
}
/* Two buttons in one container, so the box cannot be the button
   the way it is elsewhere. The two faces are drawn as ::before
   and ::after and the two transparent inputs are laid over them.
   Widths are fixed because the inputs have to be placed by hand;
   change one and the offsets below have to follow.
   320 + 16 + 160 = 496, so the pair starts 248 left of centre and
   the second button starts 88 right of it. */
#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm .FS2_bottom_btn_center_1{
  position:relative; box-sizing:border-box;
  display:flex; justify-content:center; align-items:center; gap:16px;
  width:auto; max-width:none; height:58px;
  margin:44px auto 0; padding:0;
  background:none; border:none; border-radius:0;
}
#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm .FS2_bottom_btn_center_1::before{
  content:"\5909\66F4\3092\78BA\5B9A\3059\308B";
  box-sizing:border-box; width:320px; height:58px; line-height:58px;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.08em;
  box-shadow:0 6px 18px rgba(255,36,86,.22);
}
#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm .FS2_bottom_btn_center_1::after{
  content:"\623B\308B";
  box-sizing:border-box; width:160px; height:58px; line-height:56px;
  background:#fff; border:1px solid var(--hh-dark); border-radius:4px;
  text-align:center; color:var(--hh-dark); font-size:14px;
}
#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm .FS2_bottom_btn_center_1 input[type="image"]{
  position:absolute; top:0; height:58px;
  opacity:0; cursor:pointer; z-index:2;
}
#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm .FS2_bottom_btn_center_1 #submit{
  left:calc(50% - 248px); width:320px;
}
#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm .FS2_bottom_btn_center_1 #submit_0{
  left:calc(50% + 88px); width:160px;
}


/* ============================================================
   21. SCREEN : MemberEntryConfirm
   The confirmation step of registration. Read-only table, so the
   table rules above are shared with the my-page confirm screen;
   the buttons are not - there is one image per container here,
   which is the ordinary case.
   ============================================================ */
#FS2_body_Member.FS2_body_Member_MemberEntryConfirm .FS2_bottom_btn_center_1::after{ content:"\767B\9332\3092\78BA\5B9A\3059\308B"; }
#FS2_body_Member.FS2_body_Member_MemberEntryConfirm .FS2_bottom_btn_left_2{
  position:relative; box-sizing:border-box;
  width:180px; height:48px; line-height:46px;
  margin:20px auto 0; padding:0;
  background:#fff; border:1px solid var(--hh-dark); border-radius:4px;
  text-align:center; color:var(--hh-dark); font-size:14px;
  transition:background .2s, color .2s;
}
#FS2_body_Member.FS2_body_Member_MemberEntryConfirm .FS2_bottom_btn_left_2::after{ content:"\623B\308B"; }
#FS2_body_Member.FS2_body_Member_MemberEntryConfirm .FS2_bottom_btn_left_2:hover{ background:var(--hh-dark); color:#fff; }
#FS2_body_Member.FS2_body_Member_MemberEntryConfirm .FS2_bottom_btn_left_2 input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}


/* ============================================================
   22. SCREEN : MemberEntryComplete
   This one does not get a body class of its own: futureshop
   prints it as FS2_body_Common_Information, the same class it
   uses for other information pages. Styling that class alone
   would reach pages we have not seen, so the scope is pinned to
   the form on this page - :has(#form[action=...]) - and nothing
   else can match it.
   ============================================================ */
#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]) .system_content > p{
  margin:0 0 14px; font-size:14px; line-height:1.9; color:#5a5245;
}
/* The list is what the account is FOR, so it is the substance of
   this page rather than a footnote. Two columns, because six
   single lines down the left edge read as leftovers.
   The items carry class="link" but are not links and have no
   href - they are not made to look clickable here, since a click
   would do nothing. */
#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]) .system_content > ul{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 20px; margin:0 0 8px; padding:20px 24px; list-style:none;
  background:var(--hh-bg); border-radius:4px;
}
#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]) .system_content > ul > li.link{
  display:flex; align-items:center; gap:10px;
  margin:0; padding:0; font-size:14px; color:var(--hh-dark);
}
#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]) .system_content > ul > li.link::before{
  content:""; flex:0 0 auto;
  width:6px; height:6px; border-radius:50%; background:var(--hh-gold-soft);
}
/* the completion screen's only button */
#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]) .FS2_bottom_btn_info{
  position:relative; box-sizing:border-box;
  max-width:420px; height:58px; line-height:58px;
  margin:36px auto 0; padding:0;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.08em;
  transition:background .2s;
}
#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]) .FS2_bottom_btn_info:hover{ background:#d90f3f; }
#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]) .FS2_bottom_btn_info::after{ content:"\30DE\30A4\30DA\30FC\30B8\3078"; }
#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]) .FS2_bottom_btn_info input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}


/* A <b> inside <font color="red"> was losing its colour. The rule
   above ("a <b> in a comment area is body-coloured") is written
   for bold used as emphasis in running text, but the shop also
   writes <font color="red"><b>...</b></font>, and there the <b>
   is the same words as the font - so the bold won and the red
   turned brown. Reported 2026-09-06 after the notice was
   rewritten with the bold inside the font.
   inherit, not the pink token: whatever colour the font carries
   is the colour the bold should be. */
#FS2_body_Cart .FS2_upper_comment font[color] :is(b,strong),
#FS2_body_Cart .FS2_lower_comment font[color] :is(b,strong),
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_upper_comment font[color] :is(b,strong),
:is(#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .FS2_lower_comment font[color] :is(b,strong){ color:inherit; }


/* Two empty boxes at the top of every screen in this flow.
   .headerBnr is the campaign banner and #topSlider is the slider
   strip; both are printed by the header comment, and both are
   filled by scripts in /js_renew/ that the cart and my-page
   layouts (02 and 03) do not load. So on these screens they are
   permanently empty - a thin blank band above the logo and a
   taller one under the navigation, on every step of the purchase.
   Hidden here rather than removed from the header comment: the
   same comment is shared with layouts that do load those scripts.
   Scoped to the screens this file already owns, so nothing else
   on the site changes. */
:is(#FS2_body_Cart,#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) .headerBnr,
:is(#FS2_body_Cart,#FS2_body_MyPage.FS2_body_MyPage_EntryEditConfirm,#FS2_body_MyPage.FS2_body_MyPage_EntryEdit,#FS2_body_Member.FS2_body_Member_MemberEntryEdit,#FS2_body_Member.FS2_body_Member_MemberAgreement,#FS2_body_Login.FS2_body_Login_Login,#FS2_body_Member.FS2_body_Member_MemberEntryConfirm,#FS2_body_Common.FS2_body_Common_Information:has(#form[action="MemberEntryComplete.html"]),#FS2_body_Password) #topSlider{ display:none; }


/* ============================================================
   16. NARROW SCREENS
   This file targets the PC templates. futureshop serves separate
   HTML for smartphones, so these rules only cover a narrow PC
   window. The real SP work is a separate task.
   ============================================================ */
@media screen and (max-width:768px){

  /* cart : the summary card spans the full width */
  .FS2_body_Cart_ShoppingCart #form > .itemRight50,
  .FS2_body_Cart_ShoppingCart #form > .FS2_privacyPageLink_container,
  .FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_1{
    max-width:none;
  }
  .FS2_body_Cart_ShoppingCart #form > .FS2_bottom_btn_right_and_left_2{
    align-self:stretch; width:100%; height:auto;
    margin:28px 0 0; padding:16px 0; line-height:1.6;
  }
  #FS2_body_Cart table.cartTable{ table-layout:fixed; }
  #FS2_body_Cart table.cartTable thead th{ padding:10px 4px; font-size:11px; }
  #FS2_body_Cart table.cartTable tbody td{ padding:14px 4px; font-size:13px; }
  #FS2_body_Cart .FS2_cartTableHeader_point,
  #FS2_body_Cart .FS2_cartTable_point{ display:none; }
  #FS2_body_Cart .FS2_GoodsImage_td{ width:64px; padding:14px 0 14px 10px; }
  #FS2_body_Cart .FS2_GoodsImage_td img{ width:54px; }
  #FS2_body_Cart .FS2_GoodsName_td{ padding-left:10px; padding-right:8px; }
  #FS2_body_Cart .FS2_cartTable_amount input[type="text"]{ width:44px; height:34px; }
  .FS2_body_Cart_ShoppingCart .FS2_cartTable_delete{ width:52px; }

  /* login : stack the two columns */
  .FS2_body_Cart_GuestLogin #form .FS2_login_layout_table,
  .FS2_body_Cart_GuestLogin #form .FS2_login_layout_table tbody,
  .FS2_body_Cart_GuestLogin #form .FS2_login_layout_table tr,
  .FS2_body_Cart_GuestLogin #form .FS2_login_layout_table_td_left,
  .FS2_body_Cart_GuestLogin #form .FS2_login_layout_table_td_right{
    display:block; width:auto;
  }
  .FS2_body_Cart_GuestLogin #form .FS2_login_layout_table_td_left,
  .FS2_body_Cart_GuestLogin #form .FS2_login_layout_table_td_right{ padding:28px 20px; }
  .FS2_body_Cart_GuestLogin #form .FS2_login_layout_table_td_right{
    border-left:none; border-top:1px solid var(--hh-line);
  }
  .FS2_body_Cart_GuestLogin #form table.userTable_01 th{
    display:block; width:auto; padding:0 0 6px; white-space:normal;
  }
  .FS2_body_Cart_GuestLogin #form table.userTable_01 td{ display:block; padding:0 0 14px; }

  /* input forms : label above field */
  .FS2_body_Cart_GuestEntry table.userTable_01,
  .FS2_body_Cart_GuestEntry table.userTable_01 tbody,
  .FS2_body_Cart_GuestEntry table.userTable_01 tr,
  .FS2_body_Cart_GuestEntry table.userTable_01 th,
  .FS2_body_Cart_GuestEntry table.userTable_01 td,
  .FS2_body_Cart_DeliveryEdit table.userTable_01,
  .FS2_body_Cart_DeliveryEdit table.userTable_01 tbody,
  .FS2_body_Cart_DeliveryEdit table.userTable_01 tr,
  .FS2_body_Cart_DeliveryEdit table.userTable_01 th,
  .FS2_body_Cart_DeliveryEdit table.userTable_01 td{
    display:block; width:auto !important;
  }
  .FS2_body_Cart_GuestEntry table.userTable_01 tr,
  .FS2_body_Cart_DeliveryEdit table.userTable_01 tr{
    border-bottom:1px solid #e8e3d7; padding:18px 18px 20px;
  }
  .FS2_body_Cart_GuestEntry table.userTable_01 th,
  .FS2_body_Cart_GuestEntry table.userTable_01 td,
  .FS2_body_Cart_DeliveryEdit table.userTable_01 th,
  .FS2_body_Cart_DeliveryEdit table.userTable_01 td{
    border-bottom:none; padding:0;
  }
  .FS2_body_Cart_GuestEntry table.userTable_01 th[colspan="2"],
  .FS2_body_Cart_DeliveryEdit table.userTable_01 th:first-child{
    display:inline-block; padding:0 8px 8px 0;
  }
  .FS2_body_Cart_GuestEntry table.userTable_01 th[width="24"],
  .FS2_body_Cart_DeliveryEdit table.userTable_01 th[width="24"]{
    display:inline-block; padding:0 0 8px;
  }
  #FS2_body_Cart .inputTableArea input[type="text"],
  #FS2_body_Cart .inputTableArea input[type="email"]{ width:100% !important; }
  #FS2_body_Cart #fs2_lastName,
  #FS2_body_Cart #fs2_firstName,
  #FS2_body_Cart #fs2_lastNameKana,
  #FS2_body_Cart #fs2_firstNameKana{ width:calc(50% - 6px) !important; margin-right:4px; }
  #FS2_body_Cart .FS2_AddressSearchButton{ display:block; width:100%; margin:10px 0 0; }

  /* payment */
  .FS2_body_Cart_SettleEdit .FS2_DeliveryMethod_table > tbody > tr > td,
  .FS2_body_Cart_SettleEdit #fs2_settleSelect > tbody > tr > td{ padding:16px 14px; }
  .FS2_body_Cart_SettleEdit .FS2_Delivery_table02 th,
  .FS2_body_Cart_SettleEdit .FS2_Delivery_table02 td{
    display:block; width:auto !important; padding:10px 0;
  }
  #FS2_body_Cart #fs2_deliveryHopeDate{ width:100%; min-width:0; }
  .FS2_body_Cart_SettleEdit .FS2_SettleEdit_list_Credit_table tr,
  .FS2_body_Cart_SettleEdit .FS2_SelectCreditCardTable tr{
    display:block; border-bottom:1px solid #e8e3d7;
  }
  .FS2_body_Cart_SettleEdit .FS2_SettleEdit_list_Credit_table th,
  .FS2_body_Cart_SettleEdit .FS2_SettleEdit_list_Credit_table td,
  .FS2_body_Cart_SettleEdit .FS2_SelectCreditCardTable th,
  .FS2_body_Cart_SettleEdit .FS2_SelectCreditCardTable td{
    display:block; width:auto !important; padding:10px 14px;
  }
  .FS2_body_Cart_SettleEdit .FS2_body_Cart_SettleEdit_icons img{ height:22px; }

  /* confirmation */
  .FS2_body_Cart_OrderConfirm .itemRight50{ float:none; width:auto; margin-top:20px; }
  .FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr,
  .FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr{ display:block; }
  .FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr > th,
  .FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr > th,
  .FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr > td,
  .FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr > td{
    display:block; width:auto !important; border-bottom:none !important;
  }
  .FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr > th,
  .FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr > th{
    padding:10px 14px 6px; font-size:12px;
  }
  .FS2_body_Cart_OrderConfirm table.userTable_01 > tbody > tr > td,
  .FS2_body_Cart_OrderConfirm table.userTable_02 > tbody > tr > td{
    padding:0 14px 14px; border-bottom:1px solid #ede8dc !important;
  }
  .FS2_body_Cart_OrderConfirm #FS2_OrderDecideButton_container{ max-width:none; }

  /* completion */
  .FS2_body_Cart_OrderComplete .ocHero__thanks{ max-width:280px; margin-bottom:16px; }
  .FS2_body_Cart_OrderComplete .ocHero__ttl{ font-size:21px; }
  .FS2_body_Cart_OrderComplete blockquote{ padding:20px 18px; font-size:13.5px; line-height:1.95; }
  .FS2_body_Cart_OrderComplete .ocContact{ padding:20px 16px; }
  .FS2_body_Cart_OrderComplete .ocContact__row{ gap:16px; flex-direction:column; }
  .FS2_body_Cart_OrderComplete .ocContact a{ font-size:18px; }
  .FS2_body_Cart_OrderComplete .ocCta{ flex-direction:column; }
  .FS2_body_Cart_OrderComplete .ocCta a{ min-width:0; width:100%; }

  #FS2_body_Cart .FS2_bottom_btn_center_1{ max-width:none; }
}


/* ============================================================
   23. SCREENS : password reminder  (#FS2_body_Password)
   The "forgot your password" form and the screens that follow
   it. They sit outside the cart like the screens in 17, and are
   in that section's :is() list, so what is left here is the
   three things this flow does not share with anything else:

     23-A  the column - two fields and a note, so the content is
           held to 640px and centred rather than run across the
           full width of the layout
     23-B  the numbered note above the form. The system prints it
           as a plain <ol>; it carries the only instructions on
           the screen, so it reads as a box rather than as body
           copy
     23-C  the field rows. The table is the same userTable_01 as
           the other forms, but with two fields there is no reason
           to keep the label in a narrow left column - it stacks,
           label over field
     23-D  the button label. The other screens of the flow will
           each need their line here once their markup is checked;
           until then their button keeps the shop's gif, which is
           why 23-D is scoped to the one screen and not to the id.
     23-F  PasswordReminder, the form the mail link opens: the
           same table markup again, but twice in one card and with
           a caption over each half.
     23-E  the two completion screens - the one after the form is
           sent (PasswordReminderEditComplete) and the one after
           the password is changed (PasswordReminderComplete).
           Same markup in both: a sentence, a login button, and a
           container class the rest of the file never sees
           (FS2_bottom_btn_info), so its geometry is written out
           here rather than shared.
   ============================================================ */

/* ---- 23-A. the column ------------------------------------- */
#FS2_body_Password .system_content > ol,
#FS2_body_Password .system_content > form,
#FS2_body_Password .system_content > p:not(.pan){
  box-sizing:border-box; max-width:640px; margin-left:auto; margin-right:auto;
}
#FS2_body_Password .error_content{ max-width:640px; margin-left:auto; margin-right:auto; }
#FS2_body_Password h2.pageTitle{
  border-bottom:1px solid var(--hh-line); margin:0 0 26px;
}

/* ---- 23-B. the numbered note ------------------------------ */
#FS2_body_Password .system_content > ol{
  margin:0 auto 28px; padding:22px 26px 22px 24px;
  border:1px solid var(--hh-gold-rail); border-radius:4px;
  background:#faf6ea; list-style:none; counter-reset:hhPwStep;
}
#FS2_body_Password .system_content > ol > li{
  position:relative; margin:0 0 10px; padding:0 0 0 34px;
  list-style:none; color:var(--hh-dark); font-size:13px; line-height:1.8;
}
#FS2_body_Password .system_content > ol > li:last-child{ margin-bottom:0; }
#FS2_body_Password .system_content > ol > li::before{
  counter-increment:hhPwStep; content:counter(hhPwStep);
  position:absolute; top:3px; left:0;
  width:22px; height:22px; line-height:22px;
  border-radius:50%; background:var(--hh-gold);
  color:#fff; font-size:12px; font-weight:700; text-align:center;
}

/* ---- 23-C. the field rows --------------------------------- */
#FS2_body_Password .inputTableArea{
  margin:0; padding:26px 26px 6px; border:none;
  background:var(--hh-bg); border-radius:4px; overflow:hidden;
}
#FS2_body_Password table.userTable_01,
#FS2_body_Password table.userTable_01 tbody,
#FS2_body_Password table.userTable_01 tr{
  display:block; width:100%; margin:0; padding:0;
  border:none; background:none;
}
#FS2_body_Password table.userTable_01 tr{ margin-bottom:20px; }
#FS2_body_Password table.userTable_01 th{
  display:inline-block; width:auto; margin:0; padding:0;
  border:none; background:none; vertical-align:middle;
  text-align:left; white-space:normal;
  color:var(--hh-dark); font-size:14px; font-weight:500; line-height:1.6;
}
#FS2_body_Password table.userTable_01 th[width="24"]{ margin-left:8px; }
#FS2_body_Password table.userTable_01 td{
  display:block; width:100%; margin:8px 0 0; padding:0;
  border:none; background:none; text-align:left;
}
#FS2_body_Password table.userTable_01 input[type="text"],
#FS2_body_Password table.userTable_01 input[type="password"]{
  width:100%; max-width:420px;
}

/* ---- 23-D. button label ----------------------------------- */
/* "\9001\4FE1\3059\308B" = send */
#FS2_body_Password.FS2_body_Password_PasswordReminderEdit .FS2_bottom_btn_center_1::after{
  content:"\9001\4FE1\3059\308B";
}

/* ---- 23-E. PasswordReminderEditComplete ------------------- */
/* the sent-confirmation. The two sentences are bare <p> with a
   <br> between them and the form; the layout is theirs alone, so
   it is set here rather than in 23-A. */
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > p:not(.pan){
  text-align:center;
}
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > p:has(strong){
  margin:0 auto 14px; font-size:17px; line-height:1.7; color:var(--hh-dark);
}
/* the mark. A gold ring on white with the tick drawn into it in
   one stroke: the tick is a box with two of its borders showing,
   turned so the pair reads as a check, and the animation grows
   the short arm and then the long one, which is the same order a
   hand draws it in. Geometry, for anyone retuning it: the box is
   16x32 with border-right and border-top, transform-origin at its
   top left corner, so after scaleX(-1) rotate(135deg) the corner
   sits at the pen-down point and the shape runs 34px wide and
   23px tall - hence the -17px shift to centre it in the ring. */
/* padding, not a margin on the ring below: the ring's top margin
   would collapse through this paragraph, moving the ring 18px up
   from where the tick is positioned and leaving the tick low. */
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > p:has(strong){
  position:relative; padding-top:18px;
}
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > p:has(strong)::before{
  content:""; display:block; box-sizing:border-box;
  width:76px; height:76px; margin:0 auto 24px;
  border:2px solid var(--hh-gold); border-radius:50%;
  background:#fff;
  animation:hhPwRing .42s cubic-bezier(.2,.8,.3,1.15) both;
}
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > p:has(strong)::after{
  content:""; position:absolute; top:56px; left:50%;
  width:0; height:0; box-sizing:border-box;
  border-right:3px solid var(--hh-gold);
  border-top:3px solid var(--hh-gold);
  transform-origin:left top;
  transform:translate(-17px,1px) scaleX(-1) rotate(135deg);
  animation:hhPwCheck .5s ease-out .3s both;
}
@keyframes hhPwRing{
  0%{ transform:scale(.72); opacity:0; }
  55%{ opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes hhPwCheck{
  0%{ width:0; height:0; }
  40%{ width:16px; height:0; }
  100%{ width:16px; height:32px; }
}
/* a still tick for anyone who asked the system not to animate */
@media (prefers-reduced-motion:reduce){
  #FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > p:has(strong)::before,
  #FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > p:has(strong)::after{
    animation:none;
  }
  #FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > p:has(strong)::after{
    width:16px; height:32px;
  }
}
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > p:has(strong) + p{
  margin:0 auto; font-size:13px; line-height:2; color:#6b6350;
}
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .system_content > br{ display:none; }
/* PasswordReminderComplete prints an empty <p> after the sentence */
#FS2_body_Password .system_content > p:empty{ display:none; }

/* the button. "\30ED\30B0\30A4\30F3" = log in */
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .FS2_bottom_btn_info{
  position:relative; box-sizing:border-box;
  max-width:420px; height:58px; line-height:58px;
  margin:36px auto 0; padding:0;
  background:var(--hh-pink); border-radius:4px; text-align:center;
  color:#fff; font-size:15px; font-weight:700; letter-spacing:.08em;
  transition:background .2s;
}
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .FS2_bottom_btn_info::after{
  content:"\30ED\30B0\30A4\30F3";
}
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .FS2_bottom_btn_info:hover{ background:#d90f3f; }
#FS2_body_Password:is(.FS2_body_Password_PasswordReminderEditComplete,.FS2_body_Password_PasswordReminderComplete) .FS2_bottom_btn_info input[type="image"]{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}

/* ---- 23-F. PasswordReminder ------------------------------- */
/* the screen the link in the mail opens: two userTable_01 in one
   inputTableArea, each with a <caption> standing in for a heading.
   23-C makes the table a block, and a table-caption inside a block
   box has no table to size against - it collapses to the width of
   one character. Here the caption is a block; 17-A's gold rule and
   spacing carry over unchanged. */
/* !important, unusually, because 17-A's caption rule cannot be
   outranked from here: its :is() list carries a second id inside
   :has(#form[...]), so that rule scores two ids against this one. */
#FS2_body_Password table.userTable_01 > caption{
  display:block !important; box-sizing:border-box; width:auto;
  font-size:15px; line-height:1.7;
}
/* the two tables are separated by a bare <br> in the markup */
#FS2_body_Password .inputTableArea > br{ display:none; }
#FS2_body_Password .inputTableArea table.userTable_01 + table.userTable_01{
  margin-top:26px; padding-top:26px; border-top:1px solid #e8e3d7;
}
/* "\30D1\30B9\30EF\30FC\30C9\3092\5909\66F4\3059\308B" = change the password */
#FS2_body_Password.FS2_body_Password_PasswordReminder .FS2_bottom_btn_center_1::after{
  content:"\30D1\30B9\30EF\30FC\30C9\3092\5909\66F4\3059\308B";
}
/* the password rules are a jpg pasted in the lower comment */
/* !important for the same reason as the caption above: 17-A sets
   margin:56px 0 0 on this element from a two-id selector. */
#FS2_body_Password .FS2_lower_comment{
  max-width:640px; margin:28px auto 0 !important;
}
/* while the rules are still the pasted jpg, centre it */
#FS2_body_Password .FS2_lower_comment:has(> img){ text-align:center; }
#FS2_body_Password .FS2_lower_comment img{ max-width:100%; height:auto; }

/* ---- 23-G. the password rules, as html --------------------- */
/* replaces pw-info.jpg in the lower comment: same two facts, but
   selectable, searchable, readable on a phone and translatable.
   The symbols are a list rather than a table - they are a set,
   not rows and columns, and the old jpg's grid was only a way of
   fitting them into an image. */
#FS2_body_Password .hhPwRule{
  padding:0; font-size:13px; line-height:1.9; color:#5a5245; text-align:left;
}
#FS2_body_Password .hhPwRule p{ margin:0; }
#FS2_body_Password .hhPwRule strong{ color:var(--hh-dark); font-weight:700; }
#FS2_body_Password .hhPwRule__ttl{
  margin:18px 0 0 !important; padding:2px 0 2px 12px;
  border-left:3px solid var(--hh-gold);
  color:var(--hh-dark); font-size:13px; font-weight:700; letter-spacing:.06em;
}
#FS2_body_Password .hhPwRule__marks{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:12px 0 0; padding:0; list-style:none;
}
#FS2_body_Password .hhPwRule__marks li{
  box-sizing:border-box; min-width:30px; padding:5px 4px;
  border:1px solid var(--hh-line); border-radius:3px; background:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px; line-height:1.2; color:var(--hh-dark); text-align:center;
}
#FS2_body_Password .hhPwRule__note{
  margin:12px 0 0 !important; font-size:12px; color:#6b6350;
}


/* ============================================================
   24. MEMBER BENEFITS PANEL  (.hhMb)
   Replaces member_entry_01.png in the upper comment of the
   registration screen. Not scoped to a body id on purpose: the
   class is ours, it appears nowhere else, and the shop may want
   the same panel on the login screen later.
   The icons are drawn here rather than shipped as files - five
   line drawings in the site's gold with a pink accent, as data
   uris, so nothing has to be uploaded and they stay sharp at any
   zoom. To change a figure ("350 points"), edit the comment; the
   image no longer has to be redrawn.
   ============================================================ */
.hhMb{ text-align:left; }
.hhMb__ttl{
  margin:0 0 12px !important; padding:0;
  color:var(--hh-dark); font-size:17px; font-weight:700; letter-spacing:.06em;
}
.hhMb__lead{
  margin:0 !important; font-size:14px; line-height:1.9; color:#5a5245;
}
.hhMb__note{
  margin:4px 0 0 !important; font-size:12px; line-height:1.9; color:#6b6350;
}
.hhMb em{
  font-style:normal; font-weight:700; color:var(--hh-pink);
}
.hhMb__lead em{ font-size:16px; }
.hhMb__free{ color:var(--hh-pink); font-size:12px; font-weight:700; }
.hhMb__list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin:18px 0 0 !important; padding:0; list-style:none;
}
.hhMb__item{
  box-sizing:border-box; margin:0; padding:16px 12px 14px;
  border:1px solid var(--hh-gold-rail); border-radius:4px; background:#fff;
  font-size:12px; line-height:1.7; color:#5a5245; text-align:center;
}
.hhMb__item::before{
  content:""; display:block; width:58px; height:58px; margin:0 auto 12px;
  background-repeat:no-repeat; background-position:center;
  background-size:48px 48px;
}
.hhMb__item--point::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20fill='none'%20stroke='%238c7c3e'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='16'%20cy='16'%20r='11'/%3E%3Cpath%20d='M13.6%2010.6v10.8'/%3E%3Cpath%20d='M13.6%2010.6h3.6a3.3%203.3%200%200%201%200%206.6h-3.6'/%3E%3C/svg%3E"); }
.hhMb__item--coupon::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20fill='none'%20stroke='%238c7c3e'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2012.5V9.8a1.3%201.3%200%200%201%201.3-1.3h22.4a1.3%201.3%200%200%201%201.3%201.3v2.7a3.5%203.5%200%200%200%200%207v2.7a1.3%201.3%200%200%201-1.3%201.3H4.8a1.3%201.3%200%200%201-1.3-1.3v-2.7a3.5%203.5%200%200%200%200-7z'/%3E%3Cpath%20d='M11%2010.5v11'%20stroke-dasharray='2%202.6'/%3E%3Ccircle%20cx='20.5'%20cy='16'%20r='2.4'%20stroke='%23ff2456'/%3E%3C/svg%3E"); }
.hhMb__item--price::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20fill='none'%20stroke='%238c7c3e'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17.4%203.6H27a1.4%201.4%200%200%201%201.4%201.4v9.6a2%202%200%200%201-.6%201.4L16.2%2027.6a2%202%200%200%201-2.8%200L4.4%2018.6a2%202%200%200%201%200-2.8L16%204.2a2%202%200%200%201%201.4-.6z'/%3E%3Ccircle%20cx='22.6'%20cy='9.4'%20r='2'%20stroke='%23ff2456'/%3E%3C/svg%3E"); }
.hhMb__item--birthday::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20fill='none'%20stroke='%238c7c3e'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2019.5h20v7.5a1%201%200%200%201-1%201H7a1%201%200%200%201-1-1z'/%3E%3Cpath%20d='M6%2019.5c1.7%200%201.7-2%203.3-2s1.7%202%203.4%202%201.7-2%203.3-2%201.7%202%203.3%202%201.7-2%203.4-2%201.6%202%203.3%202'/%3E%3Cpath%20d='M16%2012v5'/%3E%3Cpath%20d='M16%208.2c1.4%201.2%202%202%202%202.8a2%202%200%200%201-4%200c0-.8.6-1.6%202-2.8z'%20stroke='%23ff2456'/%3E%3C/svg%3E"); }
.hhMb__item--stamp::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20fill='none'%20stroke='%238c7c3e'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7.5%2010.5h17l-1.4%2015.2a1.8%201.8%200%200%201-1.8%201.6H10.7a1.8%201.8%200%200%201-1.8-1.6z'/%3E%3Cpath%20d='M11.8%2013V9.2a4.2%204.2%200%200%201%208.4%200V13'/%3E%3Cpath%20d='M16%2017.6v5.2M13.4%2020.2h5.2'%20stroke='%23ff2456'/%3E%3C/svg%3E"); }