@charset "utf-8";

main {
margin-top: 340px;
}

section {
margin: 0 auto;
width: var(--container);
}

section > article {
margin-bottom: 124px;
}

h3 {
font-size: 3.6rem;
font-weight: 700;
line-height: 6.0rem;
}

#service {
margin: 0 auto 120px auto;
}

#service .flex {
padding-right: 60px;
}

#service article {
width: 340px;
}

#service #service01,
#service #service02,
#service #service03 {
height: 240px;
}

#service #service02 {
width: 300px;
}


#service p {
width: 340px;
}

.container {
background: transparent;
box-shadow: none;
margin: 124px auto;
}

section > article:nth-of-type(1) ul {
margin: 48px 0;
}

section > article:nth-of-type(3) ol {
list-style: none;
padding-left: 0;
}

section > article:nth-of-type(3) li {
align-items: center;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
display: flex;
height: 136px;
justify-content: space-between;
margin-bottom: 48px;
padding: 24px 0 24px 184px;
position: relative;
}

section > article:nth-of-type(3) li:nth-child(6) {
background: #F5CB36;
}

section > article:nth-of-type(3) li::before {
content: ' ';
position: absolute;
top: 40px;
left: 64px;
width: 60px;
height: 60px;
background-size: cover;
}

section > article:nth-of-type(3) li:nth-child(1)::before {
background-image: url('../images/1.png');
}

section > article:nth-of-type(3) li:nth-child(2)::before {
background-image: url('../images/2.png');
}

section > article:nth-of-type(3) li:nth-child(3)::before {
background-image: url('../images/3.png');
}

section > article:nth-of-type(3) li:nth-child(4)::before {
background-image: url('../images/4.png');
}

section > article:nth-of-type(3) li:nth-child(5)::before {
background-image: url('../images/5.png');
}

section > article:nth-of-type(3) li:nth-child(6)::before {
background-image: url('../images/6.png');
}

section > article:nth-of-type(3) p {
margin-right: 144px;
width: 540px;
}

section > article:nth-of-type(4) article {
background: rgba(255, 255, 255, 0.9);
padding: 60px;
text-align: center;
width: 360px;
}

section > article:nth-of-type(4) h3 + p {
margin: 24px 0 80px 0;
}

section > article:nth-of-type(4) h4 {
font-size: 2rem;
position: relative;
margin-bottom: 24px;
}

section > article:nth-of-type(4) h4::after {
border-bottom: 1px solid black;
content: '';
position: absolute;
top: 2.4rem;
left: 104px;
width: 34px;
}

section > article:nth-of-type(4) svg + p {
font-size: 3.6rem;
font-weight: 700;
margin-bottom: 14px;
}

section > article:nth-of-type(4) svg {
height: 240px;
}

section > article:nth-of-type(4) span {
font-size: 2.6rem;
font-weight: 400;
}

section > article:nth-of-type(4) ul {
list-style: disc;
text-align: left;
}

.container {
margin-top: 0;
}

@media (max-width: 1400px) {

h3 {
font-size: 3.5rem;
}

section {
width: 100%;
}

#service .flex {
display: block;
width: 100%;
}

#service article,
#service p {
width: 100%;
}

#service .flex {
padding-right: 0;
}

#service article {
margin-bottom: 120px;
}

main {
margin-top: 0px;
padding: 0px 60px;
}

section > article:nth-of-type(3) li {
display: block;
font-size: 2.1rem;
font-weight: 700;
height: auto;
margin-bottom: 48px;
padding: 24px 36px 36px 120px;
}

section > article:nth-of-type(3) li::before {
top: 24px;
left: 30px;
}

section > article:nth-of-type(3) p {
font-size: 1.6rem;
font-weight: 400;
margin-right: 0;
padding: 0;
text-align: justify;
width: 100%;
}

.flex {
display: block;
}

section > article:nth-of-type(4) article {
width: 100%;
margin-bottom: 48px;
}

section > article:nth-of-type(4) h4::after {
left: 50%;
transform: translate(-50%, -50%);
}

section > article:nth-of-type(4) ul {
margin: 0 auto;
width: 240px;
}
}


@media screen and (max-width: 800px) {
main {
padding: 0px 24px;
}

h3 {
font-size: 2.4rem;
line-height: 4.0rem;
margin: 0;
}

p {
line-height: 3.0rem;
margin-bottom: 3.8rem;
}

section > article:nth-of-type(3) li::before {
top: 60px;
left: 50%;
transform: translate(-50%, -50%);
}

section > article:nth-of-type(3) li {
text-align: center;
padding: 120px 24px 24px 24px;
}

section > article:nth-of-type(3) p {
margin-top: 24px;
}

section > article:nth-of-type(4) svg {
width: 80%;
height: auto;
}

section > article:nth-of-type(4) article:nth-of-type(2) svg {
height: 120px;
}

section > article:nth-of-type(4) span {
font-size: 1.8rem;
}

section > article:nth-of-type(4) svg + p {
font-size: 2.8rem;
margin: 36px 0;
}

section > article:nth-of-type(4) h4 {
width: auto;
}

section > article:nth-of-type(4) article {
padding: 60px 24px;
}

section > article:nth-of-type(4) ul {
font-size: 1.4rem;
width: 180px;
}

#contact.container {
border-radius: 12px;
padding-top: 36px;
width: 100%;
}

#contact .title {
margin-bottom: 24px;
}
}