/* Brandnew Systems — 生成CSS（ベース/hover/レスポンシブ）。各要素の装飾はインラインstyle参照 */

html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:#FFFFFF;color:#24292F;font-family:'Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{text-decoration:none;color:inherit}
::selection{background:#0969DA;color:#fff}
@keyframes bnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes bnFloat2{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-10px) rotate(8deg)}}
@keyframes bnBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes bnDash{to{stroke-dashoffset:-24}}
@keyframes bnPulse{0%,100%{opacity:.35}50%{opacity:.9}}

/* ===== hover（style-hover属性 → CSS） ===== */
[style-hover="background:#0550AE;transform:translateY(-1px);box-shadow:0 6px 18px rgba(9,105,218,.25)"]:hover{background:#0550AE !important;transform:translateY(-1px) !important;box-shadow:0 6px 18px rgba(9,105,218,.25) !important}
[style-hover="background:#0550AE;transform:translateY(-2px);box-shadow:0 10px 28px rgba(9,105,218,.25)"]:hover{background:#0550AE !important;transform:translateY(-2px) !important;box-shadow:0 10px 28px rgba(9,105,218,.25) !important}
[style-hover="background:#0550AE;transform:translateY(-2px);box-shadow:0 12px 32px rgba(9,105,218,.25)"]:hover{background:#0550AE !important;transform:translateY(-2px) !important;box-shadow:0 12px 32px rgba(9,105,218,.25) !important}
[style-hover="background:#F6F8FA"]:hover{background:#F6F8FA !important}
[style-hover="background:#fff"]:hover{background:#fff !important}
[style-hover="border-color:#0969DA;color:#0969DA"]:hover{border-color:#0969DA !important;color:#0969DA !important}
[style-hover="color:#0550AE"]:hover{color:#0550AE !important}
[style-hover="transform:translateY(-6px);box-shadow:0 20px 44px rgba(11,36,55,.14)"]:hover{transform:translateY(-6px) !important;box-shadow:0 20px 44px rgba(11,36,55,.14) !important}

/* ===== グリッドレイアウト定義（クラスベース） =====
   注意: data-reveal 等の JS が el.style を書き換えると style 属性が正規化され
   [style*=...] の属性一致が壊れるため、grid-template-columns は必ずここで持つ */
.g-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.g-2col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g-stats{grid-template-columns:repeat(4,1fr)}
.g-svc{grid-template-columns:110px minmax(0,340px) 1fr;gap:clamp(16px,3vw,48px)}
.g-cards-240{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.g-cards-320{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.g-cards-340{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.g-price{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.g-profile{grid-template-columns:auto minmax(0,1fr)}
.g-kv{grid-template-columns:96px 1fr;column-gap:24px}

/* ===== 共通コンポーネント（クラス版・インラインstyleから段階移行） ===== */
.nav-link{font-size:13.5px;font-weight:500;letter-spacing:.06em;color:#57606A;transition:color .2s}
.nav-link:hover{color:#0969DA}
.foot-link{font-size:12.5px;color:#57606A;transition:color .2s}
.foot-link:hover{color:#0969DA}
.sec-label{margin:0 0 14px;font-family:'Fira Code',monospace;font-size:12px;letter-spacing:.22em;color:#8250DF;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.sec-label-line{flex:0 0 48px;height:1px;background:rgba(130,80,223,.35)}
.sec-label--dark{color:#8250DF}
.sec-label--dark .sec-label-line{background:rgba(130,80,223,.35)}
.sec-title{margin:0 0 16px;font-weight:800;font-size:clamp(24px,2.8vw,36px);line-height:1.5}
.lead{margin:0 0 48px;max-width:680px;font-size:15px;line-height:2;color:#57606A;text-wrap:pretty}
.chip{font-family:'Fira Code',monospace;font-size:10.5px;color:#424A53;background:#F0F2F5;padding:.3rem .6rem;border-radius:2px}
.chip--accent{color:#0550AE;background:#DDF1FF}
.chip--lg{font-size:11px;color:#24292F;border:1px solid #E4E7EC;padding:.35rem .7rem}
.chip--lg.chip--accent{color:#0550AE;background:#DDF1FF;border-color:#B6DFF7}
.btn-primary{display:inline-flex;align-items:center;gap:10px;font-family:'Fira Sans',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.04em;color:#fff;background:#0969DA;padding:1rem 2rem;border-radius:3px;transition:all .25s}
.btn-primary:hover{background:#0550AE;transform:translateY(-2px);box-shadow:0 10px 28px rgba(9,105,218,.25)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;font-family:'Fira Sans',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.04em;color:#57606A;border:1px solid #D0D7DE;padding:1rem 2rem;border-radius:3px;transition:all .25s}
.btn-ghost:hover{border-color:#0969DA;color:#0969DA}
.case-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;padding:.8rem 1rem;background:#24292F;color:#79C0FF;font-family:'Fira Code',monospace;font-size:12.5px;letter-spacing:.12em;font-weight:500;border-radius:3px;transition:all .25s}
.case-btn:hover{background:#0969DA;color:#fff;box-shadow:0 6px 18px rgba(9,105,218,.25)}

/* ===== 縦型タイムライン（git log 風・汎用コンポーネント） =====
   運用ルール: 実績・工程を増やすときは <li class="tl-item"> ブロックを1つ追記するだけ。
   縦線とドットは CSS が自動描画するため、HTML 側に飾り要素は書かない。
   構造:  <li class="tl-item">
            <p class="tl-meta"><span class="tl-hash">年 or 番号</span><span class="tl-tag">状態</span></p>
            <h3 class="tl-title">見出し</h3>
            <p class="tl-desc">説明（任意）</p>
          </li>
   バリエーション: .tl-item--now（進行中＝ドット塗り潰し）
                   .tl-tag（緑=稼働・継続）/ .tl-tag--dev（青=開発中）/ .tl-tag--end（グレー=終了） */
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-item{position:relative;display:flex;flex-direction:column;gap:.45em;padding:0 0 2.1em 2.4em}
.tl-item:last-child{padding-bottom:.2em}
.tl-item::before{content:"";position:absolute;left:.5em;top:1.2em;bottom:-.65em;width:2px;transform:translateX(-50%);background:#E4E7EC}
.tl-item:last-child::before{display:none}
.tl-item::after{content:"";position:absolute;left:.5em;top:.5em;width:.58em;height:.58em;transform:translateX(-50%);border-radius:50%;background:#fff;border:2px solid #0969DA;box-shadow:0 0 0 3px rgba(9,105,218,.12)}
.tl-item--now::after{background:#0969DA;box-shadow:0 0 0 3px rgba(9,105,218,.2)}
.tl-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4em 1em;font-family:'Fira Code',monospace;font-size:.8rem;letter-spacing:.08em;color:#8250DF}
.tl-hash{font-weight:500}
.tl-tag{font-size:.72rem;letter-spacing:.06em;padding:.18em .7em;border-radius:999px;color:#1A7F37;background:#E9F7EE;border:1px solid #B7E0C3}
.tl-tag--dev{color:#0550AE;background:#DDF1FF;border-color:#B6DFF7}
.tl-tag--end{color:#57606A;background:#F0F2F5;border-color:#D8DEE4}
.tl-title{margin:0;font-size:1rem;font-weight:800;line-height:1.7;color:#24292F}
.tl-desc{margin:0;font-size:.875rem;line-height:2;color:#57606A;text-wrap:pretty}

/* ケーススタディ: 開発フロー表 */
.g-flow{grid-template-columns:170px 1fr;column-gap:24px;row-gap:4px}
@media(max-width:640px){.g-flow{grid-template-columns:1fr}}

/* ===== 相談フォーム（#contact） ===== */
.form-card{margin:0 auto;padding:clamp(24px,4vw,40px);max-width:680px;text-align:left;
  background:#FFFFFF;border:1px solid #E4E7EC;border-radius:6px;
  box-shadow:0 12px 36px rgba(140,149,159,.16)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f-grid>.f-wide{grid-column:1/-1}
@media(max-width:600px){.f-grid{grid-template-columns:1fr}}
.f-label{display:block;margin:0 0 7px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#424A53}
.f-req{margin-left:6px;font-family:'Fira Code',monospace;font-size:10px;color:#CF222E}
.f-input,.f-select,.f-textarea{width:100%;padding:.75rem .9rem;font-family:inherit;font-size:14.5px;
  color:#24292F;background:#FFFFFF;border:1px solid #D0D7DE;border-radius:3px;
  transition:border-color .2s,box-shadow .2s}
.f-textarea{min-height:150px;line-height:1.9;resize:vertical}
.f-input:focus,.f-select:focus,.f-textarea:focus{outline:none;border-color:#0969DA;
  box-shadow:0 0 0 3px rgba(9,105,218,.15)}
.f-input::placeholder,.f-textarea::placeholder{color:#8C959F}
.f-select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#57606A 50%),linear-gradient(135deg,#57606A 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.f-select option{background:#fff;color:#24292F}
/* honeypot: 人間には見せない（bot だけが埋める） */
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin-top:4px;padding:1.05rem 2rem;font-family:'Fira Sans',sans-serif;font-weight:600;font-size:15.5px;
  letter-spacing:.04em;color:#fff;background:#0969DA;border:none;border-radius:3px;cursor:pointer;
  transition:all .25s}
.f-submit:hover:not(:disabled){background:#0550AE;transform:translateY(-2px);box-shadow:0 12px 32px rgba(9,105,218,.25)}
.f-submit:disabled{opacity:.65;cursor:progress;transform:none;box-shadow:none}
.f-spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:f-spin .7s linear infinite}
@keyframes f-spin{to{transform:rotate(360deg)}}
.f-note{margin:16px 0 0;font-size:12.5px;line-height:1.9;color:#6E7781;text-align:center}
.f-msg{margin:18px 0 0;padding:14px 16px;font-size:13.5px;line-height:1.9;border-radius:3px;text-wrap:pretty}
.f-msg--err{color:#CF222E;background:#FFEBE9;border:1px solid rgba(207,34,46,.3)}
.f-msg--ok{padding:28px 20px;text-align:center;color:#424A53;background:#E9F7EE;
  border:1px solid rgba(26,127,55,.35)}
@media(prefers-reduced-motion:reduce){.f-spin{animation:none}.f-submit:hover:not(:disabled){transform:none}}

/* ===== レスポンシブ ===== */
#hambBtn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
#hambBtn span{width:24px;height:2px;background:#24292F;border-radius:2px}
@media(max-width:900px){
  .g-hero,.g-2col,.g-profile{grid-template-columns:1fr}
  .g-stats{grid-template-columns:repeat(2,1fr);row-gap:28px}
}
@media(max-width:640px){
  .g-svc{grid-template-columns:1fr;gap:10px}
}
@media(max-width:480px){
  /* ラベル/値の2列表を縦積みに（ラベル=奇数子・値=偶数子） */
  .g-kv{grid-template-columns:1fr;row-gap:2px}
  .g-kv>span:nth-child(odd){margin-top:14px;font-size:12px}
  .g-kv>span:first-child{margin-top:0}
}
@media(max-width:820px){
  #hambBtn{display:flex}
  #navMenu{position:fixed !important;top:68px !important;left:0 !important;right:0 !important;
    flex-direction:column !important;align-items:flex-start !important;gap:18px !important;
    padding:22px 24px !important;background:rgba(255,255,255,.97) !important;
    border-bottom:1px solid #E4E7EC;backdrop-filter:blur(12px);z-index:99;
    transform:translateY(-130%);transition:transform .3s ease;pointer-events:none}
  #navMenu.open{transform:translateY(0);pointer-events:auto}
}