@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{
position: relative;
}
.main-ttl{
position: absolute;
top: 4%;
left: 3%;
width: 94%;
}
.main-ill{
position: absolute;
width: 39%;
bottom: -3%;
left: 5%;
z-index: 10;
}
.main-copy-sec{
background: #d6efc2;
padding: 5% 3% 3% 7%;
position: relative;
}
.main-copy-sec p{
position: absolute;
top: 15%;
left: 0;
text-align: center;
font-size: clamp(12px, 4.6vw, 22px);
color: #4ca800;
font-weight: 700;
width: 100%;
}
.main-copy-comment{
width: 76%;
position: absolute;
left: 15%;
bottom: 13%;
}
.anchor-sec{
background: #d6efc2;
padding: 5% 5% 30%;
}
.anchor-sec-ttl{
width: 80%;
margin: 0 auto;
}
.anchor-box{
width: 94%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.anchor-once{
width: 31%;
}
.prof-sec{
margin: -24.5% auto 0;
}
.prof-head{
width: 90%;
position: relative;
margin: 0 auto 0;
}
.prof-box{
width: 100%;
background: url("images/prof-box-bg.svg") no-repeat top center;
background-size: 100% auto;
padding: 0 11% 8%;
}
.prof-box-ttl{
width: 63%;
margin: 0 auto;
}
.prof-history-ttl{
width: 14%;
}
.prof-box p{
font-size: clamp(12px, 3.4vw, 17px);
font-weight: 500;
line-height: 1.5;
}
.prof-detail{
display: flex;
justify-content: space-between;
}
.prof-detail-ph{
width: 50%;
}
.prof-detail-name{
width: 46%;
display: flex;
align-items: center;
}
.itv-sec{
position: relative;
}
.itv-sec-circle{
width: 70%;
position: absolute;
left: 0;
right: 0;
bottom: -2.7%;
margin: auto;
}
.itv-sec-head{
width: 90%;
margin: 0 auto;
}
.itv-wrap{
width: 90%;
margin: 0 auto;
padding: 0 0 15%;
background: #edf5fb;
border-left: 2px solid #231815;
border-right: 2px solid #231815;
}
.itv-sec-ttl{
position: relative;
width: 66%;
margin: 0 auto 0;
transform: translateY(-12%);
}
.itv-sec-ttl02{
width: 51%;
margin: 0 auto;
}
.talk-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 5%;
position: relative;
}
.talk-box-ill01{
position: absolute;
width: 20%;
bottom: 4%;
right: 5%;
}
.talk-box-ill02{
position: absolute;
width: 17%;
bottom: 4%;
right: 8%;
}
.talk-box-ill03{
position: absolute;
width: 9.5%;
bottom: 4%;
right: 9%;
}
.talk-box-ill04{
position: absolute;
width: 13%;
bottom: 7%;
right: 9%;
}
.talk-box-ill05{
position: absolute;
width: 15%;
bottom: 19%;
right: 8%;
}
.talk-box-ill06{
position: absolute;
width: 16%;
bottom: 12%;
right: 6%;
}
.talk-box-ill07{
position: absolute;
width: 15%;
bottom: 12%;
right: 8%;
}
.talk-box-av{
width: 21%;
}
.talk-box-text{
position: relative;
width: 77%;
}
.talk-box-text p{
font-size: clamp(12px, 3.7vw, 18px);
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
padding: 0 12% 4% 5%;
line-height: 1.4;
display: flex;
align-items: center;
}
.itv-wrap .talk-box-text.q-box p{
font-size: clamp(12px, 4.1vw, 20px);
color: #2f7dae;
font-weight: 700;
padding: 0 5% 4% 13%;
line-height: 1.38;
}
.prjt-cont-wrap .talk-box-text.q-box p{
font-size: clamp(12px, 4.1vw, 20px);
color: #5b3fa4;
font-weight: 700;
padding: 0 5% 3% 13%;
line-height: 1.36;
}
.work-style-cont .talk-box-text.q-box p{
font-size: clamp(12px, 4.1vw, 20px);
color: #41b25d;
font-weight: 700;
padding: 0 5% 4% 13%;
line-height: 1.38;
}
.schedule-head{
width: 90%;
margin: 0 auto;
}
.schedule-cont-wrap{
width: 90%;
background: #fdf0ee;
margin: 0 auto;
padding: 7% 0 8%;
position: relative;
}
.talk-box-ill08{
position: absolute;
width: 93%;
top: 3%;
left: 2%;
}
.talk-box-ill09{
position: absolute;
width: 28%;
bottom: 5%;
left: 47%;
}
.schedule-cont-ttl{
width: 29%;
margin: 0 auto;
}
.schedule-box-ttl{
width: 62%;
margin: 0 auto;
}
.schedule-box{
position: relative;
padding: 0 5%;
}
.schedule-box::after{
position: absolute;
top: 0.6em;
left: 7.4%;
width: 2px;
height: 92%;
content: '';
background: #000;
}
.schedule-once{
display: flex;
justify-content: space-between;
padding: 0 0 5% 7.5%;
position: relative;
z-index: 10;
}
.schedule-once::after{
position: absolute;
top: 0;
left: 0;
width: 5.5%;
height: 100%;
content: '';
background: url("images/schedule-once-mark.svg") no-repeat 0 0.3em;
background-size: 100% auto; 
z-index: 10;
}
.schedule-once-time{
position: relative;
width: 15%;
font-size: clamp(12px, 3.95vw, 20px);
}
.schedule-once-time.wide{
width: 36%;
}
.schedule-once-cont{
width: 83%;
font-size: clamp(12px, 3.95vw, 20px);
font-weight: 700;
}
.schedule-once-cont.narrow{
width: 64%;
}
.schedule-once-cont p{
font-size: clamp(12px, 3.4vw, 17px);
font-weight: 500;
}
.work-style-sec{
}
.work-style-head{
width: 94%;
margin: 0 auto -26%;
}
.work-style-sec-ttl{
width: 50%;
margin: 0 auto;
}
.work-style-cont{
padding: 0 5%;
}
.prjt-sec{
}
.prjt-sec-head{
width: 90%;
margin: 0 auto -5.5%;
}
.prjt-cont-wrap{
width: 90%;
margin: 0 auto;
background: url("images/prjt-cont-bg.jpg") repeat-y top center;
background-size: 100% auto;
padding: 10% 0;
}
.prjt-sec-ttl{
width: 77%;
margin: 0 auto;
}
.career-plan{
width: 90%;
margin: 0 auto;
padding: 0 0;
}
.career-plan-cont-wrap{
padding: 5% 4% 10%;
background: url("images/career-plan-bg.jpg") repeat-y top center;
background-size: 100% auto;
}
.career-plan-cont-ttl{
width: 43%;
margin: 0 auto;
}
.career-plan-img-box{
display: flex;
justify-content: space-between;
}
.career-plan-img{
width: 48%;
}
.career-plan-cont-wrap p{
font-size: clamp(12px, 3.7vw, 18px);
font-weight: 500;
padding: 0 4%;
}
.end-message{
background: #d6efc2;
position: relative;
padding: 10% 0 10%;
}
.end-message::after{
position: absolute;
content: '';
width: 100%;
height: 18%;
background: #ffeb69;
top: 0;
left: 0;
z-index: 0;
}
.end-message-ttl{
width: 46.5%;
margin: 0 auto;
position: relative;
z-index: 1;
}
.end-message-ttl-jp{
width: 86%;
margin: 0 auto;
}
.end-message p{
text-align: center;
font-size: clamp(12px, 4.1vw, 20px);
line-height: 1.8;
font-weight: 500;
}
.end-message-ill{
width: 94%;
margin: 0 auto;
}