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

body{

font-family:Georgia, serif;

background:#fff;

/* ドット柄 */
background-image: radial-gradient(#d8d8d8 1.5px, transparent 1.5px);
background-size:26px 26px;

color:#222;
}

header{

height:80px;

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

padding:0 80px;

background:white;

border-bottom:1px solid #ddd;
}

nav ul{

display:flex;

gap:40px;

list-style:none;
}

nav a{

text-decoration:none;

color:#333;

position:relative;

transition:.3s;
}

nav a:hover{

color:black;
}

nav a::after{

content:"";

position:absolute;

bottom:-5px;

left:0;

width:0;

height:2px;

background:black;

transition:.3s;
}

nav a:hover::after{

width:100%;
}

.home{

height:90vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;
}

.home h2{

font-size:90px;

font-weight:300;

letter-spacing:5px;
}

.home p{

margin-top:20px;

color:#666;
}

.home-photo{
    width:250px;
    height:250px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:50px;

    border:5px solid #fff;

    box-shadow:0 8px 25px rgba(0,0,0,.15);
}
.profile{

width:80%;

margin:100px auto;

text-align:center;
}

.photo{

width:500px;

height:350px;

object-fit:cover;

filter:grayscale(100%);
}

.works{

width:80%;

margin:auto;

padding:80px 0;
}

.item{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:120px;
}

.reverse{

flex-direction:row-reverse;
}

.item img{

width:400px;

height:300px;

object-fit:cover;

filter:grayscale(100%);
}

.item h2{

font-size:80px;
}

.hobby{

display:flex;

justify-content:space-evenly;

padding:100px;
}

.circle img{

width:250px;

height:250px;

border-radius:50%;

object-fit:cover;

filter:grayscale(100%);
}
.profile{

width:70%;
margin:auto;
padding:80px 0;

text-align:center;
}

.profile h2{

text-align:left;
margin-bottom:30px;
}

.profile-img{

width:550px;
height:350px;

object-fit:cover;
border-radius:20px;

filter:grayscale(100%);
}

.slider{

margin:30px 0;
}

.slider span{

display:inline-block;

width:10px;
height:10px;

margin:5px;

border-radius:50%;

background:#999;
}

.profile-text{

width:600px;

margin:auto;

line-height:2;
}
.work{

width:80%;
margin:auto;

padding:80px 0;
}

.work-item{

display:flex;

justify-content:space-between;

align-items:center;

margin:120px 0;
}

.reverse{

flex-direction:row-reverse;
}

.number{

font-size:90px;

font-family:Georgia;
}

.work img{

width:350px;

height:350px;

object-fit:cover;

filter:grayscale(100%);
}
.favorite{

display:flex;

justify-content:space-around;

padding:120px 0;
}

.favorite-box{

text-align:center;
}

.favorite img{

width:220px;

height:220px;

border-radius:50%;

object-fit:cover;

filter:grayscale(100%);
}

.favorite h3{

margin-top:30px;

font-weight:300;
}

.favorite::after{

content:"";

position:absolute;

left:10%;

width:80%;

height:1px;

background:#aaa;

margin-top:350px;
}
.profile{

    min-height:100vh;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:80px 10%;
}

.profile h2{

    align-self:flex-start;

    font-size:40px;

    font-weight:300;

    margin-bottom:40px;
}

.profile-img{

    width:600px;
    height:380px;

    object-fit:cover;

    border-radius:20px;

    filter:grayscale(100%);

    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.slider{

    margin:30px 0;
}

.slider span{

    display:inline-block;

    width:8px;
    height:8px;

    background:#999;

    border-radius:50%;

    margin:5px;
}

.profile-text{

    width:650px;

    line-height:2;

    text-align:center;

    color:#666;
}
.hobby img{

border-radius:50%;

transition:.4s;
}

.hobby img:hover{

transform:translateY(-8px);
}

.work img:hover{

transform:scale(1.03);

filter:grayscale(0%);
}
/* ---------- Work ---------- */

.work{
    width:80%;
    margin:auto;
    padding:80px 0;
}

.work-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:100px 0;
}

.reverse{
    flex-direction:row-reverse;
}

.work h2{
    font-size:90px;
    font-weight:300;
}

.work img{
    width:420px;
    height:320px;
    object-fit:cover;
    border-radius:20px;
    filter:grayscale(100%);
    transition:.4s;
}

.work img:hover{
    transform:scale(1.03);
    filter:grayscale(0%);
}
/* ---------- Hobby ---------- */

.favorite{
    width:90%;
    margin:auto;
    padding:100px 0;

    display:flex;
    justify-content:space-around;
    align-items:center;
}

.favorite-card{
    text-align:center;
}

.favorite-card img{
    width:220px;
    height:220px;
    border-radius:50%;
    object-fit:cover;
    filter:grayscale(100%);
    transition:.4s;
}

.favorite-card img:hover{
    transform:translateY(-10px);
    filter:grayscale(0%);
}

.favorite-card h3{
    margin-top:25px;
    font-weight:300;
    letter-spacing:2px;
}
.slider{
    margin:40px 0;
}

.slider img{

    width:550px;
    height:350px;

    object-fit:cover;

    border-radius:20px;

    

    transition:0.6s;
}

.dots{

    text-align:center;

    margin-top:20px;
}

.dots span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#bbb;

    display:inline-block;

    margin:6px;
}

.dots span.active{

    background:#222;
}
.work a{
    display:block;
}

.work a img{

    transition:.4s;
}

.work a:hover img{

    transform:scale(1.05);

    opacity:.8;
}
.detail{

width:80%;

margin:auto;

padding:80px 0;

text-align:center;
}

.detail img{

width:700px;

max-width:100%;

margin:50px 0;

border-radius:20px;


}

.detail p{

width:700px;

max-width:100%;

margin:auto;

line-height:2;
}

.back{

display:inline-block;

margin-top:50px;

text-decoration:none;

color:#000;

border:1px solid #000;

padding:12px 30px;

transition:.3s;
}

.back:hover{

background:#000;

color:#fff;
}
.site-link{
    margin:40px 0;
}

.site-link a{
    display:inline-block;
    padding:12px 28px;
    background:#000;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    transition:.3s;
}

.site-link a:hover{
    background:#555;
}
.favorite-card a{
    display: inline-block;
}

.favorite-card img{
    transition: .3s;
}

.favorite-card a:hover img{
    transform: scale(1.05);
    opacity: .8;
}
.favorite-detail{
    width:90%;
    margin:60px auto;
    text-align:center;
}

.favorite-detail h2{
    margin-bottom:40px;
    font-size:40px;
    letter-spacing:2px;
}

.gallery{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
}

.gallery img{
    width:100%;
    aspect-ratio:16 / 9;   /* 横長 */
    object-fit:cover;
    border-radius:15px;
    transition:.3s;
}

.gallery img:hover{
    transform:scale(1.03);
}
/* ---------- スマホ対応 ---------- */
@media screen and (max-width: 768px){

    nav ul{
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .home,
    .profile,
    .work,
    .favorite{
        flex-direction: column;
        text-align: center;
    }

    .gallery{
        grid-template-columns: 1fr;
    }

    .gallery img{
        width:100%;
        height:auto;
    }

    .slider img{
        width:100%;
        height:auto;
    }

    .work img{
        width:100%;
        height:auto;
    }

    .home-photo{
        width:180px;
        height:180px;
    }

    h1{
        font-size:32px;
    }

    h2{
        font-size:28px;
    }

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

    h1{
        font-size:32px;
    }

    h2{
        font-size:24px;
    }

    p{
        font-size:14px;
    }

    nav ul li a{
        font-size:16px;
    }

    .home-text h2{
        font-size:28px;
    }

    .home-text p{
        font-size:15px;
        line-height:1.8;
    }

    .profile-text p{
        font-size:15px;
        line-height:1.8;
    }

    .back{
        font-size:16px;
    }

}
/* ------------------------------
   スマホ対応
------------------------------ */
@media screen and (max-width: 768px){

    /* タイトル */
    h1{
        font-size: 32px;
    }

    h2{
        font-size: 24px;
    }

    h3{
        font-size: 18px;
    }

    /* 本文 */
    p{
        font-size: 14px;
        line-height: 1.8;
    }

    /* メニュー */
    nav ul li a{
        font-size: 16px;
    }

    /* Home */
    .home-text h1{
        font-size: 38px;
    }

    .home-text h2{
        font-size: 22px;
    }

    .home-text p{
        font-size: 14px;
    }

    /* Profileページ */
.profile{
    display: flex;
    flex-direction: column;   /* 縦並び */
    align-items: center;
}

.profile-img{
    width: 280px;      /* 今より大きく */
    height: 280px;
    object-fit: cover;
    margin-bottom: 30px;
}

.slider{
    width: 280px;
    height: 280px;
    margin-bottom: 30px;
}

#slide{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-text{
    width: 90%;
    max-width: 350px;
    text-align: left;
    margin: 0 auto;
}
.profile-text h2{
    text-align: center;
    margin-bottom: 20px;
}

.profile-text p{
    text-align: left;
    line-height: 1.8;
}
.profile-text p{
    font-size: 15px;
    line-height: 1.8;
}
    /* Work・Favorite */
    .work-number{
        font-size: 24px;
    }

    .back{
        font-size: 16px;
    }
}
h1{
    font-size: clamp(32px, 5vw, 60px);
}

h2{
    font-size: clamp(22px, 3vw, 40px);
}

p{
    font-size: clamp(14px, 1.2vw, 18px);
}

nav a{
    font-size: clamp(14px, 1.2vw, 18px);
}
.profile-text{
    width:320px;
    margin:30px auto 0;
}

.profile-text h2{
    text-align:center;
    margin-bottom:20px;
}

.profile-text p{
    text-align:left;
    line-height:2;
}