/* ==========================================================================
   KACHIARU LP テーマ（明るく親しみのある国内サービス系の配色・装飾）
   --------------------------------------------------------------------------
   assets/lp.css（Tailwind のビルド結果）の "あと" に読み込みます。
   lp.css 内の色は :root のカスタムプロパティ（OKLCH）を参照しているため、
   ここで値を差し替えるとページ全体の色味がまとめて変わります。
   そのうえで、見出し・ボタン・カードなど主要パーツの見た目を上書きします。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 色とフォントのトークン
   -------------------------------------------------------------------------- */
:root{
  /* 明朝体をやめて、見出しと同じゴシックに揃えます */
  --font-mincho:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;

  /* 背景：白 ＋ 淡い水色。セクションごとに交互に敷きます */
  --background-50 : 1     0     0;
  --background-100: 0.966 0.016 240;
  --background-200: 0.928 0.022 240;
  --background-300: 0.880 0.028 240;
  --background-400: 0.790 0.035 242;
  --background-500: 0.660 0.040 244;

  /* 主役の青：やや明るく、はっきりした事務機器メーカー系のブルー */
  --primary-50 : 0.977 0.012 245;
  --primary-100: 0.945 0.032 245;
  --primary-200: 0.890 0.060 245;
  --primary-300: 0.800 0.102 246;
  --primary-400: 0.690 0.142 248;
  --primary-500: 0.590 0.162 250;
  --primary-600: 0.520 0.157 251;
  --primary-700: 0.450 0.142 252;
  --primary-800: 0.370 0.116 253;
  --primary-900: 0.300 0.092 255;
  --primary-950: 0.235 0.072 256;

  /* 補助の水色：見出しの下線やハイライトに使います */
  --secondary-50 : 0.978 0.014 222;
  --secondary-100: 0.948 0.034 224;
  --secondary-200: 0.895 0.064 226;
  --secondary-300: 0.818 0.100 228;
  --secondary-400: 0.740 0.128 230;
  --secondary-500: 0.685 0.140 232;
  --secondary-600: 0.595 0.140 236;
  --secondary-700: 0.495 0.130 240;
  --secondary-800: 0.395 0.106 245;
  --secondary-900: 0.315 0.082 248;

  /* チェックマークなどの緑：少し鮮やかに */
  --accent-100: 0.930 0.058 150;
  --accent-200: 0.870 0.090 150;
  --accent-400: 0.730 0.155 150;
  --accent-500: 0.665 0.160 150;
  --accent-600: 0.580 0.152 151;
  --accent-700: 0.492 0.132 152;

  /* 文字色：青みを抑えたグレー寄りの黒 */
  --foreground-600: 0.520 0.014 250;
  --foreground-700: 0.430 0.014 250;
  --foreground-800: 0.345 0.014 250;
  --foreground-900: 0.285 0.014 250;
  --foreground-950: 0.235 0.014 250;

  /* このテーマ独自の色 */
  --kx-orange      : #f5811e;
  --kx-orange-light: #fb9836;
  --kx-orange-dark : #d96b09;
  --kx-yellow      : #fff33f;
  --kx-line        : #dcebf8;
  --kx-card-shadow : 0 1px 2px rgba(12,64,120,.05), 0 8px 22px rgba(12,64,120,.06);
  --kx-card-hover  : 0 2px 4px rgba(12,64,120,.06), 0 14px 30px rgba(12,64,120,.10);
}

body{ background:#fff; }

/* 固定ヘッダーの下に見出しが隠れないように */
main section[id]{ scroll-margin-top:78px; }

/* AI 生成物にありがちな「ぼかしの光」と点滅ドットは外します */
main [class*="blur-2xl"],
main [class*="blur-3xl"],
main .animate-ping{ display:none !important; }

/* --------------------------------------------------------------------------
   2. ヘッダー（常に白）とキャンペーン帯
   -------------------------------------------------------------------------- */
#lpHeader{
  background:#fff !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:1px solid var(--kx-line) !important;
  box-shadow:0 1px 6px rgba(12,64,120,.06);
}
#lpHeader nav a:hover{ color:oklch(var(--primary-600)); }

/* 黄色のキャンペーン帯（<main> の先頭に置いています） */
.kx-campaign{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  margin-top:56px;                       /* 固定ヘッダーの高さぶん下げる */
  padding:.7rem 1.25rem;
  background:linear-gradient(180deg,#fff86a 0%,var(--kx-yellow) 100%);
  border-bottom:1px solid #e8d92a;
  color:#3b2f00;
  font-family:var(--font-heading),sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
  transition:filter .2s ease;
}
.kx-campaign:hover{ filter:brightness(1.03); }
.kx-campaign-tag{
  display:inline-block;
  padding:.15rem .6rem;
  border-radius:999px;
  background:#e2400d;
  color:#fff;
  font-size:11.5px;
  letter-spacing:.06em;
}
.kx-campaign-main strong{
  margin-left:.25em;
  color:#d1400c;
  font-size:1.18em;
  font-weight:900;
}
.kx-campaign-go{
  display:inline-flex;
  align-items:center;
  gap:.15rem;
  padding:.28rem .85rem;
  border-radius:999px;
  background:#fff;
  border:1px solid #e0cf22;
  font-size:12.5px;
  color:#8a5a00;
  white-space:nowrap;
}
@media (min-width:768px){
  .kx-campaign{ margin-top:64px; font-size:15px; }
}
@media (max-width:560px){
  .kx-campaign-go{ display:none; }
}

/* --------------------------------------------------------------------------
   3. ヒーロー（青の帯）
   -------------------------------------------------------------------------- */
#top{
  padding-top:2.75rem !important;
  padding-bottom:3.5rem !important;
  background:
    radial-gradient(1100px 420px at 82% -14%, rgba(255,255,255,.22) 0%, transparent 62%),
    linear-gradient(158deg, #0a5cb0 0%, #0f74c9 44%, #2394de 100%) !important;
}
@media (min-width:768px){
  #top{ padding-top:4rem !important; padding-bottom:5.5rem !important; }
}
/* 元の背景レイヤー（放射グラデーション・白地）は使いません */
#top > div.absolute{ display:none !important; }
/* 斜めのストライプで、のっぺりしないように */
#top::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 16px, transparent 16px 38px);
  pointer-events:none;
}
/* 下端を斜めに切って、次のセクションへつなげます */
#top::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:34px;
  background:oklch(var(--background-100));
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
  z-index:1;
}
#top > .mx-auto{ position:relative; z-index:2; }

/* 見出し・本文を白に */
#top h1,
#top h1 span{ color:#fff !important; }
#top h1{ text-shadow:0 2px 12px rgba(4,44,88,.22); }
/* 「買取店の一日を、」の下敷きは黄色のマーカーに */
#top h1 span.absolute{
  background:var(--kx-yellow) !important;
  height:.3em !important;
  bottom:.08em !important;
  border-radius:2px;
}
/* 見出しは3行で収まる大きさに */
@media (min-width:1024px){
  #top > .mx-auto{ grid-template-columns:1.18fr .82fr !important; }
  #top h1{ font-size:40px !important; line-height:1.36 !important; }
}
#top .reveal > p{ color:rgba(255,255,255,.93) !important; }
#top .reveal > p span{ color:#fff !important; font-weight:700; }
#top .reveal > p:last-child{ color:rgba(255,255,255,.85) !important; }
#top .reveal > p:last-child a{
  color:#fff !important;
  border-bottom-color:rgba(255,255,255,.55) !important;
}

/* 上部の小さなバッジ */
#top .reveal > div.inline-flex{
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  color:#fff !important;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
#top .reveal > div.inline-flex span{ background:var(--kx-yellow) !important; }

/* 「初期費用0円」などの並び → 白いタグに */
#top .reveal > div.mt-6{ gap:.5rem !important; }
#top .reveal > div.mt-6 > span{
  padding:.34rem .8rem;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.34);
  color:#fff !important;
  font-size:12.5px;
  font-weight:700;
}
#top .reveal > div.mt-6 > span i{ color:var(--kx-yellow) !important; }

/* 右側のダッシュボード画像を、青地から浮かせます */
#top .reveal .relative > div[class*="rounded-2xl"]{
  box-shadow:0 18px 44px rgba(3,38,76,.30), 0 2px 6px rgba(3,38,76,.18) !important;
}
#top .reveal .relative > div.hidden{
  box-shadow:0 10px 24px rgba(3,38,76,.22) !important;
}

/* --------------------------------------------------------------------------
   4. ヒーロー直下の「4つの安心」帯 → 白いカードに
   -------------------------------------------------------------------------- */
#top + section{
  border-top:0 !important;
  padding-top:1rem;
}
#top + section .grid > div{
  padding:.95rem 1rem;
  background:#fff;
  border:1px solid var(--kx-line);
  border-radius:12px;
  box-shadow:var(--kx-card-shadow);
}
#top + section .grid > div > span{
  background:linear-gradient(160deg, oklch(var(--primary-400)), oklch(var(--primary-600))) !important;
  border:0 !important;
}
#top + section .grid > div > span i{ color:#fff !important; }

/* --------------------------------------------------------------------------
   4-2. セクションの上下余白（間延びしないよう少し詰めます）
   -------------------------------------------------------------------------- */
main section[class*="py-18"]{
  padding-top:3.25rem !important;
  padding-bottom:3.25rem !important;
}
@media (min-width:768px){
  main section[class*="py-18"]{
    padding-top:4.75rem !important;
    padding-bottom:4.75rem !important;
  }
}

/* --------------------------------------------------------------------------
   4-3. 棒グラフの高さ（ラベルぶんの場所を確保して、棒が出るようにします）
   -------------------------------------------------------------------------- */
main .flex.items-end.h-20,
main .flex.items-end.h-24{ margin-bottom:20px; }
main .flex.items-end.h-20 > div,
main .flex.items-end.h-24 > div{
  position:relative;
  height:100%;
  justify-content:flex-end;
}
main .flex.items-end.h-20 > div > div:last-child,
main .flex.items-end.h-24 > div > div:last-child{
  position:absolute;
  left:0; right:0; bottom:-19px;
}

/* --------------------------------------------------------------------------
   5. セクション見出し（小見出しはピル、H2 の下に水色のライン）
   -------------------------------------------------------------------------- */
main section div[class*="tracking-[0.14em]"]{
  display:inline-block;
  padding:.3rem .95rem;
  border-radius:999px;
  background:oklch(var(--primary-50));
  border:1px solid oklch(var(--primary-200));
  color:oklch(var(--primary-700)) !important;
  font-size:12px !important;
}
main section h2::after{
  content:"";
  display:block;
  width:66px;
  height:4px;
  margin-top:18px;
  border-radius:999px;
  background:linear-gradient(90deg, oklch(var(--primary-500)) 0%, oklch(var(--secondary-400)) 100%);
}
main section .text-center h2::after{ margin-left:auto; margin-right:auto; }
#signup h2::after{
  background:linear-gradient(90deg, var(--kx-yellow) 0%, rgba(255,255,255,.65) 100%);
}

/* --------------------------------------------------------------------------
   6. カード類（白地＋やわらかい影）
   -------------------------------------------------------------------------- */
main section .reveal[class*="rounded-xl"],
main section .reveal[class*="rounded-2xl"],
main section .reveal > div[class*="rounded-2xl"],
main section .grid > div[class*="rounded-xl"][class*="border-background-300"],
main section .grid > div[class*="rounded-xl"][class*="border-background-200"]{
  background:#fff !important;
  border-color:var(--kx-line) !important;
  border-radius:14px !important;
  box-shadow:var(--kx-card-shadow);
}
main section .reveal[class*="rounded-xl"]:hover,
main section .grid > div[class*="rounded-xl"][class*="border-background-300"]:hover{
  box-shadow:var(--kx-card-hover);
}

/* 引用ブロックは、うすい水色の囲みに */
main section .reveal > div[class*="rounded-xl"][class*="bg-background-100"]{
  background:oklch(var(--background-100)) !important;
  border-color:oklch(var(--primary-200)) !important;
  box-shadow:none;
}

/* カード見出しの横のアイコンは、白抜きの青いタイルに */
main section span[class*="rounded-lg"][class*="bg-background-50"][class*="border-background-200"],
main section span[class*="rounded-lg"][class*="bg-background-50"][class*="border-background-300"]{
  background:linear-gradient(160deg, oklch(var(--primary-400)), oklch(var(--primary-600))) !important;
  border:0 !important;
  box-shadow:0 3px 8px rgba(15,116,201,.22);
}
main section span[class*="rounded-lg"][class*="bg-background-50"][class*="border-background-200"] i,
main section span[class*="rounded-lg"][class*="bg-background-50"][class*="border-background-300"] i{
  color:#fff !important;
}

/* --------------------------------------------------------------------------
   7. STEP 番号は角丸の四角いフラッグに
   -------------------------------------------------------------------------- */
#industry span[class*="rounded-full"][class*="bg-primary-500"]{
  width:34px !important;
  height:34px !important;
  border-radius:9px !important;
  background:linear-gradient(160deg, oklch(var(--primary-400)), oklch(var(--primary-600))) !important;
  box-shadow:0 3px 8px rgba(15,116,201,.28);
  font-size:15px !important;
}

/* --------------------------------------------------------------------------
   8. ボタン
   -------------------------------------------------------------------------- */
#lpHeader a[href="signup"],
main section a[href="signup"],
main section a[class*="bg-primary-500"]{
  border-radius:10px !important;
  background:linear-gradient(180deg, var(--kx-orange-light) 0%, var(--kx-orange) 100%) !important;
  color:#fff !important;
  box-shadow:0 3px 0 var(--kx-orange-dark), 0 8px 18px rgba(217,107,9,.24);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
#lpHeader a[href="signup"]:hover,
main section a[href="signup"]:hover,
main section a[class*="bg-primary-500"]:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
  box-shadow:0 4px 0 var(--kx-orange-dark), 0 10px 22px rgba(217,107,9,.28);
}
#lpHeader a[href="signup"]:active,
main section a[href="signup"]:active,
main section a[class*="bg-primary-500"]:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--kx-orange-dark), 0 4px 10px rgba(217,107,9,.22);
}
#lpHeader a[href="signup"]{ box-shadow:0 2px 0 var(--kx-orange-dark); }

/* ヒーローの「できることを見る」など、白いボタン */
#top a[href="#industry"]{
  border-radius:10px !important;
  background:#fff !important;
  border:1px solid #fff !important;
  color:oklch(var(--primary-700)) !important;
  box-shadow:0 3px 0 rgba(3,45,90,.25), 0 8px 18px rgba(3,38,76,.18);
}
#top a[href="#industry"]:hover{ background:#f2f8fe !important; }

/* 申し込みセクションの「資料・お問い合わせ」 */
#signup a[href^="mailto"]{
  border-radius:10px !important;
  border-color:rgba(255,255,255,.65) !important;
}

/* --------------------------------------------------------------------------
   9. 料金カード
   -------------------------------------------------------------------------- */
#pricing div[class*="bg-primary-800"]{
  background:
    radial-gradient(600px 220px at 80% -30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(160deg, #084e99 0%, #0c67b8 60%, #1179cd 100%) !important;
}
#pricing div[class*="bg-primary-800"] > div:first-child{
  display:inline-block;
  padding:.28rem 1.1rem;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);
  opacity:1 !important;
}
#pricing span[class*="text-[52px]"]{
  color:var(--kx-yellow) !important;
  text-shadow:0 2px 10px rgba(4,44,88,.25);
}
#pricing a[href="signup"]{ padding-top:1rem !important; padding-bottom:1rem !important; font-size:16px !important; }

/* --------------------------------------------------------------------------
   10. よくあるご質問
   -------------------------------------------------------------------------- */
#faq span[class*="bg-primary-100"]{
  width:26px !important;
  height:26px !important;
  border-radius:8px !important;
  background:oklch(var(--primary-500)) !important;
  color:#fff !important;
}
#faq span[class*="bg-secondary-100"]{
  width:26px !important;
  height:26px !important;
  border-radius:8px !important;
  background:oklch(var(--secondary-200)) !important;
  color:oklch(var(--secondary-900)) !important;
}
#faq button:hover{ background:oklch(var(--background-100) / .7); }

/* --------------------------------------------------------------------------
   11. 申し込み導線・フッター
   -------------------------------------------------------------------------- */
#signup div[class*="bg-primary-800"]{
  background:
    radial-gradient(700px 300px at 88% -10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(158deg, #0a5cb0 0%, #0f74c9 48%, #2394de 100%) !important;
}
#signup div[class*="bg-primary-800"] > div[aria-hidden]{
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 16px, transparent 16px 38px) !important;
  opacity:1 !important;
}
#signup .reveal > div.inline-flex{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.45) !important;
}
#signup .reveal > div.inline-flex span{ background:var(--kx-yellow) !important; }
#signup .reveal > div.mt-8 i{ color:var(--kx-yellow) !important; }

footer{ border-top:4px solid oklch(var(--primary-500)); }

/* ==========================================================================
   12. 画面幅ごとの調整（スマートフォン・タブレット・PC）
   ========================================================================== */

/* スマートフォンだけで改行する <br>（見出しの折り返し位置をそろえます） */
.kx-br-sp{ display:none; }
@media (max-width:639px){ .kx-br-sp{ display:inline; } }

/* --------------------------------------------------------------------------
   タブレット（768〜1023px）
   もとの作りではメニューボタンが消えてしまい、ページ内リンクへ移動できな
   かったため、この幅でもメニューを開けるようにします。
   -------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1023px){
  #lpMenuBtn{ display:flex !important; }
  #lpMobileMenu:not(.hidden){ display:block !important; }
}

/* --------------------------------------------------------------------------
   1023px 以下（タブレット・スマートフォン）
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  /* 「4つの安心」帯は2列に */
  #top + section .grid{ grid-template-columns:repeat(2,1fr) !important; }

  /* STEP は3列まで。列がまたぐので、間の矢印は隠します */
  #industry div[class*="md:grid-cols-5"]{ grid-template-columns:repeat(3,1fr) !important; }
  #industry div[class*="-right-2"]{ display:none !important; }
}

/* --------------------------------------------------------------------------
   767px 以下
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  #industry div[class*="md:grid-cols-5"]{ grid-template-columns:repeat(2,1fr) !important; }
}

/* --------------------------------------------------------------------------
   639px 以下（スマートフォン）
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  /* キャンペーン帯は文字を続けて流し、2行に収めます */
  .kx-campaign{ display:block; padding:.5rem .75rem; font-size:12px; line-height:1.7; }
  .kx-campaign-tag{ padding:.05rem .45rem; margin-right:.35rem; font-size:10.5px; }
  .kx-campaign-main strong{ font-size:1.14em; }

  /* 見出しは4行で読みやすい大きさに */
  #top h1{ font-size:28px !important; line-height:1.5 !important; }

  /* ボタンは横幅いっぱいにして押しやすく */
  #top .reveal > div.mt-7{ flex-direction:column; align-items:stretch; }
  #top .reveal > div.mt-7 > a{ width:100%; justify-content:center; }

  /* 「4つの安心」帯は1列に */
  #top + section .grid{ grid-template-columns:1fr !important; }

  /* 申込書とAI読み取り画面の比較は、上下に並べます */
  main section div[class*="grid-cols-2"][class*="rounded-2xl"]{
    grid-template-columns:1fr !important;
  }
  /* 紙の申込書は縦横比を固定せず、余白が空きすぎないようにします */
  main section div[class*="aspect-[3/4]"]{
    aspect-ratio:auto !important;
    padding-bottom:1.5rem !important;
  }

  /* STEP は1列に */
  #industry div[class*="md:grid-cols-5"]{ grid-template-columns:1fr !important; }

  /* セクションの余白をもう少し詰めます */
  main section[class*="py-18"]{
    padding-top:2.75rem !important;
    padding-bottom:2.75rem !important;
  }
}