/*==========================================================================
 TAB
========================================================================== */
@media all and (min-width: 768px), print {
  .l-tab {
    margin-top: calc(64 / var(--font-size) * 1rem);
  }
  .l-tab:first-child {
    margin-top: 0;
  }
  .l-tab-list {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .l-tab-list::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
  }
  .l-tab-list-item {
    position: relative;
    flex-grow: 1;
    background-color: var(--bg-white-color);
    width: calc(1 / 2 * 100%);
  }
  .l-tab-list-item a{
    position: relative;
    height:calc(133 / var(--font-size) * 1rem);
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:flex-start;
    color: var(--color-gray_600);
    transition: 0.3s ease;
  }
  .l-tab-list-item a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: calc(4 / var(--font-size) * 1rem) solid var(--main-color);
    opacity: 0;
    transition: 0.3s ease;
  }
  .l-tab-list-item a:hover {
    color: var(--main-color);
  }
  .l-tab-list-item--current {

  }
  .l-tab-list-item--current a::before {
    opacity: 1;
  }
  .l-tab-list-item--current a {
    color: var(--main-color);
    pointer-events: none;
  }
  .l-tab-list-item__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(72 / var(--font-size) * 1rem);
    height:calc(72 / var(--font-size) * 1rem);
    border-radius:calc(72 / var(--font-size) * 1rem);
    background-color: var(--color-gray_100);
    transition: 0.3s ease;
  }
  .l-tab-list-item a:hover .l-tab-list-item__icon,
  .l-tab-list-item--current .l-tab-list-item__icon{
    background-color: var(--sub-color-02);
  }
  .l-tab-list-item__icon svg{
    fill:var(--color-gray_400);
    width:calc(44 / var(--font-size) * 1rem);
    height:calc(44 / var(--font-size) * 1rem);
    transition: 0.3s ease;
  }
  .l-tab-list-item__icon.--icon-02 svg {
    stroke:var(--color-gray_400);
  }
  .l-tab-list-item a:hover .l-tab-list-item__icon svg{
    fill: var(--main-color);
  }
  .l-tab-list-item a:hover .l-tab-list-item__icon.--icon-02 svg {
    fill: var(--main-color);
    stroke: var(--main-color);
  }
  .l-tab-list-item__text {
    display: inline-block;
    vertical-align: top;
    margin-top: calc(8 / var(--font-size) * 1rem);
    font-size: calc(18 / var(--font-size) * 1rem);
    text-align: center;
  }
  .l-tab-list-item__text:first-child {
    margin-top: 0;
  }

  .l-tab-list-item--current .l-tab-list-item__icon svg{
    fill: var(--main-color);
  }
  .l-tab-list-item--current .l-tab-list-item__icon.--icon-02 svg {
    fill: var(--main-color);
    stroke: var(--main-color);
  }

  /* new-house */
  .l-tab--new-house .--icon-01 svg{
    position: relative;
    left: calc(3 / var(--font-size)* 1rem);
    width: calc(50 / var(--font-size)* 1rem);
    height: calc(50 / var(--font-size)* 1rem);
  }
  .l-tab--new-house .--icon-02 svg{
      position: relative;
      left: calc(2 / var(--font-size)* 1rem);
  }
}
  
@media all and (max-width: 767px) {
  .l-tab {
    margin-top: calc(64 / var(--font-size) * 1rem);
  }
  .l-tab:first-child {
    margin-top: 0;
  }
  .l-tab-list {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .l-tab-list::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
  }
  .l-tab-list-item {
    position: relative;
    flex-grow: 1;
    background-color: var(--bg-white-color);
    width: calc(1 / 2 * 100%);
  }
  .l-tab-list-item a{
    position: relative;
    height:calc(133 / var(--font-size) * 1rem);
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:flex-start;
    color: var(--color-gray_600);
    transition: 0.3s ease;
  }
  .l-tab-list-item a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: calc(4 / var(--font-size) * 1rem) solid var(--main-color);
    opacity: 0;
  }
  .l-tab-list-item--current {

  }
  .l-tab-list-item--current a::before {
    opacity: 1;
  }
  .l-tab-list-item--current a {
    color: var(--main-color);
    pointer-events: none;
  }
  .l-tab-list-item__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(72 / var(--font-size) * 1rem);
    height:calc(72 / var(--font-size) * 1rem);
    border-radius:calc(72 / var(--font-size) * 1rem);
    background-color: var(--color-gray_100);
  }
  .l-tab-list-item--current .l-tab-list-item__icon{
    background-color: var(--sub-color-02);
  }
  .l-tab-list-item__icon svg{
    fill:var(--color-gray_400);
    width:calc(44 / var(--font-size) * 1rem);
    height:calc(44 / var(--font-size) * 1rem);
  }
  .l-tab-list-item__icon.--icon-02 svg {
    stroke:var(--color-gray_400);
  }
  .l-tab-list-item__text {
    display: inline-block;
    vertical-align: top;
    margin-top: calc(8 / var(--font-size) * 1rem);
    font-size: calc(18 / var(--font-size) * 1rem);
    text-align: center;
  }
  .l-tab-list-item__text:first-child {
    margin-top: 0;
  }

  .l-tab-list-item--current .l-tab-list-item__icon svg{
    fill: var(--main-color);
  }
  .l-tab-list-item--current .l-tab-list-item__icon.--icon-02 svg {
    fill: var(--main-color);
    stroke: var(--main-color);
  }

  /* new-house */
  .l-tab--new-house .--icon-01 svg{
    position: relative;
    left: calc(3 / var(--font-size)* 1rem);
    width: calc(50 / var(--font-size)* 1rem);
    height: calc(50 / var(--font-size)* 1rem);
  }
  .l-tab--new-house .--icon-02 svg{
      position: relative;
      left: calc(2 / var(--font-size)* 1rem);
  }
}