@charset "UTF-8";

body {
  padding-bottom: 0;
}

:root {
  --vw-pc: 1440;
  --vw-sp: 375;
}

/* ==========================================================================
  PAGE COMMON
========================================================================== */
@media all and (min-width: 768px), print {
  main {
    background-color: var(--color-white);
    margin-left: calc(60 / var(--vw-pc) * 100vw);
    margin-right: calc(60 / var(--vw-pc) * 100vw);
    position: relative;
    overflow: hidden;
  }

  .main__inner {
    background: linear-gradient(98.76deg, #e8f8ef 38.51%, #ceecf8 100.37%);
    padding-bottom: calc(165 / var(--vw-pc) * 100vw);
  }

  .hero {
    overflow: hidden;
  }

  .hero__inner {
    container-type: inline-size;
    --w: 1200;
    max-width: 1200px;
    width: 100%;
    margin-inline: auto;
    position: relative;
    z-index: 0;

    &::before {
      content: "";
      display: block;
      width: 2560px;
      padding-top: 600px;
      background: url(/assets/img/subsudy/mv_subsudy_01_pc.png) no-repeat center top / contain;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
    }
  }

  .hero__body {
    padding-top: calc(93 / var(--w) * 100cqi);
    height: calc(615 / var(--w) * 100cqi);
  }

  .hero__title {
    width: calc(780 / 1440 * 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .page-container {
    width: 100%;
    max-width: calc((1240 + (40 * 2)) / var(--font-size) * 1rem);
    max-width: calc((1240 + (40 * 2)) * 1px);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    container-type: inline-size;
    --w: 1440;
    padding-inline: 40px;
  }

  body[data-page="subsudy"] main:after {
    content: "";
    background-image: url(/assets/img/subsudy/img_subsudy_01_pc.png);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    max-width: calc(312 / var(--vw-pc) * 100vw);
    width: 100%;
    height: calc(378 / var(--vw-pc) * 100vw);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
  }

  body[data-page="model-case"] .main__inner {
    padding-bottom: calc(100 / var(--vw-pc) * 100vw);
  }

  body[data-cateogry="new-house"] .main__inner {
    background: linear-gradient(180deg, #e8f8ef 0%, #ffffff 100%);
  }

  body[data-page="model-case"] .hero {
  }

  body[data-page="model-case"] .hero__body {
    padding-top: calc(50 / var(--w) * 100cqi);
    height: calc(599 / var(--w) * 100cqi);
  }

  body[data-page="model-case"] .hero__inner {
  }

  body[data-page="model-case"] .hero__title {
    max-width: calc(500 / var(--w) * 100cqi);
  }

  .page-copy {
    margin-top: calc(-110 / var(--w) * 100cqi);
  }

  .page-copy__text {
    font-size: calc(20 / var(--w) * 100cqi);
    line-height: 2;
    text-align: center;
  }

  /*********************************
  * 下層ページー切り替えボタン
  *********************************/
  .model-tab__btn-list {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
  }

  .model-tab__btn-list__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(20 / var(--w) * 100cqi);
  }

  .model-tab__btn {
    width: calc(280 / var(--w) * 100cqi);
  }

  .model-tab__btn__body {
    background-color: var(--color-white);
    border: calc(4 / var(--w) * 100cqi) solid var(--main-color-jigyo02-gx);
    box-shadow: calc(8 / var(--w) * 100cqi) calc(8 / var(--w) * 100cqi) 0px rgba(0, 0, 0, 0.08);
    border-radius: calc(50 / var(--w) * 100cqi) 0px;
    max-width: calc(280 / var(--w) * 100cqi);
    width: 100%;
    height: calc(90 / var(--w) * 100cqi);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .model-tab__btn__body:before {
    content: "";
    background-color: var(--btn-arrow-color);
    mask-image: url(/assets/img/subsudy/model-case/ico_white-cursor.svg);
    mask-size: contain;
    mask-position: center center;
    mask-repeat: no-repeat;
    width: calc(15 / var(--w) * 100cqi);
    height: calc(14 / var(--w) * 100cqi);
    position: absolute;
    top: 0;
    right: calc(16 / var(--w) * 100cqi);
    bottom: 0;
    margin: auto 0;
  }

  .model-tab__btn__text {
    text-align: center;
    padding-left: calc(50 / var(--w) * 100cqi);
    padding-right: calc(50 / var(--w) * 100cqi);
  }

  .model-tab__btn__text__label {
    color: var(--btn-text-color);
    font-size: calc(24 / var(--w) * 100cqi);
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .model-tab__btn.--gx .model-tab__btn__body {
    background-color: var(--color-white);
    border-color: var(--main-color-jigyo02-gx);
    --btn-text-color: var(--main-color-jigyo02-gx);
    --btn-arrow-color: var(--main-color-jigyo02-gx);
  }

  .model-tab__btn.--yuryo .model-tab__btn__body {
    background-color: var(--color-white);
    border-color: var(--main-color-jigyo01);
    --btn-text-color: var(--main-color-jigyo01);
    --btn-arrow-color: var(--main-color-jigyo01);
  }

  .model-tab__btn.--zeh .model-tab__btn__body {
    background-color: var(--color-white);
    border-color: #f7aa67;
    --btn-text-color: #f7aa67;
    --btn-arrow-color: #f7aa67;
  }

  .model-tab__button {
    transition: 0.3s ease;
  }

  .model-tab__button:hover {
    filter: brightness(115%);
  }

  .model-tab__contents {
  }

  .model-tab__button[aria-selected="true"] .model-tab__btn__body {
    background-color: var(--btn-text-color);
  }

  .model-tab__button[aria-selected="true"] .model-tab__btn__text__label {
    color: var(--color-white);
  }

  .model-tab__button[aria-selected="true"] .model-tab__btn__body:before {
    background-color: var(--color-white);
    transform: rotate(180deg);
  }

  .model-tab__contents__container[aria-hidden="false"] {
  }

  .model-tab__contents__container[aria-hidden="true"] {
    display: none;
  }

  /*********************************
  * 下層ページー詳細
  *********************************/
  .model-detail {
    background-color: var(--color-white);
    border-radius: 0 0 calc(60 / var(--vw-pc) * 100vw) calc(60 / var(--vw-pc) * 100vw);
    overflow: hidden;
  }

  .model-detail__top {
    padding-top: calc(670 / 1240 * 100%);
    position: relative;
  }

  .model-detail__top img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .model-detail-list {
    display: flex;
    justify-content: center;
    gap: calc(40 / var(--font-size) * 1rem);
    position: relative;
    z-index: 10;
  }

  .model-detail-list__item {
    max-width: calc(500 / var(--font-size) * 1rem);
    width: 100%;
  }

  .model-detail__image {
    max-width: calc(989 / var(--font-size) * 1rem);
    width: 100%;
    position: relative;
    left: calc(-34.5 / var(--font-size) * 1rem);
    margin-top: calc(100 / var(--font-size) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }

  .model-detail__image__02 {
    max-width: calc(857 / var(--font-size) * 1rem);
    width: 100%;
    position: relative;
    left: calc(-12 / var(--font-size) * 1rem);
    margin-top: calc(80 / var(--font-size) * 1rem);
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
  }

  .model-detail-total {
    padding-top: calc(120 / var(--font-size) * 1rem);
    padding-bottom: calc(114 / var(--font-size) * 1rem);
    background: linear-gradient(to right, #70ce97, #8ac8f1);
    position: relative;
    margin-top: calc(112 / var(--font-size) * 1rem);
  }

  .model-detail-total:before {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="282" height="89" viewBox="0 0 282 89" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M134.673 87.12L7.98803 26.6338C-5.4686 20.2089 -0.891655 0 14.0201 0H267.39C282.302 0 286.878 20.2089 273.422 26.6339L146.737 87.12C142.922 88.9415 138.488 88.9415 134.673 87.12Z" fill="white"/></svg>');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: calc(361 / var(--font-size) * 1rem);
    height: calc(79 / var(--font-size) * 1rem);
    display: block;
    position: absolute;
    top: calc(-31 / var(--font-size) * 1rem);
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .model-detail-total__title {
    text-align: center;
  }

  .model-detail-total__title__label {
    padding-bottom: calc(30 / var(--font-size) * 1rem);
    color: var(--color-white);
    font-size: calc(50 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    position: relative;
    text-shadow: calc(2 / var(--vw-pc) * 100vw) calc(2 / var(--vw-pc) * 100vw) 0px rgba(0, 0, 0, 0.1);
  }

  .model-detail-total__title__label:before {
    content: "";
    background: var(--color-white);
    border-radius: calc(50 / var(--font-size) * 1rem);
    display: block;
    max-width: calc(80 / var(--font-size) * 1rem);
    width: 100%;
    height: calc(8 / var(--font-size) * 1rem);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }

  .model-detail-total__bg {
    background-image: url(/assets/img/subsudy/model-case/new-house/bg_new-house_01_pc.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: calc(355 / var(--font-size) * 1rem);
    height: calc(274 / var(--font-size) * 1rem);
    display: block;
    position: absolute;
    bottom: calc(81 / var(--font-size) * 1rem);
    right: 0;
    margin: 0 auto;
    z-index: 0;
  }

  .model-detail-total__bg-02 {
    background-image: url(/assets/img/subsudy/model-case/new-house/bg_new-house_02_pc.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: calc(350 / var(--font-size) * 1rem);
    height: calc(221 / var(--font-size) * 1rem);
    display: block;
    position: absolute;
    bottom: calc(0 / var(--font-size) * 1rem);
    right: calc(14 / var(--font-size) * 1rem);
    margin: 0 auto;
    z-index: 10;
  }

  .page-button-menu {
    max-width: calc(880 / var(--font-size) * 1rem);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s ease;
  }

  .page-button-menu.--visible {
    height: auto;
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    margin-top: calc(63 / var(--font-size) * 1rem);
  }

  .page-button-menu-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(20 / var(--font-size) * 1rem);
  }

  .page-button-menu-list__item {
    max-width: calc(280 / var(--font-size) * 1rem);
    width: 100%;
  }

  .page-button-menu-list__link {
    display: block;
    transition: 0.3s ease;
  }

  .page-button-menu-list__link[disabled] {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
  }

  .page-button-menu-list__link:hover {
    opacity: 0.7;
  }
}

@media all and (min-width: 768px) and (max-width: 1440px) {
  .hero__inner {
    &::before {
      content: "";
      display: block;
      width: calc(2238 / var(--w) * 100cqi);
      padding-top: calc(694 / var(--w) * 100cqi);
    }
  }

  .model-detail-list__item {
    max-width: calc(500 / var(--vw-pc) * 100vw);
  }

  .model-detail__image {
    max-width: calc(989 / var(--vw-pc) * 100vw);
    margin-top: calc(100 / var(--vw-pc) * 100vw);
  }

  .model-detail__image__02 {
    max-width: calc(857 / var(--vw-pc) * 100vw);
    margin-top: calc(100 / var(--vw-pc) * 100vw);
  }
  .model-detail__top {
  }

  .model-detail-total__title__label {
    font-size: calc(50 / var(--vw-pc) * 100vw);
  }

  .model-detail-total__bg {
    width: calc(355 / var(--vw-pc) * 100vw);
    height: calc(274 / var(--vw-pc) * 100vw);
    bottom: calc(79 / var(--vw-pc) * 100vw);
  }

  .model-detail-total__bg-02 {
    width: calc(350 / var(--vw-pc) * 100vw);
    height: calc(221 / var(--vw-pc) * 100vw);
    bottom: calc(0 / var(--vw-pc) * 100vw);
    right: calc(14 / var(--vw-pc) * 100vw);
  }
}

@media all and (max-width: 767px), print {
  main {
    background-color: var(--color-white);
    padding-bottom: calc(63 / var(--vw-sp) * 100vw);
    position: relative;
  }

  .main__inner {
    background: linear-gradient(180deg, #e8f8ef 0%, #ffffff 100%);
  }

  .hero {
    background-image: url(/assets/img/subsudy/mv_subsudy_01_sp.png);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: calc(26 / var(--vw-sp) * 100vw);
    height: calc(288 / var(--vw-sp) * 100vw);
  }

  .hero__title {
    max-width: calc(308 / var(--vw-sp) * 100vw);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .page-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  body[data-page="subsudy"] main:after {
    content: "";
    background-image: url(/assets/img/subsudy/img_subsudy_01_sp.png);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    max-width: calc(113 / var(--vw-sp) * 100vw);
    width: 100%;
    height: calc(124 / var(--vw-sp) * 100vw);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
  }

  body[data-cateogry="new-house"] .main__inner {
    background: linear-gradient(180deg, #e8f8ef 0%, #ffffff 100%);
  }

  body[data-page="model-case"] main {
    padding-bottom: calc(38 / var(--vw-sp) * 100vw);
  }

  body[data-page="model-case"] .hero {
    padding-top: calc(26 / var(--vw-sp) * 100vw);
    background-image: url(/assets/img/subsudy/model-case/mv_model-case_01_sp.png);
    height: calc(329 / var(--vw-sp) * 100vw);
  }

  body[data-page="model-case"] .hero__title {
    max-width: calc(253 / var(--vw-sp) * 100vw);
  }

  .page-copy {
    margin-top: calc(11 / var(--vw-sp) * 100vw);
  }

  .page-copy__text {
    font-size: calc(16 / var(--vw-sp) * 100vw);
    line-height: 1.8;
    letter-spacing: 2px;
    text-align: center;
  }

  /*********************************
  * 下層ページー切り替えボタン
  *********************************/
  .model-tab__btn-list {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 10;
  }

  .model-tab__btn-list__inner {
    padding-left: calc(10 / var(--vw-sp) * 100vw);
    padding-right: calc(10 / var(--vw-sp) * 100vw);
    display: flex;
    align-items: center;
    gap: calc(4 / var(--vw-sp) * 100vw);
    width: 100%;
  }

  .model-tab__btn {
    width: calc(100% / 3 - calc(2 / var(--vw-sp) * 100vw));
  }

  .model-tab__btn__body {
    background-color: var(--color-white);
    border: calc(2 / var(--vw-sp) * 100vw) solid var(--main-color-jigyo02-gx);
    box-shadow: calc(5 / var(--vw-sp) * 100vw) calc(5 / var(--vw-sp) * 100vw) 0px rgba(0, 0, 0, 0.08);
    border-radius: calc(30 / var(--vw-sp) * 100vw) 0px;
    max-width: calc(250 / var(--vw-sp) * 100vw);
    width: 100%;
    height: calc(50 / var(--vw-sp) * 100vw);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .model-tab__btn__body:before {
    content: "";
    background-color: var(--btn-text-color);
    mask-image: url(/assets/img/subsudy/model-case/ico_white-cursor.svg);
    mask-size: contain;
    mask-position: center center;
    mask-repeat: no-repeat;
    width: calc(9 / var(--vw-sp) * 100vw);
    height: calc(9 / var(--vw-sp) * 100vw);
    position: absolute;
    top: 0;
    right: calc(6 / var(--vw-sp) * 100vw);
    bottom: 0;
    margin: auto 0;
  }

  .model-tab__btn__text {
    text-align: center;
    line-height: 1.2;
    padding-left: calc(5 / var(--vw-sp) * 100vw);
    padding-right: calc(5 / var(--vw-sp) * 100vw);
  }

  .model-tab__btn__text__label {
    color: var(--btn-text-color);
    font-size: calc(13 / var(--vw-sp) * 100vw);
    font-weight: 700;
    /* line-height: 0.8; */
    letter-spacing: 0.06em;
  }

  .model-tab__btn.--gx .model-tab__btn__body {
    background-color: var(--color-white);
    border-color: var(--main-color-jigyo02-gx);
    --btn-text-color: var(--main-color-jigyo02-gx);
    --btn-arrow-color: var(--main-color-jigyo02-gx);
  }

  .model-tab__btn.--yuryo .model-tab__btn__body {
    background-color: var(--color-white);
    border-color: var(--main-color-jigyo01);
    --btn-text-color: var(--main-color-jigyo01);
    --btn-arrow-color: var(--main-color-jigyo01);
  }

  .model-tab__btn.--zeh .model-tab__btn__body {
    background-color: var(--color-white);
    border-color: #f7aa67;
    --btn-text-color: #f7aa67;
    --btn-arrow-color: #f7aa67;
  }

  .model-tab__button {
    transition: 0.3s ease;
  }

  .model-tab__button:hover {
    filter: brightness(115%);
  }

  .model-tab__contents {
  }

  .model-tab__button[aria-selected="true"] .model-tab__btn__body {
    background-color: var(--btn-text-color);
  }

  .model-tab__button[aria-selected="true"] .model-tab__btn__text__label {
    color: var(--color-white);
  }

  .model-tab__button[aria-selected="true"] .model-tab__btn__body:before {
    background-color: var(--color-white);
    transform: rotate(180deg);
  }

  .model-tab__contents__container[aria-hidden="false"] {
  }

  .model-tab__contents__container[aria-hidden="true"] {
    display: none;
  }

  /*********************************
  * 下層ページー詳細
  *********************************/
  .model-detail {
    background-color: var(--color-white);
    border-radius: 0 0 calc(40 / var(--vw-sp) * 100vw) calc(40 / var(--vw-sp) * 100vw);
    overflow: hidden;
  }

  .model-detail__top {
    padding-top: calc(440 / var(--vw-sp) * 100vw);
    position: relative;
  }

  .model-detail__top img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .model-detail-list {
    padding-left: calc(17 / var(--vw-sp) * 100vw);
    padding-right: calc(12 / var(--vw-sp) * 100vw);
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: calc(35 / var(--vw-sp) * 100vw);
    position: relative;
    z-index: 10;
  }

  .model-detail-list__item {
    max-width: none;
    width: calc(325 / var(--vw-sp) * 100vw);
  }

  .model-detail__image {
    padding-right: calc(10 / var(--vw-sp) * 100vw);
    width: 100%;
    margin-top: calc(35 / var(--vw-sp) * 100vw);
    margin-left: auto;
    margin-right: auto;
  }

  .model-detail__image__02 {
    max-width: none;
    width: calc(325 / var(--vw-sp) * 100vw);
    position: relative;
    left: calc(2.5 / var(--vw-sp) * 100vw);
    margin-top: calc(45 / var(--vw-sp) * 100vw);
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
  }

  .model-detail-total {
    padding-top: calc(63 / var(--vw-sp) * 100vw);
    padding-bottom: calc(81 / var(--vw-sp) * 100vw);
    background: linear-gradient(to right, #70ce97, #8ac8f1);
    position: relative;
    margin-top: calc(45 / var(--vw-sp) * 100vw);
  }

  .model-detail-total:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='149' height='29' viewBox='0 0 149 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='149' height='29'%3E%3Crect width='149' height='29' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath d='M70.7678 26.4582L23.0177 0.809549C13.8606 -4.10911 17.3552 -18 27.7497 -18H123.25C133.645 -18 137.139 -4.1091 127.982 0.809551L80.2318 26.4583C77.2768 28.0455 73.7228 28.0455 70.7678 26.4582Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: calc(149 / var(--vw-sp) * 100vw);
    height: calc(29 / var(--vw-sp) * 100vw);
    display: block;
    position: absolute;
    top: calc(0 / var(--vw-sp) * 100vw);
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .model-detail-total__title {
    text-align: center;
  }

  .model-detail-total__title__label {
    padding-bottom: calc(12 / var(--vw-sp) * 100vw);
    color: var(--color-white);
    font-size: calc(36 / var(--vw-sp) * 100vw);
    font-weight: 700;
    letter-spacing: 0.05em;
    position: relative;
    text-shadow: calc(2 / var(--vw-sp) * 100vw) calc(2 / var(--vw-sp) * 100vw) 0px rgba(0, 0, 0, 0.1);
  }

  .model-detail-total__title__label:before {
    content: "";
    background: var(--color-white);
    border-radius: calc(50 / var(--vw-sp) * 100vw);
    display: block;
    max-width: calc(54 / var(--vw-sp) * 100vw);
    width: 100%;
    height: calc(5 / var(--vw-sp) * 100vw);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }

  .model-detail-total__bg {
    background-image: url(/assets/img/subsudy/model-case/new-house/bg_new-house_01_sp.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: calc(229 / var(--vw-sp) * 100vw);
    height: calc(108 / var(--vw-sp) * 100vw);
    display: block;
    position: absolute;
    right: calc(1 / var(--vw-sp) * 100vw);
    bottom: calc(1 / var(--vw-sp) * 100vw);
    margin: 0 auto;
    z-index: 10;
  }

  .model-detail-total__bg-03 {
    background-image: url(/assets/img/subsudy/model-case/new-house/bg_new-house_03_sp.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: calc(125 / var(--vw-sp) * 100vw);
    height: calc(160 / var(--vw-sp) * 100vw);
    display: block;
    position: absolute;
    left: calc(-9 / var(--vw-sp) * 100vw);
    bottom: calc(-1 / var(--vw-sp) * 100vw);
    margin: 0 auto;
    z-index: 10;
  }

  .page-button-menu {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s ease;
  }

  .page-button-menu.--visible {
    height: auto;
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    margin-top: calc(20 / var(--font-size) * 1rem);
  }

  .page-button-menu-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    gap: calc(20 / var(--vw-sp) * 100vw);
  }

  .page-button-menu-list__item {
    max-width: calc(340 / var(--vw-sp) * 100vw);
    width: 100%;
  }

  .page-button-menu-list__link {
    display: block;
    transition: 0.3s ease;
  }

  .page-button-menu-list__link[disabled] {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
  }

  .page-button-menu-list__link:hover {
    opacity: 0.7;
  }
}

/* ==========================================================================
  SUBSUDY
========================================================================== */
@media all and (min-width: 768px), print {
  .model-case-step {
    max-width: calc(1190 / var(--w) * 100cqi);
    width: 100%;
    margin-top: calc(75 / var(--w) * 100cqi);
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .model-case-step__flow {
    background-color: var(--color-white);
    box-shadow: calc(4 / var(--w) * 100cqi) calc(4 / var(--w) * 100cqi) 0px rgba(0, 0, 0, 0.1);
    border-radius: calc(50 / var(--w) * 100cqi) 0px;
    font-family: "Cabin", sans-serif;
    max-width: calc(188 / var(--w) * 100cqi);
    width: 100%;
    height: calc(50 / var(--w) * 100cqi);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 / var(--w) * 100cqi);
    position: absolute;
    top: calc(-118 / var(--w) * 100cqi);
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .model-case-step__flow__step {
    background: linear-gradient(to right, #70ce97, #8ac8f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: calc(20 / var(--w) * 100cqi);
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .model-case-step__flow__number {
    color: var(--main-color);
    line-height: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: calc(5 / var(--w) * 100cqi);
  }

  .model-case-step__flow__current {
    font-size: calc(30 / var(--w) * 100cqi);
    font-weight: 700;
    letter-spacing: 0;
  }

  .model-case-step__flow__total {
    font-size: calc(20 / var(--w) * 100cqi);
    font-weight: 700;
    letter-spacing: 0;
  }

  .model-case-step__title {
    text-align: center;
  }

  .model-case-step__title__label {
    padding-bottom: calc(30 / var(--w) * 100cqi);
    font-size: calc(32 / var(--w) * 100cqi);
    font-weight: 700;
    letter-spacing: 0.1em;
    position: relative;
  }

  .model-case-step__title__label:before {
    content: "";
    background: linear-gradient(to right, #70ce97, #8ac8f1);
    border-radius: calc(50 / var(--w) * 100cqi);
    display: block;
    max-width: calc(100 / var(--w) * 100cqi);
    width: 100%;
    height: calc(8 / var(--w) * 100cqi);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }

  .model-case-step__inner {
    margin-top: calc(65 / var(--w) * 100cqi);
  }

  .step-menu {
    display: flex;
    flex-wrap: wrap;
    gap: calc(28 / var(--w) * 100cqi);
  }

  .step-menu__item {
    max-width: calc(378 / var(--w) * 100cqi);
    width: 100%;
  }

  .step-menu__link {
    display: block;
    transition: 0.3s ease;
  }

  .step-menu__link[disabled] {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
  }

  .step-menu__link:hover {
    opacity: 0.7;
  }

  .step-menu__item__text {
    font-size: calc(12 / var(--font-size) * 1rem);
    text-align: center;
  }

  .plan-section {
    padding-top: calc(24 / var(--w) * 100cqi);
    margin-top: calc(125 / var(--w) * 100cqi);
  }

  .plan-section__title {
    max-width: calc(180 / var(--w) * 100cqi);
    width: 100%;
    position: absolute;
    top: calc(-24 / var(--w) * 100cqi);
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .plan-section__body {
    background-color: #fffdf1;
    padding: calc(64 / var(--w) * 100cqi) calc(132 / var(--w) * 100cqi) calc(82 / var(--w) * 100cqi) calc(128 / var(--w) * 100cqi);
    border-radius: calc(60 / var(--w) * 100cqi);
    position: relative;
  }

  .plan-section__header__title {
    max-width: calc(685 / var(--w) * 100cqi);
    width: 100%;
    position: relative;
    left: calc(17 / var(--w) * 100cqi);
    margin-left: auto;
    margin-right: auto;
  }

  .plan-section__contents {
    position: relative;
    z-index: 20;
    margin-top: calc(40 / var(--w) * 100cqi);
  }

  .plan-button-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(24 / var(--w) * 100cqi);
  }

  .plan-button-list__item {
    max-width: calc(478 / var(--w) * 100cqi);
    width: 100%;
  }

  .plan-button-list__link {
    transition: 0.3s ease;
    display: block;
  }

  .plan-button-list__link[disabled] {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
  }

  .plan-button-list__link:hover {
    opacity: 0.7;
  }

  .plan-button-list__item__text {
    padding-left: calc(70 / var(--font-size) * 1rem);
    font-size: calc(14 / var(--font-size) * 1rem);
    text-align: center;
  }

  body[data-page="model-case"] .page-container {
  }

  body[data-page="model-case"] .page-container__inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(60 / var(--w) * 100cqi);
    padding: 1px;
    background: linear-gradient(to right, #8ac8f1, #70ce97);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  body[data-page="model-case"] .page-container__inner {
    padding: calc(90 / var(--w) * 100cqi) calc(0 / var(--w) * 100cqi) calc(80 / var(--w) * 100cqi) calc(0 / var(--w) * 100cqi);
    margin-top: calc(-5 / var(--w) * 100cqi);
    position: relative;
  }

  body[data-cateogry="new-house"] .page-container__inner,
  body[data-cateogry="reform"] .page-container__inner {
    border-radius: 0 0 calc(60 / var(--w) * 100cqi) calc(60 / var(--w) * 100cqi);
  }

  body[data-page="model-case"] .model-case-step {
    margin-top: 0;
  }

  body[data-page="model-case"] .step-menu {
    max-width: calc(1060 / var(--w) * 100cqi);
    width: 100%;
    gap: calc(44 / var(--w) * 100cqi);
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page="model-case"] .step-menu__item {
    max-width: calc(508 / var(--w) * 100cqi);
  }

  body[data-page="model-case"] .model-case-step__inner {
    margin-top: calc(95 / var(--w) * 100cqi);
  }

  body[data-cateogry="new-house"] .page-container {
  }

  body[data-cateogry="new-house"] .page-container:before,
  body[data-cateogry="reform"] .page-container:before {
    background: linear-gradient(45deg, #8ac8f1, #70ce97);
  }

  body[data-cateogry="new-house"] .model-case-step,
  body[data-cateogry="reform"] .model-case-step {
    max-width: none;
  }

  body[data-cateogry="new-house"] .model-detail,
  body[data-cateogry="reform"] .model-detail {
    margin-top: calc(-40 / var(--w) * 100cqi);
    margin-bottom: calc(-80 / var(--w) * 100cqi);
    border-radius: 0 0 calc(60 / var(--w) * 100cqi) calc(60 / var(--w) * 100cqi);
  }
}

@media all and (max-width: 767px), print {
  .model-case-step {
    padding-left: calc(18 / var(--vw-sp) * 100vw);
    padding-right: calc(13 / var(--vw-sp) * 100vw);
    width: 100%;
    margin-top: calc(26 / var(--vw-sp) * 100vw);
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .model-case-step__flow {
    background-color: var(--color-white);
    box-shadow: calc(4 / var(--vw-sp) * 100vw) calc(4 / var(--vw-sp) * 100vw) 0px rgba(0, 0, 0, 0.1);
    border-radius: calc(50 / var(--vw-sp) * 100vw) 0px;
    font-family: "Cabin", sans-serif;
    max-width: calc(160 / var(--vw-sp) * 100vw);
    width: 100%;
    height: calc(40 / var(--vw-sp) * 100vw);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 / var(--vw-sp) * 100vw);
    position: absolute;
    top: calc(-70 / var(--vw-sp) * 100vw);
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .model-case-step__flow__step {
    background: linear-gradient(to right, #70ce97, #8ac8f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: calc(18 / var(--vw-sp) * 100vw);
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .model-case-step__flow__number {
    color: var(--main-color);
    line-height: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: calc(5 / var(--vw-sp) * 100vw);
  }

  .model-case-step__flow__current {
    font-size: calc(26 / var(--vw-sp) * 100vw);
    font-weight: 700;
    letter-spacing: 0;
  }

  .model-case-step__flow__total {
    font-size: calc(18 / var(--vw-sp) * 100vw);
    font-weight: 700;
    letter-spacing: 0;
  }

  .model-case-step__title {
    text-align: center;
  }

  .model-case-step__title__label {
    padding-bottom: calc(14 / var(--vw-sp) * 100vw);
    font-size: calc(22 / var(--vw-sp) * 100vw);
    font-weight: 700;
    letter-spacing: 0.04em;
    position: relative;
  }

  .model-case-step__title__label:before {
    content: "";
    background: linear-gradient(to right, #70ce97, #8ac8f1);
    border-radius: calc(50 / var(--vw-sp) * 100vw);
    display: block;
    max-width: calc(54 / var(--vw-sp) * 100vw);
    width: 100%;
    height: calc(5 / var(--vw-sp) * 100vw);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }

  .model-case-step__inner {
    margin-top: calc(0 / var(--vw-sp) * 100vw);
  }

  .step-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: calc(35 / var(--vw-sp) * 100vw);
  }

  .step-menu__item {
    max-width: calc(345 / var(--vw-sp) * 100vw);
    width: 100%;
  }

  .step-menu__link {
    display: block;
    transition: 0.3s ease;
  }

  .step-menu__link[disabled] {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
  }

  .step-menu__link:hover {
    opacity: 0.7;
  }

  .step-menu__item__text {
    font-size: calc(12 / var(--font-size) * 1rem);
    text-align: center;
  }

  .plan-section {
    padding-top: calc(24 / var(--vw-sp) * 100vw);
    margin-top: calc(55 / var(--vw-sp) * 100vw);
  }

  .plan-section__title {
    max-width: calc(160 / var(--vw-sp) * 100vw);
    width: 100%;
    position: absolute;
    top: calc(-24 / var(--vw-sp) * 100vw);
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .plan-section__body {
    background-color: #fffdf1;
    padding: calc(40 / var(--vw-sp) * 100vw) calc(5 / var(--vw-sp) * 100vw) calc(54 / var(--vw-sp) * 100vw) calc(5 / var(--vw-sp) * 100vw);
    border-radius: calc(40 / var(--vw-sp) * 100vw);
    position: relative;
  }

  .plan-section__header__title {
    max-width: none;
    width: calc(346 / var(--vw-sp) * 100vw);
    position: relative;
    left: calc(8 / var(--vw-sp) * 100vw);
    margin-left: auto;
    margin-right: auto;
  }

  .plan-section__contents {
    position: relative;
    z-index: 20;
    margin-top: calc(10 / var(--vw-sp) * 100vw);
  }

  .plan-button-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    gap: calc(21 / var(--vw-sp) * 100vw);
  }

  .plan-button-list__item {
    max-width: calc(478 / var(--vw-sp) * 100vw);
    width: 100%;
  }

  .plan-button-list__item.--model-case {
    max-width: calc(329 / var(--vw-sp) * 100vw);
  }

  .plan-button-list__item.--simulation {
    max-width: calc(312 / var(--vw-sp) * 100vw);
  }

  .plan-button-list__link {
    transition: 0.3s ease;
  }

  .plan-button-list__link[disabled] {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
  }

  .plan-button-list__link:hover {
    opacity: 0.7;
  }

  .plan-button-list__item__text {
    padding-left: calc(60 / var(--vw-sp) * 100vw);
    font-size: calc(10 / var(--vw-sp) * 100vw);
    text-align: center;
  }

  body[data-page="model-case"] .page-container {
    padding: calc(49 / var(--vw-sp) * 100vw) calc(0 / var(--vw-sp) * 100vw) calc(39 / var(--vw-sp) * 100vw) calc(0 / var(--vw-sp) * 100vw);
    width: calc(100% - calc(20 / var(--vw-sp) * 100vw));
    margin-top: calc(14 / var(--vw-sp) * 100vw);
    margin-left: calc(10 / var(--vw-sp) * 100vw);
    margin-right: calc(10 / var(--vw-sp) * 100vw);
  }

  body[data-page="model-case"] .page-container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(40 / var(--vw-sp) * 100vw);
    padding: 1px;
    background: linear-gradient(to right, #8ac8f1, #70ce97);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  body[data-page="model-case"] .model-case-step {
    padding-left: calc(22 / var(--vw-sp) * 100vw);
    padding-right: calc(17 / var(--vw-sp) * 100vw);
    margin-top: 0;
  }

  body[data-page="model-case"] .step-menu {
    width: 100%;
    gap: calc(44 / var(--vw-sp) * 100vw);
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page="model-case"] .step-menu__item {
    max-width: calc(315 / var(--vw-sp) * 100vw);
  }

  body[data-page="model-case"] .model-case-step__inner {
    margin-top: calc(47 / var(--vw-sp) * 100vw);
  }

  body[data-cateogry="new-house"] .page-container {
    padding-bottom: calc(66 / var(--vw-sp) * 100vw);
  }

  body[data-cateogry="new-house"] .page-container:before,
  body[data-cateogry="reform"] .page-container:before {
    background: linear-gradient(45deg, #8ac8f1, #70ce97);
  }

  body[data-cateogry="new-house"] .model-case-step,
  body[data-cateogry="reform"] .model-case-step {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }

  body[data-cateogry="new-house"] .model-detail,
  body[data-cateogry="reform"] .model-detail {
    margin-top: calc(-28 / var(--vw-sp) * 100vw);
    margin-bottom: calc(-66 / var(--vw-sp) * 100vw);
  }
}

@media all and (min-width: 768px) and (max-width: 950px), print {
  html,
  body,
  main {
    min-width: auto;
  }

  body[data-page="model-case"] .page-container {
  }
}