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

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

#article2307_02 {
  box-sizing: border-box;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2307_02/main-bg.png?1) center top repeat;
}

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

#article2307_02 .sp{
  display: none;
}

#article2307_02 .wrapper{
  padding-bottom: 170px;
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2307_02/contents-bg.png) center top repeat;
  box-shadow: 0 0 10px rgba(9,15,23,0.1);
}

.webp #article2307_02 .wrapper{
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2307_02/contents-bg.png) center top repeat;
}

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

  #article2307_02 .pc{
    display: none;
  }

  #article2307_02 .sp {
    display: block;
  }
}

/* ------------------------------------------------------------------------------------------------------------------
type-heroarea
------------------------------------------------------------------------------------------------------------------ */
#article2307_02 .type-heroarea{
  position: relative;
  padding-top: 10px;
}

#article2307_02 .mainvisual{
  margin: auto;
  width: 92.33%;
}

#article2307_02 .play-button{
  position: absolute;
  top: 44.42%;
  left: 75.33%;
  width: 17.17%;
}

#article2307_02 .menu-container{
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.42%;
  position: absolute;
  top: 74.52%;
  left: 14.83%;
  width: 69.58%;
}

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

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

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

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

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

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

#article2307_02 .menu-container a{
  width: 49.7%;
}

#article2307_02 .menu-container a:nth-child(n + 3){
  margin-top: max(-16px,-1.33vw);
}

/* ------------------------------------------------------------------------------------------------------------------
各contents
------------------------------------------------------------------------------------------------------------------ */
#article2307_02 .common-section{
  position: relative;
  padding-bottom: 80px;
  margin: 90px auto 0;
  width: 83.33%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(31,31,31,0.15);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 1000px auto;
}

#article2307_02 .common-section .contents-no{
  position: absolute;
  top: -57px;
  left: -16px;
  width: 17%;
}

#article2307_02 .check-button{
  margin: max(-190px,-22vw) auto 0;
  width: 61.8%;
}

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

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

#article2307_02 .type-contents1{
  margin-top: 170px;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2307_02/contents-bg1.png);
}

.webp #article2307_02 .type-contents1{
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2307_02/contents-bg1.webp);
}

#article2307_02 .common-section:not(.type-contents1){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2307_02/contents-bg2.png);
}

.webp #article2307_02 .common-section:not(.type-contents1){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2307_02/contents-bg2.webp);
}

/* ------------------------------------------------------------------------------------------------------------------
max-width: 769px
------------------------------------------------------------------------------------------------------------------ */

@media only screen and (max-width: 769px) {
  #article2307_02 .wrapper{
    padding-bottom: 70px;
  }

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

  #article2307_02 .mainvisual{
    width: 100%;
  }

  #article2307_02 .lp-logo{
    top: 3.3%;
    left: 16.4%;
    width: 67.2%;
  }

  #article2307_02 .play-button{
    top: 38.8%;
    left: 74.1%;
    width: 24.2%;
  }

  #article2307_02 .menu-container{
    column-gap: 0.42%;
    top: 60.7%;
    left: 0;
    width: 99.2%;
  }

  #article2307_02 .common-section{
    padding-bottom: 6.5vw;
    margin: 13vw auto 0;
    width: 95%;
  }

  #article2307_02 .common-section .contents-no{
    top: -5.6vw;
    left: -1.6%;
    width: 16.3%;
  }

  #article2307_02 .check-button{
    width: 81%;
  }

  #article2307_02 .type-contents1{
    margin-top: -7vw;
  }

}