/* -----------------------------
  page
----------------------------- */
.materials-btn-list .c-btn .c-btn__arrow__icon svg {
  fill: var(--main-color);
}
@media all and (min-width: 768px), print {
  .c-btn-list.--400 .c-btn {
    width: calc(400 / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px), print {
  .c-btn-list.--400 .c-btn {
    width: calc(300 / var(--font-size) * 1rem);
  }
}

/* -----------------------------
  page
----------------------------- */
@media all and (min-width: 768px), print {
  .explanation-box {
    border-radius: calc(10 / var(--font-size) * 1rem);
  }
  .explanation-box__body {
    padding: calc(24 / var(--font-size) * 1rem);
  }
  .explanation-box__inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .explanation-box__image .c-image {
    width: calc(300 / var(--font-size) * 1rem);
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .c-btn-list.--340 .c-btn {
    width: calc(340 / var(--font-size) * 1rem);
  }
  .c-btn-list.--400 .c-btn {
    width: calc(400 / var(--font-size) * 1rem);
  }
  td .c-btn.--size-xs {
    width: 100%;
    max-width: calc(168 / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px), print {
  .explanation-box {
    border-radius: calc(10 / var(--font-size) * 1rem);
  }
  .explanation-box__body {
    padding: calc(24 / var(--font-size) * 1rem);
  }
  .explanation-box__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .explanation-box__image .c-image {
    width: calc(300 / var(--font-size) * 1rem);
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .c-btn-list.--340 .c-btn {
    width: calc(340 / var(--font-size) * 1rem);
  }
  .c-btn-list.--400 .c-btn {
    width: calc(400 / var(--font-size) * 1rem);
  }
  td .c-btn.--size-xs {
    width: 100%;
    max-width: calc(168 / var(--font-size) * 1rem);
  }
}

/* -----------------------------
  page
----------------------------- */
@media all and (min-width: 768px), print {
  .materials-btn-list {
    display: flex;
    justify-content: space-between;
  }
  .is-active.materials-btn.c-btn {
    pointer-events: none;
  }
  .is-active.materials-btn.c-btn .c-btn__link {
    background-color: #fff;
    color: var(--main-color);
    border-width: calc(3 / var(--font-size) * 1rem);
  }
  .materials-btn.c-btn .c-btn__inner {
    height: 100%;
  }
  .is-active.materials-btn.c-btn .c-btn-text .c-btn__text__label {
    color: var(--main-color);
  }
  .materials-btn a {
    display: block;
    height: 100%;
  }
}
@media all and (max-width: 767px), print {
  .materials-btn-list {
    display: flex;
    justify-content: space-between;
  }
  .is-active.materials-btn.c-btn {
    pointer-events: none;
  }
  .is-active.materials-btn.c-btn .c-btn__link {
    background-color: #fff;
    color: var(--main-color);
    border-width: calc(3 / var(--font-size) * 1rem);
  }
  .materials-btn.c-btn .c-btn__inner {
    height: 100%;
  }
  .is-active.materials-btn.c-btn .c-btn-text .c-btn__text__label {
    color: var(--main-color);
  }
  .materials-btn a {
    display: block;
    height: 100%;
  }
}

/* -----------------------------
  page
----------------------------- */
@media all and (min-width: 1025px), print {
  .performance-box {
    border-radius: 1.25rem;
    margin-top: 1.5rem;
  }
  .performance-box__inner {
    padding: 2rem;
    display: flex;
    align-items: center;
  }
  .performance-box__body {
  }
  .performance-box-heading {
    margin-bottom: 0.5rem;
  }
  .performance-box-heading__label {
    font-size: 1.125rem;
    font-weight: bold;
  }
  .performance-box__img {
    width: 22rem;
    flex-shrink: 0;
    margin-left: 1.5rem;
  }
  .performance-box__img .c-img {
    width: 100%;
  }
  * + .performance-box-list {
    margin-top: 0.5rem;
  }
  .performance-box-list__item {
    display: flex;
  }
  .performance-box-list__item::before {
    content: "・";
    display: block;
    margin-right: 0.25rem;
  }
}
@media all and (min-width: 768px) and (max-width: 1024px) {
  .performance-box {
    border-radius: 1.25rem;
    margin-top: 1.5rem;
  }
  .c-block-heading + .performance-box {
    margin-top: 0;
  }
  .performance-box__inner {
    padding: 2rem;
  }
  .performance-box__body {
  }
  .performance-box-heading {
    margin-bottom: 0.5rem;
  }
  .performance-box-heading__label {
    font-size: 1.125rem;
    font-weight: bold;
  }
  .performance-box__img {
    margin-top: 1.5rem;
  }
  .performance-box__img .c-img {
    width: 100%;
  }
  * + .performance-box-list {
    margin-top: 0.5rem;
  }
  .performance-box-list__item {
    display: flex;
  }
  .performance-box-list__item::before {
    content: "・";
    display: block;
    margin-right: 0.25rem;
  }
}
@media all and (max-width: 767px), print {
  .performance-box {
    border-radius: 1.25rem;
    margin-top: 1.5rem;
  }
  .c-block-heading + .performance-box {
    margin-top: 0;
  }
  .performance-box__inner {
    padding: 2rem;
  }
  .performance-box__body {
  }
  .performance-box-heading {
    margin-bottom: 0.5rem;
  }
  .performance-box-heading__label {
    font-size: 1.125rem;
    font-weight: bold;
  }
  .performance-box__img {
    margin-top: 1.5rem;
  }
  .performance-box__img .c-img {
    width: 100%;
  }
  * + .performance-box-list {
    margin-top: 0.5rem;
  }
  .performance-box-list__item {
    display: flex;
  }
  .performance-box-list__item::before {
    content: "・";
    display: block;
    margin-right: 0.25rem;
  }
}

/* -----------------------------
  page
----------------------------- */
@media all and (min-width: 768px), print {
  .additional-box.--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: calc(16 / var(--font-size) * 1rem);
  }
  .additional-box__item.--2row {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
  }
  .additional-box__item.--2row .c-cushion {
    height: 100%;
  }
  .c-cushion.--size-960 {
    border-radius: calc(10 / var(--font-size) * 1rem);
    padding-top: calc(24 / var(--font-size) * 1rem - 8 / var(--font-size) * 1rem);
  }
  .additional-box__item__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .additional-box__item.--2row .additional-box__item__inner {
    align-items: flex-start;
  }
  .additional-box__price {
    display: inline-block;
    font-size: calc(42.8 / var(--font-size) * 1rem) !important;
    font-weight: 700;
    margin-left: calc(5 / var(--font-size) * 1rem) !important;
  }
  .additional-box__unit {
    display: inline-block;
    font-size: calc(26.8 / var(--font-size) * 1rem) !important;
    font-weight: 700;
    margin-left: calc(5 / var(--font-size) * 1rem) !important;
  }
  .additional-box-column .additional-box__unit:first-child{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: calc(37 / var(--font-size)* 1rem);
    margin-bottom: calc(16 / var(--font-size)* 1rem);
  }
}
@media all and (max-width: 767px), print {
  .additional-box.--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: calc(10 / var(--font-size) * 1rem);
  }
  .additional-box__item.--2row {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
  }
  .additional-box__item .c-cushion {
    padding-left: calc(5 / var(--font-size) * 1rem) !important;
    padding-right: calc(5 / var(--font-size) * 1rem) !important;
    height: 100%;
  }
  .c-cushion.--size-960 {
    padding: calc(20 / var(--font-size) * 1rem);
    padding-top: calc(20 / var(--font-size) * 1rem - 8 / var(--font-size) * 1rem);
    border-radius: calc(10 / var(--font-size) * 1rem);
  }
  .additional-box__item__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .additional-box__item.--2row .additional-box__item__inner {
    align-items: flex-start;
  }
  .additional-box__price {
    display: inline-block;
    font-size: calc(42.8 / var(--font-size) * 1rem) !important;
    font-weight: 700;
    margin-left: calc(5 / var(--font-size) * 1rem) !important;
  }
  .additional-box__unit {
    display: inline-block;
    font-size: calc(18.8 / var(--font-size) * 1rem) !important;
    font-weight: 700;
    line-height: 1;
    margin-left: calc(5 / var(--font-size) * 1rem) !important;
  }
  .additional-box-column .additional-box__unit:first-child{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: calc(22 / var(--font-size)* 1rem);
    margin-bottom: calc(14 / var(--font-size)* 1rem);
  }
}

/* -----------------------------
  補助額
----------------------------- */
@media all and (min-width: 768px), print {
  .materials-price-box{
  }
  .materials-price-box__body{
    padding:calc(30 / var(--font-size) * 1rem) calc(25 / var(--font-size) * 1rem);
    border-radius:calc(10 / var(--font-size) * 1rem);
    padding-top: calc(30 / var(--font-size) * 1rem - 8 / var(--font-size) * 1rem);
  }
  .materials-price-box__border{
    background: linear-gradient(transparent  calc(14 / var(--font-size) * 1rem), var(--sub-color)  calc(14 / var(--font-size) * 1rem));
    padding-left: calc(10 / var(--font-size) * 1rem);
    padding-right: calc(10 / var(--font-size) * 1rem);
    padding-bottom: calc(8 / var(--font-size) * 1rem);
  }

  .materials-price-box.--basic{
  }
  .materials-price-box.--basic .materials-price-box__body{
    max-width:calc(100% / 2 - calc(8 / var(--font-size) * 1rem));
    width:100%;
  }
}
@media all and (max-width: 767px), print {
  .materials-price-box{
  }
  .materials-price-box__body{
    padding:calc(20 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem);
    border-radius:calc(10 / var(--font-size) * 1rem);
    padding-top: calc(20 / var(--font-size) * 1rem - 8 / var(--font-size) * 1rem);
  }
  .materials-price-box__border{
    background: linear-gradient(transparent  calc(14 / var(--font-size) * 1rem), var(--sub-color)  calc(14 / var(--font-size) * 1rem));
    padding-left: calc(10 / var(--font-size) * 1rem);
    padding-right: calc(10 / var(--font-size) * 1rem);
    padding-bottom: calc(8 / var(--font-size) * 1rem);
  }

  .materials-price-box.--basic{
    max-width:calc(360 / var(--font-size) * 1rem);
    width:100%;
  }
}