:root {
   --color-primary: #0b7de8;
   --color-primary-hover: #0966bd;
   --color-bg: #f8fafc;
   --color-text-main: #0f172a;
   --color-text-muted: #475569;
   --color-card-bg: rgba(255, 255, 255, 0.85);
   --color-card-border: rgba(255, 255, 255, 0.4);
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md:
      0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
   --shadow-lg:
      0 10px 25px -3px rgba(0, 0, 0, 0.05), 0 4px 10px -2px rgba(0, 0, 0, 0.025);
   --shadow-blue: 0 8px 24px rgba(11, 125, 232, 0.25);

   --font-sans: "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif;
   --border-radius: 20px;
}

body {
   margin: 0;
   font-family: var(--font-sans);
   color: var(--color-text-main);
   background-color: var(--color-bg);
   background-image:
      radial-gradient(
         ellipse at 85% 0%,
         rgba(11, 125, 232, 0.12) 0%,
         transparent 50%
      ),
      radial-gradient(
         ellipse at 15% 100%,
         rgba(11, 125, 232, 0.08) 0%,
         transparent 50%
      ),
      linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
   background-size:
      100% 100%,
      100% 100%,
      40px 40px,
      40px 40px;
   background-position:
      0 0,
      0 0,
      center top,
      center top;
   background-attachment: fixed;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
}

.site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 16px 24px;
   pointer-events: none;
   z-index: 1000;
}

.site-logo {
   width: clamp(90px, 10vw, 140px);
   height: auto;
   object-fit: contain;
   pointer-events: auto;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

.main-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   padding: 140px 24px 60px;
   gap: 24px;
   max-width: 800px;
   margin: 0 auto;
}

.main-title {
   margin: 0 0 16px 0;
   font-weight: 800;
   font-size: clamp(2.5rem, 6vw, 4.5rem);
   line-height: 1.1;
   letter-spacing: -0.02em;
   color: var(--color-text-main);
   text-align: center;
}

.card {
   width: 100%;
   box-sizing: border-box;
   background: var(--color-card-bg);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--color-card-border);
   border-radius: var(--border-radius);
   box-shadow: var(--shadow-md);
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
}

.card:hover {
   box-shadow: var(--shadow-lg);
}

.hero-frame {
   padding: 24px;
   background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.7)
   );
}

.hero-text {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 180px;
   padding: 16px;
   margin: 0;
   color: var(--color-primary);
   text-decoration: none;
   background: transparent;
   font-weight: 800;
   font-size: clamp(2.2rem, 6.5vw, 4.8rem);
   line-height: 1;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   word-break: break-word;
   text-align: center;
   border-radius: calc(var(--border-radius) - 8px);
   transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-text:hover {
   transform: translateY(-4px);
   color: #ffffff;
   background: linear-gradient(135deg, var(--color-primary) 0%, #065ba8 100%);
   box-shadow: var(--shadow-blue);
}

.hero-text:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 4px;
}

.intro-copy {
   padding: 36px 40px;
   text-align: left;
}

.intro-copy p {
   margin: 0;
   color: var(--color-text-muted);
   font-weight: 500;
   font-size: clamp(1rem, 1.2vw, 1.05rem);
   line-height: 1.8;
   letter-spacing: 0.02em;
}

.intro-copy p + p {
   margin-top: 14px;
}

.speck-frame {
   padding: 0;
   min-height: 800px;
   margin-top: 60vh;
   overflow: hidden;
}

.speck-frame iframe {
   width: 100%;
   min-height: 800px;
   border: none;
   display: block;
   border-radius: var(--border-radius);
}

.hosting-service {
   padding: 40px;
   text-align: left;
   margin-bottom: 120px;
   margin-top: 24px;
}

.section-title {
   margin: 0 0 24px 0;
   font-weight: 700;
   font-size: clamp(1.4rem, 2vw, 1.8rem);
   line-height: 1.3;
   color: var(--color-text-main);
   letter-spacing: -0.01em;
}

.section-title::after {
   content: "";
   display: block;
   width: 40px;
   height: 4px;
   background: var(--color-primary);
   border-radius: 2px;
   margin-top: 12px;
}

.hosting-service p {
   margin: 0 0 12px 0;
   color: var(--color-text-muted);
   font-weight: 500;
   font-size: clamp(1rem, 1.2vw, 1.05rem);
   line-height: 1.8;
}

.action-container {
   margin-top: 36px;
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

.action-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 16px 36px;
   border-radius: 12px;
   font-weight: 600;
   font-size: clamp(0.95rem, 1.2vw, 1.1rem);
   text-decoration: none;
   letter-spacing: 0.02em;
   transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.action-button.primary {
   background: var(--color-primary);
   color: #ffffff;
   border: 1px solid transparent;
   box-shadow: var(--shadow-sm);
}

.action-button.primary span {
   color: rgba(255, 255, 255, 0.7);
   margin: 0 1px;
}

.action-button.primary:hover {
   background: var(--color-primary-hover);
   transform: translateY(-2px);
   box-shadow: var(--shadow-blue);
}

.action-button.secondary {
   background: rgba(255, 255, 255, 0.5);
   color: var(--color-text-main);
   border: 1px solid rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(4px);
}

.action-button.secondary:hover {
   background: #ffffff;
   border-color: rgba(0, 0, 0, 0.2);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
}

.action-button:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 4px;
}

.fade-up {
   opacity: 0;
   transform: translateY(40px);
   transition:
      opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fade-up.visible {
   opacity: 1;
   transform: translateY(0);
}

@media (max-width: 768px) {
   .main-content {
      padding: 120px 16px 40px;
      gap: 20px;
   }

   .hero-frame,
   .intro-copy,
   .hosting-service {
      padding: 24px;
   }

   .hero-text {
      min-height: 140px;
   }

   .speck-frame {
      margin-top: 50vh;
   }

   .action-button {
      width: 100%;
   }
}