@charset 'UTF-8';
/*
 * ファイル名: common.css
 * 内容： Dummy Coding FactoryのCSSファイル
 *
 * ------- Table Of Contents -------
 *
 * 1.0 - Base： 初期設定
 *    1.1 - Reset
 *    1.2 - Element
 *
 * 2.0 - Layout： 配置
 *    2.1 - Centering
 *    2.2 - Header
 *    2.3 - Global Nav
 *    2.4 - Hero
 *    2.5 - Contents
 *    2.6 - Footer
 *
 * 3.0 - Module: 繰り返し利用する部品
 *    3.1 - Media
 *    3.2 - Card
 *    3.3 - Button
 *    3.4 - News List
 *    3.5 - Accesibility
 *
*/

/*
  1.0 - Base: 初期設定
------------------------------------------*/


/*
  1.1 - Reset
*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
}


/*
  1.2 - Element
*/
body {
  background: #eee;
  color: #333;
  font: .875em/1.5 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

img {
  vertical-align: bottom; /* 画像の下の余白消す */
}


/*
  2.0 - Layout: 配置
------------------------------------------*/

/*
  2.1 - Centering
*/

#container {
  margin: 0 auto;
  width: 960px;
}

/*
  2.2 - Header
*/

#header {
  overflow: hidden;
  background: #fff;
}

#header h1 {
  padding: 25px 30px;
}

/*
  2.2 - Global Nav
*/

#global-nav {
  overflow: hidden;
}

#global-nav li {
  float: left;
  width: 20%;
}

#global-nav li a {
  display: block;
  background: #333;
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 16px 0;
  line-height: 1.3;
}

#global-nav li a:hover {
  background: #666;
  color: #ccc;
}


/*
  2.3 - Hero
*/

#hero {
  clear: both;
  margin: 15px 0;
  background: #fff;
}

/*
  2.4 - Contents
*/
#contents {
  clear: both;
  overflow: hidden;
}

#contents h2 {
  margin: 0 0 15px;
  padding: 0 0 0 5px;
  border-left: solid 3px #333 ;
}
#contents p {
  margin: 0 0 15px;
  color: #666;
}

#main {
  float: left;
  width: 690px;
}

#main h2 {
  font-weight: bold;
  font-size: 140%;
}
#main h3 {
  font-weight: bold;
  font-size: 110%;
}


#sidebar {
  float: right;
  width: 240px;
}

#sidebar h2 {
  font-weight: bold;
}

.section {
  clear: both;
  overflow: hidden;
  margin: 0 0 30px;
  background: #fff;
}
#main .section {
  padding: 30px;
}
#sidebar .section {
  padding: 15px;
}


/*
  2.5 - Footer
*/
#footer {
  clear: both;
  overflow: hidden;
  padding: 15px;
  background: #333;
  color: #666;
  text-align: right;
}

#footer small {
  font-size: 85%;
}

#footer small a {
  color: #666;
  text-decoration: none;
}
#footer small a:hover {
  color: #ccc;
}


/*
  3.0 - Module: 繰り返し利用する部品
------------------------------------------*/

/*
  3.1 - Media
*/

.media {
  overflow: hidden;
}

.media-thumbnail {
  float: left;
  width: 240px;
}
.media-body {
  float: right;
  width: 360px;
}


/*
  3.2 - Card
*/
.card-wrap {
  overflow: hidden;
}

.card {
  position: relative;
  float: left;
  margin-bottom: 15px;
  width: 200px;
}

.card + .card {
  margin-left: 15px;
}

.card h3 {
  padding: 140px 0 5px;
}

.card-thumbnail {
  position: absolute;
  top: 0;
}


/*
  3.3 - Button
*/
.button-primary {
  clear: both;
}
.button-primary a {
  display: block;
  padding: 0 15px;
  height: 50px;
  background: #eee;
  color: #999;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
}

.button-primary a:hover {
  background: #999;
  color: #666;
}


/*
  3.4 - News List
*/
.news-list dt {
  padding-top: 10px;
  border-top: 1px solid #ddd;
  color: #999;
  font-size: 90%;
}

.news-list dd {
  padding-bottom: 10px;
  color: #666;
}

/*
  3.5 - Accesibility
*/

.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}