body{
    text-align: center;

    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url("yu-yu Mark(click).png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    min-height: 100vh;

    cursor: default;

    padding-bottom: 70px;
}

p{
    color: whitesmoke;
}

h1{
    font-family: Impact, sans-serif;

    font-size: 100px;

    color: whitesmoke;

    margin-top: 50px;

    margin-bottom: -25px;
}

h2{
    font-size: 40px;

    color: whitesmoke;

    margin-top: 70px;
}

.hurigana{
    margin-top: -45px;

    font-size: 25px;
}

.namemark::before{
    content: "";

    display: inline-block;
    width: 35px;
    height: 35px;

    background-image: url("yu-yu Mark(click).png");
    background-size: contain;
    background-repeat: no-repeat;

    margin-right: 4px;
    margin-bottom: -3px;
}

.sns{
    display: flex;

    justify-content: center;

    gap: 30px;

    margin-top: 100px;
}

.logo1{
    width: 200px;
}

.works{
    margin-top: 100px;
}

.logo2{
    width: 250px;

    margin-top: -80px;
}

.logo3{
    width: 250px;
}

h3{
    font-size: 40px;

    color: whitesmoke;

    margin-top: 50px;
}

.irai{
    font-size: 23px;

    margin-top: -30px;
}

h4{
    font-size: 40px;

    color: whitesmoke;

    margin-top: 100px;

    margin-bottom: 0px;
}



.honbun{
    text-align: center;

    font-size: 23px;

    color: whitesmoke;
}

details{
    text-align: left;

    overflow: hidden;

    transition: height 0.5s ease;
}

summary{
    color: whitesmoke;

    cursor: pointer;

    list-style: none;

    display: inline-block;

    margin-left: 1000px;
}

.summary-mark{
    width: 35px;
    height: 35px;

    object-fit: contain;

    margin-right: 4px;
    margin-bottom: -3px;
}

@media (max-width:2400px){
    summary{
    color: whitesmoke;

    cursor: pointer;

    list-style: none;

    display: inline-block;

    margin-left: 800px;
}

.summary-mark{
    width: 35px;
    height: 35px;

    object-fit: contain;

    margin-right: 4px;
    margin-bottom: -3px;
}

}

@media (max-width:2000px){
    body{
    text-align: center;

    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url("Record-P Mark(Black).png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    min-height: 100vh;

    cursor: default;

    padding-bottom: 70px;
}

    summary{
    color: whitesmoke;

    cursor: pointer;

    list-style: none;

    display: inline-block;

    margin-left: 600px;
}

.summary-mark{
    width: 35px;
    height: 35px;

    object-fit: contain;

    margin-right: 4px;
    margin-bottom: -3px;
}

}

@media (max-width:1700px){
    body{
    text-align: center;

    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url("Record-P Mark(Black).png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    min-height: 100vh;

    cursor: default;

    padding-bottom: 70px;
}

    summary{
    color: whitesmoke;

    cursor: pointer;

    list-style: none;

    display: inline-block;

    margin-left: 450px;
}

.summary-mark{
    width: 35px;
    height: 35px;

    object-fit: contain;

    margin-right: 4px;
    margin-bottom: -3px;
}

}

@media (max-width:1300px){
    body{
    text-align: center;

    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url("Record-P Mark(Black).png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    min-height: 100vh;

    cursor: default;

    padding-bottom: 70px;
}

    summary{
    color: whitesmoke;

    cursor: pointer;

    list-style: none;

    display: inline-block;

    margin-left: 300px;
}

.summary-mark{
    width: 35px;
    height: 35px;

    object-fit: contain;

    margin-right: 4px;
    margin-bottom: -3px;
}

}

@media (max-width:1000px){
    body{
    text-align: center;

    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url("Record-P Mark(Black).png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    min-height: 100vh;

    cursor: default;

    padding-bottom: 70px;
}

    summary{
    color: whitesmoke;

    cursor: pointer;

    list-style: none;

    display: inline-block;

    margin-left: 100px;
}

.summary-mark{
    width: 35px;
    height: 35px;

    object-fit: contain;

    margin-right: 4px;
    margin-bottom: -3px;
}

}

@media (max-width:800px){
    body{
    text-align: center;

    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url("Record-P Mark(Black) スマホ.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    min-height: 100vh;

    cursor: default;

    padding-bottom: 70px;
}

    summary{
    color: whitesmoke;

    cursor: pointer;

    list-style: none;

    display: inline-block;

    margin-left: 0px;
}

.summary-mark{
    width: 35px;
    height: 35px;

    object-fit: contain;

    margin-right: 4px;
    margin-bottom: -3px;
}

}

@media (max-width:788px) {
body{
    text-align: center;

    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url("Record-P Mark(Black) スマホ.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    min-height: 100vh;

    cursor: default;

    padding-bottom: 70px;
}
    
.sns{
    display: block;

    justify-content: center;

    gap: 30px;

    margin-top: 100px;
}

.logo1{
    width: 200px;
}

.logo2{
    width: 250px;

    margin-bottom: 82px;
}

.logo3{
    width: 250px;
}

h3{
    font-size: 40px;

    color: whitesmoke;

    margin-top: 50px;
}

.irai{
    font-size: 23px;

    margin-top: -30px;
}

}