@charset "UTF-8";

/* 公式サイトと同じロゴ画像を、通常ページと体験モードで使用する。 */
.concept-a .wordmark { display: flex; flex: none; align-items: center; width: clamp(100px, 9vw, 126px); height: 100%; line-height: 1; }
.concept-a .wordmark img { display: block; width: 100%; height: auto; }
.concept-a .experience-brand { display: inline-flex; align-items: center; gap: 16px; }
.concept-a .experience-brand-mark { display: grid; place-items: center; width: 118px; height: 52px; padding: 0 8px; background: #fff; }
.concept-a .experience-brand-mark img { display: block; width: 100%; height: auto; }
.concept-a .experience-brand small { margin-left: 0; }

/* Hero はヘッダーの下から、最初の画面の下端まで広がる。 */
.concept-a .a-hero { min-height: calc(100svh - 106px); min-height: calc(100dvh - 106px); }
.concept-a .a-hero-inner { flex: 1; min-height: 0; padding-block: clamp(28px, 4vh, 58px) clamp(22px, 3vh, 42px); }
.concept-a .a-scroll { flex: none; }
@media (min-width: 851px) {
  .concept-a .a-hero-photo-wrap { aspect-ratio: 1.22; }
}
@media (min-width: 851px) and (max-height: 760px) {
  .concept-a .a-hero-inner { padding-block: 18px 14px; }
  .concept-a .a-hero-foot { margin-top: 26px; }
}
@media (max-width: 850px) {
  .concept-a .a-hero { min-height: calc(100svh - 106px); min-height: calc(100dvh - 106px); }
  .concept-a .a-hero-inner { padding-block: clamp(26px, 4vh, 44px) 24px; }
  .concept-a .a-hero-visual, .concept-a.js-motion .a-hero-visual[data-proximity-focus] { position: absolute; z-index: 0; inset: auto 0 0; width: 100%; max-width: none; height: 47%; margin: 0; opacity: .24; pointer-events: none; }
  .concept-a .a-hero-photo-wrap { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; mask-image: linear-gradient(to bottom, transparent, #000 38%); }
  .concept-a .a-hero-photo-wrap img { object-position: center 42%; }
  .concept-a .a-hero-visual figcaption, .concept-a .a-hero-visual-corner { display: none; }
  .concept-a .a-hero-copy, .concept-a .a-scroll { z-index: 2; }
}
@media (max-width: 600px) {
  .concept-a .wordmark { width: 94px; }
  .concept-a .experience-brand-mark { width: 98px; height: 44px; }
  .concept-a .a-hero-inner { padding-top: 26px; }
  .concept-a .a-hero-actions { margin-top: 24px; }
  .concept-a .a-hero-foot { margin-top: 28px; }
}

/* 黒い導入画面: コピー → 公式ロゴ → Hero。JavaScript が使えない場合も CSS で閉じる。 */
.page-intro { display: none; }
.concept-a:has(.page-intro:not([hidden])) .skip:focus { z-index: 250; border: 1px solid #a5d3ae; }
.page-intro:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #080b09;
  color: #f5f7f3;
}
.page-intro.is-playing { animation: intro-screen 2.6s linear both; }
.page-intro.is-paused,
.page-intro.is-paused * { animation-play-state: paused !important; }
.page-intro:not(.is-playing) * { animation-play-state: paused; }
.page-intro[hidden] { display: none !important; }
.page-intro-ornament {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 57% at 20% 40%, rgba(39,105,65,.11), transparent 78%), radial-gradient(ellipse 50% 60% at 80% 65%, rgba(55,117,76,.09), transparent 75%);
}
.page-intro-orbit { position: absolute; display: block; box-sizing: border-box; border: 1px solid rgba(135,187,148,.3); border-radius: 50%; animation: intro-ornament-in 2.6s ease both; }
.page-intro-orbit-left { width: min(77vw, 1050px); aspect-ratio: 1; left: -34%; top: -38%; border-right-color: rgba(157,211,168,.11); transform: rotate(-16deg); }
.page-intro-orbit-right { width: min(63vw, 850px); aspect-ratio: 1; right: -25%; bottom: -56%; border-left-color: rgba(157,211,168,.1); animation-delay: .16s; }
.page-intro-trace { position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(130,185,144,.2) 18%, rgba(170,223,179,.08) 50%, rgba(130,185,144,.2) 82%, transparent); transform-origin: left center; animation: intro-trace 2.6s ease both; }
.page-intro-trace::after { content: ""; position: absolute; top: -1px; left: 0; width: 17%; height: 3px; background: linear-gradient(90deg, transparent, #b8dfbd, transparent); filter: blur(1px); animation: intro-scan 2.6s ease-in-out both; }
.page-intro-node { position: absolute; z-index: 1; top: calc(50% - 3px); width: 6px; height: 6px; border: 1px solid #91c49c; border-radius: 50%; background: #152b1d; box-shadow: 0 0 0 5px rgba(121,178,133,.09), 0 0 20px rgba(143,208,157,.23); animation: intro-node 2.6s ease both; }
.page-intro-node-left { left: 13%; }
.page-intro-node-right { right: 13%; animation-delay: .2s; }
.page-intro-corner { position: absolute; width: 25px; height: 25px; opacity: .55; animation: intro-ornament-in 2.6s ease both; }
.page-intro-corner-top { top: clamp(22px, 4vw, 55px); left: clamp(22px, 4vw, 55px); border-top: 1px solid #96c8a0; border-left: 1px solid #96c8a0; }
.page-intro-corner-bottom { right: clamp(22px, 4vw, 55px); bottom: clamp(22px, 4vw, 55px); border-right: 1px solid #96c8a0; border-bottom: 1px solid #96c8a0; }
.page-intro-caption { position: absolute; color: #a4c7ad; font: 10px ui-monospace,monospace; letter-spacing: .22em; white-space: nowrap; animation: intro-caption 2.6s ease both; }
.page-intro-caption-top { top: clamp(23px, 4vw, 57px); left: clamp(62px, 7vw, 100px); }
.page-intro-caption-bottom { bottom: clamp(30px, 4vw, 58px); left: clamp(22px, 4vw, 55px); }
.page-intro-stage { position: relative; z-index: 1; pointer-events: none; width: min(100% - 48px, 980px); display: grid; place-items: center; min-height: 310px; }
.page-intro-title { position: absolute; inset: auto 0; margin: 0; color: #f3f7f2; font-size: clamp(42px, 8vw, 112px); font-weight: 700; letter-spacing: -.09em; line-height: 1.15; text-align: center; animation: intro-title 2.6s cubic-bezier(.18,.8,.2,1) both; }
.page-intro-title span { display: block; }
.page-intro-title span:last-child { color: #bde0c3; }
.page-intro-logo { width: clamp(240px, 35vw, 510px); background: transparent; animation: intro-logo 2.6s cubic-bezier(.18,.8,.2,1) both; }
.page-intro-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff); }
.page-intro-rule { position: absolute; pointer-events: none; bottom: clamp(28px, 6vh, 64px); left: 50%; width: min(260px, 42vw); height: 1px; background: #65a579; transform-origin: left; animation: intro-rule 2.6s ease both; }
.page-intro-skip { position: absolute; z-index: 2; right: clamp(20px, 4vw, 58px); bottom: clamp(20px, 4vh, 42px); display: inline-flex; align-items: center; gap: 20px; min-height: 44px; padding: 8px 14px; border: 1px solid #a3c9aa; border-radius: 100px; background: #17291d; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.page-intro-skip:hover { color: #fff; }
.page-intro-skip:focus-visible { outline: 3px solid #e0f5e3; outline-offset: 5px; }
@keyframes intro-screen { 0%, 82% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes intro-title { 0% { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(9px); } 13%, 37% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 48%, 100% { opacity: 0; transform: translateY(-16px) scale(1.035); filter: blur(6px); } }
@keyframes intro-logo { 0%, 41% { opacity: 0; transform: translateY(24px) scale(.9); filter: blur(10px); } 59%, 78% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 89%, 100% { opacity: 0; transform: translateY(-10px) scale(1.02); filter: blur(3px); } }
@keyframes intro-rule { 0%, 40% { opacity: 0; transform: translateX(-50%) scaleX(0); } 60%, 82% { opacity: .7; transform: translateX(-50%) scaleX(1); } 100% { opacity: 0; transform: translateX(-50%) scaleX(1); } }
@keyframes intro-ornament-in { 0% { opacity: 0; scale: .96; } 16%, 79% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 1.02; } }
@keyframes intro-trace { 0%, 8% { opacity: 0; scale: 0 1; } 28%, 80% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1 1; } }
@keyframes intro-scan { 0%, 19% { opacity: 0; translate: 0 0; } 27% { opacity: .9; } 75% { opacity: .9; } 86%, 100% { opacity: 0; translate: 510% 0; } }
@keyframes intro-node { 0%, 14% { opacity: 0; scale: .3; } 31%, 78% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .4; } }
@keyframes intro-caption { 0%, 22% { opacity: 0; translate: 0 5px; } 40%, 77% { opacity: .75; translate: 0 0; } 100% { opacity: 0; translate: 0 -4px; } }

/* オープニング直後、Hero の文字と画像が別々に立ち上がる。 */
.page-intro.is-done ~ main .a-hero-copy { animation: hero-copy-enter .9s cubic-bezier(.16,1,.3,1) both; }
.page-intro.is-done ~ main .a-hero-visual { animation: hero-visual-enter 1.15s .12s cubic-bezier(.16,1,.3,1) both; }
.page-intro.is-done ~ main .a-scroll { animation: hero-scroll-enter .8s .45s ease both; }
@media (max-width: 850px) {
  .page-intro.is-done ~ main .a-hero-visual { animation: none; }
}
@keyframes hero-copy-enter { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-visual-enter { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes hero-scroll-enter { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 600px) {
  .page-intro-stage { min-height: 240px; }
  .page-intro-title { font-size: clamp(38px, 11vw, 62px); }
  .page-intro-skip { right: 24px; bottom: 25px; }
  .page-intro-orbit-left { width: 125vw; left: -72%; top: -9%; }
  .page-intro-orbit-right { width: 115vw; right: -85%; bottom: -12%; }
  .page-intro-trace { left: 5%; right: 5%; }
  .page-intro-node-left { left: 9%; }
  .page-intro-node-right { right: 9%; }
  .page-intro-caption { font-size: 8px; letter-spacing: .14em; }
  .page-intro-caption-top { top: 29px; left: 52px; }
  .page-intro-caption-bottom { left: 22px; bottom: 94px; }
  .page-intro-corner-top { top: 25px; left: 22px; width: 18px; height: 18px; }
  .page-intro-corner-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-intro-ornament { display: none; }
  .page-intro.is-done ~ main .a-hero-copy, .page-intro.is-done ~ main .a-hero-visual, .page-intro.is-done ~ main .a-scroll { animation: none; }
}