@charset "UTF-8";

@import "settings.css";

/*============================================================================================
      Header
=============================================================================================*/
.header {
  container-type: size;
  display: flex;
  position: fixed;
  width: 100%;
  height: 76px;
  padding: 0 2.4rem 0;
  top: 0;
  align-items: center;
  background-color: var(--color-white);
  z-index: 99999999;
  transition: top 0.3s 0.1s, padding 0.3s;
}
.header::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgb(255 255 255 / 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s;
}
.header_inr {
  width: 100%;
  z-index: 10;
}
.header_logo{
  width: min(calc(var(--vw-calc-lg) * 296), 29.6rem);
}
.header_nav {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
.header_nav_lst {
  display: flex;
  gap: 3.2rem;
  height: 100%;
  min-height: 44px;
  align-items: baseline;
}
.header_nav_itm {
  display: flex;
  height: 100%;
  min-height: 42px;
  font-size: 1.4rem;
  color: var(--color-blue);
  align-items: center;
}
.header_nav_itm a {
  display: block;
  height: 100%;
  padding: 0;
}
.header_nav_itm_ttl {
  line-height: 2;
  padding-left: 0;
  cursor: default;
  z-index: 2;
}

@media (max-width:896px) {
  .header_nav_itm {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.8;
  }
  .header_nav_itm a {
    padding: 1.2rem 0;
  }
  .header_nav_itm a::before,
  .header_nav_itm a::after {
    display: block;
  }
  .header_logo{
    width: min(calc(var(--vw-calc-sm) * 200), 20rem);
  }
}

/*ハンバーガーメニュー表示のレスポンシブ幅（px）以上で矢印非表示*/
  @media (min-width: 896px) {
    .header_nav_itm_ttl.g_icon a::before,
    .header_nav_itm_ttl.g_icon a::after{
      display: none;
    }
    .header_nav_itm_ttl.g_icon a {
      padding-right: 0;
    }
    .header_nav_itm_ttl_mega {
      cursor: pointer;
      padding-right: 1.6rem;
    }
    .header_nav_itm_ttl.g_icon {
      padding-right: 0;
    }
    .header_nav_itm_ttl.u_ic::after {
      width: 0.8rem;
      height: 0.4rem;
      background-image: url(../img/common/arrow_pulldown.svg);
      background-repeat: no-repeat;
      background-size: cover;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
    .header_nav_itm .g_icon::before,
    .header_nav_itm .g_icon::after {
      display: none;
    }
  }

/* メガメニュー */
.header_nav_itm_megaBox {
  position: absolute;
  display: none;

  min-width: 100cqw; /* スクロールバー幅を除いた100vw */
  width: 100%;

  padding-top: 75px;
  top: 0;
  left: 0;

  box-shadow: 0px 8px 12px 0px rgba(0, 39, 71, 0.10);
}
.header_nav_itm_mega {
  padding: 8rem 0 10rem;
  background: var(--color-sky-blue);
}
.header_nav_itm_mega_inr {
  display: flex;
  justify-content: center;
  gap: 4rem;
}
.header_nav_itm_mega_left,
.header_nav_itm_mega_right{
  display: flex;
  gap: 3.2rem;
}
.header_nav_itm_mega_right {
  width: fit-content;
  flex-shrink: 0;
}
.header_nav_itm_mega_img {
  width: min(calc(var(--vw-calc-lg) * 150), 15rem);
  flex-shrink: 0;
}
.header_nav_itm_mega_Hd_subTtl{
  font-size: 1.3rem;
  color: var(--color-main);
}
.header_nav_itm_mega_Hd_ttl{
  font-size: 2.2rem;
  color: var(--color-main);
}
.header_nav_itm_mega_lst {
  display: grid;
  width: 100%;
  margin-top: 2.4rem;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 1.6rem;
  grid-row-gap: 1.6rem;
}
.header_nav_itm_mega_itm {
  position: relative;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
}

.header_nav_itm_mega_itm:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.header_nav_itm_mega_itm:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.header_nav_itm_mega_itm:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
.header_nav_itm_mega_itm:nth-child(4) { grid-area: 4 / 1 / 5 / 2; }
.header_nav_itm_mega_itm:nth-child(5) { grid-area: 5 / 1 / 6 / 2; }
.header_nav_itm_mega_itm:nth-child(6) { grid-area: 6 / 1 / 7 / 2; }
.header_nav_itm_mega_itm:nth-child(7) { grid-area: 7 / 1 / 8 / 2; }
.header_nav_itm_mega_itm:nth-child(8) { grid-area: 8 / 1 / 9 / 2; }
.header_nav_itm_mega_itm:nth-child(9) { grid-area: 1 / 2 / 2 / 3; }
.header_nav_itm_mega_itm:nth-child(10) { grid-area: 2 / 2 / 3 / 3; }
.header_nav_itm_mega_itm:nth-child(11) { grid-area: 3 / 2 / 4 / 3; }
.header_nav_itm_mega_itm:nth-child(12) { grid-area: 4 / 2 / 5 / 3; }
.header_nav_itm_mega_itm:nth-child(13) { grid-area: 5 / 2 / 6 / 3; }
.header_nav_itm_mega_itm:nth-child(14) { grid-area: 6 / 2 / 7 / 3; }
.header_nav_itm_mega_itm:nth-child(15) { grid-area: 7 / 2 / 8 / 3; }
.header_nav_itm_mega_itm:nth-child(16) { grid-area: 8 / 2 / 9 / 3; }

.header_nav_itm_mega_itm a {
  position: relative;
  display: block;
  padding-left:1.2rem;
  width: fit-content;
}
.header_nav_itm_mega_itm a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: calc(8/16 * 1.6rem);
  height: calc(1/16 * 1.6rem);
  background-color: var(--color-blue);
  transition: background-color 0.2s;
}

.header_btn {
  position: relative;
  display: block;
  min-width: 116px;

  color: var(--color-white);
  background-color: var(--color-blue);
  border: 0.1rem solid var(--color-blue);
  border-radius: var(--bdrs-infinite);

  font-size: 1.4rem;
  font-weight: 400;

  transition: color 0.2s, background 0.2s;
  overflow: hidden;
}
.header_btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
}


@media (any-hover: hover) {
  .header_nav_itm_mega_itm a:hover {
    color: var(--color-main);
  }
  .header_btn:hover {
    color: var(--color-blue);
    background-color: var(--color-white);
  }
}


/* @media (min-width: 1201px) { */
/* .js_scroll */
.header.js_scroll {
  padding: 0 35px 0 45px;
}
.header.js_scroll::before {
  opacity: 1;
}
.header.js_scroll .header_nav_itm {
  padding-top: 25px;
  padding-bottom: 25px;
}
.header.js_scroll .header_nav_itm_megaBox {
  padding-top: 0;
}


@media (max-width: 896px) {
  .header_nav_itm_mega_inr {
    display: block;
  }
  .header_nav {
    display: none;
    position: fixed;
    top: 54px;
    left: 0;
    width: 100%;
    height: calc(100vh - 50px);
    padding-bottom: 3.2rem;
    background-color: var(--color-sky-blue);
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .header_nav_lst {
    width: calc(100% - 2rem * 2);
    margin: 3.2rem auto 0;
    height: auto;
    flex-direction: column;
    gap: 0;
  }

  .header_nav_itm {
    width: 100%;
    position: relative;
    display: block;
    min-height: auto;
    border-top: 1px solid var(--color-border);
  }

  .header_nav_itm_ttl:not(:has(a)) {
    padding: 1.2rem 0;
  }

  .header_nav_itm::after {
    width: calc(17 / 16 * 1.6rem);
    height: calc(5 / 16 * 1.6rem);
    right: calc(12 / 16 * 1.6rem);
    mask-image: url(../img/common/icon_arrow_sm.svg);
    transition: right var(--transition);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color-blue);
    z-index: 1;
  }

  /* PCでメガメニューだったナビ */
  .header_nav_itm.js_acd::before {
    top: calc(12 / 16 * 1.6rem);
    bottom: auto;
  }
  .header_nav_itm.js_acd::after {
    display: none;
  }
  .header_nav_itm.js_acd .header_nav_itm_ttl::before {
    width: calc(13 / 16 * 1.6rem);
    height: calc(1 / 16 * 1.6rem);
    right: calc(15 / 16 * 1.6rem);
    top: 0;
    bottom: 0;
    margin-block: auto;
    border: unset;
    background-color: var(--color-blue);
  }
  .header_nav_itm.js_acd .header_nav_itm_ttl::after {
    width: calc(1 / 16 * 1.6rem);
    height: calc(13 / 16 * 1.6rem);
    top: calc(9/16 * 1.6rem);
    bottom: auto;
    right: calc(21 / 16 * 1.6rem);
    mask-image: none;
    border-radius: var(--bdrs-infinite);
    background-color:var(--color-blue);
    transition: 0.6s;
  }
  .header_nav_itm.js_acd.js_open .header_nav_itm_ttl::after {
    transform: rotate(90deg);
  }
  .header_nav_itm_ttl.u_ic::before{
    width: 4.4rem;
    height: 3rem;
    border: 0.1rem solid var(--color-blue);
    right: 0;
    border-radius: var(--bdrs-infinite);
  }

  .header_gnav_itm_ttl::before,
  .header_gnav_itm_ttl::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: var(--color-main);
    transition: all 0.4s linear;
    border-radius: calc(1px / 0);
    z-index: 1;
  }
  .header_gnav_itm_ttl::before {
    width: calc(15 / 16 * 1.6rem);
    height: calc(1 / 16 * 1.6rem);
    right: calc(14 / 16 * 1.6rem);
  }
  .header_gnav_itm_ttl::after {
    width: calc(1 / 16 * 1.6rem);
    height: calc(15 / 16 * 1.6rem);
    right: calc(20 / 16 * 1.6rem);
  }
  .header_gnav_itm_ttl_wrap.js_open .header_gnav_itm_ttl::after {
    -webkit-transform: rotate(90deg) translateY(0px);
    transform: rotate(90deg) translateY(0px);
  }

  .header_nav_itm:first-child{
    border-top: none;
  }

  .header_nav_itm_ttl {
    min-height: 3rem;
  }
  .header_nav_itm_mega_lst {
    display: none;
    margin-top: 2rem;
  }
  .header_nav_itm_mega_itm {
    border-bottom: 0.1rem solid var(--color-grey-04);
  }
  .header_nav_itm_mega_itm a{
    width: 100%;
    padding:0.8rem 0;
  }
  .header_nav_itm_mega_itm a::before{
    display: none;
  }
  .header_btn {
    margin: 3.2rem auto 0;
    width: calc(100% - 2rem * 2);
    font-size: 1.3rem;
  }
  .header_btn a {
    height: 52px;
  }
}

@media (max-width: 896px) {
  .header {
    height: 54px;
    padding: calc((16 / 16) * 1.6rem);
  }
  .header_inr {
    height: 100%;
    min-height: 0;
  }
  .header_nav_itm_megaBox {
    position: static;
    min-width: auto;
    margin-top: 1.6rem;
    margin-bottom: 1.2rem;
    padding-top: 0;
    box-shadow: unset;
  }
  .header_nav_itm_mega {
    padding: 0;
    background: unset;
  }
  .header_nav_itm_mega_cont {
    position: relative;
    display: block;
    width: 100%;
    margin-top: .8rem;
  }
  .header_nav_itm_mega_cont::before {
    content: "";
    position: absolute;
    width: 4.4rem;
    height: 3rem;
    border: 0.1rem solid var(--color-blue);
    top: calc(10 / 16 * 1.6rem);
    right: 0;
    border-radius: var(--bdrs-infinite);
    transition: background var(--transition);
  }
  .header_nav_itm_mega_left {
    width: 100%;
    gap: 0.8rem;
  }
  .header_nav_itm_mega_Hd {
    position: relative;
  }
  .header_nav_itm_ttl_mega_Hd::before {
    content: "";
    position: absolute;
    width: calc(13 / 16 * 1.6rem);
    height: calc(1 / 16 * 1.6rem);
    right: calc(16 / 16 * 1.6rem);
    top: 50%;
    transform: translateY(-50%);
    margin-block: auto;
    border: unset;
    background-color: var(--color-blue);
  }
  .header_nav_itm_ttl_mega_Hd::after {
    content: "";
    position: absolute;
    width: calc(1 / 16 * 1.6rem);
    height: calc(13 / 16 * 1.6rem);
    top: 0.8rem;
    right: calc(22 / 16 * 1.6rem);
    mask-image: none;
    border-radius: var(--bdrs-infinite);
    background-color:var(--color-blue);
    transition: 0.6s;
  }
  .header_nav_itm_ttl_mega.js_open .header_nav_itm_ttl_mega_Hd::before {
    display: none;
  }
  .header_nav_itm_ttl_mega.js_open .header_nav_itm_ttl_mega_Hd::after {
    transform: rotate(90deg) translateY(0px);
  }
  .header_nav_itm_mega_Hd::before {
    content: "";
    position: absolute;
    width: calc(13 / 16 * 1.6rem);
    height: calc(1 / 16 * 1.6rem);
    right: calc(11 / 16 * 1.6rem);
    top: calc(-6 / 16 * 1.6rem);
    bottom: 0;
    margin-block: auto;
    border: unset;
    background-color: var(--color-blue);
  }
  .header_nav_itm_mega_Hd::after {
    content: "";
    position: absolute;
    width: calc(1 / 16 * 1.6rem);
    height: calc(12 / 16 * 1.6rem);
    top: calc(16 / 16 * 1.6rem);
    bottom: auto;
    right: calc(17 / 16 * 1.6rem);
    mask-image: none;
    border-radius: var(--bdrs-infinite);
    background-color:var(--color-blue);
    transition: 0.6s;
  }
  .header_nav_itm_mega_Hd.js_open::before {
    display: none;
  }
  .header_nav_itm_mega_Hd.js_open::after {
    rotate: 90deg;
  }
  .header_nav_itm .header_nav_itm_mega_right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0;
    margin-top: 1.2rem;
  }
  .header_nav_itm_mega_right .header_nav_itm_mega_Hd::before,
  .header_nav_itm_mega_right .header_nav_itm_mega_Hd::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin-block: auto;
    transition: background var(--transition);
  }
  .header_nav_itm_mega_right .header_nav_itm_mega_Hd::before {
    width: 3.6rem;
    height: 2.4rem;
    border: 0.1rem solid var(--color-blue);
    right: 0;
    border-radius: var(--bdrs-infinite);
  }
  .header_nav_itm_mega_right .header_nav_itm_mega_Hd::after {
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color-blue);
    z-index: 1;
  }
  .header_nav_itm_mega_right .header_nav_itm_mega_Hd.g_icon__arrow::after {
    width: calc(17 / 16 * 1.6rem);
    height: calc(5 / 16 * 1.6rem);
    right: calc(16 / 16 * 1.6rem);
    mask-image: url(../img/common/icon_arrow_sm.svg);
    transition: right var(--transition);
    z-index: 1;
  }
  .header_nav_itm_mega_cont::before {
    content: "";
    position: absolute;
    width: 3.6rem;
    height: 2.4rem;
    border: 0.1rem solid var(--color-blue);
    top: calc(10 / 16 * 1.6rem);
    right: 0;
    border-radius: var(--bdrs-infinite);
    transition: background var(--transition);
  }
    .header_nav_itm_mega_itm.header_nav_itm_mega_itm_arrow{
    position: relative;
    border-bottom: none;
    width: 100%;
  }
  .header_nav_itm_mega_itm_arrow::before{
    content: "";
    position: absolute;
    display: block;
    width:calc(13/16 * 1.6rem);
    height:calc(4/16 * 1.6rem);
    top:0;
    bottom:0;
    right: 0;
    margin-block: auto;
    mask-image: url(../img/common/icon_arrow_sm.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--color-main);
  }
  .header_nav_itm_mega_itm_arrow::after{
    content: "";
    position: absolute;
    display: block;
    width: 3.6rem;
    height: 2.4rem;
    border: 0.1rem solid var(--color-blue);
    top: calc(10 / 16 * 1.6rem);
    right: 0;
    border-radius: var(--bdrs-infinite);
    transition: background var(--transition);
  }
  .header_nav_itm_ttl.js_acd.js_open .header_nav_itm_ttl::after {
    transform: rotate(90deg);
  }
  .header_nav_itm_mega_Hd_subTtl{
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
  }
  .header_nav_itm_mega_Hd_ttl{
    position: relative;
    font-size: 1.5rem;
    font-weight: 500;
  }
  .header_nav_itm_ttl_mega_Hd{
    position: relative;
  }
  .header_nav_itm_mega_img {
    width: min(calc(var(--vw-calc-sm) * 62), 6.2rem);
  }
  .header_nav_itm_mega_img img{
    aspect-ratio: 1 / 1;
    border-radius: calc(4/16 * 1.6rem);
  }
  .header_nav_itm_mega_itm {
    position: relative;
    font-size: 1.4rem;
    font-weight: 500;
  }
  .header_nav_itm_mega_itm::before{
    content: "";
    position: absolute;
    width:calc(12/16 * 1.6rem);
    height:calc(4/16 * 1.6rem);
    top:0;
    bottom:0;
    right: calc(12/16 * 1.6rem);
    margin-block: auto;
    mask-image: url(../img/common/icon_arrow_sm.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--color-blue);
  }
}


/*============================================================================================
      Footer
=============================================================================================*/
.footer {
  padding-top: 8rem;
  background-color: var(--color-sky-blue);
}
.footer_cont {
  padding-bottom: 8rem;
}
.footer_cont_wrap{
  display: flex;
  justify-content: space-between;
  gap: 3.2rem;
}
.footer_logo {
  margin-top: auto;
  width: fit-content;
}
.footer_top_logo{
  width: 28.2rem;
  height: 2.77rem;
  mix-blend-mode: multiply;
}
.footer_logo img {
  width: 100%;
  max-width: 181px;
  margin: 0;
}
.footer_btn {
  position: relative;
  display: block;
  max-width: 128px;
  max-height: 52px;
  color: var(--color-white);
  background-color: var(--color-blue);
  border: 0.1rem solid var(--color-blue);
  border-radius: var(--bdrs-infinite);
  font-size: 1.3rem;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
  overflow: hidden;
}
.footer_btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 2.1;
  padding: 1.2rem 0;
}

.footer_nav_lst {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 3.2rem 4rem ;
}
.footer_nav_itm_Ttl {
  white-space: nowrap;
}
.footer_nav_itm_inrLst {
  display: grid;
  grid-template-columns: repeat(4, auto);
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
}
.footer_nav_itm_inrItm a{
  white-space: nowrap;
  padding-left: 1.2rem;
  transition: background-color 0.2s, color 0.2s;
}
.footer_nav_itm_inrLst a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: calc(8/16 * 1.6rem);
  height: calc(1/16 * 1.6rem);
  background-color: var(--color-text);
  transition: background-color 0.2s;
}

.footer_nav_itm_inrItm a {
  transition: 0.2s;
}

.footer_btm{
  padding: 1.7rem 0;
  background-color: var(--color-main);
}

@media (any-hover: hover) {
  .footer_btn:hover {
    color: var(--color-blue);
    background-color: var(--color-white);
  }
}

@media screen and (max-width: 1110px) {
  .footer {
    padding-top: calc(32 / 16 * 1.6rem);
  }
  .footer_inr {
    padding: calc((100vw / var(--vw-value-sm)) * 40) 0;
  }
  .footer_cont {
    display: block;
    padding-bottom: 3.2rem;
  }
  .footer_nav {
    margin-top: calc(10 / 16 * 1.6rem);
  }
  .footer_nav_itm_Ttl {
    line-height: normal;
    position: relative;
    display: block;
    gap: 20;
    font-size: 1.5rem;
    font-weight: 700;
  }
  .footer_nav_itm_Ttl::before {
    width: calc(15 / 16 * 1.6rem);
    height: calc(2 / 16 * 1.6rem);
    right: calc(14 / 16 * 1.6rem);
  }
  .footer_nav_itm_Ttl::after {
    width: calc(2 / 16 * 1.6rem);
    height: calc(15 / 16 * 1.6rem);
    right: calc(20 / 16 * 1.6rem);
  }
  .footer_nav_itm_Ttl.js_open::after {
    -webkit-transform: rotate(90deg) translateY(0px);
    transform: rotate(90deg) translateY(0px);
  }
  .footer_nav_itm_inrLst {
    margin-top: 0;
    margin-left: calc(20 / 16 * 1.6rem);
  }
  .footer_nav_itm_inrItm + .footer_nav_itm_inrItm {
    margin-top: 0;
  }
  .footer_nav_itm_inrItm::before {
    display: none;
  }
}

@media screen and (max-width:896px){
  .footer_cont_wrap{
    flex-direction: column;
  }
  .footer_nav_itm_inrLst{
    margin-left: 0;
    grid-template-columns: repeat(2, auto);
    gap: 1.2rem;
  }
  .footer_nav_itm_inrItm a{
    white-space: nowrap;
    padding-left: 0;
  }
  .footer_nav_lst {
    grid-template-columns: repeat(1, auto);
    gap: 2rem;
  }
  .footer_con{
    padding-bottom: 3.2rem;
  }
  .footer_nav_itm_inrLst a::before{
    content: none;
  }
  .footer_btn{
    min-width: 100%;
  }
  .footer_btn a {
    line-height: 2.1;
  }
  .footer_top_logo{
    width: 25rem;
    height: auto;
    aspect-ratio: 10/1;
  }
  .footer_logo{
    margin: auto;
    max-width: 17rem;
  }
  .footer_btm{
    padding: 1.6rem 0;
  }
}

/*============================================================================================
      Contents
=============================================================================================*/

/*====================
      Common
====================*/
.main {
  padding-top: 16rem;
}
@media screen and (max-width:896px){
  .main {
    padding-top: 5.6rem;
  }
}
/*====================
      Topページ
====================*/
/* Top Common */
.top_ttl{
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-main);
}
.top_ttl_en{
  display: block;
  margin-bottom: 1.6rem;
  padding-left: calc(22/16 * 1.6rem);
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.3rem;
  font-family: var(--font-en);
}
.top_ttl_en::before{
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--color-main);
  border-radius: var(--bdrs-infinite);
}
.top_ttl_md{
  font-size: 2.4rem;
  color: var(--color-main);
  letter-spacing: calc(2.8/16 * 1.6rem);
}
@media screen and (max-width:1040px){
  .top_ttl{
    font-size: 3rem;
    font-weight: 350;
    line-height: 1.5;
  }
  .top_ttl_en::before{
    width: 0.4rem;
    height: 0.4rem;
  }
  .top_ttl_md{
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: calc(3.6/16 * 1.6rem);
  }
}

@media screen and (max-width:576px){
  .top_ttl{
    
    font-size: 2.4rem;
  }
  .top_ttl_en{
    margin-bottom: 0.8rem;
    padding-left: calc(13/16 * 1.6rem);
    font-size: 1.5rem;
    line-height: 1.86;
    letter-spacing: 0.3rem;
  }
}

/* MV */
.mv{
  margin-top: 70px;
  position: relative;
}
.mv_inr{
  position: relative;
  aspect-ratio: 1376 / 680;
}
/* スクロールダウンの位置 */
.mv_scroll {
  position: absolute;
  right: 3%;
  bottom: 0%;
  writing-mode: vertical-rl;
  font-size: 1.2rem;
  z-index: 999;
  color: var(--color-main);
}
/* 線のアニメーション部分 */
.mv_scroll::before {
  animation: scroll 4s infinite;
  background-color: var(--color-main);
  bottom: 0;
  content: "";
  height: calc((100vw / var(--vw-value-lg)) * 150);
  left: -4rem;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  z-index: 2;
}
/* 線の背景色 */
.mv_scroll::after {
  background-color: var(--color-border);
  bottom: 0;
  content: "";
  height: calc((100vw / var(--vw-value-lg)) * 150);
  left: -4rem;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  25% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
.mv_parts_01{
  position: absolute;
  display: flex;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  justify-content: flex-end;
  gap: calc((100vw / var(--vw-value-lg)) * 130);
}
.mv_lead{
  font-size: calc((100vw / var(--vw-value-lg)) * 30);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.6em;
  margin-top: 1.6rem;
}
.mv_img_itm{
  background: var(--color-sky-blue);
  overflow: hidden;
  position: relative;
}
.img-wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.imgSlider_img{
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: inline-block;
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: none;
}
/*製品のアニメーション*/
.mv_img_ei{
  position: absolute;
  top: 0;
  max-width: 46rem;
  /* animation: float 10s linear infinite; */
}
.mv_img_ei__shadow{
  position: absolute;
  top: calc((100vw / var(--vw-value-lg)) * 40);
  z-index: -1;
  max-width: 46rem;
  /* animation: shadow 10s linear infinite; */
}

@keyframes float {
  0%{
    opacity: 0%;
    transform: translateY(-25%);
  }
  5%{
    opacity: 0%;
  }
  15%{
    opacity: 100%;
    transform: translateY(0%);
  }
  65%{
    transform: translateY(-5%);
  }
  75%{
    opacity: 100%;
    transform: translateY(0%);
  }
  95% {
    opacity: 0%;
    transform: translateY(-25%);
  }
  100%{
    opacity: 0%;
  }
}
@keyframes shadow {
  0%{
    opacity: 0%;
    transform:scale(1.25);
  }
  5%{
    opacity: 0%;
  }
  15%{
    opacity: 100%;
    transform:scale(1);
  }
  75%{
    opacity: 100%;
    transform:scale(1);
  }
  95% {
    opacity: 0%;
    transform:scale(1.2);
  }
  100%{
    opacity: 0%;
  }
} 

.mv_img_03{
  width: calc((100vw / var(--vw-value-lg)) * 634);
  max-width: 100rem;
  height: calc((100vw / var(--vw-value-lg)) * 500);
  max-height: 78rem;
}
.mv_img_01{
  position: absolute;
  width: calc((100vw / var(--vw-value-lg)) * 240);
  height: calc((100vw / var(--vw-value-lg)) * 162);
  top: calc((65 / 1376) * 100%);
  left: calc((100vw / var(--vw-value-lg)) * 100);
}
.mv_img_02{
  position: absolute;
  width: calc((100vw / var(--vw-value-lg)) * 310);
  height: calc((100vw / var(--vw-value-lg)) * 238);
  left: 0;
  bottom: 0;
}
.mv_img_04{
  position: relative;
  width: calc((100vw / var(--vw-value-lg)) * 350);
  top: calc((100vw / var(--vw-value-lg)) * 320);
  left: calc((100vw / var(--vw-value-lg)) * -120);
  z-index: 3;
}
.mv_news{
  position: relative;
  padding-top: calc((24 / 1376) * 100%);
  padding-left: calc((24 / 1376) * 100%);
  padding-right: calc((100 / 1376) * 100%);
  bottom: 0;
  z-index: 1;
}
.mv_news_txt_data {
  flex-shrink: 0;
}
.mv_news_ttl{
  display: inline-block;
  width: fit-content;
  height: fit-content;
  color: var(--color-white);
  flex-shrink: 0;
  line-height: 1;
  background-color: var(--color-main);
  border: 0.1rem solid var(--color-main);
  padding: 0.4rem;
  margin-top: 0.4rem;
}
.mv_news_txtwrap{
  color: var(--color-main);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--color-blue), var(--color-blue));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: background-size 0.2s;
}
.mv_news_txtwrap:hover{
  color: var(--color-blue);
}

@media screen and (max-width:896px){
  .mv{
    margin-top: 50px;
    overflow: hidden;
  }
  .mv_lead{
    font-size: clamp(1.2rem,calc((100vw / var(--vw-value-md)) * 18),3rem);
  }
  .mv_img_04{
    left: calc((100vw / var(--vw-value-md)) * -20);
    top: auto;
    bottom: calc((100vw / var(--vw-value-md)) * -160);
  }
  .mv_news{
    max-width: 100%;
    width: 100%;
    padding: 0 10% 0 2rem;
    margin: 2rem 0 0;
    bottom: auto;
  }
  .mv_news_txtwrap {
    width: 100%;
    padding-top: .4rem;
  }
  .mv_news_txt{
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mv_news_ttl{
    display: inline-block;
    color: var(--color-white);
    background-color: var(--color-main);
    padding: calc(4/16 * 1.6rem);
    margin-top: 0;
  }
}

@media screen and (max-width:576px){
  .mv_news {
    padding: 0 2rem;
  }
  .mv_inr{
    aspect-ratio: 375 / 541;
  }
  .mv_lead{
    display: block;
    height: fit-content;
    margin: 0;
    font-size: clamp(1.4rem,calc((100vw / var(--vw-value-sm)) * 18),2.2rem);
  }
  .mv_parts_01{
    gap: calc((100vw / var(--vw-value-sm)) * 65);
    transform: translateY(-55%);
    align-items: center;
  }
  .mv_img_03{
    width: calc((100vw / var(--vw-value-sm)) * 150);
    height: calc((100vw / var(--vw-value-sm)) * 328);
  }
  .mv_img_02{
    width: calc((100vw / var(--vw-value-sm)) * 170);
    height: calc((100vw / var(--vw-value-sm)) * 160);
    z-index: -999;
  }
  .mv_img_04{
    top: calc((100vw / var(--vw-value-sm)) * -15);
    left: calc((100vw / var(--vw-value-sm)) * -75);
  }
  .mv_img_01{
    width: calc((100vw / var(--vw-value-sm)) * 150);
    height: calc((100vw / var(--vw-value-sm)) * 100);
    left: calc((100vw / var(--vw-value-sm)) * 38);
  }
  .mv_img_ei{
    width: calc((100vw / var(--vw-value-sm)) * 210);
    top: calc((100vw / var(--vw-value-sm)) * 300);
    left: calc((100vw / var(--vw-value-sm)) * -40);
  }
  .mv_img_ei__shadow{
    width: calc((100vw / var(--vw-value-sm)) * 210);
    top: calc((100vw / var(--vw-value-sm)) * 330);
    left: calc((100vw / var(--vw-value-sm)) * -40);
  }
  .mv_scroll{
    display: none;
  }
}

/* html {
  scroll-behavior: smooth;
} */
.scroll_down_wrap{
  width: 100%;
  position: absolute;
  bottom: -2rem;
}
.scroll_down {
  position: relative;
  width: 100%;
  height: 100vh;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.scroll_down:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(
    180deg,
    rgba(#000, 0) 0,
    rgba(#000, 0.8) 80%,
    rgba(#000, 0.8) 100%
  );
}
.scroll_down span {
  display: flex;
  position: absolute;
  width: fit-content;
  height: 15rem;
  margin: auto;
  padding-bottom: 0.7rem;
  right: 3.3vw;
  bottom: 0;
  justify-content: end;
  color: var(--color-main);
  font-size: 1.2rem;
  line-height: calc(32/12);
  letter-spacing: calc(2.4/16 * 1.6rem);
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  transition: 0.2s;
  overflow: hidden;
  z-index: 2;
}
.scroll_down span:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0.1rem;
  height: 15rem;
  background: var(--color-grey);
}
.scroll_down span:after {
  content: "";
  position: absolute;
  width: 0.1rem;
  height: 15rem;
  bottom: 0;
  left: 0;
  background: var(--color-main);
  animation: scrollDown 3s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes scrollDown {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

@media screen and (max-width:896px){
  .scroll_down_wrap{
    display: none;
  }
}


/* Section About Us */
.top_sec__about{
  padding-top: 16rem;
}
.top_about_img{
  max-width: 37.4rem;
  flex-shrink: 0;
}

@media screen and (max-width:896px){
  .top_sec__about{
    padding-top: 9rem;
  }
  .top_about_img{
    margin: 0 auto;
  }
}

/* Section kanelite FOAM */
.top_sec__form{
  background-image: url(../img/top/form_bg.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  margin-top: 16rem;
  padding-bottom: 12rem;
  background-position: center 10rem;
}
.l_wrap_inr:has(.top_form_kv){
  margin-top: -27.2rem;
}
.top_form_kv {
  width: calc((100vw / var(--vw-value-lg))* 1120);
  max-width: 1120px;
  margin: 0 auto;
}
.top_form_slider {
  overflow: hidden;
  width: 100%;
}
.top_form_slider_inr{
  display: flex;
  width: fit-content;
  animation: scrollLoop 20s linear infinite;
}
.top_form_slider_list{
  display: flex;
}
@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}
.top_form_img{
  width: calc((100vw / var(--vw-value-lg)) * 370);
  max-width: 37rem;
  margin-right: 2.4rem;
}
.top_form_box{
  padding-top: 8rem;
  display: flex;
  gap: 4rem;
}
.top_form_box_left{
  max-width: 44.4rem;
  flex-shrink: 0;
}

@media screen and (max-width:896px){
    .top_form_box{
    padding-top: 6.4rem;
    flex-wrap: wrap;
    gap: 3.2rem;
  }
  .top_sec__form{
    padding-bottom: 6.4rem;
    margin-top: 8rem;
  }
  .l_wrap_inr:has(.top_form_kv) {
    margin-top: -15rem;
  }
  .top_form_kv{
    width: calc((100vw / var(--vw-value-sm))* 240);
    /* max-width: 240px; */
  }
  .top_form_imgWrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0.8rem;
    grid-row-gap: 0.8rem;
  }
  .top_form_txtWrap{
    padding-bottom: 6.6rem;
  }
  .top_form_img{
    width: calc((100vw / var(--vw-value-sm)) * 144);
    margin-right: 1.5rem;
  }
}
@media screen and (max-width:576px){
  .top_sec__form{
    background-position: center 5rem;
  }

}

/* Section Kane Pearl */
.top_sec__pearl{
  margin: 12rem auto 0;
  position: relative;
  max-width: var(--cont-width);
}
.top_sec__pearl::before{
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 50rem;
  background: url(../img/top/pearl_bg.jpg);
  left: 50%;
  transform: translateX(-50%);
  top:  3.2rem;
}
.top_pearl_box{
  display: flex;
  gap: 7.2rem;
}
.top_pearl_img{
  flex-shrink: 0;
  max-width: 36.8rem;
  margin-left: 5.6rem;
}
.top_pearl_txt{
  margin-top: 9.6rem;
  padding-right: 5.6rem;
}

@media screen and (max-width:896px){
  .top_pearl{
    height: fit-content;
    margin-inline: auto;
    padding: 0;
  }
  .top_sec__pearl{
    background-image: url(../img/top/pearl_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 8rem;
    background-position: center 10rem;
  }
  .top_sec__pearl::before{
    display: none;
  }
  .top_pearl_box{
    flex-wrap: wrap;
    gap: 6.4rem;
  }
  .top_pearl_txt{
    margin-top: 0;
    padding-right: 0;
  }
}

@media screen and (max-width:576px){
  .top_sec__pearl{
    height: 100%;
    margin-top: 8rem;
    padding-bottom: 6.4rem;
  }
}

/* Section civil engineering */
.top_sec__civil{
  background-image: url(../img/top/civil_bg.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  margin-top: 12rem;
  padding: 7.8rem 0 8.2rem;
}
.top_civil_box{
  display: flex;
  gap: 7.2rem;
}
.top_civil_img{
  flex-shrink: 0;
  max-width: 39.2rem;
}
.top_civil_category{
  background: var(--color-table-light-blue);
  padding: 0.4rem 0.8rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
}
.top_civil_category_box{
  display: flex;
  gap: .8rem;
  margin-top: .8rem;
}
@media (max-width: 1040px) {
  .top_civil_box{
    gap: 4rem;
  }
}
@media (max-width: 896px) {
  .top_civil_box{
    flex-wrap: wrap-reverse;
    gap: 6.4rem;
  }
  .top_civil_img,
  .top_pearl_img{
    width: 100%;
    max-width: 32.7rem;
    margin: 0 auto;
  }
  .top_sec__civil{
    padding: 0 0 6.4rem;
    margin-top: 8rem;
    background-position: center 10rem;
  }
}
@media (max-width: 576px) {
  .top_civil_category_box{
    display: block;
    width: fit-content;
  }
}

/* Section NEWS */
.top_sec__news{
  margin-top: 12rem;
}
.top_ttl__news{
  min-width: 200px;
  height: fit-content;
  grid-area: 1 / 1 / 2 / 2;
}
.top_news{
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: repeat(2, auto);
  grid-template-rows: 5rem auto;
  grid-row-gap: 2rem;
  column-gap: 10.4rem;
}
.top_news_lst {
  width: 100%;
  max-width: 800px;
  grid-area: 1 / 2 / 3 / 3;
}
.top_news_lst li:last-child{
  border-bottom: none;
}
.top_news_btn {
  height: fit-content;
  grid-area: 2 / 1 / 3 / 2;
}

@media screen and (max-width: 896px) {
  .top_sec__news{
    margin-top: 8rem;
  }
  .top_news {
    display: block;
  }
  .top_news_lst{
    margin-top: 3.8rem;
  }
  .top_news_itm a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.6rem 0;
  }
  .top_news_itm_txt {
    padding-right: 0;
  }
  .g_icon.top_news_itm_arrow{
    padding-right: 0;
  }
  .g_icon.top_news_itm_arrow::before,
  .g_icon.top_news_itm_arrow::after {
    display: none;
  }
  .top_news_list_txt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}


/* Section CATALOG and FAQ */
.top_sec__others{
  margin: 16rem 0 12rem;
}
.top_others_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
}
.top_others_list li:nth-child(2n-1){
  border-right: .1rem solid var(--color-border);
  padding-right: 4.8rem;
}
.top_others_list li:nth-child(2n){
  padding-left: 4.8rem;
}
.top_catalog_img{
  flex-shrink: 0;
  width: min(calc(var(--vw-calc-lg) * 200), 20rem);
}
.top_others_lst{
  margin: 10rem auto 12rem auto;
}
.top_others_itm:nth-child(1){
  padding-right: 4.8rem;
}
.top_others_itm:nth-child(2){
  padding-left: 4.8rem;
  border-left: 0.2rem solid var(--color-border);
}
.top_catalog_wrap{
  display: grid;
  grid-template-columns: auto 13.4rem;
  grid-template-rows: repeat(2, auto);
  grid-template-rows: auto 4.5rem;
  grid-column-gap: 3.2rem;
}
.top_catalog_lead{
  height: fit-content;
  grid-area: 1 / 1 / 2 / 2;
}
.top_others_lead {
  line-height: 1.5;
}

@media screen and (max-width: 896px){
  .top_sec__others{
    margin: 8rem 0;
  }
  .top_catalog_box{
    width: 100%;
  }
  .top_others_list{
    display: block;
  }
  .top_others_list li{
    margin-top: 8.8rem;
  }
  .top_others_list li:nth-child(2n-1){
    border-right: none;
    padding-right: 0;
  }
  .top_others_list li:nth-child(2n){
    padding-left: 0;
  }
  .top_others_list li:first-child{
    margin-top: 0;
  }
  .top_catalog_img{
    margin: 0 auto;
    width: 50%;
  }
}


/*====================
      会社情報
====================*/
.sec_msg {
  padding-top: 7rem;
  margin-top: -7rem;
}
.company_message{
  display: flex;
  gap: 4.8rem;
  margin-top: 4.8rem;
}
.company_message_name{
  margin-left: 1.6rem;
}
.company_message_img{
  min-width: min(calc(var(--vw-calc-lg) * 392), 39.2rem);
}
.company_bd__p{
  padding: 4rem;
}
.company_profile_border{
  border-bottom: .1rem solid var(--color-border);
  margin-bottom: 2.4rem;
  padding-bottom: 2.4rem;
}
.company_profile dt{
  float: left;
  color: var(--color-main);
  font-weight: 500;
}
.company_profile dd{
  padding-left: 15.2rem;
}
.company_history_year{
  width: 8.8rem;
  text-align: center;
  border-right: .1rem solid var(--color-border);
  line-height: 1;
  flex-shrink: 0;
  color: var(--color-main);
}
.company_history_year__last{
  padding-bottom: 12rem;
}
.company_history_circle{
  position: relative;
  line-height: var(--line-height);
  padding: 2.4rem 3.2rem 2.4rem 0;
}
.company_history_circle::after{
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50vw;
  background: var(--color-main);
  position: absolute;
  right: -0.8rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.company_history_num {
  font-size: 2.2rem;
  font-family: var(--font-en);
  letter-spacing: 2.2px;
  white-space: nowrap;
}
.company_history_day{
  min-width: 6rem;
}
.company_history_list{
  margin-top: 4.8rem;
}
.company_btn_list{
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
}
.company_list_itm{
  border-bottom: .1rem solid var(--color-border);
  padding-bottom: 3.2rem;
}
.company_list_itm:last-child{
  border-bottom: none;
  padding-bottom: 0;
}
.company_list_ttl{
  min-width: 9.6rem;
  font-size: 1.8rem;
  color: var(--color-main);
}
.company_list_txt{
  max-width: 56rem;
}
.company_list_address dt{
  float: left;
}
.company_list_address dd{
  padding-left: 3.8rem;
}
.company_list_address .company_list_num--lg dd{
  padding-left: 10.2rem;
}
.company_list_img{
  border-radius: .8rem;
}
.company_map_pc {
  width: 100%;
  height: auto;
  aspect-ratio: 456 / 125;
  border-radius: 0.8rem;
}
.company_map_sp {
  width: 100%;
  height: auto;
  aspect-ratio: 327 / 140;
  border-radius: 0.4rem;
}

@media (max-width: 1110px) {
  .company_message{
    flex-wrap: wrap;
    gap: 2.4rem;
  }
  .company_message_img{
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: block;
  }
  .company_history_itm{
    display: block;
    padding-top: 3.2rem;
  }
  .company_history_list{
    width: 100%;
    margin: 0 auto;
  }
  .company_list_txt{
    max-width: none;
  }
  .company_btn_list{
    flex-wrap: wrap;
    margin-top: 3.2rem;
  }
  .company_btn_list .g_btn{
    width: 100%;
  }
  .company_btn_list li{
    margin-top: 2.4rem;
  }
  .company_btn_list li:first-child{
    margin-top: 0;
  }
}
@media (max-width: 896px) {
  .company_profile_border{
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
  }
  .company_message{
    margin-top: 3.2rem;
  }
  .company_list_itm,
  .company_list_box{
    display: block;
  }
  .company_history_year__last{
    padding-bottom: 4rem;
  }
}
@media screen and (max-width:576px) {
  .company_message_img{
    margin: 0;
    width: 100%;
    max-width: none;
    min-width: auto;
  }
  .company_bd__p{
    padding: 2.4rem;
  }
  .company_profile dt{
    float: none;
  }
  .company_history_list{
    margin-top: 3.2rem;
  }
  .company_profile dd{
    padding-left: 0;
  }
  .company_list{
    border-top: .1rem solid var(--color-border);
  }
  .company_list_itm{
    padding-bottom: 2.4rem;
  }
}


/*====================
      お知らせ一覧
====================*/
.news_main{
  width: 100%;
  max-width: 85.6rem;
}
.news_txt {
  margin: 16rem auto 9.6rem;
  width: calc(100% - 2rem * 2);
  max-width: 1120px;
}
.news_flex {
  display: flex;
  flex-direction: row-reverse;
  gap: 8rem;
}
.news_list_itm{
  border-bottom: .1rem solid var(--color-border);
}
.news_list_txt{
  text-decoration: none;
  color: var(--color-main);
  background-image: linear-gradient(90deg, var(--color-blue), var(--color-blue));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: background-size 0.2s;
  display: inline;
}
.news_list_itm:hover .news_list_txt{
  color: var(--color-blue);
  background-size: 100% 1px;
}
.news_list_link{
  padding-top: 1.6rem;
  display: block;
  color: var(--color-main);
  padding-bottom: 1.6rem;
}
.news_list_txt{
  display: inline;
}
.news_list_itm:first-child a{
  padding-top: 0;
}
.news_list_itm_cap{
  line-height: 3.6rem;
  font-size: 1.4rem;
  margin-bottom: .8rem;
}
.news_list_date{
  margin-right: 2rem;
}
.news_list_label{
  display: inline-block;
  background-color: var(--color-main);
  color: var(--color-white);
  border: .1rem solid var(--color-main);
  padding: .4rem;
  font-size: 1.2rem;
  line-height: 1;
  box-sizing: border-box;
}
.news_list_label__wh{
  background-color: var(--color-white);
  color: var(--color-main);
  border: .1rem solid var(--color-main);
  margin-right: .8rem;
}
.news_pdf::after{
  filter: brightness(0) saturate(100%) invert(18%) sepia(82%) saturate(1494%) hue-rotate(186deg) brightness(87%) contrast(103%);
}
.news_list_itm:hover .news_pdf::after{
  filter: none;
}

@media (max-width: 896px) {
  .news_list_itm:active .news_list_txt{
  text-decoration: underline;
  }
  .news_flex{
    gap: 4rem;
    margin: 0 auto;
  }
  .news_main{
    margin: 0 auto;
    width: calc(100% - 2rem * 2);
  }
  .news_list_itm_cap{
    line-height: 1.757;
    font-size: 1.6rem;
    margin-bottom: .6rem;
  }
  .news_list_date {
    font-size: 1.4rem;
    line-height: 2.3;
  }
}

@media screen and (max-width:576px){
  .news_flex{
    gap: 2.4rem;
  }
  .news_list_link{
    padding-right: 6rem;
  }
  .news_list_date{
    margin-right: 1.6rem;
  }
}


/*====================
      お知らせ詳細
====================*/
.news_img{
  display: table;
  margin: 0 auto;
}
.news_img_cap{
  display: table-caption;
  caption-side: bottom;
  line-height: normal!important;
  font-size: 1.2rem;
  margin-top: .8rem;
}
.news_table{
  min-width: auto;
  font-size: 1.6rem;
}
.news_table th,
.news_table td{
  padding: 1.6rem;
}
.news_table tr td{
  white-space: normal;
}
.news_table_ttl{
  width: 35%;
}
.news_btn a{
  padding: calc(8/16 * 1.6rem) calc(16/16 * 1.6rem) calc(8/16 * 1.6rem) calc(42/16 * 1.6rem);
  justify-content: center;
}

@media screen and (max-width:896px){
  .news_table tr td{
    border-right: none;
  }
  .news_table td{
    width: 100%;
    display: block;
  }
}

@media screen and (max-width:576px){
  .news_img{
    width: 85%;
  }
}


/*==========================
      プライバシーポリシー
==========================*/
.policy_list{
  line-height: 3.6rem;
}

@media screen and (max-width:576px){
  .policy_list{
    line-height: 2.8rem;
  }
}


/*====================
      よくあるご質問
====================*/
.faq_list .faq_item+ .faq_item {
  margin-top: 2.4rem;
}
.faq_list .faq_item {
  border: 0.1rem solid var(--color-border);
  border-radius: 0.8rem;
  padding: 2.4rem;
}
.faq_item_head {
  position: relative;
  font-size: 1.8rem;
  line-height: 1.66667;
  cursor: pointer;
  padding-left: 3.1rem;
}
.faq_item_head::before {
  content: "Q";
  top: 0;
  left: 0;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 1.8rem;
  line-height: 1.66667;
}
.faq_item_head__ttl {
  width: 100%;
  padding-right: 7rem;
}
.faq_item_head__btn {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 5rem;
  height: auto;
  aspect-ratio: 5/3;
  border: 0.1rem solid var(--color-blue);
  border-radius: 2.4rem;
}
.faq_item_head__btn::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 1.2rem;
  height: 0.1rem;
  border: unset;
  background-color: var(--color-blue);
  margin-block: auto;
}
.faq_item_head__btn::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 0.1rem;
  height: 1.2rem;
  border-radius: var(--bdrs-infinite);
  background-color: var(--color-blue);
  transition: 0.6s;
}
.faq_item_body.js_acd_fap_trg {
  display: none;
}
.faq_item.js_acd_fap.js_open .faq_item_head__btn::before {
  display: none;
}
.faq_item.js_acd_fap.js_open .faq_item_head__btn::after {
  top: 28%;
  transform: rotate(90deg);
}

.faq_itm__a {
  color: var(--color-text);
  padding-top: 2.4rem;
  padding-left: 3.1rem;
  margin-top: 2.4rem;
}
.faq_itm__a.u_ic::before {
  left: 0;
  color: var(--color-main);
  font-size: 1.8rem;
  line-height: 1.66667;
  font-family: var(--font-en);
}
.faq_itm__a.u_ic::before {
  content: "A";
  top: 2.4rem;
}
.faq_itm__a.u_ic::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background-color: var(--color-border);
}
.faq_table {
  border: 0.1rem solid var(--color-border);
  border-collapse: collapse; 
  text-align: center;
  table-layout: fixed;
  width: 100%;
}
.faq_table thead {
  color: var(--color-white);
  background-color:  var(--color-main);
}
.faq_table thead th {
  padding: 0.8rem 0;
  border: 0.1rem solid var(--color-border);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  width: 12.8rem;
}
.faq_table tbody th {
  padding: 1.6rem;
  border: 0.1rem solid var(--color-border);
  vertical-align: middle;
  background-color: var(--color-white-blue);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.faq_table tbody td {
  padding: 1.6rem;
  vertical-align: middle;
  border: 0.1rem solid var(--color-border);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width:896px) {
  .faq_list .faq_item+ .faq_item {
    margin-top: 1.6rem;
  }
  .faq_list .faq_item {
    padding: 1.6rem;
  }
  .faq_item_head {
    font-size: 1.5rem;
    line-height: 1.75;
    padding-left: 1.9rem;
  }
  .faq_item_head::before {
    content: "Q";
    top: 0;
    left: 0;
    color: var(--color-main);
    font-family: var(--font-en);
    font-size: 1.4rem;
    line-height: 1.75;
  }
  .faq_item_head::after {
    width: 4.4rem;
    aspect-ratio: 22/15;
  }
  .faq_item_head__ttl {
    width: 100%;
    padding-right: 6rem;
  }
  .faq_item_head__btn {
    width: 4.4rem;
    aspect-ratio: 22/15;
  }
  .faq_item_head__btn::before {
    width: 1.0rem;
  }
  .faq_item_head__btn::after {
    height: 1rem;
  }

  .faq_itm__a {
    padding-top: 1.6rem;
    padding-left: 1.9rem;
    margin-top: 1.6rem;
  }
  .faq_itm__a.u_ic::before {
    font-size: 1.4rem;
    line-height: 1.75;
  }
  .faq_itm__a.u_ic::before {
    top: 1.6rem;
  }
}

/*====================
      リンク集
====================*/
.link_itm{
  border: 1px solid var(--color-border);
  border-radius: 0.8rem;
}
.link_itm a {
  display: block;
  padding: 2.4rem;
}
.link_company_list{
  display : -ms-grid ;
  display : grid ;
  -ms-grid-columns : 1fr 32px 1fr;
      grid-template-columns : repeat(2, 1fr) ;
  -ms-grid-rows : 1fr 32px 1fr 32px 1fr;
      grid-template-rows : repeat(3, 1fr) ;
  grid-column-gap : 32px;
  grid-row-gap : 32px ;
}
.link_company_list > *:nth-child(1){
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.link_company_list > *:nth-child(2){
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.link_company_list > *:nth-child(3){
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.link_company_list > *:nth-child(4){
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.link_company_list > *:nth-child(5){
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
.link_company_list > *:nth-child(6){
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
.link_group_list{
  display : -ms-grid ;
  display : grid ;
  -ms-grid-columns : 1fr 32px 1fr 32px 1fr;
      grid-template-columns : repeat(3, 1fr) ;
  -ms-grid-rows : 1fr ;
      grid-template-rows : 1fr ;
      grid-column-gap : 32px;
      grid-row-gap : 32px ;
}
.link_group_list > *:nth-child(1){
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.link_group_list > *:nth-child(2){
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.link_group_list > *:nth-child(3){
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.link_public_list{
  display : -ms-grid ;
  display : grid ;
  -ms-grid-columns : 1fr 32px 1fr 32px 1fr;
      grid-template-columns : repeat(3, 1fr) ;
  -ms-grid-rows : 1fr 32px 1fr;
      grid-template-rows : repeat(2, 1fr) ;
      grid-column-gap : 32px;
      grid-row-gap : 32px ;
}
.link_public_list > *:nth-child(1){
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.link_public_list > *:nth-child(2){
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.link_public_list > *:nth-child(3){
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.link_public_list > *:nth-child(4){
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  }
.link_public_list > *:nth-child(5){
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.link_public_list > *:nth-child(6){
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.link_itm_text{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: clamp(1.8rem, calc(var(--vw-calc-lg) * 22), 2.2rem);;
  font-weight: 700;
  color: var(--color-text);
}

@media screen and (max-width:896px){
  .link_itm a{
    padding: 1.4rem;
  }
  .link_company_list{
    -ms-grid-columns : 1fr 24px 1fr;
        grid-template-columns : repeat(2, 1fr) ;
    -ms-grid-rows : 1fr 24px 1fr 24px 1fr;
    grid-template-rows : repeat(3, 1fr) ;
    grid-column-gap : 24px;
    grid-row-gap : 24px ;
  }
  .link_company_list > *:nth-child(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .link_company_list > *:nth-child(2){
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .link_company_list > *:nth-child(3){
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .link_company_list > *:nth-child(4){
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .link_company_list > *:nth-child(5){
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  .link_company_list > *:nth-child(6){
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
  .link_group_list{
    -ms-grid-columns : 1fr 24px 1fr;
    grid-template-columns : repeat(2, 1fr) ;
    -ms-grid-rows : 1fr 24px 1fr;
    grid-template-rows : repeat(2, 1fr) ;
    grid-column-gap : 24px;
    grid-row-gap : 24px ;
  }
  .link_group_list > *:nth-child(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .link_group_list > *:nth-child(2){
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .link_group_list > *:nth-child(3){
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .link_group_list > *:nth-child(4){
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .link_public_list{
    -ms-grid-columns : 1fr 24px 1fr;
        grid-template-columns : repeat(2, 1fr) ;
    -ms-grid-rows : 1fr 24px 1fr 24px 1fr;
    grid-template-rows : repeat(3, 1fr) ;
    grid-column-gap : 24px;
    grid-row-gap : 24px ;
  }
  .link_public_list > *:nth-child(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .link_public_list > *:nth-child(2){
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .link_public_list > *:nth-child(3){
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .link_public_list > *:nth-child(4){
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  }
  .link_public_list > *:nth-child(5){
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  .link_public_list > *:nth-child(6){
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
  .link_itm_text{
    font-size: clamp(1.6rem, calc(var(--vw-calc-md) * 18), 2.2rem);;
  }
}

@media screen and (max-width:576px){
  .link_itm a{
    padding: 1.6rem;
  }
  .link_company_list,.link_group_list,.link_public_list{
    display: block;
  }
  .link_itm picture{
    width: min(calc(var(--vw-calc-sm) * 296), 56rem);
    margin: 0 auto;
  }
  .link_itm_text{
    display: block;
    font-weight: 400;
  }
  .link_company_list .g_icon.g_icon__tab {
    padding-right: 6rem;
  }
  .link_group_list .g_icon.g_icon__tab {
    padding-right: 6rem;
  }
  .link_public_list .g_icon.g_icon__tab {
    padding-right: 6rem;
  }
}


/*====================
      枠組壁工法住宅
====================*/
.framed_wall_table .g_table_detail__col01,
.framed_wall_table th:not(.g_table_detail__col02) {
  position: sticky;
  left: 0;
}

@media (max-width:896px) {
  .framed_wall_table .g_table_detail__col01,
  .framed_wall_table th:not(.g_table_detail__col02) {
    position: static;
  }
}


/*====================
      鉄骨造住宅
====================*/
.steel_construction_table .g_table_detail__col01,
.steel_construction_table th:not(.g_table_detail__col02) {
  position: sticky;
  left: 0;
}

@media (max-width:896px) {
  .steel_construction_table .g_table_detail__col01,
  .steel_construction_table th:not(.g_table_detail__col02) {
    position: static;
  }
}


/*====================
      お問い合わせ
====================*/
.contact_list{
  line-height: 3.6rem;
  margin-top: 2.4rem;
}
.contact_form .contact_form01,
.contact_form .contact_form02{
  opacity: 0.3;
  pointer-events: none;
  transition: var(--transition);
}
.contact_form:has(input[type="checkbox"]:checked) .contact_form01,
.contact_form:has(input[type="checkbox"]:checked) .contact_form02{
  opacity: 1;
  pointer-events: all;
}

.contact_checkbox{
  margin: 8rem auto;
  width: fit-content;
}
.contact_checkbox input[type="checkbox"]{
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  border: 0.2rem solid var(--color-border);
  border-radius: 0.4rem;
  vertical-align: text-bottom;
  appearance: none;
}
.contact_checkbox input[type="checkbox"]:checked{
  background: var(--color-blue);
  border-color: var(--color-blue);
}
.contact_checkbox input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  content: '';
}
.contact_form01{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2.4rem;
}
.contact_form02 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 2.4rem;
  margin-top: 2.4rem;
}
.contact_form_itm{
  background-color: var(--color-blue);
  border-radius: 1.6rem;
  color: var(--color-white);
  border: .1rem solid var(--color-border);
  padding: 2.4rem;
  height: fit-content;
  display: grid;
  grid-row: span 2;
  gap: 0.8rem;
  grid-template-rows: subgrid;
  transition: var(--transition);
}
.contact_form_itm_btm{
  height: 8.4rem;
  display: flex;
  align-items: center;
}
.contact_bd{
  background-color: var(--color-blue);
  border-radius: 1.6rem;
  color: var(--color-white);
  border: .1rem solid var(--color-border);
}
.contact_form_itm:hover{
  background: var(--color-white);
  color: var(--color-blue);
}
.contact_link{
  display: block;
  height: 100%;
  padding: 2.4rem;
}
.contact_link_itm{
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  height: 8.4rem;
}
.g_icon.contact_icon{
  font-size: 2.2rem;
  padding-right: 0;
}
.contact_icon::before{
  background: var(--color-white);
}

@media screen and (max-width:896px){
  .contact_form01,
  .contact_form02{
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
  }
  .contact_form01 a,
  .contact_form02 a{
    width: 100%;
  }
}

@media screen and (max-width:576px){
  .contact_list{
    line-height: inherit;
    margin-top: 3.2rem;
  }
  .contact_form_itm_btm{
    height: 5.6rem;
  }
  .g_icon.contact_icon{
    font-size: 1.6rem;
  }
  .contact_checkbox{
    margin: 4rem auto;
  }
}


/*====================
      カタログ
====================*/
.catalog_bd__p{
  padding: 4rem;
}
.catalog_dl_ttl{
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--color-main);
}
.catalog_img{
  max-width: 24rem;
}
.catalog_list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
      grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 1fr 40px 1fr 40px 1fr 40px 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
}
.catalog_list > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.catalog_list > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.catalog_list > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.catalog_list > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
.catalog_list > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.catalog_list > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.catalog_list > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.catalog_list > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
.catalog_list > *:nth-child(9) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
.catalog_list > *:nth-child(10) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
.catalog_list > *:nth-child(11) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}
.catalog_list > *:nth-child(12) {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}
.catalog_list > *:nth-child(13) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}
.catalog_list > *:nth-child(14) {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}
.catalog_list > *:nth-child(15) {
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}
.catalog_list > *:nth-child(16) {
  -ms-grid-row: 7;
  -ms-grid-column: 7;
}
.catalog_list_data{
  color: var(--color-grey-03);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--color-blue), var(--color-blue));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: background-size 0.2s;
  width: fit-content;
}
.catalog_list_data::after{
  content: "";
  display: inline-block;
  background: url(/img/catalog/catalog_icon_pdf_gray.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.4rem;
  height: 1.9rem;
  margin-left: .8rem;
  vertical-align: text-bottom;
}
.catalog_list_name{
  line-height: 2.4rem;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--color-blue), var(--color-blue));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: background-size 0.2s;
  display: inline;
}
.catalog_list_itm:hover .catalog_list_name,
.catalog_list_itm:hover .catalog_list_data {
  background-size: 100% 1px;
  color: var(--color-blue);
}
.catalog_list_itm{
  color: var(--color-main);
}
.catalog_list_itm:hover{
  
}
.catalog_list_itm:hover .catalog_list_data{
  color: var(--color-blue);
}
.catalog_list_itm:hover .catalog_list_data::after{
  filter: brightness(0) saturate(100%) invert(26%) sepia(87%) saturate(1523%) hue-rotate(188deg) brightness(94%) contrast(103%);
}

@media (max-width: 896px) {
  .catalog_list_itm:active{
    text-decoration: underline;
    color: var(--color-blue);
  }
  .catalog_list_itm:active .catalog_list_data{
    color: var(--color-blue);
  }
  .catalog_list_itm:active .catalog_list_data::after{
    filter: brightness(0) saturate(100%) invert(26%) sepia(87%) saturate(1523%) hue-rotate(188deg) brightness(94%) contrast(103%);
  }
  .g_bd__p_inr {
    flex-direction: column-reverse;
  }
}

@media screen and (max-width:576px){
  .catalog_list{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 24px 1fr;
        grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .catalog_list > *:nth-child(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .catalog_list > *:nth-child(2){
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .catalog_list_data::after{
    width: 1.2rem;
    height: 1.6rem;
  }
  .catalog_list{
    line-height: 1.5;
  }
  .catalog_bd__p{
    padding: 2rem;
  }
}


/*========================
      カネライトフォーム
========================*/
.kanelite_foam_img{
  max-width: 39.3rem;
}
.kanelite_foam_table{
  display: flex;
}
.kanelite_foam_table .g_table.g_table__sideNav{
  min-width: 80.8rem;
}
.kanelite_foam_table_col1{
  position: sticky;
  left: 0;
  flex-shrink: 0;
  width: 10.4rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kanelite_foam_table_col2{
  position: sticky;
  left: 10.5rem;
  width: 18.4rem;
}
.kanelite_foam_table_flex{
  display: flex;
  gap: 1.6rem;
}
.kanelite_foam_table_img{
  max-width: 22.6rem;
}
.kanelite_foam_flex_img{
  max-width: 28.2rem;
}
.kanelite_foam_ruby{
  position: relative;
}
.kanelite_foam_ruby::before{
  content: "ハチサンマル";
  position: absolute;
  font-size: 1rem;
  top: -1.2rem;
  left: 25%;
}
.kanelite_foam_useful_img{
  max-width: 24.2rem;
}
.kanelite_foam_useful_list{
  padding: .4rem .8rem;
  background: var(--color-table-light-blue);
  border-radius: .8rem;
}
.kanelite_foam_reason{
  position: relative;
  border: 2px solid var(--color-text);
  border-radius: 50vw;
  margin: 10.4rem auto 0;
  width: min(calc(var(--vw-calc-lg) * 710), 71rem);
  height: min(calc(var(--vw-calc-lg) * 710), 71rem);
}
.kanelite_foam_reason::before{
  content: "";
  display: block;
  background: url(../img/kanelite_foam/kanelite_foam_reason.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: min(calc(var(--vw-calc-lg) * 256), 25.6rem);
  height: min(calc(var(--vw-calc-lg) * 224), 22.4rem);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}
.kanelite_foam_reason_itm{
  background: var(--color-white);
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  padding: 1.6rem ;
}
.kanelite_foam_reason_img{
  width: 8.8rem;
  height: 8.8rem;
  margin: 0 auto;
}
.kanelite_foam_reason_ttl{
  font-size: min(calc(var(--vw-calc-lg) * 22), 2.2rem);
  margin-top: 1.6rem;
  color: var(--color-main);
}
.kanelite_foam_reason_text{
  font-size: min(calc(var(--vw-calc-lg) * 16), 1.6rem);
  margin-top: 1.6rem;
  color: var(--color-text);
  text-align: center;
}
.kanelite_foam_reason_itm01{
  left: 0;
  right: 0;
  top: clamp(-9.6rem,calc(var(--vw-calc-lg) * -64),-6.4rem);
  margin: 0 auto;
}
.kanelite_foam_reason_itm02{
  top: min(calc(var(--vw-calc-lg) * 80), 8rem);
  right: min(calc(var(--vw-calc-lg) * -104), -10.4rem);
}
.kanelite_foam_reason_itm03{
  bottom: min(calc(var(--vw-calc-lg) * -48), -4.8rem);
  right: 0;
}
.kanelite_foam_reason_itm04{
  bottom: min(calc(var(--vw-calc-lg) * -48), -4.8rem);
  left: 0;
}
.kanelite_foam_reason_itm05{
  top: min(calc(var(--vw-calc-lg) * 80), 8rem);
  left: min(calc(var(--vw-calc-lg) * -80), -8rem);
}
.kanelite_intro{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 3.2rem;
}
.kanelite_intro .g_btn {
  width: 100%;
}
.kanelite_intro .g_btn > *{
  width: 100%;
}
.kanelite_intro .g_icon{
  padding-right: 0rem;
}
.kanelite_foam_construction{
  display: flex;
  gap: 3.2rem;
}
.kanelite_foam_construction.kanelite_foam_construction__border{
  margin-bottom: 2.4rem;
}

.kanelite_foam_wrapReverse{
  display: flex;
  gap: 2.4rem;
  margin-top: 3.2rem;
}

@media (max-width: 970px) {
  .kanelite_intro .g_btn > *{
    font-size: clamp(1.1rem, 1.25vw, 1.4rem);
  }
}

@media (max-width: 896px) {
  .kanelite_foam_table_flex{
    display: block;
  }
  .kanelite_foam_img{
    margin: 0 auto;
  }
  .kanelite_foam_reason{
    position: relative;
    border: none;
    border-radius: 0;
    margin: 3.2rem auto 0;
    width: 100%;
    height: auto;
  }
  .kanelite_foam_reason::before{
    display: none;
  }
  .kanelite_foam_reason_itm{
    background: var(--color-white);
    width: 100%;
    display: block;
    position: static;
  }
  .kanelite_foam_reason_tbl_img{
    width: min(calc(var(--vw-calc-md) * 200), 20rem);
    margin: 2.4rem auto 0;
  }
  .kanelite_foam_reason_img{
    width: min(calc(var(--vw-calc-md) * 40), 4rem);
    height: auto;
    margin: 0;
  }
  .kanelite_foam_reason_ttl{
    font-size: 1.8rem;
    margin-top: 0;
  }
  .kanelite_foam_reason_text {
    font-size: 1.4rem;
    margin-top: 0.8rem;
    text-align: left;
  }
  .kanelite_intro .g_btn > *{
    font-size: 1.4rem;
  }
  .kanelite_intro.kanelite_intro__btn{
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
  }
  .kanelite_intro.kanelite_intro__btn li{
    width: 100%;
  }
  .kanelite_intro.kanelite_intro__btn .g_btn{
    max-width: none;
  }
  .kanelite_foam_construction.kanelite_foam_construction__border{
    margin-bottom: 4.8rem;
  }
  .kanelite_foam_flex_img{
    max-width: 20rem;
  }
  .kanelite_foam_wrapReverse{
    flex-wrap: wrap-reverse;
  }
  .kanelite_foam_wrapReverse figure{
    margin: 0 auto;
  }
  .kanelite_foam_reason_itm{
    padding: 0;
    margin-top: 2.4rem;
  }
  .kanelite_foam_reason_itm:first-child{
    margin-top: 0;
  }
  .kanelite_foam_useful_img{
    margin: 0 auto;
  }
  .kanelite_foam_table .g_table.g_table__sideNav{
    min-width: auto;
  }
  .kanelite_foam_useful_list{
    padding: .4rem;
    border-radius: .4rem;
  }
  .kanelite_foam_table_col1{
    position: static;
  }
  .kanelite_foam_table_col2{
    position: static;
  }
}

@media screen and (max-width:576px){
  .kanelite_foam_flex_img{
    max-width: none;
    width: 100%;
  }
  .kanelite_foam_construction{
    flex-wrap: wrap;
    gap: 1rem;
  }
  .kanelite_foam_construction.kanelite_foam_construction__border{
    margin-bottom: 2.4rem;
    padding-bottom: 2.4rem;
    border-bottom: 0.1rem solid var(--color-border);
  }
  .kanelite_foam_table{
    display: block;
  }
  .kanelite_foam_table_col1{
    width: 100%;
    padding: 0.8rem;
  }
  .kanelite_foam_reason_tbl_img{
    width: min(calc(var(--vw-calc-sm) * 200), 20rem);
  }
  .kanelite_intro{
    display: flex;
    flex-wrap: wrap;
  }
  .kanelite_intro li{
    padding-bottom: 2.4rem;
    border-bottom: 0.1rem solid var(--color-border);
    margin-bottom: 2.4rem;
  }
  .kanelite_intro li:last-child,
  .kanelite_intro.kanelite_intro__btn li{
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
  }
  .kanelite_foam_useful_img{
    width: 100%;
    max-width: none;
  }
  .kanelite_foam_wrapReverse{
    margin-top: 2.4rem;
    gap: 1.6rem;
  }
  .kanelite_foam_img{
    max-width: none;
    width: 100%;
  }
  .kanelite_foam_table_col2{
    width: 10.8rem;
  }
  .kanelite_foam_table .g_table.g_table__sideNav tr th,
  .kanelite_foam_table .g_table.g_table__sideNav tr td{
    padding: 0.8rem;
    font-size: 1.3rem;
  }
  .kanelite_foam_table_img{
    max-width: none;
    width: 100%;
  }
}


/*=======================
      工法・施工例
=======================*/
.works_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 32px;
  grid-row-gap: 40px;
}
.works_img{
  width: 28.2rem;
  min-width: 28.2rem;
  margin: 0 auto;
}

@media screen and (max-width:576px){
  .works_list{
    display: block;
  }
  .works_list_img{
    width: 11.4rem;
    max-width: 11.4rem;
    flex-shrink: 0;
  }
  .works_list_itm{
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: .1rem solid var(--color-border);
  }
  .works_img{
    width: 100%;
  }
}


/*===========================
      省エネ基準・厚さ早見表
===========================*/
.ecoThickness_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 32px;
}
.ecoThickness_box_inr{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.ecoThickness_formula{
  width: fit-content;
}
.ecoThickness_formula_border{
  border-top: .1rem solid var(--color-text);
  margin-top: .4rem;
  padding-top: .4rem;
}
.ecoThickness_list dt{
  float: left;
}
.ecoThickness_list dd{
  padding-left: 26rem;
}
.ecoThickness_btn {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 0px;
}
.ecoThickness_btnList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 0px;
}
.ecoThickness_sub{
  all: revert;
}
.ecoThickness_energy_img{
  max-width: 70.2rem;
  margin: 0 auto;
}
.ecoThickness_insulation_img{
  max-width: 108.8rem;
  margin: 0 auto;
}

@media screen and (max-width:1151px){
  .ecoThickness_btnList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .ecoThickness_btnList .g_btn{
    width: auto;
  }
  .ecoThickness_btnList .g_btn.g_btn__lg > *{
    width: 100%;
  }
}

@media screen and (max-width:896px){
  .ecoThickness_box{
    display: block;
  }
  .ecoThickness_btnList .g_btn{
    width: 100%;
  }
  .ecoThickness_btnList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}

@media screen and (max-width:576px){
  .ecoThickness_btnList{
    display: block;
  }
  .ecoThickness_list dd{
    padding-left: 23rem;
  }
}


/*===================
      物性・規格
===================*/
.spec_table_wrap {
  margin-bottom: 1.2rem;
}
.spec_table_wrap.spec_table_wrap__wide {
  overflow-x: auto;
}
.spec_table_wrap::-webkit-scrollbar {
  height: 8px;
}
.spec_table_wrap::-webkit-scrollbar-track {
  background: #EEF2F6;
  border-radius: 10px;
}
.spec_table_wrap::-webkit-scrollbar-thumb {
  background: var(--color-main);
  border-radius: 10px;
}
.spec_table_wrap::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.spec_table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
  white-space: nowrap;
  border: 0.1rem solid var(--color-border);
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
  border-bottom: none;
  border-right: none;
}
.spec_table__col01,
.spec_table__col02{
  width: 13.8rem;
}
.spec_table__col03{
  width: 68.4rem;
}
.spec_table th,
.spec_table td {
  border-right: 0.1rem solid var(--color-border);
  border-bottom: 0.1rem solid var(--color-border);
  vertical-align: middle;
  border-width: 0 0.1rem 0.1rem 0; 
  border-style: solid;
  border-color: var(--color-border);
}
.spec_table tbody tr {
  font-size: 1.4rem;
  line-height: 1.75;
}
.spec_table thead tr th,
.spec_table tbody tr th,
.spec_table tbody tr td {
  padding: 0.8rem 1.6rem;
}
.spec_table.spec_table02 tbody tr th{
  padding: 0.8rem 1.2rem;
}
.spec_table.spec_table02 tbody tr td{
  padding: 1.6rem 1.2rem;
}

@media (max-width:896px) {
  .spec_table tbody tr {
    font-size: 1.3rem;
    line-height: 1.5;
  }
  .spec_table thead tr th,
  .spec_table tbody tr th,
  .spec_table tbody tr td {
    padding: 0.8rem;
  }
  .spec_table.spec_table02 tbody tr th{
    padding: 0.8rem 1.2rem;
  }
  .spec_table.spec_table02 tbody tr td{
    padding: 1.6rem 1.2rem;
  }
}

/* 一般物性のsticky対応 */
.spec_table_th_main {
  position: sticky;
  left: 0;
  background-color: var(--color-main);
  z-index: 2;
}
.spec_table_th_main.spec_table_th_main__2col {
  left: 12.85rem;
}
.spec_table_th_main_th_lightblue {
  position: sticky;
  left: 0;
  background-color: var(--color-table-light-blue);
  border: 0.1rem solid var(--color-border);
  z-index: 1;
}
.spec_table_th_main_th_skyblue {
  position: sticky;
  left: 12.85rem;
  background-color: var(--color-sky-blue);
  border: 0.1rem solid var(--color-border);
  z-index: 1;
}

@media (max-width:896px) {
  .spec_table_th_main {
    position: static;
  }
  .spec_table_th_main_th_lightblue {
    position: static;
  }
  .spec_table_th_main_th_skyblue {
    position: static;
  }
}

/* カネライトフォームの熱抵抗値 */
.spec_table__termal {
  width: 100%;
  min-width: 1120px;
  line-height: 1.75;
}
.spec_table.spec_table__termal thead tr th,
.spec_table.spec_table__termal tbody tr td,
.g_table.spec_table__termal tbody tr td{
  padding: 1.6rem;
}
.spec_table__termal th:first-child {
  position: sticky;
  left: 0;
  background-color: var(--color-main);
}
.spec_table__termal td:first-child {
  position: sticky;
  left: 0;
}

@media (max-width:896px) {
  .spec_table__termal th:first-child,
  .spec_table__termal td:first-child {
    position: relative;
  }
}

/* 一般物性 テーブル */
.spec_table__gen {
  width: 1763px;      
}
.spec_table__gen_th__wide {
  width: 257px;
}
.spec_table__gen_th {
  width: 172px;
}
.spec_table__gen_fraction {
  display: flex;
  flex-direction: column;
  border: none;
}
.spec_table__gen_fraction span {
  display: inline-block;
  border: none;
}
.spec_table__gen_fraction span.u_ic::after {
  bottom: 0;
  left: 50%;
  width: 6.5rem;
  height: 0.1rem;
  background-color: var(--color-text);
  transform: translate(-50%);
}
.spec_table__vtc_mdl td, 
.spec_table__vtc_mdl th {
  vertical-align: middle;
}
.spec_table__note {
  font-size: 1.2rem;
  line-height: 1.5;
}

@media (max-width: 896px) {
  .spec_table__note {
    font-size: 1rem;
  }
}
@media (max-width: 576px) {
  .spec_table__note {
    width: 100%;
  }
}

/* カネライトフォームの規格寸法 */
.spec_table02 .spec_table__col01 {
  position: sticky;
  left: 1px;
  background-color: var(--color-main);
}
.spec_table02 .g_bgc_light_sky_blue:first-of-type {
  position: sticky;
  left: 1px;
}
.spec_table02 .spec_table__col02 {
  position: sticky;
  left: 13.9rem;
  background-color: var(--color-main);
}
.spec_table02 .g_bgc_light_sky_blue:nth-child(2) {
  position: sticky;
  left: 13.9rem;
}
@media (max-width: 1120px) {
  .spec_table_wrap {
    overflow-x: auto;
    padding-bottom: 0.8rem;
    margin-bottom: 1.2rem;
  }
  .spec_table_wrap:has(.residential_table) {
    overflow-x: visible;
  }
  .spec_table_wrap.spec_table_wrap__wide {
    padding-bottom: 0.8rem;
  }
}
@media (min-width:1101px) {
  .residential_table .br_table {
    display: none;
  }
}
@media (max-width: 1000px) {
  .residential_table.g_table th,
  .residential_table.g_table td {
    padding: 0.8vw 1.2vw;
  }
  .residential_table .br_table {
    display: block;
  }
}
@media (max-width:896px) {
  .spec_table02 .spec_table__col01,
  .spec_table02 .g_bgc_light_sky_blue:first-of-type,
  .spec_table02 .spec_table__col02,
  .spec_table02 .g_bgc_light_sky_blue:nth-child(2) {
    position: static;
  }
  .spec_table_wrap:has(.residential_table) {
    overflow-x: auto;
  }
  .residential_table.g_table th,
  .residential_table.g_table td {
    padding: 0.8rem 1.2rem;
  }
  .residential_table .br_table {
    display: none;
  }
}

/* カネライトフォームの熱抵抗値 */
.spec_heat_diagonal.u_ic::before {
  top: 50%;
  left: -3%;
  width: 105%;
  height: 0.1rem;
  rotate: 19deg;
  background-color: var(--color-border);
}
.spec_heat_diagonal__inr {
  display: block;
  width: 100%;
}
.spec_heat_diagonal__inr.u_ic::before {
  content: "材料厚さ";
  top: -0.2rem;
  left: 0;
  font-size: 1.4rem; 
}
.spec_heat_diagonal__inr.u_ic::after {
  content: "熱伝導率";
  top: -2.3rem;
  right: 0;
  font-size: 1.4rem; 
}
.spec_txt_block {
  padding: 1.6rem 2.4rem;
  border: 0.1rem solid var(--color-border);
  border-radius: 8px;
}
.spec_txt_block__ttl {
  font-weight: 500;
}

@media (max-width: 896px) {
  .spec_txt_block {
    padding: 2.4rem;
  }
  .spec_txt_block__ttl {
    font-weight: 350;
    text-wrap: nowrap;
    line-height: 1.5;
  }
}

/* 注意事項 */
.spec_caution_cnt {
  border: 0.2rem solid var(--color-main);
  border-radius: 0 0 0.8rem 0.8rem;
  padding: 4rem;
}
.spec_caution_cnt_ttl{
  color: var(--color-white);
  background: var(--color-main);
  font-size: 2.8rem;
  line-height: 8rem;
  padding-left: 3.2rem;
  border-radius: 0.8rem 0.8rem 0 0;
}

@media (max-width: 576px) {
  .spec_caution_cnt{
    padding: 1.6rem;
  }
  .spec_caution_cnt_ttl{
    padding-left: 0;
    text-align: center;font-size: 2rem;
    line-height: 5.6rem;
  }
}

/*===================
      住宅用製品
===================*/
.residential_imgLink{
  width: min(calc(var(--vw-calc-lg) * 1120), 112rem);
  height: min(calc(var(--vw-calc-lg) * 580), 58rem);
  margin: 16rem auto 0;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.residential_imgLink_img{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: min(calc(var(--vw-calc-lg) * 520), 52rem);
  z-index: -1;
}

.residential_imgLink_box{
  width: min(calc(var(--vw-calc-lg) * 188), 18.8rem);
  border: 0.1rem solid var(--color-border);
  border-radius: calc(8/16 * 1.6rem);
  background: var(--color-white);
  padding: min(calc(var(--vw-calc-lg) * 16), 1.6rem);
  margin-top: min(calc(var(--vw-calc-lg) * 16), 1.6rem);
}
.residential_imgLink_box.residential_imgLink_box__first{
  margin-top: 0;
}
.residential_imgLink_box.residential_imgLink_box__last{
  margin-top: min(calc(var(--vw-calc-lg) * 32), 3.2rem);
}
.residential_imgLink_box:has(.g_c_red){
  border-color: var(--color-border-red);
}
.residential_imgLink_box:has(.g_c_green){
  border-color: var(--color-border-green);
}
.residential_imgLink_box:has(.g_c_grey){
  border-color: var(--color-border-grey);
}
.residential_imgLink_box01{
  position: absolute;
  bottom: 0;
  left: 28%;
}
.residential_imgLink_box02{
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: min(calc(var(--vw-calc-lg) * 14), 1.4rem);
}

.residential_ttl{
  color: var(--color-main);
  font-weight: 500;
  font-size: min(calc(var(--vw-calc-lg) * 16), 1.6rem);
}
.residential_ttl + ul{
  margin-top: min(calc(var(--vw-calc-lg) * 8), 0.8rem);
}
.residential_ttl.g_c_red{
  color: var(--color-red);
}
.residential_ttl.g_c_green{
  color: var(--color-green);
}
.residential_ttl.g_c_grey{
  color: var(--color-grey-05);
}

.residential_ttl span{
  font-size: min(calc(var(--vw-calc-lg) * 14), 1.4rem);
}

.residential_link_box{
  margin-top: min(calc(var(--vw-calc-lg) * 8), 0.8rem);
}

.residential_imgLink_itm{
  line-height: min(calc(var(--vw-calc-lg) * 17.5), 1.75rem);
  margin-top: min(calc(var(--vw-calc-lg) * 6), 0.6rem);
}
.residential_imgLink_itm:first-child{
  margin-top: 0;
}

.residential_link{
  font-size: min(calc(var(--vw-calc-lg) * 14), 1.4rem);
  color: var(--color-blue);
}

.residential_link::before{
  content: "";
  display: inline-block;
  width: min(calc(var(--vw-calc-lg) * 8), 0.8rem);
  height: 0.1rem;
  background: var(--color-blue);
  vertical-align: middle;
  margin-right: min(calc(var(--vw-calc-lg) * 4), 0.4rem);
}

.residential_imgLink_box:has(.g_c_red) .residential_link{
  color: var(--color-link-red);
}
.residential_imgLink_box:has(.g_c_red) .residential_link::before{
  background: var(--color-link-red);
}
.residential_imgLink_box:has(.g_c_green) .residential_link{
  color: var(--color-link-green);
}
.residential_imgLink_box:has(.g_c_green) .residential_link::before{
  background: var(--color-link-green);
}
.residential_imgLink_box:has(.g_c_grey) .residential_link{
  color: var(--color-link-grey);
}
.residential_imgLink_box:has(.g_c_grey) .residential_link::before{
  background: var(--color-link-grey);
}




.residential_img {
  width: min(calc(var(--vw-calc-lg) * 394), 39.4rem);
  position: relative;
  height: fit-content;
}

.residential_img_cap {
  position: absolute;
  color: var(--color-main);
  font-size: 1.8rem;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}

.residential_subttl {
  display: block;
  font-size: 1.4rem;
  margin-bottom: .8rem;
}

.residential_subttl02 {
  font-size: 1.4rem;
  color: #6C8397;
  display: block;
}

.residential_tatami_table {
  border-collapse: collapse;
  width: 100%;
  font-size: 1.4rem;
  table-layout: fixed;
}

.residential_tatami_table th,
.residential_tatami_table td{
  padding: 0.8rem;
  border: 0.1rem solid var(--color-border);
}

.residential_tatami_table th{
  background: var(--color-main);
  color: var(--color-white);
  width: 18.6rem;
}

.residential_tatami_table td{
  letter-spacing: -0.05em;
}

.residential_tatami_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 32px;
  grid-row-gap: 0px;
  padding-top: 4rem;
  border-top: .1rem solid var(--color-border);
  margin-top: 4rem;
}

  .g_btn.residential_btn__lg > * {
    width: calc(26.2rem - 0.2rem);
  }
@media (max-width: 1040px) {
  .residential_tatami_box{
    grid-template-columns: 1fr;
    grid-row-gap: 32px;
  }
  .residential_tatami_img{
    width: 75%;
    margin: 0 auto;
  }
  .g_btn.residential_btn__lg,
  .g_btn.residential_btn__lg > * {
    width: 100%;
  }
}


/* 規格表 */
.residential_table .residential_table_vw {
  position: sticky;
  left: 0;
}
.residential_table .residential_table01_col01,
.residential_table .g_bgc_sky_blue {
  position: sticky;
  left: 5.8rem;
  z-index: 1;
}
.g_table.residential_table {
  min-width: fit-content;
  table-layout: auto;
  background: var(--color-white);
  outline: 0.1rem solid var(--color-border);
  border: none;
}
.g_table.residential_table .residential_table_border_none{
  border-right: none;
}
.g_table.residential_table tr td,
.g_table.residential_table03 tr td,
.g_table.residential_table05 tr td,
.g_table.residential_table06 tr td {
  padding: 1.6rem;
}
.g_table.residential_table02 tr td{
  padding: 1.6rem 0.8rem;
}
.g_table.residential_table02 tr th{
  padding: 0.8rem;
}
.residential_table .residential_table_vw{
  writing-mode: vertical-rl;
  width: 5rem;
}
.g_table.residential_table th:has(.table_rl)  {
  padding: 0;
  width: 50px;
}
.residential_table .table_rl {
  white-space: pre;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 50px;
}

/* .residential_table .residential_table01_col01{
  width: 16.4rem;
}
.residential_table .residential_table01_col02{
  width: 13.4rem;
}
.residential_table .residential_table01_col03{
  width: 8.4rem;
}
.residential_table .residential_table01_col04{
  width: 12.4rem;
}
.residential_table .residential_table01_col05{
  width: 18.4rem;
} */

.g_table .residential_table02_col01{
  width: 15.8rem;
}
.g_table .residential_table02_col02{
  width: 8.8rem;
}
.g_table .residential_table02_col03{
  width: 7.4rem;
}
.g_table .residential_table02_col04{
  width: 15.4rem;
}
.g_table .residential_table02_col05{
  width: 12.6rem;
}
.g_table .residential_table02_col06{
  width: 19.2rem;
}
.g_table .residential_table02_col07{
  width: 11.2rem;
}

.g_table .residential_table03_col01{
  width: auto;
}
.g_table .residential_table03_col02{
  width: 14rem;
}

.g_table .residential_table04_col01{
  width: auto;
}
.g_table .residential_table04_col02{
  width: 18.8rem;
}

.g_table.residential_table05,
.g_table.residential_table06{
  min-width: auto;
}
.g_table .residential_table05_col01{
  width: min(calc(var(--vw-calc-lg) * 266), 26.6rem);
}
.g_table .residential_table05_col02{
  width: min(calc(var(--vw-calc-lg) * 203), 20.3rem);
}

.g_table .residential_table06_col01{
  width: 15.2rem;
}
.g_table .residential_table06_col02{
  width: 12rem;
}
.g_table .residential_table06_col03{
  width: 39.4rem;
}

.residential_table02 .residential_table02_col01,
.residential_table02 .g_bgc_sky_blue,
.residential_table03 .residential_table03_col01,
.residential_table03 .g_bgc_sky_blue,
.residential_table04 .residential_table04_col01,
.residential_table04 td:first-child,
.residential_table06 .residential_table06_col01,
.residential_table06 .g_bgc_sky_blue {
  position: sticky;
  left: 0;
}


.residential_omega_img {
  width: min(calc(var(--vw-calc-lg) * 282), 28.2rem);
}
.residential_doma_img {
  width: min(calc(var(--vw-calc-lg) * 854), 85.4rem);
}
.residential_pearl_img,
.residential_830_img,
.residential_preCut_img
{
  width: 27.6rem;
  position: relative;
  height: fit-content;
}
.residential_830_img{
  width: min(calc(var(--vw-calc-lg) * 394), 39.4rem);
}


.residential_panel_img {
  max-width: 44rem;
}

.residential_icon_check {
  width: 1em;
  height: 2em;
  background: url(/img/residential/icon_check.svg);
  background-size: contain;
  background-position: 0 0.6rem;
  background-repeat: no-repeat;
  display: block;
}

@media (min-width:1001px) {
  .residential_table .br_table {
    display: none;
  }
}
@media (max-width: 1000px) {
  .g_table.residential_table th {
    padding: 1.6vw;
  }
  .g_table.residential_table tr td {
    padding: 1.6vw;
  }
  .residential_table .residential_table_vw {
    width: 5vw;
  }
  .g_table.residential_table tr th {
    width: 2vw;
  }
}
@media (max-width: 896px) {
  .residential_imgLink{
    display: none;
  }
  .residential_img,
  .residential_pearl_img {
    max-width: none;
    width: 75%;
    margin: 0 auto;
  }
  .residential_doma_img{
    width: 100%;
  }
  .residential_omega_img{
    width: 100%;
  }
  .g_table .residential_table03_col01{
    width: 20.4rem;
  }
  .g_table .residential_table04_col01{
    width: 19.2rem;
  }
  .g_table.residential_table02 tr td{
    padding: 0.8rem;
  }
  .g_table.residential_table tr td,
  .g_table.residential_table03 tr td,
  .g_table.residential_table05 tr td,
  .g_table.residential_table06 tr td {
    padding: 0.8rem;
  }
  .residential_table .residential_table_vw,
  .residential_table .residential_table01_col01,
  .residential_table td:first-child,
  .residential_table02 .residential_table02_col01,
  .residential_table02 .g_bgc_sky_blue,
  .residential_table03 .residential_table03_col01,
  .residential_table03 .g_bgc_sky_blue,
  .residential_table04 .residential_table04_col01,
  .residential_table04 td:first-child,
  .residential_table06 .residential_table06_col01,
  .residential_table06 .g_bgc_sky_blue {
    position: static;
  }
  .g_table.residential_table {
    min-width: 856px;
  }
  .g_table.residential_table th {
    padding: 0.8rem;
  }
  .g_table.residential_table tr td {
    padding: 0.8rem;
  }
  .residential_table .residential_table_vw {
    width: 5rem;
  }
  .g_table.residential_table tr th {
    width: 2rem;
  }
  .g_table.residential_table th:has(.table_rl)  {
    padding: 0;
    width: 34px;
  }
  .residential_table .table_rl {
    width: 34px;
  }
}
@media screen and (max-width:576px) {
  .residential_img,
  .residential_pearl_img{
    width: 100%;
  }
  .residential_tatami_table th,
  .residential_tatami_table td{
    width: 100%;
    display: block;
    border-bottom:none;
  }
  .residential_tatami_table tr:last-child{
    border-bottom: 0.1rem solid var(--color-border);
  }
  .residential_tatami_box{
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    grid-row-gap: 2.4rem;
  }
}

/*===================
      建築用製品
===================*/
.building_imgLink{
  width: min(calc(var(--vw-calc-lg) * 1120), 112rem);
  height: min(calc(var(--vw-calc-lg) * 688), 68.8rem);
  margin: 16rem auto 0;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.building_imgLink_img{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: min(calc(var(--vw-calc-lg) * 586), 58.6rem);
  z-index: -1;
}




.g_table .building_super_table__col01{
  width: 45.6rem;
}
.g_table .building_super_table02__col01{
  width: 16.8rem;
}
.g_table .building_super_table02__col02{
  width: 28.7rem;
}
.g_table .building_super_table02__col03{
  width: 22.6rem;
}
.g_table .building_panel_table__col01{
  width: 15.8rem;
}
.g_table .building_panel_table__col02{
  width: 8.8rem;
}
.g_table .building_panel_table__col03{
  width: 7.4rem;
}
.g_table .building_panel_table__col04{
  width: 15.4rem;
}
.g_table .building_panel_table__col05{
  width: 12.6rem;
}
.g_table .building_panel_table__col06{
  width: 19.2rem;
}
.g_table .building_panel_table__col07{
  width: 10.4rem;
}
.building_panel_img01{
  width: min(calc(var(--vw-calc-lg) * 356), 35.6rem);
}
.building_panel_img02{
  width: min(calc(var(--vw-calc-lg) * 192), 19.2rem);
}
.g_table .building_panel_table02__col01{
  width: 23.2rem;
}
.g_table__sideNav.building_k_table01,
.g_table__sideNav.building_ps_table{
  min-width: auto;
}
.g_table.g_table__sideNav.building_table tr td{
  padding: 1.6rem;
}
.g_table .building_k_table01__col1{
  width: 24%;
}

.g_table .building_k_table02__col1{
  width: 12.5rem;
}
.g_table .building_k_table02__col2{
  width: 9.3rem;
}
.g_table .building_k_table02__col3{
  width: 48rem;
}
.g_table .building_k_table02__col4{
  width: 12.6rem;
}
.building_k_img01{
  width: 30%;
}
.building_k_img02{
  width: 65%;
}
.g_table .building_doma_table01__col01{
  width: 20.8rem;
}
.g_table .building_doma_table02__col01{
  width: 34.4rem;
}
.g_table .building_road_table__col01{
  width: 15.2rem;
}
.g_table .building_road_table__col02{
  width: 40rem;
}
.building_box{
  margin-left: 1.6rem;
}
.building_ps_box__img{
  width: min(calc(var(--vw-calc-lg) * 648), 64.8rem);
}
.g_table .building_ps_table02__col01{
  width: 15.2rem;
}
.building_ps_img{
  width: min(calc(var(--vw-calc-lg) * 282), 28.2rem);
}
.building_panel_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 4.2rem;
  margin-top: 3.2rem;
}

.building_panel_list_itm {
  background: var(--color-white);
  border: .1rem solid var(--color-border);
  border-radius: .8rem;
  padding: 1.6rem;
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 1.6rem;
}

.building_panel_list_itm::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-top: .1rem solid var(--color-main);
  border-right: .1rem solid var(--color-main);
  transform: rotate(45deg);
  position: absolute;
  top: 45%;
  right: -2.4rem;
}

.building_panel_list_itm:last-child::after {
  content: none;
}

.building_panel_list_txt {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.building_panel_list_num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1.5;
}

.building_panel_list_num::before {
  content: "STEP";
  font-size: 1.2rem;
  color: var(--color-grey-03);
  vertical-align: text-bottom;
  margin-right: .4rem;
}

.building_table_01 th:first-child,
.building_table_01 td:first-child {
  position: sticky;
  left: 0;
}
.building_table_01 tr:nth-child(3) th:nth-child(2),
.building_table_01 td:nth-child(2) {
  position: sticky;
  left: 24.3rem;
}
.building_table_02 .building_super_table02__col01,
.building_table_02 td:first-child {
  position: sticky;
  left: 0;
}
.building_table_03 .building_panel_table__col01,
.building_table_03 td:first-child.g_bgc_sky_blue {
  position: sticky;
  left: 0;
}
.building_table_04 th:first-child,
.building_table_04 td:first-child.g_bgc_sky_blue {
  position: sticky;
  left: 0;
}
.building_table_06 .building_k_table02__col1,
.building_table_06 td:first-child {
  position: sticky;
  left: 0;
}
.building_table_07 .building_doma_table01__col01,
.building_table_07 td:first-child {
  position: sticky;
  left: 0;
}
.building_table_08 .building_doma_table02__col01,
.building_table_08 td:first-child {
  position: sticky;
  left: 0;
}
.building_table_09 .building_road_table__col01,
.building_table_09 td:first-child {
  position: sticky;
  left: 0;
}
.g_table.g_table__sideNav.building_table_10 th,
.g_table.g_table__sideNav.building_table_10 td {
  vertical-align: middle;
}
.g_table.g_table__sideNav.building_table_10 {
  min-width: auto;
  table-layout: auto;
}
.g_table.g_table__sideNav.building_table_10 .building_ps_table01__col03 {
  width: auto;
}

@media screen and (max-width:896px) {
  .building_imgLink{
    display: none;
  }
  .building_imgLink_img__sp{
    width: 75%;
    margin: 0 auto;
  }
  .building_panel_img01,
  .building_doma_img{
    width: 75%;
    margin: 0 auto;
  }
  .building_panel_img02{
    width: 50%;
    margin: 0 auto;
  }
  .building_panel_list{
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
  }
  .building_panel_list_itm{
    width: 100%;
    gap: 0.8rem;
  }
  .building_panel_list_itm::after{
    transform: rotate(135deg);
    position: absolute;
    top: auto;
    bottom: -2.4rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .building_ps_img{
    width: 100%;
  }
  .g_table.g_table__sideNav.building_table tr td{
    padding: 0.8rem;
  }
  .g_table.g_table__sideNav.building_table_10 .building_ps_table01__col01{
    width: 13rem;
  }
  .g_table.g_table__sideNav.building_table_10 .building_ps_table01__col02{
    width: 20rem;
  }
  .g_table.g_table__sideNav.building_table_10 .building_ps_table01__col03{
    width: 20rem;
  }
  .building_table_01 th:first-child,
  .building_table_01 td:first-child {
    position: static;
  }
  .building_table_01 tr:nth-child(3) th:nth-child(2),
  .building_table_01 td:nth-child(2) {
    position: static;
  }
  .building_table_02 .building_super_table02__col01,
  .building_table_02 td:first-child {
    position: static;
  }
  .building_table_03 .building_panel_table__col01,
  .building_table_03 td:first-child.g_bgc_sky_blue {
    position: static;
  }
  .building_table_04 th:first-child,
  .building_table_04 td:first-child.g_bgc_sky_blue {
    position: static;
  }
  .building_table_06 .building_k_table02__col1,
  .building_table_06 td:first-child {
    position: static;
  }
  .building_table_07 .building_doma_table01__col01,
  .building_table_07 td:first-child {
    position: static;
  }
  .building_table_08 .building_doma_table02__col01,
  .building_table_08 td:first-child {
    position: static;
  }
  .building_table_09 .building_road_table__col01,
  .building_table_09 td:first-child {
    position: static;
  }
  .building_table_10 .building_ps_table01__col01 {
    position: static;
  }
  .building_table_10 .building_ps_table01__col03,
  .building_table_10 td:first-child.building_table_10_sticky {
    position: static;
  }
  .g_table.g_table__sideNav.building_table_10 {
    min-width: 350px;
    table-layout: fixed;
  }
}
@media screen and (max-width:576px) {
  .building_imgLink_img__sp{
    width: 100%;
  }
  .building_k_img01{
    width: 75%;
  }
  .building_k_img02,
  .building_doma_img{
    width: 100%;
  }
}


/*===================
      木造軸組構法住宅
===================*/
.wood_framed_table01 .g_bgc_blank,
.wood_framed_table01 th.g_bgc_main {
  position: sticky;
  left: 0;
}
.wood_framed_table01 td.g_table_category_light_blue {
  position: sticky;
  left: 23rem;
}
.wood_framed_table01 td.g_table_category_itm {
  position: sticky;
  left: 36.4rem;
}

.wood_framed_table02 .g_bgc_blank,
.wood_framed_table02 th.g_bgc_main {
  position: sticky;
  left: 0;
}
.wood_framed_table02 td.g_table_category_light_blue {
  position: sticky;
  left: 23rem;
}
.wood_framed_table02 td.g_table_category_itm {
  position: sticky;
  left: 36.4rem;
}

.wood_framed_table03 .g_bgc_blank,
.wood_framed_table03 th.g_bgc_main {
  position: sticky;
  left: 0;
}

@media (max-width:896px) {
  .wood_framed_table01 .g_bgc_blank,
  .wood_framed_table01 th.g_bgc_main {
    position: static;
  }
  .wood_framed_table01 td.g_table_category_light_blue {
    position: static;
  }
  .wood_framed_table01 td.g_table_category_itm {
    position: static;
  }

  .wood_framed_table02 .g_bgc_blank,
  .wood_framed_table02 th.g_bgc_main {
    position: static;
  }
  .wood_framed_table02 td.g_table_category_light_blue {
    position: static;
  }
  .wood_framed_table02 td.g_table_category_itm {
    position: static;
  }

  .wood_framed_table03 .g_bgc_blank,
  .wood_framed_table03 th.g_bgc_main {
    position: static;
  }
}


/*===================
      設計価格表
===================*/
.price_table tr th,
.price_table tr td{
  padding: .8rem 1.6rem;
  white-space: normal;
}
.price_table {
  width: 100%;
  min-width: 1120px;
  margin-bottom: 1.2rem;
  white-space: nowrap;
  border: 0.1rem solid var(--color-border);
}
.price_table td {
  border: 0.1rem solid var(--color-border);
  vertical-align: middle;
}
.price_table td.u_alignL {
  padding: 1.6rem;
}
.price_note {
  line-height: 1.5;
}
.price_table_col01{
  width: 35.4rem;
}
.price_table_col02{
  width: 38rem;
}
.price_table .price_table_col01,
.price_table td:first-child.price_table_sticky {
  position: sticky;
  left: 0;
}

@media (max-width:896px) {
  .price_table .price_table_col01,
  .price_table td:first-child.price_table_sticky {
    position: static;
  }
}

/*===================
鉄筋コンクリート造住宅
===================*/
.concrete_table_category_light_blue_02{
  color: var(--color-text);
  text-align: left;
  background-color: var(--color-table-light-blue);
  vertical-align: middle;
  font-weight: 500;
}
.concrete_table_category_light_blue{
  width: 32%;
  background-color: var(--color-white-blue);
  color: var(--color-text);
  font-weight: 500;
  vertical-align: middle;
}
.reinforced_concrete .g_table_detail__col01,
.reinforced_concrete th:not(.g_table_detail__col02) {
  position: sticky;
  left: 0;
}

@media (max-width:896px) {
  .reinforced_concrete .g_table_detail__col01,
  .reinforced_concrete th:not(.g_table_detail__col02) {
    position: static;
  }
}


/*===================
      お役立ち情報
===================*/
.g_table.useful_table,
.g_table.useful_table02{
  min-width: auto;
}
.useful_table tr th{
  width: 30%;
  vertical-align: middle;
}
.useful_table tr td span{
  display: block;
}
.useful_img{
  max-width: 25.8rem;
  margin: 0 auto;
}
.useful_icon{
    position: relative;
    padding-left: 1.25em!important;
}
.useful_icon::before{
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    border: .1rem solid var(--color-text);
    position: absolute;
    left: 0;
    top: .4rem;
    border-radius: 50vw;
    text-align: center;
    line-height: 1;
    font-size: 1.2rem;
}
.useful_icon__circle::before{
    content: "";
}
.useful_icon__num1::before{
    content: "1";
}
.useful_icon__num2::before{
    content: "2";
}
@media screen and (max-width:576px){
  .useful_img{
    width: 100%;
    max-width: none;
  }
}


/*===================
    防耐火構造認定
===================*/
/* デザイン確定後削除　ここから */
.fireconst_dummy{
  color: var(--color-main);
  text-align: center;
  padding: 2.4rem 0;
  border: .1rem solid var(--color-border);
}
/* デザイン確定後削除　ここまで */
.fireconst_table_wrap {
  overflow-x: auto;
  margin-bottom: 1.2rem;
}
.fireconst_table_wrap::-webkit-scrollbar {
  height: 8px;
}
.fireconst_table_wrap::-webkit-scrollbar-track {
  background: #EEF2F6;
  border-radius: 10px;
}
.fireconst_table_wrap::-webkit-scrollbar-thumb {
  background: var(--color-main);
  border-radius: 10px;
}
.fireconst_table_wrap::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.fireconst_table {
  width: 100%;
  min-width: 1120px;
  margin-bottom: 1.2rem;
  white-space: nowrap;
  border: 0.1rem solid var(--color-border);
}
.fireconst_table td,
.fireconst_table th {
  border: 0.1rem solid var(--color-border);
  vertical-align: middle;
  padding: 0.8rem 1.6rem;
}
.firconst_note {
  line-height: 1.5;
}
.firconst_note__num {
  margin-right: 0.8rem;
}
.fireconst_table_wrap th.g_bgc_main,
.fireconst_table_wrap th.g_bgc_tb_sky_blue {
  position: sticky;
  left: 0;
}

@media (max-width:896px) {
  .fireconst_table_wrap th.g_bgc_main,
  .fireconst_table_wrap th.g_bgc_tb_sky_blue {
    position: static;
  }
}


/*======================
      補助金制度一覧
======================*/
.subsidy_box{
  border-top: .1rem solid var(--color-border);
  padding-top: 6.4rem;
}
.subsidy_img{
  max-width: 25.8rem;
}
.label_st {
  height: 2.5rem;
}

@media screen and (max-width:896px){
  .subsidy_img__sp{
    max-width: 16.4rem;
    float: right;
    margin: 0 0 1.4rem 1.6rem;
  }
}

@media screen and (max-width:576px){
  .subsidy_img__sp{
    max-width: 11.4rem;
  }
  .subsidy_box{
    border-top: .1rem solid var(--color-border);
    padding-top: 2.4rem;
  }
  .subsidy_btn{
    display: block;
  }
  .label_st {
    height: auto;
  }
}


/*======================
      環境への配慮
======================*/
.environment_box{
  background: var(--color-sky-blue);
  border-radius: .8rem;
  padding: 1.6rem;
}
.environment_box__half{
  max-width: 42.4rem;
}
.environment_btn > *{
  width: calc(31.2rem - 0.2rem);
}
.environment_list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 40px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 1fr 30px 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 40px;
  grid-row-gap: 30px;
}
.environment_list > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.environment_list > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.environment_list > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.environment_list > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.environment_list_itm{
  padding-left: 6.2rem;
  position: relative;
}
.environment_list_itm::before{
  content: "";
  display: inline-block;
  width: 4.6rem;
  height: 4.6rem;
  background: url(/img/environment/environment_icon_award.svg);
  background-size: contain;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.environment_check{
  display: block;
}
.environment_check::before{
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background: url(/img/environment/environment_icon_check.svg);
  background-size: contain;
  margin-right: .8rem;
  vertical-align: middle;
}
.g_table.environment_table{
  min-width: 417px;
  width: auto;
  background: var(--color-white);
  line-height: 1;
}
.environment_table_sub{
  vertical-align: sub;
  font-size: smaller;
}
.environment_recycle_img{
  max-width: 22.4rem;
  margin-top: 2.4rem;
}
@media screen and (max-width:896px) {
  .g_table.environment_table{
    min-width: auto;
  }
}
@media screen and (max-width:576px){
  .environment_wrap{
    display: block;
  }
  .environment_list{
    display: block;
  }
}

/*==========================
  プレカット／830シリーズ
==========================*/
.precut_img{
  width: min(calc(var(--vw-calc-lg) * 580), 58rem);
  flex-shrink: 0;
}
.precut_cont {
  padding-top: 16rem;
}
.precut_sub_ttl {
  padding-left: 1.2rem;
}
.precut_sub_ttl.u_ic::before {
  top: 50%;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  background-color: var(--color-main);
  border-radius: 50%;
  transform: translateY(-50%);
}
.precut_step_lst {
  gap: calc((100vw / var(--vw-value-lg)) * 56);
}
.precut_step_card {
  width: 100%;
  max-width: 23.6rem;
  padding: clamp(1.6rem, calc((100vw / var(--vw-value-lg)) * 16), 1.6rem) clamp(2.4rem, calc((100vw / var(--vw-value-lg)) * 24), 2.4rem) clamp(3rem, calc((100vw / var(--vw-value-lg)) * 30), 3rem);;
  border: 0.1rem solid var(--color-border);
  border-radius: 8px;
}
.precut_step_card.u_ic::after {
  display: block;
  top: 50%;
  right: calc((100vw / var(--vw-value-lg)) * -36);
  width: calc((100vw / var(--vw-value-lg)) * 10);
  height: calc((100vw / var(--vw-value-lg)) * 20);
  mask-image: url(../img/precut/precut_ico_arrow_r.svg);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--color-blue);
}
.precut_step_count {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-grey-03);
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 1.5;
}
.precut_step_count span {
  margin-left: 0.4rem;
  color: var(--color-text);
  font-size: 2rem;
}
.precut_step_img {
  height: 9.4rem;
}
.precut_step_img img {
  width: 100%;
  height: 100%;
}
.precut_step_ttl {
  font-size: min(calc(var(--vw-calc-lg) * 20), 1.6rem);
  font-weight: 500;
  text-wrap: nowrap;
}
.precut_step_ttl_box{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8rem;
}
.precut_step_ttl_box .precut_step_ttl{
  margin-top: 0.8rem;
}
.precut_step_line {
  font-size: 1.6rem;
}
.precut_step_line.u_ic::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background-color: var(--color-border);
}
.precut_step_box {
  background-color: #FEF8F8;
  padding: 2.4rem;
}
.precut_step_box__primary {
  width: 50%;
  padding-right: 2.4rem;
}
.precut_step_box__primary.u_ic::after {
  top: 0;
  right: 0;
  width: 0.1rem;
  height: 100%;
  background-color: var(--color-border);
}
.precut_step_box__second {
  width: 50%;
  padding-left: 2.4rem;
}
.precut_step_box__primary_img img,
.precut_step_box__second_img img {
  height: 11.2rem;
  object-fit: contain;
}
.precut_note_num {
  margin-right: 0.8rem;
}
.precut_cost_lst {
  gap: calc((100vw / var(--vw-value-lg)) * 80);
  overflow: hidden;
}
.precut_cost_lst.u_ic::after {
  width: calc((100vw / var(--vw-value-lg)) * 138);
  height: calc((100vw / var(--vw-value-lg)) * 181);
  max-width: 13.8rem;
  max-height: 18.1rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-image: url(../img/precut/precut_cost_03.png);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}
.precut_cost_lst_itm {
  padding:calc((100vw / var(--vw-value-lg)) * 24) calc((100vw / var(--vw-value-lg)) * 40);
  background-color: #FFFBFB;
  border-radius: 8px;
}
.precut_ttl_sm {
  font-weight: 350;
  color: var(--color-main);
}
.precut_note {
  line-height: 1.5;
}
.precut_830_txt {
  max-width: 50.8rem;
}
.precut_830_img {
  max-width: 54.3rem;
}
.precut_table {
  width: 100%;
  border: 0.1rem solid var(--color-border);
  background: var(--color-white);
}
.precut_table td {
  padding: 0.8rem 1.6rem;
  border: 0.1rem solid var(--color-border);
  vertical-align: middle;
  font-size: 1.4rem;
  line-height: 1.5;
}
.precut_reduce_ttl {
  font-weight: 350;
  color: var(--color-main);
}
.precut_reduce_txt {
  max-width: 50.8rem;
}
.precut_reduce_img {
  max-width: 53.2rem;
}
.precut_output_img {
  max-width: 58rem;
}
.precut_output_chip {
  padding-left: 6rem;
}
.precut_output_chip.u_ic::before {
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 5.6rem;
  height: 2rem;
  background-color: var(--color-main);
}
.precut_eco {
  border: 0.1rem solid var(--color-border);
  padding: 4rem;
  border-radius: .8rem;
}

@media (max-width: 896px) {
  .precut_img{
    width: 75%;
    margin: 0 auto;
  }
  .precut_cont {
    padding-top: 9.6rem;
  }
  .precut_sec__bg_blue {
    background-color: var(--color-sky-blue);
  }
  .precut_sub_ttl {
    color: var(--color-grey-03);
  }
  .precut_sub_ttl.u_ic::before {
    background-color: var(--color-grey-03);
  }
  .precut_step_lst {
    display: flex;
    gap: 2.2rem;
    flex-direction: column;
  }
  .precut_step_card {
    max-width: 100%;
  }
  .precut_step_card.u_ic::after {
    top: auto;
    bottom: -1.8rem;
    left: 0;
    width: 0.6rem;
    height: 1.2rem;
    rotate: 90deg;
  }
  .precut_step_count span {
    font-size: 1.8rem;
    line-height: 1.5;
    text-transform: uppercase;
  }
  .precut_step_ttl {
    font-size: 1.5rem;
  }
  .precut_step_img {
    max-width: 11.4rem;
  }
  .precut_step_box {
    padding: 1.6rem;
  }
  .precut_step_box__primary {
    width: 100%;
    padding-right: 0;
    padding-bottom: 1.6rem;
  }
  .precut_step_box__primary.u_ic::after {
    top: auto;
    right: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.1rem;
    
  }
  .precut_step_box__second {
    width: 100%;
    padding-left: 0;
    padding-top: 1.6rem;
  }
  .precut_note_num {
    margin-right: 0.4rem;
  }
  .precut_cost_lst {
    gap: 8.9rem 0;
  }
  .precut_cost_lst.u_ic::after {
    background-image: url(../img/precut/precut_cost_03_sp.png);
    width: 10.7rem;
    height: 7.3rem;
  }
  .precut_ttl_sm {
    font-weight: 500;
  }
  .precut_830_txt {
    max-width: 100%;
  }
  .precut_830_img {
    max-width: 100%;
  }
  .precut_830_ttl_sm {
    font-weight: 500;
  }
  .precut_reduce_ttl {
    font-weight: 500;
  }
  .precut_reduce_txt {
    max-width: 100%;
  }
  .precut_reduce_img {
    max-width: 100%;
  }
  .precut_output_img {
    max-width: 100%;
  }
  .precut_output_chip {
    padding-left: 4.4rem;
  }
  .precut_output_chip.u_ic::before {
    width: 4rem;
    height: 1.6rem;
  }
  .precut_eco{
    padding: 2.4rem;
  }
  .precut_table td {
    padding: 0.8rem;
    font-size: 1.3rem;
  }
}

@media (max-width: 576px) {
  .precut_img{
    width: 100%;
  }
  .precut_cont {
    padding-top: 5.6rem;
  }
  .precut_step_card{
    padding: clamp(1.6rem, calc((100vw / var(--vw-value-sm)) * 16), 1.6rem);
  }
}


/*==========================
      カネパール成形品
==========================*/
.pearl_sec {
  padding-top: 16rem;
}
.pearl_img{
  width: min(calc(var(--vw-calc-lg) * 392), 39.2rem);
  flex-shrink: 0;
  position: relative;
  height: fit-content;
}
.pearl_img figcaption{
  position: absolute;
  bottom: 0;
  text-align: center;
  margin: 0 auto;
  font-size: 1.8rem;
  color: var(--color-main);

}
.pearl_img02{
  width: min(calc(var(--vw-calc-lg) * 352), 35.2rem);
}
.pearl_ttl {
  font-weight: 350;
  color: var(--color-main);
}
.pearl_img_graph {
  width: 100%;
  max-width: 69.4rem;
}
.pearl_note {
  line-height: 1.5;
}
.pearl_table_wrap {
  overflow-x: auto;
  margin-bottom: 1.2rem;
}
.pearl_table_wrap::-webkit-scrollbar {
  height: 8px;
}
.pearl_table_wrap::-webkit-scrollbar-track {
  background: #EEF2F6;
  border-radius: 10px;
}
.pearl_table_wrap::-webkit-scrollbar-thumb {
  background: var(--color-main);
  border-radius: 10px;
}
.pearl_table_wrap::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.pearl_table {
  width: 100%;
  font-size: 1.4rem;
  white-space: nowrap;
  border: 0.1rem solid var(--color-border);
}
.pearl_table_col01{
  width: 18%;
}
.pearl_table_col02{
  width: 10%;
}
.pearl_table td,
.pearl_table th {
  border: 0.1rem solid var(--color-border);
  vertical-align: middle;
  padding: 1.6rem 2rem;
}
.pearl_table th,
.pearl_table th:first-child {
  font-weight: 500;
}

@media (max-width:896px){
  .pearl_sec {
    padding-top: 5.6rem;
  }
  .pearl_table{
    min-width: 85.2rem;
  }
  .pearl_img{
    width: 75%;
    margin: 0 auto;
  }
  .pearl_img02{
    width: calc((100% - 3.2rem)/2);
  }
  .pearl_img figcaption{
    font-size: 1.6rem;
  }
}

@media (max-width:576px){
  .pearl_img02{
    width: calc((100% - 2.4rem)/2);
  }
}