/* root */
:root{
	--maxcol:1600px;
	--w100:100%;
	--sidebar:clamp(200px, 30vw, 360px);
	
	--white1:#fff;
	--white2:#fbfbfb;
	--black1:#000;
	--black2:#18181b;
	--black3:#45454a;
	--black4:#292e35;
	--black80:rgb(0 0 0 / 80%);
	--black90:rgb(0 0 0 / 90%);
	--gray1:#a7a7a7;
	--gray2:#f1f1f1;
	--gray3:#7f7f7f;
	--red1:#cc0c0c;
	--red2:#c50000;
	--red3:#750000;
	--red4:#e2e6e9;
	--green1:#0e5814;
	--blue1:#0068ec;
	--yellow1:#ffa916;
	
	--tem1:#ffcd17;
	--tem2:#d60000;
	--tem3:#b70000;
	--tem4:#ffc600;
	--tem5:#4200c2;
	--tem6:#3d3d41;	
	--tem7:#3d4249;
	--tem8:#92d1ca;
	--tem9:#1f1f1f;
	--tem10:#dddddd;
	--tem11:#850000;
	
	--gar1:linear-gradient(0deg, rgb(0 0 0 / 60%) 20%, rgb(0 0 0 / 10%) 70%, rgb(0 0 0 / 0%) 100%);
	--gar2:linear-gradient(90deg, rgba(226,3,3,1) 0%, rgba(190,0,0,1) 21%, rgba(124,0,0,1) 54%, rgba(103,0,0,1) 77%, rgba(162,1,1,1) 100%);
	--gar3:linear-gradient(0deg, rgba(18, 18, 18, 1) 0%, rgb(73 73 73) 20%, rgba(33, 33, 33, 1) 55%, rgb(0 0 0) 92%, rgb(206 206 206) 100%);
	--gar-line:linear-gradient(0deg, rgb(52 200 3) 0%, rgb(54 219 0) 100%);
	--gar-fb:linear-gradient(0deg, rgb(225 225 225) 0%, rgb(246 246 246) 100%);
	
	
	--link:red;
	--linkup:#ffc812;
	
	--bgline:#2ec814;
	--bglineup:#fff;
	
	--bgfb:#4267b2;
	--bgfbup:#5889ec;
			
	--font-ct1:clamp(14px, 1vw, 18px);
	--font-ct2:clamp(14px, 1.2vw, 20px);
	--font-ct3:clamp(14px, 1.5vw, 24px);
	--font-a:clamp(14px, 1.2vw, 22px);
	--font-ss:clamp(11px, .65vw, 14px);
	--font-sm:clamp(13px, .8vw, 16px);
	--font-m:clamp(15px, 1.8vw, 24px);
	--font-l:clamp(16px, 2vw, 26px);
	--font-x:clamp(18px, 2.2vw, 30px);	
	--font-xl:clamp(22px, 3.5vw, 40px);
	--font-xx:clamp(24px, 2.6vw, 50px);
	--font-xxx:clamp(38px, 4vw, 60px);
	--font-xxxx:clamp(40px, 10vw, 120px);
		
}

*:focus {outline: none !important;}
*, *:before, *:after {box-sizing:border-box;position:relative;}
html{min-width:300px;width:100%;background:#e9e9e9;}
body{background:transparent !important;color:#444 !important;}
details{z-index:11;position:absolute;right:0;bottom:0;-webkit-transition:all 0.3s;transition:all 0.3s;}
summary{z-index: 301;width:100% !important;padding:5px;-webkit-transition:all 0.5s;transition:all 0.5s;position:relative;display:grid !important;justify-content:end;align-items:center;outline:0;}
summary:after {content: "more";width:100%;max-width:200px;min-width:120px;text-align:center;color:#fff;padding:3px 10px;margin:0 auto;
font-family:arial;font-weight:400;text-shadow:0px 1px 4px rgba(0, 0, 0, 0.58);
font-size:.64rem;position:relative;border-radius:4px !important;cursor:pointer;border:1px solid #b10909;
-webkit-transition:all .2s;transition:all .2s;
background:rgb(167, 0, 0);
background:linear-gradient(0deg, rgb(122, 0, 0) 0%, rgb(217, 0, 0) 70%, rgb(234, 33, 33) 100%);}
summary:hover:after{color:#0d42b4 !important;text-shadow:1px 1px 0 #ffee99;border:1px solid #f6cf10;
background: rgb(255,200,0);
background: linear-gradient(0deg, rgb(255, 143, 12) 0%, #FFC107 56%, rgb(255, 224, 29) 100%);}
details[open] summary:after {content: "Close X";}
details[open]{position:relative !important;background:#fff;margin-top:-38px;}
p.tx-detail{padding:20px;font-size:0.64rem;color:#444;text-indent:45px;line-height:1.3;border-bottom:1px solid #eaeaea;}

/* template*/
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,a,li,span
{font-size:1rem;margin:0;padding:0;border-width:0;}
body,div,ol,ul,li,button,span,label,p,a,input,detail,h1,h2,h3,h4,h5,h6,th,td,tr,textarea,input,select,option{font-family:'Prompt', sans-serif !important;}
span{display:inline;}
p{margin:0 !important}
h1,h2,h3,h4,h5,h6{margin:0 !important;}
h1{font-size:1.4em;font-weight:inherit;}
h2{font-size:1.2em;font-weight:inherit;}
h3{font-size:1.1em;font-weight:inherit;}
h4{font-size:1em;font-weight:inherit;}
h5{font-size:.9em;font-weight:inherit;}
h6{font-size:.8em;font-weight:inherit;}
strong{font-weight:700;}
img{vertical-align:middle;border:none;width:100%;max-width:100%;object-position: center;object-fit: cover;}
a,img{border:none;outline:none;vertical-align:middle}
ul{list-style-type: none;}
nav ul{list-style-type: none;margin:0 auto;}
nav ul li {display:inline;margin:0;background:none;width: auto;}
a:link,a:visited{text-decoration:none !important;-webkit-transition: all 0.3s ; transition: all 0.3s;}
a:hover{color:var(--linkup);}
a:active{color:var(--black1)}
button{border:none;cursor: pointer;background:transparent;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
button:focus{outline: none;}

.rf{width:100%;position:relative;display:grid;margin:0 auto;padding:0;justify-content:stretch;justify-items:center;}
.rf-flex{width:100%;position:relative;padding:0;margin:auto;display:flex;display:-webkit-flex;justify-items:center;justify-content: center;align-items:center;flex-wrap:wrap;}
.ccc{justify-content:center;justify-items:center;align-content:center;align-items:center;}
.gab{grid-gap:1rem}

::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track {background: rgb(0 0 0 / 10%);}
::-webkit-scrollbar-thumb {background: var(--tem6);}
::-webkit-scrollbar-thumb:hover {background: var(--tem2);}



/* tranform */
.moveup{-moz-animation:moveup 20s ease-in-out infinite;-webkit-animation:moveup 20s ease-in-out infinite;-o-animation:moveup 20s ease-in-out infinite;animation:moveup 20s ease-in-out infinite;}
@keyframes moveup{0%{transform:translate(0px,0px);}
50%{transform:translate(0px,-25px);}
100%{transform:translate(0px,0px);}
}
@-moz-keyframes moveup{0%{-moz-transform:translate(0px,0px);}
50%{-moz-transform:translate(0px,-25px);}
100%{-moz-transform:translate(0px,0px);}
}
@-webkit-keyframes moveup{0%{-webkit-transform:translate(0px,0px);}
50%{-webkit-transform:translate(0px,-25px);}
100%{-webkit-transform:translate(0px,0px);}
}
@-o-keyframes moveup{0%{-o-transform:translate(0px,0px);}
50%{-o-transform:translate(0px,-25px);}
100%{-o-transform:translate(0px,0px);}
}

.character-box{
	-webkit-animation:fadeup 2s ease-in-out;
	animation:fadeup 2s ease-in-out;}
@-webkit-keyframes fadeup{
	from{-webkit-transform:translateY(100px);}
100%{-webkit-transform:translateY(0px);}
}
@keyframes fadeup{
	from{transform:translateY(100px);}
100%{transform:translateY(0px);}
}

.ico-shake:hover .btn-ico,.ico-shake:hover .btn-ico2{
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  animation-iteration-count: 2;
}
@keyframes ani-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, -1px) rotate(2deg);
  }
  
  20%, 80% {
    transform: translate3d(2px, -2px, 2px) rotate(-5deg);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, -4px) rotate(10deg);
  }

  40%, 60% {
    transform: translate3d(4px, 4px, 4px) rotate(-10deg);
  }
}

.tag-new{
  animation: textnew 0.3s infinite;
}
@keyframes textnew{
	from {color: red;}
  to {color: #5c0000;}
}
/* fogeffect */
.fog-effect{position:fixed;left:0;bottom:0;z-index: 10;width:100%;height:100vh;overflow:hidden;-webkit-filter: blur(1px) grayscale(0.2)saturate(1.2) sepia(0.2);filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);pointer-events: none;}
#foglayer_01, #foglayer_02, #foglayer_03 {
    height: 100%;
    position: absolute;
    width: 200%;
  }
  #foglayer_01 .image01, #foglayer_01 .image02,
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02 {
    float: left;
    height: 100%;
    width: 50%;
  }
  #foglayer_01 {
    -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
    -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
    animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  }
  #foglayer_02, #foglayer_03 {
    -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
    -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
    animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  }
  #foglayer_01 .image01, #foglayer_01 .image02 {
    background: url("../images/fog1.webp") center center/cover no-repeat transparent;
  }
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02{
    background: url("../images/fog2.webp") center center/cover no-repeat transparent;
  }
  /* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @-moz-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @-o-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  /* ---------- Keyframe Layer 2 ---------- */
  @-webkit-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @-moz-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @-o-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  /* ---------- Keyframe Layer 3 ---------- */
  @-webkit-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @-moz-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @-o-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @keyframes foglayer_03_opacity {
    0% { opacity: .8; }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  /* ---------- Keyframe moveMe ---------- */
  @-webkit-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @-moz-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @-o-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  
  @media only screen
    and (min-width: 280px)
    and (max-width: 767px) {
      #foglayer_01 .image01, #foglayer_01 .image02,
      #foglayer_02 .image01, #foglayer_02 .image02,
      #foglayer_03 .image01, #foglayer_03 .image02 {
        width: 100%;
      }
    }