@charset "UTF-8";
/* --------------------------------
CMS共通パーツ 
-------------------------------- */
/* 2カラムレイアウト */
.contents {
  display: flex;
  flex-direction: column;
  gap: 7em clamp(0px, 7vw, 84px);
}

.contents__main {
  width: 90%;
  margin: 0 auto;
}

.contents__sidebar, .contents__sidebar--pTop {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 3em;
}
.contents__sidebar--pTop {
  padding-top: 0;
}

/* サイドバーレイアウト */
.sidebar__heading.typeCat {
  max-width: 130.6px;
  width: 100%;
}
.sidebar__heading.areaCat {
  max-width: 205px;
  width: 100%;
}

.sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sidebar__list a {
  display: block;
  text-decoration: none;
}
.sidebar__list a::before {
  content: "#";
  display: inline-block;
  margin-right: 10px;
}

.catBox, .catBox--small {
  display: inline-flex;
  justify-content: center;
  width: auto;
  padding-inline: 21.5px;
  padding-block: 3px 1px;
}
.catBox--small {
  padding-block: 6.5px 2.5px;
  padding-inline: 19px;
}
.catBox--small .catBox__text {
  font-size: 10px;
}

.catBox__text {
  font-size: 11px;
  display: inline-block;
  transform: translateY(-2px);
}

/* 詳細ページのページネーション */
.postNavigation, .postNavigation--gapLarge {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}
.postNavigation--gapLarge .postNavigation__prev > a,
.postNavigation--gapLarge .postNavigation__next > a {
  gap: 27px;
}
.postNavigation--gapLarge .postNavigation__next > a {
  align-items: flex-end;
}

.postNavigation__prev {
  width: 72%;
  margin-right: auto;
}

.postNavigation__next {
  width: 72%;
  margin-left: auto;
}

.postNavigation__prev > a,
.postNavigation__next > a {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  text-decoration: none;
}
.postNavigation__prev > a:hover img,
.postNavigation__next > a:hover img {
  transform: translate(0, 0);
  opacity: 1;
}

.postNavigation__next > a {
  align-items: flex-end;
}

.postNavigation__label {
  display: block;
  width: 42.9px;
}

.postNavigation__title {
  font-size: 18px;
  letter-spacing: 0.25em;
  font-weight: bold;
  color: #000;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.postNavigation__next .postNavigation__title {
  text-align: right;
}

/* アーカイブページのページネーション */
.archivePagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.prevItem {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 16px;
}

.nextItem {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
}

.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 32px;
  min-width: 32px;
  height: 32px;
  text-decoration: none;
  color: #d1c6b4;
}
.page-numbers:hover {
  opacity: 1;
  color: #d1c6b4;
}

.prevItem .page-numbers,
.nextItem .page-numbers {
  max-width: 40.6px;
  min-width: 40.6px;
}
.prevItem .page-numbers:hover img,
.nextItem .page-numbers:hover img {
  transform: translate(0, 0);
  opacity: 1;
}

.current .page-numbers.current {
  background: #d1c6b4;
  color: #fff;
}
.current .page-numbers.current:hover {
  color: #fff;
}

/* 活用方法一覧ページ */
.howtouse__postBox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 55px 51px;
}

.howtouse__postLink {
  display: block;
  width: 100%;
  text-decoration: none;
}
.howtouse__postLink:hover .howtouse__thum {
  opacity: 1;
  transform: scale(1.03);
}

.howtouse__postImg {
  width: 100%;
  aspect-ratio: 574/382;
  overflow: hidden;
}

.howtouse__thum {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  transition: all 0.6s ease;
}

.howtouse__paginationBox {
  border-top: 5px solid #f9f7f4;
}

/* 活用方法詳細ページ */
.howtouseSingle__container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.howtouseSingle__imgBox {
  width: 100%;
  aspect-ratio: 960/638.9;
  overflow: hidden;
}
.howtouseSingle__imgBox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.howtouseSingle__contents > p {
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: 0.15em;
  color: #666;
  margin-top: 16px;
}
.howtouseSingle__contents > p:nth-child(1) {
  margin-top: 0;
}
.howtouseSingle__contents > p > img {
  width: auto;
  max-width: 100%;
}

.howtouseSingle__parts {
  width: 100%;
  margin-inline: auto;
}

.howtouseSingle__listItem {
  position: relative;
  padding-left: 44px;
  font-size: 16px;
  letter-spacing: 0.2em;
}
.howtouseSingle__listItem::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 11px;
  width: 14px;
  aspect-ratio: 11.6/8;
  background: url("../img/common/icon_check_gold.svg") center/contain no-repeat;
}

.howtouseSingle__heading {
  display: flex;
  align-items: center;
  gap: 24px;
}
.howtouseSingle__heading > span {
  display: inline-block;
  padding-top: 2px;
}
.howtouseSingle__heading > span.faq {
  width: 27.3px;
}
.howtouseSingle__heading > span.case {
  width: 35.9px;
}
.howtouseSingle__heading > span.voice {
  width: 43.9px;
}

.howtouseSingle #sub03 {
  border-bottom: 1px solid #e4ded4;
}

.howtouseSingle #sub05 {
  border-top: 5px solid #f9f7f4;
}

/* 施工事例一覧ページ */
.results__title {
  display: flex;
}
.results__title span:nth-child(1) {
  width: fit-content;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}
.results__title span:nth-child(2) {
  min-width: max-content;
}

.results__catBox {
  padding-left: 4px;
}

.results__cat {
  position: relative;
}
.results__cat::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  right: -18px;
  width: 9px;
  aspect-ratio: 1/1;
  background: url("../img/common/icon_triangle_gray.svg") center/contain no-repeat;
  transform-origin: center;
  transform: translateY(-50%) rotate(180deg);
  transition: all 0.3s ease-in-out;
}
.results__cat.active::after {
  transform: translateY(-50%) rotate(0deg);
}
.results__cat.active .results__catMenu {
  visibility: visible;
  opacity: 1;
}
.results__cat.is-category {
  max-width: 92.8px;
  width: 100%;
}
.results__cat.is-area {
  max-width: 46.3px;
  width: 100%;
}
.results__cat > img {
  cursor: pointer;
}

.results__catMenu {
  max-width: 320px;
  min-width: 320px;
  width: 100%;
  border: 1px solid #e4ded4;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: 0;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  margin-top: 3px;
  padding-block: 25px 28px;
  padding-inline: 25px 25px;
}

.results__catList {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 43px;
}
.results__catList:nth-child(2) {
  margin-top: 3px;
}
.results__catList > li > a {
  display: block;
  text-decoration: none;
}
.results__catList > li > a::before {
  content: "#";
  display: inline-block;
  margin-right: 10px;
}

.results__cols, .results__cols--gapLarge {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px 33px;
}

.results__cols--gapLarge {
  gap: 75px 33px;
}

.results__link {
  display: block;
  text-decoration: none;
}
.results__link:hover img {
  opacity: 1;
  transform: scale(1.03);
}

.results__imgBox {
  width: 100%;
  aspect-ratio: 583/388;
  overflow: hidden;
}
.results__imgBox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.6s ease;
}

.results__paginationBox {
  border-top: 5px solid #f9f7f4;
}

/* 施工事例詳細ページ */
.singleResults #sub01 {
  padding-top: 0;
}

.singleResults__container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.singleResults__topImg {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  aspect-ratio: 1600/760;
  overflow: hidden;
}
.singleResults__topImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.singleResults__catBox {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.singleResults__detail > p {
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: 0.15em;
  color: #333;
  margin-top: 14px;
}
.singleResults__detail > p:nth-child(1) {
  margin-top: 0;
}
.singleResults__detail > p > img {
  width: auto;
  max-width: 100%;
}

.singleResults__appeal01Box {
  display: flex;
  flex-direction: column;
  gap: 94px;
}

.singleResults__appeal01Img {
  width: 100%;
  aspect-ratio: 960/638.9;
  overflow: hidden;
}
.singleResults__appeal01Img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.singleResults__appeal01Contents > p {
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: 0.15em;
  color: #333;
  margin-top: 16px;
}
.singleResults__appeal01Contents > p:nth-child(1) {
  margin-top: 0;
}
.singleResults__appeal01Contents > p > img {
  width: auto;
  max-width: 100%;
}

.singleResults__appeal02cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 70px;
}

.singleResults__appeal02Img {
  width: 100%;
  aspect-ratio: 583.3/388.3;
  overflow: hidden;
}
.singleResults__appeal02Img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.singleResults__appeal02Contents > p {
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: 0.15em;
  color: #333;
  margin-top: 16px;
}
.singleResults__appeal02Contents > p:nth-child(1) {
  margin-top: 0;
}
.singleResults__appeal02Contents > p > img {
  width: auto;
  max-width: 100%;
}

.singleResults #sub04 {
  padding-bottom: 0;
}

.singleResults__paginationBox {
  border-bottom: 1px solid #e4ded4;
}

.singleResults__recommendHeading {
  max-width: 184px;
  width: 100%;
}

/* お客様の声一覧ページ */
.voice__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 74px 45px;
}
.voice__cols.is-howtouse {
  gap: 74px 67px;
}

.voice__link {
  text-decoration: none;
}
.voice__link:hover .voice__imgBox > img {
  opacity: 1;
  transform: scale(1.03);
}

.voice__title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.voice__imgBox {
  width: 100%;
  aspect-ratio: 447/320;
  overflow: hidden;
}
.voice__imgBox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.6s ease;
}

.voiceArchive__paginationBox {
  border-top: 5px solid #f9f7f4;
}

/* お客様の声詳細ページ */
.voiceSingle__contentsArea {
  border-top: 1px solid #e4ded4;
}
.voiceSingle__contentsArea > p {
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: 0.15em;
  color: #333;
  margin-top: 16px;
}
.voiceSingle__contentsArea > p:nth-child(1) {
  margin-top: 0;
}
.voiceSingle__contentsArea > p > img {
  width: auto;
  max-width: 100%;
}

.voiceSingle__staffBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px 68px;
  padding-inline: 25px;
}

.voiceSingle__staffImg {
  max-width: 143px;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}
.voiceSingle__staffImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.voiceSingle__staffTexts {
  flex: 1;
}

.voiceSingle__staffContents > p {
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: 0.15em;
  color: #333;
  margin-top: 16px;
}
.voiceSingle__staffContents > p:nth-child(1) {
  margin-top: 0;
}
.voiceSingle__staffContents > p > img {
  width: auto;
  max-width: 100%;
}

.voiceSingle__paginationBox {
  border-top: 5px solid #f9f7f4;
  border-bottom: 5px solid #f9f7f4;
}

.voiceSingle__recommendHeading {
  max-width: 184px;
  width: 100%;
}

.voiceSingle__recommendWrap {
  display: flex;
  flex-direction: column;
  gap: 3em;
}

.voiceSingle__recommendCols {
  display: flex;
  flex-direction: column;
  gap: 32px 53px;
  text-decoration: none;
}
.voiceSingle__recommendCols:hover {
  opacity: 1;
}
.voiceSingle__recommendCols:hover .voiceSingle__recommendImg > img {
  opacity: 1;
  transform: scale(1.03);
}

.voiceSingle__recommendImg {
  width: 100%;
  aspect-ratio: 266/190;
  overflow: hidden;
}
.voiceSingle__recommendImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.6s ease;
}

.voiceSingle__recommendTexts {
  flex: 1;
}

/* ブログ一覧ページ */
.blog__list, .blog__list--recommend {
  display: flex;
  flex-direction: column;
  gap: 3em;
    @media (min-width: 769px) {
    gap: 60px;
  }
}
.blog__list--recommend {
  gap: 60px;
}
.blog__list--recommend .blog__link {
  gap: 10px 20px;
  @media (min-width: 769px) {
    gap: 10px 30px;
  }
}
/* .blog__list--recommend .blog__thum {
  width: 100%;
} */
.blog__list--recommend .blog__texts {
  @media (min-width: 769px) {
    padding-top: 17px;
  }
}
.blog__list--recommend .blog__title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.blog__link {
  display: flex;
  /* flex-direction: column; */
  gap: 16px 20px;
  text-decoration: none;
}
.blog__link:hover .blog__thum > img {
  opacity: 1;
  transform: scale(1.03);
}

.blog__thum {
  width: 42%;
  max-width: 100%;
  aspect-ratio: 324 / 216;
  overflow: hidden;
}
.blog__thum > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.6s ease;
}

.blog__texts {
  flex: 1;
}

.blog__title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  @media (min-width: 769px) {
    margin: 0.75em 0 1.25em;
  }
}

.blog__catBox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}

.blog__paginationBox {
  border-top: 5px solid #f9f7f4;
}

/* ブログ詳細ページ */
.blogSingle__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em 0;
}

.blogSingle__catBox {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.blogSingle__date {
  margin-right: 38px;
}

.blogSingle__contents {
  border-top: 1px solid #e4ded4;
}
.blogSingle__contents > p {
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: 0.15em;
  color: #333;
  margin-top: 16px;
}
.blogSingle__contents > p:nth-child(1) {
  margin-top: 0;
}
.blogSingle__contents > p > img {
  width: auto;
  max-width: 100%;
}

.blogSingle__paginationBox {
  border-top: 5px solid #f9f7f4;
  border-bottom: 5px solid #f9f7f4;
}

.blogSingle__recommendHeading {
  max-width: 184px;
  width: 100%;
}

@media (min-width: 768px){
  .contents {
    flex-direction: row;
  }
  .contents__main {
    width: 71.75%;
  }
  .contents__sidebar, .contents__sidebar--pTop {
    width: 21.25%;
  }
  .contents__sidebar--pTop {
    padding-top: 10px;
  }
  .sidebar__list {
    min-height: 222.9px;
  }
  .postNavigation, .postNavigation--gapLarge {
    flex-direction: row;
    gap: 2em;
  }
  .postNavigation__prev {
    flex: 1;
    width: auto;
    margin-block: 0;
  }
  .postNavigation__next {
    flex: 1;
    width: auto;
    margin-block: 0;
  }
  .prevItem {
    width: auto;
    margin-right: 20px;
    margin-bottom: 0;
  }
  .nextItem {
    width: auto;
    margin-left: 20px;
    margin-top: 0;
  }
  .howtouse__postBox {
    grid-template-columns: 1fr 1fr;
    gap: 74px 51px;
  }
  .howtouseSingle__parts {
    width: 91%;
  }
  .results__catMenu {
    max-width: 466px;
    min-width: 466px;
    padding-block: 29px 34px;
    padding-inline: 51px 44px;
  }
  .results__cols, .results__cols--gapLarge {
    grid-template-columns: 1fr 1fr;
    gap: 65px 33px;
  }
  .results__cols:has(.noPost), .results__cols--gapLarge:has(.noPost) {
    grid-template-columns: 1fr;
  }
  .results__cols--gapLarge {
    gap: 85px 33px;
  }
  .singleResults__appeal02cols {
    grid-template-columns: 1fr 1fr;
    gap: 89px 33px;
  }
  .voice__cols {
    grid-template-columns: 1fr 1fr;
  }
  .voice__cols:has(.noPost) {
    grid-template-columns: 1fr;
  }
  .voiceSingle__recommendCols {
    flex-direction: row;
  }
  .voiceSingle__recommendImg {
    max-width: 266px;
  }
  .blog__list, .blog__list--recommend {
    gap: 60px;
  }
  .blog__list--recommend {
    gap: 45px;
  }
  .blog__list--recommend .blog__thum {
    max-width: 266px;
    aspect-ratio: 266/190;
  }
  .blog__link {
    /* flex-direction: row; */
  }
  .blog__thum {
    max-width: 409px;
  }
  .blog__texts {
    padding-top: 10px;
  }
}

@media (min-width: 990px){
  .prevItem {
    margin-right: 41px;
  }
  .nextItem {
    margin-left: 41px;
  }
  .page-numbers {
    max-width: 37.5px;
    min-width: 37.5px;
    height: 37.5px;
  }
  .voiceSingle__staffBox {
    flex-direction: row;
    align-items: flex-start;
    padding-inline: 47px 65px;
  }
}