@charset "UTF-8";

/* DOMA LIVING - SP only
   Loaded from index.html at max-width: 640px. */

.doma-living {
--dl-navy: #131d3d;
--dl-copper: #b79478;
--dl-copper-dark: #8c674e;
--dl-sand: #ece6dc;
--dl-cream: #f7f4ee;
--dl-ink: #22252b;
--dl-muted: #686b70;
--dl-white: #fff;
--dl-border: rgba(19, 29, 61, .16);
--dl-serif: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
--dl-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
color: var(--dl-ink);
background: var(--dl-cream);
font-family: var(--dl-serif);
font-size: 15px;
line-height: 1.85;
letter-spacing: .035em;
isolation: isolate;
overflow: hidden;
}

.doma-living,
.doma-living *,
.doma-living *::before,
.doma-living *::after {
box-sizing: border-box;
}

.doma-living figure,
.doma-living p,
.doma-living h2,
.doma-living h3,
.doma-living h4,
.doma-living ol {
margin-top: 0;
}

.doma-living figure {
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

.doma-living img {
display: block;
width: 100%;
max-width: none;
}

.doma-living a {
color: inherit;
}

.doma-living__inner {
width: calc(100% - 40px);
max-width: 560px;
margin-right: auto;
margin-left: auto;
}

.doma-living__hero {
display: grid;
grid-template-columns: 1fr;
min-height: 0;
background: var(--dl-navy);
}

.doma-living__hero-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 62px 30px 70px;
color: var(--dl-white);
}

.doma-living__hero-copy::before {
position: absolute;
inset: 16px;
border: 1px solid rgba(255, 255, 255, .18);
content: "";
pointer-events: none;
}

#top .doma-living__eyebrow {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0 0 25px;
color: #d9c1ae;
font-family: var(--dl-sans);
font-size: 10px;
font-weight: 500;
line-height: 1.6;
letter-spacing: .2em;
text-align: left;
}

.doma-living__eyebrow::before {
width: 42px;
height: 1px;
background: currentColor;
content: "";
}

#top .doma-living__title-en {
position: relative;
margin: 0 0 15px;
color: var(--dl-white);
font-size: 13px;
font-weight: 400;
line-height: 1.6;
letter-spacing: .27em;
text-align: left;
}

#top h2.doma-living__title {
position: relative;
margin: 0;
color: var(--dl-white);
font-family: var(--dl-serif);
font-size: clamp(28px, 8vw, 36px);
font-weight: 400;
line-height: 1.5;
letter-spacing: .05em;
text-align: left;
}

#top .doma-living__lead {
position: relative;
max-width: 34em;
margin: 26px 0 0;
color: rgba(255, 255, 255, .82);
font-family: var(--dl-serif);
font-size: 14px;
line-height: 2;
letter-spacing: .035em;
text-align: left;
}

.doma-living__hero-media {
position: relative;
order: -1;
min-width: 0;
min-height: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
}

.doma-living__hero-media::after {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(8, 12, 25, .2), transparent 42%);
content: "";
pointer-events: none;
}

.doma-living__hero-media img {
height: 100%;
object-fit: cover;
object-position: 58% center;
}

#top .doma-living__hero-note {
position: absolute;
right: 14px;
bottom: 10px;
z-index: 2;
margin: 0;
color: rgba(255, 255, 255, .78);
font-family: var(--dl-sans);
font-size: 9px;
line-height: 1.5;
letter-spacing: .08em;
text-align: right;
text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.doma-living__concept {
padding: 88px 0 78px;
background: var(--dl-cream);
}

.doma-living__intro {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
margin-bottom: 60px;
}

#top .doma-living__section-label {
margin: 0 0 18px;
color: var(--dl-copper-dark);
font-family: var(--dl-sans);
font-size: 10px;
font-weight: 600;
line-height: 1.7;
letter-spacing: .2em;
text-align: left;
text-transform: uppercase;
}

#top h3.doma-living__intro-title {
margin: 0;
color: var(--dl-navy);
font-family: var(--dl-serif);
font-size: clamp(27px, 8vw, 35px);
font-weight: 400;
line-height: 1.55;
letter-spacing: .06em;
text-align: left;
}

#top h3.doma-living__intro-title span {
color: var(--dl-copper-dark);
}

.doma-living__intro-body {
padding-top: 24px;
border-top: 1px solid var(--dl-border);
}

#top .doma-living__intro-body p {
margin: 0;
color: #4d5056;
font-family: var(--dl-serif);
font-size: 15px;
line-height: 2.2;
letter-spacing: .035em;
text-align: left;
}

#top .doma-living__intro-body p + p {
margin-top: 1.3em;
}

.doma-living__features {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin: 0;
padding: 0;
list-style: none;
}

.doma-living__feature {
position: relative;
display: flex;
min-width: 0;
flex-direction: column;
background: var(--dl-white);
box-shadow: 0 18px 45px rgba(19, 29, 61, .07);
}

.doma-living__feature-media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--dl-sand);
}

.doma-living__feature-media img {
height: 100%;
object-fit: cover;
}

.doma-living__feature-body {
position: relative;
flex: 1;
padding: 31px 25px 32px;
border-top: 3px solid var(--dl-copper);
}

.doma-living__feature-no {
position: absolute;
top: -23px;
right: 22px;
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 50%;
color: var(--dl-white);
background: var(--dl-navy);
font-family: var(--dl-sans);
font-size: 11px;
line-height: 1;
letter-spacing: .08em;
}

#top .doma-living__feature-kicker {
margin: 0 0 10px;
color: var(--dl-copper-dark);
font-family: var(--dl-sans);
font-size: 10px;
font-weight: 600;
line-height: 1.7;
letter-spacing: .2em;
text-align: left;
}

#top h4.doma-living__feature-title {
margin: 0 0 16px;
padding: 0;
color: var(--dl-navy);
font-family: var(--dl-serif);
font-size: clamp(20px, 6vw, 25px);
font-weight: 500;
line-height: 1.55;
letter-spacing: .045em;
text-align: left;
}

#top .doma-living__feature-text {
margin: 0;
color: var(--dl-muted);
font-family: var(--dl-sans);
font-size: 14px;
line-height: 2;
letter-spacing: .035em;
text-align: left;
}

.doma-living__warmth {
position: relative;
padding: 82px 0;
color: var(--dl-white);
background: var(--dl-navy);
}

.doma-living__warmth::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 31vw;
background: linear-gradient(130deg, rgba(183, 148, 120, .2), transparent 64%);
content: "";
pointer-events: none;
}

.doma-living__warmth-grid {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}

.doma-living__warmth-mark {
position: relative;
display: grid;
width: min(76vw, 290px);
aspect-ratio: 1;
place-items: center;
margin-right: auto;
margin-left: auto;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 50%;
}

.doma-living__warmth-mark::before,
.doma-living__warmth-mark::after {
position: absolute;
border: 1px solid rgba(183, 148, 120, .34);
border-radius: 50%;
content: "";
}

.doma-living__warmth-mark::before {
inset: 12%;
}

.doma-living__warmth-mark::after {
inset: 25%;
}

.doma-living__warmth-mark-inner {
position: relative;
z-index: 1;
text-align: center;
}

.doma-living__warmth-mark-en {
display: block;
margin-bottom: 12px;
color: #d9c1ae;
font-family: var(--dl-sans);
font-size: 10px;
line-height: 1.5;
letter-spacing: .23em;
}

.doma-living__warmth-mark-ja {
display: block;
font-size: clamp(24px, 8vw, 34px);
font-weight: 400;
line-height: 1.5;
letter-spacing: .12em;
}

.doma-living__warmth-copy {
text-align: center;
}

#top .doma-living__warmth-copy .doma-living__section-label {
color: #d9c1ae;
text-align: center;
}

#top h3.doma-living__warmth-title {
margin: 0;
color: var(--dl-white);
font-family: var(--dl-serif);
font-size: clamp(28px, 8.5vw, 38px);
font-weight: 400;
line-height: 1.55;
letter-spacing: .055em;
text-align: center;
}

#top p.doma-living__warmth-text {
max-width: 42em;
margin: 28px 0 0;
color: rgba(255, 255, 255, .78);
font-family: var(--dl-sans);
font-size: 14px;
line-height: 2.15;
letter-spacing: .035em;
text-align: center;
}

#top p.doma-living__warmth-caution {
margin: 20px 0 0;
color: rgba(255, 255, 255, .58);
font-family: var(--dl-sans);
font-size: 11px;
line-height: 1.8;
letter-spacing: .03em;
text-align: center;
}

@media (max-width: 420px) {
.doma-living__inner {
width: calc(100% - 32px);
}

.doma-living__hero-media {
aspect-ratio: 1 / 1;
}

.doma-living__hero-media img {
object-position: 54% center;
}

.doma-living__hero-copy {
padding-right: 24px;
padding-left: 24px;
}

#top h2.doma-living__title {
font-size: 29px;
}
}

@media (prefers-reduced-motion: reduce) {
.doma-living__feature-media img {
transition: none;
}
}