/********************************* 
* 　　　各スライドセクション共通
*********************************/
#top .content-section{
    margin-bottom: 30px;
}
#top #information.content-section{
    margin-bottom: 1%;
}
#top #information.content-section header{
    margin-bottom: 1%;
}
.no-content{
    widows: 100%;
    text-align: center;
    font-size: 1.8em;
    padding:  2em 0;
    
}
#top .content-section header{
    padding:1% 1% 1% 3%;
    margin-bottom: 2%;
}

#top .content-section header img{
    display: inline-block;
    vertical-align: bottom;
    height: 2em;
    margin-right: 1%;
}

#top #information.content-section header{
    background-color: #f4fbd7;
}
#top #pickup.content-section header{
    background-color: #fbd9d7;
}
#top #new.content-section header{
    background-color: #e3f1ce;
}
#top #views_top.content-section header{
    background-color: #d3d9e9;
}

#top .content-section .slide .content-link{
    font-size: 1.6em;
    font-weight: bold;
}
#top .content-section .slide .content-link .image-area{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 3%;
}
#top .content-section .slide .content-link .image-area img{
    width: 100%;
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
}

/* PC（hover 可能デバイス）専用の半透明化 */
@media (hover: hover) {
     #top .content-section .content-link:hover .image-area img {
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }
}
/* スマホ（hover なしデバイス）専用のタップ時半透明化 */
@media (hover: none) {
     #top .content-section .content-link:active .image-area img {
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }
}

/********************************* 
* 　　　    スライダー設定
*********************************/
.slick-prev {
    left: 0.5vw;
    z-index: 10;
    width:auto;
}
.slick-prev img{
    width: 100%;
}
.slick-prev::before {
    content:"";
}
.slick-next {
    right: 0.5vw;
    width:auto;
}
.slick-prev.slick-disabled,.slick-next.slick-disabled{
    visibility: hidden;
}
.slick-next img{
    width: 100%;
}
.slick-next::before {
    content:"";
}
.slick-prev, .slick-next {
    height: auto;
}
#global-wrap #content #top .content-section .slide{
    padding: 0 3%;
}
.slick-track{
    margin-left:0;
}
#top .content-section .slide .content-link .title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden; 
    overflow-wrap: break-word;
    height: 4.5em;
    max-width: 100%;
    text-overflow: ellipsis;
}

/* PCタブレット用スタイル */
@media screen and (min-width: 768px) {
    .slick-slide {
        margin: 0 5px;
    }
    /* the parent */
    .slick-list {
        margin: 0 -5px;
    }
    .slick-prev {
        width: 1.5vw;
    }
    .slick-next {
        width: 1.5vw;
    }
    #global-wrap #content #top .content-section .content-link{
        display: flex;
        flex-direction: column;
    }
    #global-wrap #content #top .content-section .content-link div{
        min-height: 2em;
    }
    #top .content-section .slide .content-link .image-area{
        /* aspect-ratio: 5 / 3; */
        padding-top: 56.25%; /* safari対応 */
    }

}

/* スマホ用スタイル */
@media screen and (max-width: 767px) {
    #global-wrap #content #top .content-section .slide{
        padding: 0 10%;
    }
    #top .content-section .slide .content-link .image-area{
        /* aspect-ratio: 5 / 3; */
        padding-top: 56.25%; /* safari対応 */
    }

}

/********************************* 
* 　　　    #banners
*********************************/
#banners {
    padding-bottom: 30px;
}
#banners .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 3%;
}
#banners .inner ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
#banners .inner ul li {
    width: calc((100% - 15px * 3) / 4);
}
#banners .inner ul li a {
    display: block;
}
#banners .inner ul li a:hover {
    opacity: 0.85;
}
#banners .inner ul li a img {
    object-fit: contain;
    width: 100%;
    height: 7vw;
    max-height: 82px;
}
/* ipad用スタイル */
@media screen and (max-width: 767px) {
    #banners .inner {
        padding: 0 5%;
    }
    #banners .inner ul {
        gap: 10px;
    }
    #banners .inner ul li {
        width: calc((100% - 10px * 1) / 2);
    }
    #banners .inner ul li a img {
        height: 14vw;
        max-height: 106px;
    }
}