@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Noto+Sans+JP:wght@300;400;500;600&display=swap');

:root {
--navy: #082d5b;
--navy-deep: #051c39;
--blue: #a9d6f5;
--blue-light: #e8f5ff;
--ice: #f5fbff;
--white: #ffffff;
--beige: #d7b89a;
--text: #17324d;
--muted: #698094;
--line: rgba(8, 45, 91, .13);
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
color: var(--text);
background: var(--white);
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
line-height: 2;
}

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


/* HEADER */

.header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 82px;
padding: 0 6%;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255,255,255,.72);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255,255,255,.6);
}

.logo {
color: var(--navy);
font-size: 22px;
font-weight: 500;
letter-spacing: .28em;
}

.nav {
display: flex;
gap: 32px;
}

.nav a {
color: var(--navy);
font-size: 12px;
letter-spacing: .12em;
}


/* HERO */

.hero {
min-height: 100vh;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: 140px 10% 100px;

background:
radial-gradient(circle at 76% 25%, rgba(139,203,245,.42), transparent 27%),
radial-gradient(circle at 16% 82%, rgba(93,157,210,.20), transparent 28%),
linear-gradient(135deg, #ffffff 15%, #f5fbff 55%, #ddecf8 100%);
}

.hero::before {
content: "";
position: absolute;
width: 650px;
height: 650px;
top: -360px;
right: -110px;
border: 1px solid rgba(8,45,91,.16);
border-radius: 50%;
}

.hero-content {
position: relative;
z-index: 5;
max-width: 850px;
}

.hero-label,
.section-label {
margin-bottom: 25px;
color: #6485a2;
font-size: 11px;
font-weight: 500;
letter-spacing: .35em;
}

.hero h1 {
margin: 0 0 38px;
color: var(--navy);
font-family: "DM Serif Display", "Noto Sans JP", serif;
font-size: clamp(48px, 7vw, 92px);
font-weight: 400;
line-height: 1.35;
letter-spacing: .04em;
}

.hero h1 span {
color: var(--navy-deep);
}

.hero-text {
margin-bottom: 42px;
color: #526f88;
font-size: 16px;
letter-spacing: .06em;
}

.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 58px;
padding: 0 32px;
color: white;
background: var(--navy);
border: 1px solid var(--navy);
font-size: 13px;
letter-spacing: .08em;
transition: .3s ease;
}

.button:hover {
color: var(--navy);
background: transparent;
}

.scroll {
position: absolute;
right: 4%;
bottom: 50px;
color: #6d879c;
font-size: 9px;
letter-spacing: .35em;
writing-mode: vertical-rl;
}


/* GEOMETRIC GLASS */

.hero-shape {
position: absolute;
pointer-events: none;
backdrop-filter: blur(8px);
}

.shape-1 {
width: 430px;
height: 430px;
right: -100px;
bottom: -70px;
background: linear-gradient(
135deg,
rgba(130,196,241,.42),
rgba(255,255,255,.20)
);
border: 1px solid rgba(255,255,255,.7);
transform: rotate(45deg);
}

.shape-2 {
width: 260px;
height: 260px;
left: -100px;
top: 180px;
background: linear-gradient(
135deg,
rgba(255,255,255,.5),
rgba(130,190,230,.16)
);
border: 1px solid rgba(8,45,91,.08);
transform: rotate(32deg);
}

.shape-3 {
width: 240px;
height: 240px;
right: 22%;
top: 18%;
border: 1px solid rgba(8,45,91,.10);
transform: rotate(45deg);
}


/* SECTIONS */

.section {
padding: 130px 10%;
}

.section h2 {
margin: 0 0 55px;
color: var(--navy);
font-family: "DM Serif Display", "Noto Sans JP", serif;
font-size: clamp(36px, 5vw, 60px);
font-weight: 400;
line-height: 1.5;
}

.concept {
position: relative;
background: var(--white);
}

.concept p:not(.section-label) {
max-width: 680px;
margin-bottom: 28px;
font-size: 16px;
}

.concept-message {
margin-top: 55px !important;
color: var(--navy);
font-size: 22px !important;
font-weight: 500;
}


/* SERVICE */

.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.card {
min-height: 310px;
padding: 42px 35px;
background: linear-gradient(145deg, #fff, #f3f9fd);
border: 1px solid var(--line);
}

.card span {
color: #9bb5ca;
font-size: 11px;
letter-spacing: .2em;
}

.card h3 {
margin: 50px 0 20px;
color: var(--navy);
font-family: "DM Serif Display", serif;
font-size: 27px;
font-weight: 400;
}


/* WORKS */

.works {
background: var(--ice);
}

.works-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}

.work-image {
width: 100%;
aspect-ratio: 4 / 3;
margin-bottom: 22px;
background:
linear-gradient(135deg, rgba(14,63,108,.9), rgba(160,211,242,.55));
}

.work-category {
margin: 0;
color: #8aa2b5;
font-size: 9px;
letter-spacing: .25em;
}

.work h3 {
margin-top: 5px;
color: var(--navy);
font-size: 18px;
font-weight: 400;
}


/* PRICE */

.price {
text-align: center;
}

.price-box {
max-width: 650px;
margin: 0 auto;
padding: 60px 30px;
background: #fff;
border: 1px solid var(--line);
}

.price-name {
color: #7d98ad;
font-size: 11px;
letter-spacing: .3em;
}

.price-number {
margin: 12px 0 28px;
color: var(--navy);
font-family: "DM Serif Display", serif;
font-size: clamp(52px, 8vw, 82px);
line-height: 1.2;
}

.price-number span {
font-size: .4em;
}

.price-number .tax {
margin-left: 8px;
}

.price-note {
margin-top: 20px;
color: #8a9aa7;
font-size: 11px;
}


/* CONTACT */

.contact {
position: relative;
overflow: hidden;
color: white;
background:
radial-gradient(circle at 80% 10%, #245f93 0%, transparent 35%),
var(--navy-deep);
}

.contact .section-label,
.contact h2 {
color: white;
}

.contact .button-light {
margin-top: 30px;
color: var(--navy);
background: white;
border-color: white;
}

.contact .button-light:hover {
color: white;
background: transparent;
}

.area {
margin-top: 60px;
color: #9db6cb;
font-size: 10px;
letter-spacing: .3em;
}


/* FOOTER */

.footer {
padding: 55px 10%;
color: #8ba0b1;
background: #04162c;
text-align: center;
font-size: 10px;
letter-spacing: .15em;
}

.footer-logo {
margin: 0;
color: white;
font-size: 18px;
letter-spacing: .3em;
}

.copyright {
margin-top: 30px;
}


/* MOBILE */

@media (max-width: 760px) {

.header {
height: 68px;
padding: 0 6%;
}

.logo {
font-size: 17px;
}

.nav {
display: none;
}

.hero {
min-height: 92vh;
padding: 120px 7% 80px;
}

.hero h1 {
font-size: 45px;
}

.hero-text {
font-size: 14px;
}

.section {
padding: 90px 7%;
}

.section h2 {
margin-bottom: 40px;
font-size: 37px;
}

.cards,
.works-grid {
grid-template-columns: 1fr;
}

.card {
min-height: auto;
}

.shape-1 {
width: 280px;
height: 280px;
}

.shape-2 {
opacity: .55;
}

.button {
width: 100%;
padding: 0 18px;
}
}

/* HERO 最終調整 */
.hero h1 {
font-family: "Noto Sans JP", sans-serif;
font-size: clamp(42px, 5.2vw, 72px);
font-weight: 300;
line-height: 1.55;
letter-spacing: .03em;
max-width: 1000px;
}

.hero h1 span {
white-space: nowrap;
}

@media (max-width: 760px) {
.hero h1 {
font-size: clamp(36px, 11vw, 50px);
line-height: 1.5;
}

.hero h1 span {
white-space: normal;
}
}