@charset "UTF-8";
/* ==========================================================================
   スクール事業LP
   Figma: FV_LP_Wireframe_Pattern_A_SP（幅 375px）を再現し、
   「スクール事業LP 実装指示書」（CyberBuzz 2026.09.17）の 5 項目を反映したもの。

   ・1rem = デザイン上の 10px（画面幅 375px のとき）
     画面幅に合わせて全体を等倍で拡大縮小し、500px を上限に中央寄せする。
   ・数値はすべて Figma の実測値（px ÷ 10 = rem）。
   ・改行は Figma と同じ位置に <br> で入れている（自動折り返しはしない）。
   ・フォントは Figma と同じ Inter 3.19。Inter にない日本語は Noto Sans JP で表示される
     （Figma も同じ仕組みで日本語を Noto Sans JP で表示している）。
   ・枠線は border ではなく inset の box-shadow で描く。border は端末の画素に合わせて
     太さが丸められ、1.5px などが細くなって位置もずれるため。
   ・色は指示書 05 の指定色 3 つ（下の :root）に統一。Figma の近似色はすべてこの 3 色に置き換えた。
   ========================================================================== */

/* ---------- 指定カラー（指示書 05） ---------- */
:root {
  --g: 2rem;         /* 画面の左右の余白（Figma の 20px）。スマホの全体拡大で 10px にする */
  --main: #f70029;   /* MAIN：CTA・主要アクセント（Figma の赤・ピンク系をすべてこれに統一） */
  --sub: #354e5e;    /* SUB：補助要素（Figma の #28495f・#354e5e・グレー文字をこれに統一） */
  --text: #171c46;   /* MAIN TEXT：主な見出し・本文（Figma の #142836・#1a1a1a・#262626 をこれに統一） */
}

/* ---------- font ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/inter-ui@3.19.3/Inter%20(web)/Inter-roman.var.woff2") format("woff2");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: min(calc(100vw / 37.5), 13.3333px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #f2f2f2;
  color: var(--text);
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.lp {
  position: relative;
  width: 37.5rem;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.6rem;
  line-height: 1.21;
}

.u-space { display: inline-block; width: 1em; }
/* 画面には出さず、検索エンジンと読み上げにだけ渡す文字（FV の文言は画像に入っているため） */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* ---------- CTA（FV内・下部・追従の 3 か所共通。指示書 02：色は main） ---------- */
.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  flex: none;
  width: 33.5rem;
  height: 4.7rem;
  border-radius: 3.6rem;
  background: #06c755;               /* LINE の緑（2026-10-15 の依頼。指示書の main から変更） */
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .25);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.7rem;
  font-weight: 700;
}
.cta__arrow { font-size: 1.2rem; line-height: 1.5rem; }
.cta__icon { flex: none; width: 2.4rem; height: 2.4rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 5.4rem;
  padding: 0 var(--g);
  background: #fff;
  overflow: hidden;
}
.header__logo { flex: none; width: 17.4rem; height: 3rem; }
.header__logo img { width: 100%; height: 100%; }
.header__tagline { font-size: .9rem; line-height: 1.1rem; color: var(--sub); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { display: flex; flex-direction: column; background: #fff; overflow: hidden; }

/* --- FV（指示書 01）：支給画像 3 枚を自動で切り替える（375 x 435） ---
   文字・赤い装飾は画像に入っているので、上に文字は重ねない。
   動きは参考サイト（日本新薬 新卒採用サイト）と同じ、4 秒表示 → 2 秒かけて次の画像をフェードイン。
   切り替えの制御は assets/js/main.js。 */
.fv { position: relative; height: 43.5rem; overflow: hidden; background: #fff; }
.fv__slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s ease; }
.fv__slide.is-prev { z-index: 1; opacity: 1; transition: none; }   /* ひとつ前の画像は下で表示したまま */
.fv__slide.is-active { z-index: 2; opacity: 1; }                   /* 次の画像を上に重ねてフェードイン */
/* 自分で切り替えるための矢印と点（2026-10-20）。画像の文字（下 1/3）に被らない位置に置く */
.fv__arrow {
  position: absolute;
  top: 16rem;
  z-index: 3;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  color: var(--text);
  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fv__arrow svg { display: block; width: 2.2rem; height: 2.2rem; margin: auto; }
.fv__arrow--prev { left: 1rem; }
.fv__arrow--next { right: 1rem; }
.fv__arrow:focus-visible { outline: .2rem solid var(--main); outline-offset: .2rem; }
.fv__dots { position: absolute; left: 0; right: 0; bottom: .8rem; z-index: 3; display: flex; justify-content: center; gap: .8rem; }
.fv__dot {
  width: .8rem;
  height: .8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 .1rem rgba(0, 0, 0, .15);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fv__dot.is-active { background: var(--main); }
.fv__dot:focus-visible { outline: .2rem solid var(--main); outline-offset: .2rem; }

/* --- Badges：運営会社のCyberBuzz は... --- */
.awards { display: flex; flex-direction: column; gap: .8rem; padding: 1.2rem var(--g); }
.awards__title { color: var(--text); font-size: 1.2rem; line-height: 2rem; font-weight: 700; }
.awards__list { display: flex; align-items: center; gap: 2.6rem; }
.awards__list img { width: 9.2rem; height: 8.6rem; }
.awards__list li:first-child img { width: 9.5rem; height: 8.9766rem; }

/* --- HeroTextColumn --- */
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem var(--g);
  background: #fff;
}
.skills { display: flex; justify-content: space-between; width: 33.5rem; height: 6.9rem; overflow: hidden; }
.skills__item { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 4.8rem; }
.skills__item--sns { width: 4.9rem; }
.skills__icon { position: relative; display: block; flex: none; width: 4.8rem; height: 4.8rem; overflow: hidden; }
.skills__icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4.8rem;
  height: 4.8rem;
  box-shadow: inset 0 0 0 .1rem var(--main);
}
.skills__item--biz .skills__icon::before { width: 4.7rem; height: 4.7rem; }
.skills__icon img { position: absolute; left: .8rem; top: .8rem; width: 3.2rem; height: 3.2rem; }
.skills__item--shoot .skills__icon img { left: .85rem; }
.skills__item--biz .skills__icon img { top: .9rem; }
/* 左上の SKILL 三角 */
.skills__tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--main);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.skills__skill {
  position: absolute;
  left: -.1rem;
  top: 1.0045rem;
  width: 1.7035rem;
  height: .8rem;
  color: #fff;
  font-size: .6rem;
  line-height: .7rem;
  font-weight: 600;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}
.skills__item--shoot .skills__tag { left: .05rem; }
.skills__item--shoot .skills__skill { left: -.05rem; }
.skills__label { color: var(--sub); font-size: 1.2rem; line-height: 1.5rem; font-weight: 600; text-align: center; }

.hero__copy { width: 33.5rem; color: var(--text); font-size: 1.2rem; line-height: 2rem; font-weight: 700; }
.hero__copy em { color: var(--main); }
/* ※1・※2 の注記（Figma では高さ 35px で切れている） */
.hero__note { width: 33.5rem; height: 3.5rem; overflow: hidden; color: var(--sub); font-size: 1rem; line-height: 1.21; white-space: pre; }

/* ==========================================================================
   Tsunagi：こんなこと思っていませんか？
   ========================================================================== */
.worry { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 2.4rem var(--g); background: #fff; }
.worry__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 33.5rem;
  padding: 2.4rem 1.6rem;              /* Figma は左右 22px。悩みを 1 行ずつにするため少し詰めている（2026-10-15） */
  border-radius: .4rem;
  box-shadow: inset 0 0 0 .1rem var(--sub);
}
.worry__title { color: var(--sub); font-size: 2rem; line-height: 2.4rem; font-weight: 800; text-align: center; }
.worry__list { display: flex; flex-direction: column; gap: 1.2rem; width: 100%; }
.worry__list li { overflow: hidden; padding-left: 1em; text-indent: -1em; color: var(--sub); font-size: 1.3rem; line-height: 1.6rem; font-weight: 700; }   /* 行頭の「 をぶら下げ、文字の頭をそろえる（2026-10-15） */
.worry__answer { color: var(--sub); font-size: 1.5rem; line-height: 2.25rem; font-weight: 700; text-align: center; }
.worry__answer em { color: var(--main); }
.worry__illust { width: 26.1rem; height: 17.3rem; }

/* ==========================================================================
   Body：学ぶだけじゃない。〜 共創・運営事例
   ========================================================================== */
.about {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.8rem;
  padding: 4.4rem var(--g);
  background: #ffdde1;
  overflow: hidden;
}
.about > * { position: relative; }
.about > .about__deco { position: absolute; left: 0; top: 0; width: 24.1rem; height: 40.2rem; }

/* --- BodyHeadBlock --- */
.about__head { display: flex; flex-direction: column; gap: 1rem; width: 33.5rem; }
.about__title { display: flex; flex-direction: column; color: var(--text); font-size: 2.4rem; line-height: 3.6rem; font-weight: 800; }
.about__title-1 { width: 33.5rem; text-align: center; }
.about__dots { display: flex; align-items: center; gap: 1.7rem; width: 33.3rem; height: .7rem; margin-top: .5rem; padding: 0 2rem; }
.about__dots i { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: var(--main); }
.about__title-2 { width: 33.3rem; margin-top: .4rem; text-align: center; }
.about__title-2 em { color: var(--main); }
.about__desc { color: var(--sub); font-size: 1.2rem; line-height: 1.8rem; text-align: center; }

/* --- CycleWrap（340 x 372） --- */
.cycle { flex: none; width: 34rem; height: 37.2rem; overflow: hidden; }
.cycle__ring { position: absolute; left: -.05rem; top: 3.2rem; width: 34rem; height: 34rem; }
.cycle__step {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .3rem;
  width: 10.8rem;
  height: 10.8rem;
  padding: 0 .6rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 .2rem var(--main), 0 .3rem .8rem rgba(0, 0, 0, .12);
  text-align: center;
}
.cycle__step--learn { left: 11.55rem; top: 1.8rem; }
.cycle__step--practice { left: 22.808rem; top: 20.866rem; }
.cycle__step--improve { left: .05rem; top: 20.866rem; }
.cycle__step-title { color: var(--main); font-size: 1.25rem; line-height: 1.5rem; font-weight: 800; }
.cycle__step-desc { color: var(--sub); font-size: .8rem; line-height: 1.2rem; font-weight: 700; }
.cycle__center {
  position: absolute;
  left: 9.75rem;
  top: 17.766rem;
  width: 14.6rem;
  color: var(--text);
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 800;
  text-align: center;
}
.cycle__center em { color: var(--main); }

.about__summary { width: 33.5rem; color: var(--text); font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; text-align: center; }
.about__summary em { color: var(--main); }

/* --- SNS_Proof_Section --- */
.proof { display: flex; flex-direction: column; align-items: center; gap: 3.2rem; width: 33.5rem; }
.proof__head { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: 33.5rem; }
.proof__logo { width: 24.068rem; height: 4.0717rem; }
.proof__title { color: var(--text); font-size: 1.6rem; line-height: 1.9rem; font-weight: 700; text-align: center; }
.proof__intro { color: var(--sub); font-size: 1.15rem; line-height: 1.8rem; text-align: center; }
.proof__metrics { display: flex; flex-direction: column; gap: 1.2rem; width: 33.5rem; }
.proof__row { display: flex; gap: .8rem; }
.metric {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  height: 8.8rem;
  padding: 1.2rem .8rem;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: inset 0 0 0 .15rem var(--main);
  text-align: center;
}
.metric dt { color: var(--text); font-size: 1.05rem; line-height: 1.3rem; font-weight: 700; }
.metric dd { color: var(--main); font-size: 2.2rem; line-height: 2.7rem; font-weight: 800; }
.metric--award dd { font-size: 2rem; line-height: 2.4rem; }

/* --- 自社・共同運営メディア（Frame 21） --- */
.media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 33.5rem;
  padding: 0 1.2rem 3.2rem;
  border-radius: 1rem;
  background: var(--text);
}
.media__head {
  flex: none;
  width: 33.5rem;
  height: 6.2rem;
  border-radius: 1rem 1rem 0 0;
  background: #fff;
  box-shadow: inset 0 0 0 .1rem var(--text);
}
.media__title {
  position: absolute;
  left: 5.3rem;
  top: 1.952rem;
  width: 21.9rem;
  color: var(--text);
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 700;
  text-align: center;
}
.media__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 31.1rem;
  padding: .8rem 1.2rem .4rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.media__intro-lead { font-size: 1.6rem; line-height: 1.9rem; }
.media__intro-accent { font-size: 2rem; line-height: 2.3rem; }   /* Pattern B は行の高さ 23px */
/* Figma では 838px で切られていて、4枚目の下端 5px が見えない */
.media__list { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: 29.5rem; height: 83.8rem; overflow: hidden; }

.media-card {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: 2rem 1.2rem;
  border-radius: 1.2rem;
  background: #fff;
  overflow: hidden;
}
.media-card--tobuy,
.media-card--campusclip { width: 29.5rem; }
.media-card--mype,
.media-card--jga { width: 29rem; }
.media-card__body { display: flex; justify-content: center; align-items: flex-start; gap: 2rem; }
.media-card--campusclip .media-card__body,
.media-card--jga .media-card__body { align-items: center; }
/* 枠線 1.5px ＋ 余白（Figma では枠線の太さも余白に含まれている） */
.media-card__icon {
  display: flex;
  flex: none;
  align-items: center;
  width: 7.3rem;
  height: 7.3rem;
  border-radius: 1.6rem;
  background: #fff;
  box-shadow: inset 0 0 0 .15rem var(--text);
}
.media-card__icon img { border-radius: 1.2rem; }
.media-card--tobuy .media-card__icon { padding: .65rem; }
.media-card--tobuy .media-card__icon img { width: 6rem; height: 6rem; }
.media-card--mype .media-card__icon { padding: .95rem; }
.media-card--mype .media-card__icon img { width: 5.4rem; height: 5.4rem; }
.media-card--campusclip .media-card__icon { padding: 1.15rem; }
.media-card--campusclip .media-card__icon img { width: 5rem; height: 5rem; }
.media-card--jga .media-card__icon { padding: .85rem; }
.media-card--jga .media-card__icon img { width: 5.6rem; height: 5.6rem; }
.media-card__text { display: flex; flex: none; flex-direction: column; align-items: center; gap: 1.2rem; }
.media-card--tobuy .media-card__text { width: 15.6rem; }
.media-card--mype .media-card__text { width: 14.2rem; }
.media-card--campusclip .media-card__text { width: 15.4rem; }
.media-card--jga .media-card__text { width: 15.6rem; }
.media-card__names { display: flex; flex: none; flex-direction: column; gap: .8rem; width: 14.15rem; text-align: center; }
.media-card__cat { color: var(--main); font-size: 1.2rem; line-height: 1.4rem; font-weight: 700; }
.media-card__name { color: var(--sub); font-size: 2.4rem; line-height: 1.8rem; font-weight: 700; }
.media-card--campusclip .media-card__name,
.media-card--jga .media-card__name { font-size: 2rem; }
.media-card__desc { width: 100%; color: var(--sub); font-size: 1.2rem; line-height: 1.8rem; text-align: center; }   /* 2026-10-15：アイコンの横ではなく下に全幅で置く */
.media-card__body { align-items: center; }
.media-card__names { width: auto; }
/* 指示書 03：各媒体の TikTok / Instagram へ新しいタブで遷移 */
.media-card__btn {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  width: 26.6rem;
  height: 4.4rem;
  padding: .5rem 1rem;
  border-radius: 2rem;
  background: var(--main);
  box-shadow: 0 .2rem .2rem rgba(0, 0, 0, .1);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
}
.media-card__btn img { flex: none; width: 2.8rem; height: 2.8rem; }
.media-card__btn span { width: 10rem; }
.media-card__btn--instagram span { width: 12.6rem; }

/* --- 共創・運営事例 --- */
.cases__title { width: 33.5rem; color: var(--text); font-size: 2rem; line-height: 2.4rem; font-weight: 600; text-align: center; }
.cases__title em { color: var(--main); }
.cases { display: flex; flex-direction: column; gap: 1.2rem; width: 33.5rem; }
.case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 2.4rem;
  border-radius: .8rem;
  background: #fff;
  box-shadow: inset 0 0 0 .1rem #e6e6e6;
  overflow: hidden;
}
.case__photo { border-radius: 1.2rem; }
.case--yoshihashi .case__photo { width: 12rem; height: 12rem; }
.case--bayashi .case__photo { width: 21.3rem; height: 12rem; }
.case--sodachi .case__photo { width: 20rem; height: 11.5rem; }
.case__cat { color: var(--main); font-size: 1.1rem; line-height: 1.3rem; font-weight: 700; text-align: center; }
.case__names { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.case__names--row { flex-direction: row; gap: .8rem; }
.case__name { color: var(--text); font-size: 1.7rem; line-height: 2.1rem; font-weight: 800; }
.case__names--row .case__name { font-size: 1.9rem; line-height: 2.3rem; }
.case__fw { display: flex; justify-content: center; align-items: center; gap: .4rem; color: var(--main); font-size: 1.6rem; line-height: 1.9rem; font-weight: 700; }
.case__fw img { width: 2.4rem; height: 2.4rem; }
.case__sns { color: var(--sub); font-size: 1.2rem; line-height: 1.5rem; font-weight: 700; }
.case__desc { width: 28rem; color: var(--sub); font-size: 1.25rem; line-height: 1.5rem; text-align: center; }

.about__note { width: 33.5rem; color: var(--sub); font-size: 1rem; line-height: 1.2rem; text-align: center; }

/* ==========================================================================
   Career（Figma: SNS_Proof_Section 2:191）：SNSスキルを、さまざまな仕事に。
   色は指示書 05 の 3 色に置き換えず、Figma（Pattern B）の色をそのまま使う（2026-10-15 の依頼）
   ========================================================================== */
.career { display: flex; flex-direction: column; align-items: center; gap: 3.2rem; padding: 4.3rem var(--g); background: #fff; }
/* Figma ではカードの 2 段（171 + 12 + 160 = 343px）が枠（336px）からはみ出していて、上下中央寄せで余白が 43px になる */
.career__head { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; }
.career__title { color: #142836; font-size: 2rem; line-height: 2.4rem; font-weight: 600; }
.career__title em { color: var(--main); }
.career__intro { width: 33.5rem; color: #354e5e; font-size: 1.15rem; line-height: 1.8rem; }
.career__grid { width: 33.5rem; }   /* 2026-10-15：3 列が窮屈だったので 2 列（2+2+1）にした */
.career__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem .8rem; }
.job {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  width: 16.35rem;
  min-height: 15.3rem;
  justify-content: center;
  padding: .55rem .95rem;             /* Figma の余白 4px / 8px ＋ 枠線 1.5px */
  border-radius: 1.2rem;
  background: #fff;
  overflow: hidden;
  text-align: center;
}
.job::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .15rem rgba(255, 76, 99, .9); pointer-events: none; }
.job__illust { position: relative; display: block; flex: none; width: 7.4rem; height: 8.8rem; overflow: hidden; }
.job__illust img { position: absolute; }
.job__circle { left: 0; top: .873rem; width: 7.4rem; height: 7.7rem; }
.job__img { object-fit: cover; }
.job--creator .job__img { left: -.017rem; top: 1.473rem; width: 7.3rem; height: 7.3rem; }
.job--video .job__illust { width: 8.3rem; }
.job--video .job__circle { left: .5rem; }
.job--video .job__img { left: 0; top: 1.473rem; width: 8.2rem; height: 7.3rem; }
.job--operator .job__img { left: 0; top: 2.173rem; width: 8.5416rem; height: 6.7rem; }
.job--marketer .job__circle, .job--director .job__circle { top: .173rem; width: 9.4rem; height: 8.3rem; }
.job--marketer .job__illust { width: 10.6rem; }
.job--marketer .job__circle { left: .625rem; }
.job--marketer .job__img { left: .525rem; top: .473rem; width: 9.6rem; height: 8.6rem; }
.job--director .job__illust { width: 12.7rem; }
.job--director .job__circle { left: 1.625rem; }
.job--director .job__img { left: .825rem; top: .473rem; width: 10.9rem; height: 8.3rem; }
.job__name { color: #ff4c63; font-size: 1.15rem; line-height: 1.21; font-weight: 900; }
.job__desc { color: #142836; font-size: 1.05rem; line-height: 1.3rem; font-weight: 600; }
.career__note { width: 33.5rem; color: #354e5e; font-size: 1rem; line-height: 1.2rem; text-align: center; }

/* ==========================================================================
   Closing：SNSを仕事にするための一歩を、ここから。〜 CTA
   ========================================================================== */
.closing {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.8rem;
  padding: 4.4rem var(--g) 6rem;
  background: #fff;
  overflow: hidden;
}
.closing > * { position: relative; }
.closing > .closing__circle {
  position: absolute;
  left: calc(50% - 20.75rem);    /* 中央寄せ（Figma では左端 -20px） */
  top: -15.0483rem;
  width: 41.5rem;
  height: 41.5rem;
  border-radius: 50%;
  background: var(--main);
}

/* --- Frame 33 --- */
.closing__head { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 33.5rem; }
.closing__lead { display: flex; flex-direction: column; gap: 1rem; width: 33.5rem; }
.closing__dots { display: flex; gap: 1rem; height: .7rem; }
.closing__dots > span { display: flex; flex: none; width: 10rem; height: .7rem; }
.closing__dots > span:first-child { gap: 1.2rem; padding-left: 3.7rem; }
.closing__dots > span:last-child { gap: 1.7rem; padding-left: .7rem; }
.closing__dots i { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: #fff; }
.closing__title { height: 7.3rem; color: #fff; font-size: 2.4rem; line-height: 3.6rem; font-weight: 800; text-align: center; }
.closing__title-sns { font-size: 2.6rem; }
.closing__title em { color: var(--text); }
.closing__text { color: #fff; font-size: 1.25rem; line-height: 1.5rem; text-align: center; }
.closing__label {
  width: 16.2rem;
  height: 3.1rem;
  padding: .7rem 2rem;
  border-radius: 99.9rem;
  box-shadow: inset 0 0 0 .1rem #fff;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.7rem;
  font-weight: 700;
}

/* --- AllPlansLearnBox（指示書 04：プランの横スクロールの外側に置く） --- */
.learn {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 33.5rem;
  padding: 2rem;
  border-radius: .8rem;
  box-shadow: inset 0 0 0 .1rem var(--main);
  overflow: hidden;
}
.learn__head { display: flex; flex-direction: column; gap: .4rem; }
.learn__dots { display: flex; gap: 1.2rem; height: .4rem; padding: 0 .6rem; }
.learn__dots i { flex: none; width: .4rem; height: .4rem; border-radius: 50%; background: var(--main); }
.learn__title { color: var(--text); font-size: 1.6rem; line-height: 1.9rem; font-weight: 700; }
.learn__title em { color: var(--main); }
.learn__list { display: flex; flex-direction: column; gap: .8rem; }
.learn__list li { position: relative; display: flex; gap: .8rem; color: var(--sub); font-size: 1.25rem; line-height: 2.1rem; font-weight: 700; }
.learn__list li::before { content: ""; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--main); }
.learn__num { position: absolute; left: .6rem; top: 0; color: #fff; }
.learn__num--1 { left: .7rem; }
.learn__num--2 { top: .023rem; }

/* --- PlansCol（指示書 04）：BASIC → STANDARD → PRO を横に並べ、横スクロールで比較する ---
   ・カードは Figma のデザイン（幅 335px）をそのまま 300px に縮小して並べ、次のカードの左端を見せる。
   ・スワイプで 1 枚ずつ止まる（スナップ）。左右の丸い矢印（Figma の Group 3）で前後のカードへ送る。
   ・横スクロールはこの中だけで起き、ページ全体は横にはみ出さない。 */
.plans { width: 33.5rem; }
.plans__track {
  display: flex;
  align-items: stretch;             /* 3 枚のカードを同じ高さにそろえる */
  gap: 1.6rem;
  width: calc(33.5rem + var(--g) * 2);
  margin: -1rem calc(var(--g) * -1) -2.4rem;      /* 左右は画面端まで広げ、上下はカードの影が切れない分だけ余白を足す */
  padding: 1rem var(--g) 2.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--g);
  scrollbar-width: none;
}
.plans__track::-webkit-scrollbar { display: none; }
.plans__track:focus-visible { outline: .2rem solid var(--text); outline-offset: -.2rem; }
.plans__track > .plan { flex: none; width: 33.5rem; zoom: .8955; scroll-snap-align: start; }
/* Figma の Group 3：左右の端に半分だけ出ている丸い矢印。BASIC カードの同じ高さに置く */
.plans__arrow {
  position: absolute;
  top: 33rem;                       /* カードのイラストの高さ（文字に被らない位置）2026-10-15 */
  z-index: 2;
  width: 6.3rem;
  height: 6.3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.plans__arrow svg { display: block; width: 100%; height: 100%; }
.plans__arrow:focus-visible { outline: .2rem solid var(--text); outline-offset: -.4rem; }
.plans__arrow--prev { left: calc(var(--g) * -1 - 3.2rem); }
.plans__arrow--next { left: calc(33.5rem + var(--g) - 3rem); }

.plan {
  --plan: var(--text);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1.4rem;
  background: #fff;
  box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .05);
  overflow: hidden;
}
/* Figma の枠線は中身より手前に描かれるので、疑似要素で上に重ねる */
.plan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 .1rem #e6e6e6;
  pointer-events: none;
}
.plan--standard { --plan: var(--main); box-shadow: 0 .6rem 1.6rem rgba(247, 0, 41, .2); }
.plan--standard::after { box-shadow: inset 0 0 0 .3rem var(--main); }
.plan--pro { --plan: var(--main); }

.plan__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  padding: 2rem 1.6rem 1.8rem;
  background: var(--plan);
  color: #fff;
  text-align: center;
}
.plan--standard .plan__header { gap: 1.2rem; padding-top: 1.6rem; }
.plan__header-inner { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.plan__ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16rem;
  height: 2.4rem;
  padding: .4rem 1.4rem;
  background: linear-gradient(194.61deg, #ca6800 -1.97%, #ffc456 54.47%, #ca6800 104.76%);
  color: #664000;
  font-size: 1.1rem;
  line-height: 1.3rem;
  font-weight: 700;
}
.plan__catch { opacity: .85; font-size: 1.15rem; line-height: 1.4rem; font-weight: 600; }
.plan__name { font-size: 2.6rem; line-height: 3.1rem; font-weight: 800; }
.plan__term {
  width: 9.4rem;
  height: 2.2rem;
  padding: .4rem 1.4rem;
  border-radius: 99.9rem;
  background: #fff;
  color: var(--plan);
  font-size: 1.15rem;
  line-height: 1.4rem;
  font-weight: 700;
  text-align: left;
}
.plan--basic .plan__term { width: 9.3rem; }

.plan__body { display: flex; flex: 1; flex-direction: column; gap: 1.4rem; padding: 1.8rem; background: #fff; }
.plan__point { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.plan__point-label {
  width: 5.8rem;
  height: 1.8rem;
  padding: .3rem .9rem;
  border-radius: .3rem;
  background: var(--plan);
  color: #fff;
  font-size: 1rem;
  line-height: 1.2rem;
  font-weight: 700;
}
.plan__point-label--02 { width: 5.9rem; }
.plan__point-text { color: var(--sub); font-size: 1.25rem; line-height: 1.5rem; }
.plan__recommend {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.9rem;
  padding: 1.2rem 1rem;
  border-radius: .6rem;
  background: var(--plan);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 700;
}
.plan__photo { width: 29.9rem; height: 13rem; border-radius: .6rem; }
/* 価格の代わりに「期間（月4回）」と「スキルの活用イメージ」を出す（Figma: Pattern B の PriceRow） */
/* カルーセルで並べたときに文字の高さがそろうよう、カードの下端に寄せ、活用イメージは 3 行分の高さを取る */
.plan__price { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: auto; text-align: center; }
.plan__price-term { color: var(--sub); font-size: 1.3rem; line-height: 1.21; font-weight: 600; }
.plan__price-note { font-size: 1.1rem; font-weight: 400; }
.plan__price-use { min-height: calc(1.2rem * 1.21 * 3); color: var(--plan); font-size: 1.2rem; line-height: 1.21; font-weight: 800; }

/* --- Frame 34 --- */
.support { width: 33.5rem; }
.support__text { color: var(--sub); font-size: 1.2rem; line-height: 1.8rem; font-weight: 700; text-align: center; }
.support__text em { color: var(--main); }

/* ==========================================================================
   スマホでの読みやすさ調整（2026-10-15）
   Figma どおりの文字サイズだと実機で小さく見えるため、本文・注記を一段大きくする。
   見出しとレイアウトの寸法は Figma のまま。大きくして入らなくなった文は自然に折り返す。
   ========================================================================== */
.u-wrap,
.hero__note,
.about__note,
.career__note,
.case__desc,
.closing__text { white-space: normal; line-break: strict; word-break: auto-phrase; text-wrap: pretty; }

.header__tagline { font-size: 1rem; line-height: 1.2rem; }
.awards__title { font-size: 1.3rem; }

.hero__copy { font-size: 1.45rem; line-height: 2.3rem; }   /* 1 行目が入らないので「動画制作から」で改行（index.html） */
.hero__note { display: flex; flex-direction: column; gap: .2rem; height: auto; overflow: visible; font-size: 1.1rem; line-height: 1.6rem; }
.hero__note p { padding-left: 1.75em; text-indent: -1.75em; }


.worry__list li { overflow: visible; }   /* 3 行目の「？」」が箱（291px）から出て切れていた */
.about__desc { font-size: 1.35rem; line-height: 2.1rem; }
.cycle__step-title { font-size: 1.4rem; line-height: 1.7rem; }
.cycle__step-desc { font-size: .95rem; line-height: 1.3rem; }

.proof__intro { font-size: 1.25rem; line-height: 2rem; }
.metric { height: auto; min-height: 8.8rem; }
.metric dt { font-size: 1.2rem; line-height: 1.5rem; }

.media__list { height: auto; overflow: visible; }
.media-card__cat { font-size: 1.3rem; line-height: 1.6rem; }
.media-card__desc { font-size: 1.3rem; line-height: 1.9rem; }

.case__cat { font-size: 1.25rem; line-height: 1.5rem; }
.case__sns { font-size: 1.3rem; line-height: 1.6rem; }
.case__desc { width: 28.7rem; font-size: 1.35rem; line-height: 2.1rem; }
.about__note { font-size: 1.1rem; line-height: 1.6rem; }

.career__intro { font-size: 1.3rem; line-height: 2rem; }
.job__name { font-size: 1.2rem; }
.job__desc { font-size: 1.1rem; line-height: 1.5rem; }
.career__note { font-size: 1.1rem; line-height: 1.6rem; }

/* 説明が 3 行になったぶん、赤い円（Figma の寸法のまま）の中に「選べる3つのプラン」まで収まるよう行間と余白を詰める */
.closing__text { font-size: 1.35rem; line-height: 1.7rem; }
.closing__lead { gap: .6rem; }
.closing__head { gap: 1.2rem; }
.learn__list li { font-size: 1.4rem; }

/* プランのカードは 0.8955 倍に縮小して並べているので、その分も見込んで大きくする */
.plan__catch { font-size: 1.3rem; line-height: 1.6rem; }
.plan__point-label { width: auto; height: auto; font-size: 1.15rem; line-height: 1.4rem; }
.plan__point-label--02 { width: auto; }
.plan__point-text { font-size: 1.45rem; line-height: 1.9rem; }
.plan__recommend { height: auto; min-height: 3.9rem; font-size: 1.35rem; line-height: 1.7rem; }
.plan__price-term { font-size: 1.5rem; }
.plan__price-note { font-size: 1.25rem; }
.plan__price-use { min-height: calc(1.3rem * 1.4 * 3); font-size: 1.3rem; line-height: 1.4; }

.support__text { font-size: 1.35rem; line-height: 2.1rem; }

/* ==========================================================================
   SP の文字拡大（2026-10-15）
   スマホ（〜767px）だけ、文字をもう一段大きくする。PC（幅 500px の列）は上の大きさのまま。
   画像・枠・余白・セクションの寸法は変えない。目安（375px 幅）：注記 12px、本文 14〜15px。
   大きくして 1 行に入らなくなった文は、index.html で意味の切れ目に改行を入れ直している。
   ========================================================================== */
@media (max-width: 767px) {
  /* ---------- 共通 ---------- */
  .cta { font-size: 1.6rem; line-height: 1.9rem; }
  .cta__arrow { font-size: 1.3rem; }

  /* ---------- Header / Hero ---------- */
  .header__tagline { font-size: 1.05rem; line-height: 1.3rem; }
  .awards__title { font-size: 1.45rem; line-height: 2.2rem; }
  .skills { height: auto; overflow: visible; }
  .skills__label { font-size: 1.3rem; line-height: 1.6rem; letter-spacing: -.06em; }   /* 「企業案件」が枠（48px）からはみ出さない幅 */
  /* サブコピー 1 行目と ※1 は 1 行に入る大きさまで下げる（2026-10-15 の依頼） */
  .hero__copy { font-size: 1.4rem; line-height: 2.3rem; }
  .hero__copy em { font-size: 1.17rem; }
  .hero__note { font-size: .78rem; line-height: 1.3rem; }

  /* ---------- こんなこと思っていませんか？ ---------- */
  /* 悩みは 1 つ 1 行で読めるように、枠の左右の余白を詰めて文字を少し小さくする（1 つ目だけ長いので 2 行） */
  .worry__box { padding-left: 1.4rem; padding-right: 1.4rem; }
  .worry__list { gap: 1.4rem; }
  .worry__list li { font-size: 1.3rem; line-height: 2rem; }
  .worry__answer { font-size: 1.65rem; line-height: 2.5rem; }

  /* ---------- 学ぶだけじゃない。 ---------- */
  .about__desc { font-size: 1.45rem; line-height: 2.4rem; }   /* 「企業やブランドのSNS運用、マーケティングなど、」が 1 行に入る大きさ */
  .cycle__step-title { font-size: 1.5rem; line-height: 1.8rem; }
  .cycle__step-desc { font-size: 1.05rem; line-height: 1.4rem; }
  .about__summary { font-size: 1.75rem; line-height: 2.6rem; }

  /* ---------- CyberBuzz の実績 ---------- */
  .proof__title { font-size: 1.75rem; line-height: 2.2rem; }
  .proof__intro { font-size: 1.15rem; line-height: 2rem; }   /* 28 文字の行が 1 行に入る大きさ */
  .metric dt { font-size: 1.3rem; line-height: 1.6rem; }

  /* ---------- 自社・共同運営メディア ---------- */
  .media__intro-lead { font-size: 1.7rem; line-height: 2.1rem; }
  .media-card__cat { font-size: 1.4rem; line-height: 1.7rem; }
  .media-card__desc { font-size: 1.4rem; line-height: 2rem; }
  .media-card__btn { font-size: 1.7rem; }

  /* ---------- 共創・運営事例 ---------- */
  .cases__title { font-size: 2.1rem; line-height: 2.7rem; }
  .case__cat { font-size: 1.35rem; line-height: 1.7rem; }
  .case__name { font-size: 1.85rem; line-height: 2.3rem; }
  .case__names--row .case__name { font-size: 2rem; line-height: 2.4rem; }
  .case__sns { font-size: 1.4rem; line-height: 1.7rem; }
  .case__desc { font-size: 1.4rem; line-height: 2.2rem; }
  .about__note { font-size: 1.2rem; line-height: 1.8rem; }

  /* ---------- SNSスキルを、さまざまな仕事に。 ---------- */
  .career__intro { font-size: 1.45rem; line-height: 2.3rem; }
  .job { gap: .7rem; }
  .job__name { font-size: 1.35rem; line-height: 1.7rem; }
  .job__desc { font-size: 1.2rem; line-height: 1.7rem; }
  .career__note { font-size: 1.2rem; line-height: 1.8rem; }

  /* ---------- クロージング・プラン ---------- */
  /* 赤い円（Figma の寸法のまま）の中に「選べる3つのプラン」まで収まる大きさ */
  .closing__text { font-size: 1.45rem; line-height: 1.75rem; }
  .closing__label { width: auto; height: auto; font-size: 1.5rem; line-height: 1.7rem; }
  .learn__title { font-size: 1.75rem; line-height: 2.1rem; }
  .learn__list li { font-size: 1.5rem; line-height: 2.1rem; }

  /* プランのカードは 0.8955 倍に縮小して並べているので、その分も見込んで大きくする */
  .plan__catch { font-size: 1.45rem; line-height: 1.8rem; }
  .plan__term { width: auto; height: auto; font-size: 1.3rem; line-height: 1.6rem; }
  .plan__ribbon { width: auto; height: auto; font-size: 1.3rem; line-height: 1.6rem; }
  .plan__point-label { font-size: 1.3rem; line-height: 1.6rem; }
  .plan__point-text { font-size: 1.6rem; line-height: 2.2rem; }
  .plan__recommend { font-size: 1.5rem; line-height: 2rem; }
  .plan__price-term { font-size: 1.7rem; }
  .plan__price-note { font-size: 1.4rem; }
  .plan__price-use { min-height: calc(1.45rem * 1.45 * 3); font-size: 1.45rem; line-height: 1.45; }

  .support__text { font-size: 1.4rem; line-height: 2.3rem; }   /* 「どのプランが自分に合うかわからなくても大丈夫！」が 1 行に入る大きさ */
  .plan__recommend { text-align: center; }

  /* 見出し：1 行に収まる範囲で大きくする */
  .media__title { font-size: 2.1rem; }
  .cases__title { font-size: 2.2rem; line-height: 2.8rem; }
  .career__title { font-size: 2.2rem; line-height: 2.7rem; }
}

/* ==========================================================================
   スマホの全体拡大（2026-10-15）
   文字だけ大きくするとバランスが崩れるので、スマホ（〜499px。デザインが画面幅いっぱいになる幅）では
   1. 左右の余白を 20px → 10px にして、デザイン全体を等倍で拡大する（375px 幅で約 1.06 倍）
   2. 画面幅に余裕がある要素（画像・アイコン・ボタン・写真・イラスト）を、大きくした文字に合わせて拡大する
   ========================================================================== */
@media (max-width: 499.98px) {
  /* 1. 中身の幅 335（Figma）を「画面幅 − 左右 10px」にぴったり合わせる */
  html { font-size: calc((100vw - 20px) / 33.5); }
  :root { --g: 10px; }
  .lp { width: 100%; }
  .fv { height: auto; aspect-ratio: 375 / 435; }   /* FV 画像は画面幅に合わせ、縦横比を保つ */

  /* 2. 要素の拡大（中の配置ごと zoom で拡大するので、アイコンの SKILL の三角なども崩れない） */
  .header__logo { zoom: 1.1; }
  .awards__list { gap: 1.3rem; }
  .awards__list li { zoom: 1.1; }
  .skills__icon { zoom: 1.15; }
  .skills__label { font-size: 1.25rem; }
  .cta { height: 5.4rem; }
  .worry__illust { width: 30rem; height: 19.885rem; }
  /* .cycle__step の zoom は left もずれて右の円が切れるので外した（2026-10-20） */
  .proof__logo { width: 26.5rem; height: 4.483rem; }
  .media-card__icon { zoom: 1.12; }
  .media-card__btn { height: 4.8rem; }
  .media-card__btn img { width: 3.2rem; height: 3.2rem; }
  .case__photo { zoom: 1.15; }
  .case__fw img { width: 2.6rem; height: 2.6rem; }
  .job--creator .job__illust, .job--video .job__illust, .job--operator .job__illust { zoom: 1.2; }
  .job--marketer .job__illust, .job--director .job__illust { zoom: 1.1; }
  .closing__label { padding: .8rem 2.4rem; }
}

/* ==========================================================================
   追従CTA（指示書 02）
   FV 内のボタンが画面の上に抜けたら画面下に出し、下部のボタンが見えている間は隠す（main.js）。
   追従エリアは背景なし（透明）で、ボタンだけを表示する。375px 幅でボタン 335 x 47、左右 20px。
   ========================================================================== */
.float-cta {
  position: fixed;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 33.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 1.2rem);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.float-cta.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .3s ease, transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fv__slide,
  .float-cta,
  .float-cta.is-shown { transition: none; }
}