@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;
  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;
}