/* CSS Remedy */
*,::after,::before{box-sizing:border-box}html{line-sizing:normal}body{margin:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.17rem}h4{font-size:1rem}h5{font-size:.83rem}h6{font-size:.67rem}h1{margin:.67em 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle;max-width:100%}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
h1,h2,h3,h4,p {margin:0;}
img {width:100%;height:auto;}
a {color: #0000ff;text-decoration: underline;}
a:visited, a:active {color:#0000ff;text-decoration: underline;}
a.link-bold {font-weight:700;}

body {
    margin: 0;
    background-image: url(/images/app_form/ponta1sagase/bg.png?0);
    background-size: 1200px;
    background-position: center -140px;
    background-color: #ff8b00;
    font-family: 'Noto Sans JP', sans-serif, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
.text-rounded {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 600;
}

@media screen and (max-width: 500px) {
    body {
        background-size: 240%;
    }
}
@media screen and (min-width: 1200px) {
    body {
        background-size: 100%;
    }
}

/* コンテンツ部分が画面の高さ以下になったときでもlowerブロックが画面下にくっつく。上付きブロックをupper、下付きブロックをlowerとして、それらをwrapperで包む */
.wrapper-column {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.upper-column {
    margin: 0 auto;
}
.lower-column {
    margin-top: auto;
}

.main-block {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 500px;
}

.content-box {
    margin: 0 4%;
    background-color: #ffffff;
    padding: 5%;
    border-radius: 20px;
}
.top-box {
    margin-top: 12%;
    text-align: center;
}

a.regular-button {
    display: block;
    padding: 12px;
    background-color: #0076d6;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

.keyword-title {
    margin: 3%;
}
.keyword-block {
    position: relative;
    margin: 100% 6% 3%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 4%;
}
.keyword-block::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    margin: auto;
    height: 14px;
    width: 28px;
    border-top: 14px solid #ffffff;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 0px;
}
.start-button {
    margin: 5% 10% 1%;
}
.start-button-active {
    opacity: 0;
    animation: sbtn 700ms 0s linear 1 forwards;
}
@keyframes sbtn {
    0% {opacity: 0; filter: brightness(1.0); transform: scale(1.0); animation-timing-function: cubic-bezier(0.13, 0.38, 0.58, 1);}
    12% {opacity: 1; filter: brightness(1.5); transform: scale(1.1); animation-timing-function: cubic-bezier(0.46, 0.05, 0.58, 0.98);}
    30% {opacity: 1; filter: brightness(1.4); transform: scale(0.95); animation-timing-function: cubic-bezier(0.44, 0.11, 0.91, 0.49);}
    45% {opacity: 1; filter: brightness(1.3); transform: scale(1.0); animation-timing-function: cubic-bezier(0.13, 0.38, 0.58, 1);}
    100% {opacity: 1; filter: brightness(1.0); transform: scale(1.0); animation-timing-function: linear;}
}
.keyword-input-title {
    color: #ff8b00;
    text-align: center;
    font-size: 20px;
}
.keyword-input-block {
    display: flex;
    margin-top: 5%;
    align-items: center;
    border: 1px solid #999999;
    background-color: #999999;
}
.keyword-input-label {
    width: 4em;
    color: #ffffff;
    text-align: center;
    font-size: clamp(18px, 4.4vw, 22px);
}
.keyword-input {
    width: calc(100% - 3em);
}
.keyword-input input {
    width: 100%;
    padding: 0.3em 0.5em;
    border: none;
    font-size: clamp(18px, 5.2vw, 26px);
    text-align: center;
    border-radius: 0;
}
.keyword-input input::placeholder {
    color: #c4c4c4;
}
.keyword-input input:disabled {
    background-color: #ffffff;
}
.keyword-alert {
    margin-top: 5px;
    margin-bottom: -10px;
    color:#0076d6;
    text-align: center;
    font-size: 16px;
}
.keyword-notice {
    margin-bottom: 5%;
    color: #ffffff;
    font-size: clamp(13px, 3.2vw, 16px);
    font-weight: 700;
    text-align: center;
}
.keyword-notice a, .keyword-notice a:active, .keyword-notice a:visited {
    color: #ffffff;
    text-decoration: underline;
}

.roulette-block {
    position: relative;
    margin: -14% 4% 3%;
}
.roulette-edge {
    position: absolute;
    z-index: 10;
}
.roulette-center {
    position: absolute;
    z-index: 5;
    width: 30%;
    left: 0;
    right: 0;
    margin: 35% auto 0;
}
.roulette-disc {
    position: absolute;
    z-index: 2;
}
.roulette-disc-blur {
    position: absolute;
    z-index: 1;
}

.scrollLocked {
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
 }
.modal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  box-sizing: border-box;
  padding: 0px 25px;
  z-index: 500;
  overflow: auto;
  transition: opacity 300ms;
}
.fadeout{
  opacity: 0;
}
.fadein{
  opacity: 1;
}
.modal-pad {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
}
.modal .inner {
    position: relative;
    margin: auto;
    width: 85%;
    max-width: 510px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px 0 10px;
    text-align: center;
    line-height: 1.8;
}
.terms-body {
    height: 430px;
    margin: 5%;
    padding: 3%;
    overflow-y: auto;
    font-size: 14px;
    border: 1px solid #bebebe;
    text-align: left;
    line-height: 1.4;
}
.terms-body a {
    color: #0076d6;
}
.terms-ponta {
    width: 155px;
    margin: 50px auto 35px;
}
.terms-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #ff8b00;
}
a.terms-top-close {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
}
.terms-label {
    font-weight: 700;
    margin-top: 1em;
}
.terms-close-block {
    margin: 5% 5% 7%;
}
.keyword-arrow-block {
    width: 40px;
    margin: 8% auto 0;
}

/* すいすて */
.ss-wrap {
    width: 100vw;
    padding-bottom: 6%;
    background-image: url(/images/app_form/ponta1sagase/bg2.png);
    background-size: 1200px;
    background-position: center top;
    background-color: #e8d3ca;
}
@media screen and (max-width: 500px) {
    ss-wrap {
        background-size: 240%;
    }
}
@media screen and (min-width: 1200px) {
    ss-wrap {
        background-size: 100%;
    }
}
.ss-block {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 500px;
}
.ss-header {
    margin: 14% 1% 1%;
    transform: translate(0, -64%);
}
.ss-title {
    margin: -22% 2% 0;
}
.ss-catch {
    margin: 5% 10% 0;
}
.ss-count-block {
    margin: 2% 5% 2%;
    padding: 8px;
    background-image: url(/images/app_form/ponta1sagase/ss-bg.png);
    border-radius: 15px;
}
.ss-count-block-inner {
    background-color: #eeded7;
    border: 2px solid #ffffff;
    border-radius: 7px;
}
.ss-count-title {
    width: 60%;
    margin: 4% auto;
}
.ss-count {
    position: relative;
    display: flex;
    gap: 4px;
    justify-content: center;
    width: 80%;
    margin: 0 auto 15px;
}
.ss-date {
    margin: 0 auto 2.5%;
    font-size: 14px;
    text-align: center;
}
.ss-achiv-block {
    margin: 2% 3% 5% 4.5%;
}
.ss-achiv {
    margin-bottom: 0.3%;
}
.ss-number {
    background-color: #ffffff;
}
.ss-number img {
    width: 68%;
    margin: 20% auto;
}
.ss-comma-1 {
    position: absolute;
    width: 5%;
    bottom: -18%;
    left: 11%;
}
.ss-comma-2 {
    position: absolute;
    width: 5%;
    bottom: -18%;
    right: 40%;
}
.ss-kai {
    position: absolute;
    bottom: -19%;
    right: -6%;
    width: 9%;
}

.footer-ponta {
    width: 43%;
    max-width: 540px;
    margin: 4% auto 8%;
}
.error-page .footer-ponta {
    display: none;
}
footer {
    padding: 20px;
    text-align: center;
    background-color: #ffffff;
    font-size: 12px;
    line-height: 1.8;
}
.with-float footer {
    padding-bottom: clamp(180px, 50%, 250px);
}
footer a, footer a:active, footer a:visited {
    color: #000000;
    text-decoration: underline;
}
.result-page .footer-pad {
    height: 140vw;
    max-height: 700px;
}

.prize-category {
    position: relative;
    display: inline-block;
    margin-top: 4%;
    padding: 0 1em;
    color: #0076d6;
    text-align: center;
    font-size: clamp(18px, 5.2vw, 26px);
}
.prize-category::before, .prize-category::after {
    content: '';
    position: absolute;
    background-color: #0076d6;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    margin: auto;
    width: 3px;
    height: 30px;
    border-radius: 3px;
    transform: rotate(-20deg);
}
.prize-category::after {
    left: auto;
    right: 0;
    transform: rotate(20deg);
}
.prize-name {
    color: #fa8200;
    text-align: center;
    font-size: clamp(20px, 6.0vw, 30px);
}
.serial-block {
    position: relative;
    margin: 5% 0 2%;
    background-color: #f4f4f4;
    padding: 1em 2em;
    font-size: 20px;
    text-align: center;
}
.serial-number {
    font-size: clamp(20px, 5.6vw, 28px);
}
.serial-copy {
    position: absolute;
    width: 19px;
    height: 22px;
    top: 0;
    bottom: 0;
    right: 19px;
    margin: auto;
}
.prize-date {
    font-size: 16px;
    text-align: center;
}
.prize-info {
    margin-top: 4%;
    font-size: clamp(14px, 4.0vw, 20px);
    color: #0278dc;
    font-weight: 700;
    text-align: center;
}
.prize-notice-bold {
    margin-top: 2%;
    font-size: clamp(11px, 2.8vw, 14px);
    font-weight: 700;
    text-align: center;
}
.prize-notice {
    margin-top: 3%;
    font-size: clamp(11px, 2.8vw, 14px);
    text-align: center;
}
.barcode-block {
    width: 90%;
    margin: 7% auto 0;
}
.barcode-block svg {
    width: 100%;
}
.prize-form-button-block {
    margin: 5% 0 10%;
}

.ponta-entry-block {
    margin-top: 7%;
    border: 2px solid #bdbdbd;
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
}
.ponta-entry-title {
    padding: 20px;
    color: #fa8200;
    font-size: 22px;
    background-color: #fffbdd;
}
.ponta-entry-title img {
    width: 60%;
    margin: auto;
}
.ponta-entry-lead {
    padding: 6% 0 0;
    font-size: clamp(14px, 4.0vw, 20px);
    font-weight: 700;
}
.ponta-entry-notice {
    margin-top: 1%;
    font-size: 14px;
}
.ponta-entry-button-block {
    margin: 6%;
}

.line-block {
    width: 100%;
    padding: 6% 0 0;
}
.line-label {
    width: 50%;
}
.line-block a {
    display: block;
    background-color: #ffffff;
    border: 3px solid #0972d8;
    border-radius: 50px;
    margin: -3% 4% 0;
    padding: 2%;
}
.line-block a img {
    width: 65%;
    margin: auto;
}

.dc-title {
    margin: 5% 0 0;
    text-align: center;
    font-size: 32px;
    font-size: clamp(24px, 6.4vw, 32px);
    color: #fa8200;
}
.dc-title span {
    font-size: clamp(20px, 5.2vw, 26px);
    padding-left: 0.1em;
}
.dc-button-block {
    width: 100%;
    margin: 3% auto 10%;
}
.dc-label {
    z-index: 1;
    position: relative;
    width: 65%;
    margin-left: -10%;
}
.dc-thumb-block {
    width: 48%;
    display: block;
    margin: -5% auto 0;
    border: 1px solid #000000;
}

.wchance-box {
    margin-top: 8%;
}
.wchance-inner-block {
    margin-top: -17%;
    padding: 10% 0 10px;
    background-color: #fffbdd;
    border-radius: 10px;
}
.wchance-header {
    position: relative;
    margin-top: -18%;
    margin-left: -9%;
}
.wchance-lead{
    color: #0278dc;
    text-align: center;
    font-size: 20px;
}
.wchance-main-block {
    margin: 10px;
    border-radius: 10px;
}
.wchance-date-title {
    color: #0278dc;
    text-align: center;
    font-size: 14px;
}
.wchance-date {
    text-align: center;
    font-size: 14px;
}
.wchance-button-block {
    margin: 10px;
}

.result-label {
    width: 55%;
    margin-top: -15%;
    margin-left: -9%;
}
.prize-title {
    position: relative;
    width: 60%;
    margin: auto;
}
.prize-a-image {
    position: absolute;
    bottom: -1%;
    right: -34%;
    width: 65%;
}
.prize-b-image {
    position: absolute;
    bottom: -1%;
    right: -37%;
    width: 68%;
}
.prize-c-image {
    position: absolute;
    bottom: -1%;
    left: -27%;
    width: 153%;
}
.prize-name-text {
    margin: 4% 0;
    color: #ff8b00;
    font-size: clamp(18px, 5.6vw, 28px);
    text-align: center;
}

.howto-block {
    background-color: #ffffff;
    margin: 8% 4% 0;
    border-radius: 20px;
    padding: 4%;
}
.howto-body {
    height: 6em;
    font-size: 13px;
}
.howto-label {
    margin: 0 0 2%;
    color: #0076d6;
    font-weight: 700;
    font-size: 16px;
}
.howto-list {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}
.shokai-block {
    margin-bottom: 10%;
}
.shokai-list {
    font-size: 13px;
}
.howto-list2 {
    list-style: none;
    padding-left: 1em;
}
.howto-list li, .howto-list2 li {
    text-indent: -1em;
    padding-left: 1em;
}
.howto-more {
    position: relative;
    padding-right: 12px;
    text-align: right;
    color: #0076d6;
    font-size: 13px;
}
.howto-more::before {
    content: '続きを表示する';
}
.accordion-active .howto-more::before {
    content: '閉じる';
}
.howto-more::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 7px;
    height: 7px;
    border-right: 1px solid #0076d6;
    border-bottom: 1px solid #0076d6;
    transform: rotate(45deg);
}
.accordion-active .howto-more::after {
    top: 5px;
    transform: rotate(225deg);
}

/* ルーレット モーション */
.main-block-result {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    padding-bottom: 460px;
    pointer-events: none;
}
.result-block {
    display: none;
    opacity: 0;
    transform: translate(0, 5%);
}
.result-block.active {
    display: block;
    animation: result-show 300ms 0ms cubic-bezier(0.1, 0.17, 0.58, 0.97) 1 forwards;
}
@keyframes result-show {
    0% {opacity: 0;transform: translate(0, 100px);}
    100% {opacity: 1;transform: translate(0, 0);}
}

.roulette-prize-title {
    position: absolute;
    z-index: 5;
    width: 87%;
    margin: 6.5% auto;
    left: 0;
    right: 0;
    opacity: 0;
    animation: roulette-prize 1700ms 0s linear 1 forwards;
}
@keyframes roulette-prize {
    0% {opacity: 0; transform: scale(0.5);}
    95% {opacity: 0; transform: scale(0.5);}
    96% {opacity: 1; transform: scale(0.5);}
    98% {opacity: 1; transform: scale(1.1);}
    100% {opacity: 1; transform: scale(1.0);}
}

.main-block-result .roulette-disc-blur {
    animation: roulette 1700ms 0s linear 1 forwards;
}
@keyframes roulette {
    0% {transform: rotate(0);}
    2.3% {transform: rotate(360deg);}
    9% {transform: rotate(720deg);}
    20% {transform: rotate(1080deg);}
    36% {transform: rotate(1440deg);}
    56% {transform: rotate(1800deg);}
    81% {transform: rotate(2160deg);}
    100% {transform: rotate(2320deg);}
    /* 0% {transform: rotate(0);}
    1% {transform: rotate(360deg);}
    4% {transform: rotate(720deg);}
    9% {transform: rotate(1080deg);}
    16% {transform: rotate(1440deg);}
    25% {transform: rotate(1800deg);}
    36% {transform: rotate(2160deg);}
    49% {transform: rotate(2520deg);}
    64% {transform: rotate(2880deg);}
    81% {transform: rotate(3240deg);}
    100% {transform: rotate(3600deg);} */
}
.main-block-result.hide {
    animation: roulette-hide 100ms 0ms linear 1 forwards;
}
@keyframes roulette-hide {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

/* 紙吹雪 */
.confetti {
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    animation: confetti 1700ms 0s linear 1 forwards;
}
@keyframes confetti {
    0% {opacity: 0;}
    99% {opacity: 0;}
    100% {opacity: 1;}
}
.confetti.hide {
    opacity: 1;
    animation: confetti-hide 500ms 1000ms linear 1 forwards;
}
@keyframes confetti-hide {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.confetti div {
    position: absolute;
    width: 100%;
    height: 100%;
}

.confetti span {
    position: absolute;
    top: -10%;
    left: 0;
    width: 50px;
    height: 25px;
    background: #FFF;
}

/* add animation */
.confetti span:nth-child(4n+1) {animation: confetti-anim-1 0s 0s linear infinite;}
.confetti span:nth-child(4n+2) {animation: confetti-anim-2 0s 0s linear infinite;}
.confetti span:nth-child(4n+3) {animation: confetti-anim-3 0s 0s linear infinite;}
.confetti span:nth-child(4n+4) {animation: confetti-anim-4 0s 0s linear infinite;}

/* side position */
.confetti span:nth-child(1) {left: 0%;}
.confetti span:nth-child(2) {left: 2%;}
.confetti span:nth-child(3) {left: 4%;}
.confetti span:nth-child(4) {left: 6%;}
.confetti span:nth-child(5) {left: 8%;}
.confetti span:nth-child(6) {left: 10%;}
.confetti span:nth-child(7) {left: 12%;}
.confetti span:nth-child(8) {left: 14%;}
.confetti span:nth-child(9) {left: 16%;}
.confetti span:nth-child(10) {left: 18%;}
.confetti span:nth-child(11) {left: 20%;}
.confetti span:nth-child(12) {left: 22%;}
.confetti span:nth-child(13) {left: 24%;}
.confetti span:nth-child(14) {left: 26%;}
.confetti span:nth-child(15) {left: 28%;}
.confetti span:nth-child(16) {left: 30%;}
.confetti span:nth-child(17) {left: 32%;}
.confetti span:nth-child(18) {left: 34%;}
.confetti span:nth-child(19) {left: 36%;}
.confetti span:nth-child(20) {left: 38%;}
.confetti span:nth-child(21) {left: 40%;}
.confetti span:nth-child(22) {left: 42%;}
.confetti span:nth-child(23) {left: 44%;}
.confetti span:nth-child(24) {left: 46%;}
.confetti span:nth-child(25) {left: 48%;}
.confetti span:nth-child(26) {left: 50%;}
.confetti span:nth-child(27) {left: 52%;}
.confetti span:nth-child(28) {left: 54%;}
.confetti span:nth-child(29) {left: 56%;}
.confetti span:nth-child(30) {left: 58%;}
.confetti span:nth-child(31) {left: 60%;}
.confetti span:nth-child(32) {left: 62%;}
.confetti span:nth-child(33) {left: 64%;}
.confetti span:nth-child(34) {left: 66%;}
.confetti span:nth-child(35) {left: 68%;}
.confetti span:nth-child(36) {left: 70%;}
.confetti span:nth-child(37) {left: 72%;}
.confetti span:nth-child(38) {left: 74%;}
.confetti span:nth-child(39) {left: 76%;}
.confetti span:nth-child(40) {left: 78%;}
.confetti span:nth-child(41) {left: 80%;}
.confetti span:nth-child(42) {left: 82%;}
.confetti span:nth-child(43) {left: 84%;}
.confetti span:nth-child(44) {left: 86%;}
.confetti span:nth-child(45) {left: 88%;}
.confetti span:nth-child(46) {left: 90%;}
.confetti span:nth-child(47) {left: 92%;}
.confetti span:nth-child(48) {left: 94%;}
.confetti span:nth-child(49) {left: 96%;}
.confetti span:nth-child(50) {left: 98%;}

/* size */
.confetti span:nth-child(6n+1) {
    width: 10px;
    height: 6px;
}
.confetti span:nth-child(6n+2) {
    width: 19px;
    height: 18px;
}
.confetti span:nth-child(6n+3) {
    width: 7px;
    height: 13px;
}
.confetti span:nth-child(6n+4) {
    width: 14px;
    height: 8px;
}
.confetti span:nth-child(6n+5) {
    width: 22px;
    height: 10px;
}
.confetti span:nth-child(6n+6) {
    width: 9px;
    height: 11px;
}

/* colors */
.confetti span {background: #ffffff;}

/* animation-duration */
.confetti span:nth-child(7n+1) {animation-duration: 2007ms;}
.confetti span:nth-child(7n+2) {animation-duration: 3031ms;}
.confetti span:nth-child(7n+3) {animation-duration: 4010ms;}
.confetti span:nth-child(7n+4) {animation-duration: 4508ms;}
.confetti span:nth-child(7n+5) {animation-duration: 2527ms;}
.confetti span:nth-child(7n+6) {animation-duration: 3504ms;}
.confetti span:nth-child(7n+7) {animation-duration: 3303ms;}


/* animation-delay */
.confetti span:nth-child(16n+1) {animation-delay: 0ms;}
.confetti span:nth-child(17n+2) {animation-delay: 1004ms;}
.confetti span:nth-child(17n+3) {animation-delay: 3507ms;}
.confetti span:nth-child(17n+4) {animation-delay: 1500ms;}
.confetti span:nth-child(17n+5) {animation-delay: 4001ms;}
.confetti span:nth-child(17n+6) {animation-delay: 3755ms;}
.confetti span:nth-child(17n+7) {animation-delay: 508ms;}
.confetti span:nth-child(17n+8) {animation-delay: 2500ms;}
.confetti span:nth-child(17n+9) {animation-delay: 2002ms;}
.confetti span:nth-child(17n+10) {animation-delay: 2259ms;}
.confetti span:nth-child(16n+11) {animation-delay: 253ms;}
.confetti span:nth-child(17n+12) {animation-delay: 1758ms;}
.confetti span:nth-child(17n+13) {animation-delay: 2754ms;}
.confetti span:nth-child(17n+14) {animation-delay: 1251ms;}
.confetti span:nth-child(17n+15) {animation-delay: 3006ms;}
.confetti span:nth-child(17n+16) {animation-delay: 755ms;}
.confetti span:nth-child(17n+17) {animation-delay: 3253ms;}

@keyframes confetti-anim-1 {
    0% {
        top: -10%;
        transform: translateX(0) rotateX(0) rotateY(0);
    }

    100% {
        top: 100%;
        transform: translateX(20vw) rotateX(180deg) rotateY(360deg);
    }
}

@keyframes confetti-anim-2 {
    0% {
        top: -10%;
        transform: translateX(0) rotateX(20deg) rotateY(-100deg);
    }

    100% {
        top: 100%;
        transform: translateX(-20vw) rotateX(200deg) rotateY(-460deg);
    }
}
@keyframes confetti-anim-3 {
    0% {
        top: -10%;
        transform: translateX(0) rotateX(-40deg) rotateY(50deg);
    }

    100% {
        top: 100%;
        transform: translateX(10vw) rotateX(-220deg) rotateY(410deg);
    }
}

@keyframes confetti-anim-4 {
    0% {
        top: -10%;
        transform: translateX(0) rotateX(60deg) rotateY(-50deg);
    }

    100% {
        top: 100%;
        transform: translateX(-10vw) rotateX(240deg) rotateY(310deg);
    }
}

/* エラーページ */
.header-logo {
    width: 68%;
    padding: 6% 0 5%;
    margin: auto;
    transform: translate(13%, 0);
}
.error-box {
    margin-top: 0;
}
.error-title {
    margin-top: 10%;
    color: #ff8b00;
    font-size: clamp(18px, 4.8vw, 24px);
    text-align: center;
}
.error-message {
    margin: 10% 0 15%;
    font-size: clamp(14px, 3.6vw, 18px);
    text-align: center;
}
.error-back-button-block {
    margin: 5% 0% 2%;
}

/* Pontaフロート */
.float-wrap {
    position: fixed;
    max-width: 500px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 250;
    opacity: 0; /* ルーレットが回らないページでは不要 */
    transform: translateY(200px); /* ルーレットが回らないページでは不要 */
}
.float-wrap.active {
    animation: float-show 600ms 400ms cubic-bezier(0.14, 0.51, 0.58, 1) 1 forwards;
}
@keyframes float-show {
    0% {opacity: 0;transform: translateY(200px);}
    100% {opacity: 1;transform: translateY(0);}
}
.float-block {
    position: relative;
    margin: 2%;
    padding: 6% 0 3%;
    background-color: #fffbdd;
    border: 2px solid #0076d6;
    border-radius: 10px;
    background-image: url(/images/app_form/ponta1sagase/float-ponta-bg.png);
    background-position: right bottom;
    background-size: 21%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.float-block-1 {
    position: relative;
    margin: 2%;
    padding: 3% 0 2%;
    background-color: #fffbdd;
    border: 2px solid #0076d6;
    border-radius: 10px;
    background-image: url(/images/app_form/ponta1sagase/float-ponta-bg.png);
    background-position: right bottom;
    background-size: 21%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.float-block-2 {
    position: relative;
    margin: 2%;
    padding: 3% 0 2%;
    background-color: #fffbdd;
    border: 2px solid #0076d6;
    border-radius: 10px;
    background-image: url(/images/app_form/ponta1sagase/float-ponta-bg.png);
    background-position: right bottom;
    background-size: 21%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.float-block a {
    display: block;
    width: 86%;
    margin: auto;
}
.float-block-inner-1 {
    display: flex;
    width: 93%;
    margin-left: 1%;
}
.float-block-2 a {
    display: block;
    width: 85%;
    margin: auto;
}
.float-block-inner-1 a {
    display: block;
    width: 50%;
}
.float-block-catch-1 {
    width: 50%;
    margin: 0 auto 2%;
    transform: translateX(3%);
}
.float-block-catch-2 {
    width: 60%;
    margin: 0 auto 1%;
    transform: translateX(8%);
}
.float-ponta-block {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 27%;
    transform: translate(40%, 26%);
    animation: float-ponta-ponta 4000ms 0ms linear infinite;
}
.float-ponta-block-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 23%;
    transform: translate(40%, 26%);
    animation: float-ponta-ponta 4000ms 0ms linear infinite;
}
@keyframes float-ponta-ponta {
    0% {transform: translate(40%, 26%);}
    70% {transform: translate(40%, 26%);animation-timing-function: cubic-bezier(0.14, 0.51, 0.58, 1);}
    75% {transform: translate(30%, 10%);animation-timing-function: cubic-bezier(0.48, 0.02, 0.95, 0.51);}
    80% {transform: translate(41%, 27%);animation-timing-function: cubic-bezier(0.14, 0.51, 0.58, 1);}
    85% {transform: translate(37%, 23%);animation-timing-function: cubic-bezier(0.48, 0.02, 0.95, 0.51);}
    88% {transform: translate(40%, 26%);}
    100% {transform: translate(40%, 26%);}
}
.float-ponta-baloon {
    position: absolute;
    top: -20%;
    right: 0.5%;
    width: 50%;
    z-index: 10;
}
.float-ponta-baloon-1 {
    position: absolute;
    top: -16%;
    right: 0.5%;
    width: 22%;
    z-index: 10;
}
.float-ponta-bomb {
    position: absolute;
    top: -28%;
    left: 0.5%;
    width: 26.5%;
    z-index: 15;
}
.float-ponta-bomb-1 {
    position: absolute;
    top: -22%;
    left: 0.5%;
    width: 26.5%;
    z-index: 15;
}
.float-ponta-bomb-text {
    position: absolute;
    top: 16.5%;
    bottom: 0;
    left: 0;
    right: 0;
    width: 61%;
    margin: auto;
    z-index: 20;
}
.float-ponta-bomb-edge {
    animation: float-ponta-bomb-bg 10000ms 0ms linear infinite;
}
@keyframes float-ponta-bomb-bg {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.float-ponta-button {
    animation: float-ponta-button 4000ms 0ms linear infinite;
}
@keyframes float-ponta-button {
    0% {transform: scale(100%);}
    87% {transform: scale(100%);animation-timing-function: cubic-bezier(0.13, 0.38, 0.58, 1);}
    91% {transform: scale(115%);animation-timing-function: cubic-bezier(0.46, 0.05, 0.58, 0.98);}
    96% {transform: scale(98%);animation-timing-function: cubic-bezier(0.13, 0.38, 0.58, 1);}
    100% {transform: scale(100%);}
}

/* ローソンブロック */
.lawson-box {
    margin-top: 5%;
}
.lawson-inner-block {
    padding: 2%;
    background-color: #fffbdd;
    border-radius: 10px;
}
.lawson-ponta {
    width: 40%;
    margin: auto;
}
.lawson-catch {
    width: 85%;
    margin: 6% auto;
}
.lawson-logo {
    width: 72%;
    margin: 2% auto 4%;
}
.lawson-text-block {
    padding: 7% 0 5%;
    background-color: #ffffff;
    text-align: center;
}
.lawson-coffee {
    margin: auto;
    width: 90%;
}
.lawson-coffee-text {
    margin: 5% auto;
    width: 92%;
}
.lawson-text-1 {
    margin-top: 1.2em;
    font-size: clamp(14px, 3.2vw, 18px);
}
.lawson-text-3 {
    margin-top: 0.5em;
    color: #0076d6;
    font-size: clamp(14px, 3.2vw, 18px);
    line-height: 1.3;
}
.lawson-text-3 span {
    font-size: clamp(18px, 4.6vw, 23px);
}
.lawson-text-4 {
    margin-top: 1.2em;
    font-size: clamp(12px, 2.8vw, 16px);
}