@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;
z-index: 100;
}
.main-ill{
position: absolute;
width: 54%;
top: 28%;
left: 23%;
}
.main-ttl{
position: absolute;
top: 61.5%;
left: 10%;
width: 80%;
}
.anchor-sec{
background: #fff;
padding: 10% 5% 8%;
position: relative;
z-index: 100;
}
.anchor-sec p{
font-weight: 700;
font-size: clamp(12px, 3.4vw, 17px);
}
.cont-wrap{
background: url("images/cont-bg.jpg") repeat-y top center;
background-size: 100% auto;
position: relative;
padding: 10% 0 0;
overflow: hidden;
}
.cont-wrap::after{
position: absolute;
content: '';
width: 14.5%;
height: 100%;
left: 0;
right: 0;
top: -40px;
margin: auto;
background: url("images/rail.png") repeat-y top center;
background-size: 100% auto;
}
.rail{
position: absolute;
}
.cont-ttl01{
width: 67%;
margin: 0 auto;
position: relative;
z-index: 10;
}
.dice01{
position: absolute;
width: 29%;
right: -20%;
bottom: -50%;
}
.block-ttl{
position: relative;
padding: 0 5%;
z-index: 10;
}
.dice02{
position: absolute;
width: 13%;
left: 16%;
top: -23%;
}
.dice03{
position: absolute;
width: 19%;
right: 12%;
top: -40%;
}
.block-ttl p{
position: absolute;
top: 18%;
left: 0;
width: 100%;
text-align: center;
font-weight: 700;
line-height: 1.4;
font-size: clamp(12px, 3.9vw, 20px);
color: #fff;
}
.block-ttl p span{
font-weight: 700;
line-height: 1.1;
font-size: clamp(12px, 5.7vw, 28px);
}
.talk-box{
display: flex;
flex-wrap: wrap;
padding: 0 5%;
}
.cont-wrap-end{
position: relative;
z-index: 10;
}
.talk-box01,
.talk-box02,
.talk-box03{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
z-index: 10;
padding: 0 5%;
}
.talk-box01 p,
.talk-box02 p,
.talk-box03 p{
position: relative;
font-size: clamp(12px, 3.15vw, 16px);
padding: 3.5% 5%;
border-radius: 2.6vw;
background: #fff;
}
.talk-av{
width: 19%;
}
.talk-cont-l{
width: 80%;
padding: 0 5% 0 4%;
}
.talk-cont-r{
width: 80%;
padding: 0 4% 0 5%;
}
.talk-box01 .talk-cont-r p,
.talk-box02 .talk-cont-r p,
.talk-box03 .talk-cont-r p{
background: #fff;
}
.talk-box01 .talk-cont-r p::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-box01 .talk-cont-l p{
background: #fff;
}
.talk-box01 .talk-cont-l p::after{
position: absolute;
width: 8%;
height: 70%;
top: 18%;
right: -5%;
content: '';
background: url("images/arrow-t01.svg") no-repeat;
background-size: 100% auto;
}
.ending{
padding: 8% 5%;
background: #fff;
position: relative;
z-index: 150;
}
.ending p{
text-align: center;
font-weight: 700;
font-size: clamp(12px, 4.9vw, 25px);
}
.ending-ill{
position: absolute;
width: 16%;
top: 30%;
right: 2%;
line-height: 1.4;
}
.train{
position: absolute;
width: 23%;
top: calc(-1% - calc(100vw * 0.4));
left: 0;
right: 0;
margin: auto;
z-index: 10;
animation: poyopoyo 1s ease-out infinite;
}
.train.is-active{
position: fixed;
top: calc(95vh - calc(100vw * 0.4));
left: 0;
right: 0;
margin: auto;
z-index: 10;
transition:top 1s 0s;
}
@keyframes poyopoyo {
0%, 40%, 60%, 80% {transform: scale(1.0);}
30%, 50%, 70%, 90% {transform: scale(0.98);}
50%{transform: translateX(-2px);}
90%{transform: translateX(2px);}
}
/*
.train{
width: 21%;
margin: 0 auto;
position:sticky;
top:200px;
z-index: 10;
}
*/
@media only screen and (min-height : 801px) {
.train.is-active{
top: calc(90vh - calc(100vw * 0.4));
}
}
@media only screen and (min-width : 501px) {
.talk-box01 p,
.talk-box02 p,
.talk-box03 p{
border-radius: 18px;
}
.train{
width: calc(500px * 0.23);
top: calc(-1% - calc(500px * 0.4));
}
.train.is-active{
top: calc(97vh - calc(500px * 0.4));
}
@media only screen and (min-height : 801px) {
.train.is-active{
top: calc(90vh - calc(500px * 0.4));
}
}
}