#open {
  padding-bottom: 8.8rem;
  background-color: var(--color-museum-bg);
  @media screen and (max-width: 767px) {
    padding-bottom: 6.8rem;
  }
}

#open .contents-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 3.7rem;
  @media screen and (max-width: 767px) {
    flex-direction: column;
    gap: 1.6rem;
  }
}

#open .item {
  display: flex;
  padding: 3.2rem 3.7rem;
  column-gap: 5rem;
  width: calc((100% - 3.7rem) / 2);
  background-color: var(--color-white);
  @media screen and (max-width: 767px) {
    width: 100%;
    column-gap: 1.5rem;
    padding: 3.2rem 2.8rem;
  }
}

#open .item .head {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .1em;
  @media screen and (max-width: 767px) {
    width: 4.4em;
    line-height: 1.3;
  }
}

#open .item .detail-area {
  flex: 1;
}

#open .item .text {
  line-height: 1.9;
}

#open .item .museum-btn {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 1rem;
  margin-top: 1.3rem;
  padding: 1rem 1.9rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-main02);
  border-radius: .5rem;
  @media screen and (max-width: 767px) {
    column-gap: .7rem;
  }
  & .arrow::after {
    margin-top: 0.1rem;
    filter: var(--color-white-filter);
  }
}

/* --------------------------------------------------------------- */
/*  fee */
/* --------------------------------------------------------------- */
#fee {
  
}

#fee .contents-wrapper {
  display: flex;
  column-gap: 4.3rem;
  @media screen and (max-width: 767px) {
    flex-direction: column;
    row-gap: 1.6rem;
  }
}

#fee .table-wrapper {
  margin-top: 0;
}

#fee .museum-table {
  & th,
  & td {
    width: 23.4rem;
  }
  & tr *:first-child {
    font-weight: 700;
  }
}

#fee .text-area {
  
}

#fee .note {
  font-weight: 700;
  line-height: 1.9;
}

#fee .note02 {
  margin-top: 0.9rem;
  line-height: 1.7;
  font-size: 1.4rem;
}

/* --------------------------------------------------------------- */
/*  access */
/* --------------------------------------------------------------- */
#access {
  margin-top: 10.5rem;
  padding-bottom: 8.5rem;
  background-color: var(--color-museum-bg);
  @media screen and (max-width: 767px) {
    margin-top: 6rem;
    padding-bottom: 6rem;
  }
}

#access .contents-wrapper {
  display: flex;
  column-gap: 8.5rem;
  @media screen and (max-width: 767px) {
    flex-direction: column-reverse;
    row-gap: 1.6rem;
  }
}

#access .map-wrapper {
  width: 57rem;
  aspect-ratio: 570/370;
  @media screen and (max-width: 767px) {
    width: 100%;
    height: 100%;
  }
  & iframe {
    width: 100%;
    height: 100%;
  }
}

#access .text {
  line-height: 1.9;
}

#access .note {
  font-size: 1.4rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------- */
/*  group */
/* --------------------------------------------------------------- */
#group {
  
}

#group .text {
  text-align: center;
  line-height: 1.9;
}

#group .btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 3rem;
  margin-top: 7.3rem;
  @media screen and (max-width: 767px) {
    flex-direction: column;
    row-gap: 1.6rem;
    margin-top: 3rem;
  }
}

#group .btn-group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  column-gap: 1rem;
  padding: 2.1rem 1rem;
  width: 32rem;
  font-size: 2rem;
  line-height: 1.9;
  font-weight: 700;
  color: var(--color-main02);
  border-radius: .5rem;
  border: .2rem solid var(--color-main02);
  transition: all ease .3s;
  @media screen and (max-width: 767px) {
    padding: 1.6rem 1rem;
    font-size: 1.4rem;
    width: 71%;
  }
  & .arrow::after {
    filter: var(--color-main02-filter);
    transform: rotate(90deg);
  }
  @media (hover:hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-main02);
      color: var(--color-white);
      opacity: 1;
      & .arrow::after {
        filter: var(--color-white-filter);
      }
    }
  }
}

#group .common-sub-title04 {
  margin-top: 3.8rem;
  font-size: 1.8rem;
  @media screen and (max-width: 767px) {
    margin-top: 2.6rem;
    font-size: 1.4rem;
  }
}

#group .calender-wrapper {
  margin: 6.9rem auto 0;
  width: 100%;
  aspect-ratio: 7/5;
  @media screen and (max-width: 767px) {
    margin-top: 3rem;
    margin-bottom: 1.3rem;
    width: 100%;
    aspect-ratio: 1;
  }
  & iframe {
    width: 100%;
    height: 100%;
  }
}


/* --------------------------------------------------------------- */
/*  request */
/* --------------------------------------------------------------- */
#request {
  margin-top: 12.5rem;
  padding-bottom: 12.2rem;
  background-color: var(--color-museum-bg);
  @media screen and (max-width: 767px) {
    margin-top: 6rem;
    padding-bottom: 6rem;
  }
}

#request .contents-wrapper {
  padding: 6.9rem 6rem 7.2rem;
  background-color: var(--color-white);
  @media screen and (max-width: 767px) {
    padding: 3.5rem 3.6rem 4.2rem;
  }
}

#request .head {
  font-size: 1.8rem;
  line-height: 1.9;
  font-weight: 700;
  @media screen and (max-width: 767px) {
    font-size: 1.6rem;
  }
  &:not(:first-child) {
    margin-top: 3rem;
  }
}

#request .text {
  margin-top: 0.4rem;
  line-height: 1.9;
}

#request .list {
  margin-top: .7rem;
  display: flex;
  flex-direction: column;
}

#request .item {
  display: flex;
  align-items: baseline;
  column-gap: 1.5rem;
  line-height: 1.9;
  @media screen and (max-width: 767px) {
    column-gap: .8rem;
  }
  &::before {
    content: "";
    flex-shrink: 0;
    display: block;
    width: 1.2rem;
    aspect-ratio: 1;
    background-color: var(--color-main02);
    border-radius: 50%;
    @media screen and (max-width: 767px) {
      width: .8rem;
      transform: translateY(-.1rem);
    }
  }
}

/* --------------------------------------------------------------- */
/*  footer */
/* --------------------------------------------------------------- */
.museum #footer {
  margin-top: 0;
}