@charset "UTF-8";
/*
 * トップページ「PICK UP」枠（部品は assets/inc/pickup.php）
 * 幅・余白・見出しは index.css の News 欄（.news_wrap .news）に揃える。
 * 色は Worldwide Design System のトークン値。サイト全体の :root には影響させないよう、この枠の中だけで定義する。
 */
.pickup_wrap {
  --pickup-brand-dark: #057138;   /* brand-dark */
  --pickup-brand-darker: #045c2d; /* brand-darker（ホバー） */
  --pickup-brand-light: #B8CA52;  /* brand-light */
  --pickup-ink-primary: #1f2937;  /* ink-primary */
  --pickup-ink-secondary: #475569;/* ink-secondary */
  --pickup-surface: #ffffff;      /* surface */
  --pickup-border: #e3e8dc;
  margin-top: 60px;
  width: 100%;
}

.pickup_wrap .pickup {
  margin-left: auto;
  margin-right: auto;
  padding: 30px 50px 40px;
  width: 900px;
  background-color: #faf9f4; /* News 欄と同じ背景 */
}

/* 見出し（News と同じ大きさ・字間。下線も News と同じ画像 news_h2_line.png を h2 の背面に重ねる） */
.pickup_wrap .pickup .h2_wrap {
  position: relative;
}
.pickup_wrap .pickup .h2_wrap h2 {
  position: relative;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
  z-index: 1;
}
.pickup_wrap .pickup .h2_wrap img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: -10px;
  /* News（文字幅より約20pxずつ長い）と同じはみ出し方にする。「Pick Up」は文字が長いので News の163pxより広い */
  width: 220px;
  z-index: 0;
}

/* 並べ方: 2〜3枚は横並び */
.pickup_wrap .pickup_list {
  display: -ms-grid;
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
.pickup_wrap .pickup_list.pickup_count_2 {
  grid-template-columns: repeat(2, 1fr);
}
.pickup_wrap .pickup_list.pickup_count_3 {
  grid-template-columns: repeat(3, 1fr);
}

/* カード */
.pickup_wrap .pickup_card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pickup-border);
  border-radius: 8px;
  background-color: var(--pickup-surface);
  color: var(--pickup-ink-primary);
  -webkit-transition: transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pickup_wrap .pickup_card:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(31, 41, 55, 0.12);
}
.pickup_wrap .pickup_card:focus-visible {
  outline: 3px solid var(--pickup-brand-dark);
  outline-offset: 2px;
}

.pickup_wrap .pickup_img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f5f7f1; /* surface-2（画像の読み込み前） */
}
.pickup_wrap .pickup_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center; /* 人物が右寄りの写真でも顔が切れにくいように */
}

.pickup_wrap .pickup_body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 20px 24px 24px;
}
.pickup_wrap .pickup_date {
  font-size: 14px;
  font-weight: bold;
  color: var(--pickup-brand-dark);
  letter-spacing: 0.05em;
}
.pickup_wrap .pickup_title {
  margin-top: 8px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--pickup-ink-primary);
}
.pickup_wrap .pickup_text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--pickup-ink-secondary);
}

/* 「詳しく見る」: News の MORE と同じ、下線＋矢印。ホバーで線が伸びる */
.pickup_wrap .pickup_more {
  position: relative;
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin-top: auto;
  padding-top: 20px;
  padding-right: 4px;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--pickup-brand-dark);
}
.pickup_wrap .pickup_more::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--pickup-brand-dark);
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
}
.pickup_wrap .pickup_more::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 4px;
  width: 12px;
  height: 1px;
  background-color: var(--pickup-brand-dark);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.pickup_wrap .pickup_card:hover .pickup_more::before {
  width: calc(100% + 16px);
}
.pickup_wrap .pickup_card:hover .pickup_more {
  color: var(--pickup-brand-darker);
}

/* 1枚だけのときは横長（画像左・文字右） */
.pickup_wrap .pickup_list.pickup_count_1 .pickup_card {
  -webkit-box-orient: horizontal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.pickup_wrap .pickup_list.pickup_count_1 .pickup_img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 44%;
  aspect-ratio: auto;
  min-height: 240px;
}
.pickup_wrap .pickup_list.pickup_count_1 .pickup_body {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 28px 32px;
}
.pickup_wrap .pickup_list.pickup_count_1 .pickup_title {
  font-size: 22px;
}
.pickup_wrap .pickup_list.pickup_count_1 .pickup_text {
  font-size: 15px;
}

/* スマホ（500px以下）: 何枚でも縦並び・画像が上。幅と余白は News 欄のスマホ表示に揃える */
@media (max-width: 500px) {
  .pickup_wrap {
    margin-top: 30px;
  }
  .pickup_wrap .pickup {
    padding: 20px 10px 24px;
    width: 90%;
  }
  .pickup_wrap .pickup .h2_wrap h2 {
    font-size: 30px;
  }
  .pickup_wrap .pickup .h2_wrap img {
    width: 165px;
  }
  .pickup_wrap .pickup_list,
  .pickup_wrap .pickup_list.pickup_count_2,
  .pickup_wrap .pickup_list.pickup_count_3 {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .pickup_wrap .pickup_list.pickup_count_1 .pickup_card {
    -webkit-box-orient: vertical;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .pickup_wrap .pickup_list.pickup_count_1 .pickup_img {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .pickup_wrap .pickup_body,
  .pickup_wrap .pickup_list.pickup_count_1 .pickup_body {
    padding: 16px 16px 20px;
  }
  .pickup_wrap .pickup_title,
  .pickup_wrap .pickup_list.pickup_count_1 .pickup_title {
    font-size: 17px;
  }
  .pickup_wrap .pickup_text,
  .pickup_wrap .pickup_list.pickup_count_1 .pickup_text {
    font-size: 14px;
  }
}

/* 動きを減らす設定の利用者には浮き上がりを出さない */
@media (prefers-reduced-motion: reduce) {
  .pickup_wrap .pickup_card,
  .pickup_wrap .pickup_more::before {
    -webkit-transition: none;
    transition: none;
  }
  .pickup_wrap .pickup_card:hover {
    -webkit-transform: none;
            transform: none;
  }
}