/* CSS Document */

/* -------- ヘッダー --------- */
header {
    background-color: black;
    position:fixed;
    width: 100%;
    z-index:1;
    /* padding: 0 10px; */
}

.header_img {
    /* text-align: center; */
    max-width: 350px;
    width: 95%;
    margin:0 auto;
}

.header_img a img {
    width: 100%;
}


/* -------- メインタイトル --------- */
#main {
    padding:20px;
}

.main_title {
    margin-left: auto;
    margin-right: auto;
    display:flex;
    /* padding: 15px; */
    width: 90%;
    max-width: 1250px;
    padding: 0%; 
}


/* -------- ギャラリー --------- */
/* .cf:before,
.cf:after{
    content:"";
    display:flex;
}

.cf:after{
    clear:both;
} */

.cf{
    zoom:1;
}

#content {
    max-width: 750px;
    margin:auto;
    text-align: center;
}

#featured_img {
    margin: 15px;
}


#featured_img img,
#thumb_img div img {
    width: 100%;    
}

#thumb_img {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px;
    margin-top:2%;
    div {
        display: flex;
        flex:1 0 100px;
        max-width:120px;
        cursor: pointer;
        box-sizing: border-box;
    }
}

.thumb_dummy {height:0;}

#thumb_img img:hover {
    opacity: 0.8;
    transition: 0.5s;
}


#thumb_img.cf {
    margin-bottom: 40px;
}

.active{
    border: 2px solid #F00;
    box-sizing: border-box;
}


/* -------- コンテンツテキスト --------- */
#text {
    text-align: center;
    padding: 20px;
    font-family: "Noto Sans SC", sans-serif;

}

.text1 {
    /* font-family: "Noto Sans SC", sans-serif; */
    display: inline-block;
    text-align: left;
    font-size: clamp(15px, 2.4vw, 20px);
    margin-right: auto;
    margin-left: auto;
    max-width: 700px;
    width:100%;
}

.text1 p {
    font-family: "Noto Sans SC", sans-serif;

}

/* -------- Episode --------- */
.section_title {
    display:flex;
    margin: 0 auto;
    margin-top: 80px;
    width: 100%;
    max-width: 800px;   
    align-items:flex-end;
    border: solid 3px black;
    box-sizing: border-box;
    border-left: solid 15px black;
    padding: 10px;
}

.section_title h1
{
    font-size: 40px;
}

.about_text {
    font-family: "Noto Sans SC", sans-serif;
    text-align: left;}

#thumb_img2.cf {
    flex-wrap: wrap;
}

@media screen and (max-width: 700px) {
.section_title h1{
    font-size: 25px;
    }
}

#content2 {
    max-width: 750px;
    margin:auto;
    text-align: center;
}

@media screen and (max-width: 1100px) {
 #content2  {
    width: 100%;

}
}

#featured_img2 iframe {
    max-width: 700px;
    width:95%;
    aspect-ratio: 16 / 9;
    margin-top: 30px;
}

.active2{
    border: 2px solid #F00;
    box-sizing: border-box;
}

#featured_img2 div img,
#thumb_img2 div img {
    width: 100%;   
}

#thumb_img2 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 15px;

    margin-top:2%;
        div {
        /* float:left; */
        /* max-width: 25%; */
        flex: 1 0 25%;
        max-width:230px;
        cursor: pointer;
        box-sizing:border-box;
        margin:5px;
    }
}

#thumb_img2 img:hover {
    opacity: 0.8;
    transition: 0.5s;
}

/* -------- Music Library --------- */
.video iframe {
    max-width: 700px;
    width:100%;
    aspect-ratio: 16 / 9;
}

@media screen and (max-width: 1400px) {
    .main.m_library_title  {
        margin-left: 20px;
        max-width: 100%;
        margin-top: 50px;
        float: left;
        width: 81vw;     
    }
}

@media screen and (max-width: 900px) {
.main.m_library_title h1 {
    font-size: 25px;
}
}   


/* -------- Music Library　アコーディオンメニュー --------- */

.accordion {
    border-bottom: 2px solid #000000;
    max-width:700px;
    width: 90%;
    margin: auto;
}

summary {
    font-family: "Noto Sans SC", sans-serif;
    font-size: clamp(18px, 2.4vw, 25px);
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;   
}

.accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: .5em 2em .5em 0;
    color: #000000;
    font-weight: 600;
    cursor: pointer;   
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::before,
.accordion summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: black;
    content: '';
}

.accordion summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion summary::after {
    transition: rotate .3s;
}

.accordion[open] summary::after {
    rotate: 90deg;
}

.accordion p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: black;
    transition: transform .5s, opacity .5s;
    font-family: "Noto Sans SC", sans-serif;
}

.accordion[open] .text1 p {
    transform: none;
    opacity: 1;
    font-size: clamp(20px, 2.1vw, 25px);
    padding-bottom: 0;
    margin-bottom: 20px;
    margin-top: 20px;

}

.accordion[open] .text2 p {
    transform: none;
    opacity: 1;
    font-size: clamp(15px, 2.4vw, 20px);

}



.video {
    text-align: center;

}


/* @media screen and (max-width: 1600px) {
.accordion {
    justify-content: center;
    max-width: 100%;
    width: 53vw;
    margin-right: auto;
    
}
} */

@media screen and (max-width: 900px) {
.accordion[open] .text1 p {
font-size: 16px;

}

}