@charset "UTF-8";

/* デフォルトの文字色 */
.header a {
    transition: color 0.3s ease;
}

/* スクロール後の文字色 */
.header.scrolled a {
    color: #f3f3f3;
}

.aboutBox {
    padding-top: 180px;
}

.profile {
    padding-top: 35px;
    width: 100%;
}
.boxEffectTopA {
    width: 50%;
    height: 35px;
    background-color: #0051FF;   
    text-align: left;
}

.boxEffectBottomA {
    width: 50%;
    height: 35px;
    background-color: #0051FF; 
    margin-left: auto;  
}

.effectBox {
    display: flex;
}

.boxEffectTopB {
    width: 50%;
    height: 35px;
    background-color: #0044D7;
}

.boxEffectBottomB {
    width: 50%;
    height: 35px;
    background-color: #0044D7;
}

.boxEffectTopC {
    width: 50%;
    height: 35px;
    background-color: #0039B4;
}

.boxEffectBottomC {
    width: 50%;
    height: 35px;
    background-color: #0039B4;
    margin-left: auto;  
}

.aboutListA {
   background-color: #0051FF;  
   padding: 0 var(--contentPadding); 
}

.aboutListB {
    background-color: #0044D7;
    padding: 0 var(--contentPadding); 

}

.aboutListC {
    background-color: #0039B4;
    padding: 0 var(--contentPadding); 

}

.aboutNumber,.aboutTitle,.aboutSubTitle,.aboutText,.aboutHr {
    color: #f3f3f3;
}

.aboutNumber {
    font-size: 2rem;
    font-weight: 500;
}

.aboutTitle {
    font-size: 4.8rem;
    font-weight: 700;
    font-family: "Helvetica Neue";
    padding-top: 10px;
}

.aboutSubBox {
    display: flex;
    gap: 7px;
    align-items: center;
}

.aboutHr {
    width: 50px;
    margin-top: 0;
}

.aboutSubTitle {
    font-size: 1.4rem;
    font-weight: 500;
}

.aboutText {
    font-size: 1.4rem;
    line-height: 2.5; /* 214.286% */
    padding: 45px 0;
}

/* ====================
pc
======================= */
@media screen and (min-width:769px) {

    .profileBox {
        display: flex; /* 親要素にFlexboxを適用 */
        gap: 75px; /* 左と右の列の間の余白 */
        align-items: flex-start; /* 縦方向の上端揃え */
        padding-top: 90px;
    }

    .profileRight {
        flex: 2; /* profileLeftの2倍の幅を占めるように設定 */
    }

    .profile {
        width: 100%; /* 親要素（.profileLeft）の幅いっぱいに広げる */
        height: auto;
        max-width: 30vw;
        padding-top: 0;
    }

    .textBoxText {
        text-align: left; /* 名前を左寄せに */
        padding-top: 0;
    }

    .worksContentText {
        /* テキストのスタイルを調整 */
        padding-top: 0;
        /* その他のスタイル */
    }

    .aboutNumber {
        font-size: 2.9rem;
    }

    .aboutTitle {
        font-size: 10rem;
        line-height: normal;
    }

    .aboutSubTitle {
        font-size: 2rem;
    }

    .aboutText {
        font-size: 1.8rem;
        width: 55%;
        margin-left: auto;
        padding: 45px 0 170px 0;
    }
}