paint-necessity.scss
/********************************************
// ↓ paint-necessity.scss
********************************************/
#paint-necessity-page {
width: 100%;
max-width: 730px;
box-sizing: border-box;
margin: 0 auto;
@media (max-width: 767px) {
padding: 0 3%;
}
* {
box-sizing: border-box;
}
.paint-necessity-page__heading {
width: 100%;
background-color: #f7ce46;
padding: 8px 15px;
font-size: 1.8rem;
line-height: 2.2rem;
color: #000;
font-weight: bold;
@media (max-width: 767px) {
padding: 5px 10px;
font-size: 1.4rem;
line-height: 1.8rem;
}
}
.paint-necessity-page__mv {
margin-bottom: 30px;
@media (max-width: 767px) {
margin-bottom: 5%;
}
&__banner {
width: 100%;
position: relative;
text-align: center;
img {
display: inline-block;
width: 100%;
height: auto;
}
}
&__heading {
width: 100%;
box-sizing: border-box;
margin-bottom: 40px;
@media (max-width: 767px) {
margin-bottom: 6%;
}
}
}
.paint-necessity-page__sec01 {
&__text {
width: 100%;
font-size: 1.5rem;
font-weight: 500;
line-height: 2rem;
color: #000;
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 1.8rem;
}
span {
color: #ff0000;
}
}
&__img {
width: 100%;
position: relative;
text-align: center;
img {
display: inline-block;
}
}
&__contents {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__flex {
padding: 25px 0;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
flex-direction: row-reverse;
@media (max-width: 767px) {
padding: 4% 0;
display: block;
}
&__left {
width: calc(100% - 135px);
@media (max-width: 767px) {
width: 100%;
}
}
&__right {
width: 118px;
margin-left: 17px;
text-align: center;
padding-bottom: 70px;
@media (max-width: 767px) {
float: right;
padding-bottom: 0;
width: 35%;
margin-left: 2%;
}
img {
display: inline-block;
}
}
}
}
.paint-necessity-page__sec02 {
&__text {
width: 100%;
font-size: 1.5rem;
font-weight: 500;
line-height: 2rem;
color: #000;
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 1.8rem;
}
span {
color: #ff0000;
}
}
&__img {
width: 100%;
position: relative;
text-align: center;
margin-bottom: 10px;
display: block;
@media (max-width: 767px) {
margin-bottom: 3%;
}
img {
display: inline-block;
}
}
&__contents {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__flex {
padding: 25px 0;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
flex-direction: row-reverse;
@media (max-width: 767px) {
padding: 4% 0;
display: block;
}
&__left {
width: calc(100% - 160px);
@media (max-width: 767px) {
width: 100%;
}
}
&__right {
width: 151px;
margin-left: 9px;
text-align: center;
padding-bottom: 70px;
@media (max-width: 767px) {
float: right;
padding-bottom: 0;
width: 39%;
margin-left: 2%;
}
img {
display: inline-block;
}
}
}
}
}