/* TOP（FV以外）の2026リニューアル差分。Figma 02 TOP（PC 341:3875／SP 341:4297） */

/* SERVICE：ジャンル別リンク（Figma 399:4261） */
.l-service { padding-top: 6.25rem; }
/* Figma 341:4006：SERVICEフレーム下端(1770)-カード下端(1660)=110pxに合わせる（元10remのままだとFEATUREが50px下がる） */
.l-service { padding-bottom: 6.875rem; }
.l-service .c-front__link { margin-bottom: 1.25rem; }
.p-service__genres { letter-spacing: 0; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2.125rem; }
.p-service__genre { display: flex; align-items: center; gap: 1.5rem; }
.p-service__genre-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 7.5rem;
  height: 2rem;
  margin: 0;
  border-radius: 0.25rem;
  background: rgba(30, 40, 85, .07);
  font-size: 0.875rem;
  line-height: 1.625rem;
  color: #1e2855;
}
.p-service__genre-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.p-service__genre-links a { font-size: 1rem; line-height: 1.875rem; color: #1e78eb; text-decoration: underline; text-underline-position: from-font; }
@media (hover: hover) {
  .p-service__genre-links a:hover { opacity: .7; }
}

/* FEATURE：英字の見出しを追加（Figma 350:3604） */
.l-feature { padding-top: 6.25rem; }
.p-feature__ttl-en {
  margin: 0 0 3.125rem;
  font-family: Overpass, sans-serif;
  font-size: 4.375rem;
  font-weight: 200;
  line-height: 4.375rem;
  color: #1e2855;
}

@media screen and (max-width: 768px) {
  .l-service { padding-top: 4rem; }
  /* Figma SP 341:4297：SERVICEカード下端→FEATURE見出しの間隔71pxに合わせる */
  .l-service { padding-bottom: 3rem; }
  /* Figma SP 341:4408：見出し→カード上端の間隔に合わせる */
  .l-service .c-front__link { margin-bottom: 2.5rem; }
  .p-service__genres { gap: 0.625rem; margin-bottom: 1.75rem; }
  .p-service__genre { align-items: flex-start; gap: 0.75rem; }
  .p-service__genre-label { width: 5.75rem; height: 1.75rem; font-size: 0.75rem; }
  .p-service__genre-links { gap: 0.125rem 1rem; }
  .p-service__genre-links a { font-size: 0.875rem; line-height: 1.75rem; }

  .l-feature { padding-top: 4rem; }
  .p-feature__ttl-en { margin-bottom: 2.25rem; font-size: 2.5rem; line-height: 3.125rem; }
}

/* NEWS：サムネイル付きの行（Figma 863:7956） */
.l-news .p-news__article { gap: 1.5rem; padding: 0 0 1.5rem; margin-bottom: 1.5rem; border-top: 0; border-bottom: 1px solid #c8c8c8; }
.l-news .p-news__article:last-of-type { margin-bottom: 0; }
.l-news .p-news__article-head { align-items: flex-start; gap: 2.5rem; padding-right: 5.625rem; }
.l-news .p-news__article-head::after { /* ＋の丸ボタン */
  top: 1.875rem;
  right: 1.25rem;
  width: 3.125rem;
  height: 3.125rem;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
  background: url("../images/top/news-plus.svg") center / 1.125rem 1.125rem no-repeat;
}
.l-news .p-news__article-head.--js-toggle::after { background: url("../images/top/news-close.svg") center / 1.125rem 0.5625rem no-repeat; }
.p-news__article-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 10.625rem;
  height: 6.875rem;
  margin: 0;
  overflow: hidden;
  border-radius: 0.625rem;
  background: #47505f;
}
.p-news__article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-news__article-thumb .p-news__article-thumb-mark { width: 4.0625rem; height: 2.46875rem; object-fit: contain; }
.p-news__article-meta { display: flex; flex-direction: column; gap: 0.625rem; padding-top: 1.875rem; }
.l-news .p-news__article-date { margin-top: 0; font-size: 0.875rem; line-height: 0.875rem; letter-spacing: .05em; color: #aaa; }
.l-news .p-news__article-ttl { font-size: 1rem; line-height: 1.875rem; letter-spacing: .05em; }

/* EVENT / SEMINAR（Figma 863:8014） */
/* Figma 863:8016：NEWS見出し→EVENT見出しの間隔に合わせ、上paddingを+22px */
.l-top-event { padding: 8.875rem 0 9.375rem; background: #f6f6f6; }
.l-top-event__link { margin-bottom: 4.375rem; }
.l-top-event .c-front__ttl { white-space: nowrap; }
.l-top-event__empty { margin: 0; font-size: 1.125rem; line-height: 1.875rem; letter-spacing: .05em; text-align: center; color: #1e2855; }
.l-top-event__list { display: flex; flex-direction: column; gap: 1.5rem; }
/* 10/14谷「質素すぎる」：バナー＋開催日＋概要＋申し込みのカード */
.l-top-event__card { display: grid; grid-template-columns: 30rem 1fr; gap: 3rem; align-items: center; padding: 1.5rem; border-radius: 1.25rem; background: #fff; color: #1e2855; transition: box-shadow .25s; }
.l-top-event__img { display: block; overflow: hidden; border-radius: 0.75rem; aspect-ratio: 16 / 9; background: #e8ecf4; }
.l-top-event__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.l-top-event__body { display: flex; flex-direction: column; gap: 1rem; padding-right: 1.5rem; min-width: 0; }
.l-top-event__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.l-top-event__day { display: flex; align-items: baseline; gap: 0.5rem; line-height: 1; color: #1e2855; }
.l-top-event__md { font-size: 2.75rem; letter-spacing: .02em; }
.l-top-event__wd { font-size: 0.9375rem; letter-spacing: .08em; }
.l-top-event__yr { font-size: 0.875rem; letter-spacing: .05em; color: #aaa; }
.l-top-event__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.l-top-event__tag { flex: none; padding: 0.375rem 0.75rem; border-radius: 0.25rem; background: #1e78eb; font-size: 0.75rem; line-height: 1; letter-spacing: .05em; color: #fff; }
.l-top-event__venue { font-size: 0.8125rem; line-height: 1.6; letter-spacing: .05em; color: #777; }
.l-top-event__ttl { font-size: 1.25rem; font-weight: 500; line-height: 1.7; letter-spacing: .05em; word-break: auto-phrase; text-wrap: pretty; }
.l-top-event__sum { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.875rem; line-height: 1.8; letter-spacing: .05em; color: #555; }
.l-top-event__more { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 0.25rem; font-size: 0.9375rem; letter-spacing: .08em; }
.l-top-event__arrow { width: 2.5rem; height: 2.5rem; background: url("../images/common/arrow-circle.svg") center / contain no-repeat; }
@media (hover: hover) {
  .l-top-event__card:hover { box-shadow: 0 0.5rem 1.5rem rgba(30, 40, 85, .08); }
  .l-top-event__card:hover .l-top-event__img img { transform: scale(1.04); }
  .l-top-event__card:hover .l-top-event__arrow { background-image: url("../images/common/arrow-circle--hover.svg"); }
}

@media screen and (max-width: 768px) {
  .l-news .p-news__article { padding: 1rem 0.625rem; margin-bottom: 0.75rem; }
  .l-news .p-news__article-head { display: flex; gap: 0.75rem; padding-right: 0; }
  .l-news .p-news__article-head::after { top: -0.375rem; right: 0; width: 1.25rem; height: 1.25rem; background-size: 0.625rem 0.625rem; }
  .p-news__article-thumb { width: 7rem; height: 5.3125rem; }
  .p-news__article-thumb .p-news__article-thumb-mark { width: 2.6875rem; height: 1.625rem; }
  .p-news__article-meta { gap: 0.25rem; padding-top: 0.375rem; width: 11.3125rem; }
  .l-news .p-news__article-date { font-size: 0.75rem; line-height: 0.875rem; }
  .l-news .p-news__article-ttl { font-size: 0.875rem; line-height: 1.375rem; }

  /* Figma SP 863:8101：NEWS見出し→EVENT見出しの間隔に合わせる */
  .l-top-event { padding: 4.375rem 0 3.75rem; }
  .l-top-event__link { margin-bottom: 2.5rem; }
  .l-top-event .c-front__ttl { white-space: normal; }
  .l-top-event__empty { width: 16.875rem; margin-inline: auto; font-size: 1rem; line-height: 1.625rem; }
  .l-top-event__list { gap: 1rem; }
  .l-top-event__card { grid-template-columns: 1fr; gap: 1.25rem; padding: 1rem 1rem 1.5rem; border-radius: 1rem; }
  .l-top-event__body { gap: 0.75rem; padding: 0 0.25rem; }
  .l-top-event__head { gap: 0.625rem 1rem; }
  .l-top-event__md { font-size: 2.125rem; }
  .l-top-event__ttl { font-size: 1rem; line-height: 1.7; }
  .l-top-event__sum { font-size: 0.8125rem; }
  .l-top-event__more { font-size: 0.875rem; }
  .l-top-event__arrow { width: 2rem; height: 2rem; }
}

/* FEATURE：見出し510px・説明文500px（Figma 341:3890） */
@media screen and (min-width: 769px) {
  .p-feature__column { grid-template-columns: 31.875rem 31.25rem; column-gap: 2.3125rem; width: 65.4375rem; margin-left: 6.3125rem; margin-right: 0; margin-bottom: 9.375rem; }
  .p-feature__column-ttl { white-space: nowrap; letter-spacing: .05em; }
  .p-feature__column-txt { letter-spacing: .05em; }
  /* 途中のCTA帯の直後に事例が来るため、上の余白を足す */
  .l-interview { padding-top: 6.25rem; }
}

/* NEWS：上の余白（Figma：事例ロゴの下から120／SP 60） */
.l-news { padding-top: 7.5rem; }
@media screen and (max-width: 768px) {
  .l-news { padding-top: 3.75rem; }
  .l-top-event .c-front__hgroup { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .l-top-event .c-front__ttl { font-size: 2.125rem; line-height: 2.5rem; white-space: nowrap; }
}


/* TOP SP：Figma SP（350:3872）にはジャンル別リンクが無い */
@media screen and (max-width: 768px) {
  .p-service__genres { display: none; }
}

/* 本体 10/10：Figma 341:3875 の座標に合わせる。特徴の帯は 1770〜3020（高さ1250）、支援事例の見出しは帯の上端から190・PICK UPは277 */
@media screen and (min-width: 769px) {
  .l-feature { padding-bottom: 9.9375rem; }
  .l-interview { padding-top: 11.875rem; }
}
/* Figma 341:4056／341:4081：PICK UPの枠は高さ308、写真は380×238（CMSの画像の比率に関わらずこの枠で切り抜く） */
@media screen and (min-width: 769px) {
  .c-front__article > * .c-front__article-img-wrapper,
  .c-front__article .c-front__article-img-wrapper { height: 14.875rem; }
  .c-front__article .c-front__article-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
}
/* 本体 10/10：SPをFigma 341:4297 の座標に合わせる。サービスの帯は1410で終わり、特徴は本文の下60で写真、最後の文の下60で帯の終わり、支援事例の英字は帯の上端から20 */
@media screen and (max-width: 768px) {
  .l-service { padding-bottom: 2.25rem; }
  /* Figma 350:3875：本文下60、OUR FEATURE下30。スクロール登場のtranslateY(30)は余白に含めない。 */
  .p-feature__column { margin-bottom: 3.75rem; }
  .p-feature__column-ttl { margin-bottom: 0.625rem; }
  .p-feature__column-num { margin-bottom: 1.875rem; }
  .l-feature { padding-bottom: 3.75rem; }
  .l-interview { padding-top: 1.25rem; }
}

/* Figma 341:3935〜3943 / 527:5487〜5512：文字数の違う5カードも、番号・見出し・本文・リンクの上端を揃える。 */
@media screen and (min-width: 769px) {
  .p-service__item-link { grid-template-rows: 11.6875rem 6.125rem 9.5rem 7.0625rem; }
  .p-service__item .p-service__item-num,
  .p-service__item.--ttl-multiple .p-service__item-num { align-self: start; margin-top: 6.875rem; }
  .p-service__item .p-service__item-ttl,
  .p-service__item.--ttl-multiple .p-service__item-ttl { align-self: start; margin-bottom: 0; }
  .p-service__item-detail { align-self: start; margin-bottom: 0; }
}
/* Figma 341:4407：SPカード本文の行間は26。bodyから継承した30ではカードと以降が16px伸びる。 */
@media screen and (max-width: 768px) {
  .p-service__item-txt { line-height: 1.625rem; }
  /* Figma 527:5538/5539：2行見出しも上端1098、本文は1178。 */
  .p-service__item.--ttl-multiple .p-service__item-num { margin-bottom: 1.1875rem; }
  .p-service__item.--ttl-multiple .p-service__item-ttl { margin-bottom: 1rem; }
  /* Figma 341:4380：サービス一覧の文字はx216。 */
  .p-service__hgroup { gap: 1.9375rem; }
}

/* 10/13谷：and more を最後のロゴの横のマスに（白い枠は付けず、文字だけ中央に） */
.p-client__item--more { display: flex; align-items: center; justify-content: center; background: none !important; }
.p-client__list { margin-bottom: 0; }
@media screen and (max-width: 768px) { .p-client__item--more { min-height: 2.625rem; } }
.p-service__genre-links a { white-space: nowrap; } /* サービス名は途中で改行しない（10/13谷） */

/* 10/14谷「ここの余白少なすぎ（SP）」：お問い合わせの帯の下からINTERVIEWまでを20→60に（NEWSと同じ） */
@media screen and (max-width: 768px) {
  body .l-interview { padding-top: 3.75rem; }
}