@charset "UTF-8";

:root {
  --sub-color-page: var(--sub-color);
  --sub-color-table-title: var(--sub-color);
  --main-color-page: var(--main-color);
  --accent-color-page: var(--main-accent-color);
  --accent-sub-color-page: var(--bg-sub-color);
}

/* --------------------------------------------------------------------------
  Layout
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .l-container{
    padding: 0;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .l-container{
    padding: 0;
    margin: 0;
  }
}

@media all and (min-width: 768px), print {
  .l-container{
    max-width: none;
  }
}

@media all and (min-width: 768px), print {
  .l-frame-main:first-child{
    max-width: initial;
  }
  main:not(:has(.breadcrumb-area)) + .l-contact {
    margin-top: 0;
  }
  .l-frame-main:first-child .l-contact__body{
    max-width: calc(1164 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .l-frame-main main{
    position: relative;
  }
  .l-container__body{
    padding-bottom: calc(70 / var(--font-size) * 1rem);
  }
}

@media (max-width: 767px) {
  .l-container__body{
    padding-bottom: calc(100 / var(--font-size) * 1rem);
  }
}

@media all and (min-width: 768px), print {
  .top-c-note{
  }
  .top-c-note:first-child{
    margin-top: 0;
  }
  .top-c-note-txt{
    padding-left: 1.5em;
    line-height: 1.92;
    font-size: calc(12 / var(--font-size) * 1rem);
    text-indent: -1.5em;
  }
  .top-c-note.--num .top-c-note-txt{
    padding-left: 2em;
    text-indent: -2em;
  }
  .top-c-note-txt > *{
    text-indent: 0;
  }
  .top-c-note__label{
    display: inline-block;
    vertical-align: top;
    width: 1.5em;
  }
  .top-c-note.--num .top-c-note__label{
    width: 2em;
  }
}
@media (max-width: 767px) {
  .top-c-note{
  }
  .top-c-note:first-child{
    margin-top: 0;
  }
  .top-c-note-txt{
    padding-left: 1.5em;
    line-height: 1.7;
    font-size: calc(12 / var(--font-size) * 1rem);
    text-indent: -1.5em;
  }
  .top-c-note.--num .top-c-note-txt{
    padding-left: 2em;
    text-indent: -2em;
  }
  .top-c-note-txt > *{
    text-indent: 0;
  }
  .top-c-note__label{
    display: inline-block;
    vertical-align: top;
    width: 1.5em;
  }
  .top-c-note.--num .top-c-note__label{
    width: 2em;
  }
}

/* --------------------------------------------------------------------------
  TOP SLIDER
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .top-slider-row{
    height: calc(648 / var(--font-size) * 1rem);
  }
  .top-slider-row__body{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    height:100%;
  }
  .top-slider-box__column + .top-slider-box__column .top-slider-box__column__inner{
    position: relative;
  }
  .top-slider-box__column + .top-slider-box__column .top-slider-box__column__inner:before{
    content:"";
    background-color: #D4D4D4;
    display: block;
    width:calc(1 / var(--font-size) * 1rem);
    height:calc(495 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    margin:auto 0;
  }
  .top-slider-box__column__inner,
  .top-slider-box__column__body{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    width:100%;
  }
  .top-slider-pager-button{
    background-color: var(--color-white);
    border-radius:100%;
    width:calc(60 / var(--font-size) * 1rem);
    height:calc(60 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    bottom:0;
    box-shadow: 0px calc(4 / var(--font-size) * 1rem) calc(4 / var(--font-size) * 1rem) 0px rgba(0, 0, 0, 0.25);
    margin:auto 0;
    z-index:4999;
    cursor:pointer;
    opacity:0.8;
  }
  .top-slider-pager-button:before{
    content:"";
    border:calc(4 / var(--font-size) * 1rem) solid var(--main-color);
    border-left:0;
    border-bottom:0;
    display: block;
    width:calc(16 / var(--font-size) * 1rem);
    height:calc(16 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    left:0;
    right:calc(6 / var(--font-size) * 1rem);
    bottom:0;
    transform: rotate(45deg);
    margin:auto;
  }
  .top-slider-pager-prev{
    left:calc(15 / var(--font-size) * 1rem);
  }
  .top-slider-pager-next{
    right:calc(15 / var(--font-size) * 1rem);
  }
  .top-slider-pager-prev:before{
    right:calc(-4 / var(--font-size) * 1rem);
    transform: rotate(-135deg);
  }
  .top-slider-pagenation{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top: calc(24 / var(--font-size) * 1rem);
    margin-left: calc(-15 / var(--font-size) * 1rem);
  }
  .top-slider-pagenation .swiper-pagination-bullet{
    border-radius:100%;
    background-color: var(--color-gray_300);
    width:calc(10 / var(--font-size) * 1rem);
    height:calc(10 / var(--font-size) * 1rem);
    margin-left: calc(15 / var(--font-size) * 1rem);
  }
  .top-slider-pagenation .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--main-color);
  }
  /** slide02 **/
  .top-slider__slide.--slide-02 .top-slider-row__body{
    background-color: var(--sub-color-02);
  }
  .top-slider__slide.--slide-02 .top-slider-row__inner{
    padding: 0 calc(70 / var(--font-size) * 1rem);
    width:100%;
    display: flex;
  }
  .top-slider__slide.--slide-02 .top-slider-box__column{
    width:calc(100% / 2);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
  }
  .top-slider__slide.--slide-02 .top-slider-box__column__title{

  }
  .top-slider__slide.--slide-02 .top-slider-box__column__text{
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-02 .top-slider-box__column__button{
    max-width: calc(222 / var(--font-size) * 1rem);
    width:100%;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-02 .top-slider-box__column__text-02{
    margin-top: calc(6 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-02 .top-slider-box__column__image{
    max-width: calc(267 / var(--font-size) * 1rem);
    width:100%;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-02 .top-slider__attention{
    background-color: var(--bg-sub-color-jigyo01);
    padding:calc(24 / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem);
    border:calc(3 / var(--font-size) * 1rem) solid var(--color-attention_1000);
    border-radius:calc(10 / var(--font-size) * 1rem);
    max-width: calc(352 / var(--font-size) * 1rem);
    width:100%;
    margin-top: calc(18 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-02 .top-slider__attention__title{
    color:var(--color-attention_1000);
    font-size:calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 700;
    text-align: center;
  }
  .top-slider__slide.--slide-02 .top-slider__attention__text{
    font-size:calc(15 / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  /** /slide02 **/
}

@media all and (min-width: 769px) and (max-width: 1580px) {
  .top-slider__slide.--slide-02 .top-slider-row__inner{
    padding: 0 calc(30 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-02 .top-slider-box__column__title{
    font-size: calc(24 / var(--font-size) * 1rem) !important;
  }
  .top-slider__slide.--slide-02 .top-slider-box__column__text span{
    font-size: calc(15 / var(--font-size) * 1rem) !important;
  }
  .top-slider__attention__text{
  }
}

@media (max-width: 767px) {
  .top-slider-row{
    height: calc(100vh - calc(48 / var(--font-size) * 1rem) - calc(60 / var(--font-size) * 1rem));
  }
  .top-slider-row__body{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    height:100%;
  }
  .top-slider-box__column + .top-slider-box__column .top-slider-box__column__inner{
    position: relative;
  }
  .top-slider-box__column + .top-slider-box__column .top-slider-box__column__inner:before{
    content:"";
    background-color: #D4D4D4;
    display: block;
    width:calc(1 / var(--font-size) * 1rem);
    height:calc(495 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    margin:auto 0;
  }
  .top-slider-box__column__inner,
  .top-slider-box__column__body{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    width:100%;
  }
  .top-slider-pager-button{
    background-color: var(--color-white);
    border-radius:100%;
    width:calc(40 / var(--font-size) * 1rem);
    height:calc(40 / var(--font-size) * 1rem);
    position: absolute;
    top:calc(-35 / var(--font-size) * 1rem);
    bottom:0;
    box-shadow: 0px calc(4 / var(--font-size) * 1rem) calc(4 / var(--font-size) * 1rem) 0px rgba(0, 0, 0, 0.25);
    margin:auto 0;
    z-index:9999;
    cursor:pointer;
    opacity:0.8;
  }
  .top-slider-pager-button:before{
    content:"";
    border:calc(3 / var(--font-size) * 1rem) solid var(--main-color);
    border-left:0;
    border-bottom:0;
    display: block;
    width:calc(11 / var(--font-size) * 1rem);
    height:calc(11 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    left:0;
    right:calc(6 / var(--font-size) * 1rem);
    bottom:0;
    transform: rotate(45deg);
    margin:auto;
  }
  .top-slider-pager-prev{
    left:calc(15 / var(--font-size) * 1rem);
  }
  .top-slider-pager-next{
    right:calc(15 / var(--font-size) * 1rem);
  }
  .top-slider-pager-prev:before{
    right:calc(-4 / var(--font-size) * 1rem);
    transform: rotate(-135deg);
  }
  .top-slider-pagenation{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top: calc(24 / var(--font-size) * 1rem);
    margin-left: calc(-15 / var(--font-size) * 1rem);
  }
  .top-slider-pagenation .swiper-pagination-bullet{
    border-radius:100%;
    background-color: var(--color-gray_300);
    width:calc(10 / var(--font-size) * 1rem);
    height:calc(10 / var(--font-size) * 1rem);
    margin-left: calc(15 / var(--font-size) * 1rem);
  }
  .top-slider-pagenation .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--main-color);
  }
  /** slide02 **/
  .top-slider__slide.--slide-02 .top-slider-row__body{
    background-color: var(--sub-color);
    background-image: url(/assets/img/top_public/bg_slide-02_01_sp.png);
    background-size:contain;
    background-position:top left;
    background-repeat:no-repeat;
  }
  .top-slider__slide.--slide-02 .top-slider-row__inner{
    padding: 0 calc(62 / var(--font-size) * 1rem);
  }
  /** /slide02 **/
  /** slide03 **/
  .top-slider__slide.--slide-03 .top-slider-row__body{
    background-color: var(--sub-color-02);
  }
  .top-slider__slide.--slide-03 .top-slider-row__inner{
    padding: 0 calc(62 / var(--font-size) * 1rem);
    width:100%;
    display: flex;
  }
  .top-slider__slide.--slide-03 .top-slider-box__column{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
  }
  .top-slider__slide.--slide-03 .top-slider-box__column__title{
    font-size:calc(var(--title-size-s) / var(--font-size) * 1rem) !important;
  }
  .top-slider__slide.--slide-03 .top-slider-box__column__text{
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-03 .top-slider-box__column__button{
    max-width: calc(222 / var(--font-size) * 1rem);
    width:100%;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-03 .top-slider-box__column__text-02{
    margin-top: calc(0 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-03 .top-slider-box__column__text-02 span{
    font-size:calc(10 / var(--font-size) * 1rem) !important;
  }
  .top-slider__slide.--slide-03 .top-slider-box__column__image{
    max-width: calc(267 / var(--font-size) * 1rem);
    width:100%;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-03 .top-slider__attention{
    background-color: var(--bg-sub-color-jigyo01);
    padding:calc(24 / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem);
    border:calc(3 / var(--font-size) * 1rem) solid var(--color-attention_1000);
    border-radius:calc(10 / var(--font-size) * 1rem);
    max-width: calc(352 / var(--font-size) * 1rem);
    width:100%;
    margin-top: calc(18 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-03 .top-slider__attention__title{
    color:var(--color-attention_1000);
    font-size:calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 700;
    text-align: center;
  }
  .top-slider__slide.--slide-03 .top-slider__attention__text{
    font-size:calc(15 / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  /** /slide03 **/
  /** slide04 **/
  .top-slider__slide.--slide-04 .top-slider-row__body{
    background-color: var(--sub-color-02);
  }
  .top-slider__slide.--slide-04 .top-slider-row__inner{
    /* padding: 0 calc(62 / var(--font-size) * 1rem); */
    width:100%;
    display: flex;
  }
  .top-slider__slide.--slide-04 .top-slider-box__column{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
  }
  .top-slider__slide.--slide-04 .top-slider-box__column__title{
    font-size:calc(var(--title-size-s) / var(--font-size) * 1rem) !important;
  }
  .top-slider__slide.--slide-04 .top-slider-box__column__text{
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-04 .top-slider-box__column__button{
    max-width: calc(222 / var(--font-size) * 1rem);
    width:100%;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-04 .top-slider-box__column__text-02{
    margin-top: calc(0 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-04 .top-slider-box__column__text-02 span{
    font-size:calc(10 / var(--font-size) * 1rem) !important;
  }
  .top-slider__slide.--slide-04 .top-slider-box__column__image{
    max-width: calc(267 / var(--font-size) * 1rem);
    width:100%;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-04 .top-slider__attention{
    background-color: var(--bg-sub-color-jigyo01);
    padding:calc(24 / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem);
    border:calc(3 / var(--font-size) * 1rem) solid var(--color-attention_1000);
    border-radius:calc(10 / var(--font-size) * 1rem);
    max-width: calc(252 / var(--font-size) * 1rem);
    width:100%;
    margin-top: calc(18 / var(--font-size) * 1rem);
  }
  .top-slider__slide.--slide-04 .top-slider__attention__title{
    color:var(--color-attention_1000);
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    text-align: center;
  }
  .top-slider__slide.--slide-04 .top-slider__attention__text{
    font-size:calc(13 / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  /** /slide04 **/
}

/* --------------------------------------------------------------------------
  TOP ATTENTION
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .top-attention{
    position: absolute;
    width: 100%;
    padding: calc(7 / var(--font-size) * 1rem) 0;
    background: #FFEEEE;
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--color-attention_1000);
    z-index: 2;
  }
  .top-attention_inner{
    padding: 0 calc(20 / var(--font-size) * 1rem);
  }
  .l-frame-main:first-child .top-attention_inner{
    max-width: calc(1264 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .top-attention-container{

  }
  .top-attention-content{

  }
  .top-attention-desc{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .top-attention-desc__term{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
  }
  .top-attention-desc__term__ico{
    display: inline-block;
    vertical-align: top;
    width: calc(38 / var(--font-size) * 1rem);
    height: calc(38 / var(--font-size) * 1rem);
    background: url(/assets/img/common/ico_attention.svg) no-repeat center center;
    background-size: contain;
  }
  .top-attention-desc__term__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(4 / var(--font-size) * 1rem);
    line-height: calc(22.4 / 17 * 1);
    font-size: calc(17 / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--color-attention_1000);
  }
  .top-attention-desc__term__label:first-child{
    margin-left: 0;
  }
  .top-attention-desc__defin{
    flex-grow: 1;
    margin-top: calc(19 / var(--font-size) * 1rem - 11.2 / var(--font-size) * 1rem);
    margin-bottom: calc(19 / var(--font-size) * 1rem - 11.2 / var(--font-size) * 1rem);
    margin-left: calc(20 / var(--font-size) * 1rem);
  }
  .top-attention-desc__defin:first-child{
    margin-left: 0;
  }
  .top-attention-desc-desc{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: calc(22.4 / 14 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-attention-desc-desc__term{
    flex-shrink: 0;
  }
  .top-attention-desc-desc__term__label{
    display: inline-block;
    vertical-align: top;
    font-weight: 700;
  }
  .top-attention-desc-desc__defin{
    flex-grow: 1;
    margin-left: calc(16 / var(--font-size) * 1rem);
  }
  .top-attention-desc-desc__defin:first-child{
    margin-left: 0;
  }
  .top-attention-txt{

  }
  .top-attention-txt a{
    display: inline-block;
    vertical-align: top;
    transition:0.3s ease;
  }
  .top-attention-txt a:hover{
    opacity: 0.7;
  }
  .top-attention-txt a svg{
    display: inline-block;
    vertical-align: top;
    width: calc(16 / 14 * 1em);
    height: calc(16 / 14 * 1em);
    margin-top: calc(22.4 / 2 / 14 * 1em - 16 / 2 / 14 * 1em);
    margin-bottom: calc(22.4 / 2 / 14 * 1em - 16 / 2 / 14 * 1em);
    margin-left: calc(12 / 14 * 1em);
    margin-right: calc(12 / 14 * 1em);
    fill: var(--color-attention_1000);
  }
  .top-attention-container{

  }
}

@media (max-width: 767px) {

}

/* --------------------------------------------------------------------------
  TOP VISUAL
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .top-visual{
    position: relative;
    background: var(--sub-color-jigyo01-03);
    color: var(--text-color);
    overflow: hidden;
  }
  .top-visual:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/assets/img/top/bg_visual01.png) no-repeat center top / calc(2312 / var(--font-size) * 1rem);
    pointer-events: none;
  }
  .top-visual > *{
    position: relative;
    z-index: 1;
  }
  .top-visual__inner{
    padding: 0 calc(70 / var(--font-size) * 1rem);
  }
  .l-frame-main:first-child .top-visual__inner{
    max-width: calc(1164 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .top-visual-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: calc(698 / var(--font-size) * 1rem);
    padding-bottom: calc(12 / var(--font-size) * 1rem);
  }
  .top-visual-container > *{
    width: 100%;
  }
  .top-visual-content{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: calc(57 / var(--font-size) * 1rem);
    flex-grow: 1;
  }
  .top-visual-content > *{
    width: 100%;
  }
  .top-visual-catch{
    position: relative;
    flex-grow: 1;
    max-width: calc(1052 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .top-visual-heading{
    flex-shrink: 0;
    height: calc(265 / var(--font-size) * 1rem);
    text-align: center;
  }
  .top-visual-heading__label{
    display: inline-block;
    vertical-align: top;
    height: calc(265 / var(--font-size) * 1rem);
  }
  .top-visual-heading__label img{
    width: auto;
    height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
  }
  .top-visual-body{
    margin-top: calc(27 / var(--font-size) * 1rem);
  }
  .top-visual-body:first-child{
    margin-top: 0;
  }
  .top-visual-body > *{
    width: 100%;
    text-wrap: nowrap;
  }
  .top-visual-txt{
    text-align: center;
    font-weight: 700;
    line-height: 2;
    font-size: calc(16 / var(--font-size) * 1rem);
    letter-spacing: calc(2 / var(--font-size) * 1rem);
  }
  .top-visual-txt em{
    display: inline-block;
    border-radius: calc(6 / var(--font-size) * 1rem);
    margin-inline: calc(6 / 16 * 1em);
    padding-inline: calc(9 / 16 * 1em);
    background: linear-gradient(to right, #0F86B4, #5557D8);
    line-height: calc(31 / 20 * 1);
    font-size: calc(20 / 16 * 1em);
    color: var(--color-white);
  }
  .top-visual-feature{
    max-width: calc(1052 / var(--font-size) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }
  .top-visual-feature:first-child{
    margin-top: 0;
  }
  .top-visual-feature-list{
    display: flex;
    justify-content: flex-start;
  }
  .top-visual-feature-list__item{
    margin-left: calc(16 / var(--font-size) * 1rem);
  }
  .top-visual-feature-list__item:first-child{
    margin-left: 0;
  }
  .top-visual-feature-list__item:has(.--new-house){
    width: calc(444 / var(--font-size) * 1rem);
  }
  .top-visual-feature-list__item:has(.--reform){
    flex-grow: 1;
  }
  .top-visual-feature-desc{
    padding-block: calc(14 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    padding-inline: calc(16 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
    background: rgb(255 255 255 / .5);
    box-shadow: 0 0 calc(5 / var(--font-size) * 1rem) rgb(0 0 0 / .1);
    transform: translate3d(0, 0, 0);
  }
  .top-visual-feature-desc__term{
    position: relative;
  }
  .--new-house .top-visual-feature-desc__term{
    color: var(--color-white);
  }
  .top-visual-feature-desc__term__btn:before{
    content: "";
    display: block;
    /* width: 200%; */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s ease;
  }
  .--new-house .top-visual-feature-desc__term__btn:before{
    /* background: var(--main-button-bg-color-new-house-grade-color); */
    background: var(--main-button-bg-color-new-house);
  }
  .--reform .top-visual-feature-desc__term__btn:before{
    /* background: var(--main-button-bg-color-reform-grade-color); */
    background: var(--main-button-bg-color-reform);
  }
  .top-visual-feature-desc__term__btn:hover:before{
    /* -webkit-transform: translateX(-50%);
    transform: translateX(-50%); */
  }
  .--reform .top-visual-feature-desc__term{
    color: var(--color-white);
  }
  .top-visual-feature-desc__term__btn > *{
    z-index: 1;
  }
  .top-visual-feature-desc__term__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-visual-feature-desc__term__btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(38 / var(--font-size) * 1rem);
    border-radius: calc(10 / var(--font-size) * 1rem);
    overflow: hidden;
    transition: 0.3s ease;
  }
  .top-visual-feature-desc__term__btn:hover{
    opacity: .7;
  }
  .top-visual-feature-desc__term__btn__arrow {
    margin-left: calc(8 / var(--font-size) * 1rem);
    margin-top: calc(2 / var(--font-size) * 1rem);
  }
  .top-visual-feature-desc__term__btn__arrow__icon {
    width: calc(16 / var(--font-size) * 1rem);
    height: calc(16 / var(--font-size) * 1rem);
  }
  .top-visual-feature-desc__term__btn__arrow__icon svg, .top-visual-feature-desc__term__btn__arrow__icon img {
    fill: var(--color-white);
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    vertical-align: top;
  }
  .top-visual-feature-desc__defin{
    margin-top: calc(10 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu{

  }
  .top-visual-feature-menu-list{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0 calc(40 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu-list__item{
  }
  .top-visual-feature-menu-container{

  }
  .top-visual-feature-menu-img{
    text-align: center;
  }
  .top-visual-feature-menu-img__label{
    display: inline-block;
    vertical-align: top;
    height: calc(96 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu-img__label img{
    height: 100%;
    width: auto;
  }
  .top-visual-feature-menu-content{
    margin-top: calc(2 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu-content:first-child{
    margin-top: 0;
  }
  .top-visual-feature-menu-txt{
    text-align: center;
    line-height: calc(24 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-visual-feature-menu-link{
    margin-top: calc(6 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu-link:first-child{
    margin-top: 0;
  }
  .top-visual-feature-menu-link-txt{
    text-align: center;
    line-height: calc(22.4 / 14 * 1);
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-visual-feature-menu-link-txt a{
    display: inline-block;
    vertical-align: top;
    color: var(--main-color-page);
    transition:0.3s ease;
  }
  .top-visual-feature-menu-link-txt a:hover{
    opacity: 0.7;
  }
  .--jigyo02 .top-visual-feature-menu-link-txt a{
    color: var(--main-color-jigyo02);
  }
  .--jigyo03 .top-visual-feature-menu-link-txt a{
    color: var(--main-color-jigyo03);
  }
  .--jigyo04 .top-visual-feature-menu-link-txt a{
    color: var(--main-color-jigyo04);
  }
  .--jigyo05 .top-visual-feature-menu-link-txt a{
    color: var(--main-color-jigyo05);
  }
  .top-visual-feature-menu-link-txt a svg{
    display: inline-block;
    vertical-align: top;
    width: calc(16 / 12 * 1em);
    height: calc(16 / 12 * 1em);
    margin-top: calc(22.4 / 2 / 12 * 1em - 16 / 2 / 12 * 1em);
    margin-bottom: calc(22.4 / 2 / 12 * 1em - 16 / 2 / 12 * 1em);
    margin-left: calc(8 / 12 * 1em);
    fill: var(--main-color-page);
  }
  .--jigyo02 .top-visual-feature-menu-link-txt a svg{
    fill: var(--main-color-jigyo02);
  }
  .--jigyo03 .top-visual-feature-menu-link-txt a svg{
    fill: var(--main-color-jigyo03);
  }
  .--jigyo04 .top-visual-feature-menu-link-txt a svg{
    fill: var(--main-color-jigyo04);
  }
  .--jigyo05 .top-visual-feature-menu-link-txt a svg{
    fill: var(--main-color-jigyo05);
  }
  .top-visual-feature-menu-note {
    position: absolute;
    margin-left: calc(10 / var(--font-size) * 1rem);
    font-size: calc(18 / var(--font-size) * 1rem);
  }
  .top-visual-feature-footer-note {
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-visual-note{
    margin-top: calc(14 / var(--font-size) * 1rem);
    max-width: calc(1052 / var(--font-size) * 1rem - 14 / var(--font-size) * 2rem);
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 767px) {
  .top-visual{
    position: relative;
    background: var(--sub-color-jigyo01-03);
    color: var(--text-color);
    overflow: hidden;
  }
  .top-visual:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/assets/img/top/bg_visual01_sp.png) no-repeat center bottom / 100%;
    background-color: rgb(235 249 255 / 1);
    pointer-events: none;
  }
  .top-visual > *{
    position: relative;
    z-index: 1;
  }
  .top-visual__inner{
    padding: 0 calc(32 / var(--font-size) * 1rem);
  }
  .top-visual-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: calc(12 / var(--font-size) * 1rem);
  }
  .top-visual-container > *{
    width: 100%;
  }
  .top-visual-content{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-grow: 1;
    padding-top: calc(35 / var(--font-size) * 1rem);
    padding-bottom: calc(118 / var(--font-size) * 1rem);
  }
  .top-visual-content > *{
    width: 100%;
  }
  .top-visual-catch{
  }
  .top-visual-heading{
    flex-shrink: 0;
    height: calc(163 / var(--font-size) * 1rem);
    text-align: center;
  }
  .top-visual-heading__label{
    display: inline-block;
    vertical-align: top;
    height: calc(163 / var(--font-size) * 1rem);
  }
  .top-visual-heading__label img{
    width: auto;
    height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
  }
  .top-visual-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-grow: 1;
  }
  .top-visual-content:first-child{
    margin-top: 0;
  }
  .top-visual-content > *{
    width: 100%;
  }
  .top-visual-body{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .top-visual-body:first-child{
    margin-top: 0;
  }
  .top-visual-txt{
    line-height: 1.9;
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 500;
    letter-spacing: calc(1 / var(--font-size) * 1rem);
  }
  .top-visual-txt em{
    display: inline-block;
    border-radius: calc(4 / var(--font-size) * 1rem);
    margin-right: calc(6 / 16 * 1em);
    padding-inline: calc(9 / 16 * 1em);
    background: linear-gradient(to right, #0F86B4, #5557D8);
    line-height: calc(24 / 14 * 1);
    font-size: calc(14 / 14 * 1em);
    color: var(--color-white);
  }
  .top-visual-feature{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .top-visual-feature:first-child{
    margin-top: 0;
  }
  .top-visual-feature-list{
  }
  .top-visual-feature-list__item{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-visual-feature-list__item:first-child{
    margin-top: 0;
  }
  .top-visual-feature-desc{
    border-radius: calc(10 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .top-visual-feature-desc__term{
    position: relative;
  }
  .top-visual-feature-desc__term::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--color-white);
    transition: all 0.3s ease;
  }
  .top-visual-feature-desc__term:hover::before {
    opacity: 0.3;
  }
  .--new-house .top-visual-feature-desc__term{
    color: var(--color-white);
  }
  .top-visual-feature-desc__term__btn:before{
    content: "";
    display: block;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s ease;
  }
  .--new-house .top-visual-feature-desc__term__btn:before{
    /* background: var(--main-button-bg-color-new-house-grade-color); */
    background: var(--main-button-bg-color-new-house);
  }
  .--reform .top-visual-feature-desc__term__btn:before{
    /* background: var(--main-button-bg-color-reform-grade-color); */
    background: var(--main-button-bg-color-reform);
  }
  .top-visual-feature-desc__term__btn:hover:before{
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .--reform .top-visual-feature-desc__term{
    color: var(--color-white);
  }
  .top-visual-feature-desc__term__btn > *{
    z-index: 1;
  }
  .top-visual-feature-desc__term__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 700;
    text-align: center;
  }
  .top-visual-feature-desc__term__btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(42 / var(--font-size) * 1rem);
  }
  .top-visual-feature-desc__term__btn__arrow {
    width: calc(16 / var(--font-size) * 1rem);
    height: calc(16 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    right: calc(8 / var(--font-size) * 1rem);
    bottom:0;
    margin:auto 0;
  }
  .top-visual-feature-desc__term__btn__arrow__icon {
    width: calc(16 / var(--font-size) * 1rem);
    height: calc(16 / var(--font-size) * 1rem);
  }
  .top-visual-feature-desc__term__btn__arrow__icon svg, .top-visual-feature-desc__term__btn__arrow__icon img {
    fill: var(--color-white);
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    vertical-align: top;
  }
  .top-visual-feature-desc__defin{
    padding-top: calc(16 / var(--font-size) * 1rem);
    padding-bottom: calc(20 / var(--font-size) * 1rem);
    padding-left: calc(16 / var(--font-size)* 1rem);
    padding-right: calc(9 / var(--font-size)* 1rem);
    background: var(--color-white);
  }
  .top-visual-feature-menu{

  }
  .top-visual-feature-menu-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-top: calc(-16 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu-list__item{
    flex-grow: 1;
    width: calc(1 / 2 * 100%);
    margin-top: calc(14 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu-list__item > a{
    display: block;
  }
  .top-visual-feature-menu-container{

  }
  .top-visual-feature-menu-img{
    text-align: center;
  }
  .top-visual-feature-menu-img__label{
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    height: calc(96 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu-img__label img{
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .top-visual-feature-menu-content{
    margin-top: calc(4 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu-content:first-child{
    margin-top: 0;
  }
  .top-visual-feature-menu-txt{
    text-align: center;
    line-height: calc(14 / 11 * 1);
    font-size: calc(11 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-visual-feature-menu-link{
    margin-top: calc(4 / var(--font-size) * 1rem);
  }
  .top-visual-feature-menu-link:first-child{
    margin-top: 0;
  }
  .top-visual-feature-menu-link-txt{
    text-align: center;
    line-height: 1;
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-visual-feature-menu-link-txt a,
  .top-visual-feature-menu-link-txt > span{
    display: inline-block;
    vertical-align: top;
    color: var(--main-color-page);
  }
  .--jigyo02 .top-visual-feature-menu-link-txt a,
  .--jigyo02 .top-visual-feature-menu-link-txt > span{
    color: var(--main-color-jigyo02);
  }
  .--jigyo03 .top-visual-feature-menu-link-txt a,
  .--jigyo03 .top-visual-feature-menu-link-txt > span{
    color: var(--main-color-jigyo03);
  }
  .--jigyo04 .top-visual-feature-menu-link-txt a,
  .--jigyo04 .top-visual-feature-menu-link-txt > span{
    color: var(--main-color-jigyo04);
  }
  .--jigyo05 .top-visual-feature-menu-link-txt a,
  .--jigyo05 .top-visual-feature-menu-link-txt > span{
    color: var(--main-color-jigyo05);
  }
  .top-visual-feature-menu-link-txt a svg,
  .top-visual-feature-menu-link-txt > span svg{
    display: inline-block;
    vertical-align: top;
    width: calc(14 / 12 * 1em);
    height: calc(14 / 12 * 1em);
    margin-top: calc(-1 / 12 * 1em);
    margin-left: calc(4 / 12 * 1em);
    fill: var(--main-color-page);
  }
  .--jigyo02 .top-visual-feature-menu-link-txt a svg,
  .--jigyo02 .top-visual-feature-menu-link-txt > span svg{
    fill: var(--main-color-jigyo02);
  }
  .--jigyo03 .top-visual-feature-menu-link-txt a svg,
  .--jigyo03 .top-visual-feature-menu-link-txt > span svg{
    fill: var(--main-color-jigyo03);
  }
  .--jigyo04 .top-visual-feature-menu-link-txt a svg,
  .--jigyo04 .top-visual-feature-menu-link-txt > span svg{
    fill: var(--main-color-jigyo04);
  }
  .--jigyo05 .top-visual-feature-menu-link-txt a svg,
  .--jigyo05 .top-visual-feature-menu-link-txt > span svg{
    fill: var(--main-color-jigyo05);
  }
  .top-visual-feature-menu-note {
    position: absolute;
    margin-left: calc(10 / var(--font-size) * 1rem);
    font-size: calc(18 / var(--font-size) * 1rem);
  }
  .top-visual-feature-footer-note {
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-visual-note{
    margin-top: calc(13 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  TOP NEWS
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .top-news{
    padding-top: calc(62 / var(--font-size) * 1rem);
    color: var(--text-color);
  }
  .top-news:last-child{
    padding-bottom: calc(60 / var(--font-size) * 1rem);
  }
  .top-visual + .top-news{
    padding-top: calc(80 / var(--font-size) * 1rem);
  }
  .top-news__inner{
    padding: 0 calc(85 / var(--font-size) * 1rem);
  }
  .l-frame-main:first-child .top-news__inner{
    max-width: calc(1164 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .top-news-column{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: calc(1112 / var(--font-size)* 1rem);
    margin: 0 auto;
  }
  .top-news-column__parts:first-child{
    flex-shrink: 0;
    width: calc(143 / var(--font-size) * 1rem);
    margin-left: calc(57 / var(--font-size) * 1rem);
  }
  .top-news-column__parts + .top-news-column__parts{
    flex-grow: 1;
    margin-left: calc(57 / var(--font-size) * 1rem);
  }
  .top-news-heading{

  }
  .top-news-heading__label{
    display: inline-block;
    vertical-align: top;
    line-height: calc(42 / 28 * 1);
    font-size: calc(28 / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--main-color-page);
  }
  .top-news-body{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .top-news-body:first-child{
    margin-top: 0;
  }
  .top-news-link{
    margin-top: calc(22 / var(--font-size) * 1rem);
  }
  .top-news-link:first-child{
    margin-top: 0;
  }
  .top-news-link-txt{
    line-height: calc(22.4 / 14 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-news-link-txt a{
    display: inline-block;
    vertical-align: top;
    color: var(--text-color);
    transition:0.3s ease;
  }
  .top-news-link-txt a:hover{
    opacity: 0.7;
  }
  .top-news-link-txt a svg{
    display: inline-block;
    vertical-align: top;
    width: calc(16 / 14 * 1em);
    height: calc(16 / 14 * 1em);
    margin-top: calc(22.4 / 2 / 14 * 1em - 16 / 2 / 14 * 1em);
    margin-bottom: calc(22.4 / 2 / 14 * 1em - 16 / 2 / 14 * 1em);
    margin-left: calc(8 / 14 * 1em);
    fill: var(--main-color-page);
  }
  .top-news .c-news-list{
    padding-top: calc(12 / var(--font-size) * 1rem);
  }
  .top-news .c-news-list__item{
    display: flex;
    align-items: flex-start;
    margin-bottom: calc(12 / var(--font-size) * 1rem);
    padding-bottom: calc(12 / var(--font-size) * 1rem);
  }
  .top-news .c-news-list__item:last-child::before{
    content: none;
  }
  .top-news .c-news-list__item__heading{
    flex-shrink: 0;
  }
  .top-news .c-news-list__item__date{
    font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
  }
  .top-news .c-news-list__item__category{
    margin-left: calc(16 / var(--font-size) * 1rem);
  }
  .top-news .c-news-list__item__body{
    margin-top: 0;
    margin-left: calc(8 / var(--font-size) * 1rem);
  }
}

@media (max-width: 767px) {
  .top-news{
    padding-top: calc(40 / var(--font-size) * 1rem);
    padding-bottom: calc(0 / var(--font-size) * 1rem);
    color: var(--text-color);
  }
  .top-news__inner{
    width: 100%;
    margin: 0 auto;
    padding: 0 calc(15 / var(--font-size) * 1rem);
  }
  .top-news-column{
  }
  .top-news-column__parts {
  }
  .top-news-column__parts:first-child{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
  .top-news-column__parts:nth-child(2){
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .top-news-heading{

  }
  .top-news-heading__label{
    display: inline-block;
    vertical-align: top;
    line-height: calc(42 / 26 * 1);
    font-size: calc(18 / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--main-color-page);
  }
  .top-news-body{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .top-news-body:first-child{
    margin-top: 0;
  }
  .top-news-link{
    flex-grow: 1;
    margin-top: calc(2 / var(--font-size) * 1rem);
  }
  .top-news-link:first-child{
    margin-top: 0;
  }
  .top-news-link-txt{
    line-height: calc(22.4 / 14 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
    text-align: right;
  }
  .top-news-link-txt a{
    display: inline-block;
    vertical-align: top;
    color: var(--text-color);
  }
  .top-news-link-txt a svg{
    display: inline-block;
    vertical-align: top;
    width: calc(16 / 14 * 1em);
    height: calc(16 / 14 * 1em);
    margin-top: calc(22.4 / 2 / 14 * 1em - 16 / 2 / 14 * 1em);
    margin-bottom: calc(22.4 / 2 / 14 * 1em - 16 / 2 / 14 * 1em);
    margin-left: calc(8 / 14 * 1em);
    fill: var(--main-color-page);
  }

  /** コンポーネント部分調整 **/
  .c-news-list__item__date{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
  }
  .c-news-list__item__category{
    padding:calc(3 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem);
    width:calc(128 / var(--font-size) * 1rem);
    min-width:calc(128 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
  }
  .c-news-list__text{
    text-align: justify;
    text-justify: inter-ideograph;
  }
}

/* --------------------------------------------------------------------------
  TOP INTRO
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .top-intro{
    padding-top: calc(70 / var(--font-size) * 1rem);
    color: var(--text-color);
  }
  .top-intro.--business{
    padding-top: calc(80 / var(--font-size) * 1rem);
  }
  .top-intro.--business:nth-of-type(4){
    padding-top: calc(80 / var(--font-size) * 1rem);
  }
  .top-intro p a{
    color: var(--text-color);
    text-decoration: underline;
  }
  .top-intro p a:hover{
    text-decoration: none;
  }
  .top-intro__inner{
    max-width: calc(1112 / var(--font-size) * 1rem);
    margin-inline: auto;
    border-radius: calc(30 / var(--font-size) * 1rem);
  }
  .l-frame-main:first-child .top-intro__inner{
    max-width: calc(1164 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .top-intro-heading{
    text-align: center;
    padding-block: calc(13 / var(--font-size) * 1rem);
    padding-inline: calc(30 / var(--font-size) * 1rem);
    border-radius: calc(30 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem) 0 0;
    overflow: hidden;
  }
  .--consumer .top-intro-heading{
    background: var(--main-color-jigyo01);
    color: var(--color-white);
  }
  .--business .top-intro-heading{
    background: var(--accent-color-jigyo01);
    color: var(--color-white);
  }
  .--business:nth-of-type(4) .top-intro-heading{
    background: var(--spare-color-jigyo01-01);
    color: var(--color-white);
  }
  .top-intro-heading__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(30 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-body{

  }
  .top-intro-body__inner{
    padding-top: calc(51 / var(--font-size) * 1rem);
    padding-inline: calc(56 / var(--font-size) * 1rem);
    border-radius: 0 0 calc(30 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
    background: var(--color-gray_50);
  }
  .top-intro-body:last-child .top-intro-body__inner{
    padding-bottom: calc(70 / var(--font-size) * 1rem);
  }
  .top-intro-txt{
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-txt.--center{
    text-align: center;
  }
  .top-intro-txt.--xsmall{
    font-size: calc(12 / var(--font-size) * 1rem);
  }
  .top-intro-txt.--small{
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-intro-txt em{
    font-weight: 700;
    color: var(--main-color-page);
  }
  .top-intro-txt em{
    font-weight: 700;
    color: var(--main-color-page);
  }
  .--consumer .top-intro-txt em{
    color: var(--main-color-page);
  }
  .--business .top-intro-txt em{
    color: var(--accent-color-page);
  }
  .top-intro-note{
    margin-top: calc(4 / var(--font-size) * 1rem);
  }
  .top-intro-note:first-child{
    margin-top: 0;
  }
  .top-intro-note-txt{
    padding-left: 1em;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
    text-indent: -1em;
  }
  .top-intro-note-txt.--center{
    text-align: center;
  }
  .top-intro-note-txt.--xsmall{
    font-size: calc(12 / var(--font-size) * 1rem);
  }
  .top-intro-note-txt.--small{
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-intro-note-txt > *{
    text-indent: 0;
  }
  .top-intro-note__label{
    display: inline-block;
    vertical-align: top;
    width: 1em;
  }
  .top-intro-btn{
    margin-top: calc(21 / var(--font-size) * 1rem);
    text-align: center;
  }
  .top-intro-btn:first-child{
    margin-top: 0;
  }
  .top-intro-btn__note{
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .top-intro-feature-container.--flex .top-intro-feature-content .top-intro-btn{
    margin-top: 0;
    margin-left: auto;
  }
  .top-intro-feature-container.--flex .top-intro-feature-content .top-intro-btn:first-child{
    margin-left: 0;
  }
  .top-intro-btn a{
    display: inline-block;
    vertical-align: top;
    transition:0.3s ease;
  }
  .top-intro-btn a:hover{
    opacity: 0.7;
  }
  .top-intro-btn a[disabled]{
    pointer-events: none;
  }
  .top-intro-box-desc .top-intro-btn a{
    width: 100%;
  }
  .top-intro-btn-list{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .top-intro-btn-list__item{
    margin-left: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-btn-list__item:first-child{
    margin-left: 0;
  }
  .top-intro-box-desc .top-intro-btn-list__item{
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc .--3col .top-intro-btn-list__item{
    flex-grow: 1;
    width: calc((100% / 3) - calc(24 / var(--font-size) * 1rem));
    margin-left: calc(12 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc .top-intro-btn-list__item:first-child{
    margin-left: 0;
  }
  .top-intro-btn-body{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(260 / var(--font-size) * 1rem);
    height: calc(56 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
    background: var(--color-white);
    color: var(--main-color-page);
    overflow: hidden;
  }
  .top-intro-btn-body::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: calc(2 / var(--font-size) * 1rem) solid var(--main-color-page);
    border-radius: calc(18 / var(--font-size) * 1rem);
    pointer-events: none;
  }
  .top-intro-btn a[disabled] .top-intro-btn-body{
    background: var(--color-gray_400);
    color: var(--color-white);
  }
  .top-intro-btn a[disabled] .top-intro-btn-body::before{
    content: none;
  }
  .top-intro-btn.--xxsmall a[disabled] .top-intro-btn-body{
    padding-right: calc(8 / var(--font-size) * 1rem);
  }
  .--business .top-intro-btn-body{
    background: var(--accent-color-page);
  }
  .top-intro-btn.--portal .top-intro-btn-body{
    background: #3DA9A9;
  }
  .--login .top-intro-btn-body {
    background: var(--main-color);
  }
  .--login .top-intro-btn-body i{
    mask-size: contain;
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-image: url(/assets/img/common/ico_header_login.svg);
    background: var(--color-white);
  }
  .--xxsmall .top-intro-btn-body{
    width: calc(168 / var(--font-size) * 1rem);
    height: calc(64 / var(--font-size) * 1rem);
    padding-left: calc(8 / var(--font-size) * 1rem);
    padding-right: calc(32 / var(--font-size) * 1rem);
  }
  .--xxsmall .top-intro-btn-body i{
    margin-right: calc(10 / var(--font-size)* 1rem);
  }
  .--xsmall .top-intro-btn-body{
    width: calc(186 / var(--font-size) * 1rem);
    height: calc(56 / var(--font-size) * 1rem);
    padding-left: calc(12 / var(--font-size) * 1rem );
    padding-right: calc(24 / var(--font-size) * 1rem );
  }
  .--small .top-intro-btn-body{
    width: calc(230 / var(--font-size) * 1rem);
    height: calc(64 / var(--font-size) * 1rem);
    padding-left: calc(12 / var(--font-size) * 1rem);
    padding-right: calc(12 / var(--font-size) * 1rem);
  }
  .--large .top-intro-btn-body{
    width: calc(388 / var(--font-size) * 1rem);
    height: calc(80 / var(--font-size) * 1rem);
    padding-left: calc(14 / var(--font-size) * 1rem + 25 / var(--font-size) * 1rem + 12.5 / var(--font-size) * 1rem);
    padding-right: calc(14 / var(--font-size) * 1rem + 25 / var(--font-size) * 1rem + 12.5 / var(--font-size) * 1rem);
  }
  .--new-house .top-intro-btn-body,
  .--reform .top-intro-btn-body {
    color: var(--color-white);
  }
  .top-intro-btn.--new-house a:hover,
  .top-intro-btn.--reform a:hover,
  .top-intro-btn .--new-house a:hover,
  .top-intro-btn .--reform a:hover{
    opacity: 1;
  }
  .top-intro-btn.--new-house a:hover .top-intro-btn-body:before,
  .top-intro-btn.--reform a:hover .top-intro-btn-body:before,
  .top-intro-btn .--new-house a:hover .top-intro-btn-body:before,
  .top-intro-btn .--reform a:hover .top-intro-btn-body:before {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .--new-house .top-intro-btn-body:before,
  .--reform .top-intro-btn-body:before {
    content: "";
    display: block;
    width: 200%;
    height: 100%;
    border: none;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s ease;
  }
  .--new-house a[disabled] .top-intro-btn-body:before,
  .--reform a[disabled] .top-intro-btn-body:before {
    content: none;
  }
  .--new-house .top-intro-btn-body:before,
  .--reform .top-intro-btn-body:before{

  }
  .--new-house .top-intro-btn-body > *,
  .--reform .top-intro-btn-body > * {
    z-index: 1;
  }
  .--new-house .top-intro-btn-body:before{
    background: var(--main-button-bg-color-new-house-grade-color);
  }
  .--reform .top-intro-btn-body:before{
    background: var(--main-button-bg-color-reform-grade-color);
  }
  .--consumer .--type02 .top-intro-btn-body{
    background: var(--sub-color);
    color: var(--main-color-page);
  }
  .--business .--type02 .top-intro-btn-body{
    background: var(--sub-accent-color);
    color: var(--accent-color-page);
  }
  .top-intro-btn__label{
    display: inline-block;
    vertical-align: top;
    line-height: calc(22 / 16 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .--xsmall .top-intro-btn__label{
    font-size: calc(12 / var(--font-size) * 1rem);
  }
  /** 登録の手順ボタン **/
  .top-intro-btn.--about-entry-flow .top-intro-btn-body{
    background-color: var(--color-white);
    border: calc(1 / var(--font-size)* 1rem) solid var(--sub-border-color);
    width: calc(230 / var(--font-size)* 1rem);
    height:calc(49 / var(--font-size) * 1rem);
  }
  .top-intro-btn.--about-entry-flow .top-intro-btn__label {
    color:var(--color-black);
    line-height: calc(22 / 12 * 1);
    font-size: calc(12 / var(--font-size)* 1rem);
    font-weight: 700;
    margin-right: calc(22 / var(--font-size)* 1rem);
  }
  .top-intro-btn.--about-entry-flow .top-intro-btn-body i{
    width: calc(14 / var(--font-size)* 1rem);
    height: calc(14 / var(--font-size)* 1rem);
    margin-right: calc(11 / var(--font-size)* 1rem);
  }
  .top-intro-btn.--about-entry-flow .top-intro-btn-body svg{
    fill: var(--color-gray_600);
  }
  /** **/
  .top-intro-btn__label > span{
    font-size: calc(10 / 14 * 100%);
  }
  .top-intro-btn-body i{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
    margin: auto 0;
    margin-right: calc(20 / var(--font-size) * 1rem);
  }
  .--small .top-intro-btn-body i{
    margin-right: calc(14 / var(--font-size) * 1rem);
  }
  .top-intro-btn a[disabled] .top-intro-btn-body i{
    display: none;
  }
  .top-intro-btn--arrow-shown a[disabled] .top-intro-btn-body i{
    display: block;
  }
  .--large .top-intro-btn-body i{
    width: calc(25 / var(--font-size) * 1rem);
    height: calc(25 / var(--font-size) * 1rem);
    margin-right: calc(12.5 / var(--font-size) * 1rem);
  }
  .--xsmall .top-intro-btn-body i{
    width: calc(14 / var(--font-size) * 1rem);
    height: calc(14 / var(--font-size) * 1rem);
    margin-right: calc(14 / var(--font-size) * 1rem);
  }
  .top-intro-btn-body i svg{
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: contain;
    fill: var(--main-color-page);
  }
  .top-intro-btn a[disabled] .top-intro-btn-body i svg{
    fill: var(--color-white);
  }
  .--consumer .--type02 .top-intro-btn-body i svg{
    fill: var(--main-color-page);
  }
  .--business .--type02 .top-intro-btn-body i svg{
    fill: var(--accent-color-page);
  }
  .--new-house .top-intro-btn-body i svg,
  .--reform .top-intro-btn-body i svg{
    fill: var(--color-white);
  }
  .top-intro-section--lv1{
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv1:first-child{
    margin-top: 0;
  }
  .top-intro-section--lv1__inner{

  }
  .top-intro-section--lv1-heading{
    text-align: center;
  }
  .top-intro-section--lv1-heading__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(24 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .--consumer .top-intro-section--lv1-heading__label{
    color: var(--main-color-page);
  }
  .--business .top-intro-section--lv1-heading__label{
    color: var(--accent-color-page);
  }
  .top-intro-section--lv1-body{
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv1-body:first-child{
    margin-top: 0;
  }
  .top-intro-section--lv2{
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv2:first-child{
    margin-top: 0;
  }
  .top-intro-section--lv2__inner{

  }
  .top-intro-section--lv2-heading{
    text-align: center;
  }
  .top-intro-section--lv2-heading__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv2-body{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv2-body:first-child{
    margin-top: 0;
  }
  .top-intro-box{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .top-intro-box:first-child{
    margin-top: 0;
  }
  .top-intro-box__inner{
    padding-top: calc(38 / var(--font-size) * 1rem);
    padding-bottom: calc(38 / var(--font-size) * 1rem);
    padding-left: calc(34 / var(--font-size) * 1rem);
    padding-right: calc(34 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
    background: var(--color-white);
    box-shadow: 0 0 calc(6 / var(--font-size) * 1rem) rgb(0 0 0 / .1);
    transform: translate3d(0, 0, 0);
  }
  .top-intro-box__inner:has(.top-intro-box-desc__term){
    padding-left: 0;
  }
  .top-intro-box-section--lv1{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv1:first-child{
    margin-top: 0;
  }
  .top-intro-box-section--lv1__inner{

  }
  .top-intro-box-section--lv1-heading{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top-intro-box-section--lv1-heading__ico{
    flex-shrink: 0;
    display: inline-block;
    vertical-align: top;
    width: calc(50 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv1-heading__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(16 / var(--font-size) * 1rem);
    font-size: calc(22 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-box-section--lv1-heading__label:first-child{
    margin-left: 0;
  }
  .top-intro-box-section--lv1-body{
    margin-top: calc(21 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv1-body:first-child{
    margin-top: 0;
  }
  .top-intro-box-section--lv1-top{
    display: flex;
    align-items: center;
    column-gap: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv1-top .top-intro-btn:has(.top-intro-btn__note) + p{
    margin-bottom: calc(8 / var(--font-size) * 1rem + 12 / var(--font-size) * 1.92rem);
  }
  .top-intro-box-section--lv2{
    margin-top: calc(21 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv2:first-child{
    margin-top: 0;
  }
  .top-intro-box-section--lv2__inner{

  }
  .top-intro-box-section--lv2-heading{
    text-align: center;
  }
  .top-intro-box-section--lv2-heading__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s {
  }
  .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s:before {
    top: calc(1.4 * .5em - 14 / var(--font-size) * .5rem);
    width: calc(14 / var(--font-size) * 1rem);
    height: calc(14 / var(--font-size) * 1rem);
    border-radius: 0;
    transform: rotate(45deg);
    margin-right: calc(8 / var(--font-size) * 1rem);
  }
  .--consumer .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s:before {
    background-color: var(--main-color-page);
  }
  .--business .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s:before {
    background-color: var(--accent-color-page);
  }
  .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s > span {
  }
  .top-intro-box-section--lv2-heading__label.--button{
    display:flex;
    align-items:center;
    margin-bottom: calc(10 / var(--font-size) * 1rem);
    margin-top: calc(52 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv2-heading__label.--button .c-block-heading{
    margin-bottom: 0;
  }
  .top-intro-box-section--lv2-heading__button{
    margin-top: calc(-18 / var(--font-size) * 1rem);
    margin-left: auto;
  }
  .top-intro-box-section--lv2-body{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv2-body:first-child{
    margin-top: 0;
  }
  .top-intro-box-desc{
    display: flex;
    justify-content: flex-start;
  }
  .top-intro-box-desc__term{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: calc(233 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc__term-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: calc(10 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc__term-box .top-intro-box-desc__term__img{
    width: calc(92 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc.--large .top-intro-box-desc__term{
    width: calc(226 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc__term__label{
    display: inline-block;
    vertical-align: top;
    line-height: calc(25.6 / 17 * 1);
    font-size: calc(17 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-box-desc__defin{
    position: relative;
    flex-grow: 1;
    padding-left: calc(34 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc__defin::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
  }
  .top-intro-box-desc.--large .top-intro-box-desc__defin{
    padding-left: calc(54 / var(--font-size) * 1rem);
  }
  .top-intro-feature{
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .top-intro-feature:first-child{
    margin-top: 0;
  }
  .top-intro-feature__inner{
    padding-top: calc(26 / var(--font-size) * 1rem);
    padding-bottom: calc(26 / var(--font-size) * 1rem);
    padding-left: calc(16 / var(--font-size) * 1rem);
    padding-right: calc(16 / var(--font-size) * 1rem);
    border-radius: calc(10 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .top-intro-feature-column .top-intro-feature__inner{
    height: 100%;
    border-radius: calc(5 / var(--font-size) * 1rem);
    padding: 0;
  }
  .top-intro-feature-container{

  }
  .top-intro-feature-container.--flex{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .top-intro-feature-img{
    text-align: center;
  }
  .top-intro-feature-container.--flex .top-intro-feature-img{
    flex-shrink: 0;
  }
  .top-intro-feature-img__label{
    display: inline-block;
    vertical-align: top;
    width: calc(97 / var(--font-size) * 1rem);
  }
  .top-intro-feature-content{

  }
  .top-intro-feature-container.--flex .top-intro-feature-content{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    column-gap: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-feature-container.--flex .top-intro-feature-content:first-child{
    margin-left: 0;
  }
  .top-intro-feature-desc{

  }
  .top-intro-feature-container.--flex .top-intro-feature-content:has(.top-intro-btn) .top-intro-feature-desc{
    margin-right: calc(27 / var(--font-size) * 1rem);
  }
  .top-intro-feature-desc__term{

  }
  .top-intro-feature-desc__term__label{
    display: inline-block;
    vertical-align: top;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-feature-desc__defin{
    margin-top: calc(6 / var(--font-size) * 1rem);
  }
  .top-intro-feature-desc__defin:first-child{
    margin-top: 0;
  }
  .top-intro-feature-column{
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: calc(30 / var(--font-size) * 1rem) calc(26 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-feature-column::before{
    content: "";
    position: absolute;
    inset: 0;
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-color-page);
    border-radius: calc(18 / var(--font-size) * 1rem);
    pointer-events: none;
  }
  .--consumer .top-intro-feature-column::before{
    border-color: var(--main-color-page);
  }
  .--business .top-intro-feature-column::before{
    border-color: var(--accent-color-page);
  }
  .top-intro-feature-column__parts{
    width: 100%;
  }
  .top-intro-feature-column__parts + .top-intro-feature-column__parts {
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .top-intro-feature-column__parts:first-child{
    margin-left: 0;
  }
  .top-intro-lower{
    position: relative;
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .top-intro-lower:first-child{
    margin-top: 0;
  }
  .top-intro-lower__inner{
    position: relative;
    max-width: calc(1024 / var(--font-size) * 1rem);
    margin: auto;
  }
  .--business .top-intro-lower{
    margin-top: calc(48 / var(--font-size) * 1rem);
  }
  .--business .top-intro-lower__inner{
  }
  .--consumer .top-intro-lower{
    margin-top: calc(48 / var(--font-size) * 1rem);
  }
  .--consumer .top-intro-lower__inner{
  }
  .--consumer .top-intro-lower-btn-list{
    display: flex;
    gap: calc(32 / var(--font-size) * 1rem);
    align-items: flex-end;
  }
  .top-intro-lower__inner > *{
    position: relative;
    z-index: 1;
  }
  .top-intro-lower-btn{
    position: relative;
  }
  .top-intro-lower-btn-list__item__title{
    margin-bottom: calc(18 / var(--font-size) * 1rem);
    text-align: center;
  }
  .top-intro-lower-btn-list__item__title__label{
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding-bottom: calc(10 / var(--font-size) * 1rem);
    font-size: calc(18 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: calc(42 / 18 * 1);
    text-align: center;
  }
  .top-intro-lower-btn-list__item__title__label::before{
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: calc(10 / var(--font-size) * 1rem);
    background: var(--main-color-page);
    clip-path: polygon(
      0% 0%,
      calc(50% - calc(6.5 / var(--font-size) * 1rem)) 0%,
      calc(50% - calc(.5 / var(--font-size) * 1rem)) calc(100% - calc(1 / var(--font-size) * 1rem)),
      calc(50% - calc(1 / var(--font-size) * 1rem)) 100%,
      calc(50% - calc(7 / var(--font-size) * 1rem)) calc(1 / var(--font-size) * 1rem),
      0% calc(1 / var(--font-size) * 1rem)
    );
  }
  .top-intro-lower-btn-list__item__title__label::after{
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: calc(10 / var(--font-size) * 1rem);
    background: var(--main-color-page);
    clip-path: polygon(
      calc(50% + calc(6.5 / var(--font-size) * 1rem)) 0%,
      100% 0%,
      100% calc(1 / var(--font-size) * 1rem),
      calc(50% + calc(6.5 / var(--font-size) * 1rem)) calc(1 / var(--font-size) * 1rem)
    );
  }
  .--consumer .top-intro-lower-btn-list__item__title__label::before,
  .--consumer .top-intro-lower-btn-list__item__title__label::after{
    background: var(--main-color);
  }
  .--business .top-intro-lower-btn-list__item__title__label::before,
  .--business .top-intro-lower-btn-list__item__title__label::after{
    background: var(--main-accent-color);
  }
  .top-intro-lower-btn-list__item__inner{
  }
  .top-intro-lower-btn-list__item .top-intro-lower-btn-list__item__inner{
    max-width: calc(360 / var(--font-size) * 1rem);
    margin-inline: auto;
  }
  .top-intro-lower-btn .top-intro-note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(-28 / var(--font-size) * 1rem);
  }
  .top-intro-lower-btn a{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    transition:0.3s ease;
  }
  .--consumer .top-intro-lower-btn a:hover{
    color: var(--main-color-page);
  }
  .--business .top-intro-lower-btn a:hover{
    color: var(--accent-color-page);
  }
  .top-intro-lower-btn-list{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .top-intro-lower-btn-list__item{
    position: relative;
    flex-grow: 1;
    width: calc(1 / 2 * 100%);
  }
  /* .top-intro-lower-btn-list__item::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: calc(100% - calc(44 / var(--font-size) * 1rem));
    border-left: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
    transform: translate3d(0, -50%, 0);
  } */
  .top-intro-lower-btn-list__item:first-child::before{
    content: none;
  }
  .top-intro-lower-btn-list__item a {
    height: auto;
  }
  .top-intro-lower-btn-list .top-intro-note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(-28 / var(--font-size) * 1rem);
  }
  .top-intro-lower-btn-list__item:has(a[disabled]) {
    position: relative;
    overflow: visible;
  }
  .top-intro-lower-btn-list__item a[disabled] {
    pointer-events: none;
  }
  .top-intro-lower-btn-list__item a[disabled] {
    opacity: 0.6;
    filter: grayscale(1);
  }
  .top-intro-lower-btn-body{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-height: calc(16 / var(--font-size) * 2rem + 36 / var(--font-size) * 1rem);
    height: 100%;
    padding-top: calc(16 / var(--font-size) * 1rem);
    padding-bottom: calc(16 / var(--font-size) * 1rem);
    padding-left: calc(23 / var(--font-size) * 1rem);
    padding-right: calc(23 / var(--font-size) * 1rem + 20 / var(--font-size) * 1rem + 20 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
    background: var(--color-white);
    box-shadow: 0 0 calc(6 / var(--font-size) * 1rem) rgb(0 0 0 / .1);
    transform: translate3d(0, 0, 0);
  }
  .top-intro-lower-btn__ico{
    flex-shrink: 0;
    display: inline-block;
    vertical-align: top;
    width: calc(36 / var(--font-size) * 1rem);
  }
  .top-intro-lower-btn__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(18 / var(--font-size) * 1rem);
    line-height: calc(25.6 / 18 * 1);
    font-size: calc(18 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-lower-btn__label:first-child{
    margin-left: 0;
  }
  .top-intro-lower-btn-body i{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
    margin: auto 0;
    margin-right: calc(23 / var(--font-size) * 1rem);
    background-color: var(--color-white);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-lower-btn-body i svg{
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: contain;
    fill: var(--main-color-page);
  }
  .--consumer .top-intro-lower-btn svg{
    fill: var(--main-color);
    z-index: 1;
    position: relative;
  }
  .--business .top-intro-lower-btn svg{
    fill: var(--main-accent-color);
    z-index: 1;
    position: relative;
  }
  .top-intro-bnr{

  }
  .top-intro-bnr a{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    transition:0.3s ease;
  }
  .top-intro-bnr .--portal a:hover{
    color :var(--main-color-jigyo01);
  }
  .top-intro-bnr .--kosodate a:hover{
    color :var(--main-color-jigyo02);
  }
  .top-intro-bnr .--mado a:hover{
    color :var(--main-color-jigyo03);
  }
  .top-intro-bnr .--kyutou a:hover{
    color :var(--main-color-jigyo04);
  }
  .top-intro-bnr .--chintai a:hover{
    color :var(--main-color-jigyo05);
  }
  .top-intro-bnr-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .top-intro-bnr-list__item{
    width: calc(1 / 2 * 100% - calc(13 * 1 / 2 / var(--font-size) * 1rem));
    margin-left: calc(13 / var(--font-size) * 1rem);
  }
  .top-intro-bnr-list__item:nth-child(2n+1){
    margin-left: 0;
  }
  .top-intro-bnr-list__item:nth-child(n+3){
    margin-top: calc(13 / var(--font-size) * 1rem);
  }
  .top-intro-bnr-body{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: calc(72 / var(--font-size) * 1rem);
    padding-left: calc(22 / var(--font-size) * 1rem);
    padding-right: calc(11 / var(--font-size) * 1rem + 25 / var(--font-size) * 1rem);
  }
  .top-intro-bnr-body::before{
    content: '';
    position: absolute;
    inset: 0;
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-color-page);
    border-radius: calc(18 / var(--font-size) * 1rem);
    background: var(--color-white);
    pointer-events: none;
  }
  .--portal .top-intro-bnr-body::before{
    border-color: var(--main-strong-color-jigyo01);
  }
  .--kosodate .top-intro-bnr-body::before{
    border-color: var(--main-strong-color-jigyo02);
  }
  .--mado .top-intro-bnr-body::before{
    border-color: var(--main-strong-color-jigyo03);
  }
  .--kyutou .top-intro-bnr-body::before{
    border-color: var(--main-strong-color-jigyo04);
  }
  .--chintai .top-intro-bnr-body::before{
    border-color: var(--main-strong-color-jigyo05);
  }
  .top-intro-bnr-body > *{
    position: relative;
    z-index: 1;
  }
  .top-intro-bnr__ico{
    flex-shrink: 0;
    display: inline-block;
    vertical-align: top;
    width: calc(54 / var(--font-size) * 1rem);
    height: calc(54 / var(--font-size) * 1rem);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .--portal .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_portal.png);
  }
  .--kosodate .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_mirai.png);
  }
  .--mado .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_mado.png);
  }
  .--kyutou .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_kyutou.png);
  }
  .--chintai .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_chintai.png);
  }
  .top-intro-bnr__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(9 / var(--font-size) * 1rem);
    line-height: calc(22.5 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-bnr__label:first-child{
    margin-left: 0;
  }
  .top-intro-bnr__label > span:not(.u-font-eng){
    display: block;
    line-height: calc(22.5 / 16 * 1);
    font-size: calc(12 / 16 * 100%);
  }
  .top-intro-bnr-body i{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(25 / var(--font-size) * 1rem);
    height: calc(25 / var(--font-size) * 1rem);
    margin: auto 0;
    margin-right: calc(11 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-bnr-body i::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% - calc(2 / var(--font-size) * 1rem));
    height: calc(100% - calc(2 / var(--font-size) * 1rem));
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .--portal .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo01);
  }
  .--kosodate .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo02);
  }
  .--mado .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo03);
  }
  .--kyutou .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo04);
  }
  .--chintai .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo05);
  }
  .top-intro-bnr-body i svg{
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: contain;
    fill: var(--color-white);
    z-index: 1;
    position: relative;
  }
  .--portal .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo01-02);
  }
  .--kosodate .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo02-02);
  }
  .--mado .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo03-02);
  }
  .--kyutou .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo04-02);
  }
  .--chintai .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo05-02);
  }

  .top-intro-feature-table{
  }
  .top-intro-feature-table__inner{
    position: relative;
    padding: calc(16 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-feature-table__inner::before{
    content: "";
    position: absolute;
    inset: 0;
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-color-page);
    border-radius: calc(18 / var(--font-size) * 1rem);
    pointer-events: none;
  }
  .--consumer .top-intro-feature-table__inner::before{
    border-color: var(--main-color);
  }
  .--business .top-intro-feature-table__inner::before{
    border-color: var(--main-accent-color);
  }
  .top-intro-feature-table-list{
    display: grid;
    grid-template-columns: minmax(calc(100 / var(--font-size) * 1rem), calc(97 / var(--font-size) * 1rem)) repeat(2, calc(277 / var(--font-size) * 1rem));
    grid-template-rows: calc(200 / var(--font-size) * 1rem) auto auto;
    gap: calc(10 / var(--font-size) * 1rem);
  }
  .top-intro-feature-table-list__item{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .top-intro-feature-table-list__item .top-intro-btn__note{
    /*margin-top: calc(4 / var(--font-size) * 1rem);*/
    margin-top: 0;
  }
  .top-intro-feature-table-list__inner{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: calc(10 / var(--font-size) * 1rem);
    border-radius: calc(10 / var(--font-size) * 1rem);
  }
  .top-intro-feature-table-list__inner.--new-house{
    background: var(--accent-sub-color-jigyo01);
  }
  .top-intro-feature-table-list__inner.--gx{
    background: var(--sub-color-jigyo01-02);
    justify-content: center;
  }
  .top-intro-feature-table-list__item:nth-child(2) .top-intro-feature-table-list__inner,
  .top-intro-feature-table-list__item:nth-child(3) .top-intro-feature-table-list__inner{
    border-radius: calc(10 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem) 0 0;
  }
  .top-intro-feature-table-list__item:nth-child(5) .top-intro-feature-table-list__inner,
  .top-intro-feature-table-list__item:nth-child(6) .top-intro-feature-table-list__inner{
    height: calc(100% + calc(10 / var(--font-size) * 1rem));
    margin-top: calc(-10 / var(--font-size) * 1rem);
    padding-top: calc(20 / var(--font-size) * 1rem);
    border-radius: 0;
  }
  .top-intro-feature-table-list__item:nth-child(8) .top-intro-feature-table-list__inner,
  .top-intro-feature-table-list__item:nth-child(9) .top-intro-feature-table-list__inner{
    height: calc(100% + calc(10 / var(--font-size) * 1rem));
    margin-top: calc(-10 / var(--font-size) * 1rem);
    padding-top: calc(20 / var(--font-size) * 1rem);
    border-radius: 0 0 calc(10 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem);
  }
  .top-table-heading{
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: calc(10 / var(--font-size) * 1rem);
  }
  .--consumer .top-table-heading{
    background-color: var(--sub-color-02);
    color: var(--main-color);
  }
  .--business .top-table-heading{
    background-color: var(--sub-accent-color-02);
    color: var(--main-accent-color);
  }
  .top-table-heading__inner{
    width: 100%;
    height: 100%;
    padding: calc(18 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top-table-heading__label{
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: calc(22.4 / 14 * 1);
    flex-shrink: 0;
  }
  .top-intro-table-heading{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(10 / var(--font-size) * 1rem);
    margin-bottom: calc(11 / var(--font-size) * 1rem);
    min-height: calc(64 / var(--font-size) * 1rem);
    position: relative;
  }
  .top-intro-table-heading__label{
    font-size: calc(16 / var(--font-size) * 1rem);
    color: var(--color-white);
    font-weight: 700;
    line-height: calc(18.4 / 16 * 1);
    text-align: center;
    display: flex;
    align-items: center;
    gap: calc(6 / var(--font-size) * 1rem);
  }
  .top-intro-table-heading.--gx .top-intro-table-heading__label{
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .top-intro-table-heading.--new-house{
    background-color: var(--accent-color-jigyo01);
  }
  .top-intro-table-heading.--gx{
    background-color: var(--main-color-jigyo01);
  }
  .top-intro-table-heading.--no-icon {
    padding: calc(8 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
    display: inline-block;
    width: auto;
  }
  .top-intro-table-heading__ico{
    display: inline-block;
    width: calc(52 / var(--font-size) * 1rem);
    height: auto;
    position: absolute;
    left: 0;
    bottom: calc(1 / var(--font-size) * 1rem);
    margin-left: 0;
    margin-left: calc(21 / var(--font-size) * 1rem);
  }
  .top-intro-table-txt{
    font-size: calc(12.5 / var(--font-size) * 1rem);
    font-weight: 400;
    line-height: calc(22.4 / 14 * 1);
  }
  .top-intro-feature-table-list__inner .top-intro-table-txt{
    flex-grow: 1;
  }
  .top-intro-table-note{
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: calc(18.4 / 14 * 1);
    color: var(--main-color-jigyo01);
  }
}

@media (max-width: 767px) {
  .top-intro{
    padding-top: calc(64 / var(--font-size) * 1rem);
    color: var(--text-color);
  }
  .top-intro p a{
    color: var(--text-color);
    text-decoration: underline;
  }
  .top-intro__inner{
    padding: 0 calc(15 / var(--font-size) * 1rem);
  }
  .top-intro-heading{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-right: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro__inner .top-intro-heading{
    margin: 0 calc(-15 / var(--font-size) * 1rem);
  }
  .top-intro-heading__ico{
    flex-shrink: 0;
    display: inline-block;
    vertical-align: top;
    width: calc(80 / var(--font-size) * 1rem);
    position: relative;
    left: calc(-5 / var(--font-size) * 1rem);
  }
  .top-intro.--business .top-intro-heading__ico{
  }
  .top-intro-heading__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(-9 / var(--font-size) * 1rem);
    margin-bottom: calc(21 / var(--font-size) * 1rem);
    font-size: calc(22 / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--main-color-page);
    white-space: nowrap;
  }
  .--consumer .top-intro-heading__label{
    color: var(--main-color-page);
  }
  .--business .top-intro-heading__label{
    color: var(--accent-color-page);
    letter-spacing: -0.015em;
  }
  .top-intro-heading__label:first-child{
    margin-left: 0;
  }
  .top-intro-body{

  }
  .top-intro-body__inner{
    position: relative;
    padding-top: calc(48 / var(--font-size) * 1rem);
  }
  .top-intro-body__inner::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--sub-color-03);
    pointer-events: none;
  }
  .top-intro-body:last-child .top-intro-body__inner{
    padding-bottom: calc(48 / var(--font-size) * 1rem);
  }
  .--consumer .top-intro-body__inner::before{
    background: var(--sub-color-03);
  }
  .--business .top-intro-body__inner::before{
    background: var(--accent-sub-color-jigyo01-02);
  }
  .top-intro-body__inner > *{
    position: relative;
    z-index: 1;
  }
  .top-intro-txt{
    line-height: calc(22.4 / 14 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-txt.--center{
    text-align: center;
  }
  .top-intro-txt.--center-sp{
    text-align: center;
  }
  .top-intro-txt.--xsmall{
    font-size: calc(12 / var(--font-size) * 1rem);
  }
  .top-intro-txt.--small{
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-intro-txt.--small-sp{
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv1-body > .top-intro-txt,
  .top-intro-section--lv2-body > .top-intro-txt,
  .top-intro-box-section--lv1-body > .top-intro-txt,
  .top-intro-box-section--lv2-body > .top-intro-txt{
    padding-left: calc(6 / var(--font-size) * 1rem);
    padding-right: calc(6 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc .top-intro-txt{
    padding-left: calc(6 / var(--font-size) * 1rem);
    padding-right: calc(6 / var(--font-size) * 1rem);
  }
  .top-intro-txt em{
    font-weight: 700;
    color: var(--main-color-page);
  }
  .top-intro-txt em{
    font-weight: 700;
    color: var(--main-color-page);
  }
  .--consumer .top-intro-txt em{
    color: var(--main-color-page);
  }
  .--business .top-intro-txt em{
    color: var(--accent-color-page);
  }
  .top-intro-note{
    width:100%;
    margin-top: calc(12 / var(--font-size) * 1rem);
  }
  .top-intro-note:first-child{
    margin-top: 0;
  }
  .top-intro-note-txt{
    padding-left: 1em;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
    text-indent: -1em;
  }
  .top-intro-note-txt.--center{
    text-align: center;
  }
  .top-intro-note-txt.--xsmall{
    font-size: calc(12 / var(--font-size) * 1rem);
  }
  .top-intro-note-txt.--small{
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-intro-note-txt > *{
    text-indent: 0;
  }
  .top-intro-note__label{
    display: inline-block;
    vertical-align: top;
    width: 1em;
  }
  .top-intro-btn{
    margin-top: calc(24 / var(--font-size) * 1rem);
    text-align: center;
  }
  .top-intro-btn:first-child{
    margin-top: 0;
  }
  .top-intro-btn__note{
    margin-top: calc(4 / var(--font-size) * 1rem);
  }
  .top-intro-btn + .top-intro-txt{
    margin-top: calc(10 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv1-body > .top-intro-btn{
    padding-left: calc(6 / var(--font-size) * 1rem);
    padding-right: calc(6 / var(--font-size) * 1rem);
  }
  .top-intro-feature .top-intro-btn{
    margin-top: calc(16 / var(--font-size) * 1rem);
    padding-left: calc(6 / var(--font-size) * 1rem);
    padding-right: calc(6 / var(--font-size) * 1rem);
  }
  .top-intro-feature .top-intro-btn:first-child{
    margin-top: 0;
  }
  .top-intro-feature .top-intro-feature-column .top-intro-btn{
  }
  .top-intro-btn a{
    display: inline-block;
    vertical-align: top;
    width: 100%;
  }
  .top-intro-btn a[disabled]{
    pointer-events: none;
  }
  .top-intro-box-desc .top-intro-btn a{
    width: 100%;
  }
  .--xsmall .top-intro-btn a{
    width: 100%;
  }
  .--small .top-intro-btn a{
    width: 100%;
  }
  .--large .top-intro-btn a{
    width: 100%;
  }
  .top-intro-btn-list{

  }
  .top-intro-btn-list__item{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-btn-list__item:first-child{
    margin-top: 0;
  }
  .top-intro-box-desc .top-intro-btn-list__item{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc .top-intro-btn-list__item:first-child{
    margin-top: 0;
  }
  .top-intro-box-desc .--small .top-intro-btn-list__item{

  }
  .top-intro-box-button-list-02 > .c-btn{
    width:100% !important;
  }
  .top-intro-btn-body{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(56 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
    background: var(--main-color-page);
    color: var(--color-white);
    overflow: hidden;
  }
  .top-intro-btn a[disabled] .top-intro-btn-body{
    background: var(--color-gray_400);
  }
  .--consumer .top-intro-btn-body{
    background: var(--main-color-page);
  }
  .--business .top-intro-btn-body{
    background: var(--accent-color-page);
  }
  .top-intro-btn.--portal .top-intro-btn-body{
    background: #3DA9A9;
  }
  .--login .top-intro-btn-body {
    background: var(--main-color);
  }
  .--login .top-intro-btn-body i{
    mask-size: contain;
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-image: url(/assets/img/common/ico_header_login.svg);
    background: var(--color-white);
  }
  .--xxsmall .top-intro-btn-body{
    height: calc(56 / var(--font-size) * 1rem);
    max-width: calc(260 / var(--font-size) * 1rem);
    padding-left: calc(12 / var(--font-size) * 1rem);
    padding-right: calc(12 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .--xsmall .top-intro-btn-body{
    height: calc(48 / var(--font-size) * 1rem);
    padding-left: calc(12 / var(--font-size) * 1rem + 14 / var(--font-size) * 1rem + 14 / var(--font-size) * 1rem);
    padding-right: calc(12 / var(--font-size) * 1rem + 14 / var(--font-size) * 1rem + 14 / var(--font-size) * 1rem);
  }
  .--small .top-intro-btn-body{
    height: calc(56 / var(--font-size) * 1rem);
  }
  .--large .top-intro-btn-body{
    height: calc(72 / var(--font-size) * 1rem);
  }
  .top-intro-btn .--new-house a:hover,
  .top-intro-btn .--reform a:hover{
    opacity: 1;
  }
  .top-intro-btn .--new-house a:hover .top-intro-btn-body:before,
  .top-intro-btn .--reform a:hover .top-intro-btn-body:before {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .--new-house .top-intro-btn-body:before,
  .--reform .top-intro-btn-body:before {
    content: "";
    display: block;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s ease;
  }
  .--new-house a[disabled] .top-intro-btn-body:before,
  .--reform a[disabled] .top-intro-btn-body:before {
    content: none;
  }
  .--new-house .top-intro-btn-body:before,
  .--reform .top-intro-btn-body:before{

  }
  .--new-house .top-intro-btn-body > *,
  .--reform .top-intro-btn-body > * {
    z-index: 1;
  }
  .--new-house .top-intro-btn-body:before{
    background: var(--main-button-bg-color-new-house-grade-color);
  }
  .--reform .top-intro-btn-body:before{
    background: var(--main-button-bg-color-reform-grade-color);
  }
  .--consumer .--type02 .top-intro-btn-body{
    background: var(--sub-color);
    color: var(--main-color-page);
  }
  .--business .--type02 .top-intro-btn-body{
    background: var(--sub-accent-color);
    color: var(--accent-color-page);
  }
  .top-intro-btn__label{
    display: inline-block;
    vertical-align: top;
    line-height: calc(20.4 / 14 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .--xsmall .top-intro-btn__label{
    font-size: calc(12 / var(--font-size) * 1rem);
  }
  /** 登録の手順ボタン **/
  .top-intro-btn.--about-entry-flow .top-intro-btn-body{
    background-color: var(--color-white);
    border: calc(1 / var(--font-size)* 1rem) solid var(--sub-border-color);
    height:calc(49 / var(--font-size) * 1rem);
  }
  .top-intro-btn.--about-entry-flow .top-intro-btn__label {
    color:var(--color-black);
    line-height: calc(18.4 / 12* 1);
    font-size: calc(12 / var(--font-size)* 1rem);
    font-weight: 700;
    margin-right: calc(22 / var(--font-size)* 1rem);
  }
  .top-intro-btn.--about-entry-flow .top-intro-btn-body i{
    width: calc(14 / var(--font-size)* 1rem);
    height: calc(14 / var(--font-size)* 1rem);
    margin-right: calc(11 / var(--font-size)* 1rem);
  }
  .top-intro-btn.--about-entry-flow .top-intro-btn-body svg{
    fill: var(--color-gray_600);
  }
  /** **/
  .top-intro-btn__label > span{
    font-size: calc(10 / 14 * 100%);
  }
  .top-intro-btn-body i{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
    margin: auto 0;
    margin-right: calc(20 / var(--font-size) * 1rem);
  }
  .top-intro-btn a[disabled] .top-intro-btn-body i{
    display: none;
  }
  .--xsmall .top-intro-btn-body i{
    width: calc(14 / var(--font-size) * 1rem);
    height: calc(14 / var(--font-size) * 1rem);
    margin-right: calc(14 / var(--font-size) * 1rem);
  }
  .top-intro-btn-body i svg{
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: contain;
    fill: var(--color-white);
  }
  .--consumer .--type02 .top-intro-btn-body i svg{
    fill: var(--main-color-page);
  }
  .--business .--type02 .top-intro-btn-body i svg{
    fill: var(--accent-color-page);
  }
  .top-intro-section--lv1{
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv1:first-child{
    margin-top: 0;
  }
  .top-intro-section--lv1__inner{

  }
  .top-intro-section--lv1-heading{
    text-align: center;
  }
  .top-intro-section--lv1-heading__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(22 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .--consumer .top-intro-section--lv1-heading__label{
    color: var(--main-color-page);
  }
  .--business .top-intro-section--lv1-heading__label{
    color: var(--accent-color-page);
  }
  .top-intro-section--lv1-body{
    margin-top: calc(22 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv1-body:first-child{
    margin-top: 0;
  }
  .top-intro-section--lv2{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv2:first-child{
    margin-top: 0;
  }
  .top-intro-section--lv2__inner{

  }
  .top-intro-section--lv2-heading{
    text-align: center;
  }
  .top-intro-section--lv2-heading__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv2-body{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-section--lv2-body:first-child{
    margin-top: 0;
  }
  .top-intro-box{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-box:first-child{
    margin-top: 0;
  }
  .top-intro-box__inner{
    padding-top: calc(32 / var(--font-size) * 1rem);
    padding-bottom: calc(32 / var(--font-size) * 1rem);
    padding-left: calc(20 / var(--font-size) * 1rem);
    padding-right: calc(20 / var(--font-size) * 1rem);
    border-radius: calc(10 / var(--font-size) * 1rem);
    background: var(--color-white);
    overflow: hidden;
  }
  .top-intro-box__inner.--lower{
    padding-bottom: calc(32 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv1{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv1:first-child{
    margin-top: 0;
  }
  .top-intro-box-section--lv1__inner{

  }
  .top-intro-box-section--lv1-heading{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top-intro-box-section--lv1-heading__ico{
    flex-shrink: 0;
    display: inline-block;
    vertical-align: top;
    width: calc(50 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv1-heading__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(12 / var(--font-size) * 1rem);
    font-size: calc(20 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-box-section--lv1-heading__label:first-child{
    margin-left: 0;
  }
  .top-intro-box-section--lv1-body{
    margin-top: calc(21 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv1-body:first-child{
    margin-top: 0;
  }
  .top-intro-box-section--lv2{
    margin-top: calc(35 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv2:first-child{
    margin-top: 0;
  }
  .top-intro-box-section--lv2__inner{

  }
  .top-intro-box-section--lv2-heading{
    text-align: center;
  }
  .top-intro-box-section--lv2-heading__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(18 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s {
  }
  .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s:before {
    width: calc(14 / var(--font-size) * 1rem);
    height: calc(14 / var(--font-size) * 1rem);
    border-radius: 0;
    transform: rotate(45deg);
    margin-right: calc(8 / var(--font-size) * 1rem);
  }
  .--consumer .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s:before {
    background-color: var(--main-color-page);
  }
  .--business .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s:before {
    background-color: var(--accent-color-page);
  }
  .top-intro-box-section--lv2-heading__label .u-text-decoration-circle--s > span {
    font-size: calc(11 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv2-heading__label.--button{
    width:100%;
    margin-top: calc(30 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv2-heading__button{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(24 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv2-body{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-box-section--lv2-body:first-child{
    margin-top: 0;
  }
  .top-intro-box-desc{

  }
  .top-intro-box-desc__term{
    text-align: center;
  }
  .top-intro-box-desc__term-box{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: calc(11 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc__term-box:has(.top-intro-box-desc__term__img) .top-intro-box-desc__term__label{
    text-align: left;
  }
  .top-intro-box-desc__term-box .top-intro-box-desc__term__img{
    width: calc(63 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc__term__label{
    display: inline-block;
    vertical-align: top;
    line-height: calc(25.6 / 18 * 1);
    font-size: calc(18 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-box-desc__defin{
    position: relative;
    margin-top: calc(16 / var(--font-size) * 1rem);
    padding-top: calc(24 / var(--font-size) * 1rem);
  }
  .top-intro-box-desc__defin::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
  }
  .top-intro-feature{
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .top-intro-feature:first-child{
    margin-top: 0;
  }
  .top-intro-feature__inner{
    overflow: hidden;
  }
  .top-intro-feature-container{

  }
  .top-intro-feature-img{
    text-align: center;
  }
  .top-intro-feature-img__label{
    display: inline-block;
    vertical-align: top;
    width: calc(88 / var(--font-size) * 1rem);
  }
  .top-intro-feature-content{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .top-intro-feature-content:first-child{
    margin-top: 0;
  }
  .top-intro-feature-desc{

  }
  .top-intro-feature-desc__term{
    text-align: center;
  }
  .top-intro-feature-desc__term__label{
    display: inline-block;
    vertical-align: top;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-feature-desc__defin{
    margin-top: calc(6 / var(--font-size) * 1rem);
    padding-left: calc(15 / var(--font-size) * 1rem);
    padding-right: calc(15 / var(--font-size) * 1rem);
  }
  .top-intro-feature-desc__defin:first-child{
    margin-top: 0;
  }
  .top-intro-feature-column{
    position: relative;
    padding: calc(32 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-feature-column::before{
    content: "";
    position: absolute;
    inset: 0;
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-color-page);
    border-radius: calc(18 / var(--font-size) * 1rem);
    pointer-events: none;
  }
  .--consumer .top-intro-feature-column::before{
    border-color: var(--main-color-page);
  }
  .--business .top-intro-feature-column::before{
    border-color: var(--accent-color-page);
  }
  .top-intro-feature-column__parts{
    margin-top: calc(33 / var(--font-size) * 1rem);
  }
  .top-intro-feature-column__parts:first-child{
    margin-top: 0;
  }
  .top-intro-lower{
    position: relative;
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .top-intro-lower:first-child{
    margin-top: 0;
  }
  .top-intro-lower__inner{
    position: relative;
    border-radius: calc(10 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .--consumer .top-intro-lower-btn-list{
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-lower-btn-list__item__inner{
    background: var(--color-white);
    border: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
    border-radius: calc(18 / var(--font-size) * 1rem);
    background: var(--color-white);
  }
  .top-intro-lower-btn{

  }
  .top-intro-lower-btn-list__item__title{
    margin-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-lower-btn-list__item__title__label{
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: calc(24 / 16 * 1);
    text-align: center;
  }
  .top-intro-lower-btn a{
    display: inline-block;
    vertical-align: top;
    width: 100%;
  }
  .top-intro-lower-btn-list{

  }
  .top-intro-lower-btn-list__item{
    position: relative;
  }
  /* .top-intro-lower-btn-list__item::before{
    content: '';
    position: absolute;
    top: 0;
    left:0;
    right:0;
    width: calc(100% - calc(50 / var(--font-size) * 1rem));
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
    margin:0 auto;
  } */
  .top-intro-lower-btn-list__item:first-child::before{
    content: none;
  }
  .top-intro-lower-btn-list__item:has(a[disabled]) {
    position: relative;
    overflow: visible;
  }
  .top-intro-lower-btn-list__item a[disabled] {
    pointer-events: none;
  }
  .top-intro-lower-btn-list__item a[disabled] {
    opacity: 0.6;
    filter: grayscale(1);
  }
  .top-intro-lower-btn-body{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-height: calc(16 / var(--font-size) * 2rem + 36 / var(--font-size) * 1rem);
    height: 100%;
    padding-top: calc(16 / var(--font-size) * 1rem);
    padding-bottom: calc(16 / var(--font-size) * 1rem);
    padding-left: calc(23 / var(--font-size) * 1rem);
    padding-right: calc(23 / var(--font-size) * 1rem + 20 / var(--font-size) * 1rem + 20 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
    background: var(--color-white);
    box-shadow: 0 0 calc(6 / var(--font-size) * 1rem) rgb(0 0 0 / .1);
    transform: translate3d(0, 0, 0);
  }
  .top-intro-lower-btn__ico{
    flex-shrink: 0;
    display: inline-block;
    vertical-align: top;
    width: calc(36 / var(--font-size) * 1rem);
  }
  .top-intro-lower-btn__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(18 / var(--font-size) * 1rem);
    line-height: calc(25.6 / 18 * 1);
    font-size: calc(18 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-intro-lower-btn__label:first-child{
    margin-left: 0;
  }
  .top-intro-lower-btn-body i{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
    margin: auto 0;
    margin-right: calc(23 / var(--font-size) * 1rem);
    background-color: var(--color-white);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-lower-btn-body i svg{
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: contain;
    fill: var(--main-color-page);
  }
  .--consumer .top-intro-lower-btn i::before{
    content: "";
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    background-color: var(--main-strong-color-jigyo01);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .--consumer .top-intro-lower-btn svg{
    fill: var(--sub-color-jigyo01-03);
    z-index: 1;
    position: relative;
  }
  .--business .top-intro-lower-btn i::before{
    content: "";
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    background-color: var(--accent-color-jigyo01);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .--business .top-intro-lower-btn svg{
    fill: var(--accent-sub-color-jigyo01-02);
    z-index: 1;
    position: relative;
  }
  .top-intro-bnr{

  }
  .top-intro-bnr a{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
  }
  .top-intro-bnr-list{

  }
  .top-intro-bnr-list__item{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-intro-bnr-list__item:first-child{
    margin-top: 0;
  }
  .top-intro-bnr-body{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: calc(72 / var(--font-size) * 1rem);
    padding-left: calc(16 / var(--font-size) * 1rem);
    padding-right: calc(14 / var(--font-size) * 1rem + 20 / var(--font-size) * 1rem + 15 / var(--font-size) * 1rem);
  }
  .top-intro-bnr-body::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: calc(1 / var(--font-size) * 1rem) solid #D4D4D4;
    border-radius: calc(18 / var(--font-size) * 1rem);
    background: var(--color-white);
    overflow: hidden;
  }
  .top-intro-bnr-body > *{
    position: relative;
    z-index: 1;
  }
  .top-intro-bnr__ico{
    flex-shrink: 0;
    display: inline-block;
    vertical-align: top;
    width: calc(39 / var(--font-size) * 1rem);
    height: calc(39 / var(--font-size) * 1rem);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .--portal .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_portal.png);
  }
  .--kosodate .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_mirai.png);
  }
  .--mado .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_mado.png);
  }
  .--kyutou .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_kyutou.png);
  }
  .--chintai .top-intro-bnr__ico{
    background-image: url(/assets/img/common/ico_chintai.png);
  }
  .top-intro-bnr__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(16 / var(--font-size) * 1rem);
    line-height: calc(25.6 / 20 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: -0.025em;
  }
  .top-intro-bnr__label:first-child{
    margin-left: 0;
  }
  .top-intro-bnr__label > span{
    font-size: calc(12 / 14 * 100%);
  }
  .top-intro-bnr-body i{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(25 / var(--font-size) * 1rem);
    height: calc(25 / var(--font-size) * 1rem);
    margin: auto 0;
    margin-right: calc(15 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-bnr-body i::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% - calc(2 / var(--font-size) * 1rem));
    height: calc(100% - calc(2 / var(--font-size) * 1rem));
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .--portal .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo01);
  }
  .--kosodate .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo02);
  }
  .--mado .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo03);
  }
  .--kyutou .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo04);
  }
  .--chintai .top-intro-bnr-body i::before{
    background-color : var(--main-color-jigyo05);
  }
  .top-intro-bnr-body i svg{
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: contain;
    fill: var(--color-white);
    z-index: 1;
    position: relative;
  }
  .--portal .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo01-02);
  }
  .--kosodate .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo02-02);
  }
  .--mado .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo03-02);
  }
  .--kyutou .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo04-02);
  }
  .--chintai .top-intro-bnr-body svg{
    fill : var(--sub-color-jigyo05-02);
  }

  .top-intro-feature-table{
  }
  .top-intro-feature-table.u-hide-tab-pc + .top-intro-feature-table.u-hide-tab-pc{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .top-intro-feature-table__inner{
    position: relative;
    padding: calc(20 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
    border-radius: calc(18 / var(--font-size) * 1rem);
  }
  .top-intro-feature-table__inner::before{
    content: "";
    position: absolute;
    inset: 0;
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-color-page);
    border-radius: calc(18 / var(--font-size) * 1rem);
    pointer-events: none;
  }
  .--consumer .top-intro-feature-table__inner::before{
    border-color: var(--main-color);
  }
  .--business .top-intro-feature-table__inner::before{
    border-color: var(--main-accent-color);
  }
  .top-intro-feature-table-list{
  }
  .top-intro-feature-table-list__item{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .top-intro-feature-table-list__item .top-intro-btn__note{
    margin-top: calc(4 / var(--font-size) * 1rem);
  }
  .top-intro-feature-table-list__item + .top-intro-feature-table-list__item{
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .top-intro-feature-table-list__inner{
    padding: calc(10 / var(--font-size) * 1rem);
    border-radius: calc(10 / var(--font-size) * 1rem);
  }
  .top-intro-feature-table-list__inner.--new-house{
    background: var(--accent-sub-color-jigyo01);
  }
  .top-intro-feature-table-list__inner.--gx{
    background: var(--sub-color-jigyo01-02);
  }
  .top-table-heading{
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: calc(10 / var(--font-size) * 1rem);
    margin-bottom: calc(13 / var(--font-size) * 1rem);
  }
  .--consumer .top-table-heading{
    background-color: var(--sub-color-02);
    color: var(--main-color);
  }
  .--business .top-table-heading{
    background-color: var(--sub-accent-color-02);
    color: var(--main-accent-color);
  }
  .top-table-heading__inner{
    width: 100%;
    height: 100%;
    padding: calc(6 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top-table-heading__label{
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: calc(22.4 / 14 * 1);
    flex-shrink: 0;
  }
  .top-intro-table-heading{
    width: 100%;
    min-height: calc(50 / var(--font-size) * 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(5 / var(--font-size) * 1rem);
    margin-top: calc(8 / var(--font-size) * 1rem);
    margin-bottom: calc(16 / var(--font-size) * 1rem);
    padding: calc(6 / var(--font-size) * 1rem) 0 calc(6 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
    position: relative;
  }
  .top-intro-table-heading__label{
    font-size: calc(16 / var(--font-size) * 1rem);
    color: var(--color-white);
    font-weight: 700;
    line-height: calc(18.4 / 16 * 1);
    text-align: center;
  }
  .top-intro-table-heading.--new-house{
    background-color: var(--accent-color-jigyo01);
  }
  .top-intro-table-heading.--gx{
    background-color: var(--main-color-jigyo01);
  }
  .top-intro-table-heading__ico{
    display: inline-block;
    width: calc(38 / var(--font-size) * 1rem);
    height: auto;
    position: absolute;
    left: calc(12 / var(--font-size) * 1rem);
    bottom: 0;
  }
  .top-intro-table-txt{
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 400;
    line-height: calc(22.4 / 14 * 1);
  }
  .top-intro-table-note{
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: calc(18.4 / 14 * 1);
    color: var(--main-color-jigyo01);
    text-align: center;
  }
  .top-intro-feature-table-list__item .top-intro-btn{
    margin-top: 0;
  }
  .top-intro-feature-table-list__item .top-intro-btn.--small .top-intro-btn-body{
    height: calc(56 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  TOP SECTION
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .top-section{
    padding-top: calc(64 / var(--font-size) * 1rem);
    color: var(--text-color);
  }
  .top-section p a{
    color: var(--text-color);
    text-decoration: underline;
  }
  .top-section p a:hover{
    text-decoration: none;
  }
  .top-section__inner{
    padding: 0 calc(70 / var(--font-size) * 1rem);
  }
  .l-frame-main:first-child .top-section__inner{
    max-width: calc(1164 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .top-section-heading{
    text-align: center;
  }
  .top-section-heading__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(28 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-section-body{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-section-body:first-child{
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .top-section{
    padding-top: calc(64 / var(--font-size) * 1rem);
    color: var(--text-color);
  }
  .top-section p a{
    color: var(--text-color);
    text-decoration: underline;
  }
  .top-section p a:hover{
    text-decoration: none;
  }
  .top-section__inner{
    padding: 0 calc(15 / var(--font-size) * 1rem);
  }
  .top-section-heading{
    text-align: center;
  }
  .top-section-heading__label{
    display: inline-block;
    vertical-align: top;
    font-size: calc(26 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-section-body{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-section-body:first-child{
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
  TOP OVERVIEW
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .top-overview{
    max-width: calc(1265 / var(--font-size)* 1rem);
    margin: 0 auto;
  }
  .top-overview .c-table--sp-stick > *{
    padding-left: calc(15 / var(--font-size) * 1rem);
    padding-right: calc(15 / var(--font-size) * 1rem);
  }
  .top-overview-lead{

  }
  .top-overview-lead-txt{
    text-align: center;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
  }
  .top-overview-feature{
    margin-top: calc(9 / var(--font-size) * 1rem);
  }
  .top-overview-feature:first-child{
    margin-top: 0;
  }
  .top-overview-feature-comment{
    margin-top: calc(9 / var(--font-size) * 1rem);
  }
  .top-overview-feature-comment:first-child{
    margin-top: 0;
  }
  .top-overview-feature-comment-txt{
    text-align: right;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(12 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table{
    margin-top: calc(15 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table:first-child{
    margin-top: 0;
  }
  .top-overview-feature-table__outer{
    overflow: hidden;
  }
  .top-overview-feature-table__inner{
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
    border-radius: calc(10 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .top-overview-feature-table-body{

  }
  .top-overview-feature-table__row{
    display: flex;
    justify-content: flex-start;
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
    background: var(--color-white);
  }
  .top-overview-feature-table__row:first-child{
    border-top: none;
  }
  .top-overview-feature-table__row.--reform{
    background: #FFF6F0;
  }
  .top-overview-feature-table__heading{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
  }
  .top-overview-feature-table__heading:first-child{
    width: calc(69 / var(--font-size) * 1rem);
    padding: calc(12 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__heading:nth-child(2){
    width: calc(338 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__heading:nth-child(3){
    width: calc(372 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__heading:nth-child(4){
    flex-grow: 1;
  }
  .top-overview-feature-table__row:first-child .top-overview-feature-table__heading{
    position: relative;
    height: calc(52 / var(--font-size) * 1rem);
    background: var(--sub-color-page);
  }
  .top-overview-feature-table__row:first-child .top-overview-feature-table__heading::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: calc(100% - calc(24 / var(--font-size) * 1rem));
    border-left: calc(1 / var(--font-size) * 1rem) solid var(--color-white);
    transform: translate3d(0, -50%, 0);
  }
  .top-overview-feature-table__row:first-child .top-overview-feature-table__heading:first-child::before{
    content: none;
  }
  .top-overview-feature-table__row:first-child .top-overview-feature-table__heading:not(:first-child){
    padding: calc(12 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__row:not(:first-child) .top-overview-feature-table__heading{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
  .top-overview-outline-feature-table__heading__label{
    display: inline-block;
    vertical-align: top;
    font-weight: 700;
  }
  .top-overview-feature-table__row:first-child .top-overview-outline-feature-table__heading__label{
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__row:not(:first-child) .top-overview-outline-feature-table__heading__label{
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
    letter-spacing: calc(400 / 800 * 1em);
    text-indent: calc(400 / 800 * 1em);
  }
  .top-overview-feature-table__row.--new-house .top-overview-outline-feature-table__heading__label{
    color: #0F9D72;
  }
  .top-overview-feature-table__row.--reform .top-overview-outline-feature-table__heading__label{
    color: #EE6432;
  }
  .top-overview-feature-table__data{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 calc(24 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .top-overview-feature-table__data::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: calc(100% - calc(24 / var(--font-size) * 1rem));
    border-left: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
    transform: translate3d(0, -50%, 0);
  }
  .top-overview-feature-table__data:first-child::before{
    content: none;
  }
  .top-overview-feature-table__data:last-child{
    padding-right: calc(16 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__data:nth-child(2){
    width: calc(338 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__data:nth-child(3){
    flex-grow: 1;
    flex-shrink: 1;
  }
  .top-overview-feature-table__data > *{
    width: 100%;
  }
  .top-overview-feature-table-card{
    position: relative;
  }
  .top-overview-feature-table-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
  }
  .top-overview-feature-table-card:first-child::before{
    content: none;
  }
  .top-overview-feature-table-card-body{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: calc(67 / var(--font-size) * 1rem + 4 / var(--font-size) * 1rem + 20 / var(--font-size) * 1rem);
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-overview-feature-table-card.--col2 .top-overview-feature-table-card-body{
    height: calc(67 / var(--font-size) * 2rem + 4 / var(--font-size) * 2rem + 20 / var(--font-size) * 2rem);
  }
  .top-overview-feature-table-card__ico{
    display: inline-block;
    vertical-align: top;
    width: calc(24 / var(--font-size) * 1rem);
    height: calc(24 / var(--font-size) * 1rem);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .--portal .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_portal.png);
  }
  .--kosodate .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_mirai.png);
  }
  .--mado .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_mado.png);
  }
  .--kyutou .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_kyutou.png);
  }
  .--chintai .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_chintai.png);
  }
  .top-overview-feature-table-card__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(10 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-card__label:first-child{
    margin-left: 0;
  }
  .top-overview-feature-table-card__label > span{
    font-size: calc(10 / 14 * 100%);
  }
  .top-overview-feature-table-progress{
    position: relative;
  }
  .top-overview-feature-table-progress::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
  }
  .top-overview-feature-table-progress:first-child::before{
    content: none;
  }
  .top-overview-feature-table-progress.--kosodate02::before,
  .top-overview-feature-table-progress.--mado02::before,
  .top-overview-feature-table-progress.--kyutou02::before,
  .top-overview-feature-table-progress.--chintai02::before{
    border-top: calc(1 / var(--font-size) * 1rem) dashed var(--main-border-color);
  }
  .top-overview-feature-table-progress-desc{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: calc(67 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-progress-desc__term{
    flex-shrink: 0;
    width: calc(372 / var(--font-size) * 1rem - 24 / var(--font-size) * 1rem);
    padding-right: calc(24 / var(--font-size) * 1rem);
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-progress-desc__term__label{
    display: inline-block;
    vertical-align: top;
  }
  .top-overview-feature-table-progress-desc__defin{
    flex-grow: 1;
    padding-top: calc(16 / var(--font-size) * 1rem);
    padding-bottom: calc(16 / var(--font-size) * 1rem);
    padding-left: calc(36 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-progress-body{
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: calc(35 / var(--font-size) * 1rem);
    border-radius: calc(5 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .top-overview-feature-table-progress-body::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(5 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-progress.--kosodate01 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo02-gx);
    color: var(--main-color-jigyo02-gx);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo02-gx);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kosodate01 .top-overview-feature-table-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-table-bg-color-gx);
  }
  .top-overview-feature-table-progress.--kosodate02 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo02);
    color: var(--main-color-jigyo02);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo02);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kosodate02 .top-overview-feature-table-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo02);
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress-body{
    background: var(--bg-sub-color-jigyo02);
    color: var(--accent-color-jigyo02);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-sub-color-jigyo02);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--bg-sub-color-jigyo02-02);
  }
  .top-overview-feature-table-progress.--mado01 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo03);
    color: var(--main-color-jigyo03);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo03);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--mado01 .top-overview-feature-table-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo03);
  }
  .top-overview-feature-table-progress.--kyutou01 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo04);
    color: var(--main-color-jigyo04);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo04);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kyutou01 .top-overview-feature-table-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo04);
  }
  .top-overview-feature-table-progress.--kyutou02 .top-overview-feature-table-progress-body{
    background: var(--bg-sub-color-jigyo04);
    color: var(--accent-color-jigyo04);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-sub-color-jigyo04);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kyutou02 .top-overview-feature-table-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--accent-sub-color-jigyo04);
  }
  .top-overview-feature-table-progress.--chintai01 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo05);
    color: var(--main-color-jigyo05);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo05);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--chintai01 .top-overview-feature-table-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo05);
  }
  .top-overview-feature-teable-progress-body > *{
    position: relative;
    z-index: 1;
  }
  .top-overview-feature-table-progress__bar{
    position: relative;
    display: inline-block;
    vertical-align: top;
    flex-grow: 1;
    width: 100%;
  }
  .top-overview-feature-table-progress__bar > span{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
  }
  .top-overview-feature-table-progress.--kosodate01 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo02-gx);
  }
  .top-overview-feature-table-progress.--kosodate02 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo02);
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress__bar > span{
    background: var(--accent-color-jigyo02);
  }
  .top-overview-feature-table-progress.--mado01 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo03);
  }
  .top-overview-feature-table-progress.--kyutou01 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo04);
  }
  .top-overview-feature-table-progress.--kyutou02 .top-overview-feature-table-progress__bar > span{
    background: var(--accent-color-jigyo04);
  }
  .top-overview-feature-table-progress.--chintai01 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo05);
  }
  .top-overview-feature-table-progress__label{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    line-height: calc(25.6 / 20 * 1);
    font-size: calc(20 / var(--font-size) * 1rem);
    font-weight: 700;
    white-space: nowrap;
    transform: translate3d(-50%, -50%, 0);
  }
  .top-overview-feature-table-progress__label > span{
    font-size: calc(14 / 20 * 100%);
  }
  .top-overview-feature-table-progress-txt{
    margin-top: calc(4 / var(--font-size) * 1rem);
    line-height: calc(20 / 12 * 1);
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-overview-feature-table-progress-txt:first-child{
    margin-top: 0;
  }
  .top-overview-feature-table-progress.--kosodate01 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo02-gx);
  }
  .top-overview-feature-table-progress.--kosodate02 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo02);
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress-txt a{
    color: var(--accent-color-jigyo02);
  }
  .top-overview-feature-table-progress.--mado01 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo03);
  }
  .top-overview-feature-table-progress.--kyutou01 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo04);
  }
  .top-overview-feature-table-progress.--kyutou02 .top-overview-feature-table-progress-txt a{
    color: var(--accent-color-jigyo04);
  }
  .top-overview-feature-table-progress.--chintai01 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo05);
  }
  .top-overview-feature-note{
    margin-top: calc(18 / var(--font-size) * 1rem);
  }
  .top-overview-feature-note:first-child{
    margin-top: 0;
  }
  .top-overview-feature-note-txt{
    padding-left: 1.5em;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(12 / var(--font-size) * 1rem);
    text-indent: 1.5em;
  }
  .top-overview-feature-note.--num .top-overview-feature-note-txt{
    padding-left: 2em;
    text-indent: -2em;
  }
  .top-overview-feature-note-txt > *{
    text-indent: 0;
  }
  .top-overview-feature-note__label{
    display: inline-block;
    vertical-align: top;
    width: 1.5em;
  }
  .top-overview-feature-note.--num .top-overview-feature-note__label{
    width: 2em;
  }
}

@media all and (min-width: 768px) and (max-width: 950px) {
  .top-overview-feature-table-card-body{
    height: calc(67 / var(--font-size) * 1rem + 4 / var(--font-size) * 1rem + 20 / var(--font-size) * 2rem);
  }
  .top-overview-feature-table-card.--col2 .top-overview-feature-table-card-body{
    height: calc(67 / var(--font-size) * 2rem + 4 / var(--font-size) * 2rem + 20 / var(--font-size) * 4rem);
  }
}

@media (min-width: 1025px) and (max-width: 1028px) {
  .top-overview-feature-table__data{
    justify-content: flex-start;
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress-desc {
  }
  .top-overview-feature-table-card.--kyutou .top-overview-feature-table-card-body{
    height:calc(201 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-card.--chintai .top-overview-feature-table-card-body{
  }
}

@media (min-width: 768px) and (max-width: 1025px) {
  .top-overview-feature-table__data{
    justify-content: flex-start;
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress-desc {
  }
  .top-overview-feature-table-card.--kyutou .top-overview-feature-table-card-body{
    height:calc(201 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-card.--chintai .top-overview-feature-table-card-body{
  }
}

@media (max-width: 767px) {
  .top-overview{

  }
  .top-overview .c-table--sp-stick > *{
    padding-left: calc(15 / var(--font-size) * 1rem);
    padding-right: calc(15 / var(--font-size) * 1rem);
  }
  .top-overview-lead{

  }
  .top-overview-lead-txt{
    text-align: center;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
  }
  .top-overview-feature{
    margin-top: calc(9 / var(--font-size) * 1rem);
  }
  .top-overview-feature:first-child{
    margin-top: 0;
  }
  .top-overview-feature-comment{
    margin-top: calc(9 / var(--font-size) * 1rem);
  }
  .top-overview-feature-comment:first-child{
    margin-top: 0;
  }
  .top-overview-feature-comment-txt{
    text-align: right;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(12 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table{
    margin-top: calc(15 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table:first-child{
    margin-top: 0;
  }
  .top-overview-feature-table__outer{

  }
  .top-overview-feature-table__outer.js-scrollable{
    margin-left: calc(-15 / var(--font-size)* 1rem);
    margin-right: calc(-15 / var(--font-size)* 1rem);
  }
  .top-overview-feature-table__inner{
    width: calc(1024 / var(--font-size) * 1rem);
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
    border-radius: calc(10 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .top-overview-feature-table__outer.js-scrollable .top-overview-feature-table__inner{
    margin-left: calc(15 / var(--font-size)* 1rem);
    margin-right: calc(15 / var(--font-size)* 1rem);
  }
  .top-overview-feature-table-body{

  }
  .top-overview-feature-table__row{
    display: flex;
    justify-content: flex-start;
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
    background: var(--color-white);
  }
  .top-overview-feature-table__row:first-child{
    border-top: none;
  }
  .top-overview-feature-table__row.--reform{
    background: #FFF6F0;
  }
  .top-overview-feature-table__heading{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
  }
  .top-overview-feature-table__heading:first-child{
    width: calc(69 / var(--font-size) * 1rem);
    padding: calc(12 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__heading:nth-child(2){
    width: calc(338 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__heading:nth-child(3){
    width: calc(372 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__heading:nth-child(4){
    flex-grow: 1;
  }
  .top-overview-feature-table__row:first-child .top-overview-feature-table__heading{
    position: relative;
    height: calc(52 / var(--font-size) * 1rem);
    background: var(--sub-color-page);
  }
  .top-overview-feature-table__row:first-child .top-overview-feature-table__heading::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: calc(100% - calc(24 / var(--font-size) * 1rem));
    border-left: calc(1 / var(--font-size) * 1rem) solid var(--color-white);
    transform: translate3d(0, -50%, 0);
  }
  .top-overview-feature-table__row:first-child .top-overview-feature-table__heading:first-child::before{
    content: none;
  }
  .top-overview-feature-table__row:first-child .top-overview-feature-table__heading:not(:first-child){
    padding: calc(12 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__row:not(:first-child) .top-overview-feature-table__heading{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
  .top-overview-outline-feature-table__heading__label{
    display: inline-block;
    vertical-align: top;
    font-weight: 700;
  }
  .top-overview-feature-table__row:first-child .top-overview-outline-feature-table__heading__label{
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(16 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__row:not(:first-child) .top-overview-outline-feature-table__heading__label{
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
    letter-spacing: calc(400 / 800 * 1em);
    text-indent: calc(400 / 800 * 1em);
  }
  .top-overview-feature-table__row.--new-house .top-overview-outline-feature-table__heading__label{
    color: #0F9D72;
  }
  .top-overview-feature-table__row.--reform .top-overview-outline-feature-table__heading__label{
    color: #EE6432;
  }
  .top-overview-feature-table__data{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 calc(24 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .top-overview-feature-table__data::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: calc(100% - calc(24 / var(--font-size) * 1rem));
    border-left: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
    transform: translate3d(0, -50%, 0);
  }
  .top-overview-feature-table__data:first-child::before{
    content: none;
  }
  .top-overview-feature-table__data:last-child{
    padding-right: calc(36 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__data:nth-child(2){
    width: calc(338 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table__data:nth-child(3){
    flex-grow: 1;
    flex-shrink: 1;
  }
  .top-overview-feature-table__data > *{
    width: 100%;
  }
  .top-overview-feature-table-card{
    position: relative;
  }
  .top-overview-feature-table-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
  }
  .top-overview-feature-table-card:first-child::before{
    content: none;
  }
  .top-overview-feature-table-card-body{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: calc(67 / var(--font-size) * 1rem + 4 / var(--font-size) * 1rem + 20 / var(--font-size) * 1rem);
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-overview-feature-table-card.--col2 .top-overview-feature-table-card-body{
    height: calc(67 / var(--font-size) * 2rem + 4 / var(--font-size) * 2rem + 20 / var(--font-size) * 2rem);
  }
  .top-overview-feature-table-card.--kyutou.--col2 .top-overview-feature-table-card-body{
    height: calc(67 / var(--font-size) * 2rem + 4 / var(--font-size) * 2rem + 20 / var(--font-size) * 3rem);
  }
  .top-overview-feature-table-card__ico{
    display: inline-block;
    vertical-align: top;
    width: calc(24 / var(--font-size) * 1rem);
    height: calc(24 / var(--font-size) * 1rem);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .--portal .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_portal.png);
  }
  .--kosodate .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_mirai.png);
  }
  .--mado .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_mado.png);
  }
  .--kyutou .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_kyutou.png);
  }
  .--chintai .top-overview-feature-table-card__ico{
    background-image: url(/assets/img/common/ico_chintai.png);
  }
  .top-overview-feature-table-card__label{
    display: inline-block;
    vertical-align: top;
    margin-left: calc(10 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-card__label:first-child{
    margin-left: 0;
  }
  .top-overview-feature-table-card__label > span{
    font-size: calc(10 / 14 * 100%);
  }
  .top-overview-feature-table-progress{
    position: relative;
  }
  .top-overview-feature-table-progress::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
  }
  .top-overview-feature-table-progress:first-child::before{
    content: none;
  }
  .top-overview-feature-table-progress.--kosodate02::before,
  .top-overview-feature-table-progress.--mado02::before,
  .top-overview-feature-table-progress.--kyutou02::before,
  .top-overview-feature-table-progress.--chintai02::before{
    border-top: calc(1 / var(--font-size) * 1rem) dashed var(--main-border-color);
  }
  .top-overview-feature-table-progress-desc{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: calc(67 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-progress-desc__term{
    flex-shrink: 0;
    width: calc(372 / var(--font-size) * 1rem - 24 / var(--font-size) * 1rem);
    padding-right: calc(24 / var(--font-size) * 1rem);
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-progress-desc__term__label{
    display: inline-block;
    vertical-align: top;
  }
  .top-overview-feature-table-progress-desc__defin{
    flex-grow: 1;
    padding-top: calc(16 / var(--font-size) * 1rem);
    padding-bottom: calc(16 / var(--font-size) * 1rem);
    padding-left: calc(36 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-progress-body{
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: calc(35 / var(--font-size) * 1rem);
    border-radius: calc(5 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .top-overview-feature-table-progress-body::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(5 / var(--font-size) * 1rem);
  }
  .top-overview-feature-table-progress.--kosodate01 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo02-gx);
    color: var(--main-color-jigyo02-gx);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo02-gx);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kosodate01 .top-overview-feature-table-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-table-bg-color-gx);
  }
  .top-overview-feature-table-progress.--kosodate02 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo02);
    color: var(--main-color-jigyo02);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo02);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kosodate02 .top-overview-feature-table-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo02);
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress-body{
    background: var(--bg-sub-color-jigyo02);
    color: var(--accent-color-jigyo02);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-sub-color-jigyo02);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--bg-sub-color-jigyo02-02);
  }
  .top-overview-feature-table-progress.--mado01 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo03);
    color: var(--main-color-jigyo03);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo03);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--mado01 .top-overview-feature-table-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo03);
  }
  .top-overview-feature-table-progress.--kyutou01 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo04);
    color: var(--main-color-jigyo04);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo04);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kyutou01 .top-overview-feature-table-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo04);
  }
  .top-overview-feature-table-progress.--kyutou02 .top-overview-feature-table-progress-body{
    background: var(--bg-sub-color-jigyo04);
    color: var(--accent-color-jigyo04);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-sub-color-jigyo04);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--kyutou02 .top-overview-feature-table-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--accent-sub-color-jigyo04);
  }
  .top-overview-feature-table-progress.--chintai01 .top-overview-feature-table-progress-body{
    background: var(--bg-color-jigyo05);
    color: var(--main-color-jigyo05);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo05);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-overview-feature-table-progress.--chintai01 .top-overview-feature-table-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo05);
  }
  .top-overview-feature-teable-progress-body > *{
    position: relative;
    z-index: 1;
  }
  .top-overview-feature-table-progress__bar{
    position: relative;
    display: inline-block;
    vertical-align: top;
    flex-grow: 1;
    width: 100%;
  }
  .top-overview-feature-table-progress__bar > span{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
  }
  .top-overview-feature-table-progress.--kosodate01 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo02-gx);
  }
  .top-overview-feature-table-progress.--kosodate02 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo02);
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress__bar > span{
    background: var(--accent-color-jigyo02);
  }
  .top-overview-feature-table-progress.--mado01 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo03);
  }
  .top-overview-feature-table-progress.--kyutou01 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo04);
  }
  .top-overview-feature-table-progress.--kyutou02 .top-overview-feature-table-progress__bar > span{
    background: var(--accent-color-jigyo04);
  }
  .top-overview-feature-table-progress.--chintai01 .top-overview-feature-table-progress__bar > span{
    background: var(--main-color-jigyo05);
  }
  .top-overview-feature-table-progress__label{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    line-height: calc(25.6 / 20 * 1);
    font-size: calc(20 / var(--font-size) * 1rem);
    font-weight: 700;
    white-space: nowrap;
    transform: translate3d(-50%, -50%, 0);
  }
  .top-overview-feature-table-progress__label > span{
    font-size: calc(14 / 20 * 100%);
  }
  .top-overview-feature-table-progress-txt{
    margin-top: calc(4 / var(--font-size) * 1rem);
    line-height: calc(20 / 12 * 1);
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-overview-feature-table-progress-txt:first-child{
    margin-top: 0;
  }
  .top-overview-feature-table-progress.--kosodate01 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo02-gx);
  }
  .top-overview-feature-table-progress.--kosodate02 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo02);
  }
  .top-overview-feature-table-progress.--kosodate03 .top-overview-feature-table-progress-txt a{
    color: var(--accent-color-jigyo02);
  }
  .top-overview-feature-table-progress.--mado01 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo03);
  }
  .top-overview-feature-table-progress.--kyutou01 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo04);
  }
  .top-overview-feature-table-progress.--kyutou02 .top-overview-feature-table-progress-txt a{
    color: var(--accent-color-jigyo04);
  }
  .top-overview-feature-table-progress.--chintai01 .top-overview-feature-table-progress-txt a{
    color: var(--main-color-jigyo05);
  }
  .top-overview-feature-note{
    margin-top: calc(18 / var(--font-size) * 1rem);
  }
  .top-overview-feature-note:first-child{
    margin-top: 0;
  }
  .top-overview-feature-note-txt{
    padding-left: 1.5em;
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(12 / var(--font-size) * 1rem);
    text-indent: 1.5em;
  }
  .top-overview-feature-note.--num .top-overview-feature-note-txt{
    padding-left: 2em;
    text-indent: -2em;
  }
  .top-overview-feature-note-txt > *{
    text-indent: 0;
  }
  .top-overview-feature-note__label{
    display: inline-block;
    vertical-align: top;
    width: 1.5em;
  }
  .top-overview-feature-note.--num .top-overview-feature-note__label{
    width: 2em;
  }
}

.top-visual-attention-news.--hidden {
  display: none;
}

.top-visual-attention-news.--show {
  display: block;
}
@media screen and (min-width: 768px), print {
    /* attention-news */
    .top-visual-content:has(.top-visual-attention-news.--show){
      padding-top: calc(144 / var(--font-size) * 1rem);
    }
  .top-visual-attention-news{
    position: absolute;
    top: calc(15 / var(--font-size) * 1rem);
    width: 100%;
    border: calc(2 / var(--font-size) * 1rem) solid var(--color-attention_1000);
    border-radius: calc(5 / var(--font-size) * 1rem);
    margin-bottom: calc(13 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news__inner{
    padding: 0 calc(12 / var(--font-size) * 1rem) 0 calc(6 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news__body{
    padding: calc(12 / var(--font-size) * 1rem) 0;
  }
  .top-visual-attention-news-column{
    display: flex;
    width: 100%;
    gap: calc(20 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news-column__parts:first-child{
    flex-shrink: 0;
  }
  .top-visual-attention-news-column__parts{
    display: flex;
    align-items: center;
    gap: calc(16 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news__date {
    flex-shrink: 0;
  }
  .top-visual-attention-news__date__label {
    font-weight: bold;
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news-heading{
    display: flex;
    align-items: center;
  }
  .top-visual-attention-news-heading__ico{
    --ico-width: 30;
    --ico-height: 30;
    margin-right: calc(4 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news-heading__ico img{
    width: calc(var(--ico-width) / var(--font-size) * 1rem);
    height: calc(var(--ico-height) / var(--font-size) * 1rem);
  }
  .top-visual-attention-news-heading__label{
    font-size: calc(17 / var(--font-size) * 1rem);
    line-height: 1.3;
    font-weight: bold;
    color: var(--color-attention_1000);
  }
  .top-visual-attention-news__content{
  }
  .top-visual-attention-news__link{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .top-visual-attention-news__label{
    font-size: calc(14 / var(--font-size) * 1rem);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-height: calc(32 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news__link svg{
    display: inline-block;
    flex-shrink: 0;
    vertical-align: top;
    width: calc(16 / var(--font-size) * 1rem);
    height: calc(16 / var(--font-size) * 1rem);
    margin-top: calc(5 / var(--font-size) * 1rem);
    margin-left: calc(8 / 14 * 1em);
    fill: var(--color-attention_1000);
  }

  /* 2/26 */
  body[data-top-attention="true"] .top-visual-attention-news{
    max-width: calc(1024 / var(--font-size)* 1rem);
    top: calc(35 / var(--font-size)* 1rem);
    left:0;
    right:0;
    margin:0 auto;
  }
  body[data-top-attention="true"] .top-visual-attention-news-column{
    justify-content: center;
    gap:0;
  }
  body[data-top-attention="true"] .top-visual-attention-news__inner{
    padding: 0;
  }
  body[data-top-attention="true"] .top-visual-attention-news__body{
    padding: 0;
    position: relative;
  }
  body[data-top-attention="true"] .top-visual-attention-news__link{
  padding: calc(12 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
  }
  body[data-top-attention="true"] .top-visual-attention-news__link svg{
    position: absolute;
    top:0;
    bottom:0;
    right:calc(18 / var(--font-size) * 1rem);
    margin:auto 0;
  }
  body[data-top-attention="true"] .top-visual-content {
    padding-top: calc(135 / var(--font-size)* 1rem);
  }
  /* */
}
@media screen and (max-width: 767px), print {
  .top-visual-content:has(.top-visual-attention-news.--show){
    padding-top: calc(15 / var(--font-size) * 1rem);
  }
  /* attention-news */
  .top-visual-attention-news{
    position: absolute;
    top: calc(15 / var(--font-size) * 1rem);
    width: 100%;
    border: calc(2 / var(--font-size) * 1rem) solid var(--color-attention_1000);
    border-radius: calc(5 / var(--font-size) * 1rem);
    margin-bottom: calc(13 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news__inner{
    padding: 0 calc(12 / var(--font-size) * 1rem) 0 calc(6 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news__body{
    padding: calc(8 / var(--font-size) * 1rem) 0 calc(10 / var(--font-size) * 1rem) 0;
  }
  .top-visual-attention-news-column{
    display: flex;
    width: 100%;
  }
  .top-visual-attention-news-column__parts:first-child{
    width: calc(94 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news-column__parts{
    width: calc(100% - calc(94 / var(--font-size) * 1rem));
  }
  .top-visual-attention-news-heading{
    display: flex;
    align-items: center;
  }
  .top-visual-attention-news-heading__ico{
    --ico-width: 30;
    --ico-height: 30;
    margin-right: calc(4 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news-heading__ico img{
    width: calc(var(--ico-width) / var(--font-size) * 1rem);
    height: calc(var(--ico-height) / var(--font-size) * 1rem);
  }
  .top-visual-attention-news-heading__label{
    font-size: calc(12 / var(--font-size) * 1rem);
    line-height: 1.3;
    font-weight: bold;
    color: var(--color-attention_1000);
  }
  .top-visual-attention-news__content{
  }
  .top-visual-attention-news__link{
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .top-visual-attention-news__label{
    font-size: calc(12 / var(--font-size) * 1rem);
    line-height: 1.3;
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: calc(32 / var(--font-size) * 1rem);
  }
  .top-visual-attention-news__link svg{
    display: inline-block;
    flex-shrink: 0;
    vertical-align: top;
    width: calc(16 / var(--font-size) * 1rem);
    height: calc(16 / var(--font-size) * 1rem);
    margin-top: calc(5 / var(--font-size) * 1rem);
    margin-left: calc(8 / 14 * 1em);
    fill: var(--color-attention_1000);
  }

  /* 2/26 */
  body[data-top-attention="true"] .top-visual-attention-news{
    top: calc(26 / var(--font-size)* 1rem);
    left:0;
    right:0;
    margin:0 auto;
  }
  body[data-top-attention="true"] .top-visual-attention-news-heading__ico{
    position: relative;
    top:calc(2 / var(--font-size)* 1rem);
  }
  body[data-top-attention="true"] .top-visual-attention-news-column{
    align-items: center;
    gap:0;
  }
  body[data-top-attention="true"] .top-visual-attention-news-column__parts:first-child {
    width: auto;
  }
  body[data-top-attention="true"] .top-visual-attention-news__inner{
    padding: 0;
  }
  body[data-top-attention="true"] .top-visual-attention-news__body{
    padding: 0;
    position: relative;
  }
  body[data-top-attention="true"] .top-visual-attention-news__link{
    padding: calc(8 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem);
  }
  body[data-top-attention="true"] .top-visual-attention-news__link svg{
    position: absolute;
    top:0;
    bottom:0;
    right:calc(12 / var(--font-size) * 1rem);
    margin:auto 0;
  }
  body[data-top-attention="true"] .top-visual-content {
    padding-top: calc(100 / var(--font-size)* 1rem);
  }
  /* */
}

/* --------------------------------------------------------------------------
  TOP GRAPH
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .top-graph-progress{
    position: relative;
  }
  .top-graph-progress::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
  }
  .top-graph-progress:first-child::before{
    content: none;
  }
  .top-graph-progress.--kosodate02::before,
  .top-graph-progress.--mado02::before,
  .top-graph-progress.--kyutou02::before,
  .top-graph-progress.--chintai02::before{
    border-top: calc(1 / var(--font-size) * 1rem) dashed var(--main-border-color);
  }
  .top-graph-progress-desc{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: calc(67 / var(--font-size) * 1rem);
  }
  .top-graph-progress-desc__term{
    flex-shrink: 0;
    width: calc(372 / var(--font-size) * 1rem - 24 / var(--font-size) * 1rem);
    padding-right: calc(24 / var(--font-size) * 1rem);
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-graph-progress-desc__term__label{
    display: inline-block;
    vertical-align: top;
  }
  .top-graph-progress-desc__defin{
    flex-grow: 1;
    padding-top: calc(16 / var(--font-size) * 1rem);
    padding-bottom: calc(16 / var(--font-size) * 1rem);
    padding-left: calc(36 / var(--font-size) * 1rem);
  }
  .top-graph-progress-body{
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: calc(35 / var(--font-size) * 1rem);
  }
  .top-graph-progress-body::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(5 / var(--font-size) * 1rem);
  }
  .top-graph-progress.--kosodate01 .top-graph-progress-body{
    background: var(--bg-color-jigyo02-gx);
    color: var(--main-color-jigyo02-gx);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo02-gx);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--kosodate01 .top-graph-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-table-bg-color-gx);
  }
  .top-graph-progress.--kosodate02 .top-graph-progress-body{
    background: var(--bg-color-jigyo02);
    color: var(--main-color-jigyo02);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo02);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--kosodate02 .top-graph-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo02);
  }
  .top-graph-progress.--kosodate03 .top-graph-progress-body{
    color: var(--accent-color-jigyo02);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-sub-color-jigyo02);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--gx .top-graph-progress-body{
    background: #fff;
    color: #64B06B;
    --x: 0 0 calc(1/ var(--font-size) * 1rem) #fff;
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--gx .top-graph-progress__label{
    color: #333;
  }
  .top-graph-progress.--gx .top-graph-progress__label .unit{
    color: #64B06B;
  }
  .top-graph-progress.--zeh .top-graph-progress-body{
    background: #fff;
    color: #77CC00;
    --x: 0 0 calc(1/ var(--font-size) * 1rem) #fff;
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--zeh .top-graph-progress__label{
    color: #333;
  }
  .top-graph-progress.--zeh .top-graph-progress__label .unit{
    color: #77CC00;
  }
 .top-graph-progress.--kosodate03 .top-graph-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--bg-sub-color-jigyo02-02);
  }
  .top-graph-progress.--mado01 .top-graph-progress-body{
    color: var(--main-color-jigyo03);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo03);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--mado01 .top-graph-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo03);
  }
  .top-graph-progress.--kyutou01 .top-graph-progress-body{
    color: var(--main-color-jigyo04);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo04);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--kyutou01 .top-graph-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo04);
  }
  .top-graph-progress.--kyutou02 .top-graph-progress-body{
    color: var(--accent-color-jigyo04);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-sub-color-jigyo04);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--kyutou02 .top-graph-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--accent-sub-color-jigyo04);
  }
  .top-graph-progress.--chintai01 .top-graph-progress-body{
    color: var(--main-color-jigyo05);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo05);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--chintai01 .top-graph-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo05);
  }
  .top-graph-progress-body > *{
    position: relative;
    z-index: 1;
  }
  .top-graph-progress__bar{
    position: relative;
    display: inline-block;
    vertical-align: top;
    flex-grow: 1;
    width: 100%;
  }
  .top-graph-progress__bar > span{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
  }
  .top-graph-progress.--kosodate01 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo02-gx);
  }
  .top-graph-progress.--kosodate02 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo02);
  }
  .top-graph-progress.--kosodate03 .top-graph-progress__bar > span{
    background: var(--accent-color-jigyo02);
  }
  .top-graph-progress.--gx .top-graph-progress__bar > span{
    background: #64B06B;
  }
  .top-graph-progress.--zeh .top-graph-progress__bar > span{
    background: #77CC00;
  }
  .top-graph-progress.--mado01 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo03);
  }
  .top-graph-progress.--kyutou01 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo04);
  }
  .top-graph-progress.--kyutou02 .top-graph-progress__bar > span{
    background: var(--accent-color-jigyo04);
  }
  .top-graph-progress.--chintai01 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo05);
  }
  .top-graph-progress__label{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    line-height: calc(25.6 / 20 * 1);
    font-size: calc(20 / var(--font-size) * 1rem);
    font-weight: 700;
    white-space: nowrap;
    transform: translate3d(-50%, -50%, 0);
    z-index:20;
  }
  .top-graph-progress__label > span{
    font-size: calc(14 / 20 * 100%);
  }
  .top-graph-progress__label .unit{
    font-size: calc(10 / var(--font-size) * 1rem) !important;
  }
  .top-graph-progress-txt{
    margin-top: calc(4 / var(--font-size) * 1rem);
    line-height: calc(20 / 12 * 1);
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-graph-progress-txt:first-child{
    margin-top: 0;
  }
  .top-graph-progress.--kosodate01 .top-graph-progress-txt a{
    color: var(--main-color-jigyo02-gx);
  }
  .top-graph-progress.--kosodate02 .top-graph-progress-txt a{
    color: var(--main-color-jigyo02);
  }
  .top-graph-progress.--kosodate03 .top-graph-progress-txt a{
    color: var(--accent-color-jigyo02);
  }
  .top-graph-progress.--mado01 .top-graph-progress-txt a{
    color: var(--main-color-jigyo03);
  }
  .top-graph-progress.--kyutou01 .top-graph-progress-txt a{
    color: var(--main-color-jigyo04);
  }
  .top-graph-progress.--kyutou02 .top-graph-progress-txt a{
    color: var(--accent-color-jigyo04);
  }
  .top-graph-progress.--chintai01 .top-graph-progress-txt a{
    color: var(--main-color-jigyo05);
  }








  .top-graph {
    padding-top: calc(64 / var(--font-size) * 1rem);
    color: var(--text-color);
  }
  .top-graph__lead-txt{
    text-align: center;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-graph__inner {
    max-width: calc(1024 / var(--font-size) * 1rem);
    width:100%;
    height:100%;
    margin: 0 auto;
  }
  .top-graph__head{
    font-size:calc(var(--text-size-xs) / var(--font-size) * 1rem);
    text-align:right;
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .top-graph__box-wrap{
    display: flex;
    gap:calc(17 / var(--font-size) * 1rem);
    margin-top: calc(13 / var(--font-size) * 1rem);
  }
  .top-graph__box{
    max-width: calc(504 / var(--font-size) * 1rem);
    width:100%;
  }
  .top-graph__box__header{
    background-color: #0F9D72;
    padding:calc(8 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
    border-radius:calc(10 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem) 0 0;
    height:calc(52 / var(--font-size) * 1rem);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:calc(22 / var(--font-size) * 1rem);
  }
  .top-graph__box__header__title{
    color:var(--color-white);
    font-size:calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 700;
    text-align: center;
    max-width: calc(186 / var(--font-size) * 1rem);
    width:100%;
  }
  .top-graph__box__header__category{
    background-color: var(--color-white);
    border-radius:calc(5 / var(--font-size) * 1rem);
    max-width: calc(250 / var(--font-size) * 1rem);
    width:100%;
    height:calc(35 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:calc(10 / var(--font-size) * 1rem);
  }
  .top-graph__box__header__category__icon{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    width:calc(24 / var(--font-size) * 1rem);
    height:calc(20 / var(--font-size) * 1rem);
  }
  .top-graph__box__header__category__icon.--kosodate{
    background-image: url(/assets/img/common/ico_mirai.png);
  }
  .top-graph__box__header__category__label{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-graph__box__inner{
    height:100%;
  }
  .top-graph__box__body{
    border:calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
    border-top:0;
    border-radius:0 0 calc(10 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem);
    overflow:hidden;
    height:calc(100% - calc(52 / var(--font-size) * 1rem));
  }
  .top-graph__box__column{
    position: relative;
  }
  .top-graph__box__column:before{
    content:"";
    border-top:calc(1 / var(--font-size) * 1rem) dashed var(--main-border-color);
    width:87%;
    height:calc(1 / var(--font-size) * 1rem);
    display: block;
    position: absolute;
    top:0;
    left:0;
    right:0;
    margin:0 auto;
  }
  .top-graph__box__column__body{
    padding:calc(16 / var(--font-size) * 1rem) calc(28 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__header{
    height:calc(44 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom: calc(5 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__header__text{
    color:var(--color-attention_1000);
    font-size:calc(var(--text-size-xs) / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.4;
    margin-left: calc(10 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__title{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    display: flex;
  }
  .top-graph__box__column__title:before{
    content:"";
    background-color: #64B06B;
    border-radius:100%;
    display: block;
    width:calc(14 / var(--font-size) * 1rem);
    height:calc(14 / var(--font-size) * 1rem);
    flex-shrink: 0;
    margin-right: calc(6 / var(--font-size) * 1rem);
    position: relative;
    top:calc(3.25 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__title.--type-02{
    padding:calc(3 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem);
    display: inline-block;
    margin-top: calc(-6 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__title.--type-02:before{
    display: inline-block;
    top: calc(1.25 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__title.--zeh.--type-02{
    background-color: #F3FDE7;
  }
  .top-graph__box__column__title.--gx.--type-02{
    background-color: #F3FBF5;
  }
  .top-graph__box__column.--text .top-graph__box__column__body{
    padding-top: calc(24 / var(--font-size) * 1rem);
    padding-bottom: calc(24 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__text{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    line-height: 1.599;
  }
  .top-graph__box__column:first-child:before{
    display: none;
  }
  .graph-box{
    position: relative;
  }
  .top-graph__box__column__title + .graph-box{
    margin-top: calc(9 / var(--font-size) * 1rem);
  }
  .graph-box__cushion{
    padding:calc(15.5 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem) calc(15.5 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    border-radius:calc(10 / var(--font-size) * 1rem);
  }
  .graph-box__title{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .graph-box__title__icon{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    display: block;
    width:calc(24 / var(--font-size) * 1rem);
    height:calc(20 / var(--font-size) * 1rem);
  }
  .graph-box__text{
    font-size:calc(var(--text-size-xxs) / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    margin-top: calc(4 / var(--font-size) * 1rem);
  }
  .graph-box__label{
    background-color: #BDBDBD;
    border-radius:calc(5 / var(--font-size) * 1rem);
    color:var(--color-white);
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    max-width: calc(104 / var(--font-size) * 1rem);
    width:100%;
    height:calc(40 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left: auto;
  }
  .graph-box__link{
    font-size:calc(var(--text-size-xs) / var(--font-size) * 1rem);
    font-weight: 700;
    margin-top: calc(3 / var(--font-size) * 1rem);
  }

  /** **/

  .graph-box__component{
    margin:calc(10 / var(--font-size) * 1rem) 0;
  }
  .graph-box__component .top-graph-progress-body{
    background-color: var(--color-white);
    border:0 !important;
    border-radius:calc(5 / var(--font-size) * 1rem);
    height: calc(61 / var(--font-size) * 1rem);
  }
  .graph-box__component .top-graph-progress__bar{
    border:calc(1 / var(--font-size) * 1rem) solid #DDF4E0;
    border-radius: calc(5 / var(--font-size) * 1rem);
    overflow:hidden;
    position: absolute;
    top:0;
    left:0;
    height:100%;
    z-index:10;
  }
  .graph-box__component .top-graph-progress__bar.--stripe{
    z-index:5;
  }
  .graph-box__component .top-graph-progress__bar.--stripe > span{
    background-image:repeating-linear-gradient(-24deg, #F3FBF5, #F3FBF5 4px, #C7F0CE 0, #C7F0CE 5px);
    border:calc(1 / var(--font-size) * 1rem) solid #C7F0CE;
    border-right:calc(1.5 / var(--font-size) * 1rem) dashed #64B06B;
  }
  .graph-box__component.top-graph-progress::before{
    display: none;
  }
  .graph-box__component .top-graph-progress__label{
    font-size: calc(30 / var(--font-size) * 1rem);
  }
  .graph-box__component .top-graph-progress__label > span {
    font-size: calc(21 / var(--font-size) * 1rem);
  }

  .graph-box.--kosodate .graph-box__component .top-graph-progress__bar{
    border-color:#DEEFFC;
  }
  .graph-box.--mado .graph-box__component .top-graph-progress__bar{
    border-color:#DEEFFC;
  }
  .graph-box.--kyuto .graph-box__component .top-graph-progress__bar{
    border-color:#FFEAA1;
  }
  .graph-box.--tekkyokasan .graph-box__component .top-graph-progress__bar{
    border-color:#FEE1E1;
  }
  .graph-box.--chintai .graph-box__component .top-graph-progress__bar{
    border-color:#F2DFFC;
  }

  .graph-box.--tekkyokasan:before {
    content: "";
    border-top: calc(1 / var(--font-size) * 1rem) dashed var(--main-border-color);
    width: 93%;
    height: calc(1 / var(--font-size) * 1rem);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  /** **/

  .graph-box.--gx .graph-box__title{
    color:#64B06B;
  }
  .graph-box.--gx .graph-box__cushion{
    background-color: #F3FBF5;
  }
  .graph-box.--gx .graph-box__link a{
    color: #64B06B;
  }

  .top-graph__box__column__title.--zeh:before{
    background-color: #77CC00;
  }
  .graph-box.--zeh .graph-box__title{
    color:#77CC00;
  }
  .graph-box.--zeh .graph-box__cushion{
    background-color: #F3FDE7;
  }
  .graph-box.--zeh .graph-box__link a{
    color: #77CC00;
  }

  .graph-box.--disable .graph-box__cushion__body{
    display:flex;
    align-items:center;
  }
  .graph-box.--disable .graph-box__title{
    color:#362C2A;
  }
  .graph-box.--disable .graph-box__cushion{
    background-color: #EEEEEE;
  }
  .graph-box.--disable .graph-box__link a{
    color: #362C2A;
  }

  .graph-box.--end .graph-box__label{
    max-width: calc(149 / var(--font-size) * 1rem);
  }

  .graph-box.--kosodate .graph-box__title{
  }
  .graph-box.--kosodate .graph-box__cushion{
    background-color: #F3FDE7;
  }
  .graph-box.--kosodate .graph-box__link a{
    color: #4D98D1;
  }
  .graph-box.--kosodate .graph-box__title__icon{
    background-image: url(/assets/img/common/ico_mirai.png);
  }

  .graph-box.--mado .graph-box__title{
  }
  .graph-box.--mado .graph-box__cushion{
    background-color: #F5FCFF;
  }
  .graph-box.--mado .graph-box__link a{
    color: #3FAAFA;
  }
  .graph-box.--mado .graph-box__title__icon{
    background-image: url(/assets/img/common/ico_mado.png);
  }


  .graph-box.--kyuto .graph-box__title{
  }
  .graph-box.--kyuto .graph-box__cushion{
    background-color: #FFFCE3;
  }
  .graph-box.--kyuto .graph-box__link a{
    color: #FC9534;
  }
  .graph-box.--kyuto .graph-box__title__icon{
    background-image: url(/assets/img/common/ico_kyutou.png);
  }
  .graph-box.--kyuto .graph-box__cushion{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }
  .graph-box.--tekkyokasan .graph-box__cushion{
    border-top-left-radius:0;
    border-top-right-radius:0;
  }
  .graph-box.--tekkyokasan .graph-box__link a{
    color: #FC6A83;
  }

  .graph-box.--chintai .graph-box__title{
  }
  .graph-box.--chintai .graph-box__cushion{
    background-color: #F9F3FC;
  }
  .graph-box.--chintai .graph-box__link a{
    color: #AD5FD6;
  }
  .graph-box.--chintai .graph-box__title__icon{
    background-image: url(/assets/img/common/ico_chintai.png);
  }

  .top-graph__box__column.--border-solid:before {
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
  }

  /* 第3期 */

  .graph-box.--gx.--third .top-graph-progress__label,
  .graph-box.--gx.--third-period .top-graph-progress__label{
    color:#64B06B;
  }
  .graph-box.--zeh.--third .top-graph-progress__label,
  .graph-box.--zeh.--third-period .top-graph-progress__label{
    color:#77CC00;
  }
  .graph-box.--third .top-graph-progress__label,
  .graph-box.--third-period .top-graph-progress__label{
    margin-left: 0 !important;
  }
  .graph-box.--third .graph-box__component,
  .graph-box.--third-period .graph-box__component{
    width:100% !important;
    margin: calc(11 / var(--font-size) * 1rem) auto calc(9 / var(--font-size) * 1rem) auto !important;
  }

  .top-graph__bottom{
    margin-top:calc(20 / var(--font-size) * 1rem);
  }

  /** **/

  .progress-unitlabel{
    text-align: center;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top:calc(-15 / var(--font-size) * 1rem);
    left:calc(-7 / var(--font-size) * 1rem);
    height: calc(70 / var(--font-size) * 1rem);
  }
  .progress-unitlabel.--01{
    text-align:left;
    width:calc(46 / var(--font-size) * 1rem);
  }
  .progress-unitlabel.--02{
    width:calc(50 / var(--font-size) * 1rem);
    margin-left: calc(-25 / var(--font-size) * 1rem);
  }
  .progress-unitlabel.--03{
    width:calc(46 / var(--font-size) * 1rem);
    left:92%;
  }
  .progress-unitlabel__top-unit{
    font-size: calc(var(--text-size-xxs) / var(--font-size) * 1rem);
    font-weight: 700;
    color:#362C2A;
  }
  .progress-unitlabel__bottom-unit{
    font-size: calc(var(--text-size-xxs) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .progress-unitlabel.--01 .progress-unitlabel__bottom-unit{
    margin-left:calc(-6 / var(--font-size) * 1rem);
  }


  .graph-box__component.--gx .top-graph-progress__bar.--stripe > span{
    background-image:repeating-linear-gradient(-24deg, #F3FBF5, #F3FBF5 4px, #C7F0CE 0, #C7F0CE 5px);
    border:calc(1 / var(--font-size) * 1rem) solid #C7F0CE;
    border-right:calc(1.5 / var(--font-size) * 1rem) dashed #64B06B;
  }
  .graph-box__component.--gx .top-graph-progress__bar.--stripe.--width100 > span {
    border-right: calc(1 / var(--font-size) * 1rem) solid #DDF4E0;
  }

  .graph-box__component.--zeh .top-graph-progress__bar{
    border-color:#E7F9BE;
  }
  .graph-box__component.--zeh .top-graph-progress__bar.--stripe > span {
    background-image: repeating-linear-gradient(-24deg, #F3FBF5, #F3FBF5 4px, #CDF292 0, #CDF292 5px);
    border: calc(1 / var(--font-size) * 1rem) solid #CDF292;
    border-right: calc(1.5 / var(--font-size) * 1rem) dashed #77CC00;
  }
  .graph-box__component.--zeh .top-graph-progress__bar.--stripe.--width100 > span {
    border-right: calc(1 / var(--font-size) * 1rem) solid #E7F9BE;
  }

  /** **/

  .top-graph__box.--new-house .graph-box__component {
    width:95%;
    margin: calc(20 / var(--font-size) * 1rem) auto;
  }
  .top-graph__box.--new-house .top-graph-progress-body {
    height:calc(35 / var(--font-size) * 1rem);
  }
  .top-graph__box.--new-house .graph-box__component .top-graph-progress__label {
    font-size: calc(20 / var(--font-size) * 1rem);
    margin-left: calc(23 / var(--font-size) * 1rem);
  }
  .top-graph__box.--new-house .graph-box__component .top-graph-progress__label > span {
    font-size: calc(14 / var(--font-size) * 1rem);
  }



  .top-graph__box.--reform .top-graph__box__header{
    background-color: #F07941;
  }
  .top-graph__box.--reform .graph-box__title{
    display: flex;
    gap:calc(10 / var(--font-size) * 1rem);
  }
  .top-graph__box.--reform .graph-box__text{
    font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: normal;
  }
  .top-graph__box.--reform .graph-box__cushion{
    padding-top: calc(18 / var(--font-size) * 1rem);
    padding-bottom: calc(18 / var(--font-size) * 1rem);
  }
  .top-graph__box.--reform .graph-box__text{
    margin-top: calc(9.75 / var(--font-size) * 1rem);
  }

  .top-graph__box.--new-house .graph-box.--third .top-graph-progress-body,
  .top-graph__box.--new-house .graph-box.--third-period .top-graph-progress-body {
    height:calc(50 / var(--font-size) * 1rem);
  }
  .top-graph__box.--new-house .graph-box.--third .graph-box__component .top-graph-progress__label,
  .top-graph__box.--new-house .graph-box.--third-period .graph-box__component .top-graph-progress__label {
    font-size: calc(26 / var(--font-size) * 1rem);
    margin-left: calc(23 / var(--font-size) * 1rem);
  }
  .top-graph__box.--new-house .graph-box.--third .graph-box__component .top-graph-progress__label > span,
  .top-graph__box.--new-house .graph-box.--third-period .graph-box__component .top-graph-progress__label > span {
    font-size: calc(18 / var(--font-size) * 1rem);
  }
}

@media screen and (max-width: 767px), print {
  .top-graph-progress{
    position: relative;
  }
  .top-graph-progress::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
  }
  .top-graph-progress:first-child::before{
    content: none;
  }
  .top-graph-progress.--kosodate02::before,
  .top-graph-progress.--mado02::before,
  .top-graph-progress.--kyutou02::before,
  .top-graph-progress.--chintai02::before{
    border-top: calc(1 / var(--font-size) * 1rem) dashed var(--main-border-color);
  }
  .top-graph-progress-desc{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: calc(67 / var(--font-size) * 1rem);
  }
  .top-graph-progress-desc__term{
    flex-shrink: 0;
    width: calc(372 / var(--font-size) * 1rem - 24 / var(--font-size) * 1rem);
    padding-right: calc(24 / var(--font-size) * 1rem);
    line-height: calc(25.6 / 16 * 1);
    font-size: calc(14 / var(--font-size) * 1rem);
  }
  .top-graph-progress-desc__term__label{
    display: inline-block;
    vertical-align: top;
  }
  .top-graph-progress-desc__defin{
    flex-grow: 1;
    padding-top: calc(16 / var(--font-size) * 1rem);
    padding-bottom: calc(16 / var(--font-size) * 1rem);
    padding-left: calc(36 / var(--font-size) * 1rem);
  }
  .top-graph-progress-body{
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: calc(35 / var(--font-size) * 1rem);
    border-radius: calc(5 / var(--font-size) * 1rem);
  }
  .top-graph-progress-body::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(5 / var(--font-size) * 1rem);
  }
  .top-graph-progress.--kosodate01 .top-graph-progress-body{
    color: var(--main-color-jigyo02-gx);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo02-gx);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--kosodate01 .top-graph-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--main-table-bg-color-gx);
  }
  .top-graph-progress.--kosodate02 .top-graph-progress-body{
    color: var(--main-color-jigyo02);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo02);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--kosodate02 .top-graph-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo02);
  }
  .top-graph-progress.--kosodate03 .top-graph-progress-body{
    color: var(--accent-color-jigyo02);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-sub-color-jigyo02);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--kosodate03 .top-graph-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--bg-sub-color-jigyo02-02);
  }
  .top-graph-progress.--mado01 .top-graph-progress-body{
    color: var(--main-color-jigyo03);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo03);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--mado01 .top-graph-progress-body::before{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo03);
  }
  .top-graph-progress.--kyutou01 .top-graph-progress-body{
    color: var(--main-color-jigyo04);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo04);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--kyutou01 .top-graph-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo04);
  }
  .top-graph-progress.--kyutou02 .top-graph-progress-body{
    color: var(--accent-color-jigyo04);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-sub-color-jigyo04);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--kyutou02 .top-graph-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--accent-sub-color-jigyo04);
  }
  .top-graph-progress.--chintai01 .top-graph-progress-body{
    color: var(--main-color-jigyo05);
    --x: 0 0 calc(2/ var(--font-size) * 1rem) var(--bg-color-jigyo05);
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--chintai01 .top-graph-progress-body{
    border: calc(1 / var(--font-size) * 1rem) solid var(--sub-color-jigyo05);
  }
  .top-overview-feature-teable-progress-body > *{
    position: relative;
    z-index: 1;
  }
  .top-graph-progress__bar{
    position: relative;
    display: inline-block;
    vertical-align: top;
    flex-grow: 1;
    width: 100%;
  }
  .top-graph-progress__bar > span{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
  }
  .top-graph-progress.--kosodate01 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo02-gx);
  }
  .top-graph-progress.--kosodate02 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo02);
  }
  .top-graph-progress.--kosodate03 .top-graph-progress__bar > span{
    background: var(--accent-color-jigyo02);
  }
  .top-graph-progress.--mado01 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo03);
  }
  .top-graph-progress.--kyutou01 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo04);
  }
  .top-graph-progress.--kyutou02 .top-graph-progress__bar > span{
    background: var(--accent-color-jigyo04);
  }
  .top-graph-progress.--chintai01 .top-graph-progress__bar > span{
    background: var(--main-color-jigyo05);
  }
  .top-graph-progress__label{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    line-height: calc(25.6 / 20 * 1);
    font-size: calc(20 / var(--font-size) * 1rem);
    font-weight: 700;
    white-space: nowrap;
    transform: translate3d(-50%, -50%, 0);
    z-index: 20;
  }
  .top-graph-progress__label > span{
    font-size: calc(14 / 20 * 100%);
  }
  .top-graph-progress-txt{
    margin-top: calc(4 / var(--font-size) * 1rem);
    line-height: calc(20 / 12 * 1);
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-graph-progress-txt:first-child{
    margin-top: 0;
  }
  .top-graph-progress.--kosodate01 .top-graph-progress-txt a{
    color: var(--main-color-jigyo02-gx);
  }
  .top-graph-progress.--kosodate02 .top-graph-progress-txt a{
    color: var(--main-color-jigyo02);
  }
  .top-graph-progress.--kosodate03 .top-graph-progress-txt a{
    color: var(--accent-color-jigyo02);
  }
  .top-graph-progress.--mado01 .top-graph-progress-txt a{
    color: var(--main-color-jigyo03);
  }
  .top-graph-progress.--kyutou01 .top-graph-progress-txt a{
    color: var(--main-color-jigyo04);
  }
  .top-graph-progress.--kyutou02 .top-graph-progress-txt a{
    color: var(--accent-color-jigyo04);
  }
  .top-graph-progress.--chintai01 .top-graph-progress-txt a{
    color: var(--main-color-jigyo05);
  }



  .top-graph {
    padding-top: calc(64 / var(--font-size) * 1rem);
    padding-bottom: calc(64 / var(--font-size) * 1rem);
    color: var(--text-color);
  }
  .top-graph .top-section-heading__label{
    font-size:calc(24 / var(--font-size) * 1rem);
  }
  .top-graph__lead-txt{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    text-align: left;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .top-graph__inner {
    padding-left: calc(15 / var(--font-size) * 1rem);
    padding-right: calc(15 / var(--font-size) * 1rem);
    width:100%;
    margin: 0 auto;
  }
  .top-graph__head{
    font-size:calc(var(--text-size-xs) / var(--font-size) * 1rem);
    text-align:right;
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .top-graph__box-wrap{
    display: flex;
    flex-direction: column;
    gap:calc(17 / var(--font-size) * 1rem);
    margin-top: calc(13 / var(--font-size) * 1rem);
  }
  .top-graph__box{
    max-width: calc(504 / var(--font-size) * 1rem);
    width:100%;
  }
  .top-graph__box__header{
    background-color: #0F9D72;
    padding:calc(8 / var(--font-size) * 1rem) calc(9 / var(--font-size) * 1rem);
    border-radius:calc(10 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem) 0 0;
    height:calc(74 / var(--font-size) * 1rem);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .top-graph__box__header__title{
    color:var(--color-white);
    font-size:calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 700;
    text-align: center;
    max-width: calc(100% - calc(170 / var(--font-size) * 1rem));
    width:100%;
  }
  .top-graph__box__header__category{
    background-color: var(--color-white);
    padding:calc(5 / var(--font-size) * 1rem) calc(0 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem);
    border-radius:calc(5 / var(--font-size) * 1rem);
    max-width: calc(170 / var(--font-size) * 1rem);
    width:100%;
    height:calc(55 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:calc(5 / var(--font-size) * 1rem);
  }
  .top-graph__box__header__category__icon{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    width:calc(24 / var(--font-size) * 1rem);
    height:calc(20 / var(--font-size) * 1rem);
  }
  .top-graph__box__header__category__icon.--kosodate{
    background-image: url(/assets/img/common/ico_mirai.png);
  }
  .top-graph__box__header__category__label{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .top-graph__box__body{
    border:calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
    border-top:0;
    border-radius:0 0 calc(10 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem);
    overflow:hidden;
  }
  .top-graph__box__column-group-wrap{
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .top-graph__box__column-group{
    width:100%;
    position: relative;
  }
  .top-graph__box__column{
    position: relative;
  }
  .top-graph__box__column-group:before,
  .top-graph__box__column:before{
    content:"";
    border-top:calc(1 / var(--font-size) * 1rem) dashed var(--main-border-color);
    width:87%;
    height:calc(1 / var(--font-size) * 1rem);
    display: block;
    position: absolute;
    top:0;
    left:0;
    right:0;
    margin:0 auto;
  }
  .top-graph__box__column__body{
    padding:calc(16 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__header{
  }
  .top-graph__box__column__header__text{
    color:var(--color-attention_1000);
    font-size:calc(var(--text-size-xs) / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    margin-top: calc(10 / var(--font-size) * 1rem);
    margin-bottom: calc(10 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__title{
    font-size:calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 700;
    display: flex;
  }
  .top-graph__box__column__title:before{
    content:"";
    background-color: #64B06B;
    border-radius:100%;
    display: block;
    width:calc(16 / var(--font-size) * 1rem);
    height:calc(16 / var(--font-size) * 1rem);
    flex-shrink: 0;
    margin-right: calc(6 / var(--font-size) * 1rem);
    position: relative;
    top:calc(3.25 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__title.--type-02{
    padding:calc(3 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem);
    display: inline-block;
    margin-top: calc(-6 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__title.--type-02:before{
    display: inline-block;
    top: calc(1.25 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__title.--zeh.--type-02{
    background-color: #F3FDE7;
  }
  .top-graph__box__column__title.--gx.--type-02{
    background-color: #F3FBF5;
  }
  .top-graph__box__column.--text .top-graph__box__column__body{
    padding-top: calc(24 / var(--font-size) * 1rem);
    padding-bottom: calc(24 / var(--font-size) * 1rem);
  }
  .top-graph__box__column__text{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    line-height: 1.599;
  }
  .top-graph__box__column:first-child:before{
    display: none;
  }
  .graph-box{
    position: relative;
  }
  .top-graph__box__column__title + .graph-box{
    margin-top: calc(9 / var(--font-size) * 1rem);
  }
  .graph-box__cushion{
    padding:calc(15.5 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem) calc(15.5 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    border-radius:calc(10 / var(--font-size) * 1rem);
  }
  .graph-box__contents{
  }
  .graph-box__title{
    font-size:calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: -0.065em;
  }
  .graph-box__title .title-02{
    font-size:90%;
    margin-left: -0.25em;
  }
  .graph-box__title__icon{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    display: block;
    width:calc(24 / var(--font-size) * 1rem);
    height:calc(20 / var(--font-size) * 1rem);
  }
  .graph-box__text{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    margin-top: calc(4 / var(--font-size) * 1rem);
    margin-right: calc(10 / var(--font-size) * 1rem);
  }
  .graph-box__label{
    background-color: #BDBDBD;
    text-align: center;
    border-radius:calc(5 / var(--font-size) * 1rem);
    color:var(--color-white);
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    max-width: calc(104 / var(--font-size) * 1rem);
    width:100%;
    height:calc(40 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left: auto;
  }
  .graph-box__link{
    font-size:calc(var(--text-size-xs) / var(--font-size) * 1rem);
    font-weight: 700;
    margin-top: calc(3 / var(--font-size) * 1rem);
  }

  /** **/

  .graph-box__component{
    margin:calc(10 / var(--font-size) * 1rem) 0;
  }
  .graph-box__component .top-graph-progress-body{
    background-color: var(--color-white);
    border:0 !important;
    border-radius:calc(5 / var(--font-size) * 1rem);
    height: calc(61 / var(--font-size) * 1rem);
  }
  .graph-box__component .top-graph-progress__bar{
    border:calc(1 / var(--font-size) * 1rem) solid #DDF4E0;
    border-radius: calc(5 / var(--font-size) * 1rem);
    overflow:hidden;
    position: absolute;
    top:0;
    left:0;
    height:100%;
    z-index:10;
  }
  .graph-box__component .top-graph-progress__bar.--stripe{
    z-index:5;
  }
  .graph-box__component .top-graph-progress__bar.--stripe > span{
    background-image:repeating-linear-gradient(-24deg, #F3FBF5, #F3FBF5 4px, #C7F0CE 0, #C7F0CE 5px);
    border:calc(1 / var(--font-size) * 1rem) solid #C7F0CE;
    border-right:calc(1.5 / var(--font-size) * 1rem) dashed #64B06B;
  }
  .graph-box__component.top-graph-progress::before{
    display: none;
  }
  .graph-box__component .top-graph-progress__label{
    font-size: calc(30 / var(--font-size) * 1rem);
  }
  .graph-box__component .top-graph-progress__label > span {
    font-size: calc(21 / var(--font-size) * 1rem);
  }

  .graph-box.--kosodate .graph-box__component .top-graph-progress__bar{
    border-color:#DEEFFC;
  }
  .graph-box.--mado .graph-box__component .top-graph-progress__bar{
    border-color:#DEEFFC;
  }
  .graph-box.--kyuto .graph-box__component .top-graph-progress__bar{
    border-color:#FFEAA1;
  }
  .graph-box.--tekkyokasan .graph-box__component .top-graph-progress__bar{
    border-color:#FEE1E1;
  }
  .graph-box.--chintai .graph-box__component .top-graph-progress__bar{
    border-color:#F2DFFC;
  }

  .graph-box.--tekkyokasan:before {
    content: "";
    border-top: calc(1 / var(--font-size) * 1rem) dashed var(--main-border-color);
    width: 93%;
    height: calc(1 / var(--font-size) * 1rem);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  /** **/

  .top-graph__box.--new-house{
  }
  .top-graph__box.--reform{
  }
  .top-graph__box__column-group .graph-box__cushion{
    padding-left: calc(12 / var(--font-size) * 1rem);
    padding-right: calc(12 / var(--font-size) * 1rem);
  }

  .graph-box.--gx .graph-box__title{
    color:#64B06B;
  }
  .graph-box.--gx .graph-box__cushion{
    background-color: #F3FBF5;
  }
  .graph-box.--gx .graph-box__link a{
    color: #64B06B;
  }

  .top-graph__box__column__title.--zeh:before{
    background-color: #77CC00;
  }
  .graph-box.--zeh .graph-box__title{
    color:#77CC00;
  }
  .graph-box.--zeh .graph-box__cushion{
    background-color: #F3FDE7;
  }
  .graph-box.--zeh .graph-box__link a{
    color: #77CC00;
  }

  .top-graph__box__column__title.--reform:before{
    background-color: #4D98D1;
  }
  .graph-box.--reform .graph-box__title{
    color:#4D98D1;
  }
  .graph-box.--reform .graph-box__cushion{
    background-color: #F1F8FE;
  }
  .graph-box.--reform .graph-box__link a{
    color: #4D98D1;
  }

  .graph-box.--disable .graph-box__cushion__body{
    display:flex;
    align-items:center;
  }
  .graph-box.--disable .graph-box__title{
    font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
    color:#362C2A;
  }
  .graph-box.--disable .graph-box__text{
    font-size: calc(var(--text-size-xs) / var(--font-size) * 1rem);
  }
  .graph-box.--disable .graph-box__cushion{
    background-color: #EEEEEE;
  }
  .graph-box.--disable .graph-box__link a{
    color: #362C2A;
  }
  .graph-box.--disable .graph-box__label{
    font-size: calc(var(--text-size-xs) / var(--font-size) * 1rem);
    line-height: 1.599;
    max-width: calc(70 / var(--font-size) * 1rem);
    height:calc(64 / var(--font-size) * 1rem);
  }

  .graph-box.--kosodate .graph-box__title{
  }
  .graph-box.--kosodate .graph-box__cushion{
    background-color: #F3FDE7;
  }
  .graph-box.--kosodate .graph-box__link a{
    color: #4D98D1;
  }
  .graph-box.--kosodate .graph-box__title__icon{
    background-image: url(/assets/img/common/ico_mirai.png);
  }

  .graph-box.--mado .graph-box__title{
  }
  .graph-box.--mado .graph-box__cushion{
    background-color: #F5FCFF;
  }
  .graph-box.--mado .graph-box__link a{
    color: #3FAAFA;
  }
  .graph-box.--mado .graph-box__title__icon{
    background-image: url(/assets/img/common/ico_mado.png);
  }


  .graph-box.--kyuto .graph-box__title{
  }
  .graph-box.--kyuto .graph-box__cushion{
    background-color: #FFFCE3;
  }
  .graph-box.--kyuto .graph-box__link a{
    color: #FC9534;
  }
  .graph-box.--kyuto .graph-box__title__icon{
    background-image: url(/assets/img/common/ico_kyutou.png);
  }
  .graph-box.--kyuto .graph-box__cushion{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }
  .graph-box.--tekkyokasan .graph-box__cushion{
    border-top-left-radius:0;
    border-top-right-radius:0;
  }
  .graph-box.--tekkyokasan .graph-box__link a{
    color: #FC6A83;
  }

  .graph-box.--chintai .graph-box__title{
  }
  .graph-box.--chintai .graph-box__cushion{
    background-color: #F9F3FC;
  }
  .graph-box.--chintai .graph-box__link a{
    color: #AD5FD6;
  }
  .graph-box.--chintai .graph-box__title__icon{
    background-image: url(/assets/img/common/ico_chintai.png);
  }

  .top-graph__box__column.--border-solid:before {
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--main-border-color);
  }

  /* 第3期 */
  .graph-box.--gx.--third .top-graph-progress__label,
  .graph-box.--gx.--third-period .top-graph-progress__label{
    color:#64B06B;
  }
  .graph-box.--zeh.--third .top-graph-progress__label,
  .graph-box.--zeh.--third-period .top-graph-progress__label{
    color:#77CC00;
  }
  .graph-box.--third .top-graph-progress__label,
  .graph-box.--third-period .top-graph-progress__label{
    margin-left: 0 !important;
  }

  .graph-box.--third-period .graph-box__component{
    margin: calc(11 / var(--font-size) * 1rem) auto calc(9 / var(--font-size) * 1rem) auto !important;
  }

  .top-graph__bottom{
    margin-top:calc(20 / var(--font-size) * 1rem);
  }

  /** **/

  .progress-unitlabel{
    text-align: center;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: calc(-21 / var(--font-size) * 1rem);
    left: calc(-7 / var(--font-size) * 1rem);
    height: calc(93 / var(--font-size) * 1rem);
  }
  .progress-unitlabel.--01{
    text-align:left;
    width:calc(60 / var(--font-size) * 1rem);
    left:0;
  }
  .progress-unitlabel.--02{
    width:calc(70 / var(--font-size) * 1rem);
    margin-left: calc(-32 / var(--font-size) * 1rem);
  }
  .progress-unitlabel.--03{
    width:calc(60 / var(--font-size) * 1rem);
    left:86%;
  }
  .progress-unitlabel__top-unit{
    font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    color:#362C2A;
  }
  .progress-unitlabel__bottom-unit{
    font-size: calc(var(--text-size-xs) / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .progress-unitlabel.--01 .progress-unitlabel__bottom-unit{
    margin-left:calc(-6 / var(--font-size) * 1rem);
  }

  .graph-box__component.--gx .top-graph-progress__bar.--stripe > span{
    background-image:repeating-linear-gradient(-24deg, #F3FBF5, #F3FBF5 4px, #C7F0CE 0, #C7F0CE 5px);
    border:calc(1 / var(--font-size) * 1rem) solid #C7F0CE;
    border-right:calc(1.5 / var(--font-size) * 1rem) dashed #64B06B;
  }
  .graph-box__component.--gx .top-graph-progress__bar.--stripe.--width100 > span {
    border-right: calc(1 / var(--font-size) * 1rem) solid #DDF4E0;
  }

  .graph-box__component.--zeh .top-graph-progress__bar{
    border-color:#E7F9BE;
  }
  .graph-box__component.--zeh .top-graph-progress__bar.--stripe > span {
    background-image: repeating-linear-gradient(-24deg, #F3FBF5, #F3FBF5 4px, #CDF292 0, #CDF292 5px);
    border: calc(1 / var(--font-size) * 1rem) solid #CDF292;
    border-right: calc(1.5 / var(--font-size) * 1rem) dashed #77CC00;
  }
  .graph-box__component.--zeh .top-graph-progress__bar.--stripe.--width100 > span {
    border-right: calc(1 / var(--font-size) * 1rem) solid #E7F9BE;
  }

  .graph-box__component.--reform .top-graph-progress__bar{
    border-color:#4D98D1;
  }
  /** **/

  .top-graph__box.--new-house .graph-box__component{
    width:100%;
    margin: calc(35 / var(--font-size) * 1rem) auto calc(35 / var(--font-size) * 1rem) auto;
  }
  .top-graph__box.--new-house .top-graph-progress-body,
  .top-graph__box.--reform .top-graph-progress-body {
    height:calc(54 / var(--font-size) * 1rem);
  }
  .top-graph__box.--new-house .graph-box__component .top-graph-progress__label{
    margin-left: calc(38 / var(--font-size) * 1rem);
  }
  .top-graph__box.--new-house .graph-box__component .top-graph-progress__label,
  .top-graph__box.--reform .graph-box__component .top-graph-progress__label {
    font-size: calc(24 / var(--font-size) * 1rem);
  }
  .top-graph__box.--new-house .graph-box__component .top-graph-progress__label > span,
  .top-graph__box.--reform .graph-box__component .top-graph-progress__label > span {
    font-size: calc(16 / var(--font-size) * 1rem);
  }


  .top-graph__box.--reform .top-graph__box__inner{
    height:calc(100% - calc(52 / var(--font-size) * 1rem));
  }
  .top-graph__box.--reform .top-graph__box__body{
    height:100%;
  }
  .top-graph__box.--reform .graph-box__component{
    margin: calc(11 / var(--font-size) * 1rem) auto calc(9 / var(--font-size) * 1rem) auto;
  }
  .top-graph__box.--reform .top-graph__box__header{
    background-color: #F07941;
  }
  .top-graph__box.--reform .graph-box__title{
    display: flex;
    gap:calc(10 / var(--font-size) * 1rem);
  }
  .top-graph__box.--reform .graph-box__text{
    font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: normal;
  }
  .top-graph__box.--reform .graph-box__cushion{
    padding-top: calc(16 / var(--font-size) * 1rem);
    padding-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .top-graph__box.--reform .graph-box__text{
    margin-top: calc(9.75 / var(--font-size) * 1rem);
  }
  .top-graph__box.--reform .graph-box__link{
    font-size: calc(var(--text-size-xs) / var(--font-size) * 1rem);
  }

  /** **/
  .top-graph .top-heading:before{
    display: none;
  }
  /** **/

  .top-graph-progress.--gx .top-graph-progress-body{
    background: #fff;
    color: #64B06B;
    --x: 0 0 calc(1/ var(--font-size) * 1rem) #fff;
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--gx .top-graph-progress__label{
    color: #333;
  }
  .top-graph-progress.--gx .top-graph-progress__label .unit{
    color: #64B06B;
  }
  .top-graph-progress.--zeh .top-graph-progress-body{
    background: #fff;
    color: #77CC00;
    --x: 0 0 calc(1/ var(--font-size) * 1rem) #fff;
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }
  .top-graph-progress.--zeh .top-graph-progress__label{
    color: #333;
  }
  .top-graph-progress.--zeh .top-graph-progress__label .unit{
    color: #77CC00;
  }

  .top-graph-progress.--reform .top-graph-progress-body{
    background: #fff;
    color: #4D98D1;
    --x: 0 0 calc(2/ var(--font-size) * 1rem) #fff;
    --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x);
    text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y);
  }

  .top-graph-progress.--gx .top-graph-progress__bar > span{
    background: #64B06B;
  }
  .top-graph-progress.--zeh .top-graph-progress__bar > span{
    background: #77CC00;
  }
  .top-graph-progress.--reform .top-graph-progress__bar > span{
    background: #4D98D1;
  }

  /** **/
  .top-graph__box.--new-house .graph-box.--third .graph-box__component,
  .top-graph__box.--new-house .graph-box.--third-period .graph-box__component{
    margin: calc(10 / var(--font-size) * 1rem) auto calc(10 / var(--font-size) * 1rem) auto;
  }
}


@media all and (min-width: 768px), print {
  .graph-modal{
    max-width: calc(1440 / var(--font-size) * 1rem);
  }
  .graph-modal .top-graph{
    padding-top: 0;
  }
  .modal .graph-modal .l-section__body {
    width: calc(1120 / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px), print {
  .graph-modal .top-graph{
    padding-top: calc(20 / var(--font-size) * 1rem);
  }
  .modal-main.graph-modal{
    padding-left: 0;
    padding-right: 0;
  }
  .modal .graph-modal .l-section__body {
    padding-left: 0;
    padding-right: 0;
    width:100%;
  }
}