@charset "utf-8";

/* ============================================================
   TOPページ 追加セクション
   既存の main.css のトンマナ（手帖・淡いピンク／アイボリー）に合わせる。
   年齢層が高いメディアのため、本文は18px以上を基準にする。
   ============================================================ */

/*===== # 横スクロールの抑止 =====*/
/* header は position:fixed かつ幅指定が無いため縮小幅で決まるが、
   ロゴに width:40% を指定していると割合が解決できず、
   画像の元サイズ360px＋余白40px＝400pxが下限として使われていた。
   その結果 iPhone(390px)では10pxの横スクロールが発生していた。
   実効値と同じ160pxを直接指定して解消する（見た目は変わらない）。 */
@media screen and (max-width: 768px) {
  .cw-top header img {
    width: 160px;
  }

  /* 見出しの筆記体装飾（h2::before）は right:-10px で外側に出るため、
     見出しが画面幅いっぱいになると10pxはみ出して横スクロールが出ていた。
     装飾を隠さずに済むよう見出し側を詰める。 */
  /* 見出しは中央寄せなので、装飾の10pxを左右それぞれに確保する */
  .cw-top h2 {
    max-width: calc(100% - 28px);
  }

  /* イベント欄の写真は height:10em / width:auto のため、
     横長写真だと幅が355pxほどになりグリッド列の最小幅を押し広げていた。
     縦横比を保ったまま枠内に収める。 */
  section#event .event__schedule {
    grid-template-columns: minmax(0, 1fr);
  }

  section#event .event__schedule img {
    height: auto;
    max-height: 10em;
    max-width: 100%;
  }
}

/*===== # 終活でやること（全幅カルーセル） =====*/
section#flow {
  overflow: hidden;   /* カルーセルが画面外へ出た分を隠す */
  padding-block: 80px 100px;
}

section#flow .content {
  margin-inline: auto;
  max-width: 1120px;
  padding-inline: 24px;
}

section#flow .message {
  font-size: var(--font-size_1);
  line-height: 2.1;
  margin-bottom: 8px;
}

/*----- カルーセルの外枠 -----*/
.flow__carousel {
  position: relative;
  width: 100%;
}

.flow__viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  /* スナップ位置を左の余白ぶんずらす。これが無いと先頭カードが
     画面の左端まで吸い寄せられ、コンテンツ幅と揃わない。 */
  scroll-padding-left: max(24px, calc(50% - 536px));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* タブと影が切れないよう上下に余白を取る */
  padding-block: 46px 8px;
}

.flow__viewport::-webkit-scrollbar {
  display: none;
}

.flow__list {
  /* 項目数がカードごとに違うため、高さを揃えると
     項目の少ないカードの下に大きな空白ができる。内容に合わせる。 */
  align-items: start;
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  /* 左端をコンテンツ幅に合わせ、右端はスクロールできるよう余白を残す */
  padding: 0 24px 0 max(24px, calc(50% - 536px));
  text-align: left;
}

.flow__item {
  background: var(--color_white);
  border-radius: 4px 4px 14px 14px;
  box-shadow: 0 3px 14px rgba(66, 58, 50, 0.08);
  display: flex;
  flex: 0 0 344px;
  flex-direction: column;
  padding: 34px 24px 26px;
  position: relative;
  scroll-snap-align: start;
  transition: box-shadow 0.25s, transform 0.25s;
}

/* 紙の上端。手帖のページらしく細い色帯を入れる */
.flow__item::before {
  background: linear-gradient(90deg, var(--color_coral), #f6c3ce);
  border-radius: 4px 4px 0 0;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.flow__item:hover {
  box-shadow: 0 10px 26px rgba(66, 58, 50, 0.16);
  transform: translateY(-4px);
}

/* 次の段階へ続く点線 */
.flow__item::after {
  border-top: 3px dotted #eda9b7;
  content: "";
  left: 100%;
  position: absolute;
  top: 0;
  width: 24px;
}

/* ループするため、最後のカードにも次へ続く点線を残す */
.flow__item.is-clone:last-child::after {
  content: none;
}

/* 手帖のインデックスタブに見立てた番号 */
.flow__number {
  align-items: baseline;
  background: var(--color_coral);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(198, 116, 133, 0.35);
  color: var(--color_white);
  display: inline-flex;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 21px;
  font-weight: 800;
  gap: 7px;
  left: 20px;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 11px 18px 12px;
  position: absolute;
  top: -21px;
}

.flow__number small {
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.85;
}

/* 各段階を表すアイコン */
.flow__icon {
  align-items: center;
  background: var(--color_pink);
  border-radius: 50%;
  color: var(--color_coral);
  display: flex;
  font-size: 22px;
  height: 54px;
  justify-content: center;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 54px;
}

/* サイト全体のリセットで overflow-wrap: anywhere が当たっているため戻す */
.flow__title,
.flow__lead,
.flow__items li,
section#flow .message {
  overflow-wrap: normal;
  word-break: normal;
}

.flow__title {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin: 22px 0 10px;
  padding-bottom: 12px;
  padding-right: 58px;
  position: relative;
}

.flow__title::after {
  background: var(--color_coral);
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 32px;
}

.flow__lead {
  color: var(--color_pale);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 18px;
}

.flow__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow__items li {
  font-size: 18px;
  letter-spacing: 0.01em;
  line-height: 1.6;
  padding: 8px 0 8px 22px;
  position: relative;
}

.flow__items li:not(:last-child) {
  border-bottom: 1px dashed #ece4d8;
}

.flow__items li::before {
  background: var(--color_coral);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 5px;
  position: absolute;
  top: 16px;
  width: 7px;
}

/* カード内で唯一の濃色になり浮いていたため、サイトのコーラルに揃える */
.flow__link {
  align-self: flex-start;
  border-bottom: 1px solid currentColor;
  color: var(--color_coral);
  font-size: 17px;
  margin-top: 18px;
}

.flow__link::after {
  content: "›";
  margin-left: 6px;
}

.flow__link:hover {
  opacity: 0.7;
}

/*----- 前後ボタン -----*/
/* 全幅カルーセルは右側でカードが画面外へ続くため、
   矢印を左右に置くと右だけカードに重なって非対称に見える。
   コンテンツ幅の右端に揃えて2つ並べる。 */
.flow__controls {
  display: flex;
  justify-content: flex-end;
  margin-inline: auto;
  max-width: 1120px;
  padding-inline: 24px;
}

.flow__nav-group {
  display: flex;
  gap: 12px;
}

.flow__nav {
  align-items: center;
  background: var(--color_white);
  border: 1px solid #f0cdd5;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(66, 58, 50, 0.12);
  color: var(--color_coral);
  cursor: pointer;
  display: flex;
  height: 54px;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
  width: 54px;
}

.flow__nav:hover {
  background: var(--color_yellow);
  border-color: var(--color_coral);
}

/* 矢印はCSSで描く。「‹」「›」の記号文字は字形の中心と
   文字幅の中心がずれるため、円の中央に見えない。 */
.flow__nav::before {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  content: "";
  display: block;
  height: 13px;
  width: 13px;
}

/* 山形は回転後の重心が枠の中心とずれるので、実測ぶんだけ戻す */
.flow__nav--next::before {
  transform: translate(-3px, -1.6px) rotate(45deg);
}

.flow__nav--prev::before {
  transform: translate(3.8px, -1.6px) rotate(-135deg);
}

/*----- スクロールの進捗バー -----*/
.flow__progress {
  background: #f5dde3;
  border-radius: 999px;
  height: 6px;
  margin: 16px auto 0;
  max-width: 320px;
  overflow: hidden;
  width: 60%;
}

.flow__progress span {
  background: var(--color_coral);
  border-radius: 999px;
  display: block;
  height: 100%;
  transition: transform 0.15s linear;
  transform-origin: left center;
  width: 100%;
}

@media screen and (max-width: 1023px) {
  .flow__viewport {
    scroll-padding-left: 24px;
  }

  .flow__list {
    padding-left: 24px;
  }

  .flow__controls {
    padding-inline: 24px;
  }
}

@media screen and (max-width: 767px) {
  section#flow {
    padding-block: 56px 72px;
  }

  section#flow .message {
    font-size: 18px;
    letter-spacing: 0.02em;
    text-align: left;
  }

  /* PC向けの改行位置はSPでは長すぎるため無効にする */
  .flow__br {
    display: none;
  }

  .flow__viewport {
    scroll-padding-left: 20px;
  }

  .flow__list {
    gap: 18px;
    padding-inline: 20px;
  }

  /* 次のカードが少し見えるようにして、横に送れることを伝える */
  .flow__item {
    flex: 0 0 min(84vw, 330px);
    padding: 30px 22px 24px;
  }

  .flow__item::after {
    width: 18px;
  }

  /* 指で送る前提なので矢印は出さず、進捗バーだけ残す */
  .flow__controls {
    display: none;
  }

  .flow__progress {
    max-width: 240px;
    width: 50%;
  }
}

/* ============================================================
   記事セクション（メディアらしい一覧レイアウト）
   既存の .blog__* は使わず .post-* で新規に組む。
   手帖モチーフに合わせ、カードはアイボリーの「紙」として扱う。
   ============================================================ */

section#blog .content {
  max-width: 1120px;
  padding-inline: 24px;
}

/* 既定の 50px 一律の余白ではブロックの区切りが伝わらないので、
   .post-block 側で間隔を持たせる。ボタン直前だけは余白を残す。 */
section#blog div.content > *:not(:last-child) {
  margin-bottom: 0;
}

section#blog div.content > .post-block {
  margin-bottom: 64px;
}

section#blog div.content > .message {
  margin-bottom: 48px;
}

.post-block {
  margin-bottom: 64px;
  text-align: left;
}

.post-block__heading {
  align-items: center;
  display: flex;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 24px;
  font-weight: 800;
  gap: 14px;
  letter-spacing: 0.06em;
  margin: 0 0 24px;
}

/* 見出しの右端に置く「一覧を見る」。罫線に埋もれないよう地色で抜く */
.post-block__more {
  color: var(--color_coral);
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  order: 3;
  white-space: nowrap;
}

.post-block__more::after {
  content: "›";
  margin-left: 6px;
}

.post-block__more:hover {
  opacity: 0.75;
}

.post-block__heading::after {
  background: var(--color_coral);
  content: "";
  flex: 1 1 auto;
  height: 2px;
  opacity: 0.45;
}

/*----- カード共通 -----*/
.post-card {
  background: var(--color_white);
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(66, 58, 50, 0.08);
  color: var(--color_charcoal);
  display: flex;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}

.post-card:hover {
  box-shadow: 0 8px 24px rgba(66, 58, 50, 0.16);
  transform: translateY(-3px);
}

.post-card__thumb {
  background: var(--color_ivory);
  margin: 0;
  overflow: hidden;
}

.post-card__thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
}

.post-card__meta {
  align-items: center;
  color: var(--color_pale);
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  gap: 8px;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 12px;
}

.post-card__tag {
  background: var(--color_ivory);
  border: 1px solid #e5ded0;
  border-radius: 4px;
  color: #7b7263;
  font-size: 14px;
  padding: 5px 10px;
}

.post-card__tag--feature {
  background: #fff4d6;
  border-color: #f0dda6;
  color: #8a6d1f;
}

.post-card__tag--pr {
  background: #c2762f;
  border-color: #c2762f;
  color: #fff;
  font-weight: 700;
}

.post-card__title {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin: 0 0 10px;
  overflow-wrap: normal;
  word-break: normal;
}

.post-card__snippet {
  color: #6d655a;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 14px;
  overflow-wrap: normal;
  word-break: normal;
}

.post-card__more {
  color: var(--color_coral);
  font-size: 16px;
  margin-top: auto;
}

.post-card__more::after {
  content: " ›";
}

/* 対談記事の主役カードに添える対談者
   誰が話しているのかを、記事を開く前に分かるようにする。
   margin-top:auto は .post-card__more が持っているため、
   こちらは続けて並ぶだけでよい。 */
.post-card__talkers {
  border-top: 1px dashed #e3d9c8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 14px;
  padding-top: 14px;
}

.post-card__talker {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-card__talker-name {
  color: #3c352c;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.post-card__talker-kana {
  font-size: 14px;
  font-weight: 400;
}

.post-card__talker-title {
  color: #7b7263;
  font-size: 14px;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .post-card__talkers {
    gap: 10px 18px;
  }
}

/* サムネイルは全て 16:9 のバナー画像（文字入り）なので、
   枠の比率を 16:9 に固定して切り抜きが起きないようにする。 */
.post-card__thumb {
  aspect-ratio: 16 / 9;
}

/* 行の高さが揃うよう、見出しと抜粋の行数を抑える */
.post-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.post-card__snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/*----- 主役の1本 -----*/
.post-card--hero {
  align-items: center;
  flex-direction: row;
}

.post-card--hero .post-card__thumb {
  align-self: center;
  flex: 0 0 50%;
}

.post-card--hero .post-card__body {
  flex: 1 1 auto;
  justify-content: center;
  padding: 34px 36px;
}

.post-card--hero .post-card__title {
  font-size: 27px;
  line-height: 1.55;
  margin-bottom: 14px;
}

.post-card--hero .post-card__snippet {
  font-size: 17px;
}

/*----- 一覧 -----*/
.post-list {
  display: grid;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-list > li {
  display: flex;
  min-width: 0;
}

.post-list > li > .post-card {
  flex: 1 1 auto;
  flex-direction: column;
}

.post-list--grid {
  grid-template-columns: repeat(3, 1fr);
}

.post-list--grid .post-card__thumb {
  aspect-ratio: 16 / 9;
}

/* 特集の2本目以降は主役の下に横並びで小さく */
.post-list--sub {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
}

.post-list--sub > li > .post-card {
  flex-direction: row;
}

.post-list--sub > li > .post-card {
  align-items: center;
}

.post-list--sub .post-card__thumb {
  align-self: center;
  flex: 0 0 42%;
}

.post-list--sub .post-card__body {
  padding: 16px 18px;
}

.post-list--sub .post-card__title {
  font-size: 17px;
  margin-bottom: 0;
}

/*----- カテゴリー -----*/
/* 手帖のインデックス見出しに見立てる。上端に色帯、アイコンで内容を示す。 */
.post-cats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-cats a {
  align-items: center;
  background: var(--color_white);
  border-radius: 3px 3px 10px 10px;
  box-shadow: 0 3px 12px rgba(66, 58, 50, 0.09);
  color: var(--color_charcoal);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 148px;
  overflow: hidden;
  padding: 26px 10px 22px;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}

.post-cats a::before {
  background: linear-gradient(90deg, var(--color_coral), #f6c3ce);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.post-cats a:hover {
  box-shadow: 0 10px 24px rgba(66, 58, 50, 0.16);
  transform: translateY(-4px);
}

.post-cats__icon {
  align-items: center;
  background: var(--color_pink);
  border-radius: 50%;
  color: var(--color_coral);
  display: flex;
  font-size: 22px;
  height: 56px;
  justify-content: center;
  transition: background 0.25s, color 0.25s;
  width: 56px;
}

.post-cats a:hover .post-cats__icon {
  background: var(--color_coral);
  color: var(--color_white);
}

.post-cats__name {
  font-size: 19px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.post-cats__count {
  color: var(--color_pale);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/*----- タブレット -----*/
@media screen and (max-width: 1023px) {
  .post-list--grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-cats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*----- スマートフォン -----*/
@media screen and (max-width: 767px) {
  section#blog .content {
    padding-inline: 20px;
  }

  .post-block {
    margin-bottom: 48px;
  }

  .post-block__heading {
    font-size: 21px;
    margin-bottom: 18px;
  }

  /* 主役も縦積みにして写真を大きく見せる */
  .post-card--hero {
    flex-direction: column;
  }

  .post-card--hero .post-card__thumb {
    aspect-ratio: 16 / 9;
    flex: none;
  }

  .post-card--hero .post-card__body {
    padding: 22px 20px 24px;
  }

  .post-card--hero .post-card__title {
    font-size: 22px;
  }

  .post-list--grid,
  .post-list--sub {
    grid-template-columns: 1fr;
  }

  .post-list {
    gap: 18px;
  }

  .post-card__title {
    font-size: 19px;
  }

  .post-cats {
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
  }

  .post-cats a {
    min-height: 132px;
    padding: 22px 8px 18px;
  }

  .post-cats__icon {
    font-size: 20px;
    height: 50px;
    width: 50px;
  }
}

/* ------------------------------------------------------------
   イベント欄
   写真の高さで枠の高さが決まるため、掲載イベントが少ないと
   罫線だけの空行が大きく残っていた。写真を上寄せ・高さ上限つきにして
   枠の高さを内容に合わせる。
   ------------------------------------------------------------ */
section#event .event__schedule {
  grid-template-rows: auto auto;
}

section#event .event__schedule img {
  align-self: start;
  max-height: 220px;
  object-fit: cover;
  width: 100%;
}

section#event .event__schedule ul {
  align-self: start;
}

/* ------------------------------------------------------------
   特集カルーセルの前後ボタン
   「◀」「▶」の記号文字を使っていたため、字形の中心がずれて
   見た目が揃わなかった。CSSで描いた山形に置き換える。
   ------------------------------------------------------------ */
#feature button.nav {
  align-items: center;
  background: var(--color_white);
  border: 1px solid #f0cdd5;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(66, 58, 50, 0.14);
  color: var(--color_coral);
  cursor: pointer;
  display: flex;
  height: 54px;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
  width: 54px;
}

#feature button.nav:hover {
  background: var(--color_yellow);
  border-color: var(--color_coral);
}

#feature button.nav::before {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  content: "";
  display: block;
  height: 13px;
  width: 13px;
}

#feature button.nav.next::before {
  transform: translate(-3px, -1.6px) rotate(45deg);
}

#feature button.nav.prev::before {
  transform: translate(3.8px, -1.6px) rotate(-135deg);
}

#feature .prev { left: 24px; }
#feature .next { right: 24px; }

@media screen and (max-width: 767px) {
  #feature button.nav {
    height: 44px;
    width: 44px;
  }

  #feature button.nav::before {
    height: 11px;
    width: 11px;
  }

  #feature .prev { left: 10px; }
  #feature .next { right: 10px; }
}

/* ------------------------------------------------------------
   イベント一覧
   罫線ノート風の枠は、掲載が1件だと空行だけが残って寂しくなる。
   1件ずつを日付バッジ付きのカードにして、件数が変わっても
   間延びしないようにする。
   ------------------------------------------------------------ */
.event-list {
  margin-inline: auto;
  max-width: 1000px;
  text-align: left;
}

.event-list__items {
  display: grid;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 写真列と本文列の2カラム。申し込みボタンはリンクの外にあるので、
   カード側でも同じ列定義を持たせて右列に揃える。 */
.event-card {
  background: var(--color_white);
  border-radius: 4px 12px 12px 4px;
  box-shadow: 0 3px 14px rgba(66, 58, 50, 0.09);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.25s, transform 0.25s;
}

.event-card::before {
  background: linear-gradient(180deg, var(--color_coral), #f6c3ce);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 6px;
  z-index: 1;
}

.event-card:hover {
  box-shadow: 0 10px 26px rgba(66, 58, 50, 0.16);
  transform: translateY(-3px);
}

.event-card .event-card__link {
  color: var(--color_charcoal);
  display: grid;
  gap: 0 26px;
  grid-column: 1 / 3;
  grid-template-columns: 220px minmax(0, 1fr);
}

/*----- アイキャッチ -----*/
/* イベントのアイキャッチは日時・会場が刷り込まれた縦長のチラシが多い。
   cover で切り抜くと肝心の情報が欠けるため、正方形の枠に contain で
   全面を収める。写真のイベントは上下に余白が出るが、欠けるよりよい。 */
/* 写真の高さでカードの背が決まると本文が短いときに間延びするため、
   写真はカード左端に絶対配置して、高さを本文側に合わせる。 */
.event-card__thumb {
  background: var(--color_ivory);
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 14px;
  position: absolute;
  top: 0;
  width: 220px;
}

.event-card__img {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}



/*----- 日付バッジ -----*/
/* 写真に重ねるとチラシの文字を隠すため、本文の先頭に横向きで置く */
.event-card__date {
  align-items: baseline;
  color: var(--color_coral);
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.event-card__month {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.event-card__month small {
  font-size: 14px;
  margin-left: 1px;
}

.event-card__day {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.event-card__week {
  color: var(--color_pale);
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
}

/*----- 本文 -----*/
/* 写真を絶対配置にしたぶん、本文はグリッド上で右列を明示する。
   指定しないと写真の下（左列）に潜り込んで見えなくなる。 */
.event-card__body {
  align-self: center;
  grid-column: 2;
  min-width: 0;
  padding: 26px 24px 26px 0;
}

.event-card__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.event-card__area,
.event-card__time {
  background: var(--color_ivory);
  border: 1px solid #e5ded0;
  border-radius: 4px;
  color: #7b7263;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 6px 10px;
}

.event-card__title {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.event-card__place {
  color: var(--color_pale);
  font-size: 15px;
  line-height: 1.6;
  margin: 6px 0 0;
  overflow-wrap: normal;
  word-break: normal;
}

.event-card__more {
  color: var(--color_coral);
  font-size: 16px;
  white-space: nowrap;
}

.event-card__more::after {
  content: " ›";
}

.event-list__empty {
  background: var(--color_white);
  border-radius: 12px;
  font-size: 18px;
  line-height: 2;
  padding: 48px 24px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .event-card a {
    gap: 8px 16px;
    grid-template-columns: auto 1fr;
    padding: 20px 20px 20px 0;
  }

  .event-card__date {
    margin-left: 20px;
    min-width: 76px;
  }

  .event-card__day {
    font-size: 32px;
  }

  .event-card__title {
    font-size: 19px;
  }

  /* 「詳細を見る」は日付バッジの下ではなく本文列の末尾に置く */
  .event-card__more {
    grid-column: 2;
    justify-self: start;
  }
}

/* ------------------------------------------------------------
   特集記事のサムネイルに余白を持たせる
   カードの縁に写真が接していたため、手帖に写真を貼ったように
   内側へ引き込む。本文側の余白は二重にならないよう詰める。
   ------------------------------------------------------------ */
.post-card--hero {
  padding: 22px;
}

.post-card--hero .post-card__thumb {
  border-radius: 8px;
  flex: 0 0 46%;
}

.post-card--hero .post-card__body {
  padding: 10px 12px 10px 32px;
}

.post-list--sub > li > .post-card {
  padding: 16px;
}

.post-list--sub .post-card__thumb {
  border-radius: 6px;
}

.post-list--sub .post-card__body {
  padding: 4px 6px 4px 20px;
}

@media screen and (max-width: 767px) {
  .post-card--hero {
    padding: 16px;
  }

  .post-card--hero .post-card__body {
    padding: 18px 6px 4px;
  }

  .post-list--sub > li > .post-card {
    padding: 14px;
  }

  .post-list--sub .post-card__body {
    padding: 4px 4px 4px 16px;
  }
}

/* ------------------------------------------------------------
   メンバー紹介
   自動で流れる帯（マーキー）だったため、名前や肩書きを読み切る前に
   流れてしまい、端では見切れていた。静的なグリッドに置き換える。
   ------------------------------------------------------------ */
section#member .member-grid {
  margin-inline: auto;
  max-width: 1120px;
  padding-inline: 24px;
}

section#member .member-grid__items {
  display: grid;
  gap: 32px 24px;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

section#member .member-grid__item a {
  color: var(--color_charcoal);
  display: block;
  text-align: center;
}

section#member .member-grid__photo {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  margin: 0 0 14px;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}

section#member .member-grid__item a:hover .member-grid__photo {
  box-shadow: 0 10px 24px rgba(66, 58, 50, 0.18);
  transform: translateY(-4px);
}

section#member .member-grid__img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

section#member .member-grid__name {
  font-size: 21px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin: 0 0 6px;
}

section#member .member-grid__role {
  color: #6d655a;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}

section#member .member-grid__area {
  color: var(--color_pale);
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 0;
}

section#member .member-grid__area .fa {
  margin-right: 5px;
}

@media screen and (max-width: 1023px) {
  section#member .member-grid__items {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 767px) {
  section#member .member-grid {
    padding-inline: 20px;
  }

  section#member .member-grid__items {
    gap: 26px 16px;
    grid-template-columns: repeat(2, 1fr);
  }

  section#member .member-grid__name {
    font-size: 19px;
  }

  section#member .member-grid__role {
    font-size: 14px;
  }
}

/* 旧マーキー用の指定（section#member ul / li）を明示的に打ち消す */
section#member .member-grid__items {
  align-items: initial;
  flex-direction: initial;
  justify-content: initial;
  margin-left: auto;
  width: auto;
}

section#member .member-grid__item {
  margin-right: 0;
  width: auto;
}

section#member .member-grid__photo .member-grid__img {
  border-radius: 0;
  height: 100%;
}

/* 旧マーキーのアニメーション（animation.css の #member ul）を打ち消す。
   これが残っているとグリッド全体が左へスライドし、1列目が画面外へ出る。 */
section#member .member-grid__items {
  animation: none;
  transform: none;
}

/* ------------------------------------------------------------
   特集カルーセルのキャプション
   画像のみで何の記事か分からなかったため、見出しと日付を添える。
   ------------------------------------------------------------ */
#feature .carousel-track li a {
  color: var(--color_charcoal);
  display: block;
}

#feature .feature__caption {
  display: block;
  padding: 16px 6px 4px;
  text-align: left;
}

#feature .feature__tag {
  background: #fff4d6;
  border: 1px solid #f0dda6;
  border-radius: 4px;
  color: #8a6d1f;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  margin-right: 10px;
  padding: 5px 10px;
  vertical-align: middle;
}

#feature .feature__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 20px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin-top: 10px;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
}

#feature .feature__date {
  color: var(--color_pale);
  display: block;
  font-size: 15px;
  margin-top: 8px;
}

@media screen and (max-width: 767px) {
  #feature .feature__caption {
    padding: 12px 4px 4px;
  }

  #feature .feature__title {
    font-size: 17px;
  }

  #feature .feature__tag,
  #feature .feature__date {
    font-size: 13px;
  }
}

/* ------------------------------------------------------------
   SP用の検索帯
   ヒーロー内の検索窓はSPで display:none になっており、
   メディアなのに検索できない状態だった。ヒーロー直後に置く。
   ------------------------------------------------------------ */
section#search-band {
  display: none;
}

section#search-band .content {
  margin-inline: auto;
  max-width: 640px;
  padding-inline: 20px;
}

.search-band__label {
  display: block;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.search-band__control {
  align-items: center;
  background: var(--color_white);
  border: 1px solid #e3d8c8;
  border-radius: 9999px;
  display: flex;
  overflow: hidden;
}

.search-band__input {
  background: transparent;
  border: none;
  flex: 1 1 auto;
  font-size: 17px;
  min-width: 0;
  padding: 15px 8px 15px 22px;
}

.search-band__input:focus {
  outline: none;
}

.search-band__submit {
  background: var(--color_coral);
  border: none;
  color: var(--color_white);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 18px;
  height: 52px;
  width: 56px;
}

@media screen and (max-width: 768px) {
  section#search-band {
    display: block;
    padding-block: 36px 8px;
  }
}

/* ------------------------------------------------------------
   お悩み別 相談窓口のバナー
   3枚が別々の制作物で意匠が揃わないため、枠の側で統一感を作る。
   ------------------------------------------------------------ */
#reception .reception__banner li a {
  background: var(--color_white);
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(66, 58, 50, 0.1);
  display: block;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}

#reception .reception__banner li a:hover {
  box-shadow: 0 10px 26px rgba(66, 58, 50, 0.18);
  transform: translateY(-4px);
}

#reception .reception__banner img {
  display: block;
  height: auto;
  width: 100%;
}

#reception .reception__banner {
  align-items: start;
}

/* ------------------------------------------------------------
   先生コラム
   専門家による記事であることが視覚的に伝わるよう、
   本文カードの下に執筆者の顔写真と肩書きを常に添える。
   ------------------------------------------------------------ */
section#member-column .content {
  margin-inline: auto;
  max-width: 1120px;
  padding-inline: 24px;
}

section#member-column .message {
  font-size: var(--font-size_1);
  line-height: 2;
  margin-bottom: 40px;
}

.column-list {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  text-align: left;
}

.column-list > li {
  display: flex;
}

.column-card {
  background: var(--color_white);
  border-radius: 4px 4px 12px 12px;
  box-shadow: 0 3px 14px rgba(66, 58, 50, 0.09);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.25s, transform 0.25s;
}

.column-card::before {
  background: linear-gradient(90deg, var(--color_coral), #f6c3ce);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.column-card:hover {
  box-shadow: 0 10px 26px rgba(66, 58, 50, 0.16);
  transform: translateY(-4px);
}

.column-card__main {
  color: var(--color_charcoal);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 26px 24px 20px;
}

.column-card__meta {
  color: var(--color_pale);
  font-size: 15px;
  line-height: 1;
  margin: 0 0 12px;
}

.column-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin: 0 0 12px;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
}

.column-card__snippet {
  color: #6d655a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 14px;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
}

.column-card__more {
  color: var(--color_coral);
  font-size: 16px;
  margin-top: auto;
}

.column-card__more::after {
  content: " ›";
}

/*----- 執筆者 -----*/
.column-card__author {
  align-items: center;
  background: var(--color_ivory);
  border-top: 1px dashed #e6ddcd;
  display: grid;
  gap: 4px 14px;
  grid-template-columns: 56px 1fr;
  padding: 16px 24px 18px;
}

.column-card__photo {
  border-radius: 50%;
  grid-row: span 2;
  height: 56px;
  margin: 0;
  overflow: hidden;
  width: 56px;
}

.column-card__img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.column-card__label {
  color: var(--color_pale);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 5px;
}

.column-card__name {
  font-size: 17px;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin: 0;
}

.column-card__role {
  color: #6d655a;
  font-size: 13px;
  grid-column: 2;
  line-height: 1.5;
  margin: 3px 0 0;
}

.column-card__link {
  color: var(--color_coral);
  font-size: 13px;
  grid-column: 2;
  margin-top: 6px;
}

@media screen and (max-width: 1023px) {
  .column-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  section#member-column .content {
    padding-inline: 20px;
  }

  .column-list {
    grid-template-columns: 1fr;
  }

  .column-card__title {
    font-size: 19px;
  }
}

/* ------------------------------------------------------------
   PR記事
   通常記事と混ざらないよう枠で囲い、広告であることを明示する。
   トンマナには馴染ませつつ、地色を変えて存在感を出す。
   ------------------------------------------------------------ */
section#pr .content {
  margin-inline: auto;
  max-width: 1120px;
  padding-inline: 24px;
}

.pr-block {
  background: linear-gradient(180deg, #fdf6ec, #fdfaf3);
  border: 1px solid #efe2cc;
  border-radius: 14px;
  padding: 36px 32px 34px;
  position: relative;
  text-align: left;
}

.pr-block__label {
  background: #c2762f;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0 0 14px;
  padding: 7px 12px;
}

.pr-block__heading {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}

.pr-block__lead {
  color: #6d655a;
  font-size: 17px;
  line-height: 1.9;
  margin: 0 0 26px;
}

/* TOPは3件までなので、4件目以降へ辿るための導線を末尾に置く。
   .pr-block は text-align:left のため、ボタンだけ中央に戻す。 */
.pr-block__more {
  margin: 26px auto 0;
}

/* 掲載件数が少ないときに右側が大きく空かないよう、件数に追従させる */
.pr-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 1件だけのときは横型にして幅いっぱいを使う */
.pr-list > li:only-child > .post-card {
  align-items: center;
  flex-direction: row;
}

.pr-list > li:only-child .post-card__thumb {
  flex: 0 0 44%;
}

.pr-list > li:only-child .post-card__body {
  padding: 26px 30px;
}

.pr-list > li:only-child .post-card__title {
  font-size: 22px;
}

.pr-list > li {
  display: flex;
  min-width: 0;
}

.pr-list > li > .post-card {
  flex: 1 1 auto;
  flex-direction: column;
}

.pr-list .post-card__thumb {
  aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------
   広告枠
   PR記事とは別に、出稿企業のページへ直接飛ばすバナー。
   広告であることが分かるようラベルを必ず添える。
   ------------------------------------------------------------ */
section#ad-article,
section#ad-footer {
  padding-block: 0;
}

section#ad-article .content,
section#ad-footer .content {
  margin-inline: auto;
  max-width: 1120px;
  padding-inline: 24px;
}

.ad-slot {
  margin-block: 48px;
  text-align: left;
}

.ad-slot__items {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 記事の直後は視認性を優先して1枚ずつ大きく出す */
.ad-slot--article .ad-slot__items {
  grid-template-columns: 1fr;
}

/* ページ下部は面積を取りすぎないよう2枚並べ */
.ad-slot--footer .ad-slot__items {
  grid-template-columns: repeat(2, 1fr);
}

.ad-slot__items a {
  border-radius: 10px;
  display: block;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}

.ad-slot__items a:hover {
  box-shadow: 0 8px 22px rgba(66, 58, 50, 0.16);
  transform: translateY(-3px);
}

.ad-slot__items img {
  display: block;
  height: auto;
  width: 100%;
}

@media screen and (max-width: 1023px) {
  .pr-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  section#pr .content {
    padding-inline: 20px;
  }

  .pr-block {
    padding: 28px 20px 26px;
  }

  .pr-block__heading {
    font-size: 22px;
  }

  .pr-list {
    grid-template-columns: 1fr;
  }

  .pr-list > li:only-child > .post-card {
    flex-direction: column;
  }

  .pr-list > li:only-child .post-card__thumb {
    flex: none;
  }

  .pr-list > li:only-child .post-card__body {
    padding: 20px 22px 22px;
  }

  .pr-list > li:only-child .post-card__title {
    font-size: 19px;
  }

  .ad-slot--footer .ad-slot__items {
    grid-template-columns: 1fr;
  }
}

/* 推奨外の比率の画像が入っても紙面が壊れないよう高さに上限を設ける */
.ad-slot__items a {
  background: var(--color_white);
}

.ad-slot__items img {
  max-height: 340px;
  object-fit: contain;
}

/* ------------------------------------------------------------
   フッター
   ロゴと著作権表記だけで、ここに辿り着いた読者が
   次にどこへ行けばよいか分からない状態だったためリンクを追加する。
   ------------------------------------------------------------ */
footer .footer__inner {
  display: grid;
  gap: 40px 56px;
  /* 紹介文の1行（実測391px）と、「プライバシーポリシー」の
     1行（実測185px×3列）の両方が収まる幅を確保する。
     1120pxだと紹介文がちょうど1pxだけ足りず折り返していた。 */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr);
  margin-inline: auto;
  max-width: 1140px;
  padding: 64px 24px 44px;
  text-align: left;
}

footer .footer__brand .footer__logo {
  margin: 0 0 18px;
  width: 200px;
}

footer .footer__desc {
  color: #cfc7bf;
  font-size: 15px;
  line-height: 1.9;
  margin: 0;
  overflow-wrap: normal;
  /* 折り返す場合も、単語の途中ではなく文節の切れ目で折る。
     対応していないブラウザは normal として扱われる。 */
  word-break: normal;
  word-break: auto-phrase;
}

footer .footer__nav {
  display: grid;
  gap: 32px 20px;
  grid-template-columns: repeat(3, 1fr);
}

footer .footer__group-title {
  color: var(--color_white);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
  padding-bottom: 10px;
  position: relative;
}

footer .footer__group-title::after {
  background: var(--color_coral);
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 28px;
}

footer .footer__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer .footer__group li {
  margin-bottom: 10px;
}

footer .footer__group a {
  color: #ded7d0;
  /* 記号だけが先に折り返されないよう、記号は位置を固定して
     文字は左端を揃えて折り返す */
  display: inline-block;
  font-size: 15px;
  line-height: 1.7;
  padding-left: 15px;
  position: relative;
  transition: color 0.2s;
}

footer .footer__group a::before {
  color: var(--color_coral);
  content: "›";
  left: 0;
  position: absolute;
  top: 0;
}

footer .footer__group a:hover {
  color: var(--color_white);
}

footer .footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #b8b0a8;
  font-size: 13px;
  margin: 0;
  padding: 20px 24px 24px;
}

@media screen and (max-width: 900px) {
  footer .footer__inner {
    gap: 34px;
    grid-template-columns: 1fr;
    padding: 48px 22px 34px;
  }

  footer .footer__nav {
    gap: 26px 20px;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------------------
   ボタン
   影も動きも無く、平面的で押せる要素に見えにくかったので、
   奥行きと押し込みの反応を足す。色や形は既存のまま。
   ------------------------------------------------------------ */
.cw-top section a[role="button"] {
  box-shadow: 0 4px 0 rgba(66, 58, 50, 0.22), 0 8px 18px rgba(66, 58, 50, 0.14);
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}

.cw-top section a[role="button"]:hover {
  box-shadow: 0 6px 0 rgba(66, 58, 50, 0.22), 0 12px 24px rgba(66, 58, 50, 0.2);
  filter: brightness(1.02);
  transform: translateY(-2px);
}

.cw-top section a[role="button"]:active {
  box-shadow: 0 1px 0 rgba(66, 58, 50, 0.22), 0 4px 10px rgba(66, 58, 50, 0.16);
  transform: translateY(2px);
}

@media screen and (max-width: 767px) {
  .cw-top section a[role="button"] {
    max-width: 100%;
  }
}

/* 一覧ページではCocoonのリンク下線が効くため、カード内では消す。
   カード全体がリンクなので、文字ごとに下線が出ると読みづらい。 */
.post-card,
.post-card:hover,
.column-card__main,
.column-card__main:hover,
.column-card__link,
.member-grid__item a {
  text-decoration: none;
}

.post-card *,
.column-card__main * {
  text-decoration: none;
}

/* ------------------------------------------------------------
   イベントの行動導線
   「詳細を見る」だけでは申し込みまで遠かったため、
   申し込みボタンをカード上に置き、色で優先度を分ける。
   ------------------------------------------------------------ */
/* ボタンは右端に置いて、横長カードの余白を埋める */
.event-card__actions {
  align-self: center;
  grid-column: 3;
  grid-row: 1;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 32px;
}

.event-card__apply {
  align-items: center;
  background: var(--color_coral);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(198, 116, 133, 0.45);
  color: var(--color_white);
  display: inline-flex;
  font-size: 17px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: 0.04em;
  min-height: 52px;
  padding: 12px 28px;
  transition: transform 0.18s, box-shadow 0.18s;
}

.event-card__apply:hover {
  box-shadow: 0 5px 0 rgba(198, 116, 133, 0.45);
  transform: translateY(-2px);
}

.event-card__apply:active {
  box-shadow: 0 1px 0 rgba(198, 116, 133, 0.45);
  transform: translateY(2px);
}

/* カード上のCTAは1つに絞る。申し込みは詳細ページ側に大きく置いてある。 */
.event-card__detail {
  align-items: center;
  background: var(--color_coral);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(198, 116, 133, 0.45);
  color: var(--color_white);
  display: inline-flex;
  font-size: 17px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 52px;
  padding: 12px 30px;
  transition: transform 0.18s, box-shadow 0.18s;
}

.event-card__detail::after {
  content: "›";
}

.event-card__detail:hover {
  box-shadow: 0 5px 0 rgba(198, 116, 133, 0.45);
  color: var(--color_white);
  transform: translateY(-2px);
}

.event-card__detail:active {
  box-shadow: 0 1px 0 rgba(198, 116, 133, 0.45);
  transform: translateY(2px);
}

@media screen and (max-width: 767px) {
  .event-card {
    grid-template-columns: 1fr;
  }

  .event-card .event-card__link {
    grid-column: 1;
  }

  .event-card .event-card__link {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .event-card__body {
    grid-column: 1;
  }

  /* 1カラムになるので通常の流れに戻す */
  .event-card__thumb {
    aspect-ratio: 4 / 3;
    bottom: auto;
    padding: 14px;
    position: relative;
    top: auto;
    width: auto;
  }

  .event-card__body {
    padding: 18px 20px 8px;
  }

  .event-card__actions {
    grid-column: 1;
    grid-row: auto;
    padding: 0 20px 22px;
  }

  .event-card__detail {
    flex: 1 1 auto;
  }

  .event-card__apply {
    flex: 1 1 auto;
    justify-content: center;
    font-size: 16px;
  }
}

/* ------------------------------------------------------------
   一覧ページの調整
   ・カード地色が薄ピンク（--color_white は #fffff5 のアイボリー）で
     ページ背景に沈んでいたため、一覧では白にして記事を際立たせる
   ・「次へ」がボタン幅に収まらず2行に折り返していた
   ------------------------------------------------------------ */
.cw-archive__list .post-card,
.cw-archive__list .column-card {
  background: #fff;
}

.cw-archive__list .column-card__author {
  background: #fdfaf5;
}

/* ページ送り：前後リンクは文字数ぶんの幅を確保する */
.cw-archive__pager .page-numbers {
  white-space: nowrap;
}

.cw-archive__pager .prev.page-numbers,
.cw-archive__pager .next.page-numbers {
  min-width: 0;
  padding-inline: 20px;
}

/* ------------------------------------------------------------
   自社LPへの導線（広告枠とは別）
   出稿企業のバナーではないため「広告」表記は付けず、
   サイトのサービス紹介として2カラムで見せる。
   ------------------------------------------------------------ */
section#lp-guide .content {
  margin-inline: auto;
  max-width: 1000px;
  padding-inline: 24px;
}

section#lp-guide .message {
  font-size: var(--font-size_1);
  line-height: 2;
  margin-bottom: 40px;
}

.lp-guide__list {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-guide__list > li {
  display: flex;
  min-width: 0;
}

.lp-guide__card {
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(66, 58, 50, 0.1);
  display: block;
  flex: 1 1 auto;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}

.lp-guide__card:hover {
  box-shadow: 0 12px 30px rgba(66, 58, 50, 0.18);
  transform: translateY(-4px);
}

.lp-guide__card img {
  display: block;
  height: auto;
  width: 100%;
}

@media screen and (max-width: 767px) {
  section#lp-guide .content {
    padding-inline: 20px;
  }

  section#lp-guide .message {
    font-size: 18px;
    text-align: left;
  }

  .lp-guide__br {
    display: none;
  }

  .lp-guide__list {
    gap: 20px;
    grid-template-columns: 1fr;
  }

}

.ad-slot__items {
  gap: 20px;
}

/* ============================================================
   相談前の頭の整理（終活LPへの導線）
   バナー1枚だけだと素っ気ないため、悩みを受け止める組みにする。
   ============================================================ */
#arrange {
  background: var(--color_ivory);
}

.arrange {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
  text-align: left;
}

.arrange__worries,
.arrange__answer {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(66, 58, 50, 0.08);
  padding: 32px;
}

.arrange__answer {
  /* 解決側を主役にしたいので、コーラルの細い枠で締める */
  border: 2px solid var(--color_coral);
}

.arrange__label {
  color: var(--color_charcoal);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin: 0 0 18px;
  padding-left: 22px;
  position: relative;
}

.arrange__label::before {
  color: var(--color_coral);
  content: "▼";
  font-size: 14px;
  left: 0;
  position: absolute;
  top: 0.35em;
}

.arrange__label--answer::before {
  content: "✓";
  font-size: 17px;
  top: 0.15em;
}

.arrange__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arrange__list li {
  font-size: 18px;
  line-height: 1.9;
  overflow-wrap: normal;
  padding-left: 22px;
  position: relative;
  word-break: normal;
}

.arrange__list li + li {
  border-top: 1px dashed #e6ddcd;
  margin-top: 12px;
  padding-top: 12px;
}

.arrange__list li::before {
  background: var(--color_coral);
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 2px;
  position: absolute;
  top: 0.75em;
  width: 8px;
}

.arrange__text {
  font-size: 18px;
  line-height: 1.9;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.arrange__cta {
  align-items: center;
  background: var(--color_coral);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(198, 116, 133, 0.45);
  color: #fff;
  /* 左端に寄っていて枠の中で浮いて見えたため、中央に置く */
  display: flex;
  font-size: 18px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  letter-spacing: 0.04em;
  margin-inline: auto;
  margin-top: 24px;
  width: fit-content;
  min-height: 60px;
  padding: 14px 32px;
  transition: transform 0.18s, box-shadow 0.18s;
}

.arrange__cta::after {
  content: "→";
}

.arrange__cta:hover {
  box-shadow: 0 5px 0 rgba(198, 116, 133, 0.45);
  transform: translateY(-2px);
}

/* 空き家の窓口（下部の自社LPバナー）
   バナーは1200×900の4:3。全幅に伸ばすと高さが800pxを超えて主張しすぎるため、
   下部の広告バナー1枚ぶん（約546px）に揃えて中央に置く。 */
#lp-vacant .content {
  max-width: 1120px;
  padding-inline: 24px;
}

.lp-vacant__card {
  margin-inline: auto;
  max-width: 546px;
  border-radius: 10px;
  display: block;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}

.lp-vacant__card:hover {
  box-shadow: 0 8px 22px rgba(66, 58, 50, 0.16);
  transform: translateY(-3px);
}

.lp-vacant__card img {
  display: block;
  height: auto;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .arrange {
    gap: 16px;
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .arrange__worries,
  .arrange__answer {
    padding: 24px 20px;
  }

  .arrange__cta {
    width: 100%;
  }
}

/* ============================================================
   新着記事のカテゴリータブ
   スマホで縦に長くならないよう、3件ずつ切り替えて見せる。
   ============================================================ */
.post-tabs__scroller {
  /* タブが増えても折り返さず横に送れるようにする */
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

.post-tabs__scroller::-webkit-scrollbar {
  display: none;
}

.post-tabs__list {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0 0 2px;
  width: max-content;
}

.post-tabs__button {
  background: #fff;
  border: 1px solid #e5ded0;
  border-radius: 999px;
  color: #6d655a;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 14px 22px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.post-tabs__button:hover {
  border-color: var(--color_coral);
  color: var(--color_coral);
}

.post-tabs__button.is-current {
  background: var(--color_coral);
  border-color: var(--color_coral);
  color: #fff;
}

.post-tabs__panel[hidden] {
  display: none;
}

.post-tabs__more {
  margin: 24px 0 0;
  text-align: center;
}

.post-tabs__more a {
  color: var(--color_coral);
  font-size: 16px;
  font-weight: 700;
}

.post-tabs__more a::after {
  content: "›";
  margin-left: 6px;
}

@media screen and (max-width: 767px) {
  .post-tabs__scroller {
    /* 端で切れて見えるよう、コンテンツ幅より外へ少しはみ出させる */
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .post-tabs__button {
    font-size: 16px;
    padding: 12px 18px;
  }
}

/* ------------------------------------------------------------
   ページ下部のバナー枠
   自社LP（空き家の窓口など）と出稿バナーを同じ大きさで2列に並べる。
   先方指示：空き家だけ大きく浮いて見えるのを揃えるため。
   ------------------------------------------------------------ */
.banner-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 48px 0;
  padding: 0;
}

.banner-grid__item {
  min-width: 0;
}

.banner-grid__link {
  border-radius: 10px;
  display: block;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}

.banner-grid__link:hover {
  box-shadow: 0 8px 22px rgba(66, 58, 50, 0.16);
  transform: translateY(-3px);
}

.banner-grid__link img {
  display: block;
  height: auto;
  width: 100%;
}

/* 狭い幅では1列に落とす。横長バナーは縮むと文字が読めなくなるため */
@media screen and (max-width: 767px) {
  .banner-grid {
    gap: 14px;
    grid-template-columns: 1fr;
    margin: 32px 0;
  }
}

/* リンク先が未定のLPは、押せそうに見えないよう浮き上がりを止める */
.banner-grid__link--pending {
  cursor: default;
}

.banner-grid__link--pending:hover {
  box-shadow: none;
  transform: none;
}

/* 「終活ってそもそも／なんだろう？」の改行。
   SPは画面幅に合わせて自然に折り返すほうが収まりが良いので、指定改行は消す。 */
@media screen and (max-width: 767px) {
  .flow__title-break {
    display: none;
  }
}


/* ============================================================
   SP：記事リストを横スライドにする
   先方指示：3記事が縦に並ぶとスクロールが長くなるため、
   新着記事・先生コラム・協力企業からのご紹介を横送りに変える。
   ============================================================ */
@media screen and (max-width: 767px) {

  .post-list--grid,
  .column-list,
  .pr-list {
    display: flex;
    gap: 16px;
    /* grid指定を打ち消す */
    grid-template-columns: none;
    overflow-x: auto;
    /* touch-action は指定しない。
       pan-x にすると横送りは効くが、枠の上で縦スクロールが止まってしまい
       「動かない＝壊れている」と受け取られるため。既定の挙動に任せる。 */
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* カードの影が上下で切れないよう逃がす */
    padding-block: 4px 8px;
  }

  .post-list--grid::-webkit-scrollbar,
  .column-list::-webkit-scrollbar,
  .pr-list::-webkit-scrollbar {
    display: none;
  }

  /* 右端に次のカードを覗かせて、横に送れることを示す */
  .post-list--grid > li,
  .column-list > li,
  .pr-list > li {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  /* 1枚しかないときは横いっぱいに使う */
  .post-list--grid > li:only-child,
  .column-list > li:only-child,
  .pr-list > li:only-child {
    flex-basis: 100%;
  }

  /* カードの高さを揃える */
  .post-list--grid > li > .post-card,
  .column-list > li > .column-card,
  .pr-list > li > .post-card {
    height: 100%;
  }
}

/* ------------------------------------------------------------
   SP：カテゴリータブが横に送れることを分かるようにする
   先方指摘：スクロールできずにタップしてしまう。
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  .post-tabs__scroller {
    position: relative;
    /* touch-action は指定しない。
       pan-x にすると、タブの上で縦スクロールが止まってしまう。
       横に送れることは、右端のぼかしと見切れで示す。 */
    -webkit-overflow-scrolling: touch;
    /* 右端で切らずに少し余らせ、次のタブを覗かせる */
    padding-right: 28px;
  }

  /* 右端をぼかして「まだ続く」ことを示す */
  .post-tabs {
    position: relative;
  }

  .post-tabs::after {
    background: linear-gradient(to right, rgba(255, 250, 245, 0), rgba(255, 250, 245, 0.96) 78%);
    content: "";
    height: 46px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 34px;
  }
}


/* ------------------------------------------------------------
   スマホ下部の固定メニュー
   先方指示：気持ち大きく。
   既定は高さ50px・文字9pxで、年配の方には小さい。
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  .mobile-menu-buttons {
    min-height: 62px;
  }

  .mobile-menu-buttons .menu-button-in,
  .mobile-menu-buttons .menu-open {
    min-height: 62px;
    padding-block: 7px;
  }

  .mobile-menu-buttons .menu-icon .fa {
    font-size: 21px;
  }

  .mobile-menu-buttons .menu-caption {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-top: 3px;
  }

  /* 「相談」だけは押してほしいので、色で少し目立たせる */
  .mobile-menu-buttons .cw-consult-button .menu-button-in {
    color: var(--color_coral, #c6748a);
  }

  /* 固定メニューがコンテンツに重なるぶん、下に余白を足す */
  body.cw-top,
  .cw-blog-detail,
  .cw-member-detail,
  .cw-event-detail {
    padding-bottom: 62px;
  }
}


/* ============================================================
   TOPページ用：スマホ下部の固定メニュー（自前で用意）
   page-top.php は Cocoon のCSSを読み込まない作りのため、
   固定メニューのHTMLは出ていてもスタイルが当たらず、
   ページ最下部に素のリストとして置かれてしまっていた。
   下層ページと同じ見た目になるよう、必要な指定をここで持つ。
   ============================================================ */
.cw-top .mobile-menu-buttons {
  background: #fff;
  bottom: 0;
  box-shadow: 0 -2px 8px rgba(74, 70, 65, 0.16);
  display: none;            /* 既定は非表示。SPだけ出す。 */
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 0;
  z-index: 30;
}

@media screen and (max-width: 767px) {
  .cw-top .mobile-menu-buttons {
    display: flex;
    /* iPhoneのホームバーに重ならないよう、その分を下に足す */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

.cw-top .mobile-menu-buttons .menu-button {
  /* 中に隠しinputやラベルが入るため、高さを固定しないと
     記事ページ（62px）と揃わない */
  align-items: stretch;
  display: flex;
  flex: 1 1 0;
  height: 62px;
  min-width: 0;
  text-align: center;
}

.cw-top .mobile-menu-buttons .menu-button > a,
.cw-top .mobile-menu-buttons .menu-button > label {
  flex: 1 1 auto;
}

.cw-top .mobile-menu-buttons .menu-button-in,
.cw-top .mobile-menu-buttons .menu-open {
  align-items: center;
  box-sizing: border-box;
  color: #4a4641;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding-block: 7px;
  text-decoration: none;
}

/* 検索を閉じるための透明ラベルが高さを持たないようにする */
.cw-top .mobile-menu-buttons #search-menu-close {
  display: none;
}

.cw-top .mobile-menu-buttons .menu-icon .fa {
  font-size: 21px;
  line-height: 1;
}

.cw-top .mobile-menu-buttons .menu-caption {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-top: 3px;
}

/* 「相談」だけ色を変えて押してもらいやすくする */
.cw-top .mobile-menu-buttons .cw-consult-button .menu-button-in {
  color: var(--color_coral, #c6748a);
}

/* 検索の開閉に使うチェックボックスは隠す */
.cw-top .mobile-menu-buttons .display-none {
  display: none;
}


/* 固定メニューのぶん、ページ下に余白を足す */
@media screen and (max-width: 767px) {
  body.cw-top {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
}


/* ------------------------------------------------------------
   TOPページ用：固定メニューの開閉パネル
   Cocoonの検索窓・サイドバーメニューは、閉じているときは
   隠すCSSが親テーマ側にある。TOPはそれを読み込まないため、
   閉じているのに「×」が出たままになっていた。
   ------------------------------------------------------------ */

/* 閉じている間は中身をすべて隠す */
.cw-top .mobile-menu-buttons .menu-content,
.cw-top .mobile-menu-buttons .search-menu-content {
  display: none;
}

/* 検索：チェックが入ったらメニューの上に出す */
.cw-top .mobile-menu-buttons #search-menu-input:checked ~ .search-menu-content {
  background: #fff;
  bottom: 100%;
  box-shadow: 0 -2px 8px rgba(74, 70, 65, 0.16);
  display: block;
  left: 0;
  padding: 14px 16px;
  position: absolute;
  right: 0;
}

/* メニュー：チェックが入ったら画面全体に出す */
.cw-top .mobile-menu-buttons #sidebar-menu-input:checked ~ .sidebar-menu-content {
  background: #fff;
  bottom: 0;
  display: block;
  left: 0;
  overflow-y: auto;
  padding: 64px 20px calc(80px + env(safe-area-inset-bottom, 0px));
  position: fixed;
  right: 0;
  text-align: left;
  top: 0;
  z-index: 40;
}

/* パネルを閉じるための透明な覆い（画面いっぱい） */
.cw-top .mobile-menu-buttons #search-menu-input:checked ~ #search-menu-close,
.cw-top .mobile-menu-buttons #sidebar-menu-input:checked ~ #sidebar-menu-close {
  display: block;
  inset: 0;
  position: fixed;
  z-index: 35;
}

/* パネル内の「×」。開いているときだけ右上に出す。 */
.cw-top .mobile-menu-buttons .menu-close-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 22px;
  height: 44px;
  justify-content: center;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 44px;
}

/* 検索フォーム。親テーマのCSSが無いので、ここで組み直す。 */
.cw-top .mobile-menu-buttons .search-box {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 0;
}

.cw-top .mobile-menu-buttons .search-edit {
  appearance: none;
  background: #fff;
  border: 1px solid #d8d2ca;
  border-radius: 6px;
  box-sizing: border-box;
  color: #4a4641;
  flex: 1 1 auto;
  font-size: 16px;
  height: 46px;
  min-width: 0;
  padding: 0 12px;
}

.cw-top .mobile-menu-buttons .search-edit:focus {
  border-color: var(--color_coral, #c6748a);
  outline: none;
}

/* main.css がヒーロー用に .search-submit のアイコンを「＞」へ
   差し替えているため、下部メニューでは虫眼鏡に戻す。 */
.cw-top .mobile-menu-buttons .search-submit .fa-search::before {
  content: "\f002";
}

.cw-top .mobile-menu-buttons .search-submit {
  align-items: center;
  appearance: none;
  background: var(--color_coral, #c6748a);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 18px;
  height: 46px;
  justify-content: center;
  padding: 0;
  width: 46px;
}

/* ------------------------------------------------------------
   スポンサー広告の表記
   先方指示：広告であることが分かるようにする。
   バナー本体より主張しないよう、小さく淡い色で置く。
   ------------------------------------------------------------ */
.ad-slot__label,
.banner-grid__label {
  color: #8a827a;
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  text-align: left;
}

.banner-grid__label {
  font-size: 10px;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------
   見出し下の一文
   携帯で最後の1文字だけが改行されるのを避けるため、
   単語の途中ではなく文節の切れ目で折り返す。
   対応していないブラウザは normal として扱われる。
   ------------------------------------------------------------ */
.cw-top section > .content > .message,
.cw-top .pr-block__lead,
.cw-top .flow__lead {
  word-break: normal;
  word-break: auto-phrase;
}

/* ------------------------------------------------------------
   メンバーの肩書き
   先方指示：情報が長いと読みづらい。
   資格・会社名が長い方だけカードが伸びて並びが崩れるため、
   トップの一覧では3行までにそろえる。全文はメンバー詳細で読める。
   ------------------------------------------------------------ */
/* グリッドの子は既定で min-width:auto のため、
   中身の最小幅（切れない長い語）に押し広げられる。
   「株式会社PIPELINE CONSULTING」のような英字の社名で
   2列が画面からはみ出していたため、縮められるようにする。 */
section#member .member-grid__item {
  min-width: 0;
}

/* 資格と会社名をそれぞれ1行ずつに収める。
   2列に並ぶと1行あたり10文字ほどしか入らず、
   「梅田セントラル法律事／務所」のように語の途中で
   折れて読みづらかったため、折らずに「…」で止める。
   全文はメンバー詳細ページで読める。 */
section#member .member-grid__role {
  display: grid;
  gap: 2px;
}

section#member .member-grid__job,
section#member .member-grid__company {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

section#member .member-grid__company {
  color: #8a827a;
  font-size: 0.92em;
}

/* ------------------------------------------------------------
   SP：メンバー紹介を横送りにする
   先方指示：2列だとカードが狭く、肩書きや事務所名が読み切れない。
   新着記事・先生コラムと同じ横送りに揃え、1枚あたりの幅を広げる。
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {

  section#member .member-grid {
    position: relative;
  }

  section#member .member-grid__items {
    display: flex;
    gap: 14px;
    /* 2列のグリッド指定を打ち消す */
    grid-template-columns: none;
    overflow-x: auto;
    /* touch-action は指定しない。
       pan-x にすると横送りは効くが、枠の上で縦スクロールが止まってしまう。 */
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* 右端で切らずに次のカードを覗かせる */
    padding-block: 4px 8px;
    padding-right: 24px;
  }

  section#member .member-grid__items::-webkit-scrollbar {
    display: none;
  }

  section#member .member-grid__item {
    flex: 0 0 74%;
    scroll-snap-align: start;
  }

  /* 1名しかいないときは横いっぱいに使う */
  section#member .member-grid__item:only-child {
    flex-basis: 100%;
  }

  /* 右端をぼかして「まだ続く」ことを示す */
  section#member .member-grid::after {
    background: linear-gradient(to right, rgba(252, 231, 231, 0), rgba(252, 231, 231, 0.92) 76%);
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 26px;
  }
}