body {
  font-family: "Noto Sans JP";
  font-size: 100%;
  letter-spacing: .1rem;
  padding-top: 0 !important;
}

h5 {font-size: 90%;}

@media (max-width: 798px) {
  h2 {font-size: 1.5rem;}
}

/* --------------------------------------------------
CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.carousel {
/*  margin-bottom: 4rem; */
}
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
  right: 5%;
  left: 5%;
}
.carousel-item {
}
.carousel-item.top {
/*  height: 90vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:  center;
*/
}

.carousel-item img {
/*
  position: absolute;
  top: 0;
  left: 0;
*/
  width: 100%;
}
.carousel-item.top > img {
/*
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 90vh; */
}


/* top */
#topCarousel {
  background: #000;
  margin-top: 60px;
}
#topCarousel .carousel-item a {
  width: 100%;
  height: 100%;
  display: block;
}
.top-main p {
  text-align: left;
}
.top-main p:nth-child(2){
  margin-top: -1rem;
  margin-left: 20px;
}
.top-main p span {
  background: #FFF;
  color: #000;
  padding: .2rem 1rem;
}


/* present */
#preCarousel a {
  color: #000;
  font-weight: bold;
  letter-spacing: .2rem;
}
#preCarousel a figure {
  margin-bottom: 2rem;
}
#preCarousel .carousel-item a {
  width: 100%;
  height: 100%;
  display: block;
}
#preCarousel a .container {
  margin-bottom: 3rem;
}

#preCarousel .carousel-indicators li {
  background-color: #CCC;
}
#preCarousel .carousel-indicators li.active {
  background-color: #C1272D;
}
#preCarousel .carousel-control-prev div,
#preCarousel .carousel-control-next div {
  background: rgba(0,0,0,.5);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 798px) {
  .carousel-caption {
    font-size: 200%;
    bottom: 3rem;
    z-index: 10;
    right: 5%;
    left: 5%;
  }
}



/* --------------------------------------------------
TICKETS
-------------------------------------------------- */
#ticket .themed-grid-col h5 span,
#ticket .themed-grid-col .list-com span{
  background: #000;
  padding: .2rem .5rem;
  color: #FFF;
  line-height: 170%;
  font-size: 90%;
}

#ticket .themed-grid-col h5 {
  margin-left: -40%
}
#ticket .themed-grid-col .list-com {
  margin-left: -35%
}
#ticket .themed-grid-col .list-date {
  font-size: 80%;
  color: #000;
}

/* --------------------------------------------------
PRESENT
-------------------------------------------------- */
@media (min-width: 798px) {
  #present,#games {margin-top: 4rem;}
}
@media (max-width: 798px) {
  #point h2,#welcomeboard h2 {display: none;}
}


/* --------------------------------------------------
GAMES
-------------------------------------------------- */
.game_list a {
  color: #000;
  font-size: 80%;
}
.game_list h4 {
  font-size: 140%;
}

@media (max-width: 798px) {
  .game_list:nth-child(3).border-bottom,
  .game_list:nth-child(4).border-bottom {border-bottom: none !important;}
}
@media (min-width: 798px) {
  .game_list.border-left {border-left: none !important;}
}


/* --------------------------------------------------
HEADER
-------------------------------------------------- */
.header-logo {
  width: 200px;
  height: auto;
  max-width: 200px;
}
.login-btn {
  position: absolute;
  top: 10px;
  right: 60px;
}
.login-btn span {
  padding: 2px 5px;
  color: #666;
  font-weight: bold;
  font-size: 90%;
}
.login-btn span.nowlogin {
  background: #C1272D;
  color: #FFF;
  padding: 1px 3px;
}

@media (max-width: 798px) {
  .header-logo {
    width: 100px;
    height: auto;
    max-width: 200px;
  }
}
/* --------------------------------------------------
NAVIGATION
-------------------------------------------------- */
.gn-menu-main {
  z-index: 999;
  border-bottom: 1px solid #c6d0da;
}
.navbar-brand {
  position: fixed;
  left: 0;
  right: 0;
  top: .5rem;
  text-align: center;
  z-index: 1000;
  max-width: 30%;
  margin: 0 auto;
}
.navbar-brand .header-logo {
  width: 200px;
  max-width: 100%;
}
  .navbar-brand .header-logo.logged {
    width: 160px;
    height: auto;
    max-width: 200px;
    margin-top: -.5rem;
  }

.beflogin a {
}
.nowlogin {
  padding-left: .5rem;
  padding-right: .5rem;
  background: #C1272D;
  color: #FFF;
}
.nowlogin a {
  color: #FFF;
}

@media (max-width: 798px) {
  .beflogin a,.nowlogin a {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* --------------------------------------------------
FOOTER
-------------------------------------------------- */
.commonmenu .list-group-item {
  background: none;
}
.commonmenu .list-group-item:hover {
  color: #CCC;
  background-color: #666;
}

@media (min-width: 798px) {
  .list-group {
    display: block;
    flex-direction: inherit;
    margin-bottom: 4rem;
  }
  .commonmenu .list-group-item {
    width: 25%;
    float: left;
    border: 0;
    border-bottom: 1px;
  }
  .list-group-item:first-child {
    border-radius: 0;
  }
}


/* --------------------------------------------------
COMMON
-------------------------------------------------- */

/* format */
.nest {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.first-content { margin-top: 4.5rem;}
.exp { font-size: 90%; font-weight: bold; background: #FFFF00; padding: 2px 5px; }

/* link */
a:hover { color: #333;}

/* border */
.border-gray { border-color: #999;}
.no-radius { border-radius: 0;}

/* color */
.bg-orange { background: #F7931E;}
.bg-red { background: #C1272D;}

/* text */
.text-white { color: #FFF;}
.text-black { color: #000;}
.text-white a { color: #FFF;}

.text-small { font-size: 70%;}
.list-com { font-size: 90%; line-height: 110%;}

.title {margin-bottom: 3rem;}
.title span {border-bottom: 5px solid #C1272D; line-height: 160%;}
.sub-title {font-size: 140%; font-weight: bold; margin-top: 1rem; margin-bottom: 1rem;}

.no-ls { letter-spacing: 0; }

@media (max-width: 798px) {
  .title {font-size: x-large; margin-bottom: 1rem;}       
  .sub-title {font-size: 100%; line-height: 1.4rem;}
}

/* sub-copy */
.sub-catch {
    margin:  0;
    font-size:  24px;
    position:  relative;
    font-weight:  normal;
    margin-bottom: 15px;
    padding-top: 20px;
    padding-left: 40px;
    padding-bottom: 20px;
}

.sub-catch:before {
    content:  '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0 110px 80px;
    border-color: transparent transparent #a3d0e4 transparent;
    position:  absolute;
    z-index:  -1;
    transform: rotate(30deg);
    top: -20px;
    left: 30px;
}
.sub-catch span {
  font-weight: bold;
  border-bottom: 2px dashed #666;
  line-height: 140%;
}


/* image */
.img-banner a{
  display: block;
  position: relative;
}
.img-banner h3 {
  font-size: 160%;
}
.img-banner .pos-b {
  position: absolute !important;
  bottom: .5rem;
   color: #FFF;
}
.img-back {
  background-position: center;
  background-size: cover;
}




/* scroll-spy */
.scrollspy {
  position: relative;
  overflow: auto;
}


/* --------------------------------------------------
BINGO
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Montserrat:900&display=swap');
.bingo-card {
  width: 100%;
  border: 3px solid #C1272D;
  font-family: 'Montserrat', sans-serif;
  position: relative;
}

.bingo-card .bingo-title {
  text-align: center;
  padding: 5px;
  font-size: 40px;
  letter-spacing: 2rem;
  text-indent: 2rem;
  background: #C1272D;
  color: #FFF;
}
.bingo-card td {
//  z-index: -1;
  width: 20%;
  font-weight: bold;
  padding-bottom: 18%;
  border: 3px solid #C1272D;
  text-align: center;
  font-size: 50px;
  background: #f2f2f2;
  background: -moz-linear-gradient(-45deg,  #f2f2f2 1%, #ffffff 46%, #f2f2f2 47%, #ffffff 100%);
  background: -webkit-linear-gradient(-45deg,  #f2f2f2 1%,#ffffff 46%,#f2f2f2 47%,#ffffff 100%);
  background: linear-gradient(135deg,  #f2f2f2 1%,#ffffff 46%,#f2f2f2 47%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=1 );
  position: relative;
}
.bingo-card td span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.bingo-card td.bcd.active {
  background: #000;
  color: #FFF;
}
.bingo-card td.bcd.today {
  background: #FF0;
}

/* --------------------------------------------------
TRUMP
-------------------------------------------------- */
.trump-card {
  padding: .2rem;
  position: relative;
}
.trump-card .tcd-nest {
  border: 1px solid #666;
  border-radius: 5px;
}
.trump-card .tcd-nest.board {
  border: 1px solid #666;
  border-radius: 5px;
  background: #f2f2f2;
  background: -moz-linear-gradient(-45deg,  #f2f2f2 1%, #ffffff 46%, #f2f2f2 47%, #ffffff 100%);
  background: -webkit-linear-gradient(-45deg,  #f2f2f2 1%,#ffffff 46%,#f2f2f2 47%,#ffffff 100%);
  background: linear-gradient(135deg,  #f2f2f2 1%,#ffffff 46%,#f2f2f2 47%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=1 );
}
.trump-card .tcd-nest:before {
    content: "";
    display: block;
    padding-top: 140%; /* 1:2 */
}
.tcd-top,.tcd-middle,.tcd-bottom {
  position: absolute;
}
.tcd-top {
  top: 5%;
  left: 10%;
  text-align: center;
  font-size: 100%;
}
.tcd-middle {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
  text-align: center;
  font-size: 200%;
}
.tcd-bottom {
  bottom: 5%;
  right: 10%;
  transform: scale(-1, -1);
  text-align: center;
  font-size: 100%;
}
.tcd-bottom span {
}

.trump-card.red,
.trump-card.red a {
  color: #C1272D;
}
.trump-card.blk,
.trump-card.blk a {
  color: #333;
}

@media (max-width: 798px) {
  .tcd-top span.tcd-mark,.tcd-bottom span.tcd-mark {
    display: none;
  }

}


/* --------------------------------------------------
ICON
-------------------------------------------------- */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/menu/icomoon.eot?y251i3');
  src:  url('../fonts/menu/icomoon.eot?y251i3#iefix') format('embedded-opentype'),
    url('../fonts/menu/icomoon.ttf?y251i3') format('truetype'),
    url('../fonts/menu/icomoon.woff?y251i3') format('woff'),
    url('../fonts/menu/icomoon.svg?y251i3#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 60px;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon::before {
  display: inline-block;
  width: 60px;
  text-align: center;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
}


.icon-paste:before {
  content: "\e92d";
}
.icon-credit-card:before {
  content: "\e93f";
}
.icon-envelop:before {
  content: "\e945";
}
.icon-user-plus:before {
  content: "\e973";
}
.icon-user-minus:before {
  content: "\e974";
}
.icon-spinner9:before {
  content: "\e982";
}
.icon-link:before {
  content: "\e9cb";
}
.icon-exit:before {
  content: "\ea14";
}