/* =========================================================
   Anchor Link 調整 (add)
   ========================================================= */

:root{
  --header-height:65px;
}
@media (max-width: 980px) {
  :root{
    --header-height:118px;
  }
}
html {
    scroll-behavior: smooth; 
    scroll-padding-top: calc(var(--header-height) + 15px);
}

/* =========================================================
   Design Tokens
   ========================================================= */
:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface2:#fbfcfe;
  --text:#111827;
  --muted:#4b5563;
  --muted2:#6b7280;
  --line:#e5e7eb;
  --line2:#d1d5db;
  --brand:#0b57d0;
  --brandSoft:#e7f0ff;
  --shadow:0 8px 20px rgba(17,24,39,.08);
  --radius:14px;
  --radius-lg:24px;
  --max:1120px;
  --font: ui-sans-serif, system-ui, -apple-system,
    "Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;

  --gap:16px;
  --topbar-h:64px;

  --z-topbar:10;/*1000change*/
  --z-mobilecta:1200;
}

/* =========================================================
   Reset / Base
   ========================================================= */

/* ルートから.content_wrap配下に変更*/
.content_wrap{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  letter-spacing:.01em;
  background:linear-gradient(180deg,#fff 0%,var(--bg) 45%);
  background-size: 100% 100vh;
}
.content_wrap img{max-width:100%; height:auto; display:block}
.content_wrap a{color:inherit; text-decoration:none}
.content_wrap button,select{font-family:inherit}
.content_wrap ul{margin:0; padding-left:18px}
.content_wrap small{font-size:inherit}
.content_wrap li{list-style: disc}

/* =========================================================
   Layout / Container
   ========================================================= */
.content_wrap .wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:16px;
}

/* =========================================================
   Card / Section
   ========================================================= */
.content_wrap .card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.content_wrap .section{padding:14px}

/* =========================================================
   Typography
   ========================================================= */
.content_wrap h1,h2,h3,h4{margin:0}
.content_wrap h2{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.35;
  letter-spacing:-.01em;
}
.content_wrap h3{
  margin:0 0 4px;
  font-size:16px;
}
.content_wrap .desc{
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 10px;
}
.content_wrap .note{
  margin-top:8px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted2);
}

/* =========================================================
   Buttons（余白はコンテナ側で管理する）
   ========================================================= */
.content_wrap .btn{
  appearance:none;
  border-radius:12px;
  padding:10px 14px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  border:1px solid var(--line2);
  background:#fff;
  color:var(--text);
}
.content_wrap .btn.primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  margin:0; /* ここで余白を付けない（崩れ防止） */
}
.content_wrap .btn.ghost{background:#fff}
.content_wrap .btn:disabled{opacity:.6; cursor:not-allowed}
.content_wrap .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(17,24,39,.10);
}
.content_wrap .btn{ transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
/* =========================================================
   Topbar
   ========================================================= */
.content_wrap .topbar{
  position:sticky;
  top:0;
  z-index:var(--z-topbar);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.content_wrap .topbar-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:10px 16px;
  min-height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.content_wrap .brand{display:flex; align-items:center; gap:12px}
.content_wrap .logo{
  width:52px;
  height:36px;
  display:grid;
  place-items:center;
  background:#111827;
  color:#fff;
  border-radius:10px;
  font-weight:900;
  letter-spacing:.08em;
  font-size:12px;
}
.content_wrap .brand strong{display:block; font-size:14px}
.content_wrap .brand small{display:block; font-size:12px; color:var(--muted2)}
.content_wrap .actions{display:flex; gap:10px; align-items:center}

/* =========================================================
   Breadcrumbs
   ========================================================= */
.breadcrumbs{
  font-size:12px;
  color:var(--muted2);
  margin:12px 0 10px;
}

/* =========================================================
   Hero
   ========================================================= */
.content_wrap .hero{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.content_wrap .hero img{width:100%; height:auto}
.content_wrap .hero-caption{
  padding:10px 14px;
  font-size:12px;
  color:var(--muted);
  background:var(--surface2);
  border-top:1px solid var(--line);
}

/* =========================================================
   EC section Grid（2カラム / SPは1カラム）
   ========================================================= */
.content_wrap .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--gap);
  align-items:start;
  margin-top:14px;
}

/* =========================================================
   Buy Module
   ========================================================= */
.content_wrap #buy label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:4px;
}
.content_wrap #buy select{
  width:100%;
  padding:10px 12px;
  font-size:15px;
  border-radius:12px;
  border:1px solid var(--line2);
  background:#fff;
}

/* device media */
.content_wrap .device-media{
  margin-top:10px;
  /*padding:10px;*/
  padding:20px 10px;/*change*/
  border:1px dashed var(--line2);
  border-radius:14px;
  background:var(--surface2);
}
.content_wrap .device-media img{
  width:100%;
  /*max-width:320px;*/
  max-width:200px;/*change*/
  margin:0 auto;
}

/* rec */
.content_wrap #buy .rec{
  margin-top:10px;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#f8fbff;
  font-size:16px;
  line-height:1.6;
}
.content_wrap #buy .rec .row{display:flex; gap:12px; flex-wrap:wrap}
.content_wrap #buy .rec .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  padding:6px 12px;
  font-size:15px;
  font-weight:800;
}
.content_wrap #buy .rec ul{
  margin:8px 0;
  padding-left:18px;
  flex:1 1 240px;
}
.content_wrap #buy .rec li{font-size:15px; line-height:1.6}
.content_wrap #recPrice,#recPriceY{font-size:20px; font-weight:900}
.content_wrap #buy .rec strong{font-size:15px; font-weight:800}

/* buy actions */
.content_wrap .buy-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.content_wrap .buy-actions .btn{flex:1}

/* =========================================================
   Support (Left card)
   ========================================================= */
.content_wrap .support-list{
  display:grid;
  gap:12px;
  margin-top:10px;
}
.content_wrap .support-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.content_wrap .support-item h3{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 6px;
  font-size:15px;
}
.content_wrap .support-item .value{
  font-size:12px;
  font-weight:900;
  color:var(--brand);
  background:var(--brandSoft);
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.content_wrap .support-item p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.content_wrap .support-item .sub{
  display:inline-block;
  margin-top:6px;
  color:var(--muted2);
  font-size:12px;
}

/* =========================================================
   Dynamic Set Banner（HTMLの class="set-banner__*" に合わせる）
   ========================================================= */
.content_wrap .set-banner{
  margin-top:6px;
  margin-bottom:6px;
}

/* 初期（画像あり2カラム） */
.content_wrap .set-banner__inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:12px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.content_wrap .set-banner__copy{padding:14px}
.content_wrap .set-banner__lead{
  margin:0 0 6px;
  font-weight:900;
  font-size:14px;
  line-height:1.4;
}
.content_wrap .set-banner__deal{
  margin:0 0 10px;
  font-weight:900;
  font-size:13px;
  line-height:1.5;
  color:var(--text);
}
.content_wrap .set-banner__deal strong{color:var(--brand)}
.content_wrap .set-banner__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line2);
  font-weight:900;
  font-size:13px;
  background:#fff;
  color:var(--text);
}
.content_wrap .set-banner__cta::after{content:""; font-weight:900}
.content_wrap .set-banner__cta:hover{border-color:var(--brand); color:var(--brand)}
.content_wrap .set-banner__imglink{
  display:block;
  background:#f7fafc;
  border-left:1px solid var(--line);
}
.content_wrap .set-banner__img{width:100%; height:auto; display:block}

/* もし「右の空白を詰めて、テキスト左＋ボタン右」にしたい場合は、
   ここをONにするとPCで画像カラムを消して締まります
   （必要になったらコメント解除して使ってください）

.set-banner__inner{ display:block; }
.set-banner__imglink{ display:none; }
.set-banner__copy{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px;
}
.set-banner__text{ display:grid; gap:4px; min-width:0; }
*/

/* =========================================================
   Promo Banners (2-up)（HTMLの promo-banners__* に合わせる）
   ========================================================= */
.content_wrap .promo-banners{
  margin:14px 0 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.content_wrap .promo-banners__link{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.content_wrap .promo-banners__link:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(17,24,39,.12);
}
.content_wrap .promo-banners__img{
  display:block;
  width:100%;
  height:auto;
}

/* =========================================================
   Compare section
   ========================================================= */
.content_wrap .titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 0;
}
.content_wrap #compare{padding:0}
.content_wrap .compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:14px;
}
.content_wrap .cmp{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.content_wrap .cmp .head{
  padding:12px;
  font-weight:900;
  background:var(--surface2);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.content_wrap .tag{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  background:#fff;
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:999px;
}
.content_wrap .cmp ul{padding:12px 12px 12px 28px}
.content_wrap .cmp li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
}
.content_wrap .value{font-weight:900; font-size:13px; white-space:nowrap}
.content_wrap .value.ok{color:#0f766e}
.content_wrap .value.ng{color:#b91c1c}

/* =========================================================
   Features + Carousel
   ========================================================= */
.content_wrap #features{padding:0}
.content_wrap #features .titlebar{padding:14px 14px 0}
.content_wrap .features{padding:14px}

.content_wrap .fx-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.content_wrap .fx-progress{flex:1; display:flex; flex-direction:column; gap:8px}
.content_wrap .fx-dots{display:flex; gap:6px; justify-content:center; align-items:center}
.content_wrap .fx-dot{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:#fff;
  cursor:pointer;
}
.content_wrap .fx-dot[aria-selected="true"]{background:var(--brand); border-color:var(--brand)}
.content_wrap .fx-bar{
  height:6px;
  background:#e9effa;
  border-radius:999px;
  overflow:hidden;
}
.content_wrap .fx-bar-fill{
  display:block;
  height:100%;
  width:calc((var(--fx-index, 0) + 1) / 6 * 100%);
  background:var(--brand);
}

/* rail */
.content_wrap .features-rail{
  overflow:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}
.content_wrap .features-grid{
  display:flex;
  gap:12px;
  padding:2px;
  min-width:100%;
}
.content_wrap .fx-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
@media (min-width:981px){
  .content_wrap .fx-slide{flex-basis:48%}
  .content_wrap .features-grid{flex-wrap:wrap}
  .content_wrap .features-rail{overflow:visible}
  .content_wrap .fx-controls{display:none}
}

.content_wrap #features .badge{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}
.content_wrap #features .point-no{
  padding:2px 8px;
  font-size:12px;
  font-weight:900;
  color:var(--brand);
  background:var(--brandSoft);
  border-radius:999px;
}
.content_wrap #features .feature h4{
  font-size:14px;
  line-height:1.5;
  margin:8px 0 6px;
}
.content_wrap #features details{
  margin-top:8px;
  font-size:12px;
  color:var(--muted2);
}
.content_wrap #features details summary{
  cursor:pointer;
  font-weight:800;
}

/* =========================================================
   Flow
   ========================================================= */
.content_wrap #flow{padding:0}
.content_wrap #flow .titlebar{padding:14px 14px 0}
.content_wrap .flow{padding:14px}
.content_wrap .flow-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.content_wrap .step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.content_wrap .step .no{
  width:30px; height:30px;
  border-radius:999px;
  background:var(--brandSoft);
  color:var(--brand);
  display:grid;
  place-items:center;
  font-weight:900;
  margin-bottom:8px;
}
.content_wrap .step h4{font-size:14px; margin:0 0 6px}
.content_wrap .step p{margin:0; color:var(--muted); font-size:13px; line-height:1.6}

/* =========================================================
   Sharp Support Map（専用クラスのみ）
   ========================================================= */
.content_wrap .sharp-support-map{
  background:#f5f8fc;
  border-radius:24px;
  margin:32px 0;
  overflow:hidden;
  border:1px solid #d6e3f5;
}
.content_wrap .ssm-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:stretch;
}
.content_wrap .ssm-text{padding:40px 36px}
.content_wrap .ssm-eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  color:var(--brand);
  background:var(--brandSoft);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:10px;
}
.content_wrap .ssm-desc{
  margin:8px 0 12px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.content_wrap .ssm-points{margin:0 0 14px}
.content_wrap .ssm-points li{margin:6px 0; color:var(--muted);list-style:disc/*add*/}
.content_wrap .ssm-cta{width:100%; max-width:260px}
.content_wrap .ssm-map{
  position:relative;
  background:#e6f1ff;
  padding:24px;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-left:1px solid #c7dcf5;
}
.content_wrap .ssm-map img{width:100%; max-width:560px; height:auto}
.content_wrap .ssm-map::before{
  content:"修理・サポート取扱店マップ";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#6b7280;
  opacity:.6;
  pointer-events:none;
}
.content_wrap .ssm-map:has(img[src])::before{display:none}

/* =========================================================
   Mobile sticky CTA
   ========================================================= */
.content_wrap .mobile-cta{
  position:sticky;
  bottom:0;
  z-index:var(--z-mobilecta);
  padding:10px 12px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--line);
}
.content_wrap .mobile-cta .bar{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  gap:10px;
}
.content_wrap .mobile-cta .btn{flex:1}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .content_wrap .topbar-inner{flex-wrap:wrap}
  .content_wrap .actions{width:100%; justify-content:flex-end}

  .content_wrap .grid{grid-template-columns:1fr}
  .content_wrap .buy-actions{flex-direction:column}

  .content_wrap .compare{grid-template-columns:1fr}
  .content_wrap .flow-grid{grid-template-columns:1fr 1fr}

  .content_wrap .ssm-inner{grid-template-columns:1fr}
  .content_wrap .ssm-map{
    border-left:none;
    border-top:1px solid #c7dcf5;
    min-height:260px;
  }
  .content_wrap .ssm-text{padding:28px 22px}

  .content_wrap .promo-banners{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:12px;
  }
  .content_wrap .promo-banners__link{border-radius:14px}

  .content_wrap .set-banner__inner{
    grid-template-columns:1fr;
  }
  .content_wrap .set-banner__imglink{
    border-left:none;
    border-top:1px solid var(--line);
  }
}

/* =========================================================
   PC tuning
   ========================================================= */
@media (min-width:981px){
  .content_wrap {font-size:16.5px}
  .content_wrap h2{font-size:24px}
  .content_wrap .desc{font-size:15.5px}
  .content_wrap #recPrice,.content_wrap #recPriceY{font-size:21px}
}
/* =========================================================
   FAQ v2 (scoped) : 見た目をプロっぽくする完全版
   ========================================================= */
.content_wrap .faq{
  margin-top: 18px;
}

/* --- Head: title + search --- */
.content_wrap .faq__head{
  display:grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: 14px;
  align-items:end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.content_wrap .faq__titles h2{
  font-size: 22px;
  letter-spacing: -0.02em;
}

.content_wrap .faq__desc{
  margin: 6px 0 0;
}

/* Search field: “主役”化 */
.content_wrap .faq__search{
  display:grid;
  gap: 8px;
}

.content_wrap .faq__searchLabel{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted2);
}

.content_wrap .faq__searchRow{
  display:flex;
  gap: 10px;
  align-items:center;
}

.content_wrap .faq__searchField{
  flex: 1;
  position: relative;
}

.content_wrap .faq__searchIcon{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color: var(--muted2);
  opacity: .85;
  pointer-events:none;
}

.content_wrap .faq__searchInput{
  width: 100%;
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 12px 12px 12px 34px; /* icon space */
  font-size: 14px;
  background: #fff;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}

.content_wrap .faq__searchInput:focus{
  border-color: var(--brand);
  box-shadow: 0 10px 26px rgba(11,87,208,.14);
  transform: translateY(-1px);
}

.content_wrap .faq__clear{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
}

.content_wrap .faq__hint{
  margin: 0;
  font-size: 12px;
  color: var(--muted2);
}

/* --- Chips: 押せる感/選択状態を強化 --- */
.content_wrap .faq__chips{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.content_wrap .faq__chip{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  cursor: pointer;
  transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease, color .10s ease;
}

.content_wrap .faq__chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(17,24,39,.10);
}

.content_wrap .faq__chip.is-active{
  border-color: rgba(11,87,208,.35);
  color: var(--brand);
  background: linear-gradient(180deg, #ffffff 0%, var(--brandSoft) 100%);
  box-shadow: 0 10px 24px rgba(11,87,208,.12);
}

/* --- Status line --- */
.content_wrap .faq__status{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted2);
  display:flex;
  align-items:center;
  gap: 6px;
}

.content_wrap .faq__count, .faq__total{
  font-weight: 900;
  color: var(--text);
}

/* --- “Popular” box: ここで一気にそれっぽくなる --- */
.content_wrap .faq__popular{
  margin-top: 14px;
}

.content_wrap .faq__popularBox{
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  border: 1px solid rgba(11,87,208,.14);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 10px 26px rgba(17,24,39,.08);
}

.content_wrap .faq__popularTitle{
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted2);
}

/* --- Accordion items: “テキストの羅列”から脱却 --- */
.content_wrap .faq__item{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  margin: 10px 0;
  box-shadow: 0 4px 12px rgba(17,24,39,.06);
  transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease;
}

.content_wrap .faq__item:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(17,24,39,.10);
  border-color: rgba(11,87,208,.18);
}

.content_wrap .faq__q::-webkit-details-marker{ display:none; }

.content_wrap .faq__qText{
  font-size: 14px;
  line-height: 1.45;
}

/* open state */
.content_wrap .faq__item[open] .faq__q{
  background: #f3f7ff;
}

/* chevron icon */
.content_wrap .faq__q::after{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted2);
  border-bottom: 2px solid var(--muted2);
  transform: rotate(45deg);
  margin-left: 6px;
  flex: 0 0 auto;
  transition: transform .12s ease, border-color .12s ease;
  opacity: .9;
}

.content_wrap .faq__item[open] .faq__q::after{
  transform: rotate(-135deg);
  border-color: var(--brand);
}

/* answer */
.content_wrap .faq__a{
  padding: 12px 14px 16px;
}

.content_wrap .faq__answerLead{
  margin: 0 0 10px;
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.8;
}

.content_wrap .faq__bullets,
.content_wrap .faq__steps{
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.content_wrap .faq__bullets li{list-style: disc}/*add*/
.content_wrap .faq__bullets li li{list-style: circle}/*add*/
.content_wrap .faq__steps li{list-style:decimal}/*add*/

.content_wrap .faq__note{
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.6;
}

/* links (pill buttons) */
.content_wrap .faq__links{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

.content_wrap .faq__link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease, color .10s ease;
}

.content_wrap .faq__link:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(17,24,39,.10);
  border-color: rgba(11,87,208,.30);
  color: var(--brand);
}

.content_wrap .faq__link::after{
  content:"";
  font-weight: 900;
  color: var(--muted2);
}

/* empty */
.content_wrap .faq__empty{
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--line2);
  border-radius: 16px;
  background: var(--surface2);
}

/* footer CTA */
.content_wrap .faq__footer{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.content_wrap .faq__footerCard{
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  background: linear-gradient(180deg,#fff 0%, #fbfcfe 100%);
  padding: 14px;
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
}

.content_wrap .faq__footerTitle{
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 900;
}

.content_wrap .faq__footerDesc{
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

.content_wrap .faq__footerActions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* responsive */
@media (max-width:980px){
  .content_wrap .faq__head{ grid-template-columns: 1fr; }
  .content_wrap .faq__searchRow{ flex-wrap:wrap; }
  .content_wrap .faq__clear{ width: 100%; }
}
/* =========================
   FAQ: data-cat（バッジ）位置を整列（flex→grid）
   ========================= */

/* summary行を 3列グリッドに固定
   [質問文] [バッジ] [矢印] */
.content_wrap .faq__q{
  display: grid;
  grid-template-columns: 1fr auto 20px; /* 最右は矢印の固定幅 */
  align-items: center;
  column-gap: 12px;

  /* 既存の見た目は維持（必要に応じて） */
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-weight: 900;
}

/* 質問文が長いときは省略ではなく折り返し優先（整列を崩さない） */
.content_wrap .faq__qText{
  min-width: 0;                 /* grid内で折り返し/省略を効かせるため必須 */
  line-height: 1.45;
  /* もし1行で省略したいなら下をON
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  */
}

/* バッジを “同じ位置” で右寄せに固定 */
.content_wrap .faq__meta{
  justify-self: end;            /* バッジを列の右端へ */
  text-align: center;
  white-space: nowrap;
  min-width: 78px;              /* ←好みで調整：全部のバッジ幅を揃える */
  padding: 4px 10px;
  border-radius: 999px;
}

/* 右端の矢印を必ず最右列へ（gridの3列目） */
.content_wrap .faq__q::after{
  grid-column: 3;
  justify-self: end;
  margin-left: 0;               /* flex時の余白が残ってたら無効化 */
}

/* open時の背景はそのまま */
.content_wrap .faq__item[open] .faq__q{
  background: #f3f7ff;
}
/* set-banner：公式風に、コピーは上品・CTAは押せる感 */
.content_wrap .set-banner__deal{
  color: var(--muted);
  font-weight: 800;
}

.content_wrap .set-banner__deal strong{
  color: var(--text); /* 数字は黒寄りで上品に */
}

.content_wrap .set-banner__cta{
  border-color: rgba(11,87,208,.25);
  background: #fff;
}

.content_wrap .set-banner__cta:hover{
  background: var(--brandSoft);
}
.content_wrap .set-banner__lead{
  font-size:15px;
  font-weight:900;
  letter-spacing:-.01em;
}

.content_wrap .set-banner__deal{
  color: var(--muted);
}

.content_wrap .set-banner__deal strong{
  color: var(--text);
}
/* 4ステップはカード内余白を確保 */
.content_wrap #apply-steps{
  padding: 0; /* cardの外枠はそのまま */
}

.content_wrap #apply-steps .titlebar{
  padding: 14px 14px 0; /* 既存titlebarと同じ */
}

.content_wrap #apply-steps .features-rail{
  padding: 0 14px 14px; /* 中身が左に寄らないように */
}
/* Trouble steps cards */
.content_wrap .ts-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.content_wrap .ts-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.content_wrap .ts-head{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.content_wrap .ts-badge{
  width:32px; height:32px;
  border-radius:999px;
  background: var(--brandSoft);
  color: var(--brand);
  font-weight:900;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}

.content_wrap .ts-title{
  margin:0;
  font-size:15px;
}

.content_wrap .ts-sub{
  margin:2px 0 0;
  font-size:12px;
  color: var(--muted2);
}

.content_wrap .ts-steps{
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}

.content_wrap .ts-steps strong{
  font-weight: 900;
}
.content_wrap .ts-steps li{
	list-style: decimal;
}/*add*/
.ts-actions{
  margin-top:auto;
  display:flex;
  gap:10px;
}

.content_wrap .ts-actions .btn{
  flex:1;
  text-align:center;
}

.content_wrap .ts-note{
  margin: 0;
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.55;
}

/* responsive */
@media (max-width: 980px){
  .content_wrap .ts-cards{ grid-template-columns: 1fr; }
}
/* 利用規約・注意事項 */
.content_wrap .terms{
  margin-top: 24px;
}

.content_wrap .terms-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin-top:16px;
  background:#fff;
}

.content_wrap .terms-head{
  margin:0 0 6px;
  font-size:15px;
  font-weight:900;
}

.content_wrap .terms-desc{
  margin:0 0 10px;
  font-size:13px;
  color:var(--muted);
}

/* 規約リンク */
.content_wrap .terms-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.content_wrap .terms-link{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  font-weight:900;
}

.content_wrap .terms-link::after{
  content:"→";
  margin-left:6px;
  color:var(--muted2);
}

/* 重要注意 */
.content_wrap .terms-important{
  padding-left:18px;
  margin:10px 0;
  font-size:13px;
  line-height:1.7;
}

.content_wrap .terms-important strong{
  color:var(--brand);
}

/* アコーディオン */
.content_wrap .terms-details{
  margin-top:8px;
}

.content_wrap .terms-details summary{
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  color:var(--brand);
}

.content_wrap .terms-details summary::after{
  content:"＋";
  margin-left:6px;
}

.content_wrap .terms-details[open] summary::after{
  content:"−";
}

/* 詳細リスト */
.content_wrap .terms-list{
  margin-top:10px;
  padding-left:18px;
  font-size:13px;
  line-height:1.7;
}

.content_wrap .terms-sublist{
  margin-top:6px;
  padding-left:18px;
  font-size:12.5px;
  color:var(--muted);
}

.content_wrap .terms-note{
  font-size:12px;
  color:var(--muted2);
  margin-top:4px;
}
/* 注意事項だけメタを少し強調 */
.content_wrap #terms .faq__meta{
  background: #fff3e0;
  color: #b45309;
  border-color: #fde68a;
}
.faq__footer {
    margin-top: 40px;
}

.faq__footerCard {
    width: 100%;
}

.faq__footerActions {
    width: 100%;
}

.contactBox {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 46px 24px;
    border: 1px solid #9a9a9a;
    background: #fff;
    color: #1f2933;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contactBox:hover {
    opacity: 0.85;
    text-decoration: none;
}

.contactBox__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    color: #202833;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.4;
}

.contactBox__line {
    width: 100%;
    height: 1px;
    margin: 12px 0 28px;
    background: #8f8f8f;
}

.contactBox__time {
    margin: 0;
    color: #1f2933;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.7;
}

.contactBox__note {
    margin: 20px 0 0;
    color: #1f2933;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
}

.support-item p a.text-link,
.support-item p a.text-link:visited {
    color: #0068b7 !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.support-item p a.text-link:hover {
    color: #004f8f !important;
    text-decoration: none;
}
.promo-banners {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    margin: 16px 0 0;
}

.promo-banners__link {
    display: block;
    width: 100%;
    max-width: 540px;
}

.promo-banners__img {
    display: block;
    width: 100%;
    height: auto;
}
/* 左右カードの下端を揃える */
.grid {
    align-items: stretch;
}

/* 左右カードを同じ高さで伸ばす */
#buy,
#supportCard {
    height: 100%;
}

/* 左の申込カード内を縦配置にする */
#buy {
    display: flex;
    flex-direction: column;
}

/* 機種画像エリアで余白を吸収する */
#buy .device-media {
    flex: 1;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 画像を大きめに表示 */
#deviceImg {
    width: auto;
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
}

/* 画像未表示時の案内文も中央に */
#deviceImgHint {
    text-align: center;
}

/* 下の申込ボタンをカード下側へ寄せる */
#buy .buy-actions {
    margin-top: auto;
}
#setBanner[hidden] {
    display: none !important;
}

/* =========================
   contactBox メールアイコン
   ========================= */
.contactBox__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* メールアイコン本体 */
.mailicon {
  display: inline-block;
  position: relative;
  flex-shrink: 0;

  width: 32px;
  height: 22px;

  margin-left: 0;
  color: #202833;

  border: 2px solid currentColor;
  border-radius: 3px;
  background: #fff;

  box-sizing: border-box;

  /* はみ出し防止：これが重要 */
  overflow: hidden;
}

/* 左上から中央へ向かう封筒ライン */
.mailicon::before {
  content: "";
  position: absolute;

  left: -2px;
  top: 4px;

  width: 20px;
  height: 2px;

  background: currentColor;
  transform: rotate(35deg);
  transform-origin: left center;
}

/* 右上から中央へ向かう封筒ライン */
.mailicon::after {
  content: "";
  position: absolute;

  right: -2px;
  top: 4px;

  width: 20px;
  height: 2px;

  background: currentColor;
  transform: rotate(-35deg);
  transform-origin: right center;
}

/* SP調整 */
@media screen and (max-width: 600px) {
  .contactBox__title {
    gap: 8px;
  }

  .mailicon {
    width: 28px;
    height: 19px;
  }

  .mailicon::before {
    left: -2px;
    top: 3px;
    width: 18px;
  }

  .mailicon::after {
    right: -2px;
    top: 3px;
    width: 18px;
  }
}