@charset "utf-8";
/* CSS Document */

/* 共通部分-----------------------------------------*/
.pc { display: none !important; }
.sp { display: block !important; }

/* ハンバーガーメニュー-----------------------------------------*/
@media (max-width: 768px) {
  .menu {
    background-color: rgba(228,208,10,1.0);
  }
}

/* トップページ--------------------------------------------------*/
@media (max-width: 768px) {
  body {
    font-size: 0.9em
  }
  .wrapper {
    width: 90%;
  }
  #contents-menu {
    margin-top: 80px;
    flex-wrap: wrap;
    padding: 50px 10px;
  }
  #contents-menu div {
    width: 50%;
    padding: 5% 0;
  }
  #profile h2,#work h2 {
    margin-top: 100px;
    margin-bottom: 30px;
  }
  
  #contents-profile {
    text-align: left;
  }
  #contents-profile h3 {
    text-align: center;
  }
  #contents-profile img#main-img {
    margin-right: auto;
    margin-left: auto;
	margin-bottom: 2%;
    width: 40%;
    height: auto;
    border-radius: 20px;
  }
  #contents-profile #profile-text1 {
    display: block;
    width: 100%;
  }
  #contents-profile #skill {
    width: 100%;
  }

  .slider img {
    width: 50vw; /*スライダー内の画像を20vwにしてレスポンシブ化*/
    height: auto;
  }
  .slider .slick-slide {
	transform: scale(0.8);
  }
}

/* ボタン用のレスポンシブデザイン */
@media (max-width: 768px) {
  #to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* ギャラリー */
@media (max-width: 768px) {
  .sort-btn{
	justify-content: center;
    padding-top: 20px;
	padding-bottom: 30px;
  }
  .sort-btn li{
	width: 25%;
	margin: 0 10px 10px 10px;
	text-align: center;
  }	
  .item {
    width: 48%;/*横並びで2つ表示*/
  }
}

/* 各ページ */
#page img {
	width: 80%;
}