@charset "UTF-8";
/* SCSSの読み込み */
@import url(all.css);
/*===============================================
  切り替え用
===============================================*/
html {
  scroll-padding-top: 0;
}
@media screen and (max-width: 1449px) {
  html {
    font-size: clamp(14px, 1.1034482759vw, 16px);
  }
}

.pc-none {
  display: none !important;
}

a[href^="tel:"] {
  pointer-events: none;
}

/*===============================================
  ページネーション
===============================================*/
/*===============================================
  詳細ページ前後
===============================================*/
/*===============================================
  wrapper
===============================================*/
#wrapper {
  min-width: 1200px;
}

/*===============================================
  header
===============================================*/
#header .header__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.5rem clamp(40px, 3.125vw, 60px) 0;
}
#header .header__logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 3.75rem;
}
#header .header__logo img {
  width: 10.3125rem;
  aspect-ratio: 165/25;
  -o-object-fit: contain;
     object-fit: contain;
}
#header .header__other {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  row-gap: 1.5625rem;
}
#header .header__line {
  font-size: var(--font-size-xs);
  -moz-column-gap: 0.9375rem;
       column-gap: 0.9375rem;
}
#header .header__line::before {
  content: "";
  display: block;
  width: 1.875rem;
  aspect-ratio: 1;
  background: url(../img/common/icon_LINE.svg) no-repeat center/contain;
}
#header .header__line::after {
  display: none;
}
#header.header--ent .header__inner {
  padding: 1.875rem 2.5rem 0;
}

/*===============================================
  footer
===============================================*/
#footer {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-xs);
  padding-block: 5.625rem 4.375rem;
}
#footer .footer__inner {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  gap: 1.875rem 3.125rem;
  width: calc(100% - 12.5rem);
  max-width: 80rem;
}
#footer .footer__inner:has(.footer__links) .footer-nav {
  grid-row: span 2;
}
#footer .footer__logo {
  width: 10.3125rem;
  margin-bottom: 1.375rem;
}
#footer .footer__logo img {
  width: 100%;
  aspect-ratio: 165/25;
  -o-object-fit: contain;
     object-fit: contain;
}
#footer .footer__links {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: 1.125rem;
}
#footer .footer__link {
  font-size: var(--font-size-sm);
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
#footer .footer__link::after {
  width: 2.375rem;
}

/*フッターナビ
-----------------------------*/
.footer-nav {
  margin-block-start: calc((1em - 1lh) / 2);
  padding-bottom: calc(3.75rem + var(--font-size-xs));
}
.footer-nav__list, .footer-nav__sub-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.footer-nav__item, .footer-nav__sub-item {
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0;
}
.footer-nav__item::after, .footer-nav__sub-item::after {
  content: "/";
  margin-inline: 0.25em;
}
.footer-nav__item:last-of-type::after, .footer-nav__sub-item:last-of-type::after {
  display: none;
}
.footer-nav__link, .footer-nav__sub-link {
  letter-spacing: var(--letter-spacing-base);
  margin-inline-end: calc(var(--letter-spacing-base) * -1);
}

/*コピーライト
-----------------------------*/
.copy {
  width: 67.5rem;
  margin-inline: auto;
}
.copy p {
  position: absolute;
  right: 0;
  bottom: 0;
}

/*===============================================
  fixed固定
===============================================*/
/*ページトップ
-----------------------------*/
#pagetop {
  bottom: 0.625rem;
  right: 0.625rem;
}

/*サイドボタン
-----------------------------*/
#side {
  bottom: 0.625rem;
  right: 0.625rem;
}

/*===============================================
  visual
===============================================*/
/*共通
-----------------------------*/
.visual {
  padding-block: 4.5rem 2.625rem;
  padding-inline: clamp(40px, 3.125vw, 60px);
}

/*メインビジュアル
-----------------------------*/
.visual__main {
  height: calc(clamp(518px, 40.46875vw, 777px) + 4.3125rem);
  padding-top: 0.9375rem;
}
.visual__box {
  row-gap: clamp(10px, 0.78125vw, 15px);
}
.visual__catch--main img {
  width: clamp(398px, 31.0416666667vw, 596px);
  aspect-ratio: 596/428;
  -o-object-fit: contain;
     object-fit: contain;
}
.visual__btns {
  row-gap: clamp(6px, 0.46875vw, 9px);
}
.visual__txt::before {
  width: clamp(134px, 10.46875vw, 201px);
  aspect-ratio: 201/120;
  top: clamp(-81px, -4.21875vw, -54px);
  left: clamp(-180px, -9.375vw, -120px);
  transform: rotate(-14.66deg);
}
.visual__txt img {
  width: clamp(332px, 25.8854166667vw, 497px);
  aspect-ratio: 497/37;
  -o-object-fit: contain;
     object-fit: contain;
}
.visual__btn {
  width: calc(23em + 0.5rem);
  aspect-ratio: 560/86;
  font-size: clamp(16px, 1.25vw, 24px);
  -moz-column-gap: 0.666667em;
       column-gap: 0.666667em;
  box-shadow: 0.25rem 0.3125rem #ffb400;
  border-radius: 0.5633334em;
}
.visual__btn::before {
  width: 1.875em;
}
.visual__btn .mark {
  font-size: calc(1em + 0.25rem);
}

/*サブビジュアル
-----------------------------*/
.visual__sub {
  height: clamp(364px, 28.4375vw, 546px);
  padding-top: clamp(32px, 2.5vw, 48px);
}
.visual__catch--sub {
  width: 18.15em;
  aspect-ratio: 726/205;
  font-size: calc(clamp(26px, 2.03125vw, 39px) + 1px);
  padding-top: 0.45em;
}
.visual__catch--sub > span {
  padding-bottom: 0.825em;
  background-size: auto 0.325em;
}
.visual__catch--sub > span::before {
  height: calc(1em - 1px);
  aspect-ratio: 407/39;
  bottom: 0.4em;
}
.visual__catch--sub::before {
  width: calc(100% + 0.8em);
  height: 2.525em;
  top: -0.55em;
}

/*===============================================
  グローバルナビ
===============================================*/
.gnav {
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 2;
  letter-spacing: var(--letter-spacing-base);
}
.gnav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: calc((1em - 1lh) / 2);
}
.gnav__item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gnav__item::after {
  content: "/";
  color: var(--color-orange);
  margin-inline: 0.25em;
}
.gnav__item:last-of-type::after {
  display: none;
}
.gnav__link {
  display: block;
}
.gnav__link:hover, .gnav__link.current {
  color: var(--color-orange);
}

/*===============================================
  main#container
===============================================*/
/*===============================================
  パンくずリスト
===============================================*/
.breadcrumb {
  padding-block: calc(1.3125rem - 0.5em);
  top: -2.625rem;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}
.breadcrumb__list {
  width: 67.5rem;
}
/*===============================================
  main共通
===============================================*/
.section {
  padding-block: 8.125rem;
}
.section--block::before {
  width: calc(100% + 1.125rem);
  height: 100%;
  background-size: clamp(507px, 39.5833333333vw, 760px);
}

.inbox {
  width: 67.5rem;
}

/*電話番号
-----------------------------*/
.com-tel {
  row-gap: 0.75rem;
}
.com-tel__num {
  font-size: 2.125rem;
}
.com-tel__num::before {
  font-size: 1.25rem;
}
.com-tel__num span {
  margin-block: -0.375rem -0.1875rem;
}
.com-tel .com-replace {
  font-size: 0.8125rem;
}

/*ボタン
-----------------------------*/
.com-btn {
  width: 18.0625rem;
  height: 3.75rem;
  font-size: var(--font-size-sm);
}
.com-btn::after {
  width: 2.375rem;
  right: 0.9375rem;
}

.com-link {
  border-radius: 1.875rem;
}
.com-link > span {
  letter-spacing: 0.12em;
  margin-inline-end: -0.12em;
}

/* SNS
-----------------------------*/
.com-sns {
  gap: 1.25rem;
}
.com-sns li {
  width: 2.1875rem;
}

/*テーブル
-----------------------------*/
.com-table {
  padding: calc(2.5rem - (0.5lh - 0.5em)) 3.125rem;
  border-radius: 1.25rem;
}
.com-table tr th,
.com-table tr td {
  padding-block: calc((3.875rem - 1lh) / 2);
}
.com-table tr th {
  width: 11.25rem;
  padding-inline: 1.5625rem 1.25rem;
}
.com-table tr td {
  padding-inline: 1.25rem;
}
.com-table tr:first-of-type th,
.com-table tr:first-of-type td {
  padding-block-start: 0;
}
.com-table tr:last-of-type th,
.com-table tr:last-of-type td {
  padding-block-end: 0;
}

/*テキストボックス
-----------------------------*/
.com-text p {
  margin-inline-end: calc(var(--letter-spacing-base) * -1);
}

/*お知らせ
-----------------------------*/
.com-post__item {
  margin-bottom: 1.5625rem;
}
.com-post__item--image .com-post__link {
  padding: 1.25rem;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.com-post__item--image .com-post__image {
  width: 20rem;
  aspect-ratio: 32/24;
}
.com-post__item--image .com-post__image img {
  aspect-ratio: 32/24;
  border-radius: 0.875rem;
}
.com-post__item--image .com-post__inner {
  row-gap: 0.9375rem;
}
.com-post__item--image .com-post__heading {
  margin-bottom: 0.625rem;
}
.com-post__item--image .com-post__body {
  font-size: var(--font-size-xs);
}
.com-post__link {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  gap: 0.875rem 1rem;
  padding: 1.1875rem 2.8125rem;
  border-radius: 1.0625rem;
}
.com-post__tag {
  font-size: var(--font-size-xs);
  line-height: 1.25;
  padding-inline: 1em;
  border-radius: 100vh;
}

/* 施工実績
-----------------------------*/
.com-works__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
.com-works__item {
  border-radius: 1.25rem;
}
.com-works__inner {
  padding: 1.5625rem 1.875rem;
}
.com-works__heading {
  font-size: var(--font-size-base);
  margin-bottom: 1.25rem;
}
.com-works__heading > span {
  line-height: 1.5;
}
.com-works__images {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.com-works__image img {
  width: 100%;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
}
.com-works__image figcaption {
  width: 4.375rem;
  font-size: var(--font-size-xs);
  line-height: 1.4375;
}
.com-works__image--before {
  width: 11.25rem;
}
.com-works__image--before::after {
  width: 3.625rem;
  right: -0.4375rem;
  bottom: 1.0625rem;
}
.com-works__link {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  padding: 0.5625rem 1.25rem;
}
.com-works__link::after {
  width: 1.875rem;
}

/*===============================================
  タイトル
===============================================*/
/*大タイトル
-----------------------------*/
.com-title01 {
  row-gap: 1.875rem;
  margin-bottom: 5rem;
}
.com-title01 .en {
  min-width: 20.25rem;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  padding: 0.1875rem 1em;
}
.com-title01 .main {
  gap: 1.25rem 0.9375rem;
}
.com-title01 img {
  height: 3.75rem;
  margin: -0.375rem;
}

/*中タイトル
-----------------------------*/
.com-title02:not(.com-title02--nodeco):not(.com-title02--center) {
  padding-left: 1.125rem;
  padding-bottom: 1.125rem;
}
.com-title02:not(.com-title02--nodeco):not(.com-title02--center)::before {
  width: 0.375rem;
  height: calc(100% - 1.125rem);
}

/*小タイトル
-----------------------------*/
/*===============================================
  総合トップ
===============================================*/
.entrance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  height: clamp(640px, 50vw, 960px);
  min-height: 100vh;
  padding: calc(5.625rem + clamp(24px, 1.875vw, 36px)) clamp(47px, 3.6458333333vw, 70px) 1.3125rem;
}
.entrance__box {
  background-position: left center !important;
}
.entrance__box--hidden::after {
  font-size: clamp(30px, 2.34375vw, 45px);
}
.entrance__inner {
  width: clamp(376px, 29.375vw, 564px);
  aspect-ratio: 564/404;
  background: url(../img/entrance/bg_txt.png) no-repeat center/contain;
  padding-bottom: 0.3125rem;
  transition: all 0.3s ease-out;
}
.entrance__inner::before {
  width: clamp(96px, 7.5vw, 144px);
  right: clamp(26px, 2.03125vw, 39px);
  bottom: clamp(26px, 2.03125vw, 39px);
}
.entrance__inner::after {
  width: clamp(40px, 3.125vw, 60px);
  margin-top: clamp(17px, 1.3020833333vw, 25px);
}
.entrance__inner:hover {
  transform: translateY(-0.5rem);
}
.entrance__title {
  font-size: clamp(28px, 2.1875vw, 42px);
  margin-bottom: clamp(20px, 1.5625vw, 30px);
}
.entrance__title img {
  height: calc(1em + clamp(6px, 0.46875vw, 9px));
  margin: clamp(-6px, -0.3125vw, -4px);
}
.entrance__title .en {
  min-width: 14.727273em;
  font-size: calc(0.5em + 1px);
  line-height: 1.54546;
  padding: 0 0 0.125rem;
}
.entrance__text {
  text-align: center;
  font-size: clamp(14px, 1.0416666667vw, 20px);
  padding-inline: 2em;
  word-break: keep-all;
}

/*===============================================
  共通セクション
===============================================*/
/*お問い合わせ
-----------------------------*/
.com-contact {
  padding-block-start: 6.5625rem;
}
.com-contact__box {
  padding-block: 8.125rem;
}
.com-contact__box::before {
  width: 80rem;
  -webkit-mask: url(../img/common/bg_contact-box.svg) no-repeat center/100% 100%;
          mask: url(../img/common/bg_contact-box.svg) no-repeat center/100% 100%;
}
.com-contact__box::after {
  width: calc(100% + 6.25rem);
  height: 8.6875rem;
  top: 1.25rem;
}
.com-contact__title {
  margin-bottom: 4.375rem;
}
.com-contact__title::before {
  width: calc(100% + 9rem);
  height: 3.4375rem;
  background-size: 2.5rem;
  bottom: 2.0625rem;
}
.com-contact__text {
  text-align: center;
}
.com-contact__items {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.875rem;
  margin-top: 3.75rem;
}
.com-contact__item {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  justify-content: center;
  row-gap: 1.125rem;
  width: 21.25rem;
  padding-bottom: 2rem;
}
.com-contact__item::before {
  height: calc(100% - 1rem);
  border-radius: 1.0625rem;
}
.com-contact__heading img {
  width: 100%;
  height: 2.1875rem;
  -o-object-fit: contain;
     object-fit: contain;
}

/*セクション名
-----------------------------*/
/*===============================================
  トップページ
===============================================*/
/*バナーリンクセクション
-----------------------------*/
.top-bnr__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: clamp(56px, 4.375vw, 84px);
       column-gap: clamp(56px, 4.375vw, 84px);
  width: calc(100% - 6.25rem);
  max-width: 86.25rem;
}
.top-bnr__item {
  height: clamp(180px, 14.0625vw, 270px);
  padding-inline: clamp(68px, 5.3125vw, 102px) clamp(36px, 2.8125vw, 54px);
  border-radius: clamp(20px, 1.5625vw, 30px);
  outline-offset: calc(-0.625rem - 1px);
}
.top-bnr__item::after {
  width: clamp(47px, 3.6458333333vw, 70px);
}
.top-bnr__title {
  font-size: clamp(28px, 2.1875vw, 42px);
  row-gap: 0.5em;
}
.top-bnr__title .en {
  font-size: calc(0.5em + 1px);
}

/*外壁塗装の費用目安診断
-----------------------------*/
.top-chart__title {
  margin-bottom: 4.375rem;
}
.top-chart__title > span.sub {
  width: 15.6875rem;
  aspect-ratio: 251/63;
  font-size: 1.625rem;
  padding-bottom: 0.6875rem;
  margin-bottom: -0.875rem;
}
.top-chart__title::after {
  width: 61.75rem;
  height: 9.75rem;
  bottom: -0.25rem;
}
.top-chart__text {
  text-align: center;
}
.top-chart__text + * {
  margin-top: 4.375rem;
}
.top-chart .chart_part {
  outline-offset: calc(-0.625rem - 1px);
  border-radius: 2.375rem;
}
.top-chart .chart-question {
  padding: 3rem 4.0625rem;
}
.top-chart .chart-question__title {
  font-size: 1.25rem;
  padding: 0.9375rem 7.5rem;
  border-radius: 100vh;
  margin-bottom: 1.5625rem;
}
.top-chart .chart-question__title::before {
  width: 4.625rem;
  aspect-ratio: 74/62;
  left: 2.75rem;
  top: -0.75rem;
}
.top-chart .chart-question__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
}
.top-chart .chart-question__item {
  width: 100%;
}
.top-chart .chart-question__link {
  font-size: calc(var(--font-size-sm) - 1px);
  height: 6.25rem;
  border-radius: 0.8125rem;
  padding-inline: 1rem 3.125rem;
}
.top-chart .chart-question__link::after {
  width: 2rem;
  right: 0.75rem;
}
.top-chart .chart-question#q_01 .chart-question__list {
  gap: 2.5rem;
}
.top-chart .chart-question#q_01 .chart-question__link {
  font-size: var(--font-size-base);
  padding-inline: 0;
}
.top-chart .chart-question#q_01 .chart-question__link::after {
  width: 2.5rem;
  right: 1rem;
}
.top-chart .chart-result {
  padding: 3.75rem 4.375rem;
}
.top-chart .chart-result__title {
  font-size: 1.875rem;
  padding-bottom: 1.4375rem;
  margin-bottom: 2.3125rem;
}
.top-chart .chart-result__title > span {
  line-height: 1.33334;
}
.top-chart .chart-result__title > span::before {
  width: calc(100% + 5.875rem);
  height: 2.1875rem;
}
.top-chart .chart-result__inner {
  display: grid;
  grid-template-columns: 23.75rem 1fr;
  -moz-column-gap: 2.1875rem;
       column-gap: 2.1875rem;
}
.top-chart .chart-result__image img {
  border-radius: 1.125rem;
}
.top-chart .chart-result__content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: 2rem;
}
.top-chart .chart-result__price {
  -moz-column-gap: 1.5625rem;
       column-gap: 1.5625rem;
}
.top-chart .chart-result__price dt {
  width: 12.5rem;
  line-height: 2;
  border-radius: 100vh;
}
.top-chart .chart-result__price dd {
  font-size: 2.125rem;
  line-height: 1.17648;
}
.top-chart .chart-result__text {
  font-size: var(--font-size-sm);
  line-height: 1.88889;
}
.top-chart .chart-result__btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3.125rem;
}
.top-chart .chart-result__btn {
  font-size: 1.625rem;
  -moz-column-gap: 1.875rem;
       column-gap: 1.875rem;
  height: 7.5rem;
}
.top-chart .chart-result__btn.com-link--paint {
  background-size: min(2.8125rem, 65%);
}
.top-chart .chart-result__btn.com-link--estimate {
  background-size: min(2.25rem, 52%);
}
.top-chart .chart-result__btn.com-link--works {
  background-size: min(2.125rem, 50%);
}
.top-chart .chart-result__btn > span {
  line-height: 1.38462;
}
.top-chart .chart-result__btn::before {
  width: 4.375rem;
}
.top-chart .chart-result__btn:last-of-type:nth-of-type(2n + 1) {
  grid-column: span 2;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  font-size: 2rem;
}
.top-chart .chart-result__btn:last-of-type:nth-of-type(2n + 1) > span {
  line-height: 1.3125;
}
.top-chart .chart_back_button_wrp {
  padding-top: 1.5625rem;
}
.top-chart .chart_back_button {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.top-chart .chart_back_button::before {
  width: 1.3125rem;
}

/*法人のお客様へ
-----------------------------*/
.top-corporate__title::before {
  width: 46.875rem;
  height: 7.875rem;
  bottom: 0.125rem;
}
.top-corporate__text {
  text-align: center;
}
.top-corporate__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -moz-column-gap: 3.125rem;
       column-gap: 3.125rem;
  margin-top: 5rem;
}
.top-corporate__item {
  width: 32.1875rem;
}
.top-corporate__image {
  width: calc(100% - 1.0625rem);
  height: 18.375rem;
}
.top-corporate__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2.0625rem;
  outline-width: 0.5rem;
  outline-offset: -0.5rem;
}
.top-corporate__btn {
  width: 24.5rem;
  height: 4.5rem;
  font-size: 1.75rem;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  border-radius: 1.25rem 0;
  margin-top: -3.75rem;
  margin-left: auto;
}
.top-corporate__btn > span {
  line-height: 1;
}
.top-corporate__btn > span::first-letter {
  font-size: 2.25rem;
}
.top-corporate__btn::after {
  position: relative;
  top: inherit !important;
  right: inherit !important;
  transform: none !important;
}

/*お知らせ
-----------------------------*/
.top-news__box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  padding-block: 6.25rem;
}
.top-news__box::before {
  width: 80rem;
  outline-offset: calc(-0.625rem - 1px);
  border-radius: 2.375rem;
}
.top-news__title {
  justify-content: flex-start;
  flex-direction: row;
  -moz-column-gap: 1.5625rem;
       column-gap: 1.5625rem;
  margin-bottom: 0;
  order: 0;
}
.top-news__title .en {
  min-width: auto;
  padding: 0;
  color: var(--color-yellow) !important;
  background: none !important;
}
.top-news__list,
.top-news .com-empty {
  grid-column: span 2;
  order: 2;
}
.top-news__btn {
  order: 1;
}

/*リンクセクション
-----------------------------*/
.top-links__items {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  width: calc(100% - 6.25rem);
  max-width: 106.25rem;
}
.top-links__item {
  flex-direction: column;
  row-gap: clamp(10px, 0.78125vw, 15px);
  width: 100%;
  height: clamp(152px, 11.875vw, 228px);
  font-size: clamp(24px, 1.875vw, 36px);
}
.top-links__item::before {
  width: calc(2.5em + 0.625rem);
}

/*===============================================
  外壁・屋根塗装
===============================================*/
/*住まいを守る、屋根・外壁塗装
-----------------------------*/
.paint-lead__title .main {
  -moz-column-gap: 3.3125rem;
       column-gap: 3.3125rem;
}
.paint-lead__text {
  text-align: center;
  padding: calc(4.375rem - (0.5lh - 0.5em)) 3.125rem;
  outline-offset: calc(-0.625rem - 1px);
  border-radius: 2.375rem;
}

/*高桑塗料商会が選ばれる理由
-----------------------------*/
.paint-reason__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.875rem;
}
.paint-reason__item {
  width: 100%;
  padding: 2.625rem 1.5625rem;
  border-radius: 2.375rem;
}
.paint-reason__num {
  width: 4.625rem;
  top: -1.625rem;
  left: 1.3125rem;
}
.paint-reason__heading {
  font-size: var(--font-size-base);
  padding: 0.6875rem 2em;
  word-break: keep-all;
  border-radius: 0.875rem;
  margin-bottom: 1.4375rem;
  -webkit-text-stroke: var(--color-white) 0.3125rem;
  paint-order: stroke;
}
.paint-reason__heading > span {
  line-height: 1.5;
}
.paint-reason__image img {
  width: 100%;
  aspect-ratio: 1.7058823529;
  -o-object-fit: cover;
     object-fit: cover;
}
.paint-reason__image {
  margin-bottom: 1.4375rem;
}

/*施工実績
-----------------------------*/
.paint-works__btn {
  margin: 4.375rem auto 0;
}

/*施工の流れ
-----------------------------*/
.paint-flow__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  padding-block: 4.375rem;
}
.paint-flow__list::before {
  width: 80rem;
  outline-offset: calc(-0.625rem - 1px);
  border-radius: 2.375rem;
}
.paint-flow__item {
  width: 11.875rem;
}
.paint-flow__item:nth-of-type(3) .paint-flow__text {
  padding-inline: 1em;
}
.paint-flow__item::after {
  width: 0.9375rem;
  aspect-ratio: 15/50;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  position: absolute;
  top: 4.375rem;
  left: calc(100% + 0.5625rem);
}
.paint-flow__num {
  text-align: center;
  margin-bottom: -1.125rem;
}
.paint-flow__num img {
  height: 1.875rem;
  margin: -0.375rem;
}
.paint-flow__icon {
  width: 11.875rem;
  margin-bottom: 1rem;
}
.paint-flow__icon img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}
.paint-flow__text {
  text-align: center;
  line-height: 1.5;
  word-break: keep-all;
}

/*===============================================
  施工実績
===============================================*/
/*施工実績一覧
-----------------------------*/
/*施工実績詳細
-----------------------------*/
.works-detail__box {
  padding: 3.125rem;
  outline-offset: calc(-0.625rem - 1px);
  border-radius: 2.375rem;
}
.works-detail__heading {
  margin-bottom: 2.125rem;
}
.works-detail__images {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.works-detail__image img {
  width: 100%;
  aspect-ratio: 588/390;
  -o-object-fit: cover;
     object-fit: cover;
}
.works-detail__image figcaption {
  width: 6.25rem;
  font-size: var(--font-size-sm);
  line-height: 1.66667;
}
.works-detail__image--before {
  width: 22rem;
}
.works-detail__image--before img {
  aspect-ratio: 352/248;
}
.works-detail__image--before::after {
  width: 5.6875rem;
  right: -1.5625rem;
  bottom: 2.5rem;
}
.works-detail__list {
  padding-top: calc(3.0625rem + 2px);
  margin-top: 3.0625rem;
}
.works-detail__item {
  aspect-ratio: 98/50;
}
.works-detail__text {
  margin-top: calc(3.5rem - (0.5lh - 0.5em));
}

/*===============================================
  塗料販売
===============================================*/
/*幅広い塗料を取り揃え、
現場に最適な一品をご提案。
-----------------------------*/
.products-lead__title {
  padding-inline: 3.125rem;
}
.products-lead__text {
  text-align: center;
  padding: calc(4.375rem - (0.5lh - 0.5em)) 3.125rem;
  outline-offset: calc(-0.625rem - 1px);
  border-radius: 2.375rem;
}

/*取扱いメーカー
-----------------------------*/
.products-maker__item {
  padding: 2.3125rem 3.125rem 2.8125rem;
  margin-bottom: 2.625rem;
  border-radius: 1.5625rem;
}
.products-maker__heading {
  margin-bottom: 1.6875rem;
}

/*販売商品
-----------------------------*/
.products-list__item {
  padding: 1.875rem 2.5rem;
  border-radius: 1.25rem;
  margin-bottom: 2.5rem;
}
.products-list__heading {
  padding: calc((3.125rem - 1em) / 2) 2.5rem;
  margin-bottom: 1.875rem;
  border-radius: 0.875rem;
}
.products-list__box {
  margin-bottom: 3.125rem;
}
.products-list__label {
  margin-bottom: 1.75rem;
}
.products-list__inner {
  display: grid;
  grid-template-columns: 19.375rem 1fr;
  align-items: flex-start;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.products-list__image img {
  width: 100%;
  aspect-ratio: 1.347826087;
  -o-object-fit: cover;
     object-fit: cover;
}
.products-list__contents {
  row-gap: 1.875rem;
}
.products-list__price {
  padding: calc((3.5rem - 1lh) / 2) 1.4375rem;
}
.products-list__price p {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.products-list__price p::before {
  width: 0.5rem;
}

/*キャンペーン
-----------------------------*/
.products-campaign .inbox {
  width: calc(100% - 6.25rem);
  max-width: 80rem;
}
.products-campaign__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: clamp(22px, 1.71875vw, 33px);
       column-gap: clamp(22px, 1.71875vw, 33px);
  outline-offset: calc(-0.625rem - 1px);
  border-radius: 2.375rem;
  padding: 3.125rem clamp(50px, 3.6458333333vw, 70px);
}
.products-campaign__item {
  max-width: 16.25rem;
}
.products-campaign__link {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  height: 100%;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  transition: all 0.3s ease-out;
}
.products-campaign__link:hover {
  transform: translateY(-0.5rem);
}
.products-campaign__image img {
  width: 100%;
  aspect-ratio: 1.3;
  -o-object-fit: cover;
     object-fit: cover;
}
.products-campaign__inner {
  padding: 1.0625rem 0.9375rem;
  gap: 0.8125rem 0.3125rem;
}
.products-campaign__tag {
  font-size: var(--font-size-xs);
  line-height: 1.25;
  padding-inline: 0.375rem;
  border-radius: 100vh;
}
.products-campaign__heading > span {
  line-height: 1.66667;
}
.products-campaign__btn {
  margin: 3.75rem auto 0;
}

/*===============================================
  レンタル機材
===============================================*/
/*幅広い機材を取り揃え、
最適な一台をご提案。
-----------------------------*/
.rental-lead__title .main {
  -moz-column-gap: 3.3125rem;
       column-gap: 3.3125rem;
}
.rental-lead__text {
  text-align: center;
  padding: calc(4.375rem - (0.5lh - 0.5em)) 3.125rem;
  outline-offset: calc(-0.625rem - 1px);
  border-radius: 2.375rem;
}

/*レンタルのご案内
-----------------------------*/
.rental-about__item {
  padding: 2.3125rem 3.125rem 2.8125rem;
  margin-bottom: 2.625rem;
  border-radius: 1.5625rem;
}
.rental-about__heading {
  margin-bottom: 1.6875rem;
}

/*レンタル機材
-----------------------------*/
.rental-list__item {
  padding: 1.875rem 2.5rem;
  border-radius: 1.25rem;
  margin-bottom: 2.5rem;
}
.rental-list__heading {
  padding: calc((3.125rem - 1em) / 2) 2.5rem;
  margin-bottom: 1.875rem;
  border-radius: 0.875rem;
}
.rental-list__inner {
  display: grid;
  grid-template-columns: 19.375rem 1fr;
  align-items: flex-start;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.rental-list__image img {
  width: 100%;
  aspect-ratio: 1.347826087;
  -o-object-fit: cover;
     object-fit: cover;
}
.rental-list__contents {
  row-gap: 1.875rem;
}
.rental-list__price {
  padding: calc((3.5rem - 1lh) / 2) 1.4375rem;
}
.rental-list__price p {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.rental-list__price p::before {
  width: 0.5rem;
}

/*===============================================
  会社案内
===============================================*/
/*会社情報
-----------------------------*/
.company-info__table tr td .com-replace {
  font-size: var(--font-size-sm);
}
.company-info__map {
  height: 31.25rem;
  margin-top: 7.5rem;
}

/*===============================================
  お知らせ
===============================================*/
/* お知らせ 一覧
-----------------------------*/
.news-archive__title {
  justify-content: flex-start;
  flex-direction: row;
  -moz-column-gap: 1.5625rem;
       column-gap: 1.5625rem;
  margin-bottom: 0;
}
.news-archive .tag-select {
  height: 0;
  margin-bottom: 5rem;
}

/* お知らせ 詳細
-----------------------------*/
.news-detail__heading {
  margin-bottom: 1.875rem;
}

/*タグリスト
-----------------------------*/
/*===============================================
  お問い合わせ
===============================================*/
.contact-form__table {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}
.contact-form__table tr th,
.contact-form__table tr td {
  line-height: calc(2.5rem / var(--font-size-sm));
  padding-block: 1.25rem;
}
.contact-form__table tr th {
  width: 25rem;
  text-align: left;
}
.contact-form__table tr th .optional-mark,
.contact-form__table tr th .required-mark {
  font-size: 0.875rem;
  margin-top: calc(1.25rem - 0.5lh);
}
.contact-form__table tr td {
  vertical-align: middle;
}
.contact-form .contact-submits-wrap > * {
  margin: 1.25rem 0.9375rem 0;
}

/*===============================================
  お問い合わせ完了
===============================================*/
/*===============================================
  プライバシーポリシー
===============================================*/
.privacy-policy__box {
  padding: 2.3125rem 3.125rem 2.8125rem;
  margin-bottom: 2.625rem;
  border-radius: 1.5625rem;
}
.privacy-policy__heading {
  margin-bottom: 1.6875rem;
}

/*===============================================
  サイトマップ
===============================================*/
.sitemap-list__items {
  display: grid;
  grid-template: repeat(7, 1fr)/repeat(2, 1fr);
  grid-auto-flow: column;
  gap: 1.25rem 5rem;
}
.sitemap-list__item:first-of-type {
  grid-column: span 2;
}
.sitemap-list__link {
  line-height: 1.5;
  padding: 1em 1em;
}

/*===============================================
  404エラー
===============================================*/