/* ==========================================================================
   10年のあゆみ
   記念ページのタイトル画像・年表メニュー・カード。
   編集案内: CSS編集ガイド.md
   PC用とスマートフォン用は、このファイル内で一緒に管理します。
   ========================================================================== */

/*--------------------------------------------------------------
## 10年のあゆみ
--------------------------------------------------------------*/
/******* 10年のあゆみ main-title *******/
.post-7514 .entry-header,
.parent-pageid-7514 .entry-header {
  background-color: #b43513 !important;
  position: relative; /* Ensure relative positioning for the pseudo-element */
  padding: 60px 0; /* Add padding to top and bottom */
  box-sizing: border-box; /* Include padding in height calculation */
}
.post-7514 .entry-header .entry-title::before,
.parent-pageid-7514 .entry-header .entry-title::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: calc(100% - 45px);
  background-image: url("../../../uploads/10th/maintitile-10th.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.post-7514 .entry-header .entry-title,
.parent-pageid-7514 .entry-header .entry-title {
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
@media (max-width: 770px) {
  .post-7514 .entry-header,
  .post-7616 .entry-header {
    padding: 40px 20px; /* Add horizontal padding to create space on both sides */
  }
  .post-7514 .entry-header::before,
  .post-7616 .entry-header::before {
    width: calc(
      100% - 40px
    ); /* Reduce width by 40px to account for horizontal padding */
    left: 20px; /* Center the image by positioning it 20px from the left */
  }
}
/******* 10年のあゆみ top-menu  *******/
.timeline {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 20px;
}
.timeline-item {
  width: 23.5%;
  margin: 0;
}
.timeline-item a {
  color: black !important;
  display: block;
  border: 1px solid #ccc;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  transition:
    background-color 0.5s,
    border-color 0.5s;
}
.timeline-item a:hover {
  background-color: #f0f0f0;
  border-color: #888;
}
@media (max-width: 770px) {
  .timeline {
    flex-direction: column;
    align-items: center;
  }
  .timeline-item {
    width: 80%;
    margin: 0 0 10px 0;
  }
}
/******* 10年のあゆみ midashi  *******/
h2.th10_midashi {
  padding: 10px 10px 10px 25px !important;
  border-style: none !important;
  background: none !important;
  font-size: 4.45rem !important;
  font-family:
    "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
  font-weight: bold !important;
  letter-spacing: -0.05em !important;
  border-left: 7px solid #ff0000 !important;
  border-bottom: 1px solid #cccccc !important;
}
h2.th10_midashi span {
  display: block;
  margin: 5px 0 0;
  font-size: 1.8rem !important;
  font-family:
    "Avenir", "Helvetica Nue", "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic",
    "ＭＳ Ｐゴシック", sans-serif !important;
  font-weight: normal !important;
  letter-spacing: 0em !important;
}
h3.th10_sub_midashi {
  padding: 10px;
  background-color: #ccc;
  border-style: none !important;
  text-align: center;
}
/******* top-list  *******/
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.container ul {
  list-style: none;
  padding: 0;
}
.container li {
  background-size: cover;
  background-position: center;
  margin: 0px;
  color: white;
  margin-bottom: 65px;
  position: relative;
  transition: transform 0.3s;
}
@media only screen and (max-width: 770px) {
  .container li {
    background-position: 70% 0%;
  }
}
@media only screen and (max-width: 770px) {
  .container li {
    margin-bottom: 45px;
  }
}
.container li:hover {
  transform: scale(1.02);
}
.container li a {
  display: block;
  padding: 40px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
@media only screen and (max-width: 770px) {
  .container li a {
    padding: 10px;
  }
}
.box-content {
  color: black;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-left: 5px solid #ff0000;
  max-width: 300px;
}
@media only screen and (max-width: 770px) {
  .box-content {
    padding: 5px;
  }
}
@media only screen and (max-width: 655px) {
  .box-content {
    max-width: 100%;
  }
}
.box-content h2 {
  margin: 0 !important;
  padding: 0px;
  font-size: 3.2rem !important;
  border-style: none !important;
  background: none !important;
  font-family:
    "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
  font-weight: bold !important;
  letter-spacing: -0.05em !important;
}
.box-content h2 span {
  display: block;
  margin: 5px 0 0;
  font-size: 1.8rem !important;
  font-family:
    "Avenir", "Helvetica Nue", "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic",
    "ＭＳ Ｐゴシック", sans-serif !important;
  font-weight: normal !important;
  letter-spacing: 0em !important;
}
.box-content p {
  display: block;
  margin: 20px 0 0;
  padding: 0.25em;
  font-size: 1.4rem !important;
  text-align: right;
}
@media only screen and (max-width: 770px) {
  .box-content p {
    margin: 0;
  }
}
.box-content p::after {
  content: " \003e"; /* Unicode character for '>' */
  color: #d32f2f;
  font-size: 120%;
}