@charset 'utf-8'; /*文字コード指定*/

/* ----- css reset(各ブラウザで指定されているスタイルを初期化)と全体設定 ----- */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
textarea,
p,
th,
td,
img {
  margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
  padding: 0; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
  border: 0; /*境界線指定*/
}

html,
body,
.container {
  /* overflow-x: hidden; ボックスのはみ出た部分の表示指定(hiddenは非表示) */
  width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
  height: 100%; /*領域の高さ指定*/
}

body {
  position: relative;
  margin: 0; /*ボックス外側の余白*/
  background-color: #00000e;
  color: #fff; /*文字色指定*/
  font-size: 14px; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
  font-family: "Yu Gothic", "YuGothic", "Roboto", "Helvetica Neue",
    "Hiragino Kaku Gothic Pro", "Meiryo", "Arial", "sans-serif";
  line-height: 1; /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

ol,
ul {
  list-style: none; /*リストマーカーの種類指定(noneはなし)*/
}

.container {
  width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
  margin: auto; /*ボックス外側の余白*/
}

*,
*:after,
*:before {
  /*アスタリスク「*」はすべての要素にスタイルを適用、「:before」は要素の先頭に「:after」は後方に擬似要素を作成。*/
  /*ボックスサイズの算出方法指定(border-boxはパディングとボーダーを幅と高さに含める)*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* aタグのリセットCSS（不要な場合、セレクタごと削除してください） */
a {
  color: inherit;
  text-decoration: none;
}

/* buttonタグのリセットCSS（不要な場合、セレクタごと削除してください） */
button {
  padding: 0;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

button:focus {
  outline: none; /*アウトラインのスタイル・太さ・色指定(noneはなし)*/
}

/*header*/

header {
  position: absolute;
  width: 100%;
  height: 100px;
  align-items: center;
  display: flex;
}

@media screen and (max-width: 930px) {
  header {
    height: 70px;
  }
}

header h1 {
  font-size: 5em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
}

/*メインの内容*/

article {
  width: 800px; /*幅指定(100%は画面横幅いっぱいに表示)*/
  margin: 100px auto; /*ボックス外側の余白*/
}

article h2 {
  margin-bottom: 30px; /*ボックス外側下の余白*/
  font-weight: normal; /*フォントの太さ指定(normalは標準)*/
  font-size: 3em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
  font-family: "Berkshire Swash", cursive;
  font-family: "Ceviche One", cursive; /*フォントの種類指定(左から優先順位)*/
  text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
}

article li {
  font-size: 2em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
  line-height: 50px; /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
}

article a {
  color: #333; /*文字色指定*/
}

article a:hover {
  /*透明度設定*/
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8; /*ここまで透明度設定*/
  text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

/*レスポンシブ設定*/

@media screen and (max-width: 768px) {
  .content-wrap {
    width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
    padding: 0 30px; /*ボックス内側の余白*/
    position: relative; /*ボックスの配置方法(relativeは相対位置配置)*/
  }

  header h1 {
    font-size: 2em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
  }

  .toppage {
    margin-top: 200px; /*ボックス外側上の余白*/
  }
}