MT7 コンテンツタイプ　サンプル用CSS(レシピ)

gistfile1.txt

@charset "UTF-8";

html {
background:#fff;
color:#000;
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}

body {
margin:0
}

img {
border:0
}

body {
line-height:1;
color:#333;
font-size:13px;
word-break:break-all;
word-wrap:break-word
}

img {
border:none;
vertical-align:top;
vertical-align:bottom;
margin:0;
padding:0
}

div,h3,h4 {
padding:0;
margin:0
}

a:active,a:visited {
color:#01abd6
}

p {
line-height:1.6;
margin:0 0 15px;
word-break:break-all;
word-wrap:break-word
}

.wrapper {
max-width:980px;
width:auto;
min-width:320px;
margin:0 auto
}

.detailWrapper {
margin-top:20px;
padding:12px
}

.detail {
background-color:#fff;
padding:0 45px 45px;
overflow:hidden;
font-size:14px
}

.detailInner p {
overflow:hidden;
margin-bottom:25px;
line-height:1.8
}

.mainTitle {
font-size:30px;
font-weight:400;
padding:0 0 10px 45px;
border-bottom:2px solid #efefef;
background-color:#fff
}

.mainImg {
border:1px solid #efefef;
padding:2px;
margin:25px 0 10px
}

.mainImg img {
width:100%;
padding:0;
border:0
}

.backBtn {
font-size:14px;
font-weight:700
}

.backBtn a {
display:block;
width:200px;
line-height:43px;
text-indent:10px;
text-decoration:none;
text-align:center;
margin:30px auto;
color:#fff;
background-repeat:repeat-x;
background-color:#686868;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
behavior:url(/common/css/PIE.htc);
position:relative
}

.backBtn a:before {
content:'';
background-repeat:no-repeat;
background-position:0 -149px;
background-size:13px 179px;
width:10px;
height:15px;
position:absolute;
top:13px;
left:15px
}

@media screen and (max-width: 640px) {
.mainTitle {
padding-left:10px;
padding-right:10px
}
}

.detail {
padding-left:10px;
padding-right:10px
}

html {
background:#fff;
color:#000;
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}

body {
margin:0
}

img {
border:0
}

#TopHeader {
position:relative
}

body {
line-height:1;
color:#333;
font-size:13px;
word-break:break-all;
word-wrap:break-word
}

img {
border:none;
vertical-align:top;
vertical-align:bottom;
margin:0;
padding:0
}

a {
-webkit-tap-highlight-color:rgba(0,0,0,0);
color:#01abd6
}

a:active,a:visited {
color:#01abd6
}

.wrapper {
max-width:980px;
width:auto;
min-width:320px;
margin:0 auto
}

.listWrapper {
overflow:hidden;
padding:12px 0 0 12px;
margin-top:10px
}

.list {
height:auto;
max-width:230px;
max-height:230px;
min-width:220px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:5px solid #fff;
margin:0 12px 12px 0;
float:left;
position:relative
}

.list .listDescription {
position:absolute;
bottom:0;
left:0;
width:100%;
color:#fff;
line-height:1.4
}

.list .listDescriptionTxt {
display:block;
padding:8px
}

.thum {
overflow:hidden;
height:220px
}

.thum a {
text-decoration:none
}

.thum img {
width:100%
}

tr {
height: 25px;
}

.mb5 {
  margin-bottom: 5px;
}

@media screen and (max-width: 980px) {
.h3_title {
padding-left:10px
}
}
@media screen and (max-width: 979px) {
.list {
max-width:31.7%
}
}
@media screen and (max-width: 749px) {
.list {
max-width:47.6%
}
}

@media screen and (max-width: 519px) {
.listWrapper {
padding-right:12px
}
}

.list {
max-width:100%;
margin-right:0
}