/* 基本設定 */
body {
  min-height: 100vh;
  background-color: #ffffff;
  color: #1a202c; /* text-gray-900 */
  font-family: sans-serif;
}

/* テキスト選択時のハイライト色 */
::selection {
  background-color: rgba(248, 113, 113, 0.3); /* selection:bg-red-400/30 */
}

/* 汎用コンテナ */
.container {
  max-width: 1280px; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;  /* px-4 */
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem;
  }
}

/* ヘッダー */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(8px);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header {
    background-color: rgba(255, 255, 255, 0.7);
  }
}

.header-inner {
  display: flex;
  height: 4rem; /* h-16 */
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: -0.025em; /* tracking-tight */
}

.logo-svg {
  height: 1.5rem; /* h-6 */
  width: auto;
}

/* ナビゲーション */
.main-nav {
  display: none; /* hidden by default */
}
@media (min-width: 768px) { /* md breakpoint */
  .main-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* gap-6 */
    font-size: 0.875rem; /* text-sm */
  }
}

.nav-link {
  color: #4a5568; /* text-gray-600 */
  transition: color 0.2s ease-in-out;
}
.nav-link:hover {
  color: #1a202c; /* hover:text-gray-900 */
}

/* ボタン */
.btn-primary {
  display: inline-flex; /* inline-block → inline-flex に変更 */
  align-items: center;  /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え（必要なら） */
  background-color: #ef4444;
  color: white;
  padding: 0.75rem 1.25rem; /* secondaryと同じにする */
  border-radius: 1rem; /* 両方統一 */
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out;
  text-decoration: none;
}
.btn-primary:hover {
  background-color: #f87171; /* hover:bg-red-400 */
}



.hero-section {
  position: relative;
  overflow: hidden;
}

/* 背景画像を透過して配置 */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/hero-bg-large.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;  /* ← ここで透過度を調整 (0.1〜1.0) */
  z-index: 0;
}

/* テキストやボタンを前面に */
.hero-content {
  position: relative;
  z-index: 1;
}



.hero-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -10;

  /* 背景画像を追加 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 背景画像を薄くする */
  opacity: 0.4; /* ← 画像を透過 (0.3〜0.6くらいで調整) */
}

/* 赤いグロー（上にかぶせる） */
.hero-bg::before {
  content: '';
  position: absolute;
  top: -10rem;
  left: 50%;
  height: 36rem;
  width: 36rem;
  transform: translateX(-50%);
  border-radius: 9999px;
  background-color: rgba(149, 149, 149, 0.35); /* 赤を濃く */
  filter: blur(72px);
}

.hero-content {
  display: flex;
  justify-content: center; /* 横方向の中央寄せ */
  text-align: center;       /* テキストを中央揃え */
  grid-template-columns: 1fr;
  gap: 2.5rem; /* gap-10 */
  padding-top: 3.5rem; /* py-14 */
  padding-bottom: 3.5rem;
}
@media (min-width: 1024px) { /* lg breakpoint */
  .hero-content {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 5rem; /* lg:py-20 */
    padding-bottom: 5rem;
  }
}

.hero-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* space-y-6 */
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: #f9fafb; /* bg-gray-50 */
  padding: 0.25rem 0.75rem; /* px-3 py-1 */
  font-size: 0.75rem; /* text-xs */
  color: #374151; /* text-gray-700 */
  width: fit-content;
}
.hero-badge-dot {
  height: 0.375rem; /* h-1.5 */
  width: 0.375rem; /* w-1.5 */
  border-radius: 9999px;
  background-color: #ef4444; /* bg-red-500 */
}

.hero-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem; /* /tight */
  font-weight: 700;
}
.hero-title-highlight {
  color: #ef4444; /* text-red-500 */
}
@media (min-width: 640px) { /* sm breakpoint */
  .hero-title {
    font-size: 4rem; /* sm:text-5xl */
    line-height: 1.25; /* /tight */
  }
}

.hero-catch-copy {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  letter-spacing: 0.01em;
  line-height: 1.65;
}

.hero-description {
  color: #374151; /* text-gray-700 */
  font-size: 1rem; /* text-base */
}
@media (min-width: 640px) { /* sm breakpoint */
  .hero-description {
    font-size: 1.125rem; /* sm:text-lg */
  }
}

.hero-buttons {
  display: flex;
  justify-content: center; /* 横方向で中央寄せ */
  gap: 1rem;               /* ボタン間の余白（16px相当） */
  margin-top: 1.5rem;      /* 上に余白（必要なら調整） */
}




/* 技術スタックセクション */
.tech-section {
  background-color: rgba(243, 244, 246, 0.4); /* bg-gray-100/40 */
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 1024px) {
  .tech-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}


.section-note {
  color: #4b5563; /* text-gray-600 */
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* メイン技術スタック表 */
.tech-table {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}
.tech-table table {
  width: 100%;
  border-collapse: collapse;
}
.tech-table th,
.tech-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
.tech-table thead th {
  background-color: #f9fafb; /* bg-gray-50 */
  font-size: 0.75rem;
  color: #6b7280; /* text-gray-500 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tech-table tbody tr:last-child td {
  border-bottom: none;
}
.tech-table ul {
  margin: 0;
}


/* アコーディオン共通 */
.accordion-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.accordion-item {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  overflow: hidden;
}
.accordion-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none; /* マーカーを非表示 */
}
.accordion-summary::-webkit-details-marker {
  display: none; /* Chrome, Safari */
}
.accordion-title {
  font-weight: 600;
}
.accordion-icon {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease-in-out;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7' /%3e%3c/svg%3e");
  background-size: contain;
}
.accordion-item[open] > .accordion-summary .accordion-icon {
  transform: rotate(90deg);
}
.accordion-item[open] > .accordion-summary {
  border-bottom: 1px solid #e5e7eb;
}

/* アコーディオン内のデータテーブル */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: 0.65rem 0.8rem;
  vertical-align: top;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: left;
}
.data-table thead th {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 600;
  color: #6b7280;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table td:first-child {
  font-weight: 600;
  white-space: nowrap;
}
/* モバイル表示用 */
@media (max-width: 720px) {
  .data-table thead {
    display: none;
  }
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }
  .data-table tr {
    padding: 0.5rem 0.2rem;
    border-bottom: 1px solid #e5e7eb;
  }
  .data-table tr:last-child {
    border-bottom: none;
  }
  .data-table td {
    padding: 0.35rem 0.2rem;
    border: none;
  }
  .data-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.15rem;
    font-weight: 600;
  }
}

/* CTAセクション */
.cta-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.cta-inner {
  padding: 2rem;
  text-align: center;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
}
.cta-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.cta-text {
  font-size: 1rem;
  color: #4b5563;
  margin-bottom: 1.5rem;
}
.cta-note {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 1rem;
}






/* Tech テーブルだけに作用させる（セレクタ強め） */
#tech .tech-table{
  position:relative;
  border-radius:1rem;         /* 角丸 */
  overflow:hidden;
  background:#fff;
}

/* 外枠の薄い線は疑似要素で描く：二重線やcollapseの影響を一切受けない */
#tech .tech-table::before{
  content:"";
  position:absolute; inset:0;
  border:1px solid #e5e7eb;   /* gray-200 */
  border-radius:inherit;
  pointer-events:none;        /* クリック無視 */
}

/* テーブル本体は外枠の線を持たない */
#tech .tech-table table{
  width:100%;
  border:0 !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

/* 角丸干渉リセット（Tailwindの .rounded-* を無効化） */
#tech .tech-table table,
#tech .tech-table thead,
#tech .tech-table tbody,
#tech .tech-table tr,
#tech .tech-table th,
#tech .tech-table td,
#tech .tech-table [class*="rounded"]{
  border-radius:0 !important;
}

/* ヘッダ＆ボディの罫線（内側のみ） */
#tech .tech-table thead th{
  background:#f9fafb;
  color:#6b7280;
  font-weight:600;
  border-bottom:1px solid #e5e7eb !important;
  text-align:left; padding:.75rem 1rem;
}
#tech .tech-table tbody td{
  border-bottom:1px solid #e5e7eb !important;
  padding:.75rem 1rem; vertical-align:top;
}
#tech .tech-table tbody tr:last-child td{
  border-bottom:0 !important;
}

/* セクションタイトルと表の間の余白を統一 */
#tech h2 {
  margin-bottom: 2.5rem; /* 他セクションと同じ間隔（例: 24px） */
}

#tech .tech-table {
  margin-top: 0;         /* タイトル直後の表なので不要な上余白はゼロ */
  margin-bottom: 2rem;   /* セクションの下余白（例: 32px） */
}
  #tech-more[open] .chev { transform: rotate(180deg); }

.caret{color:#666}


.mask-radial{ -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent); mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent); } .selection\:bg-red-400\/30 *::selection { background: rgba(248,113,113,.3); } .shadow-inset-top { box-shadow: inset 0 1px 0 rgba(0,0,0,.03); }
  .caret{color:#666}

/* Scoped reset to avoid rounded corners interfering with borders */
.tech-table table,
.tech-table thead,
.tech-table tbody,
.tech-table tr,
.tech-table th,
.tech-table td { border-radius: 0 !important; }
/* Ensure outer has the only rounding */
.tech-table { border-radius: 1rem; overflow: hidden; }
/* Keep thin separators */
.tech-table th { border-bottom: 1px solid rgba(17, 24, 39, 0.12); } /* gray-200 */
.tech-table td { border-bottom: 1px solid rgba(17, 24, 39, 0.12); }
.tech-table tr:last-child td { border-bottom: 0; }
.tech-table td:first-child, .tech-table th:first-child { border-right: 1px solid rgba(17, 24, 39, 0.12); }
.caret{color:#666}

/* FAQ accordion (chevron) */
#faq details {
  border-radius: 1rem;
  background: #fff;
  padding: 1rem 1.125rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
#faq details:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
#faq details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}
#faq details summary::-webkit-details-marker { display: none; }
#faq .faq-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: rgba(248,113,113,.12); /* red-400/12 */
  color: rgb(248,113,113);            /* red-400 */
  transition: transform .25s ease, background .2s ease, color .2s ease;
  flex: 0 0 22px;
}
#faq details[open] .faq-icon { transform: rotate(180deg); }
#faq details summary span.faq-title { flex: 1 1 auto; }
#faq details p { margin-top: .5rem; margin-left: 1.2rem; margin-right: 3rem; color: #374151; font-size: .9rem; }
.caret{color:#666}

.catalog-acc, .catalog-acc summary, .catalog-acc table, .catalog-acc th, .catalog-acc td {
  border: 1px solid var(--c-line) !important;
  border-collapse: collapse !important;
}
.catalog-acc summary {
  border-bottom: none !important;
}
.catalog-acc table {
  border-top: none !important;
}
.catalog-acc tr:last-child td {
  border-bottom: none !important;
}
.caret{color:#666}



/* --- Border normalization for catalog (v7) --- */
details.catalog-acc { border: 1px solid var(--c-line) !important; border-radius: 1rem !important; overflow: hidden !important; }
details.catalog-acc summary { border: none !important; border-bottom: 1px solid var(--c-line) !important; background: inherit; }
details.catalog-acc .table-wrap { border: none !important; }
details.catalog-acc table.catalog { border: none !important; border-collapse: separate !important; }
details.catalog-acc table.catalog th,
details.catalog-acc table.catalog td {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--c-line) !important;
}
details.catalog-acc table.catalog tr:last-child td { border-bottom: none !important; }
.caret{color:#666}



/* Remove double border when closed */
details.catalog-acc summary { border-bottom: none !important; }
/* Add separator only when open */
details.catalog-acc[open] summary { border-bottom: 1px solid var(--c-line) !important; }
.caret{color:#666}



.catalog-acc summary::-webkit-details-marker { display: none; }
.catalog-acc .faq-icon{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: rgba(248,113,113,.12);
  color: rgb(248,113,113);
  transition: transform .25s ease, background .2s ease, color .2s ease;
  flex: 0 0 22px;
}
.catalog-acc[open] .faq-icon { transform: rotate(180deg); }



/* Align width with surrounding content and control column widths */
.catalog-wrap { margin-left:auto; margin-right:auto; }
table.catalog { table-layout: fixed; }
table.catalog thead th:nth-child(1),
table.catalog tbody td:nth-child(1){ width:18%; }
table.catalog thead th:nth-child(2),
table.catalog tbody td:nth-child(2){ width:28%; }
table.catalog thead th:nth-child(3),
table.catalog tbody td:nth-child(3){ width:54%; }
/* Prevent overly long lines in description */
table.catalog tbody td:nth-child(3){ line-height:1.55; }
@media (max-width: 1024px){
  table.catalog thead th:nth-child(1),
  table.catalog tbody td:nth-child(1){ width:24%; }
  table.catalog thead th:nth-child(2),
  table.catalog tbody td:nth-child(2){ width:30%; }
  table.catalog thead th:nth-child(3),
  table.catalog tbody td:nth-child(3){ width:46%; }
}



/* Horizontal scroll tables on mobile */
@media (max-width: 720px){
  details.catalog-acc .table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  details.catalog-acc table.catalog{
    display: table !important;
    width: 100%;
    min-width: 720px;        /* keep header columns visible; enable horizontal scroll */
    table-layout: fixed;
    border-collapse: separate;
  }
  details.catalog-acc table.catalog thead{
    display: table-header-group !important;
  }
  details.catalog-acc table.catalog tbody{
    display: table-row-group !important;
  }
  details.catalog-acc table.catalog tr{
    display: table-row !important;
  }
  details.catalog-acc table.catalog th,
  details.catalog-acc table.catalog td{
    display: table-cell !important;
    padding: .75rem .9rem !important;
  }
  /* Hide mobile card labels if any remained */
  details.catalog-acc table.catalog td::before{ content: none !important; }
  /* Optional scroll hint */
  .scroll-hint{ display:block !important; font-size:12px; color:#9CA3AF; margin-top:6px; text-align:center; }
}
/* Desktop: keep hint hidden */
.scroll-hint{ display:none; }



.tech-table{ position:relative; padding: 20px 24px !important; background:#fff; border:none !important; border-radius:16px; }
.tech-table::before, .tech-table::after{ border:none !important; }
@media (min-width:1024px){
  .tech-table{ padding: 24px 28px !important; }
}



table.catalog{ table-layout: fixed; }
table.catalog thead th:nth-child(3),
table.catalog tbody td:nth-child(3){ width:33% !important; }



.catalog-acc summary .ttl{ display:flex; align-items:center; gap:.5rem; }
.catalog-acc summary .sec-ic{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9999px;background:rgba(248,113,113,.12);color:rgb(248,113,113);
}
.catalog-acc summary .sec-ic svg{ width:14px;height:14px; }



/* Add space between first and second columns */
table.catalog td:nth-child(1),
table.catalog th:nth-child(1){
  padding-right: 12px !important;
}



/* Mobile horizontal scroll for the top tech table */
.tech-table .tech-table-wrapper{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 720px){
  .tech-table .tech-table-wrapper > table{
    min-width: 720px;        /* keep columns readable; swipe to view */
    table-layout: auto;
  }
}



/* Add clear gap between "分野" (col-1) and "名称" (col-2) */
table.catalog th:nth-child(1),
table.catalog td:nth-child(1){ padding-right: 16px !important; }
table.catalog th:nth-child(2),
table.catalog td:nth-child(2){ padding-left: 16px !important; }



@media (max-width: 720px){
  /* Force catalog tables to remain real tables and scroll horizontally */
  details.catalog-acc .table-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  details.catalog-acc table.catalog{
    display: table !important;
    min-width: 860px !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    width: 100% !important;
  }
  details.catalog-acc table.catalog thead{ display: table-header-group !important; }
  details.catalog-acc table.catalog tbody{ display: table-row-group !important; }
  details.catalog-acc table.catalog tr{ display: table-row !important; }
  details.catalog-acc table.catalog th,
  details.catalog-acc table.catalog td{ display: table-cell !important; white-space: nowrap; }
  /* Kill mobile card pseudo labels */
  details.catalog-acc table.catalog td::before{ content: none !important; display:none !important; }
  /* Add extra gap between col1 and col2 for mobile */
  details.catalog-acc table.catalog th:nth-child(1),
  details.catalog-acc table.catalog td:nth-child(1){ padding-right: 18px !important; }
  details.catalog-acc table.catalog th:nth-child(2),
  details.catalog-acc table.catalog td:nth-child(2){ padding-left: 18px !important; }
}



/* More vertical space around each catalog accordion */
details.catalog-acc + details.catalog-acc{ margin-top: 0.75rem !important; }
.catalog-acc summary{ padding: 1.1rem 1.25rem !important; }


/* Increase vertical margin between accordion items */
details.catalog-acc + details.catalog-acc { margin-top: 1rem !important; }
.catalog-acc summary { padding: 1.1rem 1.25rem !important; }

/* Margin above header buttons */
.header-cta { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; display:flex; gap:0.75rem; flex-wrap:wrap; }

/* Secondary button style (white with gray border) */
.btn-outline {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  padding: 0.625rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.btn-outline:hover {
  border-color: #999;
}

/* Add margin above '詳細はこちら' */
.catalog-details-link { margin-top: 28px !important; }



.tag-link {
  margin-bottom: 0.75rem !important;
}



.details-link-block{
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}



.details-link {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0;
}
/* If previous wrapper exists, constrain its margins */
.details-link-block{
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
}



/* --- Icon system: unify sizes, color, stroke weight --- */
:root{
  --accent-red: #AD0C00;       /* 深い赤 */
  --accent-red-bg: #FFF0F0;    /* 薄いピンク */
  --hover-row: #FAFAFA;
}

/* Section left icons (sec-ic) + accordion right chevron (faq-icon) */
.catalog-acc summary .sec-ic,
.catalog-acc summary .faq-icon{
  width: 22px; height: 22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px;
  background: var(--accent-red-bg);
  color: var(--accent-red);
  flex: 0 0 22px;
}
.catalog-acc summary .sec-ic svg,
.catalog-acc summary .faq-icon svg{
  width: 14px; height: 14px;
  stroke: currentColor;
  stroke-width: 2;
}

/* Chevron rotation with smooth motion */
.catalog-acc summary .faq-icon{ transition: transform .22s ease, background-color .2s ease, color .2s ease; }
.catalog-acc[open] .faq-icon{ transform: rotate(180deg); }

/* Summary hover / active microinteraction */
.catalog-acc summary{
  transition: background-color .18s ease, box-shadow .18s ease;
}
.catalog-acc summary:hover{
  background-color: rgba(255, 240, 240, 0.7);
}
.catalog-acc[open] summary{
  background-color: rgba(255, 240, 240, 0.5);
}

/* Table row hover for readability */
details.catalog-acc table.catalog tbody tr{
  transition: background-color .15s ease;
}
details.catalog-acc table.catalog tbody tr:hover{
  background-color: var(--hover-row);
}

/* Buttons microinteraction */
a.btn-primary, a.btn-outline{
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
a.btn-primary:hover, a.btn-outline:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Focus-visible accessibility */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .catalog-acc summary .faq-icon,
  .catalog-acc summary,
  details.catalog-acc table.catalog tbody tr,
  a.btn-primary, a.btn-outline{
    transition: none !important;
  }
}



/* Native smooth scroll */
html { scroll-behavior: smooth; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}
/* Keep anchors visible under sticky headers */
#contact, #tech-stack { scroll-margin-top: 96px; } /* adjust if header height changes */



/* Target both catalog tables and the top tech table wrapper */
.table-wrap, .tech-table .tech-table-wrapper{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Shadow base styles */
.table-wrap::before, .table-wrap::after,
.tech-table .tech-table-wrapper::before, .tech-table .tech-table-wrapper::after{
  content: "";
  position: sticky; /* sticks to the container's edges while scrolling */
  top: 0; bottom: 0;
  width: 18px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .18s ease;
}

/* Left shadow */
.table-wrap::before, .tech-table .tech-table-wrapper::before{
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0));
}

/* Right shadow */
.table-wrap::after, .tech-table .tech-table-wrapper::after{
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.12), rgba(0,0,0,0));
}

/* Visible states toggled by JS */
.table-wrap.show-left::before, .tech-table .tech-table-wrapper.show-left::before{ opacity: .35; }
.table-wrap.show-right::after, .tech-table .tech-table-wrapper.show-right::after{ opacity: .35; }

/* Slightly softer on dark text areas */
@media (prefers-reduced-motion: reduce){
  .table-wrap::before, .table-wrap::after,
  .tech-table .tech-table-wrapper::before, .tech-table .tech-table-wrapper::after{
    transition: none;
  }
}



/* Tap highlight state for table rows */
.table-wrap table.catalog tbody tr,
.tech-table .tech-table-wrapper table tbody tr{
  transition: background-color .15s ease;
  cursor: pointer;
}
/* Highlight color (very light pink) */
.tr-tapped{ background-color: #FFF0F0 !important; }
@media (prefers-reduced-motion: reduce){
  .table-wrap table.catalog tbody tr,
  .tech-table .tech-table-wrapper table tbody tr{
    transition: none;
  }
}



/* Sticky header */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #E5E7EB;
}

/* Pulse animation for the primary CTA (gentle) */
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,34,0,.28); }
  70%  { box-shadow: 0 0 0 12px rgba(255,34,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,34,0,0); }
}
a.btn-primary.cta-pulse{
  animation: ctaPulse 2.4s ease-out infinite;
  will-change: box-shadow;
}
@media (prefers-reduced-motion: reduce){
  a.btn-primary.cta-pulse{ animation: none; }
}

/* Mid-CTA (inline section) */
.mid-cta{
  margin: 2.25rem 0;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 20px 22px;
  background: #fff;
}
@media (min-width: 1024px){
  .mid-cta{ padding: 24px 28px; }
}
.mid-cta h3{ font-size: 1.125rem; font-weight: 700; margin: 0 0 .25rem 0; }
.mid-cta p{ color: #4B5563; margin: 0 0 .75rem 0; }
.mid-cta .actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.mid-cta .fine{ font-size:.85rem; color:#6B7280; }



/* Logo band */
.trusted-by{
  margin: 2rem 0 0;
  padding: 18px 20px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background:#fff;
}
.trusted-by h3{ font-size: .95rem; color:#6B7280; margin: 0 0 .5rem 0; font-weight:600; letter-spacing:.02em; }
.trusted-logos{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items:center; }
.trusted-logo{
  height:38px; display:flex; align-items:center; justify-content:center;
  border:1px dashed #E5E7EB; border-radius:12px; color:#9CA3AF; font-size:.8rem;
}
@media (min-width: 768px){
  .trusted-logos{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trusted-logo{ height:44px; }
}

/* Final CTA */
.final-cta{
  margin: 2.25rem 0;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 22px 22px;
  background: #fff;
  text-align:center;
}
.final-cta h3{ font-size: 1.25rem; font-weight: 800; margin: 0 0 .25rem 0; letter-spacing:.01em; }
.final-cta p{ color:#4B5563; margin: 0 0 .9rem 0; }
.final-cta .actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center; }
.final-cta .fine{ font-size:.85rem; color:#6B7280; }

/* Contact form minimal */

#contact .form-row{ display:grid; gap:.5rem; }
#contact label{ font-size:.9rem; color:#374151; font-weight:600; }
#contact input[type="text"],
#contact input[type="email"],
#contact textarea{
  width:100%; border:1px solid #E5E7EB; border-radius:10px; padding:.65rem .75rem;
  font-size:.95rem; color:#111827; background:#fff; outline:none;
}
#contact textarea{ min-height:120px; resize:vertical; }
#contact input:focus, #contact textarea:focus{ border-color:#AD0C00; box-shadow:0 0 0 3px rgba(173,12,0,.08); }
#contact .form-note{ font-size:.85rem; color:#6B7280; }






/* Accordion spacing refinement */
.catalog-acc summary{
  padding: 1.25rem 1.25rem !important;
}
details.catalog-acc + details.catalog-acc{
  margin-top: 1rem !important;
}

/* Ensure outline/secondary buttons also use the unified rounded R */
a.btn-outline{ border-radius: 1rem; } /* roughly Tailwind rounded-2xl */
a.btn-primary{ border-radius: 1rem; }



.trusted-by{ margin: 2rem 0; }
.trusted-by h3{ font-size: 1.05rem; color:#374151; margin: 0 0 .6rem 0; font-weight:700; letter-spacing:.01em; }

/* Scroller */
.logo-scroller{
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(140px, 22%, 220px); /* 2-3 logos on mobile, 4-5 on desktop */
  gap: 12px;
  padding: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  background:#fff;
}

/* Scroll hint shadows (left/right) */
.logo-scroller::before, .logo-scroller::after{
  content:"";
  position: sticky;
  top: 0; bottom: 0;
  width: 18px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .18s ease;
}
.logo-scroller::before{ left:0; background:linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,0)); }
.logo-scroller::after{ right:0; background:linear-gradient(to left, rgba(0,0,0,.12), rgba(0,0,0,0)); }
.logo-scroller.show-left::before{ opacity:.35; }
.logo-scroller.show-right::after{ opacity:.35; }

.logo-item{
  scroll-snap-align: start;
  height: 64px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#6B7280;
  font-size:.85rem;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .15s ease, color .15s ease;
}
.logo-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  border-color:#D1D5DB;
  color:#374151;
}
.logo-item img{
  max-height: 36px;
  max-width: 80%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity:.9;
}

/* Controls */
.scroller-controls{
  display:flex; gap:.5rem; align-items:center; justify-content:flex-end;
  margin-top:.5rem;
}
.scroller-controls button{
  border:1px solid #E5E7EB; background:#fff; color:#374151;
  padding:.35rem .55rem; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s ease, box-shadow .12s ease, transform .12s ease;
}
.scroller-controls button:hover{ background:#F9FAFB; transform: translateY(-1px); box-shadow:0 6px 12px rgba(0,0,0,.05); }
.scroller-controls svg{ width:16px; height:16px; }



.logo-scroller{ grid-auto-columns: 32%; }            /* ~3 logos on mobile */
@media (min-width: 640px){ .logo-scroller{ grid-auto-columns: 24%; } }   /* ~4 on small tablets */
@media (min-width: 768px){ .logo-scroller{ grid-auto-columns: 20%; } }   /* ~5 on tablets */
@media (min-width: 1024px){ .logo-scroller{ grid-auto-columns: 15%; } }  /* ~6-7 on desktops */


/* ===== Works（開発支援実績） — SINGLE SOURCE OF TRUTH ===== */

/* セクション */
.works-section{ margin:2rem 0; }
.works-section h3{
  text-align:center;
  font-size:1.15rem; font-weight:700; letter-spacing:.01em;
  color:#374151; margin:0 0 .9rem 0;
}

/* 横スクロール無限トラック（マルキー） */
.works-marquee{
  --gap:14px;
  --dur:40s;                  /* JS で中身幅に応じて再計算。なければ40s */
  position:relative; overflow:hidden;
  padding:10px 8px;
}
.works-marquee .track{
  display:flex; gap:var(--gap);
  width:max-content;          /* 中身幅そのまま */
  will-change:transform;
  animation:worksMarquee var(--dur) linear infinite;
}
@keyframes worksMarquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
/* ホバーで一時停止 */
.works-marquee:hover .track{ animation-play-state:paused; }

/* カード（幅だけ可変。中の画像は比率固定で完全統一） */
.works-card{
  flex:0 0 auto;
  width:220px;                /* モバイル */
  border-radius:12px; background:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
  padding:10px;               /* 画像の周囲に余白 */
  display:flex; flex-direction:column; align-items:center;
}
@media (min-width:1024px){ .works-card{ width:260px; } }
.works-card:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.08); }

/* 画像枠を 16:9 で固定 → 中身を cover で完全統一 */
.works-card picture{
  display:block; width:100%;
  aspect-ratio:16 / 9;        /* 高さはこれで完全固定 */
  border-radius:12px; overflow:hidden;
  background:#f7f7f7;         /* 読み込み待ちの下地 */
}
.works-card picture img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;  /* ここが肝：中央トリミングで揃う */
}

/* （最後に）旧指定の干渉を無効化 */
.works-card img{ max-width:none !important; height:auto !important; }

/* キャプション（2行・中央） */
.works-meta{ margin-top:8px; text-align:center; line-height:1.35; }
.works-meta .client{ font-size:.85rem; color:#374151; font-weight:700; }
.works-meta .project{ font-size:.78rem; color:#6B7280; }

/* 動きが苦手な環境で停止 */
/*@media (prefers-reduced-motion:reduce){
  .works-marquee .track{ animation:none !important; transform:none !important; }
}*/

@media (prefers-reduced-motion: reduce){
  /* 動画酔い配慮しつつ完全停止はしない */
   .works-marquee .track{ animation-duration: calc(var(--dur) * 2) !important; }
}

/* --- ブラッシュアップセクションのスタイル --- */

/* セクション全体のコンテナ */
.solution-section-container {
  margin-top: 5rem; /* mt-20 */
  margin-bottom: 5rem; /* 全体のバランス調整 */
}

@media (min-width: 1024px) {
  .solution-section-container {
    margin-top: 7rem; /* lg:mt-28 */
  }
}

/* 各ソリューションセクション間のスペース */
.solution-section-container > section:not(:first-child) {
  margin-top: 5rem; /* space-y-20 */
}

@media (min-width: 1024px) {
  .solution-section-container > section:not(:first-child) {
    margin-top: 6rem; /* lg:space-y-24 */
  }
}

/* 各ソリューションのレイアウト（Grid） */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 2.5rem; /* gap-10 */
  align-items: center; /* items-center */
}

@media (min-width: 768px) {
  .solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    gap: 4rem; /* md:gap-16 */
  }
}

/* 画像コンテナ */
.solution-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem; /* p-6 */
}

/* 画像スタイル */
.solution-image {
  border-radius: 0.5rem; /* rounded-lg */
  object-fit: contain; /* object-contain */
  height: auto;
  width: 100%;
  max-width: 24rem; /* max-w-sm */
}

/* テキストコンテンツ */
.solution-content h3 {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
  font-weight: 700; /* font-bold */
  color: #1e293b; /* text-slate-800 */
}

@media (min-width: 1024px) {
  .solution-content h3 {
    font-size: 2.4rem; /* lg:text-3xl */
    line-height: 2.25rem;
  }
}

.solution-content p {
  margin-top: 1rem; /* mt-4 */
  color: #475569; /* text-gray-600 */
}

.solution-content .sub-heading {
  margin-top: 2rem; /* mt-8 */
  font-weight: 600; /* font-semibold */
  color: #334155; /* text-gray-800 */
}

.solution-content ul {
  margin-top: 0.75rem; /* mt-3 */
  list-style-type: disc; /* list-disc */
  list-style-position: inside; /* list-inside */
  color: #374151; /* text-gray-700 */
}

.solution-content ul li:not(:first-child) {
    margin-top: 0.5rem; /* space-y-2 */
}


.solution-content .tags-container {
  margin-top: 2rem; /* mt-8 */
}


.solution-content .tags-list {
  margin-top: 0.75rem; /* mt-3 */
  display: flex;
  flex-wrap: wrap; /* flex-wrap */
  gap: 0.5rem; /* gap-2 */
}

/* 交互レイアウトのための順序変更 */
@media (min-width: 768px) {
  .md-order-last {
    order: 9999;
  }
  .md-order-first {
    order: -9999;
  }
}

@media (min-width: 1024px) {
  #overview h2.text-3xl {
    font-size: 2.8rem; /* ← こちらの数値が適用されます */
  }
}


/* ========== 基本設定 ========== */
:root {
  --bg-muted: rgba(243, 244, 246, 0.4); /* gray-100/40 */
  --surface: #ffffff;
  --text: #111827;         /* gray-900 */
  --text-muted: #4b5563;   /* gray-600 */
  --border: #e5e7eb;       /* gray-200 */
  --radius-xl: 1rem;       /* rounded-2xl 相当 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --container: 80rem;      /* max-w-7xl */
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
}

/* ダークモード（任意） */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-muted: rgba(31, 41, 55, 0.5);
    --surface: #111827;
    --text: #f9fafb;
    --text-muted: #9ca3af;
    --border: #1f2937;
  }
}

/* ========== セクション/レイアウト ========== */

.faq .container {
  max-width: var(--container);
  margin-inline: auto;
  padding: 4rem 1rem; /* py-16 + px-4 */
}

@media (min-width: 640px) { /* sm */
  .faq .container { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) { /* lg */
  .faq .container { padding-block: 5rem; } /* lg:py-20 */
}

.faq-heading {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem); /* ~ text-3xl */
  font-weight: 700;
  color: var(--text);
}

/* グリッド */
.faq-grid {
  margin-top: 1.5rem; /* mt-6 */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { /* md */
  .faq-grid { grid-template-columns: 1fr 1fr; }
}

/* ========== FAQカード ========== */
.faq-item {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  user-select: none;
}

/* デフォルトの三角マーカーを非表示 */
.faq-summary::-webkit-details-marker { display: none; }

/* アイコン（Chevron） */
.faq-icon {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-muted);
  transition: transform .2s ease, color .2s ease, background-color .2s ease;
}

/* 開閉時のアニメーション（Chevron回転） */
.faq-item[open] .faq-icon svg {
  transform: rotate(180deg);
  transition: transform .2s ease;
}

/* 本文 */
.faq-body {
  margin-top: .5rem; /* mt-2 */
  font-size: .875rem; /* text-sm */
  color: var(--text-muted);
  line-height: 1.7;
}

/* ホバー＆フォーカスのアクセシビリティ */
.faq-summary:focus-visible {
  outline: 2px solid #3b82f6; /* blue-500 */
  outline-offset: 3px;
  border-radius: .5rem;
}
.faq-summary:hover .faq-icon {
  background: rgba(59, 130, 246, .1); /* blue-500/10 */
  color: #2563eb; /* blue-600 */
}

/* ===== Buttons: unify shape & metrics ===== */
:is(.btn-primary, .btn-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;   /* 同一の高さ感 */
  border-radius: 9999px;      /* 完全に同じ丸み（pill） */
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;             /* 文字の縦位置を揃える */
  text-decoration: none;
  gap: .4rem;
}

/* Primary (filled) */
.btn-primary {
  background-color: #ef4444;
  color: #fff;
  border: 1px solid transparent;
  transition: background-color .2s ease-in-out, box-shadow .12s ease;
}
.btn-primary:hover { background-color: #f05252; }

/* Secondary (outline) */
.btn-secondary {
  background-color: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
  transition: background-color .2s ease-in-out, border-color .15s ease;
}
.btn-secondary:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

/* ---- Buttons: 完全一致オーバーライド ---- */
.hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;          /* ← 中央揃えで高さの見え方を統一 */
  gap: 1rem;
}

.btn-primary,
.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important; /* 枠あり/なしでも高さを揃える */
  padding: 1.8rem 3.6rem !important;  /* 同一パディング */
  border-radius: 9999px !important;     /* 同一の丸み（pill） */
  font-size: 1.2rem !important;         /* 同一フォントサイズ */
  font-weight: 700 !important;
  line-height: 1 !important;            /* 文字の縦位置を完全一致 */
  text-decoration: none !important;
  gap: .4rem;
}

/* Filled */
.btn-primary {
  background: linear-gradient(to right, #ff2200, #ff8025); /* rose-500 → gold → orange-500 */
  color: #fff !important;
  border: 1px solid transparent !important; /* 枠ありと高さを合わせる */
}

/* Outline */
.btn-secondary {
  background-color: #fff !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
}

/* フォーカス可視化（アクセシビリティ） */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid rgba(239,68,68,.6);
  outline-offset: 2px;
}

/* アクティブ時のわずかな押し込み感 */
.btn-primary:active,
.btn-secondary:active {
  transform: translateY(1px);
}

/* タッチターゲットの最低高さを確保（指で押しやすく） */
.btn-primary, .btn-secondary {
  min-height: 44px;
}

/* モバイル時は縦積み（必要なら） */
@media (max-width: 480px){
  .hero-buttons {
    flex-direction: row;   /* 横並び維持 */
    gap: 0.5rem;           /* ボタン間の隙間を少し狭く */
  }
  .btn-primary,
  .btn-secondary {
    padding: 1rem 1.5rem !important;  /* モバイル用に小さめ */
    font-size: 1rem !important;       /* 文字サイズも少し小さく */
  }
}

/* ヘッダー専用ボタン */
.btn-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  background: linear-gradient(to right, #f43f5e, #f97316); /* 赤→オレンジ */
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s ease-in-out;
}
.btn-header:hover {
  opacity: 0.85;
}

.hero-catch-copy {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.5); /* ← 白を85%の不透明度に */
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-top: 1rem;
  text-align: center;
}

/* 前半（補足部分） */
.hero-catch-copy .sub {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151; /* グレー */
}

/* 後半（グラデ強調部分） */
.hero-catch-copy .highlight-gradient {
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(to right, #f43f5e, #f97316); /* rose → gold → orange */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}


h4 {
  text-align: center;
}


/* 全ての .section-title をモバイルで 1.5rem、sm以上で 1.875rem に */
.section-title {
  font-size: 1.8rem;        /* = 24px 相当 (text-2xl より少し大きめ) */
  font-weight: 600;
  color: #334155;           /* text-slate-700 付近 */
  text-align: center;
  line-height: 1.3;
  
}
@media (min-width: 640px) {  /* sm 以上 */
  .section-title {
    font-size: 1.65rem;    /* = 30px 相当 (text-3xl) */
  }
}

/* サブタイトル（例：実績例などの見出し） */
.section-subtitle {
  text-align: center;          /* 中央揃え */
  font-size: 1.125rem;         /* text-lg */
  font-weight: 600;            /* font-semibold */
  color: #1e293b;              /* text-slate-900 */
}

@media (min-width: 768px) {
  .section-subtitle {
    font-size: 1.35rem;        /* md: 少し大きめ */
    line-height: 1.85rem;      /* 行間を調整 */
  }
}


   :root{
      --c-red:#FF2200; --c-deepred:#AD0C00; --c-gold:#B69256; 
      --c-gray:#F7F7F7; --c-text:#222; --c-line:#E5E7EB; /* 薄いグレー */
      --c-pink:#FFF0F0; /* ご指定の薄いピンク */
    }
    .catalog-wrap{color:var(--c-text)}
    .catalog-title{letter-spacing:.02em}
    .chip{display:inline-block;padding:.2rem .6rem;border: 1px solid var(--c-line);border-radius:9999px;background:#fff;}
    .card{border: 1px solid var(--c-line);border-radius:1rem;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.05);}
    .card h3{font-weight:700;margin:0;font-size:1.125rem}
    .card-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.25rem;border-bottom: 1px solid var(--c-line);background:linear-gradient(180deg,#fff,rgba(246,246,246,.6));}
    .card-head .dot{width:.6rem;height:.6rem;border-radius:9999px;background:var(--c-gold)}
    .section-note{color:#555}
    .table-wrap{position:relative;max-height:20rem;overflow:auto;border: 1px solid var(--c-line);border-top:none;border-radius:0 0 1rem 1rem border-top:none;}
    table.catalog{width:100%;border-collapse:separate;border-spacing:0}
    table.catalog th, table.catalog td{padding:.65rem .8rem;vertical-align:top;border-bottom: 1px solid var(--c-line);font-size:.95rem;line-height:1.45}
    table.catalog thead th{position:sticky;top:0;background:#fff;border-bottom: 2px solid var(--c-line);z-index:1;font-weight:400;color:#666}
    table.catalog tbody tr:nth-child(odd){background:#fff}
    table.catalog tbody tr:nth-child(even){background:#FAFAFA}
    table.catalog tbody tr:hover{background:#F3F4F6}
    table.catalog td:first-child{white-space:nowrap;color:#444;font-weight:600}
    details.catalog-acc{border: 1px solid var(--c-line);border-radius:1rem;overflow:hidden;background:#fff}
    details.catalog-acc + details.catalog-acc{margin-top:.5rem}
    .catalog-wrap details.catalog-acc:first-of-type{margin-top:.5rem}
    details.catalog-acc[open] summary{border-bottom: 1px solid var(--c-line)}
    summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;font-weight:700;background:#fff}
    summary .ttl{display:flex;align-items:center;gap:.6rem}
    summary .caret{transition:.2s transform ease}
    details[open] summary .caret{transform:rotate(90deg)}
    .accent{color:var(--c-deepred)}
    .pink-head{background:var(--c-pink)}
    @media (max-width: 720px){
      table.catalog thead{display:none}
      .table-wrap{border: 1px solid var(--c-line);border-top:none border-top:none;}
      table.catalog, table.catalog tbody, table.catalog tr, table.catalog td{display:block;width:100%}
      table.catalog tr{border-bottom: 1px solid var(--c-line);padding:.5rem .2rem;background:#fff !important}
      table.catalog td{border:none;padding:.35rem .2rem}
      table.catalog td::before{content:attr(data-label);display:block;font-size:.8rem;color:#666;margin-bottom:.15rem}
    }
  .caret{color:#666}

  /* summary 全体を flex で左右に配置 */
.catalog-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ← アイコンを右端に寄せる */
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 700;
  background: #fff;
}

/* アイコン部分 */
.catalog-acc summary .faq-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--c-pink);
  color: var(--c-deepred);
  flex-shrink: 0; /* ← アイコンが潰れないように */
}



/* ========================================================================
   HubSpot Form Stylesheet for #contact-form (V4 - JS Assisted)
   --- ここから下を styles.css の一番下に追記 ---
   ======================================================================== */

/* :root Variables (for Theming and Consistency) */
:root {
  --hs-form-max-width: 720px;
  --hs-form-text: #374151;
  --hs-form-accent: #ff5a2a;
  --hs-form-border: #e5e7eb;
  --hs-form-background: #fff;
  --hs-form-radius: 0.75rem;
  --hs-form-gradient: linear-gradient(90deg, #ff2200, #ff7b2a);
}

/* 1. Global Form Layout & Spacing Control (JS-Assisted) */
#contact-form .hs-form {
  max-width: var(--hs-form-max-width);
  margin: 0 auto;
}
#contact-form [data-hs-forms-root] > form {
  display: grid !important;
  row-gap: 0 !important; /* gapを無効化 */
}
#contact-form form > fieldset.is-hidden-row {
  display: none !important; /* JSがマークした非表示行を隠す */
}
#contact-form form > fieldset {
  margin-top: 1rem; /* 全体の基本行間 */
}
#contact-form form > fieldset:first-child {
  margin-top: 0 !important; /* 最初の行の余白は削除 */
}
#contact-form form > fieldset.is-consent-row {
  margin-top: 0.35rem !important; /* 同意チェックの行の隙間だけを詰める */
}

/* 2. Fields: Labels & Inputs */
#contact-form .hs-form label {
  display: inline-block;
  margin-bottom: 0.3rem !important;
  font-weight: 600;
  color: var(--hs-form-text);
  font-size: 0.95rem;
}
#contact-form .hs-input {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hs-form-border);
  border-radius: var(--hs-form-radius);
  background-color: var(--hs-form-background);
  font-size: 1rem;
  line-height: 1.5;
  box-sizing: border-box;
}
#contact-form .hs-input:focus {
  outline: none;
  border-color: var(--hs-form-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hs-form-accent) 20%, transparent);
}
#contact-form textarea.hs-input {
  min-height: 160px;
  resize: vertical;
}

/* 3. Specific Field Types & Components */
#contact-form .hs-form-booleancheckbox .inputs-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#contact-form .hs-form-booleancheckbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--hs-form-accent);
}
#contact-form .hs_submit,
#contact-form .hs_submit .actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin-top: 1rem;
}
#contact-form .hs-button.primary,
#contact-form input[type="submit"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 14px 28px;
  border: 0;
  border-radius: 9999px;
  background: var(--hs-form-gradient);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* 4. Cleanup & Resets */
#contact-form .hs_recaptcha,
#contact-form .grecaptcha-badge {
  display: none !important;
}
#contact-form .hs-form .hs-field-desc,
#contact-form .hs-form fieldset:empty,
#contact-form .hs-form .field:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================================================
   HubSpot Form - Final CSS-Only Workaround
   ======================================================================== */

/* フォームの各行（fieldset）に基本の余白を設定 */
#contact-form form > fieldset {
  margin-top: 1rem;
}

/* フォームの一番最初の行の余白は削除 */
#contact-form form > fieldset:first-child {
  margin-top: 0.35rem !important;
}

/* === フォームの最終微調整 === */

/* 1. 同意チェックボックスの上の隙間を調整 */
#contact-form .legal-consent-container {
  /* マイナスの数値をゼロに近づける（例: -4.65rem → -4.3rem）と、隙間が広がります。*/
  margin-top: -4.3rem !important; 
}

/* 2. 送信ボタンの上の隙間を調整 */
#contact-form .hs_submit {
  /* ここの数値を小さくする（例: 1rem → 0.5rem）と、隙間が狭まります。*/
  margin-top: 0.5rem;
}

/* WebKit系ブラウザ（Chrome, Safari, Edge）向け */
    .custom-scrollbar::-webkit-scrollbar {
      width: 12px; /* スクロールバーの幅 */
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #f1f1f1; /* スクロールバーの背景色 */
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #c1c1c1; /* つまみの色 */
      border-radius: 6px; /* つまみの角丸 */
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8; /* マウスホバー時のつまみの色 */
    }
    /* Firefox向け */
    .custom-scrollbar {
      scrollbar-width: thin;
      scrollbar-color: #c1c1c1 #f1f1f1;
    }

   

   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

  .cta-section-v1 {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 4rem auto;
    padding: 0 1rem; 
    
    /* ↓↓ この max-width の値を変更して、他のコンテンツと幅を合わせてください ↓↓ */
    max-width: 960px; /* 例: 960px or 1024px など */
    /* ↑↑ この max-width の値を変更して、他のコンテンツと幅を合わせてください ↑↑ */
  }

  .cta-container-v1 {
    background: linear-gradient(135deg, #f3f4f6, #ffffff);
    padding: 3rem 2rem;
    text-align: center;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
  }
  
  .cta-container-v1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #ef4444;
  }

  .cta-heading-v1 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #111827;
  }

  .cta-subheading-v1 {
    font-size: 1.125rem;
    color: #4b5563;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .cta-button-v1 {
    background-color: #ef4444;
    color: #fff;
    padding: 0.875rem 2.5rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.3);
  }

  .cta-button-v1:hover {
    background-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(239, 68, 68, 0.35);
  }

  .cta-note-v1 {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 1.5rem;
  }
  
body {
  font-family: "Noto Sans JP","Meiryo",system-ui,-apple-system,"Segoe UI",sans-serif;
}

#faq .faq-summary,
#faq .faq-summary .faq-title { 
  color: var(--text);
  -webkit-text-fill-color: currentColor;
}

/* FAQは常にライト配色 */
#faq .faq-item,
#faq details,
.faq-summary,
.faq-summary .faq-title,
.faq-body {
  background: #fff !important;
  color: #111827 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ===== FAQ: 視認性＆アクセシビリティ統合パッチ（末尾に追記） ===== */

/* FAQは常にライト配色で読みやすく（ダークモード変数の影響を受けない） */
#faq .faq-item { background:#fff !important; }
#faq .faq-summary { color:#111827 !important; -webkit-text-fill-color:currentColor !important; }
#faq .faq-body    { color:#374151 !important; }

/* フォーカス可視（キーボード操作が一目で分かる） */
#faq .faq-summary:focus-visible{
  outline:3px solid rgba(239,68,68,.6);
  outline-offset:4px;
  border-radius:10px;
}

/* タップ目標の確保（WCAGの44×44px） */
#faq .faq-summary{ min-height:44px; padding:14px 18px; }

/* summaryアイコン：視覚補助（readerには読ませない設計） */
#faq .faq-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex:0 0 22px;
  border-radius:9999px;
  background:rgba(248,113,113,.12);
  color:rgb(248,113,113);
  transition:transform .22s ease, background-color .2s ease, color .2s ease;
}
#faq .faq-summary:hover .faq-icon,
#faq .faq-summary:focus-visible .faq-icon{
  background:rgba(239,68,68,.10);
  color:#b91c1c;
}
#faq .faq-item[open] .faq-icon{ transform:rotate(180deg); }

/* 動きが苦手な環境では回転を止める */
@media (prefers-reduced-motion: reduce){
  #faq .faq-item[open] .faq-icon{ transform:none !important; }
}

/* 全開/全閉ボタンの並び（置いた場合） */
.faq-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin:.75rem 0 1rem; }

/* 既存のフォント方針を維持しつつ日本語の視認性を担保（念のため） */
body{ font-family:"Noto Sans JP","Meiryo",system-ui,-apple-system,"Segoe UI",sans-serif; }

/* FAQタイトルの色がどこかで透明化されても救済 */
#faq .faq-summary, #faq .faq-summary .faq-title { -webkit-text-fill-color: currentColor; }

.hero-title .nowrap { white-space: nowrap; }  /* 行内改行を禁止 */

.grad {
  background: linear-gradient(to right, #ff2200, #f97316); /* rose → gold → orange */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* トップに戻るボタン */
.back-to-top {
  position: fixed;
  bottom: 24px;   /* 画面下からの距離 */
  right: 24px;    /* 画面右からの距離 */
  width: 48px;
  height: 48px;
  background: linear-gradient(to right, #ff2200, #f97316); /* 赤→オレンジ */
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  border-radius: 50%;   /* 丸ボタン */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 999;
}



/* トップへ戻るボタン（初期は非表示） */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(to right, #ff2200, #f97316);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);

  /* 初期は非表示（フェード用） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 1000;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  transform: translateY(-2px);
}

/* 動きが苦手な方向けにアニメを抑制 */
@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top.show {
    transition: none;
    transform: none;
  }
}