@charset "UTF-8";
/* style_group.css — 群ハブ・子ページ・トップ新節のための追加規則（03 実装・2026-09-22）。接頭辞 .grp-。
   色は既存の 6 色（#00ad5d・#fabe00・#333・#000・#fff・#ebebeb）と、既存 CSS の罫線色 #ccc（style_top.css .data-list / style.css .section）だけ。
   緑 #00ad5d は新しい部品の文字色に使わない（白地 2.94:1）。既存の CSS は変更しない。
   ハブは style_top.css / style_reskilling.css を読まないので、要る規則は §1 に正本つきで複製する。 */

/* ===================================================================== */
/* 1. 複製（正本を書き換えない） */
/* ===================================================================== */
/* 正本: static/css/style_reskilling.css の #hero・.main-catch（2026-09-22 時点・6〜99 行）。背景画像だけ #hero.grp-hero-* で差し替える */
#hero {
  width: 100%;
  height: 80vh;
  position: relative;
  top: 0;
  left: 0;
  padding-top: 60px;
}
#hero::before,
#hero::after {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
#hero .container {
  align-items: center;
  display: flex;
  position: relative;
  z-index: 1;
}
.main-catch {
  position: absolute;
  transform: translateY(-12%);
  -webkit-transform: translateY(-12%);
  margin: auto;
}
.main-catch h1 {
  color: #00ad5d;
  font-size: 7.2rem;
  font-weight: bold;
  line-height: 1.2;
  max-width: 733px;
}
.main-catch h1 span.h1_small,
.main-catch h1 span.h1_xsmall,
.main-catch h1 span.h1_medium {
  display: block;
}
.main-catch h1 span.h1_small,
.main-catch h1 span.h1_xsmall {
  font-weight: normal;
}
.main-catch h1 span.h1_small {
  font-size: 2.4rem;
}
.main-catch h1 span.h1_xsmall {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.main-catch h1 span.h1_medium {
  font-size: 4.8rem;
  margin-top: 1rem;
}
@media only screen and (max-width: 1024px) {
  #hero::before {
    background-position: center right;
  }
  #hero::after {
    background-color: rgba(0, 0, 0, .5);
  }
  .main-catch {
    left: 0;
    padding: 0 1rem;
    width: 100%;
  }
  .main-catch h1 {
    color: #ffffff;
    font-size: 4.2rem;
    text-align: center;
  }
  .main-catch h1 > span {
    font-size: 2.6rem;
  }
  .main-catch h1 span.h1_small {
    font-size: 2.2rem;
  }
  .main-catch h1 span.h1_xsmall {
    font-size: 1.4rem;
  }
  .main-catch h1 span.h1_medium {
    font-size: 3.8rem;
  }
}

/* 正本: static/css/style_top.css の .data-list（2026-09-22 時点・415〜478 行） */
.data-list {
  border-bottom: 1px solid #ccc;
  display: flex;
  font-size: 1.6rem;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
}
.data-list:last-child {
  border-bottom: 0;
}
.data-list dt,
.data-list dd {
  margin: 1rem 0;
  width: 100%;
}
.data-list dt {
  flex-shrink: 0;
  font-weight: bold;
  width: 160px;
}
.data-list dd {
  font-weight: normal;
  line-height: 1.8;
}
.data-list dd span {
  display: block;
  font-weight: bold;
  margin-bottom: 1rem;
}
.data-list dd ul {
  list-style-position: inside;
  margin: 0 0 0 1rem;
  padding: 0;
}
.data-list dd ul li {
  margin: 0;
  padding: 0 0 .2rem 1.3em;
  text-indent: -1.3em;
}
.data-list dd ul li:last-child {
  padding: 0 0 0 1.3em;
}
.data-list:last-child dt,
.data-list:last-child dd {
  margin-bottom: 0;
}
.data-list_office {
  margin-bottom: 2rem;
}
.data-list_office:last-child {
  margin-bottom: 0;
}
.data-list_office dt,
.data-list_office dd {
  margin: 0;
}
@media only screen and (max-width: 1024px) {
  .data-list {
    flex-direction: column;
  }
}

/* 正本: static/css/style_top.css の #contact-us・.contact・.contact-form・.tel-btn（2026-09-22 時点・483〜521 行） */
#contact-us {
  display: block;
  margin-top: -60px;
  padding-top: 60px;
  position: relative;
  z-index: 2;
}
.contact {
  min-height: 50vh;
  padding-bottom: 9rem;
  padding-top: 0;
}
.contact-form {
  font-size: 1.6rem;
  margin: 0 auto;
  max-width: 428px;
}
.contact-form .tel-btn {
  padding: 1rem;
  text-align: center;
}
.contact-form .tel-btn a {
  display: inline-block;
  color: #00ad5d;
  font-size: 3.6rem;
}
.contact-form .tel-btn a::before {
  font-family: "FontAwesome";
  content: "\f095";
  margin-right: .5rem;
}
.contact-form .tel-btn a:hover {
  color: #fabe00;
  border-bottom: none;
}

/* ===================================================================== */
/* 2. トップ新節 #group-services（文書 20 §3.1）。既存の z-index 連番: products 8 → 新節 7 → teams 6 */
/* ===================================================================== */
#group-services {
  display: block;
  margin-top: -60px;
  padding-top: 60px;
  position: relative;
  z-index: 7;
}
#group-services ~ #teams {
  z-index: 6;
}
#group-services .cards_row_card .h3 .h3_sub {
  display: block;
}
#group-services .grp-lead {
  margin: 0 auto 3rem;
  padding: 0 1rem;
}
/* カードの画像は 2:1 に切り出して並べる（hero 用の図解・写真をそのまま使う） */
.grp-card-figure img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
  width: 100%;
}
/* 関係会社ブロックに足す「グループのサービス」行のリンク（緑を文字色にしない） */
.grp-data-list_new dd a {
  color: #333;
  display: inline-block;
  min-height: 44px;
  padding: .6rem 0;
  text-decoration: underline;
}
.grp-data-list_new dd a:hover,
.grp-data-list_new dd a:focus {
  color: #333;
  text-decoration-color: #fabe00;
}

/* ===================================================================== */
/* 3. 新しい部品 4 つ（文書 20 §3.5 T-6） */
/* ===================================================================== */
/* (1) grp-disclosure: 関係性の帯（先頭の 60px は固定ヘッダーの下） */
.grp-disclosure {
  background: #ebebeb;
  border-bottom: 3px solid #00ad5d;
  color: #333;
  font-size: 1.4rem;
  line-height: 1.6;
  padding: calc(1rem + 60px) 0 1rem;
  position: relative;
  z-index: 13;
}
.grp-disclosure p {
  margin: 0 auto;
  max-width: 1170px;
  padding: 0 1rem;
  text-align: center;
}
.grp-disclosure a {
  color: #333;
  text-decoration: underline;
}
.grp-disclosure a:hover,
.grp-disclosure a:focus {
  color: #333;
  text-decoration-color: #fabe00;
}
.grp-disclosure_bottom {
  border-bottom: none;
  border-top: 3px solid #00ad5d;
  padding: 1rem 0;
}

/* (2) grp-faq: details / summary（JS なし） */
.grp-faq {
  border-top: 1px solid #ccc;
}
.grp-faq details {
  border-bottom: 1px solid #ccc;
}
.grp-faq summary {
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
  list-style: none;
  min-height: 44px;
  padding: 1.4rem 4rem 1.4rem 0;
  position: relative;
}
.grp-faq summary::-webkit-details-marker {
  display: none;
}
.grp-faq summary::after {
  border-color: #333;
  border-style: solid;
  border-width: 0 2px 2px 0;
  content: "";
  height: 1rem;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
  width: 1rem;
}
.grp-faq details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
.grp-faq summary:hover {
  background: #ebebeb;
}
.grp-faq summary:focus-visible {
  outline: 3px solid #fabe00;
  outline-offset: -3px;
}
.grp-faq details > div {
  font-size: 1.6rem;
  line-height: 1.8;
  padding: 0 0 2rem;
}
.grp-faq details > div p {
  margin: 0 0 1rem;
}
.grp-faq details > div p:last-child {
  margin-bottom: 0;
}
.grp-faq details > div a {
  color: #333;
  display: inline-block;
  min-height: 44px;
  padding: .6rem 0;
  text-decoration: underline;
}
.grp-faq details > div a:hover,
.grp-faq details > div a:focus {
  color: #333;
  text-decoration-color: #fabe00;
}

/* (3) grp-table: 比較表（834px 以下は横スクロール。見出し列は sticky） */
.grp-table_wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.grp-table {
  border-collapse: collapse;
  font-size: 1.6rem;
  line-height: 1.6;
  min-width: 640px;
  width: 100%;
}
.grp-table caption {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.grp-table th,
.grp-table td {
  border-bottom: 1px solid #ccc;
  padding: 1.2rem 1.5rem;
  text-align: left;
  vertical-align: top;
}
.grp-table thead th {
  background: #000;
  color: #fff;
  font-weight: bold;
}
.grp-table tbody th {
  background: #ebebeb;
  font-weight: bold;
}
.grp-table a {
  color: #333;
  display: inline-block;
  min-height: 44px;
  padding: .6rem 0;
  text-decoration: underline;
}
.grp-table a:hover,
.grp-table a:focus {
  color: #333;
  text-decoration-color: #fabe00;
}
.grp-table_hint {
  color: #333;
  display: none;
  font-size: 1.2rem;
  margin: 0 0 1rem;
}
@media only screen and (max-width: 834px) {
  .grp-table tbody th {
    left: 0;
    position: sticky;
  }
  .grp-table_hint {
    display: block;
  }
}

/* (4) grp-crosslinks: ページ末尾のグループ内リンク帯 */
.grp-crosslinks {
  background: #fff;
  border-top: 1px solid #ccc;
  padding: 3rem 1rem;
}
.grp-crosslinks p {
  font-size: 1.4rem;
  margin: 0 0 1rem;
  text-align: center;
}
.grp-crosslinks ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grp-crosslinks li a {
  border: 1px solid #333;
  border-radius: 5rem;
  color: #333;
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1.4;
  min-height: 44px;
  padding: 1.1rem 2rem;
}
.grp-crosslinks li a:hover,
.grp-crosslinks li a:focus {
  background: #fabe00;
  border-color: #fabe00;
  color: #333;
}

/* ===================================================================== */
/* 4. 工程カード（骨格は style_reskilling.css の #steps。6 色で再スキン） */
/* ===================================================================== */
.grp-steps .cards_row {
  margin: 0 1.5rem;
}
.grp-steps .cards_row_card {
  margin: 0 1rem;
  overflow: visible;
  padding: 0 0 2rem;
  position: relative;
  text-align: center;
}
.grp-steps .cards_row_card::after {
  border-color: transparent transparent transparent #00ad5d;
  border-style: solid;
  border-width: 10px 0 10px 12px;
  content: "";
  height: 0;
  position: absolute;
  right: -22px;
  top: 45%;
  width: 0;
}
.grp-steps .cards_row_card:last-child::after {
  display: none;
}
.grp-steps_title {
  background: #000;
  border-radius: .5rem .5rem 0 0;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 1.5rem;
  padding: 1rem;
}
.grp-steps_title span {
  display: block;
  font-size: 2rem;
}
.grp-steps .lead-text {
  font-size: 1.4rem;
  padding: 0 1.5rem;
}
@media only screen and (max-width: 834px) {
  .grp-steps .cards_row {
    margin: 0;
  }
  .grp-steps .cards_row_card {
    margin: 0 0 3rem;
  }
  .grp-steps .cards_row_card::after {
    border-color: #00ad5d transparent transparent transparent;
    border-width: 12px 10px 0 10px;
    bottom: -24px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
  }
}

/* ===================================================================== */
/* 5. ハブ共通の helper（見た目の新部品ではない。02 ラリー Q10 で許容） */
/* ===================================================================== */
.grp-hub .grp-pad {
  overflow: hidden;
  padding-top: 6rem;
}
.grp-hub .title-2 h2 {
  font-size: 3rem;
}
.grp-hub .grp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.grp-hub .grp-links a {
  color: #333;
  display: inline-block;
  font-size: 1.4rem;
  min-height: 44px;
  padding: 1rem 0;
  text-decoration: underline;
}
.grp-hub .grp-links a:hover,
.grp-hub .grp-links a:focus {
  color: #333;
  text-decoration-color: #fabe00;
}
.grp-hub .data-list dd a {
  color: #333;
  display: inline-block;
  min-height: 44px;
  padding: .6rem 0;
  text-decoration: underline;
}
.grp-hub .data-list dd a:hover,
.grp-hub .data-list dd a:focus {
  color: #333;
  text-decoration-color: #fabe00;
}
.grp-hub .grp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.grp-hub .grp-cta-row .button {
  margin: 0;
}
.grp-hub .grp-note {
  color: #333;
  font-size: 1.2rem;
  margin: 1.5rem 0;
  text-align: center;
}
.grp-hub .grp-legal {
  background: #fff;
  color: #333;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 1170px;
  padding: 2rem 1rem 4rem;
}
.grp-hub .grp-legal p {
  text-align: center;
}
.grp-hub a:focus-visible,
.grp-hub button:focus-visible {
  outline: 3px solid #fabe00;
  outline-offset: 2px;
}
.grp-hub .button_body {
  min-height: 44px;
}
/* ボタンの a はインラインのままだとタップ領域の箱が行の高さ（12〜19px）になる。中の .button_body と同じ箱にする */
.grp-hub .button > a {
  display: inline-block;
}
.grp-hub .tel-btn a {
  min-height: 44px;
}
.grp-hub .container > .lead-text:not(:last-child) {
  margin-bottom: 3rem;
}
.grp-hub .container > .cards + .lead-text {
  margin-top: 3rem;
}
.grp-hub .list li {
  margin: 0 0 .5rem 2.2rem;
  text-indent: -2.2rem;
}
@media only screen and (max-width: 1024px) {
  /* .container の左右 1rem（style.css は .container の padding 0。.cards は margin 0 1rem） */
  .grp-hub .container > .lead-text,
  .grp-hub .container > .grp-note,
  .grp-hub .container > .grp-cta-row,
  .grp-hub .container > .title-2,
  .grp-hub .container > p {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ===================================================================== */
/* 6. hero の変種 */
/* ===================================================================== */
/* 3 行の h1: 3 行を 1 行目の幅のブロックにし、末尾の行を右寄せ */
.grp-hub .main-catch h1 {
  max-width: none;
}
.grp-hub .main-catch h1 .h1_lines {
  display: inline-block;
  text-align: left;
}
.grp-hub .main-catch h1 .h1_line {
  display: block;
  text-align: left;
}
.grp-hub .main-catch h1 .h1_line-end {
  text-align: right;
}
/* 会社行（緑を小さい文字に使わない） */
.grp-hub .main-catch h1 span.h1_company {
  color: #333;
  display: block;
  font-size: 1.6rem;
  font-weight: normal;
  margin-top: 1.5rem;
}
/* A: 図解 SVG（static/images/odde_hero.svg 1920×883） */
#hero.grp-hero-illust::before {
  background: url("../images/odde_hero.svg") no-repeat center center #ffffff;
  background-size: cover;
}
@media only screen and (max-width: 1024px) {
  #hero.grp-hero-illust::before {
    background-position: center right;
  }
  #hero.grp-hero-illust::after {
    background-color: rgba(255, 255, 255, .7);
  }
  #hero.grp-hero-illust .main-catch h1 {
    color: #333;
  }
}
/* C: 写真（static/images/fam333_hero.jpg）+ 主副コピー + 白パネル。写真が無い時は無地 */
#hero.grp-hero-fam333::before {
  background: url("../images/fam333_hero.jpg") no-repeat center center #ebebeb;
  background-size: cover;
}
#hero.grp-hero-plain::before {
  background: #ebebeb;
}
.grp-hub .main-catch_main h1 {
  font-size: 6rem;
  max-width: none;
}
.grp-hub .main-catch_sub {
  color: #333;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.8;
  margin: 2.5rem 0 0;
}
.grp-hub .main-catch_sub span {
  display: block;
}
.grp-hub .main-catch_company {
  color: #333;
  font-size: 1.6rem;
  margin: 1.5rem 0 0;
}
.grp-hub .grp-hero-panel .main-catch {
  background: rgba(255, 255, 255, .9);
  border-radius: .5rem;
  padding: 3rem 4rem;
}
.grp-hub .main-catch_cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 3rem 0 0;
}
.grp-hub .main-catch_cta .button {
  margin: 0;
  text-align: left;
}
@media only screen and (max-width: 1024px) {
  .grp-hub .main-catch_main h1 {
    font-size: 3.6rem;
  }
  .grp-hub .main-catch h1 .h1_line,
  .grp-hub .main-catch h1 .h1_line-end {
    text-align: center;
  }
  .grp-hub .main-catch_sub {
    font-size: 1.6rem;
    margin-top: 2rem;
    text-align: center;
  }
  .grp-hub .main-catch_company {
    font-size: 1.3rem;
    text-align: center;
  }
  .grp-hub .grp-hero-panel .main-catch {
    background: none;
    border-radius: 0;
    padding: 0 1rem;
  }
  .grp-hub .grp-hero-panel .main-catch_sub,
  .grp-hub .grp-hero-panel .main-catch_company {
    color: #fff;
  }
  .grp-hub .main-catch_cta {
    justify-content: center;
    margin-top: 2.5rem;
  }
  .grp-hub .main-catch_cta .button {
    text-align: center;
  }
}

/* ===================================================================== */
/* 7. 動画（02 ラリー Q2。ID を設定した時だけ表示される） */
/* ===================================================================== */
.grp-hub .grp-video {
  align-items: start;
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.grp-hub .grp-video_frame {
  background: #000;
  border-radius: .5rem;
  box-shadow: 0 0.125em 0.125em 0 rgb(0 0 0 / 13%);
  overflow: hidden;
  position: relative;
}
.grp-hub .grp-video_frame::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.grp-hub .grp-video_frame iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.grp-hub .grp-video_side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
}
.grp-hub .grp-video_topics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grp-hub .grp-video_topics li {
  background: #ebebeb;
  border-radius: 5rem;
  color: #333;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.4;
  padding: .8rem 1.4rem;
}
.grp-hub .grp-video_topics li::before {
  content: "#";
  margin-right: .3em;
}
.grp-hub .grp-video_side .button {
  margin: 0;
  text-align: left;
}
.grp-hub .grp-video_note {
  color: #333;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0;
}
@media only screen and (max-width: 834px) {
  .grp-hub .grp-video {
    grid-template-columns: minmax(0, 1fr);
  }
  .grp-hub .grp-video_side .button {
    text-align: center;
  }
}
/* クリック再生のポスター（JS なし。srcdoc の中のリンクで YouTube を読む） */
.grp-video-poster {
  aspect-ratio: 2 / 1;
  background: #000;
  border-radius: .5rem;
  overflow: hidden;
  position: relative;
}
.grp-video-poster iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.grp-hub .cards_row_card .grp-video-poster {
  margin: 0 0 2rem;
}

/* ===================================================================== */
/* 8. B: hero の変種 grp-hero-single（白地 + 図解を右に。static/images/pastoraldog_hero.svg 1920×883）。03 S2 */
/*    出所は Claude Design の grp.css（値と構造だけ）。図解は fixed ではなく absolute（ページと一緒にスクロール）。up-down は出さない */
/* ===================================================================== */
#hero.grp-hero-single {
  height: auto;
  min-height: 80vh;
  padding-top: 60px;
}
#hero.grp-hero-single::after {
  content: none;
}
#hero.grp-hero-single::before {
  background: #ffffff no-repeat center center;
  background-size: cover;
  position: absolute;
}
#hero.grp-hero-pastoraldog::before {
  background-image: url("../images/pastoraldog_hero.svg");
}
#hero.grp-hero-single .container {
  align-items: center;
  display: flex;
  min-height: calc(80vh - 60px);
  position: relative;
  z-index: 1;
}
#hero.grp-hero-single .main-catch {
  margin-left: calc(-1 * min(10.4rem, max(0px, (100vw - 1170px) / 2 - 1rem)));
  max-width: 680px;
  padding: 6rem 0 9rem;
  position: static;
  transform: none;
}
#hero.grp-hero-single .main-catch h1 {
  color: #00ad5d;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 1.25;
  margin: 0;
  max-width: none;
}
#hero.grp-hero-single .main-catch .h1_lines {
  display: inline-block;
}
#hero.grp-hero-single .main-catch .h1_line {
  display: block;
  text-align: left;
}
#hero.grp-hero-single .main-catch .h1_lines .h1_line-end {
  text-align: right;
}
#hero.grp-hero-single .main-catch_sub {
  color: #333;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.8;
  margin: 2.5rem 0 0;
}
#hero.grp-hero-single .main-catch_sub span {
  display: block;
}
#hero.grp-hero-single .main-catch_company {
  margin-top: 2rem;
}
#hero.grp-hero-single .up-down {
  display: none;
}
@media only screen and (max-width: 1199px) {
  /* 1025〜1199px は .container が 970px で余白が足りず、左へずらすと文字が画面外に出る（DOM 計測で left −7.5px）→ ずらさない */
  #hero.grp-hero-single .main-catch {
    margin-left: 0;
  }
}
@media only screen and (max-width: 1024px) {
  #hero.grp-hero-single::before {
    background-position: center right;
  }
  #hero.grp-hero-single::after {
    background: rgba(255, 255, 255, .8);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  #hero.grp-hero-single .main-catch {
    margin-left: 0;
    padding: 4rem 1rem 8rem;
  }
  #hero.grp-hero-single .main-catch h1 {
    color: #333;
    font-size: 3rem;
    text-align: center;
  }
  #hero.grp-hero-single .main-catch .h1_line {
    text-align: center;
  }
  #hero.grp-hero-single .main-catch_sub {
    font-size: 1.4rem;
    text-align: left;
  }
  #hero.grp-hero-single .main-catch_company {
    text-align: center;
  }
}

/* ===================================================================== */
/* 9. D: hero の変種 grp-hero-adaptiveness（白地 + ネットワークの図解。static/images/adaptiveness_hero.svg 1920×883）。03 S2 */
/* ===================================================================== */
#hero.grp-hero-adaptiveness::before {
  background: #ffffff url("../images/adaptiveness_hero.svg") no-repeat calc(50% - 13.8rem) center;
  background-size: cover;
}
#hero.grp-hero-adaptiveness::after {
  content: none;
}
#hero.grp-hero-adaptiveness .main-catch {
  margin-left: calc(-1 * min(18.4rem, max(0px, (100vw - 1170px) / 2 - 1rem)));
  margin-top: 9.2rem;
  max-width: 46%;
}
#hero.grp-hero-adaptiveness .main-catch h1 {
  font-size: 4.6rem;
  line-height: 1.25;
  max-width: none;
  white-space: nowrap;
}
#hero.grp-hero-adaptiveness .main-catch .h1_lines {
  display: inline-block;
}
#hero.grp-hero-adaptiveness .main-catch .h1_lines .h1_line-end {
  text-align: right;
}
#hero.grp-hero-adaptiveness .main-catch_sub {
  color: #333;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.8;
  margin: 2rem 0 0;
}
#hero.grp-hero-adaptiveness .main-catch_sub span {
  display: block;
  white-space: nowrap;
}
#hero.grp-hero-adaptiveness .main-catch_company {
  color: #333;
  font-size: 1.4rem;
  margin: 1.2rem 0 0;
  white-space: nowrap;
}
#hero.grp-hero-adaptiveness .main-catch_cta {
  margin-top: 2.5rem;
}
@media only screen and (max-width: 1199px) {
  /* 同上（1025〜1199px は左へずらさない）。副文と会社行は 46% の枠に収まらないので折り返す（DOM 計測: 1025px で枠の右 208px まで図解に重なった） */
  #hero.grp-hero-adaptiveness .main-catch {
    margin-left: 0;
  }
  #hero.grp-hero-adaptiveness .main-catch_sub span,
  #hero.grp-hero-adaptiveness .main-catch_company {
    white-space: normal;
  }
}
/* en の hero-adaptiveness（≥1025px だけ）: 英語の h1・副文は 1 行が長い（ja の nowrap は 12 文字前後の前提）。DOM 計測で 1025px に横はみ出し 67px、
   1280px で副文が枠の右 560px まで図解に重なった → 折り返す。≤1024px は共通の規則（max-width: none・折り返し）に任せる（html[lang] の詳細度で漏れないよう media で囲む） */
@media only screen and (min-width: 1025px) {
  html[lang="en"] #hero.grp-hero-adaptiveness .main-catch {
    max-width: 58%;
  }
  html[lang="en"] #hero.grp-hero-adaptiveness .main-catch h1 {
    font-size: 3.8rem;
    white-space: normal;
  }
  html[lang="en"] #hero.grp-hero-adaptiveness .main-catch .h1_lines .h1_line-end {
    text-align: left;
  }
  html[lang="en"] #hero.grp-hero-adaptiveness .main-catch_sub span,
  html[lang="en"] #hero.grp-hero-adaptiveness .main-catch_company {
    white-space: normal;
  }
}
@media only screen and (max-width: 1024px) {
  #hero.grp-hero-adaptiveness::before {
    background-position: center right;
  }
  #hero.grp-hero-adaptiveness::after {
    background: rgba(255, 255, 255, .8);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  #hero.grp-hero-adaptiveness .main-catch {
    margin-left: 0;
    margin-top: 0;
    max-width: none;
  }
  #hero.grp-hero-adaptiveness .main-catch h1 {
    color: #333;
    font-size: 3rem;
    white-space: normal;
  }
  #hero.grp-hero-adaptiveness .main-catch_sub span,
  #hero.grp-hero-adaptiveness .main-catch_company {
    white-space: normal;
  }
  #hero.grp-hero-adaptiveness .main-catch .h1_lines .h1_line-end,
  #hero.grp-hero-adaptiveness .main-catch .h1_line {
    text-align: center;
  }
  #hero.grp-hero-adaptiveness .main-catch_sub {
    font-size: 1.4rem;
    text-align: left;
  }
  #hero.grp-hero-adaptiveness .main-catch_company {
    font-size: 1.3rem;
    text-align: center;
  }
  /* ≤1024px は h1 3 行 + 副文 2 行 + 会社行 + CTA が 80vh に収まらない（DOM 計測: en 375px で hero の下端を 19px 超過）→ hero を中身の高さに合わせる（hero-single と同じ型） */
  #hero.grp-hero-adaptiveness {
    height: auto;
    min-height: 80vh;
  }
  #hero.grp-hero-adaptiveness .container {
    min-height: calc(80vh - 60px);
  }
  #hero.grp-hero-adaptiveness .main-catch {
    padding: 4rem 1rem 8rem;
    position: static;
    transform: none;
  }
}

/* ===================================================================== */
/* 10. B・D のハブの helper（見た目の新部品ではない。02 ラリー Q10）。03 S2 */
/* ===================================================================== */
/* B: title-2 の下の 2 行のリード */
.grp-hub .grp-lead-in {
  font-size: 1.6rem;
  line-height: 1.8;
  margin: 0 auto 3rem;
  max-width: 860px;
  text-align: center;
}
.grp-hub .grp-lead-in span {
  display: block;
}
/* B: 状況カードの「最初に決めること」 */
.grp-hub .grp-decide {
  background: #ebebeb;
  border-left: 3px solid #fabe00;
  border-radius: 0 .5rem .5rem 0;
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  margin: 0 0 2rem;
  padding: 1.2rem 1.5rem;
}
/* B: 向いている / 向いていない */
.grp-hub .grp-fit {
  font-size: 1.6rem;
  line-height: 1.8;
  margin: 0;
}
.grp-hub .grp-fit dt {
  border-bottom: 2px solid #00ad5d;
  display: inline-block;
  font-weight: bold;
  margin: 0 0 .5rem;
}
.grp-hub .grp-fit dt.grp-fit_unfit {
  border-bottom-color: #333;
}
.grp-hub .grp-fit dd {
  margin: 0 0 2rem;
}
.grp-hub .grp-fit dd:last-child {
  margin-bottom: 0;
}
/* B: 番号つきの問い（Before You Decide） */
.grp-hub .grp-q {
  align-items: flex-start;
  display: flex;
  gap: 1.5rem;
}
.grp-hub .grp-q > p {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.6;
  margin: 0;
}
.grp-hub .grp-q .grp-article_num,
.grp-child .grp-article_num {
  background: #000;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
  font-size: 1.6rem;
  height: 3.2rem;
  line-height: 3.2rem;
  text-align: center;
  width: 3.2rem;
}
/* D: プログラムの説明（文 + 図）と 3 つの価値 */
.grp-hub .grp-program {
  align-items: center;
  display: flex;
  gap: 3rem;
}
.grp-hub .grp-program .lead-text {
  flex: 1 1 0;
  min-width: 0;
}
.grp-hub .grp-program .figure {
  flex: 0 0 40%;
  margin: 0;
}
.grp-hub .grp-program .figure img {
  border-radius: .5rem;
}
.grp-hub .grp-values {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 3rem 0 0;
}
.grp-hub .grp-values_item {
  border-top: 3px solid #00ad5d;
  padding: 1.5rem 0 0;
}
.grp-hub .grp-values_item .grp-values_title {
  color: #333;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 .8rem;
}
.grp-hub .grp-values_item p {
  font-size: 1.4rem;
  line-height: 1.8;
  margin: 0;
}
/* D: 3 つの役割の図（CSS だけ。role="img" + aria-label） */
.grp-hub .grp-parties {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  margin: 0 0 2rem;
}
.grp-hub .grp-parties_item {
  background: #fff;
  border: 2px solid #333;
  border-radius: .5rem;
  flex: 1 1 0;
  max-width: 320px;
  min-width: 0;
  padding: 2rem;
  position: relative;
  text-align: center;
}
.grp-hub .grp-parties_item.grp-parties_item-sales {
  border-color: #00ad5d;
}
.grp-hub .grp-parties_item.grp-parties_item-cert {
  border-color: #fabe00;
}
.grp-hub .grp-parties_label {
  color: #333;
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 .8rem;
}
.grp-hub .grp-parties_who {
  color: #333;
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
}
.grp-hub .grp-parties_item + .grp-parties_item::before {
  border-color: transparent transparent transparent #333;
  border-style: solid;
  border-width: 10px 0 10px 12px;
  content: "";
  left: -2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 834px) {
  .grp-hub .grp-program {
    flex-direction: column;
  }
  .grp-hub .grp-program .figure {
    flex: none;
    max-width: 480px;
    width: 100%;
  }
  .grp-hub .grp-values {
    grid-template-columns: minmax(0, 1fr);
  }
  .grp-hub .grp-parties {
    align-items: stretch;
    flex-direction: column;
  }
  .grp-hub .grp-parties_item {
    max-width: none;
  }
  .grp-hub .grp-parties_item + .grp-parties_item::before {
    border-color: #333 transparent transparent transparent;
    border-width: 12px 10px 0 10px;
    left: 50%;
    top: -2rem;
    transform: translateX(-50%);
  }
}

/* ===================================================================== */
/* 11. 子ページ型 .grp-child（骨格は layouts/section/news_251223.html + static/css/style_secondary.css）。03 S2 */
/*     sub-header の背景だけ #sub-header.grp-subheader-<brand> で差し替える（規則の正本は style_secondary.css:1-13） */
/* ===================================================================== */
.secondary #sub-header.grp-subheader-fam333::before {
  background: url("../images/fam333_usecases.jpg") no-repeat center center;
  background-size: cover;
  opacity: .8;
}
#sub-header .container {
  position: relative;
}
.grp-child .title-1 {
  margin-top: 0;
}
.grp-child section {
  overflow: hidden;
  padding-top: 6rem;
}
.grp-child section .title-1 {
  margin-top: -6rem;
}
.grp-child .contact {
  min-height: 0;
}
/* 記事の項目（番号 + 見出し + 本文） */
.grp-child .grp-article_item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
}
.grp-child .grp-article_item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.grp-child .grp-article_item .h3 {
  align-items: baseline;
  display: flex;
  gap: 1.2rem;
  margin: 0 0 1.5rem;
}
/* 導入（文 + 挿絵） */
.grp-child .grp-intro {
  align-items: center;
  display: flex;
  gap: 3rem;
}
.grp-child .grp-intro .lead-text {
  flex: 1 1 0;
  min-width: 0;
}
.grp-child .grp-intro .figure {
  flex: 0 0 36%;
  margin: 0;
}
.grp-child .grp-intro .figure img {
  border-radius: .5rem;
}
.grp-child .grp-intro .figure figcaption {
  color: #333;
  font-size: 1.2rem;
  margin: .5rem 0 0;
  text-align: right;
}
/* そのまま使える文面（左の罫 + 挿絵） */
.grp-child .grp-template-wrap {
  align-items: flex-start;
  display: flex;
  gap: 3rem;
}
.grp-child .grp-template-wrap .grp-template {
  flex: 1 1 0;
  min-width: 0;
}
.grp-child .grp-template-wrap .figure {
  flex: 0 0 220px;
  margin: 0;
}
.grp-child .grp-template {
  border-left: 3px solid #00ad5d;
  padding-left: 2rem;
}
.grp-child .grp-template p {
  margin-bottom: 1.2rem;
}
.grp-child .grp-template p:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 834px) {
  .grp-child .grp-intro {
    flex-direction: column;
  }
  .grp-child .grp-intro .figure {
    flex: none;
    max-width: 320px;
    width: 100%;
  }
  .grp-child .grp-template-wrap {
    flex-direction: column-reverse;
  }
  .grp-child .grp-template-wrap .figure {
    flex: none;
    max-width: 200px;
  }
}

/* ===================================================================== */
/* 12. 子ページの部品（表の追加規則・タグ行つき sub-header・統計カード）。03 S3。出所は Claude Design の grp.css（値と構造だけ） */
/* ===================================================================== */
/* 表の追加規則（基本の .grp-table・横スクロール・見出し列 sticky は §3 (3)） */
.grp-table td.grp-table_empty {
  color: #333;
  text-align: center;
}
.grp-child .grp-table_wrap {
  margin: 0 -1rem;
  padding: 0 1rem;
}
.grp-table thead th.grp-table_fit {
  border-bottom: 3px solid #00ad5d;
}
.grp-table td.grp-table_fix {
  font-weight: bold;
}
.grp-table.grp-table_two {
  min-width: 520px;
}
.grp-table.grp-table_two td:first-child {
  background: #ebebeb;
}
.grp-table td.grp-table_badge {
  text-align: center;
  width: 90px;
}
.grp-table td.grp-table_badge img {
  display: inline-block;
  height: 56px;
  width: auto;
}
.grp-table td.grp-table_badge span.grp-table_nobadge {
  color: #333;
}
/* sub-header の変種: タグ行つき（高さは中身に合わせる。正本の #sub-header は style.css:486-505・.secondary は style_secondary.css:6-13） */
.secondary #sub-header.grp-subheader-tags {
  height: auto;
  min-height: 0;
  max-height: none; /* style.css:490 の max-height: 320px を解除（2026-10-24 gl-vs0.8。これが無いと height: auto でも 320px で止まり、375px で中身が #intro にはみ出す） */
  padding: calc(60px + 6rem) 0 6rem;
}
.secondary #sub-header.grp-subheader-tags .sub-title {
  position: static;
  transform: none;
}
.secondary #sub-header.grp-subheader-tags .sub-title h1.h1_xsmall {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.4;
}
.secondary #sub-header.grp-subheader-tags .sub-title h1.h1_xsmall .grp-subheader_cat {
  display: block;
  font-size: 1.4rem;
  font-weight: normal;
  margin-bottom: 1rem;
}
.secondary #sub-header.grp-subheader-tags .grp-subheader_sub {
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.8;
  margin: 2rem auto 0;
  max-width: 760px;
  text-align: center;
}
.secondary #sub-header.grp-subheader-tags .grp-subheader_sub span {
  display: block;
}
/* 背景の差し替え（image-spec.md §3: A の子 = odde_hero.svg、B の子 = pastoraldog_hero_03_start-small.svg。緑の重ねは既存の rgba(0,78,42,.7) のまま） */
.secondary #sub-header.grp-subheader-odde::before {
  background: #ffffff url("../images/odde_hero.svg") no-repeat center center;
  background-size: cover;
  opacity: 1;
}
.secondary #sub-header.grp-subheader-pastoraldog::before {
  background: #ffffff url("../images/pastoraldog_hero_03_start-small.svg") no-repeat center center;
  background-size: cover;
  opacity: 1;
}
/* 図解（白地が多い）の上では緑の重ね .7 だと白文字が 4.40:1（16px の副文が AA 未満）→ この 2 変種だけ .8（5.76:1）。写真の変種（既存の .7）はそのまま */
.secondary #sub-header.grp-subheader-odde::after,
.secondary #sub-header.grp-subheader-pastoraldog::after {
  background: rgba(0, 78, 42, .8);
}
/* ページ内のタグ（丸い白のタグ。44px 以上・# 接頭） */
.grp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.grp-tags_label {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.grp-tags li a {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 5rem;
  color: #333;
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1.4;
  min-height: 44px;
  padding: 1.1rem 1.8rem;
  text-decoration: none;
}
.grp-tags li a::before {
  content: "#";
  margin-right: .3em;
}
.grp-tags li a:hover,
.grp-tags li a:focus {
  background: #fabe00;
  border-color: #fabe00;
  color: #333;
}
.grp-tags li a:focus-visible {
  outline: 3px solid #fabe00;
  outline-offset: 3px;
}
@media only screen and (max-width: 1024px) {
  .secondary #sub-header.grp-subheader-tags {
    padding: calc(60px + 4rem) 0 4rem;
  }
  .secondary #sub-header.grp-subheader-tags .sub-title h1.h1_xsmall {
    font-size: 2.2rem;
    padding: 0 1rem;
  }
  .secondary #sub-header.grp-subheader-tags .grp-subheader_sub {
    font-size: 1.4rem;
    padding: 0 1rem;
    text-align: left;
  }
  .grp-tags {
    padding: 0 1rem;
  }
  .grp-tags li a {
    font-size: 1.3rem;
    padding: 1rem 1.4rem;
  }
}
@media only screen and (max-width: 834px) {
  .grp-table.grp-table_has-badge tbody th {
    position: static;
  }
}
/* 導入の挿絵（角丸なし・34%） */
.grp-child .grp-intro .figure.grp-intro_illust {
  flex: 0 0 34%;
}
.grp-child .grp-intro .figure.grp-intro_illust img {
  border-radius: 0;
}
/* FAQ をカードに入れるときの余白 */
.grp-child .cards_row_card .grp-faq {
  margin: -1rem 0;
}
/* 番号つきの問い（h3 + 本文を横に） */
.grp-q > div {
  flex: 1 1 0;
  min-width: 0;
}
/* カード全体をリンクにする（次に読むページ） */
.grp-hub .cards_row_card.grp-card-link {
  color: #333;
}
.grp-hub .cards_row_card.grp-card-link:hover,
.grp-hub .cards_row_card.grp-card-link:focus {
  color: #333;
  box-shadow: 0 0 0 3px #fabe00;
}
/* 統計カード（/training-stats/。数値の欄は承認値の全文: 先頭の数値を大きく、残りを小さく = HUMAN 2026-09-22 S3 Q3） */
.grp-stats .cards_row + .cards_row {
  margin-top: 3rem;
}
.grp-stat .h3 {
  font-size: 1.8rem;
  margin: 0 0 2rem;
}
.grp-stat_figure {
  align-items: baseline;
  border-bottom: 2px solid #00ad5d;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin: 0 0 2rem;
  padding: 0 0 1.5rem;
}
.grp-stat_figure .grp-stat_label {
  color: #333;
  flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: bold;
}
.grp-stat_figure .grp-stat_value {
  color: #333;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3;
}
.grp-stat_figure .grp-stat_detail {
  color: #333;
  flex-basis: 100%;
  font-size: 1.3rem;
  line-height: 1.6;
}
.grp-stat_meta {
  display: grid;
  font-size: 1.3rem;
  gap: .6rem 1.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  line-height: 1.6;
  margin: 0 0 2rem;
}
.grp-stat_meta dt {
  color: #333;
  font-weight: bold;
}
.grp-stat_meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.grp-stat_meta dd a {
  color: #333;
  display: inline-block;
  min-height: 44px;
  padding: .5rem 0;
  text-decoration: underline;
}
.grp-stat_meta dd a:hover,
.grp-stat_meta dd a:focus {
  color: #333;
  text-decoration-color: #fabe00;
}
.grp-stat_why {
  background: #ebebeb;
  border-radius: .5rem;
  font-size: 1.4rem;
  line-height: 1.8;
  margin: 0;
  padding: 1.5rem;
}
.grp-stat_why strong {
  display: block;
  font-size: 1.2rem;
  margin: 0 0 .5rem;
}

/* ===================================================================== */
/* 13. 子ページの部品（考え方の式・最終確認日の行・表のグループ行・公開コース表の幅）。03 S4。出所は Claude Design の grp.css（値と構造だけ）。色は 6 色のみ */
/* ===================================================================== */
/* /odde_private-training/: 式の 2 枚（.cards_row の中。左右のカードと中央の丸。834px 以下は縦積み = .cards_row の既存規則） */
.grp-formula {
  text-align: center;
}
.grp-formula_title {
  border-bottom: 2px solid #00ad5d;
  color: #333;
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 2rem;
  padding: 0 0 .5rem;
}
.grp-formula_line {
  color: #333;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.8;
  margin: 0;
}
.grp-formula_vs {
  align-self: center;
  background: #000;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
  font-size: 2.4rem;
  font-weight: bold;
  height: 5.6rem;
  line-height: 5.6rem;
  text-align: center;
  width: 5.6rem;
}
@media only screen and (max-width: 834px) {
  .grp-formula_vs {
    margin: -1rem auto;
  }
}
/* /odde_schedule/: 最終確認日の行（値は人間が i18n に足してから表示 = $showCourseList） */
.grp-checked {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: center;
  margin: 0 0 1.5rem;
}
.grp-checked_label {
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
}
.grp-checked_date {
  font-size: 1.6rem;
}
/* /odde_schedule/: 表のグループ行（scope=rowgroup・colspan）と最小幅。834px 以下は横スクロールに任せ、行見出しの sticky（§3 (3)）は解除 */
.grp-table_group th {
  background: #ebebeb;
  border-bottom: 2px solid #00ad5d;
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 1rem 1.5rem;
}
.grp-table.grp-table_schedule {
  min-width: 560px;
}
@media only screen and (max-width: 834px) {
  .grp-table.grp-table_schedule tbody th {
    position: static;
  }
}
/* /pastoraldog_ai-native-lab/: カードの見出しに番号の丸を並べる（§11 の .grp-article_item .h3 と同じ並び。カードには罫と余白が付かないので別クラス） */
.grp-child .cards_row_card .h3.grp-num-title {
  align-items: baseline;
  display: flex;
  gap: 1.2rem;
}
/* title-1（黒帯）の小見出し: 既存 style.css の padding 1.5rem 1rem 2rem では span（1.8rem × line-height）が帯の下に 10px はみ出す（本番のトップも同じ幾何）。
   新設ページだけ下の余白を 1rem 足して帯に収める（HUMAN 2026-09-22 S4 Q4。既存 CSS は不変。トップは範囲外として学びに記録） */
.grp-hub .title-1 {
  padding-bottom: 3rem;
}

/* ============================================================
   §14 トップの Group Services カードの図解（2026-09-23 S5・HUMAN 案 A）
   円を切り出した SVG（static/images/group_{odde,pastoraldog,adaptiveness}.svg）を
   #ebebeb（既存の 6 色）の地に中央で収める。写真のカード（.grp-card-figure だけ）は 2:1 の cover のまま
   ============================================================ */
.grp-card-figure_illust {
  background: #ebebeb;
}
.grp-card-figure_illust img {
  display: block;
  object-fit: contain;
}

/* ============================================================
   §15 文中の外部リンク（2026-09-23 S5・/odde/ の「Odd-e Japan のサイト」×2）
   緑を文字色にしない（#333 + 下線）。inline のまま上下の padding でタップ領域を広げる（行送りは変えない）
   ============================================================ */
.grp-hub .grp-inline-link {
  color: #333;
  padding: 1.3rem 0;   /* inline の上下 padding は行送りを変えずタップ領域だけ広げる（lead-text の 16px で 44px = DOM 計測） */
  text-decoration: underline;
}
.grp-hub .grp-inline-link:hover,
.grp-hub .grp-inline-link:focus {
  color: #333;
  text-decoration: none;
}

/* ============================================================
   §16 /odde/ hero の 3 ボタン（2026-09-23 S5 round7）
   .main-catch_cta の型のまま、3 つを折り返して並べる（≤834px は縦積み）
   ============================================================ */
.grp-hub .grp-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.2rem;
}
.grp-hub .grp-hero-btns .button {
  margin: 0;
}
@media only screen and (max-width: 834px) {
  .grp-hub .grp-hero-btns {
    flex-direction: column;
    align-items: center;   /* ≤1024px の .main-catch_cta は中央寄せなので揃える */
  }
}

/* ============================================================
   §17 /video/ 動画制作ハブ（2026-10-24 03 S1）
   正本: docs/design/claude-design/20261024/r2-inline.css 41〜85 行（Claude Design r2 の新 CSS）。
   url は static/images/… → ../images/… に、色は既存の 6 色のみ、トラックは minmax(0,1fr)。
   新部品 = grp-stages 1 つ（VS-20）。補助規則 = grp-icon / grp-hero-keys / grp-checklist / grp-terms の 4 つ
   （5 つ目の grp-top-hero はトップ hero を作る 03 S3 で足す = HUMAN 2026-10-24 計画ラリー）。
   ============================================================ */
/* hero: 既存 .grp-hero-fam333（§6 C）と同型。写真は service_img-03.jpg（VS-24 の代替。実写が届いたら人間が差し替え） */
#hero.grp-hero-video::before {
  background: url("../images/service_img-03.jpg") no-repeat 80% 50% #ebebeb;
  background-size: cover;
}
/* 高さは中身で決める（r2 の min-height 80vh は使わない）。パネルの余白を詰め、幅 900px で 3 点・タグを 1 行に = 縦を約 2/3 に（HUMAN 2026-10-24「ヒーローが縦長」） */
#hero.grp-hero-video {
  height: auto;
  min-height: 0;
}
#hero.grp-hero-video .container {
  min-height: 0;
}
#hero.grp-hero-video .main-catch {
  margin: 2.5rem 0 3rem;
  max-width: 1040px;
  padding: 2.4rem 3.2rem;
  position: static;
  transform: none;
}
#hero.grp-hero-video .grp-hero-keys {
  gap: 1rem 2rem;
}
#hero.grp-hero-video .grp-hero-keys li {
  font-size: 1.4rem;
}
@media only screen and (min-width: 1025px) {
  #hero.grp-hero-video .main-catch_main h1 {
    font-size: 5rem;   /* 既存 6rem だと en の h1 が 2 行になる（hero を約 2/3 にするための本ページ限定） */
  }
}
#hero.grp-hero-video .main-catch_sub {
  margin-top: 1.5rem;
}
#hero.grp-hero-video .main-catch_company {
  margin-top: .8rem;
}
#hero.grp-hero-video .main-catch_cta {
  margin-top: 2rem;
}
#hero.grp-hero-video .grp-tags {
  justify-content: flex-start;
  margin-top: 1.5rem;
}
/* hero の 3 点（覚えてもらう 3 つ。themify の既存アイコン） */
.grp-hero-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}
.grp-hero-keys li {
  align-items: center;
  color: #333;
  display: flex;
  font-size: 1.5rem;
  font-weight: bold;
  gap: 1rem;
  line-height: 1.4;
}
.grp-hero-keys .grp-icon {
  font-size: 1.7rem;
  height: 3.6rem;
  margin: 0;
  width: 3.6rem;
}
/* アイコンの丸（黒の上に白。themify-icons は css_import.html で既に読込） */
.grp-icon {
  align-items: center;
  background: #000;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 2.6rem;
  height: 6rem;
  justify-content: center;
  margin: 0 auto 2rem;
  width: 6rem;
}
.grp-icon_inline {
  font-size: 1.4rem;
  height: 3.2rem;
  margin: 0;
  width: 3.2rem;
}
.grp-icon_muted {   /* 「約束しないこと」の印（r2 は inline style の #ebebeb / #333） */
  background: #ebebeb;
  color: #333;
}
/* 新部品: grp-stages — 関わり方 3 段の帯（≤834px は 1 列・矢印は下向き = 既存 .grp-steps と同じ振る舞い） */
.grp-stages {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.grp-stages_item {
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 0.125em 0.125em 0 rgb(0 0 0 / 13%);
  display: flex;
  flex-direction: column;
  position: relative;
}
.grp-stages_title {
  align-items: center;
  background: #000;
  border-bottom: 3px solid #fabe00;
  border-radius: .5rem .5rem 0 0;
  color: #fff;
  display: flex;
  font-size: 2rem;
  font-weight: bold;
  gap: 1.2rem;
  line-height: 1.4;
  margin: 0;
  padding: 1.4rem 2.5rem;
}
.grp-stages_title i {
  font-size: 2.2rem;
}
.grp-stages_body {
  flex: 1 1 auto;
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 0;
  padding: 2.5rem 2.5rem 0;
}
.grp-stages_body dt {
  border-bottom: 2px solid #00ad5d;
  color: #333;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0 0 .6rem;
}
.grp-stages_body dd {
  color: #333;
  margin: 0 0 2rem;
}
.grp-stages_item + .grp-stages_item::before {
  border-color: transparent transparent transparent #00ad5d;
  border-style: solid;
  border-width: 10px 0 10px 12px;
  content: "";
  left: -2.1rem;
  position: absolute;
  top: 3rem;
}
/* 約束の一覧（check / close の既存アイコン。印は aria-hidden、意味は見出しと文言で取れる） */
.grp-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.grp-checklist li {
  align-items: flex-start;
  display: flex;
  gap: 1.2rem;
  margin: 0 0 1.2rem;
}
.grp-checklist li:last-child {
  margin: 0;
}
/* お渡しするもの 4 枚（契約の 4 文 F-V-07） */
.grp-terms {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}
.grp-terms li {
  border-top: 3px solid #00ad5d;
  padding: 1.5rem 0 0;
  text-align: center;
}
.grp-terms_title {
  color: #333;
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 .6rem;
}
.grp-terms p {
  font-size: 1.4rem;
  line-height: 1.7;
  margin: 0;
}
/* ページ固有: ②「こうします」のラベル行 / ⑧ お受けしていないこと（data-list 4 区分の全表示 = VS-27。dt は ≤1024px で幅 100% = r1 components.md §2） */
#situations .grp-decide span {
  display: block;
  font-size: 1.3rem;
  margin: 0 0 .3rem;
}
#notdo .data-list dt {
  width: 260px;   /* 既存 160px では「動画制作の契約に含まれないもの」が語の途中で折れる（r1 components.md §2） */
}
@media only screen and (max-width: 1024px) {
  #hero.grp-hero-video .main-catch {
    margin: 2.5rem 0 3rem;
    max-width: none;
  }
  #hero.grp-hero-video .main-catch_sub {
    margin-top: 2.4rem;   /* ≤1024px の h1（.h1_line の行送り 0.87）は en の descender が次行に掛かる → 見出しとの間を空ける */
  }
  #hero.grp-hero-video .grp-tags {
    justify-content: center;
  }
  #hero.grp-hero-video .grp-hero-keys {
    justify-content: center;
  }
  #hero.grp-hero-video .grp-hero-keys li {
    color: #fff;
  }
  #notdo .data-list dt {
    width: 100%;
  }
}
@media only screen and (max-width: 834px) {
  .grp-stages {
    gap: 3.5rem;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .grp-stages_item + .grp-stages_item::before {
    border-color: #00ad5d transparent transparent transparent;
    border-width: 12px 10px 0 10px;
    left: 50%;
    top: -2.4rem;
    transform: translateX(-50%);
  }
  .grp-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 480px) {
  .grp-terms {
    grid-template-columns: minmax(0, 1fr);
  }
  .grp-hero-keys {
    gap: .8rem 1.6rem;   /* 3 点が 3 行になる幅では行間と丸を小さく（hero の縦を詰める） */
  }
  .grp-hero-keys .grp-icon {
    font-size: 1.4rem;
    height: 2.8rem;
    width: 2.8rem;
  }
}
/* ③ 4 枚のカード（撮り方 4）: ≥835px は 2 列 × 2 段（r2 の 2 列 grid と同じ見え方。既存 .cards_row は nowrap で 4 枚だと 1 枚 155〜198px になり en の語が入らない = 03 S1 の DOM 計測） */
@media only screen and (min-width: 835px) {
  #ways .cards_row {
    flex-wrap: wrap;
  }
  #ways .cards_row_card {
    flex: 0 0 calc(50% - 50px);
    margin-bottom: 3rem;
  }
}
/* hero の写真（::before）と黒の膜（::after）は既存の型だと 100vh 固定。本ページは文言（特に en）で hero が 100vh を超えるので、hero の高さに追従させる（03 S1 の DOM 計測: en 1280px で hero 942px に対し ::before 800px） */
#hero.grp-hero-video::before,
#hero.grp-hero-video::after {
  height: 100%;
}
/* 既存の #hero::before / ::after（style_group.css 19〜27 行）は position: fixed = 高さが viewport に固定。hero 自身を stacking context にして（z-index: 0）、写真と膜を hero の高さに貼る */
#hero.grp-hero-video {
  z-index: 0;
}
#hero.grp-hero-video::before,
#hero.grp-hero-video::after {
  position: absolute;
}

/* ============================================================
   §18 /video_ongoing/ 納品で終わらない動画制作（2026-10-24 03 S2）
   正本: docs/design/claude-design/20261024/r2-inline.css 96〜119 行（Claude Design r2 の子ページ分）。
   url は static/images/… → ../images/… に、色は既存の 6 色のみ。hero の余白・高さの扱いは §17 の hero-video と同値。
   新しい部品は無い: 3 段の図は既存 .grp-parties（§10）、3 点は既存 .grp-values（§10）、表は既存 .grp-table（§3）を流用し、ページ固有の補助規則だけ足す。
   ============================================================ */
/* hero: 既存 .grp-hero-fam333（§6 C）・§17 hero-video と同型。写真は intro_image.jpg（VS-24 の代替・03 決裁 5 の 50% 70%。実写が届いたら人間が差し替え） */
#hero.grp-hero-ongoing::before {
  background: url("../images/intro_image.jpg") no-repeat 50% 70% #ebebeb;
  background-size: cover;
}
/* 高さは中身で決める（r2 の min-height 80vh は使わない）。既存 #hero::before / ::after（19〜27 行）は position: fixed = viewport 固定なので、
   hero を stacking context（z-index: 0）にして写真と膜を hero の高さに貼る（S1 の学び §3-3） */
#hero.grp-hero-ongoing {
  height: auto;
  min-height: 0;
  z-index: 0;
}
#hero.grp-hero-ongoing::before,
#hero.grp-hero-ongoing::after {
  height: 100%;
  position: absolute;
}
#hero.grp-hero-ongoing .container {
  min-height: 0;
}
#hero.grp-hero-ongoing .main-catch {
  margin: 2.5rem 0 3rem;
  max-width: 1040px;
  padding: 2.4rem 3.2rem;
  position: static;
  transform: none;
}
@media only screen and (min-width: 1025px) {
  #hero.grp-hero-ongoing .main-catch_main h1 {
    font-size: 5rem;   /* §17 と同値（r2 は 5.2rem）。en の h1 は 2 行 */
  }
}
#hero.grp-hero-ongoing .main-catch_sub {
  margin-top: 1.5rem;
}
#hero.grp-hero-ongoing .main-catch_company {
  margin-top: .8rem;
}
#hero.grp-hero-ongoing .main-catch_cta {
  margin-top: 2rem;
}
#hero.grp-hero-ongoing .grp-hero-keys {
  gap: 1rem 2rem;
}
#hero.grp-hero-ongoing .grp-hero-keys li {
  font-size: 1.4rem;
}
#hero.grp-hero-ongoing .grp-tags {
  justify-content: flex-start;
  margin-top: 1.5rem;
}
/* hero の区分行（h1 の上の小さな 1 行。子ページの型 .grp-subheader_cat に当たる） */
.grp-hero-cat {
  color: #333;
  display: block;
  font-size: 1.4rem;
  font-weight: normal;
  letter-spacing: .1rem;
  margin: 0 0 1.5rem;
}
/* 続ける形の 3 点: 既存 .grp-values（§10 D）を中央寄せ + 丸アイコン */
.grp-hub .grp-values_center {
  text-align: center;
}
.grp-hub .grp-values_center .grp-values_title {
  font-size: 1.7rem;
}
.grp-hub .grp-values_center .grp-icon {
  margin-bottom: 1.5rem;
}
/* 3 段の図: 既存 .grp-parties（§10 D・role="img"）の上に「このページの形」のピル。2・3 段目の枠色は r2 どおり緑・黄 */
.grp-stages-fig {
  margin: 0 0 3rem;
  text-align: center;
}
.grp-stages-fig_here {
  background: #fabe00;
  border-radius: 5rem;
  color: #333;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0 0 1.2rem;
  padding: .4rem 1.4rem;
}
.grp-stages-fig .grp-parties_item-stage2 {
  border-color: #00ad5d;
}
.grp-stages-fig .grp-parties_item-stage3 {
  border-color: #fabe00;
}
.grp-stages-fig .grp-parties_item .grp-icon {
  font-size: 1.6rem;
  height: 3.6rem;
  margin: 1rem auto;
  width: 3.6rem;
}
@media only screen and (max-width: 1024px) {
  #hero.grp-hero-ongoing .main-catch {
    margin: 2.5rem 0 3rem;
    max-width: none;
  }
  #hero.grp-hero-ongoing .main-catch_sub {
    margin-top: 2.4rem;   /* §17 と同じ理由（.h1_line の行送り 0.87 と en の descender） */
  }
  #hero.grp-hero-ongoing .grp-tags,
  #hero.grp-hero-ongoing .grp-hero-keys {
    justify-content: center;
  }
  #hero.grp-hero-ongoing .grp-hero-keys li,
  #hero.grp-hero-ongoing .grp-hero-cat {
    color: #fff;
  }
  #hero.grp-hero-ongoing .grp-hero-cat {
    text-align: center;
  }
}

/* ===================================================================== */
/* 19. トップの hero（.grp-top-hero = 3 内容 1 枚。03 S3・2026-10-24。VS-17・VS-20 の補助規則 5 つ目） */
/*     正本: docs/design/claude-design/20261024/r2-inline.css 4-30 行（6 色 + tokens_decisions の黒 rgba .82 / .72 / 0）。 */
/*     列と img の規則は r2 の見本が inline style で持っていたものを規則にした。grid の列は minmax(0, Nfr)（en の長い語で広がらない）。 */
/*     /video/ が draft の間は index.html の if 分岐（video_pages.html）が偽なので出ない = 既存の splide のまま（HUMAN 2026-10-24 ラリー①(a)） */
/* ===================================================================== */
.grp-top-hero {
  aspect-ratio: 1920 / 700;
  background: #000;
  container-type: inline-size;
  display: grid;
  gap: .3rem;
  grid-template-columns: minmax(0, 22fr) minmax(0, 56fr) minmax(0, 22fr);
  padding-top: 60px;
  position: relative;
}
.grp-top-hero_side,
.grp-top-hero_main {
  background: #000;
  color: #fff;
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: none;       /* style.css の a { transition: all 0.2s } が ≤834px の order: -1 を遷移させ、カードが入れ替わって CLS 0.271（HUMAN 2026-10-26 DN-CD-68・investigation-fcp-cls-20261026.md） */
}
.grp-top-hero_main {
  border-top: .6rem solid #fabe00;
}
.grp-top-hero img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}
.grp-top-hero_side img {
  object-position: 100% 50%;   /* 既存写真の右側を切り出す（image-spec #2 #3） */
  opacity: .5;
}
.grp-top-hero_side:last-child img {
  opacity: .55;
}
.grp-top-hero_main img {
  object-position: 62% 40%;    /* bg_vision.jpg の仮置き（VS-24。実写 #1 は gl-vs0.4） */
}
.grp-top-hero_sidetext {
  bottom: 9%;
  color: #fff;
  left: 9%;
  position: absolute;
  right: 9%;
}
.grp-top-hero_small {
  display: block;
  font-size: max(.95cqw, 11px);
  line-height: 1.4;
  margin-bottom: .5cqw;
}
.grp-top-hero_h {
  display: block;
  font-size: max(1.6cqw, 14px);
  font-weight: bold;
  line-height: 1.35;
}
.grp-top-hero_more {
  border-bottom: 2px solid #fabe00;
  display: inline-block;
  font-size: max(1cqw, 12px);
  font-weight: bold;
  margin-top: 1cqw;
  min-height: 0;
  padding-bottom: .2cqw;
}
.grp-top-hero_panel {
  background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .82) 76%, rgba(0, 0, 0, 0) 100%);
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.grp-top-hero_text {
  color: #fff;
  display: block;
  left: 7%;
  position: absolute;
  right: 7%;              /* r2 は nowrap（右端なし）。en の見出しが 1280px でも列からはみ出す（03 S3 の DOM 計測）ので折り返す */
  top: 16%;
  white-space: normal;
}
.grp-top-hero_sub {
  color: #fabe00;
  display: block;
  font-size: 1.5cqw;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 1.3cqw;
}
.grp-top-hero_title {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.1cqw;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.2;
}
.grp-top-hero_btn {
  background: #fff;
  border-radius: 10cqw;
  align-items: center;
  color: #333;
  display: inline-flex;    /* r2 は inline-block。min-height 44px の箱で文字が上に寄るので中央に */
  font-size: 1.6cqw;
  font-weight: bold;
  line-height: 1;
  margin-top: 2.4cqw;
  min-height: 44px;
  padding: 1cqw 2.4cqw;
}
.grp-top-hero a:hover .grp-top-hero_btn,
.grp-top-hero a:focus .grp-top-hero_btn {
  background: #fabe00;
}
.grp-top-hero a:hover .grp-top-hero_more,
.grp-top-hero a:focus .grp-top-hero_more {
  color: #fabe00;
}
.grp-top-hero a:focus-visible {
  outline: 3px solid #fabe00;
  outline-offset: -3px;
}
@media only screen and (max-width: 834px) {
  .grp-top-hero {
    aspect-ratio: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .grp-top-hero_main {
    min-height: 56vw;
    order: -1;              /* 動画制作を最上段に */
  }
  .grp-top-hero_side {
    min-height: 150px;
  }
  .grp-top-hero_side img {
    transform: scale(2);            /* cover だけだと ≤834px で写真の焼き込み文字（左半分）が見える。右半分だけを拡大して見せる（image-spec #2 #3「右側を切り出し」） */
    transform-origin: 100% 50%;
  }
  .grp-top-hero_sidetext {
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
  }
  .grp-top-hero_panel {
    background: rgba(0, 0, 0, .72);
  }
  .grp-top-hero_text {
    inset: auto;            /* ≥835px の left 7% / top 16% を relative に持ち込まない（持ち込むと右・下へずれて overflow hidden に切れる = 03 S3 の計測） */
    padding: 3rem 1.5rem 3rem;
    position: relative;     /* r2 は static。static だと絶対配置の img と panel の下に隠れて文言が見えない（r2 の sp 見本も同じ） */
    z-index: 1;
  }
  .grp-top-hero_title {
    font-size: 3.2rem;
  }
  .grp-top-hero_sub {
    font-size: 1.5rem;
  }
  .grp-top-hero_btn {
    border-radius: 5rem;
    font-size: 1.6rem;
    margin-top: 2.4rem;
    padding: 1.2rem 2.4rem;
  }
  .grp-top-hero_small {
    font-size: 1.2rem;
  }
  .grp-top-hero_h {
    font-size: 1.7rem;
  }
  .grp-top-hero_more {
    font-size: 1.3rem;
    margin-top: 1rem;
  }
}

/* ==== §20 05 seo（HUMAN 2026-10-25 VS-64・VS-67、範囲は 2026-10-26 DN-CD-66 で追認）: .grp-hub の上書き規則。既存規則は不変。
   .grp-hub は動画 2 ページ専用ではない。#top に .grp-hub を持つ 14 ページ（動画 2 + グループ 12 = 4 群のハブ・子ページ 7 つ・/training-stats/）、ja/en に当たる。
   色は 6 色の外になるが、ブランドの緑 #00ad5d を 4.5:1（白地）を満たす最も近い緑 #007f44（5.10:1）に寄せる。
   .grp-hub を持たないページ（トップ・採用・お知らせなど）の見た目は変えない。調査: docs/design/claude-design/20261025/investigation-grp-hub-leak.md ==== */
.grp-hub .title-2,
.grp-hub .title-2 h2 {
  color: #007f44;
}
.grp-hub .contact-form .tel-btn a {
  color: #007f44;
}
.grp-hub #footer .copyright {
  background-color: #007f44;
}
@media only screen and (max-width: 1024px) {
  /* .title-2 の負のマージン（style.css: margin 0 -0.5rem 3rem）が ≤1024px で左に 5px はみ出す（04 S1 §6-2）→ .grp-hub の 14 ページで 0 に */
  .grp-hub .title-2 {
    margin-left: 0;
    margin-right: 0;
  }
}

/* §20 追補（HUMAN 2026-10-25 VS-64 の lang-btn・VS-56 のトップのリンク。2026-10-26 DN-CD-66・67 で範囲を直した）:
   言語切替は color: inherit + opacity 0.4 で 2.24:1（lang-btn）→ .grp-hub の 14 ページで不透明の #333（現在の言語は下線で区別）。
   トップの Services カードに足した /video/ リンク（.grp-links は .grp-hub 外なので #00ad5d を継ぐ）→ トップの #services の中だけ #007f44。
   /pastoraldog/ にも #services があるので、.grp-hub を持たない #top（= トップ）に絞る（DN-CD-66。/pastoraldog/ は .grp-hub .grp-links a の #333 に戻る） */
.grp-hub .header-lang-switch .lang-btn,
.grp-hub .header-lang-switch .lang-btn.lang-current,
.grp-hub .header-lang-switch .lang-btn:hover {
  color: #333;
  opacity: 1;
}
.grp-hub .header-lang-switch .lang-btn.lang-current {
  text-decoration: underline;
}
#top:not(.grp-hub) #services .grp-links a {
  color: #007f44;
}
/* 現在の言語（DN-CD-67・動画 2 ページだけ）: 本番では JS が現在の言語のリンクに .current を付け、
   style.css の #header-menu li:not(.header-logo):not(.header-home):not(.header-case) a.current（#fabe00 = 1.69:1・詳細度 1,4,2）が上の #333 に勝つ。
   → 詳細度 2,4,2 で #333 + 下線に戻す。ドロワー（緑の地・≤1120px）とグループ 12 ページは変えない（DN-CD-67 の決裁で 1.69:1 のまま） */
#top.grp-hub_video #header-menu li.header-lang-switch a.lang-btn.lang-current {
  color: #333;
  opacity: 1;
  text-decoration: underline;
}

/* ==== §21 Claude Design 20261025（HUMAN 2026-10-25 DN-CD-12〜57・案 A）: 動画 2 ページ（.grp-hub_video）とトップの会社情報だけ。既存規則は不変。
   正本: docs/design/claude-design/20261025/design-readme.md・canvas-p3c/HF_A_*・canvas-p3d/HF_*。色は既存（#333・#fff・#ebebeb・#fabe00・#007f44）だけ ==== */
/* パンくず（DN-CD-26・38 = 新しい部品の 1 枠）: hero の上の白い帯・13px・#333・リンクは下線 */
.grp-breadcrumb {
  background: #fff;
  color: #333;
  font-size: 1.3rem;
  line-height: 1.6;
  padding: .6rem 0;
}
.grp-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grp-breadcrumb a,
.grp-breadcrumb span[aria-current] {
  display: inline-block;
  padding: .4rem 0;   /* タップ領域 24px 以上（13px × 1.6 + 8px） */
}
.grp-breadcrumb a {
  color: #333;
  text-decoration: underline;
}
.grp-breadcrumb a:hover,
.grp-breadcrumb a:focus {
  color: #333;
  text-decoration-color: #fabe00;
}
/* フォーカスは見本どおり 2px の黒の輪郭（既存の .grp-hub a:focus-visible の黄 #fabe00 は白い帯の上で 3:1 に届かない） */
.grp-breadcrumb a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.grp-breadcrumb_sep {
  padding: 0 .8rem;
}
/* 固定ヘッダー（#header 60px）の下に帯を出す。hero の padding-top 60px（§1 #hero）は帯が受け持つ */
.grp-hub_video .grp-breadcrumb {
  padding-top: calc(60px + .6rem);
}
.grp-hub_video #hero {
  padding-top: 0;
}
@media only screen and (max-width: 1024px) {
  .grp-breadcrumb .container {
    padding: 0 1.6rem;
  }
}
/* PC の hero の h1（DN-CD-22）: #00ad5d（白 90% のパネルの上で 3:1 未満）→ 既存の見出しの緑 #007f44。≤1024px は写真の上の白文字のまま */
@media only screen and (min-width: 1025px) {
  .grp-hub_video #hero .main-catch_main h1 {
    color: #007f44;
  }
}
/* 目次（DN-CD-30・42）: ≥835px は従来の .grp-tags、≤834px は .grp-faq の details を白い箱で（閉じた状態が既定） */
.grp-toc_sp {
  display: none;
}
@media only screen and (max-width: 834px) {
  .grp-toc_pc {
    display: none;
  }
  .grp-hub_video .grp-toc_sp {
    background: #fff;
    border-radius: .4rem;
    border-top: none;
    color: #333;
    display: block;
    margin: 2.5rem 1rem 0;
    text-align: left;
  }
  .grp-toc_sp details {
    border-bottom: none;
  }
  .grp-toc_sp summary {
    border-radius: .4rem;
    font-size: 1.4rem;
    padding: 1rem 4rem 1rem 1.6rem;
  }
  .grp-toc_sp ul {
    list-style: none;
    margin: 0;
    padding: 0 1.6rem 1rem;
  }
  .grp-toc_sp li a {
    align-items: center;
    border-top: 1px solid #ebebeb;
    color: #333;
    display: flex;
    font-size: 1.4rem;
    min-height: 44px;
    text-decoration: none;
  }
  .grp-toc_sp li a::before {
    content: "#";
    margin-right: .3em;
  }
  .grp-toc_sp li a:hover,
  .grp-toc_sp li a:focus {
    color: #333;
    text-decoration: underline;
    text-decoration-color: #fabe00;
  }
}
/* h1 と副題の間（A1-10）・見出しの下（A1-12）: 見本の 16px・32px に揃える（現行は 15px・30px。.effectIn1 の動きが終わった後の値）。
   ≤1024px の副題の上（§17・§18 の 2.4rem）は en の descender のための値なので変えない */
@media only screen and (min-width: 1025px) {
  .grp-hub_video #hero .main-catch_sub {
    margin-top: 1.6rem;
  }
}
.grp-hub_video .container > .title-2 {
  margin-bottom: 3.2rem;
}
/* 中盤の相談ボタン（A3-06）: STEP のカードに接している（DOM 計測 0px）→ 見本の 40px */
.grp-hub_video #flow .grp-cta-row {
  margin-top: 4rem;
}
/* スマホで 1 文字だけの行（A1-11）: 語の区切りで折り返す（文言は変えない）。auto-phrase は ja の文節（未対応のブラウザは従来どおり）、
   見出しは行の長さを揃え、本文は最後の行が短くなり過ぎないようにする */
@media only screen and (max-width: 834px) {
  .grp-hub_video main :is(h1, h2, h3, summary, .main-catch_sub, .grp-hero-keys li) {
    text-wrap: balance;
    word-break: auto-phrase;
  }
  .grp-hub_video main :is(p, li, dd) {
    text-wrap: pretty;
  }
}
/* 写真の WebP と JPEG の出し分け（HUMAN DN-CD-56）: 同じ名前の .webp がある時だけ、テンプレートが hero に .grp-hero_webp を付ける。
   image-set() の type() に未対応のブラウザはこの宣言を捨て、上の .jpg のまま。img は layouts/partials/video_picture.html の <picture> */
#hero.grp-hero-video.grp-hero_webp::before {
  background-image: image-set(url("../images/service_img-03.webp") type("image/webp"), url("../images/service_img-03.jpg") type("image/jpeg"));
}
#hero.grp-hero-ongoing.grp-hero_webp::before {
  background-image: image-set(url("../images/intro_image.webp") type("image/webp"), url("../images/intro_image.jpg") type("image/jpeg"));
}
.grp-hub_video .grp-card-figure picture {
  display: block;
}
/* トップの会社情報の「動画制作事業」→ /video/（DN-CD-25）: 既存の緑 #00ad5d の文字リンクは白地で 2.94:1 → 見本どおり #333 + 下線 */
#company-data .data-list dd a {
  color: #333;
  text-decoration: underline;
}
#company-data .data-list dd a:hover,
#company-data .data-list dd a:focus {
  color: #333;
  text-decoration-color: #fabe00;
}

/* ==== §22 事例ページ（HUMAN 2026-10-29 ラリー 5: /video_cases/・/video_cases/<slug>/・ハブの #cases）。既存規則は不変。色は §21 と同じ 6 色 ==== */
.grp-hub_video .grp-case-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grp-hub_video .grp-case-link { display: block; background: #fff; border: 1px solid #ccc; border-left: 6px solid #00ad5d; padding: 14px 16px; color: #333; text-decoration: none; height: 100%; }
.grp-hub_video .grp-case-link:hover, .grp-hub_video .grp-case-card_link:hover { border-color: #000; }
.grp-hub_video .grp-case-sit { display: block; font-size: 13px; color: #333; margin: 0 0 4px; }
.grp-hub_video .grp-case-title { display: block; font-weight: 700; line-height: 1.6; margin: 0 0 8px; }
.grp-hub_video .grp-tags span { display: inline-block; background: #ebebeb; border: 1px solid #ccc; border-radius: 3px; padding: 1px 8px; margin: 0 6px 6px 0; font-size: 12px; color: #333; }
.grp-hub_video .grp-case-card { text-align: left; }
.grp-hub_video .grp-case-card_link { display: block; color: #333; text-decoration: none; border: 1px solid #ccc; padding: 0 0 14px; background: #fff; }
.grp-hub_video .grp-case-card_link .figure { margin: 0 0 10px; }
.grp-hub_video .grp-case-card_link .figure img { width: 100%; height: auto; display: block; }
.grp-hub_video .grp-case-card_link .grp-case-sit, .grp-hub_video .grp-case-card_link h3, .grp-hub_video .grp-case-card_link .grp-tags, .grp-hub_video .grp-case-card_link .grp-case-lesson, .grp-hub_video .grp-case-card_link .grp-case-more { padding: 0 16px; }
.grp-hub_video .grp-case-card_link h3 { font-size: 17px; line-height: 1.6; margin: 0 0 8px; text-align: left; }
.grp-hub_video .grp-case-lesson { font-size: 14px; line-height: 1.8; margin: 0 0 8px; }
.grp-hub_video .grp-case-lesson_label { display: inline-block; background: #fabe00; color: #000; font-size: 12px; padding: 0 6px; margin-right: 6px; }
.grp-hub_video .grp-case-more { display: inline-block; font-weight: 700; color: #000; }
.grp-hub_case .grp-case-head .grp-hero-cat a { color: #333; text-decoration: underline; }
.grp-hub_case .grp-case-h1 { font-size: 26px; line-height: 1.5; margin: 8px 0 16px; border-left: 8px solid #00ad5d; padding-left: 14px; color: #000; text-align: left; }
.grp-hub_case .grp-case-note { border: 2px solid #333; padding: 10px 14px; margin: 0 0 16px; font-weight: 600; }
.grp-hub_case .grp-case-table th { width: 10em; background: #ebebeb; }
.grp-hub_case .grp-case-frame { padding: 32px 0; }
.grp-hub_case .grp-case-h2 { font-size: 20px; line-height: 1.5; margin: 0 0 16px; padding-bottom: 6px; border-bottom: 3px solid #fabe00; text-align: left; color: #000; }
.grp-hub_case .grp-case-p { line-height: 1.9; margin: 0 0 14px; text-align: left; }
.grp-hub_case .grp-case-figure { margin: 16px 0; }
.grp-hub_case .grp-case-figure img { width: 100%; height: auto; display: block; border: 1px solid #ccc; }
.grp-hub_case .grp-case-cap { font-size: 14px; color: #333; margin-top: 6px; text-align: left; }
.grp-hub_case .grp-case-ul { margin: 0 0 14px; }
.grp-hub_case .grp-case-links li { margin: 4px 0; }
.grp-hub_case .grp-cta-row { margin: 20px 0 8px; }
@media (max-width: 834px) {
  .grp-hub_case .grp-case-h1 { font-size: 21px; }
  .grp-hub_case .grp-case-table th { width: 7em; }
}

/* §22 追記（2026-10-29 ローカル確認）: 事例ページの見出し部は白地・黒文字を明示（.grp-hub の暗い既定を受けないように）。表は折り返す */
.grp-hub_case .grp-case-head { background: #fff; color: #333; padding: 24px 0 8px; }
.grp-hub_case .grp-case-head .grp-hero-cat { color: #333; margin: 0 0 6px; text-align: left; }
.grp-hub_case .grp-case-head .grp-case-sit { color: #333; text-align: left; margin: 0 0 4px; }
.grp-hub_case .grp-case-frame { background: #fff; color: #333; }
.grp-hub_case .grp-case-frame.bc-gray { background: #ebebeb; }
.grp-hub_case .grp-case-table { width: 100%; table-layout: fixed; }
.grp-hub_case .grp-case-table td, .grp-hub_case .grp-case-table th { white-space: normal; word-break: break-word; vertical-align: top; }
.grp-hub_case .grp-case-h2, .grp-hub_case .grp-case-p, .grp-hub_case .grp-case-cap, .grp-hub_case .grp-case-ul li { color: #333; }

/* §22 補足 2（2026-10-29 ブリーフ r3 パス 1 の P1 不具合 A1-01〜03。本番の計測 = docs/video-seo/claude-design/20261029-r3/raw/prod-defect-video-cases-20261029.md）
   1) 一覧の 6 枚は .cards_row（nowrap・1 枚 margin 0 2.5rem）のままだと 1280px で 1 枚 115px に潰れる → §20 ③ の #ways と同じ形で ≥835px は wrap・3 列
   2) 事例ページの本文・注記と一覧のカードの文字は font-size 未指定で 10px（html 62.5% の継承）→ 本文 1.6rem（.grp-table・lead_text と同じ）
   3) 事例の 2 列の表が .grp-table の min-width 640px を受け、.grp-case-head の overflow hidden でスマホの右が切れる → min-width 0
   4) 事例ページの container の子（h1・注記・表・h2・図・箇条書き・リンク）は ≤1024px の左右 1rem の対象外だった → 同じ 1rem */
@media only screen and (min-width: 835px) {
  .grp-hub_cases .grp-case-cards { flex-wrap: wrap; }
  .grp-hub_cases .grp-case-cards .cards_row_card { width: calc(33.333% - 3rem); margin: 0 1.5rem 3rem; padding: 2rem; }
}
.grp-hub_cases .grp-case-card_link { font-size: 1.6rem; }
.grp-hub_video .grp-case-link { font-size: 1.6rem; } /* ハブ #cases のカードの題名も font-size 未指定で 10px だった（パス 2 A3-07・本番で計測） */
.grp-hub_case .grp-case-head, .grp-hub_case .grp-case-frame { font-size: 1.6rem; }
.grp-hub_case .grp-case-table { min-width: 0; }
@media only screen and (max-width: 1024px) {
  /* p（.grp-hero-cat・.grp-case-sit・.grp-case-p・.grp-case-note）は §5 の「.container > p」で既に左右 1rem の padding。枠線のある要素は margin で内側へ */
  .grp-hub_case .container > .grp-case-h1,
  .grp-hub_case .container > .grp-case-note,
  .grp-hub_case .container > .grp-case-h2,
  .grp-hub_case .container > .grp-case-figure,
  .grp-hub_case .container > .grp-case-ul,
  .grp-hub_case .container > .grp-case-links,
  .grp-hub_case .container > .grp-links { margin-left: 1rem; margin-right: 1rem; }
  .grp-hub_case .container > .grp-case-table { width: calc(100% - 2rem); margin-left: 1rem; margin-right: 1rem; }
}
.grp-hub_case .grp-case-h1, .grp-hub_case .grp-case-h2 { color: #000; }
.grp-hub_video .grp-case-list .grp-case-link .grp-tags { text-align: left; }