@charset "UTF-8";

html {
  font-size: 100%;
}

/* bodyセレクタ内の文字色、フォントサイズを指定（親要素に設定されているフォントサイズの0.9倍） */
body {
  color: #24292e;
}

/* aタグで記述した文字の装飾を指定するプロパティ
  装飾の種類には下線、上線、取り消し線、点滅がある。noneはテキストの装飾を行わない。線無し */
a {
  text-decoration: none;
}

/* imgタグで読み込んだ画像の最大幅を制限 */
img {
  max-width: 100%;
}

/* liタグにて記述したリストの頭にある黒ポチを消す */
li {
  list-style: none;
}

/*  class:wrapper  */
.wrapper {

  /*  imgタグで読み込んだ画像の最大幅を制限  */
  max-width: 960px;

  /*  要素の外側の余白を上・右・下  */
  margin: 0 auto 130px auto;

  /*  要素の内側の余白を上下・左右 */
  padding: 0 4%;

  font-size: 0.9rem;
}

/*  class:site-titleの宣言　幅、文字の行間、 
  余白（上と下に10ピクセルの余白を設け、左右には余白を設けない（0ピクセル））
  `padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0;
  をまとめて指定した shorthand プロパティ */
.site-title {
  /*width: 120px;*/
  line-height: 1px;
  /*padding: 12px 0;*/
}

/*  class:site-title内のaタグに適用
  要素の表示のされ方（blockは要素が横までいっぱいに広がり、縦に並んでいく）  */
.site-title a {
  display: block;
}



/*-------------------------------------------
ヘッダー
-------------------------------------------*/

/*  id:header  */
#header {

  max-width: 960px;
  /* 横並びにした要素の配置を指定するプロパティで、以下が基本flexアイテムを両端揃えにする
  justify-content は、flexアイテムの配置を指定するプロパティ（flexアイテムを両端揃えにする） */
  display: flex;
  justify-content: space-between;

  /* align-items はflexアイテムの上下の配置を指定することができるプロパティです（中央揃え） */
  align-items: center;

  height: 270px;
  margin: 0 auto;
  padding: 0 4%;
}

/*  id:header内のul  */
#header ul {

  /* 横並びにした要素の配置を指定するプロパティ */
  display: flex;

  /* 要素の内側の余白を上下・左右 */
  padding: 10px 0;
}

/*  id:header内のul  */
#header li {

  font-size: 0.9rem;
  /* 左に余白を作りたいときに使用するプロパティ */
  margin-left: 30px;
}

/*  id:header内のulのaの文字色を指定  */
#header li a {
  color: #24292e;
}

/*  id:header内のulのaタグにhoverを指定することで、リンクにカーソルが乗ったときに
色を変えてクリックできるということを認識できます  */
#header li a:hover {

  /* 画像やテキストの透明度を指定
  値の部分には「0.0～1.0」までの数値で不透明度を指定します。数値が大きいほど不透明度が高くなり、
  よりはっきりと表示されます。
  逆に数値が小さいほど不透明度は下がり、透明になります */
  opacity: 0.7;
}

#header li img.icon {
  width: 20px;
}


/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
/*  id:mainvisual  */
#mainvisual {

  /* 下の余白を80pxに指定 */
  margin-bottom: 80px;
}

/*  id:ainvisual内のimg  */
#mainvisual img {

  /* 幅 */
  width: 100%;

  /* 画像の横幅を指定 */
  max-width: 1920px;

  /* 高さを指定 */
  height: 420px;

  /* 表示エリアになるべく余白なく画像を表示しようとし、はみ出してしまう部分はトリミングします。
  画像の一部が欠けても問題ないサムネイルやキービジュアルなどに適しているでしょう */
  object-fit: cover;
}

/*  class:site-title  */
.section-title {

  /*  要素の表示のされ方（改行は入らずに横に並んでいく）  */
  /*0display: inline-block;*/

  /*  フォントサイズ　htmlタグの文字サイズを基準に文字サイズが設定
    100%=1em=1rem＝16pxなので2remは32pxとなる  */
  font-size: 1.5rem;

  /*  要素の下の余白を60pxとする  */
  margin-bottom: 65px;

  text-align: center;
}

/*  id:header内のul  */
#about ul {

  /* 横並びにした要素の配置を指定するプロパティ */
  /*display: flex;*/
  margin-bottom: 30px;

  /* 要素の内側の余白を上下・左右 */
  /*padding: 10px 0;*/
}

/*  id:header内のul  */
#about li:first-child   {

  /* 左に余白を作りたいときに使用するプロパティ */
  /*margin-left: 30px;
  text-align: left;
  padding: 10px 0;*/
  margin-bottom: 30px;
}

#about p {

  /* 左に余白を作りたいときに使用するプロパティ */
  /*margin-left: 30px;
  text-align: left;*/
  padding-top: 30px;
  /*テキストの均等割付をして、左右両端揃えに設定*/
  text-align:justify;
}

#works ul {

  /* 横並びの中央揃えにする */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /*flex-direction: row;*/
  margin-bottom: 50px;
}
#works li {

  /* 幅 */
  width: 31%;
  margin-bottom: 23px;
}

/*#works img {
  width: 262px;
  height: 172px;
}*/

#news dl {
  /* 横並びの中央揃えにする */
  display: flex;
  flex-wrap: wrap;
  border-top: solid 1px #c8c8c8;
  margin-bottom: 20px;
}

#news dt {
  width: 20%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}

#news dd {
  width: 80%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}

#contact dl {
  /* 横並びの中央揃えにする */
  display: flex;
  flex-wrap: wrap;
  /*border-top: solid 1px #c8c8c8;*/
  margin-bottom: 20px;
}

#contact dt {
  width: 15%;
  /*border-bottom: solid 1px #c8c8c8;*/
  /*padding: 15px;*/
}

#contact dd {
  width: 85%;
  /*border: solid 1px #c8c8c8;*/
  margin-bottom: 10px;
}

#contact dd input,
#contact dd textarea {
  width: 100%;
  border: solid 1px #c8c8c8;
  padding: 10px;
}

#contact dd textarea {
  height: 10rem;
}

#contact .button {
  text-align: center;
}
#contact .button input {
  width: 200px;
  background-color: #24292e;
  color: #fff;
  padding: 15px 0;
  border: solid 1px #24292e;
}
#contact .button input:hover {
  background: #fff;
  color: #24292e;
}

#footer {
  background-color: black;
  color: white;
  font-size: 0.5rem;
  padding: 10px 20px;
  text-align: center;
}

@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;
  }

  /*-------------------------------------------
  Works
  -------------------------------------------*/
  #works ul {
    flex-direction: column;
  }
  #works li {
    width: 100%;
  }

  /*-------------------------------------------
  News
  -------------------------------------------*/
  #news dl {
    flex-direction: column;
  }
  #news dt {
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
  }
  #news dd {
    width: 100%;
    padding-top: 0;
  }

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