@charset "UTF-8";

body {
    background:#ebf3fd !important;
    font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}


header {
    width:100%;
    padding:50px;
    background:#ebf3fd !important;
    position:relative;
}

header a.logo {
    display:block !important;
    width:140px;
}


header a.logo img {
    width:100%;
}


a.btn_backward {
    display:block;
    width:130px;
    float:none;
    font-size:16px;
    color:#000;
    padding:.7em 1em;
    background: linear-gradient(#ffffff, #eeeeee);
    box-shadow: 0px 3px 5px rgba(0,0,0,.15);
    transition:all .3s ease;
    margin:0;
    position:absolute;
    top:20px;
    right:20px;
}


.block_ttl {
    width:100%;
    text-align:center !important;
    margin:0 0 70px;
}


h1.ttl_h1 {
    font-size:36px;
    letter-spacing: 3px;
    margin:0 0 10px;
}


@media all and (max-width:1024px) {
header {
    width:100%;
    padding:30px;
    background:#ebf3fd !important;
}
    
header a.logo {
    display:block !important;
    width:100px;
    position:static !important;
    top:auto;
}
    
.block_ttl {
    width:100%;
    text-align:center !important;
    margin:0;
}
    
h1.ttl_h1 {
    font-size:30px;
    letter-spacing: 3px;
    margin:0 0 30px;
}
    
a.btn_backward {
    display:block;
    width:100px;
    float:none;
    font-size:12px;
    color:#000;
    padding:.6em 1em;
    background: linear-gradient(#ffffff, #eeeeee);
    box-shadow: 0px 3px 5px rgba(0,0,0,.15);
    transition:all .3s ease;
    margin:0;
    position:absolute;
    top:30px;
    right:30px;
}
}


@media all and (max-width:560px) {
header {
    width:100%;
    padding:10px 10px 30px;
    background:#ebf3fd !important;
}
    
header a.logo {
    display:block !important;
    width:90px;
    position:static !important;
    top:auto;
}
    
.block_ttl {
    width:100%;
    text-align:center !important;
    margin:0;
}
    
h1.ttl_h1 {
    font-size:28px;
    letter-spacing: 3px;
    margin:0 0 30px;
}
    
a.btn_backward {
    display:block;
    width:100px;
    float:none;
    font-size:12px;
    color:#000;
    padding:.6em 1em;
    background: linear-gradient(#ffffff, #eeeeee);
    box-shadow: 0px 3px 5px rgba(0,0,0,.15);
    transition:all .3s ease;
    margin:0;
    position:absolute;
    top:10px;
    right:10px;
}
}


.content_support {
    width:96%;
    max-width:1024px;
    margin:0 auto 50px;
    overflow:hidden;
    padding:0 0 10px;
}


.bl_support_menu {
    width:37%;
    float:left;
}

.block_productImage {
    display:block;
    width:48%;
    text-align:center;
    font-size:14px;
    float:right;
    padding:20px 0 10px;
    position:relative;
}


.space_gas {
    padding:70px 0 50px;
}


.caution {
    position:static;
    line-height:1.3;
}


.block_productImage img {
    width:100%;
}


@media all and (max-width:1024px) {
.content_support {
    width:94%;
    max-width:1024px;
    margin:0 auto 50px;
    overflow:hidden;
    padding:0 0 10px;
}
    
.bl_support_menu {
    width:40%;
    float:left;
}

.block_productImage {
    display:block;
    width:50%;
    text-align:center;
    font-size:14px;
    float:right;
    padding:20px 30px 10px 0;
    position:relative;
}
}


@media all and (max-width:560px) {
.content_support {
    width:96%;
    max-width:1024px;
    margin:0 auto 10px;
    overflow:hidden;
    padding:0 0 10px;
}
    
.bl_support_menu {
    width:100%;
    float:none;
}

.block_productImage {
    display:none;
    width:100%;
    text-align:center;
    font-size:7px;
    float:none;
    padding:0 45px 10px;
    letter-spacing:-1px;
}
    
.caution {
    position:absolute;
    width:105px;
    text-align:left;
    right:0;
    bottom:20px;
}
    
.space_gas {
    padding:0;
}
    
.block_productImage img {
    width:90%;
}
}


.bg_content_menu {
    width:100%;
    overflow: hidden;
    border-radius: 5px;
    background: linear-gradient(#ffffff, #eeeeee);
    box-shadow: 0px 3px 5px rgba(0,0,0,.15);
}


.bg_content_menu a {
    display:block;
    width:100%;
    float:none;
    font-size:20px;
    color:#000;
    padding:2em 1em 2em 140px;
    position:relative;
    background:transparent;
    transition:all .3s ease;
    margin:0;
}



.bg_content_menu a:hover {
    background:rgba(143,130,188,.1);
}


.bg_content_menu a::before {
    display:block;
    content:"";
    width:71px;
    height:71px;
    background:#8f82bc;
    font-family:"Font Awesome 6 Pro";
    font-weight:700;
    font-size:33px;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    position:absolute;
    top:50%;
    left:40px;
    transform:translateY(-50%);
    line-height:2.2em;
}


.bg_content_menu a.remoconMovie::before { content:"\f03d";}
.bg_content_menu a.hontai::before { content:"\e0c0";}
.bg_content_menu a.remocon::after { content:url("../images/qr/icon_remocon.svg");display:inline-block;width:40px;position:absolute;top:50%;left:55px;transform:translateX(0) translateY(-40%);}
.bg_content_menu a.errorCode::before { content:"\f071";}
.bg_content_menu a.supportInfo::before { content:"\f7d9";}


@media all and (max-width:1024px) {
.bg_content_menu a {
    display:block;
    width:100%;
    float:none;
    font-size:18px;
    color:#000;
    padding:2em 1em 2em 80px;
    position:relative;
    background:transparent;
    transition:all .3s ease;
    margin:0;
}
    
.bg_content_menu a::before {
    display:block;
    content:"";
    width:51px;
    height:51px;
    background:#8f82bc;
    font-family:"Font Awesome 6 Pro";
    font-weight:700;
    font-size:24px;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    position:absolute;
    top:50%;
    left:20px;
    transform:translateY(-50%);
    line-height:2.2em;
}
    
.bg_content_menu a.remocon::after { content:url("../images/qr/icon_remocon.svg");display:inline-block;width:30px;position:absolute;top:50%;left:31px;transform:translateX(0) translateY(-35%);}
.bg_content_menu a.errorCode::before { content:"\f071";}
}


@media all and (max-width:560px) {
.bg_content_menu a {
    display:block;
    width:100%;
    float:none;
    font-size:16px;
    color:#000;
    padding:1.3em 1em 1.3em 125px;
    position:relative;
    background:transparent;
    transition:all .3s ease;
    margin:0;
}
    
.bg_content_menu a::before {
    display:block;
    width:35px;
    height:35px;
    background:#8f82bc;
    font-family:"Font Awesome 6 Pro";
    font-weight:700;
    font-size:15px;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    position:absolute;
    top:50%;
    left:80px;
    transform:translateY(-50%);
    line-height:2.2em;
}
    
.bg_content_menu.menu_2col a {
    display:block;
    width:50%;
    float:left;
    font-size:16px;
    color:#000;
    padding:50px 1em 1em;
    position:relative;
    background:transparent;
    transition:all .3s ease;
    margin:0;
    text-align:center;
}
    
.bg_content_menu.menu_2col a::before {
    display:block;
    width:35px;
    height:35px;
    background:#8f82bc;
    font-family:"Font Awesome 6 Pro";
    font-weight:700;
    font-size:15px;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    position:absolute;
    top:15px;
    left:50%;
    transform:translateX(-50%) translateY(0);
    line-height:2.2em;
}
    
.bg_content_menu a.remocon::after { content:url("../images/qr/icon_remocon.svg");display:inline-block;width:20px;position:absolute;top:35%;left:50%;transform:translateX(-50%) translateY(-50%);}
}



.block_linkButton {
    width:100%;
    text-align:center;
}


.block_linkButton a {
    display:block;
    width:80%;
    max-width:450px;
    margin:0 auto;
    background:#FFF;
    border:3px solid #8f82bc;
    color:#8f82bc;
    font-size:18px;
    padding:1em;
    text-align:center;
    box-shadow: 0px 3px 5px rgba(0,0,0,.15);
    transition:all .3s ease;
}


.block_linkButton a:hover {
    color:#FFF;
    background:#8f82bc;
}


footer {
    text-align:center;
    padding:40px 0;
    font-size:12px;
}


@media all and (max-width:1024px) {
.block_linkButton a {
    display:block;
    width:80%;
    max-width:400px;
    margin:0 auto;
    background:#FFF;
    border:3px solid #8f82bc;
    color:#8f82bc;
    font-size:16px;
    padding:1em;
    text-align:center;
    box-shadow: 0px 3px 5px rgba(0,0,0,.15);
    transition:all .3s ease;
}
    
footer {
    text-align:center;
    padding:30px 0;
    font-size:12px;
}
}
    


@media all and (max-width:560px) {
.block_linkButton a {
    display:block;
    width:96%;
    max-width:450px;
    margin:0 auto;
    background:#FFF;
    border:3px solid #8f82bc;
    color:#8f82bc;
    font-size:14px;
    padding:1em;
    text-align:center;
    box-shadow: 0px 3px 5px rgba(0,0,0,.15);
    transition:all .3s ease;
}


.block_linkButton a:hover {
    color:#FFF;
    background:#8f82bc;
}


footer {
    text-align:center;
    padding:20px 0 30px;
    font-size:11px;
}
}


.container {
    width: 96%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 0 !important;
}


/* test */
.bar01 {
    width:100%;
    height:70px;
    background:#333;
}


.bar02 {
    width:100%;
    height:45px;
    position:absolute;
    bottom:0;
    left:0;
    background:#333;
}