@media only screen and (min-width : 501px) {
body {
background:#65a42a url("images/pc_bg.jpg") repeat-y top center;
background-size: contain;
background-attachment: fixed;
}
}
main{
background: #fff;
}
.main{
position: relative;
}
.main-comment{
position: absolute;
width: 90%;
top: 4%;
left: 7%;
}
.main-ttl{
position: absolute;
width: 90%;
top: 36%;
left: 5%;
}
.sub-block{
background: #65a42a;
padding: 8% 0 18%;
}
.sub-lead{
width: 90%;
max-width: 440px;
margin: 0 auto;
}
.sub-comment{
width: 90%;
margin: 0 auto;
}
.sub-prof{
width: 90%;
max-width: 500px;
margin: 0 auto;
position: relative;
}
.sub-prof-ill{
position: absolute;
width: 35%;
left: -2%;
bottom: -12%;
}
.anchors{
background: #9cd88f;
padding: 12% 5% 10%;
}
.anchors-ill{
width: 80%;
margin: 0 auto;
}
.anchor-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.anchor-once{
width: 47%;
}
.sec01{
background: #65a42a;
padding: 12% 0;
}
.sec01-ttl{
width: 81.5%;
margin: 0 auto;
}
.sec01-img{
width: 88%;
position: relative;
}
.sec01-img.ajust-left{
left: 5%;
}
.sec01-img.ajust-right{
left: 7%;
}
.sec01-sub-comment{
width: 71%;
margin: 0 auto;
}
.about-retail{
width: 90%;
margin: 0 auto;
}
.sec02{
background: #4f3d31;
}
.sec02-main{
background: url("images/sec02_bg.jpg") no-repeat center bottom;
background-size: cover;
padding: 12% 0;
}
.sec02-ttl{
width: 81.6%;
margin: 0 auto;
}
.sec02-main-comment{
width: 90%;
margin: 0 auto;
}
.sec02-main-q-ttl{
width: 68.5%;
margin: 0 auto;
}
.sec02-sub{
padding: 5% ;
}
.sec02-schedule-ttl{
position: relative;
width: 100%;
}
.sec02-schedule-box{
position: relative;
padding: 0 0 0 5%;
}
.sec02-schedule01{
position: relative;
width: 54%;
}
.sec02-schedule02{
position: relative;
width: 100%;
}
.sec02-schedule03{
position: relative;
width: 75.8%;
}
.sec02-schedule04{
position: relative;
width: 86.3%;
}
.sec02-schedule05{
position: relative;
width: 69%;
}
.sec02-schedule-once{
position: relative;
padding: 0 0 10% 2%;
}
.sec02-schedule-once::after{
position: absolute;
content: '';
width: 3.2%;
height: 100%;
background: url("images/schedule-circle.svg") no-repeat;
background-size: 100% auto;
left: -6%;
top: 5%;
}
.sec02-schedule-once::before{
position: absolute;
content: '';
width: 2px;
height: 100%;
background: #fff;
left: -4.5%;
top: 6%;
}
.sec02-schedule-once.last-unit::before{
display: none;
}
.sec02-schedule05-ill{
position: absolute;
right: 0;
top: -2%;
width: 32%;
}
.sec03{
background: #65a42a;
padding: 12% 0 6%;
}
.sec03-ttl{
width: 90%;
margin: 0 auto;
}
.about-work{
width: 90%;
margin: 0 auto;
}
.sec03-end-ill{
position: relative;
text-align: right;
margin: -3% 0 0;
padding: 0 10% 0 0;
}
.sec03-end-ill img{
width: 34%;
}
.sec04{
background: #a7cb70;
padding: 12% 0;
}
.sec04-ttl{
width: 90%;
margin: 0 auto;
}
.sec04-sub-ttl{
width: 71.8%;
margin: 0 auto;
}
.sec04-timeline{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
.sec04-timeline-carrot{
position: absolute;
bottom: 0;
right: 0;
width: 19%;
}
.timeline-left-av{
width: 28%;
}
.timeline-right-av{
width: 24%;
}
.timeline-right-text{
width: 70%;
display: flex;
align-items: center;
}
.timeline-left-text{
width: 74%;
}
.sec05{
background: #65a42a url("images/sec05_bg.jpg") no-repeat center bottom;
background-size: 100% auto;
padding: 12% 0 6%;
}
.sec05-ttl{
width: 90%;
margin: 0 auto;
}
.sec05-sub-ttl{
width: 80.5%;
margin: 0 auto;
}
.sec05-cont{
padding: 5% 8%;
}
.sec05-cont-text,
.sec05-cont-img{
width: 100%;
}
.sec05-cont-text{
position: relative;
}
.add-ill-t1{
position: absolute;
top: -54%;
left: -3%;
width: 18%;
}
.add-ill-t2{
position: absolute;
top: -40%;
right: -5%;
width: 19%;
}
.sec06{
background: #a7cb70;
padding: 12% 0 20%;
}
.sec06-ttl{
width: 90%;
margin: 0 auto;
}
.sec06-main-ill{
width: 83.7%;
margin: 0 auto;
}
.sec06-comment{
width: 90%;
margin: 0 auto;
}
.sec06-end-ill{
width: 90%;
margin: 0 auto;
}