/*======================================================
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:24%;
    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 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;
}