@charset "UTF-8";
.block {
  display: block; }

img.auto {
  width: 100%;
  max-width: 100%;
  height: auto; }

main img {
  vertical-align: bottom; }

.uppercase {
  text-transform: uppercase; }

#contents-wrap {
  padding: 0; }
  @media screen and (min-width: 569px) {
    #contents-wrap {
      padding: 20px 0 50px 0; } }

/** -------------------------------------------------
 * app_download
 ---------------------------------------------------- **/
.app_download-wrap {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background-color: #013895; }

.app_download {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: calc((60/750)*100%) calc((70/750)*100%);
  margin: 0 auto; }
  @media screen and (min-width: 569px) {
    .app_download {
      max-width: 840px;
      padding: 50px 0 45px; } }
  .app_download__title {
    display: block;
    margin-bottom: 13px;
    text-align: center; }
    @media screen and (min-width: 569px) {
      .app_download__title {
        margin: 0 auto 0; } }
    .app_download__title img {
      width: 100%; }
  @media screen and (min-width: 569px) {
    .app_download__link a {
      pointer-events: none; } }
  .app_download__text {
    width: 100%;
    margin-top: 25px;
    font-size: 14px;
    color: #fff;
    text-align: center; }

.app_download__contents {
  display: flex;
  justify-content: center; }

.app_download__apple {
  display: flex;
  align-items: flex-end;
  width: calc((273/608)*100%);
  max-width: 273px;
  margin-right: calc((25/608)*100%); }

.app_download__google {
  display: flex;
  align-items: flex-end;
  width: calc((310/608)*100%);
  max-width: 310px; }

@media screen and (min-width: 569px) {
  .app_download__apple {
    width: calc((186/548)*100%);
    max-width: 186px;
    margin-right: calc((30/548)*100%); }
  .app_download__google {
    width: calc((211/548)*100%);
    max-width: 211px;
    margin-right: calc((30/548)*100%); }
  .app_download__qr {
    width: calc((90/548)*100%);
    max-width: 90px; } }

/**
  吹き出しアニメーション
 **/
.mv__speech-bubble {
  transform-origin: calc((234/750)*100vw) 100%;
  animation-name: sway;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
  @media screen and (min-width: 569px) {
    .mv__speech-bubble {
      transform-origin: 100% 144px; } }

.search-button__speech-bubble {
  transform-origin: calc((288/750)*100vw) 100%;
  animation-name: sway;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
  @media screen and (min-width: 569px) {
    .search-button__speech-bubble {
      transform-origin: 205px 100%; } }

.what-time__speech-bubble {
  transform-origin: calc((208/750)*100vw) 100%;
  animation-name: sway;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
  @media screen and (min-width: 569px) {
    .what-time__speech-bubble {
      transform-origin: 220px 100%; } }

.point-list__speech-bubble {
  transform-origin: calc((260/750)*100vw) 100%;
  animation-name: sway;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
  @media screen and (min-width: 569px) {
    .point-list__speech-bubble {
      transform-origin: 220px 100%; } }

.purchase-procedures__move01, .purchase-procedures__move02 {
  opacity: 0; }

.purchase-procedures__items.is-animated .purchase-procedures__move01 {
  opacity: 1;
  animation-name: slide01;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1; }

.purchase-procedures__items.is-animated .purchase-procedures__move02 {
  opacity: 1;
  transition: opacity;
  transition-delay: 1s;
  animation-name: slide02;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: 1; }

.purchase-procedures__items.is-animated .purchase-procedures__move03 {
  transform-origin: 0% 100%;
  animation-name: scale03;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 2s;
  animation-iteration-count: 1; }

@keyframes sway {
  0% {
    transform: rotate(-5deg); }
  50% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-5deg); } }

@keyframes slide01 {
  0% {
    transform: translateX(-200%); }
  100% {
    transform: translateX(0%); } }

@keyframes slide02 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }

@keyframes scale03 {
  0% {
    transform: scale(1); }
  60% {
    transform: scale(1.3); }
  100% {
    transform: scale(1); } }

/**
  MVアニメーション
 **/
.mv__otoku {
  transform-origin: calc((280/750)*100vw) calc((520/750)*100vw);
  animation-name: moment-scale, zoom-in-out;
  animation-duration: .8s, 1.5s;
  animation-timing-function: ease;
  animation-delay: 1s, 3.5s;
  animation-iteration-count: 1, infinite; }
  @media screen and (min-width: 569px) {
    .mv__otoku {
      transform-origin: 420px 320px; } }

@keyframes moment-scale {
  0% {
    transform: scale(1); }
  30% {
    transform: scale(1.15); }
  100% {
    transform: scale(1); } }

@keyframes zoom-in-out {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

@keyframes zoom-in-out-re {
  0% {
    transform: scale(1.1); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(1.1); } }

@keyframes bon {
  0% {
    transform: scale(0); }
  30% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

body {
  font-family: 'ヒラギノ角ゴ Pro W3', 'Noto Sans JP', 'メイリオ', sans-serif; }
  @media screen and (min-width: 569px) {
    body {
      min-width: 960px; } }

@media screen and (min-width: 569px) {
  img.auto {
    width: auto; } }

header {
  z-index: 1010; }

nav {
  z-index: 1020; }

footer {
  margin-top: 15px;
  border: none; }

#detail-page {
  top: 0;
  overflow: hidden; }
  #detail-page * {
    box-sizing: border-box; }
  @media screen and (min-width: 569px) {
    #detail-page picture {
      width: max-content; } }
  @media screen and (min-width: 569px) {
    #detail-page {
      padding-top: 4px; } }

#contents-wrap {
  position: relative; }
  @media screen and (min-width: 569px) {
    #contents-wrap {
      padding: 0;
      margin-top: 5px;
      border: none; } }

.app-bnr-layout {
  position: fixed;
  right: 0;
  bottom: 65px;
  left: 0;
  z-index: 1000;
  text-align: right; }

.app-bnr-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-top: 0; }
  @media screen and (min-width: 569px) {
    .app-bnr-wrap {
      max-width: 960px;
      margin: 0 auto; } }

.app-bnr {
  max-width: calc((140 / 750) * 100vw);
  margin-right: calc((15 / 750) * 100vw); }
  @media screen and (min-width: 569px) {
    .app-bnr {
      max-width: 100px;
      margin-right: 20px; } }
  .app-bnr img {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .app-bnr.active-01 img {
    transform: scale(1); }
  .app-bnr.active-mv img,
  .app-bnr.active-02 img {
    transform: scale(0); }

.bread-crumb-wrap {
  position: relative;
  width: 960px;
  margin: 0 auto; }

.bread-crumb::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: ' '; }

.bread-crumb > #home {
  padding-left: 12px;
  background: url(/common/images/bread-clumb-home-bg-01.png) left 1px no-repeat; }

.bread-crumb li {
  display: inline;
  color: #666; }

.pc {
  display: none; }
  @media screen and (min-width: 569px) {
    .pc {
      display: block; } }

.sp {
  display: block; }
  @media screen and (min-width: 569px) {
    .sp {
      display: none; } }

/** -------------------------------------------------
 * mv
 ---------------------------------------------------- **/
.mv-wrap {
  background-color: #fff000; }

.mv {
  height: calc((1513 / 750) * 100vw);
  background: url(/sell/spuketori/images/bg_paypay_sp.png);
  background-size: cover; }
  @media screen and (min-width: 569px) {
    .mv {
      width: 100%;
      max-height: 700px;
      margin: 0 auto;
      background: url(/sell/spuketori/images/bg_paypay_pc.png);
      background-position: 50% 33%;
      background-size: cover; } }
  .mv__inner {
    display: flex;
    flex-direction: column;
    align-items: center; }
    @media screen and (min-width: 569px) {
      .mv__inner {
        margin: 0 auto; } }
  .mv__title {
    width: calc((690 / 750) * 100%);
    margin-top: 17px; }
  .mv__benefit-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: calc((99 / 750) * 100vw);
    gap: calc((33 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .mv__benefit-area {
        align-items: center;
        width: max-content;
        margin-top: 35px;
        gap: 17px; } }
  .mv__jagged-speech-bubble {
    position: absolute;
    width: calc((205 / 750) * 100vw);
    z-index: 1;
    top: calc((-66 / 750) * 100vw);
    left: calc((-5 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .mv__jagged-speech-bubble {
        width: max-content;
        top: -26px;
        left: -77px; } }
  .mv__benefit-title {
    position: relative;
    width: calc((456 / 750) * 100vw);
    z-index: 2; }
    @media screen and (min-width: 569px) {
      .mv__benefit-title {
        width: max-content; } }
  .mv__benefit-title:last-child {
    width: calc((684 / 750) * 100vw); }

/** -------------------------------------------------
* main
---------------------------------------------------- **/
.main-wrap {
  background-color: #fff000; }

@media screen and (min-width: 569px) {
  .main {
    max-width: 1280px;
    margin: 0 auto; } }

.main__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; }
  @media screen and (min-width: 569px) {
    .main__inner {
      min-width: 960px;
      padding: 0 60px;
      margin: 0 auto; } }

.main__title {
  display: block;
  width: calc((621 / 750) * 100vw);
  margin-top: calc((75 / 750) * 100vw); }
  @media screen and (min-width: 569px) {
    .main__title {
      width: max-content;
      margin-top: 50px; } }

.cover-el {
  margin-top: calc((-896 / 750) * 100vw); }
  @media screen and (min-width: 569px) {
    .cover-el {
      margin-top: -219px; } }

.search-button {
  position: relative; }
  .search-button__button {
    display: block;
    width: calc((630 / 750) * 100vw);
    padding-top: calc((345 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .search-button__button {
        width: max-content;
        padding-top: 242px; } }
  .search-button__speech-bubble {
    position: absolute;
    top: 3%;
    left: 0%;
    display: block;
    width: calc((717 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .search-button__speech-bubble {
        top: -1%;
        left: -5%;
        width: max-content; } }

.what-time {
  position: relative; }
  .what-time__list {
    display: block;
    padding-top: calc((430 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .what-time__list {
        width: max-content;
        padding-top: 280px; } }
  .what-time__item {
    display: block;
    padding-top: calc((20 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .what-time__item {
        padding-top: 0; }
        .what-time__item + .what-time__item {
          width: max-content;
          margin-top: 13px; } }
    .what-time__item--01 {
      display: block;
      width: calc((629 / 750) * 100vw); }
      @media screen and (min-width: 569px) {
        .what-time__item--01 {
          width: max-content; } }
    .what-time__item--02 {
      display: block;
      width: calc((621 / 750) * 100vw); }
      @media screen and (min-width: 569px) {
        .what-time__item--02 {
          width: max-content; } }
    .what-time__item--03 {
      display: block;
      width: calc((469 / 750) * 100vw); }
      @media screen and (min-width: 569px) {
        .what-time__item--03 {
          width: max-content; } }
  .what-time__speech-bubble {
    position: absolute;
    top: 18%;
    left: -15%;
    display: block;
    width: calc((715 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .what-time__speech-bubble {
        top: 9%;
        left: -17%;
        width: max-content; } }

.what-time-box {
  margin-top: calc((45 / 750) * 100vw); }
  @media screen and (min-width: 569px) {
    .what-time-box {
      display: flex;
      justify-content: space-between;
      width: 840px;
      margin-top: 40px; } }
  .what-time-box__item {
    display: block;
    width: calc((630 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .what-time-box__item {
        width: max-content; } }
    .what-time-box__item + .what-time-box__item {
      margin-top: calc((40 / 750) * 100vw); }
      @media screen and (min-width: 569px) {
        .what-time-box__item + .what-time-box__item {
          margin: 0; } }

.point-list {
  position: relative; }
  .point-list__icons {
    display: block;
    width: calc((630 / 750) * 100vw);
    padding-top: calc((350 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .point-list__icons {
        width: 840px;
        padding-top: 265px; } }
  .point-list__speech-bubble {
    position: absolute;
    top: 10%;
    left: 3%;
    display: block;
    width: calc((690 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .point-list__speech-bubble {
        top: 13%;
        left: 23%;
        width: max-content; } }

.procedures-wrap {
  padding: calc((80 / 750) * 100vw) 0; }
  @media screen and (min-width: 569px) {
    .procedures-wrap {
      display: flex;
      justify-content: space-between;
      width: 840px;
      padding: 50px 0; } }

.purchase-procedures {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((630 / 750) * 100vw);
  height: calc((1500 / 750) * 100vw);
  background-image: url(/sell/spuketori/images/main_list-content01_bg_sp.png);
  background-size: cover; }
  @media screen and (min-width: 569px) {
    .purchase-procedures {
      width: 400px;
      height: 953px;
      background-image: url(/sell/spuketori/images/main_list-content01_bg_pc.png); } }
  .purchase-procedures__title {
    display: block;
    width: calc((469 / 750) * 100vw);
    padding: calc((55 / 750) * 100vw) 0 calc((32 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .purchase-procedures__title {
        width: max-content;
        padding: 32px 0 21px; } }
  .purchase-procedures__items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc((1363 / 750) * 100vw);
    padding: calc((50 / 750) * 100vw) 0; }
    @media screen and (min-width: 569px) {
      .purchase-procedures__items {
        height: 868px;
        padding: 33px 0; } }
  .purchase-procedures__item {
    position: relative;
    width: calc((493 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .purchase-procedures__item {
        width: max-content; } }
  .purchase-procedures__move01 {
    position: absolute;
    top: 52%;
    left: 47%;
    display: block;
    width: calc((64 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .purchase-procedures__move01 {
        width: max-content; } }
  .purchase-procedures__move02 {
    position: absolute;
    top: 49%;
    left: 31%;
    display: block;
    width: calc((102 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .purchase-procedures__move02 {
        width: max-content; } }
  .purchase-procedures__move03 {
    position: absolute;
    top: 40%;
    left: 64%;
    display: block;
    width: calc((55 / 750) * 100vw); }
    @media screen and (min-width: 569px) {
      .purchase-procedures__move03 {
        width: max-content; } }
  .purchase-procedures__title--sp {
    display: block;
    width: calc((239 / 750) * 100vw);
    padding: calc((50 / 750) * 100vw) 0 calc((33 / 750) * 100vw); }
    .purchase-procedures__title--sp img {
      width: 100%;
      height: auto; }
  .purchase-procedures__items--sp {
    align-self: flex-start;
    padding-left: calc((50 / 750) * 100vw); }
  .purchase-procedures__item-sp--01 {
    width: calc((443 / 750) * 100vw); }
  .purchase-procedures__item-sp--02 {
    width: calc((438 / 750) * 100vw); }
  .purchase-procedures__item-sp--03 {
    width: calc((444 / 750) * 100vw); }
  .purchase-procedures__item-sp img {
    width: 100%;
    height: auto; }

.foot-btn-wrap {
  padding-top: calc(306px - 242px);
  padding-bottom: 70px; }

.foot-content-wrap {
  background-color: #fff000; }

.foot-content {
  padding: 50px 0px 40px;
  margin: 0 auto;
  color: #003893; }
  @media screen and (min-width: 569px) {
    .foot-content {
      max-width: 730px;
      padding: 50px 0px 35px; } }
  .foot-content__list {
    width: calc((630 / 750) * 100%);
    margin: 0 auto;
    letter-spacing: -1px; }
    @media screen and (min-width: 569px) {
      .foot-content__list {
        width: 100%; } }
  .foot-content__page-top-btn {
    margin-top: 60px; }
    @media screen and (min-width: 569px) {
      .foot-content__page-top-btn {
        margin-top: 30px; } }

.foot-list {
  font-size: calc((24 / 750) * 100vw);
  line-height: 1.75; }
  @media screen and (min-width: 569px) {
    .foot-list {
      font-size: 14px; } }

.page-top-btn {
  display: block;
  float: none;
  width: calc((100 / 750) * 100vw);
  padding-top: 0;
  margin: 0 auto;
  text-align: center; }
  @media screen and (min-width: 569px) {
    .page-top-btn {
      width: auto;
      margin: auto;
      font-size: 14px; } }

/** -------------------------------------------------
* sp / pc
---------------------------------------------------- **/
.pc {
  display: none; }
  @media screen and (min-width: 569px) {
    .pc {
      display: block; } }

.sp {
  display: block; }
  @media screen and (min-width: 569px) {
    .sp {
      display: none; } }