テンプレート:きくらげさん/Sandbox.css

/* =====PC用ヘッダ===== */
.mp-header-about, .mp-header-category {
display: flex;
margin: 1em;
}

/* =====PC用コンテンツ===== */
.mp-category {
display: none;
}
.mp-content {
border-radius: 10px;
display: flex;
margin: 1em 0;
background: #fff;
border: solid 1px #c8ccd1;
}
.mp-content-r {
width: 49.5%;
float: right;
clear: right;
}
.mp-content-l {
width: 49.5%;
float: left;
clear: left;
}

/* =====レスポンシブ===== */
@media screen and (max-width: 800px) {
.mp-header-about {
text-align: left;
width: 100%;
float: left;
}
.mp-header-category {
display: block;
}
.mp-content {
width: 100%;
border-radius: 10px;
display: flex;
margin: 1em 0;
border: solid 1px #c8ccd1;
}
.lang-img, .mp-header-category {
display: none;
}
.mp-category {
display: block;
clear: both;
}
}

/* =====共通=====*/
.mp-headfoot {
clear: both;
display: flex; 
justify-content: space-around;
background: #f8f9fa;
border-radius: 10px;
border: solid 1px #eaecf0;
}
.mp-index {
margin: 1em;
}