/* =========================================================
   CIFAL Japan — Accessible Website
   Aligned with UN / UNITAR visual identity (UN Blue #009EDB)
   WCAG 2.1 AA compliant design system
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* UN / UNITAR palette */
  --un-blue: #009edb;

  /* CIFAL Japan palette */
  --cj-blue: #4d4d4d;
  --cj-blue-dark: #0a5682;
  --cj-blue-darker: #333333;
  --cj-grey-900: #1a1a1a;
  --cj-grey-800: #2e2e2e;
  --cj-grey-700: #4a4a4a;
  --cj-grey-500: #6b6b6b;
  --cj-grey-300: #c7c7c7;
  --cj-grey-200: #e5e5e5;
  /* --cj-grey-100: #f4f4f4; */
  --cj-grey-100: #eef8ff;
  --cj-white: #ffffff;

  /* Accent colours used by UN communications */
  --cj-red: #d62828;
  --cj-gold: #fcb900;
  --cj-green: #56a33c;
  --cj-cream: #fff5cc;

  /* Typography — Roman first, Japanese fallbacks for CJK glyphs */
  --font-sans: "Roboto", "Helvetica Neue", Arial,
               "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "YuGothic", "Meiryo",
               "Noto Sans JP", sans-serif;
  --font-serif: "Roboto Slab", Georgia, "Times New Roman",
                "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
                "Noto Serif JP", serif;

  --fs-base: 1rem;       /* 16px */
  --fs-sm: 0.875rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;

  /* Layout */
  --container: 1200px;
  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Focus */
  --focus: 3px solid #ffbf00;
  --focus-offset: 2px;
}

/* Honor user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* High-contrast mode (user-toggled, via body class) */
body.high-contrast {
  --cj-blue: #003f64;
  --cj-blue-dark: #002840;
  --cj-grey-900: #000000;
  --cj-grey-800: #000000;
  --cj-grey-700: #000000;
  --cj-grey-500: #000000;
  --cj-grey-300: #000000;
  --cj-grey-200: #ffffff;
  --cj-grey-100: #ffffff;
  --cj-white: #ffffff;
  background: #ffffff;
}
body.high-contrast img:not(.logo) { filter: grayscale(100%) contrast(1.2); }

/* Larger text mode */
body.large-text { font-size: 112.5%; }

/* for image centering */
.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--cj-grey-900);
  background: var(--cj-white);
}
/* Japanese pages: slightly more generous line-height for CJK readability,
   and avoid serif display faces in headings where CJK fallback varies */
html[lang="ja"] body { line-height: 1.75; }
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.4;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--cj-blue-dark); text-decoration: underline; }
a:hover { color: var(--cj-blue-darker); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--cj-grey-900);
  line-height: 1.25;
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--fs-4xl); }
h2 {
  font-size: var(--fs-3xl);
  border-bottom: 4px solid var(--un-blue); /* UN Blueの横線 */
}
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--s-4); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  background: var(--cj-grey-900);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  z-index: 10000;
  font-weight: 700;
}
.skip-link:focus {
  top: var(--s-4);
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---------- Utility bar (UN pattern) ---------- */
.utility-bar {
  background: white;
  color: black;
  font-size: var(--fs-sm);
}
.utility-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
  gap: var(--s-4);
  flex-wrap: wrap;
}
.utility-bar a
{
  color: black;
  text-decoration: none;
}
.utility-bar a:hover { text-decoration: underline; }
.utility-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* 国連のリンク部分 */
.un-wordmark {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
}
.un-wordmark::before {
  content: "";
  display: inline-block;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--un-blue);
}

/* ---------- Accessibility toolbar ---------- */
.a11y-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.a11y-toolbar button {
  background: transparent;
  color: black; /* 黒字 */
  border: 1px solid rgba(0, 0, 0, 0.4); /* 白枠 */
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-sm);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1;
}
.a11y-toolbar button:hover {
  background: rgba(255, 255, 255, 0.15);
}
.a11y-toolbar button[aria-pressed="true"] {
  color: white; /* 白字 */
  background: black; /* 黒地 */
  border: 1px solid rgba(255, 255, 255, 0.4); /* 白枠 */
}

/* ---------- Header / branding ---------- */
.site-header {
  background: #fff;
  border-top: 5px solid var(--un-blue); /* UN Blueの横線 */
  border-bottom: 5px solid var(--un-blue); /* UN Blueの横線 */
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  text-decoration: none;
  color: inherit;
}
.brand .logo-mark {
  width: 64px;
  height: 64px;
  background: var(--cj-blue-dark);
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.4rem;
  flex: 0 0 auto;
}
.brand-text .org { font-family: var(--font-sans); font-weight: 700; font-size: 1.3rem; line-height: 1.1; color: var(--cj-grey-900); }
.brand-text .sub { font-size: var(--fs-sm); color: var(--cj-grey-700); }

/* ---------- Main navigation ---------- */
.nav-wrapper { background: var(--cj-blue); color: #fff; }
.main-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.main-nav a {
  display: inline-block;
  padding: var(--s-4) var(--s-5);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 5px solid transparent;
  background: var(--cj-blue);
  border-bottom-color: transparent;
}
.main-nav a:hover {
  background: var(--cj-blue-dark);
  border-bottom-color: var(--cj-gold);
}
.main-nav a[aria-current="page"] {
  background: var(--cj-blue-dark);
  border-bottom-color: var(--cj-gold);
}

.main-nav a[aria-current="page"]:hover {
  background: var(--cj-blue-dark);
  border-bottom-color: var(--cj-gold);
}
/* 他の項目を hover している間だけ、現在ページの強調を消す
   （現在ページ自身を hover した時は強調を維持する） */
.main-nav:has(a:hover) a[aria-current="page"]:not(:hover) {
  background: var(--cj-blue);
  border-bottom-color: transparent;
}

.nav-toggle {
  display: none;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-base);
  cursor: pointer;
  border-radius: var(--radius);
}

/* Search in nav bar */
.nav-search {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) 0;
}
.nav-search input[type="search"] {
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  min-width: 12rem;
}
.nav-search button {
  background: var(--cj-blue-darker);
  color: #fff;
  border: 1px solid var(--cj-blue-darker);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: black;
  background: var(--cj-grey-100);
  padding: var(--s-8) 0;
}
.hero .container { max-width: 900px; text-align: left; }
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-sm);
  color: var(--cj-blue-dark);
  font-weight: 700;
  margin-bottom: var(--s-3);
}
.hero h1 {
  color: black;
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: var(--s-4);
  border-bottom: 6px solid var(--un-blue); /* UN Blueの横線 */
}
.hero p.lead {
  font-size: var(--fs-lg);
  max-width: 60ch;
  margin-bottom: var(--s-5);
}
.hero-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fs-base);
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--cj-gold);
  color: var(--cj-grey-900);
  border-color: var(--cj-gold);
}
.btn-primary:hover { background: #e0a600; border-color: #e0a600; color: var(--cj-grey-900); }
.btn-secondary {
  background: transparent;
  color: var(--cj-blue-dark);
  border-color: var(--cj-blue-dark);
}
.btn-secondary:hover { background: #fff; color: var(--cj-blue-darker); }
.btn-outline {
  background: transparent;
  color: var(--cj-blue-dark);
  border-color: var(--cj-blue-dark);
}
.btn-outline:hover { background: var(--cj-blue-dark); color: #fff; }

/* ---------- Sections / cards ---------- */
.section { padding: var(--s-8) 0; }
.section-alt { background: var(--cj-grey-100); }
.section-header { 
  /* max-width: 72ch; */
  margin-bottom: var(--s-6);
}
.section-header .kicker {
  max-width: 72ch;
  color: var(--cj-blue-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-sm);
  margin-bottom: var(--s-2);
}

.grid {
  display: grid;
  gap: var(--s-5);
}
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--cj-grey-300);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card h3 { margin-top: 0; }
.card .meta {
  font-size: var(--fs-sm);
  color: var(--cj-grey-700);
  margin-bottom: var(--s-2);
}
.card .card-actions { margin-top: auto; padding-top: var(--s-4); }

.tag {
  display: inline-block;
  background: var(--cj-grey-100);
  border: 1px solid var(--cj-grey-300);
  color: var(--cj-grey-800);
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  margin-right: var(--s-2);
}

/* ---------- SDG strip ---------- */
.sdg-strip {
  background: var(--cj-grey-900);
  color: #fff;
  padding: var(--s-6) 0;
}
.sdg-strip h2 { color: #fff; font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.sdg-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sdg-list li {
  background: var(--cj-blue-dark);
  color: #fff;
  padding: var(--s-3);
  text-align: center;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.sdg-list li .num { display: block; font-size: var(--fs-xl); font-weight: 700; }

/* ---------- Stats (key figures) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
}
.stats > div {
  background: #fff;
  border-left: 4px solid var(--cj-blue);
  padding: var(--s-4);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.stats dt {
  font-size: var(--fs-sm);
  color: var(--cj-grey-700);
  margin: 0 0 var(--s-2) 0;
  font-weight: 600;
}
.stats dd {
  font-family: var(--font-sans);
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--cj-blue-dark);
  font-weight: 700;
  margin: 0;
}
body.high-contrast .stats > div { background: #fff; border-left-color: #000; }
body.high-contrast .stats dd { color: #000; }

/* ---------- Partner list ---------- */
.partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.partner-list li {
  background: #fff;
  border-left: 3px solid var(--cj-blue);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
body.high-contrast .partner-list li { background: #fff; border-left-color: #000; color: #000; }

/* ---------- Timeline ---------- */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-5);
}
.timeline > li {
  background: #fff;
  border-left: 4px solid var(--cj-blue);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.timeline > li h3 {
  margin: var(--s-1) 0 var(--s-2);
  font-size: var(--fs-lg);
}
.timeline > li .meta {
  margin: 0;
  color: var(--cj-blue-dark);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.timeline > li p:last-child { margin-bottom: 0; }
body.high-contrast .timeline > li { background: #fff; border-left-color: #000; }
body.high-contrast .timeline > li .meta { color: #000; }

/* ---------- Page banner (inner pages) ---------- */
.page-banner {
  color: black;
  background: var(--cj-grey-100);
  padding: var(--s-7) 0 var(--s-6);
  border-bottom: 4px solid var(--un-blue); /* UN Blueの横線 */
}
.page-banner h1 {
  color: black;
  margin-bottom: var(--s-2);
}
.page-banner .breadcrumbs a {
  color: black;
}
.breadcrumbs {
  font-size: var(--fs-sm);
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 0; padding: 0;
}
.breadcrumbs li::after { content: "›"; margin-left: var(--s-2); opacity: 0.7; }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs [aria-current="page"] { font-weight: 700; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: var(--s-5); }
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s-2);
  color: var(--cj-grey-900);
}
.form-group .hint {
  display: block;
  font-size: var(--fs-sm);
  color: var(--cj-grey-700);
  margin-top: var(--s-1);
}
.req { color: var(--cj-red); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  font-size: var(--fs-base);
  border: 2px solid var(--cj-grey-300);
  border-radius: var(--radius);
  background: #fff;
  color: var(--cj-grey-900);
}
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  border-color: var(--cj-blue-dark);
  outline: var(--focus);
  outline-offset: 0;
}
.form-group .error-msg {
  color: var(--cj-red);
  font-size: var(--fs-sm);
  margin-top: var(--s-1);
  display: none;
}
.form-group[data-invalid="true"] .error-msg { display: block; }
.form-group[data-invalid="true"] input,
.form-group[data-invalid="true"] textarea {
  border-color: var(--cj-red);
}

/* ---------- Footer ---------- */
.site-footer {
  background: white;
  color: black;
  padding: 0 0 var(--s-4);
  font-size: var(--fs-sm);
}
.site-footer-bar {
  margin-bottom: var(--s-7);
  border-top: 1px solid var(--un-blue); /* UN Blueの横線 */
}
.site-footer h2 {
  color: black;
  font-size: var(--fs-lg);
  margin-bottom: var(--s-3);
}
.site-footer a
{
  color: black;
  text-decoration: underline;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: var(--s-2); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
}
.footer-bottom {
  border-top: 1px solid var(--un-blue); /* UN Blueの横線 */
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
}

/* ---------- Accessibility helpers ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Visible focus for screen reader-only text when focused */
.sr-only-focusable:focus {
  position: static;
  width: auto; height: auto;
  clip: auto; white-space: normal;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .main-nav ul {
    width: 100%;
    flex-direction: column;
    display: none;
  }
  .main-nav[data-open="true"] ul { display: flex; }
  .main-nav a { padding: var(--s-3) var(--s-4); border-bottom: 1px solid rgba(255,255,255,0.2); }
  .main-nav .container { flex-direction: column; align-items: stretch; }
  .nav-search { width: 100%; }
  .nav-search input[type="search"] { flex: 1; min-width: 0; }
  .hero { padding: var(--s-7) 0; }
  .utility-bar .container { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 860px) {
  .sub-nav ul {
    width: 100%;
    flex-direction: column;
    display: none;
  }

  .sub-nav[data-open="true"] ul {
    display: flex;
  }
}

/* Print */
@media print {
  .utility-bar, .nav-wrapper, .site-footer, .hero-actions, .a11y-toolbar, .nav-toggle { display: none !important; }
  a::after { content: " (" attr(href) ")"; font-size: 0.9em; color: #333; }
  .hero { background: none; color: #000; }
  .hero h1, .hero p.lead { color: #000; }
}

/* 対応環境一覧のスタイル */
.env-group {
  margin-bottom:  var(--s-3);
  padding: var(--s-4);
  border-left: 4px solid var(--cj-blue);
  background-color: var(--cj-grey-100);
}

.env-group h3 {
  font-size: var(--fs-2xl);
  margin-top: 0;
  margin-bottom: var(--s-3);
  color: var(--cj-blue-dark);
}

.env-group p {
  font-size: var(--fs-xl);
  margin-bottom:  var(--s-3);
  padding-left: var(--s-2);       /* ほんの少し右にずらす（インデント） */
}

.env-group ul {
  margin-top: 0;
  margin-bottom:  var(--s-3);
  padding-left: var(--s-6);     /* リスト全体を右に寄せて「段差」を作る */
}

/* ===== Google CSE 検索ボックスをコンパクトに =====
   注意: Google CSE は初期化時にラッパーの .gcse-searchbox-only クラスを
   削除してしまうため、自前の .site-search ラッパーを起点に指定する。 */
.site-search {
  display: inline-block;
  vertical-align: middle;
  /* 入力欄＋検索ボタンの実寸に合わせる。はみ出しは切らない（ボタンを表示するため） */
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
}
/* Google が生成する内部の固定幅 table / box の余計な装飾だけ消す */
.site-search .gsc-control-searchbox-only,
.site-search form.gsc-search-box,
.site-search table.gsc-search-box {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
/* 入力欄の外枠（白背景・枠線・角丸・固定幅）。1行が収まる高さにする */
.site-search .gsc-input-box {
  display: block !important;   /* flex は内部 table を崩すので使わない */
  width: 200px !important;     /* 入力欄の幅。狭く/広くはここを変更 */
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--cj-grey-300) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* 入力時に内部セルが縦に膨らむのを抑える */
}
/* 外側 table は自動レイアウト＆実寸幅：入力欄(固定幅)＋検索ボタンが横並びになる */
.site-search table.gsc-search-box {
  table-layout: auto !important;
  width: auto !important;
}
/* 入力欄“内側”の table だけ固定レイアウトにして input を伸ばす */
.site-search .gsc-input-box table,
.site-search .gsc-input-box tbody,
.site-search .gsc-input-box tr {
  table-layout: fixed !important;
  width: 100% !important;
}
.site-search td.gsc-input {
  width: auto !important;        /* 検索ボタン列に幅を残す */
  padding: 0 4px 0 0 !important;
}
.site-search td.gsib_a {
  width: 100% !important;
  padding: 0 !important;
  vertical-align: middle !important;
}
/* 入力時に現れる「×」クリアボタンは枠からはみ出すため非表示にする */
.site-search td.gsib_b,
.site-search .gsst_b,
.site-search .gsc-clear-button {
  display: none !important;
}
/* 検索ボタン列：searchbox-only は既定で display:none なので表示に戻す */
.site-search td.gsc-search-button {
  display: table-cell !important;
  width: 1% !important;
  white-space: nowrap !important;
  padding-left: 4px !important;
  vertical-align: middle !important;
}
/* input 自身の最小幅を解除し、Google が付ける小さな高さ/負marginを打ち消す */
.site-search input.gsc-input,
.site-search .gsc-input-box input {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;        /* Google の 1.25em(≈16px) を上書き */
  line-height: 28px !important;
  margin: 0 !important;           /* Google の負 margin を打ち消す */
  font-size: 14px !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  background-position: 6px center !important;  /* 虫眼鏡/ブランド画像の位置 */
}
/* 検索ボタン（虫眼鏡）を見やすく、高さを入力欄に合わせる */
.site-search .gsc-search-button-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--cj-blue-dark) !important;
  cursor: pointer !important;
}
.site-search .gsc-search-button-v2 svg {
  width: 16px !important;
  height: 16px !important;
  max-width: none !important;     /* reset の svg{max-width:100%} を打ち消す */
  flex: 0 0 16px !important;       /* flex 内で 0 幅に潰れないように */
  fill: #fff !important;          /* アイコンを白に */
}
.site-search .gsc-search-button-v2 svg path { fill: #fff !important; }