@charset "UTF-8";
/* ///////////////////////////////////////////////

　活動紹介 インタビュー詳細ページ（モックアップ 3案）
　common.css / base.css を前提に追記（rem = 1px 換算のサイト規約に準拠）
　- 共通パーツ（写真ダミー枠・入会CTA・案切替・戻る）
　- .theme-a  ストーリー誌面型
　- .theme-b  現場密着型
　- .theme-c  対話フレンドリー型

/////////////////////////////////////////////// */

/* =========================================================
   共通
========================================================= */
#menu .gnav .nav11 a {
  background: #f88220;
  color: #fff;
}

.iwrap {
  padding-left: calc(50% - 480px);
  padding-right: calc(50% - 480px);
}
@media screen and (max-width: 1250px) {
  .iwrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 案切替バー（モック確認用） */
#plan-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px calc(50% - 480px);
  background: #2a2a33;
  color: #fff;
  font-size: 13rem;
}
@media screen and (max-width: 1250px) {
  #plan-switch { padding-left: 20px; padding-right: 20px; }
}
#plan-switch .ps_label { color: #b9b9c2; margin-right: 4px; }
#plan-switch .ps_links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#plan-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #55555f;
  border-radius: 50px;
  color: #e6e6ea;
  text-decoration: none;
  font-size: 12rem;
  transition: all .2s;
}
#plan-switch a:hover { border-color: #f88220; }
#plan-switch a.current { background: linear-gradient(to right, #f88220, #e14211); border-color: transparent; color: #fff; font-weight: bold; }
#plan-switch a.ps_home { border-style: dashed; }

/* 写真ダミー枠（実写真差し込み位置の明示） */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background:
    repeating-linear-gradient(45deg, #ececec 0, #ececec 10px, #e4e4e4 10px, #e4e4e4 20px);
  color: #9a9a9a;
  text-align: center;
  overflow: hidden;
}
.ph i { font-size: 30rem; line-height: 1; }
/* 実画像はトリミング済みを前提に、切らずにそのまま表示（枠比率に合わせて用意する） */
.ph img { width: 100%; height: auto; display: block; }
.ph:has(img) { background: #f2f3f5; }
/* 額縁（padding）は本文中の写真のみ。hero・other-membersには付けない */
.article .figure .ph { padding: 16px; }
.ph .ph_label {
  margin-top: 8px;
  font-size: 12rem;
  font-weight: bold;
  letter-spacing: .06em;
  padding: 0 10px;
}
.ph-hero   { aspect-ratio: 16 / 7; }
.ph-square { aspect-ratio: 1 / 1; }
.ph-round  { aspect-ratio: 1 / 1; border-radius: 50%; }

/* 戻るリンク */
.back_link {
  display: inline-flex;
  align-items: center;
  font-size: 14rem;
  font-weight: bold;
  color: #e14211;
  text-decoration: none;
}
.back_link::before { content: "\f104"; font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-right: 8px; }
.back_link:hover { text-decoration: underline; }

/* ダミー注記 */
.dummy { color: #b26a00; }
.dummy_note {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 4px;
  background: #fff2e6;
  color: #b26a00;
  font-size: 11rem;
  font-weight: bold;
  vertical-align: 2px;
}

/* 下部CTA：実サイト共通の #bottom_contact（base.css で定義）をそのまま使用するため専用スタイルは持たない */

/* 共通：詳細本文の下部戻る */
.detail_footer_nav { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid #ccc; }

/* Q番号の共通ラベル色（案ごとに上書き） */
.q_no { font-weight: bold; }

/* =========================================================
   案A ストーリー誌面型
========================================================= */
/* ヒーロー（明るいグラデ背景＋左テキスト／右角丸ポートレート。下端は波形。順序：一言→ブロック→氏名） */
.theme-a .hero {
  position: relative;
  overflow: hidden;
  padding: 56px calc(50% - 480px) 74px;
  margin-bottom: 40px;
  background: linear-gradient(158deg, #fffdf7 0%, #fff1e2 52%, #ffe1c8 100%);
}
.theme-a .hero::after {
  content: "";
  position: absolute; left: -6%; right: -6%; bottom: -34px;
  height: 72px; background: #fff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
@media screen and (max-width: 1250px) {
  .theme-a .hero { padding-left: 20px; padding-right: 20px; }
}
.theme-a .hero_inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 50px; }
.theme-a .hero_cap { flex: 1; }
.theme-a .hero_cap .catch { font-size: 25rem; font-weight: bold; line-height: 1.7; color: #1a2a4a; margin-bottom: 22px; }
.theme-a .hero_cap .block_tag {
  display: inline-block; padding: 5px 18px; margin-bottom: 16px;
  border: 1.5px solid #e8926a; border-radius: 8px;
  background: rgba(255,255,255,.55); color: #c0430f; font-size: 13rem; font-weight: bold;
}
.theme-a .hero_cap .name { font-size: 32rem; font-weight: bold; line-height: 1.2; color: #1a2a4a; }
.theme-a .hero_cap .name .en { display: block; font-size: 13rem; font-weight: normal; color: #8a8f9a; letter-spacing: .12em; margin-top: 8px; }
.theme-a .hero_cap .affiliation { margin-top: 12px; font-size: 14rem; color: #6a7080; }
.theme-a .hero_photo { flex-shrink: 0; width: 330px; }
.theme-a .hero_photo .ph { aspect-ratio: 3 / 4; border-radius: 18px; box-shadow: 0 12px 30px rgba(30,40,70,.16); }
@media (max-width: 768px) {
  .theme-a .hero { padding-top: 36px; padding-bottom: 54px; }
  .theme-a .hero_inner { flex-direction: column-reverse; gap: 24px; }
  .theme-a .hero_cap { text-align: center; }
  .theme-a .hero_cap .catch { font-size: 20rem; }
  .theme-a .hero_photo { width: 220px; }
}

.theme-a .lead {
  font-size: 20rem;
  line-height: 2.1;
  font-weight: 500;
  color: #1a1a6e;
  margin-bottom: 50px;
}
.theme-a .qa { margin-bottom: 44px; }
.theme-a .qa .q_head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f0f0f0;
}
.theme-a .qa .q_no { font-size: 40rem; color: #e14211; font-family: Georgia, "Times New Roman", serif; line-height: 1; }
.theme-a .qa .q_text { font-size: 22rem; font-weight: bold; line-height: 1.5; color: #222; }
.theme-a .qa .q_count { font-size: 12rem; font-weight: normal; color: #aaa; margin-left: 6px; }
.theme-a .qa .a_body { font-size: 16rem; line-height: 2.0; }

.theme-a .figure { margin: 34px 0; }
.theme-a .figure figcaption { margin-top: 8px; font-size: 12rem; color: #888; }
.theme-a .figure.side { float: right; width: 42%; margin: 6px 0 20px 30px; }
@media (max-width: 680px) {
  .theme-a .figure.side { float: none; width: 100%; margin: 24px 0; }
}

.theme-a .pullquote {
  position: relative;
  margin: 40px 0;
  padding: 10px 0 10px 34px;
  border-left: 5px solid;
  border-image: linear-gradient(to bottom, #f88220, #e14211) 1;
  font-size: 26rem;
  font-weight: 500;
  line-height: 1.7;
  color: #1a1a6e;
}

/* =========================================================
   案B 現場密着型
========================================================= */
.theme-b .profile {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px;
  border: 1px solid #ccc;
  background: #fafafa;
  margin-bottom: 30px;
}
.theme-b .profile .ph { width: 150px; flex-shrink: 0; border: 1px solid #ddd; }
.theme-b .profile .name { font-size: 28rem; font-weight: bold; }
.theme-b .profile .name .en { font-size: 13rem; font-weight: normal; color: #888; margin-left: 10px; letter-spacing: .08em; }
.theme-b .profile .rows { margin-top: 12px; }
.theme-b .profile .rows div { display: flex; font-size: 14rem; padding: 3px 0; }
.theme-b .profile .rows dt { width: 90px; color: #185fa5; font-weight: bold; }
@media (max-width: 680px) {
  .theme-b .profile { flex-direction: column; align-items: flex-start; }
  .theme-b .profile .ph { width: 120px; }
}

.theme-b .metrics { display: flex; gap: 14px; margin-bottom: 40px; }
.theme-b .metric {
  flex: 1;
  padding: 18px 10px;
  background: #eef4fb;
  border-radius: 8px;
  text-align: center;
}
.theme-b .metric .num { font-size: 34rem; font-weight: bold; color: #185fa5; line-height: 1.1; }
.theme-b .metric .num small { font-size: 14rem; margin-left: 3px; }
.theme-b .metric .lbl { margin-top: 6px; font-size: 12rem; color: #555; }
@media (max-width: 680px) { .theme-b .metrics { flex-wrap: wrap; } .theme-b .metric { min-width: calc(50% - 7px); } }

.theme-b .sec_head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 44px 0 20px;
  font-size: 22rem;
  font-weight: bold;
  color: #185fa5;
}
.theme-b .sec_head i { font-size: 22rem; }
.theme-b .sec_head::after { content: ""; flex: 1; height: 1px; background: #d5e2f0; }

.theme-b .timeline { position: relative; margin-left: 8px; padding-left: 28px; border-left: 2px solid #cfe0f2; }
.theme-b .timeline .tl { position: relative; padding-bottom: 26px; }
.theme-b .timeline .tl::before {
  content: "";
  position: absolute; left: -35px; top: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #2255c7; border: 2px solid #fff; box-shadow: 0 0 0 2px #cfe0f2;
}
.theme-b .timeline .time { font-size: 14rem; font-weight: bold; color: #2255c7; }
.theme-b .timeline .txt { font-size: 15rem; line-height: 1.8; margin-top: 2px; }
.theme-b .timeline .ph { margin-top: 10px; width: 220px; max-width: 100%; border: 1px solid #e0e0e0; }

.theme-b .qa { margin-bottom: 30px; }
.theme-b .qa .q_head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.theme-b .qa .q_no { color: #fff; background: #2255c7; font-size: 13rem; padding: 2px 9px; border-radius: 4px; }
.theme-b .qa .q_text { font-size: 18rem; font-weight: bold; }
.theme-b .qa .q_count { font-size: 12rem; font-weight: normal; color: #aaa; margin-left: 6px; }
.theme-b .qa .a_body { font-size: 16rem; line-height: 1.95; margin-top: 6px; }

.theme-b .photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 10px; }
.theme-b .photos .ph { border: 1px solid #e5e5e5; }
@media (max-width: 680px) { .theme-b .photos { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   案C 対話フレンドリー型
========================================================= */
.theme-c .c_wrap { padding-top: 10px; }
.theme-c .profile_c { text-align: center; margin: 10px 0 40px; }
.theme-c .profile_c .ph { width: 130px; margin: 0 auto 16px; border: 4px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.theme-c .profile_c .block_tag {
  display: inline-block; padding: 3px 14px; margin-bottom: 10px;
  background: #fdece0; color: #c0430f; border-radius: 50px; font-size: 12rem; font-weight: bold;
}
.theme-c .profile_c .name { font-size: 30rem; font-weight: bold; }
.theme-c .profile_c .affiliation { margin-top: 6px; font-size: 14rem; color: #777; }

.theme-c .talk { margin: 0 auto; max-width: 760px; }
.theme-c .bubble { display: flex; gap: 14px; margin-bottom: 28px; align-items: flex-start; }
.theme-c .bubble .avatar {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  font-size: 22rem; color: #fff;
}
.theme-c .bubble .balloon { position: relative; padding: 16px 20px; border-radius: 16px; font-size: 16rem; line-height: 1.9; }
.theme-c .bubble .balloon .q_count { display: block; margin-top: 8px; font-size: 11rem; color: #b98; }

/* インタビュアー（質問） */
.theme-c .bubble.q .avatar { background: #8e8886; }
.theme-c .bubble.q .balloon { background: #f0f0f0; color: #333; font-weight: bold; }
.theme-c .bubble.q .balloon::before {
  content: ""; position: absolute; left: -14px; top: 16px;
  border: 7px solid transparent; border-right-color: #f0f0f0;
}
/* 本人（回答） */
.theme-c .bubble.a { flex-direction: row-reverse; }
.theme-c .bubble.a .avatar { background: linear-gradient(135deg, #f88220, #e14211); }
.theme-c .bubble.a .balloon { background: #fff6ee; border: 1px solid #ffe0c7; }
.theme-c .bubble.a .balloon::before {
  content: ""; position: absolute; right: -15px; top: 16px;
  border: 7px solid transparent; border-left-color: #fff6ee;
}
.theme-c .bubble.a .balloon::after {
  content: ""; position: absolute; right: -16px; top: 15px;
  border: 8px solid transparent; border-left-color: #ffe0c7; z-index: -1;
}
.theme-c .bubble.a .figure { margin-top: 14px; }
.theme-c .bubble.a .figure .ph { border-radius: 12px; }
.theme-c .bubble.a .figure figcaption { margin-top: 6px; font-size: 11rem; color: #b08; color: #a98; }

/* 認定までのステップ */
.theme-c .steps_wrap { margin: 46px auto 0; max-width: 820px; }
.theme-c .steps_ttl { text-align: center; font-size: 20rem; font-weight: bold; color: #c0430f; margin-bottom: 24px; }
.theme-c .steps { display: flex; gap: 12px; }
.theme-c .step { flex: 1; text-align: center; background: #fff; border: 1px solid #ffe0c7; border-radius: 14px; padding: 18px 10px; position: relative; }
.theme-c .step .n {
  display: flex; justify-content: center; align-items: center;
  width: 34px; height: 34px; margin: 0 auto 8px;
  background: linear-gradient(135deg, #f88220, #e14211); color: #fff;
  border-radius: 50%; font-weight: bold; font-size: 15rem;
}
.theme-c .step .t { font-size: 13rem; font-weight: bold; line-height: 1.5; }
.theme-c .step + .step::before {
  content: "\f054"; font-family: "Font Awesome 5 Pro"; font-weight: 900;
  position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
  color: #f0a35a; font-size: 12rem;
}
@media (max-width: 680px) {
  .theme-c .steps { flex-wrap: wrap; }
  .theme-c .step { min-width: calc(50% - 6px); }
}

/* =========================================================
   採用版（A＋C 融合：本命ページ）
   ※ .theme-a の hero / figure / pullquote を流用しつつ、
     設問を「問い＝吹き出し（C要素）＋回答＝誌面本文（A要素）」で構成
========================================================= */
.article .qa2 { margin-bottom: 48px; }
.article .qa2 .ask {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.article .qa2 .ask .ic {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f88220, #e14211);
  color: #fff;
  display: flex; justify-content: center; align-items: center;
  font-size: 20rem;
}
.article .qa2 .ask .q {
  position: relative;
  background: #fff2e8;
  border: 1px solid #ffd9bd;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 18rem;
  font-weight: bold;
  color: #c0430f;
  line-height: 1.6;
}
.article .qa2 .ask .q::before {
  content: ""; position: absolute; left: -14px; top: 15px;
  border: 7px solid transparent; border-right-color: #ffd9bd;
}
.article .qa2 .ask .q::after {
  content: ""; position: absolute; left: -12px; top: 15px;
  border: 7px solid transparent; border-right-color: #fff2e8;
}
.article .qa2 .ans {
  font-size: 16rem;
  line-height: 2.05;
  padding-left: 60px;
}
.article .qa2 .ans p + p { margin-top: 1.2em; }
/* リード（各回答の書き出し・少し大きめで掴みに） */
.article .qa2 .ans .lead { font-size: 17rem; font-weight: 700; line-height: 1.9; color: #1a2a4a; margin-bottom: 1.0em; }
.article .qa2 .ans .lead + p { margin-top: 0; }
.article .qa2 .ans .figure { margin: 0 0 20px 30px; }
@media (max-width: 680px) {
  .article .qa2 .ans { padding-left: 0; }
  .article .qa2 .ans .figure { margin: 0 0 20px; }
}

/* リード（導入・任意） */
.article .lead {
  font-size: 19rem;
  line-height: 2.0;
  font-weight: 500;
  color: #1a1a6e;
  margin-bottom: 46px;
}

/* 他の認定者（サムネイル遷移） */
.other_members { margin-top: 64px; padding-top: 40px; border-top: 1px solid #ccc; }
.other_members .om_head {
  position: relative;
  padding-left: 20px;
  margin-bottom: 22px;
  font-size: 22rem;
  font-weight: bold;
  line-height: 1.4;
}
.other_members .om_head::before {
  position: absolute; top: 50%; left: 4px;
  transform: rotate(90deg) translateX(-50%); transform-origin: left top;
  width: 30px; height: 4px; content: "";
  background: linear-gradient(to right, #f88220, #e14211);
}
.other_members .om_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.other_members .om_card {
  display: block;
  border: 1px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #333;
  background: #fff;
  transition: box-shadow .2s;
}
.other_members .om_card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.other_members .om_card .ph { aspect-ratio: 1 / 1; }
.other_members .om_cap { padding: 12px 14px; }
.other_members .om_cap .blk {
  display: inline-block;
  padding: 2px 10px; margin-bottom: 6px;
  background: #fff2e8; color: #c0430f;
  border-radius: 50px; font-size: 11rem; font-weight: bold;
}
.other_members .om_cap .name { font-size: 15rem; font-weight: bold; }
.other_members .om_cap .more { margin-top: 8px; font-size: 12rem; font-weight: bold; color: #e14211; }
.other_members .om_cap .more::after { content: "\f105"; font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-left: 6px; }
.other_members .om_all { margin-top: 20px; text-align: center; }
.other_members .om_all a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 30px; border: 1px solid #ccc; border-radius: 50px;
  font-size: 14rem; font-weight: bold; text-decoration: none; color: #333;
  transition: all .2s;
}
.other_members .om_all a:hover { border-color: #f88220; }
.other_members .om_all a i { color: #f88220; }
@media (max-width: 680px) {
  .other_members .om_grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   活動紹介 一覧ページ
========================================================= */
.list_lead { font-size: 16rem; line-height: 1.9; margin-bottom: 6px; }

/* ブロック選択（アンカー） */
.block_nav {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin: 26px 0 10px; padding: 20px 0;
  border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
}
.block_nav a {
  display: flex; justify-content: center; align-items: center;
  height: 44px; padding: 0 6px;
  border: 1px solid #ccc; border-radius: 50px;
  font-size: 14rem; font-weight: bold; white-space: nowrap; text-decoration: none; transition: all .2s;
}
.block_nav a::after {
  content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: 900;
  margin-left: 6px; font-size: 11rem; color: #f88220;
}
.block_nav a:hover { border-color: #f88220; background: linear-gradient(to right, #f88220, #e14211); color: #fff; }
.block_nav a:hover::after { color: #fff; }
@media (max-width: 960px) {
  .block_nav { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .block_nav a { height: 40px; }
}
@media (max-width: 560px) {
  .block_nav { grid-template-columns: repeat(2, 1fr); }
}

/* ブロック見出し帯 */
.block_head {
  display: flex; align-items: center; height: 46px;
  margin: 56px 0 24px; padding: 0 20px;
  background: linear-gradient(to right, #f88220, #e14211);
  color: #fff; font-size: 18rem; font-weight: bold; scroll-margin-top: 20px;
}
@media (max-width: 960px) { .block_head { height: 42px; margin: 40px 0 20px; font-size: 16rem; } }

/* 人物カード */
.members_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 680px) { .members_list { grid-template-columns: 1fr; } }
.mcard {
  display: flex; flex-direction: column;
  border: 1px solid #ccc; border-radius: 12px; overflow: hidden;
  text-decoration: none; color: #333; background: #fff; transition: box-shadow .2s;
}
.mcard:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.mcard .ph { aspect-ratio: 1 / 1; }
.mcard .mcap { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.mcard .name { font-size: 18rem; font-weight: bold; }
.mcard .aff { margin-top: 4px; font-size: 14rem; color: #777; }
.mcard .excerpt {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee;
  font-size: 16rem; line-height: 1.7; color: #555;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.mcard .more { margin-top: 12px; font-size: 14rem; font-weight: bold; color: #e14211; }
.mcard .more::after { content: "\f105"; font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-left: 6px; }

/* 活動の概要バナー（ブロック選択の下） */
.activity_banner {
  display: flex; align-items: center; gap: 18px; width: 100%;
  margin: 56px 0 8px; padding: 18px 24px; box-sizing: border-box;
  background: #fbf7f3; border: 1px solid #f0e6dd; border-radius: 10px;
  text-decoration: none; color: #333; transition: all .2s;
}
.activity_banner:hover { border-color: #f0b98a; background: #fdf2ea; }
.activity_banner .ab_ic { flex: 0 0 auto; display: flex; align-items: center; }
.activity_banner .ab_ic img { width: 30px; height: auto; display: block; }
.activity_banner .ab_body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.activity_banner .ab_ttl { font-size: 18rem; font-weight: bold; line-height: 1.4; }
.activity_banner .ab_sub { font-size: 13rem; line-height: 1.5; color: #999; }
.activity_banner .ab_dl {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(to right, #f88220, #e14211); color: #fff;
  font-weight: bold; font-size: 14rem; padding: 11px 20px; border-radius: 50px;
  white-space: nowrap; transition: opacity .2s;
}
.activity_banner .ab_dl i { font-size: 12rem; }
.activity_banner:hover .ab_dl { opacity: .9; }
@media (max-width: 680px) {
  .activity_banner { flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px; }
  .activity_banner .ab_ttl { font-size: 16rem; }
  .activity_banner .ab_dl { width: 100%; justify-content: center; padding: 10px 14px; }
}