@charset "UTF-8";
/* ------------------------------------------------------------------------------------------------------------------
共通項目
------------------------------------------------------------------------------------------------------------------ */

#lp_header_area {
  position: relative;
  z-index: 2;
}

#nijigame_about {
  padding-bottom: 150px;
  font-size: 20px;
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 700;
  color: #333;
}

@media only screen and (max-width: 768px) {
  #nijigame_about {
    padding-bottom: 75px;
  }
}

#nijigame_about .main-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/main-bg.jpg) center top / 100% auto;
}

.webp #nijigame_about .main-bg{
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/main-bg.webp) center top / 100% auto;
}

@media only screen and (max-width: 768px) {
  #nijigame_about .main-bg{
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/main-bg-sp.jpg) center center / 100% auto;
  }

  .webp #nijigame_about .main-bg{
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/main-bg-sp.webp) center top / 100% auto;
  }
}

#nijigame_about .sp{
  display: none;
}

@media only screen and (max-width: 768px) {
  #nijigame_about .pc{
    display: none;
  }

  #nijigame_about .sp{
    display: block;
  }
}

#nijigame_about a {
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}

#nijigame_about img {
  display: block;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#nijigame_about div{
  box-sizing: border-box;
}

#nijigame_about .hover{
  transition: opacity 0.3s;
}

@media only screen and (min-width: 769px) {
  #nijigame_about .hover:hover{
    opacity: 0.7;
  }
}

/* ------------------------------------------------------------------------------------------------------------------
firstview
------------------------------------------------------------------------------------------------------------------ */
#nijigame_about .fv{
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 746;
  clip-path: url('#fv_clip01');
  background: #a8d2f0;
}

#nijigame_about .fv-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/main-bg-fv.png) center top / 100% auto;
}

.webp #nijigame_about .fv-bg{
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/main-bg-fv.webp) center top / 100% auto;
}

#nijigame_about .fv_mask{
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

#nijigame_about .fv-chara{
  position: absolute;
  top: 3.35%;
  left: 10.1%;
  width: 74.64%;
}

#nijigame_about .fv-logo{
  position: absolute;
  top: 51.6%;
  left: 28.7%;
  width: 30.6%;
}

#nijigame_about .fv-catch{
  position: absolute;
  top: 63.1%;
  left: 21.3%;
  width: 52.1%;
}

#nijigame_about .fv-begin-button{
  position: absolute;
  top: 48.9%;
  left: 60.4%;
  width: 13.33%;
}

#nijigame_about .fv-begin-button .button-deco1{
  position: absolute;
  top: 13.8%;
  left: 43%;
  width: 16.4%;
}

#nijigame_about .fv-begin-button .button-deco2{
  display: flex;
  gap: 7.5%;
  position: absolute;
  top: 74.3%;
  left: 41.4%;
  width: 20.7%;
  aspect-ratio: 53 / 24;
}

#nijigame_about .gamelist-button{
  position: absolute;
  width: min(260px,24.5vw);
  aspect-ratio: 26 / 6;
  background: rgba(51,51,51,0.4);
  border-radius: 60px;
  cursor: pointer;
}

#nijigame_about .gamelist-button a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.8%;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: #ffef40;
  transform: translate3d(0,-6.67%,0);
}

#nijigame_about .gamelist-button a.sp{
  display: none;
}

#nijigame_about .gamelist-button a p{
  font-size: min(26px,2.45vw);
  font-weight: 700;
}

#nijigame_about .gamelist-button a::before{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  width: 97%;
  height: 86.7%;
  background: #fcc700;
  border-radius: 60px;
  z-index: -2;
}

#nijigame_about .gamelist-button a::after{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  width: 94.6%;
  height: 76.7%;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/gamelist-button-deco1.png) left center / auto 100% no-repeat,url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/gamelist-button-deco2.png) right center / auto 100% no-repeat,#ffef40;
  border-radius: 60px;
  z-index: -1;
}

.webp #nijigame_about .gamelist-button a::after{
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/gamelist-button-deco1.webp) left center / auto 100% no-repeat,url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/gamelist-button-deco2.webp) right center / auto 100% no-repeat,#ffef40;
}

#nijigame_about .gamelist-button a .icon{
  width: 15.4%;
}

#nijigame_about .fv-gamelist-button{
  top: 2.7%;
  left: 85.4%;
  width: 13.54%;
}

#nijigame_about .fv-gamelist-button a p{
  font-size: 1.375vw;
}

@media only screen and (max-width: 768px) {
  #nijigame_about .fv{
    aspect-ratio: 768 / 1270;
    clip-path: url('#fv_clip02');
  }

  #nijigame_about .fv-bg{
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/main-bg-fv-sp.png) center center / 100% auto;
  }

  .webp #nijigame_about .fv-bg{
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/main-bg-fv-sp.webp) center center / 100% auto;
  }

  #nijigame_about .fv-chara{
    top: 8.19%;
    left: 0;
    width: 100%;
  }

  #nijigame_about .fv-logo{
    top: 45%;
    left: 4.9%;
    width: 90%;
  }

  #nijigame_about .fv-catch{
    top: 54%;
    left: 0;
    width: 100%;
  }

  #nijigame_about .fv-begin-button{
    top: 83.6%;
    left: 10%;
    width: 82.8%;
  }

  #nijigame_about .fv-begin-button .button-deco1{
    top: 36.3%;
    left: 9%;
    width: 6.6%;
  }

  #nijigame_about .fv-begin-button .button-deco2{
    top: 38.4%;
    left: 83.8%;
    width: 6.9%;
  }

  #nijigame_about .gamelist-button{
    width: 67.7%;
  }

  #nijigame_about .gamelist-button a.pc{
    display: none;
  }

  #nijigame_about .gamelist-button a.sp{
    display: flex;
  }

  #nijigame_about .gamelist-button a p{
    font-size: 6.9vw;
  }

  #nijigame_about .fv-gamelist-button{
    top: 1.6%;
    left: 73.8%;
    width: 23.4%;
    aspect-ratio: 1 / 1;
  }

  #nijigame_about .fv-gamelist-button a{
    flex-direction: column;
    gap: 3.8%;
  }

  #nijigame_about .fv-gamelist-button a::before{
    width: 91%;
    height: 91%;
  }

  #nijigame_about .fv-gamelist-button a::after{
    width: 84.4%;
    height: 84.4%;
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/gamelist-button-deco1-sp.png) center center / 100% 100% no-repeat,#ffef40;
  }

  .webp #nijigame_about .fv-gamelist-button a::after{
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/about/gamelist-button-deco1-sp.webp) center center / 100% 100% no-repeat,#ffef40;
  }

  #nijigame_about .fv-gamelist-button a .icon{
    width: 44.4%;
  }

  #nijigame_about .fv-gamelist-button a p{
    font-size: 3.9vw;
  }
}

/* ------------------------------------------------------------------------------------------------------------------
content01
------------------------------------------------------------------------------------------------------------------ */

#nijigame_about .wrap{
  overflow: hidden;
}

#nijigame_about .content01{
  position: relative;
  margin: 55px auto 0;
  padding: 0 30px;
  max-width: 1060px;
  aspect-ratio: 1060 / 786;
}

#nijigame_about .content01-pic{
  position: absolute;
  top: 0;
  left: 1.8%;
  width: 101%;
  aspect-ratio: 1071 / 786;
}

#nijigame_about .content01 .game-button{
  position: absolute;
  top: 65.5%;
  left: 52.4%;
  width: 42.45%;
}

#nijigame_about .content01 .gamelist-button{
  top: 87.7%;
  left: 37.7%;
}

@media only screen and (max-width: 768px) {
  #nijigame_about .content01{
    margin: 25px auto 0;
    padding: 0;
    aspect-ratio: 768 / 2224;
  }

  #nijigame_about .content01-pic{
    left: 0;
    width: 100%;
    aspect-ratio: 768 / 2224;
  }

  #nijigame_about .content01 .game-button{
    top: 77.1%;
    left: 7.6%;
    width: 85%;
  }

  #nijigame_about .content01 .gamelist-button{
    top: 90.6%;
    left: 16.1%;
  }
}

/* ------------------------------------------------------------------------------------------------------------------
content02
------------------------------------------------------------------------------------------------------------------ */

#nijigame_about .content02{
  position: relative;
  margin: 61px auto 0;
  padding: 0 30px;
  max-width: 1060px;
  aspect-ratio: 1060 / 798;
}

#nijigame_about .content02-pic{
  position: absolute;
  top: 0;
  left: 1.8%;
  width: 99.24%;
  aspect-ratio: 1052 / 798;
}


#nijigame_about .content02-pic p{
  position: absolute;
  top: 35.7%;
  left: 6.2%;
  font-size: min(20px,1.89vw);
  font-weight: 400;
  line-height: 1.2em;
  text-align: center;
}

#nijigame_about .content02-pic p a{
  color: #6fbf10;
  font-weight: 700;
  text-decoration: underline;
}

#nijigame_about .content02 .game-button{
  position: absolute;
  top: 69.2%;
  left: 52.6%;
  width: 39.5%;
}

#nijigame_about .content02 .gamelist-button{
  top: 88%;
  left: 37.7%;
}

@media only screen and (max-width: 768px) {
  #nijigame_about .content02{
    margin: 30px auto 0;
    padding: 0;
    aspect-ratio: 768 / 2244;
  }

  #nijigame_about .content02-pic{
    left: 0;
    width: 100%;
    aspect-ratio: 768 / 2244;
  }

  #nijigame_about .content02-pic p{
    top: 18.2%;
    left: 9%;
    font-size: 3.9vw;
  }

  #nijigame_about .content02-pic p a.sp{
    display: inline;
  }

  #nijigame_about .content02 .game-button{
    top: 78.39%;
    left: 6.5%;
    width: 87.1%;
  }

  #nijigame_about .content02 .gamelist-button{
    top: 90.6%;
    left: 16.1%;
  }
}


/* ------------------------------------------------------------------------------------------------------------------
content03
------------------------------------------------------------------------------------------------------------------ */

#nijigame_about .content03{
  position: relative;
  margin: 64px auto 0;
  padding: 0 30px;
  max-width: 1060px;
  aspect-ratio: 1060 / 744;
}

#nijigame_about .content03-pic{
  position: absolute;
  top: 0;
  left: 1.8%;
  width: 106.5%;
  aspect-ratio: 1129 / 744;
}

#nijigame_about .content03 .game-button{
  position: absolute;
  top: 67.1%;
  left: 54.6%;
  width: 35.1%;
}

#nijigame_about .content03 .gamelist-button{
  top: 87.5%;
  left: 37.7%;
}

@media only screen and (max-width: 768px) {
  #nijigame_about .content03{
    margin: 30px auto 0;
    padding: 0;
    aspect-ratio: 768 / 2000;
  }

  #nijigame_about .content03-pic{
    left: 0;
    width: 100%;
    aspect-ratio: 768 / 2000;
  }

  #nijigame_about .content03 .game-button{
    top: 76%;
    left: 11.3%;
    width: 77.5%;
  }

  #nijigame_about .content03 .gamelist-button{
    top: 89.5%;
    left: 16.1%;
  }
}

#lp_footer_area{
  position: relative;
}





#article2308_02 {
  box-sizing: border-box;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2308_02/bg_ptn.png) center top repeat;
}

.webp #article2308_02 {
  box-sizing: border-box;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2308_02/bg_ptn.webp);
}

#article2308_02 img {
  height: auto;
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#article2308_02 .sp{
  display: none;
}

#article2308_02 .wrapper{
  margin: 0 auto;
  width: 1450px;
  max-width: 100%;
}

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

  #article2308_02 .pc{
    display: none;
  }

  #article2308_02 .sp {
    display: block;
  }
}

/* ------------------------------------------------------------------------------------------------------------------
type-heroarea
------------------------------------------------------------------------------------------------------------------ */
#article2308_02 .type-heroarea{
  position: relative;
  z-index: 1;
}

#article2308_02 .mainvisual{
  margin: auto;
}

#article2308_02 .play-button{
  position: absolute;
  bottom: min(344px,33.3vw);
  left: 69.33%;
  max-width: 14vw;
}

#article2308_02 .menu-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: max(-460px,-30.7vw);
}

#article2308_02 .menu-container a{
  position: relative;
  margin: 0 0.8% 24px;
  max-width: 48%;
  text-align: center;
}

#article2308_02 .menu-container a .no {
  position: absolute;
  top: -34%;
  left: -14px;
  z-index: 1;
  max-width: 8vw;
}

#article2308_02 .menu-container a .ttl {
  filter: drop-shadow(0px 0px 10px #987b8c);
}

#article2308_02 .menu-container a:nth-child(2n+1) .no {
  left: 28px;
}

#article2308_02 .menu-container a:nth-child(1) {
  z-index: 1;
}

#article2308_02 .menu-container a:nth-child(2) {
  z-index: 2;
}

#article2308_02 .menu-container a:nth-child(3) {
  z-index: 3;
}

#article2308_02 .menu-container a:nth-child(4) {
  z-index: 4;
}

#article2308_02 .play-button a,
#article2308_02 .menu-container a {
  transition: opacity .4s ease;
}

#article2308_02 .play-button a:hover,
#article2308_02 .menu-container a:hover {
  opacity: .7;
}



/* ------------------------------------------------------------------------------------------------------------------
各contents
------------------------------------------------------------------------------------------------------------------ */
#article2308_02 .type-contentsarea {
  position: relative;
  width: 1080px;
  max-width: 100%;
  margin: 100px auto 0;
  background: #ffebf1;
  text-align: center;
    z-index: 2;
}

#article2308_02 .common-section {
  position: relative;
  top: -70px;
}

#article2308_02 .common-section + .common-section {
  margin-top: 120px;
}

#article2308_02 .common-section:last-child {
  padding-bottom: 110px;
}

#article2308_02 .check-button{
  margin: max(-240px,-23vw) auto 0;
  width: 61.8%;
}

#article2308_02 .check-button a {
  transition: opacity .4s ease;
}

#article2308_02 .check-button a:hover {
  opacity: .7;
}


#article2308_02 .contents-ttl {
  text-align: center;
}

#article2308_02 .contents-pic {
  margin-top: max(-70px,-7vw);
}

/* 微調整PCのみ */
@media only screen and (min-width: 769px) {

  #article2308_02 .common-section:last-child .check-button {
    margin: max(-260px,-24vw) auto 0;
  }

}

/* ------------------------------------------------------------------------------------------------------------------
max-width: 768px
------------------------------------------------------------------------------------------------------------------ */

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

  #article2308_02 {
    background-size: 12vw;
  }

  #article2308_02 .type-heroarea{
    padding-top: 0;
  }

  #article2308_02 .mainvisual{
    width: 100%;
  }

  #article2308_02 .play-button{
    top: 43%;
    left: 0;
    right: 0;
    margin: auto;
    width: 52%;
    max-width: 52%;
    text-align: center;
  }

  #article2308_02 .menu-container{
    margin: 0;
  }

  #article2308_02 .menu-container a {
    margin-bottom: 2vw;
  }

  #article2308_02 .menu-container a .no {
    left: -2%;
  }

  #article2308_02 .menu-container a:nth-child(2n+1) .no {
    left: 5%;
  }

  #article2308_02 .menu-container a .ttl {
    filter: drop-shadow(0px 0px 3px #987b8c);
  }

  #article2308_02 .type-contentsarea {
    margin-top: 2vw;
    background: none;
  }

  #article2308_02 .common-section {
    padding-bottom: 6.5vw;
    margin: 13vw auto 0;
    width: 100%;
    top: auto;
  }

  #article2308_02 .common-section + .common-section {
    margin-top: 6vw;
  }

  #article2308_02 .contents-pic {
    margin-top: max(-70px,-11vw);
  }

  #article2308_02 .check-button{
    width: 81%;
    margin: -42vw auto 0;
  }

  #article2308_02 .type-contents1{
    margin-top: 0;
  }

}