:root{
  --ink:#3b2f2b;
  --muted:#6c5f5a;
  --paper: rgba(255,255,255,.42);
  --paper2: rgba(255,255,255,.28);
  --stroke: rgba(255,255,255,.55);
  --shadow: 0 0 0 rgba(0,0,0,0);
  --shadow2: 0 0 0 rgba(0,0,0,0);
  --pink:#e790a6;
  --pink2:#d77f98;
  --blue:#9bb1c8;
  --blue2:#7f97b2;
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:#efe9e6;
  overflow-x:hidden;
}

.bg{
  position:fixed;
  inset:0;
  background-image:url("../assets/bg/BJ1.png");
  background-size:cover;
  background-position:center;
  filter:saturate(1.02) contrast(1.02);
  z-index:-3;
}

/* subtle film grain */
.sparkles{
  position:fixed;
  inset:-40px;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 45% 35%, rgba(255,255,255,.33), rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 60% 70%, rgba(255,255,255,.22), rgba(255,255,255,0) 65%);
  mix-blend-mode:soft-light;
}

.page{
  width:min(1280px, calc(100% - 40px));
  margin:0 auto;
  padding:16px 0 40px;
}

/* Topbar */
.topbar{
  position:sticky;
  top:10px;
  z-index:50;
  margin:10px auto 0;
  width:min(1280px, calc(100% - 40px));
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.40));
  border:1px solid rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-width:260px;}
.brand-logo{width:74px; height:53px; object-fit:cover; border-radius:999px; filter: drop-shadow(0 6px 10px rgba(40,30,28,.18));}
.brand-title{font-family:"Shippori Mincho", serif; font-weight:700; letter-spacing:.02em; font-size:22px; color:#2f2724}

.nav{display:flex; gap:24px; align-items:center; justify-content:center; flex:1; flex-wrap:wrap;}
.nav-link{color:#4b3f3a; text-decoration:none; font-size:13px; padding:8px 9px; border-radius:999px; opacity:.85; white-space:nowrap; letter-spacing:.02em;}
.nav-link:hover{background:rgba(255,255,255,.38)}
.nav-link.is-active{font-weight:700; opacity:1;}

.lang{display:flex; align-items:center; gap:8px; min-width:200px; justify-content:flex-end;}
.lang-btn{
  border:0;
  background:transparent;
  color:#51443f;
  font-weight:600;
  font-size:13px;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  opacity:.75;
}
.lang-btn:hover{background:rgba(255,255,255,.35); opacity:1;}
.lang-btn.is-active{opacity:1; background:rgba(255,255,255,.46); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);}
.lang-dot{opacity:.35; font-weight:700;}

/* Hero */
.hero{padding:18px 0 8px;}
.hero-card{
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
  overflow: visible;
}
.hero-stage{
  position: relative;
  min-height: 720px;
  isolation: isolate;
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  align-items:start;
  gap:30px;
  padding:38px 46px 18px 46px;
}
.hero-stage::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 44px;
  background:
    radial-gradient(82% 102% at 34% 48%, rgba(255,249,245,.74), rgba(255,249,245,.42) 44%, rgba(255,249,245,.12) 70%, rgba(255,249,245,0) 100%),
    radial-gradient(58% 88% at 82% 42%, rgba(255,248,243,.22), rgba(255,248,243,0) 74%);
  z-index:0;
  pointer-events:none;
}
.hero-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:none;
}
.hero-copy{
  position:relative;
  z-index:3;
  max-width:640px;
  padding:28px 10px 8px 20px;
}
.hero-title{
  margin:0 0 24px;
  font-family:"Shippori Mincho", serif;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.18;
  font-size:50px;
  color:#2f2724;
  text-shadow:0 1px 0 rgba(255,255,255,.38);
}
.hero-sub{margin-bottom:12px; max-width:540px; text-align:center;}
.hero-subtitle{
  font-weight:800;
  font-size:22px;
  margin-bottom:10px;
  color:#3d332f;
  text-align:center;
  white-space:nowrap;
}
.hero-desc{
  font-size:15px;
  line-height:1.45;
  color:rgba(55,44,40,.84);
  text-align:center;
  white-space:nowrap;
}
.hero-media{
  position:relative;
  align-self:center;
  justify-self:end;
  width:min(100%, 860px);
  z-index:2;
  margin-right:-18px;
  margin-top:-96px;
  margin-bottom:0;
}
.hero-media::before{
  content:"";
  position:absolute;
  inset:-12% -8% -14% -18%;
  background:
    radial-gradient(74% 82% at 56% 50%, rgba(255,248,242,.84), rgba(255,248,242,.38) 56%, rgba(255,248,242,0) 84%),
    radial-gradient(38% 44% at 74% 62%, rgba(255,255,255,.28), rgba(255,255,255,0) 80%);
  filter: blur(26px);
  z-index:-2;
  pointer-events:none;
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:-6% -3% -10% -10%;
  background:
    radial-gradient(86% 92% at 54% 56%, rgba(255,250,247,.32), rgba(255,250,247,0) 72%);
  filter: blur(10px);
  z-index:-1;
  pointer-events:none;
}
.hero-bg-img{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
  filter:saturate(1.01) contrast(1.01);
  border-radius: 16px;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(122% 114% at 50% 48%, #000 58%, rgba(0,0,0,.96) 72%, rgba(0,0,0,.84) 82%, rgba(0,0,0,.58) 90%, transparent 100%);
  mask-image: radial-gradient(122% 114% at 50% 48%, #000 58%, rgba(0,0,0,.96) 72%, rgba(0,0,0,.84) 82%, rgba(0,0,0,.58) 90%, transparent 100%);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 18px;
  border-radius:999px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(255,255,255,.70);
  font-size:14px;
  color:rgba(62,50,46,.84);
  margin: 8px 0 28px;
  width:560px;
  max-width:100%;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}


html[lang="en"] .hero-title{font-size:42px; line-height:1.18; max-width:760px; letter-spacing:0;}
html[lang="en"] .hero-subtitle{font-size:22px;}
html[lang="en"] .hero-desc{font-size:15px;}
html[lang="en"] .pill{font-size:13px;}
html[lang="en"] .hero-desc{max-width:none;}
html[lang="zh-CN"] .hero-title,
html[lang="zh-TW"] .hero-title{font-size:56px; line-height:1.22; font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; font-weight:900; letter-spacing:0;}
html[lang="zh-CN"] .hero-desc,
html[lang="zh-TW"] .hero-desc{font-size:16px; line-height:1.45;}
html[lang="zh-CN"] .hero-subtitle,
html[lang="zh-TW"] .hero-subtitle{font-size:23px;}
html[lang="ko"] .hero-title{font-size:44px; line-height:1.2; max-width:760px; letter-spacing:0;}
html[lang="ko"] .hero-subtitle{font-size:22px;}
html[lang="ko"] .hero-desc{font-size:15px;}
html[lang="ko"] .pill{font-size:13px;}

.cta{display:flex; flex-direction:column; gap:14px; max-width:420px;}
.hero-cta{max-width:560px;}
.hero-copy .hero-sub,
.hero-copy .pill,
.hero-copy .hero-cta{margin-left:0;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border-radius:999px;
  padding:12px 16px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.55);
  user-select:none;
}
.btn .chev{font-size:18px; opacity:.9; margin-left:2px}

.btn-primary{
  color:white;
  background: linear-gradient(180deg, var(--pink), var(--pink2));
  border-color: rgba(255,255,255,.55);
  box-shadow:none;
}
.btn-primary:hover{filter:brightness(1.02)}

.btn-ghost{
  color:#4a3f3b;
  background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.34));
}
.btn-ghost:hover{background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38));}

.hero-btn-primary{
  min-height:62px;
  padding:0 20px;
  font-size:17px;
}
.hero-btn-secondary{
  min-height:52px;
  padding:0 20px;
  font-size:17px;
}


/* Section */
.section{padding:22px 0 0;}
.section-head{
  text-align:center;
  margin: 12px auto 14px;
}
.section-title{
  margin: 0 0 6px;
  font-family:"Shippori Mincho", serif;
  font-weight:700;
  letter-spacing:.02em;
  font-size: 34px;
  color:#2f2724;
}
.section-sub{
  font-size:14px;
  color:rgba(62,50,46,.78);
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top: 12px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.26));
  border:1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  padding: 16px 14px 14px;
  box-shadow: 0 14px 28px rgba(45,34,30,.08);
  text-align:center;
}
.card-ill{
  width: 100%;
  height: 122px;
  display:flex;
  align-items:start;
  justify-content:center;
  margin: 4px 0 10px;
}
.card-ill img{
  height: 118px;
  width:auto;
  filter: drop-shadow(0 10px 18px rgba(38,28,25,.16));
}
.card-title{font-weight:900; font-size:16px; margin-bottom:6px;}
.card-desc{font-size:12px; color:rgba(62,50,46,.75)}

.section-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin: 20px auto 10px;
  width:100%;
  text-align:center;
}
.btn-xl{padding:14px 20px; min-width: 420px; font-size:16px; margin:0 auto;}
.section-cta-note{margin-top:8px; font-size:12px; color:rgba(62,50,46,.70); text-align:center; width:100%;}

.faq{display:flex; justify-content:center; margin-top: 14px;}
.btn-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.30));
  color:#3f3531;
  border:1px solid rgba(255,255,255,.55);
  min-width: 420px;
}

.footer{margin-top: 22px; padding-bottom: 10px;}
.footer-inner{font-size:12px; text-align:center; color:rgba(62,50,46,.64); letter-spacing:.03em}

/* Responsive */
@media (max-width: 1180px){
  .hero-stage{
    min-height: 640px;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .9fr);
    padding:34px 34px 28px 34px;
    gap:18px;
  }
  .hero-copy{ max-width:560px; padding-left:8px; }
  .hero-title{font-size:46px}
  .hero-subtitle{font-size:21px}
  .hero-desc{font-size:15px}
  .hero-media{ width:min(100%, 490px); }
}
@media (max-width: 980px){
  .brand{min-width: unset}
  .nav{display:none}
  .hero{
    padding-top:12px;
  }
  .hero-stage{
    display:flex;
    flex-direction:column;
    gap:18px;
    min-height:auto;
    padding:18px 10px 0;
  }
  .hero-stage::before{
    inset: 0 0 8px;
    border-radius: 34px;
    background: radial-gradient(90% 90% at 50% 30%, rgba(255,248,243,.78), rgba(255,248,243,.18) 60%, rgba(255,248,243,0) 100%);
  }
  .hero-stage::after{ display:none; }
  .hero-copy{
    position:static;
    max-width:none;
    padding:0 12px;
    order:1;
  }
  .hero-media{
    order:2;
    width:100%;
    max-width:100%;
    margin:0;
    justify-self:stretch;
    align-self:auto;
  }
  .hero-media::before{ inset:-6% -2% -8% -2%; }
  .hero-bg-img{
    width:100%;
    -webkit-mask-image:none;
    mask-image:none;
    border-radius:28px;
    box-shadow: 0 14px 28px rgba(45,34,30,.08);
  }
  .hero-title{font-size:42px}
  .hero-subtitle{font-size:21px}
  .hero-desc{font-size:15px}
  .cards{grid-template-columns: repeat(2, 1fr)}
  .btn-xl, .btn-soft{min-width: min(420px, 100%)}
}
@media (max-width: 560px){
  .page,
  .topbar{width:min(1280px, calc(100% - 24px));}
  .topbar-inner{border-radius: 22px; padding:10px 12px}
  .brand-title{font-size:18px}
  .hero-copy{padding:0 4px}
  .hero-title{font-size:34px; line-height:1.2}
  .hero-subtitle{font-size:18px}
  .hero-desc{font-size:14px}
  .pill{font-size:13px; padding:9px 14px; margin-bottom:18px}
  .cards{grid-template-columns: 1fr}
  .cta{max-width: 100%}
  .btn{width: 100%}
  .hero-btn-primary{min-height:58px; font-size:18px}
  .hero-btn-secondary{min-height:50px; font-size:16px}
}


/* --- v5 compact + language dropdown tweaks --- */

/* Header logo bigger & crisper */
.brand-logo{
  width:78px;
  height:56px;
  object-fit: contain;
  border-radius: 999px;
  filter: drop-shadow(0 6px 10px rgba(40,30,28,.16));
}
.brand-title{ font-size: 24px; letter-spacing: .02em; }

/* Single language dropdown */
.lang{ display:none; } /* legacy */
.lang-dd{ position: relative; display:flex; align-items:center; }
.lang-current{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.62);
  background: rgba(255,255,255,.24);
  box-shadow: 0 10px 18px rgba(45,34,30,.08);
  color:#3a322f;
  font-weight:700;
  cursor:pointer;
}
.lang-current:hover{ background: rgba(255,255,255,.30); }
.lang-caret{ opacity:.8; }
.lang-menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding:10px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.62);
  background: rgba(255,255,255,.30);
  box-shadow: 0 18px 40px rgba(45,34,30,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:none;
  z-index: 50;
}
.lang-dd.is-open .lang-menu{ display:block; }
.lang-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius: 14px;
  border:none;
  background: transparent;
  color:#3a322f;
  cursor:pointer;
  font-weight:600;
}
.lang-item:hover{ background: rgba(255,255,255,.32); }
.lang-item.is-active{ background: rgba(242,161,179,.22); }

/* Second screen (services) more compact like reference */
.section-services{ padding-top: 10px; }
.section-head{ margin: 10px auto 10px; }
.cards{
  gap: 12px;
  margin-top: 10px;
}
.card{
  padding: 14px 12px 12px;
  border-radius: 20px;
  box-shadow: 0 10px 22px rgba(45,34,30,.07);
}
.card-ill{
  width: 150px;
  height: 94px;
  margin: 0 auto 8px;
}
.card-title{ font-size: 16px; margin-top: 2px; }
.card-desc{ font-size: 12.5px; line-height: 1.25; }

@media (max-width: 560px){
  .hero-bg-img{ border-radius:22px; }
}


@media (max-width: 980px){
  .hero-sub,.hero-cta,.pill{max-width:100%; width:100%;}
  .hero-subtitle,.hero-desc,.pill{white-space:normal;}
}