.smalllife-front .site-content,
.smalllife-front .ast-container,
.smalllife-front #primary { max-width: none; width: 100%; margin: 0; padding: 0; }
.smalllife-front .site-content { display: block; }
.sl-front-main { max-width: var(--sl-max); margin: 0 auto; overflow: hidden; background: #000; }
.sl-container { position: relative; width: 100%; max-width: var(--sl-max); margin: 0 auto; padding-right: var(--sl-gutter); padding-left: var(--sl-gutter); }
.sl-narrow { max-width: 760px; }
.sl-center { margin-right: auto; margin-left: auto; text-align: center; }
.sl-dark { background: var(--sl-black); color: #fff; }
.sl-navy { background: var(--sl-navy); color: #fff; }
.sl-light { background: var(--sl-light); color: var(--sl-ink); }
.smalllife-front :is(.sl-dark, .sl-navy, .sl-contact) :is(h1, h2, h3, h4, h5, h6),
.smalllife-front .sl-price-grid :is(h3, h4, h5, h6, strong) { color: inherit; }
.sl-section { position: relative; padding: clamp(72px, 9.4vw, 120px) 0; }
.sl-section p, .sl-split-copy > p { margin: 22px 0 0; font-size: 16px; font-weight: 300; line-height: 1.95; letter-spacing: .025em; }
.sl-section h3, .sl-split h3 { margin: 36px 0 0; font-size: clamp(22px, 3vw, 32px); line-height: 1.55; letter-spacing: .01em; }
.sl-section-head h2 { margin: 0; font: 700 clamp(32px, 5vw, 48px)/1.05 Archivo, sans-serif; letter-spacing: -.01em; }
.sl-section-head p { margin: 12px 0 0; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; }
.sl-light .sl-section-head p, .sl-split.sl-light .sl-section-head p { color: var(--sl-link); }
.sl-section-head > span, .sl-rule { display: block; width: 40px; height: 4px; margin-top: 18px; background: currentColor; }
.sl-light .sl-section-head > span, .sl-split.sl-light .sl-section-head > span { background: var(--sl-link); }
.sl-section-lead { max-width: 720px; color: var(--sl-muted); }
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--sl-ease), transform 700ms var(--sl-ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.sl-hero { position: relative; display: flex; min-height: min(820px, 100svh); padding: 132px var(--sl-gutter) 58px; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.sl-hero-image, .sl-hero-grid, .sl-hero-scrim, .sl-flock { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; }
.sl-hero-image { object-fit: cover; }
.sl-hero-grid { z-index: -3; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 4px 4px; }
.sl-hero-scrim { z-index: -2; background: linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.16) 42%,rgba(0,0,0,.82)); }
.sl-flock { z-index: -1; display: block; pointer-events: none; }
.sl-flock > * { display: block; width: 100%; height: 100%; }

/*
 * 入れ替えのすれ違い。
 *
 * 器は2枚あり、出番でないほうに data-idle が付きます。1200ms は
 * hero.js の FADE と揃えてください。ずれると、消えた器の中身を
 * 取り除く時機が合わなくなります。
 */
.sl-flock { transition: opacity 1200ms var(--sl-ease); }
.sl-flock[data-idle] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* 入れ替え自体を行わないので、消える動きも要りません。 */
  .sl-flock { transition: none; }
}
.sl-flock canvas { display: block; width: 100%; height: 100%; }

/* ヒーロー背景の形。data-shape はブラウザ側の抽選結果（assets/js/hero.js）が入る。
   イワシの群れだけはヒーロー全面を泳ぐので、上の inset: 0 のまま。
   移植した7種は輪郭のある「塊」なので、見出しを避けて右側に置く。 */
.sl-flock:not([data-shape="flock"]) {
  top: 46%;
  right: 3%;
  bottom: auto;
  left: auto;
  width: min(600px, 46vw);
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
}
/* 渦は大きいほど渦に見える。右端を画面外へ逃がし、核を横位置80%あたりに。 */
.sl-flock[data-shape="galaxy"] {
  right: -18%;
  width: min(1200px, 92vw);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, #000 38%);
}
.sl-flock[data-shape="sphere"] { right: 2%; width: min(620px, 48vw); }
.sl-flock[data-shape="cube"]   { right: 3%; width: min(520px, 41vw); }
.sl-flock[data-shape="mobius"] { right: 2%; width: min(600px, 46vw); }
/* クジラは横長。正方形の器だと上下が余って小さく見える。 */
.sl-flock[data-shape="whale"]  { right: 4%; width: min(560px, 42vw); aspect-ratio: 16 / 10; }
/* 群れは端まで泳がせたいので右端に寄せ、見出し側は溶かす。 */
.sl-flock[data-shape="shoal"],
.sl-flock[data-shape="school"] {
  right: 0;
  width: min(770px, 52vw);
  aspect-ratio: 16 / 10;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 11%, #000 40%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 11%, #000 40%);
}
.sl-hero-frame { position: absolute; inset: 16px; border: 1px solid var(--sl-border); pointer-events: none; }
.sl-hero-labels { position: absolute; top: 19%; right: var(--sl-gutter); left: var(--sl-gutter); display: flex; justify-content: space-between; color: #9a9a9a; font: 600 clamp(12px,1.1vw,14px)/1 Archivo,sans-serif; letter-spacing: .14em; }
.sl-hero-labels span:nth-child(2) { transform: translateY(32px); }
.sl-hero-content { position: relative; max-width: 940px; }
.sl-hero h1 { margin: 0; color: #fff; font-size: clamp(46px,8.1vw,104px); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.sl-hero-sub { margin: 22px 0 0; color: #b4bbc0; font-size: clamp(15px,2vw,20px); line-height: 1.7; letter-spacing: .05em; }
.sl-hero-lead { max-width: 760px; margin: 24px 0 0; color: #fff; font-size: 16px; font-weight: 300; line-height: 1.9; letter-spacing: .03em; }
.sl-hero-actions { display: flex; margin-top: 32px; align-items: center; flex-wrap: wrap; gap: 20px 24px; }
.sl-hero-actions p { margin: 0; color: var(--sl-muted); font-size: 13px; line-height: 1.8; }
.sl-scroll { position: absolute; right: 38px; bottom: 44px; display: flex; align-items: center; flex-direction: column; gap: 14px; }
.sl-scroll span { writing-mode: vertical-rl; font: 400 11px/1 Archivo,sans-serif; letter-spacing: .25em; }
.sl-scroll i { display: block; width: 1px; height: 60px; background: linear-gradient(#fff,rgba(255,255,255,.05)); animation: sl-scroll-pulse 2.2s infinite ease-in-out; }
@keyframes sl-scroll-pulse { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity:.4; } 50% { transform: scaleY(1); opacity:1; } }

.sl-message { background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 4px 4px; }
.sl-message h3 { font-size: clamp(24px,4vw,36px); }
.sl-message-copy { margin-top: 40px; }
.sl-message-copy p { font-size: clamp(16px,1.5vw,18px); line-height: 2.25; letter-spacing: .055em; }

.sl-split { display: grid; min-height: 680px; grid-template-columns: 1fr 1fr; }
.sl-split-copy { padding: clamp(72px,8vw,110px) var(--sl-gutter); }
.sl-split-image { position: relative; min-height: 520px; overflow: hidden; }
.sl-split-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-index-list { margin: 38px 0 0; padding: 0; border-top: 1px solid var(--sl-border-light); list-style: none; }
.sl-index-list li { display: flex; padding: 12px 0; border-bottom: 1px solid var(--sl-border-light); gap: 20px; font-size: 15px; }
.sl-index-list span { color: var(--sl-copy); font: 500 11px/1.8 "Roboto Mono",monospace; letter-spacing: .12em; }

.sl-service-grid { display: grid; margin-top: 52px; border: 1px solid var(--sl-border); grid-template-columns: repeat(2,1fr); }
.sl-service-card { padding: clamp(24px,3vw,38px); border: 1px solid var(--sl-border); background: var(--sl-navy); }
.sl-service-card img { width: 100%; height: 170px; object-fit: cover; }
.sl-service-card small, .sl-case-list small { display: block; margin-top: 22px; color: var(--sl-muted); font: 500 12px/1 "Roboto Mono",monospace; letter-spacing: .14em; }
.sl-service-card h4 { margin: 14px 0 0; color: #fff; font-size: 21px; line-height: 1.5; }
.sl-service-card p { margin-top: 14px; color: var(--sl-muted); font-size: 15px; line-height: 1.85; }

.sl-two-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(36px,6vw,76px); }
.sl-align-center { align-items: center; }
.sl-wide-photo, .sl-area-photo { width: 100%; height: 280px; object-fit: cover; }
.sl-tool-label { color: var(--sl-copy); font: 500 12px/1.6 "Roboto Mono",monospace !important; letter-spacing: .12em !important; }
.sl-tool-list { margin: 18px 0 0; padding: 0; border-top: 1px solid var(--sl-border-light); list-style: none; }
.sl-tool-list li { padding: 12px 0; border-bottom: 1px solid var(--sl-border-light); }

.sl-case-layout { display: grid; margin-top: 56px; grid-template-columns: minmax(300px,.85fr) minmax(420px,1.15fr); gap: clamp(32px,4vw,52px); align-items: start; }
.sl-case-photo { position: sticky; top: 104px; height: 500px; margin: 0; overflow: hidden; }
.sl-case-photo img { width: 100%; height: 100%; object-fit: cover; }
.sl-case-photo figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 12px 16px; background: rgba(18,58,90,.92); color: #fff; font-size: 12px; }
.sl-case-list { border-top: 1px solid var(--sl-border); }
.sl-case-list article { display: grid; padding: 30px 0; border-bottom: 1px solid var(--sl-border); grid-template-columns: 48px 1fr; gap: 18px; }
.sl-case-list small { margin-top: 7px; }
.sl-case-list h4 { margin: 0; color: #fff; font-size: clamp(19px,2vw,24px); line-height: 1.5; }
.sl-case-list p { margin-top: 12px; color: var(--sl-muted); font-size: 15px; line-height: 1.85; }

.sl-task-list { margin: 48px 0 0; padding: 0; border-top: 1px solid var(--sl-border-light); list-style: none; }
.sl-task-list li { display: grid; padding: 23px 0; border-bottom: 1px solid var(--sl-border-light); grid-template-columns: 50px minmax(180px,.45fr) 1fr; align-items: baseline; gap: 22px; }
.sl-task-list small { color: var(--sl-copy); font: 500 12px/1 "Roboto Mono",monospace; }
.sl-task-list h4 { margin: 0; font-size: 19px; }
.sl-task-list p { margin: 0; color: var(--sl-copy); font-size: 15px; }
.sl-keywords { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--sl-border); font: 700 clamp(17px,2.1vw,23px)/1.8 Archivo,sans-serif; }
.sl-keywords i { margin: 0 8px; color: var(--sl-muted); font-style: normal; font-weight: 400; }
.sl-keywords b { color: #6ca4cd; }
.sl-name { display: flex; margin: 28px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--sl-border-light); align-items: baseline; flex-wrap: wrap; gap: 10px 18px; }
.sl-name b { font-size: 24px; }
.sl-name small { color: var(--sl-copy); }

.sl-vision { overflow: hidden; }
.sl-marquee { display: flex; width: max-content; margin-bottom: 64px; color: rgba(255,255,255,.15); animation: sl-marquee 40s linear infinite; }
.sl-marquee span { font: 700 clamp(46px,8vw,92px)/1 Archivo,sans-serif; white-space: nowrap; }
@keyframes sl-marquee { to { transform: translateX(-50%); } }
.sl-vision .sl-narrow { margin: 0; }
.sl-area-photo { height: 380px; }
.sl-text-link { display: inline-block; margin-top: 24px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); font-weight: 500; }
.sl-light .sl-text-link, .sl-split.sl-light .sl-text-link { color: var(--sl-link); border-bottom-color: rgba(42,108,160,.45); }

.sl-media-grid { display: grid; margin-top: 48px; grid-template-columns: repeat(3,1fr); gap: 30px; }
.sl-media-grid img { width: 100%; height: 200px; object-fit: cover; }
.sl-media-grid small { display: block; margin-top: 20px; color: var(--sl-copy); font: 500 12px/1 "Roboto Mono",monospace; }
.sl-media-grid h4 { margin: 12px 0 0; font-size: 19px; line-height: 1.5; }
.sl-media-grid p { margin-top: 10px; color: var(--sl-copy); font-size: 15px; line-height: 1.85; }
.sl-check-list { margin: 0; padding: 0; border-top: 1px solid var(--sl-border); list-style: none; }
.sl-check-list li { display: flex; padding: 17px 4px; border-bottom: 1px solid var(--sl-border); gap: 16px; color: #fff; line-height: 1.65; }
.sl-check-list span { color: #6ca4cd; }
.sl-price-grid { display: grid; margin-top: 48px; grid-template-columns: repeat(2,1fr); gap: 18px; }
.sl-price-grid article { display: flex; min-height: 480px; padding: clamp(28px,4vw,46px); flex-direction: column; background: var(--sl-blue-soft); color: #fff; }
.sl-price-grid article:nth-child(2) { background: var(--sl-blue); }
.sl-price-grid small { font: 500 12px/1 "Roboto Mono",monospace; letter-spacing: .14em; }
.sl-price-grid h4 { margin: 16px 0 0; font-size: clamp(20px,2.6vw,26px); line-height: 1.5; }
.sl-price-grid strong { display: block; margin-top: 14px; font: 700 clamp(34px,5vw,48px)/1.2 Archivo,sans-serif; }
.sl-price-grid strong em { margin-left: 8px; font: 500 15px/1 "Noto Sans JP",sans-serif; font-style: normal; }
.sl-price-grid p { color: #fff; font-size: 15px; }
.sl-price-grid .sl-button { margin-top: auto; padding-top: 28px; align-self: flex-end; }

.sl-news-grid { display: grid; margin-top: 48px; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px; }
.sl-news-card { min-width: 0; }
.sl-news-image { display: grid; height: 170px; overflow: hidden; place-items: center; background: var(--sl-navy); color: rgba(255,255,255,.45); font: 700 18px/1 Archivo,sans-serif; letter-spacing: .14em; }
.sl-news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sl-ease); }
.sl-news-card a:hover .sl-news-image img { transform: scale(1.035); }
.sl-news-meta { display: flex; margin-top: 18px; justify-content: space-between; gap: 12px; color: var(--sl-copy); font: 500 11px/1.5 "Roboto Mono",monospace; }
.sl-news-meta a { color: var(--sl-link); }
.sl-news-card h4 { margin: 10px 0 0; font-size: 17px; line-height: 1.55; }
.sl-no-posts { grid-column: 1/-1; padding: 28px 0; border-top: 1px solid var(--sl-border-light); border-bottom: 1px solid var(--sl-border-light); }

.sl-contact { padding-bottom: clamp(96px,11vw,150px); background: var(--sl-blue); color: #fff; }
.sl-contact .sl-button { margin-top: 32px; }

@media (max-width: 900px) {
  .sl-service-grid, .sl-news-grid { grid-template-columns: repeat(2,1fr); }
  .sl-media-grid { grid-template-columns: repeat(2,1fr); }
  .sl-case-layout { grid-template-columns: 1fr; }
  .sl-case-photo { position: relative; top: auto; height: min(70vw,500px); }
  .sl-scroll { display: none; }
}
@media (max-width: 720px) {
  .sl-front-main { width: 100%; }
  .sl-section { padding: 72px 0; }
  .sl-hero { min-height: 760px; padding-top: 110px; padding-bottom: 44px; }
  .sl-hero-labels { display: none; }
  .sl-hero h1 { font-size: clamp(46px,15vw,72px); }
  .sl-hero-sub { margin-top: 18px; }
  .sl-hero-actions { align-items: flex-start; flex-direction: column; }
  .sl-button span { padding: 0 18px; font-size: 14px; }
  .sl-button b { width: 50px; }
  .sl-message-copy p { line-height: 2; }
  .sl-message-copy br { display: none; }
  /* 900px 以下は右へ逃がす余白がない。見出しはヒーロー下寄せなので、
     形を上部の空きへ移し、下端をぼかして見出しに掛からないようにする。 */
  .sl-flock:not([data-shape="flock"]) {
    top: 27%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 見出しと同じ列に並ぶので、下端は必ず溶かして文字に掛からないようにする。 */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 92%);
  }
  .sl-flock[data-shape="galaxy"] { width: min(1100px, 132vw); }
  .sl-flock[data-shape="sphere"] { width: min(300px, 72vw); }
  .sl-flock[data-shape="whale"]  { width: min(360px, 94vw); }
  .sl-flock[data-shape="cube"]   { width: min(220px, 56vw); }
  .sl-flock[data-shape="mobius"] { width: min(270px, 68vw); }
  .sl-flock[data-shape="shoal"],
  .sl-flock[data-shape="school"] { width: min(400px, 100vw); }
  .sl-split, .sl-two-column, .sl-service-grid, .sl-news-grid, .sl-media-grid, .sl-price-grid { grid-template-columns: 1fr; }
  .sl-split { min-height: auto; }
  .sl-split-image { min-height: 72vw; }
  .sl-representative .sl-split-image { order: 2; }
  .sl-representative .sl-split-copy { order: 1; }
  .sl-service-grid { border: 0; gap: 1px; }
  .sl-service-card img { height: 150px; }
  .sl-task-list li { grid-template-columns: 36px 1fr; gap: 12px; }
  .sl-task-list p { grid-column: 2; }
  .sl-case-list article { grid-template-columns: 38px 1fr; }
  .sl-area-photo { height: 62vw; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .sl-marquee { animation-play-state: paused; }
  .sl-scroll i { animation: none; }
}