@charset "UTF-8";

.lp-main {
    --maxw: 460px;
    /* Change only this value to scale the entire layout proportionally. */
    --u: calc(min(100vw, var(--maxw)) / 750);
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
    font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    color: #222;
    line-height: 1.6;
    overflow: hidden;
}

.lp-main img {
    display: block;
    width: 100%;
    height: auto;
}

/* Fade in softly on scroll. JS adds .lp-fade, and .is-visible when shown.
   When JS is disabled, .lp-fade is not added, so content displays normally. */
.lp-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    will-change: opacity, transform;
}

.lp-fade.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .lp-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Heading ribbon for Present, Applicable Products, and How to Apply. Overlaps the content below. */
.lp-ribbon {
    position: relative;
    z-index: 1;
    /* Keep above the container (1) and below the header (3) to prevent overlapping the header. */
    width: 89.6%;
    /* 672/750 */
    margin: 0 auto calc(var(--u) * -65);
}

/* =========================================================
   Common buttons: icon on the left, arrow on the right, centered text, and pressed-down hover effect.
   ========================================================= */
.lp-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 999px;
    text-decoration: none;
    font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lp-btn__txt {
    display: block;
}

/* All icons and arrows are placed as background images, following the asset rule: icon/btn_arrow = background image. */
.lp-btn {
    background-repeat: no-repeat;
}

/* Entry button: green fill with left icon and right arrow as background images. */
.lp-btn-entry {
    width: calc(var(--u) * 616);
    padding: calc(var(--u) * 28) calc(var(--u) * 80);
    background-color: #06c755;
    background-image: url("../img/entry_btn_icon.png"), url("../img/btn_arrow_white.png");
    background-position: left calc(var(--u) * 24) center, right calc(var(--u) * 34) center;
    background-size: calc(var(--u) * 72) auto, calc(var(--u) * 21) auto;
    color: #fff;
    font-size: calc(var(--u) * 40);
    letter-spacing: 0.03em;
    box-shadow: 0 calc(var(--u) * 8) 0 #04893c;
}

.lp-btn-entry:hover {
    transform: translateY(calc(var(--u) * 8));
    box-shadow: 0 0 0 #04893c;
}

/* Menu button: navy border and white background, with the right arrow as a background image. */
.lp-btn-outline {
    width: calc(var(--u) * 510);
    padding: calc(var(--u) * 20) calc(var(--u) * 30);
    background-color: #fff;
    background-image: url(../img/btn_arrow_navy.png);
    background-position: right calc(var(--u) * 28) center;
    background-size: calc(var(--u) * 17) auto;
    border: calc(var(--u) * 3) solid #0e3a52;
    color: #0e3a52;
    font-size: calc(var(--u) * 32);
    box-shadow: 0 calc(var(--u) * 6) 0 #0e3a52;
}

.lp-btn-outline:hover {
    transform: translateY(calc(var(--u) * 6));
    box-shadow: 0 0 0 rgba(14, 58, 82, 0.25);
}

/* Add-friend button: green border and white background, with the right arrow as a background image. */
.lp-btn-line {
    width: calc(var(--u) * 510);
    padding: calc(var(--u) * 22) calc(var(--u) * 50);
    background-color: #fff;
    background-image: url(../img/btn_arrow_green.png);
    background-position: right calc(var(--u) * 24) center;
    background-size: calc(var(--u) * 17) auto;
    border: calc(var(--u) * 3) solid #0FA14B;
    color: #0FA14B;
    font-size: calc(var(--u) * 30);
    box-shadow: 0 calc(var(--u) * 6) 0 #0FA14B;
    margin-top: calc(var(--u) * 25);
}

.lp-btn-line:hover {
    transform: translateY(calc(var(--u) * 6));
    box-shadow: 0 0 0 rgba(6, 199, 85, 0.25);
}

/* =========================================================
   First view: MV and campaign period on black background, entry area on white background.
   ========================================================= */
.lp-fv {
    background: #000;
}

.lp-fv__mv {
    width: 100%;
}

.lp-fv__date {
    width: 100%;
}

.lp-fv__notes {
    color: #fff;
    font-size: calc(var(--u) * 22);
    line-height: 1.7;
    padding: calc(var(--u) * 17) calc(var(--u) * 30) calc(var(--u) * 60);
}

.lp-fv__notes p {
    font-family: "Noto Sans JP", sans-serif;
    /* text-indent: -1em; */
    /* padding-left: 1em; */
    margin-bottom: -0.3em;
}

.lp-entry {
    background: #fff;
    padding: calc(var(--u) * 56) calc(var(--u) * 40) calc(var(--u) * 60);
}

.lp-entry__lead {
    color: #222;
    text-align: center;
    font-size: calc(var(--u) * 32);
    font-weight: 700;
    line-height: 1.6;
    margin-top: calc(var(--u) * 24);
}

/* =========================================================
   Present section
   ========================================================= */
.lp-present {
    background-color: #dce9ff;
    background-image: url("../img/present_bg_section.png");
    background-repeat: repeat;
    background-size: 10px;
    padding-top: calc(var(--u) * 54);
}

.lp-present__inner {
    position: relative;
    z-index: 1;
}

.lp-present__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 30);
    padding-top: calc(var(--u) * 100);
}

.lp-present__card {
    width: 92%;
    position: relative;
}

area{
    display: block !important;
    position: absolute;
    left: calc(305 / 540 * 100%);
    top: calc(1180 / 2388 * 100%);
    width: calc((409 - 313) / 690 * 100%);
    height: calc((1220 - 1180) / 1548 * 100%);
    z-index: 1;
}

/* 690/750 */
/* Decoration (_bg) is set as a background image. 750x288. */
.lp-present__bottom {
    width: 100%;
    height: calc(var(--u) * 288);
    margin-top: calc(var(--u) * 16);
    background: url("../img/present_bg_bottom.png") center bottom / 100% auto no-repeat;
}

/* =========================================================
   Applicable products: blue background with a white rounded container. The ribbon overlaps the top edge of the container.
   ========================================================= */
.lp-applicable {
    background: #2e84b1;
    /* Reserve space above the ribbon and blue padding below the container so it does not connect directly to the next section. */
    padding: calc(var(--u) * 55) 0 calc(var(--u) * 64);
}

.lp-applicable__container {
    position: relative;
    z-index: 0;
    width: 91.2%;
    /* 684/750 */
    margin: 0 auto;
    background: #fff;
    border-radius: calc(var(--u) * 28);
    overflow: hidden;
    padding: calc(var(--u) * 105) calc(var(--u) * 32) 0;
}

.lp-applicable__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--u) * 28) calc(var(--u) * 24);
}

.lp-applicable__item {
    width: calc(var(--u) * 190);
}

.lp-applicable__item img {
    width: 100%;
}

.lp-applicable__name {
    text-align: center;
    font-size: calc(var(--u) * 26);
    font-weight: 700;
    color: #1a3a5c;
    margin-top: calc(var(--u) * 10);
    line-height: 1.4;
}

.lp-btn-outline {
    margin-top: calc(var(--u) * 60);
}

.lp-applicable__notes {
    font-size: calc(var(--u) * 24);
    line-height: 1.2;
    color: #333;
    margin-top: calc(var(--u) * 60);
    padding: 0 calc(var(--u) * 8);
}

.lp-applicable__notes p {
    /* text-indent: -1em; */
    /* padding-left: 1em; */
    margin-bottom: 0.2em;
    font-weight: 700;
}

/* Character illustration (_bg) is set as a background image. It spans the full width at the bottom of the container, with the character aligned to the right (686x260).
   Offset the padding so the image reaches the rounded left and right edges. */
.lp-applicable__bottom {
    width: calc(100% + var(--u) * 64);
    height: calc(var(--u) * 260);
    margin: calc(var(--u) * 30) calc(var(--u) * -32) 0;
    background: url("../img/applicable_bg_bottom.png") right bottom / 100% auto no-repeat;
}

/* =========================================================
   How to apply: cream polka-dot background, navy border, and white content area.
   ========================================================= */
.lp-apply {
    background-color: #fff9db;
    background-image: radial-gradient(circle, #ffffff calc(var(--u) * 5), transparent calc(var(--u) * 6));
    background-size: calc(var(--u) * 36) calc(var(--u) * 36);
    background-position: center top;
    padding: calc(var(--u) * 55) 0 calc(var(--u) * 80);
}

.lp-apply__inner {
    position: relative;
    width: 92.5%;
    /* 684/750 */
    margin: 0 auto;
    background: #fff;
    border: calc(var(--u) * 4) solid #0e3a52;
    border-right: calc(var(--u) * 9) solid #0e3a52;
    border-bottom: calc(var(--u) * 9) solid #0e3a52;
    border-radius: calc(var(--u) * 40);
    /* Use horizontal padding to secure inner spacing for the gray boxes (approximately 50px) and match the image width to the design. */
    padding: calc(var(--u) * 95) calc(var(--u) * 48) calc(var(--u) * 50);
}

.lp-step {
    text-align: center;
}

.lp-step + .lp-step {
    margin-top: calc(var(--u) * 44);
}

/* STEP pill images, such as STEP1 numbering. Overlap them with the top edge of the gray image boxes.
   Add img to increase specificity so it overrides .lp-main img { width: 100%; }. */
img.lp-step__label {
    position: relative;
    z-index: 2;
    width: calc(var(--u) * 182);
    margin: 0 auto calc(var(--u) * -36);
}

.lp-step__img {
    width: 100%;
}

.lp-step__img + .lp-step__img {
    margin-top: calc(var(--u) * 24);
}

.lp-step__img.snd {
    margin-top: calc(var(--u) * 76);
}

.lp-step__txt {
    font-size: calc(var(--u) * 32);
    font-weight: 700;
    line-height: 1.2;
    color: #222;
    margin-top: calc(var(--u) * 30);
}

.lp-step__note {
    font-size: calc(var(--u) * 22);
    line-height: 1.7;
    color: #444;
    text-align: left;
    /* text-indent: -1em; */
    /* padding-left: 1em; */
    margin-top: calc(var(--u) * 12);
}

.lp-step__code{
    width: 35%;
    margin: calc(var(--u) * 30) auto 0;
}

.lp-step-liner {
    height: calc(var(--u) * 4);
    background: url("../img/box_liner_bg.png") repeat-x center / auto calc(var(--u) * 4);
    margin: calc(var(--u) * 62) 0;
}
.lp-step .sp{
    display: block;
}
.lp-step .dt{
    display: none;
}
@media all and (min-width: 768px){
  .lp-step .sp{
      display: none;
  }
  .lp-step .dt{
      display: block;
  }
}

/* Accordion: examples of invalid receipts. */
.lp-accordion {
    margin-top: calc(var(--u) * 60);
    text-align: left;
}

.lp-accordion__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    background: #0F547F;
    color: #fff;
    border: none;
    border-radius: calc(var(--u) * 8);
    padding: calc(var(--u) * 30) calc(var(--u) * 20) calc(var(--u) * 25);
    font-family: inherit;
    font-size: calc(var(--u) * 32);
    font-weight: 700;
    cursor: pointer;
}

/* The toggle arrow is placed on the right as a background image (::after). Rotate it 180 degrees when opened. */
.lp-accordion__head::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--u) * 18);
    transform: translateY(-50%);
    width: calc(var(--u) * 30);
    height: calc(var(--u) * 17);
    background: url("../img/accordion_arrow.png") center / contain no-repeat;
    transition: transform 0.3s ease;
}

.lp-accordion.is-open .lp-accordion__head::after {
    transform: translateY(-50%) rotate(180deg);
}

.lp-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.lp-accordion__body-inner {
    padding-top: calc(var(--u) * 24);
}

.lp-accordion__body-inner img {
    width: 91.2%;
    margin: 0 auto;
}

/* =========================================================
   Terms and conditions
   ========================================================= */
.lp-terms {
    background: #fff;
    padding: calc(var(--u) * 70) calc(var(--u) * 30) 0;
}

.lp-heading-text {
    text-align: center;
    font-size: calc(var(--u) * 48);
    font-weight: 700;
    color: #222;
    letter-spacing: 0.05em;
}

.lp-terms__box {
    margin: calc(var(--u) * 55) auto 0;
    max-width: calc(var(--u) * 690);
    height: calc(var(--u) * 720);
    overflow-y: auto;
    border: calc(var(--u) * 1) solid #e2e2e2;
    border-radius: calc(var(--u) * 6);
    padding: calc(var(--u) * 45) calc(var(--u) * 55);
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(var(--u) * 26);
    line-height: 1.5;
    color: #333;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #b9b9b9 #f0f0f0;
    scrollbar-width: thin;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.lp-terms__box::-webkit-scrollbar {
    width: calc(var(--u) * 8);
}

.lp-terms__box::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 999px;
}

.lp-terms__box::-webkit-scrollbar-thumb {
    background: #b9b9b9;
    border-radius: 999px;
}

.lp-terms__box p{
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
}
.lp-terms__box dl{
    margin-bottom: 1.2rem;
}
.lp-terms__box dl dt{
    margin-bottom: 0.2rem;
    font-weight: 700;
    font-size: 1rem;
}
.lp-terms__box dl dd{
    font-size: 0.8rem;
}

/* =========================================================
   Contact
   ========================================================= */
.lp-contact {
    background: #fff;
    padding: calc(var(--u) * 66) calc(var(--u) * 30) calc(var(--u) * 70);
}

.lp-contact__hr {
    border: none;
    border-top: calc(var(--u) * 2) solid #222;
    max-width: calc(var(--u) * 690);
    margin: calc(var(--u) * 23) auto calc(var(--u) * 30);
}

.lp-contact__hr--dot {
    border-top: calc(var(--u) * 2) dotted #999;
}

.lp-contact__office {
    text-align: center;
    font-size: calc(var(--u) * 38);
    font-weight: 700;
    line-height: 1.5;
    color: #222;
}

.lp-contact__info {
    text-align: center;
    font-size: calc(var(--u) * 24);
    font-weight: 700;
    line-height: 1.7;
    color: #222;
    margin: calc(var(--u) * 24) 0;
}

.lp-contact__info a {
    color: #222;
    text-decoration: none;
}

.lp-contact__note {
    font-size: calc(var(--u) * 24);
    font-weight: 700;
    line-height: 1.8;
    color: #222;
    max-width: calc(var(--u) * 690);
    margin: 0 auto;
}

/* =========================================================
   Sticky floating CTA
   ========================================================= */
.lp-floating {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}
.lp-floating.teaser{
    padding: 0;
    background: #0f547f !important;
}


.lp-floating.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    background: #ffffffcf;
}

.lp-floating-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 380px;
    padding: 16px 56px;
    background-color: #06c755;
    background-image: url(../img/entry_btn_icon.png), url(../img/btn_arrow_white.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left 12px center, right 13px center;
    background-size: 40px auto, 10px auto;
    border-radius: 999px;
    color: #fff;
    font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 5vw, 26px);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lp-floating-btn__txt {
    display: block;
}

.lp-floating-btn:hover {
    transform: translateY(3px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.lp-floating-img{
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.lp-floating-img img{
    width: 100%;
    height: auto;
}


/* SP: Lift the floating CTA so it does not overlap the common bottom navigation (.mediasp_nav). */
@media screen and (max-width: 768px) {
    .lp-floating {
        bottom: 52px;
    }
}

#page-top {
    bottom: 165px !important;
    right: 10px !important;
    z-index: 1 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
    pointer-events: none;
}

#page-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

@media screen and (min-width: 768px) {
  #page-top {
      bottom: 130px !important;
  }
}

.t-footer_link_wrap{
  padding-bottom: 185px !important;
}