/*
Theme Name: Land a gig
Theme URI: https://shiva-design.com/
Author: shiva_design.
Author URI: https://shiva-design.com/
Description: shiva_design. 公式サイト用オリジナルテーマ。Web制作・保守・運用の受注（案件獲得）を目的とした、UI重視・明朗設計のシングルカラム構成。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: land-a-gig
*/

:root{
  --paper:#faf8f5;
  --paper-2:#f3efe8;
  --ink:#2a2a2a;
  --ink-2:#6b6b6b;
  --ink-3:#9a9a9a;
  --orange:#e8823c;
  --orange-d:#cf6a26;
  --orange-wash:#fdf0e6;
  --line:#e7e2d9;
  --ph:#d9d4cc;
  --rpg:#1a2340;
  --rpg-2:#243056;
  --rpg-line:#4a5a8a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);
  /* スクロール端のバウンス（ラバーバンド）を無効化。
     これが起きると、ドキュメント基準の .site-veil だけがズレて
     ベールのかかっていない生の背景画像が上下にはみ出す */
  overscroll-behavior:none}
body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.8;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
section{padding:100px 0}
h2.sec{font-size:15px;font-weight:800;color:var(--orange);letter-spacing:.12em;margin-bottom:8px}
h2.sec + .ttl{font-size:32px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px;line-height:1.3}
.lead{color:var(--ink-2);font-size:15px;margin-bottom:48px;max-width:640px}
.ph{background:var(--ph);display:flex;align-items:center;justify-content:center;color:#8a8378;font-size:13px;font-weight:700;border-radius:10px}

/* ===== 背景パララックス（トップページのみ） =====
   .site-bg   : position:fixed の画像レイヤー。スクロールしても動かない＝パララックス。
                iOS Safari で不具合の出る background-attachment:fixed は使わない。
   .site-veil : 可読性用のベール。body の全高さに伸びる（position:absolute）ので、
                「FVは薄く／以降は濃く」をスクロール位置に連動させずCSSだけで表現できる。 */
body.home{background:transparent;position:relative}
.site-bg{position:fixed;inset:-40px;z-index:-2;pointer-events:none;
  background-image:url(assets/img/site_bg02.png); /* 旧ブラウザ用フォールバック */
  background-image:image-set(url(assets/img/site_bg02.webp) type("image/webp"),
                             url(assets/img/site_bg02.png)  type("image/png"));
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  /* コンテンツを読みやすくするためのソフトフォーカス。
     inset を -40px にしているのは、ぼかしのにじみを画面の外に逃がすため
     （inset:0 のままだと四辺が透けて額縁のように見えてしまう）。 */
  filter:blur(10px)}
/* top を -100vh まで伸ばし、ページ上端より上もFVと同じ濃度で塗っておく。
   overscroll-behavior が効かない環境でバウンスしても継ぎ目が出ない。
   グラデーションの位置指定はすべて +100vh されている点に注意。 */
.site-veil{position:absolute;left:0;right:0;top:-100vh;bottom:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.22) 0,
    rgba(0,0,0,.22) 100vh,   /* ← ここがページ上端 */
    rgba(0,0,0,.30) 138vh,
    rgba(0,0,0,.46) 192vh,
    rgba(0,0,0,.50) 228vh,
    rgba(0,0,0,.50) 100%)}
@media(max-width:820px){
  /* SPは画面が縦長でFVが短いぶん、ベールの切り替わりを早める */
  .site-veil{background:linear-gradient(180deg,
    rgba(0,0,0,.26) 0,
    rgba(0,0,0,.26) 100vh,   /* ← ここがページ上端 */
    rgba(0,0,0,.34) 130vh,
    rgba(0,0,0,.48) 175vh,
    rgba(0,0,0,.52) 200vh,
    rgba(0,0,0,.52) 100%)}
}

/* ===== 背景（暗）の上に直接載る文字を明るく反転 =====
   白いカードや紺パネルの中身は不透明な背景を持つので対象外。
   body.home 限定なので、背景画像のない下層ページは従来の配色のまま。 */
body.home h2.sec + .ttl{color:#fff}
body.home .lead{color:rgba(255,255,255,.82)}
body.home .price-note{color:rgba(255,255,255,.68)}
body.home .svc-extra-note{color:rgba(255,255,255,.7)}
body.home .sbar .top{color:#fff}
body.home .skill-side h4{color:#fff}
body.home .flow-more a{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
/* .contact / .adv は元から濃色パネルなので、中の .ttl / .lead は据え置き */
body.home .contact .ttl{color:#fff}
body.home .contact .lead{color:#c7c2ba}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* header */
header.site-header{position:sticky;top:0;z-index:50;background:rgba(250,248,245,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.28)}
/* 2段組み。1行目＝ロゴ（中央）＋CTA（右）、2行目＝ナビ（中央） */
.navbar{max-width:1080px;margin:0 auto;padding:18px 28px;display:grid;
  grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;
  align-items:center;row-gap:12px;column-gap:16px}
.logo{grid-column:2;grid-row:1;justify-self:center;display:block;line-height:0;text-decoration:none}
.logo img{height:56px;width:auto}
.navlinks{grid-column:1/-1;grid-row:2;justify-self:center;display:flex;gap:30px;list-style:none;font-size:14px;font-weight:700}
.navlinks a{color:var(--ink-2);text-decoration:none;transition:color .2s}
.navlinks a:hover{color:var(--orange)}
.nav-cta{grid-column:3;grid-row:1;justify-self:end;background:var(--orange);color:#fff;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:800;text-decoration:none}
/* 背景が透けるぶん、トップではナビ文字を一段濃くしてコントラストを確保 */
body.home .navlinks a{color:var(--ink)}
body.home .navlinks a:hover{color:var(--orange-d)}
@media(max-width:820px){.navlinks{display:none}.logo img{height:40px}.navbar{padding:14px 20px;row-gap:0;column-gap:10px}}

/* ヘッダーが2段になり背が高くなったぶん、アンカーリンクの着地位置をずらす */
section[id],div[id].contact{scroll-margin-top:132px}
@media(max-width:820px){section[id],div[id].contact{scroll-margin-top:88px}}

/* FV */
.fv{padding:120px 0 112px;min-height:72vh;display:flex;align-items:center;
  /* 背景画像の上でも見出しが読めるよう、テキスト側にだけ淡い影を敷く */
  background:radial-gradient(100% 120% at 18% 50%,
    rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 78%)}
.fv-inner{width:100%}
.fv-inner > *{max-width:720px}
.fv-badge{display:inline-block;background:#fff;border:1px solid var(--line);color:var(--orange-d);font-size:13px;font-weight:800;padding:7px 15px;border-radius:30px;margin-bottom:24px}
.fv h1{color:#fff;font-size:52px;line-height:1.22;font-weight:800;letter-spacing:-.02em;min-height:130px}
.type-cursor{display:inline-block;width:3px;height:.9em;background:var(--orange);margin-left:4px;vertical-align:text-bottom;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.fv .sub{font-size:17px;color:rgba(255,255,255,.85);margin-top:24px;line-height:1.95}
.fv .btns{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.btn-main{background:var(--orange);color:#fff;padding:16px 32px;border-radius:9px;font-weight:800;font-size:16px;text-decoration:none;transition:background .2s,transform .1s;box-shadow:0 6px 18px rgba(232,130,60,.28)}
.btn-main:hover{background:var(--orange-d);transform:translateY(-1px)}
.btn-sub{border:2px solid var(--ink);color:var(--ink);padding:14px 30px;border-radius:9px;font-weight:800;font-size:16px;text-decoration:none;transition:all .2s}
.btn-sub:hover{background:var(--ink);color:#fff}
body.home .btn-sub{border-color:#fff;color:#fff}
body.home .btn-sub:hover{background:#fff;color:var(--ink)}
@media(max-width:820px){.fv{padding:64px 0 72px;min-height:auto}.fv h1{font-size:38px;min-height:100px}}

/* Service */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 22px;transition:transform .2s,box-shadow .2s}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.07)}
.svc-ico{width:50px;height:50px;border-radius:12px;background:var(--orange-wash);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px}
.svc-card h3{font-size:17px;font-weight:800;margin-bottom:10px}
.svc-card p{font-size:13px;color:var(--ink-2);line-height:1.7;min-height:66px}
.svc-price{margin-top:16px;font-size:16px;font-weight:800;color:var(--orange-d)}
.svc-extra{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.svc-extra-note{font-size:13px;color:var(--ink-3)}
.chip{background:var(--orange-wash);color:var(--orange-d);border-radius:22px;padding:8px 16px;font-size:13px;font-weight:700}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}

/* Price */
.price-wrap{background:var(--paper-2);border-radius:16px;padding:8px;overflow:hidden;border:1px solid var(--line)}
.monitor{display:inline-block;background:var(--orange-wash);border:1px dashed var(--orange);color:var(--orange-d);font-size:13px;font-weight:800;padding:11px 20px;border-radius:9px;margin-bottom:22px}
.price-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.price-table th{background:#fff;text-align:left;font-size:13px;color:var(--ink-3);font-weight:800;padding:18px 24px;border-bottom:2px solid var(--line)}
.price-table td{padding:20px 24px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.price-table tr:last-child td{border-bottom:none}
.price-table .nm{font-weight:800;font-size:15px;white-space:nowrap}
.price-table .pr{font-weight:800;color:var(--orange-d);font-size:17px;white-space:nowrap}
.price-note{font-size:12px;color:var(--ink-3);margin-top:16px;line-height:1.7}
@media(max-width:820px){.price-table thead{display:none}.price-table tr{display:grid;grid-template-columns:1fr 1fr;padding:14px 0;border-bottom:1px solid var(--line)}.price-table td{border:none;padding:4px 20px}.price-table .desc{grid-column:1/3;color:var(--ink-2);font-size:12px}}

/* Skill */
.skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.sbar{margin-bottom:20px}
.sbar .top{display:flex;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:7px}
.sbar .top .pct{color:var(--orange-d);font-weight:800}
.track{height:9px;background:var(--paper-2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.track .fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--orange-d));border-radius:6px;width:0;transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
.skill-side h4{font-size:14px;font-weight:800;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.tag{background:var(--orange-wash);color:var(--orange-d);border-radius:20px;padding:7px 15px;font-size:13px;font-weight:700}
.tools{display:flex;flex-wrap:wrap;gap:9px}
.tool{background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--ink-2)}
@media(max-width:820px){.skill-grid{grid-template-columns:1fr;gap:36px}}

/* About = 冒険の書 */
.adv{background:var(--rpg);border-radius:18px;padding:44px;color:#fff;font-family:"Courier New",monospace;position:relative;border:3px solid #fff;box-shadow:0 0 0 3px var(--rpg),0 20px 50px rgba(26,35,64,.4)}
.adv .book-label{position:absolute;top:-14px;left:36px;background:var(--orange);color:#fff;font-size:13px;font-weight:800;padding:5px 16px;border-radius:6px;font-family:sans-serif;letter-spacing:.05em}
.adv-top{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;margin-bottom:28px}
.adv-avatar{width:120px;height:120px;background:var(--rpg-2);border:3px solid var(--rpg-line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8a9;text-align:center;image-rendering:pixelated;line-height:1.5}
.adv-name{font-size:13px;color:#9fb0d8;margin-bottom:4px;letter-spacing:.1em}
.adv-name b{font-size:26px;color:#fff;display:block;font-family:sans-serif;font-weight:800;letter-spacing:0;margin-top:2px}
.adv-title{display:inline-block;margin-top:10px;background:var(--rpg-2);border:1px solid var(--rpg-line);padding:5px 12px;border-radius:5px;font-size:12px;color:#ffd98a;font-family:sans-serif;font-weight:700}
.adv-status{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px;margin:24px 0;padding:22px;background:rgba(0,0,0,.2);border:1px solid var(--rpg-line);border-radius:8px}
.st-row{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px dotted var(--rpg-line);padding-bottom:7px}
.st-row .lv{color:#ffd98a;font-weight:700}
.adv-story{font-family:sans-serif;line-height:1.9;font-size:14px;color:#d8e0f2}
.adv-story p{margin-bottom:12px}
.adv-story .q{color:#ffd98a;font-weight:700}
.adv-likes{font-family:sans-serif;margin-top:20px;font-size:13px;color:#9fb0d8}
.adv-likes b{color:#fff}
@media(max-width:820px){.adv{padding:30px 22px}.adv-top{grid-template-columns:1fr;text-align:center;justify-items:center}.adv-status{grid-template-columns:1fr}}

/* Flow */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.fstep{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 16px;text-align:center;position:relative}
.fstep .n{width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:17px}
.fstep h4{font-size:14px;font-weight:800;margin-bottom:8px}
.fstep p{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.flow-more{margin-top:26px;text-align:center}
.flow-more a{color:var(--orange-d);font-weight:800;font-size:14px;text-decoration:none;border-bottom:2px solid var(--orange-wash);padding-bottom:2px}
@media(max-width:820px){.flow{grid-template-columns:1fr 1fr}}

/* FAQ */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 26px;margin-bottom:12px}
.faq-q{font-size:15px;font-weight:800;display:flex;gap:12px;align-items:flex-start}
.faq-q .mk{color:var(--orange);font-weight:900;font-size:17px;flex:none}
.faq-a{font-size:13.5px;color:var(--ink-2);margin-top:10px;padding-left:29px;line-height:1.8}

/* Contact */
.contact{background:var(--ink);color:#fff;border-radius:20px;padding:72px 56px;text-align:center;margin-bottom:60px}
.contact h2.sec{color:var(--orange)}
.contact .ttl{color:#fff;font-size:30px;font-weight:800;margin-bottom:14px}
.contact .lead{color:#c7c2ba;margin:0 auto 36px}
.cform{max-width:520px;margin:0 auto;text-align:left}
.cform label{display:block;font-size:13px;font-weight:700;color:#c7c2ba;margin-bottom:6px}
.cform input,.cform textarea{width:100%;background:#383838;border:1px solid #555;border-radius:8px;padding:14px 16px;margin-bottom:14px;color:#fff;font-size:14px;font-family:inherit}
.cform input::placeholder,.cform textarea::placeholder{color:#888}
.cform textarea{min-height:110px;resize:vertical}
.cform .send{background:var(--orange);color:#fff;border:none;width:100%;text-align:center;font-weight:800;padding:16px;border-radius:9px;font-size:16px;margin-top:6px;cursor:pointer;transition:background .2s;font-family:inherit}
.cform .send:hover{background:var(--orange-d)}
.cmail{color:#c7c2ba;font-size:14px;margin-top:22px}
.cmail b{color:#fff}
@media(max-width:820px){.contact{padding:48px 24px}}

/* 背景は不透明の黒。box-shadow でフッターより下も黒で塗り、
   下端でバウンスしても背景画像が覗かないようにする */
footer.site-footer{background:#000;text-align:center;padding:40px 28px;
  color:rgba(255,255,255,.62);font-size:12px;border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 200px 0 #000}