@charset "UTF-8";

/* ================================================================
   ORIGINAL CALENDAR | base.css
   法人向けオリジナルカレンダー制作サービスサイト
   ----------------------------------------------------------------
   サイト全体で共通利用するベースCSS。
   個別セクション固有のスタイルは記述しない（p-*.css 側で管理）。

   - 設計: FLOCSS / BEM  ( l- : Layout / c- : Component / p- : Project / u- : Utility )
   - 記法: 通常CSS（ネストなし）・IDセレクタ不使用・!important 原則不使用
   - 方針: モバイルファースト（SPを既定値とし、PC差分を min-width:768px に集約）
   - 前提: WordPress オリジナルテーマ化（wp_enqueue_style で最初に読み込む）

   目次
     1. CSS変数（デザイントークン）
     2. モダンリセット
     3. HTML / body
     4. 基本タイポグラフィ
     5. 画像・リンク・フォーム等の基本要素
     6. レイアウト共通クラス
     7. 汎用コンポーネント
     8. アクセシビリティ
     9. レスポンシブ（PC差分）
   ================================================================ */


/* ================================================================
   1. CSS変数（デザイントークン）
   ================================================================ */
:root {

	/* ------------------------------------------------------------
	   Color
	   低彩度・暖色寄り。紫（primary）はCTA・見出しアクセント・
	   小さなUIに限定し、面で多用しない。
	   ------------------------------------------------------------ */
	--color-primary: #5146C8;        /* ブランドカラー：CTA・英字ラベル・アイコン */
	--color-primary-dark: #4239A4;   /* primary のホバー用濃色（白文字とのコントラストは上がる方向） */
	--color-primary-soft: #fdfcff;   /* 極薄の紫：面で敷ける唯一の primary 系（フロー帯の内側背景等） */
	--color-secondary: #F2EFE8;      /* 生成り：セクション背景・面のアクセント */
	--color-accent: #D6A84B;         /* ゴールド：装飾罫・アイコン等の小面積専用（後述の注意書き参照） */


	--color-text-main: #28282D;      /* 本文・見出し */
	--color-text-sub: #66635F;       /* 補足文・キャプション */

	--color-bg-main: #FDFCF8;        /* 暖色白：サイト全体の地色 */
	--color-bg-sub: #F2EFE8;         /* 生成り：セクション背景 */
	--color-bg-muted: #F4F4F1;       /* 薄いグレー：控えめな区切り背景 */
	--color-bg-light: #FbF8F2; 

	--color-border: #DDD8CF;         /* 罫線・フォーム枠 */
	--color-white: #FFFFFF;

	/* ダーク面（フッター等）専用。
	   --color-primary は --color-dark 上では 2.23:1 しかなく文字色に使えないため、
	   ダーク面用の明るい紫を別トークンとして持つ。 */
	--color-dark: #23252E;              /* ダーク背景（フッター等） */
	--color-border-on-dark: #3A3D48;    /* ダーク面の細い罫線 */
	--color-text-on-dark: #C9CAD0;      /* ダーク面の補足文・リンク */
	--color-primary-on-dark: #8F87E8;   /* ダーク面のブランドアクセント（文字にも使える明度） */

	--color-focus: var(--color-primary); /* フォーカスリング */

	/* [コントラスト基準 / WCAG 2.1 AA]
	   OK  --color-primary   on --color-white    = 6.77:1  （白抜き文字・リンク文字ともに可）
	   OK  --color-text-main on --color-bg-main  = 13.9:1
	   OK  --color-text-sub  on --color-bg-main  = 5.83:1  （補足文サイズでも可）
	   OK  --color-text-main on --color-primary-soft = 12.9:1
	   OK  --color-text-sub  on --color-primary-soft = 5.47:1
	   OK  --color-white     on --color-dark    = 15.3:1
	   OK  --color-text-on-dark    on --color-dark = 9.33:1
	   OK  --color-primary-on-dark on --color-dark = 4.94:1
	   NG  --color-primary   on --color-dark    = 2.23:1
	       → ダーク面で紫を文字に使う場合は --color-primary-on-dark を用いる。
	         --color-primary はダーク面では装飾罫等の小面積UIに限定する。
	   NG  --color-accent    on --color-white    = 2.19:1
	       → --color-accent は本文・リンク等の「文字色」には使用しないこと。
	         装飾罫・アイコン・バッジ等の小面積UI専用トークンとして扱う。 */

	/* ------------------------------------------------------------
	   Font family
	   Webフォント未読込環境でも破綻しないフォールバック順。
	   本文はゴシック体、見出し（h1〜h3）は明朝体を基本とする。
	   ------------------------------------------------------------ */
	--font-family-base:
		"Noto Sans JP",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Yu Gothic",
		"YuGothic",
		"Meiryo",
		sans-serif;

	--font-family-serif:
		"Noto Serif JP",
		"Hiragino Mincho ProN",
		"Yu Mincho",
		"YuMincho",
		serif;

	/* ------------------------------------------------------------
	   Font size
	   xs〜3xl のスケールは全ブレイクポイントで固定値。
	   PC/SPで可変にするのは意味づけ変数（section-title）のみ。
	   ------------------------------------------------------------ */
	--font-size-xs: 0.65rem;      /* ---：注釈・キャプション */
	--font-size-sm: 0.875rem;     /* 14px：補足文・小さめ本文 */
	--font-size-md: 1rem;         /* 16px：本文基準 */
	--font-size-lg: 1.125rem;     /* 18px：リード文・小見出し */
	--font-size-xl: 1.375rem;     /* 22px：見出し（中） */
	--font-size-2xl: 1.75rem;     /* 28px：見出し（大）／SPのセクションタイトル */
	--font-size-3xl: 2.5rem;      /* 40px：PCのセクションタイトル・FV見出し */

	/* 意味づけ変数（PCで再定義。9.レスポンシブ 参照） */
	--font-size-section-title: var(--font-size-2xl); /* セクション日本語見出し */
	--font-size-section-label: var(--font-size-xs);  /* セクション英字ラベル */
	--font-size-lead: var(--font-size-sm);           /* セクション説明文 */

	/* ------------------------------------------------------------
	   Line height / Letter spacing
	   ------------------------------------------------------------ */
	--line-height-base: 1.8;      /* 本文：日本語の可読性を優先 */
	--line-height-heading: 1.4;   /* 見出し */
	--line-height-tight: 1.3;     /* 英字ラベル・ボタン等の詰まった行 */

	--letter-spacing-base: 0.02em;
	--letter-spacing-heading: 0.04em;
	--letter-spacing-wide: 0.16em; /* 英字ラベル用 */

	/* ------------------------------------------------------------
	   Space
	   ------------------------------------------------------------ */
	--space-xs: 0.5rem;   /* 8px  */
	--space-sm: 1rem;     /* 16px */
	--space-md: 1.5rem;   /* 24px */
	--space-lg: 2rem;     /* 32px */
	--space-xl: 3rem;     /* 48px */
	--space-2xl: 5rem;    /* 80px */

	/* セクション上下の大きな余白。
	   セクションCSS側は px を直書きせず、常に --section-space を使う。
	   （--section-space は 9.レスポンシブ で PC 値に切り替わる） */
	--section-space-pc: 100px;
	--section-space-sp: 64px;
	--section-space: var(--section-space-sp);

	/* ------------------------------------------------------------
	   Container
	   通常コンテンツ 1080px / FV等のワイド領域 1280px
	   ------------------------------------------------------------ */
	--container-max-width: 1080px;
	--container-wide-max-width: 1280px;
	--container-gutter: 20px;   /* 左右の安全余白（PCで 40px に切替） */

	/* ------------------------------------------------------------
	   Radius / Shadow / Motion / Decoration
	   角丸・影は「静かで上質」を損なわないよう最小限に留める。
	   ------------------------------------------------------------ */
	--radius-sm: 2px;
	--radius-md: 4px;

	--shadow-sm: 0 1px 2px rgba(40, 40, 45, 0.06);
	--shadow-md: 0 4px 16px rgba(40, 40, 45, 0.08);

	--transition-base: 0.25s ease;

	--decor-line-width: 40px;   /* 小見出し左の装飾罫の長さ */
}


/* ================================================================
   2. モダンリセット
   ================================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
ul, ol {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	appearance: none;
}

a {
	color: inherit;
	text-decoration: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

address {
	font-style: normal;
}


/* ================================================================
   3. HTML / body
   ================================================================ */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-main);
	background-color: var(--color-bg-main);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ================================================================
   4. 基本タイポグラフィ
   h1〜h3：明朝体（--font-family-serif）
   h4〜h6：ゴシック体（body から継承）
   本文はゴシック体を基本とする。
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-heading);
	/* ゴシックの太字は重く見えるため 500 に統一（明朝の h1〜h3 も 500） */
	font-weight: 500;
}

/* 明朝体は同じ font-weight でも細く見えるため 500〜600 に留める */
h1, h2, h3 {
	font-family: var(--font-family-serif);
	font-weight: 500;
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-sm); }
h6 { font-size: var(--font-size-sm); }

p {
	line-height: var(--line-height-base);
}

strong,
b {
	font-weight: 500;
}

em {
	font-style: normal;
	font-weight: 500;
}

small {
	display: inline-block;
	font-size: var(--font-size-xs);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}

sub,
sup {
	font-size: 0.7em;
	line-height: 1;
}


/* ================================================================
   5. 画像・リンク・フォーム等の基本要素
   ================================================================ */

/* ---- Link ---------------------------------------------------- */
a {
	transition: color var(--transition-base), opacity var(--transition-base);
}

a:hover {
	color: var(--color-primary);
}

/* 本文中のリンクは下線を維持（リンクであることを色以外でも伝える） */
p > a,
li > a[href^="http"] {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- Image --------------------------------------------------- */
img {
	/* 画像が主役のサイトのため、地色は極力ニュートラルに */
	/* background-color: var(--color-bg-muted); */
	vertical-align: bottom;
}

figure img {
	width: 100%;
}

/* ---- Form ---------------------------------------------------- */
input,
textarea,
select {
	width: 100%;
	min-height: 48px;   /* タップ領域の下限を確保し、select との高さを揃える */
	padding: 0.75rem var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	color: var(--color-text-main);
	line-height: var(--line-height-tight);
	transition: border-color var(--transition-base);
}

input:hover,
textarea:hover,
select:hover {
	border-color: var(--color-text-sub);
}

textarea {
	min-height: 8rem;
	line-height: var(--line-height-base);
	resize: vertical;
}

select {
	cursor: pointer;
}

input::placeholder,
textarea::placeholder {
	color: var(--color-text-sub);
	opacity: 1; /* Firefox の既定の減光を打ち消す */
}

/* チェックボックス・ラジオは幅100%の対象外 */
input[type="checkbox"],
input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	min-height: 0;   /* 上の 48px 下限をここでは打ち消す */
	padding: 0;
	vertical-align: -0.2em;
	cursor: pointer;
	accent-color: var(--color-primary);
}

label {
	cursor: pointer;
}

/* ---- Focus --------------------------------------------------- */
/* キーボード操作時のみフォーカス位置を明示（マウス操作時は表示しない） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}


/* ================================================================
   6. レイアウト共通クラス
   ================================================================ */

/* 左右パディングの分だけコンテンツ幅が痩せないよう、
   gutter を max-width に足し込む。
   PC（gutter 40px）: 外形 1160px / 実質コンテンツ 1080px
   SP（gutter 20px）: 左右 20px の安全余白を確保 */
.l-container {
	width: 100%;
	max-width: calc(var(--container-max-width) + var(--container-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* FV・背景写真など、ワイドに見せたい領域だけで使用（実質 1280px） */
.l-container--wide {
	max-width: calc(var(--container-wide-max-width) + var(--container-gutter) * 2);
}

/* 内側で入れ子にする際、gutter の二重適用を避けるための素通しコンテナ */
.l-container--flush {
	padding-inline: 0;
}

/* セクションの上下余白。px 直書きの代わりに必ずこれを使う */
.l-section {
	padding-block: var(--section-space);
}

.l-section--bg-sub {
	background-color: var(--color-bg-sub);
}

.l-section--bg-muted {
	background-color: var(--color-bg-muted);
}


/* ================================================================
   7. 汎用コンポーネント
   ================================================================ */

/* ---- Section title ------------------------------------------- */
/* 想定マークアップ:
   <div class="c-section-title">
     <span class="c-section-title__en">PRODUCT LINEUP</span>
     <h2 class="c-section-title__ja">7つの商品スタイル</h2>
     <p class="c-section-title__lead">説明文</p>
   </div>                                                          */
.c-section-title {
	margin-bottom: var(--space-xl);
	text-align: center;
}

.c-section-title__en {
	display: block;
	margin-bottom: var(--space-xs);
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-label);
	font-weight: 700;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-primary);
	/* letter-spacing の分だけ右に寄るのを打ち消す */
	text-indent: var(--letter-spacing-wide);
}

/* h2 以外（p / span）で組んでも成立するよう書体を明示 */
.c-section-title__ja {
	font-family: var(--font-family-serif);
	font-size: var(--font-size-section-title);
	font-weight: 500;
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-text-main);
}

.c-section-title__lead {
	margin-top: var(--space-md);
	font-size: var(--font-size-lead);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}

/* 左寄せが必要なセクション向け */
.c-section-title--left {
	text-align: left;
}

/* ---- Button --------------------------------------------------- */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	min-height: 48px;              /* タップ領域の下限を確保 */
	padding: 0.875rem var(--space-xl);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: var(--font-size-md);
	font-weight: 500;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--transition-base),
		border-color var(--transition-base),
		color var(--transition-base);
}

.c-btn:hover {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

.c-btn:disabled,
.c-btn[aria-disabled="true"] {
	background-color: var(--color-border);
	color: var(--color-text-sub);
	cursor: not-allowed;
}

/* 枠線タイプ（副次的な導線用） */
.c-btn--outline {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.c-btn--outline:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
}

/* 幅いっぱい（SPのCTA等） */
.c-btn--block {
	display: flex;
	width: 100%;
}

/* 小サイズ（ヘッダー内の小さなUI等） */
.c-btn--sm {
	min-height: 40px;
	padding: 0.5rem var(--space-md);
	font-size: var(--font-size-sm);
}


/* ================================================================
   8. アクセシビリティ
   ================================================================ */

/* 視覚的に隠し、スクリーンリーダーには読ませる */
.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* アイコンのみのボタン・リンクが小さくなりすぎないための下限 */
.c-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* 動きを減らす設定への配慮。
   全称セレクタは詳細度 0 のため、!important なしでは後続のどのルールにも
   負けて設定が無効化される。本ファイルで !important を使うのはここだけ。 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ================================================================
   9. レスポンシブ（PC差分：min-width 768px）
   SPの値は上記で既定済み。ここではPCの差分のみを記述する。
   ================================================================ */
@media (min-width: 768px) {

	/* ---- トークンの再定義 ------------------------------------ */
	:root {
		--section-space: var(--section-space-pc);
		--container-gutter: 40px;
		--font-size-section-title: var(--font-size-3xl);
		--font-size-lead: var(--font-size-md);
	}

	/* ---- タイポグラフィ -------------------------------------- */
	h1 { font-size: var(--font-size-3xl); }
	h2 { font-size: var(--font-size-2xl); }
	h3 { font-size: var(--font-size-xl); }
	h4 { font-size: var(--font-size-lg); }
	h5 { font-size: var(--font-size-md); }
	h6 { font-size: var(--font-size-md); }

	/* ---- コンポーネント -------------------------------------- */
	.c-section-title {
		margin-bottom: var(--space-2xl);
	}

	.c-section-title__lead {
		margin-top: var(--space-lg);
	}

	.c-btn {
		min-height: 56px;
		padding: var(--space-sm) var(--space-2xl);
	}

	/* --sm は上の .c-btn より後に書く必要がある。
	   同じ詳細度のため、先に書くと PC の .c-btn に打ち消されてしまう。 */
	.c-btn--sm {
		min-height: 40px;
		padding: var(--space-xs) var(--space-md);
		font-size: var(--font-size-sm);
	}
}