@charset "UTF-8";

/* 共通設定 */
html {
  font-family: 'Tektur', cursive;
  text-align: center;
}
body {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
h2{
  font-size: 1.2rem;
  margin-left: -3rem;
}
a {
  text-decoration: none;
  color: black;
}

li {
  list-style-type: none;
  margin-top: .5rem;
}

ul {text-align: left;}

header {
  color: white;
  height: 150px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#top header {
  background-color: #fbb03b;
  color: rgb(29, 13, 3);
  background-image: url(../h_title.png);
  background-repeat: no-repeat;
  background-position-y: 8px;
  height: 220px;
}
#top header p{
  line-height: 1.1rem;
}
#afr header {
  background-color: #74272d;
  background-image: url(../afr/h_title.png);
  background-repeat: no-repeat;
  background-position-y: 8px;
}
#other_afr{
  margin-top: 4rem;
  padding: 1rem 0 1rem 0;
  background-color: rgba(116, 39, 45,0.7);
  color:white;
}
#asa header {
  background-color: rgba(236, 115, 167);
  background-image: url(../asa/h_title.png);
  background-repeat: no-repeat;
  background-position-y: 8px;
}
#other_asa{
  margin-top: 4rem;
  padding: 1rem 0 1rem 0;
  background-color:rgba(236, 115, 167,0.7);
  color:white;
}
#erp header {
  background-color: rgb(0, 146, 69);
  background-image: url(../erp/h_title.png);
  background-repeat: no-repeat;
  background-position-y: 8px;
}
#other_erp{
  margin-top: 4rem;
  padding: 1rem 0 1rem 0;
  background-color:rgba(0, 146, 69,0.7);;
  color:white;
}
#nam header {
  background-color: rgb(41, 171, 226);
  background-image: url(../nam/h_title.png);
  background-repeat: no-repeat;
  background-position-y: 8px;
}
#other_nam{
  margin-top: 4rem;
  padding: 1rem 0 1rem 0;
  background-color:rgb(41, 171, 226,0.7);
  color:white;
}
#nis header {
  background-color: rgb(0, 113, 188);
  background-image: url(../nis/h_title.png);
  background-repeat: no-repeat;
  background-position-y: 8px;
}
#other_nis{
  margin-top: 4rem;
  padding: 1rem 0 1rem 0;
  background-color:rgb(0, 113, 188,0.7);
  color:white;
}
#oca header {
  background-color: rgb(145, 197, 68);
  background-image: url(../oca/h_title.png);
  background-repeat: no-repeat;
  background-position-y: 8px;
}
#other_oca{
  margin-top: 4rem;
  padding: 1rem 0 1rem 0;
  background-color:rgb(145, 197, 68,0.7);
  color:white;
}
#sam header {
  background-color: rgb(51, 51, 51);
  background-image: url(../sam/h_title.png);
  background-repeat: no-repeat;
  background-position-y: 8px;
}
#other_sam{
  margin-top: 4rem;
  padding: 1rem 0 1rem 0;
  background-color:rgb(51, 51, 51,0.7);
  color:white;
}
#scr header {
  background-color: rgb(13, 21, 57);
  background-image: url(../scr/h_title.png);
  background-repeat: no-repeat;
  background-position-y: 8px;
}
#other_scr{
  margin-top: 4rem;
  padding: 1rem 0 1rem 0;
  background-color:rgb(13, 21, 57,0.7);
  color:white;
}

.txt_challenge {
  font-size: 3rem;
  color: gold;
}

/*----------------------------
     国旗ながし 
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*  IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

/* ⇒⇒⇒⇒⇒レベルによってスピードを変える（１旗あたり２秒で流す）*/
/* 11旗 */
.d-demo_11flags-left {
  animation: infinity-scroll-left 22s infinite linear 0.5s both;
}
/* 15旗 */
.d-demo_15flags-left {
  animation: infinity-scroll-left 30s infinite linear 0.5s both;
}
/* 23旗 */
.d-demo_23flags-left {
  animation: infinity-scroll-left 46s infinite linear 0.5s both;
}
/* 35旗 */
.d-demo_35flags-left {
  animation: infinity-scroll-left 70s infinite linear 0.5s both;
}
/* 43旗 */
.d-demo_43flags-left {
  animation: infinity-scroll-left 86s infinite linear 0.5s both;
}
/* 54旗 */
.d-demo_54flags-left {
  animation: infinity-scroll-left 108s infinite linear 0.5s both;
}
/* 199旗 */
.d-demo_199flags-left {
  animation: infinity-scroll-left 398s infinite linear 0.5s both;
}
/* ⇒⇒⇒⇒⇒レベルによってスピードを変える*/



.d-demo_frm {width: calc(100vw / 12);}
.d-demo_frm>img {width: 80%;}

.d-demo__wrap:hover .d-demo__list--left {
  animation-play-state: paused;
}
/*   国旗ながし 終わり
----------------------------*/

input[type="button"] {
  margin: 1.5rem;
}

.link_wp ul {
  display: flex;
  justify-content: space-around;
}

.kokki_grid {
  display: flex;
}
.first_wp{
  display: flex;
  justify-content: space-around;
}
.first_wp div img{
  margin-top: 2rem;
  width: 800px;
  }

.next_wp {
  display: flex;
  justify-content: space-around;
}
.next_wp img{
  width: 800px;
}
.wp_2{
margin-top:3rem;
}
.to_menu img{
  margin-top: -50px;
  width: 250px;
}
.to_menu_1 img{
  margin-top: 1.5rem;
  width: 250px;
}
.to_menu_2 img{
  margin-top: 0;
  width: 250px;
}
.last_map{
  margin-top: -50px;
  width: 800px;
}

.last_wp {
  display: flex;
  justify-content: space-around;
}

.last_wp img{
  width: 250;
}

.to_right {
  text-align: right;
  padding-right: 50px;
}

.minisize {
  padding: 0;
  margin-bottom: 2rem;
  font-size: 0.8rem;
}

/* 他のレベルへのボタン */
/* (サイズなどデフォルト設定しておく。色は各ページ用に後続で設定する。ここで設定した色はシークレットページで使うので、むやみに消さない) */
.to_bgn {
  width: 250px;
  height: 3rem;
  border-radius: 50px;
  background-color: rgb(157, 164, 223);
  padding: 10px;
  text-decoration: none;
}

.to_mdl {
  width: 250px;
  border-radius: 50px;
  background-color: rgb(78, 94, 236);
  padding: 10px;
  text-decoration: none;
  color: white
}

.to_pro {
  width: 250px;
  border-radius: 50px;
  background-color: rgb(9, 32, 238);
  padding: 10px;
  text-decoration: none;
  color: white;
}

.to_demon {
  width: 250px;
  border-radius: 50px;
  background-color: black;
  padding: 10px;
  text-decoration: none;
  color: white;
}

/* index用 */
#top .to_bgn {background-color: #fdf4e5;;}
#top .to_mdl {background-color: #fdc975;;}
#top .to_pro {background-color: #ff9d00;;}
#top .to_demon {background-color: rgb(17, 5, 22);}

/* 南アメリカ用 */
#sam .to_bgn {background-color: rgb(173, 173, 173);}
#sam .to_mdl {background-color: rgb(100, 100, 100);}
#sam .to_pro {background-color: rgb(58, 58, 58);}
#sam .to_demon {background-color: rgb(0, 0, 0);}

/* NIS用 */
#nis .to_bgn {background-color: rgb(189, 238, 253);}
#nis .to_mdl {background-color: rgb(139, 228, 255);}
#nis .to_pro {background-color: rgb(25, 201, 255);}
#nis .to_demon {background-color: rgb(0, 0, 0);}

/* オセアニア用 */
#oca .to_bgn {background-color: rgb(185, 196, 167);}
#oca .to_mdl {background-color: #a3c76c;}
#oca .to_pro {background-color: #659916;}
#oca .to_demon {background-color: rgb(0, 0, 0);}

/* 北アメリカ用 */
#nam .to_bgn {background-color: #d2eefa;}
#nam .to_mdl {background-color: #66c6f0;}
#nam .to_pro {background-color: #0696d4;}
#nam .to_demon {background-color: rgb(0, 0, 0);}

/* アジア用 */
#asa .to_bgn {background-color: #fadae8;}
#asa .to_mdl {background-color: #ec8ab5;}
#asa .to_pro {background-color: #e41d73;}
#asa .to_demon {background-color: rgb(0, 0, 0);}

/* ヨーロッパ用 */
#erp .to_bgn {background-color: #c6ddd1;}
#erp .to_mdl {background-color: #47946b;}
#erp .to_pro {background-color: #009245;}
#erp .to_demon {background-color: rgb(0, 0, 0);}

/* アフリカ用 */
#afr .to_bgn {background-color: #88575b;}
#afr .to_mdl {background-color: #74272d;}
#afr .to_pro {background-color: #470a0f;}
#afr .to_demon {background-color: rgb(0, 0, 0);}
/* シークレットページはデフォルト指定した色をそのまま使う */

/* 次のレベルは少し目立たせる */
.next_is {
  font-size: 1.5rem;
  text-indent: -7.8rem;
  color: #51e044;
}

.to_bgn:hover {
  color: gold;
  transition: all 0.2s;
  font-size: 1.1rem;
  height: 3.5rem;
}

.to_pro:hover {
  color: gold;
  transition: all 0.2s;
  font-size: 1.1rem;
  height: 3.5rem;
}

.to_mdl:hover {
  color: gold;
  transition: all 0.2s;
  font-size: 1.1rem;
  height: 3.5rem;
}

.to_demon:hover {
  color: gold;
  transition: all 0.2s;
  font-size: 1.1rem;
  height: 3.5rem;
}
#to_top{
  position: relative;
  top:0;
  right:0;
}
.btn_wrap{
  display: flex;
  justify-content: center;
}
.btn_wrap img{
  margin:1rem;
  width: 250px;
}
.to_cgc{
  margin-top: 3rem;
}
.to_cgc a img{
  width: 250px;
}
.to_last_h2{
  margin-top: 2rem;
}