/* ========================================
   Web戦略・設計ページ専用スタイル
   デジタルマーケティングWeb戦略ページ
   ======================================== */

/* 課題セクションは common.css の problem-cards-grid / problem-card / problem-cards-summary を使用 */

/* ========================================
   Web戦略の範囲セクション
   ======================================== */
.ws-scope-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-5xl);
    margin-bottom: var(--spacing-5xl);
}

.ws-scope-item:last-child {
    margin-bottom: 0;
}

.ws-scope-item--left .ws-scope-content {
    order: 1;
}

.ws-scope-item--left .ws-scope-image {
    order: 2;
}

.ws-scope-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-scope-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.ws-scope-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* 番号＋水平線＋タイトル */
.ws-scope-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 var(--spacing-md);
    row-gap: var(--spacing-md);
    align-items: end;
}

.ws-scope-number {
    grid-row: 1;
    grid-column: 1;
    font-size: 56px;
    font-weight: 700;
    color: #E0F2F7;
    line-height: 1;
}

.ws-scope-number-line {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    height: 2px;
    background: #E0F2F7;
    min-width: 40px;
}

.ws-scope-number--green {
    color: rgba(77, 201, 40, 0.35);
}

.ws-scope-number-line--green {
    background: rgba(77, 201, 40, 0.35);
}

.ws-scope-number--cyan {
    color: rgba(28, 177, 190, 0.35);
}

.ws-scope-number-line--cyan {
    background: rgba(28, 177, 190, 0.35);
}

.ws-scope-title {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-main-dark-01);
    line-height: 1.4;
    padding-left: 4px;
}

.ws-scope-description {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.625;
}

.ws-scope-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-main-dark-03);
    border-radius: 12px;
}

.ws-scope-feature--light {
    background: var(--color-bg-badge-blue);
}

.ws-scope-feature--light .ws-scope-feature-icon {
    background: var(--color-main-dark-02);
    color: var(--color-base);
}

.ws-scope-feature--light .ws-scope-feature-title {
    color: var(--color-main-dark-03);
}

.ws-scope-feature--light .ws-scope-feature-subtitle {
    color: var(--color-text-secondary);
}

.ws-scope-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--color-base);
}

.ws-scope-feature-text {
    flex: 1;
}

.ws-scope-feature-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-base);
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
}

.ws-scope-feature-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

/* 緑丸・濃い青見出し・グレー説明文 */
.ws-scope-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.ws-scope-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-left: var(--spacing-lg);
}

.ws-scope-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    background: #51C42F;
    border-radius: 50%;
}

.ws-scope-list-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.4;
}

.ws-scope-list-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.625;
    padding-left: 1em;
}

.ws-scope-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.ws-scope-feature-card {
    padding: var(--spacing-lg);
    background: var(--color-base);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
}

.ws-scope-feature-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-main-dark-02);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.ws-scope-feature-card-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* 特長セクションは common.css の feature-cards を使用 */

/* 事例セクションは common.css の case-cards を使用 */

/* プロセスセクションは common.css の process-timeline を使用 */

/* ========================================
   お問い合わせセクション（Web戦略ページ用オーバーライド）
   ======================================== */
.process-timeline ~ .contact-section .contact-section-title {
    font-size: 36px;
    line-height: 1.3;
}

/* ========================================
   レスポンシブデザイン
   ======================================== */
@media (max-width: 992px) {
    .ws-scope-item {
        grid-template-columns: 1fr;
    }

    .ws-scope-item--left .ws-scope-content,
    .ws-scope-item--left .ws-scope-image {
        order: unset;
    }

    .ws-scope-image {
        order: -1;
    }
}

@media (max-width: 768px) {
    .ws-scope-features-grid {
        grid-template-columns: 1fr;
    }

    .process-timeline ~ .contact-section .contact-section-title {
        font-size: 28px;
    }
}