@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: 100%;
text-align: center;
top: 42.5%;
left: 0;
line-height: 1;
font-size: 0;
}
.main-ttl img{
width: 63.2%;
}
.main-ill{
position: absolute;
top: 66%;
left: 47%;
width: 38%;
overflow: hidden;
}
.recommend-box{
position: relative;
}
.recommend-img{
width: 87%;
position: absolute;
bottom: 6%;
left: 6.5%;
}
.anchor-box{
padding: 10% 5%;
}
.sceen-box{
background:#000000 url("images/sceen_bg.jpg") no-repeat bottom center;
background-size: 100% auto;
padding: 10% 5% 40%;
}
.sceen-box-ttl{
width: 52%;
margin: 0 auto;
}
.sceen-01,
.sceen-02,
.sceen-03,
.sceen-04,
.sceen-05{
position: relative; 
}
.sceen-03{
border: 1px solid #fff;
}
.sceen01-cont{
position: absolute;
width: 77.5%;
left: 11.25%;
top: 3%;
}
.sceen02-cont01{
position: absolute;
width: 79%;
left: 10.5%;
top: 8%;
}
.sceen02-cont02{
position: absolute;
width: 69%;
left: 23%;
top: 37%;
}
.sceen03-cont{
position: absolute;
width: 86%;
left: 7%;
top: 0%;
}
.sceen04-cont{
position: absolute;
width: 48%;
left: 3%;
top: 7%;
}
.sceen05-cont{
position: absolute;
width: 57.5%;
left: 3%;
top: 4%;
}
.ending{
position: relative;
background: #000;
padding: 0 0 4%;
}
.endroll{
position: absolute;
width: 46.5%;
left: 26.75%;
top: 21%;
}
.end-comment{
width: 100%;
padding: 0 6%;
position: absolute;
left: 0;
bottom: 3%;
}

.comment-sec{
padding: 10% 5%;
}
.bgc01{background: #f3ece0;}
.bgc02{background: #bde6ed;}
.bgc03{background: #e0e5ff;}
.bgc04{background: #b9deff;}
.comment-box-r{
position: relative;
padding: 0 0 0 41%;
}
.comment-box-l{
position: relative;
padding: 0 41% 0 0;
}
.comment-box-r p,
.comment-box-l p{
padding: 5%;
font-size: clamp(12px, 3.8vw, 18px);
border-radius: 2.6vw;
position: relative;
}
.comment-box-r p span,
.comment-box-l p span{
font-size: clamp(12px, 3.6vw, 16px);
}
.cpt01{
background: #ca242a;
color: #fff;
}
.cpt02{
background: #ca242a;
color: #fff;
}
.cpt03{
background: #ffd700;
}
.cpt04{
background: #00c3e2;
}
.cpt05{
background: #b500ff;
color: #fff;
}
.cpt06{
background: #0041d9;
color: #fff;
}
.cpt07,
.cpt08,
.cpt09{
background: #fff;
}
.cpt01::after,
.cpt02::after,
.cpt03::after,
.cpt04::after,
.cpt05::after,
.cpt07::after{
position: absolute;
width: 8%;
height: 50%;
top: 40%;
left: -8%;
content: '';
}
.cpt01::after{
top: 35%;
background: url("images/arrow01.svg") no-repeat;
background-size: 100% auto;
}
.cpt02::after{
top: 25%;
background: url("images/arrow02.svg") no-repeat;
background-size: 100% auto;
}
.cpt03::after{
background: url("images/arrow03.svg") no-repeat;
background-size: 100% auto;
}
.cpt04::after{
top: 15%;
background: url("images/arrow04.svg") no-repeat;
background-size: 100% auto;
}
.cpt05::after{
top: 25%;
background: url("images/arrow05.svg") no-repeat;
background-size: 100% auto;
}
.cpt07::after{
top: 25%;
background: url("images/arrow07.svg") no-repeat;
background-size: 100% auto;
}
.cpt06::after,
.cpt08::after,
.cpt09::after{
position: absolute;
width: 8%;
height: 50%;
top: 35%;
right: -8%;
content: '';
}
.cpt06::after{
background: url("images/arrow06.svg") no-repeat;
background-size: 100% auto;
}
.cpt08::after{
top: 35%;
background: url("images/arrow08.svg") no-repeat;
background-size: 100% auto;
}
.cpt09::after{
top: 15%;
background: url("images/arrow09.svg") no-repeat;
background-size: 100% auto;
}
.ill01{
position: absolute;
width: 39%;
top: 12%;
left: -4%;
}
.ill02{
position: absolute;
width: 39%;
top: 24%;
left: -4%;
}
.ill03{
position: absolute;
width: 36%;
top: 21%;
left: -2%;
}
.ill04{
position: absolute;
width: 33%;
top: 2%;
right: 0;
}
.ill05{
position: absolute;
width: 36%;
top: 2%;
left: 0;
}
.ill06{
position: absolute;
width: 33%;
top: 28%;
right: 0;
}
.sec05 .sceen-box {
padding: 18% 5% 40%;
}

@media only screen and (min-width : 501px) {
.comment-box-r p,
.comment-box-l p{
border-radius: 18px;
}
}