@charset "UTF-8";
body {
    background-color: #f0f0f0;
    width: 1366px;
    margin: 0 auto;
    justify-content: center;
}
.topPage {
  background-image: url('../images/topPage.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 770px;
}
.taiwan {
    align-items: center;
    display: flex;
    justify-content: center;
}
.topPage .taiwan img {
    width: 700px;
    height: auto;
    transform: translateY(250px);

}
.sns {
  transform: translateY(240px);
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-left: 100px;
}
.sns a img {
    width: 35px;
    height: auto;
}
.section {
  padding: 80px 100px;
  display: flex;
  justify-content: center;
  background-size: cover;
  background-position: center;
  position: relative;
}

.section1 {
  background-image: url('../images/taipeiSkyline.png');
}

.section2 {
  background-image: url('../images/taiwanImage.png');
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 0;
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  position: relative;
  gap: 30px;
  flex-wrap: wrap;
}
.spot a img {
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.spot a img:hover {
  transform: scale(0.9);
}
.text {
  flex: 1;
  max-width: 33%;
}

.image {
  flex: 1;
  max-width: 50%;
}

.flag {
  width: 100px;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.jp {
  font-size: 1.2em;
  border-bottom: 2px solid #333;
  display: inline-block;
  padding-bottom: 5px;
  margin-top: 10px;
}

.mainImage {
  width: 100%;
  height: auto;
}

.description {
  font-size: 20px;
  line-height: 1.8;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  padding: 60px 0;
}
 .flagTitle {
  display: flex;
  flex-direction: column;
  align-items: center; /* 垂直中央揃え */
  gap: 100px;            /* 国旗とテキストの間隔 */
}

.titleText h2 {
  margin: 0;
  font-size: 48px;
}

.titleText .jp {
  font-size: 32px;
  border-bottom: 2px solid #333;
  display: inline-block;
  padding-bottom: 5px;
  margin-top: 5px;
}
.titleGallery {
 background-image: url('../images/titleImage.png');
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
 width: 530px;
 height: 96px;
  margin: 0 auto 0 103px;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 10px;
  padding-bottom: 20px;
}
.titleGallery h1 {
  font-size: 48px;
}
.titleGallery p {
  font-size: 24px;
}
.titleTravel {
 background-image: url('../images/titleImage.png');
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
 width: 530px;
 height: 96px;
  margin: 0 100px 120px auto;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 10px;
  padding-bottom: 20px;
}
.titleTravel h1 {
  font-size: 48px;
}
.titleTravel p {
  font-size: 24px;
}
.travelSpot {
  display : flex;
justify-content: space-around;
align-items: center;
}
.travelSpot img {
  max-width: 225px;
  height: auto;
}
.spot {
  position: relative;
}
.absolute01 {
  position: absolute;
  top: 60px;
  left: 225px;
}
.absolute01 {
  max-height: 209px;
}
.absolute02 {
  position: absolute;
  top: 110px;
  left: -85px;
}
.absolute02 {
  max-height: 209px;
}
.absolute03 {
  position: absolute;
  top: 390px;
  left: -10px;
}
.absolute03 {
  max-height: 209px;
}
.travelSpot p {
  width: 420px;
  height: auto;
  font-size: 20px;
  line-height: 1.8;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  padding: 60px 0;
}
.hr1 {
  border-top: 1px solid #000;
  margin: 183px auto 100px auto;
  width: 480px;
}
.titleEvent {
  background-image: url('../images/titleImage.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 530px;
  height: 96px;
  margin: 0 auto 120px 240px;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 10px;
  padding-bottom: 20px;
}
.titleEvent h1 {
  font-size: 48px;
}
.titleEvent p {
  font-size: 24px;
}
.festival {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin: 0 103px 40px 103px;
}
.festival img {
  width: 596px;
  height: 396px;
}
.fes h2 {
  font-size: 36px;
  margin-bottom: 40px;
}
.fes .title2 {
  margin-bottom: 0;
}
.column h3{
  display: flex;
  font-weight: bold;
  font-size: 20px;
  justify-content: center;
}
.column p{
  font-size: 20px;
  display: flex;
  justify-content: center;
  margin: 32px 0 32px 0;
}
.wiki {
    width: 314px;
  height: auto;
  font-size: 20px;
  line-height: 1.8;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  justify-self: center;
}
.column {
  align-items: flex-end;
}
.festival2 {
  margin-top: 80px;
}
.taiwanWiki {
  display: flex;
  justify-content: center;
  font-size: 20px;
  gap: 60px;
  margin-bottom: 80px;
}
.taiwanInfo {
  border: 1px solid #444;
  margin: 80px 160px;
}
.taiwanInfo h1 {
  font-size: 40px;
  margin: 40px auto 80px;
  display: flex;
  justify-content: center; 
}
.fesEvent {
  margin-bottom: 80px;
}


.sliderContainer {
      position: relative;
      width: 100%;
      margin: 50px auto;
      overflow: hidden;
    }

    .sliderTrack {
      display: flex;
      gap: 80px; /* 画像の間隔 */
      transition: transform 0.5s ease-in-out;
      margin-left: 155px;
    }

    .slide {
      width: 295px;
      flex-shrink: 0;
    }

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

    .indicators {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      gap: 60px;
    }

    .dotsWrapper {
      display: flex;
      gap: 60px;
    }
    .dot {
      width: 28px;
      height: 28px;
      background: #bbb;
      border-radius: 50%;
      cursor: pointer;
    }

    .dot.active {
      background: #000000;
    }
.toTop img {
    margin: 0px;
    position: fixed;
    right: calc((100% - 1366px) / 2 + 20px);
    /* right: 20px; */
    bottom: 20px;
    z-index: 999;
}
    @media screen and (min-width: 769px) {
      .spImg {
        display: none;
      }
    }


@media screen and (max-width: 768px) {
  body {
    max-width: 375px;
  }
  .pcImg {
    display: none;
  }
  #headerContainer a img {
    display: none;
  }
  .topPage {
    background-image: url('../images/spTopPage.png');
    background-size: cover;
    background-position: center;
    height: 667px;

  }
  .topPage .taiwan img {
    width: 335px;
    height: 135px;
    margin: 0;
    transform: translateY(153%);
  }
  .sns {
    transform: translateY(203%);
    margin-left: 20px;
  }
  .header {
    display: none
  }
  .content {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }
  .flagTitle {
    gap: 40px;
  }
  .section {
    padding: 20px 20px 60px 20px;
    background-position: 76%;
  }
  .mainImage {
    width: 335px;
    height: 139px;
  }
  .flag {
    width: 32px;
  }
  .titleText h2 {
    font-size: 20px;
    justify-self: center;
    margin-bottom: 20px;
  }
  .titleText .jp {
    font-size: 12px;
    justify-self: center;
    padding-bottom: 12px;
  }
  .titleText {
    width: 132px;
  }
  .image {
    max-width: 100%;
  }
  .text {
    max-width: 223px;
  }
  .description {
    font-size: 12px;
    padding: 12px 0;
  }
  .travelSpot {
    display: flex;
    flex-direction: column;
    gap:60px;
  }
  .travelSpot p {
    font-size: 12px;
    width: 220px;
    padding: 12px 0;
  }
  .spot img{
    width: 255px;
    height: 409px;
  }
  .spot a img {
    width: 59px;
    height: 126px;
  }
  .absolute01 {
    position: absolute;
    top: 75px;
    left: 210px;
  }
  .absolute02 {
    position: absolute;
    top: 105px;
    left: -45px;
  }
  .absolute03 {
    position: absolute;
    top: 320px;
    left: 10px;
  }
  .titleTravel {
    width: 220px;
    height: 40px;
    margin: 20px auto 60px;
    padding-bottom: 10px;
  }
  .titleTravel p {
    font-size: 12px;
  }
  .titleTravel h1 {
    font-size: 24px;
  }
  .hr1 {
    width: 223px;
    margin: 111px auto 60px;
  }
    .titleEvent {
    width: 220px;
    height: 40px;
    margin: 20px auto 60px;
    padding-bottom: 10px;
  }
  .titleEvent p {
    font-size: 12px;
  }
  .titleEvent h1 {
    font-size: 24px;
  }
  .festival{
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .fes h2 {
    font-size: 20px;
    justify-self: center;
  }
  .fes img {
    width: 335px;
    height: 195px;
  }
  .column p,.column h3 {
    font-size: 12px;
  }
  .column p {
    margin: 12px 0 12px;
  }
  .column h3 {
    margin: 0 auto 8px;
  }
  .wiki {
    width: 223px;
  }
  .festival2{
    margin-top: 40px;
  }
  .fes .title2 {
    margin-bottom: 0;
  }
  .taiwanInfo {
    margin: 20px;
  }
  .taiwanWiki {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    font-size: 12px;
    margin-bottom: 20px;
  }
  .festival2 {
    margin-bottom: 60px;
  }
  .taiwanInfo h1 {
    font-size: 20px;
    margin: 20px auto 40px;
  }
  .sliderTrack {
    gap: 20px;
    margin-left: -313px;
  }
  .sliderContainer {
    width: 100%;
    padding: 0 40px ;
  }
  .titleGallery {
    width: 220px;
    height: 40px;
    margin: 20px auto 60px;
    padding-bottom: 10px;
  }
  .titleGallery p {
    font-size: 12px;
  }
  .titleGallery h1 {
    font-size: 24px;
  }
  .dotsWrapper {
    gap: 40px;
  }
  .arrow {
    display: none;
  }
  .dot {
    width: 18px;
    height: 18px;
  }
  .toTop img {
    margin: 0px;
    position: fixed;
    right: calc((100% - 375px) / 2 + 10px);
    /* right: 20px; */
    bottom: 20px;
    z-index: 999;
}
}