@charset "utf-8";

:root{--blue:#0b4375; --blue-600:#043a67; --blue-50:#eef6ff; --sky:#eaf4ff; --accent:#ef4444;/* 赤 */ --gold:#ffd400;/*黄色ハイライト*/ --ink:#1f2937; --check:#16a34a; --card:#ffffff; --line:#dbe7f5; --shadow: 0 8px 24px rgba(0,0,0,.08);}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; color:var(--ink); background:#f3f6fb; line-height:1.85;}
.wrapper{max-width:750px; margin:0 auto; background:#fff; box-shadow:var(--shadow);}
.section{padding:28px 24px}
h1,h2,h3,p{margin:0}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}
/* 到達位置の頭が隠れないよう少し余白（数値は好みで） */
/*#contact { scroll-margin-top: 16px; }*/




/* -------------------- FV（ファーストビュー） -------------------- */
.fv-section {background: #ffffff; padding: 0px;}
.fv-inner {width: 100%; margin: 0 auto; text-align: center;}
.fv-inner img {width: 100%;/*スマホではみ出さないように*/ height: auto; display: block;}













/* =========================================
  Next Link - Reasons Section Styles
  他店より高い買取価格 3つの理由
  Author: ChatGPT
========================================= */

/* ---- Color Tokens ------------------------------------ */
:root {
  --nl-accent: #18b7a6;         /* 公式サイト系の緑（必要に応じて微調整） */
  --nl-accent-weak: #e6f7f4;    /* 薄いグリーン背景 */
  --nl-border: #17a696;         /* 枠線色 */
  --nl-text: #1e2a32;           /* 見出し・本文の基本色 */
  --nl-muted: #5f6b76;          /* 補助テキスト */
  --nl-white: #fff;
}

/* ---- Utilities --------------------------------------- */
.nl-hide-sp { display: none; }
@media (min-width: 768px) { .nl-hide-sp { display: inline; } }

/* ---- Section Base ------------------------------------ */
.nl-reasons {
  background: var(--nl-white);
  color: var(--nl-text);
  padding: clamp(40px, 6vw, 80px) 16px;
}

.nl-reasons__inner {
  max-width: 1040px;
  margin: 0 auto;
}

.nl-reasons__header {
  text-align: center;
  margin-bottom: clamp(28px, 5vw, 44px);
}

.nl-reasons__eyebrow {
  display: inline-block;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--nl-accent);
  border: 1px solid var(--nl-accent);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 12px;
}

.nl-reasons__title {
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.3;
  margin: 0 0 10px;
}

.nl-reasons__lead {
  color: var(--nl-muted);
  font-size: clamp(14px, 2.6vw, 16px);
}

/* ---- Reason List ------------------------------------- */
.nl-reasons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 2.2vw, 22px);
}

.nl-reason {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  border: 2px solid var(--nl-border);
  border-radius: 10px;
  padding: clamp(14px, 2.4vw, 22px);
  background: var(--nl-white);
  box-shadow: 0 1px 0 rgb(0 0 0 / 3%);
}

@media (min-width: 640px) {
  .nl-reason {
    gap: 20px;
    border-radius: 12px;
    padding: clamp(18px, 2.6vw, 28px);
  }
}

/* ---- Badge (丸数字＋「理由」) ------------------------ */
.nl-reason__badge {
  position: relative;
  width: 74px;
  height: 74px;
  min-width: 74px;
  border-radius: 50%;
  background: var(--nl-accent);
  color: var(--nl-white);
  display: grid;
  place-items: center;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 10%);
}

.nl-reason__badge-label {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .95;
}

.nl-reason__badge-num {
  font-weight: 700;
  font-size: 28px;
  transform: translateY(6px);
}

@media (min-width: 768px) {
  .nl-reason__badge { width: 88px; height: 88px; min-width: 88px; }
  .nl-reason__badge-num { font-size: 32px; }
}

/* ---- Body -------------------------------------------- */
.nl-reason__body { padding-top: 4px; }

.nl-reason__title {
  font-size: clamp(18px, 2.9vw, 22px);
  color: var(--nl-text);
  line-height: 1.5;
  margin: 0 0 6px;
  border-left: 5px solid var(--nl-accent);
  padding-left: 10px;
}

.nl-reason__text {
  font-size: clamp(14px, 2.6vw, 16px);
  color: var(--nl-text);
  line-height: 1.9;
  margin: 0;
}

/* ---- CTA --------------------------------------------- */
.nl-reasons__cta {
  text-align: center;
  margin-top: clamp(22px, 4vw, 32px);
}

.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 700;
  transition: filter .2s ease, transform .04s ease;
}

.nl-btn--line {
  background: var(--nl-accent);
  color: var(--nl-white);
  box-shadow: 0 4px 14px rgb(24 183 166 / 28%);
}

.nl-btn:hover { filter: brightness(1.04); }
.nl-btn:active { transform: translateY(1px); }

/* ---- High-contrast outline for accessibility ---------- */
.nl-btn:focus-visible,
.nl-reason:focus-within {
  outline: 3px solid #222;
  outline-offset: 2px;
}







/* ==== About ==== */
.nl-about { padding: clamp(40px,6vw,80px) 16px; background:#fff; }
.nl-about__inner { max-width:1040px; margin:0 auto; }
.nl-sec-header { text-align:center; margin-bottom: clamp(24px,5vw,40px); }
.nl-eyebrow{display:inline-block;font-size:14px;letter-spacing:.08em;color:var(--nl-accent);border:1px solid var(--nl-accent);border-radius:999px;padding:6px 12px;margin-bottom:12px;}
.nl-sec-title{font-size:clamp(24px,5vw,34px);margin:0 0 8px;}
.nl-sec-lead{color:var(--nl-muted);font-size:clamp(14px,2.6vw,16px);}

.nl-about__grid{display:grid;gap:20px;grid-template-columns:1fr;align-items:start;}
@media(min-width:840px){.nl-about__grid{grid-template-columns:1.1fr 1.2fr;gap:28px;}}

.nl-about__photo{ padding: 0px; margin: 10px;}

.nl-about__photo img{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 22px rgba(0,0,0,.08);}
.nl-about__catch{font-size:clamp(18px,2.9vw,22px);margin:0 0 8px;border-left:5px solid var(--nl-accent);padding-left:10px;}
.nl-about__points{margin:10px 0 16px;padding-left:1.2em;}
.nl-about__points li{line-height:1.9;margin:.2em 0;}
.nl-about__info{display:grid;gap:8px;margin:14px 0 18px;}
.nl-about__info dt{min-width:6em;color:var(--nl-muted);}
.nl-about__info > div{display:flex;gap:10px;}
.nl-about__cta{display:flex;flex-wrap:wrap;gap:10px;}
.nl-btn--ghost{border:2px solid var(--nl-accent);color:var(--nl-accent);background:#fff;}

.nl-about__mapwrap{margin-top:clamp(18px,4vw,28px);border-radius:12px;overflow:hidden;border:2px solid var(--nl-border);}
.nl-about__map{width:100%;height:360px;border:0;}















/* ==== Flow ==== */
.nl-flow{background:var(--nl-accent-weak);padding:clamp(40px,6vw,80px) 16px;}
.nl-flow__inner{max-width:1040px;margin:0 auto;}
.nl-flow__list{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:900px){.nl-flow__list{grid-template-columns:repeat(3,1fr);gap:20px;}}

.nl-flow__item{background:#fff;border:2px solid var(--nl-border);border-radius:12px;padding:20px;position:relative;box-shadow:0 6px 18px rgba(0,0,0,.05);}
.nl-flow__num{position:absolute;top:-14px;left:-14px;width:48px;height:48px;border-radius:50%;background:var(--nl-accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;box-shadow:0 4px 10px rgba(24,183,166,.28);}
.nl-flow__title{margin:6px 0 6px;font-size:clamp(18px,2.9vw,20px);}
.nl-flow__text{margin:0;color:var(--nl-text);line-height:1.9;}
.nl-flow__cta{text-align:center;margin-top:clamp(20px,4vw,32px);}





/* ==== Voices ==== */
.nl-voices {
  padding: clamp(40px, 6vw, 80px) 16px;
  background: #fff;
}
.nl-voices__inner {
  max-width: 1040px;
  margin: 0 auto;
}
.nl-voices__list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .nl-voices__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.nl-voice {
  border: 2px solid var(--nl-border);
  border-radius: 12px;
  background: #fff;
  padding: 18px 18px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* プロフィール（アイコン＋人物情報） */
.nl-voice__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.nl-voice__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.nl-voice__person {
  font-size: 14px;
  color: var(--nl-text);
  line-height: 1.4;
}

.nl-voice__rating {
  color: #f2b01e;
  letter-spacing: .08em;
  font-weight: 700;
}
.nl-voice__text {
  margin: 0;
  line-height: 1.9;
  color: var(--nl-text);
}
.nl-voice__meta {
  color: var(--nl-muted);
  font-size: 13px;
}

.nl-voices__cta {
  text-align: center;
  margin-top: clamp(20px, 4vw, 32px);
}

/* 4件目以降（折りたたみ対象） */
.nl-voice--more {
  display: none;         /* 初期は非表示 */
}
.nl-voice--more.is-visible {
  display: flex;         /* 開いた時に表示 */
}

/* 「もっと見る」ボタン */
.nl-voices__toggle-wrap {
  text-align: center;
  margin-top: 20px;
}
.nl-voices__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid var(--nl-border);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.nl-voices__toggle:hover {
  background: #f5f8ff;
}

/* スマホ表示の際はアイコンをさらに大きくする */
@media (max-width: 600px) {
  .nl-voice__icon {
    width: 64px;
    height: 64px;
  }
  .nl-voice__person {
    font-size: 16px;
    line-height: 1.4;
  }
  .nl-voice__profile {
    gap: 14px; /* アイコン大型化に合わせて余白調整 */
  }
}







/* Googleレビュー画像のレスポンシブ対応 */
.nl-google-image {
  display: block;
  max-width: 100%;
  width: 100%;       /* スマホ幅で必ず収まる */
  height: auto;
  margin: 20px auto 30px;
}













/* =========================================
  Next Link - Results (Achievements)
========================================= */
.nl-results{padding:clamp(40px,6vw,80px) 16px;background:#fff;}
.nl-results__inner{max-width:1120px;margin:0 auto;}

.nl-results__filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px;}
.nl-chip{
  appearance:none;border:1px solid var(--nl-accent);background:#fff;color:var(--nl-accent);
  border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer;transition:all .2s ease;
}
.nl-chip:hover{filter:brightness(1.05)}
.nl-chip.is-active{background:var(--nl-accent);color:#fff;box-shadow:0 4px 14px rgb(24 183 166 / 28%);}

.nl-results__grid{
  display:grid;gap:16px;grid-template-columns:1fr;
}
@media(min-width:720px){.nl-results__grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.nl-results__grid{grid-template-columns:repeat(3,1fr);gap:20px;}}

.nl-card{border:2px solid var(--nl-border);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(0,0,0,.05);}
.nl-card__imgwrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#f5f7f8; margin: 0px;/*-------------*/}
.nl-card__imgwrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.nl-card:hover .nl-card__imgwrap img{transform:scale(1.06);}
.nl-badge{
  position:absolute;left:10px;top:10px;background:rgba(30,42,50,.88);color:#fff;
  padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.06em;
}

.nl-card__body{padding:14px 14px 16px;display:grid;gap:6px;}
.nl-card__brand{font-size:18px;letter-spacing:.06em;margin:2px 0 0;}
.nl-card__name{margin:0;color:var(--nl-muted);}
.nl-card__meta{margin:6px 0 8px;padding:0;list-style:none;color:var(--nl-text);font-size:14px;line-height:1.7;}
.nl-card__meta li{margin:.1em 0;}
.nl-card__price{margin-top:auto;font-weight:800;font-size:20px;color:#111;}

.nl-results__note{color:var(--nl-muted);text-align:center;margin:14px 0 0;font-size:13px;}
.nl-results__cta{text-align:center;margin-top:clamp(18px,4vw,28px);}






/* ==== Swiper調整 ==== */
.nl-results__swiper { position: relative; padding-bottom: 34px; }
.nl-results .swiper-wrapper { align-items: stretch; }
.nl-results .swiper-slide { height: auto; } /* カード高さにフィット */

.swiper-button-prev, .swiper-button-next {
  color: var(--nl-accent);
  --swiper-navigation-size: 26px;
}
.swiper-pagination-bullet { background: #c9eae6; opacity: 1; }
.swiper-pagination-bullet-active { background: var(--nl-accent); }

/* フィルタ非表示用 */
.swiper-slide.is-hidden { display: none !important; }






/* ==== 高さを揃える調整 ==== */

/* 各スライドの高さを固定基準に */
.nl-results .swiper-slide {
  height: auto !important;
  display: flex;
}

/* カード全体を等しい高さにする */
.nl-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* カード内の本文（画像・テキスト）を伸縮に対応させる */
.nl-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 画像部分を統一比率で固定 */
.nl-card__imgwrap {
  /*aspect-ratio: 16 / 9;*/
	aspect-ratio: 9 / 9;
  height: auto;
  overflow: hidden;
}

/* Swiper全体の高さ計算を正確に */
.nl-results__swiper {
  min-height: 100%;
}

/* モバイルでの縦詰まりを防止 */
@media (max-width: 768px) {
  .nl-card__body {
    padding-bottom: 10px;
  }
}




.nl-card__price {
  margin-top: auto;
}






/* ==== Swiper ページネーション位置調整 ==== */
.nl-results__swiper {
  position: relative;
  padding-bottom: 60px!important; /* ← ドット分の余白を追加（お好みで調整） */
}

.nl-results .swiper-pagination {
  position: absolute;
  bottom: 10px; /* ← 下方向に余裕をもたせる */
  left: 0;
  width: 100%;
  text-align: center;
}

.nl-results .swiper-pagination-bullet {
  background: #c9eae6;
  opacity: 1;
  margin: 0 5px;
}

.nl-results .swiper-pagination-bullet-active {
  background: var(--nl-accent, #00b900); /* LINE色にも対応 */
}






























/* =========================================
  Next Link - FAQ styles
========================================= */
.nl-faq { padding: clamp(40px,6vw,80px) 16px; background:#fff; }
.nl-faq__inner { max-width: 1040px; margin: 0 auto; }

.nl-faq__list { display: grid; gap: 10px; }
@media (min-width: 960px) { .nl-faq__list { gap: 12px; } }

.nl-faq__item {
  border: 2px solid var(--nl-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.nl-faq__summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-weight: 700;
  color: var(--nl-text);
}
.nl-faq__summary::-webkit-details-marker { display: none; }

.nl-faq__q { line-height: 1.6; font-size: clamp(16px,2.8vw,18px); }

/* 開閉アイコン */
.nl-faq__icon {
  width: 18px; height: 18px; border: 2px solid var(--nl-accent); border-radius: 4px; position: relative;
}
.nl-faq__icon::before, .nl-faq__icon::after {
  content: ""; position: absolute; background: var(--nl-accent);
  left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.nl-faq__icon::before { width: 10px; height: 2px; }
.nl-faq__icon::after  { width: 2px; height: 10px; transition: opacity .2s ease; }

/* 開いているときは “-” 表示に */
.nl-faq__item[open] .nl-faq__icon::after { opacity: 0; }

.nl-faq__a { padding: 0 18px 16px 18px; }
.nl-faq__a p { margin: 0; color: var(--nl-text); line-height: 1.9; }
.nl-faq__a ul { margin: .3rem 0 0 1.2rem; }

.nl-faq__cta { text-align: center; margin-top: clamp(18px,4vw,28px); }

















/* ==== LINEボタン本体 ==== */
.nl-btn--line {
    background: #00b900;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 400px;              /* PC幅 */
    max-width: 95%;            /* スマホ対応 */
    padding: 16px 24px;

    border-radius: 50px;
    font-size: 20px;
    box-shadow: 0 6px 16px rgba(0, 185, 0, 0.25);
    text-decoration: none;
    margin: 0 auto;            /* 中央寄せ */
}

/* レスポンシブ */
@media (max-width: 768px) {
    .nl-btn--line {
        width: 95%;
        max-width: 400px;
    }
}

/* LINE アイコン */
.nl-line-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* ==== ★ テキスト中央揃え ==== */
.nl-text {
    text-align: center;
    line-height: 1.3;
    flex-grow: 1;
}

/* ==== 矢印（常時アニメーション） ==== */
.nl-arrow {
    font-size: 26px;
    font-weight: bold;
    display: inline-block;
    animation: arrowMove 1.4s ease-in-out infinite;
}

/* 左向き矢印アニメーション */
@keyframes arrowMove {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-6px); }
    100% { transform: translateX(0); }
}























/* -------------------------- CTA -------------------------- */
.cta-section {background: #e6f3ff; padding: 40px 0; text-align: center;}
.cta-inner {max-width: 750px; margin: 0 auto;}
.cta-tel {font-size: 40px; font-weight: 700; margin-bottom: 5px;}
.cta-tel a {color: #004899; text-decoration: none;}
.cta-tel a:hover {text-decoration: underline;}
.cta-button {display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #ff8800; color: #fff; font-size: 30px; font-weight: 700; text-decoration: none; padding: 10px 28px; border-radius: 40px; transition: background 0.3s ease; width: 100%; max-width: 500px; margin: 0 auto;}
.cta-button:hover {background: #ff7000;}
.cta-icon img {width: 30px; height: auto; display: block;}
.cta-arrow {font-size: 20px; margin-left: 8px;}

/* スマホ調整 */
@media (max-width: 768px) {
.cta-tel {font-size: 25px;}
.cta-button {font-size: 20px; padding: 10px 0px; width: 90%;}
.cta-icon img {width: 20px;}
.cta-arrow {font-size: 16px;}
}

/* ------------------------- 問題提起 ------------------------- */
.problem-section {background: #e6f3ff; padding: 0px;}
.problem-inner {width: 100%; max-width: 600px; margin: 0 auto; text-align: center;}
.problem-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* --------------------------- 解決 --------------------------- */
.solution-section {background: #004c9c; padding: 0px;}
.solution-inner {width: 100%; max-width: 600px; margin: 0 auto; text-align: center;}
.solution-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* ------------------------- ノーリスク ------------------------- */
.riskfree-section {background: #e6f3ff; padding: 60px 0;}
.riskfree-inner {width: 100%; max-width: 600px; margin: 0 auto; text-align: center;}
.riskfree-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* --------------------- 販売店様の声・事例 --------------------- */
.voice-section{background:#e6f3ff; padding:48px 0;}
.voice-inner {width: 100%; max-width: 750px; margin: 0 auto;}
.voice-title{font-size:14px; letter-spacing:.32em; color:#0b4a86; text-align:center; margin:0 0 20px; font-weight:700;}
.voice-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column;}
.voice-item{display:flex; justify-content:center; align-items:center;}
.voice-item img{width: 100%; max-width: 650px; height:auto; display:block; margin: 10px 0px;}
/* スマホ調整 */
@media (max-width: 768px) {.voice-section{padding:10px 0;}}

/* ----------------------- 3つのメリット ----------------------- */
.merit-section{background:#e6f3ff; padding:48px 0;}
.merit-inner {width: 100%; max-width: 750px; margin: 0 auto;}
.merit-title{font-size:14px; letter-spacing:.32em; color:#0b4a86; text-align:center; margin:0 0 20px; font-weight:700;}
.merit-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:28px;}
.merit-item{display:flex; justify-content:center; align-items:center;}
.merit-item img{width: 100%; max-width: 500px; height:auto; display:block; margin: 10px 0px;}

/* ---------------------- カーマッチグループは～ ---------------------- */
.map-section {background: #ffffff; padding: 0px;}
.map-inner {width: 100%; margin: 0 auto; text-align: center;}
.map-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* ---------------------- お問い合わせフォーム前のタイトル ---------------------- */
.form-title-section {background: #004c9c; padding: 0px;}
.form-title-inner {width: 100%; margin: 0 auto; text-align: center;}
.form-title-inner img {width: 100%;/* スマホではみ出さないように */ height: auto; display: block;}

/* ---------------------- お問い合わせフォーム ---------------------- */

/* 背景ブルー＋内側に白ボックス */
.inset-section{background:#004c9c; padding: 20px 12px 70px 12px; /* ← “少し内側”の青い余白を作る */}
.inset-inner{max-width: 750px; width: 100%; margin: 0 auto; background:#fff; border-radius: 10px; padding: clamp(16px, 3vw, 32px); box-shadow: 0 6px 20px rgba(0,0,0,.08);}

/* 余白を少し広げたい場合（PC） */
/*@media (min-width: 960px){
  .inset-section{ padding: 32px 0; }
  .inset-inner{ border-radius: 18px; }
}*/






/* formの部品
==================================================--*/
#form .pp-note {
	font-size: 0.9rem;
	margin-bottom: 0.5em;
}

/* 各種入力エリアの共通設定 */
#form input[type="text"],
#form input[type="tel"],
#form input[type="email"],
#form textarea,
#form select {height: 3.5rem; width: 100%; /*font-size: 16px;*/ font-size: 19px; padding: 0.3em; color: #333; background-color: #FFFFFF; border-radius: 0.3em; margin-top: 0.2em; border: solid 1px #B0B0B0;}

/*郵便番号入力エリア単独設定*/
#form input[type="text"]#zipcode {width: 10em;}
/*電話番号入力エリア単独設定*/
#form input[type="tel"] {width: 15em;}

/* チェックボックス */
#form .checkbox-boxes {display: flex; flex-wrap: wrap; justify-content: space-between; border: none; padding: 5px 0px; margin: 0px;}
#form .checkbox-boxes label {display: flex; align-items: center; gap: 0 0.1em; position: relative; width: 49%; height: 3.5rem; margin-bottom: 0.6rem; padding:0 0 0 0.7rem; border-radius: 5px; background-color: #f2f2f2; cursor: pointer;}
#form .checkbox-boxes label:has(:checked) {background-color: #b2cbfd; font-weight: bold;}
#form .checkbox-boxes label:hover{background-color: #b2cbfd;}
#form .checkbox-boxes label::before {width: 18px; height: 18px; border-radius: 2px; background-color: #fff; border: 1px solid #888; content: '';}
#form .checkbox-boxes label:has(:checked)::after {position: absolute; top: 35%; left: 17px; transform: rotate(45deg); width: 6px; height: 12px; border: solid #1b2c70; border-width: 0 2px 2px 0; content: '';}
#form .checkbox-boxes input {appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none;}


#form .vertical-box {display: flex; align-items: center; margin-bottom: 0.5rem;}
#form .vertical-box input[type=radio] {	margin: 2px 5px 0 0; width: 25px; height: 25px;}
#form .vertical-box label {	/*	width: calc(100% - 30px);*/ font-size: 1.1rem; font-weight: normal;}

#form textarea {height: 12em; margin: 0.2em 0 1rem 0;}

#form select {width: auto; padding: 0.3em 1em;}


/*必須、任意ラベル*/
#form .which {display: flex; align-items: center; /*height: 1.4rem;*/ margin-right: 5px; padding: 5px 5px; font-size: 0.9rem; font-weight: normal; color: #fff; white-space: nowrap; border-radius: 4px;}
#form .which.require {background-color: #FA6723;}
#form .which.optional {background-color: #a9a9a9;}

/*必須、任意も含む　右側項目タイトル*/
#form .item-name-box {display: flex; align-items: center; width: 100%; line-height: 1.1; margin: 2rem 0 0.2rem;}
#form .item-name-box label {/*margin-right: 0.4em;*/ font-weight: bold; font-size: 1.2rem;}
#form .item-name-box label .small {font-size: 0.7em;}

/*プレースホルダー テキスト入力欄に最初から薄く表示されている案内文字*/
::placeholder {color: #aaa;}
/* 旧Edge対応 */
::-ms-input-placeholder {color: #aaa;}

/*送信ボタン*/
#form input[type="submit"].btn {display: block; margin: 0 auto; font-weight: bold; color: #fff; padding: 0.8em; letter-spacing: 0.05em; background-color: #FA6723; border: none; margin: 30px auto;}

#form label.error {
	display: block;
	width: 100%;
	margin-right: 0;
	padding-left: 0;
	border-left: none;
}

#form .error {
	font-size: 1rem;
	font-weight: bold;
	color: #f00;
}

#form input[type="text"].error,
#form input[type="tel"].error,
#form input[type="email"].error,
#form select.error,
#form textarea.error {
	border: 3px solid #f00;
	background: #FFF0F0;
	color: #333;
	font-weight: normal;
	font-size: 16px;
}

#form input[type="submit"],
#form input[type="button"] {
	text-align: center;
	width: 80%;
	max-width: 400px;
	font-size: 1.1rem;
	padding: 1rem 0;
	border-radius: 5px;
	box-shadow: 0px 5px 5px -2px rgba(50, 50, 50, 0.2);

}

#form input[type="submit"]:hover,
#form input[type="button"]:hover {
	opacity: 0.8;
	cursor: pointer;
}

#form input[type="submit"].col1,
#form input[type="button"].col1 {
	width: 80%;
	margin: 0 auto;
}

#form .btn-box {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

#form input[type="submit"].col2,
#form input[type="button"].col2 {
	width: 46%;
}

#form .col2-space {
	margin-right: 6px;
}

#form input[type="submit"].go,
#form input[type="button"].go {
	background-color: #FA6723;
	color: #fff;
	border: none;
}




#form input[type="submit"].back,
#form input[type="button"].back {
	background-color: #eee;
	color: #555;
	border: 1px solid #aaa;
}












































/* ---------------------- フッター ---------------------- */
.site-footer{border-top: 1px solid var(--line); background: transparent; color: #64748b; /* 目立たない落ち着いた色 */}
.site-footer__inner{max-width: 750px; margin: 0 auto; padding: 14px 16px 18px; text-align: center;}
.site-footer__links{display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px;}
.site-footer__links a{color: #64748b; text-decoration: none;}
.site-footer__links a:hover{ color: var(--blue); text-decoration: underline; }
.site-footer__copy{display: block; margin-top: 6px; font-size: 12px; color: #94a3b8;/* さらに控えめ */}
.site-footer__links .sep{ opacity:.5; }

/* スマホ微調整 */
@media (max-width: 480px){
.site-footer__links{ gap: 10px; font-size: 12px; }
.site-footer__copy{ font-size: 11px; }
}



/* -------------------- フローティングCTA -------------------- */
.floating-cta {
  --bar-h: 100px; /* 画像の高さに応じて調整 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(230,243,255,0.9); /* #e6f3ffを透過 */
  padding: 8px max(12px, env(safe-area-inset-right))
           calc(8px + env(safe-area-inset-bottom))
           max(12px, env(safe-area-inset-left));
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
.floating-cta__inner {
  max-width: 750px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* ← 1カラムに変更 */
  gap: 12px;
  align-items: center;
}
.floating-cta__btn {
  display: block;
  line-height: 0;
  overflow: hidden;
  transition: filter .18s ease, opacity .18s ease;
  will-change: filter;
}
.floating-cta__btn:hover img,
.floating-cta__btn:focus-visible img {
  filter: brightness(1.06) saturate(1.05);
  opacity: 0.98;
}
.floating-cta__btn img {
  width: 100%;
  height: auto;
  display: block;
}
.floating-cta-spacer { height: 120px; }

@media (max-width: 480px) {
  .floating-cta__inner { gap: 8px; }
  .floating-cta-spacer { height: 80px; }
}

/* 任意：クリックしやすいように小さな影を付与（画像が角丸なら推奨） */
.floating-cta__btn--full img {
  /* border-radius: 6px; */
  /* box-shadow: 0 4px 12px rgba(0,0,0,.08); */
}


/* ※スマホは縦2段にしたい場合は下を有効化
@media (max-width: 480px){
  .floating-cta__inner{ grid-template-columns: 1fr; }
}*/






















/* =========================
  Voice 価格比較（当店を目立たせる）
========================= */
/* 買取情報（商品・比較・meta）をカード内で下揃え */
.nl-voice__details{ margin-top: auto; padding-top: 10px; }

.nl-voice__dl{
  margin: 0 0 10px;
  display: grid;
  gap: 8px;
}
.nl-voice__dl > div{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e8eef4;
}
.nl-voice__dl dt{
  color: var(--nl-muted);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(23,166,150,.08);
  color: #0d7370;
  width: fit-content;
}
.nl-voice__dl dd{
  margin: 0;
  padding-left: 0;
  color: var(--nl-text);
  font-size: 14px;
  line-height: 1.6;
}

.nl-voice__sep{
  border: 0;
  height: 1px;
  background: #e7eef6;
  margin: 14px 0;
}

/* 比較ブロック本体 */
.nl-compare{
  margin-top: 10px;
  border: 2px solid var(--nl-border);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

/* 当店・他店を縦並びに */
.nl-compare__table{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* 当店（強調） */
.nl-compare__col{
  border-radius: 10px;
  padding: 12px 12px 10px;
  position: relative;
}
.nl-compare__col--ours{
  background: var(--nl-accent-weak);
  border: 2px solid var(--nl-accent);
  padding-top: 42px; /* バッジ用の上部エリア（ラベルと重ならない） */
  padding-right: 88px;
  overflow: hidden;
}
.nl-compare__col--other{
  background: #f6f8fb;
  border: 2px dashed #cbd5e1;
}
/* 他店は小さめにして当店を目立たせる */
.nl-compare__col--other .nl-compare__label{ font-size: 11px; }
.nl-compare__col--other .nl-compare__price{ font-size: 16px; font-weight: 800; color: #475569; }
.nl-compare__col--other .nl-compare__yen{ font-size: 12px; color: #64748b; }

/* ラベルと金額 */
.nl-compare__label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--nl-text);
  margin-bottom: 6px;
}
.nl-compare__price{
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  color: #111;
  white-space: nowrap; /* 金額と円を同じ行に */
}
.nl-compare__yen{
  font-size: 14px;
  font-weight: 800;
  margin-left: 2px;
  color: var(--nl-muted);
  vertical-align: baseline;
}

/* 当店のバッジ（上部エリアに配置してラベルと重ならない） */
.nl-compare__badge{
  position: absolute;
  top: 10px;
  right: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(239,68,68,.25);
}

/* 差額表示（表の下）・赤系で強調 */
.nl-compare__diff{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  font-weight: 800;
  color: #b91c1c;
  text-align: center;
}
.nl-compare__diff strong{
  font-size: 18px;
  color: #b91c1c;
}

/* スマホで縦積み・当店価格を大きく・バッジを考慮して見た目中央に */
@media (max-width: 600px){
  .nl-compare__table{ grid-template-columns: 1fr; }
  .nl-compare__price{ font-size: 24px; }
  .nl-compare__col--ours .nl-compare__price{ font-size: 30px; }
  .nl-compare__col--ours .nl-compare__yen{ font-size: 16px; }
  .nl-compare__col{ text-align: center; }
  .nl-compare__col--ours{ padding-left: 44px; padding-right: 88px; } /* 左は控えめで右寄りにならないように */
}




/* =========================
  Voices：wrapper(750px)内で確実に収める
========================= */
.nl-voices {
  overflow-x: hidden;            /* 念のため横スクロール封じ */
}

.nl-voices__inner{
  max-width: 750px;              /* ← wrapper に合わせる */
  width: 100%;
  margin: 0 auto;
  padding-inline: 16px;          /* 余白を安定させる */
  box-sizing: border-box;
}

/* グリッド：minmax(0,1fr)で「はみ出し」防止 */
.nl-voices__list{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;    /* スマホは1列 */
}

@media (min-width: 720px){
  .nl-voices__list{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* タブレットは2列 */
    gap: 18px;
  }
}

@media (min-width: 1040px){
  .nl-voices__list{
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 広い時だけ3列 */
    gap: 20px;
  }
}

.nl-voice{
  min-width: 0;                  /* ← これが超重要（子要素で押し出されるのを防ぐ） */
}

.nl-voice__text,
.nl-voice__person,
.nl-voice__meta{
  overflow-wrap: anywhere;        /* 長文でも折り返す */
  word-break: break-word;
}









/* =========================
  価格比較：見やすく・オシャレに
========================= */
.nl-compare{
  margin-top: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fffd 100%);
  border: 1px solid rgba(23,166,150,.35);
  padding: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

/* 当店・他店を縦並びに */
.nl-compare__table{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.nl-compare__col{
  border-radius: 12px;
  padding: 12px;
  position: relative;
  display: grid;
  gap: 6px;
}

/* 当店：強調・バッジ用に上部・右の余白を確保 */
.nl-compare__col--ours{
  background: rgba(24,183,166,.10);
  border: 2px solid rgba(24,183,166,.65);
  padding-top: 42px;
  padding-right: 88px;
  overflow: hidden;
}

/* 他店：控えめ・小さめにして当店を目立たせる */
.nl-compare__col--other{
  background: #f7f8fb;
  border: 1px dashed #b9c8da;
}
.nl-compare__col--other .nl-compare__label{ font-size: 11px; color: #64748b; }
.nl-compare__col--other .nl-compare__price{ font-size: clamp(14px, 1.6vw, 18px); font-weight: 800; color: #475569; }
.nl-compare__col--other .nl-compare__yen{ font-size: 11px; color: #64748b; }

/* 小さな見出しを整える */
.nl-compare__label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #334155;
}

/* 金額：桁が多くても崩れない・円は金額の右に */
.nl-compare__price{
  font-weight: 900;
  line-height: 1.1;
  color: #0f172a;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: .02em;
  white-space: nowrap;
}

.nl-compare__yen{
  font-size: 12px;
  font-weight: 800;
  margin-left: 4px;
  color: #64748b;
  vertical-align: baseline;
}

/* バッジ：上部に配置して「当店の買取価格」と重ならない */
.nl-compare__badge{
  position: absolute;
  top: 10px;
  right: 12px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(239,68,68,.25);
}

/* 差額：赤系で強調 */
.nl-compare__diff{
  margin-top: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  font-weight: 900;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.nl-compare__diff strong{
  font-size: 18px;
  letter-spacing: .02em;
  color: #b91c1c;
}

/* スマホ：比較を縦積み・当店価格を大きく・バッジを考慮して見た目中央に */
@media (max-width: 520px){
  .nl-compare__table{ grid-template-columns: 1fr; }
  .nl-compare__badge{ top: 8px; right: 8px; }
  .nl-compare__col{ text-align: center; }
  .nl-compare__col--ours{ padding-left: 44px; padding-right: 88px; }
  .nl-compare__col--ours .nl-compare__price{ font-size: 30px; }
  .nl-compare__col--ours .nl-compare__yen{ font-size: 16px; }
}



/* 品名・仕様・状態：ラベル上・テキスト下の縦並び */
.nl-voice__dl{
  margin: 12px 0 8px;
  display: grid;
  gap: 10px;
}

.nl-voice__dl > div{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fafbfc;
  border: 1px solid #e8eef4;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.nl-voice__dl dt{
  font-size: 12px;
  font-weight: 700;
  color: #0d7370;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(23,166,150,.1);
  letter-spacing: .02em;
  line-height: 1.3;
  width: fit-content;
}

.nl-voice__dl dd{
  margin: 0;
  padding-left: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #1e2a32;
  font-weight: 500;
}