@charset "utf-8";

/* .trad {
} */
.trad__content {
  align-items: start;
}
/* .trad__content__desc {
} */
.trad__content__desc--1 {
  grid-area: desc1;
}
.trad__content__desc--2 {
  grid-area: desc2;
}
/* .trad__content__photo {
} */
.trad__content__photo--1 {
  grid-area: photo1;
}
.trad__content__photo--2 {
  grid-area: photo2;
}
.trad__content__photo--3 {
  grid-area: photo3;
}
.trad__content__photo--4 {
  grid-area: photo4;
}
/* .trad__content__desc__heading {
}
.trad__content__desc__copy {
} */
.trad__content--1 {
  grid-template: ". desc1 . photo1 photo1 photo1 . desc2 ." auto
  ". . . . . . . . ." 32px
  ". . . photo2 . . . . ." auto
  ". . . . . . . . ." 32px
  ". . . . . photo3 . photo4 ." auto
  / max(32px, calc(var(--window-half-width) - 770px)) min(calc(283 / 1540 * 100%), 283px) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px;
}
.trad__content--1 .trad__content__desc--1 {
  translate: 0 -100px;
}
.trad__content--1 .trad__content__desc--2 {
  max-width: 283px;
}
.trad__content--2 {
  grid-template: ". . . . . . . . ." 104px
  ". . photo1 photo1 photo1 . photo2 photo2 ." auto
  ". . . . . . . . ." 32px
  ". photo4 photo4 . photo3 photo3 photo3 . ." auto
  / max(32px, calc(var(--window-half-width) - 770px)) minmax(0, 1fr) min(calc(282 / 1540 * 100vw), 282px) 32px min(calc(126 / 1540 * 100vw), 126px) 32px min(calc(282 / 1540 * 100vw), 282px) min(calc(314 / 1540 * 100vw), 314px) 32px;
}
@media screen and (max-width: 768px){
  .trad__content--1 {
    grid-template: ". desc1 desc1 desc1 ." auto
    ". . . . ." 65px
    ". photo1 photo1 photo1 ." auto
    ". . . . ." 65px
    ". desc2 desc2 desc2 ." auto
    ". . . . ." 65px
    ". photo2 . . ." auto
    ". . . . ." 8px
    ". . . photo3 ." auto
    ". . . . ." 8px
    ". photo4 . . ." auto
    / 8px minmax(0, 1fr) 8px minmax(0, 1fr) 8px;
  }
  .trad__content--1 .trad__content__desc--1 {
    justify-self: end;
    translate: -31px;
  }
  .trad__content--1 .trad__content__desc--1 .trad__content__desc__heading {
    width: 100%;
  }
  .trad__content--1 .trad__content__desc--2 {
    max-width: calc(100% - 31px - 31px);
    justify-self: center;
  }
  .trad__content--1 .trad__content__photo--2 {
    translate: 31px;
  }
  .trad__content--1 .trad__content__photo--3 {
    translate: -31px;
  }
  .trad__content--1 .trad__content__photo--4 {
    translate: 31px;
  }
  .trad__content--2 {
    grid-template: ". . . . ." 65px
    ". photo1 photo1 photo1 ." auto
    ". . . . ." 65px
    ". . . photo2 ." auto
    ". . . . ." 8px
    ". photo3 . . ." auto
    ". . . . ." 65px
    ". photo4 photo4 photo4 ." auto
    / 8px minmax(0, 1fr) 8px minmax(0, 1fr) 8px;
  }
  .trad__content--2 .trad__content__photo--1 {
    width: calc(267 / 359 * 100%);
  }
  .trad__content--2 .trad__content__photo--2 {
    translate: -31px;
  }
  .trad__content--2 .trad__content__photo--3 {
    translate: 31px;
  }
}



.area {
  padding-top: 270px;
}
.area__content {
  grid-template: ". copy . . heading ." auto
  ". . . . . ." 65px
  ". list1 . list2 photo photo" auto
  / max(32px, calc(var(--window-half-width) - 770px)) minmax(0, 1fr) 30px minmax(0, 1fr) min(calc(942 / 1540 * 100%), 942px) max(32px, calc(var(--window-half-width) - 770px));
  align-items: start;
}
.area__content__heading {
  grid-area: heading;
  align-self: end;
  translate: -50px;
}
.area__content__copy {
  grid-area: copy;
  align-self: end;
}
.area__content__photo {
  grid-area: photo;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: var(--header-height);
}
/* .area__content__photo__link {
} */
.area__content__photo img {
  width: calc(100% + (126 / 1133 * 100%));
  max-width: none;
  margin-top: calc(181 / 1133 * -100%);
  margin-left: calc(126 / 1133 * -100%);
}
.area__content__list {
  position: relative;
  z-index: 2;
  grid-template-columns: 100%;
  align-items: start;
  gap: 65px 0;
}
.area__content__list--1 {
  grid-area: list1;
  margin-top: calc(127 / 284 * 100%);
}
.area__content__list--2 {
  grid-area: list2;
}
/* .area__content__list__item {
}
.area__content__list__item__photo {
} */
.area__content__list__item__data {
  font-size: clamp(10px, calc(13 / 1200 * 100vw), 13px);
  line-height: 1.4;
  --margin-top: 1em;
}
@media screen and (max-width: 768px){
  .area {
    padding-top: 170px;
  }
  .area__content {
    grid-template: ". heading . . ." auto
    ". . . copy ." auto
    ". . . . ." 20px
    "photo photo photo photo photo" auto
    ". . . . ." 50px
    ". list1 . list2 ." auto
    / 8px minmax(0, 1fr) 8px minmax(0, 1fr) 8px;
  }
  .area__content__heading {
    justify-self: start;
    translate: 31px;
  }
  .area__content__copy {
    translate: -31px;
  }
  .area__content__photo {
    position: relative;
    top: 0;
    overflow: hidden;
  }
  .area__content__photo__link {
    width: 112%;
    margin-top: -8%;
    margin-left: -10%;
  }
  .area__content__photo img {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    margin-left: 0;
  }
  .area__content__photo__link::after {
    top: 20%;
  }
  .area__content__list {
    gap: 24px 0;
  }
  .area__content__list--1 {
    margin-top: 0;
  }
  .area__content__list__item__data {
    font-size: min(calc(9 / 375 * 100vw), 9px);
    --margin-top: 8px;
  }
}



.education {
  padding-top: 100px;
}
.education__content {
  position: relative;
  z-index: 1;
  grid-template: ". heading . map map map map map ." auto
  ". . . . . . . . ." 170px
  ". . . photo1 photo1 photo1 . desc1 ." auto
  ". . . . . . . . ." 32px
  ". . . . . photo2 . desc2 ." auto
  ". . . . . . . . ." 32px
  ". . . photo3 . desc3 . . ." auto
  ". . . . . . . . ." 32px
  ". . . . . photo4 . desc4 ." auto
  ". . . . . . . . ." 32px
  ". . . photo5 . desc5 . . ." auto
  ". . . . . . . . ." 32px
  ". . . . . photo6 . desc6 ." auto
  ". . . . . . . . ." 170px
  / max(32px, calc(var(--window-half-width) - 770px)) minmax(0, 1fr) 32px min(calc(440 / 1540 * 100%), 440px) 32px min(calc(440 / 1540 * 100%), 440px) 32px min(calc(285 / 1540 * 100%), 285px) max(32px, calc(var(--window-half-width) - 770px));
  align-items: end;
  background: #4E7481;
}
.education__content::before {
  content: "";
  grid-column: 1 / 10;
  grid-row: 1 / 2;
  position: absolute;
  z-index: -1;
  top: -1px;
  left: 0;
  right: 0;
  bottom: 50%;
  background: rgb(var(--color-offwhite));
}
.education__content__map {
  grid-area: map;
  width: min(90%, 755px);
  justify-self: end;
}
/* .education__content__map__link {
} */
.education__content__heading {
  grid-area: heading;
  justify-self: start;
}
/* .education__content__photo {
} */
.education__content__photo--1 {
  grid-area: photo1;
}
.education__content__photo--2 {
  grid-area: photo2;
}
.education__content__photo--3 {
  grid-area: photo3;
}
.education__content__photo--4 {
  grid-area: photo4;
}
.education__content__photo--5 {
  grid-area: photo5;
}
.education__content__photo--6 {
  grid-area: photo6;
}
/* .education__content__desc {
} */
.education__content__desc--1 {
  grid-area: desc1;
  align-self: start;
}
.education__content__desc--2 {
  grid-area: desc2;
}
.education__content__desc--3 {
  grid-area: desc3;
}
.education__content__desc--4 {
  grid-area: desc4;
}
.education__content__desc--5 {
  grid-area: desc5;
}
.education__content__desc--6 {
  grid-area: desc6;
}
/* .education__content__desc__copy {
} */
.education__content__desc__data {
  line-height: 1.8;
}
@media screen and (max-width: 768px){
  .education__content {
    grid-template: ". map map map ." auto
    ". . . . ." 100px
    ". . . heading ." auto
    ". . . . ." 65px
    ". photo1 photo1 photo1 ." auto
    ". . . . ." 65px
    ". desc1 . . ." auto
    ". . . . ." 65px
    ". photo2 photo2 photo2 ." auto
    ". . . . ." 8px
    ". desc2 desc2 desc2 ." auto
    ". . . . ." 24px
    ". photo3 photo3 photo3 ." auto
    ". . . . ." 8px
    ". desc3 desc3 desc3 ." auto
    ". . . . ." 24px
    ". photo4 photo4 photo4 ." auto
    ". . . . ." 8px
    ". desc4 desc4 desc4 ." auto
    ". . . . ." 24px
    ". photo5 photo5 photo5 ." auto
    ". . . . ." 8px
    ". desc5 desc5 desc5 ." auto
    ". . . . ." 24px
    ". photo6 photo6 photo6 ." auto
    ". . . . ." 8px
    ". desc6 desc6 desc6 ." auto
    ". . . . ." 100px
    / 8px minmax(0, 1fr) 8px minmax(0, 1fr) 8px;
  }
  .education__content::before {
    grid-column: 1 / 6;
    grid-row: 1 / 2;
  }
  .education__content__map {
    width: 100%;
  }
  .education__content__heading {
    justify-self: end;
    translate: -31px;
  }
  .education__content__photo--2 {
    width: calc(267 / 359 * 100%);
    translate: 31px;
  }
  .education__content__photo--3 {
    width: calc(267 / 359 * 100%);
    justify-self: end;
  }
  .education__content__photo--4 {
    width: calc(267 / 359 * 100%);
    translate: 31px;
  }
  .education__content__photo--5 {
    width: calc(267 / 359 * 100%);
    justify-self: end;
  }
  .education__content__photo--6 {
    width: calc(267 / 359 * 100%);
    translate: 31px;
  }
  .education__content__desc--1 {
    translate: 31px;
  }
  .education__content__desc--2 {
    width: calc(267 / 359 * 100%);
    translate: 31px;
  }
  .education__content__desc--3 {
    width: calc(267 / 359 * 100%);
    justify-self: end;
  }
  .education__content__desc--4 {
    width: calc(267 / 359 * 100%);
    translate: 31px;
  }
  .education__content__desc--5 {
    width: calc(267 / 359 * 100%);
    justify-self: end;
  }
  .education__content__desc--6 {
    width: calc(267 / 359 * 100%);
    translate: 31px;
  }
}



.lifeinfo {
  padding-top: 270px;
}
.lifeinfo__content {
  grid-template: ". heading . . ." auto
  ". . . . ." 65px
  ". . . group ." auto
  / max(32px, calc(var(--window-half-width) - 770px)) minmax(0, 1fr) auto min(calc(1225 / 1540 * 100%), 1225px) max(32px, calc(var(--window-half-width) - 770px));
  align-items: start;
}
.lifeinfo__content__heading {
  grid-area: heading;
}
.lifeinfo__content__group {
  grid-area: group;
}
/* .lifeinfo__content__group__tab {
} */
.lifeinfo__content__group__tab__list {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 40px;
}
.swiper[data-swiper-setting="tab"] .lifeinfo__content__group__tab__list__item {
  flex: 0 1 auto;
  width: fit-content;
  height: 100%;
  grid-template-columns: auto auto;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  gap: 0 calc(24 / 15 * 1em);
  font-size: clamp(11px, calc(15 / 1200 * 100vw), 15px);
  opacity: .3;
}
.swiper[data-swiper-setting="tab"] .lifeinfo__content__group__tab__list__item.swiper-slide-thumb-active {
  opacity: 1;
}
.lifeinfo__content__group__tab__list__item__name {
  line-height: 1.4;
}
.lifeinfo__content__group__tab__list__item::after {
  content: "";
  width: calc(7 / 15 * 1em);
  height: calc(9 / 15 * 1em);
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg width="7" height="9" viewBox="0 0 7 9" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8.5L0 0.5L3.5 2.63379L7 0.5L3.5 8.5Z"/></svg>') no-repeat center/100% auto;
  mask: url('data:image/svg+xml;utf8,<svg width="7" height="9" viewBox="0 0 7 9" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8.5L0 0.5L3.5 2.63379L7 0.5L3.5 8.5Z"/></svg>') no-repeat center/100% auto;
}
.lifeinfo__content__group__tabpanel {
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  background: #fff;
}
/* .lifeinfo__content__group__tabpanel__list {
} */
.lifeinfo__content__group__tabpanel__list__item {
  grid-template-columns: calc(880 / 1225 * 100%) minmax(0, 1fr);
  grid-template-rows: 640px;
}
/* .lifeinfo__content__group__tabpanel__list__item__map {
} */
.lifeinfo__content__group__tabpanel__list__item__desc {
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 32px 24px 32px 32px;
}
.lifeinfo__content__group__tabpanel__list__item__desc__list {
  grid-template-columns: 100%;
  gap: 16px 0;
}
.lifeinfo__content__group__tabpanel__list__item__desc__list__item {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid currentColor;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, #fff 100%);
  gap: 16px 7px;
  cursor: pointer;
  transition: background .4s;
}
.lifeinfo__content__group__tabpanel__list__item__desc__list__item__num {
  align-self: start;
  width: calc(16 / 13 * 1em);
  height: calc(16 / 13 * 1em);
  place-items: center;
  border-radius: 100%;
  font-size: clamp(10px, calc(13 / 1200 * 100vw), 13px);
  color: rgb(var(--color-white));
  background: #151515;
}
.lifeinfo__content__group__tabpanel__list__item__desc__list__item__name {
  font-size: clamp(11px, calc(15 / 1200 * 100vw), 15px);
  line-height: calc(16 / 15);
}
.lifeinfo__content__group__tabpanel__list__item__desc__list__item__data {
  grid-column: 2 / 3;
  justify-self: end;
  font-size: clamp(10px, calc(13 / 1200 * 100vw), 13px);
}
/* .lifeinfo__content__group__tabpanel__list__item__desc__list__item__latlng {
} */
@media (any-hover: hover){
  .lifeinfo__content__group__tabpanel__list__item__desc__list__item:hover {
    background: rgba(var(--color-gold), .3);
  }
}
@media screen and (max-width: 768px){
  .lifeinfo {
    padding-top: 100px;
  }
  .lifeinfo__content {
    grid-template: ". heading ." auto
    ". . ." 65px
    ". group ." auto
    / 8px minmax(0, 1fr) 8px;
  }
  .lifeinfo__content__heading {
    translate: 31px;
  }
  .lifeinfo__content__group__tab__list {
    gap: 0 5px;
    padding-bottom: 16px;
    width: calc(100% - 24px - 24px);
    margin-inline: auto;
  }
  .swiper[data-swiper-setting="tab"] .lifeinfo__content__group__tab__list__item {
    grid-template-columns: auto;
    align-content: end;
    align-items: end;
    gap: calc(12 / 12 * 1em) 0;
    font-size: min(calc(12 / 375 * 100vw), 12px);
    height: auto;
  }
  .lifeinfo__content__group__tab__list__item__name {
    line-height: 1.2;
  }
  .lifeinfo__content__group__tab__list__item::after {
    width: calc(7 / 12 * 1em);
    height: calc(8 / 12 * 1em);
  }
  .lifeinfo__content__group__tabpanel__list__item {
    grid-template-columns: 100%;
    grid-template-rows: 50svh 45svh;
  }
  .lifeinfo__content__group__tabpanel__list__item__desc {
    padding: 32px 24px;
  }
  .lifeinfo__content__group__tabpanel__list__item__desc__list {
    gap: 12px 0;
  }
  .lifeinfo__content__group__tabpanel__list__item__desc__list__item {
    padding-bottom: 12px;
    gap: 3px 8px;
  }
  .lifeinfo__content__group__tabpanel__list__item__desc__list__item__num {
    font-size: min(calc(13 / 375 * 100vw), 13px);
  }
  .lifeinfo__content__group__tabpanel__list__item__desc__list__item__name {
    font-size: min(calc(12 / 375 * 100vw), 12px);
    line-height: calc(16 / 12);
  }
  .lifeinfo__content__group__tabpanel__list__item__desc__list__item__data {
    font-size: min(calc(11 / 375 * 100vw), 11px);
  }
}