.header {
}

.header img {
width: 60vw;
}

.main {
padding: 0 0.8rem;
}

.index-pic {
border-radius: 9999px;
margin: 4.5rem 0;
padding: 0 0.8rem;
width: 100%;
aspect-ratio: 2/3;
}

.index-pic img {
object-fit: cover;
}

.profile {
position: absolute;
margin-top: -8rem;
}

.profile p {
width: fit-content;
padding: 0.1rem 0.4rem;
margin-bottom: 0.5rem;
background: #057d66;
color: #fff;
font-family: "Zen Kaku Gothic Antique", serif;
font-weight: 600;
font-style: normal;
font-size: 0.7rem;
letter-spacing: 0.05em;
}

.about {
width: 100%;
padding: 0 2rem;
}

.about p {
margin-bottom: 1.5rem;
}

@media screen and (min-width: 735px) {

.header {
transform: scale(1);
}

.header img {
width: 25vw;
}

.main {
height: fit-content;
display: flex;
padding: 0 4rem;
}

.top{
justify-content: center;
}

.index-pic {
width: 100%;
margin-top: 5rem;
}

.profile {
margin-top: -60px;
}

.about {
width: 50%;
padding: 10px;
margin: 150px 0;
}

}

@media screen and (min-width: 1135px) {

html, body {
}

.contents {
}

.header img {
width: 100%;
}

.menu {
right: calc((100vw - 1135px) / 2 + 4rem);
}

nav li {
margin: 1rem 0 1rem 2rem;
}

.main {
width: 800px;
margin: auto;
height: fit-content;
}

.top {
}

.index-pic {
height: 600px;
width: 400px;
margin-top: 100px;
padding: 0 1rem;
}

.about {
width: 100%;
padding: 0;
margin: auto 0 auto 4rem;
}

}