.category-grid {
      /*display: inline-block;
　　　　　height: 61px;
 　　　　 width: 145px;
　　　　  background-color: #dd5268;*/
        display: flex;
        flex-wrap: wrap;
        gap: 20px; 
    }

    .category-item {
        font-family: helvetica, メイリオ, Meiryo, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, Osaka, ＭＳ Ｐゴシック, MS P ゴシック, verdana, arial, sans-serif;
        width: 250px;
        position: relative;
        display: flex; 
        align-items: center;
        max-width: 400px; /* Adjust max-width as needed */
    }

    .category-item img {
        width: 80px; /* Adjust image width as needed */
        height: auto; /* Maintain aspect ratio */
        margin-right: 20px; /* Space between image and text */
    }

    .category-item a {
        text-decoration: none;
        color: #333;
        font-size: 16px;
    }
        .left {
            float: left;
            margin-right: 20px;
        }
        .right {
            float: right;
            margin-left: 20px;
        }
        .clear {
            clear: both;
        }
        .strong {
            font-weight: bold;
        }
        .m1 {
            margin-bottom: 5px;
        }
        .p1 {
            margin-top: 10px;
        }
        .kaisya {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .kaisya_lf {
            font-weight: bold;
            width: 30%;
            float: left;
            clear: left;
            margin-bottom: 5px;
        }
        .kaisya_rt {
            width: 70%;
            float: right;
            margin-bottom: 5px;
        }

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}
        .ttl {
            font-weight: bold;
            margin-top: 20px;
        }

.banners-container {
    width: 100%;
    max-width: 928px; /* 必要に応じて調整 */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.banner-item {
    width: 100%;
    max-width: 900px; /* 必要に応じて調整、各バナーの幅 */
    background-color: #fff; /* バナーの背景色 */
    border: 1px solid #ccc; /* バナーの枠線 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* バナーに影を付ける */

    box-sizing: border-box;
}

.banner-section {
    padding: 10px;
    box-sizing: border-box;
}

.banner-section--top {
    text-align: center;
}

.banner-image {
    width: 100%;
    height: auto;
}

.banner-section--middle {
    display: flex;
    align-items: center;
    background-color: #f4f4f4; /* 中段の背景色 */
}

.banner-middle-left {
    flex: 1;
    text-align: center;
}

.banner-logo {
    height: 50px; /* ロゴの高さを調整 */
}

.banner-middle-right {
    flex: 2;
    text-align: center;
}

.banner-name {
    font-size: 20px;
    font-weight: bold;
}

.banner-section--bottom {
    background-color: #fff; /* 下段の背景色 */
    text-align: center;
}

.banner-text {
    margin: 0;
    font-size: 16px;
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 650%;
  height: 0;
  overflow: hidden;

}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gridContainer_item {
    display: grid;
    max-width: 700px;
    grid-template-columns: repeat(auto-fit, minmax(calc(700px/5), 1fr));
    grid-gap: 10px;
}
.fuItem{
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    padding: 2px;
    text-decoration: none;
    color: #000;
    transition: background 0s ease 0s, border 0.5s ease-out 0s;
    background: #fff;
    border: 1px solid #fff;
}
.fuItem img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
}
.fuItem p {
    margin: 0.5em;
}
.gridContainer_lineup{
    display: grid;
    max-width: 700px;
    grid-template-columns: repeat(auto-fit, minmax(calc(700px/4), 1fr));
    grid-gap: 10px;
}
.lnItem{
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    padding: 2px;
    text-decoration: none;
    color: #000;
    transition: background 0s ease 0s, border 0.5s ease-out 0s;
    background: #fff;
    border: 1px solid #fff;
}
.gridContainer_lineup a.wh:hover {
    color: #000; 
    background: rgba(228, 232, 241, 1); 
    transition-duration: 0.2s;
}
.gridContainer_lineup a.ww:hover {
    color: #000; 
    background: rgba(66, 45, 42, 0.4); 
    transition-duration: 0.2s;
}
.gridContainer_lineup a.cn:hover {
    color: #000; 
    background: rgba(210, 165, 142, 0.5); 
    transition-duration: 0.2s;
}
.gridContainer_lineup a.wm:hover {
    color: #000; 
    background: rgba(146, 105, 80, 0.5); 
    transition-duration: 0.2s;
}