/* CSSファイル内で文字コードをUTF-8に指定
  CSSファイルをデフォルトでUTF-8として扱うため、通常はこの記述を省略しても問題ありません。 */
@charset "UTF-8";

/* HTML文書全体、つまりWebページの全ての要素に適用するためのセレクタ */
html {
  font-size: 100%;
}

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

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

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

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

/*  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: 10px 0;
}

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

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

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

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

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

  /*  要素の下に下線（実践で幅は1px）を引く  */
  border-bottom: solid 1px #383e45;
}

/*  class:content-title  */
.content-title {
  font-size: 1rem;
  margin: 5px 0;
}

/*  class:wrapper  */
.wrapper {

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

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

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

  /*  テキストを真ん中寄せにする  */
  text-align: center;
}

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

/*  id:header  */
#header {

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

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

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

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

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

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

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

  /* 左に余白を作りたいときに使用するプロパティ */
  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;
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/

/*  id:mainvisual  */
#mainvisual {

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

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

  /* 幅 */
  width: 100%;

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

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

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

/*-------------------------------------------
About
-------------------------------------------*/

/*  ID:about　の　class:content */
#about .content {

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

  /* justify-content は、flexアイテムの配置を指定するプロパティ（flexアイテムを中央揃えにする） */
  justify-content: center;

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

/*  ID:about内のimg  */
#about img {

  /* 幅 */
  width: 100px;

  /* 高さ */
  height: 100px;

  /* 正円形は正方形の画像にborder-radius: 50%;を指定すると作成可能 */
  border-radius: 50%;

  /* 右側余白 */
  margin-right: 30px;
}
#about .text {

  /* テキストを左寄寄せにする */
  text-align: left;
}

/*-------------------------------------------
Bicycle
-------------------------------------------*/
#bicycle ul {

  /* 横並びの中央揃えにする */
  display: flex;
  justify-content: space-between;
}
#bicycle li {

  /* 幅 */
  width: 32%;
}

/*-------------------------------------------
footer
-------------------------------------------*/
#footer {

  /*  */
  font-size: 0.5rem;

  /* 内側の余白上下10，左右0 */
  padding: 10px 0;

  /* テキストを中央揃えにする */
  text-align: center;
}

/*-------------------------------------------
SP
-------------------------------------------*/

/* 画面サイズが600pxまでこのファイルのスタイルが適用される。 */
@media screen and (max-width: 600px) {

  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/

  /*  */
  #mainvisual img {

    /* 高さは、100vhからheaderの高さとfooterの高さを引かなければいけません。 */
    height: calc(100vh - 60px);
  }

  /*-------------------------------------------
  About
  -------------------------------------------*/

  /* ID:about class:content */
  #about .content {

    /* 要素の配置方向を上から下に設定。主軸は、ブロック軸と同じになります */
    flex-direction: column;
  }

 /* ID:about class:img */
  #about img {

    /* 右側余白 */
    margin-right: 0;
  }

  /*-------------------------------------------
  Bicycle
  -------------------------------------------*/
  #bicycle ul {

    /* 要素の配置方向を上から下に設定。主軸は、ブロック軸と同じになります */
    flex-direction: column;
  }
  #bicycle li {

    /* 幅 */
    width: 100%;

    /* 下余白 */
    margin-bottom: 30px;
  }
}