@charset "utf-8";

/* ==========================================================================
   基本スタイルj
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * 選択時のテキストシャドウを削除
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * 見た目がマシなhr
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * ギャップを削除 audio, canvas, iframes, images, videos
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * fieldset のデフォルトスタイルを削除
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * テキストエリアのY方向の自動リサイズを許可
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   TODO: ここに独自のスタイルを記述
   ========================================================================== */

body {
  background-color: #888;
}

#top-image {
  width: 100%;
}

/* ==========================================================================
   ヘルパークラス
   ========================================================================== */

/*
 * 非表示
 */
.hidden,
[hidden] {
  display: none !important;
}

/*
 * 非表示(レイアウトは考慮)
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix: floatの解除用
 */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
  レスポンシブ対応用メディアクエリー
   ========================================================================== */

@media only screen and (min-width: 415px) {
  /* スマートフォン横、タブレット縦j */
  h2 {
    color: red;
  }
}
@media only screen and (min-width: 960px) {
  /* タブレット横, PC */
  h2 {
    color: lightblue;
  }
}