@charset "utf-8";
/*--基本--*/
:root{
	--font-size:15px;
	--max-width:1200px;
	--color: #000;/*文字色*/
	--color-hover: #FF008D;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --sub1-color:#FF008D;
  --sub2-color:#000;
  --lang-active: #000;
	/*--background: #FF0cccccc08D;背景*/
  --spec-border: #ff899f;
  --btn:#FFD000;/*ボタンの色*/
  --btn-hover:#FFD000;/*ボタンの色:hover*/
  --btn-color:#000;/*ボタンの文字色*/
  --btn-color-hover:#000;/*ボタンの文字色:hover*/
  --btn-max-w:600px;/*ボタンの最大幅*/
  --border-radiue:0;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #FF008D;/*スライダー矢印*/
  --slider-page: #FF008D;/*スライダーページネーション*/
}



@media screen and (max-width: 768px){
	:root{
      --font-size:12px;
      --btn-max-w:100%;/*ボタンの最大幅*/
    }
}


/*---------
　Font
---------*/
.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*英語*/
.comic-sans{font-family: comic-sans-ms, sans-serif;
font-weight: 400;
font-style: normal;}

/*---------
　style
---------*/
body{position: relative;}
body a:hover{text-decoration: none;}
body a:visited{color: purple;}
.wrap{width: 100%; margin: 0 auto; height: calc(100vh - 71px);overflow-y: scroll; background: url(../images/bg.png);border: 3px solid #000;border-color: #000 #FFF #fff #717171;position: relative;}
.wrap::-webkit-scrollbar {
width: 20px;
}
.wrap::-webkit-scrollbar-track {
background-color: #c0c0c0;
}
.wrap::-webkit-scrollbar-thumb {
background-color: #cccccc;
border: 2px solid #cccccc;
border-color: #f9fdfe #7d7e80 #7d7e80 #f9fdfe;
border-radius: 0;
}
.window{padding: 66px 5px 5px; background: #cccccc; height: 100vh;}



header{position: absolute; background: #cccccc; width: 100%; height: 66px; left: 0; top: 0;padding: 5px;}
header h1{font-size: 10px; color: #fff; line-height: 1; width: 100%; background-image: linear-gradient(90deg, #0f4bb4, #3e7fde); padding: 5px;position: relative;}
header h1 .button_area{position: absolute; height: 15px;top: 2.5px; right: 2.5px;}
header h1 .button{height: 15px; width: 15px; display: block; background: #c0c0c0;border: 2px solid #000; border-color: #f9fdfe #7d7e80 #7d7e80 #f9fdfe;position: relative;}
header h1 .button:first-of-type{margin-right: 2px;}
header h1 .button:last-of-type{margin-left: 2px;}
header h1 .button span{display: block; position: absolute;}
header h1 .button.small span{width: calc(100% - 2px); height: 2px; background: #000; bottom: 1px; left: 1px;}
header h1 .button.big span{width: calc(100% - 2px); height: 8px; border: 1px solid #000; border-width: 2px 1px 1px 1px; top: 2px; left: 1px;}

header .address{background: #fff; width: calc(100% - 125px); margin-top: 7px;border-radius: 2px; border: 1px solid #000; border-width: 3px; border-color: #000 #B8B8B8 #B8B8B8 #000; padding: 1px 30px 1px 5px; box-sizing: border-box;font-size: 12px; background-image: url(../images/icon_bookmark.jpg); background-repeat: no-repeat; background-position: right center; background-size: auto 80%;}
header .address span{overflow: hidden; width: 100%; display: block;}

.Language{position: absolute;top: 0; right: 0; color: #fff;letter-spacing: .2em; padding: .5em .5em 0  0; font-size: .8em;}
.Language li{position: relative; }
.Language li::after{content: '/'; }
.Language li:last-of-type::after{display: none;}
.Language a{color: #fff; /* display: block; */}
.Language a:valid{color: #b012ff;}

.toolbar{align-items: center;}
.toolbar-icon{margin-left: 5px;    margin-top: 4px;}
.toolbar-icon li{width: 20px; margin-right: 10px; /* padding-top: 7px; */ line-height: 1;}
.toolbar-icon li:hover img{opacity: .8;}

.menu{width: 25px; padding: 0 5px; align-items: center;}
.menu div{display: block;width: 100%; height: 2px; background: #000; position: relative;}
.menu div::before,
.menu div::after{ content: ""; display: block; width: 100%; height: 2px; position: absolute;  left: 0; background: #000;}
.menu div::before{top: -4px;}
.menu div::after{bottom: -4px;}
/*---------
article
---------*/
/*marquee*/
h3{color: aqua; animation: marquee 10s infinite; animation-timing-function: steps(130,end); width: 50%; text-align: center;font-size: 1.8em;}
h3.en{word-break: break-all;}

@keyframes marquee {
  0%, 100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(100%);
  }
}

/*コンテンツ*/
.cnt{width: 80%; max-width: 1200px; background: #ccc; margin: 0 auto; padding: 20px 0;}
figure{border-radius: 80%; overflow: hidden; border: 2px solid #000;width: 80%; margin: 2em auto;line-height: 0;}
.cnt p{text-align: center;}
h2{width: 80%; max-width: 795px; margin: 0 auto;}
.btn_online{width: 60%; max-width: 315px; margin: 1em auto 0; display: block;line-height:1 ;}
hr{width: 90%; margin: 2em auto;}
.construction{padding: 0 3em; font-size: 1.2em; margin-top: 1em;}
.construction span{position: relative;}
.construction span::after,
.construction span::before{content: ""; display: block; position: absolute; top:0;right: -2em;background-image: url(../images/icon_construction.png); background-repeat: no-repeat;width: 1.5em; height: 1.6em;background-position: center top; background-size: 100% auto;}
.construction span::after{left: -2em;}
/*bnr_area*/
.bnr_area ul{gap: 20px; justify-content: center; max-width: 90%; margin: 0 auto;}
.bnr_area li a{line-height: 1;}

.counter_wrap{margin: 3em 0;}
.counter_area{justify-content: center;align-items: center; align-self: center;}
.counter_area p{line-height: 1;}
.counter_area p:first-of-type{width: 129px;}
.counter_area p:last-of-type{width: 138px;}
.counter_area.zh p:last-of-type{width: 61px;}
.counter_area.en p{width:238px;}
.counter_area .counter{color: #FDE700;background: #000; padding: 0 5px; font-size: 2em; margin: 0 10px;}
.counter_area .counter li{padding: 5px 5px 7px;line-height: 1;}
.counter_area + p{margin-top: .5em;}
.counter_area + p a{color: #2612FF; text-decoration: underline;}
/* .counter_area + p a:hover{text-decoration:none;} */
.counter_area + p a:valid{color: #b012ff;}
/*---------
footer
---------*/
footer{border: none;padding:50px 10px 10px;}
footer .copyright{text-align: center;}


@media screen and (max-width: 768px){
  h3{font-size: 1.2em; width: 50%;animation: marquee 12s infinite;animation-timing-function: steps(130,end); }
  

  h2{animation-duration: 10s;}
	h2 span{display: none;}

  figure{width: 90%;}

  .btn_online{max-width: 250px;}
  .counter_area{flex-direction: column;}
  .counter_area .text:first-of-type{margin-bottom: .5em;}
  .counter_area .text:last-of-type{margin-top: .5em;}

}

@media screen and (max-width: 600px){
  .cnt{padding-top: 25px;}
  .bnr_area .flex{flex-direction: column; gap: 10px;align-items: center;}

}