@charset "utf-8";

html {
    scroll-behavior: smooth;
}

body {
    background-color: #004150;
}

header {
    /* background: url(../images/mila-young-BX0Mm9fazTI-unsplash.jpg) no-repeat right center/cover; */
    background-color: white;
}

.innerWrap {
    /* 後で消す */
    /* border: 2px solid red; */
    /* ここまで */
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 20px 10px;
}

/* header .innerWrap {
    height: 650px;
} */

main h2 {
    /* text-align: center; */
    font-size: 84px;
    font-weight: bold;
    padding-bottom: 15px;
    margin-bottom: 30px;
    text-shadow: 3px 4px 5px #f87731;
    letter-spacing: 0.25em;
    color: #ffffff;
    /* border-bottom: 2px solid black; */
}

/*タイトルの横に線をつける ーーーーーーーーーーーーー*/

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

::before,
::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;

}


.title ::before,
.title ::after {
    content: "";
    display: inline-block;
    border: 2px solid black;
    width: 300px;
    margin-bottom: 28px;
}

.profile .title ::before,
.profile .title ::after,
.works .title ::before,
.works .title ::after,
.skills .title ::before,
.skills .title ::after {
    border: solid #ffffff;
}




.title ::before {
    margin-right: 25px;
}

.title ::after {
    margin-left: 5px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

h3 {
    font-size: 48px;
    /* margin-top: 24px; */
    text-align: center;
}

/* 仮設定 画像サイズ */
.profile img {
    width: 300px;
    height: 300px;
}

.webList img {
    width: 348px;
    height: 165px;
    border-radius: 7px 7px 0 0;
}

.bannerList img,
.logoList img {
    width: 235px;
    height: 235px;
    border-radius: 7px;
    border: 2px solid #000000;

}



.skills .skillsList1 img {
    width: 80px;
    height: 80px;

}

.skills .skillsValue img {
    width: 207px;
    height: 46px;
}

/* 仮設定　ここまで */

/* header */

.logo {
    position: absolute;
    left: 998px;
    top: 85px;
}

.logo2 {
    position: absolute;
    left: 206px;
    top: 213px;
}

.logo img {
    width: 800px;
    height: 648px;
}

.logo2 img {
    width: 1100px;
    height: 250px;
}

header {
    position: relative;
}

.headerNav {
    display: flex;
    font-size: 24px;
    color: #ffffff;
    justify-content: center;
    /* border-top: 3px solid rgba(80, 80, 80, 0.693); */
    /* border-bottom: 3px solid rgba(80, 80, 80, 0.693); */
    background-color: #004150;
    height: 80px;
    width: 100%;
    /* padding-top: 10px; */
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
}

.headerNav li {
    margin: 5px 50px 0;
    padding: 20px 30px;
    font-weight: 800;
}

.headerNav li a:hover {
    /* text-decoration: underline solid black 2px; */
    color: #000000;
}



header h1 {
    font-size: 100px;
    padding-top: 68px;
}

.headerTop {
    height: 570px;
}



/* profile */
.profileArea {
    display: flex;
    justify-content: space-evenly;
    padding: 10px 0 0 180px;
    margin-top: 45px;
    margin-bottom: 150px;
}

.profileList {
    width: 530px;
    /* padding: 5px;
    margin-top: 35px;
    margin-left: 100px; */
}

.profileList h3 {
    /* font-size: 36px; */
    font-family: "Zen Antique Soft", serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 24px;
    color: #ffffff;
}

.profileList p {
    margin: 10px 0;
    color: #ffffff;
}

.imgPhoto {
    padding: 20px;
    margin-right: 30px;
}

time {
    font-weight: 450;
    font-size: 26px;
    color: #ffffff;
}

/* works */

/* .works {
    margin-bottom: 150px;
} */

.works h3 {
    margin-top: 80px;
    margin-left: 20px;
    padding: 5px 10px;
    display: inline-block;
    
    color: #ffffff;
    
    
   
}

.webList,
.bannerList,
.logoList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 0 auto ;
}

.webList li,
.bannerList li,
.logoList li {
    margin: 50px 15px 0;
}

.webList p,
.bannerList p,
.logoList p {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
}

.worksPg {
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: 10px 12px 10px 0 #096074;
    background-color: #ffffff;
}

.bannerPg,
.logoPg {
    width: 348px;
}



/* skills */
.skills {
    margin-bottom: 80px;
}

.skillsList {
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
    margin: 50px auto;
    background-color: rgba(143, 143, 143, 0.596);
    border-radius: 10px;
    border: 2px solid white;
}

.skillsList li {
    margin: 16px 8px;
    max-width: 100%;
}

.skillsList li img {
    width: 150px;
    margin: 0 auto;
}

.skillsList li p {
    text-align: center;
    /* margin-bottom: 10px; */
    margin-top: 16px;
    color: #ffffff;
    max-width: 207px;
}

.skillsList h3 {
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
}



/* contact */
#contact {
    background-color: white;
    border-radius: 25px;
}

.contact h2 {
    color: #000000;
    text-shadow: 3px 4px 5px #8d8d8d;
}

.contactList {
    width: 450px;
    padding-top: 35px;
    padding-bottom: 50px;
    margin: 0 auto;
    margin-top: 15px;
}

input[type="text"],
input[type="email"],
textarea {
    border: 1px solid #cccccc;
    background-color: #ffffff;
    width: 100%;
    margin-top: 5px;
    padding: 4px 8px;
}

input[type="text"],
input[type="email"],
textarea,
input[type="submit"] {
    border-radius: 3px;
}

textarea {
    height: 100px;
    margin-bottom: 30px;
}

form>p {
    line-height: 1.5;
    margin-bottom: 20px;
}

.submitBtn {
    text-align: center;
}

.submitBtn :hover {
    background-color: #16829b;
}

input[type="submit"] {
    background-color: #004150;
    color: #ffffff;
    padding: 18px 80px;
    box-shadow: 2px 3px 5px 0 rgb(83, 83, 83);
}



/* top ボタン */
.topBtnArea {
    padding-left: 1628px;
    margin-top: -50px;
}

.topBtn {
    background-color: #40D800;
    border-radius: 100%;
    width: 113px;
    height: 113px;
    padding: 37px 24px;
    box-shadow: 0 4px 4px #95c97f;
}

.topBtn p {
    text-align: center;
    font-size: 32px;
    font-weight: 1000;
    /* color: #ffffff; */
}

.topBtn p :hover {
    color: #ffffff
    /* color: #000000; */
    /* transition-property: color;
    transition-duration: 0ms;
    transition-timing-function: ease-in;
    transition-delay: 0ms; */
}

/* footer */

footer p {
    padding: 15px 10px 20px;
    text-align: center;
    color: #ffffff;
}

/* subPage--------------------------------------------------------------------------------------------*/

#sitePage main,
#logoPage main {
    background-color: #ffffff;
}

#sitePage header,
#logoPage header {
    height: 300px;
}

#sitePage header p,
#logoPage header p {
    text-align: center;
    margin-top: 60px;
}

#sitePage h1,
#logoPage h1 {
    font-size: 160px;
    font-weight: bold;
    margin: 75px 0 30px;
    padding: 30px 0;
}


#sitePage h2,
#logoPage h2 {
    text-align: center;
    color: #000000;
    /* text-shadow: 3px 4px 5px #7c7c7c; */
    text-shadow: none;
    padding-top: 80px;
}

/* workdMake-------------------------------------------------------------------------- */

.worksMake {
    margin-bottom: 180px;
}

/* sitePage----------------------------------------------------------------------- */

#sitePage h2 {
    text-align: left;
    font-size: 64px;
    letter-spacing: 0em;
    /* margin-left: 18px; */
}

/* detailPage------------------ */

/* .detailPage {
    margin: 30px 0 0;
    padding-top: 80px;
} */

.detailWrap {
    padding-top: 80px;
}

/* site -------------------- */
.siteArea {
    display: flex;
    padding-top: 20px;
}

.sitePg {
    width: 365px;
    text-align: center;
}

.siteBtn {
    background-color: #f87731;
    border-radius: 26px;
    width: 185px;
    height: 66px;
    margin: 50px auto;
    /* margin-left: 1000px; */
    box-shadow: 2px 4px 4px #f1cdb9;
}

.siteBtn p {
    text-align: center;
    font-size: 20px;
    padding: 21px 0;
    font-weight: 500;
}

.siteBtn p:hover {
    color: #ffffff;
}

/* datePage----------- */

.datePage {
    display: flex;
    justify-content: space-around;
}


/* .date--------------- */
.datePage {
    margin-left: 144px;
}

.dateWrap {
    margin: 0 10px 10px;
}

.dateArea {
    margin: 0 0 25px;
    padding: 10px;
}

/* .date {
    background-color: #00582d;
    font-size: 24px;
    padding: 5px 0;
} */

.dateList {
    display: flex;
    justify-content: space-around;
    margin: 12px 0;
}

.dateList dt p {
    width: 95px;
}



.dateArea,
.tool {
    width: 200px;
    border: 5px solid #004150;
    border-radius: 10px;
}


/* tool ---------------- */
.tool {
    /* background-color: #f87731; */
    padding: 10px 0;
}

.tool h3 {
    font-size: 24px;
    margin: 0;
    letter-spacing: 8px;
}

.toolList li {
    /* font-size: 24px; */
    padding: 10px;
    font-weight: 600;
}

/* coment ----------------- */

.coment {
    margin-left: 120px;
}

.coment ul {
    display: flex;
    justify-content: space-between;
    margin: 0 0 60px;
}

.tComent {
    font-size: 24px;
    width: 120px;
}

.coment .text {
    margin-left: 55px;
    width: 457px;
    /* font-size: 18px; */
}

/* logopage--------------------------------------------------------------------------------------- */

#logoPage .datePage {
    margin-top: 200px;
}
















/* レスポンシブwebデザイン ---------------------------------------------------------------------*/
@media screen and (width <= 640px) {

    header,
    .innerWrap,
    .headerNav,
    .worksList,
    .skillsList,
    .contactList,
    .topBtnArea {
        width: 100%;
    }

    .title ::before,
    .title ::after {
        margin: 0 25px;
        width: 30px;
        margin-bottom: 10px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* header */

    .logo {
        left: 158px;
        top: 80px;
    }

    .logo2 {
        left: 13px;
        top: 85px;
    }

     .logo img {
        width: 210px;
        height: 180px;
    }
/*
    .logo2 img {
        width: 320px;
        height: 100px;
    } */

    .headerTop {
        height: 180px;
    }

    .headerLogo h1 {
        font-size: 50px;
    }

    header {
        position: relative;
    }

    .headerNav {
        height: 34px;
        position: absolute;
    }


    .headerNav li {
        margin: 0;
        padding: 9px 15px 0;
        font-size: 14px;
    }

    /* main */
    main h2 {
        font-size: 38px;
        letter-spacing: .05em;
    }

    /* profile */
    .profileArea {
        display: block;
        padding: 0;
    }

    .profileList {
        width: 320px;
        margin-left: 16px;
    }

    .imgPhoto {
        margin: 0;
        padding-left: 27px;
    }

    .profileList h3 {
        margin: 60px 0 50px;
    }

    .time {
        margin: 24px 0;
    }

    /* works */

    /* .webList img {
        width: 346px;

    } */

    .webList,
    .bannerList {
        margin: 40px auto;
    }

    .worksList li {
        margin-left: 0;
        margin-right: 0;
    }

    .works h3 {
        width: 170px;
        font-size: 20px;
        margin-top: 65px;
        margin-left: 15px;
    }

    .worksPg {
        box-shadow: 3px 4px 10px 0 rgb(83, 83, 83);

    }

    /* skills */
    .skillsList li h3 {
        font-size: 21px;
    }

    .topBtnArea {
        padding-left: 161px;
        margin-top: -20px;

    }

    .topBtn {
        width: 74px;
        height: 74px;
        padding: 25px 5px;

    }

    .topBtn p {
        font-size: 20px;
        font-weight: 500;
    }

}