@charset "UTF-8";
:root {
  --yellow: #fff000;
  --yellow-strong: #ffe600;
  --gold: #b99a20;
  --ink: #111111;
  --text: #2a2a2a;
  --muted: #6c6c6c;
  --line: #e8e1bd;
  --bg: #fffdf3;
  --white: #ffffff;
  --shadow: 0 2.2rem 7rem rgba(17, 17, 17, 0.14);
  --radius: 2.4rem;
  --content: 115.2rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--white);
  line-height: 1.8;
  letter-spacing: 0.03em;
  overflow-x: hidden; /* 画面外へのはみ出しによる横スクロールを防ぎつつ、子要素のstickyを有効化 */
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 999;
  transform: translateY(-180%);
  background: var(--ink);
  color: var(--white);
  padding: 1rem 1.4rem;
  border-radius: var(--SN-Radius-Full);
}
.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  padding: 0;
  margin: -0.1rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sp-only {
  display: none;
}

.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 0.1rem solid rgba(17, 17, 17, 0.08);
  -webkit-backdrop-filter: blur(1.6rem);
          backdrop-filter: blur(1.6rem);
}

.header-inner {
  width: min(100% - 4rem, 128rem);
  min-height: 7.2rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #009de0, #005ea6);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
}

.brand-text {
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.brand-sub {
  margin-left: 0.8rem;
  padding-left: 1.2rem;
  border-left: 0.1rem solid rgba(17, 17, 17, 0.14);
  color: var(--gold);
  font-size: 1.3rem;
  font-weight: 800;
}

.global-nav {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}
.global-nav a {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.global-nav a:not(.header-cta):hover {
  opacity: 0.58;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.4rem;
  padding: 0 2.2rem;
  border-radius: var(--SN-Radius-Full);
  background: var(--yellow);
  box-shadow: 0 1rem 2.4rem rgba(255, 230, 0, 0.24);
}

.menu-button {
  display: none;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.menu-button span:not(.sr-only) {
  display: block;
  width: 2.4rem;
  height: 0.2rem;
  margin: 0.5rem auto;
  background: var(--ink);
  border-radius: 0.2rem;
}

.hero {
  position: relative;
  min-height: calc(100vh - 7.2rem);
  overflow: hidden;
  background: radial-gradient(circle at 52% 86%, rgba(255, 240, 0, 0.15), transparent 33%), linear-gradient(90deg, #fff 0%, #fff 54%, #fffbe5 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 17rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 70%);
  pointer-events: none;
}

.hero__bg-word {
  position: absolute;
  top: 8%;
  left: 36%;
  color: rgba(185, 154, 32, 0.12);
  font-family: "Didot", "Bodoni MT", "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(9rem, 22vw, 20rem);
  line-height: 1;
  font-weight: 300;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hero__diagonal {
  position: absolute;
  top: 0;
  right: 0;
  width: 48vw;
  height: 100%;
  background: var(--yellow);
  -webkit-clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 9rem 0 8rem rgba(255, 255, 255, 0.2);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 6.4rem, 128rem);
  min-height: calc(100vh - 7.2rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(36rem, 0.82fr);
  align-items: center;
  gap: clamp(3.2rem, 6vw, 9.2rem);
  padding: 6.2rem 0 7rem;
}

.hero__copy {
  max-width: 66rem;
}

.eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.4rem;
  color: var(--ink);
  font-size: clamp(0.92rem, 1.3vw, 1.02rem);
  font-weight: 900;
  letter-spacing: 0.12em;
}
.eyebrow span {
  display: inline-flex;
  align-items: center;
  min-height: 3.2rem;
  padding: 0 1.4rem;
  background: var(--ink);
  color: var(--yellow);
}

.hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(3.7rem, 9vw, 7.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 950;
}

.hero__lead {
  margin: 2.8rem 0 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.1vw, 1.9rem);
  line-height: 1.55;
  font-weight: 900;
}

.hero__text {
  max-width: 62rem;
  margin: 1.8rem 0 0;
  color: #363636;
  font-size: clamp(1.4rem, 1.55vw, 1.6rem) !important;
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.8rem;
  margin-top: 3.4rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  min-height: 5.2rem;
  padding: 0 2.6rem;
  border-radius: var(--SN-Radius-16);
  border: 0.2rem solid transparent;
  font-weight: 950;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.button:hover {
  transform: translateY(-0.2rem);
}
.button svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: currentColor;
}

.button-primary {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-strong) 100%);
  color: var(--ink);
  box-shadow: 0 1.8rem 3.4rem rgba(255, 230, 0, 0.32), inset 0 -0.2rem 0 rgba(17, 17, 17, 0.08);
}

.button-ghost {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(17, 17, 17, 0.2);
  color: var(--ink);
}

.button-large {
  min-width: min(100%, 36rem);
  min-height: 7.8rem;
  padding-inline: 3.4rem;
  border-radius: 1.8rem;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
}

/* カスタムボタンシステム（添付画像のデザインに基づく美しいボタン） */
.btn-custom-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 5.2rem;
  padding: 0 2.8rem;
  border-radius: var(--SN-Radius-16);
  background-color: #ffffff;
  border: 0.15rem solid rgba(17, 17, 17, 0.16);
  color: #111111;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.6rem;
  box-shadow: 0 0.4rem 1.2rem rgba(17, 17, 17, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  /* 当初のインラインSVG（外部リンクアイコン）に戻す。SN-Btn基底のDS::after矢印は抑止 */
}
.btn-custom-secondary::after {
  content: none !important;
}
.btn-custom-secondary:hover {
  background-color: #f7f7f7;
  border-color: rgba(17, 17, 17, 0.24);
  transform: translateY(-0.2rem);
  box-shadow: 0 0.6rem 1.6rem rgba(17, 17, 17, 0.08);
}

.btn-custom-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 5.2rem;
  padding: 0 2.8rem;
  border-radius: var(--SN-Radius-16);
  background-color: #ffe600; /* 鮮やかな黄色 */
  border: none;
  color: #111111;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.6rem;
  box-shadow: 0 1rem 2.4rem rgba(255, 230, 0, 0.4); /* ぼんやりとした黄色の光彩 */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  /* 当初のインラインSVGアイコンに戻す。SN-Btn基底が供給するDSの::after矢印は抑止 */
}
.btn-custom-primary::after {
  content: none !important;
}
.btn-custom-primary svg {
  width: 2rem;
  height: 2rem;
  margin-left: 0.6rem;
}
.btn-custom-primary:hover {
  background-color: #fff000;
  transform: translateY(-0.2rem);
  box-shadow: 0 1.4rem 3.2rem rgba(255, 230, 0, 0.55); /* さらに強い光彩 */
}

.trust-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.8rem;
}
.trust-list span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.8rem;
  padding: 1.2rem 1.4rem;
  border-top: 0.4rem double rgba(185, 154, 32, 0.45);
  border-bottom: 0.4rem double rgba(185, 154, 32, 0.45);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.75);
  color: #806600; /* 可読性を考慮した濃いゴールド */
  font-size: 0.87rem;
  font-weight: 900;
  line-height: 1.45;
}
.trust-list span::before {
  display: none;
}

.hero__visual {
  align-self: center;
  justify-self: center;
  width: min(44rem, 100%);
}

.book-cover {
  width: min(42rem, 100%);
  margin: 0 auto;
  border-radius: 0.6rem;
}

.section {
  padding: clamp(3.6rem, 4.5vw, 6rem) 0; /* 共通の上下余白を元の半分（約36px〜60px）に調整 */
}

.container {
  width: min(100% - 4.8rem, var(--content));
  margin: 0 auto;
}
.container.narrow {
  width: min(100% - 4.8rem, 80rem);
}

.text-center {
  text-align: center;
}

.section-kicker {
  margin: 0 0 1.2rem;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 4.6vw, 3.65rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 950;
}

h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 950;
}

.book-section {
  background: linear-gradient(180deg, #fff 0%, #fffdf0 100%);
}

.book-card {
  display: grid;
  grid-template-columns: 21rem 1fr;
  gap: 3.6rem;
  align-items: center;
  padding: clamp(2.4rem, 4vw, 4.4rem);
  border: 0.1rem solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.book-card-image img {
  width: 15rem;
  margin: 0 auto;
  box-shadow: 0 1.8rem 3.6rem rgba(17, 17, 17, 0.16);
}

.book-card-body p:not(.section-kicker) {
  margin: 1.6rem 0 0;
  color: #333;
  font-weight: 600;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
  color: #006eb7;
  font-weight: 900;
}

.about-section {
  background: linear-gradient(180deg, #ffffff 0%, #fffdf3 100%);
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 0 !important; /* 下部の余白を削り、コネクトラインを直下の製品紹介に近づける */
}
.about-section .container {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--content) !important;
}

.body-copy {
  align-self: center !important;
  max-width: 80rem !important;
  width: 100% !important;
  margin: 3.4rem auto 0 !important;
  color: #333;
  font-weight: 600;
  text-align: left;
}
.body-copy p {
  margin: 0 0 2.2rem;
}

.quote-line {
  margin-top: 3.4rem !important;
  text-align: center;
  color: var(--ink);
  font-weight: 950;
}

.products-overview {
  position: relative;
  background: linear-gradient(180deg, #fffdf3 0%, #fff 100%);
  /* overflow: hidden; は子要素の position: sticky を無効化するため削除 */
  padding-top: 4.4rem !important; /* ジャンプ時の視認性を死守しつつ、上の縦線との物理的距離を詰める絶妙な高さ */
}

.products-title {
  font-size: clamp(2rem, 4.2vw, 3rem) !important; /* もう1サイズ大きく引き上げて、見出しとしての存在感を強化 */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.products-overview .section-head {
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1.2rem !important; /* カテゴリ一覧（nav）との隙間を最小限に調整 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.products-toc {
  position: -webkit-sticky !important;
  position: sticky !important; /* スクロール追従（sticky）を確実に最優先化 */
  top: 0 !important; /* 画面最上部にぴったりと張り付きます */
  z-index: 40; /* 製品カード等のコンテンツの上に配置 */
  display: flex !important;
  justify-content: safe center !important; /* 入りきればPC同様に中央寄せ・入りきらないSPでは先頭寄せにフォールバックし左の見切れを防ぐ */
  flex-wrap: nowrap !important; /* 2段折り返しを禁止し1行に固定 */
  overflow-x: auto !important; /* 入りきらない場合は横スクロール */
  -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールを滑らかに */
  gap: 0.6rem !important;
  padding: 1rem 1.2rem !important;
  /* position: stickyと完璧に両立し、横幅を画面100%（端から端まで）に安全に伸ばすモダン指定 */
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  /* 上の説明テキストとの隙間をギュッと詰める */
  margin-top: -1.2rem !important;
  margin-bottom: 3.2rem !important;
  background: rgba(255, 253, 243, 0.88); /* セクションの背景とブレンドする半透明ベージュ */
  backdrop-filter: blur(1.2rem); /* ガラスのように美しいすりガラス効果 */
  -webkit-backdrop-filter: blur(1.2rem);
  border-top: 0.1rem solid rgba(17, 17, 17, 0.04);
  border-bottom: 0.1rem solid rgba(17, 17, 17, 0.06);
  box-shadow: 0 1rem 3rem rgba(17, 17, 17, 0.02);
  transition: all 0.3s ease;
}

.toc-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0 !important; /* 横スクロール時に幅が縮まないよう固定 */
  white-space: nowrap !important; /* テキストの改行を禁止 */
  gap: 0.8rem;
  padding: 1rem 2rem; /* UIボタンとしてのスマートな余白に微調整 */
  border-radius: var(--SN-Radius-Full);
  background-color: #ffffff;
  border: 0.1rem solid rgba(17, 17, 17, 0.08);
  color: var(--text);
  font-size: clamp(1.2rem, 1.35vw, 1.4rem) !important; /* 落ち着きのある1.2rem〜1.4remのUIサイズ */
  font-weight: 800 !important; /* UIとしての視認性を高めるしっかりとした太さ */
  letter-spacing: 0.02em !important;
  box-shadow: 0 0.4rem 1.2rem rgba(17, 17, 17, 0.02);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toc-link:hover {
  background-color: #ffe600; /* テーマカラーであるイエローへ変化 */
  border-color: #ffe600;
  color: #111111;
  transform: translateY(-0.2rem);
  box-shadow: 0 0.8rem 2rem rgba(255, 230, 0, 0.25);
}

.toc-arrow {
  display: inline-block;
  width: 1.6rem; /* 1.2rem〜1.4remの文字サイズに合わせた黄金比率 */
  height: 1.6rem;
  stroke: var(--gold); /* SVGの線の色をゴールドに */
  transition: transform 0.25s ease, stroke 0.25s ease;
}
.toc-link:hover .toc-arrow {
  stroke: #111111; /* ホバー時は線の色をダークグレーに */
  transform: translateY(0.2rem); /* ホバー時にシェブロンが沈むアニメーション */
}

.products-overview::before {
  content: "AI";
  position: absolute;
  right: 2vw;
  top: 1rem; /* ジャンプ時（画面最上部）でも隠れず、見出しよりも上に美しく収まる位置に調整 */
  color: rgba(255, 240, 0, 0.22);
  font-family: "Didot", "Bodoni MT", "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(9rem, 26vw, 24rem);
  line-height: 0.75;
  font-weight: 300;
  pointer-events: none;
}

.assistant-section {
  position: relative;
  background: transparent;
  overflow: visible;
}
.assistant-section::before {
  display: none;
}

.section-head {
  position: relative;
  z-index: 1;
  max-width: 76rem;
  margin: 0 auto 4.6rem;
  text-align: center;
}
.section-head p:not(.section-kicker) {
  margin: 1.8rem 0 0;
  color: #444;
  font-weight: 600;
}

.product-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3カラム並びになるように調整 */
  gap: 2.8rem;
  max-width: var(--content); /* 最大幅をコンテンツ幅（1120px）まで拡張 */
  margin: 0 auto;
}

/* PC（デスクトップ）表示時のみ、子要素が1つまたは2つのみの場合、カードを横に引き伸ばさずに中央に美しく寄せる（要素数自動判別） */
@media (min-width: 1025px) {
  .product-grid:has(> :last-child:nth-child(1)) {
    grid-template-columns: minmax(0, 36.5rem);
    justify-content: center;
  }
  .product-grid:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 36.5rem));
    justify-content: center;
  }
}
@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* タブレットサイズでは2カラム */
    gap: 2.4rem;
  }
}
@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: 1fr; /* スマホサイズでは1カラム */
    gap: 1.8rem;
  }
}
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* すべてのカードの高さを揃える */
  padding: clamp(2.4rem, 3.5vw, 3.2rem); /* 3カラム化に合わせて余白を最適化 */
  border: 0.1rem solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1.6rem 4.4rem rgba(17, 17, 17, 0.07); /* より上品ですっきりしたプレミアムな影に */
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
  transform: translateY(-0.4rem); /* 高級感を漂わせる微細な浮き上がりアニメーション */
  box-shadow: 0 2.2rem 5.5rem rgba(17, 17, 17, 0.12);
}

.product-image {
  display: grid;
  place-items: center;
  height: 17.2rem;
  margin-bottom: 2.2rem;
  border-radius: 1.8rem;
  background: #fff;
  border: 0.1rem solid rgba(17, 17, 17, 0.06);
}
.product-image img {
  max-width: 17rem;
  max-height: 13.8rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.product-category {
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: 1.2rem !important; /* 最小12pxを下回らないよう保証（旧：.78rem） */
  font-weight: 950;
  letter-spacing: 0.1em;
}

.product-card h3 {
  font-size: clamp(2.2rem, 2.5vw, 2.8rem) !important; /* 見出しを1ランク小さく調整（案A：24px〜32px ➔ 22px〜28px） */
  line-height: 1.3 !important;
  margin-bottom: 0.8rem;
}
.product-card h3 span {
  font-size: 0.8em !important;
}

.product-card .maker {
  margin: 0.8rem 0 1.8rem;
  color: var(--muted);
  font-size: 1.2rem !important; /* 最小12pxを下回らないよう保証（旧：.82rem） */
  font-weight: 700;
}

.product-card p:not(.product-category):not(.maker) {
  margin: 0;
  color: #444;
  font-size: 1.5rem !important; /* 説明文をもう1ランク大きく（旧：0.95rem（約15px） ➔ 新：15px〜18pxへ大きくし、可読性を向上） */
  font-weight: 600;
  line-height: 1.65 !important;
  text-align: left;
  margin-bottom: 2.4rem;
}

/* ボタン（ご購入ボタン）：DSの Open バリアント（矢印を右端に固定）。カード最下部揃え等を調整 */
.product-card [class*=SN-Btn-Primary] {
  margin-top: auto !important; /* 説明文の長さにかかわらず、自動的に最下部に押し下げられて高さラインが揃います */
  align-self: center;
  width: 100% !important;
  max-width: 28rem !important;
  min-height: 5.2rem !important; /* ボタンに押しやすい適度な高さを確保 */
  border-radius: var(--SN-Radius-Full) !important; /* 丸みをおびた美しいボタンデザイン */
  font-size: 1.6rem !important; /* ボタン内文字サイズ */
  font-weight: 800 !important;
  position: relative !important; /* 右端固定の矢印(::after)の基準 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 3.6rem !important;
  padding-right: 3.6rem !important;
  transition: all 0.25s ease !important;
  /* DSのOpen矢印を右端に固定。mask不可環境のためDS指定アイコン(白)をbackgroundで描画 */
  /* ホバー時に矢印が右へスライドするマイクロアニメーション（縦中央は維持） */
}
.product-card [class*=SN-Btn-Primary]::after {
  content: "" !important;
  display: inline-block !important;
  position: absolute !important;
  right: 1.6rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 2rem !important;
  height: 2rem !important;
  background: url(/~/media/img/common/icon/icon_link_isolate_right_wh.svg) no-repeat center/contain !important;
  -webkit-mask: none !important;
  mask: none !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.product-card [class*=SN-Btn-Primary]:hover {
  transform: translateY(-0.2rem) !important;
  box-shadow: 0 0.8rem 2.2rem rgba(17, 17, 17, 0.16) !important; /* ボタン色（カート系）と無関係な黄色グローを、ニュートラルな影に修正 */
}
.product-card [class*=SN-Btn-Primary]:hover::after {
  transform: translate(0.3rem, -50%) !important;
}

.usecase-section {
  background: transparent;
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}
.usecase-section .section-head {
  margin-top: 0 !important;
  margin-bottom: 1.6rem !important;
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.usecase-card {
  padding: 2.8rem;
  border: 0.1rem solid rgba(185, 154, 32, 0.22);
  border-radius: 2.2rem;
  background: linear-gradient(180deg, #fff 0%, #fffdf0 100%);
}

.usecase-icon {
  display: inline-grid;
  place-items: center;
  width: 3.4rem !important;
  height: 3.4rem !important;
  margin-bottom: 1.6rem !important;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  font-size: 1.2rem !important;
  font-weight: 950 !important;
}

.usecase-card h3 {
  font-size: clamp(1.8rem, 1.95vw, 2rem) !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  margin: 0;
}

.usecase-card p {
  margin: 1.2rem 0 0;
  color: #444;
  font-size: clamp(1.4rem, 1.55vw, 1.6rem) !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
}

.faq-section {
  background: linear-gradient(180deg, #fff 0%, #fffdf3 100%);
}

.faq-list {
  display: grid;
  gap: 1.4rem;
}

details {
  border: 0.1rem solid rgba(17, 17, 17, 0.09);
  border-radius: 1.8rem;
  background: #fff;
  box-shadow: 0 1.4rem 3.8rem rgba(17, 17, 17, 0.06);
  overflow: hidden;
}

summary {
  cursor: pointer;
  list-style: none;
  padding: 2.2rem 2.6rem;
  color: var(--ink);
  font-weight: 950;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "+";
  float: right;
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1;
}
details[open] summary::after {
  content: "−";
}

details p {
  margin: 0;
  padding: 0 2.6rem 2.4rem;
  color: #444;
  font-weight: 600;
}

.marker-connect-container {
  margin-top: 4rem !important; /* 隙間を詰めるため、上部マージンを微調整 */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem; /* メッセージと線の間をより緊密に */
}

.marker-quote {
  display: inline; /* inline-blockからinlineへ切り替え、スマホでの複数行改行に対応 */
  position: relative;
  font-size: clamp(1.25rem, 2.5vw, 1.7rem) !important;
  color: var(--ink) !important;
  line-height: 1.65 !important; /* スマホでの読みやすさを考慮し、少し行間を広く */
  margin: 0 !important;
  padding: 0.3rem 0.6rem !important; /* 行ごとのマーカー左右に美しい余白を確保 */
  z-index: 1;
  background: linear-gradient(transparent 55%, rgba(255, 230, 0, 0.6) 55%);
  box-decoration-break: clone; /* 改行時も各行の端にパディングと背景を個別に適用 */
  -webkit-box-decoration-break: clone;
}

.connect-vertical-line {
  width: 0.2rem; /* 太さを1.5px ➔ 2pxに引き上げ、より明瞭に存在感をアピール */
  height: 5.6rem; /* 長さを32px ➔ 56pxに大幅に伸ばし、下の見出しへとダイナミックに橋渡し */
  background: linear-gradient(to bottom, rgba(185, 154, 32, 0.9) 0%, rgba(185, 154, 32, 0.15) 100%); /* フェードアウトを緩やかにし、消えきらずに繋がる質感へ */
  margin-top: 0.8rem;
  margin-bottom: -2.4rem !important; /* 下の「AI関連製品」セクションへと物理的に突き刺さるように食い込ませるネガティブマージン */
  position: relative;
  z-index: 10;
}

.site-footer {
  padding: 2.6rem 0;
  background: #080808;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.footer-inner p {
  margin: 0;
}
.footer-inner a {
  font-weight: 800;
}

.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 980px) {
  .menu-button {
    display: block;
  }
  .global-nav {
    position: fixed;
    top: 7.2rem;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: 1.4rem 2.4rem 2.4rem;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 0.1rem solid rgba(17, 17, 17, 0.08);
    box-shadow: 0 1.6rem 3.6rem rgba(17, 17, 17, 0.12);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.24s ease;
  }
  .global-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .global-nav a {
    padding: 1.4rem 0;
  }
  .header-cta {
    margin-top: 1rem;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 3.6rem;
    min-height: auto;
    padding: 5.8rem 0 7.2rem;
  }
  .hero__copy {
    max-width: 100%;
  }
  .hero__diagonal {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 44%;
    -webkit-clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%);
  }
  .hero__bg-word {
    top: 9%;
    left: auto;
    right: -5%;
  }
  .hero__visual {
    width: min(35rem, 72vw);
  }
  .trust-list,
.usecase-grid {
    grid-template-columns: 1fr;
  }
  .book-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .body-copy {
    text-align: left;
  }
  .closing-inner {
    display: grid;
  }
}
@media (max-width: 720px) {
  .header-inner,
.hero__inner,
.container,
.container.narrow {
    width: min(100% - 4rem, var(--content)); /* 左右余白を16px➔20pxに広げ、黒チップのフチ接触を防ぎ美しい安全余白を確保 */
  }
  .brand-sub {
    display: none;
  }
  .sp-only {
    display: inline;
  }
  /* ヒーローエリア全体の余白とフォントサイズ調律（書籍画像を早く見せるためのA案） */
  .hero {
    min-height: auto !important; /* スマホでは高さを詰め、ビジュアルとテキストを一体化 */
    padding: 3.2rem 0 4.4rem !important; /* 上下パディングをPCの半分以下に縮小 */
  }
  .hero__inner {
    min-height: auto !important;
    padding: 0 !important;
    gap: 2.8rem !important; /* 書籍画像と文章の間隔を詰めて素早く見せる */
  }
  .hero h1 {
    font-size: clamp(2.4rem, 10.5vw, 3.4rem) !important; /* 1〜2行に綺麗に収まる極上サイズ */
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    word-break: keep-all; /* 単語の不自然な途中改行を防ぐ */
    overflow-wrap: anywhere;
  }
  .hero__lead {
    line-height: 1.45 !important;
    margin-top: 1.4rem !important; /* 隙間を半分に */
    margin-bottom: 0 !important;
  }
  .hero__text {
    line-height: 1.6 !important;
    margin-top: 1.4rem !important;
  }
  .hero__text p {
    margin-bottom: 0.8rem !important;
  }
  /* ヒーローエリアのCTA（アクションボタン）のセンタリング＆最大幅統一 */
  .hero__actions {
    display: flex !important;
    flex-direction: column !important; /* スマホでは押しやすいよう縦並びへ */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 1.2rem !important;
    margin-top: 2.4rem !important;
  }
  .btn-custom-primary,
.btn-custom-secondary {
    width: 100% !important;
    max-width: 32rem !important; /* スマホで一番押しやすい黄金サイズで統一 */
    min-height: 5rem !important;
    box-sizing: border-box !important;
    font-size: 1.5rem !important;
    justify-content: center !important; /* ボタン内テキストも完全中央寄せ */
  }
  .button-large {
    width: 100%;
    min-width: 0;
  }
  .button-ghost {
    width: 100%;
  }
  .trust-list {
    margin-top: 2.2rem;
  }
  .product-grid {
    grid-template-columns: 1fr;
  }
  .section {
    padding: 6.8rem 0;
  }
  .footer-inner {
    display: grid;
  }
  /* ==========================================================================
     スマホ（max-width: 720px）での追加詳細調律
     ========================================================================== */
  /* ①スマホ専用書籍カバー（発売記念特設ページとタイトルの間に配置） */
  .hero__visual-sp {
    display: block !important;
    text-align: center;
    margin: 1.4rem 0 1.8rem !important; /* 上下に上品なホワイトスペースを確保 */
  }
  .hero__visual-sp .book-cover {
    max-width: 14rem; /* スマートフォンで最も美しく映える、140pxのコンパクト設計 */
    width: 100%;
    height: auto;
    filter: drop-shadow(0 1.2rem 2.8rem rgba(17, 17, 17, 0.16)); /* 本に深みを与える滑らかな影 */
  }
  /* PC用の書籍カバーはスマホ（max-width: 720px）では完全に非表示にする */
  .hero__visual {
    display: none !important;
  }
  /* ②スマホの蛍光マーカー（縦を今の半分にして、アンダーライン風に洗練） */
  .marker-quote {
    background: linear-gradient(transparent 75%, rgba(255, 230, 0, 0.55) 75%) !important; /* 黄色部分の縦幅を細く（下25%のみに）し、繊細な美しさに */
    padding: 0.1rem 0.4rem !important; /* スマホの限られた画面幅で文字の折り返しを美しく保つため、パディングを極小に */
  }
  /* ③スマホでの目次（TOC）390px幅での3段崩れ防止、および余白・フォントサイズ調律 */
  .products-toc {
    padding: 1rem 1.2rem !important; /* 左右余白を24px➔12pxへ大幅スリム化 */
    gap: 0.6rem !important; /* リンク同士の間隔を10px➔6pxへ詰め、空間を有効活用 */
    margin-top: -0.8rem !important;
    margin-bottom: 2.4rem !important;
  }
  .toc-link {
    padding: 0.8rem 1rem !important; /* 左右パディングを20px➔10pxに削減、上下もコンパクトに */
    font-size: 1.3rem !important; /* 1.3remから13pxへ微調整し、390px未満の極小幅にも対応 */
    gap: 0.4rem !important; /* 文字と矢印の隙間を8px➔4pxへ緊密化 */
  }
  .toc-arrow {
    width: 1.2rem !important; /* 矢印アイコンを16px➔12pxへ縮小、文字との親和性を向上 */
    height: 1.2rem !important;
  }
}
/* Utilities for full-bleed sections and centering */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

/* Center content for closing CTA */
.closing-cta .closing-inner.centered {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
}

/* Remove plus icon added via pseudo-element on details/summary */
summary::after {
  display: none !important;
  content: none !important;
}

/* デザインシステム共通の .SN__section--Frame は SP（max-width: 599px）で
   max-width: 39rem が指定されるため、本ページでは固有CSSで無効化する */
@media screen and (max-width: 599px) {
  .SN__section--Frame {
    max-width: none !important;
  }
}