apart-paint.scss
#apart-paint-page {
* {
font-family: "Noto Sans JP", sans-serif;
box-sizing: border-box;
line-height: 1.5;
letter-spacing: 0;
}
img {
max-width: 100%;
height: auto;
display: -webkit-box;
display: -moz-box;
display: block;
}
a {
display: -webkit-box;
display: -moz-box;
display: block;
}
.txt-orange {
color: #eb5728;
}
.sp-none {
display: -moz-box;
display: -webkit-box;
display: block;
@media (max-width: 767px) {
-moz-display: none;
-webkit-display: none;
display: none;
}
}
.sp-none-inline {
-moz-display: inline-block;
-webkit-display: inline-block;
display: inline-block;
@media (max-width: 767px) {
-moz-display: none;
-webkit-display: none;
display: none;
}
}
.pc-none {
-moz-display: none;
-webkit-display: none;
display: none;
@media (max-width: 767px) {
display: -moz-box;
display: -webkit-box;
display: block;
}
}
.pc-none-inline {
-moz-display: none;
-webkit-display: none;
display: none;
@media (max-width: 767px) {
-moz-display: inline-block;
-webkit-display: inline-block;
display: inline-block;
}
}
@keyframes slideTextX100 {
from {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
to {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideTextX-100 {
from {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
to {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.apart-paint-page__mv {
width: 100%;
position: relative;
&__bg {
width: 100%;
opacity: 0;
position: relative;
z-index: 1;
img {
width: 100%;
height: 600px;
object-fit: cover;
@media (max-width: 1024px) {
height: 60vw;
}
@media (max-width: 767px) {
height: auto;
}
}
&.fade-in {
opacity: 1;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
}
}
&__head {
width: 100%;
max-width: 1024px;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
@media (max-width: 1024px) {}
@media (max-width: 767px) {}
&__animation {
overflow: hidden;
opacity: 0;
&__inner {
opacity: 0;
img {
display: block;
width: auto;
height: auto;
}
}
}
&.fade-in {
.apart-paint-page__mv__head__animation {
animation-name: slideTextX100;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 1;
&__inner {
animation-name: slideTextX-100;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 1;
}
}
}
}
}
//cta
.apart-paint-page-cta--bg {
padding: 50px 0;
background: url(../images/apart-paint/cta_bg-01_pc.jpg) repeat top left / auto;
@media screen and (max-width: 1024px) {
padding: 5% 0;
}
@media screen and (max-width: 767px) {
padding: 6% 0;
background-size: 6px;
}
}
.apart-paint-page-cta {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
&__title {
width: 100%;
max-width: 940px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
padding: 0 3%;
}
@media screen and (max-width: 767px) {
padding: 0;
}
}
&__box {
display: flex;
flex-wrap: wrap;
&Item {
width: 33.3%;
padding: 0 10px;
box-sizing: border-box;
@media screen and (max-width: 767px) {
width: 100%;
padding: 0;
}
&:nth-of-type(n + 2) {
@media screen and (max-width: 767px) {
margin-top: 3%;
}
}
&--medium {
width: 50%;
@media screen and (max-width: 767px) {
width: 100%;
}
}
&--wide {
width: 100%;
}
&--mtAdjust {}
}
}
&__card {
width: 100%;
height: 100%;
padding: 5px;
border: 4px solid #009944;
border-radius: 10px;
background: #fff;
display: inline-block;
box-sizing: border-box;
@media screen and (max-width: 767px) {
padding: 3.5%;
border-width: 2px;
}
&--inquiry {
border-color: #009944;
}
&--fcInquiry {
border-color: #ff9601;
}
&--quotation {
border-color: #ff9601;
}
&--line {
border-color: #01b902;
}
&--tel {
padding: 20px 20px;
border-color: #ff6215;
width: 100%;
@media screen and (max-width: 1024px) {
padding: 15px;
}
@media screen and (max-width: 767px) {
padding: 3.5%;
flex-direction: column;
justify-content: center;
}
&--top {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
@media screen and (max-width: 767px) {
flex-direction: column;
margin-bottom: 0;
}
}
&--flex {
display: flex;
width: 100%;
@media screen and (max-width: 767px) {
flex-direction: column;
}
}
}
&TelNum {
font-size: 42px;
font-weight: 700;
color: #333;
white-space: nowrap;
display: flex;
align-items: center;
@media screen and (max-width: 1024px) {
font-size: 4.1vw;
}
@media screen and (max-width: 767px) {
width: 100%;
margin-top: 0;
order: 2;
font-size: 6.25vw;
justify-content: center;
}
&::before {
width: 64px;
height: 41px;
margin-top: 3px;
margin-right: 10px;
content: "";
background: url("../../../../images/top/cta_icon_03.png") 50% 50% / contain no-repeat;
display: inline-block;
@media screen and (max-width: 1024px) {
width: 7.05vw;
height: 4vw;
margin-right: 4%;
}
@media screen and (max-width: 767px) {
width: 8.33vw;
height: 5.34vw;
margin-right: 2.5%;
}
}
}
&Text {
margin-top: 15px;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.08em;
text-align: center;
color: #333;
@media screen and (max-width: 1024px) {
font-size: 1.56vw;
}
@media screen and (max-width: 767px) {
margin-top: 0;
font-size: 3.39vw;
}
b {
width: 100%;
margin-top: 10px;
font-size: 2.4rem;
font-weight: 700;
color: #009944;
display: inline-block;
@media screen and (max-width: 1024px) {
font-size: 2.34vw;
}
@media screen and (max-width: 767px) {
font-size: 4.95vw;
}
}
&--inquiry {
b {
color: #009944;
}
}
&--fcInquiry {
b {
color: #ff9601;
}
}
&--quotation {
b {
color: #ff9601;
}
}
&--line {
b {
border-color: #01b902;
}
}
&--tel {
margin-top: 0;
margin-left: 30px;
white-space: nowrap;
text-align: left;
line-height: 1.25em;
@media screen and (max-width: 1024px) {
margin-left: 3%;
}
@media screen and (max-width: 767px) {
margin-left: 0;
order: 1;
}
br {
display: block;
@media screen and (max-width: 767px) {
display: none;
}
}
}
}
&Btn {
padding: 0 20px 0 40px;
color: #fff;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.08em;
border-radius: 5px;
background: #009944;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 70px;
width: calc(33.3% - 13.4px);
margin-left: 20px;
@media screen and (max-width: 1024px) {
padding: 0 15px;
font-size: 1.4rem;
height: 60px;
width: calc(33.3% - 10px);
margin-left: 15px;
}
@media screen and (max-width: 767px) {
margin-top: 4%;
padding: 0 3%;
height: 50px;
font-size: 1.3rem;
margin-left: 0;
width: 100%;
}
&::before {
margin-top: 3px;
margin-right: 10px;
font-size: 1.625em;
color: #fff;
@media screen and (max-width: 1024px) {
margin-right: 4%;
margin-top: 0;
}
}
&::after {
margin-top: 3px;
margin-left: auto;
content: "\f138";
color: #fff;
font-family: "Font Awesome 5 Free";
position: absolute;
right: 20px;
@media screen and (max-width: 767px) {
margin-left: 13.02vw;
}
}
&--inquiry {
background: #009944;
&::before {
content: "\f0e0";
font-family: "Font Awesome 5 Free";
font-weight: 700;
}
}
&--fcInquiry {
background: #ff9601;
&::before {
content: "\f0e0";
font-family: "Font Awesome 5 Free";
font-weight: 700;
}
}
&--quotation {
background: #ff9601;
&::before {
content: "\f1ec";
font-family: "Font Awesome 5 Free";
font-weight: 700;
}
}
&--line {
background: #01b902;
&::before {
content: "\f3c0";
font-family: "Font Awesome 5 Brands";
font-weight: 500;
}
}
&--tel {
margin-top: 0;
margin-left: 0;
background: #ff6215;
@media screen and (max-width: 1024px) {
margin-left: 0;
}
@media screen and (max-width: 767px) {
max-width: 100%;
margin-top: 4%;
margin-left: 0;
}
&::before {
content: "\f879";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
}
&Text {
margin-right: 1.5em;
}
}
}
&__contents {
max-width: 940px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 0 3%;
}
@media screen and (max-width: 767px) {
padding: 0 6%;
}
}
}
.apart-paint-page__top {
width: 100%;
padding-bottom: 20px;
position: relative;
@media (max-width: 1024px) {
padding-bottom: 2%;
}
@media (max-width: 767px) {
padding-bottom: 2%;
}
&__bg {
padding: 40px 0 60px;
background: url(../images/apart-paint/top_bg-01_pc.jpg) repeat top left / auto;
@media (max-width: 1024px) {
padding: 4% 0 6%;
}
@media (max-width: 767px) {
padding: 6% 0 8%;
background-size: 6.5px;
}
}
&__head {
width: 100%;
max-width: 940px;
margin: 0 auto 30px;
@media (max-width: 1024px) {
margin: 0 auto 3%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 4%;
padding: 0 6%;
}
img {
width: auto;
height: auto;
}
}
&__cnt {
width: 100%;
max-width: 800px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 8%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__list {
padding: 50px 10px 60px 60px;
display: -moz-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: column;
-webkit-box-direction: normal;
flex-direction: column;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background: #fff;
border-radius: 25px;
filter: drop-shadow(1px 3px 4px #d5d5d5);
@media (max-width: 1024px) {
padding: 5% 1% 6% 6%;
border-radius: 20px;
}
@media (max-width: 767px) {
padding: 7% 1% 7% 7%;
border-radius: 15px;
}
}
&__item {
width: 100%;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
@media (max-width: 1024px) {
margin-bottom: 2%;
}
@media (max-width: 767px) {
margin-bottom: 4%;
}
}
&__txt {
display: -moz-flexbox;
display: -webkit-box;
display: flex;
-moz-flex-align: center;
-webkit-box-align: center;
align-items: center;
@media (max-width: 1024px) {}
@media (max-width: 767px) {
-moz-flex-align: start;
-webkit-box-align: start;
align-items: start;
}
&::before {
content: "";
width: 28px;
height: 28px;
margin-right: 20px;
background: url(../images/apart-paint/top_img-01_pc.png) no-repeat;
background-size: cover;
@media (max-width: 1024px) {
width: 3vw;
height: 3vw;
margin-right: 10px;
}
@media (max-width: 767px) {
width: 4.2vw;
height: 4.2vw;
margin-right: 10px;
background: url(../images/apart-paint/top_img-01_sp.png) no-repeat;
background-size: cover;
}
}
p {
font-weight: 600;
font-size: 1.8rem;
line-height: 3.6rem;
@media (max-width: 1024px) {
font-size: 1.5rem;
line-height: 2.1rem;
}
@media (max-width: 767px) {
font-size: 1.4rem;
line-height: 1.8rem;
}
@media (max-width: 450px) {
font-size: 3.1vw;
}
}
}
&__ttl {
margin-bottom: 60px;
@media (max-width: 1024px) {
margin-bottom: 6%;
}
@media (max-width: 767px) {}
img {
width: 100%;
height: 350px;
object-fit: cover;
@media (max-width: 1024px) {
height: 35vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__img {
width: 100%;
max-width: 940px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 4%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
}
.apart-paint-page__market {
width: 100%;
padding: 60px 0;
position: relative;
background: url(../images/apart-paint/market_bg-01_pc.jpg) repeat top left / auto;
@media (max-width: 1024px) {
padding: 4.5% 0 6%;
}
@media (max-width: 767px) {
padding-bottom: 8%;
background-size: 6.5px;
}
&__head {
width: 100%;
max-width: 940px;
margin: 0 auto 30px;
@media (max-width: 1024px) {
margin: 0 auto 3%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 4%;
padding: 0 6%;
}
}
&__list {
width: 100%;
max-width: 960px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 4%;
}
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__item {
width: 100%;
padding-bottom: 40px;
@media (max-width: 1024px) {
padding-bottom: 4%;
}
@media (max-width: 767px) {
padding-bottom: 3%;
}
&:last-child {
padding-bottom: 0;
}
&__cnt {
padding: 30px 0;
background: #fff;
@media (max-width: 1024px) {
padding: 3% 0;
}
@media (max-width: 767px) {
padding: 4% 0 5%;
}
}
&__head {
width: 100%;
max-width: 920px;
margin: 0 auto 30px;
@media (max-width: 1024px) {
margin: 0 auto 3%;
padding: 0 2%;
}
@media (max-width: 767px) {
margin: 0 auto 5%;
padding: 0 3%;
}
&__cnt {
width: 100%;
height: 60px;
background: #009944;
display: -moz-flexbox;
display: -webkit-box;
display: flex;
-moz-flex-align: center;
-webkit-box-align: center;
align-items: center;
border-radius: 10px;
overflow: hidden;
@media (max-width: 1024px) {
height: 6vw;
}
@media (max-width: 767px) {
height: 10vw;
border-radius: 6px;
}
}
&-left {
width: 55px;
height: 100%;
border-radius: 10px 0 0 10px;
background: #fdff77;
display: -moz-flexbox;
display: -webkit-box;
display: flex;
-moz-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-moz-flex-align: center;
-webkit-box-align: center;
align-items: center;
@media (max-width: 1024px) {
width: 6vw;
}
@media (max-width: 767px) {
width: 8vw;
border-radius: 6px 0 0 6px;
}
&__img {
width: 100%;
&.w-33 {
max-width: 35px;
@media (max-width: 1024px) {
max-width: 3.5vw;
}
@media (max-width: 767px) {
max-width: 5vw;
}
}
&.w-43 {
max-width: 43px;
@media (max-width: 1024px) {
max-width: 4.3vw;
}
@media (max-width: 767px) {
max-width: 6vw;
}
}
&.w-42 {
max-width: 42px;
@media (max-width: 1024px) {
max-width: 4.2vw;
}
@media (max-width: 767px) {
max-width: 6vw;
}
}
}
}
&-right {
margin-left: 30px;
@media (max-width: 1024px) {
margin-left: 3%;
}
@media (max-width: 767px) {
margin-left: 5%;
}
p {
font-weight: 700;
font-size: 2.6rem;
color: #fff;
@media (max-width: 1024px) {
font-size: 2.4vw;
}
@media (max-width: 767px) {
font-size: 3.5vw;
}
}
}
}
&__ttl {
width: 100%;
max-width: 900px;
margin: 0 auto 30px;
display: -moz-flexbox;
display: -webkit-box;
display: flex;
-moz-flex-align: center;
-webkit-box-align: center;
align-items: center;
@media (max-width: 1024px) {
margin: 0 auto 3%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 5%;
padding: 0 3%;
}
p {
font-weight: 700;
font-size: 2.2rem;
color: #111;
@media (max-width: 1024px) {
font-size: 1.45rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 1.8rem;
}
}
&::before {
content: "";
width: 5px;
margin-right: 10px;
background: #ff6216;
display: inline-block;
align-self: stretch;
@media (max-width: 1024px) {}
@media (max-width: 767px) {
width: 3px;
margin-right: 7px;
}
}
}
&__img {
width: 100%;
max-width: 900px;
margin: 0 auto 30px;
@media (max-width: 1024px) {
margin: 0 auto 3%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 4%;
padding: 0 5%;
}
}
&__txt {
width: 100%;
max-width: 900px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 4%;
}
@media (max-width: 767px) {
padding: 0 5%;
}
p {
font-weight: 500;
font-size: 1.6rem;
line-height: 3.2rem;
color: #111;
@media (max-width: 1024px) {
font-size: 1.45rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 2.4rem;
}
}
}
}
}
.apart-paint-page__case {
width: 100%;
padding: 60px 0;
position: relative;
@media (max-width: 1024px) {
padding: 6% 0;
}
@media (max-width: 767px) {
padding: 7% 0 8%;
}
&__head {
width: 100%;
max-width: 940px;
margin: 0 auto 40px;
@media (max-width: 1024px) {
margin: 0 auto 4%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 6%;
padding: 0 6%;
}
}
&__txt {
width: 100%;
max-width: 940px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 4%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
p {
font-weight: 500;
font-size: 1.6rem;
line-height: 3.2rem;
color: #111;
@media (max-width: 1024px) {
font-size: 1.45rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 2.4rem;
}
}
&:last-child {
margin: 0 auto;
}
}
}
.apart-paint-page__cmp {
width: 100%;
padding: 50px 0;
position: relative;
background: url(../images/apart-paint/cmp_bg-01_pc.jpg) repeat top left / auto;
@media (max-width: 1024px) {
padding: 5% 0;
}
@media (max-width: 767px) {
margin: 0 auto 5%;
padding: 7% 0 8%;
background-size: 6px;
}
&__head {
width: 100%;
max-width: 940px;
margin: 0 auto 30px;
@media (max-width: 1024px) {
margin: 0 auto 3%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 5%;
padding: 0 6%;
}
&.mb-60 {
max-width: 940px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
margin: 0 auto 6%;
}
@media (max-width: 767px) {
margin: 0 auto 6%;
}
}
&.mb-40 {
max-width: 940px;
margin: 0 auto 40px;
@media (max-width: 1024px) {
margin: 0 auto 4%;
}
@media (max-width: 767px) {
margin: 0 auto 6%;
}
}
}
&__img {
width: 100%;
max-width: 940px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
margin: 0 auto 5%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 6%;
padding: 0 3%;
}
&-02 {
max-width: 580px;
margin: 0 auto 30px;
@media (max-width: 1024px) {
max-width: 58vw;
margin: 0 auto 3%;
padding: 0 4%;
}
@media (max-width: 767px) {
max-width: 78vw;
margin: 0 auto 5%;
padding: 0;
}
}
&-03 {
max-width: 800px;
margin: 0 auto 20px;
@media (max-width: 1024px) {
margin: 0 auto 2%;
padding: 0 5%;
}
@media (max-width: 767px) {
margin: 0 auto 3%;
padding: 0 3%;
}
}
&-04 {
max-width: 695px;
margin: 0 auto;
padding-bottom: 50px;
@media (max-width: 1024px) {
max-width: 69.5vw;
padding-bottom: 5%;
}
@media (max-width: 767px) {
max-width: 86vw;
padding-bottom: 7%;
}
}
&-05 {
width: 100%;
max-width: 130px;
margin: 0 auto;
padding-bottom: 50px;
@media (max-width: 1024px) {
max-width: 13vw;
padding-bottom: 5%;
}
@media (max-width: 767px) {
max-width: 15vw;
padding-bottom: 7%;
}
}
}
&__cnt {
width: 100%;
max-width: 980px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 4%;
}
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__bg {
&-01 {
background: #fff;
}
&-02 {
width: 100%;
max-width: 900px;
margin: 0 auto 50px;
padding: 40px 0;
background: #ffdfb7;
@media (max-width: 1024px) {
max-width: 92%;
margin: 0 auto 5%;
padding: 4% 0;
}
@media (max-width: 767px) {
max-width: 94%;
margin-bottom: 7%;
padding: 5% 0;
}
}
}
&__ttl {
width: 100%;
margin-bottom: 30px;
@media (max-width: 1024px) {
margin-bottom: 3%;
}
@media (max-width: 767px) {
margin-bottom: 5%;
}
}
&__txt {
margin-bottom: 40px;
@media (max-width: 1024px) {
margin-bottom: 4%;
}
@media (max-width: 767px) {
margin-bottom: 8%;
}
&-01 {
width: 100%;
max-width: 800px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 5%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
p {
text-align: start;
font-weight: 500;
font-size: 1.6rem;
line-height: 3.2rem;
color: #111;
@media (max-width: 1024px) {
font-size: 1.45rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 2.4rem;
}
}
}
p {
text-align: center;
font-weight: 500;
font-size: 1.6rem;
line-height: 3.2rem;
color: #111;
@media (max-width: 1024px) {
font-size: 1.45rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 2.4rem;
}
}
}
}
.apart-paint-page__explain {
width: 100%;
position: relative;
padding: 40px 0 80px;
@media (max-width: 1024px) {
padding: 4% 0 8%;
}
@media (max-width: 767px) {
padding: 6% 0 8%;
}
&__head {
width: 100%;
max-width: 940px;
margin: 0 auto 40px;
@media (max-width: 1024px) {
margin: 0 auto 4%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 6%;
padding: 0 6%;
}
}
&__txt {
width: 100%;
max-width: 940px;
margin: 0 auto 30px;
@media (max-width: 1024px) {
margin: 0 auto 3%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 5%;
padding: 0 6%;
}
p {
font-weight: 500;
font-size: 1.6rem;
line-height: 3.2rem;
color: #111;
@media (max-width: 1024px) {
font-size: 1.45rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 2.4rem;
}
}
&:last-child {
margin: 0 auto;
}
}
&__img {
width: 100%;
max-width: 940px;
margin: 0 auto 30px;
@media (max-width: 1024px) {
margin: 0 auto 3%;
padding: 0 4%;
}
@media (max-width: 767px) {
margin: 0 auto 5%;
padding: 0 6%;
}
}
}
.apart-paint-page__form {
width: 100%;
position: relative;
&__head {
img {
width: 100%;
height: 300px;
object-fit: cover;
@media (max-width: 1024px) {
height: 31.3vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
}
.section-cta {
box-sizing: border-box;
position: relative;
padding: 80px 0 100px;
background: url(../images/apart-paint/cta_bg_img_01_pc.jpg) no-repeat;
background-position: center top;
background-size: cover;
@media screen and (max-width: 1024px) {
padding: 8% 0 10%;
}
@media screen and (max-width: 767px) {
padding: 12% 0 10%;
background: #fff;
}
&__heading {
width: 100%;
max-width: 900px;
margin: 0 auto 60px;
@media screen and (max-width: 1024px) {
margin: 0 auto 6%;
}
@media screen and (max-width: 767px) {
margin: 0 auto 8%;
}
h2 {
box-sizing: border-box;
text-align: center;
@media screen and (max-width: 1024px) {
padding: 0 3%;
}
@media screen and (max-width: 767px) {
padding: 0 6%;
}
}
}
&__contents {
width: 100%;
max-width: 980px;
margin: 0 auto;
position: relative;
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
box-sizing: border-box;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media screen and (max-width: 767px) {
padding: 0 6%;
}
}
&__left {
width: 420px;
margin-right: 10px;
@media screen and (max-width: 1024px) {
width: 40%;
margin-right: 1.3%;
}
@media screen and (max-width: 767px) {
width: 100%;
margin-right: 0;
margin-bottom: 8%;
}
&__tel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height: 100px;
filter: drop-shadow(-5px -3px 6px #fff);
background: #ff7400;
border-radius: 20px;
@media screen and (max-width: 1024px) {
height: 90px;
}
@media screen and (max-width: 767px) {
height: 80px;
border-radius: 10px;
}
&__number {
position: relative;
font-size: 4.2rem;
line-height: 4.2rem;
color: #fff;
font-weight: bold;
padding-left: 45px;
box-sizing: border-box;
letter-spacing: 1px;
margin-top: 5px;
@media screen and (max-width: 1024px) {
font-size: 3.2rem;
line-height: 3.2rem;
padding-left: 40px;
letter-spacing: 0.5px;
}
@media screen and (max-width: 767px) {
font-size: 3.6rem;
line-height: 3.6rem;
letter-spacing: 1px;
margin-top: 0;
}
@media (max-width: 425px) {
font-size: 3rem;
line-height: 3rem;
letter-spacing: 1px;
}
&:before {
content: "";
position: absolute;
margin-right: 3px;
top: 3px;
left: 0;
content: "\f879";
color: #fff;
display: inline-block;
font-size: 3rem;
font-family: "Font Awesome 5 Free";
font-weight: 900;
transform: rotate(-90deg);
@media screen and (max-width: 1024px) {
font-size: 2.6rem;
}
@media screen and (max-width: 767px) {
font-size: 2.4rem;
}
}
}
&__text {
color: #fff;
font-size: 1.6rem;
font-weight: 500;
display: block;
margin-top: 4px;
@media screen and (max-width: 1024px) {
margin-top: 5px;
transform: translateX(-8%);
}
@media screen and (max-width: 767px) {
font-size: 1.4rem;
line-height: 1.4rem;
margin-top: 3px;
transform: initial;
}
@media (max-width: 425px) {
font-size: 1.2rem;
line-height: 1.2rem;
letter-spacing: 1px;
}
}
&.filter {
filter: none;
}
}
}
&__right {
width: calc(100% - 430px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
@media screen and (max-width: 1024px) {
width: 58.7%;
}
@media screen and (max-width: 767px) {
width: 100%;
}
&__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(33.3% - 6.8px);
margin-right: 10px;
height: 100px;
border-radius: 20px;
box-sizing: border-box;
padding: 45px 10px 5px;
font-size: 1.8rem;
line-height: 2.2rem;
font-weight: bold;
text-align: center;
position: relative;
letter-spacing: 1px;
@media screen and (max-width: 1024px) {
height: 90px;
width: 31.96%;
margin-right: 2%;
font-size: 1.6rem;
line-height: 2rem;
padding: 40px 5px 3px;
}
@media screen and (max-width: 767px) {
width: 100%;
margin-right: 0;
margin-bottom: 5%;
height: 50px;
border-radius: 10px;
font-size: 1.4rem;
line-height: 1.5rem;
padding: 0 5px 0 20px;
br {
display: none;
}
}
&:nth-child(1) {
background: #15104a;
color: #fff;
}
&:nth-child(1):before {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
content: "\f0e0";
color: #fff;
display: inline-block;
font-size: 2.8rem;
font-family: "Font Awesome 5 Free";
font-weight: 400;
@media screen and (max-width: 1024px) {
font-size: 2.6rem;
top: 14px;
}
@media screen and (max-width: 767px) {
font-size: 2.4rem;
left: 50px;
transform: translateY(-50%);
top: 50%;
}
@media (max-width: 425px) {
left: 30px;
}
}
&:nth-child(2) {
background: #fff;
border: 1px solid #0068b7;
color: #0068b7;
}
&:nth-child(2):before {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
content: "\f15c";
color: #0068b7;
display: inline-block;
font-size: 2.8rem;
font-family: "Font Awesome 5 Free";
font-weight: 900;
@media screen and (max-width: 1024px) {
font-size: 2.6rem;
top: 14px;
}
@media screen and (max-width: 767px) {
font-size: 2.4rem;
left: 50px;
transform: translateY(-50%);
top: 50%;
}
@media (max-width: 425px) {
left: 30px;
}
}
&:nth-child(3) {
background: #fff;
border: 1px solid #00b900;
margin-right: 0;
color: #00b900;
}
&:nth-child(3):before {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
content: "\f3c0";
color: #00b900;
display: inline-block;
font-size: 2.8rem;
font-family: "Font Awesome 5 brands";
font-weight: 400;
@media screen and (max-width: 1024px) {
font-size: 2.6rem;
top: 14px;
}
@media screen and (max-width: 767px) {
font-size: 2.4rem;
left: 50px;
transform: translateY(-50%);
top: 50%;
}
@media (max-width: 425px) {
left: 30px;
}
}
}
}
}
}
.pg_apart-paint {
margin: 0 auto;
//background-image: linear-gradient(90deg, #f1f1f1 1px, transparent 0),
//linear-gradient(#f1f1f1 1px, transparent 0);
//background-size: 14px 14px;
max-width: 940px;
@media screen and(max-width: 767px) {
margin: 0 auto 0;
//background-size: 8px 8px;
}
img {
display: block;
margin: 0 auto;
width: auto;
max-width: 100%;
}
p {
font-size: 1.6rem;
color: #333;
letter-spacing: 0.02em;
line-height: 2em;
font-weight: 400;
@media screen and(max-width: 767px) {
font-size: 1.4rem;
letter-spacing: 0.08em;
line-height: 1.8em;
}
}
a {
display: block;
text-decoration: none;
}
.width-710 {
max-width: 830px;
padding: 0 30px;
box-sizing: border-box;
margin: 0 auto;
@media screen and(max-width: 767px) {
padding: 0 5%;
}
}
.width-940 {
max-width: 940px;
box-sizing: border-box;
margin: 0 auto;
@media screen and(max-width: 767px) {
padding: 0 5%;
}
}
span:not([class]) {
color: #ff6215;
}
.bg_tan {
background-color: #fffef4;
}
.bg_green {
background-color: #249788;
}
.display_pc {
display: block;
@media screen and(max-width: 767px) {
display: none;
}
}
.display_sp {
display: none;
@media screen and(max-width: 767px) {
display: block;
}
}
.mb-20 {
margin-bottom: 20px;
@media screen and(max-width: 767px) {
margin-bottom: 4%;
}
}
.mb-30 {
margin-bottom: 30px;
@media screen and(max-width: 767px) {
margin-bottom: 5%;
}
}
.mb-40 {
margin-bottom: 40px;
@media screen and(max-width: 767px) {
margin-bottom: 6%;
}
}
.mb-50 {
margin-bottom: 50px;
@media screen and(max-width: 767px) {
margin-bottom: 7%;
}
}
.mb-60 {
margin-bottom: 60px;
@media screen and(max-width: 767px) {
margin-bottom: 8%;
}
}
.mb-80 {
margin-bottom: 80px;
@media screen and(max-width: 767px) {
margin-bottom: 10%;
}
}
.mb-100 {
margin-bottom: 100px;
@media screen and(max-width: 767px) {
margin-bottom: 12%;
}
}
.mt-20 {
margin-top: 20px;
@media screen and(max-width: 767px) {
margin-top: 4%;
}
}
.mt-40 {
margin-top: 40px;
@media screen and(max-width: 767px) {
margin-top: 6%;
}
}
.mt-50 {
margin-top: 50px;
@media screen and(max-width: 767px) {
margin-top: 7%;
}
}
}
/*section_mv*/
.pg_apart-paint .section_mv {
&__inner {
padding: 40px 80px 60px;
@media screen and(max-width: 767px) {
padding: 6% 5% 8%;
}
}
}
/*section_maker*/
.pg_apart-paint .section_maker {
&__inner {
padding: 60px 30px 85px;
@media screen and(max-width: 767px) {
padding: 8% 5% 10.5%;
}
}
}
/*integral*/
.pg_apart-paint {
background-image: linear-gradient(90deg, #f1f1f1 1px, transparent 0),
linear-gradient(#f1f1f1 1px, transparent 0);
background-size: 14px 14px;
padding-top: 60px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint {
background-size: 8px 8px;
padding-top: 8%;
}
}
.pg_apart-paint img {
display: block;
margin: 0 auto;
width: auto;
max-width: 100%;
}
.pg_apart-paint a {
display: block;
text-decoration: none;
}
.pg_apart-paint .width-710 {
max-width: 830px;
padding: 0 30px;
box-sizing: border-box;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .width-710 {
padding: 0 5%;
}
}
.pg_apart-paint span:not([class]) {
color: #ff6215;
}
.pg_apart-paint .bg_tan {
background-color: #fffef4;
}
.pg_apart-paint .bg_green {
background-color: #249788;
}
.pg_apart-paint .bg_orange {
background-color: #ff6215;
}
.pg_apart-paint .display_pc {
display: block;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .display_pc {
display: none;
}
}
.pg_apart-paint .display_sp {
display: none;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .display_sp {
display: block;
}
}
.pg_apart-paint .mb-20 {
margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mb-20 {
margin-bottom: 4%;
}
}
.pg_apart-paint .mb-30 {
margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mb-30 {
margin-bottom: 7%;
}
}
.pg_apart-paint .mb-40 {
margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mb-40 {
margin-bottom: 6%;
}
}
.pg_apart-paint .mb-50 {
margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mb-50 {
margin-bottom: 7%;
}
}
.pg_apart-paint .mb-60 {
margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mb-60 {
margin-bottom: 8%;
}
}
.pg_apart-paint .mb-80 {
margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mb-80 {
margin-bottom: 10%;
}
}
.pg_apart-paint .mb-100 {
margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mb-100 {
margin-bottom: 12%;
}
}
.pg_apart-paint .mt-20 {
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mt-20 {
margin-top: 4%;
}
}
.pg_apart-paint .mt-40 {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mt-40 {
margin-top: 6%;
}
}
.pg_apart-paint .mt-50 {
margin-top: 50px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .mt-50 {
margin-top: 7%;
}
}
.pg_apart-paint .section_construction {
margin-bottom: 80px;
@media screen and (max-width: 767px) {
margin-bottom: 10%;
}
}
/*section_mv*/
.pg_apart-paint .section_mv__inner__text {
padding: 0;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_mv__inner__text {
padding: 0;
}
}
/*section_maintenance*/
.pg_apart-paint .section_maintenance {
padding-top: 80px;
@media screen and (max-width: 767px) {
padding-top: 10%;
}
}
.pg_apart-paint .section_maintenance__inner {
padding: 34px 0 80px;
}
@media screen and (max-width: 1024px) {
.pg_apart-paint .section_maintenance__inner {
padding: 34px 5% 80px;
}
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_maintenance__inner {
padding: 5.6% 5% 10%;
}
}
/*section_symptoms*/
.pg_apart-paint .section_symptoms__inner {
padding: 40px 26px 70px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_symptoms__inner {
padding: 6% 5% 9%;
}
}
.pg_apart-paint .section_symptoms__inner__list {
max-width: 706px;
margin: 0 auto;
margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_symptoms__inner__list {
margin-bottom: 8%;
}
}
.pg_apart-paint .section_symptoms__inner__list li {
float: left;
max-width: 345px;
width: 100%;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_symptoms__inner__list li {
width: 49%;
}
}
.pg_apart-paint .section_symptoms__inner__list li:not(:nth-of-type(2n)) {
margin-right: 16px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_symptoms__inner__list li:not(:nth-of-type(2n)) {
margin-right: 2%;
}
}
.pg_apart-paint .section_symptoms__inner__list li:nth-of-type(n + 3) {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_symptoms__inner__list li:nth-of-type(n + 3) {
margin-top: 3%;
}
}
.pg_apart-paint .section_symptoms__inner__list--item {
border-radius: 10px;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_symptoms__inner__list--item {
border-radius: 8px;
}
}
.pg_apart-paint .section_symptoms__inner__list--item h3 {
font-size: 2.4rem;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.4em;
padding: 10px 0;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_symptoms__inner__list--item h3 {
font-size: 1.4rem;
letter-spacing: 0;
padding: 4% 0;
}
}
@media screen and (max-width: 370px) {
.pg_apart-paint .section_symptoms__inner__list--item h3 {
font-size: 1.2rem;
}
}
.pg_apart-paint .section_symptoms__inner__list--item p {
padding: 30px 18px;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_symptoms__inner__list--item p {
padding: 5% 4%;
font-size: 1.2rem;
}
}
/*section_method*/
.pg_apart-paint .section_method__inner {
padding: 50px 30px 70px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_method__inner {
padding: 7% 5% 9%;
}
}
.pg_apart-paint .section_method__inner__text__box {
display: flex;
align-items: center;
}
.pg_apart-paint .section_method__inner__text__box__image {
max-width: 300px;
margin-right: 20px;
float: left;
width: 100%;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_method__inner__text__box {
display: block;
}
.pg_apart-paint .section_method__inner__text__box__image {
width: 49%;
margin-right: 4%;
}
}
/*section_point*/
.pg_apart-paint .section_point__inner {
padding: 50px 30px 70px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner {
padding: 7% 5% 9%;
}
}
.pg_apart-paint .section_point__inner__contents {
border-radius: 10px;
overflow: hidden;
}
.pg_apart-paint .section_point__inner__contents--ttl {
font-size: 2.4rem;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.4em;
padding: 10px 0;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__contents--ttl {
font-size: 1.6rem;
letter-spacing: 0;
padding: 4% 0;
}
}
@media screen and (max-width: 370px) {
.pg_apart-paint .section_point__inner__contents--ttl {
font-size: 1.4rem;
}
}
.pg_apart-paint .section_point__inner__contents--ttlAlert {
padding: 0;
box-sizing: border-box;
position: relative;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__contents--ttlAlert {
padding: 0;
}
}
@media screen and (max-width: 370px) {
.pg_apart-paint .section_point__inner__contents--ttlAlert {
padding: 0;
}
}
.pg_apart-paint .section_point__inner__contents--ttlAlert>b {
width: 240px;
padding: 10px 20px 10px 30px;
color: #ff6215;
background: #fff100;
box-sizing: border-box;
display: flex;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__contents--ttlAlert>b {
width: 140px;
padding: 2%;
justify-content: center;
}
}
@media screen and (max-width: 370px) {
.pg_apart-paint .section_point__inner__contents--ttlAlert>b {
width: 110px;
}
}
.pg_apart-paint .section_point__inner__contents--ttlAlert>b::after {
content: "\f071";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: 0.5em;
}
.pg_apart-paint .section_point__inner__contents--ttlAlertText {
width: calc(100% - 240px);
margin-left: 240px;
padding: 10px 0;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__contents--ttlAlertText {
width: calc(100% - 140px);
margin-left: 140px;
padding: 4% 0;
}
}
@media screen and (max-width: 480px) {
.pg_apart-paint .section_point__inner__contents--ttlAlertText {
padding: 4%;
text-align: left;
}
}
@media screen and (max-width: 370px) {
.pg_apart-paint .section_point__inner__contents--ttlAlertText {
width: calc(100% - 110px);
margin-left: 110px;
}
}
.pg_apart-paint .section_point__inner__contents--image {
padding: 30px 40px 0;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__contents--image {
padding: 5% 6% 0;
}
}
.pg_apart-paint .section_point__inner__contents--text {
padding: 40px 80px;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__contents--text {
padding: 6%;
}
}
.pg_apart-paint .section_point__inner__list {
padding: 30px 40px 0;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__list {
padding: 5% 6% 0;
}
}
.pg_apart-paint .section_point__inner__list li {
float: left;
max-width: calc(50% - 8px);
width: 100%;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__list li {
max-width: 49%;
}
}
.pg_apart-paint .section_point__inner__list li:not(:nth-of-type(2n)) {
margin-right: 16px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__list li:not(:nth-of-type(2n)) {
margin-right: 2%;
}
}
.pg_apart-paint .section_point__inner__list li:nth-of-type(n + 3) {
margin-top: 16px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__list li:nth-of-type(n + 3) {
margin-top: 2%;
}
}
.pg_apart-paint .section_point__inner__list--item {
border-radius: 10px;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__list--item {
border-radius: 8px;
}
}
.pg_apart-paint .section_point__inner__list--item h3 {
font-size: 2rem;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.1em;
font-feature-settings: "palt";
letter-spacing: -0.01em;
padding: 10px 0;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__list--item h3 {
font-size: 1.2rem;
padding: 4% 0;
}
}
@media screen and (max-width: 430px) {
.pg_apart-paint .section_point__inner__list--item h3 {
font-size: 1rem;
}
}
.pg_apart-paint .section_point__inner__list--arrRight {
position: relative;
}
.pg_apart-paint .section_point__inner__list--arrRight::after {
margin: auto;
width: 58px;
height: 43px;
content: "";
display: inline-block;
background: url(../../../../images/housemaker/daiwahouse/section-point_arr.png) 50% 50% / cover no-repeat;
position: absolute;
top: 0;
bottom: 0;
right: -40px;
z-index: 5;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__list--arrRight::after {
width: 40px;
height: 30px;
right: -28px;
}
}
@media screen and (max-width: 370px) {
.pg_apart-paint .section_point__inner__list--arrRight::after {
width: 29px;
height: 21px;
right: -20px;
}
}
.pg_apart-paint .section_point__inner__list--arrLowerLeft {
position: relative;
}
.pg_apart-paint .section_point__inner__list--arrLowerLeft::after {
margin: auto;
width: 58px;
height: 43px;
content: "";
display: inline-block;
background: url(../../../../images/housemaker/daiwahouse/section-point_arr.png) 50% 50% / cover no-repeat;
position: absolute;
bottom: -30px;
left: -40px;
z-index: 5;
transform: rotate(135deg);
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_point__inner__list--arrLowerLeft::after {
width: 40px;
height: 30px;
bottom: -18px;
left: -20px;
}
}
@media screen and (max-width: 370px) {
.pg_apart-paint .section_point__inner__list--arrLowerLeft::after {
width: 29px;
height: 21px;
bottom: -15px;
left: -20px;
}
}
/*section_construction*/
.pg_apart-paint .section_construction__inner {
padding: 30px 30px 80px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_construction__inner {
padding: 5% 5% 10%;
}
}
/*section_works*/
.pg_apart-paint .section_works__inner {
padding: 40px 30px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner {
padding: 6% 5%;
}
}
.pg_apart-paint .section_works__inner .works-list {
margin: 0 auto;
}
.pg_apart-paint .section_works__inner .works-list-item {
max-width: 370px;
width: 100%;
float: left;
}
@media screen and (max-width: 1024px) {
.pg_apart-paint .section_works__inner .works-list-item {
width: 48%;
}
}
.pg_apart-paint .section_works__inner .works-list-item:not(:nth-of-type(2n)) {
margin-right: 30px;
}
@media screen and (max-width: 1024px) {
.pg_apart-paint .section_works__inner .works-list-item:not(:nth-of-type(2n)) {
margin-right: 3%;
}
}
.pg_apart-paint .section_works__inner .works-list-item:nth-of-type(n + 3) {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner .works-list-item:nth-of-type(n + 3) {
margin-top: 4%;
}
}
.pg_apart-paint .section_works__inner .works-list-thumb {
height: 280px;
width: 100%;
position: relative;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner .works-list-thumb {
height: 29vw;
}
}
.pg_apart-paint .section_works__inner .works-list-thumb:after {
content: "";
width: 119px;
height: 97px;
background-image: url(../../../../images/housemaker/sekisuihouse/section-works_02.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
position: absolute;
bottom: -10px;
right: 0;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner .works-list-thumb:after {
width: 60px;
height: 50px;
bottom: -5px;
right: 5px;
}
}
.pg_apart-paint .section_works__inner .works-list-thumb img {
display: block;
height: 230px;
width: 100%;
object-fit: cover;
font-family: "object-fit: cover;";
overflow: hidden;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner .works-list-thumb img {
height: 29vw;
}
}
.pg_apart-paint .section_works__inner .works-list-info {
padding: 35px 0 0;
box-sizing: border-box;
position: relative;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner .works-list-info {
padding: 15px 0 0;
}
}
.pg_apart-paint .section_works__inner .works-list-info--voice {
margin-bottom: 20px;
padding: 20px;
background: #eee;
position: relative;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner .works-list-info--voice {
padding: 5%;
margin-bottom: 5%;
}
}
.pg_apart-paint .section_works__inner .works-list-info--voice:after {
content: "";
position: absolute;
top: -48px;
right: 30px;
border: 25px solid transparent;
border-bottom: 30px solid #eee;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner .works-list-info--voice:after {
top: -24px;
right: 24px;
border: 14px solid transparent;
border-bottom: 14px solid #eee;
}
}
.pg_apart-paint .section_works__inner .works-list-info--voice p {
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
max-height: calc(2em * 3);
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner .works-list-info--voice p {
max-height: calc(1.8em * 3);
}
}
.pg_apart-paint .section_works__inner .works-list-info .works_customer {
font-size: 1.6rem;
color: #333;
letter-spacing: 0.02em;
line-height: 2em;
font-weight: 400;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
max-height: calc(2em * 1);
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_works__inner .works-list-info .works_customer {
font-size: 1.4rem;
letter-spacing: 0.08em;
line-height: 1.8em;
max-height: calc(1.8em * 1);
}
}
/*section_inquiry*/
.pg_apart-paint .section_inquiry {
background: #fff799;
background-size: 12px 12px;
background-image: radial-gradient(#d7d7d7 10%, transparent 10%);
padding: 40px 0;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_inquiry {
background-size: 8px 8px;
padding: 6% 0;
background-size: 10px 10px;
}
}
.pg_apart-paint .section_inquiry__inner__button {
margin-top: -30px;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_inquiry__inner__button {
margin-top: -5vw;
}
}
.pg_apart-paint .section_inquiry__inner__button a {
background: #094;
color: #fff;
text-align: center;
display: flex;
height: 90px;
justify-content: center;
align-items: center;
border-radius: 20px;
border: 4px solid #fff;
box-sizing: border-box;
font-size: 2.8rem;
position: relative;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_inquiry__inner__button a {
border: 3px solid #fff;
font-size: 1.6rem;
height: 18vw;
max-height: 60px;
border-radius: 10px;
}
}
.pg_apart-paint .section_inquiry__inner__button a i {
margin-right: 50px;
font-size: 4rem;
}
@media screen and (max-width: 767px) {
.pg_apart-paint .section_inquiry__inner__button a i {
margin-right: 5%;
font-size: 2.6rem;
}
}