:root{
--vb_red:#e52834;
}
/*--common--*/
a{transition:.4s}
#content,#left{position:relative}
#content.clearfix{overflow:visible}
sup{position:relative;font-size:.7em;top:-.4em;/*z-index:-1*/}

ul.kome,p.kome{font-size:.9em;margin:1em auto;padding:.5em}
ul.kome li,p.kome{padding-left:1.5em;text-indent:-1.5em}
section hr{margin:2em auto;height:1px;background:#999;visibility:visible}
.sml{font-size:.9em}
.mt2{margin-top:2em}
.mb2{margin-bottom:2em}
.ta_c{text-align:center}
.ta_r{text-align:right}
#left section p{margin-bottom:0}
#left section h3,#left section h2{background:none;border:none;color:#000}
#left section h3::before,#left section h2::before{content:none}

figure img{max-width:100%}

/*--btn--*/
.gray_btn{margin:3em auto;text-align: center}
.gray_btn a{font-size:1.1em;padding:.8em 3em;background:#eee;width:fit-content;margin:0 auto;border-radius:2em;border-bottom:1px #ccc solid;font-weight:bold}
.gray_btn a:hover{opacity:.7}

/*--common--*/
#left h2.ttl{margin:1.5em auto;padding:.5em 1em .5em 1.2em;background:#f5f5f5;font-size:1.5em;font-weight:bold;position:relative;border-radius:.2em}
#left h2.ttl::before{content:"";display:inline-block;position:absolute;height:1.5em;width:5px;background: linear-gradient(to bottom, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);top:0;bottom:0;left:.5em;margin:auto}
#left h2.ttl b{color:var(--vb_red);font-weight:bold;}

/*--header--*/
section header{width:auto;margin:0;background:none;height:auto;}
#left section header h1{padding:0;background:url(../img/feature/img_main_vb.jpg) center / contain no-repeat;width:730px;height:200px;margin-bottom:2em}
#left section header h1 b{font-size:0px;line-height:0;color:transparent;}
#left section header h2{text-align:center;font-size:1.2em;color:#e52834;margin:3em auto;font-weight:bold;background:none;border:none}
#left section header h2 strong{font-size:1.1em;border-bottom:2px var(--vb_red,#e52834) solid;font-weight:bold;}

nav.nav{position:sticky;top:0;margin:1em auto;padding:.2em 0;background:#fff;border-bottom: 1px #333 solid;z-index:10}
nav.nav ul{width:100%;position:relative;right:inherit;display:flex;flex-wrap:wrap;justify-content:space-between}
nav.nav ul li{border-left:1px #ccc solid;flex:1 1 auto;padding-bottom:.5em}
nav.nav ul li:last-child{flex:0 0 auto;padding:0 1em}
nav.nav ul li a{display:flex;align-items:center;justify-content:center;height:100%;padding-bottom:.4em;line-height:1.2em;position:relative;color:#000}
nav.nav ul li a::after{content:"";display:block;width:0;height:3px;background:var(--vb_red,#e52834);position:absolute;bottom:1px;left:2px;transition:.4s}
nav.nav ul li a p{font-weight:bold;text-align:center;}
nav.nav ul li.vb_dlp a::after{content:none;}
.vb_dlp a p{position:relative;padding:.5em 1em;color:#fff;background:var(--vb_red,#e52834);border-radius:.5em;width:fit-content;transition:.4s}
    
.vb_top .vb_top a,.vb_pro .vb_pro a,.vb_req .vb_req a,.vb_how .vb_how a,.vb_faq .vb_faq a,
nav.nav a:hover{color:var(--vb_red,#e52834);}
.vb_top .vb_top a::after,.vb_pro .vb_pro a::after,.vb_req .vb_req a::after,.vb_how .vb_how a::after,.vb_how .vb_how a::after,.vb_faq .vb_faq a::after,
nav.nav a:hover::after{width:calc(100% - 4px)}

.vb_dlp a:hover p{color:#ffeb3b;transform:scale(1.1)}

/*--tab--*/
ul.tabs{margin:2em auto 1em;display:flex;align-items:center;justify-content:space-between;gap:0 2px}
ul.tabs li{flex:1 1 auto;}
ul.tabs li a{padding:1em 0;font-size:1.1em;display:flex;align-items:center;justify-content:center;height:100%;font-weight:bold;border-radius:1em 1em 0 0;background:linear-gradient(to bottom, rgba(235,235,235,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(180,180,180,1) 100%) !important;color:#666 !important;position:relative}
ul.tabs li a p{font-weight:bold}
ul.tabs li a::before{content:"";position:absolute;display:inline-block;width:.8em;height:.8em;background:#fff;border-radius:50%;right:.5em;top:0;bottom:0;left:inherit;margin: auto}
ul.tabs li a::after{content:"";position:absolute;display:inline-block;width:.3em;height:.3em;border-top:1px #ccc solid;border-right:1px #ccc solid;transform:rotate(45deg);top:0;bottom:0;right:.8em;margin:auto}
ul.tabs li a:hover{color:#000}
ul.tabs li a.tab_active{color:#fff !important;background: linear-gradient(to bottom, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%) !important;}

/*--footer--*/
section footer{padding-top:1em;background:none}
section footer ul{display:flex;align-items:center;justify-content:space-evenly;margin-bottom: 2em}
section footer ul li{flex:1 1 auto;text-align:center}
section footer ul li+li{border-left:1px #ccc solid}
section footer ul li:last-child{border:none}
section footer ul li:last-child img{object-fit:contain;height:2em}
section footer small{display:block;text-align: center}

/*--index--*/
ul.point{text-align:center}
#left ul.point h3{font-weight:bold;font-size:1.2em;margin:2em auto}
ul.point li+li{padding:1em;border:1px #ccc solid;border-radius:.5em;margin:1em auto}
ul.point li+li h3{margin:0 auto .5em}
.vb_top ul.tabs li a.tab_active{background:linear-gradient(to bottom, rgba(60,76,132,1) 0%,rgba(44,72,119,1) 50%,rgba(44,72,119,1) 50%,rgba(44,72,119,1) 51%,rgba(59,58,89,1) 51%,rgba(59,58,89,1) 51%,rgba(9,21,66,1) 100%) !important;color:#a2cc2a !important;}
.vb_top ul.tabs li:first-child a.tab_active{color:#0da7ed !important;}
#left .vb_top .tab_cont h2{font-size:2em;margin:1em auto;text-align:center}
ul.sample{margin:2em auto;display:flex;gap:1em;flex-wrap:wrap;}
ul.sample li{padding:1em;background:#f5f5f5;width:45%;display:flex;flex-wrap:wrap;flex-direction:column;}
ul.sample li h3{font-weight:bold;font-size:1.2em;text-align: center}
ul.sample li figure{margin:auto;text-align: center}
ul.sample li p{margin-top: auto}
#left h3.red{color:var(--vb_red,#e52834);text-align:center;font-size:1.5em;font-weight:bold;margin:2em auto 0}
ul.protect{margin:1em auto}
ul.protect li{display:flex;align-items:center;gap:1em;margin-bottom:2em}
ul.protect.rev li{flex-direction:row-reverse;justify-content:flex-end;}
ul.protect li div{width:72%}
ul.protect figure{text-align:center}
#left ul.protect h4{font-size:1.5em;font-weight:bold;margin-bottom:1em}
ul.protect p{margin:1em auto}
ul.protect figure{width:25%}
.vb_top #tab2 ul.protect.rev img{max-height:8em;object-fit:contain}
#left .vb_top #tab2 h4.red{color:var(--vb_red);font-size:1.5em;text-align:center;margin:2em auto;font-weight:normal}
#left .vb_top #tab2 h4.red.mb05{margin-bottom:.5em}

.flex{display:flex;justify-content: space-between;align-items:flex-start;flex-wrap:wrap;gap:1em}
.flex.col3>*{flex:1 1 30%;text-align:center}
#left .flex.col3 h4{font-size:1.2em;font-weight:bold;text-align:center;margin:1em auto}
.flex.col3 p{margin-top: auto;text-align:left}
.vb_top .flex.col3{margin: 2em auto}
.flex.col2>*{flex:1 1 45%}
dl.protect dt{font-size:1.2em;font-weight:bold;margin-bottom:.5em}
dl.protect dd{margin-bottom:1.5em}
dl.protect dd p.kome{margin:0 auto}

/*--order--*/
section.order{background:#fffbf1}
#left section.order h2{padding:.8em 0;font-size:1.5em;font-weight:bold;background:#444444;color:#fff;border-radius:.2em .2em 0 0;text-align:center;position:relative}
#left .order h2:before{content:"";position:relative;display:inline-block;height:1.2em;width:1.2em;background:url(../img/feature/ico_pen.png)center /contain no-repeat;border:none}
#left .order h3{color:var(--vb_red);font-size:1.5em;font-weight:bold;text-align:center;margin:1.5em auto}
.order dl.step{width:95%;margin:1em auto;padding-bottom: 1em}
.order dl.step dt{padding:.5em 1em;background:#ccc;font-size:1.5em;font-weight:bold;border-radius:.4em .4em 0 0}
.order dl.step dt b{color:var(--vb_red);font-weight:bold;padding-left:.5em;position:relative}
.order dl.step dt b::before{content:"";display:inline-block;position:absolute;height:1em;width:5px;background: linear-gradient(to bottom, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);top:0;bottom:0;left:-.2em;margin:auto}
.order dl.step dd{padding:1em;background:#fff;position:relative;margin-bottom: 3em;border:1px #ccc solid;border-radius:0 0 .5em .5em}
.order dl.step dd::after{content:"";width:3em;height:1em;display:inline-block;position:absolute;background:#444;clip-path:polygon(0 0,100% 0,50% 100%);bottom:-2em;left:0;right:0;margin: auto;}
.order dl.step dd:last-child{margin-bottom:0}
.order dl.step dd:last-child::after{content:none;}

/*--aside.faq--*/
aside.faq{margin:1.5em auto;border:1px #eee solid;border-radius:.2em;background:#f4f4f4;padding: 1em 1.5em;text-align:center}
aside.faq p{padding-bottom:1em;font-size:1.2em;border-bottom:1px #ccc solid}
aside.faq ul{margin:1.5em auto 1em;display:flex;align-items: center;justify-content: space-evenly;gap:1em}
aside.faq ul li{width:30%;}
aside.faq ul li a{display:block;position:relative;line-height: 3em;text-align:center;font-size:1.2em;color:#fff;font-weight:bold;background:linear-gradient(to bottom, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);border-radius:.2em;box-shadow:1px 1px 2px #666;border:1px #c00 solid}
aside.faq ul li+li a{background: linear-gradient(to bottom, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%);border:1px #2e77b1 solid}
aside.faq ul li a:hover{transform:scale(1.05);opacity:.8}


/*--product--*/
ul.anker{margin:3em auto 0;display:flex;gap:1em}
ul.anker li+li{border-left:1px #ccc solid;padding:0 1em}
ul.anker a,.arrowlink a,ul.anker a:visited,.arrowlink a:visited{text-decoration: underline;color:#03a9f4}
ul.anker a:hover,.arrowlink a:hover{color:#00bcd4}

#left table.pro,#left table.req,#left table.tbl{border-collapse:collapse;box-sizing:border-box;font-size:.9em;width:100%}
#left table.pro th,#left table.pro td,#left table.req th,#left table.req td,#left table.tbl th,#left table.tbl td{padding:.2em .5em;border:1px #e6e6e6 solid;vertical-align:middle;color:#000}
#left table.pro th,#left table.req th,#left table.tbl th{font-weight:bold;background:#f6f6f6}
#left table.pro tr:first-child th,#left table.req .head th,#left table.tbl th:first-child,#left table.tbl .head th{background:#ccc;text-align:center}
#left table.pro tr:first-child th:nth-of-type(1){width:20%}
#left table.pro tr:first-child th:nth-of-type(2){width:60%}
#left table.pro tr:first-child th:nth-of-type(3){width:10%}
#left table.pro tr:first-child th:nth-of-type(4){width:10%}
#left table.pro td p,#left table.req td p{text-align:center;margin:0 auto}
table.pro td p.kome,table.req td p.kome{margin:0 auto;text-align:left;font-size:.8em;padding:0 0 0 1em;text-indent:-1em;line-height:1.2em}
#left table.pro th[colspan]{background:#f7dee5;padding:1em 0;text-align:center}

#left table.req{margin:1em auto}
#left table.req th{padding:1em .5em}
section#mac,section#win{padding-top:210px;margin-top:-210px}

/*--howto--*/
.arrowlink a{position:relative;}
.arrowlink a::before{content:"";display:inline-block;width:.5em;height:.5em;background:#03a9f4;clip-path:polygon(0 0,100% 50%,0 100%);margin-right:.5em}
.arrowlink a:hover::before{background:#00bcd4}
.flex.inst{margin-bottom: 2em}
.flex.inst div{width:55%}
.flex.inst div h4.red{font-size:1.1em;margin-bottom:1em}
.flex.inst div p{margin:0 auto 1em}
.flex.inst b{font-weight:bold;font-size:1.1em}
.flex.inst figure{width:43%}
figure.arrow figcaption{text-align:center;color:#3f51b5}
figure.trash{margin:2em auto;padding:1em;border:6px #efefef solid;display:flex;gap:1em;justify-content:space-between;align-items: center}
figure.trash figcaption{flex:1 1 auto}
#howto23{padding-top:250px;margin-top:-250px}
.vb_how h4{font-size:1.2em;font-weight:bold;margin:2em auto 1em}
.vb_how #tab3 p,.vb_how #tab4 p{margin:1em auto}

/*--faq--*/
dl.faq{margin:1em auto;}
dl.faq dt{font-size:1.1em;font-weight:bold;position:relative;padding:.5em 0 .5em 3em;border-bottom:1px var(--vb_red) solid;}
dl.faq dt::before{content:"Q";position:absolute;left:.5em;top:0;font-size:1.5em;color:var(--vb_red);}
dl.faq dd{padding:1em 0 1em 3.2em;position:relative;margin-bottom:1em;border-bottom:1px #ccc dashed}
dl.faq dd::before{content:"A";position:absolute;left:.6em;top:.3em;font-size:1.6em;color:#2196f3;font-weight:bold}
table.tbl{margin:1em auto 2em}
table.tbl b{font-weight:bold}
table.tbl a{text-decoration: underline;color:#03a9f4;word-break:break-all}
table.tbl a a:hover{color:#00bcd4}

section footer{display:none}