@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: #004d23;
}
.catch-box{
background: #004d23;
padding: 22% 7%;
}
.catch-box02{
background: #004d23;
padding: 10% 13%;
}
.catch-box03{
background: #004d23;
padding: 10% 11%;
}
.anchor-sec{
padding: 8% 7% 7%;
}
.anchor-sec-ttl{
text-align: center;
font-weight: 700;
font-size: clamp(18px, 5.7vw, 28px);
color: #004d23;
}
.anchor-box{
display: flex;
justify-content: space-between;
}
.anchor-once{
width: 32.5%;
}
.sec01{
}
.keyword-box{
padding: 8% 5%;
color: #fff;
text-align: center;
position: relative;
z-index: 10;
}
.bgc01{background: #a77618;}
.bgc02{background: #007e26;}
.bgc03{background: #007e8a;}
.keyword-box-ttl{
font-weight: 700;
font-size: clamp(18px, 4.2vw, 21px);
}
.keyword-box-ttl img{
width: 42%;
}
.keyword-box p{
display: inline-block;
margin: 1.8% 0.8%;
padding: 1% 3% 1% 2%;
border: 2px solid #fff;
border-radius: 100px;
font-size: clamp(12px, 3.4vw, 17px);
}
.sec-main{}
.bgc01-2{background: #e9dcc3;}
.bgc02-2{background: #b5dac0;}
.bgc03-2{background: #b5dadd;}
.detail-box{
position: relative;
margin: -12% 0 0;
}
.details{
width: 68%;
color: #fff;
font-size: clamp(12px, 5.9vw, 30px);
line-height: 1.35;
font-weight: 700;
padding: 3.5% 0 3.5% 5%;
}
.details p{
font-size: clamp(12px, 4.6vw, 22px);
font-weight: 500;
padding: 2% 0 0;
}
.details-img{
position: absolute;
width: 42%;
right: 0;
bottom: 0;
}
.detail-box h4{
font-size: clamp(12px, 4.3vw, 21px);
font-weight: 700;
padding: 0 5%;
line-height: 1.4;
}
.detail-box h4 span{
font-size: clamp(12px, 3.7vw, 18px);
font-weight: 500;
}
.tc01{color: #a77618;}
.tc02{color: #007e26;}
.tc03{color: #007e8a;}
.ex-text{
width: 90%;
margin: 0 auto;
font-size: clamp(12px, 3.7vw, 18px);
}
.prof-box{
position: relative;
padding: 8% 5% 22%;
}
.prof{
position: absolute;
background: #fff;
width: 55%;
left: 0;
bottom: 0;
padding: 4% 3% 4% 5% ;
border-top: 1px solid #004d23;
border-bottom: 1px solid #004d23;
}
.prof-name{
color: #004d23;
font-weight: 700;
font-size: clamp(12px, 4.3vw, 22px);
line-height: 1.4;
}
.prof-name span{
font-size: clamp(12px, 3.4vw, 18px);
}
.prof p{
font-size: clamp(12px, 3.4vw, 18px);
line-height: 1.4;
font-weight: 400;
}
.cont-box{
width: 90%;
margin: 0 auto;
padding: 7% 0;
}
.qa-box{
display: flex;
flex-wrap: wrap;
line-height: 1.4;
}
.qa-mark{
width: 12.5%;
display: flex;
align-items: center;
font-size: clamp(12px, 10.5vw, 52px);
font-weight: 700;
color: #004d23;
line-height: 1;
padding: 0 0 5%;
}
.qa-q{
width: 87.5%;
font-size: clamp(12px, 4.3vw, 21px);
font-weight: 700;
color: #004d23;
}
.qa-a{
width: 87.5%;
font-size: clamp(12px, 3.4vw, 18px);
font-weight: 400;
}
.cont-img{
}
.separate-line{
width: 100%;
height: 1px;
background: #004d23;
}