@charset "UTF-8";
/*テスト公開時には、画像のパスを「../img/」から「../img/」に置換*/
/*本番公開時には、画像のパスを「../img/」から「./img」に置換*/
a:active {
  color: #2A2A2A;
}

p {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .global-nav__list li a {
    font-size: 12px;
  }
}
@media screen and (max-width: 600px) {
  .global-nav__list li a {
    font-size: 1.8vw;
  }
}
/* メインビジュアル */
.mv__inner {
  background-image: url("../img/play-mv_pc.jpg");
  padding-top: 39%;
}

.play .mv-catch {
  position: absolute;
  width: 28%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

@media screen and (max-width: 767px) {
  .play .mv__inner {
    background-image: url("../img/play-mv_sp.jpg");
    padding-top: initial;
    min-height: 500px;
  }
  .play .mv-catch {
    width: 38%;
    min-width: 300px;
  }
}
/* コピー */
.copy .inner {
  padding-top: 75px;
  padding-bottom: 75px;
}

.copy_lead {
  font-size: 3.5rem;
  font-size: 35px;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .copy .inner {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .copy_lead {
    font-size: 20px;
  }
}
/*
 *  共通
-----------------------------------------------------------*/
.play .img-wrap {
  margin-bottom: 56px;
}

@media screen and (max-width: 767px) {
  .play .img-wrap {
    margin-bottom: 40px;
  }
}
/*タイトル*/
.ttl-wrap {
  padding-top: 80px;
  padding-bottom: 73px;
  background-position: 7% 55%;
  background-repeat: no-repeat;
}

.ttl-wrap .h3_ttl {
  position: relative;
  line-height: 2;
}

.ttl-wrap .h3_ttl:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 75px;
  height: 2px;
  background-color: #525252;
}

.ttl-wrap .lead {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 2px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .ttl-wrap {
    padding-top: 40px;
    padding-bottom: 60px;
    background-position: 100% 100%;
  }

  .ttl-wrap .h3_ttl {
    font-size: 4.2rem;
    margin-bottom: 18px;
    line-height: 1.5;
  }

  .ttl-wrap .lead {
    font-size: 1.6rem;
  }

  .ttl-wrap .h3_ttl:after {
    bottom: 10px;
    width: 40px;
  }
}
/*写真内商品リンク*/
.product-link-wrap {
  text-align: right;
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 1px;
  padding-top: 15px;
  /* margin-bottom: -41px; */
}

.product-link-wrap .sepalate {
  margin: 0 10px;
}

.product-link-wrap a:hover {
  text-decoration: underline;
}

.product-link-wrap p {
  display: inline-block;
}

@media screen and (max-width: 1030px) {
  .product-link_pl10 {
    padding-right: 10px;
  }
}
@media screen and (max-width: 767px) {
  .product-link-wrap {
    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 1px;
    padding-top: 10px;
  }

  .product-link-wrap p {
    display: block;
  }

  .product-link-wrap .sepalate {
    display: none;
  }
}
/* ページ下部商品リンク */
.product-list {
  margin-top: 100px;
}

.product-list h2.ttl {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border-bottom: 3px solid #000;
}

.product-list .list-ttl {
  background-color: #DDDDDD;
  color: #4D4C4C;
  text-align: center;
  padding: 5px 0;
  font-size: 25px;
  line-height: 1.2;
  margin-top: 50px;
}

.product-list .list-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  /* border: 2px solid #DBDBDB; */
}

.product-list .list-box::before {
  content: "";
  display: block;
  width: 25%;
  order: 1;
}

.product-list .list-box::after {
  content: "";
  display: block;
  width: 25%;
}

.product-list .list-item {
  border: 1px solid #DBDBDB;
  text-align: center;
  margin-top: -1px;
  margin-left: -1px;
  width: calc(25% + 1px);
}

.product-list .list-item a {
  display: block;
  padding-bottom: 20px;
}

.product-list .list-item p {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 0 5px;
}

.product-list .list-item .item-name {
  min-height: 42px;
}

.product-list .list-item .price {
  margin-top: 5px;
}

@media screen and (max-width: 767px) {
  .product-list h2.ttl {
    font-size: 30px;
  }

  .product-list {
    margin-top: 50px;
  }

  .product-list .list-ttl {
    margin-top: 30px;
    font-size: 18px;
  }

  .product-list .list-item {
    width: calc(50% + 1px);
  }

  .product-list .list-item p {
    font-size: 14px;
  }
}
/* レイアウト */
.play .inner {
  overflow: initial;
}

.play .img-relative {
  position: relative;
}

/*
 *  セクション
-----------------------------------------------------------*/

/*sec00*/
.sec00 {
  margin-top: 60px;
}
.sec00 li {
  position: relative;
}
.sec_ttl {
  font-size: 100px;
  line-height: 1;
  margin-left:1px;
  margin-bottom: -14px;
}
.sec00 li.commingsoon:before {
  content: "Comming soon...";
  color: #fff;
  font-size: 18px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
  z-index: 3;
}
.sec00 li.commingsoon:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #000000c2;
  z-index: 2;
}
#freeclimbing .special-bg {
  position: relative;
  background: url("../img/special01.jpg") no-repeat;
  width: 100%;
  min-height: 300px;
  background-size: cover;
    background-position: center center;
}
#play09 .activity-bg {
  position: relative;
  background: url("../img/activity01.jpg") no-repeat;
  width: 100%;
  min-height: 300px;
  background-size: cover;
    background-position: center center;
}
#play10 .activity-bg {
  position: relative;
  background: url("../img/activity02.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 300px;
  background-size: cover;
}
#play11 .activity-bg {
  position: relative;
  background: url("../img/activity03.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 300px;
  background-size: cover;
}
#play12 .activity-bg {
  position: relative;
  background: url("../img/activity04_re.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 400px;
  background-size: cover;
}
#play13 .activity-bg {
  position: relative;
  background: url("../img/activity05.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 400px;
  background-size: cover;
}
#play14 .activity-bg {
  position: relative;
  background: url("../img/activity06.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 400px;
  background-size: cover;
}
#play15 .activity-bg {
  position: relative;
  background: url("../img/activity07.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 400px;
  background-size: cover;
}

.txt_l .special-box-wrap {
    margin: 0 auto 0 0;
}
.special-box-wrap {
  width: 35%;
  text-align: center;
  color: #000;
  padding: 0 20px;
  line-height: 1.2;
  filter: drop-shadow(0px 3px 6px #00000045);
}
.special-head {
  display: flex;
  flex-wrap: wrap;
  background: rgb(255,255,255,0.8);
  border-radius: 10px;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.special-box {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  top: 0;
  left: 0;
}
.special-ttl {
  width: 100%;
  font-size: 42px;
  font-weight: 700;
  padding: 10px 0;
  line-height: 1.1;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
.special-logo {
  max-width: 160px;
  width: 100%;
}
.special-no {
  margin: 10px 0;
  font-weight: 900;
}
.special-kana {
  width: 100%;
  font-size: 29px;
  line-height: 1.1;
  margin-top: 8px;
}
@media screen and (max-width: 840px) {
  .special-head {
    padding: 10px;
  }
  .special-kana {
    font-size: 28px;
  }
}
@media screen and (max-width: 767px) {
  #freeclimbing {
    padding-bottom: 100px;
  }
  #freeclimbing .special-bg {
  }
  .txt_l .special-box-wrap {
    margin: 0 auto;
  }
  .special-box {
    top: 138px;
  }
  .special-box-wrap {
    width: 100%;
  }
  .special-ttl {
    font-size: 5vw;
    padding: 10px 0;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .special-logo {
    max-width: 120px;
    width: 60%;
  }
  .special-no {
    margin: 10px 0;
    font-size: 2vw;
  }
  .special-kana {
    font-size: 3vw;
    margin-top: 8px;
  }
}
  
.activity-box {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  top: 0;
  left: 0;
}
.activity-logo {
  width: 100%;
  max-width:120px;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  top: 40px;
  left:40px;
}
.activity-box-wrap {
  width: 50%;
  text-align: center;
  color: #fff;
    padding: 0 80px;
  line-height: 1.2;
  filter: drop-shadow(0px 3px 6px #00000045);
}
.txt_r .activity-box-wrap {
  margin: 0 0 0 auto;
}
.txt_l .activity-box-wrap {
  margin: 0 auto 0 0;
}
.activity-box-wrap p,
.activity-box-wrap a{
  color: #fff;
}
.activity-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px; 
}
.activity-no {
  position: relative;
  font-weight: 900;
}
.activity-bg.new::before {
  content: "";
  top: 0;
  right: 0;
  border-bottom: 64px solid transparent;
  border-right: 64px solid #FF0200;
  position: absolute;
  z-index: 100;
}
.activity-bg.new::after {
  content: "NEW";
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  display: block;
  top: 5px;
  right: 1px;
  transform: rotate(45deg);
  color: #fff;
  position: absolute;
  z-index: 101;
}
.activity-no.new::before {
  content: "";
  top: -10px;
  left: 0;
  border-bottom: 36px solid transparent;
  border-left: 36px solid #FF0200;
  position: absolute;
  z-index: 100;
}
.activity-no.new::after {
  content: "NEW";
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0;
  display: block;
  top: -3px;
  left: 1px;
  transform: rotate(-45deg);
  color: #fff;
  position: absolute;
  z-index: 101;
}
.activity-no {
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 10px;
}
.activity-ttl {
  width: 100%;
  font-size: 50px;
  font-weight: 700;
  padding: 20px 0;
  line-height: 1.1;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
}
.activity-kana {
  width: 100%;
  font-size: 33px;
  line-height: 1.1;
  margin-top: 8px;
}
@media screen and (max-width: 1030px) {
  .activity-box-wrap {
    padding: 0 20px;
  }
  .activity-logo {
    top: 20px;
    left:20px;
  }
  #play12 .activity-bg {
    min-height: 300px;
    background-position: left  top;
  }
  #play13 .activity-bg {
    min-height: 300px;
    background-position: left top;
  }
  #play14 .activity-bg {
    min-height: 300px;
    background-position: right top;
  }
}
@media screen and (max-width: 767px) {
  .sec00 {
    margin-top: 20px;
  }
  .sec_ttl {
    font-size: 16vw;
    margin-bottom: -3vw;
  }
  .activity-box-wrap{
    padding: 0 20px;
  }
  .activity-no {
    width: 100%;
    font-size: 2.5vw;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .activity-ttl {
    font-size: 5vw;
    padding: 3vw 0;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
  .activity-kana {
    width: 100%;
    font-size: 3vw;
  }
  
  .activity-logo {
    width: 20%;
    max-width:120px;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    top: 4%;
    left: 4%;
  }
  #play09 .activity-bg {
    background-position: right -20vw top;
  }
  #play10 .activity-bg {
    background-position: left -20vw top;
  }
  #play15 .activity-bg {
    min-height: 300px;
    background-position: right -30vw top;
  }
  .activity-bg.new::before {
  content: "";
  top: 0;
  right: 0;
  border-bottom: 48px solid transparent;
  border-right: 48px solid #FF0200;
  position: absolute;
  z-index: 100;
}
.activity-bg.new::after {
  content: "NEW";
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  display: block;
  top: 5px;
  right: 1px;
  transform: rotate(45deg);
  color: #fff;
  position: absolute;
  z-index: 101;
}
}
@media screen and (max-width: 600px) {
  #play09 .activity-bg {
    background-position: right -30vw top;
  }
  #play10 .activity-bg {
    background-position: left -30vw top;
  }
  #play11 .activity-bg {
  }
  #play12 .activity-bg {
    min-height: 300px;
    background-position: left -60px top;
  }
  #play13 .activity-bg {
    min-height: 300px;
    background-position: left -20vw top;
  }
  #play14 .activity-bg {
    min-height: 300px;
    background-position: right -10vw top;
  }
}
@media screen and (max-width: 500px) {
  #play09 .activity-bg {
    background-position: right -60vw top;
  }
  #play10 .activity-bg {
    background-position: left -60vw top;
  }
  .activity-no {
    font-size: 3vw;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .activity-ttl {
    font-size: 6vw;
    padding: 2vw 0;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
  .activity-kana {
    font-size: 4vw;
  }
}


/*sec01*/
.sec01 {
  margin-top: 160px;
}
.sec01 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.sec01 li {
  width: 50%;
  position: relative;
}

.sec01 li.commingsoon:before {
  content: "Comming soon...";
  color: #fff;
  font-size: 18px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
  z-index: 3;
}

.sec01 li.commingsoon:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #000000c2;
  z-index: 2;
}
.play01 {
  position: relative;
  background: url("../img/play01.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 300px;
  background-size: cover;
}

.play02 {
  position: relative;
  background: url("../img/play02.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 300px;
  background-size: cover;
}

.play03 {
  position: relative;
  background: url("../img/play03.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 300px;
  background-size: cover;
}

.play04 {
  position: relative;
  background: url("../img/play04.jpg") no-repeat;
    background-position: center center;
  width: 100%;
  min-height: 300px;
  background-size: cover;
}

.sec01 .play-box {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  top: 0;
  left: 0;
}

.play-box-wrap {
  width: 100%;
  padding: 40px 40px 0;
  text-align: center;
  color: #fff;
  line-height: 1.2;
  filter: drop-shadow(0px 3px 6px #00000045);
}

.play-box-wrap p,
.play-box-wrap a{
  color: #fff;
}

.play-head {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px; 
  border-top: 3px solid #fff;
}

.play-link {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-top: 10px;
  border-top: 3px solid #fff;
}
.play-link .play-no{width: 50%; }
.play-link p a{display: block;}
.play-link p:first-of-type{border-right: 2px solid #fff;}

.play-no {
  position: relative;
  font-weight: 900;
}
.play-no.new::before {
    content: "";
    top: -10px;
    left: 0;
    border-bottom: 36px solid transparent;
    border-left: 36px solid #FF0200;
    position: absolute;
    z-index: 100;
}
.play-no.new::after {
    content: "NEW";
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0;
    display: block;
    top: -3px;
    left: 1px;
    transform: rotate(-45deg);
    color: #fff;
    position: absolute;
    z-index: 101;
}
.play-no small {
  display: block;
  font-weight: 400;
  font-size: 16px;
}

.sec01 .play-no {
  font-size: 40px;
  line-height: 1.1;
}

.sec01 .play-ttl {
  font-size: 40px;
  font-weight: 700;
  padding: 15px 0;
  text-align: left;
}

.sec01 .play-kana {
  font-size: 19px;
  text-align: left;
}

.sec01 .play-name {
  font-size: 15px;
  text-align: left;
  margin-top: 10px;
}

.play-head .play-ttl{ padding-right: 20px;}
.play-head .play-right{
    flex-wrap: nowrap;
    display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
}


@media screen and (max-width: 1030px) {
  .play-box-wrap {
    padding: 8vw 15px;
  }
  .sec01 .play-no {
    font-size: 5vw;
  }
  .sec01 .play-no small {
    font-size: 2vw;
  }

  .sec01 .play-ttl {
    padding: 0;
    padding-right: 10px;
    font-size: 4.5vw;
    text-align: center;
  }

  .sec01 .play-kana {
    font-size: 2vw;
    text-align: center;
  }

  .sec01 .play-name {
    font-size: 2vw;
    text-align: center;
    margin-top: 5px;
  }
  .play01 {
    background-position: left  top;
  }
  .play02 {
    background-position: right  top;
  }
  .play03 {
    background-position: left  top;
  }
  .play04 {
    background-position: right  top;
  }
}
@media screen and (max-width: 767px) {
  .play-box-wrap {
    padding: 8vw 10px 0;
  }
  .play-head {
    flex-direction: column;
    border-top: 2px solid #fff;
  }
  .play-link {
    padding-top: 10px;
    border-top: 2px solid #fff;
  }
  .play-head .play-right {
    flex-direction: row;
    margin-top: 5px;
  }
  .sec01 .play-name {
    margin-top: 0;
    padding-left: 10px;
  }
  .sec01 {
    margin-top: 60px;
  }
}
@media screen and (max-width: 500px) {
  .play-head .play-right {
    flex-direction: column;
    margin-top: 5px;
    align-items: center;
  }
  .play-box-wrap {
    padding: 20vw 10px 0;
  }
  .sec01 .play-ttl {
    padding-right: 0;
  }
  .sec01 .play-name {
    padding-left: 0; 
  }
}