/* ===============================
   汎用のスタイル
================================ */
 /*ハイライト３色*/

 .highlight-b { background-image: linear-gradient(to bottom, transparent 60%, #bbd4ff 80%);}
 .highlight-r { background-image: linear-gradient(to bottom, transparent 60%, #ffd0d0 80%);}
 .highlight-y { background-image: linear-gradient(to bottom, transparent 60%, #f5f4af 80%);}

 /*コンテンツ下の余白*/
 .mb20{
  margin-bottom: 20px;
 }
 .mb30{
  margin-bottom: 30px;
 }
 /*画像配置*/
 .image-container {
   display: flex;
   flex-wrap: wrap;
   justify-content:center; /* 画像の配置 */
   margin-bottom: 10px;
 }
 .image-item {
   width: 33.33%; /* デフォルトで3つ横並び */
   box-sizing: border-box;
   margin-bottom: 20px;
 }

/* ===============================
   メディア掲載用のスタイル
================================ */
.outlet-group{ margin-bottom: 5%;} /*コンテンツごとの余白（下部）*/

/*メディアカード*/
.press-unit {
    display: flex;
    gap: 20px;
    background: #fbfbfb;
    border: 1px solid #f2f2f2;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    transition: 0.3s ease;
}

.press-unit a:hover{
    text-decoration: none !important;
}

/*メディアカード内のサムネイル*/
.press-thumbnail{
    text-align: center;
}

.press-thumbnail img {
    width: 180px;
    height: auto;
    border: 1px solid #cecece;
    object-fit: cover;
    transition: 0.2s ease;
}

.press-thumbnail img:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/*画像が無い場合のサムネイルカード*/
.thumbnail-card{
    display: flex;
    align-items: center;
    width: 180px;
    height: 128px;
    background-color: #000; /*色はインラインでその都度指定する想定*/
    border-radius: 8px;
    padding: 6px;
    transition: 0.2s ease;
}
/*画像が無い場合のサムネイルカードのテキスト*/
.thumbnail-text{
    line-height: 20px;
    text-align: center;
    color: #fff !important;
    font-size: 17px;
    font-weight: bold;
}

/*サムネイルカードのホバー*/
.thumbnail-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/*余った余白はここに割り振る*/
.press-content { flex: 1;} 

/*メディアカード内の日付*/
.media-date {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
}

/*メディアカード内のタイトル*/
.media-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

/*メディアカード内の説明*/
.media-description {
    font-size: 14px;
    color: #444;
    margin-bottom: 15px;
}

.press-links a {
    display: inline-block;
    color:#fff;
    padding: 8px 14px;
    margin-right: 10px;
    font-size: 13px;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.2s ease;
}

/*メディアカード内の「○の見る」ボタン*/
/* ボタン共通 */
.btn-web,
.btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
}

.btn-web { background: #0073e6;}
.btn-pdf { background: #e32600;}
/*メディアカード内の「Webの見る」ボタンのホバー*/
.btn-web:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.btn-pdf:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.btn-web i,
.btn-pdf i {
    margin-right: 6px;
}

/* ===== アイコン自動挿入 ===== */
/* Web記事 */
.btn-web::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f35d"; /* up-right-from-square */
}

/* PDF */
.btn-pdf::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f1c1"; /* file-pdf */
}

/*メディアカード内の「pdfの見る」ボタンのホバー*/

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
    .press-unit {
        flex-direction: column;
    }
    .press-thumbnail img {
        width: 80%;
    }
    .thumbnail-card{
        width:100%;
        height: auto;
    }
    .thumbnail-text{
        line-height: 24px;
        text-align: center;
        padding: 20px;
    }
} 

@media screen and (min-width: 768px) {
    .contentsTiikiBlock h2 {
        height:40px
    }
}
@media (max-width: 498px) { /* タブレットやスマートフォンの場合 */
  .image-item {
    width: 100%; /* 縦に1つずつ並ぶ */
  }
}