@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=RocknRoll+One&display=swap');

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
}

.layout-container {
  position: relative;
  margin: auto;
  padding: 0 20px;
  max-width: 1440px;
}

@media (min-width: 768px) {
  .display-sp-only {
    display: none;
  }
}

@media (max-width: 767px) {
  .display-pc-only {
    display: none;
  }
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #ffffff;
  color: #002c45;
}

.header-topper {
  display: flex;
  align-items: center;
  width: 100%;
}

.header-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.header-title {
  display: grid;
  align-items: center;
  gap: 20px;
  grid-template-columns: 489fr 79fr;
}

.header-title-sub {
  margin-right: 10px;
  margin-bottom: 8px;
  font-size: 18px;
  white-space: nowrap;
}

.header-infroneer {
  margin-left: auto;
  overflow: hidden;
}

.header-infroneer img {
  width: 100%;
  height: auto;
}

.header-title-main {
  display: flex;
  align-items: center;
  margin: 0;
  padding-left: 4px;
}

.header-title-main-logo,
.header-title-main-vol {
  display: block;
  width: 100%;
  height: auto;
}

.header-menu {
  display: none;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background-color: #f0f0f0;
  background-image: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="%23002c45"><rect x="8" y="8" width="24" height="4"/><rect x="8" y="18" width="24" height="4"/><rect x="8" y="28" width="24" height="4"/></g></svg>');
}

.header-menu.open {
  background-image: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="%23002c45" transform="translate(20 20) rotate(45)"><rect x="-12" y="-2" width="24" height="4"/><rect x="-2" y="-12" width="4" height="24"/></g></svg>');
}

.header-nav {
  display: flex;
  gap: 40px;
  margin-left: 20px;
}

.header-nav > a {
  display: block;
  padding: 10px;
  border-bottom: 1px dashed #808c9b;
  color: #002c45;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.3s;
}

.header-nav > .header-nav-arrow {
  padding-right: 40px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15" fill="none"><path d="M17.6229 8.38216L11.1821 14.6331C11.0627 14.7494 10.9209 14.8417 10.7647 14.9046C10.6085 14.9676 10.441 15 10.2718 15C10.1027 15 9.93523 14.9676 9.77903 14.9046C9.62282 14.8417 9.48096 14.7494 9.36159 14.6331C9.24195 14.5171 9.14705 14.3793 9.0823 14.2276C9.01755 14.076 8.98422 13.9134 8.98422 13.7492C8.98422 13.5851 9.01755 13.4225 9.0823 13.2709C9.14705 13.1192 9.24195 12.9814 9.36159 12.8654L13.605 8.75234H1.25444C0.918722 8.74372 0.599738 8.60822 0.365428 8.37472C0.131118 8.14122 0 7.82817 0 7.50223C0 7.1763 0.131118 6.86324 0.365428 6.62974C0.599738 6.39624 0.918722 6.26076 1.25444 6.25213H13.6077L9.36429 2.13384C9.12276 1.89942 8.98706 1.58149 8.98706 1.24997C8.98706 0.918459 9.12276 0.600527 9.36429 0.366111C9.60583 0.131695 9.93342 6.53493e-09 10.275 0C10.6166 -6.53493e-09 10.9442 0.131695 11.1857 0.366111L17.6265 6.61706C17.8664 6.85201 18.0007 7.16957 18 7.50033C17.9993 7.83109 17.8638 8.14813 17.6229 8.38216Z" fill="%23002C45"/></svg>');
  background-position: right 10px bottom 16px;
  background-repeat: no-repeat;
}

.header-nav > a:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .header-title-sub {
    margin-bottom: 4px;
    font-size: 14px;
  }

  .header-title {
    grid-template-columns: 489fr 79fr 40px;
    gap: 8px;
  }

  .header-menu {
    display: block;
  }

  .header-nav {
    display: none;
    margin-left: 0;
    padding: 20px 40px;
    background-color: #002c45;
  }

  .header-nav.open {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: block;
  }

  .header-nav > a {
    color: #ffffff;
  }

  .header-nav > .header-nav-arrow {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15" fill="none"><path d="M17.6229 8.38216L11.1821 14.6331C11.0627 14.7494 10.9209 14.8417 10.7647 14.9046C10.6085 14.9676 10.441 15 10.2718 15C10.1027 15 9.93523 14.9676 9.77903 14.9046C9.62282 14.8417 9.48096 14.7494 9.36159 14.6331C9.24195 14.5171 9.14705 14.3793 9.0823 14.2276C9.01755 14.076 8.98422 13.9134 8.98422 13.7492C8.98422 13.5851 9.01755 13.4225 9.0823 13.2709C9.14705 13.1192 9.24195 12.9814 9.36159 12.8654L13.605 8.75234H1.25444C0.918722 8.74372 0.599738 8.60822 0.365428 8.37472C0.131118 8.14122 0 7.82817 0 7.50223C0 7.1763 0.131118 6.86324 0.365428 6.62974C0.599738 6.39624 0.918722 6.26076 1.25444 6.25213H13.6077L9.36429 2.13384C9.12276 1.89942 8.98706 1.58149 8.98706 1.24997C8.98706 0.918459 9.12276 0.600527 9.36429 0.366111C9.60583 0.131695 9.93342 6.53493e-09 10.275 0C10.6166 -6.53493e-09 10.9442 0.131695 11.1857 0.366111L17.6265 6.61706C17.8664 6.85201 18.0007 7.16957 18 7.50033C17.9993 7.83109 17.8638 8.14813 17.6229 8.38216Z" fill="%23ffffff"/></svg>');
  }
}

.tile-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.tile-container-area-index-wrapper {
  padding: 0 0 20px;
  background-color: #fdf2e3;
}

.tile-container-area-wrapper {
  padding: 20px 0;
  background-color: #fdf2e3;
}

.tile-content-full {
  grid-column: 1 / -1;
}

.tile-content-full .tile-content,
.tile-content-full .tile-content-filler {
  aspect-ratio: 1326 / 736;
}

.tile-content-half .tile-content,
.tile-content-half .tile-content-filler {
  aspect-ratio: 653 / 360;
}

.tile-subcontainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  aspect-ratio: 653 / 360;
}

.tile-subcontainer .tile-content,
.tile-subcontainer .tile-content-filler {
  aspect-ratio: auto;
}

.tile-content {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.tile-new {
  position: absolute;
  top: 0;
  right: -100px;
  z-index: 10;
  width: 200px;
  padding-top: 50px;
  padding-bottom: 22px;
  height: 27px;
  background-color: #e6316d;
  color: #ffffff;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  transform: rotate(45deg);
  transform-origin: top center;
}
.tile-upcoming {
  position: absolute;
  top: 0;
  right: -100px;
  z-index: 10;
  width: 200px;
  padding-top: 60px;
  padding-bottom: 13px;
  height: 27px;
  background-color: #dae000;
  color: #002C45;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  transform: rotate(45deg);
  transform-origin: top center;
}

.tile-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: all 0.3s;
}
.tile-background.is-disabled {
  /* 画像の上に擬似要素（黒い膜）を重ねる */
  position: relative;
}

.tile-background.is-disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 30, 47,0.7);
}

:link:hover .tile-background {
  inset: -5%;
  width: 110%;
  height: 110%;
}

.tile-background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tile-body {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background-color: rgba(0, 30, 47,0.8);
}

.tile-tags-container {
  display: flex;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile-tag {
  display: flex;
  align-items: center;
  padding: 0 6px;
  height: 30px;
  background-color: #ffffff;
  color: #002c45;
  font-size: 16px;
  font-weight: bold;
}

.tile-tag-area {
  color: #ffffff;
}

.area-tokai {
  background-color: #ca0c17;
}
.area-hokkaido {
  background-color: #008cd6;
}
.area-tohoku {
  background-color: #accc00;
}
.area-kitakanto {
  background-color: #9b0383;
}
.area-tokyo {
  background-color: #e94273;
}
.area-nishikanto {
  background-color: #0099db;
}
.area-chugoku {
  background-color: #4c001a;
}
.area-shinshu {
  background-color: #a52e8c;
}
.area-hokuriku {
  background-color: #86a939;
}
.area-shikoku {
  background-color: #5f3a00;
}
.area-kansai {
  background-color: #36425b;
}
.area-kyushuokinawa {
  background-color: #d17b00;
}

.tile-tag-icon1,
.tile-tag-icon2,
.tile-tag-icon3,
.tile-tag-icon4,
.tile-tag-icon5 {
  border: solid 1px;
  padding: 0 5px;
  padding-left: 25px;
  height: 28px;
  border-radius: 4px;
  background: #ffffff no-repeat 4px center;
  font-size: 14px;
}

.tile-tag-icon1 {
  border-color: #e63164;
  color: #e63164;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M14.3797 12.4137L10.4878 14.2013L10.2389 7.02837L14.1308 5.2408M9.91081 6.13458L8.90389 5.76123C8.76812 6.03276 8.62105 6.3156 8.46265 6.60976L9.65059 7.05099L9.8995 14.2239L5.71342 12.64L5.58897 9.09878L5.47584 8.98564C5.44189 8.90644 5.23825 8.63491 4.96672 8.25025L5.1138 12.6513L1.22188 14.4388L0.972979 7.26596L3.52988 6.08933L3.34886 5.77255C3.24703 5.58021 3.14521 5.41051 3.06602 5.2408L0 6.65502L0.316784 15.9096L5.44189 13.5451L10.2389 15.3553L15.364 12.9907L15.0359 3.77002L9.91081 6.13458Z" fill="%23E63164"/><path d="M4.43642 1.63159C4.8324 1.21299 5.36415 0.952771 5.9864 0.91883C6.59734 0.896202 7.16303 1.12248 7.58164 1.51846C8.00024 1.91444 8.26046 2.44618 8.2944 3.06843C8.2944 3.18157 8.27177 3.36259 8.22652 3.58887C8.13601 3.97353 7.93236 4.47133 7.68346 4.96914C7.32142 5.71584 6.85756 6.51912 6.50683 7.11874C6.41632 7.27713 6.3145 7.42421 6.24662 7.55998C5.96378 7.164 5.5678 6.60962 5.18313 6.02131C4.84372 5.50088 4.50431 4.9352 4.26672 4.42608C4.14227 4.16586 4.04045 3.92828 3.97256 3.72463C3.90468 3.52098 3.87074 3.35128 3.87074 3.23814C3.84811 2.6272 4.07439 2.06151 4.47037 1.64291M3.76892 5.55745C4.64007 7.10743 5.87327 8.68003 5.87327 8.70266L6.28056 9.22309L6.65391 8.66872C6.65391 8.66872 7.31011 7.69574 7.95499 6.53043C8.27177 5.94212 8.59987 5.31986 8.84877 4.70892C8.97322 4.40345 9.07505 4.12061 9.14293 3.84908C9.21081 3.57755 9.25606 3.30602 9.25606 3.05712C9.1995 1.3035 7.7174 -0.0654629 5.97509 0.00241933C4.22146 0.0589879 2.85251 1.54108 2.92039 3.28339C2.9317 3.54361 2.98827 3.80383 3.09009 4.06404C3.24849 4.53922 3.5087 5.04833 3.80286 5.56876" fill="%23E63164"/><path d="M6.10727 4.18881C6.67296 4.16619 7.1255 3.69101 7.10288 3.12533C7.08025 2.55964 6.60507 2.10709 6.03939 2.12972C5.4737 2.15235 5.02115 2.62752 5.04378 3.19321C5.06641 3.75889 5.54158 4.21144 6.10727 4.18881Z" fill="%23E63164"/></svg>');
}

.tile-tag-icon2 {
  border-color: #008cd6;
  color: #008cd6;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10.2184 11.5445C10.2731 11.1647 10.3072 10.7731 10.2927 10.3944C10.2408 9.48677 9.93715 8.61189 9.70702 7.75206C9.46386 6.84357 9.31359 5.89277 9.4692 4.98163C9.49812 4.76522 9.56379 4.55633 9.62946 4.34745C9.69513 4.13857 9.78135 3.94156 9.88812 3.75643C10.2159 3.16424 10.7828 2.75136 11.4235 2.61428L11.5531 2.5795C12.0804 2.47285 12.623 2.55334 13.0912 2.81027C13.3173 2.9409 13.5357 3.10833 13.7143 3.32125L13.96 3.65526L14.154 4.05533L14.167 4.104C14.4813 4.88907 14.5893 5.74688 14.5547 6.5908C14.52 7.43471 14.3676 8.29283 14.1654 9.09475C14.0589 9.54062 13.9201 9.99518 13.7974 10.4454C13.6747 10.8956 13.5477 11.3296 13.4413 11.7755L13.2251 11.7465C12.2059 11.6374 11.2333 11.6375 10.2022 11.5489" fill="%23008CD6"/><path d="M10.7787 12.4033C11.6217 12.438 12.469 12.4889 13.3045 12.5604C13.1456 12.5508 13.2522 14.0524 13.2427 14.2114C13.1843 15.0965 12.5466 15.8935 11.6692 15.9898C10.6578 16.1046 9.74788 15.2358 9.7067 14.2384C9.69887 14.0144 9.80175 12.3872 10.0665 12.4031C10.2946 12.4114 10.5345 12.3993 10.7625 12.4076" fill="%23008CD6"/><path d="M6.51912 7.78952C6.40739 7.43695 6.30752 7.06382 6.2606 6.69387C6.13204 5.82419 6.26393 4.95419 6.26935 4.06595C6.28663 3.15715 6.17746 2.2301 5.7572 1.43866C5.55576 1.07539 5.29384 0.745724 4.98013 0.482119C4.4728 0.0791829 3.80691 -0.0725653 3.15755 0.0320742L3.0279 0.06685C2.49197 0.141061 2.00814 0.409948 1.65194 0.766316C1.47167 0.936389 1.32063 1.15078 1.22255 1.36836C1.10826 1.59029 1.03507 1.83596 1.01483 2.08482L1.02786 2.13349C0.942263 2.85197 1.05981 3.55073 1.29948 4.2515C1.53481 4.93606 1.85985 5.63132 2.22482 6.2811C2.6115 7.01199 3.03493 7.75041 3.38602 8.54302L3.59669 8.48651C4.5852 8.22134 5.55115 8.06656 6.54401 7.81762" fill="%23008CD6"/><path d="M6.10329 8.70081C5.28001 8.86949 4.44052 9.04251 3.62158 9.22742C3.78363 9.18395 3.88474 10.6 3.90762 10.7504C4.07611 11.5746 4.79992 12.2672 5.66662 12.2607C6.17131 12.2645 6.62707 12.0205 6.94652 11.6566C7.26597 11.2927 7.44911 10.8089 7.40421 10.3167C7.38017 10.0971 7.04869 8.53415 6.78507 8.58747C6.5582 8.64833 6.3183 8.66052 6.08708 8.70516" fill="%23008CD6"/></svg>');
}

.tile-tag-icon3 {
  border-color: #9b0383;
  color: #9b0383;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M5.12078 4.31575C5.39882 3.14945 6.56205 2.4099 7.74874 2.67617C7.90953 2.71926 8.00369 2.88235 7.97669 3.04745C7.94968 3.21255 7.77051 3.30241 7.60541 3.2754C6.76069 3.08353 5.91188 3.61436 5.72001 4.45908C5.67692 4.61987 5.51382 4.71404 5.34873 4.68703C5.18794 4.64395 5.08946 4.49693 5.12078 4.31575Z" fill="%239B0383"/><path d="M10.5527 8.09773C10.9521 7.63606 11.2402 7.0756 11.376 6.43991C11.8557 4.3281 10.5426 2.21844 8.43506 1.72267C7.80368 1.57072 7.17744 1.59249 6.58537 1.74405C5.79057 1.94468 5.0684 2.38881 4.53686 3.02189C4.1535 3.48787 3.84939 4.04402 3.71352 4.67971C3.23383 6.79152 4.54698 8.90118 6.65448 9.39695C7.28587 9.54889 7.9121 9.52713 8.50418 9.37557C9.29897 9.17494 10.0211 8.73081 10.5527 8.09773ZM9.38928 10.7674C8.41846 11.1104 7.36325 11.1896 6.29343 10.9374C3.32513 10.2454 1.44898 7.27834 2.14524 4.29396C2.39313 3.24021 2.93359 2.31656 3.66038 1.59793C4.2433 1.03032 4.92901 0.593657 5.70888 0.320089C6.66362 -0.0272577 7.73491 -0.102108 8.78866 0.145777C11.757 0.83773 13.6331 3.80481 12.9368 6.78919C12.6846 7.85902 12.1485 8.76659 11.4217 9.48522C10.8388 10.0528 10.1531 10.4895 9.3732 10.7631" fill="%239B0383"/><path d="M12.2906 15.4395L9.90404 11.6119C10.6561 11.3136 11.3578 10.8812 11.9525 10.334L14.3391 14.1617C14.5243 14.4353 14.5711 14.7753 14.4935 15.0647C14.416 15.3541 14.2376 15.6338 13.964 15.819C13.3888 16.1646 12.6567 16.0029 12.2906 15.4395Z" fill="%239B0383"/></svg>');
}

.tile-tag-icon4 {
  border-color: #abcc07;
  color: #abcc07;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.4842 2.75039L7.67546 2.94087L7.90177 2.9399L8.09225 2.74864L8.16613 0.260573C8.16381 0.118817 8.04208 0.0117334 7.90283 0.000374552L7.59197 0C7.45021 0.00231611 7.34313 0.124045 7.33177 0.263298" fill="%23AACD04"/><path d="M10.5906 3.37589L10.6575 3.62839L10.8638 3.73682L11.1299 3.67248L12.4369 1.55148C12.5029 1.42224 12.4596 1.27297 12.344 1.20942L12.0744 1.06112C11.9451 0.995063 11.7959 1.0384 11.7323 1.15397" fill="%23AACD04"/><path d="M12.9776 5.48057L12.9138 5.75156L13.0342 5.9432L13.289 6.01811L15.4839 4.83699L15.5764 4.48645L15.4275 4.21892L15.0769 4.12649" fill="%23AACD04"/><path d="M2.35697 6.13659L2.61197 6.05607L2.7204 5.84979L2.64239 5.58111L0.521384 4.27417C0.392144 4.20811 0.242878 4.25145 0.179323 4.36701L0.0310273 4.63666C-0.0350315 4.7659 0.00830907 4.91517 0.123874 4.97873" fill="%23AACD04"/><path d="M4.47493 3.75396L4.72975 3.82888L4.93506 3.711L4.99881 3.44L3.81768 1.24512L3.46714 1.15268L3.19711 1.31525L3.10468 1.66579" fill="%23AACD04"/><path d="M6.28986 10.3747C6.6849 10.6873 6.73538 11.1064 6.73751 11.4035L9.38485 11.3794C9.38272 11.0822 9.4193 10.6508 9.8176 10.3279C10.4823 9.78535 10.8724 8.96639 10.8585 8.11585C10.8467 6.55903 9.56377 5.30657 8.00695 5.31837C6.45013 5.33017 5.19767 6.61315 5.20947 8.16997C5.22086 9.03418 5.61284 9.82674 6.29237 10.361M7.97687 4.479C10.0025 4.45409 11.668 6.0875 11.6929 8.11312C11.7003 9.231 11.2103 10.2861 10.344 11.0038C10.2283 11.0956 10.2169 11.2349 10.2402 11.4936C10.2462 11.6925 10.2695 11.9512 10.079 12.1425L9.82518 12.2939L9.82906 13.1991L9.84142 14.2896L8.8761 14.6217L8.69332 14.6165C8.65327 14.8353 8.38324 14.9979 8.08605 15C7.77519 14.9996 7.52172 14.8402 7.47472 14.6337L7.29193 14.6285L6.3187 14.309L6.30633 13.2185L6.29128 12.2971L6.04898 12.1538C5.85771 11.9633 5.87542 11.7121 5.87195 11.4995C5.87849 11.2322 5.87367 11.1041 5.74944 11.0107C4.85997 10.3108 4.35512 9.28556 4.33659 8.15151C4.31167 6.12589 5.94509 4.46039 7.97071 4.43547" fill="%23AACD04"/></svg>');
}

.tile-tag-icon5 {
  border-color: #f28d00;
  color: #f28d00;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M3.30658 11.1983C3.80596 11.2703 4.32096 11.3152 4.85728 11.3544C4.92015 11.589 4.9773 11.8023 5.04018 12.037C5.3431 13.1675 5.81095 14.2309 6.38392 15.1748C6.54354 15.4292 6.70315 15.6836 6.87839 15.911C6.6209 15.8886 6.3733 15.8178 6.13142 15.7683C4.69003 15.4229 3.36478 14.6578 2.30233 13.5936C2.5339 13.3486 2.73271 13.0668 2.89876 12.7479C3.06481 12.4291 3.17677 12.079 3.26168 11.7133L3.32791 11.1926" fill="%23F28D00"/><path d="M7.16958 14.6924C6.63509 13.8068 6.23848 12.8386 5.95271 11.7721L5.84412 11.3668C6.75449 11.3515 7.67476 11.2878 8.5935 11.1331C8.67923 11.453 8.76497 11.773 8.93602 12.0701C9.19127 12.5961 9.56308 13.0452 10.0187 13.3803C10.4529 13.7212 10.9497 13.9539 11.4292 14.1226C11.8604 14.2814 12.2802 14.3975 12.6787 14.5194C12.1229 14.9198 11.5017 15.2463 10.815 15.4989C9.92061 15.83 9.00187 15.9847 8.0915 16C7.75245 15.5879 7.45607 15.1643 7.16958 14.6924Z" fill="%23F28D00"/><path d="M5.10849 4.95241C4.81109 6.06089 4.60055 7.23754 4.56218 8.4595C4.54014 9.05981 4.56648 9.67002 4.66252 10.2844L4.68538 10.3697C4.19744 10.3405 3.73081 10.3055 3.2741 10.2221C3.18377 9.62901 3.00241 9.03747 2.7841 8.47869C2.51017 7.79765 2.18939 7.19775 1.87433 6.61917C1.55927 6.0406 1.27125 5.47764 1.07427 4.91315L0.883005 4.36999C1.29736 3.52738 1.85267 2.78418 2.54892 2.14038C3.29772 1.43678 4.21452 0.848193 5.25247 0.455767C5.87524 0.220311 6.49953 0.0758906 7.11964 0.00117904C6.81306 0.563428 6.51791 1.16834 6.2498 1.78886C5.80575 2.7766 5.42721 3.83823 5.12982 4.9467" fill="%23F28D00"/><path d="M2.0776 12.3275L1.70702 12.9069C1.21979 12.283 0.816338 11.5452 0.513828 10.7575L0.433812 10.4589C1.04291 10.6843 1.68895 10.877 2.36622 11.0156C2.37388 11.4708 2.26916 11.9332 2.0776 12.3275Z" fill="%23F28D00"/><path d="M2.27008 10.0597C1.52311 9.91693 0.822975 9.69302 0.138459 9.44206C-0.0734238 8.31002 -0.0392409 7.15776 0.221209 6.08205L0.337347 5.66228C0.78958 6.75278 1.42807 7.77052 1.8803 8.86102C2.05289 9.24916 2.18853 9.67005 2.27008 10.0597Z" fill="%23F28D00"/><path d="M9.07862 7.14121C8.8246 7.64365 8.64599 8.17161 8.54853 8.74641C8.44954 9.23017 8.44158 9.71241 8.45495 10.1889C7.51488 10.3494 6.57328 10.4188 5.66291 10.4341L5.60004 10.1995C5.54247 9.64333 5.51196 9.10282 5.54543 8.54517C5.58533 7.41424 5.77035 6.31302 6.05784 5.25292C6.34534 4.19283 6.71397 3.17958 7.11537 2.20327C7.4345 1.4319 7.7864 0.697478 8.17106 0C8.76566 0.000710739 9.36179 0.0924576 9.94802 0.232582C11.2656 0.542529 12.4926 1.19682 13.4937 2.1174L13.0462 2.58024C12.7194 2.89642 12.3926 3.21261 12.0288 3.56155C11.3383 4.22668 10.6108 4.92457 9.97174 5.78167C9.65219 6.21022 9.35969 6.65439 9.10567 7.15683" fill="%23F28D00"/><path d="M9.40306 9.9731C9.39693 9.60895 9.41785 9.26042 9.48143 8.90045C9.66381 7.95997 10.1151 7.0846 10.686 6.31435C11.2569 5.54411 11.9631 4.85194 12.6323 4.19252C12.9747 3.8493 13.3228 3.52739 13.6439 3.18988L14.0701 2.73275C14.6712 3.44043 15.1886 4.26201 15.5311 5.19902C15.7837 5.88577 15.951 6.59539 16.0059 7.31226C15.3961 7.68141 14.7535 8.01362 14.0626 8.33593C12.6438 9.01331 11.0684 9.61833 9.40306 9.9731Z" fill="%23F28D00"/><path d="M10.5725 12.6322C10.2308 12.3808 9.9573 12.0426 9.75767 11.6388C9.65214 11.4156 9.56793 11.1867 9.52068 10.925C11.314 10.5359 12.969 9.88673 14.4617 9.14383C15.009 8.88286 15.5236 8.58494 16.0169 8.29274C15.999 8.82335 15.9114 9.34977 15.7911 9.83925C15.4145 11.3347 14.6182 12.7141 13.49 13.7937C12.8923 13.6109 12.2791 13.4551 11.7183 13.2396C11.2871 13.0808 10.8872 12.8679 10.5668 12.6108" fill="%23F28D00"/></svg>');
}

.tile-tag-color1 {
  background-color: #dae000;
}

.tile-tag-color2 {
  background-color: #466f86;
  color: #ffffff;
}

.tile-caption {
  color: #ffffff;
  font-size: 18px;
  font-weight: normal;
  font-feature-settings: "palt";
}

.tile-content-full .tile-caption {
  font-size: 30px;
  font-weight: bold;
  margin:  0 0.5em 0.5em 0.5em ;
}
.tile-content-full .tile-tags-container {
  margin: 0.5em 0.5em 0 0.5em;
}

.tile-play-button {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 96px;
  height: 96px;
  background-image: url('../images/play.svg?260615');
  background-size: contain;
}

.tile-content-filler {
  background-image: url('../images/tile-blank-normal.svg');
  background-size: cover;
  background-position: center;
}

.tile-subcontainer .tile-content-filler {
  background-image: url('../images/tile-blank-short.svg');
}

.tile-subcontainer .tile-content-filler:nth-child(4) {
  display: none;
}

.full-movie-button {
  position: absolute;
  top: 22px;
  left: 16px;
  display: block;
  border: solid 1px #ffffff;
  padding: 14px 20px;
  width: 197px;
  text-align: center;
  background-color: rgb(0 0 0 / 0.2);
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 2px 4px rgb(0 0 0 / 0.25);
  transition: background-color 0.3s;
}

.full-movie-button:hover {
  background-color: #002c45;
}

@media (max-width: 767px) {
    .tile-container {
      display: flex;
      flex-direction: column;
    }
    .tile-content-half:has(.tile-content-filler),
    .tile-content-half:has(.tile-subcontainer:empty),
    .tile-content-filler {
      display: none;
    }
    .tile-container > * + * {
      margin-top: 20px;
    }
  .tile-content-full .tile-content,
  .tile-content-half .tile-content,
  .tile-content-full .tile-content-filler,
  .tile-content-half .tile-content-filler {
    aspect-ratio: 16 / 9;
  }

  .tile-subcontainer {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: auto;
  }

  .tile-subcontainer .tile-content,
  .tile-subcontainer .tile-content-filler {
    aspect-ratio: 16 / 29;
  }

  .tile-content-filler {
    display: none;
  }

  .tile-subcontainer .tile-content-filler:nth-child(4) {
    display: block;
  }

  .tile-subcontainer .tile-content-filler:nth-child(3),
  .tile-subcontainer .tile-content-filler:nth-child(3) + .tile-content-filler {
    display: none;
  }

  .tile-tag {
    height: 21px;
    font-size: 14px;
  }

  .tile-body {
    padding: 10px 8px;
  }

  .tile-caption {
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tile-content-full .tile-caption {
    font-size: 14px;
    margin: 0;
    font-weight: normal;
  }
  .tile-content-full .tile-tags-container {
    margin: 0;
  }

  .tile-upcoming {
    padding-top: 40px;
    padding-bottom: 4px;
    font-size: 13px;
  }
  .tile-new {
    padding-top: 40px;
    padding-bottom: 8px;
    font-size: 16px;
  }

  .tile-play-button {
    width: 64px;
    height: 64px;
  }
}

.index-tile-container {
  margin-bottom: 20px;
}

.top-to-area-wrapper {
  border-bottom: solid 1px #ffffff;
  background-color: #002c45;
}

.top-to-area-container {
  position: relative;
  z-index: 0;
  padding-top: 35px;
  min-height: 308px;
}

.top-to-area-text {
  margin-left: 26px;
  margin-bottom: 0;
  color: #ffffff;
  font-family: 'RocknRoll One', sans-serif;
  font-size: 24px;
  line-height: 1.52;
}

.top-to-area-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
  margin-left: 26px;
  padding: 20px;
  width: 463px;
  max-width: calc(100% - 40px);
  border-radius: 10px;
  background-color: #dae000;
  color: #002c45;
  font-family: 'RocknRoll One', sans-serif;
  font-size: 24px;
  text-decoration: none;
  transition: opacity 0.3s;
}

.top-to-area-link:hover {
  opacity: 0.7;
}

.top-to-area-link::after {
  content: '';
  display: block;
  width: 30px;
  height: 26px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="26" viewBox="0 0 30 26" fill="none"><path d="M29.3715 14.5291L18.6369 25.3641C18.4379 25.5656 18.2015 25.7256 17.9411 25.8347C17.6808 25.9438 17.4016 26 17.1197 26C16.8378 26 16.5587 25.9438 16.2984 25.8347C16.038 25.7256 15.8016 25.5656 15.6026 25.3641C15.4033 25.1629 15.2451 24.9241 15.1372 24.6612C15.0293 24.3983 14.9737 24.1166 14.9737 23.832C14.9737 23.5475 15.0293 23.2657 15.1372 23.0028C15.2451 22.74 15.4033 22.5011 15.6026 22.3L22.6749 15.1707H2.09073C1.5312 15.1558 0.999563 14.9209 0.609047 14.5162C0.218531 14.1115 0 13.5688 0 13.0039C0 12.4389 0.218531 11.8963 0.609047 11.4916C0.999563 11.0868 1.5312 10.852 2.09073 10.837H22.6795L15.6072 3.69866C15.2046 3.29234 14.9784 2.74124 14.9784 2.16662C14.9784 1.59199 15.2046 1.04091 15.6072 0.634593C16.0097 0.228272 16.5557 1.13272e-08 17.125 0C17.6943 -1.13272e-08 18.2403 0.228272 18.6429 0.634593L29.3776 11.4696C29.7773 11.8768 30.0011 12.4273 30 13.0006C29.9989 13.5739 29.7729 14.1234 29.3715 14.5291Z" fill="%23002c45"/></svg>');
}

.top-to-area-link-coming-soon {
  border: solid 1px #e6316d;
  background-color: transparent;
  color: #e6316d;
  cursor: default;
  user-select: none;
}

.top-to-area-link-coming-soon:hover {
  opacity: 1;
}

.top-to-area-link-coming-soon::after {
  content: none;
}

.top-to-area-img {
  position: absolute;
  inset: 0 auto;
  right: 20px;
  z-index: -1;
  margin: auto;
}

@media (max-width: 767px) {
  .top-to-area-text {
    margin: 0;
    font-size: 18px;
  }

  .top-to-area-link {
    margin-left: 0;
  }

  .top-to-area-img {
    position: static;
    display: block;
    margin: 31px auto 60px;
    max-width: 100%;
  }
}

.footer-wrapper {
  background-color: #002c45;
  color: #ffffff;
}

.footer-container {
  display: flex;
  align-items: center;
  padding: 20px 40px;
}

.footer-title {
  display: flex;
  align-items: center;
}

.footer-title-main {
  display: block;
}

.footer-title-sub {
  margin-right: 24px;
  font-size: 18px;
}

.footer-bottom {
  display: flex;
  margin-top: 10px;
}

.footer-copyright {
  font-size: 12px;
  font-style: normal;
}

.footer-nav {
  display: flex;
  gap: 12px;
  margin-left: 40px;
  font-size: 12px;
}

.footer-nav a {
  color: #ffffff;
  transition: opacity 0.3s;
}

.footer-nav a:hover {
  opacity: 0.7;
}

.footer-infroneer {
  margin-left: auto;
}

.footer-infroneer-sp {
  display: none;
}

@media (max-width: 767px) {
  .footer-container {
    justify-content: center;
  }

  .footer-title {
    flex-direction: column;
    align-items: center;
  }

  .footer-title-sub {
    margin-right: 0;
    margin-bottom: 4px;
    font-size: 16px;
  }

  .footer-bottom {
    flex-direction: column;
    margin-top: 28px;
  }

  .footer-copyright {
    margin-top: 8px;
    order: 1;
  }

  .footer-infroneer {
    display: none;
  }

  .footer-infroneer-sp {
    display: block;
    margin-top: 28px;
  }

  .footer-infroneer-sp img {
    display: block;
    margin: auto;
    width: 221px;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: auto auto;
    margin-left: 0;
  }
}

.modal-container {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 10px 20px;
  background-color: rgb(0 44 69 / 0.8);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal-container:not(.open) {
  opacity: 0;
  visibility: hidden;
}

.modal-window {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 1440px;
  max-width: 100%;
}

.modal-window:not(.active) {
  display: none;
}

.modal-window-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-right: 22px;
  height: 44px;
  background-color: #001e2f;
}

.modal-window-about .modal-window-header {
  background-color: #fdf2e3;
}

.modal-window-close {
  position: absolute;
  top: 18px;
  right: 18px;
  border: none;
  padding: 4px;
  padding-left: 30px;
  background-color: transparent;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="none" stroke="%23466f86" stroke-width="1"><circle cx="10" cy="10" r="9.5"/><g transform="translate(5 5)"><line x2="10" y2="10"/><line x1="10" y2="10"/></g></g></svg>');
  background-position: left 4px center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.modal-window-header > .modal-window-close {
  position: static;
  margin-left: auto;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="none" stroke="%23ffffff" stroke-width="1"><circle cx="10" cy="10" r="9.5"/><g transform="translate(5 5)"><line x2="10" y2="10"/><line x1="10" y2="10"/></g></g></svg>');
  color: #ffffff;
}

.modal-content-scroll {
  max-height: calc(100dvh - 100px - 44px - 20px);
  overflow: auto;
}

.modal-window-about .modal-window-close {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="none" stroke="%23002c45" stroke-width="1"><circle cx="10" cy="10" r="9.5"/><g transform="translate(5 5)"><line x2="10" y2="10"/><line x1="10" y2="10"/></g></g></svg>');
  color: #002c45;
}

.modal-window-about .modal-content {
  padding: 0 40px 20px;
  background-color: #fdf2e3;
  background-image: url('/images/bg-caret.svg');
  background-position: top right;
  background-repeat: no-repeat;
}

.modal-content-about-itsutsu-boshi {
  padding: 20px 40px;
  background-color: rgb(255 255 255 / 0.8);
  color: #002c45;
  text-align: center;
}

.modal-content-about-itsutsu-boshi h2 {
  margin: 0;
  font-size: 32px;
  line-height: 58px;
}

.modal-content-about-itsutsu-boshi h2 .modal-content-about-itsutsu-boshi-big {
  font-size: 40px;
}

.modal-content-about-itsutsu-boshi p {
  margin-top: 32px;
  margin-bottom: 0;
  font-size: 21px;
  line-height: 36px;
  font-weight: bold;
  text-align: left;
}

.modal-content-about-vol {
  position: relative;
  margin-top: 76px;
  padding: 20px 40px;
  border-radius: 10px;
  background-color: rgb(0 44 69 / 0.8);
  color: #ffffff;
  text-align: center;
}

.modal-content-about-vol-caretan {
  position: absolute;
  top: -68px;
  left: calc(50% + 158px);
}

.modal-content-about-vol h3 {
  margin: 0;
  font-size: 26px;
}

.modal-content-about-vol p {
  margin: 26px 0;
  font-size: 21px;
  line-height: 36px;
  text-align: left;
}

.modal-content-about-vol a {
  display: block;
  padding: 20px;
  border-radius: 10px;
  background-color: #dae000;
  color: #002c45;
  font-size: 27px;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.3s;
}

.modal-content-about-vol a:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .modal-window-about .modal-content {
    padding: 0 20px 20px;
  }

  .modal-content-about-itsutsu-boshi {
    padding: 20px;
  }

  .modal-content-about-itsutsu-boshi h2 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
  }

  .modal-content-about-itsutsu-boshi h2 .modal-content-about-itsutsu-boshi-big {
    font-size: 24px;
  }

  .modal-content-about-itsutsu-boshi p {
    font-size: 16px;
    line-height: 24px;
  }

  .modal-content-about-vol {
    margin-top: 16px;
    padding: 20px 20px;
    border-radius: 10px;
    text-align: left;
  }

  .modal-content-about-vol-caretan {
    top: -30px;
    left: auto;
    right: 5px;
    width: 65px;
    height: auto;
  }

  .modal-content-about-vol h3 {
    font-size: 18px;
  }

  .modal-content-about-vol p {
    font-size: 16px;
    line-height: 24px;
  }

  .modal-content-about-vol a {
    font-size: 20px;
    text-align: center;
  }
}

.modal-caption {
  padding: 10px 20px;
  max-height: 35dvh;
  background-color: #001e2f;
  color: #ffffff;
  overflow: auto;
}
.modal-caption a {
  color: #ffffff;
  transition: opacity 0.3s;
}
.modal-caption a:hover {
  opacity: 0.7;
}

.dl-link-button {
  display: block;
  margin: auto;
  padding: 8px;
  max-width: 338px;
  border-radius: 10px;
  background-color: #dae000;
  color: #002c45;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.3s;
}

.dl-link-button:hover {
  opacity: 0.7;
}

.print-caution {
  margin: 16px 0;
  padding: 10px;
  border: solid 3px #e6316d;
}

.print-caution .bold {
  font-weight: bold;
}

.print-caution ul {
  margin: 0;
  padding-left: 1.5em;
}

.modal-see-more {
  margin-top: 10px;
  text-align: center;
}

.movie-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.movie-container-short {
  aspect-ratio: 9 / 16;
}

.movie-content {
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .dl-link-button {
    font-size: 18px;
  }

  .print-caution {
    font-size: 14px;
  }
}

.area-header {
  padding-top: 12px;
  padding-bottom: 19px;
}

.area-header-img {
  position: absolute;
  top: -12px;
  /* bottom: -18px; */
  left: 83px;
  margin: 4px auto;
  height: 136px;
  transform: translateX(-50%);
}

.area-header-name {
  margin-top: 0;
  margin-bottom: 6px;
  margin-left: 140px;
  color: #ffffff;
  font-family: 'RocknRoll One', sans-serif;
  font-size: 40px;
  font-weight: normal;
}

.area-header-text {
  margin-left: 140px;
  color: #ffffff;
  font-size: 20px;
  font-weight: normal;
}

@media (max-width: 767px) {
  .area-header {
    padding-top: 6px;
    padding-bottom: 9px;
  }

  .area-header-img {
    top: 4px;
    bottom: -9px;
    left: 50px;
    height: 80px;
    width: auto;
  }

  .area-header-name {
    margin-left: 70px;
    margin-bottom: 2px;
    font-size: 30px;
  }

  .area-header-text {
    margin-left: 70px;
    font-size: 16px;
  }
}

.area-index-map-wrapper {
  padding: 20px 20px;
  background-color: #002c45;
  background-color: hsl(202, 96%, 19%);

}

.area-index-map-container {
  position: relative;
  padding: 0;
  max-width: 1208px;
  aspect-ratio: 1208 / 679;
  background-image: url('/images/area-map.webp');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: #ffffff;
}

.area-index-map-container h2 {
  margin: 0;
  margin-top: 30px;
  font-size: 48px;
  font-family: 'RocknRoll One', sans-serif;
  line-height: 54px;
}

.area-index-map-container h2 + div {
  margin-top: 10px;
  font-size: 26px;
  font-family: 'RocknRoll One', sans-serif;
  line-height: 42px;
}

.area-index-map-area {
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-index-map-area .map-area {
  position: absolute;
  padding: 10px;
  border-radius: 10px;
  color: #ffffff;
  font-family: 'RocknRoll One', sans-serif;
  font-size: 24px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

.area-index-map-area .map-area a {
  display: block;
  margin: -10px;
  padding: 10px;
  color: #ffffff;
  text-decoration: none;
}

.area-index-map-area .map-area.area-disabled {
  background-color: rgb(255 255 255 / 0.5);
  color: #808c9b;
}

.area-index-map-area .map-area:not(.area-disabled):hover {
  opacity: 0.7;
}

/* 1208 * 679 のキャンバスに対し中央がどこであるか */
.area-index-map-area .map-area.area-hokkaido {
  top: calc(100% * 67.5 / 679);
  left: calc(100% * 1084 / 1208);
}

.area-index-map-area .map-area.area-tohoku {
  top: calc(100% * 253.5 / 679);
  left: calc(100% * 1030 / 1208);
}

.area-index-map-area .map-area.area-kitakanto {
  top: calc(100% * 365.5 / 679);
  left: calc(100% * 950 / 1208);
}

.area-index-map-area .map-area.area-tokyo {
  top: calc(100% * 424.5 / 679);
  left: calc(100% * 972 / 1208);
}

.area-index-map-area .map-area.area-nishikanto {
  top: calc(100% * 479.5 / 679);
  left: calc(100% * 902 / 1208);
}

.area-index-map-area .map-area.area-shinshu {
  top: calc(100% * 420.5 / 679);
  left: calc(100% * 838 / 1208);
}

.area-index-map-area .map-area.area-hokuriku {
  top: calc(100% * 347.5 / 679);
  left: calc(100% * 699 / 1208);
}

.area-index-map-area .map-area.area-tokai {
  top: calc(100% * 521.5 / 679);
  left: calc(100% * 735 / 1208);
}

.area-index-map-area .map-area.area-kansai {
  top: calc(100% * 427.5 / 679);
  left: calc(100% * 655 / 1208);
}

.area-index-map-area .map-area.area-chugoku {
  top: calc(100% * 392.5 / 679);
  left: calc(100% * 512 / 1208);
}

.area-index-map-area .map-area.area-shikoku {
  top: calc(100% * 511.5 / 679);
  left: calc(100% * 469 / 1208);
}

.area-index-map-area .map-area.area-kyushuokinawa {
  top: calc(100% * 414.5 / 679);
  left: calc(100% * 212 / 1208);
}

.map-index-h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
  margin: 0;
  padding: 34px 0;
  color: #002c45;
  font-size: 30px;
  font-family: 'RocknRoll One', sans-serif;
}

.map-index-h3::before,
.map-index-h3::after {
  content: '';
  flex-grow: 1;
  border-bottom: solid 1px #002c45;
}

@media (max-width: 767px) {
  .area-index-map-container h2 {
    margin-top: 0;
    text-align: center;
    font-size: 30px;
  }

  .area-index-map-container h2 + div {
    margin-top: 4px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
  }

  .area-index-map-container {
    aspect-ratio: auto;
    background-image: none;
  }

  .area-index-map-area {
    margin: 20px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .area-index-map-area .map-area {
    position: static;
    font-size: 20px;
    text-align: center;
    transform: none;
  }

  .area-index-map-area .map-area.area-kyushuokinawa {
    font-size: 18px;
  }


  .map-index-h3::before,
  .map-index-h3::after {
    content: none;
  }
}