/* Media Section Styles */
.media-section {
    padding: 60px 60px; /* 上下左右の余白 */
    background-color: #FFFFFF; /* Figmaの背景色が見当たらないため白を仮定 */
    font-family: 'Hiragino Sans', sans-serif; /* style_O4E412, style_XVD5DO などから */
}

.media-header {
    text-align: center;
    margin-bottom: 40px;
}

.media-subtitle {
    /* "営業をもっと身近に" - style_XVD5DO */
    font-family: 'Hiragino Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: 0.39em; /* 39% from Figma */
    color: rgba(0, 0, 0, 0.52); /* fill_0LNX36 */
    margin-bottom: 8px; /* subtitleとtitleの間 */
}

.media-title {
    /* "Empire Media" - style_O4E412 */
    font-family: 'Hiragino Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.5em;
    letter-spacing: 0.15em; /* 15% from Figma */
    color: #152632; /* fill_EFY6FC */
    margin-bottom: 20px; /* titleとnavigationの間 */
}

.media-navigation {
    display: flex;
    justify-content: flex-end; /* 右寄せに変更 */
    align-items: center;
    gap: 20px; /* 矢印間のスペース */
    /* Figma Group 1 (id: 23:29) の配置を参考 */
    /* position: absolute; right: 70px; top: 148px; (relative to parent media-section or a wrapper) */
    /* ここではヘッダー内に配置 */
    padding-right: 100px; /* 右端の余白を100pxに変更 */
}

.media-navigation .arrow-prev,
.media-navigation .arrow-next {
    width: 45px; /* Ellipse 1/2 dimensions */
    height: 45px; /* Ellipse 1/2 dimensions */
    border: 1px solid #869FD9; /* stroke_OYY49W */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-image: url('https://www.empirestate.tokyo/wp-content/uploads/2025/06/arrow-nav.svg'); /* 新しいSVG矢印 (ナビゲーション専用) */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%; /* アイコンサイズ調整 (SVGのサイズに応じて変更) */
    /* filter: invert(35%) sepia(8%) saturate(2000%) hue-rotate(190deg) brightness(90%) contrast(85%); */ /* SVGの色を #869FD9 に近づける試み */
    /* TODO: SVG矢印アイコンを背景画像またはインラインSVGで追加 */
}
/* Placeholder for arrow SVGs if not using img tags */
.media-navigation .arrow-prev::before {
    content: ''; /* contentを空に */
    /* color: #869FD9; */ /* 背景画像を使用するため不要 */
    /* font-size: 20px; */ /* 背景画像を使用するため不要 */
}
.media-navigation .arrow-next::before {
    content: ''; /* contentを空に */
    /* color: #869FD9; */ /* 背景画像を使用するため不要 */
    /* font-size: 20px; */ /* 背景画像を使用するため不要 */
}

.media-navigation .arrow-prev {
    transform: rotate(180deg); /* 左向き矢印 */
}

.media-navigation .arrow-next {
    transform: none; /* 右向き矢印 (元のSVGが右向きなので回転不要) */
}

.media-grid {
    display: flex;
    justify-content: center; /* カードを中央揃え */
    gap: 30px; /* カード間のスペース */
    padding: 0 60px; /* 左右の余白 */
    flex-wrap: wrap; /* 画面幅に応じて折り返し */
}

.media-card {
    /* Group 11, 12, 13 (e.g. id: 30:88) */
    /* width: 394px; */ /* Rectangle 9/10 width - Figmaの幅に合わせるか、レスポンシブにauto */
    /* width: 100%; */ /* 親グリッドアイテムとしての幅。Swiperがこれを上書きするためコメントアウト */
    /* max-width: calc(33.333% - 20px); */ /* 3列表示のための調整 (gapを考慮) - Swiperが制御するため削除 */
    /* height: 363px; Group height - content will define height */
    background-color: #fff; /* カードの背景 */
    border-radius: 0; /* Figmaでは角丸なし */
    box-shadow: none; /* Figmaでは明確な影なし */
    border-bottom: 1px solid #E7E7E7; /* Figma stroke_YQHQYZ */
    overflow: visible; /* Featureタグがはみ出す場合があるので hidden から visible に変更を検討、または overflow:hidden のままでタグがカード内に収まるように調整 */
    display: flex;
    flex-direction: column;
    position: relative; /* Featureタグの配置基準とする */
}

.media-card-image {
    width: 100%; /* コンテナの幅いっぱいに */
    height: 200px; /* 例: 高さを200pxに固定 */
    overflow: hidden; /* はみ出した部分を隠す */
    position: relative; /* 画像を中央寄せにするための基準点 */
    /* background-color: #f0f0f0; */ /* 画像読み込み前の背景色など - カード背景の白が見えるようにコメントアウト */
    padding-left: 20px; /* スライド幅計算への影響を避けるためコメントアウト -> 10pxで再設定 */
    box-sizing: border-box; /* paddingを含めてwidthを100%にする */
}

.media-card-image img {
    width: 100%; /* 親要素のコンテンツ領域(パディングを除いた部分)の100% */
    height: 100%;
    object-fit: cover; /* アスペクト比を保ったままコンテナ全体を覆うように調整 */
    object-position: center; /* 画像の中央を表示 */
    display: block; /* 余計な余白を防ぐ */
}

.media-card-content {
    padding: 20px; /* Figmaにあわせて調整が必要 */
    position: relative; /* feature-tagの配置基準 */
    flex-grow: 1; /* カードの高さを揃えるために追加 */
    display: flex;
    flex-direction: column;
}

.media-card-date {
    /* position: absolute; */ /* レイアウトに応じてコメント解除または調整 */
    /* width: 113px; */ /* 必要に応じて設定 */
    /* height: 18px; */ /* line-heightとfont-sizeで制御されることが多い */
    /* left: 967px; */ /* 親要素からの相対位置に調整が必要 */
    /* top: 469px; */  /* 親要素からの相対位置に調整が必要 */
    font-family: 'Hiragino Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px; /* ボックスの高さと同一 */
    letter-spacing: 0.39em;
    color: rgba(0, 0, 0, 0.44);
    margin-bottom: 8px; /* 他の要素との間隔。position:absoluteの場合は不要になることも */
}

.media-section .swiper-slide.media-card > div.media-card-content > h3.media-card-title {
    /* "シンガポールの産業に関する洞察" - style_4E2X0O */
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.5em !important;
    letter-spacing: 0.122em !important;
    /* color: #1F3134 !important; */ /* 色はaタグで指定するためコメントアウト */
    margin-bottom: 15px !important;
    /* flex-grow: 1; */ /* 行数制限をする場合、一旦コメントアウトか削除を検討。必要なら後で調整 */

    /* ↓ここから追加・修正 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* 表示する行数を2行に設定 */
    -webkit-box-orient: vertical !important;
    max-height: 3em !important; /* line-height * 2行分。line-heightが1.5emなら3em */
    /* ↑ここまで追加・修正 */
}

.media-card-feature-tag {
    background-color: #121B40; /* FigmaのPICKUPに近い色 / スクリーンショットの濃紺 */
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold; /* やや太字に見えるため */
    font-size: 13px;   /* スクリーンショットに合わせて調整 */
    line-height: 1.5;
    letter-spacing: 0.05em;
    padding: 4px 10px; /* スクリーンショットに合わせて調整 */
    border-radius: 0; /* 角丸なし */
    position: absolute;
    top: 178.5px; /* (画像高さ200px) - (自身の高さ約35.5px) = 164.5px  เพื่อให้ด้านล่างของแท็กอยู่ที่ 200px */
    left: 0;
    z-index: 1; /* 画像の上に表示するため */
    /* display: inline-block; は削除 */
    /* margin-bottom: 20px; は削除 */
}

.media-card-tags {
    display: flex;
    align-items: center;
    gap: 5px; /* FigmaのContainer gap */
    margin-top: auto; /* コンテンツ下部に配置 */
    padding-top: 12.5px; /* FigmaのContainer padding */
    padding-bottom: 17.5px; /* FigmaのContainer padding */
}

.media-card-tags .tag-icon {
    width: 18px; /* Figma icon size */
    height: 15px; /* Figma icon size */
    background-image: url('../images/mdi_tag-outline.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.media-card-tags .tag-text {
    font-family: 'Noto Sans JP', sans-serif; /* Figma style_EQELZ7 */
    font-weight: 400; /* Figma style_EQELZ7 */
    font-size: 11px; /* Figma style_EQELZ7 */
    line-height: 1.27em; /* Figma style_EQELZ7 */
    letter-spacing: 0.09em; /* Figma style_EQELZ7 */
    color: #1F3134; /* Figma fill_OBJAXE */
    border: 1px solid #E7E7E7; /* Figma stroke_MG03XB */
    padding: 4px 7px; /* Figma Container padding 参考 */
    border-radius: 0; /* Figmaでは角丸なし */
}

/* TODO: SVGアイコンの具体的なスタイル (imgタグを使うかインラインSVGか背景か) */
/* TODO: レスポンシブ対応 */

/* アイキャッチ画像がない場合のプレースホルダーのスタイルも調整が必要かもしれません */
.media-card-image-placeholder {
    width: 100%;
    height: 200px; /* 上記の高さと合わせる */
    background-color: #e0e0e0; /* プレースホルダーの背景色は維持 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px; /* スライド幅計算への影響を避けるためコメントアウト -> 10pxで再設定 */
    box-sizing: border-box; /* paddingを含めてwidthを100%にする */
    /* 必要であればテキストやアイコンを追加 */
}

/* Swiper Carousel Styles for Media Section */
.media-swiper-container {
    width: 100%;
    max-width: 1140px; /* Add a specific max-width */
    margin: 0 auto;
    position: relative; /* For absolute positioning of nav/pagination if needed */
    overflow: hidden !important; /* Ensure this is strictly applied */
}

.swiper-wrapper.media-grid {
    /* display: flex; /* Swiper handles this */
    /* Styles for the grid if still needed, but Swiper will control layout */
}

.swiper-slide.media-card {
    /* Ensure slides are correctly sized by Swiper */
    height: auto; /* Allow height to adjust based on content */
    display: flex; /* Helps with vertical alignment if needed */
    flex-direction: column;
    box-sizing: border-box;
    /* Add any other specific styling for your cards within the slide */
    /* Forcing a width calculation to see if it overrides Swiper's potential miscalculation */
    width: calc( (100% / 3) - 20px ); /* Approximate width for 3 slides with some gap */
}

/* Navigation Buttons - Styling based on your existing .arrow-prev/next */
.media-navigation {
    /* Adjust positioning if they are outside the swiper container now */
    /* Example: */
    /* display: flex; */
    /* justify-content: space-between; */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 0; */
    /* right: 0; */
    /* transform: translateY(-50%); */
    /* z-index: 10; */
    /* padding: 0 10px; */
}

.media-swiper-button-prev, 
.media-swiper-button-next {
    /* cursor: pointer; */
    /* Ensure they are styled to be visible and clickable */
    /* background-image: none; /* Remove default swiper arrows if you use custom HTML */
    /* width: 40px; /* Example size */
    /* height: 40px; /* Example size */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* fill: #yourcolor; or background-image for SVG */
}

/* If you are using Swiper's default SVG arrows via CSS, you might need to style them. */
/* .swiper-button-next::after, .swiper-button-prev::after { */
/* font-size: 24px !important; */
/* color: #000; */
/* } */

/* Pagination */
.media-swiper-pagination {
    position: static; /* Or absolute if you want to place it over the slides */
    margin-top: 20px; /* Space above pagination */
    bottom: auto; /* Reset Swiper default if static */
}

.swiper-pagination-bullet {
    background-color: #D1D5DB; /* Non-active bullet color */
    opacity: 1;
    width: 10px; /* Example size */
    height: 10px; /* Example size */
}

.swiper-pagination-bullet-active {
    background-color: #121B40; /* Active bullet color */
    opacity: 1;
}

/* Ensure images inside cards are responsive */
.media-card-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Add any existing styles for .media-section, .media-header, etc. below or integrate */

/* 
  Make sure to review your existing media-section-styles.css 
  and integrate/adjust these styles as needed to avoid conflicts 
  and ensure the carousel looks good with your theme.
*/

/* メディアカード内のリンクの色を指定 */
.media-section .media-card a {
    color: #342929 !important; 
    text-decoration: none !important; 
}

.media-section .media-card a:hover {
    color: #555555 !important; 
    /* text-decoration: underline !important; */ 
}

.media-section .media-card h3.media-card-title a {
    font-family: 'Hiragino Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #342929 !important; 
    text-decoration: none !important; 
    display: inline !important; /* aタグのデフォルトに近い表示を維持 */
}

.media-section .media-card h3.media-card-title a:hover {
    color: #555555 !important; 
    /* text-decoration: underline !important; */ 
}

.media-card-feature-tag {
    /* ... existing code ... */
}

/* Responsive Styles */
@media (max-width: 767px) {
    .media-section {
        padding: 30px 15px; /* スマートフォン用に余白を調整 */
    }

    .media-subtitle {
        font-size: 16px;
    }

    .media-title {
        font-size: 28px;
    }

    .media-navigation {
        display: none;
    }

    .media-swiper-container {
        max-width: 100%; /* スマートフォンでは最大幅を100%に */
    }

    .media-grid {
        padding: 0 15px; /* スマートフォン用に余白を調整 */
        gap: 15px; /* カード間のスペースも調整 */
    }

    .swiper-slide.media-card {
        /* スマートフォンでは1カラム表示などを想定し、width指定をリセットまたは調整 */
        width: 100% !important; /* Swiperのスタイルを上書きするため!importantを使用することも検討 */
        /* もし1カラムでなく、Swiper側で slidesPerView: 'auto' などにする場合は、個々のカード幅調整が別途必要 */
    }

    .media-card-image {
        padding-left: 0; /* スマホでは画像周りの不要なpaddingを削除 */
    }
}