/*
Theme Name: kaneko mitsuki portforio site
Author: caneco
Description: 就職のポートフォリオサイト
Version: 1.0
*/


/* 768px以上　pcサイズ */
@media(min-width:768px){


  body{
    display: flex;
    font-family:'sans-serif';
    position: relative;
    cursor: none;
  }

  .pc{
    width: 80%;
    letter-spacing:0.2rem;
  }
    
  .container{
    width: 80%;
  }

  .pc-img{
    display: block;
    object-fit: cover;
    object-position: 0 0;
  }

  .sp-img{
    display: none;
  }

  #sec-container{
    width:80%;
    margin-top: 24vw;
  }


  /* ホバー */

  a:hover{
    cursor: none;
  }

  #sec-container a{
    filter:grayscale(100%);
  }

  #sec-container a:hover{
    filter:grayscale(0);
  }

  
  /*　カーソル　*/
  #cursor{
    position: fixed;
    /*丸の大きさと色の指定*/
    background: #000000;
    border-radius:20px;
    width: 20px;
    height: 20px;
    margin: -20px 0 0 -20px;/*真ん中にくるようにマイナスマージンで調整*/
    z-index: 100;/*一番手前に来るように*/
    pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
    opacity: 0;
  }
  /*ちょっと遅れてついてくるストーカー要素*/
  #stalker{
    position: fixed;
    /*丸の大きさと色の指定*/
    background:  #fdfe00;
    width: 60px;
    height: 60px;
    border-radius:30px;
    margin: -30px 0 0 -30px;/*真ん中にくるようにマイナスマージンで調整*/
    z-index: 99;/*カーソルの後ろに来るように*/
    pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
    opacity: 0.7;
  }



  /*　header pc　*/

  header{
    width: 20%;
    height: 100vh;
    opacity: 1;
    right: 0;
  }

  #headerPc-container{
    margin: 0 0 0 auto;
  }

  .openbtn{
    display: none;
  }


  /* ナビメニュー */


  .menu{
    height: 100vh;
    width: 80%;
    background-color: black;
    display: block;
    padding: 0;
    list-style: none;
    padding: 25vh 0;
    margin: 0 0 0 auto;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  li{
    margin: 15% 0;
    text-align: center;
  }

  li a{
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 3px;
    display: inline-block;
    position: relative;
    overflow: hidden;
  }

   li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: translate(-100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
    content: "";
  }
  
   li a:hover:after {
    transform: translate(0, 0);
  }



  /* top pc */

  #top{
    margin: 68px 0;
  }

  #top-sec{
    width: 100%;
  }

  #top-sec img{
    height: auto;
    width: 75%;
    object-fit: cover;
  }

  h2{
    font-size: 1.3vw;
    left: auto;
    right: -3%;
    top: 26vw;
    letter-spacing: 4px;
  }

  #box{
    top:28vw;
    width: 30vw;
    height: 20vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  h1{
    font-size: 1.5vw;
    margin: 0;
    letter-spacing: 5px;
  }

  

  /* about pc */

  #about{
    top: 13vw;
    z-index: 10;
  }

  #about img{
    width: 50%;
    height: 5vw;
    object-fit: cover;
    object-position: -15px 38%;
  }

  #about-title{
    right: 20vw;
    top: 1vw;
  }



  /* hair pc */

  #hair{
    top: 3vw;
    display: flex;
    justify-content: flex-end;
  }

  #hair a{
    display: inline-block;
  }

  #hair img{
    width: 15vw;
    height: 15vw;
    object-fit: cover;
    object-position: 5%;
  }

  #hair-title{
    top: 14vw;
    left:52vw;
    text-align: right;
  }



  /* collection pc */

  #collection{
    top: 1vw;
    left:18vw;
    width: 100%;
  }

  #collection a{
    display:inline-block;
  }

  #collection img{
    width: 35vw;
    height: 10vw;
    object-fit: cover;
    object-position: 0px 26%;
  }

  #collection-title{
    left: -8vw;
    top: -2vw;
  }



  /* contact pc */

  #contact{
    top:2vw;
    left:1vw;
  }

  #contact a{
    display: inline-block;
  }

  #contact img{
    width: 35vw;
    height: 5vw;
    object-position:0px 55%;
    object-fit: cover;
  }



  /* footer pc */

  footer{
    margin-top: 8vw;
    margin-bottom: 70px;
  }

}




/* 375px以下　spサイズ　*/
@media(max-width:375px){

  #sec-container{
    margin-top: 80vw;
  }

  #top-sec img {
    width: 90vw;
  }

  #contact img{
    width: 90%;
    margin: 0 auto;
  }

}