@charset "utf-8";
/* グッドエンジェル 共通の見た目（2026-10-11 本人「デザインの統一性は重視しないと違和感につながる」）
   決まり：db/design_touitsu_1011/kimari_gpt_1011.md（基準はスマホのトップ 9/22 の緑。白・緑・黒の3色）
   本人の決定：広告LP（?ad=）は対象外／右上の「ログイン」は残す／サブディレの登録欄は緑に。
   クラス名は gdk- で始める（既存の CSS と重ならないように）。 */

:root{
  --gdk-g:#10914b;      /* 主の緑 */
  --gdk-g2:#0c7a3e;     /* 濃い緑（押したとき・文字リンク） */
  --gdk-pale:#eaf4eb;   /* 薄い緑 */
  --gdk-pale2:#f3f9f5;  /* 最薄緑（案内・検索のカード） */
  --gdk-ink:#1b2320;    /* 本文 */
  --gdk-sub:#66736c;    /* 補助の文字 */
  --gdk-line:#e3e9e5;   /* 線 */
  --gdk-field:#d5ded8;  /* 入力欄の枠 */
  --gdk-err:#c73535; --gdk-err-bg:#fff0f0;
  --gdk-warn:#916300; --gdk-warn-bg:#fff7e5;
  --gdk-ok:#147c43;  --gdk-ok-bg:#eaf4eb;
  --gdk-font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
}

/* ---- スマホのヘッダー（smart/includes/cms/head.tpl）----
   旧ヘッダーと同じく上に固定・高さ50px（各画面が 50px 分の余白で逃げているため高さは変えない）。
   見た目はトップ（smart/includes/gd_head.tpl）にそろえる：白・下に1pxの線・左にロゴと副題・右に虫眼鏡と三本線。
   右上の「ログイン」は残す（本人 10-11）。 */
.header.gdk-hd{
  position:fixed; z-index:400; left:0; top:0; width:100%; height:50px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 6px 0 12px; background:#fff; border-bottom:1px solid var(--gdk-line); box-shadow:none;
  font-family:var(--gdk-font);
}
.gdk-hd-logo{display:block; text-decoration:none !important; line-height:1; min-width:0;}
.gdk-hd-logo img{display:block; height:24px; width:auto;}
.gdk-hd-logo small{display:block; font-size:10px; color:var(--gdk-sub); margin-top:3px; line-height:1.2; white-space:nowrap;}
.gdk-hd-act{display:flex; align-items:center; gap:2px; flex:none;}
.gdk-hd-ic{width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--gdk-ink) !important; text-decoration:none !important; flex:none;}
.gdk-hd .hamburger{position:relative; left:auto; top:auto; width:40px; height:40px; z-index:300;}
.gdk-hd .hamburger__line{position:absolute; left:9px; width:22px; height:2px; background-color:var(--gdk-ink); font-size:0; text-indent:-999px; overflow:hidden;}
.gdk-hd .hamburger__line--1{top:13px;}
.gdk-hd .hamburger__line--2{top:19px;}
.gdk-hd .hamburger__line--3{top:25px;}
/* 開いたときは × にする（menu.css の nav-open と同じ考え方） */
.nav-open .gdk-hd .hamburger__line--1{transform:translateY(6px) rotate(45deg);}
.nav-open .gdk-hd .hamburger__line--2{opacity:0;}
.nav-open .gdk-hd .hamburger__line--3{transform:translateY(-6px) rotate(-45deg);}

/* 右上のログイン（押すと3つのログイン口が開く。旧ヘッダーと同じ checkbox の仕組み） */
.gdk-hd-login{position:relative;}
.gdk-hd-login input{display:none;}
.gdk-hd-login label{
  display:flex; align-items:center; height:32px; padding:0 10px; border:1px solid var(--gdk-g); border-radius:9px;
  background:#fff; color:var(--gdk-g2); font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer;
}
.gdk-hd-login label:active{background:var(--gdk-pale);}
.gdk-hd-pop{
  display:none; position:absolute; right:0; top:40px; width:230px; padding:10px; box-sizing:border-box;
  background:#fff; border:1px solid var(--gdk-line); border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.10); z-index:500;
}
.gdk-hd-login input:checked ~ .gdk-hd-pop{display:block;}
.gdk-hd-pop a{
  display:flex; align-items:center; justify-content:center; height:44px; margin:0 0 8px; border-radius:9px;
  font-size:14px; font-weight:700; text-decoration:none !important; white-space:nowrap;
  background:#fff; border:1px solid var(--gdk-g); color:var(--gdk-g2) !important;
}
.gdk-hd-pop a:last-child{margin-bottom:0;}
.gdk-hd-pop a.is-main{background:var(--gdk-g); border-color:var(--gdk-g); color:#fff !important;}

/* ---- 部品（画面を直すときに使う）---- */
.gdk-btn{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:48px; padding:0 14px; box-sizing:border-box;
  border:0; border-radius:9px; background:var(--gdk-g); color:#fff !important; font-family:var(--gdk-font); font-size:15px; font-weight:700;
  text-decoration:none !important; cursor:pointer; -webkit-appearance:none; appearance:none;}
.gdk-btn:active{background:var(--gdk-g2);}
.gdk-btn2{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:46px; padding:0 14px; box-sizing:border-box;
  border:1px solid var(--gdk-g); border-radius:9px; background:#fff; color:var(--gdk-g2) !important; font-family:var(--gdk-font); font-size:15px; font-weight:700;
  text-decoration:none !important; cursor:pointer; -webkit-appearance:none; appearance:none;}
.gdk-btn2:active{background:var(--gdk-pale);}
.gdk-link{color:var(--gdk-g2) !important; text-decoration:underline;}
.gdk-card{background:#fff; border:1px solid var(--gdk-line); border-radius:14px; padding:16px; box-sizing:border-box;}
.gdk-card-pale{background:var(--gdk-pale2); border:1px solid var(--gdk-line); border-radius:14px; padding:16px; box-sizing:border-box;}
.gdk-label{display:block; margin:0 0 6px; font-size:14px; font-weight:700; color:var(--gdk-ink);}
.gdk-input{display:block; width:100%; height:48px; margin:0 0 12px; padding:0 12px; box-sizing:border-box; border:1px solid var(--gdk-field);
  border-radius:9px; background:#fff; color:var(--gdk-ink); font-size:16px; font-family:var(--gdk-font); -webkit-appearance:none; appearance:none;}
.gdk-input::placeholder{color:var(--gdk-sub); opacity:1;}
.gdk-input:focus{outline:none; border:2px solid var(--gdk-g); padding:0 11px; box-shadow:0 0 0 3px rgba(16,145,75,.12);}
.gdk-input.is-err{border-color:var(--gdk-err);}
.gdk-err{margin:-6px 0 12px; color:var(--gdk-err); font-size:13px; font-weight:700; line-height:1.5;}
.gdk-ok{display:flex; align-items:center; gap:10px; padding:12px; border-radius:9px; background:var(--gdk-ok-bg); color:var(--gdk-ok);}
.gdk-h1{margin:0 0 8px; font-size:22px; font-weight:700; line-height:1.4; color:var(--gdk-ink);}
.gdk-h2{margin:0 0 10px; font-size:19px; font-weight:700; line-height:1.4; color:var(--gdk-ink);}
.gdk-h3{margin:0 0 8px; font-size:17px; font-weight:700; line-height:1.4; color:var(--gdk-ink);}
.gdk-note{font-size:12px; color:var(--gdk-sub); line-height:1.6;}