/* My Fair Jelly — 紹介・サポート・プライバシーポリシー共通
   水槽の中のように、深い青に上から淡い光が差す。動きはゆっくり、UIは薄いガラス。 */
*{box-sizing:border-box}
:root{
  --deep:#06101c; --mid:#0d2236; --ink:#e4eef6; --ink2:#9fb4c6; --glass:rgba(160,200,230,.07);
  --edge:rgba(170,210,240,.16); --accent:#a8dcf0; --beam:rgba(150,210,240,.16);
  color-scheme:dark;
}
html{-webkit-text-size-adjust:100%; background:var(--deep)}
body{
  margin:0; min-height:100vh; color:var(--ink);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(120,190,225,.22), transparent 60%),
    linear-gradient(180deg, var(--mid) 0%, var(--deep) 70%);
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:15px; line-height:2; letter-spacing:.03em; font-weight:300;
}
/* 水面から降りてくる光のゆらめき（とてもゆっくり） */
body::before{
  content:""; position:fixed; inset:-20% -10% auto; height:90vh; pointer-events:none; z-index:0;
  background:
    linear-gradient(100deg, transparent 30%, var(--beam) 42%, transparent 54%),
    linear-gradient(80deg, transparent 48%, rgba(150,210,240,.09) 58%, transparent 68%);
  filter:blur(18px); transform-origin:50% 0;
  animation:sway 26s ease-in-out infinite alternate;
  mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
}
@keyframes sway{ from{transform:rotate(-3deg) translateX(-2%)} to{transform:rotate(3deg) translateX(2%)} }
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }

.wrap{position:relative; z-index:1; max-width:700px; margin:0 auto; padding:0 16px 72px}
.top{display:flex; flex-wrap:wrap; gap:6px 18px; padding:16px 0 0; font-size:12px; letter-spacing:.14em}
.top a{color:var(--ink2); text-decoration:none}
.top a:hover{color:var(--ink)}

.hero{text-align:center; padding:52px 0 36px}
.hero .icon{width:104px; height:104px; border-radius:24px; display:block; margin:0 auto 22px;
  box-shadow:0 0 0 1px var(--edge), 0 18px 50px rgba(80,170,220,.18)}
h1{font-weight:200; font-size:clamp(30px,8.5vw,44px); letter-spacing:.08em; line-height:1.3; margin:0}
.hero .sub{margin:12px 0 0; color:var(--ink2); font-size:15px}
.badge{display:inline-block; margin-top:26px; padding:10px 26px; border-radius:99px;
  border:1px solid var(--edge); background:var(--glass); color:var(--ink); text-decoration:none;
  font-size:14px; letter-spacing:.12em; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
a.badge:hover{border-color:var(--accent)}
.langs{margin-top:16px; font-size:13px}

.shots{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 -16px 12px; padding:6px 16px 18px; scrollbar-width:thin}
.shots figure{margin:0; flex:none; width:min(46vw,220px); scroll-snap-align:start}
.shots img{width:100%; height:auto; aspect-ratio:1320/2868; display:block; border-radius:16px;
  border:1px solid var(--edge); background:var(--mid)}
.shots figcaption{font-size:12px; color:var(--ink2); text-align:center; margin-top:6px}

.lead{font-size:17px; line-height:2.1; text-align:center; margin:28px 0 8px}
h2{font-weight:400; font-size:17px; letter-spacing:.08em; margin:44px 0 12px; text-wrap:balance}
h3{font-weight:500; font-size:15px; margin:28px 0 6px}
p, ul, ol{margin:0 0 12px}
ul, ol{padding-left:1.3em}
li{margin:3px 0}
strong{font-weight:500}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.card{padding:18px 20px; margin:14px 0; border-radius:18px; border:1px solid var(--edge);
  background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.card > :last-child{margin-bottom:0}
.card h3{margin-top:0}
.q{font-weight:500; margin:0 0 4px}
.meta{color:var(--ink2); font-size:13px}
.links{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:18px 0 0}
.links a{display:inline-block; padding:6px 18px; border-radius:99px; border:1px solid var(--edge);
  background:var(--glass); color:var(--ink); text-decoration:none; font-size:14px}
.links a:hover{border-color:var(--accent)}
hr{border:0; height:1px; background:var(--edge); margin:60px 0 0}
.page-title{padding:44px 0 8px; text-align:center}
.page-title h1{font-size:clamp(24px,6.5vw,32px)}
.page-title p{color:var(--ink2); margin:8px 0 0; font-size:13px; letter-spacing:.2em}
footer{margin-top:56px; text-align:center; font-size:12px; color:var(--ink2); line-height:2}
footer a{color:var(--ink2)}