.like {
  padding: 120px 0 130px;
  position: relative;
  text-align: center;
  background: url("../img/like/like_bg_bottom.png") center bottom no-repeat;
}

.like:before {
  content: '';
  height: calc(100% - 346px);
  background-image: url("../img/like/like_bg_top.jpg"), url("../img/like/like_bg_repeat.png");
  background-position: center 0, center 42px;
}

.like-title {
  margin-bottom: 50px;
}

.like-text01 {
  margin-bottom: 47px;
}

.like-balloon01 {
  top: 180px;
  margin-left: 389px;
}

.like-balloon02 {
  top: 300px;
  margin-left: -585px;
}

.like-balloon03 {
  top: 784px;
  margin-left: 473px;
}

.like-balloon04 {
  top: 1186px;
  margin-left: -654px;
}

.like-balloon05 {
  top: 1536px;
  margin-left: 506px;
}

.like-balloon06 {
  top: 2019px;
  margin-left: -602px;
}

.like-balloon07 {
  top: 2450px;
  margin-left: 379px;
}

.like-balloon08 {
  top: 2918px;
  margin-left: -638px;
}

.like-balloon09 {
  top: 3110px;
  margin-left: 413px;
}

/* step */
.step {
  width: 940px;
  height: 1790px;
  margin: 0 auto 12px;
  padding: 110px 36px 120px;
  background-image: url("../img/like/step_bg01.png"), url("../img/like/step_bg02.png");
  background-position: center top, center bottom;
  background-repeat: no-repeat, no-repeat;
  box-sizing: border-box;
}

.step1 .step-detail {
  margin-top: 27px;
}

.step2 {
  margin-top: 59px;
}

.step2 .step-slider {
  margin-top: 32px;
}

.step3 {
  margin-top: 60px;
}

.step3 .step-detail {
  padding-top: 15px;
}

.step-title-main {
  margin-bottom: 55px;
}

.step-title-sub {
  height: 70px;
  margin-bottom: 26px;
  position: relative;
}

.step-title-sub img {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -258px;
}

.step-box:after {
  content: '';
  display: block;
  clear: both;
}

.step-detail {
  width: 50%;
  box-sizing: border-box;
}

.step-slider {
  width: 382px;
  height: 240px;
  padding: 14px;
  background: url("../img/like/like_step_slider_frame01.png") center center no-repeat;
  box-sizing: border-box;
}

.step-slider img {
  border-radius: 6px;
  overflow: hidden;
}

.step-item:nth-child(odd) .step-detail,
.step-item:nth-child(odd) .step-slider {
  float: left;
}

.step-item:nth-child(even) .step-detail,
.step-item:nth-child(even) .step-slider {
  float: right;
}

.step-item:nth-child(odd) .step-detail,
.step-item:nth-child(odd) .step-slider {
  margin-left: 6px;
}

.step-item:nth-child(even) .step-detail,
.step-item:nth-child(even) .step-slider {
  margin-right: 6px;
}

.step-nav-list {
  width: 786px;
  margin: 36px auto 0;
  overflow: hidden;
}

.step-nav-item {
  width: 382px;
  position: relative;
}

.step-nav-item:nth-child(odd) {
  float: left;
}

.step-nav-item:nth-child(even) {
  float: right;
}

.step-nav-item:nth-child(n+3) {
  margin-top: 20px;
}

.step-nav-item .icon-update:after {
  top: -13px;
  left: -18px;
}

.step-btn {
  margin: 20px 0;
  position: relative;
}

.step-btn-job {
  width: 48%;
  float: left;
  margin-left: -2px;
}

.step-btn .icon-update:after {
  top: -22px;
  left: 50%;
  margin-left: -158px;
}

/* mii */
.mii {
  width: 940px;
  height: 440px;
  margin: 0 auto 15px;
  padding: 135px 0;
  background: url("../img/like/mii_bg01.png") center top no-repeat;
  box-sizing: border-box;
}

.mii-title {
  margin-bottom: 34px;
}

/* trend */
.trend {
  width: 940px;
  height: 660px;
  margin: 0 auto;
  padding-top: 114px;
  background: url("../img/like/trend_bg01.png");
  box-sizing: border-box;
}

.trend-title {
  margin-bottom: 35px;
}

.trend-image-list {
  width: 528px;
  overflow: hidden;
  margin: 0 auto 38px;
}

.trend-image-item {
  width: 254px;
}

.trend-image-item:nth-child(odd) {
  float: left;
}

.trend-image-item:nth-child(even) {
  float: right;
}

/* modal */
.modal-box {
  width: 940px;
  margin-bottom: 35px;
  padding-top: 130px;
  line-height: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  box-sizing: border-box;
}

.modal-contents {
  font-size: 40px;
  color: #fff;
  text-align: center;
}

.modal-close {
  margin: 28px 0;
}

/* tomo */
.tomo {
  text-align: center;
}

.tomo-box {
  height: 440px;
  padding-top: 130px;
  position: relative;
  background-image: url("../img/like/tomo_bg01.png");
}

.tomo-title01 {
  margin-bottom: 28px;
}

.tomo-text02 {
  position: absolute;
  top: 206px;
  left: 50%;
  margin-left: -41px;
}

.tomo-text02 a {
  -webkit-transition: .1s linear;
  transition: .1s linear;
}

.tomo-text02 a:hover {
  opacity: .6;
}

/* qr */
.qr {
  text-align: center;
}

.qr-box {
  height: 440px;
  padding-top: 130px;
  position: relative;
  background-image: url("../img/like/qr_bg01.png");
}

.qr-title01 {
  margin-bottom: 30px;
}

.qr-text02 {
  position: absolute;
  top: 263px;
  left: 50%;
  margin-left: -18px;
}

.qr-text02 a {
  -webkit-transition: .1s linear;
  transition: .1s linear;
}

.qr-text02 a:hover {
  opacity: .6;
}

/* friend */
.friend {
  text-align: center;
}

.friend-box {
  height: 440px;
  padding-top: 130px;
  background-image: url("../img/like/friend_bg01.png");
}

.friend-title01 {
  margin-bottom: 28px;
}

/* myself */
.myself {
  text-align: center;
}

.myself-box {
  height: 440px;
  padding-top: 145px;
  background-image: url("../img/like/myself_bg01.png");
}

.myself-title01 {
  margin-bottom: 30px;
}

/* etc */
.etc {
  text-align: center;
}

.etc-box {
  height: 580px;
  padding-top: 110px;
  background-image: url("../img/like/etc_bg01.png");
}

.etc-title01 {
  margin-bottom: 50px;
}

.etc-text01 {
  margin-bottom: 50px;
}