@charset "utf-8";

body{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#333;
}

.Player {
    text-align: center;
    position: relative;
}

.Player > iframe {
    width: 90%;
    height:auto;    
    aspect-ratio: 16 / 9;
/* 上限を持たせたかったら
    max-width: 600px;
    display: block;
    margin: auto;
*/
}
/* 狭いブラウザとタブレット向け */
@media (max-width: 1020px) and (min-width: 768px) {
}
/* スマホ向け */
@media (max-width: 767px) {
    .Player > iframe {
        width: 100%;
    }
}

.Player > div{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
/*
    background-color: wheat;
    opacity: 0.8;
*/
    color: yellow;
    font-size: 50pt;
    text-shadow: 3px 3px green;
    width:80%;
}
/* 狭いブラウザとタブレット向け */
@media (max-width: 1020px) and (min-width: 768px) {
/*
    .Player > iframe {
        width: 560px;
        height:310px;    
    }
*/
}
/* スマホ向け */
@media (max-width: 767px) {
    .Player > div {
        font-size: 20pt;
    }
}

/*
.top_image{
    display: flex;
    justify-content: center;
}
*/

.aisatsu{
    width:100%;
    text-align: center;
}


.contents_list{
    margin:0 auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contents_item{
    margin-left: 30px;
    margin-top: 30px;
    background-color: black;
/*
    border-radius: 10%;
    */
}

.card {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width:300px;
    height:150px;
}

.contents_item > a{
    display: block;
    color:white;
    text-decoration: none;
    transition: background-color .25s;
}

.contents_item > a:hover{
    color:gray;
}