@charset "UTF-8";
/* ==========================================================================
   40キャリア — 3本柱セクション（.c40-pillars）

   「書類を作り直す／求人を一緒に選ぶ／面接を練習する」の3枠と、
   その下の結果カードをまとめた自前コンポーネント。2026-09-19。

   🔴 これは **c40-cc.css ＋ c40-cc-flip.css ＋ c40-cc-custom.css を置き換えたもの**。
      前2つは careerchange のCSSを抜き出した／派生させたものだったので、
      見た目を1つも変えないことを条件に、自分の命名・自分の構造で書き直した。
      クラス名も HTML ごと `top-features__*` → `c40-pillar(s)_*` に改めてある。

   構造（HTMLの入れ子と同じ順）:
     .c40-pillars            … 器。色と文字の基準をここで閉じる
       .c40-pillars_sec      … 背景のグラデ面。上端に白い三角の切り込み
         .c40-pillars_inner  … 淡ティールの角丸パネル
           .c40-pillars_head … パネルの上辺にまたがる見出し
           .c40-pillars_list
             .c40-pillar × 3 … 画像／本文／吹き出し／ひとこと／人物／飾り文字
           .c40-pillars_arrow
           .c40-pillars_card … 結果カード（砂色・立体影）

   ==========================================================================
   🔴🔴 ブロックの並び順を絶対に変えないこと 🔴🔴

   媒体クエリが **5つ**あり、すべて max-width で範囲が重なっている。
   詳細度が同じなので、**後ろに書いたブロックが勝つ**。
   つまり 390px では 750 / 1024 / 1200 / 375 / 1440 の**5つとも条件を満たし**、
   同じプロパティなら **1440 > 375 > 1200 > 1024 > 750** の順で効く。

     例) 見出しの文字サイズは 750 ブロックで 4.2666vw、1200 ブロックで 2.3333vw。
         390px では **1200 のほうが後ろにあるので 2.3333vw（= 9.1px）が効く**。

   この重なりは元の作りをそのまま引き継いだもので、範囲を整理すると
   **見え方が変わる**。整理するなら「見た目の回帰検証」（site/README.md）を
   通しながら別の作業として行うこと。ここでは順序を保つことを優先している。

   並び:
     1. 素の値
     2. @media (max-width: 750px)
     3. @media (max-width: 1024px)
     4. @media (max-width: 1200px)
     5. @media (max-width: 375px)
     6. @media (max-width: 1440px)
     7. @media (min-width: 751px)   … PCの左右互い違い
     8. 40キャリア独自の差し替え（色・素材・余白）
   ========================================================================== */

/* ==========================================================================
   1. 素の値
   ========================================================================== */

/* letter-spacing はサイト全体が `--spacing` で効かせているので、
   このセクションだけ normal に戻す（元の詰まった字面に合わせるため）。 */
.c40-pillars {
  --pil-main: #07941d;
  --pil-deep: #0f4d11;
  --spacing: normal;
  font-family: "Noto Sans JP", Helvetica, Arial, "Hiragino Sans", YuGothic, "Yu Gothic medium", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #111;
  text-align: left;
  overflow: hidden;
}

.c40-pillars *,
.c40-pillars *::before,
.c40-pillars *::after {
  letter-spacing: normal;
}

.c40-pillars img,
.c40-pillars svg,
.c40-pillars picture {
  width: auto;
  max-width: 100%;
  height: auto;
}

.c40-pillars .c40-pillars_sp {
  display: none;
}

/* --- 背景の面。上端の白い三角は ::before で切り抜く --- */
.c40-pillars .c40-pillars_sec {
  position: relative;
  padding: 12.3125rem 1.25rem 7.375rem;
  background: linear-gradient(269.9deg, #D4EED8 0.06%, #EDFDE3 99.89%);
}

.c40-pillars .c40-pillars_sec::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 5rem;
  background-color: var(--pil-paper);
  -webkit-clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}

.c40-pillars .c40-pillars_inner {
  position: relative;
  width: 100%;
  max-width: 82.5rem;
  margin-inline: auto;
  padding: 11.75rem 3.75rem 7.375rem;
  border-radius: 3.125rem;
  background-color: var(--pil-pale);
}

/* --- 見出し（パネルの上辺にまたがせる） --- */
.c40-pillars .c40-pillars_head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -70%);
  width: 100%;
  text-align: center;
}

.c40-pillars .c40-pillars_lead {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--pil-deep);
}

.c40-pillars .c40-pillars_title {
  margin-top: 0.875rem;
}

.c40-pillars .c40-pillars_title span {
  display: inline-block;
  background: var(--pil-paper);
  font-size: 3.125rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--pil-deep);
}

/* --- 1枠 --- */
.c40-pillars .c40-pillar {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.c40-pillars .c40-pillar:nth-child(even) {
  flex-direction: row-reverse;
}

.c40-pillars .c40-pillar_shot {
  display: block;
  width: 29.625rem;
  flex-shrink: 0;
  filter: drop-shadow(0px 4px 30px rgba(9, 47, 1, 0.2));
}

.c40-pillars .c40-pillar_shot img {
  display: block;
  width: 100%;
}

.c40-pillars .c40-pillar_shotSp {
  display: none;
}

/* 吹き出し。しっぽは border の向きで三角を作る */
.c40-pillars .c40-pillar_bubble {
  position: absolute;
  top: -5.875rem;
  left: 15rem;
  width: 100%;
  padding: 1.1875rem 1.5rem;
  border-radius: 5.625rem;
  background: var(--pil-sand);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--pil-dark);
  box-shadow: 0px 10px 20px rgba(12, 105, 29, 0.1);
}

.c40-pillars .c40-pillar_bubble::after {
  content: "";
  position: absolute;
  left: 5.625rem;
  bottom: -1rem;
  border-left: 1.875rem solid var(--pil-sand);
  border-bottom: 1.125rem solid transparent;
}

.c40-pillars .c40-pillar_body {
  flex: 1;
  margin-top: 4.0625rem;
  padding: 2.5rem 5rem;
  border-top-right-radius: 3.125rem;
  border-bottom-right-radius: 3.125rem;
  background-color: var(--pil-paper);
}

.c40-pillars .c40-pillar_title {
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--pil-main);
}

.c40-pillars .c40-pillar_text {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--pil-ink);
}

.c40-pillars .c40-pillar_text.c40-pillar_text--sm {
  font-size: 0.75rem;
}

.c40-pillars .c40-pillar_text .c40-pillar_em {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--pil-main);
}

.c40-pillars .c40-pillar_text + .c40-pillar_text {
  margin-top: 1rem;
}

/* 受講者のひとこと */
.c40-pillars .c40-pillar_voice {
  position: absolute;
  right: 11.125rem;
  bottom: 1.75rem;
  z-index: 1;
  padding: 1.25rem 1.875rem;
  border-radius: 1.25rem;
  background: var(--pil-main);
  color: var(--pil-paper);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.c40-pillars .c40-pillar_voice::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: 1.625rem;
  border-left: 2rem solid var(--pil-main);
  border-top: 1.8125rem solid transparent;
}

.c40-pillars .c40-pillar_person {
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  width: 9.625rem;
}

.c40-pillars .c40-pillar_deco {
  position: absolute;
  right: 1rem;
  top: 1.5rem;
  width: 17rem;
}

/* --- 2枠目だけ素の状態で左右が逆（PCでは後段の互い違い指定が上書きする） --- */
.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) {
  margin-top: 3.75rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_bubble {
  left: auto;
  right: 23rem;
  top: -0.75rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_bubble::after {
  left: auto;
  right: 7.625rem;
  border-left: none;
  border-right: 1.875rem solid var(--pil-sand);
  border-bottom: 1.125rem solid transparent;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_body {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 3.125rem;
  border-bottom-left-radius: 3.125rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_voice {
  right: auto;
  left: 12.5rem;
  bottom: 4rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_voice::after {
  right: auto;
  bottom: 4rem;
  left: -2rem;
  border-left: none;
  border-right: 2rem solid var(--pil-main);
  border-top: 1.8125rem solid transparent;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_person {
  position: absolute;
  left: 1.5rem;
  width: 9.4375rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_deco {
  position: absolute;
  left: 2rem;
  top: 0;
  width: 10.625rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) {
  margin-top: 6.25rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_bubble::after {
  left: 8.625rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_voice {
  right: 13.0625rem;
  bottom: 1.75rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_person {
  width: 10.8125rem;
  bottom: -0.75rem;
}

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_deco {
  right: 0.5rem;
  top: 2rem;
  width: 10.5625rem;
}

/* --- パネルから結果カードへつなぐ矢印 --- */
.c40-pillars .c40-pillars_arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 40%);
  width: 17.125rem;
  z-index: 1;
}

/* --- 結果カード --- */
.c40-pillars .c40-pillars_card {
  position: relative;
  width: 100%;
  max-width: 59.375rem;
  margin-top: 2rem;
  margin-inline: auto;
  border: 10px solid var(--pil-sand);
  border-radius: 3.125rem;
  background: linear-gradient(95.23deg, #FFFAC5 2.86%, #FFF584 97.83%);
  box-shadow: 0px 20px 0px var(--pil-sand-dark);
}

.c40-pillars .c40-pillars_card_inner {
  padding: 3.125rem;
}

.c40-pillars .c40-pillars_card_fig1 {
  position: absolute;
  width: 6.125rem;
  object-fit: contain;
  aspect-ratio: 98/172;
  left: 9%;
  top: -1.25rem;
}

.c40-pillars .c40-pillars_card_fig2 {
  position: absolute;
  width: 7.3125rem;
  object-fit: contain;
  aspect-ratio: 117/183;
  right: 8%;
  top: -1.625rem;
}

.c40-pillars .c40-pillars_card_head {
  width: 89%;
  margin-inline: auto;
}

.c40-pillars .c40-pillars_card_text {
  margin-top: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--pil-ink);
}

/* ==========================================================================
   2. @media (max-width: 750px) — 縦積みにする
   ========================================================================== */


/* ==========================================================================
   6. @media (max-width: 1440px)
   🔴 いちばん後ろなので、範囲が重なる限りここが最優先で効く
   ========================================================================== */
@media screen and (max-width: 1440px) {
.c40-pillars .c40-pillar_body {
    padding: 2.5rem;
  }

.c40-pillars .c40-pillar_voice {
    font-size: 1.6666666667vw;
  }

.c40-pillars .c40-pillar_person {
    width: 10.6944444444vw;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_person {
    width: 10.4861111111vw;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_person {
    width: 12.0138888889vw;
  }
}

/* ==========================================================================
   4. @media (max-width: 1200px)
   🔴 750 ブロックより後ろにあるので、SPでもここの値が勝つものがある
   ========================================================================== */
@media screen and (max-width: 1200px) {
.c40-pillars .c40-pillars_lead {
    font-size: 2.3333333333vw;
  }

.c40-pillars .c40-pillars_title span {
    font-size: 4.1666666667vw;
  }

.c40-pillars .c40-pillar_shot {
    width: clamp(20rem, 6.41rem + 28.95vw, 28.125rem);
  }

.c40-pillars .c40-pillar_bubble {
    font-size: 1.8333333333vw;
    top: -5rem;
    left: clamp(5rem, -11.726rem + 35.63vw, 15rem);
  }

.c40-pillars .c40-pillar_body {
    padding: 1.875rem 1.25rem;
    margin-top: clamp(1.875rem, -1.261rem + 6.68vw, 3.75rem);
  }

.c40-pillars .c40-pillar_title {
    font-size: 2.5vw;
  }

.c40-pillars .c40-pillar_text {
    margin-top: 0.625rem;
    font-size: 0.875rem;
  }

.c40-pillars .c40-pillar_text.c40-pillar_text--sm {
    margin-top: 0.625rem;
    font-size: 0.625rem;
  }

.c40-pillars .c40-pillar_text .c40-pillar_em {
    font-size: 1rem;
  }

.c40-pillars .c40-pillar_text + .c40-pillar_text {
    margin-top: 0.625rem;
  }

.c40-pillars .c40-pillar_voice {
    bottom: 1rem;
    right: clamp(7.125rem, 2.943rem + 8.91vw, 9.625rem);
    padding: 0.75rem 1.125rem;
  }

.c40-pillars .c40-pillar_voice::after {
    right: -1rem;
    border-left: 1.375rem solid var(--pil-main);
    border-top: 1.25rem solid transparent;
  }

.c40-pillars .c40-pillar_deco {
    top: -1rem;
    width: 22.6666666667vw;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_bubble {
    right: clamp(12.5rem, -5.062rem + 37.42vw, 23rem);
    top: -1.375rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_voice {
    left: clamp(7.5rem, 2.064rem + 11.58vw, 10.75rem);
    bottom: 2rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_voice::after {
    bottom: 45%;
    left: -1rem;
    border-right: 1.375rem solid var(--pil-main);
    border-top: 1.25rem solid transparent;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_deco {
    top: -1rem;
    width: 14.1666666667vw;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_voice {
    bottom: 1rem;
    right: clamp(7.125rem, 2.943rem + 8.91vw, 9.625rem);
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_deco {
    top: clamp(0.5rem, -2.009rem + 5.35vw, 2rem);
    width: 14.0833333333vw;
  }

.c40-pillars .c40-pillars_arrow {
    width: 22.8333333333vw;
  }
}

/* ==========================================================================
   3. @media (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
.c40-pillars .c40-pillars_sec::before {
    height: clamp(2.5rem, -2.658rem + 10.99vw, 4.375rem);
  }

.c40-pillars .c40-pillars_inner {
    padding: 10rem 1.5625rem 6.25rem;
  }

.c40-pillars .c40-pillar_text {
    font-size: 0.75rem;
  }

.c40-pillars .c40-pillar_text.c40-pillar_text--sm {
    font-size: 0.5625rem;
  }

.c40-pillars .c40-pillar_text .c40-pillar_em {
    font-size: 0.875rem;
  }

.c40-pillars .c40-pillars_card_fig1 {
    width: 9.5703125vw;
  }

.c40-pillars .c40-pillars_card_fig2 {
    width: 11.42578125vw;
  }
}@media screen and (max-width: 750px) {
.c40-pillars .c40-pillars_sp {
    display: inline;
  }

.c40-pillars .c40-pillars_pc {
    display: none;
  }

.c40-pillars .c40-pillars_sec {
    padding: clamp(8.75rem, 5.494rem + 16.28vw, 13.125rem) 0.9375rem 3.75rem;
  }

.c40-pillars .c40-pillars_sec::before {
    height: 1.3125rem;
  }

.c40-pillars .c40-pillars_inner {
    background-color: transparent;
    padding: clamp(3.75rem, 1.89rem + 9.3vw, 6.25rem) 0.25rem clamp(2.5rem, 0.64rem + 9.3vw, 5rem);
  }

.c40-pillars .c40-pillars_lead {
    font-size: 4.2666666667vw;
  }

.c40-pillars .c40-pillars_title span {
    font-size: 6.4vw;
    padding: 0.4375rem 0.875rem;
  }

.c40-pillars .c40-pillar {
    flex-direction: column;
    align-items: center;
  }

.c40-pillars .c40-pillar:nth-child(even) {
    flex-direction: column-reverse;
  }

.c40-pillars .c40-pillar_shot {
    display: none;
  }

.c40-pillars .c40-pillar_shotSp {
    display: block;
    width: 100%;
    filter: drop-shadow(0px 4px 30px rgba(9, 47, 1, 0.2));
    margin-top: clamp(6.875rem, 1.759rem + 25.58vw, 13.75rem);
  }

.c40-pillars .c40-pillar_bubble {
    font-size: 4vw;
    left: 50%;
    top: 0;
    transform: translate(-50%, -95%);
    padding: 0.875rem clamp(0.625rem, 0.248rem + 1.6vw, 1rem);
    box-shadow: 0px 5.52921px 11.0584px rgba(12, 105, 29, 0.1);
  }

.c40-pillars .c40-pillar_bubble::after {
    left: 60%;
  }

.c40-pillars .c40-pillar_body {
    border-radius: 1.875rem;
    padding: clamp(2.625rem, 0.672rem + 9.77vw, 5.25rem) 1.25rem clamp(5.625rem, 1.439rem + 20.93vw, 11.25rem);
  }

.c40-pillars .c40-pillar_title {
    text-align: center;
    font-size: 5.3333333333vw;
  }

.c40-pillars .c40-pillar_text {
    margin-top: 1rem;
    font-size: 4vw;
  }

.c40-pillars .c40-pillar_text.c40-pillar_text--sm {
    font-size: 3.2vw;
  }

.c40-pillars .c40-pillar_text .c40-pillar_em {
    font-size: 4vw;
  }

.c40-pillars .c40-pillar_text + .c40-pillar_text {
    margin-top: 1rem;
  }

.c40-pillars .c40-pillar_voice {
    max-width: 65vw;
    right: unset;
    left: clamp(0.5rem, -2.477rem + 14.88vw, 4.5rem);
    bottom: -2.5rem;
    font-size: 3.4666666667vw;
    padding: 0.59375rem 0.6875rem;
  }

.c40-pillars .c40-pillar_voice::after {
    bottom: 46%;
    border-left: 1.125rem solid transparent;
    border-right: 1.125rem solid transparent;
    border-top: 1.125rem solid var(--pil-main);
  }

.c40-pillars .c40-pillar_person {
    width: 18.1333333333vw;
    bottom: -2.5rem;
    right: 0.5rem;
  }

.c40-pillars .c40-pillar_deco {
    top: 0.25rem;
    width: 40.8vw;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_bubble {
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_bubble::after {
    right: unset;
    left: 60%;
    border-right: unset;
    border-left: 1.875rem solid var(--pil-sand);
    border-bottom: 1.125rem solid transparent;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_body {
    border-radius: 1.875rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_voice {
    right: unset;
    left: clamp(0.5rem, -2.477rem + 14.88vw, 4.5rem);
    bottom: -2.5rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_voice::after {
    bottom: 55%;
    left: unset;
    right: -1rem;
    border-left: 1.125rem solid transparent;
    border-right: 1.125rem solid transparent;
    border-top: 1.125rem solid var(--pil-main);
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_person {
    width: 18.1333333333vw;
    bottom: -2.5rem;
    right: 0.5rem;
    left: unset;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_deco {
    left: unset;
    right: 0.625rem;
    top: 0.25rem;
    width: 25.3333333333vw;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) {
    margin-top: 3.125rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_voice {
    right: unset;
    left: clamp(1.875rem, -6.032rem + 39.53vw, 12.5rem);
    bottom: -0.5rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_voice::after {
    bottom: 52%;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_person {
    width: 21.0666666667vw;
    bottom: -0.5rem;
    right: 0.5rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_deco {
    width: 25.3333333333vw;
  }

.c40-pillars .c40-pillars_arrow {
    width: 24vw;
    transform: translate(-50%, 0);
    bottom: -2.75rem;
  }

.c40-pillars .c40-pillars_card {
    border: 3.5px solid var(--pil-sand);
    box-shadow: 0px 7.5px 0px var(--pil-sand-dark);
  }

.c40-pillars .c40-pillars_card_inner {
    padding: 1.875rem;
  }

.c40-pillars .c40-pillars_card_fig1 {
    width: 9.3333333333vw;
    top: -1.75rem;
    left: 6%;
  }

.c40-pillars .c40-pillars_card_fig2 {
    width: 11.2vw;
    top: -2.5rem;
    right: 5%;
  }

.c40-pillars .c40-pillars_card_head {
    width: 100%;
  }

.c40-pillars .c40-pillars_card_text {
    font-size: 3.4666666667vw;
    text-align: left;
  }
}

/* ==========================================================================
   8. 40キャリア独自の差し替え
   ここから下は「借りてきた見た目」を40キャリアのものに変えている分。
   上のブロックより後ろに置くことで、色とサイズを確実に上書きする。
   ========================================================================== */

/* --- 配色（案A: 深いティール × テラコッタ） ------------------------------
   もとは careerchange の緑。緑のままだと借りてきたことが一目で分かるので、
   同じ役割の色を案Aのパレットに置き換える。 */
.c40-pillars {
  /* 緑の主役（小見出し・ひとことの面）→ 案Aの副色ティール。
     主色 #12574F だと面が重くなるので、明度の近い副色を当てる */
  --pil-main: #2e7c72;
  /* 大見出しの濃緑 → 案Aの主色 */
  --pil-deep: #12574f;
  --pil-paper: #fff;
  --pil-ink: #1c2321;
  /* 黄（結果カードの枠・吹き出し）→ 案Aに黄は無いので砂色に置く。
     テラコッタをそのまま当てると「祝う」ブロックが重くなる */
  --pil-sand: #e8c77e;
  --pil-sand-dark: #c9a55f;
  --pil-pale: #eaf3f0;
  --pil-dark: #0b3b35;
  --pil-accent: #b45f2b;
}

/* リテラルで書いていた色の差し替え */
.c40-pillars .c40-pillars_sec {
  background: linear-gradient(269.9deg, #dfece8 0.06%, #f2f8f5 99.89%);
}

.c40-pillars .c40-pillars_card {
  background: linear-gradient(95.23deg, #fdf6e7 2.86%, #f3e2ba 97.83%);
}

/* 影は黒でなくブランドの暗色、という作法は踏襲。緑の暗色 → ティールの暗色 */
.c40-pillars .c40-pillar_shot {
  filter: drop-shadow(0px 4px 30px rgba(11, 59, 53, 0.2));
}

.c40-pillars .c40-pillar_bubble {
  box-shadow: 0px 10px 20px rgba(18, 87, 79, 0.12);
}

/* --- 飾り文字（「直す！」「選ぶ！」「備える！」） --------------------------
   もとは緑の袋文字の画像。文言を変えるたびに画像を作り直さずに済むよう、
   白フチはコードで作っている。
   paint-order: stroke fill を付けないと、フチが文字の内側に食い込んで太る。
   書体は本文と同じ Noto Sans JP 900（周囲の見出しと揃えるため）。 */
.c40-pillars .c40-pillar_deco {
  width: auto;
  display: grid;
  place-items: center;
}

.c40-pillars .c40-deco {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.7rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--pil-main);
  -webkit-text-stroke: 0.012em var(--pil-main);
  paint-order: stroke fill;
  text-shadow:
    0.045em 0 0 var(--pil-paper), -0.045em 0 0 var(--pil-paper),
    0 0.045em 0 var(--pil-paper), 0 -0.045em 0 var(--pil-paper),
    0.032em 0.032em 0 var(--pil-paper), -0.032em 0.032em 0 var(--pil-paper),
    0.032em -0.032em 0 var(--pil-paper), -0.032em -0.032em 0 var(--pil-paper);
  transform: rotate(-2.5deg);
  transform-origin: center;
}

.c40-pillars .c40-deco_mark {
  display: inline-block;
  margin-left: 0.04em;
  font-size: 1.06em;
  color: var(--pil-accent);
}

/* --- 結果カードの見出し（画像 → 文字） --- */
.c40-pillars .c40-pillars_card_head {
  width: 100%;
  display: grid;
  place-items: center;
}

.c40-pillars .c40-result-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(2.1rem, 0.84rem + 3.34vw, 3.48rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--pil-main);
  -webkit-text-stroke: 0.012em var(--pil-main);
  paint-order: stroke fill;
  text-shadow:
    0.045em 0 0 var(--pil-paper), -0.045em 0 0 var(--pil-paper),
    0 0.045em 0 var(--pil-paper), 0 -0.045em 0 var(--pil-paper),
    0.032em 0.032em 0 var(--pil-paper), -0.032em 0.032em 0 var(--pil-paper),
    0.032em -0.032em 0 var(--pil-paper), -0.032em -0.032em 0 var(--pil-paper);
}

.c40-pillars .c40-result-title_mark {
  display: inline-block;
  margin-left: 0.04em;
  font-size: 1.06em;
  color: var(--pil-accent);
}

/* --- 結果カードの人物をソコストの素材に差し替えたことによる調整 -------------
   元は aspect-ratio 98/172・117/183 の SVG で人物の周囲に余白があった。
   差し替えた素材はトリミングで人物が画像いっぱいまで来ているので、
   同じ幅指定でも大きく見える。幅を縮めて左右へ逃がす。 */
.c40-pillars .c40-pillars_card_fig1 {
  aspect-ratio: 280 / 491;
  width: 4.75rem;
  left: 3.5%;
  top: -1rem;
}

.c40-pillars .c40-pillars_card_fig2 {
  aspect-ratio: 336 / 525;
  width: 5.5rem;
  right: 3%;
  top: -1.25rem;
}

/* --- 結果カードの下の余白 --------------------------------------------------
   「納得の転職へ！」と sec07「今回を、最後の転職活動に。」の間が空きすぎていた。
   ここでは .c40-pillars_sec 側を詰める（sec07 の上余白は c40.css 側）。 */
.c40-pillars .c40-pillars_sec {
  padding-bottom: 48px;
}

@media screen and (max-width: 750px) {
.c40-pillars .c40-pillar_bubble {
    box-shadow: 0px 5.52921px 11.0584px rgba(18, 87, 79, 0.12);
  }

.c40-pillars .c40-deco {
    font-size: 8.9vw;
  }

.c40-pillars .c40-pillars_card_fig1 {
    width: 7.4vw;
    left: 2%;
  }

.c40-pillars .c40-pillars_card_fig2 {
    width: 8.6vw;
    right: 1.5%;
  }

.c40-pillars .c40-pillars_sec {
    padding-bottom: 24px;
  }
}

/* ==========================================================================
   5. @media (max-width: 375px) — 小さい端末だけの微調整
   ========================================================================== */
@media screen and (max-width: 375px) {
.c40-pillars .c40-pillar_bubble {
    padding: 0.75rem 0.625rem;
  }

.c40-pillars .c40-pillar_voice {
    max-width: 60vw;
  }

.c40-pillars .c40-pillars_card_fig1 {
    top: -1rem;
  }

.c40-pillars .c40-pillars_card_fig2 {
    top: -1.5rem;
  }
}

/* ==========================================================================
   7. @media (min-width: 751px) — PCの左右互い違い
   HTMLは「画像 → 本文」の順。row-reverse にすると画像が右に回る。
   奇数枠を反転、偶数枠を素の並びに戻して ①右 ②左 ③右 にする。
   吹き出し・しっぽ・角丸・ひとこと・人物・飾り文字も同じ向きに合わせる。
   ========================================================================== */
@media screen and (min-width: 751px) {
.c40-pillars .c40-pillar:nth-child(odd) {
    flex-direction: row-reverse;
  }

.c40-pillars .c40-pillar:nth-child(even) {
    flex-direction: row;
  }

  .c40-pillars_list .c40-pillar:nth-child(1),
.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) {
    margin-top: 3.75rem;
  }

  .c40-pillars_list .c40-pillar:nth-child(1) .c40-pillar_bubble,
.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_bubble {
    left: auto;
    right: 23rem;
    top: -0.75rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_bubble {
    top: -5.875rem;
    left: 15rem;
    right: revert;
  }

  .c40-pillars_list .c40-pillar:nth-child(1) .c40-pillar_bubble::after,
.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_bubble::after {
    left: auto;
    right: 7.625rem;
    border-left: none;
    border-right: 1.875rem solid var(--pil-sand);
    border-bottom: 1.125rem solid transparent;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_bubble::after {
    left: 5.625rem;
    border-left: 1.875rem solid var(--pil-sand);
    border-bottom: 1.125rem solid transparent;
    right: revert;
    border-right: revert;
  }

  .c40-pillars_list .c40-pillar:nth-child(1) .c40-pillar_body,
.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_body {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 3.125rem;
    border-bottom-left-radius: 3.125rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_body {
    border-top-right-radius: 3.125rem;
    border-bottom-right-radius: 3.125rem;
    border-top-left-radius: revert;
    border-bottom-left-radius: revert;
  }

  .c40-pillars_list .c40-pillar:nth-child(1) .c40-pillar_voice,
.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_voice {
    right: auto;
    left: 12.5rem;
    bottom: 4rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_voice {
    right: 11.125rem;
    bottom: 1.75rem;
    left: revert;
  }

  .c40-pillars_list .c40-pillar:nth-child(1) .c40-pillar_voice::after,
.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_voice::after {
    right: auto;
    bottom: 4rem;
    left: -2rem;
    border-left: none;
    border-right: 2rem solid var(--pil-main);
    border-top: 1.8125rem solid transparent;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_voice::after {
    right: -2rem;
    bottom: 1.625rem;
    border-left: 2rem solid var(--pil-main);
    border-top: 1.8125rem solid transparent;
    left: revert;
    border-right: revert;
  }

  .c40-pillars_list .c40-pillar:nth-child(1) .c40-pillar_person,
.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_person {
    position: absolute;
    left: 1.5rem;
    width: 9.4375rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_person {
    position: absolute;
    width: 9.625rem;
    left: revert;
  }

  .c40-pillars_list .c40-pillar:nth-child(1) .c40-pillar_deco,
.c40-pillars .c40-pillars_list .c40-pillar:nth-child(3) .c40-pillar_deco {
    position: absolute;
    left: 2rem;
    top: 0;
    width: 10.625rem;
  }

.c40-pillars .c40-pillars_list .c40-pillar:nth-child(2) .c40-pillar_deco {
    position: absolute;
    top: 1.5rem;
    width: 17rem;
    left: revert;
  }
}

/* 飾り文字だけ、中間幅でも vw で追従させる（枠の幅に合わせるため） */
@media screen and (min-width: 751px) and (max-width: 1200px) {
.c40-pillars .c40-deco {
    font-size: 2.95vw;
  }
}