@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;700&display=swap');
*{ margin:0; padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;                                                                                                                                                                 
  box-sizing:border-box; 
}
html ,body{ width:100%; font-size:13px; background:#000; color:#fff; text-align:center; line-height:1.8rem; overflow-x:hidden; 
	font-family:"新微軟正黑體", "微軟正黑體", -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.l{ display:block;} 
.m{ display:none;} 
.s{ display:none;}

a:hover{ cursor:pointer;}
img{ width:100%; height:auto; font-size:0;}
body>table:nth-of-type(1){ position:relative; z-index:1;}
body>table:nth-of-type(1) img{ width:initial;}

/*像素比例尺*/
.ruler{ width:100%; height:18px; background:url(../images/ruler.png) no-repeat left top; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:none;}

body{ background:none;}
.wrapper{ width:100%; margin:0 auto; position:relative;}

:root{
    --text-shadow-w:0px 0px 5px rgba(255, 255, 255, 0.5), 0px 0px 4px rgba(255, 255, 255, 0.5), 0px 0px 3px rgba(255, 255, 255, 0.8);

    --table-color:#000;
    --table-color-light:#fcfcfc;
    --table-color-dark:#e4e4e4;

    /* con */
    --font-size-ttl-writing:2.4rem;
    --font-size-ttl-otr:1.5rem;
		--font-size-base:1.3rem;
    --font-size-table:1.15rem;
}

@media (max-width:1600px){
        :root{
              /* con */
              --font-size-ttl-otr:min(5.5vw, 1.45rem);
              --font-size-base:min(3.8vw, 1.2rem);
              --font-size-table:min(3.8vw, 1.2rem);
             }
}

@media (max-width:760px){
      :root{
            /* con */
            --font-size-ttl-writing:min(5vw, 2.3rem);
            --font-size-ttl-otr:min(4.8vw, 1.35rem);
            --font-size-base:min(4vw, 1.2rem);
            --font-size-table:min(4vw, 1.2rem);
          }
}

/* header --------------------------------------- */
header{ width:100%;
        --header_height:min(46vw, 67rem);
        height:var(--header_height); 
        display:flex; flex-direction:column; justify-content:space-between;
        position:relative;
      }
.btn-logo{ width:16.24vw; max-width:312px;
          aspect-ratio:469 / 166;
          position:absolute; z-index:1;
          top:0; left:0;
          }
.btn-logo a{ background:url(../images/btn-logo.webp) no-repeat center center / 100% auto; transition:all 0.3s;}
@media (hover){
        .btn-logo:hover a{ transform:scale(1.03); filter:brightness(1.15);}	
}
  
ul.menu-soc{ right:3rem;
            top:1.1rem;
            position:absolute; z-index:1;
            border:1px solid rgb(187, 187, 187);
            background-color:rgba(0, 0, 0, 0.6);
            border-radius:50rem;
            padding:0 1.3rem; 
           }         
ul.menu-soc li{ display:inline-block; vertical-align:middle;
                position:relative;
                margin-right:.55rem; 
                font-size:min(3.3vw,1.3rem);
                font-weight:500;
                line-height:2.2;
                }  
ul.menu-soc li:last-of-type{ margin-right:0rem;}
ul.menu-soc li:nth-of-type(2){ width:1px; height:min(3.3vw,1.2rem); background-color:#8c8f99;}
ul.menu-soc a{ color:rgb(236, 236, 236);
               width:100%; height:100%; display:block;
              }
ul.menu-soc a:hover{ color:rgb(255, 255, 255);}

.sub-block{ width:68%; max-width:1280px; margin:0 auto; position:relative; }
.scope-block{ width:74vw; max-width:1500px; margin:0 auto; position:relative; }

ul.slogan-block{ width:50.1vw; max-width:975px; aspect-ratio:975 / 384;  
                 margin:0 auto -3.2rem auto;
                 pointer-events:none; position:relative;
                }
li.slogan-block__item{ width:100%; height:100%; position:absolute; left:0; top:0; }
li.slogan-block__item{ background-position:top center; background-size:100% auto; background-repeat:no-repeat; }
ul.slogan-block li.txt{ background-image:url(../images/slogan-txt.webp);}
ul.slogan-block li.eff{ background-image:url(../images/slogan-eff.webp); mix-blend-mode:screen;}
ul.slogan-block li.eff{ -webkit-mask-image:url(../images/slogan-txt.webp);
                        mask-image:url(../images/slogan-txt.webp);
                        -webkit-mask-size:100% auto;
                        mask-size:100% auto;
                        -webkit-mask-position:top center;
                        mask-position:top center;
                        animation:an_light 0.8s 0.5s infinite;
                      }

/*固定樣式*/
[class*="btn-"], [class*="menu-a"] li, [class*="menu-m"] li{ background-size:100% auto; background-repeat:no-repeat; background-position:left top; position:relative;}
[class*="btn-"] a, [class*="menu-a"] a, [class*="menu-m"] a{ width:100%; height:100%; display:block; }

/* btn-top */
.btn-top{ width:22%; max-width:75px; aspect-ratio:194 / 129; transition:transform 0.5s; position:fixed; left:50%; bottom:1rem; right:auto; cursor:pointer; display:none; z-index:99; }
.btn-top{ background-image:url(../images/btn-top.webp);}
.btn-top::before{ content:""; width:100%; height:100%; 
                  background-image:url(../images/btn-top.webp); background-position:left bottom; 
                  background-size:100% auto; 
                  background-repeat:no-repeat; 
                  opacity:0; transition:opacity 0.5s; 
                  position:absolute; top:0; left:0; 
                  pointer-events:none;
                }	
.btn-top:hover{ transform:translateY(-1.5px); }
.btn-top:hover::before{ opacity:1; }

/* ul.menu-app */
.app-block{ padding-top:1.2rem; padding-bottom:1rem; 
            filter:drop-shadow( 0px 0px 5px rgba(0, 0, 0, 0.6)) drop-shadow( 0px 0px 1px rgba(0, 0, 0, 0.5));   
          }
ul.menu-app{ width:100%; max-width:1042px; margin:0 auto; position:relative; 
             display:flex;
             justify-content:center;
             align-items:center;
            }
ul.menu-app li[class*="btn-"]{ width:19.88%; aspect-ratio:579 / 183; }

ul.menu-app li.qrcode::before{
  content:"遊戲下載"; width: 100%;
  font-size: 1.3rem; font-weight: bold; letter-spacing: 0.2rem;
  /* 文字漸層 */
  background: linear-gradient(to bottom, #fff, #c39928);
  -webkit-background-clip: text;
  background-clip: text;
  color:transparent;
  position: absolute; left: 0; top: 0; transform: translateY(-105%);
}

ul.menu-app li.qrcode,
ul.menu-app li.btn-apple,
ul.menu-app li.btn-google,
ul.menu-app li.btn-apk{ margin-right:0.8rem; }
ul.menu-app li[class*="btn-"]{ transition:all 0.3s; filter:drop-shadow( 0px 0px 1px #7c776a) drop-shadow( 0px 0px 1px #7c776a) drop-shadow( 0px 0px 1px #7c776a);}

ul.menu-app li.qrcode{ width:10.6%; aspect-ratio:1 / 1; background-image:url(../images/qrcode.svg);}

ul.menu-app li.btn-apple{ background-image:url(../images/btn-apple.svg);}
ul.menu-app li.btn-google{ background-image:url(../images/btn-google.svg);}
ul.menu-app li.btn-apk{ background-image:url(../images/btn-apk.svg);}
ul.menu-app li.btn-steam{ background-image:url(../images/btn-steam.svg);}

ul.menu-app li[class*="btn-"]:hover{ filter:drop-shadow( 0px 0px 1px #979285) drop-shadow( 0px 0px 1px #979285) drop-shadow( 0px 0px 1px #979285) brightness(1.15);}
@media (hover){
  ul.menu-app li[class*="btn-"]:hover{ transform:translateY(-4px);}
}

/* ul.menu-main */
.menu-block{ filter:drop-shadow( 0px 1px 2px rgba(0, 0, 0, 0.5)) drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.5));}
ul.menu-main{ width:100%; margin:0 auto; text-align:center;  }
ul.menu-main li{ width:33.32%; max-width:280px; aspect-ratio:420 / 101; transition:all 0.3s; background-image:url(../images/menu-main.webp); display:inline-block; }
ul.menu-main li:hover{ filter:brightness(1.15);}
ul.menu-main li:nth-of-type(1){ background-position:0 0%;}
ul.menu-main li:nth-of-type(2){ background-position:0 50%}
ul.menu-main li:nth-of-type(3){ background-position:0 100%}
@media (hover){
          ul.menu-main li:hover{ transform:translateY(-4px);}
}

/* 視覺 --------------------------------------- */
.bg-vision{ width:100%; max-width:2000px; aspect-ratio:2000 / 878; --vision-bg_size:105%;
            position:absolute; left:50%; top:0; transform:translate(-50%, 0%);
          }

/* ul.bg-block */
ul.bg-block{ -webkit-mask-image:url(../images/bg-vision_mask.webp);
            mask-image:url(../images/bg-vision_mask.webp);
            -webkit-mask-size:var(--vision-bg_size) auto;
            mask-size:var(--vision-bg_size) auto;
            -webkit-mask-position:top center;
            mask-position:top center;
            }
ul.bg-block, li.bg-block__item, li.bg-block__item div{ width:100%; height:100%; position:absolute; left:0; top:0;}
li.bg-block__item div{ background-position:top center; background-size:var(--vision-bg_size) auto; background-repeat:no-repeat; }
ul.bg-block li.eff-fire div{ background-image:url(../images/eff-fire.webp);}
ul.bg-block li.bg div{ background-image:url(../images/bg-vision.webp);}

/* ul.cha-block */
ul.cha-block{ width:80%; max-width:1450px; aspect-ratio:1450 / 839; margin:0 auto; position:relative; --vision-cha_size:100%;}
li.cha-block__item,li.cha-block__item div{ width:100%; height:100%; position:absolute; left:0; top:0; }
li.cha-block__item div{ background-position:top center; background-size:var(--vision-cha_size) auto; background-repeat:no-repeat; }
ul.cha-block li.cha-layer01 div{ background-image:url(../images/cha-layer01.webp);}
ul.cha-block li.cha-layer02 div{ background-image:url(../images/cha-layer02.webp);}
ul.cha-block li.cha-layer03 div{ background-image:url(../images/cha-layer03.webp);}

.bg-fixed{ width:100%; height:100%; 
            background:url(../images/bg-fixed.webp) no-repeat top center;
            background-size:100% auto;
            position:fixed; top:0; right:0; bottom:0; left:0;
          }

/* 動畫 --------------------------------------- */
li.cha-layer02{ opacity:0; animation:cha_Anime 0.6s 0s forwards ease-in-out;}
li.cha-layer01{ opacity:0; animation:cha_Anime 0.7s 0s forwards ease-in-out;}
li.eff-fire{ opacity:0; animation:logo_Anime 1.2s 0s forwards ease-in-out;}
ul.slogan-block{ opacity:0; animation:slogan_Anime 0.5s 0.28s forwards ease-in-out;}
ul.menu-app{ opacity:0; animation:menu_Anime 0.6s 0.75s forwards ease-in-out;}
ul.menu-main{ opacity:0; animation:menu_Anime 0.6s 0.75s forwards ease-in-out;}
.btn-logo, ul.menu-soc{ opacity:0; animation:logo_Anime 0.55s 0.85s forwards ease-in-out;}


/* 內容區 --------------------------------------- */
#pagetop{ padding:0.55rem 0 0 0;
          filter:drop-shadow( 0px 2px 2px rgba(0, 0, 0, 1)) drop-shadow( 0px 0px 1px rgba(0, 0, 0, 0.5)) drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.5));
}
.con{ width:100%; max-width:982px; margin:0 auto; 
      font-size:var(--font-size-base); line-height:1.85; color:#000; 
      text-shadow:var(--text-shadow-w);
      position:relative; z-index:1;
      }
.con-top, .con-bt{ width:100%; aspect-ratio:982 / 38; 
                   background-image:url(../images/bg-consides.webp);
                   background-repeat:no-repeat; 
                   background-size:100% auto; 
                  }      
.con-top{ background-position:center bottom;}
.con-bt{ background-position:center top;}
.con-mid{ padding:1.85rem 7.8rem 4rem 7.8rem; 
          background-image: url(../images/bg-conmidtop.webp),
                            url(../images/bg-conmidbt.webp),          
                            url(../images/bg-conmid.webp);/*底層*/
          background-repeat:no-repeat,no-repeat,repeat-y; 
          background-position:center top,center bottom,center center; 
          background-size:100% auto; 
          position:relative; z-index:1;
         }

.con p{ margin:0 auto; text-align:left; }

span.ttl-writing{ font-size:var(--font-size-ttl-writing); font-weight:bold; line-height:1.5; }
p.con-writing{ text-align:center; }
p.con-writing:first-of-type{ margin-bottom:1.25rem; }
p.con-writing span{ display:inline-block;}

h2.ttl-con{ width:49.5vw; max-width:451px; aspect-ratio:668 / 155; margin:0 auto; 
            background-image:url(../images/ttl-con.webp); background-size:100% auto; background-repeat:no-repeat; 
            color:rgba(0, 0, 0, 0); text-shadow:none; text-indent:-9999px; line-height:0; font-size:0;
          }
.p1 h2.ttl-con{ background-position:0 0%; }
.p2 h2.ttl-con{ background-position:0 50%; }
.p3 h2.ttl-con{ background-position:0 100%; }
h3.ttl-item{ height:5.4vw; max-height:51px; margin:1.95rem 0 0.5rem 0; text-align:left;}
h3.ttl-item img{ width:auto; height:100%; margin-left:-0.3rem;}
h4.ttl-otr{ margin-left:-.5rem; font-size:var(--font-size-ttl-otr); text-align:left; font-weight:bold; color:#812900;}

span.day{ display:inline-block;}


/* 列表 ----------------------------------------*/
ul.list{ margin:0 auto; text-align:left; }
ul.list li::before{ white-space:nowrap; }
ul.base{ margin-left:1.55rem; list-style:decimal; list-style-position:outside;}

ul[class*="cust"] li,
ul.sym li,
ul.ex li{ display:table;}

ul[class*="cust"] li::before,
ul.sym li::before,
ul.ex li::before{ display:table-cell;}

ul[class*="cust"] li::before{ content:attr(data-ttl)"："; }
ul.sym li::before{ content:attr(data-ttl)" "; }
ul.ex li::before{ content:attr(data-ttl)"："; }

ul.list.margin-bt{ margin-bottom:1rem; } 


/* 表格 ----------------------------------------*/
.con table{ width:fit-content; max-width:100%; margin:0 auto; border:1px solid var(--table-color); 
            font-size:var(--font-size-table); text-align:center; text-shadow:none; 
          }
.con table.margin-top-bt{ margin:.95rem auto .95rem auto; }  
.con table.margin-bt{ margin:.95rem auto 1.95rem auto; } 

.con table thead td{ padding:.52rem 1.2rem; color:#fff; white-space:nowrap; background-color:var(--table-color);}
.con table tbody td{ padding:1rem 1.2rem; }
.con table td{ border:1px solid  var(--table-color); }
.con table tbody td p:last-of-type{ display:none; }
.row3 p:nth-of-type(2){ display:none;}

.con table tbody tr.row2{ background-color:var(--table-color-light);}
.con table tbody tr.row3{ background-color:var(--table-color-dark);}
.row2 p{ text-align:inherit;/*繼承父元素屬性*/ }
.row3 p{ text-align:inherit;/*繼承父元素屬性*/ }
.con table tbody tr.row2.l{ display:table-row;}
.con table tbody tr.row3.l{ display:table-row;}
.con table tbody:nth-of-type(1) tr:nth-of-type(odd):not(.row2){ background-color:var(--table-color-dark);}
.con table tbody tr:nth-of-type(even):not(.row2){ background-color:var(--table-color-light);}
.con table tbody tr.row3{ background-color:var(--table-color-light)!important;}
.con table tbody:nth-of-type(2) tr:nth-of-type(odd){ background-color:var(--table-color-light);}
.con table tbody:nth-of-type(2) tr:nth-of-type(even){ background-color:var(--table-color-dark);}

.tbl_col3 tbody tr td:nth-of-type(3),
.tbl_col2 tbody tr td:nth-of-type(2){ text-align:left;}

table.p2 span{ display:inline-block;}
table.p3 span{ display:inline-block;}

#particles-js{ width:100%;
              background-size:100% auto;
              background-position:50% 50%;
              background-repeat:no-repeat;
              position:fixed; top:0; left:0;
              pointer-events:none;
             }


@media (max-width:1680px){

          .sub-block{ width:75%;}
          .bg-vision{ --vision-bg_size:110%;}

}

@media (max-width:1600px){

          .bg-vision{ --vision-bg_size:125%;}

          header{ --header_height:min(50vw, 70rem);}
          .btn-logo{ width:22.24vw; left:-1.8rem;}

}

@media (max-width:1440px){

            ul.menu-soc{ top:1.1rem;}
            ul.menu-soc li{ line-height:2.1;
                            font-size:min(3.3vw,1.2rem);
                          }
            ul.menu-soc li:nth-of-type(2){ height:min(3.3vw, 1.1rem);}

}

@media (max-width:1280px){

            .bg-vision{ --vision-bg_size:130%;}
            .bg-fixed{ background-size:117% auto; opacity:0.9; }
            header{ --header_height:min(65vw, 60rem);}

            ul.cha-block{ width:100%; transform:scale(1.0); transform-origin:center top;}
            ul.slogan-block{ width:78%; margin:0 auto -3.2vw auto; }
            .app-block{ padding-bottom:1vw; }

            .sub-block{ width:88%;}
            .scope-block{ width:88.8%;}

            ul.menu-soc{ top:1.2rem; right:1rem;}

            ul.menu-main{ width:90%;}
            ul.menu-main li{ width:32.6%; }

            .con{ width:86%;}
            .con-mid{ padding:1.85rem 7.8vw 4rem 7.8vw; }

} 

@media (max-width:1150px){

            .btn-top{ width:14.5vw; left:auto; right:0vw; bottom:1vw; }
            ul.menu-soc{ top:1.2rem; right:-0.5rem;}
}  

@media (max-width:1024px){

            .sub-block{ width:95%;}

            ul.menu-soc{ top:1.05rem; right:-0.7rem;}
            .btn-logo{ width:27.6vw; max-width:469px; left:-1.5rem;}

}  

@media (max-width:760px){

              #particles-js{ display:none;}
              .bg-fixed{ display:none; background-image:none;}

              .bg-vision{ aspect-ratio:900 / 1195; --vision-bg_size:100%;}

              /* ul.cha-block */
              ul.cha-block{ aspect-ratio:900 / 1195; }
              ul.cha-block li.cha-layer01 div{ background-image:url(../images/cha-layer01-s.webp);}
              ul.cha-block li.cha-layer02 div{ background-image:url(../images/cha-layer02-s.webp);}
              ul.cha-block li.cha-layer03 div{ background-image:none;}

              /* ul.bg-block */
              ul.bg-block{-webkit-mask-image:none; mask-image:none; }
              ul.bg-block li.eff-fire div{ background-image:none;}
              ul.bg-block li.bg div{ background-image:url(../images/bg-vision-s.webp);}

              /* 動畫 --------------------------------------- */
              li.cha-layer02{ animation:cha_Anime 0.6s 0s forwards ease-in-out;}
              li.cha-layer01{ animation:cha_Anime 0.6s 0s forwards ease-in-out;}
              ul.slogan-block{ animation:slogan_Anime 0.6s 0.15s forwards ease-in-out;}

              ul.menu-app{ animation:logo_Anime 0.5s 0.6s forwards ease-in-out;}
              ul.menu-main{ animation:logo_Anime 0.5s 0.6s forwards ease-in-out;}
              .btn-logo, ul.menu-soc{ animation:logo_Anime 0.6s 0.6s forwards ease-in-out;}
              .con{ opacity:0; animation:logo_Anime 0.5s 0.6s forwards ease-in-out;}

              header{ --header_height:auto;}
              .scope-block{ width:100%;}
        
              .sub-block{ width:100%; position:absolute; left:0; top:0; }
              .btn-logo{ width:43vw;
                        top:-0.1rem;
                        left:-0.1rem;
                        }
              ul.menu-soc{ padding:0 1rem;
                          right:0.71rem;
                          top:0.85rem;
                          }

              ul.menu-soc li{ font-size:min(3.85vw,1.27rem);
                              line-height:2;
                              line-height:min(6.95vw,2.9rem);
                              margin-right:.79rem;
                            }

              ul.slogan-block{ width:100%; max-width:975px; margin:min(74vw,44rem) auto -0.7rem auto; }
              li.slogan-block__item{ transform:scale(1.08); transform-origin:center bottom; }
              ul.slogan-block li.txt{ background-image:url(../images/slogan-txt-s.webp);}
              ul.slogan-block li.eff{ background-image:url(../images/slogan-eff-s.webp);}
              ul.slogan-block li.eff{ -webkit-mask-image:url(../images/slogan-txt-s.webp);
                                      mask-image:url(../images/slogan-txt-s.webp);
                                    }
              
              .app-block{ padding-top:1rem;
                          padding-bottom:0.8rem;
                        }                      
              ul.menu-app{ width:100%; flex-wrap:wrap; }
              
              ul.menu-app li.btn-apple{ margin-right:0.65rem; margin-bottom:0.55rem; }
              ul.menu-app li.btn-google{ margin-right:0; margin-bottom:0.55rem;  }
              ul.menu-app li.btn-apk{ margin-right:0.65rem;}
              ul.menu-app li.qrcode{ display:none;}
              ul.menu-app li[class*="btn-"]{ width:35.4%;}

              ul.menu-main{ width:96%;}
              ul.menu-main li{ width:49.2%; max-width:420px; }

              @media (hover){
                    ul.menu-app li[class*="btn-"]:hover{ transform:translateY(-2px);}
                    ul.menu-main li:hover{ transform:translateY(-2px);}
              }

              h2.ttl-con{ width:86.2%; margin:-0.5vw auto -2.5vw auto;}
              h3.ttl-item{ height:8.6vw; }

              #pagetop{ padding:0.38rem 0 0 0;}
              .con{ width:98.8%;}
              .con-mid{ padding:1.8rem 9vw 2rem 9vw;}
              p.con-writing:first-of-type{ margin-top:3vw; margin-bottom:2vw; }

}

@media (max-width:650px){

                ul.list.margin-bt{ margin-bottom:3.95vw; } 

                /* 表格 */
                .con table thead{ display:none; }
                .con table{ width:100%; border:none;}
                .con table tbody tr{ border:0px solid var(--table-color); }
                .con table td:not(td:last-of-type){ border:1px solid var(--table-color); border-bottom-width:0px;}

                .con table.margin-top-bt{ margin:.95vw auto -.95vw auto; }  
                .con table.margin-bt{ margin:.95vw auto 1.95vw auto; } 

                .con table tbody tr{ margin-bottom:1rem; display:block;  }
                .con table tbody td{ display:block; padding:1rem 1rem 1rem 1rem; }

                .con table tbody td p,
                .con table tbody td p:last-of-type{ width:50%; height:100%; display:inline-block; text-align:center; vertical-align: middle;}
                .con table tbody td p:first-of-type{ padding-right:1rem; }
                .con table tbody td p:last-of-type{ padding-left:1rem; }

                .con table tbody tr.row3 td p,
                .con table tbody tr.row3 td p:last-of-type{ width:33%; height:100%; display:inline-block; text-align:center; vertical-align: middle;}
                .con table tbody tr.row3 td p:first-of-type{ padding-right:1rem; }
                .con table tbody tr.row3 td p:last-of-type{ padding-left:1rem; }

                .con table tbody tr.row2 td:nth-last-of-type(1),
                .con table tbody tr.row2 td:nth-last-of-type(2){ position:relative;}                        
                .con table tbody tr.row2 td:nth-last-of-type(1)::after,
                .con table tbody tr.row2 td:nth-last-of-type(2)::after{ content:''; display:block;
                                                                        width:1px; height:100%;
                                                                        background:var(--table-color);
                                                                        right:50%; top:0; position:absolute;
                                                                      }

                .con table tbody tr.row2.l{ display:none;}

                .con table tbody tr.row3 td:nth-last-of-type(1),
                .con table tbody tr.row3 td:nth-last-of-type(2),
                .con table tbody tr.row3 td:nth-last-of-type(3){ position:relative;}                        
                .con table tbody tr.row3 td:nth-last-of-type(1)::after,
                .con table tbody tr.row3 td:nth-last-of-type(2)::after{ content:''; display:block;
                                                                        width:33%; height:100%;
                                                                        border:1px solid var(--table-color);
                                                                        border-top:0; border-bottom:0;
                                                                        left:50%; top:0; position:absolute;
                                                                        transform: translateX(-50%);
                                                                      }
                .con table tbody tr.row3 td:nth-last-of-type(1)::after{}
                .con table tbody tr.row3 td:nth-last-of-type(2)::after{ }

                .con table tbody tr.row3.l{ display:none;}

                .con table td{ width:100%;}

                .con table tbody td::before{ width:100%; padding:.2rem 1rem .2rem 1rem; margin:-1rem -1rem 1rem -1rem; 
                                              color:#fff; 
                                              background:#000;
                                              border-bottom:1px solid var(--table-color);
                                              display:block; 
                                            }

                /* -----表格 5欄------ */
                .tbl_col5 tbody td:nth-of-type(1)::before{ content:attr(data-title); }
                .tbl_col5 tbody td:nth-of-type(2)::before{ content:attr(data-title); text-align:center;}
                .tbl_col5 tbody td:nth-of-type(3)::before{ content:attr(data-title); text-align:center;}
                .tbl_col5 tbody td:nth-of-type(4)::before{ content:attr(data-title); }
                .tbl_col5 tbody td:nth-of-type(5)::before{ content:attr(data-title); }
                .tbl_col5 tbody td:nth-of-type(3){text-align:center;}

                /* -----表格 3欄------ */
                .tbl_col3 tbody td:nth-of-type(1)::before{ content:attr(data-title); }
                .tbl_col3 tbody td:nth-of-type(2)::before{ content:attr(data-title); text-align:center;}
                .tbl_col3 tbody td:nth-of-type(3)::before{ content:attr(data-title); text-align:center;}
                .tbl_col3 tbody td:nth-of-type(3){text-align:center;}

                 /* -----表格 2欄------ */
                 .tbl_col2 tbody td:nth-of-type(1)::before{ content:attr(data-title); }
                 .tbl_col2 tbody td:nth-of-type(2)::before{ content:attr(data-title); text-align:center;}
                 .tbl_col2 tbody td:nth-of-type(2){text-align:center;}

}

@media (max-width:540px){

                  ul.cust03 li::before{ display:block;}

}

@media (max-width:480px){

                  .btn-logo{ width:45vw;}

                  ul.menu-soc{ right:0.55rem;
                               top:0.75rem;
                              }

                  ul.menu-soc li{ font-size:min(3.45vw, 1.21rem);
                                line-height:min(6.85vw, 2.75rem);
                                margin-right:1.4vw
                              }

}