@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Noto+Sans+JP:wght@300;400;500;600&display=swap');

:root {
  --color-bg:      #F5F2EC;
  --color-text:    #2C2C2A;
  --color-muted:   #888780;
  --color-border:  #D3D1C7;
  --color-card-bg: #E8E3DA;
  --color-accent:  #EDEAE3;
  --font-serif: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --font-sans:  'Noto Sans JP', sans-serif;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
}

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

img {
  display: block;
  max-width: 100%;
  border-radius: 2px;
  object-fit: cover;
}

ul, ol { list-style: none; }

/* ===== Container ===== */
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 0.5px solid var(--color-border);
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.85rem 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.header-nav {
  display: flex;
  gap: 2rem;
}

.header-nav a {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.header-nav a.nav-active {
  color: var(--color-text);
  font-weight: 500;
}

/* ===== Nav Toggle (hamburger, mobile only) ===== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 200;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ===== Footer ===== */
.footer {
  border-top: 0.5px solid var(--color-border);
}

.footer-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 24px 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy {
  font-size: 12px;
  color: var(--color-muted);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  font-size: 11px;
  color: var(--color-muted);
}

/* ===== Section ===== */
.section {
  padding: 5rem 0;
}

.section--fv {
  padding: 6rem 48px 5rem;
}

.section--compact {
  padding: 3rem 48px;
}

.section-inner {
  padding-left: 48px;
  padding-right: 48px;
}

/* ===== Section Label ===== */
.section-label {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* ===== Text Link ===== */
.text-link {
  font-size: 12px;
  color: var(--color-muted);
  border-bottom: 0.5px solid var(--color-border);
  padding-bottom: 2px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* ===== Outline Button ===== */
.btn-outline {
  display: inline-block;
  font-size: 12px;
  color: var(--color-text);
  border: 0.5px solid var(--color-border);
  padding: 10px 28px;
  border-radius: 2px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

/* ===== Scroll Indicator ===== */
.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}

.scroll-indicator span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  flex-shrink: 0;
}

.scroll-indicator::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--color-border);
}

/* ===== Pivot Line ===== */
.pivot-line {
  padding: 5rem 48px;
  text-align: center;
  border-top: 0.5px solid var(--color-border);
  border-bottom: 0.5px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--color-muted);
  line-height: 1.8;
}

.pivot-line strong {
  color: var(--color-text);
}

/* ===== Image Placeholder ===== */
.img-placeholder {
  background: var(--color-card-bg);
  border-radius: 2px;
}

/* ===== Story Card (TOP) ===== */
.story-card {
  padding: 1.375rem 1.75rem;
  border: 0.5px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story-card p {
  font-family: var(--font-serif);
  font-size: 14px;
}

/* ===== Insight Card ===== */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.insight-card {
  text-decoration: none;
  display: block;
}

.insight-card-img {
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 20px 40px -20px rgba(60, 55, 45, 0.25);
}

.insight-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.96) brightness(1.02);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.insight-card-img .img-placeholder {
  width: 100%;
  height: 100%;
}

.insight-card:hover .insight-card-img img {
  transform: scale(1.04);
}

.insight-card-title {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.65;
  margin-top: 0.75rem;
  color: var(--color-text);
  transition: color 0.25s;
}

.insight-card:hover .insight-card-title {
  color: var(--color-muted);
}

/* ===== TOP: FV (image full-bleed, text overlay) ===== */
.fv {
  position: relative;
  height: clamp(520px, 80vh, 740px);
  overflow: hidden;
  background: var(--color-bg);
}

.fv-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 68%;
  height: 100%;
}

.fv-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.fv-image .img-placeholder {
  width: 100%;
  height: 100%;
}

.fv-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--color-bg) 0%,
    var(--color-bg) 27%,
    rgba(245, 242, 236, 0.7) 38%,
    rgba(245, 242, 236, 0) 54%
  );
}

.fv-stage {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1800px;
  margin: 0 auto;
}

.fv-content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 clamp(64px, 8vw, 150px);
}

.fv-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
}

.fv-copy {
  font-family: var(--font-serif);
  font-size: 50px;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 28px;
  font-weight: 400;
}

.fv-expertise {
  font-size: 27px;
  font-family: var(--font-serif);
  color: var(--color-text);
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}

.fv-desc {
  font-size: 19px;
  line-height: 1.8;
  color: var(--color-muted);
  font-weight: 400;
  margin-bottom: 36px;
}

.fv-signature {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.fv-scroll {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 60px;
  border-top: 0.5px solid var(--color-border);
}

.scroll-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}

.scroll-line {
  flex: 1;
  height: 0.5px;
  background: var(--color-border);
}

/* ===== TOP: WHO I AM ===== */
.who-section {
  padding: 80px 60px;
  border-bottom: 0.5px solid var(--color-border);
}

.who-section .section-label {
  font-size: 14px;
  letter-spacing: 0.12em;
}

.who-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 60px;
  align-items: start;
  margin-top: 32px;
}

.who-image {
  width: 100%;
  aspect-ratio: 4/3.3;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 20px 40px -20px rgba(60, 55, 45, 0.25);
}

.who-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
  filter: saturate(0.92) contrast(0.96) brightness(1.02);
}

.who-image .img-placeholder {
  width: 100%;
  height: 100%;
}

.who-heading {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 28px;
}

.who-signature {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 0.5px solid var(--color-border);
}

.who-signature .who-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 3px;
}

.who-signature .who-en {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.who-bio {
  font-size: 14px;
  line-height: 2.1;
  color: var(--color-muted);
}

.who-bio p {
  margin-bottom: 18px;
}

.who-bio p:last-child {
  margin-bottom: 0;
}

.who-bio strong {
  color: var(--color-text);
  font-weight: 500;
}

.who-bio .who-emphasis {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.who-text .text-link {
  display: inline-block;
  margin-top: 20px;
}

/* ===== TOP: Insights Section ===== */
.insights-section {
  padding: 80px 60px;
}

.insights-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
}

/* ===== Story Page ===== */
.story-fv {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
  padding: 80px 60px 0;
}

.story-fv-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-fv h1 {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}

.story-fv p {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 2.2;
  letter-spacing: 0;
}

.story-scroll {
  padding: 24px 0;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 0.5px solid var(--color-border);
}

/* ===== Story Chapter ===== */
.chapter {
  border-top: 0.5px solid var(--color-border);
}

.chapter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

.chapter-num {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.chapter-text h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}

.chapter-text p {
  font-size: 15px;
  line-height: 2.0;
  color: var(--color-muted);
  margin-bottom: 1rem;
  letter-spacing: 0;
}

.chapter-text strong {
  color: var(--color-text);
}

.chapter-image {
  min-height: 300px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 20px 40px -20px rgba(60, 55, 45, 0.25);
}

.chapter-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.92) contrast(0.96) brightness(1.02);
}

.chapter-image .img-placeholder {
  width: 100%;
  height: 100%;
}

/* ===== Full Width Photo ===== */
.photo-only {
  padding: 0;
  border-bottom: 0.5px solid var(--color-border);
}

.photo-only img,
.photo-only .img-placeholder {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ===== Quote Block ===== */
.quote-block {
  padding: 5rem 48px;
  border-top: 0.5px solid var(--color-border);
}

.quote-block h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 2rem;
}

.quote-block p {
  font-size: 15px;
  line-height: 2.0;
  color: var(--color-muted);
  margin-bottom: 1rem;
  letter-spacing: 0;
}

.quote-block strong {
  color: var(--color-text);
}

/* ===== Single Line ===== */
.single-line {
  padding: 4rem 48px;
  border-top: 0.5px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--color-muted);
  text-align: center;
}

.single-line strong {
  color: var(--color-text);
}

/* ===== Vision ===== */
/* ===== Profile (Story page top) ===== */
.profile-section {
  padding: 5rem 48px;
  border-top: 0.5px solid var(--color-border);
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.profile-image {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 20px 40px -20px rgba(60, 55, 45, 0.25);
}

.profile-image img,
.profile-image .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.92) contrast(0.96) brightness(1.02);
}

.profile-text .profile-name {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.profile-text .profile-tagline {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--color-text);
  letter-spacing: 0.03em;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.profile-text p:not(.profile-tagline):not(.profile-name) {
  font-size: 15px;
  line-height: 2.1;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.profile-text p:last-child {
  margin-bottom: 0;
}

.vision {
  padding: 6rem 48px;
  border-top: 0.5px solid var(--color-border);
}

/* ===== Story Lead (STORY section title before chapters) ===== */
.story-lead {
  padding: 4rem 48px 2.5rem;
  border-top: 0.5px solid var(--color-border);
}

.story-lead-label {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.story-lead-sub {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.9;
}

.vision .section-label {
  margin-bottom: 2rem;
}

.vision h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 2rem;
}

.vision p {
  font-size: 15px;
  line-height: 2.1;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.vision blockquote {
  font-family: var(--font-serif);
  font-size: 16px;
  border-left: 1.5px solid var(--color-border);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  color: var(--color-text);
}

.vision .closing {
  font-family: var(--font-serif);
  font-size: 22px;
  margin-top: 3rem;
  color: var(--color-text);
  line-height: 1.65;
}

.vision .closing-sub {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 0.75rem;
}

/* ===== CTA Section ===== */
.cta-section {
  padding: 5rem 48px;
  text-align: center;
  border-top: 0.5px solid var(--color-border);
}

.cta-section p {
  font-size: 13px;
  line-height: 2;
  color: var(--color-muted);
  margin-bottom: 2rem;
}

.cta-section .btn-outline {
  margin-top: 1rem;
}

/* ===== Business Page ===== */
.business-fv {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
  padding: 0 60px;
}

.business-fv-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.business-fv .section-label {
  margin-bottom: 1.5rem;
}

.business-fv h1 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.business-fv p {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 2.2;
}

.business-fv-scroll {
  padding: 24px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 0.5px solid var(--color-border);
}

.biz-intro {
  padding: 80px 60px;
  border-top: 0.5px solid var(--color-border);
}

.biz-intro p {
  font-size: 15px;
  line-height: 2.0;
  color: var(--color-muted);
  margin-bottom: 1rem;
  letter-spacing: 0;
}

.biz-intro strong {
  color: var(--color-text);
}

/* ===== Business Block ===== */
.biz-section {
  padding: 80px 60px;
  border-bottom: 0.5px solid var(--color-border);
}

.biz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

.biz-text .biz-num {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.biz-text h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.biz-text .biz-tagline {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.biz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.biz-tags span {
  font-size: 10px;
  color: var(--color-muted);
  border: 0.5px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 2px;
}

.biz-text p {
  font-size: 15px;
  line-height: 2.1;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.biz-text strong {
  color: var(--color-text);
}

.biz-text blockquote {
  font-family: var(--font-serif);
  font-size: 16px;
  border-left: 1.5px solid var(--color-border);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--color-text);
  line-height: 1.8;
}

.biz-image {
  min-height: 280px;
  max-height: 480px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 20px 40px -20px rgba(60, 55, 45, 0.25);
}

.biz-image img,
.biz-image .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: saturate(0.92) contrast(0.96) brightness(1.02);
}

/* ===== Business: Sub Activities (TAiWĀ / Community) ===== */
.biz-sub-section {
  padding: 5rem 48px;
  border-top: 0.5px solid var(--color-border);
}

.biz-sub-brand {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.biz-sub-lead {
  font-size: 15px;
  color: var(--color-muted);
  margin-bottom: 2.5rem;
}

.biz-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.biz-sub-card {
  padding: 1.75rem;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-accent);
}

.biz-sub-card .biz-sub-num {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.biz-sub-card h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.biz-sub-card .biz-sub-tagline {
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.biz-sub-card p:not(.biz-sub-tagline):not(.biz-sub-num) {
  font-size: 14px;
  line-height: 2;
  color: var(--color-muted);
}

.biz-sub-card .text-link {
  display: inline-block;
  margin-top: 1rem;
}

/* ===== Contact CTA ===== */
.contact-cta {
  padding: 6rem 48px;
  text-align: center;
  border-top: 0.5px solid var(--color-border);
}

.contact-cta h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.contact-cta .topics p {
  font-size: 15px;
  color: var(--color-muted);
  line-height: 2;
}

.contact-cta .note {
  font-size: 14px;
  color: var(--color-muted);
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* ===== Insights Page ===== */
.insights-fv {
  padding: 3rem 48px 2rem;
}

.category-filter {
  padding: 1.25rem 48px 2rem;
  display: flex;
  gap: 2rem;
}

.category-filter button {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  padding-bottom: 2px;
}

.category-filter button.active {
  color: var(--color-text);
  border-bottom: 0.5px solid var(--color-text);
}

.insights-grid-wrap {
  padding: 2.5rem 40px 5rem;
}

.insights-count {
  text-align: center;
  font-size: 10px;
  color: var(--color-muted);
  margin-top: 3rem;
}

/* ===== Insight Detail ===== */
.article-header {
  padding: 4rem 48px 0;
}

.article-header .section-label {
  margin-bottom: 1.5rem;
}

.article-header h1 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.article-header .article-lead {
  font-size: 15px;
  color: var(--color-muted);
  line-height: 2;
  margin-bottom: 2rem;
}

.article-meta {
  border-top: 0.5px solid var(--color-border);
  padding-top: 1rem;
  display: flex;
  gap: 2rem;
  font-size: 10px;
  color: var(--color-muted);
}

.article-eyecatch {
  padding: 2.5rem 0;
}

.article-eyecatch img,
.article-eyecatch .img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 3px;
  box-shadow: 0 20px 40px -20px rgba(60, 55, 45, 0.25);
  object-fit: cover;
  filter: saturate(0.92) contrast(0.96) brightness(1.02);
}

.article-body {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 48px 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #44423D;
}

.article-body p {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #44423D;
  margin-bottom: 1.4em;
}

.article-body strong {
  color: var(--color-text);
}

.article-body h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #24231F;
  margin: 4.5rem 0 1.8rem;
  line-height: 1.5;
}

.article-body blockquote {
  font-family: var(--font-serif);
  font-size: 16px;
  border-left: 1.5px solid var(--color-border);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--color-text);
}

/* 記事の核になる一文だけを独立させ、余白に意味を持たせる引用スタイル */
.article-body p.article-key-message {
  margin: 2.5rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid #9A8260;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #504C45;
}

.article-body hr {
  border: none;
  border-top: 0.5px solid var(--color-border);
  margin: 3.5rem 0;
}

.article-inline-image {
  max-width: 600px;
  margin: 2rem auto;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(60, 55, 45, 0.25);
}

.article-inline-image img,
.article-inline-image .img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  filter: saturate(0.92) contrast(0.96) brightness(1.02);
}

.article-video-embed {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-accent);
}

.article-video-embed p {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.image-caption {
  font-size: 14px;
  color: #7C7972;
  text-align: center;
  margin-top: -1rem;
  margin-bottom: 1.5rem;
}

.back-nav {
  padding: 4rem 48px 5rem;
  border-top: 0.5px solid var(--color-border);
  display: flex;
  justify-content: space-between;
}

.back-nav a {
  font-size: 12px;
  color: var(--color-muted);
}

/* ===== Contact Page ===== */
.contact-fv {
  padding: 6rem 48px 3rem;
}

.contact-fv .section-label {
  margin-bottom: 1.5rem;
}

.contact-fv h1 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.contact-fv-sub {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.9;
}

.contact-methods {
  padding: 0 48px;
}

.contact-method {
  border-top: 0.5px solid var(--color-border);
  border-bottom: 0.5px solid var(--color-border);
  padding: 2.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-method-primary .method-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.contact-method-primary .method-desc {
  font-size: 14px;
  color: var(--color-text);
}

.contact-method-primary .method-email {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-text);
  border-bottom: 0.5px solid var(--color-border);
}

.contact-casual {
  padding: 4rem 48px 6rem;
}

.contact-casual .section-label {
  margin-bottom: 1.25rem;
}

.casual-desc {
  font-size: 14px;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.casual-links {
  display: flex;
  gap: 2.5rem;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .header-inner {
    padding: 1rem 20px;
  }

  .header-logo {
    font-size: 15px;
  }

  .nav-toggle {
    display: flex;
  }

  .header-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(75%, 300px);
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    padding: 0 40px;
    box-shadow: -20px 0 40px -10px rgba(60, 55, 45, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 150;
  }

  .header-nav.is-open {
    transform: translateX(0);
  }

  .header-nav a {
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .section--fv {
    padding: 4rem 24px 3rem;
  }

  .section-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .fv {
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .fv-image {
    position: relative;
    width: 100%;
    height: 46vh;
    min-height: 320px;
    max-height: 420px;
  }

  .fv-image img {
    object-fit: cover;
    object-position: center top;
  }

  .fv-overlay {
    display: none;
  }

  .fv-stage {
    height: auto;
  }

  .fv-content {
    position: relative;
    height: auto;
    display: block;
    padding: 32px 24px 40px;
  }

  .fv-text {
    max-width: 100%;
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .fv-copy {
    font-size: 30px;
  }

  .fv-expertise {
    font-size: 18px;
  }

  .fv-desc {
    font-size: 15px;
  }

  .fv-scroll {
    padding: 24px 24px;
  }

  .who-section {
    padding: 60px 24px;
  }

  .who-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .insights-section {
    padding: 60px 24px;
  }

  .chapter-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .chapter-grid .chapter-image {
    order: -1;
  }

  .story-fv {
    padding: 60px 24px 0;
    min-height: auto;
  }

  .photo-only img,
  .photo-only .img-placeholder {
    height: 300px;
  }

  .biz-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .biz-grid .biz-image {
    order: -1;
  }

  .biz-sub-section {
    padding: 4rem 24px;
  }

  .biz-sub-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .business-fv {
    padding: 60px 24px 0;
    min-height: auto;
  }

  .biz-intro {
    padding: 60px 24px;
  }

  .biz-section {
    padding: 60px 24px;
  }

  .insight-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-fv,
  .story-lead,
  .profile-section,
  .quote-block,
  .pivot-line,
  .single-line,
  .vision,
  .cta-section,
  .biz-fv,
  .biz-intro,
  .contact-cta,
  .contact-fv,
  .contact-methods,
  .contact-casual,
  .article-header,
  .article-body,
  .back-nav,
  .insights-fv,
  .category-filter,
  .insights-grid-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .article-body,
  .article-body p {
    font-size: 15.5px;
    line-height: 1.85;
  }

  .article-body h2 {
    margin: 3.5rem 0 1.5rem;
    font-size: 22px;
  }

  .article-body p.article-key-message {
    margin: 2.2rem 0;
    font-size: 17.5px;
  }

  .profile-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section--compact {
    padding-left: 24px;
    padding-right: 24px;
  }

  .footer-inner {
    padding: 2rem 24px 1.5rem;
  }

  .contact-method {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ===== Responsive line-break control ===== */
.br-mobile {
  display: none;
}

@media (max-width: 480px) {
  .section--fv {
    padding: 3rem 16px 2rem;
  }

  .header-inner {
    padding: 0.85rem 16px;
  }

  .header-logo {
    font-size: 14px;
  }

  .header-nav {
    width: min(80%, 260px);
    padding: 0 28px;
  }

  .header-nav a {
    font-size: 13px;
  }

  .br-mobile {
    display: inline;
  }

  .story-fv h1 {
    font-size: 22px;
  }

  .chapter-text h2 {
    font-size: 19px;
    line-height: 1.7;
  }

  .quote-block h2 {
    font-size: 19px;
    line-height: 1.7;
  }

  .pivot-line,
  .single-line {
    font-size: 17px;
    line-height: 1.9;
  }

  .vision h2 {
    font-size: 21px;
  }

  .section-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-inner {
    padding: 1.25rem 16px;
  }

  .header-nav {
    gap: 1rem;
  }

  .insight-grid {
    grid-template-columns: 1fr;
  }

  .story-fv,
  .story-lead,
  .profile-section,
  .quote-block,
  .pivot-line,
  .single-line,
  .vision,
  .cta-section,
  .biz-fv,
  .biz-intro,
  .contact-cta,
  .contact-fv,
  .contact-methods,
  .contact-casual,
  .article-header,
  .article-body,
  .back-nav,
  .insights-fv,
  .category-filter,
  .insights-grid-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section--compact {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 16px 1.5rem;
    text-align: center;
  }

  .story-lead-label {
    font-size: 30px;
  }

  .fv-image {
    height: 38vh;
    min-height: 260px;
  }

  .fv-content {
    padding: 24px 16px 32px;
  }

  .fv-text {
    padding: 0;
  }

  .fv-copy {
    font-size: 25px;
  }

  .fv-expertise {
    font-size: 16px;
  }

  .fv-scroll {
    padding: 24px 16px;
  }

  .who-section {
    padding: 40px 16px;
  }

  .insights-section {
    padding: 40px 16px;
  }

  .story-fv h1 {
    font-size: 22px;
  }

  .story-fv {
    padding: 40px 16px 0;
  }

  .photo-only img,
  .photo-only .img-placeholder {
    height: 240px;
  }

  .business-fv {
    padding: 40px 16px 0;
  }

  .business-fv h1 {
    font-size: 24px;
  }

  .biz-intro {
    padding: 40px 16px;
  }

  .biz-section {
    padding: 40px 16px;
  }

  .biz-sub-section {
    padding: 40px 16px;
  }
}
/* ===== About: NOW ===== */
.now-section {
  padding: 6rem 48px;
  border-top: 0.5px solid var(--color-border);
}

.now-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.now-heading {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 3.5rem;
}

.now-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.now-item-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.now-item h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 1rem;
}

.now-item p {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

/* ===== About: READ (blog bridge) ===== */
.read-section {
  padding: 5rem 48px 7rem;
  border-top: 0.5px solid var(--color-border);
}

.read-lead {
  font-size: 15px;
  line-height: 2;
  color: var(--color-muted);
  margin-bottom: 3rem;
}

.read-note {
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 0.4rem;
  letter-spacing: 0.02em;
}

.read-more {
  margin-top: 3rem;
}

@media (max-width: 768px) {
  .now-section,
  .read-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .now-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .now-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}