/*==========================================================================
 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);
  }
}

@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(16 / 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
========================================================================== */
@media all and (min-width: 768px), print {
  .c-image__fig {
    text-align: center;
  }
  .c-image__fig img {
    max-width: 100%;
  }
  .c-image__fig img[src$="/new-house/img01.png"] {
    max-width: calc(800 / var(--font-size) * 1rem);
  }
  .c-image__fig:has(img[src$="/new-house/img01.png"]) + .c-image-comment {
    width: calc(800 / var(--font-size) * 1rem);
    margin: auto;
  }
  .c-image__fig img[src$="/new-house/img02.png"] {
    max-width: none;
  }
  .c-image__fig img[src$="/new-house/img03.png"] {
    max-width: none;
  }
  .c-image__fig img[src$="/new-house/img04.png"] {
    max-width: none;
  }
  .c-image__fig img[src$="/new-house/img05.png"] {
    max-width: none;
  }
  .c-image__fig img[src$="/new-house/img06.png"] {
    max-width: none;
  }
  .c-image__fig img[src$="/new-house/img07.png"] {
    max-width: none;
  }
  .c-image__fig img[src$="/reform/img01.png"] {
    max-width: calc(955 / var(--font-size) * 1rem);
  }
  .c-image__fig img[src$="/reform/img02.png"] {
    max-width: calc(872 / var(--font-size) * 1rem);
  }
  .c-image__fig img[src$="/reform/img03.png"] {
    max-width: calc(802 / var(--font-size) * 1rem);
  }
}

@media all and (max-width: 767px), print {
  .c-image__fig {
    text-align: center;
  }
  .c-image__fig img {
    max-width: calc(693 / var(--font-size) * 1rem);
  }
}

@media all and (min-width: 768px), print {
}

@media all and (max-width: 767px), print {
  .type-tab__btn-list__inner {
    flex-wrap: nowrap;
  }
  .type-tab__btn {
    margin-left: calc(4 / var(--font-size) * 1rem);
  }
}