@charset "UTF-8";
/*
 * miruto_about.css
 * ABOUTページ専用スタイル
 * MIRUTO DESIGN
 */

/* ──────────────────────────────────────────────
   ABOUT HERO
────────────────────────────────────────────── */
#about-hero {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end;
  position:relative; overflow:hidden;
  padding:0 4rem 6.5rem;
  padding-top: var(--nav-h);
}
.ah-bg {
  position:absolute;
  inset:0;
  background-image:url('/wp-content/themes/mirutodesign/img/office.jpg');
  background-size:cover; background-position:center 30%;
}
.ah-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, rgba(8,18,7,.8) 0%, rgba(15,30,12,.75) 55%, rgba(8,18,7,.92) 100%);
}
.ah-ring {
  position:absolute; 
  inset:0; 
  pointer-events:none; 
  z-index:1;
}
.ah-ring::before {
  content:'';
  position:absolute;
  top:-22%;
  right:-9%;
  width:520px;
  height:520px;
  border:1px solid rgba(181,160,74,.13);
  border-radius:50%;
  animation:ringSpin 44s linear infinite;
}
.ah-ring::after {
  content:'';
  position:absolute;
  bottom:-18%;
  left:-6%;
  width:360px;
  height:360px;
  border:1px solid rgba(181,160,74,.09);
  border-radius:50%;
  animation:ringSpin 56s linear infinite reverse;
}
@keyframes ringSpin { to { transform:rotate(360deg); } }

.ah-content { 
  position:relative; 
  z-index:2; 
  max-width:800px; }
.ah-badge {
  font-weight:100;
  font-size:.6rem;
  letter-spacing:.55em;
  color:var(--gold-light); text-transform:uppercase;
  display:flex;
  align-items:center; 
  gap:.9rem; 
  margin-bottom:2.2rem;
  opacity:0; animation:ahUp .9s ease .3s forwards;
}
.ah-badge::before { 
  content:''; 
  width:28px; 
  height:1px; 
  background:var(--gold); 
  flex-shrink:0; }
.ah-h1 {
  font-weight:300;
  font-size:clamp(2.2rem,5vw,4.4rem);
  line-height:1.18;
  color:var(--paper);
  letter-spacing:.02em;
  margin-bottom:.6rem;
  opacity:0;
  animation:ahUp 1.1s ease .5s forwards;
}
.ah-h1-sub {
  font-weight:300;
  font-size:clamp(1.1rem,2vw,1.75rem); 
  line-height:1.5; 
  color:var(--gold-light);
  letter-spacing: .06em; 
  margin-bottom:2rem;
  opacity:0; animation:ahUp 1s ease .68s forwards;
}
.ah-rule {
  width:56px; 
  height:1px;
  background:linear-gradient(to right, var(--gold), transparent);
  margin-bottom:1.8rem;
  opacity:0; 
  animation:ahUp .8s ease .9s forwards;
}
.ah-catch {
  font-size:.88rem; 
  line-height:2.2; 
  color:rgba(249,247,242,.72); max-width:560px;
  opacity:0; animation:ahUp .9s ease 1.05s forwards;
}
.ah-catch strong { 
  color:var(--gold-light); 
  font-weight:400; 
}
.ah-breadcrumb {
  position:absolute; 
  bottom:2.2rem; 
  right:4rem; 
  z-index:2;
  font-size:.58rem; 
  letter-spacing:.3em;
  color:rgba(249,247,242,.32); display:flex; 
  align-items:center; 
  gap:.6rem;
}
.ah-breadcrumb a { 
  color:inherit; text-decoration:none; transition:color .3s; 
}
.ah-breadcrumb a:hover { color:var(--gold); }
@keyframes ahUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ──────────────────────────────────────────────
   INTRO ── キャッチコピー全文 + 3能力
────────────────────────────────────────────── */
#intro { background:var(--off-white); }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:start; }
.intro-copy p { font-size:.88rem; color:var(--ink-soft); line-height:2.2; margin-bottom:1.5rem; }
.intro-copy p:last-child { margin-bottom:0; }
.intro-capabilities { display:flex; flex-direction:column; }
.cap-item {
  display:grid; grid-template-columns:22px 1fr; gap:1.1rem;
  padding:1.3rem 0; border-bottom:1px solid var(--line); align-items:start;
}
.cap-item:first-child { border-top:1px solid var(--line); }
.cap-dot {
  width:20px; height:20px; border:1px solid var(--gold); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:.22rem;
}
.cap-dot::after { content:''; width:6px; height:6px; background:var(--gold); opacity:.6; }
.cap-text { font-size:1.0rem; color:var(--ink-soft); line-height:1.9; }
.cap-text strong {
  /*font-family:'Noto Serif JP', serif;*/
  font-weight:400; color:var(--green-deep);
  display:block; margin-bottom:.2rem; font-size:1.25rem;
}

/* ──────────────────────────────────────────────
   ORIGIN ── 「よく見ると」からはじまる物語
────────────────────────────────────────────── */
#origin { background:var(--paper); }
.origin-grid { display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:center; }
/* ロゴ画像 */
.origin-logo-img {
  width:100%; max-width:460px; margin:0 auto;
  display:block; object-fit:contain;
}
.origin-text p { font-size:.88rem; color:var(--ink-soft); line-height:2.2; margin-bottom:1.4rem; }
.origin-text p:last-child { margin-bottom:0; }

/* ──────────────────────────────────────────────
   LOGOTYPE ── 6文字の意味
────────────────────────────────────────────── */
#logotype { background:var(--off-white); }
/* ワードマーク画像 */
.logotype-wordmark-img {
  display:block; width:100%; max-width:540px;
  margin:0 0 3.5rem; object-fit:contain;
}
.logotype-intro {
  font-size:.88rem; color:var(--ink-soft); line-height:2.1;
  max-width:700px; margin-bottom:4rem;
}
/* 6文字グリッド */
.letter-grid {
  display:grid; grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line);
}
.letter-card {
  padding:2.2rem 1.4rem 2rem; border-right:1px solid var(--line);
  transition:background .35s;
}
.letter-card:last-child { border-right:none; }
.letter-card:hover { background:var(--paper); }
.lc-glyph {
  /*font-family:'Cormorant Garamond', serif;*/
  font-size:3rem; font-weight:300;
  color:var(--green-deep); line-height:1; margin-bottom:.55rem;
}
.lc-reading {
  /*font-family:'Josefin Sans', sans-serif;*/
  font-size:.56rem; letter-spacing:.28em;
  color:var(--gold); text-transform:uppercase; margin-bottom:.5rem;
}
.lc-kanji {
  /*font-family:'Noto Serif JP', serif;*/
  font-size:1.75rem; font-weight:400;
  color:var(--ink-soft); line-height:1.5; margin-bottom:.5rem;
}
.lc-desc { font-size:.72rem; color:var(--ink-muted); line-height:1.85; }

/* ──────────────────────────────────────────────
   SYMBOL ── シンボルロゴ
────────────────────────────────────────────── */
#symbol { background:var(--paper); }
.symbol-grid { display:grid; grid-template-columns:380px 1fr; gap:6rem; align-items:start; }
.symbol-img-col { position:sticky; top:8rem; }
/* シンボル画像 */
.symbol-logo-img {
  display:block; width:100%; max-width:380px; margin:0 auto;
  object-fit:contain;
}
.symbol-closing-text {
  margin-top:3rem;
  /*font-family:'Cormorant Garamond', serif;*/
  font-weight:300;
  font-size:clamp(1rem,1.4vw,1.25rem); color:var(--green-deep); line-height:1.8;
  border-left:2px solid var(--gold-pale); padding-left:1.6rem;
}
.sym-intro { font-size:.87rem; color:var(--ink-soft); line-height:2.1; margin-bottom:2.5rem; }
.sym-list { display:flex; flex-direction:column; }
.sym-item {
  padding:1.7rem 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:46px 1fr; gap:1.4rem; align-items:start;
}
.sym-item:first-of-type { border-top:1px solid var(--line); }
.sym-num {
  /*font-family:'Cormorant Garamond', serif;*/
  font-size:1.9rem; font-weight:300;
  color:var(--gold-pale); line-height:1;
}
.sym-body h4 {
  /*font-family:'Noto Serif JP', serif;*/
  font-size:1.75rem; font-weight:400;
  color:var(--green-deep); margin-bottom:.5rem;
}
.sym-body p { font-size:.8rem; color:var(--ink-soft); line-height:1.95; }

/* ──────────────────────────────────────────────
   PROFILE
────────────────────────────────────────────── */
#profile { background:var(--off-white); }
.profile-grid { display:grid; grid-template-columns:240px 1fr; gap:6.5rem; align-items:start; }
.profile-img-col { position:sticky; top:9rem; }

/* オフセットフレーム */
.profile-frame { position:relative; display:inline-block; width:100%; }
.profile-frame::after {
  content:''; position:absolute; top:10px; left:10px; right:-10px; bottom:-10px;
  border:1px solid var(--line-gold); z-index:0; pointer-events:none;
}
.profile-photo { position:relative; z-index:1; width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }

.profile-name    { text-align:center; margin-top:1.6rem; }
.profile-name-ja { /*font-family:'Noto Serif JP', serif;*/ font-size:.95rem; font-weight:400; color:var(--green-deep); letter-spacing:.15em; margin-bottom:.3rem; }
.profile-name-en { /*font-family:'Josefin Sans', sans-serif;*/ font-size:.6rem; font-weight:200; letter-spacing:.42em; color:var(--gold); text-transform:uppercase; }
.profile-role    { margin-top:.6rem; /*font-family:'Josefin Sans', sans-serif;*/ font-size:.54rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-muted); text-align:center; }

.profile-body p { font-size:.88rem; color:var(--ink-soft); line-height:2.2; margin-bottom:1.4rem; }
.profile-tags   { display:flex; flex-wrap:wrap; gap:.6rem; margin:2rem 0 2.5rem; }
.p-tag  { /*font-family:'Josefin Sans', sans-serif;*/ font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--green-deep); border:1px solid var(--green-deep); padding:.44rem 1.1rem; transition:all .3s; }
.p-tag:hover { background:var(--green-deep); color:var(--paper); }

.profile-quote { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:2rem 0; }
.pq-mark { /*font-family:'Cormorant Garamond', serif;*/ font-size:3rem; color:var(--gold-pale); line-height:.5; display:block; margin-bottom:1rem; }
.profile-quote blockquote {
  /*font-family:'Cormorant Garamond', serif;*/ font-weight:300;
  font-size:clamp(1rem,1.5vw,1.2rem); color:var(--green-deep); line-height:1.8;
}

/* ──────────────────────────────────────────────
   COMPANY ── 事業概要
────────────────────────────────────────────── */
#company { background:var(--off-white); }
.company-grid { display:grid; grid-template-columns:1fr 1fr; gap:6.5rem; align-items:start; }
.company-img-col { position:sticky; top:9rem; }
.company-photo { width:100%; aspect-ratio:4/3; overflow:hidden; }
.company-photo img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.company-photo:hover img { transform:scale(1.03); }
.co-table { width:100%; border-collapse:collapse; }
.co-table tr { border-bottom:1px solid var(--line); }
.co-table tr:first-child { border-top:1px solid var(--line); }
.co-table th {
  width:7.5rem; padding:1.2rem 0; vertical-align:top;
  /*font-family:'Josefin Sans', sans-serif;*/ font-size:.6rem; font-weight:300;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold); text-align:left;
}
.co-table td { padding:1.2rem 0 1.2rem 1.4rem; font-size:.84rem; color:var(--ink-soft); line-height:1.95; vertical-align:top; }
.co-table td strong { display:block; /*font-family:'Noto Serif JP', serif;*/ font-weight:400; color:var(--ink); margin-bottom:.18rem; }

/* ──────────────────────────────────────────────
   RESPONSIVE ── about page sections
────────────────────────────────────────────── */
@media (max-width:960px) {

  /* Hero */
  #about-hero        { 
    padding:10rem 1.6rem 5rem; 
    min-height:75vh; 
  }
  .ah-breadcrumb     { 
    right:1.6rem; 
    bottom:1.5rem; 
  }

  /* Intro */
  .intro-grid        { grid-template-columns:1fr; gap:3.5rem; }

  /* Origin */
  .origin-grid       { grid-template-columns:1fr; gap:3rem; }
  .origin-logo-img   { max-width:280px; }

  /* Logotype */
  .letter-grid       { grid-template-columns:repeat(3,1fr); }
  .letter-card:nth-child(3)                              { border-right:none; }
  .letter-card:nth-child(4),
  .letter-card:nth-child(5),
  .letter-card:nth-child(6) { border-top:1px solid var(--line); }

  /* Symbol */
  .symbol-grid       { grid-template-columns:1fr; gap:3rem; }
  .symbol-img-col    { position:static; }
  .symbol-logo-img   { max-width:240px; }

  /* ────────────────────────────────────────
     Profile ── スマホ センタリング修正
     グリッドを解除し、画像列をflexboxで中央揃え
  ──────────────────────────────────────── */
  .profile-grid    { grid-template-columns:1fr; gap:3rem; }
  .profile-img-col {
    position:static;
    display:flex;
    flex-direction:column;
    align-items:center;   /* 水平中央揃え */
  }
  .profile-frame   { width:200px; }  /* inline-block のまま幅固定でflexが中央配置 */

  /* Company */
  .company-grid    { grid-template-columns:1fr; gap:3rem; }
  .company-img-col { position:static; }
}

@media (max-width:480px) {
  .ah-h1            { font-size:2rem; }
  .letter-grid      { grid-template-columns:repeat(2,1fr); }
  .letter-card:nth-child(2)   { border-right:none; }
  .letter-card:nth-child(3)   { border-right:1px solid var(--line); }
  .letter-card:nth-child(n+3) { border-top:1px solid var(--line); }
  .letter-card:nth-child(4)   { border-right:none; }
  .letter-card:nth-child(6)   { border-right:none; }
}