/*------------------------------------------------------------------
plans
-------------------------------------------------------------------*/
.plans h1{
   min-width: 100px;
   margin-bottom: 0;
}
.plans .title-wrapper {
   margin-bottom: 0px;
}
.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;
}
.price-sup {
   text-align: center;
}
.price-sup>span {
   font-size: 1.3em;
   font-weight: bold;
}
.price-sup{
   position: absolute;
   line-height: 16px;
   background-color: #ececec;
   padding: 7px 11px;
   font-size: 10px;
   top: -15px;
   right: -7px;
   border-radius: 3px;
}
.plans .none{
   display: none!important;
}
.free .price{
   margin-bottom: 25px!important;
}
.plans span.plus{
   display: inline-block;
   transform: translate(0.05em, -0.3em);
   font-size: .9em;
}
.price-tax{
   width: 100%;
   font-size: 14px;
   color: #8b8b8b;
   line-height: 0em;
   display: block;
   margin: 0 0 25px 4px;
}
.price-tax-and-ritera-pack{
   display: flex;
   gap: 30px;
   margin-bottom: -6px;
}
.ritera-pack-input-wrapper{
   width: 100%;
   transform: translateY(-19px);
   margin-bottom: -4px;
}
.price-wrapper {
   position: relative;
   height: 81px;
   max-width: 285px;
}
.enterprise-plus .price{
   transform: translateY(-4px);
}
.enterprise-plus .price-tax{
   transform: translateY(-4px);
}
.ritera-pack-input-wrapper label>span{
   width: 100px;
   text-align: right;
}
.price-wrapper .desc{
   font-size: 14px;
}
.plan ul.std span.num{
   display: inline-block;
   padding: 0 0 0 6px;
}
.plan ul.std span.num.variable{
   min-width: 33px;
   border-bottom: 1px solid #9db2bf;
   min-height: 15px;
   text-align: right;
}
.enterprise-plus .price-wrapper .sup{
   font-size: 12px;
   margin-top: 0px;
   color: #3e3e3e;
}
.enterprise-plus-desc-wrapper{
   max-width: 210px;
   flex-grow: 1;
   margin-top: 104px;
   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: 10px 0 0;
}
.add-ritera-desc-wrapper>div{
   padding: 0px 66px;
}
.add-ritera-desc-wrapper p{
   margin: 0 0 5px;
}
.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;
   align-items: center;
   overflow: hidden;
   gap: 10px;
}
.plans-container{
   display: flex;
   gap: 10px;
   overflow-x: auto;
   scroll-behavior: smooth;
   padding: 8px 10px;
   scrollbar-width: none; /* Firefox */
   /*scrollbar-width: thin; 制作中のテスト用 */
   position: relative;
}
.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::before,
.plans-wrapper::after{
   content: '';
   background: linear-gradient(90deg, #fff 0%, #fff calc(100% - 10px), rgb(255 255 255 / 0%) 100%);
   position: absolute;
   top: 0;
   width: 70px;
   height: 100%;
   z-index: 1;
   display:none;
}
.plans-wrapper::before{
   left: 0;
   background: linear-gradient(90deg, #fff 0%, #fff calc(100% - 10px), rgb(255 255 255 / 0%) 100%);
}
.top .plans-wrapper::before{
   background: linear-gradient(90deg, #eaf0f9 0%, #eaf0f9 calc(100% - 10px), rgb(255 255 255 / 0%) 100%);
}
.plans-wrapper::after{
   right: 0;
   background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%,  #fff calc(100% - 55px), #fff 100%);
}
.top .plans-wrapper::after{
   background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%,  rgb(234 240 249) calc(100% - 55px), rgb(234 240 249) 100%);
}
.scroll-btn-wrapper{
   z-index: 2;
   visibility: visible;
   opacity: 1;
   transition: .5s;
   width: 45px;
}
.scroll-btn-wrapper.hidden{
   width: 0;
   visibility: hidden;
   opacity: 0;
}
.plans-wrapper.scroll-btn-left::before{
   display:block;
}
.plans-wrapper.scroll-btn-right::after{
   display:block;
}
.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;
}
.plans .sup{
   max-width: 1423px;
   margin-top: 26px;
}
.cancel #no{
   width: 127px;
}
.plans-container>div{
   border: 1px solid #eaeaea;
   padding: 10px 16px;
   flex-shrink: 0;
}
.plans-container h2{
   font-size:25px;
   margin: 8px 0 0;
   line-height: 32px;
   font-family: 'roboto', 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', sans-serif;
}
.cancel input[type="checkbox"]+span::after{
   top: calc(50% + -2px);
}
.plans-container h2 .sub{
   margin-left: 3px;
}
.plans-container ul.std li:not(:nth-of-type(1)) {
   margin-top: 5px;
}
.plans .plan ul.std li::before{
   background-color: #376ba6;
}
.plans-container p:not(.current, .next, .price-tax){
   margin: 0;
}
.price .num {
   font-size: 50px;
   font-weight: bold;
   display: inline-block;
}

.plans-container .sub{
color: #8b8b8b;
   font-size: .8em;
   display: block;
}
.plans-container ul.std{
   padding: 0 0 0 16px;
   margin: 0;
}
.plans-container ul .num{
   font-size: 1.2em;
   font-weight: bold;
   margin: 0 2px;
   color: #000;
}
.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: 0 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: 3px;
}
.application-plan .discount>span{
   font-size: 1.2em;
   font-weight: bold;
}
.free .application-plan{
   padding: 0 40px;
}
.application-plan:not(.current, .next):hover{
   background-color: #3c5dc5;
   color: #fff;
   opacity: 1;
}
.free .application-btns-wrapper{
   transform: translateY(0.5px);
}
.application-btns-wrapper{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   margin: 0 -4px 13px;
   height: 62px;
}
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;
}
.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;
}
.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: 50px 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;
}
.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;
}

/*-------------------------------------------------------
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) {
.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;
}
}
/*-------------------------------------------------------
599px
---------------------------------------------------------*/
@media screen and (max-width: 599px) {
   .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;
   }
}

/*-------------------------------------------------------
460px
---------------------------------------------------------*/
@media screen and (max-width: 460px) {
   .scroll-btn-wrapper {
      width: 35px;
   }
  .scroll-btn {
      width: 35px;
      height: 35px;
      font-size: 18px;
   }
   .plans-wrapper{
      margin: 0 calc(50% - 50vw);
      width: 100vw;
      padding: 0 17px;
   }
   .plans-wrapper::before, .plans-wrapper::after {
      width: 35px;
   }
   .enterprise .price .num,
   .enterprise-plus .price .num{
      transform: scaleX(0.8) translateX(-17px);
   }
   .enterprise .price span:nth-of-type(2),
   .enterprise-plus .price span:nth-of-type(2){
      transform: translateX(-30px);
      display: inline-block;
   }
}
/*-------------------------------------------------------
410px
---------------------------------------------------------*/
@media screen and (max-width: 410px) {
   .scroll-btn-wrapper {
      width: 30px;
   }
  .scroll-btn {
      width: 30px;
      height: 30px;
      font-size: 16px;
   }
   .plans-wrapper::before, .plans-wrapper::after {
      width: 30px;
   }
   .plans-wrapper{
      padding: 0 10px;
   }

}