@charset "utf-8";
/*
Theme Name: manubol
*/
/*-------------------------------------------*/
/*  CONTENTS:
/*--------------------------------------------
1.0 - 絵本ラジオ（仮称）
---------------------------------------------*/

/*-------------------------------------------*/
/*  1.0 - 絵本ラジオ（仮称）
/*-------------------------------------------*/
.podcast {
    margin-top: 30px;
    text-align: center;
}
.podcast h3 {
    margin-bottom: 30px;
    text-align: center;
    padding-bottom: 20px;
    background: url(../images/common/line_stripe.png) no-repeat bottom center;
    background-size: 114px 9px;
    font-size: 1.8rem;
}
.podcast ul {
    padding: 0 20px;
}
.podcast ul li {
    padding: 20px 30px;
    margin: 0 auto 20px;
    background: #F1FAFF;
    text-align: left;
    border-radius: 4px;
    transition: 0.2s ease-in-out;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
}
.podcast ul li a:hover {
    color: #333;
}
.podcast ul li:hover {
  box-shadow: 0 15px 20px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}
.podcast li h4 {
    margin-bottom: 10px;
    font-size: 1.6rem;
}
.podcast li p {
    margin-bottom: 10px;
}
.podcast li div {
    display: flex;
    align-items: center;
}
.podcast .video_play {
    display: inline-block;
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    background: #304399;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
}
.podcast .video_play::before {
    position: absolute;
    top: 50%;
    left: 37%;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.4em solid transparent;
    border-left: 0.6em solid currentColor;
    box-sizing: border-box;
    content: "";
}
.banner.bnr728 {
    display: none;
}

@media screen and (min-width:768px) {
    .podcast h3 {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        background: none;
    }
    .podcast h3:before,
    .podcast h3:after {
        content: '';
        width: 114px;
        height: 9px;
        flex-grow: 1;
        background-image: url(../images/common/line_stripe.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 15px;
    }
    .podcast h3:before {
        transform: rotate(180deg);/*ラインを反転*/
    }
    .podcast ul {
        padding: 0;
    }
    .podcast ul li {
        width: 800px;
    }
    .banner.bnr728 {
        display: block;
    }
}