@charset "UTF-8";

#fvWrap {
  position: relative;
}

#fvWrap h2 {
  position: absolute;
  text-align: center;
  font-weight: 500;
  color: #FFF;
  font-size: 5.9vw;
  line-height: 9.23vw;
  top: 6.92vw;
  bottom: 0;
  right: 0;
  left: 0;
}

main .tab {
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  border-bottom: none;
  padding: 0 9.49vw;
  margin-top: 0;
}

main .tab li {
  height: 15.38vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
  font-size: 4.62vw;
  color: #fff;
  background-color: #9D9D9D;
  border-left: 1px solid;
  border-image: linear-gradient(to bottom, transparent 54%, #000 54% 84%, transparent 84%);
  border-image-slice: 2;
  font-weight: 500;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

main .tabContent {
  margin: 0;
  display: none;
}

main .tabContent.active {
  display: block;
  margin: auto;
  padding: 6.29vw 9.19vw 0;
}

main .tab li.active {
  color: #000;
  background-color: #fff;
}

main .tab li:first-child {
  width: 39.74vw;
  justify-self: start;
}

main .tab li:last-child {
  width: 39.74vw;
}

.controllScrollOver {
  width: 100%;
}

.intro>img {
  width: 90.77vw;
  max-width: none;
  margin-left: -9vw;
  padding: 3.08vw 0 8.97vw;
}

#introUnder {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

#introUnder p {
  width: 54.1vw;
  font-size: 3.59vw;
  line-height: 6.15vw;
  font-weight: 500;
  color: #000;
}

#introUnder img {
  width: 16.44vw;
  margin-right: 3.05vw;
}

#audienceSpot img:first-child {
  height: 4.62vw;
  width: 79.31vw;
  margin-bottom: 5vw;
  padding-left: 9.49vw;
}

#audienceSpot img:last-child {
  width: 100%;

}



#mapWrap {
  position: relative;
}

#mapWrap img.map {
  width: 302.05vw;
  height: auto;
  position: relative;
  padding: 0;
  max-width: none;
}

#mapWrap .tab {
  border-bottom: none;
}

#audienceSpotWrap {
  width: 100vw;
  overflow: scroll;
  margin: 0 0 10vw -9.49vw;
}

#audienceSpotWrap .controllScrollButtonWrap {
  left: 25px;
  top: 26.5vw;
  width: 87.82vw;
}

.controllScrollButtonWrap b {
  background-color: #013453;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9.23vw;
  height: 9.23vw;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

#audienceSpot .controllScrollButtonWrap img {
  padding: 0;
  margin: 0;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(354deg) brightness(103%) contrast(102%);
}
.controllScrollButtonPrev img{
transform: rotate(180deg);
}

.intro {
  margin-bottom: 14.1vw;
}

#audienceSpot {
  position: relative;
}

#audienceSpotWrap .tab {
  position: initial;
}

#audienceSpotWrap .tab li {
  display: flex;
  width: 14.49vw;
  height: 14.49vw;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  border-image: none;
  border: none;
  background-color: transparent;
}

#audienceSpotWrap .tab li.active {
  background: none;
}

#point1 {
  position: absolute;
  top: 39.5vw;
  left: 44.5vw;
}

#point2 {
  position: absolute;
  top: 11vw;
  left: 39vw;
}

#point3 {
  position: absolute;
  top: 32.5vw;
  left: 153.2vw;
}

#point4 {
  position: absolute;
  top: 86.5vw;
  left: 152.2vw;
}

#point5 {
  position: absolute;
  top: 115.5vw;
  left: 234.8vw;
}


.attentionBlock {
  padding: 0 0 12.62vw;
}

.numberWrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin-bottom: 2.87vw;
}

.attentionBlock>div:first-child {
  display: flex;
  justify-content: start;
}

.attentionBlock>div:last-child {
  display: flex;
  justify-content: space-between;
}

.attentionBlock:not(:first-child)>div {
  flex-wrap: wrap;
  justify-content: right;
}

.attentionBlock:not(:first-child)>div.numberWrap {
  justify-content: left;
}

.attentionBlock:not(:first-child)>div>p.attentionContent {
  width: 100%;
}

.attentionBlock>div img {
  width: 34.1vw;
  height: auto;
  /* margin-left: 5vw; */
}

.attentionBlock div p {
  display: block;
  font-size: 3.59vw;
  line-height: 6.15vw;
  color: #000;
  width: 40.51vw;
  word-break: break-all;
  font-weight: 300;
}

.attentionBlock .attentionTtl {
  display: inline;
  font-size: 4.62vw;
  line-height: 7.18vw;
  font-weight: 600;
  color: #000;
  width: 67.1vw;
}

span.number {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  background: #0CA1DD;
  text-align: center;
  border-radius: 50%;
  font-size: 5.13vw;
  font-weight: bold;
  font-family: "oswald";
  height: 9.49vw;
  width: 9.49vw;
  margin-right: 3.62vw;
}

#attentionBannerWrap {
  position: relative;
  width: 100%;
  height: 80.56vw;
  font-size: 1.56vw;
  color: #000;
  font-weight: 500;
  margin-bottom: 10.51vw;
  margin-top: -11vw;
  padding: 0 9.49vw;
}
#attentionBlockWrap{
  padding: 0 9.49vw;
}
#attentionBannerWrap p {
  font-size: 4.62vw;
  line-height: 7.69vw;
}

.attentionBanner {
  position: absolute;
  bottom: 0;
  max-width: none;
  width: 90.51vw;
  /* margin-bottom: 10.51vw; */
}

#starterIntro {
  padding: 2vw 0 0;
}

#starterIntro img {
  width: 88.72vw;
  height: auto;
  max-width: none;
  margin-left: -7vw;
}

#starterIntro p {
  color: #000;
  padding: 8.2vw 0;
  font-size: 3.59vw;
  line-height: 6.15vw;
  letter-spacing: -.1vw;
  font-weight: 500;
}

#starterDetail {
  padding: 8.97vw 0 0;
  font-weight: 500;
}

#starterDetail ul {
  font-weight: 100;
  color: #000;
  font-size: 3.08vw;
  line-height: 6.15vw;
  letter-spacing: -.1vw;
}

#reception a,
#reception p {
  font-size: 3.59vw;
  color: #000;
  line-height: 6.15vw;
}

#reception a {
  /* padding-left: 1.8vw; */
  line-height: initial;
}

#reception .receptionPlace {
  margin: 2vw 0 4vw;
  width: 100%;
}

#starter .controllScrollOver {
  width: 100vw;
  margin-left: -9.49vw;
}

#starter .controllScrollWrap {
  padding-left: 9.49vw;
  margin-right: -9.49vw;
  padding-right: 9.49vw;
}

#starter .controllScrollButtonWrap {
  top: 44%;
  width: 87%;
  margin-left: 6vw;
}

#starter .controllScrollButtonWrap b {
  border: none;
  background-color: #FFF;
  color: #013453;

}

#starter .controllScrollButtonWrap b svg {
  fill: #013453;
}

#starter .controllScrollOver img {
  height: 48.72vw;
  width: auto;
}

.blueIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.26vw;
  height: 6.92vw;
  background: #0CA1DD;
  color: #FFF;
  font-size: 3.59vw;
  margin-bottom: 5.13vw;
  letter-spacing: -.1vw;
}

#schedule {
  line-height: 6.15vw;
  color: #000;
  font-size: 3.59vw;
  margin-bottom: 9.26vw;

}

/* popup */
.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 120.51vw;
  background-color: #FFF;
  color: #000;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
  z-index: 20;
  transform: translateY(100%);
  transition: all 0.3s ease;
}

.popup div {
  padding: 9.49vw 9.49vw;
}

.popup.active {
  transform: translateY(0);
  display: block;
}

.popup i.closeTabId {
  position: absolute;
  top: 4.15vw;
  right: 4.44vw;
  width: 4.62vw;
  height: 4.62vw;
  width: 10vw;
  height: 10vw;
  font-style: normal;
  color: #FFF;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  font-size: 8vw;
}

.popup img {
  width: 100%;
}

#mapWrap .popup img {
  width: 100%;
  height: auto;
  margin-bottom: 10vw;
}

.popup .popupTtl {
  width: 100%;
  font-weight: bold;
  padding: 0 0 5.38vw;
  font-size: 5.13vw;
  line-height: 7.44vw;
}

.popup p {
  font-size: 3.85vw;
  line-height: 6.41vw;
}

.popupBtn {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-top: 5vw;
}

.popupBtn a {
  padding: 3vw;
  text-align: center;
  width: 100%;
  color: #FFF;
}

.popupBtn a:first-child {
  background-color: #013453;
}

.popupBtn a:last-child {
  background-color: #7b7601;
}

.close {
  position: absolute;
  display: block;
  width: 5.13vw;
  height: 5.13vw;
  z-index: 5;
  opacity: 1;
  right: 2vw;
  top: 7vw;
}

.close i,
.close b {
  width: 40%;
  position: absolute;
  height: 2px;
  background: #FFF;
  display: inline-block;
  transform: rotate(0);
  transition: all .4s;
}

.close i {
  transform: rotate(45deg);
  right: 4vw;
  top: 3.45vw;
  top: 33.3%;
  right: 38.3%;
}

.close b {
  transform: rotate(-45deg);
  top: 3.6vw;
  left: 2vw;
  top: 34.5%;
  left: 22%;
}

.footerTopLink li {
  width: 34.3vw;
  padding-bottom: 2vw;
  border-bottom: 2px solid #000;
  font-size: 3.14vw;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footerTopLink li a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.footerTopLink li a::after {
  content: "";
  display: block;
  background: url(../img/common/arrowRightBlack.svg) no-repeat 100%;
  width: 3vw;
  height: 5.59vw;
  background-size: 4vw;
}