/* ---------- base */
:root {
  font-size: clamp(12px, 2vw, 14px);
  --main-color: #0f0b0c;
  --sub-color: #ad9c34;
  --fff: rgb(233, 233, 233);
  --fff-translucent: rgba(255, 255, 255, .5);
}

body {
  font-family: "游ゴシック体",
    "YuGothic",
    "游ゴシック",
    "Yu Gothic",
    "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro",
    "メイリオ",
    "Meiryo",
    sans-serif;
  font-weight: 400;
  min-height: 100vh;
}

header img,
main img,
footer img {
  image-rendering: -webkit-optimize-contrast;
  max-width: 100%;
}

@supports(-webkit-touch-callout: none) {

  /* iPhoneの表示のみ指定を上書き */
  html {
    height: -webkit-fill-available;
  }

  body {
    min-height: -webkit-fill-available;
  }
}

body.showElms {
  background: #0f0b0c;
}

.showElms .overlay {
  display: block;
  width: 72.5%;
}

.showElms .slide_5,
.showElms .l-section {
  opacity: 1;
}

.showElms .header,
.showElms .l-content,
.showElms .footer {
  display: block;
}

.l-wrapper {
  margin: 0 auto;
  max-width: 1200px;
}

/* ---------- slide */
.slide {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  scrollbar-width: none;
  width: 100%;
  z-index: -9999;
}

.slide::-webkit-scrollbar {
  display: none;
}

.slide_1,
.slide_2,
.slide_4 {
  min-height: 100%;
  min-width: 100%;
}

.slide_3 {
  height: 90vh;
  top: 0;
}

.slide_5 {
  width: clamp(864.25px, 132.5%, 2600px);
  right: 0;
  top: 0;
}

.slide img {
  opacity: 0;
  position: absolute;
}

.overlay {
  background: rgba(0, 0, 0, .3);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

@media screen and (max-width:1199.9px) {

  .slide_1,
  .slide_2,
  .slide_4 {
    height: 100%;
  }
}

@media screen and (max-width:599.9px) {
  .overlay {
    background: rgba(0, 0, 0, 0);
    width: 100% !important;
  }

  .slide_5 {
    width: max(132.5%, 764.25px);
  }
}

/* --------------------------------
  header
-------------------------------- */

@media screen and (min-width: 1200px) {
  .header {
    left: 50%;
    transform: translateX(-50%);
  }
}

.header {
  display: none;
  overflow: visible;
  position: absolute;
  scrollbar-width: none;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.header::-webkit-scrollbar {
  display: none;
}

.header-inner {
  margin: 0 auto;
  padding: max(24px, 5%);
  position: relative;
  width: 100%;
}

.header .siteLogo,
.header+.l-content {
  opacity: 1;
  transition: .2s;
}

.siteLogo {
  margin: 0 auto;
  width: 252px;
}

.nav--pc {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: 1200px;
  width: fit-content;
}

.nav_trigger {
  display: none;
}

.snsList {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 4px 0 8px;
}

.snsList li {
  opacity: .9;
  width: 21px;
}

.navList {
  align-items: center;
  color: var(--fff);
  display: flex;
  gap: max(8px, 1vw);
  justify-content: center;
}

.navList li {
  flex-grow: 1;
  height: auto;
  position: relative;
  text-align: left;
}

.navList li img {
  width: 100%;
}

.nav--sp {
  display: none;
}

@media screen and (max-width:599.9px) {
  .siteLogo {
    width: 212px;
  }

  .header-inner {
    padding: 24px;
  }

  .nav--pc {
    display: none;
  }

  .nav--sp {
    align-items: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: rgb(15, 11, 12);
    display: flex;
    flex-direction: column;
    padding: 72px 24px 0 32px;
    position: fixed;
    right: -220px;
    top: 0;
    height: 100%;
    width: 220px;
    z-index: 9998;
  }

  .snsList {
    gap: 16px;
    padding: 24px 2px 0;
    width: 164px;
  }

  .navList {
    flex-direction: column;
    gap: 16px;
    margin-left: -3%;
  }

  .nav_trigger {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 44px;
    justify-content: center;
    position: absolute;
    right: 25px;
    top: 12px;
    width: 44px;
    z-index: 9999;
  }

  .nav_trigger_button {
    height: 22px;
    position: relative;
    width: 22px;
  }

  .nav_trigger span {
    background: #fff;
    display: inline-block;
    transition: all .4s;
    position: absolute;
    height: 1px;
  }

  .nav_trigger span:nth-of-type(1) {
    top: 8px;
    width: 22px;
  }

  .nav_trigger span:nth-of-type(2) {
    top: 14px;
    width: 16px;
  }

  .header.--menuOpen .header-inner {
    background: #000;
    left: 0;
    height: 100vh;
    opacity: .3;
    position: fixed;
    top: 0;
    width: 100vw;
  }

  .header.--menuOpen .nav_trigger span:nth-of-type(1) {
    top: 0;
    transform: translateY(6px) rotate(-45deg);
    width: 18px;
  }

  .header.--menuOpen .nav_trigger span:nth-of-type(2) {
    top: 12px;
    transform: translateY(-6px) rotate(45deg);
    width: 18px;
  }
}

/* --------------------------------
  main
-------------------------------- */

.l-content {
  color: var(--fff);
  display: none;
  margin: min(920px, 59.25vw) auto 0;
  position: relative;
}

.l-content img {
  max-height: 100%;
  max-width: 100%;
}

.l-section {
  margin-bottom: max(10%, 108px);
  opacity: 0;
  padding: 0 max(30px, 2.5%) 0 5%;
  position: relative;
  transition: .4s;
  width: 72.5%;
  margin-top: min(-10%, -118px);
  padding-top: max(10%, 118px);
}

.section_head {
  margin-bottom: 2em;
  position: relative;
}

.section_head h2 {
  opacity: .9;
}

.section_subHead {
  display: block;
  position: absolute;
  right: -28.5vw;
  top: 0;
  max-width: 253px;
}

.section_content {
  font-size: 1em;
  letter-spacing: .1em;
  line-height: 2;
  text-align: justify;
}

.section_content img {
  transition: .4s;
}

.section_content dl {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  line-height: 1.75;
}

.section_content dt {
  font-weight: normal;
  letter-spacing: .25em;
  width: max(17%, 63.5px);
}

.section_content dd {
  width: 78%;
}

.section_content dd:not(:last-child) {
  margin-bottom: 1em;
}

.linkButton-wrap {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.linkButton {
  border: solid 1px var(--fff-translucent);
  /* box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, .5); */
  cursor: pointer;
  display: inline-block;
  flex-grow: 0;
  font-family: '游明朝',
    'Yu Mincho',
    YuMincho,
    'Hiragino Mincho Pro',
    serif;
  letter-spacing: .1em;
  margin-top: 1em;
  padding: .25em 1em;
}

.linkButton:hover {
  border: solid 1px var(--sub-color);
  color: var(--sub-color);
}

@media screen and (max-width:599.9px) {
  .l-content {
    overflow: hidden;
  }

  .l-section {
    padding-left: max(5%, 25px);
    padding-right: max(5%, 25px);
    width: 100%;
  }

  .section_subHead {
    display: none;
  }

  .section_content {
    width: 100%;
  }

  .section_content dl {
    align-items: flex-start;
    flex-direction: column;
  }

  .section_content dt {
    width: 100%;
  }

  .section_content dd {
    margin-bottom: 1em;
    width: 100%;
  }
}

/* ---------- concept */

/* ---------- exhibition */
#exhibition .linkButton {
  letter-spacing: .2em;
}

/* ---------- guide */
.guide_detail .classification {
  display: inline-block;
  width: 7em;
}

/* ---------- museumShop */
#museumShop .section_img {
  margin-bottom: 5%;
  width: min(72.5%, 699px);
}

#museumShop .img-bg {
  position: absolute;
  bottom: min(-15.5vw, -142px);
  right: -47.5%;
  transition: .2s;
  width: 420px;
  z-index: -1;
}

@media screen and (max-width:599.9px) {
  #museumShop .section_img {
    width: min(100%, 385px);
  }

  #museumShop .img-bg {
    right: -21.5%;
  }
}

#access .section_img {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-bottom: 5%;
  width: min(89.5%, 699px);
}

#access .googleMap {
  margin-top: 24px;
  width: clamp(30px, 5vw, 45px);
}

@media screen and (max-width:599.9px) {
  #access .section_img {
    width: min(100%, 430px);
  }
}

/* --------------------------------
  footer
-------------------------------- */

.footer {
  display: none;
}

.footer-inner {
  margin-bottom: 12.5vh;
  padding-bottom: 12.5vh;
  position: relative;
  width: 72.5%;
}

.copyright {
  position: absolute;
  right: -26.25vw;
  bottom: 0;
  width: 222px;
}

@media screen and (max-width:599.9px) {
  .footer-inner {
    width: 100%;
  }

  .copyright {
    right: 5%;
  }
}

/* ---------- pageTop */
.pageTop {
  position: absolute;
  right: -26.25vw;
  top: -24px;
  height: 1em;
  width: 1em;
}

@media screen and (max-width:599.9px) {
  .pageTop {
    right: 5%;
  }
}