/*========================================================================== 
APPLICATION
========================================================================== */
@media all and (min-width: 768px), print {
    .c-image__button {
      max-width: calc(800 / var(--font-size) * 1rem);
    }
    .c-image__button .c-btn.--size-xxs{
        width: calc(180 / var(--font-size) * 1rem) !important;
    }
}

@media all and (max-width: 767px) {
  .image-tab-button .c-btn__inner {
    padding-top: calc(8 / var(--font-size) * 1rem);
    padding-bottom: calc(8 / var(--font-size) * 1rem);
    min-height: calc(34 / var(--font-size) * 1rem) !important;
  }
  .c-btn.application-button{
    width:auto !important;
  }
  .c-table__component > table tr:last-child th:first-child {
    border-bottom-left-radius:0;
  }
}


/*========================================================================== 
TAB 
========================================================================== */
@media all and (min-width: 768px), print {
  .l-tab-list {
    border-bottom: calc(4 / var(--font-size) * 1rem) solid var(--main-color);
    display: flex;
    justify-content: space-between;
  }
  .l-tab-list-item {
    border: calc(3 / var(--font-size) * 1rem) solid var(--main-color);
    border-bottom:0;
    background-color: var(--bg-white-color);
    border-radius: calc(12 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem) 0 0;
    color: var(--main-color);
    width: calc((100% - 1.5rem) / 2);
    transition: 0.3s ease;
  }
  .l-tab-list-item a{
    height:calc(80 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .l-tab-list-item:hover {
    background-color: var(--bg-main-color);
    color: #fff;
    transition: 0.3s ease;
  }
  .l-tab-list-item + .l-tab-list-item {
    margin-left: calc(17 / var(--font-size) * 1rem);
  }
  .l-tab-list-item--current {
    background-color: var(--bg-main-color);
    color: #fff;
    pointer-events: none;
  }
  .l-tab-list-item__icon{
    display: block;
    width:calc(29 / var(--font-size) * 1rem);
    height:calc(44 / var(--font-size) * 1rem);
  }
  .l-tab-list-item__icon  svg{
    fill:var(--main-color);
    width:calc(29 / var(--font-size) * 1rem);
    height:calc(44 / var(--font-size) * 1rem);
  }
  .l-tab-list-item:hover .l-tab-list-item__icon svg{
    fill:#fff;
    width:calc(29 / var(--font-size) * 1rem);
    height:calc(44 / var(--font-size) * 1rem);
  }
  .l-tab-list-item__text {
    font-size: calc(20 / var(--font-size) * 1rem);
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left: calc(10 / var(--font-size) * 1rem);
  }

  .l-tab-list-item--current .l-tab-list-item__icon svg{
    fill:var(--color-white);
  }
}

@media all and (max-width: 767px) {
  .l-tab-list {
    border-bottom: calc(3 / var(--font-size) * 1rem) solid var(--main-color);
    display: flex;
    justify-content: space-between;
  }
  .l-tab-list-item {
    border: calc(2 / var(--font-size) * 1rem) solid var(--main-color);
    border-bottom:0;
    background-color: var(--main-color);
    border-radius: calc(12 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem) 0 0;
    color: #fff;
    width: calc((100% - calc(10 / var(--font-size) * 1rem)) / 2);
    transition: 0.3s ease;
  }
  .l-tab-list-item a{
    height:calc(50 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .l-tab-list-item + .l-tab-list-item {
    margin-left: calc(10 / var(--font-size) * 1rem);
  }
  .l-tab-list-item--current {
    background-color: #fff;
    color: var(--main-color);
    pointer-events: none;
  }
  .l-tab-list-item__icon{
    display: block;
    width:calc(18 / var(--font-size) * 1rem);
    height:calc(44 / var(--font-size) * 1rem);
  }
  .l-tab-list-item__icon  svg{
    fill:var(--main-color);
    width:calc(18 / var(--font-size) * 1rem);
    height:calc(44 / var(--font-size) * 1rem);
  }
  .l-tab-list-item__text {
    font-size: calc(14 / var(--font-size) * 1rem);
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left: calc(5 / var(--font-size) * 1rem);
  }

  .l-tab-list-item--current .l-tab-list-item__icon svg{
    fill:var(--color-white);
  }
}

/*========================================================================== 
EXPLANATION
========================================================================== */
@media all and (min-width: 768px), print {
  .explanation-box {
    border-radius: calc(10 / var(--font-size) * 1rem);
  }
  .explanation-box__body {
    padding: calc(24 / var(--font-size) * 1rem);
  }
  .c-btn-list.--340 .c-btn {
    width: calc(340 / var(--font-size) * 1rem);
  }
  .c-btn-list.--400 .c-btn {
    width: calc(400 / var(--font-size) * 1rem);
  }
  td .c-btn.--size-xs {
    width: 100%;
    max-width: calc(168 / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px), print {
  .explanation-box {
    border-radius: calc(10 / var(--font-size) * 1rem);
  }
  .explanation-box__body {
    padding: calc(24 / var(--font-size) * 1rem);
  }
  .c-btn-list.--340 .c-btn {
    width: 100%;
  }
  .c-btn-list.--400 .c-btn {
    width: 100%;
  }
  td .c-btn.--size-xs {
    width: 100%;
    max-width: calc(168 / var(--font-size) * 1rem);
  }
}

/*========================================================================== 
CUSHION
========================================================================== */
@media all and (min-width: 768px), print {
  .c-cushion .u-title--xs {
    font-size: 1.125rem!important;
  }
}
@media all and (max-width: 767px), print {
  .c-cushion .u-title--xs {
    font-size: 1.125rem!important;
  }
}

/*========================================================================== 
TAB
========================================================================== */
@media all and (min-width: 768px), print {
  .application-tab .c-tab__btn-list__inner {
    width: 100%;
  }
  .application-tab .c-tab__btn {
    width: calc((100% - calc(14 / var(--font-size) * 1rem)) / 2);
  }
  .application-tab .c-tab__btn__inner {
    min-height: calc(81 / var(--font-size) * 1rem);
  }
  .application-tab .c-tab__button[aria-selected="true"] .c-tab__btn__inner {
    /* background: var(--bg-sub-color); */
  }
  }
  @media all and (max-width: 767px), print {
  .application-tab .c-tab__btn-list__inner {
    width: 100%;
    flex-wrap: nowrap;
  }
  .application-tab .c-tab__btn {
    width: calc((100% - calc(14 / var(--font-size) * 1rem)) / 2);
  }
  .application-tab .c-tab__btn__inner {
    min-height: calc(64 / var(--font-size) * 1rem);
  }
  .application-tab .c-tab__button[aria-selected="true"] .c-tab__btn__inner {
    /* background: var(--bg-sub-color); */
  }
  }