@charset "utf-8";
:root{
  --ink:#0a1520; --text:#16202a; --muted:#56626d; --line:#e2e7eb;
  --sea:#27c3d3; --sea-l:#8fe6ee; --sea-d:#0c7a8a; --blue:#1c8fd0; --sand:#f6f3ec;
  --hdr:76px; --wrap:1240px; --pad:32px;
  --en:"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable; }
body{ margin:0; font-family:'BIZ UDPGothic',sans-serif; color:var(--text); background:#fff; line-height:1.8; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; border:0; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; text-decoration:none; border-bottom:none; }
a:hover, a:focus-visible{ color:var(--sea-d); }
:focus-visible{ outline:2px solid var(--sea); outline-offset:3px; }
a[target="_blank"]:not(:has(img)):not(.noext)::after{
  content:""; display:inline-block; width:.72em; height:.72em; margin-left:.3em; vertical-align:-.06em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h7v2H7v10h10v-5h2v7H5z'/%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h7v2H7v10h10v-5h2v7H5z'/%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.en{ font-family:var(--en); }
.reg{ font-size:.5em; vertical-align:super; line-height:0; margin-left:.08em; font-weight:400; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.sp{ display:none; }

.kh{ position:fixed; top:0; left:0; right:0; z-index:100; height:var(--hdr); color:#fff;
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease), height .4s var(--ease); }
.kh::before{ content:""; position:absolute; left:0; right:0; top:0; height:100%; background:linear-gradient(180deg,rgba(6,40,78,.85) 0%,rgba(6,40,78,0) 100%); pointer-events:none; transition:opacity .4s; }
.kh.is-solid{ color:var(--text); background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px);
  box-shadow:0 1px 0 rgba(10,21,32,.08), 0 10px 30px -18px rgba(10,21,32,.35); }
.kh.is-solid::before{ opacity:0; }
.kh-in{ position:relative; max-width:var(--wrap); height:100%; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.kh-logo{ position:relative; z-index:2; margin:0; line-height:0; }
.kh-logo a{ display:block; padding:10.5px 27.3px; border-radius:999px; background:#fff; transform:translate(0,2.8px) scale(.8); transform-origin:0 0; box-shadow:0 8px 24px -12px rgba(0,0,0,.5); transition:background-color .4s var(--ease), box-shadow .4s var(--ease); }
.kh-logo img{ height:32px; width:auto; transform:scale(.9); transition:height .4s var(--ease); }
.kh.is-solid .kh-logo a{ background:transparent; box-shadow:none; }
.kh-nav ul{ display:flex; align-items:center; gap:38px; list-style:none; margin:0; padding:0; }
.kh-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; color:inherit; transition:color .25s, background-color .25s, border-color .25s; }
.kh-nav .en{ font-size:10.5px; letter-spacing:.24em; opacity:.72; padding-left:.24em; }
.kh-nav .ja{ font-size:14px; font-weight:700; letter-spacing:.06em; }
.kh-nav a:hover, .kh-nav a:focus-visible{ color:var(--sea-l); }
.kh.is-solid .kh-nav a:hover, .kh.is-solid .kh-nav a:focus-visible{ color:var(--sea-d); }
.kh-nav .cta a{ flex-direction:row; padding:11px 22px; border-radius:999px; border:1px solid rgba(255,255,255,.6); font-size:13px; font-weight:700; letter-spacing:.08em; }
.kh-nav .cta a:hover, .kh-nav .cta a:focus-visible{ color:var(--ink); background:#fff; border-color:#fff; }
.kh.is-solid .kh-nav .cta a{ color:#fff; background:var(--ink); border-color:var(--ink); }
.kh.is-solid .kh-nav .cta a:hover, .kh.is-solid .kh-nav .cta a:focus-visible{ color:#fff; background:var(--sea-d); border-color:var(--sea-d); }
.kh-burger{ display:none; position:relative; z-index:2; width:44px; height:44px; margin-right:-10px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
.kh-burger span{ position:absolute; left:11px; width:22px; height:2px; border-radius:2px; background:currentColor; transition:transform .35s var(--ease), opacity .25s; }
.kh-burger span:nth-child(1){ top:15px; }
.kh-burger span:nth-child(2){ top:21px; }
.kh-burger span:nth-child(3){ top:27px; }
.kh.is-open .kh-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.kh.is-open .kh-burger span:nth-child(2){ opacity:0; }
.kh.is-open .kh-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.hero{ position:relative; min-height:calc(100vh - 78px); min-height:calc(100svh - 78px); display:flex; align-items:center; overflow:hidden; color:#fff; background:var(--ink); isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; opacity:0; transition:opacity 2s ease-in-out; }
.hero-bg img.on{ opacity:1; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(270deg, rgba(6,14,22,.64) 0%, rgba(6,14,22,.44) 34%, rgba(6,14,22,.18) 62%, rgba(6,14,22,.05) 82%, rgba(6,14,22,.10) 100%),
    linear-gradient(180deg, rgba(6,14,22,.22) 0%, rgba(6,14,22,0) 22%, rgba(6,14,22,0) 62%, rgba(6,14,22,.55) 100%); }
.hero-in{ position:relative; width:100%; max-width:var(--wrap); margin:0 auto; padding:calc(var(--hdr) + 28px) 32px 86px; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; }
.hero-copy{ display:flex; flex-direction:column; align-items:flex-end; }
.hero-g1, .hero-g2{ max-width:100%; }
.eyebrow{ display:flex; align-items:center; gap:16px; margin-bottom:28px; font-size:12px; letter-spacing:.3em; color:var(--sea-l); text-shadow:0 1px 8px rgba(0,0,0,.55); }
.hero h1{ font-size:clamp(30px, calc((min(100vw, 1240px) - 240px) / 20.5), 50px); line-height:1.45; font-weight:700; letter-spacing:.02em; text-shadow:0 2px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35); }
.biz{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:8px 18px 8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.45); background:rgba(6,14,22,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:15px; font-weight:700; letter-spacing:.12em; color:#fff; }
.biz::before{ content:""; flex:0 0 7px; height:7px; border-radius:50%; background:var(--sea); box-shadow:0 0 0 4px rgba(39,195,211,.25); }
.hero .lead{ margin-top:24px; font-size:clamp(14px,1.2vw,16px); line-height:2.15; color:rgba(236,244,248,.95); text-shadow:0 1px 14px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.45); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:44px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:14px; height:54px; padding:0 30px; border-radius:999px; font-size:14px; font-weight:700; letter-spacing:.1em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s, color .3s, border-color .3s; }
.btn-primary{ color:#fff; background:linear-gradient(120deg,#2fd3df 0%,#1c8fd0 100%); box-shadow:0 14px 34px -10px rgba(28,160,210,.65); }
.btn-primary:hover, .btn-primary:focus-visible{ color:#fff; transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(28,160,210,.85); }
.btn-arr{ position:relative; width:12px; height:16px; }
.btn-arr::before{ content:""; position:absolute; left:5.25px; top:0; width:1.5px; height:14px; background:currentColor; }
.btn-arr::after{ content:""; position:absolute; left:2px; top:6px; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.btn-ghost{ color:#fff; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.btn-ghost:hover, .btn-ghost:focus-visible{ color:var(--ink); background:#fff; border-color:#fff; }

.mk{ position:relative; text-align:center; --pw:clamp(180px, 20vw, 256px); }
.mk-link{ display:block; color:var(--text); }
.mk-link:hover, .mk-link:focus-visible{ color:var(--sea-d); }
.mk-body{ position:relative; display:block; width:var(--pw); padding:11px; border-radius:calc(var(--pw) * .16);
  box-shadow:0 34px 60px -28px rgba(10,21,32,.62), inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 1.5px rgba(0,0,0,.45);
  animation:float 7s ease-in-out infinite; }
.mk-body.c1{ background:#7a5030; }
.mk-body.c2{ background:linear-gradient(155deg,#5b7ba6 0%,#2c4468 36%,#1d3050 66%,#607da8 100%); }
.mk-body.c4{ background:linear-gradient(155deg,#8f3d4f 0%,#5f1f2f 36%,#40111e 66%,#83374a 100%); }
.mk-body::before{ content:""; position:absolute; top:4px; left:50%; width:40px; height:3px; margin-left:-20px; border-radius:3px; background:rgba(255,255,255,.22); }
.mk-screen{ position:relative; display:block; aspect-ratio:384 / 684; border-radius:calc(var(--pw) * .115); overflow:hidden; background:#000; }
.mk-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; }
.mk-screen img.on{ opacity:1; }
.mk-screen::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 34%); pointer-events:none; }
.mk-play{ position:absolute; z-index:2; left:50%; top:50%; width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:50%; background:rgba(6,14,22,.42); border:2px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:transform .3s var(--ease), background-color .3s; }
.mk-play::after{ content:""; position:absolute; left:24px; top:19.5px; border-style:solid; border-width:11.5px 0 11.5px 18px; border-color:transparent transparent transparent #fff; }
.mk-link:hover .mk-play, .mk-link:focus-visible .mk-play{ transform:scale(1.1); background:rgba(39,195,211,.6); }
.mk-cap{ display:block; margin-top:16px; }
.mk-cap .t{ display:block; font-size:13px; letter-spacing:.06em; }
.mk-cap .no{ display:block; margin-top:2px; font-size:24px; font-weight:700; letter-spacing:.08em; }
.mk-ctrl{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
.mk-dots{ display:flex; gap:6px; }
.mk-dots i{ display:block; width:6px; height:6px; border-radius:3px; background:rgba(10,21,32,.2); transition:width .4s var(--ease), background-color .4s; }
.mk-dots i.on{ width:20px; background:var(--sea-d); }
.mk-pause{ position:relative; flex:0 0 auto; width:30px; height:30px; padding:0; border-radius:50%; border:1px solid rgba(10,21,32,.28); background:transparent; color:var(--text); cursor:pointer; transition:background-color .25s, border-color .25s; }
.mk-pause:hover{ background:rgba(10,21,32,.06); border-color:var(--text); }
.mk-pause::before, .mk-pause::after{ content:""; position:absolute; top:9px; width:3px; height:10px; border-radius:1px; background:currentColor; }
.mk-pause::before{ left:9.5px; }
.mk-pause::after{ left:15.5px; }
.mk-pause[aria-pressed="true"]::before{ left:11px; top:8px; width:0; height:0; border-radius:0; background:none; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; }
.mk-pause[aria-pressed="true"]::after{ display:none; }

.scroll{ position:absolute; z-index:1; left:50%; bottom:calc(var(--wvh) + 4px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px; padding-left:.34em; font-size:10px; letter-spacing:.34em; color:rgba(255,255,255,.8); }
.scroll::after{ content:""; width:1px; height:58px; background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,0)); transform-origin:top; animation:drip 2.4s var(--ease) infinite; }
.scroll:hover, .scroll:focus-visible{ color:#fff; }
.credit{ position:absolute; z-index:1; right:32px; bottom:calc(var(--wvh) + 6px); margin:0; font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.62); text-shadow:0 1px 6px rgba(0,0,0,.5); }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes drip{ 0%{ transform:scaleY(0); opacity:1; } 55%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

.sec{ position:relative; padding:72px 0; }
.sec, .newsbar{ scroll-margin-top:calc(var(--hdr) - 8px); }
.sec-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 26px; margin-bottom:32px; }
.sec-en{ font-family:var(--en); font-weight:700; font-size:clamp(34px,4.2vw,58px); line-height:1; letter-spacing:.02em;
  background:linear-gradient(100deg,var(--ink) 0%,#16506a 55%,var(--sea) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec-head h2{ display:flex; align-items:center; gap:14px; margin-top:0; font-size:15px; font-weight:700; letter-spacing:.16em; color:#3f4b56; }
.sec-head h2::before{ content:""; flex:0 0 34px; height:2px; background:linear-gradient(90deg,var(--sea),var(--blue)); }

.apps{ background:var(--sand); overflow:hidden; }
.apps::before{ content:""; position:absolute; right:-12%; top:-18%; width:62%; height:80%; background:radial-gradient(closest-side, rgba(39,195,211,.16), rgba(39,195,211,0)); pointer-events:none; }
.apps-grid{ position:relative; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:24px; }
.app-mk{ grid-column:1 / -1; }
.app-mk .app-body{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"hdr mk" "info mk" "shots shots"; gap:26px 52px; align-items:start; }
.mk-hdr{ grid-area:hdr; margin:0; border-radius:16px; overflow:hidden; background:#0b0f14; box-shadow:0 16px 32px -20px rgba(10,21,32,.55), 0 0 0 1px rgba(10,21,32,.06); }
.mk-hdr img{ width:100%; height:auto; aspect-ratio:1024 / 500; object-fit:cover; }
.mk-info{ grid-area:info; display:flex; flex-direction:column; min-width:0; }
.app-mk .mk{ grid-area:mk; align-self:center; justify-self:center; padding-right:4px; }
.mk-shots{ grid-area:shots; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:12px; }
.app-media{ padding:26px 26px 0; }
.app-media + .app-body{ padding-top:22px; }
.mj-hdr{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1024 / 500; background:#1f4b37; box-shadow:0 16px 32px -20px rgba(10,21,32,.5), 0 0 0 1px rgba(10,21,32,.06); }
.mj-hdr img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.apps-side{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.app-soon{ flex:1; }
.app-soon:hover{ transform:none; box-shadow:0 1px 2px rgba(10,21,32,.05), 0 18px 40px -22px rgba(10,21,32,.28); }
.app-soon .app-body{ gap:16px; }
.app-soon .app-head{ margin-bottom:0; }
.sk-media{ display:flex; flex:1; align-items:center; justify-content:center; min-height:120px; border-radius:16px; background:linear-gradient(135deg,#eef2f4 0%,#e2e8ec 100%); }
.sk{ display:block; border-radius:6px; background:#e7ecef; }
.sk-icon{ flex:0 0 auto; width:56px; height:56px; border-radius:14px; }
.sk-title{ display:flex; flex:1; flex-direction:column; gap:10px; min-width:0; }
.sk-tag{ width:46%; height:8px; }
.sk-ttl{ width:78%; height:16px; }
.sk-lines{ display:flex; flex-direction:column; gap:12px; }
.sk-lines .sk{ height:10px; }
.sk-lines .sk:last-child{ width:62%; }
.soon{ font-size:15px; font-weight:700; letter-spacing:.14em; color:#7c8893; }
.mk-ss{ border-radius:12px; overflow:hidden; background:#000; box-shadow:0 10px 22px -12px rgba(10,21,32,.5), 0 0 0 1px rgba(10,21,32,.06); }
.mk-ss img{ width:100%; height:auto; aspect-ratio:9 / 16; object-fit:cover; }
.newsbar{ position:relative; background:#fff; border-bottom:1px solid var(--line); }
.nb-in{ display:flex; align-items:center; gap:22px; min-height:78px; }
.nb-label{ flex:0 0 auto; padding-right:22px; border-right:1px solid var(--line); font-size:12px; font-weight:700; letter-spacing:.26em; color:var(--sea-d); }
.nb-item{ display:flex; flex:1; align-items:center; gap:16px; min-width:0; color:var(--text); }
.nb-ttl{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; transition:color .3s; }
.nb-item:hover .nb-ttl, .nb-item:focus-visible .nb-ttl{ color:var(--sea-d); }
.nb-more{ flex:0 0 auto; display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700; letter-spacing:.08em; }
.nb-more .circ{ width:38px; height:38px; }
.works{ background:#fff; padding-top:52px; }
.works-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.works-grid li{ padding:26px 24px 24px; border-left:1px solid var(--line); }
.works-grid li:first-child{ border-left:0; padding-left:0; }
.w-num{ font-size:15px; font-weight:700; line-height:1.2; letter-spacing:.04em; color:#16202a; }
.w-num .en{ margin-right:6px; font-size:clamp(40px,4.4vw,60px); font-weight:700; letter-spacing:-.01em; background:linear-gradient(100deg,var(--ink) 0%,#16506a 60%,var(--sea) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.w-cap{ margin-top:14px; font-size:13.5px; line-height:1.85; color:#4c5863; }
.works-partners{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 28px; align-items:baseline; margin-top:26px; }
.wp-label{ font-size:13px; font-weight:700; letter-spacing:.12em; color:#3f4b56; }
.wp-list{ font-size:13.5px; line-height:2; color:#4c5863; }
.wp-note{ margin-left:10px; font-size:12px; color:#66717c; }
.works .more{ margin-top:22px; }
.ill .i-s{ fill:none; stroke:#16506a; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ill .i-sw{ fill:#fff; stroke:#16506a; stroke-width:2.4; stroke-linejoin:round; }
.ill .i-s2{ fill:none; stroke:#27c3d3; stroke-width:2.2; stroke-linecap:round; }
.ill .i-sa{ fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ill .i-sy{ fill:none; stroke:#f5b82e; stroke-width:2.2; stroke-linecap:round; }
.ill .i-ray{ fill:none; stroke:#f5b82e; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:2 3.4; }
.ill .i-d{ fill:#16506a; } .ill .i-a{ fill:#27c3d3; } .ill .i-b{ fill:#1c8fd0; } .ill .i-r{ fill:#e0483e; } .ill .i-y{ fill:#f5c542; }
.ill .i-l{ fill:#e4f6f8; } .ill .i-l2{ fill:#dff5f7; } .ill .i-l3{ fill:#8fe6ee; } .ill .i-k{ fill:#d5dde3; }
.ill .i-sh{ fill:#16506a; opacity:.2; }
.w-ill .i-bg{ fill:#e4f6f8; }
.works-grid li:nth-child(2) .i-bg{ fill:#fdeae8; }
.works-grid li:nth-child(3) .i-bg{ fill:#e3f3e8; }
.works-grid li:nth-child(4) .i-bg{ fill:#e6effa; }
.ill .i-pb{ fill:#fff; stroke:#1c8fd0; stroke-width:1.8; } .ill .i-pr{ fill:#fff; stroke:#e0483e; stroke-width:1.8; }
.ill .i-sf{ fill:#dfe7ec; stroke:#16506a; stroke-width:2.4; stroke-linejoin:round; }
.ill .i-scr{ fill:#0f2a36; } .ill .i-px{ fill:#8fe6ee; } .ill .i-spx{ fill:none; stroke:#8fe6ee; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ill .i-pz{ fill:#27c3d3; stroke:#8fe6ee; stroke-width:1.4; }
.ill .i-chip{ fill:#16506a; } .ill .i-pin{ fill:#a4b0ba; } .ill .i-die{ fill:none; stroke:#16506a; stroke-width:1; opacity:.45; }
.ill .tw{ animation:tw 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.ill .tw2{ animation:tw 2.6s ease-in-out 1.3s infinite; transform-box:fill-box; transform-origin:center; }
.ill .bob{ animation:bob 2.4s ease-in-out infinite; }
.ill .spin{ animation:spin 16s linear infinite; transform-box:fill-box; transform-origin:center; }
.ill .cur{ animation:blink 1.1s steps(1) infinite; }
@keyframes tw{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1); } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2.5px); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes blink{ 50%{ opacity:0; } }
.w-ill{ display:block; width:84px; height:84px; margin:0 0 14px -6px; transition:transform .5s var(--ease); }
.js .works-grid.in .w-ill{ animation:pop .9s var(--ease) .25s backwards; }
.js .works-grid.in li:nth-child(2) .w-ill{ animation-delay:.37s; }
.js .works-grid.in li:nth-child(3) .w-ill{ animation-delay:.49s; }
.js .works-grid.in li:nth-child(4) .w-ill{ animation-delay:.61s; }
@keyframes pop{ 0%{ opacity:0; transform:scale(.55) rotate(-12deg); } 60%{ opacity:1; transform:scale(1.08) rotate(3deg); } 100%{ opacity:1; transform:none; } }
.works-grid li:hover .w-ill{ transform:translateY(-4px) rotate(-4deg); }

.app{ position:relative; display:flex; flex-direction:column; background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 1px 2px rgba(10,21,32,.05), 0 18px 40px -22px rgba(10,21,32,.28); transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.app:hover{ transform:translateY(-8px); box-shadow:0 2px 4px rgba(10,21,32,.05), 0 34px 60px -26px rgba(10,21,32,.42); }
.app-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:14px 18px; margin-bottom:16px; }
.app-head .app-store{ margin-left:auto; margin-top:0; padding-top:0; }
.app-title{ min-width:0; }
.app-icon{ flex:0 0 auto; width:76px; height:76px; border-radius:18px; box-shadow:0 12px 24px -12px rgba(10,21,32,.5), 0 0 0 1px rgba(10,21,32,.06); transition:transform .5s var(--ease); }
.app:hover .app-icon{ transform:translateY(-3px) scale(1.05); }
.app-body{ display:flex; flex:1; flex-direction:column; padding:26px 26px 24px; }
.app-tag{ margin-bottom:10px; font-size:11px; font-weight:700; letter-spacing:.26em; color:var(--sea-d); }
.app h3{ margin:0; font-size:20px; line-height:1.5; font-weight:700; color:#0f1822; }
.app h3 .sub{ display:inline-block; margin-top:2px; font-size:15px; color:var(--muted); }
.app-text{ font-size:14px; line-height:2; color:#4c5863; }
.app-note{ margin-top:8px; font-size:12px; color:#66717c; }
.app-store{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:auto; padding-top:24px; }
.app-store a{ display:block; transition:transform .25s var(--ease), opacity .25s; }
.app-store a:hover, .app-store a:focus-visible{ transform:translateY(-2px); opacity:.85; }
.app-store img{ height:42px; width:auto; }
.app-store img[src*="appstore"]{ height:32px; }

.badge{ display:inline-block; padding:4px 11px 3px; border-radius:999px; background:#c00000; color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.12em; line-height:1.4; }
.news-date{ font-family:var(--en); font-size:14px; letter-spacing:.08em; color:#5c6873; font-variant-numeric:tabular-nums; }
.more{ grid-column:1; grid-row:2; display:inline-flex; align-items:center; gap:16px; margin-top:40px; justify-self:start; font-size:14px; font-weight:700; letter-spacing:.1em; }
.circ{ position:relative; flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:1px solid #cdd5dc; color:var(--text); transition:background-color .3s, border-color .3s, color .3s, transform .3s var(--ease); }
.circ::before{ content:""; position:absolute; left:50%; top:50%; width:16px; height:1.5px; margin:-.75px 0 0 -9px; background:currentColor; }
.circ::after{ content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-4px 0 0 -1px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); }
.more:hover .circ, .more:focus-visible .circ, .nb-more:hover .circ, .nb-more:focus-visible .circ{ color:#fff; background:var(--ink); border-color:var(--ink); }
.more:hover .circ, .more:focus-visible .circ{ transform:translateX(4px); }

.group{ background:#fff; }
.grp-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; align-items:stretch; }
.grp-tech{ position:relative; overflow:hidden; padding:40px 44px 36px; border-radius:24px; color:#e7eef3; background:linear-gradient(135deg,#123047 0%,#0a1520 62%,#08111a 100%); box-shadow:0 18px 40px -22px rgba(10,21,32,.45); }
.grp-tech::before, .grp-tech::after{ content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08); pointer-events:none; }
.grp-tech::before{ right:-90px; top:-90px; width:340px; height:340px; }
.grp-tech::after{ right:-24px; top:-24px; width:200px; height:200px; }
.grp-label{ font-size:10.5px; font-weight:700; letter-spacing:.26em; color:var(--sea-d); }
.grp-tech .grp-label{ color:var(--sea-l); }
.grp-logo{ position:absolute; z-index:1; top:40px; right:44px; width:76px; height:76px; border-radius:18px; background:#fff; box-shadow:0 12px 24px -12px rgba(0,0,0,.65); }
.grp-tech .grp-label, .grp-tech .grp-name, .grp-tech .grp-desc{ padding-right:96px; }
.grp-name{ margin:8px 0 0; font-size:16px; font-weight:700; letter-spacing:.06em; color:#0f1822; }
.grp-tech .grp-name{ color:#fff; }
.grp-desc{ margin-top:8px; font-size:14px; line-height:1.8; color:#4c5863; }
.grp-tech .grp-desc{ position:relative; color:#9fb2c0; font-size:13px; }
.grp-head{ position:relative; margin-top:22px; font-size:clamp(22px,2.4vw,32px); line-height:1.5; font-weight:700; color:#fff; }
.grp-sub{ position:relative; margin-top:10px; font-size:14px; line-height:1.9; color:#b9c6d0; }
.grp-text{ position:relative; max-width:680px; margin-top:14px; font-size:14px; line-height:2; color:#cdd7de; }
.grp-link{ position:relative; display:inline-flex; align-items:center; margin-top:28px; padding:12px 26px; border-radius:999px; border:1px solid rgba(255,255,255,.5); color:#fff; font-size:14px; font-weight:700; letter-spacing:.08em; transition:background-color .3s, color .3s, border-color .3s; }
.grp-link:hover, .grp-link:focus-visible{ color:var(--ink); background:#fff; border-color:#fff; }
.grp-others{ display:grid; grid-template-rows:1fr 1fr; gap:24px; }
.grp-co{ display:flex; flex-direction:column; justify-content:center; padding:32px; border-radius:24px; background:linear-gradient(135deg,#164470 0%,#0f2e4e 100%); box-shadow:0 18px 40px -22px rgba(10,21,32,.45); }
.grp-co .grp-label{ color:var(--sea-l); }
.grp-co .grp-name{ font-size:17px; color:#fff; }
.grp-co .grp-desc{ color:#c3d5e3; }
.grp-note{ margin-top:14px; font-size:13px; color:#6a7580; text-align:right; }
.rep{ background:var(--sand); }
.rep-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:44px; align-items:start; }
.rep-ja{ font-size:clamp(28px,3vw,38px); font-weight:700; letter-spacing:.12em; color:#0f1822; line-height:1.3; }
.rep-en{ margin-top:10px; font-size:12px; letter-spacing:.3em; color:var(--sea-d); }
.rep-role{ margin-top:22px; padding-top:20px; border-top:1px solid #e0d9cb; font-size:13px; line-height:2; color:#4c5863; }
.rep-quote{ position:relative; margin:0 0 20px; padding-left:22px; font-size:clamp(16px,1.5vw,19px); line-height:1.9; font-weight:700; color:#16202a; }
.rep-quote::before{ content:""; position:absolute; left:0; top:.35em; bottom:.35em; width:3px; border-radius:2px; background:linear-gradient(var(--sea),var(--blue)); }
.rep-quote-sub{ display:block; margin-top:12px; font-size:13.5px; font-weight:400; line-height:1.95; color:#56626d; }
.rep-text{ margin-top:8px; font-size:14px; line-height:2.05; color:#4c5863; }
.rep .more{ margin-top:20px; }
.rep-pc{ display:block; width:min(100%, 290px); height:auto; margin-top:30px; }
.rep-gen{ position:relative; display:flex; justify-content:space-between; gap:10px; max-width:500px; margin:4px 0 26px; padding:0 0 0 22px; list-style:none; }
.rep-gen::before{ content:""; position:absolute; left:40px; right:18px; top:28px; height:2px; border-radius:1px; background:linear-gradient(90deg, rgba(39,195,211,.35), rgba(28,143,208,.75)); }
.rep-gen li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; }
.rep-gen svg{ display:block; width:56px; height:56px; background:var(--sand); transition:transform .4s var(--ease); }
.rep-gen li:hover svg{ transform:translateY(-3px); }
.rep-gen .en{ font-size:10.5px; font-weight:700; letter-spacing:.16em; color:var(--sea-d); }

.kf{ position:relative; overflow:hidden; padding:64px 0 28px; background:#2f3337; color:#cfd4d8; }
.kf-in{ position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto; gap:56px; align-items:start; }
.kf-brand a{ display:inline-block; padding:10.5px 27.3px; border-radius:999px; background:#fff; }
.kf-brand img{ width:auto; height:32px; transform:scale(.9); }
.kf-brand .en{ margin-top:20px; font-size:11px; letter-spacing:.3em; color:#a3abb2; }
.kf-co{ margin-top:20px; font-size:14px; font-weight:700; letter-spacing:.06em; color:#e2e8ee; }
.kf-addr{ margin-top:8px; font-size:12px; line-height:1.9; color:#a3abb2; }
.kf-nav{ display:grid; grid-template-columns:repeat(3,max-content); gap:18px 44px; padding-top:6px; }
.kf-nav a{ font-size:14px; color:#e2e8ee; transition:color .25s; }
.kf-nav a:hover, .kf-nav a:focus-visible{ color:var(--sea-l); }
.kf-sns{ display:flex; gap:12px; }
.kf-sns a{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2); transition:background-color .3s, border-color .3s, transform .3s var(--ease); }
.kf-sns a:hover, .kf-sns a:focus-visible{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); transform:translateY(-3px); }
.kf-sns img{ width:auto; height:18px; }
.kf-sns img.w{ filter:brightness(0) invert(1); }
.kf-bottom{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:44px; padding-top:22px; }
.kf-bottom::before{ content:""; position:absolute; top:0; left:var(--pad); right:var(--pad); height:1px; background:rgba(255,255,255,.1); }
.kf-copy{ font-size:12px; letter-spacing:.16em; color:#a3abb2; }
.totop{ display:inline-flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.28em; color:#c7d1d9; }
.totop:hover, .totop:focus-visible{ color:#fff; }
.totop .circ{ width:38px; height:38px; border-color:rgba(255,255,255,.25); color:#fff; transform:rotate(-90deg); }
.totop:hover .circ, .totop:focus-visible .circ{ background:#fff; border-color:#fff; color:#2f3337; }

::selection{ background:rgba(39,195,211,.3); }
.kprog{ position:fixed; top:0; left:0; right:0; z-index:101; height:3px; background:linear-gradient(90deg,#2fd3df,#1c8fd0); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; }
.hero{ --wvh:clamp(34px, 5.2vw, 72px); }
.waves{ position:absolute; left:0; right:0; bottom:-1px; z-index:0; height:var(--wvh); overflow:hidden; pointer-events:none; }
.wv{ position:absolute; left:0; bottom:0; width:200%; background-repeat:repeat-x; background-position:0 100%; background-size:50% 100%; animation:wv 26s linear infinite; }
.wv1{ height:100%; opacity:.26; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 45Q180 15 360 45T720 45T1080 45T1440 45V100H0Z'/%3E%3C/svg%3E"); animation-duration:28s; }
.wv2{ height:84%; opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 60Q180 90 360 60T720 60T1080 60T1440 60V100H0Z'/%3E%3C/svg%3E"); animation-duration:19s; animation-direction:reverse; }
.wv3{ height:60%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 70Q120 50 240 70T480 70T720 70T960 70T1200 70T1440 70V100H0Z'/%3E%3C/svg%3E"); animation-duration:34s; }
@keyframes wv{ to{ transform:translateX(-50%); } }
.btn-primary .btn-arr{ animation:nudge 1.9s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(-1px); } 50%{ transform:translateY(3px); } }
.sec-en.split, .ph-en.split{ background:none; }
.sec-en .ch{ display:inline-block; background-image:linear-gradient(100deg,var(--ink) 0%,#16506a 55%,var(--sea) 100%); background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; }
.js .sec-head.in .ch{ animation:chpop .8s var(--ease) calc(var(--i) * 55ms + .1s) both; }
@keyframes chpop{ 0%{ opacity:0; transform:translateY(.5em) rotate(10deg) scale(.7); } 60%{ opacity:1; transform:translateY(-.08em) rotate(-3deg) scale(1.04); } 100%{ opacity:1; transform:none; } }
.w-num .en{ display:inline-block; font-variant-numeric:tabular-nums; }
.apps > .wrap{ position:relative; z-index:1; }
.toys{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.toy{ position:absolute; width:var(--s,44px); height:var(--s,44px); opacity:var(--o,.18); animation:toy var(--t,9s) ease-in-out var(--dl,0s) infinite; }
@keyframes toy{ 0%,100%{ transform:translateY(0) rotate(var(--r0,-6deg)); } 50%{ transform:translateY(-14px) rotate(var(--r1,6deg)); } }
.ill .i-ring{ fill:none; stroke:#27c3d3; stroke-width:5; }
.ill .i-thin{ stroke-width:2; }
.app-soon .sk, .app-soon .sk-media{ position:relative; overflow:hidden; }
.app-soon .sk::after, .app-soon .sk-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 80%); transform:translateX(-100%); animation:shim 2.4s ease-in-out infinite; }
@keyframes shim{ 60%,100%{ transform:translateX(100%); } }
.app:hover .app-icon{ animation:wig .7s var(--ease); }
@keyframes wig{ 0%{ transform:none; } 25%{ transform:rotate(-9deg) scale(1.08); } 50%{ transform:rotate(7deg) scale(1.08); } 75%{ transform:rotate(-4deg) scale(1.05); } 100%{ transform:translateY(-3px) scale(1.05); } }
.grp-ill{ display:block; flex:0 0 auto; width:56px; height:56px; margin:0 0 12px; transition:transform .5s var(--ease); }
.grp-co:hover .grp-ill{ transform:translateY(-3px) rotate(-4deg); }
.grp-ill .i-bg{ fill:#fdf1d8; } .grp-ill.g2 .i-bg{ fill:#e6effa; }
.rep-gen li{ z-index:1; }
.rep-gen::after{ content:""; position:absolute; z-index:0; top:25px; left:40px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#27c3d3; box-shadow:0 0 0 3px rgba(39,195,211,.22), 0 0 10px 2px rgba(39,195,211,.6); animation:signal 3.8s ease-in-out infinite; }
@keyframes signal{ 0%{ left:40px; opacity:0; } 10%{ opacity:1; } 88%{ opacity:1; } 100%{ left:calc(100% - 18px); opacity:0; } }
.kf::before{ content:""; position:absolute; top:-1px; left:0; width:200%; height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath fill='%23f6f3ec' d='M0 0H1440V12Q1260 24 1080 12T720 12T360 12T0 12Z'/%3E%3C/svg%3E") repeat-x 0 0 / 50% 100%; animation:wv 60s linear infinite; pointer-events:none; }
body.is-page .kf::before{ content:""; position:absolute; top:-1px; left:0; width:200%; height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0H1440V12Q1260 24 1080 12T720 12T360 12T0 12Z'/%3E%3C/svg%3E") repeat-x 0 0 / 50% 100%; animation:wv 60s linear infinite; pointer-events:none; }
.js [data-rv]{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s); }
.js [data-rv].in{ opacity:1; transform:none; }

@media (min-width:1260px){
  .app-mk .app-body{ padding:0; grid-template-columns:minmax(0,1fr); grid-template-areas:"stage" "shots"; gap:0; }
  .mk-hdr{ grid-area:stage; position:relative; border-radius:0; box-shadow:none; }
  .mk-hdr::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(160deg, rgba(3,6,10,.8) 0%, rgba(3,6,10,.52) 24%, rgba(3,6,10,0) 46%), linear-gradient(270deg, rgba(3,6,10,.5) 0%, rgba(3,6,10,0) 24%); }
  .app-mk .mk-info{ grid-area:stage; z-index:2; align-self:start; justify-self:start; width:492px; margin:36px 0 0 40px; }
  .app-mk .app-tag{ color:var(--sea-l); }
  .app-mk h3{ color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); }
  .app-mk h3 .sub{ color:rgba(255,255,255,.78); }
  .app-mk .app-text{ max-width:468px; color:rgba(236,244,248,.94); text-shadow:0 1px 8px rgba(0,0,0,.75); }
  .app-mk .app-icon{ box-shadow:0 12px 24px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.22); }
  .app-mk .mk{ grid-area:stage; z-index:2; align-self:start; justify-self:end; margin:98px 26px 0 0; padding-right:0; --pw:176px; }
  .app-mk .mk-link{ color:#fff; }
  .app-mk .mk-link:hover, .app-mk .mk-link:focus-visible{ color:#f3eec9; }
  .app-mk .mk-link:hover .mk-play, .app-mk .mk-link:focus-visible .mk-play{ background:rgba(222,217,160,.5); }
  .app-mk .mk-cap{ text-shadow:0 2px 12px rgba(0,0,0,.75); }
  .app-mk .mk-dots i{ background:rgba(222,217,160,.32); }
  .app-mk .mk-dots i.on{ background:#ded9a0; }
  .app-mk .mk-pause{ border-color:rgba(222,217,160,.6); background:rgba(222,217,160,.08); color:#f3eec9; }
  .app-mk .mk-pause:hover{ background:rgba(222,217,160,.22); border-color:#ded9a0; }
  .app-mk .mk-shots{ padding:24px 26px 26px; }
}
@media (max-width:1080px){
  .apps-grid{ grid-template-columns:1fr; gap:24px; }
  .apps-side{ flex-direction:row; }
  .apps-side > .app{ flex:1 1 0; }
  .mk-shots{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; }
  .mk-ss{ flex:0 0 118px; scroll-snap-align:start; }
}
@media (max-width:900px){
  .app-mk .app-body{ column-gap:32px; }
}
@media (max-width:960px){
  :root{ --hdr:64px; --pad:24px; }
  .kh-in{ padding:0 20px; }
  .kh-logo a{ padding:9px 22.6px; transform:scale(.8); }
  .kh-logo img{ height:26px; }
  .kh-burger{ display:block; }
  .kh-nav{ position:fixed; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; background:rgba(8,17,26,.97);
    opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s linear .35s; }
  .kh.is-open .kh-nav{ opacity:1; visibility:visible; transition:opacity .35s var(--ease); }
  .kh-nav ul{ flex-direction:column; gap:30px; }
  .kh-nav a, .kh.is-solid .kh-nav a{ color:#fff; }
  .kh-nav a:hover, .kh-nav a:focus-visible, .kh.is-solid .kh-nav a:hover, .kh.is-solid .kh-nav a:focus-visible{ color:var(--sea-l); }
  .kh-nav .en{ font-size:11px; }
  .kh-nav .ja{ font-size:19px; }
  .kh-nav .cta a, .kh.is-solid .kh-nav .cta a{ margin-top:6px; padding:13px 30px; color:#fff; background:transparent; border-color:rgba(255,255,255,.6); }
  .kh-nav .cta a:hover, .kh-nav .cta a:focus-visible, .kh.is-solid .kh-nav .cta a:hover, .kh.is-solid .kh-nav .cta a:focus-visible{ color:var(--ink); background:#fff; border-color:#fff; }
  .kh.is-open{ color:#fff; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
  .kh.is-open::before{ opacity:0; }
  .kh.is-open .kh-logo a{ background:#fff; box-shadow:0 8px 24px -12px rgba(0,0,0,.5); }
  .hero-in{ grid-template-columns:1fr; gap:40px; padding:calc(var(--hdr) + 36px) 24px 56px; }
  .hero-copy{ align-items:stretch; }
  .hero h1{ font-size:clamp(24px, calc((100vw - 48px) / 19), 44px); }
  .scroll{ display:none; }
  .hero::before{ background:linear-gradient(180deg, rgba(6,14,22,.58) 0%, rgba(6,14,22,.42) 40%, rgba(6,14,22,.18) 62%, rgba(6,14,22,.5) 100%); }
  .works-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .works-grid li:nth-child(3){ border-left:0; padding-left:0; }
  .works-grid li:nth-child(n+3){ border-top:1px solid var(--line); }
  .sec{ padding:56px 0; }
  .kf-in{ grid-template-columns:1fr; gap:40px; }
  .grp-grid{ grid-template-columns:1fr; }
  .rep-grid{ grid-template-columns:1fr; gap:34px; }
  .rep-pc{ width:min(100%, 250px); margin-top:24px; }
  .grp-others{ grid-template-rows:none; grid-template-columns:1fr 1fr; }
  .kf-nav{ grid-template-columns:repeat(2,max-content); gap:16px 36px; }
}
@media (min-width:641px) and (max-width:900px){
  .rep-name{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:36px; align-items:start; }
  .rep-name > p{ grid-column:1; }
  .rep-pc{ grid-column:2; grid-row:1 / span 3; align-self:center; width:250px; margin-top:0; }
}
@media (max-width:640px){
  :root{ --pad:20px; }
  .sp{ display:inline; }
  .hero-in{ padding:calc(var(--hdr) + 30px) 20px 48px; gap:34px; }
  .hero h1{ font-size:clamp(22px, calc((100vw - 40px) / 12.8), 32px); }
  .eyebrow{ font-size:10.5px; letter-spacing:.24em; gap:12px; margin-bottom:22px; }
  .hero .lead{ font-size:13.5px; line-height:2.05; }
  .biz{ margin-top:18px; font-size:13px; letter-spacing:.08em; }
  .nb-in{ flex-wrap:wrap; gap:10px 14px; padding-top:18px; padding-bottom:18px; }
  .nb-label{ padding-right:0; border-right:0; }
  .nb-more{ margin-left:auto; }
  .nb-item{ order:3; flex-basis:100%; flex-wrap:wrap; gap:8px 12px; }
  .nb-ttl{ flex-basis:100%; white-space:normal; }
  .works-grid li{ padding:18px 10px 16px 14px; }
  .works-grid li:nth-child(odd){ padding-left:0; border-left:0; }
  .w-num .en{ font-size:34px; }
  .w-ill{ width:62px; height:62px; margin:0 0 10px -4px; }
  .rep-gen{ gap:6px; }
  .rep-gen svg{ width:46px; height:46px; }
  .rep-gen::before{ left:36px; right:16px; top:23px; }
  .rep-gen .en{ font-size:9.5px; letter-spacing:.1em; }
  .w-cap{ margin-top:8px; font-size:12.5px; line-height:1.75; }
  .works-partners{ grid-template-columns:1fr; }
  .mk-ss{ flex-basis:104px; }
  .hero-cta{ margin-top:34px; }
  .hero-cta .btn{ flex:1 1 auto; height:52px; padding:0 22px; }
  .app-mk .app-body{ grid-template-columns:minmax(0,1fr); grid-template-areas:"hdr" "info" "mk" "shots"; gap:22px; }
  .app-mk .mk{ padding-right:0; --pw:200px; }
  .app-media{ padding:22px 22px 0; }
  .sec{ padding:48px 0; }
  .sec-head{ gap:4px 16px; margin-bottom:24px; }
  .app-body{ padding:26px 22px 24px; }
  .app-icon{ width:64px; height:64px; border-radius:15px; }
  .kf{ padding:52px 0 24px; }
  .grp-tech{ padding:34px 24px 30px; }
  .grp-logo{ top:30px; right:24px; width:64px; height:64px; border-radius:15px; }
  .grp-tech .grp-label{ min-height:64px; padding-right:80px; }
  .grp-tech .grp-name, .grp-tech .grp-desc{ padding-right:0; }
  .grp-others{ grid-template-columns:1fr; gap:16px; }
  .apps-side{ flex-direction:column; }
  .apps-side > .app{ flex:0 0 auto; }
  .app-head .app-store{ flex-basis:100%; margin-left:0; }
  .grp-co{ padding:18px 20px; }
  .rep-quote br{ display:none; }
  .credit{ right:20px; bottom:calc(var(--wvh) + 4px); font-size:10px; }
  .kf-bottom{ margin-top:34px; }
}
@media (max-width:640px){
  .toy{ --s:30px !important; }
  .t1, .t3, .t4, .t6, .t7, .t8{ display:none; }
  .t2{ top:16px !important; right:5% !important; } .t5{ top:26px !important; right:19% !important; } .t9{ display:none; }
  .grp-ill{ width:44px; height:44px; margin-bottom:8px; }
  .rep-gen::after{ top:20px; left:36px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .scroll::after{ animation:none; }
  .hero-bg img{ transition:none; }
  .mk-screen img{ transition:none; }
  .js [data-rv]{ opacity:1; transform:none; transition:none; }
  .mk-body, .ill .tw, .ill .tw2, .ill .bob, .ill .spin, .ill .cur, .js .works-grid.in .w-ill{ animation:none; }
  .w-ill, .rep-gen svg{ transition:none; }
  .wv, .kf::before, .toy, .btn-primary .btn-arr, .js .sec-head.in .ch, .app:hover .app-icon{ animation:none; }
  .rep-gen::after, .app-soon .sk::after, .app-soon .sk-media::after{ display:none; }
  .grp-ill{ transition:none; }
}

.gap15{ display:inline-block; margin-top:.8em; }
.kh-nav a[aria-current="page"]{ color:var(--sea-l); }
.kh.is-solid .kh-nav a[aria-current="page"]{ color:var(--sea-d); }
br.wb{ display:none; }
.right{ display:block; text-align:right; }
.gothic{ font-family:"Hiragino Kaku Gothic ProN","Meiryo",sans-serif; }
.ph{ --wvh:clamp(28px, 4vw, 56px); position:relative; overflow:hidden; isolation:isolate; color:#fff; background:linear-gradient(135deg,#143550 0%,#0c1c2b 55%,#08111a 100%); }
.ph::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 90% at 88% 8%, rgba(39,195,211,.26), rgba(39,195,211,0) 62%), radial-gradient(42% 70% at 6% 100%, rgba(28,143,208,.2), rgba(28,143,208,0) 70%); }
.ph::after{ content:""; position:absolute; z-index:-1; right:-140px; top:-190px; width:540px; height:540px; border-radius:50%; border:1px solid rgba(255,255,255,.08); box-shadow:0 0 0 72px rgba(255,255,255,.022), 0 0 0 150px rgba(255,255,255,.016); pointer-events:none; }
.ph-in{ position:relative; z-index:1; padding-top:calc(var(--hdr) + 62px); padding-bottom:calc(var(--wvh) + 60px); }
.ph-en{ display:block; font-family:var(--en); font-weight:700; font-size:clamp(40px,6.2vw,86px); line-height:1; letter-spacing:.02em; background:linear-gradient(100deg,#ffffff 0%,#c9f5f8 45%,var(--sea) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ph-en .ch{ display:inline-block; background-image:linear-gradient(100deg,#ffffff 0%,#c9f5f8 45%,var(--sea) 100%); background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; }
.js .ph-in.in .ch{ animation:chpop .8s var(--ease) calc(var(--i) * 55ms + .15s) both; }
.ph h1{ display:flex; align-items:center; gap:14px; margin-top:22px; font-size:clamp(17px,1.6vw,20px); font-weight:700; letter-spacing:.16em; color:#e6f2f6; }
.ph h1::before{ content:""; flex:0 0 34px; height:2px; background:linear-gradient(90deg,var(--sea),var(--blue)); }
.ph .toy{ z-index:0; }
.pg{ padding:60px 0 92px; }
.pg-narrow{ max-width:940px; margin:0 auto; }
.pg-block + .pg-block{ margin-top:76px; }
.pg-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; margin-bottom:26px; }
.pg-en{ font-family:var(--en); font-weight:700; font-size:clamp(26px,2.9vw,38px); line-height:1; letter-spacing:.02em; background:linear-gradient(100deg,var(--ink) 0%,#16506a 55%,var(--sea) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pg-h{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0; font-size:17px; font-weight:700; letter-spacing:.12em; color:#26323d; }
.pg-h::before{ content:""; flex:0 0 26px; height:2px; background:linear-gradient(90deg,var(--sea),var(--blue)); }
.pg-dl{ display:grid; grid-template-columns:minmax(120px,200px) minmax(0,1fr); margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.pg-dl dt, .pg-dl dd{ margin:0; padding:17px 22px; border-top:1px solid var(--line); font-size:14.5px; line-height:1.95; }
.pg-dl dt:first-of-type, .pg-dl dt:first-of-type + dd{ border-top:0; }
.pg-dl dt{ font-weight:700; letter-spacing:.08em; color:#26323d; background:#f4f9fa; }
.pg-dl dd{ color:#3b4752; background:#fff; }
.pg-dl .right{ font-size:12.5px; color:#6a7580; }
.pg-dl a{ color:var(--sea-d); }
.pg-tl{ display:grid; grid-template-columns:minmax(104px,150px) minmax(0,1fr); margin:0; }
.pg-tl dt{ padding:15px 26px 15px 0; font-weight:700; letter-spacing:.04em; color:#16506a; text-align:right; white-space:nowrap; }
.pg-tl dd{ position:relative; margin:0; padding:15px 0 15px 32px; border-left:2px solid #d3eef1; color:#3b4752; font-size:14.5px; line-height:1.9; }
.pg-tl dd::before{ content:""; position:absolute; left:-8px; top:22px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--sea); box-shadow:0 0 0 4px rgba(39,195,211,.14); transition:transform .3s var(--ease), background-color .3s; }
.pg-tl dd:hover::before{ transform:scale(1.25); background:var(--sea); }
.pg-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:0; padding:0; list-style:none; }
.pg-card{ position:relative; display:flex; flex-direction:column; height:100%; padding:26px 26px 24px; border-radius:22px; background:#fff; border:1px solid #edf1f3; color:var(--text); box-shadow:0 1px 2px rgba(10,21,32,.05), 0 18px 40px -26px rgba(10,21,32,.32); transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.pg-card:hover, .pg-card:focus-visible{ color:var(--text); transform:translateY(-6px); box-shadow:0 2px 4px rgba(10,21,32,.05), 0 30px 56px -28px rgba(10,21,32,.42); }
.pg-ill{ display:block; width:76px; height:76px; margin:0 0 14px -6px; transition:transform .5s var(--ease); }
.pg-card:hover .pg-ill{ transform:translateY(-4px) rotate(-4deg); }
.pg-ill .i-bg{ fill:#fdf1d8; } .pg-cards li:nth-child(2) .pg-ill .i-bg{ fill:#e4f6f8; } .pg-cards li:nth-child(3) .pg-ill .i-bg{ fill:#fdeae8; }
.pg-card-date{ font-family:var(--en); font-size:13px; letter-spacing:.1em; color:#6a7580; }
.pg-card-ttl{ margin:4px 0 0; font-size:18px; font-weight:700; line-height:1.55; color:#0f1822; }
.pg-card .circ{ position:absolute; top:28px; right:24px; width:42px; height:42px; }
.pg-card:hover .circ{ color:#fff; background:var(--ink); border-color:var(--ink); }
.pg-post-head{ margin-bottom:34px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.pg-date{ font-family:var(--en); font-size:13.5px; letter-spacing:.1em; color:#5c6873; }
.pg-title{ margin-top:8px; font-size:clamp(20px,2.3vw,27px); font-weight:700; line-height:1.55; color:#0f1822; }
.pg-plat{ display:flex; align-items:center; gap:12px; margin:40px 0 16px; font-size:16px; font-weight:700; letter-spacing:.06em; color:#0f1822; }
.pg-plat::before{ content:""; flex:0 0 10px; height:10px; border-radius:3px; background:linear-gradient(135deg,var(--sea),var(--blue)); transform:rotate(45deg); }
.pg-post-body > .pg-plat:first-child{ margin-top:0; }
.pg-titles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin:0; }
.pg-t{ padding:14px 16px 13px; border-radius:14px; background:#f5f9fa; border:1px solid #e6eef1; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s; }
.pg-t:hover{ background:#fff; transform:translateY(-3px); box-shadow:0 14px 26px -18px rgba(10,21,32,.4); }
.pg-t dt{ font-size:14.5px; font-weight:700; line-height:1.6; color:#0f1822; }
.pg-t dd{ margin:5px 0 0; font-size:12px; line-height:1.75; color:#66717c; }
.pg-note{ margin-top:12px; font-size:12.5px; color:#6a7580; }
.pg-post-body .pg-note:first-of-type{ margin-top:26px; }
.pg-news{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.pg-news a{ position:relative; display:flex; align-items:center; gap:16px 18px; padding:22px 10px 22px 78px; border-bottom:1px solid var(--line); color:var(--text); transition:background-color .3s, padding .35s var(--ease); }
.pg-news a:hover, .pg-news a:focus-visible{ color:var(--text); background:#f5fbfc; padding-left:86px; }
.pg-news .badge{ position:absolute; left:10px; top:50%; transform:translateY(-50%); transition:transform .35s var(--ease); }
.pg-news a:hover .badge, .pg-news a:focus-visible .badge{ transform:translate(8px,-50%); }
.pg-nttl{ flex:1; min-width:0; margin:0; font-size:15.5px; font-weight:700; line-height:1.65; transition:color .3s; }
.pg-news a:hover .pg-nttl{ color:var(--sea-d); }
.pg-news .circ{ width:38px; height:38px; }
.pg-news a:hover .circ{ color:#fff; background:var(--ink); border-color:var(--ink); }
.pg-body p{ font-size:15px; line-height:2.1; color:#2f3b46; }
.pg-body a{ color:var(--sea-d); word-break:break-all; }
.pg-back{ margin-top:52px; }
.pg-apps{ display:grid; gap:22px; }
.pg-app{ display:grid; grid-template-columns:128px minmax(0,1fr); gap:30px; align-items:start; padding:32px; border-radius:24px; background:#fff; border:1px solid #edf1f3; box-shadow:0 1px 2px rgba(10,21,32,.05), 0 18px 40px -26px rgba(10,21,32,.3); transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.pg-app:hover{ transform:translateY(-5px); box-shadow:0 2px 4px rgba(10,21,32,.05), 0 30px 56px -28px rgba(10,21,32,.4); }
.pg-app-icon img{ width:128px; height:128px; border-radius:22.4%; box-shadow:0 14px 28px -14px rgba(10,21,32,.55), 0 0 0 1px rgba(10,21,32,.06); transition:transform .5s var(--ease); }
.pg-app:hover .pg-app-icon img{ animation:wig .7s var(--ease); }
.pg-app h3{ margin:0; font-size:22px; font-weight:700; line-height:1.5; color:#0f1822; }
.pg-app h3 .sub{ display:inline-block; margin-top:2px; font-size:16px; color:var(--muted); }
.pg-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:14px 0 16px; }
.pg-badges img{ height:44px; width:auto; }
.pg-badges .gp img{ height:48px; margin:-2px 0; }
.pg-paused{ display:inline-flex; align-items:center; gap:12px; }
.pg-paused img{ opacity:.45; }
.pg-paused span{ font-size:13px; color:#6a7580; }
.pg-app p{ font-size:14.5px; line-height:2; color:#3b4752; }
.pg-shots{ display:flex; gap:14px; margin:22px 0 0; padding:4px 2px 16px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.pg-shots img{ flex:0 0 auto; width:auto; height:190px; border-radius:14px; scroll-snap-align:start; box-shadow:0 12px 24px -16px rgba(10,21,32,.55), 0 0 0 1px rgba(10,21,32,.06); }
.pg-shots.tall img{ height:340px; }
.fp-end{ font-size:14px; font-weight:400; letter-spacing:.02em; color:#7c8893; }
.pg-fp{ display:block; width:100%; }
.pg-fp tbody{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.pg-fp tbody + tbody{ margin-top:14px; padding-top:14px; border-top:1px dashed #d3e5ea; }
.pg-fp tr{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-radius:14px; background:#f5f9fa; border:1px solid #e6eef1; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s; }
.pg-fp tr:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 12px 22px -16px rgba(10,21,32,.4); }
.pg-fp th{ padding:0; text-align:left; font-size:14px; font-weight:700; line-height:1.5; color:#26323d; }
.pg-fp td{ padding:0; white-space:nowrap; }
.pg-fp td img{ display:inline-block; width:16px; height:16px; margin-left:5px; vertical-align:middle; opacity:.65; }
.fp-notes{ margin-top:22px; }
.fp-notes p{ font-size:12px; line-height:1.9; color:#6a7580; }
.pg-recruit{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.pg-rc{ padding:30px 28px; border-radius:22px; background:var(--sand); border:1px solid #ece6da; transition:transform .45s var(--ease); }
.pg-rc:hover{ transform:translateY(-4px); }
.pg-rc h2{ font-size:18px; font-weight:700; letter-spacing:.08em; color:#0f1822; }
.pg-rc p{ margin-top:12px; font-size:14.5px; color:#4c5863; }
.pg-contact{ display:grid; gap:16px; margin:0; }
.pg-cc{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px 24px; margin:0; padding:26px 30px; border-radius:20px; background:#fff; border:1px solid #edf1f3; box-shadow:0 1px 2px rgba(10,21,32,.05), 0 16px 36px -26px rgba(10,21,32,.3); }
.pg-cc dt{ display:flex; align-items:center; gap:14px; font-size:16px; font-weight:700; color:#0f1822; }
.pg-ml{ display:inline-flex; flex:0 0 42px; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#2fd3df,#1c8fd0); box-shadow:0 10px 20px -12px rgba(28,160,210,.8); }
.pg-ml svg{ width:22px; height:22px; }
.pg-cc dd{ margin:0; }
.pg-cc dd img{ width:auto; height:18px; max-width:none; }
.pg-prose > p{ font-size:15px; line-height:2.05; color:#2f3b46; }
.pg-prose h2{ margin:42px 0 12px; padding-left:16px; border-left:4px solid var(--sea); font-size:17.5px; font-weight:700; line-height:1.6; color:#0f1822; }
.pg-prose a{ color:var(--sea-d); }
@media (max-width:900px){
  .pg-cards, .pg-recruit{ grid-template-columns:minmax(0,1fr); }
  .pg-fp tbody{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  br.wb{ display:inline; }
  .ph-in{ padding-top:calc(var(--hdr) + 38px); padding-bottom:calc(var(--wvh) + 40px); }
  .ph .toy{ --s:26px !important; }
  .ph .t1, .ph .t2{ display:none; }
  .ph .t5{ top:48% !important; right:8% !important; } .ph .t8{ top:66% !important; right:22% !important; }
  .pg{ padding:40px 0 64px; }
  .pg-block + .pg-block{ margin-top:56px; }
  .pg-dl{ grid-template-columns:minmax(0,1fr); }
  .pg-dl dt{ padding:14px 18px 2px; background:#fff; border-top:1px solid var(--line); }
  .pg-dl dd{ padding:2px 18px 14px; border-top:0; }
  .pg-dl dt:first-of-type{ border-top:0; }
  .pg-tl{ grid-template-columns:104px minmax(0,1fr); }
  .pg-tl dt{ padding-right:20px; font-size:13px; }
  .pg-tl dd{ padding-left:24px; font-size:14px; }
  .pg-app{ grid-template-columns:minmax(0,1fr); gap:18px; padding:24px 22px; }
  .pg-app-icon img{ width:96px; height:96px; }
  .pg-shots img{ height:150px; } .pg-shots.tall img{ height:280px; }
  .pg-cc{ grid-template-columns:minmax(0,1fr); padding:22px; }
  .pg-titles{ grid-template-columns:minmax(0,1fr); }
  .pg-news a{ flex-wrap:wrap; padding:18px 4px 18px 62px; }
  .pg-news a:hover, .pg-news a:focus-visible{ padding-left:66px; }
  .pg-news .badge{ left:4px; top:21px; transform:none; }
  .pg-news a:hover .badge, .pg-news a:focus-visible .badge{ transform:translateX(4px); }
  .pg-nttl{ flex-basis:100%; order:3; }
  .pg-news .circ{ display:none; }
  .pg-fp tbody{ grid-template-columns:minmax(0,1fr); gap:8px; }
}
@media (prefers-reduced-motion:reduce){
  .js .ph-in.in .ch, .pg-app:hover .pg-app-icon img{ animation:none; }
  .pg-card, .pg-ill, .pg-t, .pg-app, .pg-rc, .pg-news a, .pg-news .badge, .pg-fp tr{ transition:none; }
}