@charset "utf-8";

html { margin: 0px; padding: 0px; background-color: #ffffff; text-align: center;}
/* add reset */
* {list-style: none; }
a {color: inherit; text-decoration: none;}
img {max-width: 100%; vertical-align: middle;}

/* layout */
.inner {max-width: 1200px; padding: 0 20px; margin: 0 auto;}
.cont1 { background-image: url(../images/cont1-bg.png);  background-size:cover;}
.cont2 { background-image: url(../images/cont2-bg.png);  background-size:cover;}
.cont4 { background-image: linear-gradient(#482d07, #301d02);}
.box img {width: 30%;}
.box2-pc {display: block; padding-top: 15%;}
.box2-pc img {width: 30%;}
.box2-mob {display: none;}
.cont5 {background-image: url(../images/cont5.png);  background-size:cover;}
.cont5 .box3 .img { text-align: center;}
.cont5 .box3 .btn {width: 80%; margin: 0 auto; text-align: center;}
.cont6 {background-image: url(../images/cont6.png);  background-size:cover;}
@media(max-width:1500px) {
    .box img {width: 35%;}
    .cont5 .box3 .btn {width: 35%; display: contents;}
}
@media(max-width:1200px) {
    .inner {display: none;}
    .cont5 .box3 .btn img {width: 45%;}
}

@media(max-width:550px) {
    .box2-pc {display: none;}
    .box2-mob {display: block; padding-top: 25%;}
    .cont2 { background-image: url(../images/cont2-bg-mob.png);  background-size:cover;}
    .box img {width: 48%;}
}
@media(max-width:450px) {

}