@charset "utf-8";

/* =========================================
   Topics subhead（recruitと統一）
========================================= */

.subhead--topics{
  position: relative;
  background: #d6c9b2;          /* 指定 */
  padding: 88px 0 92px;          /* recruit と同じ */
}

.subhead--topics .subhead__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;               /* recruit と同じ */
  box-sizing: border-box;
}

.subhead--topics .subhead__band{
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 34px 20px 38px;       /* recruit と同じ */
  text-align: center;

  /* 中央が明るい左右グラデ（recruitと同じ） */
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.92) 18%,
    rgba(255,255,255,0.92) 82%,
    rgba(255,255,255,0) 100%
  );
}

.subhead--topics .subhead__eyecatch{
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #cf6b59;                /* 共通の差し色 */
}

.subhead--topics .subhead__title{
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b5a47;                /* 共通の見出し色 */
}

/* ---------------------------
   Responsive（recruitと同じ）
---------------------------- */
@media screen and (max-width: 980px){
  .subhead--topics{
    padding: 72px 0 78px;
  }
  .subhead--topics .subhead__band{
    padding: 30px 18px 34px;
  }
}

@media screen and (max-width: 767px){
  .subhead--topics{
    padding: 52px 0 56px;
  }
  .subhead--topics .subhead__inner{
    padding: 0 16px;
  }
  .subhead--topics .subhead__band{
    padding: 22px 14px 26px;
    box-sizing: border-box;
  }
  .subhead--topics .subhead__title{
    font-size: 36px;
  }
}


/* =========================================
   Topics single
========================================= */

.topics-single{
  background: #f4efe6;
  padding: 36px 0 40px;
}

.topics-single,
.topics-single *,
.topics-single *::before,
.topics-single *::after{
  box-sizing: border-box;
}

.topics-single__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

/* meta（上段：日付＋タグ） */
.topics-single__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(160, 138, 95, 0.55);
  margin-bottom: 16px;
}

.topics-single__date{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9b815f;
  white-space: nowrap;
}

.topics-single__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 記事タイトル */
.topics-single__title{
  margin: 0 0 22px;
  font-size: 40px;     /* 指定 */
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: #514a44;      /* 指定 */
  font-weight: 700;
}

/* 本文を白い角丸背景で覆う（デザインデータ寄せ） */
.topics-single__content{
  background: #fff;
  border-radius: 26px;
  padding: 34px 40px 38px;
  font-size: 22px;  /* 念のため維持 */
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: #000;
}

/* pに明示指定（外部CSSの上書きを確実にする） */
.topics-single__content p{
  margin: 0 0 22px;
  font-size: 22px;
  line-height: 1.9;
  color: #000;
}

/* 画像ブロックの余白をカード内で整える */
.topics-single__figure{
  margin: 18px 0 22px;
}

/* スマホ */
@media screen and (max-width: 767px){
  .topics-single__content{
    padding: 22px 20px 24px;
    font-size: 18px;
  }

  .topics-single__content p{
    font-size: 18px;
  }
}


.topics-single__dummy{
  width: 260px;
  aspect-ratio: 3 / 4;
  background: #cfcfcf;
  border-radius: 6px;
}

/* =========================================
   Back button area
========================================= */

.topics-back{
  background: #fff;
}

.topics-pager__grad{
  height: 60px; /* 指定 */
  background: linear-gradient(to bottom, #f4efe6 0%, #ffffff 100%);
}

.topics-back__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px 80px;
  display: flex;
  justify-content: center;
}

.topics-back__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(360px, 100%);
  height: 60px;               /* 指定 */
  border-radius: 999px;
  background: #a08a5f;        /* 先ほどと同じカラー */
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
}

.topics-back__btn:hover{
  opacity: 0.9;
}

/* ---------- responsive ---------- */
@media screen and (max-width: 767px){
  .topics-single{
    padding: 28px 0 34px;
  }

  .topics-single__inner{
    padding: 0 16px;
  }

  .topics-single__meta{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .topics-single__title{
    font-size: 30px;
  }

  .topics-single__content{
    font-size: 18px;
  }

  .topics-single__dummy{
    width: 60%;
    max-width: 280px;
  }

  .topics-back__inner{
    padding: 0 16px 64px;
  }
}