/* Figma Styles */

.about-us-figma-section {
    /* Frame 43 */
    /* width: 1440px; */ /* layout_HNF2L4 width - 親要素に合わせるか、コンテンツに合わせる */
    /* height: 502px; */ /* layout_HNF2L4 height - コンテンツに合わせる */
    padding: 70px 20px; /* ★変更: 上下の余白を70px、左右の余白を20pxに */
    overflow: hidden; /* はみ出しを隠す */
    position: relative; /* 子要素のabsolute配置の基準 */
    max-width: 1200px; /* 最大幅を設定して中央揃え */
    margin: 30px auto; /* ★変更: 上下マージン30px、左右autoで中央揃え */
}

.cases-grid {
    /* div.cases-grid */
    position: relative;
    width: 100%; /* 親要素に合わせる */
    /* height: 530px; layout_PRW3ME height - コンテンツに合わせる */
    display: flex; /* Flexboxを使用して左右のセクションを配置 */
    justify-content: space-between; /* 左右のセクション間にスペースを空ける */
    align-items: flex-start; /* 上揃え */
}

.grid-line.pc {
    /* div.grid-line.pc - 縦線 */
    background-color: #A8A8A8; /* fill_S4J1ZO */
    position: absolute;
    left: 65%; /* Figmaの962px/1440px を参考に調整 */
    top: 0;
    width: 1px; /* Figmaの0.75pxから調整 */
    height: 100%; /* セクションの高さに合わせる */
    transform: translateX(-50%); /* 中央に配置 */
}

.grid-left {
    /* div.grid-left - 左側コンテンツ */
    width: 60%; /* cases-gridの左側 */
    padding-right: 40px; /* 縦線との間の余白 */
    box-sizing: border-box;
    position: relative; /* 横線の基準 */
    display: flex; /* ★追加 */
    flex-direction: column; /* ★追加: 子要素を縦に並べる */
    justify-content: space-between; /* ★追加: 上下に均等配置 */
    height: 300px; /* ★追加: .grid-rightと高さを合わせる (調整可能) */
}

.grid-left .before {
    /* ::before (inside div.grid-left) - 横線 */
    background-color: #A8A8A8; /* fill_S4J1ZO */
    position: absolute;
    left: 0;
    top: 50%; /* ★変更: 親要素の中央 */
    transform: translateY(-50%); /* ★追加: 自身の高さ分を考慮して中央揃え */
    width: 100%;
    height: 1px;
}

.left-item {
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #342929;
    padding: 20px 0; /* 上下の余白 */
    /* margin-bottom は削除または調整 */
}

.left-item:first-child {
    /* margin-bottom: 60px; */ /* ★削除またはコメントアウト */
}

.item-title-jp {
    font-family: 'Hiragino Sans', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.5em;
    letter-spacing: 0.1em; /* Figmaの%指定から調整 */
    color: #342929;
}

.item-title-en {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1em;
    letter-spacing: 0.1em;
    color: #121B40;
    margin-left: 60px;
}

.left-item .item-arrow {
    background-color: #121B40;
    border-radius: 50%; /* 正円にする */
    width: 50px;
    height: 50px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-item .item-arrow img {
    width: 14px; /* SVGのサイズ調整 */
    height: auto;
}

.grid-right {
    /* a.grid-right - 右側コンテンツ */
    /* position: absolute; */ /* Flexboxの子要素なので不要 */
    width: 30%; /* cases-gridの右側 */
    padding-left: 40px; /* 縦線との間の余白 */
    box-sizing: border-box;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    justify-content: center; /* 上下中央揃え */
    height: 300px; /* 高さを指定して中央揃えしやすくする。grid-leftの内容に合わせる */
}

.grid-right .item-title-en {
    /* Members text */
    margin-left: 0;
    margin-bottom: 5px; /* 日本語タイトルとの間 */
}

.grid-right-jp {
    margin-top: 0;
}

.grid-right .item-title-jp {
    /* メンバー紹介 text */
    margin-top: 0; /* style_SPZYG1 (already defined) */
}

.grid-right .item-arrow {
    background-color: #121B40;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-top: 20px; /* テキストとの間 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-right .item-arrow img {
    width: 14px;
    height: auto;
}

/* 既存の矢印プレースホルダーCSSを削除 */
/* .item-arrow::after { ... } */

/* TODO: レスポンシブ対応の調整 */

/* Consider responsiveness and adjustments for different screen sizes */ 

/* 初期状態（PC） */
/* 左の「会社概要」「企業理念」表示、「メンバー紹介」は左で非表示 */
.about-us-figma-section .grid-left .member-item {
    display: none;
}
.about-us-figma-section .grid-left {
    /* display: flex; */ /* 既存のスタイルでflexが指定されているためコメントアウト */
    /* flex-direction: column; */ /* 既存のスタイルで指定されているためコメントアウト */
    gap: 16px; /* 要素間のスペース */
}
.about-us-figma-section .grid-right {
    display: flex; /* またはblockなど */
}

/* 900px以下（SP） */
/* 左カラムの「メンバー紹介」だけ表示する */
/* 右カラムのメンバー紹介は非表示 */
@media (max-width: 900px) {
    .about-us-figma-section {
        padding: 35px 20px; /* ★追加: SP表示時のパディング調整 */
    }
    .about-us-figma-section .grid-left .member-item {
        display: flex;
    }
    .about-us-figma-section .grid-right {
        display: none;
    }
    .about-us-figma-section .grid-line.pc {
        display: none; /* 縦線を非表示 */
    }
    .about-us-figma-section .grid-left .before {
        display: none; /* 横線を非表示 */
    }
    .about-us-figma-section .grid-left {
        width: 100%; /* SP表示では左カラムが全幅になるように調整 */
        align-items: center; /* left-itemを中央揃え */
        justify-content: center; /* left-itemを縦方向中央に */
        gap: 15px; /* ★変更: アイテム間のスペースを調整 */
        padding-right: 0; /* 右側のパディングを削除 */
        height: auto; /* 高さを自動調整 */
    }
    .about-us-figma-section .left-item {
        width: 90%; /* ★変更: 必要に応じて調整 */
        justify-content: space-between; /* テキストと矢印の間隔を保持 */
        padding: 15px 0; /* ★追加: 上下の余白を調整 */
    }
    .about-us-figma-section .left-item .item-title-jp {
        font-size: 20px; /* ★追加: フォントサイズを小さく */
        line-height: 1.4em; /* ★追加: 行の高さを調整 */
    }
    .about-us-figma-section .left-item .item-title-en {
        font-size: 12px; /* ★追加: フォントサイズを小さく */
        margin-left: 15px; /* ★変更: SP表示時の英語タイトルのマージン調整 */
    }
    .about-us-figma-section .left-item .item-arrow {
        width: 40px; /* ★追加: アイコンの幅を小さく */
        height: 40px; /* ★追加: アイコンの高さを小さく */
    }
    .about-us-figma-section .left-item .item-arrow img {
        width: 10px; /* ★追加: アイコン内の画像の幅を小さく */
    }
}