@charset "utf-8";
/*reset*/
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #3B4043;
}
.container-fluid {
    max-width: 1024px;
    padding-left: 0;
    padding-right: 0;
}
ul,ol,li {
    margin: 0;
    padding: 0;
}
li{
    list-style:none;
}
a, a:hover {
    transition: all .2s ease-in-out;
    text-decoration: none;
    color: #009FD1;
}
a:hover {
    opacity: 0.8;
}
table th {
    font-size: .9rem;
    font-weight: 400;
}
table td {
    font-size: .9rem;
    font-weight: 300;
}
table.table a {
    color: #3B4043;
    text-decoration: none;
}
table.table td, table.table th {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}
.image img {
    width: 100%;
    height: auto;
}
.row {
    margin-left: 0;
    margin-right: 0;
}
.card, .navbar, .pagination .page-item.active .page-link  {
    box-shadow: none;
}
p.description {
    font-size: .7rem;
    margin-bottom: 0.5rem;
    color: #3B4043;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}
.table .thead-light th {
    color: #495057;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.grey.lighten-2 {
    background-color: #e0e0e0 !important;
}
.grey.lighten-2 th {
    background-color: #e0e0e0;
}
/*アイコンを全体的に太くする*/
i.bi {
    -webkit-text-stroke: 0.75px;
}
/*fillアイコンなど細くしたいアイコン*/
i.bi-plus-circle-fill, i.bi-dash-circle-fill, i.bi-caret-right-square {
    -webkit-text-stroke: 0px;
}
.bi-x::before {
    vertical-align: 0;
}

/*bootstrap上書き：primary button*/
.btn-primary {
    background-color: #CC0033;
    border-color: #CC0033;
}
.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: #CC0033;
    border-color: #F7C6CE;
}
.btn-primary:hover {
    background-color: #d86e78;
    border-color: #d86e78;
}
.btn-outline-primary {
    color: #CC0033;
    background-color: #fff;
    border: 2px solid #CC0033;
}
.btn-outline-primary.active, .btn-outline-primary:active, .btn-outline-primary:hover {
    background-color: #CC0033;
    border-color: #CC0033;
}
.btn-outline-primary:not([disabled]):not(.disabled).active, .btn-outline-primary:not([disabled]):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    background-color: #CC0033;
    border-color: #CC0033;
}

/* utility */
.flex-box{
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.font-small {
    font-size: .9rem!important;
}
.font-xsmall {
    font-size: .8rem!important;
}
.textR {
    color: #CC0033!important;
}
.textY{
    background: linear-gradient(transparent 60%, #fdff6c 60%);
    text-decoration: none;
}
.bg-red {
    background-color: #CC0033!important;
}
.bg-light-red {
    background-color: #FCE0E5;
}
.bg-light-gray {
    background-color: #F5F5F5;
}
.cursor-pointer {
    cursor: pointer;
}

/*ボタン*/
.btn {
    margin: 0 0 1rem 0;
    border-radius: 4px;
    box-shadow: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn:active:not(.btn-outline-primary),
.btn:active:not(.btn-outline-dark) {
    border-color: transparent;
}

.btn.btn-lg {
    padding: 1rem 2.4rem;
    font-size: .94rem;
}
.btn-card .btn.btn-lg {
    width: 100%;
}
.btn-card .btn[class*=btn-outline-].btn-lg {
    padding-top: calc(.7rem - 2px);
    padding-bottom: calc(.7rem - 2px);
}
.btn-light {
    background-color: #959EA7!important;
    color: #fff;
    padding: .5rem 2rem;
}
.btn-light:hover {
    color: #fff;
    background-color: #babfc3!important;
}
.btn-ghost {
    background-color: transparent;
}
.btn-ghost.active,
.btn-ghost:hover {
    background-color: #3D3D3D;
    color: #fff;
    font-weight: 700;
}
.btn-rounded {
    border-radius: 10em;
}
.btn.join-btn {
    border: solid 2px #F7C6CE;
    font-size: 1.3rem;
    padding: 1.3rem 2.5rem;
    margin-bottom: .25rem;
}
.btn.join-btn + p {
    font-weight: 500;
    color: #CC0033;
}

.new-login-btn, .old-login-btn {
    padding-left: 6rem;
    padding-right: 6rem;
}
.new-login-btn:hover, .old-login-btn:hover {
    border-width: 2px;
}
.new-login-btn:hover:before, .old-login-btn:hover:before, .new-login-btn:active:before, .old-login-btn:active:before {
    background: url("../img/common/white_button24.png") no-repeat;
}
.new-login-btn:before, .old-login-btn:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 16px;
    margin-right: 5px;
    background-size: contain;
    vertical-align: middle;
    transition: background ease-in-out 0.2s;
}
.new-login-btn:before {
    background: url("../img/common/red_button24.png") no-repeat;
}
.old-login-btn:before {
    background: url("../img/common/black_button24.png") no-repeat;
}

/* ヘッダー */
.drawer-navbar {
    background-color: transparent;
    z-index: 13;
}
.nav-link {
    padding-top: 0;
    padding-bottom: 0;
}
.nav-link:hover {
    opacity: 0.75;
}
.nav-link img {
    vertical-align: text-bottom;
}
.nav-item p{
    margin: 0;
    font-size: .75rem;
    line-height: 1rem;
}
.navbar {
    font-weight: 400;
}
.navbar.navbar-light .breadcrumb .nav-item .nav-link, .navbar.navbar-light .navbar-nav .nav-item .nav-link {
    color: #3B4043;
}
.navbar-brand img {
    height: 32px;
    vertical-align: text-bottom;
}
.drawer--right .drawer-nav {
    right: -75%;
}
.drawer-nav {
    width: 75%;
}
.drawer-navbar-header {
    height: 4.25rem;
}
.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    background-color: #CC0033;
    border-radius: 1rem;
}
.drawer-hamburger-icon:before {
    top: -8px;
}
.drawer-hamburger-icon:after{
    top: 8px;
}

.drawer-brand img {
    height: 24px;
}
.drawer-navbar .drawer-nav {
    padding-top: 4.25rem;
}
.drawer-menu-item:hover {
    text-decoration: none;
}
.drawer-menu .list-group-item, .drawer-menu .row a {
    font-size: .9rem;
    color: #3B4043;
    display: block;
    padding: .75rem 1.25rem;
}
.drawer-menu .list-group-item-action:focus, .drawer-menu .list-group-item-action:hover, .drawer-menu .col:focus, .drawer-menu .col:hover {
    color: #3B4043;
    background-color: #F0F3F5;
}
.drawer-menu .list-group-item:first-child {
    border-top: 0;
}
.drawer-menu .row {
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.drawer-menu .plus-icon, .drawer-menu .minus-icon {
    font-size: 1rem;
    padding: .75rem;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

#navbarCollapseProgramList, #navbarCollapseGuideList {
    width: 100vw;
    background-color: rgba(203, 17, 50, 0.75);
}
.collapse-program-list-wrapper, .collapse-guide-list-wrapper {
    min-width: 40rem;
    background-color: #fff;
    border-radius: 0.5rem;
}
.collapse-program-list-wrapper a:hover, .collapse-guide-list-wrapper a:hover {
    opacity: 0.75;
}

header .navbar.navbar-light .navbar-nav .nav-item .nav-link.active {
    color: #CC0033;
}

/*drawer.min.cssの調整*/
@media (min-width: 64em) {
    .drawer-navbar {
        height: auto;
    }
}
/*フッター*/
.footer-copyright p {
    font-size: .7rem;
}
.up-btn {
    display: none;
    position: fixed;
    height: 48px;
    width: 48px;
    padding: 0;
    bottom: 4px;
    right: 20px;
    cursor: pointer;
    z-index: 9999;
}
.up-btn div {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    color: #fff;
    background-color: #CC0033;
}

/*スライダー*/
.splide-arrow {
    background: none;
    border: none;
    color: #3D3D3D;
    cursor: pointer;
    margin: 0 0.2rem;
    height: 1em;
    line-height: 1px;
}

.splide-bullet.is-active {
    background-color: #3D3D3D;
}
.splide-bullet {
    background-color: #fff;
    opacity: 1;
    border: 1px solid #3D3D3D;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin: 3px;
    padding: 0;
    width: 8px;
}

.swiper-pagination {
    position: relative;
    z-index: 1;
}
.swiper-slide {
    transition: all 0.15s ease-in-out;
}
.swiper-slide:hover {
    opacity: 0.75;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: auto;
    width: auto;
}
.swiper.top-contents {
    overflow: visible;
}
.swiper.top-contents .swiper-slide:not(.swiper-slide-active) {
    cursor: pointer;
}
.swiper.top-contents .swiper-slide:not(.swiper-slide-active) a {
    pointer-events: none;
    display: block;
    height: 100%;
    width: 100%;
}
.top-swiper-btn.swiper-button-prev.top-swiper-btn-skeleton {
    position: absolute;
    top: 0;
    left: -1.5vw;
    width: 4vw;
    height: 100%;
    z-index: 10;
}
.top-swiper-btn.swiper-button-prev.top-swiper-btn-skeleton:after {
    content: none;
}
.top-swiper-btn,
.campaign-contents.swiper-button-prev,
.campaign-contents.swiper-button-next,
.campaign-contents-sp.swiper-button-prev,
.campaign-contents-sp.swiper-button-next {
    position: initial;
    margin-top: 0;
    height: auto;
    z-index: auto;
}
.top-swiper-btn.swiper-button-next::after,
.top-swiper-btn.swiper-button-prev::after,
.campaign-contents.swiper-button-next::after,
.campaign-contents.swiper-button-prev::after,
.campaign-contents-sp.swiper-button-next::after,
.campaign-contents-sp.swiper-button-prev::after{
    padding: 0.25rem;
    font-size: 0.75rem;
    color: #3D3D3D;
}

.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px;
    cursor: pointer;
}
.top-contents .swiper-pagination-bullet-active,
.campaign-contents .swiper-pagination-bullet-active,
.campaign-contents-sp .swiper-pagination-bullet-active {
    background-color: #3D3D3D;
}
.swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
    border: 1px solid #3D3D3D;
}

/*パンくず*/
.breadcrumb {
    padding: .75rem 1rem;
    margin-bottom: 0;
    background-color: transparent;
    font-weight: 400;
    font-size: .9rem;
}

/*カード*/
.card {
    border: none;
}
.card-body {
    padding: 1.25rem;
}
.card-header {
    padding: 0.75rem 1.25rem
}
.program-card h1,
.info-card h2,
.base-card .card-header h1,
.campaign-slider-card h2{
    font-weight: 700;
    font-size: 1.5rem;
}
.program-card .card-header,
.info-card .card-header,
.base-card .card-header {
    background-color: transparent;
    border-bottom: 1px solid #CC0033;
    padding-left: 0;
    padding-bottom: 0;
}
.slider-card {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

hr.card-header-line {
    margin-top: 2px;
    margin-bottom: 0;
    border: 0;
    border-top: 4px solid #CC0033;
    opacity: 1;
}
.card .card-body h1, .card .card-body h2{
    font-weight: 700;
}
.program-card .card-body, .info-card .card-body {
    padding-left: 0;
    padding-right: 0;
}
.info-card .card-header {
    border-color: #959EA7;
}
.info-card hr.card-header-line, .base-card hr.card-header-line {
    border-color: #959EA7;
}
.info-card .card-body {
    padding-bottom: 0;
}
.info-card .card-footer, .campaign-slider-card .card-footer{
    background-color: transparent;
    border:none;
}

.base-card .card-header {
    border: none;
}
.base-card hr.card-header-line {
    border-radius: 2px;
}
.top-kiji-card:hover, .top-partner-card:hover {
    opacity: .75;
}
.top-kiji-card .card-img-wrapper, .top-partner-card .card-img-wrapper {
    width: 100%;
    overflow: hidden;
    margin: 0;
}
.top-kiji-card a, .top-partner-card a {
    color: #3D3D3D;
}
.top-kiji-card a:hover {
    color: #CC0033;
}
.top-kiji-card img, .top-partner-card img {
    transition: all 0.3s ease-in-out;
}
.top-kiji-card img:hover {
    transform:scale(1.2,1.2);
}
.top-partner-card img.hover {
    transform:scale(1.2,1.2);
}
.top-kiji-card .recommend-label-wrapper {
    left: 1rem;
}
.top-kiji-card .recommend-label {
    background-color: #CC0033;
    width: 70px;
    line-height: 2;
    color: #FFF;
    font-size: 0.9rem;
    text-align: center;
}
.top-kiji-card .recommend-label::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-top: 10px solid #CC0033;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
}

/* 220329 ご利用ガイド guide*/
/* guide */
.card.border{
    border-radius: 0;
}
.card-border{
    margin-top: 10px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px #b8bec4 solid;
    line-height: 2.5rem;
}
.flex-box{
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.card-body li{
    font-size: 1rem;
    margin-bottom: 1rem;
}
.card-body ul.list-item {
    padding-left: 1.15em;
    text-indent: -1.15em;
    font-size: 1rem;
}

.card-header.question.q-erea {
    position: relative;
    z-index: 1;
}
.guide .answer.cp-join-step {
    position: relative;
    top: -20px;
    padding-top: 1.5rem!important;
}


/*CV button*/
.cv-btn {
    width: 550px;
    max-width: 90%;
}

/*バッジ*/
.badge {
    box-shadow: none;
    padding: .5em;
    vertical-align: middle;
}

.badge-new {
    padding: .25em .4em;
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 9px;
    background-color: #CC0033;
    vertical-align: bottom;
}
.badge-UP {
    background-color: #FF5722;
    position: relative;
    overflow: hidden;
}
.badge-UP::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -80px;
    left: 0;
    width: 8px;
    height: 100%;
    background-color: #fff;
    animation: badge-UP 3s ease-in-out infinite;
}
.program-detail .rate {
    display: inline-block;
    margin: .5rem 0;
    padding: .25rem 2rem;
    vertical-align: middle;
}
.rate.badge-UP {
    border-radius: 15px;
    font-weight: 500;
    font-size: .85rem;
    color: #FFF;
    border-color: #f5df9f;
}
@-webkit-keyframes badge-UP {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*TOP 参加できるプログラム*/
.program-card #topProgramList.table th {
    color: #CC0033;
    font-size: 1.25rem;
}
#topProgramList .icon-img {
    width: 100%;
    max-width: 100px;
    padding: 0;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
#topProgramList.table>:not(caption)>*>* {
    background-color: transparent;
}
#topProgramList tbody:not(:first-child) th.border-dashed, #topProgramList div.border-dashed:not(:first-child) {
    position: relative;
}
#topProgramList td,#privateProgramList td {
    width: 20%;
    height: 100%;
    padding: 0.5%;
}
#topProgramList td a,#privateProgramList td a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    border-radius: 8px;
    background-color: #fff!important;
    transition: all .2s ease-in-out;
}
#topProgramList td a:hover,#privateProgramList td a:hover {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.1), 0 4px 15px 0 rgba(0,0,0,.1);
}

#topProgramList .item, #privateProgramList .item {
    display: inline-flex;
    margin-bottom: 1rem;
    width: 24%;
    padding: 2%;
    border-radius: 1rem;
    transition: all .2s ease-in-out;
}
#topProgramList .item:hover, #privateProgramList .item:hover {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.1), 0 4px 15px 0 rgba(0,0,0,.1);
}
#topProgramList .item a, #privateProgramList .item a {
    color: #3D3D3D;
}

#topProgramList p.title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 1rem;
    line-height: 1.25;
}
#topProgramList p.description {
    font-size: .7rem;
    margin-bottom: .5rem;
    color: #3D3D3D;
}

/*23-03-21 追加*/
#programList .stopHover {
    pointer-events: none;
}

/*ドコモ アフィリエイトの特徴*/
.top-feature-contents img {
    max-width: 300px;
}

/*プログラム詳細*/
.gray-card {
    border-radius: 1rem;
    background: #F0F3F5;
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.1), 0 4px 15px 0 rgba(0,0,0,.1);
}
.gray-card p.description {
    line-height: 2rem;
}
.gray-card .card-header {
    background: #F0F3F5;
    border-radius: 1rem 1rem 0 0;
    border-bottom: none;
    padding: 1.5rem 2.5rem;
}
.gray-card .card-header .left-red-title {
    font-weight: 500;
    font-size: 1.2rem;
    background-color: transparent;
    border: none;
    border-left: 6px solid #CC0033;
    border-radius: 0;
    padding: .2rem .5rem;
}
.program-detail p.description {
    font-size: 1rem;
    font-weight: 400;
}
.program-detail p.description.small {
    line-height: 1.5;
    font-size: 80%;
}
.program-detail .icon-img {
    width: 72px;
    /*height: 72px;*/
}
.program-detail .title-img {
    height: 60px;
    padding: 1rem;
}
.program-detail .description-mid {
    color: #CC0033;
    background-color: #fff;
    border-radius: .5rem;
    padding: 1.5rem 0.875rem;
    font-weight: 500;
    font-size: 1.2rem;
    border: 2px dotted #CC0033;
}
.program-detail .description-mid.white {
    color: #3B4043;
    border-color: #fff;
    font-weight: 400;
    font-size: 1rem;
}
.program-detail .description-mid .detail {
    font-size: 14px;
    text-align: left;
    font-weight: 400;
}

.program-detail .card-body .gray {
    width: 95.5%;
}
.program-detail .bi-check::before {
    font-size: 2rem;
    transform: translate(0px, 5px);
}

@media (max-width: 1024px) and (min-width: 876px) {
    .program-detail .card-body .gray {
        width: 95.5%;
    }
}
@media (max-width: 875px) and (min-width: 768px) {
    .program-detail .card-body .gray {
        width: 95%;
    }
}
@media (max-width: 767px) and (min-width: 500px) {
    .program-detail .card-body .gray {
        width: 94.5%;
    }
}
@media (max-width: 499px) and (min-width: 465px) {
    .program-detail .card-body .gray {
        width: 94%;
    }
}
@media (max-width: 444px) and (min-width: 375px) {
    .program-detail .card-body .gray {
        width: 93%;
    }
}
@media (max-width: 374px) {
    .program-detail .card-body .gray {
        width: 90%;
    }
}

/* プログラム詳細 キャンペーン一覧リンク */
.program-detail .campaign-link a {
    position:relative;
}
.program-detail .campaign-link a::after {
    content: "";
    display:inline-block;
    width: 0;
    height: 0;
    border-top: solid 14px #CC0033;
    border-right: solid 8px transparent;
    border-bottom: solid 14px transparent;
    border-left: solid 8px transparent;
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top:-6px;
}
.program-detail .campaign-link a:hover {
    opacity: 0.7;
}
.program-detail .campaign-link .description-mid {
    padding: 1rem 2.75rem 1rem 0.875rem;
    font-size: 1rem;
    width: fit-content;
    margin-left: auto;
}

ul.notes01,
p.notes01 {
    margin: .25em auto 0;
}

ul.notes01 li,
p.notes01 {
    position: relative;
    padding-left: 1em;
    font-size: 0.9rem;
}

ul.notes01 li::before,
p.notes01::before {
    content: '※';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
}

.text-UP {
    font-size: 1.1rem;
    background:linear-gradient(transparent 60%, #ffeb3b 60%);
}
.table-reward-flow, .table-reward-flow2 {
    padding: 1rem 0 0 0;
}
.table-reward-flow td,
.table-reward-flow2 td {
    width: 22%;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}
.table-reward-flow td.txt,
.table-reward-flow2 td.txt {
    font-size: 14px;
    color: #3B4043;
    text-align: left;
    font-weight: 500;
    vertical-align: top;
}
.table-reward-flow td.image,
.table-reward-flow2 td.image{
    vertical-align: top;
    position: relative;
}
.table-reward-flow td,
.table-reward-flow2 td {
    width: 22%;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}
.table-reward-flow-col2 td,
.table-reward-flow2-col2 td {
    width: 46%;
}
.table-reward-flow td.txt,
.table-reward-flow2 td.txt {
    font-size: 14px;
    color: #3B4043;
    text-align: left;
    font-weight: 500;
    vertical-align: top;
}
.table-reward-flow td.image,
.table-reward-flow2 td.image{
    vertical-align: top;
    position: relative;
}
.table-reward-flow td.image:nth-of-type(1)::after,
.table-reward-flow td.image:nth-of-type(2)::after,
.table-reward-flow td.image:nth-of-type(3)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -9%;
    margin-top: 50%;
    margin-bottom: auto;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 8px solid transparent;
    border-left: 8px solid #cc0033;
}
.table-reward-flow td.image:nth-of-type(1)::after,
.table-reward-flow td.image:nth-of-type(2)::after,
.table-reward-flow td.image:nth-of-type(3)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -9%;
    margin-top: 50%;
    margin-bottom: auto;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 8px solid transparent;
    border-left: 8px solid #cc0033;
}
.table-reward-flow > tbody + tbody td.image:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3%;
    margin-top: 50%;
    margin-bottom: auto;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 8px solid transparent;
    border-left: 8px solid #cc0033;
}
.table-reward-flow-col2 td.image:nth-of-type(1)::after {
    margin-top: 18%;
    right: -4%;
}
.table-reward-flow-col2 td.image:nth-of-type(2)::after,
.table-reward-flow-col2 td.image:nth-of-type(3)::after {
    border-left: none;
}
.table-reward-flow2 td.image:nth-of-type(1)::before,
.table-reward-flow2 td.image:nth-of-type(2)::before,
.table-reward-flow2 td.image:nth-of-type(3)::before,
.table-reward-flow2 td.image:nth-of-type(4)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3%;
    margin-top: 50%;
    margin-bottom: auto;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 8px solid transparent;
    border-left: 8px solid #cc0033;
}
.table-reward-flow2-col2 td.image:nth-of-type(1)::before,
.table-reward-flow2-col2 td.image:nth-of-type(2)::before {
    left: -1%;
    margin-top: 18%;
}
.table-reward-flow td.image.none-arrow::after,
.table-reward-flow2 td.image.none-arrow::before {
    border: none;
}
.table-reward-flow td.image.minus50-arrow::after,
.table-reward-flow2 td.image.minus50-arrow::before {
    margin-top: -50%;
}
.reward-flow-md .txtred,
.reward-flow-md2 .txtred,
.table-reward-flow td.txt .txtred,
.table-reward-flow td.txt .txtred,
.table-reward-flow2 td.txt .txtred {
    color: #cc0033;
    font-weight: bold;
}

.reward-txt {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 14px;
    color: #3B4043;
    text-align: left;
    margin-bottom: 0;
}
.flow-number {
    display: block;
    font-weight: 700;
}
.txt-annotation {
    color: #3B4043;
    font-size: 10px;
    display: block;
    text-align: left;
    margin-top: 0.5rem;
    font-weight: 500;
}

.reward-flow-md,
.reward-flow-md2 {
    color: #3B4043;
}

.reward-flow-md .txt,
.reward-flow-md2 .txt {
    font-size: 1rem;
    font-weight: 400;
}

.reward-flow-md img{
    width: 200px;
}

.reward-flow-md2 img{
    max-width: 100%;
}

/*プログラム詳細--キャンペーン詳細*/
.campaign-area {
    border: 2px solid #f0f3f5;
    padding: 2rem 2rem 1rem 1rem;
    background-color: #feffdb;
}
.campaign-area h2.title {
    font-size: 18px;
    margin-bottom: 1.5rem;
    border-left: 5px solid #CC0033;
    padding: .5rem 0 .5rem 1rem;
}
.campaign-list li a:not(.btn) {
    color: #3B4043;
}
.campaign-list li a:not(.btn):hover {
    color: #0056b3;
}
.campaign-list li a:hover img{
    opacity: .75;
}
.campaign-list .float_img {
    width: 35%;
    margin-right: 1rem;
    align-self: flex-start;
}
.campaign-list .rightcol {
    width: 65%;
}
.campaign-title {
    font-size: 1rem;
    font-weight: bold;
}
.campaign-list li a:hover .campaign-title {
    text-decoration: underline;
}
.align-center {
    align-items: center;
}
.campaign-list li:not(:first-child) {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

/*サイドバー*/
.sidebar .list-group-item:last-child {
    border-radius: 0;
}

/*ヘルプ*/
.help-index, .guide-index {
    border-radius: 4px;
    border: 1px #959EA7 solid;
    background-color: #eceff1;
    padding: 1rem;
}
.help-index li, .guide-index li {
    line-height: 1.5;
    padding: .3rem 0;
    margin: .2rem 0;
}
.help-index a , .guide-index a{
    text-decoration: underline;
}

.sub-card > .card-header {
    background-color: transparent;
    border: none;
    border-radius: 2px;
    padding: 1rem;
    margin: .5rem 1rem .5rem 0;
    cursor: pointer;
}
.sub-card > .card-header table {
    font-weight: 600;
    font-size: 1.2rem;
    background-color: transparent;
    border: none;
    border-left: 8px solid #CC0033;
    border-radius: 0;
}
.sub-card > .card-header table td h2{
    font-weight: 600;
    font-size: 1.2rem;
    padding: .2rem .5rem;
    margin: .5rem 0;
}
.sub-card > .card-header:hover {
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.05), 0 3px 6px 0 rgba(0,0,0,.05);
}
.faq-card {
    border-radius: 8px;
    background-color: #fff;
}
.faq-card .card-header {
    padding: 0.5rem 1rem;
    cursor: pointer;
}
.q-icon, .a-icon {
    color: #3D3D3D;
    font-size: 1.2rem;
    font-weight: 500;
}
.a-icon {
    color: #CC0033;
}
.question p, .answer p {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.8rem;
}
.answer {
    padding: 0 1rem 1.5rem 1rem;
}
.answer p {
    font-weight: 400;
    font-size: 0.9rem;
}
.title-header table, .question table, .answer table {
    width: 100%;
}
.question tr {
    vertical-align: middle;
}
.answer tr {
    vertical-align: top;
}
.title-header td:nth-child(2), .question td:first-child, .question td:last-child, .answer td:first-child {
    width: 32px;
}
.plus-icon, .minus-icon, .arrow-icon {
    color: #959da7;
    font-size: 2rem;
    text-align: center;
}
.answer ol {
    padding-left: 2rem;
}
.answer li {
    list-style: decimal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.8rem;
    padding-top: .5rem;
}

.help-gray-card {
    padding: 10px 15px;
    background-color: #f5f5f5;
    outline: solid 5px #f5f5f5;
}

/*禁止事項*/
.prohibited-table td:first-child, .prohibited-table th:first-child {
    border-right: 1px solid #959EA7;
}

/*初心者ガイド*/
.guide .sub-card > .card-header {
    cursor: default;
    margin-bottom: 0;
}
.guide .sub-card > .card-header:hover {
    box-shadow: none;
}
.guide .sub-card > .card-body {
    padding-top: .5rem;
}
.guide .harf-bg-x {
    background:linear-gradient(90deg,#fff 0%,#fff 50%,#FFF7D5 50%,#FFF7D5 100%);
}
.guide .harf-bg-y {
    background:linear-gradient(180deg,#fff 0%,#fff 50%,#FFF7D5 50%,#FFF7D5 100%);
}

.guide-points-sp {
    background-color: #FFF5F7;
    border-radius: 4px;
}

.guide-index li {
    border-right: 1px solid #959ea7;
    margin-right: 10px;
    margin-bottom: .3rem;
    width: 31%;
    display: inline-block;
}
.guide-index li:nth-child(3n){
    margin-right: 0;
    border-right: none;
}
.guide-index li:last-child {
    border-right: none;
}
td.notes {
    background: #FFF7D5;
    color: red;
    padding: .5rem 1.5rem 1.5rem 2rem;
    font-weight: 500;
    border-top: solid 2px #FFF7D5;
}
p.gray-border {
    border: 2px solid #959EA7;
    border-radius: .5rem;
}
p.gray-border .title {
    line-height: 2rem;
}
.guide p.title {
    font-size: 1.1rem;
}
.guide .btn.btn-lg.btn-light.pdf-link {
    font-size: 1.1rem;
    border: 2px solid #CDD6DD;
    border-radius: 20px;
}
.red-card {
    background: #FCE0E5;
    border-radius: .5rem;
}
.red-card p {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.75;
    padding: 3rem 0;
    margin: 0;
}
.progress-meter {
    list-style-type: none;
    margin-left: 1rem;
    margin-bottom: 2rem;
    margin-top: 0;
}
.progress-meter li {
    display: block;
    width: 100%;
    font-size: 1rem;
    margin-bottom: 0;
    position: relative;
}
.progress-meter li:before {
    position: relative;
    text-indent: 0;
}
.progress-meter li.progress-point:before {
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    line-height: 3rem;
    border: none;
    border-radius: .75rem;
    display: inline-block;
    left: -1rem;
    text-align: center;
}
.progress-meter li.progress-point {
    color: #3B4043;
    border-left: .5rem solid #CDD6DD;
}
.progress-meter li.progress-point:last-child {
    border-left: .5rem solid transparent;
}
.progress-meter li.progress-point:before {
    color: #6F7579;
    background-color: #6F7579;
    border: 3px solid #CDD6DD;
}
.progress-meter li.progress-point:last-child:before {
    content: url(../img/guide/checked.png);
    color: #fff;
    height: 3rem;
    width: 3rem;
    line-height: 3rem;
    border-radius: 1.5rem;
    left: -1.75rem;
}

.progress-point .sub-text {
    font-size: .9rem;
    line-height: 1.5rem;
    font-weight: 400;
}
.progress-point div, .progress-point figure {
    width: 46%;
    vertical-align: top;
    position: relative;
    left: -.5rem;
}
.progress-meter li.progress-point:last-child div,.progress-meter li.progress-point:last-child figure {
    width: 45%;
    left: -1.25rem;
}
.progress-point-title {
    font-weight: 500;
}
.guide ul.notice-dot {
    position: relative;
}
.guide ul.notice {
    position: relative;
}
.guide ul.notice-dot li:before {
    content: "●";
    position: absolute;
    left: 0;
}
.guide ul.notice li:first-child:before {
    content: "※";
    position: absolute;
    left: 0;
}
.guide ul.notice li{
    padding-left: 1.2rem;
    font-size: .9rem;
}
.guide ul.notice-dot li {
    padding-left: 1.2rem;
}
.guide .q-icon {
    color: #fff;
    background-color: #cb1132;
    height: 2.5rem;
    width: 2.5rem;
    text-align: center;
    border-radius: 4px;
    margin-right: 0.5rem;
}

/*利用規約*/
.regulation .card-body{
    padding: 1rem;
}
.regulation .sub-card > .card-header:hover {
    box-shadow: none;
    cursor: default;
}
.regulation .sub-card > .card-header.title-header {
    padding: 0;
}
.regulation .sub-card > .card-header.title-header h2 {
    font-size: 1.15rem;
}
.regulation .sub-card > .card-body p {
    font-size: 1rem;
}
ol.ol-type1 {
    position: relative;
    padding:0 0 0 1.5rem;
    margin:0;
}
ol.ol-type1 > li{
    list-style-type:none;
    list-style-position:inside;
    counter-increment: cnt1;
    padding-bottom: .25rem;
    margin-bottom: 0;
    font-size: 1rem;
}
ol.ol-type1 > li:before{
    display: marker;
    content: counter(cnt1) " ";
    left: 0;
    position: absolute;
}
ol.ol-type2 {
    position: relative;
    padding:0 0 0 1.5rem;
    margin:0;
}
ol.ol-type2 > li{
    list-style-type:none;
    list-style-position:inside;
    counter-increment: cnt2;
    padding-bottom: .25rem;
    margin-bottom: 0;
    font-size: 1rem;
}
ol.ol-type2 > li:before{
    display: marker;
    content: "(" counter(cnt2) ")";
    left: 0;
    position: absolute;
}
ol.ol-type3 {
    position: relative;
    padding:0 0 0 1.5rem;
    margin:0;
}
ol.ol-type3 > li{
    list-style-type:none;
    list-style-position:inside;
    counter-increment: cnt3;
    padding-bottom: .25rem;
    margin-bottom: 0;
    font-size: 1rem;
}
ol.ol-type3 > li:before{
    display: marker;
    content:  counter(cnt3) ".";
    left: 0;
    position: absolute;
}
ol.ol-type4 {
    position: relative;
    padding:0 0 0 1.5rem;
    margin:0;
}
ol.ol-type4 > li{
    list-style-type:none;
    list-style-position:inside;
    counter-increment: cnt4;
    padding-bottom: .25rem;
    margin-bottom: 0;
    font-size: 1rem;
}
ol.ol-type4 > li:before{
    display: marker;
    content:  counter() ".";
    left: 0;
    position: absolute;
}
.regulation .li-pb li{
    padding-bottom: .8rem;
}

.regulation ul li.list-item01{
    padding-left: 1.5em;
    text-indent: -1.5em;
}
.regulation ul li.list-item01-1{
    padding-left: 2.5em;
    text-indent: -2.25em;
}

.regulation ul li.list-item02{
    padding-left: 3.5em;
    text-indent: -2.5em;
    padding-bottom: 0.2em;
}
.regulation ul li.list-item03{
    padding-left: 3.25em;
    text-indent: -1.25em;
    padding-bottom: 0.2em;
}
.regulation ul li.list-item04{
    padding-left: 5em;
    text-indent: -2.5em;
    padding-bottom: 0.2em;
}
.regulation ul li.list-item05{
    padding-left: 2.5em;
    text-indent: -1.5em;
    padding-bottom: 0.2em;
}

hr.gray {
    border-top: 1px solid #ccc;
    opacity: 1;
}
.regulation p.title {
    font-size: 1.2rem;
    font-weight: bold;
}
.lh-lg{
    line-height: 2;
}

.regulation .sub-card .title-weight-bold h2 {
    font-weight: bold;
}

/*ドコモアフィリエイトスタートキャンペーン*/
.btn.campaign-btn {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 1.3rem 1.8rem;
}
.btn.campaign-btn + p {
    font-weight: 500;
    color: #3B4043;
    margin-bottom: 0.5rem;
}
.cp-mt-1 {
    margin-top: .8rem;
}
.cp-mt-2 {
    margin-top: 1.3rem;
}
.cp-ml-2 {
    margin-left: 1.5rem;
}
.cp-pt-2 {
    padding-top: 2rem;
}
.cp-mb-2 {
    margin-bottom: 2rem;
}
.cp-dmagazine-txt {
    padding-left: 1.5em;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 600;
    display: inline-block;
    line-height: 2;
}
.cp-dmagazine-txt > .strong1 {
    font-size: 1.25em;
}
.cp-dmagazine-txt > .strong2 {
    font-size: 1.5em;
}
.sub-card > .cp-card-header {
    padding: 0 1rem 1rem;
}
.cp-join-card{
    border-radius: 8px;
    background-color: #fff;
}
.cp-join-card .card-header {
    background-color: #fff;
    border-radius: 8px;
    border: 1px #b8bec4 solid;
    line-height: 2.5rem;
    cursor: pointer;
}
.tab-pane .cp-join-card .answer table {
    table-layout: fixed;
}
.cp-join-icon {
    background-color: #CC0033;
}
.cp-join-step p {
    margin-bottom: 1rem;
    padding-top: 0;
}
img.cp-join-step-img1 {
    width: 54.6%;
}
img.cp-join-step-img2 {
    width: 55.143%;
}
img.cp-join-step-img3 {
    width: 64.333%;
}
img.cp-join-step-dummy {
    width: 52.517%;
}
@media screen and (max-width: 576px) {
    img.cp-join-step-img1, img.cp-join-step-img2,
    img.cp-join-step-img3, img.cp-join-step-dummy {
        width: 100%;
    }
}
.cp-snsmail-list li {
    list-style: none;
    display: inline-block;
    line-height: 1;
    padding: 0 1rem 0 0;
    margin-bottom: 1rem;
    margin-right: 1rem;
    border-right: 1px solid #333;
}
.cp-snsmail-list li:first-child {
    padding-left: 0;
}
.cp-snsmail-list li:last-child {
    border-right: none;
}
.cp-snsmail-list li a {
    border-bottom: 1px solid #007bff;
}
.cp-heading1 {
    font-weight: bold;
    background-color: #cdd6dd;
    padding: 0.8rem 1rem;
}
.text-indent {
    text-indent: -1.0em;
    padding-left: 1.0em;
}
.text-indent2 {
    text-indent: -0.75em;
    padding-left: 1.5em;
}
.btn.btn-website {
    margin-bottom: 0;
    padding: 1rem 6rem;
}

/*ドコモアフィリエイトスタートキャンペーン 210826_start*/
.signup-cp .sub-card > .card-header {
    cursor: default;
    margin-bottom: 0;
    padding: 0;
}
.signup-cp .sub-card > .card-header:hover {
    box-shadow: none;
}
.signup-cp .sub-card > .card-body {
    padding-top: .5rem;
}
@media screen and (min-width:577px) {
    .cp-pt-3 {
        padding-top: 2.5rem!important;
    }
    .cp-pb-3 {
        padding-bottom: 2.5rem!important;
    }
    .cp-pt-4 {
        padding-top: 3.75rem!important;
    }
    .cp-pb-4 {
        padding-bottom: 3.75rem!important;
    }
}
@media (max-width: 576px) {
    .cp-sm-p-1 {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }
    .cp-sm-pt-1 {
        padding-top: 1.5rem!important;
    }
    .cp-sm-pb-2 {
        padding-bottom: 2rem!important;
    }
}
.signup-cp .col-12 {
    padding-right: 20px;
    padding-left: 20px;
}
.signup-cp .card-body {
    padding: 1.875rem;
}
@media (max-width: 576px) {
    .signup-cp .col-12 {
        padding-right: 10px;
        padding-left: 10px;
    }
    .signup-cp .card-body {
        padding: 1rem 0;
    }
}
.signup-cp .kv-txt {
    font-size: 21px;
    line-height: 1.6;
}
.signup-cp .caution-txt {
    font-size: 18px;
}
@media (max-width: 576px) {
    .signup-cp .kv-txt {
        font-size: 1.2rem;
    }
    .signup-cp .caution-txt {
        font-size: 1rem;
    }
}
.signup-cp .illustration-area {
    border: 4px solid #d5d5e5;
    padding: 1rem 0;
    margin-bottom: 5rem;
}
.signup-cp .illustration-area .caution-txt {
    padding-left: 1.625rem;
    padding-right: 1.625rem;
}
@media (max-width: 576px) {
    .signup-cp .illustration-area {
        border-width: 2px;
        margin-bottom: 3rem;
    }
    .signup-cp .illustration-area .caution-txt {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0!important;
    }
}
.signup-cp .step-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.signup-cp .step {
    width: 21.65%;
    background: #feffdb;
    position: relative;
    border: solid #cc0033;
    border-width: 0px 4px 4px 4px;
    border-radius: 3px;
}
@media screen and (min-width:577px) {
    .signup-cp .step:nth-child(1):after, .signup-cp .step:nth-child(2):after
    , .signup-cp .step:nth-child(3):after {
        content: "";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: -25%;
        box-sizing: border-box;
        width: 20px;
        height: 30px;
        border: 15px solid transparent;
        border-left: 20px solid #9e9e9e;
        transform: translate(0, -50%);
    }
}
@media (max-width: 992px) and (min-width:768px) {
    .signup-cp .step:nth-child(1):after, .signup-cp .step:nth-child(2):after, .signup-cp .step:nth-child(3):after {
        width: 15px;
        height: 24px;
        border: 12px solid transparent;
        border-left: 15px solid #9e9e9e;
    }
}
@media (max-width: 767px) {
    .signup-cp .step:nth-child(1):after, .signup-cp .step:nth-child(2):after, .signup-cp .step:nth-child(3):after {
        width: 18px;
        height: 12px;
        border: 9px solid transparent;
        border-left: 12px solid #9e9e9e;
    }
}

.signup-cp .step .box-title {
    font-size: 1.2em;
    background: #cc0033;
    padding: 2px 0;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.signup-cp .step p {
    font-size: 21px;
    padding: 8px 5px 7px;
    margin: 0;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
}
@media (max-width: 992px) and (min-width:577px) {
    .signup-cp .step {
        border-width: 0px 3px 3px 3px;
    }
    .signup-cp .step p {
        font-size: 2vw;
        padding: 5% 2%;
    }
}
@media (max-width:576px) {
    .signup-cp .step {
        width: 100%;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-width: 2px 2px 2px 0px;
        margin-bottom: 10%;
        position: relative;
    }
    .signup-cp .step:nth-child(1):after, .signup-cp .step:nth-child(2):after
    , .signup-cp .step:nth-child(3):after {
        content: "";
        position: absolute;
        top: 150%;
        /* bottom: 0; */
        left: 50%;
        box-sizing: border-box;
        width: 0;
        height: 0;
        border: 12px solid transparent;
        border-top: 14px solid #9e9e9e;
        transform: translate(-50%, -20%);
    }
    .signup-cp .step:last-child {
        margin-bottom: 0;
    }
    .signup-cp .step .box-title {
        width: 20%;
        height: auto;
        padding: 2.8vw;
        line-height: 1;
        font-size: 4vw;
    }
    .signup-cp .step p {
        width: auto;
        font-size: 4vw;
        padding: 2.5vw 0 2.5vw 3vw;
        line-height: 1;
    }
    .signup-cp .step p .spnone {
        display: none;
    }
}
@media screen and (min-width: 577px) {
    .signup-cp img.cp-step-img {
        max-width: 60%;
    }
}
@media screen and (max-width: 576px) {
    .signup-cp img.cp-step-img {
        width: 100%;
    }
}
.signup-cp .gray-frame {
    border: 1px #959EA7 solid;
}
.signup-cp .answer li.none {
    list-style: none;
    padding-top: 0;
}
.signup-cp .answer p.heading {
    font-size: 1.5rem;
    font-weight: bold;
}
.signup-cp a.cta-btn {
    transition: all .2s ease-in-out;
}
a.cta-btn:hover {
    opacity: 0.7;
    box-shadow: none;
}
a.cta-btn:focus {
    box-shadow: none;
}
.float-sp-bnr {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
    z-index: 2;
}
.float-pc-bnr {
    height: 280px;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: block;
    z-index: 2;
}
.float-sp-bnr img, .float-pc-bnr img {
    width: 100%;
}
.invisible-txt {
    display: none;
}
a.float-pc-link {
    display: none;
}
@media (max-width: 576px) {
    .float-sp-bnr {
        display: block;
    }
    a.float-sp-link {
        display: none;
    }
    .float-pc-bnr, a.float-pc-link {
        display: none;
    }
    .signup-cp + footer .up-btn {
        display: none;
        opacity: 0;
        visibility: hidden;
        /*    z-index: -1;*/
    }
}
a.float-pc-link:hover {
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}
.signup-cp .msgArea {
    width: 100%;
    border: 1px solid #f8cbad;
    border-radius: 5px;
    color: #c00000;
    background-color: #fbe5d6;
    padding: 1%;
    line-height: 1.8;
}

/*初心者ガイド SNS・メールで紹介する*/
.guidesns_link1 {
    position: relative;
}
.guidesns_link1:before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url(../img/guide_sns-mail/mark_arrow.png);
    position: absolute;
}
.guidesns_link1 a {
    position: absolute;
}
.guidesns_link1 a span.underline,
.guidesns_link2 a span.underline {
    border-bottom: 1px solid #007bff;
}
.sns-mt-2 {
    margin-top: 2rem!important;
}
.question-sns p{
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.8rem;
}

/* kiji */
.kiji section:not(.cv-section),.kiji nav {
    max-width: 1024px;
    margin: auto;
}
.kiji .cv-section .cv-btn{
    margin: 1rem 0 1rem 0;
}
.kiji-img {
    max-width: 600px;
}
.kiji h2 {
    background-color: #1bb4d3;
}
.kiji h3 img {
    width: 32px;
    height: 27px;
}
.kiji .base-card .card-header {
    padding: 0 2.5rem;
}
.kiji .base-card h2 {
    background-color: #1bb4d3;
    color: #fff;
    font-size: 1.2rem;
    padding: 14px 20px;
    margin-top: 3.25rem;
}
.kiji .base-card h2.mb1 {
    margin-bottom: 1.875rem!important;
}
.kiji .base-card .pl1 {
    padding-left: 2.5rem!important;
}
.kiji .base-card .pr1 {
    padding-right: 2.5rem!important;
}
.kiji .base-card .card-body p {
    padding: 0 1.25rem;
}
.kiji p.gray-frame {
    border: 1px #959EA7 solid;
    padding: 1.25rem;
    margin: 1rem 1.25rem;
}
.kiji h3,
.kiji h4 {
    font-weight: 700;
    font-size: 1rem;
}
.kiji .base-card h3 img {
    width: 32px;
    height: 27px;
}
.kiji .base-card h3 span {
    margin: auto 0;
}
.kiji .base-card img {
    width: 100%;
    max-width: 600px;
    height: auto;
}
.kiji a .underline {
    text-decoration: underline;
}
.kiji .red-card {
    background-color: #ffe2e2;
}
.kiji .red-card p {
    font-size: .8rem;
    color: #CC0033;
    font-weight: normal;
    max-width: 90%;
    padding: .5rem 0 .5rem 1rem;
}
.kiji .btn-card .btn.btn-lg {
    padding: .72rem 1.45rem;
    margin-bottom: 0;
    width: auto;
}
.kiji .m-0 {
    margin: 0 auto!important;
}
.kiji .m-1 {
    margin: 1rem auto!important;
}
.kiji .m-20 {
    margin: 0 20px;
}
.kiji table.comparison {
    margin: 0 auto;
    text-align: center;
}
.kiji table.income-tax {
    width: 60%;
    margin-left: 1.25rem;
    text-align: center;
}
.kiji table.expenses {
    width: 60%;
    margin-left: 1.25rem;
}
.kiji table.expenses.width75 {
    width: 75%;
}
.kiji table.comparison td, .kiji table.comparison th, .kiji table.income-tax td, .kiji table.income-tax th, .kiji table.expenses td, .kiji table.expenses th {
    border: 1px solid #8a8a8a;
    padding: 10px;
}
.kiji table.comparison th {
    background: #efefef;
    font-weight: 600;
    width: 25%;
}
.kiji table.income-tax th, .kiji table.expenses th {
    font-weight: 600;
}
.kiji table.income-tax thead th,
.kiji table.expenses thead th {
    background: #efefef;
}
.kiji table th.width80 {
    width: 80%;
}
.kiji table th.width60 {
    width: 60%;
}
.kiji table th.width40 {
    width: 40%;
}
.kiji table th.width30 {
    width: 30%;
}
.kiji table th.width15 {
    width: 15%;
}
.kiji table th.width20 {
    width: 20%;
}
.kiji table th.width25 {
    width: 25%;
}
.kiji_menu_list {
    flex-wrap: wrap;
    justify-content: space-between;
}
.kiji_menu_list li {
    width: 45%;
    padding-bottom: 1rem;
}
.kiji_menu_list li a {
    text-decoration: underline;
}

/*new_articles*/
.articles-list {
    flex-wrap: wrap;
    padding: 30px 20px;
}
.articles-list article {
    width: 46%;
    background: #fff;
    margin-bottom: 20px;
    transition: 0.3s ;
}
.articles-list article:nth-last-child(odd) {
    margin-left: 2%;
    margin-right: 4%;
}
.articles-list article a {
    height: 100%;
}
.articles-list article .thumbnail {
    min-width: 150px;
    min-height: 100px;
    position: relative;
}
.articles-list article .thumbnail img {
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    object-fit: cover;
}
.articles-list article .thumbnail .icon {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f15f5f;
    color: #fff;
    font-size: 11px;
    padding: 2px 11px;
}
.articles-list article .article-title {
    vertical-align: middle;
    padding: .3rem 1rem;
}
.articles-list article .article-title p {
    float: none;
    font-size: 1rem;
    text-decoration: underline;
    line-height: 1.875;
    margin-bottom: 0;
}
.kiji section.new-kiji-section {
    max-width: 1024px;
    margin: 60px auto;
}
.new_kiji {
    background-color: #f1f1f1;
    padding-top: 10px;
}
.new_kiji h3 {
    font-size: 1.2rem;
    font-weight: 700;
    border-bottom: 4px solid #f15f5f;
    padding-bottom: 5px;
}
.new_kiji h3 i {
    color: #f15f5f;
    padding-left: 1rem;
    padding-right: 1rem;
}
.new_kiji.articles-list article:hover {
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}

/*newslist*/
.guide.kiji-news-list {
    max-width: 1024px;
    margin: auto;
}
.guide .contents-area {
    border: 2px solid #cdd6dd;
    padding: 1.25rem 1rem 1rem;
}
.guide .contents-area h2 {
    font-size: 1.2rem;
    font-weight: 700;
    padding-left: 2rem;
    position: relative;
}
.guide .contents-area h2 i {
    color: #1bb4d3;
    font-size: 32px;
    position: absolute;
    top: -9px;
    left: 0;
}
.guide .contents-area .contents-item {
    border : 1px solid #cdd6dd;
    padding: 1rem;
    margin-top: 1rem;
}
.guide .contents-area .contents-list.-prev .contents-item:nth-child(3) {
    border-bottom: none;
}
.guide .contents-area .contents-list.-active .contents-item:nth-child(3) {
    border-bottom: 1px solid #cdd6dd;
}
.guide .contents-area .contents-item a {
    display: block;
    position: relative;
}
.guide .contents-area .contents-item a figure {
    display: inline-block;
    width: 60%;
    max-width: 150px;
    height: auto;
    -webkit-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    vertical-align: top;
}
.guide .contents-area .contents-item a figure img{
    width: 100%;
}
.guide .contents-area .contents-item a .continued span {
    -webkit-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.guide .contents-area .contents-item a:hover figure,
.guide .contents-area .contents-item a:hover .continued span {
    opacity: 0.75;
}
.guide .contents-area .contents-item .text {
    width: 95%;
    margin-left: 1.25rem;
    display: inline-block;
    font-size: 1rem;
    vertical-align: top;
}
.guide .contents-area .contents-item .text .title {
    font-size: 1rem;
    text-decoration: underline;
    margin-bottom: 0.5rem;
}
.guide .contents-area .contents-item .text .description {
    font-size: 1rem;
    margin-bottom: 0;
}
.guide .contents-area .contents-item .text .continued span {
    background-color: #1bb4d3;
    border-radius: 4px;
    color: #fff;
    font-size: 0.9rem;
    padding: .25rem .5rem;
}
.guide .contents-area .andMoreBtn a img {
    width: 240px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.guide .contents-area .andMoreBtn a:hover img {
    opacity: 0.75;
}

/* 240308 追加*/
@media (min-width: 768px){
    .kiji-list-section {
        padding : 2em;
    }
    .kiji-list-section .kiji-list-content{
        padding: 0 30px;
    }
}

/* 記事一覧 (ハッシュタグ)*/
.contents-search,
.contents-item-group {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.contents-search li {
    width: 16%;
    text-align: center;
    border-radius: .5rem;
    padding: 0.5rem;
    font-size: 0.8rem;
    border: 1px solid #666666;
    cursor: pointer;
    margin: 3px;
}
#showContent{
    display: none;
    border:1px solid rgb(46,117,182);;
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    margin: 3px;
    color: rgb(46,117,182);
    width: 50%;
    margin-top: 10px;
}
.hash-list {
    display: inline-block;
}
.hash-list li {
    text-align: center;
    border-radius: .5rem;
    padding: 0.5rem;
    font-size: 0.8rem;
    border: 1px solid #666666;
    cursor: pointer;
    margin: 5px;
}
.hash-list li a{
    color: #000000;
}
.contents-item-group {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    line-height: 1rem;
}

.contents-item-group li {
    text-align: center;
    border-radius: .5rem;
    padding: 0.5rem;
    font-size: 0.7rem;
    border: 1px solid #666666;
    margin-right: 10px;
}

.is-search-active {
    background-color: #1bb4d3;
    color: #fff;
}

.is_active {
    display: block;
}

.is_inactive {
    display: none;
}

.badge-warning {
    background-color: #A0A0A0;
}
.badge-default {
    background-color: #2BBBAD;
}
.badge-reward-up {
    background-color: rgb(220, 53, 69);
}

/*記事プログラム一覧用*/
.icon-img {
    width: 100%;
    max-width: 110px;
    padding: 0;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
h2.title, h3.title {
    font-weight: 700;
    font-size: 1rem;
    margin: .5rem 0;
}
#programList tbody:not(:first-child) th.border-dashed, #programList div.border-dashed:not(:first-child) {
    position: relative;
}
#programList tbody:not(:first-child) th.border-dashed::before, #programList div.border-dashed:not(:first-child)::before {
    content: "";
    background-image: linear-gradient(to right, #CDD6DD, #CDD6DD 4px, transparent 4px, transparent 8px);
    background-size: 8px 2px;
    background-position: left top;
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}
#programList tr,#privateProgramList tr {
    margin-bottom: 2rem;
}
#programList td,#privateProgramList td {
    width: 20%;
    padding: 2%;
    border-radius: 1rem;
    background-color: transparent;
    transition: all .2s ease-in-out;
    box-shadow: none;
}
#programList td:hover,#privateProgramList td:hover {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.1), 0 4px 15px 0 rgba(0,0,0,.1);
}

#programList .item, #privateProgramList .item {
    display: inline-flex;
    margin-bottom: 1rem;
    width: 24%;
    padding: 2%;
    border-radius: 1rem;
    transition: all .2s ease-in-out;
}
#programList .item:hover, #privateProgramList .item:hover {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.1), 0 4px 15px 0 rgba(0,0,0,.1);
}
#programList .item a, #privateProgramList .item a {
    color: #3B4043;
}
/*23-03-21 追加*/
#programList .stopHover {
    pointer-events: none;
}

/*お知らせ*/
#info.table td {
    border: none;
    font-weight: 400;
    font-size: .75rem;
    color: #3B4043;
    cursor: pointer;
}
#info.table td .badge, #info-list .badge {
    font-size: 0.75rem;
    width: 100px;
    font-weight: 400;
    border-radius: 4px;
}
#info.table td a {
    color: #3B4043;
}
#info .badge-td {
    width: 120px;
}
#info-list li a {
    color: #3B4043;
}
#info-list li i {
    font-size: 1.5rem;
    color: #959EA7;
    line-height: 1.8;
}
.news-filter .btn-ghost {
    min-width: unset;
}
.news-filter.card-body {
    top: -1rem;
    line-height: normal;
    border-color: #F5F5F5;
    border-radius: 0 0 8px 8px;
    max-height: 10rem;
    overflow-y: scroll;
}
.news-filter .form-check-input {
    margin-top: 0.4rem;
    border: none;
    background-color: #f5f5f5;
}
.news-filter .form-check-input:checked[type=checkbox] {
    background-image: url("../img/common/check.svg");
}
.news-filter .form-check-label {
    font-size: 0.75rem;
}
.news-filter-btn.btn-ghost[data-id="news"].active, .news-filter-btn.btn-ghost[data-id="news"]:hover {
    background-color: #2BBBAD;
}
.news-filter-btn.btn-ghost[data-id="reward_up"].active, .news-filter-btn.btn-ghost[data-id="reward_up"]:hover {
    background-color: rgb(220, 53, 69);
}
.news-filter-btn.btn-ghost[data-id="maintenance"].active, .news-filter-btn.btn-ghost[data-id="maintenance"]:hover {
    background-color: #A0A0A0;
}

/*お知らせ詳細*/
.info .card-header {
    padding: 1rem;
    border-bottom: #CC0033 solid 1px;
    border-top: #CC0033 solid 4px;
    border-radius: 0;
}
.info .card-header h1 {
    display: inline-block;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 2;
    vertical-align: middle;
    margin-bottom: 0;
}
.info .card-header .badge {
    font-size: .9rem;
}
.info .card-footer {
    background-color: transparent;
    border-bottom: none;
    border-top: #CC0033 solid 4px;
    padding: 0.75rem 1.25rem;
}
.info .card-footer a {
    font-size: 0.81rem;
    padding: 0.84rem 2.14rem
}
span.info-date {
    font-weight: 400 ;
}

/*ログイン*/
.btn-card p {
    font-size: .8rem;
    color: #CC0033;
    margin: 0
}

/* 参加パートナー 成功の秘訣 */
.partner .sub-card > .card-header {
    cursor: default;
    margin-bottom: 0;
}
.partner .sub-card > .card-header:hover {
    box-shadow: none;
}
.partner .article-area {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 1.5rem 2rem 1.5rem;
    transition: all .2s ease-in-out;
    display: block;
}
.partner .article-area + .article-area {
    margin-top: 2.5rem;
}
.partner .article-area h3 {
    font-size: 1.2rem;
    font-weight: 600;
}
.partner .article-area .article-img {
    width: 100%;
}
.partner .article-area .article-img-border {
    border: 1px solid #ccc;
}
.partner h4.secret {
    font-size: 1rem;
    font-weight: 600;
}
.partner h4.secret::before {
    content: "";
    display: inline-block;
    width: 57px;
    height: 17px;
    background-image: url(../img/partner/check.png);
    background-repeat: no-repeat;
    vertical-align: bottom;
    margin-right: 5px;
}
.partner .article-area .text {
    width: 59%;
    margin-right: 1.25rem;
}
.partner a {
    color: #3b4043;
}
.partner .article-area:hover {
    opacity: 0.7;
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}
.partner a .underline {
    color: #007bff;
    text-decoration: underline;
    margin-top: 0.5rem;
    display: block;
    word-break: break-word;
}
.partner .article-area:hover a .underline {
    color: #0056b3;
}
.partner .mb-6 {
    margin-bottom: 2.5rem;
}
.partner .mb-7 {
    margin-bottom: 3.5rem;
}
.partner .mt-6 {
    margin-top: 3.5rem !important;
}
.partner h2{
    font-weight: 600;
    font-size: 1.2rem;
}
.partner .list-group{
    justify-content: space-evenly;
}
.partner p.list-group-item.list-group-item-action {
    width: 25%;
    border-radius: 0.25rem;
    margin-bottom: 20px;
    text-align: center;
    background-color: #f8f9fa;
    border-color: #707070;
}
.partner p.list-group-item.list-group-item-action:hover{
    opacity:0.8;
}
.partner p.list-group-item.list-group-item-action::after {
    content: "";
    display:block;
    margin: auto;
    width: 16px;
    height: 16px;
    background-image: url(../img/partner/caret-down-fill.svg);
    background-repeat: no-repeat;
}
.partner .list-group .list-group-item:first-child{
    border-radius: 0.25rem;
}
.partner .content{
    margin-bottom: 4.2rem;
}
.partner .content>h3 {
    border-left: 6px solid #CC0033;
    font-weight: 600;
    font-size: 1.2rem;
    padding: 0.2rem 0.5rem;
    margin: 1rem 0;
}


/*お問い合わせ*/
.box-contact li {
    line-height: 1.5;
    padding: .3rem 0;
    margin-bottom: 1rem;
}
.box-contact {
    width: 28.931%;
}
.box-contact h2 {
    font-size: 1.2em;
    font-weight: 600;
    background-color: #cc0033;
    color: #fff;
    padding: 0.8rem 1.2rem 0.8rem;
    margin-bottom: 0;
}
.box-contact a {
    text-decoration: underline;
}
.box-contact .box-contact-body {
    padding: 1rem 1rem 1.25rem;
    background-color: #eceff1;
    border-right: 1px solid #959ea7;
    border-bottom: 1px solid #959ea7;
    border-left: 1px solid #959ea7;
}
.btn.contact-btn {
    border: solid 2px #F7C6CE;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 1.32rem 4.2rem;
}
.contact_annotation {
    background-color: #fff5f7;
}
.contact_annotation ul.list > li > p {
    padding: 0.25rem;
    margin: 0;
}
.contact_annotation i.bi {
    font-size: 1.5rem;
    padding-right: 4px;
    vertical-align: middle;
    color: #CC0033;
    -webkit-text-stroke: 0px;
}

/*利用規約一覧*/
.tos p.title {
    font-size: 1.1rem;
    font-weight: bold;
}
.tos li.title {
    font-weight: bold;
    font-size: 1.15rem;
}
.tos-box {
    height: 255px;
    padding: .5rem;
    border: 1px solid #ccc;
    overflow-y: scroll;
    font-size: 1rem;
}
.card-body .tos-box .tos-list li{
    margin-bottom: 0;
    padding-bottom: 1rem;
}
.tos-box .tos-list li.list-item {
    padding-left: 1.25em;
    text-indent: -1.3em;
    font-size: 1rem;
}
.tos-box .tos-list li.list-item2 {
    padding-left: 2.5em;
    text-indent: -1.0em;
}
.tos-box .tos-list li.list-item3 {
    padding-left: 1.5em;
    text-indent: -1.5em;
}
.tos-box .tos-list li.list-item3-1 {
    padding-left: 2.5em;
    text-indent: -2.25em;
}
.tos-box .tos-list li.list-item4 {
    padding-left: 2.25em;
    text-indent: -2.25em;
}
.tos-box .tos-list li.list-item5 {
    padding-left: 3.5em;
    text-indent: -2em;
    font-size: 1rem;
}
.tos-box .tos-list li a {
    text-decoration: underline;
}
.tos .sub-card > .card-header {
    cursor: default;
    margin-bottom: 0;
}
.tos .sub-card > .card-header:hover {
    box-shadow: none;
}

/* アフィリエイト報酬額の振り込み日程表 */
.paylist .table td, .table th{
    width: 18%;
}
.paylist table td:first-child{
    text-align: left;
    padding-left: 2%;
}
.paylist thead th{
    font-weight: bold;
}
.bg-skyblue{
    background-color: #1bb4d3!important;
}

/*notice element*/
.notice-box {
    max-width: 95%;
}

/*レスポンシブ*/
/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1400px) {
    main {
        margin-top: 4.75rem!important;
    }
}

/*bootstrap large(lg) breakpoints*/
@media (min-width: 992px){
    .main {
        margin-top: 4rem;
    }
    .top-swiper-btn.swiper-button-prev.top-swiper-btn-skeleton {
        left: -5vw;
        width: 6vw;
    }
}

@media (max-width: 992px){
    .navbar .container {
        max-width: 100%;
    }
}

/*bootstrap medium(md) breakpoints*/
@media (min-width: 768px){
    main {
        margin-top:7rem;
    }
    .drawer--navbarTopGutter {
        padding-top: 0;
    }
    .news-filter.card-body {
        max-height: none;
        overflow-y: hidden;
    }
    .news-filter .btn-ghost {
        min-width: 100px;
    }

    .notice-box {
        max-width: 70%;
    }
}
@media (max-width: 768px){
    #navbarCollapseProgramList, #navbarCollapseGuideList {
        display: none;
    }
    .guide-index li {
        width: calc(49% - 10px);
    }
    .guide-index li:nth-child(3n) {
        border-right: 1px solid #959ea7;
        margin-right: 10px;
    }
    .guide-index li:nth-child(2n) {
        border-right: none;
        margin-right: 10px;
    }
    .progress-meter li.progress-point:last-child div,.progress-meter li.progress-point:last-child figure {
        width: 44%;
    }
    .articles-list article {
        width: 100%;
    }
    .articles-list article:nth-last-child(odd) {
        margin-left: 0;
    }
    .related_kiji .articles-list article:nth-last-child(2){
        border-bottom: 1px solid #e0e0e0;
    }
}

/*bootstrap small(sm) breakpoints*/
@media (max-width: 576px){
    html {
        font-size: 14px;
    }
    .slider-card {
        padding: 0 1rem;
    }
    #programList .item, #privateProgramList .item {
        width: 49%;
        padding: 2%;
    }
    #programList .item img, #privateProgramList .item img {
        width: 80%;
    }
    #topProgramList td,#privateProgramList td {
        width: 49%;
    }
    .program-detail .title-img {
        max-height: 40px;
        height: auto;
        max-width: 100%;
        padding: .5rem;
    }
    .program-detail .btn.btn-rounded {
        padding: .5rem 1.5rem;
        margin-top: .5rem;
        min-width: 6rem;
    }
    .program-detail .campaign-link .description-mid {
        padding: 1rem 2rem 1rem 0.875rem;
    }
    .program-detail .campaign-link a::after {
        border-top: solid 10px #CC0033;
        border-right: solid 6px transparent;
        border-bottom: solid 10px transparent;
        border-left: solid 6px transparent;
        right: 0.8rem;
        margin-top: -4px;
    }
    .badge {
        margin-bottom: .25rem;
        margin-left: .25rem;
    }

    .drawer--right .drawer-nav {
        right: -80%;
    }
    .drawer-nav {
        width: 80%;
    }

    .guide-index li {
        border-right: none;
        margin-right: 0;
        margin-bottom: .3rem;
        width: 100%;
        display: block;
    }
    .guide-index li:nth-child(3n) {
        border-right: none;
    }
    .guide .contents-area .contents-item a figure {
        width: 33%;
    }
    .guide .contents-area .contents-item a p.title {
        width: 65%;
        font-size: 1rem;
        padding-top: 0!important;
        padding-right: 0!important;
    }
    .progress-point div, .progress-point figure {
        width: 100%;
        left: 0;
    }
    .progress-meter li.progress-point:last-child div,.progress-meter li.progress-point:last-child figure {
        width: 100%;
        left: 0;
    }
    .progress-meter {
        margin-left: 0;
    }
    .progress-meter li.progress-point {
        border-left: none;
        margin-bottom: 2rem;
    }
    .progress-meter li.progress-point:before {
        content: unset;
    }
    .progress-meter li.progress-point:last-child:before {
        content: unset;
    }
    .guide .btn.btn-lg.btn-light.pdf-link {
        padding: 1rem 1.2rem;
        font-size: 1rem;

    }
    .red-card p {
        font-size: 1.2rem;
        padding: 2rem 0;
    }

    .box-contact {
        width: 100%;
    }
    .btn.contact-btn {
        padding: 1.3rem 1.5rem;
    }

    .kiji .base-card .card-body p {
        padding: 0 .25rem;
    }
    .kiji .card-body, .partner .card-body {
        padding: 1rem 0;
    }
    .kiji .base-card .card-header {
        padding: 0;
    }
    .kiji .base-card h3, .kiji .base-card h4 {
        padding: 0;
    }
    .kiji .base-card .pr1 {
        padding-right: 0!important;
    }
    .kiji .base-card .pl1 {
        padding-left: 0!important;
    }
    .kiji .m-20 {
        margin: 0;
    }
    .kiji .red-card .w-75 {
        width: auto!important;
    }
    .kiji .red-card p {
        padding: 1rem;
    }
    .kiji .btn-card .btn.btn-lg {
        width: 80%;
    }
    .kiji_menu_list li {
        font-size: .9rem;
        width: auto;
        padding-bottom: .5rem;
    }
    .kiji table.income-tax, .kiji table.expenses,
    .kiji table.expenses.width75 {
        width: 98%;
        margin: 0 auto;
    }
    .kiji table.comparison td, .kiji table.comparison th, .kiji table.income-tax td, .kiji table.income-tax th, .kiji table.expenses td, .kiji table.expenses th {
        padding: .5rem;
    }
    .guide .btn.campaign-btn,.kiji .btn.campaign-btn, .btn.campaign-btn.help-btn{
        font-size: .9rem;
        font-weight: 600;
        padding: .7rem 1rem;
    }

    .articles-list {
        padding: 1rem .5rem;
    }
    .articles-list article .article-title p {
        font-size: .9rem;
        line-height: 1.5;
    }
    .new_kiji {
        margin: 60px 0 0;
    }
    .new_kiji .articles-list article .thumbnail {
        min-width: 75px;
        min-height: 50px;
    }
    .related_kiji {
        margin: 30px 0 0;
    }
    .related_kiji .articles-list article .thumbnail {
        min-width: 80px;
        max-width: 80px;
        min-height: unset;
    }
    .related_kiji .articles-list article .thumbnail img {
        height: auto;
        top: 0;
        left: 0;
        transform: none;
        position: relative;
        object-fit: unset;
    }
    .related_kiji .articles-list article:nth-last-child(2) {
        border-bottom: 1px solid #e0e0e0;
    }

    .partner .article-area {
        padding: 1rem;
    }
    .partner .article-area .article-img {
        width: 80%;
    }
    .partner .article-area .text {
        width: 100%;
        margin-right: 0;
    }
    .partner p.list-group-item.list-group-item-action {
        width: 100%;
        border-radius: 0.25rem;
        margin-bottom: 5px;
        text-align: center;
    }
    .cv-btn .sub-text {
        font-size: 0.9rem;
    }
}

@media (min-width: 576px){
    .navbar.scrolling-navbar {
        padding-top: 1rem;
        padding-bottom: 1rem;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
    .navbar.scrolling-navbar.top-nav-collapse {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* 220114 TOPページお知らせ追加 */

.notice {
    line-height: 1.8;
    max-width: 1000px;
    margin: 0 auto;
}

.notice .notice-bg {
    display: block;
    position: relative;
    background-color: #FFF2CC;
}
.notice a:hover{
    opacity: 0.7;
}
.notice .notice-bg h6{
    font-weight: 600;
}
.notice .notice-bg h6 i{
    font-size: 1.4rem;
    vertical-align: middle;
}
.notice .notice-bg div p{
    color: #3B4043;
}
.notice .notice-bg .arrow{
    font-size: 1.8rem;
    font-weight: 100;
    position: absolute;
    top: 0%;
    right: 2%;
}


@media (max-width: 1200px) {
    .notice {
        padding: 0 10px;
    }
}
@media (max-width: 575px) {
    .notice {
        padding: 0 10px;
    }
    .notice-bg>span{
        position: absolute;
        top: 14%;
        font-size: 2.2rem;
    }
    .notice .info-title{
        font-size: 12px;
        padding-right: 10px;
    }
    .notice .info-title h6{
        font-size: 12px;
        padding-left: 4%;
        margin-bottom: 0;
        text-indent: -1em;
        margin-left: 1em;
    }
    .notice .notice-bg .arrow {
        right: 3%;
        top: .3em;
    }
}

/* 220117 お知らせ内容ページ */

.badge-important {
    background-color: #C00000;
    position: relative;
    overflow: hidden;
}

.info-box {
    line-height: 1.8;
    font-size: 14px;
    max-width: 1024px;
    margin: 0 auto;
}

.info-box .info-box-bg {
    background-color: #FFF2CC;
}
.info-box h5{
    text-decoration: underline;
    text-decoration-color: #CC0033 ;
    text-decoration-thickness: 4px;
    text-underline-position: from-font;
}
.table-box {
    line-height: 1.8;
    max-width: 1024px;
    margin: 0 auto;
}

.table-box table td,
.table-box table th {
    border: 1px solid #000000;
}

.table-box table td,
.table-box table th {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.table-box table.table thead th {
    border-top: 1px solid #000000;
}

.table-box table td:first-child {
    width: 65%;
    background-color: #F2F2F2;
}

.table-box table td:last-child {
    width: 35%;
    text-align: center;
}

.info-box p,
.table-box p {
    margin-bottom: 0;
    word-break: break-all;
}

.contact-box {
    background-color: #E7E6E6;
    font-size: 14px;
}

.info-box a,
.contact-box a {
    text-decoration: underline;
    word-break: break-all;
}

.link-ex {
    color: #007bff;
}

.info-box .row img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 767px) {
    .info-box .row img {
        width: 38%;
        margin-bottom: 1rem;
    }
    .position-way2{
        top: 10px;
        right: 12%;
    }
}

/* 230306 お知らせ 支払い日程変更のお知らせ */

p.underline{
    text-decoration:underline;
}
.payday .guide-index {
    border-radius: 30px;
    border: 1px #959EA7 solid;
    background-color: #eceff1;
    padding: 1rem;
}

.payday ul.notice li{
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}
/* reward */
.bg_lemon{
    background: #fdfde2;
}

/* footer */
.h-100{
    height: 100%!important;
}
.card_hover:hover{
    cursor: pointer;
    opacity: .6;
}
.cp-join-step .cp-heading2{
    background-color:#c00000;
    color: #fff;
    font-size: 1.1rem;
    padding: 14px 20px;
    margin: 2rem 0;
}
.cp-join-step .cp-heading2 a{
    color: #fff;
    text-decoration: underline;
}
.cp-join-step .border_red{
    background-color:#fff;
    border:2px solid #c00000;
    color: #000000;
}
p.arrow_r{
    font-size: 4rem;
    text-align: center;
    color: #c00000;
}
a.color_b{
    color: #3B4043;
}
a span.underline{
    text-decoration: underline;
}
.max_w500{
    max-width: 500px;
}
.max_w600{
    max-width: 600px;
}

@media (max-width: 767px) {
    .max_w500{
        width: 100%;
    }
    .max_w600{
        width: 100%;
    }
}

@media (max-width: 767px) and (min-width: 426px) {
    .contents-search li {
        width: 31%;
    }
}

/*xs*/
@media (max-width: 480px) {
    .guide .contents-area .contents-item .text{
        margin: 0;
    }
    .guide .contents-area .contents-item a p.title{
        text-decoration: underline;
    }
    #showContent{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin: 10px auto 0;
        width: 60%;
    }
    .ghost{
        display: none;
    }
    .contents-search li {
        width: auto;
    }
    .text>.continued{
        flex-direction: column;
        margin: 1rem 0 0 !important;
    }
    .text>.continued>.contents-item-group{
        order: 2;
        justify-content: flex-start;
        gap: 4px;
    }
    .text>.continued>.contents-item-group li{
        order: 2;
        justify-content: flex-start;
        margin-right: 0;
        color: #000000;
    }
    .text>.continued>span{
        margin: 0 auto;
        width: fit-content;
        order: 1;
        margin-bottom: 10px;
        transform: translateX(10%);
    }
}

/*tab*/
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: white;
    background-color: #CC0033;
    border: none;
}
.nav-tabs .nav-link {
    color: #3d3d3d;
    background-color: #F5F5F5;
    font-weight: 500;
    border: none;
    padding: 1.25rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.tab-pane {
    border: #CC0033 solid 2px;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

/*モーダル*/
.modal-content .btn-close {
    top: -0.5rem;
    right: -0.5rem;
    background-image: none;
    color: #FFF;
    opacity: 1;
    font-size: 1.5rem;
    background-color: #3D3D3D;
    border-radius: 50%;
    line-height: 1;
    z-index: 1;
}
.modal-content .form-check .form-check-input {
    margin-top: 6px;
}
@media (min-width: 992px){
    .modal-dialog {
        width: 60vw;
        max-width: 700px
    }
}
@media (min-width: 576px){
    .modal-dialog {
        width: 80vw;
        max-width: unset;
    }
}

.top-arrow-icon {
    width: 12px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 2px;
}

/*guide css*/
.participation_method{
    display:flex;
    flex-flow:column nowrap;
    margin:30px 0;
}
.participation_method > div{
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    gap:30px;
}
.participation_method > div > div{text-align:center;}
.participation_method > div.step1 > div:nth-child(1) ,
.participation_method > div.step2 > div:nth-child(1){
    display: flex;
    flex-flow: row wrap;
    flex: 6;
    justify-content:center;
}

.participation_method > div.step1 > div:nth-child(2),
.participation_method > div.step2 > div:nth-child(2) {
    display: flex;
    flex-flow: column wrap;
    flex: 4;
    text-align: left;
}
.participation_method > div > div > div > img{
    width:100%;
}
.participation_method .tt{
    font-size:1.2rem;
    font-weight:bold;
    text-align: center;
}
.participation_method .tt2{
    font-size:1.2rem;
    font-weight:bold;
    color:#CC0033;
    margin-bottom: 0;
}
.participation_method .txt1{
    font-size:16px;
    font-weight:bold;
}
.participation_method .txt2{
    font-size:16px;
    font-weight:bold;
    display:inline-block;
    margin-left:5px;
}
.participation_method .chk_box > div{
    text-align:left;
    margin-bottom:10px;
}
.participation_method .chk_box > div > div{
    display:inline-block;
}
.participation_method > div.step_verify{gap:10px;flex-flow: column;margin: 40px 0;}
.participation_method .step_verify{
    margin-right:4vw;
}
.participation_method .step_verify > div{width:23%;}
.participation_method .step_verify > div > img{width:100%;}
.participation_method .step_verify .verify_txt_box{min-width:310px;}

@media (max-width: 768px) {
    .participation_method .tt {
        font-size: 1.2rem;
    }
    .participation_method > div {
        flex-flow:column wrap;
    }
    .participation_method .txt1{
        text-align:center;
        font-size:14px;
    }
    .participation_method .txt2{
        font-size:14px;
    }
    .participation_method .tt2{
        font-size: 1.2rem;
    }
    .participation_method .step_verify > div {
        width: 60%;
    }
    .participation_method .step_verify{
        flex-direction: column-reverse;
    }
}


/*anchor位置 span*/
.hidden-anchor{
    display: block;
    height: 70px;
    margin-top: -70px;
    visibility: hidden;
}

/* 250319 update*/
.only_pc{
    display: block!important;
}
.only_sp{
    display: none!important;
}
.only_ta{
    display: none!important;
}
.new-sec-1 .txt {
text-align:center;
font-size:20px;
}
.new-sec-1{margin:30px 0 0!important;}
.new-sec-1 h1{margin-bottom:21px!important;}
.new-sec-2 h2{margin-bottom:21px!important;font-weight:bold;font-size:32px;}
.new-sec-2 .txt{
text-align:center;
font-size:18px;
}
.new-sec-3 h2{font-size:32px!important;margin-bottom:11px!important;}
.new-sec-3 .f-desc{font-size:18px!important;}
.new-sec-1 {
position: relative;
}

.new-sec-1::before,
.new-sec-1::after {
content: "";
position: absolute;
transform: translateY(-50%);
background-size: contain;
background-repeat: no-repeat;
}

.new-sec-1::before {
top: 0%;
left: 24vw;
width: 238px;
height: 178px;
background-image: url('/img/portal_top/docomo_affiliate_l.png');
}

.new-sec-1::after {
top: 0%;
right: 25vw;
width: 164px;
height: 149px;
background-image: url('/img/portal_top/docomo_affiliate_r.png');
}
.affili_point h2{
    margin-bottom:0px!important;
    font-size:32px;
}

.affili_point h3 {
position: relative;
text-align: center;
display: inline-block;
padding: 0px;
font-size:26px!important;
margin-bottom:11px!important;
}

.affili_point .txt{
    font-size:18px;
}

.affili_point h3::before,
.affili_point h3::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 25px; 
    height: 3px; 
    background-color: #CC0033;
}

.affili_point h3::before {
    left: 0;
    transform: translateX(-100%) rotate(45deg);
}

.affili_point h3::after {
    right: 0;
    transform: translateX(100%) rotate(-45deg);
}
.affili_point .link{margin-top:50px;}
.affili_point .txt{font-size:18px!important;}
.point_lists{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top:30px;
}

.point_lists .row {
    display: flex;
    flex-flow: row nowrap;
    max-width: 968px;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 55px
}

.point_lists .row > div:first-child {
    flex: 0 0 30%;
    padding:0px;
    min-width:40%;
    text-align: center;
}

.point_lists .row > .box_r {
    flex: 1;
    padding:0px;
    min-width: 51.8%;
    max-width: calc(85% - 254px);
}

.point_lists .row > div > img{
    max-width:100%;
}

.point_lists .row.num p {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:50px;
}

.point_lists .row.num p.num_idx span {
    position: relative;
    padding-top:6px;
    display: inline-block;
    width: 77px;
    height: 77px;
    background-color: #CC0033;
    color: #ffffff;
    font-size: 40px;
    font-weight: 500;
    border-radius: 50%;
    text-align: center;
}

.point_lists .row.num p.num_idx.mt50{
    margin-top:50px;
}

.point_lists .row.num p.num_idx span::after{
    content: "";
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
    bottom: 15px;
    width: 55%;
    height: 2px;
    background-color: currentColor; 
}

.point_lists .tt_box {
    max-width: 561px;
    font-size: 28px;
    font-weight: 500;
    position: relative;
    background: #f5f5f5;
    padding: 20px 10px;
    display: inline-block;
    border-radius: 10px;
    margin-bottom: 55px;
    width: 100%;
}

.point_lists .tt_box span{
    color:#cc0033;
}

.point_lists .tt_box::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 20px 10px 0;
    border-style: solid;
    border-color: transparent #f5f5f5 transparent transparent;
}

.point_lists .tt_des{
    font-size:24px;
    font-weight:400;
    line-height: 38px;
    text-align:center;
    color:#000;
}
.point_lists .tt_des span{
    color:#cc0033;
    background:linear-gradient(transparent 50%, rgba(255,255,0,1) 50%)
}

.sns_lists{
    display:flex;
    flex-flow:row nowrap;
    justify-content: center;
    gap: 42px;
}

.sns_lists > div {
    width: 100%;
    max-width: 280px;
    text-align: center;
}

.sns_lists > div > p{
    font-size:16px;
    color:#000;
    margin-top:19px;
}

.sns_lists > div > div > img{
    max-width:377px;
    width:100%;
}

.top-feature-contents img{
    max-width:377px;
    
}



.success-secret {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
    align-items: center;
    margin-top:44px;
}

.success-secret a {
    display: flex;
    flex-direction: row;
    max-width: 968px;
    width: 100%;
    text-decoration: none;
    background: #fff;
    border: 1px solid #C4C4C4;
    border-radius: 6px;
    padding: 27px 34px 29px;
    box-sizing: border-box;
    gap:40px;
    justify-content:flex-start;
}

.success-secret a div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.success-secret a div.btn_box{
    width: 100%;
    align-items: flex-end;
}

.success-secret a div.img_box{
    display: flex;
    justify-content: center;  
    align-items: center;     
    height: 100%;
    max-width:263px;
    width:100%;
    padding-top:10px;
}

.success-secret a div:nth-child(2){
    min-width:66.5%;
}

.success-secret a img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out; 
}
.success-secret a:hover{
    opacity: 0.7;
}
.success-secret a:hover img {
    transform: scale(1.2);
}

.success-secret a p.txt01{
    color:#000;
    font-weight:500;
    font-size:26px;
    margin-bottom:10px;
}

.success-secret a p.txt02{
    text-align:left;
    color:#000;
    font-weight:400;
    font-size:20px;
    line-height:32px;
    margin-bottom:25px;
}

.success-secret a p.txt03{
    color:#000;
    display:inline-block;
    max-width:311px;
    border-radius:100px;
    border:1px solid #000;
    text-align:center;
    padding:5px 25px;
}

.recommand_article .f-desc{
    text-align: center;
    font-size:18px!important;
    font-weight:400;
    color:#3B4043;
}

.recommand_article h2{
    font-size:32px!important;
    margin-bottom:0px!important;
}

.recommand_article .col-wrap{
    display: flex;
    flex-flow:row nowrap;
    justify-content: center;
    gap:5px;
}

.recommand_article .row-cols-sm-4>*{
    flex: 0 0 auto;
    width: 25%;
    max-width:296px;
}

.recommand_article .col .card{
    border:1px solid #c4c4c4;
}

.recommand_article .card-body{
    padding:10px!important;
}

.recommand_article .card-body .txt{
    font-size:0.8rem;
    color:#000;
    font-weight:400;
    margin-bottom:0px;
}

.under_line{text-decoration: underline;}
.qna h2{
    font-size:32px!important;
}
.new-sec-1 .link_btn,
.new-sec-2 .link_btn,
.new-sec-3 .link_btn,
.affili_point .link_btn{font-size:0.9rem;}
@media (max-width: 768px) {
    .only_pc{
        display: none!important;
    }
    .only_sp{
        display: block!important;
    }
    .new-sec-1 h1{font-size: 18px;}
    .new-sec-1 .txt,
    .new-sec-2 .txt {
    text-align:left;
    font-size:12px;
    line-height:21px;
    }
    
    .new-sec-1 .link_btn,
    .new-sec-2 .link_btn,
    .new-sec-3 .link_btn{font-size:0.9rem;margin-bottom:0px;}
    .new-sec-2 h2{font-size:18px;color:#000;margin-bottom:24px;font-weight:bold}
    .new-sec-2 > div{margin-top:0px!important;}
    .new-sec-3 h2{font-size:18px!important;margin-bottom:21px!important;}
    .new-sec-3 .f-desc{font-size:12px!important;font-weight:400;line-height:21px;}
    .affiliate_img{margin-bottom:24px!important;}
    .affiliate_img > span {
    color:#000;
    margin-top: 50px;
    display: inline-block;
    font-size:18px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    white-space: nowrap;
    }

    .affiliate_img > span::before {
    top: -22vw;
    left: -18vw;
    width: 80%;
    aspect-ratio: 238 / 178;
    height:auto;
    background-size: contain;
    background-position: left center;
    }

    .affiliate_img > span::after {
    top: -20vw;
    right: -16vw;
    width: 54%;
    aspect-ratio: 164 / 149;
    height:auto;
    background-size: contain;
    background-position: right center;
    }
    .point_lists .row.num{flex-flow:column wrap;}
    .point_lists .row > div:first-child img {
        max-width: 100%; 
        height: auto;
        display: block;
        min-width:auto;
    }

    .affili_point h3{font-size:14px!important;line-height:23px;margin-bottom:0px!important;margin:21px 0!important;}

    .affili_point .txt{
        font-size:12px;
    }
    
    .point_lists .row.num p.num_idx span{
        font-size:20px;
        width:38.5px;height:38.5px;
        padding-top:3px;
    }

    .point_lists .row.num p{
        margin-bottom:30px;
    }

    .point_lists .row{
        gap:0px;
    }

    .point_lists .row.num p.num_idx.mt50 {
        margin-top: 30px;
    }

    .point_lists .row.num p.num_idx span::after {
        bottom: 7px;
        height: 1px;
    }
    .point_lists .row > div:first-child {
        flex: 4;
        max-width: 45%;
        min-width: 40%;
    }

    .point_lists .row > .box_r {
        flex: 6;
        min-width: auto;
        max-width: 50%;
    }

    .point_lists .row.num .tt_box{
       font-size:14px;
       margin-bottom:15px;
    }

    .point_lists .tt_des{
       font-size: 3.56vw;
       line-height: 5.64vw;
       margin-bottom:0px;
    }

    .point_lists .link_btn,
    .affili_point .link_btn{font-size:0.9rem;}
    .point_lists .row.num p span::after{
        bottom:7px;
    }
    .affili_point h2{font-size:18px;}
    .affili_point .txt{font-size:12px!important;}
    .point_lists .tt_box{
        font-size:14px;
        width: 90%;
        max-width: none;
        margin: 0 auto;
        padding:8px 0;
    }
    .point_lists .tt_box::before{
        display:none;
    }
    .sns_lists {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    }

    .sns_lists > div {
        width: 90%;
        max-width: 380px;
    }
    .sns_lists > div > p{
        font-size:3.56vw;
        margin-top:18px;
    }

    .top-feature-contents .sns_lists > div > div > img{
        width:70%;
    }

    .success-secret{
        gap:27.5px;
    }

    .success-secret a{
        width: 67.6vw;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        padding:18px 12px 22px;
        gap:30px;
    }

    .success-secret a div{
        align-items:center;
    }

    .success-secret a div:nth-child(2){
        min-width:auto;
    }

    .success-secret a p.txt01{
        font-weight:500;
        font-size: 3.843vw;
        line-height:16px;
        margin-bottom:19px;
    }
    .success-secret a p.txt02{
        text-align:center;
        font-weight:400;
        line-height:21px;
        font-size:3.55vw;
        margin-bottom:23px;
    }
    .success-secret a p.txt03{
        font-size:2.96vw;
    }
    .success-secret a img{
       max-width:70%; 
    }

    .success-secret a div.btn_box {
        align-items: center;
    }

    .recommand_article .col {
        flex: 1 1 calc(50% - 1rem)!important; 
        max-width: calc(50% - 1rem)!important;
    }
    .recommand_article .f-desc{
        font-size:12px!important;
    }
    .recommand_article .col-wrap{
        flex-flow:row wrap;
        gap:0px;
    }
    .recommand_article .card-body .txt{
        font-size:12px;
        line-height:16.5px;
    }
    .recommand_article h2{
        font-size:18px!important;
        line-height:30px;
        margin-bottom:25px!important;
    }
    .qna h2{font-size:18px!important;
    }
    .qna .question p, .qna .answer p{
        font-size:12px;
    }
    .affili_point h3::before,
    .affili_point h3::after {
        content: "";
        position: absolute;
        top: 74%;
        width: 15px;
        height: 1.5px;
        background-color: #CC0033;
    }

    .affili_point h3.ver2::before,
    .affili_point h3.ver2::after{
        top: 50%
    }

    .affili_point h3::before {
        left: -3%;
        transform: translateX(-100%) rotate(45deg);
    }

    .affili_point h3::after {
        right: -3%;
        transform: translateX(100%) rotate(-45deg);
    }

}

@media (min-width: 575px) and (max-width: 768px) {
    h1.affiliate_img {
      font-size: 30px;
    }
  
    h2#programlist {
      font-size: 24px;
    }
  
    .program-card #topProgramList.table th {
      font-size: 15px;
    }
    .affili_point h2, .new-sec-3 h2, .recommand_article h2, .qna h2{
        font-size:24px!important;
    }
  }
  @media screen and (min-width:769px) and (max-width: 1024px) {
    .only_ta{display: none;}
    .box_r .tt_box.only_pc{
        display:block!important;
    }
    .point_lists .row.num .tt_box.only_ta{
        display:none!important;
    }
    .point_lists .tt_des {
        font-size: 24px;
     }
     .affili_point h3{
        font-size: 20px !important;
     }
  }

  @media screen and (min-width: 600px) and (max-width:768px) {
  
    .affili_point h3 {
        font-size: 16px !important;
    }
  }

  @media screen and (min-width: 600px) and (max-width: 1024px) {
  
    .point_lists .row.num .tt_box{
        font-size:14px;
     }
    
     .point_lists .row.num .tt_box{
        font-size:4.14vw;
     }
     
  }

@media (max-width: 676px) {
    .recommand_article .col {
        flex: 1 1 296px;
        max-width: 296px;
    }
}


@media (max-width: 1700px) {
    .new-sec-1::before{left:20vw;}
    .new-sec-1::after{right:21vw;}
    }
    
    @media (max-width: 1700px) {
    .new-sec-1::before{left:17vw;}
    .new-sec-1::after{right:18vw;}
    }
    
    @media (max-width: 1330px) {
    .new-sec-1::before{left:13vw;}
    .new-sec-1::after{right:14vw;}
    }
    
    @media (max-width: 1186px) {
    .new-sec-1::before{left:9vw;}
    .new-sec-1::after{right:9vw;}
    }
    @media (max-width: 1040px) {
    .new-sec-1::before{left:5vw;}
    .new-sec-1::after{right:6vw;}
    }
    @media (max-width: 1024px) {
       
        .point_lists .row{flex-flow:row wrap;gap:0;}
        .only_ta{display:block!important;}
        .point_lists .row.num p{margin-bottom:30px;}
        .point_lists .row .img_01{
            width: 100%;
            max-width: 254px;
            height: auto;
            aspect-ratio: 254 / 291.03;
        }
        .point_lists .row .img_02{
            width: 100%;
            max-width: 263.42px;
            height: auto;
            aspect-ratio: 263.42 / 213;
        }
        .point_lists .row .img_03{
            width: 100%;
            max-width: 283.52px;
            height: auto;
            aspect-ratio: 283.52 / 196;
        }
      }
    @media (max-width: 910px) {
    .new-sec-1::before{left:1vw;width:24vw;}
    .new-sec-1::after{right:2vw;width:17vw;}
    }
    @media (max-width: 630px) {
    .new-sec-1::before{height:100px;}
    .new-sec-1::after{height:85px;}
    }
    @media (max-width: 520px) {
    .new-sec-1::before{height:85px;}
    .new-sec-1::after{height:72px;}
    }