@charset "utf-8";
/* CSS Document */
/* ---------- 背景画像 ---------- */
.top-container {
  background: url("../images/top/bg-img.svg"); /* image url*/
  background-repeat: repeat-y;
  background-size: 500px 6953px;
  background-position: 0 0;
  animation: bg 70s infinite linear;
}
@keyframes bg {
  to {
    background-position: 0 -6953px;
  }
  from {
    background-position: 0 0;
  }
}
@media screen and (max-width: 768px) { /* SP */
  .top-container {
    background-size: 200px 2817px;
  }
}
/* ---------- メインビジュアル ---------- */
.top-mv {
  margin: 0 auto;
  max-width: 900px;
  margin-bottom: 67px;
}
.top-mv__img {
  margin-bottom: 50px;
}
.top-mv__img img {
  width: 100%;
  margin-top: 166px;
}
.top-mv__img-sp {
  display: none;
}
.top-mv p {
  text-align: center;
  line-height: 3rem;
  font-weight: 700;
  font-size: 1.5rem;
}
@media screen and (max-width: 1200px) {
  .top-mv {
    padding: 0 30px;
  }
}
@media screen and (max-width: 768px) { /* SP */
  .top-mv {
    margin-bottom: 30px;
  }
  .top-mv__img {
    display: none;
  }
  .top-mv__img-sp {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
  }
  .top-mv__img-sp img {
    width: 195px;
    margin-top: 91px;
  }
  .top-mv p {
    line-height: 2rem;
    font-size: 1rem;
  }
}
/* ---------- NEWS ---------- */
.top-news-content {
  max-width: 1100px;
  margin-bottom: 160px;
  margin: 0 auto;
}
.top-news-content__inner {
  background-color: #fff;
  border-radius: 20px;
  padding: 22px 30px;
  display: flex;
  align-items: center;
  position: relative;
}
.top-news__title {
  margin-right: 20px;
}
.top-news__title img {
  width: 67px;
}
.border:before {
  content: "";
  display: block;
  height: 24px;
  border-left: 1px solid #552E31;
  border-radius: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.top-news__date {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-right: 15px;
  margin-left: 20px;
}
.top-news-content p {
  font-weight: 500;
}
.top-news-content__inner-sp {
  display: none;
}
@media screen and (max-width: 1200px) {
  .top-news-content {
    padding: 0 30px;
  }
}
@media screen and (max-width: 768px) { /* SP */
  .top-news-content__inner {
    display: none;
  }
  .top-news-content__inner-sp {
    display: block;
    background-color: #fff;
    border-radius: 20px;
    padding: 30px;
  }
  .top-news__titledate {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 5px;
  }
  .top-news__title-sp {
    margin-right: 15px;
  }
  .top-news__title-sp img {
    width: 57px;
  }
  .border-sp:before {
    content: "";
    display: block;
    height: 18px;
    border-left: 1px solid #552E31;
    border-radius: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .top-news__date-sp {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 15px;
  }
}
/* ---------- 私たちにできること ---------- */
.top-service {
  max-width: 900px;
  margin: 0 auto;
  margin-top: 160px;
  margin-bottom: 160px;
}
.top-title-service {
  text-align: center;
  margin-bottom: 60px;
}
.top-title__main-service {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 60px;
}
.top-title__sub.title-service img {
  width: 116px;
}
.top-service p {
  line-height: 2rem;
  text-align: center;
  margin-bottom: 60px;
}
.top-service__img img {
  max-width: 900px;
}
/* ----- VIEWMORE ----- */
.view-more-btn {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
.view-more-btn a {
  display: block;
}
.view-more-btn span img {
  width: 103px;
}
.view-more-btn span {
  position: relative;
}
.view-more-btn a:hover {
  opacity: 1;
}
.view-more-btn span:after {
  position: absolute;
  bottom: 0;
  content: "";
  display: inline-block;
  width: 110px;
  height: 10px;
  overflow: hidden;
  background-image: url("../images/btn/arrow.svg");
  background-position: -10px 0;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 20px;
  transition: .5s;
}
.view-more-btn a:hover span:after {
  background-position: 0 0;
}
@media screen and (max-width: 1200px) {
  .top-service {
    padding: 0 30px;
  }
  .top-service__img {
    overflow-x: scroll;
  }
}
@media screen and (max-width: 768px) { /* SP */
  .top-service {
    margin-top: 100px;
    margin-bottom: 90px;
  }
  .top-title-service {
    margin-bottom: 40px;
  }
  .top-title__main-service {
    font-size: 1.5rem;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .top-title__sub.title-service img {
    width: 82px;
  }
  .top-service p {
    margin-bottom: 40px;
  }
  .top-service__img img {
    width: 630px;
  }
  /* ----- VIEWMORE ----- */
  .view-more-btn {
    margin-top: 50px;
  }
  .view-more-btn img {
    width: 92px;
  }
  .view-more-btn span:after {
    width: 100px;
    height: 5px;
    margin-left: 15px;
  }
  .top-title__sub .title-works img {
    width: 97px;
  }
}
/* ---------- 施工事例 ---------- */
.top-works {
  margin-left: 133px;
  margin-bottom: 160px;
}
.top-works__inner {
  background-color: #fff;
  border-radius: 40px 0 0 40px;
  padding: 120px 0 160px 100px;
}
.top-title__main {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 85px;
}
.top-title__sub.title-works img {
  width: 97px;
}
.top-works__item-img {
  position: relative;
}
.top-works__scale-box {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 30px;
}
.top-works__top-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  transition-duration: 0.5s; /*変化の時間*/
}
.top-works__top-img:hover {
  transform: scale(1.05, 1.05); /*画像の拡大*/
  cursor: pointer; /*カーソルをポインターにする*/
}
.top-works__category {
  border-radius: 20px 0 20px 0;
  background-color: #552E31;
  padding: 17px 35px;
  font-weight: 500;
  color: #fff;
  position: absolute;
  top: 0;
}
.top-works__detail-list {
  display: flex;
  flex-wrap: wrap;
}
.top-works__detail-list dt {
  width: 20%;
  border-bottom: solid 1px rgba(85, 46, 49, 0.3);
  padding: 10px 0;
}
.top-works__detail-list dd {
  width: 80%;
  border-bottom: solid 1px rgba(85, 46, 49, 0.3);
  padding: 10px 0;
}
.swiper-pagination {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 210px;
  height: 85px;
  right: 133px;
  transform: translateY(-180%);
}
div.swiper-pagination div.swiper-button-prev {
  position: relative;
  width: 85px;
  height: 85px;
  top: 0;
  background: url("../images/top/swiper-left.svg");
}
div.swiper-pagination div.swiper-button-prev:after {
  display: none;
}
div.swiper-pagination div.swiper-button-next {
  position: relative;
  width: 85px;
  height: 85px;
  top: 0;
  background: url("../images/top/swiper-right.svg");
}
div.swiper-pagination div.swiper-button-next:after {
  display: none;
}
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}
.swiper-slide {
  width: 420px;
  height: 100%;
}
.swiper-wrapper a:hover {
  opacity: 1;
}
.swiper-wrapper h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.swiper-wrapper p {
  margin-bottom: 30px;
  line-height: 2rem;
}
/* ----- VIEWALL ----- */
.view-all-btn__allworks {
  display: flex;
  align-items: flex-end;
  margin-top: 80px;
}
.view-all-btn__allworks a {
  display: block;
}
.view-all-btn__allworks span img {
  width: 103px;
}
.view-all-btn__allworks span {
  position: relative;
}
.view-all-btn__allworks a:hover {
  opacity: 1;
}
.view-all-btn__allworks span:after {
  position: absolute;
  bottom: 0;
  content: "";
  display: inline-block;
  width: 110px;
  height: 10px;
  overflow: hidden;
  background-image: url("../images/btn/arrow.svg");
  background-position: -10px 0;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 20px;
  transition: .5s;
}
.view-all-btn__allworks a:hover span:after {
  background-position: 0 0;
}
.view-more-btn a:hover span:after {
  background-position: 0 0;
}
@media screen and (max-width: 1400px) {
  .top-works {
    margin-left: 30px;
  }
}
@media screen and (max-width: 768px) { /* SP */
  .top-works {
    margin-left: 0px;
    margin-bottom: 100px;
  }
  .top-works__inner {
    background-color: #fff;
    border-radius: 30px 0 0 30px;
    padding: 100px 0 100px 30px;
  }
  .top-title__sub.title-works img {
    width: 69px;
  }
  .top-title__main {
    font-size: 1.5rem;
    margin-top: 15px;
  }
  .top-works__scale-box {
    border-radius: 15px;
  }
  .top-works__top-img {
    border-radius: 15px;
  }
  .top-works__category {
    border-radius: 15px 0 15px 0;
    padding: 13px 25px;
    font-size: 0.75rem;
  }
  .top-works__detail-list dt {
    width: 30%;
  }
  .top-works__detail-list dd {
    width: 70%;
  }
  .swiper-pagination {
    width: 150px;
    height: 60px;
    right: 30px;
    transform: translateY(-210%);
  }
  div.swiper-pagination div.swiper-button-prev {
    width: 60px;
    height: 60px;
    background: url("../images/top/swiper-left-sp.svg");
  }
  div.swiper-pagination div.swiper-button-next {
    width: 60px;
    height: 60px;
    background: url("../images/top/swiper-right-sp.svg");
  }
  .swiper-wrapper h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
  }
  .view-all-btn__allworks img {
    width: 92px;
  }
  .view-all-btn__allworks span:after {
    width: 100px;
    height: 5px;
    margin-left: 15px;
  }
}
/* ---------- ご利用の流れ ---------- */
.top-flow {
  margin: 0 auto;
  max-width: 1100px;
  margin-bottom: 160px;
}
.top-title-flow {
  margin-bottom: 80px;
}
.top-title__sub.title-flow img {
  width: 76px;
}
.flow-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.flow-item {
  margin-right: 30px;
  width: 251px;
}
.flow-item:last-child {
  margin-right: 0px;
}
.flow-item__img {
  margin-bottom: 20px;
}
.flow-item__img img {
  width: 100%;
}
.flow-item__title {
  border-radius: 100vh;
  color: #fff;
  background-color: #552E31;
  font-weight: 700;
  text-align: center;
  padding: 7px 15px;
  max-width: 251px;
  /*height: 40px;*/
  margin: auto;
  vertical-align: middle;
  line-height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mt-20 {
  margin-top: 20px;
}
@media screen and (max-width: 1200px) {
  .top-flow {
    padding: 0 30px;
  }
}
@media screen and (max-width: 1000px) {
  .making {
    padding-right: 10px;
    padding-left: 10px;
  }
  .support {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (max-width: 870px) {
  .making {
    padding-right: 5px;
    padding-left: 5px;
  }
  .support {
    padding-right: 5px;
    padding-left: 5px;
  }
}
@media screen and (max-width: 830px) { /* SP */
  .top-flow {
    margin-bottom: 90px;
  }
  .top-title-flow {
    margin-bottom: 50px;
    text-align: center;
  }
  .top-title__sub.title-flow img {
    width: 54px;
  }
  .flow-container {
    flex-wrap: wrap;
  }
  .flow-item {
    margin-right: 0px;
    width: 45%;
    height: 45%;
    margin-bottom: 30px;
  }
  .flow-item:last-child {
    margin-bottom: 0px;
  }
  .flow-item__title {
    border-radius: 15px;
    width: 145px;
    height: 70px;
    padding: 10px 15px;
  }
}
/* ---------- よくある質問 ---------- */
.top-faq {
  margin: 0 auto;
  max-width: 1100px;
  position: relative;
}
.top-title__sub.title-faq img {
  width: 56px;
}
.top-title__main-faq {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 80px;
}
/* ----- VIEWALL ----- */
.view-all-btn {
  position: absolute;
  height: 85px;
  right: 160px;
  transform: translateY(-130%);
}
.view-all-btn a {
  display: block;
}
.view-all-btn span img {
  width: 84px;
}
.view-all-btn span {
  position: relative;
}
.view-all-btn a:hover {
  opacity: 1;
}
.view-all-btn span:after {
  position: absolute;
  bottom: 0;
  content: "";
  display: inline-block;
  width: 110px;
  height: 10px;
  overflow: hidden;
  background-image: url("../images/btn/arrow.svg");
  background-position: -10px 0;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 20px;
  transition: .5s;
}
.view-all-btn a:hover span:after {
  background-position: 0 0;
}
.faq-item {
  cursor: pointer;
  transition: .5s;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
}
.faq-item:last-child {
  margin-bottom: 0px;
}
.faq-item__q {
  padding: 20px 30px;
  position: relative;
  display: flex;
  align-items: center;
}
.faq-item__q p {
  font-weight: 700;
}
.faq-item__q span {
  line-height: 0;
}
.faq-item__q span::before {
  display: inline-block;
  content: "";
  background-image: url("../images/faq/question.svg");
  width: 30px;
  height: 30px;
  margin-right: 20px;
  vertical-align: middle;
}
/*
ラベル右側のアイコン「＋」を設定
beforeが横棒
afterが縦棒
*/
.faq-item__q::before, .faq-item__q::after {
  content: '';
  width: 14px;
  height: 1px;
  background: #552E31;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}
.faq-item__q::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}
/*
アコーディオンメニューが開いている場合
*/
.faq-item .open {
  /* ラベルの背景色を変更 */
  background-color: #F7D4C0;
  padding: 20px 30px;
  border-radius: 20px 20px 0 0;
}
.faq-item .open::before {
  /* ラベルアイコンの横棒を非表示 */
  opacity: 0;
}
.faq-item .open::after {
  /* ラベルアイコンの縦棒を横向きに回転 */
  transform: rotate(360deg);
}
/*
アコーディオンメニューのコンテンツ部分は、「display: none;」で非表示にしておく。
ラベルクリック時にjQueryの「  $(this).next().slideToggle();」で表示に切り替わる
*/
.faq-item__a {
  border-radius: 0 0 20px 20px;
  background-color: #fff;
  padding: 40px 30px;
  display: none;
}
.faq-item__a span {
  line-height: 0;
}
.faq-item__a span::before {
  display: inline-block;
  content: "";
  background-image: url("../images/faq/answer.svg");
  width: 30px;
  height: 30px;
  margin-right: 20px;
  vertical-align: middle;
}
.faq-item__a-symbol {
  display: flex;
}
.view-all-btn__sp {
  display: none;
}
@media screen and (max-width: 1200px) {
  .top-faq {
    padding: 0 30px;
  }
}
@media screen and (max-width: 768px) { /* SP */
  .toptitlebtn-set {
    margin-bottom: 50px;
  }
  .top-title__sub.title-faq img {
    width: 40px;
  }
  .top-title__main-faq {
    font-size: 1.5rem;
    margin-top: 15px;
  }
  .view-all-btn {
    display: none;
  }
  .faq-item {
    margin-bottom: 15px;
  }
  .faq-item:last-child {
    margin-bottom: 0px;
  }
  .faq-item__q {
    padding: 26px 30px;
  }
  .faq-item__q p {
    line-height: 1.5rem;
    margin-right: 15px;
    letter-spacing: 0.1em;
  }
  .faq-item__q span::before {
    margin-right: 15px;
  }
  .faq-item__a {
    padding: 23px 26px;
  }
  .faq-item__a span::before {
    margin-right: 15px;
  }
  /* ----- VIEWALL ----- */
  .view-all-btn__sp {
    display: flex;
    width: 30%;
    margin-top: 50px;
  }
  .view-all-btn__sp a {
    display: block;
  }
  .view-all-btn_sp span img {
    width: 92%;
  }
  .view-all-btn__sp span {
    position: relative;
  }
  .view-all-btn__sp a:hover {
    opacity: 1;
  }
  .view-all-btn__sp span:after {
    position: absolute;
    bottom: 0;
    content: "";
    display: inline-block;
    width: 100px;
    height: 5px;
    overflow: hidden;
    background-image: url("../images/btn/arrow.svg");
    background-position: -10px 0;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 15px;
    transition: .5s;
  }
  .view-all-btn__sp a:hover span:after {
    background-position: 0 0;
  }
}