/****************

master.cssは編集不可！！
LESSファイルを編集すること！

****************/
/*bootstrapの設定を読み込み*/
/* 家づくり共通 */
p {
  line-height: 2.1;
}
section {
  position: relative;
}
.text-semibold {
  font-weight: 500;
}
.staff-text {
  font-size: clamp(0.75rem, calc(0.5555555555555556vw + 0.625rem), 1rem);
}
.spec-pc-small {
  font-size: clamp(0.75rem, calc(0.2777777777777778vw + 0.6875rem), 0.875rem);
}
.small-text {
  font-size: clamp(0.625rem, calc(0.5555555555555556vw + 0.5rem), 0.875rem);
}
.text-red {
  color: #8D1C17;
}
.sp-center {
  text-align: center;
}
@media (min-width: 768px) {
  .sp-center {
    text-align: left;
  }
}
h2.staff-tit {
  font-size: clamp(0.875rem, calc(0.7792207792207793vw + 0.6996753246753247rem), 1.625rem);
  font-weight: 600;
  margin-bottom: clamp(1.25rem, calc(1.1904761904761905vw + 0.9821428571428572rem), 1.875rem);
}
.white-content-round {
  padding-top: clamp(1.875rem, calc(3.2467532467532463vw + 1.1444805194805197rem), 5rem);
  padding-bottom: clamp(1.875rem, calc(3.2467532467532463vw + 1.1444805194805197rem), 5rem);
  padding-left: clamp(1.25rem, calc(2.5974025974025974vw + 0.6655844155844155rem), 3.75rem);
  padding-right: clamp(1.25rem, calc(2.5974025974025974vw + 0.6655844155844155rem), 3.75rem);
  background-color: #ffffff;
  border-radius: 10px;
  position: relative;
  margin-bottom: clamp(1.875rem, calc(3.571428571428571vw + 1.0714285714285716rem), 3.75rem);
}
.section-margin-top {
  margin-top: clamp(3.75rem, calc(3.571428571428571vw + 2.9464285714285716rem), 5.625rem);
}
.staff-contentbox {
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.2, 1);
  border-radius: 4px;
}
@media (min-width: 992px) {
  .categorybox {
    position: sticky;
    top: 40px;
  }
}
.category-text {
  font-size: clamp(0.875rem, calc(0.7792207792207793vw + 0.6996753246753247rem), 1.625rem);
  font-weight: 600;
}
ul.staff-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: clamp(1.875rem, calc(1.1904761904761905vw + 1.6071428571428572rem), 2.5rem);
}
@media (min-width: 992px) {
  ul.staff-shortcuts {
    gap: 1.4rem;
    flex-direction: column;
  }
}
ul.staff-shortcuts li {
  font-size: clamp(0.75rem, calc(0.5555555555555556vw + 0.625rem), 1rem);
  font-weight: 500;
}
ul.staff-shortcuts a {
  display: block;
  padding: 7px 13px;
  line-height: 1;
  border: 1px solid #ddd;
  border-radius: 3px;
  transition: background-color 0.4s ease;
}
@media (min-width: 768px) {
  ul.staff-shortcuts a {
    padding: 9px 15px;
    border: none;
  }
}
.staff-img-cover {
  padding-top: 140%;
  border-radius: 200px;
  border: 2px solid #fff;
  position: relative;
  overflow: hidden;
}
.staff-img-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  height: calc(100% + 16px);
  -webkit-transform: translateY(-16px);
  transform: translateY(-16px);
}
@media (min-width: 992px) {
  .staff-img-cover img {
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.2, 1);
  }
}
@media (min-width: 992px) {
  .staff-contentbox:hover {
    overflow: visible;
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
  }
}
.staff-content {
  padding: 1rem 0;
}
.staff-position {
  font-size: clamp(0.625rem, calc(0.5555555555555556vw + 0.5rem), 0.875rem);
  line-height: 1;
  display: block;
}
.staff-name {
  font-size: clamp(0.75rem, calc(0.8333333333333334vw + 0.5625rem), 1.125rem);
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.img-wrap {
  width: 100%;
  aspect-ratio: 2.1;
  overflow: hidden;
  margin-bottom: clamp(1.25rem, calc(2.7777777777777777vw + 0.625rem), 2.5rem);
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.staff-info {
  padding-top: clamp(1.875rem, calc(3.2467532467532463vw + 1.1444805194805197rem), 5rem);
  padding-bottom: clamp(1.875rem, calc(3.2467532467532463vw + 1.1444805194805197rem), 5rem);
  padding-left: clamp(1.25rem, calc(2.5974025974025974vw + 0.6655844155844155rem), 3.75rem);
  padding-right: clamp(1.25rem, calc(2.5974025974025974vw + 0.6655844155844155rem), 3.75rem);
  background-color: #F0F0F0;
  margin-bottom: clamp(1.25rem, calc(2.7777777777777777vw + 0.625rem), 2.5rem);
}
.staff-info .staff-name {
  font-size: clamp(0.75rem, calc(0.5555555555555556vw + 0.625rem), 1rem);
  font-weight: 500;
  margin-bottom: 0;
}
.page-staff-title-wrap {
  position: relative;
  white-space: nowrap;
}
.page-staff-title {
  font-size: clamp(1.75rem, calc(3.0555555555555554vw + 1.0625rem), 3.125rem);
  margin-bottom: 0;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  width: fit-content;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .page-staff-title {
    margin-left: 0;
  }
}
.page-staff-title-jp {
  font-size: clamp(0.75rem, calc(0.8333333333333334vw + 0.5625rem), 1.125rem);
  margin-bottom: 0;
  font-weight: 500;
  color: #010101;
  line-height: 1;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .page-staff-title-jp {
    left: 10%;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@media (min-width: 992px) {
  .page-staff-title-jp {
    font-size: clamp(1.125rem, calc(0.3225806451612903vw + 0.8669354838709677rem), 1.25rem);
  }
}
.page-staff-title-left {
  font-size: clamp(1.75rem, calc(3.0555555555555554vw + 1.0625rem), 3.125rem);
  margin-bottom: clamp(1.25rem, calc(2.7777777777777777vw + 0.625rem), 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: #F0F0F0;
  position: relative;
}
@media (min-width: 768px) {
  .page-staff-title-left {
    margin-left: 0;
  }
}
.page-staff-title-jp-left {
  font-size: clamp(0.75rem, calc(0.8333333333333334vw + 0.5625rem), 1.125rem);
  margin-bottom: 0;
  font-weight: 500;
  color: #010101;
  line-height: 1;
  position: absolute;
  bottom: 0;
  left: 5%;
}
@media (min-width: 992px) {
  .page-staff-title-jp-left {
    font-size: clamp(1.125rem, calc(0.3225806451612903vw + 0.8669354838709677rem), 1.25rem);
  }
}
.staff-sns-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  list-style-type: none;
  padding: 0;
}
.staff-sns-item img {
  width: 40px;
  height: auto;
}
.staff-sns-item .brand-wrap {
  background: #8D1C17;
  border-radius: 50%;
}
.self-introduction {
  font-size: clamp(0.75rem, calc(0.5555555555555556vw + 0.625rem), 1rem);
  margin-bottom: clamp(1.875rem, calc(1.948051948051948vw + 1.4366883116883118rem), 3.75rem);
}
.staff-center-line {
  margin-top: clamp(2.5rem, calc(2.7777777777777777vw + 1.875rem), 3.75rem);
  margin-bottom: clamp(0.625rem, calc(1.3888888888888888vw + 0.3125rem), 1.25rem);
  position: relative;
  font-size: clamp(1rem, calc(0.6493506493506493vw + 0.8538961038961039rem), 1.625rem);
  font-weight: 600;
  transition: color 0.3s ease;
}
.staff-center-line span {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  padding-right: 15px;
  transition: background-color 0.3s ease;
}
@media (min-width: 992px) {
  .staff-center-line span {
    padding-right: 30px;
  }
}
.staff-center-line:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 1px;
  background-color: #707070;
}
.self-works {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: clamp(0.9375rem, calc(0.3246753246753247vw + 0.864448051948052rem), 1.25rem);
}
.self-works img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.self-works .detail {
  width: calc(100% - 20px);
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
}
.self-works .detail h3 {
  font-size: clamp(0.625rem, calc(0.38961038961038963vw + 0.5373376623376623rem), 1rem);
  font-weight: 500;
  line-height: 1.8;
  color: #ffffff;
  margin: 0;
  z-index: 3;
  pointer-events: none;
}
.self-works::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
  pointer-events: none;
}
.self-written {
  position: relative;
  color: #ffffff;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: clamp(0.9375rem, calc(0.3246753246753247vw + 0.864448051948052rem), 1.25rem);
}
.self-written .blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.self-written .detail {
  width: calc(100% - 20px);
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
}
.self-written .detail .day {
  font-size: clamp(0.625rem, calc(0.38961038961038963vw + 0.5373376623376623rem), 1rem);
  margin-right: 10px;
}
.self-written .detail .category {
  font-size: clamp(0.625rem, calc(0.38961038961038963vw + 0.5373376623376623rem), 1rem);
  display: inline-block;
  padding: 1px 10px;
  background-color: #8D1C17;
  border-radius: 20px;
}
.self-written .detail h3 {
  font-size: clamp(0.625rem, calc(0.38961038961038963vw + 0.5373376623376623rem), 1rem);
  font-weight: 500;
  line-height: 1.8;
  margin: 0;
}
.self-written .no-staff,
.self-written .staff-img {
  width: 26%;
  position: absolute;
  right: 20px;
  bottom: 30px;
  z-index: 2;
}
.self-written .no-staff img,
.self-written .staff-img img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 5px solid #ffffff;
}
.self-written::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
  pointer-events: none;
  border-radius: 10px;
}
.swiper-slide {
  display: block !important;
}
.img-blog {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 20px;
}
.blog-inner {
  position: relative;
  color: #ffffff;
  overflow: hidden;
}
.blog-inner .detail {
  width: calc(70% - 10px);
  padding-right: 15px;
  position: absolute;
  bottom: 30px;
  left: 20px;
  z-index: 2;
}
.blog-inner .detail .day {
  font-size: clamp(0.625rem, calc(0.38961038961038963vw + 0.5373376623376623rem), 1rem);
  margin-right: 10px;
}
.blog-inner .detail .category {
  font-size: clamp(0.625rem, calc(0.38961038961038963vw + 0.5373376623376623rem), 1rem);
  display: inline-block;
  padding: 1px 10px;
  background-color: #8D1C17;
  border-radius: 20px;
}
.blog-inner .detail h3 {
  font-size: clamp(0.75rem, calc(0.5194805194805194vw + 0.6331168831168831rem), 1.25rem);
  font-weight: 500;
  line-height: 1.8;
  margin: 0;
}
.blog-inner .no-staff,
.blog-inner .staff-img {
  width: 26%;
  position: absolute;
  right: 20px;
  bottom: 30px;
  z-index: 2;
}
.blog-inner .no-staff img,
.blog-inner .staff-img img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 5px solid #ffffff;
}
.blog-inner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 20px;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: 1;
}
.staffcard {
  --easing: cubic-bezier(0.2, 1, 0.2, 1);
  --transition: 0.8s var(--easing);
  --color-base: #f8f8f8;
  --color-gray: #ddd;
  --color-theme: #f5695f;
  --color-theme-darken: #f12617;
  --box-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05), -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, 0.08), -1rem -1rem 1.5rem #fff;
  --box-shadow-inset: inset 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05), inset -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-dark: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.1), -0.8rem -0.8rem 1.2rem rgba(255, 255, 255, 0.2);
  overflow: hidden;
  /*
	.swiper-button-prev,.swiper-button-next {
	    display: grid;
	    place-content: center;
	    border: 1px solid #010101;
		width: 2rem;
		height: 2rem;
	    cursor: pointer;
	    -webkit-transition: var(--transition);
	    transition: var(--transition);
		border-radius: 50%;
		transition: 0.5s ease-in-out;
	    position: absolute;
	    z-index: 1;
	    top: 0;
	    bottom: 0;
	    margin: auto;
		@media (min-width:@screen-lg){
			width: 2.5rem;
			height: 2.5rem;
		}
	}
	.swiper-button-prev::before{
		content: "";
	    position: absolute;
		width: .625rem;
		height: .625rem;
		position: absolute;
		top: 50%;
		left: 50%;
		clip-path: polygon(100% 45%, 15% 45%, 50% 0, 40% 0,0 50%, 40% 100%, 50% 100%, 15% 55%, 100% 55%);
		background-color: #010101;
		transform: translate(-50%, -50%);
		transition: 0.5s ease-in-out;
		@media (min-width:@screen-lg){
			width: .75rem;
			height: .75rem;
		}
	}
	.swiper-button-next::before{
		content: "";
		width: .625rem;
		height: .625rem;
		position: absolute;
		top: 50%;
		left: 50%;
		clip-path: polygon(0 45%, 85% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 85% 55%, 0 55%);
		background-color: #010101;
		transform: translate(-50%, -50%);
		transition: 0.5s ease-in-out;
		@media (min-width:@screen-lg){
			width: .75rem;
			height: .75rem;
		}
	}
	.swiper-button-prev:hover,.swiper-button-next:hover{
		background: #010101;
	}
	.swiper-button-prev:hover::before,.swiper-button-next:hover::before{
		background-color: #ffffff;
	}
	.swiper-button-disabled {
    	pointer-events: none;
    	opacity: 0;
	}
	.swiper-button-prev {
    	right: calc(~'100% - 1.6rem');
  	}
	.swiper-button-next {
    	left: calc(~'100% - 1.6rem');
  	}
  	*/
}
.staffcard [class*=swiper]:focus {
  outline: none;
}
.staffcard .slide-media,
.staffcard .thumb-media {
  position: relative;
  overflow: hidden;
}
.staffcard .slide-media img,
.staffcard .thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.staffcard .staffcard-btn {
  display: flex;
}
.staffcard .swiper-button-prev,
.staffcard .swiper-button-next,
.staffcard .button-all {
  margin-top: clamp(0.625rem, calc(0.6493506493506493vw + 0.4788961038961039rem), 1.25rem) !important;
  margin-bottom: clamp(0.625rem, calc(0.6493506493506493vw + 0.4788961038961039rem), 1.25rem) !important;
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-right: 1rem;
  transition: 0.5s ease-in-out;
}
@media (min-width: 992px) {
  .staffcard .swiper-button-prev,
  .staffcard .swiper-button-next,
  .staffcard .button-all {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.staffcard .swiper-button-prev,
.staffcard .swiper-button-next {
  border: 1px solid #010101;
}
.staffcard .button-all {
  border: 1px solid #8D1C17;
}
@media (min-width: 1024px) {
  .staffcard .button-all {
    display: none;
  }
}
.staffcard .swiper-button-prev::before {
  content: "";
  width: .625rem;
  height: .625rem;
  position: absolute;
  top: 50%;
  left: 50%;
  clip-path: polygon(0 45%, 85% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 85% 55%, 0 55%);
  background-color: #010101;
  transform: translate(-50%, -50%);
  transition: 0.5s ease-in-out;
}
@media (min-width: 992px) {
  .staffcard .swiper-button-prev::before {
    width: .75rem;
    height: .75rem;
  }
}
.staffcard .swiper-button-next::before {
  content: "";
  width: .625rem;
  height: .625rem;
  position: absolute;
  top: 50%;
  left: 50%;
  clip-path: polygon(0 45%, 85% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 85% 55%, 0 55%);
  background-color: #010101;
  transform: translate(-50%, -50%);
  transition: 0.5s ease-in-out;
}
@media (min-width: 992px) {
  .staffcard .swiper-button-next::before {
    width: .75rem;
    height: .75rem;
  }
}
.staffcard .swiper-button-prev::before {
  clip-path: polygon(100% 45%, 15% 45%, 50% 0, 40% 0, 0 50%, 40% 100%, 50% 100%, 15% 55%, 100% 55%);
}
.staffcard .swiper-button-next::before {
  clip-path: polygon(0 45%, 85% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 85% 55%, 0 55%);
}
.staffcard .button-all::before {
  content: "";
  background-image: url(../images/top/btn-all.svg);
  width: .625rem;
  height: .625rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s ease-in-out;
}
@media (min-width: 992px) {
  .staffcard .button-all::before {
    width: .75rem;
    height: .75rem;
  }
}
.staffcard .swiper-button-prev:hover,
.staffcard .swiper-button-next:hover {
  background: #010101;
}
.staffcard .button-all:hover {
  background: #8D1C17;
}
.staffcard .swiper-button-prev:hover::before,
.staffcard .swiper-button-next:hover::before {
  background-color: #ffffff;
}
.staffcard .button-all:hover::before {
  background-image: url(../images/top/btn-all-w.svg);
}
.staffcard .swiper-a:not(.swiper-initialized) {
  padding: 0;
}
.staffcard .swiper-a:not(.swiper-initialized) .swiper-button-prev,
.staffcard .swiper-a:not(.swiper-initialized) .swiper-button-next {
  display: none;
}
.staffcard .swiper-a:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.staffcard .swiper-b:not(.swiper-initialized) {
  padding: 0;
}
.staffcard .swiper-b:not(.swiper-initialized) .swiper-button-prev,
.staffcard .swiper-b:not(.swiper-initialized) .swiper-button-next {
  display: none;
}
.staffcard .swiper-b:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media only screen and (max-width: 1024px) {
  .staffcard .l-inner {
    padding: 0 4rem;
  }
  .staffcard .swiper {
    padding: 0 3.2rem;
  }
  .staffcard .swiper-button-prev {
    right: calc(100% - 3.2rem);
  }
  .staffcard .swiper-button-next {
    left: calc(100% - 3.2rem);
  }
}
@media only screen and (max-width: 599px) {
  .staffcard .l-inner {
    padding: 0;
  }
  .staffcard .swiper {
    padding: 0;
  }
  .staffcard .swiper-b:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media only screen and (min-width: 1025px) {
  .staffcard .swiper-button-prev::before,
  .staffcard .staffcard .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .staffcard .swiper-button-prev:hover::before,
  .staffcard .staffcard .swiper-button-next:hover::before {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  .staffcard .slide {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .staffcard .slide img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
}
@media only screen and (min-width: 600px) {
  .staffcard .sp {
    display: none !important;
  }
}
@media only screen and (max-width: 1024px) and (min-width: 600px) {
  .staffcard .swiper-b:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}