/* ===== 16 PALE BLUE DOT：画面に入ったら自動で再生（ページの最後） ===== */
/* 背景は透明：うしろの、まゆちゃんの絵の星空（base.css の .night-sky）の上で再生する */
main>section.s-space{padding:0}
.space-stage{
  /* 画面の高さの85%まで（最大760px）。スマホでも1画面に収まる */
  position:relative;height:min(85vh,150vw,760px);height:min(85svh,150vw,760px);min-height:440px;overflow:hidden;
}

/* 写真の上下のふちをぼかして、うしろの星空となじませる（パキッと線で分かれないように） */
.pbd-wrap{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 19%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 19%,#000 84%,transparent 100%)}
.pbd-photo{position:absolute;left:0;top:0;max-width:none;opacity:0;will-change:opacity}

/* 水彩の地球（日本・アジアが正面）。四角い絵を、まるく切り抜く */
.earth{position:absolute;left:0;top:0;width:1000px;height:1000px;transform-origin:50% 50%;will-change:transform}
.earth img{position:relative;width:100%;height:100%;-webkit-mask-image:radial-gradient(closest-side,#000 88%,transparent 97%);mask-image:radial-gradient(closest-side,#000 88%,transparent 97%)}
.earth-glow{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,rgba(130,190,255,.5) 58%,rgba(100,160,255,.2) 70%,rgba(90,140,255,0) 100%)}

.dot-marker{position:absolute;left:0;top:0;width:0;height:0;opacity:0}
.dot-marker::before{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,rgba(210,235,255,.85) 0 18%,rgba(160,205,255,.3) 45%,rgba(160,205,255,0) 72%)}
.dot-marker .ring{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(190,222,255,.85);animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.35);opacity:0}30%{opacity:1}100%{transform:scale(1.5);opacity:0}}

.here{position:absolute;left:0;top:0;opacity:0;color:#fff;white-space:nowrap;text-align:right}
.here::after{content:"";position:absolute;left:100%;top:100%;width:44px;height:1.5px;background:rgba(255,255,255,.85);transform-origin:0 50%;transform:translate(8px,8px) rotate(45deg)}
.here-text{font-family:var(--ff-hand);font-weight:600;font-size:clamp(18px,2.6vw,30px);line-height:1.7;letter-spacing:.06em;text-shadow:0 0 18px rgba(0,0,0,.7)}
.here-cap{margin-top:.5em;font-family:var(--ff-en);font-weight:300;font-size:12.5px;line-height:1.8;letter-spacing:.18em;color:rgba(255,255,255,.72)}

.distance{position:absolute;left:var(--gutter);bottom:calc(22px + env(safe-area-inset-bottom));display:flex;align-items:baseline;gap:.55em;color:rgba(255,255,255,.78);opacity:0}
.d-label{font-size:12px;letter-spacing:.1em}
.d-num{font-family:var(--ff-en);font-weight:300;font-size:clamp(20px,2.4vw,28px);letter-spacing:.06em;color:#fff;font-variant-numeric:tabular-nums}
.d-unit{font-family:var(--ff-en);font-size:13px;letter-spacing:.12em}

/* ことば（JSで順番にふわっと出す） */
.space-copy{position:absolute;z-index:2;color:#fff}
.space-copy.c1,.space-copy.c2,.c2 .final,.c2 .final-brand,.c2 .company-block{opacity:0}
.space-copy::before{content:"";position:absolute;inset:-50px -70px;z-index:-1;background:radial-gradient(closest-side,rgba(2,4,14,.62),rgba(2,4,14,0))}
.space-copy p{font-family:var(--ff-hand);font-weight:600;font-size:clamp(19px,2.3vw,28px);line-height:2;letter-spacing:.06em;text-shadow:0 0 20px rgba(0,0,0,.75)}
.space-copy p+p{margin-top:.8em}
.space-copy .final{font-size:clamp(21px,2.8vw,34px)}
.space-copy .final-brand{margin-top:1.1em;font-size:clamp(26px,3.4vw,40px);line-height:1.3;letter-spacing:.12em}
.final-brand .final-brand-label{display:block;margin-bottom:.45em;font-family:var(--ff-en);font-weight:300;font-size:14px;letter-spacing:.4em}
.company-block{margin-top:1.8em}
.space-copy .run-by{font-family:var(--ff-body);font-weight:500;font-size:12px;line-height:1.8;letter-spacing:.2em;color:rgba(255,255,255,.72)}
.space-copy .company{margin-top:.1em;padding-left:.3em;font-family:var(--ff-en);font-weight:300;font-size:clamp(24px,3vw,36px);line-height:1.3;letter-spacing:.3em}
@media (max-width:899px){
  .space-copy{left:var(--gutter);right:var(--gutter);bottom:calc(62px + env(safe-area-inset-bottom));text-align:center}
}
@media (min-width:900px){
  .space-copy{right:6%;top:50%;translate:0 -50%;max-width:640px;text-align:left}
  /* 最後のメッセージと施設名は、PCでも画面の中央でひとまとまりに。 */
  .space-copy.c2{left:var(--gutter);right:var(--gutter);max-width:none;text-align:center}
  .space-copy p{white-space:nowrap}
}

/* もう一度見る */
.replay{
  position:absolute;top:calc(18px + env(safe-area-inset-top));right:var(--gutter);z-index:3;
  display:inline-flex;align-items:center;gap:.45em;padding:.6em 1.15em;border:1px solid rgba(255,255,255,.45);border-radius:999px;
  background:rgba(255,255,255,.08);color:#fff;font:500 13px/1 var(--ff-body);letter-spacing:.08em;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .8s,background-color .2s;
}
.replay::before{content:"↻";font-size:15px}
.replay.is-on{opacity:1;pointer-events:auto}
.replay:hover{background:rgba(255,255,255,.18)}

/* スマホ：短くした画面の中に、ことば・PALE BLUE DOT が全部入るように文字を詰める */
@media (max-width:899px){
  .space-copy{bottom:calc(78px + env(safe-area-inset-bottom))}
  .space-copy p,.space-copy .final{font-size:17px;line-height:1.85}
  .space-copy .final-brand{margin-top:.8em;font-size:22px}
  .final-brand .final-brand-label{margin-bottom:.35em;font-size:11px}
  .company-block{margin-top:.8em}
  .space-copy .run-by{font-size:11px}
  .space-copy .company{font-size:18px}
  .here-text{font-size:16px}
  .here-cap{font-size:11px}
}

/* JSが動かないとき：最後の画面をそのまま表示 */
html:not(.js) .pbd-photo{width:100%;height:100%;object-fit:cover;opacity:1}
html:not(.js) .earth,html:not(.js) .distance,html:not(.js) .here,html:not(.js) .space-copy.c1,html:not(.js) .replay{display:none}
html:not(.js) .space-copy.c2,html:not(.js) .c2 .final,html:not(.js) .c2 .final-brand,html:not(.js) .c2 .company-block{opacity:1}

/* ===== フッター ===== */
.site-footer{padding:clamp(56px,8vw,90px) var(--gutter) calc(36px + env(safe-area-inset-bottom));background:#020309;color:#fff;text-align:center}
.run-by{font-size:13px;letter-spacing:.2em;color:rgba(255,255,255,.72)}
.company{margin-top:.35em;padding-left:.34em;font-family:var(--ff-en);font-weight:300;font-size:clamp(28px,4.6vw,48px);line-height:1.3;letter-spacing:.34em}
.footer-contact{font-size:13px;color:rgba(255,255,255,.8)}
.footer-contact a{color:inherit}
.credit{max-width:660px;margin:2em auto 0;font-size:11px;line-height:1.9;color:rgba(255,255,255,.5)}
.copyright{margin-top:1.2em;font-family:var(--ff-en);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.45)}

/* 末尾ロゴ：文字を中央に保ち、小さなタコを左右へ対称に添える。 */
.final-brand .final-brand-name{position:relative;display:inline-block}
.final-brand .final-brand-name .pbd-mark{position:absolute;right:calc(100% + .35em);top:50%;transform:translateY(-50%)}
.space-copy .final-brand .pbd-mark{width:28px;height:28px;flex:0 0 auto;object-fit:contain;margin:0;filter:drop-shadow(0 0 8px rgba(90,160,255,.3))}
@media(max-width:899px){.space-copy .final-brand .pbd-mark{width:18px;height:18px}}

.final-brand .final-brand-name .pbd-mark-right{right:auto;left:calc(100% + .35em)}

/* 名前とロゴの物語：末尾の小さな入口と、読み進められるダイアログ。 */
.story-mark{--story-mark-size:28px;position:absolute;top:50%;right:calc(100% + .35em - (44px - var(--story-mark-size))/2);transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.story-mark-right{right:auto;left:calc(100% + .35em - (44px - var(--story-mark-size))/2)}
.final-brand-name .story-mark .pbd-mark{position:static;transform:none;width:var(--story-mark-size);height:var(--story-mark-size)}
.story-entry{margin-top:.55em;text-align:center}
.story-label{min-height:44px;padding:8px 12px;border:0;background:transparent;color:rgba(255,255,255,.8);font:500 12px/1.6 var(--ff-body);letter-spacing:.08em;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.story-open:focus-visible{outline:2px solid #ffe1b2;outline-offset:3px;border-radius:8px}
.story-open:disabled{cursor:default}
.brand-story{width:min(720px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:24px;background:#fffbf5;color:#27334d;box-shadow:0 24px 100px rgba(0,0,0,.4);overflow:hidden}
.brand-story::backdrop{background:rgba(3,7,25,.78)}
.story-panel{display:flex;flex-direction:column;max-height:calc(100vh - 34px);max-height:calc(100dvh - 34px)}
.story-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px;padding:18px 20px 14px 28px;border-bottom:1px solid rgba(39,51,77,.1)}
.story-header h2{font-family:var(--ff-hand);font-size:clamp(16px,2.5vw,23px);font-weight:600;line-height:1.6;letter-spacing:.025em}
.story-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid rgba(39,51,77,.18);border-radius:50%;background:#fff;color:#27334d;font:400 28px/1 var(--ff-body);cursor:pointer}
.story-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:30px clamp(22px,5vw,56px) 44px;text-align:left;font:400 15px/2 var(--ff-body);letter-spacing:.035em}
.story-body:focus-visible,.story-close:focus-visible{outline:2px solid #9e5279;outline-offset:-4px}
.story-section{padding:0;margin:0}
.story-section+.story-section{margin-top:44px;padding-top:36px;border-top:1px solid rgba(39,51,77,.15)}
.story-section h3{font-family:var(--ff-hand);font-weight:600;font-size:clamp(19px,3vw,26px);line-height:1.65;margin:0 0 28px}
.story-section p+p{margin-top:1.2em}
@media(max-width:899px){.story-mark{--story-mark-size:18px}.story-label{font-size:11px}.story-entry{margin-top:.25em}}
@media(max-width:400px){.brand-story{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:18px}.story-panel{max-height:calc(100dvh - 22px)}.story-header{padding:12px 10px 10px 18px}.story-body{padding:24px 20px 32px;font-size:14px;line-height:2}.story-section h3{font-size:19px}.story-section+.story-section{margin-top:36px;padding-top:30px}}

/* 物語の題目を本文と分け、細い画面でも無理のない行幅で読む。 */
.story-body{padding:34px clamp(24px,5vw,60px) 48px;font-size:15px;line-height:2.15;letter-spacing:.025em}
.story-section p{max-width:36em;margin-inline:auto}
.story-section p+p{margin-top:1.45em}
.story-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;margin:0 0 34px;padding:22px 14px;border-radius:16px;background:#f7eaf0}
.story-heading img{width:28px;height:28px;object-fit:contain;flex:none}
.story-heading h3{flex:0 1 100%;order:2;margin:0;text-align:center;font:700 clamp(20px,2.6vw,25px)/1.65 var(--ff-body);color:#824463;letter-spacing:.025em;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.story-heading img:first-child{order:0}.story-heading img:last-child{order:1}
.story-section+.story-section{margin-top:52px;padding-top:40px;border-top:1px solid #dbc4cf}
@media(min-width:650px){.story-heading{flex-wrap:nowrap;gap:12px;padding:24px 12px}.story-heading h3{flex:1;order:0;font-size:22px}.story-heading img:last-child{order:0}}
@media(max-width:400px){.story-body{padding:24px 20px 36px;font-size:14px;line-height:2.1}.story-heading{padding:18px 8px;gap:8px 12px;margin-bottom:28px}.story-heading img{width:25px;height:25px}.story-heading h3{font-size:20px;line-height:1.7}.story-section+.story-section{margin-top:40px;padding-top:30px}}

.story-title-break{display:none}
@media(max-width:649px){.story-title-break{display:initial}}