@charset "UTF-8";

  .cat_read {
    margin-top: 16px;
    margin-bottom: 60px;
 }
/* sofken-catalog-section は、このカタロググリッド全体を囲むためのコンテナです */
.sofken-catalog-section {
    padding: 20px; /* 全体の余白 */
    max-width: 1200px; /* グリッド全体の最大幅を設定し、中央に配置しやすくする */
    margin: 0 auto; /* 中央寄せ */
}

/* sofken-catalog-grid は、各カタログアイテムをグリッドで配置するためのコンテナです */
.sofken-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 応答性の高いグリッド設定 */
    gap: 20px; /* グリッドアイテム間の隙間 */
}

/* sofken-catalog-item は、各カタログの個別のボックスです */
.sofken-catalog-item {
    border: 1px solid #ddd; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    padding: 20px;
    background-color: #fff; /* 背景色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影 */
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center; /* 中央揃え */
    /* ★ここを追加・変更★ 各カードの最大幅を設定し、文章が伸びすぎるのを防ぐ */
    max-width: 350px; /* カードの最大幅を例として350pxに設定。必要に応じて調整してください */
    justify-content: space-between; /* コンテンツが縦に広がる際に、均等にスペースを配分 */
}

/* sofken-logo-container はロゴのコンテナ */
.sofken-logo-container {
    margin-bottom: 15px; /* ロゴの下の余白 */
}

/* sofken-logo は画像として提供されたロゴ */
.sofken-logo {
    width: 150px; /* ロゴの幅 */
    height: auto; /* 高さは自動調整 */
    display: block; /* 余分なスペースをなくす */
}

/* sofken-catalog-description は説明文 */
.sofken-catalog-description {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px; /* 説明文の下の余白 */
    text-align: left; /* 左寄せ */
    width: 100%; /* 親要素の横幅いっぱいに広げる (ただし親要素のmax-widthで制限される) */
    box-sizing: border-box; /* paddingを含めてwidthを計算 */
}

/* sofken-catalog-button は「カタログ一覧へ」ボタン */
.sofken-catalog-button {
    display: inline-block; /* ボタンとして機能させる */
    background-color: #6c757d; /* ボタンの背景色 */
    color: #fff; /* ボタンの文字色 */
    padding: 10px 20px;
    border-radius: 5px; /* ボタンの角丸 */
    text-decoration: none; /* 下線をなくす */
    font-weight: bold;
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
    width: fit-content; /* 内容に応じた幅 */
    white-space: nowrap; /* ボタン内のテキストが改行されないようにする */
}

.sofken-catalog-button:hover {
    background-color: #5a6268; /* ホバー時の背景色 */
}

/* レスポンシブデザインの調整 */
@media (max-width: 768px) {
    .sofken-catalog-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* スマートフォンでは1列または2列 */
    }
    .sofken-catalog-item {
        max-width: none; /* 小画面ではmax-widthを解除して、minmaxで設定された幅に合わせる */
    }
}

@media (max-width: 480px) {
    .sofken-catalog-grid {
        grid-template-columns: 1fr; /* 非常に狭い画面では1列 */
    }
    .sofken-catalog-item {
        padding: 15px;
    }
    .sofken-logo {
        width: 120px;
    }
    .sofken-catalog-description {
        font-size: 13px;
        /* モバイルでも左寄せを維持 */
    }
    .sofken-catalog-button {
        padding: 8px 15px;
    }
}