/*
Theme Name: Mochiyoru
Version: 1.0
*/

@charset "UTF-8";

/* =======================================================
   全ページ共通スタイル (style.css)
======================================================= */

/* ----------------------
   0. Minimum Reset
---------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	border: none;
	background: none;
	padding: 0;
	appearance: none;
}

button {
	cursor: pointer;
}

/* ----------------------
   1. デザイントークン（変数）
---------------------- */
:root {
	--font-en: "Cormorant", serif;
	--font-ja: "Noto Serif JP", serif;
	--font-base: var(--font-en), var(--font-ja);

	--color-bg-main: #f9f6f0;
	--color-bg-sub: #fefcf9;

	--color-text-main: #1a1a1a;
	--color-text-sub: #4a4a4a;
	--color-text-accent: #1e7a96;

	--color-line-1: #3aaecc;
	--color-line-2: #6dc444;
	--color-line-3: #c87820;

	--color-step-bg-1: #d6f0f7;
	--color-step-bg-2: #cff7cb;
	--color-step-bg-3: #eaf7dc;
	--color-step-bg-4: #f8f0dc;

	--color-step-box-1: #99d9e8;
	--color-step-box-2: #abffa3;
	--color-step-box-3: #d7f7b4;
	--color-step-box-4: #f8de9c;

	--color-works-bg-1: #1e7a96;
	--color-works-bg-2: #006958;
	--color-works-bg-3: #3e8a1e;
	--color-works-bg-4: #8f5010;
}

/* ----------------------
   2. ベーススタイル
---------------------- */
html {
	scroll-behavior: smooth; /* スムーススクロール */
	scroll-padding-top: 80px; /* ★飛んだ先にヘッダー分の「見えないバリア」を張る */
}
body {
	margin: 0;
	font-family: var(--font-base);
	color: var(--color-text-main);
	background-color: var(--color-bg-main);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* ----------------------
   3. Composition (レイアウト・骨組み)
---------------------- */
/* 全ページのメインコンテンツの土台 */
.l-main {
	padding-top: 80px; /* ヘッダーの高さ分、一律で下げる */
	min-height: calc(
		100vh - 80px - 150px
	); /* 画面の高さ - ヘッダー - フッター でコンテンツが少なくてもフッターを下に追いやる */
}

/* スマホ用の調整 */
@media (max-width: 768px) {
	.l-main {
		padding-top: 50px; /* モバイル版ヘッダーの高さ（ご指定の50px） */
	}
}
.l-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
}

.l-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px;
}
.l-grid__gap20 {
	gap: 20px;
}
.l-grid-2-fixed {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
}
.l-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.l-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.stack-xl {
	padding: 3rem 0;
}

@media (max-width: 768px) {
	.l-container {
		padding: 0 20px;
	}
	.l-grid-2,
	.l-grid-3,
	.l-grid-4 {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.l-grid__gap20 {
		gap: 20px;
	}
}

/* ----------------------
   4. Utility (ユーティリティ)
---------------------- */
.u-bg-main {
	background-color: var(--color-bg-main);
}
.u-bg-sub {
	background-color: var(--color-bg-sub);
}

.text-sm {
	font-size: 0.75rem;
}
.text-md {
	font-size: 1.25rem;
}
.text-lg {
	font-size: 1.5rem !important; /
}
.text-xl {
	font-size: 1.75rem;
}

.u-mb-0 {
	margin-bottom: 0 !important;
}
.u-mb-1 {
	margin-bottom: 1rem !important;
}
.u-pb-1_75 {
	padding-bottom: 1.75rem !important;
}

.list-number {
	color: var(--color-line-1);
	margin-top: -1rem;
	padding-right: 1rem;
	font-family: var(--font-en);
	font-size: 2rem;
}
.border-bottom {
	border-bottom: 1px solid #e4e0d8;
}

/* 相談するボタン（共通パーツ） */
.c-button--contact {
	display: inline-block;
	background-color: var(--color-works-bg-2);
	color: #ffffff;
	padding: 10px 24px;
	font-size: 0.9rem;
	font-weight: 700;
	border-radius: 5px;
	text-decoration: none;
}

/* ----------------------
   5. HEADER
---------------------- */
.l-header {
	width: 100%;
	height: 80px;
	z-index: 100;
	display: flex;
	align-items: center;
	position: fixed;
	background-color: var(--color-bg-main);
}

.l-header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 10px;
}

.l-header__logo {
	flex-shrink: 0;
}
.l-header__logo img {
	width: 300px;
	height: auto;
	display: block;
}

@media (max-width: 768px) {
	.l-header__logo img {
		width: 180px;
	}
	.l-header {
		height: 60px;
	}
}

/* ----------------------
   6. Footer
---------------------- */
.l-footer {
	padding: 80px 0 40px;
}
.footer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.footer-logo {
	margin-bottom: 0;
}
.footer-logo img {
	opacity: 0.8;
}
.footer-info__name {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-text-main);
}
.footer-info__copyright {
	font-size: 0.75rem;
	color: var(--color-text-sub);
}

.f-nav {
	margin-bottom: 40px;
}
.f-nav__list {
	display: flex;
	justify-content: center; /* 中央揃え */
	gap: 30px; /* リンク同士の間隔 */
	list-style: none;
	padding: 0;
}
.f-nav__list a {
	font-size: 0.9rem;
	color: var(--color-text-main);
	text-decoration: none;
	transition: opacity 0.3s;
}
.f-nav__list a:hover {
	opacity: 0.6;
}

@media (max-width: 768px) {
	.l-footer {
		padding: 60px 0 30px;
	}
	.f-nav__list {
		flex-direction: column;
		gap: 15px;
	}
}

/* =======================================================
   記事本文（投稿・固定ページ共通）のスタイル
   ※HTML側のクラス名に合わせて l-article-content に統一
======================================================= */

/* 本文全体の設定 */
.l-article-content {
	font-size: 1.05rem;
	line-height: 2; /* ゆったりとした行間 */
	color: var(--color-text-main);
}

/* 記事内のH2見出し */
.l-article-content h2 {
	font-size: 1.5rem;
	font-family: var(--font-ja);
	font-weight: 700;
	margin: 3.5em 0 1.5em; /* 上に大きな余白を取り、前の文章との境界をはっきりさせる */
	padding-bottom: 0.5em;
	border-bottom: 1px solid #e0e0e0;
}

/* 記事内のH3見出し */
.l-article-content h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 2.5em 0 1em;
}

/* 段落（テキスト） */
.l-article-content p {
	margin-bottom: 1.8em; /* 段落同士の余白も少し広めに */
}

/* 記事内のリスト */
.l-article-content ul {
	margin: 1.5em 0;
	padding-left: 1.5em;
	list-style-type: disc; /* 記事内は標準の黒ポッチを表示 */
}

.l-article-content li {
	margin-bottom: 0.8em;
}

/* -------------------------------------------------------
   レイアウト：記事用コンテナ
   共通の l-container の設定を引き継ぎつつ、幅だけ 800px に上書き
------------------------------------------------------- */
.l-container--article {
	max-width: 800px; /* note風の読みやすい幅 */
}