/* ============================================================
   footer-legacy-embed.css
   Additive stylesheet loaded ONLY by footer/footer.html and
   footer/sp_footer.html (via <link> tags inside those files).
   Does not touch or replace any existing stylesheet.

   Source: scoped build of scss/component/_footer.scss,
   scss/component/_page-top.scss + scss/abstract/_root.scss only
   (excludes abstract/base and the reset-old-site partials, which
   set global html/body rules that would affect every page).
   rem units converted to px (10px = 1rem, matching the
   renewal2026 --font-size-root convention) since this file
   intentionally does not set html{font-size} globally.
   ============================================================ */

:root {
  --font-root: 'Noto Sans JP', sans-serif;
  --font-noto-serif: 'Noto Serif JP', serif;
  --font-open-sans: 'Open Sans', sans-serif;
  --font-sort-mill: "Sorts Mill Goudy", serif;
  --font-zen-old-mincho: "Zen Old Mincho", serif;
  --line-height: 1.3;
  --font-weight-root: 400;
  --font-weight-semibold: 600;
  --font-size-root: 10px;
  --font-size: 16px;
  --font-size-h1: 30px;
  --font-size-h2: 26px;
  --font-size-h3: 22px;
  --font-size-h4: 15px;
  --font-size-h5: 14px;
  --font-size-body: 14px;
  --font-size-small: 12px;
  --color-primary: #2567AB;
  --color-link: #333;
  --color-link-hover: #2567AB;
  --color-highlight: #A50319;
  --color-grey: #ccc;
  --color-white: #fff;
  --color-black: #000;
  --bg-footer: #f8f8f8;
  --bg-root: #FAFAFA;
  --bg-hover: #2567AB;
  --color-root: #2C2C2C;
  --color-hover: #2567AB;
  --color-semantic-gray: #D6D6D6;
  --color-star-filled: var(--color-highlight);
  --color-star-empty: #D6D6D6;
  --header-offset: 54px;
  --browser-sidebar: 20px;
}

@media only screen and (min-width: 768px) {
  :root {
    --font-size-h1: 40px;
    --font-size-h2: 30px;
    --font-size-h3: 24px;
    --font-size-h4: 16px;
  }
}

@media only screen and (min-width: 1024px) {
  :root {
    --header-offset: 112px;
  }
}

.c-footer {
  padding-top: 80px;
}

.c-footer .l-default__inner {
  padding-left: 16px;
  padding-right: 16px;
}

.c-footer-bnr {
  margin-bottom: 80px;
}

.c-footer-bnr__link {
  display: block;
  text-decoration: none;
  line-height: 0;
  transition: opacity 0.3s ease;
}

.c-footer-bnr__link:hover {
  opacity: 0.7;
}

.c-footer-bnr__link img {
  width: 100%;
  object-fit: cover;
}

.c-footer-bnr__link--full {
  margin-bottom: 30px;
}

.c-footer-bnr__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.c-footer-support {
  padding: 36px 0px 44px;
  border-top: 1px solid #D6D6D6;
}

.c-footer-support__title {
  font-size: 24px;
  color: #666666;
  margin-bottom: 30px;
}

.c-footer-support__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.c-footer-support__nav a {
  font-size: 14px;
  color: var(--color-root);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-footer-support__nav a:hover {
  color: var(--color-highlight);
}

.c-footer-support-inquiry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px var(--color-highlight) solid;
  background-color: var(--color-white);
}

.c-footer-support-inquiry__text {
  font-size: 12px;
  color: #666666;
}

.c-footer-support-inquiry__title {
  font-size: 14px;
  color: var(--color-root);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-footer-support-inquiry__title:hover {
  opacity: 0.7;
}

.c-footer-support-inquiry__link {
  color: #666666;
  transition: color 0.3s ease;
}

.c-footer-support-inquiry__link:hover {
  color: var(--color-highlight);
}

.c-footer-main {
  position: relative;
  background-color: var(--color-root);
  padding: 64px 0px;
}

.c-footer-logo {
  text-align: center;
  margin: 0 auto 50px;
}

.c-footer-nav {
  color: var(--color-white);
}

.c-footer-nav a {
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-footer-nav a:hover {
  opacity: 0.7;
}

.c-footer-nav__item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.c-footer-nav__item--guide {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.c-footer-nav__item--guide .c-footer-nav__list {
  padding-left: 0;
  font-size: 12px;
}

.c-footer-nav__title {
  display: block;
  font-size: 16px;
  min-width: 70px;
  color: var(--color-white);
}

.c-footer-nav__title--small {
  font-size: 14px;
}

.c-footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
}

.c-footer-nav__list-guide,
.c-footer-nav__list--small {
  font-size: 12px;
}

.c-footer-nav .only-pc {
  display: none;
}

.c-footer-contact-box {
  background-color: var(--color-white);
  padding: 4px;
  margin-bottom: 30px;
}

.c-footer-contact__wrapper {
  border: 1px solid var(--color-highlight);
  padding: 16px;
  text-align: center;
}

.c-footer-contact-title {
  font-size: 24px;
  color: var(--color-highlight);
  margin-bottom: 16px;
}

.c-footer-contact-label {
  font-size: 14px;
  margin-bottom: 4px;
}

.c-footer-contact-info {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
}

.c-footer-contact-phone {
  display: inline-block;
  font-size: 16px;
  color: var(--color-root);
  text-decoration: none;
}

.c-footer-contact-hours {
  display: inline-block;
  font-size: 12px;
  color: var(--color-root);
}

.c-footer-sns-title {
  text-align: center;
  font-size: 12px;
  color: var(--color-white);
  margin-bottom: 8px;
}

.c-footer-sns-icons {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.c-footer-sns-icons a {
  display: inline-block;
  width: 30px;
  height: 30px;
}

.c-footer-sns-icons a.sns-x {
  width: 23px;
  height: auto;
  margin-top: 4px;
}

.c-footer-sns-icons a img {
  width: 100%;
  height: 100%;
}

.c-footer-sns-icon-text {
  text-align: center;
  font-size: 10px;
  color: var(--color-white);
}

.c-footer-copyright {
  text-align: center;
  color: var(--color-white);
  font-size: 12px;
  margin-top: 40px;
}

@media only screen and (min-width: 640px) {
  .c-footer-support-inquiry__title {
    font-size: 16px;
  }
}

@media only screen and (min-width: 768px) {
  .c-footer-bnr__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
}

@media only screen and (min-width: 1024px) {
  .c-footer {
    padding-top: 120px;
  }

  .c-footer-bnr {
    margin-bottom: 120px;
  }

  .c-footer-support {
    padding: 40px 0px;
  }

  .c-footer-support__wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
  }

  .c-footer-support__content {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .c-footer-support__title {
    margin-bottom: 0;
  }

  .c-footer-support__nav {
    column-gap: 20px;
    row-gap: 10px;
    margin-bottom: 0;
  }

  .c-footer-support-inquiry {
    min-width: 350px;
  }

  .c-footer-top {
    display: flex;
    justify-content: space-between;
    gap: 4%;
  }

  .c-footer-logo {
    min-width: 200px;
    margin-bottom: 0px;
  }

  .c-footer-content {
    display: flex;
    justify-content: space-between;
    gap: 3%;
    width: 100%;
  }

  .c-footer-nav {
    display: flex;
    justify-content: space-between;
    gap: 2%;
    width: 100%;
  }

  .c-footer-nav__item {
    display: block;
    width: 33.3333333333%;
    margin-bottom: 0;
  }

  .c-footer-nav__list {
    flex-direction: column;
    gap: 8px;
    padding-left: 24px;
  }

  .c-footer-nav__title {
    margin-bottom: 20px;
  }

  .c-footer-nav__title--small {
    margin-top: 40px;
  }

  .c-footer-nav .only-sp {
    display: none;
  }

  .c-footer-nav .only-pc {
    display: block;
  }

  .c-footer-contact-box {
    margin-bottom: 25px;
    min-width: 235px;
  }

  .c-footer-contact__wrapper {
    text-align: left;
    padding: 8px;
  }

  .c-footer-contact-title {
    margin-bottom: 8px;
  }

  .c-footer-contact-label {
    margin-bottom: 4px;
  }

  .c-footer-contact-info {
    justify-content: flex-start;
  }

  .c-footer-sns-title {
    font-size: 14px;
    text-align: left;
  }

  .c-footer-sns-icons {
    gap: 16px;
  }

  .c-footer-copyright {
    margin-top: 30px;
    font-size: 14px;
  }
}

@media only screen and (min-width: 1280px) {

  .c-footer-support__content,
  .c-footer-support__nav {
    gap: 35px;
  }

  .c-footer-top {
    gap: 10%;
  }

  .c-footer-nav {
    gap: 4%;
  }
}

#contents {
  position: relative;
}

.c-page-top {
  position: fixed;
  bottom: calc(20px + var(--detail-bar-offset));
  right: 20px;
  z-index: 1000;
  display: block;
  width: 50px !important;
  height: 50px !important;
  text-align: center;
  background: #fff url("/img/renewal2026/common/icon-arrow-up.svg") no-repeat center center/19px;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

.c-page-top img {
  vertical-align: middle;
}

.c-page-top.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (hover: hover) {
  .c-page-top:hover {
    opacity: 0.7;
  }
}

/* ============================================================
   Legacy include integration additions
   (footer/footer.html, footer/sp_footer.html only)
   ============================================================ */

/* The renewal2026 footer is authored for border-box. css/review/common.css
   (口コミ機能ページ) ships `#footer *, #footer *::before, #footer *::after {
   box-sizing: content-box; }` to protect the legacy pc_common header/footer,
   and `#footer *` (0,1,0,0) outweighs a plain `.c-footer *` (0,0,1,0), so
   every padded box in this footer would render content-box and overflow
   slightly. Scope our rule under `#footer` too (the wrapper id every
   consumer of this file uses) so `#footer .c-footer *` (0,1,1,0) wins,
   without touching any non-.c-footer legacy markup inside #footer. */
#footer .c-footer,
#footer .c-footer *,
#footer .c-footer *::before,
#footer .c-footer *::after {
  box-sizing: border-box;
}

/* css/sp_common.css and css/pc_common.css each set a site-wide
   `p, li, h1, h2, h3 { font-size: ... }` rule (20px on SP, 14px on PC).
   .c-footer-nav__list (and its --small/-guide variants) only sets
   font-size on the <ul>; the bare <li> inside it never gets an explicit
   font-size of its own in the component build above, so it falls back to
   inheriting from the <ul> - except that legacy rule targets <li>
   directly, and a direct match always wins over an inherited value
   regardless of specificity. The <a> inside then inherits that wrong
   size from its <li> parent. Scoped to .c-footer-nav so it doesn't
   affect the <p> titles elsewhere in the footer, which already set
   their own font-size directly and aren't affected by this. */
.c-footer-nav li {
  font-size: inherit;
}

#footer {
  text-align: left;
  background-color: transparent;
}

.c-footer {
  font-family: var(--font-root);
}

/* abstract/_base.scss sets -webkit-text-size-adjust: none on body, excluded
   from this scoped build as a global rule (see file header). Without it,
   Android Chrome's text autosizer inflates font sizes inside this footer
   on legacy pages that have no (or a fixed-width) viewport meta tag, since
   those get treated as "wide viewport" pages. Re-apply it scoped to just
   the injected footer so its text renders at the sizes set below instead
   of being boosted for readability. */
.footer-legacy-wrapper {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* component/_footer.scss only sets padding on .c-footer .l-default__inner;
   the max-width + centering comes from the general .l-default__inner rule
   in layout/_default.scss (via the inner-responsive mixin), which is
   intentionally excluded from this scoped build (it also sets
   body{background-color:...}, a global rule). Without this, the footer's
   inner content stretches to the full page width instead of being
   centered/capped like the rest of the renewal2026 layout. */
.c-footer .l-default__inner {
  width: 100%;
  max-width: 1232px;
  margin-left: auto;
  margin-right: auto;
}

/* component/_page-top.scss reads var(--detail-bar-offset) with no fallback;
   that variable is only ever set by script-legacy.js when a .js-detail-bar
   element exists (item detail pages), so on header/footer-only pages it's
   never defined and the whole bottom: calc(...) would be invalid. Give it
   a default here so the page-top button is positioned correctly. */
:root {
  --detail-bar-offset: 0px;
}


/* ------------------------------------------------------------
   Legacy-page viewport compatibility.

   Restores the `.viewport-* { width:390px; scale-up }` compensation that
   reset-old-site/_reset-common.scss applies to #footer-renewal2026 and
   header-legacy-embed.css applies to .site-top-area__wrapper. The scoped
   build originally dropped it on the assumption that c-footer is "fully
   fluid from ~320px up" - it isn't in the 640-1023px band: that width is
   above the SP design (~390px) but below the c-footer tablet/desktop
   breakpoints (768 / 1024), so the flex-wrap footer-nav / support-nav
   never wrap and the phone-order + inquiry boxes stretch edge to edge.
   (This is the "footer looks broken on legacy / dynamic pages" report -
   e.g. /shop/index.html and the Thymeleaf *_sp pages, which all ship a
   fixed-width viewport meta: `<meta name="viewport" content="width=750">`.)

   js/renewal2026/script-legacy.js detectViewport() reads that meta once at
   load and tags <body> with .viewport-750 / -980 / -720 / -default. Render
   .c-footer at the 390px SP canvas it was designed for and scale it back up
   to fill the real canvas, exactly like the header.

   `zoom` (not `transform: scale`) is used on purpose:
   - zoom contributes to layout size, so the last element on the page gets
     no scaled-overflow gap / clipping.
   - zoom does NOT establish a containing block for position:fixed
     descendants, so the #page-top button keeps anchoring to the viewport
     (the original concern behind dropping this rule).
   detectViewport() runs once, early, before js/attenir.js's modal code can
   rewrite the meta, so the body class - and therefore this rule - is stable.
   ------------------------------------------------------------ */
@media only screen and (max-width: 1023px) {

  .viewport-750 .footer-legacy-wrapper .c-footer,
  .viewport-980 .footer-legacy-wrapper .c-footer,
  .viewport-720 .footer-legacy-wrapper .c-footer,
  .viewport-default .footer-legacy-wrapper .c-footer {
    width: 390px;
  }

  /* zoom factor = host canvas width / 390 */
  .viewport-750 .footer-legacy-wrapper .c-footer {
    zoom: 1.9231;
  }

  .viewport-980 .footer-legacy-wrapper .c-footer {
    zoom: 2.5128;
  }

  .viewport-720 .footer-legacy-wrapper .c-footer {
    zoom: 1.8462;
  }

  .viewport-default .footer-legacy-wrapper .c-footer {
    zoom: 2.5128;
  }
}

/* ------------------------------------------------------------
   sp_footer.html is only ever loaded in the isSP branch of the
   host page's header/footer loader. The legacy SP pages that use
   css/sp_common_forpc.css ship no width=device-width viewport, so
   they render on a fixed ~980px canvas and `@media (min-width:
   768px)` matches - pushing the footer banner list to 4-across
   instead of the intended 2x2. footer.html (PC) genuinely wants
   4-across at >=768px, so scope the mobile grid to the SP footer
   only via the .c-footer--sp hook.
   ------------------------------------------------------------ */
.c-footer--sp .c-footer-bnr__list {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}