/* ---------------------------- */
/* メインページ                  */
/* ---------------------------- */

/* import */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;700;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

/* common */
html {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight:700;
    line-height:2.6rem;
    background-color:#f1f1f1;
}
body {
    max-width:95%;
    height:100%;
    background-color:#ffffff;
    color:#8f353b;
    margin:0 auto;

    box-shadow: 0px 0px 4.4px 1.2px #cccccc;
}
h1 {
    position:sticky;
    top:0px;
    z-index:100;
    padding:1.6rem 3rem 1.5rem;
    width:100%;
    border-top:.5rem solid #b3424a;

    font-size:1.8rem;
    font-weight:900;
    background-color:#fbf0ff;
    line-height:1.8rem;
    opacity:.8;
    box-shadow: 0px 0px 4.4px 1.2px #cccccc;

    user-select:none;
}
h1 p {
    background:linear-gradient(transparent 40%, #f1ff34 60%);
    width:fit-content;
    text-align:center;
}
h1::before {
    height:100px;
    position:relative;
    top:-1px;
    left:2px;
    margin: 0 8px 0 0;
}
hr{
    color:#cccccc;
    width:86%;
    margin:0 auto;
}

/* list */
.contents-erea {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
a {
    display:block;
    text-decoration:underline;
    padding-left:.5rem;
    margin:.6rem;
    width:calc(100% / 4.2);
    min-width:400px;
    height:124px;

    font-size:1.1rem;
    background:#ffffff;
    border:1px solid #e7e7e7;
    border-radius:6px;
    box-shadow: 1px 1px 6px 2.2px #f3f3f3;
}
a:hover {
    text-decoration:none;
    background-color:#505050;
    color:#ffffff;
    box-shadow:none;
    transform:scale(.99, .99);
    transition-duration:.4s;
}

a div span {
    display: inline-block;
    background:#ffffff;
    color:#555;
    border:solid 2px #a5a5a5;

    font-weight:700;
    font-size:.8rem;
    line-height:1.6rem;

    padding:0 .8rem 0 .2rem;
    border-radius:.2rem;
    margin-left:.4em;
}
.tag-movie {
    color:#b3424a;
}
.tag-interactive {
    color:#789710;
}
.tag-quiz {
    color:#35357d;
}
i{
    padding:0 .3rem;
}

footer {
    display:flex;
    flex-wrap:wrap-reverse;
    flex-direction:row;
    justify-content: space-between;

    font-weight:200;
    font-size:.75rem;
    
    color:#3e3e3e;
    background-color:#f1f1f1;
    box-shadow: 0px 0px 4.4px 1.2px #cccccc;

    user-select:none;
}
footer>span:last-child{
    padding-right:.8rem;
}

/* 非活性用処理 */
.disenable {
	background-color:#C1C1C1;
	color:#ffffff;
	box-shadow:none;
	transform:scale(.99, .99);
	cursor:not-allowed;
	text-decoration:none;
}

/* Tablet */
@media screen and (max-width:1080px){
    body {
        max-width:100%;
    }
} 
/* SP */
@media screen and (max-width:768px){
    h1 {
        font-size:1.2rem;
        padding:.5rem;
    }
    h1 p {
        background: linear-gradient(transparent 60%, #f1ff34 40%);
    }   
    .contents-list {
        width:100%;
    }
    footer {
        align-items: center;
        justify-content:center;
        flex-direction:column;
        line-height:1.6rem;
    }
}