@charset "UTF-8";
/* Scss Document */
/* CSS Document */
/*------------------------------mixin フォント------------------------------*/
@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/NotoSansJP-Regular.woff2") format("woff2"),
        url("../font/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../font/NotoSansJP-Bold.woff2") format("woff2"),
        url("../font/NotoSansJP-Bold.woff") format("woff");
}
@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../font/NotoSansJP-Black.woff2") format("woff2"),
        url("../font/NotoSansJP-Black.woff") format("woff");
}
@font-face {
    font-family: "impact";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/Impact.woff2") format("woff2"),
        url("../font/Impact.woff") format("woff");
}
@font-face {
    font-family: "din";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../font/DIN.woff2") format("woff2"),
        url("../font/DIN.woff") format("woff");
}
.font-din {
    font-family: "din", sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -0.03em;
}

.font-impact {
    font-family: "impact", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*------------------------------mixin bg------------------------------*/
/*------------------------------mixin flex------------------------------*/
/*------------------------------基本設定------------------------------*/
html {
    scroll-behavior: smooth;
    font-size: 2.5641025641vw;
}
@media only screen and (min-width: 769px) {
    html {
        font-size: 0.694444444vw;
    }
}

body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    color: #333;
    font-size: 1.6rem;
}

img,
source {
    width: 100%;
    height: 100%;
}

.wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

main {
    flex: 1;
    width: 100vw;
    padding-top: 6rem;
}
@media only screen and (min-width: 769px) {
    main {
        padding-top: 7rem;
    }
}

.pc-only {
    display: none;
}
@media only screen and (min-width: 769px) {
    .pc-only {
        display: block;
    }
}

.sp-only {
    display: block;
}
@media only screen and (min-width: 769px) {
    .sp-only {
        display: none;
    }
}

section {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

picture {
    display: block;
}

.bold {
    font-weight: bold;
}

.gold {
    display: inline-block;
    background: linear-gradient(180deg, #fef8d7, #d6b139);
    background: -webkit-linear-gradient(-90deg, #fef8d7, #d6b139);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.note {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #808080;
}
@media only screen and (min-width: 769px) {
    .note {
        font-size: 1.4rem;
    }
}
.note.note-0 {
    margin-left: 1.2rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .note.note-0 {
        margin-left: 1.8rem;
    }
}
.note.note-0::before {
    content: "※";
    font-size: 1.2rem;
    position: absolute;
    top: 0;
    left: -1.2rem;
}
@media only screen and (min-width: 769px) {
    .note.note-0::before {
        left: -1.8rem;
        font-size: 1.4rem;
    }
}
.note.note-1 {
    margin-left: 2rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .note.note-1 {
        margin-left: 2.5rem;
    }
}
.note.note-1::before {
    content: "※1";
    font-size: 1.2rem;
    position: absolute;
    top: 0;
    left: -2rem;
}
@media only screen and (min-width: 769px) {
    .note.note-1::before {
        left: -2.5rem;
        font-size: 1.4rem;
    }
}
.note.note-2 {
    margin-left: 2rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .note.note-2 {
        margin-left: 2.5rem;
    }
}
.note.note-2::before {
    content: "※2";
    font-size: 1.2rem;
    position: absolute;
    top: 0;
    left: -2rem;
}
@media only screen and (min-width: 769px) {
    .note.note-2::before {
        left: -2.5rem;
        font-size: 1.4rem;
    }
}
.note.note-3 {
    margin-left: 2rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .note.note-3 {
        margin-left: 2.5rem;
    }
}
.note.note-3::before {
    content: "※3";
    font-size: 1.2rem;
    position: absolute;
    top: 0;
    left: -2rem;
}
@media only screen and (min-width: 769px) {
    .note.note-3::before {
        left: -2.5rem;
        font-size: 1.4rem;
    }
}

.btn-wrap {
    margin-top: 3rem;
    font-weight: bold;
    position: relative;
    transition: all 0.5s;
}
@media only screen and (min-width: 769px) {
    .btn-wrap {
        margin-top: 4rem;
    }
}
.btn-wrap .sub {
    font-size: 1.4rem;
    color: #004ca6;
    width: 26rem;
    height: 3rem;
    line-height: 3rem;
    background: #fff;
    border-radius: 0.5rem;
    border: #ffff00 solid 0.2rem;
    position: relative;
    text-align: center;
    margin: 0 auto;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .btn-wrap .sub {
        width: 28rem;
        height: 3.5rem;
        line-height: 3.5rem;
    }
}
.btn-wrap .sub .font-din {
    font-size: 1.8rem;
}
@media only screen and (min-width: 769px) {
    .btn-wrap .sub .font-din {
        font-size: 2rem;
    }
}
.btn-wrap .sub::before {
    content: "";
    position: absolute;
    top: 98%;
    left: 50%;
    margin-left: -1rem;
    border: 1rem solid transparent;
    border-top: 1rem solid #fff;
}
.btn-wrap--cv {
    display: block;
    margin: 0 auto;
    margin-top: -1rem;
    background: #ffff00;
    width: 33rem;
    height: 6.7rem;
    border-radius: 0.8rem;
    box-shadow: 0 0.7rem 0 #dbdb00;
    position: relative;
    text-align: center;
    line-height: 6.7rem;
    font-size: 2.2rem;
    color: #004ca6;
    transition: all 0.5s;
}
@media only screen and (min-width: 769px) {
    .btn-wrap--cv {
        width: 38rem;
        height: 7.7rem;
        line-height: 7.7rem;
        font-size: 2.5rem;
    }
}
.btn-wrap--cv::before {
    content: "";
    background: url(../img/triangle-blue-3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 0.9rem;
    height: 0.8rem;
    position: absolute;
    right: 1.7rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}
.btn-wrap:hover {
    transform: translateY(0.6rem);
    position: relative;
    z-index: 2;
}
.btn-wrap:hover .btn-wrap--cv {
    box-shadow: 0 0.1rem 0 #dbdb00;
    background: #ffff7d;
}

a[href^="tel:"] {
    pointer-events: none;
}

/*------------------------------ヘッダー------------------------------*/
.header {
    width: 100%;
    height: 6rem;
    background: #fff;
    box-shadow: 0 0.5rem 0.8rem rgba(1, 66, 128, 0.2);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    box-shadow: 0 0.5rem 0.8rem rgba(1, 66, 128, 0.2);
}
@media only screen and (min-width: 769px) {
    .header {
        height: 7rem;
        padding: 0 5rem;
    }
}
.header--logo {
    width: 23.6rem;
}
.header #g-nav {
    position: fixed;
    z-index: 999;
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh;
    background: #eef7ff;
    transition: all 0.6s;
}
.header #g-nav.panelactive {
    right: 0;
}
.header #g-nav.panelactive ul {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.header #g-nav.panelactive ul li {
    text-align: center;
}
.header #g-nav.panelactive ul li a {
    text-decoration: none;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 2.5;
}
.header #pc-nav a {
    display: inline-block;
}
header #pc-nav a:first-child {
    margin-right: 1.5rem;
}
.header .openbtn {
    position: relative;
    cursor: pointer;
    width: 3.9rem;
    height: 3.9rem;
    background: #f6f6f6;
    border: 1px solid #e2e2e2;
}
.header .openbtn span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 50%;
    height: 2px;
    transform: translateX(-50%);
    background-color: #666;
    width: 2.2rem;
    z-index: 9999;
}
.header .openbtn span:nth-of-type(1) {
    top: 29%;
}
.header .openbtn span:nth-of-type(2) {
    top: 49.5%;
}
.header .openbtn span:nth-of-type(3) {
    top: 70%;
}
.header .openbtn.active span:nth-of-type(1) {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
}
.header .openbtn.active span:nth-of-type(2) {
    opacity: 0;
}
.header .openbtn.active span:nth-of-type(3) {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}
@media only screen and (min-width: 769px) {
    .header .cv-btn,
    .header .mypage-btn {
        display: block;
        background: #ffff00;
        width: 23.5rem;
        height: 4.5rem;
        border-radius: 0.8rem;
        text-align: center;
        color: #004ca6;
        font-size: 2rem;
        position: relative;
        font-weight: bold;
        line-height: 4.5rem;
    }
    /* .header .cv-btn::before {
        content: "";
        background: url(../img/triangle-blue-3.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 0.9rem;
        height: 0.8rem;
        position: absolute;
        top: 50%;
        right: 1.4rem;
        transform: translateY(-50%) rotate(90deg);
    } */
    .header .cv-btn:hover {
        background: #ffff7d;
    }

    .header .mypage-btn {
        background: #004ca6;
        color: white;
    }
    .header .mypage-btn:hover {
        background: #0656b5;
    }
}

/*------------------------------FV-CAMPAIGN------------------------------*/
.fv-campaign {
    padding: 3rem 2rem 4rem;
}
@media only screen and (min-width: 769px) {
    .fv-campaign {
        padding: 4rem 22rem;
    }

    .fv-campaign .fv-campaign-title {
        margin: 0 0 2rem !important;
    }
}
.fv-campaign .fv-campaign-title {
    margin: 0;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    color: #004ca6;
}
.fv-campaign .fv-campaign-title .sub {
    display: block;
    margin: 0 0 0.8rem;
    font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
    .fv-campaign .fv-campaign-title .sub {
        font-size: 2.4rem;
    }
}
.fv-campaign .fv-campaign-title .main {
    position: relative;
    display: inline-block;
    font-size: 2rem;
}
.fv-campaign .fv-campaign-title .main::before,
.fv-campaign .fv-campaign-title .main::after {
    content: "";
    background: #004ca6;
    width: 0.2rem;
    height: 4rem;
    position: absolute;
    bottom: 0;
}
.fv-campaign .fv-campaign-title .main::before {
    left: -2rem;
    transform: rotate(-30deg);
}
.fv-campaign .fv-campaign-title .main::after {
    right: -2rem;
    transform: rotate(30deg);
}
@media only screen and (min-width: 769px) {
    .fv-campaign .fv-campaign-title .main {
        font-size: 3.4rem;
    }
    .fv-campaign .fv-campaign-title .main::before,
    .fv-campaign .fv-campaign-title .main::after {
        height: 3.7rem;
    }
}
.fv-campaign .text-wrap {
    border: solid 3px #c5e4ff;
    padding: 1.8rem 2rem;
    border-radius: 0.8rem;
}
@media only screen and (min-width: 769px) {
    .fv-campaign .text-wrap {
        padding: 3rem 3.8rem;
    }
}
.fv-campaign .text-wrap h2 {
    margin: 2rem 0 0.8rem;
    border-bottom: 2px dashed #004ca6;
    padding-bottom: 1rem;
    display: inline-block;
    color: #004ca6;
    font-weight: bold;
    font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
    .fv-campaign .text-wrap h2 {
        margin: 2rem 0 1rem;
        padding-bottom: 0.5rem;
        font-size: 1.8rem;
    }
}
.fv-campaign .text-wrap p {
    margin: 0 0 1rem;
    line-height: 1.5;
}
@media only screen and (min-width: 769px) {
    .fv-campaign .text-wrap p {
        margin: 0 0 0.5rem;
        font-size: 1.8rem;
    }
}
.fv-campaign .notes {
    text-align: left;
}
.fv-campaign .notes > li {
    position: relative;
    padding: 0 0 0 1.2rem;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #808080;
}
.fv-campaign .notes > li::before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
}
@media only screen and (min-width: 769px) {
    .fv-campaign .notes > li {
        padding: 0 0 0 1.8rem;
        font-size: 1.4rem;
    }
}

/*------------------------------FV------------------------------*/
.fv {
    background: url(../img/fv-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 2.8rem 0 2.5rem 0rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .fv {
        background: url(../img/fv-bg-pc.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 0 66.6rem 3rem 20rem;
    }
}
.fv::before {
    content: "";
    background: url(../img/fv-character.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 33rem;
    height: 31.3rem;
    position: absolute;
    top: 26rem;
    right: 50%;
    transform: translateX(50%);
}
@media only screen and (min-width: 769px) {
    .fv::before {
        width: 65rem;
        height: 58rem;
        position: absolute;
        right: 38rem;
        top: 5rem;
    }
}
.fv::after {
    content: "";
    background: url(../img/uq-logo-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 6rem;
    height: 3rem;
    position: absolute;
    right: 4.2rem;
    top: 29rem;
}
@media only screen and (min-width: 769px) {
    .fv::after {
        right: 10rem;
        top: 8.6rem;
    }
}
.fv--sub {
    margin-left: 0.5rem;
    color: #004ca6;
    font-size: 2.56rem;
    font-weight: 900;
    text-align: center;
    line-height: 0.8;
    font-style: italic;
    transform: rotate(-7deg);
    position: relative;
    display: inline-block;
}
@media only screen and (min-width: 769px) {
    .fv--sub {
        font-size: 3.4rem;
        margin-left: 0;
        margin-top: 4rem;
    }
}
.fv--sub::before {
    content: "";
    background: url(../img/fv-bubble.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 27rem;
    height: 20rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -50%) rotate(7deg);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .fv--sub::before {
        width: 36rem;
        height: 26rem;
    }
}
.fv--sub .font-impact {
    font-size: 4rem;
    font-style: italic;
    color: #e81d77;
}
@media only screen and (min-width: 769px) {
    .fv--sub .font-impact {
        font-size: 5.3rem;
    }
}
.fv--sub .small {
    font-size: 1.73rem;
}
@media only screen and (min-width: 769px) {
    .fv--sub .small {
        font-size: 2.3rem;
    }
}
.fv--main-ttl {
    position: relative;
    z-index: 2;
    margin-top: -4rem;
}
@media only screen and (min-width: 769px) {
    .fv--main-ttl {
        margin-top: -6rem;
    }
}
.fv--btn-wrap {
    margin-top: 10.5rem;
    font-weight: bold;
    position: relative;
    transition: all 0.5s;
}
@media only screen and (min-width: 769px) {
    .fv--btn-wrap {
        margin-top: -3rem;
    }
}
.fv--btn-wrap::before {
    content: "";
    background: url(../img/btn-device.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 9rem;
    height: 10rem;
    position: absolute;
    left: 1.5rem;
    bottom: -2rem;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .fv--btn-wrap::before {
        width: 11rem;
        height: 13rem;
        left: 5rem;
        bottom: -2rem;
    }
}
.fv--btn-wrap .sub {
    font-size: 1.4rem;
    color: #004ca6;
    width: 26rem;
    height: 3rem;
    line-height: 3rem;
    background: #fff;
    border-radius: 0.5rem;
    border: #ffff00 solid 0.2rem;
    position: relative;
    text-align: center;
    margin: 0 auto;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .fv--btn-wrap .sub {
        width: 28rem;
        height: 3.5rem;
        line-height: 3.5rem;
    }
}
.fv--btn-wrap .sub .font-din {
    font-size: 1.8rem;
}
@media only screen and (min-width: 769px) {
    .fv--btn-wrap .sub .font-din {
        font-size: 2rem;
    }
}
.fv--btn-wrap .sub::before {
    content: "";
    position: absolute;
    top: 98%;
    left: 50%;
    margin-left: -1rem;
    border: 1rem solid transparent;
    border-top: 1rem solid #fff;
}
.fv--btn-wrap--cv {
    display: block;
    margin: 0 auto;
    margin-top: -1rem;
    background: #ffff00;
    width: 33rem;
    height: 6.7rem;
    border-radius: 0.8rem;
    box-shadow: 0 0.7rem 0 #dbdb00;
    position: relative;
    text-align: center;
    line-height: 6.7rem;
    font-size: 2.2rem;
    color: #004ca6;
    padding-left: 2rem;
    transition: all 0.5s;
}
@media only screen and (min-width: 769px) {
    .fv--btn-wrap--cv {
        width: 38rem;
        height: 7.7rem;
        line-height: 7.7rem;
        font-size: 2.5rem;
    }
}
.fv--btn-wrap--cv::before {
    content: "";
    background: url(../img/triangle-blue-3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 0.9rem;
    height: 0.8rem;
    position: absolute;
    right: 1.7rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}
.fv--btn-wrap:hover {
    transform: translateY(0.6rem);
    position: relative;
    z-index: 2;
}
.fv--btn-wrap:hover .fv--btn-wrap--cv {
    box-shadow: 0 0.1rem 0 #dbdb00;
    background: #ffff7d;
}
.fv .note-box {
    position: relative;
    z-index: 2;
    background: #50a3ed;
    margin: 2.5rem 1.5rem 0;
    padding: 1rem;
    border-radius: 0.8rem;
}
@media only screen and (min-width: 769px) {
    .fv .note-box {
        background: none;
        margin-top: 1.5rem;
        white-space: nowrap;
    }
}
.fv .note-box .note {
    color: #fff;
}
.fv .note-box::before {
    content: "©FUJI TELEVISION";
    font-size: 1rem;
    color: #fff;
    text-align: right;
    position: absolute;
    top: -1.5rem;
    right: 0;
}
@media only screen and (min-width: 769px) {
    .fv .note-box::before {
        top: auto;
        bottom: 5rem;
        right: -63rem;
    }
}

/*------------------------------キャンペーン campaign------------------------------*/
.campaign {
    text-align: center;
    background: rgb(29, 78, 216);
}
.campaign .inner {
    width: 100%;
    max-width: 1120px;
    padding: 0 20px;
    margin: auto;
    padding-top: 10vw;
    padding-bottom: 10vw;
}
.campaign .max-w-3xl {
    max-width: 80rem;
}
.campaign .p-6 {
    padding: 3rem;
}

.campaignModalInner {
    line-height: 1.5;
}

@media (min-width: 769px) {
    .campaign .inner {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
/*------------------------------ボタンリスト btn-list------------------------------*/
.btn-list ul {
    width: 100%;
    height: 15.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2rem solid #004ca6;
}
@media only screen and (min-width: 769px) {
    .btn-list ul {
        height: 12.1rem;
        border: 0.3rem solid #004ca6;
    }
}
.btn-list ul .btn-list-item {
    display: block;
    width: 25%;
    height: 15.4rem;
    border: 0.2rem solid #004ca6;
    padding-top: 1.7rem;
    position: relative;
    background-color: white;
}
@media only screen and (min-width: 769px) {
    .btn-list ul .btn-list-item {
        border: 0.3rem solid #004ca6;
        height: 12.1rem;
        padding-top: 0rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        /* background-color: white; */
    }
}
.btn-list ul .btn-list-item::before {
    content: "";
    background: url(../img/arrow-blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 1.4rem;
    height: 0.8rem;
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
}
@media only screen and (min-width: 769px) {
    .btn-list ul .btn-list-item::before {
        width: 1.4rem;
        height: 0.8rem;
    }
}
.btn-list ul .btn-list-item .icon {
    width: 5.6rem;
    height: 5.6rem;
    margin: 0 auto;
}
@media only screen and (min-width: 769px) {
    .btn-list ul .btn-list-item .icon {
        width: 7rem;
        height: 7rem;
        margin: 0;
    }
}
.btn-list ul .btn-list-item .txt {
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.2;
    margin-top: 0.3rem;
}
@media only screen and (min-width: 769px) {
    .btn-list ul .btn-list-item .txt {
        font-size: 2rem;
        margin-top: 0;
    }
}
.btn-list ul .btn-list-item .txt.txt-2,
.btn-list ul .btn-list-item .txt.txt-3,
.btn-list ul .btn-list-item .txt.txt-4 {
    margin-top: 1.2rem;
}
@media only screen and (min-width: 769px) {
    .btn-list ul .btn-list-item .txt.txt-2,
    .btn-list ul .btn-list-item .txt.txt-3,
    .btn-list ul .btn-list-item .txt.txt-4 {
        margin-top: 0;
    }
}
.btn-list ul .btn-list-item.bg-blue {
    background: #004ca6;
}
.btn-list ul .btn-list-item.bg-blue .white {
    color: #fff;
}
.btn-list ul .btn-list-item.bg-blue::before {
    content: "";
    background: url(../img/arrow-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/*------------------------------キャッシュバック cashback------------------------------*/
.cashback {
    padding: 2.5rem 0rem 5rem;
    background: linear-gradient(to right, #004ca6 50%, #50a3ed 50%);
}
@media only screen and (min-width: 769px) {
    .cashback {
        padding: 1.5rem 24rem 7rem;
    }
}
.cashback--ttl {
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .cashback--ttl {
        width: 82.6rem;
        margin: 0 auto;
    }
}
.cashback--list {
    margin: -1.5rem 3rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
}
@media only screen and (min-width: 769px) {
    .cashback--list {
        margin: -4.5rem 0 0;
        justify-content: flex-end;
        gap: 11rem;
    }
}
@media screen and (min-width: 769px) {
    .cashback--list .note{
        color : #fff
    }
}
.cashback--list--item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media only screen and (min-width: 769px) {
    .cashback--list--item {
        align-items: flex-start;
    }
}
.cashback--list--item .sub {
    display: inline-block;
    font-size: 1.8rem;
    color: #fff;
    font-weight: bold;
    font-style: italic;
    transform: rotate(-8deg);
    position: relative;
    margin: 0 auto;
}
@media only screen and (min-width: 769px) {
    .cashback--list--item .sub {
        font-size: 2.5rem;
        margin: inherit;
        margin-left: -3rem;
    }
}
.cashback--list--item .sub .small {
    font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
    .cashback--list--item .sub .small {
        font-size: 2.2rem;
    }
}
.cashback--list--item .sub::before {
    content: "";
    background: url(../img/cashback-bbl-1.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 14rem;
    height: 7rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(8deg);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .cashback--list--item .sub::before {
        width: 19rem;
        height: 8rem;
    }
}
.cashback--list--item .sub.sub-2::before {
    content: "";
    background: url(../img/cashback-bbl-2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 14rem;
    height: 7rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(8deg);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .cashback--list--item .sub.sub-2::before {
        width: 19rem;
        height: 8rem;
    }
}
.cashback--list--item .price {
    color: #fff;
    margin-top: 2rem;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.3;
    text-align: center;
}
@media only screen and (min-width: 769px) {
    .cashback--list--item .price {
        font-size: 2.6rem;
    }
}
.cashback--list--item .price .font-impact {
    font-size: 3.5rem;
}
@media only screen and (min-width: 769px) {
    .cashback--list--item .price .font-impact {
        font-size: 5.2rem;
    }
}
.cashback--list--item .price .font-impact.transfer {
    position: relative;
    text-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2);
}
.cashback--list--item .price .font-impact.transfer::before {
    content: "60,000";
    font-family: "impact", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    color: rgba(0, 0, 0, 0);
    background: linear-gradient(180deg, #fef8d7, #d6b139);
    -webkit-background-clip: text;
    text-shadow: none;
}
.cashback--list--item .price .font-impact.new {
    position: relative;
    text-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2);
}
.cashback--list--item .price .font-impact.new::before {
    content: "28,200";
    font-family: "impact", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    color: rgba(0, 0, 0, 0);
    background: linear-gradient(180deg, #fef8d7, #d6b139);
    -webkit-background-clip: text;
    text-shadow: none;
}
.cashback--how-to {
    margin: 2rem 3rem 0;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to {
        margin: 3rem 8rem 0;
    }
}
.cashback--how-to--ttl {
    color: #004ca6;
    font-weight: bold;
    text-align: center;
    font-size: 2rem;
    text-shadow: 0.2rem 0.2rem 0 #fff, -0.2rem -0.2rem 0 #fff,
        -0.2rem 0.2rem 0 #fff, 0.2rem -0.2rem 0 #fff, 0px 0.2rem 0 #fff,
        0 -0.2rem 0 #fff, -0.2rem 0 0 #fff, 0.2rem 0 0 #fff;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--ttl {
        font-size: 4rem;
        text-shadow: 0.3rem 0.3rem 0 #fff, -0.3rem -0.3rem 0 #fff,
            -0.3rem 0.3rem 0 #fff, 0.3rem -0.3rem 0 #fff, 0px 0.3rem 0 #fff,
            0 -0.3rem 0 #fff, -0.3rem 0 0 #fff, 0.3rem 0 0 #fff;
    }
}
.cashback--how-to--content {
    background: #fff;
    border-radius: 0.8rem;
    padding: 2rem;
    position: relative;
    margin-top: -1rem;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--content {
        padding: 4rem 6rem;
        margin-top: -2rem;
    }
}
.cashback--how-to--content::before {
    content: "";
    background: url(../img/triangle-blue-3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 1.4rem;
    height: 1.4rem;
    position: absolute;
    top: 19rem;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--content::before {
        transform: translateX(-50%) rotate(90deg);
    }
}
.cashback--how-to--content--flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--content--flow {
        flex-direction: row;
        align-items: flex-start;
        gap: 7rem;
    }
}
.cashback--how-to--content--flow--item {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    gap: 1rem;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--content--flow--item {
        flex-direction: column;
    }
}
.cashback--how-to--content--flow--item .icon {
    width: 7.6rem;
}
.cashback--how-to--content--flow--item .txt-wrap {
    width: 20.5rem;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--content--flow--item .txt-wrap {
        width: 31.8rem;
    }
}
.cashback--how-to--content--flow--item .txt-wrap .txt {
    line-height: 1.7;
    text-align: justify;
}
.cashback--how-to--content .title {
    width: 29rem;
    height: 3.5rem;
    line-height: 3.5rem;
    background: #333;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: relative;
    cursor: pointer;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--content .title {
        width: 100%;
        height: 4rem;
        line-height: 4rem;
        margin: 0 auto;
        margin-top: 2rem;
    }
}
.cashback--how-to--content .title::before {
    content: "";
    background: url(../img/triangle-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 0.9rem;
    height: 0.8rem;
    position: absolute;
    right: 1.7rem;
    top: 50%;
    transform: translateY(-50%);
}
.cashback--how-to--content .title.close::before {
    transform: translateY(-50%) rotate(180deg);
}
.cashback--how-to--content .box {
    display: none;
    padding: 1rem 2rem 2rem;
    border: 1px solid #333;
    line-height: 1.8;
    width: 29rem;
    font-size: 1.4rem;
    text-align: justify;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--content .box {
        width: 100%;
        padding: 2rem 5rem 3rem;
    }
}
.cashback--how-to--content .box .label-gra {
    margin-top: 1rem;
    background: #004ca6;
    width: 10rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    font-weight: bold;
    color: #fff;
    border-radius: 9999px;
}
.cashback--how-to--content .box .label-gra2 {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    font-weight: bold;
    background: #004ca6;
    margin-top: 2rem;
    color: #fff;
    margin-bottom: 1rem;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--content .box .label-gra2 {
        margin-top: 3rem;
    }
}
.cashback--how-to--content .box .label-gra2.last {
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}
@media only screen and (min-width: 769px) {
    .cashback--how-to--content .box .label-gra2.last {
        display: block;
        line-height: 3rem;
        height: 3rem;
    }
}
.cashback--how-to--content .box .dot-list li {
    padding-left: 1rem;
    position: relative;
}
.cashback--how-to--content .box .dot-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-40%);
}
.cashback--how-to--content .box .dot-none li {
    padding-left: 0;
}
.cashback--how-to--content .box .dot-none li::before {
    display: none;
}
.cashback--how-to--content .box .num-list .list-1 {
    padding-left: 1.5rem;
    position: relative;
}
.cashback--how-to--content .box .num-list .list-1::before {
    content: "①";
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-20%);
}
.cashback--how-to--content .box .num-list .list-2 {
    padding-left: 1.5rem;
    position: relative;
}
.cashback--how-to--content .box .num-list .list-2::before {
    content: "②";
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-20%);
}
.cashback--how-to--content .box .num-list .list-3 {
    padding-left: 1.5rem;
    position: relative;
}
.cashback--how-to--content .box .num-list .list-3::before {
    content: "③";
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-20%);
}
.cashback--how-to--content .box .num-list .list-4 {
    padding-left: 1.5rem;
    position: relative;
}
.cashback--how-to--content .box .num-list .list-4::before {
    content: "④";
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-20%);
}
.cashback--how-to--content .box .num-list .list-5 {
    padding-left: 1.5rem;
    position: relative;
}
.cashback--how-to--content .box .num-list .list-5::before {
    content: "⑤";
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-20%);
}
.cashback--how-to--content .box .num-list .list-6 {
    padding-left: 1.5rem;
    position: relative;
}
.cashback--how-to--content .box .num-list .list-6::before {
    content: "⑥";
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-20%);
}
.note-red {
    color: #d32f2f;
    font-weight: bold;
}


/*------------------------------ポケットwifiの活用シーン scene------------------------------*/
.scene {
    padding: 6rem 3rem;
    position: relative;
    background: #fff;
}
@media only screen and (min-width: 769px) {
    .scene {
        padding: 11rem 22rem;
    }
}
.scene::before,
.scene::after {
    content: "";
    background: url(../img/device-bg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 58.7rem;
    position: absolute;
    left: 0;
}
.scene::before {
    top: 0;
}
@media only screen and (min-width: 769px) {
    .scene::before {
        content: "";
        background: url(../img/device-bg-pc.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: absolute;
        width: 100%;
        height: 139rem;
    }
}
.scene::after {
    bottom: 0;
    transform: rotate(180deg);
}
@media only screen and (min-width: 769px) {
    .scene::after {
        display: none;
    }
}
.scene--ttl {
    text-align: center;
    font-weight: bold;
    color: #004ca6;
    white-space: nowrap;
    font-style: italic;
    position: relative;
    z-index: 2;
}
.scene--ttl .sub {
    font-size: 2rem;
    position: relative;
    display: inline-block;
}
@media only screen and (min-width: 769px) {
    .scene--ttl .sub {
        font-size: 2.5rem;
    }
}
.scene--ttl .sub::before,
.scene--ttl .sub::after {
    content: "";
    background: #004ca6;
    width: 0.2rem;
    height: 2rem;
    position: absolute;
    left: -1.5rem;
    bottom: 0;
    transform: rotate(-30deg);
}
@media only screen and (min-width: 769px) {
    .scene--ttl .sub::before,
    .scene--ttl .sub::after {
        height: 3rem;
    }
}
.scene--ttl .sub::after {
    left: auto;
    right: -1.5rem;
    transform: rotate(30deg);
}
.scene--ttl .main {
    font-size: 3rem;
}
@media only screen and (min-width: 769px) {
    .scene--ttl .main {
        font-size: 3.8rem;
        line-height: 1.7;
    }
}
.scene--list {
    margin-top: 6.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5.7rem;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .scene--list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
.scene--list--item {
    position: relative;
    border: #004ca6 solid 0.2rem;
    border-radius: 0.8rem;
}
@media only screen and (min-width: 769px) {
    .scene--list--item {
        width: 29rem;
        height: 37rem;
    }
}
.scene--list--item .number {
    text-align: center;
    background: #004ca6;
    width: 5.4rem;
    height: 5.4rem;
    border-radius: 9999px;
    line-height: 5.4rem;
    color: #fff;
    font-size: 2.7rem;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}
.scene--list--item--img {
    width: 100%;
}
.scene--list--item .txt-wrap {
    padding: 2rem;
    background: #fff;
    border-radius: 0 0 0.8rem 0.8rem;
}
.scene--list--item .txt-wrap .ttl {
    font-weight: bold;
    text-align: center;
    font-size: 2rem;
    color: #004ca6;
}
@media only screen and (min-width: 769px) {
    .scene--list--item .txt-wrap .ttl {
        font-size: 1.9rem;
        white-space: nowrap;
    }
}
.scene--list--item .txt-wrap .txt {
    margin-top: 1rem;
    text-align: justify;
    line-height: 1.7;
}
.scene .note-box {
    margin-top: 2rem;
}
@media only screen and (min-width: 769px) {
    .scene .note-box {
        margin-top: 4rem;
    }
}

/*------------------------------プラン plan------------------------------*/
/* #plan {
  padding-top: 10%;
} */
.plan {
    background: url(../img/plan-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding-top: 10%;
    font-weight: bold;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .plan {
        background: url(../img/plan-bg-pc.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding-top: 10rem;
    }
}
.plan::before {
    content: "";
    background: url(../img/uq-logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 8.1rem;
    height: 3.1rem;
    position: absolute;
    top: 2rem;
    right: 2rem;
    
}
@media only screen and (min-width: 769px) {
    .plan::before {
        top: 4rem;
        right: 22rem;
        padding-top: 10%;
    }
}
.plan--top {
  margin-top:10%;
}
@media only screen and (min-width: 769px) {
    .plan--top {
        margin-top:5%;
}
}
.plan--top--ttl {
    font-size: 2.3rem;
    color: #004ca6;
    font-style: italic;
    white-space: nowrap;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .plan--top--ttl {
        display: inline-block;
        text-align: center;
        font-size: 3rem;
        padding-left: 44.3rem;
    }
}
.plan--top--ttl .font-din {
    font-style: italic;
}
.plan--top--ttl .small {
    font-size: 1.8rem;
}
@media only screen and (min-width: 769px) {
    .plan--top--ttl .small {
        font-size: 2.5rem;
    }
}
.plan--top--ttl .font-impact {
    line-height: 0.9;
    font-size: 5.5rem;
    font-style: italic;
}
@media only screen and (min-width: 769px) {
    .plan--top--ttl .font-impact {
        font-size: 6.8rem;
    }
}
.plan--top--ttl .font-impact .big {
    font-size: 8rem;
}
@media only screen and (min-width: 769px) {
    .plan--top--ttl .font-impact .big {
        font-size: 10rem;
    }
}
.plan--top--ttl .kana {
    font-weight: normal;
    font-size: 1.6rem;
    position: absolute;
    left: 5rem;
    top: 3rem;
}
@media only screen and (min-width: 769px) {
    .plan--top--ttl .kana {
        font-size: 2rem;
        left: 58rem;
        top: 4rem;
    }
}
.plan--top .character {
    width: 55%;
    position: absolute;
    right: -4px;
    top: 5rem;
    z-index: 5;
}
@media only screen and (min-width: 769px) {
    .plan--top .character {
        width: 35.6rem;
        right: 31.4rem;
        padding-top: 30px;
    }
}
.plan--tabs-and-content-wrapper {
    margin-top: 2rem;
    z-index: 6;
}

.plan--tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; 
    width: 100%;
    padding: 3rem ,2rem;
    box-sizing: border-box;
    border: 5px;
    
}

@media only screen and (min-width: 769px) {
    .plan--tabs {
        margin: 0;
    }
}

.tab-button {
    background-color: #fff;
    padding-top: 5rem;
    padding-bottom: 5rem;
    height: 65px;
    cursor: pointer;
    font-size: 2rem;
    font-weight: bold;
    color: #5d656f;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: 0.3s ease, color 0.3s ease;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 8;
    position: relative;
    width: 62rem;
}

.tab-button:not(:last-child) {
    margin-right: 1rem;
}

.tab-button:hover {
    background-color: #ddd;
}

.tab-button.active {
    background-color: #c5e4ff;
    color: #004ca6;
    z-index: 8;
}

.tab-indicator-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 25px solid white;
    z-index: 10;
    pointer-events: none;
  }

.plan--tab-content {
    padding: 2.5rem;
    border-radius: 0.8rem;
    margin: -1px 0 0;
    background-color: #c5e4ff;
    z-index: 6;
    position: relative;
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 769px) {
    .plan--tab-content {
        padding: 2.5rem;
        margin: -1px 0 0;
    }
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;

    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


.plan--bottom-txt .txt {
    color: #004ca6;
    margin-top: 0.5rem;
    text-align: center;
    font-weight: bold;
    font-size: 2.5rem;
    line-height: 1.2;
    padding-top: 2rem ;
    padding-bottom: 5rem;
    font-style: italic;
}
.plan--bottom-txt .txt.pink {
    color: #e81d77;
    font-size: 1.5rem;
}
.plan--bottom-txt .txt .font-impact {
    font-size: 4rem;
    font-style: italic;
}
.plan--bottom-inner {
    display: flex;
    justify-content: center;  
    align-items: center;      
    width: 100%;
}
.plan--bottom-comparison-svg {
    width: 100%;
    padding-top: 5rem;
    padding-bottom: 7rem;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (min-width: 769px) {
    .plan--bottom-comparison-svg {
        width: 70%;
    }
}
.plan--bottom--table {
    background: #fff;
    border-radius: 0.8rem;
    margin: 0 auto;
    box-shadow: none;
    border: none;
    width: auto;
    table-layout: auto;       
    background-color: #fff;
    border-collapse: collapse; 
}

.plan--bottom--table tr {
    flex-wrap: wrap;
    min-width: auto;
    
}

.plan--bottom--table tr td {
    border-left: solid 1px #ebebeb;
    border-top: solid 2px #ebebeb;
    text-align: center;
    color: #004ca6;
    font-weight: bold;
    width: 12rem;
    font-size: 1.6rem;
}

@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td {
        width: 35rem;
        font-size: 2.4rem;
        padding-top: 2rem;
    }
}

.plan--bottom--table .device-price .note{
    padding-left: 17%;
    align-items: flex-start;
    display: flex;
    font-size: 1.2rem;
}

.five-child {
  padding: 15px 5px;
}
.eight-child {
  padding: 35px 5px;
}
.nine-child {
  padding: 5px 3px;
}

.plan--bottom--table tr td.bg-blue {
    border-left: none;
    font-weight: normal;
    font-size: 1.3rem;
    background: #004ca6;
    color: #fff;
    line-height: 6rem;
    flex: 0 0 auto;
    width: 8.4rem;
    max-width: 8.4rem;
    white-space: nowrap;
    padding: 0 0.5rem;
}

@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td.bg-blue {
        width: 22rem;
        max-width: 22rem;
        font-size: 2.2rem;
        line-height: 9rem;
        padding: 0 1rem;
        flex: 0 0 12rem;
    }
}

.plan--bottom--table tr td .font-impact {
    font-size: 3rem;
}

@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td .font-impact  {
        font-size: 4.5rem;
    }
}

.plan--bottom--table tr td .yen {
    width: 10rem;
    line-height: 1;
    padding-top: 0.7rem;
}

@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td .yen {
        width: 29.5rem;
        padding-top: 5.5rem;
    }
}

.plan--bottom--table tr td .tax {
    font-size: 1rem;
    font-weight: normal;
}

@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td .tax {
        font-size: 1.4rem;
    }
}

.plan--bottom--table tr td.device-price {
    width: 10rem;
    line-height: 1;
    padding-top: 7rem;
}

@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td.device-price {
        width: 29.5rem;
    }
}
.plan--bottom--table tr td.device-price .label {
    margin: 0 auto;
    margin-bottom: 0.5rem;
    display: block;
    background: #004ca6;
    width: 6.6rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 9999px;
    text-align: center;
    color: #fff;
    font-weight: normal;
    font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td.device-price .label {
        width: 10rem;
        height: 3rem;
        line-height: 3rem;
        font-size: 2.1rem;
        margin-bottom: 1rem;
    }
}

.plan--bottom--table tr td.device-price2 {
    width: 10rem;
    line-height: 1;
    padding-top: 1rem;
}

@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td.device-price2 {
        width: 29.5rem;
        padding-top: 1rem;
    }
}

.plan--bottom--table tr td.device-price2 .label {
    margin: 0 auto;
    margin-bottom: 0.5rem;
    display: block;
    background: #004ca6;
    width: 6.6rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 9999px;
    text-align: center;
    color: #fff;
    font-weight: normal;
    font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td.device-price2 .label {
        width: 10rem;
        height: 3rem;
        line-height: 3rem;
        font-size: 2.1rem;
        margin-bottom: 1rem;
    }
}
.plan--bottom--table tr td.device-price2 .diagonal-strikethrough {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0%" y1="100%" x2="100%" y2="0%" style="stroke:%23EB1D77;stroke-width:2;" /></svg>');
    background-repeat: no-repeat;
    background-position: center 10% bottom;
    background-size: 100% 100%;
}
.plan--bottom--table tr td .triangle-container {
    content: ''; 
    position: absolute;
    left: 77%; 
    top: 42%; 
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 35px solid transparent; 
    border-right: 35px solid transparent; 
    border-top: 15px solid #1A4D9B;
}
@media only screen and (min-width: 769px) {
    .plan--bottom--table tr td .triangle-container  {
        left: 70%; 
        top: 31%; 
    }
}
.plan--bottom--table tr:first-child td.bg-blue {
    border-top-left-radius: 0.8rem;
}
.plan--bottom--table tr:last-child td.bg-blue {
    border-bottom-left-radius: 0.8rem;
}
.plan--bottom--table tr:first-child td:nth-child(2) {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-left: 2px solid rgb(238, 238, 238);
}
.plan--bottom--table tr:first-child td:nth-child(3) {
    border-top-right-radius: 0.8rem;
    border-top-left-radius: 0;
    border-left: 2px solid rgb(238, 238, 238);
}
.plan--bottom--table tr:last-child td.device-price {
    border-bottom-right-radius: 0.8rem;
}
/*------------------------------割引 discount------------------------------*/
.discount {
    position: relative;
    padding: 4rem 0rem;
    background-color:white;
    margin-top: 2rem;
}
@media only screen and (min-width: 769px) {
    .discount {
        padding: 4rem 0rem 6rem 0rem;
        width: 70%;
    }
}
/* .discount::before {
    content: "";
    background: url(../img/discount-bg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 61.1rem;
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(1, -1);
}
@media only screen and (min-width: 769px) {
    .discount::before {
        background: none;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 55.3rem;
        position: absolute;
        left: 0;
        bottom: 0;
    }
} */
/* .discount--top {
    position: relative;
}
@media only screen and (min-width: 769px) {
    .discount--top {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: flex-start;
        gap: 6.4rem;
    }
} */
/* .discount--top::before {
    content: "";
    background: #50a3ed;
    width: 97rem;
    height: 97rem;
    border-radius: 9999px;
    position: absolute;
    left: 50%;
    bottom: -7.5rem;
    transform: translateX(-50%);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .discount--top::before {
        width: 300rem;
        height: 300rem;
        bottom: -13rem;
    }
} */
@media only screen and (min-width: 769px) {
    .discount--top--pc-left {
        margin-top: 2rem;
    }
}
.discount--top--pc-left .benefits {
    padding: 0 3rem;
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .benefits {
        padding: 0;
    }
}
.discount--top--pc-left .benefits .label {
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    position: relative;
    font-weight: bold;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .benefits .label {
        font-size: 2rem;
    }
}
.discount--top--pc-left .benefits .label::before {
    content: "";
    background: url(../img/ribon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 31.2rem;
    height: 4.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .benefits .label::before {
        width: 34.4rem;
        height: 5rem;
    }
}
/*
5G LOGO
.discount--top--pc-left .benefits .label::after {
    content: "";
    background: url(../img/benefit-badge.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 6rem;
    height: 6rem;
    position: absolute;
    left: -1.5rem;
    top: -3.5rem;
}
*/
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .benefits .label::after {
        width: 7rem;
        height: 7rem;
        left: -2rem;
        top: -4rem;
    }
}
.discount--top--pc-left .benefits .label .small {
    font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .benefits .label .small {
        font-size: 1.7rem;
    }
}
.discount--top--pc-left .benefits .price {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    margin-top: 2rem;
}
.discount--top--pc-left .benefits .price .square {
    border: 2px solid #fff;
    font-size: 2rem;
    width: 5.9rem;
    height: 5.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.9rem;
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .benefits .price .square {
        width: 6.5rem;
        height: 6.5rem;
        font-size: 2.2rem;
    }
}
.discount--top--pc-left .benefits .price .gold {
    font-size: 8.1rem;
    position: relative;
    text-shadow: 0.2rem 0.4rem 0.5rem rgba(0, 0, 0, 0.2);
}
.discount--top--pc-left .benefits .price .gold::before {
    content: "35,794";
    font-family: "impact", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    color: rgba(0, 0, 0, 0);
    background: linear-gradient(180deg, #fef8d7, #ffff00);
    -webkit-background-clip: text;
    text-shadow: none;
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .benefits .price .gold {
        font-size: 9rem;
    }
}
.discount--top--pc-left .benefits .price .yen {
    margin-left: 0.5rem;
    font-size: 4.6rem;
    transform: translateY(1rem);
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .benefits .price .yen {
        font-size: 5.1rem;
    }
}
.discount--top--pc-left .three-years {
    margin-top: 2.8rem;
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .three-years {
        position: relative;
    }
}
.discount--top--pc-left .three-years .bbl {
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: relative;
    font-size: 3rem;
}
.discount--top--pc-left .three-years .bbl::before,
.discount--top--pc-left .three-years .bbl::after {
    content: "";
    display: inline-block;
    background: #fff;
    width: 0.2rem;
    height: 3rem;
    position: absolute;
    bottom: -0.2rem;
}
.discount--top--pc-left .three-years .bbl::before {
    left: 7.5rem;
    transform: rotate(-30deg);
}
.discount--top--pc-left .three-years .bbl::after {
    right: 7.5rem;
    transform: rotate(30deg);
}
.discount--top--pc-left .three-years .catch {
    margin-top: 1rem;
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-left .three-years .catch {
        position: absolute;
        left: -25.5rem;
        top: 0;
        width: 144rem;
        height: 25rem;
    }
}
.discount--top--pc-right {
    padding: 0 3rem;
    margin-top: 3.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--top--pc-right {
        margin-top: 0;
        padding: 0;
        width: 49.6rem;
        position: relative;
        z-index: 2;
    }
}
.discount--comparison {
    margin-top: 3rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison {
        margin-top: 8rem;
    }
}
.discount--comparison--ttl {
    font-weight: bold;
    text-align: center;
    position: relative;
    z-index: 2;
    color: #004ca6;
}
.discount--comparison--ttl .sub {
    display: inline-block;
    font-size: 1.8rem;
    background: #c5e4ff;
    border: 0.3rem solid #fff;
    padding: 1rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--ttl .sub {
        font-size: 3rem;
        border: 0.5rem solid #fff;
        padding: 1.5rem 2.7rem;
    }
}
.discount--comparison--ttl .sub::before {
    content: "";
    position: absolute;
    top: 95%;
    left: 50%;
    margin-left: -0.8rem;
    border: 0.8rem solid transparent;
    border-top: 0.8rem solid #c5e4ff;
    transform: translateX(-50%);
}
@media only screen and (min-width: 769px) {
    .discount--comparison--ttl .sub::before {
        margin-left: -1.5rem;
        border: 1.5rem solid transparent;
        border-top: 1.5rem solid #c5e4ff;
    }
}
.discount--comparison--ttl .sub .small {
    font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--ttl .sub .small {
        font-size: 2.6rem;
    }
}
.discount--comparison--ttl .main {
    display: inline-block;
    margin-top: 1rem;
    font-size: 3.7rem;
    line-height: 1;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--ttl .main {
        display: block;
        font-size: 6rem;
        margin-top: 1.5rem;
    }
}
.discount--comparison--ttl .main::before,
.discount--comparison--ttl .main::after {
    content: "";
    background: url(../img/comparison-star.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 3.2rem;
    height: 2.7rem;
    position: absolute;
    top: 1vw;
    left: 0;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--ttl .main::before,
    .discount--comparison--ttl .main::after {
        width: 4.5rem;
        height: 3.8rem;
        left: 32rem;
        top: -2rem;
    }
}
.discount--comparison--ttl .main::after {
    left: auto;
    top: auto;
    right: -4vw;
    bottom: -3vw;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--ttl .main::after {
        right: 32rem;
        bottom: -3rem;
    }
}
.discount--comparison--ttl .main .small {
    font-size: 3rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--ttl .main .small {
        font-size: 5rem;
    }
}
.discount--comparison--ttl .main .font-impact {
    font-size: 6.2rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--ttl .main .font-impact {
        font-size: 12rem;
    }
}
.discount--comparison--content {
    padding: 0 3rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content {
        padding: 0 18rem;
    }
}
.discount--comparison--content--box {
    background: url(../img/comparison-box-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5.8rem 2rem 2rem;
    position: relative;
    margin-top: 14rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--box {
        background: url(../img/comparison-bg-pc.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 5rem 3rem 4rem 45.4rem;
        margin-top: 7rem;
    }
}
.discount--comparison--content--box::before {
    content: "";
    background: #fff;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.discount--comparison--content--box .illust-top {
    width: 20rem;
    position: absolute;
    left: 50%;
    top: -10rem;
    transform: translateX(-50%);
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--box .illust-top {
        width: 27rem;
        top: 50%;
        left: 10.5rem;
        transform: translateY(-50%);
    }
}
.discount--comparison--content--box .txt-wrap {
    text-align: center;
    position: relative;
    z-index: 2;
}
.discount--comparison--content--box .txt-wrap .txt {
    line-height: 1.7;
}
.discount--comparison--content--box .txt-wrap .txt .font-impact {
    font-size: 3rem;
    color: #50a3ed;
}
.discount--comparison--content--box .txt-wrap .txt .font-impact .small {
    font-size: 2rem;
}
.discount--comparison--content--box .txt-wrap .circle-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 2rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--box .txt-wrap .circle-list {
        gap: 1.5rem;
        margin-top: 4rem;
    }
}
.discount--comparison--content--box .txt-wrap .circle-list li {
    background: #eef7ff;
    width: 8.6rem;
    height: 8.6rem;
    border-radius: 9999px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--box .txt-wrap .circle-list li {
        width: 12rem;
        height: 12rem;
    }
}
.discount--comparison--content--box .txt-wrap .circle-list li .illust {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.discount--comparison--content--box .txt-wrap .circle-list li .illust.movie {
    width: 5rem;
    top: -0.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--box
        .txt-wrap
        .circle-list
        li
        .illust.movie {
        width: 6.7rem;
    }
}
.discount--comparison--content--box .txt-wrap .circle-list li .illust.short {
    width: 2.2rem;
    top: -1.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--box
        .txt-wrap
        .circle-list
        li
        .illust.short {
        width: 3rem;
        top: -2rem;
    }
}
.discount--comparison--content--box .txt-wrap .circle-list li .illust.game {
    width: 4.8rem;
    top: -1.3rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--box .txt-wrap .circle-list li .illust.game {
        width: 6.5rem;
        top: -1.8rem;
    }
}
.discount--comparison--content--box .txt-wrap .circle-list li .list-txt {
    text-align: center;
    color: #50a3ed;
    font-weight: bold;
    font-size: 1.1rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--box .txt-wrap .circle-list li .list-txt {
        font-size: 1.6rem;
    }
}
.discount--comparison--content--box .txt-wrap .source {
    font-size: 1rem;
    color: #808080;
    text-align: left;
    line-height: 1.5;
    margin-top: 1.5rem;
}
.discount--comparison--content--box .txt-wrap .source a {
    text-decoration: underline;
}
.discount--comparison--content--worry {
    margin-top: 3.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--worry {
        margin-top: 5rem;
        position: relative;
    }
}
.discount--comparison--content--worry .voice-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.discount--comparison--content--worry .voice-list li {
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 1.3;
    background: #333;
    width: 31rem;
    height: 7.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    position: relative;
    margin-left: 0;
    /* margin-right: auto; */
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--worry .voice-list li {
        margin: 0 auto;
    }
}
.discount--comparison--content--worry .voice-list li::before {
    content: "";
    position: absolute;
    left: 4rem;
    bottom: -1.5rem;
    border-left: 4rem solid #333;
    border-top: 2rem solid transparent;
    border-bottom: 2rem solid transparent;
    transform: rotate(45deg);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--worry .voice-list li::before {
        left: auto;
        right: -1.3rem;
        bottom: 1rem;
        transform: rotate(30deg);
    }
}
.discount--comparison--content--worry .voice-list li.list-2 {
    /* margin-left: auto; */
    margin-right: 0;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--worry .voice-list li.list-2 {
        margin: 0 auto;
    }
}
.discount--comparison--content--worry .voice-list li.list-2::before {
    left: auto;
    right: 4rem;
    bottom: -1.8rem;
    border-left: 0rem solid #333;
    border-right: 4rem solid #333;
    border-top: 2rem solid transparent;
    border-bottom: 2rem solid transparent;
    transform: rotate(-45deg);
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--worry .voice-list li.list-2::before {
        right: auto;
        left: -1.3rem;
        bottom: 1rem;
        transform: rotate(30deg);
    }
}
.discount--comparison--content--worry .illust-box {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.7rem;
}
.discount--comparison--content--worry .illust-box figure {
    width: 7.6rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--worry .illust-box figure {
        position: absolute;
    }
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--worry .illust-box figure.man {
        /* left: 4rem; */
        top: 0;
        width: 12.6rem;
        margin-right: 90%;
    }
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--worry .illust-box figure.woman {
        /* right: 4rem; */
        top: 0;
        width: 12.2rem;
        margin-left: 90%;
    }
}
.discount--comparison--content--solution .arrow {
    margin: 0 auto;
    margin-top: 0.5rem;
    width: 2.8rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--solution .arrow {
        width: 5.8rem;
    }
}
.discount--comparison--content--solution .txt {
    color: #004ca6;
    margin-top: 0.5rem;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.2;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--solution .txt {
        margin-top: 1.8rem;
        font-size: 2.4rem;
    }
}
.discount--comparison--content--solution .txt .small {
    font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--solution .txt .small {
        font-size: 1.8rem;
    }
}
.discount--comparison--content--solution .txt .pink {
    color: #e81d77;
}
.discount--comparison--content--solution .txt .bg-pink {
    display: inline-block;
    line-height: 1.5;
    color: #fff;
    background-color: #e81d77;
    padding: 0.2rem 1rem;
    margin-top: 0.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--solution .txt .bg-pink {
        display: none;
    }
}
.discount--comparison--content--solution .txt .bg-pink.pc-only {
    display: none;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--solution .txt .bg-pink.pc-only {
        display: inline-block;
    }
}
.discount--comparison--content--table {
    margin-top: 3rem;
    margin-bottom: 2rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table {
        margin-top: 4.3rem;
    }
}
.discount--comparison--content--table table {
    margin: 0 auto;
    border-radius: 0.8rem;
    position: relative;
}
.discount--comparison--content--table table::before {
    content: "";
    width: 30.8rem;
    height: 22.5rem;
    position: absolute;
    top: -0.1rem;
    left: -0.1rem;
    border-radius: 0.8rem;
    border: solid #333 0.1rem;
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table::before {
        width: 72.4rem;
        height: 28.9rem;
    }
}
.discount--comparison--content--table table tr {
    height: 4rem;
    line-height: 4rem;
    border-bottom: solid 0.1rem #aeaeae;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr {
        height: 5rem;
        line-height: 5rem;
    }
}
.discount--comparison--content--table table tr.softbank {
    border-bottom: none;
}
.discount--comparison--content--table table tr th {
    width: 10.2rem;
    text-align: center;
    border-left: solid 0.1rem #aeaeae;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr th {
        width: 24rem;
    }
}
.discount--comparison--content--table table tr th.label {
    background: #333;
    color: #fff;
    font-size: 1.4rem;
    border-left: none;
}
.discount--comparison--content--table table tr td {
    text-align: center;
    font-size: 1rem;
    white-space: nowrap;
    font-weight: bold;
    border-left: solid 0.1rem #aeaeae;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr td {
        font-size: 1.4rem;
    }
}
.discount--comparison--content--table table tr td .font-din {
    font-size: 1.4rem;
    font-weight: bold;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr td .font-din {
        font-size: 2rem;
    }
}
.discount--comparison--content--table table tr td .tax {
    font-size: 1rem;
    font-weight: normal;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr td .tax {
        font-size: 1.4rem;
    }
}
.discount--comparison--content--table table tr.top {
    border-radius: 0.8rem 0.8rem 0 0;
    width: 31rem;
    height: 5.4rem;
    background: #f0f0f0;
    font-size: 1.2rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.top {
        font-size: 1.6rem;
        width: 72.4rem;
    }
}
.discount--comparison--content--table table tr.top th {
    line-height: 5.4rem;
}
.discount--comparison--content--table table tr.top th.top-left {
    border-radius: 0.8rem 0 0 0;
    border-left: none;
}
.discount--comparison--content--table table tr.top th.top-middle {
    line-height: 1.3;
    padding-top: 1.2rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.top th.top-middle {
        line-height: 5.4rem;
        padding-top: 0;
    }
}
.discount--comparison--content--table table tr.top th.top-middle .small {
    white-space: nowrap;
    font-size: 0.8rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.top th.top-middle .small {
        font-size: 1.2rem;
    }
}
.discount--comparison--content--table table tr.top th.top-right {
    border-radius: 0 0.8rem 0 0;
    line-height: 1.3;
    padding-top: 1.2rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.top th.top-right {
        line-height: 5.4rem;
        padding-top: 0;
    }
}
.discount--comparison--content--table table tr.plaio-wimax {
    width: 33rem;
    height: 6.5rem;
    border-bottom: none;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.plaio-wimax {
        height: 8.3rem;
        width: 77.4rem;
    }
}
.discount--comparison--content--table table tr.plaio-wimax th {
    font-size: 1.5rem;
    background: transparent;
    position: relative;
    line-height: 1.5;
    padding-right: 1.1rem;
    border-left: none;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.plaio-wimax th {
        font-size: 2.5rem;
        line-height: 8.3rem;
        padding-top: 0.3rem;
        /* padding-right: 6rem; */
    }
}
.discount--comparison--content--table table tr.plaio-wimax th::before {
    content: "";
    background: #50a3ed;
    border-radius: 0.8rem 0 0 0.8rem;
    width: 11.4rem;
    height: 6.7rem;
    position: absolute;
    right: 0;
    top: -0.1rem;
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.plaio-wimax th::before {
        width: 22rem;
        height: 9rem;
    }
}
.discount--comparison--content--table table tr.plaio-wimax td {
    height: 6.5rem;
    line-height: 6.5rem;
    color: #50a3ed;
    font-size: 1.2rem;
    border-left: none;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.plaio-wimax td {
        height: 8.3rem;
        line-height: 8.3rem;
        font-size: 1.6rem;
    }
}
.discount--comparison--content--table table tr.plaio-wimax td .font-din {
    font-size: 1.7rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.plaio-wimax td .font-din {
        font-size: 2.8rem;
        padding-left: 10px;
    }
}
.discount--comparison--content--table table tr.plaio-wimax td.pink {
    color: #e81d77;
    position: relative;
    border-left: 0.1rem solid #aeaeae;
}
.discount--comparison--content--table table tr.plaio-wimax td.pink::before {
    content: "";
    background: #eef7ff;
    border-radius: 0 0.8rem 0.8rem 0;
    width: 21.7rem;
    height: 6.7rem;
    position: absolute;
    right: -1rem;
    top: -0.1rem;
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.plaio-wimax td.pink::before {
        width: 50.3rem;
        height: 9rem;
    }
}
.discount--comparison--content--table table tr.plaio-wimax td.pink::after {
    content: "";
    border-radius: 0 0.8rem 0.8rem 0;
    width: 21.7rem;
    height: 6.7rem;
    position: absolute;
    right: -1rem;
    top: -0.1rem;
    border: solid #50a3ed 0.3rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.plaio-wimax td.pink::after {
        width: 50.3rem;
        height: 9rem;
        border: solid #50a3ed 0.5rem;
    }
}
.discount--comparison--content--table table tr.plaio-wimax td .note {
    font-size: 0.8rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table table tr.plaio-wimax td .note {
        font-size: 1rem;
    }
}
.discount--comparison--content--table .note-box {
    margin-top: 1rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--content--table .note-box {
        margin-left: 12rem;
    }
}
/* .discount--comparison--plus {
    background: #c5e4ff;
    padding: 2rem 3rem 6rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus {
        padding: 3.5rem 22rem 11rem;
    }
} */
/* .discount--comparison--plus::before,
.discount--comparison--plus::after {
    content: "";
    background: linear-gradient(to left bottom, transparent 50%, #c5e4ff 50%);
    width: 50%;
    height: 5.8rem;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-99%);
    z-index: -3;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus::before,
    .discount--comparison--plus::after {
        height: 11rem;
    }
}
.discount--comparison--plus::after {
    left: auto;
    right: 0;
    transform: translateY(-99%) scale(-1, 1);
}
.discount--comparison--plus .ttl {
    text-align: center;
}
.discount--comparison--plus .ttl .bg-blue-3 {
    display: inline-block;
    background: #004ca6;
    width: 9.4rem;
    height: 2.6rem;
    line-height: 2.6rem;
    border-radius: 9999px;
    color: #fff;
    font-weight: bold;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .bg-blue-3 {
        width: 13.8rem;
        height: 4rem;
        line-height: 4rem;
        font-size: 2.4rem;
    }
}
.discount--comparison--plus .ttl .sub-mini {
    color: white;
    font-size: 1.3rem;
    background-color: #004ca6; 
    padding: 0.5em 1.5em;
    border: none;
    border-radius: 9999px; 
    font-weight: bold;
    width: 33%;
    margin: auto;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .sub-mini {
        font-size: 1.8rem;
        width: 15%;
    }
}

.discount--comparison--plus .ttl .sub {
    font-weight: bold;
    color: #004ca6;
    font-size: 1.8rem;
    margin-top: 1rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .sub {
        font-size: 2.7rem;
        display: inline-block;
    }
}
.discount--comparison--plus .ttl .sub::before,
.discount--comparison--plus .ttl .sub::after {
    content: "";
    background: #004ca6;
    width: 0.1rem;
    height: 2rem;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(-30deg);
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .sub::before,
    .discount--comparison--plus .ttl .sub::after {
        height: 3rem;
        left: -2rem;
    }
}
.discount--comparison--plus .ttl .sub::after {
    left: auto;
    right: 0;
    transform: rotate(30deg);
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .sub::after {
        right: -2rem;
    }
}
.discount--comparison--plus .ttl .sub .small {
    font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .sub .small {
        font-size: 2.4rem;
    }
}
.discount--comparison--plus .ttl .benefits {
    margin-top: 3rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .benefits {
        padding: 0;
    }
}
.discount--comparison--plus .ttl .benefits .label {
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    position: relative;
    font-weight: bold;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .benefits .label {
        font-size: 2rem;
    }
}
.discount--comparison--plus .ttl .benefits .label::before {
    content: "";
    background: url(../img/ribon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 31.2rem;
    height: 4.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .benefits .label::before {
        width: 34.4rem;
        height: 5rem;
    }
}
.discount--comparison--plus .ttl .benefits .label .small {
    font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .benefits .label .small {
        font-size: 1.7rem;
    }
}
.discount--comparison--plus .ttl .benefits .price {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-top: 2rem;
    color: #004ca6;
}
.discount--comparison--plus .ttl .benefits .price .square {
    font-size: 2rem;
    width: 5.9rem;
    height: 5.9rem;
    color: #004ca6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.9rem;
    border: 0.2rem solid #004ca6;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .benefits .price .square {
        width: 6.5rem;
        height: 6.5rem;
        font-size: 2.2rem;
    }
}
.discount--comparison--plus .ttl .benefits .price .pink {
    font-size: 8.1rem;
    position: relative;
}
.discount--comparison--plus .ttl .benefits .price .pink::before {
    content: "35,794";
    font-family: "impact", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    color: rgba(0, 0, 0, 0);
    background: #e81d77;
    -webkit-background-clip: text;
    text-shadow: none;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .benefits .price .gold {
        font-size: 9rem;
    }
}
.discount--comparison--plus .ttl .benefits .price .yen {
    margin-left: 0.5rem;
    font-size: 4.6rem;
    transform: translateY(1rem);
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .ttl .benefits .price .yen {
        font-size: 5.1rem;
    }
}
.discount--comparison--plus .graph {
    background: #fff;
    border-radius: 0.8rem;
    padding: 3rem 2rem;
    margin-top: 2rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .graph {
        padding: 4rem 7rem;
        margin-top: 3rem;
    }
}
.discount--comparison--plus .graph .difference {
    margin-top: 1rem;
    color: #004ca6;
    text-align: center;
    font-weight: bold;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .graph .difference {
        margin-top: 3rem;
        font-size: 2.7rem;
    }
}
.discount--comparison--plus .graph .difference .main {
    font-size: 2.5rem;
    background: linear-gradient(transparent 50%, #ffff00 50%);
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .graph .difference .main {
        font-size: 4.2rem;
    }
}
.discount--comparison--plus .graph .difference .main .font-impact {
    font-size: 4.2rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .graph .difference .main .font-impact {
        font-size: 7.2rem;
    }
}
.discount--comparison--plus .graph .note-box {
    margin-top: 1.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--comparison--plus .graph .note-box {
        margin-top: 3rem;
    }
} */
.discount--bottom {
    background: url(../img/discount-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 2rem;
    padding-bottom: 6rem;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .discount--bottom {
        background: url(../img/discount-bg-pc.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding-top: 9rem;
        padding-bottom: 10rem;
    }
}
.discount--bottom--ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl {
        gap: 2.8rem;
    }
}
.discount--bottom--ttl--device {
    width: 13.2rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl--device {
        width: 25.2rem;
    }
}
.discount--bottom--ttl .price {
    font-weight: bold;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl .price {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6.3rem;
        align-items: flex-end;
    }
}
.discount--bottom--ttl .price .before {
    display: inline-block;
    color: #fff;
    font-size: 1.4rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl .price .before {
        font-size: 2.6rem;
    }
}
.discount--bottom--ttl .price .before::before {
    content: "";
    background: #ffff00;
    width: 0.2rem;
    height: 11rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-80deg);
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl .price .before::before {
        width: 0.3rem;
        height: 19rem;
    }
}
.discount--bottom--ttl .price .before::after {
    content: "";
    background: url(../img/price-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 1.8rem;
    height: 1.9rem;
    position: absolute;
    top: 30%;
    right: -2.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl .price .before::after {
        background: url(../img/price-arrow-pc.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 4.1rem;
        height: 3rem;
        right: -5rem;
        top: 0;
    }
}
.discount--bottom--ttl .price .before .font-din {
    font-size: 2.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl .price .before .font-din {
        font-size: 4.6rem;
    }
}
.discount--bottom--ttl .price .after {
    color: #ffff00;
    font-size: 2.5rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl .price .after {
        font-size: 4.6rem;
    }
}
.discount--bottom--ttl .price .after .month {
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1.2;
    margin-right: 0.5rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl .price .after .month {
        font-size: 3.3rem;
    }
}
.discount--bottom--ttl .price .after .font-impact {
    font-size: 5rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl .price .after .font-impact {
        font-size: 9.2rem;
    }
    .discount--bottom--ttl .price .after .font-impact .sp-only {
    display: none;
    }
}
.discount--bottom--ttl .price .after .tax {
    font-weight: normal;
    font-size: 1rem;
    position: absolute;
    right: 2rem;
    top: 1.4rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--ttl .price .after .tax {
        font-size: 1.8rem;
        top: 3rem;
        right: 4.5rem;
    }
}
.discount--bottom--table {
    background: #fff;
    border-radius: 0.8rem;
    margin: 1.5rem 3rem 0;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--table {
        margin: 1.5rem 22rem 0;
    }
}
.discount--bottom--table tr {
    width: 33rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--table tr {
        width: 100rem;
    }
}
.discount--bottom--table tr td {
    border-left: solid 1px #ebebeb;
    border-top: solid 1px #ebebeb;
    text-align: center;
    color: #004ca6;
    font-weight: bold;
    width: 14.5rem;
    font-size: 1.6rem;
    line-height: 6rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--table tr td {
        width: 50rem;
        font-size: 2.4rem;
        line-height: 9rem;
    }
}
@media only screen and (min-width: 769px) {
    .discount--bottom--table tr td {
        line-height: 9rem;
    }
}
.discount--bottom--table tr td .font-impact {
    font-size: 3rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--table tr td .font-impact {
        font-size: 4.5rem;
    }
}
.discount--bottom--table tr td .tax {
    font-weight: normal;
    font-size: 1.2rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--table tr td .tax {
        font-size: 1.8rem;
    }
}
.discount--bottom--table tr td.bg-blue {
    border-left: none;
    font-weight: normal;
    width: 8.4rem;
    font-size: 1.3rem;
    background: #004ca6;
    color: #fff;
    line-height: 6rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--table tr td.bg-blue {
        width: 22rem;
        font-size: 2.2rem;
        line-height: 9rem;
    }
}
.discount--bottom--table tr td.bg-blue .note {
    color: #fff;
}
.discount--bottom--table tr td.top {
    border-top: none;
}
.discount--bottom--table tr td.top-left {
    border-radius: 0.8rem 0 0 0;
}
.discount--bottom--table tr td.bottom-left {
    border-radius: 0 0 0 0.8rem;
}
.discount--bottom--table tr td.bg-yellow {
    background: #ffffaa;
    border-radius: 0 0.8rem 0 0;
}
.discount--bottom--table tr td.device-price {
    width: 10rem;
    line-height: 1;
    padding-top: 1.2rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--table tr td.device-price {
        width: 29.5rem;
        padding-top: 5.5rem;
    }
}
.discount--bottom--table tr td.device-price .label {
    margin: 0 auto;
    margin-bottom: 0.5rem;
    display: block;
    background: #004ca6;
    width: 6.6rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 9999px;
    text-align: center;
    color: #fff;
    font-weight: normal;
    font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom--table tr td.device-price .label {
        width: 10rem;
        height: 3rem;
        line-height: 3rem;
        font-size: 2.1rem;
        margin-bottom: 1rem;
    }
}
.discount--bottom .note-box {
    margin-top: 1rem;
    margin-left: 3rem;
}
@media only screen and (min-width: 769px) {
    .discount--bottom .note-box {
        margin-left: 85rem;
    }
}
.discount--bottom .note-box .note {
    color: #fff;
}

/*------------------------------端末 device------------------------------*/
.device {
    padding: 6rem 0;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .device {
        padding: 11rem 22rem;
    }
}
.device::before,
.device::after {
    content: "";
    background: url(../img/device-bg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 58.7rem;
    position: absolute;
    left: 0;
    z-index: -1;
}
.device::before {
    top: 0;
}
@media only screen and (min-width: 769px) {
    .device::before {
        content: "";
        background: url(../img/device-bg-pc.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: absolute;
        width: 100%;
        height: 139rem;
    }
}
.device::after {
    bottom: 0;
    transform: rotate(180deg);
}
@media only screen and (min-width: 769px) {
    .device::after {
        display: none;
    }
}
.device--ttl {
    text-align: center;
}
.device--ttl .sub {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: 2rem;
    background: #004ca6;
    line-height: 3rem;
    padding: 0.5rem 1.5rem;
    transform: skew(-15deg);
}
@media only screen and (min-width: 769px) {
    .device--ttl .sub {
        font-size: 3.2rem;
        line-height: 5rem;
    }
}
.device--ttl .main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}
@media only screen and (min-width: 769px) {
    .device--ttl .main {
        margin-top: 1.5rem;
    }
}
.device--ttl .main .gb {
    width: 9.7rem;
}
@media only screen and (min-width: 769px) {
    .device--ttl .main .gb {
        width: 14.6rem;
    }
}
.device--ttl .main .blue {
    font-size: 3rem;
    font-style: italic;
    color: #004ca6;
    font-weight: bold;
}
@media only screen and (min-width: 769px) {
    .device--ttl .main .blue {
        font-size: 4.7rem;
    }
}
.device--content {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
@media only screen and (min-width: 769px) {
    .device--content {
        margin-top: 6rem;
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        align-items: flex-start;
    }
}

.device--content--item {
    width: 39rem;
    padding-top : 4rem;
}
@media only screen and (min-width: 769px) {
    .device--content--item {
        width: 46rem;
    }
}
.device--content--item--ttl {
    border-radius: 0.8rem 0.8rem 0 0;
    background: #c5e4ff;
    color: #004ca6;
    font-size: 2.2rem;
    line-height: 1.3;
    font-weight: bold;
    height: 9rem;
    display: inline-block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    padding-left: 12.2rem;
}
@media only screen and (min-width: 769px) {
    .device--content--item--ttl {
        font-size: 2.6rem;
        padding-left: 14.4rem;
        height: 10.7rem;
    }
}
.device--content--item--ttl .small {
    font-size: 1.6rem;
}
@media only screen and (min-width: 769px) {
    .device--content--item--ttl .small {
        font-size: 1.8rem;
    }
}
.device--content--item--content {
    padding: 3rem;
    text-align: center;
    background-color: #ffffff;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content {
        border: solid 3px #c5e4ff;
        padding: 3.5rem 3.5rem 5rem;
        border-radius: 0 0 0.8rem 0.8rem;
    }
}
.device--content--item--content--bbl {
    text-align: center;
    position: relative;
    display: inline-block;
    line-height: 1.3;
    font-weight: bold;
    margin-bottom: 2rem;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content--bbl {
        font-size: 1.8rem;
    }
}
.device--content--item--content--bbl::before,
.device--content--item--content--bbl::after {
    content: "";
    background: #333;
    width: 0.2rem;
    height: 2rem;
    transform: rotate(-20deg);
    position: absolute;
    bottom: 0;
}
.device--content--item--content--bbl::before {
    left: -1rem;
}
.device--content--item--content--bbl::after {
    right: -1rem;
    transform: rotate(20deg);
}
.device--content--item--content .slider {
    position: relative;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content .slider {
        height: 28rem;
    }
}
@media only screen and (min-width: 769px) {
    .device--content--item--content .slider .slider-item {
        height: 26rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.device--content--item--content .slider .slider-item picture {
    width: 25rem;
    margin: 0 auto;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content .slider .slider-item picture {
        width: 28rem;
    }
}
.device--content--item--content .slider .slick-prev,
.device--content--item--content .slider .slick-next {
    position: absolute;
    z-index: 3;
    top: 33%;
    cursor: pointer;
    background: url(../img/slider-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 1.7rem;
    height: 1.7rem;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content .slider .slick-prev,
    .device--content--item--content .slider .slick-next {
        width: 2rem;
        height: 2rem;
        top: 40%;
    }
}
.device--content--item--content .slider .slick-prev {
    left: 2.5%;
    transform: rotate(180deg);
}
.device--content--item--content .slider .slick-next {
    right: 2.5%;
    transform: rotate(0deg);
}
.device--content--item--content .slider .slick-dots {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-top: 1.3rem;
}
.device--content--item--content .slider .slick-dots li {
    display: inline-block;
    margin: 0 0.5rem;
}
.device--content--item--content .slider .slick-dots button {
    color: transparent;
    outline: none;
    width: 0.5rem;
    height: 0.5rem;
    display: block;
    border-radius: 9999px;
    background: #bdbdbd;
}
.device--content--item--content .slider .slick-dots .slick-active button {
    background: #004ca6;
}
.device--content--item--content .name {
    margin-top: 1rem;
    font-size: 2rem;
    color: #004ca6;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content .name {
        font-size: 2.4rem;
    }
}
.device--content--item--content--spec {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    row-gap: 2.4rem;
    position: relative;
}
.device--content--item--content--spec::before,
.device--content--item--content--spec::after {
    content: "";
    background: #c5e4ff;
    position: absolute;
    top: 0;
    left: 50%;
}
.device--content--item--content--spec::before {
    width: 1px;
    height: 100%;
}
.device--content--item--content--spec::after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
}
.device--content--item--content--spec li {
    width: 50%;
}
.device--content--item--content--spec li .label {
    font-size: 1.8rem;
    font-weight: bold;
}
.device--content--item--content--spec li .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1rem;
}
.device--content--item--content--spec li .bottom .line {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.device--content--item--content--spec li .bottom .line .font-din {
    display: inline-block;
    width: 6.8rem;
    height: 1.7rem;
    line-height: 1.7rem;
    font-size: 1.2rem;
    border: solid 0.1rem #50a3ed;
    color: #50a3ed;
    text-align: center;
}
.device--content--item--content--spec li .bottom .icon {
    width: 4.7rem;
    height: 4.7rem;
}
.device--content--item--content--spec li .bottom .txt {
    display: inline-block;
    font-size: 1.4rem;
}
.device--content--item--content--spec li .bottom .txt .note {
    font-size: 0.8rem;
}
.device--content--item--content--spec li .bottom .txt .blue {
    margin-top: 0.8rem;
    color: #50a3ed;
    font-size: 2.8rem;
}
.device--content--item--content--spec li .bottom .txt .blue .small {
    font-size: 1.8rem;
    font-weight: bold;
}
.device--content--item--content .note {
    margin-top: 1.5rem;
    text-align: left;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content .note {
        margin-top: 2.5rem;
    }
}
.device--content--item--content .accordion-area {
    margin-top: 2rem;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content .accordion-area {
        margin-top: 2.5rem;
    }
}
.device--content--item--content .accordion-area .title {
    cursor: pointer;
    width: 33rem;
    height: 3.5rem;
    line-height: 3.5rem;
    background: #333;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-weight: bold;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content .accordion-area .title {
        width: 38rem;
        height: 4rem;
        line-height: 4rem;
    }
}
.device--content--item--content .accordion-area .title::before {
    content: "";
    background: url(../img/triangle-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 0.9rem;
    height: 0.8rem;
    position: absolute;
    right: 1.7rem;
    top: 50%;
    transform: translateY(-50%);
}
.device--content--item--content .accordion-area .title.close::before {
    transform: translateY(-50%) rotate(180deg);
}
.device--content--item--content .accordion-area .box {
    border: 1px solid #333;
    display: none;
    padding: 2rem;
    background: #fff;
}
@media only screen and (min-width: 769px) {
    .device--content--item--content .accordion-area .box {
        width: 38rem;
    }
}
.device--content--item--content .accordion-area .box dl {
    font-size: 1.4rem;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.device--content--item--content .accordion-area .box dl dt {
    font-weight: bold;
    width: 40%;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    position: relative;
}
.device--content--item--content .accordion-area .box dl dt::before {
    content: "";
    background: #e1e1e1;
    width: 29rem;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.device--content--item--content .accordion-area .box dl dt.last::before {
    display: none;
}
.device--content--item--content .accordion-area .box dl dd {
    width: 60%;
    height: 4.8rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
}
.device--content--item.pocket-wifi .device--content--item--ttl {
    position: relative;
}
.device--content--item.pocket-wifi .device--content--item--ttl::before {
    content: "";
    background: url(../img/device-character-1.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 10rem;
    height: 9.7rem;
    position: absolute;
    left: 1.4rem;
    bottom: 0;
}
.device--content--item.home-router .device--content--item--ttl {
    position: relative;
}
.device--content--item.home-router .device--content--item--ttl::before {
    content: "";
    background: url(../img/device-character-2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 9rem;
    height: 10.7rem;
    position: absolute;
    left: 1.4rem;
    bottom: 0;
}
.device--content--item.home-router .slider .slider-item picture {
    width: 10.3rem;
}
@media only screen and (min-width: 769px) {
    .device--content--item.home-router .slider .slider-item picture {
        width: 12.1rem;
    }
}
/*------------------------------X12モバイルルーター専用割引用------------------------------*/
/* 横長端末専用レイアウト */
.device--content--item.horizontal-layout {
    border: none;
    border-radius: 0.8rem;
    padding: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
@media only screen and (min-width: 769px) {
    .device--content--item.horizontal-layout {
        width: 100%;
        margin-bottom: 2rem;
        margin-top: 3rem;
        box-sizing: border-box;
        max-width: 100vw !important;
        background: #fff;
        border: 3px solid #c5e4ff;
        border-radius: 0.8rem;
        padding: 0;
        overflow: hidden;
    }
}
.horizontal-flex {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
/* 1000px以上で横並びレイアウト */
@media only screen and (min-width: 1000px) {
    .horizontal-flex {
        flex-direction: row;
        justify-content: space-between;
    }
}
/* 900px～999pxの間で縦並びレイアウト（中央揃え） */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    .horizontal-flex {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
        justify-content: center;
    }
}
.device--content--item--left {
    flex: 1 1 320px;
    min-width: 260px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
/* 900px～999pxの間でのleft側の調整 */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    .device--content--item--left {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
    }
}
.device--content--item--left .name {
    padding-top: 10rem;
    font-size: 4.4rem;
}
@media only screen and (min-width: 1000px) {
    .device--content--item--left .name {
        padding-top: 6rem;
        font-size: 2.4rem;
    }
}
@media screen and (max-width: 768px) {
    .device--content--item--left .name {
        padding-top: 0rem;
        font-size: 2rem;
    }
}
@media only screen and (min-width: 900px) {
    .device--content--item--left {
        flex: 1 1 320px;
    }
}
@media (max-width: 899px) {
    .horizontal-flex {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        display: block;
    }
    .device--content--item--left,
    .device--content--item--right {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

.device--content--item--right {
    flex: 2 1 400px;
    min-width: 300px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 2.5rem;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}
/* 900px～999pxの間でのright側の調整 */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    .device--content--item--right {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
        padding: 2rem 1.5rem;
        flex: auto;
    }
}
.device--content--item--right .name {
    font-size: 2.7rem;
    color: #004ca6;
    font-weight: bold;
    margin-bottom: 1.2rem;
    text-align: center;
}
.device--content--item--right .device--content--item--content--spec {
    margin-bottom: 1.2rem;
}
.device--content--item--right .note {
    font-size: 1.1rem;
    color: #808080;
    margin-bottom: 1.2rem;
}
.device--content--item--right .accordion-area {
    width: 38rem !important;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.device--content--item--ttl .campaign-msg {
    display: block;
    font-size: 1.5rem;
    color: #de1f1c;
    font-weight: bold;
    margin-bottom: 1.2rem;
    text-align: center;
}
@media only screen and (min-width: 769px) {
    .device--content--item--ttl .campaign-msg {
        font-size: 2.6rem;
    }
}
.device--content--item--ttl .campaign-msg .small {
    background-color: #ffcecf;
    border-radius: 13px;
    padding: 0 1rem;
}
.device--content--item--ttl .campaign-msg .discount{
    background-color: #ffcecf;
    padding: 0 1rem;
    position:static;
    border-radius: 13px;
}
.device--content--item--ttl .campaign-msg .discount-label{
    margin-right: 12rem;
}
@media only screen and (max-width: 899px) {
    .horizontal-flex {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }

    .device--content--item--left,
    .device--content--item--right {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        padding: 2rem 1rem;
        box-sizing: border-box;
    }
}
@media only screen and (max-width: 768px) {
    .device--content--item.horizontal-layout {
        width: 100%;
        margin-top: 2rem;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    /* モバイル版でのバッジサイズ調整 */
    .campaign-badge {
        top: -5px;
        right: -5px;
        padding: 5px 8px;
        max-width: 80px;
        transform: rotate(3deg);
    }
    .campaign-badge .badge-text {
        font-size: 0.7rem;
        line-height: 1.1;
    }
    .horizontal-flex {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .device--content--item--left,
    .device--content--item--right {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 2rem 1rem;
        box-sizing: border-box;
    } 
    .device--content--item.horizontal-layout .device--content--item--left .slider {
        max-width: 100%;
        width: 100%;
    }
    .device--content--item.horizontal-layout .device--content--item--left .slider-item picture {
        width: 100%;
        max-width: 25rem;
        margin: 0 auto;
    }
    .device--content--item.horizontal-layout .device--content--item--left .slider-item img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .device--content--item.horizontal-layout .device--content--item--left .slider .slick-prev,
    .device--content--item.horizontal-layout .device--content--item--left .slider .slick-next {
    top: 33%;
    }
    .device--content--item.horizontal-layout .device--content--item--content .accordion-area .title {
        right: 0%;
        position: relative;
        width: 100%;
        max-width: 31.2rem;
        margin: 0 auto;
    }
}
/* キャンペーンバッジのスタイル */
.campaign-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transform: rotate(5deg);
    max-width: 120px;
    text-align: center;
}

.campaign-badge .badge-text {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.2;
    display: block;
}

/* スライダーアイテムの位置調整 */
.device--content--item.horizontal-layout .device--content--item--left .slider-item {
    position: relative;
}

/* 900px～999pxの間での画像サイズ調整 */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    .device--content--item.horizontal-layout .device--content--item--left .slider {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
        height: 25rem;
    }
    .device--content--item.horizontal-layout .device--content--item--left .slider-item,
    .device--content--item.horizontal-layout .device--content--item--left .slider-item picture,
    .device--content--item.horizontal-layout .device--content--item--left .slider-item img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }
    .device--content--item.horizontal-layout .device--content--item--left .slider .slick-prev,
    .device--content--item.horizontal-layout .device--content--item--left .slider .slick-next {
        top: 50%;
    }
    .device--content--item.horizontal-layout .device--content--item--content .accordion-area .title {
        right: 0%;
        position: relative;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 1000px) {
    .device--content--item.horizontal-layout .device--content--item--left .slider {
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        height: 19rem;
    }
    .device--content--item.horizontal-layout .device--content--item--left .slider-item,
    .device--content--item.horizontal-layout .device--content--item--left .slider-item picture,
    .device--content--item.horizontal-layout .device--content--item--left .slider-item img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }
    .device--content--item.horizontal-layout .device--content--item--left .slider .slick-prev,
    .device--content--item.horizontal-layout .device--content--item--left .slider .slick-next {
    top: 55%;
    }
    .device--content--item.horizontal-layout .device--content--item--content .accordion-area .title {
    right: 0%;
    position: relative;
    }
    /* PC版でのバッジサイズ調整 */
    .campaign-badge {
        top: -8px;
        right: -8px;
        padding: 6px 10px;
        max-width: 100px;
    }
    .campaign-badge .badge-text {
        font-size: 0.8rem;
    }
}

/*------------------------------補償オプション option------------------------------*/
.option {
    background: #50a3ed;
    padding: 4.5rem 3rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .option {
        padding: 6rem 22rem;
    }
}
.option::before {
    content: "";
    background: url(../img/option-icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 14.8rem;
    height: 11rem;
    position: absolute;
    right: 0rem;
    top: 10.8rem;
}
@media only screen and (min-width: 769px) {
    .option::before {
        width: 19.2rem;
        height: 14.5rem;
        right: 31.2rem;
        top: 5.7rem;
    }
}
.option--deco {
    width: 12rem;
    position: absolute;
    top: -4.6rem;
    left: 1.5rem;
    z-index: 3;
}
@media only screen and (min-width: 769px) {
    .option--deco {
        width: 17rem;
        left: 36rem;
    }
}
.option--ttl {
    text-align: center;
    font-size: 3rem;
    color: #fff;
    font-weight: bold;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .option--ttl {
        font-size: 4.5rem;
    }
}
.option--ttl figure {
    width: 25.5rem;
    margin: 0 auto;
    margin-bottom: 0.8rem;
}
@media only screen and (min-width: 769px) {
    .option--ttl figure {
        display: inline-block;
        width: 32.8rem;
        margin-bottom: 0;
        transform: translateY(2rem);
        margin-right: 1rem;
    }
}
.option--content {
    background: #fff;
    border-radius: 0.8rem;
    margin-top: 3rem;
    padding: 3rem 2rem;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .option--content {
        margin-top: 4.5rem;
        padding: 5rem 9rem;
    }
}
.option--content--graph {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: flex-end;
    gap: 0.2rem;
}
@media only screen and (min-width: 769px) {
    .option--content--graph {
        gap: 2rem;
    }
}
.option--content--graph--item {
    border: #004ca6 solid 1px;
    width: 9.6rem;
}
@media only screen and (min-width: 769px) {
    .option--content--graph--item {
        width: 26rem;
    }
}
.option--content--graph--item .ttl {
    background: #004ca6;
    width: 100%;
    height: 3.5rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (min-width: 769px) {
    .option--content--graph--item .ttl {
        height: 4.4rem;
        font-size: 1.8rem;
    }
}
.option--content--graph--item--bottom {
    padding: 1rem 0 0.5rem;
}
@media only screen and (min-width: 769px) {
    .option--content--graph--item--bottom {
        padding: 1.5rem 0 2rem;
    }
}
.option--content--graph--item--bottom .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.option--content--graph--item--bottom .list li {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.4;
}
@media only screen and (min-width: 769px) {
    .option--content--graph--item--bottom .list li {
        font-size: 1.6rem;
    }
}
.option--content--graph--item--bottom .price {
    margin-top: 0.5rem;
    color: #004ca6;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}
@media only screen and (min-width: 769px) {
    .option--content--graph--item--bottom .price {
        font-size: 1.8rem;
    }
}
.option--content--graph--item--bottom .price .bg-yellow {
    background: linear-gradient(transparent 40%, #ffff00 60%);
}
.option--content--graph--item--bottom .price .bg-yellow .font-din {
    font-size: 2.4rem;
}
@media only screen and (min-width: 769px) {
    .option--content--graph--item--bottom .price .bg-yellow .font-din {
        font-size: 3.8rem;
    }
}
.option--content--graph--item--bottom .price .tax {
    display: inline-block;
    font-weight: normal;
    font-size: 0.8rem;
    transform: translateY(-0.5rem);
}
@media only screen and (min-width: 769px) {
    .option--content--graph--item--bottom .price .tax {
        font-size: 1.3rem;
        transform: translateY(0);
        margin-left: 0.5rem;
    }
}
.option--content--graph--item.plus {
    border: 1px solid #002f66;
}
.option--content--graph--item.plus .ttl {
    background: #002f66;
}
.option--content--graph--item.plus .price {
    color: #002f66;
}
.option--content--graph--item.plus-wide {
    border: 1px solid #001631;
}
.option--content--graph--item.plus-wide .ttl {
    background: #001631;
}
.option--content--graph--item.plus-wide .price {
    color: #001631;
}
.option--content .note-box {
    margin-top: 1.5rem;
    text-align: justify;
}

/*------------------------------選ばれる理由 reason------------------------------*/
.reason {
    background: #eef7ff;
    padding: 6rem 3rem 15rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .reason {
        padding: 11rem 22rem 18rem;
    }
}
.reason::before,
.reason::after {
    content: "";
    background: url(../img/reason-bg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 53.6rem;
    position: absolute;
    left: 0;
}
@media only screen and (min-width: 769px) {
    .reason::before,
    .reason::after {
        content: "";
        background: url(../img/reason-bg-pc.webp);
        height: 64.5rem;
    }
}
.reason::before {
    top: 0;
}
.reason::after {
    bottom: 0;
    transform: rotate(180deg);
}
.reason--ttl {
    text-align: center;
    color: #004ca6;
    font-size: 1.5rem;
    font-weight: bold;
    font-style: italic;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .reason--ttl {
        font-size: 2.6rem;
    }
}
.reason--ttl .font-din {
    font-style: italic;
    font-size: 2rem;
}
@media only screen and (min-width: 769px) {
    .reason--ttl .font-din {
        font-size: 3.5rem;
    }
}
.reason--ttl .main {
    font-style: normal;
    display: inline-block;
    color: #fff;
    font-size: 3rem;
    background: #004ca6;
    padding: 0.5rem 1rem;
    transform: skew(-15deg);
    position: relative;
}
@media only screen and (min-width: 769px) {
    .reason--ttl .main {
        font-size: 3.8rem;
        padding: 0.5rem 1.5rem;
        margin-left: 1rem;
    }
}
.reason--ttl .main::before {
    content: "";
    background: url(../img/reason-ttl-icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 6.1rem;
    height: 6.2rem;
    position: absolute;
    right: -3.5rem;
    top: -3rem;
    transform: skew(15deg);
}
@media only screen and (min-width: 769px) {
    .reason--ttl .main::before {
        width: 8rem;
        height: 8rem;
        right: -5rem;
        top: -4rem;
    }
}
.reason--ttl .main .small {
    font-size: 2.6rem;
}
@media only screen and (min-width: 769px) {
    .reason--ttl .main .small {
        font-size: 3.3rem;
    }
}
.reason--list {
    margin-top: 12.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13.3rem;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .reason--list {
        margin-top: 20.3rem;
        gap: 20.5rem;
    }
}
.reason--list--item {
    background: #fff;
    width: 100%;
    border-radius: 0.8rem;
    padding: 3rem 2rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .reason--list--item {
        padding: 4rem 12rem;
    }
}
.reason--list--item::after {
    content: "";
    background: url(../img/uq-logo.png);
    width: 8rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 2rem;
    top: -11rem;
}
@media only screen and (min-width: 769px) {
    .reason--list--item::after {
        top: -13rem;
        left: 25rem;
    }
}
@media only screen and (min-width: 769px) {
    .reason--list--item.point-01 {
        padding: 4rem 8rem;
    }
}
.reason--list--item.point-01::before {
    content: "";
    background: url(../img/reason-character-1.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 11.8rem;
    height: 18.7rem;
    position: absolute;
    left: 50%;
    top: -9.4rem;
    transform: translateX(-50%);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .reason--list--item.point-01::before {
        width: 19.6rem;
        height: 31rem;
        top: -16.3rem;
    }
}
.reason--list--item.point-02::before {
    content: "";
    background: url(../img/reason-character-2.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 13rem;
    height: 20.6rem;
    position: absolute;
    left: 50%;
    top: -10.3rem;
    transform: translateX(-50%);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .reason--list--item.point-02::before {
        width: 23rem;
        height: 36.5rem;
        top: -17.5rem;
    }
}
.reason--list--item.point-03::before {
    content: "";
    background: url(../img/reason-character-3.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 18rem;
    height: 18.3rem;
    position: absolute;
    left: 50%;
    top: -11.3rem;
    transform: translateX(-50%);
    z-index: -1;
}
@media only screen and (min-width: 769px) {
    .reason--list--item.point-03::before {
        width: 26.4rem;
        height: 27.2rem;
        top: -18.3rem;
    }
}
.reason--list--item .point {
    text-align: center;
    color: #50a3ed;
    text-shadow: 0.2rem 0.2rem 0 #fff, -0.2rem -0.2rem 0 #fff,
        -0.2rem 0.2rem 0 #fff, 0.2rem -0.2rem 0 #fff, 0px 0.2rem 0 #fff,
        0 -0.2rem 0 #fff, -0.2rem 0 0 #fff, 0.2rem 0 0 #fff;
    font-size: 3rem;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -40%);
}
@media only screen and (min-width: 769px) {
    .reason--list--item .point {
        font-size: 4.5rem;
    }
}
.reason--list--item--ttl {
    text-align: center;
    position: relative;
}
.reason--list--item--ttl::before {
    content: "@FUJI TELEVISION";
    font-size: 0.8rem;
    color: #808080;
    font-weight: normal;
    position: absolute;
    right: -1rem;
    top: -5rem;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--ttl::before {
        right: 15rem;
        top: -7rem;
    }
}
.reason--list--item--ttl .bbl {
    display: inline-block;
    margin-bottom: 0.8rem;
    font-size: 1.6rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--ttl .bbl {
        font-size: 2rem;
    }
}
.reason--list--item--ttl .bbl::before,
.reason--list--item--ttl .bbl::after {
    content: "";
    display: inline-block;
    background: #333;
    width: 0.2rem;
    height: 2.2rem;
    position: absolute;
    bottom: -0.3rem;
}
.reason--list--item--ttl .bbl::before {
    left: -1.5rem;
    transform: rotate(-30deg);
}
.reason--list--item--ttl .bbl::after {
    right: -1.5rem;
    transform: rotate(30deg);
}
.reason--list--item--ttl .main {
    color: #50a3ed;
    font-size: 2.2rem;
    line-height: 1.3;
    background: linear-gradient(180deg, transparent 40%, #ffff00 60%);
}
@media only screen and (min-width: 769px) {
    .reason--list--item--ttl .main {
        font-size: 2.8rem;
    }
}
.reason--list--item--ttl .main .note {
    font-size: 0.8rem;
    font-weight: normal;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--ttl .main .note {
        font-size: 1rem;
    }
}
.reason--list--item--ttl .main .small {
    font-size: 1.8rem;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--ttl .main .small {
        font-size: 2.4rem;
    }
}
.reason--list--item--box {
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    row-gap: 2.2rem;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--box {
        margin-bottom: 2rem;
        -moz-column-gap: 1rem;
        column-gap: 1rem;
    }
}
.reason--list--item--box li {
    width: 14rem;
    height: 18.3rem;
    border-radius: 0.8rem;
    border: solid 0.2rem #50a3ed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--box li {
        width: 20rem;
        height: 19.7rem;
    }
}
.reason--list--item--box li::before {
    content: "";
    background: url(../img/quotation.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 2.6rem;
    height: 1.8rem;
    position: absolute;
    left: 1rem;
    top: -1rem;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--box li::before {
        width: 3rem;
        height: 2rem;
        left: 1.5rem;
        top: -1rem;
    }
}
.reason--list--item--box li.second {
    gap: 1rem;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--box li.second {
        gap: 2rem;
    }
}
.reason--list--item--box li .icon {
    width: 8rem;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--box li .icon {
        width: 9.2rem;
    }
}
.reason--list--item--box li .li-txt {
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--pc-flex {
        margin-top: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-content: space-between;
    }
}
.reason--list--item--pc-flex--net-work {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--pc-flex--net-work {
        width: 40%;
        margin-top: 0;
    }
}
.reason--list--item--pc-flex--net-work::before {
    content: "";
    background: url(../img/dotted-triangle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 17.9rem;
    height: 17.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.reason--list--item--pc-flex--net-work li {
    width: 50%;
}
.reason--list--item--pc-flex--net-work li.first {
    width: 100%;
}
.reason--list--item--pc-flex--net-work li .circle {
    margin: 0 auto;
    background: #eef7ff;
    width: 13rem;
    height: 13rem;
    border-radius: 9999px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.3;
    border: 2px solid #50a3ed;
    position: relative;
    z-index: 2;
}
.reason--list--item--pc-flex--net-work li .circle .font-din {
    color: #50a3ed;
    font-size: 1.8rem;
    margin-top: 0.5rem;
}
.reason--list--item--pc-flex figure {
    width: 30%;
    padding-left: 3rem;
}
@media only screen and (min-width: 769px) {
    .reason--list--item--pc-flex .pc-right {
        width: 55%;
    }
}
.reason--list--item .txt {
    margin-top: 1.5rem;
    line-height: 1.7;
    text-align: justify;
}
@media only screen and (min-width: 769px) {
    .reason--list--item .txt {
        margin-top: 0;
    }
}
.reason--list--item .note-box {
    margin-top: 1rem;
}
.reason .btn-wrap {
    position: relative;
    z-index: 3;
}

/*------------------------------お支払いについて payment------------------------------*/
.payment {
    background: #ffffd2;
    border-radius: 0.8rem;
    width: 33rem;
    box-shadow: 0.5rem 0.7rem 0.5rem rgba(17, 70, 115, 0.2);
    margin: -8rem 3rem -11.7rem;
    padding: 3rem 0 2rem;
    position: relative;
    text-align: center;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .payment {
        width: 64.5rem;
        padding: 4rem 0 3rem;
        margin: -9.5rem auto -14rem;
    }
}
.payment::before {
    content: "";
    background: url(../img/credit-deco.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 15rem;
    height: 10rem;
    position: absolute;
    right: -4rem;
    top: -4rem;
}
@media only screen and (min-width: 769px) {
    .payment::before {
        width: 25rem;
        height: 18rem;
        right: -6rem;
        top: -8rem;
    }
}
.payment--ttl {
    font-size: 2.6rem;
    font-weight: bold;
}
@media only screen and (min-width: 769px) {
    .payment--ttl {
        font-size: 3.8rem;
    }
}
.payment--ttl .small {
    font-size: 2.2rem;
}
@media only screen and (min-width: 769px) {
    .payment--ttl .small {
        font-size: 3.3rem;
    }
}
.payment p {
    line-height: 1.7;
    margin-top: 1rem;
}
@media only screen and (min-width: 769px) {
    .payment p {
        margin-top: 2rem;
    }
}
.payment figure {
    width: 27rem;
    margin: 0 auto;
    margin-top: 1rem;
}
@media only screen and (min-width: 769px) {
    .payment figure {
        width: 32rem;
        margin-top: 2.2rem;
    }
}

/*------------------------------流れ flow------------------------------*/
.flow {
    padding: 15.3rem 3rem 0;
    background: #c5e4ff;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .flow {
        padding: 18.2rem 22rem 0;
    }
}
.flow--ttl {
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: #004ca6;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .flow--ttl {
        font-size: 3.8rem;
    }
}
.flow--ttl::before,
.flow--ttl::after {
    content: "";
    background: url(../img/flow-bbl-deco.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 3.7rem;
    height: 3.7rem;
    position: absolute;
    top: 1rem;
}
@media only screen and (min-width: 769px) {
    .flow--ttl::before,
    .flow--ttl::after {
        top: 1.5rem;
    }
}
.flow--ttl::before {
    left: -1.5rem;
}
.flow--ttl::after {
    right: -1.5rem;
    transform: scale(-1, 1);
}
.flow--ttl .small {
    font-size: 2.6rem;
}
@media only screen and (min-width: 769px) {
    .flow--ttl .small {
        font-size: 3.3rem;
    }
}
.flow--content {
    margin-top: -1.5rem;
    background: #fff;
    width: 100%;
    border-radius: 0.8rem;
    padding: 4.4rem 2rem 3rem;
    position: relative;
}
@media only screen and (min-width: 769px) {
    .flow--content {
        padding: 5.5rem 13rem 5rem;
    }
}
.flow--content::before {
    content: "";
    background: url(../img/flow-bbl.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 6.8rem;
    height: 2.8rem;
    position: absolute;
    bottom: 0;
    left: 8.5rem;
    transform: translateY(100%);
}
@media only screen and (min-width: 769px) {
    .flow--content::before {
        left: 62.7rem;
    }
}
.flow--content::after {
    content: "";
    background: url(../img/flow-bbl-deco.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 3.7rem;
    height: 3.7rem;
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    transform: scale(1, -1);
}
.flow--content ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
@media only screen and (min-width: 769px) {
    .flow--content ul {
        gap: 3rem;
        align-items: flex-start;
    }
}
.flow--content ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.3rem;
    flex-wrap: wrap;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li {
        gap: 4.5rem;
        row-gap: 0;
        justify-content: flex-start;
    }
}
.flow--content ul li .img {
    width: 15.2rem;
    margin-left: -5.8rem;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li .img {
        margin-left: 0;
    }
}
.flow--content ul li .txt-wrap {
    width: 18rem;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li .txt-wrap {
        width: auto;
    }
}
.flow--content ul li .txt-wrap .ttl {
    font-weight: bold;
    color: #004ca6;
    font-size: 2.2rem;
    position: relative;
    line-height: 1.3;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li .txt-wrap .ttl {
        border-bottom: 2px dashed #004ca6;
        padding-bottom: 1rem;
        display: inline-block;
    }
}
.flow--content ul li .txt-wrap .ttl::before {
    content: "";
    background: url(../img/flow-dotted.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 21.65rem;
    height: 3.25rem;
    position: absolute;
    right: 0;
    bottom: -4.5rem;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li .txt-wrap .ttl::before {
        display: none;
    }
}
.flow--content ul li .txt-wrap .ttl .small {
    font-size: 1.8rem;
}
.flow--content ul li .txt-wrap .ttl .free {
    display: block;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    background: #e81d77;
    width: 7.2rem;
    height: 2.2rem;
    line-height: 2.2rem;
    border-radius: 9999px;
    position: absolute;
    right: -0.5rem;
    bottom: 0;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li .txt-wrap .ttl .free {
        position: inherit;
        display: inline-block;
        width: 8rem;
        height: 3rem;
        font-size: 1.6rem;
        line-height: 3rem;
        bottom: auto;
        margin-left: 1rem;
    }
}
.flow--content ul li .txt-wrap p {
    margin-top: 2.5rem;
    line-height: 1.7;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li .txt-wrap p {
        margin-top: 1rem;
    }
}
.flow--content ul li .txt-wrap p.note {
    margin-top: 0;
}
.flow--content ul li .txt-wrap a {
    margin-top: 1.4rem;
    display: block;
    width: 18rem;
    height: 3.5rem;
    background: #333;
    text-align: center;
    line-height: 3.5rem;
    color: #fff;
    position: relative;
    font-size: 1.2rem;
}
.flow--content ul li .txt-wrap a::before {
    content: "";
    background: url(../img/triangle-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 0.8rem;
    height: 0.7rem;
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
}
.flow--content ul li.flow-2 {
    gap: 0;
}
.flow--content ul li.flow-2 .img {
    margin-left: 0;
    margin-right: -5.8rem;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li.flow-2 .img {
        margin-right: 4.5rem;
    }
}
.flow--content ul li.flow-2 .txt-wrap .ttl::before {
    transform: scale(-1, 1);
    right: inherit;
    left: 0;
}
.flow--content ul li.flow-2 .btn-wrap {
    margin-top: 1rem;
    transition: all 0.5s;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li.flow-2 .btn-wrap {
        margin-top: 0;
        width: 100%;
    }
}
.flow--content ul li.flow-2 .btn-wrap .sub {
    font-weight: bold;
    font-size: 1.4rem;
    color: #004ca6;
    width: 26rem;
    height: 3rem;
    line-height: 3rem;
    background: #fff;
    border-radius: 0.5rem;
    border: #ffff00 solid 0.2rem;
    position: relative;
    text-align: center;
    margin: 0 auto;
    z-index: 2;
}
.flow--content ul li.flow-2 .btn-wrap .sub .font-din {
    font-size: 1.8rem;
}
.flow--content ul li.flow-2 .btn-wrap .sub::before {
    content: "";
    position: absolute;
    top: 98%;
    left: 50%;
    margin-left: -1rem;
    border: 1rem solid transparent;
    border-top: 1rem solid #fff;
}
.flow--content ul li.flow-2 .btn-wrap .cv-btn {
    display: block;
    margin: 0 auto;
    margin-top: -1rem;
    background: #ffff00;
    width: 29rem;
    height: 6.7rem;
    border-radius: 0.8rem;
    box-shadow: 0 0.7rem 0 #dbdb00;
    position: relative;
    text-align: center;
    line-height: 6.7rem;
    font-size: 2.2rem;
    color: #004ca6;
    transition: all 0.5s;
}
@media only screen and (min-width: 769px) {
    .flow--content ul li.flow-2 .btn-wrap .cv-btn {
        width: 37.5rem;
        height: 6.7rem;
        line-height: 6.7rem;
        font-size: 2.2rem;
    }
}
.flow--content ul li.flow-2 .btn-wrap .cv-btn::before {
    content: "";
    background: url(../img/triangle-blue-3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 0.9rem;
    height: 0.8rem;
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}
.flow--content ul li.flow-2 .btn-wrap:hover {
    transform: translateY(0.6rem);
    position: relative;
    z-index: 2;
}
.flow--content ul li.flow-2 .btn-wrap:hover .cv-btn {
    box-shadow: 0 0.1rem 0 #dbdb00;
    background: #ffff7d;
}
.flow--content ul .triangle {
    margin: 0 auto;
}
.flow--character {
    width: 23.6rem;
    margin-top: -5rem;
    margin-left: 12rem;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .flow--character {
        width: 45.5rem;
        margin-top: -22.8rem;
        margin-left: inherit;
        margin-right: -20.8rem;
    }
}
.flow--character::before {
    content: "";
    background: url(../img/uq-logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 8.1rem;
    height: 3.1rem;
    position: absolute;
    left: -10rem;
    bottom: 8rem;
}
@media only screen and (min-width: 769px) {
    .flow--character::before {
        bottom: 0;
    }
}
.flow--character::after {
    content: "@FUJI TELEVISION";
    font-size: 0.8rem;
    color: #fff;
    font-weight: normal;
    position: absolute;
    right: 3rem;
    bottom: 1rem;
}
@media only screen and (min-width: 769px) {
    .flow--character::after {
        font-size: 1rem;
        right: 6rem;
    }
}

/*------------------------------対応エリア area------------------------------*/
.area {
    padding: 6rem 3rem;
}
@media only screen and (min-width: 769px) {
    .area {
        padding: 11rem 22rem;
    }
}
.area--ttl {
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.3;
}
@media only screen and (min-width: 769px) {
    .area--ttl {
        font-size: 3.8rem;
    }
}
.area--ttl .small {
    font-size: 2.6rem;
}
@media only screen and (min-width: 769px) {
    .area--ttl .small {
        font-size: 3.3rem;
    }
}
.area .txt {
    margin-top: 2rem;
    line-height: 1.8;
    text-align: center;
}
@media only screen and (min-width: 769px) {
    .area .txt {
        margin-top: 3rem;
    }
}
.area .txt .circle-1 {
    color: #fd8b8f;
}
.area .txt .circle-2 {
    color: #fec76d;
}
.area .txt .circle-3 {
    color: #ffef81;
}
.area figure {
    margin-top: 2rem;
    width: 100%;
    height: 46.7rem;
}
@media only screen and (min-width: 769px) {
    .area figure {
        margin-top: 3rem;
        height: 48rem;
    }
}
.area .btn-wrap {
    margin-top: 3rem;
    font-weight: bold;
    position: relative;
    transition: all 0.5s;
}
@media only screen and (min-width: 769px) {
    .area .btn-wrap {
        margin-top: 4rem;
    }
}
.area .btn-wrap .sub {
    font-size: 1.4rem;
    color: #004ca6;
    width: 26rem;
    height: 3rem;
    line-height: 3rem;
    background: #fff;
    border-radius: 0.5rem;
    border: #ffff00 solid 0.2rem;
    position: relative;
    text-align: center;
    margin: 0 auto;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .area .btn-wrap .sub {
        width: 28rem;
        height: 3.5rem;
        line-height: 3.5rem;
    }
}
.area .btn-wrap .sub .font-din {
    font-size: 1.8rem;
}
@media only screen and (min-width: 769px) {
    .area .btn-wrap .sub .font-din {
        font-size: 2rem;
    }
}
.area .btn-wrap .sub::before {
    content: "";
    position: absolute;
    top: 98%;
    left: 50%;
    margin-left: -1rem;
    border: 1rem solid transparent;
    border-top: 1rem solid #fff;
}
.area .btn-wrap--cv {
    display: block;
    margin: 0 auto;
    margin-top: -1rem;
    background: #ffff00;
    width: 33rem;
    height: 6.7rem;
    border-radius: 0.8rem;
    box-shadow: 0 0.7rem 0 #dbdb00;
    position: relative;
    text-align: center;
    line-height: 6.7rem;
    font-size: 2.2rem;
    color: #004ca6;
    transition: all 0.5s;
}
@media only screen and (min-width: 769px) {
    .area .btn-wrap--cv {
        width: 38rem;
        height: 7.7rem;
        line-height: 7.7rem;
        font-size: 2.5rem;
    }
}
.area .btn-wrap--cv::before {
    content: "";
    background: url(../img/triangle-blue-3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 0.9rem;
    height: 0.8rem;
    position: absolute;
    right: 1.7rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}
.area .btn-wrap:hover {
    transform: translateY(0.6rem);
    position: relative;
    z-index: 2;
}
.area .btn-wrap:hover .fv--btn-wrap--cv {
    box-shadow: 0 0.1rem 0 #dbdb00;
    background: #ffff7d;
}

/*------------------------------まとめ sammary------------------------------*/
.sammary {
    background: #50a3ed;
    padding: 6rem 3rem 0;
}
@media only screen and (min-width: 769px) {
    .sammary {
        padding: 9rem 22rem 9rem;
        position: relative;
    }
    .sammary::before {
        content: "";
        background: url(../img/sammary-left.webp);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 28rem;
        height: 39rem;
        position: absolute;
        left: 0rem;
        bottom: 0;
    }
    .sammary::after {
        content: "";
        background: url(../img/sammary-right.webp);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 40rem;
        height: 45rem;
        position: absolute;
        right: -8rem;
        bottom: 0;
    }
}
.sammary--ttl {
    color: #fff;
    text-align: center;
    font-size: 2.4rem;
    font-weight: bold;
}
@media only screen and (min-width: 769px) {
    .sammary--ttl {
        font-size: 3.8rem;
        position: relative;
    }
    .sammary--ttl::before {
        content: "";
        background: url(../img/uq-logo-white.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 4.2rem;
        height: 2.7rem;
        position: absolute;
        left: -15rem;
        top: -3rem;
    }
    .sammary--ttl::after {
        content: "©FUJI TELEVISION";
        font-size: 1rem;
        color: #fff;
        position: absolute;
        right: -16rem;
        bottom: -34rem;
        z-index: 2;
    }
}
.sammary--ttl .font-din {
    font-size: 3.5rem;
}
@media only screen and (min-width: 769px) {
    .sammary--ttl .font-din {
        font-size: 5.5rem;
        margin-right: 2rem;
    }
}
.sammary--list {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 769px) {
    .sammary--list {
        margin-top: 5.5rem;
        flex-direction: row;
        gap: 2rem;
    }
}
.sammary--list--item {
    background: #fff;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1rem;
    justify-content: flex-start;
}
@media only screen and (min-width: 769px) {
    .sammary--list--item {
        width: 30rem;
        height: 10rem;
        padding: auto;
        justify-content: center;
        gap: 1.2rem;
    }
}
.sammary--list--item .icon {
    width: 5.5rem;
}
.sammary--list--item .txt-wrap {
    line-height: 1.3;
    font-weight: bold;
    flex: 1;
    text-align: center;
}
.sammary--list--item .txt-wrap .blue-2 {
    color: #50a3ed;
}
.sammary--list--item .txt-wrap .blue-2 .font-din {
    font-size: 3rem;
}
.sammary .bottom-txt {
    margin-top: 3rem;
    margin-bottom: 1rem;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 1.7;
}
@media only screen and (min-width: 769px) {
    .sammary .bottom-txt {
        margin-bottom: 0;
        font-size: 2.4rem;
    }
}
.sammary .bottom-txt .small {
    font-size: 1.4rem;
}
@media only screen and (min-width: 769px) {
    .sammary .bottom-txt .small {
        font-size: 1.8rem;
    }
}
.sammary .bottom-txt .yellow {
    color: #ffff00;
}
.sammary--img {
    width: 32.6rem;
    margin-top: -2rem;
    position: relative;
}
.sammary--img::before {
    content: "";
    background: url(../img/uq-logo-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 4.2rem;
    height: 2.7rem;
    position: absolute;
    right: 0;
    top: 4rem;
}
.sammary--img::after {
    content: "©FUJI TELEVISION";
    font-size: 0.8rem;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 1.3rem;
}

/*------------------------------よくある質問 faq------------------------------*/
.faq {
    background: #eef7ff;
    padding: 7rem 3rem;
}
@media only screen and (min-width: 769px) {
    .faq {
        padding: 11rem 22rem;
    }
}
.faq--ttl {
    color: #fff;
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
    color: #50a3ed;
    margin-bottom: 5rem;
}
@media only screen and (min-width: 769px) {
    .faq--ttl {
        font-size: 3.8rem;
    }
}
.faq .accordion-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.faq .accordion-area li {
    box-shadow: 0 0.4rem 0.5rem rgba(80, 163, 237, 0.3);
}
.faq .accordion-area li .title {
    cursor: pointer;
    background: #fff;
    width: 33rem;
    height: 6rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    border-radius: 0.8rem 0.8rem 0 0.8rem;
    padding-left: 6.4rem;
    position: relative;
    font-weight: bold;
}
@media only screen and (min-width: 769px) {
    .faq .accordion-area li .title {
        width: 100rem;
        padding-left: 10.5rem;
    }
}
.faq .accordion-area li .title::before {
    content: "Q";
    font-family: "din", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    background: #50a3ed;
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    font-size: 2rem;
    color: #fff;
    border-radius: 9999px;
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
}
@media only screen and (min-width: 769px) {
    .faq .accordion-area li .title::before {
        left: 5rem;
    }
}
.faq .accordion-area li .title::after {
    content: "";
    background: url(../img/triangle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%) rotate(180deg);
    width: 0.9rem;
    height: 0.8rem;
}
@media only screen and (min-width: 769px) {
    .faq .accordion-area li .title::after {
        right: 5rem;
    }
}
.faq .accordion-area li .title.close {
    border-radius: 0.8rem 0.8rem 0 0;
}
.faq .accordion-area li .title.close::after {
    transform: translateY(-50%) rotate(0deg);
}
.faq .accordion-area li .box {
    display: none;
    padding: 2rem;
    line-height: 1.8;
    background: #fff;
    border-radius: 0 0 0rem 0.8rem;
    position: relative;
    text-align: justify;
}
@media only screen and (min-width: 769px) {
    .faq .accordion-area li .box {
        padding: 2.5rem 5rem;
    }
}
.faq .accordion-area li .box::before {
    content: "";
    background: #50a3ed;
    width: 29rem;
    height: 1px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
@media only screen and (min-width: 769px) {
    .faq .accordion-area li .box::before {
        height: 2px;
        width: 90rem;
    }
}
.faq .accordion-area li .box a {
    color: blue;
}

/*------------------------------フッター footer------------------------------*/
footer {
    width: 100%;
    background: #333;
    color: #fff;
    text-align: center;
    padding: 3rem 0;
    line-height: 1.8;
    font-size: 1.2rem;
    font-weight: bold;
}
@media only screen and (min-width: 769px) {
    footer {
        font-size: 1.4rem;
    }
}
footer a {
    text-decoration: underline;
} /*# sourceMappingURL=style.css.map */

/* 在庫限りバッジ（X12キャンペーン用） */
.zaiko-badge {
  position: absolute;
  top: 103%;
  right: 0%;
  width: 45%;
  height: auto;
  z-index: 2;
}
@media only screen and (min-width: 769px) {
  .zaiko-badge {
    width: 26%;
    top: 0%;
    right: 0%;
  }
}