/* CSS Document */
#main {
margin-bottom: 47px;
}
#main .mainVisual {
padding: 48px 0 2px;
background: none;
}
#main .mainVisual h2 {
margin-bottom: 42px;
padding-left: 44px;
text-align: center;
}
#main .mainVisual p {
margin: 0 auto;
max-width: 940px;
font-size: 35px;
line-height: 1.08;
text-align: left;
text-indent: 1em;
font-weight: bold;
}
#gNavi {
margin-bottom: 34px;
}
#main .sec01 {
margin-bottom: 58px;
background: url(../img/cleaning/bg01.jpg) no-repeat right center / cover;
}
#main .sec01 .content {
padding: 37px 0 41px;
position: relative;
}
#main .headLine01 {
font-size: 53px;
font-weight: bold;
color: #000;
}
#main .headLine01:before {
content: "â—";
color: #a57b2b;
}
#main .headLine01 .en {
font-size: 21px;
font-weight: lighter;
}
#main .sec01 ul {
margin: 0 15px;
font-size: 32px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#main .sec01 ul p {
font-size: 32px;
}
#main .sec01 ul li {
margin-bottom: 61px;
padding: 0 0 2px 32px;
position: relative;
font-weight: bold;
line-height: 1;
letter-spacing: 1px;
border-bottom: 1px solid #a57b2b;
}
#main .sec01 ul li:after {
position: absolute;
bottom: -50px;
left: 176px;
width: 9px;
height: 50px;
background: url("../img/cleaning/arrow01.png") no-repeat center / cover;
content: "";
}
#main .sec01 ul li:last-child {
margin-bottom: 0;
}
#main .sec01 ul li:last-child:after {
display: none;
}
#main .sec01 ul li p {
text-indent: 0;
}
#main .sec01 ul .num {
position: absolute;
left: -13px;
top: -4px;
background-color: #a57b2b;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
font-size: 40px;
border-radius: 50%;
}
#main .sec01 .imgTtl {
position: absolute;
right: 52px;
top: 24px;
}
#main .sec02 {
margin-bottom: 49px;
}
#main .sec02 ul {
display: flex;
justify-content: center;
}
#main .sec02 ul li {
position: relative;
margin: 0 50px;
}
#main .sec02 ul li:after {
position: absolute;
right: -90px;
top: calc(50% - 17px);
width: 80px;
height: 10px;
background: url("../img/cleaning/arrow02.png") no-repeat center / cover;
content: "";
}
#main .sec02 ul li:last-child:after {
display: none;
}
#main .sec03 {
margin-bottom: 16px;
background: url(../img/cleaning/bg02.jpg) no-repeat left center / cover;
}
#main .sec03 .content {
padding: 32px 0 21px;
}
#main .headLine01 .color {
color: #a57b2b;
}
#main .headLine01 .small {
font-size: 35px;
}
#main .sec03 .headLine01 {
margin-bottom: 10px;
}
#main .sec03 p {
font-size: 26px;
font-weight: bold;
text-indent: 0;
}
#main .sec03 dl {
margin: 17px 50px 5px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
#main .sec03 dt {
font-size: 32px;
line-height: 1.15;
font-weight: bold;
padding-left: 1.5em;
text-indent: -1.5em;
letter-spacing: 1px;
}
#main .sec03 dt:before {
content: "â—";
color: #a57b2b;
}
#main .sec03 dd {
display: flex;
align-items: center;
font-size: 32px;
font-weight: bold;
color: #a57b2b;
}
#main .sec03 dd:before {
margin-right: 10px;
width: 80px;
height: 10px;
display: inline-block;
background: url("../img/cleaning/arrow03.png") no-repeat center / cover;
content: "";
}
#main .sec03 .note {
margin: 38px 50px 0;
font-size: 18px;
font-weight: normal;
line-height: 1.39;
}
#main .sec04 {
text-align: center;
}
#main .sec04 .btn {
margin-bottom: 17px;
}
#main .sec04 .btn a:hover {
opacity: 0.7;
}
#main .sec04 p {
font-size: 18px;
line-height: 1.1;
}
#main .sec04 p span {
font-size: 27px;
font-weight: bold;
display: block;
}
@media all and (max-width: 767px) {
#main {
margin-bottom: 33px;
}
#main .mainVisual {
padding: 5px 0 5px;
background: none;
margin-bottom: 0;
}
#main .mainVisual h2 {
padding-left: 20px;
margin: 0 auto;
width: 265px;
margin-bottom: 3px;
}
#main .mainVisual p {
margin: 0 10px;
font-size: 13px;
}
#main .sec01 {
margin-bottom: 35px;
background: url(../img/cleaning/sp_bg01.jpg) repeat-y right center / 100% auto;
}
#main .sec01 .content {
padding: 13px 0 35px;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
}
#main .headLine01 {
margin-bottom: 16px;
font-size: 26px;
min-width: inherit;
}
#main .headLine01 .en {
font-size: 11px;
}
#main .sec01 ul {
margin: 0 15px;
font-size: 16px;
align-items: center;
}
#main .sec01 ul li {
margin-bottom: 30px;
padding: 0 0 1px 16px;
letter-spacing: 1px;
border-bottom: none;
line-height: 1.1;
}
#main .sec01 ul li p {
display: inline;
font-size: 16px;
border-bottom: 1px solid #a57b2b;
}
#main .sec01 ul li:after {
bottom: -25px;
left: 50%;
width: 5px;
height: 25px;
}
#main .sec01 ul li:last-child {
margin-bottom: 0;
}
#main .sec01 ul li:last-child:after {
display: none;
}
#main .sec01 ul .num {
left: -6px;
top: -2px;
width: 20px;
height: 20px;
font-size: 20px;
}
#main .sec01 .imgTtl {
margin: 0 auto 20px;
position: relative;
right: auto;
top: auto;
text-align: center;
width: 58px;
}
#main .sec02 {
margin-bottom: 35px;
}
#main .sec02 ul li {
position: relative;
margin: 0 25px;
width: 110px;
}
#main .sec02 ul li:after {
right: -45px;
top: calc(50% - 8px);
width: 40px;
height: 5px;
}
#main .sec03 {
margin-bottom: 35px;
background: url(../img/cleaning/sp_bg02.jpg) repeat-y left center / 100% auto;
}
#main .sec03 .content {
padding: 35px 0 32px;
}
#main .headLine01 .small {
font-size: 17px;
}
#main .sec03 .headLine01 {
margin-bottom: 10px;
}
#main .sec03 p {
font-size: 13px;
}
#main .sec03 dl {
margin: 5px 0 5px;
justify-content: center;
flex-wrap: nowrap;
font-feature-settings: "palt";
}
#main .sec03 dt {
font-size: 16px;
letter-spacing: -0.5px;
}
#main .sec03 dd {
font-size: 16px;
letter-spacing: 0;
}
#main .sec03 dd:before {
margin-right: 5px;
width: 40px;
height: 5px;
}
#main .sec03 .note {
margin: 15px 0 0;
font-size: 9px;
}
#main .sec04 {
text-align: center;
}
#main .sec04 .btn {
margin: 0 auto 17px;
width: 104px;
}
#main .sec04 .btn a:hover {
opacity: 0.7;
}
#main .sec04 p {
font-size: 9px;
line-height: 1.1;
}
#main .sec04 p span {
font-size: 13px;
font-weight: bold;
display: block;
}
}