/*
Theme Name: Hestia Child
Theme URI: https://www.themeisle.com/
Description: This is a custom child theme I have created.
Author: ThemeIsle
URI: https://www.themeisle.com/
Template: hestia    
Version: 0.1
*/

ul.list-clear {
    padding-left: 0;
}

ul.list-clear li {
    list-style: none;
}

.header-movie {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home .page-header {
    height: 100vh !important;
}

.about,
.hestia-about {
    padding: 65px 0 0;
}

.hes .playonyoutube-area {
    overflow: hidden;
}

.playonyoutube {
    position: relative;
}

.absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.playonyoutube:hover {
    transform: scale(1.03) !important;

}

.wide_grid{
    width:100%;
}

.event_area, .contents_area{
    padding-top: 80px;
    /* display:flex;
    align-items: center; */
}

.event_image {
    height: 100%;
}

.event_detail {
    width: 60%;
}

.related-events-area {
    margin-top: 20px;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 の比率（= 9 / 16 * 100） */
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.music-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 1:1 の比率 */
    overflow: hidden;
}

.music-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 767px) {
    iframe.ytplayer {
        width: 100%;
    }
}

.btn-mouseover {
    overflow: hidden;
}

.btn-mouseover:hover+.mouseover__box {
    display: block;
}

.btn-mouseover:hover {
    background-color: black;
}

.btn-mouseover:hover img {
    opacity: 0.7;
    transform: scale(1.05) !important;
}

.btn-mouseover:hover .mouseover__box {
    display: block;
}


.mouseover__box {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    align-content: center;
    color: #000;
}

.apple_music_btn {
    height: 50px;
    width: 300px;
    background: #ffffff79 url(http://sample.loti.jp.testrs.jp/lifestyle/wp-content/uploads/2025/05/apple_music.png) no-repeat center/20%;
}

.spotify_btn {
    height: 50px;
    width: auto;
    background: #ffffff79 url(http://sample.loti.jp.testrs.jp/lifestyle/wp-content/uploads/2025/05/spotify.png) no-repeat center/20%;
}

.amazonmusic_btn {
    height: 50px;
    width: auto;
    background: #ffffff79 url(http://sample.loti.jp.testrs.jp/lifestyle/wp-content/uploads/2025/05/amazon_music_unlimited.png) no-repeat center/20%;
}

.youtubemusic_btn {
    height: 50px;
    width: auto;
    background: #ffffff79 url(http://sample.loti.jp.testrs.jp/lifestyle/wp-content/uploads/2025/05/youtube_music_key.png) no-repeat center/20%;
}

.linemusic_btn {
    height: 50px;
    width: auto;
    background: #ffffff79 url(http://sample.loti.jp.testrs.jp/lifestyle/wp-content/uploads/2025/05/line.png) no-repeat center/20%;
}

.wp-block-cover__background,
.wp-block-cover::before {
    pointer-events: none !important;
}

.music-wrapper {
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.music-card {
    cursor: pointer;
}

.notnextonmobile {

    @media screen and (max-width: 480px) {
        /* 480px以下に適用されるCSS（スマホ用） */
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}