/* ========================================
   私たちの考え方ページ専用スタイル
   BEM準拠・コンテナは --container-max-width でルール準拠
   ======================================== */

/* -------------------------------------------------------------------
   コンテンツセクション（交互レイアウト）
   ------------------------------------------------------------------- */
.whatwedo-section {
    padding: var(--spacing-5xl) 0;
    background: var(--color-base);
}

.whatwedo-section__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-5xl);
}

.whatwedo-section--image-right .whatwedo-section__container {
    direction: ltr;
}

.whatwedo-section--image-right .whatwedo-section__content {
    order: 1;
}

.whatwedo-section--image-right .whatwedo-section__image {
    order: 2;
}

.whatwedo-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.whatwedo-section__title {
    font-size: var(--font-size-32);
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.4;
}

/* タイトル下アンダーライン（緑がかった青の細い線） */
.whatwedo-section--title-underline .whatwedo-section__title {
    position: relative;
    padding-bottom: var(--spacing-md);
}

.whatwedo-section--title-underline .whatwedo-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: var(--color-main-01);
    border-radius: 2px;
}

.whatwedo-section__description {
    font-size: var(--font-size-18);
    font-weight: 400;
    color: var(--color-text-gray);
    line-height: 1.625;
}

.whatwedo-section__description p {
    margin: 0 0 1em;
}

.whatwedo-section__description p:last-child {
    margin-bottom: 0;
}

.whatwedo-section__image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatwedo-section__img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
}

/* 事例セクション（共通 case-cards）：タイトル中央揃え */
.whatwedo-page .case-cards .section-header__title {
    text-align: center;
}

/* ========================================
   レスポンシブデザイン
   ======================================== */

/* タブレット (992px以下) */
@media (max-width: 992px) {
    .whatwedo-section__container {
        grid-template-columns: 1fr;
        gap: var(--spacing-3xl);
    }

    .whatwedo-section--image-right .whatwedo-section__content,
    .whatwedo-section--image-right .whatwedo-section__image {
        order: unset;
    }

    .whatwedo-section__image {
        order: 1;
    }

    .whatwedo-section__content {
        order: 2;
    }
}

/* スマホ (768px以下) */
@media (max-width: 768px) {
    .whatwedo-section__container {
        padding: 0 var(--spacing-md);
    }
}

/* スマートフォン (576px以下) */
@media (max-width: 576px) {
    .whatwedo-section {
        padding: var(--spacing-4xl) 0;
    }

    .whatwedo-section__container {
        padding: 0 var(--spacing-md);
    }

    .whatwedo-section__title {
        font-size: var(--font-size-24);
    }

    .whatwedo-section__description {
        font-size: var(--font-size-16);
    }
}