@charset "utf-8";
/* ==========================================================================
   rak - PC site
   Faithful rebuild of 見本.pdf (a single 1366 x 14046 comp).

   Structure
   ---------
   The comp is exactly eleven horizontal bands, and bg_001..bg_011 are those
   bands sliced out at 2x (2732px wide). So each band becomes one <section>
   whose background is a full-bleed <img> - that image alone establishes the
   section's height, and every piece of content sits on top of it, positioned
   as a percentage of the section.

   Because both the position and the width of every overlay are percentages,
   the page reproduces the comp's proportions at any viewport width and the
   backgrounds always span the full window (no letterboxing, no side gutters).
   Geometry lives in layout.css, which is generated from the comp.
   ========================================================================== */

:root {
  --design-w: 1366;          /* comp width, the reference for every % below */
  --ink: #231815;            /* Japanese standard black, used for body copy */
  --beige: #dacfc4;          /* TESTIMONIALS band */
  --mauve: #926d7a;          /* VOICE badge */
  --lemon: #ffff66;          /* VOICE label / accent rules */
  --burger-w: 4.61vw;        /* 63 / 1366 - longer than the comp's 44, twice asked for */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  font-feature-settings: "palt" 1;
  line-height: 1.75;
  overflow-x: hidden;
}

/* ------------------------------------------------- picture handling
   Friction against casually saving the artwork: no drag-to-desktop, no iOS
   long-press "save image" sheet, no selection handle on a picture. The right-
   click and drag events are cancelled in js/main.js as well.

   This is deterrence, not protection - see the note in README. The text layer
   is deliberately left selectable; only pictures are locked down. */
img {
  border: 0;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
a { color: inherit; text-decoration: none; }

.skip {
  position: absolute; left: -9999px; top: 0;
  z-index: 200; padding: .6em 1.2em; background: #fff; color: #000;
}
.skip:focus { left: 0; }

/* All headings and body copy in this comp are baked into the artwork, so the
   document keeps one real <h1> off-screen for search engines and screen
   readers; the visible wording lives in each image's alt text. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- sections */
.page { display: block; }

/* A section title is an <h2> wrapping its badge - the heading exists for the
   document outline, the geometry still comes from layout.css. */
.ov-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: 0; }

.sec {
  position: relative;
  display: block;
  overflow: hidden;          /* content_07_004 sits a little outside its band */
  line-height: 0;            /* kill the inline-image gap under the bg */
}

.sec__bg {
  display: block;
  width: 100%;
  height: auto;
}

/* Every overlay: position + width come from layout.css, aspect stays intact. */
.ov {
  position: absolute;
  display: block;
  height: auto;
}
a.ov { line-height: 0; }
a.ov .ov__img { display: block; width: 100%; height: auto; }

a.ov { transition: opacity .25s ease; }
a.ov:hover { opacity: .72; }
a.ov:focus-visible { outline: 2px solid var(--lemon); outline-offset: 3px; }

/* ------------------------------------------------------- hamburger header  */
.hdr { position: relative; z-index: 100; }

.burger {
  position: fixed;
  left: 7.32%;               /* 100 / 1366 */
  top: 4.83vw;               /* 66 / 1366 - keeps the comp's proportion       */
  z-index: 120;
  width: var(--burger-w);
  height: calc(var(--burger-w) * 0.30);
  min-width: 43px; min-height: 13px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
/* The comp draws its ≡ marker light on the black bands and dark on the white /
   beige ones. main.js mirrors that by flagging the band under the button.
   (Deliberately not mix-blend-mode / backdrop-filter: on a 14,000px page of
   large imagery those force the whole document to recomposite on every scroll
   frame, which visibly janks the scroll.) */
.burger span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: #fff;
  transition: transform .38s ease, opacity .28s ease, background-color .3s ease;
}
.burger[data-tone="light"] span { background: #1a1a1a; }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; margin-top: -1px; }
.burger span:nth-child(3) { bottom: 0; }

/* Open state becomes a close (X) mark. The strokes stay white and keep the
   difference blend so the mark reads on the black hero and on the light bands. */
.burger[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: rotate(28deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { bottom: auto; top: 50%; transform: rotate(-28deg); }

.gnav {
  position: fixed;
  left: 7.39%;               /* panel x = 101 / 1366 */
  top: 8.2vw;
  z-index: 110;
  width: 13.1%;              /* panel w = 179 / 1366 - the two longest labels
                                overflow it, exactly as they do in the comp   */
  padding: 1.55vw 0 1.55vw 1.7vw;
  background: rgba(255, 255, 255, .42);
  line-height: 1.75;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-14px);
  transition: opacity .34s ease, transform .34s ease, visibility .34s;
}
.gnav::before {              /* the white rule down the left of the panel */
  content: "";
  position: absolute; left: .5vw; top: 1.9vw; bottom: 1.9vw;
  width: .22vw; min-width: 2px;
  background: #fff;
}
.gnav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.gnav ul { margin: 0; padding: 0; list-style: none; }
.gnav li + li { margin-top: 1.76vw; }      /* 52px pitch at 1366, as in the comp */
.gnav a {
  display: block;
  font-size: clamp(12px, 1.17vw, 22px);    /* 16 / 1366 */
  font-weight: 600;
  letter-spacing: .06em;
  color: #111;
  white-space: nowrap;
}
.gnav a {
  /* inline-block so the rule hugs the label rather than running the panel's
     width - the two longest labels still overflow the panel, as in the comp */
  display: inline-block;
  border-bottom: 1px solid transparent;   /* reserved, so hover shifts nothing */
  transition: opacity .2s ease, border-color .2s ease;
}
.gnav a:hover { opacity: .55; border-bottom-color: currentColor; }

/* Click-catcher only - the comp shows the drawer over undimmed artwork. */
.gnav__veil { position: fixed; inset: 0; z-index: 105; background: transparent; }

/* --------------------------------------------------- VOICE (rebuilt in CSS)
   content_06_004 - content_06_007 are not present in the supplied asset set,
   so the four testimonial banners are reconstructed here from the comp:
   a mauve hexagon badge plus a white double-pointed banner. Geometry (left /
   top / width / height / clip-path) is generated into layout.css.            */
.voices { position: absolute; inset: 0; line-height: 1.75; }

.voice { margin: 0; }

.voice__badge {
  position: absolute;
  display: grid;
  place-content: center;
  background: var(--mauve);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  text-align: center;
  color: #fff;
  line-height: 1.1;
}
.voice__badge span {
  display: block;
  font-size: clamp(7px, .66vw, 12px);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--lemon);
}
.voice__badge b {
  display: block;
  font-size: clamp(16px, 2.05vw, 38px);
  font-weight: 500;
}

.voice__bubble {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  background: #fff;
}
.voice__bubble p {
  margin: 0;
  padding-left: 4.3%;
  font-size: clamp(10px, 1.245vw, 23px);   /* 17 / 1366 */
  line-height: 1.98;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
.voice--2 .voice__bubble p,
.voice--4 .voice__bubble p { padding-left: 5.6%; }


/* ------------------------------------------------------------------ motion
   No scroll-behavior:smooth - its duration grows with distance and this page is
   ~13,700px tall. js/main.js animates anchor jumps over a fixed 620ms instead;
   without JS the anchors still work, they just jump. */
@media (prefers-reduced-motion: reduce) {
  .gnav, .gnav__veil, .burger span, a.ov { transition: none; }
}

/* Guard: if the window gets narrower than the comp the layout still holds,
   because everything is proportional - only the type in the CSS-built parts
   needs a floor, which the clamp() minimums above provide. */

/* ==========================================================================
   Mobile  (rak_LP_mbile.pdf - a 393 x 10391 comp)
   --------------------------------------------------------------------------
   The two comps are different designs drawn from different asset sets, so the
   page carries both and swaps them at the breakpoint: .pc-view above 768px,
   .sp-view below. The PC layout above is untouched by everything in here.

   Where the PC comp is eleven sliced bands, the mobile comp has a single
   background (bg_m_001.png, 783 x 20709 = 2x of the whole page). So the mobile
   layout is one stage: the background fills it and each asset is positioned as
   a percentage of it, which keeps the comp's proportions at any phone width.
   ========================================================================== */

.sp-view { display: none; }

@media (max-width: 767px) {
  .pc-view { display: none; }
  .sp-view { display: block; }
}

.m-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 393 / 10391;         /* the comp's own proportions */
  overflow: hidden;
  line-height: 0;
  background: #000;
}
.m-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;                  /* absorbs the 3px the export is out by */
}

.m-ov {
  position: absolute;
  display: block;
  height: auto;
}
a.m-ov { line-height: 0; -webkit-tap-highlight-color: rgba(255,255,255,.18); }
a.m-ov .m-ov__img { display: block; width: 100%; height: auto; }
a.m-ov:focus-visible { outline: 2px solid var(--lemon); outline-offset: 2px; }

/* The footer's nine menu labels are already drawn inside text129051.png, so
   these same nine assets are laid over them purely as tap targets - drawing
   them again would double-strike the text. */
.m-ov--hit { opacity: 0; }

.m-anchor {
  position: absolute;
  left: 0; width: 1px; height: 1px;
  scroll-margin-top: 0;
}

/* ------------------------------------------------------- mobile hamburger */
.m-hdr { position: relative; z-index: 100; }

.m-burger {
  position: fixed;
  left: 2.0%; top: 1.1%;
  z-index: 120;
  width: 44px; height: 44px;         /* comp draws ~18x6; padded to a tap target */
  padding: 0; border: 0; background: none; cursor: pointer;
}
.m-burger span {
  position: absolute; left: 11px; width: 23px; height: 2px;
  background: #fff;
  transition: transform .34s ease, opacity .24s ease, background-color .3s ease;
}
.m-burger span:nth-child(1) { top: 17px; }
.m-burger span:nth-child(2) { top: 22px; }
.m-burger span:nth-child(3) { top: 27px; }
.m-burger[data-tone="light"] span { background: #1a1a1a; }
.m-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(30deg); }
.m-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.m-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-30deg); }

.m-gnav {
  position: fixed;
  left: 3.5%; top: 58px;
  z-index: 110;
  width: 52%;
  padding: 18px 0 18px 20px;
  background: rgba(255, 255, 255, .92);
  line-height: 1.75;
  opacity: 0; visibility: hidden;
  transform: translateX(-12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.m-gnav::before {
  content: "";
  position: absolute; left: 7px; top: 22px; bottom: 22px;
  width: 3px; background: #111;
}
.m-gnav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.m-gnav ul { margin: 0; padding: 0; list-style: none; }
.m-gnav li + li { margin-top: 14px; }
.m-gnav a {
  /* inline-block so the hover rule hugs the label, as on the PC drawer */
  display: inline-block;
  font-size: 15px; font-weight: 600; letter-spacing: .05em;
  color: #111; white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.m-gnav a:hover { border-bottom-color: currentColor; }
.m-gnav__veil { position: fixed; inset: 0; z-index: 105; background: rgba(0, 0, 0, .3); }

@media (min-width: 768px) { .m-hdr { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .m-gnav, .m-burger span, .fix-shop, .fix-totop { transition: none; }
}

/* Clickable areas over a section band. The band image carries the artwork, so
   these carry only the link - kept transparent, with a hover tint so the target
   is still discoverable. */
.hit {
  position: absolute;
  display: block;
  background: rgba(255, 255, 255, 0);
  transition: background-color .25s ease;
}
.hit:hover { background: rgba(255, 255, 255, .16); }
.hit:focus-visible { outline: 2px solid var(--lemon); outline-offset: 2px; }

/* Footer menu. These are transparent boxes sitting on type, so the underline
   has to be drawn rather than inherited from the text - the box is sized to the
   glyphs' ink, which puts the rule just under them. Both footers are dark, so
   it is white; the box highlight is dropped here so the rule is the affordance. */
/* VIEW MORE bars. The button is part of the band artwork, so a transparent box
   over it has nothing to animate - the anchor holds a copy of the bar cut from
   the comp (build/cut_buttons.py) with its own background round it, laid exactly
   over the original. At rest it is pixel-on-pixel and invisible; on hover it
   rises out of that margin, which is wide enough that the copy underneath never
   shows. No colour change: the lift is the whole effect. */
.hit--lift { background: none; }
.hit--lift:hover { background: none; }
.hit--lift .lift__plate {
  position: absolute; left: 0; top: 0;
  display: block; width: 100%; height: auto;
}
.hit--lift .lift__img {
  position: relative;
  display: block; width: 100%; height: auto;
  transition: transform .28s cubic-bezier(.22, .8, .3, 1), filter .28s ease;
}
.hit--lift:hover .lift__img {
  transform: translateY(-4px);
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .38));
}
.hit--lift:focus-visible { outline: none; }
.hit--lift:focus-visible .lift__img { outline: 2px solid var(--lemon); outline-offset: 3px; }

.hit--link {
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.hit--link:hover { background: none; border-bottom-color: #fff; }

/* ------------------------------------------------- PC text layer
   The band images carry photos and shapes only; the type is real text in an
   inline SVG that shares the band's viewBox, so every baseline lands where the
   comp put it and scales with the section. */
.tl {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;          /* links are the .hit boxes above */
}
.tl text {
  pointer-events: auto;
  white-space: pre;
  /* body sets font-feature-settings:"palt" 1, which is right for hand-set copy
     but wrong here: every x in this layer is Illustrator's, measured with palt
     OFF and full-width punctuation on its full em. With palt inherited, （ and ）
     turned proportional and everything after them slid ~14px left - 円（税込）
     collapsed into 円(税込). Kerning is off for the same reason. */
  font-feature-settings: normal;
  font-kerning: none;
}

/* ==========================================================================
   Floating SHOP NOW and page-top, shared by both layouts.
   Lifted from befine.net/syncare/saran so the two products behave the same:
   the shop button is always on screen, the page-top pill fades in past 300px.
   ========================================================================== */
.fix-shop {
  position: fixed;
  right: 15px; bottom: 100px;
  z-index: 1200;
  display: block;
  width: 110px;
  transition: transform .25s ease, filter .25s ease;
}
.fix-shop img { display: block; width: 100%; height: auto; }
.fix-shop:hover { transform: translateY(-2px); }
.fix-shop:hover img { filter: brightness(1.15) drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }

.fix-totop {
  position: fixed;
  right: 17px; bottom: 55px;
  z-index: 1200;
  font-size: 14px; line-height: 1;
  color: #fff; text-decoration: none;
  background: rgba(15, 18, 24, .92);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
}
.fix-totop.show { opacity: 1; visibility: visible; transform: none; }
.fix-totop:hover { background: rgba(0, 0, 0, .96); box-shadow: 0 3px 12px rgba(0, 0, 0, .35); }
.fix-shop:focus-visible,
.fix-totop:focus-visible { outline: 2px solid var(--lemon); outline-offset: 3px; }

@media (max-width: 900px) {
  .fix-shop { width: 130px; bottom: 66px; }
  .fix-totop { bottom: 24px; font-size: 13px; right: 17px; padding: 7px 13px; }
}