/**
 * 光花火大会 2025 -> 2026LP (山口県光市 / 2025-07-26)
 **/

@charset "utf-8";

/*** common ***/
:root {
  --root-font-size: 16;
}
html, body, main, aside, article, section, nav, header, footer, div, p, dl, dt, dd { margin:0; padding:0; }
html {
	font-size: 100%;
  touch-action: manipulation;
}
body {
  width: 100%;
  font-size: 100%;
  font-size: calc( 13 / var(--root-font-size) * 1rem );
  color: #fff;
  background-color: #231815;
  line-height: 1.6;
}
header,main,footer {
  display: block;
}
main { display:block; overflow: hidden; }
h1,h2,h3,h4,h5,h6 {
  font-size: 1.25rem;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
div, p, a, span, dd, dt, li, address {
  font-size: 1rem;
}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img {
  max-width: 100%;
}
ul,ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}
li {
  list-style: none;
}
a {
  color: #fff;
  text-decoration: none;
}
time {
  display: inline-block;
}
address {
  font-style: normal;
}
button,html [type="button"],[type="reset"],[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  border-style: none;
  margin: 0 auto;
}
textarea {
  resize: vertical;
}
img {
  max-width: 100%;
}
video {
  filter: drop-shadow(0px 0px rgba(0,0,0,0));
  outline: none;
  border: none;
}
* {
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }

main {}
main h2, nav h2 { display: none; }
nav {
  color: #fff;
}

.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  word-wrap: normal!important;
  border: 0;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@media screen and (min-width: 768px) {
  div, p, a, span, dd, dt, li, address {
    font-size: 1.25rem;
  }
  * {
    font-size: 1.25rem;
  }
}



/*** keyframe ***/
@keyframes bgscroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -4224px 0;
  }
}

@keyframes light {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  20% {
    transform: scale(1) rotate(-45deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(50) rotate(-45deg);
    opacity: 0;
  }
}



/*** common ***/
.container {
  width: 100%;
  max-width: 875px;
  margin: 0 auto;
  padding: 0 1rem;
}


/*** animation ***/
.viewanm{
  opacity : 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(30px);
}
.viewanm.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/*** header **/
header {
  position: relative;
  height: 9.375rem;
}
header .logo {
  position: relative;
  display: block;
  padding: 0.1875rem;
  width: 100%;
  width: calc(100% - 12.5rem);
  max-width: 9.375rem;
  z-index: 1;
}
header .logo p {
  background-color: #231815;
  border-radius: 50%;
  overflow: hidden;
}
header .logo p a {
  display: block;
  width: 100%;
  /*height: 100%;*/
  height: 0;
  padding-top: 100%;
  background-image: url(../images/logo2026.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

header .outer {
  max-width: 1300px;
  margin: 0 auto;
  height: 9.375rem;
  position: relative;
}


/*** header(mainvisual) **/
header.mainvisual {
  height: 100vw;
  max-height: 570px;
  padding-top: 8.5vw;
  background-image: url(../images/mv.jpg);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
  background-color: #000005;
}

@media screen and (min-width: 500px) {
  header.mainvisual {
    max-height: 875px;
  }
}

@media screen and (min-width: 875px) {
  header.mainvisual {
    padding-top: 75px;
  }

  header.mainvisual .logo h1 {
    position: relative;
    left: calc((100vw - 720px - 150px) / 2);
  }

}
@media screen and (min-width: 1745px) {
  header.mainvisual .logo h1 {
    left: 455px;
  }
}
@media screen and (min-width: 1920px) {
  header.mainvisual {
    background-position: center bottom;
    background-size: unset;
  }
}




header.mainvisual .logo {
  display: block;
  padding: 0;
  width: 100%;
  max-width: none;
}
header.mainvisual .logo h1,
header.mainvisual .logo p {
  margin: 0 auto;
  width: 83vw;
  height: 83vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  overflow: hidden;
}
header.mainvisual .logo h1 a,
header.mainvisual .logo p a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/logo2026.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


/*** news **/
#news {
  margin: 0 auto;
  padding: 2rem 0;
/*
  background-image: url(../images/hanabi.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center left;
*/
  background-color: #ffe4d6;
}

#news .inner {
  padding: 0.5rem;
  color: #000;
  background-color: rgba(255,255,255,0.85);
  border-radius: 15px;
}

#news h2 {
  display: block;
  text-align: center;
  font-size: 1rem;
  margin: 1.4rem auto 0.8rem;
  width: 234px;
  height: 69px;
  max-width: 100%;
  background-image: url(../images/ttl_news.svg);
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#news ul {
  margin-bottom: 2rem;
}
#news ul li {
  padding-left: 2.5rem;
  padding-top: 0.4rem;
  background-image: url(../images/ico_hanabi1.svg);
  background-repeat: no-repeat;
  background-size: 2.25rem;
}
#news ul li + li {
  margin-top: 1rem;
}
#news ul li time {
  display: block;
}
#news ul li a {
  color: #000;
  text-decoration: underline;
}
#news ul li a:hover {
  text-decoration: none;
}

#news p {
  text-align: center;
  margin: 1rem auto;
}
#news p a {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 250px;
  line-height: 60px;
  text-align: center;
  color: #000;
  background-color: #fff;
  border: 3px solid #2f5da9;
  border-radius: 1rem;
  overflow: hidden;
}
#news p a::after {
  content: '\025b6';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 1.25rem;
  height: 100%;
  color: #fff;
  background-color: #2f5da9;
}
#news p a:hover {
  color: #fff;
  background-color: #2f5da9;
}
#news p a:hover::after {
  color: #2f5da9;
  background-color: #fff;
}
#news p a:focus {
  outline: 2px dotted #000;
  outline-offset: 0.25rem;
}

#news .inner_movie {
  padding: 0.5rem;
  color: #000;
  background-color: rgba(255,255,255,0.85);
  border-radius: 15px;
}

#news .inner_movie h3 {
  display: block;
  text-align: center;
  font-size: 1rem;
  margin: 1.4rem auto 0.8rem;
  width: 234px;
  height: 69px;
  max-width: 100%;
  background-image: url(../images/ttl_news_movie2025.svg);
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#news .inner_movie video {
  max-width: 100%;
}

#news .inner + .inner_movie {
  margin-top: 1.2rem;
}


@media screen and (min-width: 500px) {
  #news h2 {
    margin-top: 2.5rem;
  }
  #news ul {
    padding: 2rem 2.5rem 0;
  }

  #news .inner_movie h3 {
    margin-top: 2.5rem;
  }
  #news .inner_movie > div {
    padding: 2rem 1rem 0;
  }
}

@media screen and (min-width: 768px) {
  #news .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #news .inner {
    width: 100%;
  }

  #news .inner.inner_width {
    max-width: 500px;
    max-width: calc(100% - 250px - 1rem);
  }
  #news .inner_movie {
    width: 250px;
  }


  #news .inner + .inner_movie {
    margin-top: 0;
  }
}

/*** about ***/
nav.about {
  background-color: #c7e6ff;
}
nav.about .container {
  padding: 2rem 0 4.75rem;
  background-image: url(../images/ico_hanabi2.svg), url(../images/ico_hanabi3.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: left -33% top -12%, right -25% bottom 25%;
  background-size: 50vw, 32vw;
}


nav.about .container .inner {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 1rem;
}

nav.about .about_links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

nav.about .about_links + .about_links {
  margin-top: 1.25rem;
}

nav.about .about_links p {
  width: clamp(75px, 23%, 150px);
}
nav.about .about_links p span {
  position: relative;
  display: block;
  height: 0;
  padding-top: 100%;
  border-radius: 50%;
  box-shadow: 3px 3px #999;
  overflow: hidden;
}
nav.about .about_links p span a {
  position: absolute;
  top: 0;
}

nav.about .about_links p#link_about {
  width: 100%;
}
nav.about .about_links p#link_about span {
  padding-top: 6rem;
  border-radius: 3rem;
}

nav.about #link_about  span,
nav.about #link_about2 span {
  width: 100%;
  color: #fff;
  background-color: #2b569c;
}
nav.about #link_car   span { background-color: #ff9999; }
nav.about #link_train span { background-color: #58a5b7; }
nav.about #link_bus   span { background-color: #ddac40; }
nav.about #link_information span { background-color: #8eb3ed; }


nav.about #link_about a span {
  background-image: url(../images/ico_about.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
main nav.about#about #link_about a span {
  background-image: url(../images/ico_about_main.svg);
}

nav.about #link_about2 a span {
  background-image: url(../images/ico_about_main-2.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
nav.about #link_car a span {
  background-image: url(../images/ico_car.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
nav.about #link_train a span {
  background-image: url(../images/ico_train.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
nav.about #link_bus a span {
  background-image: url(../images/ico_bus.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
nav.about #link_information a span {
  background-image: url(../images/ico_information.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

nav.about .about_links p a {
  display: block;
  width: 100%;
  height: 100%;
}
nav.about .about_links p:hover {
  opacity: 0.8;
}


nav.about .notice_box {
  margin-top: 4rem;
  color: #000;
  background-color: #fff;
  border: 5px solid #9A6F32;
  border-radius: 1rem;
}

nav.about .notice_box h3 {
  padding: 0.5em 0;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  background-color: #966c31;
}
nav.about .notice_box ul {
  padding: 1rem;
}
nav.about .notice_box ul li {
  padding-left: 2.5rem;
  padding-top: 0.4rem;
  font-size: 0.875rem;
  background-image: url(../images/ico_hanabi1.svg);
  background-repeat: no-repeat;
  background-size: 2.25rem;
}
nav.about .notice_box ul li + li {
  margin-top: 1em;
}

nav.about .about_caution {
  margin-top: 1rem;
}
nav.about .about_caution img {
    width: auto;
    height: auto;
}
nav.about .inner > .about_caution:first-child {
  margin-top: 4rem;
}
nav.about .inner > .about_caution:first-child + .notice_box {
  margin-top: 2rem;
}

@media screen and (max-width: 500px) {
  nav.about .about_links .pc {
    display: none;
  }
  nav#access {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: clamp(75px, 25vw, 115px);;
    width: 100%;
  }
  nav#access .container {
    padding-top: 0.5rem;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 501px) {
  nav.about .about_links .sp {
    display: none;
  }

  body#front-page nav#access {
    display: none;
  }
}
@media screen and (min-width: 760px) {
  nav.about {
  }

  nav.about .container {
    background-position: right -45px bottom -30px, left -95px top -25px, right -110px bottom 40px;
    background-size: 180px, 330px, 225px;
  }
}
@media screen and (min-width: 875px) {
  nav.about .container {
    width: 1300px;
    max-width: none;
    margin-left: calc((100vw - 1300px) / 2);
    background-position: right 180px bottom -30px, left 120px top -25px, right 120px bottom 40px;
  }
}




nav#about h2 {
  display: block;
  position: relative;
  text-align: center;
  overflow: hidden;
  max-width: 908px;
  margin: 1.5rem auto 2rem;
}
nav#about h2::before,
nav#about h2::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 99em;
  border-top: 1px solid #ccc;
}
nav#about h2::before {
  right: 80%;
  right: calc(50% + 165px);
}
nav#about h2::after  {
  left:  80%;
  left:  calc(50% + 165px);
}

nav#about h2 span {
  display: inline-block;
  width: 300px;
  height: 23px;
  max-width: 100%;
  background-image: url(../images/ttl_about_h2.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


header nav#about {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  float: right;
  margin-left: 9.375rem;
  margin-left: calc(100% - 13rem);
}
header nav#about .container {
  padding: 1rem 0.1rem;
  background: none;
}
header nav#about .container .inner {
  padding: 0;
}

header nav#about h2 {
  display: none;
}
header nav#about .about_links {
  /*display: inline-block;*/
}
header nav#about .about_links + .about_links {
  margin-top: 0.3125rem;
}

header nav#about .about_links p {
  display: inline-block;
  width: 3.75rem;
  height: 3.75rem;
}
header nav#about .about_links p#link_about {
  width: 100%;
  width: 200px;
}
header nav#about .about_links p#link_about span {
  padding-top: 3.75rem;
}
header nav#about .about_links p + p {
  margin-left: 0.3125rem;
}


@media screen and (min-width: 560px) {
  header nav#about {
    margin-left: 0;
    border-radius: 1rem 0 0 0;
  }
  header nav#about .container {
    width: auto;
    margin-left: 0;
  }
  header nav#about .container .inner {
    max-width: none;
    margin: 0;
  }
  header nav#about .about_links {
    display: inline-block;
  }
  header nav#about .about_links p#link_about {
    width: 11.25rem;
  }
}
@media screen and (min-width: 750px) {
  header nav#about .about_links p {
    width: 6rem;
    height: 6rem;
  }
  header nav#about .about_links p#link_about {
    width: 15rem;
  }
  header nav#about .about_links p#link_about span {
    padding-top: 6rem;
  }
}
@media screen and (min-width: 875px) {
  header nav#about .container {
    max-width: 875px;
  }
}


/*** sponsors ***/
#sponsors {
  color: #231815;
  background-color: #fff;
}

#sponsors * {
  font-size: 0.75rem;
}

#sponsors a {
  color: #231815;
}

#sponsors > .container {
  max-width: 1300px;
  padding: 0;

  background-image: url(../images/bg_sponsor_l.svg), url(../images/bg_sponsor_r.svg);
  background-repeat: repeat-y, repeat-y;
/*  background-position: left -1rem top, right -1rem top;*/
  background-position: left top, right top;
  background-size: clamp(150px, 25vw, 300px), clamp(150px, 25vw, 300px);
}

#sponsors > .container > .inner {
  max-width: 908px;
  margin: 0 auto;
  padding: 2.25rem 0.5rem;
}

#sponsors > .container > .inner > div + div {
  margin-top: 4rem;
}


#sponsors h2 {
  display: block;
  position: relative;
  text-align: center;
  overflow: hidden;
}
#sponsors h2::before,
#sponsors h2::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 99em;
  border-top: 1px solid #ccc;
}
#sponsors h2::before {
  right: 80%;
  right: calc(50% + 95px);
}
#sponsors h2::after  {
  left:  80%;
  left:  calc(50% + 95px);
}

#sponsors h2 span {
  display: inline-block;
  width: 165px;
  height: 23px;
  background-image: url(../images/ttl_sponsors.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


#sponsors h3 {
  max-width: 85%;
}

#sponsors #sponsors_platinum ul,
#sponsors #sponsors_gold ul,
#sponsors #sponsors_silver ul,
#sponsors #sponsors_bronze ul,
#sponsors #sponsors_steel ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#sponsors #sponsors_platinum li > span,
#sponsors #sponsors_gold li > span,
#sponsors #sponsors_silver li > span,
#sponsors #sponsors_bronze li > span,
#sponsors #sponsors_steel li > span,
#sponsors #sponsors_platinum li > a,
#sponsors #sponsors_gold li > a,
#sponsors #sponsors_silver li > a,
#sponsors #sponsors_bronze li > a,
#sponsors #sponsors_steel li > a {
  position: relative;
  background-color: #f3f9ff;
  border: 1px solid #ccc;
  overflow: hidden;
}
#sponsors #sponsors_platinum li img,
#sponsors #sponsors_gold li img,
#sponsors #sponsors_silver li img,
#sponsors #sponsors_bronze li img,
#sponsors #sponsors_steel li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#sponsors #sponsors_platinum li,
#sponsors #sponsors_gold li {
  margin: 0.3125rem;
}
#sponsors #sponsors_silver li,
#sponsors #sponsors_bronze li,
#sponsors #sponsors_steel li {
  margin: 0.156rem;
}

#sponsors #sponsors_platinum li + li,
#sponsors #sponsors_gold li + li,
#sponsors #sponsors_silver li + li,
#sponsors #sponsors_bronze li + li,
#sponsors #sponsors_steel li + li {
/*  margin-top: 1rem;*/
}

#sponsors li a,
#sponsors li > span {
  position: relative;
}
#sponsors li a::before,
#sponsors li > span::before {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
/*
  background: #c7e6ff;
  opacity: 0.3;
  z-index: 1;
*/
}
#sponsors li a:hover::before,
#sponsors li > span:hover::before {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #e575ff;
  position: absolute;
  top: -100%;
  left: -100%;
  animation: light 3s infinite;
}
#sponsors li a:focus,
#sponsors li > span:focus {
  outline: 4px dotted #000;
  outline-offset: 0.25rem;
}


#sponsors #sponsors_platinum h3 {
  width: 350px;
  height: 142px;
  margin: 1.25rem auto;
  background-image: url(../images/sponsor_platinum@3x.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#sponsors #sponsors_platinum li {
  display: block;
  width: 100%;
  width: calc(100% - 1rem);
  max-width: 315px;
}
#sponsors #sponsors_platinum li > span,
#sponsors #sponsors_platinum li > a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffe0d0;
}
#sponsors #sponsors_platinum li > span > span,
#sponsors #sponsors_platinum li > a > span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 31.75%;
  overflow: hidden;
}


#sponsors #sponsors_gold h3 {
  width: 350px;
  height: 122px;
  margin: 1.25rem auto;
  background-image: url(../images/sponsor_gold@3x.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#sponsors #sponsors_gold li {
  display: block;
  width: 45%;
  width: calc(50% - 0.625rem);
  max-width: 165px;
}
#sponsors #sponsors_gold li > span,
#sponsors #sponsors_gold li > a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fffae3;
}
#sponsors #sponsors_gold li > span > span,
#sponsors #sponsors_gold li > a > span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 36.4%;
  overflow: hidden;
}


#sponsors #sponsors_silver h3 {
  width: 350px;
  height: 122px;
  margin: 1.25rem auto;
  background-image: url(../images/sponsor_silver@3x.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#sponsors #sponsors_silver li {
  display: block;
  width: 30%;
  width: calc(33% - 0.3125rem);
  max-width: 110px;
}
#sponsors #sponsors_silver li > span,
#sponsors #sponsors_silver li > a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #e6e6e6;
}
#sponsors #sponsors_silver li > span > span,
#sponsors #sponsors_silver li > a > span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 45.46%;
  overflow: hidden;
}


#sponsors #sponsors_bronze h3 {
  width: 350px;
  height: 122px;
  margin: 1.25rem auto;
  background-image: url(../images/sponsor_bronze@3x.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#sponsors #sponsors_bronze li {
  display: block;
  width: 23%;
  width: calc(25% - 0.3125rem);
  max-width: 86px;
}
#sponsors #sponsors_bronze li > span,
#sponsors #sponsors_bronze li > a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f1d9bf;
}
#sponsors #sponsors_bronze li > span > span,
#sponsors #sponsors_bronze li > a > span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 46.52%;
  overflow: hidden;
}


#sponsors #sponsors_specialsupporters h3 {
  width: 350px;
  height: 52px;
  margin: 1.25rem auto;
  background-image: url(../images/sponsor_supporters@3x.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#sponsors #sponsors_specialsupporters ul {
  text-align: center;
}

#sponsors #sponsors_specialsupporters li {
  display: inline-block;
  margin: 0 0.5em;
  line-height: 1.8;
}

#sponsors #sponsors_specialsupporters li a {
  display: block;
  width: 100%;
  height: 100%;
}
#sponsors #sponsors_specialsupporters li a:hover {
  text-decoration: underline;
}


@media screen and (min-width: 500px) {
  #sponsors #sponsors_platinum li {
    max-width: 680px;
  }
  #sponsors #sponsors_gold li {
    width: calc(50% - 2.8rem);
    max-width: 400px;
    margin: 0 1.18rem 1.875rem;
  }
  #sponsors #sponsors_silver li {
    max-width: 210px;
    margin: 0 0.3125rem 0.3125rem;
  }
  #sponsors #sponsors_bronze li {
    width: calc(25% - 0.375rem);
    max-width: 140px;
    margin: 0 0.1875rem 0.1875rem;
  }

  #sponsors #sponsors_specialsupporters li,
  #sponsors #sponsors_specialsupporters li a {
    font-size: 0.875rem;
  }
}


/*** sponsors_rofuku ***/
#sponsors_rofuku {
  padding: 1.25rem 0;
  background-color: #ffe6e6;
}


#sponsors_rofuku h3 {
  width: 350px;
  height: 52px;
  margin: 0 auto;
  background-image: url(../images/sponsor_rofuku@3x.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#sponsors_rofuku ul {
  text-align: center;
  padding: 0.75rem 0;
}

#sponsors_rofuku li {
  display: inline-block;
  margin: 0 0.5em;
}

#sponsors_rofuku li a {
  display: block;
  width: 100%;
  height: 100%;
}


@media screen and (min-width: 500px) {
  #sponsors_rofuku li,
  #sponsors_rofuku li a {
    font-size: 0.875rem;
    line-height: 2;
  }
}



/*** sponsors_recruitment ***/
#sponsors_recruitment {
  background-color: #380c00;
  padding: 3.125rem 0;
}

#sponsors_recruitment h3 {
  display: none;
}

#sponsors_recruitment p {
  width: 100%;
  max-width: 18.75rem;
  margin: 0 auto;
}
#sponsors_recruitment p + p {
  margin-top: 0.5rem;
}
#sponsors_recruitment p a,
#sponsors_recruitment p button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #231815;
  background-color: #fff;
  border: 4px solid #1e6e3a;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  line-height: 3;
  text-align: center;
}
#sponsors_recruitment p a {
  color: #fff;
  background-color: #1e6e3a;
}
#sponsors_recruitment p button {
  background-color: #ccc;
  border-color: #333;
}
#sponsors_recruitment p a::after,
#sponsors_recruitment p button::after {
  content: '\025b6';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 1.25rem;
  height: 100%;
  color: #1e6e3a;
}
#sponsors_recruitment p a::after {
  color: #fff;
}
#sponsors_recruitment p button::after {
  color: #333;
}
#sponsors_recruitment p a:hover {
  color: #231815;
  background-color: #fff;
}
#sponsors_recruitment p button:hover {
  background-color: #999;
}
#sponsors_recruitment p a:hover::after,
#sponsors_recruitment p button:hover::after {
  color: #fff;
}
#sponsors_recruitment p a:hover::after {
  color: #1e6e3a;
}


/*** announce ***/
#announce {
  padding: 1.5rem 0;
  background-color: #b30019;
  text-align: center;
}
#announce p + p {
  margin-top: 0.7em;
}


/*** greeting ***/
.greeting {
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: #ffffd4;
}

.greeting .container > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.greeting .container > div .message {
  color: #000;

  padding: 1rem;
  background-color: #fff;
  box-shadow: .3rem .3rem #666;
}
.greeting .container > div .signature {
  margin: 0;
  padding: 0;
  color: #000;

  margin-top: 1.5rem;
  max-width: 250px;
}

.greeting .container > div .signature .greeting_photo {
  border-radius: 2rem;
  overflow: hidden;
}

.greeting .container > div .signature figcaption {
  text-align: center;
}

.greeting .container > div .signature figcaption span {
  word-break: keep-all;
  display: inline-block;
}


@media screen and (min-width: 570px) {

  .greeting .container > div {
    justify-content: space-between;
    align-items: center;
  }

  .greeting .container > div .message {
    width: 65%;
  }
  .greeting .container > div .signature {
    width: 30%;
    max-width: none;
    margin-top: 0;
  }

}




/*
.greeting .greeting_photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 1920px;
  margin: 0 auto;
}
.greeting .greeting_photo img {
  max-width: none;
}

.greeting .container {
  position: relative;
  min-height: 400px;
  padding-top: 300px;
  padding-bottom: 1rem;
}
.greeting .container .message {
  background-color: rgba(255,255,255,0.9);
  border-radius: 1rem;
  padding: 1rem 1.5rem;
}
.greeting .container .message * {
  color: #000;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.greeting .container .message p + p {
  margin-top: 0.4em;
}
.greeting .container .message p.signature {
  margin-top: 0.8em;
  text-align: right;
}
.greeting .container .message p.signature span + span {
  padding-left: 0.8em;
}

@media screen and (min-width: 700px) {
  .greeting .container {
    padding-top: 0;
  }
  .greeting .container .message {
    position: absolute;
    bottom: 1rem;
    width: 350px;
    width: calc(100% - 275px);
  }
  .greeting.greeting_left .container .message {
    right: 1rem;
  }
}
@media screen and (min-width: 1610px) {
  .greeting .container .message {
    margin: 0 auto;
    left: 0;
    right: 0;
  }
}
*/

#greeting_chairman {}
/*
#greeting_chairman .greeting_photo {
  left: auto;
  right: -155px;
}
#greeting_chairman .container {}
@media screen and (min-width: 1610px) {
  #greeting_chairman .greeting_photo {
    right: calc((1920px - 100vw) / -2);
  }
}
@media screen and (min-width: 1920px) {
  #greeting_chairman .greeting_photo {
    left: 0;
    right: 0;
  }
}

#greeting_city_mayor {}
#greeting_city_mayor .greeting_photo {
  left: auto;
  left: -105px;
}
#greeting_city_mayor .container {}
@media screen and (min-width: 1710px) {
  #greeting_city_mayor .greeting_photo {
    right: calc((1920px - 100vw) / -2);
  }
}
@media screen and (min-width: 1920px) {
  #greeting_city_mayor .greeting_photo {
    left: 0;
    right: 0;
  }
}

#greeting_city_chairman {}
#greeting_city_chairman .greeting_photo {
  left: auto;
  right: -120px;
}
*/


/*** overview ***/
#overview {
  margin: 0 auto;
  padding: 2rem 0;
  background-image: url(../images/hanabi.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center left;
  padding: 2.5rem 0;
}
#overview * {
  color: #231815;
}

#overview .container {
}

#overview .inner {
  padding: 0.5rem;
  color: #231815;
  background-color: rgba(255,255,255,0.85);
  border-radius: 15px;
}

#overview .container h2 {
  display: block;
  font-size: 1.25rem;
  color: #fff;
  background-color: #2b569c;
  border-radius: 1.5rem;
  font-weight: bold;
  text-align: center;
  padding: 0.8em 0;
}
#overview .container > * {
  padding: 1rem;
}

#overview .inner > dl {
  margin: 1.5rem;
}

#overview .inner > dl > div + div {
  margin-top: 0.5em;
}

#overview .inner > dl dt {
  position: relative;
  display: inline-block;
  margin-bottom: 0.4em;
  text-align: center;
}
#overview .inner > dl dt::after {
  content: '';
  display: block;
  position: relative;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background-color: #2b569c;
}

#overview .inner > dl dd {
}

#overview .inner > dl dd time {
  display: inline-block;
}
#overview .inner > dl dd span {
  display: block;
}
#overview .inner > dl dd time + span {
  padding-left: 0.5em;
  display: inline-block;
}

#overview .inner > dl a {
  text-decoration: underline;
}
#overview .inner > dl a::before {
  content: '\025b6';
  display: inline-block;
  padding-right: 0.2em;
}
#overview .inner > dl a:hover {
  text-orientation: none;
}


#overview .inner ul.disclaimer {
  margin: 2rem 1.5rem 1.5rem;
}

#overview .inner ul.disclaimer li {
  background-color: rgba(255,153,153,0.6);
  padding: 0.2em 0.5em;
  border-left: 0.5rem solid #d37272;
}
#overview .inner ul.disclaimer li + li {
  margin-top: 0.8em;
}
#overview .inner ul.disclaimer li a {
  text-decoration: underline;
}
#overview .inner ul.disclaimer li a:hover {
  text-decoration: none;
}


@media screen and (min-width: 550px) {
  #overview .inner > dl > div {
    display: flex;
    flex-wrap: wrap;
  }
  #overview .inner > dl > div + div {
    margin-top: 1rem;
  }
  #overview .inner > dl > div dt {
    width: 4.5em;
    margin-right: 1em;
  }
  #overview .inner > dl > div dd {
    width: calc(100% - 5.5em);
  }

}



/*** subpage / title ***/
.title {
  background-color: #2b569c;
}
.title .container {
  padding: 3.375rem 0;
  background-image: url(../images/ico_hanabi2.svg), url(../images/ico_hanabi3.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: left -33% top -70%, right -25% bottom 25%;
  background-size: 50vw, 32vw;
}
.title .container .inner {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 1rem;
}

.title .container h1,
.title .container h2 {
  font-size: 1.25rem;
  text-align: center;
}

.title .container h1#ttl_about,
.title .container h2#ttl_about {
  display: block;
  width: 250px;
  height: 38px;
  margin: 0 auto;
  background-image: url(../images/ttl_about.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.title .container h1#ttl_information,
.title .container h2#ttl_information {
  display: block;
  width: 300px;
  height: 46px;
  margin: 0 auto;
  background-image: url(../images/ttl_information.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.title .container h1#ttl_car,
.title .container h2#ttl_car {
  display: block;
  width: 300px;
  height: 46px;
  margin: 0 auto;
  background-image: url(../images/ttl_car.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.title .container h1#ttl_train,
.title .container h2#ttl_train {
  display: block;
  width: 300px;
  height: 46px;
  margin: 0 auto;
  background-image: url(../images/ttl_train.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.title .container h1#ttl_bus,
.title .container h2#ttl_bus {
  display: block;
  width: 300px;
  height: 46px;
  margin: 0 auto;
  background-image: url(../images/ttl_bus.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.title .container h1#ttl_shuttlebus,
.title .container h2#ttl_shuttlebus {
  display: block;
  width: 300px;
  height: 46px;
  margin: 0 auto;
  background-image: url(../images/ttl_shuttlebus.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}




@media screen and (min-width: 315px) {
  .title .container {
    background-position: right -30px bottom -15px, left -45px top -40px, right -32px bottom 25px;
    background-size: 100px, 120px, 120px;
  }
}
@media screen and (min-width: 875px) {
  .title .container {
    width: 1300px;
    max-width: none;
    margin-left: calc((100vw - 1300px) / 2);
    background-position: right 180px bottom -30px, left 120px top -25px, right 120px bottom 40px;
  }
}


/*** subpage / guide ***/
section.guide {
  color: #231815;
  background-color: #fff;
  padding: 1rem 0;
}
section.guide:nth-child(3n+1) { background-color: #feca67; }
section.guide:nth-child(3n+2) { background-color: #c7e6ff; }
section.guide:nth-child(3n)   { background-color: #ffc7ac; }

section.guide h2 {
  ;
}
section.guide .container h2 {
  display: block;
  font-size: 1.25rem;
  color: #fff;
  background-color: #2b569c;
  border-radius: 1.5rem;
  font-weight: bold;
  text-align: center;
  padding: 0.8em 0;
}
section.guide .container > * {
/*  padding: 1rem;*/
}

section.guide .container .inner {
  padding: 0 1rem 1rem;
}

section.guide .container figure {
  margin: 0.625rem;
  padding: 1rem 0;
}

section.guide .container h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5em;
  padding: 0.2em 0 0.2em 1em;
  border-left: 5px solid #2b569c;
  background-color: #fff;
}

section.guide .container .inner section + section {
  margin-top: 1em;
}

section.guide .container .inner dl {
}
section.guide .container .inner dl > div,
section.guide .container .inner ul {
  background-color: rgba(255,255,255,0.5);
  padding: 0.1em 0.8em;
}
section.guide .container .inner dl > div + div{
  margin-top: 0.5em;
}
section.guide .container .inner dl dt {
  font-weight: bold;
}

section.guide .container .inner ul {
}

section.guide .container .inner ul li span {
  display: inline-block;
  word-break: keep-all;
}


/*** subpage / notice ***/
.notice {
  padding: 2rem 1rem;
  color: #231815;
  background-color: #fff;
}
.notice .container {
  padding: 0;
  max-width: 700px;
  border: 5px solid #1E6E3A;
  border-radius: 1rem;
/*  background-color: rgba(255,153,153,0.6);*/
  background-color: #B7E1BE;
  overflow: hidden;
}

.notice h2 {
  display: block;
  padding: 0.5em 0;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #1E6E3A;
}

.notice .content {
  padding: 1rem;
}
.notice .content p + p {
  margin-top: 1em;
}
.notice .content p a {
  color: #000;
}
.notice .content p a.button {
  display: block;
  position: relative;
  width: 100%;
  max-width: 250px;
  line-height: 60px;
  text-align: center;
  color: #000;
  background-color: #fff;
  border: 3px solid #2f5da9;
  border-radius: 1rem;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}


/*** subpage / submenu ***/
.submenu {
  color: #231815;
  background-color: #fff;
  padding: 2rem 0;
}
.submenu * {
  color: #231815;
}

.submenu ul,
.submenu dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 1rem;
}
.submenu ul li,
.submenu dl > div {
  width: 32%;
  margin: 0 0.5%;

}
.submenu ul.submenu-2 li,
.submenu dl.submenu-2 > div {
  width: 48%;
}
.submenu ul li a,
.submenu dl dt a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0.5em 0.5em 1.5em;
  color: #fff;
  background-color: #2b569c;
  text-align: center;
  border-radius: 1rem;
}


.submenu ul li a.parking_bus1 {
  padding-top: 2.8rem;
  padding-right: 2rem;
  background-image: url(../images/ico_parking_bus1@2x.png);
  background-repeat: no-repeat;
  /*background-size: 2rem;*/
  background-size: contain;
  background-position: right bottom;
}
.submenu ul li a.parking_bus2 {
  padding-top: 2.8rem;
  padding-right: 2rem;
  background-image: url(../images/ico_parking_bus2@2x.png);
  background-repeat: no-repeat;
  /*background-size: 2rem;*/
  background-size: contain;
  background-position: right bottom;
}
.submenu ul li a.parking_bus3 {
  padding-top: 2.8rem;
  padding-right: 2rem;
  background-image: url(../images/ico_parking_bus3@2x.png);
  background-repeat: no-repeat;
  /*background-size: 2rem;*/
  background-size: contain;
  background-position: right bottom;
}

.submenu ul li a.parking_bus1 > span,
.submenu ul li a.parking_bus2 > span,
.submenu ul li a.parking_bus3 > span {
  background-color: #2b569c;
}

.submenu ul li a.parking_bus1:hover > span,
.submenu ul li a.parking_bus2:hover > span,
.submenu ul li a.parking_bus3:hover > span {
  background-color: #c7e6ff;
}
.submenu ul li a *,
.submenu dl dt a * {
  font-size: clamp(0.8125rem, 82%, 1rem);
  color: #fff;
}
.submenu ul li a::after,
.submenu dl dt a::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 1rem;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid;
  border-color: transparent transparent #fff #fff;
  transform: rotate(-45deg);
}
.submenu ul li a:hover,
.submenu dl dt a:hover {
  color: #231815;
  background-color: #c7e6ff;
}
.submenu ul li a:hover *,
.submenu dl dt a:hover * {
  color: #231815;
}
.submenu ul li a:hover::after,
.submenu dl dt a:hover::after {
  border-color: transparent transparent #231815 #231815;
}
.submenu ul li a span,
.submenu dl dt a span {
  white-space: nowrap;
  display: block;
}
.submenu p {
  text-align: center;
}
.submenu p a {
  display: inline-block;
  padding: 0 0.5em;
  color: #fff;
  background-color: #2b569c;
}
.submenu p a:hover {
  color: #231815;
  background-color: #c7e6ff;
}


.submenu dl dd {
  margin: 1rem 0;
  border: 1px solid #999;
  padding: 0.5rem;
}
.submenu dl dd > p,
.submenu dl dd > p span {
  font-size: 0.8rem;
}
.submenu dl dd > p:first-child,
.submenu dl dd > p:first-child span {
  font-size: 1.8rem;
}
.submenu dl dd > p.caution {
  background-color: #dd0000;
  color: #ffffff;
  font-weight: bold;
}
.submenu dl dd > p.caution span {
  color: #ffffff;
  font-weight: bold;
}


.submenu dl dd > p:first-child span:last-child {
  font-weight: bold;
}

.submenu dl dd > p > span:first-child {
  font-size: 0.8rem;
}
.submenu dl dd > p > span:first-child::after {
  content: '→';
}



@media screen and (min-width: 500px) {
  .submenu ul li a span,
  .submenu dl dt a span {
    display: inline;
  }
}



/*** subpage / sponsors_notes ***/
#sponsors_notes {
  color: #231815;
  background-color: #fff;
}
#sponsors_notes * {
  color: #231815;
}
#sponsors_notes .container {
  padding: 3rem 1rem;
}

#sponsors_notes .container > div + div {
  margin-top: 1.5em;
}

#sponsors_notes h2 {
  display: block;
  padding-left: 0.5em;
  margin-bottom: 0.5em;
  border-left: 5px solid #2b569c;
  font-weight: bold;
}

#sponsors_notes .container > div p {
  margin-left: 0.5em;
}

#sponsors_notes .container > div a {
  text-decoration: underline;
}
#sponsors_notes .container > div a:hover {
  text-decoration: none;
}

#sponsors_notes .container > div a[download] {
  display: block;
  margin: 0.5em 0;
}
#sponsors_notes .container > div a[download]::before {
  content: '\025b6';
  display: inline-block;
  padding-right: 0.2em;
}

#sponsors_notes .container > div ul {
}
#sponsors_notes .container > div ul li {
  list-style-type: disc;
  margin-left: 1.5em;
}

#sponsors_notes .container > div ul.morals {
  counter-reset: cnt;
  margin-top: 0.5em;
}

#sponsors_notes .container > div ul.morals li {
  position: relative;
  list-style-type: none;
  margin-left: 1.75em;
}
#sponsors_notes .container > div ul.morals li:before {
  content: counter(cnt);
  counter-increment: cnt;
  background-color: #fff;
  border: 1px solid #000;
  display: block;
  float: left;
  line-height: 22px;
  margin-top: 0.25em;
  margin-left: -25px;
  font-size: 0.875rem;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}


#sponsors_notes .container > div .payment {
  margin: 1em;
  padding: 1em;
  border: 5px solid #2b569c;
}
#sponsors_notes .container > div .payment ul {
  margin-bottom: 1em;
}
#sponsors_notes .container > div .payment ul li {
  list-style-type: none;
  margin-left: 1em;
}
#sponsors_notes .container > div .payment ul li + li {
  margin-top: 1em;
}
#sponsors_notes .container > div .payment ul li span,
#sponsors_notes .container > div .payment p {
  font-size: 1.25rem;
}
#sponsors_notes .container > div .payment ul li span {
  display: inline-block;
}
#sponsors_notes .container > div .payment ul li span:nth-child(1) {
  display: block;
}
#sponsors_notes .container > div .payment ul li span:nth-child(1) { width: 8em; }
#sponsors_notes .container > div .payment ul li span:nth-child(2) { width: 5em; }
#sponsors_notes .container > div .payment ul li span:nth-child(3) { width: 3em; }

@media screen and (min-width: 500px) {
  #sponsors_notes .container > div .payment ul li span:nth-child(1) {
    display: inline-block;
  }
  #sponsors_notes .container > div .payment ul li + li {
    margin-top: 0;
  }
}



/*** subpage / car ***/

.parking_caution {
  padding-bottom: 1.5rem;
}

.parking_caution .parking_service_hour {
  margin: 1rem 0;
  padding: 0.5rem;
  background-color: #B7E1BE;
  text-align: center;
}
.parking_caution .parking_service_hour * {
  display: block;
}
.parking_caution .parking_service_hour strong {
  font-size: 1.25rem;
}

.parking_list h3,
.parking_list a {
  color: #231815;
}
section.guide .parking_list h3 {
  border-left-color: #e00;
  background-color: #ffe6e6;
  padding-left: 0.5em;
}
section.guide .parking_list .has_free h3 {
  border-left-color: #2b569c;
  background-color: #fff;
}
section.guide .parking_list .has_reserved h3 {
  border-left-color: #088409;
  background-color: #bbe5be;
}

.parking_list > div {
  margin-bottom: 1rem;
  background-color: rgba(255,255,255,0.4);
}
section.guide .parking_list > div > h3 {
  margin-bottom: 0;
}
.parking_list > div > ul {
  padding: 0.5rem;
  display: none;
}
.parking_list > div > ul li {
  list-style-type: disc;
  margin-left: 1.5em;
}
.parking_list > div > ul li a {
  text-decoration: underline;
  padding: 0.5em 0;
}
.parking_list > div > ul li a:hover {
  text-decoration: none;
}
.parking_list a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.parking_list > div.active > ul {
  display: block;
}

.parking_list h3 .park_id {
/*  display: none;*/
  display: inline-block;
  min-width: 1.2em;
  padding-right: 0.5em;
}
.parking_list h3 .park_num {
  float: right;
  padding-right: 0.1rem;
}
.parking_list h3 .park_num::after {
  content:'\025b2';
  display: inline-block;
  padding-left: 0;
}
.parking_list .active h3 .park_num::after {
  content:'\025bc';
}


.parking_list span.has_shuttlebus_1 {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 0.5rem;
  border-color: transparent transparent #2b569c #2b569c;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../images/ico_parking_bus1@2x.png);
  background-size: cover;
}
.parking_list span.has_shuttlebus_2 {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 0.5rem;
  border-color: transparent transparent #2b569c #2b569c;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../images/ico_parking_bus2@2x.png);
  background-size: cover;
}
.parking_list span.has_shuttlebus_3 {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 0.5rem;
  border-color: transparent transparent #2b569c #2b569c;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../images/ico_parking_bus3@2x.png);
  background-size: cover;
}

.parking_list span.has_price {
  display: inline-block;
  width: 22px;
  height: 28px;
  margin: 0 0.5rem;
  border-color: transparent transparent #2b569c #2b569c;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../images/ico_parking_price@2x.png);
  background-size: cover;
}
.parking_list span.has_shuttlebus_1 + span.has_price,
.parking_list span.has_shuttlebus_2 + span.has_price,
.parking_list span.has_shuttlebus_3 + span.has_price {
  margin-left: 0;
}
.parking_list span.has_free {
  display: none;
}



#traffic-shuttlebus {
}
#traffic-shuttlebus h3 {
  margin-bottom: 0;
  padding: 0.2rem 0.5rem;
  border-width: 5px;
  border-style: solid;
  border-color: #2b569c;
}
#traffic-shuttlebus h3 > span {
  display: block;
  text-align: center;
  border: 1px solid #333;
}
#traffic-shuttlebus h3 > span.pc {
  content: '';
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0.2rem auto;
  border: 2px solid;
  border-color: transparent transparent #2b569c #2b569c;
  transform: rotate(-45deg);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#traffic-shuttlebus .parking_detail {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: rgba(255,255,255,0.4);
}

#traffic-shuttlebus .parking_detail > ul {
  padding: 0.5rem;
}
#traffic-shuttlebus .parking_detail > ul li {
  list-style-type: disc;
  margin-left: 1.5em;
}
#traffic-shuttlebus .parking_detail > ul li a {
  text-decoration: underline;
  padding: 0.5em 0;
}
#traffic-shuttlebus .parking_detail > ul li a:hover {
  text-decoration: none;
}
#traffic-shuttlebus .parking_detail a {
  display: block;
  width: 100%;
  height: 100%;
}

#traffic-shuttlebus .parking_detail .shuttlebus_caution {
  padding: 0.2em 0.5em;
  color: #ad0000;
  background-color: rgba(255,255,255,0.7);
}
#traffic-shuttlebus .parking_detail .shuttlebus_caution strong {
  display: block;
}

@media screen and (min-width: 768px) {
  #traffic-shuttlebus h3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  #traffic-shuttlebus h3 > span {
    writing-mode: vertical-rl;
  }
  #traffic-shuttlebus h3 > span.pc {
    margin: 1rem;
    transform: rotate(-135deg);
  }
  #traffic-shuttlebus h3 > span span {
    display: block;
  }
}



/*** subpage / train ***/
.train_timetable {
  margin: 2rem auto;
}

.train_timetable h3 span {
  display: none;
}

.train_timetable dl {
  width: 100%;
  color: #231815;
  background-color: #fff;
}
.train_timetable dl > div {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
  min-height: 40px;
}
.train_timetable dl > div:first-child dd {
  border-top: 1px #231815 solid;
}
.train_timetable dl > div > div:last-child {
  border-right: 1px #231815 solid;
}
.train_timetable dl > div.train_timetable_header {
  background-color: #ddac40;
}


.train_timetable dl > div > div {
  display: none;
  width: 3.5em;
  text-align: center;
  border-width: 0 0 1px 1px;
  border-color: #231815;
  border-style: solid;
}
.train_timetable dl > div > div dt {
  display: none;
  padding: 0.1em 0.3em;
}
.train_timetable dl > div > div dd {
  display: none;
  padding: 0.1em 0.3em;
}

.train_timetable dl > div > div.dest,
.train_timetable dl > div > div.tokuyama,
.train_timetable dl > div > div.hikari,
.train_timetable dl > div > div.yanai,
.train_timetable dl > div > div.remarks {
  display: inline-block;
}

.train_timetable dl > div > div.dest dd,
.train_timetable dl > div > div.tokuyama dd,
.train_timetable dl > div > div.hikari dd,
.train_timetable dl > div > div.yanai dd,
.train_timetable dl > div > div.remarks dd {
  display: inline-block;
  width: 100%;
}
.train_timetable dl > div > div.dest {
  width: 4em;
  background-color: #ddac40;
}
.train_timetable dl > div > div.hikari {
  background-color: #B7E1BE;
}
.train_timetable dl > div > div.remarks {
  width: auto;
  width: calc(100% - 14.5em);
  text-align: left;
}
#modal .train_timetable dl > div:first-child dd {
  border-top: none;
}


@media screen and (min-width: 450px) {
  .train_timetable dl > div > div.kudamatsu,
  .train_timetable dl > div > div.shimata {
    display: block;
  }
  .train_timetable dl > div > div.kudamatsu dd,
  .train_timetable dl > div > div.shimata dd {
    display: block;
  }
  .train_timetable dl > div > div.remarks {
    width: auto;
    width: calc(100% - 21.5em);
  }
}

@media screen and (min-width: 540px) {
  .train_timetable dl > div > div.iwata {
    display: block;
  }
  .train_timetable dl > div > div.iwata dd {
    display: block;
  }
  .train_timetable dl > div > div.remarks {
    width: auto;
    width: calc(100% - 25em);
  }
}

@media screen and (min-width: 845px) {
  .train_timetable dl > div {
    min-height: none;
  }
  .train_timetable dl > div > div,
  .train_timetable dl > div > div dd {
    display: block;
  }

  .train_timetable dl > div > div {
    width: 4em;
    cursor: auto;
  }
  .train_timetable dl > div > div.remarks {
    width: auto;
    width: calc(100% - 36em);
  }
}


.train_timetable dl > div.active {
  display: block;
  padding: 1rem;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #231815;

  background-color: #356d7b;
}

.train_timetable dl > div.active > div {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-right: 1px solid #231815;
  background-color: #fff;
}
.train_timetable dl > div.active > div dt {
  display: block;
  width: 50%;
}
.train_timetable dl > div.active > div:first-child {
  border-top: 1px solid #231815;
}
.train_timetable dl > div.active > div dd,
.train_timetable dl > div.active > div.dest dd,
.train_timetable dl > div.active > div.tokuyama dd,
.train_timetable dl > div.active > div.hikari dd,
.train_timetable dl > div.active > div.yanai dd,
.train_timetable dl > div.active > div.remarks dd {
  display: block;
  width: 50%;
}

.train_timetable dl > div.active > div.dest dt,
.train_timetable dl > div.active > div.dest dd {
  background-color: #ddac40;
}
.train_timetable dl > div.active > div.hikari dt,
.train_timetable dl > div.active > div.hikari dd {
  background-color: #b7e1be;
}


.train_timetable dl > div.active > div.remarks {
}
.train_timetable dl > div.active > div.remarks dt {
  text-align: center;
}
.train_timetable dl > div.active > div.remarks dd {
}







/*** subpage / bus ***/
table.bus_timetable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 2rem auto;
  border-width: 1px 1px 0 0;
  border-color: #231815;
  border-style: solid;
  background-color: #fff;
  padding: 0.1em 0.3em;
}
table.bus_timetable th,
table.bus_timetable td {
  display: none;
  width: 3.5em;
  text-align: center;
  border-width: 0 0 1px 1px;
  border-color: #231815;
  border-style: solid;
  padding: 0.1em 0.3em;
}
table.bus_timetable th.dest,
table.bus_timetable td.dest,
table.bus_timetable th.hikari,
table.bus_timetable td.hikari,
table.bus_timetable th.cityoffice,
table.bus_timetable td.cityoffice,
table.bus_timetable th.civichall,
table.bus_timetable td.civichall,
table.bus_timetable th.aeon,
table.bus_timetable td.aeon,
table.bus_timetable th.murodumi,
table.bus_timetable td.murodumi,
table.bus_timetable th.yanai,
table.bus_timetable td.yanai,
table.bus_timetable th.tokuyama,
table.bus_timetable td.tokuyama,
table.bus_timetable th.kudamatsu,
table.bus_timetable td.kudamatsu,
table.bus_timetable th.remarks,
table.bus_timetable td.remarks {
  display: table-cell;
}
table.bus_timetable th.dest,
table.bus_timetable td.dest {
  width: 4em;
}
table.bus_timetable td.dest {
  background-color: #ddac40;
}
table.bus_timetable th.hikari,
table.bus_timetable td.hikari {
  background-color: #B7E1BE;
}
table.bus_timetable th.remarks,
table.bus_timetable td.remarks {
  width: 4em;
  text-align: left;
}

table.bus_timetable th span {
  word-break: keep-all;
}

table.bus_timetable thead tr {
  background-color: #ddac40;
}

table.bus_timetable tbody tr {
  cursor: pointer;
}
table.bus_timetable tbody tr:hover {
  background-color: #eee;
}

table.bus_timetable caption {
  margin-bottom: 1rem
}
table.bus_timetable caption h3 span {
  display: none;
}


table.bus_timetable tbody tr.active {
}
table.bus_timetable tbody tr.active th,
table.bus_timetable tbody tr.active td {
  display: block;
}

.traffic_caution {
  margin: 1rem 0 2rem;
}
.traffic_caution p {
  text-align: left;
}
.traffic_caution a {
  color: #231815;
  text-decoration: underline;
}
.traffic_caution a:hover {
  text-decoration: none;
}


.traffic_contact {
  font-size: 0.875rem;
}
.traffic_contact p + p {
  margin-top: 0.7em;
}
.traffic_contact p span {
  font-weight: bold;
}
.traffic_contact a {
  color: #231815;
  text-decoration: underline;
}
.traffic_contact a:hover {
  text-decoration: none;
}


@media screen and (min-width: 768px) {
  table.bus_timetable th,
  table.bus_timetable td {
    display: table-cell;
  }

  table.bus_timetable tbody tr {
    cursor: auto;
  }

  table.bus_timetable caption h3 span {
    display: inline;
  }
}


/*** stall ***/
#stall {
  min-height: 300px;
  padding: 5rem 0 2.625rem;
  background-image: url(../images/stall.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#stall p#stall_state {
  width: 350px;
  height: 42px;
  max-width: 100%;
  margin: 2rem auto 0;
  background-image: url(../images/ttl_stall.svg);
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}



/*** beachhouse ***/
#beachhouse {
  padding: 1rem 0;
  background-color: #c7e6ff;
}

#beachhouse h2 {
  display: block;
  margin: 1rem auto;
  text-align: center;
  width: 250px;
  height: 30px;
  max-width: 100%;
  background-image: url(../images/ttl_beachhouse.svg);
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#beachhouse img {
  width: auto;
  height: auto;
}

@media screen and (min-width: 530px) {
  #beachhouse ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #beachhouse ul li {
    width: 49%;
    margin: 0 0.5%;
  }
}



/*** modal ***/
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  opacity : 0;
  visibility: hidden;
  transition: 0.2s;
}
#modal.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#modal img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
  height: 90%;
  object-fit: contain;
}


/*** footer ***/

footer * {
  font-size: 0.875rem;
}

footer .footer_logo {
  margin: 1rem auto 0;
  text-align: center;
}


footer .footer_contact {
  margin: 1.25rem auto;
  max-width: 230px;
}

footer .footer_contact h2 {
  text-align: center;
  margin-bottom: 1em;
  padding-top: 1.5rem;
}

footer .footer_contact h3 {
  font-size: 1.125rem;
  text-align: center;
  margin-bottom: 0.5em;
}
footer .footer_contact p {
  line-height: 1.2;
}

footer .footer_contact p span {
  display: block;
}

footer .footer_contact li + li {
  margin-top: 0.3em;
}
footer .footer_contact li a {
  display: block;
  line-height: 40px;
  border: 1px solid #fff;
  border-radius: 0.5rem;
  text-align: center;
}
footer .footer_contact li a::before {
  content: '\025b6';
  display: inline-block;
  padding-right: 0.2em;
}

footer .footer_contact li a:hover {
  color: #231815;
  background-color: #fff;
}


footer .footer_links h2 {
  display: none;
}

footer .footer_links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer .footer_links li {
  width: 45%;
  width: calc(50% - 0.5rem);
}
footer .footer_links li a {
  display: block;
  width: 100%;
  height: 100%;
}
footer .footer_links li a:hover {
  opacity: 0.8;
}
footer .footer_links li a img {
  height: auto;
}

footer .footer_community {
  margin: 1.875rem 0;
  text-align: center;
}
footer .footer_community h2 {
  display: none;
}
footer .footer_community h2.support,
footer .footer_community h3 {
  display: block;
  margin-bottom: 0.5em;
}
footer .footer_community h2.support::before,
footer .footer_community h3::before {
  content:'-';
  padding-right: 0.5em;
}
footer .footer_community h2.support::after,
footer .footer_community h3::after {
  content:'-';
  padding-left: 0.5em;
}


footer .footer_archive {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.875rem 0;
  text-align: center;
}
footer .footer_archive h2 {
  display: block;
  margin-bottom: .5rem;
}
footer .footer_archive h2::after {
  content:'\27A4';
  padding-left: 0.5em;
}
footer .footer_archive ul {
  display: flex;
  flex-wrap: wrap;
}
footer .footer_archive li {
}
footer .footer_archive li a {
  padding: 0.2em 1em;
  color: #000;
  background-color: #fff;
  border-radius: 2rem;
  margin-left: 1em;
}
footer .footer_archive li a:hover {
  opacity: 0.8;
}


footer address {
  text-align: center;
  margin: 1rem 0;
  font-size: 0.75rem;
}


@media screen and (max-width: 500px) {
  footer {
    padding-bottom: clamp(75px, 25vw, 115px);
  }
}

@media screen and (min-width: 720px) {

  footer .container {
    overflow: hidden;
  }

  footer .footer_logo {
    width: 315px;
    float: left;
  }

  footer .footer_about {
    margin-left: 315px;
  }


  footer .footer_about .footer_contact {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    margin-top: 4rem;
    padding-left: 1rem;
  }

  footer .footer_about .footer_contact > h2 {
    width: 175px;
    text-align: left;
    padding-top: 0;
  }

  footer .footer_contact h3 {
    text-align: left;
  }

  footer .footer_contact p span {
    display: inline-block;
  }
  footer .footer_contact p span + span {
    padding-left: 0.8em;
  }

  footer .footer_contact li {
    display: inline;
  }
  footer .footer_contact li + li {
    padding-left: 0.5em;
  }

  footer .footer_contact li a {
    display: inline-block;
    line-height: normal;
    border: none;
    border-radius: unset;
    text-align: left;
  }
  footer .footer_contact li a:hover {
    text-decoration: underline;
    color: inherit;
    background-color: inherit;
  }

  footer .footer_links ul {
    justify-content: start;
  }

  footer .footer_links li {
    width: 45%;
    max-width: 240px;
    margin: 0 0.5rem;
  }


  footer .footer_community {
    margin-bottom: 0;
  }

  footer .footer_community h3 {
    margin-bottom: 0;
  }

  footer .footer_community li {
    display: inline-block;
  }
  footer .footer_community li + li {
    padding-left: 0.8em;
  }
}





/** 20250723 sponsors add **/
#sponsors #sponsors_platinum li > span > span > span,
#sponsors #sponsors_gold li > span > span > span,
#sponsors #sponsors_silver li > span > span > span,
#sponsors #sponsors_bronze li > span > span > span,
#sponsors #sponsors_steel li > span > span > span {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
  padding: 0 0.25rem;
}
#sponsors #sponsors_platinum li > span > span > span {
  font-size: 2rem;
}
#sponsors #sponsors_gold li > span > span > span {
  font-size: 1.5rem;
}
#sponsors #sponsors_silver li > span > span > span {
  font-size: 1rem;
}
#sponsors #sponsors_bronze li > span > span > span {
  font-size: 0.875rem;
}
#sponsors #sponsors_steel li > span > span > span {
  font-size: 0.875rem;
}

#sponsors #sponsors_platinum li > span > span > span > span {
  font-size: 1.75rem;
}
#sponsors #sponsors_gold li > span > span > span > span {
  font-size: 1.125rem;
}
#sponsors #sponsors_silver li > span > span > span > span {
  font-size: 0.9375rem;
}
#sponsors #sponsors_bronze li > span > span > span > span {
  font-size: 0.8125rem;
}
#sponsors #sponsors_steel li > span > span > span > span {
  font-size: 0.8125rem;
}

#sponsors #sponsors_platinum li > span > span > span > span > span {
  font-size: 1.25rem;
}
#sponsors #sponsors_gold li > span > span > span > span > span {
  font-size: 1rem;
}
#sponsors #sponsors_silver li > span > span > span > span > span {
  font-size: 0.875rem;
}
#sponsors #sponsors_bronze li > span > span > span > span > span {
  font-size: 0.75rem;
}
#sponsors #sponsors_steel li > span > span > span > span > span {
  font-size: 0.75rem;
}

#sponsors #sponsors_bronze li,
#sponsors #sponsors_steel li {
  display: block;
  width: 30%;
  width: calc(33% - 0.3125rem);
  max-width: 86px;
}
@media screen and (min-width: 500px) {
  #sponsors #sponsors_silver li {
    max-width: 234px;
  }
  #sponsors #sponsors_bronze li {
    max-width: 217px;
  }
  #sponsors #sponsors_steel li {
    max-width: 142px;
  }
}
@media screen and (min-width: 680px) {
  #sponsors #sponsors_steel li {
    width: 15%;
    width: calc(16.66% - 0.3125rem);
  }
  #sponsors #sponsors_bronze li {
  width: 23%;
  width: calc(25% - 0.3125rem);
}
}

#sponsors #sponsors_steel h3 {
  width: 350px;
  height: 122px;
  margin: 1.25rem auto;
  background-image: url(../images/sponsor_steel@3x.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#sponsors #sponsors_steel li > span,
#sponsors #sponsors_steel li > a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #e4e4e4;
}
#sponsors #sponsors_steel li > span > span,
#sponsors #sponsors_steel li > a > span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
}
#sponsors #sponsors_platinum li > span > span,
#sponsors #sponsors_platinum li > a > span {
  padding-top: 40%;
}
#sponsors #sponsors_gold li > span > span,
#sponsors #sponsors_gold li > a > span {
  padding-top: 55%;
}
#sponsors #sponsors_silver li > span > span,
#sponsors #sponsors_silver li > a > span {
  padding-top: 60%;
}
#sponsors #sponsors_bronze li > span > span,
#sponsors #sponsors_bronze li > a > span {
  padding-top: 100%;
}
@media screen and (min-width: 500px) {
  #sponsors #sponsors_platinum li > span > span,
  #sponsors #sponsors_platinum li > a > span {
    padding-top: 31.75%;
  }
  #sponsors #sponsors_gold li > span > span,
  #sponsors #sponsors_gold li > a > span {
    padding-top: 36.4%;
  }
  #sponsors #sponsors_silver li > span > span,
  #sponsors #sponsors_silver li > a > span {
    padding-top: 45.46%;
  }
  #sponsors #sponsors_steel li > span > span,
  #sponsors #sponsors_steel li > a > span {
    padding-top: 46.52%;
  }
  #sponsors #sponsors_bronze li > span > span,
  #sponsors #sponsors_bronze li > a > span {
    padding-top: 46.52%;
  }
}