@charset "utf-8";

.contents_sing20_220411 { margin-top: -10px; }
.contents_sing20_220411 .sing_inner { max-width: 960px; margin: 0 auto; }
.contents_sing20_220411 .sing_wrap { display: flex; justify-content: space-between; }
.contents_sing20_220411 .sing_section { box-sizing: border-box; }
.contents_sing20_220411 .sing_ttl { color: #fff; font-size: 42px; font-weight: bold; line-height: 1; }
.contents_sing20_220411 .sing_txt { color: #fff; font-size: 18px; line-height: 1.6; }
.contents_sing20_220411 .sing_img img { display: block; width: 100%; }
.contents_sing20_220411 a:hover img { opacity: .6; }

.contents_sing20_220411 .sing_section .box_top { min-height: 300px; padding-top: 40px; }
.contents_sing20_220411 .sing_section .box_btm { padding: 35px 0; }
.contents_sing20_220411 .sing_section .sing_wrap .sing_img { width: 350px; }
.contents_sing20_220411 .sing_section .sing_wrap .sing_txt { width: calc(100% - 390px); }

.contents_sing20_220411 .sing_mainvisual { width: 100%; overflow-x: hidden; }
.contents_sing20_220411 .sing_mainvisual li { height: 474px; padding: 70px 0; box-sizing: border-box; }
.contents_sing20_220411 .sing_mainvisual li.mv01 { background: url(../img/img_mainvisual01.jpg) no-repeat center / cover; }
.contents_sing20_220411 .sing_mainvisual li.mv02 { background: url(../img/img_mainvisual02.jpg) no-repeat center / cover; }
.contents_sing20_220411 .sing_mainvisual .sing_ttl { font-size: 56px; line-height: 1.3; }

.contents_sing20_220411 .sec01 { min-height: 620px; padding-top: 40px; background: url(../img/img_sec01.jpg) no-repeat center bottom / contain; }
.contents_sing20_220411 .sec01 .sing_txt { color: #231815; font-size: 22px; font-weight: bold; }
.contents_sing20_220411 .sec02 .box_top { background: url(../img/img_sec02_1.jpg) no-repeat center / cover; }
.contents_sing20_220411 .sec02 .box_btm { background: url(../img/bg_sec02.jpg) repeat-x center / contain; }
.contents_sing20_220411 .sec03 .box_top { background: url(../img/img_sec03.jpg) no-repeat center / cover; }
.contents_sing20_220411 .sec03 .box_btm { background-color: #141414; }
.contents_sing20_220411 .sec03 .sing_txt { padding-bottom: 35px; }
.contents_sing20_220411 .sec04 .box_top { background: url(../img/img_sec04_1.jpg) no-repeat center / cover; }
.contents_sing20_220411 .sec04 .box_btm { background: #141414 url(../img/bg_sec04.png) no-repeat left center / contain; }
.contents_sing20_220411 .sec04 .sing_ttl { text-shadow: 0 0 10px #141414; }
.contents_sing20_220411 .sec05 .box_top { background: url(../img/img_sec05.jpg) no-repeat center / cover; }
.contents_sing20_220411 .sec05 .box_btm { background: #0c0c0c url(../img/bg_sec05.jpg) no-repeat center / cover; }
.contents_sing20_220411 .sec05 .box_btm .sing_txt { width: 70%; }
.contents_sing20_220411 .sec06 { padding-top: 40px; }
.contents_sing20_220411 .sec06 .sing_ttl { color: #231815; }
.contents_sing20_220411 .sec06 .sing_txt { color: #231815; margin-top: 5px; }
.contents_sing20_220411 .sec06 .img_product { margin: 15px auto 0; max-width: 1100px; }
.contents_sing20_220411 .sec06 .product_area { margin-top: 40px; display: flex; }
.contents_sing20_220411 .sec06 .product_area a:nth-of-type(1) {margin-left: 60px;}
.contents_sing20_220411 .sec06 .product_area a:nth-of-type(2) {margin-left: 25px;}
.contents_sing20_220411 .sec06 .product_area a:nth-of-type(3) {margin-left: 25px;}
.contents_sing20_220411 .sec06 .product_area a:nth-of-type(4) {margin-left: 20px;}
.contents_sing20_220411 .sec06 .product_area a:nth-of-type(5) {margin-left: 50px;}
.contents_sing20_220411 .sec06 .list_product li:not(:last-child) { margin-bottom: 10px; }
.contents_sing20_220411 .sec06 .list_product li:first-child { margin-bottom: 14px; }
.contents_sing20_220411 .sec06 .list_product li:first-child img { width: auto; height: 14px; }
.contents_sing20_220411 .sec06 .list_product li img { width: auto; height: 12px; }
.contents_sing20_220411 .sec06 .list_product.two { width: 250px; display: flex; justify-content: space-between; flex-wrap: wrap; }
.contents_sing20_220411 .sec06 .list_product.two li { width: 50%; }
.contents_sing20_220411 .sec06 .list_product.two li:first-child { width: 100%; }
.contents_sing20_220411 .sec06 .list_icon { margin-top: 20px; display: flex; }
.contents_sing20_220411 .sec06 .list_icon li { width: 54px; margin-right: 30px; }
.contents_sing20_220411 .sec06 .list_icon li:nth-child(2) { width: 93px; }
.contents_sing20_220411 .sec06 .list_icon li:nth-child(3) { width: 56px; }

.contents_sing20_220411 .sing_banner_area { margin-top: 40px; margin-bottom: 100px; }
.contents_sing20_220411 .sing_banner_area .sing_img { width: 48%; }

@media screen and (max-width: 940px) {
    .contents_sing20_220411 { overflow-x: hidden; }
    .contents_sing20_220411 .sing_inner { padding: 0 20px; }
    .contents_sing20_220411 .sec01 { padding-bottom: 20px; }
}
@media screen and (max-width: 1200px) {
    .contents_sing20_220411 .sing_mainvisual li.mv02 { background: url(../img/img_mainvisual02_sp.jpg) no-repeat center / cover; }
}

/* Animation */
.contents_sing20_220411 .js-anim { opacity: 0; transition-duration: .5s; }
.contents_sing20_220411 .js-anim.show { opacity: 1; }
.contents_sing20_220411 .js-anim_low { opacity: 0; transition-duration: .5s; }
.contents_sing20_220411 .js-anim_low.show { opacity: 1; }
.contents_sing20_220411 .sec01.js-anim .sing_txt { transform: translateY(40px); opacity: 0; transition-duration: .5s; }
.contents_sing20_220411 .sec01.js-anim.show .sing_txt { transform: translateY(0); opacity: 1; transition-delay: .5s; }
/* .contents_sing20_220411 .box_btm .sing_txt.js-anim.show { transition-delay: .5s; } */
.contents_sing20_220411 .box_top.js-anim { opacity: 1; position: relative; }
.contents_sing20_220411 .box_top.js-anim::after { content: ''; width: 100%; height: 100%; background-color: #141414; position: absolute; top: 0; left: 0; transition-duration: .5s; }
.contents_sing20_220411 .box_top.js-anim.show::after { background-color: transparent; }
.contents_sing20_220411 .box_btm .sing_wrap .sing_img.js-anim { transform: translateX(40px); }
.contents_sing20_220411 .box_btm .sing_wrap .sing_img.js-anim.show { transform: translateX(0); transition-delay: .5s; }
.contents_sing20_220411 .box_btm .sing_wrap .sing_txt.js-anim.show { transition-delay: 1s; }
.contents_sing20_220411 .sec06.js-anim .sing_ttl,
.contents_sing20_220411 .sec06.js-anim .img_product { opacity: 0; transition-duration: .5s; }
.contents_sing20_220411 .sec06.js-anim a:nth-of-type(1) .list_product,
.contents_sing20_220411 .sec06.js-anim a:nth-of-type(2) .list_product,
.contents_sing20_220411 .sec06.js-anim a:nth-of-type(3) .list_product,
.contents_sing20_220411 .sec06.js-anim a:nth-of-type(4) .list_product,
.contents_sing20_220411 .sec06.js-anim a:nth-of-type(5) .list_product { transform: translateY(40px); opacity: 0; transition-duration: .5s; }
.contents_sing20_220411 .sec06.js-anim.show .sing_ttl { opacity: 1; }
.contents_sing20_220411 .sec06.js-anim.show .img_product { opacity: 1; transition-delay: .5s; }
.contents_sing20_220411 .sec06.js-anim.show a:nth-of-type(1) .list_product { transform: translateY(0); opacity: 1; transition-delay: 1s; }
.contents_sing20_220411 .sec06.js-anim.show a:nth-of-type(2) .list_product { transform: translateY(0); opacity: 1; transition-delay: 1.3s; }
.contents_sing20_220411 .sec06.js-anim.show a:nth-of-type(3) .list_product { transform: translateY(0); opacity: 1; transition-delay: 1.6s; }
.contents_sing20_220411 .sec06.js-anim.show a:nth-of-type(4) .list_product { transform: translateY(0); opacity: 1; transition-delay: 1.9s; }
.contents_sing20_220411 .sec06.js-anim.show a:nth-of-type(5) .list_product { transform: translateY(0); opacity: 1; transition-delay: 2.2s; }

/*20220929*/
p.app_showcase {
    float: right;
    text-decoration: underline;
    color: #fff;
    font-size: 15px;
    background: url(/cnt/download_overseas/img/btn_more.png) no-repeat left 0px top 5px;
    padding-left: 20px;
    padding-top: 5px;
}
p.app_showcase-l {
    float: left;
    text-decoration: underline;
    color: #fff;
    font-size: 15px;
    background: url(/cnt/download_overseas/img/btn_more.png) no-repeat left 0px top 15px;
    padding-left: 20px;
    padding-top: 10px;
}
.sing_wrap a:hover {
	opacity: 0.5;
	transition: 0.5s;
}