/*
Theme Name: うちのAX
Theme URI: https://ax.thinktion.net/
Author: シンクション株式会社
Description: AIメディア「うちのAX」のテーマ。thinktion.net のテーマ（Thinktion_Theme_Template）の設計変数とコンポーネントの作法をそのまま引き継いでいます。色・書体・コンテナ幅・見出しの型（英字＋日本語）・ボタン・一覧行・CTAの形は本体サイトと同じです。あわせて読者ペルソナv1 §4 の7基準を満たしています。
Version: 0.3.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: uchino-ax
*/

/* =========================================================
   1. 設計変数 ── thinktion-site/assets/styles/foundation/_variable.scss と同一
   ========================================================= */
:root{
  --primary:#0253ee;
  --secondary:#3c3c3c;
  --accent:#f60b0d;
  --text:#222;
  --text-light:#666;
  --text-muted:#999;
  --text-sub:#3c3c3c;
  --bg:#fff;
  --bg-gray:#f5f5f5;
  --bg-light:#ebebeb;
  --border:#c8c8c8;
  --border-dark:#787878;

  --font-ja:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-en:"Lato",sans-serif;

  --w-content:1100px;
  --w-narrow:800px;
  --sp-sec-sp:60px;
  --sp-sec-pc:100px;
}

/* =========================================================
   2. ベース ── 本体サイトの _base.scss と同一（16px / 1.8 / justify）
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:inherit; text-decoration:none; }

body{
  margin:0;
  font-family:var(--font-ja);
  font-size:16px;
  line-height:1.8;
  color:var(--text);
  text-align:justify;
  background-color:var(--bg);
}

/* 数字と英字は Lato。本体サイトの $font-family-en に合わせる */
.en,.num{ font-family:var(--font-en); font-weight:700; }

/* コンテナ ── 本体サイトの .l-container と同一 */
.l-container{
  width:100%; max-width:calc(var(--w-content) + 40px);
  padding-right:20px; padding-left:20px; margin-right:auto; margin-left:auto;
}
.l-container--narrow{ max-width:calc(var(--w-narrow) + 40px); }
@media (width >= 1024px){
  .l-container{ max-width:calc(var(--w-content) + 120px); padding-right:60px; padding-left:60px; }
  .l-container--narrow{ max-width:calc(var(--w-narrow) + 120px); }
}

.l-section{ padding:var(--sp-sec-sp) 0 0; }
@media (width >= 768px){ .l-section{ padding:var(--sp-sec-pc) 0 0; } }

/* =========================================================
   3. 見出し ── 本体サイトの .c-heading（英字＋日本語の2段）
   ========================================================= */
.c-heading{ display:flex; flex-direction:column; gap:8px 0; margin:0 0 24px; }
.c-heading__en{
  display:block; font-family:var(--font-en); font-size:40px; font-weight:700;
  line-height:1.15; color:var(--text); letter-spacing:.03em;
}
.c-heading__ja{ display:block; margin:0; font-size:12px; font-weight:500; line-height:1.25; color:var(--text); }
.c-heading__note{ font-size:12px; font-weight:400; color:var(--text-light); }
@media (width >= 768px){
  .c-heading{ flex-flow:row wrap; gap:0 12px; align-items:center; margin:0 0 32px; }
  .c-heading__en{ font-size:clamp(48px,6.1vw,88px); }
  .c-heading__ja{ font-size:16px; transform:translateY(4px); }
  .c-heading__note{ font-size:13px; transform:translateY(4px); }
  .c-heading__more{ margin-left:auto; transform:translateY(4px); }
}
.c-heading__more{ font-size:14px; color:var(--text); }
.c-heading__more:hover{ color:var(--primary); }

/* =========================================================
   4. ボタン ── 本体サイトの .c-button（白地・黒枠・角丸30px・右に黒丸）
   ========================================================= */
.c-button{
  position:relative; display:inline-flex; gap:16px; align-items:center; justify-content:space-between;
  min-width:200px; height:60px; padding:0 20px 0 30px; overflow:hidden;
  font-size:14px; font-weight:500; line-height:1.5; color:var(--text);
  background-color:#fff; border:1px solid var(--text); border-radius:30px; cursor:pointer;
  font-family:inherit;
}
.c-button::before{
  position:absolute; top:50%; right:20px; z-index:1; width:11px; height:11px; content:"";
  pointer-events:none; background-color:var(--secondary); border-radius:50%;
  transform:translate(0,-50%) scale(0);
}
.c-button__text{ position:relative; z-index:2; white-space:nowrap; }
.c-button__arrow{
  position:relative; z-index:2; display:block; flex-shrink:0; width:11px; height:11px;
  background-color:var(--text); border-radius:50%;
}
@media (width >= 768px){
  .c-button{ font-size:16px; transition:color .15s ease; }
  .c-button::before{ transition:transform .3s ease; transform:translate(0,-50%) scale(1); }
  .c-button:not(:hover)::before{ transition:transform .3s ease; transform:translate(0,-50%) scale(0); }
  .c-button:hover{ color:#fff; transition:color .2s ease .25s; }
  .c-button:hover::before{ transition:transform .5s ease .25s; transform:translate(0,-50%) scale(60); }
  .c-button__arrow{ transition:background-color .15s ease; }
  .c-button:hover .c-button__arrow{ background-color:#fff; transition:background-color .2s ease .25s; }
}
.c-button--wide{ min-width:264px; }

/* =========================================================
   5. ヘッダー
   ========================================================= */
.site-head{ position:relative; z-index:5; background:#fff; }
.site-head__in{ display:flex; align-items:center; gap:16px; padding:18px 0; flex-wrap:wrap; }
.site-head__brand{ display:flex; align-items:baseline; gap:12px; }
.site-head__name{ font-size:21px; font-weight:700; letter-spacing:.04em; color:var(--text); line-height:1.2; }
.site-head__tag{ font-size:12px; color:var(--text-light); letter-spacing:.04em; }
.site-nav{ margin-left:auto; display:flex; gap:26px; }
.site-nav a{ font-size:14px; font-weight:500; color:var(--text); white-space:nowrap; }
.site-nav a:hover{ color:var(--primary); }

/* =========================================================
   6. ヒーロー ── 本体サイトの .p-page-hero（青とオレンジの淡いモヤ）
   ========================================================= */
.p-hero{ position:relative; overflow:hidden; }
.p-hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 70% at 15% 50%, rgb(140 195 240 / 30%) 0%, rgb(155 205 245 / 10%) 50%, transparent 80%),
    radial-gradient(ellipse 50% 60% at 30% 35%, rgb(135 190 238 / 22%) 0%, rgb(150 200 242 / 8%) 48%, transparent 78%),
    radial-gradient(ellipse 55% 70% at 85% 50%, rgb(245 175 110 / 24%) 0%, rgb(248 185 125 / 8%) 50%, transparent 80%),
    radial-gradient(ellipse 50% 60% at 72% 65%, rgb(242 170 105 / 18%) 0%, rgb(245 180 120 / 6%) 48%, transparent 78%),
    #fff;
}
.p-hero__bg::after{
  position:absolute; bottom:0; left:0; width:100%; height:40%; content:"";
  background:linear-gradient(to top,#fff 0%,transparent 100%);
}
.p-hero__in{ position:relative; z-index:1; padding:56px 0 52px; }
.p-hero__en{ display:block; font-family:var(--font-en); font-size:44px; font-weight:700; line-height:1.1; letter-spacing:.03em; color:var(--text); }
.p-hero__ja{ margin:14px 0 20px; font-size:24px; font-weight:700; line-height:1.5; color:var(--text); letter-spacing:.02em; }
.p-hero__lead{ margin:0 0 26px; max-width:720px; font-size:15px; line-height:2; color:var(--text-sub); }
@media (width >= 768px){
  .p-hero__in{ padding:84px 0 76px; }
  .p-hero__en{ font-size:clamp(56px,7vw,96px); }
  .p-hero__ja{ margin:18px 0 24px; font-size:30px; }
  .p-hero__lead{ font-size:16px; }
}

/* =========================================================
   7. 事例（看板枠）── ペルソナ基準3・5・7
   ========================================================= */
.p-case__lead{ margin:0 0 40px; }
.p-case__grid{ display:grid; gap:28px; }
@media (width >= 768px){ .p-case__grid{ grid-template-columns:1.15fr 1fr; gap:44px; align-items:start; } }

/* 「うちと同じか」を見出しより先に */
.c-who{
  display:inline-block; margin:0 0 14px; padding:5px 12px;
  font-size:12px; font-weight:500; line-height:1.5; color:var(--text);
  background-color:var(--bg-gray); text-align:left;
}
.p-case__title{ margin:0 0 16px; font-size:22px; font-weight:700; line-height:1.65; color:var(--text); }
.p-case__text{ margin:0 0 22px; font-size:15px; line-height:1.95; color:var(--text-sub); }
@media (width >= 768px){ .p-case__title{ font-size:26px; } }

/* 数字＝この画面でいちばん目立つもの */
.c-figs{ display:grid; gap:26px; padding:30px 28px; background-color:var(--bg-gray); }
@media (width >= 768px){ .c-figs{ padding:36px 34px; } }
.c-fig__k{ display:block; margin:0 0 6px; font-size:13px; font-weight:400; line-height:1.5; color:var(--text-light); text-align:left; }
.c-fig__v{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.c-fig__b{ font-family:var(--font-en); font-size:20px; font-weight:700; color:var(--text-muted); text-decoration:line-through; }
.c-fig__ar{ font-size:15px; color:var(--text-muted); }
.c-fig__a{ font-family:var(--font-en); font-size:52px; font-weight:700; line-height:1; color:var(--primary); letter-spacing:-.01em; }
.c-fig__u{ font-size:15px; font-weight:500; color:var(--primary); }
@media (width >= 768px){ .c-fig__a{ font-size:60px; } }

.p-case__sub{ display:grid; gap:24px; margin:40px 0 0; }
@media (width >= 768px){ .p-case__sub{ grid-template-columns:1fr 1fr; gap:44px; } }
.p-case__sub .p-case__title{ font-size:18px; margin-bottom:14px; }
.p-case__sub .c-figs{ display:flex; gap:34px; flex-wrap:wrap; padding:22px 22px; }
.p-case__sub .c-fig__a{ font-size:38px; }

/* =========================================================
   8. 今週のうちの数字（R3向け）
   ========================================================= */
.p-report{ padding:32px 0 30px; border-top:1px solid var(--border-dark); border-bottom:1px solid var(--border); }
.p-report__h{ display:flex; align-items:baseline; gap:14px; margin:0 0 24px; flex-wrap:wrap; }
.p-report__h b{ font-size:17px; font-weight:700; color:var(--text); }
.p-report__h span{ font-size:13px; color:var(--text-light); }
.p-report__h .upd{ margin-left:auto; font-size:13px; color:var(--text-muted); }
.p-report__g{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px 20px; }
@media (width >= 768px){ .p-report__g{ grid-template-columns:repeat(4,1fr); gap:26px; } }
.p-report__k{ display:block; margin:0 0 4px; font-size:13px; color:var(--text-light); text-align:left; }
.p-report__v{ font-family:var(--font-en); font-size:34px; font-weight:700; line-height:1.1; color:var(--text); }
.p-report__v small{ font-family:var(--font-ja); font-size:13px; font-weight:400; color:var(--text-light); margin-left:4px; }
.p-report__note{ margin:22px 0 0; font-size:13px; color:var(--text-light); }

/* =========================================================
   9. 記事一覧 ── 本体サイトの .c-news-item（左に日付とカテゴリ、右に見出し）
   ========================================================= */
.c-list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--border-dark); }
.c-list__item{ border-bottom:1px solid var(--border-dark); }
.c-list__link{ display:block; padding:20px 0; color:inherit; }
.c-list__meta{ display:flex; align-items:center; gap:14px; margin:0 0 8px; font-size:14px; line-height:1.87; color:var(--text); flex-wrap:wrap; }
.c-list__date{ font-family:var(--font-en); font-weight:700; letter-spacing:.02em; }
.c-list__cat{ color:var(--primary); font-weight:500; }
.c-list__mins{ color:var(--text-muted); font-size:13px; }
.c-list__title{ margin:0; font-size:15px; font-weight:400; line-height:1.87; color:var(--text); }
.c-list__desc{ margin:6px 0 0; font-size:14px; line-height:1.85; color:var(--text-light); }
.c-list__link:hover .c-list__title{ color:var(--primary); }
@media (width >= 768px){
  .c-list__link{ display:grid; grid-template-columns:220px 1fr; gap:0 15px; align-items:baseline; }
  .c-list__meta{ margin:0; font-size:15px; }
  .c-list__title{ font-size:16px; }
}
@media (width >= 1080px){ .c-list__link{ grid-template-columns:300px 1fr; } }

/* =========================================================
   10. CTA ── 本体サイトの .c-cta（グレー地・中央寄せ・角丸なし）
   ========================================================= */
.c-cta__inner{
  display:flex; flex-direction:column; align-items:center;
  padding:40px 15px; text-align:center; background-color:var(--bg-gray); border-radius:0;
}
@media (width >= 768px){ .c-cta__inner{ padding:56px 48px; } }
.c-cta__title{ margin:0 0 12px; font-size:19px; font-weight:700; line-height:1.6; color:var(--text); }
@media (width >= 768px){ .c-cta__title{ margin:0 0 16px; font-size:24px; } }
.c-cta__lead{ margin:0 0 12px; max-width:620px; font-size:14px; font-weight:500; line-height:2; color:var(--text); text-align:justify; }
@media (width >= 768px){ .c-cta__lead{ margin:0 0 16px; font-size:15px; text-align:center; } }
.c-cta__divider{ display:block; width:40px; height:1px; margin:0 0 20px; background-color:var(--border-dark); }
.c-cta__form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; max-width:520px; }
.c-cta__form input[type=email]{
  flex:1 1 260px; height:60px; padding:0 18px; font-family:inherit; font-size:15px;
  color:var(--text); background:#fff; border:1px solid var(--border); border-radius:30px;
}
.c-cta__fine{ margin:16px 0 0; font-size:12px; color:var(--text-light); }
.c-cta--doing .c-cta__inner{ background-color:#fff; border:1px solid var(--text); }

/* =========================================================
   11. カテゴリ入口
   ========================================================= */
.c-cats{ margin:0; padding:0; list-style:none; border-top:1px solid var(--border-dark); }
.c-cats__item{ border-bottom:1px solid var(--border); }
.c-cats__link{ display:flex; align-items:baseline; gap:8px 20px; padding:20px 0; color:inherit; flex-wrap:wrap; }
.c-cats__n{ font-size:16px; font-weight:700; color:var(--text); min-width:8.5em; }
.c-cats__x{ flex:1 1 320px; font-size:14px; line-height:1.85; color:var(--text-light); }
.c-cats__c{ font-family:var(--font-en); font-size:13px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.c-cats__link:hover .c-cats__n{ color:var(--primary); }

/* =========================================================
   12. 記事ページ
   ========================================================= */
.c-breadcrumb{ padding:18px 0 0; font-size:12px; color:var(--text-light); text-align:left; }
.c-breadcrumb a:hover{ color:var(--primary); }
.c-breadcrumb .sep{ margin:0 8px; color:var(--border); }

.p-single__head{ padding:22px 0 30px; border-bottom:1px solid var(--border-dark); }
.p-single__meta{ display:flex; align-items:center; gap:14px; margin:0 0 16px; font-size:14px; color:var(--text); flex-wrap:wrap; }
.p-single__title{ margin:0 0 20px; font-size:26px; font-weight:700; line-height:1.6; color:var(--text); }
@media (width >= 768px){ .p-single__title{ font-size:34px; } }
.c-author{ display:flex; align-items:baseline; gap:10px; font-size:13px; color:var(--text-light); flex-wrap:wrap; }
.c-author b{ font-size:14px; font-weight:700; color:var(--text); }

.p-single__body{ padding:36px 0 0; }
.entry-content h2{ margin:56px 0 20px; padding:0 0 14px; font-size:21px; font-weight:700; line-height:1.6; color:var(--text); border-bottom:1px solid var(--border-dark); }
.entry-content h3{ margin:38px 0 14px; font-size:18px; font-weight:700; color:var(--text); }
.entry-content p{ margin:0 0 27px; }
.entry-content ul,.entry-content ol{ margin:0 0 27px; padding-left:1.4em; }
.entry-content li{ margin:0 0 11px; }
.entry-content strong{ font-weight:700; color:var(--text); }
.entry-content blockquote{ margin:0 0 27px; padding:24px 26px; font-size:15px; line-height:2; background-color:var(--bg-gray); border-left:3px solid var(--border-dark); }
.entry-content blockquote p:last-child{ margin-bottom:0; }
.entry-content a{ color:var(--primary); text-decoration:underline; }
@media (width >= 768px){ .entry-content h2{ font-size:24px; } }

.p-single__foot > * + *{ margin-top:40px; }

/* =========================================================
   13. フッター
   ========================================================= */
.site-foot{ margin-top:100px; padding:56px 0 0; border-top:1px solid var(--border-dark); }
.site-foot__in{ display:grid; gap:32px; padding:0 0 40px; }
@media (width >= 768px){ .site-foot__in{ grid-template-columns:1.6fr 1fr 1fr; gap:44px; } }
.site-foot h4{ margin:0 0 14px; font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--text); }
.site-foot ul{ margin:0; padding:0; list-style:none; }
.site-foot li{ margin:0 0 10px; font-size:14px; }
.site-foot a:hover{ color:var(--primary); }
.site-foot p{ margin:0 0 12px; font-size:14px; line-height:1.9; color:var(--text-light); }
.site-foot__copy{ padding:18px 0 26px; font-size:12px; color:var(--text-muted); border-top:1px solid var(--border); text-align:left; }

/* =========================================================
   14. ワイヤーの注記（本番では functions.php の関数ごと削除）
   ========================================================= */
.wire-note{ padding:9px 0; font-size:12px; letter-spacing:.03em; color:#fff; text-align:center; background:var(--secondary); }
.wire-note b{ font-weight:700; }

/* 狭い画面 */
@media (width <= 767px){
  .site-head__in{ padding:14px 0 10px; gap:10px; }
  .site-nav{ margin-left:0; width:100%; gap:20px; overflow-x:auto; padding-bottom:4px; }
  .c-cta__form input[type=email]{ flex:1 1 100%; }
  .c-cta__form .c-button{ width:100%; }
  .c-cats__n{ min-width:auto; }
}