/*
Theme Name: newgame
Theme URI: https://newgame.co.jp/
Author: newgame inc.
Description: 株式会社newgame のコーポレートサイト。画面の文言・画像・ロゴ・色は、すべて管理画面「newgame 設定」から変えられます。
Version: 0.4.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: newgame
*/

:root{
  --bg:#06060A; --panel:#0C0C12; --ink:#E9E9EF; --ink2:#B6B6C4; --ink3:#8E8EA0; --ink4:#6E6E80;
  --grn:#00F5A0; --pnk:#FF2E88; --line:#FFFFFF1F; --grnline:#00F5A02E;
  --mono:'JetBrains Mono',monospace; --dot:'DotGothic16',monospace; --sans:'Zen Kaku Gothic New',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--grn);text-decoration:none}
p{margin:0 0 16px}
.ng-wrapper{width:100%;max-width:var(--ng-wrap-w,1440px);margin:0 auto;position:relative;overflow:hidden}
.sec{padding:var(--ng-sec-pad,110px) var(--ng-sec-padx,44px)}
.lbl{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--pnk);margin-bottom:16px}
.h2{margin:0;font-family:var(--dot);font-size:var(--ng-h2,56px);line-height:1.2;color:#fff}
.h2s{font-size:15px;color:var(--ink3);margin-top:12px;letter-spacing:.02em}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
/* 個別ページの頭。front-page の節見出しより一段大きくするだけで、
   色も書体も :root のトークンをそのまま使う（値を写さない・§3-4） */
.pghead{padding-bottom:0}
.pghead .h2{font-size:clamp(42px,6.4vw,76px);line-height:1.14}
.pghead .h2s{font-size:16px;margin-top:14px}

/* 日本語を変なところで折らない */
.jp{line-break:strict;word-break:keep-all;overflow-wrap:break-word}
/* keep-all = 語の途中で折らない。折れるのは 、。・／ と空白のところだけ。
   収まらない語だけ break-word が逃がすので、はみ出しは起きない。 */
@supports (text-wrap:pretty){ .jp{text-wrap:pretty} }
.nb{white-space:nowrap}

.btn,
.ng-form button.default-btn,
.ng-form input[type=submit]{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:800;
     background:var(--grn);color:#06060A;padding:19px 42px;font-size:15px;position:relative;overflow:hidden;
     transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;border:0;cursor:pointer}
.btn:hover,
.ng-form button.default-btn:hover,
.ng-form input[type=submit]:hover{color:#06060A;transform:translateY(-3px);box-shadow:0 10px 0 -2px #00F5A03D,0 0 40px #00F5A055}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#FFFFFF80 50%,transparent 70%);
     transform:translateX(-120%);transition:transform .7s}
.btn:hover::after{transform:translateX(120%)}
.btnO{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:700;
     border:1px solid var(--grn);padding:12px 24px;color:var(--grn);transition:background .22s,color .22s,box-shadow .22s}
.btnO:hover{background:var(--grn);color:#06060A;box-shadow:0 0 30px #00F5A055}

/* 背景の装飾。読む邪魔をしない（クリックを奪わない・薄い） */
.scan{position:absolute;inset:0;pointer-events:none;z-index:3;
     background:repeating-linear-gradient(0deg,#00000000 0 2px,#00000059 2px 4px)}
.neongrid{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.75;
     background-image:linear-gradient(#00F5A01A 1px,transparent 1px),linear-gradient(90deg,#00F5A01A 1px,transparent 1px);
     background-size:48px 48px;animation:gridpan 26s linear infinite}
@keyframes gridpan{to{background-position:48px 48px,48px 48px}}
.glow{text-shadow:0 0 22px #00F5A066,0 0 48px #00F5A033}

.floats{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:900px}
.f{position:absolute;transform-style:preserve-3d}
.cube{width:96px;height:96px;transform-style:preserve-3d;animation:spin 26s linear infinite}
.cube i{position:absolute;inset:0;border:1px solid var(--grn);opacity:.5}
.cube i:nth-child(1){transform:translateZ(48px)}
.cube i:nth-child(2){transform:rotateY(180deg) translateZ(48px)}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(48px)}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(48px)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(48px)}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(48px)}
.cube.p i{border-color:var(--pnk)}
.ring{width:150px;height:150px;border:1px solid var(--pnk);border-radius:50%;animation:spin 34s linear infinite reverse}
.ring.g{border-color:var(--grn)}
@keyframes spin{from{transform:rotateX(0) rotateY(0) rotateZ(0)}to{transform:rotateX(360deg) rotateY(360deg) rotateZ(180deg)}}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-34px,0)}}
.f1{left:7%;top:20%;opacity:.30;animation:drift 15s ease-in-out infinite}
.f2{right:9%;top:16%;opacity:.24;animation:drift 19s ease-in-out infinite 1.4s}
.f3{left:15%;bottom:16%;opacity:.20;animation:drift 22s ease-in-out infinite .7s}
.f4{right:16%;bottom:20%;opacity:.26;animation:drift 17s ease-in-out infinite 2.1s}
.f5{left:44%;top:9%;opacity:.14;animation:drift 25s ease-in-out infinite 1s}

.blink{animation:blink 1.06s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--grn);
     box-shadow:0 0 10px var(--grn);animation:pulse 1.7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}

/* 🔴 隠すのは **JS が動いているときだけ**（html.ng-js）。
   素で .rv{opacity:0} にすると、JS が落ちた・切られた環境で中身が永久に出ない。 */
html.ng-js .rv{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
html.ng-js .rv.in{opacity:1;transform:none}
html.ng-js .ng-nomotion .rv{opacity:1;transform:none}
.ng-nomotion .floats,.ng-nomotion .scan{display:none}
.ng-nomotion .neongrid,.ng-nomotion .blink,.ng-nomotion .led,.ng-nomotion .ticker div,.ng-nomotion .paneIn{animation:none}

.card{border:1px solid var(--line);background:var(--panel);display:block;color:var(--ink);
      transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:var(--grn);box-shadow:0 18px 50px -20px #00F5A066;color:var(--ink)}
.card .thumb{height:var(--ng-pj-thumb,300px);position:relative;overflow:hidden;background-size:cover;background-position:center}
.card .thumb span{position:absolute;left:16px;top:16px;font-family:var(--mono);font-size:11px;color:#fff;
      border:1px solid #FFFFFF66;padding:5px 11px;background:#06060A66;z-index:2}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#06060ACC 100%);opacity:0;transition:opacity .3s}
.card:hover .thumb::after{opacity:1}
.card .bd{padding:26px 28px 30px}
.card h3{margin:0;font-size:22px;font-weight:900;color:#fff;line-height:1.55}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* 列数は節ごとに変えられる。**共通の .grid2 / .grid4 は触らない**
   （metanew の数字や「何ができるか」まで一緒に動いてしまうため） */
.grid-pj{grid-template-columns:repeat(var(--ng-pj-cols,2),minmax(0,1fr))}
.grid-mb{grid-template-columns:repeat(var(--ng-mb-cols,4),minmax(0,1fr))}

.tabs{display:flex;border:1px solid var(--line);flex-wrap:wrap}
.tabs button{flex:1;min-width:150px;background:transparent;border:0;border-right:1px solid var(--line);
      color:var(--ink3);font-family:var(--sans);font-weight:700;font-size:14px;padding:18px 14px;cursor:pointer;
      transition:color .25s,background .25s;position:relative}
.tabs button:last-child{border-right:0}
.tabs button::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grn);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tabs button[aria-selected="true"]{color:#fff;background:#00F5A00D}
.tabs button[aria-selected="true"]::before{transform:scaleX(1)}
.tabs button:hover{color:#fff}
.pane{border:1px solid var(--line);border-top:0;padding:40px 36px;background:var(--panel)}
.pane[hidden]{display:none}
.pane h3{margin:0 0 18px;font-size:26px;font-weight:900;color:#fff;line-height:1.55}
.pane p{font-size:15px;line-height:2.05;color:var(--ink2)}
.pane img{margin:20px auto 26px;border:1px solid var(--line);max-width:min(100%,720px)}
/* 画像の大きさは SOLUTIONS と Strengths で別に決められる（同じ .pane を使うので節で分ける）。
   高さの既定は none＝制限なし。max- で縛るだけなので縦横比はそのまま保たれる。 */
#ng-sec-solutions .pane img{max-width:min(100%,var(--ng-sol-img-w,720px));max-height:var(--ng-sol-img-h,none)}
#ng-sec-strengths .pane img{max-width:min(100%,var(--ng-str-img-w,720px));max-height:var(--ng-str-img-h,none)}
/* 節の背景画像。画像は**そのまま（ぼかさない）**敷く。
   🔴 ぼかすと何のサイトか分からなくなる（本人 2026-09-30「ぼかしたらわからんやろが」）。
   🔴 代わりに **右寄せ**にして、写真の中の文字が少ない側（絵）を見せ、
      文字が乗る左側を横グラデで濃く落とす。実測: 画像の有無でコントラスト比は1つも変わらない。
   🔴 縦グラデは**節の下端でちょうど背景色**になる（継ぎ目を消す）。 */
.ng-secbg{position:absolute;inset:0;z-index:0;overflow:hidden;background-size:0 0}
.ng-secbg::before{content:"";position:absolute;inset:0;background-image:inherit;
  background-position:top right;background-size:cover;background-repeat:no-repeat}
.ng-secbg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,6,10,.96) 0%,rgba(6,6,10,.88) 42%,rgba(6,6,10,.5) 100%),
  linear-gradient(180deg,rgba(6,6,10,0) 50%,rgba(6,6,10,.85) 86%,var(--bg) 100%)}
/* 枠だけのボタンは背景が透けるので、画像の上では下地を敷く（実測 2.29 → 合格） */
.ng-secbg ~ * .btnO{background:rgba(6,6,10,.78)}
@media(max-width:860px){
  /* 狭いと絵が切れて文字だけが残るので、画像を中央へ寄せて全体を濃くする */
  .ng-secbg::before{background-position:top center}
  .ng-secbg::after{background:
    linear-gradient(180deg,rgba(6,6,10,.86) 0%,rgba(6,6,10,.90) 50%,rgba(6,6,10,.96) 84%,var(--bg) 100%)}
}
/* Elementor で作った既存固定ページ。
   🔴 **色も幅も塗り替えない。**元サイトの下地も暗い（実測 #1A1135・文字 #DDD6ED）ので、
      Elementor自身の指定を保持する。旧Nata部品は別の互換CSSで整える。 */
.ng-el{position:relative;z-index:1}
.ng-el img{max-width:100%;height:auto}

/* 素の固定ページ（Elementor でないもの）と PROJECT の本文 */
.article{max-width:860px;font-size:16px;line-height:2.0;color:var(--ink2)}
.article h2{margin:48px 0 16px;font-size:26px;color:#fff;font-weight:900;letter-spacing:.01em}
.article h3{margin:34px 0 12px;font-size:19px;color:#fff;font-weight:800}
.article p{margin:0 0 20px}
.article a{color:var(--grn)}
.article ul,.article ol{margin:0 0 20px;padding-left:22px}
.article li{margin:0 0 8px}
.article img{max-width:min(100%,var(--ng-art-img-w,860px));height:auto;border:1px solid var(--line)}
.article .wp-video,.article video,.article iframe{max-width:100%}
.article video{height:auto}
.article iframe[src*="youtube.com/embed/"],.article iframe[src*="youtube-nocookie.com/embed/"]{height:auto;aspect-ratio:16/9}
.article blockquote{margin:22px 0;padding:14px 18px;border-left:2px solid var(--grn);background:#00F5A008}
.article table{width:100%;border-collapse:collapse;margin:22px 0}
.article th,.article td{border:1px solid var(--line);padding:10px 12px;font-size:15px;text-align:left}
.article th{background:var(--panel);color:#fff}
.ng-pj-hero{display:block;width:100%;max-width:var(--ng-pj-hero-w,1040px);height:auto;border:1px solid var(--line)}

.paneIn{animation:fadein .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.stat{border:1px solid var(--line);background:var(--panel);padding:26px 24px;transition:border-color .3s,background .3s}
.stat:hover{border-color:var(--grn);background:#00F5A008}
.stat b{display:block;font-family:var(--mono);font-size:38px;font-weight:800;color:var(--grn);line-height:1.1;letter-spacing:-.02em}
.stat b small{font-size:17px;font-weight:700;margin-left:3px}
.stat .cap{display:block;font-size:14px;color:var(--ink2);margin-top:12px;line-height:1.7}
.stat .sub{display:block;font-size:12px;color:var(--ink4);margin-top:5px;line-height:1.7}
#ng-sec-metanew .stat b{font-size:var(--ng-mn-stat,38px)}

.ticker{border-top:1px solid var(--grnline);border-bottom:1px solid var(--grnline);background:#00F5A008;
        overflow:hidden;white-space:nowrap;padding:13px 0}
.ticker div{display:inline-block;animation:slide 44s linear infinite;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink3)}
.ticker span{padding:0 26px}
.ticker em{font-style:normal;color:var(--grn)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.note{font-size:12px;line-height:2;color:var(--ink4)}
.inp,
/* 🔴 お問い合わせフォーム（Contact Form 7）。**値を書き写さず、.inp に名前を並べる**（§3-4）。
   class は本番のフォームの現物から取った（2026-10-01 実測）＝入力と本文は .wpcf7-form-control、
   送信は button.default-btn、同意のチェックは input.mail-term */
.ng-form .wpcf7-form-control:not([type=checkbox]):not([type=submit]):not(.wpcf7-acceptance){width:100%;background:#06060A;border:1px solid var(--line);color:var(--ink);padding:15px 16px;
     font-family:var(--sans);font-size:16px;line-height:1.6;transition:border-color .25s,box-shadow .25s}
.inp::placeholder,
.ng-form .wpcf7-form-control::placeholder{color:var(--ink2);opacity:1}
.inp:focus,
.ng-form .wpcf7-form-control:not([type=checkbox]):not([type=submit]):not(.wpcf7-acceptance):focus{outline:0;border-color:var(--grn);box-shadow:0 0 0 3px #00F5A01F}
.ng-form .form-group,.ng-form p{margin:0 0 28px}
/* 項目の余白は外側だけに持たせ、CF7の入れ子の段落と二重にしない。 */
.ng-form .form-group>p{margin:0}
.ng-form .form-group>label,.ng-form p>label{display:block;margin:0 0 10px;color:var(--ink);font-size:16px;font-weight:500;line-height:1.6}
.ng-form .wpcf7-form-control-wrap{display:block;margin:0}
.ng-form .wpcf7-response-output{margin:16px 0 0;padding:12px 14px;border:1px solid var(--line);color:var(--ink2);font-size:13px}
.ng-form .mail-term{width:16px;height:16px;accent-color:var(--grn);margin-right:8px;vertical-align:-2px}
.ng-form .wpcf7-list-item{margin:0}
.ng-form .wpcf7-list-item-label{font-size:13px;color:var(--ink2)}
.ng-form button.default-btn,.ng-form input[type=submit]{margin-top:22px;width:100%;justify-content:center}


.ng-head{position:relative;z-index:5;min-height:var(--ng-head-h,88px);padding:0 44px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--grnline);flex-wrap:wrap}
.ng-logo{font-family:var(--mono);font-size:var(--ng-logo-font,25px);font-weight:800;letter-spacing:-.02em;color:#fff;display:flex;align-items:center}
.ng-logo img{max-height:var(--ng-logo-h,38px);width:auto}
.ng-nav{display:flex;align-items:center;gap:26px;font-family:var(--mono);font-size:var(--ng-nav-font,12px);font-weight:700;letter-spacing:.04em;flex-wrap:wrap}
.ng-nav a{color:var(--ink)}
.ng-nav a:hover{color:var(--grn)}
.ng-nav a.btn,.ng-nav a.btn:hover{color:#06060A}
.ng-menu-toggle{display:none;border:1px solid var(--grn);background:var(--panel);color:var(--grn);min-height:44px;padding:10px 16px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer}
.ng-menu-toggle:focus-visible,.ng-nav a:focus-visible,.ng-foot a:focus-visible{outline:2px solid var(--grn);outline-offset:4px}
.ng-foot{border-top:1px solid var(--grnline);padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink4)}
.ng-foot nav{display:flex;gap:24px;flex-wrap:wrap;min-width:0}
.ng-foot a{color:var(--ink3);overflow-wrap:anywhere}
.ng-foot > span{max-width:100%;overflow-wrap:anywhere}
.ng-pagination ul.page-numbers{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.ng-pagination a,.ng-pagination .current,.ng-pagination .dots,.navigation.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line);font-family:var(--mono);font-size:13px;line-height:1.5}
.ng-pagination .current,.navigation.pagination .current{background:var(--grn);border-color:var(--grn);color:var(--bg)}
.ng-pagination a:hover,.navigation.pagination a:hover{border-color:var(--grn)}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px}



@media (max-width:900px){
  /* 🔴 スマホは min() で受ける。PC を小さくしたぶんはスマホにも効き、
     PC を大きくしてもスマホは詰まったまま（狭い画面で余白だけ増えない） */
  .sec{padding:min(76px,var(--ng-sec-pad,110px)) min(20px,var(--ng-sec-padx,44px))}
  .grid2,.grid4{grid-template-columns:minmax(0,1fr)}
  .grid-pj,.grid-mb{grid-template-columns:minmax(0,1fr)}
  .h2{font-size:clamp(25px,6.4vw,var(--ng-h2,56px))}
  .sechead{flex-direction:column;align-items:flex-start}
  .floats{display:none}
  .ng-head{padding:14px 20px}
  .card .thumb{height:var(--ng-pj-thumb-sp,220px)}
  .ng-logo img{max-height:var(--ng-logo-h-sp,30px)}
}
@media (max-width:560px){
  .ng-logo{max-width:calc(100% - 100px);min-width:0}
  .ng-logo img{max-width:100%;object-fit:contain}
  .ng-nav{flex-basis:100%;width:100%;gap:8px;align-items:stretch;flex-direction:column;padding:8px 0 4px}
  .ng-nav a{min-height:44px;padding:12px 0;overflow-wrap:anywhere}
  .ng-nav .btn{justify-content:center}
  .ng-menu-ready .ng-menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .ng-menu-ready .ng-nav[data-open="false"]{display:none}
  .ng-foot{padding:32px 20px}
  .ng-foot nav{gap:16px 24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.ng-js .rv{opacity:1;transform:none}
}