/*
Theme Name: alterna
Theme URI: https://alterna-studio.jp
Description: alterna（オルタナデザイン）公式サイト用オリジナルテーマ。クリーン・上品・余白を重視したコーポレート／ポートフォリオサイト。
Author: alterna
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: alterna
*/

/* =========================================================
   Design Tokens（branding.md / top-page-spec.md より）
   ========================================================= */
:root {
  /* カラー */
  --color-primary: #63a4c2;   /* メイン（青） */
  --color-primary-dark: #4f8ead;
  --color-secondary: #666666; /* サブ（グレー） */
  --color-text: #333333;      /* 本文 */
  --color-text-light: #666666;/* 補足 */
  --color-bg: #ffffff;        /* 背景 */
  --color-line: #d9e6ec;      /* 罫線 */
  --color-bg-pale: #eef7fa;   /* 淡い青背景 */

  /* タイポグラフィ */
  --font-jp: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
  --font-mincho: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", "YuMincho", "游明朝", "Noto Serif JP", serif;
  --font-en: "Helvetica Neue", "Inter", Arial, sans-serif;

  /* レイアウト */
  --content-width: 1200px;
  --gutter-pc: 80px;
  --gutter-sp: 20px;
  --section-gap-pc: 120px;
  --section-gap-sp: 72px;

  /* 角丸（デザイン案に合わせて柔らかく） */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --transition: 0.3s ease;
}

/* =========================================================
   Reset / Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* =========================================================
   Layout utilities
   ========================================================= */
.l-container {
  width: 100%;
  max-width: calc(var(--content-width) + var(--gutter-pc) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter-pc);
}
.l-section { padding-block: var(--section-gap-pc); }

/* セクションラベル（英字小見出し） */
.c-label {
  font-family: var(--font-en);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 16px;
}
/* 大見出し（明朝・上品な印象） */
.c-heading {
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.c-lead { color: var(--color-text-light); }

/* テキストリンク（矢印付き） */
.c-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 15px;
}
.c-arrow-link::after { content: "→"; transition: transform var(--transition); }
.c-arrow-link:hover { color: var(--color-primary-dark); }
.c-arrow-link:hover::after { transform: translateX(4px); }

/* ボタン */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.c-btn::after { content: "→"; }
.c-btn--primary { background: var(--color-primary); color: #fff; }
.c-btn--primary:hover { background: var(--color-primary-dark); }
.c-btn--outline { background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); }
.c-btn--outline:hover { background: var(--color-bg-pale); }
.c-btn--white { background: #fff; color: var(--color-primary); }
.c-btn--white:hover { background: var(--color-bg-pale); }

/* スクロールフェードイン */
.js-fade { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js-fade.is-visible { opacity: 1; transform: none; }

/* セクション別の詳細スタイルは assets/css/sections.css に分離し、
   inc/enqueue.php で読み込む。 */