:root { --sans: "Zen Maru Gothic", sans-serif; --ink: #454746; }

/* Rounded Japanese glyphs need a little more room at compact widths. */
body { line-break: strict; }
.hero h1, .about h2, .contact h2 { color: #363837; }
.about-copy p, .contact-copy p, .service-card p, .flow-list p { overflow-wrap: anywhere; }
.profile { margin-top: 25px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 460px; }
.profile-label { margin: 0 0 9px !important; font: 500 15px var(--mono); letter-spacing: .15em; color: var(--cyan); }
.profile dl { margin: 0; }
.profile dl > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(69,71,70,.12); font-size: 15px; line-height: 1.7; }
.profile dt { font-family: var(--mono); letter-spacing: .06em; color: #777d7a; }
.profile dd { margin: 0; }
.service-note { max-width: 620px; margin: 18px auto 0; text-align: center; font-size: 15px; line-height: 2; color: #626764; }
.service-note a { color: inherit; text-decoration-color: var(--cyan); text-underline-offset: 4px; }
.service-note a:hover { color: var(--cyan); }
.site-header { position: fixed; top: 0; background: rgba(251,251,250,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .3s ease, background .3s ease; }
.site-header.scrolled { background: rgba(251,251,250,.96); box-shadow: 0 5px 20px rgba(41,49,46,.08); }
.site-header .brand span { font-size: 29px; letter-spacing: .06em; text-transform: lowercase; }
.desktop-nav { gap: clamp(16px, 2.1vw, 32px); }
.philosophy { --philosophy-shift: 0px; position: relative; isolation: isolate; min-height: 650px; padding-top: 86px; padding-bottom: 82px; overflow: hidden; color: #fff; background: #1d2a2a; }
.philosophy::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(13,25,26,.88), rgba(18,33,34,.69) 57%, rgba(20,47,49,.5)); }
.philosophy-bg { position: absolute; z-index: 0; inset: -14% 0; background: url("assets/about.jpg") center 58% / cover no-repeat; transform: translate3d(0, calc(var(--philosophy-shift) * -.34), 0) scale(1.12); will-change: transform; }
.philosophy-inner { position: relative; z-index: 2; transform: translate3d(0, calc(var(--philosophy-shift) * .1), 0); will-change: transform; }
.philosophy .section-heading { color: #fff; }
.philosophy-copy { max-width: 860px; margin: 38px auto 0; }
.philosophy h2 { margin: 0; font-size: calc(clamp(24px, 2.35vw, 37px) + 4px); line-height: 1.65; color: #fff; }
.philosophy-text { margin-top: 34px; padding: 25px 0; border-top: 1px solid rgba(255,255,255,.34); border-bottom: 1px solid rgba(255,255,255,.34); }
.philosophy-text p { margin: 0; font-size: 17px; line-height: 2.15; }
.philosophy-text p + p { margin-top: 18px; }
.philosophy-message { margin: 28px 0 0; font-size: 18px; font-weight: 700; line-height: 2; color: #fff; }
.portfolio-note { margin: 0 auto; font: 14px var(--mono); letter-spacing: .13em; color: #7b807e; }
.contact-actions { display: grid; gap: 9px; max-width: 330px; margin-top: 18px; }
.contact-actions .button, .instagram-button { width: 100%; max-width: none; min-height: 47px; margin: 0; display: grid; place-items: center; padding: 12px 10px; }
.instagram-button { color: var(--ink); border: 1px solid var(--ink); background: transparent; text-align: center; text-decoration: none; font-size: 15px; transition: .25s; }
.instagram-button:hover { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.flow-list li:not(:last-child)::after { content: none; }
.work img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.work-1 img { object-position: 52% 58%; }
.work-6 img { object-position: 50% 46%; }
.work-1 img { object-position: 50% 58%; }
.work-2 img { object-position: 50% 52%; }
.work-3 img { object-position: 50% 48%; }
.work-4 img { object-position: 70% 48%; }
.work-5 img { object-position: 50% 52%; }
.work-6 img { object-position: 50% 60%; }
.hero-photo img, .contact-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-photo img { object-position: 52% 58%; }
.contact-photo img { object-position: 50% 46%; }
.about-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 56%; }
.service-card { background: #707875; filter: none; }
.service-card::before { background: #eef8f8; }
.card-b::before { background: #f6eee9; }
.card-c::before { background: #e9f0ed; }
.card-d::before { background: #edf3f7; }
.card-e::before { background: #f1f2e9; }
.keep-together { white-space: nowrap; }

/* A quiet, hand-drawn sense of movement between the service cards. */
.service-lines { display: none; }
.service-card { z-index: 1; transition: transform .35s ease, filter .35s ease; }
.service-card:hover { transform: translateY(-9px) rotate(0deg); filter: drop-shadow(0 12px 14px rgba(55, 81, 77, .14)); }
.icon svg, .flow-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.flow-icon { display: grid !important; place-items: center; }
.flow-icon svg { width: 31px; height: 31px; }

/* Small, tactile interactions that keep the calm tone of the site. */
.desktop-nav a, .footer-links a { position: relative; }
.desktop-nav a::after, .footer-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.desktop-nav a:hover::after, .footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.hero-photo, .about-photo, .contact-photo { overflow: hidden; transition: box-shadow .35s ease, transform .35s ease; }
.hero-photo:hover, .about-photo:hover, .contact-photo:hover { transform: translateY(-5px); }
.hero-photo img, .about-photo img, .contact-photo img, .work img { transition: transform .55s ease, filter .55s ease; }
.hero-photo:hover img, .about-photo:hover img, .contact-photo:hover img, .work:hover img { transform: scale(1.045); }
.work { aspect-ratio: 9 / 16; height: auto; overflow: hidden; background: var(--wash); }
.work:hover { transform: translateY(-7px); }
.section-heading .blue-dash { transition: width .3s ease; }

/* 細い水色のガイドラインで、見出しを軽やかに区切る。 */
.blue-dash { border-top-width: 1px; }
section:hover .section-heading .blue-dash { width: 32px; }

/* Desktop: reserve enough room for the Japanese copy before the photographs. */
@media (min-width: 761px) {
  .hero { grid-template-columns: minmax(360px, 44fr) minmax(0, 56fr); column-gap: clamp(24px, 3vw, 54px); }
  .hero-copy { min-width: 0; }
  .hero-photo { width: 100%; max-width: none; height: min(35vw, 480px); justify-self: end; }
  .role { white-space: nowrap; }
  .about { grid-template-columns: minmax(360px, 43fr) minmax(0, 57fr); column-gap: clamp(12px, 1.5vw, 24px); }
  .about-copy { grid-column: 1; min-width: 0; margin-left: clamp(18px, 2.5vw, 34px); }
  .about h2 { white-space: nowrap; }
  .about-photo { grid-column: 2; max-width: 420px; height: 290px; justify-self: start; }
}

/* Tablet layouts stop using the desktop's overlapping-style composition. */
@media (min-width: 761px) and (max-width: 1020px) {
  .hero { display: block; min-height: 0; padding-bottom: 70px; }
  .hero-photo { width: min(100%, 680px); height: min(48vw, 420px); margin: 38px 0 0 auto; }
  .hero-note, .vertical-note { display: none; }
  .about { display: block; min-height: 0; padding-bottom: 55px; }
  .about-copy { margin: 38px 0 28px; }
  .about-photo { width: min(100%, 460px); margin: 0 0 0 auto; }
  .service-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; height: auto; max-width: 680px; margin: 30px auto 0; }
  .service-lines { display: none; }
  .service-card { position: relative; inset: auto; left: auto; right: auto; top: auto; width: min(185px, 100%); justify-self: center; rotate: 0; translate: 0; }
  .card-a, .card-b, .card-c, .card-d, .card-e { left: auto; right: auto; top: auto; translate: 0; rotate: 0; }
  .works-grid { grid-template-columns: repeat(3, 1fr); }
  .flow-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 18px; }
  .flow-list li:last-child { grid-column: 2; }
  .contact { grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 35px; }
  .contact-photo { height: 250px; }
}

@media (max-width: 760px) {
  .about-copy p, .contact-copy p { line-height: 2.15; }
  .profile dl > div { grid-template-columns: 62px minmax(0, 1fr); font-size: 14px; }
  .service-note { margin-top: 7px; font-size: 14px; line-height: 2.05; }
  .philosophy { min-height: 0; padding-top: 58px; padding-bottom: 56px; }
  .philosophy-copy { margin-top: 28px; }
  .philosophy h2 { font-size: 27px; line-height: 1.7; }
  .philosophy-text { margin-top: 25px; padding: 20px 0; }
  .philosophy-text p, .philosophy-message { font-size: 15px; line-height: 2.05; }
  .philosophy-text br, .philosophy-message br { display: none; }
  .philosophy-message { margin-top: 22px; }
  .portfolio-note { width: 100%; order: 2; margin: 0; }
  .contact-actions { max-width: none; }
  .hero h1 { font-size: calc(clamp(24px, 7.5vw, 29px) + 4px); }
  .role { white-space: nowrap; font-size: 15px; }
}

/* Keep the hand-written hero statement in the document flow so it never
   collides with the copy or photo as the viewport changes. */
@media (min-width: 1021px) {
  .hero {
    grid-template-columns: minmax(360px, 44fr) minmax(0, 56fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .hero-lettering {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    top: auto;
    left: auto;
    z-index: 2;
    width: min(100%, 540px);
    margin: 20px 0 32px;
  }
  .hero-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    padding-bottom: 62px;
  }
  .hero-photo { grid-column: 2; grid-row: 1 / span 2; }
  .about-photo { max-width: 540px; height: 380px; }
}

@media (min-width: 761px) and (max-width: 1020px) {
  .hero-lettering {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    width: min(100%, 540px);
    margin: 24px 0 30px;
  }
  .hero-copy { padding-top: 0; }
  .about-photo { max-width: 510px; height: 350px; }
}

@media (max-width: 760px) {
  .hero-lettering {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    width: min(100%, 470px);
    margin: 18px auto 26px;
  }
  .hero-copy { padding-top: 0; }
  .about-photo { max-width: 420px; height: 315px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card, .hero-photo, .about-photo, .contact-photo, .hero-photo img, .about-photo img, .contact-photo img, .work img, .desktop-nav a::after, .footer-links a::after { transition: none; }
  .philosophy-bg, .philosophy-inner { transform: none !important; }
}

/* More breathing room around the mission, with its own ocean atmosphere. */
.about { padding-bottom: 70px; }
.philosophy { min-height: 780px; margin-top: 72px; padding-top: 116px; padding-bottom: 108px; }
.philosophy-bg { background-image: url("assets/philosophy.jpg"); background-position: center 55%; }
.philosophy-message { margin-top: 32px; font-size: calc(clamp(17px, 1.55vw, 23px) + 4px); line-height: 1.9; }
.hero-lettering { position: absolute; z-index: 3; top: 180px; left: clamp(24px, 10vw, 150px); width: clamp(320px, 36vw, 570px); height: auto; pointer-events: none; }

@media (min-width: 761px) {
  .hero-copy { align-self: end; padding-bottom: 62px; }
}

@media (min-width: 761px) and (max-width: 1020px) {
  .hero-copy { padding-top: 310px; padding-bottom: 0; }
  .hero-lettering { top: 125px; left: clamp(24px, 10vw, 85px); width: min(72vw, 530px); }
}

@media (max-width: 760px) {
  .about { padding-bottom: 45px; }
  .philosophy { min-height: 650px; margin-top: 48px; padding-top: 76px; padding-bottom: 74px; }
  .philosophy-message { margin-top: 26px; font-size: 19px; line-height: 2; }
  .hero-copy { padding-top: 255px; }
  .hero-lettering { top: 105px; left: 8vw; width: 84vw; }
}

/* Final hero layout: the lettering participates in layout, rather than
   overlaying it, so it remains anchored at every responsive breakpoint. */
@media (min-width: 1021px) {
  .hero {
    grid-template-columns: minmax(360px, 44fr) minmax(0, 56fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .hero-lettering {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    top: auto;
    left: auto;
    width: min(100%, 540px);
    margin: 20px 0 32px;
    z-index: 2;
  }
  .hero-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    padding-bottom: 62px;
  }
  .hero-photo { grid-column: 2; grid-row: 1 / span 2; }
}

@media (min-width: 761px) and (max-width: 1020px) {
  .hero-lettering {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    width: min(100%, 540px);
    margin: 24px 0 30px;
  }
  .hero-copy { padding-top: 0; }
}

/* On wider screens, let the portrait lead from the left and keep the
   introduction comfortably aligned alongside it. Mobile retains reading order. */
@media (min-width: 761px) {
  .about .section-heading { grid-column: 1 / -1; grid-row: 1; }
  .about-copy { grid-column: 2; grid-row: 2; }
  .about-photo { grid-column: 1; grid-row: 2; justify-self: start; }
}

/* Keep the supporting hero copy close to the hand-written statement on desktop. */
@media (min-width: 1021px) {
  .hero-copy {
    align-self: start;
    padding-bottom: 0;
    margin-top: -6px;
  }
}

/* Match the inquiry button to the site's softened graphite text tone. */
.contact-actions .button { background: var(--ink); }
.contact-actions .button:hover { background: var(--cyan); }

@media (max-width: 760px) {
  .hero-lettering {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    width: min(100%, 470px);
    margin: 18px auto 26px;
  }
  .hero-copy { padding-top: 0; }
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin-top: 24px; }
  .work { height: auto; max-height: none; aspect-ratio: 9 / 16; }
  .work:nth-child(even) { translate: 0; }
}

/* Space for the additional 3pt of type at every breakpoint. */
.role { white-space: normal; }
.service-card { padding: 25px 14px 15px; }
.service-card h3 { line-height: 1.4; }
@media (min-width: 761px) and (max-width: 1100px) {
  .site-header { padding-left: 24px; padding-right: 24px; }
  .desktop-nav { gap: 10px; letter-spacing: .04em; }
}
@media (max-width: 760px) {
  .profile dl > div { grid-template-columns: 70px minmax(0, 1fr); }
}