@charset "UTF-8";

header{
padding: 0.5rem 0;
}
header a{
z-index: 1;
}
header h1{
display: inline-block;
background: url("../../assets/images_common/header_logo_sub.png");
background-size: 100%;
text-indent: -999999;
aspect-ratio: 660/300;
width: 35vw;
}

main{
padding: 0vw 0 6vw 0;
}
h2{
text-indent: -99999;
width: 80vw;
margin: 0 auto 2vw auto;
aspect-ratio: 1540/380;
background: url("../images/heading_download.png");
background-size: 100%;
}
p{
color: #fff;
font-weight: bold;
}
.read{
text-indent: -99999;
width: 66vw;
margin: 1vw auto;
aspect-ratio: 1500/150;
background: url("../images/read.png");
background-size: 100%;
}
.image{
width: 90vw;
margin: 3vw auto 4vw auto;
aspect-ratio: 100/117;
background: url("../images/chara_mobile.png") bottom center no-repeat , url("../images/coloring_image.png") top center no-repeat;
background-size: 100% auto, 100% auto;
}
.downloadBTN{
display: inline-block;
margin: 0 auto;
width: 54%;
padding: 2vw 7vw;
}
.logo{
display: inline-block;
background: url("../../images/footer_logo.png") center center no-repeat;
background-size: 100%;
aspect-ratio:1600/680;
text-indent: -99999;
width: 80%;
margin-top: 15vw;
}

/*PC*/
@media screen and (min-width:768px){

header h1{
width: 25vw;
max-width: calc(1080px*0.25);
}
main{
padding: 0 0 3vw 0;
}
h2{
width: 30vw;
aspect-ratio: 1540/380;
margin: 0 auto 1.0vw auto;
}
.read{
width: 36vw;
margin-top: 0vw;
}
.image{
width: 94vw;
margin: -4.5vw auto -2.0vw auto;
aspect-ratio: 100/55;
background: url("../images/chara_pc.png") top center no-repeat , url("../images/coloring_image.png") center center no-repeat;
background-size: 100% auto, 64% auto;
}
.downloadBTN{
width: 21%;
padding: 1.2vw 2.5vw;
}
	
@media (orientation: portrait){

/*デバイスが縦向きの場合*/

}

}