/* =========================================================
   VIVA-MC 公式サイト 共通スタイル ― 古地図（ポルトラン海図）
   欧文見出し : Cormorant Garamond / 小型大文字 : Cormorant SC
   欧文本文・数字 : EB Garamond / 和文 : Shippori Mincho
   ========================================================= */

:root{
    /* 墨（文字） */
    --ink:#2F2010; --ink-2:#584327; --ink-3:#6F5A35;
    /* 紙（面） */
    --paper-0:#DCC698; --paper:#E9D8B0; --paper-2:#F5EAD1; --paper-3:#EFE1C2;
    --paper-hi:#FBF4E4;
    /* 罫 */
    --line:#C2A871; --rule:#937344; --rule-dk:#6E5228;
    /* 差し色 */
    --ember:#93301C; --ember-dk:#6E1E11; --ember-lt:#BE6650;
    --sea:#375663; --sea-dk:#213842; --sea-lt:#5C808D;
    --honey:#8A6820; --honey-lt:#E3CB92; --gold:#B08A32;
    --moss:#3C6836; --verdigris:#3F7268; --brick:#93301C;
    /* 影 */
    --sh-1:0 1px 0 rgba(255,250,238,.55) inset;
    --sh-2:2px 3px 0 rgba(47,32,16,.10),6px 10px 22px -10px rgba(47,32,16,.45);
    --sh-3:3px 4px 0 rgba(47,32,16,.12),10px 18px 32px -14px rgba(47,32,16,.5);
    --topbar-h:72px;

    /* 書体 */
    --f-disp:'Cormorant Garamond','Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
    --f-body:'EB Garamond','Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
    --f-caps:'Cormorant SC','Shippori Mincho','Hiragino Mincho ProN',serif;
    --f-lat:'EB Garamond',Georgia,serif;
    --f-mono:'SFMono-Regular',Consolas,'Courier New',monospace;

    /* 文字の大きさ（1rem = 17px） */
    --t-3xs:.64rem; --t-2xs:.72rem; --t-xs:.8rem;  --t-sm:.88rem; --t-md:.95rem;
    --t-lg:1.12rem; --t-xl:1.3rem;  --t-2xl:1.55rem; --t-3xl:1.85rem;
    --t-4xl:2.2rem; --t-5xl:2.8rem;

    /* 字送り */
    --ls-caps:.22em; --ls-ttl:.03em;
    --measure:34em;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px;-webkit-text-size-adjust:100%}

body{
    font-family:var(--f-body);font-size:1rem;font-weight:400;
    color:var(--ink);line-height:1.95;letter-spacing:.015em;
    background-color:var(--paper);
    background-attachment:fixed,fixed,scroll,scroll;
    font-feature-settings:"palt" 1,"kern" 1;font-kerning:normal;
    font-variant-numeric:oldstyle-nums proportional-nums;
    text-spacing-trim:trim-start;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    background-image:
        linear-gradient(180deg, rgba(255,250,238,.55) 0, rgba(255,250,238,0) 420px),
        linear-gradient(0deg, rgba(120,88,44,.12) 0, rgba(120,88,44,0) 380px),
        repeating-linear-gradient(90deg, rgba(120,88,44,.045) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(0deg, rgba(120,88,44,.045) 0 1px, transparent 1px 120px);
}
/* 経年のシミ */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:2;mix-blend-mode:multiply;opacity:.5;
    background-image:
      radial-gradient(ellipse 180px 100px at 7% 18%, rgba(122,90,44,.10), transparent 70%),
      radial-gradient(ellipse 130px 150px at 94% 10%, rgba(122,90,44,.09), transparent 70%),
      radial-gradient(ellipse 210px 120px at 74% 76%, rgba(122,90,44,.08), transparent 70%),
      radial-gradient(ellipse 150px 130px at 20% 90%, rgba(122,90,44,.07), transparent 70%)}

/* ---------- 見出し・本文の骨格 ---------- */
h1,h2,h3,h4{font-weight:700;line-height:1.55;letter-spacing:var(--ls-ttl);
    font-feature-settings:"palt" 1,"kern" 1;text-wrap:balance;word-break:auto-phrase}
h1,h2{font-weight:800}
p{text-wrap:pretty}
p+p{margin-top:1.05em}

.disp{font-family:var(--f-disp);font-weight:600;letter-spacing:.02em;font-style:normal}
.cz{font-family:var(--f-caps);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase}
/* 小型大文字のラベル（罫線つき） */
.caps{font-family:var(--f-caps);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;
    font-size:var(--t-2xs);color:var(--ember-dk)}
/* 欧文イタリックの添え書き */
.gloss{font-family:var(--f-lat);font-style:italic;color:var(--ink-3);letter-spacing:.08em}
.dot{font-family:var(--f-lat);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.1em}
/* 数値は等幅の大文字数字で */
.num-lining{font-family:var(--f-lat);font-variant-numeric:lining-nums tabular-nums}

/* ---------- リンク：ペン書きの下線 ---------- */
a{color:var(--ember-dk);text-decoration:none;
    background-image:linear-gradient(var(--line),var(--line));
    background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size .25s ease,background-image .25s ease,color .2s}
a:hover{color:var(--ember);background-image:linear-gradient(var(--ember),var(--ember));
    background-size:100% 2px}
a.plain,a:has(>img),.site-nav a,.mobile-nav a,.wiki-subnav a,.btn,.pager a,
.news li>a,.news h3 a,.news-article h1 a,
.topbar-cta a,.foot a,.tag,.chip{background-image:none}
a.plain:hover,.btn:hover{background-image:none}

/* ---------- 引用・強調 ---------- */
em{font-style:italic;font-family:var(--f-lat)}
strong,b{font-weight:700;color:var(--ink)}
mark{background:linear-gradient(transparent 62%,rgba(190,102,80,.42) 0);color:inherit;padding:0 .1em}
::selection{background:rgba(147,48,28,.2);color:var(--ink)}

/* ---------- 引用符つきの添え書き ---------- */
blockquote{font-family:var(--f-lat);font-style:italic;font-size:var(--t-lg);color:var(--ink-2);
    border-left:2px solid var(--rule);padding:2px 0 2px 20px;margin:20px 0;line-height:1.85}

/* ---------- コード ---------- */
code{font-family:var(--f-mono);font-size:.86em;letter-spacing:0;background:rgba(47,32,16,.09);
    border:1px solid rgba(138,106,56,.35);color:var(--ink);padding:.1em .45em;border-radius:1px;
    font-variant-numeric:lining-nums;word-break:break-all}
pre code{display:block;padding:14px 16px;overflow-x:auto;line-height:1.8}

/* ---------- 箇条書き ---------- */
.body-list{list-style:none;margin:14px 0}
.body-list li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--ink-2)}
.body-list li::before{content:'';position:absolute;left:4px;top:.82em;width:6px;height:6px;
    background:var(--honey);transform:rotate(45deg)}

/* ---------- 読み幅 ---------- */
.news-article p,.callout,.steps p,.row-item p,.faq .ans p{max-width:var(--measure)}

/* ---------- 和欧混植のすき間 ---------- */
:lang(ja){text-autospace:normal}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0}
.skip-link{position:absolute;left:50%;top:-60px;transform:translateX(-50%);z-index:500;background:var(--ink);
    color:var(--paper-2);padding:10px 22px;font-weight:700}
.skip-link:focus{top:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 36px;position:relative;z-index:3}

/* =========================================================
   トップバー
   ========================================================= */
.topbar{position:sticky;top:0;z-index:300;display:flex;align-items:center;justify-content:space-between;gap:18px;
    height:var(--topbar-h);padding:0 30px;background:linear-gradient(180deg,var(--paper-2),var(--paper));
    border-bottom:4px double var(--rule)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--paper-2);flex:none;
    transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:rotate(360deg)}
.brand-name{font-size:var(--t-xl);color:var(--ink)}
.brand-sub{display:none}
.site-nav{display:flex;align-items:center;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav ul{list-style:none;display:flex;gap:2px}
.site-nav a{position:relative;display:flex;align-items:center;padding:9px 15px;color:var(--ink-2);
    font-weight:700;font-size:var(--t-sm);letter-spacing:.05em;white-space:nowrap;transition:color .2s}
.site-nav a:hover{color:var(--ink);text-decoration:none}
.site-nav a::after{content:'';position:absolute;left:13px;right:13px;bottom:5px;height:2px;background:var(--ember);
    transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{background:var(--ember);color:#FBF4E4}
.site-nav a[aria-current="page"]::after{display:none}
.site-nav i{display:none}
.topbar-cta{display:flex;align-items:center;gap:9px;flex:none}
.topbar-cta .ip-copy{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--rule);
    color:var(--ink);padding:9px 15px;font-family:inherit;font-size:var(--t-sm);cursor:pointer;
    transition:background-color .25s,transform .18s}
.topbar-cta .ip-copy:hover{background:rgba(47,32,16,.08)}
.topbar-cta .ip-copy i{color:var(--ink-3)}
.side-discord{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;background:var(--sea);
    color:var(--paper-2);font-weight:700;font-size:var(--t-sm);letter-spacing:.06em;flex:none;transition:transform .2s,background-color .25s}
.side-discord:hover{background:var(--sea-dk);text-decoration:none;transform:translateY(-2px)}
.menu-btn{display:none;background:var(--ember);color:#FBF4E4;border:none;padding:10px 16px;font-family:inherit;
    font-weight:700;font-size:var(--t-sm);cursor:pointer;align-items:center;gap:7px;flex:none}

.mobile-nav{display:none;position:fixed;left:0;right:0;top:var(--topbar-h);z-index:290;background:var(--paper-2);
    border-bottom:4px double var(--rule);max-height:calc(100vh - var(--topbar-h));overflow-y:auto;padding:10px 16px 20px;
    max-height:calc(100dvh - var(--topbar-h));
    box-shadow:0 18px 30px -20px rgba(47,32,16,.5)}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none}
.mobile-nav li+li{margin-top:2px}
.mobile-nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;color:var(--ink);font-weight:700;font-size:var(--t-md)}
.mobile-nav a i{width:20px;text-align:center;color:var(--ember)}
.mobile-nav a[aria-current="page"]{background:var(--ember);color:#FBF4E4}
.mobile-nav a[aria-current="page"] i{color:#FBF4E4}
.mobile-nav .m-server{margin-top:14px;padding-top:16px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
.mobile-nav .ip-copy{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:13px 15px;
    background:var(--paper);border:1px dashed var(--rule);cursor:pointer;font-family:inherit;text-align:left}
.mobile-nav .ip-copy .lab{display:block;font-size:var(--t-3xs);color:var(--ink-2);letter-spacing:.12em;font-family:var(--f-lat)}
.mobile-nav .ip-copy .val{display:block;font-size:1rem;color:var(--ink);font-weight:700}
.mobile-nav .ip-copy .btn{flex:none;width:32px;height:32px;background:var(--ember);color:#FBF4E4;display:flex;
    align-items:center;justify-content:center;font-size:var(--t-sm)}
.mobile-nav .side-discord{width:100%}

/* Wikiのサブナビ */
.wiki-subnav{position:sticky;top:var(--topbar-h);z-index:200;background:var(--paper-2);
    border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.wiki-subnav::-webkit-scrollbar{display:none}
.wiki-subnav .wrap{display:flex;gap:6px;padding:11px 36px;max-width:1180px}
.wiki-subnav a{display:flex;align-items:center;gap:7px;padding:7px 15px;background:var(--paper);color:var(--ink-2);
    font-weight:700;font-size:var(--t-xs);white-space:nowrap;flex:none;border:1px solid transparent;transition:all .22s}
.wiki-subnav a:hover{border-color:var(--rule);color:var(--ink);text-decoration:none;transform:translateY(-2px)}
.wiki-subnav a[aria-current="page"]{background:var(--ember);color:#FBF4E4;border-color:var(--ember-dk)}
.wiki-subnav i{color:var(--ember);font-size:var(--t-xs)}
.wiki-subnav a[aria-current="page"] i{color:#FBF4E4}

/* =========================================================
   本文
   ========================================================= */
.main{min-height:100vh;max-width:1180px;margin:0 auto;animation:pageIn .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}}

.page-head{border-bottom:4px double var(--rule);padding:48px 0 34px;position:relative;overflow:hidden}
.page-head::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:
    repeating-linear-gradient(90deg, rgba(120,88,44,.10) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(120,88,44,.10) 0 1px, transparent 1px 60px)}
.page-head .wrap{display:flex;align-items:flex-start;gap:20px}
.page-head .num{flex:none;width:52px;height:52px;margin-top:4px;background:var(--ember);color:#FBF4E4;
    display:flex;align-items:center;justify-content:center;font-size:var(--t-lg);
    font-family:var(--f-disp);font-weight:700;box-shadow:4px 4px 0 rgba(47,32,16,.35)}
.page-head .num i{font-size:var(--t-lg)}
.page-head h1{font-size:var(--t-3xl);line-height:1.45;letter-spacing:var(--ls-ttl);font-weight:800}
.page-head p{color:var(--ink-2);font-size:var(--t-md);margin-top:10px;max-width:var(--measure);line-height:1.9}
.page-head .kicker{display:flex;align-items:center;gap:10px;font-family:var(--f-caps);font-weight:600;
    font-size:var(--t-2xs);text-transform:uppercase;color:var(--ember-dk);letter-spacing:var(--ls-caps);
    margin-bottom:8px}
.page-head .kicker::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

section{padding:52px 0}
section+section{border-top:1px solid var(--line);position:relative}
section+section::before{content:'';position:absolute;left:50%;top:-5px;width:9px;height:9px;
    background:var(--paper);border:1px solid var(--rule);transform:translateX(-50%) rotate(45deg)}

h2.sec{font-size:var(--t-2xl);font-weight:800;margin-bottom:10px;display:flex;align-items:baseline;gap:14px;
    letter-spacing:var(--ls-ttl);line-height:1.5}
h2.sec::before{content:'';align-self:center;width:9px;height:9px;flex:none;background:var(--ember);
    transform:rotate(45deg);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--line)}

.sec-note{color:var(--ink-2);font-size:var(--t-md);margin-bottom:28px;max-width:var(--measure);line-height:1.95}

/* =========================================================
   部品
   ========================================================= */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;
    border:none;font-family:var(--f-body);font-weight:700;font-size:var(--t-md);letter-spacing:.1em;cursor:pointer;
    transition:transform .14s ease,box-shadow .14s ease}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.22);transform:translateX(-101%);
    transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.btn:hover::before{transform:translateX(0)}
.btn.fill{background:linear-gradient(180deg,var(--sea-lt) -40%,var(--sea) 42%,var(--sea-dk));color:#FBF4E4;
    box-shadow:var(--sh-2),0 1px 0 rgba(255,255,255,.25) inset;border:1px solid var(--sea-dk)}
.btn.fill:hover{box-shadow:var(--sh-3),0 1px 0 rgba(255,255,255,.3) inset}
.btn.fill:hover{text-decoration:none}
.btn.plain{background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));color:var(--ink);
    border:1px solid var(--rule-dk);box-shadow:var(--sh-2),var(--sh-1)}
.btn.plain:hover{border-color:var(--ink);box-shadow:var(--sh-3),var(--sh-1)}
.btn.plain:hover{text-decoration:none}
.btn:active{transform:translate(3px,3px)}
.btn.fill:active{box-shadow:1px 1px 0 rgba(47,32,16,.4)}

.tag{display:inline-block;padding:4px 12px;font-family:var(--f-caps);font-size:var(--t-2xs);font-weight:600;
    text-transform:uppercase;letter-spacing:.14em;
    border:1px solid currentColor;vertical-align:.14em}
.tag.honey{color:#6E5218;background:rgba(176,138,50,.16);border-color:rgba(138,104,32,.5)}
.tag.moss{color:#2F5A2A;background:rgba(60,104,54,.15);border-color:rgba(60,104,54,.45)}
.tag.brick{color:var(--ember-dk);background:rgba(147,48,28,.13);border-color:rgba(147,48,28,.42)}

/* 手順 */
.steps{list-style:none;position:relative}
.steps::before{content:'';position:absolute;left:23px;top:14px;bottom:14px;width:2px;
    background:repeating-linear-gradient(0deg,var(--rule) 0 4px,transparent 4px 10px)}
.steps>li{position:relative;padding:0 0 28px 64px}
.steps>li:last-child{padding-bottom:0}
.steps .n{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--paper-2);
    border:2px solid var(--ember);color:var(--ember-dk);display:flex;align-items:center;justify-content:center;
    font-family:var(--f-disp);font-weight:700;font-size:var(--t-lg);z-index:1}
.steps h3{font-size:var(--t-lg);margin-bottom:5px}
.steps p{color:var(--ink-2);font-size:var(--t-md)}

/* 表 */
.spec{width:100%;border-collapse:collapse;font-size:var(--t-md)}
.spec th,.spec td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left}
.spec{font-variant-numeric:lining-nums tabular-nums}
.spec th{width:38%;color:var(--ink-2);font-weight:700;background:rgba(120,88,44,.10);
    letter-spacing:.06em;font-size:var(--t-sm)}
.spec td{font-variant-numeric:tabular-nums}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto;border:1px solid var(--rule);background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
    box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.table-wrap:hover{transform:translateY(-3px);box-shadow:8px 10px 0 rgba(47,32,16,.18)}

/* 2列 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.duo .col{border:1px solid var(--rule);overflow:hidden;background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
    box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.duo .col:hover{transform:translateY(-4px);box-shadow:9px 11px 0 rgba(47,32,16,.18)}
.duo .col>h3{padding:13px 18px;font-size:1rem;color:var(--paper-2);display:flex;align-items:center;gap:9px;letter-spacing:.06em}
.duo .col.no>h3{background:var(--brick)}
.duo .col.ok>h3{background:var(--moss)}
.duo .col.step-a>h3{background:var(--sea)}
.duo .col.step-b>h3{background:var(--honey)}
.duo ul{list-style:none;padding:14px 18px 18px}
.duo li{position:relative;padding-left:24px;margin-bottom:10px;font-size:var(--t-md)}
.duo li::before{position:absolute;left:0;font-weight:700}
.duo .no li::before{content:'×';color:var(--brick)}
.duo .ok li::before{content:'○';color:var(--moss)}
.duo .step-a li::before,.duo .step-b li::before{content:'▸';color:var(--ember-dk)}

/* 記事一覧の行 */
.rows{display:flex;flex-direction:column;gap:22px}
.row-item{display:grid;grid-template-columns:58px 1fr;gap:20px;padding-bottom:22px;border-bottom:1px dashed var(--line)}
.rows .row-item:last-child{border-bottom:none;padding-bottom:0}
.row-item .ico{width:58px;height:58px;background:var(--paper-2);border:1px solid var(--rule);display:flex;
    align-items:center;justify-content:center;font-size:var(--t-xl);color:var(--ember-dk);
    transition:transform .3s cubic-bezier(.3,1.4,.4,1),background-color .3s}
.row-item:hover .ico{transform:rotate(-6deg) scale(1.06);background:var(--honey-lt)}
.row-item h3{font-size:var(--t-lg);margin-bottom:6px}
.row-item p{color:var(--ink-2);font-size:var(--t-md);margin-bottom:4px}
.row-item ol,.row-item ul{margin:6px 0 0 18px;color:var(--ink-2);font-size:var(--t-md)}

/* 注意書き */
.callout{display:flex;gap:14px;background:linear-gradient(90deg,rgba(147,48,28,.13),rgba(147,48,28,.05));
    border:1px solid rgba(147,48,28,.28);border-left:4px solid var(--brick);
    padding:17px 20px;margin-bottom:26px;font-size:var(--t-md)}
.callout i{color:var(--brick);font-size:var(--t-lg);margin-top:4px}

/* FAQ */
.faq{border:1px solid var(--rule);overflow:hidden;background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
    box-shadow:var(--sh-2),var(--sh-1)}
.faq>div+div{border-top:1px solid var(--line)}
.faq button{width:100%;background:none;border:none;cursor:pointer;font-family:inherit;padding:18px 20px;text-align:left;
    font-weight:700;font-size:var(--t-md);color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px;
    transition:background-color .25s}
.faq button:hover{background:rgba(120,88,44,.10)}
.faq button i{color:var(--ember);transition:transform .35s cubic-bezier(.3,1.4,.4,1);flex:none}
.faq .ans{max-height:0;overflow:hidden;transition:max-height .35s ease-out}
.faq .ans p{padding:0 20px 18px;color:var(--ink-2);font-size:var(--t-md)}
.faq .open button i{transform:rotate(180deg)}
.faq .open .ans{max-height:340px}

/* お知らせ */
.news{list-style:none;display:flex;flex-direction:column;gap:16px}
.news li{position:relative;display:grid;grid-template-columns:110px 1fr;gap:20px;padding:24px 26px;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));border:1px solid var(--rule);
    box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.news li:hover{transform:translateY(-5px) rotate(-.3deg);box-shadow:9px 11px 0 rgba(47,32,16,.2)}
.news li::before{content:'';position:absolute;top:-9px;left:26px;width:18px;height:18px;background:var(--ember);
    border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 2px var(--paper-hi);
    transition:transform .3s cubic-bezier(.3,1.5,.4,1)}
.news li:hover::before{transform:rotate(-45deg) scale(1.28)}
.news .when{font-family:var(--f-lat);font-size:var(--t-sm);color:var(--ink-3);letter-spacing:.05em;
    padding-top:5px;font-variant-numeric:oldstyle-nums proportional-nums}
.news h3{font-size:var(--t-lg);margin-bottom:6px;line-height:1.7}
.news p{color:var(--ink-2);font-size:var(--t-sm)}
.news .more{display:inline-block;margin-top:8px;font-size:var(--t-sm);font-weight:700}
.news-all{margin-top:20px;text-align:right}
.news-all a{font-weight:700;font-size:var(--t-md)}

.news-article p{color:var(--ink-2);font-size:var(--t-md);max-width:62ch}
.news-article p+p{margin-top:16px}
.news-back{margin-top:34px;padding-top:22px;border-top:1px dashed var(--line)}
.news-back a{font-weight:700}

/* 臨時アドレス */
.addr{list-style:none;display:flex;flex-direction:column;gap:12px}
.addr li{display:flex;align-items:center;flex-wrap:wrap;gap:14px;border:1px solid var(--rule);
    border-left:4px solid var(--ember);padding:16px 18px;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));box-shadow:var(--sh-1);
    transition:transform .25s ease,box-shadow .25s}
.addr li:hover{transform:translateX(4px);box-shadow:var(--sh-2),var(--sh-1)}
.addr .when{font-weight:700;color:var(--ember-dk);min-width:92px;font-size:var(--t-sm);font-family:var(--f-lat)}
.addr .host{flex:1;font-size:1rem;font-weight:700;word-break:break-all}

/* プレイヤー統計 */
.finder{border:3px double var(--rule);padding:24px;background:var(--paper-2);box-shadow:var(--sh-2),var(--sh-1)}
.finder .field{display:flex;gap:10px;flex-wrap:wrap}
.finder input{flex:1 1 200px;padding:13px 15px;font-family:inherit;font-size:var(--t-md);border:1px solid var(--rule);
    background:var(--paper);color:var(--ink);transition:border-color .25s,box-shadow .25s}
.finder input:focus{border-color:var(--ember);outline:none;box-shadow:0 0 0 3px rgba(142,46,28,.14)}
#statErr{color:var(--brick);font-weight:700;font-size:var(--t-sm);margin-top:12px;display:none}
#statOut{display:none;margin-top:18px}
#statOut h3{font-size:var(--t-lg);padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:6px}

/* 接続履歴 */
.log{max-height:420px;overflow-y:auto;border:1px solid var(--rule);padding:18px 20px;background:var(--paper-2);
    box-shadow:var(--sh-2),var(--sh-1)}
.log ul{list-style:none;position:relative;padding-left:22px;
    border-left:2px dashed var(--line)}
.log li{position:relative;margin-bottom:16px;font-size:var(--t-sm)}
.log li::before{content:'';position:absolute;left:-29px;top:7px;width:11px;height:11px;border-radius:50%;
    background:var(--ink-3);border:2px solid var(--paper-2)}
.log li.on::before{background:var(--moss);box-shadow:0 0 0 3px rgba(63,107,58,.22)}
.log .who{font-weight:700}
.log .at{font-size:var(--t-xs);color:var(--ink-2)}
.muted{color:var(--ink-2);font-size:var(--t-sm);text-align:center;padding:18px}

/* =========================================================
   ホームの海図ヒーロー
   ========================================================= */
.chartzone{position:relative;isolation:isolate;overflow:hidden;min-height:880px;background:var(--paper);display:flex;align-items:stretch;
    border-bottom:4px double var(--rule)}
.chartzone .chartmap{position:absolute;inset:0;z-index:0;will-change:transform;transform:translateZ(0)}
.chartzone .chart{position:absolute;inset:0;width:100%;height:100%;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.chartzone .chart-fx{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"),radial-gradient(ellipse 96% 112% at 50% 46%,rgba(58,42,20,0) 58%,rgba(58,42,20,.42) 100%),radial-gradient(ellipse 6.5% 12.4% at 38.2% 74.0%,rgba(122,90,44,0.070) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 8.9% 10.8% at 27.7% 51.4%,rgba(122,90,44,0.130) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 5.8% 9.3% at 9.1% 23.2%,rgba(122,90,44,0.096) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 6.4% 8.9% at 81.8% 44.0%,rgba(122,90,44,0.076) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 8.8% 10.7% at 15.2% 30.3%,rgba(122,90,44,0.093) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 7.1% 10.6% at 80.7% 48.6%,rgba(122,90,44,0.116) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 8.7% 7.1% at 78.9% 61.7%,rgba(122,90,44,0.161) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 5.3% 8.3% at 27.1% 78.0%,rgba(122,90,44,0.166) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 5.6% 7.3% at 81.9% 35.0%,rgba(122,90,44,0.147) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 9.6% 12.9% at 74.6% 29.0%,rgba(122,90,44,0.109) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 4.8% 9.1% at 65.5% 75.3%,rgba(122,90,44,0.073) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 8.2% 8.0% at 17.7% 11.0%,rgba(122,90,44,0.093) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 6.1% 9.1% at 93.9% 51.2%,rgba(122,90,44,0.157) 0%,rgba(122,90,44,0) 72%),radial-gradient(ellipse 6.4% 9.9% at 80.1% 62.4%,rgba(122,90,44,0.086) 0%,rgba(122,90,44,0) 72%);background-size:220px 220px,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto;background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat}
.chartzone .overlay{position:absolute;inset:0;z-index:1;
    background:radial-gradient(120% 90% at 50% 15%, rgba(233,214,163,.08), rgba(233,214,163,.32) 75%)}
.opening{position:relative;z-index:3;width:100%;padding:52px 0 40px;display:flex;align-items:center;background:transparent}
.opening .grid{display:grid;grid-template-columns:560px 1fr;gap:40px;align-items:start;min-height:740px}

.cartouche{position:relative;padding:40px 40px 36px;margin-top:16px;
    background:linear-gradient(180deg, rgba(246,234,203,.97), rgba(236,219,177,.95));border:3px solid var(--ink);
    box-shadow:0 0 0 1px var(--ink) inset, 0 0 0 7px rgba(246,234,203,.85), 0 0 0 9px var(--ink), 14px 16px 30px rgba(47,32,16,.35)}
.cartouche .cnr{position:absolute;width:26px;height:26px;border:2px solid var(--ember);opacity:.85}
.cartouche .c1{top:10px;left:10px;border-right:none;border-bottom:none}
.cartouche .c2{top:10px;right:10px;border-left:none;border-bottom:none}
.cartouche .c3{bottom:10px;left:10px;border-right:none;border-top:none}
.cartouche .c4{bottom:10px;right:10px;border-left:none;border-top:none}
.opening .eyebrow{display:flex;align-items:center;gap:12px;color:var(--ember-dk);font-family:var(--f-caps);
    font-weight:600;text-transform:uppercase;font-size:var(--t-2xs);letter-spacing:var(--ls-caps);
    margin-bottom:20px}
.opening .eyebrow::before,.opening .eyebrow::after{content:'';height:1px;background:var(--ember-dk);flex:1;max-width:56px;
    transform-origin:left}
.opening h1{font-size:var(--t-4xl);font-weight:800;line-height:1.5;letter-spacing:var(--ls-ttl);
    margin-bottom:12px;word-break:auto-phrase}
.opening h1 em{font-style:normal;color:var(--ember);background-image:linear-gradient(rgba(142,46,28,.35),rgba(142,46,28,.35));
    background-repeat:no-repeat;background-position:0 88%;background-size:0 2px}
.opening .sub{font-family:var(--f-lat);font-style:italic;color:var(--ink-3);letter-spacing:.06em;
    margin-bottom:24px;font-size:var(--t-lg);line-height:1.6}
.opening .lead{color:var(--ink-2);font-size:var(--t-md);max-width:var(--measure);margin-bottom:30px;line-height:2}
.opening .lead::first-letter{float:left;font-family:var(--f-disp);font-weight:600;color:var(--ember-dk);
    font-size:3.1em;line-height:.82;margin:.08em .14em 0 0}
.opening .cta{display:flex;gap:14px;flex-wrap:wrap}

.logbook{width:360px;margin-left:auto;margin-top:290px;background:linear-gradient(180deg,var(--paper-hi),#E9D6A8);
    border:3px double var(--ink);padding:18px;box-shadow:12px 14px 26px rgba(47,32,16,.4);transform:rotate(-1.2deg);
    transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.logbook:hover{transform:rotate(0) translateY(-6px);box-shadow:16px 20px 34px rgba(47,32,16,.45)}
.logbook .ttl{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-lat);font-style:italic;
    font-size:var(--t-xs);color:var(--ink-2);letter-spacing:.1em;margin-bottom:12px;border-bottom:1px solid var(--rule);padding-bottom:8px}
.logbook .shot{border:1px solid var(--ink);aspect-ratio:4/3;overflow:hidden;margin-bottom:14px}
.logbook .shot img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.45) contrast(1.06) saturate(.85);
    animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.09)}}
.logbook .ip-row{display:flex;align-items:center;gap:14px;border:1px dashed var(--rule);padding:12px 14px;
    background:rgba(242,227,188,.7);width:100%;font-family:inherit;text-align:left;cursor:pointer}
.logbook .ip-row .lab{font-family:var(--f-lat);font-style:italic;font-size:var(--t-3xs);color:var(--ink-2);
    letter-spacing:.12em;display:block}
.logbook .ip-row .val{font-size:var(--t-lg);font-weight:700;display:block}
.logbook .ip-row .go{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--sea);color:var(--paper-2);
    display:flex;align-items:center;justify-content:center;flex:none;transition:transform .3s cubic-bezier(.3,1.5,.4,1)}
.logbook:hover .ip-row .go{transform:translateX(4px) scale(1.08)}
.status-row{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--ink-2);padding:10px 3px 0}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none;position:relative}
.dot-live.on{background:var(--moss)}
.dot-live.on::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;
    animation:ripple 1.9s infinite ease-out}
@keyframes ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;color:var(--ink);
    font-family:var(--f-lat);font-style:italic;font-size:var(--t-xs);letter-spacing:.18em}
.scroll-cue i{display:block;text-align:center;margin-top:4px;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(8px);opacity:1}}

/* 数字 */
.facts,.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:3px double var(--rule);
    border-bottom:3px double var(--rule);padding:26px 0;margin-top:30px}
.facts div,.stats div{text-align:center}
.facts dt,.stats dt{font-family:var(--f-lat);font-size:var(--t-4xl);font-weight:600;color:var(--ember-dk);
    font-variant-numeric:lining-nums tabular-nums;line-height:1.3}
.stats dt{font-size:var(--t-5xl);color:var(--ink)}
.facts dd,.stats dd{font-family:var(--f-caps);font-weight:600;text-transform:uppercase;
    font-size:var(--t-2xs);color:var(--ink-2);letter-spacing:var(--ls-caps);margin-top:5px}
.stats .unit{font-size:1rem;margin-left:4px;color:var(--ink-2)}

/* 柱 */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.pillars>div{padding:28px 24px;background:linear-gradient(180deg,var(--paper-hi),var(--paper-3));border:1px solid var(--rule);
    box-shadow:var(--sh-2),var(--sh-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pillars>div:hover{transform:translateY(-7px);box-shadow:10px 12px 0 rgba(47,32,16,.2)}
.pillars .k{font-family:var(--f-caps);font-weight:600;text-transform:uppercase;font-size:var(--t-2xs);
    letter-spacing:var(--ls-caps);color:var(--ember-dk)}
.pillars h3{font-size:var(--t-lg);margin:8px 0 8px}
.pillars p{font-size:var(--t-sm);color:var(--ink-2)}

/* 資源リセット */
.reset{background:linear-gradient(180deg,var(--paper-hi),var(--paper-3));border:3px double var(--rule);
    padding:30px;text-align:center;box-shadow:var(--sh-3),var(--sh-1)}
.reset .lab{font-family:var(--f-lat);font-style:italic;color:var(--ink-2);font-size:var(--t-sm);letter-spacing:.1em}
.reset .big{font-family:var(--f-lat);font-size:var(--t-5xl);font-weight:600;line-height:1.2;
    font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.reset .sub{color:var(--ember-dk);font-weight:700;font-size:var(--t-sm);font-variant-numeric:tabular-nums;font-family:var(--f-lat)}
.reset .bar{height:12px;background:rgba(47,32,16,.14);border:1px solid var(--rule);margin-top:16px;overflow:hidden}
.reset .bar i{display:block;height:100%;width:0;
    background:repeating-linear-gradient(90deg,var(--ember) 0 8px,#A8503C 8px 16px);
    transition:width 1.8s cubic-bezier(.2,.8,.2,1)}

/* 写真の帯 */
.strip{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0}
.strip .track{display:flex;gap:16px;width:max-content;animation:marquee 46s linear infinite}
.strip:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.strip img{width:290px;height:174px;object-fit:cover;border:1px solid var(--rule);display:block;
    filter:sepia(.42) contrast(1.05);transition:filter .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.strip img:hover{filter:sepia(0) contrast(1);transform:scale(1.05)}

/* 締めの帯 */
.closing{background:linear-gradient(145deg,#41626F 0%,var(--sea) 46%,var(--sea-dk) 100%);color:#FBF4E4;
    text-align:center;padding:60px 40px;
    border:3px double var(--rule);position:relative;overflow:hidden;margin:0 36px}
.closing::before{content:'';position:absolute;inset:0;background-image:
    repeating-linear-gradient(90deg,rgba(242,227,188,.06) 0 1px,transparent 1px 60px),
    repeating-linear-gradient(0deg,rgba(242,227,188,.06) 0 1px,transparent 1px 60px);
    animation:gridDrift 24s linear infinite}
@keyframes gridDrift{to{transform:translate(60px,60px)}}
.closing h2{font-size:var(--t-3xl);margin-bottom:10px;position:relative}
.closing p{color:rgba(242,227,188,.82);font-size:var(--t-md);margin-bottom:24px;position:relative}
.closing .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.closing .btn.plain{background:transparent;color:var(--paper-2);border:1.5px solid rgba(242,227,188,.6);box-shadow:none}
.closing .btn.plain:hover{background:rgba(242,227,188,.12)}

.foot{border-top:4px double var(--rule);padding:26px 0 56px;text-align:center;color:var(--ink-3);font-size:var(--t-2xs);
    font-family:var(--f-caps);font-weight:600;text-transform:uppercase;
    letter-spacing:.12em;font-family:var(--f-lat)}

/* 404 */
.lost{border:3px double var(--rule);overflow:hidden;box-shadow:6px 7px 0 rgba(47,32,16,.18);background:var(--paper-2);
    line-height:0;margin-bottom:28px}
.lost img{width:100%;height:auto;display:block;image-rendering:pixelated}

/* トースト */
.toast{position:fixed;left:50%;bottom:-80px;transform:translateX(-50%);background:var(--ink);color:var(--paper-2);
    padding:14px 26px;font-weight:700;font-size:var(--t-sm);z-index:400;display:flex;align-items:center;gap:10px;
    transition:bottom .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 14px 30px rgba(47,32,16,.45)}
.toast.show{bottom:26px}
.toast i{color:var(--honey-lt)}

/* 記事の前後 */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:32px 0 48px;border-top:1px dashed var(--line)}
.pager a{display:block;padding:17px 20px;background:var(--paper-2);border:1px solid var(--rule);
    box-shadow:4px 5px 0 rgba(47,32,16,.14);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.pager a:hover{text-decoration:none;transform:translateY(-3px);box-shadow:7px 8px 0 rgba(47,32,16,.2)}
.pager .lab{display:block;font-family:var(--f-lat);font-size:var(--t-3xs);color:var(--ink-3);letter-spacing:.14em;margin-bottom:3px}
.pager .ttl{display:block;font-size:1rem;color:var(--ink)}
.pager .next{grid-column:2;text-align:right}

/* =========================================================
   航路レール（スクロール）
   ========================================================= */
.rail{position:fixed;left:12px;top:92px;bottom:64px;width:40px;z-index:25;pointer-events:none;opacity:0;
    transition:opacity .6s ease}
.rail.show{opacity:.9}
.rail svg{width:100%;height:100%}
.rail-line{stroke-dashoffset:calc(1 - var(--p,0))}
.rail-ship{position:absolute;left:50%;top:0;width:26px;height:26px;margin-left:-13px;margin-top:-13px;display:flex;
    align-items:center;justify-content:center;color:var(--ember);font-size:var(--t-md);background:var(--paper-2);
    border:1.5px solid var(--ember);border-radius:50%;transition:top .18s linear,transform .3s ease}
@media(max-width:1240px){.rail{display:none}}

/* インクバー（ホームの描画進捗） */
.inkbar{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--ember),var(--ink));
    transform-origin:0 50%;transform:scaleX(0);z-index:600}
.has-chart .inkbar{animation:inkbar 4.7s cubic-bezier(.3,.7,.35,1) forwards, inkfade .5s 4.9s forwards}
@keyframes inkbar{to{transform:scaleX(1)}}
@keyframes inkfade{to{opacity:0}}

/* =========================================================
   海図の描画アニメーション
   ========================================================= */
@keyframes drawln{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:var(--o,1)}}
@keyframes unfurl{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.chartmap{opacity:0;animation:fadeIn .7s ease-out both}
/* 最初の描画が落ち着いてから走らせる（出だしのカクつき防止） */
.has-chart:not(.go) .chartmap,.has-chart:not(.go) .chart .draw,.has-chart:not(.go) .chart .fade,
.has-chart:not(.go) .cartouche,.has-chart:not(.go) .cartouche .cnr,
.has-chart:not(.go) .logbook,.has-chart:not(.go) .scroll-cue,
.has-chart:not(.go) .inkbar{animation-play-state:paused}
.chart .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:drawln var(--dur,1s) cubic-bezier(.3,.7,.35,1) var(--d,0s) forwards}
.chart .fade{opacity:0;animation:fadeIn var(--dur,.7s) ease-out var(--d,0s) forwards}
@keyframes waveShift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.chart .waves{animation:waveShift 7s ease-in-out 5s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.chart .ship-inner{animation:bob 3.4s ease-in-out 6s infinite}
@keyframes roseSpin{from{transform:rotate(-26deg) scale(.9)}to{transform:rotate(0) scale(1)}}
.chart .rose-star{transform-origin:0 0;animation:roseSpin 1.4s cubic-bezier(.2,.9,.25,1) 3.1s backwards;
    transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.chart .town{transition:transform .3s cubic-bezier(.3,1.5,.4,1);transform-origin:center}
.chart .town:hover{transform:scale(1.18)}

/* ヒーローは地図を描き終えてから */
@keyframes cartIn{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}
@keyframes logIn{from{opacity:0;transform:translateY(40px) rotate(-8deg)}
    70%{opacity:1;transform:translateY(-4px) rotate(.6deg)}to{opacity:1;transform:rotate(-1.2deg)}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes underline{to{background-size:100% 2px}}
.has-chart .cartouche{opacity:0;animation:cartIn .95s cubic-bezier(.2,.8,.2,1) 4.8s forwards}
.has-chart .logbook{opacity:0;animation:logIn 1.1s cubic-bezier(.2,.8,.2,1) 5.15s forwards}
.has-chart .cartouche .cnr{opacity:0;animation:fadeIn .45s ease-out 5.7s forwards}
.has-chart .opening .eyebrow::before,.has-chart .opening .eyebrow::after{animation:lineGrow .6s ease-out 5.5s backwards}
.has-chart .opening h1 em{animation:underline .9s cubic-bezier(.2,.8,.2,1) 5.6s forwards}
.has-chart .scroll-cue{opacity:0;animation:fadeIn .6s ease-out 6s forwards}

/* ナビの登場 */
@keyframes navDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.topbar .brand,.topbar .site-nav li,.topbar-cta>*{opacity:0;animation:navDown .5s ease-out forwards}
.topbar .brand{animation-delay:.08s}
.site-nav li:nth-child(1){animation-delay:.18s}.site-nav li:nth-child(2){animation-delay:.24s}
.site-nav li:nth-child(3){animation-delay:.3s}.site-nav li:nth-child(4){animation-delay:.36s}
.site-nav li:nth-child(5){animation-delay:.42s}.site-nav li:nth-child(6){animation-delay:.48s}
.site-nav li:nth-child(7){animation-delay:.54s}.site-nav li:nth-child(8){animation-delay:.6s}
.topbar-cta>*:nth-child(1){animation-delay:.66s}.topbar-cta>*:nth-child(2){animation-delay:.72s}

/* スクロールで出る */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.8,.2,1);
    transition-delay:calc(var(--i,0)*.1s)}
[data-rv].in{opacity:1;transform:none}
.sec-underline{position:relative}
.sec-underline::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:4px;background:none;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);opacity:.8;
    transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1) .15s}
.sec-underline.in::after{transform:scaleX(1)}
.reset.in .bar i{width:var(--w,60%)}
.svg-draw path,.svg-draw circle{stroke-dasharray:1;stroke-dashoffset:1;animation:drawln 1.1s ease forwards;
    animation-play-state:paused}
.in .svg-draw path,.in .svg-draw circle{animation-play-state:running}

/* =========================================================
   投票（MinePortal）
   ========================================================= */
.vote-card{display:flex;align-items:center;gap:22px;padding:22px 26px;text-decoration:none;color:var(--ink);
    background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));border:1px solid var(--rule);
    box-shadow:var(--sh-2),var(--sh-1);position:relative;overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.vote-card::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,250,238,.65) 50%,transparent 65%);
    transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.vote-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3),var(--sh-1);color:var(--ink);background-image:linear-gradient(180deg,var(--paper-hi),var(--paper-2))}
.vote-card:hover::after{transform:translateX(120%)}
/* 封蝋 */
.vote-seal{flex:none;width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#FBF4E4;font-size:1.5rem;position:relative;
    background:radial-gradient(circle at 35% 30%,#C0563E,var(--ember) 55%,var(--ember-dk));
    box-shadow:0 0 0 4px rgba(147,48,28,.18),inset 0 -3px 6px rgba(0,0,0,.25),inset 0 2px 4px rgba(255,255,255,.2);
    transition:transform .5s cubic-bezier(.3,1.5,.4,1)}
.vote-seal::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed rgba(147,48,28,.45);
    animation:sealTurn 14s linear infinite}
.vote-card:hover .vote-seal{transform:rotate(-14deg) scale(1.08)}
.vote-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.vote-k{font-family:var(--f-caps);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-caps);
    font-size:var(--t-2xs);color:var(--ember-dk)}
.vote-t{font-size:var(--t-xl);font-weight:800;letter-spacing:var(--ls-ttl);line-height:1.4}
.vote-s{font-size:var(--t-xs);color:var(--ink-3)}
.vote-go{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--rule);color:var(--ember-dk);transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s,color .3s}
.vote-card:hover .vote-go{transform:translateX(6px);background:var(--ember);color:#FBF4E4;border-color:var(--ember-dk)}
.vote-card.in .vote-seal{animation:stampIn .75s cubic-bezier(.2,1.4,.3,1) .15s backwards}
@keyframes stampIn{from{transform:scale(2.2) rotate(-30deg);opacity:0}60%{opacity:1}}
@keyframes sealTurn{to{transform:rotate(360deg)}}

/* =========================================================
   アニメーション追加
   （transform / opacity だけを動かす。終わったら元のスタイルに戻る
     backwards 指定にして、ホバー時の動きを邪魔しない）
   ========================================================= */
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes slideR{from{opacity:0;transform:translateX(-26px)}}
@keyframes popIn{from{opacity:0;transform:scale(.4) rotate(-20deg)}}
@keyframes inkIn{from{clip-path:inset(0 100% 0 0);opacity:.3}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes stamp{from{opacity:0;transform:scale(1.7) rotate(-14deg)}70%{opacity:1;transform:scale(.94) rotate(2deg)}}
@keyframes diaSpin{from{transform:rotate(-315deg) scale(0)}}
@keyframes pinDrop{from{opacity:0;transform:translateY(-26px) rotate(45deg)}70%{opacity:1;transform:translateY(3px) rotate(45deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes barFlow{to{background-position:32px 0}}

/* ページ見出し：墨で書くように左から現れる／番号札は判を押すように */
.page-head h1{animation:inkIn 1s cubic-bezier(.2,.8,.2,1) .15s backwards}
.page-head .num{animation:stamp .7s cubic-bezier(.2,.8,.2,1) .05s backwards}
.page-head p{animation:rise .7s cubic-bezier(.2,.8,.2,1) .45s backwards}
.page-head .kicker{animation:rise .6s cubic-bezier(.2,.8,.2,1) .05s backwards}

/* セクション見出しの菱形がくるっと回って止まる */
.sec-underline.in::before{animation:diaSpin .9s cubic-bezier(.2,.8,.2,1) backwards}

/* 並んだものは一つずつ順番に */
.news.in>li{animation:slideR .6s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),10)*70ms) backwards}
.news.in>li::before{animation:pinDrop .6s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),10)*70ms + .2s) backwards}
.pillars.in>div{animation:rise .7s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*110ms) backwards}
.steps.in>li{animation:rise .6s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*110ms) backwards}
.faq.in>div{animation:rise .5s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),10)*55ms) backwards}
.addr.in>li{animation:slideR .55s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*80ms) backwards}
.duo.in>.col{animation:rise .7s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*130ms) backwards}
.table-wrap.in tbody tr{animation:slideR .5s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),12)*45ms + .1s) backwards}
.row-item.in .ico{animation:popIn .6s cubic-bezier(.3,1.5,.4,1) .1s backwards}
.callout.in>i{animation:popIn .6s cubic-bezier(.3,1.5,.4,1) .15s backwards}
.wiki-subnav .wrap>a{animation:navDown .45s ease-out calc(min(var(--k,0),14)*35ms + .1s) backwards}

/* ちょっとした動き */
.tag{transition:transform .2s}
.news li:hover .tag,.tag:hover{animation:wiggle .45s ease-in-out}
.row-item:hover .ico{animation:floaty 1.4s ease-in-out infinite}
.reset .bar i{background-size:32px 100%;animation:barFlow 1.2s linear infinite}
.news-all a i,.news .more{transition:transform .25s}
.news-all a:hover i{transform:translateX(5px)}
.news .more:hover{transform:translateX(4px)}

/* 最初のボタンに、波紋がゆっくり広がる（輪郭線だけを動かす） */
@keyframes ctaRing{from{outline:1.5px solid rgba(55,86,99,.6);outline-offset:0}
    to{outline:1.5px solid rgba(55,86,99,0);outline-offset:12px}}
.opening .cta .btn.fill{animation:ctaRing 2.4s ease-out 6.5s infinite}

/* ---------- サイト全体の動き（第2弾） ---------- */
@keyframes menuDown{from{opacity:0;transform:translateY(-14px)}}
@keyframes pageOut{to{opacity:0;transform:translateY(-10px)}}

/* ページを移るとき、ふっと消えてから次へ */
body.leaving .main{animation:pageOut .22s ease-in forwards}

/* 上のバー：少しスクロールすると影が落ちる */
.topbar{transition:box-shadow .3s ease}
.topbar.scrolled{box-shadow:0 10px 22px -14px rgba(47,32,16,.55)}

/* スマホのメニュー：下りてきて、項目が順に並ぶ */
.mobile-nav.open{animation:menuDown .32s cubic-bezier(.2,.8,.2,1)}
.mobile-nav.open ul>li{animation:slideR .4s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*40ms + .05s) backwards}
.mobile-nav.open .m-server{animation:rise .45s cubic-bezier(.2,.8,.2,1) .35s backwards}
.menu-btn i{transition:transform .35s cubic-bezier(.3,1.4,.4,1)}
.menu-btn[aria-expanded="true"] i{transform:rotate(90deg)}

/* お知らせの記事は段落ごとに */
.news-article.in>*{animation:rise .6s cubic-bezier(.2,.8,.2,1) calc(min(var(--k,0),8)*90ms) backwards}

/* 前後のページ送り */
.pager.in>a{animation:rise .6s cubic-bezier(.2,.8,.2,1) calc(var(--k,0)*120ms) backwards}
.pager .lab i{display:inline-block;transition:transform .25s}
.pager .prev:hover .lab i{transform:translateX(-5px)}
.pager .next:hover .lab i{transform:translateX(5px)}

/* ページ見出しのラベル横の線が伸びる */
.page-head .kicker::after{transform-origin:left;animation:lineGrow .9s cubic-bezier(.2,.8,.2,1) .35s backwards}

/* 写真は近づくと少し寄る */
.logbook .shot img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s}
.logbook:hover .shot img{transform:scale(1.07);filter:sepia(.2) contrast(1.04) saturate(.95)}

/* 戻るリンクの矢印 */
.news-back a i{transition:transform .25s}
.news-back a:hover i{transform:translateX(-5px)}

/* 表の行は乗せると色がつく */
.spec tbody tr{transition:background-color .2s}
.spec tbody tr:hover{background:rgba(147,48,28,.06)}

/* フッター：規約へのリンクと、Minecraft非公式の表記 */
.foot p+p{margin-top:8px}
.foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--ink-2);letter-spacing:.14em}
.foot-links a:hover{color:var(--ember)}
.foot-note{font-family:var(--f-body);text-transform:none;font-weight:400;letter-spacing:.04em;
    font-size:var(--t-3xs);color:var(--ink-3);line-height:1.8;max-width:46em;margin-left:auto;margin-right:auto}

/* =========================================================
   画面が狭いとき
   ========================================================= */
@media (max-width:980px){
    .site-nav,.topbar-cta .side-discord{display:none}
    .menu-btn{display:flex}
    .wrap{padding:0 20px}
    .page-head{padding:30px 0 24px}
    .page-head h1{font-size:var(--t-2xl)}
    .opening .grid{grid-template-columns:1fr;min-height:0}
    .logbook{width:100%;margin:26px 0 0;transform:rotate(-.6deg)}
    .chartzone{min-height:0}
    .duo,.pillars{grid-template-columns:1fr}
    .facts,.stats{grid-template-columns:1fr 1fr;gap:16px}
    .news li{grid-template-columns:1fr;gap:6px;padding:22px 20px}
    .row-item{grid-template-columns:46px 1fr;gap:14px}
    .row-item .ico{width:46px;height:46px;font-size:var(--t-lg)}
    .pager{grid-template-columns:1fr}
    .pager .next{grid-column:1;text-align:left}
    section{padding:36px 0}
    .closing{margin:0 20px;padding:44px 24px}
    .wiki-subnav .wrap{padding:10px 20px}
    .cartouche{padding:28px 24px 24px;margin-top:0}
    .opening h1{font-size:var(--t-3xl)}
}

/* --- スマホ --- */
@media (max-width:700px){
    /* 上のバー：IP表示を省いてメニューが必ず入るように */
    .topbar{padding:0 14px;gap:10px}
    .topbar-cta .ip-copy{display:none}
    .brand-name{font-size:var(--t-lg)}
    .brand img{width:32px;height:32px}
    .menu-btn{padding:9px 13px;font-size:var(--t-sm)}

    /* 地図は切り取らず全体を見せる */
    .chartzone{min-height:0;padding:0;display:block}
    .chartzone .chartmap{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/11;
        will-change:auto;transform:none;animation-duration:.9s;
        border-bottom:1px solid var(--rule)}
    .chartzone .chart{will-change:auto;transform:none}
    .chartzone .chart-fx{background-size:140px 140px,auto}
    .chartzone .overlay{position:relative;padding:0}
    .chartzone .opening{padding:22px 0 30px}
    .chartzone .opening .grid{gap:0}

    /* 端末が重いので1本ずつ描くのはやめ、完成した地図を出す */
    .chart .draw{stroke-dashoffset:0;animation:none}
    .chart .fade{opacity:var(--o,1);animation:none}
    .chart .waves,.chart .ship-inner{animation:none}
    .has-chart .inkbar{animation:inkbar 1s cubic-bezier(.3,.7,.35,1) forwards,inkfade .4s 1.1s forwards}
    .has-chart .cartouche{animation-delay:.5s}
    .has-chart .logbook{animation-delay:.72s}
    .has-chart .cartouche .cnr{animation-delay:.95s}
    .has-chart .scroll-cue{animation-delay:1.1s}

    /* 余白と文字を詰める */
    .cartouche{padding:20px 16px 18px;margin:0}
    .opening h1{font-size:var(--t-2xl);line-height:1.5}
    .opening .lead{font-size:var(--t-sm);line-height:1.85}
    .opening .eyebrow{font-size:var(--t-3xs);letter-spacing:.14em}
    /* 航海日誌：斜めにしない・少し詰める */
    .logbook{margin:18px 0 0;transform:none;padding:14px;
        box-shadow:0 10px 22px -12px rgba(47,32,16,.5)}
    .logbook:hover{transform:none}
    .logbook .shot{aspect-ratio:16/10;margin-bottom:12px}
    .logbook .ttl{margin-bottom:10px}
    .opening .cta{display:grid;gap:10px}
    .opening .cta>*{width:100%;justify-content:center;text-align:center}
    .rail{display:none}

    /* スクロール案内は重ねずに、いちばん下へ置く */
    .scroll-cue{position:static;transform:none;display:block;text-align:center;
        margin:4px 0 22px;font-size:var(--t-2xs);letter-spacing:.2em}
    .scroll-cue i{margin-top:2px}

    /* 文字を少し詰めて1行に入る量を増やす */
    body{line-height:1.85}
    h2.sec{font-size:var(--t-xl)}
    .sec-note,.news p,.row-item p,.steps p,.duo li,.faq .ans p,.callout,.pillars p{font-size:var(--t-sm)}
    .row-item h3,.steps h3,.pillars h3,.news h3{font-size:1rem}
    section{padding:30px 0}

    .closing h2{font-size:var(--t-2xl);word-break:auto-phrase}
    .vote-card{gap:14px;padding:16px}
    .vote-seal{width:52px;height:52px;font-size:1.15rem}
    .vote-t{font-size:var(--t-lg)}
    .vote-go{display:none}
    .opening .cta .btn.fill{animation-delay:1.6s}

    .page-head .wrap{gap:13px}
    .page-head .num{width:42px;height:42px;margin-top:2px}
    .spec{font-size:var(--t-sm)}
    .spec th,.spec td{padding:11px 12px}
    .spec th{width:46%}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
        transition-duration:.001ms!important;scroll-behavior:auto!important}
    .chart .draw{stroke-dashoffset:0}
    .chart .fade,.has-chart .cartouche,.has-chart .logbook,.has-chart .cartouche .cnr,.has-chart .scroll-cue,
    .topbar .brand,.topbar .site-nav li,.topbar-cta>*{opacity:1}
    [data-rv]{opacity:1;transform:none}
    .sec-underline::after{transform:scaleX(1)}
    .has-chart .opening h1 em{background-size:100% 2px}
    .strip .track,.closing::before{animation:none!important}
    .svg-draw path,.svg-draw circle{stroke-dashoffset:0}
    .vote-seal::before,.reset .bar i,.opening .cta .btn.fill{animation:none!important}
}