/* キャリアの鉄人 TOP・共通パーツ
 * 旧TOPのトンマナを踏襲: 黄 #FABE00 / 黒 #121212 / 白 / 薄グレー #f4f4f4、極太ゴシック(900)、角丸10pxカード＋影、ブレークポイント640px
 */

:root {
    --ct-key: #FABE00;
    --ct-amber: #f0bf42;
    --ct-black: #121212;
    --ct-orange: #D65200;
    --ct-gray: #f4f4f4;
    --ct-shadow: 0 0 20px rgba(0, 0, 0, .25);
    --ct-shadow-sm: 0 3px 6px rgba(0, 0, 0, .16);
}

/* ---------- 共通パーツ ---------- */
.ct-top {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--ct-black);
}

.ct-container {
    box-sizing: border-box;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

.ct-sec {
    padding: 60px 0;
}

.ct-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 900;
    line-height: 1.44;
    letter-spacing: -.01em;
}

.ct-title--center {
    align-items: center;
    text-align: center;
}

.ct-title__kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--ct-orange);
}

.ct-title__text {
    font-size: 28px;
}

.ct-lead {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
}

.ct-lead--center {
    text-align: center;
    text-wrap: balance;
}

.ct-more {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.ct-more--center {
    justify-content: center;
}

.ct-more--right {
    justify-content: flex-end;
}

.ct-btn-black {
    position: relative;
    display: inline-block;
    padding: 16px 56px; /* 左右同じ余白: 文字が、ボタンの中央になる（矢印は右に重ねて置く） */
    border: 2px solid var(--ct-black);
    background: var(--ct-black);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
}

.ct-btn-black::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 8px;
    height: 8px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: translateY(-50%) rotate(-45deg);
}

.ct-btn-black:hover {
    opacity: .7;
}

.ct-btn-black--line {
    background: #fff;
    color: var(--ct-black);
}

.ct-btn-black--line::after {
    border-color: var(--ct-black);
}

.ct-empty {
    padding: 40px 0;
    text-align: center;
}

/* ---------- ヒーロー ---------- */
.ct-hero {
    padding-top: 72px;
    background-image: linear-gradient(34deg, #eca709 40%, #facd5e 98%);
    overflow: hidden;
}

.ct-hero__inner {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 20px 0;
}

.ct-hero__body {
    position: relative;
    z-index: 1;
    padding-bottom: 28px;
}

.ct-hero__eyebrow {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--ct-black);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}

.ct-hero__title {
    margin-top: 18px;
    color: #fff;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -.02em;
}

.ct-hero__title span {
    display: block;
}

.ct-hero__title .ct-hero__title-em {
    display: inline-block;
    margin-top: 8px;
    padding: 0 .3em .05em;
    background: #fff;
    color: var(--ct-black);
    /* 上の2行と同じ書体・太さ。白地に黒は細く見えやすいので、わずかに縁取って太さを揃える */
    font: inherit;
    font-weight: 900;
    -webkit-text-stroke: .025em var(--ct-black);
}

.ct-hero__copy {
    margin-top: 20px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.9;
}

.ct-hero__cta {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.ct-hero-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    color: var(--ct-black);
    text-decoration: none;
}

.ct-hero-btn::after {
    content: "";
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--ct-orange);
}

.ct-hero-btn {
    position: relative;
}

.ct-hero-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 33px;
    z-index: 1;
    width: 8px;
    height: 8px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: translateY(-50%) rotate(-45deg);
}

.ct-hero-btn:hover {
    opacity: .85;
}

.ct-hero-btn__label small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #555;
}

.ct-hero-btn__label strong {
    display: block;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
}

.ct-hero__people {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
}

.ct-hero__note {
    padding: 10px 20px 12px;
    background: rgba(255, 255, 255, .25);
    font-size: 10px;
    text-align: center;
    color: #333;
}

/* ---------- キーワード検索（KV直下） ---------- */
.ct-search {
    background: #fff;
    padding: 40px 0 8px;
}

.ct-search__inner {
    box-sizing: border-box;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.ct-search__kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--ct-orange);
}

.ct-search__title {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -.01em;
}

.ct-search__form {
    position: relative;
    margin-top: 20px;
}

.ct-search__input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 64px;
    padding: 0 76px 0 22px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    color: var(--ct-black);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    -webkit-appearance: none;
    appearance: none;
}

.ct-search__input::placeholder {
    color: #888;
    font-weight: 500;
}

.ct-search__input:focus-visible {
    outline: 3px solid var(--ct-key);
    outline-offset: 2px;
}

.ct-search__submit {
    position: absolute;
    top: 50%;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ct-orange);
    cursor: pointer;
    transform: translateY(-50%);
}

.ct-search__submit:hover {
    opacity: .8;
}

.ct-search__submit:focus-visible {
    outline: 3px solid var(--ct-black);
    outline-offset: 2px;
}

.ct-search__words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.ct-search__word {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--ct-gray);
    color: var(--ct-black);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
}

.ct-search__word:hover {
    background: var(--ct-key);
}

/* ---------- エージェント比較（旧TOPのサービスCTA枠・カード） ---------- */
.ct-agents {
    padding: 40px 0 60px;
}

.ct-agents__frame {
    position: relative;
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.ct-agents__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 28px;
}

.ct-agent-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--ct-shadow);
    color: var(--ct-black);
    text-decoration: none;
}

.ct-agent-card::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 24px;
    width: 8px;
    height: 8px;
    border: solid #000;
    border-width: 0 3px 3px 0;
    transform: rotate(-45deg);
}

.ct-agent-card:hover {
    opacity: .7;
}

.ct-agent-card__thumb {
    position: relative;
    display: block;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    background: var(--ct-key);
}

.ct-agents__item:nth-child(3n+2) .ct-agent-card__thumb {
    background: var(--ct-black);
    color: var(--ct-key);
}

.ct-agents__item:nth-child(3n+3) .ct-agent-card__thumb {
    background: var(--ct-gray);
}

.ct-agent-card__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-agent-card__thumb-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
}

.ct-agent-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 44px 20px 20px;
}

.ct-agent-card__tag {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 3px;
    background: var(--ct-key);
    font-size: 11px;
    font-weight: 800;
}

.ct-agent-card__title {
    font-size: 19px;
    font-weight: 900;
    line-height: 1.5;
}

.ct-agent-card__text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
    color: #333;
}

.ct-agent-card__foot {
    font-size: 11px;
    font-weight: 700;
    color: #777;
}

/* ---------- 悩みから探す（旧TOPのタブ帯） ---------- */
.ct-needs {
    background: var(--ct-gray);
}

.ct-tabs {
    display: flex;
    margin: 0;
    padding: 0;
    border-bottom: 6px solid var(--ct-amber);
}

.ct-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 50%;
    height: 75px;
    padding: 0 8px;
    background: #000;
    color: #fff;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.ct-tab[aria-selected="true"] {
    background: var(--ct-amber);
    color: var(--ct-black);
}

.ct-tab__label {
    font-size: 15px;
    font-weight: 800;
}

.ct-tab__sub {
    display: none;
    font-size: 11px;
    font-weight: 500;
}

.ct-tabpanel[hidden] {
    display: none;
}

.ct-needs__inner {
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 60px;
}

.ct-needs__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
}

.ct-need-link {
    position: relative;
    display: block;
    padding: 18px 44px 18px 22px;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--ct-shadow-sm);
    color: var(--ct-black);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.ct-need-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    border: solid #000;
    border-width: 0 3px 3px 0;
    transform: translateY(-50%) rotate(-45deg);
}

.ct-need-link:hover {
    background: var(--ct-key);
}

/* ---------- お役立ち記事 ---------- */
.ct-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.ct-filter {
    padding: 10px 22px;
    border: 2px solid var(--ct-black);
    border-radius: 4px;
    background: #fff;
    color: var(--ct-black);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.ct-filter[aria-pressed="true"] {
    background: var(--ct-key);
    border-color: var(--ct-key);
}

.ct-tips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 30px;
}

.ct-tip {
    display: block;
    background: #fff;
    box-shadow: var(--ct-shadow-sm);
    color: var(--ct-black);
    text-decoration: none;
}

.ct-tip[hidden] {
    display: none;
}

.ct-tip:hover {
    opacity: .8;
}

.ct-tip__thumb {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    background: var(--ct-key);
}

.ct-tip:nth-child(3n+2) .ct-tip__thumb {
    background: var(--ct-black);
    color: var(--ct-key);
}

.ct-tip:nth-child(3n+3) .ct-tip__thumb {
    background: var(--ct-gray);
}

.ct-tip__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-tip__thumb-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
}

.ct-tip__body {
    padding: 16px 22px 20px;
}

.ct-tip__tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--ct-gray);
    font-size: 11px;
    font-weight: 800;
}

.ct-tip__title {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
}

/* ---------- 動画で学ぶ（黒い帯） ---------- */
.ct-videos {
    padding: 60px 0;
    background: var(--ct-black);
    color: #fff;
}

.ct-title--light {
    color: #fff;
}

.ct-title--light .ct-title__kicker {
    color: var(--ct-key);
}

.ct-lead--light {
    color: #ddd;
}

.ct-btn-black--on-dark {
    border-color: #fff;
    background: #fff;
    color: var(--ct-black);
}

.ct-btn-black--on-dark::after {
    border-color: var(--ct-black);
}

/* ---------- 企業情報検索（業種で絞り込み） ---------- */
.ct-company {
    background: var(--ct-gray);
}

.ct-industry {
    margin-top: 30px;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--ct-shadow-sm);
}

.ct-industry__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 52px 18px 20px;
    position: relative;
    font-size: 15px;
    font-weight: 900;
    list-style: none;
    cursor: pointer;
}

.ct-industry__summary::-webkit-details-marker {
    display: none;
}

.ct-industry__summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 9px;
    height: 9px;
    border: solid var(--ct-black);
    border-width: 0 3px 3px 0;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s;
}

.ct-industry[open] .ct-industry__summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

.ct-industry__summary:focus-visible {
    outline: 3px solid var(--ct-key);
    outline-offset: -3px;
    border-radius: 10px;
}

.ct-industry__badge {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ct-key);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.5;
    text-align: center;
}

.ct-industry__badge[hidden] {
    display: none;
}

.ct-industry__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 4px 20px 24px;
}

.ct-industry__label {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.5;
}

.ct-industry__label::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 14px;
    margin-right: 8px;
    background: var(--ct-key);
    vertical-align: -2px;
}

.ct-industry__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ct-chip-btn {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid var(--ct-black);
    border-radius: 4px;
    background: #fff;
    color: var(--ct-black);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

.ct-chip-btn:hover {
    opacity: .7;
}

.ct-chip-btn.is-active {
    border-color: var(--ct-key);
    background: var(--ct-key);
}

.ct-industry__clear {
    grid-column: 1 / -1;
    text-align: right;
}

.ct-industry__clear-btn {
    display: inline-block;
    color: #555;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
}

.ct-industry__clear-btn[hidden] {
    display: none;
}

.ct-company__status {
    margin-top: 30px;
    font-size: 14px;
    font-weight: 800;
}

.ct-company__list {
    margin-top: 14px;
}

.ct-company__list.is-loading {
    opacity: .4;
}

/* ---------- 特集（旧TOPの黄色い帯） ---------- */
.ct-topics {
    padding: 60px 0;
    background: var(--ct-key);
}

.ct-topics__title {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.5;
}

.ct-topics__title-text {
    position: relative;
    display: inline-block;
    padding: 0 40px;
}

.ct-topics__title-text::before,
.ct-topics__title-text::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 4px;
    height: 42px;
    background: var(--ct-black);
}

.ct-topics__title-text::before {
    left: 6px;
    transform: translateY(-50%) rotate(-24deg);
}

.ct-topics__title-text::after {
    right: 6px;
    transform: translateY(-50%) rotate(24deg);
}

.ct-topics__lead {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.ct-topics__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
}

.ct-topic {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 44px 24px 24px;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--ct-shadow);
    color: var(--ct-black);
    text-decoration: none;
}

.ct-topic::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border: solid #000;
    border-width: 0 3px 3px 0;
    transform: translateY(-50%) rotate(-45deg);
}

.ct-topic:hover {
    opacity: .8;
}

.ct-topic__visual {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--ct-black);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
}

.ct-topic__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-topic__tag {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 3px;
    background: var(--ct-key);
    font-size: 11px;
    font-weight: 800;
}

.ct-topic__title {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.5;
}

.ct-topic__text {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
    color: #444;
}

/* ---------- キャリ鉄について ---------- */
.ct-about {
    padding: 60px 0 70px;
}

.ct-about__title {
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -.01em;
}

.ct-about__lead {
    margin-top: 18px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
}

.ct-about__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 40px;
}

.ct-about__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ct-about__icon {
    display: block;
    width: 120px;
    height: 120px;
}

.ct-about__text {
    max-width: 17em;
    text-wrap: balance;
    text-align: center;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.6;
}

/* ---------- PC ---------- */
@media screen and (min-width: 640px) {
    .ct-container {
        padding: 0 40px;
    }

    .ct-sec {
        padding: 100px 0;
    }

    .ct-title__kicker {
        font-size: 13px;
    }

    .ct-title__text {
        font-size: 40px;
    }

    .ct-lead {
        font-size: 16px;
    }

    .ct-btn-black {
        font-size: 16px;
        padding-left: 64px;
        padding-right: 64px;
    }

    .ct-hero__inner {
        grid-template-columns: 1.05fr 1fr;
        padding: 40px 40px 0;
        /* 人物（高さ≒幅×0.69）の頭が上で切れないよう、画像の高さ＋余白を確保 */
        min-height: max(620px, calc(min(64vw, 1020px) * .692 + 48px));
    }

    .ct-hero__body {
        align-self: center;
        padding-bottom: 64px;
    }

    .ct-hero__eyebrow {
        font-size: 14px;
    }

    .ct-hero__title {
        font-size: clamp(28px, 4.6vw, 64px); /* 下限を下げる: 768px前後（iPad mini）の2列で、「自分に合う一歩を。」が折り返さないように */
    }

    .ct-hero__copy {
        font-size: 15px;
    }

    .ct-hero__cta {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        max-width: 680px;
        margin-top: 30px;
    }

    .ct-hero-btn {
        padding: 14px 20px;
    }

    .ct-hero-btn__label strong {
        font-size: 18px;
    }

    /* 人物は右下に大きく（従来の約1.5倍）。ヒーローの overflow:hidden で右下を切る */
    .ct-hero__inner {
        position: relative;
    }

    .ct-hero__people {
        position: absolute;
        right: -6vw;
        bottom: 0;
        width: 68vw;
        max-width: 1040px;
        margin: 0;
    }

    .ct-hero__note {
        font-size: 11px;
    }

    .ct-search {
        padding: 56px 0 16px;
    }

    .ct-search__title {
        font-size: 28px;
    }

    .ct-search__word {
        font-size: 14px;
        padding: 8px 18px;
    }

    .ct-agents {
        padding: 90px 0 100px;
    }

    .ct-agents__frame {
        padding: 50px 40px 56px;
        border: 4px solid #ddd;
        border-radius: 10px;
    }

    .ct-agents__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-top: 36px;
    }

    .ct-agent-card__body {
        padding: 22px 48px 26px 24px;
    }

    .ct-agent-card::after {
        right: 24px;
        bottom: 30px;
    }

    .ct-agent-card__title {
        font-size: 19px;
    }

    .ct-tab {
        flex-direction: row;
        gap: 14px;
        height: 85px;
    }

    .ct-tab__label {
        font-size: 21px;
    }

    .ct-tab__sub {
        display: inline;
        font-size: 13px;
    }

    .ct-needs__inner {
        padding: 90px 40px 100px;
    }

    .ct-needs__list {
        grid-template-columns: 1fr 1fr;
        gap: 18px 30px;
        margin-top: 40px;
    }

    .ct-need-link {
        padding: 22px 48px 22px 28px;
        font-size: 17px;
    }

    .ct-tips {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 40px;
    }

    .ct-tip__thumb-text {
        font-size: 26px;
    }

    .ct-tip__title {
        font-size: 17px;
    }

    .ct-videos {
        padding: 100px 0 110px;
    }

    .ct-industry {
        margin-top: 40px;
    }

    .ct-industry__summary {
        padding: 22px 64px 22px 40px;
        font-size: 17px;
    }

    .ct-industry__body {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 40px;
        padding: 8px 40px 32px;
    }

    .ct-industry__label {
        font-size: 15px;
    }

    .ct-chip-btn {
        font-size: 14px;
    }

    .ct-topics {
        padding: 100px 0 110px;
    }

    .ct-topics__title {
        font-size: 45px;
    }

    .ct-topics__title-text {
        padding: 0 70px;
    }

    .ct-topics__title-text::before,
    .ct-topics__title-text::after {
        height: 64px;
    }

    .ct-topics__lead {
        font-size: 16px;
    }

    .ct-topics__list {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-top: 44px;
    }

    .ct-topic {
        gap: 28px;
        padding: 32px 52px 32px 32px;
    }

    .ct-topic__visual {
        width: 112px;
        height: 112px;
        font-size: 24px;
    }

    .ct-topic__title {
        font-size: 22px;
    }

    .ct-topic__text {
        font-size: 13px;
    }

    .ct-about {
        padding: 120px 0 130px;
    }

    .ct-about__title {
        font-size: 56px;
    }

    .ct-about__lead {
        font-size: 16px;
    }

    .ct-about__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 56px;
    }

    .ct-about__icon {
        width: 170px;
        height: 170px;
    }

    .ct-about__text {
        font-size: 20px;
    }
}

/* ---------- 動画記事（再生バッジ） ---------- */
.ct-play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .75);
}

.ct-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent var(--ct-key);
    transform: translate(-50%, -50%);
}

/* ---------- スマホ: 記事・企業情報は横長リスト、動画は横スライダー（縦に長くなりすぎないように） ---------- */
@media screen and (max-width: 639px) {
    /* お役立ち記事・企業情報検索の結果: 左にサムネ、右にタグとタイトル */
    .ct-guide .ct-tips,
    .ct-company__list {
        gap: 10px;
        margin-top: 22px;
    }

    .ct-guide .ct-tip,
    .ct-company__list .ct-tip {
        display: grid;
        grid-template-columns: 124px 1fr;
        gap: 12px;
        align-items: start;
        padding: 10px;
        border-radius: 6px;
    }

    .ct-guide .ct-tip[hidden],
    .ct-company__list .ct-tip[hidden] {
        display: none;
    }

    .ct-guide .ct-tip__thumb,
    .ct-company__list .ct-tip__thumb {
        border-radius: 4px;
    }

    .ct-guide .ct-tip__thumb-text,
    .ct-company__list .ct-tip__thumb-text {
        padding: 0 6px;
        font-size: 12px;
    }

    .ct-guide .ct-tip .ct-play,
    .ct-company__list .ct-tip .ct-play {
        right: 5px;
        bottom: 5px;
        width: 24px;
        height: 24px;
    }

    .ct-guide .ct-tip .ct-play::after,
    .ct-company__list .ct-tip .ct-play::after {
        border-width: 5px 0 5px 8px;
    }

    .ct-guide .ct-tip__body,
    .ct-company__list .ct-tip__body {
        padding: 0;
    }

    .ct-guide .ct-tip__tag,
    .ct-company__list .ct-tip__tag {
        font-size: 10px;
    }

    .ct-guide .ct-tip__title,
    .ct-company__list .ct-tip__title {
        display: -webkit-box;
        margin-top: 5px;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.55;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    /* 動画: 横にスワイプ（次のカードが少し見える） */
    .ct-videos .ct-tips {
        display: flex;
        gap: 12px;
        margin: 26px -20px 0;
        padding: 0 20px 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        -webkit-overflow-scrolling: touch;
    }

    .ct-videos .ct-tip {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }

    .ct-videos .ct-tip__title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 14px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .ct-videos .ct-tips::-webkit-scrollbar {
        height: 4px;
    }

    .ct-videos .ct-tips::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background: #555;
    }

    /* 記事カテゴリの絞り込みボタンを1行に収める */
    .ct-filters {
        gap: 6px;
    }

    .ct-filter {
        padding: 9px 12px;
        font-size: 12px;
    }
}

/* ---------- タブレット（640〜999px・iPad mini 768px など）: PC用の余白・文字サイズが窮屈にならないよう調整 ---------- */
@media screen and (min-width: 640px) and (max-width: 999px) {
    .ct-agents__frame {
        padding: 40px 28px 44px;
    }

    .ct-agents__list,
    .ct-tips {
        gap: 20px;
    }

    .ct-agent-card__body {
        padding: 18px 20px 22px;
    }

    .ct-agent-card__title {
        font-size: 17px;
    }

    .ct-agent-card::after {
        right: 18px;
        bottom: 24px;
    }

    .ct-tab {
        gap: 4px;
        flex-direction: column;
        justify-content: center;
        height: 72px;
    }

    .ct-tab__label {
        font-size: 19px;
    }

    .ct-tab__sub {
        font-size: 12px;
    }

    .ct-tip__title {
        font-size: 15px;
    }

    /* 特集カードは1列にして、画像の円とテキストをゆったり並べる */
    .ct-topics__list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ct-topic {
        padding: 28px 56px 28px 32px;
    }

    .ct-industry__summary,
    .ct-industry__body {
        padding-left: 28px;
        padding-right: 28px;
    }
}

/* 文節ごとにまとめ、スマホで途中の変な位置で折り返さないようにする */
.ct-nb {
    display: inline-block;
}

/* 大きい画面: 人物をさらに右に寄せ、見出しに重ならないようにする */
@media screen and (min-width: 1500px) {
    .ct-hero__people {
        right: -300px;
        max-width: 960px;
    }
}

/* ---------- お役立ち記事: 子カテゴリの絞り込み ---------- */
.ct-subfilters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.ct-subfilters[hidden] {
    display: none;
}

.ct-subfilter {
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ct-gray);
    color: var(--ct-black);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.ct-subfilter[aria-pressed="true"] {
    background: var(--ct-black);
    color: #fff;
}

@media screen and (max-width: 639px) {
    /* スマホは1行の横スクロールにして縦に伸ばさない */
    .ct-subfilters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-right: -20px;
        margin-left: -20px;
        padding: 0 20px 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ct-subfilter {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ---------- 企業情報検索: フリーワード ---------- */
.ct-company__search {
    max-width: 760px;
    margin: 26px auto 0;
}

.ct-company__search .ct-search__input {
    height: 56px;
    font-size: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .14);
}

/* 動画で学ぶ: 絞り込みで非表示にしたカード（display指定に負けないように） */
.ct-videos .ct-tip[hidden] {
    display: none;
}

/* ホワイト企業特集 */
.ct-white{background:var(--ct-key);padding:60px 0}
.ct-white__inner{box-sizing:border-box;max-width:1000px;margin:0 auto;padding:0 20px}
.ct-white__lead{margin:12px 0 28px;font-size:14px;font-weight:700;line-height:1.8;text-align:center}
.ct-white__lead b{background:linear-gradient(transparent 60%,#fff 60%)}
.ct-white__cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ct-white__cat{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:14px 14px;border-radius:10px;background:#fff;box-shadow:var(--ct-shadow-sm);color:var(--ct-black);text-decoration:none;border:2px solid transparent}
.ct-white__cat:hover{border-color:var(--ct-black);background:var(--ct-key)}
.ct-white__cat strong{font-size:15px;font-weight:900}
.ct-white__cat small{flex:none;padding:2px 8px;border-radius:999px;background:var(--ct-black);color:var(--ct-key);font-size:12px;font-weight:800}
.ct-br-sp{display:inline}
@media screen and (min-width:640px){.ct-br-sp{display:none}.ct-white{padding:100px 0}.ct-white__lead{margin-bottom:40px}.ct-white__inner{padding:0 40px}.ct-white__cats{grid-template-columns:repeat(4,1fr)}.ct-white__lead{font-size:16px}}

/* 鉄人診断バナー・いまの悩みのバッジ */
.ct-shindan{background:#fff;padding:24px 0 48px}
.ct-shindan__inner{box-sizing:border-box;max-width:1000px;margin:0 auto;padding:0 20px}
.ct-shindan__card{position:relative;display:grid;grid-template-areas:"body" "types" "btn";gap:20px;overflow:hidden;padding:28px 20px 24px;border-radius:10px;background-image:linear-gradient(34deg,#eca709 40%,#facd5e 98%);box-shadow:var(--ct-shadow);color:var(--ct-black);text-decoration:none}
.ct-shindan__card::after{content:"鉄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:240px;font-weight:900;line-height:1;color:rgba(255,255,255,.22);pointer-events:none}
.ct-shindan__body{grid-area:body;position:relative;z-index:1}
.ct-shindan__eyebrow{display:inline-block;padding:6px 16px;border-radius:999px;background:var(--ct-black);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em}
.ct-shindan__title{margin-top:14px;color:#fff;font-size:26px;font-weight:900;line-height:1.4;letter-spacing:-.02em}
.ct-shindan__title span{display:block}
.ct-shindan__title .ct-shindan__title-em{display:inline-block;margin-top:6px;padding:0 .3em .05em;background:#fff;color:var(--ct-black);-webkit-text-stroke:.025em var(--ct-black)}
.ct-shindan__copy{margin-top:14px;font-size:13px;font-weight:700;line-height:1.9}
.ct-shindan__types{grid-area:types;position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0;padding:0;list-style:none}
.ct-shindan__types li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 2px 8px;border-radius:10px;background:#fff;box-shadow:var(--ct-shadow-sm);text-align:center;line-height:1.35}
.ct-shindan__types svg{width:22px;height:22px;margin-bottom:4px;fill:none;stroke:var(--ct-black);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-shindan__types strong{display:none;font-size:12px;font-weight:900}
.ct-shindan__types small{display:none;margin-top:3px;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:800;color:#fff;background:#777}
.ct-shindan__types em{display:inline-block;padding:1px 6px;border-radius:999px;font-size:10.5px;font-weight:800;font-style:normal;color:#fff;background:#777}
.ct-shindan__types .is-l{background:#F76707}.ct-shindan__types .is-s{background:#2F9E44}.ct-shindan__types .is-k{background:#1C7ED6}.ct-shindan__types .is-i{background:#AE3EC9}.ct-shindan__types .is-a{background:#0C8599}.ct-shindan__types .is-c{background:#E03131}
.ct-shindan__btn{grid-area:btn;z-index:1}
.ct-shindan__card:hover .ct-shindan__btn{opacity:.85}
@media screen and (min-width:640px){
.ct-shindan{padding:32px 0 64px}
.ct-shindan__inner{padding:0 40px}
.ct-shindan__card{grid-template-columns:1fr 380px;grid-template-areas:"body types" "btn types";column-gap:48px;row-gap:24px;align-items:center;padding:40px 48px}
.ct-shindan__card::after{font-size:300px}
.ct-shindan__eyebrow{font-size:14px}
.ct-shindan__title{font-size:36px}
.ct-shindan__copy{font-size:15px}
.ct-shindan__btn{max-width:340px}
.ct-shindan__types{grid-template-columns:repeat(3,1fr);gap:8px}
.ct-shindan__types li{padding:16px 6px 12px}
.ct-shindan__types svg{width:26px;height:26px}
.ct-shindan__types strong{display:block}
.ct-shindan__types small{display:inline-block}
.ct-shindan__types em{display:none}
.ct-shindan__types strong{font-size:14px}
.ct-shindan__types small{font-size:11px}
}
.ct-need-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--ct-black);color:var(--ct-key);font-size:11px;font-weight:800;vertical-align:2px}

/* 近日公開のカード（リンクなし） */
.ct-agent-card.is-soon {
    cursor: default;
}

.ct-agent-card.is-soon::after {
    display: none;
}

.ct-agent-card.is-soon:hover {
    transform: none;
    box-shadow: var(--ct-shadow);
}

.ct-agent-card.is-soon .ct-agent-card__thumb {
    opacity: 0.55;
}

.ct-agent-card.is-soon .ct-agent-card__foot {
    align-self: flex-start;
    padding: 3px 12px;
    border-radius: 999px;
    background: #000;
    color: var(--ct-key);
    font-size: 12px;
    font-weight: 800;
}

/* 近日公開（リンクなし）: 悩み別の入口 */
.ct-need-link.is-soon {
    cursor: default;
}

.ct-need-link.is-soon::after {
    display: none;
}

.ct-need-link.is-soon:hover {
    background: #fff;
}

/* TOPの「鉄人先生に相談する」バナー（プラグイン側の出力）: PCで、隣の診断カードと同じ幅（920px）にそろえる */
@media screen and (min-width: 640px) {
    .ct-sensei-bn .ct-sensei-bn__card {
        box-sizing: border-box;
        max-width: 920px;
    }
}

/* TOPの幅をそろえる（PC）: 記事・動画・企業情報・キャリ鉄についてなどの「内容の幅」は 1080px。
 * エージェントのセクションは、PCだけ付いていた灰色の枠線をやめて、他のセクションと同じ作り（内容1080px）に。
 * バナー・診断カード・ツール（920px）は、カード型の部品なので、そのまま */
@media screen and (min-width: 1024px) {
    .ct-agents__frame { box-sizing: border-box; width: 100%; max-width: 1160px; padding: 0 40px; border: 0; border-radius: 0; }
    .ct-needs__inner { max-width: 1160px; }
    .ct-white__inner { max-width: 1160px; }
}

/* タブレット（iPad mini など）では、お役立ち記事・動画・企業情報の一覧を3列から2列にする */
@media screen and (min-width: 640px) and (max-width: 1023px) {
    .ct-guide .ct-tips,
    .ct-tips[data-video-list],
    .ct-tips.ct-company__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* タブレット（iPad mini など）では、キャリ鉄オリジナル診断のカード（15問・24問）を、PCの2列（文章｜タイプ一覧）ではなく、縦に並べる（右が切れるのを防ぐ） */
@media screen and (min-width: 640px) and (max-width: 1023px) {
    .ct-shindan__card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "body" "types" "btn";
        row-gap: 24px;
        padding: 36px 40px;
    }

    .ct-shindan__types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ct-shindan__btn {
        max-width: 340px;
    }

    .ct-tekishoku .ct-tekishoku__card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "body" "types" "btn";
        row-gap: 24px;
        padding: 36px 40px;
    }

    .ct-tekishoku .ct-tekishoku__types {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* タブレット（iPad mini など）のKV: 人物を大きく右へ寄せる */
@media screen and (min-width: 640px) and (max-width: 1023px) {
    .ct-hero__people {
        position: absolute;
        right: -42vw;
        bottom: 0;
        width: 108vw;
        max-width: 1040px;
        margin: 0;
    }
}

/* Surface Pro（幅912px前後）など、タブレットでも広めの画面のKV */
@media screen and (min-width: 840px) and (max-width: 1023px) {
    .ct-hero__people {
        right: -32vw;
        width: 88vw;
    }
}

/* TOPの「近日公開」のカード（新卒向け）: プラグインは、スマホ用に小さな横並びにしている。2列になるタブレット幅（640〜999px）では、隣の20代向けカードと同じ縦型のカードにそろえる */
@media screen and (min-width: 640px) and (max-width: 999px) {
    #agents .ct-agents__list .ct-agents__item--soon .ct-agent-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border: 0;
        background: #fff;
        box-shadow: var(--ct-shadow);
    }

    #agents .ct-agents__list .ct-agents__item--soon .ct-agent-card__thumb {
        flex: none;
        height: 0;
        padding-top: 56.25%;
        border-radius: 0;
    }

    #agents .ct-agents__list .ct-agents__item--soon .ct-agent-card__body {
        padding: 16px 16px 18px;
        gap: 8px;
    }

    #agents .ct-agents__list .ct-agents__item--soon .ct-agent-card__title {
        font-size: 20px;
        line-height: 1.5;
    }

    #agents .ct-agents__list .ct-agents__item--soon .ct-agent-card__text {
        display: block;
    }

    #agents .ct-agents__list .ct-agents__item--soon .ct-agent-card__tag {
        font-size: 11px;
    }
}

/* TOPの「自分に合うエージェントを探す」: カードにマウスを乗せると、カードごと少し浮き、影が濃くなる（リンクのカードだけ。「近日公開」には付けない）。
   中のボタンは動かさない（プラグイン ct-shindan-top の「ホバーで2px沈む」を打ち消す。2026-10-14） */
#agents .ct-agents__list a.ct-agent-card {
    transition: transform .25s ease, box-shadow .25s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    #agents .ct-agents__list a.ct-agent-card:hover {
        opacity: 1;
        transform: translateY(-6px);
        box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
    }
}

#agents .ct-agents__list a.ct-agent-card:hover .ct-agent-card__cta {
    transform: none;
    box-shadow: 0 3px 0 #121212;
}

/* TOPの「自分に合うエージェントを探す」: カードが2つ並んだとき、説明文の行数が違っても、ボタンの位置（カードの下端）をそろえる */
#agents .ct-agents__list a.ct-agent-card .ct-agent-card__body {
    flex: 1 1 auto;
}

#agents .ct-agents__list a.ct-agent-card .ct-agent-card__cta {
    margin-top: auto;
}

/* 「もっと見る」「〇〇一覧」などの黒いボタン（.ct-more の中）: 文字の長さに関係なく、大きさをそろえる（PCは幅340px、スマホは画面の幅いっぱい・最大340px。文字は中央） */
.ct-more .ct-btn-black {
    box-sizing: border-box;
    width: 340px;
    max-width: 100%;
    text-align: center;
}

@media screen and (max-width: 639px) {
    .ct-more .ct-btn-black {
        width: 100%;
        max-width: 340px;
    }

    .ct-more--center,
    .ct-more--right {
        flex-direction: column;
        align-items: center;
    }
}

/* TOPの「鉄人先生に相談する」バナー（プラグイン側の出力）: バナーの下（次の「いまの悩みから探す」のタブとの間）を、「自分に合うエージェントを探す」（.ct-agents）の上の余白と同じにする（PC・タブレット90px／スマホ40px）。上は、もとのまま */
.ct-body .ct-sensei-bn {
    padding-bottom: 90px;
}

@media screen and (max-width: 639px) {
    .ct-body .ct-sensei-bn {
        padding-bottom: 40px;
    }
}

/* 動画カード: TikTokのバッジ（サムネの左下）。縦長のサムネは、16:9の枠の中央でトリミングされる */
.ct-card__thumb .ct-vkind,
.ct-tip__thumb .ct-vkind {
    position: absolute; left: 8px; bottom: 8px; z-index: 2;
    padding: 3px 9px; border-radius: 999px; background: #121212; color: #fff;
    font-size: 11px; font-weight: 800; line-height: 1.4;
}

/* 白いボタン（暗い背景の上の「動画一覧」／枠だけの「編集方針・比較基準」）。サイト全体の色を青にするプラグイン（ct-blue）が、これらも青い面にしてしまい、文字が暗い色のまま読みにくくなっていたので、白い面に戻す。
   青いテーマのときも、白い面・濃い文字・青い矢印（ct-blue の青 #1B7FBE）にそろえる */
.ct-btn-black.ct-btn-black--on-dark,
.ct-btn-black.ct-btn-black--line {
    border-color: #fff;
    background: #fff;
    color: #333;
}
.ct-btn-black.ct-btn-black--line { border-color: #1B7FBE; }
.ct-btn-black.ct-btn-black--on-dark::after,
.ct-btn-black.ct-btn-black--line::after { border-color: #1B7FBE; }

/* 青いテーマ（ct-blue）のときに、オレンジのまま残っていた3つのボタンを、青にそろえる。
   TOPの上の2つのボタンの矢印の丸（.ct-hero-btn::after）、検索ボタン（.ct-search__submit）、「無料で相談をはじめる」（.ct-sb2__btn）。
   青は ct-blue の #1B7FBE。「無料で相談をはじめる」の下の影は、同じ青の濃い色（#0F4F78） */
html.ct-blue .ct-hero-btn::after { background-color: #1B7FBE; }
html.ct-blue .ct-search__submit { background: #1B7FBE; }
html.ct-blue .ct-sb2__btn { background: #1B7FBE; box-shadow: 0 4px 0 #0F4F78; }
html.ct-blue .ct-sb2__btn:hover { background: #166AA0; }