/* motion-catalog:multi-slider start — 複数画像のスライダー（Multi-item Slider） */
.msl { display: flex; flex-direction: column; background: var(--sunk, #F2F2F4); color: var(--ink, #121214); --f: var(--fj, "Noto Sans JP", sans-serif); --fe: var(--fd, "Manrope", sans-serif); font-family: var(--f); }
.msl-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2.4cqh; padding: 4cqh 0 2cqh; background: var(--surface, #fff); }
.msl-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 5cqw; }
.msl-head b { font: 900 clamp(12px, 3cqw, 26px)/1.2 var(--f); }
.msl-head span { font: 700 clamp(9px, 1.5cqw, 12px)/1 var(--fe); letter-spacing: .14em; color: var(--muted, #6E6E78); }
.msl-view { flex: 1; min-height: 0; container-type: inline-size; overflow: hidden; display: grid; align-content: center; gap: var(--g); padding: 0 5cqw; outline: none; --w: 31cqi; --g: 2.4cqi; }
.msl-view:focus-visible { box-shadow: inset 0 0 0 2px var(--blue, #2563FF); }
.msl-track { --i: 0; display: flex; gap: var(--g); margin: 0; padding: 0 var(--g) 0 0; list-style: none; width: max-content; transform: translateX(calc(var(--off, 0px) - var(--i) * (var(--w) + var(--g)))); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.msl-c { position: relative; flex: 0 0 var(--w); aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: linear-gradient(var(--a), var(--b)); transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .6s; }
.msl-c::before { content: ""; position: absolute; inset: 0; }
.msl-c[data-k="sun"]::before { background: linear-gradient(transparent 66%, rgba(12, 40, 80, .55) 66%), radial-gradient(circle at 50% 66%, #FFF3C4 0 15%, transparent 16%); }
.msl-c[data-k="peak"]::before { background: rgba(18, 40, 52, .55); clip-path: polygon(0 100%, 0 76%, 28% 42%, 48% 62%, 72% 30%, 100% 68%, 100% 100%); }
.msl-c[data-k="hill"]::before { background: radial-gradient(ellipse 70% 38% at 28% 100%, rgba(25, 45, 30, .6) 98%, transparent), radial-gradient(ellipse 60% 28% at 86% 100%, rgba(20, 30, 20, .7) 98%, transparent), radial-gradient(circle at 74% 26%, rgba(255, 255, 255, .9) 0 6%, transparent 7%); }
.msl-c span { position: absolute; left: 7%; bottom: 7%; color: #fff; font: 800 clamp(9px, 2.4cqi, 16px)/1.3 var(--f); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.msl-c small { display: block; font: 700 .7em/1.4 var(--fe); letter-spacing: .14em; opacity: .85; }
.msl-track.is-b, .msl-c.is-clone { display: none; }
.msl-ctl { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 5cqw; }
.msl-arw, .msl-play { flex: none; height: clamp(28px, 5cqw, 40px); border: 1px solid var(--rule, #D3D3D9); border-radius: 99px; background: var(--surface, #fff); color: var(--ink, #121214); cursor: pointer; display: grid; place-items: center; transition: background .25s; }
.msl-arw { width: clamp(28px, 5cqw, 40px); } .msl-arw:hover { background: var(--sunk, #F2F2F4); }
.msl-play { display: none; padding: 0 14px; font: 700 clamp(9px, 1.5cqw, 12px)/1 var(--f); }
.msl-dots { display: flex; }
.msl-dot { height: 24px; padding: 0 3px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.msl-dot i { width: 7px; height: 7px; border-radius: 4px; background: var(--rule, #D3D3D9); transition: width .4s cubic-bezier(.16, 1, .3, 1), background .3s; }
.msl-dot[aria-current="true"] i { width: 22px; background: var(--ink, #121214); }
.msl :is(.msl-arw, .msl-dot, .msl-play, .msl-demo button):focus-visible { outline: 2px solid var(--blue, #2563FF); outline-offset: 2px; }
.msl[data-variant="center-focus"] .msl-view { --w: 44cqi; --off: calc((100cqi - var(--w)) / 2); }
.msl[data-variant="center-focus"] .msl-c:not(.is-cur) { transform: scale(.84); opacity: .45; cursor: pointer; }
.msl:is([data-variant="marquee"], [data-variant="contrast"]) :is(.msl-c.is-clone, .msl-play) { display: grid; }
.msl:is([data-variant="marquee"], [data-variant="contrast"]) :is(.msl-arw, .msl-dots) { display: none; }
.msl:is([data-variant="marquee"], [data-variant="contrast"]) .msl-view { padding: 0; }
.msl[data-variant="marquee"] .msl-view { --w: 27cqi; }
.msl[data-variant="marquee"] .msl-track { animation: msl-flow 28s linear infinite; }
.msl[data-variant="contrast"] .msl-view { --w: 21cqi; --g: 1.6cqi; }
.msl[data-variant="contrast"] .msl-track { animation: msl-flow 24s linear infinite; }
.msl[data-variant="contrast"] .msl-track.is-b { display: flex; animation-direction: reverse; }
.msl.is-stop .msl-track, .msl-view:is(:hover, :focus-within) .msl-track { animation-play-state: paused; }
@keyframes msl-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.msl-demo { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 1.2cqh 8px; }
.msl-demo button { border: 1px solid var(--rule, #D3D3D9); border-radius: 99px; background: var(--surface, #fff); color: var(--ink, #121214); padding: 3px 9px; font: 700 clamp(9px, 1.6cqw, 12px)/1.3 var(--f); cursor: pointer; }
.msl-demo button[aria-pressed="true"] { background: var(--ink, #121214); color: var(--surface, #fff); border-color: var(--ink, #121214); }
@media (prefers-reduced-motion: reduce) { .msl *, .msl-track { animation: none !important; transition: none !important; } .msl-view { overflow-x: auto; } }
/* ページに置いたときの高さ（見本では枠いっぱい） */
.msl.fill { width: 100%; min-height: min(100svh, 720px); }
/* motion-catalog:multi-slider end */

.part-works .msl { width: 100%; background: transparent; }
.part-works .msl-wrap { background: transparent; padding: 0; gap: 16px; }
.part-works .msl-head { padding: 0; }
.part-works .msl-view { padding: 0; overflow: clip; }
.part-works .msl-track { padding-left: 0; }
.part-works .msl-arw { width: 40px; height: 40px; }
.part-works .msl-play { display: grid; height: 40px; }
.msl-work { position: relative; display: block; width: 100%; height: 100%; border: 0; padding: 0; background: #252229; cursor: pointer; }
.msl-work img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.msl-work span { inset: auto 0 0; padding: 14px 8px 8px; background: linear-gradient(transparent, rgb(0 0 0 / 80%)); }
.msl-work:focus-visible { outline: 3px solid white; outline-offset: -4px; }
@media (max-width: 600px) {
  .msl[data-variant="center-focus"] .msl-view { --w: 68cqi; }
}

.part-works .msl-stage { position: relative; }
.part-works .msl-stage .msl-arw {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.part-works .msl-stage .is-prev { left: 4px; }
.part-works .msl-stage .is-next { right: 4px; }

.part-works .msl-stage .msl-arw {
  background-color: #d5b777;
  border-color: #b79a62;
  color: #2f2a23;
  box-shadow: 0 5px 16px #8c73471a;
}
.part-works .msl-stage .msl-arw:is(:hover, :focus-visible) {
  background-color: #fffaf2;
  color: #8a6f3f;
  box-shadow: none;
}
.part-works .msl-stage .msl-arw:focus-visible {
  outline-color: #8a6f3f;
}

.part-works .flyer-mockup {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 5%;
  padding: 6% 8%;
  margin: 16px auto 28px;
  border-radius: 10px;
  background: radial-gradient(ellipse at 30% 15%, #f5eee3, #e4d6c4);
}
.part-works .flyer-mockup.mielle-paper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: radial-gradient(ellipse at 30% 15%, #f8efed, #e8dbd8);
}
.part-works .dialog-content .flyer-mockup > img {
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0;
  box-shadow: 2px 4px 10px #38281f45;
}

@media (max-width: 700px) {
  .part-fv .small-work {
    box-sizing: border-box;
    width: min(39%, 160px);
    margin-right: 8px;
  }

  .part-fv .small-work img {
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 700px) {
  .part-consult .consult-solution {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }
}

@media (min-width: 701px) {
  .part-fv .small-work {
    box-sizing: border-box;
  }

  .part-fv .small-work img {
    object-fit: contain;
    object-position: center;
  }
}

/* Show three full cards when space permits, or one full card on narrow screens. */
.part-works .msl[data-variant="center-focus"] .msl-view {
  --w: 33cqi;
}
.part-works .msl-work {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: #fff;
}
.part-works .msl-work > img {
  min-height: 0;
  object-fit: contain;
  object-position: center;
}
.part-works .msl-work > span {
  font-family: Lato, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 400;
  letter-spacing: .035em;
  position: absolute;
  inset: auto 0 0;
  padding: 14px 8px 8px;
  color: #fff;
  background: linear-gradient(to bottom, rgb(64 52 55 / 0%), rgb(64 52 55 / 94%));
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .part-works .msl[data-variant="center-focus"] .msl-view {
    --w: 100cqi;
  }
}

@media (min-width: 841px) {
  .site-logo {
    position: relative;
    background-image: none;
  }

  .site-logo::before,
  .site-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: inherit;
    background-size: inherit;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  .site-logo::before {
    background-image: url("assets/img/logo-header-aligned.png");
    clip-path: inset(0 63% 0 0);
  }
  .site-logo::after {
    background-image: url("assets/img/logo-header-arch.webp?v=2");
    background-position: left calc(50% + 11px);
    clip-path: inset(0 0 0 37%);
  }
}

@media (min-width: 841px) and (max-width: 1000px) {
  .site-logo::after {
    background-position: left calc(50% + 9px);
  }
}

@media (min-width: 701px) {
  .part-works .msl[data-variant="center-focus"] .msl-track {
    padding-block: 5.25cqi;
  }
  .part-works .msl[data-variant="center-focus"] .msl-c.is-cur {
    transform: scale(1.42);
    z-index: 1;
  }
  .part-works .msl[data-variant="center-focus"] .msl-c:not(.is-cur) {
    transform: scale(.70);
  }
}

@media (max-width: 700px) {
  .about-phrase {
    white-space: nowrap;
  }
}

.part-about .area-mobile { display: none; }
@media (max-width: 700px) {
  .part-about .area-desktop { display: none; }
  .part-about .area-mobile {
    display: inline;
    font-size: clamp(8px, 3.1vw, 12px);
    letter-spacing: 0;
    white-space: nowrap;
  }
}