@charset "UTF-8";

html{font-size: 100%;}
a{text-decoration: none;}
img{max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 8px rgb(198, 200, 169);}
body {color: #321c0b;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    line-height: 1.5;}
li{list-style: none;}
/*header*/

.top{height: 250px;
    background-position:right center;
    background-size: cover;
    max-width: 1080px;
    width: 100%;}
.top-img{background-image: url(../image/portforio.jpg);}

.nav{list-style: none;
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;}
.nav li{border-bottom: solid thin #533b0dde;
    padding: 1rem .5rem;}
.nav a{color: #6e4e11de;
    display: block;
    text-align: center;
    font-size: 1.25rem;}
.nav a:hover{color:#c1a07a}

/*2~5.html用 main*/
.banner-main{ margin: 0 1.5rem 5rem;}
h2{justify-content: center;
    padding-bottom: 1.5rem;
    color: #6e4e11de;
    font-size: 1.5rem;}
.banner{max-width: 400px;
    text-align: center;
    margin: 0 auto;}

.list{padding:0 1.5rem .5rem;}
.item{border:#6e532128 2px;
    border-style: none solid solid none;
    padding: 1rem;
    margin-top: 1.5rem;
    flex-direction: column;}
li[data-stock="1"]{font-size: 1.3rem;
    color: #6e4e11de;
    font-weight: 400;
    text-align: left;}
li[data-stock="2"]{padding:.5rem 1rem 0 ;}


/*section*/
.more{margin: 3rem 0;}
h3{text-align: center;
    color: #6e4e11de;
    position: relative;}
.gallery{display: flex;
    margin-top: 2rem;
    justify-content: center;}
.gallery img{margin: 0 .5rem;
    height: 100px;
    object-fit: cover;}
.point{text-align: center;
    margin-top: 2rem;
    color: #6e4e11de;}


/*profiel*/
.profiel{padding: 0 1rem;}
.profiel,.why,.ability,.skill,.hobby{margin:0 1.85rem 2rem;
    background-color: #f3e9d77a;
    border-radius: 16px;}
.margin{margin-top: 1rem;}
main ul{display: flex;
    justify-content: space-between;
    line-height: 1.05;
    padding: .25rem 0;}
li[data-stock="3"]{color: #6e4e11de;
    font-size: .95rem;
    width: 32%;;}
.now,li[data-stock="4"],.why p,.ability li,.skill,.hobby{font-size: .85rem;;}
.now{padding: 1.5rem 0;
    text-align: center;}
li[data-stock="4"]{width: 69%;}

.why,.ability,.skill,.hobby{padding: 0 1rem 1.5rem;
    margin-bottom: 2rem;}
.why p{color: #321c0b;
    text-align:justify;
    padding: 1rem 1rem 1rem;
    line-height: 1.3;}
.ability ul,.hobby ul,.skill table{padding: 1rem 1rem 0;
    margin: auto;
    justify-content: center;}
.ability li,.hobby li{text-align: left;
    justify-content: center;}

.skill th{text-align: left;
    padding-right: 3rem;
    color: #6e4e11de;}


/*footer*/
h1{font-size: 2.5rem;
    text-align: center;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 700;
    font-family: "PT Sans Narrow", sans-serif;
    color: #6e4e11de;}
.icon{display: flex;}
.icon1{width: 32px;height: 32px;}
.copyright{margin-top: 2.5rem;
    padding:.5rem 0 2rem;
    text-align: center;
    background-color: #cbb58cde;}


/*デスクトップ版*/
@media(min-width:650px){

    .header{display: flex;
        justify-content: space-between;}
    .top{background-position:right ;
        height: 200px;}
    .nav{right: 0;
        width: 12%;
        flex-direction: column;
        position: fixed;
        margin-top: 1.5rem;
        object-fit: cover;}
    .nav a{font-size: 1.25rem;}

    .header,.banner-main,#two{width: 85%;}

    .banner-main{margin-bottom: 3rem;
        display: flex;;}
    h2{font-size: 1.5rem;
        padding:1rem 0 1rem ;
        text-align: center;}
    .banner{margin-left: 0;}

    .list{text-align: center;
        margin: 2rem 0;}
    .item{display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 1rem;
        padding-right: 0;
        padding-bottom: 2rem;}
    li[data-stock="1"]{width: 30%;
        font-size: 1.2rem;
        margin: 0;}
    li[data-stock="2"]{width: 70%;
        font-size: .8rem;
        text-align: justify;
        padding-right: .5rem;
        padding-top: 0 ;
        margin-left: 1rem;}

    .gallery img{height: 150px;
        margin: 0 1rem;}    
    h3,section p{font-size: 1.5rem;}

    /*profiel*/
    #two{display: flex;
        justify-content: space-between;
        margin: 1rem 0 0 .8rem;}
    .profiel{width: 40%;}
    .why{width: 58%;}
    .profiel,.why{margin: 3px ;
        padding: 1rem;}

    #three{display: flex;
        margin-top: 2rem;}
    .skill{padding:0 0 1.5rem;}
    .ability,.hobby{padding: 0 1.5rem 1.5rem;}
    .ability,.skill,.hobby{width: 40%;
        margin: 0 .5rem 2rem;}



    /*footer*/
    h1{text-align: center;}
    .copyright{margin: 0;
        padding:  0;}
    
}