/* ==========================================================================
   /about/「ジネコについて」専用スタイル（page-about.php でのみ読み込み）
   --------------------------------------------------------------------------
   このページではテーマCSS（bootstrap / liquid-corporate / 子テーマ style.css）も
   読み込まれたままなので、全ルールを .aio-about 配下にスコープしている。
   グローバルリセットは持ち込まず、必要な打ち消しだけ局所的に当てる。
   ヘッダー / フッターは aio-common.css が担当するのでここには含めない。
   ========================================================================== */

.aio-about{
  --pink:#F2849E;
  --pink-strong:#E8688A;
  --pink-light:#FEF6F8;
  --pink-mid:#FBDCE4;
  --pink-dark:#C95876;
  --beige:#FDFAF8;
  --beige2:#F9F2EF;
  --text:#4A3338;
  --text-muted:#9C7D84;
  --text-light:#C4A8AF;
  --border:#F5DEE4;
  --white:#FFFFFF;
  --font-serif:'Noto Serif JP',serif;
  --font-sans:'Noto Sans JP',sans-serif;
  --measure:760px;

  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.95;
  color:var(--text);
  background:var(--beige);
  padding-bottom:4rem;
}

/* ---- 局所リセット（テーマ / Bootstrap の余白・装飾を打ち消す） ---- */
.aio-about *,.aio-about *::before,.aio-about *::after{box-sizing:border-box}
.aio-about p,.aio-about h1,.aio-about h2,.aio-about h3,
.aio-about dl,.aio-about dt,.aio-about dd,.aio-about nav{margin:0;padding:0}
.aio-about img{max-width:100%;height:auto;display:block}
.aio-about a{color:inherit;text-decoration:none}
.aio-about h1,.aio-about h2,.aio-about h3{color:inherit;font-weight:600}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.aio-about .about-hero{position:relative;overflow:hidden;
  padding:5rem 2rem 4rem;border-bottom:1px solid var(--border);
  background:linear-gradient(170deg,var(--pink-light) 0%,var(--beige) 70%)}
.aio-about .about-hero .bg{position:absolute;inset:0;opacity:.45;
  background-position:center;background-size:cover;background-repeat:no-repeat}
.aio-about .about-hero .inner{max-width:var(--measure);margin:0 auto;position:relative;z-index:1}
.aio-about .eyebrow{font-family:var(--font-serif);font-size:13px;letter-spacing:.22em;
  color:var(--pink-dark);text-transform:uppercase;margin-bottom:.75rem}
.aio-about .about-hero h1{font-family:var(--font-serif);font-size:2.4rem;line-height:1.5;letter-spacing:.02em}

/* ==========================================================================
   冒頭の会社定義（ページで最初に読ませるブロック）
   ========================================================================== */
.aio-about .definition{max-width:var(--measure);margin:-1.75rem auto 0;position:relative;z-index:2;
  background:var(--white);border:1px solid var(--border);border-left:4px solid var(--pink);
  border-radius:14px;padding:2rem 2.25rem;box-shadow:0 10px 30px rgba(242,132,158,.10)}
.aio-about .definition .label{font-family:var(--font-serif);font-size:.95rem;font-weight:600;
  color:var(--pink-dark);margin-bottom:.9rem}
.aio-about .definition p{font-size:1.02rem;line-height:2.05}
.aio-about .definition p + p{margin-top:1rem}

/* ==========================================================================
   ページ内ナビ（ボタン型）
   ========================================================================== */
.aio-about .toc{max-width:var(--measure);margin:2.75rem auto 0;padding:0 2rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.aio-about .toc a{display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:.95rem 1.1rem;transition:all .2s;box-shadow:0 2px 8px rgba(242,132,158,.05)}
.aio-about .toc a:hover{border-color:var(--pink);background:var(--pink-light);
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(242,132,158,.14)}
.aio-about .toc .n{font-family:var(--font-serif);font-size:.78rem;letter-spacing:.1em;color:var(--pink)}
.aio-about .toc .t{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.92rem;font-weight:500;color:var(--text);line-height:1.5}
.aio-about .toc .t::after{content:"↓";font-size:.85rem;color:var(--pink-mid);flex-shrink:0;transition:all .2s}
.aio-about .toc a:hover .t{color:var(--pink-dark)}
.aio-about .toc a:hover .t::after{color:var(--pink-dark);transform:translateY(2px)}

/* ==========================================================================
   セクション共通
   ========================================================================== */
.aio-about .about-sec{max-width:var(--measure);margin:0 auto;padding:4.25rem 2rem 0}
.aio-about .sec-head{display:flex;align-items:baseline;gap:1rem;
  margin-bottom:1.75rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.aio-about .sec-num{font-family:var(--font-serif);font-size:.95rem;color:var(--pink);
  letter-spacing:.1em;flex-shrink:0}
.aio-about .sec-head h2{font-family:var(--font-serif);font-size:1.55rem;letter-spacing:.02em;line-height:1.6}
.aio-about .body-p{font-size:1.02rem}
.aio-about .body-p + .body-p{margin-top:1.1rem}
.aio-about .note{font-size:.85rem;color:var(--text-light);margin-top:1rem;text-align:right}

/* 帯画像（カスタマイザー未設定なら .band ごと出力されない） */
.aio-about .band{border-radius:14px;overflow:hidden;margin-bottom:1.75rem;background:var(--pink-light)}
.aio-about .band img{width:100%;aspect-ratio:16/6;object-fit:cover}

/* 外部リンク */
.aio-about .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.75rem;
  font-size:.92rem;font-weight:500;color:var(--pink-dark);
  border-bottom:1px solid var(--pink-mid);padding-bottom:2px;transition:all .2s}
.aio-about .more:hover{border-color:var(--pink-dark)}

/* ==========================================================================
   02 ビジョン・価値観
   ========================================================================== */
.aio-about .vision{font-family:var(--font-serif);font-size:1.42rem;line-height:1.8;
  color:var(--pink-dark);text-align:center;padding:2rem 1.25rem;
  background:var(--pink-light);border-radius:14px;margin-bottom:1.5rem}
.aio-about .sub-head{font-size:.8rem;font-weight:500;letter-spacing:.14em;
  color:var(--text-light);margin:2.5rem 0 1rem}
.aio-about .value-list{display:flex;flex-direction:column;gap:1rem}
.aio-about .value-row{background:var(--white);border:1px solid var(--border);
  border-radius:12px;padding:1.5rem 1.75rem}
.aio-about .value-row .phrase{font-family:var(--font-serif);font-size:1.18rem;font-weight:600;
  color:var(--pink-dark);margin-bottom:.6rem}
.aio-about .value-row p{font-size:.93rem;color:var(--text-muted);line-height:1.95}

/* ==========================================================================
   03 事業・サービス
   サムネイル未設定でも崩れないよう、grid ではなく flex + gap で組む
   ========================================================================== */
.aio-about .biz-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.75rem}
.aio-about .biz-item{background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:1.35rem 1.6rem;display:flex;align-items:center;gap:1.25rem}
.aio-about .biz-item .thumb{width:72px;height:72px;flex-shrink:0;
  border-radius:12px;object-fit:cover;background:var(--pink-light)}
.aio-about .biz-item h3{font-size:1.02rem;margin-bottom:.35rem}
.aio-about .biz-item p{font-size:.9rem;color:var(--text-muted);line-height:1.9}

/* ==========================================================================
   04 数字
   ========================================================================== */
.aio-about .figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.9rem}
.aio-about .figure{background:var(--white);border:1px solid var(--border);
  border-radius:12px;padding:1.5rem 1.25rem;text-align:center}
.aio-about .figure .cap{font-size:.78rem;color:var(--text-muted);letter-spacing:.02em}
.aio-about .figure .num{font-family:var(--font-serif);font-size:1.62rem;font-weight:600;
  color:var(--pink-strong);line-height:1.35;margin:.35rem 0 .55rem}
.aio-about .figure .desc{font-size:.8rem;color:var(--text-muted);line-height:1.8;
  border-top:1px solid var(--border);padding-top:.6rem}

/* ==========================================================================
   05 歩み
   ========================================================================== */
.aio-about .milestones{margin-top:1.9rem;background:var(--white);
  border:1px solid var(--border);border-radius:12px;overflow:hidden}
.aio-about .ms{display:grid;grid-template-columns:110px 1fr;gap:1rem;
  padding:1.1rem 1.6rem;align-items:baseline}
.aio-about .ms + .ms{border-top:1px solid var(--border)}
.aio-about .ms .year{font-family:var(--font-serif);font-size:1.02rem;font-weight:600;color:var(--pink-dark)}
.aio-about .ms .what{font-size:.95rem}

/* ==========================================================================
   06 会社概要
   ========================================================================== */
.aio-about .profile{background:var(--white);border:1px solid var(--border);
  border-radius:14px;overflow:hidden}
.aio-about .profile dl{display:grid;grid-template-columns:170px 1fr}
.aio-about .profile dt{padding:1rem 1.5rem;font-size:.85rem;font-weight:500;
  color:var(--text-muted);background:var(--beige2);border-bottom:1px solid var(--border)}
.aio-about .profile dd{padding:1rem 1.5rem;font-size:.92rem;line-height:1.9;
  border-bottom:1px solid var(--border)}
.aio-about .profile dl > :nth-last-child(1),
.aio-about .profile dl > :nth-last-child(2){border-bottom:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:900px){
  .aio-about .about-hero{padding:3.5rem 1.25rem 3rem}
  .aio-about .about-hero h1{font-size:1.8rem}
  .aio-about .definition{margin-left:1.25rem;margin-right:1.25rem;padding:1.5rem}
  .aio-about .toc{grid-template-columns:repeat(2,1fr);padding:0 1.25rem;gap:.6rem}
  .aio-about .about-sec{padding:3.25rem 1.25rem 0}
  .aio-about .band img{aspect-ratio:16/9}
  .aio-about .figures{grid-template-columns:1fr}
  .aio-about .profile dl{grid-template-columns:1fr}
  .aio-about .profile dt{border-bottom:none;padding-bottom:.25rem}
  .aio-about .ms{grid-template-columns:1fr;gap:.2rem;padding:1rem 1.25rem}
  .aio-about .biz-item{padding:1.25rem;gap:1rem}
  .aio-about .biz-item .thumb{width:60px;height:60px}
}

@media(max-width:480px){
  .aio-about .toc{grid-template-columns:1fr}
  .aio-about .biz-item{flex-direction:column;align-items:flex-start}
}