/* ========================= ヒーロー部 ========================= */
/* 修正: フル幅ラッパーを追加して左右余白をリセット */
.hero-fullwidth-wrapper {
    width: 100vw;       /* ビューポート幅いっぱい */
    margin: 0;          /* 余白リセット */
    padding: 0;         /* パディングリセット */
    box-sizing: border-box;
    position: relative;
}

.ec-heroRole.hero-fullwidth {
    width: 100%;        /* ラッパー内でフル幅 */
    margin: 0;
    padding: 0;
}

.ec-heroRole.hero-fullwidth .hero-slider img {
    width: 100%;
    height: auto;
    display: block;
}

/* slickのドットナビの調整 */
.hero-slider .slick-dots {
    margin-top: 20px;
}

/* ヒーロー部下の余白 */
.ec-heroRole.hero-fullwidth {
    margin-bottom: 70px; /* PC余白 */
}
@media (max-width: 767px) {
    .ec-heroRole.hero-fullwidth {
        margin-bottom: 50px; /* SP余白 */
    }
}

/* ========================= トップページキャンペーン ========================= */
.ec-campaignWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px auto;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
}
.ec-campaignWrapper .ec-campaignItem {
    flex: 1 1 calc(20% - 10px);
}
.ec-campaignWrapper .ec-campaignItem img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* ========================= h1タグ ========================= */
h1 {
    font-size: 32pt;
    font-weight: bold;
    margin: 0 0 20px 0;
}
@media (max-width: 767px) {
    h1 { font-size: 28pt; }
    .ec-campaignWrapper { gap: 5px; padding: 0 10px; }
    .ec-campaignWrapper .ec-campaignItem { flex: 1 1 100%; }
}

/* ========================= スマホ時の横スクロール防止 & slick調整 ========================= */
html, body { overflow-x: hidden; }
.hero-slider, .hero-slider .slick-list, .hero-slider .slick-track { margin: 0; padding: 0; }
.hero-slider img { display: block; width: 100%; height: auto; }

/* ========================= カテゴリ一覧（PC） ========================= */
.ec-categoryRole h2.ec-secHeading {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 30px 0;
}
.ec-categoryRole__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 40px auto;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
}
.ec-categoryRole__listItem {
    flex: 1 1 calc(20% - 20px);
    text-align: center;
}
.ec-categoryRole__listItem img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ec-categoryRole__listItem img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ========================= カテゴリ一覧（SP） ========================= */
@media (max-width: 767px) {
    .ec-categoryRole__list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
        margin: 20px auto;
        padding: 0 10px;
    }
    .ec-categoryRole__listItem {
        flex: 0 0 calc(33.333% - 5.33px);
        margin-bottom: 8px;
        text-align: center;
    }
}

/* ========================= Slick矢印フル幅調整（任意） ========================= */
.hero-slider .slick-arrow {
    z-index: 2;
}
.hero-slider .slick-prev { left: 10px; }
.hero-slider .slick-next { right: 10px; }