@charset "UTF-8";

/*==================================
  1. General - トップ共通
==================================*/
body.is-top {
  animation: fadeIn 3s ease 0s 1 normal;
}
body.is-top .l-footer {
  margin-top: 0;
}

/*
 	1.1 Title - タイトル
====================================*/
.p-contentTtl {
  font-size: 4.2rem;
  font-weight: 700;
}

.p-contentTtl__gl {
  color: #c3b35e;
}

.p-contentTtl__small {
  font-size: 2.8rem;
  /* font-size: 1.5vw; */
}

@media only screen and (max-width: 767px) {
  .p-contentTtl {
    font-size: 3rem;
  }
  .p-contentTtl__small {
    font-size: 1.8rem;
  }
}

/*
 	1.2 Link - リンク系
====================================*/
.c-bnrList {
  display: grid;
  gap: 40px;
}

.c-bnrList:not(:first-of-type) {
  margin-top: 40px;
}

.c-bnrList a {
  display: block;
  width: 100%;

  text-decoration: none;
  color: inherit;
}

.c-bnrList figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  /* 角丸 */
  border-radius: 1rem;
}

.c-bnrList.c-bnrList__col2 {
  grid-template-columns: repeat(2, 1fr);
}

.c-bnrList.c-bnrList__col3 {
  grid-template-columns: repeat(3, 1fr);
}

.c-bnrList.c-bnrList__col4 {
  grid-template-columns: repeat(4, 1fr);
}

.c-bnrList.c-bnrList__col5 {
  grid-template-columns: repeat(5, 1fr);
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .c-bnrList.c-bnrList__col3.type-l {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .c-bnrList.c-bnrList__col5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .c-bnrList {
    gap: 20px;
  }
  .c-bnrList:not(:first-of-type) {
    margin-top: 20px;
  }
  .c-bnrList.c-bnrList__col2,
  .c-bnrList.c-bnrList__col3 {
    grid-template-columns: repeat(1, 1fr);
  }
  .c-bnrList.c-bnrList__col4,
  .c-bnrList.c-bnrList__col5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* figcaption */
.c-bnrList figcaption {
  margin-bottom: 20px;

  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media only screen and (max-width: 767px) {
  .c-bnrList figcaption {
    margin-bottom: 10px;
  }
}

/*==================================
  2. Mainvis - メインビジュアル
==================================*/
.p-mainvis,
.p-mainvis_detail {
  width: 100%;
  height: auto;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

.p-mainvis_slide,
.p-mainvis_scroll {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.p-mainvis_detail {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 1199px) {
  .p-mainvis_detail {
    padding: 14% 0;
  }
}
@media only screen and (max-width: 767px) {
  .p-mainvis_detail {
    padding: 200px 0 100px;
  }
}

/*
 	2.1 Slide
====================================*/
.p-mainvis_fade {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Height-adjustment */
.p-mainvis_fade .slick-slide img {
  max-width: 100%;
  height: 100vh;
  object-fit: cover;
}

.add-animation {
  animation: zoom 7.5s linear 0s normal both;
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/* Filter */
.p-mainvis_filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.p-mainvis_filter1 {
  background-color: #000;
  background-image: url(/museum/assets/images/index/layer1.png);
  background-repeat: repeat;
}
.p-mainvis_filter2 {
  background: url(/museum/assets/images/index/layer2.png) no-repeat center/cover;
}
.p-mainvis_filter3 {
  background: url(/museum/assets/images/index/layer3.png) no-repeat center/cover;
  mix-blend-mode: color;
}
.p-mainvis_filter4 {
  background: url(/museum/assets/images/index/layer4.png) no-repeat center/cover;
  mix-blend-mode: overlay;
}

/*
 	2.2 Catch
====================================*/
.p-mainvis_catch {
  width: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  padding: 0 40px;
}

.p-mainvis_catch_item {
  flex: 1;

  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-mainvis_catch_logo img {
  width: 100%;
}

.p-mainvis_catch_logo_ttl {
  font-size: 3.2rem;
  line-height: 1.4;
}

.p-mainvis_catch_copy_ttl {
  font-size: 3.2rem;
  font-weight: 700;
}

@media only screen and (max-width: 1199px) {
  .p-mainvis_catch {
    flex-direction: column;
    padding: 0 20px;

    gap: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .p-mainvis_catch {
    gap: 40px;
  }
  .p-mainvis_catch_logo {
    width: 50vw;
    min-width: 260px;
  }
  .p-mainvis_catch_logo_ttl {
    font-size: 2.4rem;
  }
  .p-mainvis_catch_copy_ttl {
    font-size: 2.4rem;
  }
}

/*
 	2.3 Scroll
====================================*/
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 50px;
  z-index: 2;
}

.scroll-down span {
  position: absolute;
  top: -30px;
  left: -50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 80%;
}

.scroll-down::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 30px;
  background: #c3b35e;
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
}

@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 30px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0;
  }
}

@media only screen and (max-width: 767px) {
  .scroll-down {
    bottom: -20px;
  }
}

/*==================================
  3. News - 新着情報
==================================*/
.p-topNews_bg {
  background: #262626;
  min-height: calc(450px + 80px);
  padding: 80px 0;
  position: relative;
}
.p-topNews_bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 90%;
  max-width: 640px;
  aspect-ratio: 64 / 45;
  background: url(/museum/assets/images/index/image01.png) no-repeat center/contain;
}

.p-topNews_unit {
  position: relative;
  display: flex;
  gap: 120px;

  color: #fff;
}

.p-topNews_title {
  flex-shrink: 0;
  margin-left: 80px;
}

.p-topNews_list {
  width: 100%;
}

.p-topNews_list a {
  color: inherit;
}

@media only screen and (max-width: 1199px) {
  .p-topNews_unit {
    flex-direction: column;
    gap: 60px;
  }
  .p-topNews_title {
    margin-left: 0;
  }
}

/*==================================
  4. Menu - メニュー
==================================*/

/*
 	4.1 type-A
====================================*/
.p-topMenu1_bg {
  padding-bottom: calc(24% / 2);
  position: relative;
}
.p-topMenu1_bg::before,
.p-topMenu1_bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 24%;
  aspect-ratio: 134 / 95;
}
.p-topMenu1_bg::before {
  left: 0;
  background: url(/museum/assets/images/index/image02.png) no-repeat center/cover;
}
.p-topMenu1_bg::after {
  right: 0;
  background: url(/museum/assets/images/index/image03.png) no-repeat center/cover;
}

@media only screen and (max-width: 767px) {
  .p-topMenu1_bg {
    padding-bottom: calc(24% * 2.6);
  }
  .p-topMenu1_bg::before,
  .p-topMenu1_bg::after {
    height: calc(24% / 2.2);
  }
  .p-topMenu1_bg::before {
    left: -32%;
  }
  .p-topMenu1_bg::after {
    right: -32%;
  }
}

.p-menuList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.p-menuList_item {
  width: calc(100% / 3 - 20px);
}
.p-menuList_item:nth-child(2) {
  margin-left: calc(80px - 20px);
}

.p-menuList_item > a img {
  transition: 0.5s all;
}
.p-menuList_item > a:hover img {
  transform: scale(1.05);
}

@media only screen and (max-width: 767px) {
  .p-menuList {
    flex-direction: column;
    gap: 0;
  }
  .p-menuList_item {
    width: 100%;
  }
  .p-menuList_item:nth-child(2) {
    margin-left: 0;
  }
}

/*
 	4.2 type-B
====================================*/
.p-topMenu2_bg {
  background: #fff;
}

.p-menuList02 {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.p-menuList02_item,
.p-menuList02_item > * {
  flex: 1;
}

.p-menuList02_item {
  display: flex;
  gap: 80px;
}

.p-menuList02_item__rev {
  flex-direction: row-reverse;
}

.p-menuList02_det {
  position: relative;
  padding-bottom: calc(322px - 60px);
}

.p-menuList02_det::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 322px;
  aspect-ratio: 250 / 161;
}

.p-menuList02_item:nth-child(1) .p-menuList02_det::before {
  background: url(/museum/assets/images/index/menu2-kage1.png) no-repeat center/cover;
}

.p-menuList02_item:nth-child(2) .p-menuList02_det::before {
  background: url(/museum/assets/images/index/menu2-kage2.png) no-repeat center/cover;
}

.p-menuList02_img img {
  width: 100%;
}

@media only screen and (max-width: 1199px) {
  .p-menuList02 {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  .p-menuList02_item {
    flex-direction: column-reverse;
    gap: 40px;
  }
  .p-menuList02_det {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: calc(322px / 2 - 60px);
  }
  .p-menuList02_det::before {
    height: calc(322px / 2);
  }
}

@media only screen and (max-width: 767px) {
  .p-menuList02 {
    gap: 40px;
  }
  .p-menuList02_item {
    gap: 20px;
  }
}

/*
 	4.3 type-C
====================================*/
.p-menuList03 {
  display: flex;
}

.p-menuList03_item {
  flex: 1;
}

.p-menuList03_item > a {
  display: block;
  text-decoration: none;
  color: #fff;

  position: relative;
  padding-top: 100%;
}

.p-menuList03_item .p-contentTtl {
  line-height: 1.4;
  position: absolute;
  left: 20px;
  bottom: 20px;
}

.p-menuList03_item > a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.menu-library::before {
  background: url(/museum/assets/images/index/photo03.jpg) no-repeat center/cover;
}

.menu-list::before {
  background: url(/museum/assets/images/index/photo04.jpg) no-repeat center/cover;
}

.menu-treasure::before {
  background: url(/museum/assets/images/index/photo05.jpg) no-repeat center/cover;
}

.menu-related::before {
  background: url(/museum/assets/images/index/photo06.jpg) no-repeat center/cover;
}

@media only screen and (max-width: 1199px) {
  .p-menuList03 {
    flex-wrap: wrap;
  }
  .p-menuList03_item {
    width: 50%;
    flex: auto;
  }
}