/*------------------------------------------------------------------
ホームの料金プラン
-------------------------------------------------------------------*/
body.guest{
   background-color: #eaf0f9;
}
.plans a.tooltip{
   display: inline-block;
   transform: translate(2px, -10px);
   width: 15px;
   height: 15px;
   font-size: 9px;
   line-height: 16px;
   /*
   position: absolute;
   top: 18px;
   right: 9px;
   */
}
.guest header {
   background-color: rgba(255, 255, 255, 0);
}
.guest header.scrolled {
   background-color: rgba(255, 255, 255, .85);
}
.guest .plans-title-wrapper{
   display: flex;
   justify-content: center;
}
.initial-cost .num {
    font-size: 50px;
    font-weight: bold;
    display: inline-block;
}
.enterprise-plus-col-desc{
   font-weight: normal;
   padding: 0 5px;
}
.enterprise-plus-col-desc p{
   text-align: left;
}
.guest .enterprise-plus-col-desc .desc{
   font-size: 15px;
   line-height: 22px;
}
.nm-container.plans .enterprise-plus-col-desc .desc{
   font-size: 12px;
   line-height: 20px;
}
.enterprise-plus-col-desc .price-sup{
   font-size: 12px;
   padding-left: 1em;
   text-indent: -0.75em;
   line-height: 17px;
}
img.has-feature{
   width: 22px;
   height: auto;
   margin: 0 auto;
}
.plans-container{
   overflow-x: auto;
   scroll-behavior: smooth;
   scrollbar-width: none; /* Firefox */
   /*scrollbar-width: thin; 制作中のテスト用 */
   position: relative;
}
.plans-table{
   width: max-content;
   min-width: 100%;
}
.plans-table thead th{
   padding: 20px 12px 10px;
   font-size:20px;
   color: #2266b1;
   margin: 8px 0 0;
   line-height: 26px;
   font-family: 'roboto', 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', sans-serif;
}
.plans-table thead th.enterprise-plus{
   padding: 20px 12px 0px;
}
tbody.price td{
   position: relative;
}
.guest .plans-table tr:not(.section-row) th,
.guest .plans-table td{
   width: 200px;
   background-color: #fff;
   position: relative;
}
.nm-container.plans .plans-table tr:not(.section-row) th,
.nm-container.plans .plans-table td{
   width: 220px;
   background-color: #fff;
}
/* 左端の列を固定 */
.plans-table thead th:first-child,
.plans-table tbody tr:not(.section-row) th{
   position: sticky;
   left: 0;
   z-index: 3;
   width: 271px;
   min-width: 271px;
   box-shadow: 1px 0 0 #d9dee8;
   text-align: left;
}
.plans-table tbody .section-row th{
   background-color: #2887a7;
   color: #fff;
   text-align: left;
}
.plans-table tbody .section-row .section-row-label{
   position: sticky;
   left: 15px;
   z-index: 4;
   display: inline-block;
}
.plans-table thead th:first-child::before,
.plans-table tbody tr:not(.section-row) th::before{
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 1px;
   height: 100%;
   background: #bcc2cc;
}
.plans-container>div{
   border: 1px solid #eaeaea;
   padding: 10px 16px;
   flex-shrink: 0;
}
.cancel input[type="checkbox"]+span::after{
   top: calc(50% + -2px);
}
.price-sup {
   text-align: center;
   line-height: 16px;
   padding: 5px 11px;
   font-size: 12px;
   font-weight: normal;
   color: #8b8b8b;
}
.enterprise-plus #ritera-pack-is-set .price-sup{
   padding-top: 0;
}
.enterprise-plus .enterprise-plus-col-desc .price-sup{
   padding-top: 2px;
}
.plans-table tbody th{
   vertical-align: middle;
   padding: 10px 15px;
}
.plans-table tbody td {
   vertical-align: middle;
   padding: 10px 12px;
}
.plans-table tbody td.trial{
   text-align: left;
}
.plans-table tbody td.trial ul{
   padding: 8px 0 0 10px;
}
.plans-table tbody tr:not(.section-row, :last-of-type) th,
.plans-table tbody tr:not(.section-row, :last-of-type) td{
   border-bottom: 1px dotted #ccd1db;
}
.plans-table tbody.price tr:first-of-type td{
   padding: 10px 5px;
}
.plans-table tbody tr.section-row th{
   padding: 10px 15px;
}
.plans-table tbody td {
   text-align: center;
   color: #505050;
}
.plans-table tbody:not(.price) td>div {
   display: flex;
   justify-content: center;
   align-items: center;
}
.plans-table tbody:not(.price) td>div>div {
   display: flex;
   align-items: center;
   gap: 7px;
}
.plans-table thead th:not(:nth-of-type(1)),
.plans-table tbody td {
   border-left: 5px solid #eaf0f9;
}
.plans-table tbody td span.num{
   display: inline-block;
   font-size: 1.2em;
   font-weight: bold;
   color: #000;
   margin-right: 2px;
}
.plans-table tbody td span.num-plus{
   transform: translate(-3px, -1px);
   display: inline-block;
}

.plans-table tbody td .price span.num {
   font-size: 36px;
   font-weight: bold;
   display: inline-block;
   font-family: 'roboto', 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', sans-serif;
   transform: scaleX(0.9) translateX(7px);
}
main.plans .plans-table tbody td .price span.num {
   font-size: 40px;
}

.plans-table tbody td span.num.variable{
   min-width: 33px;
   border-bottom: 1px solid #9db2bf;
   min-height: 15px;
   text-align: right;
   padding: 0 6px;
}

section.plans{
   padding: 130px 0 180px;
}
.plans-outer{
   padding: 0px 80px;
}
.plans .initial-cost{
   display: flex;
   justify-content: center;
   align-items: flex-end;
   margin-bottom: 10px;
}
.initial-cost dt{
   margin: 0 10px 17px;
}
.lets-try{
   font-size: 20px;
   margin: 10px 0 0;
   display: flex;
   justify-content: center;
}
.lets-try>p{
   position: relative;
}
.lets-try>p::before,
.lets-try>p::after{
   content: '';
   position: absolute;
}
.lets-try>p::before{
   top: calc(50% - 11px);
   left: -20px;
   width: 7px;
   height: 15px;
   background-color: #508bcb;
}
.lets-try>p::after{
   top: calc(50% + 0px);
    left: -26px;
    width: 19px;
    height: 11px;
    background-color: #508bcb;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.why-lets-try{
   display: flex;
   justify-content: center;
}
.why-lets-try ul{
   margin: 1px 0 20px;
}
.why-lets-try li{
   line-height: 1.7;
}
.about-plan-desc{
   font-size: 16px;
   margin: 0 0 20px;
}
.guest .free .signup-btn-wrapper{
   display: flex;
   justify-content: center;
   flex-direction: column;
   margin: 7px 2px 0;
}
.guest .free .signup-btn-wrapper a::after {
   top: calc(50% + 1px);
}
.guest .free .signup-btn-wrapper .sup-wrapper{
   font-size: 12px;
   margin-top: 3px;
   text-align: center;
}
.guest .free .signup-btn-wrapper a{
   height: 50px;
   font-size: 17px;
   width: calc(100% - 8px);
   margin: 0 auto;
}
/*------------------------------------------------------------------
plans
-------------------------------------------------------------------*/
.plans main{
   padding: 15px 0 80px;
}
.plans .main-footer-wrapper{
   padding-left: 0;
   background-color: #eaf0f9;
}
.plans .title-wrapper {
   margin: 0 0 14px 15px;
}
.title-wrapper .title-remaining-wrapper{
   display: flex;
   gap: 20px;
   align-items: center;
   position: relative;
}
.title-back-link-wrapper{
   display: flex;
   gap: 15px;
   align-items: center;
   position: relative;
}
.plans .title-wrapper p{
   margin: 0 25px 0 0;
}
.plans .highlighting .remaining-ritera-wrapper{
   margin: 0;
}
.title-wrapper{
   justify-content: space-between;
   max-width: 1871px;
   margin-bottom: 7px;
}
.highlighting{
   display: flex;
   width: 100%;
   justify-content: flex-end;
   align-items: end;
   gap: 25px;
}
.plans .none{
   display: none!important;
}
.plans span.plus{
   display: inline-block;
   transform: translate(0.05em, -0.3em);
   font-size: .9em;
}

.price-wrapper {
   position: relative;
}
.ritera-pack-input-outer {
   display: flex;
   justify-content: center;
   margin: 0 0 5px;
}
.enterprise-plus .price{
   transform: translateY(-4px);
}
.enterprise-plus .price-tax{
   transform: translateY(-4px);
}
.ritera-pack-input-wrapper label>span{
   width: 100px;
   text-align: right;
}
.enterprise-plus .price-wrapper .sup{
   font-size: 12px;
   margin-top: 0px;
   color: #3e3e3e;
}
.plans-table tbody td.enterprise-plus-desc-td{
   vertical-align: top;
}
.enterprise-plus-desc-wrapper{
   display: flex;
   justify-content: center;
   align-items: flex-start;
}
.enterprise-plus-desc-wrapper .sup{
   font-size: .8em;
   color: #3e3e3e;
   margin: 5px 0 0 0!important;
}
.add-ritera-desc-wrapper{
   display: flex;
   justify-content: center;
   margin: 15px 0 0;
}
.add-ritera-desc-wrapper>div{
   padding: 0px 66px;
}
.add-ritera-desc-wrapper p{
   margin: 0 0 5px;
   line-height: 26px;
}
.change-plan-inner,
.cancel-inner{
   display: flex;
   flex-direction: column;
   padding: 0 15px;
}
.change-plan-inner .btn{
   min-width: 110px;
   padding: 10px 0;
}
.plans-wrapper {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 10px;
}
.plans-container.scroll{
   cursor: grab;
   cursor: -webkit-grab;
   user-select: none; /* ドラッグ中にテキストが選択されるのを防ぐ */
}
 /* ドラッグ中のカーソル */
.plans-container.active {
   cursor: grabbing;
   cursor: -webkit-grabbing;
}
.plans-container::-webkit-scrollbar {
   display: none; /* Chrome */
}
.plans-wrapper.scroll-btn-right::after{
   content: '';
   top: 0;
   right: 0;
   position: absolute;
   width: 15px;
   height: 100%;
   z-index: 1;
   background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%,  rgb(234 240 249) calc(100% - 5px), rgb(234 240 249) 100%);
}
.scroll-btn-left tr:not(.section-row) th:first-of-type::after{
   content: '';
   top: 0;
   right: -20px;
   position: absolute;
   width: 20px;
   height: 100%;
   z-index: 1;
   background: linear-gradient(270deg, rgb(255 255 255 / 0%) 0%,  rgb(234 240 249) calc(100% + 0px), rgb(234 240 249) 100%);
}
.scroll-btn-wrapper{
   z-index: 5;
   visibility: visible;
   opacity: 1;
   transition: 1s;
   width: 45px;
   position: absolute;
   transform: translateY(-50%);
}
.scroll-btn-wrapper.left{
   left: 274px;
}
.scroll-btn-wrapper.right{
   right: -60px;
}
.scroll-btn-wrapper.hidden{
   visibility: hidden;
   opacity: 0;
}
.scroll-btn{
   background-color: #333;
   color: #fff;
   border-radius: 50%;
   width: 45px;
   height: 45px;
   font-size: 20px;
   font-weight: bold;
   font-family: noto sans jp;
}
.scroll-btn:hover{
   opacity: 1!important;
   background-color: #7f7f7f!important;
}
.plans .sup{
   max-width: 1423px;
   margin-top: 26px;
}
.cancel #no{
   width: 127px;
}

.plans-container p:not(.current, .next, .price-tax){
   margin: 0;
}

.plans-container ul.std{
   padding: 0 0 0 16px;
   margin: 0;
}
.plans-container ul .unit{
   font-size: 14px;
}
.plans-container .ver{
   font-size: .8em;
   color: #333;
}
.plans-container ul.std li{
   line-height: 20px;
}
.plans-container .plan{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 20px;
   background-color: #fff;
}
.plans-container .plan>div{
   height: 100%;
   display: flex;
   flex-direction: column;
}

main.application,
main.change-plan-main{
   padding: 90px 20px 100px!important;
}
main.application>section,
main.change-plan-main>section{
   margin-top: 40px;
}

.application h1{
   font-size: 27px;
   color: #000;
   margin: 0 0 15px;
}
.change-plan-main h1{
   font-size: 27px;
   color: #000;
   margin: 0 0 10px;
}
.application-plan span.cycle,
.application-plan span.free-plan{
   font-size: 1.2em;
}
.application-plan span.cycle{
   font-weight: bold;
}
p.application-plan.current>span,
p.application-plan.next>span{
   color: #a5a5a5;
}
.application-desc{
   max-width: 600px;
   margin-top: 30px;
}
.change-plan-inner form .btns-wrapper{
   transform: translateX(20px);
}
.application-form{
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 25px 0 0;
   align-items: center;
}
.app .application-form{
   flex-direction: row;
   gap: 30px;
}
.application-form-items{
   display: flex;
   flex-direction: column;
   gap: 18px;
   align-items: center;
}
.application-form-item{
   display: flex;
   flex-direction: column;
   width: 250px;
}
.application-form-item label{
   text-align: left;
}
.application-form-item input{
   width: 100%;
}
.st-input{
   padding: 0 12px;
   background-color:#ecf3f5;
}
.card-limit-wrapper{
   display: flex;
   gap: 10px;
   align-items: center;
}
.application-plan{
   display: block;
   background-color: #fff;
   border: 1px solid #3c5dc5;
   text-align: center;
   border-radius: 7px;
   color: #3c5dc5;
   margin: 0;
   text-decoration: none;
   font-size: 14px;
   line-height: 20px;
   position: relative;
   height: 100%;
}
.application-plan:disabled{
   background-color: transparent!important;
   border: 1px solid #dfdfdf!important;
   color: #8b8b8b!important;
}
.application-plan:disabled>span{
   color: #a5a5a5!important;
}
.application-plan:not(.free .application-plan){
   width: 50%;
   height: 100%;
}
.application-plan .discount{
   font-size: 11px;
}
p span.discount {
   margin-left: 2px;
}
.application-plan .discount>span{
   font-size: 1.2em;
   font-weight: bold;
}
.free .application-plan{
   padding: 0 18px;
   min-width: 150px;
}
.application-plan:not(.current, .next):hover{
   background-color: #3c5dc5;
   color: #fff;
   opacity: 1;
}
.free .application-btns-wrapper{
   transform: translateY(13px);
}
.application-btns-wrapper{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   margin: 30px 3px 0;
   height: 63px;
}
.enterprise-plus .application-btns-wrapper{
   margin-top: 5px;
}
p.application-plan.current,
p.application-plan.next{
   border: 1px solid #dfdfdf;
   color: #8b8b8b;
   height: 100%;
   display: flex;
   gap: 2px;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}
p.application-plan.current[data-cycle='y']{
   line-height: 16px;
}
.nm-container.plans .plans-table tbody.price td.enterprise-plus{
   padding-top: 0;
}
.nm-container.plans .plans-table th.enterprise-plus,
.nm-container.plans .plans-table td.enterprise-plus {
   width: 275px;
}
.plans-container .how-many{
   color: #525252;
   margin-bottom: 10px;
}
.no-deduction .change-plan-info-wrapper{
   margin: 15px 0 10px;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
}
.deduction .change-plan-info-wrapper{
   margin: 7px 0 10px;
}
.deduction .change-plan-info-wrapper{
   display: flex;
   align-items: center;
   gap: 20px;
}
.change-plan-table-wrapper{
   background-color: #f4f6f7;
   margin-top: 10px;
}
.no-deduction .change-plan-table-wrapper{
   padding: 5px 20px;
   margin: 0 auto;
}
.deduction .change-plan-table-wrapper{
   padding: 10px 15px;
}
.change-plan-payment-wrapper {
   margin: 15px 15px 0;
   text-align: right;
}
.application-plan-payment-wrapper {
   margin: 5px 0 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.plan-payment{
   margin: 0;
}
.change-plan-payment-wrapper .note{
   margin: 0;
}
.application-desc li{
   font-size: 12px;
}
.application-desc ul.note li{
   line-height: 20px;
}
.application-desc ul.note li:not(last-of-type) {
    margin-bottom: 4px;
}

.plan-payment .price{
   font-size: 14px;
}
.application-plan-payment-wrapper>dl{
   max-width: 230px;
   min-width: 230px;
   padding: 0 10px 10px;
}
.change-plan-payment-wrapper>dl{
   padding: 0 15px 5px 15px;
   text-align: left;
}
.deduction .change-plan-payment-wrapper>dl{
   text-align: right;
}
.balanceToAdd{
   text-align: left;
   width: 100%;
}
.balanceToAdd + .note{
   text-align: left;
   width: 100%;
}
.change-plan-payment-wrapper{
   max-width: 277px;
   min-width: 277px;
}
.deduction .change-plan-payment-wrapper.proration-including-discount{
   max-width: 310px;
   min-width: 310px;
}
dl.charge-breakdown{
   margin-bottom: 5px;
   border-bottom: 1px solid #d7d7d7;
}
dl.plan-payment.result{
   text-align: right;
}
dl.charge-breakdown>div{
   display: flex;
   justify-content: space-between;
   gap: 10px;
}
.plan-payment>dt,
.plan-payment>dd{
   display: inline-block;
}
dl.plan-payment.result{
   padding: 0 10px;
}
.app.f-h{
   padding: 105px 15px 120px;
}
.plan-payment .total{
   font-size: 30px;
   font-weight: bold;
   margin: 0 5px 0 10px;
}
.plan-payment .tax{
   font-size: 14px;
}
.application-plan-table.simple,
.change-plan.simple{
   border-top: none;
}
.application-plan-table{
   max-width: 288px;
}
.application-plan-table.r-pack{
   max-width: 330px;
}
.charge-breakdown .discount{
   font-size: 12px;
   margin-left: 5px;
}
.application-plan-table td.r-pack{
   padding-left: 3px!important;
}
.charge-breakdown dt{
   text-align: left;
}
.change-plan .item{
   width: 120px;
}
.deduction .change-plan .item{
   width: 100px;
}
.change-plan .item.r-pack{
   width: 136px;
}
.deduction .cahnge-plan .item.r-pack{
   width: 115px;
}
.change-plan .before,
.change-plan .after{
   width: 170px;
}
.deduction .change-plan .before,
.deduction .change-plan .after{
   width: 135px;
}
.deduction .change-plan .before.r-pack,
.deduction .change-plan .after.r-pack{
   width: 146px;
}
.change-plan .before.r-pack,
.change-plan .after.r-pack{
   width: 182px;
}

.change-plan td.arrow{
   display: flex;
   justify-content: center;
   align-items: center;
   vertical-align: middle;
}
.auto-updating-desc{
   margin-left: 15px;
}
.application-plan-table th{
   font-weight: normal!important;
   width: 95px;
   padding: 5px 0 5px 10px!important;
}
.application-plan-table.r-pack th{
   width: 122px;
   text-align: right;
}
.application-plan-table td{
   padding: 5px 5px 5px 0!important;
}
.application-form-inner-02 .btns-wrapper{
   margin: 20px 0 5px 0;
}
.no-deduction .change-plan th,
.no-deduction .change-plan td{
   padding: 10px 20px!important;
}
.deduction .change-plan th,
.deduction .change-plan td{
   padding: 7px 10px!important;
}
.deduction .change-plan td.r-pack{
   padding: 7px 10px 7px 15px!important;
}
.application-plan-table.simple tr{
   border-bottom: 1px dotted #dedede;
}
.app .btn-wrapper {
   margin: 5px 0 20px;
}
.app .application-desc{
   margin-top: 0;
}
.app .application-desc li{
   line-height: 1.5em;
}
.change-plan.simple tr:not(tbody tr:last-of-type){
   border-bottom: 1px dotted #afafaf;
}
.change-plan.simple thead tr,
.change-plan.simple tbody tr:last-of-type{
   border-bottom: none!important;
}

.next-plan-arrow{
   display: block;
   background-image: url(../images/icons/right-arrow-grav.svg);
   background-repeat: no-repeat;
   width: 17px;
   height: 17px;
   transform: translateY(4px);
}
.no-deduction .change-plan.responsive th,
.no-deduction .change-plan.responsive td {
   font-size: 16px;
}
.deduction .change-plan.responsive th,
.deduction .change-plan.responsive td {
   font-size: 14px;
}

.questionnaire{
   margin-top: 20px;
   padding-top: 25px;
   border-top: 1px dotted #ccc;
   min-width: 550px;
}
.questionnaire form{
   display: flex;
   flex-direction: column;
}
.other-services-wrapper{
   display: flex;
   flex-direction: column;
}
.rc-checkboxes-wrapper{
   margin: 5px 0 0 25px;
}
.rc-checkboxes-wrapper>div{
   display: flex;
}
.app.cancel h1.line{
   margin-bottom:30px;
}
.plan-cancel .rc-checkboxes-wrapper,
#other-services{
   width: 100%;
   margin-top: 5px;
}
.plan-cancel .other-services-wrapper,
.plan-change .other-services-wrapper{
   margin-top: 0;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   height: 0;
   transition: 0.3s;
}
.plan-cancel .other-services-wrapper.active,
.plan-change .other-services-wrapper.active{
   margin-top: 30px;
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
   height: 100%;
}
.plan-cancel .free-desc-wrapper,
.plan-change .free-desc-wrapper{
   margin-top: 30px;
}
.free-desc-wrapper .note{
   padding-left: 5px;
}
.note {
   display: inline-block;
   color: #3e3e3e;
   font-size: .8em;
   padding-left: 1.5em;
   text-indent: -0.75em;
}
.err input[type="checkbox"]+span::before{
   background-color: #ffebeb !important;
   border: 1px solid #eb7f7f !important;
}
.plan-cancel .header-nav-wrapper.sp,
.plan-change .header-nav-wrapper.sp{
   display: none;
}
.change-plan-main input[type="checkbox"]+span::after {
   top: calc(50% + -2px);
}
.change-plan-main .application-desc {
   margin-top: 10px;
}
.change-plan-main .application-desc li{
   margin-top: 0!important;
   line-height: 21px;
}
.change-plan-main .application-desc li:not(:last-of-type){
   margin-bottom: 9px;
}


/*-------------------------------------------------------
1400px
---------------------------------------------------------*/
@media screen and (max-width: 1400px) {
   .gurest .plans h1 {
      font-size: 35px;
   }
   .guest .plans-title-wrapper {
      margin-bottom: 40px;
   }
   .initial-cost dt {
      margin: 0 10px 12px;
   }
   .initial-cost .num {
      font-size: 40px;
   }
   section.plans {
      padding: 130px 0;
   }

}

/*-------------------------------------------------------
1330px
---------------------------------------------------------*/
@media screen and (max-width: 1330px) {
   .intro-of-pricing {
      position: relative;
      top: unset;
      left: unset;
   }
}

/*-------------------------------------------------------
970px
---------------------------------------------------------*/
@media screen and (max-width: 970px) {
   .questionnaire {
      min-width: unset;
   }
   .no-deduction .change-plan-info-wrapper{
      flex-direction: column;
   }
   .no-deduction .change-plan-payment-wrapper>dl {
       text-align: right;
   }
}

/*-------------------------------------------------------
787px
---------------------------------------------------------*/
@media screen and (max-width: 787px) {
   .plans-outer{
      padding: 0px 40px;
   }
   .scroll-btn-wrapper {
      width: 35px;
   }
  .scroll-btn {
      width: 35px;
      height: 35px;
      font-size: 18px;
   }
   .scroll-btn-wrapper.right {
       right: -25px;
   }
   .deduction .change-plan-info-wrapper{
      flex-direction: column;
      gap: 0;
   }
   .deduction .change-plan-table-wrapper {
      width: 100%;
   }
   .deduction table.change-plan {
      max-width: unset;
   }
   .change-plan-inner form .btns-wrapper {
       transform: translateX(0px);
       margin-bottom: 70px;
   }
   .add-ritera-desc-wrapper>div {
       padding: 0px 10px;
   }
}

/*-------------------------------------------------------
670px
---------------------------------------------------------*/
@media screen and (max-width: 670px) {
   .title-wrapper .title-remaining-wrapper{
      gap: 12px;
   }
   .back-link {
      font-size: 12px;
   }
}

/*-------------------------------------------------------
599px
---------------------------------------------------------*/
@media screen and (max-width: 599px) {
   section.plans {
      padding: 130px 0 80px;
   }
   .plans-outer{
      padding: 0 15px;
   }
   .scroll-btn-wrapper {
      width: 30px;
   }
  .scroll-btn {
      width: 30px;
      height: 30px;
      font-size: 14px;
   }
   .scroll-btn-wrapper.left {
       left: 154px;
   }
   .scroll-btn-wrapper.right {
       right: -10px;
   }
   .plans-table {
      font-size: 14px;
   }
   .plans-table thead th:first-child,
   .plans-table tbody tr:not(.section-row) th {
      width: 150px!important;
      min-width: 150px!important;
   }
   .plans-table th, .plans-table td {
      width: 180px;
   }
   .change-plan-main .f-h,
   .cancel .f-h{
      padding: 30px 15px 100px;
   }
   .change-plan.responsive tr {
      padding: 5px 0;
   }
   .change-plan th, .change-plan td {
      padding: 5px 20px !important;
      text-align: center;
   }
   .nm-container .plan-span-sw-wrapper{
      margin: 10px 0 25px;
   }
   .next-plan-arrow{
      background-image: url(../images/icons/down-arrow-gray.svg);
      transform: translateY(-2px);
   }
   .app .application-form {
       flex-direction: column;
   }
   .deduction .change-plan td.r-pack {
       padding: 7px 10px 7px 5px!important;
   }
}
/*-------------------------------------------------------
485px
---------------------------------------------------------*/
@media screen and (max-width: 485px) {
   main .remaining-ritera-wrapper:not(.highlighting .remaining-ritera-wrapper) {
      transform: translateY(0);
   }
}

/*-------------------------------------------------------
460px
---------------------------------------------------------*/
@media screen and (max-width: 460px) {
   .plans-table thead th:first-child,
   .plans-table tbody tr:not(.section-row) th {
        width: 120px!important;
        min-width: 120px!important;
   }
   .scroll-btn-wrapper.left {
      left: 122px;
   }
}
/*-------------------------------------------------------
400px
---------------------------------------------------------*/
@media screen and (max-width: 400px) {
   .plans-table thead th:first-child,
   .plans-table tbody tr:not(.section-row) th {
        width: 110px!important;
        min-width: 110px!important;
   }
}