/*------------------------------------
  styles
--------------------------------------*/
html {
    scroll-behavior: smooth;
    --txt-black: #3a3e3f;
    --clr-navy: #48587e;
    --clr-lightBlue: #e7fcff;
    --clr-red: #e50b18;
    --clr-blue: #00bcd4;
    --clr-yellow: #ecbb48;
    --clr-highlight: #fafe3b;
    --clr-bg-body: #d1f3f7;
    --clr-bg-contents: #f6feff;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    color: var(--txt-black);
    line-height: 1.5;
    background: var(--clr-bg-body);

    img {
        max-width: 100%;
    }
}

main {
    max-width: 640px;
    margin: 0 auto;
    background: var(--clr-bg-contents);

    @media screen and (max-width: 768px) {
        /*overflow-x: hidden;*/
    }
}

a {
    transition: all 0.3s;

    &:hover {
        opacity: 0.8;
    }
}

.red {
    color: var(--clr-red);
}

b {
    font-weight: bold;
}

.__bg_red{
background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
font-weight: bold;
}

.__large{
font-size: 120%;
}

/*------------------------------------
  初心者向けページ
--------------------------------------*/
.Beginner {
    .Button {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        border-radius: 100vh;
        background: #e50b18;
        display: grid;
        place-items: center;
        text-decoration: none;
        padding: 16px;
        margin-inline: 16px;
    }

    /* 大見出し */
    .SectionTitle {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        background: var(--clr-blue);
        display: grid;
        gap: 2px;
        position: relative;
        padding: 16px;
        text-align: center;

        &:before,
        &:after {
            content: "";
            display: block;
            height: 2px;
            background: white;
            width: 100%;
            position: absolute;
        }

        &:before {
            top: 2px;
        }

        &:after {
            bottom: 2px;
        }
    }

    /* 小見出し */
    .Heading {
        color: var(--clr-navy);
        font-size: 18px;
        font-weight: 700;
        line-height: 20px;
        border-bottom: 3px solid var(--clr-yellow);
        padding-bottom: 12px;
        margin-top: 16px;
        width: 100%;
    }

    /* 共通スペースとレイアウトリズムを定義 */
    .Wrapper {
        display: grid;
        place-items: center;
        gap: 16px;
        padding: 16px 16px 32px;
    }

    /* テキストハイライト */
    .HighLight {
        background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
        font-weight: bold;
    }

    /* キャンペーン */
    .Campaign {
        margin-top: 30px;
        background-color: #fff;
        border-radius: 10px;

        .human {
            text-align: center;
        }

        .human img {
            max-width: 70%;
            vertical-align: bottom;
        }

        .campaign_title {
            padding: 10px 3px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            background-color: #fd9426;
            border-radius: 10px 10px 0 0;
        }

        .campaign_in {
            padding: 24px 16px;
            background-color: #fff6ed;
            border: solid 1px #fd9426;
            border-top: none;
            border-radius: 0 0 10px 10px;
        }

        .campaign_main {
            line-height: 1.3;
            letter-spacing: 0;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }

        .campaign_time {
            margin-top: 5px;
            text-align: center;
        }

        .campaign_main span.num {
            font-size: 24px;
        }

        .campaign_main span.__small {
            font-size: 14px;
            color: #666;
        }
    }

    /* 初めてのクレジットカードにおすすめ */
    .First {
        padding: 24px 16px 16px;
        display: grid;
        gap: 16px;

        .secTitle {
            color: var(--txt-black);
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;

            &:before,
            &:after {
                height: 1rem;
                background: var(--txt-black);
                width: 2px;
                content: "";
                display: block;
            }

            &:before {
                transform: rotate(-30deg);
            }

            &:after {
                transform: rotate(30deg);
            }
        }

        .card {
            border-radius: 16px;
            overflow: hidden;
            border: 2px solid #d1f3f7;

            .header {
                background: var(--clr-lightBlue);
                display: grid;
                place-items: center;
                padding: 8px;

                .lead {
                    font-size: 14px;
                    font-weight: 700;
                    color: var(--clr-red);
                    display: flex;
                    align-items: center;
                    gap: 4px;

                    img {
                        width: 20px;
                    }
                }

                .title {
                    font-size: 28px;
                    font-weight: 700;
                }

                .text {
                    font-weight: 500;
                }
            }

            .body {
                padding: 16px;
                display: grid;
                gap: 16px;

                .text {
                    font-weight: 500;
                }

                .image {
                    padding-right: 8px;
                    flex: 1;
                }

                .info {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    place-items: center;
                }

                table {
                    text-align: center;
                    width: 100%;

                    th,
                    td {
                        border: 1px solid #d5ebee;
                        padding: 4px 2px;
                        font-weight: 700;
                        font-size: 11px;
                        line-height: 1.3;
                    }

                    th {
                        background: var(--clr-lightBlue);
                    }

                    td {
                        padding-block: 16px;
                    }

                    .mark {
                        color: var(--clr-red);

                        img {
                            width: 18px;
                        }
                    }

                    .description {
                        margin-top: 4px;
                        font-weight: 700;
                        white-space: nowrap;
                    }

                    .red {
                        color: var(--clr-red);
                    }
                }
            }
        }
    }

    /* 記事セクション */
    .Contents {
        margin-top: 32px;

        .text {
            font-weight: 400;
            line-height: 32px;
            /* 200% */
        }

        img {
            width: 100%;
            max-width: 400px;
            margin-inline: auto;
            margin-top: 8px;
        }
    }

    /* クレジットカードの選び方・作り方 */
    .Points {
        margin-top: 32px;
        background: #f6feff;
        display: grid;
        place-items: center;
        padding-bottom: 32px;

        .SectionTitle {
            width: 100%;
        }

        .heading {
            color: var(--clr-navy);
            font-size: 14px;
            font-weight: 700;
            border-bottom: 2px solid var(--clr-blue);
            padding: 16px;
            display: flex;
            justify-content: center;
            align-items: baseline;
            width: 100%;
            gap: 4px;

            .HighLight {
                font-size: 20px;
            }
        }

        .text {
            font-weight: 400;
            line-height: 28px;
            /* 175% */
            padding: 16px 16px 8px;
        }

        img {
            width: 100%;
            max-width: 400px;
            margin-inline: auto;
            margin-top: 8px;
        }
    }

    /* 上記3つのポイントを満たすオススメクレジットカードは…？ */
    .Recommend {
        .title {
            font-size: 22px;
            font-weight: 900;
            color: var(--clr-navy);
            text-align: center;
            padding: 16px;
            display: grid;
            place-items: center;
            gap: 16px;

            &:after {
                display: block;
                content: "";
                width: 24px;
                height: 26px;
                background: url('data:image/svg+xml,<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.8585 11.6884C19.4435 11.1409 20.2149 10.846 21.0098 10.8659C21.8047 10.8857 22.5609 11.2188 23.1188 11.7948C23.6767 12.3708 23.9926 13.1446 23.9999 13.9529C24.0071 14.7612 23.7051 15.5407 23.1577 16.127L14.0721 25.2231C13.4987 25.7964 12.7267 26.1177 11.9225 26.1177C11.1183 26.1177 10.3463 25.7964 9.77293 25.2231L0.863021 16.3077C0.306802 15.7236 -0.00288675 14.9417 2.20289e-05 14.1287C0.00293081 13.3158 0.318208 12.5362 0.878593 11.9562C1.43898 11.3763 2.2001 11.0419 2.99959 11.0244C3.79908 11.0069 4.57363 11.3078 5.15801 11.8627L8.92188 15.6232L8.98252 3.04506C9.00343 -1.0534 15.1344 -0.993876 15.1155 3.0982L15.0528 15.4892L18.8585 11.6884Z" fill="%2348587E"/></svg>');
            }
        }

        .wrapper {
            position: relative;
            padding: 40px 16px 0;

            &:before {
                content: "";
                display: block;
                background: url(../img/img_confetti.png);
                width: 100%;
                height: 190px;
                background-size: contain;
                z-index: 2;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .pop_table {
            width: 100%;
            border: solid 1px #e7f3fe;
        }

        .pop_table th,
        .pop_table td {
            padding: 10px 5px 10px;
            text-align: center;
        }

        .pop_table th {
            padding: 6px 5px 6px;
            width: 10%;
            vertical-align: middle;
            letter-spacing: 0.5em;
            font-size: 13px;
            font-weight: bold;
            background-color: #e7f3fe;
            border: solid 1px #fff;
        }

        .pop_table th span {
            white-space: pre;
            writing-mode: vertical-rl;
            display: inline-block;
        }

        .pop_table th.th-s {
            letter-spacing: 0.1em;
            font-size: 12px;
        }

        .pop_table td {
            width: 30%;
            font-size: 12px;
            border: solid 1px #e7f3fe;
            background: #fff;
        }

        .pop_table tr.middle td {
            vertical-align: middle;
            font-weight: bold;
        }

        .pop_table .crown {
            max-width: 32px;
            margin: 0 auto 8px;
        }

        .pop_table .card {
            width: 90%;
            margin: 0 auto;
        }

        .pop_table .accent {
            color: var(--clr-red);
        }

        a.pop_table_card_link {
            color: var(--txt-black);
        }

        a.card_title_link {
            text-decoration: underline;
        }

        .pop_table .card_title {
            margin-top: 5px;
            font-weight: bold;
        }

        .evaluation {
            max-width: 28px;
            margin: 0 auto 2px;
        }

        .cvBtn-s a {
            display: block;
            padding: 15px 2px;
            letter-spacing: 0.1em;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            background-color: var(--clr-red);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }

        .pop_table .link a {
            position: relative;
            display: inline-block;
            margin-top: 8px;
            margin-left: -5px;
            letter-spacing: 0;
            color: var(--clr-blue);
        }

        .pop_table .link a:before {
            content: "";
            width: 5px;
            height: 5px;
            border: 0;
            border-top: solid 2px var(--clr-blue);
            border-right: solid 2px var(--clr-blue);
            transform: rotate(45deg);
            position: absolute;
            top: 0;
            right: -10px;
            bottom: 0;
            margin: auto;
        }
    }
}

/*------------------------------------
  houkei
--------------------------------------*/
.houkei {
    .Button {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        border-radius: 100vh;
        background: #e50b18;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-decoration: none;
        padding: 16px;
        margin-inline: 16px;

        &.-small {
            font-size: 16px;
            padding: 8px 48px;
            width: max-content;
            margin-inline: auto;
        }
    }

    /* 大見出し */
    .SectionTitle {
        background: white;
        display: grid;
        gap: 2px;
        position: relative;
        padding: 16px;
        text-align: center;
        border-top: 2px solid var(--clr-blue);
        border-bottom: 2px solid var(--clr-blue);
    }

    .Title {
        font-size: 22px;
        font-weight: 700;
        color: var(--clr-navy);

        &.-hasLabel {
            display: flex;
            justify-content: center;
            gap: 4px;
        }

        .label {
            border-radius: 4px;
            background: #fd9426;
            padding: 2px 6px;
            color: white;
            font-size: 14px;
            font-weight: 700;
            display: grid;
            place-items: center;
        }
    }

    /* テキストハイライト */
    .HighLight {
        background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
        font-weight: bold;
    }

    /* テキスト装飾 */
    .Lead {
        color: var(--clr-navy);
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        &:before,
        &:after {
            height: 1rem;
            background: var(--clr-navy);
            width: 2px;
            content: "";
            display: block;
        }

        &:before {
            transform: rotate(-30deg);
        }

        &:after {
            transform: rotate(30deg);
        }
    }

    /* キャンペーン */
    .Campaign {
        margin-top: 0px;
        background-color: #fff;
        border-radius: 10px;

        .human {
            text-align: center;
        }

        .human img {
            max-width: 70%;
            vertical-align: bottom;
        }

        .campaign_title {
            padding: 10px 3px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            background-color: #fd9426;
            border-radius: 10px 10px 0 0;
        }

        .campaign_in {
            padding: 24px 16px;
            background-color: #fff6ed;
            border: solid 1px #fd9426;
            border-top: none;
            border-radius: 0 0 10px 10px;
        }

        .campaign_main {
            line-height: 1.3;
            letter-spacing: 0;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }

        .campaign_time {
            margin-top: 5px;
            text-align: center;
        }

        .campaign_main span.num {
            font-size: 24px;
        }

        .campaign_main span.__small {
            font-size: 14px;
            color: #666;
        }
    }

    /* 券面スライダー */
    .CardSlider {
        padding-block: 16px 32px;
        width: 100%;

        .items {
            display: none;
        }

        .items.slick-initialized {
            display: block;
            /* slickが実行完了したら表示 */
        }

        @media screen and (min-width: 769px) {
            display: flex;
            justify-content: center;
            gap: 10px;

            .items {
                display: block;
            }

            img {
                height: 38px;
            }
        }

        .slick-slide {
            margin: 0 4px;
        }
    }

    /* ETC付帯クレカ選び3つのポイント */
    .Point {
        .contents {
            padding: 16px;
            padding-bottom: 32px;
            display: grid;
            gap: 8px;
        }

        .point3_accordion {
            border: solid 1px #3a3e3f;
            overflow: hidden;
            position: relative;

            &:after {
                position: absolute;
                top: 21px;
                right: 14px;
                content: "";
                display: block;
                background: #00bcd4;
                width: 23px;
                height: 23px;
                border-radius: 100%;
                z-index: 0;
            }
        }

        .point3_accordion__title {
            padding-left: 80px;
            padding-right: 40px;
            color: var(--txt-black);
            background-color: #fff;
            cursor: pointer;
            position: relative;
            height: 58px;
            display: flex;
            align-items: center;
            font-weight: bold;
            padding-block: 4px;
            position: relative;
        }

        .point3_accordion__title::before {
            content: "";
            display: inline-block;
            width: 13px;
            height: 3px;
            background-color: #fff;
            position: absolute;
            right: 19px;
            top: 50%;
            transform: translateY(-50%);
            transition: opacity 0.2s;
            z-index: 1;
        }

        .point3_accordion__title::after {
            content: "";
            display: inline-block;
            width: 13px;
            height: 3px;
            background-color: #fff;
            position: absolute;
            right: 19px;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            transition: transform 0.2s;
            z-index: 1;
        }

        img.point3_accordion__title_icon {
            position: absolute;
            width: 58px;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
        }

        .point3_accordion__title.show::before {
            opacity: 0;
        }

        .point3_accordion__title.show::after {
            transform: translateY(-50%) rotate(180deg);
        }

        .point3_accordion__content {
            display: none;
            width: calc(100% - 80px);
            margin: 20px auto 20px;
            padding: 20px;
            font-size: 15px;
            background: white;
            font-weight: bold;
            line-height: 2;
            border: 1px solid var(--clr-yellow);
        }
    }

    /* 上記条件にピッタリの厳選カード3枚 */
    .Selection {
        padding-bottom: 36px;

        .contents {
            padding: 24px 16px;
            display: grid;
            grid-template-columns: repeat(3, 326px);
            overflow-x: scroll;
            gap: 10px;

            .card {
                border-radius: 32px;
                overflow: hidden;
                border: 1px solid #d5ebee;
                box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
                padding: 24px;
                display: grid;
                gap: 16px;
                background: white;

                .header {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    border-bottom: 1px dashed var(--clr-navy);
                    padding-bottom: 8px;

                    img {
                        width: 30px;
                        margin-left: -15px;
                    }

                    .title {
                        font-size: 20px;
                        font-weight: 900;
                    }
                }

                .body {
                    display: grid;
                    gap: 16px;

                    .info {
                        display: grid;
                        grid-template-columns: 1fr 1fr;

                        .image {
                            padding-right: 8px;
                            flex: 1;

                            a {
                                color: var(--clr-blue);
                                text-decoration: underline;
                                font-size: 12px;
                                display: block;
                                text-align: center;
                            }
                        }

                        .text {
                            font-weight: 400;
                            font-size: 14px;

                            b {
                                color: var(--clr-red);
                                font-weight: bold;
                            }
                        }
                    }

                    .cardTable {
                        text-align: center;
                        width: 100%;
                        margin-bottom: 8px;

                        th,
                        td {
                            border: 1px solid #d5ebee;
                            padding: 4px 2px;
                            font-weight: 700;
                            font-size: 12px;
                            line-height: 1.3;
                        }

                        th {
                            background: var(--clr-lightBlue);
                        }

                        td {
                            padding-block: 12px;

                            small {
                                font-size: 8px;
                                vertical-align: text-top;
                            }
                        }

                        .mark {
                            color: var(--clr-red);

                            img {
                                width: 24px;
                            }
                        }

                        .description {
                            margin-top: 4px;
                            font-weight: 700;
                            white-space: nowrap;
                        }

                        .red {
                            color: var(--clr-red);
                        }
                    }

                    .small {
                        opacity: 0.5;
                        font-size: 10px;
                        margin-block: -16px 8px;
                    }
                }
            }
        }

        .originalContents {
            .pop_table {
                width: 100%;
                border: solid 1px #e7f3fe;
                margin-top: 24px;
                background: white;

                border-collapse: separate;
            }

            .pop_table_container {
                overflow: visible;
            }

            .pop_table th,
            .pop_table td {
                padding: 10px 5px 10px;
                text-align: center;
            }

            .pop_table th {
                padding: 6px 5px 6px;
                width: 10%;
                vertical-align: middle;
                letter-spacing: 0.5em;
                font-size: 13px;
                font-weight: bold;
                background-color: #e7f3fe;
                border: solid 1px #fff;
            }

            .pop_table th span {
                white-space: pre;
                writing-mode: vertical-lr;
                display: inline-block;
            }

            .pop_table th.th-s {
                letter-spacing: 0.1em;
                font-size: 12px;
            }

            .pop_table td {
                width: 30%;
                font-size: 12px;
                border: solid 1px #e7f3fe;
                position: relative;
                background: #fff;
            }
            
              .__compare_text{
                font-weight: bold;
                font-size: 11.5px;
                  }            
            .pop_table tr.__baloon_on td{
            padding-top: 60px;
            position: relative;
            }
            
            .pop_table .__baloon{
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            }
            
            .pop_table .__baloon p{
            display: inline-block;
            width: calc(100% - 16px);
            background: #fff6ed;
            font-weight: bold;
            padding: 4px 8px;
            border: solid 1px #fd9426;
            white-space: nowrap;
            }
            
            .pop_table .__baloon p:after{
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                border-style: solid;
                border-color: #FD9426 transparent transparent transparent;
                border-width: 6px 4px 0 4px;
                z-index: 1;
            }
            
            .pop_table .__baloon p strong{
            color:  var(--clr-red);
            }
            
                @media screen and (max-width: 769px) {
                    .pop_table tr.__baloon_on td{
                    padding-top: 50px;
                    }

                    .pop_table .__baloon{
                    position: absolute;
                    top: 6px;
                    z-index: 1;
                    }

                    .pop_table .__baloon p{
                    font-size: 10px;
                    width: auto;
                    white-space: nowrap;
                    padding: 2px 4px;
                    }

                    .pop_table .__baloon p:after{
                    }
                }

            .pop_table tr.middle td {
                vertical-align: middle;
                font-weight: bold;
                    span.__small{
                    font-size: 10px;
                    }
            }

            .pop_table .crown {
                max-width: 32px;
                margin: 0 auto 8px;
            }

            .pop_table .card {
                width: 90%;
                margin: 0 auto;
            }

            a.pop_table_card_link {}

            a.card_title_link {
                text-decoration: underline;
            }

            .pop_table .card_title {
                margin-top: 5px;
                font-weight: bold;
            }

            .evaluation {
                max-width: 28px;
                margin: 0 auto 2px;
            }

            .cvBtn-s a {
                display: block;
                padding: 15px 2px;
                letter-spacing: 0.1em;
                text-align: center;
                font-size: 12px;
                font-weight: bold;
                color: #fff;
                border-bottom: solid 4px #b7000b;
                background-color: #e50916;
                border-radius: 10px;
                position: relative;
                overflow: hidden;
            }

            .cvBtn-s a:after {
                content: "";
                display: block;
                width: 20px;
                height: 100%;
                position: absolute;
                top: -180px;
                left: 0;
                background-color: rgba(255 255 255 / 0.6);
                transform: rotate(45deg);
                animation: reflect 2s ease-in-out infinite;
                -webkit-transform: rotate(45deg);
                -webkit-animation: reflect 2s ease-in-out infinite;
            }
            
            

            @keyframes reflect {
                0% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0;
                }

                80% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0.5;
                }

                81% {
                    transform: scale(4) rotate(45deg);
                    opacity: 1;
                }

                100% {
                    transform: scale(50) rotate(45deg);
                    opacity: 0;
                }
            }

            @-webkit-keyframes reflect {
                0% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0;
                }

                80% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0.5;
                }

                81% {
                    transform: scale(4) rotate(45deg);
                    opacity: 1;
                }

                100% {
                    transform: scale(50) rotate(45deg);
                    opacity: 0;
                }
            }

            .pop_table .link a {
                position: relative;
                display: inline-block;
                margin-top: 8px;
                margin-left: -5px;
                letter-spacing: 0;
                color: #333;
            }

            .pop_table .link a:before {
                content: "";
                width: 5px;
                height: 5px;
                border: 0;
                border-top: solid 2px #0d5eb5;
                border-right: solid 2px #0d5eb5;
                transform: rotate(45deg);
                position: absolute;
                top: 0;
                right: -10px;
                bottom: 0;
                margin: auto;
            }

            .pop_table td span.__yellow {
                background: linear-gradient(transparent 50%, #ffe8a7 50%);
                color: #000;
                font-weight: bold;
            }

            .__fee_wrap {
                background: #f5f5f5;
                padding: 12px 0px;
                position: relative;
                margin: 0 0 24px;
                border-radius: 8px;
            }

            .__fee_wrap:first-of-type:not(:last-of-type):after {
                position: absolute;
                content: "";
                display: inline-block;
                height: 2px;
                width: 80%;
                background-color: #eee;
                bottom: -12px;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
            }

            .__fee_wrap:last-of-type {
                margin: 0;
            }

            .__fee_label {
                font-weight: bold;
                color: #444;
            }

            .__fee_label:before,
            .__fee_label:after {
                content: "-";
            }

            p.__fee_notice {
                text-align: left;
            }

            .__fee_text {
                font-size: 15px;
                font-weight: bold;
            }

            .__fee_text span.__red {
                color: #e50916;
            }

            .small {
                font-size: 12px;
                opacity: 0.7;
                padding: 8px 0 0 8px;
            }
        }
    }
    
    

    /* ETCカード発行までの流れ */
    .Flow {
        padding-bottom: 36px;

        .text {
            padding: 16px;
        }

        .image {
            max-width: 400px;
            margin-inline: auto;

            img {
                width: 100%;
                margin: 16px 0 0;
            }
        }
    }

    /* タイプ別 後悔しないETC付帯クレカ */
    .Type {
        padding-bottom: 24px;

        .anker {
            padding: 24px 16px 36px;

            .list {
                display: grid;
                gap: 16px;
                max-width: 400px;
                margin-inline: auto;

                a {
                    display: flex;
                    align-items: center;
                    border: 2px solid #fd9426;
                    background: #fff6ed;
                    padding: 8px 16px;
                    gap: 10px;
                    font-weight: 700;
                    color: var(--txt-black);
                    text-decoration: none;
                    border-radius: 10px;
                    position: relative;
                    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);

                    &:after {
                        position: absolute;
                        top: 50%;
                        right: 30px;
                        transform: translateY(-50%);
                        content: "";
                        display: block;
                        width: 10px;
                        height: 16px;
                        background: center/cover no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.191L2.191%200L10%207.809L2.191%2015.618L0%2013.427L5.616%207.809L0%202.191Z%22%20fill%3D%22%23FD9426%22%2F%3E%3C%2Fsvg%3E");
                    }
                }
            }
        }

        .wrapper {
            padding-inline: 16px;
            display: grid;
            gap: 16px;
        }

        .contents {
            border-radius: 8px;
            border: 2px solid #04a7bc;
            padding: 16px 16px 0 16px;
            background: white;
            max-width: 400px;
            margin-inline: auto;

            .header {
                display: grid;
                place-items: center;
                gap: 16px;
                border-bottom: 1px dashed #04a7bc;

                .labels {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 10px;
                }

                .label {
                    border-radius: 1000px;
                    border: 1px solid #fd9426;
                    background: #fff6ed;
                    display: flex;
                    align-items: center;
                    padding: 10px 16px;
                    gap: 4px;
                    font-size: 12px;
                    font-weight: 700;
                }

                .image {
                    height: 57px;
                }
            }

            .item + .item {
                border-top: 1px dashed #04a7bc;
                padding-top: 24px;
            }

            .item {
                overflow: hidden;
                padding-block: 24px 32px;
                display: grid;
                gap: 16px;
                background: white;

                .header {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-bottom: unset;

                    img {
                        width: 30px;
                        margin-left: -15px;
                    }

                    .title {
                        font-size: 20px;
                        font-weight: 900;
                    }
                }

                .body {
                    display: grid;
                    gap: 16px;

                    .info {
                        display: grid;
                        grid-template-columns: 1fr 1fr;

                        .image {
                            padding-right: 8px;
                            flex: 1;

                            a {
                                color: var(--clr-blue);
                                text-decoration: underline;
                                font-size: 12px;
                                display: block;
                                text-align: center;
                            }
                        }

                        .text {
                            font-weight: 400;
                            font-size: 14px;

                            span.__red {
                                color: var(--clr-red);
                                font-weight: bold;
                            }

                            b {
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
}

.__compare_title {
    font-size: 14px;
    font-weight: bold;
}

.__compare_title a {
    color: var(--clr-blue);
}


.__compare_description {
    font-size: 11px;
    padding: 8px;
    border-radius: 6px;
    background-color: #F2F0EF;
    margin: 8px 0 0;
    font-weight: bold;
    text-align-last: left;
}

.__compare_list_circlecheck {
    font-weight: bold;
    display: inline-block;
    text-align: left;
}

.__compare_list_circlecheck li {
    margin: 0 0 4px;
}

.__compare_list_circlecheck li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    color: var(--clr-blue);
    margin: 0 4px 0 0;
}

/*------------------------------------
  学生向け
--------------------------------------*/
.Student {
    .Button {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        border-radius: 100vh;
        background: #e50b18;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-decoration: none;
        padding: 16px;
        margin-inline: 16px;

        &.-small {
            font-size: 16px;
            padding: 8px 48px;
            width: max-content;
            margin-inline: auto;
        }
    }

    /* 大見出し */
    .SectionTitle {
        background: white;
        display: grid;
        gap: 2px;
        position: relative;
        padding: 16px;
        text-align: center;
        border-top: 2px solid var(--clr-blue);
        border-bottom: 2px solid var(--clr-blue);

        .thumb {
            position: absolute;
            bottom: 0;
            right: 0;

            img {
                display: block;
            }
        }
    }

    .Title {
        font-size: 22px;
        font-weight: 700;
        color: var(--clr-navy);

        &.-hasLabel {
            display: flex;
            justify-content: center;
            gap: 4px;
        }

        .label {
            border-radius: 4px;
            background: #fd9426;
            padding: 2px 6px;
            color: white;
            font-size: 14px;
            font-weight: 700;
            display: grid;
            place-items: center;
        }
    }

    /* テキストハイライト */
    .HighLight {
        background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
        font-weight: bold;
    }

    /* テキスト装飾 */
    .Lead {
        color: var(--clr-navy);
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        &:before,
        &:after {
            height: 1rem;
            background: var(--clr-navy);
            width: 2px;
            content: "";
            display: block;
        }

        &:before {
            transform: rotate(-30deg);
        }

        &:after {
            transform: rotate(30deg);
        }
    }

    /* キャンペーン */
    .Campaign {
        margin-top: 30px;
        background-color: #fff;
        border-radius: 10px;

        .human {
            text-align: center;
        }

        .human img {
            max-width: 70%;
            vertical-align: bottom;
        }

        .campaign_title {
            padding: 10px 3px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            background-color: #fd9426;
            border-radius: 10px 10px 0 0;
        }

        .campaign_in {
            padding: 24px 16px;
            background-color: #fff6ed;
            border: solid 1px #fd9426;
            border-top: none;
            border-radius: 0 0 10px 10px;
        }

        .campaign_main {
            line-height: 1.3;
            letter-spacing: 0;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }

        .campaign_time {
            margin-top: 5px;
            text-align: center;
        }

        .campaign_main span.num {
            font-size: 24px;
        }

        .campaign_main span.__small {
            font-size: 14px;
            color: #666;
        }
    }

    /* Header */
    .Header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: white;

        .toggle {
            position: relative;
            width: 20px;
            height: 16px;
            display: block;

            span {
                display: inline-block;
                transition: all 0.4s;
                position: absolute;
                left: 0;
                height: 2px;
                border-radius: 2px;
                background: var(--clr-navy);
                width: 100%;
            }

            span:nth-of-type(1) {
                top: 0;
            }

            span:nth-of-type(2) {
                top: 7px;
            }

            span:nth-of-type(3) {
                bottom: 0;
            }

            &.is-active {
                span:nth-of-type(1) {
                    transform: translateY(8px) rotate(-45deg);
                }

                span:nth-of-type(2) {
                    opacity: 0;
                }

                span:nth-of-type(3) {
                    transform: translateY(-6px) rotate(45deg);
                }
            }
        }

        .navigation {
            display: none;
            background: #0d5eb5;
            position: absolute;
            top: 56px;
            left: 0;
            width: 100%;
            z-index: 9999;
        }

        .navigation__list {
            text-align: center;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .navigation__list-item {
            border-bottom: solid 1px #1585dc;
        }

        .navigation__list-item:first-child {
            border-top: solid 1px #1585dc;
        }

        .navigation__link {
            color: #fff !important;
            font-weight: 700;
            text-decoration: none;
            display: block;
            padding: 24px 0;
            transition: 0.5s;
        }

        @media screen and (min-width: 769px) {
            .navigation {
                max-width: 640px;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        @media (hover: hover) and (pointer: fine) {
            .navigation__link:hover {
                background: #1585dc;
            }
        }
    }

    /* 券面スライダー */
    .CardSlider {
        padding-block: 16px 32px;
        width: 100%;

        .items {
            display: none;
        }

        .items.slick-initialized {
            display: block;
            /* slickが実行完了したら表示 */
        }

        @media screen and (min-width: 769px) {
            display: flex;
            justify-content: center;
            gap: 10px;

            .items {
                display: block;
            }

            img {
                height: 38px;
            }
        }

        .slick-slide {
            margin: 0 4px;
        }
    }

    /* 上記条件にピッタリの厳選カード3枚 */
    .Selection {
        padding-bottom: 36px;

        .contents {
            padding: 24px 16px;
            display: grid;
            grid-template-columns: repeat(3, 326px);
            overflow-x: scroll;
            gap: 10px;

            .card {
                border-radius: 32px;
                overflow: hidden;
                border: 1px solid #d5ebee;
                box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
                padding: 24px;
                display: grid;
                gap: 16px;
                background: white;

                .header {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    border-bottom: 1px dashed var(--clr-navy);
                    padding-bottom: 8px;

                    img {
                        width: 30px;
                        margin-left: -15px;
                    }

                    .title {
                        font-size: 20px;
                        font-weight: 900;
                    }
                }

                .body {
                    display: grid;
                    gap: 16px;

                    .info {
                        display: grid;
                        grid-template-columns: 1fr 1fr;

                        .image {
                            padding-right: 8px;
                            flex: 1;

                            a {
                                color: var(--clr-blue);
                                text-decoration: underline;
                                font-size: 12px;
                                display: block;
                                text-align: center;
                            }
                        }

                        .text {
                            font-weight: 400;
                            font-size: 14px;

                            b {
                                color: var(--clr-red);
                                font-weight: bold;
                            }
                        }
                    }

                    .cardTable {
                        text-align: center;
                        width: 100%;
                        margin-bottom: 8px;

                        th,
                        td {
                            border: 1px solid #d5ebee;
                            padding: 4px 2px;
                            font-weight: 700;
                            font-size: 12px;
                            line-height: 1.3;
                        }

                        th {
                            background: var(--clr-lightBlue);
                        }

                        td {
                            padding-block: 12px;

                            small {
                                font-size: 8px;
                                vertical-align: text-top;
                            }
                        }

                        .mark {
                            color: var(--clr-red);

                            img {
                                width: 24px;
                            }
                        }

                        .description {
                            margin-top: 4px;
                            font-weight: 700;
                            white-space: nowrap;
                        }

                        .red {
                            color: var(--clr-red);
                        }
                    }

                    .small {
                        opacity: 0.5;
                        font-size: 10px;
                        margin-block: -16px 8px;
                    }
                }
            }
        }

        .originalContents {
            .pop_table {
                width: 100%;
                border: solid 1px #e7f3fe;
                margin-top: 24px;
                background: white;
            }

            .pop_table th,
            .pop_table td {
                padding: 10px 5px 10px;
                text-align: center;
            }

            .pop_table th {
                padding: 6px 5px 6px;
                width: 10%;
                vertical-align: middle;
                letter-spacing: 0.5em;
                font-size: 13px;
                font-weight: bold;
                background-color: #e7f3fe;
                border: solid 1px #fff;
            }

            .pop_table th span {
                white-space: pre;
                writing-mode: vertical-rl;
                display: inline-block;
            }

            .pop_table th.th-s {
                letter-spacing: 0.1em;
                font-size: 12px;
            }

            .pop_table td {
                width: 30%;
                font-size: 12px;
                border: solid 1px #e7f3fe;
            }

            .pop_table tr.middle td {
                vertical-align: middle;
                font-weight: bold;
            }

            .pop_table .crown {
                max-width: 32px;
                margin: 0 auto 8px;
            }

            .pop_table .card {
                width: 90%;
                margin: 0 auto;
            }

            a.pop_table_card_link {}

            a.card_title_link {
                text-decoration: underline;
            }

            .pop_table .card_title {
                margin-top: 5px;
                font-weight: bold;
            }

            .evaluation {
                max-width: 28px;
                margin: 0 auto 2px;
            }

            .cvBtn-s a {
                display: block;
                padding: 15px 2px;
                letter-spacing: 0.1em;
                text-align: center;
                font-size: 12px;
                font-weight: bold;
                color: #fff;
                border-bottom: solid 4px #b7000b;
                background-color: #e50916;
                border-radius: 10px;
                position: relative;
                overflow: hidden;
            }

            .cvBtn-s a:after {
                content: "";
                display: block;
                width: 20px;
                height: 100%;
                position: absolute;
                top: -180px;
                left: 0;
                background-color: rgba(255 255 255 / 0.6);
                transform: rotate(45deg);
                animation: reflect 2s ease-in-out infinite;
                -webkit-transform: rotate(45deg);
                -webkit-animation: reflect 2s ease-in-out infinite;
            }

            @keyframes reflect {
                0% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0;
                }

                80% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0.5;
                }

                81% {
                    transform: scale(4) rotate(45deg);
                    opacity: 1;
                }

                100% {
                    transform: scale(50) rotate(45deg);
                    opacity: 0;
                }
            }

            @-webkit-keyframes reflect {
                0% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0;
                }

                80% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0.5;
                }

                81% {
                    transform: scale(4) rotate(45deg);
                    opacity: 1;
                }

                100% {
                    transform: scale(50) rotate(45deg);
                    opacity: 0;
                }
            }

            .pop_table .link a {
                position: relative;
                display: inline-block;
                margin-top: 8px;
                margin-left: -5px;
                letter-spacing: 0;
                color: #333;
            }

            .pop_table .link a:before {
                content: "";
                width: 5px;
                height: 5px;
                border: 0;
                border-top: solid 2px #0d5eb5;
                border-right: solid 2px #0d5eb5;
                transform: rotate(45deg);
                position: absolute;
                top: 0;
                right: -10px;
                bottom: 0;
                margin: auto;
            }

            .pop_table td span.__yellow {
                background: linear-gradient(transparent 50%, #ffe8a7 50%);
                color: #000;
                font-weight: bold;
            }

            .__fee_wrap {
                background: #f5f5f5;
                padding: 12px 0px;
                position: relative;
                margin: 0 0 24px;
                border-radius: 8px;
            }

            .__fee_wrap:first-of-type:not(:last-of-type):after {
                position: absolute;
                content: "";
                display: inline-block;
                height: 2px;
                width: 80%;
                background-color: #eee;
                bottom: -12px;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
            }

            .__fee_wrap:last-of-type {
                margin: 0;
            }

            .__fee_label {
                font-weight: bold;
                color: #444;
            }

            .__fee_label:before,
            .__fee_label:after {
                content: "-";
            }

            p.__fee_notice {
                text-align: left;
            }

            .__fee_text {
                font-size: 15px;
                font-weight: bold;
            }

            .__fee_text span.__red {
                color: #e50916;
            }

            .small {
                font-size: 12px;
                opacity: 0.7;
                padding: 8px 0 0 8px;
            }
        }
    }

    /* タイプ別 学生向け人気のクレカ */
    .Type {
        padding-bottom: 24px;

        .Title {
            font-size: 20px;
        }

        .anker {
            padding: 24px 16px 36px;

            .list {
                display: grid;
                gap: 16px;
                max-width: 400px;
                margin-inline: auto;

                a {
                    display: flex;
                    align-items: center;
                    border: 2px solid #fd9426;
                    background: #fff6ed;
                    padding: 8px 16px;
                    gap: 10px;
                    font-weight: 700;
                    color: var(--txt-black);
                    text-decoration: none;
                    border-radius: 10px;
                    position: relative;
                    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);

                    &:after {
                        position: absolute;
                        top: 50%;
                        right: 30px;
                        transform: translateY(-50%);
                        content: "";
                        display: block;
                        width: 10px;
                        height: 16px;
                        background: center/cover no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.191L2.191%200L10%207.809L2.191%2015.618L0%2013.427L5.616%207.809L0%202.191Z%22%20fill%3D%22%23FD9426%22%2F%3E%3C%2Fsvg%3E");
                    }
                }
            }
        }

        .wrapper {
            padding-inline: 16px;
            display: grid;
            gap: 16px;
        }

        .contents {
            border-radius: 8px;
            border: 2px solid #04a7bc;
            padding: 16px 16px 0 16px;
            background: white;
            max-width: 400px;
            margin-inline: auto;

            .header {
                display: grid;
                place-items: center;
                gap: 16px;
                border-bottom: 1px dashed #04a7bc;

                .labels {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 10px;
                }

                .label {
                    border-radius: 1000px;
                    border: 1px solid #fd9426;
                    background: #fff6ed;
                    display: flex;
                    align-items: center;
                    padding: 10px 16px;
                    gap: 4px;
                    font-size: 12px;
                    font-weight: 700;
                }

                .image {
                    height: 57px;
                }
            }

            .item + .item {
                border-top: 1px dashed #04a7bc;
                padding-top: 24px;
            }

            .item {
                overflow: hidden;
                padding-block: 24px 32px;
                display: grid;
                gap: 16px;
                background: white;

                .header {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-bottom: unset;

                    img {
                        width: 30px;
                        margin-left: -15px;
                    }

                    .title {
                        font-size: 20px;
                        font-weight: 900;
                    }
                }

                .body {
                    display: grid;
                    gap: 16px;

                    .info {
                        display: grid;
                        grid-template-columns: 1fr 1fr;

                        .image {
                            padding-right: 8px;
                            flex: 1;

                            a {
                                color: var(--clr-blue);
                                text-decoration: underline;
                                font-size: 12px;
                                display: block;
                                text-align: center;
                            }
                        }

                        .text {
                            font-weight: 400;
                            font-size: 14px;

                            span.__red {
                                color: var(--clr-red);
                                font-weight: bold;
                            }

                            b {
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
}

/*------------------------------------
  最強の2枚
--------------------------------------*/
.Strongest {
    .Button {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        border-radius: 100vh;
        background: #e50b18;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-decoration: none;
        padding: 16px;
        margin-inline: 16px;

        &.-small {
            font-size: 16px;
            padding: 8px 48px;
            width: max-content;
            margin-inline: auto;
        }
    }

    /* 大見出し */
    .SectionTitle {
        background: white;
        display: grid;
        gap: 2px;
        position: relative;
        padding: 16px;
        text-align: center;
        border-top: 2px solid var(--clr-blue);
        border-bottom: 2px solid var(--clr-blue);

        .thumb {
            position: absolute;
            bottom: 0;
            right: 0;

            img {
                display: block;
            }
        }
    }

    .Title {
        font-size: 22px;
        font-weight: 700;
        color: var(--clr-navy);

        &.-hasLabel {
            display: flex;
            justify-content: center;
            gap: 4px;
        }

        .label {
            border-radius: 4px;
            background: #fd9426;
            padding: 2px 6px;
            color: white;
            font-size: 14px;
            font-weight: 700;
            display: grid;
            place-items: center;
        }
    }

    /* キャンペーン */
    .Campaign {
        margin-top: 30px;
        background-color: #fff;
        border-radius: 10px;

        .human {
            text-align: center;
        }

        .human img {
            max-width: 70%;
            vertical-align: bottom;
        }

        .campaign_title {
            padding: 10px 3px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            background-color: #fd9426;
            border-radius: 10px 10px 0 0;
        }

        .campaign_in {
            padding: 24px 16px;
            background-color: #fff6ed;
            border: solid 1px #fd9426;
            border-top: none;
            border-radius: 0 0 10px 10px;
        }

        .campaign_main {
            line-height: 1.3;
            letter-spacing: 0;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }

        .campaign_time {
            margin-top: 5px;
            text-align: center;
        }

        .campaign_main span.num {
            font-size: 24px;
        }

        .campaign_main span.__small {
            font-size: 14px;
            color: #666;
        }
    }

    /* 比較表 */
    .Compare {
        margin-top: 24px;
        background: white;
        margin-bottom: 24px;

        .contents {
            max-width: 390px;
            margin-inline: auto;
        }

        .header {
            display: grid;
            grid-template-columns: 50% 50%;
            position: relative;
            overflow: hidden;
            padding-bottom: 16px;

            &:after {
                content: "";
                display: block;
                height: 1px;
                background: var(--clr-blue);
                width: 1px;
                height: 100%;
                position: absolute;
                left: calc(50% - 1px);
                top: 111px;
            }

            .item {
                display: grid;
                gap: 8px;

                .title {
                    display: flex;
                    justify-content: center;

                    img {
                        height: 111px;
                    }
                }

                .image {
                    display: flex;
                    justify-content: center;
                    height: 78px;

                    img {
                        height: 78px;
                        display: block;
                    }
                }

                .link {
                    color: var(--clr-blue);
                    font-size: 15px;
                    font-weight: bold;
                    text-align: center;
                }
            }
        }

        .table {
            .heading {
                background: var(--clr-blue);
                color: white;
                font-size: 16px;
                font-weight: 700;
                text-align: center;
                padding: 4px;
            }

            .row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                place-items: center;
                position: relative;
                padding: 16px 8px;
                font-weight: 700;
                text-align: center;
                gap: 16px;

                &:after {
                    content: "";
                    display: block;
                    height: 1px;
                    background: var(--clr-blue);
                    width: 1px;
                    height: 100%;
                    position: absolute;
                    left: calc(50% - 1px);
                    top: 0;
                }

                .info {
                    background: #e7fcff;
                    padding: 12px;
                    font-size: 12px;
                    text-align: left;
                    margin-top: 8px;
                    font-weight: normal;
                }

                .list {
                    display: grid;
                    gap: 8px;
                    text-align: left;
                    font-size: 13px;
                    padding-inline: 8px;
                    padding-bottom: 16px;

                    .item {
                        display: flex;
                        align-items: flex-start;
                        gap: 8px;

                        img {
                            display: block;
                            margin-top: 4px;
                            width: 15px;
                        }
                    }
                }

                small {
                    font-size: 70%;
                }
            }
        }
    }

    /* テキストハイライト */
    .HighLight {
        background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
        font-weight: bold;
    }

    /* テキスト装飾 */
    .Lead {
        color: var(--clr-navy);
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        &:before,
        &:after {
            height: 1rem;
            background: var(--clr-navy);
            width: 2px;
            content: "";
            display: block;
        }

        &:before {
            transform: rotate(-30deg);
        }

        &:after {
            transform: rotate(30deg);
        }
    }

    /* タイプ別 学生向け人気のクレカ */
    .Type {
        padding-bottom: 24px;

        .Title {
            font-size: 20px;
        }

        .anker {
            padding: 24px 16px 36px;

            .list {
                display: grid;
                gap: 16px;
                max-width: 400px;
                margin-inline: auto;

                a {
                    display: flex;
                    align-items: center;
                    border: 2px solid #fd9426;
                    background: #fff6ed;
                    padding: 8px 16px;
                    gap: 10px;
                    font-weight: 700;
                    color: var(--txt-black);
                    text-decoration: none;
                    border-radius: 10px;
                    position: relative;
                    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);

                    &:after {
                        position: absolute;
                        top: 50%;
                        right: 30px;
                        transform: translateY(-50%);
                        content: "";
                        display: block;
                        width: 10px;
                        height: 16px;
                        background: center/cover no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.191L2.191%200L10%207.809L2.191%2015.618L0%2013.427L5.616%207.809L0%202.191Z%22%20fill%3D%22%23FD9426%22%2F%3E%3C%2Fsvg%3E");
                    }
                }
            }
        }

        .wrapper {
            padding-inline: 16px;
            display: grid;
            gap: 16px;
        }

        .contents {
            border-radius: 8px;
            border: 2px solid #04a7bc;
            padding: 16px 16px 0 16px;
            background: white;
            max-width: 400px;
            margin-inline: auto;

            .header {
                display: grid;
                place-items: center;
                gap: 16px;
                border-bottom: 1px dashed #04a7bc;

                .labels {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 10px;
                }

                .label {
                    border-radius: 1000px;
                    border: 1px solid #fd9426;
                    background: #fff6ed;
                    display: flex;
                    align-items: center;
                    padding: 10px 16px;
                    gap: 4px;
                    font-size: 12px;
                    font-weight: 700;
                }

                .image {
                    height: 57px;
                }
            }

            .item + .item {
                border-top: 1px dashed #04a7bc;
                padding-top: 24px;
            }

            .item {
                overflow: hidden;
                padding-block: 24px 32px;
                display: grid;
                gap: 16px;
                background: white;

                .header {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-bottom: unset;

                    img {
                        width: 30px;
                        margin-left: -15px;
                    }

                    .title {
                        font-size: 20px;
                        font-weight: 900;
                    }
                }

                .body {
                    display: grid;
                    gap: 16px;

                    .info {
                        display: grid;
                        grid-template-columns: 1fr 1fr;

                        .image {
                            padding-right: 8px;
                            flex: 1;

                            a {
                                color: var(--clr-blue);
                                text-decoration: underline;
                                font-size: 12px;
                                display: block;
                                text-align: center;
                            }
                        }

                        .text {
                            font-weight: 400;
                            font-size: 14px;

                            span.__red {
                                color: var(--clr-red);
                                font-weight: bold;
                            }

                            b {
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
}

/*------------------------------------
  JCB
--------------------------------------*/
.JCB {
    .Button {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        border-radius: 100vh;
        background: #e50b18;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-decoration: none;
        padding: 16px;
        margin-inline: 16px;

        &.-small {
            font-size: 16px;
            padding: 8px 48px;
            width: max-content;
            margin-inline: auto;
        }
    }

    /* 大見出し */
    .SectionTitle {
        background: white;
        display: grid;
        gap: 2px;
        position: relative;
        padding: 16px;
        text-align: center;
        border-top: 2px solid var(--clr-blue);
        border-bottom: 2px solid var(--clr-blue);
    }

    .Title {
        font-size: 22px;
        font-weight: 700;
        color: var(--clr-navy);

        &.-hasLabel {
            display: flex;
            justify-content: center;
            gap: 4px;
        }

        .label {
            border-radius: 4px;
            background: #fd9426;
            padding: 2px 6px;
            color: white;
            font-size: 14px;
            font-weight: 700;
            display: grid;
            place-items: center;
        }
    }

    /* テキストハイライト */
    .HighLight {
        background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
        font-weight: bold;
    }

    /* テキスト装飾 */
    .Lead {
        color: var(--clr-navy);
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        &:before,
        &:after {
            height: 1rem;
            background: var(--clr-navy);
            width: 2px;
            content: "";
            display: block;
        }

        &:before {
            transform: rotate(-30deg);
        }

        &:after {
            transform: rotate(30deg);
        }
    }

    /* キャンペーン */
    .Campaign {
        margin-top: 30px;
        background-color: #fff;
        border-radius: 10px;

        .human {
            text-align: center;
        }

        .human img {
            max-width: 70%;
            vertical-align: bottom;
        }

        .campaign_title {
            padding: 10px 3px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            background-color: #fd9426;
            border-radius: 10px 10px 0 0;
        }

        .campaign_in {
            padding: 24px 16px;
            background-color: #fff6ed;
            border: solid 1px #fd9426;
            border-top: none;
            border-radius: 0 0 10px 10px;
        }

        .campaign_main {
            line-height: 1.3;
            letter-spacing: 0;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }

        .campaign_time {
            margin-top: 5px;
            text-align: center;
        }

        .campaign_main span.num {
            font-size: 24px;
        }

        .campaign_main span.__small {
            font-size: 14px;
            color: #666;
        }
    }

    .Kv {
        img {
            display: block;
        }

        margin-bottom: 16px;
    }

    /* JCBカードシリーズの強み */
    .Point {
        .contents {
            padding: 16px;
            padding-bottom: 32px;
            display: grid;
            gap: 8px;
        }

        .point3_accordion {
            border: solid 1px #3a3e3f;
            overflow: hidden;
            position: relative;
            background: #fff6ed;

            &:after {
                position: absolute;
                top: 21px;
                right: 14px;
                content: "";
                display: block;
                background: #00bcd4;
                width: 23px;
                height: 23px;
                border-radius: 100%;
                z-index: 0;
            }
        }

        .point3_accordion__title {
            padding-left: 62px;
            color: var(--txt-black);
            background-color: #fff;
            cursor: pointer;
            position: relative;
            height: 58px;
            display: flex;
            align-items: center;
            font-weight: bold;
            padding-block: 4px;
            position: relative;
            font-size: 14px;
        }

        .point3_accordion__title::before {
            content: "";
            display: inline-block;
            width: 13px;
            height: 3px;
            background-color: #fff;
            position: absolute;
            right: 19px;
            top: 50%;
            transform: translateY(-50%);
            transition: opacity 0.2s;
            z-index: 1;
        }

        .point3_accordion__title::after {
            content: "";
            display: inline-block;
            width: 13px;
            height: 3px;
            background-color: #fff;
            position: absolute;
            right: 19px;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            transition: transform 0.2s;
            z-index: 1;
        }

        img.point3_accordion__title_icon {
            position: absolute;
            width: 46px;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .point3_accordion__title.show::before {
            opacity: 0;
        }

        .point3_accordion__title.show::after {
            transform: translateY(-50%) rotate(180deg);
        }

        .point3_accordion__content {
            display: none;
            margin: 16px;
        }

        .point3_accordion__content_inner {
            padding: 16px;
            font-size: 14px;
            background: white;
            font-weight: 600;
            line-height: 2;
            border: 1px solid var(--clr-navy);

            .info {
                border-top: 1px dashed var(--clr-navy);
                margin-top: 12px;
                padding: 16px 8px 0;
                display: grid;
                place-items: center;

                .info_title {
                    border: 1px solid #04a7bc;
                    display: flex;
                    padding: 4px 16px;
                    justify-content: center;
                    align-items: center;
                    color: var(--clr-navy);
                    font-size: 12px;
                    margin-bottom: 16px;
                }

                .items {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 12px 16px;

                    .item {
                        max-width: 78px;

                        a {
                            color: var(--clr-blue);
                            font-size: 11px;
                            display: grid;
                            place-items: center;
                            line-height: 1.2;
                            text-align: center;
                            gap: 4px;
                        }

                        img {
                            max-width: 76px;
                        }
                    }
                }
            }

            small {
                color: #888;
                font-size: 10px;
                font-weight: 400;
                display: block;
                margin-top: 12px;
            }
        }
    }

    /* ポイント還元率の高いサービス一覧 */
    .Service {
        padding: 16px;
        background: var(--clr-blue);
        display: grid;
        place-items: center;
        gap: 10px;
        margin-bottom: 32px;

        .list {
            background: white;
            padding: 16px;
            position: relative;

            &.is-mask {
                height: 250px;
                overflow-y: hidden;

                &:after {
                    content: "";
                    display: block;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 150px;
                    width: 100%;
                    z-index: 2;
                    background: linear-gradient(180deg,
                            rgba(255, 255, 255, 0) 0%,
                            #fff 53.5%,
                            #fff 100%);
                }
            }

            .items {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 16px 10px;

                li {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 8px;
                    width: 102px;

                    .value {
                        font-size: 12px;
                        font-weight: 600;
                        display: flex;
                        align-items: baseline;
                        line-height: 1;

                        img {
                            height: 20px;
                            display: block;
                            margin-right: 4px;
                        }

                        b {
                            font-size: 20px;
                            color: var(--clr-red);
                            font-weight: bold;
                        }
                    }

                    .logo {
                        width: -webkit-fill-available;
                        height: 55px;
                        border: 1px solid lightgray;
                        padding: 8px;

                        img {
                            width: 100%;
                            height: 100%;
                            display: block;
                            object-fit: contain;
                        }
                    }

                    .name {
                        font-size: 12px;
                        font-weight: bold;
                        line-height: 1.2;
                        text-align: center;
                    }
                }
            }

            .readMore {
                color: var(--clr-blue);
                font-size: 14px;
                font-weight: 700;
                display: block;
                position: absolute;
                bottom: 32px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 3;
            }
        }
    }

    /* 神コスパのJCBカード3枚 */
    .Selection {
        padding-bottom: 36px;

        .contents {
            padding: 24px 16px;
            display: grid;
            grid-template-columns: repeat(3, 326px);
            overflow-x: scroll;
            gap: 10px;

            .card {
                border-radius: 32px;
                overflow: hidden;
                border: 1px solid #d5ebee;
                box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
                padding: 24px;
                display: grid;
                gap: 16px;
                background: white;

                .header {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    border-bottom: 1px dashed var(--clr-navy);
                    padding-bottom: 8px;

                    img {
                        width: 30px;
                        margin-left: -15px;
                    }

                    .title {
                        font-size: 20px;
                        font-weight: 900;
                    }
                }

                .body {
                    display: grid;
                    gap: 16px;

                    .info {
                        display: grid;
                        grid-template-columns: 1fr 1fr;

                        .image {
                            padding-right: 8px;
                            flex: 1;

                            a {
                                color: var(--clr-blue);
                                text-decoration: underline;
                                font-size: 12px;
                                display: block;
                                text-align: center;
                            }
                        }

                        .text {
                            font-weight: 400;
                            font-size: 14px;

                            b {
                                color: var(--clr-red);
                                font-weight: bold;
                            }
                        }
                    }

                    .cardTable {
                        text-align: center;
                        width: 100%;
                        margin-bottom: 8px;

                        th,
                        td {
                            border: 1px solid #d5ebee;
                            padding: 4px 2px;
                            font-weight: 700;
                            font-size: 12px;
                            line-height: 1.3;
                        }

                        th {
                            background: var(--clr-lightBlue);
                        }

                        td {
                            padding-block: 12px;

                            small {
                                font-size: 8px;
                                vertical-align: text-top;
                            }
                        }

                        .mark {
                            color: var(--clr-red);

                            img {
                                width: 24px;
                            }
                        }

                        .description {
                            margin-top: 4px;
                            font-weight: 700;
                            white-space: nowrap;
                        }

                        .red {
                            color: var(--clr-red);
                        }
                    }

                    .small {
                        opacity: 0.5;
                        font-size: 10px;
                        margin-block: -16px 8px;
                    }
                }
            }
        }

        .originalContents {
            .pop_table {
                width: 100%;
                border: solid 1px #e7f3fe;
                margin-top: 24px;
                background: white;
            }

            .pop_table th,
            .pop_table td {
                padding: 10px 5px 10px;
                text-align: center;
            }

            .pop_table th {
                padding: 6px 5px 6px;
                width: 10%;
                vertical-align: middle;
                letter-spacing: 0.5em;
                font-size: 13px;
                font-weight: bold;
                background-color: #e7f3fe;
                border: solid 1px #fff;
            }

            .pop_table th span {
                white-space: pre;
                writing-mode: vertical-rl;
                display: inline-block;
            }

            .pop_table th.th-s {
                letter-spacing: 0.1em;
                font-size: 12px;
            }

            .pop_table td {
                width: 30%;
                font-size: 12px;
                border: solid 1px #e7f3fe;
            }

            .pop_table tr.middle td {
                vertical-align: middle;
                font-weight: bold;
            }

            .pop_table .crown {
                max-width: 32px;
                margin: 0 auto 8px;
            }

            .pop_table .card {
                width: 90%;
                margin: 0 auto;
            }

            a.pop_table_card_link {}

            a.card_title_link {
                text-decoration: underline;
            }

            .pop_table .card_title {
                margin-top: 5px;
                font-weight: bold;
            }

            .evaluation {
                max-width: 28px;
                margin: 0 auto 2px;
            }

            .cvBtn-s a {
                display: block;
                padding: 15px 2px;
                letter-spacing: 0.1em;
                text-align: center;
                font-size: 12px;
                font-weight: bold;
                color: #fff;
                border-bottom: solid 4px #b7000b;
                background-color: #e50916;
                border-radius: 10px;
                position: relative;
                overflow: hidden;
            }

            .cvBtn-s a:after {
                content: "";
                display: block;
                width: 20px;
                height: 100%;
                position: absolute;
                top: -180px;
                left: 0;
                background-color: rgba(255 255 255 / 0.6);
                transform: rotate(45deg);
                animation: reflect 2s ease-in-out infinite;
                -webkit-transform: rotate(45deg);
                -webkit-animation: reflect 2s ease-in-out infinite;
            }

            @keyframes reflect {
                0% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0;
                }

                80% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0.5;
                }

                81% {
                    transform: scale(4) rotate(45deg);
                    opacity: 1;
                }

                100% {
                    transform: scale(50) rotate(45deg);
                    opacity: 0;
                }
            }

            @-webkit-keyframes reflect {
                0% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0;
                }

                80% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0.5;
                }

                81% {
                    transform: scale(4) rotate(45deg);
                    opacity: 1;
                }

                100% {
                    transform: scale(50) rotate(45deg);
                    opacity: 0;
                }
            }

            .pop_table .link a {
                position: relative;
                display: inline-block;
                margin-top: 8px;
                margin-left: -5px;
                letter-spacing: 0;
                color: #333;
            }

            .pop_table .link a:before {
                content: "";
                width: 5px;
                height: 5px;
                border: 0;
                border-top: solid 2px #0d5eb5;
                border-right: solid 2px #0d5eb5;
                transform: rotate(45deg);
                position: absolute;
                top: 0;
                right: -10px;
                bottom: 0;
                margin: auto;
            }

            .pop_table td span.__yellow {
                background: linear-gradient(transparent 50%, #ffe8a7 50%);
                color: #000;
                font-weight: bold;
            }

            .__fee_wrap {
                background: #f5f5f5;
                padding: 12px 0px;
                position: relative;
                margin: 0 0 24px;
                border-radius: 8px;
            }

            .__fee_wrap:first-of-type:not(:last-of-type):after {
                position: absolute;
                content: "";
                display: inline-block;
                height: 2px;
                width: 80%;
                background-color: #eee;
                bottom: -12px;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
            }

            .__fee_wrap:last-of-type {
                margin: 0;
            }

            .__fee_label {
                font-weight: bold;
                color: #444;
            }

            .__fee_label:before,
            .__fee_label:after {
                content: "-";
            }

            p.__fee_notice {
                text-align: left;
            }

            .__fee_text {
                font-size: 15px;
                font-weight: bold;
            }

            .__fee_text span.__red {
                color: #e50916;
            }

            .small {
                font-size: 12px;
                opacity: 0.7;
                padding: 8px 0 0 8px;
            }
        }
    }
}

/*------------------------------------
  高還元
--------------------------------------*/
.Point {
    .Button {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        border-radius: 100vh;
        background: #e50b18;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-decoration: none;
        padding: 16px;
        margin-inline: 16px;

        &.-small {
            font-size: 16px;
            padding: 8px 48px;
            width: max-content;
            margin-inline: auto;
        }
    }

    /* 大見出し */
    .SectionTitle {
        background: white;
        display: grid;
        gap: 2px;
        position: relative;
        padding: 16px;
        text-align: center;
        border-top: 2px solid var(--clr-blue);
        border-bottom: 2px solid var(--clr-blue);
    }

    .Title {
        font-size: 22px;
        font-weight: 700;
        color: var(--clr-navy);

        &.-hasLabel {
            display: flex;
            justify-content: center;
            gap: 4px;
        }

        .label {
            border-radius: 4px;
            background: #fd9426;
            padding: 2px 6px;
            color: white;
            font-size: 14px;
            font-weight: 700;
            display: grid;
            place-items: center;
        }
    }

    /* テキストハイライト */
    .HighLight {
        background: linear-gradient(transparent 60%, var(--clr-highlight) 60%);
        font-weight: bold;
    }

    /* テキスト装飾 */
    .Lead {
        color: var(--clr-navy);
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        &:before,
        &:after {
            height: 1rem;
            background: var(--clr-navy);
            width: 2px;
            content: "";
            display: block;
        }

        &:before {
            transform: rotate(-30deg);
        }

        &:after {
            transform: rotate(30deg);
        }
    }

    .Kv {
        margin-bottom: 16px;

        img {
            display: block;
        }
    }

    /* キャンペーン */
    .Campaign {
        margin-top: 30px;
        background-color: #fff;
        border-radius: 10px;

        .human {
            text-align: center;
        }

        .human img {
            max-width: 70%;
            vertical-align: bottom;
        }

        .campaign_title {
            padding: 10px 3px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            background-color: #fd9426;
            border-radius: 10px 10px 0 0;
        }

        .campaign_in {
            padding: 24px 16px;
            background-color: #fff6ed;
            border: solid 1px #fd9426;
            border-top: none;
            border-radius: 0 0 10px 10px;
        }

        .campaign_main {
            line-height: 1.3;
            letter-spacing: 0;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }

        .campaign_time {
            margin-top: 5px;
            text-align: center;
        }

        .campaign_main span.num {
            font-size: 24px;
        }

        .campaign_main span.__small {
            font-size: 14px;
            color: #666;
        }
    }

    /* 還元率の高いカード最強の3枚 */
    .Selection {
        padding-bottom: 36px;

        .originalContents {
            padding-inline: 8px;

            .pop_table {
                width: 100%;
                border: solid 1px #e7f3fe;
                margin-top: 16px;
                background: white;
            }

            .pop_table th,
            .pop_table td {
                padding: 10px 5px 10px;
                text-align: center;
            }

            .pop_table th {
                padding: 6px 5px 6px;
                width: 10%;
                vertical-align: middle;
                letter-spacing: 0.5em;
                font-size: 13px;
                font-weight: bold;
                background-color: #e7f3fe;
                border: solid 1px #fff;
            }

            .pop_table th span {
                white-space: pre;
                writing-mode: vertical-rl;
                display: inline-block;
            }

            .pop_table th.th-s {
                letter-spacing: 0.1em;
                font-size: 12px;
            }

            .pop_table td {
                width: 30%;
                font-size: 12px;
                border: solid 1px #e7f3fe;
            }

            .pop_table tr.middle td {
                vertical-align: middle;
                font-weight: bold;
            }

            .pop_table .crown {
                max-width: 32px;
                margin: 0 auto 8px;
            }

            .pop_table .card {
                width: 90%;
                margin: 0 auto;
            }

            a.card_title_link {
                text-decoration: underline;
            }

            .pop_table .card_title {
                margin-top: 5px;
                font-weight: bold;
            }

            .evaluation {
                max-width: 28px;
                margin: 0 auto 2px;
                display: grid;
                place-items: center;
            }

            .cvBtn-s a {
                display: block;
                padding: 15px 2px;
                letter-spacing: 0.1em;
                text-align: center;
                font-size: 12px;
                font-weight: bold;
                color: #fff;
                border-bottom: solid 4px #b7000b;
                background-color: #e50916;
                border-radius: 10px;
                position: relative;
                overflow: hidden;
                text-decoration: none;
            }

            .cvBtn-s a:after {
                content: "";
                display: block;
                width: 20px;
                height: 100%;
                position: absolute;
                top: -180px;
                left: 0;
                background-color: rgba(255 255 255 / 0.6);
                transform: rotate(45deg);
                animation: reflect 2s ease-in-out infinite;
                -webkit-transform: rotate(45deg);
                -webkit-animation: reflect 2s ease-in-out infinite;
            }

            @keyframes reflect {
                0% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0;
                }

                80% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0.5;
                }

                81% {
                    transform: scale(4) rotate(45deg);
                    opacity: 1;
                }

                100% {
                    transform: scale(50) rotate(45deg);
                    opacity: 0;
                }
            }

            @-webkit-keyframes reflect {
                0% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0;
                }

                80% {
                    transform: scale(0) rotate(45deg);
                    opacity: 0.5;
                }

                81% {
                    transform: scale(4) rotate(45deg);
                    opacity: 1;
                }

                100% {
                    transform: scale(50) rotate(45deg);
                    opacity: 0;
                }
            }

            .pop_table .link a {
                position: relative;
                display: inline-block;
                margin-top: 8px;
                margin-left: -5px;
                letter-spacing: 0;
                color: var(--clr-blue);
            }

            .pop_table .link a:before {
                content: "";
                width: 5px;
                height: 5px;
                border: 0;
                border-top: solid 2px var(--clr-blue);
                border-right: solid 2px var(--clr-blue);
                transform: rotate(45deg);
                position: absolute;
                top: 0;
                right: -10px;
                bottom: 0;
                margin: auto;
            }

            .pop_table td span.__yellow {
                background: linear-gradient(transparent 50%, #ffe8a7 50%);
                color: #000;
                font-weight: bold;
            }

            .popup {
                position: relative;

                &:after {
                    position: absolute;
                    bottom: -46px;
                    left: 50%;
                    display: block;
                    content: "";
                    width: 96px;
                    height: 46px;
                    background: center/cover no-repeat url(../img/txt-point.svg?ver1.1);
                    z-index: 2;
                    transform: translateX(-50%);
                }
            }

            .pt {
                td {
                    padding-block: 40px 20px;
                }
            }
        }
    }
}

/*------------------------------------
  共通
--------------------------------------*/
/* Header */
.Header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;

    .toggle {
        position: relative;
        width: 20px;
        height: 16px;
        display: block;

        span {
            display: inline-block;
            transition: all 0.4s;
            position: absolute;
            left: 0;
            height: 2px;
            border-radius: 2px;
            background: var(--clr-navy);
            width: 100%;
        }

        span:nth-of-type(1) {
            top: 0;
        }

        span:nth-of-type(2) {
            top: 7px;
        }

        span:nth-of-type(3) {
            bottom: 0;
        }

        &.is-active {
            span:nth-of-type(1) {
                transform: translateY(8px) rotate(-45deg);
            }

            span:nth-of-type(2) {
                opacity: 0;
            }

            span:nth-of-type(3) {
                transform: translateY(-6px) rotate(45deg);
            }
        }
    }

    .navigation {
        display: none;
        background: #0d5eb5;
        position: absolute;
        top: 56px;
        left: 0;
        width: 100%;
        z-index: 9999;
    }

    .navigation__list {
        text-align: center;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .navigation__list-item {
        border-bottom: solid 1px #1585dc;
    }

    .navigation__list-item:first-child {
        border-top: solid 1px #1585dc;
    }

    .navigation__link {
        color: #fff !important;
        font-weight: 700;
        text-decoration: none;
        display: block;
        padding: 24px 0;
        transition: 0.5s;
    }

    @media screen and (min-width: 769px) {
        .navigation {
            max-width: 640px;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    @media (hover: hover) and (pointer: fine) {
        .navigation__link:hover {
            background: #1585dc;
        }
    }
}

.logo_wrapper {
    height: 20px;
}

.logo_wrapper img {}

/* Navi */
.Navi {
    padding: 16px 16px 24px;

    .wrapper {
        border-radius: 16px;
        background: #f6f6f6;
        padding: 24px 36px;
    }

    .title {
        color: #48587e;
        text-align: center;
        font-weight: 700;
        border-bottom: 3px solid #ecbb48;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .list {
        display: grid;
        gap: 8px;
        padding: 8px;

        a {
            text-decoration: none;
            color: #48587e;
            font-size: 14px;
            font-weight: 700;

            span {
                text-decoration: underline;
            }
        }
    }
}

/* クレジットカード おすすめランキング */
.Ranking {
    background: var(--clr-blue);
    padding: 16px;
    display: grid;
    place-items: center;
    gap: 20px;

    .title {
        font-size: 20px;
        font-weight: 900;
        color: #fff;
        text-align: center;
        position: relative;
        padding: 0 30px;

        span {
            color: #fafe3b;
            font-size: 26px;
            display: block;
        }

        &:before,
        &:after {
            content: "";
            display: block;
            position: absolute;
            background: center/cover no-repeat url(../img/ico_star.png);
        }

        &:before {
            width: 31.249px;
            height: 31.249px;
            transform: rotate(17.545deg);
            left: 0;
            top: 10px;
        }

        &:after {
            width: 25.408px;
            height: 25.408px;
            transform: rotate(-34deg);
            right: 0;
            bottom: 3.115px;
        }
    }

    .card {
        background: white;
        padding: 32px 16px;
        border-radius: 8px;
        display: grid;
        gap: 16px;

        .card_title {
            font-size: 24px;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            img {
                display: block;
                width: 36px;
                margin-left: -24px;
            }
        }

        .card_subTitle {
            span {
                color: var(--clr-red);
                font-weight: bold;
            }
        }

        .card_heading {
            font-size: 20px;
            font-weight: 700;
            color: var(--clr-navy);
            border-bottom: 2px solid var(--clr-blue);
            padding: 20px 10px 10px;
            text-align: center;
        }

        .image {
            width: 100%;
            overflow-x: hidden;
            position: relative;
            --swiper-pagination-bottom: 0;
            --swiper-theme-color: var(--clr-blue);
            --swiper-navigation-size: 20px;

            .swiper {
                padding-bottom: 20px;
            }

            .swiper-slide {
                text-align: center;
            }
        }

        .rank_table {
            width: 100%;
            margin-top: 16px;
        }

        .rank_table th,
        .rank_table td {
            width: 33.33%;
            padding: 10px 3px;
            letter-spacing: 0;
            text-align: center;
            vertical-align: middle;
            font-size: 12px;
        }

        .rank_table th {
            font-weight: bold;
            background-color: var(--clr-lightBlue);
            border: solid 1px #d5ebee;
        }

        .rank_table td {
            min-height: 64px;
            border: solid 1px #d5ebee;
        }

        .rank_table td img {
            max-height: 16px;
            margin: 5px 1px;
        }

        .accent {
            color: var(--clr-red);
            font-weight: 700;
            font-size: 14px;
        }

        .tags {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;

            li {
                color: var(--clr-navy);
                font-size: 12px;
                font-weight: 500;
                display: flex;
                padding: 4px 8px;
                justify-content: center;
                align-items: center;
                border-radius: 100vh;
                border: 1px solid var(--clr-navy);
            }
        }

        .rank_table.__table02 th {
            background-color: var(--clr-blue);
            color: #fff;
        }

        .rank_table.__table02 tr td:first-of-type {
            width: 70%;
        }

        .point {
            display: grid;
            width: 100%;
            gap: 16px;
        }

        .point_wrapper {
            position: relative;

            &.is-mask {
                height: 160px;
                overflow-y: hidden;

                &:after {
                    content: "";
                    display: block;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 150px;
                    width: 100%;
                    z-index: 2;
                    background: linear-gradient(180deg,
                            rgba(255, 255, 255, 0) 0%,
                            #fff 53.5%,
                            #fff 100%);
                }
            }
        }

        .comment {
            font-size: 14px;
            padding: 12px;
            line-height: 1.7;
            background-color: #fff6ed;
            font-weight: bold;

            span.__red {
                color: var(--clr-red);
            }
        }

        .point_item {
            display: grid;
            gap: 4px;
        }

        .point_title {
            color: var(--clr-navy);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;

            &:before {
                content: "";
                display: block;
                background: center/cover no-repeat url(../img/ico_check.svg);
                width: 20px;
                height: 20px;
            }
        }

        .point_text {
            font-size: 14px;
            font-weight: 400;
        }

        .readMore {
            color: var(--clr-blue);
            font-size: 14px;
            font-weight: 700;
            display: block;
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
        }

        .recommend {
            display: grid;
            gap: 16px;
        }

        .recommend_item {
            font-weight: 700;
            position: relative;
            color: var(--clr-navy);
            display: flex;
            align-items: center;
            gap: 8px;

            &:before {
                content: "";
                display: block;
                background: center/cover no-repeat url(../img/ico_check.svg);
                width: 20px;
                height: 20px;
            }
        }

        .reviews_slide {
            width: 100%;
            overflow-x: hidden;
            position: relative;
            margin-bottom: 20px;
            --swiper-pagination-bottom: 0;
            --swiper-theme-color: var(--clr-blue);

            .swiper {
                padding-bottom: 30px;
            }
        }

        .reviews_area {
            background: var(--clr-lightBlue);
            border-radius: 4px;
            padding: 16px;
            display: grid;
            gap: 10px;
            font-size: 14px;

            p {
                line-height: 1.7;
            }
        }

        .reviews_title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            color: var(--clr-navy);

            &.red {
                color: var(--clr-red);
                opacity: 0.8;
            }
        }

        .reviews_image {
            background: white;
            border-radius: 100%;
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;

            img {
                width: 20px;
            }
        }
        
        .notice{
        font-size: 14px;
        color: #888;
        }
    }
}

/* よくある質問 */
.Faq {
    margin-top: 36px;
    padding-bottom: 36px;

    .toggle {
        display: none;
    }

    .SectionTitle {
        margin-bottom: 8px;
    }

    .accordion {
        position: relative;
        border-bottom: 1px solid var(--clr-blue);
        background: white;
    }

    .accordion_title,
    .accordion_content {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: all 0.3s;
    }

    .accordion_title {
        padding: 1.5em 2em 1.5em 1em;
        display: block;
        font-weight: bold;
        color: var(--clr-navy);
        cursor: pointer;
    }

    .accordion_title::after,
    .accordion_title::before {
        content: "";
        position: absolute;
        right: 1.25em;
        top: calc(50% - 5px);
        width: 2px;
        height: 0.75em;
        background-color: var(--clr-navy);
        transition: all 0.3s;
    }

    .accordion_title::after {
        transform: rotate(90deg);
    }

    .accordion_content {
        max-height: 0;
        overflow: hidden;
    }

    .toggle:checked + .accordion_title + .accordion_content {
        max-height: 10000px;
        transition: all 1.5s;
    }

    .toggle:checked + .accordion_title::before {
        transform: rotate(90deg) !important;
    }

    .faq_title {
        position: relative;
        padding-left: 30px;
    }

    .faq_title .qa {
        position: absolute;
        top: calc(50% - 17px);
        left: 0;
        font-size: 22px;
    }

    .faq_txt {
        position: relative;
        margin: 0 1em 1.5em 1em;
        padding-left: 30px;
    }

    .faq_txt .qa {
        position: absolute;
        top: -6px;
        left: 0;
        font-size: 22px;
        font-weight: bold;
        color: #e50916;
    }

    .faq_txt p {
        margin-top: 10px;
    }
}

/* footer */
.Footer {
    padding: 40px 0;
    text-align: center;
    color: #fff;
    background-color: var(--clr-blue);

    a {
        color: #fff;
        text-decoration: none;
    }

    small {
        display: block;
        margin-top: 20px;
        letter-spacing: 0;
        font-size: 11px;
    }
}

/*search_step
---------------------------------------------------------------------------*/

#step_area html {
    line-height: 1;
}

#step_area ol,
#step_area ul {
    list-style: none;
}

#step_area table {
    border-collapse: collapse;
    border-spacing: 0;
}

#step_area caption,
#step_area th,
#step_area td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

#step_area q,
#step_area blockquote {
    quotes: none;
}

#step_area q:before,
#step_area q:after,
#step_area blockquote:before,
#step_area blockquote:after {
    content: "";
    content: none;
}

#step_area a img {
    border: none;
}

#step_area article,
#step_area aside,
#step_area details,
#step_area figcaption,
#step_area figure,
#step_area footer,
#step_area header,
#step_area hgroup,
#step_area main,
#step_area menu,
#step_area nav,
#step_area section,
#step_area summary {
    display: block;
}

#step_area html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

#step_area body {
    font-family: "Kosugi Maru", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
        "メイリオ", "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif;
    color: #696969;
}

#step_area input,
#step_area select,
#step_area textarea,
#step_area button,
#step_area option {
    font-family: "Kosugi Maru", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
        "メイリオ", "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif;
    color: #696969;
    font-size: 1rem;
}

#step_area button {
    cursor: pointer;
}

#step_area a {
    text-decoration: none;
    color: #696969;
}

#step_area input[type="submit"] {
    -webkit-appearance: none;
}

:root {
    --main-color: #5bb75b;
    --sub-color: #ff7e0e;
}

#step_area {
    background: #fff;
    position: relative;
}

#step_area .step_title {
    font-size: 16px;
    text-align: center;
    margin: 0 0 10px;
}

#step_area .step_count {
    padding: 0.5rem;
}

#step_area .step_count ul {
    display: flex;
    justify-content: center;
    margin: 0 0 6px;
}

#step_area .step_count ul li {
    background: #b0b0b0;
    padding: 0.5rem;
    border-radius: 50%;
    color: #ffffff;
    position: relative;
}

#step_area .step_count ul li.active {
    background: #ffd940;
    color: #666;
    font-weight: bold;
}

#step_area .step_count ul li.active:not(:first-of-type):before {
    background: #ffd940;
}

#step_area .step_count ul li:not(:first-of-type) {
    margin-left: 1rem;
}

#step_area .step_count ul li:not(:first-of-type):before {
    content: "";
    display: block;
    background: #b0b0b0;
    height: 2px;
    position: absolute;
    left: -1rem;
    width: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

#step_area .step_body {}

#step_area .step_body .step {
    display: none;
    flex-wrap: wrap;
}

#step_area .step_body .step.open {
    display: flex;
    justify-content: flex-start;
}

#step_area .step_body .step .label_wrap {
    flex-basis: calc((100% - 12px) / 3);
    padding: 0;
    box-sizing: border-box;
}

#step_area .step_body .step .label_wrap:nth-child(3n-1) {
    margin: 0 6px 6px 6px;
}

#step_area .step_body .step.column2 .label_wrap {
    flex-basis: calc((100% - 5px) / 2);
}

#step_area .step_body .step .label_wrap:nth-child(3n-1) {
    margin: 0 5px 5px 5px;
}

#step_area .step_body .step.column2 .label_wrap:nth-child(3n-1) {
    margin: 0 0px 5px 0px;
}

#step_area .step_body .step.column2 .label_wrap:nth-child(odd) {
    margin: 0 5px 5px 0;
}

#step_area .step_body .step .label_wrap label span {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    padding: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    display: block;
    text-align: center;
    border: 1px solid var(--sub-color);
    border-radius: 5px;
    transition: 0.5s background-color, color;
    position: relative;
    background: #fff4eb;
}

#step_area .step_body .step .label_wrap label span:after {
    position: absolute;
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: var(--sub-color);
}

#step_area .step_body .step .label_wrap label input[type="radio"],
#step_area .step_body .step .label_wrap label input[type="checkbox"] {
    display: none;
}

#step_area .step_body .step .label_wrap label input[type="radio"]:checked + span,
#step_area .step_body .step .label_wrap label input[type="checkbox"]:checked + span {
    background: var(--sub-color);
    color: #ffffff;
}

#step_area .step_body .step .button_wrap {
    flex: 100%;
    padding: 0.5rem 0;
    display: flex;
    justify-content: space-evenly;
}

#step_area .step_body .step .button_wrap .button,
#step_area .step_body .step .button_wrap button {
    padding: 0.2rem 2rem;
    font-size: 14px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    font-size: 10px;
}

#step_area button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

#step_area .step_body .step .button_wrap button.search_start {
    background: #ff4b4b;
    color: #fff;
}

.grad-btn {
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 0px;
    left: 0;
    width: 130px;
    margin: auto;
    padding: 4px 0;
    border-radius: 4px;
    background: var(--sub-color);
    color: #fff;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s ease;
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
    font-weight: bold;
}

.grad-btn i {
    margin: 0 6px 0 0;
}

.step_inner {
    background: #fff;
    position: relative;
    overflow: hidden;
    height: 160px;
}

.step_inner:before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    /*グラデーションで隠す高さ*/
    background: -webkit-linear-gradient(top,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0.9) 50%,
            #fff 100%);
    background: linear-gradient(top,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0.9) 50%,
            #fff 100%);
    content: "";
    z-index: 1;
}

.grad-trigger {
    display: none;
    /*チェックボックスは常に非表示*/
}

.grad-trigger:checked + .grad-btn {
    display: none;
    /*チェックされていたら、grad-btnを非表示にする*/
}

.grad-trigger:checked ~ .step_inner {
    height: auto;
    /*チェックされていたら、高さを戻す*/
}

.grad-trigger:checked ~ .step_inner:before {
    display: none;
    /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

.search_step_box {
    padding: 0px 16px 0;
    margin: 0 0 32px;
}

.search_step_box_title {
    text-align: center;
    line-height: 1;
    padding: 16px 0;
    font-weight: bold;
    background: var(--clr-blue);
    color: #fff;
    border-radius: 8px 8px 0 0;
}

.search_step_box_inner {
    padding: 16px;
    border: solid 1px var(--clr-blue);
    border-radius: 0 0 8px 8px;
}

/*other
---------------------------------------------------------------------------*/

p.notes {
    padding: 0 16px;
    margin: 0 0 32px;
}

/*section_category
---------------------------------------------------------------------------*/

.feature_wrap {
    padding: 0 8px;
}

.feature_title {
    position: relative;
    margin: 30px 0 35px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: var(--clr-navy);
}

.feature_title::after {
    content: "";
    width: 40px;
    height: 4px;
    display: inline-block;
    background-color: var(--clr-blue);
    position: absolute;
    bottom: -10px;
    left: calc(50% - 20px);
}

.feature_area {
    display: flex;
    flex-wrap: wrap;
    margin-top: -10px;
    width: 100%;
}

.feature_area li {
    width: calc((100% - 8px) / 2);
    margin-left: 8px;
    margin-top: 10px;
}

.feature_area li:nth-child(2n-1) {
    margin-left: 0;
}

.feature_area li a {
    position: relative;
    display: block;
    padding: 20px 8px;
    letter-spacing: 0;
    font-weight: bold;
    color: #0d5eb5;
    border: solid 1px var(--clr-blue);

    border-radius: 4px;
    background: #fff;
}

.feature_area li a:before {
    content: "";
    width: 5px;
    height: 5px;
    border: 0;
    border-top: solid 2px #0d5eb5;
    border-right: solid 2px #0d5eb5;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    margin: auto;
}

.feature_area li img {
    max-width: 24px;
    margin-right: 5px;
}

.__amazon,
.__doutor,
.__starbucks {
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.__amazon:before {
    display: inline-block;
    content: '';
    width: 16px;
    height: 16px;
    background-image: url(../img/cre_service_logo_amazon.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: 0 3px 0 0;
}

.__doutor:before {
    display: inline-block;
    content: '';
    width: 28px;
    height: 28px;
    background-image: url(../img/cre_service_logo_doutor.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: 0 3px 0 0;
}

.__starbucks:before {
    display: inline-block;
    content: '';
    width: 22px;
    height: 22px;
    background-image: url(../img/cre_service_logo_starbucks.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: 0 3px 0 0;
}

.pop_table tr td:first-of-type {
    border-right: solid 2px #FD9426 !important;
    border-left: solid 2px #FD9426 !important;
}

.pop_table thead tr:first-of-type td:first-of-type {
    border-top: solid 2px #FD9426 !important;
}

.pop_table tbody tr:last-of-type td:first-of-type {
    border-bottom: solid 2px #FD9426 !important;
}

.__baloon_first {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.__baloon_first_inner {
    background: #FD9426;
    font-size: 12px;
    white-space: nowrap;
    line-height: 1;
    padding: 6px;
    font-weight: bold;
    color: #fff;
    border-radius: 4px;
    position: relative;
}

.__baloon_first_inner:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-style: solid;
    border-color: #FD9426 transparent transparent transparent;
    border-width: 6px 4px 0 4px;
    z-index: 1;
}

.pop_table thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* tbody内のセルより手前に表示する */
    z-index: 2;

}

.pop_table thead th,
.pop_table thead td {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}


@keyframes fuwafuwa {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.anime01 {
    animation: 2s fuwafuwa infinite;
}


/*  tenpo_modal
------------------------------*/
.modalBox02 {
    display: flex;
    justify-content: space-between;
}

.modalBox02 .modalLeftBox,
.modalBox .modalRightBox {
    position: relative;
    width: 49%;
    z-index: 100;
}

.modalBox02 .modalLeftBox dl dd:hover,
.modalBox02 .modalRightBox dl dd:hover {
    opacity: .6;
}

.modalBox02 .modalLeftBox .modalArea,
.modalBox02 .modalRightBox .modalArea {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.modalBox02 .modalLeftBox .modalArea .modalBg,
.modalBox02 .modalRightBox .modalArea .modalBg {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modalBox02 .modalLeftBox .modalArea .modalCont,
.modalBox02 .modalRightBox .modalArea .modalCont {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    width: calc(100% - 60px);
    height: 100%;
    background-color: #fff;
    padding: 3% 5%;
    max-width: 850px;
    max-height: 750px;
    z-index: 100;
}

.modalCont {
    position: relative;
    z-index: 100;
}

.modalCont ul {
    max-height: 515px;
    overflow-y: scroll;
}

.modalBox02 .modalLeftBox .modalArea .modalCont > *:first-child,
.modalBox02 .modalRightBox .modalArea .modalCont > *:first-child {
    margin-top: 0;
}

.modalBox02 {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

.modalBox02 .modal_tenpo_info .head {
    border-bottom: 2px solid #FF7715;
    margin: 0 auto 5%;
    padding: 2% 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #FF7715;
}

.modalBox02 .modal_tenpo_info .map {
    margin: 0 auto 3%;
    width: 100%;
}

.modalBox02 .modal_tenpo_info table {
    width: 100%;
    margin: 0 auto 5%;
}

.modalBox02 .modal_tenpo_info table th {
    width: 35%;
    background: #FFF7F0;
    line-height: 3rem;
}

.modalBox02 .modal_tenpo_info table td {
    width: 65%;
    padding: 0 0 0 3%;
}

.modalBox02 a.ranking_item_linkbutton {
    display: block;
    text-align: center;
    margin: 0 auto 0;
    width: 90%;
    background: #22C77F;
    box-shadow: 0 5px 0 #419A73;
    line-height: 1.4;
    padding: 3%;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 100px;
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
}

.modalBox02 a.ranking_item_linkbutton:before {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    font-size: 1.6rem;
    font-weight: 900;
    color: #ffffff;
    right: 5%;
    top: 52%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.js-modal-close {
    position: absolute;
    top: 3%;
    right: 5%;
    font-size: 1.6rem
}

/*tenpo_accordion
---------------------------------------------------------------------------*/

.tenpo_accordion {
    width: 100%;
    margin: 0;
}

.tenpo_accordion .accordion_one {
    max-width: 100%;
    margin: 0 auto;
}

.tenpo_accordion .accordion_one .accordion_header {
    background-color: #6699ff;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 16px;
    text-align: center;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
}

.tenpo_accordion .accordion_one:first-of-type .accordion_header {
    border-radius: 4px;
}

.tenpo_accordion .accordion_one .btn02 {
    padding: 1%;
}

.tenpo_accordion .accordion_one:nth-of-type(1) .accordion_inner .accordion_header {
    background-color: #FA6092;
}

.tenpo_accordion .accordion_one .accordion_header:hover {
    opacity: .8;
}

.tenpo_accordion .accordion_one .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}

.tenpo_accordion .accordion_one .accordion_header .i_box .one_i {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
}

.tenpo_accordion .accordion_one .accordion_header.open .i_box {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

.tenpo_accordion .accordion_one .accordion_header .i_box .one_i:before,
.tenpo_accordion .accordion_one .accordion_header .i_box .one_i:after {
    display: flex;
    content: '';
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center;
}

.tenpo_accordion .accordion_one .accordion_header .i_box .one_i:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}

.tenpo_accordion .accordion_one .accordion_header.open .i_box .one_i:before {
    content: none;
}

.tenpo_accordion .accordion_one .accordion_header.open .i_box .one_i:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.tenpo_accordion .accordion_one .accordion_inner {
    display: none;
    padding: 0;
    box-sizing: border-box;
    /* background: #FFF3FC; */
}

.tenpo_accordion .accordion_one .accordion_inner .box_one {
    height: 300px;
}

.tenpo_accordion .accordion_one .accordion_inner p.txt_a_ac {
    margin: 0;
}

/*====================================================================
.tenpo_accordion .accordion_one
====================================================================*/
.tenpo_accordion .accordion_one {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.tenpo_accordion .accordion_one .accordion_header {
    background-color: var(--clr-blue);
    /* border-bottom: 1px solid #fff; */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 3%;
    text-align: center;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
}

.tenpo_accordion .accordion_one .accordion_inner .btn_02 {
    max-width: 95%;
    margin: 1% auto;
    padding: 2%;
    background-color: rgb(250 96 146 / 75%);
}

.tenpo_accordion .accordion_one:nth-of-type(1) .accordion_inner .accordion_header {
    max-width: 95%;
    margin: 1% auto;
    padding: 2%;
    background-color: #4FD2E3;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
}

.tenpo_accordion .accordion_one:nth-of-type(1) .accordion_inner .accordion_inner .accordion_header {
    background-color: #fff;
}

.tenpo_tonai_wrap {
    width: 100%;
}

.tenpo_tonai_wrap table {
    width: 100%;
    text-shadow: none;
}

.tenpo_tonai_wrap table tr {
    width: 100%;
    padding: 3%;
}

.tenpo_tonai_wrap table th {
    width: 35%;
    margin: 0 5% 0 0;
    padding: 3%;
    color: #333;
    background: #FFE8CF;
    font-size: 0.8rem;
}

.tenpo_tonai_wrap table td {
    width: 110%;
    color: #222;
    font-size: 11px;
    padding: 0 0 0 3%;
    text-align: left;
    background: #FFF7F0;
}

.tenpo_accordion .accordion_one .accordion_header:hover {
    opacity: .8;
}

.tenpo_accordion .accordion_one .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}

.tenpo_accordion .accordion_one .accordion_header .i_box .one_i {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
}

.tenpo_accordion .accordion_one .accordion_header.open .i_box {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

.tenpo_accordion .accordion_one .accordion_header .i_box .one_i:before,
.tenpo_accordion .accordion_one .accordion_header .i_box .one_i:after {
    display: flex;
    content: '';
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center;
}

.tenpo_accordion .accordion_one .accordion_header .i_box .one_i:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}

.tenpo_accordion .accordion_one .accordion_header.open .i_box .one_i:before {
    content: none;
}

.tenpo_accordion .accordion_one .accordion_header.open .i_box .one_i:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.tenpo_accordion .accordion_one .accordion_inner {
    display: none;
    padding: 0 8px;
    box-sizing: border-box;
}

.tenpo_accordion .accordion_one .accordion_inner .box_one {
    height: 300px;
}

.tenpo_accordion .accordion_one .accordion_inner p.txt_a_ac {
    margin: 0;
}

.kuchikomi_link:after {
    font-family: "Font Awesome 5 Free";
    content: "\f3c5";
    color: #ff5050;
    margin: 0 0 0 3px;
}

@media screen and (max-width:768px) {

    .modalBox02 .modalLeftBox .modalArea .modalCont,
    .modalBox02 .modalRightBox .modalArea .modalCont {
        max-height: 650px
    }

    .modalBox02 .modalLeftBox .modalArea .modalCont,
    .modalBox02 .modalRightBox .modalArea .modalCont {
        padding: 8% 5%;
        width: calc(100% - 60px);
    }

    .modalBox02 .modal_tenpo_info table th {
        width: 25%;
    }

    .modalBox02 .modal_tenpo_info table th,
    .modalBox02 .modal_tenpo_info table td {
        font-size: 0.85rem
    }
}

/*-------------------------
  selecter_bottom
-------------------------*/
section.selecter_bottom {
    padding: 0 20px;
    margin: 0 0 60px;
    width: 100%;
    background-size: 100% auto;
}

section.selecter_bottom {
    width: 600px;
    margin: 32px auto 32px;
    padding: 16px 0 16px;
    border: 1px solid var(--clr-blue);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 5px 10px rgb(0 188 212 / 30%);
}

.selecter_bottom_box ul {
    width: 80%;
    margin: 16px auto 16px;
}

.selecter_bottom_box ul li {
    display: inline-block;
    width: 49%;
    margin: 0 auto 8px;
    padding: 0;
}

.selecter_bottom_box h2 {
    padding: 8px;
    color: #fff;
    font-size: 16px;
    text-align: center;
}

.selecter_bottom_item_header {
    position: relative;
    width: 100%;
}

.selecter_bottom_item_header div {
    position: absolute;
    width: 6%;
    top: 25%;
    left: 17%;
}

.selecter_bottom_item_header img {
    width: 100%;
}

.selecter_bottom_box .select {
    position: relative;
    border: 2px solid #8D8D8D;
    background: #fff;
    border-radius: 6px;
    vertical-align: middle;
}

.selecter_bottom_box selected:first-of-type {
    background: #F1F1F1;
}

.selecter_bottom_box select {
    position: relative;
    vertical-align: middle;
    width: 100%;
    padding: 7% 8%;
    padding-right: 1em;
    border: none;
    outline: 0;
    background: none;
    background-image: none;
    box-shadow: none;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
}

.selecter_bottom_box li::before {
    position: absolute;
    top: 25%;
    right: 13%;
    width: 0;
    height: 0;
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    font-size: 1.6rem;
    font-weight: 900;
    color: #ffffff;
    font-size: 1rem;
    color: var(--sub-color);
    pointer-events: none;
}

.selecter_bottom_box select::-ms-expand {
    display: none;
}

.selecter_bottom_box .search_result_text {
    margin: 0 auto 3%;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

span.text_color02 {
    color: var(--clr-blue);
    font-weight: bold;
}

.search_btn input {
    display: block;
    text-align: center;
    margin: 0 auto 0;
    width: 60%;
    background: var(--sub-color);
    ;
    line-height: 1.2;
    padding: 16px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 300px;
    font-size: 1.4rem;
    position: relative;
    overflow: hidden;
    border: none;
}

@media screen and (max-width:768px) {

    section.selecter_bottom {
        width: calc(100% - 32px);
        margin: 32px auto 8%;
        padding: 5% 0 8%;
        border-radius: 10px;
    }

    .selecter_bottom_box ul {
        width: 90%;
        margin: 5% auto 3%;
    }

    .selecter_bottom_box ul li {
        display: inline-block;
        width: 48%;
        margin: 0 auto 3%;
        padding: 0;
    }

    .selecter_bottom_box h2 {
        padding: 1% 0 0 8%;
        font-size: 1rem;
        text-align: center;
        border-radius: 15px 15px 0 0;
    }

    .selecter_bottom_item_header {
        position: relative;
        width: 100%;
    }

    .selecter_bottom_item_header div {
        position: absolute;
        width: 6%;
        top: 25%;
        left: 14%;
    }

    .selecter_bottom_box select {
        width: 100%;
        padding: 7% 8%;
        padding-right: 1em;
        text-indent: 0.01px;
        font-size: 0.75rem;
    }

    .selecter_bottom_box li::before {
        top: 25%;
        right: 13%;
        font-size: 0.75rem;
    }

    .selecter_bottom_box .search_result_text {
        margin: 0 auto 3%;
        font-size: 2rem;
    }

    .search_btn input {
        width: 60%;
        padding: 12px;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        border-radius: 300px;
        font-size: 14px;
    }
}

/*-------------------------
  selecter_top
-------------------------*/
section.selecter_top {
    width: 600px;
    margin: 16px auto;
    padding: 0 0;
}

section .selecter_top_box {
    margin: 0 auto 8%;
    padding: 0 0 5%;
    border: 1px solid var(--clr-blue);
    border-radius: 12px;
}

.selecter_top h2 {
    padding: 8px 0;
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: var(--clr-blue);
    border-radius: 14px 14px 0 0;
}

section .selecter_top_box .select {
    position: relative;
    position: relative;
    border: 1px solid #000;
    border-radius: 10px;
    vertical-align: middle;
}

section .selecter_top_box select {
    position: relative;
    vertical-align: middle;
    width: 100%;
    padding: 7% 8%;
    padding-right: 1em;
    border: none;
    outline: 0;
    background: none;
    background-image: none;
    box-shadow: none;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
}

section .selecter_top_box select::-ms-expand {
    display: none;
}

section .selecter_top_box .search_result_text {
    margin: 0 auto 3%;
    text-align: center;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1;
}

section .selecter_top_box .search_result_text .fontsize_S {
    font-size: 1.4rem;
}

.selecter_top_inner {
    display: flex;
}

.selecter_top_column {
    width: 50%;
    padding: 40px 0 0 40px;
}

h3.selecter_top_h3 {
    font-size: 16px;
    color: #666;
    margin: 0 0 8px;
    padding: 0 0 0 0px;
}

ul.selecter_top_selecteditem {
    margin: 0 0 16px;
    padding: 0 0 0 0px;
    display: flex;
}

ul.selecter_top_selecteditem li {
    padding: 8px 16px;
    margin: 0 0 0 0;
    font-size: 14px;
    border: solid 2px var(--clr-blue);
    background: #fff;
}

a.search_item_linkbutton {
    display: block;
    text-align: center;
    margin: 0 auto 0;
    width: 60%;
    background: var(--sub-color);
    ;
    line-height: 1.2;
    padding: 16px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 300px;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

a.search_item_linkbutton:before {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    font-size: 1.2rem;
    font-weight: 900;
    color: #ffffff;
    right: 5%;
    top: 52%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.submit_select_wrap {
    text-align: right;
}

#submit_select {
    margin: 0 16px 16px auto;
    font-size: 14px;
    width: 160px;
    height: 36px;
    line-height: 30px;
    border-radius: 5px;
    padding: 0 0 0 8px;
}

select#submit_select {
    text-align: left;
}

@media screen and (max-width:768px) {
    section.selecter_top {
        width: calc(100% - 32px);
        margin: 0 auto;
        padding: 0;
    }

    section .selecter_top_box {
        margin: 0 auto 32px;
        padding: 0 0 16px;
        border-radius: 10px;
    }

    .selecter_top h2 {
        padding: 2% 0;
        font-size: 1.2rem;
        border-radius: 5px 5px 0 0;
    }

    section .selecter_top_box .select {
        border-radius: 5px;
        vertical-align: middle;
    }

    section .selecter_top_box select {
        width: 100%;
        padding: 7% 8%;
        padding-right: 1em;
        outline: 0;
        text-indent: 0.01px;
        font-size: 0.75rem;
    }

    section .selecter_top_box li::before {
        top: 25%;
        right: 13%;
        font-size: 1.6rem;
        font-size: 0.75rem;
    }

    section .selecter_top_box .search_result_text {
        margin: 0 auto 3%;
        font-size: 2rem;
    }

    section .selecter_top_box .search_result_text .fontsize_S {
        font-size: 1.2rem;
    }

    .selecter_top_inner {
        display: flex;
    }

    .selecter_top_column {
        padding: 20px 0 0 20px;
    }

    h3.selecter_top_h3 {
        font-size: 14px;
        margin: 0 0 10px;
        padding: 0 0 0 0px;
    }

    ul.selecter_top_selecteditem {
        margin: 0 0 15px;
    }

    ul.selecter_top_selecteditem li {
        padding: 4px 8px;
        margin: 0 0 0 0;
        font-size: 12px;
        border: solid 1px var(--clr-blue);
    }

}

.houkei.search .Ranking {
    & .title {
        &:after {
            display: none;
        }

        &:before {
            display: none;
        }
    }
}

/*about
---------------------------------------------------------------------------*/

section.about {
    margin-top: 50px;
    padding: 0 16px;
}

.center {
    text-align: center;
}

h2.about_h2 {
    font-size: 20px;
    position: relative;
    display: inline-block;
    padding: 0 0 10px;
    margin: 0 0 32px;
}

h2.about_h2:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    display: inline-block;
    width: 80px;
    height: 4px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
    background-color: #0D5EB5;
}

table.about_table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin: 0 auto 40px;
    font-size: 16px;
}

table.about_table tr {
    border-bottom: dotted 2px #ccc;
}

table.about_table tr:first-child {
    border-top: dotted 2px #ccc;
}

table.about_table th,
table.about_table td {
    padding: 15px 0px;
}

h4.about_h4 {
    font-size: 16px;
    border-left: solid 6px #888;
    padding: 0 0 0 6px;
    line-height: 1.25;
    margin: 0 0 15px;
}

p.about_p {
    margin: 0 0 30px;
}

p.about_p:last-child {
    margin: 0 0 60px;
}

.compare_title_wrap {
    margin: 0 0 40px;
    text-align: center;
    background: #FFFFE0;
    padding: 30px 20px;
    position: relative;
}

@media screen and (max-width:768px) {

    section.about {
        margin-top: 30px;
    }

    .center {}

    h2.about_h2 {
        font-size: 18px;
        padding: 0 0 5px;
        margin: 0 0 20px;
    }

    h2.about_h2:after {
        bottom: -5px;
        width: 40px;
        height: 2px;
    }

    table.about_table {
        margin: 0 auto 30px;
        font-size: 14px;
    }

    table.about_table tr {
        border-bottom: dotted 2px #ccc;
    }

    table.about_table tr:first-child {
        border-top: dotted 2px #ccc;
    }

    table.about_table th,
    table.about_table td {
        padding: 12px 0px;
    }

    h4.about_h4 {
        font-size: 16px;
        border-left: solid 4px #888;
        padding: 0 0 0 4px;
        margin: 0 0 8px;
    }

    p.about_p {
        margin: 0 0 20px;
        font-size: 12px;
    }

    p.about_p:last-child {
        margin: 0 0 40px;
    }


}

   .ExtraCtaButtonWrapper {
    max-width: 500px;
    margin: 8px auto 16px;
    padding: 0 20px;
  }
  
  .ExtraCtaButton {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    color: white;
    background: var(--clr-blue);
    border-radius: 8px;
    border: 1px solid #fff;
    box-shadow: 2px 3px 0 0 rgba(72, 88, 126, 0.25);
  }