@charset "EUC-JP";

:root {
  --navy:#082978;
  --blue:#0d56d8;
  --cyan:#00aeea;
  --pink:#f51e57;
  --red:#f0183f;
  --purple:#7148e8;
  --green:#118c78;
  --orange:#ff8a00;
  --text:#15213a;
  --muted:#65718a;
  --line:#d9e4ff;
  --bg:#f6f9ff;
  --card:#ffffff;
  --shadow:0 10px 28px rgba(0,36,120,.10);
  --radius:18px;
  --max:1180px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:
    "Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",
    "Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fff 0%,#f8fbff 65%,#eef4ff 100%);
  line-height:1.7;
}

a { color:inherit; }
img { max-width:100%; display:block; }

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e6ebf6;
  backdrop-filter:blur(10px);
}
.nav-wrap {
  max-width:var(--max);
  margin:auto;
  min-height:86px;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:24px;
}
.brand {
  min-width:285px;
  text-decoration:none;
  color:var(--navy);
  font-weight:900;
  line-height:1.35;
}
.brand small {
  display:block;
  font-size:.76rem;
  letter-spacing:.02em;
}
.brand strong {
  display:block;
  margin-top:4px;
  font-size:1.05rem;
}

.nav-links {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1;
}
.nav-links a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:7px 12px;
  text-decoration:none;
  font-weight:800;
  color:#12317f;
  border-radius:11px;
  transition:.18s ease;
  white-space:nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  background:#edf3ff;
  color:var(--blue);
  transform:translateY(-1px);
}
.free-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:100px;
  min-height:44px;
  padding:8px 16px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#fb174e,#ff3a70);
  font-weight:900;
  box-shadow:0 7px 16px rgba(245,30,87,.22);
}






main {
  max-width:var(--max);
  margin:0 auto;
  padding:34px 20px 50px;
}

.section-title {
  margin:0 0 18px;
  color:var(--navy);
  font-size:clamp(1.45rem,2vw,2rem);
  font-weight:900;
}

.card-grid {
  display:grid;
  gap:18px;
}
.card-grid.top {
  grid-template-columns:1fr 1fr 1.25fr;
}
.card-grid.bottom {
  grid-template-columns:1.05fr 1.05fr .9fr;
  margin-top:18px;
}

.info-card {
  --accent:var(--blue);
  background:var(--card);
  border:2px solid color-mix(in srgb, var(--accent) 78%, white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.info-card .card-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  color:var(--accent);
  font-weight:900;
  font-size:1.22rem;
  border-bottom:1px solid #ebeff8;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%, white),#fff 60%);
}

.info-card .card-head-g {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  color:var(--accent);
  font-weight:900;
  font-size:1.22rem;
  border-bottom:1px solid #006400;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%, white),#fff 60%);
}

.info-card .card-head-p {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  color:var(--accent);
  font-weight:900;
  font-size:1.22rem;
  border-bottom:1px solid #4B0082;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%, white),#fff 60%);
}

.icon {
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-size:1.15rem;
  line-height:1;
  box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 24%, transparent);
}
.card-body {
  padding:18px 18px 20px;
}
.card-body p:first-child { margin-top:0; }
.card-body p:last-child { margin-bottom:0; }
.card-body strong { font-weight:900; }
.card-body .lead {
  font-size:1.02rem;
  font-weight:800;
}
.card-body .note {
  color:var(--muted);
  font-size:.90rem;
}

.entry { --accent:var(--pink); }
.workshop { --accent:var(--green); }
.eligibility { --accent:var(--blue); }
.schedule { --accent:#800000; }
.judging { --accent:var(--purple); }
.contact { --accent:var(--orange); }

.timeline {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  align-items:start;
  margin-top:6px;
}
.step {
  position:relative;
  text-align:center;
  padding:8px;
}
.step:not(:last-child)::after {
  content:"";
  position:absolute;
  top:27px;
  left:calc(50% + 28px);
  right:calc(-50% + 28px);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#2f6fff,#7852e8);
}
.step-num {
  width:38px;
  height:38px;
  margin:0 auto 8px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-weight:900;
}
.step strong {
  display:block;
  color:#153d9e;
}
.step:last-child strong { color:var(--pink); }

.criteria {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.criterion {
  padding:11px 12px;
  border-radius:12px;
  background:#f8f6ff;
  border:1px solid #ded5ff;
}
.criterion b {
  display:block;
  color:#5533bd;
}
.criterion span {
  font-weight:900;
  font-size:1.15rem;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:9px 17px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  border:0;
  cursor:pointer;
}

.button.primary {
  background:linear-gradient(135deg,#0d56d8,#103b9f);
  color:#fff;
  box-shadow:0 7px 16px rgba(13,86,216,.2);
}

.button.pink {
  background:linear-gradient(135deg,#ff1585,#C71585);
  color:#fff;
  box-shadow:0 7px 16px rgba(13,86,216,.2);
}
.button.green {
  background:linear-gradient(135deg,#008800,#006400);
  color:#fff;
  box-shadow:0 7px 16px rgba(13,86,216,.2);
}
.button.purple {
  background:linear-gradient(135deg,#9932CC,#4B0082);
  color:#fff;
  box-shadow:0 7px 16px rgba(13,86,216,.2);
}
.button.red {
  background:linear-gradient(135deg,#A52A2A,#800000);
  color:#fff;
  box-shadow:0 7px 16px rgba(13,86,216,.2);
}

.button.orange {
  background:linear-gradient(135deg,#ff9d13,#ff7a00);
  color:#fff;
}

.button:hover { transform:translateY(-1px); }

.cta-row {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.page-hero {
  background:
    radial-gradient(circle at 80% 20%,rgba(0,222,255,.32),transparent 28%),
    linear-gradient(135deg,#082978,#0c5fd9 55%,#6d45e8);
  color:#fff;
  padding:54px 20px;
}
.page-hero .inner {
  max-width:var(--max);
  margin:auto;
}
.page-hero h1 {
  margin:0 0 8px;
  font-size:clamp(2rem,4vw,3.4rem);
}
.page-hero p {
  max-width:760px;
  margin:0;
  font-size:1.05rem;
}

.page-hero3 {
  background:
    radial-gradient(circle at 80% 20%,rgba(0,222,255,.32),transparent 28%),
    linear-gradient(135deg,#800000,55%,#000080);
  color:#fff;
  padding:54px 20px;
}
.page-hero3 .inner {
  max-width:var(--max);
  margin:auto;
}
.page-hero3 h1 {
  margin:0 0 8px;
  font-size:clamp(2rem,4vw,3.4rem);
}
.page-hero3 p {
  max-width:760px;
  margin:0;
  font-size:1.05rem;
}

.page-hero2 {
  background:
    radial-gradient(circle at 80% 20%,rgba(0,222,255,.32),transparent 28%),
    linear-gradient(135deg,#006400,55%,#000080);
  color:#fff;
  padding:54px 20px;
}
.page-hero2 .inner {
  max-width:var(--max);
  margin:auto;
}
.page-hero2 h1 {
  margin:0 0 8px;
  font-size:clamp(2rem,4vw,3.4rem);
}
.page-hero2 p {
  max-width:760px;
  margin:0;
  font-size:1.05rem;
}

.content-panel {
  background:#fff;
  border:1px solid #dfe8fb;
  border-radius:18px;
  padding:24px;
  box-shadow:var(--shadow);
}
.content-panel + .content-panel { margin-top:18px; }

.form-grid {
  display:grid;
  gap:14px;
  max-width:680px;
}
label { font-weight:800; color:#22356f; }
input, textarea {
  width:100%;
  margin-top:5px;
  border:1px solid #cbd6ed;
  border-radius:10px;
  padding:11px 12px;
  font:inherit;
  background:#fff;
}
textarea { min-height:140px; resize:vertical; }

.site-footer {
  color:#fff;
  background:
    linear-gradient(180deg,#07318f,#061d5e);
  padding:25px 20px;
  border-top:4px solid #1a71ff;
}
.footer-inner {
  max-width:var(--max);
  margin:auto;
}
.org-row {
  display:grid;
  grid-template-columns:74px 1fr;
  gap:12px;
  align-items:start;
  margin:7px 0;
}
.org-label {
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  text-align:center;
  padding:3px 8px;
  font-weight:900;
}
.org-text {
  line-height:1.75;
  font-weight:700;
}

@media (max-width:980px) {
  .nav-wrap {
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .brand { min-width:0; flex:1 1 280px; }
  .nav-links {
    order:3;
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:4px;
  }
  .card-grid.top,
  .card-grid.bottom {
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:680px) {
  .site-header { position:static; }
  .nav-wrap { padding:10px 12px; }
  .brand strong { font-size:.96rem; }
  .free-badge { min-width:auto; padding:7px 12px; font-size:.90rem; }
  .nav-links a { font-size:.90rem; padding:6px 10px; }
  main { padding:22px 12px 34px; }
  .card-grid.top,
  .card-grid.bottom {
    grid-template-columns:1fr;
  }
  
  .criteria { grid-template-columns:1fr; }
  .org-row { grid-template-columns:62px 1fr; }
  .org-text { font-size:.88rem; }
}


/* =========================================================
   HERO IMAGE
   ブラウザ幅に関係なく、画像全体を必ず表示する。
   高さ固定・max-height・cover・overflow:hidden は使用しない。
   ========================================================= */
.hero {
  display:block;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0;
  padding:0;
  overflow:visible !important;
  background:#0757d8;
  line-height:0;
}

.hero picture {
  display:block;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0;
  padding:0;
  overflow:visible !important;
}

.hero img {
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0;
  padding:0;
  object-fit:contain !important;
  object-position:center top !important;
  aspect-ratio:auto !important;
}

/* 画面幅が広くても狭くても、同じ比率で縮尺するだけにする */
@media (min-width:1px) {
  .hero,
  .hero picture,
  .hero img {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .hero img {
    width:100% !important;
    object-fit:contain !important;
  }
}


.home-bottom-right-stack {
  min-width:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:14px;
}

/* Public AI tool guide */
.ai-guide-home {
  --accent:#0d56d8;
  position:relative;
  overflow:hidden;
  border-color:#7ab9ff;
  background:
    radial-gradient(circle at 88% 12%,rgba(113,72,232,.14),transparent 9rem),
    radial-gradient(circle at 10% 90%,rgba(0,174,234,.12),transparent 10rem),
    linear-gradient(145deg,#f3f9ff 0%,#fff 58%,#f8f5ff 100%);
  box-shadow:0 13px 30px rgba(13,86,216,.15);
}

.ai-guide-home::before {
  content:"PUBLIC GUIDE";
  position:absolute;
  right:-30px;
  top:20px;
  transform:rotate(36deg);
  width:126px;
  padding:3px 0;
  color:#fff;
  background:linear-gradient(90deg,#00aeea,#7148e8);
  text-align:center;
  font-size:.58rem;
  font-weight:950;
  letter-spacing:.08em;
  pointer-events:none;
}

.ai-guide-home .card-head {
  padding-right:58px;
  color:#154ba6;
  background:linear-gradient(90deg,#eaf4ff,#fff 68%);
}

.ai-guide-home-icon {
  background:linear-gradient(135deg,#00aeea,#0d56d8 55%,#7148e8);
  font-size:.8rem;
  font-weight:950;
  letter-spacing:.02em;
}

.ai-guide-public-badge {
  display:inline-flex;
  align-items:center;
  margin-left:auto;
  padding:3px 7px;
  border-radius:999px;
  color:#5b3baa;
  background:#eee8ff;
  font-size:.64rem;
  font-weight:900;
  white-space:nowrap;
}

.ai-guide-home .card-body {
  padding:15px 17px 17px;
}

.ai-guide-home .card-body .lead {
  margin-bottom:7px;
  color:#173e87;
  font-size:.96rem;
}

.ai-guide-home .card-body > p:not(.lead) {
  margin:0;
  color:#566a87;
  font-size:.82rem;
  line-height:1.68;
}

.ai-guide-home-points {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}

.ai-guide-home-points span {
  display:inline-flex;
  padding:4px 7px;
  border:1px solid #cbdcff;
  border-radius:999px;
  color:#315b9e;
  background:rgba(255,255,255,.9);
  font-size:.68rem;
  font-weight:850;
}

.button.ai-guide-button {
  width:100%;
  min-height:42px;
  color:#fff;
  background:linear-gradient(135deg,#00aeea,#0d56d8 58%,#7148e8);
  box-shadow:0 8px 18px rgba(13,86,216,.22);
}

/* Contact: placed under the guide and reduced in height */
.contact-compact {
  --accent:var(--orange);
}

.contact-compact .card-head {
  padding:9px 13px;
  font-size:.98rem;
}

.contact-compact .card-head .icon {
  width:30px;
  height:30px;
  border-radius:9px;
  font-size:.9rem;
}

.contact-compact .card-body {
  padding:10px 12px 12px;
}

.contact-compact-row {
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
}

.contact-compact .button.orange {
  width:100%;
  min-height:36px;
  padding:6px 10px;
  border-radius:9px;
  font-size:.78rem;
}

.contact-compact p {
  margin:0;
  color:#68738a;
  font-size:.69rem;
  line-height:1.45;
  text-align:center;
}

.contact-compact p a {
  color:#bd6100;
}

@media (max-width:980px) {
  .card-grid.bottom > .home-bottom-right-stack {
    grid-column:1 / -1;
    grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);
    grid-template-rows:auto;
  }

  .contact-compact {
    align-self:stretch;
  }

  .contact-compact .card-body {
    display:flex;
    align-items:center;
    height:calc(100% - 50px);
  }

  .contact-compact-row {
    width:100%;
  }
}

@media (max-width:680px) {
  .card-grid.bottom > .home-bottom-right-stack {
    grid-column:auto;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:12px;
  }

  .ai-guide-home::before {
    display:none;
  }

  .ai-guide-home .card-head {
    padding-right:14px;
  }

  .contact-compact .card-body {
    height:auto;
  }
}

/* =========================================================
   HOME consolidated v3
   ユーザー追記済み styles.css を正本として、
   共通ヘッダー化とヒーロー画像縮小に必要な部分だけ追記
   ========================================================= */

/* 共通ヘッダーは site-ui.css 側で描画するため、
   旧 .site-header / .nav-wrap / .nav-links は残してあります。
   旧REQ等を一時的に開いた場合の互換用です。 */

/* メインビジュアルは全幅ではなく、本文と同程度の幅にする */
.hero.home-hero-contained {
  width:min(1180px, calc(100% - 44px)) !important;
  max-width:1180px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:22px auto 0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:20px;
  background:#0757d8;
  box-shadow:0 14px 32px rgba(8,41,120,.14);
  line-height:0;
}

.hero.home-hero-contained img {
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:20px;
  object-fit:contain !important;
  object-position:center top !important;
}

/* 新共通ヘッダーがstickyなので、HOMEでは旧ヘッダー用設定と競合させない */
body .contest-header-v2 {
  font-family:
    "Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",
    "Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

@media (max-width:760px) {
  .hero.home-hero-contained {
    width:calc(100% - 20px) !important;
    margin-top:12px !important;
    border-radius:14px;
  }

  .hero.home-hero-contained img {
    border-radius:14px;
  }
}

/* =========================================================
   HOME readability v4
   本文・補足説明を黒にして読みやすくする
   ========================================================= */

body {
  color:#111;
}

.card-body,
.card-body p,
.card-body .lead,
.card-body .note,
.timeline .step span,
.timeline .step strong,
.contact-compact p,
.ai-guide-home .card-body p,
.ai-guide-home .card-body > p:not(.lead) {
  color:#111 !important;
}

.card-body a:not(.button) {
  color:#003eaa;
  font-weight:850;
}

.org-text {
  color:#fff;
}