@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap");
/* --------------------------------------------------------------
# common
-------------------------------------------------------------- */
@media print, screen and (min-width: 992px) {
  .sec_overview,
  .sec_library,
  .sec_photo,
  .sec_music,
  .sec_movie,
  .sec_link,
  .sec_car {
    padding-block: 6.4rem;
  }
}
@media screen and (max-width: 991px) {
  .sec_overview,
  .sec_library,
  .sec_photo,
  .sec_music,
  .sec_movie,
  .sec_link,
  .sec_car {
    padding-block: 4.8rem;
  }
}
@media print, screen and (min-width: 992px) {
  .sec_overview .section_title,
  .sec_library .section_title,
  .sec_photo .section_title,
  .sec_music .section_title,
  .sec_movie .section_title,
  .sec_link .section_title,
  .sec_car .section_title {
    font-size: 2rem;
  }
}
.page_contents section:nth-of-type(even) {
  background-color: #EFEFEF;
}
.page_contents section.sec_link:last-of-type {
  background-color: #FFFFFF;
}

/* --------------------------------------------------------------
# sec_library
-------------------------------------------------------------- */
.sec_library .content_item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto 2rem auto 2rem auto;
      grid-template-areas: "media" "text" "more";
  row-gap: 2rem;
  padding: 4rem 0;
  border-bottom: 1px solid #BEBEBE;
}
@media (min-width: 768px) {
  .sec_library .content_item {
    -ms-grid-columns: minmax(50%, 300px) 3rem 1fr;
    grid-template-columns: minmax(50%, 300px) 1fr;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
        grid-template-areas: "media text" "media more";
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
.sec_library .content_item .text_box {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: text;
}
.sec_library .content_item .link_box {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: more;
  text-align: center;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .sec_library .content_item .link_box {
    text-align: left;
    margin-top: auto;
  }
}
.sec_library .content_item .image {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: media;
  margin: 0;
  -ms-grid-row-align: start;
      align-self: start;
}
@media (min-width: 768px){
  .sec_library .content_item .text_box {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .sec_library .content_item .link_box {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
  }
  .sec_library .content_item .image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
  }
}
.sec_library .content_item .image img {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------
# sec_photo
-------------------------------------------------------------- */
.sec_photo .photo_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .sec_photo .photo_grid {
    -ms-grid-columns: 1fr 1.25rem 1fr 1.25rem 1fr 1.25rem 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 992px) {
  .sec_photo .photo_grid {
    -ms-grid-columns: 1fr 1.25rem 1fr 1.25rem 1fr 1.25rem 1fr 1.25rem 1fr;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
  }
}
.sec_photo .photo_item a {
  display: block;
  text-decoration: none;
  outline: none;
}
.sec_photo .photo_item a:hover .photo, .sec_photo .photo_item a:focus .photo {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.sec_photo .photo {
  margin: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  /* サムネ比率（3:2 想定）*/
  aspect-ratio: 3/2;
  /* 使える環境ではこれでOK */
}
@supports not (aspect-ratio: 3/2) {
  .sec_photo .photo::before {
    content: "";
    display: block;
    padding-top: 66.6667%;
  }
  .sec_photo .photo img {
    position: absolute;
    inset: 0;
  }
}
.sec_photo .photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------
# sec_car
-------------------------------------------------------------- */
.sec_car .photo_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .sec_car .photo_grid {
    -ms-grid-columns: 1fr 1.25rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
.sec_car .photo_grid:has(> .photo_item:only-child) {
  -ms-grid-columns: 1fr !important;
  grid-template-columns: 1fr !important;
}
.sec_car .photo_item a {
  display: block;
  text-decoration: none;
  outline: none;
}
.sec_car .photo_item a:hover .photo, .sec_car .photo_item a:focus .photo {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.sec_car .photo {
  margin: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.sec_car .photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------
# sec_link
-------------------------------------------------------------- */
.sec_link {
  border-top: 1px solid #BEBEBE;
}
.sec_link .inner {
  max-width: 768px;
}
.sec_link .link_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem 1.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sec_link .link_box:last-of-type {
  margin-top: 4rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}