@charset "UTF-8";
/* SCSSの読み込み */
@import url(all.css);
/*===============================================
  切り替え用
===============================================*/
html {
  font-size: clamp(9px, 0.6896551724vw, 10px);
}

.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: 4rem 3.5rem 0;
  height: 13rem;
}
#header .header__logo img {
  height: 5rem;
}
#header .header__other {
  padding-right: 8rem;
}
#header .header__btn {
  width: 21.2em;
  height: auto;
  aspect-ratio: 424/84;
  font-size: clamp(16px, 1.25vw, 20px);
  -moz-column-gap: 1.1em;
       column-gap: 1.1em;
}
#header .header__btn::before {
  width: 1.5em;
}
#header .header__btn::after {
  width: 0.7em;
  right: 1.2em;
}

/*===============================================
  footer
===============================================*/
#footer {
  padding: 10rem 0 15rem;
}
#footer .footer__inner {
  display: grid;
  grid-template: auto 1fr/1fr auto;
  grid-auto-flow: column;
  align-items: flex-start;
  gap: 5rem 6rem;
  width: 108rem;
}
#footer .footer__logo img {
  height: 5rem;
}
#footer .footer__sns {
  justify-content: flex-start;
}

/*フッターナビ
-----------------------------*/
.footer-nav {
  grid-row: span 2;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}
.footer-nav__list {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: column;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
  margin-block: calc((1em - 1lh) / 2);
}

/*コピーライト
-----------------------------*/
.copy {
  font-size: var(--font-size-sm);
  padding-top: 8rem;
}

/*===============================================
  fixed固定
===============================================*/
/*ページトップ
-----------------------------*/
#pagetop {
  width: 6rem;
  font-size: var(--font-size-sm);
  row-gap: 0.4rem;
  bottom: 12.6rem;
  right: 3.4rem;
}

/*ボトムボタン
-----------------------------*/
#bottom {
  height: 10rem;
  -moz-column-gap: 3.6rem;
       column-gap: 3.6rem;
}
#bottom .fix__ttl {
  width: 30rem;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.12em;
  padding-left: 0.12em;
  padding-block: 1.3rem;
}
#bottom .fix__ttl .b {
  font-size: 1.2em;
}

/*===============================================
  visual
===============================================*/
/*共通
-----------------------------*/
.visual {
  margin-top: -13rem;
}

/*メインビジュアル
-----------------------------*/
.visual__main {
  height: calc(19rem + clamp(500px, 38.5416666667vw, 1110px));
  min-height: 100svh;
  background-position: center bottom max(100%, clamp(-405px, -14.0625vw, -180px)) !important;
  padding: 0 clamp(50px, 3.90625vw, 75px) calc(10rem + clamp(70px, 5.4166666667vw, 104px));
}
.visual__catch--main {
  padding: clamp(68px, 5.2604166667vw, 101px) 0 clamp(34px, 2.65625vw, 51px);
}
.visual__catch--main img {
  height: clamp(246px, 19.1666666667vw, 368px);
  aspect-ratio: 71/46;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 1rem #fff) drop-shadow(0 0 2rem #fff) drop-shadow(0 0 3rem #fff) drop-shadow(0 0 7rem #fff);
}

/*サブビジュアル
-----------------------------*/
.visual__sub {
  height: calc(19rem + clamp(320px, 24.4791666667vw, 470px));
}
.visual__catch--sub {
  font-size: clamp(31px, 2.3958333333vw, 46px);
  filter: drop-shadow(0 0 1rem #fff) drop-shadow(0 0 1rem #fff) drop-shadow(0 0 2rem #fff) drop-shadow(0 0 2rem #fff) drop-shadow(0 0 3rem #fff) drop-shadow(0 0 7rem #fff);
}

/*===============================================
  グローバルナビ
===============================================*/
.gnav__list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gnav__link {
  display: block;
}
/*===============================================
  main#container
===============================================*/
/*===============================================
  パンくずリスト
===============================================*/
.breadcrumb {
  padding-block: calc(2rem - 0.5em);
}
.breadcrumb__list {
  width: 108rem;
}
.breadcrumb + .section {
  padding-top: 13.5rem;
}

/*===============================================
  main共通
===============================================*/
.section {
  padding-block: 13rem;
}
.section--bg::before {
  width: 83.3334%;
  max-width: calc(100% - 32rem);
  min-width: 124rem;
}

.inbox {
  width: 108rem;
}

/*電話番号
-----------------------------*/
.com-tel {
  width: -moz-fit-content;
  width: fit-content;
  align-items: flex-start;
  row-gap: 0.9rem;
}
.com-tel__num {
  font-size: 4rem;
  -moz-column-gap: 1.4rem;
       column-gap: 1.4rem;
}
.com-tel__num::before {
  width: 3.8rem;
}
.com-tel__num span {
  margin-block-start: -0.7rem;
  margin-block-end: -0.2rem;
}
.com-tel .com-replace {
  font-size: calc(var(--font-size-xs) - 1px);
  margin-left: 5.2rem;
}

/* 営業時間
-----------------------------*/
.com-info {
  font-size: var(--font-size-base);
  line-height: 1.66667;
  letter-spacing: 0.08em;
  margin-inline-end: -0.08em;
}

/*ボタン
-----------------------------*/
.com-btn {
  width: 32rem;
  height: 6rem;
  font-size: var(--font-size-h6);
}
.com-btn > span {
  line-height: calc(1em + 0.8rem);
}
.com-btn > span .min {
  font-size: 0.8em;
  margin-bottom: -0.2rem;
}
.com-btn::after {
  width: 1.4rem;
  right: 2.3rem;
}
.com-btn--mail {
  width: 42.4rem;
  height: 8.4rem;
  -moz-column-gap: 2.3rem;
       column-gap: 2.3rem;
  outline-width: 0.4rem;
  outline-offset: -0.4rem;
  padding-right: 3.8rem;
}
.com-btn--mail::before {
  width: 3rem;
}
.com-btn--mail .min {
  display: block;
}

.com-link {
  font-size: var(--font-size-h6);
  -moz-column-gap: 2.3rem;
       column-gap: 2.3rem;
}
.com-link::after {
  width: 1.4rem;
}

/* SNS
-----------------------------*/
.com-sns {
  gap: 3rem;
}
.com-sns li {
  width: 3.5rem;
}

/*テーブル
-----------------------------*/
.com-table {
  line-height: 1.66667;
}
.com-table table {
  border-collapse: separate;
  border-spacing: 0 1rem;
  margin-block: -1rem;
}
/*テキストボックス
-----------------------------*/
.com-text p {
  margin-inline-end: calc(var(--letter-spacing-base) * -1);
}

/*お知らせ
-----------------------------*/
.com-post__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5rem 4.5rem;
}
.com-post__image {
  margin-bottom: 2.6rem;
}
.com-post__inner {
  gap: 1.2rem;
}

/*===============================================
  タイトル
===============================================*/
/*大タイトル
-----------------------------*/
.com-title01 {
  row-gap: 3.4rem;
  margin-bottom: 6rem;
}
.com-title01::after {
  width: 6rem;
  margin-top: 1.6rem;
}
.com-title01--left {
  align-items: flex-start;
  text-align: left;
}
.com-title01--waa::before {
  width: calc(100% + 14rem);
  height: 5.1rem;
}

/*中タイトル
-----------------------------*/
/*小タイトル
-----------------------------*/
/*===============================================
  共通セクション
===============================================*/
/*お問い合わせ
-----------------------------*/
.com-contact {
  padding-block: 15rem;
}
.com-contact__btn.com-btn--mail {
  width: 33.5rem;
  height: 6rem;
  padding-right: 2.4rem;
}
.com-contact__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3.8rem 3rem;
  padding: 6rem;
  margin-top: 7rem;
}
.com-contact__tel-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 3.5rem;
       column-gap: 3.5rem;
  width: 100%;
}

/*よくあるご質問
-----------------------------*/
.com-faq__item {
  margin-bottom: 8rem;
}
.com-faq__heading {
  padding: 1.7rem 3rem;
  margin-bottom: 4rem;
}

/* ビフォーアフター
-----------------------------*/
.com-works__item:not(:has(.com-works__link)) {
  padding: 3rem 3rem 3.5rem;
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
}
.com-works__link {
  padding: 3rem;
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
}
.com-works__link:has(.com-works__btn) {
  padding-bottom: 7.7rem;
}
.com-works__heading {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.com-works__images:has(+ .com-works__body) {
  margin-bottom: 3.5rem;
}
.com-works__image figcaption {
  font-size: var(--font-size-base);
  padding-top: 1.4rem;
}
.com-works__image--before::after {
  bottom: calc(var(--font-size-base) + 1.4rem);
}
.com-works__image--after {
  margin-top: 1rem;
}
.com-works__btn {
  width: 20rem;
  height: 5rem;
  padding-right: 2rem;
  border-top-left-radius: 2rem;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
}

/* サービス・料金
-----------------------------*/
.com-service__box {
  padding-top: 10rem;
}
.com-service__heading {
  padding: 1.8rem 3rem;
  margin-bottom: 3rem;
}
.com-service__thumb:has(+ *) {
  margin-bottom: 3rem;
}
.com-service__items {
  margin-top: 6rem;
}
.com-service__item {
  gap: 1.4rem 2rem;
  padding: 3rem 6rem;
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
  margin-bottom: 2.8rem;
}
.com-service__value {
  padding-top: calc(2.4rem + (1em - 1lh) / 2);
}

/*===============================================
  トップページ
===============================================*/
/*感謝の気持ちを込めて
お得なキャンペーン開催中！
-----------------------------*/
.top-bnr {
  padding-bottom: 1.4rem;
}
.top-bnr__item {
  padding: 6rem 3.5rem 3rem;
  outline-offset: calc(-1rem - 1px);
}
.top-bnr__title {
  font-size: 4rem;
  margin-bottom: 4.6rem;
}
.top-bnr__title > span {
  line-height: 1.5;
}
.top-bnr__link {
  margin-top: 5.6rem;
}

/*このようなお悩みありませんか？
-----------------------------*/
.top-worries {
  background-size: max(192rem, 100%);
  padding-bottom: 7rem;
}
.top-worries::before {
  width: calc(50% + 32.4rem);
  height: calc(100% - 13rem);
}
.top-worries__inner {
  width: calc(50% + 32.4rem);
  padding-top: 11rem;
  padding-left: 16rem;
  margin-left: auto;
  margin-right: 0;
}
.top-worries__title {
  align-items: flex-start;
  text-align: left;
  font-size: 4.2rem;
}
.top-worries__title > span {
  line-height: calc(1em + 1rem);
}
.top-worries__title .b {
  font-size: calc(1em + 0.6rem);
  line-height: 1;
}
.top-worries__list {
  max-width: 82.5rem;
  margin-bottom: 7rem;
}
.top-worries__item {
  font-size: var(--font-size-h4);
  -moz-column-gap: 2.7rem;
       column-gap: 2.7rem;
  padding: 0 4.5rem 3rem;
  margin-bottom: 2.5rem;
}
.top-worries__item::before {
  width: 2.3rem;
}
.top-worries__item p {
  line-height: var(--line-height-h6);
}
.top-worries__text strong {
  font-size: var(--font-size-h5);
  line-height: 1;
}
.top-worries__btn {
  margin-top: 5rem;
}

/*確かな技術で、洗練された生活へ。
-----------------------------*/
.top-about {
  min-height: 105.8rem;
  padding-top: 18rem;
}
.top-about:has(+ .section--bg) {
  margin-bottom: 23.5rem;
}
.top-about__inner {
  padding-top: 9rem;
  padding-right: 44rem;
}
.top-about__inner::before {
  content: "";
  width: 16rem;
  aspect-ratio: 1;
  border-top: solid 2px var(--color-blue);
  border-left: solid 2px var(--color-blue);
  position: absolute;
  top: 0;
  left: -10rem;
  z-index: -2;
  pointer-events: none;
  opacity: 0.5;
}
.top-about__title {
  margin-bottom: 7rem;
}
.top-about__title .min {
  font-size: 3rem;
}
.top-about__images {
  width: 100%;
  position: absolute !important;
  left: 0;
  z-index: 4 !important;
}
.top-about__images--top {
  top: 0;
}
.top-about__images--bottom {
  bottom: 0;
}
.top-about__images--bottom .top-about__image {
  width: calc(50% - 11.8rem);
  height: 57rem;
  right: 0;
  bottom: -5.3rem;
}
.top-about__image {
  position: absolute;
  pointer-events: none;
}
.top-about__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.top-about__image--lt {
  width: calc(50% - 38rem);
  min-width: 40rem;
  height: 36rem;
  top: -26.5rem;
  right: calc(50% + 26rem);
}
.top-about__image--ct {
  width: calc(50% - 50.8rem);
  min-width: 32rem;
  height: 42.2rem;
  top: 5rem;
  right: clamp(86px, 6.6666666667vw, 128px);
  right: clamp(6.4rem, 10vw - 6.4rem, 12.8rem);
  z-index: 1;
}
.top-about__image--rt {
  width: calc(50% - 73.7rem);
  min-width: 10rem;
  height: 40.8rem;
  top: -32.5rem;
  right: 0;
}
.top-about__image--rt img {
  -o-object-position: left center;
     object-position: left center;
}

/*ハウスクリーニングを頼むと、
どんな変化があるの？
-----------------------------*/
.top-change:has(+ .top-service) {
  margin-bottom: 13rem;
}
.top-change__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -moz-column-gap: 9rem;
       column-gap: 9rem;
}
.top-change__item {
  width: 100%;
}
.top-change__icon {
  width: 30rem;
  margin: 0 auto 3rem;
}
.top-change__heading {
  word-break: keep-all;
  margin-bottom: 2.5rem;
}
.top-change__body {
  line-height: 2.22223;
}

/*動画で紹介
-----------------------------*/
.top-movie__title {
  margin-bottom: 8rem;
}
.top-movie__title .mark {
  padding-inline: 1rem;
  background: linear-gradient(to top, var(--color-sky) 3rem, transparent 3rem);
}
.top-movie__box:has(+ .top-movie__text) {
  margin-bottom: 6rem;
}

/*私たちにできること
-----------------------------*/
.top-service__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem 2.6666666667rem;
}
.top-service__item {
  width: 25rem;
}
.top-service__link:hover {
  color: var(--color-sky);
}
.top-service__link:hover .top-service__icon {
  transform: translateY(-0.5rem);
}
.top-service__icon {
  width: 100%;
  margin-bottom: 2.3rem;
  transition: all 0.3s ease-out;
  position: relative;
}
.top-service__icon::after {
  content: "";
  width: 5rem;
  aspect-ratio: 1;
  background: url(../img/common/arrow.svg) no-repeat center/1.4rem;
  background-color: var(--color-blue);
  border-radius: 50%;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}
.top-service__heading {
  font-size: var(--font-size-base);
}
.top-service__heading > span {
  line-height: 1.22223;
}
.top-service__heading .min {
  font-size: var(--font-size-xs);
  line-height: 1.57143;
}
.top-service__btn {
  width: 41.6rem;
  margin: 6rem auto 0;
}

/*ビフォーアフター
-----------------------------*/
.top-works {
  min-height: 111rem;
  padding-block: 15rem;
}
.top-works::after {
  width: calc(50% - 16.2rem);
  height: 66rem;
  position: absolute;
  left: 0;
  bottom: -7.6rem;
  z-index: 1;
  pointer-events: none;
}
.top-works__box {
  display: grid;
  grid-template: auto auto 1fr/1fr 57.6rem;
  align-items: flex-start;
  gap: 5.5rem 5rem;
}
.top-works__title {
  margin-bottom: 0;
  order: 0;
}
.top-works__text {
  order: 2;
}
.top-works__list,
.top-works .com-empty {
  order: 1;
  grid-row: span 3;
}
.top-works__item {
  margin-bottom: 5rem;
}
.top-works__item .com-works__link {
  padding-inline: 2.6rem;
}
.top-works__item .com-works__image--before {
  width: 23.4rem;
}
.top-works__item .com-works__image--before img {
  aspect-ratio: 234/180;
}
.top-works__item .com-works__image--before::after {
  width: 6.4rem;
  aspect-ratio: 64/41;
}
.top-works__item .com-works__image--after {
  width: 26.4rem;
}
.top-works__item .com-works__image--after img {
  aspect-ratio: 264/230;
}
.top-works__btn {
  order: 3;
}

/*ご利用の流れ
-----------------------------*/
.top-flow {
  padding: 17rem 0 15rem;
}
.top-flow__title {
  margin-bottom: 8rem;
}
.top-flow__title .mark {
  padding-inline: 1rem;
  background: linear-gradient(to top, var(--color-sky) 3rem, transparent 3rem);
}
.top-flow__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 4.2rem 4.5rem;
  overflow: hidden;
}
.top-flow__item {
  width: 33rem;
  padding: 2.4rem 2rem 3rem;
}
.top-flow__item::after {
  width: 2rem;
  aspect-ratio: 20/26;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 1.25rem);
}
.top-flow__icon {
  width: 4.2rem;
  margin-bottom: -4.2rem;
}
.top-flow__heading {
  row-gap: calc(4.2rem - (1em + var(--font-size-sm)));
  padding-left: 6rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

/*よくあるご質問
-----------------------------*/
.top-faq__list,
.top-faq .com-empty {
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
}
.top-faq__list {
  padding: 4rem 4rem 5rem;
}
.top-faq__item {
  margin-bottom: 5rem;
}
.top-faq__item .com-faq__heading {
  margin-bottom: 3rem;
}
.top-faq__item .com-faq__body p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: 1lh;
}
.top-faq__btn {
  margin: 6rem auto 0;
}

/*お知らせ・キャンペーン
-----------------------------*/
.top-news__box {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
  gap: 8rem 4rem;
}
.top-news__title {
  order: 0;
  margin-bottom: 0;
}
.top-news__list,
.top-news .com-empty {
  grid-column: span 2;
  order: 2;
}
.top-news .com-btn {
  order: 1;
}

/*店舗概要
-----------------------------*/
.top-info:has(+ .com-contact) {
  margin-bottom: 16rem;
}
.top-info__inner {
  display: flex;
  justify-content: center;
  align-items: stretch;
  -moz-column-gap: 7rem;
       column-gap: 7rem;
}
.top-info__table {
  width: 100%;
  line-height: 1.88889;
}
.top-info__table dl {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: calc(1lh - 1em);
  padding-bottom: 2.4rem;
  margin-bottom: 2.4rem;
}
.top-info__table dl:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}
.top-info__table dd .com-replace {
  font-size: calc(var(--font-size-sm) - 1px);
}
.top-info__map {
  width: 51.4rem;
  margin-right: -10rem;
  flex-shrink: 0;
}

/*===============================================
  サービス・料金
===============================================*/
/*サービス・料金一覧
-----------------------------*/
.service-list__tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 3rem;
  margin-top: 4.5rem;
  margin-bottom: 2rem;
}
.service-list__tag .com-btn {
  width: 100%;
  height: auto;
  min-height: 6rem;
  padding: 1rem 4rem 1rem 2rem;
}
.service-list__contact {
  display: flex;
  justify-content: center;
  align-items: stretch;
  -moz-column-gap: 3.6rem;
       column-gap: 3.6rem;
  padding-top: 6rem;
}
.service-list__contact > * {
  width: 100%;
}
.service-list__tel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 56.2rem;
  padding: 2.7rem 3rem;
  outline-offset: calc(-1rem - 1px);
}
.service-list__tel dt {
  width: 100%;
  padding-bottom: 1.2rem;
  margin-bottom: 1.3rem;
}
.service-list__time {
  font-size: var(--font-size-sm);
  margin-top: calc(1.2rem + (1em - 1lh) / 2);
}
.service-list__btn {
  flex-direction: column;
  row-gap: 2rem;
  height: auto;
  font-size: 2.2rem;
  padding: 1.5rem 4rem;
}
.service-list__btn > span {
  max-width: 13em;
  line-height: 1.54546;
  word-break: keep-all;
}
.service-list__btn .min {
  font-size: var(--font-size-base);
  line-height: 1.77778;
}
.service-list__btn::before {
  aspect-ratio: 30/22;
}

/*===============================================
  コーティング
===============================================*/
/*コーティングで、
新品のような美しさを長期間キープ！
-----------------------------*/
.coating-about {
  padding-bottom: 0;
}
.coating-about__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  min-height: 56.5rem;
  padding-left: 53rem;
}
.coating-about__title {
  font-size: 4.4rem;
  margin-bottom: 7.5rem;
}
.coating-about__title > span {
  line-height: 1.63637;
}
.coating-about__image {
  width: calc(50vw - 11.8rem);
  max-width: 84.2rem;
  min-width: 495px;
  height: 56.5rem;
  position: absolute;
  top: 0;
  right: calc(50% + 11.8rem);
}
.coating-about__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*キレイが続き、掃除がラクになる
5つの理由
-----------------------------*/
.coating-reason__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4.5rem 9rem;
}
.coating-reason__item {
  width: 30rem;
  position: relative;
}
.coating-reason__item::before {
  counter-increment: num 1;
  content: counter(num, decimal-leading-zero);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(1em + 4rem);
  aspect-ratio: 1;
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-lg);
  line-height: 1;
  background: var(--color-blue);
  border-radius: 50%;
  padding-bottom: 0.1em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.coating-reason__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  aspect-ratio: 1;
  background: var(--gradation-sky);
  border-radius: 50%;
  margin-bottom: 4rem;
}
.coating-reason__heading {
  max-width: 8em;
  min-height: calc(1em + 0.8rem);
  align-items: center;
  text-align: center;
  color: var(--color-white);
  margin-bottom: 2.5rem;
}
.coating-reason__heading > span {
  line-height: 1.33334;
}
.coating-reason__icon {
  width: 16.4rem;
}
.coating-reason__body {
  line-height: 2.22223;
}

/*お客様の声
-----------------------------*/
.coating-voice__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  padding-top: 8rem;
}
.coating-voice__item {
  padding: 3rem 2rem;
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
}
.coating-voice__status {
  padding-top: 1em;
}
.coating-voice__body {
  margin-top: 2rem;
  padding-top: calc(3rem + (1em - 1lh) / 2);
}
.coating-voice__body p {
  margin-inline: -0.4rem;
}

/*サービス・料金
-----------------------------*/
.coating-service__list {
  padding-top: 8rem;
}

/*よくあるご質問
-----------------------------*/
.coating-faq__list,
.coating-faq .com-empty {
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
  margin-top: 7rem;
}
.coating-faq__list {
  padding: 4rem 4rem 5rem;
}
.coating-faq__item {
  margin-bottom: 5rem;
}
.coating-faq__item .com-faq__heading {
  margin-bottom: 3rem;
}

/*施工例
-----------------------------*/
.coating-case__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.2rem 5.6rem;
  margin-top: 8rem;
}
.coating-case__item .com-works__heading {
  font-size: 2.3rem;
  padding-inline: 1rem;
}
.coating-case__item .com-works__heading > span {
  line-height: 1.30435;
  margin-inline-end: calc(var(--letter-spacing-lg) * -1 - 0.5em);
}
.coating-case__item .com-works__image--before {
  width: 20rem;
}
.coating-case__item .com-works__image--before img {
  aspect-ratio: 200/154;
}
.coating-case__item .com-works__image--before::after {
  width: 5.5rem;
  aspect-ratio: 55/35;
}
.coating-case__item .com-works__image--after {
  width: 23rem;
}
.coating-case__item .com-works__image--after img {
  aspect-ratio: 230/200;
}

/*===============================================
  ビフォーアフター
===============================================*/
/*ビフォーアフター 一覧
-----------------------------*/
.works-list__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.6rem 5.6rem;
  margin-top: 7rem;
}
.works-list__item .com-works__link {
  height: 100%;
}
.works-list__item .com-works__image--before {
  width: 20rem;
}
.works-list__item .com-works__image--before img {
  aspect-ratio: 200/154;
}
.works-list__item .com-works__image--before::after {
  width: 5.5rem;
  aspect-ratio: 55/35;
}
.works-list__item .com-works__image--after {
  width: 23rem;
}
.works-list__item .com-works__image--after img {
  aspect-ratio: 230/200;
}

/*ビフォーアフター 詳細
-----------------------------*/
.works-detail .com-works__image figcaption {
  font-size: 2rem;
  padding-top: 2rem;
}
.works-detail .com-works__image--before {
  width: 43rem;
}
.works-detail .com-works__image--before img {
  aspect-ratio: 430/326;
}
.works-detail .com-works__image--before::after {
  width: 10.9rem;
  aspect-ratio: 109/68;
  bottom: 4rem;
}
.works-detail .com-works__image--after {
  width: 52rem;
  margin-top: 0;
}
.works-detail .com-works__image--after img {
  aspect-ratio: 52/43;
}
.works-detail__box {
  padding: 5rem;
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
}
.works-detail__heading {
  font-size: 2.8rem;
  padding-bottom: 1.8rem;
  margin-bottom: 3rem;
}
.works-detail__table {
  margin-top: 2rem;
}
.works-detail__table:has(+ *) {
  margin-bottom: 4.5rem;
}
.works-detail__table tr th {
  width: 18.3rem;
}
.works-detail__table tr th,
.works-detail__table tr td {
  padding: 0.3rem 2.8rem;
}

/*===============================================
  よくあるご質問
===============================================*/
/*よくあるご質問 一覧
-----------------------------*/
.faq-list__items {
  margin-top: 7rem;
}

/*===============================================
  お知らせ
===============================================*/
/* お知らせ 一覧
-----------------------------*/
.news-archive .com-empty {
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
}

/* お知らせ 詳細
-----------------------------*/
.news-detail__box {
  padding: 5rem;
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
}
.news-detail__heading {
  font-size: 2.8rem;
  padding-bottom: 1.8rem;
  margin-bottom: 3rem;
}

/*タグリスト
-----------------------------*/
/*===============================================
  お問い合わせ
===============================================*/
.contact-form__text + .contact-form__box {
  margin-top: 7rem;
}
.contact-form__box {
  padding: 4rem 5rem;
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
  margin-top: 6rem;
}
.contact-form__heading {
  font-size: 2.8rem;
  padding-bottom: 2rem;
  margin-bottom: 4rem;
}
.contact-form__body + * {
  margin-top: 3.5rem;
}
.contact-form__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem 3.6rem;
}
.contact-form__table tr th {
  width: 36rem;
  text-align: left;
  vertical-align: middle;
  line-height: calc(4.2rem / var(--font-size-base));
  padding: 2rem 2rem 2rem 3rem;
}
.contact-form__table tr th .optional-mark,
.contact-form__table tr th .required-mark {
  font-size: var(--font-size-xs);
  margin-top: calc(2.1rem - 0.5lh);
}
.contact-form__table tr td {
  vertical-align: middle;
  line-height: calc(4.2rem / var(--font-size-base));
  padding: 2rem;
}
.contact-form .contact-submits-wrap > * {
  margin: 2rem 1.5rem 0;
}

/*===============================================
  お問い合わせ完了
===============================================*/
/*===============================================
  プライバシーポリシー
===============================================*/
.privacy-policy__box {
  padding: 4rem 5rem;
  outline-width: 0.6rem;
  outline-offset: -0.6rem;
  margin-bottom: 6rem;
}
.privacy-policy__heading {
  font-size: 2.8rem;
  padding-bottom: 2rem;
  margin-bottom: 3rem;
}

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

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