@charset "utf-8";

/* The new CSS reset - version 1.11.3 */
*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)) {
  all: unset;
  display: revert;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-padding-top: 130px;
}

a, button {
  cursor: revert;
}

ol, ul, menu, summary {
  list-style: none;
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

table {
  border-collapse: collapse;
}

input, textarea {
  -webkit-user-select: auto;
}

textarea {
  white-space: revert;
}

::placeholder {
  color: unset;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html { 
  font-size: 62.5%;
  scroll-behavior: smooth;
}

:root {
  --bg_blue: #003366;
  --bg_red: #FF1E09;
  --bg_perlred: #fcebeb;
  --bg_orange: #ff9900;
  --bg_gray: #f9f9f9;
  --bg_bgray: #e8edf2;
  --color_base:#333;
  --color_txtorange: #ff6600;
  --font_rgl: min(1.6vw,16px);
}

@media screen and (max-width: 767px) {

  html {
    scroll-padding-top: inherit;
  }

  :root {
  --font_rgl: 3.76vw;
}

}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

img {
  vertical-align: middle;
  /*max-width: 100%;*/
}

a {
  text-decoration: none;
  transition: 0.3s ease-in-out;
}
a:hover {
  transition: 0.3s ease-in-out;
}
a:hover img {
  opacity: 0.8;
  transition: 0.3s ease-in-out;
  filter: brightness(110%) contrast(90%);
}

.dp_pc{
  display: block;
}
.dp_sp{
  display: none;
}

@media screen and (max-width: 767px) {
   body {
    font-size: 1.4rem;
  } 
  .dp_pc{
    display: none;
  }
  .dp_sp{
    display: block;
  }
}


/*****************
vpointgame
*****************/
.vpointgame {
  display: block;
  width: 100vw;
  color: var(--color_base);
  font-size: var(--font_rgl);
  font-family: "Noto Sans JP", "メイリオ", "Meiryo",  sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

main{
  padding: 40px 0 0;
}
.l_contents{
  display: block;
  width: min(98vw,940px);
  margin: 0 auto;
}
.l_listTtlh2{
  padding: 10px 15px;
  background: #003366;
  font-size: min(2.7vw,16px);
  font-weight: 500;
  letter-spacing: .075em;
  color: #fff;
}


@media screen and (max-width: 767px) {
  main{
    padding: 9.4vw 0 0;
  }
  .l_contents{
    width: 91.96vw;
  }
  .l_listTtlh2{
    padding: 2vw 5.1vw 2.5vw;
    font-size: 3.7vw;
  }

}

/*****************
l_header
*****************/
.l_header{
  background: #000;
  padding-block: 8px 10px;

  h1{
    width: 266px;
    margin-inline: auto;
  }
}

@media screen and (max-width: 767px) {
  .l_header{
    padding-block: 0 1.3vw;

    h1{
      width: 45.4vw;
    }
  }
}

/*****************
l_hero
*****************/
.l_hero{
}
.l_heroTtl{
  padding-block: 0 45px;
  font-size: min(3.5vw,34px);
  font-weight: 600;
  color: var(--bg_blue);
  text-align: center;
  line-height: 1.7;
  letter-spacing: .05em;

  p{
    margin-top: 15px;
    font-size: min(2.5vw,24px);
  }
}
.l_heroLead{
  font-size: min(1.8vw,18px);
  line-height: 1.6;
  letter-spacing: .03em;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .l_hero{
  }
  .l_heroTtl{
    padding-block: 0 10.2vw;
    font-size: 6.1vw;
    line-height: 1.38;;

    p{
      margin-top: 1.7vw;
      font-size: 4.1vw;
    }
  }
  .l_heroLead{
    font-size: 3.6vw;
    line-height: 1.45;
    letter-spacing: 0;
    flex-direction: column;
    margin-bottom: 0;
    h2{
      text-align: center;
    }
  }
}

/*****************
l_nav
*****************/
.l_navWrap{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,0.8);
  margin-bottom: 20px;
  padding-block: 20px;

  ul{
    display: flex;
    justify-content: center;
    gap: 13px;
  }

  li{
    position: relative;
    width: calc((100% - 13px * 3) / 4);
    list-style: none;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 1.37;
    font-weight: 600;
    color: #333366;
    transition: .3s;
    background: #fff;

    &::after{
      content: "";
      position: absolute;
      bottom: 7px;
      left: 50%;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 7px solid #ccc;
      transform: translateX(-50%);
    }

    &:hover{
      background: #e8edf2;
    }

    span{
      display: block;
      font-size: min(1.5vw,15px);
    }

    a{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding-block: 15px 30px;
      height: 84px;

    }
  }
}

@media screen and (max-width: 767px) {
  .l_navWrap{
    position: inherit;
    display: block;
    margin-bottom: 0;
    padding-block: 5.1vw 9.2vw;

    ul{
      gap: 4.4vw;
    }

    li{
      width: calc((100% - 4.4vw) / 3);

      line-height: 1.2;
      font-size: 3.5vw;

      &::after{
        content: "";
        position: absolute;
        bottom: 7px;
        left: 50%;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 9px solid #ccc;
        transform: translateX(-50%);
      }

      span{
        font-size: 3.5vw;
      }

      a{
        padding-block: 3.9vw 8.5vw;
        height: auto;
        letter-spacing: .075em;
      }
    }
  }
}


/*****************
l_gameList
*****************/
.l_gameList{
  padding-bottom: 25px;

  .l_ttlh2{
    margin-bottom: 35px;
  }
  .l_gameListWrap{
    display: flex;
    flex-wrap: wrap;

    li{
      display: flex;
      
      border-top: 1px solid #000;
      width: calc(100% / 3);
      

      &:nth-of-type(-n+3){
        border-top: none;
      }
    }

      li > a{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 30px 20px;
      }
      h3{
        display: -webkit-box;             
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2; 

        margin-block: 15px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
      }
      .l_term{
        background: #ffcc66;
        margin-top: auto;
        padding: 5px;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
      }
  }
}

@media screen and (max-width: 767px) {
  .l_gameList{
    padding-bottom: 2.5vw;

    .l_ttlh2{
      margin-bottom: 0;
    }
    .l_gameListWrap{

      li{
        
        width: calc(100% / 2);

        &:nth-of-type(3){
          border-top: 1px solid #000;
        }

        &:nth-of-type(-n+2){
          border-top: none;
        }
      }
        li > a{
          padding: 5.1vw 0;
        }
        h3{
          margin-block: 2.9vw;
          font-size: 3vw;
        }
        .l_term{
          padding: 1.7vw;
          font-size: 3.7vw;
        }

        &:nth-of-type(odd){
          li{
            padding-right: 1.5vw;
          }
        }
        &:nth-of-type(even){
          li{
            padding-left: 1.5vw;
          }
        }

    }
  }
}


/*****************
l_footer
*****************/
.l_footer{
  background: #000;
  padding-block: 10px 15px;

  p{
    font-size: 11px;
    text-align: center;
    color: #fff;
  }
}