Newer
Older
2022-K.Ryuei / kadai1.css
@Ryuei Ryuei on 29 Jul 2022 2 KB 変更 kadai1.css
html{
    font-size: 62.5%;
}

@media screen and (max-width: 1200px) {
   
} 

@media screen and (max-width: 440px) {
    body{
        background-size: contain;
    }
    .flex-top {
        flex-direction: column;
    }
    
    .flex-bottom {
        flex-direction: column;
    }
    .box-activity{
        text-align: center;
    }
    .box-member{
        order: 2;
        text-align: center;
        padding-top: 5rem;
    }
    .box-qr{
        order: 3;
        text-align: center;
        padding-top: 8rem;
    }

    p.gmail{
        font-size: 0.2rem;
        color: #066cc6;
    }
}
body{
    background-image: url("bg.jpg");
    background-attachment: scroll;
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 30rem;
}

p.overview,div.addres p{
    font-family: 'Kiwi Maru', serif;
}

div.box-activity p,div.box-member p{
    font-family:inherit;
}

p.member{
    margin:15rem 4rem 0;
    color: #ff444f;
    text-align: center;
    font-size: 6rem;
    font-family: ニコ角,'RocknRoll One', sans-serif;
}

span{
    font-size: 5rem;
}

h1{
    margin: 0 auto;
    text-align: center;
    font-size: 10rem;
    letter-spacing: 1.1rem;
    font-family: CHI_Birman_kadomaru_free, 'Potta One', cursive;
}

p.overview{
    margin: 0 4rem 5rem;
    text-align: center;
    font-size: 3rem;
}

div.flex-top{
    display: flex;
    justify-content: center;
}

p.meeting img{
    height: 30rem;
    width: 40rem;
    margin-right: 2rem;
}

p.syuzai img{
    height: 30rem;
    width: 40rem;
    margin-left: 2rem;
}

div.flex-bottom{
    display: flex;
    justify-content: center;
    margin-top:5rem; 
}

div.box-activity{
    margin-right: 5rem;
}

div.box-activity div::before {
    content: "";
    display: inline-block;
    width: 6rem;
    height: 7.3rem;
    background: url(diamond.jpg) no-repeat;
    background-size: contain;
    margin-right: 1rem;
    vertical-align: middle;
}
div.box-activity p{
    font-size: 2rem;
    margin: 0;
    padding-left: 6rem;
}

div.box-activity div{
    font-size: 4rem;
    padding: 0;
    margin:0;
}

div.box-member{
    margin-right: 5rem;
}




div.box-member div::before {
    content: "";
    display: inline-block;
    width: 6rem;
    height: 7.3rem;
    background: url(diamond.jpg) no-repeat;
    background-size: contain;
    margin-right: 1rem;
    vertical-align: middle;
}

div.box-member p{
    font-size: 2rem;
    margin: 0;
    padding-left: 6rem;
}

div p.large{
    font-size: 4rem;
}
div.box-member div{
    font-size: 4rem;
    padding: 0;
    margin: 0;
}

div.box-qr{
    margin-left: 6rem;
}


p.qr img{
    height: 20rem;
    width: 20rem;
}

div.address{
    margin: 15rem 0 30rem;
}

p.box,p.gmail{
    text-align: center;
    font-size: 2rem;
    padding:0;
    margin:0;
}