.parent_bg {
    background-color: var(--background_gray);
}

.header {
    background-color: var(--background_white1);
}

.media_header {
    position: relative;
    width: 100%;
}

.media_item {
  width: 86vw;
}
  
.media_img {
    width: 100%;
    height: auto;
    background-color: black;
    display: block;
}
  
.media_title {
    position: absolute;
    top: 50%;
    left: 13.02vw;
    transform: translateY(-50%);
    color: var(--background_white1);
    font-size: 3.12vw;
    font-weight: bold;
}

.media_page {
    padding: 3.65vw 0 0 6.77vw;
    color: var(--text_color2);
    font-size: 1.15vw;
    background-color: var(--background_gray);
}

.media_container {
  padding: 50px 0;
  background-color: var(--background_gray);
}


.media_img2 {
  width: 100%;
  
}

.media_btn {
  position: absolute;
  bottom: 3.08vw;
  right: 3.08vw;
  background-color: var(--text_color3);
  border-radius: 0.52vw;
  color: var(--background_white1);
  width: 16.38vw;
  height: 3.54vw;
  color: var(--background_white1);
  font-size: 1.3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.media_btn a {
  color: var(--background_white1);
  font-size: 1.3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.media_btn img {
    margin-right: 1.04vw;
    width: 1.77vw;
    height: 1.77vw;
}



.media_title2 {
    color: var(--text_color1);
    font-size: 2.08vw;
    font-weight: bold;
}

.media_date {
    margin-top: 0.52vw;
    color: var(--text_color2);
    font-size: 1.3vw;
    font-weight: bold;
}

.media_content {
    margin-top: 0.52vw;
    color: var(--text_color1);
    font-size: 1.56vw;
}


.single_media_item {
  padding: 4.17vw 15.62vw 10.42vw 15.62vw;
  background: #fff;
}

.single_media_item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.single_media_image {
  width: 100%;
  margin-top: 20px;
}

.single_media_img {
  width: 100%;
  height: auto;
}

.single_media_content {
  text-align: center;
  margin-bottom: 20px;
}

.single_media_title {
  font-size: 2em;
  margin-bottom: 10px;
}

.single_media_date {
  font-size: 1.2em;
  color: #777;
}

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

.back_to_list_btn a {
  font-size: 1.1em;
  color: #fff;
  background-color: #bd2b48; /* 指定された色 */
  text-decoration: none;
  padding: 12px 25px; /* ボタンの内側の余白 */
  border-radius: 5px;
  display: inline-block;
  text-align: center;
}

.back_to_list_btn a:hover {
  background-color: #a9203c; /* ホバー時に少し暗い色に変更 */
  color: #fff;
}

.back_to_list_btn a:active {
  background-color: #9d1e3c; /* クリック時の色 */
}