/* ============================================================
   MySource HP — 共通スタイル（全ページ共通）
   Figma: 【素材】MySouceFigma / TOBE（node 107:1586）

   ・ページ固有のスタイルは css/<page>.css に分ける
   ・色・文字サイズ・余白はこのファイルの :root トークンだけを参照する
   ・ブレークポイント：SP ≤767px ／ タブレット ≤1100px
   ・ヘッダーは先頭セクションに重なる（position:absolute）。
     各ページの先頭セクションは padding-top に var(--header-h) を含めること
   ============================================================ */

:root {
  /* color */
  --mainblue: #1860ae;
  --cta: #1855a5;
  --darktext: #014166;
  --ink: #1b2330;
  --lightblue: #e7f2ff;
  --paleblue: #f1faff;
  --btn-sub: #cfe4ff;
  --tag: #d9f1ff;
  --accent: #1d8fd0;
  --sub: #6b9ace;
  --navy: #114c8d;          /* FAQ・メンバー名などの濃紺文字 */           /* Figma --subcolor：番号・補足ラベル・罫線 */
  --step-num: #96beeb;
  --illus-bg: #dfedf5;
  --placeholder: #f4f4f4;
  --shadow: 0 8px 24px rgba(1, 65, 102, .12);

  /* font */
  --ff-zen: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --ff-noto: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --ff-btn: var(--ff-noto);
  --lh: 1.55;
  --lh-tight: 1.47;

  /* type scale（SPで下書き換え） */
  --fs-h1: 64px;
  --fs-h2: 40px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-en: 16px;

  /* layout */
  --container: 1440px;
  --content: 1316px;
  --gutter: 20px;
  --header-h: 93px;
  --radius-card: 20px;
}

@media (max-width: 1100px) {
  :root { --fs-h1: 52px; --fs-h2: 32px; --header-h: 83px; }
}
@media (max-width: 767px) {
  :root {
    --ff-btn: var(--ff-zen);
    --fs-h1: 30px;
    --fs-h2: 20px;
    --fs-h3: 16px;
    --fs-h4: 16px;
    --fs-body: 12px;
    --fs-small: 12px;
    --fs-en: 12px;
    --gutter: 16px;
    --header-h: 66px;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lightblue);
  color: var(--darktext);
  font-family: var(--ff-zen);
  font-weight: 500;
  font-size: 16px;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.sp-only { display: none; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   button
   色：--primary / --sub / --light / --more
   サイズ：（標準）/ --lg / --tall / --sm-sp（SPだけ14px）
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 62px;
  padding: 12px 32px;
  font-family: var(--ff-btn);
  font-size: 20px;
  line-height: var(--lh);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn .arrow { width: 24px; height: 24px; transform: rotate(90deg); transition: transform .25s var(--ease-out); }
.btn .chevron { width: 15.75px; height: 15.75px; transform: rotate(90deg); }
.btn--primary { background: var(--cta); color: #fff; }
.btn--sub { background: var(--btn-sub); color: var(--cta); }
.btn--light { background: var(--lightblue); color: var(--mainblue); }
.btn--more { background: #fff; color: #000; font-family: var(--ff-zen); font-weight: 700; padding: 12px 24px; }
.btn--lg { font-size: 24px; padding: 20px 32px; }
.btn--tall { padding: 16px 32px; }

@media (max-width: 767px) {
  .btn,
  .btn--lg,
  .btn--tall { font-size: 16px; padding: 12px 32px; }
  .btn--sm-sp { font-size: 14px; }
  /* SPの「もっと見る」は主ボタン扱い（Figma SP） */
  .btn--more { background: var(--cta); color: #fff; font-weight: 500; }
}

/* ============================================================
   section heading（英字ラベル＋見出し＋リード）
   ============================================================ */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  color: var(--darktext);
}
.sec-head__en { font-size: var(--fs-en); }
.sec-head__body { display: flex; flex-direction: column; gap: 8px; }
.sec-head__title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh); }
.sec-head__lead { font-size: var(--fs-body); }
.sec-head--white { color: #fff; }

@media (max-width: 767px) {
  .sec-head { gap: 6px; }
  .sec-head__en { font-weight: 700; }
  .sec-head__body { gap: 12px; }
  .sec-head__lead { font-weight: 400; line-height: var(--lh-tight); }
}

/* ============================================================
   header
   ============================================================ */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  background: #fff;
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px 32px;
}
.site-header__logo img { width: 200px; }
.site-header__right { display: flex; align-items: center; gap: 32px; }
.gnav { display: flex; align-items: center; }
.gnav a { padding: 10px 12px; font-size: 14px; font-weight: 400; color: #000; }
.gnav a:hover,
.gnav a[aria-current="page"] { color: var(--mainblue); }
.header-cta { display: flex; gap: 12px; }
.header-cta a {
  padding: 14px 24px;
  border-radius: 52px;
  font-size: 16px;
  line-height: var(--lh);
  transition: opacity .2s;
}
.header-cta a:hover { opacity: .85; }
.header-cta__dl { background: var(--tag); color: #000; }
.header-cta__contact { background: var(--cta); color: #fff; }

.menu-btn {
  display: none;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-btn span {
  width: 29px;
  height: 5px;
  border-radius: 30px;
  background: var(--mainblue);
  transition: transform .2s, opacity .2s;
}
.site-header.is-open .menu-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.site-header.is-open .menu-btn span:nth-child(2) { opacity: 0; }
.site-header.is-open .menu-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ハンバーガー：タブレット以下 */
@media (max-width: 1100px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-header__right { display: none; }
  .menu-btn { display: flex; }
  .site-header.is-open { box-shadow: var(--shadow); }
  .site-header.is-open .site-header__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    padding: 8px 0 16px;
  }
  .site-header.is-open .gnav { flex-direction: column; align-items: stretch; }
  .site-header.is-open .gnav a { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid var(--lightblue); }
  .site-header.is-open .header-cta { flex-direction: column; }
  .site-header.is-open .header-cta a { text-align: center; }
}
@media (max-width: 767px) {
  .site-header { background: rgba(255, 255, 255, .3); }
  .site-header.is-open { background: #fff; }
  .site-header__inner { padding: 12px 16px; }
  .site-header__logo img { width: 120px; }
}

/* ============================================================
   footer
   ============================================================ */
.site-footer { background: var(--mainblue); color: #fff; }
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 66px 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.site-footer__logo img { width: 320px; }
.fnav { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fnav a { padding: 8px 12px; font-size: 16px; }
.fnav a:hover { opacity: .75; }

@media (max-width: 767px) {
  .site-footer__inner { padding: 40px 16px; flex-direction: column; gap: 20px; }
  .site-footer__logo img { width: 200px; }
  .fnav { align-items: flex-start; }
  .fnav a { padding: 8px 0; font-size: 13px; }
}

/* ============================================================
   page-hero（下層ページ冒頭の見出しエリア）
   Figma: サービス・進め方 Frame 16（97:138）／ SP: 443:6134
   <section class="page-hero">
     <img class="page-hero__shapes" src="/assets/page-hero-shapes.svg" alt="" width="622" height="536">
     <div class="page-hero__inner">
       <h1 class="page-hero__title">ページ名</h1>
       <p class="page-hero__lead">説明文（任意）</p>
     </div>
   </section>
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 536px;
  overflow: hidden;
  background: var(--lightblue);
}
.page-hero__shapes {
  position: absolute;
  top: 0;
  right: max(0px, calc((100% - var(--container)) / 2));
  width: 622px;
  height: 536px;
  max-width: none;
}
.page-hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 274px var(--gutter) 80px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-hero__title { font-size: 40px; font-weight: 700; line-height: var(--lh); color: var(--ink); }
.page-hero__lead { max-width: 720px; font-size: var(--fs-body); color: var(--ink); }

@media (max-width: 1100px) {
  .page-hero__shapes { right: -240px; }
  .page-hero__inner { padding-left: 40px; }
}
@media (max-width: 767px) {
  .page-hero { min-height: 276px; }
  .page-hero__shapes { top: -7px; right: -105px; width: 307px; height: 265px; }
  .page-hero__inner { padding: 97px var(--gutter) 40px 20px; gap: 12px; }
  .page-hero__title { font-size: 24px; line-height: 1.42; color: var(--darktext); }
  .page-hero__lead { max-width: 246px; color: var(--darktext); }
}

/* ============================================================
   card（事例カード・記事カード・タグ）— TOP／一覧ページ共通
   ============================================================ */
.card-list { display: flex; gap: 16px; }

.case-card {
  flex: 1 1 0;
  min-height: 320px;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  transition: box-shadow .2s;
}
.case-card:hover { box-shadow: var(--shadow); }
.case-card__logo {
  width: 160px;
  height: 72px;
  background: #fff;
  display: grid;
  place-items: center;
}
.case-card__logo img { width: auto; height: auto; max-width: 118px; max-height: 29px; }
.case-card__body { display: flex; flex-direction: column; gap: 20px; max-width: 366px; }
.case-card__title { font-family: var(--ff-noto); font-weight: 700; font-size: var(--fs-h4); }
.case-card__text { font-family: var(--ff-noto); font-weight: 400; font-size: var(--fs-small); }

.post-card {
  flex: 1 1 0;
  min-height: 240px;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 21px 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  transition: box-shadow .2s;
}
.post-card:hover { box-shadow: var(--shadow); }
/* 日付を出さないカード（TOPのお役立ち資料）は下の余白を詰める */
.post-card:not(:has(.post-card__date)) { min-height: 0; }
.post-card__main { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.post-card__title { font-size: var(--fs-h4); font-weight: 700; }
.post-card__date { font-family: var(--ff-noto); font-weight: 400; font-size: 14px; }

.tag {
  display: inline-block;
  background: var(--tag);
  color: var(--darktext);
  border-radius: 40px;
  padding: 8px 20px;
  font-size: 12px;
  line-height: var(--lh);
}

.more-row { display: flex; justify-content: flex-end; margin-top: 24px; }

@media (max-width: 1100px) {
  .card-list { flex-direction: column; }
  .case-card,
  .post-card { flex: none; }
}
@media (max-width: 767px) {
  .card-list { gap: 12px; }
  .more-row { justify-content: center; }
  .case-card { min-height: 0; padding: 16px; gap: 20px; }
  .case-card__body { gap: 8px; }
  .post-card { min-height: 0; padding: 12px; gap: 40px; }
  .post-card__title { font-weight: 500; }
}

/* ============================================================
   CTA（ページ下部の相談導線）— 全ページ共通
   ============================================================ */
.cta { background: #fff; padding: 58px var(--gutter); }
.cta__inner {
  max-width: 847px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  color: #000;
}
.cta__title { font-size: var(--fs-h2); font-weight: 500; }
.cta__lead { margin-top: 8px; font-size: var(--fs-body); }

@media (max-width: 767px) {
  .cta { padding: 60px var(--gutter); }
  .cta__inner { gap: 34px; color: var(--darktext); }
  .cta__title { font-size: 18px; font-weight: 700; }
  .cta__lead { margin-top: 12px; font-weight: 400; line-height: var(--lh-tight); }
}

/* ============================================================
   page-hero の縮小版（高さ461）— 会社情報・お問い合わせ・FAQ・採用・ポリシー
   <section class="page-hero page-hero--sm">
   ============================================================ */
.page-hero--sm .page-hero__title,
.page-hero--sm .page-hero__lead { color: var(--darktext); }
@media (min-width: 768px) {
  .page-hero--sm { min-height: 461px; }
  .page-hero--sm .page-hero__shapes {
    top: -9px;
    right: calc(max(0px, (100% - var(--container)) / 2) + 7px);
    width: 535px;
    height: 461px;
  }
  .page-hero--sm .page-hero__inner { padding: 230px var(--gutter) 80px 64px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .page-hero--sm .page-hero__shapes { right: -200px; }
  .page-hero--sm .page-hero__inner { padding-left: 40px; }
}

/* ============================================================
   パンくず — 下層ページ共通
   <nav class="breadcrumb" aria-label="パンくずリスト"><ol><li><a href="/">TOP</a></li><li>…</li></ol></nav>
   文字色は置き場所で指定（矢印は currentColor で同じ色になる）
   ============================================================ */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 9px;
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh);
}
.breadcrumb li { display: flex; align-items: center; gap: 9px; }
.breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("/assets/breadcrumb-arrow.svg") center / contain no-repeat;
  mask: url("/assets/breadcrumb-arrow.svg") center / contain no-repeat;
}
.breadcrumb a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .breadcrumb ol { font-size: 12px; gap: 0 4px; }
  .breadcrumb li { gap: 4px; }
}

/* 小さいパンくず（.breadcrumb--sm）：1行に収め、長い現在ページ名は … で省略 */
.breadcrumb--sm ol { flex-wrap: nowrap; gap: 0 6px; font-size: 12px; }
.breadcrumb--sm li { flex: none; gap: 6px; white-space: nowrap; }
.breadcrumb--sm li > a,
.breadcrumb--sm li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb--sm li + li::before { width: 12px; height: 12px; }
/* 狭い時は先頭（サイト名）と現在ページ名だけを … で省略。途中の階層は省略しない */
.breadcrumb--sm li:first-child { flex: 0 1 auto; min-width: 4em; }
.breadcrumb--sm li:last-child:not(:first-child) { max-width: 55%; }
@media (max-width: 767px) {
  .breadcrumb--sm ol { gap: 0 4px; font-size: 11px; }
  .breadcrumb--sm li { gap: 4px; }
}

/* ページ冒頭のエリア内に置くとき：ヘッダー直下・ロゴの左端に揃える */
.page-hero > .breadcrumb,
.hero > .breadcrumb,
.notfound > .breadcrumb {
  position: absolute;
  z-index: 1;
  top: calc(var(--header-h) + 16px);
  left: 0;
  right: 0;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 0 32px;
  color: var(--darktext);
}
@media (max-width: 767px) {
  .page-hero > .breadcrumb,
  .hero > .breadcrumb,
  .notfound > .breadcrumb { top: calc(var(--header-h) + 10px); padding-left: 20px; }
  /* TOP は背景の図形に重なるので白い下地を敷く */
  .hero > .breadcrumb ol { display: inline-flex; max-width: 100%; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .8); }
  .hero > .breadcrumb li { flex-shrink: 1; white-space: normal; }
  .page-hero > .breadcrumb ~ .page-hero__inner { padding-top: 121px; }
}

/* ============================================================
   ページ先頭へ戻る（右下固定）— 下層ページ共通
   <a class="page-top" href="#top" aria-label="ページの先頭へ戻る"><img src="/assets/page-top.svg" alt="" width="80" height="80"></a>
   ============================================================ */
.page-top {
  position: fixed;
  right: 48px;
  bottom: 48px;
  z-index: 9;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transition: opacity .2s, visibility .2s;
}
.page-top:not(.is-visible) { opacity: 0; visibility: hidden; }
.page-top.is-visible:hover { opacity: .85; }
.page-top img { width: 100%; height: 100%; }
@media (max-width: 767px) {
  .page-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* ============================================================
   左寄せ見出し（.sec-head の修飾）— 下層ページ共通
   ============================================================ */
.sec-head--left { align-items: flex-start; gap: 12px; text-align: left; }
.sec-head--left .sec-head__title { word-break: auto-phrase; }
@media (max-width: 767px) { .sec-head--left { gap: 6px; } }

/* ============================================================
   FAQ（開閉）— 共通
   <details class="faq"><summary class="faq__q">質問<img class="faq__icon" src="/assets/faq-arrow.svg" alt=""></summary><div class="faq__a">回答</div></details>
   ============================================================ */
.faq {
  background: #fff;
  border-radius: 50px;
  color: var(--navy);
}
.faq[open] { border-radius: var(--radius-card); padding-bottom: 28px; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  font-family: var(--ff-noto);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh);
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { flex: none; width: 28px; height: 28px; transform: rotate(90deg); transition: transform .2s; }
.faq[open] .faq__icon { transform: rotate(-90deg); }
.faq[open] .faq__q { padding-top: 20px; padding-bottom: 0; }
.faq__a {
  margin-top: 24px;
  padding: 0 32px;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh);
}
.faq__a a { text-decoration: underline; }
.faq__a a:hover { color: var(--mainblue); }
@media (max-width: 767px) {
  .faq { border-radius: 28px; }
  .faq[open] { border-radius: 16px; padding-bottom: 16px; }
  .faq__q { gap: 12px; padding: 12px 16px 12px 20px; font-size: 14px; }
  .faq[open] .faq__q { padding-top: 14px; }
  .faq__icon { width: 20px; height: 20px; }
  .faq__a { margin-top: 12px; padding: 0 20px; font-size: 14px; font-weight: 500; }
}

/* ============================================================
   utility
   ============================================================ */
@media (max-width: 767px) {
  .pc-only { display: none; }
  .sp-only { display: revert; }
}

/* ============================================================
   動き（控えめ）— 見出しの出現・ボタンの反応・下層ヒーロー
   ・見出しの出現は common.js が .reveal を付け、画面に入ったら .is-inview を付ける
   ・「動きを減らす」設定の端末ではすべて止める
   ============================================================ */
:root { --ease-out: cubic-bezier(.22, .8, .24, 1); }

/* ボタン：ホバーで少し浮く・押すと沈む・押した位置から波紋 */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(1, 65, 102, .35); }
  .btn:hover .arrow { transform: translateX(4px) rotate(90deg); }
  .header-cta a { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), opacity .2s; }
  .header-cta a:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(1, 65, 102, .35); }
}
.btn:active { transform: scale(.97); box-shadow: 0 2px 6px -2px rgba(1, 65, 102, .3); transition-duration: .08s; }
.btn:disabled { transform: none; box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--btn-sub); outline-offset: 3px; }
.btn__ripple {
  position: absolute;
  z-index: -1;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .22;
  pointer-events: none;
  animation: btn-ripple .6s var(--ease-out) forwards;
}
@keyframes btn-ripple { to { transform: scale(40); opacity: 0; } }

/* 見出し：英字ラベルは左から現れ、見出し・リードは下からふわっと */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-inview { opacity: 1; transform: none; }
.sec-head__en.reveal { transform: none; clip-path: inset(0 100% 0 0); transition: opacity .6s var(--ease-out), clip-path .9s var(--ease-out); }
.sec-head__en.reveal.is-inview { clip-path: inset(0 0 0 0); }
.real-problem__line.reveal { transform: scaleX(0); transform-origin: left center; transition: opacity .3s, transform 1.1s var(--ease-out); }
.real-problem__line.reveal.is-inview { transform: none; }

/* 下層ヒーロー：図形が回りながら上がり、見出しが続いて現れる */
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } }
@keyframes swirl-in { from { opacity: 0; transform: translateY(60px) rotate(-14deg) scale(.94); } }
.page-hero__shapes { transform-origin: 40% 60%; animation: swirl-in 1.4s var(--ease-out) both; }
.page-hero__title { animation: rise-in .9s var(--ease-out) .25s both; }
.page-hero__lead { animation: rise-in .9s var(--ease-out) .4s both; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arrow, .header-cta a, .reveal { transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .btn__ripple { display: none; }
  .reveal, .sec-head__en.reveal, .real-problem__line.reveal { opacity: 1; transform: none; clip-path: none; }
  .page-hero__shapes, .page-hero__title, .page-hero__lead { animation: none; }
}