@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&display=swap');

    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
        font-family: 'Kiwi Maru', serif;
    }
    header{
       
        color: white;
        text-decoration: none;
        
       
    }
    .header-container{
        width: 100%;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    
        display: flex;
        justify-content: space-between;
        font-size: .9em;
        color: #aaaaaa;
        font-family: "メイリオ";
        letter-spacing: 2px;
        position: fixed;
    
    }
    .header-logo{
        /* float:left; */
        margin: 0px;
        vertical-align: middle;
        /* line-height: 1; */
        color: silver;
        margin-left: 20px;
       
    }
    .header-list{
       /*  float: right; */
        list-style: none;
         display: flex;
        justify-content: space-between;
        /* margin: 0; */
        
    }
    .header-list li{
       /*  float:left; */
        margin-right: 20px;
    }
    .header-list a{
        text-decoration: none;
        color: silver
    }
    .header-list span{
        font-size: 12px;
    }
    #Header dl{
        width: fit-content;
    }
    #Header dd{
        float: right;
        margin-left: 20px;
    }
    #Header dt{
        width: fit-content;
    }
    
    .main{
        text-align: center;
        margin: 0px;
        /* color:peachpuff; */
        width: 100%;
        margin: auto;
    }
    .mainvisual{
        height: 400px;
        width: 100%;
        background-image: url("photo.webp");
        background-size: cover;
        background-position: center;
    }
    .top{
        /* padding: 300px 0 300px 0; */
        /* background-image:url(nekophoto/sorotteneteru.JPG) ; */
        background-image:url(https://media.istockphoto.com/photos/curious-kitten-looking-at-the-camera-picture-id1270023880?b=1&k=20&m=1270023880&s=170667a&w=0&h=7tAE4L2d7qJ4k1OMydwof1kObkG6TuNkDj2n2QC88ic=) ;
        height: 600px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-color: rgba(255,255,255,0.2);
        /* background-blend-mode: lighten; */

        /* height: 450px;
        background-position: 0px -30px; */

        display: flex;
        align-items: center;
    
    }
    .top h1{
        font-weight: 600;
        color: rgb(255, 255, 255);
    }
    .top-title h1{
        margin-top: 100px;
        margin-bottom: 100px;
    }
    /* .top h1{
        letter-spacing: 2px;
    } */
    .top span{
        display: block;
        font-size: 12px;
        letter-spacing: 2px;
        color: silver;
        opacity: 0;
    }
    .top a{
        text-decoration: none;
        color: peachpuff;
        font-size: 40px
    }
    .main h3{
        margin: 0px;
        font-weight: 400;
    
    }
    .contents{
       
        margin: auto;
        width: 1000px;
        color: black;
    }
    .link{
        margin: 40px auto;
        margin-bottom: 60px;
    
    }
    .link a{
        
        background-color:peachpuff;
        padding: 15px 80px;
        text-decoration:none;
        color: white;
    
    }

    .works{
        background-color: #f7f7f7;
        /* padding: 100px 610px 100px 610px; */
        padding-top: 80px;
        padding-bottom: 105px;
    }
    .works img{
        width: 300px;
    }
    .works h2{
        /* margin-bottom: 25px; */
        font-size: 40px;
    }
    .sub-title{
        margin-top: 0;
    }
    .works a{
        text-decoration: none;
       
    }
    .works .fade{
        margin: 0;
        color: #333;
       
         opacity: 0;
    }
    .works h3{
        font-size: 15px;
        margin: 0;
    }
    .works .fade{
        font-size: 15px;
    }
    .service{
        margin: 100px auto;
    }
    .service h2{
        margin-bottom: 25px;
        font-size: 40px;
    }
    .service-icons{
        display: flex;
        justify-content: space-evenly;
    }
    .icon-responsive{
        width: 20%;
    }

    
    .text{
        margin-top: 0px;
        margin-bottom: 40px;
    }
    .quality{
        margin-bottom: 3px;
    }
    .quality h2{
        margin-top: 0;
    }
 
    .words .text{
        margin-bottom: 0;
    }
    .transration{
        margin: 0;
        font-size: 14px;
       line-height: 1;
        color: #8888;
        opacity: 0;
    }
    .wrap-profile{
        overflow: hidden;
    }
    .profile{
        color: #333;
        /* margin-bottom: 80px; */
        background-color: #f7f7f7;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .profile h2{
        font-size: 40px;
    }
    .profile h3{
        margin-bottom: 10px;
        
    }
    .profile p{
        margin: 0;
        margin-bottom: 10px;
        /* line-height: 1.4; */
        padding-left: 5px;
       
    }

    .profile ul{
        display: flex;
        justify-content:center ;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .profile li{
        margin-right: 25px;
        font-size: 14px;
        
    }
    #contact{
        padding: 40px;
        padding-top: 80px;
        padding-bottom: 80px;

        background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: rgba(255,255,255,0.4);
    background-blend-mode: lighten;
    background-image: url(https://images.unsplash.com/flagged/photo-1621757458931-a1b076e5a8bb?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDM0NHxDRHd1d1hKQWJFd3x8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60);
    font-size: 17px;
    }
    #contact ul{
        padding: 40px;
        padding-top: 80px;
        list-style: none;
    }
    #contact h2{
        font-size: 40px;
    }
    
    footer{
        text-align: center;
        /* background-color: peachpuff; */
        /* margin:0px; */
        padding: 0px;
        color: #aaaaaa;
        font-size: small;
    }
    footer p{
        /* margin: 0; */
        background-color: #f7f7f7;
        margin-bottom: 0;
    }
    #navswitch{
        display: none;
    }

    .slider{
        margin: 100px auto;
        width: 80%;
    }
    .slider img{
        height: auto;
        width: 100%;
    }
    /*slick setting*/
    .slick-prev:before,
    .slick-next:before {
        color: #000;
    }