/* =========================
  category title
========================= */
.category-title{
position: relative;
}

/* 背景ベタ */
.category-title::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 92%;
height: 100%;
background: #FDAAB2;
border-radius: 3rem 0 0 3rem;
z-index: 0;
}

/* h1 */
.category-title h1{
position: relative;
z-index: 1;
text-align: center;
padding: 5rem 0;
font-size: 3.6rem;
line-height: 1.2;
color:#FFF;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1;
}


/* ============= */
@media (max-width: 767px){
.category-title::before{
width: 95%;
border-radius: 2rem 0 0 2rem;
}
.category-title h1{
padding: 4rem 0;
}
}


/* =========================
  breadcrumb
========================= */
.breadcrumb{
display: flex;
padding:1.5rem 10rem 0 0;
}

.breadcrumb nav{
margin-left: auto;
border:0px #FF0000 solid;
display: inline-flex;
}

.breadcrumb ol{
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: .8rem;
font-size:1.4rem;
}

.breadcrumb li{
display: inline-flex;
align-items: center;
}

/* 区切り */
.breadcrumb li + li::before{
content: "";
border-top:2px #FDAAB2 solid;
border-right:2px #FDAAB2 solid;
width:.7rem;
height:.7rem;
margin-right: .8rem;
display: inline-block;
transform: rotate(45deg);
}

.breadcrumb a{
color: inherit;
text-decoration: none;
}


/* ============= */
@media (max-width: 767px) {
.breadcrumb{
padding:1.5rem 5% 0 0;
}
}


/* =========================
  rental
========================= */
/* 全体 */
.rental,
.flow{
position: relative;
padding:7rem 0 0 0;
}

.rental article,
.flow article{
width:85%;
margin:0 auto 5rem auto;
}


/* 見出し */
.rental .sub-title h2,
.sale .sub-title h2,
.flow .sub-title h2{
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight:500;
font-size: 3.6rem;
padding: 0 0 3rem 0;
word-break: keep-all;
overflow-wrap: anywhere;
}

/* ============= */
@media (max-width: 767px) {
.rental article{
width:90%;
margin:0 auto;
}
.rental .sub-title h2,
.sale .sub-title h2,
.flow .sub-title h2{
font-size: 3.3rem;
line-height: 1.4;
}
}


/* ---------------------------------
  h3
--------------------------------- */
.rental h3,
.sale h3{
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 2.3rem;
margin: 4rem 0 2rem 0;
display: inline-flex;
align-items: center;
gap: .6rem;
}

.rental h3::before,
.sale h3::before{
content: "";
width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
background: #FDAAB2;
margin-right:.3rem;
}


/* ---------------------------------
  .list
--------------------------------- */
.list li{
position: relative;
padding-left: 1em;
padding-bottom: .6rem;
/*text-indent: -1em;*/
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.list li::before{
content: "・";
position: absolute;
left: 0;
}
.rental .list{
column-count: 3;
column-gap: 3rem;
}


/* ---------------------------------
  .photos
--------------------------------- */
.photos{
display: grid;
}
.photos img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.rental .photos{
grid-template-columns: repeat(6, 1fr);
gap: 1.5rem;
margin-top: 4rem;
}
.rental .photos img{
aspect-ratio: 3/4;
border-radius: 1.5rem;
}
.sale .photos{
grid-template-columns: repeat(2, 1fr);
grid-gap: 3rem;
}
.sale .photos img{
aspect-ratio: 1;
border-radius: 3rem;
}

/* ============= */
@media (max-width: 767px){
.photos{
gap: 1rem;
}
.rental .photos{
grid-template-columns: repeat(3, 1fr); 
}
.sale .photos img{
border-radius: 2rem;
}
}


/* ---------------------------------
  .ba
--------------------------------- */
.ba{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(50%, 360px), 1fr));
grid-gap: 4rem;
}
.ba dl{
display: grid;
grid-template-columns: 1fr 1fr;
}
.ba dt{
grid-column: 1 / 3;
margin-bottom: .6rem;
padding-left: 1em;
font-weight: inherit;
}
.ba dd{
overflow: hidden;
}
.ba dd{
position: relative;
}
.ba dd:before{
position: absolute;
top: 2rem;
left: 2rem;
padding: 0.25em 0.5em;
color: #fff;
text-transform: uppercase;
line-height: 1;
}
.ba dd:nth-of-type(1){
border-radius: 3rem 0 0 3rem;
}
.ba dd:nth-of-type(1):before{
content: "before";
background: #666;
}
.ba dd:nth-of-type(2){
border-radius: 0 3rem 3rem 0;
}
.ba dd:nth-of-type(2):before{
content: "after";
background: #FDAAB2;
}
.ba img{
aspect-ratio: 1.5 / 2;
object-fit: cover;
}

/* ============= */
@media (max-width: 767px){
.ba dd:nth-of-type(1){
border-radius: 2rem 0 0 2rem;
}
.ba dd:nth-of-type(2){
border-radius: 0 2rem 2rem 0;
}
}



/* =========================
  sale
========================= */
.sale{
  padding: 15rem 0 0 0;
}

.sale article{
  width: 85%;
  margin:0 auto 5rem auto;
}

/* グリッド */
.sale .grid{
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 6rem;
  align-items: start;
}

/* 順序 */
.sale .col1{
  order: 2;
}

.sale .col2{
  order: 1;
}

.sale section{
  position: relative;
  z-index: 1;
}

/* 画像 */
.sale .image{
  display: flex;
  justify-content: center;
}

.sale .image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3rem;
}


/* ============= SP ============= */
@media (max-width: 767px) {
  .sale article{
    width: 90%;
  }

  .sale .grid{
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .sale .col1,
  .sale .col2{
    order: initial;
  }
}

/* =========================
  flow
========================= */

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 3rem;
}

.flow-steps .step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.flow-steps .step-number {
  background-color: #FDAAB2;
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.flow-steps .step-title {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  display: block;
}

.flow-steps .step-text p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.8;
}

/* スマホ対応 */
@media (max-width: 767px) {
  .flow-steps .step {
    gap: 0.8rem;
  }
  .flow-steps .step-number {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.4rem;
  }
  .flow-steps .step-text p {
    font-size: 1.4rem;
  }
}



/* =========================
　背景
========================= */
.bg-wrap{
border:0px #FF0000 solid;
position: relative;
z-index: 0;
}

.bg1{
position: absolute;
left: 0;
width: 100%;
height: 150vh;
z-index: 0;
overflow:hidden;
top: 10vw;
border:0px #FF0000 solid;
}

.bg1::before{
content:"";
display:block;
position: absolute;
width: 80%;
aspect-ratio:1.81/1;
left: -15vw;
background: url("../../image/bg1.png") no-repeat center / cover;
border:0px #FF0000 solid;
will-change: transform;
animation: bgPulse1 10s ease-in-out infinite;
}
@keyframes bgPulse1{
0%,100%{ transform: scale(1); }
50%{ transform: scale(.8); }
}


/* ============ */
@media (max-width: 1024px){
.bg1{
top: 20vh;
}
.bg1::before{
width: 100%;
left: -30vw;
}
}

@media (max-width: 764px){
.bg1{
top: 30vh;
}
.bg1::before{
width: 120%;
left: -30vw;
}
}

@media (max-width: 599px){
.bg1{
top: 50vh;
}
.bg1::before{
width: 180%;
left: -90vw;
}
}



.sp,
.tb,
.pc{}
	@media (max-width: 575.98px) {
		.tb:not(.sp),
		.pc:not(.sp){
			display: none !important;
			}
		}
	@media (min-width: 576px) and (max-width: 991.98px) {
		.sp:not(.tb),
		.pc:not(.tb){
			display: none !important;
			}
		}
	@media (min-width: 992px) {
		.sp:not(.pc),
		.tb:not(.pc){
			display: none !important;
			}
		}