/* item-summary.css */

/* Google Fonts の読み込み (例: Montserrat)  必要に応じて変更 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

.dmm-item-summary {
    position: relative; /* 子要素の基準位置に */
    display: inline-block; /* インラインブロック要素にする */
    width: 100%; /* 必要に応じて調整。例: 100%, 300px など */
    border-radius: var(--border-radius);
    overflow: hidden;  /* はみ出る部分を隠す */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつける */
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}

.dmm-item-summary:hover {
    transform: translateY(-5px); /* ホバー時に少し上に移動 */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* 影を強調 */
}

/* 画像コンテナのスタイル */
.dmm-item-summary .image-container {
    position: relative;  /*  相対位置指定 */
    width: 100%; /* 幅は親要素に合わせる */
    padding-top: 67%; /* アスペクト比を維持するためのパディング */
    overflow: hidden;
}

/* 画像のスタイル */
.dmm-item-summary img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* アスペクト比を維持 */
    transition: filter 0.3s ease;
    filter: brightness(1.1); /* 画像を少し明るく */
}

.dmm-item-summary:hover img {
    filter: brightness(1.25); /* ホバー時はさらに明るく */
}

/* ボタン風リンクのスタイル (aタグ全体に適用) */
.dmm-item-summary a.summary-button {
    display: block; /* ブロックレベル要素にする */
    width: 100%; /* 親要素いっぱいに広げる */
    text-decoration: none; /* 下線を消す */
}

/* 見出しのスタイル */
.dmm-item-summary .summary-title {
    position: absolute;
    /* top: 0;  <-- 削除 */
    /* left: 0; <-- 削除 */
    top: 50%;  /* 追加 */
    left: 50%; /* 追加 */
    transform: translate(-50%, -50%); /* 追加 */
    z-index: 2;
    margin: 0;
    /*padding: 30px 15px;  パディングを大幅に増やす */
    color: #fff; /* 文字色を白に */
    font-family: 'Montserrat', sans-serif; /* フォント */
    /*font-size: 1.4rem;  フォントサイズ */
    font-weight: 700;
    text-align: center; /* テキストを中央揃え */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒 */
    /* border: none;  枠線は場合によって削除 */
    border-radius: var(--border-radius); /* 角丸 */
    box-sizing: border-box;
    width: 100%; /* コンテナの幅に合わせる */
    /* white-space: nowrap;  テキストを折り返さない */
    overflow: hidden; /* はみ出たテキストを隠す */
    /* text-overflow: ellipsis;  省略記号(...)を表示 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* line-height: 1.3; */

    /* 2行表示 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;        /* 標準プロパティを追加 */
    overflow: hidden;    /* 念の為追加 */
}

.dmm-item-summary:hover .summary-title {
    background-color: rgba(0, 0, 0, 0.75); /* ホバー時はさらに暗く */
}