:root {
  --cyan: #08b8c7;
  --ink: #292b2d;
  --muted: #818589;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background: #c6cdd2;
  font-family: "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
}

.background-image {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #8c969e url("./assets/background.png") center center / cover no-repeat;
}

.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal-panel, .js .reveal-shapes { transform: none; }
.js.ui-visible .reveal {
  opacity: 1;
  transform: none;
  transition: opacity 850ms ease, transform 850ms ease;
}
.js.ui-visible .reveal-header { transition-delay: 0ms; }
.js.ui-visible .reveal-shapes { transition-delay: 180ms; }
.js.ui-visible .reveal-panel { transition-delay: 300ms; }
.js.ui-visible .reveal-content { transition-delay: 560ms; }

.site-header {
  position: relative;
  z-index: 5;
  height: 91px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px clamp(22px, 3.5vw, 58px);
  background: rgba(247, 248, 249, .88);
  border-bottom: 1px solid rgba(84, 91, 99, .22);
}
.brand {
  position: relative;
  display: block;
  flex: 0 1 auto;
  width: min(43vw, 500px);
  min-width: 0;
  height: 74px;
  overflow: hidden;
  text-decoration: none;
}
.brand-image {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  transform: translateY(-50%);
}

.nav { display: flex; align-items: stretch; align-self: stretch; gap: 0; }
.nav-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: clamp(80px, 8.7vw, 145px);
  padding: 0 16px;
  color: #54585c;
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: clamp(16px, 1.45vw, 25px);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .025em;
}
.nav-item + .nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  height: 18px;
  width: 1px;
  background: rgba(77, 82, 88, .28);
}
.nav-item.is-active { color: #202124; }
.nav-item.is-active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 50%;
  height: 4px;
  background: var(--cyan);
}
.nav-item.is-unavailable { color: #8e949b; cursor: default; }
.nav-item small { font: 600 9px/1.3 Arial, sans-serif; letter-spacing: .13em; }
.nav-item[href]:hover { color: #009fad; }

.page-main { position: relative; z-index: 1; min-height: calc(100vh - 91px); min-height: calc(100dvh - 91px); overflow: hidden; }
.scene-shapes { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; transform: skewX(-22deg); }
.shape-one { top: -15%; left: 8%; width: 13%; height: 135%; background: rgba(246, 248, 249, .24); }
.shape-two { bottom: -20%; left: -10%; width: 17%; height: 58%; background: rgba(16, 22, 28, .34); }
.shape-three { top: -8%; right: 17%; width: 5%; height: 125%; background: rgba(245, 246, 247, .18); }

.text-panel {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: 67%;
  background: rgba(246, 247, 248, .94);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.content {
  position: relative;
  z-index: 2;
  width: 44%;
  margin-left: 51.8%;
  padding-top: clamp(50px, 8vh, 95px);
  padding-bottom: 46px;
}
.contest-title {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, .9vh, 9px);
  width: 100%;
  margin: 0;
  padding: 0;
}
.contest-title img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
.contest-title .subtitle-image { margin-top: clamp(0px, .6vh, 6px); }


.title-rule {
  position: relative;
  width: 100%;
  height: 25px;
  margin-top: 8px;
}
.title-rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: 14px;
  top: 16px;
  height: 1px;
  background: rgba(88, 94, 100, .5);
}
.title-rule::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 1px;
  width: 6px;
  height: 26px;
  background: var(--cyan);
  transform: skewX(-36deg);
}

.schedule { margin: clamp(22px, 3.4vh, 38px) 0 0; font-size: clamp(16px, 1.5vw, 24px); font-weight: 750; line-height: 1.6; }
.schedule > div { display: flex; gap: 0; }
.schedule dt { min-width: 5em; }
.schedule dt::after { content: "："; }
.schedule dd { margin: 0; }
.entry-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 420px);
  min-height: 72px;
  margin-top: 32px;
  padding: 12px 24px 12px 33px;
  background: var(--cyan);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
  color: #101b20;
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 850;
  text-decoration: none;
  transition: background .15s ease;
}
.entry-button[href]:hover { background: #5bd9e2; }
.entry-button:not([href]) { cursor: default; }
.content > .entry-button { margin-top: 14px; }
.entry-arrow { font-size: 34px; font-weight: 400; line-height: 1; }
.entry-note { margin: 9px 0 0; font-size: clamp(11px, .95vw, 14px); }

@media (max-width: 1080px) {
  .site-header { padding-inline: 22px; }
  .nav-item { min-width: 76px; padding-inline: 10px; }
  .brand { width: min(42vw, 440px); height: 67px; }
  .text-panel { width: 74%; }
  .content { width: 53%; margin-left: 43%; padding-top: 15vh; }

}
@media (max-width: 700px) {
  .site-header { height: auto; min-height: 116px; flex-wrap: wrap; gap: 0; padding: 8px 14px 0; }
  .brand { width: min(92vw, 430px); height: 65px; flex: 0 0 auto; }
  .nav { width: 100%; height: 45px; justify-content: space-around; }
  .nav-item { min-width: 0; flex: 1; font-size: 16px; padding: 0 4px; }
  .nav-item small { font-size: 7px; }
  .nav-item.is-active::after { height: 3px; bottom: 2px; }
  .page-main { min-height: calc(100vh - 116px); min-height: calc(100dvh - 116px); display: flex; align-items: end; }
  .background-image { background-position: 42% center; }
  .text-panel {
    inset: auto 0 0;
    width: 100%;
    height: min(72%, 580px);
    clip-path: polygon(0 11%, 100% 0, 100% 100%, 0 100%);
    background: rgba(246, 247, 248, .94);
  }
  .content { width: 100%; margin: 0; padding: 63px 22px 35px; }
  .contest-title { gap: 5px; }
  .contest-title .subtitle-image { margin-top: 2px; }
  .title-rule { height: 19px; margin-top: 5px; }
  .title-rule::before { top: 12px; }
  .title-rule::after { height: 19px; }
  .schedule { font-size: 15px; margin-top: 17px; }
  .entry-button { min-height: 59px; margin-top: 25px; max-width: 100%; font-size: 18px; }
  .entry-note { font-size: 11px; }
  .shape-one { left: 5%; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal, .js.ui-visible .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ENTRY タブから開く募集要項ページ。トップのビジュアルは変更しない。 */
.rules-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 420px);
  min-height: 78px;
  margin-top: 24px;
  padding: 13px 25px 13px 31px;
  color: #233038;
  border: 2px solid #53636b;
  background: rgba(247, 249, 250, .90);
  text-decoration: none;
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: 850;
  transition: background .15s ease;
}
.rules-link:hover { background: #e5f3f5; }
.rules-main {
  position: relative;
  z-index: 1;
  min-height: calc(100dvh - 91px);
  padding: clamp(30px, 5vw, 78px) clamp(16px, 5vw, 80px) 60px;
}
.rules-sheet {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: clamp(23px, 4.3vw, 66px);
  background: rgba(247, 248, 249, .96);
  border-top: 5px solid var(--cyan);
  box-shadow: 0 18px 75px rgba(13, 26, 37, .15);
}
.rules-eyebrow {
  color: #677079;
  font: 700 12px/1.4 Arial, sans-serif;
  letter-spacing: .18em;
}
.rules-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
}
.rules-headline h1 {
  margin: 0;
  color: #34383c;
  font: 900 clamp(46px, 6vw, 82px)/1 Impact, "Arial Narrow", Arial, sans-serif;
  letter-spacing: .01em;
}
.rules-headline h1 span {
  margin-left: 20px;
  font: 800 clamp(19px, 2vw, 28px)/1.3 "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing: 0;
}
.rules-number { white-space: nowrap; font: 700 11px Arial, sans-serif; letter-spacing: .15em; color: #8d979d; }
.rules-title-rule { height: 1px; margin-top: 24px; background: #a8b2b7; position: relative; }
.rules-title-rule:after { content:""; position:absolute; right:8px; bottom:0; height:22px; width:6px; transform:skewX(-35deg); background: var(--cyan); }
.rules-status { margin: 24px 0 0; padding: 12px 15px; background: #e8edf0; border-left: 3px solid #8999a3; color: #465159; font-size: 13px; line-height: 1.65; }
.rules-grid { display: block; margin-top: 24px; }
.rules-section { min-width: 0; padding: 25px 2px 27px; border-bottom: 1px solid #cbd1d5; }
.rules-section h2 { display:flex; gap:14px; align-items:baseline; margin:0 0 15px; font-size: 20px; font-weight: 850; }
.rules-index { color: #09a8b6; font: 900 15px Arial, sans-serif; letter-spacing: .04em; }
.rules-section p, .rules-section li { margin: 0 0 7px; font-size: 15px; line-height: 1.8; }
.rules-section ul { margin:0; padding-left: 1.2em; }
.rules-section .rules-strong { font-size: 20px; font-weight: 800; }
.rules-section .rules-subtext { color: #666e75; font-size: 12px; }
.rules-submit { display:flex; align-items:center; justify-content:space-between; gap:25px; padding: 32px 0 12px; }
.rules-submit strong { font: 900 25px Impact, "Arial Narrow", Arial, sans-serif; letter-spacing: .045em; }
.rules-submit p { margin:8px 0 0; color:#60686d; font-size:13px; }
.rules-submit-button { margin-top:0; min-width:280px; width:auto; }
.back-link { display:inline-block; margin-top:32px; color:#50585e; text-decoration:none; font-size:13px; border-bottom:1px solid #9eabb1; }
.back-link:hover { color:#009cab; }
@media (max-width: 700px) {
  .rules-main { min-height:calc(100dvh - 116px); padding: 23px 11px 36px; }
  .rules-sheet { padding: 25px 21px 28px; }
  .rules-headline { align-items:flex-start; }
  .rules-headline h1 span { display:block; margin:8px 0 0; }
  .rules-number { display:none; }
  .rules-grid { grid-template-columns:1fr; margin-top:12px; }
  .rules-section { padding:20px 0 23px; }
  .rules-section h2 { font-size:18px; }
  .rules-submit { display:block; }
  .rules-submit-button { width:100%; margin-top:17px; min-width:0; }
  .rules-status { font-size:12px; }
}

/* 2026年の募集・審査・結果発表日程 */
.rules-dates { margin: 0; display: grid; gap: 10px; }
.rules-dates > div { display: flex; align-items: baseline; gap: 10px; }
.rules-dates dt { color: #626b72; font-size: 13px; font-weight: 700; min-width: 5.2em; }
.rules-dates dd { margin: 0; color: #292b2d; font-size: clamp(15px, 1.35vw, 19px); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media(max-width: 440px) { .rules-dates dd { font-size: 14px; } .schedule dt { min-width: 4.8em; } .schedule { font-size: 14px; } }

/* 2026年 募集要項：1カラム、添付告知画像の応募規定を全文掲載 */
.requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: conditions;
}
.requirements-list > li {
  position: relative;
  padding-left: 2.3em;
  margin: 0 0 16px;
  counter-increment: conditions;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.85;
}
.requirements-list > li::before {
  content: counter(conditions, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .18em;
  padding-bottom: 2px;
  min-width: 1.75em;
  border-bottom: 2px solid var(--cyan);
  color: #087f8a;
  font: 800 14px/1.4 Arial, sans-serif;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.requirements-list ul { padding: 5px 0 0 1.25em; margin: 0; list-style: square; }
.requirements-list ul li { margin-bottom: 3px; font-size: inherit; line-height: 1.7; }
.prize-item { padding: 5px 0 15px; }
.prize-item + .prize-item { padding-top: 14px; border-top: 1px solid #d9dfe2; }
.prize-item h3 {
  position: relative;
  margin: 0 0 7px;
  padding-left: 22px;
  font-size: clamp(17px, 1.6vw, 22px);
}
.prize-item h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 8px;
  height: 8px;
  background: var(--cyan);
}
.prize-item p { padding-left: 22px; }
.organizer-list { display: grid; gap: 8px; margin: 0; }
.organizer-list div { display: flex; align-items: baseline; gap: 14px; }
.organizer-list dt { min-width: 3em; font-weight: 800; }
.organizer-list dd { margin: 0; }
@media(max-width: 700px) {
  .rules-link { width: 100%; min-height: 66px; margin-top: 18px; padding: 12px 20px; font-size: 20px; }
  .content > .entry-button { margin-top: 12px; }
  .requirements-list > li { padding-left: 2em; font-size: 14px; }
}

/* 対象3Dモデル一覧 */
.models-intro{margin:25px 0 20px;color:#505a61;font-size:14px;line-height:1.9}
.models-meta{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 0 18px;color:#68727a;font:700 12px Arial,sans-serif;letter-spacing:.08em}
.models-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.model-card{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;background:#fff;border:1px solid #d5dde0;transition:transform .2s,border-color .2s}
.model-card:hover{transform:translateY(-3px);border-color:var(--cyan)}
.model-image{aspect-ratio:4/5;background:#e4eaed;overflow:hidden}
.model-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.model-card:hover .model-image img{transform:scale(1.035)}
.model-name{font-size:14px;line-height:1.65;padding:13px 13px 5px;overflow-wrap:anywhere}
.model-link{margin-top:auto;padding:8px 13px 15px;color:#008e9b;font:700 12px Arial,sans-serif}
.models-empty{margin:25px 0;padding:35px 15px;background:#e9eef0;color:#59666d;font-size:14px;text-align:center;line-height:1.8}
@media(max-width:700px){.models-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.model-name{font-size:12px;padding:10px 9px 4px}.model-link{padding:7px 9px 12px;font-size:11px}}
