@charset "UTF-8";
/* ============================================
   Profilm Japan サイト共通デザイン基盤 v2
   コンセプト：世界基準の品質を、余白・写真・タイポグラフィで静かに伝えるプレミアムデザイン
   ベンチマーク：XPEL Japanを参考にしつつ、Apple/Porsche的な「引き算のデザイン」
   ※ Googleフォントはfunctions.phpのwp_enqueue_styleで読み込み済み（@importは使用しない）
   ============================================ */

:root {
	/* カラー：基本は白・黒・ダークグレー・ライトグレーのみ。ブランドカラーは差し色として最小限に使用 */
	--color-primary: #17A06C;       /* ブランドグリーン */
	--color-black: #1A1A1A;
	--color-dark-gray: #5F6368;
	--color-light-gray: #F5F5F5;
	--color-border: #E3E3E1;
	--color-white: #FFFFFF;

	/* レイアウト */
	--container-max: 1200px;
	--content-max: 800px;
	--section-padding-y: 140px;
	--content-gap: 60px;
	--side-margin-pc: 64px;
	--side-margin-tablet: 32px;
	--side-margin-mobile: 20px;
}

/* --- タイポグラフィ --- */
h1, h2, h3 {
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	color: var(--color-black);
	line-height: 1.4;
	margin: 0;
}
h1 { font-size: 56px; font-weight: 700; }
h2 { font-size: 40px; font-weight: 600; }
h3 { font-size: 26px; font-weight: 600; }

.post_content p,
.post_content li {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.8;
	color: var(--color-dark-gray);
}

@media (max-width: 768px) {
	h1 { font-size: 34px; }
	h2 { font-size: 26px; }
	h3 { font-size: 20px; }
}

/* --- コンテナ：全ページで左右位置・幅を統一 --- */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--side-margin-pc);
	box-sizing: border-box;
}
.container-narrow {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--side-margin-pc);
	box-sizing: border-box;
}
@media (max-width: 1024px) {
	.container, .container-narrow { padding: 0 var(--side-margin-tablet); }
}
@media (max-width: 480px) {
	.container, .container-narrow { padding: 0 var(--side-margin-mobile); }
}

/* --- 写真・製品ショーケース専用の広いコンテナ（上限を設けず、左右の余白だけ固定して画面幅に応じて伸ばす） --- */
.container-wide {
	max-width: none;
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--side-margin-pc);
	box-sizing: border-box;
}
@media (max-width: 1024px) {
	.container-wide { padding: 0 var(--side-margin-tablet); }
}
@media (max-width: 480px) {
	.container-wide { padding: 0 var(--side-margin-mobile); }
}

/* --- セクション：上下たっぷりの余白で1メッセージずつ見せる --- */
.section {
	padding-top: var(--section-padding-y);
	padding-bottom: var(--section-padding-y);
}
.section-light { background: var(--color-white); }
.section-tint  { background: var(--color-light-gray); }
.section-dark  {
	background: var(--color-black);
	color: #C9C9C6;
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-white); }

/* --- 写真：ブランドの最重要要素。ダークトーン・高コントラストで統一 --- */
img { max-width: 100%; display: block; }
.photo-treated {
	filter: contrast(1.1) saturate(0.85) brightness(0.95);
}
.photo-ratio {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* --- カード：影は最小限、枠線は細く、角丸4〜8px --- */
.card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 32px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.card img { border-radius: 8px 8px 0 0; }
.card .stat {
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: var(--color-primary);
}
.card .label {
	font-size: 14px;
	color: var(--color-dark-gray);
	margin-top: 6px;
}

/* --- ボタン：装飾なし、ホバー時のみ軽いアニメーション --- */
.btn {
	display: inline-block;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-weight: 500;
	padding: 14px 32px;
	border-radius: 6px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn:hover { transform: scale(1.03); }

.btn-primary { background: var(--color-primary); color: #FFFFFF; }
.btn-secondary { background: #FFFFFF; color: var(--color-black); border: 1px solid var(--color-black); }
.btn-line { background: var(--color-primary); color: #FFFFFF; }

/* --- アイコン：線画・単色・線幅統一 --- */
.icon {
	width: 28px;
	height: 28px;
	stroke: var(--color-black);
	stroke-width: 1.5;
	fill: none;
}

/* --- アニメーション：控えめな演出のみ --- */
.fade-up {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }