@charset "UTF-8";

/*==================================
  1. General - 下層共通
==================================*/

/*==================================
  2. subVisual - サブビジュアル
==================================*/
.p-subvis_bg {
  background: #000000;
  color: #fff;
  padding-top: 120px;

  position: relative;
}

.p-subvis_bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 11 / 7;
}

/* subvis */
.s01::before {
  background: url(/museum/assets/images/under/s01.png) no-repeat center/cover;
}
.s02::before {
  background: url(/museum/assets/images/under/s02.png) no-repeat center/cover;
}
.s03::before {
  background: url(/museum/assets/images/under/s03.png) no-repeat center/cover;
}
.s04::before {
  background: url(/museum/assets/images/under/s04.png) no-repeat center/cover;
}
.s05::before {
  background: url(/museum/assets/images/under/s05.png) no-repeat center/cover;
}
.s06::before {
  background: url(/museum/assets/images/under/s06.png) no-repeat center/cover;
}
.s07::before {
  background: url(/museum/assets/images/under/s07.png) no-repeat center/cover;
}
.s08::before {
  background: url(/museum/assets/images/under/s08.png) no-repeat center/cover;
}
.s09::before {
  background: url(/museum/assets/images/under/s09.png) no-repeat center/cover;
}
.s10::before {
  background: url(/museum/assets/images/under/s10.png) no-repeat center/cover;
}
.s11::before {
  background: url(/museum/assets/images/under/s11.png) no-repeat center/cover;
}
.s12::before {
  background: url(/museum/assets/images/under/s12.png) no-repeat center/cover;
}

.p-subvis_inr {
  padding: 140px 0;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .p-subvis_bg {
    padding-top: 80px;
  }
  .p-subvis_bg::before {
    left: 0;
    height: calc(100% - (120px / 2.5));
  }
  .p-subvis_inr {
    padding: 70px 0;
  }
}

/*==================================
  3. Title - タイトル
==================================*/

/*
 	3.1 PageTitle - ページタイトル
====================================*/
.c-pageTtl {
  font-size: 5rem;
  font-weight: 700;

  line-height: 1.4;
  padding-bottom: 20px;
  position: relative;
}
.c-pageTtl::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1.2em;
  height: 1px;
  background: #c3b35e;
}

@media only screen and (max-width: 767px) {
  .c-pageTtl {
    font-size: 3.2rem;
  }
}

/* 詳細ページ用 */
.c-pageTtl02 {
  font-size: 3.2rem;
  font-weight: 700;

  line-height: 1.4;
}

@media only screen and (max-width: 767px) {
  .c-pageTtl02 {
    font-size: 2.6rem;
  }
}

/*
 	3.2 CommonTitle - 共通タイトル
====================================*/
.c-cateTtl {
  font-size: 2.4rem;
  font-weight: 700;
  padding: 0.2em;
  border: 1px solid;
}

.c-cateTtl > span {
  display: block;
  background: #000;
  color: #fff;
  padding: 10px 20px;
}

@media only screen and (max-width: 767px) {
  .c-cateTtl {
    font-size: 2rem;
    padding-bottom: 6px;
  }
}

/*==================================
  4. Main - メインカラム
==================================*/

/*
 	4.1 Breadcrumb - パンくず
====================================*/
.c-breadcrumb {
  margin-top: 40px;
}

.c-breadcrumbList {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  font-size: 1.4rem;
}

.c-breadcrumbList:nth-of-type(n + 2) {
  margin-top: 0.5rem;
}

.c-breadcrumbList li {
  position: relative;
  letter-spacing: 0.1em;
}

.c-breadcrumbList li:not(:first-of-type) {
  padding-left: calc(1.4em + 10px);
}

.c-breadcrumbList li:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.4em;
  height: 1px;
  background: #000000;
  transform: rotate(-45deg);
}

@media only screen and (max-width: 767px) {
  .c-breadcrumb {
    margin-top: 20px;
  }
}

/*
 	4.2 Status - ページ情報
====================================*/
.c-pageInfo {
  display: flex;
  justify-content: flex-end;
  font-size: 90%;
}

.c-pageInfo_def {
  display: flex;
}

.c-pageInfo_def:not(:first-of-type) {
  margin-left: 2em;
}

.c-pageInfo_def dt {
  position: relative;
}

.c-pageInfo_def dt::after {
  content: "\ff1a";
  padding: 0 0.25em;
  font-weight: 400;
}

@media only screen and (max-width: 767px) {
  .c-pageInfo {
    flex-direction: column;
    align-items: flex-end;
  }
  .c-pageInfo_def:not(:first-of-type) {
    margin-left: 0;
  }
}

/* SNSシェアボタン */
.c-shareList {
  margin-top: 0.5em;
  display: flex;
  justify-content: flex-end;
}
.c-shareList > li {
  width: 100px;
}
.c-shareList > li:not(:first-of-type) {
  margin-left: 0.5em;
}
.c-shareList a {
  display: block;
}

@media only screen and (max-width: 767px) {
  .c-shareList > li {
    width: 80px;
  }
}

/*
 	4.3 Signature - 署名
====================================*/
.c-signature_def {
  border: 1px solid #000000;
}

.c-signature_head {
  font-size: 2.2rem;

  background: #000000;
  color: #fff;
  position: relative;
  padding: 10px 20px;
}

.c-signature_body {
  padding: 10px 20px;
}

.c-signature_name {
  font-weight: 700;
  margin-bottom: 0.3em;
}

@media only screen and (max-width: 767px) {
  .c-signature_head {
    font-size: 2rem;
  }
  .c-signature_head,
  .c-signature_body {
    padding: 10px;
  }
}

/*==================================
  5. Page - 下層ページ
==================================*/

/*
 	5.1 Category List - カテゴリ一覧
====================================*/
/* カテゴリ新着 */
.c-newsBox_inr {
  margin-top: 10px;
}

.c-newsTtl {
  font-size: 2.6rem;
  font-weight: 700;
}

.c-news_btn {
  margin-top: 20px;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .c-newsTtl {
    font-size: 2.2rem;
  }
}

/* カテゴリ一覧 - 本体 */
.c-linkList li {
  border-bottom: 1px solid #6a6a6a;
  padding: 20px 0;
  /* アイコン */
  position: relative;
  padding-left: calc(1.8em + 20px);
}

.c-linkList li::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 1.8em; /* line-height */
  aspect-ratio: 1 / 1;
}

.c-linkList li > a {
  display: block;
}

@media only screen and (max-width: 767px) {
  .c-linkList li {
    padding: 16px 0;
    padding-left: calc(1.8em + 16px);
  }
  .c-linkList li::before {
    top: 16px;
  }
}

.i-folder li::before {
  background: url(/museum/assets/images/common/c_folder.svg) no-repeat;
}
.i-page li::before {
  background: url(/museum/assets/images/common/c_page.svg) no-repeat;
}

/* 一覧ページのみ */
.c-linkListUnit .c-linkList:first-of-type {
  border-top: 1px solid #6a6a6a;
}

/* サイトマップ用 */
.c-linkList__col2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 20px;
}

@media only screen and (max-width: 767px) {
  .c-linkList__col2 {
    display: block;
  }
}

/* サムネイル一覧 */
.c-tmbList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.c-tmbList_item {
  background: #fff;
  box-shadow: 4px 4px 8px #d0d0d0;
}

.c-tmbList_unit > a {
  display: block;

  text-decoration: none;
  color: inherit;
}

.c-tmbList_image img {
  max-width: 100%;
  /* 比率維持 */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0 auto;
}

.c-tmbList_info {
  padding: 20px;
}

.c-tmbList_info > p {
  margin-top: 10px;
}

@media only screen and (max-width: 1550px) {
  .c-tmbList {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 900px) {
  .c-tmbList {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .c-tmbList {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*
 	5.2 News - 新着情報
====================================*/
/* ページャー */
.c-pagingList {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

@media only screen and (max-width: 767px) {
  .c-pagingList {
    gap: 0;
  }
}

.c-pagingList li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
  width: 40px;
  height: 40px;

  color: inherit;
  background: transparent;
  border-radius: 50%;
}

.c-pagingList li > a.is-current,
.c-pagingList li > a:hover,
.c-pagingList li > a:focus {
  background: #fff;
}

/* cursor */
.c-pagination {
  position: relative;
  display: inline-block;
}
.c-pagination__prev {
  padding-right: 20px;
}
.c-pagination__next {
  padding-left: 20px;
}

.c-pagination::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  aspect-ratio: 1 / 1;

  background: #000000;
  border-radius: 50%;
  transition: all 0.3s;
}
.c-pagination__prev::before {
  left: 0;
}
.c-pagination__next::before {
  right: 0;
}

.c-pagination > a:hover {
  background: none !important;
}

.c-pagination > a::before {
  content: "";
  position: absolute;
  top: calc(50% + 4px);
  width: 45px;
  height: 1px;
  background: #c3b35e;
  transition: all 0.3s;
}
.c-pagination__prev > a::before {
  left: 15px;
}
.c-pagination__next > a::before {
  right: 15px;
}

.c-pagination > a::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #c3b35e;
  transition: all 0.3s;
}
.c-pagination__prev > a::after {
  left: 15px;
  transform: rotate(-35deg);
}
.c-pagination__next > a::after {
  right: 15px;
  transform: rotate(35deg);
}

/* left */
.c-pagination__prev:hover::before {
  position: absolute;
  left: -30px;
}
.c-pagination__prev:hover > a::before {
  left: -15px;
}
.c-pagination__prev:hover > a::after {
  left: -15px;
}

/* right */
.c-pagination__next:hover::before {
  position: absolute;
  right: -30px;
}
.c-pagination__next:hover > a::before {
  right: -15px;
}
.c-pagination__next:hover > a::after {
  right: -15px;
}

/*==================================
  6. 404 - NotFound
==================================*/
.c-notfound {
  text-align: center;
}
.c-notfound > *:not(:first-child) {
  margin-top: 40px;
}
.c-notfound > figure {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
.c-notfound_ttl {
  font-size: 3.6rem;
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .c-notfound_ttl {
    font-size: 2.4rem;
  }
}