@charset "utf-8";
html {
    scroll-behavior: smooth;
}

img{
    width: 100%;
}

img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/*新規入会はこちらのボタン----------------------*/

.benefit-entry{
    text-align: center;
}
.benefits-entry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
width: 250px;
  padding: 14px 22px;
  border: none;
  border-radius: 15px;
  font-size: 18px;

  background: #2EB0C7; 
  color: #fffacd;
  cursor: pointer;
}

/* 下向き矢印 */
.benefits-arrow{
  width: 8px;
  height: 8px;
  border-right: 2px solid #fffacd;
  border-bottom: 2px solid #fffacd;
  transform: rotate(45deg);
  margin-top: -2px;
}

@media screen and (max-width: 960px){
    .benefits-entry-btn{
        width: 200px;
        font-size: 14px;
    }
}

/*ホバー時の動き*/
.benefits-entry-btn {
  transition: all 0.15s ease;
  box-shadow: 0 3px 0 #1f8ea0;
}

.benefits-entry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #1f8ea0;
}

.benefits-entry-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #1f8ea0;
}

/*背景の青画像*/
.benefits-container{
    background-image: url(/static/fcopen/fanplakit/artist/marcy_EvwL0mAz/feature/marcy_entry_j2RBp5iw/image/bg-blue.png);
    background-size: 100%;
    width: 850px;
    margin: 50px auto 50px;
    color: #2EB0C7;
    padding-bottom: 50px;
}



/* @media screen and (max-width: 960px){
    .benefits-container{width: 100%;
        margin: 25px auto 25px;
        padding-bottom: 10px;
    }
} */
 @media screen and (max-width: 960px){
  .benefits-container{
    width: 100vw;
    margin: 25px 0;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding-bottom: 10px;
    background-position: center;
  }
}

.benefits-contentwrap{
    width: 750px;
    margin: 0 auto;
    padding-top: 50px;
}



@media screen and (max-width: 960px){
    .benefits-contentwrap{
        width: 85%;
    }
}
/*年額コース限定特典の画像------------------*/
.benefits-limited-pc{
    margin: 20px auto 50px;
}

/*pc時にsp用の年額限定画像を非表示*/
.benefits-limited-sp{
    display: none;
}

@media screen and (max-width: 760px){
    .benefits-limited-pc{
    display: none;
}

/*pc時にsp用の年額限定画像を非表示*/
.benefits-limited-sp{
    display: block;
    margin-bottom: 20px;
}
}


.benefit-all img{
    width: 60%;
}




/*月額要素共通--------------*/


.benefit-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media screen and (max-width: 760px){
    .benefit-list{
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 960px) and (orientation: landscape){

    .benefit-all{
    height: auto!important;   /* ←最重要 */
  }
  .benefit-list{
    grid-template-columns: 1fr!important; /* 横でも1列に落とす */
  }

   .benefits-container{
    width: 100% !important;
  }
}


.benefit-all{
    height: 300px; /* 全カード共通 */
    background: #dbe9ee;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.2rem;
}
@media screen and (max-width: 760px){
    .benefit-all{height: 270px;}
}

.benefit-sectiontitle{
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 25px;
}

@media screen and (max-width: 760px){
    .benefit-sectiontitle{
        font-size: 1.1rem;
        margin-top: 15px;
    }
}

.benefit-all img{
    margin-top: 20px;
}


.benefit-smalltext{
    font-size: .8rem;
    margin-top: 1px;
}
@media screen and (max-width: 760px){
    .benefit-smalltext{
        font-size: .7rem;
    }
}
.benefit-subtext{
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.4rem;
}

@media screen and (max-width: 760px){
    .benefit-subtext{
        font-size: .8rem;
    }
}

.benefit-specialtext{
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}
@media screen and (max-width: 760px){
    .benefit-specialtext{
        font-size: .8rem;
    }
}

/*月額コンテンツの青背景*/
.benefit-all{
    background: #d9f7ff;
    border-radius: 40px;
    overflow: hidden;
    align-items: center;

    text-align: center;
}

/*月額コンテンツの下部黄色箇所*/
.benefit-bgyellow{
    width: 100%;
    background: #fffacd;
    margin-top: auto;
}




/*月額コンテンツ、各々調整--------------------------------
------------------------------------------------------*/

/*チケット先行-----------------*/
.benefit-ticket img{
    width: 60%;
}
.benefit-ticket .benefit-subtext{
    margin-bottom: 5px;
    margin-top: 10px;
}

@media screen and (max-width: 760px){
    .benefit-ticket img{
    width: 57%;
    margin-top: 10px;
}
.benefit-ticket .benefit-subtext{
    margin-bottom: 5px;
    margin-top: 3px;
}
}

/*マルシィジャンボ-----------------*/
.benefit-jumbo img{
    width: 60%;
    padding-bottom: 15px;
}
@media screen and (max-width: 760px){
    .benefit-jumbo img{padding-bottom: 7px;}

}
/*デジタル会員証-----------------*/
.benefit-desitalcard img{
    width: 67%;
    margin-bottom: 5px;
    margin-top: 25px;
}

@media screen and (max-width: 760px){
    .benefit-desitalcard img{
        margin-top: 15px;
    }
}
/*スナップ-----------------*/
.benefit-snap img{
    width: 70%;
    margin-bottom: 15px;
    margin-top: 25px;
}

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

    .benefit-snap .benefit-sectiontitle{
        margin-bottom: 7px;
    }
    .benefit-snap img{
    width: 70%;
    margin-bottom: 5px;
    margin-top: 15px;
}

.benefit-snap  .benefit-subtext{
    margin-bottom: 5px;
    margin-top: 3px;
}
}

/*MOVIE-----------------*/
.benefit-movie img{
    width: 80%;
    padding-top: 15px;
    padding-bottom: 15px;
}

/*LIVE STREAMING-----------------*/
.benefit-live img{
    width: 75%;
}
.benefit-live .benefit-subtext{
    margin-top: 15px;
}
@media screen and (max-width: 760px){

    .benefit-live .benefit-sectiontitle{
        margin-bottom: 5px;
    }

    .benefit-live .benefit-subtext{
    margin-top: 0px;
}
}

/*ラジオ-----------------*/
.benefit-radio img{
    width: 70%;
    padding-top: 20px;
    padding-bottom: 15px;
}
@media screen and (max-width: 760px){
    .benefit-radio img{
    padding-top: 10px;
}
}
/*BLOG-----------------*/
.benefit-blog img{
    width: 70%;
    margin-bottom: 10px;
}

@media screen and (max-width: 760px){
    .benefit-blog img{
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/*育成ゲーム（猫）-----------------*/
.benefit-cat img{
    width: 75%;
    padding-top: 30px;
    padding-bottom: 42px;
}

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

    .benefit-cat .benefit-sectiontitle{
        margin-bottom: 5px;
    }

    .benefit-cat img{
        padding-top: 15px;
    padding-bottom: 25px;
}
}

/*PHOTO-----------------*/
.benefit-photo img{
    width: 80%;
    margin-top: 5px;
    margin-bottom: 27px;
}

.benefit-photo .benefit-sectiontitle{
    margin-bottom: 15px;
}
@media screen and (max-width: 760px){
    .benefit-photo img{
        padding-top: 0px;
        margin-top: 5px;
        margin-bottom: 10px;
    }

}

/*MUSIC-----------------*/
.benefit-music img{
    width: 45%;
    padding-top: 15px;
    padding-bottom: 28px;
}

@media screen and (max-width: 760px){
    .benefit-music img{
        width: 40%;
    padding-bottom: 15px;
    }
}

/*バースデーメール-----------------*/
.benefit-birthday img{
    width: 50%;
    padding-top: 16px;
    padding-bottom: 20px;
}

@media screen and (max-width: 760px){
.benefit-birthday  .benefit-subtext{
    margin-bottom: 0px;
    margin-top: 0px;
}

.benefit-birthday img{
    padding-top: 5px;
    padding-bottom: 15px;
}
}



/*特典比較表--------*/


.benefit-tablecontent{
    margin-top: 50px;
}
 .benefit-table .yes {
    display: inline-block;
  width: 15px;
  height: 15px;
  border: 2.5px solid #2EB0C7; /* ←太さここで調整 */
  border-radius: 50%;
}

@media screen and (max-width: 760px){
    .benefit-table .yes{
    width: 12px;
    height: 12px;
    border: 2px solid #2EB0C7;
    }
}

 .benefit-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 900px;
    margin: 50px auto;
    table-layout: fixed;
    margin-bottom: 50px;
  }

  .benefit-table th, .benefit-table td {
    border: 1px solid #b2b2b2;
    padding: 12px;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
  }

  .benefit-table th:first-child, td:first-child {
    font-weight: bold;
  }

  .benefit-table th {
    font-weight: bold;
  }


  .benefit-table .check {
    font-size: 23px;
    line-height: 1.2rem;
  }

  .benefit-table .dash {
    color: #aaa;
    font-size: 18px;
  }

  /* 2列目（VAWS premium）を全部まとめて色付け */
.benefit-table td:nth-child(2),
.benefit-table th:nth-child(2) {
  background: #fae3d8;
}

/* 3列目（VAWS monthly）を全部まとめて色付け */
.benefit-table td:nth-child(3),
.benefit-table th:nth-child(3) {
  background: #fffad6;
}

/*※テキストを小さく*/
.benefit-note{
    font-size: .7rem;
    font-weight: normal;
}

/*列ごとの幅の割合調整*/
.benefit-table th:nth-child(1),
  .benefit-table td:nth-child(1) {
    width:50%;
  }

  .benefit-table th:nth-child(2),
  .benefit-table td:nth-child(2),
  .benefit-table th:nth-child(3),
  .benefit-table td:nth-child(3) {
    width: 25%;
  }

@media (max-width: 768px) {

  .benefit-table {
    table-layout: fixed;
    font-size: .8rem;
  }

  .benefit-note{
    font-size: .6rem;
}

  .benefit-table .check {
    font-size: 15px;
  }

    .benefit-table .dash {
    font-size: 13px;
  }

  .benefit-table th:nth-child(1),
  .benefit-table td:nth-child(1) {
    width: 60%;
  }

  .benefit-table th:nth-child(2),
  .benefit-table td:nth-child(2),
  .benefit-table th:nth-child(3),
  .benefit-table td:nth-child(3) {
    width: 20%;
    padding: 6px;
    line-height: .8rem;
  }
}


  /*スマホ時のみ月額年額、コースで改行入れる*/

 .sub {
  display: inline; /* PCはそのまま */
}

@media (max-width: 960px) {
 .sub {
    display: block;
  }
}

@media screen and (min-width: 961px) {
    .page--feature .page--introduction [class^=block--] table {
        width: 740px!important;
}
}