@charset "UTF-8";
/* 古い settingを読み込む このファイルは削除対象なのでこれ以上変数を増やさない */
/*
* 以下はリニューアル前の変数
* o-がつくものに関しては使用せず _settingのものを使ってください。
* また、o-がつく変数があっても新規でレイアウト作成時に出来たものは新規で作成してください。
* style guide は下記参照のこと
* https://www.figma.com/file/PrZ9uCouuhUyxAyc00wfRYum/%E3%82%B2%E3%82%BD%E3%81%A6%E3%82%93-PC?node-id=5382%3A1443
*/
/**
 * カラー
 */
/**
 * 余白
 */
/**
 * 旧レイアウトで使用している角丸のレイアウト
 */
/**
 * フォントサイズ・ウェイト
 * mixin だが用意したものしか使わないという設定的な用途のため settings におく
 */
/**
 * scss内で記述している imgのクエリストリングを一括で変更
 * YYYYMMDDhhmm で記述すること
 */
/*
* 以下はリニューアル後の変数
* o-がつくものに関しては使用せず
* 下記から使用してください。
* また、o-がつく変数があっても新規でレイアウト作成時に出来たものは新規で作成してください。
* style guide は下記参照のこと
* https://www.figma.com/file/PrZ9uCouuhUyxAyc00wfRYum/%E3%82%B2%E3%82%BD%E3%81%A6%E3%82%93-PC?node-id=5382%3A1443
*/
/* 追加のグローバル変数 */
/**
 * カラー
 */
/* アクセントカラー */
/* テキスト */
/* border */
/* 背景の指定 */
/* リンクの色 */
/* shadowの色 */
/* クイックチャージ */
/* クーポン */
/* コインバック */
/* pr 広告枠 */
/* その他 */
/**
 * 余白
 */
/* 角丸 */
/**
 * フォントサイズ・ウェイト
 * mixin だが用意したものしか使わないという設定的な用途のため settings におく
 */
/* baseのプレースホルダークラス　置く場所悩み中 */
/**
 * シャドウ
 */
/**
 * ゲソで特定のところに使われている リセット
 */
/**
 * 1行でのテキストをカットする
 * 横幅を指定しないと省略できないので気をつけて
 */
/**
 * 複数行のテキストをカットする
 */
/**
 * ブロック要素をセンターに寄せる
 */
/* #l-old-setting-layout と #l-bingo-wrapper は
* 古いレイアウトのものになります。
* こちらは削除対象なので、こちらは使用しないでください。
*/
/**
 * 以下、リニューアル後に追加 20200811
 */
/* missionページで使用するボタン 共通パーツが多いので mixiin化する */
button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
button:hover {
  opacity: 0.7;
}

.c-step-up-sec {
  position: relative;
  background-color: #f7f7f7;
}
.c-step-up-sec--about {
  z-index: 1;
  padding-top: 75px;
  padding-bottom: 75px;
  background-image: url("/gesolite/pc/img/ap-gesoten/campaign/step-up/bg-about.png?v=202504021600");
  background-size: cover;
}
.c-step-up-sec--mission {
  z-index: 2;
  margin-top: -25px;
  padding-top: 75px;
  padding-bottom: 60px;
  background-color: transparent;
  background-image: url("/gesolite/pc/img/ap-gesoten/campaign/step-up/bg-mission.png?v=202504021600");
  background-size: cover;
}
.c-step-up-sec--desc {
  padding-top: 60px;
  background-color: #eee;
}
.c-step-up-sec--header, .c-step-up-sec--desc {
  padding-bottom: 60px;
}
.c-step-up-sec__l-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1000px;
  margin-right: auto;
  margin-left: auto;
}
.c-step-up-sec__l-thumbnail {
  overflow: hidden;
  margin-bottom: 40px;
  border: solid 2px #000;
  border-radius: 16px;
}
.c-step-up-sec__thumbnail > img {
  width: 100%;
}
.c-step-up-sec__schedule {
  font-weight: bold;
  font-size: 24px;
  padding: 16px;
  background-color: #000;
  color: #fff;
  text-align: center;
}
.c-step-up-sec__l-text {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  gap: 16px;
}
.c-step-up-sec__ttl {
  margin-bottom: 40px;
}
.c-step-up-sec__ttl > img {
  width: 400px;
}
.c-step-up-sec__sub-ttl {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 24px;
}
.c-step-up-sec__sub-ttl--decoration::before, .c-step-up-sec__sub-ttl--decoration::after {
  display: inline-block;
  width: 15px;
  height: 28px;
  background-image: url("/gesolite/pc/img/ap-gesoten/campaign/step-up/icon-parentheses.svg?v=202504021600");
  background-size: cover;
  content: "";
  vertical-align: middle;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
}
.c-step-up-sec__sub-ttl--decoration::before {
  margin-right: 8px;
  -webkit-transform: scale(-1, 1) translateY(-10%);
          transform: scale(-1, 1) translateY(-10%);
}
.c-step-up-sec__sub-ttl--decoration::after {
  margin-left: 8px;
}
.c-step-up-sec__lead {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
.c-step-up-sec__note {
  font-weight: bold;
  font-size: 16px;
  color: #646464;
  text-align: center;
}
.c-step-up-sec__l-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 550px;
  gap: 24px;
}
.c-step-up-sec__l-btn button:hover {
  background-color: #fff;
}

.c-step-up-btn > img {
  width: 100%;
}

.c-step-up-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
}
.c-step-up-info > i {
  display: inline-block;
  width: 52px;
  height: 54px;
  background-image: url("/gesolite/pc/img/ap-gesoten/campaign/step-up/icon-beginner.svg?v=202504021600");
  background-size: contain;
}
.c-step-up-info__balloon {
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
  padding: 12px;
  border: solid 2px #000;
  border-radius: 8px;
  background-color: #fff;
}
.c-step-up-info__balloon > p {
  color: #000;
}
.c-step-up-info__btn {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
}

.c-step-up-game {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: solid 2px #000;
  border-radius: 16px;
  background-color: #fff;
  gap: 16px;
}
.c-step-up-game__thumbnail {
  flex-shrink: 0;
  overflow: hidden;
  width: 200px;
  height: 200px;
  border: solid 2px #000;
  border-radius: 8px;
}
.c-step-up-game__thumbnail > img {
  width: 100%;
}
.c-step-up-game__l-desc {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 12px;
}
.c-step-up-game__l-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.c-step-up-game__name {
  font-weight: bold;
  font-size: 24px;
}
.c-step-up-game__label {
  font-size: 14px;
  width: -webkit-fit-content;
  width: fit-content;
  padding: 2px 4px;
  border: solid 1px #000;
  border-radius: 4px;
}
.c-step-up-game__note {
  font-size: 16px;
  display: -webkit-box;
  overflow: hidden;
  max-height: 4.5em;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.c-step-up-game__l-btn {
  text-align: end;
}
.c-step-up-game__btn {
  padding: 12px 24px;
  border: solid 2px #000;
  border-radius: 30px;
  background-color: #0c2552;
  color: #fff;
  text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
  font-size: 18px;
}
.c-step-up-game__btn > i {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("/gesolite/pc/img/ap-gesoten/campaign/step-up/icon-btn-arrow.svg?v=202504021600");
  background-size: cover;
  vertical-align: middle;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
}

.c-step-up-mission-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1000px;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 40px;
}
.c-step-up-mission-list > li {
  display: flex;
  box-sizing: border-box;
  position: relative;
  width: 976px;
  padding: 24px;
  border-radius: 8px;
  background-color: #293c5d;
  box-shadow: 0 0 0 2px #000, 0 0 0 10px #f7f7f7, 0 0 0 12px #000;
}
.c-step-up-mission-list__level {
  margin-right: 24px;
}
.c-step-up-mission-list__level > img {
  width: 140px;
}
.c-step-up-mission-list__l-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.c-step-up-mission-list__l-row {
  display: flex;
  justify-content: space-between;
}
.c-step-up-mission-list__text {
  font-weight: bold;
  font-size: 24px;
  color: #fff;
  text-shadow: 2px 2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000, -2px -2px 1px #000, 2px 0 1px #000, 0 2px 1px #000, -2px 0 1px #000, 0 -2px 1px #000;
}
.c-step-up-mission-list__note {
  font-size: 14px;
  padding: 12px;
  color: #fff;
  text-align: end;
}
.c-step-up-mission-list__l-bonus {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.c-step-up-mission-bonus {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  padding-right: 40px;
  gap: 4px;
}
.c-step-up-mission-bonus::after {
  z-index: 0;
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 780px;
  height: 73px;
  background-image: url("/gesolite/pc/img/ap-gesoten/campaign/step-up/bg-bonus.png?v=202504021600");
  background-size: contain;
  content: "";
}
.c-step-up-mission-bonus__text {
  font-weight: bold;
  font-size: 20px;
  z-index: 1;
}
.c-step-up-mission-bonus__text > span {
  font-weight: bold;
  font-size: 32px;
}
.c-step-up-mission-bonus__text--incentives {
  color: #f9484e;
}
.c-step-up-mission-bonus__text--target {
  color: #000;
}

.c-step-up-desc {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: solid 2px #000;
  border-radius: 8px;
  background-color: #fff;
  gap: 12px;
}
.c-step-up-desc > li > p {
  font-size: 16px;
}
.c-step-up-desc > li > p > span {
  font-weight: bold;
  font-size: 16px;
}
.c-step-up-desc > li > p > a {
  color: #0086e5;
  text-decoration: underline;
}

.c-step-up-modal {
  overflow-y: auto;
  max-height: 70vh;
  padding: 40px;
  background-color: #fff;
}