/* ------------------------------
トップページ用（2025.10追加）
------------------------------ */
main {
  color: #20303c;
}

/* @media screen and (min-width: 768px) {
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 76px);
  }
}

@media screen and (min-width: 1024px) {
  section {
    min-height: calc(100vh - 106px);
  }
} */

@media screen and (min-width: 768px) and (max-height: 1321px) {
  section {
    font-size: calc(10 / 1215 * (100vh - 106px)) !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 1291px) {
  section {
    font-size: calc(10 / 1215 * (100vh - 76px)) !important;
  }
}

@media screen and (max-width: 767px) {
  section {
    font-size: calc(10 / 390 * 100vw) !important;
  }
}

.header_nav {
  display: flex;
  height: 106px;
}

@media screen and (max-width: 1023px) {
  .header_nav {
    height: 76px;
  }
}

@media screen and (max-width: 767px) {
  .header_nav {
    height: calc(50 / 390 * 100vw);
  }
}

a:visited,
a:link {
  color: unset;
}

button {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: inherit;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ------------------------------
コンテナ
------------------------------ */
.topContainer {
  /* width: 100%; */
  width: calc(1600 / 1920 * 100%);
  /* max-width: 168em; */
  margin-right: auto;
  margin-left: auto;
  /* padding-right: 4em;
  padding-left: 4em; */
}

@media screen and (max-width: 767px) {
  .topContainer {
    width: 100%;
    padding-right: calc(15 / 390 * 100vw);
    padding-left: calc(15 / 390 * 100vw);
  }
}

/* ------------------------------
見出し
------------------------------ */
.topHeading {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: calc(1.14em / 8) 0 0 calc(4.39em / 8);
  font-family: "Economica", sans-serif;
  font-size: 8em;
  line-height: 1.15;
}

.topInfo .topHeading {
  padding: calc(1.882em / 8) 0 0 calc(4.134em / 8);
}

@media screen and (max-width: 1023px) {
  .topHeading {
    font-size: 6em;
  }
}

@media screen and (max-width: 767px) {
  .topHeading {
    padding-right: calc(27 / 390 * 100vw);
    font-size: 4.6em;
    line-height: calc(53 / 46);
  }
}

.topHeading__img {
  position: absolute;
  z-index: -1;
  top: calc(1em / 8);
  left: calc(1.1em / 8);
  width: calc(7em / 8);
  height: auto;
}

/* ------------------------------
ボタン
------------------------------ */
.topBtn {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: calc(30.4em / 1.6);
  height: calc(6em / 1.6);
  padding: 0 calc(1.8em / 1.6) 0 calc(4em / 1.6);
  border: 1px solid #9B9B9B;
  border-radius: 9999px;
  background-color: #fff;
  font-size: 2.5em;
  font-weight: 700;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

@media screen and (max-width: 767px) {
  .topBtn {
    width: calc(25.3em / 1.5);
    height: calc(5.5em / 1.5);
    padding: 0 calc(1.8em / 1.5) 0 calc(3em / 1.5);
    font-size: 1.5em;
  }
}

.topBtn__icon {
  width: calc(4em / 1.6);
  height: calc(4em / 1.6);
}

@media screen and (max-width: 767px) {
  .topBtn__icon {
    width: calc(3.5em / 1.5);
    height: calc(3.5em / 1.5);
  }
}

.topBtn__iconBg {
  fill: #20303C;
  transition: fill 0.3s;
}

.topBtn__iconArrow {
  fill: #fff;
  transition: fill 0.3s;
}

@media screen and (max-width: 767px) {
  .topBtn__iconArrow {
    transform: scale(0.667);
    transform-origin: center;
  }
}

@media (any-hover: hover) {
  .topBtn:hover {
    opacity: 1;
    background-color: #20303C;
    border-color: #20303C;
    color: #fff !important;
  }

  .topBtn:hover .topBtn__iconBg {
    fill: #fff;
  }

  .topBtn:hover .topBtn__iconArrow {
    fill: #20303C;
  }
}

.topBtn.--black {
  background-color: #20303C;
  border-color: #20303C;
  color: #fff;
}

.topBtn.--black .topBtn__iconBg {
  fill: #fff;
}

.topBtn.--black .topBtn__iconArrow {
  fill: #20303C;
}

@media (any-hover: hover) {
  .topBtn.--black:hover {
    background-color: #fff;
    border-color: #9B9B9B;
    color: #20303C !important;
  }

  .topBtn.--black:hover .topBtn__iconBg {
    fill: #20303C;
  }

  .topBtn.--black:hover .topBtn__iconArrow {
    fill: #fff;
  }
}

/* ------------------------------
カラー
------------------------------ */
.text-blue {
  color: #059CD6;
}

/* ------------------------------
Swiper
------------------------------ */
.swiper-button-prev,
.swiper-button-next {
  width: 45px;
  height: auto;
  margin-top: 0;
  transform: translateY(-50%);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiperButton {
  width: 100%;
  height: auto;
  overflow: visible !important;
}

.swiperButton__bg {
  fill: #fff;
  transition: fill .3s;
}

.swiperButton__arrow {
  fill: #20303C;
  transition: fill .3s;
}

@media (any-hover: hover) {
  .swiperButton:hover .swiperButton__bg {
    fill: #20303C;
  }

  .swiperButton:hover .swiperButton__arrow {
    fill: #fff;
  }
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  position: static;
  display: flex;
  justify-content: center;
  column-gap: 0.8em;
  width: auto;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
}

.swiper-pagination-bullet {
  width: 0.8em;
  height: 0.8em;
  opacity: 1;
  background-color: #D9D9D9;
}

.swiper-pagination-bullet-active {
  background-color: #20303C;
}

@media screen and (max-width: 767px) {
  .slider__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 2em;
    margin-top: 3em;
    padding-bottom: 1px;
  }
}

.slider__controls .swiper-button-prev,
.slider__controls .swiper-button-next {
  width: 7em;
}

@media screen and (max-width: 767px) {

  .slider__controls .swiper-button-prev,
  .slider__controls .swiper-button-next {
    position: static;
    transform: none;
    width: 4.5em;
  }
}

.slider__controls .swiper-button-prev {
  left: 0;
}

.slider__controls .swiper-button-next {
  right: 0;
}

@media screen and (max-width: 1200px) {

  .slider__controls .swiper-button-prev,
  .slider__controls .swiper-button-next {
    width: 4.5em;
  }
}

/* ------------------------------
キービジュアル
------------------------------ */
.topKv {
  margin-top: 106px;
  font-size: calc(10 / 1920 * 100vw);
}

@media screen and (max-width: 1023px) {
  .topKv {
    margin-top: 76px;
  }
}

@media screen and (max-width: 767px) {
  .topKv {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr auto;
    /* height: calc(100vh - 5em); */
    margin-top: 5em;
    font-size: calc(10 / 390 * 100vw);
  }
}

.topMv {
  position: relative;
  height: calc(100vh - 106px);
  height: calc(100svh - 106px);
}

@media screen and (max-width: 1023px) {
  .topMv {
    height: calc(100vh - 76px);
    height: calc(100svh - 76px);
  }
}

@media screen and (max-width: 767px) {
  .topMv {
    height: unset;
    height: calc(100vh - 5em);
    height: calc(100svh - 5em);
  }
}

.topMv__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

body.ready .topMv__media {
  animation: fadeIn 2s ease 0.4s forwards;
}

.topMv__text {
  position: absolute;
  width: calc(580 / 1920 * 100%);
  bottom: calc(149 / 830 * 100%);
  left: calc(168 / 1920 * 100%);
  height: auto;
  opacity: 0;
}

body.ready .topMv__text {
  animation: fadeIn 1s ease 1.4s forwards;
}

@media screen and (max-width: 767px) {
  .topMv__text {
    bottom: 50%;
    left: calc(56 / 390 * 100%);
    width: calc(279 / 390 * 100%);
    transform: translateY(50%);
  }
}

.topMv__scroll {
  position: absolute;
  bottom: 0;
  left: calc(74 / 1920 * 100%);
  display: flex;
  gap: 18px;
  align-items: center;
  overflow: hidden;
  margin: auto;
  writing-mode: vertical-lr;
  font-family: "Economica", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: calc(34 / 24);
  color: #fff;
  transition: .2s;
  opacity: 0;
}

body.ready .topMv__scroll {
  animation: fadeIn 1s ease 2.4s forwards;
}

@media screen and (max-width: 767px) {
  .topMv__scroll {
    left: calc(10 / 390 * 100%);
    gap: 10px;
    font-size: 16px;
    line-height: calc(18 / 16);
  }
}

.topMv__scroll:after {
  content: "";
  flex-shrink: 0;
  width: 2px;
  height: 82px;
  background: #fff;
  animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@media screen and (max-width: 767px) {
  .topMv__scroll:after {
    width: 1px;
    height: 60px;
  }
}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


/* ------------------------------
特集記事
------------------------------ */
.topBanner {
  position: relative;
  padding: 3em 7em;
}

@media screen and (max-width: 1279px) {
  .topBanner {
    padding: 3em 7em;
  }
}

@media screen and (max-width: 767px) {
  .topBanner {
    margin-bottom: 1em;
    padding: 1em 3.7em;
  }
}

.topBanner__slide {
  width: var(--slide-width);
  padding: 0 0.75em;
}

@media screen and (max-width: 767px) {
  .topBanner__slide {
    width: 100%;
    padding: 0;
  }
}

.topBanner__link {
  position: relative;
  display: block;
}

.topBanner__link::before {
  content: "";
  display: block;
  padding-top: calc(120 / 344 * 100%);
}

.topBanner__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #d9d9d9;
  border-radius: 0.5em;
}

.topBanner .swiper-button-prev,
.topBanner .swiper-button-next {
  width: 4.5em;
  height: 4.5em;
}

.topBanner .swiper-button-prev {
  left: 0.5em;
}

.topBanner .swiper-button-next {
  right: 0.5em;
}

/* ------------------------------
INFORMATION
------------------------------ */
.topInfo {
  padding: 9.1em 0 12.1em;
  background-color: #F5F3EE;
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-height: 966px) {
  .topInfo {
    font-size: calc(10 / 860 * (100vh - 106px));
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 936px) {
  .topInfo {
    font-size: calc(10 / 860 * (100vh - 76px));
  }
}

@media screen and (max-width: 767px) {
  .topInfo {
    padding: 2em 0 6.04em;
    font-size: calc(10 / 390 * 100vw);
  }
}

.topInfo .tab_view:not(.top) {
  display: none;
}

.topInfo .news_tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-top: 4.5em;
}

@media screen and (max-width: 767px) {
  .topInfo .news_tab {
    justify-content: flex-start;
    margin-top: 2.5em;
  }
}

.topInfo .news_tab a {
  min-width: calc(11.3em / 1.4);
  padding: calc(0.8em / 1.4);
  border-radius: 9999px;
  background-color: #fff;
  text-align: center;
  font-size: 2.3em;
  font-weight: 700;
  color: #059CD6 !important;
  transition: background-color 0.3s, color 0.3s;
}

@media screen and (max-width: 767px) {
  .topInfo .news_tab a {
    min-width: calc(11em / 1.3);
    padding: calc(0.8em / 1.3);
    font-size: 1.3em;
    line-height: calc(19 / 13);
  }
}

.topInfo .news_tab a.on,
.topInfo .news_tab a:hover {
  opacity: 1;
  background-color: #059CD6;
  color: #fff !important;
}

.topInfo__body {
  /* width: calc(100% - 80px); */
  width: calc(1330 / 1600 * 100%);
  /* max-width: 133em; */
  margin: 3em auto 4.5em;
  padding: 5em 40px;
  background-color: #fff;
}

@media screen and (max-width: 1023px) {
  .topInfo__body {
    width: 100%;
    padding: 5em 20px;
  }
}

@media screen and (max-width: 767px) {
  .topInfo__body {
    width: unset;
    margin: 2.5em -1.5em;
    padding: 1em 2.8em 3em;
  }
}

.topInfo .tab_view {
  max-width: 1068px;
  margin: 0 auto;
}

.topInfo__item {
  position: relative;
  display: grid;
  grid-template-columns: 8.5em 11.3em 1fr;
  align-items: center;
  column-gap: 2em;
  width: 100%;
  padding: 2.2em 8.4em 2.2em 2em;
  border-bottom: 1px solid #D9D9D9;
  text-align: left;
  transition: background-color 0.3s;
}

@media screen and (max-width: 767px) {
  .topInfo__item {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
    column-gap: 0;
    padding: 1.5em 0 1.5em;
  }

  .topInfo__item:last-of-type {
    display: none;
  }
}

.topInfo__date {
  font-family: "Economica", sans-serif;
  font-size: 2.3em;
  font-weight: 700;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .topInfo__date {
    font-size: 1.6em;
  }
}

.topInfo__category {
  padding: 0.75em;
  border-radius: 9999px;
  background-color: #E5F5FF;
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: #059CD6;
  transition: background-color 0.3s, color 0.3s;
}

@media screen and (max-width: 767px) {
  .topInfo__category {
    min-width: calc(11em / 1.3);
    margin-left: 2em;
    padding: calc(0.8em / 1.3);
    font-size: 1.3em;
    line-height: calc(19 / 13);
  }
}

.topInfo__title {
  font-size: 2.5em;
  font-weight: 500;
  line-height: calc(26 / 18);
  transition: color 0.3s;
}

@media screen and (min-width: 768px) {
  .topInfo__title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}

@media screen and (max-width: 767px) {
  .topInfo__title {
    width: calc(100% - 5.4em / 1.5);
    font-size: 1.5em;
    line-height: calc(24 / 15);
  }
}

.topInfo__svg {
  position: absolute;
  top: 50%;
  right: 2em;
  width: 5em;
  height: auto;
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .topInfo__svg {
    flex-shrink: 0;
    position: static;
    transform: none;
    margin-left: auto;
  }
}

.topInfo__svgBg {
  fill: #fff;
  transition: fill 0.3s;
}

.topInfo__svgArrow {
  fill: #20303C;
  transition: fill 0.3s;
}

@media(any-hover: hover) {
  .topInfo__item:hover {
    opacity: 1;
    background-color: #E5F5FF;
  }

  .topInfo__item:hover .topInfo__category {
    background-color: #059CD6;
    color: #fff;
  }

  .topInfo__item:hover .topInfo__title {
    color: #059CD6;
  }

  .topInfo__item:hover .topInfo__svgBg {
    fill: #20303C;
  }

  .topInfo__item:hover .topInfo__svgArrow {
    fill: #fff;
  }
}

/* ------------------------------
NEW ARTICLES
------------------------------ */
.topNews {
  padding-bottom: 12.6em;
  background-image: linear-gradient(180deg, #6EBDD3, #6EBDD3 61.2em, #F5F3EE 61.2em);
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-height: 1316px) {
  .topNews {
    font-size: calc(10 / 1210 * (100vh - 106px));
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 1286px) {
  .topNews {
    font-size: calc(10 / 1210 * (100vh - 76px));
  }
}

@media screen and (max-width: 767px) {
  .topNews {
    padding: 0 0 6em;
    background-image: linear-gradient(180deg, #6EBDD3, #6EBDD3 38em, #F5F3EE 38em);
    font-size: calc(10 / 390 * 100vw);
  }
}

.topNews__head {
  padding: 2.86em 0 3em;
  border: 1px solid #fff;
  border-top: none;
}

@media screen and (max-width: 767px) {
  .topNews__head {
    padding: 1.5em 0;
  }
}

.topNews__description {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1em;
  padding: 1.8em 0 2em;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}

@media screen and (max-width: 767px) {
  .topNews__description {
    padding: 1.5em 0 1.97em;
  }
}

.topNews__descriptionText {
  display: flex;
  column-gap: calc(1em / 2.4);
  font-size: 2.4em;
  font-weight: 700;
  color: #FFEFC9;
}

@media screen and (max-width: 767px) {
  .topNews__descriptionText {
    flex-direction: column;
    align-items: center;
    font-size: 1.5em;
    line-height: calc(22 / 15);
  }
}

.topNews__icon01 {
  width: 7.2em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topNews__icon01 {
    width: 4.9em;
  }
}

.topNews__icon02 {
  width: 5.42em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topNews__icon02 {
    width: 4.15em;
  }
}

.topNews__list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 50% 50%;
  margin-bottom: 4.5em;
  text-align: left;
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .topNews__list {
    display: block;
    margin-bottom: 3em;
    background-color: transparent;
  }
}

@media screen and (min-width: 768px) {
  .topNews__item:first-of-type {
    grid-row: 1 / 4;
    grid-column: 1 / 2;
    border-right: 1px solid #6EBDD3;
  }

  .topNews__item:nth-of-type(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    border-bottom: 1px solid #6EBDD3;
  }

  .topNews__item:nth-of-type(3) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    border-bottom: 1px solid #6EBDD3;
  }

  .topNews__item:last-of-type {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
  }
}

.topNews__item:first-of-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 2em;
  padding: 3.25em 18.75%;
  transition: background-color 0.3s, color 0.3s;
}

@media screen and (max-width: 767px) {
  .topNews__item:first-of-type {
    row-gap: 1em;
    padding: 2.5em 2em;
    background-color: #fff;
  }

  .topNews__item:last-of-type {
    display: none !important;
  }
}

.topNews__item:not(:first-of-type) {
  display: grid;
  grid-template-columns: 18em 1fr;
  align-items: center;
  column-gap: calc(30 / 680 * 100%);
  padding: 2.9em 7.5%;
  background-color: #fff;
  transition: background-color 0.3s, color 0.3s;
}

@media screen and (max-width: 767px) {
  .topNews__item:not(:first-of-type) {
    position: relative;
    grid-template-columns: 100%;
    margin-top: 1em;
    padding: 2em 1.5em;
    background-color: #fff;
  }
}

.topNews__imgWrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1em;
  transition: border-radius 0.3s;
}

@media screen and (max-width: 767px) {
  .topNews__item:first-of-type .topNews__imgWrapper {
    width: 27em;
    margin: 0 auto;
  }

  .topNews__item:not(:first-of-type) .topNews__imgWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 9em;
  }
}

.topNews__imgWrapper::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.topNews__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topNews__more {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1em;
  background-color: rgba(0 0 0 / 0.5);
  opacity: 0;
  font-size: 1.6em;
  font-weight: 700;
  color: #fff;
  transition: opacity 0.3s;
}

.topNews__item:first-of-type .topNews__more {
  font-size: 2em;
}

.topNews__moreIcon {
  width: 3em;
  height: auto;
}

.topNews__imgContainer {
  position: relative;
}

.topNews__circle {
  position: absolute;
  right: -13.2%;
  bottom: -7.1%;
  width: 31.6%;
  height: auto;
  opacity: 0;
  transition: opacity 0.3s;
  animation: rotate 22s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 767px) {

  .topNews__more,
  .topNews__circle {
    display: none;
  }
}

.topNews__date {
  font-family: "Economica", sans-serif;
  font-size: 2.3em;
  line-height: 1.125;
  font-weight: 700;
}

.topNews__item:first-of-type .topNews__date {
  line-height: 1.4375;
}

@media screen and (max-width: 1023px) {
  .topNews__date {
    font-size: 1.6em;
  }
}

@media screen and (max-width: 767px) {
  .topNews__date {
    margin-left: calc(10em / 1.4);
    font-size: 1.4em;
    line-height: calc(16 / 14);
  }

  .topNews__item:first-of-type .topNews__date {
    margin-left: 0;
    font-size: 1.6em;
    line-height: 1.4375;
  }
}

.topNews__itemTitle {
  margin-top: calc(0.5em / 2);
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.topNews__item:first-of-type .topNews__itemTitle {
  margin-top: 0;
  font-size: 2.4em;
  line-height: calc(35 / 24);
}

@media screen and (max-width: 1023px) {
  .topNews__itemTitle {
    font-size: 2em;
  }
}

@media screen and (max-width: 767px) {
  .topNews__itemTitle {
    min-height: calc(7.2em / 1.5);
    margin-top: calc(0.5em / 1.5);
    margin-left: calc(10em / 1.5);
    font-size: 1.5em;
    line-height: calc(24 / 15);
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .topNews__item:first-of-type .topNews__itemTitle {
    min-height: unset;
    margin-top: 0;
    margin-left: 0;
    font-size: 1.8em;
    line-height: calc(26 / 18);
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

.topNews__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  max-height: 10.8em;
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px solid #D9D9D9;
  overflow: hidden;
}

.topNews__item:first-of-type .topNews__categories {
  margin-top: 2em;
  padding-top: 2em;
}

@media screen and (max-width: 1023px) {
  .topNews__categories {
    max-height: 13.9em;
  }
}

@media screen and (max-width: 767px) {
  .topNews__categories {
    gap: 0.5em;
  }

  .topNews__item:first-of-type .topNews__categories {
    margin-top: 1em;
    padding-top: 1em;
  }
}

.topNews__category {
  padding: calc(0.6em / 1.4) calc(1em / 1.4);
  border-radius: 9999px;
  background-color: #F1EDE5;
  font-size: 1.6em;
  font-weight: 700;
  line-height: calc(20 / 14);
  transition: background-color 0.2s, color 0.2s;
}

@media screen and (max-width: 1023px) {
  .topNews__category {
    font-size: 1.4em;
  }
}

@media screen and (max-width: 767px) {
  .topNews__category {
    padding: calc(0.5em / 1.1) calc(0.8em / 1.1);
    font-size: 1.1em;
    line-height: calc(16 / 11);
  }
}

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

  .topNews__item:first-of-type .topNews__imgContainer,
  .topNews__item:first-of-type .topNews__itemBody {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .topNews__item:first-of-type .topNews__imgWrapper::before {
    padding-top: 70%;
  }
}

@media (any-hover: hover) {
  .topNews__item:hover {
    opacity: 1;
    background-color: #E5F5FF;
    color: #059CD6;
  }

  .topNews__item:hover .topNews__imgWrapper {
    border-radius: 5em;
  }

  .topNews__item:hover .topNews__more {
    opacity: 1;
  }

  .topNews__item:hover .topNews__circle {
    opacity: 1;
  }

  .topNews__item:hover .topNews__category {
    background-color: #F6D077;
    color: #fff;
  }
}

/* ------------------------------
OKINAWA ISLAND MOVIE
------------------------------ */
.topMovie {
  padding-bottom: 13em;
  background-image: linear-gradient(180deg, #F6D077, #F6D077 61.2em, #F5F3EE 61.2em);
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-height: 1321px) {
  .topMovie {
    font-size: calc(10 / 1215 * (100vh - 106px));
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 1291px) {
  .topMovie {
    font-size: calc(10 / 1215 * (100vh - 76px));
  }
}

@media screen and (max-width: 767px) {
  .topMovie {
    padding: 0 0 6em;
    background-image: linear-gradient(180deg, #F6D077, #F6D077 38em, #F5F3EE 38em);
    font-size: calc(10 / 390 * 100vw);
  }
}

.topMovie__head {
  padding: 2.8em 0 3.08em;
  border: 1px solid #fff;
  border-top: none;
}

@media screen and (max-width: 767px) {
  .topMovie__head {
    padding: 1.5em 0;
  }

  .topMovie .topHeading {
    line-height: calc(48 / 46);
  }
}

.topMovie__description {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1em;
  padding: 1.4em 0 1.36em;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}

@media screen and (max-width: 767px) {
  .topMovie__description {
    column-gap: 1.5em;
    padding: 1.5em 0 2em;
  }
}

.topMovie__descriptionText {
  display: flex;
  column-gap: calc(1em / 2.4);
  font-size: 2.4em;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .topMovie__descriptionText {
    flex-direction: column;
    align-items: center;
    font-size: 1.5em;
    line-height: calc(24 / 15);
  }
}

.topMovie__icon01 {
  width: 5.7em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topMovie__icon01 {
    width: 4em;
  }
}

.topMovie__icon02 {
  width: 5.6em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topMovie__icon02 {
    width: 4.4em;
  }
}

.topMovie__body {
  padding: 4em;
  background-color: #fff;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .topMovie__body {
    padding: 2em 1.25em;
  }
}

.topMovie__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em;
  width: 100%;
  max-width: 114em;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .topMovie__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5em;
  }
}

.topMovie__item {
  position: relative;
  z-index: 0;
  container-type: inline-size;
  cursor: pointer;
  overflow: hidden;
}

.topMovie__item::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.topMovie__thumbnail {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s;
}

.topMovie__thumbnail.is-hidden {
  opacity: 0;
}

.topMovie__itemText {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
}

@media screen and (max-width: 767px) {
  .topMovie__itemText {
    gap: 0.4444em;
  }
}

.topMovie__item.--odd .topMovie__itemText {
  width: 100%;
  top: calc(17.5 / 360 * 100%);
  left: 0;
}

@media screen and (max-width: 767px) {
  .topMovie__item.--odd .topMovie__itemText {
    top: 0.8em;
  }
}

.topMovie__item.--even .topMovie__itemText {
  top: 0;
  right: calc(10 / 360 * 100%);
  height: 100%;
  flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
  .topMovie__item.--even .topMovie__itemText {
    right: 0.8em;
  }
}

.topMovie__itemTitle {
  max-width: 95%;
  max-height: 95%;
  padding: calc(0.3em / 2.6) calc(1em / 2.6);
  background-color: #fff;
  font-size: 2.6em;
  font-size: calc(26 / 360 * 100cqw);
  font-weight: 700;
  line-height: calc(38 / 26);
}

@media screen and (max-width: 767px) {
  .topMovie__itemTitle {
    font-size: 1.156em;
    font-size: calc(11.56 / 160 * 100cqw);
  }
}

.topMovie__item.--even .topMovie__itemTitle {
  padding: calc(0.3em / 2.6) calc(0.5em / 2.6);
  writing-mode: vertical-rl;
  line-height: calc(34 / 26);
}

.topMovie__island {
  padding: 0.15em 0.5em;
  font-size: 2em;
  font-size: calc(20 / 360 * 100cqw);
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .topMovie__island {
    font-size: 0.89em;
    font-size: calc(8.9 / 160 * 100cqw);
  }
}

.topMovie__video {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.8);
}

/* モーダル */
.movieModal {
  position: absolute;
  display: none;
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-height: 929px) {
  .movieModal {
    font-size: calc(10 / 929 * 100vh);
  }
}

@media screen and (min-width: 768px) and (max-width: 1026px) and (max-height: 929px) {
  .movieModal {
    font-size: min(calc(10 / 1026 * 100vw), calc(10 / 929 * 100vh));
  }
}

@media screen and (max-width: 767px) {
  .movieModal {
    font-size: calc(10 / 390 * 100vw);
  }
}

.movieModal.is-open {
  display: block;
}

.movieModal__overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  background: rgba(0 0 0 / 0.7);
  display: flex;
  justify-content: center;
  padding: 4em 6em;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.movieModal__overlay::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 767px) {
  .movieModal__overlay {
    padding: 2em;
  }
}

.movieModal__body {
  position: relative;
  width: 100%;
  max-width: 90.6em;
  margin: auto;
}

.movieModal__close {
  position: absolute;
  top: 2.3em;
  right: -4.7em;
  width: 10em;
  height: 10em;
  border: 1px solid #20303C;
  border-radius: 50%;
  background-color: #20303C;
  transition: background-color 0.3s;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .movieModal__close {
    top: -1em;
    right: 0;
    width: 5.4em;
    height: 5.4em;
  }
}

.movieModal__close::before,
.movieModal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.96em;
  height: 0.2em;
  background-color: #fff;
  transition: background-color 0.3s;
}

@media screen and (max-width: 767px) {

  .movieModal__close::before,
  .movieModal__close::after {
    width: 2.26em;
  }
}

@media (any-hover: hover) {
  .movieModal__close:hover {
    background-color: #fff;
  }

  .movieModal__close:hover::before,
  .movieModal__close:hover::after {
    background-color: #20303C;
  }
}

.movieModal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.movieModal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.movieModal__head {
  display: inline-block;
  margin-bottom: -0.5px;
  padding: 1em 2em;
  border-radius: 0 2em 0 0;
  background-color: #F6D077;
}

@media screen and (max-width: 767px) {
  .movieModal__head {
    padding: 1em;
  }
}

.movieModal__headTitle {
  font-family: "Economica", sans-serif;
  font-size: 4.5em;
  line-height: calc(52 / 45);
}

@media screen and (max-width: 767px) {
  .movieModal__headTitle {
    font-size: 2.7em;
    line-height: calc(31 / 27);
  }
}

.movieModal__content {
  padding: 3.4em calc(95 / 906 * 100%);
  border: 0.6em solid #F6D077;
  border-radius: 0 2em 2em 2em;
  background-color: #fff;
  box-shadow: 0px 0.4em 1.4em #0000000D;
}

@media screen and (max-width: 767px) {
  .movieModal__content {
    padding: 2.6em 1.6em;
    border-width: 0.4em;
  }
}

.movieModal__postHead {
  display: flex;
  align-items: center;
  column-gap: 2em;
}

.movieModal__island {
  flex-shrink: 0;
  padding: calc(0.3em / 2.4) calc(1em / 2.4);
  font-size: 2.4em;
  font-weight: 700;
  line-height: calc(35 / 24);
  color: #fff;
}

@media screen and (max-width: 767px) {
  .movieModal__island {
    padding: calc(0.3em / 1.4) calc(1em / 1.4);
    font-size: 1.4em;
    line-height: calc(20 / 14);
  }
}

.movieModal__postTitle {
  font-size: 2.6em;
  font-weight: 700;
  line-height: calc(38 / 26);
}

@media screen and (max-width: 767px) {
  .movieModal__postTitle {
    font-size: 1.4em;
    line-height: calc(20 / 14);
  }
}

.movieModal__videoWrapper {
  position: relative;
  margin-top: 2em;
  background-color: #000;
}

@media screen and (max-width: 767px) {
  .movieModal__videoWrapper {
    margin-top: 1em;
  }
}

.movieModal__videoWrapper::before {
  content: "";
  display: block;
  padding-top: calc(396 / 704 * 100%);
}

.movieModal__text {
  margin: 1.25em 0 2.5em;
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.875;
}

@media screen and (max-width: 767px) {
  .movieModal__text {
    margin: calc(1.5em / 1.3) 0 calc(3em / 1.3);
    font-size: 1.3em;
    line-height: calc(22 / 13);
  }
}

.movieModal__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movieModal__bottomClose {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5em;
  margin-top: calc(3em / 1.4);
  padding-bottom: calc(0.35em / 1.4);
  border-bottom: 1px solid #20303C;
  font-size: 1.4em;
  font-weight: 500;
}

.movieModal__bottomClose::before {
  content: "";
  flex-shrink: 0;
  width: calc(2em / 1.4);
  height: calc(2em / 1.4);
  background: url("../img/top/modal-bottom-close.svg") no-repeat center / contain;
}

@media screen and (min-width: 768px) {
  .movieModal__bottomClose {
    display: none;
  }
}

.movieModal[aria-hidden="false"] .movieModal__overlay {
  animation: fadeIn 0.4s cubic-bezier(0, 0, 0.2, 1);
}

.movieModal[aria-hidden="true"] .movieModal__overlay {
  animation: fadeOut 0.4s cubic-bezier(0, 0, 0.2, 1);
}

/* ------------------------------
パララックス
------------------------------ */
.topParallax {
  position: sticky;
  z-index: -1;
  top: 0;
  font-size: max(calc(10 / 1920 * 100vw), 6px);
  background-color: #fff;
  user-select: none;
}

@media screen and (max-width: 767px) {
  .topParallax {
    font-size: calc(10 / 390 * 100vw);
  }
}

.topParallax__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 106px);
  object-fit: cover;
}

@media screen and (max-width: 1023px) {
  .topParallax__img {
    max-height: calc(100vh - 76px);
  }
}

@media screen and (max-width: 767px) {
  .topParallax__img {
    max-height: calc(100vh - 5em);
  }
}

.topParallax__bottomImg {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: auto;
  padding-left: calc(4 / 1920 * 100%);
}

@media screen and (max-width: 767px) {
  .topParallax__bottomImg {
    bottom: 0;
    padding-left: 0;
  }
}

.topParallax__centerImg {
  position: absolute;
  top: calc(214.68 / 710 * 100%);
  left: 50%;
  width: auto;
  height: calc(247.46 / 710 * 100%);
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .topParallax__centerImg {
    top: 50%;
    height: calc(139.97 / 500 * 100%);
    transform: translate(-50%, -50%);
  }
}

.topParallax__place {
  position: absolute;
  top: 2em;
  right: 2.2em;
  display: flex;
  align-items: center;
  column-gap: 1em;
}

@media screen and (max-width: 767px) {
  .topParallax__place {
    top: 1em;
    right: 1em;
    column-gap: 0.5em;
  }
}

.topParallax__icon {
  width: 1.6em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topParallax__icon {
    width: 1.2em;
  }
}

.topParallax__placeText {
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.875;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .topParallax__placeText {
    font-size: 1.2em;
    line-height: calc(17 / 12);
  }
}

/* ------------------------------
GO! ISLAND MAP
------------------------------ */
.topMap {
  padding-bottom: 14.9em;
  background-color: #F5F3EE;
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-height: 1321px) {
  .topMap {
    font-size: calc(10 / 1215 * (100vh - 106px));
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 1291px) {
  .topMap {
    font-size: calc(10 / 1215 * (100vh - 76px));
  }
}

@media screen and (max-width: 767px) {
  .topMap {
    padding: 0 0 6em;
    font-size: calc(10 / 390 * 100vw);
  }
}

@media screen and (min-width: 768px) {
  .topMap .topContainer::before {
    content: "";
    display: block;
    height: 6.4em;
    border-right: 1px solid #80C15D;
    border-left: 1px solid #80C15D;
  }
}

/* @media screen and (min-width: 768px) {
  .topMap .topContainer {
    max-width: 172em;
    padding-right: 6em;
    padding-left: 6em;
  }
} */

.topMap__head {
  padding: 2.06em 0 2.58em;
  border: 1px solid #80C15D;
}

@media screen and (max-width: 767px) {
  .topMap__head {
    padding: 2em 0 1.5em;
    border-top: none;
  }
}

.topMap__description {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1em;
  padding: 1.5em 0 2.2em;
  border-right: 1px solid #80C15D;
  border-left: 1px solid #80C15D;
}

@media screen and (max-width: 767px) {
  .topMap__description {
    padding: 1.5em 0 3.5em;
  }
}

.topMap__descriptionText {
  display: flex;
  column-gap: calc(1em / 2.4);
  font-size: 2.4em;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .topMap__descriptionText {
    flex-direction: column;
    align-items: center;
    font-size: 1.5em;
    line-height: calc(24 / 15);
  }
}

.topMap__icon01 {
  width: 4.7em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topMap__icon01 {
    width: 3.3em;
  }
}

.topMap__icon02 {
  width: 5em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topMap__icon02 {
    width: 3.7em;
  }
}

.topMap__wrapper {
  position: relative;
  border-right: 1px solid #80C15D;
  border-left: 1px solid #80C15D;
  user-select: none;
}

@media screen and (max-width: 767px) {
  .topMap__wrapper {
    font-size: min(calc(10 / 708 * (100vh - 55px)), 10px);
  }
}

.topMap__compass {
  position: absolute;
  top: 5.3em;
  left: 12.7em;
  width: 9.7em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topMap__compass {
    display: none;
  }
}

.topMap__scrollArea {
  padding: 9em 0 6em;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: #CCE9F1;
  user-select: none;
  cursor: grab;
}

.topMap__scrollArea.is-dragging-map {
  cursor: grabbing;
}

.topMap__scrollArea::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 767px) {
  .topMap__scrollArea {
    padding: 4.7em 0 4.9em;
  }
}

.topMap__scrollBar {
  position: absolute;
  left: 50%;
  width: 87.5%;
  height: 8px;
  transform: translateX(-50%);
  background-color: #F0F0F0;
  border-radius: 9999px;
}

.topMap__scrollBar:first-of-type {
  top: 2.5em;
}

.topMap__scrollBar:last-of-type {
  bottom: 2.7em;
}

@media screen and (max-width: 767px) {
  .topMap__scrollBar {
    width: 95.73%;
    height: 0.6em;
  }

  .topMap__scrollBar:first-of-type {
    top: 5.4em;
  }

  .topMap__scrollBar:last-of-type {
    bottom: 2.6em;
  }
}

.topMap__scrollBarThumb {
  height: 100%;
  border-radius: 9999px;
  background-color: #DADADA;
  cursor: pointer;
}

.topMap__contents {
  position: relative;
  display: inline-block;
}

.topMap__bg {
  display: block;
  width: auto;
  max-width: unset;
  height: 82em;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .topMap__bg {
    height: 51.3em;
  }
}

.topMap__svg {
  position: absolute;
  height: auto;
  pointer-events: none;
  cursor: pointer;
  overflow: visible !important;
}

.topMap__terrain {
  pointer-events: auto;
  transform-origin: center;
  transition: transform 0.3s, fill 0.3s, stroke 0.3s, filter 0.3s;
  stroke-width: 0.1em;
  stroke: transparent;
  filter: drop-shadow(1px 1px 0 transparent) drop-shadow(-1px 1px 0 transparent) drop-shadow(1px -1px 0 transparent) drop-shadow(-1px -1px 0 transparent) drop-shadow(0 4px 4px transparent);
}

.topMap__label {
  pointer-events: auto;
  transition: fill 0.3s;
}

.topMap__labelCircle,
.topMap__labelArrow,
.topMap__labelText {
  transition: fill 0.3s;
}

@media screen and (max-width: 767px) {

  .topMap__svg g,
  .topMap__svg path,
  .topMap__svg rect {
    pointer-events: auto;
  }
}

@media (any-hover: hover) {
  .topMap__svg:hover {
    z-index: 1;
  }

  .topMap__svg:hover .topMap__terrain {
    transform: scale(var(--hover-scale));
    fill: var(--hover-color);
    stroke: #fff;
    filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(0 4px 4px rgba(0 0 0 / 0.25));
  }

  .topMap__svg:hover .topMap__terrain path {
    fill: var(--hover-color);
  }

  .topMap__svg:hover .topMap__label,
  .topMap__svg:hover .topMap__labelArrow {
    fill: var(--hover-color);
  }

  .topMap__svg:hover .topMap__labelCircle,
  .topMap__svg:hover .topMap__labelText {
    fill: #fff;
  }
}

/* 久米島 */
.topMap__svg.--kume {
  top: 42.7em;
  right: 122.07em;
  width: 11.73em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--kume {
    top: 28.14em;
    right: 78.9em;
    width: 6.8em;
  }
}

/* 伊平屋島 */
.topMap__svg.--iheya {
  top: 5.9em;
  right: 42.612em;
  width: 17.688em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--iheya {
    top: 0;
    right: 20.7em;
    width: 13.5em;
  }
}

/* 伊是名島 */
.topMap__svg.--izena {
  top: 15.2em;
  right: 46.84em;
  width: 14.66em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--izena {
    top: 7.8em;
    right: 22.9em;
    width: 12.3em;
  }
}

/* 野甫島 */
.topMap__svg.--noho {
  top: 11.3em;
  right: 60.56em;
  width: 11.94em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--noho {
    top: 4.5em;
    right: 34.4em;
    width: 10em;
  }
}

/* 慶留間島 */
.topMap__svg.--geruma {
  top: 62.9em;
  right: 95.4em;
  width: 10.3em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--geruma {
    top: 44.5em;
    right: 57.7em;
    width: 8.8em;
  }
}

/* 阿嘉島 */
.topMap__svg.--aka {
  top: 60.5em;
  right: 98.85em;
  width: 12.95em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--aka {
    top: 42.37em;
    right: 60.7em;
    width: 11.1em;
  }
}

/* 伊江島 */
.topMap__svg.--ie {
  top: 26.2em;
  right: 67.33em;
  width: 16.37em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--ie {
    top: 15.9em;
    right: 37.2em;
    width: 13.7em;
  }
}

/* 北大東島 */
.topMap__svg.--kitadaito {
  top: 52.4em;
  right: 16.5em;
  width: 10.3em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--kitadaito {
    top: 34.1em;
    right: 4.8em;
    width: 7.5em;
  }
}

/* 南大東島 */
.topMap__svg.--minamidaito {
  top: 64.1em;
  right: 20.2em;
  width: 10.3em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--minamidaito {
    top: 42.3em;
    right: 8.5em;
    width: 7.5em;
  }
}

/* 渡嘉敷島 */
.topMap__svg.--tokashiki {
  top: 60.4em;
  right: 81.4em;
  width: 14.7em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--tokashiki {
    top: 42.3em;
    right: 46.7em;
    width: 11.6em;
  }
}

/* 津堅島 */
.topMap__svg.--tsuken {
  top: 56.9em;
  right: 49.16em;
  width: 12.14em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--tsuken {
    top: 40.1em;
    right: 19.2em;
    width: 10.2em;
  }
}

/* 渡名喜島 */
.topMap__svg.--tonaki {
  top: 43.8em;
  right: 102.3em;
  width: 10.3em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--tonaki {
    top: 28.07em;
    right: 63.7em;
    width: 8.9em;
  }
}

/* 粟国島 */
.topMap__svg.--aguni {
  top: 29.8em;
  right: 98.4em;
  width: 8.1em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--aguni {
    top: 15.8em;
    right: 60.4em;
    width: 6.9em;
  }
}

/* 水納島（本島周辺） */
.topMap__svg.--minna {
  top: 31.7em;
  right: 68.23em;
  width: 11.77em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--minna {
    top: 20.5em;
    right: 38em;
    width: 9.8em;
  }
}

/* 久高島 */
.topMap__svg.--kudaka {
  top: 63.1em;
  right: 51.92em;
  width: 12.28em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--kudaka {
    top: 45.3em;
    right: 21.5em;
    width: 10.3em;
  }
}

/* 座間味島 */
.topMap__svg.--zamami {
  top: 52.6em;
  right: 92.6em;
  width: 10.3em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--zamami {
    top: 35.67em;
    right: 55.3em;
    width: 8.8em;
  }
}

/* 宮古島 */
.topMap__svg.--miyako {
  top: 48.2em;
  right: 147em;
  width: 21.81em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--miyako {
    top: 29.5em;
    right: 95.3em;
    width: 15.9em;
  }
}

/* 池間島 */
.topMap__svg.--ikema {
  top: 40.4em;
  right: 164.9em;
  width: 8.7em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--ikema {
    top: 23.45em;
    right: 108.55em;
    width: 6.3em;
  }
}

/* 大神島 */
.topMap__svg.--oogami {
  top: 46.2em;
  right: 152.45em;
  width: 12.75em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--oogami {
    top: 27.9em;
    right: 99.18em;
    width: 9.43em;
  }
}

/* 来間島 */
.topMap__svg.--kurima {
  top: 63em;
  right: 164.7em;
  width: 8.7em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--kurima {
    top: 40em;
    right: 108.25em;
    width: 6.3em;
  }
}

/* 伊良部島 */
.topMap__svg.--irabu {
  top: 46.7em;
  right: 170.94em;
  width: 10.56em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--irabu {
    top: 27.82em;
    right: 112.7em;
    width: 7.59em;
  }
}

/* 下地島 */
.topMap__svg.--shimoji {
  top: 54.3em;
  right: 172.6em;
  width: 8.7em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--shimoji {
    top: 33.8em;
    right: 113.85em;
    width: 6.3em;
  }
}

/* 多良間島 */
.topMap__svg.--tarama {
  top: 67.2em;
  right: 184.4em;
  width: 10.3em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--tarama {
    top: 42.9em;
    right: 122.2em;
    width: 7.5em;
  }
}

/* 水納島（宮古諸島） */
.topMap__svg.--minna_miyako {
  top: 53.9em;
  right: 185.7em;
  width: 8.7em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--minna_miyako {
    top: 33.03em;
    right: 123.15em;
    width: 6.3em;
  }
}

/* 石垣島 */
.topMap__svg.--ishigaki {
  top: 32.5em;
  right: 226.92em;
  width: 22.78em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--ishigaki {
    top: 19.6em;
    right: 140.2em;
    width: 16.9em;
  }
}

/* 竹富島 */
.topMap__svg.--taketomi {
  top: 51.7em;
  right: 238.86em;
  width: 10.54em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--taketomi {
    top: 33.5em;
    right: 149.35em;
    width: 7.57em;
  }
}

/* 西表島 */
.topMap__svg.--iriomote {
  top: 44.4em;
  right: 257.24em;
  width: 22.36em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--iriomote {
    top: 28.1em;
    right: 162.62em;
    width: 16.52em;
  }
}

/* 鳩間島 */
.topMap__svg.--hatoma {
  top: 35.4em;
  right: 262.2em;
  width: 8.7em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--hatoma {
    top: 20.64em;
    right: 166.42em;
    width: 6.3em;
  }
}

/* 由布島 */
.topMap__svg.--yubu {
  top: 42.3em;
  right: 252.3em;
  width: 8.7em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--yubu {
    top: 25.16em;
    right: 158.82em;
    width: 6.3em;
  }
}

/* 小浜島 */
.topMap__svg.--kohama {
  top: 50.3em;
  right: 237.22em;
  width: 19.38em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--kohama {
    top: 32.5em;
    right: 147.35em;
    width: 14.77em;
  }
}

/* 黒島 */
.topMap__svg.--kuro {
  top: 57.5em;
  right: 245.6em;
  width: 8.8em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--kuro {
    top: 37.8em;
    right: 153.71em;
    width: 6.81em;
  }
}

/* 新城島 */
.topMap__svg.--aragusu {
  top: 58.2em;
  right: 255.6em;
  width: 8.7em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--aragusu {
    top: 38.3em;
    right: 161.82em;
    width: 6.3em;
  }
}

/* 波照間島 */
.topMap__svg.--hateruma {
  top: 69.1em;
  right: 264.1em;
  width: 10.3em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--hateruma {
    top: 44.4em;
    right: 170.22em;
    width: 7.5em;
  }
}

/* 加屋真島 */
.topMap__svg.--kayama {
  top: 32.5em;
  right: 246.4em;
  width: 10.3em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--kayama {
    top: 15.5em;
    right: 154.22em;
    width: 7.5em;
  }
}

/* 与那国島 */
.topMap__svg.--yonaguni {
  top: 11.1em;
  right: 280.3em;
  width: 10.3em;
}

@media screen and (max-width: 767px) {
  .topMap__svg.--yonaguni {
    top: 6.66em;
    right: 177.42em;
    width: 7.5em;
  }
}

.topMap__nav {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%);
}

@media screen and (max-width: 767px) {
  .topMap__nav {
    position: static;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    column-gap: 0.5em;
    transform: none;
  }
}

.topMap__button {
  display: flex;
  align-items: center;
  min-height: 13.2em;
  margin: 0.5em 0;
  border-radius: 0 1em 1em 0;
  padding: 1.1em 1.4em 0.9em;
  background-color: var(--bg-color);
  transition: background-color 0.3s;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .topMap__button {
    min-height: unset;
    margin: 0;
    padding: 1.2em 0.8em;
    border-radius: 1em 1em 0 0;
  }
}

@media(any-hover: hover) {
  .topMap__button:hover {
    opacity: 1;
    background-color: var(--hover-bg-color);
  }
}

.topMap__buttonText {
  writing-mode: vertical-lr;
  font-size: 1.8em;
  font-weight: 700;
  line-height: calc(22 / 18);
  letter-spacing: 0.1111em;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .topMap__buttonText {
    writing-mode: unset;
    font-size: 1.3em;
    line-height: calc(20 / 13);
    letter-spacing: 0;
  }
}

/* モーダル */
.islandModal {
  position: absolute;
  display: none;
  text-align: left;
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-height: 1022px) {
  .islandModal {
    font-size: calc(10 / 1022 * 100vh);
  }
}

@media screen and (min-width: 768px) and (max-width: 1060px) and (max-height: 1022px) {
  .islandModal {
    font-size: min(calc(10 / 1060 * 100vw), calc(10 / 1022 * 100vh));
  }
}

@media screen and (max-width: 767px) {
  .islandModal {
    font-size: calc(10 / 390 * 100vw);
  }
}

.islandModal.is-open {
  display: block;
}

.islandModal__overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  background: rgba(0 0 0 / 0.7);
  display: flex;
  justify-content: center;
  padding: 4em 6em;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.islandModal__overlay::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 767px) {
  .islandModal__overlay {
    padding: 2em;
  }
}

.islandModal[aria-hidden="false"] .islandModal__overlay {
  animation: fadeIn 0.4s cubic-bezier(0, 0, 0.2, 1);
}

.islandModal[aria-hidden="true"] .islandModal__overlay {
  animation: fadeOut 0.4s cubic-bezier(0, 0, 0.2, 1);
}

.islandModal__body {
  position: relative;
  width: 100%;
  max-width: 94em;
  margin: auto;
}

.islandModal__close {
  position: absolute;
  top: 2.3em;
  right: -4.7em;
  width: 10em;
  height: 10em;
  border: 1px solid #20303C;
  border-radius: 50%;
  background-color: #20303C;
  transition: background-color 0.3s;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .islandModal__close {
    top: -1em;
    right: 0;
    width: 5.4em;
    height: 5.4em;
  }
}

.islandModal__close::before,
.islandModal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.96em;
  height: 0.2em;
  background-color: #fff;
  transition: background-color 0.3s;
}

@media screen and (max-width: 767px) {

  .islandModal__close::before,
  .islandModal__close::after {
    width: 2.26em;
  }
}

@media (any-hover: hover) {
  .islandModal__close:hover {
    background-color: #fff;
  }

  .islandModal__close:hover::before,
  .islandModal__close:hover::after {
    background-color: #20303C;
  }
}

.islandModal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.islandModal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.islandModal__head {
  display: inline-block;
  margin-bottom: -0.5px;
  padding: 1em 2em;
  border-radius: 0 2em 0 0;
  background-color: #80C15D;
}

@media screen and (max-width: 767px) {
  .islandModal__head {
    padding: 1em;
  }
}

.islandModal__headTitle {
  font-family: "Economica", sans-serif;
  font-size: 4.5em;
  line-height: calc(52 / 45);
  color: #fff;
}

@media screen and (max-width: 767px) {
  .islandModal__headTitle {
    font-size: 2.7em;
    line-height: calc(31 / 27);
  }
}

.islandModal__card {
  padding: 3.4em calc(64 / 940 * 100%);
  border: 0.6em solid #80C15D;
  border-radius: 0 2em 2em 2em;
  background-color: #fff;
  box-shadow: 0px 0.4em 1.4em #0000000D;
}

@media screen and (max-width: 767px) {
  .islandModal__card {
    padding: 2.6em 1.6em;
    border-width: 0.4em;
  }
}

.islandModal__imgWrapper {
  position: relative;
  background-color: #eee;
}

.islandModal__imgWrapper::before {
  content: "";
  display: block;
  padding-top: 57.5%;
}

.islandModal__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.islandModal__label {
  position: absolute;
  top: 0;
  left: 0;
  width: 15em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .islandModal__label {
    width: 7.8em;
  }
}

.islandModal__cardBody {
  display: flex;
  align-items: center;
  column-gap: 5em;
  margin-top: 2em;
  padding: 0 2.75em;
}

@media screen and (max-width: 767px) {
  .islandModal__cardBody {
    display: block;
    margin-top: 1.5em;
    padding: 0;
    visibility: hidden;
  }
}

.islandModal__cardText {
  margin-bottom: 2.5em;
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.875;
}

@media screen and (max-width: 767px) {
  .islandModal__cardText {
    margin-bottom: calc(3em / 1.4);
    font-size: 1.4em;
    line-height: calc(24 / 14);
  }

  .islandModal__cardText::after {
    content: "";
    display: block;
    clear: both;
  }
}

.islandModal__figure {
  flex-shrink: 0;
  width: 23.5em;
}

@media screen and (max-width: 767px) {
  .islandModal__figure {
    float: right;
    width: calc(12em / 1.4);
    margin: 1em 0 0 1em;
    clear: both;
  }
}

.islandModal__illust {
  display: block;
  width: 100%;
  height: auto;
}

.islandModal__figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.3125em;
  margin-top: 0.625em;
  text-align: center;
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.4375;
}

@media screen and (max-width: 767px) {
  .islandModal__figcaption {
    column-gap: calc(0.5em / 1.2);
    margin-top: calc(1em / 1.2);
    font-size: calc(1.2em / 1.4);
    line-height: calc(17 / 12);
  }
}

.islandModal__figcaption::before {
  content: "";
  flex-shrink: 0;
  width: 1em;
  height: 1.25em;
  background: url("../img/top/icon-island-caption.svg") no-repeat center / contain;
}

@media screen and (max-width: 767px) {
  .islandModal__figcaption::before {
    width: calc(1em / 1.2);
    height: calc(1.25em / 1.2);
  }
}

.islandModal__bottomClose {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5em;
  margin-top: calc(3em / 1.4);
  padding-bottom: calc(0.35em / 1.4);
  border-bottom: 1px solid #20303C;
  font-size: 1.4em;
  font-weight: 500;
}

.islandModal__bottomClose::before {
  content: "";
  flex-shrink: 0;
  width: calc(2em / 1.4);
  height: calc(2em / 1.4);
  background: url("../img/top/modal-bottom-close.svg") no-repeat center / contain;
}

@media screen and (min-width: 768px) {
  .islandModal__bottomClose {
    display: none;
  }
}

/* ------------------------------
RANKING
------------------------------ */
.topRanking {
  padding-bottom: 11.7em;
  background-image: linear-gradient(180deg, #F6D077, #F6D077 61.2em, #F5F3EE 61.2em);
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-height: 1266px) {
  .topRanking {
    font-size: calc(10 / 1160 * (100vh - 106px));
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 1236px) {
  .topRanking {
    font-size: calc(10 / 1160 * (100vh - 76px));
  }
}

@media screen and (max-width: 767px) {
  .topRanking {
    padding-bottom: 6em;
    background-image: linear-gradient(180deg, #F6D077, #F6D077 38em, #F5F3EE 38em);
    font-size: calc(10 / 390 * 100vw);
  }
}

.topRanking__head {
  padding: 2.86em 0 2.68em;
  border: 1px solid #fff;
  border-top: none;
}

@media screen and (max-width: 767px) {
  .topRanking__head {
    padding: 1.5em 0;
  }
}

.topRanking__description {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1em;
  padding: 1.4em 0 2em;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}

@media screen and (max-width: 767px) {
  .topRanking__description {
    column-gap: 1.5em;
    padding: 1.5em 0 1.7em;
  }
}

.topRanking__descriptionText {
  display: flex;
  column-gap: calc(1em / 2.4);
  font-size: 2.4em;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .topRanking__descriptionText {
    flex-direction: column;
    align-items: center;
    font-size: 1.5em;
    line-height: calc(21 / 15);
  }
}

.topRanking__icon01 {
  width: 6.6em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topRanking__icon01 {
    width: 4.2em;
  }
}

.topRanking__icon02 {
  width: 6.8em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topRanking__icon02 {
    width: 4.7em;
  }
}

.topRanking__body {
  padding: 9.1em 4em 10.5em;
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .topRanking__body {
    padding: 3em 1.2em;
  }
}

.topRanking__slider {
  position: relative;
  max-width: 94.079%;
  margin: 0 auto;
  padding: 0 85px;
}

@media screen and (max-width: 1200px) {
  .topRanking__slider {
    max-width: 100%;
    padding: 0 56px;
  }
}

@media screen and (max-width: 1023px) {
  .topRanking__slider {
    padding: 0 44px;
  }
}

@media screen and (max-width: 767px) {
  .topRanking__slider {
    padding: 0;
  }
}

.topRanking__slide {
  text-align: left;
}

.topRanking__imgWrapper {
  position: relative;
  margin: 0 2em;
  border-radius: 50%;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .topRanking__imgWrapper {
    margin: 0;
  }
}

.topRanking__imgWrapper::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.topRanking__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topRanking__meta {
  display: flex;
  align-items: flex-end;
  column-gap: 2em;
  margin-top: 0.5em;
}

@media screen and (max-width: 767px) {
  .topRanking__meta {
    column-gap: 1em;
    margin-top: 0;
  }
}

.topRanking__rank {
  flex-shrink: 0;
  width: 6em;
  height: 6.7em;
  margin-bottom: 0.2em;
  object-fit: contain;
  object-position: center bottom;
}

@media screen and (max-width: 767px) {
  .topRanking__rank {
    width: 4.66em;
    height: 4.5em;
    margin-bottom: 0;
  }
}

.topRanking__rank.--crown {
  width: 7.7em;
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .topRanking__rank.--crown {
    width: 5.2em;
  }
}

.topRanking__date {
  font-family: "Economica", sans-serif;
  font-size: 2.3em;
  font-weight: 700;
  line-height: 1.2778;
}

@media screen and (max-width: 767px) {
  .topRanking__date {
    font-size: 1.4em;
    line-height: calc(16 / 14);
  }
}

.topRanking__postTitle {
  height: 4.35em;
  margin-top: 0.5em;
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

@media screen and (max-width: 767px) {
  .topRanking__postTitle {
    height: calc(7.2em / 1.5);
    margin-top: calc(0.7em / 1.5);
    font-size: 1.5em;
    line-height: calc(24 / 15);
  }
}

.topRanking__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  max-height: 15.5em;
  margin-top: 2em;
  border-top: 1px solid #D9D9D9;
  padding-top: 2em;
  overflow: hidden;
}

@media screen and (max-width: 1023px) {
  .topRanking__categories {
    max-height: 13.7em;
  }
}

@media screen and (max-width: 767px) {
  .topRanking__categories {
    gap: 0.5em;
    max-height: 9.9em;
    margin-top: 0.8em;
    padding-top: 1em;
  }
}

.topRanking__category {
  padding: calc(0.6em / 1.4) calc(1em / 1.4);
  background-color: #F1EDE5;
  border-radius: 9999px;
  font-size: 1.6em;
  font-weight: 700;
  line-height: calc(20 / 14);
}

@media screen and (max-width: 1023px) {
  .topRanking__category {
    font-size: 1.4em;
    white-space: nowrap;
  }
}

@media screen and (max-width: 767px) {
  .topRanking__category {
    padding: calc(0.5em / 1.1) calc(0.8em / 1.1);
    font-size: 1.1em;
    line-height: calc(16 / 11);
  }
}

.topRanking .swiper-scrollbar {
  position: static;
  width: calc(100% - 3em);
  height: 0.8em;
  margin: 4.2em auto 0;
  background-color: #F0F0F0;
}

@media screen and (max-width: 767px) {
  .topRanking .swiper-scrollbar {
    display: none;
  }
}

.topRanking .swiper-scrollbar-drag {
  background-color: #DADADA;
}

/* ------------------------------
OFFICIAL INSTAGRAM
------------------------------ */
.topInstagram {
  padding-bottom: 8em;
  background-image: linear-gradient(180deg, #F6D077, #F6D077 61.2em, #F5F3EE 61.2em);
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-height: 1068px) {
  .topInstagram {
    font-size: calc(10 / 962 * (100vh - 106px));
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 1038px) {
  .topInstagram {
    font-size: calc(10 / 962 * (100vh - 76px));
  }
}

@media screen and (max-width: 767px) {
  .topInstagram {
    padding-bottom: 6em;
    background-image: linear-gradient(180deg, #F6D077, #F6D077 38em, #F5F3EE 38em);
    font-size: calc(10 / 390 * 100vw);
  }
}

.topInstagram__head {
  padding: 2.86em 0 2.68em;
  border: 1px solid #fff;
  border-top: none;
}

@media screen and (max-width: 767px) {
  .topInstagram__head {
    padding: 1.5em 0;
  }

  .topInstagram .topHeading {
    padding: calc(1em / 4.6) calc(2em / 4.6) 0 calc(2em / 4.6);
    white-space: nowrap;
  }
}


.topInstagram__description {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1.5em;
  padding: 1.4em 0 2em;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}

@media screen and (max-width: 767px) {
  .topInstagram__description {
    column-gap: 1em;
    padding: 1.5em 0 2.1em;
  }
}

.topInstagram__descriptionText {
  font-size: 2.6em;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .topInstagram__descriptionText {
    font-size: 1.5em;
    line-height: calc(24 / 15);
  }
}

.topInstagram__icon01 {
  width: 4.7em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topInstagram__icon01 {
    width: 3em;
  }
}

.topInstagram__icon02 {
  width: 6.5em;
  height: auto;
}

@media screen and (max-width: 767px) {
  .topInstagram__icon02 {
    width: 3.2em;
  }
}

.topInstagram__body {
  padding: 8em 4em;
  background-color: #fff;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .topInstagram__body {
    padding: 3em 0.45em;
  }
}

.topInstagram__list {
  position: relative;
  max-width: 137.6em;
  margin: 0 auto 5em;
  overflow-x: hidden;
}

@media screen and (max-width: 767px) {
  .topInstagram__list {
    margin-bottom: 3em;
  }
}

#sbi_images {
  display: flex !important;
  width: unset !important;
  box-sizing: content-box !important;
  padding: 0 !important;
  transition-timing-function: linear;
}

#sb_instagram #sbi_images .sbi_item {
  flex-shrink: 0;
  width: 20% !important;
  padding: 0 0.75em;
}

@media screen and (max-width: 767px) {
  #sb_instagram #sbi_images .sbi_item {
    width: 50% !important;
  }
}

#sb_instagram .sbi_photo {
  height: auto !important;
  padding-top: calc(349 / 260 * 100%);
}

#sb_instagram .sbi_photo img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100% !important;
}

@media screen and (max-width: 767px) {
  .topInstagram .topBtn {
    width: calc(28.3em / 1.5);
  }
}

@media screen and (min-width: 768px) {
  .topInstagram .slider__controls {
    display: none;
  }
}

/* ------------------------------
汎用
------------------------------ */
.display-flex {
  display: flex;
}

.position-relative {
  position: relative;
}

.text-center {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .hidden-pc {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .hidden-sp {
    display: none;
  }
}

.bg-green {
  background-color: #7FBE26;
}

.bg-purple {
  background-color: #6F57A2;
}

.bg-pink {
  background-color: #E8546B;
}

.bg-blue {
  background-color: #0057E2;
}

.bg-brown {
  background-color: #8E4700;
}