/* #62 特集ページ（吉田さん納品 style.css 2026-10-13 をサイト内に組み込んだもの）
   共通 style.css より先に読み込まれるため、全セレクタを .feature-lp 配下に置いて詳細度で勝つ。
   .main が max-width 720px のため、KV・帯・カテゴリ・注意事項は 100vw に広げて全幅にしている（scratch.css と同じ方式）。
   配色クラス（<色>_maincolor / _strong / _light）は末尾にまとめてある */

:root:has(.feature-lp) {
    scroll-behavior: smooth;
}

.feature-lp {
    color: #383938;
}

.feature-lp a {
    color: inherit;
    text-decoration: none;
}

.feature-lp img {
    display: block;
    max-width: 100%;
}

.feature-lp .kv,
.feature-lp .category-nav,
.feature-lp .category,
.feature-lp .notes {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* KV */
.feature-lp .kv {
    background: #f1f1f1;
}

.feature-lp .kv_inner {
    width: 1200px;
    max-width: 100%;
    height: 150px;
    margin: 0 auto;
}

.feature-lp .kv_inner picture {
    display: block;
}

.feature-lp .kv_image {
    width: 100vw;
    max-width: 1200px;
    height: 150px;
    object-fit: cover;
}

/* 帯（テンプレ01）・カテゴリメニュー（テンプレ02） */
.feature-lp .category-nav {
    background: #FF4447;
}

.feature-lp .category-nav_inner {
    max-width: 1200px;
    margin: 0 auto;
}

.feature-lp .category-nav_inner > p {
    margin: 0;
    padding: 10px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.feature-lp nav.category-nav .category-nav_inner {
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.feature-lp .category-nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc(100% / 6);
    min-width: 0;
    min-height: 50px;
    padding: 8px 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

.feature-lp .category-nav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 20px;
    margin-top: -10px;
    background: rgba(255, 255, 255, .5);
}

.feature-lp .category-nav a:nth-child(6n + 1)::before {
    display: none;
}

/* カテゴリ */
.feature-lp .category {
    scroll-margin-top: 110px;
}

@media screen and (max-width: 1200px) {
    .feature-lp .category {
        scroll-margin-top: 64px;
    }
}

.feature-lp .category_inner {
    width: 1190px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
}

.feature-lp .category_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
    color: #383938;
}

.feature-lp .category_title span {
    display: inline-block;
    width: 6px;
    height: 22px;
    background: #FF4447;
    flex: 0 0 auto;
}

.feature-lp .bonus-challenge {
    display: block;
    max-width: 600px;
    margin: 0 auto 30px;
    padding: 10px;
    background: #FF4447;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* 案件カード（テンプレ01 縦並び） */
.feature-lp .category_inner > .campaign-card {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.feature-lp .category_inner > .campaign-card + .campaign-card {
    margin-top: 20px;
}

.feature-lp .category_inner > .campaign-card .campaign-card__image {
    flex: 0 0 160px;
}

.feature-lp .category_inner > .campaign-card .campaign-card__image img {
    width: 100%;
    height: auto;
}

.feature-lp .category_inner > .campaign-card .campaign-card__info {
    flex: 1;
    min-width: 0;
}

.feature-lp .category_inner > .campaign-card .campaign-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    overflow: hidden;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    overflow-wrap: anywhere;
}

.feature-lp .category_inner > .campaign-card .campaign-card__condition {
    margin: 8px 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.5;
    color: #848484;
}

.feature-lp .category_inner > .campaign-card .campaign-card__point {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: baseline;
    color: #FF4447;
    white-space: nowrap;
}

.feature-lp .category_inner > .campaign-card .campaign-card__point strong,
.feature-lp .category_inner > .campaign-card .campaign-card__point span {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

/* 案件カード（テンプレ02 カテゴリ別。PC 横6・SP 横3） */
.feature-lp .campaign-list {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.feature-lp .campaign-list .campaign-card {
    width: 154px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: transform .15s ease, box-shadow .15s ease;
}

.feature-lp .campaign-list .campaign-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}

.feature-lp .campaign-list .campaign-card img {
    width: 130px;
    height: 130px;
    margin: 12px auto 0;
    object-fit: cover;
    background: #eee;
}

.feature-lp .campaign-list .campaign-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 12px 12px 0;
    min-height: 34px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    word-break: break-all;
}

.feature-lp .campaign-list .campaign-card small {
    display: block;
    margin: 6px 12px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: #848484;
}

.feature-lp .campaign-list .campaign-card .campaign-card__point {
    margin: auto 12px 12px;
    padding-top: 12px;
    color: #FF4447;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

/* 注意事項 */
.feature-lp .notes {
    background: #f0f0f0;
}

.feature-lp .notes_inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
}

.feature-lp .notes h2 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    color: #383938;
}

.feature-lp .notes p {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 3;
    text-align: center;
    color: #383938;
}

@media (max-width: 767px) {
    .feature-lp .kv_inner,
    .feature-lp .kv_image {
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 200;
    }

    .feature-lp .category-nav a {
        flex-basis: calc(100% / 3);
        min-height: 44px;
        font-size: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .45);
    }

    .feature-lp .category-nav a:nth-child(3n + 1)::before {
        display: none;
    }

    .feature-lp .category-nav a::before {
        height: 24px;
        margin-top: -12px;
    }

    .feature-lp .category_inner {
        width: 100%;
        padding: 20px;
    }

    .feature-lp .category_title {
        gap: 7px;
        font-size: 20px;
    }

    .feature-lp .category_title span {
        width: 5px;
        height: 20px;
    }

    .feature-lp .bonus-challenge {
        margin-bottom: 20px;
    }

    .feature-lp .category_inner > .campaign-card {
        gap: 15px;
        min-height: 180px;
        padding: 20px;
    }

    .feature-lp .category_inner > .campaign-card + .campaign-card {
        margin-top: 10px;
    }

    .feature-lp .category_inner > .campaign-card .campaign-card__image {
        flex: 0 0 100px;
    }

    .feature-lp .category_inner > .campaign-card .campaign-card__title {
        font-size: 16px;
    }

    .feature-lp .category_inner > .campaign-card .campaign-card__condition {
        margin-top: 6px;
    }

    .feature-lp .category_inner > .campaign-card .campaign-card__point {
        bottom: 18px;
    }

    .feature-lp .category_inner > .campaign-card .campaign-card__point strong {
        font-size: 30px;
    }

    .feature-lp .category_inner > .campaign-card .campaign-card__point span {
        font-size: 18px;
    }

    .feature-lp .campaign-list {
        width: 100%;
    }

    .feature-lp .campaign-list .campaign-card {
        flex: 0 0 calc((100% - 20px) / 3);
        width: auto;
        max-width: 100px;
        min-height: 160px;
        border-radius: 4px;
    }

    .feature-lp .campaign-list .campaign-card img {
        width: 80px;
        max-width: calc(100% - 16px);
        height: auto;
        aspect-ratio: 1;
    }

    .feature-lp .campaign-list .campaign-card p {
        margin: 10px 8px 0;
        min-height: 29px;
        line-height: 1.2;
    }

    .feature-lp .campaign-list .campaign-card small {
        margin: 4px 8px 0;
        font-size: 10px;
    }

    .feature-lp .campaign-list .campaign-card .campaign-card__point {
        margin: auto 8px 10px;
        padding-top: 10px;
        font-size: 16px;
    }

    .feature-lp .notes_inner {
        width: 100%;
        padding: 22px 15px 25px;
    }

    .feature-lp .notes h2 {
        margin-bottom: 16px;
        font-size: 19px;
    }

    .feature-lp .notes p {
        max-width: none;
        margin: 8px 0;
        font-size: 9px;
        line-height: 1.65;
    }
}

@media (max-width: 374px) {
    .feature-lp .category_inner {
        padding: 10px;
    }

    .feature-lp .bonus-challenge {
        margin-top: 10px;
    }
}

/* =========================
   color（デザイン納品の配色クラス。featureColorClasses() が返す名前に対応）
========================= */

.feature-lp .red_maincolor {
  background: #FF4447 !important;
}

.feature-lp .red_strong {
  background: #FFCBCC !important;
}

.feature-lp .red_light {
  background: #FFFAFA !important;
}

.feature-lp .blue_maincolor {
  background: #3C569D !important;
}

.feature-lp .blue_strong {
  background: #E0E8FF !important;
}

.feature-lp .blue_light {
  background: #F3F6FF !important;
}

.feature-lp .skyblue_maincolor {
  background: #16BDFF !important;
}

.feature-lp .skyblue_strong {
  background: #D6F3FF !important;
}

.feature-lp .skyblue_light {
  background: #F2FBFF !important;
}

.feature-lp .orange_maincolor {
  background: #FE805C !important;
}

.feature-lp .orange_strong {
  background: #FFEBE5 !important;
}

.feature-lp .orange_light {
  background: #FFF9F7 !important;
}

.feature-lp .beige_maincolor {
  background: #B3A786 !important;
}

.feature-lp .beige_strong {
  background: #E9E5D8 !important;
}

.feature-lp .beige_light {
  background: #F6F4ED !important;
}

.feature-lp .black_maincolor {
  background: #353535 !important;
}

.feature-lp .black_strong {
  background: #B9B9B9 !important;
}

.feature-lp .black_light {
  background: #DDDDDD !important;
}

.feature-lp .white_maincolor {
  background: #FFFFFF !important;
}

.feature-lp .white_text {
  color: #383938 !important;
}

.feature-lp .white_category {
  background-color: #383938 !important;
}

.feature-lp .white_strong {
  background: #F0F0F0 !important;
}

.feature-lp .white_light {
  background: #FAFAFA !important;
}

.feature-lp .green_maincolor {
  background: #8ECF3E !important;
}

.feature-lp .green_strong {
  background: #E1F6C6 !important;
}

.feature-lp .green_light {
  background: #F6FFEC !important;
}

.feature-lp .pink_maincolor {
  background: #FF6C90 !important;
}

.feature-lp .pink_strong {
  background: #FFE2E9 !important;
}

.feature-lp .pink_light {
  background: #FFF6F8 !important;
}

.feature-lp .purple_maincolor {
  background: #6659D5 !important;
}

.feature-lp .purple_strong {
  background: #DEDAFF !important;
}

.feature-lp .purple_light {
  background: #F9F8FF !important;
}

.feature-lp .gold_maincolor {
  background: #0d0d0d !important;
}

.feature-lp .gold_strong {
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%) !important;
}

.feature-lp .gold_light {
  background: #DBBD81 !important;
}

.feature-lp .rainbow_maincolor {
  background: linear-gradient(
  90deg,
  #F5F550 0%,
  #A6FB58 10%,
  #5FFB64 21%,
  #73CAB9 31%,
  #8E99FF 42%,
  #CE6AFF 52%,
  #FF47E9 63%,
  #FF5294 73%,
  #FF6A55 83%,
  #FF9E49 94%,
  #FFBC41 100%
) !important;
}

.feature-lp .rainbow_category {
  background: #FF4447 !important;
}

.feature-lp .rainbow_strong {
  background: linear-gradient(
  90deg,
  rgba(245, 245, 80, 0.3) 0%,
  rgba(166, 251, 88, 0.3) 10%,
  rgba(95, 251, 100, 0.3) 21%,
  rgba(115, 202, 185, 0.3) 31%,
  rgba(142, 153, 255, 0.3) 42%,
  rgba(206, 106, 255, 0.3) 52%,
  rgba(255, 71, 233, 0.3) 63%,
  rgba(255, 82, 148, 0.3) 73%,
  rgba(255, 106, 85, 0.3) 83%,
  rgba(255, 158, 73, 0.3) 94%,
  rgba(255, 188, 65, 0.3) 100%
) !important;
}

.feature-lp .rainbow_light {
  background: linear-gradient(
  90deg,
  rgba(245, 245, 80, 0.1) 0%,
  rgba(166, 251, 88, 0.1) 10%,
  rgba(95, 251, 100, 0.1) 21%,
  rgba(115, 202, 185, 0.1) 31%,
  rgba(142, 153, 255, 0.1) 42%,
  rgba(206, 106, 255, 0.1) 52%,
  rgba(255, 71, 233, 0.1) 63%,
  rgba(255, 82, 148, 0.1) 73%,
  rgba(255, 106, 85, 0.1) 83%,
  rgba(255, 158, 73, 0.1) 94%,
  rgba(255, 188, 65, 0.1) 100%
) !important;
}

.feature-lp .red_bonuschallenge {
  background:#94CF3E !important;
}