@charset "utf-8";

.location__tabs {
  padding-top: 200px;
  background-position: top center, top 570px left;
}
.location__tab {
  flex: 0 1 min(50%, 620px);
  min-height: 100px;
  font-size: clamp(16px, 2.166666667vw, 26px);
  line-height: 1.2;
  color: #8082A1;
  background: #E5E5F0;
  position: relative;
}
.location__tab.active {
  color: #fff;
  background: #000066;
}
.location__tab::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 0.384615385em;
  height: 1.153846154em;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="30" viewBox="0 0 10 30"><polygon points="9.187 22.418 5.5 27.579 5.5 0 4.5 0 4.5 27.579 .813 22.418 0 23 5 30 10 23 9.187 22.418"/></svg>') no-repeat center/100% auto;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="30" viewBox="0 0 10 30"><polygon points="9.187 22.418 5.5 27.579 5.5 0 4.5 0 4.5 27.579 .813 22.418 0 23 5 30 10 23 9.187 22.418"/></svg>') no-repeat center/100% auto;
  background: currentColor;
}
.location__tab:nth-child(1):before {
  left: 1.923076923em;
}
.location__tab:nth-child(2):before {
  right: 1.923076923em;
}
.location__tablist--bottom {
  /* margin-bottom: 200px; */

  margin-bottom: 50px;
}
.location__tablist--bottom .location__tab::before {
  transform: translateY(-50%) rotate(180deg);
}
.location__content--area {
  /* padding-top: 155px; */

  padding-top: 100px;
}
.location__content__copy-large {
  text-align: center;
}
.location__content__area {
  margin-top: 100px;
}
.location__content__area-photo-wrap {
  margin-top: 70px;
}
.location__content__area-photo {
  flex: 1;
}
.location__content--shopping {
  padding-top: 200px;
  padding-bottom: 170px;
  background: rgb(var(--color-navy) / 1);
}
.location__content__en-heading {
  font-size: clamp(44px, 6.166666667vw, 74px);
  letter-spacing: .08em;
  line-height: .7;
  margin-bottom: 80px;
}
.location__content__heading {
  margin-bottom: calc(80px - 0.444444444em);
}
.location__content__heading sup {
  font-size: 50%;
  top: -.9em;
}
.location__content__heading small {
  font-size: max(10px, 50%);
}
.location__content__shopping-aeon {
  grid-template: "photo-wrap photo-wrap" auto "desc data" auto / 1fr 50%;
  gap: 60px 30px;
}
.location__content__shopping-aeon-photo-wrap {
  grid-area: photo-wrap;
  grid-template: "photo1 photo2" auto "photo1 photo3" auto / 68.181818182% 1fr;
}
.location__content__shopping-aeon-photo--1 {
  grid-area: photo1;
}
.location__content__shopping-aeon-photo--2 {
  grid-area: photo2;
}
.location__content__shopping-aeon-photo--3 {
  grid-area: photo3;
}
.location__content__shopping-aeon-desc {
  grid-area: desc;
}
.location__content__shopping-aeon-data {
  grid-area: data;
}
.location__content__shopping-aeon-data + .location__content__shopping-aeon-data {
  margin-top: 40px;
}
.location__content__shopping-aeon-data-item:nth-child(1),
.location__content__shopping-aeon-data-item:nth-child(3) {
  width: min(370px, 100%);
}
.location__content__shopping-aeon-data-heading {
  font-size: clamp(11px, 1.333333333vw, 16px);
  line-height: 3.125;
  margin-bottom: 25px;
  box-sizing: border-box;
  padding-inline: 1.25em;
  background: #1B1F56;
}
.location__content__shopping-aeon-data-copy {
  font-size: clamp(10px, 1.166666667vw, 14px);
  line-height: 2.142857143;
  margin-block: -0.571428572em;
}
.location__content__shopping-aeon-data-list {
  font-size: clamp(10px, 1.166666667vw, 14px);
  line-height: 2.142857143;
  margin-block: -0.571428572em;
}
.location__content__shopping-aeon-data-caution {
  font-size: clamp(10px, 0.916666667vw, 11px);
  margin-top: 15px;
}
.location__content__shopping--2 {
  margin-top: 160px;
}
.location__content__slide-wrap {
  overflow: hidden;
}
.location__content__slide-data {
  margin-top: 30px;
  font-size: clamp(12px, 1vw, 18px);
  gap: 0 0.888888889em;
}
.location__content__slide-data-name {
  gap: .5em;
}
.location__content__slide-data-name::before {
  content: "";
  display: block;
  width: 1.666666667em;
  height: 1px;
  background: #999;
}
.location__content__slide-data-time em {
  font-size: 170%;
}
.location__content__slide-data-time small {
  font-size: 10px;
  white-space: nowrap;
}
.location__content__slide-btn {
  top: 0;
  width: 50px;
  height: 100px;
  margin-top: calc(calc(var(--location-content-slide-height) / 2) - 50px);
}
.location__content__slide-btn--prev {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13.613" height="20.781" viewBox="0 0 13.613 20.781"><polygon points="12.988 20.781 0 10.391 12.988 0 13.613 .781 1.601 10.391 13.613 20 12.988 20.781" fill="%23fff"/></svg>') no-repeat center/28% auto rgb(var(--color-navy) / .6);
}
.location__content__slide-btn--next {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13.613" height="20.781" viewBox="0 0 13.613 20.781"><polygon points=".625 0 13.613 10.391 .625 20.781 0 20 12.012 10.391 0 .781 .625 0" fill="%23fff"/></svg>') no-repeat center/28% auto rgb(var(--color-navy) / .6);
}
.location__content__shopping--3 {
  margin-top: 100px;
}
.location__content--green {
  padding-block: 170px;
  background: url(../../img/common/img_bg2.jpg) no-repeat top right/min(100%, 1920px) auto, url(../../img/common/img_bg1.jpg) no-repeat top calc(100% - 390px) left/min(100%, 1920px) auto;
  background-blend-mode: multiply;
}
.location__content__green--2 {
  margin-top: 150px;
}
.location__content--sports {
  padding-block: 170px;
  background: rgb(var(--color-navy) / 1);
}
.location__content--education {
  padding-block: 170px;
  background: url(../../img/common/img_bg2.jpg) no-repeat top -105px right/min(100%, 1920px) auto;
}
.location__content--medical {
  padding-block: 170px;
  background: rgb(var(--color-navy) / 1);
}
.location__content--lifeinfo {
  padding-top: 170px;
  padding-bottom: 200px;
}
.location__content__lifeinfo-en-heading {
  font-size: clamp(20px, 4.166666667vw, 50px);
  letter-spacing: .08em;
  line-height: .7;
}
.location__content__lifeinfo-tabs {
  margin-top: 120px;
}
.location__content__lifeinfo-tablist {
  gap: 1px;
}
.location__content__lifeinfo-tab {
  flex: 1;
  height: 60px;
  font-size: clamp(12px, 1.066666667vw, 16px);
  letter-spacing: .08em;
  color: rgb(var(--color-navy) / 1);
  background: rgb(var(--color-blue) / .05);
  cursor: pointer;
}
.location__content__lifeinfo-tab.active {
  color: #fff;
  background: #000066;
}
.location__content__lifeinfo-tabpanel {
  display: none;
}
.location__content__lifeinfo-tabpanel.active {
  display: flex;
  flex-wrap: wrap;
  height: 600px;
  animation: tabFadeIn .5s;
}
.location__content__lifeinfo-map {
  width: 66.666666667%;
  height: 100%;
}
.location__content__lifeinfo-list {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 30px 40px 30px 30px;
  background: rgb(var(--color-blue) / .015);
  overflow-y: auto;
}
.location__content__lifeinfo-item {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}
.location__content__lifeinfo-item + .location__content__lifeinfo-item {
  margin-top: 40px;
}
.location__content__lifeinfo-item-num {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  transform: translateY(-1px);
  border-radius: 100%;
  font-size: 13px;
  background: #000066;
}
.location__content__lifeinfo-item-name {
  width: calc(100% - 28px);
  font-size: clamp(12px, 1.066666667vw, 16px);
}
.location__content__lifeinfo-item-data {
  width: 100%;
  font-size: clamp(11px, 0.933333333vw, 14px);
  margin-top: 15px;
  box-sizing: border-box;
  padding-left: 28px;
}
.location__content--okayama {
  /* padding-top: 150px; */

  padding-top: 100px;
}
.location__content__okayama-map {
  max-width: 1100px;
  margin-top: 150px;
  mix-blend-mode: multiply;
}
.location__content__okayama-photo-wrap {
  margin-top: 200px;
  grid-template-columns: repeat(2, auto);
}
.location__content--climate {
  padding-top: 300px;
  padding-bottom: 170px;
  background: linear-gradient(0deg, rgba(221, 221, 221, 0) 0%, rgba(221, 221, 221, 1) 100%) no-repeat top center/100% 400px;
  position: relative;
  z-index: 0;
}
.location__content--climate::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 540px;
  right: 0;
  width: min(100%, 1920px);
  padding-top: 78.125%;
  background: url(../../img/common/img_bg2.jpg) top center/100% auto;
  mix-blend-mode: multiply;
}
.location__content__group {
  gap: 90px 9.090909091%;
}
.location__content__group-photo {
  flex: 1;
}
.location__content__group-desc {
  width: 30.303030303%;
}
.location__content--farming {
  padding-block: 170px;
  background: linear-gradient(0deg, #999, #999) no-repeat top left/calc(100% - (50% - 660px)) 1px;
  position: relative;
}
.location__content__group-caution {
  color: #666;
  font-size: clamp(10px, 1.166666667vw, 14px);
  line-height: 1.5;
  margin-top: calc(25px - .25em);
}
.location__content__farming--2 {
  margin-top: 150px;
}
.location__content--history {
  padding-block: 170px;
  background: linear-gradient(0deg, #999, #999) no-repeat top right/calc(100% - (50% - 660px)) 1px;
  position: relative;
  z-index: 0;
}
.location__content--history::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 380px;
  left: 0;
  width: min(100%, 1920px);
  padding-top: 78.125%;
  background: url(../../img/common/img_bg1.jpg) top center/100% auto;
}
.location__content--leisure {
  padding-top: 170px;
  padding-bottom: 150px;
  background: linear-gradient(0deg, #999, #999) no-repeat top left/calc(100% - (50% - 660px)) 1px;
  position: relative;
}
.location__content__leisure--2 {
  margin-top: 100px;
}
.location__content__leisure-photo-wrap {
  grid-template-columns: repeat(4, auto);
}
@media screen and (min-width: 1025px){
  .location__tab {
    transition: color .3s, background .3s;
  }
  .location__tab:hover {
    color: #fff;
    background: #000066;
  }
  .location__content__lifeinfo-tab {
    transition: color .3s, background .3s;
  }
  .location__content__lifeinfo-tab:hover {
    color: #fff;
    background: #000066;
  }
}
@media screen and (max-width: 768px){
  .location__tabs {
    padding-top: 80px;
    background-position: top center, top 47px left 30%;
  }
  .location__tablist {
    gap: 20px;
  }
  .location__tab {
    flex: 1 0 100%;
    min-height: 60px;
    font-size: min(4.8vw, 18px);
  }
  .location__tab::before {
    width: 0.555555556em;
    height: 1.666666667em;
  }
  .location__tab:nth-child(1):before {
    left: 1.222222222em;
  }
  .location__tab:nth-child(2):before {
    left: 1.222222222em;
    right: auto;
  }
  .location__tablist--bottom {
    /* margin-bottom: 80px; */

    margin-bottom: 0;
  }
  .location__content--area {
    /* padding-top: 80px; */

    padding-top: 40px;
  }
  .location__content__copy-large {
    text-align: justify;
  }
  .location__content__area {
    margin-top: 60px;
  }
  .location__content__area-map {
    width: 100%;
  }
  .location__content__area-map img {
    width: 800px;
    max-width: none;
  }
  .location__content__area-photo-wrap {
    margin-top: 40px;
  }
  .location__content__area-photo {
    flex: 1 0 50%;
  }
  .location__content__area-photo .p-caption {
    font-size: 8px;
  }
  .location__content--shopping {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .location__content__en-heading {
    font-size: min(9.066666667vw, 34px);
    margin-bottom: 45px;
  }
  .location__content__heading {
    margin-bottom: calc(45px - 0.55em);
  }
  .location__content__shopping-aeon {
    grid-template: "photo-wrap" auto "desc" auto "data" auto / 100%;
    gap: 40px 0;
  }
  .location__content__shopping-aeon-photo-wrap {
    grid-template: "photo1 photo1" auto "photo2 photo3" auto / 50% 1fr;
  }
  .location__content__shopping-aeon-data + .location__content__shopping-aeon-data {
    margin-top: 30px;
  }
  .location__content__shopping-aeon-data-item:nth-child(1),
  .location__content__shopping-aeon-data-item:nth-child(3) {
    width: 100%;
  }
  .location__content__shopping-aeon-data-heading {
    font-size: min(4.266666667vw, 16px);
    padding-inline: 0.833333333em;
  }
  .location__content__shopping-aeon-data-copy {
    font-size: min(3.733333333vw, 14px);
    line-height: 2.285714286;
    margin-block: -0.642857143em;
  }
  .location__content__shopping-aeon-data-list {
    font-size: min(3.733333333vw, 14px);
    line-height: 2.285714286;
    margin-block: -0.642857143em;
  }
  .location__content__shopping-aeon-data-caution {
    margin-top: 10px;
    line-height: 2;
  }
  .location__content__shopping--2 {
    margin-top: 75px;
  }
  .location__content__slide-wrap {
    width: calc(100% - 20px);
    margin-right: auto;
    overflow: visible;
  }
  .location__content__slide-data {
    margin-top: 12px;
    font-size: min(3.733333333vw, 14px);
  }
  .location__content__slide-data-name {
    line-height: 1.2;
  }
  .location__content__slide-data-name::before {
    width: 2.142857143em;
  }
  /* .location__content__slide-data-time {
    position: relative;
    white-space: nowrap;
  }
  .location__content__slide-data-time small {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
  } */
  .location__content__slide-btn {
    width: 7.333333333vw;
    height: 16vw;
    margin-top: calc(calc(var(--location-content-slide-height) / 2) - 8vw);
  }
  .location__content__slide-btn--prev {
    left: calc((7.333333333vw + 10px) * -1);
  }
  .location__content__slide-btn--next {
    right: calc((7.333333333vw + 10px) * -1);
  }
  .location__content__shopping--3 {
    margin-top: 75px;
  }
  .location__content--green {
    padding-block: 80px;
    background: url(../../img/common/img_bg2.jpg) no-repeat top -220px right 40%/auto 743px, url(../../img/common/img_bg1.jpg) no-repeat top calc(100% + 290px) left 40%/auto 743px;
  }
  .location__content__green--2 {
    margin-top: 75px;
  }
  .location__content--sports {
    padding-block: 80px;
  }
  .location__content--sports .location__content__en-heading {
    line-height: 1.411764706;
    margin-top: -0.355882353em;
    margin-bottom: calc(45px - 0.355882353em);
  }
  .location__content--education {
    padding-block: 80px;
    background: url(../../img/common/img_bg2.jpg) no-repeat top -177px right 40%/auto 743px;
  }
  .location__content--medical {
    padding-block: 80px;
  }
  .location__content--lifeinfo {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .location__content__lifeinfo-en-heading {
    font-size: min(6.933333333vw, 26px);
  }
  .location__content__lifeinfo-tabs {
    margin-top: 50px;
  }
  .location__content__lifeinfo-tab {
    flex: 0 1 calc((100% - 1px) / 2);
    height: 50px;
    font-size: min(3.466666667vw, 13px);
  }
  .location__content__lifeinfo-tabpanel.active {
    height: auto;
  }
  .location__content__lifeinfo-map {
    width: 100%;
    height: 240px;
  }
  .location__content__lifeinfo-list {
    flex: 1 0 100%;
    height: 230px;
    padding: 20px 10px;
  }
  .location__content__lifeinfo-item + .location__content__lifeinfo-item {
    margin-top: 25px;
  }
  .location__content__lifeinfo-item-num {
    transform: translateY(-2px);
  }
  .location__content__lifeinfo-item-name {
    font-size: min(3.733333333vw, 14px);
  }
  .location__content__lifeinfo-item-data {
    font-size: min(3.2vw, 12px);
    margin-top: 10px;
  }
  .location__content--okayama {
    /* padding-top: 80px; */

    padding-top: 40px;
  }
  .location__content__okayama-map {
    margin-top: 60px;
  }
  .location__content__okayama-photo-wrap {
    margin-top: 80px;
  }
  .location__content--climate {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .location__content--climate::before {
    top: 380px;
    right: -60%;
    width: 1238px;
    padding-top: 743px;
  }
  .location__content__group {
    gap: 40px;
  }
  .location__content__group-photo {
    flex: 0 1 100%;
  }
  .location__content__group-desc {
    width: 100%;
  }
  .location__content--farming {
    padding-block: 80px;
    background: linear-gradient(0deg, #999, #999) no-repeat top center/85.333333333% 1px;
  }
  .location__content__farming--2 {
    margin-top: 80px;
  }
  .location__content--history {
    padding-block: 80px;
    background: linear-gradient(0deg, #999, #999) no-repeat top center/85.333333333% 1px;
  }
  .location__content--history::before {
    top: 187px;
    left: -60%;
    width: 1238px;
    padding-top: 743px;
  }
  .location__content--leisure {
    padding-top: 80px;
    padding-bottom: 80px;
    background: linear-gradient(0deg, #999, #999) no-repeat top center/85.333333333% 1px;
  }
  .location__content__leisure--2 {
    margin-top: 60px;
  }
  .location__content__leisure-photo-wrap {
    grid-template-columns: repeat(2, auto);
  }
}