@charset "UTF-8";


/*************************
HERO
**************************/

/* ------ MOBILE & SMALL TABLET ------ */
@media screen and ( max-width:767px) {
  .first-hero {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
  }
  .main-title-inner {
    position: absolute;
    top: 36%;
    -webkit-transform: translate(0, -36%);
    transform: translate(0, -36%);
    left: 11.02vw;
    width: 77.777vw;
    height: 22.105vh;
    z-index: 20;
    display: flex;
    align-items: center;
  }
  .main-title {
    width: 77.777vw;
    height: auto;
  }
  .circle-5min-inner {
    position: absolute;
    top: 73%;
    -webkit-transform: translate(0, -73%);
    transform: translate(0, -73%);
    right: 11.02vw;
    width: 33vw;
    max-width: 208px;
    z-index: 20;
    display: flex;
    align-items: center;
  }
  .circle-5min {
    width: 33vw;
    height: auto;
    animation: circle-rotate 60s 2.5s linear infinite;
  }
  .circle-zsc {
    width: 33vw;
    height: auto;
  }
  .main-img-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100vh;
    z-index: 10;
  }
  .main-img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }
  .main-bg-border {
    display: none;
  }
}

/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 1023px) {
  .first-hero {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
  }
  .main-title-inner {
    position: absolute;
    top: 39%;
    -webkit-transform: translate(0, -39%);
    transform: translate(0, -39%);
    left: 13.02vw;
    width: 47.656vw;
    height: 20.996vh;
    z-index: 20;
    display: flex;
    align-items: center;
  }
  .main-title {
    width: 47.656vw;
    max-width: 366px;
    height: auto;
  }
  .circle-5min-inner {
    position: absolute;
    top: 64%;
    -webkit-transform: translate(0, -64%);
    transform: translate(0, -64%);
    right: 13.02vw;
    width: 26.562vw;
    max-width: 208px;
    height: 19.726vh;
    z-index: 20;
    display: flex;
    align-items: center;
  }
  .circle-5min {
    width: 26.562vw;
    height: auto;
    animation: circle-rotate 60s 2.5s linear infinite;
  }
  .circle-zsc {
    width: 26.562vw;
    height: auto;
  }
  .main-img-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 57.291vw;
    height: 75.778vh;
    z-index: 10;
  }
  .main-img {
    width: 57.291vw;
    height: 75.778vh;
    object-fit: cover;
  }
  .main-bg-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 46.875vh;
    -webkit-animation: color-change 7s linear infinite alternate both;
  	animation: color-change 7s linear infinite alternate both;
  }
}
/* ------ SMALL DESKTOP ------ */
@media screen and ( min-width:1024px) and (max-width: 1280px) {
  .first-hero {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
  }
  .main-title-inner {
    position: absolute;
    top: 36%;
    -webkit-transform: translate(0, -36%);
    transform: translate(0, -36%);
    left: 12.642vw;
    width: 26.793vw;
    height: 27.994vh;
    z-index: 20;
    display: flex;
    align-items: center;
  }
  .main-title {
    width: 26.793vw;
    height: auto;
  }
  .circle-5min-inner {
    position: absolute;
    top: 36%;
    -webkit-transform: translate(0, -36%);
    transform: translate(0, -36%);
    right: 12.642vw;
    width: 15.226vw;
    height: 26.953vh;
    z-index: 20;
    display: flex;
    align-items: center;
  }
  .circle-5min {
    width: 26.793vw;
    height: auto;
    animation: circle-rotate 60s 2.5s linear infinite;
  }
  .circle-zsc {
    width: 26.793vw;
    height: auto;
  }
  .main-img-inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 34.647vw;
    height: 84.244vh;
    z-index: 10;
  }
  .main-img {
    width: 34.647vw;
    height: 84.244vh;
    object-fit: cover;
  }
  .main-bg-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 46.875vh;
    -webkit-animation: color-change 7s linear infinite alternate both;
  	animation: color-change 7s linear infinite alternate both;
  }
}

/* ------ DESKTOP ------ */
@media screen and ( min-width:1281px) {
  .first-hero {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
  }
  .main-title-inner {
    position: absolute;
    top: 36%;
    -webkit-transform: translate(0, -36%);
    transform: translate(0, -36%);
    left: 17.642vw;
    width: 26.793vw;
    height: 27.994vh;
    z-index: 20;
    display: flex;
    align-items: center;
  }
  .main-title {
    width: 26.793vw;
    height: auto;
  }
  .circle-5min-inner {
    position: absolute;
    top: 36%;
    -webkit-transform: translate(0, -36%);
    transform: translate(0, -36%);
    right: 17.642vw;
    width: 15.226vw;
    height: 26.953vh;
    z-index: 20;
    display: flex;
    align-items: center;
  }
  .circle-5min {
    width: 26.793vw;
    height: auto;
    animation: circle-rotate 60s 2.5s linear infinite;
  }
  .circle-zsc {
    width: 26.793vw;
    height: auto;
  }
  .main-img-inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 26.647vw;
    height: 84.244vh;
    z-index: 10;
  }
  .main-img {
    width: 26.647vw;
    height: 84.244vh;
    object-fit: cover;
  }
  .main-bg-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 46.875vh;
    -webkit-animation: color-change 7s linear infinite alternate both;
  	animation: color-change 7s linear infinite alternate both;
  }
}
@keyframes circle-rotate {
  0% {
      transform:rotate(0deg);
  }
  100% {
      transform:rotate(360deg);
  }
}
@-webkit-keyframes color-change {
  0% {
    background: #158AFB;
  }
  100% {
    background: #002690;
  }
}
@keyframes color-change {
  0% {
    background: #158AFB;
  }
  100% {
    background: #002690;
  }
}

/*************************
PIC
**************************/

/* ------ MOBILE & SMALL TABLET ------ */
@media screen and ( max-width:767px) {
  .pic-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 15.526vh 0 12.526vh;
  }
  .pic-column1,
  .pic-column2,
  .pic-column3,
  .pic-column4 {
    width: 50%;
  }
  .pic-column2,
  .pic-column4 {
    margin-right: 0;
  }
  .pic-column1 {
    margin-top: 13.526vh;
  }
  .pic-column4 {
    margin-top: 13.526vh;
  }
  .pic-inner {
    position: relative;
    z-index: 1;
  }
  .pic-inner2 {
    position: relative;
    z-index: 1;
    margin-top: 10.526vh;
  }
  .pic-img-portrait {
    width: 41.111vw;
    height: 34.868vh;
    object-fit: cover;
  }
  .pic-img-square {
    width: 41.111vw;
    height: 41.111vw;
    object-fit: cover;
  }
}
/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 1023px) {
  .pic-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 20.833vh 12.239vw;
  }
  .pic-column1,
  .pic-column2,
  .pic-column3,
  .pic-column4 {
    width: 50%;
  }
  .pic-column2,
  .pic-column4 {
    margin-right: 0;
  }
  .pic-column1 {
    margin-top: 20.833vh;
  }
  .pic-column4 {
    margin-top: 20.833vh;
  }
  .pic-inner {
    position: relative;
    z-index: 1;
  }
  .pic-inner2 {
    position: relative;
    z-index: 1;
    margin-top: 20.833vh;
  }
  .pic-img-portrait {
    width: 31.380vw;
    height: 41.796vh;
    object-fit: cover;
  }
  .pic-img-square {
    width: 31.38vw;
    height: 31.38vw;
    object-fit: cover;
  }
}
/* ------ SMALL DESKTOP ------ */
@media screen and ( min-width:1024px) and (max-width: 1280px) {
  .pic-wrap {
    display: flex;
    justify-content: space-around;
    padding: 20.833vh 0;
  }
  .pic-column1,
  .pic-column2,
  .pic-column3,
  .pic-column4 {
    width: 17.642vw;
  }
  .pic-column1,
  .pic-column3 {
    margin-top: 20.833vh;
  }
  .pic-column4 {
    margin-top: 41.666vh;
  }
  .pic-inner {
    position: relative;
    z-index: 1;
  }
  .pic-inner2 {
    position: relative;
    z-index: 1;
    margin-top: 20.833vh;
  }
  .pic-img-portrait {
    width: 17.642vw;
    height: 40.729vh;
    object-fit: cover;
  }
  .pic-img-square {
    width: 17.642vw;
    height: 17.642vw;
    object-fit: cover;
  }
}

/* ------ DESKTOP ------ */
@media screen and ( min-width:1281px) {
  .pic-wrap {
    display: flex;
    justify-content: space-around;
    padding: 20.833vh 0;
  }
  .pic-column1,
  .pic-column2,
  .pic-column3,
  .pic-column4 {
    width: 17.642vw;
  }
  .pic-column1,
  .pic-column3 {
    margin-top: 20.833vh;
  }
  .pic-column4 {
    margin-top: 41.666vh;
  }
  .pic-inner {
    position: relative;
    z-index: 1;
  }
  .pic-inner2 {
    position: relative;
    z-index: 1;
    margin-top: 20.833vh;
  }
  .pic-img-portrait {
    width: 17.642vw;
    height: 55.729vh;
    object-fit: cover;
  }
  .pic-img-square {
    width: 17.642vw;
    height: 17.642vw;
    object-fit: cover;
  }
}

/*************************
CONTENTS
**************************/

/* ------ MOBILE & SMALL TABLET ------ */
@media screen and ( max-width:767px) {
  .contents-wrap {
    padding-bottom: 5.625vh;
  }
  .contents-title-inner {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 11.718vh;
  }
  .illust-icon {
    width: 56.666vw;
    margin-bottom: 4.21vh;
  }
  .title-paradise {
    width: 70.555vw;
    margin-bottom: 4.21vh;
  }
  .title-access {
    width: 56.111vw;
    margin-bottom: 4.21vh;
  }
  .title-foods {
    width: 47.222vw;
    margin-bottom: 4.21vh;
  }
  .title-stay {
    width: 36.111vw;
    margin-bottom: 4.21vh;
  }
  .title-shop {
    width: 78.333vw;
    margin-bottom: 4.21vh;
  }
  .heading-copy-text {
    font-size: 4.166vw;
    letter-spacing: .2em;
    line-height: 1.8em;
  }
  .map-wide {
    width: 100%;
    background: #DCEEFF;
    margin-bottom: 6.208vh;
  }
  .paradise-map-wide {
    width: 100%;
    height: auto;
  }
  .contents-text-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
  }
  .text-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: justify;
    margin-bottom: 10.416vh;
  }
  .top-thumbnail {
    font-size: 2.2rem;
    margin-bottom: 40px;
  }
  .shoulder-text {
    color: var(--PrimaryText);
    font-size: 1.4rem;
    margin-bottom: .6em;
    padding: 0 40px;
  }
  .shoulder-text-din {
    color: var(--PrimaryText);
    font-size: 1.4rem;
    margin-bottom: .6em;
    font-family: din-condensed, sans-serif;
    font-weight: 300;
    letter-spacing: .1em;
    padding: 0 40px;
  }
  .sub-title {
    color: var(--PrimaryText);
    font-size: 2rem;
    margin-bottom: 24px;
    padding: 0 40px;
  }
  .tag-list {
    font-size: 1.2rem;
    margin-bottom: 1.2em;
    padding: 0 40px;
    text-align: left;
  }
  .tag-word {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--SecondaryText);
    padding: .2em .6em;
    border: 1px solid var(--Border);
    border-radius: 3px;
    margin: 0 4px 6px 0;
  }
  .body-text {
    color: var(--SecondaryText);
    font-size: 1.6rem;
    line-height: 1.8em;
    padding: 0 40px;
  }
  .body-sub-text {
    color: var(--SecondaryText);
    font-size: 1.2rem;
    line-height: 1.5em;
    padding: 0 40px;
  }
  .caption-text {
    color: var(--SecondaryText);
    font-size: 1.2rem;
    line-height: 1.5em;
    margin: 0 40px;
  }
  .indent {
    padding-left: 1em;
    text-indent: -1em;
  }
  .sub-image {
    padding: 0 40px;
    margin-bottom: 12px;
  }
  .ticket-btn-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2em 0 1em;
    padding: 0 40px;
  }
  .mb-adjust {
    margin-bottom: 10.416vh;
  }
  .mb-text-adjust {
    margin-bottom: 1em;
  }
  .bottom-map {
    padding: 32px 40px 0;
  }
  .info-unit {
    display: flex;
    flex-direction: column;
    padding: 1.2em 0;
    border-top: 1px solid var(--Border);
    border-bottom: 1px solid var(--Border);
    margin: 8px 40px;
  }
  .info-text {
    color: var(--SecondaryText);
    font-size: 1.2em;
    line-height: 1.8em;
  }
  .ticket-btn {
    font-size: 1.6rem;
    border-radius: 8px;
    text-align: center;
    padding: 1.4em 0;
    background: #158AFB;
    transition: all 0.3s ease;
    position: relative;
    color: #fff;
    display: block;
    z-index: 1;
    overflow: hidden;
    width: calc((100% / 2) - (12px * 1 / 2));
    cursor: pointer;
  }
  .ticket-btn:active {
    background: #002690;
  }
}
/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 1023px) {
  .contents-wrap {
    padding-bottom: 15.625vh;
  }
  .contents-title-inner {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 11.718vh;
  }
  .illust-icon {
    width: 36.333vw;
    margin-bottom: 5.208vh;
  }
  .title-paradise {
    width: 50.781vw;
    margin-bottom: 5.208vh;
  }
  .title-access {
    width: 40.364vw;
    margin-bottom: 5.208vh;
  }
  .title-foods {
    width: 34.375vw;
    margin-bottom: 5.208vh;
  }
  .title-stay {
    width: 26.041vw;
    margin-bottom: 5.208vh;
  }
  .title-shop {
    width: 57.031vw;
    margin-bottom: 5.208vh;
  }
  .heading-copy-text {
    font-size: 4.166vw;
    letter-spacing: .2em;
    line-height: 1.8em;
  }
  .map-wide {
    width: 100%;
    background: #DCEEFF;
    margin-bottom: 10.416vh;
  }
  .paradise-map-wide {
    width: 78.125vw;
    height: auto;
  }
  .contents-text-wrap {
    display: flex;
    flex-direction: column;
    width: 57.291vw;
    margin: 0 auto;
  }
  .text-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: justify;
    margin-bottom: 10.416vh;
  }
  .top-thumbnail {
    font-size: 2.2rem;
    margin-bottom: 1.6em;
  }
  .shoulder-text {
    color: var(--PrimaryText);
    font-size: 1.4rem;
    margin-bottom: .6em;
  }
  .shoulder-text-din {
    color: var(--PrimaryText);
    font-size: 1.8rem;
    margin-bottom: .6em;
    font-family: din-condensed, sans-serif;
    font-weight: 300;
    letter-spacing: .1em;
  }
  .sub-title {
    color: var(--PrimaryText);
    font-size: 2.2rem;
    margin-bottom: 1em;
  }
  .tag-list {
    font-size: 1.2rem;
    margin-bottom: 1.2em;
    text-align: left;
  }
  .tag-word {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--SecondaryText);
    padding: .2em .6em;
    border: 1px solid var(--Border);
    border-radius: 3px;
    margin: 0 4px 6px 0;
  }
  .body-text {
    color: var(--SecondaryText);
    font-size: 1.6rem;
    line-height: 2em;
  }
  .body-sub-text {
    color: var(--SecondaryText);
    font-size: 1.2rem;
    line-height: 1.5em;
  }
  .caption-text {
    color: var(--SecondaryText);
    font-size: 1.2rem;
    line-height: 1.5em;
  }
  .indent {
    padding-left: 1em;
    text-indent: -1em;
  }
  .sub-image {
    margin-bottom: 12px;
  }
  .ticket-btn-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2em 0 1em;
  }
  .mb-adjust {
    margin-bottom: 10.416vh;
  }
  .mb-text-adjust {
    margin-bottom: 1em;
  }
  .bottom-map {
    margin-top: auto;
    padding-top: 2em;
  }
  .info-unit {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    padding: 1.2em 0;
    border-top: 1px solid var(--Border);
    border-bottom: 1px solid var(--Border);
  }
  .info-text {
    color: var(--SecondaryText);
    font-size: 1.3em;
    line-height: 1.8em;
  }
  .ticket-btn {
    font-size: 2.343vw;
    border-radius: 16px;
    text-align: center;
    padding: 1.4em;
    background: #158AFB;
    transition: all 0.3s ease;
    position: relative;
    color: #fff;
    display: block;
    z-index: 1;
    overflow: hidden;
    width: calc((100% / 2) - (16px * 1 / 2));
    cursor: pointer;
  }
  .ticket-btn:active {
    background: #002690;
  }
}
/* ------ SMALL DESKTOP ------ */
@media screen and ( min-width:1024px) and (max-width: 1280px) {
  .contents-wrap {
    padding-bottom: 20.833vh;
  }
  .contents-title-inner {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 15.625vh;
  }
  .illust-icon {
    width: 18.740vw;
    margin-bottom: 5.208vh;
  }
  .title-paradise {
    width: 28.550vw;
    margin-bottom: 5.208vh;
  }
  .title-access {
    width: 22.693vw;
    margin-bottom: 5.208vh;
  }
  .title-foods {
    width: 19.326vw;
    margin-bottom: 5.208vh;
  }
  .title-stay {
    width: 14.641vw;
    margin-bottom: 5.208vh;
  }
  .title-shop {
    width: 32.064vw;
    margin-bottom: 5.208vh;
  }
  .heading-copy-text {
    font-size: 2.342vw;
    letter-spacing: .2em;
    line-height: 1.8em;
  }
  .map-wide {
    width: 100%;
    background: #DCEEFF;
    margin-bottom: 10.416vh;
  }
  .paradise-map-wide {
    width: 46.852vw;
    height: auto;
  }
  .contents-text-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 0 160px;
  }
  .text-column {
    display: flex;
    flex-direction: column;
    margin-right: 4.856vw;
    width: calc((100% / 3) - (4.856vw * 2 / 3));
    text-align: justify;
  }
  .text-column:nth-child(3n) {
    margin-right: 0;
  }
  .top-thumbnail {
    font-size: 2.2rem;
    margin-bottom: 1.6em;
  }
  .shoulder-text {
    color: var(--PrimaryText);
    font-size: 1.3rem;
    margin-bottom: .6em;
  }
  .shoulder-text-din {
    color: var(--PrimaryText);
    font-size: 1.4rem;
    margin-bottom: .6em;
    font-family: din-condensed, sans-serif;
    font-weight: 300;
    letter-spacing: .1em;
  }
  .sub-title {
    color: var(--PrimaryText);
    font-size: 2rem;
    margin-bottom: 1em;
  }
  .tag-list {
    font-size: 1.2rem;
    margin-bottom: 1.2em;
    text-align: left;
  }
  .tag-word {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--SecondaryText);
    padding: .2em .6em;
    border: 1px solid var(--Border);
    border-radius: 3px;
    margin: 0 4px 6px 0;
  }
  .body-text {
    color: var(--SecondaryText);
    font-size: 1.4rem;
    line-height: 1.8em;
  }
  .body-sub-text {
    color: var(--SecondaryText);
    font-size: 1.2rem;
    line-height: 1.5em;
  }
  .caption-text {
    color: var(--SecondaryText);
    font-size: 1.2rem;
    line-height: 1.5em;
  }
  .indent {
    padding-left: 1em;
    text-indent: -1em;
  }
  .sub-image {
    margin-bottom: 12px;
  }
  .ticket-btn-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2em 0 1em;
  }
  .mb-adjust {
    margin-bottom: 5.856vw;
  }
  .mb-text-adjust {
    margin-bottom: 1em;
  }
  .bottom-map {
    margin-top: auto;
    padding-top: 2em;
  }
  .info-unit {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    padding: 1.2em 0;
    border-top: 1px solid var(--Border);
    border-bottom: 1px solid var(--Border);
  }
  .info-text {
    color: var(--SecondaryText);
    font-size: 1.2em;
    line-height: 1.6em;
  }
  .ticket-btn {
    font-size: 1.171vw;
    border-radius: 16px;
    text-align: center;
    padding: 1em;
    background: #158AFB;
    transition: all 0.3s ease;
    position: relative;
    color: #fff;
    display: block;
    z-index: 1;
    overflow: hidden;
    width: calc((100% / 2) - (8px * 1 / 2));
    cursor: pointer;
  }
  .ticket-btn::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    z-index: -1;
    background: #002690;
    transition: all 0.3s ease;
  }
  .ticket-btn:hover {
    color: #fff;
  }
  .ticket-btn:hover::after {
    top: auto;
    bottom: 0;
    height: 100%;
  }
}

/* ------ DESKTOP ------ */
@media screen and ( min-width:1281px) {
  .contents-wrap {
    padding-bottom: 20.833vh;
  }
  .contents-title-inner {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 15.625vh;
  }
  .illust-icon {
    width: 18.740vw;
    margin-bottom: 5.208vh;
  }
  .title-paradise {
    width: 28.550vw;
    margin-bottom: 5.208vh;
  }
  .title-access {
    width: 22.693vw;
    margin-bottom: 5.208vh;
  }
  .title-foods {
    width: 19.326vw;
    margin-bottom: 5.208vh;
  }
  .title-stay {
    width: 14.641vw;
    margin-bottom: 5.208vh;
  }
  .title-shop {
    width: 32.064vw;
    margin-bottom: 5.208vh;
  }
  .heading-copy-text {
    font-size: 2.342vw;
    letter-spacing: .2em;
    line-height: 1.8em;
  }
  .map-wide {
    width: 100%;
    background: #DCEEFF;
    margin-bottom: 10.416vh;
  }
  .paradise-map-wide {
    width: 46.852vw;
    height: auto;
  }
  .contents-text-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 0 160px;
  }
  .text-column {
    display: flex;
    flex-direction: column;
    margin-right: 5.856vw;
    width: calc((100% / 3) - (5.856vw * 2 / 3));
    text-align: justify;
  }
  .text-column:nth-child(3n) {
    margin-right: 0;
  }
  .top-thumbnail {
    font-size: 2.2rem;
    margin-bottom: 1.6em;
  }
  .shoulder-text {
    color: var(--PrimaryText);
    font-size: 1.4rem;
    margin-bottom: .6em;
  }
  .shoulder-text-din {
    color: var(--PrimaryText);
    font-size: 1.6rem;
    margin-bottom: .6em;
    font-family: din-condensed, sans-serif;
    font-weight: 300;
    letter-spacing: .1em;
  }
  .sub-title {
    color: var(--PrimaryText);
    font-size: 2.2rem;
    margin-bottom: 1em;
  }
  .tag-list {
    font-size: 1.2rem;
    margin-bottom: 1.2em;
    text-align: left;
  }
  .tag-word {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--SecondaryText);
    padding: .2em .6em;
    border: 1px solid var(--Border);
    border-radius: 3px;
    margin: 0 4px 6px 0;
  }
  .body-text {
    color: var(--SecondaryText);
    font-size: 1.6rem;
    line-height: 1.8em;
  }
  .body-sub-text {
    color: var(--SecondaryText);
    font-size: 1.2rem;
    line-height: 1.5em;
  }
  .caption-text {
    color: var(--SecondaryText);
    font-size: 1.2rem;
    line-height: 1.5em;
  }
  .indent {
    padding-left: 1em;
    text-indent: -1em;
  }
  .sub-image {
    margin-bottom: 12px;
  }
  .ticket-btn-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2em 0 1em;
  }
  .mb-adjust {
    margin-bottom: 5.856vw;
  }
  .mb-text-adjust {
    margin-bottom: 1em;
  }
  .bottom-map {
    margin-top: auto;
    padding-top: 2em;
  }
  .info-unit {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    padding: 1.2em 0;
    border-top: 1px solid var(--Border);
    border-bottom: 1px solid var(--Border);
  }
  .info-text {
    color: var(--SecondaryText);
    font-size: 1.2em;
    line-height: 1.6em;
  }
  .ticket-btn {
    font-size: 1.171vw;
    border-radius: 16px;
    text-align: center;
    padding: 1em;
    background: #158AFB;
    transition: all 0.3s ease;
    position: relative;
    color: #fff;
    display: block;
    z-index: 1;
    overflow: hidden;
    width: calc((100% / 2) - (16px * 1 / 2));
    cursor: pointer;
  }
  .ticket-btn::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    z-index: -1;
    background: #002690;
    transition: all 0.3s ease;
  }
  .ticket-btn:hover {
    color: #fff;
  }
  .ticket-btn:hover::after {
    top: auto;
    bottom: 0;
    height: 100%;
  }
}

/*************************
TEXT ICON
**************************/
.icon-web,
.icon-calendar {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
}

/*************************
MASK SLIDE IMG
**************************/

.mask-effect {
  position: relative;
  overflow: hidden;
}
.mask-effect::after {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: var(--BaseColor1);
  transform: translateY(0%);
}
.mask-effect.active::after {
  animation: mask-slide 1.4s cubic-bezier(.34,.07,.095,.995) forwards;
}
@keyframes mask-slide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

/*************************
First View animation / Animista
**************************/

.fv-anime1 {
  opacity: 0;
}
.fv-anime1.active {
  opacity: 1;
	animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-top {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fv-anime2 {
  opacity: 0;
}
.fv-anime2.active {
  opacity: 1;
	animation: zoomin-center 0.5s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes zoomin-center {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fv-anime3 {
  opacity: 0;
}
.fv-anime3.active {
  opacity: 1;
	animation: zoomin-center2 0.5s 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes zoomin-center2 {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fv-anime4 {
  opacity: 0;
}
.fv-anime4.active {
  opacity: 1;
	animation: zoomin-center3 0.5s 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes zoomin-center3 {
  0% {
    opacity: 0;
    transform: scale(1.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/*************************
SNS SHARE / SUB CATCH
**************************/
.sub-catch-side {
  color: #fff;
  position: fixed;
  top: 50%;
  right: 30px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 16px;
  height: 184px;
  z-index: 10;
  mix-blend-mode: difference;
}
.sns-share-side {
  color: #fff;
  position: fixed;
  top: 50%;
  left: 30px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 16px;
  height: 184px;
  z-index: 10;
  mix-blend-mode: difference;
}
.vertical-writing {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  font-family: din-condensed, sans-serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.25em;
  line-height: 1.3;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.vertical-writing-sns {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  font-family: din-condensed, sans-serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.25em;
  line-height: 1.3;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.vertical-writing-sns::after {
  position: absolute;
  display: block;
  content: "";
  width: 1px;
  height: 32px;
  background-color: #fff;
  left: 8px;
  bottom: -44px;
}
.sns-list {
  margin-top: 56px;
}
.sns-item-fb {
  width: 16px;
  height: 16px;
  margin-top: 15px;
  fill: #fff;
}
.sns-item-tw {
  width: 16px;
  height: 16px;
  margin-top: 15px;
  fill: #fff;
}
.sns-item-fb:hover,
.sns-item-fb:active,
.sns-item-tw:hover,
.sns-item-tw:active {
  opacity: .7;
}
/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  .sub-catch-side {
    display: none;
  }
  .sns-share-side {
    display: none;
  }
}