@charset "UTF-8";
/*
 * トップページ(/)の作り直しで足した部品の CSS(2026-10-27。作業指示 SR-20261027-01 の 4-4)
 *
 * - index.php の中で get_header() の前に読み込む(トップだけ)。style.css・functions.php は変えない。
 * - 指定は、すべて .home(トップの body のクラス)から始める(ほかのページに影響しないように)。
 * - 今の部品(最初の画面・CONCEPT・寄り添ったサポートのカード・SERVICE・COMPANY・BLOG・NEWS)の見た目は変えない。
 *   ここに書くのは、新しい部品(ボタンの並び・FLOW・MESSAGE・FIRST STEP・入口のリンク)と、原稿の改行の指定だけ。
 * - 切り替えの幅は、今の style.css と同じ(768・960・1280px)だけを使う。
 * - 色:文字 #292929、紺 #182957、ピンク #DA005C、紺の上のピンク #FF8DB8、クリーム #FFF0BF、枠線 #D9DBE5
 */

.home [class*="p-top-cta"],
.home [class*="p-top-flow"],
.home [class*="p-top-message"],
.home [class*="p-top-first"],
.home [class*="p-top-service__entr"] {
  box-sizing: border-box;
}

/* 改行の位置(トップ原稿 v5 13-1):本文は言葉の切れ目で折り返す。原稿の ⏎ は PC 幅(960px 以上)だけで改行する */
.home .l-main {
  word-break: auto-phrase;
}

.home .p-top-line {
  display: inline;
}

/* 本文の中の文字のリンク(ナビ・導線設計 v1 10章) */
.home .p-top-textlink {
  color: #DA005C;
  font-weight: bold;
  text-decoration: underline;
}

/* ===== CONCEPT:3段落の間 16px、ボタンと AI研修への小さいリンク ===== */
.home .p-top-concept__para {
  margin-bottom: 16px;
}

.home .p-top-cta {
  margin-top: 32px;
}

/* ボタン:今の .c-button(.c-button--l)のまま、大きさだけ Figma(296×61・角丸40)に合わせる(AI研修のページの最後の案内と同じ) */
.home .p-top-cta__button {
  border-radius: 40px;
  height: 61px;
  line-height: 59px;
  max-width: 296px;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}

.home .p-top-cta__button .c-button__caption {
  font-size: 1.8rem;
}

.home .p-top-cta__note {
  font-size: 1.4rem;
  margin-top: 16px;
}

/* ===== FOR YOU:英字の見出しを足した(見出しの部品は今の c-title のまま) ===== */

/* ===== FLOW(進め方):Figma 41:65 ===== */
.home .p-top-flow__header {
  margin-bottom: 24px;
}

.home .p-top-flow__list {
  display: grid;
  gap: 16px;
  grid-auto-rows: 1fr;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}

.home .p-top-flow__item {
  background-color: #ffffff;
  border: 1px solid #D9DBE5;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  text-align: left;
}

.home .p-top-flow__number {
  align-self: flex-start;
  background-color: #182957;
  border-radius: 4px;
  color: #ffffff;
  font-family: "Jost", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 4px 12px;
}

.home .p-top-flow__title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
}

.home .p-top-flow__text {
  font-size: 1.4rem;
}

.home .p-top-flow__notes {
  font-size: 1.5rem;
  line-height: 28px;
  margin-top: 40px;
  text-align: center;
}

.home .p-top-flow__button {
  margin-top: 40px;
}

/* ===== MESSAGE(代表のごあいさつ):Figma 41:101 ===== */
.home .p-top-message__header {
  margin-bottom: 24px;
}

.home .p-top-message__grid {
  display: grid;
  gap: 32px;
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}

.home .p-top-message__media img {
  aspect-ratio: 9/10;
  border-radius: 5px;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.home .p-top-message__text {
  color: #182957;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.9;
}

.home .p-top-message__name {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 16px;
}

.home .p-top-message__career {
  font-size: 1.5rem;
  line-height: 26px;
  margin-top: 12px;
}

/* ===== FIRST STEP(無料相談の案内):Figma 41:111。AI研修のページの最後の案内と同じ形 ===== */
.home .p-top-first__box {
  background-color: #182957;
  border-radius: 12px;
  color: #ffffff;
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
  padding: 40px 24px;
  text-align: center;
}

.home .p-top-first__box .c-title {
  margin-bottom: 16px;
}

.home .p-top-first__box .c-title--en {
  color: #FF8DB8;
}

.home .p-top-first__box .c-title--jp {
  color: #ffffff;
}

.home .p-top-first__text {
  line-height: 1.8;
  margin-bottom: 16px;
}

.home .p-top-first__lead {
  color: #FFF0BF;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.home .p-top-first__mail {
  font-size: 1.4rem;
  margin-top: 20px;
}

/* ===== SERVICE の新しい形(T6。templates/service-section-top.php)の入口のリンク ===== */
/* スマホ・タブレット(1280px 未満):箱の下に1行1つ。押せる高さ 44px 以上。箱の影は ①の箱ではリンクの白い面にだけ付ける(入口の行が影の中に入らないように) */
.home .p-top-service__entries {
  margin-top: 12px;
}

.home .p-top-service__entry {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  min-height: 44px;
}

.home .p-top-service__entry-note {
  color: #292929;
  font-size: 1.3rem;
}

.home .p-top-service__entry-link {
  color: #DA005C;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: underline;
}

.home .p-top-service__entries-title {
  color: #292929;
  font-size: 1.3rem;
  font-weight: bold;
}

@media (max-width: 1279.98px) {
  .home .p-top-service .p-service-section__item:first-child {
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .home .p-top-service .p-service-section__item:first-child > .p-service-section__link {
    -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08);
  }
}

.home .p-top-service .p-top-service__entries--2 {
  margin-bottom: 40px;
}

/* ===== 768px 以上 ===== */
@media (min-width: 768px) {
  .home .p-top-flow__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== 960px 以上(今の .c-title の大きさが変わる幅) ===== */
@media (min-width: 960px) {
  .home .p-top-line {
    display: block;
  }

  .home .p-top-message__grid {
    align-items: start;
    gap: 56px;
    grid-template-columns: 360px 1fr;
  }

  .home .p-top-message__media img {
    border-radius: 10px;
  }

  .home .p-top-message__text {
    font-size: 1.8rem;
    line-height: 34px;
  }

  .home .p-top-first__box {
    padding: 56px 60px;
  }

  .home .p-top-first__box .c-title {
    margin-bottom: 20px;
  }
}

/* ===== 1280px 以上 ===== */
@media (min-width: 1280px) {
  /* 4つの箱の幅をそろえる(1fr だけでは、折り返せないまとまりの幅より列が狭くならず、4つ目だけ広くなっていた。実装監査 R3 の C3-2) */
  .home .p-top-flow__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* T6:①の入口。①の箱(-10° 傾いた今の部品)の中に置き、箱の左下の角から下に出す。文字は傾きを打ち消して水平にする(箱の数値は変えない) */
  .home .p-top-service .p-top-service__entries--1 {
    left: 0;
    margin-top: 0;
    position: absolute;
    top: 100%;
    -webkit-transform: rotate(10deg) translateY(14px);
    -ms-transform: rotate(10deg) translateY(14px);
    transform: rotate(10deg) translateY(14px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    width: max-content;
  }

  .home .p-top-service .p-top-service__entries--1 .p-top-service__entry {
    min-height: 26px;
  }

  /* T6:②の入口。④の箱の下に、ふつうの流れの要素として置く(箱に重ねない)。右寄せ。上の余白は④の箱(12° 傾き)の右下の角から16px以上あける分 */
  .home .p-top-service .p-top-service__entries--2 {
    margin-bottom: 0;
    margin-top: 74px;
    text-align: right;
  }

  .home .p-top-service .p-top-service__entries--2 .p-top-service__entry {
    justify-content: flex-end;
    min-height: 28px;
  }
}

/*
 * ===== 実装監査 C R1 の直し(2026-10-27)=====
 */

/* C-6:NEWS のボタン「お知らせ一覧を見る」を1行に(1280px で「見る」だけ次の行に落ちていた。今の部品の HTML は変えない) */
.home .p-top-news .c-button__caption {
  white-space: nowrap;
}

/* C-3:FLOW の箱は、スマホ(767px 以下)だけ中身に合わせた高さに(1列のとき、いちばん高い箱にそろえると下が大きく空くため) */
@media (max-width: 767.98px) {
  .home .p-top-flow__list {
    grid-auto-rows: auto;
  }
}

/* C-7:タブレット(768〜959px)は MESSAGE の代表の写真を最大 420px・中央に(画面いっぱいの縦長にならないように) */
@media (min-width: 768px) and (max-width: 959.98px) {
  .home .p-top-message__media {
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
  }
}

/* C-1:PC(960px 以上)は、見出しから中身までを Figma と同じ 48px に(FLOW・MESSAGE。スマホは 24px のまま)。
 * FOR YOU は今の部品(style.css)の見出しの下が 24px のため、本文の上に 24px を足して 48px にする */
@media (min-width: 960px) {
  .home .p-top-flow__header,
  .home .p-top-message__header {
    margin-bottom: 48px;
  }

  .home .p-top-foryou .p-blog-section__caption {
    margin-top: 24px;
  }
}

/* C-2:紺の箱(FIRST STEP)の中だけ、英字の見出しの飾り(c-title--en::before の画像)を出さない。Figma 41:113 に飾りがなく、紺の上で白い飾りが文字に重なるため。
 * 部品 c-title--en と style.css は変えない(ずれ一覧 #25 の「部品は c-title--en のまま」は守る。監査役の判断 2026-10-27) */
.home .p-top-first__box .c-title--en::before {
  display: none;
}

/* C2-1:スマホ(767px 以下)は、CONCEPT と FLOW の無料相談のボタンを中身の幅いっぱい(100%)に(トップ原稿 13-2)。PC・タブレットは最大 296px のまま */
@media (max-width: 767.98px) {
  .home .p-top-concept .p-top-cta__button,
  .home .p-top-flow__button {
    max-width: none;
  }
}

/* C2-2:PC(960px 以上)は、CONCEPT の写真の下の余白を 0 に(CONCEPT → FOR YOU の空きを Figma と同じ 140px に)。style.css は変えない */
@media (min-width: 960px) {
  .home .p-top-concept__media {
    margin-bottom: 0;
  }
}

/* 参考(監査 C R2 6章の参考 1):トップのブログのカードの題名も、言葉の切れ目で折り返す(記事の題名は変えない) */
.home .p-blog-section.blog .c-card__title {
  word-break: auto-phrase;
}

/* 実装監査 R3 の C3-1(2026-10-27):PC(1440px 以上。Figma の幅)は、FLOW の箱の並び(Figma 41:69)を 1000px、MESSAGE(41:105)を 936px、
 * FIRST STEP の紺の箱(41:112)を 940px に(本文の幅 909px より広い分は左右に同じだけはみ出して中央。AI研修の A-F3 と同じ書き方) */
@media (min-width: 1440px) {
  .home .p-top-flow__list {
    --top-w: min(1000px, calc(100% + 91px));
    margin-left: calc((100% - var(--top-w)) / 2);
    max-width: none;
    width: var(--top-w);
  }

  .home .p-top-message__grid {
    --top-w: min(936px, calc(100% + 27px));
    margin-left: calc((100% - var(--top-w)) / 2);
    max-width: none;
    width: var(--top-w);
  }

  .home .p-top-first__box {
    --top-w: min(940px, calc(100% + 31px));
    margin-left: calc((100% - var(--top-w)) / 2);
    max-width: none;
    width: var(--top-w);
  }
}

/* 実装監査 R3 後の仕上げ:360px など 374px 以下の幅で、今の部品(SERVICE。T6 が false のときに出る形)の1〜3文字だけの行とボタンの文字のはみ出しをなくす。
 * テンプレート(templates/service-section.php。/information/ と共通)は変えず、トップだけ CSS で直す */
@media (max-width: 374.98px) {
  /* 本文:まとまり(c-split)が1行より長いと、まとまりの中で折り返して「考え、」だけの行が出るため、まとまりを外して言葉の切れ目で折り返す */
  .home .p-service-section__caption .c-split {
    display: inline;
  }

  /* ボタン:左右の内側の余白 40 → 24px(「87-laboのサービスを見る」が1行に入り、ボタンの外にはみ出さない) */
  .home .p-service-section .c-button--l {
    padding-left: 24px;
    padding-right: 24px;
  }
}