@charset "UTF-8";

/* =========================================
サービス共通CSS（reset,HTMLタグスタイリング）
========================================= */
:root {
  /* Colors */
  --color-main: #004DA1;
  --color-main-gradient-start: #0078C4;
  --color-main-gradient-end: #004DA1;
  --color-main-dark: #003366;
  --color-main-light: #E6F0FA;
  --color-sub: #00A2E6;
  --color-accent: #E43344;
  --color-text-main: #222222;
  --color-text-sub: #555555;
  --color-bg-body: #F4F7FA;
  --color-bg-white: #FFFFFF;
  --color-border: #EAEAEA;

  /* Service Category Colors */
  --color-cat-purple: #9747FF;
  --color-cat-green: #27AE60;
  --color-cat-blue: #2D9CDB;
  --color-cat-red: #EB5757;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 31, 66, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 31, 66, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 31, 66, 0.12);
  --shadow-hover: 0 12px 32px rgba(0, 77, 161, 0.15);

  /* Sizes */
  --width-pc: 1200px;
  --header-height-pc: 80px;
  --header-height-sp: 60px;
  --radius-card: 16px;
  --radius-btn: 8px;

  /* Header */
  --height-header: 80px;
}

/* Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  padding-top: var(--header-height-pc);
  scroll-padding-top: var(--header-height-pc);
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  color: var(--color-text-main);
  background-color: var(--color-bg-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s, opacity 0.3s;
}

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

ul {
  list-style: none;
}

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

@media screen and (max-width: 900px) {
  html {
    padding-top: var(--header-height-sp);
    scroll-padding-top: var(--header-height-sp);
  }
}