@media only screen and (min-width : 501px) {
body {
background: url("images/pc_bg.jpg") no-repeat top center;
background-size: cover;
background-attachment: fixed;
}
}
main{
background: #fff;
}
.main{
background: #81F575 url("images/main-bg.jpg") no-repeat top center;
background-size: 100% auto;
position: relative;
padding: 15% 0 5%;
}
.main-overlay{
position: absolute;
width: 71.3%;
top: 0;
right: 0;
z-index: 10;
}
.main-ttl{
width: 91%;
margin: 0 auto;
}
.main-lead{
padding: 0;
font-weight: 700;
font-size: clamp(12px, 4.65vw, 22px);
color: #6C8A47;
text-align: center;
}
.anchor-box-2col{
width: 96%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 4%;
}
.anchor-box-2col .anchor-once{
width: 48%;
}
.anchor-box-3col{
width: 96%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.anchor-box-3col .anchor-once{
width: 33%;
}
.sec01,
.sec03,
.sec05,
.sec07{
padding: 8% 0;
background: url("images/sec01-bg.jpg") no-repeat center center;
background-size: cover;
}
.sec05{
background-size: 120% 100%;
}
.sec02,
.sec04,
.sec06,
.sec08{
padding: 8% 0;
background: url("images/sec02-bg.jpg") no-repeat center center;
background-size: cover;
}
.sec05,
.sec08{
background-size: 120% 100%;
}
.sec01-ttl,
.sec02-ttl,
.sec03-ttl{
width: 86.6%;
margin: 0 auto;
}
.sec04-ttl,
.sec05-ttl,
.sec06-ttl,
.sec07-ttl,
.sec08-ttl{
width: 91%;
margin: 0 auto;
}
.sec01-cont01{
width: 67.7%;
position: relative;
left: 13.6%;
}
.sec01-cont02{
width: 64.2%;
position: relative;
left: 13.6%;
}
.sec01-cont03{
width: 64.7%;
position: relative;
left: 13.6%;
}
.sec01-cont04{
width: 65.6%;
position: relative;
left: 13.6%;
}
.sec01-cont05{
width: 66.4%;
position: relative;
left: 13.6%;
}
.comment-box{
display: flex;
justify-content: space-between;
padding: 0 3%;
}
.comment-av{
width: 20%;
}
.comment-cont{
width: 78%;
}
.sec08 .comment-cont{
width: 100%;
}
.sec02-cont01{
width: 65%;
position: relative;
left: 8.2%;
}
.sec02-cont02{
width: 64.4%;
position: relative;
left: 8.2%;
}
.sec02-cont03{
width: 51%;
position: relative;
left: 8.2%;
}
.sec02-cont04{
width: 83.7%;
position: relative;
left: 8.2%;
}
.sec02-cont05{
width: 56.6%;
position: relative;
left: 8.2%;
}
.sec03-cont01{
width: 62%;
position: relative;
left: 14.6%;
}
.sec03-cont02{
width: 62%;
position: relative;
left: 14.6%;
}
.sec03-cont03{
width: 68.5%;
position: relative;
left: 14.6%;
}
.sec04-cont01{
width: 51.3%;
position: relative;
left: 14.6%;
}
.sec04-cont02{
width: 63.8%;
position: relative;
left: 14.6%;
}
.sec04-cont03{
width: 64.5%;
position: relative;
left: 14.6%;
}
.sec05-cont01{
width: 79%;
position: relative;
left: 3.7%;
}
.sec05-cont02{
width: 58.4%;
position: relative;
left: 3.7%;
}
.sec05-cont03{
width: 89.2%;
position: relative;
left: 3.7%;
}
.sec05-cont04{
width: 86%;
position: relative;
left: 3.7%;
}
.sec05-cont05{
width: 86.1%;
position: relative;
left: 3.7%;
}
.sec06-cont01{
width: 37.6%;
position: relative;
left: 14.6%;
}
.sec06-cont02{
width: 69.4%;
position: relative;
left: 14.6%;
}
.sec06-cont03{
width: 32%;
position: relative;
left: 14.6%;
}
.sec07-cont01{
width: 87.3%;
position: relative;
left: 5.5%;
}
.sec07-cont02{
width: 75.8%;
position: relative;
left: 5.5%;
}
.sec07-cont03{
width: 78%;
position: relative;
left: 5.5%;
}
.sec08-cont01{
width: 84%;
position: relative;
left: 3%;
}
.sec08-cont02{
width: 88.8%;
position: relative;
left: 3%;
}
.sec08-cont03{
width: 86%;
position: relative;
left: 3%;
}
.sec08-cont04{
width: 90.2%;
position: relative;
left: 3%;
}
.sec08-cont05{
width: 90%;
position: relative;
left: 3%;
}
.sec08-cont06{
width: 91.2%;
position: relative;
left: 3%;
}