@charset 'UTF-8';

body {
  overflow-x: hidden;
}

/* トップページヘッダー */
.header {
  display: flex;
  justify-content: space-around;
  margin-top: min(3.03vw, 40px);
}

.header_nav ul {
  display: inline-block;
  margin-top: min(3.78vw, 50px);
}

.header_nav li:hover {
  transform: translateY(-10%);
}

.header_nav li {
  margin-top: min(2.27vw, 25px);
  transition: all .3s ease 0s;
}

.header_nav li:first-child {
  margin-top: 0;
}

/* トップヘッダーボタン */
.button01 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.3em 1em;
  width: min(13.19vw, 190px);
  height: min(4.16vw, 190px);
  border-radius: 5px;
  background-color: #70b195;
  color: #fff;
  font-size: min(1vw, 16px);
  transition: all .3s ease 0s;
}

.header_button {
  font-size: min(1vw, 16px);
}

.header_button_text {
  text-align: center;
  font-size: min(1vw, 16px);
}

.nav_button {
  display: none;
}

/* スマホ対応（トップページヘッダー） */
@media (max-width: 768px) {
  .header {
    margin-top: 0;
  }

  .header_inner {
    margin: auto 0;
  }

  .header_logo {
    width: 65%;
  }

  /* ハンバーガーメニュー */
  .header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5%;
    width: 100%;
    background-color: #fff;
  }

  .nav_button {
    position: relative;
    z-index: 12;
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../image/nav-open.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .header_nav ul {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 2em;
    margin-top: 0;
    width: 100%;
    height: 100%;
    background-color: #f49132;
    color: #fff;
    transition: .4s;
    transform: translateX(100%);
  }

  .header_nav li {
    font-size: 4vw;
  }

  .nav_open .header_nav ul {
    transform: translateX(0);
  }

  .nav_open .nav_button {
    background-image: url(../image/nav-close.svg);
  }

  .header_button_text {
    display: none;
  }
}

/* トップページ（メインビジュアル） */
.mv {
  position: relative;
  padding-top: 171px;
  width: min(77vw, 1109px);
  height: min(58.6vw, 844px);
  background-image: url(../image/top_mv01.png);
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
}

.mv_title,
.top_mv_image {
  position: relative;
  /* top: 20%; */
  right: 0;
}

.mv_title {
  display: inline-block;
  letter-spacing: .35em;
  font-weight: 700;
  font-size: min(2.7vw, 40px);
  line-height: 1.7;
}

.top_mv_image {
  margin-top: min(2.43vw, 35px);
  width: 63%;
}

.top_mv_button {
  position: relative;
  /* top: 24%; */
  right: -23%;
  display: block;
  margin-top: 40px;
  width: auto;
  font-size: min(1.1vw, 16px);
}

/* トップページ（キービジュアル） */
.kv {
  position: relative;
  margin-top: min(13.88vw, 200px);
  height: 100%;
  background-image: url(../image/top_kv.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.top_illustration01 {
  position: absolute;
  top: -88px;
  right: calc(50% + 281px);
  display: block;
}

.kv_text {
  padding-top: min(4.51vw, 65px);
  padding-bottom: min(15.27vw, 220px);
  width: 36%;
  font-size: min(1.11vw, 16px);
  line-height: 1.8;
}

/* スマホ対応(トップページメイン/キービジュアル) */
@media (max-width: 768px) {
  .mv {
    top: 20px;
    padding-top: 60px;
    width: 100%;
  }

  .top_mv_image {
    width: 46%;
  }

  .mv_title {
    margin-top: -22px;
    font-size: 4vw;
  }

  .top_mv_button {
    position: static;
    margin-top: -20px;
    font-size: 4vw;
  }

  .top_illustration01 {
    top: -96px;
    right: calc(50% + 130px);
    width: 10%;
  }

  .kv {
    margin-top: 20vw;
  }

  .kv_text {
    width: 80%;
    /* 10px */
    font-size: 2.66vw;
  }
}

/* セクションタイトル */
.section_title {
  margin-top: min(.55vw, 8px);
  text-align: center;
  font-weight: 700;
  font-size: min(2.5vw, 36px);
}

.section_title_icon {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 70px;
  width: 100%;
}

/* スマホ（セクションタイトル） */
@media (max-width: 768px) {
  .section_title {
    font-size: 5vw;
  }

  .section_title_icon {
    max-width: 30px;
  }
}

/* サービス */
.top_service {
  position: relative;
  margin-top: min(12.15vw, 175px);
}

.top_illustration02 {
  position: absolute;
  bottom: -214px;
  left: calc(50% + 221px);
  z-index: 1;
  display: block;
}

.top_service_container {
  margin-right: auto;
  margin-left: auto;
  max-width: 1398px;
  width: 98%;
}

.top_service_buttoncontent {
  display: grid;
  gap: min(3.12vw, 45px);
  margin-top: min(6.55vw, 97px);

  grid-template-columns: 1fr 1fr 1fr;
}

.top_service_button {
  position: relative;
  display: inline-block;
  display: grid;
  padding: 1em 0;
  max-width: 436px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: #f49132;
  box-shadow: 0 10px 0 0 #cfa072;
  color: #fff;
  transition: all .3s ease 0s;

  grid-template-rows: subgrid;
  grid-row: span 2;
}

.top_service_button:hover {
  background-color: #ed7501;
  box-shadow: 0 0 0 #cfa072;
  opacity: 1;
  transform: translateY(5px);
}

.top_service_icon {
  display: block;
  margin: 0 auto;
  max-width: 58px;
  width: 100%;
  text-align: center;
}

.top_service_buttontext {
  display: block;
  padding-top: min(.55vw, 8px);
  text-align: center;
  font-weight: 700;
  font-size: min(2.5vw, 36px);
  line-height: 1.3;
}

.top_service_buttontextmini {
  position: absolute;
  right: 50%;
  bottom: 5%;
  font-size: min(1.25vw, 18px);
  transform: translateX(50%);
}

.top_service_buttontextmini::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -70px;
  width: 42px;
  height: 1px;
  background-color: #fff;
}

.top_service_buttontextmini::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -69px;
  display: inline-block;
  margin-top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  vertical-align: middle;
  transform: rotate(45deg);
}

.top_service_textcontents {
  margin-top: min(13.41vw, 166px);
}

.top_service_maintext {
  margin-right: auto;
  margin-left: auto;
  width: 55%;
  font-size: min(1.38vw, 20px);
  line-height: 2.5;
}

.top_service_pointsubbox {
  display: flex;
  align-items: center;
  width: 30px;
}

.top_service_pointcontent {
  display: flex;
  justify-content: space-around;
  margin-top: min(10.86vw, 100px);
  margin-right: auto;
  margin-left: auto;
  width: 54%;
  column-gap: 3%;
}

/* スマホ（サービス） */
@media (max-width: 768px) {
  .top_service_buttoncontents {
    flex-direction: column;
  }

  .top_service_pointcontent {
    width: 98%;
  }

  .top_service_buttontext {
    margin-top: 3vw;
  }

  .top_service_buttontextmini {
    display: none;
  }

  .top_service_maintext {
    width: 90%;
    font-size: 2.66vw;
  }

  .top_illustration02 {
    bottom: -83px;
    left: calc(50% + 71px);
    width: 18%;
  }
}

/* 強み */
.top_strength {
  position: relative;
  margin-top: min(9.02vw, 130px);
  padding-top: min(9.23vw, 133px);
  padding-bottom: min(8.05vw, 116px);
  width: 100%;
  background-color: #fff;
  background-position: center;
  clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0 100%, 0 15%);
}

.top_illustration03 {
  position: absolute;
  bottom: -1px;
  left: calc(50% + -352px);
  display: block;
}

.top_strength_container {
  margin-top: min(19.86vw, 180px);
}

.top_strength_content {
  display: grid;
  gap: 33px 78px;

  grid-template-columns: 1fr 1fr 1fr;
}

.top_strength_group {
  display: grid;
  height: 100%;

  grid-template-rows: subgrid;
  grid-row: span 3;
}

.top_strength_group:first-child {
  margin-left: 0;
}

.top_strength_box {
  display: flex;
  align-items: center;
}

.top_strength_subbox {
  margin-top: min(-2.43vw, -35px);
  padding-top: min(1.25vw, 18px);
  padding-right: min(3.47vw, 50px);
  padding-bottom: min(1.25vw, 18px);
  padding-left: min(3.47vw, 50px);
  max-width: 392px;
  width: 100%;
  border-radius: 5px;
  background-color: #f49132;
  box-shadow: 10px 10px 0 0 #ffdcb2;
  color: #fff;
}

.strength_point_illustration {
  max-width: 350px;
  width: 100%;
  object-fit: contain;
}

.top_strength_title {
  text-align: center;
  font-weight: 700;
  font-size: min(1.80vw, 26px);
}

.top_strength_text {
  margin-top: min(2.08vw, 30px);
  font-size: min(1.11vw, 16px);
}

.top_strength_button {
  margin-top: min(4.86vw, 70px);
  text-align: center;
}

/* スマホ（強み） */
@media (max-width: 768px) {
  .top_strength {
    clip-path: polygon(50% 0%, 250% 14%, 100% 100%, 0 100%, 0 3%);
  }

  .top_strength_content {
    grid-template-columns: 1fr;
  }

  .top_strength_group {
    margin-top: 5.33vw;
  }

  .top_strength_subbox {
    padding: 10%;
    max-width: none;
  }

  .strength_point_illustration {
    margin-right: auto;
    margin-left: auto;
    width: 80%;
  }

  .top_strength_title {
    font-size: 6vw;
  }

  .top_strength_text {
    font-size: 4vw;
  }

  .top_strength_button {
    margin-top: 13.33vw;
  }
}

/* 施工事例 */
.top_works {
  position: relative;
  margin-top: min(10.41vw, 150px);
}

.top_works::after {
  content: '';
  position: absolute;
  top: calc(50% + -90px);
  right: 0;
  z-index: -1;
  max-width: 970px;
  width: 100%;
  height: 45%;
  background-color: #f49132;
}

.top_works_box {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: min(8.68vw, 121px);
  width: auto;
  cursor: pointer;
}

.top_reworks_container {
  margin-top: min(6.38vw, 125px);
}

.linkbutton_group02 {
  justify-content: left;
  margin-top: min(6.38vw, 36px);
}

.swiper-slide {
  margin-left: min(5.20vw, 75px);
  max-width: 480px;
  width: 30%;
  height: 100%;
}

.swiper-slide:hover {
  opacity: 1;
}

.top_newworks_swiper,
.top_reworks_swiper {
  margin-top: min(1.11vw, 16px);
  margin-top: -140px;
  padding-top: 156px;
}

.swiper-new-button-prev,
.swiper-new-button-next,
.swiper-re-button-prev,
.swiper-re-button-next {
  position: absolute;
  transform: none;
}

.swiper-new-button-prev,
.swiper-re-button-prev {
  top: 0;
  right: 34%;
}

.swiper-new-button-next,
.swiper-re-button-next {
  top: 0;
  right: 19%;
}

.swiper-button-next,
.swiper-button-prev {
  z-index: 3;
  margin: 0;
  max-width: 80px;
  width: min(5.55vw, 80px);
  height: min(6.94vw, 100px);
  object-fit: contain;
}

/* スマホ（施工事例） */
@media (max-width: 768px) {
  .swiper-slide {
    width: 100%;
  }

  .top_works::after {
    top: calc(50% + -30px);
    width: 65%;
    background-color: 0;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }

  /* ページネーションのサイズと色 */
  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #bbb;
  }

  /* ページネーションがアクティブな時の色 */
  .swiper-pagination-bullet-active {
    background-color: #b1aaae;
  }

  /* ページネーション位置 */
  .swiper-pagination {
    position: relative !important;
    margin-top: 15px;
  }
}

/* 流れ */
.top_flow {
  margin-top: min(10.41vw, 150px);
}

.top_flow_container {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 103px;
}

.top_flow_group {
  margin-left: 6%;
  width: 40%;
}

.top_flow_subbox {
  position: relative;
  max-width: 938px;
  width: 100%;
}

.top_flow_subbox::after {
  content: '';
  position: absolute;
  top: 60px;
  left: -268px;
  z-index: -1;
  width: 191%;
  height: 100%;
  background-color: #f49132;
}

.top_flow_staff {
  display: block;
  max-width: 504px;
  width: 100%;
  border-radius: 5px;
}

.top_flow_text {
  vertical-align: middle
}

.top_flow_button {
  display: block;
  margin-top: min(6.94vw, 100px);
  text-align: end;
}

/* スマホ（流れ） */
@media (max-width: 768px) {
  .top_flow_container {
    flex-direction: column;
    margin-top: 30px;
  }

  .top_flow_group {
    width: 100%;
  }

  .top_flow_subbox::after {
    left: -340px;
  }

  .top_flow_text {
    font-size: 3vw;
  }

  .top_flow_button {
    text-align: center;
  }
}

/* インスタグラム */
.top_instagram {
  margin-top: min(17.56vw, 232px);
  margin-right: auto;
  margin-left: auto;
  padding-top: min(2.64vw, 35px);
  padding-bottom: min(10.97vw, 158px);
  width: 91%;
  height: auto;
  border-radius: 5px;
  background-color: #fff;
}

.top_instagram_button {
  margin-top: min(3.17vw, 42px);
  text-align: center;
}

.top_instagram_text {
  padding-bottom: min(.37vw, 5px);
  text-align: center;
  font-size: min(1.96vw, 26px);
  font-family: itim;
}

.button01 {
  font-family: itim;
}

.top_instagram_subbox {
  margin-top: min(6.25vw, 90px);
  margin-right: auto;
  margin-left: auto;
  max-width: 1239px;
  width: 94%;
  border-radius: 5px;
}

/* 会社情報 */
.top_company {
  margin: 0 0 0 auto;
  margin-top: min(8.46vw, 105px);
  padding-top: min(5.64vw, 70px);
  padding-right: min(8.06vw, 100px);
  padding-bottom: min(5.64vw, 70px);
}

.top_company_container {
  display: flex;
  justify-content: space-between;
  margin-right: auto;
  margin-left: auto;
  max-width: 1240px;
  width: 91%;
}

.top_company_map iframe {
  display: block;
  border-radius: 5px;
}

.top_company_info {
  position: relative;
  color: #fff;
  font-size: min(1.61vw, 20px);
}

.top_company_info::after {
  content: '';
  position: absolute;
  top: -40px;
  left: -428px;
  z-index: -1;
  width: 251%;
  height: 100%;
  background-color: #f49132;
}

.top_company_info dl {
  display: flex;
  flex-wrap: wrap;
  margin-left: min(8.33vw, 120px);
}

.top_company_info dt {
  width: 19%;
  font-weight: 500;
}

.top_company_info dd {
  padding-left: min(1.61vw, 20px);
  width: 81%;
  background-image: url(../image/top_company_info_border.png);
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

.top_company_info dt,
.top_company_info dd {
  margin-top: min(1.45vw, 18px);
  padding-bottom: min(1.45vw, 18px);
  vertical-align: middle;
  font-size: min(1.61vw, 20px);
  line-height: 1.3;
}

.top_companyinfo_text {
  font-size: min(1.29vw, 16px);
}

/* スマホ（会社情報） */
@media (max-width: 768px) {
  .top_company {
    padding-right: 0;
  }

  .top_company_container {
    flex-direction: column;
  }

  .top_company_map iframe {
    width: 100%;
  }

  .top_company_info::after {
    top: 200px;
    top: 0;
    left: 0;
    width: 100%;
  }

  .top_company_info dl {
    margin-left: 2%;
    padding: 5vw;
  }

  .top_company_info dd {
    padding-left: 0;
  }

  .top_company_info dt,
  .top_company_info dd {
    font-size: 3vw;
  }

  .top_companyinfo_text {
    font-size: 2vw;
  }
}