@charset "UTF-8";
/*  inview style  */
.slideIn {
  opacity: 0; }

.slideIn.is-inview {
  animation: slideIn 1s 1;
  animation-fill-mode: forwards; }
@keyframes slideIn {
  0% {
    transform: translateY(50px);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
.wrapper_ > * {
  width: auto;
  margin: 0; }

.boobys-mission section {
  padding: 60px 0; }
  .boobys-mission section .wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; }
  .boobys-mission section.mv-lead {
    background: #db092c;
    padding: 0 0 40px; }
    .boobys-mission section.mv-lead .mv img {
      margin: 0 auto; }
    .boobys-mission section.mv-lead .lead {
      text-align: center;
      padding-top: 30px;
      color: #fff;
      font-weight: 600;
      font-size: 1.3em; }
      .boobys-mission section.mv-lead .lead .main {
        display: block;
        font-size: 2.2em;
        font-weight: 800;
        padding-bottom: 14px; }
  .boobys-mission section.join .step-wrap {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; }
    .boobys-mission section.join .step-wrap dl {
      width: calc((100% - 60px) / 4);
      border: 3px solid #000; }
      .boobys-mission section.join .step-wrap dl dt .flow-img {
        aspect-ratio: 1 / 1;
        width: 90%;
        text-align: center;
        position: relative;
        margin: 20px auto 0; }
        .boobys-mission section.join .step-wrap dl dt .flow-img img {
          display: inline-block;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%); }
      .boobys-mission section.join .step-wrap dl dd .step {
        display: block;
        font-weight: 800;
        text-align: center;
        font-family: "Roboto", "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        background: #db092c;
        color: #fff;
        padding: 0 10px;
        font-size: 1.4em; }
        .boobys-mission section.join .step-wrap dl dd .step .num {
          font-size: 1.5em;
          margin-left: 5px; }
      .boobys-mission section.join .step-wrap dl dd .text {
        padding: 10px 15px 20px; }
        .boobys-mission section.join .step-wrap dl dd .text h4 {
          font-weight: 800;
          font-size: 1em;
          min-height: 2.2em;
          margin-bottom: 10px;
          text-align: center;
          letter-spacing: -0.2px; }
          .boobys-mission section.join .step-wrap dl dd .text h4 .re {
            letter-spacing: -2px; }
        .boobys-mission section.join .step-wrap dl dd .text p {
          font-size: 0.95em; }
          .boobys-mission section.join .step-wrap dl dd .text p .hash {
            font-weight: 800;
            font-size: 1.1em;
            color: #db092c; }
      .boobys-mission section.join .step-wrap dl.is-inview:nth-of-type(2) {
        animation-delay: .2s; }
      .boobys-mission section.join .step-wrap dl.is-inview:nth-of-type(3) {
        animation-delay: .4s; }
      .boobys-mission section.join .step-wrap dl.is-inview:nth-of-type(4) {
        animation-delay: .6s; }
  .boobys-mission section.items {
    background: #db092c; }
    .boobys-mission section.items .block-common-title .block-common-title-en,
    .boobys-mission section.items .block-common-title .block-common-title-jp {
      color: #fff; }
    .boobys-mission section.items .items-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 20px; }
      .boobys-mission section.items .items-list li {
        width: calc((100% - 100px) / 6); }
        .boobys-mission section.items .items-list li a {
          display: block;
          transition: all ease-in-out .2s; }
          .boobys-mission section.items .items-list li a:hover {
            transform: translate(0px, -7px); }
        .boobys-mission section.items .items-list li .img {
          background: #fff;
          aspect-ratio: 1 / 1;
          text-align: center;
          border-radius: 500px;
          overflow: hidden;
          padding: 10px;
          border: 2px solid #000; }
        .boobys-mission section.items .items-list li .name {
          font-size: 1em;
          padding-top: 1em;
          text-align: center;
          color: #fff;
          font-weight: 600;
          font-family: "Roboto", "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
        .boobys-mission section.items .items-list li.is-inview:nth-of-type(2), .boobys-mission section.items .items-list li.is-inview:nth-of-type(8) {
          animation-delay: .2s; }
        .boobys-mission section.items .items-list li.is-inview:nth-of-type(3), .boobys-mission section.items .items-list li.is-inview:nth-of-type(9) {
          animation-delay: .4s; }
        .boobys-mission section.items .items-list li.is-inview:nth-of-type(4), .boobys-mission section.items .items-list li.is-inview:nth-of-type(10) {
          animation-delay: .6s; }
        .boobys-mission section.items .items-list li.is-inview:nth-of-type(5), .boobys-mission section.items .items-list li.is-inview:nth-of-type(11) {
          animation-delay: .8s; }
        .boobys-mission section.items .items-list li.is-inview:nth-of-type(6), .boobys-mission section.items .items-list li.is-inview:nth-of-type(12) {
          animation-delay: 1s; }
    .boobys-mission section.items .notice {
      color: #fff;
      margin-top: 3em;
      text-align: center; }
  .boobys-mission section.complete .block-common-title {
    margin-bottom: 20px; }
  .boobys-mission section.complete .comingsoon {
    position: relative;
    display: flex;
    font-size: 1.8em;
    font-weight: 800;
    /* text-align: center; */
    background: #f2f2f2;
    height: auto;
    min-height: 220px;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    border: 3px solid #db092c;
    color: #db092c; }
    .boobys-mission section.complete .comingsoon::after {
      content: '';
      display: inline-block;
      background: url(/cms/topics/26SS/boobys-mission/run-booby-red.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 95px;
      height: 107px;
      position: absolute;
      right: 60px;
      bottom: 0; }
  .boobys-mission section.complete .block-top-chumstagram {
    padding: 0;
    border-bottom: none; }
  .boobys-mission section.complete .ecbn-selection-widget ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px;
    width: 100% !important;
    height: auto !important; }
  .boobys-mission section.complete .vsm-more {
    display: none; }
  .boobys-mission section.complete .vsm-tile .ecbn-selection-page-wrapper .ecbn-selection-content {
    padding-top: 1em; }
  .boobys-mission section.complete .ecbn-selection-page-wrapper .ecbn-selection-more-btn {
    background: #333333;
    color: #fff;
    border-radius: 0; }
  .boobys-mission section.card_list {
    width: 100vw;
    height: 100%;
    background: #f2f2f2; }
    .boobys-mission section.card_list .card_wrap {
      max-width: 1200px;
      margin: 0 auto; }
      .boobys-mission section.card_list .card_wrap ul {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        z-index: 99;
        gap: 30px;
        justify-content: center; }
        .boobys-mission section.card_list .card_wrap ul .card {
          position: relative;
          width: calc((100% - 120px) / 5);
          aspect-ratio: 6 / 9;
          perspective: 1000px;
          transform-style: preserve-3d;
          transition: all ease-in-out 0.5s; }
          .boobys-mission section.card_list .card_wrap ul .card:nth-of-type(odd) {
            transform: translateY(-10px); }
            .boobys-mission section.card_list .card_wrap ul .card:nth-of-type(odd):hover {
              transform: translate(5px, -5px); }
          .boobys-mission section.card_list .card_wrap ul .card:nth-of-type(even) {
            transform: translateY(10px); }
            .boobys-mission section.card_list .card_wrap ul .card:nth-of-type(even):hover {
              transform: translate(5px, 15px); }
          .boobys-mission section.card_list .card_wrap ul .card .cardface {
            transition: transform 0.6s;
            backface-visibility: hidden;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0; }
            .boobys-mission section.card_list .card_wrap ul .card .cardface:hover {
              cursor: grab; }
            .boobys-mission section.card_list .card_wrap ul .card .cardface.front {
              transform: none; }
            .boobys-mission section.card_list .card_wrap ul .card .cardface.back {
              transform: rotateY(180deg); }
            .boobys-mission section.card_list .card_wrap ul .card .cardface img {
              filter: drop-shadow(3px 3px 0px #786a6a); }
          .boobys-mission section.card_list .card_wrap ul .card.is-flipped .front {
            transform: rotateY(180deg); }
          .boobys-mission section.card_list .card_wrap ul .card.is-flipped .back {
            transform: rotateY(360deg); }
          .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(2), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(7), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(12), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(17), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(22), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(27) {
            transition-delay: .2s; }
          .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(3), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(8), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(13), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(18), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(23), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(28) {
            transition-delay: .4s; }
          .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(4), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(9), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(14), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(19), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(24), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(29) {
            transition-delay: .6s; }
          .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(5), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(10), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(15), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(20), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(25), .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(30) {
            transition-delay: .8s; }
      .boobys-mission section.card_list .card_wrap .rare {
        position: relative;
        margin-top: 55px; }
        .boobys-mission section.card_list .card_wrap .rare ul .card::before, .boobys-mission section.card_list .card_wrap .rare ul .card::after {
          content: '';
          display: inline-block;
          width: 55px;
          height: 55px;
          position: absolute;
          animation: twinkle 1.5s infinite ease-in-out; }
        .boobys-mission section.card_list .card_wrap .rare ul .card::before {
          background: url(/cms/topics/26SS/boobys-mission/twinkle.svg);
          top: -20px;
          left: -45px; }
        .boobys-mission section.card_list .card_wrap .rare ul .card::after {
          background: url(/cms/topics/26SS/boobys-mission/twinkle.svg);
          bottom: -25px;
          right: -58px;
          animation-delay: .8s; }
        .boobys-mission section.card_list .card_wrap .rare ul .card .anm {
          display: block;
          position: relative;
          overflow: hidden;
          padding: 0 3px 3px 0; }
          .boobys-mission section.card_list .card_wrap .rare ul .card .anm::after {
            content: "";
            display: block;
            width: 30px;
            height: 100%;
            position: absolute;
            top: -180px;
            left: 0;
            background-color: #f2f2f2;
            opacity: 0;
            transform: rotate(45deg);
            animation: reflect 2.7s ease-in-out infinite; }
  .boobys-mission section.terms .list-main li {
    list-style: disc;
    margin-left: 1.5em;
    line-height: 1.8; }
    .boobys-mission section.terms .list-main li .sub {
      padding-top: 0.5em; }
      .boobys-mission section.terms .list-main li .sub li {
        list-style: inherit; }

@keyframes twinkle {
  0% {
    transform: translateY(0px);
    opacity: 0; }
  80% {
    transform: translateY(-10px);
    opacity: 1; }
  99% {
    transform: translateY(-10px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 0; } }
@keyframes reflect {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0; } }
@-webkit-keyframes reflect {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0; } }
.block-top-chumstagram .vsm-tile .ecbn-selection-page-wrapper .block-chumstagram--desc {
  line-height: 1.5; }

.hidden-xs {
  display: block; }

.visible-xs {
  display: none; }

@media screen and (max-width: 1032px) {
  .wrapper_ > * {
    padding: 0; }

  .boobys-mission section {
    padding: 40px 0; }
    .boobys-mission section .wrapper {
      padding: 0 15px; }
    .boobys-mission section .block-common-title {
      margin-bottom: 20px; }
    .boobys-mission section .block-common-title .block-common-title-en {
      margin: 0;
      line-height: 1.2; }
    .boobys-mission section.mv-lead .lead {
      font-size: 1em;
      padding-top: 20px; }
      .boobys-mission section.mv-lead .lead .main {
        font-size: 2em;
        padding-bottom: 14px;
        line-height: 1.4; }
    .boobys-mission section.join .step-wrap {
      gap: 10px; }
      .boobys-mission section.join .step-wrap dl {
        width: calc((100% - 10px) / 2);
        border: 2px solid #000; }
        .boobys-mission section.join .step-wrap dl dd .step {
          font-size: 1.2em;
          line-height: 1.4; }
        .boobys-mission section.join .step-wrap dl dd .text {
          padding: 10px 10px 15px; }
          .boobys-mission section.join .step-wrap dl dd .text h4 {
            text-align: left; }
        .boobys-mission section.join .step-wrap dl.is-inview:nth-of-type(odd) {
          animation-delay: 0s; }
        .boobys-mission section.join .step-wrap dl.is-inview:nth-of-type(even) {
          animation-delay: .2s; }
    .boobys-mission section.items .items-list {
      gap: 10px; }
      .boobys-mission section.items .items-list li {
        width: calc((100% - 20px) / 3); }
        .boobys-mission section.items .items-list li .name {
          padding-top: 0.5em; }
    .boobys-mission section.items .notice {
      text-align: left; }
    .boobys-mission section.complete .comingsoon {
      font-size: 1.5em; }
      .boobys-mission section.complete .comingsoon::after {
        width: 76px;
        height: 86px;
        right: 20px; }
    .boobys-mission section.card_list .card_wrap ul {
      gap: 15px;
      justify-content: flex-start; }
      .boobys-mission section.card_list .card_wrap ul .card {
        width: calc((100% - 15px) / 2); }
        .boobys-mission section.card_list .card_wrap ul .card:hover {
          transform: translate(0, 0); }
        .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(odd) {
          transition-delay: 0s; }
        .boobys-mission section.card_list .card_wrap ul .card.is-inview:nth-of-type(even) {
          transition-delay: .2s; }
    .boobys-mission section.card_list .card_wrap .rare ul {
      justify-content: center; }
    .boobys-mission section.terms .list-main {
      font-size: 0.9em; }

  .hidden-xs {
    display: none; }

  .visible-xs {
    display: block; }

  .block-top-chumstagram .vsm-tile .ecbn-selection-page-wrapper .ecbn-selection-snap {
    gap: 15px 4px; } }
@media screen and (max-width: 720px) {
  .ecbn-selection-item .ecbn-selection-caption:after {
    background: -webkit-linear-gradient(top, rgba(245, 245, 245, 0), #fff); } }
.fadeIn {
  opacity: 0; }
  .fadeIn.is-inview {
    opacity: 1; }
