/* 全文フォントをNoto Sans JPに統一 */
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #1f2937; /* gray-800 相当 */
}

/* ヘッダーとフッターを青背景＋白文字ボールド */
header, footer {
  background-color: #2563eb; /* Tailwind blue-600 */
  color: #ffffff;
  font-weight: 700;
}

/* 見出しスタイル */
h1 {
  font-size: 2.25rem;   /* text-4xl */
  font-weight: 300;     /* font-light */
  letter-spacing: 0.05em; /* tracking-wide */
  margin-bottom: 1rem;
  color: #1f2937;       /* gray-800 */
}

h2 {
  font-size: 1.5rem;    /* text-2xl */
  font-weight: 600;     /* font-semibold */
  margin-bottom: 0.75rem;
  color: #1f2937;
}

h3 {
  font-size: 1.25rem;   /* text-xl */
  font-weight: 500;     /* font-medium */
  margin-bottom: 0.5rem;
  color: #374151;       /* gray-700 */
}



/* サービスカード */
/* 共通（スマホ想定）：縦並び */
.cards {
  display: block;
}
.card {
  padding: 1.5rem;               /* p-6 */
  background-color: #ffffff;     /* bg-white */
  border-radius: 0.5rem;         /* rounded-lg */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1),
              0 1px 2px rgba(0,0,0,0.06); /* shadow */
  margin-bottom: 1rem;
}
.card h2 {
  font-size: 1.25rem;  /* text-xl */
  font-weight: 600;    /* font-semibold */
  margin-bottom: 0.5rem; /* mb-2 */
}



/* PC（768px以上）：3列横並び */
@media (min-width: 768px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列に分割 */
    gap: 1.5rem;
  }
  .card {
    margin-bottom: 0; /* gridで隙間を制御するのでリセット */
  }
}

.card h2 {
  font-size: 1.25rem;  /* text-xl */
  font-weight: 600;    /* font-semibold */
  margin-bottom: 0.5rem; /* mb-2 */
}

/* ヘッダーコンテナ */
header .container {
  max-width: 72rem;   /* Tailwind max-w-6xl */
  margin-left: auto;  /* mx-auto */
  margin-right: auto;
  display: flex;      /* flex */
  justify-content: space-between; /* justify-between */
  align-items: center; /* items-center */
  padding: 1rem;      /* p-4 */
}

/* フッターは中央寄せテキストでシンプルに */
footer {
  text-align: center;
  padding: 1rem;
}

/* PCでは横並び（2カラム） */
.layout {
  display: flex;
}
.menu {
  width: 200px;
  background-color: #2563eb;
  color: white;
  padding: 1rem;
}
.content {
  flex: 1;
  padding: 1.5rem;
}

/* スマホでは1カラム（メニュー非表示 or 上に隠す） */
@media (max-width: 767px) {
  .layout {
    display: block;
  }
  .menu {
    display: none; /* スマホでは非表示 */
  }
}

.hero {
  margin-bottom: 2rem;
  text-align: center;    /* 中央寄せにするとヒーロー感UP */
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.125rem;   /* 少し大きめ */
  color: #4b5563;        /* gray-600 */
}



.icon {
  width: 128px;
  height: 160px;
  image-rendering: pixelated;
}