/* -----------------------------
  page
----------------------------- */
@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);
  }
  .c-table__component.js-scrollable > table th {
    white-space: nowrap;
  }
}

/* -----------------------------
  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: var(--main-color);
    color: #fff;
    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: var(--main-color);
    color: #fff;
    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__item + .additional-box__item {
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .additional-box__item.--2row .c-cushion {
    height: 100%;
  }
  .additional-box__item__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .additional-box__item__inner .c-cushion__body{
    width:100%;
  }
  .additional-box__item__inner.--type-02{
    
  }
  .additional-box__price {
    display: inline-block;
    font-size: calc(40 / var(--font-size) * 1rem) !important;
    font-weight: 700;
    margin-left: calc(40 / var(--font-size) * 1rem);
  }
  .additional-box__unit {
    display: inline-block;
    font-size: calc(24 / var(--font-size) * 1rem) !important;
    font-weight: 700;
  }
  .additional-drain{
    display:flex;
    align-items:center;
    justify-content: space-between;
    width:100%;
  }
  .additional-drain__contents{
    position: relative;
    top:calc(-5 / var(--font-size) * 1rem);

  }
  .additional-box__unit.--type-02 + .additional-box__price{
    margin-left: 0;
  }

  .c-cushion.--materials {
    padding: calc(8 / var(--font-size)* 1rem) calc(24 / var(--font-size)* 1rem) calc(12 / var(--font-size)* 1rem) calc(24 / var(--font-size)* 1rem);
    border-radius: calc(16 / var(--font-size)* 1rem);
  }
}
@media all and (max-width: 767px), print {
  .additional-box__item {
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .additional-box__item .c-cushion {
    height: 100%;
  }
  .additional-box__item__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .additional-box__price {
    display: inline-block;
    font-size: calc(24 / var(--font-size) * 1rem) !important;
    font-weight: 700;
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .additional-box__unit {
    display: inline-block;
    font-size: calc(14 / var(--font-size) * 1rem) !important;
    font-weight: 700;
  }
}

/* -----------------------------
  アンカーリンク
----------------------------- */

@media all and (min-width: 768px), print {
  .kasan-table tr td:first-child {
    border-bottom: 0;
  }
}

/* -----------------------------
  補助額
----------------------------- */
@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(560 / var(--font-size) * 1rem);
    width:100%;
  }
  .materials-price-box__border.--price{
    margin-left: calc(40 / var(--font-size) * 1rem);
  }
  .materials-price-box__border.--price .additional-box__price{
    margin-left: 0;
  }
  .materials-price-box__border.--price.--middle{
    position: relative;
    top:calc(-16 / var(--font-size) * 1rem);
  }

  .materials-price-box.--type02{
    max-width: calc(800 / var(--font-size)* 1rem);
    width:100%;
  }
  .materials-price-box.--type02.--1024 {
    max-width: calc(1024 / var(--font-size) * 1rem);
  }
}
@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{
    display: inline-block;
    background: linear-gradient(transparent  calc(20 / var(--font-size) * 1rem), var(--sub-color)  calc(20 / var(--font-size) * 1rem));
    padding-left: calc(8 / var(--font-size) * 1rem);
    padding-right: calc(10 / var(--font-size) * 1rem);
    padding-bottom: calc(4 / var(--font-size) * 1rem);
  }

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

/* -----------------------------
  モーダル
----------------------------- */
@media all and (min-width: 768px), print {
  .c-modal-title__label {
    font-size: calc(20 / var(--font-size) * 1rem);
  }
  .modal .l-section__body {
    height: calc(760 / var(--font-size) * 1rem);
  }
  .modal .l-block {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .c-modal-pagenation {
  }
}
@media all and (max-width: 767px), print {

}