/* ============================================================
   style01.css  —  motoikenkichi.com 共通スタイル
   ------------------------------------------------------------
   MotoiKenkichi.com Design Policy（サイト全体の約束事）
     - Background   : #004040（固定のブランドカラー。変更しない）
     - Text         : #ffffff（白・固定）
     - Accent       : 緑系（#74c69d ほか）。赤系は使用しない
     - Last Updated : 全ページ右上に固定表示（ISO 8601 + (JST)）
     - Copyright    : 国際標準表記（Copyright © YYYY Name.）
     - Common layout: 全ページで本CSSを共有
     - FAQ          : Q/A 形式
     - 更新履歴     : ページ内に残す（継続管理のシグナル）
   これらは意図的な設計。将来の見直しや別AIとの共同保守のために明記。
   使い回し可：<link rel="stylesheet" href="/css/style01.css">
   ============================================================ */

:root{
  --bg:#004040;          /* 背景（固定） */
  --panel:#00504f;       /* カード・パネル */
  --panel2:#003838;      /* サブ地色・縞 */
  --panel3:#00605f;      /* 強調地色 */
  --line:#137a72;
  --line-strong:#2a9d8f;
  --accent:#74c69d;      /* 緑アクセント */
  --accent2:#95d5b2;
  --head:#eafff7;        /* 見出し（ほぼ白） */
  --text:#ffffff;        /* 本文（白・固定） */
  --muted:#bcdcd5;       /* 補助テキスト */
  --link:#9be7d5;
  --link-visited:#7fd0c4;
  --link-hover:#ffffff;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --mono:"BIZ UDゴシック","Noto Sans Mono CJK JP","Noto Sans Mono","IPAゴシック","ＭＳ ゴシック","MS Gothic",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  -webkit-text-size-adjust:100%;
}

.wrap{max-width:880px;margin:0 auto;padding:2.5rem 1.25rem 4rem}

/* トップバー（左：トップへ戻る／右：最終更新） */
.topbar{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:-1rem 0 1.2rem}
.topbar .home-link{font-size:.85rem;white-space:nowrap}
.updated{text-align:right;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.updated .k{opacity:.8;margin-right:.4em}

/* ---- ヘッダ ---- */
header h1{font-size:1.7rem;margin:0 0 .3rem;color:var(--head);letter-spacing:.02em}
header .aka{color:var(--muted);font-size:.95rem;margin:0 0 1.4rem}

/* ---- リンク ---- */
a:link{color:var(--link);transition:.2s}
a:visited{color:var(--link-visited)}
a:hover{color:var(--link-hover)}
a:active{color:var(--accent2)}

/* ---- パンくず ---- */
.breadcrumb{font-size:.82rem;color:var(--muted);margin:0 0 1rem}
.breadcrumb a{color:var(--link)}
.breadcrumb .sep{margin:0 .4em;opacity:.7}

/* ---- 目次 ---- */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1rem 1.2rem;margin:0 0 2rem}
.toc h2{border:none;font-size:1rem;margin:0 0 .5rem;padding:0;color:var(--head)}
.toc ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.toc li{font-size:.9rem}

/* ---- コールアウト ---- */
.callout{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:4px solid var(--accent2);
  border-radius:8px;
  padding:1rem 1.2rem;
  margin:0 0 2rem;
  font-size:.98rem;
}
.callout p{margin:.5rem 0}
.callout strong{color:var(--accent)}

/* 重要（訂正）— 赤は使わず、緑アクセント＋濃い地色で強調 */
.callout.important{
  border-left:5px solid var(--accent);
  background:var(--panel3);
  border-color:var(--line-strong);
}
.callout.important strong{color:var(--head)}
.callout .label{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  background:var(--accent);color:#04352c;border-radius:3px;padding:.1rem .5rem;margin-bottom:.3rem;
}

/* ---- 概要 ---- */
.overview p{margin:.7rem 0}

/* ---- 名義チップ ---- */
.identity{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0;padding:0;list-style:none}
.identity li{
  background:var(--panel3);border:1px solid var(--line-strong);border-radius:999px;
  padding:.2rem .8rem;font-size:.85rem;color:var(--head);
}

/* ---- セクション見出し ---- */
section{margin:2.4rem 0 0}
h2{
  font-size:1.2rem;margin:0 0 .2rem;color:var(--head);
  padding-bottom:.35rem;border-bottom:2px solid var(--line-strong);
}
h2 .en{color:var(--muted);font-size:.8rem;font-weight:400;margin-left:.5rem}

/* ---- 活動史（10年単位） ---- */
.history .era{
  display:grid;grid-template-columns:120px 1fr;gap:.5rem 1rem;
  padding:.9rem 0;border-bottom:1px dashed var(--line);
}
.history .era:last-child{border-bottom:none}
.history .era .decade{font-weight:700;color:var(--accent);font-family:var(--mono)}
.history .era ul{margin:.1rem 0;padding-left:1.1rem}
.history .era li{margin:.15rem 0}
@media(max-width:560px){.history .era{grid-template-columns:1fr;gap:.2rem}}

/* ---- 年表・経歴（テーブル） ---- */
.timeline{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.95rem}
.timeline th,.timeline td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left;vertical-align:top;color:var(--text)}
.timeline thead th{background:var(--accent);color:#04352c}
.timeline tbody tr:nth-child(odd){background:var(--panel)}
.timeline tbody tr:nth-child(even){background:var(--panel2)}
.timeline td.year{white-space:nowrap;font-family:var(--mono);font-weight:700;color:var(--accent);width:7em}

/* ---- 作品・プロジェクト一覧 ---- */
.works{list-style:none;margin:1rem 0 0;padding:0}
.works li{
  border:1px solid var(--line);border-left:4px solid var(--accent2);
  background:var(--panel);border-radius:6px;padding:.6rem .9rem;margin:.5rem 0;
}
.works .wt{font-weight:700;color:var(--head)}
.works .wd{color:var(--muted);font-size:.9rem}

/* ---- FAQ ---- */
.faq{margin-top:1rem}
.faq dt{font-weight:700;color:var(--head);margin-top:1rem;padding-left:1.6rem;position:relative}
.faq dt::before{content:"Q.";position:absolute;left:0;color:var(--accent)}
.faq dd{margin:.2rem 0 0 0;padding-left:1.6rem;position:relative;color:var(--text)}
.faq dd::before{content:"A.";position:absolute;left:0;color:var(--accent2);font-weight:700}

/* ---- カードグリッド ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
@media(max-width:560px){.grid{grid-template-columns:1fr}}

a.card{
  display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:.85rem 1rem;text-decoration:none;color:var(--text);transition:.15s;
}
a.card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px rgba(116,198,157,.18);color:var(--text)}
a.card.main{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
a.card .t{font-weight:700;font-size:.98rem;display:block;color:var(--head)}
a.card .u{color:var(--link);font-size:.8rem;word-break:break-all;display:block;margin-top:.2rem;font-family:var(--mono)}
a.card .d{color:var(--muted);font-size:.83rem;display:block;margin-top:.3rem}

/* ---- 注記 ---- */
.note{color:var(--muted);font-size:.82rem;margin-top:.4rem}

/* ---- テキストボックス ---- */
.namebox{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.1rem 1.3rem;margin-top:1rem}
.namebox p{margin:.5rem 0}
.namebox blockquote{margin:.8rem 0;padding:.6rem 1rem;border-left:3px solid var(--accent2);background:var(--panel2);color:var(--text);font-size:.95rem}

/* ---- 検索キーワード ---- */
.keywords{font-size:.85rem;color:var(--muted);margin-top:1rem;font-family:var(--mono);word-break:break-word}

/* ---- フッタ ---- */
footer{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line-strong);color:var(--muted);font-size:.85rem}
footer strong{color:var(--text)}
address{font-style:normal}

/* 著作権表示（中央・見出し風） */
.copyright{
  text-align:center;
  color:var(--head);
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.06em;
  margin:1.2rem 0 .2rem;
}

hr{border:0 none;height:2px;background-color:var(--line-strong);margin:1.2rem 0}
img{max-width:99%;height:auto}

/* ============================================================
   トップページ（index）用スタイル
   ============================================================ */
.banner{background:var(--accent);color:#ffffff;text-align:center;padding:.55rem;border-radius:6px;font-weight:700;letter-spacing:.04em;margin:0 0 1.6rem;text-shadow:0 1px 3px rgba(0,64,64,.5)}
.hero{text-align:center}
.hero .site{font-size:1.05rem;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;margin:.2rem 0}
.hero h1{color:var(--head);font-size:2rem;margin:.2rem 0}
/* トップページの名前リンクだけ例外的に「明るく」強調（CTA） */
.name-link{display:inline-block;background:#8ff3cf;color:#ffffff;font-size:1.75rem;font-weight:800;text-decoration:none;padding:.55rem 1.6rem;border-radius:12px;margin:.6rem 0;text-shadow:0 1px 3px rgba(0,64,64,.5);box-shadow:0 0 24px rgba(143,243,207,.55),0 4px 16px rgba(0,0,0,.25);transition:.15s}
.name-link:hover{background:#b8ffe4;color:#ffffff;transform:translateY(-2px);box-shadow:0 0 32px rgba(184,255,228,.75),0 10px 26px rgba(0,0,0,.3)}
.name-link:visited{color:#ffffff}
.name-link .arrow{font-size:.9rem;color:#ffffff;margin-left:.45rem;font-weight:700}

/* ページ上部へ戻るリンク */
.pagetop{text-align:center;margin:1.6rem 0 .2rem}
.pagetop a{font-size:.9rem}
.hero .lead{color:var(--text);margin:1rem auto .3rem;max-width:38em}
.hero .roles{color:var(--accent);font-weight:700;letter-spacing:.05em;margin:.2rem 0 .6rem}
.subtitle{color:var(--muted);font-style:italic;text-align:center;letter-spacing:.05em}

/* ボタン群 */
.btnrow{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.2rem 0}
.btn{display:inline-block;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent2);border-radius:8px;padding:.6rem 1.1rem;text-decoration:none;color:var(--text);transition:.15s}
.btn:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px);box-shadow:0 6px 18px rgba(116,198,157,.18)}

/* 現代俳句 */
.haiku{text-align:center;margin-top:1.5rem}
.haiku blockquote{display:inline-block;border-left:3px solid var(--accent2);background:var(--panel);color:var(--text);padding:.7rem 1.4rem;margin:.5rem auto 0;border-radius:6px;white-space:pre-line;font-size:1.05rem;line-height:1.6}
.haiku .by{color:var(--muted);font-size:.82rem;margin:.25rem 0 1.1rem}

/* GitHub 等のハイライト行 */
.link-inline{margin:1rem 0;text-align:center}

/* ============================================================
   モバイル対応（CSS のみ。HTML構造は変更しない）
   ============================================================ */
@media (max-width: 640px){
  .wrap{padding:1.5rem .9rem 3rem}
  header h1{font-size:1.35rem;line-height:1.4}
  header .aka{font-size:.85rem}
  .hero h1{font-size:1.5rem}
  .hero .site{font-size:.9rem}
  .name-link{font-size:1.3rem;padding:.5rem 1.1rem}
  .toc{padding:.8rem 1rem}
  .toc ul{gap:.3rem .6rem}
  .toc li{font-size:.85rem}
  .callout{padding:.85rem 1rem;font-size:.92rem}
  h2{font-size:1.05rem}
  h2 .en{display:block;margin-left:0;font-size:.72rem}
  /* 横に長い表（比較表・経歴表など）は横スクロールにして崩れを防ぐ */
  table.timeline{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .timeline th,.timeline td{font-size:.85rem;padding:.4rem .55rem}
  .grid{grid-template-columns:1fr}
  .history .era{grid-template-columns:1fr;gap:.2rem}
  .btnrow{gap:.5rem}
  .works li{padding:.55rem .8rem}
  .namebox{padding:.9rem 1rem}
  .copyright{font-size:1rem}
}