/* ==========================================================
   KOHEI KOJIMA — Personal Real Estate Profile
   Editorial / Off-white × Charcoal × Deep Navy
   ========================================================== */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }

:root {
  --bg: #F7F7F5;
  --ink: #252525;
  --navy: #27384A;
  --navy-deep: #1E2C3A;
  --mist: #E7E8E8;
  --mist-2: #DCDEDF;
  --muted: #64686B;           /* bg上でコントラスト比 5.3:1 */
  --rule: rgba(37, 37, 37, .16);
  --rule-light: rgba(247, 247, 245, .24);

  --serif-en: "Cormorant Garamond", "Cormorant", "Times New Roman", serif;
  --serif-jp: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans-jp: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;

  --gutter: 22px;
  --sec-y: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans-jp);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--navy); color: var(--bg); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--navy); color: var(--bg); padding: 8px 14px; font-size: 13px; }
.skip:focus { top: 12px; }

.unset { color: #8A6A3E; font-size: .92em; }

/* ---------- Masthead ---------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 22px 18px;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
}
.masthead__mark { font-family: var(--serif-en); font-size: 13px; font-weight: 500; letter-spacing: .32em; }
.masthead__meta { display: none; color: var(--muted); }
.masthead__link { color: var(--muted); padding: 6px 0; border-bottom: 1px solid var(--rule); transition: color .3s, border-color .3s; }
.masthead__link:hover { color: var(--navy); border-color: var(--navy); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid; grid-template-columns: 44% minmax(0, 1fr); column-gap: 20px;
  padding-top: 34px; padding-bottom: 64px;
}
.hero__copy { grid-column: 1 / -1; }
.eyebrow {
  font-size: 10px; letter-spacing: .28em; color: var(--muted);
  line-height: 1.6; margin-bottom: 22px;
}
.eyebrow__dot { margin-inline: .5em; opacity: .6; }
.hero__title {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: clamp(1.95rem, 8.6vw, 4.5rem);
  line-height: 1.5;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
}
.hero__line { display: block; }
.hero__line + .hero__line { padding-left: 1.05em; }
.hero__sub {
  margin-top: 18px;
  font-family: var(--serif-jp);
  font-size: 14px; line-height: 1.9; letter-spacing: .12em;
  color: var(--muted);
}

.hero__portrait { grid-column: 1; margin-top: 40px; }
.hero__portrait img, .hero__portrait .ph { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.hero__caption {
  margin-top: 8px;
  font-family: var(--serif-en); font-style: italic; font-size: 12px; letter-spacing: .04em; color: var(--muted);
}
.hero__caption span { font-style: normal; font-size: 10px; letter-spacing: .2em; margin-right: .9em; }

.hero__id { grid-column: 2; align-self: end; padding-bottom: 30px; }
.hero__en { font-family: var(--serif-en); font-weight: 500; font-size: 12.5px; letter-spacing: .34em; color: var(--navy); }
.hero__name {
  margin-top: 10px;
  font-family: var(--serif-jp); font-size: 24px; letter-spacing: .14em; line-height: 1.5;
}
.hero__kana { display: block; margin-top: 2px; font-family: var(--sans-jp); font-size: 10.5px; letter-spacing: .14em; color: var(--muted); vertical-align: middle; }
.hero__org { margin-top: 14px; font-size: 11.5px; line-height: 1.95; color: var(--muted); letter-spacing: .08em; }
.hero__cta { grid-column: 1 / -1; margin-top: 28px; }
.hero__cta .btn-line { width: 100%; min-height: 54px; }
.hero__note { margin-top: 14px; font-size: 12px; line-height: 1.85; letter-spacing: .06em; color: var(--muted); }
.hero__note span { display: inline-block; }
.hero__official {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding-block: 4px;
  font-size: 11px; letter-spacing: .06em; color: var(--navy);
  border-bottom: 1px solid var(--rule); transition: border-color .3s;
}
.hero__official:hover { border-color: var(--navy); }
.cta-unset { margin-top: 10px; font-size: 11px; line-height: 1.7; color: #8A6A3E; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.nw { white-space: nowrap; }
/* 日本語の改行を文節単位に（Chrome/Edge 対応。非対応ブラウザは通常の折返し） */
p, dd, h3, li { text-wrap: pretty; word-break: auto-phrase; line-break: strict; }
.hero__en, .hero__caption { white-space: nowrap; }
.hero__sub { font-size: clamp(12.5px, 3.6vw, 14px); }

@media (max-width: 374px) {
  .hero { grid-template-columns: 40% minmax(0, 1fr); column-gap: 16px; }
  .eyebrow { letter-spacing: .2em; font-size: 9.5px; }
  .hero__en { font-size: 11px; letter-spacing: .2em; }
  .hero__org { font-size: 10.5px; letter-spacing: .04em; }
  .hero__name { font-size: 22px; }
}

/* ---------- Placeholder ---------- */
.ph {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--mist);
  color: rgba(37, 37, 37, .42);
}
.ph::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(37, 37, 37, .1); pointer-events: none; }
.ph__label { font-family: var(--serif-en); font-style: italic; font-size: 30px; letter-spacing: .02em; }
.ph__note { font-size: 10px; letter-spacing: .22em; color: var(--muted); }

/* ---------- LINE button (控えめ・明快) ---------- */
.btn-line {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 32px;
  min-width: min(100%, 272px);
  padding: 17px 22px 17px 24px;
  background: var(--navy); color: var(--bg);
  font-size: 13.5px; letter-spacing: .16em; line-height: 1.4;
  transition: background-color .35s var(--ease);
}
.btn-line__arrow { font-family: var(--serif-en); font-size: 18px; transition: transform .35s var(--ease); }
.btn-line:hover { background: var(--navy-deep); }
.btn-line:hover .btn-line__arrow { transform: translateX(4px); }
.btn-line--invert { background: var(--bg); color: var(--navy); }
.btn-line--invert:hover { background: #fff; }
.btn-line--invert:focus-visible { outline-color: var(--bg); }

/* ---------- Section head ---------- */
.section { padding-block: var(--sec-y); }
.sec-head {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px;
  padding-top: 18px; border-top: 1px solid var(--rule);
  margin-bottom: 34px;
}
.sec-head__no { font-family: var(--serif-en); font-size: 13px; letter-spacing: .14em; color: var(--muted); }
.sec-head__ja { margin-top: 12px; justify-self: start; grid-column: 1 / -1; font-size: 10.5px; letter-spacing: .22em; color: var(--muted); }
.sec-head__en {
  grid-column: 1 / -1; margin-top: 14px;
  font-family: var(--serif-en); font-style: italic; font-weight: 400;
  font-size: clamp(2.5rem, 11.2vw, 4.5rem); line-height: 1; letter-spacing: -.005em;
  color: var(--navy);
}

/* ---------- About ---------- */
.about__lead {
  font-family: var(--serif-jp); font-size: 19px; line-height: 1.95; letter-spacing: .08em;
  font-feature-settings: "palt" 1;
}
.about__line { display: inline; }
.about__body { margin-top: 22px; max-width: 34em; }
.about__body p + p { margin-top: 1.3em; }
.facts { margin-top: 36px; border-bottom: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: 6.5em 1fr; align-items: baseline; padding-block: 11px; border-top: 1px solid var(--rule); }
.facts dt { font-family: var(--serif-en); font-style: italic; font-size: 15px; color: var(--muted); letter-spacing: .03em; }
.facts dd { font-size: 13.5px; letter-spacing: .08em; line-height: 1.8; }
.facts small { display: inline-block; font-size: 11.5px; color: var(--muted); }

/* ---------- Strengths ---------- */
.strength { padding-block: 28px 30px; border-top: 1px solid var(--rule); }
.strength:last-child { border-bottom: 1px solid var(--rule); }
.strength__label { font-family: var(--serif-en); font-style: italic; font-size: 15px; color: var(--navy); letter-spacing: .03em; line-height: 1.6; }
.strength__label span { display: inline-block; margin-right: 12px; font-family: var(--sans-jp); font-style: normal; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.strength__title { margin-top: 10px; font-family: var(--serif-jp); font-weight: 400; font-size: 21px; line-height: 1.7; letter-spacing: .1em; font-feature-settings: "palt" 1; }
.strength__body { margin-top: 10px; font-size: 14px; line-height: 2.05; color: #3D4043; max-width: 32em; }
.strength__points { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.strength__points li:not(:last-child)::after { content: "/"; margin-inline: .9em; opacity: .5; }

/* ---------- What I Do ---------- */
.index-list { border-bottom: 1px solid var(--rule); counter-reset: none; }
.index-list li {
  display: grid; grid-template-columns: 2.6em 1fr; column-gap: 8px;
  padding-block: 20px 22px; border-top: 1px solid var(--rule);
}
.index-list__no { font-family: var(--serif-en); font-style: italic; font-size: 16px; color: var(--muted); line-height: 1.9; grid-row: span 2; }
.index-list__ttl { font-family: var(--serif-jp); font-weight: 500; font-size: 18.5px; letter-spacing: .1em; line-height: 1.7; }
.index-list__ttl span { display: block; margin-top: 2px; font-family: var(--serif-en); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: .04em; color: var(--muted); }
.index-list p { margin-top: 6px; font-size: 14px; line-height: 1.95; color: #4A4D50; }

/* ---------- Approach ---------- */
.approach li { padding-block: 26px 28px; border-top: 1px solid var(--rule); position: relative; }
.approach li:last-child { border-bottom: 1px solid var(--rule); }
.approach__no {
  display: block; font-family: var(--serif-en); font-weight: 400; font-size: 50px; line-height: .9;
  color: var(--navy); opacity: .9; margin-bottom: 12px;
}
.approach h3 { font-family: var(--serif-jp); font-weight: 400; font-size: 21px; line-height: 1.7; letter-spacing: .1em; font-feature-settings: "palt" 1; }
.approach__l { display: block; }
.approach p { margin-top: 10px; font-size: 14px; line-height: 2.05; color: #3D4043; max-width: 30em; }

/* ---------- Beyond Real Estate ---------- */
.beyond { background: var(--mist); padding-block: 60px 64px; }
.beyond__photo { width: 66%; margin-bottom: 32px; }
.beyond__photo img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.beyond__text { margin-top: 16px; max-width: 30em; }
.beyond__kicker { display: flex; align-items: center; gap: 14px; font-family: var(--serif-en); font-style: italic; font-size: 16px; color: var(--navy); letter-spacing: .03em; }
.beyond__kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.beyond__title { margin-top: 0; font-family: var(--serif-jp); font-weight: 400; font-size: 20px; line-height: 1.8; letter-spacing: .1em; }
.beyond__text > p:not([class]) { margin-top: 10px; font-size: 14px; line-height: 2.1; color: #3D4043; }
.beyond__tags { margin-top: 14px; font-family: var(--serif-en); font-style: italic; font-size: 15px; letter-spacing: .06em; color: var(--muted); }

/* Off Duty ギャラリー：スマホ＝大1枚＋2×2、PC＝非対称の5枚組 */
.gallery {
  margin-top: 36px;
  display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "a a" "b c" "d e";
}
.gallery__item { margin: 0; overflow: hidden; background: var(--mist-2); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item--a { grid-area: a; aspect-ratio: 4 / 5; }
.gallery__item--b { grid-area: b; aspect-ratio: 3 / 4; }
.gallery__item--c { grid-area: c; aspect-ratio: 3 / 4; }
.gallery__item--d { grid-area: d; aspect-ratio: 3 / 4; }
.gallery__item--e { grid-area: e; aspect-ratio: 3 / 4; }

/* ---------- Client Stories ---------- */
.stories { display: grid; gap: 0; border-bottom: 1px solid var(--rule); }
.story { padding-block: 36px; border-top: 1px solid var(--rule); }
.story p { font-family: var(--serif-jp); font-size: 16px; line-height: 2.05; letter-spacing: .06em; }
.story footer { margin-top: 18px; font-size: 11.5px; color: var(--muted); letter-spacing: .1em; }
.story footer span { font-family: var(--serif-en); margin-right: 1em; }

/* ---------- Contact ---------- */
.contact { background: var(--navy); color: var(--bg); padding-block: 72px 80px; }
.contact__no { font-size: 10.5px; letter-spacing: .26em; opacity: .7; text-transform: uppercase; }
.contact__title {
  margin-top: 16px;
  font-family: var(--serif-en); font-style: italic; font-weight: 400;
  font-size: clamp(3.4rem, 17vw, 8.5rem); line-height: .95; letter-spacing: -.01em;
}
.contact__lead { margin-top: 26px; font-family: var(--serif-jp); font-size: 20px; line-height: 1.8; letter-spacing: .08em; font-feature-settings: "palt" 1; }
.contact__body { margin-top: 14px; font-size: 14px; line-height: 2.05; opacity: .82; max-width: 28em; }
.contact .btn-line { margin-top: 30px; min-height: 54px; }
.contact__unset { margin-top: 12px; font-size: 11px; line-height: 1.7; opacity: .7; letter-spacing: .04em; }
.contact__steps { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule-light); display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 11.5px; letter-spacing: .1em; opacity: .75; }
.contact__steps span:not(:last-child)::after { content: "→"; font-family: var(--serif-en); margin-inline: .9em; opacity: .7; }

/* ---------- Footer ---------- */
.footer { padding-block: 52px calc(48px + env(safe-area-inset-bottom)); font-size: 12px; line-height: 1.9; color: var(--muted); letter-spacing: .06em; }
.footer__en { font-family: var(--serif-en); font-weight: 500; font-size: 13px; letter-spacing: .32em; color: var(--ink); margin-bottom: 4px; }
.footer__info { margin-top: 22px; }
.footer__info > div { display: grid; grid-template-columns: 5.6em 1fr; gap: 8px; padding-block: 4px; }
.footer__info dt { color: rgba(37, 37, 37, .5); }
.footer__info dd { word-break: break-word; }
.footer__info a { border-bottom: 1px solid var(--rule); }
.footer__info a:hover { color: var(--navy); border-color: var(--navy); }
.footer__bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 11px; }
.footer__bottom a:hover { color: var(--navy); }

/* ---------- Mobile dock ---------- */
.dock {
  position: fixed; z-index: 20;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 46px; padding: 0 16px 0 18px;
  background: var(--navy); color: var(--bg);
  font-size: 12.5px; letter-spacing: .14em;
  box-shadow: 0 6px 18px rgba(23, 33, 44, .16);
  transform: translateY(calc(100% + 24px)); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.dock__arrow { font-family: var(--serif-en); font-size: 16px; }
.dock.is-visible { transform: none; opacity: 1; }

/* ---------- Reveal (控えめ) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================
   Tablet / Desktop
   ========================================================== */
@media (min-width: 600px) {
  :root { --gutter: 40px; --sec-y: 100px; }
  .hero { grid-template-columns: 40% minmax(0, 1fr); column-gap: 32px; }
  .hero__cta .btn-line { width: auto; }
  .hero__kana { display: inline-block; margin: 0 0 0 14px; }
  .beyond__photo { width: 48%; }
  .masthead__meta { display: inline; }
}

@media (min-width: 960px) {
  :root { --gutter: 64px; --sec-y: 124px; }
  body { font-size: 15.5px; }

  .masthead { padding-block: 30px 0; }

  .hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    column-gap: 24px;
    min-height: min(92vh, 900px);
    padding-top: 6vh; padding-bottom: 96px;
  }
  .hero__copy { grid-column: 1 / 8; grid-row: 1; padding-top: 3vh; }
  .hero__portrait { grid-column: 8 / 13; grid-row: 1 / 4; align-self: start; width: 100%; max-width: 520px; justify-self: end; margin: 0; }
  .hero__id { grid-column: 2 / 7; grid-row: 2; align-self: end; margin-top: 44px; padding-bottom: 0; }
  .hero__cta { grid-column: 2 / 7; grid-row: 3; margin-top: 30px; }
  .hero__note { font-size: 12.5px; }
  .hero__official { font-size: 11.5px; }
  .hero__org { font-size: 12.5px; }
  .hero__sub { font-size: 15.5px; margin-top: 34px; }
  .eyebrow { margin-bottom: 40px; }
  .hero__name { font-size: 30px; letter-spacing: .16em; }

  .section {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  }
  .sec-head { grid-column: 1 / 5; align-self: start; position: sticky; top: 40px; margin-bottom: 0; }
  .section > :not(.sec-head) { grid-column: 6 / 13; padding-top: 18px; }

  .about__lead { font-size: 24px; }
  .about__line { display: block; }
  .facts { max-width: 34em; }

  .index-list li { grid-template-columns: 3.4em 15.5em 1fr; align-items: baseline; padding-block: 24px; }
  .index-list__no { grid-row: auto; }
  .index-list p { margin-top: 0; }

  .approach li { display: grid; grid-template-columns: 4.6em 1fr; column-gap: 12px; padding-block: 34px 36px; }
  .approach__no { grid-row: span 2; margin-bottom: 0; font-size: 64px; }
  .approach h3 { font-size: 23px; }
  .approach__l { display: inline; }

  .beyond { padding-block: 96px; }
  .beyond__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .beyond--text .beyond__kicker { grid-column: 1 / 5; padding-top: 8px; }
  .beyond--text .beyond__text { grid-column: 6 / 12; margin-top: 0; }
  .gallery {
    grid-column: 1 / -1; margin-top: 64px; gap: 14px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 300px 300px;
    grid-template-areas:
      "a a a a a b b b c c c c"
      "a a a a a b b b d d e e";
  }
  .gallery__item { aspect-ratio: auto !important; }
  .beyond:not(.beyond--text) .beyond__inner { align-items: center; }
  .beyond__photo { grid-column: 2 / 6; grid-row: 1 / 3; width: 100%; margin: 0; }
  .beyond:not(.beyond--text) .beyond__kicker { grid-column: 7 / 12; align-self: end; }
  .beyond:not(.beyond--text) .beyond__text { grid-column: 7 / 12; align-self: start; }
  .beyond__title { font-size: 24px; }

  .strength { padding-block: 34px 36px; }
  .strength__title { font-size: 23px; }

  .contact { padding-block: 112px 120px; }
  .contact__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .contact__no, .contact__title { grid-column: 1 / -1; }
  .contact__lead { grid-column: 1 / 7; margin-top: 44px; font-size: 26px; }
  .contact__inner > :is(.contact__body, .btn-line, .contact__unset, .contact__steps) { grid-column: 8 / 13; }
  .contact__body { margin-top: 50px; }
  .contact .btn-line { justify-self: start; }

  .footer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-block: 68px 56px; }
  .footer__name { grid-column: 1 / 5; }
  .footer__info { grid-column: 6 / 13; margin-top: 0; }
  .footer__bottom { grid-column: 1 / -1; margin-top: 44px; }

  .dock { display: none; }
}


/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .dock, .masthead__link, .skip { display: none !important; }
  .contact { background: none; color: var(--ink); }
}