------------------------------------------------
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
------------------------------------------------
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
------------------------------------------------
text-align: justify;
text-justify: inter-ideograph;
------------------------------------------------
width: calc(100% - 100px);
width: -webkit-calc(100% - 100px);
------------------------------------------------
!important;
------------------------------------------------
*Safari対策*
background: url(img/pic.png) no-repeat 0 0;
background-size: cover;
------------------------------------------------
:before,
:after {
content: '';
display: inline-block;
background: url(img/ttl_icn.png) no-repeat 0 0;
background-size: auto;
vertical-align: middle;
width: 8px;
height: 12px;
margin: auto 10px;
}
--------------------------------------------------
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
------------------------------------------------
:nth-child(3n) {
margin-right: 0;
}
------------------------------------------------
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
------------------------------------------------
<親>
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
<子>
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
------------------------------------------------
:after {
clear: both;
content: '';
display: block;
}
------------------------------------------------
/* 画像トリミング (IE対策)*/
.box {
position: relative;
max-height: 200px;
overflow: hidden;
}
.box:before {
content: '';
display: block;
padding-top: 100%;
}
img {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
------------------------------------------------