@charset "UTF-8";
.contents-view {
  background-image: url(../img/page-case.webp);
}

.hover-box {
  display: flex;
  width: 24%;
  height: 170px;
  background-color: #fdf3da;
  margin-bottom: 10px;
  margin-right: 10px;
  overflow: hidden;
  cursor: pointer;
  font-weight: bold;
  transition:.5s;
  align-items: center;
  justify-content: center;
  color: #000000;
}
.hover-box:hover{
  background-color:#fff;
  color:#a44234;
  transition:0.5s;
}

.heading-with-description {
  position: relative;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  transition: transform 0.3s ease;
  width: 88%;
}

/* 擬似要素（説明書き） */
.heading-with-description::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 50%; /* 中央寄せ */
  transform: translate(-50%, 20px); /* 下＋中央位置 */
  opacity: 0;
  font-size: 16px;
  font-weight: normal;
  transition: all 0.4s ease;
  white-space: pre-wrap;
  padding-top: 10px;
  text-align: center; /* ←中央寄せ */
  width: 100%; /* 必要に応じて調整 */
  color:#73655e;
}
/* hover時に上にずれる */
.hover-box:hover .heading-with-description {
  transform: translateY(-110%);
}

/* hover時に説明文が下からスライドして表示 */

.hover-box:hover .heading-with-description::after {
  transform: translate(-50%, 0);
  opacity: 1;
}
.heading-with-description::after {
  white-space: pre-wrap; /* ← これで \A を改行として認識する */
}

.case-container {
    display: flex;
    flex-wrap: wrap;
}
@media screen and (max-width: 1200px) {
  .hover-box {
    width: 100%;
    height: 150px;
    margin-right: 0;
  }
  .heading-with-description::after {
      opacity: 1 !important;
      transform: translate(0%, 0) !important;
      position: static;
      display: block;
  }

  .hover-box:hover .heading-with-description {
    transform: none;
  }

  .hover-box:hover .heading-with-description::after {
    transform: none;
  }
}
@media screen and (max-width: 600px) {
  .heading-with-description::after {
    margin-top: 0;
  }
  .heading-with-description {
    width: 96%;
  }
}