/* codexguide.jp 共通ヘッダー・フッター（style.css を読まないページ用・2026-09-22）
   ヘッダーとフッターの中だけに効く。ページ本文の見た目には触らない。 */
.site-header,.site-footer{--ink:#142033;--muted:#667085;--line:#d9e2ec;--soft:#f5f8fb;--navy:#102a43;--blue:#2563eb;box-sizing:border-box;display:block;float:none;max-width:none;grid-column:1/-1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Sans",Meiryo,sans-serif;line-height:1.6;color:var(--ink);text-align:left}
.site-header *,.site-footer *{box-sizing:border-box}
.site-header{position:sticky;top:0;z-index:10;width:auto;margin:0;padding:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96)}
.site-header .header-inner{width:min(1120px,calc(100% - 32px));max-width:none;margin:0 auto;padding:0;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0;background:none;border:0}
.site-header a,.site-footer a{color:var(--blue);text-decoration:none;background:none;border:0}
.site-header .brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0;color:var(--navy)}
.site-header .brand-logo{display:block;width:clamp(180px,24vw,280px);max-width:280px;height:auto;object-fit:contain}
.site-header .brand-fallback{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header .global-nav{display:flex;flex-direction:row;gap:14px;align-items:center;overflow-x:auto;white-space:nowrap;padding:14px 0;margin:0;font-size:14px;min-width:0;max-width:100%;position:static;background:none;border:0}
.site-header .global-nav a{color:var(--ink);display:inline;padding:0;margin:0}
.site-header .sister-brand{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.site-header .sister-brand-logo{display:block;width:clamp(130px,15vw,210px);max-width:210px;height:auto;object-fit:contain}
.site-header .gptguide-brand-logo{display:block;width:clamp(120px,13vw,190px);max-width:190px;height:auto;object-fit:contain}
.site-footer{width:auto;margin:0;padding:32px 0;border-top:1px solid var(--line);background:var(--soft)}
.site-footer .footer-inner{width:min(1120px,calc(100% - 32px));max-width:none;margin:0 auto;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px}
.site-footer strong{color:var(--navy)}
.site-footer .footer-inner p{color:var(--muted);font-size:13px;margin:8px 0 0;line-height:1.7}
.site-footer nav{display:flex;flex-wrap:wrap;gap:12px;align-content:start;padding:0;margin:0;background:none;border:0}
.site-footer .footer-logo-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.site-footer .footer-logo-right{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
.site-footer .footer-logo-link{display:inline-flex;align-items:center;min-width:0}
.site-footer .footer-logo-link img{display:block;height:auto;object-fit:contain}
.site-footer .footer-logo-link-main img{width:clamp(160px,22vw,240px);max-width:240px}
.site-footer .footer-logo-link-sister img{width:clamp(130px,18vw,210px);max-width:210px}
.site-footer .footer-logo-link-gpt img{width:clamp(150px,20vw,220px);max-width:220px}
.site-footer .footer-site-triad{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:4px}
.site-footer .footer-site-triad a{display:grid;gap:6px;min-width:0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:14px;color:var(--ink)}
.site-footer .footer-site-triad strong{color:var(--navy);font-weight:800}
.site-footer .footer-site-triad span{color:var(--muted);font-size:13px;line-height:1.65}
@media (max-width:820px){.site-footer .footer-inner{grid-template-columns:1fr}.site-footer .footer-site-triad{grid-template-columns:1fr}.site-footer .footer-logo-row{flex-wrap:wrap}}
/* ↓ header-menu-fix-20260520.css からヘッダー・フッター向けのルールだけを抜き出したもの */
.site-header {overflow-x: clip;}
@media (min-width: 821px) {
.site-header .header-inner {width: min(1440px, calc(100% - 28px)) !important; max-width: none !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 8px 10px !important; padding: 10px 0 !important;}
.site-header .header-inner .brand {grid-column: 1 !important; min-width: 0 !important; margin: 0 !important; order: initial !important;}
.site-header .header-inner .global-nav {grid-column: 2 !important; display: flex !important; flex: initial !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; width: auto !important; max-width: none !important; min-width: 0 !important; overflow: visible !important; overflow-x: visible !important; white-space: normal !important; gap: 5px 10px !important; padding: 0 !important; border-top: 0 !important; font-size: 13.5px !important; order: initial !important;}
.site-header .global-nav a {white-space: nowrap !important; line-height: 1.35 !important;}
.site-header .header-inner .sister-brand-gpt {grid-column: 3 !important; margin: 0 !important; order: initial !important;}
.site-header .header-inner .sister-brand-chatgpt {grid-column: 4 !important; margin: 0 !important; order: initial !important;}
.site-header .brand-logo {width: clamp(170px, 16vw, 220px) !important; max-width: 220px !important; height: auto !important;}
.site-header .gptguide-brand-logo,
.site-header .sister-brand-logo {width: clamp(88px, 9vw, 124px) !important; max-width: 124px !important; height: auto !important;}
}
@media (min-width: 821px) and (max-width: 1180px) {
.site-header .header-inner {width: min(100%, calc(100% - 18px)) !important; gap: 6px 8px !important;}
.site-header .brand-logo {width: clamp(145px, 16vw, 175px) !important;}
.site-header .gptguide-brand-logo,
.site-header .sister-brand-logo {width: clamp(76px, 8.5vw, 98px) !important;}
.site-header .header-inner .global-nav {gap: 4px 8px !important; font-size: 12.5px !important;}
}
@media (max-width: 820px) {
.site-header .header-inner {width: min(100%, calc(100% - 18px)) !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; padding: 10px 0 !important;}
.site-header .header-inner .brand {flex: 1 1 100% !important; text-align: center !important; margin: 0 !important;}
.site-header .brand-logo {width: clamp(140px, 45vw, 180px) !important; max-width: 180px !important; height: auto !important;}
.site-header .gptguide-brand-logo,
.site-header .sister-brand-logo {width: clamp(82px, 26vw, 112px) !important; max-width: 112px !important; height: auto !important;}
.site-header .header-inner .global-nav {flex: 1 1 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; overflow-x: visible !important; white-space: normal !important; padding: 2px 0 0 !important; order: 4 !important;}
.site-header .global-nav a {min-width: 0 !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: 12.5px !important; line-height: 1.35 !important;}
}
@media (max-width: 520px) {
.site-header .header-inner .global-nav {grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
.site-header .gptguide-brand-logo,
.site-header .sister-brand-logo {width: clamp(78px, 25vw, 104px) !important;}
}
.site-footer .footer-logo-row {display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; max-width: 1180px !important; width: min(100%, calc(100% - 28px)) !important; margin: 0 auto 18px !important;}
.site-footer .footer-logo-right {display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; min-width: 0 !important;}
.site-footer .footer-logo-link {display: inline-flex !important; align-items: center !important; max-width: max-content !important; min-width: 0 !important;}
.site-footer .footer-logo-link img {display: block !important; height: auto !important; max-width: 100% !important;}
.site-footer .footer-logo-link-main img {width: clamp(170px, 20vw, 240px) !important; max-width: 240px !important;}
.site-footer .footer-logo-link-gpt img,
.site-footer .footer-logo-link-sister img {width: clamp(100px, 13vw, 160px) !important; max-width: 160px !important;}
@media (max-width: 700px) {
.site-footer .footer-logo-row {flex-direction: column !important; justify-content: center !important; gap: 12px !important;}
.site-footer .footer-logo-right {flex-wrap: wrap !important; justify-content: center !important;}
.site-footer .footer-logo-link-main img {width: clamp(150px, 48vw, 190px) !important;}
.site-footer .footer-logo-link-gpt img,
.site-footer .footer-logo-link-sister img {width: clamp(96px, 32vw, 132px) !important;}
}