/*
Theme Name: Hinokio Focus Creative
Theme URI: https://hinokio.focus-creative.net/
Author: 株式会社FOCUS
Description: 檜尾建設株式会社 デモサイト用オリジナルテーマ
Version: 1.0.0
Text Domain: hinokio-focus
*/

:root{
      --font:"DotGothic16","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
      --ink:#fff;
      --dark:#020712;
      --panel:#071424;
      --panel2:#0d2344;
      --blue:#123f82;
      --gold:#d7b04a;
      --gold2:#ffdf78;
      --sky:#65d4ff;
      --cream:#f5eccf;
      --green:#61b447;
      --line:rgba(255,255,255,.18);
    }
    *{box-sizing:border-box;font-family:var(--font)!important}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--dark);color:var(--ink);letter-spacing:.055em;overflow-x:hidden}
    body.loading{overflow:hidden}
    a{color:inherit;text-decoration:none}
    img,video{display:block;max-width:100%}
    .scan{position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.13;background:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px);mix-blend-mode:overlay;animation:scan 1.2s linear infinite}
    .noise{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.08;background-image:linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:4px 4px}
    @keyframes scan{to{transform:translateY(8px)}}

    .splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:end center;padding:24px 24px clamp(58px,8vh,110px);background:#020712 url("http://hinokio.focus-creative.net/wp-content/uploads/2026/05/スプラッシュ背景.jpg") center center/cover no-repeat;transition:opacity .55s steps(8),visibility .55s steps(8)}
    body.loaded .splash{opacity:0;visibility:hidden;pointer-events:none}
    .splash-card{width:min(560px,88vw);padding:28px 30px 24px;text-align:center;background:linear-gradient(180deg,rgba(10,31,61,.88),rgba(3,10,23,.92));border:4px solid #030712;box-shadow:0 0 0 4px var(--gold),0 0 0 8px #2b1d08,0 20px 70px rgba(0,0,0,.62),inset 0 0 0 2px rgba(255,255,255,.12);clip-path:polygon(4% 0,96% 0,100% 10%,100% 90%,96% 100%,4% 100%,0 90%,0 10%);animation:pop .55s steps(8)}
    .splash-title{margin:0;color:var(--gold2);font-size:clamp(30px,5vw,58px);line-height:1;text-shadow:4px 4px 0 #000,0 0 18px rgba(255,223,120,.65);animation:blink 1.2s steps(2) infinite}
    .splash-sub{font-size:clamp(16px,2vw,22px);text-shadow:3px 3px 0 #000}
    .loadbar{height:20px;padding:3px;background:#01040a;border:2px solid var(--gold2);overflow:hidden;box-shadow:inset 0 0 14px #000}
    .loadbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#1da9ff,#a8ffff,#ffdf78);box-shadow:0 0 18px var(--sky);transition:width .16s steps(4)}
    .loadtext{margin-top:12px;color:var(--gold2);font-size:16px;text-shadow:3px 3px 0 #000}
    @keyframes pop{from{scale:.9;opacity:0}to{scale:1;opacity:1}}@keyframes blink{50%{filter:brightness(1.3)}}

    .frame{border:3px solid #030711;box-shadow:0 0 0 3px var(--gold),0 0 0 5px #2b1d08,0 12px 0 rgba(0,0,0,.24),inset 0 0 0 2px rgba(255,255,255,.1)}
    .cut{clip-path:polygon(4% 0,96% 0,100% 12%,100% 88%,96% 100%,4% 100%,0 88%,0 12%)}
    .shine{position:relative;overflow:hidden}.shine:after{content:"";position:absolute;inset:-60% -80%;background:linear-gradient(100deg,transparent 43%,rgba(255,255,255,.42) 50%,transparent 57%);translate:-76% 0;animation:shine 4.4s steps(20) infinite;pointer-events:none}@keyframes shine{0%,70%{translate:-76% 0}100%{translate:76% 0}}

    .hero{position:relative;isolation:isolate;min-height:100svh;--hero-bg-desktop:url("http://hinokio.focus-creative.net/wp-content/uploads/2026/05/背景.png");--hero-bg-mobile:url("http://hinokio.focus-creative.net/wp-content/uploads/2026/05/38f144e6-e45d-4a11-8034-fbf10c07ab7f-e1779804858227.jpg");background-image:linear-gradient(90deg,rgba(2,7,18,.38),rgba(2,7,18,.18) 44%,rgba(2,7,18,.45)),linear-gradient(180deg,rgba(2,7,18,.1),rgba(2,7,18,.44) 70%,rgba(2,7,18,.88)),var(--hero-bg-desktop);background-size:cover;background-position:center center;background-repeat:no-repeat;padding:clamp(18px,2.3vw,34px) clamp(18px,4vw,64px) clamp(18px,2vw,30px);display:flex;flex-direction:column;gap:clamp(14px,1.6vw,24px)}
    .hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 14% 8%,rgba(255,255,255,.46),transparent 23%),radial-gradient(circle at 70% 24%,rgba(88,205,255,.17),transparent 26%);animation:skyPulse 5s steps(8) infinite}
    @keyframes skyPulse{50%{filter:brightness(1.12)}}
    .stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
    .star{position:absolute;width:4px;height:4px;background:#fff;left:var(--x);top:var(--y);clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);box-shadow:0 0 10px #fff,0 0 20px var(--sky);opacity:.3;animation:tw var(--d) steps(2) infinite var(--delay),drift calc(var(--d)*2) linear infinite}
    @keyframes tw{50%{opacity:1;transform:scale(1.7)}}@keyframes drift{to{translate:25px -36px}}

    .header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:22px;animation:down .7s steps(8) both}
    @keyframes down{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
    .logo{display:block;width:clamp(260px,30vw,500px);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.90));border:1px solid rgba(255,255,255,.72);border-radius:18px;padding:clamp(8px,1vw,14px) clamp(12px,1.35vw,22px);box-shadow:0 14px 32px rgba(0,0,0,.28),inset 0 0 0 2px rgba(255,255,255,.36);filter:none}
    .logo img{width:100%;height:auto;filter:none}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:6px;min-width:72px;height:72px;padding:10px 12px;background:linear-gradient(#173f83,#071932);color:var(--gold2);font-size:14px;text-shadow:3px 3px 0 #000;cursor:pointer}.menu-toggle .menu-bars{display:block;font-size:26px;line-height:1}.menu-toggle .menu-text{display:block;font-size:10px;letter-spacing:.08em}
    .nav{display:flex;align-items:center;justify-content:flex-end;gap:0;flex-wrap:wrap;text-shadow:3px 3px 0 #000}
    .nav a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:clamp(13px,1.15vw,18px);transition:.16s steps(4)}
    .nav a:not(.contact):before{content:"⚒";color:var(--gold2);opacity:0;translate:-8px 0;transition:.16s steps(4);filter:drop-shadow(2px 2px 0 #000)}
    .nav a:hover{color:var(--gold2);translate:0 -2px;text-shadow:3px 3px 0 #000,0 0 12px var(--gold2)}
    .nav a:hover:before{opacity:1;translate:0;animation:toolShake .36s steps(4) infinite}
    .nav a:not(:last-child):after{content:"";position:absolute;right:0;top:50%;translate:0 -50%;width:2px;height:22px;background:rgba(255,255,255,.75);box-shadow:2px 2px 0 #000}
    .contact{margin-left:16px;background:linear-gradient(#173f83,#071932);padding:12px 18px!important}.contact:after{display:none}
    @keyframes toolShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}

    .hero-main{position:relative;z-index:3;display:grid;grid-template-columns:minmax(450px,1fr) minmax(300px,420px);gap:clamp(22px,5vw,68px);align-items:start;flex:1}.copy{animation:left .8s steps(10) .45s both}@keyframes left{from{opacity:0;transform:translateX(-42px)}to{opacity:1;transform:none}}
    .label{display:inline-flex;align-items:center;justify-content:center;min-width:min(360px,100%);margin:8px 0 clamp(16px,2vw,28px);padding:12px 28px;color:var(--gold2);font-size:clamp(18px,1.8vw,28px);text-shadow:3px 3px 0 #000;background:linear-gradient(#112a55,#071729)}.label:before{content:"▶";margin-right:10px;color:#fff;animation:cursor .75s steps(2) infinite}@keyframes cursor{50%{opacity:0}}
    .title{margin:0;color:#fff;font-size:clamp(44px,5.6vw,92px);line-height:1.18;font-weight:400;letter-spacing:.08em;text-shadow:4px 0 0 #000,-4px 0 0 #000,0 4px 0 #000,0 -4px 0 #000,6px 6px 0 rgba(0,0,0,.72),0 0 16px rgba(255,255,255,.38)}
    .message{margin-top:clamp(18px,2vw,30px);max-width:780px;padding:22px 28px 26px 34px;background:rgba(1,7,15,.72);border-left:8px solid var(--gold2);box-shadow:0 12px 34px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.09);backdrop-filter:blur(2px);position:relative}.message:after{content:"▼";position:absolute;right:22px;bottom:12px;animation:cursor .7s steps(2) infinite}.message p{margin:0;min-height:4.6em;font-size:clamp(17px,1.9vw,28px);line-height:1.75;text-shadow:3px 3px 0 #000}
    .quest{align-self:start;margin-top:clamp(6px,2vw,40px);padding:8px;background:linear-gradient(135deg,var(--gold2),#72500f 50%,var(--gold2));animation:right .8s steps(10) .62s both,float 3.2s steps(8) infinite 1.5s}@keyframes right{from{opacity:0;transform:translateX(42px)}to{opacity:1;transform:none}}@keyframes float{50%{translate:0 -8px}}
    .quest-inner{padding:28px;background:linear-gradient(rgba(18,54,105,.96),rgba(3,12,25,.98));border:3px solid #030711}.quest h2{margin:0 0 18px;text-align:center;color:var(--gold2);font-size:clamp(22px,2.3vw,30px);text-shadow:3px 3px 0 #000}.quest p{margin:0 0 18px;font-size:17px;line-height:1.7;text-shadow:3px 3px 0 #000}.quest ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}.quest li{display:flex;align-items:center;gap:12px;font-size:16px;text-shadow:3px 3px 0 #000;animation:qitem .5s steps(6) both}.quest li:nth-child(1){animation-delay:1s}.quest li:nth-child(2){animation-delay:1.15s}.quest li:nth-child(3){animation-delay:1.3s}@keyframes qitem{from{opacity:0;translate:18px 0}to{opacity:1;translate:0}}.ico{display:grid;place-items:center;width:32px;height:32px;color:var(--gold2);border:1px solid rgba(255,223,120,.45);background:rgba(255,255,255,.08)}

    .hero-bottom{position:relative;z-index:4;display:grid;grid-template-columns:280px minmax(260px,360px) minmax(380px,1fr);gap:clamp(14px,2vw,28px);align-items:end;animation:up .75s steps(10) .9s both}@keyframes up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
    .status{padding:18px;background:linear-gradient(rgba(12,39,78,.94),rgba(2,10,22,.98))}.status-head,.status-row,.exp{display:flex;justify-content:space-between;gap:12px;text-shadow:3px 3px 0 #000}.status-head{padding-bottom:9px;margin-bottom:10px;border-bottom:2px solid var(--line);font-size:22px}.lv,.gold{color:var(--gold2)}.status-row{margin:7px 0;font-size:16px}.starline{color:var(--gold2);animation:starglow 1.35s steps(3) infinite}@keyframes starglow{50%{text-shadow:0 0 14px var(--gold2),3px 3px 0 #000}}.exp{margin-top:10px;font-size:15px}.bar{height:11px;margin-top:8px;padding:2px;background:#01040a;border:1px solid var(--gold2);overflow:hidden}.bar span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#1ea7ff,#a4ffff,#1ea7ff);background-size:200% 100%;animation:exp 1s steps(8) infinite}@keyframes exp{to{background-position:200% 0}}
    .commands{display:grid;gap:12px}.cmd{position:relative;display:flex;align-items:center;gap:12px;min-height:55px;padding:12px 16px;background:linear-gradient(#174b98,#08235a);font-size:18px;text-shadow:3px 3px 0 #000;transition:.16s steps(4)}.cmd:first-child{background:linear-gradient(#e3b945,#8b5d09)}.cmd:before{content:"⚒";color:var(--gold2);opacity:0;translate:-8px 0;transition:.16s steps(4);filter:drop-shadow(2px 2px 0 #000)}.cmd:hover{translate:8px -2px;filter:brightness(1.16)}.cmd:hover:before{opacity:1;translate:0;animation:toolShake .36s steps(4) infinite}.cmd:hover .cmd-icon{animation:toolShake .36s steps(4) infinite}.cmd-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
    .story{display:flex;align-items:center;justify-self:end;align-self:end;width:min(100%,760px);min-height:92px;padding:18px 26px;background:rgba(1,7,15,.72);font-size:clamp(15px,1.25vw,20px);line-height:1.55;text-shadow:3px 3px 0 #000;position:relative;backdrop-filter:blur(2px)}.story:before{content:"▶";margin-right:14px;color:var(--gold2);animation:cursor .7s steps(2) infinite}.story:after{content:"▼";position:absolute;right:26px;bottom:18px;animation:cursor .7s steps(2) infinite}

    .info{position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:rgba(1,7,15,.86);animation:up .75s steps(10) 1.05s both}.info-item{display:flex;align-items:center;gap:14px;padding:16px 18px;border-right:1px solid var(--line);min-height:78px}.info-item:last-child{border-right:0}.info-icon{display:grid;place-items:center;width:44px;height:44px;font-size:28px;border:1px solid rgba(255,223,120,.3);background:rgba(255,255,255,.06);filter:drop-shadow(3px 3px 0 #000);animation:bounce 1.8s steps(8) infinite}.info-title{display:block;color:var(--gold2);font-size:16px;text-shadow:3px 3px 0 #000}.info-text{display:block;margin-top:4px;font-size:14px;line-height:1.5;text-shadow:2px 2px 0 #000}@keyframes bounce{50%{translate:0 -4px}}

    .lp{background:radial-gradient(circle at 18% 0%,rgba(29,89,162,.32),transparent 28%),radial-gradient(circle at 82% 12%,rgba(215,176,74,.16),transparent 24%),linear-gradient(180deg,#020712 0%,#07172e 38%,#030814 100%);position:relative;overflow:hidden;color:#fff}.lp:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(101,212,255,.09) 1px,transparent 1px),linear-gradient(0deg,rgba(101,212,255,.08) 1px,transparent 1px),radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1px);background-size:46px 46px,46px 46px,18px 18px;pointer-events:none;opacity:.65}.section{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:clamp(64px,7vw,100px) 24px;color:#fff}.section.dark{color:#fff}.kicker{display:inline-flex;gap:10px;align-items:center;margin-bottom:16px;color:var(--gold2);text-shadow:3px 3px 0 #000;font-size:18px}.kicker:before{content:"◆";animation:cursor .7s steps(2) infinite}.section-title{margin:0 0 26px;color:#fff;font-size:clamp(34px,5vw,64px);font-weight:400;line-height:1.25;text-shadow:4px 4px 0 #000,0 0 18px rgba(101,212,255,.32)}
    .panel{padding:30px;background:linear-gradient(135deg,rgba(101,212,255,.08),transparent 38%),linear-gradient(180deg,rgba(10,31,61,.94),rgba(2,8,18,.97));color:#fff;line-height:1.9;text-shadow:3px 3px 0 #000;border:3px solid #030711;box-shadow:0 0 0 3px var(--gold),0 12px 0 rgba(0,0,0,.24),inset 0 0 0 2px rgba(255,255,255,.08)}.panel h3{margin:0 0 14px;color:var(--gold2);font-size:26px;font-weight:400}.panel p{margin:0;font-size:18px;color:#fff}.movie-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;align-items:center}.movie{padding:10px;background:linear-gradient(135deg,var(--gold2),#6e4b0d 50%,var(--gold2))}.movie video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;border:3px solid #030711}
    .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}.card{min-height:250px;padding:20px;background:linear-gradient(135deg,rgba(101,212,255,.08),transparent 38%),linear-gradient(180deg,rgba(10,31,61,.94),rgba(2,8,18,.97));color:#fff;transition:.18s steps(4);position:relative;border:3px solid #030711;box-shadow:0 0 0 3px var(--gold),0 12px 0 rgba(0,0,0,.24),inset 0 0 0 2px rgba(255,255,255,.08)}.card:hover{translate:0 -8px;filter:brightness(1.12)}.card img{width:100%;height:118px;object-fit:contain;margin-bottom:16px;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.45))}.card h3{margin:0 0 10px;color:var(--gold2);font-size:22px;font-weight:400;text-shadow:3px 3px 0 #000}.card p{margin:0;font-size:15px;line-height:1.8;color:#fff;text-shadow:2px 2px 0 #000}
    .business-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}.quest-card{padding:26px;background:linear-gradient(135deg,rgba(101,212,255,.08),transparent 38%),linear-gradient(180deg,rgba(10,31,61,.94),rgba(2,8,18,.97));color:#fff;position:relative;overflow:hidden;border:3px solid #030711;box-shadow:0 0 0 3px var(--gold),0 12px 0 rgba(0,0,0,.24),inset 0 0 0 2px rgba(255,255,255,.08)}.quest-card:after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,transparent,var(--sky),transparent);animation:data 2.2s steps(12) infinite}@keyframes data{from{translate:-100% 0}to{translate:100% 0}}.quest-card .num{color:var(--gold2);font-size:34px;text-shadow:3px 3px 0 #000}.quest-card h3{font-size:24px;margin:8px 0 12px;color:var(--gold2);font-weight:400;text-shadow:3px 3px 0 #000}.quest-card p{font-size:16px;line-height:1.85;margin:0;color:#fff;text-shadow:2px 2px 0 #000}
    .works{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}.work{background:linear-gradient(135deg,rgba(101,212,255,.08),transparent 38%),linear-gradient(180deg,rgba(10,31,61,.94),rgba(2,8,18,.97));color:#fff;overflow:hidden;transition:.18s steps(4);border:3px solid #030711;box-shadow:0 0 0 3px var(--gold),0 12px 0 rgba(0,0,0,.24),inset 0 0 0 2px rgba(255,255,255,.08)}.work:hover{translate:0 -8px;filter:brightness(1.12)}.work img{width:100%;height:180px;object-fit:cover}.work b{display:block;padding:16px;color:var(--gold2);font-weight:400;text-shadow:3px 3px 0 #000}
    .company-table{display:grid;grid-template-columns:180px 1fr;gap:1px;margin-top:26px;background:rgba(255,255,255,.16);border:1px solid rgba(255,223,120,.42)}.company-table div{padding:14px 16px;background:rgba(2,10,22,.88);color:#fff;text-shadow:2px 2px 0 #000}.company-table div:nth-child(odd){color:var(--gold2)}.recruit-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}.recruit-list .quest-card{min-height:180px}.contact-box{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}.tel{font-size:30px;color:var(--gold2);text-shadow:3px 3px 0 #000}.footer{position:relative;z-index:2;padding:40px 24px;text-align:center;background:#020712;border-top:3px solid var(--gold);text-shadow:3px 3px 0 #000}
    .reveal{opacity:0;transform:translateY(35px);transition:opacity .55s steps(10),transform .55s steps(10)}.reveal.show{opacity:1;transform:none}.spark{position:fixed;z-index:9998;width:8px;height:8px;background:var(--gold2);box-shadow:0 0 12px var(--gold2),0 0 22px #fff;pointer-events:none;animation:spark .7s steps(6) forwards}@keyframes spark{to{opacity:0;transform:translateY(-22px) scale(.2)}}

    @media (min-width:901px){.hero{height:100svh!important;min-height:100svh!important;max-height:100svh!important;overflow:hidden;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(8px,1.2vh,18px)!important;padding:clamp(12px,1.8vh,26px) clamp(18px,4vw,64px) clamp(10px,1.4vh,22px)!important;background-position:center 48%!important}.header{min-height:0;align-items:center!important}.logo{width:clamp(250px,28vw,470px)!important}.nav a{padding:clamp(5px,.8vh,8px) clamp(10px,1vw,16px)!important;font-size:clamp(12px,1vw,17px)!important}.contact{padding:clamp(8px,1vh,12px) clamp(14px,1.2vw,18px)!important}.hero-main{min-height:0!important;grid-template-columns:minmax(420px,1fr) minmax(300px,420px)!important;align-items:start!important;gap:clamp(18px,4vw,60px)!important}.label{margin:clamp(2px,.6vh,8px) 0 clamp(10px,1.4vh,20px)!important;padding:clamp(8px,1vh,12px) clamp(20px,1.8vw,28px)!important;font-size:clamp(17px,2.2vh,26px)!important}.title{font-size:clamp(44px,8.1vh,88px)!important;line-height:1.10!important}.message{margin-top:clamp(12px,1.6vh,24px)!important;padding:clamp(14px,1.8vh,22px) clamp(22px,2vw,30px) clamp(18px,2vh,28px) clamp(26px,2.4vw,36px)!important;max-width:760px!important}.message p{min-height:0!important;font-size:clamp(16px,2.25vh,26px)!important;line-height:1.58!important}.quest{width:min(420px,100%)!important;justify-self:end;margin-top:clamp(0px,1vh,24px)!important}.quest-inner{padding:clamp(18px,2vh,28px)!important}.quest h2{margin-bottom:clamp(10px,1.3vh,18px)!important;font-size:clamp(21px,2.8vh,29px)!important}.quest p,.quest li{font-size:clamp(14px,1.8vh,17px)!important}.quest ul{gap:clamp(8px,1.1vh,14px)!important}.ico{width:clamp(27px,3.4vh,32px)!important;height:clamp(27px,3.4vh,32px)!important}.hero-bottom{min-height:0!important;grid-template-columns:clamp(240px,18vw,300px) clamp(270px,23vw,370px) minmax(360px,1fr)!important;gap:clamp(12px,1.7vw,26px)!important;align-items:stretch!important}.status{padding:clamp(12px,1.6vh,18px)!important}.status-head{font-size:clamp(18px,2.35vh,23px)!important;margin-bottom:clamp(6px,.8vh,10px)!important;padding-bottom:clamp(6px,.8vh,9px)!important}.status-row{font-size:clamp(13px,1.75vh,16px)!important;margin:clamp(4px,.65vh,7px) 0!important}.exp{font-size:clamp(12px,1.65vh,15px)!important;margin-top:clamp(6px,.8vh,10px)!important}.commands{gap:clamp(8px,1.2vh,12px)!important}.cmd{min-height:clamp(44px,6.2vh,56px)!important;padding:clamp(8px,1.2vh,12px) clamp(12px,1.2vw,16px)!important;font-size:clamp(15px,2.05vh,18px)!important}.cmd-icon{width:clamp(28px,3.7vh,32px)!important;height:clamp(28px,3.7vh,32px)!important}.story{justify-self:end!important;align-self:end!important;width:min(100%,760px)!important;max-width:760px!important;min-height:clamp(76px,11vh,118px)!important;padding:clamp(12px,1.55vh,18px) clamp(18px,2vw,26px)!important;font-size:clamp(13px,1.65vh,18px)!important;line-height:1.45!important;background:rgba(1,7,15,.70)!important}.info{min-height:clamp(60px,8.6vh,82px)!important}.info-item{min-height:clamp(58px,8.4vh,78px)!important;padding:clamp(8px,1.3vh,16px) clamp(12px,1.2vw,18px)!important}.info-icon{width:clamp(34px,4.9vh,44px)!important;height:clamp(34px,4.9vh,44px)!important;font-size:clamp(20px,3.2vh,28px)!important}.info-title{font-size:clamp(13px,1.8vh,16px)!important}.info-text{font-size:clamp(11px,1.55vh,14px)!important;line-height:1.38!important}}
    @media (min-width:901px) and (max-height:760px){.hero{grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px!important;padding-top:10px!important;padding-bottom:8px!important}.logo{width:clamp(220px,24vw,410px)!important;padding:7px 12px!important}.title{font-size:clamp(38px,7.2vh,68px)!important;line-height:1.06!important}.label{font-size:clamp(15px,2.1vh,22px)!important;padding:7px 18px!important}.message{margin-top:10px!important;padding:12px 20px 16px 26px!important}.message p{font-size:clamp(14px,2.05vh,19px)!important;line-height:1.45!important}.quest-inner{padding:16px!important}.quest h2{font-size:20px!important;margin-bottom:8px!important}.quest p,.quest li{font-size:13px!important}.quest ul{gap:7px!important}.hero-bottom{grid-template-columns:230px 300px minmax(320px,1fr)!important;gap:12px!important}.status{padding:11px!important}.status-head{font-size:17px!important}.status-row{font-size:13px!important;margin:3px 0!important}.bar{height:9px!important}.cmd{min-height:40px!important;font-size:14px!important;padding:7px 12px!important}.story{font-size:13px!important;line-height:1.38!important;padding:10px 16px!important;min-height:62px!important;width:min(100%,640px)!important}.info-item{min-height:52px!important;padding:7px 12px!important}.info-icon{width:30px!important;height:30px!important;font-size:18px!important}.info-title{font-size:12px!important}.info-text{font-size:10px!important}}
    @media (max-width:1200px){.hero-main{grid-template-columns:1fr}.quest{justify-self:start;width:min(430px,100%)}.hero-bottom{grid-template-columns:280px 1fr}.story{grid-column:1/-1}.info{grid-template-columns:repeat(2,1fr)}.info-item:nth-child(2){border-right:0}.info-item:nth-child(-n+2){border-bottom:1px solid var(--line)}.movie-grid{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:760px){
      /* スマホだけ調整：PC表示は上のCSSをそのまま使用 */
      .scan,.noise{opacity:.045}
      .splash{padding:20px 16px 54px;background:#020712 url("http://hinokio.focus-creative.net/wp-content/uploads/2026/05/38f144e6-e45d-4a11-8034-fbf10c07ab7f-e1779804858227.jpg") center top/cover no-repeat}
      .splash:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,7,18,.04),rgba(2,7,18,.28) 48%,rgba(2,7,18,.68));pointer-events:none}
      .splash-card{position:relative;z-index:1;width:min(92vw,520px);padding:22px 18px 20px;background:linear-gradient(180deg,rgba(10,31,61,.84),rgba(3,10,23,.92))}

      .hero{
        min-height:100svh;
        height:auto;
        padding:10px 12px 14px;
        gap:10px;
        overflow:hidden;
        background-image:
          linear-gradient(180deg,rgba(2,7,18,.00) 0%,rgba(2,7,18,.04) 28%,rgba(2,7,18,.34) 66%,rgba(2,7,18,.82) 100%),
          linear-gradient(90deg,rgba(2,7,18,.34) 0%,rgba(2,7,18,.04) 47%,rgba(2,7,18,.14) 100%),
          var(--hero-bg-mobile);
        background-position:center top;
        background-size:cover;
        background-repeat:no-repeat;
      }
      .hero:before{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 20%),radial-gradient(circle at 13% 12%,rgba(255,255,255,.18),transparent 15%),radial-gradient(circle at 78% 9%,rgba(101,212,255,.10),transparent 24%)}
      .stars{opacity:.44}

      .header{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
        position:relative;
        z-index:30;
        margin:0;
        padding:0;
        background:transparent;
        box-shadow:none;
      }
      .logo{
        width:min(62vw,300px);
        max-width:none;
        padding:7px 9px;
        background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.90));
        border:1px solid rgba(255,255,255,.74);
        border-radius:12px;
        box-shadow:0 8px 20px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.36);
      }
      .logo img{width:100%;max-height:54px;object-fit:contain;object-position:left center}
      .menu-toggle{
        display:flex;
        flex-direction:column;
        flex:0 0 58px;
        min-width:58px;
        height:58px;
        padding:8px 8px;
        border:2px solid #030711;
        background:linear-gradient(#143c7d,#071932);
        box-shadow:0 0 0 2px var(--gold),0 5px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.10);
      }
      .menu-toggle .menu-bars{font-size:23px}
      .menu-toggle .menu-text{font-size:9px}
      .nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;padding:12px;background:rgba(2,7,18,.96);border:3px solid #030711;box-shadow:0 0 0 3px var(--gold),0 0 0 5px #2b1d08,0 14px 30px rgba(0,0,0,.42);gap:8px;text-shadow:3px 3px 0 #000}
      .nav.open{display:grid}
      .nav a{justify-content:flex-start;font-size:15px;padding:12px 14px;background:rgba(8,27,55,.94);border:1px solid rgba(255,223,120,.32)}
      .nav a:before,.nav a:after{display:none}
      .contact{margin-left:0;width:100%}

      .hero-main{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        padding:0;
        min-height:0;
      }
      .copy{padding:6px 2px 0;background:transparent;border:0;backdrop-filter:none;border-radius:0}
      .label{
        width:min(54vw,250px);
        min-width:0;
        margin:6px 0 10px;
        padding:8px 11px;
        justify-content:flex-start;
        font-size:clamp(12px,3.55vw,16px);
        background:linear-gradient(#112a55,#071729);
        box-shadow:0 0 0 2px var(--gold),0 0 0 4px #2b1d08,0 6px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.08);
      }
      .title{
        max-width:68vw;
        font-size:clamp(34px,11vw,52px);
        line-height:1.05;
        letter-spacing:.025em;
        text-shadow:3px 0 0 #000,-3px 0 0 #000,0 3px 0 #000,0 -3px 0 #000,5px 5px 0 rgba(0,0,0,.70),0 0 14px rgba(255,255,255,.30);
      }
      .message{
        width:min(58vw,300px);
        margin:10px 0 0;
        padding:12px 14px 17px;
        border-left:0;
        background:rgba(1,7,15,.58);
        border:1px solid rgba(255,223,120,.55);
        box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.08);
        backdrop-filter:blur(2px);
      }
      .message:after{right:12px;bottom:6px}
      .message p{min-height:0;font-size:clamp(12px,3.35vw,15px);line-height:1.65}
      .quest{
        display:block;
        width:min(56vw,270px);
        justify-self:start;
        margin:4px 0 0;
        padding:5px;
        animation:none;
        background:linear-gradient(135deg,var(--gold2),#72500f 50%,var(--gold2));
      }
      .quest-inner{padding:12px 14px;background:linear-gradient(rgba(18,54,105,.82),rgba(3,12,25,.90))}
      .quest h2{margin:0 0 8px;font-size:clamp(17px,4.7vw,22px)}
      .quest p{display:none}
      .quest ul{gap:7px}
      .quest li{gap:8px;font-size:clamp(12px,3.35vw,15px)}
      .ico{width:26px;height:26px;flex:0 0 26px}

      .hero-bottom{
        display:grid;
        grid-template-columns:minmax(132px,.78fr) minmax(170px,1.22fr);
        gap:9px;
        align-items:stretch;
        padding:0;
        min-height:0;
      }
      .status{
        min-width:0;
        padding:11px 12px;
        background:linear-gradient(rgba(12,39,78,.76),rgba(2,10,22,.88));
        box-shadow:0 0 0 2px var(--gold),0 6px 0 rgba(0,0,0,.20),inset 0 0 0 1px rgba(255,255,255,.09);
      }
      .status-head{font-size:clamp(15px,4vw,19px);margin-bottom:7px;padding-bottom:6px}
      .status-row{font-size:clamp(11px,3.1vw,14px);margin:4px 0}
      .exp{font-size:clamp(10px,2.9vw,13px);margin-top:6px}
      .bar{height:8px;margin-top:6px}
      .commands{
        min-width:0;
        display:grid;
        grid-template-columns:1fr;
        gap:7px;
      }
      .cmd{
        min-height:42px;
        padding:8px 10px;
        gap:8px;
        justify-content:flex-start;
        text-align:left;
        font-size:clamp(12px,3.45vw,15px);
        background:linear-gradient(180deg,rgba(23,75,152,.90),rgba(8,35,90,.88));
        box-shadow:0 0 0 2px rgba(215,176,74,.88),0 5px 0 rgba(0,0,0,.20),inset 0 0 0 1px rgba(255,255,255,.08);
      }
      .cmd:first-child{min-height:44px;font-size:clamp(13px,3.65vw,16px);background:linear-gradient(180deg,rgba(227,185,69,.94),rgba(139,93,9,.92))}
      .cmd-icon{width:26px;height:26px;flex:0 0 26px}
      .cmd:after{content:"›";margin-left:auto;color:#fff;font-size:20px;text-shadow:2px 2px 0 #000}
      .story{display:none}

      .info{
        grid-template-columns:repeat(4,1fr);
        margin:0;
        background:rgba(1,7,15,.72);
        border-color:#030711;
        box-shadow:0 0 0 2px var(--gold),0 8px 0 rgba(0,0,0,.20),inset 0 0 0 1px rgba(255,255,255,.08);
      }
      .info-item{
        display:grid;
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
        gap:4px;
        padding:8px 5px;
        min-height:70px;
        border-right:1px solid var(--line);
        border-bottom:0;
      }
      .info-item:last-child{border-right:0}
      .info-icon{width:28px;height:28px;font-size:18px}
      .info-title{font-size:10px}
      .info-text{display:none}

      .grid4,.business-grid,.works,.recruit-list,.contact-box{grid-template-columns:1fr}
      .company-table{grid-template-columns:1fr}
      .company-table div:nth-child(odd){padding-bottom:0}
      .section{padding:56px 16px}
      .section-title{font-size:clamp(28px,9vw,42px);line-height:1.3}
      .panel{padding:22px}
      .panel h3{font-size:22px}
      .panel p,.quest-card p,.card p,.work b,.company-table div{font-size:15px}
    }
    @media (max-width:430px){
      .hero{padding:9px 10px 12px;background-position:center top}
      .logo{width:61vw;padding:6px 8px}
      .logo img{max-height:49px}
      .menu-toggle{flex-basis:54px;min-width:54px;height:54px}
      .label{width:55vw;margin-bottom:9px}
      .title{max-width:70vw;font-size:clamp(32px,10.4vw,46px)}
      .message{width:60vw;padding:10px 12px 15px}
      .message p{font-size:clamp(11px,3.15vw,14px);line-height:1.58}
      .quest{width:56vw}
      .quest-inner{padding:10px 12px}
      .quest li{font-size:clamp(11px,3.1vw,14px)}
      .hero-bottom{grid-template-columns:minmax(124px,.76fr) minmax(160px,1.24fr);gap:8px}
      .status{padding:10px}
      .status-head{font-size:15px}
      .status-row{font-size:11px}
      .cmd{min-height:39px;font-size:12px}
      .cmd:first-child{min-height:41px;font-size:13px}
      .cmd-icon{width:24px;height:24px;flex-basis:24px}
      .info-item{min-height:64px}
    }
    @media (max-width:374px){
      .hero{min-height:auto;overflow:visible}
      .title{max-width:78vw;font-size:34px}
      .message,.quest{width:100%}
      .hero-bottom{grid-template-columns:1fr}
      .commands{grid-template-columns:1fr 1fr}
      .cmd{min-height:40px;justify-content:center;text-align:center}
      .status{max-width:none}
      .info{grid-template-columns:repeat(2,1fr)}
      .info-item:nth-child(2){border-right:0}
      .info-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
    }

    @media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
  

    /* ===== Mobile refinement: closer to target reference ===== */
    @media (max-width:760px){
      .hero{
        min-height:auto!important;
        height:auto!important;
        overflow:visible!important;
        padding:10px 12px 14px!important;
        gap:10px!important;
        background-image:
          linear-gradient(180deg,rgba(2,7,18,.02) 0%,rgba(2,7,18,.08) 44%,rgba(2,7,18,.58) 100%),
          linear-gradient(90deg,rgba(2,7,18,.12) 0%,rgba(2,7,18,.00) 38%,rgba(2,7,18,.12) 100%),
          var(--hero-bg-mobile)!important;
        background-position:58% center!important;
        background-size:cover!important;
      }
      .header{align-items:flex-start!important;gap:12px!important}
      .logo{
        width:min(76vw,360px)!important;
        padding:10px 12px!important;
        border-radius:16px!important;
      }
      .logo img{max-height:66px!important;object-fit:contain;object-position:left center}
      .menu-toggle{
        flex:0 0 72px!important;
        min-width:72px!important;
        height:72px!important;
        padding:10px 8px!important;
      }
      .menu-toggle .menu-bars{font-size:30px!important}
      .menu-toggle .menu-text{font-size:10px!important}

      .hero-main{grid-template-columns:1fr!important;gap:10px!important}
      .copy{padding-top:2px!important}
      .label{
        width:min(56vw,280px)!important;
        min-width:0!important;
        margin:4px 0 10px!important;
        padding:10px 16px!important;
        font-size:clamp(13px,3.7vw,17px)!important;
      }
      .title{
        max-width:68vw!important;
        font-size:clamp(40px,11.2vw,60px)!important;
        line-height:1.05!important;
        letter-spacing:.015em!important;
      }
      .message{
        width:min(88vw,360px)!important;
        margin-top:12px!important;
        padding:16px 16px 18px!important;
        background:rgba(1,7,15,.58)!important;
        border:1px solid rgba(255,223,120,.58)!important;
        border-left:1px solid rgba(255,223,120,.58)!important;
      }
      .message p{font-size:clamp(14px,3.55vw,17px)!important;line-height:1.7!important}

      .quest{
        width:min(54vw,250px)!important;
        justify-self:start!important;
        margin-top:0!important;
        padding:5px!important;
        animation:none!important;
      }
      .quest-inner{padding:14px 14px 15px!important;background:linear-gradient(rgba(18,54,105,.86),rgba(3,12,25,.92))!important}
      .quest h2{margin-bottom:10px!important;font-size:clamp(18px,4.6vw,24px)!important}
      .quest p{display:none!important}
      .quest li{font-size:clamp(12px,3.2vw,15px)!important;line-height:1.45!important}

      .hero-bottom{
        grid-template-columns:minmax(150px,.9fr) minmax(176px,1.1fr)!important;
        gap:10px!important;
        align-items:start!important;
      }
      .status{
        order:2;
        padding:12px 12px 11px!important;
        background:linear-gradient(rgba(12,39,78,.82),rgba(2,10,22,.92))!important;
      }
      .status-head{font-size:clamp(17px,4.2vw,21px)!important}
      .status-row{font-size:clamp(12px,3.15vw,14px)!important;line-height:1.35!important}
      .exp{font-size:clamp(11px,2.95vw,13px)!important}
      .bar{height:9px!important}
      .commands{
        order:3;
        grid-column:1 / -1!important;
        gap:10px!important;
        margin-top:2px!important;
      }
      .cmd{
        min-height:64px!important;
        padding:12px 16px!important;
        gap:12px!important;
        font-size:clamp(15px,4.5vw,22px)!important;
        justify-content:flex-start!important;
        white-space:nowrap!important;
        line-height:1.2!important;
      }
      .cmd:first-child{min-height:68px!important;font-size:clamp(16px,4.8vw,24px)!important}
      .cmd-icon{width:32px!important;height:32px!important;flex:0 0 32px!important}
      .story{display:none!important}

      .info{margin-top:2px!important}
      .info-item{min-height:74px!important;padding:8px 4px!important}

      /* flatten to target-like order */
      .hero-main{display:grid!important;grid-template-columns:1fr!important}
      .hero-bottom{display:grid!important}
    }
    @media (max-width:760px){
      /* Move quest visually before status and keep full-width buttons below */
      .hero-main{margin-bottom:0!important}
      .quest{position:relative!important;z-index:3!important}
      .hero-bottom{margin-top:-2px!important}
    }
    @media (max-width:430px){
      .hero{padding:8px 10px 12px!important;background-position:60% center!important}
      .logo{width:78vw!important;padding:8px 10px!important}
      .logo img{max-height:58px!important}
      .menu-toggle{flex-basis:64px!important;min-width:64px!important;height:64px!important}
      .label{width:min(58vw,250px)!important;padding:8px 12px!important}
      .title{max-width:72vw!important;font-size:clamp(36px,10.5vw,52px)!important}
      .message{width:min(89vw,340px)!important;padding:14px 14px 17px!important}
      .message p{font-size:clamp(13px,3.45vw,16px)!important}
      .hero-bottom{grid-template-columns:minmax(142px,.88fr) minmax(162px,1.12fr)!important;gap:9px!important}
      .quest{width:min(54vw,230px)!important}
      .status{padding:11px 10px!important}
      .cmd{min-height:58px!important;font-size:clamp(14px,4.2vw,20px)!important;padding:10px 14px!important}
      .cmd:first-child{min-height:62px!important}
    }
    @media (max-width:374px){
      .title{max-width:76vw!important;font-size:34px!important}
      .message{width:100%!important}
      .hero-bottom{grid-template-columns:1fr 1fr!important}
      .commands{grid-column:1/-1!important}
      .cmd{min-height:52px!important;font-size:13px!important}
    }

  
    /* ===== v4 MOBILE POWER-UP: DQ風・背景縦長対応・読みやすさ強化 ===== */
    @media (max-width:760px){
      .scan{opacity:.075}
      .noise{opacity:.055}

      /* スマホ版スプラッシュ：背景を見せつつ、ローディングを中央・小型化 */
      .splash{
        place-items:center!important;
        padding:18px!important;
        background:#020712 url("http://hinokio.focus-creative.net/wp-content/uploads/2026/05/38f144e6-e45d-4a11-8034-fbf10c07ab7f-e1779804858227.jpg") center center/cover no-repeat!important;
      }
      .splash:before{
        content:"";
        position:absolute;
        inset:0;
        background:
          radial-gradient(circle at 50% 42%,rgba(255,255,255,.20),transparent 22%),
          linear-gradient(180deg,rgba(2,7,18,.10),rgba(2,7,18,.24) 48%,rgba(2,7,18,.52));
        pointer-events:none;
      }
      .splash-card{
        width:min(330px,78vw)!important;
        padding:18px 16px 16px!important;
        background:linear-gradient(180deg,rgba(8,24,49,.76),rgba(2,8,18,.86))!important;
        box-shadow:0 0 0 2px var(--gold),0 0 0 5px #2b1d08,0 14px 44px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.13)!important;
        border-width:2px!important;
      }
      .splash-title{font-size:clamp(22px,7vw,34px)!important;letter-spacing:.08em}
      .splash-sub{font-size:12px!important;margin:10px 0 12px!important}
      .loadbar{height:14px!important;padding:2px!important;border-width:1px!important}
      .loadtext{font-size:12px!important;margin-top:9px!important}

      /* スマホ背景：縦長画像の人物と城が出るように調整 */
      .hero{
        min-height:auto!important;
        height:auto!important;
        overflow:visible!important;
        padding:8px 10px 12px!important;
        gap:9px!important;
        background-image:
          linear-gradient(180deg,rgba(2,7,18,.03) 0%,rgba(2,7,18,.05) 35%,rgba(2,7,18,.34) 70%,rgba(2,7,18,.82) 100%),
          linear-gradient(90deg,rgba(2,7,18,.10) 0%,rgba(2,7,18,.00) 45%,rgba(2,7,18,.08) 100%),
          var(--hero-bg-mobile)!important;
        background-size:cover!important;
        background-position:center center!important;
        background-repeat:no-repeat!important;
      }
      .hero:after{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        border:2px solid rgba(255,223,120,.65);
        box-shadow:inset 0 0 0 2px rgba(3,7,17,.9),inset 0 0 18px rgba(255,223,120,.35);
      }

      .header{gap:9px!important;align-items:flex-start!important}
      .logo{
        width:min(75vw,350px)!important;
        padding:8px 10px!important;
        border-radius:14px!important;
        box-shadow:0 8px 18px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.38)!important;
      }
      .logo img{max-height:58px!important;object-fit:contain;object-position:left center!important}
      .menu-toggle{
        display:flex!important;
        flex-direction:column!important;
        flex:0 0 63px!important;
        min-width:63px!important;
        height:63px!important;
        padding:8px 7px!important;
        background:linear-gradient(180deg,#143e81,#07172e)!important;
        box-shadow:0 0 0 2px var(--gold),0 5px 0 rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.10)!important;
      }
      .menu-toggle .menu-bars{font-size:28px!important;line-height:.9!important}
      .menu-toggle .menu-text{font-size:9px!important;color:#fff!important}

      .hero-main{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
      .copy{padding:2px 1px 0!important}
      .label{
        width:min(59vw,265px)!important;
        min-width:0!important;
        margin:2px 0 8px!important;
        padding:8px 12px!important;
        justify-content:flex-start!important;
        font-size:clamp(12px,3.55vw,16px)!important;
        color:var(--gold2)!important;
        letter-spacing:.06em!important;
      }
      .label:before{content:"⚔"!important;margin-right:8px!important;color:#fff!important}

      .title{
        max-width:72vw!important;
        font-size:clamp(36px,10.7vw,54px)!important;
        line-height:1.06!important;
        letter-spacing:.01em!important;
        text-shadow:
          3px 0 0 #000,-3px 0 0 #000,0 3px 0 #000,0 -3px 0 #000,
          5px 5px 0 rgba(0,0,0,.75),0 0 12px rgba(255,255,255,.32)!important;
      }
      .message{
        width:min(88vw,380px)!important;
        margin:10px 0 0!important;
        padding:13px 14px 16px!important;
        border-left:0!important;
        background:rgba(1,7,15,.55)!important;
        border:1px solid rgba(255,223,120,.62)!important;
        box-shadow:0 8px 18px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.08)!important;
      }
      .message p{
        min-height:0!important;
        font-size:clamp(13px,3.45vw,16px)!important;
        line-height:1.62!important;
        letter-spacing:.035em!important;
      }

      .quest{
        width:min(54vw,245px)!important;
        justify-self:start!important;
        margin:0!important;
        padding:5px!important;
        animation:none!important;
        filter:drop-shadow(0 8px 10px rgba(0,0,0,.26));
      }
      .quest-inner{
        padding:12px 13px 13px!important;
        background:
          linear-gradient(rgba(18,54,105,.84),rgba(3,12,25,.92)),
          repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)!important;
      }
      .quest h2{margin:0 0 8px!important;font-size:clamp(17px,4.65vw,23px)!important;letter-spacing:.12em}
      .quest p{display:none!important}
      .quest ul{gap:7px!important}
      .quest li{
        gap:8px!important;
        font-size:clamp(11px,3.15vw,14px)!important;
        line-height:1.45!important;
        white-space:nowrap!important;
      }
      .ico{width:25px!important;height:25px!important;flex:0 0 25px!important}

      .hero-bottom{
        display:grid!important;
        grid-template-columns:minmax(145px,.88fr) minmax(165px,1.12fr)!important;
        gap:9px!important;
        align-items:start!important;
        margin-top:-2px!important;
      }
      .status{
        order:2!important;
        min-width:0!important;
        padding:10px 10px 9px!important;
        background:
          linear-gradient(rgba(12,39,78,.80),rgba(2,10,22,.91)),
          repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px)!important;
        box-shadow:0 0 0 2px rgba(215,176,74,.92),0 5px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.08)!important;
      }
      .status-head{font-size:clamp(15px,4vw,20px)!important;margin-bottom:6px!important;padding-bottom:5px!important}
      .status-row{font-size:clamp(11px,3.05vw,14px)!important;margin:3px 0!important;line-height:1.34!important}
      .starline{letter-spacing:.02em!important}
      .exp{font-size:clamp(10px,2.8vw,12px)!important;margin-top:5px!important}
      .bar{height:8px!important;margin-top:5px!important}

      .commands{
        order:3!important;
        grid-column:1 / -1!important;
        gap:9px!important;
        margin-top:2px!important;
      }
      .cmd{
        min-height:58px!important;
        padding:10px 15px!important;
        gap:12px!important;
        justify-content:flex-start!important;
        text-align:left!important;
        font-size:clamp(15px,4.15vw,21px)!important;
        line-height:1.2!important;
        white-space:nowrap!important;
        background:
          linear-gradient(180deg,rgba(24,78,158,.94),rgba(8,35,90,.92)),
          repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px)!important;
        box-shadow:0 0 0 2px rgba(215,176,74,.88),0 5px 0 rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.09)!important;
      }
      .cmd:first-child{
        min-height:62px!important;
        font-size:clamp(16px,4.45vw,23px)!important;
        background:linear-gradient(180deg,rgba(228,186,70,.96),rgba(139,93,9,.95))!important;
      }
      .cmd-icon{width:31px!important;height:31px!important;flex:0 0 31px!important;font-size:17px!important}
      .cmd:after{content:"›";margin-left:auto;color:#fff;font-size:24px;text-shadow:2px 2px 0 #000}
      .story{display:none!important}

      .info{
        grid-template-columns:1fr 1fr!important;
        gap:1px!important;
        margin-top:1px!important;
        background:rgba(1,7,15,.76)!important;
        box-shadow:0 0 0 2px rgba(215,176,74,.8),0 6px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.08)!important;
      }
      .info-item{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        min-height:48px!important;
        padding:7px 8px!important;
        gap:7px!important;
        border-right:0!important;
        border-bottom:1px solid rgba(255,255,255,.12)!important;
        text-align:left!important;
      }
      .info-icon{width:25px!important;height:25px!important;font-size:17px!important;flex:0 0 25px!important}
      .info-title{font-size:11px!important;line-height:1.25!important}
      .info-text{display:none!important}

      .grid4,.business-grid,.works,.recruit-list,.contact-box{grid-template-columns:1fr!important}
      .section{padding:58px 16px!important}
      .section-title{font-size:clamp(29px,9vw,43px)!important}
      .panel{padding:22px!important}
    }
    @media (max-width:430px){
      .hero{padding:8px 9px 12px!important;background-position:center center!important}
      .logo{width:76vw!important;padding:7px 9px!important}
      .logo img{max-height:54px!important}
      .menu-toggle{flex-basis:60px!important;min-width:60px!important;height:60px!important}
      .title{max-width:74vw!important;font-size:clamp(34px,10.25vw,48px)!important}
      .message{width:min(91vw,350px)!important}
      .hero-bottom{grid-template-columns:minmax(138px,.86fr) minmax(158px,1.14fr)!important}
      .quest{width:min(54vw,220px)!important}
      .quest li{font-size:clamp(10px,3vw,13px)!important}
      .cmd{min-height:54px!important;font-size:clamp(14px,4vw,19px)!important}
      .cmd:first-child{min-height:58px!important}
      .cmd-icon{width:29px!important;height:29px!important;flex-basis:29px!important}
    }
    @media (max-width:374px){
      .title{max-width:80vw!important;font-size:32px!important}
      .message,.quest{width:100%!important}
      .hero-bottom{grid-template-columns:1fr!important}
      .commands{grid-template-columns:1fr!important}
      .info{grid-template-columns:1fr!important}
    }

  

    /* ===== Catchcopy & splash one-line fix ===== */
    .splash-title{
      white-space:nowrap!important;
      word-break:keep-all!important;
      overflow-wrap:normal!important;
      letter-spacing:.03em!important;
    }
    @media (max-width:760px){
      .splash-card{
        width:min(360px,86vw)!important;
      }
      .splash-title{
        font-size:clamp(18px,5.9vw,28px)!important;
        white-space:nowrap!important;
        letter-spacing:.02em!important;
      }
    }

  

    /* ===== Final fix: splash title spacing + mobile splash background ===== */
    .splash-title{
      white-space:nowrap!important;
      word-break:keep-all!important;
      overflow-wrap:normal!important;
      letter-spacing:0!important;
    }
    @media (max-width:760px){
      .splash{
        background:#020712 url("http://hinokio.focus-creative.net/wp-content/uploads/2026/05/a720b18b-f3e9-4ae6-acd2-b82db6156d25.jpg") center center/cover no-repeat!important;
      }
      .splash-title{
        font-size:clamp(18px,5.8vw,28px)!important;
        letter-spacing:0!important;
      }
    }

  
    /* ===== v8 copy layout fix ===== */
    .title-kicker{
      display:block;
      margin:0 0 clamp(6px,.8vw,12px);
      color:var(--gold2);
      font-size:clamp(16px,1.55vw,26px);
      line-height:1;
      letter-spacing:.18em;
      text-shadow:3px 3px 0 #000,0 0 12px rgba(255,223,120,.32);
    }
    @media (max-width:760px){
      .title-kicker{
        margin:0 0 5px!important;
        font-size:clamp(12px,3.4vw,16px)!important;
        letter-spacing:.12em!important;
        max-width:82vw;
      }
      .label{
        white-space:nowrap!important;
        letter-spacing:.05em!important;
      }
    }

  
/* ===== FINAL OVERRIDE: mobile RPG bottom menu ===== */
.rpg-menu-open,.rpg-menu-panel,.rpg-menu-backdrop{display:none}
@media (max-width:760px){
  .menu-toggle{display:flex!important;position:relative!important;z-index:12002!important}
  .nav,.nav.open{display:none!important}
  .rpg-menu-open{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:12000;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:112px;height:46px;padding:0 14px;color:#fff;background:linear-gradient(180deg,rgba(9,28,22,.92),rgba(3,10,9,.94)),repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);border:1px solid #fff;border-radius:14px;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 18px rgba(123,191,79,.38),inset 0 0 16px rgba(123,191,79,.18);text-shadow:2px 2px 0 #000;font-size:14px;letter-spacing:.08em;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .rpg-menu-open:before{content:"▶";color:#f5d75d;animation:rpgCursorBlink .85s steps(2) infinite}
  .rpg-menu-backdrop{position:fixed;inset:0;z-index:11990;display:block;opacity:0;visibility:hidden;pointer-events:none;background:rgba(0,0,0,.34);transition:opacity .25s ease,visibility .25s ease}
  .rpg-menu-panel{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:12001;display:block;width:min(96vw,430px);color:#fff;background:radial-gradient(circle at 18% 10%,rgba(123,191,79,.18),transparent 26%),linear-gradient(180deg,rgba(8,24,19,.90),rgba(3,8,8,.94)),repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);border:1px solid #fff;border-radius:18px;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 -10px 34px rgba(0,0,0,.46),inset 0 0 22px rgba(123,191,79,.16),inset 0 0 0 1px rgba(255,255,255,.12);padding:12px 12px 13px;transform:translate(-50%,110%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s ease,opacity .25s ease,visibility .25s ease}
  body.rpg-menu-active .rpg-menu-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  body.rpg-menu-active .rpg-menu-panel{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}
  body.rpg-menu-active .rpg-menu-open{opacity:0;pointer-events:none}
  .rpg-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 9px;border-bottom:1px solid rgba(255,255,255,.34)}
  .rpg-menu-title{display:inline-flex;align-items:center;gap:8px;color:#f5d75d;font-size:13px;line-height:1;letter-spacing:.12em;text-shadow:2px 2px 0 #000,0 0 10px rgba(245,215,93,.38)}
  .rpg-menu-title:before{content:"◆";color:#7bbf4f;text-shadow:0 0 10px rgba(123,191,79,.8)}
  .rpg-menu-close{display:inline-grid;place-items:center;width:34px;height:30px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.72);border-radius:8px;font-size:18px;line-height:1;cursor:pointer;text-shadow:2px 2px 0 #000}
  .rpg-menu-pages{position:relative;min-height:306px}
  .rpg-menu-page{display:none;grid-template-columns:1fr 1fr;gap:8px;padding:11px 0 10px}
  .rpg-menu-page.is-active{display:grid}
  .rpg-menu-item{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 8px 8px 10px;color:#fff;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.20);border-radius:12px;text-shadow:2px 2px 0 #000;font-size:clamp(12px,3.4vw,14px);line-height:1.2;letter-spacing:.04em;overflow:hidden;-webkit-tap-highlight-color:transparent}
  .rpg-menu-item:before{content:"";flex:0 0 10px;width:10px;height:10px;border-radius:999px;background:#7bbf4f;box-shadow:0 0 8px rgba(123,191,79,.68),inset 0 0 0 2px rgba(255,255,255,.22)}
  .rpg-menu-item.is-current{color:#f5d75d;border-color:rgba(245,215,93,.72);background:linear-gradient(90deg,rgba(107,170,63,.18),rgba(245,215,93,.08)),rgba(255,255,255,.05);box-shadow:0 0 15px rgba(123,191,79,.34),inset 0 0 16px rgba(123,191,79,.18);animation:rpgItemGlow 1.7s ease-in-out infinite;padding-left:20px}
  .rpg-menu-item.is-current:after{content:"▶";position:absolute;left:4px;top:50%;transform:translateY(-50%);color:#f5d75d;font-size:10px;text-shadow:0 0 8px rgba(245,215,93,.8),2px 2px 0 #000;animation:rpgCursorBlink .85s steps(2) infinite}
  .rpg-menu-foot{position:relative;display:grid;grid-template-columns:30px 1fr 50px 30px;align-items:center;gap:7px;padding-top:9px;border-top:1px solid rgba(255,255,255,.34)}
  .rpg-page-btn{display:inline-grid;place-items:center;width:30px;height:30px;color:#fff;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.62);border-radius:8px;cursor:pointer;text-shadow:2px 2px 0 #000}
  .rpg-menu-desc{min-height:30px;display:flex;align-items:center;padding:6px 10px;color:#fff;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:11px;line-height:1.35;text-shadow:2px 2px 0 #000}
  .rpg-menu-count{justify-self:end;color:#f5d75d;font-size:12px;letter-spacing:.08em;text-shadow:2px 2px 0 #000,0 0 8px rgba(245,215,93,.36)}
  @keyframes rpgCursorBlink{50%{opacity:.25}}
  @keyframes rpgItemGlow{50%{box-shadow:0 0 22px rgba(123,191,79,.55),inset 0 0 20px rgba(123,191,79,.24)}}
}
@media (min-width:761px){.rpg-menu-open,.rpg-menu-panel,.rpg-menu-backdrop{display:none!important}}


/* ===== FINAL UPDATE: desktop splash left-bottom + 2column RPG battle menu + construction icons ===== */

/* PC / web splash loading card to left-bottom */
@media (min-width:761px){
  .splash{
    place-items:end start!important;
    padding:24px 24px clamp(42px,6vh,76px) clamp(34px,5vw,84px)!important;
  }
  .splash-card{
    width:min(430px,34vw)!important;
    padding:22px 24px 20px!important;
    text-align:left!important;
  }
  .splash-title{
    font-size:clamp(26px,3vw,44px)!important;
    white-space:nowrap!important;
    letter-spacing:.03em!important;
  }
  .splash-sub{
    font-size:clamp(13px,1.2vw,17px)!important;
    margin:12px 0!important;
  }
  .loadbar{
    height:14px!important;
  }
  .loadtext{
    font-size:13px!important;
  }
}

@media (max-width:760px){
  /* existing top hamburger works as menu opener, but the opened panel becomes battle-command style */
  .rpg-menu-panel{
    width:min(96vw,430px)!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    padding:10px!important;
    background:
      radial-gradient(circle at 16% 10%,rgba(123,191,79,.18),transparent 25%),
      linear-gradient(180deg,rgba(5,15,12,.90),rgba(2,7,7,.96)),
      repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px)!important;
    border:1px solid #fff!important;
    border-radius:16px!important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,.18),
      0 -12px 34px rgba(0,0,0,.50),
      inset 0 0 24px rgba(123,191,79,.16),
      inset 0 0 0 1px rgba(255,255,255,.12)!important;
  }

  .rpg-menu-pages{
    min-height:auto!important;
  }

  .rpg-menu-page{
    display:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:10px 0!important;
  }

  .rpg-menu-page.is-active{
    display:grid!important;
  }

  .rpg-menu-item{
    min-height:58px!important;
    padding:8px 8px!important;
    gap:7px!important;
    border-radius:12px!important;
    font-size:clamp(11px,3.25vw,14px)!important;
    white-space:normal!important;
  }

  .rpg-menu-item:before{
    display:none!important;
  }

  .rpg-menu-thumb{
    flex:0 0 32px;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 0 8px rgba(123,191,79,.35),inset 0 0 0 1px rgba(255,255,255,.10);
  }

  .rpg-menu-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(1.05) contrast(1.05);
  }

  .rpg-menu-label{
    display:block;
    min-width:0;
    line-height:1.22;
  }

  .rpg-menu-item.is-current{
    padding-left:18px!important;
  }

  .rpg-menu-item.is-current:after{
    left:5px!important;
  }

  .rpg-menu-foot{
    grid-template-columns:30px 1fr 50px 30px!important;
    gap:7px!important;
  }

  .rpg-menu-desc{
    font-size:10px!important;
  }
}

@media (max-width:374px){
  .rpg-menu-item{
    min-height:54px!important;
    font-size:11px!important;
  }
  .rpg-menu-thumb{
    flex-basis:28px;
    width:28px;
    height:28px;
  }
}


/* ===== FINAL UPDATE 2026-05-28: requested latest splash/menu tuning ===== */

/* Web/PC版：スプラッシュLOADINGを「真ん中より少し左」へ */
@media (min-width:761px){
  .splash{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0!important;
  }
  .splash-card{
    width:min(440px,34vw)!important;
    margin-left:clamp(260px,34vw,620px)!important;
    transform:translateX(-50%)!important;
    padding:22px 24px 20px!important;
    text-align:left!important;
  }
  .splash-title{
    font-size:clamp(26px,3vw,44px)!important;
    white-space:nowrap!important;
    letter-spacing:.03em!important;
  }
  .splash-sub{
    font-size:clamp(13px,1.2vw,17px)!important;
    margin:12px 0!important;
  }
  .loadbar{height:14px!important}
  .loadtext{font-size:13px!important}

  /* Web版にもスマホ右下と同じRPGメニューバーを表示 */
  .rpg-menu-open{
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    z-index:12000!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    min-width:118px!important;
    height:48px!important;
    padding:0 15px!important;
    color:#fff!important;
    background:
      linear-gradient(180deg,rgba(9,28,22,.92),rgba(3,10,9,.94)),
      repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px)!important;
    border:1px solid #fff!important;
    border-radius:14px!important;
    box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 18px rgba(123,191,79,.38),inset 0 0 16px rgba(123,191,79,.18)!important;
    text-shadow:2px 2px 0 #000!important;
    font-size:14px!important;
    letter-spacing:.08em!important;
    cursor:pointer!important;
  }
  .rpg-menu-open:before{
    content:"▶";
    color:#f5d75d;
    animation:rpgCursorBlink .85s steps(2) infinite;
  }

  .rpg-menu-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:11990!important;
    display:block!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    background:rgba(0,0,0,.34)!important;
    transition:opacity .25s ease,visibility .25s ease!important;
  }

  .rpg-menu-panel{
    position:fixed!important;
    right:24px!important;
    left:auto!important;
    bottom:84px!important;
    z-index:12001!important;
    display:block!important;
    width:min(430px,34vw)!important;
    min-width:380px!important;
    color:#fff!important;
    background:
      radial-gradient(circle at 18% 10%,rgba(123,191,79,.18),transparent 26%),
      linear-gradient(180deg,rgba(8,24,19,.90),rgba(3,8,8,.94)),
      repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px)!important;
    border:1px solid #fff!important;
    border-radius:18px!important;
    box-shadow:0 0 0 2px rgba(255,255,255,.18),0 -10px 34px rgba(0,0,0,.46),inset 0 0 22px rgba(123,191,79,.16),inset 0 0 0 1px rgba(255,255,255,.12)!important;
    padding:12px!important;
    transform:translateY(18px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .25s ease,opacity .25s ease,visibility .25s ease!important;
  }

  body.rpg-menu-active .rpg-menu-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.rpg-menu-active .rpg-menu-panel{
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.rpg-menu-active .rpg-menu-open{
    opacity:0!important;
    pointer-events:none!important;
  }
}

/* 共通：RPGメニュー見た目 */
.rpg-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 9px;border-bottom:1px solid rgba(255,255,255,.34)}
.rpg-menu-title{display:inline-flex;align-items:center;gap:8px;color:#f5d75d;font-size:13px;line-height:1;letter-spacing:.12em;text-shadow:2px 2px 0 #000,0 0 10px rgba(245,215,93,.38)}
.rpg-menu-title:before{content:"◆";color:#7bbf4f;text-shadow:0 0 10px rgba(123,191,79,.8)}
.rpg-menu-close{display:inline-grid;place-items:center;width:34px;height:30px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.72);border-radius:8px;font-size:18px;line-height:1;cursor:pointer;text-shadow:2px 2px 0 #000}
.rpg-menu-pages{position:relative;min-height:auto!important}
.rpg-menu-page{display:none!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px 0!important}
.rpg-menu-page.is-active{display:grid!important}
.rpg-menu-item{position:relative;display:flex!important;align-items:center!important;gap:8px!important;min-height:56px!important;padding:8px!important;color:#fff!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.20)!important;border-radius:12px!important;text-shadow:2px 2px 0 #000!important;font-size:clamp(12px,1.1vw,14px)!important;line-height:1.2!important;letter-spacing:.04em!important;overflow:hidden!important}
.rpg-menu-item:before{display:none!important}
.rpg-menu-thumb{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);box-shadow:0 0 8px rgba(123,191,79,.35),inset 0 0 0 1px rgba(255,255,255,.10)}
.rpg-menu-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.rpg-menu-label{display:block;min-width:0;line-height:1.22}
.rpg-menu-item.is-current{color:#f5d75d!important;border-color:rgba(245,215,93,.72)!important;background:linear-gradient(90deg,rgba(107,170,63,.18),rgba(245,215,93,.08)),rgba(255,255,255,.05)!important;box-shadow:0 0 15px rgba(123,191,79,.34),inset 0 0 16px rgba(123,191,79,.18)!important;animation:rpgItemGlow 1.7s ease-in-out infinite;padding-left:18px!important}
.rpg-menu-item.is-current:after{content:"▶";position:absolute;left:4px;top:50%;transform:translateY(-50%);color:#f5d75d;font-size:10px;text-shadow:0 0 8px rgba(245,215,93,.8),2px 2px 0 #000;animation:rpgCursorBlink .85s steps(2) infinite}
.rpg-menu-foot{display:grid!important;grid-template-columns:30px 1fr 50px 30px!important;align-items:center!important;gap:7px!important;padding-top:9px!important;border-top:1px solid rgba(255,255,255,.34)!important}
.rpg-page-btn{display:inline-grid;place-items:center;width:30px;height:30px;color:#fff;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.62);border-radius:8px;cursor:pointer;text-shadow:2px 2px 0 #000}
.rpg-menu-desc{min-height:30px;display:flex;align-items:center;padding:6px 10px;color:#fff;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:11px;line-height:1.35;text-shadow:2px 2px 0 #000}
.rpg-menu-count{justify-self:end;color:#f5d75d;font-size:12px;letter-spacing:.08em;text-shadow:2px 2px 0 #000,0 0 8px rgba(245,215,93,.36)}
@keyframes rpgCursorBlink{50%{opacity:.25}}
@keyframes rpgItemGlow{50%{box-shadow:0 0 22px rgba(123,191,79,.55),inset 0 0 20px rgba(123,191,79,.24)}}

/* スマホ版：スプラッシュローディングを少し小さく、真ん中よりやや上へ */
@media (max-width:760px){
  .splash{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }
  .splash-card{
    width:min(285px,72vw)!important;
    padding:14px 13px 13px!important;
    transform:translateY(-7vh) scale(.90)!important;
    transform-origin:center center!important;
    border-width:2px!important;
    box-shadow:0 0 0 2px var(--gold),0 0 0 4px #2b1d08,0 12px 34px rgba(0,0,0,.50),inset 0 0 0 1px rgba(255,255,255,.12)!important;
  }
  .splash-title{
    font-size:clamp(18px,5.4vw,26px)!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }
  .splash-sub{
    font-size:10px!important;
    line-height:1.45!important;
    margin:7px 0 8px!important;
  }
  .loadbar{
    height:9px!important;
    padding:1px!important;
    border-width:1px!important;
  }
  .loadtext{
    margin-top:6px!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:.06em!important;
  }

  .rpg-menu-open{
    display:inline-flex!important;
    right:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
  }
  .rpg-menu-panel{
    width:min(96vw,430px)!important;
    min-width:0!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    transform:translate(-50%,110%)!important;
  }
  body.rpg-menu-active .rpg-menu-panel{
    transform:translate(-50%,0)!important;
  }
  .rpg-menu-item{
    min-height:58px!important;
    font-size:clamp(11px,3.25vw,14px)!important;
  }
}

@media (max-width:430px){
  .splash-card{
    width:min(270px,70vw)!important;
    transform:translateY(-8vh) scale(.88)!important;
  }
}


/* ===== FINAL FIX 2026-05-28: splash lower + web RPG menu working + mobile splash slightly higher ===== */

/* Web版スプラッシュ：今の位置から下へ */
@media (min-width:761px){
  .splash{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0!important;
  }

  .splash-card{
    /* 真ん中より少し左のまま、少し下へ */
    margin-left:clamp(260px,34vw,620px)!important;
    transform:translate(-50%, 10vh)!important;
  }
}

/* Web版もスマホ版と同じ右下RPGメニューとして表示・動作 */
@media (min-width:761px){
  .rpg-menu-open{
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    z-index:12000!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    min-width:118px!important;
    height:48px!important;
    padding:0 15px!important;
    color:#fff!important;
    background:
      linear-gradient(180deg,rgba(9,28,22,.92),rgba(3,10,9,.94)),
      repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px)!important;
    border:1px solid #fff!important;
    border-radius:14px!important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,.18),
      0 0 18px rgba(123,191,79,.38),
      inset 0 0 16px rgba(123,191,79,.18)!important;
    text-shadow:2px 2px 0 #000!important;
    font-size:14px!important;
    letter-spacing:.08em!important;
    cursor:pointer!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .rpg-menu-open:before{
    content:"▶";
    color:#f5d75d;
    animation:rpgCursorBlink .85s steps(2) infinite;
  }

  .rpg-menu-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:11990!important;
    display:block!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    background:rgba(0,0,0,.34)!important;
    transition:opacity .25s ease,visibility .25s ease!important;
  }

  .rpg-menu-panel{
    position:fixed!important;
    right:24px!important;
    left:auto!important;
    bottom:84px!important;
    z-index:12001!important;
    display:block!important;
    width:min(430px,34vw)!important;
    min-width:380px!important;
    color:#fff!important;
    background:
      radial-gradient(circle at 18% 10%,rgba(123,191,79,.18),transparent 26%),
      linear-gradient(180deg,rgba(8,24,19,.90),rgba(3,8,8,.94)),
      repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px)!important;
    border:1px solid #fff!important;
    border-radius:18px!important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,.18),
      0 -10px 34px rgba(0,0,0,.46),
      inset 0 0 22px rgba(123,191,79,.16),
      inset 0 0 0 1px rgba(255,255,255,.12)!important;
    padding:12px!important;
    transform:translateY(20px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .25s ease,opacity .25s ease,visibility .25s ease!important;
  }

  body.rpg-menu-active .rpg-menu-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  body.rpg-menu-active .rpg-menu-panel{
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  body.rpg-menu-active .rpg-menu-open{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

/* RPGメニュー共通：2列UIを強制 */
.rpg-menu-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:2px 2px 9px!important;
  border-bottom:1px solid rgba(255,255,255,.34)!important;
}

.rpg-menu-title{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  color:#f5d75d!important;
  font-size:13px!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  text-shadow:2px 2px 0 #000,0 0 10px rgba(245,215,93,.38)!important;
}

.rpg-menu-title:before{
  content:"◆";
  color:#7bbf4f;
  text-shadow:0 0 10px rgba(123,191,79,.8);
}

.rpg-menu-close{
  display:inline-grid!important;
  place-items:center!important;
  width:34px!important;
  height:30px!important;
  color:#fff!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:8px!important;
  font-size:18px!important;
  line-height:1!important;
  cursor:pointer!important;
  text-shadow:2px 2px 0 #000!important;
}

.rpg-menu-pages{position:relative!important;min-height:auto!important}
.rpg-menu-page{display:none!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px 0!important}
.rpg-menu-page.is-active{display:grid!important}

.rpg-menu-item{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:56px!important;
  padding:8px!important;
  color:#fff!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:12px!important;
  text-shadow:2px 2px 0 #000!important;
  font-size:clamp(12px,1.1vw,14px)!important;
  line-height:1.2!important;
  letter-spacing:.04em!important;
  overflow:hidden!important;
}

.rpg-menu-item:before{display:none!important}

.rpg-menu-thumb{
  flex:0 0 32px!important;
  width:32px!important;
  height:32px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 0 8px rgba(123,191,79,.35),inset 0 0 0 1px rgba(255,255,255,.10)!important;
}

.rpg-menu-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  filter:saturate(1.05) contrast(1.05)!important;
}

.rpg-menu-label{
  display:block!important;
  min-width:0!important;
  line-height:1.22!important;
}

.rpg-menu-item.is-current{
  color:#f5d75d!important;
  border-color:rgba(245,215,93,.72)!important;
  background:linear-gradient(90deg,rgba(107,170,63,.18),rgba(245,215,93,.08)),rgba(255,255,255,.05)!important;
  box-shadow:0 0 15px rgba(123,191,79,.34),inset 0 0 16px rgba(123,191,79,.18)!important;
  animation:rpgItemGlow 1.7s ease-in-out infinite!important;
  padding-left:18px!important;
}

.rpg-menu-item.is-current:after{
  content:"▶";
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%);
  color:#f5d75d;
  font-size:10px;
  text-shadow:0 0 8px rgba(245,215,93,.8),2px 2px 0 #000;
  animation:rpgCursorBlink .85s steps(2) infinite;
}

.rpg-menu-foot{
  display:grid!important;
  grid-template-columns:30px 1fr 50px 30px!important;
  align-items:center!important;
  gap:7px!important;
  padding-top:9px!important;
  border-top:1px solid rgba(255,255,255,.34)!important;
}

.rpg-page-btn{
  display:inline-grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  color:#fff!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:8px!important;
  cursor:pointer!important;
  text-shadow:2px 2px 0 #000!important;
}

.rpg-menu-desc{
  min-height:30px!important;
  display:flex!important;
  align-items:center!important;
  padding:6px 10px!important;
  color:#fff!important;
  background:rgba(0,0,0,.20)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:10px!important;
  font-size:11px!important;
  line-height:1.35!important;
  text-shadow:2px 2px 0 #000!important;
}

.rpg-menu-count{
  justify-self:end!important;
  color:#f5d75d!important;
  font-size:12px!important;
  letter-spacing:.08em!important;
  text-shadow:2px 2px 0 #000,0 0 8px rgba(245,215,93,.36)!important;
}

@keyframes rpgCursorBlink{50%{opacity:.25}}
@keyframes rpgItemGlow{50%{box-shadow:0 0 22px rgba(123,191,79,.55),inset 0 0 20px rgba(123,191,79,.24)}}

/* スマホ版スプラッシュ：あとほんの少しだけ上へ */
@media (max-width:760px){
  .splash{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }

  .splash-card{
    width:min(285px,72vw)!important;
    padding:14px 13px 13px!important;
    transform:translateY(-9vh) scale(.90)!important;
    transform-origin:center center!important;
    border-width:2px!important;
  }

  .splash-title{
    font-size:clamp(18px,5.4vw,26px)!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }

  .splash-sub{
    font-size:10px!important;
    line-height:1.45!important;
    margin:7px 0 8px!important;
  }

  .loadbar{
    height:9px!important;
    padding:1px!important;
    border-width:1px!important;
  }

  .loadtext{
    margin-top:6px!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:.06em!important;
  }

  .rpg-menu-open{
    right:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
  }

  .rpg-menu-panel{
    width:min(96vw,430px)!important;
    min-width:0!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    transform:translate(-50%,110%)!important;
  }

  body.rpg-menu-active .rpg-menu-panel{
    transform:translate(-50%,0)!important;
  }

  .rpg-menu-item{
    min-height:58px!important;
    font-size:clamp(11px,3.25vw,14px)!important;
  }
}

@media (max-width:430px){
  .splash-card{
    transform:translateY(-10vh) scale(.88)!important;
  }
}


/* ===== FINAL TWEAK 2026-05-28: splash +1mm, reload top, mobile catchcopy one line ===== */

/* スプラッシュLOADING位置：現在位置から約1mmだけ下へ */
@media (min-width:761px){
  .splash-card{
    transform:translate(-50%, calc(10vh + 1mm))!important;
  }
}

@media (max-width:760px){
  .splash-card{
    transform:translateY(calc(-9vh + 1mm)) scale(.90)!important;
  }
}

@media (max-width:430px){
  .splash-card{
    transform:translateY(calc(-10vh + 1mm)) scale(.88)!important;
  }
}

/* スマホ版：「夢を形に変えていく」を一行で見せる */
@media (max-width:760px){
  .title,
  .copy .title,
  h1.title{
    white-space:nowrap!important;
    max-width:96vw!important;
    width:max-content!important;
    min-width:0!important;
    font-size:clamp(28px,8.2vw,42px)!important;
    line-height:1.08!important;
    letter-spacing:.01em!important;
  }

  .copy{
    overflow:visible!important;
  }

  .copy-kicker,
  .dream-kicker,
  .sub-copy,
  .title-kicker{
    white-space:nowrap!important;
  }
}

@media (max-width:430px){
  .title,
  .copy .title,
  h1.title{
    font-size:clamp(25px,7.5vw,36px)!important;
    max-width:98vw!important;
  }
}

@media (max-width:374px){
  .title,
  .copy .title,
  h1.title{
    font-size:24px!important;
    white-space:nowrap!important;
  }
}


/* ===== FINAL COMPLETE: desktop splash loading lower ===== */
@media (min-width:761px){
  .splash{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:flex-start!important;
    padding:0 0 clamp(42px,8vh,86px) 0!important;
  }

  .splash-card{
    margin-left:clamp(260px,34vw,620px)!important;
    transform:translateX(-50%)!important;
  }
}



/* ===== FINAL FIX 2026-05-28: mobile catchcopy shadow readability ===== */
/* スマホ版だけ：英語コピーとメインコピーの影を弱めて、背景に負けないように調整 */
@media (max-width:760px){
  .copy .title-kicker,
  .copy .title,
  h1.title{
    filter:none!important;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
  }

  .copy .title-kicker{
    color:#ffe9a6!important;
    display:inline-block!important;
    width:max-content!important;
    max-width:96vw!important;
    padding:3px 7px 4px!important;
    border-radius:6px!important;
    background:rgba(2,7,18,.20)!important;
    text-shadow:
      1px 1px 0 rgba(0,0,0,.72),
      0 0 6px rgba(2,7,18,.34)!important;
    letter-spacing:.10em!important;
  }

  .copy .title,
  h1.title{
    color:#fff!important;
    display:inline-block!important;
    padding:3px 7px 5px!important;
    border-radius:7px!important;
    background:rgba(2,7,18,.16)!important;
    text-shadow:
      1px 1px 0 rgba(0,0,0,.78),
      0 0 7px rgba(2,7,18,.35)!important;
    -webkit-text-stroke:0!important;
  }
}

@media (max-width:430px){
  .copy .title-kicker{
    padding:2px 6px 3px!important;
    text-shadow:
      1px 1px 0 rgba(0,0,0,.70),
      0 0 5px rgba(2,7,18,.30)!important;
  }

  .copy .title,
  h1.title{
    padding:3px 6px 4px!important;
    text-shadow:
      1px 1px 0 rgba(0,0,0,.76),
      0 0 6px rgba(2,7,18,.30)!important;
  }
}