@charset "UTF-8";

/* ページタイトル動画 */
.main-ttl {
  /* height: 88vh; */
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
}

.main-ttl .main-copy {
  font-size: 45px;
  color: #fff;
  text-align: center;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.main-ttl .sub-copy {
  font-size: 16px;
  text-align: center;
  color: #fff;
  letter-spacing: 8px;
}

.video {
  width: 100vw;
  /* height: 88vh; */
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
  aspect-ratio: 16 / 9;
}

.video::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  /* height: 88vh; */
  background: rgba(0, 0, 0, .4);
  position: absolute;
  left: 0;
  top: 0;
}

.video video {
  width: 100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* main-ttl02 */
.main-ttl02 {
  background-repeat: no-repeat;
  background-size: cover;
  padding: 22% 0;
  position: relative;
}

.main-ttl02::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .2);
  position: absolute;
  top: 0;
  left: 0;
}

.main-ttl02.gaiku-main {
  background-image: url(../img/gaiku/gaiku-main.jpg);
}

.main-ttl02.shisetsu-main {
  background-image: url(../img/shisetsu/shisetsu-main.jpg);
}

.main-ttl02 .main-copy {
  font-size: 45px;
  color: #fff;
  text-align: center;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.main-ttl02 .sub-copy {
  font-size: 16px;
  text-align: center;
  color: #fff;
  letter-spacing: 8px;
}

.main-ttl02 .sub-copy.cap_ShaB {
  text-shadow: 0 0 2px #333;
}

/* アンカーリンク */
.ancher ul {
  justify-content: space-between;
  width: 90%;
  padding: 30px 0;
  margin: 0 auto;
}
.ancher ul li {
  width: 48%;
}

.ancher ul li a {
  display: block;
  font-size: 24px;
  letter-spacing: 4px;
  text-align: center;
  padding: 18px 0;
  position: relative;
  transition: all .5s;
}

/* .ancher ul li a::after {
  content: '';
  width: 12px;
  height: 12px;
  margin-top: -5px;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 20px;
} */

.ancher ul li:nth-of-type(1) a {
  color: #bba16f;
  background-color: #45584f;
}

/* .ancher ul li:nth-of-type(1) a::after {
  border-top: solid 1px #a3895a;
  border-right: solid 1px #a3895a;
} */

.ancher ul li:nth-of-type(2) a {
  color: #fff;
  background-color: #a3895a;
}

/* .ancher ul li:nth-of-type(2) a::after {
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
} */

.ancher ul li a:hover {
  opacity: 0.8;
}

.ancher ul li a span {
  width: 150px;
  display: inline-block;
  font-size: 13px;
  color: #000;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, .9);
  padding: 4px 0 6px 0;
  margin: 10px auto 0;
  position: relative;
}

.ancher ul li a span::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -5px;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 14px;
}

.ancher ul li:nth-of-type(1) a span::after {
  border-top: solid 1px #000;
  border-right: solid 1px #000;
}


.ancher ul li:nth-of-type(2) a span::after {
  border-top: solid 1px #000;
  border-right: solid 1px #000;
}

/* .ancher ul li a.here {
  color: #bba16f;
  background-color: #45584f;
} */

/* .ancher ul li a:hover {
  color: #bba16f;
  background-color: #45584f;
} */


/*---------------------------
共通CSS
---------------------------*/
figure {
  position: relative;
}

.c-ttl {
  font-size: 20px;
  letter-spacing: 6px;
  text-align: center;
  margin-bottom: 40px;
}

.text {
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 2.2;
}

.loc-cap {
  font-size: 12px;
  text-align: right;
  padding: 8px 8px 0 0;
}

.box-ttl {
  color: #45584f;
  line-height: 2.2;
  letter-spacing: 6px;
}

.box-ttl .small {
  font-size: 12px;
  letter-spacing: 2px;
}

.sub-text {
  font-size: 16px;
  color: #45584f;
  letter-spacing: 8px;
  line-height: 2.2;
}

h5 {
  font-size: 25px;
  font-weight: 500;
  color: #896d43;
  text-align: center;
  margin-bottom: 30px;
}

h5 .ja {
  display: inline-block;
  font-size: 0.7em;
  margin-left: 5px;
}

.en-ttl {
  font-size: 22px;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 40px;
}

.sub-ttl {
  font-size: 18px;
  letter-spacing: 6px;
  line-height: 2;
  margin-bottom: 20px;
}

.description {
  font-size: 12px;
  text-align: left;
}

.center {
  text-align: center;
}

.gray-bg {
  background-image: url(../img/loc-bg02.png);
  background-repeat: no-repeat;
  background-size: cover;
}

[class$="-box"] {
  margin: 0 auto 100px;
}

.f-wrap {
  flex-wrap: wrap;
}

/*---------------------------
駅前街区の内容はここから
---------------------------*/
.loc-copy {
  background-image: url(../img/loc-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 150px 0 70px 0;
}

.loc-copy .text {
  padding: 0 10%;
}

.gaiku-flex {
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 60px auto 0;
}

.gaiku-flex li.left {
  width: 44%;
}

.gaiku-flex li.right {
  width: 52%;
}

.item-flex01 {
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 80px 0;
}

.item-flex01 .left {
  width: 56%;
  padding-left: 7%;
}

.item-flex01 .right {
  width: 34%;
  padding-right: 3%;
}

.item-flex02 {
  flex-wrap: wrap;
  justify-content: space-between;
  background-image: url(../img/loc-bg02.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px 60px;
}

.item-flex02 .left {
  width: 58%;
}

.item-flex02 .right {
  width: 36%;
}

/* モール内案内図タブ切り替え */
.tab-area02 {
  margin: 0 auto 100px;
}

.tab-btn {
  display: none;
}

.tab-list-wrap {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0 auto 50px;
}

.tab-list-wrap li {
  width: calc((100% - 4.5%) / 4);
  text-align: center;
  background: #a2aca7;
}

.tab-list {
  display: block;
  color: #fff;
  cursor: pointer;
  transition: all .5s;
}

.tab-list:hover {
  color: #bba16f;
  background: #45584f;
}

.tab-list .num {
  font-family: "EB Garamond", serif;
  font-size: 1.7em;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  line-height: 1.2;
}

#tab-btn1:checked~.tab-list-wrap #tab-list1,
#tab-btn2:checked~.tab-list-wrap #tab-list2,
#tab-btn3:checked~.tab-list-wrap #tab-list3,
#tab-btn4:checked~.tab-list-wrap #tab-list4 {
  color: #bba16f;
  background: #45584f;
}

.tab-content {
  display: none;
}

#tab-btn1:checked~.tab-content-wrap #tab-content1,
#tab-btn2:checked~.tab-content-wrap #tab-content2,
#tab-btn3:checked~.tab-content-wrap #tab-content3,
#tab-btn4:checked~.tab-content-wrap #tab-content4 {
  display: block;
}

.floor-image {
  width: 80%;
  margin: 0 auto;
}

.floor-image:nth-of-type(4) {
  width: 70%;
}

.faci-item {
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 40px auto 0;
}

.faci-item li {
  width: calc((100% - 6%) / 4);
}

.faci-item li:nth-of-type(n+5) {
  margin-top: 40px;
}

.fac-ttl {
  font-size: 17px;
  letter-spacing: 2px;
  margin-top: 10px;
}

.fac-text {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 3px;
  margin-top: 5px;
}

.item-flex03 {
  flex-wrap: wrap;
  justify-content: space-between;
}

.item-flex03 .left {
  width: 56%;
}

.item-flex03 .right {
  width: 38%;
}

.item-flex03 .right .sub-text {
  padding: 10% 0;
}

.image-flex {
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 8% 0 5%;
  margin: -12px 0 0 0;
}

.image-flex li:nth-of-type(1) {
  width: 30%;
  margin: 50px 4.75% 0 0;
}

.image-flex li:nth-of-type(2) {
  width: 26%;
  margin-right: 4.75%;
}

.image-flex li:nth-of-type(3) {
  width: 30%;
  margin: 100px 0 0 0;
}

.gray-bg .inner_1200 {
  padding: 100px 0;
}

.item-flex04 {
  flex-wrap: wrap;
  justify-content: space-between;
}

.item-flex04:nth-of-type(2) {
  margin-top: 100px;
}

.item-flex04 li {
  width: 48%;
}


/*---------------------------
周辺施設の内容はここから
---------------------------*/

/* マップタブ切り替え */
.tab-panel {
  position: relative;
}

.tab-group {
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  top: 1306px;
  left: 0;
  /* margin-top: 93.5vw; */
  z-index: 50;
}

.tabs {
  flex-grow: 1;
  font-size: 14px;
  padding: 15px;
  color: #45584f;
  list-style: none;
  text-align: center;
  letter-spacing: 2px;
  border-right: 2px solid #fff;
  background: #eceeed;
  cursor: pointer;
  transition: .5s;
}

.tabs:last-of-type {
  border-right: none;
}

.tabs:hover {
  background: #c7cdca;
}

.panel {
  display: none;
}

.panel figure {
  max-width: 1160px;
  margin: 0 auto;
}

.tabs.is-active {
  color: #45584f;
  background: #c7cdca;
  transition: all 0.2s ease-out;
}

.tabs:nth-of-type(n+2).is-active {
  background: #c7cdca;
}

.panel.is-show {
  display: block;
}

.map-area {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background-image: url(../img/loc-bg03.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 120px 0 120px 0;
  margin: 0 auto;
}

.map-area .en-ttl {
  color: #45584f;
}

.map-area figure {
  width: 90%;
  max-width: 1200px;
}

[class$="-block"] {
  margin: 100px auto 0;
}

.text-info {
  flex-wrap: wrap;
  justify-content: space-between;
}

.text-info li {
  width: 48%;
}

.text-info li dl {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
  font-size: 14px;
}

.text-info li dl:not(:first-of-type) {
  margin-top: 10px;
}

.text-info li .border {
  flex: 1;
  display: block;
  border-bottom: 2px dotted #030303;
  margin: 0 10px 0 10px;
}

.text-info li dl p {
  width: 100%;
}

.space {
  display: inline-block;
  padding: 0 0.3em;
}

.space02 {
  display: inline-block;
  padding: 0 0.25em;
}

.space03 {
  display: inline-block;
  padding: 0 0.04em;
}

/* 余白無くす */
.space,
.space02,
.space03 {
  display: none;
}

.image-info {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 30px;
}

.image-info li {
  width: calc((100% - 4%) / 3);
}

.image-info li:not(:last-of-type) {
  margin-right: 2%;
}

.inner_1200.last {
  padding-bottom: 100px;
}

.access-area .en-ttl {
  margin: 60px auto 60px auto;
}

.access-flex {
  flex-wrap: wrap;
  justify-content: center;
}

.access-flex .left {
  width: 56%;
  margin-right: 4%;
}

.access-flex .right {
  width: 30%;
}

.access-flex .right .station {
  margin-top: 20px;
}

.access-flex .right .station .loc-cap {
  text-align: left;
}

.access01-text {
  width: 90%;
  margin-top: 80px;
}

.access-illust {
  width: 90%;
  max-width: 850px;
  margin: 40px auto 0;
}

.access-area .item-flex02 {
  background: #f3f0ec;
  margin: 60px auto 0;
}

.access-area .item-flex02 .box-ttl {
  color: #030303;
  margin-bottom: 20px;
}

.airplane-flex {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 100px auto 0;
}

.airplane-flex li {
  width: 48%;
}

.airplane-flex li.right .box-ttl {
  color: #030303;
  margin-bottom: 20px;
}

.access-text {
  font-size: 24px;
  letter-spacing: 4px;
  margin-top: 30px;
}

.access-map {
  width: 100%;
  max-width: 1400px;
  margin: -20% auto 0;
}

.access-image {
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -10vw auto 0;
}

.access-image li {
  width: calc((100% - 6%) / 3);
}

.access-image li .loc-cap {
  text-align: left;
}

.access-sea {
  background-image: url(../img/shisetsu/access-sea.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 16% 0;
  position: relative;
  margin: 80px auto 0;
}


.access-sea .text-position {
  width: 44%;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
}

.access-sea .text-position .box-ttl,
.access-sea .text-position .text {
  color: #fff;
}

.access-sea .text-position .box-ttl {
  margin-bottom: 20px;
}

/* ロケーションだけ適用 */
#entry-location_P .entry-box,
#location_P .entry-box {
  margin: 0 auto;
}

#entry-location_P .contact-box,
#location_P .contact-box {
  margin: 0 auto;
}

#entry-location_P .company-box,
#location_P .company-box {
  margin: 0 auto;
}

/*---------------------------
レイアウト調整
---------------------------*/
@media only screen and (max-width: 1300px) {
  .tab-group {
    position: absolute;
    top: initial;
    left: initial;
    margin-top: 100vw;
  }
}

/*---------------------------
tab
---------------------------*/
@media only screen and (max-width: 1180px) {
  .tab-group {
    margin-top: 104vw;
  }
}

@media only screen and (max-width: 1024px) {
  .tab-group {
    margin-top: 105.6vw;
  }

  [class$="-block"] {
    margin: 210px auto 0;
  }
}

@media only screen and (max-width: 960px) {
  .tab-group {
    margin-top: 108.2vw;
  }
}

/*---------------------------
sp
---------------------------*/
@media only screen and (max-width: 820px) {

  .main-ttl02 {
    padding: 26% 0;
  }

  .main-ttl02.gaiku-main {
    background-image: url(../img/gaiku/gaiku-main_sp.jpg);
  }

  .main-ttl02.shisetsu-main {
    background-image: url(../img/shisetsu/shisetsu-main_sp.jpg);
  }

  .main-ttl02 .main-copy {
    font-size: 34px;
  }

  .main-ttl02 .sub-copy {
    font-size: 14px;
    letter-spacing: 4px;
  }

  /* アンカーリンク */
  .ancher ul {
    padding: 15px 0;
  }
  .ancher ul li a {
    font-size: 16px;
    padding: 14px 0 20px 0;
  }

  /* .ancher ul li a::after {
    width: 8px;
    height: 8px;
    right: 12px;
  } */

  .ancher ul li a span {
    width: 140px;
    font-size: 12px;
    padding: 6px 0;
    margin-top: 5px;
  }

  .ancher ul li a span::after {
    right: 10px;
  }

  /* 共通CSS */
  .c-ttl {
    font-size: 18px;
  }

  .text {
    line-height: 1.8;
  }

  .box-ttl {
    font-size: 18px;
    letter-spacing: 6px;
    line-height: 1.8;
  }

  .sub-text {
    line-height: 1.8;
  }

  .sub-ttl {
    font-size: 18px;
    letter-spacing: 6px;
    line-height: 1.8;
  }

  h5 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  [class$="-box"] {
    margin: 0 auto 60px;
  }

  /* 駅前街区ここから */
  .loc-copy {
    padding: 60px 0 60px 0;
  }

  .loc-copy .text {
    padding: 0;
  }

  .gaiku-flex {
    margin: 30px auto 0;
  }

  .gaiku-flex li.left {
    width: 100%;
  }

  .gaiku-flex li.right {
    width: 100%;
    margin-top: 20px;
  }

  .item-flex01 {
    padding: 40px 0;
  }

  .item-flex01 .left {
    width: 100%;
    padding: 0;
  }

  .item-flex01 .right {
    width: 100%;
    padding: 0;
    margin-top: 20px;
  }

  .item-flex02 {
    padding: 20px;
  }

  .item-flex02 .left {
    width: 100%;
  }

  .item-flex02 .right {
    width: 100%;
    margin-top: 20px;
  }

  .tab-area02 {
    margin: 0 auto 60px;
  }

  .tab-list-wrap {
    margin: 0 auto 20px;
  }

  .tab-list {
    font-size: 13px;
  }


  .floor-image {
    width: 100%;
    margin: 0 auto;
  }

  .floor-image:nth-of-type(4) {
    width: 100%;
  }

  .faci-item {
    margin: 20px auto 0;
  }

  .fac-ttl {
    font-size: 16px;
  }

  .faci-item li {
    width: 48%;
  }

  .faci-item li:nth-of-type(n+3) {
    margin-top: 40px;
  }

  .item-flex03 .left {
    width: 100%;
  }

  .item-flex03 .right {
    width: 100%;
  }

  .image-flex {
    justify-content: space-between;
    padding: 0;
    margin: 20px auto 0;
  }

  .image-flex li:nth-of-type(1) {
    width: 80%;
    margin: 0 0 0 0;
  }

  .image-flex li:nth-of-type(2) {
    width: 70%;
    margin: 10px 0 0 auto;
  }

  .image-flex li:nth-of-type(3) {
    width: 60%;
    margin: 10px 0 0 0;
  }

  .gray-bg .inner_1200 {
    padding: 40px 0;
  }

  .item-flex04 li {
    width: 100%;
  }

  .item-flex04:nth-of-type(1) li.left {
    order: 2;
    margin-top: 20px;
  }

  .item-flex04:nth-of-type(1) li.right {
    order: 1;
  }

  .item-flex04:nth-of-type(2) {
    margin-top: 60px;
  }

  .item-flex04:nth-of-type(2) li.right {
    margin-top: 20px;
  }

  /* 周辺施設ここから */
  .map-area {
    padding: 60px 0 120px 0;
    margin: 0 auto 25%;
  }

  .map-area .en-ttl {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .map-area figure {
    width: 100%;
  }

  .tab-group {
    flex-wrap: wrap;
    margin-top: 115.2vw;
  }

  .tabs {
    width: 50%;
    border-bottom: 2px solid #fff;
  }

  .tabs:nth-of-type(2n) {
    border-right: none;
  }

  .text-info li {
    width: 100%;
  }

  .text-info li:nth-of-type(2) {
    margin-top: 10px;
  }

  .text-info li dl {
    font-size: 13px;
  }

  .space,
  .space02,
  .space03 {
    display: none;
  }

  .image-info li {
    width: 100%;
    margin-right: 0;
  }

  .image-info li:nth-of-type(n+2) {
    margin-top: 30px;
  }

  .fac-text {
    font-size: 13px;
  }

  .inner_1200.last {
    padding-bottom: 60px;
  }

  [class$="-block"] {
    margin: 60px auto 0;
  }

  .access-area .en-ttl {
    margin: 30px auto;
  }

  .access-flex .left {
    width: 100%;
    margin-right: 0;
  }

  .access-flex .right {
    width: 100%;
  }

  .access01-text {
    width: 100%;
    margin-top: 20px;
  }

  .airplane-flex {
    margin: 60px auto 0;
  }

  .airplane-flex li {
    width: 100%;
  }

  .airplane-flex li.right {
    margin-top: 20px;
  }

  .access-text {
    font-size: 18px;
    margin-top: 10px;
  }

  .access-image li {
    width: 100%;
  }

  .access-image li:nth-of-type(n+2) {
    margin-top: 40px;
  }

  .access-sea {
    background-position: center center;
    padding: 40% 0;
    margin: 40px auto 0;
  }


  .access-sea .text-position {
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* ロケーションだけ適用 */
  #entry-location_P .entry-box,
  #location_P .entry-box {
    margin: 0 auto;
  }

  #entry-location_P .contact-box,
  #location_P .contact-box {
    margin: 0 auto;
  }

  #entry-location_P .company-box,
  #location_P .company-box {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 730px) {
  .tab-group {
    margin-top: 121.2vw;
  }

  .map-area {
    padding: 140px 0 100px 0;
  }
}

@media only screen and (max-width: 499px) {
  .map-area {
    padding: 60px 0 100px 0;
    margin: 0 auto 38%;
  }

  .tab-group {
    margin-top: 450px;
  }

}