:root{
  --stripe-rgb: var(--sky-rgb);

  --serif: ui-serif, Georgia, "Times New Roman", "Noto Serif JP", serif;

  /* Kids room palette (pastel wall + paper) */
  --bg: #fbf6ee;            /* soft sky wall */
  --paper: #ffffff;         /* clean paper */
  --paper-warm: #fff3e6;    /* blush panel */
  --ink: #1f2937;           /* soft navy */
  --muted: rgba(31,41,55,.68);
  --line: rgba(31,41,55,.14);

  /* RGB helpers for background patterns */
  --ink-rgb: 31, 41, 55;
  --pink-rgb: 232, 93, 122;
  --sky-rgb: 90, 183, 255;
  --butter-rgb: 255, 209, 102;
  --mint-rgb: 99, 210, 192;
  --mustard-rgb: 242, 193, 78;

  --lavender-rgb: 184, 166, 255;
  --peach-rgb: 255, 179, 138;

  /* keep var names used across the theme */
  --red: #e85d7a;           /* raspberry */
  --green: #2fb7a0;         /* seafoam */
  --blue: #3b82f6;          /* cornflower */
  --gold: var(--mustard);
  --mustard:#f2c14e;        /* sunny mustard */
  /* Buttons: deep brown (requested) */
  --btn-primary: #4b2f24;
  --btn-primary-rgb: 75, 47, 36;

  /* playful pastel accents (kids room) */
  --pink: #e85d7a;
  --sky: #5ab7ff;
  --butter: #ffd166;
  --mint: #63d2c0;
  --lavender: #b8a6ff;
  --peach: #ffb38a;
  --berry: #b9375a;           --wine: #7a1f2b;
  --wine-rgb: 122, 31, 43;
/* deeper accent */
  --accent: var(--pink);

  --radius: 14px;
  --shadow: 0 14px 34px rgba(0,0,0,.10);
  --shadow-soft: 0 10px 22px rgba(0,0,0,.08);
  --wrap: 1100px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  color:var(--ink);
  background: var(--bg);
  /* Subtle paper grid (no pastel wallpaper) */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(var(--ink-rgb), .05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%);
  background-size: 24px 24px, auto;
  background-position: 0 0, 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  line-height: 1.75;
}

/* -------------------------
   Motion (scroll / load)
------------------------- */
body.is-loaded .reveal{
  opacity: 1;
  transform: var(--reveal-to, translateY(0));
  filter: var(--reveal-filter-to, blur(0));
}

.reveal{
  /* customizable per-element */
  --reveal-from: translateY(14px);
  --reveal-to: translateY(0);
  --reveal-filter-from: blur(0);
  --reveal-filter-to: blur(0);

  opacity: 0;
  transform: var(--reveal-from);
  filter: var(--reveal-filter-from);

  transition:
    opacity .70s ease,
    transform .70s cubic-bezier(.2,.75,.2,1),
    filter .70s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform, filter;
}

.reveal[data-delay="1"]{ --reveal-delay: .08s; }
.reveal[data-delay="2"]{ --reveal-delay: .16s; }
.reveal[data-delay="3"]{ --reveal-delay: .24s; }
.reveal[data-delay="4"]{ --reveal-delay: .32s; }
.reveal[data-delay="5"]{ --reveal-delay: .40s; }

.reveal.is-inview{
  opacity: 1;
  transform: var(--reveal-to);
  filter: var(--reveal-filter-to);
}

/* Variants */
.reveal--left   { --reveal-from: translateX(-18px); }
.reveal--right  { --reveal-from: translateX(18px); }
.reveal--down   { --reveal-from: translateY(-14px); }
.reveal--zoom   { --reveal-from: translateY(10px) scale(.96); }
.reveal--pop    { --reveal-from: translateY(12px) scale(.94) rotate(-.8deg); --reveal-to: translateY(0) rotate(0); }
.reveal--card   { --reveal-from: translateY(18px) scale(.98); --reveal-filter-from: blur(2px); }
.reveal--polaroid{
  --reveal-from: translateY(20px) rotate(-4deg) scale(.96);
  --reveal-to: translateY(0) rotate(-1deg) scale(1);
  --reveal-filter-from: blur(2px);
}

/* Extra micro-animations (after reveal) */
@keyframes ffk-icon-pop{
  0%{ transform: translateY(6px) scale(.90) rotate(-4deg); }
  55%{ transform: translateY(-1px) scale(1.10) rotate(3deg); }
  100%{ transform: translateY(0) scale(1) rotate(0); }
}

@keyframes ffk-tape-wiggle{
  0%{ transform: translateX(-50%) rotate(-3deg); }
  60%{ transform: translateX(-50%) rotate(2deg); }
  100%{ transform: translateX(-50%) rotate(-1deg); }
}

@keyframes ffk-soft-bounce{
  0%{ transform: translateY(0); }
  55%{ transform: translateY(-3px); }
  100%{ transform: translateY(0); }
}

/* Icon pops when cards come into view */
.promise-cards .card.reveal.is-inview h3 .icon{
  animation: ffk-icon-pop .60s cubic-bezier(.2,.8,.2,1) both;
}

/* Tape wiggles when polaroids come into view */
.polaroid.reveal.is-inview::after{
  animation: ffk-tape-wiggle .55s ease both;
}

/* Slight bounce on CTA (concept page) */
.page-hero .btn.reveal.is-inview{
  animation: ffk-soft-bounce .55s ease both;
}

@media (prefers-reduced-motion: reduce){
  body{ animation: none !important; }
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .promise-cards .card.reveal.is-inview h3 .icon,
  .polaroid.reveal.is-inview::after,
  .page-hero .btn.reveal.is-inview{
    animation: none !important;
  }
}

a{ color:inherit; }
img{ max-width:100%; height:auto; vertical-align:middle; border-radius: 14px; }

h1,h2,h3,.section-title,.page-title,.hero-title{
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  letter-spacing: .01em;
}

.wrap{ width:min(var(--wrap), 92vw); margin:0 auto; }
.narrow{ width:min(760px, 92vw); margin:0 auto; }

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(245,239,228,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.logo{
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wine);
  text-decoration: none;
}

.nav-list{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.nav-list a{ text-decoration:none; padding:9px 12px; border-radius: 999px; }

/* Playful header nav (v2)
   - sticker highlight behind
   - crayon underline that "draws" in
   - tiny sparkle burst on click
*/
.nav-list a{
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.nav-list a::before{
  content:"";
  position:absolute;
  inset: 1px 2px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)),
    rgba(var(--stripe-rgb), .10);
  border: 1px solid rgba(var(--stripe-rgb), .16);
  opacity: 0;
  transform: scaleX(.22) skewX(-10deg) rotate(-1deg);
  transform-origin: left;
  transition: opacity .18s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}
.nav-list a::after{ content:none; }

.nav-list a:hover::before{
  opacity: 1;
  transform: scaleX(1) skewX(-8deg) rotate(.4deg);
}
.nav-list a:hover{
  transform: translateY(-2px) rotate(-.9deg);
  box-shadow: 0 10px 18px rgba(31,41,55,.10);
}
.nav-list a:active{ transform: translateY(-1px) rotate(-.2deg) scale(.99); }

  35%{ filter: blur(.2px); }
  60%{ filter: blur(0); }
}

.nav-list a.nav-bounce{ animation: ffk-nav-bounce .52s cubic-bezier(.18,.9,.2,1) both; }
.nav-list a.nav-bounce::before{
  opacity: 1;
  background:
    radial-gradient(circle at 14% 35%, rgba(var(--mustard-rgb), .95) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 28%, rgba(var(--peach-rgb), .95) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 80%, rgba(var(--stripe-rgb), .92) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 78%, rgba(255,255,255,.85) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)),
    rgba(var(--stripe-rgb), .10);
  animation: ffk-nav-spark .52s ease both;
}
.nav-list a.nav-bounce::after{ transform: scaleX(1); animation: ffk-nav-draw .52s ease both; }

@keyframes ffk-nav-bounce{
  0%{ transform: translateY(0) rotate(0) scale(1); }
  28%{ transform: translateY(-4px) rotate(-1.4deg) scale(1.06); }
  58%{ transform: translateY(1px) rotate(.8deg) scale(.98); }
  100%{ transform: translateY(0) rotate(0) scale(1); }
}
@keyframes ffk-nav-spark{
  0%{ transform: scaleX(.35) skewX(-10deg) rotate(-2deg); opacity: 0; filter: blur(.6px); }
  45%{ opacity: 1; filter: blur(0); }
  100%{ transform: scaleX(1) skewX(-8deg) rotate(.4deg); opacity: 1; }
}
@keyframes ffk-nav-draw{
  0%{ transform: scaleX(.15); filter: blur(.2px); }
  55%{ transform: scaleX(1.05); filter: blur(0); }
  100%{ transform: scaleX(1); }
}

.nav-list li.current-menu-item > a,
.nav-list li.current_page_item > a{
  box-shadow: 0 10px 18px rgba(31,41,55,.12);
}
.nav-list li.current-menu-item > a::before,
.nav-list li.current_page_item > a::before{
  opacity: 1;
  transform: scaleX(1) skewX(-8deg) rotate(.4deg);
}
.nav-list li.current-menu-item > a::after,
.nav-list li.current_page_item > a::after{
  transform: scaleX(1);
}



.section{ padding: 56px 0; }

/* All sections share the same base background.
   To keep rhythm without "section-by-section" background changes,
   we use a consistent divider that applies equally everywhere. */
.section + .section{
  border-top: 1px solid rgba(17,36,48,0.08);
}

@media (max-width: 720px){
  .section{ padding: 44px 0; }
}

/* Callout section (if used): keep the page background consistent.
   Use an inner panel for emphasis instead of changing the whole section background. */
.section-businesscallout{ position: relative; background: transparent; }
.section-businesscallout .callout-panel,
.section-businesscallout .card.callout{
  color: rgba(255,255,255,0.92);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 12px, rgba(255,255,255,0.02) 12px 24px),
    linear-gradient(180deg, #173844, #112430);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px rgba(17,36,48,0.22);
}
.section-businesscallout .callout-panel .section-title,
.section-businesscallout .card.callout .section-title{ color: rgba(255,255,255,0.95); }
.section-businesscallout .callout-panel .kicker,
.section-businesscallout .card.callout .kicker{ color: rgba(255,255,255,0.8); }
.section-businesscallout .callout-panel .btn.primary,
.section-businesscallout .card.callout .btn.primary{
  background: linear-gradient(180deg, var(--mustard), #b58a2c);
  color: #112430;
  border-color: rgba(255,255,255,0.2);
}
.section-businesscallout .callout-panel .btn.primary:hover,
.section-businesscallout .card.callout .btn.primary:hover{ transform: translateY(-1px) scale(1.01); }

.section-title, .page-title{ margin:0 0 18px; font-size: 24px; }
.section-title{ position: relative; }
/* Generic page blocks */
.page-hero{ padding: 18px 0 6px; }
.page-title{ font-size: clamp(28px, 3.2vw, 40px); }
.lead{ font-size: 16px; color: var(--muted); line-height:1.9; max-width: 60ch; }
.grid-2{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items:stretch; }
.section-access .grid-2{ align-items:flex-start !important; } /* home access: align tops, keep natural heights */ /* home access: align tops, keep natural heights */
.section-access .grid-2 > *{ align-self:flex-start; }

.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.card{
  background:
    linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,.85)),
    repeating-linear-gradient(45deg, rgba(var(--ink-rgb), .04) 0 8px, transparent 8px 16px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 18px 32px rgba(31,42,58,.10);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 44px rgba(31,42,58,.14);
  border-color: rgba(0,0,0,.14);
}
.card h3{ margin:0 0 8px; font-size: 16px; }
.card p{ margin:0; color: var(--muted); line-height:1.8; }
.info-list{ margin: 0; padding:0; list-style:none; }
.info-list li{ padding: 10px 0; }
.info-k{ display:inline-block; min-width: 7.5em; color: var(--muted); }

@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; gap: 32px; }
  .cards{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){ body.page-access .grid-2{ gap: 44px; } }

.title-ribbon{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(var(--stripe-rgb), .10), rgba(var(--stripe-rgb), .04)),
    repeating-linear-gradient(90deg, rgba(var(--stripe-rgb), .22) 0 12px, rgba(255,255,255,.30) 12px 24px);
  border: 1px solid rgba(var(--stripe-rgb), .26);
}

/* stripe palette by page */
body.home{ --stripe-rgb: var(--sky-rgb); } /* ホーム */
body.post-type-archive-news, body.single-news{ --stripe-rgb: var(--butter-rgb); } /* 新入荷 */
body.page-concept, body.page-id-12{ --stripe-rgb: var(--pink-rgb); } /* お店について */
body.page-access{ --stripe-rgb: var(--mint-rgb); } /* アクセス */
body.page-business{ --stripe-rgb: var(--lavender-rgb); } /* 法人のお客さま */

/* Access detail spacing between address and map */



/* stripe helper classes (override per section) */
.stripe-pink{ --stripe-rgb: var(--pink-rgb); }
.stripe-mint{ --stripe-rgb: var(--mint-rgb); }
.stripe-butter{ --stripe-rgb: var(--butter-rgb); }
.stripe-sky{ --stripe-rgb: var(--sky-rgb); }
.stripe-lavender{ --stripe-rgb: var(--lavender-rgb); }

.stripe-red{ --stripe-rgb: 139,58,58; }
.stripe-green{ --stripe-rgb: 85,107,94; }
.stripe-blue{ --stripe-rgb: 43,58,85; }

.lead{ font-size: 16px; line-height: 1.9; margin:0 0 14px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  text-decoration:none;
  padding: 11px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.08)), var(--btn-primary);
  color:#fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 18px rgba(31,41,55,.14);
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{
  filter: saturate(1.02) brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(31,41,55,.16);
}
.btn:active{ transform: translateY(0); }

.btn-outline{
  background: rgba(255,255,255,.82);
  color: var(--btn-primary);
  border: 1px solid rgba(var(--btn-primary-rgb), .55);
  box-shadow: 0 8px 16px rgba(31,41,55,.10);
  text-shadow: none;
}
.btn-outline:hover{
  background: #fff;
  box-shadow: 0 10px 18px rgba(31,41,55,.12);
}

.hero{ padding: 28px 0 0; }
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items:center; position: relative; z-index: 2; }
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin:0 0 10px;
}

.hero-tagline{
  margin: 8px 0 14px;
  font-size: 14px;
  color: rgba(var(--ink-rgb), .78);
  letter-spacing: .06em;
}

.hero-kicker:before{
  content:"";
  width: 34px;
  height: 1px;
  background: rgba(var(--mustard-rgb), .55);
}
.hero-title{ margin:0 0 10px; font-size: 34px; line-height:1.25; }
.hero-sub{ margin:0 0 16px; line-height:1.9; }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-media .photo-frame{
  padding: 12px;
  background: rgba(251,247,239,.78);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 18px 28px rgba(0,0,0,.10);
}
.hero-media .photo-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: var(--radius);
}
.hero-media .hero-placeholder{
  height: 320px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(139,58,58,.10), rgba(85,107,94,.10));
  border: 1px dashed var(--line);
}


.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.card-news{ padding:0; overflow:hidden; }
.card-link{ display:block; text-decoration:none; }
.thumb img{ border-radius: 0; }
.card-body{ padding: 14px 16px 16px; }
.meta{ font-size: 12px; opacity:.7; }
.card-title{ margin:8px 0 8px; font-size: 16px; }
.card-excerpt{ margin:0; opacity:.85; line-height:1.7; }

.prose{ line-height:1.95; }
.table{ border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: rgba(255,255,255,.70); }
.table-row{ display:grid; grid-template-columns: 140px 1fr; gap:14px; padding: 12px 14px; border-top: 1px solid var(--line); }
.table-row:first-child{ border-top:0; }
.th{ font-weight: 700; color: rgba(43,43,43,.82); }
.td{ opacity: .85; line-height:1.8; }

.faq{ margin-top: 12px; }
.faq details{ background: rgba(255,255,255,.70); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.faq details + details{ margin-top: 10px; }
.faq summary{ cursor:pointer; font-weight:700; }
.faq p{ margin: 10px 0 0; opacity:.86; line-height:1.9; }
.single-title{ margin: 10px 0 14px; font-size: 28px; }
.single-thumb{ margin: 14px 0; }

.gallery-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}

.section-actions{ margin-top: 18px; }

.site-footer{
  padding: 38px 0 24px;
  border-top: 1px solid rgba(31,41,55,.10);

  /* Horizontal wood grain */
  background-color: #cfa36b;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.10)),
    repeating-linear-gradient(
      180deg,
      rgba(120,84,52,.18) 0px,
      rgba(120,84,52,.18) 6px,
      rgba(120,84,52,.06) 6px,
      rgba(120,84,52,.06) 16px
    ),
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 72% 65%, rgba(0,0,0,.10), rgba(0,0,0,0) 60%);
  background-blend-mode: overlay, normal, overlay, normal;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
}
.footer-title{ font-weight:700; margin-bottom:8px; }
.footer-text{ margin: 0 0 8px; opacity:.85; }
.footer-bottom{ padding-top: 12px; opacity:.7; }


@media (max-width: 720px){
  .site-footer{ padding: 26px 0 18px; }
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .footer-grid > div{
    background: rgba(255,255,255,.45);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px 14px;
  }
  .footer-title{ font-size: 15px; }
  .footer-text{ font-size: 14px; line-height: 1.85; }
  .footer-grid > div:nth-child(2){
    text-align: center;
  }
  .footer-grid .btn{
    width: 100%;
    max-width: 320px;
    margin-top: 6px;
  }
  .footer-bottom{
    text-align: center;
    padding-top: 10px;
  }
}

.scallop{ position: relative; }
.scallop::before{
  content:"";
  position:absolute;
  top:-18px; left:0; right:0;
  height:18px;
  background: radial-gradient(circle at 18px 18px, var(--bg) 18px, transparent 19px) repeat-x;
  background-size: 36px 18px;
}

@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}


/* hero photo (single exterior) */
.hero-media .photo-stack{
  position: relative;
  padding: 4px 0 0;
}
.hero-media .photo-frame--main{
  transform: none;
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 26px 60px rgba(0,0,0,.18);
  overflow: hidden;
}
.hero-media .photo-frame--main::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(circle at 40% 10%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(circle at 60% 90%, rgba(0,0,0,.22), transparent 65%);
  pointer-events: none;
}
.hero-media .hero-img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  animation: heroKenBurns 12s ease-in-out 1 both;
}

@keyframes heroKenBurns{
  from{ transform: scale(1.02); }
  to{ transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  .hero-media .hero-img{ animation: none; }
}

/* Decorative rules */
.section-title{ position: relative; display:inline-block; }
@media(max-width:720px){ }

/* Hero entrance micro-motion */
@keyframes heroPop{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }
.hero-copy{ animation: heroPop .8s ease-out both; }
.hero-media{ animation: heroPop 1s ease-out .08s both; }

/* Button shine */
.btn{ position:relative; overflow:hidden; }
.btn::after{ content:""; position:absolute; inset:-2px; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); opacity:0; transition: opacity .2s ease; }
.btn:hover::after{ opacity:1; animation: btn-shine .9s ease; }
@keyframes btn-shine{ from{ transform: translateX(-120%) skewX(-18deg);} to{ transform: translateX(120%) skewX(-18deg);} }


/* Hero stickers (plush) */
.hero{ position: relative; overflow: hidden; }

.hero-stickers{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
}

.hero-sticker{
  position:absolute;
  width: clamp(84px, 10vw, 140px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(20,16,12,.18);
  filter: saturate(1.05) contrast(1.02);
  opacity: .96;
  transform: translateY(0) rotate(var(--r, 0deg)) translateZ(0);
  transition: opacity .45s ease, filter .45s ease, transform .45s ease;
}

.hero-sticker.is-fading{
  opacity: 0;
  filter: blur(2px) saturate(1) contrast(1);
}

/* ---
  Scroll reveal stickers (edge only)
  - data-step="0": always visible
  - data-step="1" & "2": appear as the user scrolls down
--- */
.hero-sticker.is-hidden{
  opacity: 0;
  filter: blur(2px) saturate(1) contrast(1);
  transform: translateY(18px) rotate(var(--r, 0deg)) translateZ(0);
}

.hero-sticker.is-visible{
  opacity: .96;
  filter: saturate(1.05) contrast(1.02);
  transform: translateY(0) rotate(var(--r, 0deg)) translateZ(0);
}

.hero-sticker--a{ top: 14px; right: -6px; --r: 6deg; animation: floaty 6.5s ease-in-out infinite; }
.hero-sticker--b{ bottom: 24px; left: -6px; --r: -7deg; animation: floaty 7.2s ease-in-out infinite; }

/* new stickers (appear as you scroll) */
.hero-sticker--c{ bottom: 18px; right: -6px; --r: 8deg; }
.hero-sticker--d{ top: 22px; left: -6px; --r: -6deg; }

.hero-sticker--c.is-visible{ animation: floaty 7.8s ease-in-out .45s infinite; }
.hero-sticker--d.is-visible{ animation: floaty 8.4s ease-in-out .45s infinite; }

@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(var(--r, 0deg)); }
  50%{ transform: translateY(-10px) rotate(var(--r, 0deg)); }
}

@media (max-width: 900px){
  .hero-sticker--a{ top: 8px; right: -4px; }
  .hero-sticker--b{ bottom: 8px; left: -4px; }
  .hero-sticker--c{ bottom: 8px; right: -4px; }
  .hero-sticker--d{ top: 8px; left: -4px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-sticker,
  .hero-sticker--c.is-visible,
  .hero-sticker--d.is-visible{
    animation: none !important;
  }
}

/* =====================================
   Floating plush (front page only)
   - Stays on viewport edges until footer
   - Reveals more plush as you scroll
===================================== */

.floating-plush{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20; /* below header (z-index: 50) */
}

/*
  Single plush that swaps as you scroll:
  - Alternates Right → Left → Right ...
  - Equal scroll interval per image
*/
.floating-plush__single{
  position: absolute;
  top: clamp(140px, 22vh, 240px);
  width: clamp(96px, 10vw, 158px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  opacity: 0;
  filter: saturate(1.02) contrast(1.02);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.9,.2,1), filter .55s ease;
  transform: translate3d(var(--tx, 0), 18px, 0) rotate(var(--r, 0deg)) scale(.985);
  will-change: transform, opacity;
}

.floating-plush__single.is-right{ right: 18px; left: auto; --r: 6deg; --tx: 26px; }
.floating-plush__single.is-left{ left: 18px; right: auto; --r: -6deg; --tx: -26px; }

.floating-plush__single.is-visible{
  opacity: .98;
  filter: saturate(1.08) contrast(1.04);
  transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1);
  animation: plushFloat 7.6s ease-in-out infinite;
}

@keyframes plushFloat{
  0%,100%{ transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1); }
  50%{ transform: translate3d(0, -10px, 0) rotate(var(--r, 0deg)) scale(1); }
}

/* Scroll markers for plush swap (doesn't affect layout) */
.plush-step{
  height: 1px;
  pointer-events: none;
}

@media (max-width: 900px){
  .floating-plush__single{
    width: 88px;
    border-radius: 14px;
    top: clamp(110px, 18vh, 180px);
  }
  .floating-plush__single.is-right{ right: 12px; }
  .floating-plush__single.is-left{ left: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .floating-plush__single{
    transition: none;
    animation: none !important;
  }
}

/* =============================
   Mobile Hamburger Navigation
============================= */

.nav-toggle{
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(19, 44, 79, 0.18);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  cursor: pointer;
}

.nav-toggle__label{
  font-family: var(--font-serif, ui-serif, Georgia, "Times New Roman", serif);
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--ink, #132c4f);
  text-transform: uppercase;
}

.nav-toggle__icon{
  width: 20px;
  height: 14px;
  display: grid;
  gap: 4px;
}

.nav-toggle__bar{
  height: 2px;
  width: 100%;
  background: var(--ink, #132c4f);
  border-radius: 99px;
  transform-origin: center;
  transition: transform .28s ease, opacity .28s ease;
}

.nav-backdrop{ display: none; }

@media (max-width: 900px){
  .nav-toggle{ display: inline-flex; }

  .nav-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 28, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 999;
  }

  /* Mobile menu panel */
  .global-nav{
    position: fixed;
    left: 12px;
    right: 12px;
    top: 72px;
    transform: translate3d(0, -8px, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 1000;
  }

  .global-nav .nav-list{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(19, 44, 79, 0.12);
    background: rgba(247, 244, 236, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 22px 70px rgba(0,0,0,0.18);
  }

  .global-nav .nav-list a{
    display: block;
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
  }

  .global-nav .nav-list li + li{
    margin-top: 6px;
  }

  body.is-nav-open{ overflow: hidden; }

  body.is-nav-open .nav-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  body.is-nav-open .global-nav{
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  body.is-nav-open .nav-toggle__bar:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }
  body.is-nav-open .nav-toggle__bar:nth-child(2){
    opacity: 0;
  }
  body.is-nav-open .nav-toggle__bar:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }
}

@media (max-width: 900px){
  .header-inner{
    gap: 12px;
  }
  .nav-toggle{
    display: inline-flex;
    margin-left: auto;
  }
  /* Hide desktop menu (it will be shown via hamburger) */
  .site-header .global-nav{
    width: auto;
  }
  .site-header .global-nav{
    /* global-nav becomes the panel above */
  }
  .site-header .global-nav .nav-list{
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce){
  .nav-backdrop,
  .global-nav,
  .nav-toggle__bar{
    transition: none;
  }
}

/* ------------------------------------------------------------
   Enhancements for "overseas kids room" vibe + mobile spacing
   (added 2026-01-31)
------------------------------------------------------------ */

/* When hero image is not set, show a cute placeholder instead of blank space */
.hero-media-placeholder{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 10px, transparent 11px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.9) 0 12px, transparent 13px),
    linear-gradient(135deg, rgba(var(--pink-rgb), .18), rgba(var(--sky-rgb), .18));
  border: 1px dashed rgba(var(--ink-rgb), .22);
  display: grid;
  place-items: center;
  color: rgba(var(--ink-rgb), .55);
}

.hero-media-placeholder::after{
  content: "Photo coming soon";
  letter-spacing: .08em;
  font-weight: 700;
}

/* Mobile refinements */
@media (max-width: 900px){
  .wrap{ width: min(var(--wrap), 95vw); }
  .narrow{ width: min(760px, 95vw); }

  .hero-media-placeholder{ height: 220px !important; }

  /* On small screens, reduce the "frame" feel */
  main{
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
}


/* --- Kids-room accents: badges, stickers, galleries --- */

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(var(--ink-rgb), .68);
}
.kicker::before{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--pink), var(--sky));
  box-shadow: 0 10px 18px rgba(31,42,58,.14);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ink-rgb), .14);
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 16px rgba(31,42,58,.10);
  font-size: 12px;
  font-weight: 700;
}
.badge .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--butter);
}
.badge.badge--pink .dot{ background: var(--pink); }
.badge.badge--sky  .dot{ background: var(--sky); }
.badge.badge--mint .dot{ background: var(--mint); }

.section--alt{
  background: rgba(255,255,255,.22);
  border-top: 1px solid rgba(var(--ink-rgb), .06);
  border-bottom: 1px solid rgba(var(--ink-rgb), .06);
}

.promise-cards{ margin-top: 14px; }
.promise-cards .card{
  position:relative;
  padding-top: 16px;
}
.promise-cards .card h3{
  display:flex;
  align-items:center;
  gap:10px;
}
.promise-cards .card h3 .icon{
  width:30px; height:30px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4));
  border: 1px solid rgba(var(--ink-rgb), .12);
  box-shadow: 0 12px 18px rgba(31,42,58,.10);
}
.promise-cards .card:nth-child(1) h3 .icon{ outline: 3px solid rgba(var(--pink-rgb), .18); }
.promise-cards .card:nth-child(2) h3 .icon{ outline: 3px solid rgba(var(--sky-rgb), .18); }
.promise-cards .card:nth-child(3) h3 .icon{ outline: 3px solid rgba(var(--butter-rgb), .18); }

.mini-gallery{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
  margin-top: 14px;
}
.polaroid{
  position:relative;
  display:block;
  padding: 12px 12px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(var(--ink-rgb), .12);
  box-shadow: 0 18px 28px rgba(31,42,58,.12);
  --base-rot: -1.2deg;
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --tilt-lift: 0px;
  transform: perspective(900px) rotate(var(--base-rot)) translateY(var(--tilt-lift)) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease;
}
.polaroid:hover{ --tilt-lift: -4px; box-shadow: 0 26px 44px rgba(31,42,58,.16); }

/* playful shine */
.polaroid::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 24%, transparent 50%);
  transform: translateX(-120%) translateZ(1px);
  opacity: 0;
  pointer-events:none;
}
.polaroid:hover::before{
  opacity: 1;
  animation: ffk-shine .95s ease both;
}
.polaroid img{
  display:block;
  width:100%;
  aspect-ratio: 4/5;
  object-fit:cover;
  border-radius: 12px;
}
.polaroid::after{
  content:"";
  position:absolute;
  top:-8px; left:50%;
  width: 54px; height: 18px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(var(--butter-rgb), .55);
  border: 1px solid rgba(var(--ink-rgb), .10);
  border-radius: 8px;
  box-shadow: 0 10px 14px rgba(0,0,0,.10);
}
.polaroid:nth-child(2){ --base-rot: 1.2deg; }
.polaroid:nth-child(3){ --base-rot: -.4deg; }
.polaroid:nth-child(4){ --base-rot: 1.8deg; }
.polaroid:nth-child(5){ --base-rot: -1.6deg; }
.polaroid:nth-child(6){ --base-rot: .6deg; }

@keyframes ffk-shine{
  from{ transform: translateX(-120%) translateZ(1px); }
  to{ transform: translateX(120%) translateZ(1px); }
}

/* tilt targets (JS enhances on desktop) */
.tilt{ will-change: transform; }
.card.tilt{
  transition: transform .18s ease, box-shadow .18s ease;
}
.card.tilt:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 44px rgba(31,42,58,.14);
}

@media (max-width: 900px){
  .mini-gallery{
    grid-template-columns: repeat(6, 72%);
    overflow-x:auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }
  .mini-gallery .polaroid{ scroll-snap-align: start; }
}

/* ---------------------------------
   Lightbox (gallery)
----------------------------------*/
html.is-lb-open,
html.is-lb-open body{ overflow: hidden; }
.lb{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.lb.is-open{
  opacity: 1;
  pointer-events: auto;
}
.lb::before{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(15,18,26,.55);
  backdrop-filter: blur(6px);
}
.lb__stage{
  position: relative;
  display: inline-block;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow: hidden;
  transform: translateY(10px) scale(.98);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.lb.is-open .lb__stage{
  transform: translateY(0) scale(1);
}
.lb__img{
  display:block;
  width: auto;
  height: auto;
  max-width: min(980px, 92vw);
  max-height: min(680px, 78vh);
  object-fit: contain;
  background:
    radial-gradient(circle at 20% 30%, rgba(224,122,154,.14) 0 10px, transparent 11px),
    radial-gradient(circle at 70% 60%, rgba(111,193,233,.14) 0 12px, transparent 13px),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.9));
}
.lb__close{
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.lb__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.lb__prev{ left: 14px; }
.lb__next{ right: 14px; }
.lb__close:hover,
.lb__nav:hover{ background: rgba(255,255,255,.28); }

@media (max-width: 900px){
  .lb{ padding: 10px; }
  .lb__stage{ border-radius: 16px; }
  .lb__img{ max-width: 95vw; max-height: 72vh; }
  .lb__nav{ width: 44px; height: 44px; font-size: 30px; }
}

@media (prefers-reduced-motion: reduce){
  .lb, .lb__stage{ transition: none; }
}


.grid-2 > .card{ height:100%; }
.grid-2 > .card{ display:flex; flex-direction:column; }
.grid-2 > .card.card-map{ padding: var(--pad); overflow:hidden; }
.card-map iframe{ width:100%; height:100%; border:0; display:block; border-radius: 16px; }

.card-map iframe{ width:100%; min-height: 260px; border:0; border-radius: 14px; display:block; }
body.page-access .card-map iframe{ min-height: 360px; border-radius: 18px; }

.grid-2 > .card.card-map iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }


/* Access page spacing between info and map */
body.page-access .card + .card-map{ margin-top: 64px; }
@media (max-width: 900px){ body.page-access .card + .card-map{ margin-top: 56px; } }


/* Concept page section title pill (previous design) */
.title-ribbon--mix{
  background: linear-gradient(90deg, rgba(var(--pink-rgb), .22), rgba(var(--sky-rgb), .22));
  border: 1px solid rgba(var(--ink-rgb), .10);
}
.title-ribbon--mix::before{ display:none; }

/* ===== Tweaks (2026-02-01) ===== */
/* Hero tagline on image (bottom-right / glow / no box) */
.photo-frame--main .hero-media-tagline{
  position:absolute;
  right: 18px;
  bottom: 18px;
  left: auto;
  z-index: 3;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow:
    0 2px 10px rgba(0,0,0,.45),
    0 0 18px rgba(255,255,255,.55);
}
@media (max-width: 900px){
  .photo-frame--main .hero-media-tagline{
    right: 12px;
    bottom: 12px;
    font-size: 13px;
  }
}

/* Home Access: remove extra bottom space in info card (map size stays fixed) */
.section-access .grid-2{ align-items: flex-start; }
.section-access .grid-2 > .card:not(.card-map){
  height: auto !important;           /* cancel global height:100% so it won't stretch */
  align-self: flex-start;            /* ensure it doesn't stretch to row height */
  min-height: 0;
  padding-bottom: 12px;              /* trim extra bottom whitespace */
}
.section-access .grid-2 > .card:not(.card-map) p:last-of-type{ margin-bottom: 12px; }

/* Home Access: make the "地図を見る" button fit its text width (cards are flex containers) */
.section-access .grid-2 > .card:not(.card-map) .btn{
  align-self: flex-start;            /* default flex-item is stretch */
  width: auto;
  display: inline-flex;
  white-space: nowrap;
}

/* Keep the map as a square (fixed size feel) */

.section-access .card-map{
  aspect-ratio: 1 / 1;
}

/* ===== Home: extra "kids room" fun ===== */
body.home .hero{
  position: relative;
}
body.home .hero::before{ display:none; }
/* sticker-like copy panel */
body.home .hero-copy{
  background: rgba(255,255,255,.62);
  border: 1px dashed rgba(var(--ink-rgb), .16);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 36px rgba(0,0,0,.10);
}
@media (max-width: 900px){
  body.home .hero-copy{ background: transparent; border: 0; box-shadow: none; padding: 0; }
}

/* washi tape corners on the main photo */
.photo-frame{ position: relative; }
body.home .photo-frame--main::before,
body.home .photo-frame--main::after{
  content:"";
  position:absolute;
  top: -10px;
  width: 78px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  opacity: .9;
  pointer-events:none;
}
body.home .photo-frame--main::before{
  left: 22px;
  background: rgba(var(--butter-rgb), .62);
  transform: rotate(-4deg);
}
body.home .photo-frame--main::after{
  right: 18px;
  background: rgba(var(--mint-rgb), .55);
  transform: rotate(5deg);
}

/* section backgrounds: a touch more playful on home */
body.home .section{
  position: relative;
}

/* Home: stronger "kids room" wall (pastel wallpaper + paper bits) */
body.home .site-main{ position: relative; z-index: 1; }
body.home .site-main::before{ display:none; }
/* little "toy" stickers near section corners */
body.home .section::after{
  content:"";
  position:absolute;
  right: -6px;
  top: -8px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 35%, rgba(var(--pink-rgb), .38) 0 10px, transparent 11px),
    radial-gradient(circle at 72% 70%, rgba(var(--mint-rgb), .38) 0 8px, transparent 9px),
    radial-gradient(circle at 70% 28%, rgba(var(--butter-rgb), .38) 0 6px, transparent 7px);
  box-shadow: 0 14px 22px rgba(0,0,0,.08);
  transform: rotate(6deg);
  opacity: .38;
  pointer-events:none;
}
body.home .section::before{
  content:"";
  position:absolute;
  inset: -12px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--sky-rgb), .06), transparent 45%),
    radial-gradient(circle at 90% 28%, rgba(var(--peach-rgb), .06), transparent 50%),
    radial-gradient(circle at 70% 92%, rgba(var(--lavender-rgb), .05), transparent 52%);
  pointer-events:none;
}
body.home .section > .wrap{ position: relative; z-index: 1; }
.section-access .card-map iframe{
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  border-radius: 18px;
}

/* Home "アクセス" map: add inner frame/padding like the address card */
.section-access .card-map .map-frame{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(66,44,24,.18);
  border-radius: 22px;
  padding: 14px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.section-access .card-map .map-frame iframe{
  border-radius: 16px;
}

/* Access detail page: map card only should be square */
.page-access .card-map--square{
  aspect-ratio: 1 / 1;
}
.page-access .card-map--square iframe{
  height: 100%;
}


/* Business page lead note */
.business-lead .note{
  font-size: .92em;
  opacity: .8;
}