@charset "UTF-8";


/*common*/
body {
    width: 100%;
    height: 100vh;
}

.l-main {
    width: 100%;
    padding: 0;
    margin-top: 55px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.l-header--popup {
    position: fixed;
    z-index: 99999;
    width: 100%;
    min-width: initial;
    margin-bottom: 0;
    background: #fff;
    box-shadow: 0 5px 0 #002262;
}

.l-header--popup .lc-logo {
    width: 100%;
    padding-left: 1%;
}

.l-footerWrap {
    min-width: initial;
    padding: 0;
    margin: 0 auto;
    background-color: transparent;
}

.l-content .pc_view {
    display: none;
}

.l-content .color--brightBlue {
    color: #025fae;
}

.l-content .btn--w450,
.l-content .btn--w500 {
    width: 75vw;
    padding: 2.5vw 0 2vw;
    font-size: 3.75vw;
}

.l-content .m-btnWin--conversion.btn--w450::after,
.l-content .m-btnWin--conversion.btn--w500::after {
    background-size: contain;
    width: 4vw;
    height: 4vw;
    margin-left: 2vw;
    vertical-align: -0.75vw;
}

.l-content .m-btn--down.btn--w450::before {
    background-size: contain;
    width: 4vw;
    height: 4vw;
}

/*モーダル部分*/
.fancybox-wrap {
    position: fixed !important;
    width: 95vw !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.fancybox-skin {
    padding: 10% 2% 5% !important;
}

.fancybox-inner {
    width: 100% !important;
    height: 65vw !important;
}

/* headerNavi */
.l-content .headerNavi {
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    top: 65px;
    left: -100vw;
    z-index: 99998;
    width: min(95vw, 380px);
    transition: left .5s;
}

.l-content .headerNavi.isActive {
    left: max(-85vw, -340px);
}

.l-content .headerNavi.isOpen {
    left: 0;
}

.l-content .headerNavi .ancList {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(85vw, 340px);
    padding: 0 min(2.5vw, 10px);
    border: 1px solid #025fae;
    border-top: none;
    background: #fff;
    border-bottom-right-radius: min(1.25vw, 5px);
}

.l-content .headerNavi .ancList .item {
    width: 100%;
}

.l-content .headerNavi .ancList .item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: min(4vw, 16px) 0;
    background: url("/pr/cp_tokuraku_new/img/icon_anc_arrow.png") no-repeat center left 0;
    background-size: min(5vw, 20px) min(5vw, 20px);
    color: #333;
    text-decoration: none;
}

.l-content .headerNavi .ancList .item a .txt {
    padding-left: min(7.5vw, 30px);
    font-size: min(3.25vw, 13px);
    font-weight: bold;
    text-align: center;
}

.l-content .headerNavi .ancList .item a .logo img {
    width: min(32vw, 128px);
}

.l-content .headerNavi button {
    display: flex;
    align-items: center;
    width: 100%;
    height: min(10vw, 40px);
    padding: 0;
    border: none;
    border-radius: 0 min(1.25vw, 5vw) min(1.25vw, 5vw) 0;
    background-color: #025fae;
    font-size: min(3.75vw, 13px);
    color: #fff;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

.l-content .headerNavi button .txt {
    width: min(85vw, 340px);
}

.l-content .headerNavi button .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.l-content .headerNavi button .arrow img {
    width: min(8vw, 32px);
    transform: rotate(-90deg);
}

.l-content .headerNavi.isOpen button .arrow img {
    transform: rotate(90deg);
}

/** stickyBnr **/
.l-content .stickyBnr {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s, visibility .5s;
}

.l-content .stickyBnr.isActive {
    opacity: 1;
    visibility: visible;
}


.l-content .stickyBnr a {
    display: flex;
    width: 100%;
    border: 1.25vw solid #0098b8;
    background: #fff;
    text-decoration: none;
}

.l-content .stickyBnr a .title {
    width: 35vw;
    padding: 1.5vw 0 1vw;
    background: #0098b8;
    color: #fff;
    font-size: 4.25vw;
    font-weight: bold;
    text-align: center;
}

.l-content .stickyBnr a .detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    position: relative;
    padding-right: 5.75vw;
}

.l-content .stickyBnr a .detail::after {
    position: absolute;
    top: 50%;
    right: 1vw;
    border-top: 3.5vw solid transparent;
    border-bottom: 3.5vw solid transparent;
    border-left: 3.75vw solid #0098b8;
    transform: translateY(-50%);
    content: "";
}

.l-content .stickyBnr a .detail .catchcopy_01 {
    display: block;
    color: #025fae;
    font-size: 3vw;
    font-weight: bold;
    text-align: center;
}

.l-content .stickyBnr .detail .catchcopy_01 .alphabet {
    font-size: 3.75vw;
    margin-right: -1vw;
}

.l-content .stickyBnr .detail .catchcopy_01 .num {
    font-size: 4.25vw;
}

.l-content .stickyBnr .detail .catchcopy_01 .unit {
    font-size: 3.25vw;
}

.l-content .stickyBnr .detail .catchcopy_02 {
    display: block;
    color: #333;
    font-size: 3vw;
    font-weight: bold;
    text-align: center;
}

.l-content .stickyBnr .detail .catchcopy_02 strong {
    position: relative;
    z-index: 1;
}

.l-content .stickyBnr .detail .catchcopy_02 strong::after {
    position: absolute;
    bottom: 0.25vw;
    left: -0.75vw;
    z-index: -1;
    width: 100%;
    height: 1.75vw;
    border-radius: 3px;
    background: #fc0;
    opacity: 0.5;
    content: "";
}

.l-content .stickyBnr .detail .catchcopy_02 .num {
    font-size: 4.25vw;
    margin-left: -1vw;
}

/** h1 **/
.l-content h1 {
    display: flex;
    justify-content: center;
    font-size: 6vw;
    margin-top: 6vw;
}

.l-content h1 .catchcopy {
    color: #025fae;
    margin-right: 6vw;
}

.l-content h1 .catchcopy span {
    font-size: 8vw;
}

.l-content h1 .title {
    color: #ffd420;
    font-size: 8vw;
}

/** aboutMisumi **/
.l-content .aboutMisumi {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 28.5vw 0 10.5vw;
    margin: 0 auto;
    background: url("/pr/cp_tokuraku_new/img/about_misumi_bg_sp.png") no-repeat -30.25vw 2vw;
    background-size: 160.5vw;
}

.l-content .aboutMisumi>h2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    width: 38.5vw;
    height: 38.5vw;
    padding-top: 3.5vw;
    border: 2.5vw solid #002262;
    border-radius: 50%;
    color: #025fae;
    font-size: 6.5vw;
    line-height: 1.25;
    transform: rotate(-14deg);
}

.l-content .aboutMisumi>h2>span {
    font-size: 8vw;
}

.l-content .aboutMisumi .wrap {
    box-sizing: border-box;
    width: 90vw;
    padding: 6.25vw 0 7.5vw;
    border: 1vw solid #dedede;
    margin-top: 7.5vw;
    background: rgba(255, 255, 255, 0.95);
}

.l-content .aboutMisumi .txt {
    text-align: center;
    margin-top: 1.25vw;
    color: #002262;
    font-size: 3.25vw;
    line-height: 6vw;
}

.l-content .aboutMisumi .note {
    text-align: center;
    margin-top: 2.5vw;
    color: #002262;
    font-size: 3vw;
    line-height: 6vw;
}

.l-content .aboutMisumi .btnWrap {
    text-align: center;
    margin-top: 1.25vw;
}

/* pcMockup */
.l-content .pcMockup {
    width: 85vw;
    max-width: 841px;
    margin: 0 auto;
}

.l-content .pcMockup img {
    width: 100%;
}

/** navi **/
.l-content .navi {
    margin-top: 5vw;
}

.l-content .navi .catchcopy {
    position: relative;
    font-size: 3.75vw;
    text-align: center;
}

.l-content .navi .catchcopy .icon {
    position: absolute;
    bottom: -1vw;
    right: 2vw;
    width: 15vw;
    height: 15vw;
}

.l-content .navi .ancList {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5vw;
    margin-top: 3vw;
    background: #025fae;
}

.l-content .navi .ancList .item {
    box-sizing: border-box;
    width: 90vw;
    padding: 0 2.5vw;
    background: #fff;
}

.l-content .navi .ancList .item:first-child {
    border-radius: 1.25vw 1.25vw 0 0;
}

.l-content .navi .ancList .item:last-child {
    border-radius: 0 0 1.25vw 1.25vw;
}

.l-content .navi .ancList .item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 4vw 0;
    background: url("/pr/cp_tokuraku_new/img/icon_anc_arrow.png") no-repeat center left 0;
    background-size: 5vw 5vw;
    color: #333;
    text-decoration: none;
}

.l-content .navi .ancList .item:not(:first-child) a {
    border-top: 1px solid #ccc;
}

.l-content .navi .ancList .item a .txt {
    padding-left: 7.5vw;
    font-size: 3.25vw;
    font-weight: bold;
    text-align: center;
}

.l-content .navi .ancList .item a .logo {
    width: 32vw;
    max-width: 200px;
}

/** cta_01 **/
.l-content .cta_01 {
    margin: 5vw 0 4vw;
}

.l-content .cta_01 .catchcopy {
    font-size: 3.75vw;
    text-align: center;
}

.l-content .cta_01 .btnWrap {
    text-align: center;
    margin-top: 2vw;
}

/** campaign **/
.l-content .campaign {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
    width: 90vw;
    padding: 9vw 0 4vw;
    border: 2.5vw solid #0098b8;
    margin: 16vw auto 0;
}

.l-content .campaign .mark {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15.5vw;
    left: -6vw;
    box-sizing: border-box;
    width: 25vw;
    height: 25vw;
    border: 1.25vw solid #0098b8;
    border-radius: 50%;
    background: #fff;
}

.l-content .campaign .mark span {
    padding-top: 2vw;
    font-size: 3.25vw;
    font-weight: bold;
    transform: rotate(-15deg);
}

.l-content .campaign .title {
    color: #025fae;
    font-size: 6vw;
    line-height: 9vw;
    font-weight: bold;
    text-align: center;
}

.l-content .campaign .title .num {
    font-size: 7.5vw;
}

.l-content .campaign .catchcopy {
    margin-top: 3vw;
    font-size: 4.25vw;
    line-height: 7.5vw;
    font-weight: bold;
    text-align: center;
}

.l-content .campaign .catchcopy .num {
    font-size: 7.5vw;
}

.l-content .campaign .catchcopy strong {
    position: relative;
    z-index: 1;
}

.l-content .campaign .catchcopy strong::after {
    position: absolute;
    bottom: 0.25vw;
    left: -1vw;
    z-index: -1;
    width: 100%;
    height: 2.5vw;
    border-radius: 3px;
    background: #fc0;
    opacity: 0.5;
    content: "";
}

.l-content .campaign .period {
    margin-top: 1vw;
    font-size: 3.75vw;
    text-align: center;
}

.l-content .campaign .period .num {
    font-size: 4.25vw;
}

.l-content .campaign .btnWrap {
    margin-top: 3vw;
    text-align: center;
}

.l-content .campaign .aboutAmazonPay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    position: relative;
    box-sizing: border-box;
    width: 75vw;
    padding: 6vw 0 3vw;
    border: 0.75vw solid #ff6200;
    border-radius: 5vw;
    margin-top: 5vw;
}

.l-content .campaign .aboutAmazonPay .new {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2vw 1.5vw;
    border-bottom-right-radius: 3.75vw;
    border-top-left-radius: 3.75vw;
    background: #ff6200;
    color: #fff;
    font-size: 4.25vw;
    font-weight: bold;
}

.l-content .campaign .aboutAmazonPay .logo {
    width: 37.5vw;
    max-width: 200px;
}

.l-content .campaign .aboutAmazonPay .txt {
    font-size: max(12px, 3.25vw);
    text-align: center;
}

.l-content .campaign .terms {
    width: 75vw;
    padding-top: 3vw;
    border-top: 0.75vw solid #0098b8;
    margin-top: 5vw;
}

.l-content .campaign .termsTitle {
    font-size: 4.25vw;
    font-weight: bold;
    text-align: center;
}

.l-content .campaign .termsList {
    margin-top: 3vw;
    font-size: max(12px, 3vw);
}

.l-content .campaign .termsList dt:not(:first-of-type) {
    margin-top: 5vw;
}

/** introduction **/
.l-content .introductionArea {
    margin-top: 20vw;
}

.l-content .introduction {
    position: relative;
    padding-top: 19vw;
    margin: -19vw 0 17.5vw;
}

.l-content .introduction:last-child {
    margin-bottom: 0;
}

.l-content .introduction::after {
    position: absolute;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 17.5vw;
    background: url("/pr/cp_tokuraku_new/img/items_bg_sp_260617.png") no-repeat center 0;
    background-size: cover;
    content: "";
}

.l-content .introduction:last-child::after {
    content: none;
}

.l-content .introductionWrap {
    box-sizing: border-box;
    padding: 7.5vw 2.5vw 2.5vw;
    background: #ffd420;
}

.l-content .introduction .head {
    position: relative;
    margin-bottom: 3vw;
}

.l-content .introduction .head>.icon {
    position: absolute;
    top: -16vw;
    left: -1.5vw;
    width: 25vw;
    height: 25vw;
}

.l-content .introduction .head h2 {
    text-align: center;
}

.l-content .introduction .head h2 .logo {
    width: 45vw;
}

.l-content .introduction .head .summary {
    text-align: center;
    margin-top: 5.5vw;
    font-size: 5.25vw;
    font-weight: bold;
    line-height: 8vw;
}

.l-content .introduction .head .summary .before {
    position: relative;
    margin-bottom: 9vw;
    text-align: center;
}

.l-content .introduction .head .summary .before::after {
    position: absolute;
    bottom: -7vw;
    left: 50%;
    z-index: 1;
    border-top: 6vw solid #025fae;
    border-right: 7.5vw solid transparent;
    border-left: 7.5vw solid transparent;
    transform: translateX(-50%);
    content: "";
}

.l-content .introduction .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    padding: 9vw 0 9vw;
    margin: 0 auto;
    background: #fff;
}

.l-content .introduction .main .decoration {
    display: block;
    position: absolute;
    width: 94.44%;
}

.l-content .introduction .main .decoration::before,
.l-content .introduction .main .decoration::after {
    position: absolute;
    width: 3.5vw;
    height: 3.5vw;
    border-radius: 50%;
    background: #002262;
    content: "";
}

.l-content .introduction .main .decoration::before {
    left: 0;
}

.l-content .introduction .main .decoration::after {
    right: 0;
}

.l-content .introduction .main .decoration_upper {
    top: 2.5vw;
}

.l-content .introduction .main .decoration_upper::before,
.l-content .introduction .main .decoration_upper::after {
    top: 0;
}

.l-content .introduction .main .decoration_lower {
    bottom: 2.5vw;
}

.l-content .introduction .main .decoration_lower::before,
.l-content .introduction .main .decoration_lower::after {
    bottom: 0;
}

/* captionList */
.l-content .introduction .main .captionList {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 82vw;
    margin-top: 5vw;
}

.l-content .introduction .main .captionList>.wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vw;
}

.l-content .introduction .main .captionList .caption {
    display: flex;
    justify-content: center;
    width: 82vw;
    padding: 4vw 0 3vw;
    border-radius: 10vw;
    background: #f0f0f0;
    color: #002262;
    font-size: 5vw;
    font-weight: bold;
    line-height: 6.5vw;
}

.l-content .introduction .main .captionList img {
    width: 70.5vw;
    margin-top: 5vw;
}

/* movie */
.l-content .introduction .main .movie {
    width: 85vw;
}

.l-content .introduction .main .movie a {
    width: 100%;
}

.l-content .introduction .main .movie a img {
    width: 100%;
}

/* cta */
.l-content .introduction .main .cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 85vw;
    padding: 20px 0;
    border-radius: 2.5vw;
    margin: 5vw auto 0;
    background: #025fae;
    box-shadow: 0.75vw 0.75vw #ffd420;
}

.l-content .introduction .main .cta .txt {
    position: relative;
    padding: 0 1vw;
    color: #ffd420;
    font-size: 3.75vw;
    font-weight: bold;
    text-align: center;
}

.l-content .introduction .main .cta .txt::before {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    content: "＼";
}

.l-content .introduction .main .cta .txt::after {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(100%);
    content: "／";
}


.l-content .introduction .main .cta .btnWrap {
    margin-top: 2.5vw;
    text-align: center;
}

.l-content .introduction .main .detailLink {
    margin-top: 3vw;
    font-size: 3.25vw;
    font-weight: bold;
    text-align: center;
}

/* point_01 */
.l-content .introduction .main .point_01 {
    box-sizing: border-box;
    width: 85vw;
    padding: 6.25vw 2.5vw 4.5vw;
    margin-top: 7.5vw;
    background: #f0f0f0;
}

.l-content .introduction .main .point_01 .title {
    text-align: center;
    color: #025fae;
    font-size: 5vw;
}

.l-content .introduction .main .point_01 .pointList {
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
    margin-top: 4vw;
}

.l-content .introduction .main .point_01 .pointList .box {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 30vw;
    border-radius: 2.5vw;
    background: #fff;
}

.l-content .introduction .main .point_01 .pointList .box .pic {
    width: 29.5vw;
}

.l-content .introduction .main .point_01 .pointList .box .pic img {
    width: 100%;
}

.l-content .introduction .main .point_01 .pointList .box .caption {
    width: 37.5vw;
    font-size: 4vw;
    font-weight: bold;
}

/* point_02 */
.l-content .introduction .main .point_02 {
    box-sizing: border-box;
    width: 85vw;
    padding: 2.5vw;
    margin-top: 7.5vw;
    background: #f0f0f0;
}

.l-content .introduction .main .point_02 .pointList {
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
}

.l-content .introduction .main .point_02 .pointList .box {
    box-sizing: border-box;
    width: 100%;
    padding: 2.5vw;
    border-radius: 2.5vw;
    background: #fff;
}

.l-content .introduction .main .point_02 .pointList .box .title {
    margin-bottom: 2vw;
    color: #002262;
    font-size: 5.25vw;
    font-weight: bold;
}

.l-content .introduction .main .point_02 .pointList .box .txt {
    color: #002262;
    font-size: 3.25vw;
}

.l-content .introduction .main .point_02 .pointList .box .note {
    margin-top: 5vw;
    font-size: 3vw;
    line-height: 4.25vw;
}

.l-content .introduction .main .point_02 .pointList .box .pic {
    margin-top: 3vw;
    text-align: center;
}

.l-content .introduction .main .point_02 .pointList .box .pic img {
    width: 100%;
    max-width: max-content;
    max-height: max-content;
}

/* anc_campaign */
.l-content .anc_campaign {
    padding-top: 8vw;
    margin-top: -4vw;
}