@charset "UTF-8";
/* CSS Document */

/* ===============================================
   Common CSS（LP 共通基礎）
   ・レイアウト基礎
   ・カラー変数
   ・タイポグラフィ
   ・セクション余白
   ・ヘッダー/フッター基礎
   =============================================== */


/* ----------------------------------------------
	Google フォント
------------------------------------------------- */
/*@import url(https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined);*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* ------------------------------
   CSS変数（ブランドカラー）
   ※必要に応じて追加
------------------------------ */
:root {
  --color-brand: #7a4f0c; /* ヘッダー/フッター */
  --color-text: #333;
  --color-bg: #f6e3db;        /* サイト全体のベース背景色 */
  --color-accent: #d27400;
  --color-muted: #666;
  --color-section-bg: #faf8f5;
  --color-line: #e5e0da;

  --color-bg-dot: #eed4ca;    /* ドットの色 */

  --font-base: "Zen Maru Gothic", "M PLUS Rounded 1c", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "M PLUS Rounded 1c", "Zen Maru Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container-max: 1100px;
}

/* ------------------------------
   基本
------------------------------ */
html {
  font-size: 62.5%; /* 1rem = 10px 換算しやすい */
}

body {
  font-family: var(--font-base);
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-text);

  /* ドット背景（10px + 斜め配置） */
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle, var(--color-bg-dot) 12%, transparent 15%),
    radial-gradient(circle, var(--color-bg-dot) 12%, transparent 15%);
  background-size: 50px 50px;
  background-position: 0 0, 20px 20px;

  -webkit-font-smoothing: antialiased;
}

/* ------------------------------
   レイアウト
------------------------------ */
.l-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------
   ヘッダー
------------------------------ */
.site-header {
  display: none;

  background: var(--color-brand);
  color: #fff;
}

.site-header__inner {
  padding: 20px 0;
}

.site-header__logo {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.site-header__sub {
  font-size: 1.3rem;
  opacity: 0.9;
}

/* ------------------------------
   フッター
------------------------------ */
.site-footer {
  background: var(--color-brand);
  color: #fff;
  margin-top: 40px;
}

.site-footer__inner {
  padding: 20px 0;
  text-align: center;
}

.site-footer__copy {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* ------------------------------
   セクション
------------------------------ */
.section {
  padding: 50px 0;
}

.section__title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.4;
  color: var(--color-brand);
}

.section__text {
  font-size: 1.6rem;
  color: var(--color-text);
  margin-bottom: 20px;
  line-height: 1.7;
}

/* ------------------------------
   Hero（共通ベース）
   ※固有デザインは style.css 側で調整
------------------------------ */
.hero {
  padding: 50px 0;
  text-align: center;
}

.hero__title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.3;
  font-family: var(--font-heading);
}

.hero__lead {
  font-size: 1.6rem;
  color: var(--color-muted);
  line-height: 1.7;
}

/* ------------------------------
   支援メニュー（カード基礎）
   ※固有は style.css で装飾
------------------------------ */
.support-list {
  display: grid;
  gap: 30px;
}

.support-card__title {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 15px;
  font-family: var(--font-heading);
}

.support-card__text {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--color-muted);
  line-height: 1.7;
}

/* ------------------------------
   SPレスポンシブ
------------------------------ */
@media (max-width: 768px) {
  body {
    background-size: 32px 32px;
    background-position: 0 0, 16px 16px;
  }

  .hero__title {
    font-size: 2.4rem;
  }

  .section__title {
    font-size: 2rem;
  }

  .support-list {
    gap: 20px;
  }
}