.slick {
}
.slick__bg {
padding-bottom: 20%; background-size: cover;
background-repeat: no-repeat;
font-size: 14px;
}
.slick__bg01 {
background-image: url(//terazono-animal.com/img/conceptBg1.jpg);
}
.slick__bg02 {
background-image: url(//terazono-animal.com/img/conceptBg2.jpg);
}
.slick__bg03 {
background-image: url(//terazono-animal.com/img/conceptBg3.jpg);
}
.slick__bg01 p{
padding-left: 50%;
padding-right: 1em;
}
.slick__bg02 p{
padding-left: 1em;
padding-right: 50%;
}
.slick__bg03 p{
padding-left: 50%;
padding-right: 1em;
}
.slick__bg01 p,
.slick__bg02 p,
.slick__bg03 p{
position: absolute;
top: 5%;
}
.slick__bg01 span,
.slick__bg02 span,
.slick__bg03 span{
color: #fff;
display: inline-block;
border-radius: 20px;
padding: .8em;
}
.slick__bg01 span{
background: rgba(234,163,183,0.70);
}
.slick__bg02 span{
background: rgba(35,169,220,0.70);
}
.slick__bg03 span{
background: rgba(242,200,68,0.80);
}
.slick__bg01 span::first-letter,
.slick__bg02 span::first-letter,
.slick__bg03 span::first-letter{
font-size: 20px;
line-height: 1;
}
@media print, screen and (min-width: 600px) {
.slick__bg {
font-size: 20px;
}
.slick__bg01 p,
.slick__bg02 p,
.slick__bg03 p{
position: absolute;
top: 20%;
}
.slick__bg01 p{
padding-right: 2em;
}
.slick__bg02 p{
padding-left: 2em;
}
.slick__bg03 p{
padding-right: 2em;
}
.slick__bg01 span,
.slick__bg02 span,
.slick__bg03 span{
color: #fff;
display: inline-block;
border-radius: 20px;
padding: 1.5em;
}
.slick__bg01 span::first-letter,
.slick__bg02 span::first-letter,
.slick__bg03 span::first-letter{
font-size: 25px;
}
}
@media print, screen and (min-width: 1024px) {
.slick__bg {
font-size: 30px;
}
.slick__bg01 span::first-letter,
.slick__bg02 span::first-letter,
.slick__bg03 span::first-letter{
font-size: 45px;
}
}