/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 25, 2020, 10:44:56 AM
    Author     : dininurhayati
*/
.pre-order-page .p-grid {
    margin-left: 0;
    margin-right: 0;
}
.pre-order-page h1 {
    font-size: 28px;
}
.pre-order-page::-webkit-scrollbar {
    display: none;
}
.top-preorder {
    /*margin-top: 13px;*/
    position: relative;
}
.top-preorder img.PO_decoration {
    position: absolute;
    width: 14%;
    /*left: .5%*/
}
.top-preorder img.PO_decoration.right {
    transform: scaleX(-1);
    right: 0%;
    /*left: unset;*/
}
.top-preorder img.PO_title-text {
    position: absolute;
    width: 56%;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
}
.bg_PO-1 {
    background: url(../../resources/jhia/images/bg_PO-1.jpg);
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5em 0 1em;
}
img.ttl_PO-1 {
    width: 280px;
}
.photos_PO-1 {
    padding: 0.5em 2em;
    margin: 3.5em 0;
}
.photos_PO-1 img {
    width: 30%;
    margin: 0 .5em;
}
.bg_PO-1 h1 {
    margin-top: 0;
}
.bg_PO-1 p {
    margin: 2.5em 0;
    text-align: left;
}
.inline-highlight {
    display: inline;
    position: relative;
    white-space: nowrap;
}
.inline-highlight span {
    position: relative;
}
.uline-light {
    position: absolute;
    width: 100%;
    height: 8px;
    background-color: rgba(247, 191, 56, .502);
    bottom: 1px;
    left: 3px;
}
.order-quick-txt {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
}
.order-quick-txt h3 {
    margin: 0 .8em;
}
.slice-bfr {
    border-radius: 1px;
    height: 20px;
    width: 3px;
    background-color: #959595;
    transform: rotate(-25deg);
    position: relative;
}
.slice-bfr::before {
    content: "";
    border-radius: 1px;
    height: 20px;
    width: 3px;
    background-color: #959595;
    transform: rotate(0deg);
    position: absolute;
    left: -7px;
    top: -3px;
}
.slice-aft {
    border-radius: 1px;
    height: 20px;
    width: 3px;
    background-color: #959595;
    transform: rotate(25deg);
    position: relative;
}
.slice-aft::after {
    content: "";
    border-radius: 1px;
    height: 20px;
    width: 3px;
    background-color: #959595;
    transform: rotate(0deg);
    position: absolute;
    left: 7px;
    top: -3px;
}
.btn_PO {
    position: relative;
    display: inline;
    margin: auto;
    margin-top: .7em;
}
.btn_PO img {
    width: 420px;
}
.btn_PO .ui-button::before {
    content: "かぎ針編み";
    font-family: 'ToppanBunkyuMincho Regular';
    left: 25%;
    color: #003884;
    position: absolute;
    top: 15%;
    font-size: 21px;
}
.btn_PO .ui-button {
    background-color: transparent;
    position: absolute;
    width: 413px;
    left: 7px;
    border: 1px solid #003884;
    height: 159%;
    border-radius: 0;
}
.btn_PO .ui-button::after {
    content: "";
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background-color: #003884;
    width: 15px;
    height: 13px;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
}
.btn_PO .ui-button .ui-button-text {
    color: #4e4d4e;
    position: absolute;
    top: 20%;
    right: 28%;
    font-size: 14px
}
.btn_PO .ui-button:hover {
    background-color: #003884;
}
.btn_PO .ui-button:hover .ui-button-text, .btn_PO .ui-button:hover::before {
    color: #ffffff;
}
.btn_PO .ui-button:hover::after {
    background-color: #ffffff;
}
.btn_PO2 {
    position: relative;
    display: inline;
    margin: auto;
    margin-top: .7em;
}
.btn_PO2 img {
    width: 420px;
}
.btn_PO2 .ui-button::before {
    content: "棒針編み";
    font-family: 'ToppanBunkyuMincho Regular';
    left: 25%;
    color: #003884;
    position: absolute;
    top: 15%;
    font-size: 21px;
}
.btn_PO2 .ui-button {
    background-color: transparent;
    position: absolute;
    width: 413px;
    left: 7px;
    border: 1px solid #003884;
    height: 159%;
    border-radius: 0;
}
.btn_PO2 .ui-button::after {
    content: "";
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background-color: #003884;
    width: 15px;
    height: 13px;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
}
.btn_PO2 .ui-button .ui-button-text {
    color: #4e4d4e;
    position: absolute;
    top: 20%;
    right: 28%;
    font-size: 14px
}
.btn_PO2 .ui-button:hover {
    background-color: #003884;
}
.btn_PO2 .ui-button:hover .ui-button-text, .btn_PO2 .ui-button:hover::before {
    color: #ffffff;
}
.btn_PO2 .ui-button:hover::after {
    background-color: #ffffff;
}
.bg_PO-2 {
    background-color: #f8f6f0;
    padding-bottom: 0;
}
.bg_PO-2.work-sec {
    padding: 0;
}
iframe {
    width: 100%;
}
.pre-order-page .page-triangle {
    width: 70px;
    height: 35px;
    bottom: -26px;
    background-color: #f8f6f0;
    transform: translateX(-50%);
}
.pre-order-page .buy-con {
    display: block;
    padding-bottom: 3em;
}
.order-quick-txt h2 {
    margin: 0 .8em;
    text-align: center;
}
.buy-sec .slice-bfr {
    height: 27px
}
.buy-sec .slice-bfr::before {
    height: 27px
}
.buy-sec .slice-aft {
    height: 27px
}
.buy-sec .slice-aft::after {
    height: 27px
}
.buy-sec .order-quick-txt {
    margin-bottom: 4.5em;
}
.pre-order-page .top-feature-part {
    background-color: #f7f7f7; 
}
.pre-order-page img.embroi-ttl-icon {
    margin-bottom: 0
}
.pre-order-page .price-wrap {
    padding: .5em;
}
.pre-order-page .buy-desc ul {
    padding-bottom: 5px;
}
.buy-desc{
    padding: 0 2em;
    margin: auto;
}
.pre-order-page .buy-btn .ui-button {
    margin: 2em auto auto;
}
.pre-order-page .section-ttl h2 {
    margin-bottom: 6px;
}
.pre-order-page .top-feature .top-features {
    /*margin-top: 1em;*/
}
.pre-order-page .top-feature {
    margin-top: 5em;
}
.pre-order-page .complete-flow {
    margin-top: 5em;
}
.pre-order-page .course-txt {
    margin: 3em auto 1em;
}
.pre-order-page .first-sitemap {
    margin-top: 4em;
}
.pre-order-page .partner-logo-wrap {
    /*margin-top: 1em;*/
}
.pre-order-page .top-feature-part .topsection-mg-btm {
    margin: 3em 0 4em;
}
.pre-order-page .step-course-part {
    margin-top: 3em;
}
.pre-order-page .top-faq .topsection-mg-btm {
    margin-top: 3em;
}
.pre-order-page .partner-section .topsection-mg-btm {
    margin-top: 3em;
} 
.buy-sec .order-quick-txt h2 {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.pre-order-page .step-sec .jhia-line-section {
    width: 317px;
}
img.PO_title-text2 {
    display: none;
}
.pre-order .stepbox {
    background-color: #446da5;
    display: block;
    position: relative;
    margin: 0 1em;
    width: calc(50% - 2.6em);
}
.pre-order .stepbox.stepbox5, .pre-order .stepbox.stepbox4, .pre-order .stepbox.stepbox3 {
    background-color: #003884;
    width: 41.6%;
}
.pre-order .stepbox.stepbox1, .pre-order .stepbox.stepbox2 {
    background-color: #315e9b;
    margin-bottom: 1em;
    height: 202px;
}
.pre-order .sum-section.just-step {
    width: calc(100% * 3 + -16em + 1em);
    left: -.5em;
    transform: unset;
}
.stepbox.stepbox-triangle-po:after {
    content: " ";
    position: absolute;
    right: -19px;
    top: 75px;
    border-top: 18px solid transparent;
    border-right: none;
    border-left: 20px solid #315e9b;
    border-bottom: 18px solid transparent;
}

.stepbox.stepbox-triangle-po2:after {
    content: " ";
    position: absolute;
    right: -19px;
    top: 75px;
    border-top: 18px solid transparent;
    border-right: none;
    border-left: 20px solid #003884;
    border-bottom: 18px solid transparent;
}

.pre-order.stepbox.stepbox3{
    width: 100%;
    margin-bottom: 1em;
    height: 202px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
img.label-square-yellow {
    left: -5%;
    width: 75px;
    height: 75px;
    top: -16%;
    position: absolute;
}
img.stiker-step-certif {
    position: absolute;
    width: 75px;
    height: 75px;
    top: -7%;
    right: -12%;
}
.pre-order img.sticker-step {
    position: absolute;
    width: 75px;
    height: 75px;
    top: -7%;
    right: -12%;
}
img.sticker-step2 {
    position: absolute;
    width: 75px;
    height: 75px;
    top: -5%;
    right: -8%;
}
.pre-order.stepbox.stepbox3.stepbox-triangle:after {
    border-left: 20px solid #003884;
}
.pre-order .sum-section {
    position: absolute;
    top: -35px;
    width: calc(100% * 3 + 5em + 1em);
    left: 171%;
    transform: translateX(-50%);
}
.step-ttl-preorder h3 {
    text-align: center;
    margin-bottom: auto;
    font-weight: 300;
    font-family: 'Hiragino Kaku Gothic ProN';
    word-break: keep-all;
    color: #ffffff;
}
.step-ttl-preorder h2 {
    text-align: center;
    margin: auto auto 10px;
    font-weight: 600;
    font-family: 'Hiragino Kaku Gothic ProN';
    word-break: keep-all;
    color: #ffffff;
}
.step-ttl-preorder p {
    color: #ffffff;
    font-family: 'Hiragino Kaku Gothic ProN';
    font-weight: 600;
    text-align: center;
    margin: auto auto 13px;
}
.label-step1 {
    color: #56bea5;
}
.label-step2 {
    color: #ffea00;
}
.partner-logo-preorder {
    float: none;
    margin: auto;
}
.partner-logo-img-po {
    width: 20%;
    margin: 2em 11%;
}
.course-txt2 {
    margin: 1.5em auto;
    float: left;
    text-align: justify;
    padding: 0.5em 2em;
}
.margin-course-txt2 {
    margin: -2em auto auto;
}
.pre-order-page .course-txt2 {
    margin-top: 3em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: auto;
}
.pre-order-page .course-txt2 h2 {
    font-weight: 600;
    margin-bottom: 5px;
}
.pre-order-page .course-txt2 h4 {
    margin: auto;
}
.top-preorder {
    background: url(../../resources/jhia/images/PO_banner.jpg);
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 3.5em 2em 2em;
    height:42em;
}
img.label-square {
    left: -5%;
    width: 85px;
    height: 85px;
    top: -15%;
    position: absolute;
}
.wrap-step-content{
    padding-bottom: 6px;
}
.video-course iframe {
    width: 160px;
    height: 110px;
}
.ytp-chrome-top, .ytp-chrome-bottom{
    display: none !important;
}
@media screen and (max-width: 2560px) and (min-width: 1441px) {
    .top-preorder {
        padding: 3.5em 2em 2em;
        height: 75em;
    }
}

@media screen and (max-width: 2500px) and (min-width: 1445px) {
    .top-preorder img.PO_title-text {
        width: 90%;
    }
}

/* Ipad Pro*/
@media screen and (max-width: 1024px) {
    .step-wrap{
        display: inline-flex;
        margin: 0em auto;
        position: relative;
    }
    .pre-order .sum-section.just-step {
        width: calc(89% * 3 + -16em + 1em);
    }
    .pre-order img.sticker-step {
        right: -7%;
        width: 70px;
        height: 70px;
    }
    img.sticker-step2 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: -6%;
        right: -4%;
    }
    img.label-square {
        left: -5%;
        width: 90px;
        height: 90px;
        top: -4%;
    }
    img.label-square.embroi-label {
        left: -5%;
        width: 90px;
        height: 90px;
        top: -4%;
    }
    .pre-order .stepbox.stepbox1, .pre-order .stepbox.stepbox2 {
        width: 46%;
        margin-bottom: 2em;
        height: 15em;
    }
    .pre-order .stepbox.stepbox3 {
        width: 45%;
    }
    .pre-order .stepbox.stepbox4 {
        margin-bottom: 30px;
    }
    .pre-order .stepbox.stepbox5, .pre-order .stepbox.stepbox4 {
        width: 100%;
    }
    .pre-order .step-img {
        width: 185px;
        margin-bottom: -30px;
        display: block;
        margin: 0em auto -2em;
    }
    .stepbox.stepbox-triangle-po:after {
        content: " ";
        border-left: 20px solid #315e9b;
        position: absolute;
        right: 50%;
        top: 94%;
        border-top: 18px solid transparent;
        border-right: none;
        transform: rotate(90deg)translateY(-31%);
        border-bottom: 18px solid transparent;
    }
    .stepbox.stepbox-triangle-po2:after {
        content: " ";
        border-left: 20px solid #003884;
        position: absolute;
        right: 50%;
        top: 94%;
        border-top: 18px solid transparent;
        border-right: none;
        border-bottom: 18px solid transparent;
        transform: rotate(90deg)translateY(-31%);
    }
    .pre-order.stepbox.stepbox4.stepbox-triangle:after{
        border-left: 25px solid #003884;
        content: " ";
        position: absolute;
        right: 50%;
        top: 94%;
        border-top: 24px solid transparent;
        border-right: none;
        border-bottom: 24px solid transparent;
        transform: rotate(90deg)translateY(-31%);
    }
    .margin-course-txt2 {
        margin: -1em auto auto;
    }
}

@media screen and (max-width: 1033px) and (min-width: 1025px) {
    .pre-order .stepbox.stepbox5, .pre-order .stepbox.stepbox4, .pre-order .stepbox.stepbox3 {
        width: 26.4%;
    }
    .wrap-step-content {
        padding-bottom: 3em;
    }
    .pre-order img.sticker-step {
        width: 55px;
        height: 55px;
        right: -12%;
    }
}

/* Ipad */
@media screen and (max-width: 768px) {
    .top-preorder {
        margin-top: -3px;
    }
    .top-preorder img.PO_title-text {
        width: 95%;
        top: 17%;
    }
    .btn_PO2 .ui-button {
        top: -35px;
    }
    .btn_PO2 img {
        margin-top: 15px;
    }
    .pre-order .sum-section.just-step {
        width: calc(100% * 3 + -18em + 1em);
        transform: unset;
    }
    .pre-order .sum-section {
        width: calc(70% * 3 + 15em + 1em);
        left: -.5em;
        transform: unset;
    }
    .pre-order-page img.sticker-step {
        right: -7%;
        width: 70px;
        height: 70px;
    }
    .pre-order-page img.sticker-step2 {
        right: -10%;
    }
    .pre-order-page .step-wrap {
        padding: 0 .5em;
    }
    .pre-order-page .dip-application {
        padding-right: 0.5em;
        padding-left: 0.5em;
    }
    .pre-order .stepbox.stepbox1, .pre-order .stepbox.stepbox2 {
        width: 45%;
        margin-bottom: 3em;
    }
    .pre-order .stepbox.stepbox3 {
        width: 45%;
    }
    .stepbox.stepbox-triangle-po:after {
        right: 139px;
        top: 200px;
        border-bottom: 18px solid transparent;
        transform: rotate(90deg)translateY(-31%);
    }
}

/* Smarthphone */
@media screen and (max-width: 40.063em) {
    .buy-desc{
        padding: 0;
    }
    .pre-order .stepbox.stepbox1, .pre-order .stepbox.stepbox2 {
        height: auto;
    }
    .pre-order#stepbox1{
        order:1;
    }
    .pre-order#stepbox2{
        order:3;
    }
    .pre-order#stepbox3{
        order:2;
    }
    .pre-order#stepbox4{
        order:4;
    }

    .preorder-text-btm{
        text-align: center!important;
    }
    img.label-square.certif-sq-label {
        left: -5%;
        width: 90px;
        height: 90px;
        top: -4%;
    }
    img.label-square.intro-label, img.label-square-yellow {
        left: -5%;
        width: 50px;
        height: 50px;
        top: -14%;
    }

    .pre-order img.sticker-step {
        right: -15%;
        width: 60px;
        height: 60px;
        top: -15px;
    }

    .top-preorder {
        background: url(../../resources/jhia/images/PO_banner.jpg);
        height: auto;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 1.5em 0em 2em;
    }
    img.PO_banner {
        display: none;
    }
    .photos_PO-1 {
        padding: 0.5em 0em;
        margin: 1.5em 0;
    }
    .btn_PO .ui-button::before {
        left: 13%;
        top: 10%;
        font-size: 18px;
    }
    .btn_PO .ui-button {
        width: 413px;
        left: 7px;
        height: 33px;
    }
    .btn_PO .ui-button .ui-button-text {
        top: 3%;
        right: 22%;
    }
    .btn_PO2 .ui-button::before {
        left: 13%;
        top: 9%;
        font-size: 18px;
    }
    .btn_PO2 .ui-button {
        width: 413px;
        left: 7px;
        height: 32px;
        top: -16px;
    }
    .btn_PO2 .ui-button .ui-button-text {
        top: 3%;
        right: 22%;
    }
    .top-preorder img.PO_title-text {
        display: none!important;
    }
    .top-preorder img.PO_title-text2 {
        width: 100%;
        display: block!important;
    }
    .photos_PO-1 img {
        width: 43%;
    }
    .pre-order-page h1 {
        font-size: 25px;
    }
    .pre-order-page .page-triangle {
        left: 50%;
    }
    .top-preorder {
        margin-top: 16%;
    }
    .btn_PO img {
        width: 279px;
    }
    .btn_PO .ui-button {
        width: 275px;
    }
    .btn_PO2 img {
        width: 278px;
        margin-top: 15px;
    }
    .btn_PO2 .ui-button {
        width: 275px;
    }
    .bg_PO-1 {
        background-position: -16em center;
        padding: 3.5em 0 3em;
    }
    .pre-order-page .work-wrap {
        margin-bottom: 1em;
    }
    .pre-order-page .page-triangle {
        width: 50px;
        height: 24px;
        bottom: -16px;
    }
    .pre-order-page .buy-con {
        padding-bottom: 4em;
    }
    .pre-order-page .pay-con {
        padding: 4.5em 0 2.5em;
    }
    .pre-order-page .top-feature-part .topsection-mg-btm {
        margin: 2em 0 1em;
    }
    .pre-order-page .step-course-part {
        margin: 2em 0 3.5em;
    }
    .pre-order-page .step-sec {
        padding: 2em 0 0.5em;
    }
    .pre-order-page .top-faq .topsection-mg-btm {
        margin: 2.5em 0 3.5em;
    }
    .pre-order-page .partner-section .topsection-mg-btm {
        margin: 3em 0;
    }
    .buy-sec .order-quick-txt {
        margin-bottom: 3.5em;
    }
    .pre-order-page .top-feature {
        margin-top: 3.5em;
    }
    .pre-order-page .course-txt {
        margin: 0;
    }
    .pre-order-page .course-txt:first-child {
        margin: 3em auto 1em;
    }
    .pre-order-page .top-feature .top-features {
        margin: 1em auto;
        float: none;
        padding: 0;
    }
    .pre-order-page .complete-flow {
        margin: 3em auto 0;
        float: none;
        padding: 0;
    }
    .pre-order .sum-section.just-step {
        width: calc(100% * 3 + -7em + 1em);
        left: -.5em;
        transform: unset;
    }
    .pre-order .sum-section {
        width: calc(11% * 3 + 15em + 1em);
        left: -.5em;
        transform: unset;
    }
    .pre-order-page img.sticker-step {
        right: -20%;
        width: 60px;
        height: 60px;
    }
    .pre-order-page img.sticker-step2 {
        right: -5%;
        width: 90px;
        height: 90px;
    }
    .pre-order-page .step-wrap {
        padding: 0 .5em;
        margin: 0em auto 1em;
    }
    .pre-order-page .step-wrap {
        padding: 0 .5em;
        margin: 0em auto 1em;
    }
    .pre-order-page .dip-application {
        padding-right: 0.5em;
        padding-left: 0.5em;
        padding-top: 0;
    }
    .step-img {
        width: 185px;
        margin-bottom: -30px;
        display: block;
        margin: 0em auto -2em;
    }
    .wrap-step-content {
        padding-bottom: 3em;
    }
    .pre-order .stepbox.stepbox1, .pre-order .stepbox.stepbox2 {
        width: 41%;
        margin-bottom: 2em;
        height: 13.5em;
    }
    .pre-order .stepbox.stepbox5, .pre-order .stepbox.stepbox4, .pre-order .stepbox.stepbox3 {
        width: 100%;
        margin-top: auto;
        margin-bottom: 2em;
        margin-left: auto;
        margin-right: auto;
    }

    .pre-order .stepbox.stepbox3 {
        width: 41% !important;
        margin-bottom: 2em;
        height: auto;
    }

    .stepbox.stepbox-triangle-po2:after{
        top: auto;
        transform: rotate(90deg)translateY(-31%);
        bottom: -27px;
        right: 50%;

    }

    .stepbox.stepbox-triangle-po:after {
        content: " ";
        position: absolute;
        right: 65px;
        top: 180px;
        border-top: 18px solid transparent;
        border-right: none;
        border-left: 20px solid #315e9b;
        border-bottom: 18px solid transparent;
        transform: rotate(90deg)translateY(-31%);
    }
    .stepbox.stepbox-triangle-po2:after {
        top: unset;
        transform: rotate(90deg)translateY(-31%);
        bottom: -27px;
        right: 50%;
    }
    .course-txt2 {
        padding: 0;
        margin: 0 auto 1.5em;
    }
    .margin-course-txt2 {
        margin: -3em auto 1em;
    }
    .partner-logo-img-po {
        width: 28%;
        margin: 2em 8%;
    }
    img.stiker-step-certif {
        position: absolute;
        width: 60px;
        height: 60px;
        top: -7%;
        right: -15%;
    }
    img.sticker-step2 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: -6%;
        right: -7%;
    }
}

@media screen and (max-width: 360px) {
    .pre-order .stepbox.stepbox1, .pre-order .stepbox.stepbox2 {
        width: 40%;
        margin-bottom: 2em;
        height: 14.5em;
    }
    .stepbox.stepbox-triangle-po:after {
        top: 195px;
    }
}

@media screen and (max-width: 320px) {
    .x-price {
        width: 65px;
        height: 0px;
        bottom: 20px;
        right: -5px;
    }
    .x-price2 {
        width: 65px;
        height: 0px;
        bottom: 20px;
        right: -5px;
    }
    .pre-order .sum-section {
        width: calc(11% * 3 + 13em + 1em);
    }
    .pre-order .stepbox.stepbox1, .pre-order .stepbox.stepbox2 {
        width: 37%;
    }
    .pre-order .sum-section.just-step {
        width: calc(100% * 3 + -5em + 1em);
        left: -.5em;
        transform: unset;
    }
    .stepbox.stepbox-triangle-po:after {
        content: " ";
        position: absolute;
        right: 50px;
        top: 159px;
        border-top: 18px solid transparent;
        border-right: none;
        border-left: 20px solid #315e9b;
        border-bottom: 18px solid transparent;
        transform: rotate(90deg)translateY(-31%);
    }
    .pre-order img.sticker-step {
        right: -8%;
        width: 60px;
        height: 60px;
        top: -9%;
    }
    .pre-order-page img.sticker-step2 {
        right: -7%;
        width: 100px;
        height: 100px;
        top: -25px;
    }
}
@media screen and (max-width: 280px) {
    img.ttl_PO-1 {
        width: 250px;
    }
    .photos_PO-1 {
        padding: 0.5em 0em;
        margin: 3.5em 0;
    }
    .pre-order-page h1 {
        font-size: 16px;
    }
    .btn_PO img {
        width: 240px;
    }
    .btn_PO .ui-button {
        width: 236px;
        left: 7px;
        height: 28px;
    }
    .btn_PO .ui-button::before {
        left: 13%;
        top: 3%;
        font-size: 16px;
    }
    .btn_PO .ui-button .ui-button-text {
        right: 20%;
        font-size: 12px;
    }
    .btn_PO2 img {
        width: 238px;
    }
    .btn_PO2 .ui-button {
        width: 235px;
        left: 7px;
        height: 26px;
        top: -10px;
    }
    .btn_PO2 .ui-button::before {
        left: 19%;
        top: 3%;
        font-size: 16px;
    }
    .btn_PO2 .ui-button .ui-button-text {
        top: 0%;
        right: 20%;
    }
}