*{
    margin: 0;
    padding: 0;
}
@media screen and (max-width: 767px)
{
    /* ここに横幅が767px以下の時に発動するスタイルを記述 */
    html{
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: rgb(255, 255, 255);
        text-align: center;
        font-family: "Times New Roman", serif;
        font-size: 18px;
    }
    body{
        height: 100%;
    }
    header{
        height: 54px;
        width: 100%;
        /* margin: 0 auto; */
        /* padding: 15px 0; */
        text-align: center;
        color: whitesmoke;
        background-color: black;
        position: fixed ;
    
    }
    header  img{
        margin-top: 12px;
        height: 27px;
    }
    img{
        pointer-events: none;
    }
    .toppicture{
        padding: 72px 0 14px 0;
    }
    .padding{
        padding-bottom: 27px;
    }

    h2{
        margin-top: 27px;
        font-size: 27px;
        text-align: center;
        font-weight: 500;
    }
    .horizontal-line{
        margin: auto;
        margin-bottom: 20px;
        width: 360px;
        /* margin: 0 20% clamp(4px, 2%, 28px) 20%; */
    }
    .contentbox{
        margin: auto;
        margin-bottom: 14px;
        /* padding: 10px, 20%; */
        box-sizing: border-box;
        width: 360px;
        height: 120px;
        border: none;
    }
    .contentbox a {
        color: inherit;
        text-decoration: none;
    }
    .contentbox table{
        margin: 22px 0;
        width: 100%;
        height: 120px;
        border-collapse: collapse;
        border-spacing: 0;
        background-color: whitesmoke;
    }

    table.news tr:nth-child(1){
        font-size: 20px;
    }
    table.news tr:nth-child(2){
        text-align: right;
        font-size: 10px;
    }

    table.schedule tr:nth-child(1) td:nth-child(1){
        width: 20%;
    }
    table.schedule tr:nth-child(1) td:nth-child(2){
        width: 50%;
        font-size: 12px;
    }
    table.schedule tr:nth-child(2) td:nth-child(1){
        font-size: 20px;
    }
    table.schedule tr:nth-child(3) td:nth-child(1){
        font-size: 10px;
    }
    table.schedule tr:nth-child(4) td:nth-child(1){
        font-size: 10px;
    }
    font.year{
        font-size: 14px;
    }
    font.date{
        font-size: 28px;
    }
    font.day{
        font-size: 14px;
    }
    
    .newspicture{
        width: 360px;
    }
    .newstitle{
        font-size: 24px;
    }
    .newsdate{
        font-size: 10px;
    }
        
    .eventpicture{
        width: 360px;
    }
    .name{
        font-size: 20px;
    }
    .live{
        font-size: 24px;
    }
    .date{
        font-size: 20px;
    }
    .place{
        font-size: 16px;
    }
    .map{
        font-size: 12px;
    }
    .time{
        font-size: 16px;
    }
    h1.info{
        padding: 40px 0 0 0;
        font-size: 24px;
    }
    div.info{
        margin: auto;
        /* padding: 0 30%; */
        text-align: center;
    }
    ul.info{
        display: inline-block;
    }
    li.info{
        list-style-type: disc;
        text-align: left;
    }
    
    footer{
        margin-top: 40px;
        width: 100%;
        text-align: center;
        font-family: 'Times new roman', serif;
        background-color: black;
        color: whitesmoke;
    }
    .footer{
        position: sticky;
        top: 100vh;
        background-color: black;
        padding: 20px 0;
        font-size: 10px;
    }
    .footer-logo{
        width: 60px;
    }
}
    
@media screen and (min-width: 767px)
{
    /* ここに横幅が767pxより大きい時に発動するスタイルを記述 */
    html{
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: rgb(255, 255, 255);
        text-align: center;
        font-family: "Times New Roman", serif;
        font-size: 24px;
    }
    body{
        height: 100%;
    }
    header{
        height: 72px;
        width: 100%;
        /* margin: 0 auto; */
        /* padding: 15px 0; */
        text-align: center;
        color: whitesmoke;
        background-color: black;
        position: fixed ;
    
    }
    header  img{
        margin-top: 18px;
        height: 36px;
    }
    img{
        pointer-events: none;
    }


    h2{
        margin-top: 36px;
        font-size: 36px;
        text-align: center;
        font-weight: 500;
    }
    .horizontal-line{
        margin: auto;
        margin-bottom: 28px;
        width: 720px;
        /* margin: 0 20% clamp(4px, 2%, 28px) 20%; */
    }
    .contentbox{
        margin: auto;
        margin-bottom: 20px;
        /* padding: 10px, 20%; */
        box-sizing: border-box;
        width: 720px;
        height: 160px;
        border: none;
    }
    .contentbox a {
        color: inherit;
        text-decoration: none;
    }
    .contentbox table{
        margin: 30px 0;
        width: 100%;
        height: 160px;
        border-collapse: collapse;
        border-spacing: 0;
        background-color: whitesmoke;
    }

    table.news tr:nth-child(1){
        font-size: 28px;
    }
    table.news tr:nth-child(2){
        text-align: right;
        font-size: 15px;
    }

    table.schedule tr:nth-child(1) td:nth-child(1){
        width: 20%;
    }
    table.schedule tr:nth-child(1) td:nth-child(2){
        width: 50%;
        font-size: 18px;
    }
    table.schedule tr:nth-child(2) td:nth-child(1){
        font-size: 28px;
    }
    table.schedule tr:nth-child(3) td:nth-child(1){
        font-size: 15px;
    }
    table.schedule tr:nth-child(4) td:nth-child(1){
        font-size: 15px;
    }
    font.year{
        font-size: 20px;
    }
    font.date{
        font-size: 40px;
    }
    font.day{
        font-size: 20px;
    }
    
        
    .toppicture{
        padding: 120px 0 18px 0;
    }
    .padding{
        padding-bottom: 36px;
    }

    .newspicture{
        width: 500px;
    }
    .newstitle{
        font-size: 40px;
    }
    .newsdate{
        font-size: 15px;
    }


    .eventpicture{
        width: 500px;
    }
    .name{
        font-size: 30px;
    }
    .live{
        font-size: 40px;
    }
    .date{
        font-size: 30px;
    }
    .place{
        font-size: 24px;
    }
    .map{
        font-size: 15px;
    }
    .time{
        font-size: 24px;
    }
    h1.info{
        padding: 54px 0 0 0;
        font-size: 30px;
    }
    div.info{
        margin: auto;
        /* padding: 0 30%; */
        text-align: center;
    }
    ul.info{
        display: inline-block;
    }
    li.info{
        list-style-type: disc;
        text-align: left;
    }
    
    footer{
        margin-top: 54px;
        width: 100%;
        text-align: center;
        font-family: 'Times new roman', serif;
        background-color: black;
        color: whitesmoke;
    }
    .footer{
        position: sticky;
        top: 100vh;
        background-color: black;
        padding: 30px 0;
        font-size: 15px;
    }
    .footer-logo{
        width: 80px;
    }
    
}





h2.info{
    font-size: clamp(20px, 4vw, 40px);
}
h3.info{
    font-size: clamp(15px, 3vw, 30px);
}

ul.detail{
    display: inline;
}
li.detail{
    list-style-type: none;
    text-align: center;
}

a img{
    pointer-events: all;
}
.toppadding{
    padding-top: clamp(48px, 8vw, 100px);
}




.linkicon{
    width: clamp(10px, 5%, 70px);
    margin: 0 clamp(5px, 1vw, 15px);
}

.flexbox{
    display: flex;
}

.profile-picture{
    padding: clamp(12px, 2vw, 25px) 0 clamp(24px, 4vw, 50px) 0;
    width: min(80%, 800px);
}