/*--------------------------------------------------

	Page Section Green Common │ 土地活用・賃貸経営について

--------------------------------------------------*/
#pickup {overflow: hidden;}
#pickup .watermark {margin-bottom: -7%;}
#pickup .bgcube {position: absolute;top: 45%;right: 0;transform: translateY(-50%);z-index: -2;width: 35%;}
#pickup ul {display: grid;grid-template-columns: repeat(4, 1fr);position: relative;background: #F0F5F7;}
/* #pickup ul::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 90%;height: 1px;background: #B2B9C1;} */
#pickup ul li {position: relative;padding: var(--size20-40) 0 var(--size20-60);}
#pickup ul li:not(:nth-child(4n))::after {content: '';position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 1px;height: 50%;background: #B2B9C1;}
#pickup ul li a {position: relative;display: block;padding-bottom: 1.6em;font-weight: 500;font-size: var(--font24);text-align: center;}
#pickup ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: .8em;
  height: .5em;
  background: url(../img/common/arrow/Icon_arrowD-gray.svg) no-repeat center / 100%;
  transition: .3s;
}
#pickup ul li a:hover {color: var(--blue);font-weight: 700;;}
#pickup ul li a:hover::after {background-image: url(../img/common/arrow/Icon_arrowD-blue.svg);}
/* Pick up content │ カード型デザイン (page単位で有効化) */
#pickup.pickup-v2 ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: var(--size20-40);position: relative;background: none;}
#pickup.pickup-v2 ul li {padding: 0;}
#pickup.pickup-v2 ul li::after {content: none;}
#pickup.pickup-v2 ul li a {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 180px;
  padding: var(--size20-40);
  overflow: hidden;
  background: #000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  transition: box-shadow .35s ease, transform .35s ease;
}
#pickup.pickup-v2 ul li a::after {content: none;}
#pickup.pickup-v2 ul li a .bg {position: absolute;inset: 0;z-index: 0;}
#pickup.pickup-v2 ul li a .bg img {width: 100%;height: 100%;object-fit: cover;transition: transform .6s ease;}
#pickup.pickup-v2 ul li a .bg::after {content: '';position: absolute;inset: 0;background: rgba(0, 0, 0, .45);transition: background .35s ease;}
#pickup.pickup-v2 ul li a .title {position: relative;z-index: 1;color: #fff;font-weight: 700;font-size: var(--font20);line-height: 1.5;text-align: left;text-shadow: 0 2px 10px rgba(0, 0, 0, .5);}
#pickup.pickup-v2 ul li a:hover {box-shadow: 0 16px 32px rgba(0, 0, 0, .18);transform: translateY(-6px);}
#pickup.pickup-v2 ul li a:hover .bg img {transform: scale(1.08);}
#pickup.pickup-v2 ul li a:hover .bg::after {background: rgba(0, 0, 0, .6);}
@media only screen and ( max-width : 1024px ) {
  #pickup.pickup-v2 ul {grid-template-columns: repeat(2, 1fr);}
  #pickup.pickup-v2 ul::before {content: none;}
}
@media only screen and ( max-width : 767px ) {
  #pickup.pickup-v2 ul {grid-template-columns: 1fr;}
}
/* Works バナー */
#works_banner a {
  display: block;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--size40) 4em var(--size30) 20px;
  border-radius: 0;
  background: #ECEDF0 url(../img/page/common/works_bg.webp) no-repeat center / cover;
}
#works_banner a:hover {transform: translateY(-5px);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);}
#works_banner a {display: flex;align-items: center;justify-content: center;gap: var(--size20-90);font-size: var(--font29);}
#works_banner a span {color: #77797B;font-size: 3.5em;}
#works_banner a::after {content: '';position: absolute;top: 0;right: 8%;width: 1.2em;height: 100%;background: url(../img/common/arrow/Icon_arrowR-blk.svg) no-repeat 50% 53% / 100%;}
@media only screen and ( max-width : 1024px ) {
  #pickup ul {grid-template-columns: repeat(2, 1fr);}
  #pickup ul li:nth-child(2n)::after {display: none;}
  #pickup ul::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 90%;height: 1px;background: #B2B9C1;}
}
@media only screen and ( max-width : 767px ) {
  #works_banner a {font-size: var(--font18);}
  #pickup ul li a {padding-bottom: 1.2em;font-size: 14px;}
}
/*--------------------------------------------------

	After Maintenance │ アフターメンテナンス

--------------------------------------------------*/
#after_maintenance {background: url(../img/page/common/bg_cubeR.webp) no-repeat right bottom / 35%;}
/*--------------------------------------------------

	Support │ 賃貸経営サポートについて

--------------------------------------------------*/
#support {background: url(../img/page/common/bg_cubeR02.webp) no-repeat 100% 90% / 35%;}
#support .block2 .watermark {margin-bottom: -13%;}
#support .block2 .title_common {margin-bottom: var(--size20-150);}
#support .block2 ul {justify-content: center;max-width: 1262px;margin: 0 auto;}
#support .block2 ul li {width: calc(100% / 3);margin: 0 -1px -1px;padding: var(--size40) var(--size20-50);border: 1px solid #707070;background: #F8F8F8;}
#support .block2 ul li:nth-child(7) {margin: 0 -1px 0 auto;}
#support .block2 ul li:nth-child(8) {margin: 0 2px 0 -1px;}
#support .block2 ul li figure {display: flex;justify-content: center;height: 15em;text-align: center;}
#support .block2 ul li figure img {width: 40%;}
#support .block2 ul li:nth-child(1) figure img {width: 45%;}
#support .block2 ul li:nth-child(2) figure img {width: 42%;}
#support .block2 ul li:nth-child(3) figure img {width: 45%;}
#support .block2 ul li:nth-child(4) figure img {width: 30%;}
#support .block2 ul li:nth-child(5) figure img {width: 40%;}
#support .block2 ul li:nth-child(6) figure img {width: 30%;}
#support .block2 ul li:nth-child(7) figure img {width: 35%;}
#support .block2 ul li:nth-child(8) figure img {width: 35%;}
#support .block2 ul li .wrap {flex: 1;}
#support .block2 ul li .wrap h3 {margin-bottom: var(--size40);color: var(--blue);font-weight: 700;font-size: var(--font29);letter-spacing: .025em;text-align: center;}
#support .block2 ul li .wrap p {color: var(--navy);}
@media only screen and ( max-width : 1024px ) {
  #support .block2 ul li {width: 50%;}
  #support .block2 ul li:nth-child(7) {margin: 0 -1px -1px auto;}
  #support .block2 ul li:nth-child(8) {margin: 0 -1px -1px -1px;}
}
@media only screen and ( max-width : 767px ) {
  #support .block2 ul li {width: 100%;margin: 0 0 -1px !important;}
}
/*--------------------------------------------------

	Flow │ ご契約までの流れ

--------------------------------------------------*/
#flow .block1 .lead_text {margin-bottom: var(--size70);font-weight: 500;font-size: var(--font29);letter-spacing: .025em;}
#flow .block1 .tab_container {margin-bottom: var(--size80);}
#flow .block1 .tab_container button {
  position: relative;
  width: 49%;
  padding: 1.2em clamp(16px, 2vw, 30px);
  border: none;
  background: #E2E2E2;
  color: #B2B2B2;
  font-size: var(--size24);
  letter-spacing: .025em;
  text-align: center;
  transition: .3s;
}
#flow .block1 .tab_container button:hover {background: #DEE1E5;}
#flow .block1 .tab_container button.is-active {background: var(--blue);color: #fff;}
#flow .block1 .tab_container button.is-active:hover {background: var(--blue);}
#flow .block1 .tab_container button::before {
  content: '';
  opacity: 0;
  position: absolute;
  top: 99%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  width: var(--size50);
  height: calc(tan(60deg) * var(--size30) / 2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--blue);
  transition: .3s;
}
#flow .block1 .tab_container button.is-active::before {opacity: 1;}
#flow .block1 .tab_container .flow_panel {position: relative;padding: var(--size100) var(--size60) var(--size130);background: #F0F5F7;}
#flow .block1 .tab_container .flow_panel::before {
  content: '';
  position: absolute;
  top: 99%;
  left: 50%;
  transform: translateX(-50%);
  width: var(--size180);
  height: calc(tan(60deg) * var(--size100) / 2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #F0F5F7;
}
#flow .block1 .flow_note {padding: var(--size50) var(--size20-50);background: url(../img/page/flow/bg.webp) no-repeat center / cover;}
#flow .block1 .flow_note p {max-width: 900px;margin: 0 auto;font-size: var(--font20);letter-spacing: .06em;text-align: center;}
@media only screen and ( max-width : 1024px ) {
  #flow .block1 .flow_banner {flex-direction: column;}
  #flow .block1 .flow_list {padding-left: 0;}
  #flow .block1 .flow_list_company {position: static;display: block;margin-bottom: .6em;width: auto;}
}
@media only screen and ( max-width : 767px ) {
  #flow .block1 .lead_text {font-size: var(--font18);}
}
/*--------------------------------------------------

	Owner's Voice / Interview │ オーナー様の声 一覧

--------------------------------------------------*/
#owners_voice .inner {max-width: 1100px;}
#owners_voice .block1 .inner {padding-top: 40px;}
#owners_voice #pickup.pickup-v2 .inner {max-width: 1596px;}
#owners_voice .block1 ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: var(--size100);}
#owners_voice .block1 ul li {position: relative;box-shadow: 0 6px 20px rgba(0, 0, 0, .16);transition: box-shadow .35s ease, transform .35s ease;}
#owners_voice .block1 ul li:hover {box-shadow: 0 20px 40px rgba(0, 0, 0, .28);transform: translateY(-6px);}
#owners_voice .block1 ul li figure {position: relative;margin-bottom: 0;aspect-ratio: 4 / 3;overflow: hidden;}
#owners_voice .block1 ul li figure img {width: 100%;height: 100%;object-fit: cover;transition: transform .6s ease;}
#owners_voice .block1 ul li:hover figure img {transform: scale(1.06);}
#owners_voice .block1 ul li figure::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(157, 115, 86, .5);
  opacity: 0;
  transition: opacity .45s ease;
}
#owners_voice .block1 ul li:hover figure::before {opacity: 1;}
#owners_voice .block1 ul li figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 50%);
  transition: opacity .4s ease;
}
#owners_voice .block1 ul li:hover figure::after {opacity: .85;}
#owners_voice .block1 ul dl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 14px 16px;
}
#owners_voice .block1 ul dl dt {padding: 4px 14px;border: 1px solid #707070;border-radius: 0;background: #fff;color: #9D7356;font-size: 12px;}
#owners_voice .block1 ul dl dd {position: relative;padding-left: 1em;color: #fff;font-weight: 700;font-size: 15px;letter-spacing: .05em;text-shadow: 0 2px 8px rgba(0, 0, 0, .5);}
#owners_voice .block1 ul dl dd::before {content: '"';position: absolute;left: 0;top: -.2em;color: #C9A98A;font-family: Georgia, serif;font-size: 1.4em;line-height: 1;}
@media only screen and ( max-width : 1024px ) {
  #owners_voice .block1 ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 767px ) {
  #owners_voice .block1 ul {grid-template-columns: 1fr;}
}
/*--------------------------------------------------

	Interview │ インタビュー 詳細

--------------------------------------------------*/
#interview .block1 .content_bg2 {top: 8.2%;}
#interview .block1 .watermark {margin-bottom: 0;text-align: right;font-size: clamp(70px, calc(70px + 110 * ((100vw - 375px) / 1545)), 180px);}
#interview .block1 .main_container {position: relative;margin-bottom: var(--size130);padding-bottom: var(--size60);}
#interview .block1 .main_container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  z-index: -1;
  width: 100vw;
  height: 100%;
  border-bottom: 1px solid #A9B1B7;
  background: url(../img/page/interview/block1/bg_wave.webp) no-repeat center bottom / cover;
}
#interview .block1 .main_container figure {width: 40%;max-width: 741px;margin: 0 auto;}
#interview .block1 .main_container> dl {display: flex;align-items: center;justify-content: center;gap: var(--size50);margin-top: var(--size40);}
#interview .block1 .main_container> dl dt {padding: 10px var(--size40);border: 1px solid #707070;border-radius: 0;background: #fff;color: #9D7356;font-size: var(--font20);}
#interview .block1 .main_container> dl dd {font-weight: 500;font-size: var(--font24);}
#interview .block1 ul li:not(:last-child) {margin-bottom: var(--size100);}
#interview .block1 ul li h3 {margin-bottom: var(--size20);padding-bottom: var(--size20);color: var(--blue);border-bottom: 1px dashed var(--blue);font-weight: 600;font-size: var(--font24);letter-spacing: .057em;}
#interview .block1 ul li p {font-size: var(--font18);letter-spacing: .055em;}
/* AI家具配置イメージ */
#interview .block2 {padding: var(--size100) 0;background: #F0F5F7 url(../img/page/interview/block1/bg_plant.webp) no-repeat center bottom / cover;}
#interview .block2 figure {max-width: 700px;margin: 0 auto;}
/* 他のオーナー様の声 */
#interview .block3 {margin-bottom: 0;padding-bottom: var(--size100);border-bottom: 1px solid #D9D9D9;}
#interview .block3 .pager {display: flex;align-items: center;justify-content: flex-end;gap: var(--size50);margin-bottom: var(--size70);}
#interview .block3 .pager p {color: #C7C7C7;font-weight: 700;font-size: var(--font24);letter-spacing: .025em;}
#interview .block3 .pager p span {color: #011183;}
#interview .block3 .pager ul {display: flex;gap: var(--size20);}
#interview .block3 .pager ul li button {display: flex;align-items: center;justify-content: center;width: 3em;height: 3em;border: 1px solid #C7C7C7;border-radius: 0;background: #fff;cursor: pointer;transition: .3s;}
#interview .block3 .pager ul li button:hover {background: #F0F5F7;}
#interview .block3 .pager ul li button.is-disabled {opacity: .35;pointer-events: none;}
#interview .block3 .pager ul li img {width: 50%;}
#interview .block3 .voice_swiper {margin: 0 0 var(--size90);padding: var(--size30) 0;}
#interview .block3 .voice_swiper .swiper-slide {height: auto;position: relative;}
#interview .block3 .voice_swiper .swiper-slide::before {content: '';opacity: 0;position: absolute;top: 50%;left: 50%;z-index: -1;transform: translate(-50%, -50%);width: 115%;height: 115%;background: #F0F5F7;transition: .3s;}
#interview .block3 .voice_swiper .swiper-slide:hover::before {opacity: 1;}
#interview .block3 .voice_swiper .swiper-slide figure {margin-bottom: var(--size30);aspect-ratio: 4 / 3;overflow: hidden;}
#interview .block3 .voice_swiper .swiper-slide figure img {width: 100%;height: 100%;object-fit: cover;}
#interview .block3 .voice_swiper .swiper-slide dl {display: flex;align-items: center;gap: var(--size30);}
#interview .block3 .voice_swiper .swiper-slide dl dt {padding: 10px var(--size30);border: 1px solid #707070;border-radius: 0;background: #fff;color: #9D7356;font-size: var(--font18);}
#interview .block3 .voice_swiper .swiper-slide dl dd {font-weight: 500;font-size: var(--font18);}
#interview .block3 .view {max-width: clamp(210px, calc(210px + 60 * ((100vw - 375px) / 1545)), 270px);margin: 0 auto;padding: 17px var(--size40);border: 1px solid #707070;}
#interview .block3 .view span::before {height: 20px;}
#interview .block3 .view img {width: var(--size20);}
@media only screen and ( max-width : 1024px ) {
  #interview .interview_head {flex-direction: column;align-items: flex-start;}
  #interview .interview_head .wrap {width: 100%;}
  #interview .block1 .main_container {padding-top: var(--size150);}
  #interview .block1 .main_container figure {width: 100%;}
}
@media only screen and ( max-width : 767px ) {
  #interview .block3 .pager {justify-content: flex-start;}
}
/*--------------------------------------------------

	Management │ 賃貸経営のメリット

--------------------------------------------------*/
#management .block1 {padding-top: var(--size100);}
#management .block1 .content_bg2 {top: 0;}
#management .block1 .inner {max-width: 1469px;}
#management .block1 .lead_text {margin-bottom: var(--size20-100);}
#management .block1 figure {margin-bottom: var(--size180);text-align: center;}
#management .block1 figure img {max-width: 550px;}
#management .block1 figure figcaption {margin-top: var(--size40);color: var(--blue);font-size: var(--font29);letter-spacing: .025em;text-align: center;}
/* 管理形態タイプ */
#management .block1 .container .item:not(:last-child) {margin-bottom: var(--size180);}
#management .block1 .container .item:first-of-type {padding-top: 0;border-top: 0;}
#management .block1 .container .item .title_wrap {margin-bottom: var(--size70);}
#management .block1 .container .item .title_wrap h3 {position: relative;margin-bottom: var(--size40);font-weight: 700;;font-size: var(--font32);letter-spacing: 0;}
#management .block1 .container .item .title_wrap h3::before {content: '';position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;height: 1px;background: #707070;}
#management .block1 .container .item .title_wrap h3 span {position: relative;padding-right: 1em;background: #fff;}
#management .block1 .container .item .title_wrap p {display: flex;align-items: baseline;gap: var(--size30);font-weight: 700;font-size: var(--font32);letter-spacing: .027em;}
#management .block1 .container .item .title_wrap p span {color: var(--blue);font-size: var(--font24);letter-spacing: 0;}
#management .block1 .container .item ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: var(--size20-150);}
#management .block1 .container .item ul li .wrap {margin-bottom: var(--size20);text-align: center;}
#management .block1 .container .item ul li .wrap img {max-width: 150px;margin-bottom: var(--size30);}
#management .block1 .container .item ul li .wrap h4 {font-weight: 700;font-size: var(--font24);letter-spacing: 0;text-align: center;}
#management .block1 .container .item ul li .wrap h4 span {display: block;font-weight: 400;font-size: var(--font18);text-align: center;}
#management .block1 .container .item ul li p {font-weight: 300;font-size: var(--font15);}
@media only screen and ( max-width : 1024px ) {
  #management .block1 .container .item .gauge_list {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 767px ) {
  #management .block1 figure figcaption {font-size: var(--font18);}
  #management .block1 .container .item .title_wrap h3 {font-size: var(--font24);}
  #management .block1 .container .item .title_wrap p {display: block;font-size: var(--font24);}
  #management .block1 .container .item .title_wrap p span {display: block;margin-bottom: 5px;}
}
@media only screen and ( max-width : 500px ) {
  #management .block1 .container .item ul li p {font-size: 10px;}
}