:root {
  --navy: #073d86;
  --blue: #069fd8;
  --aqua: #16b8c9;
  --purple: #563faa;
  --pink: #9b168e;
  --yellow: #ffec00;
  --pale: #eaf9ff;
  --ink: #163d70;
  --max: 1180px
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink);
  background: #eefbff
}
a {
  color: inherit;
  text-decoration: none
}
img {
  max-width: 100%;
  display: block
}
.header {
  height: 86px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 0 max(28px, calc((100% - 1420px)/2));
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px #00365a12
}
.brand {
  min-width: 260px;
  color: #063b78
}
.brand b {
  display: block;
  font-family: serif;
  font-size: 26px
}
.brand small {
  font-size: 9px;
  letter-spacing: 2px
}
.header nav {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-left: auto
}
.header nav a {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap
}
.header nav small {
  display: block;
  font-size: 8px;
  letter-spacing: 1px;
  color: #6792b6;
  margin-top: 5px
}
.sns {
  display: flex;
  gap: 15px;
  font-size: 27px
}
.header-cta, .footer-cta {
  background: #0870bd;
  color: #fff;
  padding: 16px 25px;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap
}
.menu {
  display: none;
  border: 0;
  background: none;
  font-size: 28px
}
.hero {
  min-height: 690px;
  background: linear-gradient(90deg, #00295c55, #0084c333), url('../images/hero-temp.webp') center/cover;
  position: relative;
  color: #fff;
  padding: 55px max(7vw, 40px);
  display: flex;
  align-items: center
}
.hero-copy {
  width: min(720px, 70%);
  text-align: center;
  margin: auto
}
.eyebrow {
  letter-spacing: 4px
}
.hero h1 {
  font-family: serif;
  color: #fff58d;
  font-size: clamp(70px, 8vw, 126px);
  line-height: .76;
  margin: 25px 0 50px;
  text-shadow: 0 3px 8px #003c6d66
}
.hero h1 span {
  font-size: 1.05em
}
.dates {
  display: flex;
  justify-content: center;
  gap: 30px;
  text-align: left
}
.dates > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  padding: 0 25px;
  border-right: 1px solid #fff
}
.dates > div:last-child {
  border: 0
}
.dates i {
  grid-row: 1/3;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  font-style: normal
}
.dates b {
  font-size: 23px
}
.dates span {
  font-weight: 700
}
.contest-bubble {
  position: absolute;
  right: 6%;
  top: 25%;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: #00a9d5c9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center
}
.contest-bubble strong {
  font-size: 25px
}
.contest-bubble a {
  background: #fff;
  color: #07558f;
  border-radius: 999px;
  padding: 11px 28px;
  margin-top: 15px;
  font-weight: 700
}
.credits {
  display: flex;
  flex-direction: column;
  gap: 12px
}
.credits > div {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap
}
.credits b {
  min-width: 60px
}
.top-credits {
  background: #58b8dd;
  color: #fff;
  padding: 22px max(12vw, 40px)
}
.logo {
  background: #fff;
  color: #173f77;
  padding: 10px 18px;
  min-width: 130px;
  text-align: center;
  font-weight: 800
}
.water, .news, .information {
  background: linear-gradient(#e5faffdd, #effbffed), radial-gradient(circle at 50% 0, #fff 0, #b9ebff 65%);
  position: relative
}
.about {
  padding: 70px 25px;
  text-align: center
}
.section-title {
  text-align: center
}
.section-title small, .visual-title small {
  letter-spacing: 4px;
  color: #19a6df
}
.section-title h2 {
  font-family: serif;
  font-size: 38px;
  margin: 8px
}
.about-copy {
  max-width: 1100px;
  margin: 35px auto 20px;
  font-weight: 700;
  line-height: 2.15
}
.about-meta {
  line-height: 2
}
.outline-btn {
  display: inline-block;
  border: 2px solid #1e78b9;
  background: #fff;
  border-radius: 999px;
  padding: 12px 32px;
  font-weight: 800
}
.greeting {
  max-width: 1180px;
  margin: 40px auto 55px;
  background: #fff;
  border: 2px solid #9a9364;
  border-radius: 40px;
  padding: 45px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 55px
}
.message {
  text-align: center
}
.message h2 {
  font-family: serif;
  color: #8c8563
}
.message p {
  font-family: serif;
  font-size: 20px;
  line-height: 2;
  color: #827c5f
}
.director {
  display: flex;
  gap: 18px;
  align-items: flex-start
}
.director-photo {
  width: 120px;
  aspect-ratio: 4/5;
  background: #e6edf2;
  display: grid;
  place-items: center;
  text-align: center;
  flex: none;
  color: #7990a0
}
.director h3 {
  font-size: 24px;
  margin: 4px 0;
  color: #514b96
}
.director p {
  font-size: 13px;
  line-height: 1.7
}
.ocean-page {
  background: #eafaff;
  position: relative;
  padding-bottom: 70px
}
.visual-title {
  height: 280px;
  background: linear-gradient(#004d8c55, #003f7a99), url('../images/hero-temp.webp') center/cover;
  color: #fff;
  text-align: center;
  padding: 55px 20px
}
.visual-title small {
  color: #fff
}
.visual-title h2 {
  font-family: serif;
  font-size: 55px;
  margin: 8px
}
.visual-title p {
  font-size: 18px
}
.film-list, .event-stack {
  max-width: 1180px;
  margin: -25px auto 0;
  padding: 0 20px;
  position: relative
}
.film {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 7px 25px #0076a414
}
.film.wide {
  display: grid;
  grid-template-columns: 42% 58%;
  margin-bottom: 28px;
  padding-top: 42px
}
.film.wide img {
  width: 100%;
  height: 290px;
  object-fit: cover
}
.film-text {
  padding: 18px 24px
}
.tag {
  position: absolute;
  top: 0;
  left: 0;
  background: #32a8df;
  color: #fff;
  padding: 9px 25px;
  font-size: 20px;
  font-weight: 800;
  min-width: 230px
}
.tag.yellow {
  background: var(--yellow);
  color: var(--ink);
}
.tag.green {
  background: #14b9a7
}
.schedule {
  font-size: 21px;
  font-weight: 900;
  color: var(--ink);
}
.schedule i {
  font-style: normal;
  background: var(--pink);
  color: #fff;
  border-radius: 50%;
  padding: 8px;
  margin-left: 10px
}
.schedule i.b {
  background: #064b99
}
.film h3 {
  font-size: 25px;
  color: #0860ae;
  margin: 8px 0
}
.film h4 {
  font-size: 18px;
  margin: 4px 0
}
.film p {
  line-height: 1.7
}
.apply {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 18px auto 0;
  border: 2px solid var(--pink);
  border-radius: 999px;
  padding: 10px 24px;
  color: var(--pink);
  background: #fff;
  font-weight: 800
}
.bbtn {
  border-color: #0752a0;
  color: #0752a0
}
.doc-heading {
  font-family: serif;
  font-size: 25px;
  color: #074b90;
  margin: 45px 0 18px
}
.film-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}
.card {
  padding-top: 37px
}
.card img {
  height: 190px;
  width: 100%;
  object-fit: cover
}
.card h3 {
  font-size: 19px
}
.card .film-text {
  padding: 15px
}
.card .apply {
  font-size: 12px
}
.events {
  padding-top: 0
}
.event-title {
  height: 310px
}
.event-stack {
  display: grid;
  gap: 26px
}
.event-card {
  border-radius: 12px;
  padding: 30px;
  position: relative;
  overflow: hidden
}
.workshop {
  background: linear-gradient(115deg, #dff28c, #5bd4d7);
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 25px;
  padding-bottom: 20px !important
}
.workshop h3 {
  font-size: 38px;
  color: #5143a2;
  margin: 12px 0
}
.workshop img {
  width: 100%;
  height: 270px;
  object-fit: cover
}
.event-card > .apply {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0
}
.talk {
  background: linear-gradient(120deg, #5145b1, #64c7e5);
  color: #fff;
  padding-bottom: 90px
}
.talk header h3 {
  font-size: 38px;
  margin: 5px 0
}
.talk header b {
  color: var(--yellow);
  font-size: 20px
}
.speakers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #d8efff;
  margin-top: 18px
}
.speakers > div {
  background: #fff;
  color: #0b4d8f;
  padding: 14px
}
.speakers img {
  width: 100%;
  height: 190px;
  object-fit: cover
}
.speakers h4 {
  font-size: 18px;
  margin: 8px 0
}
.speakers p {
  color: #263f57;
  line-height: 1.6
}
.kids {
  background: #0ab7c6;
  color: #fff;
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 25px;
  padding-bottom: 100px
}
.kids h3 {
  font-size: 32px;
  color: var(--yellow);
  margin: 8px 0
}
.kids img {
  height: 200px;
  object-fit: contain;
  margin-top: 20px
}
.award {
  background: #f4ffff;
  color: #087a99;
  padding: 25px;
  border-radius: 8px
}
.award h4 {
  font-size: 22px
}
.detail {
  border-color: #0a5ba6;
  color: #0a5ba6
}
.information {
  padding: 55px max(6vw, 30px)
}
.information > h2 {
  font-size: 36px;
  color: #14a6df;
  margin: 0 0 25px
}
.venues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px
}
.venues > div {
  display: flex;
  gap: 20px
}
.venues i {
  width: 90px;
  height: 90px;
  flex: none;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-style: normal;
  font-size: 38px;
  font-weight: 900;
  display: grid;
  place-items: center
}
.venues i.b {
  background: #064b99
}
.venues h3 {
  color: var(--pink);
  font-size: 23px;
  margin: 5px 0
}
.venues > div:last-child h3 {
  color: #064b99
}
.free {
  line-height: 2;
  color: #9b168e;
  font-size: 17px
}
.news {
  padding: 65px 20px
}
.news-inner {
  max-width: 1000px;
  margin: 25px auto;
  display: flex;
  gap: 60px;
  align-items: center
}
.news-inner > div {
  flex: 1
}
.news-inner p {
  border-bottom: 1px solid #a9cbdc;
  padding: 13px;
  margin: 0
}
.news time {
  display: inline-block;
  width: 130px
}
.footer {
  background: linear-gradient(#004a8aaa, #003d7be8), url('../images/hero-temp.webp') center/cover;
  color: #fff;
  padding: 45px max(5vw, 35px) 20px
}
.footer-top {
  display: flex;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid #ffffff88;
  padding-bottom: 25px
}
.brand.light {
  color: #fff
}
.footer nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-weight: 700
}
.footer .footer-cta {
  background: transparent;
  border: 1px solid #fff
}
.footer-body {
  padding: 25px 0
}
.footer-credits .logo {
  font-size: 13px
}
.footer-bottom {
  border-top: 1px solid #ffffff55;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 12px
}
@media(max-width:980px) {
  .header {
    height: 68px;
    padding: 0 18px
  }
  .brand {
    min-width: auto
  }
  .brand b {
    font-size: 20px
  }
  .header nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 15px 25px;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 8px 20px #0002
  }
  .header nav.open {
    display: flex
  }
  .header nav a {
    text-align: left;
    border-bottom: 1px solid #e4eef4;
    padding: 10px
  }
  .header nav small {
    display: inline;
    margin-left: 8px
  }
  .menu {
    display: block;
    margin-left: auto
  }
  .header > .sns {
    display: none
  }
  .header-cta {
    font-size: 12px;
    padding: 11px 15px
  }
  .hero {
    min-height: 620px;
    padding: 40px 20px
  }
  .hero-copy {
    width: 100%
  }
  .contest-bubble {
    width: 190px;
    height: 190px;
    right: 3%;
    top: 8%
  }
  .contest-bubble strong {
    font-size: 17px
  }
  .dates {
    margin-top: 230px
  }
  .greeting {
    margin: 25px 20px;
    grid-template-columns: 1fr
  }
  .film-list, .event-stack {
    padding: 0 16px
  }
  .footer nav {
    display: none
  }
  .footer-top {
    flex-wrap: wrap
  }
  .footer .sns {
    margin-left: auto
  }
  .footer-cta {
    width: 100%;
    text-align: center
  }
  .venues {
    gap: 25px
  }
}
@media(max-width:680px) {
  .header-cta {
    display: none
  }
  .hero {
    min-height: 720px;
    align-items: flex-start;
    background-position: 58% center
  }
  .hero-copy {
    padding-top: 70px
  }
  .hero h1 {
    font-size: 66px;
    margin: 15px 0
  }
  .contest-bubble {
    top: 25px;
    right: 12px;
    width: 145px;
    height: 145px
  }
  .contest-bubble small {
    font-size: 9px
  }
  .contest-bubble strong {
    font-size: 13px
  }
  .contest-bubble a {
    font-size: 10px;
    padding: 7px 12px
  }
  .dates {
    margin-top: 120px;
    display: grid;
    gap: 15px
  }
  .dates > div {
    border-right: 0;
    border-bottom: 1px solid #fff8;
    padding: 12px
  }
  .dates b {
    font-size: 18px
  }
  .top-credits {
    padding: 20px
  }
  .credits > div {
    align-items: flex-start
  }
  .credits b {
    width: 100%
  }
  .logo {
    min-width: 105px;
    padding: 8px 10px;
    font-size: 11px
  }
  .about {
    padding: 45px 20px
  }
  .section-title h2 {
    font-size: 29px
  }
  .about-copy {
    font-size: 14px;
    line-height: 1.9
  }
  .about-copy br {
    display: none
  }
  .greeting {
    padding: 28px 20px;
    border-radius: 25px;
    gap: 25px
  }
  .message p {
    font-size: 15px;
    line-height: 1.9
  }
  .director {
    flex-direction: column
  }
  .director-photo {
    width: 90px
  }
  .visual-title {
    height: 220px;
    padding-top: 45px
  }
  .visual-title h2 {
    font-size: 40px
  }
  .film-list {
    margin-top: -15px
  }
  .film.wide {
    display: block;
    padding-top: 38px
  }
  .film.wide img {
    height: 210px
  }
  .film-text {
    padding: 15px
  }
  .film h3 {
    font-size: 20px
  }
  .film-grid {
    grid-template-columns: 1fr
  }
  .card img {
    height: 220px
  }
  .doc-heading {
    font-size: 20px
  }
  .workshop, .kids {
    grid-template-columns: 1fr
  }
  .workshop h3, .talk header h3 {
    font-size: 27px
  }
  .workshop img {
    order: -1;
    height: 180px
  }
  .speakers {
    grid-template-columns: 1fr
  }
  .speakers > div {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 0 14px
  }
  .speakers img {
    grid-row: 1/4;
    width: 105px;
    height: 130px
  }
  .speakers h4, .speakers p {
    margin-top: 0
  }
  .kids img {
    width: 100%
  }
  .event-card {
    padding: 22px 18px 80px
  }
  .venues {
    grid-template-columns: 1fr
  }
  .venues i {
    width: 62px;
    height: 62px;
    font-size: 25px
  }
  .venues h3 {
    font-size: 18px
  }
  .free {
    font-size: 14px
  }
  .news-inner {
    display: block
  }
  .news-inner .outline-btn {
    margin-top: 25px
  }
  .news time {
    display: block;
    font-size: 12px
  }
  .footer {
    padding: 35px 20px 18px
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1fr auto
  }
  .footer .brand {
    grid-column: 1/2
  }
  .footer .sns {
    grid-column: 2
  }
  .footer-cta {
    grid-column: 1/3
  }
  .footer-body {
    font-size: 13px
  }
  .footer-credits > div {
    margin-top: 15px
  }
  .footer-bottom {
    display: block;
    line-height: 2
  }
  .footer-bottom span {
    display: block;
    margin-top: 8px
  }
}
/* 2026 supplied artwork */
body {
  background-image: url('../images/bg-umi.webp');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed
}
.hero {
  background-image: linear-gradient(90deg, #00295c33, #0084c31f), url('../images/top.webp');
  background-position: center;
  background-size: cover
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center
}
.hero-title-image {
  width: min(520px, 65vw);
  max-height: 480px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px #003d6d55)
}
.hero .eyebrow {
  margin: 10px 0 28px
}
.contest-bubble img {
  width: 105px;
  max-height: 105px;
  object-fit: contain;
  margin-bottom: 5px
}
.sns img {
  width: 27px;
  height: 27px;
  object-fit: contain
}
.partner-logo {
  height: 48px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  background: #fff;
  padding: 4px 8px
}
.partner-logo.expo {
  height: 50px
}
.mail-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 7px
}
.apply.image-ticket {
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  width: min(360px, 90%)
}
.apply.image-ticket img {
  width: 100%;
  height: auto
}
.film.card .apply.image-ticket {
  width: 95%
}
.venue-badge {
  width: 90px;
  height: 90px;
  object-fit: contain;
  flex: none
}
.map-link {
  display: inline-block;
  margin-top: 8px
}
.map-link img {
  width: 145px;
  height: auto
}
.information, .about, .news, .ocean-page {
  background-color: #eafaff;
  background-image: linear-gradient(#eafaffd9, #eafaffd9), url('../images/bg-umi.webp');
  background-size: cover;
  background-position: center
}
.footer {
  background-image: linear-gradient(#004a8aaa, #003d7be8), url('../images/top.webp');
  background-position: center;
  background-size: cover
}
@media(max-width:680px) {
  body {
    background-attachment: scroll
  }
  .hero {
    min-height: 680px;
    background-position: center
  }
  .hero-copy {
    padding-top: 45px
  }
  .hero-title-image {
    width: min(330px, 72vw);
    max-height: 330px
  }
  .hero .eyebrow {
    font-size: 10px;
    margin: 4px 0 12px
  }
  .contest-bubble img {
    width: 65px;
    max-height: 65px
  }
  .partner-logo {
    height: 38px;
    max-width: 140px
  }
  .venue-badge {
    width: 62px;
    height: 62px
  }
  .map-link img {
    width: 120px
  }
}
\n /* requested refinements 2026-09-23 */
.about {
  background-image: linear-gradient(rgba(234, 250, 255, .72), rgba(234, 250, 255, .72)), url('../images/bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat
}
.contest-bubble {
  background: transparent;
  width: 300px;
  height: auto;
  border-radius: 0;
  justify-content: flex-start
}
.contest-bubble img {
  width: 100%;
  max-height: none;
  margin: 0;
  object-fit: contain
}
.contest-bubble a {
  margin-top: 8px
}
.sns {
  align-items: center
}
.sns a {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1
}
.sns img {
  width: 27px;
  height: 27px
}
.x-icon {
  font-size: 27px
}
.dates > div {
  grid-template-columns: auto max-content
}
.dates b {
  white-space: nowrap
}
.dates b small {
  white-space: nowrap
}
.news-inner {
  display: block;
  max-width: 760px
}
.news-inner > div {
  width: 100%
}
.footer .sns {
  align-items: center
}
.footer .sns img {
  width: 27px;
  height: 27px
}
@media(max-width:980px) {
  .contest-bubble {
    width: 210px;
    height: auto
  }
}
@media(max-width:680px) {
  .contest-bubble {
    width: 145px;
    height: auto
  }
  .contest-bubble img {
    width: 100%;
    max-height: none
  }
  .dates > div {
    grid-template-columns: auto 1fr
  }
  .dates b {
    white-space: nowrap;
    font-size: 17px
  }
  .news-inner {
    max-width: 100%
  }
}
/* revisions 2026-09-24 */
.top-credits {
  min-height: auto;
  padding-top: 18px;
  padding-bottom: 18px
}
.schedule {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}
.schedule-venue {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  flex: none
}
.film-credit {
  font-size: 12px;
  font-weight: 700;
  color: #31516a;
  margin-top: 8px
}
.event-points {
  font-size: 17px;
  font-weight: 800
}
.event-note {
  font-size: 12px
}
.flyer-download {
  text-align: center;
  padding: 12px 20px 42px
}
.flyer-download a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 14px 30px;
  border: 2px solid #0752a0;
  border-radius: 999px;
  background: #fff;
  color: #0752a0;
  font-weight: 900;
  box-shadow: 0 4px 14px #00548c20
}
@media(max-width:680px) {
  .header {
    grid-template-columns: 1fr auto auto;
    gap: 8px
  }
  .header .brand {
    min-width: 0
  }
  .menu {
    margin-left: 0
  }
  .header > .sns {
    display: flex;
    gap: 5px
  }
  .header > .sns a {
    width: 26px;
    height: 26px
  }
  .header > .sns img {
    width: 23px;
    height: 23px
  }
  .header > .sns a:first-child {
    font-size: 22px
  }
  .header-cta {
    display: flex;
    font-size: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center
  }
  .header-cta:after {
    content: '券';
    font-size: 14px;
    font-weight: 900
  }
  .schedule-venue {
    width: 32px !important;
    height: 32px !important
  }
  .film-credit {
    font-size: 11px
  }
  .flyer-download {
    padding: 5px 16px 32px
  }
  .flyer-download a {
    width: 100%;
    min-width: 0
  }
  .footer-top {
    grid-template-columns: 1fr auto
  }
  .footer .sns {
    display: flex !important;
    gap: 7px
  }
  .footer .sns a {
    width: 30px;
    height: 30px
  }
  .footer .sns img {
    width: 25px;
    height: 25px
  }
  .footer-cta {
    display: block !important;
    font-size: 13px;
    width: auto;
    height: auto;
    padding: 12px 16px;
    border-radius: 999px;
    grid-column: 1/3
  }
  .footer-cta:after {
    content: none
  }
}
/* final refinements 2026-09-24 */
.about-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px
}
.about-actions .outline-btn {
  margin: 0
}
.flyer-btn {
  min-width: 300px
}
.speakers .speaker {
  background: #fff;
  color: #0b4d8f;
  padding: 14px
}
.speaker-copy h4 small {
  font-size: .8em
}
.speaker-role {
  font-weight: 700;
  color: #0b4d8f !important;
  line-height: 1.55 !important;
  margin-bottom: 0
}
@media(max-width:680px) {
  .header {
    display: flex;
    gap: 7px;
    padding: 0 12px
  }
  .header .brand {
    order: 1;
    flex: 1
  }
  .header > .sns {
    order: 2;
    flex: none
  }
  .header-cta {
    order: 3;
    display: flex !important;
    width: auto !important;
    min-width: 82px !important;
    height: 38px !important;
    padding: 0 13px !important;
    font-size: 0 !important;
    border-radius: 999px !important
  }
  .header-cta:after {
    content: '申し込み' !important;
    font-size: 12px !important;
    font-weight: 900
  }
  .menu {
    order: 4;
    margin-left: 0 !important;
    flex: none;
    font-size: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    position: relative
  }
  .menu:before, .menu:after, .menu {
    border-radius: 0
  }
  .menu:before {
    content: '☰';
    font-size: 30px;
    line-height: 38px;
    color: #073d86
  }
  .header nav {
    order: 5
  }
  .header > .sns {
    gap: 3px
  }
  .header > .sns a {
    width: 24px;
    height: 24px
  }
  .header > .sns img {
    width: 22px;
    height: 22px
  }
  .header > .sns a:first-child {
    font-size: 20px
  }
  .brand b {
    font-size: 17px
  }
  .brand small {
    font-size: 7px;
    letter-spacing: 1.2px
  }
  .about-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
  }
  .about-actions .outline-btn, .flyer-btn {
    width: 100%;
    min-width: 0
  }
  .speakers {
    display: block;
    background: transparent
  }
  .speakers .speaker {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    margin-bottom: 2px;
    padding: 14px
  }
  .speakers .speaker img {
    grid-row: auto;
    width: 120px;
    height: 150px;
    object-fit: cover
  }
  .speakers .speaker-copy {
    align-self: center
  }
  .speakers .speaker h4 {
    margin: 0 0 7px
  }
  .speakers .speaker p {
    margin: 0
  }
  .speakers .speaker-nina {
    grid-template-columns: 120px 1fr
  }
  .speakers .speaker-nina .speaker-copy {
    align-self: start
  }
  .speaker-role br {
    display: block
  }
}
@media(max-width:390px) {
  .header {
    padding: 0 8px;
    gap: 4px
  }
  .brand b {
    font-size: 15px
  }
  .brand small {
    font-size: 6px
  }
  .header-cta {
    min-width: 70px !important;
    padding: 0 9px !important
  }
  .header-cta:after {
    font-size: 11px !important
  }
  .menu {
    width: 34px
  }
  .header > .sns a {
    width: 21px;
    height: 21px
  }
  .header > .sns img {
    width: 20px;
    height: 20px
  }
}
/* layout polish 2026-09-24 v3 */
@media(min-width:681px) {
  /* show more of the upper part of top.webp on desktop */
  .hero {
    background-position: center 18%;
  }
  /* category ribbon + date/venue on one row */
  .film.wide {
    padding-top: 0;
    grid-template-rows: auto auto;
  }
  .film.wide .film-head {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .film.wide > img {
    grid-column: 1;
    grid-row: 2;
  }
  .film.wide > .film-text {
    grid-column: 2;
    grid-row: 2;
  }
  .film-head {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-height: 48px;
    background: #fff;
  }
  .film-head .tag {
    position: static;
    display: flex;
    align-items: center;
    min-width: 300px;
    padding: 10px 25px;
  }
  .film-head .schedule {
    margin-left: auto;
    padding: 6px 28px 6px 18px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .film.card {
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }
  .film.card .film-head {
    order: 0;
  }
  .film.card .film-head .tag {
    min-width: 0;
    flex: 1;
    padding: 8px 12px;
    font-size: 17px;
  }
  .film.card .film-head .schedule {
    padding: 5px 10px;
    font-size: 14px;
    gap: 5px;
  }
  .film.card .film-head .schedule-venue {
    width: 28px !important;
    height: 28px !important;
  }
}
/* specialist talk: remove the white cards and let the ocean gradient show through */
.talk {
  padding: 34px 38px 100px;
}
.talk .speakers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: transparent;
  margin-top: 24px;
}
.talk .speakers .speaker {
  background: transparent !important;
  color: #fff !important;
  padding: 0 24px;
  display: block;
}
.talk .speakers .speaker:first-child {
  padding-left: 0;
}
.talk .speakers .speaker:last-child {
  padding-right: 0;
}
.talk .speakers .speaker + .speaker {
  border-left: 1px solid rgba(255, 255, 255, .38);
}
.talk .speakers img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  margin: 0 0 15px;
}
.talk .speaker-nina img {
  object-position: center center;
}
.talk .speaker-simple:nth-child(2) img {
  object-position: center 40%;
}
.talk .speaker-simple:nth-child(3) img {
  object-position: center 28%;
}
.talk .speakers h4, .talk .speaker-copy h4 {
  color: #fff600 !important;
  font-size: 20px;
  margin: 0 0 9px;
  line-height: 1.45;
}
.talk .speaker-copy h4 small {
  color: #fff600 !important;
}
.talk .speakers p, .talk .speaker-role {
  color: #fff !important;
  line-height: 1.75 !important;
  margin: 0;
}
.talk .speaker-role {
  font-weight: 700;
}
@media(max-width:680px) {
  /* full-width category ribbon on mobile */
  .film.wide, .film.card {
    padding-top: 0;
  }
  .film-head {
    display: block;
    width: 100%;
  }
  .film-head .tag {
    position: static;
    width: 100%;
    min-width: 0;
    border-radius: 0;
    padding: 11px 20px;
    font-size: 20px;
  }
  .film-head .schedule {
    padding: 18px 15px 4px;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .film.wide > img {
    height: 210px;
  }
  .film.card > img {
    height: 220px;
  }
  /* talk speakers become a clean vertical list without white panels */
  .talk {
    padding: 24px 18px 78px;
  }
  .talk .speakers {
    display: block;
    margin-top: 20px;
  }
  .talk .speakers .speaker {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    padding: 18px 0 !important;
    margin: 0;
    background: transparent !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .3);
  }
  .talk .speakers .speaker:first-child {
    border-top: 0;
    padding-top: 0 !important;
  }
  .talk .speakers img {
    width: 120px;
    height: 150px;
    grid-row: 1/4;
    margin: 0;
    object-fit: cover;
  }
  .talk .speaker-copy {
    align-self: start;
  }
  .talk .speakers h4, .talk .speaker-copy h4 {
    font-size: 18px;
    margin: 0 0 7px;
  }
  .talk .speakers p {
    font-size: 14px;
    line-height: 1.65 !important;
  }
}
/* ticket buttons: align to bottom of each film card */
.film.card .film-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.film.card .film-text .apply.image-ticket {
  margin-top: auto;
  padding-top: 18px;
}
/* 2026-09-24 v5: iPad header SNS + documentary card ribbon/date layout */
@media (max-width:980px) {
  /* Keep X / Instagram visible on tablet widths */
  .header > .sns {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
  }
  .header > .sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .header > .sns img {
    width: 25px;
    height: 25px;
    object-fit: contain;
  }
  .header > .sns a:first-child {
    font-size: 24px;
  }
}
/* Documentary cards: yellow category ribbon spans the whole card */
.film.card .film-head {
  width: 100%;
  display: block;
  background: transparent;
  min-height: 0;
}
.film.card .film-head .tag {
  width: 100%;
  max-width: none;
  min-width: 0;
  display: block;
  padding: 10px 20px;
  border-radius: 0;
  font-size: 20px;
}
.film.card .card-schedule {
  padding: 16px 20px 0;
  margin: 0;
  justify-content: flex-start;
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
}
.film.card .card-schedule .schedule-venue {
  width: 38px !important;
  height: 38px !important;
}
@media (max-width:680px) {
  .film.card .film-head .tag {
    width: 100%;
    padding: 11px 20px;
  }
  .film.card .card-schedule {
    padding: 18px 20px 2px;
    font-size: 20px;
    gap: 9px;
  }
  .film.card .card-schedule .schedule-venue {
    width: 34px !important;
    height: 34px !important;
  }
}
/* 2026-09-24 v6: documentary films use the same one-row layout as the main films */
.film-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width:681px) {
  .film-grid .film.card {
    display: grid;
    grid-template-columns: 42% 58%;
    grid-template-rows: auto auto auto;
    padding: 0;
    overflow: hidden;
  }
  .film-grid .film.card .film-head {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }
  .film-grid .film.card .film-head .tag {
    width: 100%;
    padding: 11px 25px;
    font-size: 20px;
  }
  .film-grid .film.card > img {
    grid-column: 1;
    grid-row: 2 / 4;
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
  }
  .film-grid .film.card .card-schedule {
    grid-column: 2;
    grid-row: 2;
    padding: 20px 26px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
  }
  .film-grid .film.card .film-text {
    grid-column: 2;
    grid-row: 3;
    padding: 12px 26px 22px;
    min-width: 0;
  }
  .film-grid .film.card h3 {
    font-size: 25px;
  }
  .film-grid .film.card .apply.image-ticket {
    width: min(360px, 90%);
    margin-top: auto;
    padding-top: 18px;
  }
}
/* Tablet header: hamburger stays at the far right */
@media (min-width:681px) and (max-width:1100px) {
  .header {
    display: flex;
    gap: 12px;
    padding: 0 22px;
  }
  .header .brand {
    order: 1;
    min-width: 240px;
    margin-right: auto;
  }
  .header nav {
    display: none;
  }
  .header > .sns {
    order: 2;
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  .header-cta {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
  }
  .menu {
    order: 4;
    display: block;
    margin-left: 0 !important;
    flex: none;
    border: 0;
    background: none;
    font-size: 32px;
    line-height: 1;
  }
}
/* 2026-09-24 v7: unify all six film layouts */
@media (min-width:681px) {
  .film.wide {
    display: grid;
    grid-template-columns: 42% 58%;
    grid-template-rows: auto auto 1fr;
    padding-top: 0;
  }
  .film.wide .film-head {
    grid-column: 1/-1;
    grid-row: 1;
    width: 100%;
  }
  .film.wide .film-head .tag {
    width: 100%;
    max-width: none;
    min-width: 0;
    position: static;
    padding: 11px 25px;
  }
  .film.wide:nth-of-type(1) .film-head {
    background: #32a8df;
  }
  .film.wide:nth-of-type(2) .film-head {
    background: var(--yellow);
  }
  .film.wide:nth-of-type(3) .film-head {
    background: #14b9a7;
  }
  .film.wide > img {
    grid-column: 1;
    grid-row: 2/4;
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
  }
  .film.wide > .wide-schedule {
    grid-column: 2;
    grid-row: 2;
    padding: 20px 26px 0;
    justify-content: flex-start;
  }
  .film.wide > .film-text {
    grid-column: 2;
    grid-row: 3;
    padding: 12px 26px 22px;
  }
}
@media (max-width:680px) {
  .film.wide {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }
  .film.wide .film-head {
    order: 1;
  }
  .film.wide .film-head .tag {
    width: 100%;
    max-width: none;
    position: static;
  }
  .film.wide > img {
    order: 2;
    height: 220px;
    object-fit: cover;
  }
  .film.wide > .wide-schedule {
    order: 3;
    padding: 18px 20px 2px;
    font-size: 20px;
    gap: 9px;
    justify-content: flex-start;
  }
  .film.wide > .film-text {
    order: 4;
  }
  .film.wide > .wide-schedule .schedule-venue {
    width: 34px !important;
    height: 34px !important;
  }
}
/* v8: 上段3作品の日付位置調整 */
@media (min-width:681px) {
  .film.wide {
    position: relative;
  }
  .film.wide > .wide-schedule {
    grid-column: 2;
    grid-row: 1;
    z-index: 3;
    align-self: center;
    justify-self: end;
    margin: 0 24px 0 0;
    padding: 7px 12px;
    width: auto;
    background: rgba(255, 255, 255, .96);
    border-radius: 999px;
    line-height: 1;
  }
  .film.wide > img {
    grid-row: 2;
  }
  .film.wide > .film-text {
    grid-row: 2;
  }
}
@media (max-width:680px) {
  .film.wide .film-head {
    order: 1;
  }
  .film.wide > .wide-schedule {
    order: 2;
    width: 100%;
    padding: 14px 20px;
    margin: 0;
    background: #fff;
    border-radius: 0;
  }
  .film.wide > img {
    order: 3;
  }
  .film.wide > .film-text {
    order: 4;
  }
}
/* v9: film cards final unified layout */
/* All category bands use the same yellow/blue treatment */
.film .film-head, .film.wide:nth-of-type(1) .film-head, .film.wide:nth-of-type(2) .film-head, .film.wide:nth-of-type(3) .film-head {
  background: var(--yellow) !important;
}
.film .film-head .tag, .film .tag, .film .tag.yellow, .film .tag.green {
  background: var(--yellow) !important;
  color: var(--ink)!important;
}
@media (min-width:681px) {
  /* upper and lower films: band / image-left / content-right */
  .film.wide, .film-grid .film.card {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    grid-template-rows: auto auto 1fr !important;
    padding-top: 0 !important;
    margin-bottom: 28px;
    width: 100%;
  }
  .film-grid {
    display: block !important;
  }
  .film.wide .film-head, .film-grid .film.card .film-head {
    grid-column: 1/-1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 48px;
    background: var(--yellow) !important;
  }
  .film.wide .film-head .tag, .film-grid .film.card .film-head .tag {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    position: static !important;
    padding: 11px 25px !important;
    font-size: 20px !important;
  }
  .film.wide > img, .film-grid .film.card > img {
    grid-column: 1 !important;
    grid-row: 2/4 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    object-fit: cover !important;
  }
  .film.wide > .wide-schedule, .film-grid .film.card > .card-schedule {
    grid-column: 2 !important;
    grid-row: 2 !important;
    z-index: 3;
    align-self: start;
    justify-self: end;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: auto !important;
    margin: 0 24px 0 0 !important;
    padding: 16px 0 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    line-height: 1.2;
    white-space: nowrap;
    font-size: 21px !important;
  }
  .film.wide > .film-text, .film-grid .film.card > .film-text {
    grid-column: 2 !important;
    grid-row: 3 !important;
    padding: 10px 26px 22px !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .film-grid .film.card h3 {
    font-size: 25px !important;
  }
  .film-grid .film.card .apply.image-ticket {
    width: min(360px, 90%) !important;
    margin-top: auto !important;
  }
  .film-grid .film.card .card-schedule .schedule-venue {
    width: 38px !important;
    height: 38px !important;
  }
}
@media (max-width:680px) {
  /* SP: yellow band -> date -> photo -> copy, identical for all six */
  .film.wide, .film-grid .film.card {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
  }
  .film.wide .film-head, .film-grid .film.card .film-head {
    order: 1 !important;
    width: 100% !important;
    background: var(--yellow) !important;
  }
  .film.wide .film-head .tag, .film-grid .film.card .film-head .tag {
    width: 100% !important;
    padding: 11px 20px !important;
    font-size: 20px !important;
  }
  .film.wide > .wide-schedule, .film-grid .film.card > .card-schedule {
    order: 2 !important;
    width: 100% !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 20px !important;
    white-space: nowrap;
  }
  .film.wide > img, .film-grid .film.card > img {
    order: 3 !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }
  .film.wide > .film-text, .film-grid .film.card > .film-text {
    order: 4 !important;
    padding: 15px 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .film.wide > .wide-schedule .schedule-venue, .film-grid .film.card > .card-schedule .schedule-venue {
    width: 34px !important;
    height: 34px !important;
  }
}
/* v10: PCの日付＋会場を黄色カテゴリ帯の中へ（6作品共通） */
@media (min-width:681px) {
  .film.wide, .film-grid .film.card {
    grid-template-rows: auto 1fr !important;
  }
  .film.wide > .wide-schedule, .film-grid .film.card > .card-schedule {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 24px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    z-index: 5 !important;
  }
  .film.wide > img, .film-grid .film.card > img {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .film.wide > .film-text, .film-grid .film.card > .film-text {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 26px 26px 22px !important;
  }
}
/* =========================================================
   v11: ページ背景を淡い水面へ変更（ヘッダーは白のまま）
   ========================================================= */
body {
  background-color: #eefbfe !important;
  background-image: url('../images/water-bg.webp') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-attachment: fixed !important;
}
/* ヘッダーは水面を入れず白固定 */
.header {
  background: #fff !important;
  background-image: none !important;
}
/* 薄水色だった主要エリアは、水面がごく薄く見える半透明ベースに */
.water, .news, .information, .ocean-page {
  background-color: rgba(238, 251, 254, .84) !important;
  background-image: none !important;
}
/* 「海のSDGs映画祭とは」は指定の bg.png を維持 */
.about {
  background-color: rgba(234, 250, 255, .72) !important;
  background-image: linear-gradient(rgba(234, 250, 255, .72), rgba(234, 250, 255, .72)), url('../images/bg.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
@media(max-width:980px) {
  body {
    background-attachment: scroll !important;
    background-size: auto 1200px !important;
    background-position: center top !important;
  }
}
@media(max-width:680px) {
  body {
    background-size: auto 900px !important;
    background-position: center top !important;
  }
  .water, .news, .information, .ocean-page {
    background-color: rgba(238, 251, 254, .88) !important;
  }
}
/* =========================================================
   v12: 協賛・助成・後援エリアに海中写真をうっすら透過
   サンプルのように、水色を保ちながら背景写真を感じる程度に表示
   ========================================================= */
.top-credits {
  background-color: #58b8dd !important;
  background-image:
    linear-gradient(rgba(55, 174, 216, .78), rgba(55, 174, 216, .78)), url('../images/top.webp') !important;
  background-position: center 58% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #fff !important;
}
/* ロゴは背景写真の影響を受けず、白地をきれいに保つ */
.top-credits .partner-logo, .top-credits .logo {
  background: #fff !important;
}
@media(max-width:680px) {
  .top-credits {
    background-image:
      linear-gradient(rgba(55, 174, 216, .82), rgba(55, 174, 216, .82)), url('../images/top.webp') !important;
    background-position: center center !important;
  }
}

/* =========================================================
   v13: キッズ＆ティーンズ コンテストロゴ
   PCは参考画像のように左右カラムの間・上部へ配置
   ========================================================= */
.event-card.kids {
  position: relative !important;
}
.event-card.kids .kids-contest-logo {
  position: absolute !important;
  z-index: 4 !important;
  top: 18px !important;
  left: 46.5% !important;
  transform: translateX(-50%) !important;
  width: clamp(150px, 14vw, 225px) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  pointer-events: none;
}
/* 左側本文がロゴに重ならないよう、PCのみ少し右側に余白を確保 */
@media (min-width: 981px) {
  .event-card.kids > div:first-child {
    padding-right: clamp(120px, 12vw, 195px) !important;
  }
}
/* iPadではロゴを少し小さくして中央上部へ */
@media (min-width: 681px) and (max-width: 980px) {
  .event-card.kids .kids-contest-logo {
    top: 20px !important;
    left: 50% !important;
    width: 150px !important;
  }
}
/* SPは絶対配置を解除。タイトル下に中央配置して重なりを防ぐ */
@media (max-width: 680px) {
  .event-card.kids .kids-contest-logo {
    position: static !important;
    display: block !important;
    transform: none !important;
    width: 135px !important;
    height: auto !important;
    margin: 10px auto 18px !important;
  }
}


/* =========================================================
   v15: Kids & Teens mobile layout — reference image match
   ========================================================= */
@media (max-width: 680px) {
  .event-card.kids {
    position: relative !important;
  }

  .event-card.kids > div:first-child {
    position: relative !important;
    padding-right: 0 !important;
  }

  .event-card.kids > div:first-child > span {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    padding-right: 28% !important;
  }

  .event-card.kids h3 {
    position: relative !important;
    z-index: 2 !important;
    width: 67% !important;
    margin: 12px 0 0 !important;
    font-size: clamp(28px, 7.4vw, 38px) !important;
    line-height: 1.3 !important;
  }

  .event-card.kids .kids-contest-logo {
    position: absolute !important;
    top: -12px !important;
    right: -18px !important;
    left: auto !important;
    width: 37% !important;
    max-width: 220px !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  .event-card.kids > div:first-child > p {
    clear: both !important;
    margin-top: 28px !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .event-card.kids > div:first-child > img:not(.kids-contest-logo) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 22px 0 0 !important;
    object-fit: contain !important;
  }
}


/* =========================================================
   v16: コンテスト日時 会場A / 会場B マーク
   ========================================================= */
.event-card.kids .award-date-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.event-card.kids .award-date-row > b {
  display: inline-block !important;
}
.event-card.kids .venue-mark {
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  color: #fff !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
}
.event-card.kids .venue-mark small {
  display: block !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  margin-bottom: 3px !important;
}
.event-card.kids .venue-mark strong {
  display: block !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: .9 !important;
}
.event-card.kids .venue-mark-a { background: #92128f !important; }
.event-card.kids .venue-mark-b { background: #063b9d !important; }

@media (max-width: 680px) {
  .event-card.kids .award-date-row {
    gap: 9px !important;
  }
  .event-card.kids .venue-mark {
    width: 46px !important;
    height: 46px !important;
  }
  .event-card.kids .venue-mark small { font-size: 9px !important; }
  .event-card.kids .venue-mark strong { font-size: 19px !important; }
}


/* Greeting director profile: image + title side-by-side on mobile */
.director {
  display: block;
}
.director-profile {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.director-bio {
  margin: 16px 0 0;
}
@media (max-width: 680px) {
  .director {
    display: block;
  }
  .director-profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  .director-photo {
    width: 112px;
    flex: 0 0 112px;
  }
  .director-heading {
    min-width: 0;
  }
  .director-heading small {
    display: block;
    margin-bottom: 2px;
  }
  .director-heading h3 {
    font-size: 24px;
    line-height: 1.25;
    margin: 2px 0 5px;
  }
  .director-heading b {
    display: block;
    font-size: 15px;
    line-height: 1.55;
  }
  .director-bio {
    width: 100%;
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.75;
  }
}

/* Ticket information */
.ticket-info-section {
  padding: 86px 24px 92px;
  background: rgba(255,255,255,.92);
}
.ticket-info-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
}
.ticket-info-title {
  margin: 0 0 72px;
  text-align: center;
  color: #0878d1;
  font-size: clamp(40px, 4.2vw, 68px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: .01em;
}
.ticket-info-title span { color: #08a4d2; }
.ticket-info-list {
  width: min(1040px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 54px;
}
.ticket-info-item {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 30px;
  align-items: start;
}
.ticket-venue-badge {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
  flex: 0 0 auto;
}
.ticket-venue-badge small,
.ticket-button-badge small {
  display: block;
  font-weight: 800;
  letter-spacing: .12em;
}
.ticket-venue-badge small { font-size: 20px; margin-bottom: 7px; }
.ticket-venue-badge strong { font-size: 42px; }
.ticket-info-a .ticket-venue-badge { background: #92128f; }
.ticket-info-b .ticket-venue-badge { background: #063b9d; }
.ticket-info-copy { padding-top: 6px; }
.ticket-info-copy h3 {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.35;
  font-weight: 800;
}
.ticket-info-a .ticket-info-copy { color: #92128f; }
.ticket-info-b .ticket-info-copy { color: #063b9d; }
.ticket-price {
  margin: 0;
  font-size: clamp(21px, 1.8vw, 30px);
  line-height: 1.45;
  font-weight: 800;
}
.ticket-note {
  margin: 34px 0 0;
  font-size: clamp(18px, 1.55vw, 25px);
  line-height: 1.55;
  font-weight: 500;
}
.ticket-info-lead {
  margin: 78px 0 54px;
  text-align: center;
  color: #08a4d2;
  font-size: clamp(25px, 2.4vw, 38px);
  line-height: 1.35;
  font-weight: 800;
}
.ticket-info-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.ticket-info-button {
  min-height: 104px;
  position: relative;
  display: grid;
  grid-template-columns: 115px 1fr 42px;
  align-items: center;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: clamp(25px, 2.1vw, 36px);
  box-sizing: border-box;
}
.ticket-info-button-a { background: #92128f; }
.ticket-info-button-b { background: #063b9d; }
.ticket-button-badge {
  width: 108px;
  height: 108px;
  margin-left: -2px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}
.ticket-info-button-a .ticket-button-badge { color: #92128f; border: 4px solid #92128f; }
.ticket-info-button-b .ticket-button-badge { color: #063b9d; border: 4px solid #063b9d; }
.ticket-button-badge small { font-size: 18px; margin-bottom: 5px; }
.ticket-button-badge strong { font-size: 40px; }
.ticket-button-text { padding: 0 8px 0 18px; white-space: nowrap; }
.ticket-button-arrow { padding-right: 24px; text-align: right; font-size: .72em; }
.ticket-info-button:hover { filter: brightness(1.06); }

@media (max-width: 820px) {
  .ticket-info-section { padding: 58px 22px 64px; }
  .ticket-info-title { margin-bottom: 48px; font-size: 42px; }
  .ticket-info-list { gap: 44px; }
  .ticket-info-item { grid-template-columns: 84px 1fr; gap: 18px; }
  .ticket-venue-badge { width: 78px; height: 78px; }
  .ticket-venue-badge small { font-size: 13px; margin-bottom: 5px; }
  .ticket-venue-badge strong { font-size: 30px; }
  .ticket-info-copy h3 { font-size: 22px; }
  .ticket-price { font-size: 18px; }
  .ticket-note { margin-top: 22px; font-size: 15px; }
  .ticket-info-lead { margin: 54px 0 32px; font-size: 23px; }
  .ticket-info-buttons { grid-template-columns: 1fr; gap: 22px; width: min(560px, 100%); margin: 0 auto; }
  .ticket-info-button { min-height: 78px; grid-template-columns: 82px 1fr 30px; font-size: 22px; }
  .ticket-button-badge { width: 80px; height: 80px; }
  .ticket-button-badge small { font-size: 12px; }
  .ticket-button-badge strong { font-size: 29px; }
  .ticket-button-text { padding-left: 14px; }
  .ticket-button-arrow { padding-right: 16px; }
}

@media (max-width: 480px) {
  .ticket-info-section { padding: 48px 16px 54px; }
  .ticket-info-title { font-size: 34px; margin-bottom: 40px; }
  .ticket-info-item { grid-template-columns: 70px 1fr; gap: 14px; }
  .ticket-venue-badge { width: 66px; height: 66px; }
  .ticket-venue-badge small { font-size: 11px; }
  .ticket-venue-badge strong { font-size: 25px; }
  .ticket-info-copy { padding-top: 2px; }
  .ticket-info-copy h3 { font-size: 18px; }
  .ticket-price { font-size: 16px; }
  .ticket-note { margin-top: 18px; font-size: 13px; line-height: 1.65; }
  .ticket-info-lead { margin: 44px 0 26px; font-size: 20px; }
  .ticket-info-button { min-height: 66px; grid-template-columns: 68px 1fr 24px; font-size: 17px; }
  .ticket-button-badge { width: 68px; height: 68px; border-width: 3px !important; }
  .ticket-button-badge small { font-size: 10px; }
  .ticket-button-badge strong { font-size: 24px; }
  .ticket-button-text { padding-left: 10px; }
  .ticket-button-arrow { padding-right: 10px; }
}
\n\n/* 2026-09-27 Ticket / Access cards on water background */
.ticket-info-section,
.information {
  box-sizing: border-box;
  width: min(1240px, calc(100% - 48px));
  margin: 56px auto;
  border-radius: 58px;
  background: rgba(255,255,255,.96);
}
.ticket-info-section {
  padding: 76px 70px 82px;
}
.information {
  padding: 62px 70px 72px;
}
.information > h2 {
  margin: 0 0 52px;
  text-align: center;
  color: #0878d1;
  font-size: clamp(40px, 4vw, 62px);
  line-height: 1.1;
  font-weight: 800;
}
/* water image remains on the page behind the white cards */
body {
  background-color: #eafaff;
  background-image: linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,.30)), url('../images/water-bg.webp');
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}
.site-header { background: #fff; }

@media (max-width: 820px) {
  .ticket-info-section,
  .information {
    width: calc(100% - 28px);
    margin: 30px auto;
    border-radius: 34px;
  }
  .ticket-info-section { padding: 52px 24px 58px; }
  .information { padding: 48px 24px 54px; }
  .information > h2 { margin-bottom: 36px; font-size: 38px; }
}
@media (max-width: 480px) {
  .ticket-info-section,
  .information {
    width: calc(100% - 20px);
    border-radius: 26px;
  }
  .ticket-info-section { padding: 44px 16px 48px; }
  .information { padding: 42px 18px 46px; }
  .information > h2 { font-size: 32px; margin-bottom: 30px; }
}

/* 2026-09-27 Ticket card compact desktop layout */
@media (min-width: 821px) {
  .ticket-info-section {
    width: min(1120px, calc(100% - 64px));
    margin: 46px auto;
    padding: 42px 58px 48px;
    border-radius: 42px;
  }
  .ticket-info-inner { width: 100%; }
  .ticket-info-title {
    margin-bottom: 34px;
    font-size: clamp(36px, 3.1vw, 48px);
  }
  .ticket-info-list {
    width: min(900px, 100%);
    gap: 24px;
  }
  .ticket-info-item {
    grid-template-columns: 76px 1fr;
    gap: 20px;
  }
  .ticket-venue-badge {
    width: 72px;
    height: 72px;
  }
  .ticket-venue-badge small {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .ticket-venue-badge strong { font-size: 28px; }
  .ticket-info-copy { padding-top: 1px; }
  .ticket-info-copy h3 {
    margin-bottom: 3px;
    font-size: clamp(18px, 1.55vw, 24px);
  }
  .ticket-price {
    font-size: clamp(16px, 1.35vw, 21px);
  }
  .ticket-note {
    margin-top: 12px;
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.5;
  }
  .ticket-info-lead {
    margin: 30px 0 22px;
    font-size: clamp(20px, 1.8vw, 27px);
  }
  .ticket-info-buttons {
    gap: 34px;
    width: min(900px, 100%);
    margin: 0 auto;
  }
  .ticket-info-button {
    min-height: 70px;
    grid-template-columns: 74px 1fr 28px;
    font-size: clamp(18px, 1.55vw, 24px);
  }
  .ticket-button-badge {
    width: 72px;
    height: 72px;
  }
  .ticket-button-badge small {
    font-size: 11px;
    margin-bottom: 3px;
  }
  .ticket-button-badge strong { font-size: 27px; }
  .ticket-button-text { padding-left: 12px; }
  .ticket-button-arrow { padding-right: 14px; }
}

/* 2026-09-27 Access card — match compact Ticket Information card */
@media (min-width: 821px) {
  #access.information {
    width: min(1120px, calc(100% - 64px));
    margin: 46px auto;
    padding: 42px 58px 48px;
    border-radius: 42px;
    background: rgba(255,255,255,.96);
  }
  #access.information > h2 {
    margin: 0 0 34px;
    font-size: clamp(36px, 3.1vw, 48px);
    line-height: 1.1;
  }
  #access .venues {
    width: min(960px, 100%);
    margin: 0 auto;
    gap: 38px;
    align-items: start;
  }
  #access .venues > div {
    gap: 16px;
    align-items: flex-start;
  }
  #access .venue-badge {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    object-fit: contain;
  }
  #access .venues h3 {
    margin: 2px 0 4px;
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.35;
  }
  #access .venues b,
  #access .venues p {
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.55;
  }
  #access .venues p { margin: 7px 0; }
  #access .map-link img {
    max-width: 160px;
    height: auto;
  }
}

@media (max-width: 820px) {
  #access.information {
    background: rgba(255,255,255,.96);
  }
}

/* v15 FIX: 会場アクセスをチケットInformationと同じ白い角丸カードにする */
#access.information {
  box-sizing: border-box !important;
  width: min(1120px, calc(100% - 64px)) !important;
  margin: 46px auto !important;
  padding: 42px 58px 48px !important;
  border-radius: 42px !important;
  background: rgba(255,255,255,.96) !important;
  background-image: none !important;
}
#access.information > h2 {
  margin: 0 0 34px !important;
  text-align: center !important;
  color: #0878d1 !important;
  font-size: clamp(36px, 3.1vw, 48px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}
#access .venues {
  width: min(960px, 100%);
  margin: 0 auto;
}
@media (max-width: 820px) {
  #access.information {
    width: calc(100% - 28px) !important;
    margin: 30px auto !important;
    padding: 48px 24px 54px !important;
    border-radius: 34px !important;
    background: rgba(255,255,255,.96) !important;
    background-image: none !important;
  }
  #access.information > h2 {
    margin-bottom: 36px !important;
    font-size: 38px !important;
  }
}
@media (max-width: 480px) {
  #access.information {
    width: calc(100% - 20px) !important;
    padding: 42px 18px 46px !important;
    border-radius: 26px !important;
  }
  #access.information > h2 {
    margin-bottom: 30px !important;
    font-size: 32px !important;
  }
}

/* footer alignment refinement 2026-09-27 */
@media (min-width: 981px) {
  .footer {
    padding-left: max(5vw, 35px);
    padding-right: max(5vw, 35px);
  }
  .footer-top,
  .footer-body,
  .footer-bottom {
    width: min(1180px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
  .footer-top {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .footer-top .brand {
    margin-right: auto;
  }
  .footer-top .sns {
    margin-left: auto;
  }
  .footer-top .footer-cta {
    margin-left: 0;
  }
}

/* v18: 同時開催イベントのCTAを少し大きく */
.event-card > .apply.image-ticket {
  width: min(430px, 94%);
}
.event-card > .apply.detail {
  font-size: 18px;
  padding: 13px 32px;
  min-width: 300px;
  text-align: center;
}
@media (max-width: 820px) {
  .event-card > .apply.image-ticket {
    width: min(390px, 94%);
  }
  .event-card > .apply.detail {
    font-size: 17px;
    padding: 12px 26px;
    min-width: 0;
    width: min(330px, 90%);
  }
}

.schedule-note {
  width: fit-content;
  max-width: 1100px;
  margin: 50px auto 60px;

  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
  color: #16477c;
}

.schedule-note span {
  background: linear-gradient(
    transparent 62%,
    rgba(255, 224, 85, 0.75) 62%,
    rgba(255, 224, 85, 0.75) 92%,
    transparent 92%
  );

  padding: 0 3px;
}
/* v19: iPad / tablet hamburger menu fix */
@media (min-width: 681px) and (max-width: 1100px) {
  .header nav {
    display: none;
    position: absolute;
    top: 86px;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-left: 0;
    padding: 18px 28px;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 10px 24px rgba(0, 54, 90, .16);
  }

  .header nav.open {
    display: flex;
  }

  .header nav a {
    display: block;
    padding: 13px 10px;
    text-align: left;
    border-bottom: 1px solid #e4eef4;
    font-size: 14px;
  }

  .header nav small {
    display: inline;
    margin-left: 8px;
  }

  .menu {
    position: relative;
    z-index: 1001;
    cursor: pointer;
    touch-action: manipulation;
  }
}

/* 980px以下ではヘッダー高68pxに合わせる */
@media (min-width: 681px) and (max-width: 980px) {
  .header nav {
    top: 68px;
  }
}

/* v20: tablet spacing / film schedule refinement */
/* ご挨拶カードは中間幅でも左右に余白を残す */
.greeting {
  width: min(1180px, calc(100% - 48px));
}
@media (max-width: 680px) {
  .greeting {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* iPad / tablet: 上映作品の日付を黄色帯の右側で1行表示 */
@media (min-width: 681px) and (max-width: 1100px) {
  .film.wide,
  .film-grid .film.card {
    grid-template-columns: 42% 58% !important;
  }

  .film.wide .film-head,
  .film-grid .film.card .film-head {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    padding-right: 0 !important;
  }

  .film.wide .film-head .tag,
  .film-grid .film.card .film-head .tag {
    padding-right: 52% !important;
    white-space: nowrap;
  }

  .film.wide > .wide-schedule,
  .film-grid .film.card > .card-schedule {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    z-index: 5;
    margin: 0 18px 0 0 !important;
    padding: 0 !important;
    max-width: 62%;
    background: transparent !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    font-size: clamp(14px, 1.85vw, 19px) !important;
    line-height: 1 !important;
  }

  .film.wide > .wide-schedule .schedule-venue,
  .film-grid .film.card > .card-schedule .schedule-venue {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px;
  }

  .film.wide > img,
  .film-grid .film.card > img {
    grid-row: 2 / 4 !important;
  }

  .film.wide > .film-text,
  .film-grid .film.card > .film-text {
    grid-row: 2 / 4 !important;
    padding-top: 28px !important;
  }
}


/* v21: mobile film schedule second row left alignment */
.schedule-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .film .schedule {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }

  .film .schedule-line {
    width: auto;
    margin: 0 !important;
    justify-content: flex-start;
  }
}


/* v22: mobile single-date schedule alignment + desktop link hover */
@media (max-width: 680px) {
  /* 会場Bのみの作品は、日付＋会場アイコンを1行のまま右寄せ */
  .film .schedule.single-schedule {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding-left: 16px !important;
    padding-right: 28px !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: clamp(17px, 5.2vw, 25px) !important;
  }

  .film .schedule.single-schedule .schedule-venue {
    flex: 0 0 auto;
    margin: 0 !important;
  }
}

/* マウス操作ができるPCだけ、リンクを軽くフェード */
@media (hover: hover) and (pointer: fine) {
  a {
    transition: opacity .2s ease;
  }

  a:hover {
    opacity: .72;
  }
}
\n\n/* v23: mobile film schedules right aligned + Kids title wrap */\n.kids-mobile-break {\n  display: none;\n}\n\n@media (max-width: 680px) {\n  /* 1行・2行どちらの日付も右端を揃える */\n  .film .schedule:not(.single-schedule) {\n    width: 100% !important;\n    max-width: none !important;\n    box-sizing: border-box;\n    align-items: flex-end !important;\n    justify-content: flex-start !important;\n    padding-left: 16px !important;\n    padding-right: 28px !important;\n    text-align: right !important;\n  }\n\n  .film .schedule:not(.single-schedule) .schedule-line {\n    width: auto !important;\n    margin-left: auto !important;\n    margin-right: 0 !important;\n    justify-content: flex-end !important;\n    text-align: right !important;\n  }\n\n  .kids-mobile-break {\n    display: inline;\n  }\n}\n
/* v24: ABOUT archive button */
.about-actions .archive-btn {
  min-width: 300px;
  text-align: center;
}
@media (max-width: 680px) {
  .about-actions .archive-btn {
    min-width: 0;
  }
}


/* v26: Ticket CTA layout correction */
.ticket-info-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.ticket-info-lead::before,
.ticket-info-lead::after {
  content: "";
  display: block;
  width: 4px;
  height: 46px;
  border-radius: 999px;
  background: #ff39ee;
  flex: 0 0 auto;
}
.ticket-info-lead::before { transform: rotate(-28deg); }
.ticket-info-lead::after { transform: rotate(28deg); }
.ticket-info-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ticket-info-buttons .ticket-info-button-a {
  width: min(760px, 100%);
}
.ticket-b-no-entry {
  width: min(760px, 100%);
  box-sizing: border-box;
  margin: 0;
  padding-left: 118px;
  color: #063b9d;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.45;
  font-weight: 700;
  text-align: left;
}
@media (max-width: 820px) {
  .ticket-info-lead { gap: 14px; }
  .ticket-info-lead::before,
  .ticket-info-lead::after { width: 4px; height: 34px; }
  .ticket-info-buttons { gap: 12px; }
  .ticket-b-no-entry {
    width: min(560px, 100%);
    padding-left: 0;
    text-align: center;
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .ticket-info-lead { gap: 10px; }
  .ticket-info-lead::before,
  .ticket-info-lead::after { width: 3px; height: 28px; }
  .ticket-b-no-entry { font-size: 14px; }
}

/* v27: Ticket CTA size/color refinement */
.ticket-info-lead::before,
.ticket-info-lead::after {
  background: #08a4d2;
}
.ticket-info-buttons .ticket-info-button-a {
  width: min(520px, 100%);
}
.ticket-b-no-entry {
  width: min(520px, 100%);
  padding-left: 0;
  text-align: center;
  font-size: clamp(20px, 1.55vw, 26px);
}
@media (max-width: 820px) {
  .ticket-info-buttons .ticket-info-button-a,
  .ticket-b-no-entry {
    width: min(520px, 100%);
  }
  .ticket-b-no-entry {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .ticket-b-no-entry {
    font-size: 16px;
  }
}

/* v28: header ticket CTA uses archive-button gradient */
.header-cta {
  background: linear-gradient(90deg, #3794ee 0%, #2fc1d2 100%);
}


/* ===== Kids & Teens: venue application info ===== */
.kids-entry-info{
  width:min(620px, 88%);
  margin:18px auto 0;
  text-align:center;
}
.kids-entry-a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:10px 54px 10px 84px;
  border-radius:999px;
  background:#9c149e;
  color:#fff !important;
  font-weight:800;
  font-size:20px;
  line-height:1.2;
  text-decoration:none;
}
.kids-entry-badge{
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  background:#fff;
  color:#9c149e;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.kids-entry-badge small{
  font-size:10px;
  font-weight:800;
  margin-bottom:3px;
}
.kids-entry-badge strong{
  font-size:25px;
}
.kids-entry-arrow{
  position:absolute;
  right:24px;
  font-size:28px;
  line-height:1;
}
.kids-entry-b-note{
  margin:10px 0 0;
  color:#06458d;
  font-size:18px;
  font-weight:800;
  line-height:1.5;
}
@media (hover:hover) and (pointer:fine){
  .kids-entry-a{
    transition:opacity .2s ease;
  }
  .kids-entry-a:hover{
    opacity:.75;
  }
}
@media (max-width:680px){
  .kids-entry-info{
    width:94%;
    margin-top:14px;
  }
  .kids-entry-a{
    min-height:54px;
    padding:8px 38px 8px 68px;
    font-size:16px;
  }
  .kids-entry-badge{
    width:46px;
    height:46px;
    left:5px;
  }
  .kids-entry-badge small{font-size:8px;}
  .kids-entry-badge strong{font-size:21px;}
  .kids-entry-arrow{
    right:17px;
    font-size:23px;
  }
  .kids-entry-b-note{
    margin-top:8px;
    font-size:15px;
  }
}


/* ===== v30 Kids & Teens balance refinement ===== */
/* application information belongs to the white prize/information panel */
.kids-entry-info--panel{
  width:100%;
  max-width:none;
  margin:24px 0 0;
  padding-top:20px;
  border-top:1px solid rgba(0,86,126,.28);
  box-sizing:border-box;
}
.kids-entry-info--panel .kids-entry-a{
  width:100%;
  max-width:420px;
  min-height:56px;
  margin:0 auto;
  box-sizing:border-box;
  font-size:17px;
  padding-left:68px;
  padding-right:42px;
}
.kids-entry-info--panel .kids-entry-badge{
  width:46px;
  height:46px;
}
.kids-entry-info--panel .kids-entry-badge strong{
  font-size:21px;
}
.kids-entry-info--panel .kids-entry-b-note{
  margin:10px auto 0;
  font-size:15px;
  text-align:center;
}

/* Keep the contest-detail button as the single bottom CTA */
@media (min-width:681px){
  .kids-entry-info--panel .kids-entry-a{
    max-width:390px;
  }
}
@media (max-width:680px){
  .kids-entry-info--panel{
    width:100%;
    margin-top:18px;
    padding-top:16px;
  }
  .kids-entry-info--panel .kids-entry-a{
    width:100%;
    max-width:360px;
    min-height:52px;
    font-size:15px;
  }
  .kids-entry-info--panel .kids-entry-b-note{
    font-size:14px;
  }
}


/* ===== v31 Kids & Teens: detail button under photos + wider white panel ===== */
@media (min-width: 981px){
  .event-card.kids{
    /* 右の白地を広げる */
    grid-template-columns: 1.05fr 1fr !important;
    gap: 32px !important;
    padding-bottom: 30px !important;
  }

  /* 左側のロゴ用余白を少しだけ縮め、写真・ボタン幅を確保 */
  .event-card.kids > div:first-child{
    padding-right: clamp(95px, 9vw, 145px) !important;
  }

  /* 中央のKIDSロゴ位置も新しいカラム比率に合わせる */
  .event-card.kids .kids-contest-logo{
    left: 43.5% !important;
  }

  .event-card.kids .award{
    padding: 30px 28px !important;
  }
}

/* 「コンテストの詳細はこちら」を授賞式写真の直下へ */
.event-card.kids .kids-detail-under-photo{
  display:flex;
  justify-content:center;
  margin:22px 0 0;
}
.event-card.kids .kids-detail-under-photo .apply.detail{
  position:static !important;
  transform:none !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:min(390px, 92%);
  min-width:0;
  margin:0;
  box-sizing:border-box;
  background:#fff;
}

/* 以前の「カード最下部にボタンを置く」ための余白を解消 */
@media (min-width: 681px){
  .event-card.kids{
    padding-bottom:30px !important;
  }
}

@media (max-width: 680px){
  .event-card.kids .kids-detail-under-photo{
    margin-top:16px;
  }
  .event-card.kids .kids-detail-under-photo .apply.detail{
    width:min(330px, 94%);
  }
}