: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;
}

.usage-frame {
   padding: 36px 40px;
   text-align: left;
}

.usage-list {
   margin: 0;
   padding-left: 1.4em;
   color: var(--color-text-muted);
   font-weight: 600;
   font-size: clamp(1rem, 1.2vw, 1.1rem);
   line-height: 1.8;
}

.usage-list li + li {
   margin-top: 10px;
}

.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,
   .usage-frame {
      padding: 24px;
   }

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

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

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

/* ============================================================
   2カラムレイアウト（左：メインコンテンツ / 右：ご利用開始ガイド）
   ============================================================ */
.page-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 440px;
   gap: 32px;
   align-items: start;
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 24px;
}

.page-layout .main-content {
   padding-left: 0;
   padding-right: 0;
   margin: 0;
   width: 100%;
}

/* ------------------------------------------------------------
   ガイドパネル本体（独立スクロール）
   ------------------------------------------------------------ */
.guide-panel {
   position: sticky;
   top: 92px;
   margin-top: 140px;
   height: calc(100vh - 124px);
   min-height: 420px;
   display: flex;
   flex-direction: column;
   padding: 0;
   overflow: hidden;
}

.guide-head {
   position: relative;
   flex: none;
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 20px 24px 16px;
   border-bottom: 1px solid rgba(15, 23, 42, 0.08);
   background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.7)
   );
}

.guide-head-text {
   min-width: 0;
}

.guide-eyebrow {
   margin: 0 0 2px;
   font-size: 0.66rem;
   font-weight: 700;
   letter-spacing: 0.18em;
   color: var(--color-primary);
}

.guide-title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 700;
   letter-spacing: -0.01em;
   color: var(--color-text-main);
   line-height: 1.3;
}

.guide-badge {
   margin-left: auto;
   flex: none;
   align-self: center;
   font-size: 0.66rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   color: var(--color-primary);
   background: rgba(11, 125, 232, 0.09);
   border: 1px solid rgba(11, 125, 232, 0.22);
   border-radius: 999px;
   padding: 4px 11px;
   white-space: nowrap;
}

.guide-progress {
   position: absolute;
   left: 0;
   bottom: -1px;
   width: 100%;
   height: 2px;
}

.guide-progress span {
   display: block;
   width: 0;
   height: 100%;
   border-radius: 0 2px 2px 0;
   background: linear-gradient(90deg, var(--color-primary), #38bdf8);
   transition: width 0.1s linear;
}

.guide-scroll {
   flex: 1 1 auto;
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
   padding: 22px 24px 44px;
   scrollbar-width: thin;
   scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}

.guide-scroll:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
}

.guide-scroll::-webkit-scrollbar {
   width: 8px;
}

.guide-scroll::-webkit-scrollbar-track {
   background: transparent;
}

.guide-scroll::-webkit-scrollbar-thumb {
   background: rgba(15, 23, 42, 0.18);
   border-radius: 999px;
   border: 2px solid transparent;
   background-clip: content-box;
}

.guide-scroll::-webkit-scrollbar-thumb:hover {
   background: rgba(15, 23, 42, 0.32);
   background-clip: content-box;
}

.guide-lead {
   margin: 0 0 16px;
   font-size: 0.9rem;
   line-height: 1.85;
   color: var(--color-text-muted);
   font-weight: 500;
}

.guide-legend {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 22px;
   font-size: 0.75rem;
   color: var(--color-text-muted);
   font-weight: 600;
}

.legend-item {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.legend-item .dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   display: inline-block;
}

.legend-item .dot.user {
   background: var(--color-primary);
}

.legend-item .dot.ops {
   background: #d97706;
}

/* ------------------------------------------------------------
   ステップ（タイムライン）
   ------------------------------------------------------------ */
.guide-steps {
   list-style: none;
   margin: 0 0 32px;
   padding: 0;
}

.gstep {
   position: relative;
   display: grid;
   grid-template-columns: 34px 1fr;
   gap: 14px;
   padding-bottom: 22px;
}

.gstep:not(:last-child)::before {
   content: "";
   position: absolute;
   left: 16px;
   top: 38px;
   bottom: 4px;
   width: 2px;
   border-radius: 2px;
   background: linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.12),
      rgba(15, 23, 42, 0.04)
   );
}

.gnum {
   width: 34px;
   height: 34px;
   border-radius: 11px;
   display: grid;
   place-items: center;
   font-weight: 800;
   font-size: 0.95rem;
   flex: none;
   position: relative;
   z-index: 1;
}

.gstep.user .gnum {
   color: #ffffff;
   background: linear-gradient(135deg, var(--color-primary), #065ba8);
   box-shadow: 0 4px 12px rgba(11, 125, 232, 0.3);
}

.gstep.ops .gnum {
   color: #ffffff;
   background: linear-gradient(135deg, #f59e0b, #d97706);
   box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}

.gbody {
   min-width: 0;
   padding-top: 1px;
}

.gtag {
   display: inline-block;
   font-size: 0.66rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   padding: 3px 9px;
   border-radius: 6px;
   margin-bottom: 8px;
}

.gtag.u {
   color: var(--color-primary);
   background: rgba(11, 125, 232, 0.09);
   border: 1px solid rgba(11, 125, 232, 0.22);
}

.gtag.o {
   color: #b45309;
   background: rgba(217, 119, 6, 0.1);
   border: 1px solid rgba(217, 119, 6, 0.24);
}

.gbody h3 {
   margin: 0 0 8px;
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: -0.01em;
   color: var(--color-text-main);
}

.gbody p {
   margin: 0 0 10px;
   font-size: 0.86rem;
   line-height: 1.85;
   color: var(--color-text-muted);
   font-weight: 500;
}

.gbody b {
   color: var(--color-text-main);
   font-weight: 700;
}

.gbody ul {
   margin: 0 0 10px;
   padding-left: 1.25em;
   font-size: 0.83rem;
   line-height: 1.8;
   color: var(--color-text-muted);
   font-weight: 500;
}

.gbody li {
   margin-bottom: 4px;
}

.gbody li::marker {
   color: var(--color-primary);
}

.gbody code {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 0.8em;
   background: rgba(11, 125, 232, 0.07);
   border: 1px solid rgba(11, 125, 232, 0.16);
   color: #075ea8;
   border-radius: 5px;
   padding: 1px 6px;
   white-space: nowrap;
}

.gnote {
   font-size: 0.8rem;
   line-height: 1.8;
   color: var(--color-text-muted);
   background: rgba(11, 125, 232, 0.055);
   border-left: 3px solid var(--color-primary);
   border-radius: 0 8px 8px 0;
   padding: 10px 13px;
   margin: 12px 0 0;
   font-weight: 500;
}

.gnote.warn {
   background: rgba(217, 119, 6, 0.07);
   border-left-color: #d97706;
}

.gnote.done {
   background: rgba(16, 185, 129, 0.08);
   border-left-color: #10b981;
}

.gnote b {
   color: var(--color-text-main);
}

.gbtn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-top: 14px;
   padding: 11px 20px;
   border-radius: 10px;
   font-size: 0.85rem;
   font-weight: 600;
   text-decoration: none;
   letter-spacing: 0.02em;
   background: var(--color-primary);
   color: #ffffff;
   border: 1px solid transparent;
   transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.gbtn.ghost {
   background: rgba(255, 255, 255, 0.6);
   color: var(--color-text-main);
   border: 1px solid rgba(0, 0, 0, 0.1);
}

.gbtn.ghost:hover {
   background: #ffffff;
   border-color: rgba(0, 0, 0, 0.2);
   box-shadow: var(--shadow-md);
}

.gbtn:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 3px;
}

.gbtn-dot {
   color: rgba(255, 255, 255, 0.7);
   margin: 0 1px;
}

.gurl {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   background: rgba(15, 23, 42, 0.035);
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 10px;
   padding: 9px 12px;
   margin-bottom: 4px;
}

.gurl code {
   background: none;
   border: none;
   padding: 0;
   font-size: 0.8rem;
   color: var(--color-text-main);
   white-space: normal;
   word-break: break-all;
}

.gcopy {
   margin-left: auto;
   flex: none;
   font-family: inherit;
   font-size: 0.7rem;
   font-weight: 600;
   color: var(--color-primary);
   background: rgba(11, 125, 232, 0.08);
   border: 1px solid rgba(11, 125, 232, 0.22);
   border-radius: 7px;
   padding: 4px 10px;
   cursor: pointer;
   transition: all 0.2s ease;
}

.gcopy:hover {
   background: var(--color-primary);
   color: #ffffff;
}

.gcopy.copied {
   background: #10b981;
   border-color: #10b981;
   color: #ffffff;
}

/* ------------------------------------------------------------
   Proxmox VE ログイン画面のモック
   ------------------------------------------------------------ */
.pve {
   width: 100%;
   max-width: 360px;
   background: #2a2a2a;
   border: 1px solid #444;
   border-radius: 6px;
   overflow: hidden;
   margin: 12px 0 0;
   box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.5);
}

.pve-t {
   background: #333;
   color: #f0f0f0;
   font-size: 0.78rem;
   font-weight: 700;
   padding: 8px 12px;
   border-bottom: 1px solid #4a4a4a;
}

.pve-b {
   padding: 12px 13px 4px;
}

.pve-r {
   display: flex;
   align-items: center;
   gap: 9px;
   margin-bottom: 9px;
}

.pve-r label {
   color: #cfcfcf;
   font-size: 0.72rem;
   width: 62px;
   text-align: right;
   flex: none;
}

.pve-sel {
   flex: 1;
   min-width: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 6px;
   background: #3a3a3a;
   border: 1px solid #555;
   border-radius: 3px;
   color: #e8e8e8;
   font-size: 0.72rem;
   padding: 5px 9px;
}

.pve-sel span:first-child {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.pve-sel span:last-child {
   color: #8a8a8a;
   font-size: 0.55rem;
   flex: none;
}

.pve-f {
   display: flex;
   justify-content: flex-end;
   padding: 4px 13px 14px;
}

.pve-btn {
   position: relative;
   background: #1976d2;
   color: #ffffff;
   border: 1px solid #1565c0;
   border-radius: 3px;
   font-size: 0.72rem;
   font-weight: 700;
   padding: 6px 13px;
}

.pve-btn::after {
   content: "";
   position: absolute;
   inset: -6px;
   border-radius: 7px;
   border: 2px solid #4da3ff;
   animation: pve-pulse 2s ease-in-out infinite;
}

@keyframes pve-pulse {
   0%,
   100% {
      opacity: 0.15;
      transform: scale(0.97);
   }
   50% {
      opacity: 0.9;
      transform: scale(1);
   }
}

.pve-cap {
   margin: 8px 0 12px !important;
   font-size: 0.72rem !important;
   color: #94a3b8 !important;
}

/* ------------------------------------------------------------
   セクション見出し / 仕様表 / FAQ / 連絡先
   ------------------------------------------------------------ */
.guide-sec {
   margin: 0 0 14px;
   padding-top: 8px;
   font-size: 1.05rem;
   font-weight: 700;
   letter-spacing: -0.01em;
   color: var(--color-text-main);
}

.guide-sec::after {
   content: "";
   display: block;
   width: 32px;
   height: 3px;
   margin-top: 9px;
   border-radius: 2px;
   background: var(--color-primary);
}

.guide-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 32px;
   font-size: 0.82rem;
   background: rgba(255, 255, 255, 0.55);
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 12px;
   overflow: hidden;
}

.guide-table th,
.guide-table td {
   text-align: left;
   padding: 10px 13px;
   border-bottom: 1px solid rgba(15, 23, 42, 0.06);
   vertical-align: top;
   line-height: 1.6;
}

.guide-table th {
   width: 42%;
   font-weight: 600;
   color: var(--color-text-muted);
   background: rgba(15, 23, 42, 0.02);
}

.guide-table td {
   font-weight: 600;
   color: var(--color-text-main);
}

.guide-table tr:last-child th,
.guide-table tr:last-child td {
   border-bottom: none;
}

.guide-table .price {
   font-size: 1rem;
   font-weight: 800;
   color: var(--color-primary);
}

.guide-faq {
   background: rgba(255, 255, 255, 0.55);
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 12px;
   margin-bottom: 8px;
   overflow: hidden;
   transition: border-color 0.2s ease;
}

.guide-faq[open] {
   border-color: rgba(11, 125, 232, 0.3);
   background: rgba(255, 255, 255, 0.8);
}

.guide-faq summary {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   cursor: pointer;
   list-style: none;
   padding: 12px 15px;
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--color-text-main);
   line-height: 1.6;
}

.guide-faq summary::-webkit-details-marker {
   display: none;
}

.guide-faq summary::before {
   content: "＋";
   flex: none;
   color: var(--color-primary);
   font-weight: 700;
   line-height: 1.6;
}

.guide-faq[open] summary::before {
   content: "−";
}

.guide-faq summary:hover {
   color: var(--color-primary);
}

.guide-faq summary:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
}

.faq-body {
   padding: 0 15px 14px 36px;
}

.faq-body p {
   margin: 0 0 8px;
   font-size: 0.82rem;
   line-height: 1.85;
   color: var(--color-text-muted);
   font-weight: 500;
}

.faq-body p:last-child {
   margin-bottom: 0;
}

.faq-body b {
   color: var(--color-text-main);
   font-weight: 700;
}

.guide-contacts {
   display: grid;
   gap: 8px;
   margin-bottom: 16px;
}

.gcontact {
   background: rgba(255, 255, 255, 0.55);
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 12px;
   padding: 12px 15px;
}

.gcontact .ck {
   display: block;
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   color: var(--color-text-muted);
   margin-bottom: 4px;
}

.gcontact a,
.gcontact .cv {
   font-size: 0.87rem;
   font-weight: 700;
   color: var(--color-primary);
   text-decoration: none;
   word-break: break-all;
}

.gcontact .cv {
   color: var(--color-text-main);
}

.gcontact a:hover {
   text-decoration: underline;
}

.guide-foot {
   margin: 0;
   font-size: 0.75rem;
   line-height: 1.8;
   color: var(--color-text-muted);
   font-weight: 500;
}

/* ------------------------------------------------------------
   レスポンシブ：狭い画面では 1 カラムに折り返す
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
   .page-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      max-width: 848px;
   }

   .guide-panel {
      position: static;
      height: auto;
      min-height: 0;
      margin: 0 0 60px;
      overflow: visible;
   }

   .guide-scroll {
      overflow: visible;
      padding-bottom: 32px;
   }

   .guide-progress {
      display: none;
   }
}

@media (max-width: 768px) {
   .page-layout {
      padding: 0 16px;
   }

   .guide-head {
      padding: 18px 20px 14px;
   }

   .guide-scroll {
      padding: 20px 20px 28px;
   }

   .gbtn {
      width: 100%;
   }
}

/* 768px 以下：page-layout 側で余白を持つため main-content の左右余白を打ち消す */
@media (max-width: 768px) {
   .page-layout .main-content {
      padding-left: 0;
      padding-right: 0;
   }
}

/* ガイドパネル内は border-box に統一（padding 込みで幅を計算） */
.guide-panel,
.guide-panel *,
.guide-panel *::before,
.guide-panel *::after {
   box-sizing: border-box;
}

/* 既存: fixed ヘッダーの padding で横スクロールが出るのを防ぐ */
.site-header {
   box-sizing: border-box;
}