@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;
width: 86.5%;
bottom: 34%;
left: 6.75%;
}
.main-ill{
position: absolute;
width: 65%;
top: 6%;
left: 17.5%;
}
.main-sub-copy{
position: absolute;
width: 75%;
left: 12.5%;
bottom: 0%;
padding: 0 0 10%;
}
.profile-sec{
padding: 5%;
}
.profile-box{
border-radius: 3.2vw;
background: url("images/profile_bg.jpg") no-repeat top center;
background-size: cover;
padding: 9% 4%;
line-height: 1.5;
}
.profile-detail{
display: flex;
}
.profile-ph{
width: 50%;
padding: 0 0 0;
}
.profile-div{
width: 50%;
font-size: clamp(12px, 3.2vw, 19px);
padding: 4% 0 0 5%;
}
.profile-box p{
font-size: clamp(12px, 3.2vw, 19px);
padding: 0 2%;
}
.anchor-sec{
padding: 7% 5%;
background: url("images/anchor-sec_bg.jpg") no-repeat top center;
background-size: cover;
}
.sec01{
padding: 7% 0;
background: url("images/sec01_bg.jpg") no-repeat top center;
background-size: cover;
}
.sec-ttl{
}
.talk-pt1{
position: relative;
width: 84%;
left: 12%;
display: flex;
justify-content: space-between;
}
.talk-pt1 .talk{
width: 73%;
background: #ffff00;
padding: 3.5% 4.5%;
font-size: clamp(12px, 3.2vw, 19px);
border-radius: 2.6vw;
line-height: 1.5;
position: relative;
}
.talk-pt1 .talk-av{
width: 22%;
}
.ill-av01{
width: 90%;
}
.talk-pt2{
position: relative;
width: 84%;
left: 6%;
display: flex;
justify-content: space-between;
}
.talk-pt2 .talk-av{
width: 21%;
}
.talk-pt2 .talk{
width: 73%;
background: #fff;
padding: 3.5% 4.5%;
font-size: clamp(12px, 3.2vw, 19px);
border-radius: 2.6vw;
line-height: 1.5;
position: relative;
}
.talk-pt3{
position: relative;
width: 90%;
left: 5%;
display: flex;
justify-content: space-between;
}
.talk-pt3 .talk{
width: 73%;
background: #ffff00;
padding: 3.5% 4.5%;
font-size: clamp(12px, 3.2vw, 19px);
border-radius: 2.6vw;
line-height: 1.5;
position: relative;
}
.talk-pt1 .talk::after,
.talk-pt3 .talk::after{
position: absolute;
width: 8%;
height: 70%;
top: 12%;
right: -5%;
content: '';
background: url(images/arrow-t01.svg) no-repeat;
background-size: 100% auto;
}
.talk-pt2 .talk::after{
position: absolute;
width: 8%;
height: 70%;
top: 12%;
left: -5%;
content: '';
background: url(images/arrow-t02.svg) no-repeat;
background-size: 100% auto;
}

.talk-pt3 .talk-av{
width: 22%;
}
.sec02{
padding: 7% 0;
background: url("images/sec02_bg.jpg") no-repeat top center;
background-size: cover;
}
.sec02-cont{
width: 90%;
background: #fff;
margin: 0 auto;
padding: 6% 7% 3%;
border-radius: 3.2vw;
}
.sec02-cont-ttl{
background: #a858ff;
color: #fff;
text-align: center;
font-size: clamp(12px, 5.2vw, 31px);
font-weight: 700;
}
.second-timeline .sec02-cont-ttl{
background: #5732ff;
}
.sec02-cont-img-box{
position: relative;
}
.overlay-ill{
width: 84%;
position: absolute;
bottom: -18%;
left: -12%;
}
.second-timeline .overlay-ill{
width: 93%;
position: absolute;
bottom: -19%;
left: -10%;
}
.sec02-schedule-box{
display: flex;
flex-wrap: wrap;
}
.sec02-schedule-line{
width: 4%;
position: relative;
}
.sec02-schedule-line img{
vertical-align: top;
}
.sec02-schedule-line::after{
position: absolute;
content: '';
width: 2px;
height: 100%;
background: #a858ff;
top: 0;
left: calc(50% - 1px);
}
.second-timeline .sec02-schedule-line::after{
background: #5732ff;
}
.sec02-schedule-line.last-unit::after{
display: none;
}
.sche-circle{
width: 50%;
}
.sec02-schedule-cont{
width: 96%;
margin: -1% 0 0;
padding: 0 0 0 3%;
}
.sec02-schedule-cont img{
vertical-align: top;
}
.sec02-schedule-cont p{
font-size: clamp(12px, 3.2vw, 19px);
line-height: 1.5;
padding: 1.5% 0 6.5%;
}
.time-a{width: 29%;}
.time-b{width: 51%;}
.time-c{width: 45%;}
.time-d{width: 68%;}
.time-e{width: 29%;}
.time-f{width: 50%;}
.time-g{width: 45%;}
.time-h{width: 100%;}
.sec03{
padding: 7% 0;
background: url("images/sec03_bg.jpg") no-repeat top center;
background-size: cover;
}
.qa-once{
width: 90%;
margin: 0 auto;
background: #fff;
border-radius: 0 0 3vw 3vw;
}
.qa-q-box,
.qa-cont{
display: flex;
}
.qa-q{
width: 12%;
display: flex;
align-items: center;
justify-content: center;
background: #4392ff;
}
.qa-q img{
width: 46%;
}
.qa-q-text{
width: 88%;
display: flex;
color: #4392ff;
background: #ffff00;
font-weight: 700;
font-size: clamp(12px, 3.4vw, 21px);
padding: 2% 1% 2% 3%;
line-height: 1.6;
}
.qa-cont-a{
width: 12%;
text-align: center;
color: #4392ff;
padding: 5% 0 ;
}
.qa-cont-a img{
width: 46%;
vertical-align: top;
}
.qa-cont-text{
width: 88%;
display: flex;
align-items: center;
font-size: clamp(12px, 3.2vw, 19px);
padding: 3% 2% 3% 3%;
line-height: 1.6;
}
.ending-sec{
padding: 7% 0 15%;
}
.ending-sec-ill{
width: 120px;
margin: 0 auto;
}
.ending-sec-ttl{
width: 404px;
max-width: 80%;
margin: 0 auto;
}
.ending-sec-text{
width: 84%;
margin: 0 auto;
font-size: clamp(12px, 3.2vw, 19px);
}



@media only screen and (min-width : 501px) {
.profile-box{
border-radius: 30px;
}
.talk-pt1 .talk{
border-radius: 20px;
}
.talk-pt2 .talk{
border-radius: 20px;
}
.talk-pt3 .talk{
border-radius: 20px;
}
.sec02-cont{
border-radius: 30px;
}
.qa-once{
border-radius: 0 0 30px 30px;
}
.sec02-schedule-cont{

}
}