@charset "UTF-8";

/*ABOUT*/

/*Zen Maru Gothic*/

.zen-maru-gothic {
  font-family: "Zen Maru Gothic", serif;
}

/*リンクボタン矢印*/

.btn-arrow-between{
  display: inline-block;
  border-right: 2px solid #222;
  border-bottom: 2px solid #222;
  width: 7px;
  height: 7px;
  transform: rotate(-45deg);
}

/*丸背景つき矢印*/

.circle-arrow{
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #222;
  border: 1px solid #fff;
  border-radius: 50%;
}

.circle-arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 55%;
  width: 5px;
  height: 5px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translate(50%, -50%) rotate(-45deg);
}

/*色*/

.bg-gray{
  background-color: #F8F7F6;
}

/*ヒーロー背景*/

.about-hero-bg{
  position: relative;
  z-index: 1;
  background-image: url(../../static/img/about/about-hero-hkd.png);
  background-repeat: no-repeat;
  background-position: -140% 200px;
  background-size: 110%;
}

@media screen and (min-width: 540px) {

  .about-hero-bg{
    background-position: 230% 160px;
    background-size: 90%;
  }

}

@media screen and (min-width: 768px) {

  .about-hero-bg{
    background-position: 140% 140px;
    background-size: 80%;
  }

}

@media screen and (min-width: 992px) {

  .about-hero-bg{
    background-position: 120% 120px;
  }

}

@media screen and (min-width: 1200px) {

  .about-hero-bg{
    background-position: 90% 40px;
    background-size: 1000px;
  }

}

/*ヒーロー高さ*/

.about-hero-height{
  padding-top: 130px;
}

@media screen and (min-width: 992px){

  .about-hero-height{
    min-height: 960px;
    padding-top: 110px;
  }

}

/*@media (orientation: landscape) and  (min-width: 1200px){*/
/*  .about-hero-height{*/
/*    height: 100vh;*/
/*  }*/
/*}*/

/*ヒーロースライダー*/

.about-swiper01 .swiper-wrapper {
  transition-timing-function: linear;
  height: 180px;
}

.about-swiper01 .swiper-slide{
  width: fit-content;
}

.about-swiper01 .swiper-slide img{
  object-fit: cover;
  width: 270px;
  height: 180px;
}

@media screen and (min-width: 992px){

  .about-hero-slide-mt{
    margin-top: -185px!important;
  }

  .about-swiper01 .swiper-wrapper {
    height: 280px;
  }

  .about-swiper01 .swiper-slide img{
    width: 420px;
    height: 280px;
  }

}

/*NLCとは*/

.about-nlc-frame{
  background-color: #BF3F00;
  border-radius: 1.5rem;
  position: relative;
}

.about-nlc-frame-inner{
  padding: 5.8125rem 0 3.125rem;
  min-height: 367px;
}

.about-nlc-number{
  position: absolute;
  top: 0;
  left: 0;
  width: 149px;
  height: 85px;
  background-image: url(../../static/img/about/about-number-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate(-1px, -1px);
}

.about-nlc-number>span{
  position: absolute;
  top: 0.5rem;
  left: 1.875rem;
}

.about-nlc-title>span{
  font-size: 3rem;
  line-height: 6.25rem;
}

.about-open-modal{
  gap: 2.25rem;
  cursor: pointer;
}

.about-open-modal-icon{
  width: 1.0625rem;
  height: 1.0625rem;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
}

.about-open-modal-icon::before{
  content: "\FF0B";
  color: #222;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.0625rem;
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
}

.about-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)!important;
  max-width: 100%;
  margin: 0;
  padding: 4.0625rem 0 4.5rem;
  border-radius: 8px;
  width: min(80vw, 748px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
  pointer-events: all;
}

.about-close-modal{
  gap: 1.75rem;
  cursor: pointer;
}

.about-close-modal-icon{
  color: #222;
  font-size: 1rem;
  font-weight: bold;
}

/*NEOMAFORMについて*/

.about-neomafoam-logo{
  max-width: 356px;
}

.opt-6 { /* 40px */
  padding-top: 2.5rem !important;
}

@media screen and (min-width: 992px){

  .about-swiper02 .swiper-slide{
    height: initial;
    max-width: 678px;
  }

}

.about-table{
  border-collapse: separate;
  border-spacing: 0;
}

.about-table>thead>tr>th{
  border-bottom: 10px solid #BF4000;
}

.about-youtube-size{
  aspect-ratio: 908 / 488;
}

/*NLCの工務店一覧*/

.about-shoplist-btn{
  width: 100%;
  max-width: 263px;
}

.about-area-label{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px 0;
  position: absolute;
  z-index: 20;
}

.about-area-label .circle-arrow{
  width: 22px;
  height: 22px;
}

.about-area-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.about-area-img-douhoku {
  background: url('../../static/img/about/about-area-douhoku.png') no-repeat center/cover;
}

.about-area-img-douou {
  background: url('../../static/img/about/about-area-douou.png') no-repeat center/cover;
}

.about-area-img-doutou {
  background: url('../../static/img/about/about-area-doutou.png') no-repeat center/cover;
}

.about-area-img-dounan {
  background: url('../../static/img/about/about-area-dounan.png') no-repeat center/cover;
}

.about-area-label:hover + .about-area-img {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 540px){

  .about-area-douhoku{
    top: 1.6vw;
    right: 19.4vw;
  }

  .about-area-douou{
    top: 15vw;
    left: 5.5vw;
  }

  .about-area-doutou{
    bottom: 7vw;
    right: 13.7vw;
  }

  .about-area-dounan{
    bottom: -3vw;
    left: 15vw;
  }

}

@media screen and (min-width: 540px){

  .about-area-douhoku{
    top: 68px;
    right: 80px;
  }

  .about-area-douou{
    top: 160px;
    left: 0;
  }

  .about-area-doutou{
    bottom: 70px;
    right: 60px;
  }

  .about-area-dounan{
    bottom: 20px;
    left: 90px;
  }

}

@media screen and (min-width: 992px){

  .about-area-label{
    flex-direction: row;
    gap: 0 1.875rem;
  }

  .about-area-label .circle-arrow{
    width: 19px;
    height: 19px;
  }

  .about-shoplist-btn{
    width: 100%;
    max-width: 263px;
  }

}


/*施工事例*/

/*文字・背景色*/

.color-red{
  color: #BF4000!important;
}

.bg-red{
  background-color: #BF4000!important;
}

.color-gray{
  color: #A0A0A0;
}

.arc-d-bg-top{
  background: #F8F7F6;
}

@media screen and (min-width: 992px) {

  .arc-d-bg-top{
    background: linear-gradient(to bottom, #F8F7F6 60%, #ffffff 60%);
  }

}

/*パンくずリスト*/
.breadcrumb {
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: inline-block;
  list-style: none;
  font-size: 0.875rem;
  position: relative;
  padding-right: 20px;
}

.breadcrumb li:not(:first-child){
  padding-left: 20px;
}

.breadcrumb li::after {
  content: "";
  position: absolute;
  display: inline-block;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  width: 8px;
  height: 8px;
  top: 50%;
  left: -4px;
  transform: translateY(-50%) rotate(-45deg);
}

.breadcrumb li:first-child::after {
  display: none;
}

.breadcrumb li a {
  text-decoration: none;
  color: #222;
}

/*タイトル上のテキスト*/

@media screen and (min-width: 992px) {

  .arc-d-label p::after{
    content: "|";
    padding: 0 20px;
    color: #222;
  }

  .arc-d-label p:last-child::after{
    content: "";
  }

}

/*タイトル下のカテゴリのgap*/

.arc-d-ttl-category-gap{
  gap: 24px 72px;
}

/*swiper*/

.arc-d-swiper01 .arc-d-swiper-thumb img{
  height: 62px;
}

.arc-d-swiper-thumb .swiper-slide{
  width: 62px!important;
  height: 62px!important;
  flex-shrink: 0;
  margin-right: 10px!important;
}

.arc-d-swiper-main {
  overflow: hidden;
}

.arc-d-swiper-button-prev,
.arc-d-swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: #222;
  color: black;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
}

.arc-d-swiper-button-prev::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 8px 5px 0;
  border-color: transparent #fff transparent transparent;
  position: absolute;
  top: 50%;
  right: 55%;
  transform: translate(50%, -50%);
}

.arc-d-swiper-button-next::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}

.arc-d-swiper-button-prev {
  left: 0;
  transform: translate(-50%, -50%);
}

.arc-d-swiper-button-next {
  right: 0;
  transform: translate(50%, -50%);
}

@media screen and (min-width: 992px){

  .arc-d-swiper01 .arc-d-swiper-thumb img{
    height: 80px;
  }

  .arc-d-swiper-thumb .swiper-slide{
    width: 80px!important;
    height: 80px!important;
    margin-right: 12px!important;
  }

  .arc-d-swiper-button-prev,
  .arc-d-swiper-button-next {
    width: 34px;
    height: 34px;
  }

  .arc-d-swiper-button-prev::before {
    border-width: 6px 10px 6px 0;
  }

  .arc-d-swiper-button-next::before {
    border-width: 6px 0 6px 10px;
  }

  .arc-d-swiper-button-prev {
    left: -55px;
  }

  .arc-d-swiper-button-next {
    right: -55px;
  }

}

/*暮らしのこだわりのpt*/

.arc-d-design-pt{
  padding-top: 50px;
}

@media screen and (min-width: 992px){

  .arc-d-design-pt{
    padding-top: 90px;
  }

}

/*担当者コメントのpy*/

.arc-d-comment-py{
  padding-top: 40px;
  padding-bottom: 55px;
}

@media screen and (min-width: 992px){

  .arc-d-comment-py{
    padding-top: 70px;
    padding-bottom: 70px;
  }

}

/*担当者写真*/

@media screen and (min-width: 992px){
  .arc-d-staff-img{
    max-width: 200px;
  }
}

/*お施主様インタビューの写真*/

.arc-d-interview-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

@media screen and (min-width: 992px){

  .arc-d-interview-img{
    border-top-right-radius: 0;
    border-bottom-left-radius: 5px;
  }

}

/*お施主様インタビューのpy*/

.arc-d-interview-py{
  padding-top: 30px;
  padding-bottom: 60px;
}

@media screen and (min-width: 992px){

  .arc-d-interview-py{
    padding-top: unset;
    padding-bottom: unset;
  }

}

/*お施主様インタビューの背景*/

.arc-d-interview-bg>div{
  background-color: #F8F7F6;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

@media screen and (min-width: 992px){

  .arc-d-interview-bg>div{
    background-color: unset;
  }

  .arc-d-interview-bg{
    background-color: #F8F7F6;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
  }

}

/*お施主様インタビューのふきだし*/

@media screen and (min-width: 992px){

  .speechBubble {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #222222;
    border-radius: 5px;
    background-color: #ffffff;
  }

  .speechBubble::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border-style: solid;
    border-width: 6.5px 13.5px 6.5px 0;
    border-color: transparent #222222 transparent transparent;
    translate: -100% -50%;
  }

  .speechBubble::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border-style: solid;
    border-width: 5.5px 12px 5.5px 0;
    border-color: transparent #ffffff transparent transparent;
    translate: -100% -50%;
  }

}

/*工務店紹介のpy*/

.arc-d-builder-py{
  padding-top: 60px;
  padding-bottom: 70px;
}

@media screen and (min-width: 992px){

  .arc-d-builder-py{
    padding-top: 100px;
    padding-bottom: 50px;
  }

}

/*工務店紹介のhr*/

.arc-d-hr{
  border-color: #222;
  opacity: 1;
}

/*工務店紹介のボタン*/

.link-btn-px{
  padding-left: 40px;
  padding-right: 40px;
}

.link-btn-width{
  width:263px;
}

@media screen and (max-width: 275px){

  .link-btn-width{
    width:100%;
  }

}

/*施工事例*/

.basic-swiper .swiper-slide{
  width: 314px;
}

.basic-swiper-img img{
  /* width: 314px;
  height: 210px; */
  aspect-ratio: 314 / 210;
  object-fit:  cover;
}

@media screen and (min-width: 992px){

  .basic-swiper .swiper-slide{
    width: 356px;
  }

  .basic-swiper-img img{
    /* width: 356px;
    height: 237px; */
    aspect-ratio: 356 / 237;
  }

}



/*工務店一覧ページ*/

/*メインpt*/

.main-height{
  padding-top: 130px;
}

@media screen and (min-width: 992px){

  .main-height{
    padding-top: 180px;
  }

}

/*工務店一覧 gap*/

.construction-list-gap{
  gap: 70px 0;
}

@media screen and (min-width: 992px){

  .construction-list-gap{
    gap: 120px 0;
  }

}

/*ライトグレー背景*/

.bg-lightgray{
  background-color: #F1F1F4;
}

/*お気に入りボタン*/

.favorite-btn{
  width: 42px;
  height: 42px;
  border-width: 0.5px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #fff;
}

.favorite-btn img{
  width: 15px;
}

@media screen and (min-width: 992px){
  .favorite-btn{
    bottom: 20px;
    right: 20px;
  }
}


/*お知らせ一覧*/

/*丸背景つき矢印サイズ調整*/

.circle-arrow-20{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.pagination-prev, .pagination-next{
  display: inline-block;
  border-right: 2px solid #222;
  border-bottom: 2px solid #222;
  width: 11px;
  height: 11px;
}

.pagination-prev{
  transform: rotate(135deg);
}

.pagination-next{
  transform: rotate(-45deg);
}

.news-pagination-number a{
  width: 34px;
  height: 34px;
}

.news-pagination-number.active a{
  background-color: #222!important;
  color: #fff!important;
}



/*工務店詳細*/

/*丸背景つきプラスマーク*/

.circle-plus{
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #222;
  border: 1px solid #fff;
  border-radius: 50%;
}

.circle-plus::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 2px;
  height: 7px;
  background-color:#fff;
  transform: translate(50%, -50%) rotate(90deg);
}

.circle-plus::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 2px;
  height: 7px;
  background-color:#fff;
  transform: translate(50%, -50%);
}

/*swiperページネーション*/
.swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background-color: #909090; /* 非アクティブ時の色 */
  opacity: 1;
  margin: 0 15px!important;
  transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
  background-color: #BF3F00; /* アクティブ時の色 */
}

/*アートホームのこだわりfigcaptionの位置*/
.s-construction-philosophy-position{
  bottom: 20px;
  left: 20px;
}

@media screen and (min-width: 992px){

  .s-construction-philosophy-position{
    bottom: 30px;
    left: 30px;
  }

}

/*アコーディオン*/
.s-construction-accordion-head {
  border-radius: 16px 16px 0 0;
  cursor: pointer;
}

.s-construction-accordion-head::before, .s-construction-accordion-head::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 20px;
  background-color: #fff;
  border-radius: 1.5px;
  position: absolute;
  right: 50px;
  top: 50%;
  transition: all .4s;
}

.s-construction-accordion-head::before{
  transform: translateY(-50%);
}

.s-construction-accordion-head::after{
  transform: translateY(-50%) rotate(90deg);
}

.s-construction-accordion-body {
  border-radius: 0 0 16px 16px;
  height: 0;
  opacity: 0;
  padding: 0 20px;
  transition: all 0.4s;
}
.s-construction-accordion-body.is-open {
  padding: 40px 20px;
  height: auto;
  opacity: 1;
}

.s-construction-accordion-head.is-open::before {
  background-color: transparent;
}

@media screen and (min-width: 992px){

  .s-construction-accordion-head::before, .s-construction-accordion-head::after {
    right: 40px;
  }

  .s-construction-accordion-body {
    padding: 0 80px;
  }
  .s-construction-accordion-body.is-open {
    padding: 50px 80px;
  }

}

/*swiper02*/

.s-construction-swiper02{
  overflow: visible;
}

.s-construction-swiper02 .swiper-slide{
  width: 90%;
}

.s-construction-swiper02-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.s-construction-interview-padding{
  padding: 15px 15px 24px;
}

.s-construction-bg>div{
  background-color: #fff;
}

@media screen and (min-width: 992px){
  .s-construction-interview-padding{
    padding: 48px 30px;
  }
}

.s-construction-swiper02 .arc-d-swiper-button-prev, .s-construction-swiper02 .arc-d-swiper-button-next{
  display: none;
}

@media screen and (min-width: 992px){

  .s-construction-swiper02{
    overflow: hidden;
  }

  .s-construction-swiper02 .swiper-slide{
    width: 100%;
  }

  .s-construction-swiper02 .arc-d-swiper-button-prev{
    display: block;
    left: 0px;
  }

  .s-construction-swiper02 .arc-d-swiper-button-next{
    display: block;
    right: 0px;
  }

  .s-construction-bg{
    background-color: #fff;
  }

}

/*追従ボタン*/

.bg-opacity-white{
  background-color: rgba(255,255,255,0.7);
}

.s-construction-bottom-favorite-btn{
  max-width: 55px;
}

@media screen and (min-width: 992px){

  .bg-opacity-white{
    background-color: transparent;
  }

  .s-construction-bottom-btn{
    max-width: 178px;
  }

  .s-construction-bottom-favorite-btn{
    max-width: 178px;
  }

}

/*ポップアップ*/
/*ポップアップ幅*/
.s-construction-modal>.modal-dialog{
  box-sizing: content-box;
  max-width: 908px;
}

.lh-modal-txt{
  line-height: 1.8;
}

@media screen and (min-width: 992px){

  .lh-modal-txt{
    line-height: 1.2;
  }

}

/*ポップアップクローズボタン*/
.modal-btn-close{
  width: 54px;
  height: 54px;
  background-color: #F8F7F6;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 5px;
}

.modal-btn-close::before, .modal-btn-close::after{
  content: "";
  width: 24px;
  height: 2px;
  background-color: #222;
  position: absolute;
  top: 50%;
  left: 50%;
}

.modal-btn-close::before{
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-btn-close::after{
  transform: translate(-50%, -50%) rotate(135deg);
}

@media screen and (min-width: 992px){

  .modal-btn-close{
    top: 10px;
    right: -27px;
  }

}

/*ポップアップ下のクローズボタン*/
.modal-bottom-btn-close{
  position: relative;
}

.modal-bottom-btn-close::before, .modal-bottom-btn-close::after{
  content: "";
  width: 10px;
  height: 1.5px;
  background-color: #222;
  position: absolute;
  top: 50%;
  right: 30px;
}

.modal-bottom-btn-close::before{
  transform: rotate(45deg);
}

.modal-bottom-btn-close::after{
  transform: rotate(135deg);
}

.doc-req-list li{
  list-style: disc;
  list-style-position: inside;
}

/*施工事例一覧ページ*/
/*画像figcaption位置*/
.a-construction-label{
  top: 10px;
  left: 10px;
}

/*TOP*/
/*TOPヒーロー*/
.top-hero-left{
  height: 540px;
  background-image: url(../../static/img/top/top-hero-img.jpg);
  background-size: cover;
  background-position: center;
}

.top-hero-left h1{
  width: max-content;
}

.top-hero-left h1 span{
  white-space: normal;
  word-break: break-word;
}

.top-hero-right h2{
  width: max-content;
}

@media screen and (min-width: 992px){

  .top-hero, .top-hero-left{
    height: 100vh;
    min-height: 780px;
  }

  .top-hero-left, .top-hero-right{
    width: 50%;
  }

}

/*TOPヒーローswiper*/
.top-hero-swiper-button-prev, .top-hero-swiper-button-next{
  display: none;
}

@media screen and (min-width: 992px){
  .top-hero-swiper-button-prev, .top-hero-swiper-button-next{
    position: absolute;
    width: 33px;
    height: 36px;
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    top: 138px;
  }

  .top-hero-swiper-button-prev{
    left: 0;
    transform: translateX(-50%);
  }

  .top-hero-swiper-button-next{
    left: 356px;
    transform: translateX(-50%);
  }

  .top-hero-swiper-button-prev::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 8px 5px 0;
    border-color: transparent #BF4000 transparent transparent;
    position: absolute;
    top: 50%;
    right: 55%;
    transform: translate(50%, -50%);
  }

  .top-hero-swiper-button-next::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #BF4000;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
  }
}

/*TOPセカンドswiper*/

.top-second-swiper .swiper-wrapper{
  transition-timing-function: linear !important;
}

.top-second-swiper img{
  width: 243px;
  height: 160px;
  object-fit: cover;
}

.top-second-swiper .swiper-slide {
  width: fit-content;
}

@media screen and (min-width: 992px){
  .top-second-swiper img{
    width: 646px;
    height: 425px;
  }
}

/*文字間150*/

.ols-150{
  letter-spacing: 0.15em !important;
}

/*TOP工務店一覧*/

.top-a-construction-mt{
  margin-top: -14px;
}

@media screen and (min-width: 992px){
  .top-a-construction-mt{
    margin-top: -90px;
  }
}

.top-a-construction-bg{
  width: calc(100% - 20px);
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  padding-left: 20px;
  padding-right: 20px;
}

@media screen and (min-width: 768px){
  .top-a-construction-bg{
    width: 70%;
    padding-left: calc((100vw - 720px) / 2);
  }
}
@media screen and (min-width: 992px){
  .top-a-construction-bg{
    border-top-right-radius: 77px;
    border-bottom-right-radius: 77px;
    padding-left: calc((100vw - 960px) / 2);
  }
}
@media screen and (min-width: 1200px){
  .top-a-construction-bg{
    width: 60%;
    padding-left: calc((100vw - 1140px) / 2);
  }
}
@media screen and (min-width: 1400px){
  .top-a-construction-bg{
    padding-left: calc((100vw - 1320px) / 2);
    max-width: calc(((100vw - 1320px) / 2) + 800px);
  }
}

/*お知らせタイトルのmax-width*/
.max-w-90{
  max-width: 90%;
}

/*フッターが浮かない対策*/

main{
  min-height:calc(100svh - 450px);
}

@media screen and (min-width: 576px){
  main{
    min-height:calc(100svh - 482px);
  }
}

@media screen and (min-width: 768px){
  main{
    min-height:calc(100svh - 430px);
  }
}

@media screen and (min-width: 992px){
  main{
    min-height:calc(100svh - 345px);
  }
}

@media screen and (min-width: 1200px){
  main{
    min-height:calc(100svh - 335px);
  }
}

@media screen and (min-width: 1400px){
  main{
    min-height:calc(100svh - 352px);
  }
}

/*建築実例一覧画像サイズ*/
.architecture-list-thumbnail{
  aspect-ratio: 432 / 288;
  object-fit: cover;
}

/*工務店一覧＞施工事例画像サイズ*/
.construction-case-thumbnail{
aspect-ratio: 348 / 232;
  object-fit: cover;
}