@charset "UTF-8";


body {
  color: #1c2857;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
li {
  list-style: none;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto 130px auto;
  font-size: 0.9rem;
  padding: 0 4%;
}
.site-title {
  line-height: 1px;
}
.site-title a {
  display: block;
}
.sec-title {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 65px;
}

.works-container {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 0.9rem;
  height: auto;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 270px;
  margin: 0 auto;
  padding: 0 4%;
}
#header ul {
  display: flex;
  padding: 10px 0;
}
#header li {
  font-size: 0.9rem;
  margin-left: 30px;
}
#header li a {
  color: #24292e;
}
#header li a:hover {
  opacity: 0.7;
}
#header li img.icon {
  width: 20px;
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  margin-bottom: 80px;
  color: #fff;
}
#mainvisual img {
  width: 100%;
  max-width: 1920px;
  height: 420px;
  object-fit: cover;
}



/*-------------------------------------------
About
-------------------------------------------*/
#about h2,
#about h3,
#about h4 {
  margin-bottom: 10px;
}

#about h2 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 50px;
}

#about p {
  margin-bottom: 20px;
}
#about p {
  text-align:justify;
}

/*-------------------------------------------
Works
-------------------------------------------*/

/* #works img {
  width: 50%;
  height: 50%;
} */


/*-------------------------------------------
Contact
-------------------------------------------*/
#contact  {
  text-align: center;
}

/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  background-color: #1c2857;
  color: #fff;
  font-size: 0.5rem;
  padding: 20px 20px;
  text-align: center;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 600px) {
  .wrapper {
    margin-bottom: 70px;
  }
  .site-title {
    margin-top: 20px;
  }
  .sec-title {
    margin-bottom: 40px;
  }

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    max-width: 100%;
    height: auto;
    flex-direction: column;
  }
  #header li {
    font-size: 0.8rem;
    margin-left: 20px;
  }
  #header li:first-child {
    margin-left: 0;
  }

  /*-------------------------------------------
  Contact
  -------------------------------------------*/
  #contact dl {
    flex-direction: column;
  }
  #contact dt {
    width: 100%;
  }
  #contact dd {
    width: 100%;
  }
}

/*-------------------------------------------
workd.html
-------------------------------------------*/

.portfolio {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 50px;
}

@media (max-width:600px) {
  .portfolio {
    /* display: flex */
    flex-direction: column;
  }
}

.portfolio-img1 {
  width: 30%;
  height: auto;
}

.portfolio-text {
  width: 400px;
  height: auto;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:80%;
  margin:auto;
}

.slider img {
  display: block;
  width:25vw;/*スライダー内の画像を20vwにしてレスポンシブ化*/
  height:auto;
}

.slider .slick-slide {
transform: scale(0.5);/*左右の画像のサイズを50%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
margin: auto;
}

.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;/*矢印の色*/
  border-right: 2px solid #666;/*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align:center;
margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}