header {
  border: none;
}

footer {
  padding-bottom: 54px;
}

#visual {
  position: relative;
  width: calc(100% - var(--margin-pc-small) * 2);
  margin: 0 auto;
  height: auto;
  aspect-ratio: 1388/640;
  z-index: 0;
  pointer-events: none;
}
#visual ul {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 40px;
}
#visual ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 0;
  transition-duration: 0s;
}
#visual ul li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-timing-function: linear;
}
#visual .visualDot {
  position: absolute;
  right: 18px;
  bottom: 24px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
#visual .visualDot span {
  display: block;
  width: 9px;
  height: 9px;
  background-color: var(--color-white);
  transition-duration: 0.3s;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
}
#visual .visualDot span.active {
  background-color: var(--color-black);
  cursor: default;
}

#concept .inner ul {
  display: flex;
}
#concept .inner ul li {
  display: flex;
  width: 33.33%;
}
#concept .inner ul li a {
  display: flex;
  color: var(--color-white);
  width: 100%;
  position: relative;
}
#concept .inner ul li a p {
  height: 43px;
  width: 100%;
  display: flex;
  align-items: center;
  color: var(--color-white);
  font-family: var(--fontfamily-roboto);
  font-weight: 400;
  background-color: var(--color-black);
}
#concept .inner ul li a .cardVisual {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
@media screen and (min-width: 768px) {
  #concept {
    padding: 48px 0 0;
    margin: 0 var(--margin-pc-medium);
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  #concept h2 {
    display: none;
  }
  #concept h3 {
    font-size: 14px;
    line-height: 200%;
    padding: 15px 0;
  }
  #concept h3 span {
    display: inline-block;
  }
  #concept .inner {
    width: 100%;
  }
  #concept .inner ul {
    gap: 16px;
  }
  #concept .inner ul li a {
    height: 354px;
    border-radius: 12px;
  }
  #concept .inner ul li a p {
    height: 74px;
    font-size: 16px;
    line-height: 110%;
    padding: 0 24px;
    border-radius: 12px 12px 0 0;
    justify-content: space-between;
  }
  #concept .inner ul li a p::after {
    width: 24px;
    height: 24px;
  }
  #concept .inner ul li a .cardVisual {
    height: calc(100% - 73px);
    border-radius: 0 0 12px 12px;
  }
}
@media screen and (min-width: 1200px) {
  #concept {
    padding: 96px 0 0;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
  #concept h3 {
    font-size: 18px;
    width: 288px;
  }
  #concept .inner {
    width: calc(100% - 352px);
  }
  #concept .inner ul li a p {
    font-size: 24px;
  }
}

#newsList h2 {
  background-color: var(--color-black);
  color: var(--color-main);
  padding: 6px 17px;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}

#floor .inner {
  color: var(--color-white);
}
#floor .innerFloor {
  position: relative;
}
#floor .innerFloor h2 span.line::before, #floor .innerFloor h2 span.line::after {
  background-color: var(--color-white);
}
#floor .innerFloor ul li {
  width: 100%;
  position: relative;
}
#floor .innerFloor ul li .cardTitle {
  width: 100%;
  display: flex;
  background-color: var(--color-dark);
  position: relative;
}
#floor .innerFloor ul li .cardTitle h4 {
  width: 27%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-main);
  color: var(--color-black);
  font-family: var(--fontfamily-roboto);
}
#floor .innerFloor ul li .cardTitle span {
  width: 73%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: var(--fontfamily-roboto);
  font-weight: 500;
  color: var(--color-white);
  position: relative;
}
#floor .innerFloor ul li .cardTitle span.arrowW::after {
  position: absolute;
  top: calc(50% - 6px);
}
#floor .innerFloor ul li .cardVisualCase .cardVisual {
  width: 100%;
  height: auto;
  aspect-ratio: 233/155;
}
#floor .innerFloor ul li a {
  color: var(--color-white);
}
#floor .innerFloor ul li a .cardTitle h4 {
  text-decoration: none;
}
#floor .innerFloor ul li a:hover {
  text-decoration: none;
}
#floor .innerFloor ul li a:hover .cardTitle h4 span {
  text-decoration: underline;
}
#floor .innerSpace .cardVisual {
  display: flex;
}
#floor .innerSpace .cardVisual .cardImg {
  width: 100%;
  height: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#floor .innerSpace .attn {
  font-size: var(--fontsize-small);
  line-height: var(--lineheight-small);
  padding-left: 1em;
  text-indent: -1em;
}
#floor .innerSpace a {
  color: var(--color-white);
  text-decoration: underline;
}
#floor .innerSpace a.arrowW {
  font-size: var(--fontsize-medium);
  line-height: var(--lineheight-medium);
  display: flex;
  align-items: center;
  gap: 9px;
  width: -moz-fit-content;
  width: fit-content;
}
#floor::before {
  content: "";
  position: absolute;
  background-image: url(../../common/img/base_stripe.webp);
  z-index: 0;
}
@media screen and (min-width: 1200px) {
  #floor .innerFloor {
    background-color: var(--color-black);
  }
  #floor .innerFloor ul {
    margin: 80px var(--margin-pc-medium) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 72px;
         column-gap: 72px;
    row-gap: 200px;
  }
  #floor .innerFloor ul li {
    grid-row: span 2;
  }
  #floor .innerFloor ul li:nth-child(2) {
    grid-column: 2/3;
    grid-row: 2/4;
  }
  #floor .innerFloor ul li::before, #floor .innerFloor ul li::after {
    content: "";
    position: absolute;
    background-color: #666;
  }
  #floor .innerFloor ul li::before {
    left: 50%;
    top: -100px;
    width: 1px;
    height: 100px;
  }
  #floor .innerFloor ul li::after {
    left: 50%;
    top: -100px;
    width: calc(50% + 72px);
    height: 1px;
  }
  #floor .innerFloor ul li:first-child::before, #floor .innerFloor ul li:first-child::after {
    display: none;
  }
  #floor .innerFloor ul li:nth-child(even)::after {
    left: auto;
    right: 50%;
  }
  #floor .innerFloor ul .cardTitle {
    height: 50px;
  }
  #floor .innerFloor ul .cardTitle h4 {
    font-size: 24px;
    line-height: 100%;
  }
  #floor .innerFloor ul .cardTitle span {
    font-size: 21px;
    line-height: 100%;
    padding-left: 24px;
  }
  #floor .innerFloor ul .cardTitle span.arrowW::after {
    right: 24px;
  }
  #floor .innerFloor ul .cardVisualCase {
    margin-top: 24px;
  }
  #floor .innerSpace {
    display: grid;
    grid-template-columns: 430fr 688fr;
    -moz-column-gap: 8px;
         column-gap: 8px;
  }
  #floor .innerSpace .cardVisual {
    grid-row: span 3;
    gap: 8px;
  }
  #floor .innerSpace .attn {
    margin-top: 26px;
  }
  #floor .innerSpace a.arrowW {
    margin-top: 30px;
  }
}
@media screen and (max-width: 1199px) {
  #floor .inner {
    background-color: var(--color-black);
  }
  #floor .innerFloor ul {
    margin-top: 48px;
  }
  #floor .innerFloor ul li::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: 13.5%;
    top: 0;
    background-color: var(--color-main);
  }
  #floor .innerFloor ul li:last-child::before {
    display: none;
  }
  #floor .innerFloor ul li .cardTitle {
    height: 35px;
  }
  #floor .innerFloor ul li .cardTitle h4 {
    font-size: var(--fontsize-roboto16);
    line-height: var(--lineheight-roboto16);
  }
  #floor .innerFloor ul li .cardTitle span {
    font-size: var(--fontsize-roboto14);
    line-height: var(--lineheight-roboto14);
    padding-left: var(--margin-large);
  }
  #floor .innerFloor ul li .cardTitle span.arrowW::after {
    right: var(--margin-large);
  }
  #floor .innerFloor ul li .cardVisualCase {
    margin-left: 27%;
    width: 73%;
    padding: 16px var(--margin-large) 40px;
  }
  #floor .innerSpace .cardVisual {
    margin-top: 24px;
    gap: var(--margin-x-small);
  }
  #floor .innerSpace .cardVisual .cardImg {
    aspect-ratio: 164/109;
  }
  #floor .innerSpace .attn {
    margin-top: 8px;
    line-height: 180%;
  }
  #floor .innerSpace a.arrowW {
    margin-top: 16px;
  }
}

#about {
  border-top: 1px solid var(--color-black);
}
#about .aboutMovie h4 {
  text-align: center;
}
#about .aboutMovie a {
  margin-top: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-black);
  background-color: var(--color-white);
  padding: 6px;
  position: relative;
}
#about .aboutMovie a .cardVisual {
  width: 100%;
  height: auto;
  aspect-ratio: 348/198;
}
#about .aboutMovie a::after {
  content: "";
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../common/img/movie_play.svg);
  position: absolute;
  left: calc(50% - 22px);
  top: calc(50% - 22px);
}
#about .aboutOffer {
  background-color: var(--color-main-dark);
  margin-top: 56px;
}
#about .aboutOffer .scrollArea ul {
  display: flex;
  padding-bottom: 120px;
}
#about .aboutOffer .scrollArea ul li {
  position: relative;
}
#about .aboutOffer .scrollArea ul li .shadow .shadowBody {
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
}
#about .aboutOffer .scrollArea ul li .cardVisual {
  position: absolute;
  z-index: 1;
}
#about .aboutOffer .scrollArea ul li .cardVisual::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-black);
}
#about .aboutOffer .scrollBar {
  width: calc(100% - var(--margin-medium) * 2 - 90px);
  left: var(--margin-medium);
}
#about .aboutOffer .scrollBar::before {
  background-color: var(--color-black);
}
#about .aboutOffer .scrollBar .scrollSlider {
  width: 38px;
}
#about .aboutOffer .scrollBar .scrollSlider::after {
  background-color: var(--color-black);
}
#about .aboutOffer .scrollBar .scrollPrev, #about .aboutOffer .scrollBar .scrollNext {
  background-image: url(../../common/img/arrow_nav_black.svg);
}
#about .aboutTeam .aboutTeamStaff {
  position: relative;
}
#about .aboutTeam .aboutTeamStaff ul {
  display: flex;
  position: relative;
  z-index: 1;
}
#about .aboutTeam .aboutTeamStaff ul p {
  font-family: var(--fontfamily-roboto);
  font-weight: 500;
  color: var(--color-main);
}
#about .aboutTeam .aboutTeamStaff ul h4 {
  color: var(--color-main);
  margin-top: -5px;
}
#about .aboutTeam .aboutTeamStaff::before {
  content: "";
  width: 100%;
  background-color: var(--color-black);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#about .aboutTeam .aboutTeamStaff::after {
  content: "";
  background-image: url(../../common/img/base_stripe.webp);
  position: absolute;
  z-index: 0;
}
#about .aboutTeam .aboutTeamInfo {
  border: 2px solid var(--color-black);
  z-index: 1;
}
#about .aboutTeam .aboutTeamInfo p {
  position: relative;
  background-color: var(--color-white);
  z-index: 1;
}
#about .aboutTeam .aboutTeamInfo::after {
  content: "";
  height: 100%;
  background-image: url(../../common/img/base_stripe.webp);
  position: absolute;
  z-index: 0;
}
@media screen and (min-width: 1200px) {
  #about .aboutOffer {
    margin: 112px var(--margin-pc-small) 0;
    padding-top: 90px;
  }
  #about .aboutOffer .scrollArea {
    margin-top: 64px;
  }
  #about .aboutOffer .scrollArea ul {
    flex-direction: column;
    gap: 56px;
    width: 100%;
  }
  #about .aboutOffer .scrollArea ul li {
    width: 82.92%;
    margin: 0 8.54%;
    position: relative;
  }
  #about .aboutOffer .scrollArea ul li .shadow {
    width: 59.11%;
  }
  #about .aboutOffer .scrollArea ul li .shadow .shadowBody {
    padding: 56px 64px 64px;
  }
  #about .aboutOffer .scrollArea ul li .shadow .shadowBody h4 {
    font-size: 30px;
    line-height: 160%;
    position: relative;
    padding-bottom: 40px;
  }
  #about .aboutOffer .scrollArea ul li .shadow .shadowBody h4::after {
    content: "";
    display: block;
    width: 80px;
    height: 10px;
    background-color: var(--color-main);
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #about .aboutOffer .scrollArea ul li .shadow .shadowBody p {
    margin-top: 36px;
    font-size: 16px;
    line-height: 200%;
  }
  #about .aboutOffer .scrollArea ul li .cardVisual {
    top: 50%;
    transform: translateY(-50%);
  }
  #about .aboutOffer .scrollArea ul li:nth-child(even) {
    display: flex;
    justify-content: flex-end;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(even) .shadow .shadowBody {
    padding: 56px 64px 64px 126px;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(even) .cardVisual {
    left: 7.12%;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(1) .shadow .shadowBody h4 {
    width: 75%;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(1) .shadow .shadowBody p {
    width: 70%;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(1) .cardVisual {
    width: 56.08%;
    right: 0;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(2) .cardVisual {
    width: 39.93%;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(3) {
    padding-bottom: 80px;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(3) .shadow .shadowBody p {
    width: 62%;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(3) .cardVisual {
    width: 59.9%;
    height: auto;
    aspect-ratio: 69/36;
    top: 144px;
    right: 0;
    transform: translateY(0);
  }
  #about .aboutOffer .scrollArea ul li:nth-child(4) .shadow {
    width: 56%;
    margin-right: 7.12%;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(4) .cardVisual {
    width: 36.28%;
  }
  #about .aboutOffer .scrollBar {
    display: none;
  }
  #about .aboutTeam {
    margin: 112px auto 0;
    width: 81.11%;
    position: relative;
  }
  #about .aboutTeam .aboutTeamStaff {
    width: 58.3%;
    margin-top: 64px;
  }
  #about .aboutTeam .aboutTeamStaff ul {
    padding: 56px 96px;
    flex-direction: column;
    gap: 56px;
  }
  #about .aboutTeam .aboutTeamStaff ul p {
    white-space: nowrap;
    font-size: 16px;
  }
  #about .aboutTeam .aboutTeamStaff ul h4 {
    margin-top: 22px;
    font-size: 28px;
    line-height: 100%;
  }
  #about .aboutTeam .aboutTeamStaff::before {
    height: 100%;
  }
  #about .aboutTeam .aboutTeamStaff::after {
    left: 16px;
    top: 16px;
    width: 100%;
    height: 100%;
  }
  #about .aboutTeam .aboutTeamInfo {
    position: absolute;
    width: 58.3%;
    right: 0;
    top: 225px;
  }
  #about .aboutTeam .aboutTeamInfo p {
    padding: 56px 64px;
    font-size: 16px;
    line-height: 200%;
    font-weight: 400;
  }
  #about .aboutTeam .aboutTeamInfo::after {
    width: 71.65%;
    right: -16px;
    bottom: -16px;
  }
}
@media screen and (max-width: 1199px) {
  #about .aboutOffer {
    padding: 48px 0;
  }
  #about .aboutOffer .scrollArea {
    margin-top: 32px;
  }
  #about .aboutOffer .scrollArea ul {
    gap: var(--margin-medium);
    padding: 0 var(--margin-medium) 16px;
    justify-content: space-between;
  }
  #about .aboutOffer .scrollArea ul li {
    width: 311px;
    margin-bottom: 112px;
  }
  #about .aboutOffer .scrollArea ul li .shadow {
    width: calc(100% - var(--margin-medium));
    height: 100%;
  }
  #about .aboutOffer .scrollArea ul li .shadow .shadowBody {
    padding: 26px 24px 48px;
  }
  #about .aboutOffer .scrollArea ul li .shadow .shadowBody h4 {
    font-size: var(--fontsize-copy);
    line-height: 180%;
  }
  #about .aboutOffer .scrollArea ul li .shadow .shadowBody p {
    margin-top: 15px;
    font-size: var(--fontsize-medium);
    line-height: var(--lineheight-medium);
  }
  #about .aboutOffer .scrollArea ul li .cardVisual {
    right: 0;
    bottom: -106px;
    width: 211px;
  }
  #about .aboutOffer .scrollArea ul li:nth-child(3) .cardVisual {
    width: calc(100% - var(--margin-medium));
  }
  #about .aboutTeam {
    margin-top: 56px;
  }
  #about .aboutTeam .aboutTeamStaff {
    width: calc(100% - var(--margin-large));
    margin-top: 32px;
  }
  #about .aboutTeam .aboutTeamStaff ul {
    padding: 24px var(--margin-large) 32px;
    flex-wrap: wrap;
    -moz-column-gap: var(--margin-large);
         column-gap: var(--margin-large);
    row-gap: 15px;
  }
  #about .aboutTeam .aboutTeamStaff ul li {
    width: calc((100% - var(--margin-large)) * 0.6);
  }
  #about .aboutTeam .aboutTeamStaff ul li:nth-child(3) {
    width: calc((100% - var(--margin-large)) * 0.4);
  }
  #about .aboutTeam .aboutTeamStaff ul li:nth-child(2) {
    order: 3;
  }
  #about .aboutTeam .aboutTeamStaff ul p {
    font-size: 12px;
  }
  #about .aboutTeam .aboutTeamStaff ul h4 {
    font-size: var(--fontsize-copy);
    line-height: var(--lineheight-copy);
  }
  #about .aboutTeam .aboutTeamStaff::before {
    height: calc(100% + 72px);
  }
  #about .aboutTeam .aboutTeamStaff::after {
    left: 0;
    bottom: calc(-72px - var(--margin-x-small));
    width: calc(100% - var(--margin-x-small) + 4px);
    height: calc(var(--margin-x-small) + 2px);
  }
  #about .aboutTeam .aboutTeamInfo {
    position: relative;
    width: calc(100% - var(--margin-large));
    margin-left: var(--margin-large);
  }
  #about .aboutTeam .aboutTeamInfo p {
    padding: 22px var(--margin-large) 25px;
  }
  #about .aboutTeam .aboutTeamInfo::after {
    right: -2px;
    width: calc(100% - var(--margin-x-small) + 4px);
    bottom: calc(-1 * var(--margin-x-small) - 2px);
  }
}
@media screen and (max-width: 979px) {
  #about .aboutOffer .scrollBar {
    width: calc(100% - var(--margin-medium) * 2 - 90px);
  }
}

#access {
  border: 2px solid var(--color-black);
  background-color: var(--color-white);
}
#access .accessInfo {
  margin-top: 24px;
  display: grid;
}
#access .accessInfo img {
  width: 100%;
}
#access .accessInfo .accessInfoBody h3 {
  font-family: var(--fontfamily-roboto);
  font-weight: 500;
}
#access .accessInfo .accessInfoBody a {
  display: flex;
  align-items: center;
  color: var(--color-black);
  text-decoration: underline;
  font-weight: 400;
  gap: 8px;
}
#access .accessAddress {
  font-weight: 400;
}
#access .accessAddress p {
  margin-top: 20px;
}
#access .accessAddress p:first-child {
  margin-top: 0;
}
#access .accessAddress a {
  display: flex;
  align-items: center;
  color: var(--color-black);
  text-decoration: underline;
  gap: 8px;
}
#access .accessAddress a::after {
  background-image: url(../../common/img/icon_window.svg);
}

@media screen and (min-width: 768px) {
  #newsList {
    margin: 64px var(--margin-pc-medium) 0;
    width: calc(100% - var(--margin-pc-medium) - var(--margin-pc-medium));
  }
  #floor {
    background-color: var(--color-black);
    color: var(--color-white);
    margin: 120px var(--margin-pc-small) 0 var(--margin-pc-large);
  }
  #floor .innerFloor {
    padding: 96px 0 120px;
  }
  #floor .innerFloor h2 + p {
    padding: 6px var(--margin-pc-medium) 0;
    text-align: center;
  }
  #floor .innerSpace {
    padding: 40px var(--margin-pc-medium) 120px;
  }
  #floor::before {
    width: calc(100% - 90px);
    height: 328px;
    top: -40px;
    left: calc(-1 * var(--margin-pc-large));
  }
  #about {
    margin-top: 120px;
  }
  #about .aboutConcept {
    padding-top: 96px;
  }
  #about .aboutConcept h3 {
    font-size: 28px;
    line-height: 180%;
    letter-spacing: 2px;
  }
  #about .aboutConcept p {
    margin-top: 40px;
    font-size: 16px;
    font-weight: 500;
    line-height: 240%;
  }
  #about .aboutConcept .aboutConceptMain {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 98px 116px;
    margin-top: 80px;
  }
  #about .aboutConcept .aboutConceptMain .cardBody {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    padding: 72px 78px 80px;
  }
  #about .aboutConcept .aboutConceptMain .cardVisual {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  #about .aboutMovie {
    margin: 112px 0 0;
  }
  #about .aboutMovie ul {
    margin-top: 64px;
  }
  #about .aboutMovie ul li {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
  }
  #about .aboutMovie ul li h4 {
    width: 34.72%;
    font-size: 20px;
    line-height: 200%;
    position: relative;
  }
  #about .aboutMovie ul li h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 1px;
    background-color: var(--color-black);
  }
  #about .aboutMovie ul li a {
    width: 55.55%;
  }
  #about .aboutMovie ul li:nth-child(even) {
    flex-direction: row-reverse;
  }
  #access {
    margin: 80px var(--margin-pc-small) 0;
    padding: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #access .accessInfo {
    grid-template-columns: 29fr 35fr;
    -moz-column-gap: 64px;
         column-gap: 64px;
    row-gap: 48px;
    max-width: 704px;
  }
  #access .accessInfo img {
    grid-row: span 3;
  }
  #access .accessInfo .accessInfoBody {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 40px;
         column-gap: 40px;
    row-gap: 16px;
  }
  #access .accessInfo .accessInfoBody h3 {
    font-size: 36px;
    line-height: 140%;
    width: 100%;
    height: 50px;
  }
  #access .accessInfo .accessInfoBody a {
    font-size: 16px;
    height: -moz-fit-content;
    height: fit-content;
  }
  #access .accessAddress {
    font-size: 16px;
    line-height: 180%;
  }
}
@media screen and (max-width: 767px) {
  header {
    background: none;
  }
  header .inner {
    align-items: center;
    height: 60px;
  }
  header .headLeft {
    opacity: 0;
    pointer-events: none;
  }
  header .headRight nav#navMenuMain a.lang {
    color: var(--color-white);
  }
  header .headRight nav#navMenuMain a.lang::before {
    background-image: url(/assets/common/img/icon_earth_white.svg);
  }
  .fixed header {
    background-color: var(--color-main);
  }
  .fixed header .headLeft {
    opacity: 1;
    pointer-events: all;
    margin-top: 1px;
  }
  .fixed header .headRight {
    margin-top: -2px;
  }
  .fixed header .headRight nav#navMenuMain a.lang {
    color: var(--color-black);
  }
  .fixed header .headRight nav#navMenuMain a.lang::before {
    background-image: url(/assets/common/img/icon_earth_black.svg);
  }
  #container main {
    padding-top: 0;
  }
  #navMenu, .fixed #navMenu {
    position: fixed;
    display: flex;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    background-color: var(--color-white);
    height: 54px;
    border: none;
    width: 100%;
    gap: 0;
  }
  #navMenu ul, .fixed #navMenu ul {
    width: 69%;
    height: 100%;
    gap: 0;
  }
  #navMenu ul li a, .fixed #navMenu ul li a {
    font-size: 14px;
    line-height: 100%;
  }
  #navMenu .navMenuContact, .fixed #navMenu .navMenuContact {
    width: 31%;
    height: 100%;
  }
  #navMenu .navMenuContact a, .fixed #navMenu .navMenuContact a {
    width: 100%;
    height: 100%;
    border-radius: 0;
    font-size: var(--fontsize-roboto16);
    padding-right: 0;
  }
  #contents {
    border-radius: 40px 40px 0 0;
    margin-top: calc(50vh - 42px);
  }
  #visual {
    width: 100%;
    height: 50vh;
    aspect-ratio: auto;
    position: fixed;
    left: 0;
    top: 0;
  }
  #visual ul {
    border-radius: 0;
  }
  #visual .visualDot {
    bottom: 52px;
  }
  #concept {
    padding: 34px 0 0;
  }
  #concept h2 {
    margin-left: var(--margin-x-large);
    width: 310px;
    height: 134px;
    display: flex;
    align-items: center;
    background-image: url(../../common/img/logo_h.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    color: var(--color-white);
    font-size: 17px;
    line-height: 160%;
    padding-left: 21px;
  }
  #concept h3 {
    margin: 24px var(--margin-x-large);
    font-size: var(--fontsize-copy);
    line-height: var(--lineheight-copy);
  }
  #concept h3 span {
    display: block;
  }
  #concept .inner {
    margin: 32px var(--margin-x-small) 0;
  }
  #concept .inner ul {
    gap: var(--margin-x-small);
  }
  #concept .inner ul li a {
    border-radius: var(--radius-x-small);
    min-height: 165px;
  }
  #concept .inner ul li a p {
    height: 43px;
    font-size: 14px;
    line-height: 100%;
    padding-left: 11px;
    border-radius: var(--radius-x-small) var(--radius-x-small) 0 0;
  }
  #concept .inner ul li a p::after {
    position: absolute;
    right: 7px;
    top: calc(50% - 6px);
  }
  #concept .inner ul li a .cardVisual {
    height: calc(100% - 42px);
    border-radius: 0 0 var(--radius-x-small) var(--radius-x-small);
  }
  #newsList {
    margin: 64px var(--margin-x-small) 0;
    width: calc(100% - var(--margin-x-small) - var(--margin-x-small));
  }
  #floor {
    margin-top: 56px;
  }
  #floor .innerFloor {
    margin: 0 0 0 var(--margin-x-small);
    padding: 40px 0 24px;
  }
  #floor .innerFloor h2 + p {
    padding: 32px var(--margin-large) 0;
  }
  #floor .innerSpace {
    margin: 0 var(--margin-x-small) 0 0;
    padding: 15px 4.42vw 64px 8.31vw;
  }
  #floor::before {
    width: calc(100% - var(--margin-x-small));
    height: 131px;
    top: -16px;
    left: 0;
  }
  #about {
    margin-top: 64px;
  }
  #about .aboutConcept {
    padding-top: 65px;
  }
  #about .aboutConcept h3 {
    margin-top: 24px;
    line-height: 180%;
    text-align: center;
  }
  #about .aboutConcept p {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    line-height: 220%;
  }
  #about .aboutConcept .aboutConceptMain .cardVisual {
    margin-top: 32px;
  }
  #about .aboutMovie {
    margin: 56px var(--margin-medium) 0;
  }
  #about .aboutMovie ul {
    margin-top: 32px;
  }
  #about .aboutMovie ul li h4 {
    margin-top: 16px;
    font-size: var(--fontsize-medium);
    line-height: var(--lineheight-medium);
  }
  #about .aboutOffer .scrollBar {
    width: calc(100% - var(--margin-medium) * 2 - 68px);
  }
  #access {
    margin: 80px var(--margin-medium) 0;
    padding: 40px 11.6vw;
  }
  #access .accessInfo {
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 25px;
         column-gap: 25px;
    row-gap: 16px;
  }
  #access .accessInfo .accessInfoBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #access .accessInfo .accessInfoBody h3 {
    font-size: 22px;
    line-height: 140%;
    margin-bottom: 9px;
  }
  #access .accessInfo .accessInfoBody a {
    font-size: var(--fontsize-small);
  }
  #access .accessAddress {
    font-size: 12px;
    line-height: 180%;
    grid-column: span 2;
  }
}/*# sourceMappingURL=top.css.map */