html {
font-size: 62.5%;
height: 100%;
scroll-behavior: smooth;
}
@media screen and (max-width: 1439px) and (min-width: 768px) {
html {
font-size: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
html {
font-size: 2.5641025641vw;
}
}
body {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
color: #333;
font-size: 1.6rem;
}
img {
display: block;
width: 100%;
height: auto;
}
a[href^="tel:"] {
pointer-events: none;
}
@media screen and (max-width: 767px) {
a[href^="tel:"] {
pointer-events: auto;
}
}
.p-top__mv {
position: relative;
margin-top: -1.8rem;
}
.p-top__mv-container {
position: relative;
min-height: 36.6rem;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 767px) {
.p-top__mv-container {
min-height: 58.4rem;
align-items: flex-start;
padding-top: 4rem;
}
}
.p-top__mv-container-img {
position: absolute;
inset: 0;
z-index: -1;
}
.p-top__mv-container-img::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 2;
}
.p-top__mv-container-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-top__mv-slider, .p-top__mv-slider .slick-list, .p-top__mv-slider .slick-track {
height: 100%;
}
.p-top__container-text {
color: #fff;
text-align: center;
top: -3rem;
position: relative;
}
@media screen and (max-width: 767px) {
.p-top__container-text {
padding-inline: 2rem;
top: 2rem;
}
}
.p-top__container-text-title {
font-size: 5.4rem;
font-weight: 700;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
letter-spacing: 0.2rem;
animation: fade-tilt 1.5s ease both;
line-height: 1.1;
}
@media screen and (max-width: 767px) {
.p-top__container-text-title {
font-size: 4rem;
}
}
.p-top__container-text-title-sub {
font-size: 4.4rem;
}
@media screen and (max-width: 767px) {
.p-top__container-text-title-sub {
font-size: 3.2rem;
letter-spacing: 0.256rem;
}
}
.p-top__container-text-lead {
margin-top: 1.6rem;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.06rem;
animation: fade-tilt 1.5s ease 0.5s both;
}
@media screen and (max-width: 767px) {
.p-top__container-text-lead {
font-size: 1.5rem;
margin-top: 1.6rem;
}
}
.p-top__mv-search {
position: absolute;
left: 50%;
bottom: 2.4rem;
display: flex;
align-items: center;
gap: 0.6rem;
width: 108rem;
height: 8rem;
padding: 1.6rem 3.2rem;
border-radius: 99rem;
background: #fff;
transform: translateX(-50%);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
z-index: 49;
}
@media screen and (max-width: 767px) {
.p-top__mv-search {
border-radius: 1.6rem;
flex-direction: column;
width: 34.8rem;
height: 31.6rem;
padding: 1.6rem;
border-radius: 1.6rem;
gap: 0.7rem;
bottom: 3.6rem;
}
}
.p-top__mv-search-area {
position: relative;
flex: 1;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-area {
width: 100%;
flex: 0;
}
}
.p-top__mv-search-area::before {
content: "";
position: absolute;
top: 50%;
left: 2.4rem;
z-index: 1;
width: 1.8rem;
height: 1.6rem;
background: url("../img/common/icon-property01.svg") no-repeat center center/contain;
transform: translate(-50%, -50%);
pointer-events: none;
}
.p-top__mv-search-input {
width: 100%;
height: 4.9rem;
padding: 1.5rem 1.2rem 1.5rem 4rem;
border: 0.1rem solid #D9D9D9;
border-radius: 0.4rem;
background: #fff;
color: #333;
font-size: 1.4rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-input {
height: 5.2rem;
}
}
.p-top__mv-search-input::placeholder {
color: #6D6D6D;
}
.p-top__mv-search-item {
position: relative;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-item {
position: static;
width: 100%;
}
}
.p-top__mv-search-item--type .p-top__mv-search-select {
height: 5rem;
}
.p-top__mv-search-item--price .p-top__mv-search-select {
height: 5rem;
}
.p-top__mv-search-item--filter .p-top__mv-search-select {
height: 5rem;
}
.p-top__mv-search-select {
display: flex;
align-items: center;
height: 4.7rem;
padding: 1.5rem 1.2rem 1.5rem 1.6rem;
border: 0.1rem solid #D9D9D9;
border-radius: 0.4rem;
background: #fff;
font-size: 1.4rem;
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-select {
width: 100%;
height: 5.6rem;
}
}
.p-top__mv-search-select-text {
display: flex;
align-items: center;
gap: 0.4rem;
color: #6D6D6D;
}
.p-top__mv-search-select-text.is-input {
color: #333;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-select-text {
width: 100%;
}
}
.p-top__mv-search-select-text::before {
content: "";
flex-shrink: 0;
width: 1.8rem;
height: 1.6rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.p-top__mv-search-select-text::after {
content: "";
flex-shrink: 0;
width: 0.9rem;
height: 0.9rem;
margin-left: 1.2rem;
border-right: 0.2rem solid currentColor;
border-bottom: 0.2rem solid currentColor;
transform: rotate(45deg) translateY(-0.2rem);
}
@media screen and (max-width: 767px) {
.p-top__mv-search-select-text::after {
margin-left: auto;
}
}
.p-top__mv-search-select-text--type::before {
background-image: url("../img/common/icon-property02.svg");
}
.p-top__mv-search-select-text--price::before {
background-image: url("../img/top/icon-property02.svg");
}
.p-top__mv-search-select-text--filter::before {
background-image: url("../img/top/icon-property03.svg");
}
.p-top__mv-search-submit {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 15.8rem;
height: 4.8rem;
border-radius: 99rem;
background: #EF9500;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.03rem;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-submit {
width: 20rem;
height: 4.8rem;
margin-top: 0.4rem;
}
}
.p-top__mv-search-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.p-top__mv-search-panel {
padding: 2rem;
position: absolute;
top: calc(100% + 0.4rem);
left: 0;
z-index: 10;
border: 0.1rem solid #E0E0DE;
border-radius: 0.4rem;
background-color: #fff;
box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.12);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
z-index: 55;
}
.p-top__mv-search-panel.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.3s ease, visibility 0s linear 0s;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-panel {
top: 19.4rem;
left: 50%;
z-index: 51;
width: 34.6rem;
border-radius: 1.6rem;
transform: translate(-50%, 0);
box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.24);
}
.p-top__mv-search-panel::after {
content: "";
position: absolute;
bottom: 6.6rem;
left: 0;
transform: translate(0, -50%);
width: 100%;
height: 0.1rem;
background: #E0E0DE;
}
}
@media screen and (min-width: 768px) {
.p-top__mv-search-panel--kinds {
width: 30rem;
left: calc(50% - 15.7rem);
top: calc(100% - 3.2rem);
}
}
@media screen and (min-width: 768px) {
.p-top__mv-search-panel--price {
width: 35rem;
left: calc(50% - 0.4rem);
top: calc(100% - 3.2rem);
}
}
@media screen and (max-width: 767px) {
.p-top__mv-search-panel--price .p-top__mv-search-panel-body {
margin-top: 1.8rem;
}
}
@media screen and (max-width: 767px) {
.p-top__mv-search-panel--price .p-top__mv-search-panel-foot {
margin-top: 2.3rem;
padding: 1rem 0 0 0;
}
}
@media screen and (min-width: 768px) {
.p-top__mv-search-panel--filter {
width: 40rem;
border-radius: 1.6rem;
position: fixed;
top: 34rem;
left: 50%;
transform: translate(-50%, -50%);
}
.p-top__mv-search-panel--filter::after {
content: "";
position: absolute;
bottom: 7rem;
left: 0;
transform: translate(0, -50%);
width: 100%;
height: 0.1rem;
background: #E0E0DE;
}
}
@media screen and (min-width: 768px) {
.p-top__mv-search-panel--filter .p-top__mv-search-panel-title {
font-size: 1.8rem;
}
}
@media screen and (min-width: 768px) {
.p-top__mv-search-panel--filter .p-top__mv-search-panel-body {
margin-top: 2rem;
}
}
.p-top__mv-search-panel--filter .p-top__mv-search-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.p-top__mv-search-panel--filter .p-top__mv-search-detail-select {
height: 4.4rem;
}
}
.p-top__mv-search-panel--filter .p-top__mv-search-panel-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
margin-top: 2.4rem;
padding-top: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-panel--filter .p-top__mv-search-panel-foot {
padding: 1.2rem 0 0 0;
margin-top: 2rem;
}
}
@media screen and (max-width: 767px) {
.p-top__mv-search-panel--type .p-top__mv-search-panel-foot {
margin-top: 2.6rem;
padding: 1rem 0 0 0;
}
}
.p-top__mv-search-panel-head {
display: none;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.p-top__mv-search-panel-title {
font-size: 2rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.02rem;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-panel-title {
font-size: 1.8rem;
line-height: 1.2;
}
}
.p-top__mv-search-panel-close {
position: relative;
width: 3.2rem;
height: 3.2rem;
}
.p-top__mv-search-panel-close::before, .p-top__mv-search-panel-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2.4rem;
height: 0.2rem;
background-color: #333;
}
.p-top__mv-search-panel-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.p-top__mv-search-panel-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.p-top__mv-search-panel-body {
display: grid;
gap: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-panel-body {
gap: 2.5rem;
margin-top: 1rem;
}
}
.p-top__mv-search-panel-foot {
display: none;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-panel-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
margin-top: 2rem;
padding: 1rem 0;
}
}
.p-top__mv-search-panel-submit {
display: flex;
align-items: center;
justify-content: center;
min-width: 15.8rem;
height: 4.4rem;
border-radius: 99rem;
background-color: #EF9500;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.03rem;
cursor: pointer;
}
.p-top__mv-search-panel-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.p-top__mv-search-price {
display: flex;
align-items: flex-end;
gap: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-price {
gap: 0.8rem;
}
}
.p-top__mv-search-price-field {
flex: 1;
min-width: 0;
}
.p-top__mv-search-price-label {
display: block;
font-size: 1.2rem;
font-weight: 500;
}
.p-top__mv-search-price-select-wrap {
position: relative;
margin-top: 0.4rem;
}
.p-top__mv-search-price-select-wrap::after {
content: "";
position: absolute;
top: 50%;
right: 1.6rem;
width: 0.9rem;
height: 0.9rem;
border-right: 0.2rem solid #6D6D6D;
border-bottom: 0.2rem solid #6D6D6D;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-price-select-wrap::after {
right: 1.4rem;
}
}
.p-top__mv-search-price-select {
width: 100%;
height: 4.4rem;
padding: 1.4rem 1.2rem 1.2rem 1.6rem;
border: 0.1rem solid #D9D9D9;
border-radius: 0.4rem;
background-color: #fff;
font-size: 1.4rem;
}
.p-top__mv-search-price-separator {
display: inline-flex;
align-items: center;
justify-content: center;
height: 4.4rem;
font-size: 1rem;
}
.p-top__mv-search-price-select {
color: #6D6D6D;
}
.p-top__mv-search-price-select.is-input {
color: #333;
}
.p-top__mv-search-detail-select {
color: #6D6D6D;
}
.p-top__mv-search-detail-select.is-input {
color: #333;
}
.p-top__mv-search-detail {
display: grid;
gap: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-detail {
gap: 1.2rem;
}
}
.p-top__mv-search-detail-block {
display: grid;
gap: 0.4rem;
}
.p-top__mv-search-detail-label {
font-size: 1.4rem;
font-weight: 500;
}
.p-top__mv-search-detail-range {
display: flex;
align-items: center;
gap: 0.2rem;
}
.p-top__mv-search-detail-select-wrap {
position: relative;
width: 100%;
}
.p-top__mv-search-detail-select-wrap::after {
content: "";
position: absolute;
top: 50%;
right: 1.4rem;
width: 0.7rem;
height: 0.7rem;
border-right: 0.15rem solid #6D6D6D;
border-bottom: 0.15rem solid #6D6D6D;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
.p-top__mv-search-detail-select {
width: 100%;
height: 4.4rem;
padding: 0 1.3rem 0 1.6rem;
border: 0.1rem solid #E0E0DE;
color: #6D6D6D;
border-radius: 0.4rem;
background-color: #fff;
font-size: 1.4rem;
font-weight: 500;
appearance: none;
cursor: pointer;
}
.p-top__mv-search-detail-separator {
flex-shrink: 0;
font-size: 1rem;
}
.p-top__mv-search-check {
display: flex;
align-items: center;
cursor: pointer;
}
.p-top__mv-search-check-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.p-top__mv-search-check-input:checked + .p-top__mv-search-check-box {
border-color: #EF9500;
background-color: #EF9500;
}
.p-top__mv-search-check-input:checked + .p-top__mv-search-check-box::after {
opacity: 1;
}
.p-top__mv-search-check-box {
position: relative;
flex-shrink: 0;
width: 2rem;
height: 2rem;
border: 0.1rem solid #E0E0DE;
border-radius: 0.2rem;
background-color: #fff;
}
@media screen and (max-width: 767px) {
.p-top__mv-search-check-box {
width: 2rem;
height: 2rem;
}
}
.p-top__mv-search-check-box::after {
content: "";
position: absolute;
top: 45%;
left: 50%;
width: 0.6rem;
height: 1rem;
border-right: 0.2rem solid #fff;
border-bottom: 0.2rem solid #fff;
opacity: 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.p-top__mv-search-check-text {
margin-left: 0.8rem;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.2;
}
.p-top__mv-search-check-sup {
margin-left: -0.6rem;
color: #6D6D6D;
font-size: 1.1rem;
line-height: 1.2;
}
.p-top__mv-search-clear {
color: #6D6D6D;
font-size: 1.4rem;
font-weight: 500;
}
.p-top__mv-search-overlay {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.p-top__mv-search-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.p-top__property {
padding-block: 4rem 6rem;
}
@media screen and (max-width: 767px) {
.p-top__property {
padding-block: 3.2rem 4rem;
}
}
.p-top__property-head {
position: relative;
}
@media screen and (max-width: 767px) {
.p-top__property-head {
display: block;
}
}
.p-top__property-title-wrap {
display: flex;
align-items: baseline;
gap: 0.8rem;
}
@media screen and (max-width: 767px) {
.p-top__property-title-wrap {
display: block;
}
}
.p-top__property-count {
color: #6D6D6D;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-top__property-count {
margin-top: 1rem;
font-size: 1.6rem;
}
}
.p-top__property-count span {
font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
.p-top__property-count span {
font-size: 1.2rem;
}
}
.p-top__property-sort {
position: absolute;
right: 0;
top: 4.5rem;
}
@media screen and (max-width: 767px) {
.p-top__property-sort {
top: 2.6rem;
}
}
.p-top__property .p-top__property-sort-select-wrap {
position: relative;
}
.p-top__property .p-top__property-sort-select-wrap::after {
content: "";
position: absolute;
top: 50%;
right: 1.6rem;
width: 0.8rem;
height: 0.8rem;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
.p-top__property .p-top__property-sort-select {
height: 3.8rem;
padding-inline: 1.6rem 2.8rem;
border: 1px solid #E0E0DE;
border-radius: 0.4rem;
background: #fff;
font-size: 1.4rem;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-top__property .p-top__property-sort-select {
width: 16.6rem;
height: 3.2rem;
font-size: 1.2rem;
gap: 0.2rem;
min-width: 0;
padding-inline: 0.8rem;
}
}
.p-top__property-nav {
display: inline-flex;
align-items: center;
gap: 1.6rem;
margin-top: 1.6rem;
border-bottom: 0.1rem solid #E0E0DE;
}
@media screen and (max-width: 767px) {
.p-top__property-nav {
gap: 0.8rem;
margin-top: 1.2rem;
overflow-x: scroll;
overflow-y: hidden;
}
}
.p-top__property-nav-link {
position: relative;
padding: 1rem 0.8rem;
cursor: pointer;
color: #6D6D6D;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.028rem;
}
@media screen and (max-width: 767px) {
.p-top__property-nav-link {
padding: 0.8rem 0.6rem;
font-size: 1.3rem;
flex-shrink: 0;
}
}
.p-top__property-nav-link.is-active {
color: #333;
font-weight: 700;
}
.p-top__property-nav-link.is-active::after {
content: "";
position: absolute;
left: 0;
bottom: -0.1rem;
width: 100%;
height: 0.2rem;
border-radius: 99rem;
background-color: #333;
}
.p-top__property-list {
margin-top: 2.8rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.4rem;
}
@media screen and (max-width: 767px) {
.p-top__property-list {
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 1.8rem;
}
}
.p-top__property-empty {
text-align: center;
}
.p-top__property-empty-icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 6.4rem;
height: 6.4rem;
background-color: #F7F6F3;
border-radius: 50%;
}
.p-top__property-empty-icon img {
width: 2.8rem;
}
.p-top__property-empty-title {
margin-top: 1.6rem;
font-size: 1.8rem;
font-weight: 700;
}
.p-top__property-empty-desc {
margin-top: 1rem;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5;
}
.p-top__property-empty-btns {
margin-top: 2.4rem;
}
.p-top__property-empty-btns-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.p-top__property-empty-btns-list-item {
margin: 0 auto;
width: 26.1rem;
}
.p-top__property-empty-btns-list-item-reset .p-top__property-empty-btns-list-item-link {
border-color: #EF9500;
color: #EF9500;
}
.p-top__property-empty-btns-list-item-reset .p-top__property-empty-btns-list-item-link-text {
padding-left: 3rem;
letter-spacing: 0.02rem;
display: inline-block;
width: 21.5rem;
text-align-last: justify;
position: relative;
}
.p-top__property-empty-btns-list-item-reset .p-top__property-empty-btns-list-item-link-text:before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
background: url(../img/top/delete.svg) 50% 50%/contain no-repeat;
}
.p-top__property-empty-btns-list-item-line .p-top__property-empty-btns-list-item-link {
border-color: #06C755;
color: #06C755;
}
.p-top__property-empty-btns-list-item-line .p-top__property-empty-btns-list-item-link-text {
padding-left: 3rem;
display: inline-block;
width: 21.5rem;
text-align-last: justify;
position: relative;
}
.p-top__property-empty-btns-list-item-line .p-top__property-empty-btns-list-item-link-text:before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
background: url(../img/top/icon-line02.svg) 50% 50%/contain no-repeat;
}
.p-top__property-empty-btns-list-item-link {
display: block;
padding: 1.5rem 0;
border-width: 1px;
border-style: solid;
border-radius: 10rem;
font-size: 1.4rem;
font-weight: 700;
}
.p-top__area {
padding: 5.8rem 0;
background: #F7F6F3;
}
@media screen and (max-width: 767px) {
.p-top__area {
padding: 4.2rem 0;
}
}
.p-top__area-block {
margin-top: 2.6rem;
}
@media screen and (max-width: 767px) {
.p-top__area-block {
margin-top: 2rem;
}
}
.p-top__area-subtitle {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.072rem;
}
.p-top__area-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.4rem;
margin-top: 0.8rem;
}
@media screen and (max-width: 767px) {
.p-top__area-list {
grid-template-columns: 1fr;
gap: 0.8rem;
}
}
.p-top__area-item {
position: relative;
display: block;
overflow: hidden;
border-radius: 1.6rem;
}
.p-top__area-item:hover .p-top__area-item-img img {
transform: scale(1.1);
}
@media screen and (max-width: 767px) {
.p-top__area-item {
border-radius: 1.2rem;
}
}
.p-top__area-item-img {
position: relative;
aspect-ratio: 173/100;
}
.p-top__area-item-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
}
@media screen and (max-width: 767px) {
.p-top__area-item-img {
aspect-ratio: 335/193;
}
}
.p-top__area-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.p-top__area-item-text {
position: absolute;
left: 1.6rem;
bottom: 1.2rem;
color: #fff;
width: 31rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media screen and (max-width: 767px) {
.p-top__area-item-text {
left: 1.6rem;
bottom: 1.4rem;
}
}
.p-top__area-item-title {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.064rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.p-top__area-item-lead {
margin-top: 0.6rem;
white-space: nowrap;
font-size: 1.1rem;
letter-spacing: 0.022rem;
white-space: wrap;
}
.p-top__area-link-list {
display: flex;
flex-wrap: wrap;
gap: 1.2rem;
margin-top: 1.6rem;
}
.p-top__area-link {
font-size: 1.2rem;
text-decoration: underline;
}
.p-top__area-link-list + .p-top__area-subtitle {
margin-top: 3.4rem;
}
@media screen and (max-width: 767px) {
.p-top__area-link-list + .p-top__area-subtitle {
margin-top: 3.2rem;
}
}
.p-top__map {
padding-block: 2.4rem 2rem;
background-color: #F8F7F4;
}
.p-top__map-img {
margin-top: 2.6rem;
overflow: hidden;
border-radius: 2rem;
width: 60rem;
position: relative;
}
@media screen and (max-width: 767px) {
.p-top__map-img {
border-radius: 1.4rem;
margin-top: 2.4rem;
width: 100%;
}
}
.p-top__map-img picture {
display: block;
}
.p-top__map-img img {
width: 100%;
height: auto;
display: block;
}
.p-top__map-link {
position: absolute;
font-size: 1.4rem;
font-weight: 600;
padding-left: 1.6rem;
transition: border-bottom 0.3s ease;
}
.p-top__map-link::after {
content: "";
position: absolute;
left: 0;
bottom: -0.2rem;
width: 100%;
height: 0.1rem;
background-color: #333;
opacity: 1;
transition: opacity 0.3s ease;
}
.p-top__map-link:hover::after {
opacity: 0;
}
.p-top__map-link::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
background: url(../img/top/icon-map01.svg) no-repeat center center/cover;
width: 1.2rem;
height: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-top__map-link::before {
width: 1rem;
height: 1.2rem;
}
}
@media screen and (max-width: 767px) {
.p-top__map-link {
font-size: 1.2rem;
padding-left: 1.2rem;
}
}
.p-top__map-link--abu-dhabi {
left: 26.5%;
top: 40.2%;
}
@media screen and (max-width: 767px) {
.p-top__map-link--abu-dhabi {
left: 30%;
top: 42.4%;
}
}
.p-top__map-link--dubai {
left: 46.8%;
top: 18%;
}
@media screen and (max-width: 767px) {
.p-top__map-link--dubai {
left: 52.4%;
top: 26.6%;
}
}
.p-top__map-link--ras-al-khaimah {
right: 4%;
top: 11%;
}
@media screen and (max-width: 767px) {
.p-top__map-link--ras-al-khaimah {
right: 21%;
top: 9%;
}
}
.p-top__map-link--sharjah {
right: 6.9%;
top: 35%;
}
@media screen and (max-width: 767px) {
.p-top__map-link--sharjah {
right: 2.1%;
top: 60.6%;
}
}
.p-top__developer {
padding: 5.8rem 0;
background-color: #F8F7F4;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-top__developer {
padding: 4.4rem 0 3.6rem;
}
}
.p-top__developer-head {
position: relative;
}
.p-top__developer-slider-wrap {
position: relative;
margin-top: 2.4rem;
padding-left: 1rem;
}
@media screen and (max-width: 767px) {
.p-top__developer-slider-wrap {
margin-top: 2rem;
}
}
.p-top__developer-arrows {
position: absolute;
top: -6rem;
right: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-top__developer-arrows {
top: 3.7rem;
left: -1.2rem;
right: -1.2rem;
justify-content: space-between;
pointer-events: none;
}
}
.p-top__developer-arrow {
position: relative;
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-top__developer-arrow {
width: 2.4rem;
height: 2.4rem;
background-color: #6D6D6D;
pointer-events: auto;
}
}
.p-top__developer-arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1rem;
height: 1rem;
border-top: 0.2rem solid #333;
border-right: 0.2rem solid #333;
}
@media screen and (max-width: 767px) {
.p-top__developer-arrow::before {
width: 0.7rem;
height: 0.7rem;
border-top-color: #fff;
border-right-color: #fff;
}
}
.p-top__developer-arrow--prev::before {
transform: translate(-35%, -50%) rotate(-135deg);
}
.p-top__developer-arrow--next::before {
transform: translate(-65%, -50%) rotate(45deg);
}
.p-top__developer-list {
margin-inline: -0.8rem;
}
.p-top__developer-list.is-no-slider {
display: flex;
margin-right: 1.6rem;
}
.p-top__developer-list .slick-list {
overflow: hidden;
}
.p-top__developer-list .slick-track {
display: flex;
}
.p-top__developer-slide {
width: 23.2rem;
margin-right: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-top__developer-slide {
width: 15rem;
margin-right: 0.8rem;
flex-shrink: 0;
}
}
.p-top__developer-card {
display: block;
width: 100%;
color: #333;
}
.p-top__developer-card:hover .p-top__developer-card-img img {
transform: scale(1.1);
}
.p-top__developer-card-img {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 0.1rem solid #E0E0DE;
border-radius: 1rem;
background-color: #fff;
aspect-ratio: 116/77;
}
@media screen and (max-width: 767px) {
.p-top__developer-card-img {
aspect-ratio: 149/99;
}
}
.p-top__developer-card-img img {
transition: all 0.3s ease;
}
.p-top__developer-card-body {
margin-top: 1rem;
padding-inline: 0.8rem;
}
@media screen and (max-width: 767px) {
.p-top__developer-card-body {
margin-top: 0.8rem;
}
}
.p-top__developer-card-title {
font-size: 1.6rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.032rem;
}
.p-top__developer-card-text {
margin-top: 0.4rem;
color: #6D6D6D;
font-size: 1.3rem;
line-height: 1.3;
letter-spacing: 0.02em;
}
.p-top__developer-card-link {
display: inline-block;
margin-top: 1rem;
color: #333;
font-size: 1.3rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.026rem;
text-decoration: underline;
}
.p-top__pagination {
margin-top: 3.8rem;
}
@media screen and (max-width: 767px) {
.p-top__pagination {
margin-top: 2.2rem;
}
}
@keyframes fade-tilt {
0% {
opacity: 0;
-webkit-mask-image: linear-gradient(135deg, #000 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(135deg, #000 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-size: 250% 250%;
mask-size: 250% 250%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 130% 130%;
mask-position: 130% 130%;
}
100% {
opacity: 1;
-webkit-mask-image: linear-gradient(135deg, #000 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(135deg, #000 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-size: 250% 250%;
mask-size: 250% 250%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
}
.p-top__mv-slider {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.p-top__mv-slider .slick-active img {
animation: mv-slide-left 5s linear forwards;
}
@keyframes mv-slide-left {
0% {
transform: scale(1.05) translateX(2%);
}
100% {
transform: scale(1.05) translateX(-2%);
}
}
.p-property__fv-inner {
max-width: 128rem;
margin-inline: auto;
padding-inline: 5rem;
}
@media screen and (max-width: 767px) {
.p-property__fv-inner {
padding-inline: 0;
}
}
.p-property__fv-gallery {
display: flex;
gap: 1.4rem;
}
@media screen and (max-width: 767px) {
.p-property__fv-gallery {
display: block;
}
}
.p-property__fv-main {
position: relative;
overflow: hidden;
border-radius: 1rem;
width: 88.9rem;
}
@media screen and (max-width: 767px) {
.p-property__fv-main {
border-radius: 0;
width: 100%;
}
}
.p-property__fv-main .slick-arrow {
position: absolute;
top: 50%;
z-index: 5;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
transform: translateY(-50%);
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-property__fv-main .slick-arrow {
width: 3.2rem;
height: 3.2rem;
}
}
.p-property__fv-main .slick-prev {
left: 1rem;
}
@media screen and (max-width: 767px) {
.p-property__fv-main .slick-prev {
left: 0.4rem;
}
}
.p-property__fv-main .slick-next {
right: 1rem;
}
@media screen and (max-width: 767px) {
.p-property__fv-main .slick-next {
right: 0.4rem;
}
}
.p-property__fv-main .slick-prev::before,
.p-property__fv-main .slick-next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1rem;
height: 1rem;
border-top: 0.16rem solid #fff;
border-right: 0.16rem solid #fff;
}
.p-property__fv-main .slick-prev::before {
transform: translate(-35%, -50%) rotate(-135deg);
}
.p-property__fv-main .slick-next::before {
transform: translate(-65%, -50%) rotate(45deg);
}
.p-property__fv-main-list {
overflow: hidden;
}
.p-property__fv-main-item {
width: 100%;
}
@media screen and (max-width: 767px) {
.p-property__fv-main-item {
height: auto;
}
}
.p-property__fv-main-item img {
aspect-ratio: 889/549;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
@media screen and (min-width: 768px) {
.p-property__fv-main-item img {
border-radius: 2rem;
}
}
.p-property__fv-status {
position: absolute;
top: 1.6rem;
left: 2.2rem;
z-index: 2;
align-items: center;
gap: 1rem;
color: #fff;
display: flex;
gap: 0.6rem;
}
@media screen and (max-width: 767px) {
.p-property__fv-status {
top: 1.2rem;
left: 1.2rem;
gap: 0.8rem;
}
}
.p-property__fv-status--new::before {
content: "NEW";
display: flex;
align-items: center;
height: 1.7rem;
padding-inline: 1.8rem 1.2rem;
border-radius: 99rem;
background-color: #2CA7AD;
color: #fff;
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-property__fv-status--new::before {
font-size: 1rem;
height: 1.6rem;
}
}
.p-property__fv-status--new::after {
content: "";
position: absolute;
top: 0.6rem;
left: 0.8rem;
z-index: 4;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background-color: #fff;
}
@media screen and (max-width: 767px) {
.p-property__fv-status--new::after {
width: 0.4rem;
height: 0.4rem;
left: 0.8rem;
}
}
.p-property__fv-new {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 6.7rem;
height: 2.2rem;
padding-inline: 1rem;
border-radius: 999px;
background-color: #32c2c8;
color: #fff;
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
}
@media screen and (max-width: 767px) {
.p-property__fv-new {
min-width: 5.8rem;
height: 2rem;
font-size: 1.2rem;
}
}
.p-property__fv-new::before {
content: "";
width: 0.7rem;
height: 0.7rem;
margin-right: 0.4rem;
border-radius: 50%;
background-color: #fff;
}
.p-property__fv-date {
color: #fff;
font-size: 1.3rem;
line-height: 1;
}
@media screen and (max-width: 767px) {
.p-property__fv-date {
font-size: 1.2rem;
}
}
.p-property__fv-text {
position: absolute;
left: 2rem;
top: 48rem;
z-index: 2;
color: #fff;
}
@media screen and (max-width: 767px) {
.p-property__fv-text {
left: 1.2rem;
top: 18.7rem;
}
}
.p-property__fv-area {
color: #fff;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
font-size: 1.3rem;
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-property__fv-area {
font-size: 1.2rem;
}
}
.p-property__fv-title {
color: #fff;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
font-size: 2.4rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.096rem;
}
@media screen and (max-width: 767px) {
.p-property__fv-title {
font-size: 1.8rem;
width: 29.5rem;
line-height: 2.1;
}
}
.p-property__fv-photo {
position: absolute;
right: 2.4rem;
bottom: auto;
top: 50rem;
z-index: 3;
color: #fff;
border-radius: 0.4rem;
font-size: 1.1rem;
font-weight: 500;
padding: 0.6rem 0.9rem 0.6rem 2.4rem;
background: rgba(0, 0, 0, 0.7);
}
.p-property__fv-photo::after {
content: "";
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
background: url(../img/common/icon-camera01.svg) no-repeat center center/cover;
width: 1.2rem;
height: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-property__fv-photo {
right: 1.6rem;
top: 21rem;
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 0.9rem 0.6rem 2.4rem;
}
}
.p-property__fv-thumbs {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 0.8rem;
row-gap: 0.9rem;
align-content: start;
}
@media screen and (max-width: 767px) {
.p-property__fv-thumbs {
margin-top: 1rem;
grid-template-columns: repeat(4, 1fr);
gap: 0.8rem;
}
}
.p-property__fv-thumb {
overflow: hidden;
width: 13.5rem;
height: 8.4rem;
border-radius: 1rem;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-property__fv-thumb {
width: auto;
height: auto;
aspect-ratio: 1/1;
border-radius: 0.8rem;
}
}
.p-property__fv-thumb.is-current {
opacity: 1;
}
.p-property__fv-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.p-property__summary {
padding-block: 2.4rem 2rem;
}
@media screen and (max-width: 767px) {
.p-property__summary {
padding-block: 1.6rem 2rem;
}
}
.p-property__summary-inner {
max-width: 128rem;
margin-inline: auto;
padding-inline: 5rem;
}
@media screen and (max-width: 767px) {
.p-property__summary-inner {
padding-inline: 2rem;
}
}
.p-property__summary-price-list {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
@media screen and (max-width: 767px) {
.p-property__summary-price-list {
gap: 0.6rem;
}
}
.p-property__summary-price-item {
display: flex;
align-items: center;
gap: 1.4rem;
}
@media screen and (max-width: 767px) {
.p-property__summary-price-item {
gap: 1rem;
}
}
.p-property__summary-price-label {
display: flex;
align-items: center;
justify-content: center;
width: 9.2rem;
height: 2.8rem;
border-radius: 0.4rem;
background: #F7F6F3;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.024rem;
}
@media screen and (max-width: 767px) {
.p-property__summary-price-label {
width: 9.8rem;
height: 3.2rem;
font-size: 1.3rem;
}
}
.p-property__summary-price-value {
display: flex;
align-items: baseline;
color: #333;
font-weight: 700;
}
@media screen and (max-width: 767px) {
.p-property__summary-price-value {
flex-wrap: wrap;
}
}
.p-property__summary-price-main {
font-size: 2.4rem;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.p-property__summary-price-main {
font-size: 2.2rem;
}
}
.p-property__summary-price-small {
font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
.p-property__summary-price-small {
font-size: 1.3rem;
}
}
.p-property__summary-price-sub {
margin-left: 0.8rem;
color: #6D6D6D;
font-size: 1.3rem;
font-weight: 400;
}
@media screen and (max-width: 767px) {
.p-property__summary-price-sub {
display: block;
margin-left: 0;
}
}
.p-property__summary-developer {
font-size: 1.8rem;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.p-property__summary-developer {
font-size: 1.7rem;
}
}
.p-property__summary-meta {
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-property__summary-meta {
margin-top: 1.6rem;
}
}
.p-property__summary-meta-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.2rem 0;
}
.p-property__summary-meta-items {
padding-inline: 1rem;
display: inline-flex;
align-items: center;
gap: 1rem;
}
@media screen and (max-width: 767px) {
.p-property__summary-meta-items {
gap: 0.6rem;
padding-inline: 1rem 0rem;
}
.p-property__summary-meta-items:nth-child(n+3) {
padding-inline: 0.4rem 0;
}
}
.p-property__summary-meta-items:not(:last-child)::after {
content: "";
display: inline-block;
width: 0.1rem;
height: 1.8rem;
margin-left: 1rem;
background-color: #ddd;
}
@media screen and (max-width: 767px) {
.p-property__summary-meta-items:not(:last-child)::after {
height: 1.4rem;
margin-inline: 0.6rem;
gap: 0.8rem;
}
}
.p-property__summary-meta-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 1.3rem;
}
.p-property__summary-meta-item--type::before {
background-image: url("../img/common/icon-property06.svg");
content: "";
display: inline-block;
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.p-property__summary-meta-item--bed::before {
background-image: url("../img/common/icon-property03.svg");
content: "";
display: inline-block;
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.p-property__summary-meta-item--bath::before {
background-image: url("../img/common/icon-property04.svg");
content: "";
display: inline-block;
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.p-property__summary-meta-item--area::before {
background-image: url("../img/common/icon-property05.svg");
content: "";
display: inline-block;
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.p-property__container {
display: flex;
justify-content: space-between;
max-width: 108rem;
margin-inline: auto;
padding-block: 2rem 6.4rem;
position: relative;
}
.p-property__container::before, .p-property__container::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 4rem);
max-width: 108rem;
height: 0.1rem;
background-color: #e0e0de;
}
.p-property__container::before {
top: 0;
}
.p-property__container::after {
bottom: 0;
}
@media screen and (max-width: 767px) {
.p-property__container {
display: block;
padding-block: 2rem 4rem;
}
}
.p-property__main {
width: 76.7rem;
}
@media screen and (max-width: 767px) {
.p-property__main {
width: 100%;
}
}
.p-property__main-inner {
display: flex;
flex-direction: column;
row-gap: 2.4rem;
}
@media screen and (max-width: 767px) {
.p-property__main-inner {
row-gap: 2rem;
padding-inline: 2rem;
}
}
.p-property__section {
padding: 2.4rem;
border: 0.1rem solid #e0e0de;
border-radius: 1.6rem;
background: #f7f6f3;
}
@media screen and (max-width: 767px) {
.p-property__section {
padding: 2rem;
}
}
.p-property__section-title {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.072rem;
}
.p-property__section-body {
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-property__section-body {
margin-top: 1.6rem;
}
}
.p-property__overview {
display: flex;
flex-direction: column;
row-gap: 2.4rem;
}
@media screen and (max-width: 767px) {
.p-property__overview {
row-gap: 2rem;
}
}
.p-property__overview-item {
display: block;
}
.p-property__overview-title {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.06rem;
}
.p-property__overview-text {
margin-top: 0.8rem;
font-size: 1.4rem;
line-height: 2;
letter-spacing: 0.028rem;
}
@media screen and (max-width: 767px) {
.p-property__overview-text {
line-height: 2;
}
}
.p-property__amenity-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media screen and (max-width: 767px) {
.p-property__amenity-list {
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem 0.8rem;
}
}
.p-property__amenity-item {
display: flex;
align-items: center;
gap: 1rem;
}
@media screen and (max-width: 767px) {
.p-property__amenity-item {
gap: 0.6rem;
}
}
.p-property__amenity-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.p-property__amenity-icon {
width: 3.6rem;
height: 3.6rem;
}
}
.p-property__amenity-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-property__amenity-text {
font-size: 1.5rem;
line-height: 1.2;
letter-spacing: 0.03rem;
}
@media screen and (max-width: 767px) {
.p-property__amenity-text {
font-size: 1.4rem;
}
}
.p-property__developer {
display: flex;
gap: 2rem;
}
@media screen and (max-width: 767px) {
.p-property__developer {
flex-direction: column;
gap: 1rem;
}
}
.p-property__developer-logo {
display: flex;
align-items: center;
justify-content: center;
width: 23.2rem;
height: 13.5rem;
flex-shrink: 0;
padding-inline: 1.6rem;
border: 0.1rem solid #e0e0de;
border-radius: 1rem;
background: #fff;
}
@media screen and (max-width: 767px) {
.p-property__developer-logo {
width: 100%;
max-width: 23.2rem;
margin-inline: auto;
}
}
.p-property__developer-logo-img {
margin: 0 auto;
width: 15rem;
height: auto;
}
.p-property__developer-body {
flex: 1;
}
.p-property__developer-name {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.06rem;
}
.p-property__developer-text {
margin-top: 1.2rem;
font-size: 1.4rem;
line-height: 1.5;
letter-spacing: 0.028rem;
}
@media screen and (max-width: 767px) {
.p-property__developer-text {
margin-top: 0.6rem;
}
}
.p-property__unit {
display: flex;
flex-direction: column;
row-gap: 3.2rem;
}
@media screen and (max-width: 767px) {
.p-property__unit {
row-gap: 2.4rem;
}
}
.p-property__unit-group {
display: flex;
flex-direction: column;
}
.p-property__unit-title {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.06rem;
}
.p-property__unit-title:not(:first-of-type) {
margin-top: 2rem;
}
.p-property__unit-table-wrap {
margin-top: 1.4rem;
overflow: hidden;
border: 0.1rem solid #e0e0de;
border-radius: 1rem;
background: #fff;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-wrap {
margin-top: 1.2rem;
overflow-x: auto;
}
}
.p-property__unit-table {
width: 100%;
background: #fff;
}
.p-property__unit-table-head {
border-bottom: 0.1rem solid #E0E0DE;
background: #F7F7F7;
padding: 1.15rem 2.4rem;
display: flex;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-head {
gap: 2.6rem;
padding: 1.15rem 2.4rem 1.15rem 1.2rem;
}
}
.p-property__unit-table-head-title {
font-size: 1.3rem;
font-weight: 500;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-head-title {
font-size: 1.2rem;
}
}
.p-property__unit-table-head-title--room {
width: 10rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-head-title--room {
width: 5rem;
}
}
.p-property__unit-table-head-title--price {
width: 39.1rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-head-title--price {
width: 6.7rem;
}
}
.p-property__unit-table-head-title--area {
width: 10rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-head-title--area {
width: 7.2rem;
}
}
.p-property__unit-table-body {
text-align: center;
}
.p-property__unit-table-body > .p-property__unit-table-row:last-child, .p-property__unit-table-body > .p-property__unit-table-row:has(+ .p-property__unit-accordion:last-child):not(.is-open) {
border-bottom: 0;
}
.p-property__unit-table-body > .p-property__unit-accordion:last-child {
border-bottom: 0;
}
.p-property__unit-table-row {
border-bottom: 0.1rem solid #e0e0de;
}
.p-property__unit-table-row--trigger {
display: flex;
align-items: center;
cursor: pointer;
padding: 0.8rem 2.4rem;
gap: 1.6rem;
min-height: 7.1rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-row--trigger {
gap: 0;
padding: 1.4rem 1rem;
min-height: 7.4rem;
}
}
.p-property__unit-table-row--trigger.is-open {
border-bottom: 0.1rem solid #e0e0de;
}
.p-property__unit-table-row--trigger:not(.js-unit-accordion-trigger) {
cursor: default;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-data {
font-size: 1.4rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.2rem;
}
}
.p-property__unit-table-data--small {
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-data--small {
font-size: 1rem;
}
}
.p-property__unit-table-data--room {
width: 10rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-data--room {
width: 5rem;
display: flex;
justify-content: center;
}
}
.p-property__unit-table-data--price {
width: 36rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-data--price {
width: 12rem;
}
}
.p-property__unit-table-data--area {
width: 10rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-data--area {
width: 7rem;
display: flex;
justify-content: center;
}
}
.p-property__unit-table-data--button {
width: 3.2rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-data--button {
width: 2.4rem;
margin-left: 1rem;
}
}
.p-property__unit-table-area--small {
font-size: 1.2rem;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.p-property__unit-table-area--small {
font-size: 1rem;
}
}
.p-property__unit-price {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.p-property__unit-price {
font-size: 1.4rem;
display: flex;
justify-content: center;
}
}
.p-property__unit-price--small {
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-price--small {
font-size: 1rem;
}
}
.p-property__unit-price-sub {
margin-left: 0.4rem;
color: #6d6d6d;
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-property__unit-price-sub {
font-size: 1rem;
margin-left: 0;
margin-top: -0.6rem;
}
}
.p-property__unit-more {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 5.4rem;
height: 5.4rem;
border: 0;
border-radius: 50%;
background: #f7f6f3;
cursor: pointer;
transition: opacity 0.3s ease;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.p-property__unit-more {
width: 4rem;
height: 4rem;
}
}
.p-property__unit-more:hover {
opacity: 0.7;
}
.p-property__unit-more::before {
content: "";
width: 0.7rem;
height: 0.7rem;
border-top: 0.2rem solid #333;
border-right: 0.2rem solid #333;
transform: rotate(135deg);
}
.p-property__unit-table-row.is-open .p-property__unit-more::before {
transform: rotate(-45deg);
}
.p-property__unit-accordion {
display: none;
overflow: hidden;
border-bottom: 0.1rem solid #e0e0de;
}
.p-property__unit-plan {
display: flex;
justify-content: center;
padding: 2.4rem;
background: #fff;
}
@media screen and (max-width: 767px) {
.p-property__unit-plan {
padding: 1rem;
}
}
.p-property__unit-plan-img {
width: 67rem;
height: auto;
display: block;
}
@media screen and (max-width: 767px) {
.p-property__unit-plan-img {
width: 100%;
}
}
.p-property__payment {
display: flex;
justify-content: space-between;
gap: 2.4rem;
}
@media screen and (max-width: 767px) {
.p-property__payment {
gap: 1.6rem;
flex-direction: column;
}
}
.p-property__payment-left {
width: 33.5rem;
}
@media screen and (max-width: 767px) {
.p-property__payment-left {
width: 100%;
}
}
.p-property__payment-right {
width: 35.8rem;
}
@media screen and (max-width: 767px) {
.p-property__payment-right {
width: 100%;
}
}
.p-property__payment-list {
border: 0.1rem solid #e0e0de;
border-radius: 1rem;
background: #fff;
}
.p-property__payment-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 2.4rem;
}
.p-property__payment-item:not(:last-child) {
border-bottom: 0.1rem solid #e0e0de;
}
@media screen and (max-width: 767px) {
.p-property__payment-item {
padding: 1.25rem 1.6rem;
}
}
.p-property__payment-label {
font-size: 1.3rem;
font-weight: 400;
}
.p-property__payment-value {
font-size: 1.4rem;
font-weight: 500;
}
.p-property__payment-text {
font-size: 1.4rem;
line-height: 1.5;
}
.p-property__payment-text:not(:first-child) {
margin-top: 3.2rem;
}
@media screen and (max-width: 767px) {
.p-property__payment-text:not(:first-child) {
margin-top: 2.4rem;
}
}
.p-property__payment-text-box {
margin-top: 4rem;
display: flex;
flex-direction: column;
color: #6D6D6D;
font-size: 1.1rem;
line-height: 1.8;
gap: 0.4rem;
}
@media screen and (max-width: 767px) {
.p-property__payment-text-box {
margin-top: 1rem;
}
}
.p-property__access-contents {
margin-top: 1rem;
}
.p-property__access-content {
display: flex;
padding-block: 1rem;
}
.p-property__access-content:not(:first-of-type) {
border-top: 0.1rem solid #E0E0DE;
}
@media screen and (max-width: 767px) {
.p-property__access-content {
flex-direction: column;
gap: 0.2rem;
}
}
.p-property__access-title {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.3;
width: 11rem;
flex-shrink: 0;
letter-spacing: 0.028rem;
}
.p-property__access-lead {
font-size: 1.4rem;
line-height: 1.3;
letter-spacing: 0.028rem;
}
.p-property__access-map {
width: 100%;
height: 38rem;
margin-top: 1rem;
}
@media screen and (max-width: 767px) {
.p-property__access-map {
margin-top: 0.6rem;
}
}
.p-property__access-map iframe {
width: 100%;
height: 100%;
display: block;
border-radius: 2.4rem;
}
@media screen and (max-width: 767px) {
.p-property__access-map {
height: 30rem;
border-radius: 2rem;
}
}
.p-property__sidebar {
width: 29.7rem;
}
.p-property__sidebar-inner {
padding: 1.8rem 1.8rem 1.8rem 2.7rem;
border: 0.1rem solid #e0e0de;
border-radius: 1.6rem;
background: #fff;
position: sticky;
top: 8rem;
}
.p-property__sidebar-info {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.p-property__sidebar-info-item {
display: flex;
align-items: flex-start;
gap: 0.8rem;
}
.p-property__sidebar-info-label {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0.8rem 1.65rem;
border-radius: 0.4rem;
background: #f7f6f3;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.024rem;
white-space: nowrap;
width: 8.2rem;
}
.p-property__sidebar-info-value {
font-weight: 600;
line-height: 1;
}
.p-property__sidebar-info-main {
font-size: 2.4rem;
letter-spacing: 0.02rem;
}
.p-property__sidebar-info-small {
font-size: 1.4rem;
}
.p-property__sidebar-info-sub {
display: block;
margin-top: 0.6rem;
color: #6d6d6d;
font-size: 1.3rem;
line-height: 1.2;
}
.p-property__sidebar-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
padding-inline: 1.2rem 2rem;
}
.p-property__sidebar-button {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.8rem;
width: 100%;
min-height: 4.4rem;
padding-inline: 2.6rem 3.6rem;
border-radius: 99rem;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
.p-property__sidebar-button:hover {
opacity: 0.75;
}
}
.p-property__sidebar-button--tel {
border: 0.2rem solid #6d6d6d;
color: #333;
letter-spacing: 0.08em;
}
.p-property__sidebar-button--mail {
background-color: #333;
color: #fff;
}
.p-property__sidebar-button--line {
background-color: #06c755;
color: #fff;
}
.p-property__sidebar-button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-property__sidebar-button--tel .p-property__sidebar-button-icon {
width: 1.8rem;
height: 1.8rem;
background: url("../img/top/icon-phone01.svg") no-repeat center center/contain;
}
.p-property__sidebar-button--mail .p-property__sidebar-button-icon {
width: 1.8rem;
height: 1.4rem;
background: url("../img/top/icon-mail01.svg") no-repeat center center/contain;
}
.p-property__sidebar-button--line .p-property__sidebar-button-icon {
width: 2rem;
height: 2rem;
background: url("../img/top/icon-line01.svg") no-repeat center center/contain;
}
.p-property__sidebar-button-text {
display: inline-block;
}
.p-property__sidebar-button-note {
display: block;
font-size: 1.2rem;
line-height: 1.2;
}
.p-property__sidebar-company {
margin-top: 2rem;
padding-top: 1.6rem;
border-top: 0.1rem solid #e0e0de;
}
.p-property__sidebar-company-logo {
width: 100%;
height: auto;
}
.c-property-card {
height: 100%;
}
.c-property-card__link {
display: flex;
flex-direction: column;
height: 100%;
}
.c-property-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.6rem 2rem 1.3rem;
}
@media screen and (max-width: 767px) {
.c-property-card__body {
padding: 1rem 1.6rem 1rem;
}
}
.c-property-card__body-price {
display: grid;
gap: 1.2rem;
}
@media screen and (max-width: 767px) {
.c-property-card__body-price {
gap: 0.6rem;
}
}
.c-property-card__body-price--recommend {
gap: 0.6rem;
padding-left: 0.6rem;
}
@media screen and (max-width: 767px) {
.c-property-card__body-price--recommend {
gap: 0.2rem;
}
}
.c-property-card__body-price-item {
display: flex;
align-items: center;
gap: 1rem;
}
@media screen and (max-width: 767px) {
.c-property-card__body-price-item {
gap: 0.6rem;
}
.c-property-card__body-price-item:nth-of-type(n+2) .c-property-card__body-price-label {
padding: 0.8rem;
}
}
.c-property-card__body-price-label {
min-width: 8.2rem;
padding-block: 0.8rem;
background: #F7F6F3;
border-radius: 0.4rem;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.02rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.c-property-card__body-price-label {
min-width: 8rem;
padding: 1.2rem 0.8rem;
}
}
.c-property-card__body-price-value {
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
.c-property-card__body-price-main {
font-size: 2.4rem;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.c-property-card__body-price-main {
font-size: 2rem;
}
}
.c-property-card__body-price-main--recommend {
font-size: 2.2rem;
}
.c-property-card__body-price-small {
font-size: 1.4rem;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.c-property-card__body-price-small {
font-size: 1.3rem;
}
}
@media screen and (max-width: 767px) {
.c-property-card__body-price-unit {
font-size: 1.5rem;
}
}
.c-property-card__body-price-sub {
margin-left: 0.8rem;
color: #6D6D6D;
font-size: 1.3rem;
}
@media screen and (max-width: 767px) {
.c-property-card__body-price-sub {
margin-left: -0.4rem;
}
}
.c-property-card__body-price-sub--recommend {
margin-left: 0;
}
.c-property-card__body-meta {
display: flex;
flex-direction: column;
flex: 1;
margin-top: 1rem;
padding-top: 1.2rem;
border-top: 1px solid #E0E0DE;
}
@media screen and (max-width: 767px) {
.c-property-card__body-meta {
margin-top: 0.6rem;
padding-top: 1rem;
padding-left: 0.6rem;
}
}
.c-property-card__body-meta-top {
margin-bottom: 0.5rem;
align-content: flex-start;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1.6rem;
}
@media screen and (max-width: 767px) {
.c-property-card__body-meta-top {
margin-bottom: 0.2rem;
column-gap: 1.6rem;
row-gap: 0.2rem;
}
}
.c-property-card__body-meta-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 1.3rem;
line-height: 1.5;
letter-spacing: 0.026rem;
}
.c-property-card__body-meta-item::before {
content: "";
display: block;
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.c-property-card__body-meta-item--type::before {
background-image: url("../img/common/icon-property06.svg");
}
.c-property-card__body-meta-item--bed::before {
background-image: url("../img/common/icon-property03.svg");
}
.c-property-card__body-meta-item--bath::before {
background-image: url("../img/common/icon-property04.svg");
}
.c-property-card__body-meta-item--area::before {
background-image: url("../img/common/icon-property05.svg");
}
.c-property-card__body-meta-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
color: #6D6D6D;
font-size: 1.2rem;
line-height: 1.37;
letter-spacing: 0.024rem;
}
@media screen and (max-width: 767px) {
.c-property-card__body-meta-bottom {
align-items: flex-end;
gap: 1rem;
}
}
.c-property-card__body-meta-developer, .c-property-card__body-meta-date {
color: #6D6D6D;
font-size: 1.2rem;
line-height: 1.37;
}
@media screen and (max-width: 767px) {
.c-property-card__body-meta-schedule, .c-property-card__body-meta-date {
font-size: 1.2rem;
}
}
.c-property-card__body-meta-date {
flex-shrink: 0;
}
.p-contact-inner {
padding-top: 3.2rem;
padding-bottom: 6.4rem;
width: 64.7rem;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.p-contact-inner {
padding: 3.2rem 1.6rem;
padding-right: 1.6rem;
width: 37.5rem;
}
}
.p-contact-container {
width: 64.7rem;
}
@media screen and (max-width: 767px) {
.p-contact-container {
width: auto;
}
}
.p-contact-title {
font-size: 2.4rem;
font-weight: bold;
}
@media screen and (max-width: 767px) {
.p-contact-title {
font-size: 2rem;
}
}
.p-contact-content {
padding: 0 4.3rem;
text-align: center;
}
.p-contact-content-description {
padding-top: 2.4rem;
}
@media screen and (max-width: 767px) {
.p-contact-content-description {
padding-top: 2rem;
}
}
.p-contact-content-description-text {
font-size: 1.4rem;
line-height: 2;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact-content-description-text {
font-size: 1.4rem;
}
}
.p-contact-form {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.p-contact-form {
margin-top: 3.2rem;
}
}
.p-contact-form-content {
height: auto;
display: flex;
margin-top: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-contact-form-content {
height: 7.3rem;
height: auto;
display: block;
}
}
.p-contact-form-content:nth-child(4) {
height: auto;
}
.p-contact-form-required {
width: 4.3rem;
height: 2.1rem;
border-radius: 0.2rem;
background-color: #d84851;
color: #fff;
font-size: 1.3rem;
font-weight: 500;
align-content: center;
}
.p-contact-form-error {
margin: 0.5rem 0 0 4rem;
font-size: 1.2rem;
color: #d84851;
}
.p-contact-form-optional {
width: 4.3rem;
height: 2.1rem;
border-radius: 0.2rem;
background-color: #C5C5C5;
color: #fff;
font-size: 1.3rem;
font-weight: 500;
align-content: center;
}
.p-contact-form-field {
width: calc(100% - 22.7rem);
}
@media screen and (max-width: 767px) {
.p-contact-form-field {
width: 100%;
}
}
.p-contact-form-input {
border: solid #E0E0DE 0.1rem;
width: 100%;
height: 4.8rem;
padding: 1.2rem auto;
padding-left: 1rem;
font-size: 1.5rem;
margin-left: 4rem;
border-radius: 0.4rem;
}
.p-contact-form-input::placeholder {
color: #C5C5C5;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-contact-form-input {
width: 100%;
margin-left: 0;
}
}
.p-contact-form-textarea {
resize: vertical;
width: 42rem;
border-radius: 0.4rem;
padding: 0 0.8rem;
padding-top: 1rem;
line-height: 1.5;
}
.p-contact-form-textarea::placeholder {
line-height: 1.5;
}
.p-contact-form-label {
display: flex;
justify-content: space-between;
width: 18.7rem;
text-align: center;
align-items: center;
}
@media screen and (max-width: 767px) {
.p-contact-form-label {
justify-content: start;
width: auto;
gap: 0.8rem;
margin-bottom: 0.45rem;
}
}
.p-contact-form-label-name {
font-size: 1.5rem;
font-weight: 500;
}
.p-contact-form-label-checkbox:hover {
cursor: pointer;
opacity: 0.7;
}
.p-contact-form-item {
flex-direction: column;
font-size: 1.5rem;
margin-left: 4rem;
}
@media screen and (max-width: 767px) {
.p-contact-form-item {
margin-left: 0;
}
}
.p-contact-form-item-each {
appearance: none;
width: 2.2rem;
height: 2.2rem;
border: 1px solid #E0E0DE;
background: #fff;
border-radius: 0.2rem;
cursor: pointer;
margin-bottom: 0.7rem;
margin-right: 0.8rem;
padding: 0.3rem;
padding-top: 0.4rem;
padding-left: auto;
}
.p-contact-form-item-each:checked {
border-color: #E0E0DE;
}
.p-contact-form-item-each:checked::after {
content: "";
display: block;
background-image: url("../img/contact/check.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 1.5rem;
height: 1.2rem;
}
.p-contact-form-message {
font-size: 1.5rem;
line-height: 1.5;
}
.p-contact-form textarea {
border: solid #E0E0DE 0.1rem;
margin-left: 4rem;
}
.p-contact-form textarea::placeholder {
color: #C5C5C5;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-contact-form textarea {
margin-left: 0;
width: 100%;
font-size: 1.5rem;
line-height: 1.5rem;
height: 16rem;
}
}
.p-contact-bottom {
text-align: center;
margin-top: 2.4rem;
}
.p-contact-bottom-checkbox {
appearance: none;
width: 2.2rem;
height: 2.2rem;
border: 1px solid #E0E0DE;
background: #fff;
border-radius: 0.2rem;
cursor: pointer;
margin-bottom: 0.7rem;
margin-right: 0.8rem;
padding: 0.3rem;
padding-top: 0.4rem;
padding-left: auto;
}
.p-contact-bottom-checkbox-privacypolicy {
text-decoration: underline;
line-height: 1.7;
}
.p-contact-bottom-checkbox-privacypolicy:hover {
cursor: pointer;
opacity: 0.7;
}
.p-contact-bottom-checkbox-text {
font-size: 1.4rem;
line-height: 1.7;
padding-bottom: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-contact-bottom-checkbox-text {
padding-bottom: 1.2rem;
}
}
.p-contact-bottom-checkbox:checked {
border-color: #E0E0DE;
}
.p-contact-bottom-checkbox:checked::after {
content: "";
display: block;
background-image: url("../img/contact/check.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 1.5rem;
height: 1.2rem;
}
.p-contact-bottom-button {
font-size: 1.6rem;
font-weight: bold;
color: #fff;
width: 24rem;
height: 4.8rem;
border-radius: 99rem;
background-color: #EF9500;
padding: 1.5rem 8.8rem;
}
.p-contact-bottom-button:hover {
cursor: pointer;
opacity: 0.7;
}
@media screen and (max-width: 767px) {
.p-contact-bottom-button {
margin: 1.2rem auto;
}
}
.p-contact-bottom-button-cantainer {
padding: 1.6rem 0;
}
.p-contact-bottom-description {
font-size: 1.2rem;
line-height: 1.5;
margin-top: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-contact-bottom-description {
text-align: left;
font-size: 1rem;
color: #333;
width: 26.5rem;
margin: 0 auto;
margin-top: 1.6rem;
}
}
@media screen and (max-width: 767px) {
.indent {
display: inline-block;
text-indent: 1em;
}
}
.p-thanks-pc {
display: inline-block;
}
@media screen and (max-width: 767px) {
.p-thanks-pc {
display: none;
}
}
.p-thanks-sp {
display: none;
}
@media screen and (max-width: 767px) {
.p-thanks-sp {
display: block;
}
}
.p-thanks-container {
width: 108rem;
}
.p-thanks-message {
padding: 3.2rem 39.5rem;
padding-bottom: 0;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-thanks-message {
padding: 3.2rem 2rem;
padding-bottom: 0;
}
}
.p-thanks-message-h1 {
font-size: 2.4rem;
font-weight: bold;
padding-bottom: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-thanks-message-h1 {
font-size: 2rem;
line-height: 1.2;
padding-bottom: 0;
}
}
.p-thanks-message-text {
font-size: 1.4rem;
line-height: 2;
padding-top: 1.6rem;
}
.p-thanks-message-text-span {
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-thanks-message-text {
padding-top: 1.2rem;
}
.p-thanks-message-text:nth-child(2) {
margin-top: 1.2rem;
}
}
.p-thanks-message-text:first-child {
padding-top: 0;
}
.p-thanks-next-step-cta {
margin: 0 auto;
text-align: center;
}
.p-thanks-next-step-title {
font-size: 2.4rem;
font-weight: bold;
}
@media screen and (max-width: 767px) {
.p-thanks-next-step-title {
font-size: 2rem;
line-height: 1.2;
}
}
.p-thanks-next-step-text {
font-size: 1.4rem;
padding-top: 0.4rem;
line-height: 2;
}
@media screen and (max-width: 767px) {
.p-thanks-next-step-text {
font-size: 1.4rem;
line-height: 2;
}
}
.p-thanks-steps {
padding: 0 10rem;
margin-top: 6rem;
margin-bottom: 6.4rem;
}
@media screen and (max-width: 767px) {
.p-thanks-steps {
padding: 0 2rem;
}
}
.p-thanks-steps-title {
font-size: 1.8rem;
font-weight: bold;
padding-bottom: 0.8rem;
}
.p-thanks-steps-title-one, .p-thanks-steps-title-two, .p-thanks-steps-title-three {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
width: 3.2rem;
height: 3.2rem;
margin-right: 0.8rem;
border-radius: 50%;
color: #fff;
}
@media screen and (max-width: 767px) {
.p-thanks-steps-title-one, .p-thanks-steps-title-two, .p-thanks-steps-title-three {
font-size: 1.8rem;
width: 2.8rem;
height: 2.8rem;
margin-right: 0.4rem;
}
}
.p-thanks-steps-title-one {
background-color: #06C755;
}
.p-thanks-steps-title-two {
background-color: #2CA7AD;
}
.p-thanks-steps-title-three {
background-color: #EF9500;
}
.p-thanks-steps-description {
text-align: center;
}
.p-thanks-steps-description-text {
font-size: 1.6rem;
line-height: 1.5;
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-thanks-steps-description-text {
font-size: 1.4rem;
}
}
.p-thanks-steps-button {
display: block;
font-size: 1.4rem;
font-weight: bold;
color: #EF9500;
width: 20rem;
text-align: center;
border: solid 0.1rem #EF9500;
padding: 1.6rem 0;
border-radius: 99rem;
margin: 0 auto;
margin-top: 2.9rem;
margin-bottom: 3.2rem;
}
.p-thanks-steps-button:hover {
cursor: pointer;
opacity: 0.7;
}
@media screen and (max-width: 767px) {
.p-thanks-steps-button {
margin-top: 3.2rem;
}
}
.p-thanks-step-one {
padding: 0 34rem;
padding-top: 3.2rem;
}
@media screen and (max-width: 767px) {
.p-thanks-step-one {
padding: 0 2rem;
padding-top: 2.4rem;
}
}
.p-thanks-step-one-hidden {
display: none;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-thanks-step-one-hidden {
display: block;
}
}
.p-thanks-step-one-list {
display: block;
width: 33.5rem;
background-color: #F7F6F3;
padding: 2rem 3.2rem;
border-radius: 1.6rem;
margin: 0 auto;
margin-top: 1.6rem;
align-content: center;
}
@media screen and (max-width: 767px) {
.p-thanks-step-one-list {
width: auto;
padding: 1.6rem 0;
padding-left: 3.2rem;
margin-top: 2rem;
}
}
.p-thanks-step-one-list-item {
font-size: 1.4rem;
line-height: 1.5;
padding-bottom: 0.6rem;
display: flex;
align-items: center;
}
.p-thanks-step-one-list-item:not(:last-child) {
padding-bottom: 0.6rem;
}
.p-thanks-step-one-list-item::before {
content: "";
display: block;
background-image: url("../img/thanks/Frame-green.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 0.6rem;
height: 0.6rem;
margin-right: 0.75rem;
}
.p-thanks-step-one-list-bottom {
font-size: 1.2rem;
text-align: center;
margin-top: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-thanks-step-one-list-bottom {
margin-top: 0.8rem;
}
}
.p-thanks-step-one-list-bottom::before {
content: "";
display: block;
width: 14rem;
height: 14rem;
background-image: url("../img/common/cta-line01.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
margin-bottom: 0.8rem;
}
@media screen and (max-width: 767px) {
.p-thanks-step-one-list-bottom::before {
display: none;
}
}
.p-thanks-step-two {
width: 72rem;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.p-thanks-step-two {
width: 33.5rem;
margin: 0 auto;
}
}
.p-thanks-step-two-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-thanks-step-two-cards {
display: flex;
flex-direction: column;
gap: 0.8rem;
padding: 0 0.75rem;
}
}
.p-thanks-step-two-cards-content {
border: solid 0.1rem #E0E0DE;
border-radius: 1.2rem;
padding: 2rem 2.4rem;
}
.p-thanks-step-two-cards-content:hover {
cursor: pointer;
opacity: 0.7;
}
@media screen and (max-width: 767px) {
.p-thanks-step-two-cards-content {
padding: 1.2rem 1.6rem;
}
}
.p-thanks-step-two-cards-content-heading {
display: flex;
text-align: center;
}
.p-thanks-step-two-cards-content-heading-item {
display: flex;
align-items: center;
font-size: 1.5rem;
}
.p-thanks-step-two-cards-content-heading-item::before {
content: "";
width: 2rem;
height: 0.1rem;
background-color: #E0E0DE;
margin: 0 0.8rem;
}
.p-thanks-step-two-cards-content-heading-note {
font-size: 1.3rem;
font-weight: bold;
margin-left: 0.4rem;
align-content: center;
}
.p-thanks-step-two-cards-content-heading-img {
width: 2.8rem;
height: 2.8rem;
}
.p-thanks-step-two-cards-content-text {
font-size: 1.4rem;
color: #6d6d6d;
line-height: 1.5;
margin-top: 1rem;
}
.p-thanks-step-two-content-title {
font-size: 1.4rem;
font-weight: 500;
margin-top: 1.6rem;
margin-bottom: 0.8rem;
}
@media screen and (max-width: 767px) {
.p-thanks-step-two-content-title {
margin-top: 2rem;
padding: 0 0.75rem;
}
}
.p-thanks-step-three {
padding: 2.3rem;
padding-top: 0;
}
@media screen and (max-width: 767px) {
.p-thanks-step-three {
padding: 0;
}
}
.p-thanks-step-three-list {
display: flex;
flex-direction: column;
background-color: #F7F6F3;
width: 62rem;
padding: 2rem 3.2rem;
padding-left: 4rem;
border-radius: 1.6rem;
margin: 0 auto;
margin-top: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-thanks-step-three-list {
padding: 1.6rem;
width: auto;
margin-top: 0.8rem;
}
.p-thanks-step-three-list:nth-child(2) {
margin-top: 2rem;
}
}
.p-thanks-step-three-list-title {
font-size: 1.6rem;
line-height: 1.5;
font-weight: 500;
padding-bottom: 0.8rem;
}
.p-thanks-step-three-list-ul-item {
font-size: 1.4rem;
line-height: 1.5;
text-decoration: underline;
margin-top: 0.6rem;
padding-bottom: 0.6rem;
display: flex;
align-items: center;
}
.p-thanks-step-three-list-ul-item:not(:last-child) {
padding-bottom: 0.6rem;
}
.p-thanks-step-three-list-ul-item::before {
content: "";
display: block;
background-image: url("../img/thanks/Frame-orange.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 0.6rem;
height: 0.6rem;
margin-right: 0.75rem;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.p-thanks-step-three-list-ul-item::before {
margin-bottom: 2.3rem;
}
}
.p-thanks-step-three-list-ul-item:hover {
cursor: pointer;
opacity: 0.7;
}
.p-thanks-step-three-list-more {
padding-top: 1rem;
font-size: 1.4rem;
line-height: 1.5;
text-decoration: underline;
margin-left: auto;
margin-top: auto;
color: #000;
}
.p-thanks-step-three-list-more:hover {
cursor: pointer;
opacity: 0.7;
}
.p-thanks-step-line {
width: 100%;
height: 0.1rem;
background-color: #E0E0E0;
margin: 4.8rem 0;
}
@media screen and (max-width: 767px) {
.p-thanks-step-line {
margin: 3.2rem 0 3.5rem 0;
}
}
.c-cta__line {
width: 28rem;
}
@media screen and (max-width: 767px) {
.c-cta__line {
margin-top: 2rem;
}
}
.c-cta__line-text {
font-size: 1.4rem;
}
.p-about-top {
height: 3.2rem;
font-size: 1.2rem;
color: #6D6D6D;
padding-left: 5.2rem;
align-content: center;
}
@media screen and (max-width: 767px) {
.p-about-top {
height: 2.4rem;
font-size: 1.1rem;
padding-left: 2.2rem;
}
}
.p-about-hero {
text-align: center;
padding: 3.2rem 23rem 6rem 23rem;
}
@media screen and (max-width: 767px) {
.p-about-hero {
padding: 3.2rem 2rem;
}
}
.p-about-hero-title {
font-size: 2.4rem;
font-weight: bold;
line-height: 1.2;
padding-bottom: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-about-hero-title {
font-size: 2rem;
}
}
.p-about-hero-title-lead {
font-size: 1.6rem;
font-weight: 500;
line-height: 1.5;
padding-bottom: 3.2rem;
}
@media screen and (max-width: 767px) {
.p-about-hero-title-lead {
font-size: 1.5rem;
padding-bottom: 2.4rem;
}
}
.p-about-hero-title-lead-space {
display: none;
}
@media screen and (max-width: 767px) {
.p-about-hero-title-lead-space {
display: block;
margin-top: 1.2rem;
}
}
.p-about-hero-img {
display: block;
background-image: url("../img/about/about-img.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 71.6rem;
height: 38rem;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.p-about-hero-img {
width: 37.5rem;
height: 20rem;
}
}
.p-about-hero-text {
font-size: 1.4rem;
line-height: 2;
margin-top: 2.2rem;
}
@media screen and (max-width: 767px) {
.p-about-hero-text {
margin-top: 2rem;
}
}
.p-about-3points {
background-color: #F7F6F3;
padding: 5.2rem 10rem 6rem 10rem;
}
@media screen and (max-width: 767px) {
.p-about-3points {
padding: 4rem 2rem;
}
}
.p-about-3points-heading {
text-align: center;
font-size: 2.4rem;
font-weight: bold;
line-height: 1.2;
padding-bottom: 3.2rem;
}
@media screen and (max-width: 767px) {
.p-about-3points-heading {
font-size: 2rem;
padding-bottom: 2.4rem;
}
}
.p-about-3points-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
}
@media screen and (max-width: 767px) {
.p-about-3points-list {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
}
.p-about-3points-list-item {
background-color: #fff;
border-radius: 1.6rem;
padding: 2rem 2.4rem;
color: #000;
}
.p-about-3points-list-item-lead {
display: flex;
color: #ef9500;
font-size: 1.2rem;
font-weight: 500;
padding-bottom: 0.8rem;
}
.p-about-3points-list-item-lead::before {
content: "";
background-image: url("..//img/about/Frame-orange.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
flex-shrink: 0;
width: 0.6rem;
height: 0.6rem;
margin-right: 0.4rem;
margin-top: 0.5rem;
}
.p-about-3points-list-item-heading {
font-size: 1.6rem;
font-weight: 500;
line-height: 1.5;
padding-bottom: 0.8rem;
}
@media screen and (max-width: 767px) {
.p-about-3points-list-item-heading {
font-size: 1.5rem;
}
}
.p-about-3points-list-item-text {
font-size: 1.4rem;
line-height: 1.5;
color: #6D6D6D;
}
.p-about-company {
padding: 5.2rem 23rem 3.2rem 23rem;
}
@media screen and (max-width: 767px) {
.p-about-company {
padding: 3.2rem 2rem;
}
}
.p-about-company-content {
width: 82rem;
margin: 0 auto;
}
.p-about-company-content:nth-child(3) {
margin-top: 3.2rem;
}
@media screen and (max-width: 767px) {
.p-about-company-content {
width: auto;
}
}
.p-about-company-heading {
font-size: 2.4rem;
font-weight: bold;
line-height: 1.2;
text-align: center;
padding-bottom: 3.2rem;
}
.p-about-company-table {
border: solid #e0e0e0 0.1rem;
border-radius: 0.8rem;
width: 82rem;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-about-company-table {
display: table;
flex-direction: column;
width: auto;
}
}
.p-about-company-table-heading {
font-size: 1.8rem;
font-weight: bold;
line-height: 1.2;
padding-bottom: 0.8rem;
}
.p-about-company-table-th {
background-color: #F7F6F3;
width: 22rem;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
padding: 1.6rem 0;
padding-left: 2.4rem;
border-bottom: solid 0.1rem #e0e0e0;
}
@media screen and (max-width: 767px) {
.p-about-company-table-th {
display: flex;
flex-direction: column;
width: auto;
padding: 0.8rem;
padding-left: 1.6rem;
border-bottom: none;
}
}
.p-about-company-table-td {
width: calc(100% - 22rem);
font-size: 1.4rem;
line-height: 1.5;
padding: 1.6rem 0;
padding-left: 2.4rem;
border-bottom: solid 0.1rem #e0e0e0;
}
.p-about-company-table-td-span {
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.p-about-company-table-td {
display: flex;
flex-direction: column;
width: auto;
padding: 0.8rem 1.6rem;
padding-left: 1.6rem;
}
}
.p-about-company-table-img {
width: 28rem;
margin-top: 0.8rem;
}
@media screen and (max-width: 767px) {
.p-about-company-table-img {
width: 100%;
}
}
.p-about-company-button {
display: block;
background-color: #ef9500;
width: 21.6rem;
height: 4.8rem;
text-align: center;
border-radius: 99rem;
margin: 0 auto;
margin-top: 3.2rem;
margin-bottom: 3.2rem;
}
.p-about-company-button:hover {
cursor: pointer;
opacity: 0.7;
}
@media screen and (max-width: 767px) {
.p-about-company-button {
margin-bottom: 0;
}
}
.p-about-company-button-text {
color: #fff;
font-size: 1.5rem;
font-weight: bold;
padding: 1.6rem 0;
}/*# sourceMappingURL=style.css.map */