@charset "UTF-8";

.contentsPack{
font-size: 16px;
line-height: 1.8;
}

#top_copy{
display: flex;
}
#top_copy .text{
flex: 1;
margin-left: 60px;
font-size: 20px;
}
#top_copy .text h3{
padding: 0;
margin-bottom: 10px;
}
#top_copy .text em{
display: block;
color: #ff7f7f;
font-size: 24px;
font-weight: bold;
}
#top_copy .text strong{
display: block;
font-size: 30px;
color: #e50000;
}


.howto{
margin-top: 60px;
}
.howto li{
padding-top: 60px;
}
.howto li{
background-repeat: no-repeat;
}
.howto#line li:nth-child(1){
background-image: url(images/illust01.jpg);
background-image: -webkit-image-set(url(images/illust01.jpg) 1x, url(images/illust01@2x.jpg) 2x);
background-position: 90% center;
}
.howto#line li:nth-child(2){
background-image: url(images/illust02.jpg);
background-image: -webkit-image-set(url(images/illust02.jpg) 1x, url(images/illust02@2x.jpg) 2x);
background-position: left bottom;
}
.howto#instagram li:nth-child(1){
background-image: url(images/illust03.jpg);
background-image: -webkit-image-set(url(images/illust03.jpg) 1x, url(images/illust03@2x.jpg) 2x);
background-position: 90% center;
}
.howto#instagram li:nth-child(2){
background-image: url(images/illust04.jpg);
background-image: -webkit-image-set(url(images/illust04.jpg) 1x, url(images/illust04@2x.jpg) 2x);
background-position: left bottom;
}



.howto li .box{
width: 700px;
min-height: 300px;
box-sizing: border-box;
padding: 80px 40px 40px;
border: solid 3px #06c755;
border-radius: 20px;
position: relative;
}
.howto#line li .box{
border-color: #06c755;
}
.howto#instagram li .box{
border-color: #ea338a;
}
.howto li:nth-child(even) .box{
margin-left: auto;
}
.howto li .box .n{
display: grid;
place-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -30px;
left: -3px;
}
.howto#line li .box .n{
background-color: #06c755;
}
.howto#instagram li .box .n{
background-color: #ea338a;
}
.howto li .text{
padding-right: 240px;
}
.howto li .text h4{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}


.howto li .img{
position: absolute;
top: 50%;
right: 40px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
margin: auto 0;
}
.howto li .img .btn img{
width: 150px;
margin-bottom: 20px;
}
.howto li .img .qr img{
max-width: 150px;
max-height: 150px;
}


.howto li .sumaira{
position: absolute;
bottom: -20px;
}
.howto li:nth-child(odd) .sumaira{
right: -100px;
}
.howto li:nth-child(even) .sumaira{
left: -180px;
}