/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Gecko FX 用の子テーマ
 Author:       Masaya
 Template:     generatepress
 Version:      1.0.35
*/

:root {
  --gfx-bg-deep: #0B2F22;
  --gfx-bg-mid: #0F3D2C;
  --gfx-leaf: #4FC787;
  --gfx-leaf-soft: #8FDDB0;
  --gfx-ink-soft: #B7CDC0;
  --gfx-pad-x: 80px; /* PC用の左右余白。900px未満で20pxに固定切り替え */
}

/* 外側シェル: ブラウザ幅いっぱい。1400pxを超えた分の左右余白もヘッダーと同じ緑にする */
.gfx-page-shell { width:100%; background-color: var(--gfx-bg-deep); }

/* ヘッダー本体: 900px以上は width を 1400px に固定(max-widthではない)+ margin:0 auto で中央寄せ。
   max-widthだと900〜1400pxの間で幅が連続的に変化してしまうため、
   width固定にして「PC/スマホの2状態のみ」で切り替わるようにする。
   900px未満は下の@mediaでwidth:100%に上書きしてスマホ用レイアウトにする。 */
.gecko-fx-header-wrap {
  width: 1400px;
  margin: 0 auto;
  background-color: var(--gfx-bg-deep);
  overflow: hidden;
  position: relative;
}
/* ==== topbar ==== */
/* background-colorを自前で持たせ、親(.gecko-fx-header-wrap)の背景に依存しないようにする */
.gfx-topbar { position:relative; z-index:3; background-color: var(--gfx-bg-deep); display:flex; justify-content:space-between; align-items:center; padding: 20px var(--gfx-pad-x); flex-wrap:wrap; gap:12px; }
.gfx-logo { display:flex; align-items:center; gap:12px; }
.gfx-dots { display:flex; align-items:flex-end; gap:4px; }
.gfx-dots span { display:block; width:5px; background: var(--gfx-leaf); border-radius:2px; }
.gfx-dots span:nth-child(1){ height:4px; }
.gfx-dots span:nth-child(2){ height:7px; }
.gfx-dots span:nth-child(3){ height:10px; }
.gfx-dots span:nth-child(4){ height:14px; }
.gfx-logo-text { font-family:'Poppins',sans-serif; font-weight:700; font-size:24px; color:#fff; letter-spacing:0.02em; }
.gfx-logo-text .fx { color: var(--gfx-leaf); }

.gfx-topbar-right { display:flex; align-items:center; gap:28px; margin-left:auto; }
.gfx-sns { display:flex; gap:22px; }
.gfx-sns a { color:rgba(255,255,255,0.85); text-decoration:none; font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:600; }
.gfx-sns a:hover { color: var(--gfx-leaf); }
.gfx-line-btn { display:flex; align-items:center; gap:8px; background: var(--gfx-leaf); color: var(--gfx-bg-deep); font-weight:700; font-size:14px; padding:10px 20px; border-radius:22px; text-decoration:none; white-space:nowrap; transition: filter .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.gfx-line-btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.gfx-line-btn .short { display:none; }

/* ハンバーガーメニューボタン(PCでは非表示) */
.gfx-menu-toggle { display:none; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px; width:40px; height:40px; padding:0; background:transparent; border:none; cursor:pointer; flex-shrink:0; }
.gfx-menu-toggle span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition: transform .25s ease, opacity .25s ease; }
.gfx-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gfx-menu-toggle.is-active span:nth-child(2) { opacity:0; }
.gfx-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* メニューを開いた時の背景オーバーレイ(PCでは常に非表示) */
.gfx-nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:12; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .3s ease, visibility .3s ease; }
.gfx-nav-backdrop.is-open { opacity:1; visibility:visible; pointer-events:auto; }

/* 閉じるボタン(PCでは非表示) */
.gfx-nav-close { display:none; }

/* ==== hero ==== */
/* .gfx-hero自体はテキストの土台(緑の下地色のみ)。
   写真+グラデーションは子要素.gfx-hero-bgに分離し、position:absolute; inset:0
   で.gfx-hero(=幅1400px固定の.gecko-fx-header-wrapの内側)の箱にぴったり固定する。
   これにより画像がビューポートではなく必ずこの1400px幅コンテナ基準で配置される。 */
.gfx-hero {
  position:relative;
  min-height:680px;
  overflow:hidden;
  background-color: var(--gfx-bg-deep);
  display:flex; align-items:center;
}
/* .gfx-hero-bg: PC版の基本ルール(このファイルの900px未満メディアクエリ内で
   background-image/size/position/::afterの背景を全て上書きし、スマホ版専用の
   縦長画像に完全に差し替えている。プロパティは漏れなく上書きしているため、
   このPC用の値がスマホ側に混ざることはない)。
   mask-image・filter:blur()・方向性のあるグラデーションは使わない、
   background-size:cover + 均一な半透明オーバーレイ(::after)のシンプルな実装。 */
.gfx-hero-bg {
  position:absolute;
  inset:0;
  z-index:0;
  background-image: url("https://gecko-investor.com/wp-content/uploads/2026/07/10.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.gfx-hero-bg::after {
  content: "";
  position:absolute;
  inset:0;
  z-index:1;
  background-color: rgba(9,38,27,0.55);
}
.gfx-hero-inner { position:relative; z-index:3; padding:40px var(--gfx-pad-x) 48px; max-width:640px; }
.gfx-eyebrow { display:flex; align-items:center; gap:10px; color: var(--gfx-leaf); font-family:'Poppins',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.18em; margin-bottom:18px; }
.gfx-headline { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; color:#fff; font-size:44px; line-height:1.3; margin-bottom:20px; letter-spacing:0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5); }
.gfx-headline .accent { color: var(--gfx-leaf); }
.gfx-sub { font-size:15px; line-height:1.85; color: var(--gfx-ink-soft); margin-bottom:28px; font-weight:500; }
.gfx-sub .highlight { color: var(--gfx-leaf-soft); font-weight:700; }
.gfx-cta-row { display:flex; gap:14px; margin-bottom:32px; flex-wrap:wrap; }
.gfx-cta-primary, .gfx-cta-secondary { display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; padding:14px 26px; border-radius:6px; text-decoration:none; font-family:'Zen Kaku Gothic New',sans-serif; transition: filter .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.gfx-cta-primary { background: var(--gfx-leaf); color: var(--gfx-bg-deep); }
.gfx-cta-primary:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.gfx-cta-secondary { background:transparent; border:1.5px solid rgba(255,255,255,0.55); color:#fff; }
.gfx-cta-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.85); transform: translateY(-2px); }
.gfx-features { display:flex; gap:30px; flex-wrap:wrap; }
.gfx-feature { display:flex; align-items:flex-start; gap:9px; max-width:210px; }
.gfx-feature .icon { color: var(--gfx-leaf); font-size:18px; line-height:1.2; }
.gfx-feature .txt-main { color:#fff; font-size:13px; font-weight:700; display:block; }
.gfx-feature .txt-sub { color: var(--gfx-ink-soft); font-size:11.5px; display:block; margin-top:2px; }

/* ==== nav (PC: 横並びバー) ==== */
.gfx-nav { position:relative; z-index:3; display:flex; background-color: var(--gfx-bg-mid); border-top:1px solid rgba(255,255,255,0.06); flex-wrap:wrap; padding: 0 var(--gfx-pad-x); }
/* 「初心者はこちら」〜「今週の相場解説」はナビ全体の幅の70%程度に収め、
   その範囲内でspace-betweenで分散させる(画面幅いっぱいには広げない)。
   メンバー専用ページは margin-left:auto でこのグループとは切り離して右端に独立配置する。 */
.gfx-nav-links { display:flex; flex-wrap:wrap; width:70%; justify-content:space-between; }
.gfx-nav a { color:rgba(255,255,255,0.9); text-decoration:none; font-size:17px; font-weight:700; padding:16px 20px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.gfx-nav-links a:first-child { margin-left:-20px; }
.gfx-nav a:hover { background: rgba(255,255,255,0.06); }
.gfx-nav a.active { color: var(--gfx-leaf); }
.gfx-nav a.member-link { color:#E8C86B; margin-left:auto; margin-right:-20px; }

/* ============================================
   900px未満: スマホ用レイアウト(固定値に切り替え)
   ============================================ */
@media (max-width: 900px) {
  :root { --gfx-pad-x: 20px; }

  /* 900px未満はwidth固定をやめ、画面幅いっぱいに戻す */
  .gecko-fx-header-wrap { width:100%; margin:0; }

  .gfx-topbar { z-index:20; }

  .gfx-headline { font-size:30px; text-shadow: 0 2px 10px rgba(0,0,0,0.45); }
  .gfx-sub { text-shadow: 0 1px 6px rgba(0,0,0,0.4); }

  .gfx-hero { min-height:600px; align-items:flex-start; }
  /* スマホ専用の縦長構図画像(7.png: 上部に世界地図・中央にモニター・下部に人物と机)。
     PC版(10.png/横長)とは別の画像・別の見せ方にするため、
     background-image/background-repeat/background-size/background-positionを
     ここで全プロパティ明示的に上書きし、PC用の値が一切引き継がれないようにしている。 */
  .gfx-hero-bg {
    background-image: url("https://gecko-investor.com/wp-content/uploads/2026/07/7.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
  }
  /* オーバーレイもスマホ専用の濃さに明示的に上書き(PC版の0.55には依存しない)。 */
  .gfx-hero-bg::after {
    background-color: rgba(9,38,27,0.65);
  }
  .gfx-hero-inner { max-width:100%; padding:16px 20px 24px; }

  .gfx-features { flex-direction:column; gap:26px; }
  .gfx-feature { max-width:none; width:100%; }

  .gfx-sns { display:none; }

  /* LINEボタン: 補助導線として控えめな小さいアウトライン表示に */
  .gfx-topbar-right { gap:12px; }
  .gfx-line-btn {
    background:transparent;
    border:1.5px solid var(--gfx-leaf);
    color: var(--gfx-leaf);
    font-weight:600;
    font-size:11.5px;
    padding:6px 12px;
    border-radius:14px;
  }
  .gfx-line-btn:hover {
    filter:none;
    background: rgba(79,199,135,0.14);
    box-shadow:none;
  }
  .gfx-line-btn .full { display:none; }
  .gfx-line-btn .short { display:inline; }

  /* ハンバーガーアイコンを表示 */
  .gfx-menu-toggle { display:flex; }

  /* ナビは普段非表示、開いた時だけ画面上部からドロップダウン表示 */
  .gfx-nav {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; left:0; right:0;
    background-color: var(--gfx-bg-mid);
    border-top:none;
    padding:70px 20px 24px;
    max-height:100vh;
    overflow-y:auto;
    box-shadow: 0 16px 32px rgba(0,0,0,0.35);
    transform: translateY(-100%);
    opacity:0;
    visibility:hidden;
    transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
    z-index:13;
  }
  .gfx-nav.is-open { transform: translateY(0); opacity:1; visibility:visible; }
  .gfx-nav-links { flex-direction:column; width:100%; gap:0; }
  .gfx-nav a { width:100%; padding:14px 4px; }
  .gfx-nav-links a:first-child { margin-left:0; }
  .gfx-nav a.member-link { margin-left:0; margin-right:0; }

  .gfx-nav-close {
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:16px; right:16px;
    width:36px; height:36px;
    background:transparent; border:none; color:#fff; font-size:26px; line-height:1; cursor:pointer;
  }
}