:root { --glay: #636363; }

.breadcrumb-content { padding: 5px 0;
  @media screen and (min-width: 768px) { padding: 10px 0; } }



.kome { margin-bottom: 20px; font-size: 11px; color: var(--glay); }
.expired { color: red; text-align: center; font-weight: 500; background-color: #FAE0E0; padding: 10px; }
.ctr { text-align: center; }
.ctrsp { @media screen and (max-width: 769px) { text-align: center; } }
.rigpc { @media screen and (min-width: 768px) { text-align: right; margin-right: 50px; } }

.main428 { font-size: 100%; padding-bottom: 0px; 
        --t-xs: clamp(0.688rem, 0.094vw + 0.665rem, 0.75rem); /* 11px → 約12px */
         --t-sm: clamp(0.813rem, 0.094vw + 0.790rem, 0.875rem); /* 13px → 約14px */
         --t-base: clamp(0.875rem, 0.2vw + 0.838rem, 1rem); /* 14px → 約16px */
         --t-md: clamp(0.875rem, 0.3vw + 0.819rem, 1.125rem); /* 14px → 約18px */
         --t-lg: clamp(1.125rem, 0.3vw + 1.069rem, 1.375rem); /* 18px → 約22px */
         --t-xl: clamp(1.25rem, 0.4vw + 1.169rem, 1.563rem); /* 20px → 約25px */
        --t-2xl: clamp(1.5rem, 0.5vw + 1.4rem, 1.875rem); /* 24px → 約30px */
        background: url("../../../../../images/pages/f-static/campaign/428/428_bg_001.jpg"); background-repeat: repeat; background-size: 400px; padding-bottom: 30px;
                @media screen and (min-width: 768px) { background-size: 500px; } }


.main428 .mvsection { width: 100%; 
        @media screen and (min-width: 768px) { height: 650px; }

        & .mvsection_ttlbox { width: 88%; max-width: 1100px; margin: auto; position: relative;
                @media screen and (min-width: 768px) { background: url("../../../../../images/pages/f-static/campaign/428/428_ttlimg.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: 0px 40px; width: 100%; height: 600px; } }

        & .ttlimg { width: 88%; padding-top: 30px; margin: auto;
                @media screen and (min-width: 768px) { width: 500px; display: block; padding-top: 70px; margin-left: 310px; } }

        & p { font-size: var(--t-md); line-height: 1.8; letter-spacing: 0.12em; font-weight: 500; margin-top: 20px; padding-bottom: 20px; width: 80%; margin-left: 30px; text-align: center;
                @media screen and (min-width: 768px) { width: 490px; display: block; padding-top: 20px; margin-left: 330px; margin-top: 0; } }

        & .deco1 { position: absolute;
                @media screen and (max-width: 769px) { width: 74%; top: 63vw; left: 0px; }
                @media screen and (min-width: 768px) { width: 550px; top: 360px; left: 130px; } }

        & .coution { font-size: var(--t-xs); margin: 0 30px; line-height: 1.5; font-weight: 400; text-align: left;
                @media screen and (min-width: 768px) { position: absolute; width: 480px; top: 480px; left: 290px; }
                @media screen and (max-width: 769px) { width: 86%; } }

        & .tagimg { position: absolute; top: 0px; right: -20px; width: 23%;
                @media screen and (min-width: 768px) { top: 0px; right: 160px; width: 120px; } }

        & .ttlimgsp { width: 90%; margin-top: 20px; display: block; margin-left: auto; margin-right: auto;
                @media screen and (min-width: 768px) { display: none; } } }


.main428 .cvsection { width: 100%; margin-top: 70px; margin-bottom: 20px; 
        @media screen and (min-width: 768px) { margin-top: 50px; margin-bottom: 50px; padding-bottom: 50px; }

        & .cvsection_itembox { width: 88%; max-width: 1100px; margin: auto; position: relative; background: #fff; padding: 20px 0px; border-radius: 10px;
                @media screen and (min-width: 768px) { width: 100%; }

        & .ttlimg { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 94%;
                @media screen and (min-width: 768px) { width: 550px; top: -80px; } }

        & .ribbon { position: absolute; width: 230px; top: -50px; left: -45px;
                @media screen and (max-width: 768px) { display: none; } }

        & .checkarea { width: 80%; margin-top: 20px; padding: 20px 0px; position: relative; margin-left: auto; margin-right: auto;
                @media (max-width: 768px) { width:86%; }

                & .icon { width: 33%; margin: auto; display: block; margin-bottom: 10px; margin-top: -50px;
                        @media (min-width: 768px) { width: 110px; margin-top: -50px; } }

                & .point-label-list { display: grid; grid-template-columns: 1fr; gap: 16px;
                        @media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

                & .point-label {
                        --label-bg: #FBF3F1;
                        --label-border: #ffebf2;
                        --label-accent: #ED6C9B;
                        --label-text: #595757;

                        display: flex; align-items: center; gap: 12px; padding: 8px 15px; background: var(--label-bg); border: 1px solid var(--label-border); border-radius: 15px; color: var(--label-accent);

                        & .point-label__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--label-accent); }
                        & .point-label__text { font-size: var(--t-sm); font-weight: bold; color: var(--label-text); line-height: 1.4; }

                        &.-black { --label-bg: #eaeaea; --label-border: #d8d8d8; --label-accent: #afafaf; }
                        &.-green { --label-bg: #F0F7EF; --label-border: #cff1d1; --label-accent: #6FAE5E; } } }

        & .infobox {
                @media screen and (min-width: 768px) { display: flex; align-items: center; width: 100%; margin-top: 20px; }

                & .infobox_item, & .infobox_item02 {
                        & .namelogosp { width: 100%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 0px; 
                                @media screen and (min-width: 768px) { display: none; } }
                        & .sstxtsp { margin-left: 25px; margin-bottom: 0px; font-size: var(--t-xs); font-weight: 600; color: #939393; margin-top: 0px; letter-spacing: 0.19em; text-align: center; 
                                @media screen and (min-width: 768px) { display: none; } } }

                & .infobox_item { width: 86%; margin-top: 40px;
                        @media screen and (min-width: 768px) { width: 400px; margin-left: 50px; }
                        @media screen and (max-width: 768px) { margin-left: auto; margin-right: auto; margin-top: 20px; }
                        & img { width: 100%; margin-top: 20px; @media screen and (min-width: 768px) { width: 400px; margin-top: 0px; margin-bottom: 0px; } } }

                & .infobox_item02 { width: 100%; margin-top: 20px;
                        @media screen and (min-width: 768px) { width: 270px; margin-left: 100px; margin-top: 0px; }
                        @media screen and (max-width: 768px) { margin-left: auto; margin-right: auto; margin-top: 10px; }
                        & .cv-img { width: 60%; margin-top: 0px; margin-left: auto; margin-right: auto; display: block; @media screen and (min-width: 768px) { width: 300px; margin-top: 0px; margin-bottom: 0px; } } }

                & .infobox_text, & .infobox_text02 {
                        & .namelogo { width: 550px; @media screen and (max-width: 768px) { display: none; } }
                        & .sstxt { font-size: var(--t-xs); font-weight: 600; color: #939393; margin-top: 0px; margin-bottom: 10px; letter-spacing: 0.19em; @media screen and (max-width: 768px) { display: none; } }
                        & .ttl { font-size: var(--t-lg); font-weight: 600; margin-top: 10px; margin-bottom: 10px; letter-spacing: 0.12em; --label-text: #dc58a1; color: var(--label-text);
                                &.-green { --label-text: #188960; color: var(--label-text); }
                                &.-black { --label-text: #5b5c5c; color: var(--label-text); } }
                        & .pointicon { text-align: right; margin-top: 10px; margin-bottom: 10px; margin-right: 10px;
                                @media screen and (max-width: 768px) { margin-left: auto; margin-right: auto; text-align: center; display: block; }
                                & .icn { width: 120px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; @media screen and (max-width: 768px) { width: 35%; text-align: center; } } }
                        & .txt { font-size: var(--t-sm); line-height: 1.8; letter-spacing: 0.12em; font-weight: 500; margin-top: 15px; padding-bottom: 2px; width: var(--txt-width, 100%); text-align: left; @media screen and (max-width: 768px) { width: 100%; } } }

                & .infobox_text { width: 500px; margin-top: 40px; margin-left: 50px; text-align: left;
                        @media screen and (max-width: 768px) { width: 80%; margin-left: auto; margin-right: auto; } }

                & .infobox_text02 { width: 560px; margin-top: 40px; margin-left: 100px; text-align: left; position: relative; --txt-width: 400px;
                        @media screen and (max-width: 768px) { width: 80%; margin-left: auto; margin-right: auto; margin-top: 10px; }
                        & .pointicon { @media screen and (min-width: 768px) { position: absolute; right: 0px; bottom: 240px; }
                                & .icn { @media screen and (max-width: 768px) { margin-right: 32%; margin-left:34% } } } } }

        & .cvbox { margin: auto; margin-top: 20px; margin-bottom: 20px; width: 100%; text-align: center; margin-left: 20px; margin-right: 20px;
                @media screen and (min-width: 768px) { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 0px; margin-bottom: 20px; gap: 20px; margin-left: 0px; margin-right: 0px; }

                & .cvbox_item { width: 90%; margin-top: 20px; margin-bottom: 20px; padding: 10px 25px; border-radius: 10px; text-align: center;
                        --label-bg: #faf0f6;
                        background: var(--label-bg);
                        &.-blue { --label-bg: #f3eef7; background: var(--label-bg); }
                        @media screen and (min-width: 768px) { width: 480px; margin-top: 40px; margin-bottom: 00px; } } }

        & .cvbox2 { background: #f3f1f1; padding: 15px 30px; border-radius: 10px; margin-top: 20px; margin-bottom: 20px; width: 100%; margin-left: auto; margin-right: auto;
                @media screen and (min-width: 768px) { margin-top: 40px; margin-bottom: 40px; } }

        & .rev { flex-direction: row-reverse;
                & .infobox_item {
                        @media screen and (min-width: 768px) { width: 400px; margin-right: 50px; } } }

        & .features {
                --label-bg: #f1f8e6;
                background: var(--label-bg); padding: 20px 0px; border-radius: 10px; margin-top: 20px; margin-bottom: 20px; width: 90%; margin-left: auto; margin-right: auto;
                @media screen and (min-width: 768px) { display: flex; gap: 0px; align-items: center; justify-content: center; }

                &.-black { --label-bg: #f5f5f6; background: var(--label-bg); }
                & img { width: 100%; margin-top: 20px;
                        @media screen and (min-width: 768px) { width: 410px; margin-top: 0px; margin-bottom: 0px; } } }

        & .komearea{font-size:var(--t-xs); margin:auto; width:90%; padding-bottom:20px; } } }


.specbox {width: 100%; margin-left: 0px; position: relative;

        & .name { font-size: clamp(16px, 3vw, 18px); font-weight: 600; letter-spacing: 0.09em; margin-bottom: 0px; margin-top: 2px; line-height: 1.8; text-align: center;
                @media (min-width: 768px) { text-align: left; margin-top: 20px; } }

        & .spec { font-size: clamp(13px, 3.5vw, 14px); letter-spacing: 0.11em; font-weight: 500; }
        
        & .price { font-size: clamp(21px, 4vw, 23px); font-weight: 700; text-align: center;
                @media (min-width: 768px) { text-align: right; letter-spacing: 0.1em; margin-top: 20px; margin-bottom: 20px; margin-left: 100px; } }

        & .pricem { font-size: clamp(13px, 3.5vw, 14px); font-weight: 500; text-align: center;
                @media (min-width: 768px) { text-align: right; margin-top: 10px; margin-left: 0px; } }

        & .txtprice { font-weight: 700; font-size: clamp(19px, 4vw, 22px); }

        & .limiticon { font-size: min(2.5vw, 13px); color: #fb5c7a; padding: 2px 10px; border: #fb5c7a 2px solid; display: inline; border-radius: 8px; font-weight: 600; letter-spacing: 0.15em;
                @media (max-width: 767px) { text-align: center; margin: auto; } }

        & .ctrsp {
                @media (max-width: 767px) { text-align: center; } } }


hr { border-top: 1px dotted #aaa; }


.btn_style { width: 230px; height: 45px !important; background: #444; letter-spacing: 0.15em; border: 1px solid #444; box-sizing: border-box; transition: all 0.3s 0s ease-in-out; text-align: center; font-size: 15px;
  & .mini { width: 100%; height: 45px;
    & > a, & > span { font-size: 15px; }
    & > a span, & > span span { padding-left: 35px; } }
  & .off { background: #ccc; border: 1px solid #ccc; }
  &:not(.btn_style.off):hover { background: #fff; }
  &:not(.btn_style.off):hover > a, &:not(.btn_style.off):hover > span { color: #444; }
  & > a, & > span { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; color: #fff; font-weight: bold; font-size: 17px; }
  & > a span, & > span span { position: relative; padding-left: 40px; text-align: center;
    &::before { display: block; content: ''; width: 23px; height: 17px; background: url("/assets/images/pages/f-static/campaign/icon_cart.png") left top no-repeat; background-size: 23px 17px; position: absolute; top: 50%; left: 0; transform: translate3d(0, -50%, 0); } }
  &:not(.btn_style.off):hover > a span::before, &:not(.btn_style.off):hover > span span::before { background: url("/assets/images/pages/f-static/campaign/icon_cart_b.png") left top no-repeat; background-size: 23px 17px; } }

@media (min-width: 768px) {
  .sponly { display: none !important; }
  .btn_wrap { width: 200px; box-sizing: border-box; margin: 15px auto; margin-left: 200px; }
  .btn_wrap2 { width: 200px; box-sizing: border-box; margin: 15px auto; margin-left: 280px; }
  .btn_wrap_top { position: absolute; width: 180px; margin-top: 30px; box-sizing: border-box; } }

@media (max-width: 768.98px) {
  .pconly { display: none; }
  .btn_style { height: 12vw; width: 100%;
    & .mini { height: 12vw;
      & > a, & > span { font-size: 0.9rem; }
      & > a span, & > span span { padding-left: 40px; } }
    & > a, & > span { font-size: 0.9rem; }
    & > a span, & > span span { padding-left: 32px; }
    & > a span::before, & > span span::before { width: 20px; height: 15px; background: url("/assets/images/pages/f-static/campaign/icon_cart.png") left top no-repeat; background-size: 20px 15px; }
    &:not(.btn_style.off):hover > a span::before, &:not(.btn_style.off):hover > span span::before { background: url("/assets/images/pages/f-static/campaign/icon_cart_b.png") left top no-repeat; background-size: 20px 15px; } }
  .btn_wrap { margin-top: 10px; width: 80%; margin-left: 10%; } }