@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

.page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px 0; 
}

/* メインコンテナ */
.split-layout {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    width: 90%;             /* スマホでは少し余裕を持たせる */
    margin: 20px auto;      /* 中央寄せ */
    background: #fff;
    border-radius: 20px;
    overflow: visible;      /* スマホでは中身に応じて伸ばす */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* 少し控えめな影 */
}

/* 左側：ビジュアル */
.split-visual {
    width: 100%;
    height: 50vh;
    position: relative;
    background: #e0e0e0;
}

.visual-container {
    width: 100%;
    height: 100%;
}

.main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
}
.sec1__profile { display: none; } /* 動画はスマホで非表示（データ節約） */
.sec2__profile { display: block; } /* 画像はスマホで表示 */
@media (min-width: 1024px) {
    .sec1__profile { display: block; } /* 動画表示 */
    .sec2__profile { display: none; }
}

/* 右側：コンテンツ（ここだけスクロール） */
.split-content {
    width: 100%;
    height: auto;
    padding: 60px 8%;
    overflow-y: auto; /* コンテンツ過多でもコンテナ内でスクロール */
    scrollbar-width: thin; /* スクロールバーを細く(Firefox) */
}
/* セクション調整 */
.content-section {
    margin-bottom: 100px;
    position: relative;
    word-wrap: break-word; /* 長い単語の折り返し */
}
.split-content section:last-child {
    margin-bottom: 0;
}

.section-num {
    font-size: 4rem;
    font-weight: bold;
    color: #f0f0f0;
    position: absolute;
    top: -30px;
    left: -15px;
    z-index: -1;
}

.name {
    font-size: 2.5rem;
    margin: 0 0 10px;
    color: var(--color-primary);
}

h2 {
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-size: 1.8rem;
    border-bottom: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.code-box {
    background: #f9f9f9;
    padding: 20px;
    border-left: 4px solid #333;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    overflow-x: auto; /* コードが長い場合のみ枠内でスクロール */
}

/* レスポンシブ対応 */
@media (min-width: 1024px) {
    .split-layout {
        flex-direction: row;    /* 横に並べる */
        width: 90%;
        max-width: 1400px;
        height: 85vh;           /* 画面内に収める */
        margin: 0 auto;         /* 上下中央寄せが必要なら調整 */
        overflow: hidden;       /* コンテナ内でスクロールさせる */
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    }
    .split-visual { width: 45%; height: 100%; }
    .main-img {
        object-position: 50% 0;
    }
    .split-content { width: 55%; height: 100%; }
    .page-wrapper { padding: 40px 0; }
}