/*======================================================
TOPページ
======================================================*/

/*----------------------------------------
メインイメージ部分
----------------------------------------*/

/*----------------------------------------
メインイメージ部分
----------------------------------------*/

/* スライドのレイアウト */

.swiper-container {
    background: linear-gradient(180deg, #fff 0%, #fff 70%, #f4d595 30%, #f4d595 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

@media (max-width: 767px) {
    .swiper-container {
        height: 100%;
    }
}

.swiper-slide {
    background-repeat: no-repeat;
    /* background-size: cover; */
    background-position: center;
    text-align: right;
}

.slide-img {
    height: auto;
    width: 85%;
    margin: 0 auto;
    -o-object-fit: cover;
    object-fit: cover;
    /* -o-object-position: 100% 100%;
    object-position: 100% 100%; */
}
/* スライド画像のhover→透過を防ぐ */
.slide-img:hover {
    opacity: 1 !important;
}

/* スライドのズームアニメーション */

@keyframes zoomUp {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);
    }
}

/* スライドのテキスト　２枚目以降はスマホでは非表示に */

.swiper-text {
    position: absolute;
    left: 20px;
    top: 20%;
    /* transform: translateY(-50%); */
    z-index: 2;
    font-size: clamp(1.8rem, 3.5vw, 3.5rem);
    font-weight: bold;
    /* width:400px; */
    line-height: 2.2em;
    /* animation:textSlide 2s forwards; */
}

@media (min-width: 768px) {
    .swiper-text {
        animation: textSlide 2s forwards;
    }
    @keyframes textSlide {
        0% {
            opacity: 0;
            transform: translateX(-100px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

@media (max-width: 767px) {
    @keyframes textSlide {
        0% {
            opacity: 0;
            /* transform:translateX(0px); */
        }
        20% {
            opacity: 1;
            /* transform:translateX(0); */
        }
        80% {
            opacity: 1;
            transform: translateX(0);
        }
        100% {
            opacity: 0;
            /* transform:translateX(-100px); */
        }
    }
    .swiper-text {
        animation: textSlide 4s 0.2s both;
        opacity: 1;
    }
}

.swiper-text span {
    background: rgba(255, 255, 255, 0.85);
    padding: 10px;
}

@media (min-width: 1600px) {
    .swiper-text {
        left: 10%;
    }
}

/*----------------------------------------
新着情報タブ
----------------------------------------*/
/* PCではタブ表示 */

.tab-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.tab-label,
.tab-switch:checked ~ .tab-switch:last-of-type + .tab-label {
    color: #666;
    background: #ececec;
    /* margin-right: 5px; */
    padding: 16px 0;
    flex-basis: 20%;
    text-align: center;
}
.tab-label {
    order: -1;
    border: 1px solid #c9c9c9;
    border-bottom: none;
    cursor: pointer;
}

/* .tab-content{
    border-right:1px solid #c9c9c9;
    border-left:1px solid #c9c9c9;
    border-bottom:1px solid #c9c9c9;
    padding:1em;
    background: #fff;
}
.tab-content,
.tab-switch:checked~.tab-content:last-of-type {
    width: 100%;
    display: none;
} */

[role='tabpanel'] {
    position: relative;
    padding: 1em;
    border: 1px solid #999;
    border-radius: 0 0 5px 5px;
    background: white;
    z-index: 2;
}

[aria-selected='true'] {
    background: #589aaa;
    color: #fff;
}

/* スマホではボタンの様にみせる */

@media (max-width: 480px) {
    .tab-wrap button {
        padding: 16px 6px;
    }
    #tab-1,
    #tab-2,
    #tab-3,
    #tab-4 {
        flex-basis: 50%;
        margin: 0;
    }

    #tab-5 {
        flex-basis: 100%;
    }
}

/*----------------------------------------
新着情報背景とリスト表示
----------------------------------------*/
.bg-cream-house {
    background: url(../img/index/bg-news.png) repeat-x bottom left #fff9dd;
}

/*----------------------------------------
新着情報ボタン
----------------------------------------*/
button.btn-news-all {
    width: 260px;
    padding: 1.2em 0;
    margin-top: 50px;
    border: 1px solid#ccc;
}

/* 新着情報がない場合の表示 */
.news-no-post-text {
    padding: 0.5em 0;
}

/*----------------------------------------
さまざまな取り組み
----------------------------------------*/

.top-torikumi-cont {
    gap: 40px;
    padding-bottom: 80px;
}

.top-torikumi-cont .btn-card-wrapper {
    flex-basis: 46%;
}

@media (max-width: 600px) {
    .top-torikumi-cont .btn-card-wrapper {
        flex-basis: 100%;
    }
    .btn-card-wrapper .btn-radius-shadow {
        width: 80%;
    }
}

/*----------------------------------------
最新地域活動レポートのボタン
----------------------------------------*/

.btn-report-wrapper {
    gap: 1%;
    margin: 50px auto;
}
.btn-top-report {
    flex-basis: 32%;
    margin-bottom: 1em;
    min-height: 90px;
}

.btn-top-report a {
    display: block;
    font-weight: bold;
    padding: 20px 0;
    border: 3px solid #ccc;
    border-radius: 10px;
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 767px) {
    .btn-top-report {
        flex-basis: 49%;
    }
}

/* カテゴリー名の色分け */

.btn-top-report-raito a {
    border-color: #657f28;
} /*権利擁護・市民後見センター*/
.btn-top-report-vol a {
    border-color: #b75300;
} /*ボランティア・市民活動センター */
.btn-top-report-senior a {
    border-color: #a45093;
} /*北九州シニアネットワークアカデミー*/
.btn-top-report-etc a {
    border-color: #107a92;
} /*ウェル → その他に変更*/
.btn-top-report-college a {
    border-color: #92302f;
} /*認知症サポーター養成講座 → ボラ大に変更*/
.btn-top-report-kifu a {
    border-color: #6565c6;
} /*民間社会福祉事業従事者 救済事業 → 寄付に変更*/
.btn-top-report-kouku a {
    border-color: #366ead;
} /*校(地)区 社会福祉協議会*/
.btn-top-report-puchibo a {
    border-color: #517a5f;
} /*ぷちぼにっき*/
.btn-top-report-shukatsu a {
    border-color: #5c517a;
} /*終活安心センター*/

/*----------------------------------
カテゴリーリンクボタンのホバーアニメーション
----------------------------------*/

.btn-top-report a:hover {
    border-style: dashed;
}

/*----------------------------------------
社協ってどんな団体？
----------------------------------------*/

.top-about-text {
    flex-basis: 48%;
}

.top-about-img {
    flex-basis: 50%;
}

.top-about-img img {
    box-shadow: 16px 16px 0 #edc1d2;
    border-radius: 20px;
}

.top-about-text-main {
    text-decoration: underline;
    margin-bottom: 1em;
}

.btn-about-detail {
    flex-basis: 23%;
}

/*----------------------------------------
区社協
----------------------------------------*/
.btn-kushakyo-wrapper {
    margin-bottom: 60px;
    flex-basis: 25%;
    margin-bottom: 50px;
    padding: 1%;
}

.btn-kushakyo-wrapper a {
    font-size: clamp(1.2rem, 1.4vw, 1.4rem);
}

@media (max-width: 767px) {
    .btn-kushakyo-wrapper {
        flex-basis: 98%;
        padding: 1%;
    }
}

.top-kushakyo-cont .btn-card-wrapper .btn-radius-shadow {
    width: 95%;
}

.top-kushakyo-cont .btn-arrow-right::after {
    right: 10px;
}

/*----------------------------------------
その他の施設・活動
----------------------------------------*/

.top-other {
    padding: 60px 0;
}