@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
/*
 AROMIC biz — natural / 2026
 Replace style.css. Load AFTER subsc-top.css. Existing BODY is supported.
 Scope styles to #top to avoid changing the shared W2 footer.
 Images and document order remain controlled by the BODY.
*/
#top {
  --biz-bg: #f8f7f1;
  --biz-leaf: #edf2e8;
  --biz-green: #49654e;
  --biz-dark: #293e2f;
  --biz-text: #394239;
  --biz-sub: #596457;
  --biz-line: #d5ddce;
  color: var(--biz-text);
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
#top *, #top *::before, #top *::after { box-sizing: border-box; }
#top img { display: block; max-width: 100%; height: auto; }
#top a { color: inherit; text-decoration: none; }
#top a:focus-visible { outline: 3px solid #547745; outline-offset: 5px; }
#top p { text-align: left; }
#top .section { padding: clamp(72px, 8vw, 124px) 6%; }
#top .section-inner { width: 100%; max-width: 1160px; margin: 0 auto; }
#top .section-inner.narrow { max-width: 760px; }
#top .section-en { margin: 0 0 22px; color: var(--biz-green); font: 500 12px/1.6 Arial, sans-serif; letter-spacing: .2em; }
#top h1, #top h2, #top .space-card h3, #top .natural-message, #top .natural-lead {
  font-family: "Yu Mincho", "游明朝", "YuMincho", serif;
  font-weight: 500;
}
#top .section h2, #top .brand-section h2 {
  margin: 0 0 32px; color: var(--biz-dark); font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.65; letter-spacing: .06em; text-align: left;
}
#top .section-sub { max-width: 680px; margin: 0 0 48px; color: var(--biz-sub); font-size: 15px; }
#top .sp { display: none; }
#top #space { scroll-margin-top: 24px; }
#top #services { scroll-margin-top: 24px; }
#top #why-natural { scroll-margin-top: 24px; }
/* Navigation: retain existing logo asset and existing drawer script. */
#top .site-header { position: relative; background: #fff; padding: 0; }
#top .nav {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(14px, 1.7vw, 26px); width: 100%; max-width: 1440px;
  min-height: 86px; padding: 22px 3% 22px 270px; margin: 0 auto;
}
#top .nav::before {
  content: ""; position: absolute; left: 3%; top: 50%; transform: translateY(-50%);
  width: 205px; height: 48px;
  background: url("https://biz.aromicstyle.com/img/top/logosp.svg") left center / contain no-repeat;
}
#top .nav a { color: var(--biz-dark); font-size: 13px; white-space: nowrap; }
#top .hamburger, #top .drawer-menu { display: none; }
/* Hero: readable text on warm white, existing photograph alongside it. */
#top .biz-hero {
  position: relative; display: grid; grid-template-columns: 48% 52%;
  min-height: 620px; height: auto; max-height: none; overflow: hidden;
  background: var(--biz-bg); opacity: 1; transition: none;
}
#top .biz-hero-image { position: relative; grid-column: 2; grid-row: 1; display: block; min-width: 0; }
#top .biz-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 35% center; }
@media (min-width: 750px) {
  #top .biz-hero-image::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: clamp(52px, 7vw, 100px);
    pointer-events: none;
    background: linear-gradient(90deg, var(--biz-bg) 0%, rgba(248,247,241,.72) 28%, rgba(248,247,241,0) 100%);
  }
}
#top .biz-hero-overlay { display: none; }
#top .biz-hero-content {
  position: relative; inset: auto; transform: none; grid-column: 1; grid-row: 1;
  align-self: center; width: auto; padding: 72px 9% 76px 12%; color: var(--biz-dark);
}
#top .biz-hero-label { margin: 0 0 30px; color: var(--biz-green); font: 500 11px/1.8 Arial, sans-serif; letter-spacing: .22em; }
#top .biz-hero h1 { margin: 0; color: var(--biz-dark); font-size: clamp(32px, 3.5vw, 54px); line-height: 1.65; letter-spacing: .025em; }
#top .biz-hero-service { display: flex; align-items: center; gap: 13px; width: fit-content; max-width: 100%; margin: 34px 0 28px; padding: 0; background: none; color: var(--biz-text); font-size: 16px; font-weight: 500; line-height: 1.8; letter-spacing: .025em; }
#top .biz-hero-service::before,
#top .biz-hero-service::after { content: ""; flex: 0 1 30px; width: 30px; height: 1px; background: #8a9388; }
#top .biz-hero-lead { margin: 0 0 20px; color: var(--biz-text); font-size: 16px; line-height: 2; }
#top .biz-hero-description { margin: 0; color: var(--biz-sub); font-size: 14px; line-height: 2; opacity: 1; }
#top .biz-hero .pc { display: none; }
#top .hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 26px; margin-top: 28px; }
#top .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  min-width: 180px; padding: 12px 25px; background: var(--biz-green);
  border: 1px solid var(--biz-green); color: #fff; font-size: 14px;
  transition: background .2s;
}
#top .btn-primary:hover { background: var(--biz-dark); }
#top .btn-text { display: inline-block; padding: 10px 0; color: var(--biz-dark); border-bottom: 1px solid var(--biz-line); font-size: 13px; }
#top .btn-text span { margin-left: 12px; }
/* Quiet introduction. */
#top .biz-intro { background: #fff; text-align: center; }
#top .biz-intro .section-en, #top .biz-intro h2, #top .biz-intro .section-copy { text-align: center; }
#top .biz-intro .section-copy { margin: 24px auto 0; max-width: 640px; color: var(--biz-sub); font-size: 16px; line-height: 2.3; }
/* Space descriptions remain in document order; no CSS-only reorder. */
#top .space-section { background: var(--biz-bg); }
#top .space-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; border: 0; background: transparent; }
#top .space-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; min-height: 100%; padding: 0;
  background: #fff; border: 1px solid var(--biz-line);
  transition: transform .25s ease, box-shadow .25s ease;
}
#top .space-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(41,62,47,.10);
}
#top .space-no { position: absolute; z-index: 2; top: 16px; right: 16px; padding: 5px 9px; color: var(--biz-dark); background: rgba(255,255,255,.88); font: 700 12px/1.5 "Lato", sans-serif; }
#top .space-photo { width: 100%; margin: 0; overflow: hidden; background: var(--biz-leaf); }
#top .space-photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; transition: transform .45s ease; }
#top .space-card:hover .space-photo img { transform: scale(1.025); }
#top .space-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; width: 100%; padding: 28px 30px 30px; }
#top .space-en { margin: 0 0 8px; color: var(--biz-green); font: 700 11px/1.6 "Lato", sans-serif; letter-spacing: .14em; }
#top .space-card h3 { margin: 0 0 16px; color: var(--biz-dark); font-size: 34px; line-height: 1.45; }
#top .space-card .space-benefit { margin: 0 0 18px; color: var(--biz-dark); font-size: 17px; font-weight: 700; line-height: 1.8; }
#top .space-card .space-description { margin: 0 0 26px; max-width: none; color: var(--biz-sub); font-size: 14px; line-height: 2; }
#top .view-more { position: static; margin-top: auto; color: var(--biz-green); font-size: 13px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; }
/* Natural story: pale leaf green rather than a heavy dark panel. */
#top .natural-section {
  background-color: #18271c;
  background-image:
    linear-gradient(rgba(18,34,23,.76), rgba(18,34,23,.76)),
    url("https://biz.aromicstyle.com/img/lp/aromicb/leavesrenew.jpg");
  background-size: cover;
  background-position: center;
  color: #f4f6f0;
}
#top .natural-inner { display: block; max-width: 920px; }
#top .natural-heading { max-width: 920px; }
#top .natural-content { max-width: 820px; padding-top: 16px; }
#top .natural-section h2 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.22); }
#top .natural-content p { margin: 0 0 23px; color: rgba(255,255,255,.88); font-size: 15px; line-height: 2.2; }
#top .natural-content .natural-lead { margin-bottom: 30px; color: #fff; font-size: 23px; }
#top .natural-content .natural-message { margin: 36px 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.34); color: #fff; font-size: 25px; line-height: 1.9; }
#top .concept-link { display: inline-flex; align-items: center; gap: 24px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.7); color: #fff; font-size: 13px; }
/* Product imagery is preserved, without overlaid descriptions. */
#top .solution-section { padding-top: clamp(58px, 6vw, 88px); padding-bottom: clamp(64px, 7vw, 100px); background: #fff; }
#top .solution-section h2 { margin-bottom: 14px; }
#top .solution-lead { margin: 0 0 34px; color: var(--biz-sub); font-size: 15px; }
#top .solution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
#top .solution-item { display: flex; flex-direction: column; min-width: 0; background: var(--biz-bg); border: 1px solid var(--biz-line); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
#top .solution-item:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(41,62,47,.10); }
#top .solution-item picture { display: block; overflow: hidden; background: #f4f4ef; }
#top .solution-item picture img { width: 100%; aspect-ratio: 16 / 8; height: auto; object-fit: cover; object-position: center 72%; transition: transform .45s ease; }
#top .solution-item:hover picture img { transform: scale(1.02); }
#top .solution-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px 32px 32px; }
#top .solution-category { margin: 0 0 14px; color: var(--biz-green); font-size: 13px; font-weight: 700; line-height: 1.7; letter-spacing: .04em; }
#top .solution-logo { width: 170px; margin-bottom: 18px; }
#top .solution-logo img { width: 100%; }
#top .solution-text > p:not(.solution-category) { margin: 0 0 24px; color: var(--biz-sub); font-size: 15px; }
#top .solution-text > span { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 48px; margin-top: auto; padding: 10px 22px; background: var(--biz-green); color: #fff; font-size: 14px; font-weight: 700; }
#top .solution-item:hover .solution-text > span { background: var(--biz-dark); }
#top .solution-oil-link { display: flex; justify-content: flex-end; margin-top: 28px; }
#top .solution-oil-link a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 22px; border: 1px solid var(--biz-green); color: var(--biz-green); font-size: 14px; font-weight: 700; }
#top .solution-oil-link a:hover { background: var(--biz-green); color: #fff; }
/* Reset inherited fixed-height, absolute-positioned service cards. */
#top .business-section { background: var(--biz-bg); }
#top .business-section .order-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; }
#top .business-section .order-grid > a { display: block; min-width: 0; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; transform: none; }
#top .business-section .order-grid .order-item {
  position: relative !important; display: block !important; width: 100%; height: auto;
  max-width: none; max-height: none; margin: 0; background: transparent;
  border-radius: 0; box-shadow: none; overflow: visible;
}
#top .business-section .order-item::after { content: none; }
#top .business-section .order-item picture { position: static; display: block; width: 100%; height: auto; }
#top .business-section .order-item picture img { position: static; width: 100%; height: auto; max-height: none; filter: none; }
#top .business-section .order-item .text {
  position: static; display: block; transform: none; width: 100%; padding: 25px 0 0; text-align: left;
}
#top .business-section .service-label { margin: 0 0 12px; color: var(--biz-green); font: 11px/1.6 Arial, sans-serif; letter-spacing: .13em; }
#top .business-section .order-item .title { display: block; margin: 0 0 15px; padding: 0; background: transparent; color: var(--biz-dark); border-radius: 0; font-size: 25px; font-weight: 500; line-height: 1.6; }
#top .business-section .text p:last-child { margin: 0; color: var(--biz-sub); font-size: 14px; line-height: 1.95; }
#top .business-section a:hover .title { text-decoration: underline; text-underline-offset: 6px; }
/* Brand and news. */
#top .brand-section { padding: 100px 6%; background: #eaf0e3; text-align: center; }
#top .brand-inner { max-width: 740px; margin: auto; }
#top .brand-section h2, #top .brand-section p { text-align: center; }
#top .brand-section p:not(.section-en) { margin: 0 0 30px; color: var(--biz-sub); font-size: 15px; line-height: 2.2; }
#top .brand-section a { display: inline-flex; align-items: center; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--biz-green); color: var(--biz-dark); font-size: 14px; }
#top .news-section { padding: 64px 6%; background: #fff; }
#top #news { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 24px; align-items: center; margin: 0; }
#top #news dt {
  padding: 0;
  border: 0;
  background: transparent !important;
  color: var(--biz-green);
  font: 14px/1.8 Arial, sans-serif;
  letter-spacing: .12em;
  box-shadow: none;
}
#top #news dt small { display: block; font-size: 12px; letter-spacing: .04em; }
#top #news dd { margin: 0; padding: 0; font-size: 14px; }
#top #news dd.window { background: transparent; }
#top #news a:hover { text-decoration: underline; }

/* Content refinements: emphasized introduction and unified space labels. */
#top .biz-intro .section-copy-emphasis {
  margin-top: 14px;
  color: var(--biz-dark);
  font-weight: 700;
}

#top .biz-intro .section-copy-emphasis strong {
  font-weight: 700;
}

#top .space-no {
  display: none !important;
}

#top .space-card h3 {
  margin: 0 0 16px;
  color: var(--biz-dark);
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .025em;
}

#top .space-card h3 span {
  display: inline-block;
  margin: 0 .28em;
  color: #8b9586;
  font-weight: 400;
}

/* Typography rule: Gothic = Noto Sans JP, Mincho = Yu Mincho. */
#top,
#top button,
#top input,
#top select,
#top textarea {
  font-family: "Noto Sans JP", sans-serif;
}

#top h1,
#top h2,
#top .natural-message,
#top .natural-lead {
  font-family: "Yu Mincho", "游明朝", YuMincho, serif;
}

#top .space-card h3 {
  font-family: "Noto Sans JP", sans-serif;
}

/* Introduction photograph, treated in the same tone as WHY NATURAL. */
#top .biz-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #1d3021;
  background-image:
    linear-gradient(rgba(18,34,23,.72),rgba(18,34,23,.72)),
    url("https://biz.aromicstyle.com/img/top/top-intro-forest.jpg");
  background-position: center 48%;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}

#top .biz-intro .section-inner {
  position: relative;
  z-index: 1;
}

#top .biz-intro h2,
#top .biz-intro .section-copy,
#top .biz-intro .section-copy-emphasis {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0,0,0,.2);
}

#top .biz-intro .section-copy {
  font-weight: 700;
}
/* Match navigation breakpoint to space needed by the logo and six links. */
@media (max-width: 1099px) {
  #top .nav { display: none; }
  #top .site-header { padding-top: 76px; }
  #top .hamburger { display: block; position: absolute; top: 0; left: 0; right: 0; height: 76px; padding: 12px 24px; color: var(--biz-dark); background: #fff; line-height: 52px; font-size: 28px; }
  #top .hamburger::before { content: ""; position: absolute; top: 16px; left: 24px; width: 195px; height: 44px; padding: 0; background: url("https://biz.aromicstyle.com/img/top/logosp.svg") left center / contain no-repeat; }
  #top .drawer-menu { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; overflow-y: auto; padding: 80px 28px 36px; background: var(--biz-bg); z-index: 1000; }
  #top .drawer-menu a { display: block; margin: 0; padding: 15px 0; border-bottom: 1px solid var(--biz-line); color: var(--biz-dark); font-size: 16px; }
  #top .drawer-menu .close { top: 12px; right: 24px; color: var(--biz-dark); padding: 0 10px; }
  #top .biz-hero { min-height: 550px; }
  #top .biz-hero-content { padding: 48px 9%; }
}
@media (max-width: 749px) {
  #top .pc { display: none; }
  #top .sp { display: block; }
  #top .section { padding: 68px 24px; }
  #top .section h2, #top .brand-section h2 { font-size: clamp(25px, 6.8vw, 32px); margin-bottom: 25px; }
  #top .section-en { font-size: 10px; margin-bottom: 18px; }
  #top .section-sub { margin-bottom: 32px; font-size: 14px; }
  #top .biz-hero { display: flex; flex-direction: column; min-height: 0; height: auto; }
  #top .biz-hero-image { flex: none; width: 100%; height: clamp(210px, 62vw, 380px); }
  #top .biz-hero-image img { object-position: center; }
  #top .biz-hero-content { padding: 36px 24px 44px; width: 100%; }
  #top .biz-hero-label { margin-bottom: 16px; font-size: 10px; }
  #top .biz-hero h1 { font-size: clamp(29px, 8vw, 39px); margin-bottom: 22px; line-height: 1.55; }
  #top .biz-hero-lead { font-size: 15px; margin-bottom: 14px; }
  #top .biz-hero-description { font-size: 13px; }
  #top .hero-buttons { margin-top: 26px; gap: 16px 24px; }
  #top .biz-intro .section-copy { font-size: 15px; line-height: 2.15; }
  #top .space-grid, #top .natural-inner, #top .solution-grid { grid-template-columns: minmax(0, 1fr); }
  #top .space-card { min-height: 0; }
  #top .space-photo img { aspect-ratio: 16 / 8; }
  #top .space-card-body { padding: 24px 22px 26px; }
  #top .space-card h3 { font-size: 18px; }
  #top .space-card .space-benefit { font-size: 16px; }
  #top .natural-inner { max-width: none; }
  #top .natural-content { padding-top: 8px; }
  #top .natural-section {
    background-image:
      linear-gradient(rgba(18,34,23,.82), rgba(18,34,23,.82)),
      url("https://biz.aromicstyle.com/img/lp/aromicb/leavesrenew.jpg");
    background-position: 58% center;
  }
  #top .natural-content .natural-lead { font-size: 21px; }
  #top .natural-content .natural-message { font-size: 22px; }
  #top .solution-section { padding-top: 56px; padding-bottom: 68px; }
  #top .solution-lead { margin-bottom: 28px; font-size: 14px; }
  #top .solution-grid { gap: 24px; }
  #top .solution-item picture img { aspect-ratio: 16 / 9; object-position: center 72%; }
  #top .solution-text { padding: 24px 22px 26px; }
  #top .solution-text > span { width: 100%; }
  #top .solution-oil-link { margin-top: 22px; }
  #top .solution-oil-link a { width: 100%; }
  #top .business-section .order-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  #top .brand-section { padding: 72px 24px; }
  #top .news-section { padding: 45px 24px; }
  #top #news { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #top *, #top *::before, #top *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 2026-09: readable copy and mobile heading over photograph */
#top p {
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap: pretty;
}
/* Let copy wrap naturally, keeping the existing hero title's two lines. */
#top p br,
#top main h2 br,
#top main h3 br { display: none; }
#top main h2 { text-wrap: balance; }
#top .biz-hero-lead {
  max-width: 32em;
  font-size: 18px;
  line-height: 2;
  font-weight: 500;
  color: #394239;
  margin-bottom: 22px;
}
#top .biz-hero-description {
  max-width: 32em;
  font-size: 16px;
  line-height: 2;
  color: #495447;
  opacity: 1;
}
#top .biz-hero-image img { object-position: center center; }
@media (max-width: 749px) {
  #top .biz-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    padding-bottom: 36px;
  }
  /* Contents remain in their original reading order in the BODY. */
  #top .biz-hero-content { display: contents; }
  #top .biz-hero-image {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: clamp(340px, 90vw, 460px);
    min-width: 0;
  }
  #top .biz-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  #top .biz-hero-overlay {
    display: block;
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(248,247,241,.97) 0%, rgba(248,247,241,.89) 43%, rgba(248,247,241,.25) 70%, rgba(248,247,241,0) 100%);
  }
  #top .biz-hero-label {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    align-self: start;
    margin: 28px 24px 0;
    padding: 0;
    font-size: 10px;
    color: #394d39;
  }
  #top .biz-hero h1 {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    align-self: start;
    margin: 66px 24px 24px;
    padding: 0;
    font-size: clamp(28px, 7.6vw, 38px);
    line-height: 1.65;
    color: #293e2f;
    letter-spacing: .025em;
  }
  #top .biz-hero-service {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    width: auto;
    max-width: calc(100% - 48px);
    margin: 30px 24px 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.8;
  }
  #top .biz-hero-service::before,
  #top .biz-hero-service::after { flex-basis: 20px; width: 20px; }
  #top .biz-hero-lead {
    grid-column: 1;
    grid-row: 3;
    max-width: none;
    margin: 20px 24px 0;
    font-size: 16px;
    line-height: 1.95;
  }
  #top .biz-hero-description {
    grid-column: 1;
    grid-row: 4;
    max-width: none;
    margin: 16px 24px 0;
    font-size: 15px;
    line-height: 2;
  }
  #top .hero-buttons {
    grid-column: 1;
    grid-row: 5;
    margin: 26px 24px 0;
  }
}

/* Keep Japanese headings readable: wrap only at intentional breaks. */
#top h1,
#top h2,
#top h3 {
  overflow-wrap: normal;
  word-break: keep-all;
  line-break: strict;
  text-wrap: balance;
}
#top .biz-hero h1 br,
#top main h2 br:not(.sp),
#top .brand-section h2 br {
  display: initial;
}

/* Unified typography and reading rhythm. */
#top,
#top button,
#top input,
#top select,
#top textarea {
  font-family: "Noto Sans JP", sans-serif;
}
#top h1,
#top h2,
#top .natural-message,
#top .natural-lead {
  font-family: "Yu Mincho", "游明朝", "YuMincho", serif;
}
#top .space-card h3 {
  font-family: "Noto Sans JP", sans-serif;
}
#top .space-no,
#top time,
#top [class*="price"],
#top [class*="number"] {
  font-family: "Lato", sans-serif;
}
#top .section p:not(.space-en):not(.solution-category):not(.service-label),
#top .biz-hero-lead,
#top .biz-hero-description {
  line-height: 2;
}

/* Subtle scroll reveal. Content remains visible when JavaScript is unavailable. */
#top .reveal-target {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .95s ease var(--reveal-delay, 0ms),
    transform .95s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
#top .reveal-target.is-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #top .reveal-target,
  #top .reveal-target.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* Final smartphone composition. */
@media (max-width:749px) {
  /* Put the mobile header in normal flow; this removes the empty band that
     was created by padding reserved for an absolutely positioned bar. */
  #top .site-header {
    display:flex;
    flex-direction:column;
    padding-top:0 !important;
  }

  #top .hamburger {
    position:relative !important;
    inset:auto !important;
    order:1;
    flex:none;
    width:100%;
    height:76px;
    margin:0;
    padding:12px 24px;
    text-align:right;
  }

  #top .biz-hero {
    order:2;
    grid-template-rows:clamp(340px,90vw,430px) auto auto auto;
    padding-bottom:34px;
  }

  #top .drawer-menu {
    order:3;
  }

  /* Main statement and service descriptor form one group on the photograph. */
  #top .biz-hero h1 {
    grid-row:1;
    align-self:start;
    margin:38px 24px 0;
    font-size:clamp(28px,7.5vw,36px);
    line-height:1.58;
  }

  #top .biz-hero-service {
    position:relative;
    z-index:2;
    grid-row:1;
    align-self:start;
    justify-self:start;
    margin:166px 24px 0;
    color:var(--biz-dark);
    font-size:13px;
    font-weight:700;
    line-height:1.6;
  }

  #top .biz-hero-service::before,
  #top .biz-hero-service::after {
    display:none;
    content:none;
  }

  #top .biz-hero-lead {
    grid-row:2;
    margin-top:28px;
  }

  #top .biz-hero-description {
    grid-row:3;
  }

  #top .hero-buttons {
    grid-row:4;
  }

  /* Preserve only the intended break after 「香りを、」. */
  #top .biz-intro h2 {
    font-size:clamp(20px,6vw,26px) !important;
    line-height:1.7;
    letter-spacing:.025em;
    white-space:nowrap;
  }

  /* Reset legacy news styles loaded from the common stylesheet. */
  #top .news-section {
    padding:42px 24px;
  }

  #top #news {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  #top #news dt,
  #top #news dd {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  #top #news dt {
    font-size:15px;
  }

  #top #news dd.window > a {
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    padding:18px 0 !important;
    border-top:1px solid var(--biz-line) !important;
    border-bottom:1px solid var(--biz-line) !important;
  }

  #top #news dd.window > a > p {
    display:grid !important;
    grid-template-columns:96px minmax(0,1fr) !important;
    align-items:start;
    gap:14px;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    font-size:14px;
    line-height:1.75;
    word-break:normal;
    overflow-wrap:break-word;
  }

  #top #news dd.window time,
  #top #news dd.window span {
    display:block;
    width:auto !important;
    min-width:0;
    margin:0 !important;
    padding:0 !important;
    white-space:normal;
  }

  #top #news dd:last-child a {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid var(--biz-green);
    font-size:13px;
  }
}

@media (max-width:359px) {
  #top .biz-hero h1 {
    margin-top:30px;
    font-size:27px;
  }

  #top .biz-hero-service {
    margin-top:152px;
    font-size:12px;
  }

  #top #news dd.window > a > p {
    grid-template-columns:1fr !important;
    gap:5px;
  }
}

/* Compact business-service cards on smartphones only. */
@media (max-width:749px) {
  #top .business-section .order-grid {
    gap:18px;
  }

  #top .business-section .order-grid .order-item {
    position:relative !important;
    height:230px !important;
    min-height:230px;
    overflow:hidden !important;
    background:#233526;
  }

  #top .business-section .order-item picture {
    position:absolute !important;
    inset:0;
    width:100%;
    height:100% !important;
  }

  #top .business-section .order-item picture img {
    position:absolute !important;
    inset:0;
    width:100%;
    height:100% !important;
    object-fit:cover;
    object-position:center;
  }

  #top .business-section .order-item::after {
    content:"" !important;
    position:absolute;
    z-index:1;
    inset:0;
    background:linear-gradient(180deg,rgba(20,33,23,.08) 18%,rgba(20,33,23,.82) 100%);
    pointer-events:none;
  }

  #top .business-section .order-item .text {
    position:absolute !important;
    z-index:2;
    inset:auto 0 0;
    width:100%;
    padding:46px 22px 20px;
    background:linear-gradient(180deg,rgba(25,39,28,0),rgba(25,39,28,.55));
    color:#fff;
    text-shadow:0 1px 10px rgba(0,0,0,.3);
  }

  #top .business-section .order-item .title {
    margin:0 0 6px;
    color:#fff;
    font-family:"Noto Sans JP",sans-serif;
    font-size:23px;
    font-weight:600;
    line-height:1.45;
  }

  #top .business-section .text p:last-child {
    margin:0;
    color:rgba(255,255,255,.94);
    font-size:13px;
    line-height:1.7;
  }
}

/* Mobile photo crops: keep the visual focus slightly lower. */
@media (max-width:749px) {
  #top .biz-hero-image img {
    object-position:center 64% !important;
  }

  #top .space-photo img {
    object-position:center 64% !important;
  }

  #top .solution-item picture img {
    object-position:center 78% !important;
  }

  #top .business-section .order-item picture img {
    object-position:center 66% !important;
  }

  #top .biz-intro {
    background-position:center 60%;
  }

  #top .natural-section {
    background-position:center 64%;
  }

  /* Individual space-card crops: keep each diffuser clearly in frame. */
  #top .space-grid > .space-card:nth-child(1) .space-photo img {
    object-position:48% 88% !important;
  }

  #top .space-grid > .space-card:nth-child(2) .space-photo img {
    aspect-ratio:16 / 9;
    object-position:58% 66% !important;
  }

  #top .space-grid > .space-card:nth-child(4) .space-photo img {
    object-position:54% 90% !important;
  }
}

/* Desktop photo crops: show the installed devices without cutting their base. */
@media (min-width:750px) {
  #top .space-photo img {
    aspect-ratio:16 / 7;
  }

  #top .space-grid > .space-card:nth-child(1) .space-photo img {
    object-position:48% 88%;
  }

  #top .space-grid > .space-card:nth-child(2) .space-photo img {
    object-position:58% 66%;
  }

  #top .space-grid > .space-card:nth-child(3) .space-photo img {
    object-position:48% 88%;
  }

  #top .space-grid > .space-card:nth-child(4) .space-photo img {
    object-position:54% 90%;
  }

  #top .solution-item picture img {
    aspect-ratio:16 / 9;
    object-position:center bottom;
  }
}

/* Trial: use the shared site header instead of this page's custom header. */
#Header,
#ctl00_BodyHeaderMain_upUpdatePanel {
  display: block !important;
}
#top .site-header .nav,
#top .hamburger,
#top .drawer-menu {
  display: none !important;
}