:root {
  --radius: 0.5rem;
  --ds-shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.08);
  --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.04);
  --ds-shadow-border-small: var(--ds-shadow-border), var(--ds-shadow-small);
  --ds-shadow-medium: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
  --ds-shadow-border-medium: var(--ds-shadow-border), var(--ds-shadow-medium);
  --ds-shadow-large: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 16px -4px rgba(0, 0, 0, 0.04);
  --ds-shadow-border-large: var(--ds-shadow-border), var(--ds-shadow-large);
  --ds-shadow-tooltip: var(--ds-shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.04);
  --ds-shadow-menu: var(--ds-shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
  --ds-shadow-modal: var(--ds-shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
  --ds-shadow-fullscreen: var(--ds-shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
  --scn-background: 0 0% 100%;
  --scn-foreground: 240 10% 3.9%;
  --scn-muted: 240 4.8% 95.9%;
  --scn-muted-foreground: 240 3.8% 46.1%;
  --scn-card: 0 0% 100%;
  --scn-card-foreground: 240 10% 3.9%;
  --scn-popover: 0 0% 100%;
  --scn-popover-foreground: 240 10% 3.9%;
  --scn-border: 240 5.9% 90%;
  --scn-input: 240 5.9% 90%;
  --scn-primary: 240 5.9% 10%;
  --scn-primary-foreground: 0 0% 98%;
  --scn-secondary: 240 4.8% 95.9%;
  --scn-secondary-foreground: 240 5.9% 10%;
  --scn-accent: 240 4.8% 95.9%;
  --scn-accent-foreground: ;
  --scn-destructive: 0 84.2% 60.2%;
  --scn-destructive-foreground: 0 0% 98%;
  --scn-warning: 35, 100%, 52%;
  --scn-warning-foreground: 0 0% 9%;
  --scn-ring: 240 5% 64.9%;
  --scn-radius: 0.5rem;
  --scn-chart-1: 173 58% 39%;
  --scn-chart-2: 12 76% 61%;
  --scn-chart-3: 197 37% 24%;
  --scn-chart-4: 43 74% 66%;
  --scn-chart-5: 27 87% 67%;
  --scn-sidebar-background: 0 0% 98%;
  --scn-sidebar-foreground: 240 5.3% 26.1%;
  --scn-sidebar-primary: 240 5.9% 10%;
  --scn-sidebar-primary-foreground: 0 0% 98%;
  --scn-sidebar-accent: 240 4.8% 95.9%;
  --scn-sidebar-accent-foreground: 240 5.9% 10%;
  --scn-sidebar-border: 220 13% 91%;
  --scn-sidebar-ring: 240 5% 64.9%;
  --background: var(--vsc-background, var(--scn-background));
  --foreground: var(--vsc-foreground, var(--scn-foreground));
  --muted: var(--vsc-muted, var(--scn-muted));
  --muted-foreground: var(--vsc-muted-foreground, var(--scn-muted-foreground));
  --card: var(--vsc-card, var(--scn-card));
  --card-foreground: var(--vsc-card-foreground, var(--scn-card-foreground));
  --popover: var(--vsc-popover, var(--scn-popover));
  --popover-foreground: var(--vsc-popover-foreground, var(--scn-popover-foreground));
  --border: var(--vsc-border, var(--scn-border));
  --input: var(--vsc-input, var(--scn-input));
  --primary: var(--vsc-primary, var(--scn-primary));
  --primary-foreground: var(--vsc-primary-foreground, var(--scn-primary-foreground));
  --secondary: var(--vsc-secondary, var(--scn-secondary));
  --secondary-foreground: var(--vsc-secondary-foreground, var(--scn-secondary-foreground));
  --accent: var(--vsc-accent, var(--scn-accent));
  --accent-foreground: var(--vsc-accent-foreground, var(--scn-accent-foreground));
  --destructive: var(--vsc-destructive, var(--scn-destructive));
  --destructive-foreground: var(--vsc-destructive-foreground, var(--scn-destructive-foreground));
  --warning: var(--vsc-warning, var(--scn-warning));
  --warning-foreground: var(--vsc-warning-foreground, var(--scn-warning-foreground));
  --ring: var(--vsc-ring, var(--scn-ring));
  --radius: var(--vsc-radius, var(--scn-radius));
  --chart-1: var(--vsc-chart-1, var(--scn-chart-1));
  --chart-2: var(--vsc-chart-2, var(--scn-chart-2));
  --chart-3: var(--vsc-chart-3, var(--scn-chart-3));
  --chart-4: var(--vsc-chart-4, var(--scn-chart-4));
  --chart-5: var(--vsc-chart-5, var(--scn-chart-5));
  --sidebar-background: var(--vsc-sidebar-background, var(--scn-sidebar-background));
  --sidebar-foreground: var(--vsc-sidebar-foreground, var(--scn-sidebar-foreground));
  --sidebar-primary: var(--vsc-sidebar-primary, var(--scn-sidebar-primary));
  --sidebar-primary-foreground: var(--vsc-sidebar-primary-foreground, var(--scn-sidebar-primary-foreground));
  --sidebar-accent: var(--vsc-sidebar-accent, var(--scn-sidebar-accent));
  --sidebar-accent-foreground: var(--vsc-sidebar-accent-foreground, var(--scn-sidebar-accent-foreground));
  --sidebar-border: var(--vsc-sidebar-border, var(--scn-sidebar-border));
  --sidebar-ring: var(--vsc-sidebar-ring, var(--scn-sidebar-ring));
}

.dark {
  --scn-background: 240 10% 3.9%;
  --scn-foreground: 0 0% 98%;
  --scn-muted: 240 3.7% 15.9%;
  --scn-muted-foreground: 240 5% 64.9%;
  --scn-card: 240 10% 3.9%;
  --scn-card-foreground: 0 0% 98%;
  --scn-popover: 240 10% 3.9%;
  --scn-popover-foreground: 0 0% 98%;
  --scn-border: 240 3.7% 15.9%;
  --scn-input: 240 3.7% 15.9%;
  --scn-primary: 0 0% 98%;
  --scn-primary-foreground: 240 5.9% 10%;
  --scn-secondary: 240 3.7% 15.9%;
  --scn-secondary-foreground: 0 0% 98%;
  --scn-accent: 240 3.7% 15.9%;
  --scn-accent-foreground: ;
  --scn-destructive: 0 62.8% 30.6%;
  --scn-destructive-foreground: 0 85.7% 97.3%;
  --scn-warning: 35, 100%, 52%;
  --scn-warning-foreground: 0 0% 9%;
  --scn-ring: 240 3.7% 15.9%;
  --scn-chart-1: 220 70% 50%;
  --scn-chart-2: 160 60% 45%;
  --scn-chart-3: 30 80% 55%;
  --scn-chart-4: 280 65% 60%;
  --scn-chart-5: 340 75% 55%;
  --scn-sidebar-background: 240 5.9% 10%;
  --scn-sidebar-foreground: 240 4.8% 95.9%;
  --scn-sidebar-primary: 224.3 76.3% 48%;
  --scn-sidebar-primary-foreground: 0 0% 100%;
  --scn-sidebar-accent: 240 3.7% 15.9%;
  --scn-sidebar-accent-foreground: 240 4.8% 95.9%;
  --scn-sidebar-border: 240 3.7% 15.9%;
  --scn-sidebar-ring: 240 4.9% 83.9%;
}

/* @layer base */
* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth; /* @apply scroll-smooth */
}

body {
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* @layer utilities */
.step {
  counter-increment: step;
  position: relative; /* @apply absolute */
}

.step::before {
  width: 2.25rem; /* @apply w-9 */
  height: 2.25rem; /* @apply h-9 */
  background-color: hsl(var(--muted)); /* @apply bg-muted */
  border-radius: 9999px; /* @apply rounded-full */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* @apply font-mono */
  font-weight: 500; /* @apply font-medium */
  text-align: center; /* @apply text-center */
  font-size: 1rem; /* @apply text-base */
  display: inline-flex; /* @apply inline-flex */
  align-items: center; /* @apply items-center */
  justify-content: center; /* @apply justify-center */
  margin-left: -3.125rem; /* @apply ml-[-50px] */
  margin-top: -0.25rem; /* @apply mt-[-4px] */
  content: counter(step);
  border-width: 4px; /* @apply border-4 */
  border-style: solid;
  border-color: hsl(var(--background)); /* @apply border-background */
  -webkit-text-indent: -1px; /* @apply -indent-px */
}

.chunk-container {
  box-shadow: none; /* @apply shadow-none */
  position: relative; /* Required for the ::after pseudo-element */
}

.chunk-container::after {
  content: '';
  position: absolute; /* @apply absolute */
  inset: -1rem; /* Approximate of @apply -inset-4 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Approximate of @apply shadow-xl */
  border-radius: 0.75rem; /* Approximate of @apply rounded-xl */
  border-width: 1px; /* @apply border */
  border-style: solid;
  border-color: hsl(var(--border));
}

@media (max-width: 640px) {
  .container {
    padding-left: 1rem; /* Approximate of @apply px-4 */
    padding-right: 1rem; /* Approximate of @apply px-4 */
  }
}

/* Dark mode shadcn colors */
:root {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: ;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;
  --warning: 35, 100%, 52%;
  --warning-foreground: 0 0% 9%;
  --ring: 240 3.7% 15.9%;
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 240 4.9% 83.9%;
}

.dark {
  /* Dark mode specific variables - these will override the :root variables */
}

 .contact-form-container {
        max-width: 600px; /* フォームの最大幅 */
        margin: 0 auto; /* 中央寄せ */
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* 各入力フィールドのラッパー */
    .form-field-wrapper {
        margin-bottom: 15px; /* フィールド間の余白 */
    }

    /* ラベルのスタイル */
    .contact-form-container label {
        display: block; /* ブロック要素にして縦に並べる */
        font-weight: bold;
        margin-bottom: 8px; /* ラベルと入力欄の間の余白 */
        color: #333;
    }

    /* テキスト入力欄、メールアドレス入力欄、題名入力欄 */
    .contact-form-container input[type="text"],
    .contact-form-container input[type="email"],
    .contact-form-container textarea {
        width: 100%; /* 親要素に対して幅いっぱいに */
        padding: 10px 12px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
        box-sizing: border-box; /* paddingとborderを幅に含める */
        transition: border-color 0.3s ease; /* ホバー時のアニメーション */
    }

    .contact-form-container input[type="text"]:focus,
    .contact-form-container input[type="email"]:focus,
    .contact-form-container textarea:focus {
        border-color: #007bff; /* フォーカス時のボーダー色 */
        outline: none; /* デフォルトのアウトラインを消す */
        box-shadow: 0 0 5px rgba(0,123,255,0.2); /* フォーカス時の影 */
    }

    /* テキストエリアの高さ調整 */
    .contact-form-container textarea {
        min-height: 120px; /* 最小の高さ */
        resize: vertical; /* 縦方向のみリサイズ可能に */
    }

    /* 送信ボタンのスタイル */
    .contact-form-container input[type="submit"] {
        display: block; /* ブロック要素にして幅いっぱいに */
        width: auto; /* 幅を自動調整 */
        min-width: 150px; /* 最小幅 */
        margin: 25px auto 0; /* 中央寄せと上部の余白 */
        padding: 12px 25px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease; /* ホバー時のアニメーション */
    }

    .contact-form-container input[type="submit"]:hover {
        background-color: #0056b3;
        transform: translateY(-2px); /* 少し上に浮き上がる効果 */
    }

    /* レスポンシブ対応のためのメディアクエリ */
    @media (max-width: 768px) {
        .contact-form-container {
            padding: 15px; /* スマートフォンでのパディングを調整 */
        }
        .contact-form-container input[type="text"],
        .contact-form-container input[type="email"],
        .contact-form-container textarea {
            font-size: 15px; /* スマートフォンでのフォントサイズを調整 */
            padding: 9px 10px;
        }
        .contact-form-container input[type="submit"] {
            width: 100%; /* スマートフォンでは幅いっぱいに */
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .contact-form-container {
            border-radius: 0; /* 小さい画面では角丸をなくす */
            box-shadow: none; /* 影をなくす */
            padding: 10px;
        }
    }
</style>