*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: "Times New Roman", serif;
    background:#fff;
    color:#000;
}

/* Header */

header{
    width:100%;
    height:70px;
    position:fixed;
    top:0;
    left:0;
    background:#fff;
    z-index:100;

}

.header-inner{
    width:80%;
    height:100%;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

nav ul{

    display:flex;
    list-style:none;
    gap:40px;
}

nav a{

    text-decoration:none;
    color:black;
    font-size:18px;
}

nav a:hover{

    color:gray;
}

/* Top */

.top{
    width:80%;
    height:100vh;
    margin:auto;

    display:flex;
    align-items:center;

    padding:0;
}

.top h1{

    font-size:180px;
    font-weight:normal;
}

/* 共通 */

section{

    width:80%;
    margin:auto;
    padding:120px 0;
}

h2{

    font-size:60px;
    margin-bottom:60px;
    font-weight:normal;
}

/* Profile */

.profile-box{

    display:flex;
    align-items:center;
    gap:80px;
}

.profile-img{
    width:450px;
}

.profile-img img{

    width:100%;
    height:auto;
    object-fit:contain;
}

.profile-text{

    line-height:1.6;
    font-size:28px;
}

.profile-text p{
    margin-bottom:35px;
}

.profile-text strong{
    font-size:42px;
    font-weight:700;
}

.work-list{

    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap: 80px;
    row-gap: 40px;
}

.work{
    width:100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;
}

/* 左上 */
.work-list .work:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

/* 左下 */
.work-list .work:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

/* 右中央 */
.work-list .work:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
}

.work img,
.work video{

    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.vertical img,
.vertical video{
    width: auto;
    height: 30%;      /* 好きな大きさに調整 */
    object-fit: contain;
}

.vertical{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.vertical img,
.vertical video{
    width: auto;
    height: 30%;
}