@charset "utf-8"; 

* { margin: 0; padding: 0; box-sizing:border-box; }

@font-face { font-family: "YuGothic M"; src: local(Yu Gothic Medium); }
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);

body { color:#123; font:14px/1.7 "Open Sans", YuGothic,"YuGothic M", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust: none;
 background-color:#eee; }

img, area { border: none; outline: none; }

/* リンク */
a { border: none; outline: none; color:#03c; text-decoration:none; }
a:hover { text-decoration:none; opacity: 0.6; }
a img { border:none; }

 /* html5未定義ブラウザ用 */
article, aside, details, figcaption, figure, header, main, menu, nav, section, footer { display: block; }

 /* clearfixの代用 */
article, aside, header, main, nav, section, footer { overflow:hidden; }

 /* グリッド */
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

*[class*="col_"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
margin-top:0.5em;
margin-bottom:0.5em;
float: left;
display: block;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

#container { width: 960px; background-color: #fff; margin:1em auto; box-shadow:0 3px 10px 0 #333; border-radius:6px; border:2px solid #fff; }

/* ヘッダー */
header { background-color: #5B34C6; border-radius:6px; box-shadow:0 3px 3px 0 #333; }
header h1 { padding:1em; color:#fff; }


header, main { width:900px; margin:2em auto; }

/* モニター幅980px以下 */
@media only screen and (max-width:980px) { 
	#container { width: 95%; }
}

/* スマートフォン 横(ランドスケープ) タブレット*/
@media only screen and (max-width:768px) { 
	.col_3  { width: 48.333333333333%; }
	header, main { width:90%; margin:2em auto; }
}

/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px) { 
	.col_3  { width: 48.333333333333%; }
	.col_4  { width: 98.333333333333%; }
	.col_5  { width: 98.333333333333%; }
	.col_6  { width: 98.333333333333%; }
	.col_7  { width: 98.333333333333%; }
}