/* ========================================
   Horizontal Scroll Section (about_doing)
======================================== */

.about_doing {
    background-color: var(--light-beige, #F9F6F0);
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.about_doing .wrapper {
    flex-shrink: 0;
}

.about_doing .scroll-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0;
}

/* スクロールラッパー（幅制限なし） */
.scroll-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* スクロールコンテナ */
.scroll-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

/* スクロールコンテンツ */
.scroll-content {
    display: flex;
    gap: 60px;
    padding: 60px 0;
    will-change: transform;
    /* タイトルの左端に合わせる（中央寄せ1200pxの左端） */
    /*padding-left: calc((100vw - 1200px) / 2);*/
    padding:0 clamp(3.125rem, 0.997rem + 4.5vw, 4.375rem);
}

@media screen and (min-width: 1200px) {
    .scroll-content {
        padding-left: calc(((100vw - 1200px) / 2) + clamp(3.125rem, 0.997rem + 4.5vw, 4.375rem));
    }
}
/* 画面幅が1200px以下の場合は5vwの余白 
@media (max-width: 1200px) {
    .scroll-content {
        padding-left: 5vw;
    }
}

@media (min-width: 1920px) {
    .scroll-content {
        padding-right: 400px;
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    .scroll-content {
        padding-right: 300px; 
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .scroll-content {
        padding-right: 200px; 
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .scroll-content {
        padding-right: 150px; 
    }
}*/

/* 各アイテム */
.doing-item {
    flex-shrink: 0;
    width: 400px;
    border-radius: 16px;
    padding: 40px 0;
}
.doing-item2 {
    flex-shrink: 0;
    width: 260px;
    padding: 40px 0;
}
.doing-item-space{
    width:140px;
}
.doing-item:first-child {
    width: calc(clamp(2rem, 1.319rem + 1.44vw, 2.4rem) * 8 + 10px);
}
.doing-item:first-child .doing-number {
    margin-right:-24px;
}


/* ナンバー */
.doing-number {
    font-size: clamp(10rem, 5.743rem + 9.01vw, 12.5rem);
    font-weight: 900;
    color: white;
    line-height: 1;
    margin-bottom: 16px;
    text-align: right;
    padding-top:90px;
    font-family: "Zen Maru Gothic", sans-serif;
}

/* タイトル */
.doing-title {
    font-size: clamp(2rem, 1.149rem + 1.8vw, 2.5rem);
    font-weight: 700;
    color: var(--black, #333);
    margin-bottom: 30px;
    text-align: right;
    font-family: "Zen Maru Gothic", sans-serif;
}
.doing-title2 {
    font-size: 51px;
    white-space: nowrap;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: right;
    font-family: "Zen Maru Gothic", sans-serif;
    padding-top:70px;
}

/* 画像エリア */
.doing-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.doing-images img {
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    aspect-ratio: 3 / 2;
}

.doing-images p:not(.doing-subtitle) {
    font-size: 16px;
    line-height: 1.8;
}

.doing-text {
    color: var(--text-color, #333);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.doing-text-space {
    margin-top:296px;
}

.doing-text img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.doing-subtitle {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 8px;
    font-family: "Zen Maru Gothic", sans-serif;
}

.doing-text p:not(.doing-subtitle) {
    font-size: 16px;
    line-height: 1.8;
}

.doing-goal {
    width: 600px;
    position: relative;
    margin-top:10px;
}
@media (max-width: 768px) {
    .doing-item2{
        width: auto;
        padding:0;
    }
    .doing-title2{
        font-size: 26px;
        text-align: left;
        font-weight: 500;
        padding-top:20px;
        margin-bottom: 10px;
    }
}
/* ========================================
   Responsive Design
======================================== */
@media (max-width: 768px) {
    .about_doing {
        padding: 40px 0;
        overflow: visible; /* スマホでは overflow を解除 */
    }

    .scroll-container {
        overflow: visible; /* スマホでは overflow を解除 */
    }

    .scroll-content {
        display: flex;
        flex-direction: column; /* 縦並びに変更 */
        padding: 0;
        gap:15px;
        transform: none !important; /* GSAPの横移動を無効化 */
    }

    .doing-item {
        width: 100%; /* 幅を100%に */
        max-width: 100%;
        padding: 0;
    }

    .doing-images {
        margin-bottom: 10px;
    }
    .doing-number {
        font-size: 80px;
        padding-top:20px;
        margin-bottom:5px;
        letter-spacing: 5px;
    }

    .doing-title {
        font-size: 23px;
        margin-bottom: 0;
        font-weight:500;
    }
    .doing-subtitle {
        font-size:18px;
        margin-bottom:0;
        font-weight:500;
    }
    .doing-text{
        gap:10px;
    }
    .doing-text p:not(.doing-subtitle){
        font-size: 13px;
    }

    .doing-goal {
        width: 100%; /* 幅を100%に */
        max-width: 100%;
    }
    .doing-text-space{
        margin-top:20px;
    }
    .doing-text-space .doing-subtitle{
        font-size: 23px;
        margin-bottom: 0;
        font-weight: 500;
    }
    .doing-goal-space{
        margin-top:0;
    }
    .column3 .name span{
        display: block;
        padding-left: 0;
    }
    .about_life .wrapper_right{
        display: flex;
        gap: 20px;
        flex-direction: column;
    }
    .doing-text-space {
        margin-bottom:0;
    }
}