/*
Theme Name: AIと、つくる。
Theme URI:
Author: ikushima
Author URI:
Description: 『AIと、つくる。』専用のオリジナルテーマ。生成りの背景、墨色の文字、藍の差し色、明朝の見出し、そして鉤括弧『 』をしるしとする世界観を、そのまま保ちます。
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ai-to-tsukuru
*/

:root{
  --bg:#f3efe6; --bg2:#eae4d8; --ink:#23221d; --ink-soft:#736f67;
  --ai:#1f3d5a; --ai-light:#3a6286; --line:#d8d1c2;
  --warn-bg:#f5eee2; --shot-bg:#e9e2d3;
  --maxw:1120px; --readw:680px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }
body{ background:var(--bg); color:var(--ink);
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; line-height:2.1;
  -webkit-font-smoothing:antialiased; font-feature-settings:"palt"; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.read{ max-width:var(--readw); margin:0 auto; }

/* 鉤括弧シグネチャー：主役として大きく、堂々と */
.embrace{ display:inline-block; white-space:nowrap; }
.embrace .bk{ color:var(--ai); display:inline-block; opacity:0; transform:translateY(4px);
  transition:opacity .45s ease, transform .45s ease; font-size:1.15em; }
.embrace .word{ opacity:0; transition:opacity .5s ease .18s; }
.embrace.on .bk{ opacity:1; transform:translateY(0); }
.embrace.on .bk.r{ transition-delay:.06s; }
.embrace.on .word{ opacity:1; }

/* ヘッダー */
header{ padding:22px 0; position:sticky; top:0; background:rgba(243,239,230,.9);
  backdrop-filter:blur(8px); z-index:20; border-bottom:1px solid transparent; transition:border-color .3s; }
.head-inner{ max-width:var(--maxw); margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; }
header.scrolled{ border-bottom-color:var(--line); }
.logo{ font-size:17px; letter-spacing:.1em; font-weight:600; display:inline-flex; align-items:baseline; text-decoration:none; color:var(--ink); }
.logo .bk{ color:var(--ai); font-weight:400; }
.logo .core{ margin:0 .1em; }
.logo .dot{ color:var(--ai); }
.nav{ display:flex; gap:28px; align-items:center; }
.nav a{ font-family:"Helvetica Neue",sans-serif; font-size:13.5px; letter-spacing:.06em; color:var(--ink-soft); text-decoration:none; transition:color .2s; }
.nav a:hover{ color:var(--ai); }
.nav a.start{ color:#fff; background:var(--ai); padding:9px 20px; border-radius:1px; }
.nav a.start:hover{ background:var(--ai-light); }
.menu-btn{ display:none; background:none; border:none; font-size:22px; color:var(--ink); cursor:pointer; }

/* ① つかむ */
.hero{ min-height:86vh; display:flex; flex-direction:column; justify-content:center; padding:80px 0; text-align:center; }
.hero .eyebrow{ font-family:"Helvetica Neue",sans-serif; font-size:11.5px; letter-spacing:.3em; color:var(--ink-soft); margin-bottom:42px; }
.hero h1{ font-size:clamp(28px,4.4vw,48px); line-height:1.95; letter-spacing:.05em; font-weight:600; margin-bottom:44px; }
.hero h1 .q{ color:var(--ai); }
.hero .sub{ font-size:clamp(15px,1.4vw,17.5px); line-height:2.4; color:var(--ink-soft); font-family:"Helvetica Neue",sans-serif; letter-spacing:.04em; }
.scroll-hint{ margin-top:78px; font-family:"Helvetica Neue",sans-serif; font-size:10.5px; letter-spacing:.3em; color:var(--ink-soft); }
.scroll-hint .li{ display:block; width:1px; height:44px; background:var(--line); margin:18px auto 0; }

section{ padding:clamp(80px,10vw,138px) 0; }

/* ② 状況 */
.scene{ background:var(--bg2); }
.scene .read{ text-align:left; }
.scene p{ font-size:clamp(16px,1.5vw,18px); line-height:2.4; letter-spacing:.03em; margin-bottom:30px; }
.scene p:last-child{ margin-bottom:0; }
.scene .soft{ color:var(--ink-soft); }
.scene .turn{ font-size:clamp(17px,1.85vw,21px); line-height:2.25; margin-top:48px; text-align:center; }

/* ③ 目指すこと（核心） */
.vision{ text-align:center; }
.vision .small{ font-family:"Helvetica Neue",sans-serif; font-size:11.5px; letter-spacing:.28em; color:var(--ink-soft); margin-bottom:48px; }
.vision .read{ max-width:720px; }
.vision p{ font-size:clamp(16px,1.6vw,19px); line-height:2.4; letter-spacing:.03em; margin-bottom:28px; }
.vision p:last-child{ margin-bottom:0; }
.vision .lead-line{ font-size:clamp(19px,2vw,23px); font-weight:600; line-height:2.1; margin-top:8px; }
.vision .lead-line .em{ color:var(--ai); }

/* ④ ペルソナ */
.who{ background:var(--bg2); }
.who .head{ text-align:center; margin-bottom:60px; }
.who .small{ font-family:"Helvetica Neue",sans-serif; font-size:11.5px; letter-spacing:.28em; color:var(--ink-soft); margin-bottom:22px; }
.who h2{ font-size:clamp(20px,2.3vw,27px); line-height:1.8; font-weight:600; letter-spacing:.04em; }
.who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:960px; margin:0 auto; }
.who-card{ background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:38px 30px; text-align:center; }
.who-card .qt-mark{ font-size:26px; color:var(--ai); margin-bottom:18px; }
.who-card p{ font-size:15px; line-height:2.05; letter-spacing:.02em; }

/* ⑤ 手に入るもの（シグネチャー） */
.gain{ text-align:center; }
.gain h2{ font-size:clamp(22px,3vw,33px); line-height:2.1; font-weight:600; letter-spacing:.04em; }
.gain h2 .soft{ color:var(--ink-soft); }

/* ⑥ 約束 */
.promise{ background:var(--bg2); }
.promise .head{ text-align:center; margin-bottom:60px; }
.promise .small{ font-family:"Helvetica Neue",sans-serif; font-size:11.5px; letter-spacing:.28em; color:var(--ink-soft); margin-bottom:22px; }
.promise h2{ font-size:clamp(20px,2.3vw,27px); line-height:1.8; font-weight:600; letter-spacing:.04em; }
.promise-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:980px; margin:0 auto; }
.promise-item{ text-align:center; }
.promise-item .ic{ font-family:"Hiragino Mincho ProN",serif; font-size:24px; color:var(--ai); margin-bottom:18px; }
.promise-item h3{ font-size:16.5px; letter-spacing:.03em; margin-bottom:14px; font-weight:600; line-height:1.7; }
.promise-item p{ font-size:14px; color:var(--ink-soft); font-family:"Helvetica Neue",sans-serif; line-height:2; }

/* ⑦ 道のり */
.path .head{ text-align:center; margin-bottom:70px; }
.path .small{ font-family:"Helvetica Neue",sans-serif; font-size:11.5px; letter-spacing:.28em; color:var(--ink-soft); margin-bottom:22px; }
.path h2{ font-size:clamp(20px,2.3vw,27px); line-height:1.8; font-weight:600; letter-spacing:.04em; }
.path .lead{ font-size:14.5px; color:var(--ink-soft); font-family:"Helvetica Neue",sans-serif; margin-top:18px; line-height:2; }
.stages{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.stage{ background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:36px 32px; transition:border-color .25s, transform .25s; }
.stage:hover{ border-color:var(--ai-light); transform:translateY(-3px); }
.stage h3{ font-size:22px; letter-spacing:.05em; margin-bottom:8px; font-weight:600; }
.stage h3 .bk{ color:var(--ai); font-weight:400; }
.stage .summary{ font-family:"Helvetica Neue",sans-serif; font-size:13px; color:var(--ai); letter-spacing:.04em; margin-bottom:24px; }
.stage .items{ list-style:none; border-top:1px solid var(--line); padding-top:22px; }
.stage .items li{ font-family:"Helvetica Neue",sans-serif; font-size:13.5px; color:var(--ink-soft); line-height:1.9; padding:7px 0 7px 18px; position:relative; }
.stage .items li::before{ content:"—"; position:absolute; left:0; color:var(--ai); }

/* ⑧ FAQ */
.faq{ background:var(--bg2); }
.faq .head{ text-align:center; margin-bottom:56px; }
.faq .small{ font-family:"Helvetica Neue",sans-serif; font-size:11.5px; letter-spacing:.28em; color:var(--ink-soft); margin-bottom:22px; }
.faq h2{ font-size:clamp(20px,2.3vw,27px); line-height:1.8; font-weight:600; letter-spacing:.04em; }
.qa-list{ max-width:680px; margin:0 auto; }
.qa{ border-bottom:1px solid var(--line); padding:28px 0; }
.qa:first-child{ border-top:1px solid var(--line); }
.qa .q{ font-size:16.5px; font-weight:600; letter-spacing:.02em; display:flex; gap:14px; line-height:1.7; }
.qa .q .mk{ color:var(--ai); font-family:"Helvetica Neue",sans-serif; }
.qa .a{ font-size:14.5px; color:var(--ink-soft); font-family:"Helvetica Neue",sans-serif; line-height:2.05; margin-top:14px; padding-left:30px; }

/* ⑨ 行動 */
.cta{ text-align:center; }
.cta h2{ font-size:clamp(21px,2.6vw,29px); line-height:2.1; font-weight:600; letter-spacing:.04em; margin-bottom:30px; }
.cta .reassure{ font-family:"Helvetica Neue",sans-serif; font-size:clamp(14px,1.3vw,15px); color:var(--ink-soft); line-height:2.25; margin-bottom:52px; letter-spacing:.03em; }
.btn{ display:inline-block; background:var(--ai); color:#fff; text-decoration:none;
  font-family:"Helvetica Neue",sans-serif; font-size:15px; letter-spacing:.14em; padding:20px 60px; border-radius:1px;
  transition:background .3s, transform .3s; }
.btn:hover{ background:var(--ai-light); transform:translateY(-2px); }

/* 記事一覧「まずは、この記事から」 ※WordPress化で追加 */
.firstreads{ text-align:center; }
.firstreads .head{ margin-bottom:60px; }
.firstreads .small{ font-family:"Helvetica Neue",sans-serif; font-size:11.5px; letter-spacing:.28em; color:var(--ink-soft); margin-bottom:22px; }
.firstreads h2{ font-size:clamp(20px,2.3vw,27px); line-height:1.8; font-weight:600; letter-spacing:.04em; }
.posts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:980px; margin:0 auto; text-align:left; }
.post-card{ display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:34px 30px; text-decoration:none; color:var(--ink); transition:border-color .25s, transform .25s; }
.post-card:hover{ border-color:var(--ai-light); transform:translateY(-3px); }
.post-card .date{ font-family:"Helvetica Neue",sans-serif; font-size:12px; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:16px; }
.post-card h3{ font-size:18px; line-height:1.85; font-weight:600; letter-spacing:.02em; margin-bottom:16px; }
.post-card .excerpt{ font-family:"Helvetica Neue",sans-serif; font-size:13px; line-height:1.95; color:var(--ink-soft); }
.post-card .more{ margin-top:auto; padding-top:20px; font-family:"Helvetica Neue",sans-serif; font-size:12.5px; letter-spacing:.06em; color:var(--ai); }
.post-card .more .bk{ color:var(--ai); }
.firstreads .empty{ color:var(--ink-soft); font-family:"Helvetica Neue",sans-serif; font-size:14px; line-height:2; }
.firstreads .alllink{ margin-top:54px; }
.firstreads .alllink a{ font-family:"Helvetica Neue",sans-serif; font-size:13.5px; letter-spacing:.08em; color:var(--ai); text-decoration:none; }

/* ===== 記事ページ（article_sample.html を正解として準拠） =====
   記事ページの body には WordPress が自動で .single クラスを付けるので、
   トップページに影響しないよう、共通要素の上書きは .single で限定する。 */

/* 記事ページのヘッダー（ロゴ＋「記事一覧へ戻る」・常に下罫線） */
.single header{ border-bottom:1px solid var(--line); }
.single .head-inner{ max-width:980px; }
.back{ font-family:"Helvetica Neue",sans-serif; font-size:13px; color:var(--ink-soft); text-decoration:none; }
.back:hover{ color:var(--ai); }

/* 記事は読みやすい幅（720px）に */
.single .wrap{ max-width:var(--readw); }
.single{ --readw:720px; }

/* 記事タイトル部 */
.art-hero{ padding:72px 0 56px; text-align:center; border-bottom:1px solid var(--line); }
.art-hero .pill{ display:inline-block; font-family:"Helvetica Neue",sans-serif; font-size:11px; letter-spacing:.1em; color:var(--ai); border:1px solid var(--ai); border-radius:99px; padding:5px 15px; margin-bottom:28px; }
.art-hero h1{ font-size:clamp(26px,4vw,38px); line-height:1.7; letter-spacing:.04em; font-weight:600; margin-bottom:26px; }
.art-hero .lead{ font-family:"Helvetica Neue",sans-serif; font-size:14.5px; color:var(--ink-soft); line-height:2.1; }
.art-hero .meta{ font-family:"Helvetica Neue",sans-serif; font-size:12px; color:var(--ink-soft); margin-top:30px; letter-spacing:.06em; }

/* 本文 */
.post-article{ padding:64px 0 40px; }
.post-article p{ font-size:16.5px; line-height:2.25; margin-bottom:28px; letter-spacing:.02em; }
.post-article h2{ font-size:24px; font-weight:600; letter-spacing:.03em; margin:64px 0 28px; padding-top:20px; line-height:1.6; }
.post-article h2 .step{ display:block; font-family:"Helvetica Neue",sans-serif; font-size:12px; letter-spacing:.15em; color:var(--ai); margin-bottom:10px; font-weight:600; }
.post-article h3{ font-size:19px; font-weight:600; letter-spacing:.03em; margin:44px 0 18px; }
.post-article strong{ color:var(--ai); font-weight:600; }
.post-article a{ color:var(--ai); text-decoration:underline; text-underline-offset:4px; }
.post-article img{ max-width:100%; height:auto; border-radius:4px; }
.post-article ul,.post-article ol{ padding-left:24px; margin-bottom:28px; }
.post-article li{ margin-bottom:10px; line-height:2.2; }
.post-article .soft{ color:var(--ink-soft); }

/* たとえ話・かみくだき枠 */
.plain{ background:var(--bg2); border-radius:8px; padding:28px 30px; margin:32px 0; font-size:15.5px; line-height:2.15; }
.plain .t{ font-family:"Helvetica Neue",sans-serif; font-size:12px; letter-spacing:.12em; color:var(--ai); font-weight:600; margin-bottom:14px; }

/* 用語ほどき（インライン注釈） */
.term{ border-bottom:1px dashed var(--ai-light); cursor:help; }

/* つまずき先回り枠（このサイトの核） */
.heads-up{ background:var(--warn-bg); border:1px solid var(--line); border-left:3px solid var(--ai); border-radius:6px; padding:26px 30px; margin:34px 0; }
.heads-up .t{ font-family:"Helvetica Neue",sans-serif; font-size:13px; letter-spacing:.06em; color:var(--ai); font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.heads-up .t::before{ content:"！"; display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; background:var(--ai); color:#fff; border-radius:50%; font-size:12px; flex:0 0 auto; }
.heads-up p{ font-size:15px; line-height:2.1; margin-bottom:0; }
.heads-up p + p{ margin-top:14px; }

/* スクリーンショット指定枠（下書き用・公開時は削除する） */
.shot{ background:var(--shot-bg); border:1px dashed var(--ai-light); border-radius:6px; padding:22px 26px; margin:34px 0; }
.shot .t{ font-family:"Helvetica Neue",sans-serif; font-size:12px; letter-spacing:.08em; color:var(--ai); font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.shot .t::before{ content:"📷"; }
.shot .what{ font-size:15px; line-height:2; margin-bottom:8px; }
.shot .point{ font-family:"Helvetica Neue",sans-serif; font-size:13px; color:var(--ink-soft); line-height:1.95; }
.shot .point b{ color:var(--ai); }

/* 編集メモ（下書き用・公開時は削除する） */
.editor-note{ background:#23221d; color:#f3efe6; font-family:"Helvetica Neue",sans-serif; font-size:12.5px; line-height:1.9; padding:14px 20px; border-radius:6px; margin:30px 0; letter-spacing:.02em; }
.editor-note b{ color:#9db8d0; }

/* つぎは、これ（次の記事へ） */
.post-next{ border-top:1px solid var(--line); margin-top:60px; padding-top:44px; text-align:center; }
.post-next .label{ font-family:"Helvetica Neue",sans-serif; font-size:12px; letter-spacing:.15em; color:var(--ink-soft); margin-bottom:16px; }
.post-next a{ font-size:20px; font-weight:600; color:var(--ink); text-decoration:none; letter-spacing:.03em; }
.post-next a:hover{ color:var(--ai); }
.post-next a .bk{ color:var(--ai); }

/* 記事ページのフッター（簡素・中央） */
.single footer{ padding:40px 0; text-align:center; }
.foot-simple{ font-family:"Helvetica Neue",sans-serif; font-size:10.5px; color:var(--ink-soft); letter-spacing:.08em; }

/* ===== 固定ページ・一覧ページ・ページ送り・メニュー（仕上げ） ===== */
/* 固定ページ（このサイトについて 等） */
.page .wrap{ max-width:720px; }
.page-hero{ padding:64px 0 44px; }

/* 記事一覧ページの見出し余白 */
.archive-list .head{ margin-bottom:54px; }

/* ページ送り */
.archive-list .nav-links{ margin-top:54px; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.archive-list .page-numbers{ font-family:"Helvetica Neue",sans-serif; font-size:13.5px; letter-spacing:.04em; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); border-radius:2px; padding:9px 15px; min-width:42px; text-align:center; display:inline-block; }
.archive-list a.page-numbers:hover{ color:var(--ai); border-color:var(--ai-light); }
.archive-list .page-numbers.current{ color:#fff; background:var(--ai); border-color:var(--ai); }
.archive-list .page-numbers.dots{ border:none; }

/* 管理画面でメニューを作って割り当てた場合の見た目（初期は確定デザインのナビを使用） */
.nav .nav-list{ display:flex; gap:28px; align-items:center; list-style:none; }
.nav .nav-list a{ font-family:"Helvetica Neue",sans-serif; font-size:13.5px; letter-spacing:.06em; color:var(--ink-soft); text-decoration:none; transition:color .2s; }
.nav .nav-list a:hover{ color:var(--ai); }
.nav .nav-list .start a,.nav .nav-list .menu-item-start a{ color:#fff; background:var(--ai); padding:9px 20px; border-radius:1px; }
.nav .nav-list .start a:hover,.nav .nav-list .menu-item-start a:hover{ background:var(--ai-light); }

footer{ border-top:1px solid var(--line); padding:54px 0 64px; }
.foot-grid{ max-width:var(--maxw); margin:0 auto; padding:0 40px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; }
.foot-mark{ font-family:"Hiragino Mincho ProN",serif; font-size:15px; letter-spacing:.1em; }
.foot-mark .bk{ color:var(--ai); }
.foot-mark .tag{ display:block; font-family:"Helvetica Neue",sans-serif; font-size:12px; color:var(--ink-soft); margin-top:12px; letter-spacing:.02em; }
.foot-nav{ display:flex; gap:48px; flex-wrap:wrap; }
.foot-col h4{ font-family:"Helvetica Neue",sans-serif; font-size:11px; letter-spacing:.2em; color:var(--ink-soft); margin-bottom:16px; font-weight:600; }
.foot-col a{ display:block; font-family:"Helvetica Neue",sans-serif; font-size:13px; color:var(--ink); text-decoration:none; margin-bottom:11px; letter-spacing:.03em; }
.foot-col a:hover{ color:var(--ai); }
.copy{ max-width:var(--maxw); margin:46px auto 0; padding:0 40px; font-family:"Helvetica Neue",sans-serif; font-size:10.5px; color:var(--ink-soft); letter-spacing:.08em; }

.rise{ opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .7s ease; }
.rise.on{ opacity:1; transform:translateY(0); }

@media(max-width:760px){
  .wrap,.head-inner,.foot-grid,.copy{ padding-left:24px; padding-right:24px; }
  .nav{ display:none; }
  .nav.open{ display:flex; flex-direction:column; align-items:flex-start; position:absolute; top:64px; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:18px 24px 24px; gap:4px; }
  .nav.open a{ padding:12px 0; font-size:15px; width:100%; }
  .nav.open a.start{ width:auto; margin-top:8px; }
  .nav.open .nav-list{ flex-direction:column; align-items:flex-start; width:100%; gap:0; }
  .menu-btn{ display:block; }
  .who-grid,.promise-grid,.stages,.posts-grid{ grid-template-columns:1fr; }
  .foot-grid{ flex-direction:column; }
}