@charset "UTF-8";
/*
(C) LY Corporation
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
  v2.0 | 20110126
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  /* stylelint-disable */
  font-size: 100%;
  font: inherit;
  /* stylelint-enable */
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.l-contentHeader {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.l-contentFooter {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.l-main {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
}

.l-sub {
  padding: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
}


body {
  color: #2F2C2B;
  line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

a {
  color: #0260EA;
  text-decoration: none;
}
a:link {
  color: #0260EA;
  text-decoration: none;
}
a:hover {
  color: #0260EA;
  text-decoration: underline;
}
a:active {
  color: #0260EA;
  text-decoration: none;
}
a:visited {
  color: #0260EA;
  text-decoration: none;
}

em {
  font-style: normal;
}

.Frame {
  padding: 16px;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
}
.PageTopNav__link {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  margin: 16px 16px 16px auto;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.36);
  text-indent: -9999px;
  overflow: hidden;
}
.PageTopNav__link:before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  width: 16px;
  height: 4px;
  margin-left: -3px;
  margin-top: -7px;
  background: #FFFFFF;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 2px 2px;
          transform-origin: 2px 2px;
}
.PageTopNav__link:after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  width: 16px;
  height: 4px;
  margin-left: -3px;
  margin-top: -7px;
  background: #fff;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transform-origin: 2px 2px;
          transform-origin: 2px 2px;
}
.PageTopNav__link:hover {
  background: #6C6A69;
  background: rgba(67, 32, 24, 0.54);
}

/**
 * vw計算
 *
 * @param {Number} $size     - 基準デザイン上のサイズ（px値）
 * @param {Number} $viewport - デザインカンプの横幅 (デフォルト: 750px)
 * @param {Number} $pc_size  - PC での基準横幅 (デフォルト: 580px)
 *
 * 仕様:
 * - モバイル画面幅では $size を vw に変換して返します
 * - PC 画面幅以上では、基準比で算出した px 値を上限／下限として返します
 * - 正の値なら「min()」で上限を設ける
 * - 負の値なら「max()」で下限を設ける（マイナスマージン等に対応）
 */
/*
* パス
**************************/
/*
* 色変数
**************************/
.Header--miniapp {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-bottom: 1px solid #FE8E76;
  background: #fff;
  z-index: 1000;
}
.Header--miniapp__button {
  display: block;
  width: 36px;
  height: 36px;
  background: url(../img/icon_back.svg) center no-repeat;
}

/* ======================
  KeyVisual
   ====================== */
.KeyVisual__body {
  position: relative;
}
.KeyVisual__title {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 137.3333333333%; /* 1030/750 */
  background: url(../img/keyvisual.png) top center / 100% auto no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.KeyVisual__lead {
  display: none;
}
.KeyVisual__notes {
  font-size: 12px;
  margin: min(2.6666666667vw, 15.4666666667px) min(4vw, 23.2px) 0;
  text-align: left;
  color: #fff;
  list-style: none;
}
.KeyVisual__notesItem {
  margin-bottom: min(1.3333333333vw, 7.7333333333px);
}
.KeyVisual__notesItem a {
  color: #ffe68e;
  text-decoration: underline;
}

/* ======================
  Main
   ====================== */
.Main {
  position: relative;
  margin-top: min(8vw, 46.4px);
}
.Main__body {
  position: relative;
}
.Main__title {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 42.6666666667%; /* 320/750 */
  background: url(../img/title_main.png) top center / 100% auto no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.Main__item {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 166.6666666667%; /* 1250/750 */
  background: url(../img/img_main.png) top center / 100% auto no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.Main__itemLead,
.Main__itemSteps {
  position: absolute;
  text-indent: -9999px;
  overflow: hidden;
}
.Main__btn--campaign {
  display: block;
  position: absolute;
  z-index: 1;
  top: 42%;
  left: 73%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 30%; /* 225/750 */
  height: 0;
  padding-top: 29.4666666667%; /* 221/750 */
  background: url(../img/btn_main_fukidashi.png) top center / contain no-repeat;
  filter: brightness(1) drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2));
  transition: filter 0.3s ease, transform 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
}
.l-content .Main__btn--campaign:hover {
  filter: brightness(1.3) drop-shadow(0 5px 0 rgba(0, 0, 0, 0.2));
  transform: translateX(-50%) translateY(5px);
}
.Main__btn--qa {
  display: block;
  position: absolute;
  z-index: 1;
  top: 77%;
  left: 59%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 59.4666666667%; /* 446/750 */
  height: 0;
  padding-top: 9.3333333333%; /* 70/750 */
  background: url(../img/btn_main.png) top center / 100% auto no-repeat;
  filter: brightness(1) drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2));
  transition: filter 0.3s ease, transform 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
}
.l-content .Main__btn--qa:hover {
  filter: brightness(1.3) drop-shadow(0 5px 0 rgba(0, 0, 0, 0.2));
  transform: translateX(-50%) translateY(5px);
}
.Main__notes {
  font-size: 12px;
  margin-top: -1px;
  padding:  min(4vw, 23.2px) min(8vw, 46.4px);
  text-align: left;
  color: #7b5a60;
  list-style: none;
  background: url(../img/img_main_bg.png) bottom center / 100% auto repeat-y;
}
.Main__notesItem {
  margin-bottom: min(1.3333333333vw, 7.7333333333px);
}
.Main__notesItem:last-child {
  margin-bottom: 0;
}

/* ======================
  Campaign
   ====================== */
.Campaign {
  position: relative;
}
.Campaign__title {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 0; /* title画像なし - テキスト非表示 */
  text-indent: -9999px;
  overflow: hidden;
}
.Campaign__item {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 133.3333333333%; /* 1000/750 */
  background: url(../img/img_campaign.png) top center / 100% auto no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.Campaign__itemList,
.Campaign__period {
  position: absolute;
  text-indent: -9999px;
  overflow: hidden;
}
.Campaign__action {
  position: relative;
  z-index: 1;
  margin-top: -18%;
  padding-bottom: 5%;
  width: 100%;
  text-align: center;
}
.Campaign__button {
  display: block;
  width: 70.6666666667%; /* 530/750 */
  height: 0;
  padding-top: 12%; /* 90/750 */
  margin: 0 auto;
  background: url(../img/btn_campaign.png) top center / 100% auto no-repeat;
  filter: brightness(1) drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2));
  transition: filter 0.3s ease, transform 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
}
.l-content .Campaign__button:hover {
  filter: brightness(1.3) drop-shadow(0 5px 0 rgba(0, 0, 0, 0.2));
  transform: translateY(5px);
}
.Campaign__notes {
  position: relative;
  font-size: 12px;
  padding-bottom: min(2.6666666667vw, 15.4666666667px); /* 20/750 */
  background: url(../img/img_campaign_btm.png) bottom center / 100% auto no-repeat;
}
.Campaign__notes p {
  padding: 20px 70px;
  background: url(../img/img_campaign_bg.png) bottom center / 100% auto repeat-y;
}
.Campaign__notes p a {
  text-decoration: underline; 
}


/* ======================
  Badge
   ====================== */
.Badge {
  position: relative;
  margin-top: min(16vw, 92.8px);
}
.Badge__title {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 46.6666666667%; /* 350/750 */
  background: url(../img/title_badge.png) top center / 100% auto no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.Badge__item {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 137.3333333333%; /* 1030/750 */
  background: url(../img/img_badge.png) top center / 100% auto no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.Badge__itemLead,
.Badge__itemText {
  position: absolute;
  text-indent: -9999px;
  overflow: hidden;
}
.Badge__action {
  position: absolute;
  z-index: 1;
  bottom: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  text-align: center;
}
.Badge__button {
  display: block;
  width: 70.6666666667%; /* 530/750 */
  height: 0;
  padding-top: 12%; /* 90/750 */
  margin: 0 auto;
  background: url(../img/btn_badge.png) top center / 100% auto no-repeat;
  filter: brightness(1) drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2));
  transition: filter 0.3s ease, transform 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
}
.l-content .Badge__button:hover {
  filter: brightness(1.3) drop-shadow(0 5px 0 rgba(0, 0, 0, 0.2));
  transform: translateY(5px);
}

/* ======================
  Faq
   ====================== */
.Faq {
  background-color: #d20c30;
  margin-top: min(16vw, 92.8px);
}
.Faq__body {
  padding: min(8vw, 46.4px) 0;
}
.Faq__title {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 8%; /* 60/750 */
  background: url(../img/title_faq.png) top center / 100% auto no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.Faq__list {
  margin: 40px;
}
.Faq__item {
  border-bottom: none;
  background: url(../img/img_faq_line.png) bottom center / 100% auto no-repeat;
  padding-bottom: 20px;
  margin-bottom: min(4vw, 23.2px);
}
.Faq__item:last-child {
  background: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.Faq__question {
  position: relative;
  z-index: 0;
  padding-top: 2%;
  padding-left: 10%;
  min-height: min(13.7931034483vw, 80px);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}
.Faq__question::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: min(11.0344827586vw, 64px); /* 112/750 × scale */
  height: min(13.2019704433vw, 76.5714285714px); /* 134/750 × scale */
  background: url(../img/headline_faq_q.png) top left / contain no-repeat;
}
.Faq__answer {
  position: relative;
  z-index: 0;
  padding-top: 2%;
  padding-left: 10%;
  min-height: min(13.7931034483vw, 80px);
  font-size: 15px;
  color: #FFE3E3;
}
.Faq__answer a {
  color: #ffe68e;
  text-decoration: underline;
}
.Faq__answer::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: min(11.0344827586vw, 64px);
  height: min(13.2019704433vw, 76.5714285714px);
  background: url(../img/headline_faq_a.png) top left / contain no-repeat;
}
.Faq__text {
  color: #ffffff;
  text-align: center;
  font-size: 16px;
}
.Faq__text a {
  color: #ffe68e;
  text-decoration: underline;
}
#FaqImage {
  display: block;
  flex-basis: 100%;
  width: 100%;
  height: 0;
  padding-top: 101.3333333333%; /* 760/750 */
  margin-top: min(4vw, 23.2px);
  background: url(../img/img_faq.png) top center / 100% auto no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

/* ======================
  AppDownload
   ====================== */
.AppDownload {
  margin: min(16vw, 92.8px) 0;
  padding: min(8vw, 46.4px) 0;
}
.AppDownload__title {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 16%; /* 120/750 */
  background: url(../img/title_appdownload.png) top center / 100% auto no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

/* AppDownloadPC（デフォルト非表示、800px以上で表示） */
.AppDownloadPC {
  display: block;
  margin-top: min(4vw, 23.2px);
  padding: 20px 0;
  background: #fff;
  text-indent: -9999px;
}
.AppDownloadPC__inner {
  max-width: 530px;
  margin: 0 auto;
}
.AppDownloadPC__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.AppDownloadPC__iphone,
.AppDownloadPC__android,
.AppDownloadPC__qr {
  display: block;
  background: no-repeat center 0;
}
.AppDownloadPC__iphone:hover,
.AppDownloadPC__android:hover,
.AppDownloadPC__qr:hover {
  opacity: 0.8;
}
.AppDownloadPC__iphone {
  width: 160px;
  height: 46px;
  background-image: url(../img/download_iphone.png);
  background-size: 160px auto;
}
.AppDownloadPC__android {
  width: 161px;
  height: 47px;
  background-image: url(../img/download_android.png);
  background-size: 161px auto;
}
.AppDownloadPC__qr {
  width: 90px;
  height: 90px;
  background-size: 90px auto;
}
.AppDownloadPC__qr--iphone {
  background-image: url(../img/download_qr_iphone.png);
  margin-right: 20px;
}
.AppDownloadPC__qr--android {
  background-image: url(../img/download_qr_android.png);
}

@media (max-width: 580px) {
  .AppDownloadPC__body {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 12px;
  }
  .AppDownloadPC__qr--iphone {
    margin-right: 0;
  }
}

/* AppDownloadSP（デフォルト表示、800px以上で非表示） */
.AppDownloadSP {
  margin-top: min(4vw, 23.2px);
}
.AppDownloadSP__inner {
  width: 70.6666666667%; /* 530/750 */
  margin: 0 auto;
}
.AppDownloadSP__button {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 16.9811320755%; /* 90/530 */
  background: url(../img/btn_appdownload.png) top center / 100% auto no-repeat;
  filter: brightness(1) drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2));
  transition: filter 0.3s ease, transform 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
}
.l-content .AppDownloadSP__button:hover {
  filter: brightness(1.3) drop-shadow(0 5px 0 rgba(0, 0, 0, 0.2));
  transform: translateY(5px);
}


/* ======================
  StickyBar
   ====================== */
.StickyBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  padding: min(2.6666666667vw, 15.4666666667px) 0;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}
.StickyBar.is-visible {
  transform: translateY(0);
}
.StickyBar__inner {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.StickyBar__button {
  display: block;
  width: 84%; /* 630/750 */
  height: 0;
  padding-top: 16%; /* 120/750 */
  margin: 0 auto;
  background: url(../img/btn_sell.png) top center / 100% auto no-repeat;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2));
  transition: filter 0.3s ease, transform 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
}
.StickyBar__button:hover {
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.2));
  transform: translateY(5px);
}
/* StickyBar__body: デフォルト非表示（JS で1つだけ show） */
.StickyBar__body {
  display: none;
}

/* StickyBar PC対応 */
@media (min-width: 800px) {
  .StickyBar {
    left: auto;
    right: 24px;
    bottom: 80px;
    width: auto;
    padding: 0;
    background: none;
    transform: translateY(0);
  }
  .StickyBar__inner {
    max-width: none;
  }
  .StickyBar__button {
    width: 240px;
    height: 0;
    padding-top: 80px;
    background-image: url(../img/btn_sell_pc.png);
    background-size: 100% auto;
  }
}
@media (min-width: 1200px) {
  .StickyBar {
    right: auto;
    left: calc(50% + 336px);
  }
}

/*
* ページ全体
**************************/
body {
  position: relative;
  counter-reset: section;
}

/*
* レイアウト
**************************/
.l-content {
  display: block;
  position: relative;
  background-color: #f72e52;
  background-image: url(../img/bg_contents.png);
  background-position: top center;
  background-size: 500% auto;
  background-repeat: repeat-y;
  color: #7c7c7c;
  font-size: min(3.2vw, 18.56px);
  line-height: 1.35;
}
.l-content a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
  -webkit-transition: -webkit-filter 0.3s ease, transform 0.3s ease;
  transition: -webkit-filter 0.3s ease, transform 0.3s ease;
  transition: filter 0.3s ease, transform 0.3s ease;
  transition: filter 0.3s ease, transform 0.3s ease, -webkit-filter 0.3s ease;
}
.l-content a:hover {
  text-decoration: none;
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.l-content img {
  vertical-align: bottom;
}

.l-contentHeader {
  overflow: hidden;
}

.l-contentHeader,
.l-contentBody,
.l-contentFooter {
  max-width: 580px;
  margin: 0 auto;
}

.l-main {
  position: relative;
  padding: 0 0 1px;
}

.l-footer {
  position: relative;
  background: #fff;
}

.PageTopNav {
  display: block;
  overflow: hidden;
  background-color: #fff;
}

@media all and (max-width: 750px) {
  .PageTopNav {
    display: none;
  }
}

@media (min-width: 584px) {
  .l-content {
    background-color: #f72e52;
    background-image: url(../img/bg_contents.png);
    background-position: top center;
    background-size: 2800px auto;
    background-repeat: repeat-y;
  }
}